/* ==========================================================================
   Festive decorations - Diwali
   --------------------------------------------------------------------------
   Linked by includes/header.php ONLY while Admin > Settings > Theme >
   "Festive decorations" is set to Diwali and its end date has not passed
   (includes/festive.php), and never on checkout. When it is off the page
   carries no class, no link to this file and no script, so none of this
   costs anything.

   What it draws, all aria-hidden and pointer-events: none:
     1. A marigold toran hanging under the site header: swags of marigolds
        between tie points, a short marigold string hanging at each tie point
        that sways in the breeze. Pure CSS (.sik-header::before / ::after).
        Space for it is reserved on #sikMain so nothing below moves once it
        paints. It fades out once the sticky header detaches, and it steps
        aside on a page whose hero cards already hang their own string lights
        (the homepage), so two decorated strips never stack.
     2. On the coloured "On sale now" bands (.sik-flash__head - the homepage
        widget and deals.php): fairy lights along the top edge, a gold shimmer
        crossing the band, and two lit diyas with gold sparkles rising from
        them in the band's empty stretch next to "See all". festive.js injects
        these and measures where the empty stretch is; the band's own text and
        buttons are lifted above them.
     3. One small lit diya after the title of the homepage's offer section.
     4. A string of lights along the top edge of the footer.

   Rules of the house: animate transform and opacity only; nothing covers a
   price, a product or a button; prefers-reduced-motion (and the store's own
   "entrance animations off") shows every decoration standing still; anything
   off screen or in a hidden tab drops its animation entirely (not just
   pauses it), so it holds no compositor layer. Each string of lights is
   three repeating background strips - one per twinkle rhythm - so a string
   costs three layers at any width, not one per bulb.
   Artwork is inline SVG data URIs - no image requests, no libraries.
   ========================================================================== */

body.sik-fest--diwali {
    --fest-toran-h: 24px;      /* the garland's height under the header */
    --fest-toran-w: 144px;     /* one swag, tie point to tie point */
    --fest-reserve: 14px;      /* space held open under the header for it */
    --fest-lights-h: 30px;     /* one string of lights: 6 bulbs per 156px at this height */
    --fest-diya-w: 42px;       /* the larger of the band's two diyas */
}
@media (max-width: 767.98px) {
    body.sik-fest--diwali {
        --fest-toran-h: 18px;
        --fest-toran-w: 108px;
        --fest-reserve: 10px;
        --fest-lights-h: 25px;
        --fest-diya-w: 36px;
    }
}

/* --------------------------------------------------------------------------
   1. Toran under the header
   -------------------------------------------------------------------------- */

/* The header is position: relative (or sticky) at every width, so both halves
   hang from its bottom edge. They are the header's first and last generated
   boxes, but the mega panels, the account menu and the search suggestions are
   positioned children with their own z-index, so they still paint over it.
   ::after is otherwise only app.css's 2px "stuck" hairline, which fix-header.css
   already switches off; this rule sets every property that hairline sets.

   ::before is the swags and does not move. ::after is the hanging strings
   alone, swinging from their tie points. It is inset 4px on both sides: the
   swing leans its lower edge by at most 2.6px, so it can never reach past the
   viewport and widen the page. Both use the same tile, centred, so each
   string stays under its knot at any width. */
