/* Glowy Design V2 — motion + a few things Tailwind utilities can't express. */
:root {
  /* The store's colours as R G B (Tailwind reads them: scripts/tailwind.store.config.js). A season look (css/looks.css)
     sets its own. */
  --c-ink: 31 26 28; --c-ivory: 250 246 242; --c-blush: 246 227 224; --c-line: 237 228 222; --c-muted: 122 111 114;
  --c-rose: 183 110 121; --c-rose-deep: 142 75 87; --c-rose-soft: 233 201 196; --c-gold: 201 169 110;
  --aurora-1: #F3CFCB; --aurora-2: #EBD9B8; --aurora-3: #E4C2D0;
  --ink: rgb(var(--c-ink)); --ivory: rgb(var(--c-ivory)); --blush: rgb(var(--c-blush)); --rose: rgb(var(--c-rose));
  --rose-deep: rgb(var(--c-rose-deep)); --gold: rgb(var(--c-gold));
  --spring: cubic-bezier(.2, .9, .25, 1.15);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}
html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
body { font-family: 'Inter', 'Tajawal', system-ui, sans-serif; }
html[lang="ar"] body { font-family: 'Tajawal', 'Inter', system-ui, sans-serif; }
html[lang="ar"] .font-display { font-family: 'El Messiri', 'Playfair Display', serif; }
html[lang="ar"] body * { letter-spacing: 0 !important; }     /* letter-spacing breaks joined Arabic letters */
.no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { scrollbar-width: none; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Loader ── */
.v2-loader { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--blush); border-top-color: var(--rose); animation: v2spin .9s linear infinite; }
@keyframes v2spin { to { transform: rotate(360deg); } }

/* ── Announcement marquee ── */
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; width: max-content; animation: marquee 28s linear infinite; }
html[dir="rtl"] .marquee__track { animation-name: marquee-rtl; }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes marquee-rtl { to { transform: translateX(50%); } }

/* ── Header shrink on scroll ── */
.v2-header { transition: box-shadow .35s var(--ease-out), background-color .35s; }
.v2-header__bar { height: 4.5rem; transition: height .35s var(--ease-out); }
.v2-header.is-scrolled { box-shadow: 0 8px 30px -18px rgb(var(--c-ink) / .35); background-color: rgb(var(--c-ivory) / .92); }
.v2-header.is-scrolled .v2-header__bar { height: 3.6rem; }
.v2-header .v2-logo { transition: transform .35s var(--ease-out); }
/* shrink with Tailwind's own transform variables, so the logo stays centred (-translate-x-1/2 is kept) */
.v2-header.is-scrolled .v2-logo { --tw-scale-x: .86; --tw-scale-y: .86; }

/* ── Hero aurora ── */
.aurora span { position: absolute; border-radius: 9999px; filter: blur(60px); opacity: .55; animation: aurora 16s ease-in-out infinite alternate; }
.aurora span:nth-child(1) { width: 60vmax; height: 60vmax; background: var(--aurora-1); top: -30vmax; inset-inline-start: -20vmax; }
.aurora span:nth-child(2) { width: 45vmax; height: 45vmax; background: var(--aurora-2); top: 10%; inset-inline-end: -18vmax; animation-duration: 20s; animation-delay: -6s; }
.aurora span:nth-child(3) { width: 38vmax; height: 38vmax; background: var(--aurora-3); bottom: -22vmax; inset-inline-start: 30%; animation-duration: 24s; animation-delay: -12s; }
@keyframes aurora { 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(6vmax,4vmax,0) scale(1.12); } 100% { transform: translate3d(-4vmax,-3vmax,0) scale(.95); } }

/* Word-by-word title reveal. The first screen's animations start slightly visible (never opacity 0): browsers count a
   title or picture as shown only once it is visible at all, so starting from 0 made the store count as slow (PageSpeed LCP). */
.reveal-words .w { display: inline-block; opacity: .3; transform: translateY(.6em) rotate(2deg); filter: blur(6px);
  animation: word-in .9s var(--ease-out) forwards; animation-delay: calc(var(--i) * 90ms + 150ms); }
@keyframes word-in { to { opacity: 1; transform: none; filter: none; } }
.fade-up { opacity: .3; transform: translateY(18px); animation: fade-up .9s var(--ease-out) forwards; animation-delay: var(--d, 0ms); }
@keyframes fade-up { to { opacity: 1; transform: none; } }

