/* =========================================================================
   GulfRabit · Noor theme
   =========================================================================

   নূর — LIGHT. The theme is named for what it is made of.

   THE METAPHOR THAT DOES THE DESIGN WORK
   --------------------------------------
   The merchant's reference, saraalsalam.com, is not beautiful because it is
   green and gold. It is beautiful because it is NIGHT: darkness is the only
   canvas on which light becomes a material. A jeweller's window is black
   velvet for the same reason. Luxe gilded the day; Noor is the shop after
   dark, lanterns lit — the Gulf at night, deep water with gold riding on it.

   And the one thing that fought every light theme becomes the star: the
   product photography is shot on pure white. On ivory it glared; on deep
   water each card becomes a LIT VITRINE — a shop window glowing in a dark
   street. The photos are the light source. Nothing had to be reshot.

   HOW IT IS BUILT
   ---------------
   The site paints with surface/text ROLE tokens, never raw hex — so most of
   this theme is one token block, and every partial and module re-dresses
   itself. What follows the tokens is only what the tokens cannot reach:
   glass chrome that hardcodes white, the vitrine wells, the type, the
   fireflies, the dawn panel.

   Same contract as every theme: scoped under [data-theme="noor"], inert
   until the attribute is set, nothing load-bearing, nothing starts hidden,
   every movement dies under prefers-reduced-motion. Keyframes are reused
   from theme-luxe.css where they exist — keyframe names are global, and a
   second copy would be a second thing to keep in sync.
   ========================================================================= */

[data-theme="noor"] {
  /* ---- Surfaces: the water ------------------------------------------- */
  --surface-page:    #04191F;   /* the gulf at night                       */
  --surface-raised:  #0A2830;   /* cards, menus, drawers — one fathom up   */
  --surface-sunken:  #071F26;   /* inputs, wells — one fathom down         */
  --surface-band:    #051D24;   /* alternating bands, footer               */
  --surface-inverse: #F2EAD8;   /* the rare bright block                   */

  --border-hairline: rgba(232, 207, 142, .16);  /* hairlines are gold thread */
  --border-input:    #4F7A85;   /* 3.6:1 on the sunken input — the audit caught 2.4 */

  /* ---- Text: warm ivory, never white --------------------------------- */
  /* Pure white on deep teal glares like a torch; lamplight is warm.
     Every value is AA on --surface-page: primary 15.1:1, secondary 10.5:1,
     muted 6.6:1 (worst case is --surface-raised: 12.9 / 9.0 / 5.6). */
  --text-primary:    #F2EAD8;
  --text-secondary:  #CFC5AB;
  --text-muted:      #A29C86;
  --text-on-accent:  #04222b;
  --text-inverse:    #0B2830;

  /* ---- Brand hues, re-cut for the dark ------------------------------- */
  --link:            #4FC9E4;   /* cyan brightened: 8.2:1 on the water     */
  --link-hover:      #7FDCF0;
  --accent-ink:      #4FC9E4;
  --gold-ink:        #E4CE92;   /* gold may finally be BRIGHT: 10.3:1      */
  --lime-ink:        #B9E36B;

  /* ---- Status & shadows ------------------------------------------------
     The audit's root-cause find: every --shadow-* token is documented as
     'tuned for a white canvas' and disappears on the night page — so the
     toast, the modal, the mega menu, the button lift all sat flat. Re-cut
     once here, every var() consumer lifts again. The error red brightens
     the way the cyan did. */
  --gr-error:  #F0666B;
  --scrollbar-thumb: #8A6D22;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.5);
  --shadow-md: 0 4px 16px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4);
  --shadow-lg: 0 18px 48px rgba(0,0,0,.6), 0 6px 16px rgba(0,0,0,.45);

  /* ---- Washes & glass ------------------------------------------------- */
  --wash-hover:      rgba(242, 234, 216, .06);
  --wash-shimmer:    rgba(242, 234, 216, .06);
  --scrim:           rgba(0, 0, 0, .62);
  --glass-header:    rgba(5, 26, 33, .78);
  --glass-overlay:   rgba(5, 26, 33, .93);
}

/* ---- The water itself ---------------------------------------------------
   The page colour moves up to <html> (the Luxe precedent) so the fixed
   layers between html and content — the lagoon glow and the fireflies —
   have somewhere to live. Two vast, slow radial glows: moonlight in the
   brand's cyan high on the water, an ember of gold low on it. They drift
   on Luxe's own keyframe. */
html[data-theme="noor"] { background: var(--surface-page); }
[data-theme="noor"] body { position: relative; background: transparent; }
[data-theme="noor"] body::before {
  content: "";
  position: fixed; inset: -20%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(52% 40% at 78% 8%,  rgba(27, 180, 212, .10), transparent 60%),
    radial-gradient(44% 38% at 15% 90%, rgba(201, 162, 75, .10), transparent 62%),
    radial-gradient(60% 50% at 40% 45%, rgba(14, 124, 153, .05), transparent 65%);
  animation: lux-drift 40s var(--ease-inout) infinite alternate;
}

/* ---- Fireflies ----------------------------------------------------------
   Luxe's dust, come alive. On parchment a mote can only be a fleck; on
   night water it is a LAMP — each one carries a soft halo (the blur radius
   of its shadow), they rise more slowly, and they breathe deeper. Same
   duplicated-column loop, same two composited elements, same absolute
   removal under reduced motion: a stopped firefly is a dead one. */
html[data-theme="noor"]::before,
html[data-theme="noor"]::after {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 3px; height: 3px;
  border-radius: 50%;
  pointer-events: none;
}
html[data-theme="noor"]::before {
  box-shadow:
    7vw 12vh 4px 1px rgba(232,207,142,.5),   7vw 112vh 4px 1px rgba(232,207,142,.5),
    23vw 78vh 3px 0 rgba(244,229,180,.42),   23vw 178vh 3px 0 rgba(244,229,180,.42),
    31vw 34vh 5px 1px rgba(201,162,75,.38),  31vw 134vh 5px 1px rgba(201,162,75,.38),
    44vw 91vh 3px 0 rgba(232,207,142,.45),   44vw 191vh 3px 0 rgba(232,207,142,.45),
    52vw 18vh 4px 1px rgba(244,229,180,.4),  52vw 118vh 4px 1px rgba(244,229,180,.4),
    63vw 66vh 3px 0 rgba(201,162,75,.42),    63vw 166vh 3px 0 rgba(201,162,75,.42),
    71vw 42vh 5px 1px rgba(232,207,142,.36), 71vw 142vh 5px 1px rgba(232,207,142,.36),
    83vw 84vh 3px 0 rgba(244,229,180,.44),   83vw 184vh 3px 0 rgba(244,229,180,.44),
    91vw 22vh 4px 1px rgba(232,207,142,.4),  91vw 122vh 4px 1px rgba(232,207,142,.4),
    12vw 55vh 3px 0 rgba(201,162,75,.35),    12vw 155vh 3px 0 rgba(201,162,75,.35),
    38vw 8vh 3px 0 rgba(232,207,142,.38),    38vw 108vh 3px 0 rgba(232,207,142,.38),
    57vw 97vh 4px 1px rgba(244,229,180,.36), 57vw 197vh 4px 1px rgba(244,229,180,.36),
    76vw 71vh 3px 0 rgba(232,207,142,.4),    76vw 171vh 3px 0 rgba(232,207,142,.4),
    96vw 58vh 3px 0 rgba(201,162,75,.33),    96vw 158vh 3px 0 rgba(201,162,75,.33),
    18vw 28vh 4px 1px rgba(244,229,180,.34), 18vw 128vh 4px 1px rgba(244,229,180,.34),
    67vw 15vh 3px 0 rgba(232,207,142,.36),   67vw 115vh 3px 0 rgba(232,207,142,.36);
  animation: lux-rise 190s linear infinite, lux-breathe 11s ease-in-out infinite alternate;
}
html[data-theme="noor"]::after {
  width: 4px; height: 4px;
  box-shadow:
    15vw 88vh 6px 2px rgba(244,229,180,.5),  15vw 188vh 6px 2px rgba(244,229,180,.5),
    29vw 45vh 7px 2px rgba(232,207,142,.42), 29vw 145vh 7px 2px rgba(232,207,142,.42),
    48vw 74vh 6px 2px rgba(201,162,75,.44),  48vw 174vh 6px 2px rgba(201,162,75,.44),
    61vw 29vh 8px 2px rgba(244,229,180,.38), 61vw 129vh 8px 2px rgba(244,229,180,.38),
    79vw 55vh 6px 2px rgba(232,207,142,.45), 79vw 155vh 6px 2px rgba(232,207,142,.45),
    88vw 92vh 7px 2px rgba(244,229,180,.4),  88vw 192vh 7px 2px rgba(244,229,180,.4),
    9vw 70vh 6px 2px rgba(232,207,142,.38),  9vw 170vh 6px 2px rgba(232,207,142,.38),
    36vw 12vh 7px 2px rgba(201,162,75,.36),  36vw 112vh 7px 2px rgba(201,162,75,.36);
  animation: lux-rise 120s linear infinite, lux-breathe 7s ease-in-out infinite alternate-reverse;
}