body.sik-fest--diwali .sik-header::before,
body.sik-fest--diwali .sik-header::after {
    content: "";
    position: absolute;
    top: 100%;
    bottom: auto;
    height: var(--fest-toran-h);
    opacity: 1;
    visibility: visible;
    pointer-events: none;
    transition: opacity .35s ease, visibility 0s linear 0s;
}
body.sik-fest--diwali .sik-header::before {
    left: 0;
    right: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 144 24'%3E%3Cdefs%3E%3CradialGradient id='o' cx='.4' cy='.36' r='.72'%3E%3Cstop offset='0' stop-color='%23FFC547'/%3E%3Cstop offset='.52' stop-color='%23F5841A'/%3E%3Cstop offset='1' stop-color='%23B9400C'/%3E%3C/radialGradient%3E%3CradialGradient id='y' cx='.4' cy='.36' r='.72'%3E%3Cstop offset='0' stop-color='%23FFEB8A'/%3E%3Cstop offset='.52' stop-color='%23FDB515'/%3E%3Cstop offset='1' stop-color='%23CF6F08'/%3E%3C/radialGradient%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%232E6A1A'/%3E%3Cstop offset='.5' stop-color='%235AA332'/%3E%3Cstop offset='1' stop-color='%232E6A1A'/%3E%3C/linearGradient%3E%3Cg id='O'%3E%3Ccircle r='3.4' fill='url(%23o)'/%3E%3Ccircle r='2.9' fill='none' stroke='%23FFE2A0' stroke-opacity='.45' stroke-width='.45' stroke-dasharray='.5 .7'/%3E%3Ccircle r='1.7' fill='none' stroke='%237E2A08' stroke-opacity='.36' stroke-width='.6' stroke-dasharray='.7 .6'/%3E%3C/g%3E%3Cg id='Y'%3E%3Ccircle r='3.4' fill='url(%23y)'/%3E%3Ccircle r='2.9' fill='none' stroke='%23FFF4C8' stroke-opacity='.5' stroke-width='.45' stroke-dasharray='.5 .7'/%3E%3Ccircle r='1.7' fill='none' stroke='%238A4A06' stroke-opacity='.36' stroke-width='.6' stroke-dasharray='.7 .6'/%3E%3C/g%3E%3Cg id='L'%3E%3Cpath d='M0 0C2.7 2.6 2.3 7.7 0 10.8C-2.3 7.7-2.7 2.6 0 0Z' fill='url(%23g)'/%3E%3Cpath d='M0 1.4V9.4' stroke='%23C4E8A0' stroke-opacity='.5' stroke-width='.45'/%3E%3C/g%3E%3C/defs%3E%3Cpath d='M0 1.3H144' stroke='%238A2E0E' stroke-opacity='.75' stroke-width='.7'/%3E%3Cuse href='%23L' transform='translate(71 2.4) rotate(40)'/%3E%3Cuse href='%23L' transform='translate(73 2.4) rotate(-40)'/%3E%3Cuse href='%23O' x='0' y='13.9'/%3E%3Cuse href='%23Y' x='6.5' y='13.81'/%3E%3Cuse href='%23O' x='13' y='13.56'/%3E%3Cuse href='%23Y' x='19.5' y='13.13'/%3E%3Cuse href='%23O' x='26' y='12.53'/%3E%3Cuse href='%23Y' x='32.5' y='11.76'/%3E%3Cuse href='%23O' x='39' y='10.82'/%3E%3Cuse href='%23Y' x='45.5' y='9.71'/%3E%3Cuse href='%23O' x='52' y='8.42'/%3E%3Cuse href='%23Y' x='58.5' y='6.97'/%3E%3Cuse href='%23O' x='65' y='5.34'/%3E%3Cuse href='%23O' x='144' y='13.9'/%3E%3Cuse href='%23Y' x='137.5' y='13.81'/%3E%3Cuse href='%23O' x='131' y='13.56'/%3E%3Cuse href='%23Y' x='124.5' y='13.13'/%3E%3Cuse href='%23O' x='118' y='12.53'/%3E%3Cuse href='%23Y' x='111.5' y='11.76'/%3E%3Cuse href='%23O' x='105' y='10.82'/%3E%3Cuse href='%23Y' x='98.5' y='9.71'/%3E%3Cuse href='%23O' x='92' y='8.42'/%3E%3Cuse href='%23Y' x='85.5' y='6.97'/%3E%3Cuse href='%23O' x='79' y='5.34'/%3E%3Ccircle cx='72' cy='2.7' r='2.2' fill='%23B3122E'/%3E%3Ccircle cx='72' cy='2.7' r='.9' fill='%23FFD36B'/%3E%3C/svg%3E") repeat-x 50% 0 / var(--fest-toran-w) var(--fest-toran-h);
}
body.sik-fest--diwali .sik-header::after {
    left: 4px;
    right: 4px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 144 24'%3E%3Cdefs%3E%3CradialGradient id='o' cx='.4' cy='.36' r='.72'%3E%3Cstop offset='0' stop-color='%23FFC547'/%3E%3Cstop offset='.52' stop-color='%23F5841A'/%3E%3Cstop offset='1' stop-color='%23B9400C'/%3E%3C/radialGradient%3E%3CradialGradient id='y' cx='.4' cy='.36' r='.72'%3E%3Cstop offset='0' stop-color='%23FFEB8A'/%3E%3Cstop offset='.52' stop-color='%23FDB515'/%3E%3Cstop offset='1' stop-color='%23CF6F08'/%3E%3C/radialGradient%3E%3Cg id='O'%3E%3Ccircle r='3.4' fill='url(%23o)'/%3E%3Ccircle r='2.9' fill='none' stroke='%23FFE2A0' stroke-opacity='.45' stroke-width='.45' stroke-dasharray='.5 .7'/%3E%3Ccircle r='1.7' fill='none' stroke='%237E2A08' stroke-opacity='.36' stroke-width='.6' stroke-dasharray='.7 .6'/%3E%3C/g%3E%3Cg id='Y'%3E%3Ccircle r='3.4' fill='url(%23y)'/%3E%3Ccircle r='2.9' fill='none' stroke='%23FFF4C8' stroke-opacity='.5' stroke-width='.45' stroke-dasharray='.5 .7'/%3E%3Ccircle r='1.7' fill='none' stroke='%238A4A06' stroke-opacity='.36' stroke-width='.6' stroke-dasharray='.7 .6'/%3E%3C/g%3E%3C/defs%3E%3Cpath d='M72 3.6V21' stroke='%238A2E0E' stroke-width='.6'/%3E%3Cuse href='%23Y' transform='translate(72 7.7) scale(.9)'/%3E%3Cuse href='%23O' transform='translate(72 12.9) scale(.84)'/%3E%3Cuse href='%23Y' transform='translate(72 17.6) scale(.72)'/%3E%3Ccircle cx='72' cy='20.9' r='1.3' fill='%23E8B64A'/%3E%3Cpath d='M72 21.4L73.3 23.8H70.7Z' fill='%23C9902A'/%3E%3C/svg%3E") repeat-x 50% 0 / var(--fest-toran-w) var(--fest-toran-h);
    transform-origin: 50% 0;
    animation: sik-fest-swing 5.5s ease-in-out infinite alternate;
}

