/* Season looks (Admin → Settings → Store look; js/components/season-look.js puts data-look on <html>).
   Each look sets the store's colours (the same variables as css/v2.css :root, as R G B) and dresses the home banner:
   gold foil, a hairline frame, an eight-point star lattice, a Moorish arch (or a halo) behind the spotlight and
   hanging ornaments. Nothing here applies without data-look. */

/* ── Colours ── */
html[data-look] {
  --foil: linear-gradient(100deg, #8C6A2B 0%, #E8CF8B 22%, #FFF4CC 36%, #C9A24E 52%, #F2DC9A 70%, #A07A33 86%, #E8CF8B 100%);
  --hair: rgb(var(--c-gold) / .45);
}
html[data-look="blackfriday"] {
  --c-ink: 11 11 12; --c-ivory: 246 244 240; --c-blush: 237 233 226; --c-line: 228 223 214; --c-muted: 106 102 96;
  --c-rose: 160 124 52; --c-rose-deep: 122 90 30; --c-rose-soft: 233 218 186; --c-gold: 212 175 55;
  --aurora-1: transparent; --aurora-2: transparent; --aurora-3: transparent;
  --stage: radial-gradient(70% 60% at 78% 30%, #2B2412 0%, rgba(11,11,12,0) 70%), radial-gradient(60% 50% at 10% 100%, #1A1710 0%, rgba(11,11,12,0) 70%), #0B0B0C;
}
html[data-look="ramadan"] {
  --c-ink: 12 22 54; --c-ivory: 251 248 241; --c-blush: 242 235 218; --c-line: 232 224 206; --c-muted: 104 102 120;
  --c-rose: 166 124 52; --c-rose-deep: 116 84 30; --c-rose-soft: 232 214 172; --c-gold: 214 178 102;
  --aurora-1: rgba(214,178,102,.18); --aurora-2: rgba(70,96,190,.35); --aurora-3: rgba(214,178,102,.1);
  --stage: radial-gradient(80% 70% at 75% 0%, #22346E 0%, rgba(10,18,48,0) 70%), linear-gradient(180deg, #070C24 0%, #0A1230 55%, #101C46 100%);
}
html[data-look="fitr"] {
  --c-ink: 14 58 46; --c-ivory: 252 249 243; --c-blush: 244 237 222; --c-line: 233 226 210; --c-muted: 98 108 100;
  --c-rose: 166 124 52; --c-rose-deep: 14 92 68; --c-rose-soft: 214 232 220; --c-gold: 196 156 78;
  --aurora-1: rgba(232,207,139,.45); --aurora-2: rgba(255,255,255,.7); --aurora-3: rgba(214,232,220,.6);
  --stage: radial-gradient(70% 70% at 70% 30%, #FFFDF7 0%, rgba(255,253,247,0) 70%), linear-gradient(170deg, #FBF5E8 0%, #F3E7CD 60%, #EADBB8 100%);
  --hair: rgb(160 124 52 / .45);
  --foil: linear-gradient(100deg, #6E5220 0%, #B8913F 22%, #E3C77E 36%, #9C7630 52%, #C9A24E 70%, #7A5A22 86%, #B8913F 100%);
}
html[data-look="adha"] {
  --c-ink: 8 52 44; --c-ivory: 251 248 241; --c-blush: 236 241 233; --c-line: 226 230 218; --c-muted: 96 108 100;
  --c-rose: 166 124 52; --c-rose-deep: 10 84 66; --c-rose-soft: 206 226 214; --c-gold: 214 180 104;
  --aurora-1: rgba(214,180,104,.18); --aurora-2: rgba(40,150,120,.3); --aurora-3: rgba(214,180,104,.1);
  --stage: radial-gradient(80% 70% at 72% 0%, #12695A 0%, rgba(6,46,40,0) 70%), linear-gradient(180deg, #04241F 0%, #06302A 55%, #0A4239 100%);
}

/* ── Top strip and header: a gold hairline ── */
html[data-look] .marquee { box-shadow: inset 0 -1px 0 var(--hair); }
html[data-look] .v2-header { border-bottom-color: var(--hair); }

/* ── Home banner ── */
html[data-look] [data-hero] { background: var(--stage); isolation: isolate; }
html[data-look] [data-hero] .aurora span { opacity: .6; }
/* Night looks: light text */
:is(html[data-look="blackfriday"], html[data-look="ramadan"], html[data-look="adha"]) [data-hero-copy] .text-ink { color: #FFFDF8; }
:is(html[data-look="blackfriday"], html[data-look="ramadan"], html[data-look="adha"]) [data-hero-copy] .text-muted { color: rgba(255,253,248,.72); }
:is(html[data-look="blackfriday"], html[data-look="ramadan"], html[data-look="adha"]) [data-hero-copy] [data-how] { color: #FFFDF8; }
:is(html[data-look="blackfriday"], html[data-look="ramadan"], html[data-look="adha"]) [data-hero-copy] [data-how]:hover { background: rgba(255,255,255,.08); }
html[data-look] [data-hero-copy] .text-rose-deep { color: rgb(var(--c-gold)); }
html[data-look="fitr"] [data-hero-copy] .text-rose-deep { color: rgb(var(--c-rose)); }
html[data-look] [data-hero-copy] .bg-rose { background: var(--foil); }
/* The title's last word in gold foil, with a slow shine */
html[data-look] [data-hero-copy] h1 .text-rose { background: var(--foil); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: word-in .9s var(--ease-out) forwards, look-shine 6s ease-in-out 1.5s infinite; animation-delay: calc(var(--i) * 90ms + 150ms), 1.6s; padding-inline-end: .08em; }
@keyframes look-shine { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
/* Shop button: gold foil with a light edge */
html[data-look] [data-hero-copy] [data-shop] { background: var(--foil); background-size: 180% 100%; color: rgb(var(--c-ink));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.15), 0 18px 40px -18px rgb(var(--c-gold) / .8); transition: background-position .8s var(--ease-out); }
html[data-look] [data-hero-copy] [data-shop]:hover { background-position: 100% 0; }
html[data-look] [data-hero-copy] [data-shop] > span { background: rgb(var(--c-ink)); color: rgb(var(--c-gold)); }
html[data-look] [data-hero] .spot__card { box-shadow: 0 34px 70px -24px rgba(0,0,0,.55), 0 0 0 1px rgb(var(--c-gold) / .4); }
html[data-look="fitr"] [data-hero] .spot__card { box-shadow: 0 34px 70px -28px rgba(120,90,30,.45), 0 0 0 1px rgb(var(--c-gold) / .45); }

/* The look's name: small capitals between two hairlines with a diamond */
.look-badge { display: inline-flex; align-items: center; gap: .75rem; margin-bottom: 1.1rem; }
.look-badge b { font-weight: 700; font-size: .78rem; letter-spacing: .32em; text-transform: uppercase; padding-inline-start: .32em;
  background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[lang="ar"] .look-badge b { font-family: 'El Messiri', serif; font-size: 1.05rem; padding: 0; }
.look-badge i { position: relative; width: 2.4rem; height: 1px; background: linear-gradient(90deg, transparent, rgb(var(--c-gold))); }
.look-badge i:last-child { transform: scaleX(-1); }
.look-badge i::after { content: ''; position: absolute; inset-inline-end: -3px; top: -3px; width: 7px; height: 7px; transform: rotate(45deg); background: rgb(var(--c-gold)); }
html[dir="rtl"] .look-badge i { transform: scaleX(-1); } html[dir="rtl"] .look-badge i:last-child { transform: none; }
@media (min-width: 768px) { .look-badge i { width: 3.5rem; } .look-badge b { font-size: .85rem; } }

/* ── Decorations (pointer-events off: never in the way of a tap) ── */
.look-deco { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.look-deco > svg { position: absolute; }
.look-grain { position: absolute; inset: 0; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.look-lattice { inset: 0; width: 100%; height: 100%; color: rgb(var(--c-gold)); opacity: .22;
  -webkit-mask-image: radial-gradient(75% 65% at 50% 45%, transparent 35%, #000 100%); mask-image: radial-gradient(75% 65% at 50% 45%, transparent 35%, #000 100%); }
html[data-look="fitr"] .look-lattice { color: #B08A3E; opacity: .28; }
.look-frame { position: absolute; inset: .75rem; border: 1px solid var(--hair); border-radius: 1.4rem; }
.look-frame::after { content: ''; position: absolute; inset: 5px; border: 1px solid rgb(var(--c-gold) / .14); border-radius: 1.1rem; }
.look-frame__c { position: absolute; width: 14px; height: 14px; }
.look-frame__c--ts { top: -7px; inset-inline-start: 1.4rem; } .look-frame__c--te { top: -7px; inset-inline-end: 1.4rem; }
.look-frame__c--bs { bottom: -7px; inset-inline-start: 1.4rem; } .look-frame__c--be { bottom: -7px; inset-inline-end: 1.4rem; }
@media (min-width: 768px) { .look-frame { inset: 1.25rem; border-radius: 2rem; } .look-frame::after { border-radius: 1.7rem; } }

.look-dust i { position: absolute; border-radius: 50%; background: #FFE9B0; box-shadow: 0 0 6px 1px rgba(255,220,140,.7); opacity: 0;
  animation: look-dust 4.5s ease-in-out infinite; animation-delay: var(--d, 0s); }
html[data-look="fitr"] .look-dust i { background: #D9B45C; box-shadow: 0 0 5px 1px rgba(201,162,78,.6); }
@keyframes look-dust { 0%, 100% { opacity: 0; transform: translateY(4px); } 50% { opacity: .9; transform: translateY(-4px); } }

.look-swing { transform-origin: 50% 0; animation: look-swing 6s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes look-swing { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
.look-glow { animation: look-glow 3.2s ease-in-out infinite alternate; }
@keyframes look-glow { from { opacity: .7; } to { opacity: 1; } }

/* Hanging ornaments (lanterns, stars, crescents) along the top of the banner */
.look-hang { position: absolute; top: .75rem; inset-inline-end: 7%; display: flex; gap: .9rem; align-items: flex-start; }
.look-hang svg { width: 1.35rem; flex-shrink: 0; }
.look-hang svg:nth-child(n+3) { display: none; }
.look-hang--lanterns svg { width: 1.9rem; }
.look-hang--lanterns svg:nth-child(2) { width: 2.3rem; }
html[data-look="fitr"] .look-hang svg:nth-child(2) { width: 1.7rem; }
@media (min-width: 768px) {
  .look-hang { inset-inline-end: auto; inset-inline-start: 50%; gap: 1.6rem; top: 1.25rem; }
  .look-hang svg { width: 2rem; }
  .look-hang--lanterns svg { width: 2.6rem; } .look-hang--lanterns svg:nth-child(2) { width: 3.2rem; }
  html[data-look="fitr"] .look-hang svg:nth-child(2) { width: 2.6rem; }
}
.look-moon { width: 3.4rem; top: 1.9rem; inset-inline-start: 7%; filter: drop-shadow(0 0 16px rgba(255,214,130,.45)); }
@media (min-width: 768px) { .look-moon { width: 5.5rem; top: 2.6rem; inset-inline-start: auto; inset-inline-end: 4%; } }
html[dir="rtl"] .look-moon { transform: scaleX(-1); }
/* Room for the hanging ornaments on phones */
@media (max-width: 767px) { html[data-look]:not([data-look="blackfriday"]) [data-hero] > .relative { padding-top: 5.25rem; } }

/* Behind the spotlight: a Moorish arch (Ramadan, Eids) or a gold halo (Black Friday) */
.look-arch { position: absolute; z-index: 0; left: -14%; right: -14%; top: -9%; bottom: -8%; pointer-events: none; }
.look-arch > svg:first-child { width: 100%; height: 100%; overflow: visible; }
.look-arch__star { position: absolute; left: 50%; top: 0; width: 16px; height: 16px; transform: translate(-50%, -55%); filter: drop-shadow(0 0 8px rgba(255,214,130,.6)); }
.look-halo { position: absolute; z-index: 0; left: -30%; right: -30%; top: 50%; aspect-ratio: 1; transform: translateY(-50%); pointer-events: none; }
.look-halo svg { width: 100%; height: 100%; }
.look-spin { transform-origin: 100px 100px; animation: look-spin 60s linear infinite; }
@keyframes look-spin { to { transform: rotate(360deg); } }
[data-spot] { position: relative; z-index: 1; }

/* Black Friday: a soft beam of light and a slim black-and-gold ribbon under the banner */
.look-beam { position: absolute; inset: -20% 0 0; background: conic-gradient(from 200deg at 75% -10%, transparent 0deg, rgba(255,226,150,.10) 18deg, transparent 40deg, rgba(255,226,150,.06) 60deg, transparent 80deg); }
.look-ribbon { position: absolute; inset-inline: 0; bottom: 1.6rem; z-index: 2; overflow: hidden; direction: ltr; padding: .6rem 0; background: #0B0B0C;
  border-block: 1px solid rgb(var(--c-gold) / .55); box-shadow: 0 0 0 4px #0B0B0C, 0 0 0 5px rgb(var(--c-gold) / .2); }
.look-ribbon__track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.look-ribbon span { padding: 0 1.1rem; font-size: .72rem; font-weight: 600; letter-spacing: .38em; text-transform: uppercase; white-space: nowrap;
  background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent; }
.look-ribbon .look-ribbon__star { padding: 0; letter-spacing: 0; }
html[lang="ar"] .look-ribbon span { font-family: 'El Messiri', serif; letter-spacing: 0; font-size: .95rem; }
html[data-look="blackfriday"] [data-hero] > .relative { padding-bottom: 6rem; }
@media (min-width: 768px) { html[data-look="blackfriday"] [data-hero] > .relative { padding-bottom: 7rem; } .look-ribbon { bottom: 2.2rem; } }

/* Product cards during Black Friday: black sale badges with gold lettering */
html[data-look="blackfriday"] [data-sale] { background: #0B0B0C; color: rgb(var(--c-gold)); box-shadow: inset 0 0 0 1px rgb(var(--c-gold) / .6); }

/* Black / White Friday: item cards and the item page stay light (cream, like the page) with a thin gold frame, so the
   eye doesn't jump between black cards and the light page; sale badges and the + button stay black and gold. */
html[data-look="blackfriday"] .pcard { background: #FFFDF8; padding: .45rem .45rem .85rem; border-radius: 1.9rem;
  box-shadow: 0 0 0 1px rgb(var(--c-gold) / .45), 0 18px 36px -28px rgba(60,45,10,.35); }
html[data-look="blackfriday"] .pcard .text-rose { color: rgb(var(--c-rose-deep)); }
html[data-look="blackfriday"] .pcard :is(.bg-ink) { background: #0B0B0C; color: rgb(var(--c-gold)); box-shadow: 0 0 0 1px rgb(var(--c-gold) / .5); }
html[data-look="blackfriday"] .pcard .bg-ink :is(.text-white, [class*="text-white"]) { color: rgb(var(--c-gold)); }
html[data-look="blackfriday"] .ps-panel { box-shadow: 0 0 0 1px rgb(var(--c-gold) / .45), 0 30px 70px -20px rgba(0,0,0,.45); }
/* the Home spotlight cards: their name label in black and gold */
html[data-look="blackfriday"] .spot__card > span { --c-ink: 246 240 226; --c-rose: 212 175 55; background: rgb(17 16 14 / .82); box-shadow: inset 0 0 0 1px rgb(var(--c-gold) / .4); }
html[data-look="blackfriday"] .spot__card > span .text-xs { color: rgb(var(--c-gold)); }
/* the offers panel on Home already is black: its cards need no light frame around them */
html[data-look="blackfriday"] .season__card { background: none; padding: 0; box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  .look-swing, .look-glow, .look-ribbon__track, .look-spin, .look-dust i { animation: none !important; }
  .look-dust i { opacity: .6; }
  html[data-look] [data-hero-copy] h1 .text-rose { animation: none !important; opacity: 1; transform: none; filter: none; }
}

/* ══ Season experience (js/screens/season.js) ══ */

/* ── Opening scene ── */
.si { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden;
  background: var(--stage); color: #FFFDF8; cursor: pointer; text-align: center; transition: opacity .9s var(--ease-out), transform 1s var(--ease-out); }
.si--fitr { color: rgb(var(--c-ink)); }
.si.is-out { opacity: 0; transform: scale(1.06); }
.si--ramadan.is-out { opacity: 1; transform: translateY(-100%); transition: transform 1s cubic-bezier(.7,0,.2,1); }
.si__skip { position: absolute; top: max(1rem, env(safe-area-inset-top)); inset-inline-end: 1rem; padding: .4rem .9rem; border-radius: 9999px; font-size: .75rem; font-weight: 600;
  color: inherit; opacity: .6; border: 1px solid currentColor; background: transparent; }
.si__stars i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #FFE9B0; box-shadow: 0 0 6px 1px rgba(255,220,140,.7); opacity: 0;
  animation: si-twinkle 2.4s ease-in-out infinite; animation-delay: var(--d); }
.si--fitr .si__stars i { background: #C9A24E; }
@keyframes si-twinkle { 50% { opacity: .9; } }
.si__stage { position: relative; width: 11rem; height: 11rem; margin-bottom: 1.2rem; display: flex; align-items: center; justify-content: center; }
.si__text { position: relative; display: flex; flex-direction: column; align-items: center; gap: .55rem; padding: 0 1.5rem; }
.si__brand { font-size: .68rem; font-weight: 700; letter-spacing: .5em; padding-inline-start: .5em; opacity: 0; color: rgb(var(--c-gold)); animation: si-fade .8s var(--ease-out) .9s forwards; }
.si__title { display: block; overflow: hidden; padding: .1em .2em; }
.si__title span { display: block; font-family: 'Playfair Display', 'El Messiri', serif; font-size: clamp(2.6rem, 11vw, 5rem); line-height: 1.1;
  background: var(--foil); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  transform: translateY(105%); animation: si-up 1s var(--ease-out) 1.1s forwards, look-shine 3s ease-in-out 2s infinite; }
html[lang="ar"] .si__title span { font-family: 'El Messiri', serif; font-weight: 700; }
.si__sub { font-size: 1rem; opacity: 0; animation: si-fade .8s var(--ease-out) 1.6s forwards; }
@keyframes si-up { to { transform: none; } }
@keyframes si-fade { to { opacity: .85; } }
/* gold dust bursting from the centre */
.si__dust { position: absolute; left: 50%; top: 50%; }
.si__dust i { position: absolute; width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: #FFE3A0; box-shadow: 0 0 8px 2px rgba(255,214,130,.8); opacity: 0;
  animation: si-burst 1.4s var(--ease-out) forwards; animation-delay: calc(1s + var(--d)); }
.si--fitr .si__dust i { background: #D9B45C; }
@keyframes si-burst { 0% { opacity: 0; transform: none; } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.4); } }
/* Ramadan: the crescent rises, the lantern comes down and lights up */
.si-moon { position: absolute; width: 7rem; inset-inline-start: -1.5rem; top: .5rem; filter: drop-shadow(0 0 22px rgba(255,214,130,.55));
  opacity: 0; transform: translateY(40px); animation: si-rise 1.3s var(--ease-out) .2s forwards; }
html[dir="rtl"] .si-moon { transform: translateY(40px) scaleX(-1); animation-name: si-rise-rtl; }
@keyframes si-rise { to { opacity: 1; transform: none; } }
@keyframes si-rise-rtl { to { opacity: 1; transform: scaleX(-1); } }
.si-lantern { position: absolute; width: 4.6rem; inset-inline-end: 0; top: -7rem; transform-origin: 50% 0; transform: translateY(-120%);
  animation: si-drop 1.2s cubic-bezier(.3,1.4,.5,1) .35s forwards, look-swing 4s ease-in-out 1.6s infinite; }
@keyframes si-drop { to { transform: none; } }
.si-lantern .si-flame { opacity: 0; animation: si-light .6s ease-out 1.3s forwards; }
@keyframes si-light { 0% { opacity: 0; } 40% { opacity: 1; } 55% { opacity: .5; } 100% { opacity: 1; } }
/* Eids: the star / crescent is drawn in a gold line, then fills with foil */
.si-star { width: 9rem; height: 9rem; filter: drop-shadow(0 0 20px rgba(255,214,130,.5)); animation: si-spin 9s linear infinite; }
.si--adha .si-star { animation: none; }
.si-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: si-drawn 1.1s ease-in-out .2s forwards; }
.si-fill { opacity: 0; animation: si-filled .7s ease-out 1.1s forwards; }
@keyframes si-drawn { to { stroke-dashoffset: 0; } }
@keyframes si-filled { to { opacity: 1; } }
@keyframes si-spin { to { transform: rotate(360deg); } }
/* Black Friday: a gold line opens across the screen; black doors part onto the store */
.si--blackfriday { background: transparent; }
.si__door { display: none; }
.si--blackfriday .si__door { display: block; position: absolute; top: 0; bottom: 0; width: 50.5%; background: #0B0B0C; transition: transform 1s cubic-bezier(.7,0,.2,1); }
.si--blackfriday .si__door--s { inset-inline-start: 0; box-shadow: inset -1px 0 0 rgb(var(--c-gold) / .5); }
.si--blackfriday .si__door--e { inset-inline-end: 0; box-shadow: inset 1px 0 0 rgb(var(--c-gold) / .5); }
.si--blackfriday.is-out { opacity: 1; transform: none; transition: none; }
.si--blackfriday.is-out .si__door--s { transform: translateX(-101%); }
.si--blackfriday.is-out .si__door--e { transform: translateX(101%); }
html[dir="rtl"] .si--blackfriday.is-out .si__door--s { transform: translateX(101%); }
html[dir="rtl"] .si--blackfriday.is-out .si__door--e { transform: translateX(-101%); }
.si--blackfriday.is-out > :not(.si__door) { opacity: 0; transition: opacity .3s; }
.si--blackfriday .si__stage { height: 3rem; width: 100%; margin: 0; }
.si-line { display: block; width: min(80vw, 34rem); height: 1px; background: linear-gradient(90deg, transparent, rgb(var(--c-gold)), transparent);
  transform: scaleX(0); animation: si-line 1s var(--ease-out) .2s forwards; box-shadow: 0 0 12px rgba(255,214,130,.8); }
@keyframes si-line { to { transform: none; } }
.si--blackfriday .si__title span { font-size: clamp(2.8rem, 13vw, 6.5rem); letter-spacing: .04em; text-transform: uppercase; animation-delay: .7s, 1.6s; }
.si--blackfriday .si__brand { animation-delay: .5s; }
.si--blackfriday .si__sub { animation-delay: 1.2s; }
.si--blackfriday .si__dust i { animation-delay: calc(.4s + var(--d)); }

/* ── Season section on Home ── */
.season__panel { position: relative; overflow: hidden; border-radius: 2rem; padding: 1.6rem 0 1.4rem; background: var(--stage); color: #FFFDF8;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.45), inset 0 0 0 1px var(--hair); }
html[data-look="fitr"] .season__panel { color: rgb(var(--c-ink)); }
.season__panel::before { content: ''; position: absolute; inset: 6px; border: 1px solid rgb(var(--c-gold) / .18); border-radius: 1.65rem; pointer-events: none; }
.season__head { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; padding: 0 1.4rem; margin-bottom: 1.2rem; }
.season__head .look-badge { margin-bottom: .5rem; }
.season__title { font-size: clamp(1.9rem, 6vw, 2.8rem); line-height: 1.1; background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .1em; }
.season__sub { margin-top: .35rem; font-size: .9rem; opacity: .75; max-width: 30rem; }
.season__cd { display: flex; flex-direction: column; gap: .4rem; }
.season__cd-label { font-size: .7rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgb(var(--c-gold)); }
html[lang="ar"] .season__cd-label { font-size: .85rem; letter-spacing: 0; }
.season__cd-row { display: flex; gap: .4rem; }
.season__cd-box { display: flex; flex-direction: column; align-items: center; min-width: 3.3rem; padding: .45rem .3rem .35rem; border-radius: .9rem;
  background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgb(var(--c-gold) / .4); }
html[data-look="fitr"] .season__cd-box { background: rgba(255,255,255,.6); }
.season__cd-box b { font-family: 'Playfair Display', serif; font-size: 1.45rem; line-height: 1; font-variant-numeric: tabular-nums;
  background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent; }
.season__cd-box small { font-size: .6rem; opacity: .7; margin-top: .2rem; }
.season__row { position: relative; display: flex; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .2rem 1.4rem .4rem; }
.season__card { flex: 0 0 58%; scroll-snap-align: start; padding: .55rem .55rem .7rem; border-radius: 1.6rem; background: rgb(var(--c-ivory)); color: rgb(var(--c-ink));
  box-shadow: 0 0 0 1px rgb(var(--c-gold) / .45), 0 20px 40px -24px rgba(0,0,0,.6); }
.season__card .pcard[data-reveal] { opacity: 1; transform: none; }
@media (min-width: 640px) { .season__card { flex-basis: 34%; } }
@media (min-width: 1024px) { .season__card { flex-basis: 22.5%; } }
.season__foot { position: relative; display: flex; justify-content: center; margin-top: 1.1rem; padding: 0 1.4rem; }
.season__cta { display: inline-flex; align-items: center; gap: .6rem; padding: .8rem 1.6rem; border-radius: 9999px; font-weight: 700; font-size: .9rem;
  color: rgb(var(--c-ink)); background: var(--foil); background-size: 180% 100%; box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 14px 30px -14px rgb(var(--c-gold) / .8);
  transition: background-position .8s var(--ease-out); }
.season__cta:hover { background-position: 100% 0; }
/* The surprise tile */
.season__gift { position: relative; display: flex; align-items: center; gap: 1rem; width: calc(100% - 2.8rem); margin: 0 1.4rem 1.2rem; padding: .8rem 1rem; text-align: start;
  border-radius: 1.3rem; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgb(var(--c-gold) / .5); overflow: hidden; }
html[data-look="fitr"] .season__gift { background: rgba(255,255,255,.55); }
.season__gift::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,240,200,.18) 50%, transparent 70%);
  transform: translateX(-100%); animation: season-sheen 3.5s ease-in-out infinite; }
@keyframes season-sheen { 60%, 100% { transform: translateX(100%); } }
.season__gift-art svg { width: 4.2rem; height: auto; filter: drop-shadow(0 6px 14px rgba(0,0,0,.35)); animation: season-wiggle 2.8s ease-in-out infinite; }
@keyframes season-wiggle { 0%, 70%, 100% { transform: none; } 75% { transform: rotate(-6deg); } 82% { transform: rotate(5deg); } 89% { transform: rotate(-3deg); } }
.season__gift-txt { flex: 1; display: flex; flex-direction: column; }
.season__gift-txt b { font-family: 'Playfair Display', 'El Messiri', serif; font-size: 1.2rem; background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent; }
.season__gift-txt small { font-size: .8rem; opacity: .75; }
.season__gift-go { width: 2.4rem; height: 2.4rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--foil); color: rgb(var(--c-ink)); flex-shrink: 0; }

/* ── The surprise opening ── */
.sg { transition: transform .5s var(--spring), opacity .35s; }
.sg.is-closed { transform: scale(.85); opacity: 0; }
.sg__x { position: absolute; top: -.5rem; inset-inline-end: -.25rem; z-index: 3; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; }
.sg__art { position: relative; height: 12rem; display: flex; align-items: flex-end; justify-content: center; }
.sg__art svg { position: relative; z-index: 2; width: 11rem; height: auto; filter: drop-shadow(0 18px 30px rgba(0,0,0,.5)); }
.sg__rays { position: absolute; left: 50%; bottom: 2rem; width: 22rem; height: 22rem; margin-left: -11rem; border-radius: 50%; opacity: 0; z-index: 1;
  background: repeating-conic-gradient(from 0deg, rgba(255,226,150,.35) 0 6deg, transparent 6deg 18deg); -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 65%); mask-image: radial-gradient(circle, #000 20%, transparent 65%);
  transition: opacity .6s .5s; }
.sg.is-open .sg__rays { opacity: 1; animation: si-spin 14s linear infinite; }
.sg__env-flap { transform-origin: 50% 12px; transform-box: view-box; transition: transform .6s ease-in .2s; }
.sg.is-open .sg__env-flap { transform: scaleY(-1); }
.season__box-lid { transform-box: fill-box; transform-origin: 0% 100%; transition: transform .7s cubic-bezier(.3,1.4,.5,1) .2s; }
.sg__box { overflow: visible; }
.sg.is-open .season__box-lid { transform: translate(-4px, -24px) rotate(-9deg); }
.sg__card { position: relative; z-index: 3; margin-top: .6rem; padding: 1.6rem 1.4rem 1.4rem; border-radius: 1.6rem; background: rgb(var(--c-ivory)); color: rgb(var(--c-ink));
  box-shadow: 0 0 0 1px rgb(var(--c-gold) / .6), 0 30px 60px -20px rgba(0,0,0,.6); opacity: 0; transform: translateY(40px) scale(.95);
  transition: opacity .5s var(--ease-out) .7s, transform .7s var(--spring) .7s; }
.sg.is-open .sg__card { opacity: 1; transform: none; }
.sg__kicker { font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgb(var(--c-rose)); }
html[lang="ar"] .sg__kicker { letter-spacing: 0; font-size: .9rem; }
.sg__text { font-family: 'Playfair Display', 'El Messiri', serif; font-size: 1.5rem; line-height: 1.25; margin-top: .4rem; }
.sg__label { margin-top: 1rem; font-size: .75rem; color: rgb(var(--c-muted)); }
.sg__code { margin-top: .35rem; display: inline-flex; align-items: center; gap: .6rem; padding: .7rem 1.4rem; border-radius: 1rem; font-size: 1.5rem; font-weight: 800; letter-spacing: .12em;
  color: rgb(var(--c-ink)); background: rgb(var(--c-blush)); box-shadow: inset 0 0 0 1.5px rgb(var(--c-gold)); border: 0; }
.sg__code i { font-size: 1rem; opacity: .6; }
.sg__hint { margin-top: .5rem; font-size: .8rem; color: rgb(var(--c-muted)); }
.sg__cta { margin-top: 1.1rem; width: 100%; padding: .85rem; border-radius: 9999px; font-weight: 700; color: rgb(var(--c-ink)); background: var(--foil);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55); }

/* ── Gold sparkles from the bag ── */
.season-burst { position: fixed; z-index: 120; pointer-events: none; }
.season-burst i { position: absolute; width: 6px; height: 6px; margin: -3px; background: #F2D27C; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: season-burst .9s var(--ease-out) forwards; }
@keyframes season-burst { 0% { transform: scale(.4); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1.3) rotate(90deg); opacity: 0; } }

/* ── The rest of the store, dressed for the season ── */
/* a small gold star before every section title */
html[data-look] [data-view] h2.font-display:not(.season__title)::before { content: ''; display: inline-block; width: .55em; height: .55em; margin-inline-end: .35em; vertical-align: .12em;
  background: var(--foil); clip-path: polygon(50% 0, 63% 25%, 85% 15%, 75% 37%, 100% 50%, 75% 63%, 85% 85%, 63% 75%, 50% 100%, 37% 75%, 15% 85%, 25% 63%, 0 50%, 25% 37%, 15% 15%, 37% 25%); }
/* product photos framed with a gold hairline; season sale badges */
html[data-look] .pcard__img { box-shadow: 0 0 0 1px rgb(var(--c-gold) / .35); }
html[data-look] [data-sale] { background: rgb(var(--c-ink)); color: rgb(var(--c-gold)); box-shadow: inset 0 0 0 1px rgb(var(--c-gold) / .6); }
/* a faint gold star lattice on the page */
html[data-look] body { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cg fill='none' stroke='%23C9A24E' stroke-opacity='.10' stroke-width='.8'%3E%3Cpath transform='translate(36 36) scale(15)' vector-effect='non-scaling-stroke' d='M0-1L.27-.65.71-.71.65-.27 1 0 .65.27.71.71.27.65 0 1-.27.65-.71.71-.65.27-1 0-.65-.27-.71-.71-.27-.65Z'/%3E%3C/g%3E%3C/svg%3E"); }
/* bottom bar and footer: gold edge and gold for the screen you're on */
html[data-look] nav.fixed.bottom-3 { box-shadow: 0 18px 40px -16px rgba(0,0,0,.5), inset 0 0 0 1px rgb(var(--c-gold) / .45); }
html[data-look] nav.fixed.bottom-3 .text-white { color: rgb(var(--c-gold)); }
html[data-look] footer { box-shadow: inset 0 1px 0 rgb(var(--c-gold) / .5); }
html[data-look] footer::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cg fill='none' stroke='%23E0C27A' stroke-opacity='.12' stroke-width='.8'%3E%3Cpath transform='translate(36 36) scale(15)' vector-effect='non-scaling-stroke' d='M0-1L.27-.65.71-.71.65-.27 1 0 .65.27.71.71.27.65 0 1-.27.65-.71.71-.65.27-1 0-.65-.27-.71-.71-.27-.65Z'/%3E%3C/g%3E%3C/svg%3E"); }

@media (prefers-reduced-motion: reduce) {
  .si *, .season__gift::after, .season__gift-art svg { animation: none !important; }
  .si__title span { transform: none; } .si__brand, .si__sub, .si-fill, .si-moon, .si-lantern .si-flame { opacity: 1; } .si-lantern { transform: none; }
  .si-draw { stroke-dashoffset: 0; }
}

/* Admin → Settings → Store look → Preview: a small tag so the preview is never mistaken for the live store. */
.look-preview-tag {
  position: fixed; z-index: 9999; left: 50%; bottom: calc(76px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  padding: 6px 14px; border-radius: 999px; font: 600 12px/1.2 system-ui, sans-serif; white-space: nowrap; pointer-events: none;
  background: rgb(20 18 16 / .86); color: #F3E3B5; border: 1px solid rgb(212 175 96 / .6); box-shadow: 0 6px 18px rgb(0 0 0 / .25);
}

/* ══ Event banner (Black / White Friday): the home banner becomes the event's poster ══
   One centred column: the name badge, the event's name, its discount in giant gold foil, what it covers and until when,
   then the spotlight photos in their gold halo and the button to the event's items. (components/season-look.js) */
[data-hero].is-event > .relative { display: flex; flex-direction: column; align-items: center; gap: 0; text-align: center; padding-top: 2.6rem; }
[data-hero].is-event [data-hero-copy] { display: contents; }
[data-hero].is-event [data-hero-copy] > br,
[data-hero].is-event [data-hero-copy] > p.uppercase,
[data-hero].is-event [data-hero-copy] > h1,
[data-hero].is-event [data-hero-copy] > h1 + p { display: none; }
[data-hero].is-event .look-badge { order: 1; margin-bottom: .2rem; }
[data-hero].is-event .ev { order: 2; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
[data-hero].is-event [data-spot-wrap] { order: 3; width: 100%; margin-top: 1.6rem; }
[data-hero].is-event [data-spot-wrap] > .float-slow { width: 64%; max-width: 330px; }
[data-hero].is-event [data-hero-copy] > .fade-up.mt-8 { order: 4; justify-content: center; margin-top: 2.4rem; }
[data-hero].is-event [data-hero-copy] > .fade-up.mt-6 { order: 5; justify-content: center; }

.ev__title { margin-bottom: .5rem; }
.ev__name { display: inline-block; font-family: 'El Messiri', 'Playfair Display', serif; font-weight: 700; font-size: clamp(2.6rem, 12vw, 5.2rem); line-height: 1.1;
  background: var(--foil); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: look-shine 6s ease-in-out 1.5s infinite; padding: 0 .1em .05em; }
html[lang="en"] .ev__title { margin-bottom: .5rem; }
.ev__name { display: inline-block; font-family: 'Playfair Display', serif; text-transform: uppercase; letter-spacing: .02em; }
.ev__upto { margin-top: .6rem; font-size: .8rem; font-weight: 700; letter-spacing: .4em; padding-inline-start: .4em; color: rgb(var(--c-gold)); }
html[lang="ar"] .ev__upto { letter-spacing: 0; padding: 0; font-size: 1.05rem; }
.ev__dealwrap { display: flex; flex-direction: column; align-items: center; }
.ev__deal { display: inline-flex; align-items: flex-start; margin-top: .2rem; font-family: 'Inter', 'Tajawal', system-ui, sans-serif; font-weight: 800; line-height: .82; }
.ev__deal b { font-size: clamp(7.5rem, 40vw, 15rem); font-weight: 800; letter-spacing: -.06em; padding-inline-end: .05em;
  background: var(--foil); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 10px 30px rgba(212,175,55,.25)); animation: look-shine 7s ease-in-out 2s infinite; }
.ev__deal > span { display: flex; flex-direction: column; gap: .14em; padding-top: .08em; }
.ev__deal > span i { font-style: normal; font-size: clamp(2.8rem, 13vw, 5.6rem); letter-spacing: -.04em; color: #FFFDF8; }
.ev__deal > span i + i { font-size: clamp(2rem, 9.5vw, 4rem); letter-spacing: 0; color: rgb(var(--c-gold)); }
html[lang="ar"] .ev__deal > span i + i { font-family: 'Tajawal', sans-serif; line-height: 1; }
.ev__what { margin-top: .9rem; font-size: clamp(1rem, 4.2vw, 1.3rem); font-weight: 700; color: #FFFDF8; letter-spacing: .02em; }
.ev__until { margin-top: 1rem; display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1.3rem; border-radius: 9999px; font-size: .95rem; color: #FFFDF8;
  box-shadow: inset 0 0 0 1px rgb(var(--c-gold) / .7); background: rgb(255 255 255 / .04); }
.ev__until i { color: rgb(var(--c-gold)); font-size: .8rem; }
.ev__until b { color: rgb(var(--c-gold)); font-weight: 800; }
@media (min-width: 768px) {
  [data-hero].is-event > .relative { padding-top: 3.4rem; }
  [data-hero].is-event [data-spot-wrap] > .float-slow { width: 30%; max-width: 340px; }
  .ev__deal b { font-size: clamp(10rem, 17vw, 16rem); }
  .ev__deal > span i { font-size: clamp(3.8rem, 6.4vw, 6rem); }
  .ev__deal > span i + i { font-size: clamp(2.6rem, 4.4vw, 4.2rem); }
}
@media (prefers-reduced-motion: reduce) { .ev__name, .ev__deal b { animation: none !important; } }
[data-hero].is-event .look-badge { display: none; }
.ev__name { background-image: linear-gradient(100deg, #E8CF8B 0%, #FFF4CC 30%, #F2DC9A 55%, #FFF8E0 75%, #E8CF8B 100%); background-size: 220% 100%; }
.ev__until { position: relative; z-index: 3; background: rgb(11 11 12 / .85); }
[data-hero].is-event [data-spot-wrap] { margin-top: 2.6rem; }