/* ---- The lantern strip ---------------------------------------------------
   The announce bar ships a bright cyan-to-lime day gradient — at night it
   was a strip of noon glued to the top of the page. It becomes the lantern
   strip: deep water, gold thread beneath, the helpline and delivery line in
   lamplight. */
[data-theme="noor"] .announce-bar {
  background: linear-gradient(90deg, #062028 0%, #0A3641 55%, #062028 100%);
  color: #E4CE92;
  border-bottom: 1px solid rgba(232, 207, 142, .3);
}
[data-theme="noor"] .announce-bar a,
[data-theme="noor"] .announce-bar__phone { color: #FFF3C4; }
[data-theme="noor"] .announce-bar__close { color: #E4CE92; }

/* ---- The chrome: dark glass ---------------------------------------------
   Everything the tokens cannot reach because it hardcodes white. */
[data-theme="noor"] .site-header { background: rgba(5, 26, 33, .92); }
[data-theme="noor"] .site-header.is-scrolled {
  background: var(--glass-header);
  border-bottom-color: var(--border-hairline);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-theme="noor"] .site-header.is-scrolled { background: rgba(5, 26, 33, .98); }
}
[data-theme="noor"] .tabbar { background: rgba(5, 26, 33, .93); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-theme="noor"] .tabbar { background: rgba(5, 26, 33, .99); }
}
[data-theme="noor"] .pdp-buybar { background: rgba(5, 26, 33, .93); border-top-color: var(--border-hairline); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-theme="noor"] .pdp-buybar { background: rgba(5, 26, 33, .99); }
}
[data-theme="noor"] .cart-mobile-cta { background: rgba(5, 26, 33, .94); border-top-color: var(--border-hairline); }

/* ---- Type: the lantern script -------------------------------------------
   Cinzel, as Luxe — it is the house's ceremonial voice — but where Luxe had
   to guard its gold against parchment, night sets it free: the tail may be
   truly bright, and it may GLOW. The glow is a text-shadow behind the
   clipped fill, so it halos the letters without fogging them. */