/* Once the header detaches (header.js adds .is-stuck past 8px) the garland
   fades: riding along over the product grid would cover cards. Also out of
   the way while the search suggestions dim the page. Hidden after the fade
   and its swing paused, so nothing keeps running while it is invisible. Two
   rules, not one list: a browser without :has() drops the whole rule it
   appears in. */
body.sik-fest--diwali .sik-header.is-stuck::before,
body.sik-fest--diwali .sik-header.is-stuck::after {
    opacity: 0;
    visibility: hidden;
    animation-play-state: paused;
    transition: opacity .35s ease, visibility 0s linear .35s;
}
body.sik-fest--diwali:has(#sikHeader .sik-suggest.is-open) .sik-header::before,
body.sik-fest--diwali:has(#sikHeader .sik-suggest.is-open) .sik-header::after {
    opacity: 0;
    visibility: hidden;
    animation-play-state: paused;
    transition: opacity .35s ease, visibility 0s linear .35s;
}

/* Room for the garland, so the first thing on every page starts below the
   flowers instead of under them. Part of the first paint (this file is a
   render-blocking <link>), so it is not a layout shift. */
body.sik-fest--diwali #sikMain { padding-top: var(--fest-reserve); }

/* The homepage hero cards hang their own string of lights, lanterns and
   diyas along their top edge. A toran 10px above them would be a second
   decorated strip competing with the first, so on a page that has them the
   toran steps aside - and so does the space held for it. */
body.sik-fest--diwali:has(.sik-hcards__bulbs) .sik-header::before,
body.sik-fest--diwali:has(.sik-hcards__bulbs) .sik-header::after { content: none; }
body.sik-fest--diwali:has(.sik-hcards__bulbs) #sikMain { padding-top: 0; }

@keyframes sik-fest-swing {
    from { transform: skewX(-6deg); }
    to   { transform: skewX(6deg); }
}

/* --------------------------------------------------------------------------
   2. Coloured section bands (.sik-flash__head)
   -------------------------------------------------------------------------- */

/* The band becomes the positioning box for its decorations, and every child
   it already had is lifted above them, so text and "See all" stay on top. */
body.sik-fest--diwali .sik-flash__head {
    position: relative;
    isolation: isolate;
}
body.sik-fest--diwali .sik-flash__head > :not(.sik-fest-fx):not(.sik-fest-diyas) {
    position: relative;
    z-index: 1;
}

/* The clipping layer for lights, shimmer and sparkles. */
.sik-fest-fx {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}

/* Fairy lights. The element itself paints the wire and every bulb's glass,
   always warm amber, and never moves. Its three <i> strips each paint the
   LIGHT of every third bulb (with its glow) and twinkle on their own rhythm,
   so the string shimmers instead of blinking - and at its dimmest a bulb
   still reads as amber glass, not a dead dot. Tiles are centred, so the
   string is symmetric at any width and grows with the element by itself. */
.sik-fest-lights {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--fest-lights-h);
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 156 30'%3E%3Cdefs%3E%3CradialGradient id='g' cx='.42' cy='.34' r='.78'%3E%3Cstop offset='0' stop-color='%23F9CC72'/%3E%3Cstop offset='.58' stop-color='%23E0923A'/%3E%3Cstop offset='1' stop-color='%23A65C14'/%3E%3C/radialGradient%3E%3Cg id='b'%3E%3Cellipse cx='13' cy='11.2' rx='3.1' ry='4.1' fill='url(%23g)'/%3E%3Crect x='11.5' y='6.1' width='3' height='2.3' rx='.6' fill='%234A2A0C'/%3E%3C/g%3E%3C/defs%3E%3Cpath d='M0 .8Q13 13.6 26 .8Q39 13.6 52 .8Q65 13.6 78 .8Q91 13.6 104 .8Q117 13.6 130 .8Q143 13.6 156 .8' fill='none' stroke='%23FFE2A8' stroke-opacity='.62' stroke-width='.9'/%3E%3Cuse href='%23b'/%3E%3Cuse href='%23b' x='26'/%3E%3Cuse href='%23b' x='52'/%3E%3Cuse href='%23b' x='78'/%3E%3Cuse href='%23b' x='104'/%3E%3Cuse href='%23b' x='130'/%3E%3C/svg%3E") repeat-x 50% 0 / auto var(--fest-lights-h);
}
.sik-fest-lights i {
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 156 30'%3E%3Cdefs%3E%3CradialGradient id='h'%3E%3Cstop offset='0' stop-color='%23FFD66B' stop-opacity='.62'/%3E%3Cstop offset='.42' stop-color='%23F59E0B' stop-opacity='.22'/%3E%3Cstop offset='1' stop-color='%23F59E0B' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='l' cx='.5' cy='.42' r='.62'%3E%3Cstop offset='0' stop-color='%23FFFBEA'/%3E%3Cstop offset='.32' stop-color='%23FFD66B'/%3E%3Cstop offset='1' stop-color='%23F59E0B'/%3E%3C/radialGradient%3E%3CradialGradient id='h2'%3E%3Cstop offset='0' stop-color='%23FFB59E' stop-opacity='.6'/%3E%3Cstop offset='.42' stop-color='%23F2704F' stop-opacity='.2'/%3E%3Cstop offset='1' stop-color='%23F2704F' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='l2' cx='.5' cy='.42' r='.62'%3E%3Cstop offset='0' stop-color='%23FFF6EE'/%3E%3Cstop offset='.32' stop-color='%23FFB59E'/%3E%3Cstop offset='1' stop-color='%23F2704F'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='13' cy='11.2' r='10' fill='url(%23h)'/%3E%3Cellipse cx='13' cy='11.2' rx='3.1' ry='4.1' fill='url(%23l)'/%3E%3Crect x='11.5' y='6.1' width='3' height='2.3' rx='.6' fill='%234A2A0C'/%3E%3Ccircle cx='91' cy='11.2' r='10' fill='url(%23h2)'/%3E%3Cellipse cx='91' cy='11.2' rx='3.1' ry='4.1' fill='url(%23l2)'/%3E%3Crect x='89.5' y='6.1' width='3' height='2.3' rx='.6' fill='%234A2A0C'/%3E%3C/svg%3E") repeat-x 50% 0 / auto var(--fest-lights-h);
    animation: sik-fest-twinkle 2.6s ease-in-out infinite;
}
.sik-fest-lights i:nth-child(2) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 156 30'%3E%3Cdefs%3E%3CradialGradient id='h'%3E%3Cstop offset='0' stop-color='%23FFF0B8' stop-opacity='.66'/%3E%3Cstop offset='.42' stop-color='%23FFC94D' stop-opacity='.22'/%3E%3Cstop offset='1' stop-color='%23FFC94D' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='l' cx='.5' cy='.42' r='.62'%3E%3Cstop offset='0' stop-color='%23FFFFF6'/%3E%3Cstop offset='.32' stop-color='%23FFF0B8'/%3E%3Cstop offset='1' stop-color='%23FFC94D'/%3E%3C/radialGradient%3E%3CradialGradient id='h2'%3E%3Cstop offset='0' stop-color='%23FFD66B' stop-opacity='.62'/%3E%3Cstop offset='.42' stop-color='%23F59E0B' stop-opacity='.22'/%3E%3Cstop offset='1' stop-color='%23F59E0B' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='l2' cx='.5' cy='.42' r='.62'%3E%3Cstop offset='0' stop-color='%23FFFBEA'/%3E%3Cstop offset='.32' stop-color='%23FFD66B'/%3E%3Cstop offset='1' stop-color='%23F59E0B'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='39' cy='11.2' r='10' fill='url(%23h)'/%3E%3Cellipse cx='39' cy='11.2' rx='3.1' ry='4.1' fill='url(%23l)'/%3E%3Crect x='37.5' y='6.1' width='3' height='2.3' rx='.6' fill='%234A2A0C'/%3E%3Ccircle cx='117' cy='11.2' r='10' fill='url(%23h2)'/%3E%3Cellipse cx='117' cy='11.2' rx='3.1' ry='4.1' fill='url(%23l2)'/%3E%3Crect x='115.5' y='6.1' width='3' height='2.3' rx='.6' fill='%234A2A0C'/%3E%3C/svg%3E");
    animation-duration: 3.2s;
    animation-delay: -1.1s;
}
.sik-fest-lights i:nth-child(3) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 156 30'%3E%3Cdefs%3E%3CradialGradient id='h'%3E%3Cstop offset='0' stop-color='%23FFC46B' stop-opacity='.62'/%3E%3Cstop offset='.42' stop-color='%23F08A24' stop-opacity='.22'/%3E%3Cstop offset='1' stop-color='%23F08A24' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='l' cx='.5' cy='.42' r='.62'%3E%3Cstop offset='0' stop-color='%23FFF8E6'/%3E%3Cstop offset='.32' stop-color='%23FFC46B'/%3E%3Cstop offset='1' stop-color='%23F08A24'/%3E%3C/radialGradient%3E%3CradialGradient id='h2'%3E%3Cstop offset='0' stop-color='%23FFF0B8' stop-opacity='.66'/%3E%3Cstop offset='.42' stop-color='%23FFC94D' stop-opacity='.22'/%3E%3Cstop offset='1' stop-color='%23FFC94D' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='l2' cx='.5' cy='.42' r='.62'%3E%3Cstop offset='0' stop-color='%23FFFFF6'/%3E%3Cstop offset='.32' stop-color='%23FFF0B8'/%3E%3Cstop offset='1' stop-color='%23FFC94D'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='65' cy='11.2' r='10' fill='url(%23h)'/%3E%3Cellipse cx='65' cy='11.2' rx='3.1' ry='4.1' fill='url(%23l)'/%3E%3Crect x='63.5' y='6.1' width='3' height='2.3' rx='.6' fill='%234A2A0C'/%3E%3Ccircle cx='143' cy='11.2' r='10' fill='url(%23h2)'/%3E%3Cellipse cx='143' cy='11.2' rx='3.1' ry='4.1' fill='url(%23l2)'/%3E%3Crect x='141.5' y='6.1' width='3' height='2.3' rx='.6' fill='%234A2A0C'/%3E%3C/svg%3E");
    animation-duration: 2.1s;
    animation-delay: -.5s;
}