/* Hero spotlight (rotating product cards) */
.spot { position: relative; }
.spot__card { position: absolute; inset: 0; border-radius: 2rem; overflow: hidden; background: #fff; box-shadow: 0 30px 60px -25px rgb(var(--c-rose-deep) / .45);
  transition: transform .9s var(--ease-out), opacity .9s var(--ease-out), filter .9s; }
.spot__card img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 6s linear; }
.spot__card[data-pos="0"] { z-index: 3; transform: translate3d(0,0,0) rotate(0deg); }
.spot__card[data-pos="0"] img { transform: scale(1); }
.spot__card[data-pos="1"] { z-index: 2; transform: translate3d(12%, 6%, 0) rotate(7deg) scale(.9); opacity: .9; filter: saturate(.85); }
.spot__card[data-pos="2"] { z-index: 1; transform: translate3d(-12%, 8%, 0) rotate(-8deg) scale(.84); opacity: .75; filter: saturate(.7); }
html[dir="rtl"] .spot__card[data-pos="1"] { transform: translate3d(-12%, 6%, 0) rotate(-7deg) scale(.9); }
html[dir="rtl"] .spot__card[data-pos="2"] { transform: translate3d(12%, 8%, 0) rotate(8deg) scale(.84); }
.spot__card.is-leaving { transform: translate3d(0,-14%,0) scale(1.04) rotate(-3deg) !important; opacity: 0 !important; }
.float-slow { animation: float 7s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-10px); } }

/* ── Scroll reveal ── */
[data-reveal] { opacity: 0; transform: translateY(26px) scale(.985); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); transition-delay: var(--d, 0ms); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* ── Category chips with sliding highlight ── */
.chips { position: relative; }
.chips__pill { position: absolute; top: 0; height: 100%; border-radius: 9999px; background: var(--ink); z-index: 0;
  transition: transform .5s var(--spring), width .5s var(--spring); }
.chips button { position: relative; z-index: 1; transition: color .3s; }

/* ── Product card ── */
.pcard__img img { transition: transform 1.2s var(--ease-out); }
@media (hover: hover) { .pcard__add { transform: translateY(10px) scale(.8); } }
@media (hover: hover) { .pcard:hover .pcard__img img { transform: scale(1.07); } .pcard:hover .pcard__add { transform: translateY(0) scale(1); } }
.pcard__add { transition: transform .45s var(--spring), background-color .2s; }
.pcard:active .pcard__img { transform: scale(.985); }
.pcard__img { transition: transform .2s; }

/* Skeleton shimmer */
.shimmer { position: relative; overflow: hidden; background: rgb(var(--c-line)); }
.shimmer::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); animation: shimmer 1.4s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }

/* ── Badges / pops ── */
.pop { animation: pop .5s var(--spring); }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
.pulse-dot { animation: pulse-dot 1.8s ease-in-out infinite; }
@keyframes pulse-dot { 0%,100% { box-shadow: 0 0 0 0 rgba(234,88,12,.45); } 60% { box-shadow: 0 0 0 7px rgba(234,88,12,0); } }

/* ── Sheets / drawers (overlay.js toggles these classes) ── */
.sheet { transition: transform .55s var(--spring), opacity .35s; }
.sheet.is-closed { transform: translateY(105%); opacity: .6; }
@media (min-width: 768px) { .sheet.is-closed { transform: translateY(24px) scale(.97); opacity: 0; } }
.drawer { transition: transform .5s var(--ease-out); }
.drawer.is-closed { transform: translateY(105%); }
@media (min-width: 768px) { .drawer.is-closed { transform: translateX(105%); } html[dir="rtl"] .drawer.is-closed { transform: translateX(-105%); } }
.backdrop { transition: opacity .35s; }
/* Side menu (layout/side-menu.js): slides in from the start side (the right in Arabic) */
.side-menu { transition: transform .45s var(--ease-out); }
.side-menu.is-closed { transform: translateX(-105%); }
html[dir="rtl"] .side-menu.is-closed { transform: translateX(105%); }

/* Chips for sizes */
.size-chip { transition: all .25s var(--ease-out); }
.size-chip:active { transform: scale(.96); }