[data-theme="noor"] .section-head__titles > h1,
[data-theme="noor"] .section-head__titles > h2,
[data-theme="noor"] .plp-head h1,
[data-theme="noor"] h1.page-head,
[data-theme="noor"] .express__head {
  font-family: 'Cinzel', 'Playfair Display', Georgia, serif;
  font-weight: 700;
  letter-spacing: .015em;
  color: var(--text-primary);
}
[data-theme="noor"] .lux-gilt { color: var(--gold-ink); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  [data-theme="noor"] .lux-gilt {
    background: linear-gradient(100deg,
      #B8860B 0%, #E8CF8E 22%, #FFF3C4 40%, #C9A24B 56%,
      #FFEDB0 72%, #D9B45C 88%, #B8860B 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 18px rgba(201, 162, 75, .45), 0 0 3px rgba(232, 207, 142, .3);
  }
}
[data-theme="noor"] .overline { color: var(--gold-ink); letter-spacing: .16em; }

/* ---- The vitrines --------------------------------------------------------
   The heart of the theme. The card is a dark case; the image well inside
   stays PURE WHITE, because the photography is lit on white — so each
   product sits in its own illuminated window, and the row of cards reads as
   a shopping street at night. The gold ring frames the glass; a soft halo
   sits under the whole case, breathing brighter under attention. */
html[data-theme="noor"] .product-card,
html[data-theme="noor"] .category-card,
html[data-theme="noor"] .surface-gr {
  --lux-border: linear-gradient(135deg,
      #F9E9A8 0%, #B8860B 22%, #6E5313 40%, #FFF3C4 56%, #B8860B 74%, #E7CE8F 100%);
  border: 2.5px solid transparent;
  background:
    linear-gradient(var(--surface-raised), var(--surface-raised)) padding-box,
    var(--lux-border) border-box;
  background-size: auto, 240% 100%;
  background-position: 0 0, 0% 50%;
  box-shadow: 0 0 26px rgba(201, 162, 75, .10), 0 14px 40px rgba(0, 0, 0, .5);
}
/* The lit interior. Product photography is white-ground; the well honours
   it instead of tinting it, and becomes the light source of the card. */
[data-theme="noor"] .product-card__media,
[data-theme="noor"] .category-card__media,
[data-theme="noor"] .product-card__media picture,
[data-theme="noor"] .product-card__img,
[data-theme="noor"] .category-card__img { background: #FFFFFF; }
[data-theme="noor"] .category-card__media { background: #FFFFFF; }

@media (hover: hover) {
  html[data-theme="noor"] .product-card:hover,
  html[data-theme="noor"] .category-card:hover {
    --lux-border: linear-gradient(135deg,
        #FFF3C4 0%, #D9B45C 26%, #B8860B 46%, #FFF8DC 60%, #D9B45C 80%, #F4E5B4 100%);
    animation: lux-ring-flow 2400ms ease-in-out infinite alternate;
    box-shadow: 0 0 44px rgba(201, 162, 75, .22), 0 18px 48px rgba(0, 0, 0, .55);
  }
}
/* The glance — the thumb's hover — reuses Luxe's machinery wholesale. */
html[data-theme="noor"] .product-card.lux-glance,
html[data-theme="noor"] .category-card.lux-glance {
  --lux-border: linear-gradient(135deg,
      #FFF3C4 0%, #D9B45C 26%, #B8860B 46%, #FFF8DC 60%, #D9B45C 80%, #F4E5B4 100%);
  animation: lux-ring-glint 1150ms var(--ease-out);
  box-shadow: 0 0 44px rgba(201, 162, 75, .22), 0 18px 48px rgba(0, 0, 0, .55);
}

/* ---- Actions -------------------------------------------------------------
   Flat logo cyan, the standing rule of the house — and nowhere does it burn
   brighter than on night water. The hover glow is cyan, not gold: an action
   speaks in the brand's voice, the theme keeps its jewellery to itself. */
[data-theme="noor"] .btn-primary-gr,
[data-theme="noor"] .btn-gradient-gr {
  background: var(--gr-cyan);
  border-color: transparent;
  color: #04222b;
}
@media (hover: hover) {
  [data-theme="noor"] .btn-primary-gr:hover,
  [data-theme="noor"] .btn-gradient-gr:hover {
    background: #3FC3E0;
    color: #04222b;
    box-shadow: 0 0 30px rgba(27, 180, 212, .45);
  }
}
[data-theme="noor"] .btn-outline-gr,
[data-theme="noor"] .btn-ghost-gr { color: var(--text-primary); }
[data-theme="noor"] .btn-outline-gr { border-color: rgba(232, 207, 142, .5); }

/* ---- Merchandise ---------------------------------------------------------
   Prices are the brightest gold on the page: on this canvas the number IS
   the lamp. Stars burn gold; the sale badge keeps Luxe's claret under
   brighter type; the premium badge is struck metal on the dark. */
[data-theme="noor"] .product-card__price,
[data-theme="noor"] .bundle__total,
[data-theme="noor"] .summary-row--total,
[data-theme="noor"] .pdp-price__now { color: var(--gold-ink); }
[data-theme="noor"] .product-card__stars svg,
[data-theme="noor"] .rating-stars svg,
[data-theme="noor"] .testi-stars { color: #E4CE92; }
[data-theme="noor"] .badge-sale {
  background: linear-gradient(160deg, #8E2A38, #641B26);
  color: #FFE9B8;
  border: 1px solid rgba(232, 207, 142, .6);
}
[data-theme="noor"] .price-saving { color: var(--gold-ink); }
[data-theme="noor"] .badge-premium {
  background: linear-gradient(170deg, #FFF3C4 0%, #E4CE92 34%, #C9A24B 72%, #B8860B 100%);
  border: 1px solid #8A6D22;
  color: #3A2C0C;
}
[data-theme="noor"] .size-chip,
[data-theme="noor"] .variant-opt {
  background: var(--surface-sunken);
  border-color: rgba(232, 207, 142, .35);
  color: var(--text-secondary);
}
[data-theme="noor"] .size-chip.is-on,
[data-theme="noor"] .variant-opt.is-selected {
  background: linear-gradient(170deg, #FFF3C4 0%, #E4CE92 30%, #C9A24B 68%, #B8860B 100%);
  border-color: #8A6D22;
  color: #3A2C0C;
  box-shadow: 0 0 16px rgba(201, 162, 75, .3);
}
[data-theme="noor"] .variant-opt .variant-opt__price { color: inherit; opacity: .85; }
[data-theme="noor"] .trust-band svg { color: var(--gold-ink); }

/* ---- The dawn panel ------------------------------------------------------
   Luxe's page closes at night; Noor's closes at DAWN. The newsletter band
   inverts into the one bright room on the page — ivory, dark script, gold
   thresholds — because on a dark page, brightness is now the emphasis.
   Symmetry is the argument: each theme keeps exactly one room of the
   opposite hour. The !importants answer the inline colours in the markup,
   as both siblings do. */
[data-theme="noor"] .newsletter-band {
  background:
    radial-gradient(90% 130% at 50% -20%, rgba(201, 162, 75, .18), transparent 55%),
    linear-gradient(180deg, #F7F0DC 0%, #EFE3C4 100%);
  border-top: 1px solid var(--lux-gold, #C9A24B);
  border-bottom: 1px solid var(--lux-gold, #C9A24B);
  border-radius: 0;
}
[data-theme="noor"] .newsletter-band .overline { color: #6E5713 !important; } /* 5.4:1 on the band's darker stop */
[data-theme="noor"] .newsletter-band h2 {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 700;
  color: #2F2A1C !important;
}
[data-theme="noor"] .newsletter-band p:not(.overline) { color: #5C5334 !important; }
/* Subscribe sits on the ink pill whose label is --text-inverse — which this
   theme flips DARK. Dark-on-dark on the bright panel: the audit's catch. */
[data-theme="noor"] .newsletter-band .btn-gr { color: #F2EAD8; }
/* And the night's gold selection would vanish in the bright room. */
[data-theme="noor"] .newsletter-band ::selection { background: rgba(58,44,12,.9); color: #FFF8E6; }

/* ---- Small rooms ---------------------------------------------------------
   The seal and the stepper read correctly on dark already (they are gold);
   the stepper's idle medallion just needs its ivory swapped for the case
   colour. The testimonial quote mark brightens to be seen. */
[data-theme="noor"] .step__num {
  font-family: 'Cinzel', Georgia, serif;
  background: var(--surface-raised);
  border: 1px solid rgba(232, 207, 142, .5);
  color: var(--gold-ink);
}
[data-theme="noor"] .step.is-active .step__num {
  background: linear-gradient(170deg, #FFF3C4, #C9A24B 70%);
  border-color: transparent;
  color: #2F2A1C;
}
[data-theme="noor"] .step.is-done .step__num {
  background: var(--surface-sunken);
  border-color: rgba(232, 207, 142, .4);
  color: var(--gold-ink);
}
[data-theme="noor"] .testi-card__inner::before {
  content: "\201C";
  position: absolute;
  top: -0.18em; left: -0.05em;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 5.5rem;
  line-height: 1;
  color: rgba(232, 207, 142, .35);
  pointer-events: none;
}
[data-theme="noor"] .testi-card__inner { position: relative; }

/* ---- The cinema screen ---------------------------------------------------
   The hero banners are bright, saturated artwork. On the day themes they
   compete with a bright page; at night they become the cinema screen — the
   brightest thing in the room, framed in a gold hairline, throwing light. */
[data-theme="noor"] .hero {
  border-bottom: 1px solid rgba(232, 207, 142, .35);
  box-shadow: 0 18px 70px rgba(201, 162, 75, .12), 0 30px 90px rgba(0, 0, 0, .6);
}

/* ---- The night's thread --------------------------------------------------
   Luxe draws a scroll-progress hairline; night earns a brighter one. Pure
   CSS scroll-driven animation; where unsupported it simply never appears —
   it is decoration and carries nothing. */
@supports (animation-timeline: scroll()) {
  [data-theme="noor"] body::after {
    content: "";
    position: fixed; top: 0; left: 0; right: 0;
    height: 2px;
    z-index: calc(var(--z-header) + 1);
    pointer-events: none;
    transform-origin: 0 50%;
    background: linear-gradient(90deg, #B8860B, #FFF3C4 55%, #C9A24B);
    box-shadow: 0 0 12px rgba(232, 207, 142, .5);
    animation: lux-progress linear;
    animation-timeline: scroll();
  }
}

/* ---- The hand of the house ------------------------------------------------
   Small places most sites forget, where a dark theme either finishes or
   falls apart: what selecting text looks like, where keyboard focus lands,
   what the scrollbar wears. */
[data-theme="noor"] ::selection { background: rgba(201, 162, 75, .45); color: #FFF8E6; }
/* Two rings, because focus can land on the night OR inside a white vitrine:
   the dark inner ring reads on the photo wells (18:1), the gold outer ring
   reads on the water (11.6:1). One ring alone fails one of the two. */
[data-theme="noor"] :focus-visible {
  outline: 2px solid #04191F;
  outline-offset: 0;
  box-shadow: 0 0 0 4px #E4CE92;
}
[data-theme="noor"] { scrollbar-color: #8A6D22 #071F26; }
[data-theme="noor"]::-webkit-scrollbar { width: 10px; }
[data-theme="noor"]::-webkit-scrollbar-track { background: #071F26; }
[data-theme="noor"]::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #C9A24B, #8A6D22);
  border-radius: 5px;
  border: 2px solid #071F26;
}

/* =========================================================================
   THE NIGHT AUDIT — 50 findings from a six-agent sweep of every stylesheet,
   each one a place the dark would have forgotten. Grouped by room.
   ========================================================================= */

/* -- Chrome ------------------------------------------------------------- */
[data-theme="noor"] .site-header.is-scrolled { box-shadow: 0 8px 28px rgba(0, 0, 0, .45); }
[data-theme="noor"] .mega-menu,
[data-theme="noor"] .search-suggest { box-shadow: 0 0 26px rgba(201,162,75,.08), 0 18px 48px rgba(0,0,0,.55); }
[data-theme="noor"] .search-suggest__item img { background: #FFFFFF; }
[data-theme="noor"] .header-search__field:focus-within {
  border-color: var(--link);
  box-shadow: 0 0 0 3px rgba(79, 201, 228, .28);
}
[data-theme="noor"] .gr-offcanvas { box-shadow: 24px 0 60px -20px rgba(0, 0, 0, .75); }
[data-theme="noor"] .gr-offcanvas::before {
  background: linear-gradient(180deg, rgba(232,207,142,.07), rgba(201,162,75,.03) 42%, transparent);
}
[data-theme="noor"] .tabbar__badge { color: var(--text-on-accent); }
[data-theme="noor"] .tabbar__item:active { color: var(--link); }

/* -- Overlays & feedback ------------------------------------------------- */
[data-theme="noor"] .toast-gr { box-shadow: 0 14px 40px rgba(0,0,0,.55), 0 0 22px rgba(201,162,75,.10); }
[data-theme="noor"] .gr-modal .modal-content { box-shadow: 0 18px 48px rgba(0,0,0,.6), 0 0 26px rgba(201,162,75,.08); }
/* The skeleton swept a near-opaque WHITE bar across the night every 1.4s —
   the one strobe light in the theatre. It sweeps in lamplight now. */
[data-theme="noor"] .skeleton::after {
  background: linear-gradient(90deg, transparent, var(--wash-shimmer), transparent);
}
[data-theme="noor"] .input-gr:focus,
[data-theme="noor"] .select-gr:focus,
[data-theme="noor"] .textarea-gr:focus {
  border-color: var(--link);
  box-shadow: 0 0 0 3px rgba(79, 201, 228, .28);
}
[data-theme="noor"] .field-gr.is-invalid .input-gr,
[data-theme="noor"] .field-gr.is-invalid .select-gr,
[data-theme="noor"] .field-gr.is-invalid .textarea-gr { box-shadow: 0 0 0 3px rgba(229, 72, 77, .3); }
/* The select's caret is a data-URI frozen with the LIGHT theme's grey. */
[data-theme="noor"] .select-gr {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A29C86' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* -- Cards & merchandise ------------------------------------------------- */
/* Ivory icons over a white photo well were 1.1:1 — the wishlist and quick
   view buttons float ON the vitrine glass, so they keep daylight ink. */
[data-theme="noor"] .product-card__actions .btn-icon-gr { color: #101314; background: rgba(255,255,255,.8); }
@media (hover: hover) {
  [data-theme="noor"] .product-card__actions .btn-icon-gr:hover { color: #0E7C99; background: rgba(255,255,255,.95); }
}
[data-theme="noor"] .badge-new { background: rgba(4,25,31,.85); color: #7FDCF0; border-color: rgba(79,201,228,.45); }
[data-theme="noor"] .badge-origin { background: rgba(4,25,31,.8); color: #CFC5AB; border-color: rgba(207,197,171,.3); }
html[data-theme="noor"] .home-cat-grid .category-card__media { background: #FFFFFF; }
[data-theme="noor"] .category-card__media .category-card__icon { color: #0E7C99; }
/* The near-vertical chip gradient ends at #B8860B, where the old umber sank
   to 4.18:1 — darkened to hold 4.5 on the gradient's WORST band, not its
   average. */
[data-theme="noor"] .badge-premium,
[data-theme="noor"] .size-chip.is-on,
[data-theme="noor"] .variant-opt.is-selected { color: #241A05; }
html[data-theme="noor"] .variant-opt.is-selected .variant-opt__price { color: inherit; }
[data-theme="noor"] .text-gradient { background-image: linear-gradient(135deg, #4FC9E4 0%, #B9E36B 100%); }

/* -- The money pages ------------------------------------------------------ */
[data-theme="noor"] .express-sheet__scrim { background: var(--scrim); }
[data-theme="noor"] .express-sheet__panel {
  background: var(--surface-raised);
  border: 1px solid var(--border-hairline);
  box-shadow: 0 -18px 60px rgba(0, 0, 0, .6);
}
[data-theme="noor"] .express-bar { box-shadow: 0 -6px 24px rgba(0, 0, 0, .6); }
[data-theme="noor"] .buybar,
[data-theme="noor"] .pdp-buybar { box-shadow: 0 -2px 16px rgba(0, 0, 0, .55); }
[data-theme="noor"] .option-card.is-selected { background: rgba(79, 201, 228, .10); border-color: var(--link); }
@media (hover: hover) {
  [data-theme="noor"] .option-card:hover { border-color: var(--link); }
}
[data-theme="noor"] .delivery-resolved { border-left-color: var(--accent-ink); }
[data-theme="noor"] .bundle,
[data-theme="noor"] .bundle__item { border-color: var(--border-hairline); }
[data-theme="noor"] .bundle__tag { color: var(--accent-ink); }

/* -- Bands & stories ------------------------------------------------------ */
/* Both hero-image bands wash their art with near-white — noon glued onto
   the night. The same art under a deep-water wash instead. */
[data-theme="noor"] .industry-band {
  background: linear-gradient(90deg, rgba(4,25,31,.96), rgba(4,25,31,.84)),
              url("../../assets/images/hero/hero-industrial.svg") center/cover;
}
[data-theme="noor"] .about-hero {
  background: linear-gradient(90deg, rgba(4,25,31,.96), rgba(4,25,31,.84)),
              url("../../assets/images/hero/hero-food.svg") center/cover;
}
[data-theme="noor"] .industry-band .surface-gr { border-color: rgba(232,207,142,.35); }
[data-theme="noor"] .fact { border-color: var(--border-hairline); }
[data-theme="noor"] .hero__dot::after { box-shadow: 0 0 0 1px rgba(232,207,142,.5); }

/* -- Account -------------------------------------------------------------- */
html[data-theme="noor"] a.stat-card:hover {
  border-color: transparent;
  box-shadow: 0 0 44px rgba(201,162,75,.22), 0 18px 48px rgba(0,0,0,.55);
}
[data-theme="noor"] .address-card.is-default { border-color: var(--accent-ink); }

/* =========================================================================
   NOOR ²⁰ — the night, deepened. Every addition still obeys the three
   words: night, water, light. And every one of them dies under reduced
   motion, because a dream you cannot switch off is a nuisance.
   ========================================================================= */

/* ---- The constellation --------------------------------------------------
   Faint stars joined by hairlines, high in the water — the fourth layer of
   the lagoon wash, so it costs no new element. Visible only if looked for,
   which is the correct brightness for a constellation. */
[data-theme="noor"] body::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='520' viewBox='0 0 900 520'%3E%3Cg fill='none' stroke='%23E8CF8E' stroke-opacity='.16'%3E%3Cpath d='M120 90 L235 60 L330 130 L470 95'/%3E%3Cpath d='M620 70 L710 150 L830 120'/%3E%3C/g%3E%3Cg fill='%23E8CF8E'%3E%3Ccircle cx='120' cy='90' r='2.1' fill-opacity='.5'/%3E%3Ccircle cx='235' cy='60' r='1.5' fill-opacity='.42'/%3E%3Ccircle cx='330' cy='130' r='2.4' fill-opacity='.55'/%3E%3Ccircle cx='470' cy='95' r='1.6' fill-opacity='.4'/%3E%3Ccircle cx='620' cy='70' r='2' fill-opacity='.5'/%3E%3Ccircle cx='710' cy='150' r='1.4' fill-opacity='.38'/%3E%3Ccircle cx='830' cy='120' r='2.2' fill-opacity='.5'/%3E%3C/g%3E%3C/svg%3E")
      top center / 900px 520px no-repeat,
    radial-gradient(52% 40% at 78% 8%,  rgba(27, 180, 212, .10), transparent 60%),
    radial-gradient(44% 38% at 15% 90%, rgba(201, 162, 75, .10), transparent 62%),
    radial-gradient(60% 50% at 40% 45%, rgba(14, 124, 153, .05), transparent 65%);
}

/* ---- The shooting ember --------------------------------------------------
   Every half minute or so, one gold streak falls across the upper sky and
   is gone in under a second. Rare is what makes it precious — a constant
   meteor shower is weather, a single ember is luck. The element is placed
   by theme.js ([data-noor-fx]); each pass lands at a different height via
   --ember-y, re-rolled on every animation iteration. */
[data-theme="noor"] .noor-ember {
  position: fixed;
  top: var(--ember-y, 12vh);
  left: -12vw;
  width: 120px; height: 2px;
  z-index: 3;
  pointer-events: none;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(232,207,142,.05) 30%, #FFF3C4 85%, #FFF8DC 100%);
  box-shadow: 0 0 12px rgba(232, 207, 142, .5);
  transform: rotate(9deg);
  opacity: 0;
  animation: noor-ember 27s linear infinite;
}
/* The drop is 19vw, not 14vw, because the streak is drawn at 9deg and
   tan(9deg) x 120vw = 19vw. At 14vw it fell at 6.65deg while pointing at
   9deg — a 2.35deg disagreement between where the ember aims and where it
   goes. Small, but it is the same fault the sky's meteors had, and a streak
   that does not point along its own velocity is the one thing the eye
   reliably reads as fake. Both legs stay in vw so the angle survives any
   window shape. */
@keyframes noor-ember {
  0%    { transform: translate3d(0, 0, 0) rotate(9deg); opacity: 0; }
  1%    { opacity: .9; }
  3.2%  { transform: translate3d(120vw, 19vw, 0) rotate(9deg); opacity: 0; }
  100%  { transform: translate3d(120vw, 19vw, 0) rotate(9deg); opacity: 0; }
}

/* ---- The hand-carried lantern --------------------------------------------
   Desktop only: a soft pool of gold light follows the pointer, lagging the
   way lamplight lags a hand. mix-blend screen, transform only, and the
   JavaScript behind it sleeps whenever the light has caught up — the night
   answers the visitor, it does not chase them. */
[data-theme="noor"] .noor-lantern {
  position: fixed;
  top: -170px; left: -170px;
  width: 340px; height: 340px;
  z-index: 2;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(232, 207, 142, .085) 0%, rgba(201, 162, 75, .05) 38%, transparent 70%);
  mix-blend-mode: screen;
  will-change: transform;
}

/* ---- Windows light as you pass -------------------------------------------
   The glance (theme.js) now marks arriving cards on EVERY pointer under
   Noor — on a dark street the windows light when you walk by, whether you
   walk with a thumb or a mouse. The mark already sweeps the ring; here it
   also blooms the vitrine glass from dim to lit, once, on arrival. */
html[data-theme="noor"] .product-card.lux-glance .product-card__media,
html[data-theme="noor"] .category-card.lux-glance .category-card__media {
  animation: noor-lightup 950ms var(--ease-out);
}
@keyframes noor-lightup {
  from { filter: brightness(.5) saturate(.8); }
  55%  { filter: brightness(1.07) saturate(1.02); }
  to   { filter: brightness(1); }
}

/* ---- The ignition ---------------------------------------------------------
   When a section arrives, its gilded tail catches light once — a flare that
   travels the word and settles — instead of merely existing. Rides the
   reveal system's own .is-visible, which is guaranteed to land. */
[data-theme="noor"] .lux-gilt { background-size: 220% 100%; }
[data-theme="noor"] [data-reveal].is-visible .lux-gilt {
  animation: noor-ignite 1200ms var(--ease-out);
}
@keyframes noor-ignite {
  from { background-position: 120% 50%; }
  to   { background-position: 0% 50%; }
}

/* ---- Small lanterns -------------------------------------------------------
   The carousel's active dot and the tab bar's active tab burn instead of
   merely differing. */
[data-theme="noor"] .hero__dot.is-active {
  animation: noor-dot-burn 4s ease-in-out infinite alternate;
}
@keyframes noor-dot-burn {
  from { box-shadow: 0 0 6px 1px rgba(232, 207, 142, .35); }
  to   { box-shadow: 0 0 14px 3px rgba(232, 207, 142, .6); }
}
[data-theme="noor"] .tabbar__item { position: relative; }
[data-theme="noor"] .tabbar__item.is-active { color: var(--gold-ink); }
[data-theme="noor"] .tabbar__item.is-active::after {
  content: "";
  position: absolute;
  bottom: 3px; left: 50%;
  width: 4px; height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: #FFF3C4;
  animation: noor-dot-burn 3s ease-in-out infinite alternate;
}

/* ---- The price, catching light --------------------------------------------
   On the product page only — one price, one slow glint crossing it forever,
   the way a shop light plays on an engraved tag. The grid prices stay
   still: forty glints is a fairground. Ends of the ramp match, so the loop
   has no seam. */
[data-theme="noor"] .pdp-price__now {
  background: linear-gradient(100deg,
    #E4CE92 0%, #C9A24B 30%, #FFF3C4 50%, #C9A24B 70%, #E4CE92 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: noor-price-glint 8s linear infinite;
}
@keyframes noor-price-glint {
  from { background-position: 0% 50%; }
  to   { background-position: -300% 50%; }
}

/* ---- Fireflies from the button --------------------------------------------
   The add-to-cart burst was gold dust; at night each spark carries a halo. */
[data-theme="noor"] .lux-burst {
  background: radial-gradient(circle at 35% 30%, #FFF8DC, #E4CE92 55%, rgba(201,162,75,0) 100%);
  box-shadow: 0 0 10px 3px rgba(232, 207, 142, .7);
}

/* ---- The stars over the spoken word --------------------------------------- */
[data-theme="noor"] .testi-stars {
  color: #E4CE92;
  text-shadow: 0 0 10px rgba(232, 207, 142, .4);
  animation: noor-twinkle 5.5s ease-in-out infinite alternate;
}
@keyframes noor-twinkle {
  from { opacity: .72; }
  to   { opacity: 1; }
}

/* ---- The sunbeam in the dawn room ------------------------------------------
   The one bright chamber gets the one daylight move: a slow shaft of light
   crossing the ivory, the way sun crosses a floor. */
[data-theme="noor"] .newsletter-band { position: relative; overflow: hidden; }
[data-theme="noor"] .newsletter-band > * { position: relative; z-index: 1; }
[data-theme="noor"] .newsletter-band::after {
  content: "";
  position: absolute;
  top: -40%; bottom: -40%;
  left: 0;
  width: 26%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 248, 220, .5) 50%, transparent);
  transform: translateX(-140%) rotate(6deg);
  animation: noor-sunbeam 16s ease-in-out infinite;
}
@keyframes noor-sunbeam {
  0%   { transform: translateX(-160%) rotate(6deg); }
  55%  { transform: translateX(560%) rotate(6deg); }
  100% { transform: translateX(560%) rotate(6deg); }
}

/* ---- The shore -------------------------------------------------------------
   The page ends at the waterline: a thin gold shimmer running along the top
   of the footer, light lapping the shore. */
[data-theme="noor"] footer { position: relative; }
[data-theme="noor"] footer::before {
  content: "";
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(201,162,75,.05), #C9A24B 25%, rgba(232,207,142,.9) 50%, #C9A24B 75%, rgba(201,162,75,.05));
  background-size: 200% 100%;
  animation: noor-waterline 9s ease-in-out infinite alternate;
}
@keyframes noor-waterline {
  from { background-position: 0% 50%; opacity: .55; }
  to   { background-position: 100% 50%; opacity: 1; }
}

/* =========================================================================
   THE DREAM EDIT
   =========================================================================
   The merchant judged the first night five percent of a dream, and the
   missing ninety-five was never more particles. Set beside the reference,
   the difference is COMPOSITION: enormous space, colossal type, slowness,
   texture, an opening. A dense dark page is a basement; a generous dark
   page is a theatre. Everything below spends space and time — the two
   currencies that read as expensive — and none of it touches a word of
   content or any theme but this one.
   ========================================================================= */

/* ---- Space ----------------------------------------------------------------
   The night once claimed vast rooms — 7.5rem top and bottom, which is 240px
   of nothing between every pair of sections on a desktop screen. Judged
   against the real page it was not a theatre, it was a wait: the category
   tiles left the screen and the Premium Picks eyebrow had not arrived yet.
   The day themes were cut to a 64px gap and Noor was never cut with them.

   Cut by four fifths, as asked: 48px between sections at desktop, 32px at
   tablet, phones on the base rhythm. Noor now sits a little TIGHTER than the
   day themes on purpose — its headings are poster-sized, so the type itself
   supplies the air that the padding used to buy. On the 8px grid, since
   5.5/7.5rem never was. */
@media (min-width: 768px)  { html[data-theme="noor"] .section-gr { padding-block: var(--space-4); } }
@media (min-width: 1024px) { html[data-theme="noor"] .section-gr { padding-block: var(--space-5); } }
html[data-theme="noor"] .home-cat-grid { gap: 18px; }
html[data-theme="noor"] .snap-rail { gap: 1.5rem; }

/* ---- Scale ----------------------------------------------------------------
   Section titles rise toward poster size and shed weight as they grow —
   Cinzel at 600 spreads like an inscription where 700 shouts. The overline
   above whispers wider than ever. */
html[data-theme="noor"] .section-head__titles > h2,
html[data-theme="noor"] .section-head__titles > h1 {
  font-size: clamp(2.2rem, 4.4vw, 3.8rem);
  font-weight: 600;
  letter-spacing: .035em;
  line-height: 1.08;
}
html[data-theme="noor"] .section-head .overline {
  font-size: .78rem;
  letter-spacing: .34em;
}

/* ---- Slowness -------------------------------------------------------------
   A dream is slow. Reveals take nearly twice the day's duration, rise from
   deeper, and the stagger between siblings stretches — a tide arriving,
   not a list loading. The delay is the authored one, scaled, so the JS
   that writes it never has to know. */
html[data-theme="noor"] [data-reveal] {
  transform: translateY(26px) scale(.985);
  transition-duration: 1150ms;
  transition-delay: calc(var(--reveal-delay, 0ms) * 1.8);
}

/* ---- Velvet ---------------------------------------------------------------
   Flat digital black is a screen; black with grain is fabric. A warm
   turbulence noise rides the lagoon element as its topmost layer, three
   percent strong — felt, not seen. */
[data-theme="noor"] body::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 0.93 0 0 0 0 0.75 0 0 0 0.03 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E") repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='520' viewBox='0 0 900 520'%3E%3Cg fill='none' stroke='%23E8CF8E' stroke-opacity='.16'%3E%3Cpath d='M120 90 L235 60 L330 130 L470 95'/%3E%3Cpath d='M620 70 L710 150 L830 120'/%3E%3C/g%3E%3Cg fill='%23E8CF8E'%3E%3Ccircle cx='120' cy='90' r='2.1' fill-opacity='.5'/%3E%3Ccircle cx='235' cy='60' r='1.5' fill-opacity='.42'/%3E%3Ccircle cx='330' cy='130' r='2.4' fill-opacity='.55'/%3E%3Ccircle cx='470' cy='95' r='1.6' fill-opacity='.4'/%3E%3Ccircle cx='620' cy='70' r='2' fill-opacity='.5'/%3E%3Ccircle cx='710' cy='150' r='1.4' fill-opacity='.38'/%3E%3Ccircle cx='830' cy='120' r='2.2' fill-opacity='.5'/%3E%3C/g%3E%3C/svg%3E")
      top center / 900px 520px no-repeat,
    radial-gradient(52% 40% at 78% 8%,  rgba(27, 180, 212, .10), transparent 60%),
    radial-gradient(44% 38% at 15% 90%, rgba(201, 162, 75, .10), transparent 62%),
    radial-gradient(60% 50% at 40% 45%, rgba(14, 124, 153, .05), transparent 65%);
}

/* ---- The cinema vignette --------------------------------------------------
   The viewport's edges fall softly into dark, the way a lens and a
   projection room both do — every screenful becomes a framed frame.
   Injected by theme.js ([data-noor-fx]); above the page, below the chrome,
   deaf to the pointer. */
[data-theme="noor"] .noor-vignette {
  position: fixed;
  inset: -2px;
  z-index: 6;
  pointer-events: none;
  background: radial-gradient(115% 88% at 50% 44%, transparent 58%, rgba(2, 10, 14, .40) 100%);
}

/* ---- The painting ---------------------------------------------------------
   The hero was a strip glued edge to edge — an ad. At night it hangs: a
   framed painting floating in the dark, gold hairline, deep glow, space
   around it. Desktop only; a phone IS the frame. */
@media (min-width: 992px) {
  html[data-theme="noor"] .hero {
    max-width: min(1380px, 94vw);
    margin: 2.4rem auto 0;
    border-radius: 26px;
    overflow: hidden;
    border: 1px solid rgba(232, 207, 142, .38);
    box-shadow:
      0 0 0 1px rgba(4, 25, 31, .8),
      0 30px 90px rgba(0, 0, 0, .65),
      0 10px 50px rgba(201, 162, 75, .14);
  }
}

/* ---- The ornament ----------------------------------------------------------
   A single small diamond closes every overline — the engraver's mark that
   says a hand was here. */
html[data-theme="noor"] .section-head .overline::after {
  content: "\25C6";
  display: inline-block;
  margin-left: .9em;
  font-size: .55em;
  color: rgba(232, 207, 142, .75);
  transform: translateY(-.15em);
}

/* ---- The overture ----------------------------------------------------------
   Once per visit the shop opens from black: নূর appears in gold and
   dissolves — light, appearing. Pure CSS once placed: even if every script
   dies mid-curtain, the animation completes and pointer-events:none means
   it could never catch a tap. theme.js places it only on the first page of
   a session, never under reduced motion. */
[data-theme="noor"] .noor-curtain {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: grid;
  place-items: center;
  background: #04191F;
  pointer-events: none;
  animation: noor-curtain 1500ms ease forwards;
}
[data-theme="noor"] .noor-curtain span {
  font-family: 'Noto Sans Bengali', 'Cinzel', serif;
  font-size: clamp(3rem, 9vw, 5.5rem);
  font-weight: 700;
  color: #E4CE92;
  text-shadow: 0 0 40px rgba(201, 162, 75, .55), 0 0 90px rgba(201, 162, 75, .3);
  animation: noor-curtain-glyph 1500ms ease forwards;
}
@keyframes noor-curtain { 0% { opacity: 1; } 45% { opacity: 1; } 100% { opacity: 0; } }
@keyframes noor-curtain-glyph {
  0%   { opacity: 0; transform: scale(.94); }
  30%  { opacity: 1; transform: scale(1); }
  55%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.03); }
}

/* =========================================================================
   THE FIFTY — the whole menu, built. Numbers refer to the concept list the
   merchant approved with one word: "all". Ideas a theme must not do were
   excluded or adapted, and say so where they stand.
   ========================================================================= */

/* -- 1 · Moonpath: a soft shaft of moonlight down the page's spine. ------- */
[data-theme="noor"] .noor-vignette::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 44%, rgba(207, 231, 238, .028) 50%, transparent 56%);
}

/* -- 3 · Aurora breath: once a minute a slow wave crosses the high water. - */
[data-theme="noor"] .noor-vignette::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 34vh;
  background: linear-gradient(100deg,
    transparent 20%, rgba(27, 180, 212, .05) 40%, rgba(201, 162, 75, .05) 60%, transparent 80%);
  background-size: 300% 100%;
  opacity: 0;
  animation: noor-aurora 58s ease-in-out infinite;
}
@keyframes noor-aurora {
  0%, 76%, 100% { opacity: 0; background-position: 120% 0; }
  82%           { opacity: 1; }
  94%           { opacity: 0; background-position: -60% 0; }
}

/* -- 5 · The plumb: the scroll thread's tip burns hottest. ---------------- */
@supports (animation-timeline: scroll()) {
  [data-theme="noor"] body::after {
    background: linear-gradient(90deg, #6E5313, #C9A24B 82%, #FFF3C4 97%, #FFFFFF 100%);
  }
}

/* -- 7 · The illuminated initial: each section title opens like a folio. -- */
html[data-theme="noor"] .section-head__titles > h2::first-letter,
html[data-theme="noor"] .section-head__titles > h1::first-letter {
  font-size: 1.32em;
  color: #E4CE92;
  text-shadow: 0 0 22px rgba(201, 162, 75, .5);
}

/* -- 9 (adapted) · Letterpress arrival: headings settle from soft focus. -- */
html[data-theme="noor"] .section-head__titles > h2,
html[data-theme="noor"] .section-head__titles > h1 {
  transition: filter 900ms var(--ease-out), letter-spacing 900ms var(--ease-out);
}
html[data-theme="noor"] [data-reveal]:not(.is-visible) .section-head__titles > h2,
html[data-theme="noor"] .section-head[data-reveal]:not(.is-visible) h2 {
  filter: blur(3px);
  letter-spacing: .09em;
}

/* -- 10 · Gold-leaf rim: a hair of light along the letters' crowns. ------- */
[data-theme="noor"] .lux-gilt {
  text-shadow:
    0 -1px 0 rgba(255, 248, 220, .25),
    0 0 18px rgba(201, 162, 75, .45),
    0 0 3px rgba(232, 207, 142, .3);
}

/* -- 12 · Numerals as engravings: prices set in the display face. --------- */
[data-theme="noor"] .product-card__price,
[data-theme="noor"] .pdp-price__now,
[data-theme="noor"] .summary-row--total .tabular,
[data-theme="noor"] .express-total__grand dd {
  font-family: 'Cinzel', Georgia, serif;
  letter-spacing: .02em;
}

/* -- 13 · Passe-partout: an ivory mat between photograph and gold ring. --- */
html[data-theme="noor"] .product-card__media,
html[data-theme="noor"] .home-cat-grid .category-card__media {
  border: 6px solid #F3ECD7;
  border-radius: 6px;
}

/* -- 14 · The museum plaque: name and price on brushed brass-dark. -------- */
html[data-theme="noor"] .product-card__body {
  background: linear-gradient(180deg, rgba(232, 207, 142, .05), rgba(4, 25, 31, 0) 45%);
  border-top: 1px solid rgba(232, 207, 142, .22);
}
[data-theme="noor"] .product-card__title { letter-spacing: .01em; }

/* -- 15 · Window glare: a diagonal breath of glass on each vitrine. ------- */
[data-theme="noor"] .product-card__media::after,
[data-theme="noor"] .category-card__media::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.20) 50%, transparent 58%);
  background-size: 260% 100%;
  background-position: 88% 0;
}
@supports (animation-timeline: view()) {
  [data-theme="noor"] .product-card__media::after,
  [data-theme="noor"] .category-card__media::after {
    animation: noor-glare linear both;
    animation-timeline: view();
  }
  @keyframes noor-glare { from { background-position: 110% 0; } to { background-position: -10% 0; } }
}

/* -- 16 · The velvet plinth: each product stands on unseen cloth. --------- */
[data-theme="noor"] .product-card__media::before {
  content: "";
  position: absolute; left: 12%; right: 12%; bottom: 4%;
  height: 10%;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(50% 100% at 50% 100%, rgba(58, 44, 12, .18), transparent 70%);
}

/* -- 17 · Shutter arrival for the tiles (cards keep their bloom). --------- */
html[data-theme="noor"] .category-card.lux-glance .category-card__media {
  animation: noor-shutter 800ms var(--ease-out);
}
@keyframes noor-shutter {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* -- 18 · The centerpiece: the first Premium Pick under its own light. ---- */
@media (min-width: 992px) {
  html[data-theme="noor"] [data-rail="premium"] .product-card:first-child {
    transform: rotate(-.5deg) scale(1.02);
    box-shadow: 0 0 60px rgba(201, 162, 75, .22), 0 22px 60px rgba(0, 0, 0, .6);
  }
}

/* -- 19 · Roman numbering on the Best Sellers: Ⅰ, Ⅱ, Ⅲ … ------------------ */
html[data-theme="noor"] [data-grid="bestseller"] { counter-reset: bestseller; }
html[data-theme="noor"] [data-grid="bestseller"] .product-card { counter-increment: bestseller; }
html[data-theme="noor"] [data-grid="bestseller"] .product-card::before {
  content: counter(bestseller, upper-roman);
  position: absolute; top: 10px; right: 12px;
  z-index: 3;
  font-family: 'Cinzel', Georgia, serif;
  font-size: .8rem;
  color: #8A6D22;
  background: rgba(246, 240, 220, .85);
  padding: 2px 7px;
  border-radius: 10px;
  border: 1px solid rgba(138, 109, 34, .4);
  pointer-events: none;
}

/* -- 20 (adapted) · Sold-out veil: smoked glass, no invented words. ------- */
html[data-theme="noor"] .product-card:has([data-action="add-to-cart"]:disabled) .product-card__media {
  filter: grayscale(.7) brightness(.72);
}

/* -- 21 · The atelier: gallery framed like a lightbox table. -------------- */
[data-theme="noor"] .gallery {
  border: 1px solid rgba(232, 207, 142, .3);
  border-radius: 18px;
  padding: 10px;
  background: rgba(246, 240, 220, .04);
}
[data-theme="noor"] .gallery img { border-radius: 12px; }

/* -- 24 · Apothecary weights: the chips gain turned-brass depth. ---------- */
[data-theme="noor"] .size-chip.is-on,
[data-theme="noor"] .variant-opt.is-selected {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    inset 0 -2px 3px rgba(110, 83, 19, .45),
    0 2px 6px rgba(0, 0, 0, .5);
}

/* -- 25 (generic) · The provenance thread under the product's name. ------- */
[data-theme="noor"] [data-pdp-title]::after {
  content: "";
  display: block;
  width: 90px; height: 1px;
  margin-top: .55rem;
  background: linear-gradient(90deg, #C9A24B, rgba(201, 162, 75, .1));
  box-shadow: 90px 0 0 -0.5px rgba(232, 207, 142, .9);
}

/* -- 26 · The candle: a flame breathes inside the buy buttons on hover. --- */
@media (hover: hover) {
  [data-theme="noor"] .btn-primary-gr:hover,
  [data-theme="noor"] .btn-gradient-gr:hover {
    background-image: radial-gradient(60% 130% at 50% 115%, rgba(255, 243, 196, .35), transparent 60%);
    background-color: #3FC3E0;
  }
}

/* -- 27 · The telegram: confirmation typeset like a wire of good news. ---- */
[data-theme="noor"] .confirm-panel {
  border: 1px dashed rgba(201, 162, 75, .55);
  background:
    linear-gradient(180deg, rgba(232, 207, 142, .05), transparent 30%),
    var(--surface-raised);
}
[data-theme="noor"] .confirm-hero .overline { letter-spacing: .4em; }

/* -- 28 · The ledger: cart arithmetic ruled like a merchant's book. ------- */
[data-theme="noor"] .summary-row { border-bottom: 1px solid rgba(232, 207, 142, .12); }
[data-theme="noor"] .summary-row--total {
  border-top: 2px solid rgba(201, 162, 75, .6);
  font-family: 'Cinzel', Georgia, serif;
}

/* -- 30 · The running stitch: checkout's thread is embroidery now. -------- */
[data-theme="noor"] .step__line {
  background: none;
  border-top: 2px dashed rgba(201, 162, 75, .55);
  height: 0;
}

/* -- 31 · The signature: a flourish under the sworn total. ---------------- */
[data-theme="noor"] .express-sheet__panel::after {
  content: "";
  display: block;
  width: 120px; height: 14px;
  margin: 2px auto 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='14' viewBox='0 0 120 14'%3E%3Cpath d='M4 9 C 30 2, 44 13, 62 7 S 100 2, 116 8' fill='none' stroke='%23C9A24B' stroke-width='1.4' stroke-linecap='round' opacity='.8'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* -- 32 · Parcel lanterns: the tracking timeline lights stop by stop. ----- */
[data-theme="noor"] .timeline__dot {
  background: var(--surface-sunken);
  border: 1px solid rgba(232, 207, 142, .45);
  color: var(--gold-ink);
}
[data-theme="noor"] .timeline__step.is-done .timeline__dot {
  background: linear-gradient(170deg, #FFF3C4, #C9A24B 70%);
  color: #2F2A1C;
  box-shadow: 0 0 14px rgba(201, 162, 75, .5);
}
[data-theme="noor"] .timeline__step.is-current .timeline__dot {
  background: linear-gradient(180deg, #0A3641, #07242E);
  color: #FFF3C4;
  box-shadow: 0 0 18px rgba(232, 207, 142, .65);
  animation: noor-dot-burn 2.6s ease-in-out infinite alternate;
}

/* -- 33 · Marquee lanterns: the header's icons in fine gold rings. -------- */
@media (hover: hover) {
  [data-theme="noor"] .site-header .btn-icon-gr:hover {
    box-shadow: 0 0 0 1px rgba(232, 207, 142, .7), 0 0 16px rgba(201, 162, 75, .35);
  }
}

/* -- 34 · The antechamber: the drawer's contents arrive as guests do. ----- */
[data-theme="noor"] .cart-drawer { border-left: 1px solid rgba(232, 207, 142, .4); }
[data-theme="noor"] .cart-drawer-backdrop:not([hidden]) + .cart-drawer .cart-drawer__body > * {
  animation: noor-guest 640ms var(--ease-out) both;
}
[data-theme="noor"] .cart-drawer-backdrop:not([hidden]) + .cart-drawer .cart-drawer__body > :nth-child(2) { animation-delay: 90ms; }
[data-theme="noor"] .cart-drawer-backdrop:not([hidden]) + .cart-drawer .cart-drawer__body > :nth-child(3) { animation-delay: 180ms; }
[data-theme="noor"] .cart-drawer-backdrop:not([hidden]) + .cart-drawer .cart-drawer__body > :nth-child(4) { animation-delay: 270ms; }
@keyframes noor-guest {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: none; }
}

/* -- 35 · The iris: search opens like a lens. ----------------------------- */
[data-theme="noor"] .search-overlay__box {
  animation: noor-iris 420ms var(--ease-out);
}
@keyframes noor-iris {
  from { clip-path: circle(6% at 85% 8%); opacity: .4; }
  to   { clip-path: circle(140% at 85% 8%); opacity: 1; }
}

/* -- 37 · The routes: faint trade lines behind the footer's ports. -------- */
[data-theme="noor"] footer {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='300' viewBox='0 0 1200 300'%3E%3Cg fill='none' stroke='%23C9A24B' stroke-opacity='.07'%3E%3Cpath d='M60 220 Q 300 80 600 160 T 1140 120'/%3E%3Cpath d='M100 260 Q 420 200 720 240 T 1160 200'/%3E%3C/g%3E%3Cg fill='%23E8CF8E' fill-opacity='.18'%3E%3Ccircle cx='60' cy='220' r='2.5'/%3E%3Ccircle cx='600' cy='160' r='2.5'/%3E%3Ccircle cx='1140' cy='120' r='2.5'/%3E%3Ccircle cx='720' cy='240' r='2'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

/* -- 38 (adapted) · The bell: a soft sheen crosses the strip on the clock. - */
[data-theme="noor"] .announce-bar { position: relative; overflow: hidden; }
[data-theme="noor"] .announce-bar::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 40%, rgba(255, 243, 196, .12) 50%, transparent 60%);
  background-size: 280% 100%;
  animation: noor-bell 12s linear infinite;
}
@keyframes noor-bell {
  0%, 78% { background-position: 120% 0; }
  100%    { background-position: -60% 0; }
}

/* -- 40 · The letter: a testimonial pinned like correspondence. ----------- */
[data-theme="noor"] .testi-card__inner {
  background: rgba(246, 240, 220, .035);
  border: 1px solid rgba(232, 207, 142, .22);
  border-radius: 14px;
}
[data-theme="noor"] .testi-card__inner::after {
  content: "";
  position: absolute; top: -9px; left: 50%;
  width: 34px; height: 18px;
  margin-left: -17px;
  border: 2px solid rgba(201, 162, 75, .8);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
}

/* -- 41 · The counting house: figures in brass frames. -------------------- */
[data-theme="noor"] .industry-stat__num {
  font-family: 'Cinzel', Georgia, serif;
  color: #E4CE92;
  text-shadow: 0 0 16px rgba(201, 162, 75, .4);
}

/* -- 42 · The dawn grows: the beam strengthens as you approach. ----------- */
@supports (animation-timeline: view()) {
  [data-theme="noor"] .newsletter-band::after {
    animation: noor-sunbeam 16s ease-in-out infinite, noor-dawn-grow linear both;
    animation-timeline: auto, view();
  }
  @keyframes noor-dawn-grow { from { opacity: .25; } to { opacity: 1; } }
}

/* -- 44 · Girih corners: the engraver's frame on standing panels. --------- */
[data-theme="noor"] .surface-gr { position: relative; }
[data-theme="noor"] .surface-gr::before,
[data-theme="noor"] .surface-gr::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid rgba(232, 207, 142, .6);
  pointer-events: none;
}
[data-theme="noor"] .surface-gr::before { top: 6px; left: 6px; border-right: none; border-bottom: none; }
[data-theme="noor"] .surface-gr::after  { bottom: 6px; right: 6px; border-left: none; border-top: none; }

/* -- 45 · Mother-of-pearl: focused fields shimmer faintly iridescent. ----- */
[data-theme="noor"] .input-gr:focus,
[data-theme="noor"] .select-gr:focus,
[data-theme="noor"] .textarea-gr:focus {
  background-image: linear-gradient(120deg,
    rgba(79, 201, 228, .05), rgba(232, 207, 142, .05) 40%, rgba(185, 227, 107, .04) 70%, rgba(79, 201, 228, .05));
}

/* -- 46 (adapted) · The tassel: 'View all' hangs a bead on its thread. ---- */
[data-theme="noor"] .section-head .btn-ghost-gr {
  border-bottom: 1px solid rgba(201, 162, 75, .5);
  border-radius: 0;
}
@media (hover: hover) {
  [data-theme="noor"] .section-head .btn-ghost-gr:hover {
    border-bottom-color: #FFF3C4;
    box-shadow: 0 8px 0 -6px rgba(232, 207, 142, .9);
  }
}

/* -- 47 · The minaret: the scrollbar thumb turned on a lathe. ------------- */
[data-theme="noor"]::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #E4CE92, #C9A24B 30%, #8A6D22 85%, #E4CE92);
  border-radius: 6px 6px 10px 10px;
  border: 2px solid #071F26;
}

/* -- 48 · Zellige: the trust band's tiles, lit only by the passing lamp. -- */
[data-theme="noor"] .trust-band {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23C9A24B' stroke-opacity='.05'%3E%3Cpath d='M28 4 L52 28 L28 52 L4 28 Z'/%3E%3Ccircle cx='28' cy='28' r='10'/%3E%3C/g%3E%3C/svg%3E");
}

/* -- Instruments of The Fifty (elements placed by theme.js) --------------- */
/* 2 · The day phase quiets the sky: constellation and fireflies belong to
   the dark hours. */
html[data-theme="noor"][data-noor-phase="day"]::before,
html[data-theme="noor"][data-noor-phase="day"]::after { opacity: .35; }

/* 6 · The greeting under the monogram. */
[data-theme="noor"] .noor-curtain small {
  display: block;
  margin-top: 1rem;
  text-align: center;
  font-family: 'Noto Sans Bengali', serif;
  font-size: 1rem;
  letter-spacing: .3em;
  color: rgba(232, 207, 142, .75);
  animation: noor-curtain-glyph 1500ms ease forwards;
}

/* 11 · The ampersand, in the calligrapher's hand. */
[data-theme="noor"] .noor-amp {
  font-family: 'Cormorant Garamond', 'Playfair Display', serif;
  font-style: italic;
  font-size: 1.1em;
  color: #E4CE92;
  padding: 0 .04em;
}

/* 29 · The coin flip. */
[data-theme="noor"] .noor-coin { animation: noor-coin 500ms var(--ease-out); }
@keyframes noor-coin {
  0%   { transform: rotateY(0); }
  50%  { transform: rotateY(180deg) scale(1.25); background: #E4CE92; }
  100% { transform: rotateY(360deg); }
}

/* 4 · The petal — saffron, falling the way paper falls. */
[data-theme="noor"] .noor-petal {
  position: fixed;
  top: -3vh; left: var(--petal-x, 30vw);
  width: 7px; height: 11px;
  z-index: 3;
  pointer-events: none;
  border-radius: 60% 40% 55% 45% / 70% 60% 40% 30%;
  background: linear-gradient(160deg, #E8B84B, #B03A2E 80%);
  opacity: 0;
  animation: noor-petal 53s linear infinite;
}
/* HOW A PETAL ACTUALLY FALLS, AND WHAT WAS WRONG WITH THIS
 * -------------------------------------------------------
 * 1. TRANSFORM ORDER. It was `translateY() rotate() translateX()` — and a
 *    translate written AFTER a rotate happens in the ROTATED frame. By the
 *    420deg keyframe the "2vw sideways" was being applied 60deg off from
 *    sideways, so the petal's drift swung around wherever its spin happened
 *    to be pointing. Both translates now come before the rotate, in one
 *    translate3d, so drift is drift.
 * 2. IT WAS DRILLING, NOT FLUTTERING. 0 -> 420deg in one direction is a
 *    maple seed autorotating. A petal does not autorotate: it stalls, tips,
 *    slides down the other way, stalls again — so the tilt OSCILLATES, and
 *    its sign agrees with the direction the petal is currently sliding,
 *    because the tilt is what generates the slide.
 * 3. The tumble is a separate rotateY, which turns the petal edge-on twice
 *    per fall and is why it briefly narrows to a line.
 * The vertical steps stay even: a petal reaches terminal velocity almost at
 * once, and constant speed downward is correct. */
@keyframes noor-petal {
  0%, 86%   { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg) rotateY(0deg); }
  87%       { opacity: .85; }
  89.5%     { transform: translate3d(3.2vw, 26vh, 0) rotate(17deg) rotateY(190deg); }
  92%       { transform: translate3d(-1.4vw, 52vh, 0) rotate(-15deg) rotateY(370deg); opacity: .85; }
  94.5%     { transform: translate3d(3vw, 78vh, 0) rotate(13deg) rotateY(545deg); opacity: .8; }
  96.5%     { transform: translate3d(.4vw, 98vh, 0) rotate(-8deg) rotateY(680deg); opacity: 0; }
  100%      { transform: translate3d(.4vw, 106vh, 0) rotate(-8deg) rotateY(700deg); opacity: 0; }
}

/* 39 · The dhow on the horizon of the shore. */
[data-theme="noor"] .noor-dhow {
  position: absolute;
  top: -13px; left: -80px;
  width: 46px; height: 30px;
  pointer-events: none;
  opacity: .5;
  animation: noor-dhow 96s linear infinite;
}
/* The hull rides on the element that crosses, so the two motions do not have
   to share one transform. A boat on open water is never still: it rises and
   falls on the swell and rocks about its own centre, and the roll leads the
   heave by a quarter period the way a hull actually answers a passing wave.
   Without this the dhow slides across the horizon like a decal on glass. */
[data-theme="noor"] .noor-dhow::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='30' viewBox='0 0 46 30'%3E%3Cpath d='M6 24 Q 23 30 40 24 L 36 28 Q 23 32 10 28 Z' fill='%23C9A24B' fill-opacity='.8'/%3E%3Cpath d='M22 2 Q 34 8 30 22 L 22 22 Z' fill='%23E8CF8E' fill-opacity='.7'/%3E%3Cpath d='M20 4 Q 12 12 16 22 L 20 22 Z' fill='%23C9A24B' fill-opacity='.6'/%3E%3C/svg%3E") center/contain no-repeat;
  transform-origin: 50% 80%;                /* the waterline, not the sail */
  animation: noor-dhow-swell 5.4s var(--ease-inout, ease-in-out) infinite;
}
@keyframes noor-dhow {
  0%, 70%  { transform: translateX(0); }
  99%, 100% { transform: translateX(calc(100vw + 160px)); }
}
@keyframes noor-dhow-swell {
  0%   { transform: translateY(0)     rotate(-1.7deg); }
  25%  { transform: translateY(-2.4px) rotate(0deg); }
  50%  { transform: translateY(0)     rotate(1.9deg); }
  75%  { transform: translateY(2.2px) rotate(0deg); }
  100% { transform: translateY(0)     rotate(-1.7deg); }
}

/* 49 · The shore, gathering light when you arrive. */
[data-theme="noor"] footer.noor-shore-lit::before {
  animation: noor-waterline 1.2s ease-in-out infinite alternate;
  box-shadow: 0 0 24px rgba(232, 207, 142, .55);
}

/* 23 · The origin, sealed. */
[data-theme="noor"] .noor-seal {
  display: inline-block;
  margin-left: .6em;
  padding: .15em .7em;
  font-size: .72em;
  letter-spacing: .18em;
  color: #2F2A1C;
  background: radial-gradient(circle at 35% 30%, #EFDFAF, #C9A24B 62%, #A8842B);
  border: 1px solid #8A6D22;
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 248, 230, .6), 0 1px 4px rgba(0, 0, 0, .45);
  transform: rotate(-1.2deg);
}

/* ---- Stillness, on request ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html[data-theme="noor"]::before,
  html[data-theme="noor"]::after { display: none; }
  [data-theme="noor"] body::before { animation: none; }
  html[data-theme="noor"] .product-card:hover,
  html[data-theme="noor"] .category-card:hover,
  html[data-theme="noor"] .product-card.lux-glance,
  html[data-theme="noor"] .category-card.lux-glance { animation: none; }
  [data-theme="noor"] .noor-ember,
  [data-theme="noor"] .noor-lantern,
  [data-theme="noor"] .noor-petal,
  [data-theme="noor"] .noor-dhow,
  [data-theme="noor"] .noor-curtain { display: none; }
  [data-theme="noor"] .noor-coin { animation: none; }
  html[data-theme="noor"] .product-card.lux-glance .product-card__media,
  html[data-theme="noor"] .category-card.lux-glance .category-card__media,
  [data-theme="noor"] [data-reveal].is-visible .lux-gilt,
  [data-theme="noor"] .hero__dot.is-active,
  [data-theme="noor"] .tabbar__item.is-active::after,
  [data-theme="noor"] .pdp-price__now,
  [data-theme="noor"] .testi-stars,
  [data-theme="noor"] .newsletter-band::after,
  [data-theme="noor"] footer::before,
  [data-theme="noor"] .noor-vignette::before,
  [data-theme="noor"] .announce-bar::after,
  [data-theme="noor"] .search-overlay__box,
  [data-theme="noor"] .cart-drawer-backdrop:not([hidden]) + .cart-drawer .cart-drawer__body > *,
  [data-theme="noor"] .product-card__media::after,
  [data-theme="noor"] .category-card__media::after,
  [data-theme="noor"] .timeline__step.is-current .timeline__dot,
  html[data-theme="noor"] .category-card.lux-glance .category-card__media { animation: none; }
  html[data-theme="noor"] [data-reveal]:not(.is-visible) .section-head__titles > h2 { filter: none; letter-spacing: inherit; }
}