@keyframes sik-fest-twinkle {
    0%, 100% { opacity: 1; }
    45%      { opacity: .45; }
    62%      { opacity: .92; }
}

/* A band of gold light crossing the band every seven seconds. */
.sik-fest-shine {
    position: absolute;
    top: -20%;
    bottom: -20%;
    left: 0;
    width: 32%;
    background: linear-gradient(100deg,
        transparent 0%,
        rgba(255, 226, 150, 0) 16%,
        rgba(255, 226, 150, .26) 44%,
        rgba(255, 248, 225, .36) 52%,
        rgba(255, 226, 150, 0) 84%,
        transparent 100%);
    transform: translate3d(-130%, 0, 0) skewX(-16deg);
    animation: sik-fest-shine 7s ease-in-out 1s infinite;
}
@keyframes sik-fest-shine {
    0%        { transform: translate3d(-130%, 0, 0) skewX(-16deg); }
    45%, 100% { transform: translate3d(330%, 0, 0) skewX(-16deg); }
}

/* Gold sparkles rising like embers from the diyas. festive.js sets this box
   to the band's empty stretch (full height, or only the "See all" / timer
   row when no stretch runs top to bottom), clear of every word, the pill,
   the timer and "See all"; it clips what it holds, so a sparkle - moving or,
   with reduced motion, standing still - never sits on the text. */
