/*
 * Header 8 festive mode (Website setup > Header > Festive mode; owner 6 Nov 2026).
 * Loaded only while festive mode is on. Decoration only: lights, diyas and a rangoli pattern drawn over the admin's
 * own header colours. Nothing here covers the logo, search or category labels; motion stops for reduced-motion users.
 *   .h8-fest--gold   "Diwali: blue and gold": the brand blue band, gold rangoli, string lights, two diyas.
 *   .h8-fest--night  "Diwali night": a night-sky band, gold top bar, a row of small glowing diyas.
 */
.h8-fest { --fest-gold: #E9B949; --fest-gold-2: #F6D27A; --fest-ink: #2A1700; }

/* Gold rangoli line pattern in place of the circles (the band's own ::before keeps its opacity switch). */
.h8-fest .h8-band::before, body:has(.h8-fest) .h8-band-x::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23F6D27A' stroke-width='1.2'%3E%3Ccircle cx='60' cy='60' r='10'/%3E%3Ccircle cx='60' cy='60' r='22'/%3E%3Cpath d='M60 38c6 8 6 14 0 22-6-8-6-14 0-22zM60 82c6-8 6-14 0-22-6 8-6 14 0 22zM38 60c8-6 14-6 22 0-8 6-14 6-22 0zM82 60c-8-6-14-6-22 0 8 6 14 6 22 0z'/%3E%3Cpath d='M44 44c9 1 13 5 16 16-11-3-15-7-16-16zM76 76c-9-1-13-5-16-16 11 3 15 7 16 16zM76 44c-1 9-5 13-16 16 3-11 7-15 16-16zM44 76c1-9 5-13 16-16-3 11-7 15-16 16z'/%3E%3C/g%3E%3C/svg%3E") !important;
    background-size: 120px 120px !important;
    opacity: .1 !important;
}

/* Gold edge on the category tiles and a gold sale tag in the top bar. */
.h8-fest .h8-cat__ico { box-shadow: 0 0 0 2px var(--fest-gold), 0 2px 8px rgba(233, 185, 73, .35); }
.h8-fest .h8-top__tag { background: linear-gradient(180deg, var(--fest-gold-2), var(--fest-gold)) !important; color: var(--fest-ink) !important; }

/* Room under the category labels so the lights and diyas never touch them. */
.h8-fest .h8-cats { padding-bottom: 18px; }

/* String lights along the bottom edge of the band: a gold wire with warm bulbs that twinkle in two groups. */
/* Keep the interactive band unclipped: its category, search, cart and account menus extend below it. */
.h8-fest__lights { position: absolute; left: 0; right: 0; bottom: 4px; height: 22px; pointer-events: none; z-index: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='22' viewBox='0 0 88 22'%3E%3Cpath d='M0 5 Q44 17 88 5' fill='none' stroke='%23E9B949' stroke-opacity='.7' stroke-width='1.2'/%3E%3C/svg%3E") repeat-x;
    background-size: 88px 22px; }
.h8-fest__lights::before, .h8-fest__lights::after { content: ""; position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 50%, #FFF3C4 0 2.5px, rgba(255, 210, 110, .85) 3.5px, rgba(255, 190, 80, .25) 7px, transparent 9px) repeat-x;
    background-size: 88px 22px; }
