/* Campaign artwork is composed independently for wide and portrait viewports. */
.zawadi .home-top, .zawadi .retail-hero-layout, .zawadi .home-carousel { min-width: 0; max-width: 100%; }
.zawadi .home-carousel { position: relative; overflow: hidden; width: 100%; border-radius: 18px; isolation: isolate; }
.zawadi .home-carousel-track { align-items: stretch; }
.zawadi .home-carousel:not(.swiper-initialized) .home-carousel-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.zawadi .home-carousel-slide { min-width: 0; height: auto; flex-shrink: 0; scroll-snap-align: center; }
.zawadi .home-carousel:not(.swiper-initialized) .home-carousel-slide { flex-basis: 100%; }
.zawadi .home-carousel .home-hero { --campaign-ink: #183b3e; height: 100%; min-height: 370px; padding: 42px 7% 52px; border-radius: 18px; grid-template-columns: 1fr 1.1fr; gap: 24px; background: radial-gradient(ellipse at 78% 36%, #fff8de 0, transparent 54%), linear-gradient(115deg, #ffe1a2, #ffbc65); color: var(--campaign-ink); }
.zawadi .home-carousel [data-campaign-tone="1"] .home-hero { --campaign-ink: #25254e; background: radial-gradient(ellipse at 80% 30%, #f2efff, transparent 60%), linear-gradient(115deg, #c3b8fa, #e8ddff); }
.zawadi .home-carousel [data-campaign-tone="2"] .home-hero { --campaign-ink: #123e39; background: radial-gradient(ellipse at 80% 30%, #e0ffee, transparent 60%), linear-gradient(115deg, #a9dcc5, #d7efe1); }
.zawadi .home-carousel [data-campaign-tone="3"] .home-hero { --campaign-ink: #3d293c; background: radial-gradient(ellipse at 80% 30%, #fff2e4, transparent 60%), linear-gradient(115deg, #f2c4cf, #fae1d1); }
.zawadi .home-carousel .home-hero::before { content: ''; position: absolute; width: 480px; height: 480px; right: 1%; top: 50%; transform: translateY(-50%); border: 1px solid #ffffff70; border-radius: 50%; box-shadow: 0 0 0 45px #ffffff20, 0 0 0 90px #ffffff14; pointer-events: none; }
.zawadi .home-carousel .hero-copy { z-index: 2; }
.zawadi .home-carousel .eyebrow { color: inherit; font-size: 11px; font-weight: 700; letter-spacing: .12em; }
.zawadi .home-carousel .eyebrow::before { display: none; }
.zawadi .home-carousel .hero-copy :is(h1,h2) { max-width: 13ch; margin: 14px 0 16px; font-size: clamp(32px, 3.7vw, 56px); line-height: 1.04; font-weight: 750; letter-spacing: -.045em; color: inherit; }
.zawadi .home-carousel .hero-copy p { display: block; max-width: 32ch; font-size: 15px; color: inherit; opacity: .78; margin: 0 0 22px; line-height: 1.5; }
.zawadi .home-carousel .hero-copy .btn { display: inline-flex; min-height: 44px; border: 0; border-radius: 30px; padding: 12px 20px; font-size: 13px; font-weight: 650; background: var(--campaign-ink); color: #fff; box-shadow: 0 5px 18px #20303212; }
.zawadi .home-carousel .hero-copy .btn:hover { background: #fff; color: var(--campaign-ink); }
.zawadi .home-carousel .hero-visual { position: relative; z-index: 1; height: 285px; }
.zawadi .home-carousel .hero-visual img { height: 100%; max-width: 100%; width: 100%; object-fit: contain; filter: drop-shadow(0 20px 16px #25353625); user-select: none; -webkit-user-drag: none; }
.zawadi .home-carousel-controls { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.zawadi .home-carousel-controls[hidden] { display: none; }
.zawadi .home-carousel-arrow { pointer-events: auto; position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border: 1px solid #ffffff90; border-radius: 50%; background: #ffffffb8; color: #203b3d; backdrop-filter: blur(12px); transition: background .2s; }
.zawadi .home-carousel-arrow:hover { background: white; }
.zawadi [data-banner-prev] { left: 14px; }
.zawadi [data-banner-next] { right: 14px; }
.zawadi [data-banner-prev] .icon { transform: rotate(180deg); }
.zawadi .home-carousel-arrow .icon { width: 20px; height: 20px; }
.zawadi .home-carousel-dots { pointer-events: auto; position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; padding: 0 7px; border-radius: 30px; background: #ffffffb0; backdrop-filter: blur(8px); }
.zawadi .home-carousel-dots button { display: grid; place-items: center; width: 18px; height: 32px; padding: 0; border: 0; background: transparent; border-radius: 8px; }
.zawadi .home-carousel-dots button[aria-current="true"] { width: 28px; }
.zawadi .home-carousel-dots button::before { content: ''; display: block; width: 6px; height: 6px; border-radius: 8px; background: #284d4e40; transition: width .3s, background-color .3s; }
.zawadi .home-carousel-dots button[aria-current="true"]::before { width: 20px; background: #284d4e; }
.zawadi .category-grid::-webkit-scrollbar { display: none; }
@media (max-width: 760px) {
 .zawadi .retail-hero-layout { order: 0; margin-top: 22px; }
 .zawadi .home-carousel { width: 100vw; max-width: none; margin-inline: calc((100% - 100vw) / 2); border-radius: 0; padding-bottom: 0; }
 .zawadi .home-carousel .home-hero { min-height: 0; height: clamp(420px, 112vw, 510px); border-radius: 22px; padding: 26px 22px 18px; display: flex; flex-direction: column; align-items: stretch; gap: 10px; background: radial-gradient(ellipse at 50% 76%, #fff2c3, transparent 57%), linear-gradient(155deg, #ffd274, #ffb558); }
 .zawadi .home-carousel [data-campaign-tone="1"] .home-hero { background: radial-gradient(ellipse at 50% 80%, #f2eaff, transparent 55%), linear-gradient(155deg, #b5a4ef, #ddd1fa); }
 .zawadi .home-carousel [data-campaign-tone="2"] .home-hero { background: radial-gradient(ellipse at 50% 80%, #e6fff1, transparent 55%), linear-gradient(155deg, #9cd5b8, #c7e8d8); }
 .zawadi .home-carousel [data-campaign-tone="3"] .home-hero { background: radial-gradient(ellipse at 50% 80%, #ffefe4, transparent 55%), linear-gradient(155deg, #efb9c7, #f8d8c1); }
 .zawadi .home-carousel .home-hero::before { width: 250px; height: 250px; top: auto; bottom: -30px; left: 50%; right: auto; transform: translateX(-50%); box-shadow: 0 0 0 32px #ffffff20, 0 0 0 64px #ffffff12; }
 .zawadi .home-carousel .eyebrow { font-size: 9px; letter-spacing: .09em; }
 .zawadi .home-carousel .hero-copy :is(h1,h2) { font-size: clamp(27px, 7.6vw, 36px); max-width: 12ch; margin: 10px 0 10px; line-height: 1.05; }
 .zawadi .home-carousel .hero-copy p { display: block; font-size: 12px; line-height: 1.45; margin: 0 0 12px; max-width: 25ch; }
 .zawadi .home-carousel .hero-copy .btn { font-size: 11px; padding: 10px 16px; min-height: 40px; }
 .zawadi .home-carousel .hero-visual { flex: 1; min-height: 0; height: auto; width: calc(100% + 12px); margin-left: -6px; }
 .zawadi .home-carousel .hero-visual img { height: 100%; min-height: 0; max-height: 240px; }
 .zawadi .home-carousel-arrow { display: none; }
 .zawadi .home-carousel-dots { display: none; }
 .zawadi .home-carousel:not(.swiper-initialized) .home-carousel-slide { flex-basis: 80%; margin-inline: 7px; }
 .zawadi .category-section { order: 1; min-width: 0; max-width: 100%; padding-top: 22px; }
 .zawadi .category-grid { width: 100vw; max-width: none; margin-inline: calc((100% - 100vw) / 2); padding: 0 16px; overflow-x: auto; overflow-y: hidden; touch-action: pan-x pan-y pinch-zoom; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
 .zawadi .category-tile { padding-bottom: 0; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
 .zawadi .category-media img { pointer-events: none; -webkit-user-drag: none; }
 .zawadi .category-tile:hover .category-media { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
 .zawadi .home-carousel *, .zawadi .home-carousel *::before { transition-duration: 0ms !important; }
}

/* WooCommerce heading margins must not add a second shelf gap. */
.zawadi .home .section-heading h2 { margin: 0; }

/* Uploaded campaign artwork owns its composition and aspect ratio. */
.zawadi .home-carousel .home-hero.full-image-banner { display: block; padding: 0; min-height: 0; height: auto; background: transparent; overflow: hidden; }
.zawadi .home-carousel .home-hero.full-image-banner::before { content: none; }
.zawadi .full-image-banner :is(picture, .full-banner-link) { display: block; width: 100%; }
.zawadi .full-image-banner picture img { display: block; width: 100%; height: auto; max-height: none; margin: 0; padding: 0; border: 0; filter: none; -webkit-user-drag: none; }
.zawadi .full-banner-link:focus-visible { outline: 3px solid #205d61; outline-offset: -4px; }

@media (max-width: 760px) {
 .zawadi .home-carousel:not(.swiper-initialized) .home-carousel-slide:only-child { flex-basis: calc(100% - 32px); margin-inline: 16px; }
}