.sik-fest-sparks {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0;
    overflow: hidden;
    visibility: hidden;
}
.sik-fest-placed .sik-fest-sparks { visibility: visible; }
.sik-fest-sparks.is-none { display: none; }
.sik-fest-sparks b {
    position: absolute;
    bottom: -6px;
    left: 8%;
    width: 22px;
    height: 22px;
    margin-left: -11px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3CradialGradient id='h'%3E%3Cstop offset='0' stop-color='%23FFD36B' stop-opacity='.75'/%3E%3Cstop offset='.38' stop-color='%23FFB938' stop-opacity='.26'/%3E%3Cstop offset='1' stop-color='%23FFB938' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='s' cx='.5' cy='.5' r='.5'%3E%3Cstop offset='0' stop-color='%23FFFCEB'/%3E%3Cstop offset='.45' stop-color='%23FFE08A'/%3E%3Cstop offset='1' stop-color='%23FFC23D'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='12' cy='12' r='12' fill='url(%23h)'/%3E%3Cpath d='M12 5.2C12.55 10 14 11.45 18.8 12C14 12.55 12.55 14 12 18.8C11.45 14 10 12.55 5.2 12C10 11.45 11.45 10 12 5.2Z' fill='url(%23s)'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: 0;
    animation: sik-fest-rise 6.4s linear infinite;
    --rest: -22px;
}
.sik-fest-sparks b:nth-child(2) { left: 28%; width: 18px; height: 18px; margin-left: -9px;  animation-duration: 7.6s; animation-delay: -2.4s; --rest: -46px; }
.sik-fest-sparks b:nth-child(3) { left: 48%; width: 24px; height: 24px; margin-left: -12px; animation-duration: 6.9s; animation-delay: -4.6s; --rest: -30px; }
.sik-fest-sparks b:nth-child(4) { left: 70%; width: 19px; height: 19px; margin-left: -10px; animation-duration: 8.2s; animation-delay: -1.2s; --rest: -52px; }
.sik-fest-sparks b:nth-child(5) { left: 88%; width: 21px; height: 21px; margin-left: -11px; animation-duration: 7.1s; animation-delay: -5.8s; --rest: -14px; }