/* Bottom nav bag bump */
.bump { animation: bump .6s var(--spring); }
@keyframes bump { 30% { transform: translateY(-6px) scale(1.12); } 100% { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  [data-reveal], .reveal-words .w, .fade-up { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* Screen change (Home ⇄ Shop) */
.view-enter { animation: view-in .55s var(--ease-out); }
@keyframes view-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Trending brands (home): story-style rings, a rising arrow and an emoji badge */
.brand-ring { background: conic-gradient(from 210deg, var(--gold), var(--rose), var(--rose-deep), rgb(var(--c-rose-soft)), var(--gold)); }
.brand-emoji { animation: brand-bob 2.6s ease-in-out infinite; animation-delay: var(--d, 0ms); }
.brand-trend i { animation: brand-rise 1.6s ease-in-out infinite; }
@keyframes brand-bob { 50% { transform: translateY(-3px) rotate(-8deg); } }
@keyframes brand-rise { 0%,100% { transform: translate(0,0); } 50% { transform: translate(1px,-2px); } }
@media (prefers-reduced-motion: reduce) { .brand-emoji, .brand-trend i { animation: none; } }

/* Black / White Friday stamp on item cards (components/product-card.js): a round black seal with a gold double ring,
   the event's name above and below its % off. */
.fri-seal { position: relative; width: 2.9rem; height: 2.9rem; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .05rem; background: radial-gradient(circle at 35% 30%, #2A2620 0%, #0B0B0C 70%); color: #F6E7B8; text-align: center; line-height: 1;
  box-shadow: 0 0 0 2px #0B0B0C, 0 0 0 3.5px #D4AF37, 0 8px 18px -6px rgba(0,0,0,.45); transform: rotate(-10deg); }
.fri-seal::before { content: ''; position: absolute; inset: 3px; border-radius: 50%; border: 1px dashed rgb(212 175 55 / .55); }
.fri-seal i { font-style: normal; font-size: .42rem; font-weight: 800; letter-spacing: .18em; padding-inline-start: .18em; color: #D4AF37; }
html[lang="ar"] .fri-seal i { font-size: .48rem; letter-spacing: 0; padding: 0; }
.fri-seal b { font-size: .78rem; font-weight: 800; letter-spacing: -.02em;
  background: linear-gradient(100deg, #E8CF8B, #FFF4CC 45%, #C9A24E); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (min-width: 768px) { .fri-seal { width: 3.2rem; height: 3.2rem; } .fri-seal b { font-size: .85rem; } }
.fri-price { padding: .5rem .65rem .55rem; border-radius: 1rem; background: rgb(var(--c-blush) / .55); box-shadow: inset 0 0 0 1px rgb(212 175 55 / .35); font-size: 11.5px; line-height: 1.35; }
.fri-price p { display: flex; align-items: baseline; justify-content: space-between; gap: .4rem; }
.fri-price p + p { margin-top: .15rem; }
.fri-price span { color: rgb(var(--c-muted)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fri-price s { color: rgb(var(--c-muted)); white-space: nowrap; }
.fri-price__off span { color: #8C6A2B; font-weight: 700; }
.fri-price__off b { padding: .05rem .45rem; border-radius: 9999px; background: #0B0B0C; color: #E8CF8B; font-size: 10.5px; font-weight: 800; white-space: nowrap; }
.fri-price__pay { margin-top: .3rem !important; padding-top: .3rem; border-top: 1px dashed rgb(212 175 55 / .55); }
.fri-price__pay span { color: rgb(var(--c-ink)); font-weight: 700; font-size: 12.5px; }
.fri-price__pay b { color: rgb(var(--c-rose-deep)); font-size: 15px; font-weight: 800; white-space: nowrap; }
.fri-price__pay small { font-size: 10.5px; font-weight: 700; color: rgb(var(--c-muted)); }
.fri-price__pay span { flex-shrink: 0; }
.fri-seal--lg { position: absolute; width: 4.4rem; height: 4.4rem; transform: rotate(-10deg); }
.fri-seal--lg i { font-size: .62rem; }
html[lang="ar"] .fri-seal--lg i { font-size: .7rem; }
.fri-seal--lg b { font-size: 1.15rem; }
@media (min-width: 768px) { .fri-seal--lg { width: 5rem; height: 5rem; } .fri-seal--lg b { font-size: 1.3rem; } }
.fri-tag { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .4rem .3rem .8rem; border-radius: 9999px; background: #0B0B0C; color: #E8CF8B; font-size: 12px; font-weight: 700; box-shadow: 0 0 0 1px rgb(212 175 55 / .55); }
html[dir="rtl"] .fri-tag { padding: .3rem .8rem .3rem .4rem; }
.fri-tag i { font-size: 10px; color: #D4AF37; }
.fri-tag b { padding: .1rem .5rem; border-radius: 9999px; background: linear-gradient(135deg, #E8CF8B, #C9A24E); color: #0B0B0C; font-weight: 800; }