.h8-fest__lights::before { background-position: 0 6px; animation: h8-fest-twinkle 2.4s ease-in-out infinite; }
.h8-fest__lights::after { background-position: 44px 6px; animation: h8-fest-twinkle 2.4s ease-in-out infinite 1.2s; }
@keyframes h8-fest-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Two brass diyas at the ends of the band, each with a softly flickering flame. */
.h8-fest__diya { position: absolute; bottom: 10px; width: 46px; height: 34px; pointer-events: none; z-index: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='20' viewBox='0 0 46 20'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23F8D27A'/%3E%3Cstop offset='.55' stop-color='%23C9871E'/%3E%3Cstop offset='1' stop-color='%237A4A0E'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M2 4 Q23 10 44 4 Q41 18 23 19 Q5 18 2 4z' fill='url(%23g)'/%3E%3Cellipse cx='23' cy='4.5' rx='21' ry='3' fill='%23FFE9A8' fill-opacity='.55'/%3E%3C/svg%3E") no-repeat center bottom / 46px 20px; }
.h8-fest__diya--l { left: max(10px, calc((100vw - 1384px) / 2 - 36px)); }
.h8-fest__diya--r { right: max(10px, calc((100vw - 1384px) / 2 - 36px)); }
.h8-fest__diya i { position: absolute; left: 50%; bottom: 14px; width: 10px; height: 18px; margin-left: -5px;
    border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
    background: radial-gradient(ellipse at 50% 70%, #FFFBEA 0 22%, #FFD45E 45%, #FF9A1F 78%, rgba(255, 120, 0, 0) 100%);
    box-shadow: 0 0 10px 4px rgba(255, 186, 72, .65), 0 0 26px 10px rgba(255, 170, 60, .28);
    transform-origin: 50% 100%; animation: h8-fest-flame 1.6s ease-in-out infinite alternate; }
@keyframes h8-fest-flame { 0% { transform: scale(1, 1) rotate(-2deg); } 50% { transform: scale(.94, 1.08) rotate(2deg); } 100% { transform: scale(1.04, .95) rotate(-1deg); } }

/* Diwali night: a night-sky band with soft gold sparkles, a gold top bar and a diya under every category. */
.h8-fest--night .h8-band, body.v3-home--nearby .h8-fest--night .h8-band {
    background:
        radial-gradient(70% 120% at 80% 0%, rgba(246, 210, 122, .22) 0%, transparent 60%),
        radial-gradient(circle at 12% 30%, rgba(255, 230, 160, .55) 0 1px, transparent 2px),
        radial-gradient(circle at 37% 18%, rgba(255, 230, 160, .45) 0 1px, transparent 2px),
        radial-gradient(circle at 63% 42%, rgba(255, 230, 160, .4) 0 1px, transparent 2px),
        radial-gradient(circle at 88% 22%, rgba(255, 230, 160, .5) 0 1px, transparent 2px),
        linear-gradient(180deg, #0A1033 0%, #141C52 100%) !important; }
.h8-fest--night .h8-band::before { opacity: .06 !important; }
.h8-fest--night .h8-top { background: linear-gradient(90deg, var(--fest-gold-2), var(--fest-gold)) !important; }
.h8-fest--night .h8-top, .h8-fest--night .h8-top a, .h8-fest--night .h8-top__msg, .h8-fest--night .h8-top__pin { color: var(--fest-ink) !important; }
.h8-fest--night .h8-top__tag { background: #2A1700 !important; color: var(--fest-gold-2) !important; }
/* Night: the lights become a row of small glowing diyas along the bottom edge. */
.h8-fest--night .h8-fest__lights { height: 36px; bottom: 0; background: none; }
/* Night diyas: brass bowls (::before) and their flames (::after, owner 7 Nov 2026: the flames flicker and the
   glow breathes). Every flame stands on the same line, so one transform about that line moves them all alike. */
.h8-fest--night .h8-fest__lights::before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='36' viewBox='0 0 120 36'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23F8D27A'/%3E%3Cstop offset='.55' stop-color='%23C9871E'/%3E%3Cstop offset='1' stop-color='%237A4A0E'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M45 22 Q60 27.5 75 22 Q72.5 34 60 35 Q47.5 34 45 22z' fill='url(%23b)'/%3E%3Cellipse cx='60' cy='22.6' rx='15' ry='2.3' fill='%23FFE9A8' fill-opacity='.6'/%3E%3C/svg%3E") repeat-x;
    background-size: 120px 36px; background-position: 0 0; animation: none; }
.h8-fest--night .h8-fest__lights::after { display: block;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='36' viewBox='0 0 120 36'%3E%3Cdefs%3E%3CradialGradient id='h' cx='.5' cy='.5' r='.5'%3E%3Cstop offset='0' stop-color='%23FFC85A' stop-opacity='.6'/%3E%3Cstop offset='1' stop-color='%23FF9A1F' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='f' cx='.5' cy='.78' r='.75'%3E%3Cstop offset='0' stop-color='%23FFFFFF'/%3E%3Cstop offset='.35' stop-color='%23FFF1A8'/%3E%3Cstop offset='.7' stop-color='%23FFB21F'/%3E%3Cstop offset='1' stop-color='%23FF7A00'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='60' cy='14' r='14' fill='url(%23h)'/%3E%3Cpath d='M60 1 C64.5 8 66.5 13.5 63.6 19 C62.4 21.4 57.6 21.4 56.4 19 C53.5 13.5 55.5 8 60 1z' fill='url(%23f)'/%3E%3C/svg%3E") repeat-x;
    background-size: 120px 36px; background-position: 0 0; transform-origin: 50% 58%;
    filter: drop-shadow(0 0 5px rgba(255, 186, 72, .75));
    animation: h8-fest-flicker 1.3s ease-in-out infinite alternate, h8-fest-glow 2.6s ease-in-out infinite; }
@keyframes h8-fest-flicker {
    0% { transform: scaleY(1) skewX(0deg); }
    30% { transform: scaleY(1.16) skewX(-3deg); }
    60% { transform: scaleY(.9) skewX(2.5deg); }
    100% { transform: scaleY(1.08) skewX(-1deg); } }
@keyframes h8-fest-glow {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(255, 186, 72, .6)) brightness(1); }
    50% { filter: drop-shadow(0 0 14px rgba(255, 200, 96, 1)) brightness(1.25); } }
.h8-fest--night .h8-cat.is-on .h8-cat__ico { box-shadow: 0 0 0 3px var(--fest-gold-2), 0 0 14px rgba(246, 210, 122, .6); }
/* The row already has diyas at both ends: no separate corner diyas at night. */
.h8-fest--night .h8-fest__diya { display: none; }
/* The Homepage 8 band that continues behind the hero follows the night sky too. */
body:has(.h8-fest--night) .h8-band-x { background: linear-gradient(180deg, #141C52 0%, #1A2468 100%) !important; }

/* Toran (owner 7 Nov 2026, matched to the approved toran design C): full ruffled marigolds on a twisted gold cord, and
   between them a small marigold bud with three hanging mango leaves. Its own strip above the top bar; the leaf tips
   reach just over the bar's top edge, never its words. The leaves (::before) sway gently on the cord; the cord and
   the flowers (::after) stay still. */
.h8-fest__toran { display: block; height: 34px; pointer-events: none; position: relative; z-index: 3; background: var(--h8-navy, #0A2A66); }
.h8-fest--night .h8-fest__toran { background: #0B1238; }
.h8-fest__toran::before, .h8-fest__toran::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 40px;
    background-repeat: repeat-x; background-size: 88px 40px; background-position: 0 0; }
.h8-fest__toran::before { background-image: url("../../img/v3/festive/toran-leaves.svg"); transform-origin: 50% 0;
    animation: h8-fest-sway 3.4s ease-in-out infinite alternate; }
.h8-fest__toran::after { background-image: url("../../img/v3/festive/toran-garland.svg");
    filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .35)); }
@keyframes h8-fest-sway { 0% { transform: skewX(-5deg); } 100% { transform: skewX(5deg); } }

/* Crackers (owner 7 Nov 2026): fireworks that rise and burst softly in the sky of the band, one after another, in
   gold, rose and mint. Behind every control (z-index 0), clipped to the band, decoration only. */
.h8-fest__sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; border-radius: inherit; }
.h8-fest__sky i { position: absolute; width: 92px; height: 92px; margin: -46px 0 0 -46px; }
.h8-fest__sky i::before { content: ""; position: absolute; left: 50%; top: 50%; width: 2px; height: 30px; margin-left: -1px;
    border-radius: 2px; background: linear-gradient(to top, rgba(255, 214, 120, 0), #FFE9A8); opacity: 0;
    animation: h8-fest-rise 6s ease-out infinite; animation-delay: inherit; }
.h8-fest__sky i::after { content: ""; position: absolute; inset: 0; background: url("../../img/v3/festive/cracker-gold.svg") center / contain no-repeat;
    opacity: 0; transform: scale(.1); animation: h8-fest-burst 6s ease-out infinite; animation-delay: inherit; }
/* Placed in the open sky: at the two outer edges of the category row, and low between the diyas (the diyas repeat
   every 147 px, so the gaps fall on multiples of 147 px), never over the logo, the search or a label. */
.h8-fest__sky i:nth-child(1) { left: 1%; top: 58%; animation-delay: 0s; }
.h8-fest__sky i:nth-child(2) { left: 294px; top: calc(100% - 26px); animation-delay: 1s; }
.h8-fest__sky i:nth-child(3) { left: 99%; top: 58%; animation-delay: 2s; }
.h8-fest__sky i:nth-child(4) { left: 735px; top: calc(100% - 26px); animation-delay: 3s; }
.h8-fest__sky i:nth-child(5) { left: 1176px; top: calc(100% - 26px); animation-delay: 4s; }
.h8-fest__sky i:nth-child(6) { left: 441px; top: calc(100% - 26px); animation-delay: 5s; }
.h8-fest__sky i:nth-child(n+4):nth-child(-n+6), .h8-fest__sky i:nth-child(2) { width: 70px; height: 70px; margin: -35px 0 0 -35px; }
.h8-fest__sky i:nth-child(3n+2)::after { background-image: url("../../img/v3/festive/cracker-rose.svg"); }
.h8-fest__sky i:nth-child(3n)::after { background-image: url("../../img/v3/festive/cracker-mint.svg"); }
@keyframes h8-fest-rise {
    0% { opacity: 0; transform: translateY(80px); }
    3% { opacity: 1; }
    13% { opacity: 1; transform: translateY(0); }
    15%, 100% { opacity: 0; transform: translateY(0); } }
@keyframes h8-fest-burst {
    0%, 13% { opacity: 0; transform: scale(.1); }
    16% { opacity: 1; transform: scale(.5); }
    32% { opacity: 1; transform: scale(1); }
    50% { opacity: 0; transform: scale(1.12) translateY(10px); }
    100% { opacity: 0; transform: scale(1.12) translateY(10px); } }

/* Diwali night, as in the approved design B (owner 7 Nov 2026):
   - the night band keeps the quiet circle pattern (no rangoli) with soft gold glow dots;
   - the top bar's sale words are plain dark text on the gold, no pill;
   - only the "All" tile wears the gold ring (its word turns gold), the other tiles stay white;
   - the navy band ends with round corners above the banner, which sits on the light page with gold string lights
     along its top and bottom edges. */
.h8-fest--night .h8-band::before, body:has(.h8-fest--night) .h8-band::before {
    background-image: radial-gradient(circle at 20px 20px, transparent 17px, #fff 18px, transparent 19px) !important;
    background-size: 40px 40px !important; opacity: .05 !important; }
.h8-fest--night .h8-band, body.v3-home--nearby .h8-fest--night .h8-band {
    background:
        radial-gradient(circle at 4% 34%, rgba(255, 196, 92, .55) 0 2px, rgba(255, 196, 92, .18) 4px, transparent 8px),
        radial-gradient(circle at 17% 78%, rgba(255, 196, 92, .45) 0 1.5px, rgba(255, 196, 92, .15) 3px, transparent 7px),
        radial-gradient(circle at 31% 12%, rgba(255, 220, 140, .5) 0 1.5px, transparent 5px),
        radial-gradient(circle at 46% 64%, rgba(255, 196, 92, .4) 0 2px, rgba(255, 196, 92, .14) 4px, transparent 9px),
        radial-gradient(circle at 62% 20%, rgba(255, 220, 140, .45) 0 1.5px, transparent 5px),
        radial-gradient(circle at 77% 70%, rgba(255, 196, 92, .45) 0 2px, rgba(255, 196, 92, .15) 4px, transparent 8px),
        radial-gradient(circle at 89% 16%, rgba(255, 220, 140, .5) 0 1.5px, transparent 5px),
        radial-gradient(circle at 97% 58%, rgba(255, 196, 92, .55) 0 2px, rgba(255, 196, 92, .18) 4px, transparent 8px),
        linear-gradient(180deg, #0B1238 0%, #141C52 100%) !important;
    border-radius: 0 0 36px 36px !important; }
.h8-fest--night .h8-top__tag { background: none !important; color: var(--fest-ink) !important; padding: 0 !important; font-weight: 800; }
.h8-fest--night .h8-cat__ico { box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.h8-fest--night .h8-cat--all .h8-cat__ico { box-shadow: 0 0 0 3px var(--fest-gold-2), 0 0 14px rgba(246, 210, 122, .55); }
.h8-fest--night .h8-cat--all .h8-cat__ico + span { color: var(--fest-gold-2) !important; }
/* Design B: bigger diyas with taller flames, with room for them under the labels (desktop). */
@media (min-width: 768px) {
    .h8-fest--night .h8-cats { padding-bottom: 36px; }
    .h8-fest--night .h8-fest__lights { height: 44px; bottom: 2px; }
    .h8-fest--night .h8-fest__lights::before, .h8-fest--night .h8-fest__lights::after { background-size: 147px 44px; }
}
body:has(.h8-fest--night) .h8-band-x.h8-hero { background: none !important; border-radius: 0; }
body:has(.h8-fest--night) .h8-band-x.h8-hero::before { display: none; }
body:has(.h8-fest--night) .h8-hero .h8-slide { border-color: transparent; box-shadow: 0 10px 28px rgba(20, 28, 82, .16); }
body:has(.h8-fest--night) .h8-hero .h8-slide::after { content: ""; position: absolute; inset: 7px 0; pointer-events: none; z-index: 2;
    animation: h8-fest-twinkle 2.4s ease-in-out infinite;
    background:
        radial-gradient(circle, #FFF3C4 0 1.6px, rgba(255, 200, 90, .75) 2.6px, rgba(255, 190, 80, .2) 4.5px, transparent 6px) repeat-x 0 0 / 20px 12px,
        radial-gradient(circle, #FFF3C4 0 1.6px, rgba(255, 200, 90, .75) 2.6px, rgba(255, 190, 80, .2) 4.5px, transparent 6px) repeat-x 10px 100% / 20px 12px; }
/* On the light page the slider's dots, pause and payment strip turn navy. */
body:has(.h8-fest--night) .h8-hero:not(.h8bz-hero) .h8-car__dots [data-v3-dot]::before { background: rgba(20, 28, 82, .3); }
body:has(.h8-fest--night) .h8-hero:not(.h8bz-hero) .h8-car__dots [data-v3-dot][aria-current="true"]::before { background: #141C52; }
body:has(.h8-fest--night) .h8-hero:not(.h8bz-hero) .h8-car__pp { color: #141C52; border-color: rgba(20, 28, 82, .35); }
body:has(.h8-fest--night) .h8-hero:not(.h8bz-hero) .h8-pay { background: #fff; border-color: #DCE3F2; }
body:has(.h8-fest--night) .h8-hero:not(.h8bz-hero) .h8-pay li, body:has(.h8-fest--night) .h8-hero:not(.h8bz-hero) .h8-pay a { color: #141C52 !important; }

/* Phones: lighter decoration so the compact header stays clear. */
@media (max-width: 767.98px) {
    .h8-fest__lights { bottom: 2px; height: 16px; background-size: 64px 16px; }
    .h8-fest__lights::before, .h8-fest__lights::after { background-size: 64px 16px; }
    .h8-fest__lights::after { background-position: 32px 4px; }
    .h8-fest__diya { width: 34px; height: 26px; bottom: 6px; background-size: 34px 15px; }
    .h8-fest__diya i { bottom: 10px; width: 8px; height: 14px; margin-left: -4px; }
    .h8-fest .h8-cats { padding-bottom: 12px; }
    .h8-fest--night .h8-fest__lights { height: 28px; }
    .h8-fest--night .h8-fest__lights::before, .h8-fest--night .h8-fest__lights::after { background-size: 94px 28px; }
    .h8-head--slim.h8-fest .h8-fest__lights, .h8-head--slim.h8-fest .h8-fest__diya { display: none; }
    /* Listing and product pages have no category row: room under the search so the diyas stand whole. */
    .h8-fest--night:is(.h8-head--list, .h8-head--pdp) .h8-band { padding-bottom: 34px !important; }
    .h8-fest__toran { height: 26px; }
    .h8-fest__toran::before, .h8-fest__toran::after { height: 30px; background-size: 66px 30px; }
    .h8-fest__sky i, .h8-fest__sky i:nth-child(n) { width: 46px; height: 46px; margin: -23px 0 0 -23px; top: calc(100% - 16px); }
    .h8-fest__sky i:nth-child(1) { left: 94px; }
    .h8-fest__sky i:nth-child(2) { left: 188px; }
    .h8-fest__sky i:nth-child(3) { left: 282px; }
    .h8-fest__sky i:nth-child(n+4) { display: none; }
    .h8-head--slim.h8-fest .h8-fest__sky { display: none; }
    body:has(.h8-fest--night) .h8-hero .h8-slide::after { inset: 4px 0;
        background:
            radial-gradient(circle, #FFF3C4 0 1px, rgba(255, 200, 90, .7) 1.7px, transparent 3.2px) repeat-x 0 0 / 13px 7px,
            radial-gradient(circle, #FFF3C4 0 1px, rgba(255, 200, 90, .7) 1.7px, transparent 3.2px) repeat-x 6px 100% / 13px 7px; }
}

@media (prefers-reduced-motion: reduce) {
    .h8-fest__lights::before, .h8-fest__lights::after, .h8-fest__diya i,
    .h8-fest--night .h8-fest__lights::before, .h8-fest--night .h8-fest__lights::after,
    body:has(.h8-fest--night) .h8-hero .h8-slide::after, .h8-fest__toran::before { animation: none; }
    .h8-fest__sky { display: none; }
}