@keyframes sik-fest-rise {
    0%   { opacity: 0;   transform: translate3d(0, 0, 0) scale(.5) rotate(0deg); }
    15%  { opacity: 1; }
    65%  { opacity: .75; }
    100% { opacity: 0;   transform: translate3d(8px, -84px, 0) scale(1) rotate(80deg); }
}

/* Two lit diyas, seated inside the band in its empty stretch: just before
   "See all" on a wide band, beside it where "See all" wraps to its own row on
   a phone. festive.js measures the spot (style left / top) and drops to one
   diya, or none, when the band has no room - so they can never sit on the
   title, the pill, the timer or the button. A soft warm glow behind each
   flame, a pool of light under each bowl. */
.sik-fest-diyas {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    display: flex;
    align-items: flex-end;
    gap: calc(var(--fest-diya-w) * .1);
    pointer-events: none;
    visibility: hidden;
}
.sik-fest-placed .sik-fest-diyas { visibility: visible; }
.sik-fest-diyas.is-none { display: none; }
.sik-fest-diyas.is-one .sik-fest-diya + .sik-fest-diya { display: none; }

.sik-fest-diya {
    --w: var(--fest-diya-w);
    position: relative;
    flex: none;
    width: var(--w);
    height: calc(var(--w) * .9);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 12'%3E%3Cdefs%3E%3ClinearGradient id='c' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23D7703A'/%3E%3Cstop offset='.55' stop-color='%23A9461B'/%3E%3Cstop offset='1' stop-color='%236E260C'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23A8740E'/%3E%3Cstop offset='.5' stop-color='%23FFE39A'/%3E%3Cstop offset='1' stop-color='%23A8740E'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M.8 3.1C2.4 8.8 7.6 11.7 14 11.7S25.6 8.8 27.2 3.1C24.4 4.8 19.6 5.7 14 5.7S3.6 4.8.8 3.1Z' fill='url(%23c)'/%3E%3Cellipse cx='14' cy='3.1' rx='13.2' ry='2.5' fill='url(%23r)'/%3E%3Cellipse cx='14' cy='3.2' rx='10.8' ry='1.55' fill='%235B1E07' fill-opacity='.62'/%3E%3Cpath d='M4.6 7.3C7.6 8.9 10.8 9.4 14 9.4S20.4 8.9 23.4 7.3' fill='none' stroke='%23FFD786' stroke-opacity='.8' stroke-width='.75' stroke-linecap='round' stroke-dasharray='.1 1.7'/%3E%3Cpath d='M13.5 3.5C13.3 2.6 13.7 1.7 14.1 1.3C14.3 2.1 14.6 2.7 14.4 3.5Z' fill='%233A1706'/%3E%3C/svg%3E") no-repeat 50% 100% / 100% auto;
    pointer-events: none;
}
.sik-fest-diya + .sik-fest-diya { --w: calc(var(--fest-diya-w) * .8); }

