/* Settings › Festival Theme: the Diwali look. Loaded only while the theme is on. Every class starts with dw-.
   Pictures are PNG; the flames, the sky and the glow are CSS; the fireworks are drawn in assets/js/diwali.js. */

/* ---------- Every shopping page: the night sky and the garland ---------- */
body.dw-on {
    background:
        radial-gradient(1.5px 1.5px at 40px 60px, #ffe9b0, transparent),
        radial-gradient(1px 1px at 130px 20px, #fff, transparent),
        radial-gradient(1.5px 1.5px at 210px 110px, #ffd27a, transparent),
        radial-gradient(1px 1px at 300px 70px, #fff, transparent),
        radial-gradient(1.5px 1.5px at 370px 150px, #ffc6e0, transparent),
        radial-gradient(1px 1px at 90px 190px, #fff, transparent),
        radial-gradient(1.5px 1.5px at 260px 220px, #ffe9b0, transparent),
        #1a0b33;
    background-size: 420px 260px, 420px 260px, 420px 260px, 420px 260px, 420px 260px, 420px 260px, 420px 260px, auto;
}
.dw-on .topbar { color: #ffeccb; }
.dw-on .topbar-offer > i, .dw-on .topbar-links i { color: #ffc94d; }
.dw-on .topbar-links a:hover { color: #ffd76a; }
.dw-on .topbar-links a:hover i { color: #ffd76a; }
.dw-on .sheet { box-shadow: 0 0 0 1px rgba(255, 205, 110, .4), 0 0 46px rgba(255, 150, 40, .28); }

/* Marigolds and mango leaves along the top of the sheet; the leaves hang into the header's empty top edge */
.dw-toran { position: relative; z-index: 31; height: 50px; pointer-events: none; background: linear-gradient(180deg, #fff6e4, #fff); }
.dw-toran::before {
    content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 68px;
    background: url("../images/diwali/toran.png") repeat-x left top / 384px 68px;
}
/* Live, each swag of the garland sways by itself, one a little after the other, so a breeze runs along it (diwali.js) */
.dw-toran { --dw-swag: 192px; --dw-swag-h: 68px; }
.dw-toran.is-live::before { display: none; }
.dw-swags { position: absolute; left: 0; top: -2px; display: flex; width: max-content; }
.dw-swag {
    flex: none; width: var(--dw-swag); height: var(--dw-swag-h); transform-origin: 50% 0;
    background: url("../images/diwali/toran.png") no-repeat 0 0 / calc(var(--dw-swag) * 2) var(--dw-swag-h);
    animation: dw-breeze 3.4s ease-in-out infinite alternate;
}
.dw-swag:nth-child(2n) { background-position: calc(var(--dw-swag) * -1) 0; }
@keyframes dw-breeze {
    from { transform: skewX(3.5deg) scaleY(.95); }
    to { transform: skewX(-3.5deg) scaleY(1.05); }
}

/* A small lantern hanging from each end of the garland */
.dw-toran-lantern {
    position: absolute; z-index: 1; top: 6px; width: 25px; height: auto; transform-origin: 50% 0; animation: dw-sway 4.2s ease-in-out infinite alternate;
    filter: drop-shadow(0 0 6px rgba(255, 170, 50, .6));
}
.dw-toran-lantern.is-left { left: 3px; }
.dw-toran-lantern.is-right { right: 3px; animation-delay: -1.7s; }

/* The page: warm paper with faint gold dots, fairy lights under the header */
.dw-on .sheet { background: radial-gradient(rgba(226, 150, 30, .1) 1px, transparent 1.6px) 0 0 / 22px 22px, #fffaf1; }
.dw-on .site-header { background: rgba(255, 250, 241, .96); }
.dw-on .site-header::before, .dw-on .site-header::after {
    content: ""; position: absolute; z-index: 3; left: 0; right: 0; bottom: -5px; height: 10px; pointer-events: none;
}
.dw-on .site-header::before {
    background:
        radial-gradient(circle, #ffc21a 0 2.6px, rgba(255, 194, 26, .35) 3px, transparent 5px) 0 0 / 48px 10px repeat-x,
        radial-gradient(circle, #ff3d5e 0 2.6px, rgba(255, 61, 94, .35) 3px, transparent 5px) 24px 0 / 48px 10px repeat-x,
        linear-gradient(90deg, rgba(190, 130, 20, .5), rgba(190, 130, 20, .5)) 0 50% / 100% 1px no-repeat;
    animation: dw-twinkle 1.5s ease-in-out infinite alternate;
}
.dw-on .site-header::after {
    background:
        radial-gradient(circle, #24b8ff 0 2.6px, rgba(36, 184, 255, .35) 3px, transparent 5px) 12px 0 / 48px 10px repeat-x,
        radial-gradient(circle, #2fd36b 0 2.6px, rgba(47, 211, 107, .35) 3px, transparent 5px) 36px 0 / 48px 10px repeat-x;
    animation: dw-twinkle 1.5s ease-in-out -1.5s infinite alternate;
}
@keyframes dw-twinkle { from { opacity: 1; } to { opacity: .35; } }

/* Marigolds on the corners (added by diwali.js) */
.dw-orn {
    position: absolute; z-index: 4; width: var(--dw-size, 40px); height: var(--dw-size, 40px); pointer-events: none;
    background: url("../images/diwali/corner.png") 0 0 / contain no-repeat;
}
.dw-orn.is-tl { top: 0; left: 0; }
.dw-orn.is-tr { top: 0; right: 0; transform: scaleX(-1); }
.dw-orn.is-bl { bottom: 0; left: 0; transform: scaleY(-1); }
.dw-orn.is-br { bottom: 0; right: 0; transform: scale(-1); }

/* A flower divider between the sections, and a rangoli in the screen's bottom corners */
.dw-divider { height: 24px; margin-block: 2px; background: url("../images/diwali/divider.png") no-repeat center / min(90%, 420px) auto; }
.dw-screen-corner {
    position: fixed; z-index: 27; bottom: -62px; width: 124px; height: 124px; pointer-events: none;
    background: url("../images/diwali/rangoli.png") center / contain no-repeat; animation: dw-turn 50s linear infinite;
}
.dw-screen-corner.is-left { left: -62px; }
.dw-screen-corner.is-right { right: -62px; animation-direction: reverse; }

/* Headings: a marigold and a gold line */
.dw-on .section-head { padding-bottom: 8px; background: linear-gradient(90deg, #eda92a, rgba(237, 169, 42, .12) 60%, transparent) 0 100% / 100% 2px no-repeat; }
.dw-on .section-head h2::after, .dw-on .needs-head h2::after, .dw-on .faq-head h2::after, .dw-on .reviews-intro h2::after {
    content: ""; display: inline-block; flex: none; width: 19px; height: 19px; margin-left: 7px; vertical-align: -3px;
    background: url("../images/diwali/marigold.png") center / contain no-repeat; animation: dw-turn 14s linear infinite;
}
.dw-on .needs-head h2::after { background-image: url("../images/diwali/marigold2.png"); }

/* The sidebar, pictures, cards and boxes: gold edges */
.dw-on .cat-sidebar { position: relative; }
.dw-on .cat-sidebar-head { background: linear-gradient(100deg, #7c1432, #d10a12 70%, #ec5a12); }
.dw-on .cat-menu { box-shadow: inset 0 0 0 1px rgba(232, 170, 50, .45); }
.dw-on .hero, .dw-on .highlights.has-offers { box-shadow: 0 0 0 2px #f2bd52, 0 10px 26px -14px rgba(226, 130, 20, .7); }
.dw-on .cat-thumb { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #efb440; }
.dw-on .cat-strip-list li::after {
    content: ""; position: absolute; left: calc(50% + 18px); top: 1px; width: 16px; height: 16px; pointer-events: none;
    background: url("../images/diwali/marigold.png") center / contain no-repeat;
}
.dw-on .cat-strip-list li:nth-child(2n)::after { background-image: url("../images/diwali/marigold2.png"); }
.dw-on .promo-card { box-shadow: inset 0 0 0 1.5px rgba(232, 170, 50, .65); }
.dw-on .product-card { border-color: rgba(232, 170, 50, .5); }
.dw-on .product-card:hover { border-color: #eeb032; box-shadow: 0 10px 26px -12px rgba(232, 150, 30, .65); }
.dw-on .upload-box { box-shadow: inset 0 0 0 1px rgba(232, 170, 50, .6); }
.dw-on .pill-link { box-shadow: inset 0 0 0 1px rgba(232, 170, 50, .75); }
.dw-on .shelf-panel, .dw-on .needs-panel, .dw-on .faq-panel, .dw-on .reviews-inner, .dw-on .page-hero { box-shadow: 0 0 0 1.5px rgba(232, 170, 50, .55); }

/* The footer: a row of diyas with live flames on top (diwali.js), gold headings, a faint rangoli */
.dw-on .trust-strip { background: #fff6e4; border-top-color: #f2cd80; }
.dw-on .footer-main { position: relative; overflow: hidden; }
.dw-foot-diyas { display: flex; justify-content: center; overflow: hidden; padding-top: 22px; }
.dw-foot-diya { position: relative; flex: none; width: 112px; padding-inline: 18px; }
.dw-foot-diya img { display: block; width: 100%; height: auto; -webkit-user-drag: none; user-select: none; }
.dw-foot-diya .dw-flame {
    left: calc(18px + 76px * .769); bottom: 33px; width: 12px; height: 24px; margin-left: -6px; opacity: 1; transform: none;
    animation: dw-flicker .9s ease-in-out infinite alternate;
}
.dw-on .footer-main::after {
    content: ""; position: absolute; right: -130px; bottom: -130px; width: 340px; height: 340px; opacity: .2; pointer-events: none;
    background: url("../images/diwali/rangoli.png") center / contain no-repeat;
}
.dw-on .site-footer h2 { color: #ffd76a; }

/* ---------- The homepage banner ---------- */
.dw-wrap { padding-top: 8px; padding-bottom: 14px; }
.dw-band {
    position: relative; isolation: isolate; overflow: hidden;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 22px;
    min-height: 152px; padding: 14px clamp(120px, 11vw, 168px); border-radius: 20px; color: #fff;
    background:
        radial-gradient(1.5px 1.5px at 60px 34px, #fff, transparent),
        radial-gradient(1.5px 1.5px at 190px 96px, #ffe9b0, transparent),
        radial-gradient(1px 1px at 280px 26px, #fff, transparent),
        radial-gradient(1.5px 1.5px at 390px 120px, #ffc6e0, transparent),
        radial-gradient(1px 1px at 470px 60px, #fff, transparent),
        radial-gradient(60% 130% at 72% 110%, rgba(255, 150, 40, .42), transparent 70%),
        linear-gradient(112deg, #190a3c, #4a0d52 46%, #7c1432 78%, #a33a12);
    background-size: 520px 150px, 520px 150px, 520px 150px, 520px 150px, 520px 150px, auto, auto;
    box-shadow: inset 0 0 0 1px rgba(255, 210, 120, .4);
}
.dw-rangoli { position: absolute; z-index: -1; width: 270px; height: 270px; max-width: none; opacity: .55; animation: dw-turn 70s linear infinite; pointer-events: none; }
.dw-rangoli.is-left { left: -100px; bottom: -130px; }
.dw-rangoli.is-right { right: -100px; top: -130px; animation-direction: reverse; }
@keyframes dw-turn { to { transform: rotate(360deg); } }

.dw-lantern {
    position: absolute; z-index: 1; top: -4px; width: 58px; height: auto; cursor: pointer; transform-origin: 50% 0;
    animation: dw-sway 4.6s ease-in-out infinite alternate; filter: drop-shadow(0 0 12px rgba(255, 180, 60, .55));
    -webkit-user-drag: none; user-select: none;
}
.dw-lantern.is-a { left: 16px; }
.dw-lantern.is-b { left: 74px; top: -22px; width: 44px; animation-duration: 3.8s; animation-delay: -1.2s; }
.dw-lantern.is-c { right: 16px; animation-delay: -2.1s; }
.dw-lantern.is-d { right: 74px; top: -22px; width: 44px; animation-duration: 3.8s; animation-delay: -.5s; }
.dw-lantern.is-swing { animation: dw-swing 1.5s ease-out; }
@keyframes dw-sway { from { transform: rotate(-3.5deg); } to { transform: rotate(3.5deg); } }
@keyframes dw-swing { 0% { transform: rotate(0); } 18% { transform: rotate(17deg); } 40% { transform: rotate(-12deg); } 62% { transform: rotate(7deg); } 82% { transform: rotate(-3deg); } 100% { transform: rotate(0); } }

.dw-copy { min-width: 0; }
.dw-title {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; margin: 0; font-size: clamp(27px, 2.9vw, 40px); font-weight: 800; line-height: 1.1; letter-spacing: -.01em;
    color: #ffd76a; background: linear-gradient(100deg, #ffc23d 20%, #fff6cf 40%, #ffc23d 60%) 0 0 / 240% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    animation: dw-shine 5s linear infinite;
}
.dw-hindi { font-size: .56em; font-weight: 700; letter-spacing: 0; }
@keyframes dw-shine { to { background-position: -240% 0; } }
.dw-text { margin: 5px 0 0; max-width: 460px; font-size: 13px; line-height: 1.45; color: #ffeedd; }
.dw-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.dw-cta {
    display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 16px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #4a0d1e;
    background: linear-gradient(180deg, #ffe48a, #ffb92e); box-shadow: 0 8px 18px -8px rgba(255, 180, 40, .9); transition: transform .2s;
}
.dw-cta i { font-size: 11px; transition: transform .2s; }
.dw-cta:hover { transform: translateY(-2px); }
.dw-cta:hover i { transform: translateX(3px); }
.dw-cta:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.dw-count { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #ffe9b8; background: rgba(255, 255, 255, .12); }
.dw-count i { font-size: 10px; color: #ffc94d; }

.dw-lights { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.dw-hint { margin: 0; font-size: 12px; font-weight: 600; color: #ffe9b8; text-align: center; }
.dw-hint.is-done { color: #ffd76a; }
.dw-row { display: flex; align-items: flex-end; }
.dw-diya { position: relative; width: 62px; padding: 28px 0 2px; cursor: pointer; transition: transform .2s; }
.dw-diya:hover { transform: translateY(-3px); }
.dw-diya:focus-visible { outline: 2px solid #ffd76a; outline-offset: -2px; border-radius: 10px; }
.dw-diya img { display: block; width: 100%; height: auto; filter: brightness(.62) saturate(.8); transition: filter .4s; -webkit-user-drag: none; user-select: none; }
.dw-diya.is-lit img { filter: none; }
/* The flame sits on the wick, which is drawn to the right of the bowl */
.dw-flame {
    position: absolute; left: 77%; bottom: 30px; width: 11px; height: 22px; margin-left: -5.5px; opacity: 0; transform: scale(.2); transform-origin: 50% 100%;
    border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: radial-gradient(circle at 50% 74%, #fff 0 18%, #fff08a 34%, #ffb31f 62%, #ff5a0a 100%);
    transition: opacity .25s, transform .35s cubic-bezier(.3, 1.6, .5, 1);
}
.dw-flame::before {
    content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; width: 62px; height: 62px; margin: -31px 0 0 -31px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 190, 70, .55), rgba(255, 150, 40, .16) 48%, transparent 70%);
}
.dw-diya.is-lit .dw-flame { opacity: 1; transform: none; animation: dw-flicker .9s ease-in-out infinite alternate; }
.dw-diya:nth-child(2n) .dw-flame { animation-duration: .75s; animation-delay: -.4s; }
.dw-diya:nth-child(3n) .dw-flame { animation-duration: 1.05s; animation-delay: -.8s; }
@keyframes dw-flicker {
    0% { transform: scale(1, 1) skewX(-7deg); }
    25% { transform: scale(.9, 1.13) skewX(6deg); }
    50% { transform: scale(1.06, .92) skewX(-4deg); }
    75% { transform: scale(.93, 1.1) skewX(8deg); }
    100% { transform: scale(1, 1.03) skewX(-6deg); }
}

/* ---------- Fireworks: the sky over the page, and the buttons ---------- */
.dw-sky { position: fixed; inset: 0; z-index: 28; width: 100%; height: 100%; pointer-events: none; }
.dw-launch, .dw-off { color: #ffe48a; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 210, 120, .55); transition: transform .2s, opacity .2s, background .2s; }
.dw-launch { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700; }
.dw-off { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 10.5px; }
.dw-launch:hover, .dw-off:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .22); }
.dw-launch:focus-visible, .dw-off:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.dw-off[aria-pressed="true"] { opacity: .55; color: #fff; }

/* ---------- Tablets ---------- */
@media (max-width: 1100px) {
    .dw-band { padding-inline: 74px; gap: 14px; }
    .dw-lantern.is-b, .dw-lantern.is-d { display: none; }
    .dw-diya { width: 48px; padding-top: 25px; }
    .dw-flame { bottom: 24px; width: 9px; height: 18px; margin-left: -4.5px; }
    .dw-flame::before { width: 50px; height: 50px; margin: -25px 0 0 -25px; }
}
/* ---------- Small tablets and phones: stacked and centred ---------- */
@media (max-width: 900px) {
    .dw-band { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 8px; min-height: 0; padding: 12px 74px 10px; text-align: center; }
    .dw-title { justify-content: center; }
    .dw-text { margin-inline: auto; }
    .dw-actions { justify-content: center; }
}
@media (max-width: 767px) {
    .dw-toran { height: 38px; }
    .dw-toran::before { height: 53px; background-size: 300px 53px; }
    .dw-toran-lantern { width: 19px; top: 4px; }
    .dw-divider { height: 20px; margin-block: 0; }
    .dw-screen-corner { display: none; }
    .dw-swag { --dw-swag: 150px; --dw-swag-h: 53px; }
    .dw-foot-diyas { padding-top: 18px; }
    .dw-foot-diya { width: 84px; padding-inline: 13px; }
    .dw-foot-diya .dw-flame { left: calc(13px + 58px * .769); bottom: 25px; width: 10px; height: 19px; margin-left: -5px; }
    .dw-on .cat-strip-list li::after { left: calc(50% + 14px); width: 13px; height: 13px; }
    .dw-wrap { padding-top: 6px; padding-bottom: 10px; }
    .dw-band { padding-inline: 12px; border-radius: 16px; }
    .dw-rangoli { width: 170px; height: 170px; }
    .dw-rangoli.is-left { left: -70px; bottom: -76px; }
    .dw-rangoli.is-right { right: -70px; top: -76px; }
    .dw-lantern { width: 32px; }
    .dw-lantern.is-a { left: 8px; }
    .dw-lantern.is-c { right: 8px; }
    .dw-title { font-size: 26px; padding-inline: 34px; }
    .dw-text { display: none; }
    .dw-actions { gap: 7px; margin-top: 8px; }
    .dw-cta, .dw-launch { min-height: 34px; }
    .dw-cta { padding: 0 13px; font-size: 12.5px; }
    .dw-launch { padding: 0 12px; font-size: 12px; }
    .dw-count { padding: 4px 9px; font-size: 11.5px; }
    .dw-diya { width: 44px; padding-top: 22px; }
    .dw-flame { bottom: 22px; width: 8px; height: 16px; margin-left: -4px; }
}

@media (prefers-reduced-motion: reduce) {
    .dw-rangoli, .dw-lantern, .dw-title, .dw-diya.is-lit .dw-flame, .dw-foot-diya .dw-flame, .dw-swag, .dw-toran-lantern, .dw-screen-corner,
    .dw-on .site-header::before, .dw-on .site-header::after,
    .dw-on .section-head h2::after, .dw-on .needs-head h2::after, .dw-on .faq-head h2::after, .dw-on .reviews-intro h2::after { animation: none; }
    .dw-launch, .dw-off { display: none; }
}