/* The glow behind the flame. */
.sik-fest-diya::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: calc(var(--w) * .3);
    width: calc(var(--w) * 1.7);
    height: calc(var(--w) * 1.5);
    margin: calc(var(--w) * -.75) 0 0 calc(var(--w) * -.85);
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 218, 128, .72), rgba(255, 168, 60, .28) 55%, rgba(255, 150, 40, 0));
    animation: sik-fest-glow 3s ease-in-out infinite;
}
/* The pool of light the bowl sits in. */
.sik-fest-diya::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    bottom: calc(var(--w) * -.1);
    width: calc(var(--w) * 1.3);
    height: calc(var(--w) * .32);
    margin-left: calc(var(--w) * -.65);
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 196, 96, .5), rgba(255, 196, 96, 0));
}
.sik-fest-diya i {
    position: absolute;
    left: 50%;
    bottom: calc(var(--w) * .36);
    width: calc(var(--w) * .34);
    height: calc(var(--w) * .54);
    margin-left: calc(var(--w) * -.17);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cdefs%3E%3CradialGradient id='f' cx='.5' cy='.74' r='.64'%3E%3Cstop offset='0' stop-color='%23FFFDF0'/%3E%3Cstop offset='.3' stop-color='%23FFE79A'/%3E%3Cstop offset='.64' stop-color='%23FFAE1F'/%3E%3Cstop offset='1' stop-color='%23EE620A'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M5 .3C6.3 3.7 9.4 6.7 9.4 10.6A4.4 4.4 0 0 1 .6 10.6C.6 6.7 3.7 3.7 5 .3Z' fill='url(%23f)'/%3E%3Cpath d='M5 7.2C5.7 8.7 6.7 9.7 6.7 11.2A1.7 1.7 0 0 1 3.3 11.2C3.3 9.7 4.3 8.7 5 7.2Z' fill='%23FFFFFF' fill-opacity='.85'/%3E%3C/svg%3E") center / contain no-repeat;
    transform-origin: 50% 100%;
    animation: sik-fest-flicker 1.9s ease-in-out infinite;
}
.sik-fest-diya + .sik-fest-diya i { animation-duration: 2.3s; animation-delay: -.7s; }
.sik-fest-diya + .sik-fest-diya::before { animation-delay: -1.2s; }

@keyframes sik-fest-flicker {
    0%, 100% { transform: scale(1, 1) rotate(0deg); opacity: 1; }
    18%      { transform: scale(.93, 1.08) rotate(-3deg); }
    37%      { transform: scale(1.05, .93) rotate(2deg); opacity: .88; }
    58%      { transform: scale(.97, 1.06) rotate(-1.5deg); }
    79%      { transform: scale(1.03, .96) rotate(2.5deg); opacity: .95; }
}
@keyframes sik-fest-glow {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .7; transform: scale(.9); }
}

/* --------------------------------------------------------------------------
   3. One homepage section title: a small lit diya after the words
   -------------------------------------------------------------------------- */

/* festive.js puts one after the title of the homepage's offer section (or the
   first section, if none reads as one) - one lamp, not one per heading.
   Absolutely positioned with no offsets, so it sits at its static position
   right after the last word and takes no room: the heading neither reflows
   nor shifts when it arrives. festive.js hides it if the words run so close
   to the edge that it would not fit. */
.sik-fest-diya--lamp {
    --w: 1.15em;
    position: absolute;
    z-index: 0;                /* its own stack, so the glow stays behind the bowl */
    width: var(--w);
    height: calc(var(--w) * .9);
    margin: .02em 0 0 .3em;
}
.sik-fest-diya--lamp.is-none { display: none; }
.sik-fest-diya--lamp::before {
    background: radial-gradient(closest-side, rgba(255, 200, 96, .4), rgba(255, 168, 60, .14) 55%, rgba(255, 150, 40, 0));
}
.sik-fest-diya--lamp::after { content: none; }
.sik-fest-diya--lamp i { animation-duration: 3.4s; }

/* --------------------------------------------------------------------------
   4. Footer: lights along its top edge
   -------------------------------------------------------------------------- */
body.sik-fest--diwali .sik-footer__body.sik-fest-edge { position: relative; }
.sik-fest-lights--edge { z-index: 1; }

/* --------------------------------------------------------------------------
   Nothing animates where nobody can see it: the tab is hidden
   (html.sik-fest-paused) or the decorated block is off screen (.sik-fest-off
   on the band, title, footer or header). Both set by festive.js. Dropping the
   animation - not pausing it - also frees its compositor layer.
   -------------------------------------------------------------------------- */
html.sik-fest-paused body.sik-fest--diwali .sik-header::after,
body.sik-fest--diwali .sik-header.sik-fest-off::after,
.sik-fest-paused .sik-fest-lights i,
.sik-fest-paused .sik-fest-shine,
.sik-fest-paused .sik-fest-sparks b,
.sik-fest-paused .sik-fest-diya::before,
.sik-fest-paused .sik-fest-diya i,
.sik-fest-off .sik-fest-lights i,
.sik-fest-off .sik-fest-shine,
.sik-fest-off .sik-fest-sparks b,
.sik-fest-off .sik-fest-diya::before,
.sik-fest-off .sik-fest-diya i {
    animation: none;
}

/* --------------------------------------------------------------------------
   Reduced motion, and the store's own "entrance animations off" switch:
   every decoration stays, standing still. The shimmer is motion and nothing
   else, so it goes; the sparkles rest at scattered heights inside their
   clear stretch; one strip of lights rests dimmed so the string still reads
   as lit bulbs of different strengths.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body.sik-fest--diwali .sik-header::after,
    .sik-fest-lights i,
    .sik-fest-sparks b,
    .sik-fest-diya::before,
    .sik-fest-diya i {
        animation: none;
    }
    .sik-fest-shine { display: none; }
    .sik-fest-sparks b { opacity: .9; transform: translate3d(0, var(--rest), 0); }
    .sik-fest-lights i:nth-child(2) { opacity: .55; }
}
body.sik-noanim.sik-fest--diwali .sik-header::after,
body.sik-noanim .sik-fest-lights i,
body.sik-noanim .sik-fest-sparks b,
body.sik-noanim .sik-fest-diya::before,
body.sik-noanim .sik-fest-diya i {
    animation: none;
}
body.sik-noanim .sik-fest-shine { display: none; }
body.sik-noanim .sik-fest-sparks b { opacity: .9; transform: translate3d(0, var(--rest), 0); }
body.sik-noanim .sik-fest-lights i:nth-child(2) { opacity: .55; }

/* Printing a page is not the place for a garland. */
@media print {
    body.sik-fest--diwali .sik-header::before,
    body.sik-fest--diwali .sik-header::after,
    .sik-fest-fx,
    .sik-fest-diyas,
    .sik-fest-diya,
    .sik-fest-lights { display: none; }
    body.sik-fest--diwali #sikMain { padding-top: 0; }
}