/* ─────────────────────────────────────────────────────
       VARIABLES
    ───────────────────────────────────────────────────── */
    :root {
      --c-night:  #0D1810;
      --c-sage:   #1F3A26;
      --c-mid:    #4A6B52;
      --c-pale:   #DDD8C8;
      --c-linen:  #F4F0E6;
      --c-gold:   #C9A961;
      --c-pgold:  #EDDBA8;
      --c-bronze: #9C7A3F;
      --c-text:   #14241A;
      --c-muted:  #46594A;
      --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
      --bar-h: 44px;
    }

    /* ─────────────────────────────────────────────────────
       RESET & BASE
    ───────────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    /* overflow-x: clip (with hidden as fallback) — `hidden` on html/body
       makes some mobile WebViews (Chrome iOS, Snapchat/Instagram in-app)
       treat the body as its own scroll container, which breaks smooth
       address-bar collapsing and makes finger-scrolling feel jumpy.
       `clip` forbids horizontal overflow WITHOUT creating a scroller. */
    html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; overflow-x: clip; }
    body {
      background: var(--c-linen);
      color: var(--c-text);
      overflow-x: hidden;
      overflow-x: clip;
      font-family: 'DM Sans', sans-serif;
      font-weight: 300;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

    /* Offset anchor scroll so fixed navbar never covers section tops */
    section[id], footer[id] {
      scroll-margin-top: calc(var(--bar-h) + 80px + 12px);
    }

    /* Grain texture overlay.
       Top-anchored with a STABLE height (lvh) on purpose: with `inset: 0`
       this fixed layer resized on every frame of the mobile URL-bar
       collapse (Chrome / in-app browsers like Snapchat), forcing a
       full-screen repaint of the turbulence texture while scrolling —
       felt like the page "jumping". Safari hides this cost, Chrome
       doesn't. lvh = largest viewport, so the layer never resizes. */
    body::after {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;  /* fallback for pre-lvh browsers */
      height: 100lvh;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='0.035'/%3E%3C/svg%3E");
      pointer-events: none;
      z-index: 9999;
      opacity: 1;
    }

    /* Page enter */
    @keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
    body { animation: pageIn 0.6s ease forwards; }

    /* Brand-gold text selection */
    ::selection { background: var(--c-gold); color: var(--c-night); }

    /* Keyboard focus — thin gold ring, matches the brand line work
       (the custom cursor hides the pointer, so this must stay visible) */
    a:focus-visible, button:focus-visible, [role="button"]:focus-visible {
      outline: 1px solid var(--c-gold);
      outline-offset: 3px;
    }

    /* Slim brand scrollbar — html + body so the document scrollbar is styled
       regardless of which element WebKit treats as the scroller */
    html { scrollbar-width: thin; scrollbar-color: rgba(122,138,110,0.55) var(--c-linen); }
    html::-webkit-scrollbar, body::-webkit-scrollbar { width: 10px; }
    html::-webkit-scrollbar-track, body::-webkit-scrollbar-track { background: var(--c-linen); }
    html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb { background: rgba(74,107,82,0.5); border-radius: 0; }
    html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover { background: var(--c-sage); }

    /* Language toggle — SQ (default) / EN / MK. Every visible string
       lives in sibling <span data-sq>/<span data-en>/<span data-mk>
       triplets; only the active language's span is shown. */
    [data-en], [data-mk] { display: none; }
    html[data-lang="en"] [data-sq] { display: none; }
    html[data-lang="en"] [data-en] { display: revert; }
    html[data-lang="mk"] [data-sq] { display: none; }
    html[data-lang="mk"] [data-mk] { display: revert; }

    /* Utility */
    .gold-rule {
      display: block;
      width: 48px;
      height: 1px;
      background: var(--c-gold);
    }
    .lux-container {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 56px;
    }

    /* Reveal animation */
    .reveal {
      opacity: 0;
      transform: translateY(32px);
      transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
    }
    .reveal.in { opacity: 1; transform: none; }
    .reveal-left {
      opacity: 0;
      transform: translateX(-32px);
      transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
    }
    .reveal-left.in { opacity: 1; transform: none; }

    /* ─────────────────────────────────────────────────────
       BUTTONS
    ───────────────────────────────────────────────────── */
    .btn-ol {
      display: inline-block;
      border: 1px solid var(--c-gold);
      color: var(--c-sage);
      background: transparent;
      padding: 15px 48px;
      letter-spacing: 0.18em;
      font-size: 11px;
      font-family: 'DM Sans', sans-serif;
      font-weight: 500;
      text-transform: uppercase;
      text-decoration: none;
      border-radius: 0;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      isolation: isolate;
      transition: color 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
    }
    .btn-ol::before {
      content: '';
      position: absolute; inset: 0;
      background: var(--c-gold);
      transform: translateX(-101%);
      transition: transform 0.42s var(--ease-out);
      z-index: -1;
    }
    .btn-ol:hover { color: var(--c-night); }
    .btn-ol:hover::before { transform: translateX(0); }
    .btn-ol.dark { color: var(--c-pgold); border-color: rgba(200,169,110,0.7); }
    .btn-ol.dark:hover { color: var(--c-night); border-color: var(--c-gold); }

    .btn-solid {
      display: inline-block;
      background: var(--c-sage);
      color: var(--c-pgold);
      padding: 15px 48px;
      letter-spacing: 0.18em;
      font-size: 11px;
      font-family: 'DM Sans', sans-serif;
      font-weight: 500;
      text-transform: uppercase;
      text-decoration: none;
      border: none;
      border-radius: 0;
      cursor: pointer;
      transition: background 0.4s;
    }
    .btn-solid:hover { background: var(--c-night); color: var(--c-pgold); }

    /* ─────────────────────────────────────────────────────
       NAVBAR
    ───────────────────────────────────────────────────── */
    #nav {
      position: fixed;
      top: var(--bar-h); left: 0; right: 0;
      z-index: 1000;
      height: 80px;
      transition: background 0.5s, border-color 0.5s, box-shadow 0.5s, top 0.4s;
      display: flex;
      align-items: center;
      /* Pre-promote the nav to its own compositor layer — otherwise the
         layer is created the instant .scrolled adds backdrop-filter at
         60px of scroll, a one-frame hitch right as scrolling starts */
      will-change: backdrop-filter;
    }
    #nav.scrolled {
      background: rgba(240,235,224,0.96);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-bottom: 1px solid rgba(181,201,183,0.5);
      box-shadow: 0 2px 32px rgba(28,43,30,0.06);
    }
    .nav-inner {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 56px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .nav-logo {
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      flex-shrink: 0;
      transition: opacity 0.3s;
    }
    .nav-logo:hover { opacity: 0.8; }
    .nav-logo-img {
      height: 44px;
      width: auto;
      object-fit: contain;
      display: block;
    }
    .nav-logo-text {
      display: flex;
      flex-direction: column;
      line-height: 1.05;
    }
    .nav-logo-top {
      font-family: 'DM Sans', sans-serif;
      font-weight: 300;
      font-size: 8px;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: rgba(122,158,126,0.75);
    }
    #nav.scrolled .nav-logo-top { color: var(--c-muted); }
    .nav-logo-main {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 400;
      font-style: italic;
      font-size: 22px;
      color: var(--c-pgold);
      letter-spacing: 0.06em;
    }
    #nav.scrolled .nav-logo-main { color: var(--c-sage); }
    #nav.scrolled .nav-logo-img { filter: saturate(1.8) brightness(0.62); transition: filter 0.5s; }

    .nav-links {
      display: flex;
      gap: 36px;
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .nav-links a {
      font-family: 'DM Sans', sans-serif;
      font-weight: 400;
      font-size: 11px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(232,213,163,0.7);
      text-decoration: none;
      transition: color 0.3s;
      position: relative;
      padding-bottom: 2px;
    }
    #nav.scrolled .nav-links a { color: var(--c-muted); }
    .nav-links a::after {
      content: '';
      position: absolute;
      bottom: -2px; left: 0;
      width: 0; height: 1px;
      background: var(--c-gold);
      transition: width 0.3s;
    }
    .nav-links a:hover { color: var(--c-gold); }
    .nav-links a:hover::after { width: 100%; }
    .nav-links a.active { color: var(--c-gold); }
    #nav.scrolled .nav-links a.active { color: var(--c-gold); }
    .nav-links a.active::after { width: 100%; }

    .nav-right { display: flex; align-items: center; gap: 16px; }

    /* Language toggle */
    .lang-btn {
      font-family: 'DM Sans', sans-serif;
      font-weight: 500;
      font-size: 10px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: rgba(232,213,163,0.6);
      background: none;
      border: 1px solid rgba(200,169,110,0.3);
      padding: 5px 12px;
      border-radius: 0;
      cursor: pointer;
      transition: color 0.3s, border-color 0.3s;
    }
    #nav.scrolled .lang-btn { color: var(--c-muted); border-color: rgba(92,122,96,0.3); }
    .lang-btn:hover { color: var(--c-gold); border-color: var(--c-gold); }

    /* Social icons in nav */
    .nav-socials { display: flex; align-items: center; gap: 12px; }
    .nav-social-link { display: flex; align-items: center; text-decoration: none; opacity: 0.75; transition: opacity 0.3s; }
    .nav-social-link:hover { opacity: 1; }
    .nav-social-link svg { width: 18px; height: 18px; fill: none; stroke: var(--c-gold); }

    /* Hamburger */
    .hamburger {
      display: none;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 6px 4px;
      width: 36px;
      height: 36px;
    }
    .hamburger span {
      display: block;
      width: 22px;
      height: 2px;
      background: var(--c-pgold);
      border-radius: 1px;
      transition: transform 0.28s ease, opacity 0.2s ease;
      transform-origin: center center;
    }
    #nav.scrolled .hamburger span { background: var(--c-sage); }
    .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* Mobile overlay */
    .mob-overlay {
      position: fixed;
      inset: 0;
      background: var(--c-night);
      z-index: 999;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      transform: translateX(100%);
      transition: transform 0.5s cubic-bezier(0.76,0,0.24,1);
    }
    .mob-overlay.open { transform: translateX(0); }
    .mob-nav {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 28px;
      margin-bottom: 48px;
    }
    .mob-nav a {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 300;
      font-style: italic;
      font-size: 44px;
      color: var(--c-pgold);
      text-decoration: none;
      transition: color 0.3s;
      line-height: 1;
    }
    .mob-nav a:hover { color: var(--c-gold); }
    /* (The old .mob-close "Close ✕" button was removed 2026-07-22 — it sat
       underneath the fixed nav/announce bar and could never be tapped; the
       hamburger morphs into the ✕ and is the real close control.) */

    /* ─────────────────────────────────────────────────────
       HERO
    ───────────────────────────────────────────────────── */
    #hero {
      height: 100vh;
      min-height: 700px;
      background: var(--c-night);
      display: flex;
      overflow: hidden;
      position: relative;
    }
    .hero-wrap {
      display: flex;
      width: 100%;
      align-items: stretch;
      position: relative;
    }
    .hero-left {
      flex: 0 0 52%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 100px 56px 80px calc(max((100vw - 1280px) / 2, 0px) + 56px);
      position: relative;
      overflow: hidden;
      isolation: isolate;
    }
    /* Large ghost numeral — editorial watermark behind text */
    .hero-left::before {
      content: '01';
      position: absolute;
      right: 2%;
      bottom: -4%;
      font-family: 'Cormorant Garamond', serif;
      font-weight: 300;
      font-style: italic;
      font-size: clamp(160px, 20vw, 310px);
      line-height: 0.85;
      color: transparent;
      -webkit-text-stroke: 1px rgba(200,169,110,0.055);
      pointer-events: none;
      user-select: none;
      z-index: -1;
      white-space: nowrap;
    }
    /* Thin left margin gold accent rule */
    .hero-left::after {
      content: '';
      position: absolute;
      left: 32px;
      top: 20%;
      bottom: 20%;
      width: 1px;
      background: linear-gradient(to bottom,
        transparent 0%,
        rgba(200,169,110,0.2) 20%,
        rgba(200,169,110,0.38) 50%,
        rgba(200,169,110,0.2) 80%,
        transparent 100%
      );
      pointer-events: none;
    }
    .hero-eyebrow {
      font-family: 'DM Sans', sans-serif;
      font-weight: 300;
      font-size: 10px;
      letter-spacing: 0.26em;
      text-transform: uppercase;
      color: rgba(255,248,230,0.46);
      margin-bottom: 0;
    }
    .hero-rule {
      display: block;
      width: 48px; height: 1px;
      background: var(--c-gold);
      margin: 22px 0;
    }
    .hero-h1a {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 300;
      font-style: italic;
      font-size: clamp(56px, 6.5vw, 92px);
      color: var(--c-pgold);
      line-height: 0.95;
      display: block;
      letter-spacing: 0.02em;
      text-shadow: 0 0 80px rgba(200,169,110,0.12);
    }
    /* Second line carries a longer sentence — smaller scale so it
       reads as a subtitle and never overflows the left column */
    .hero-h1b {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 500;
      font-style: italic;
      font-size: clamp(28px, 3.2vw, 46px);
      color: var(--c-gold);
      line-height: 1.15;
      display: block;
      margin-top: 8px;
      letter-spacing: 0.02em;
      text-shadow: 0 0 60px rgba(200,169,110,0.18);
    }
    .hero-sub {
      font-family: 'DM Sans', sans-serif;
      font-weight: 300;
      font-size: 14px;
      color: rgba(237,219,168,0.74);
      line-height: 1.95;
      max-width: 420px;
      margin-top: 24px;
    }
    .hero-cta { margin-top: 44px; display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
    /* Primary hero CTA — stronger presence than the base outline button:
       faint gold fill, brighter border, soft depth, and a nudging arrow. */
    .hero-cta .btn-ol.dark {
      background: rgba(200,169,110,0.09);
      border-color: rgba(200,169,110,0.85);
      padding: 17px 50px;
      letter-spacing: 0.22em;
      box-shadow: 0 14px 38px rgba(0,0,0,0.35);
      transition: color 0.35s var(--ease-out), border-color 0.35s var(--ease-out), box-shadow 0.4s ease;
    }
    .hero-cta .btn-ol.dark:hover { box-shadow: 0 18px 46px rgba(200,169,110,0.16); }
    .hero-cta .btn-ol::after {
      content: '→';
      display: inline-block;
      margin-left: 12px;
      transition: transform 0.35s var(--ease-out);
    }
    .hero-cta .btn-ol:hover::after { transform: translateX(5px); }
    /* Quiet secondary CTA beside the main button */
    .hero-link2 {
      font-family: 'DM Sans', sans-serif;
      font-weight: 400;
      font-size: 10px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: rgba(237,219,168,0.62);
      text-decoration: none;
      border-bottom: 1px solid rgba(200,169,110,0.32);
      padding-bottom: 4px;
      transition: color 0.3s, border-color 0.3s;
    }
    .hero-link2:hover { color: var(--c-pgold); border-color: var(--c-gold); }

    /* Shipping note beneath CTA — the Instagram+delivery line is long,
       so it may wrap to two lines; keep the dot aligned to the first. */
    .hero-shipping-note {
      margin-top: 22px;
      display: flex;
      align-items: flex-start;
      gap: 10px;
      max-width: 460px;
      font-family: 'DM Sans', sans-serif;
      font-weight: 300;
      font-size: 9px;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: rgba(255,248,230,0.32);
      line-height: 1.9;
    }
    .hero-shipping-note .hsn-dot {
      width: 3px; height: 3px;
      border-radius: 50%;
      background: rgba(200,169,110,0.32);
      flex-shrink: 0;
      margin-top: 7px;
    }

    /* Hero staggered entrance */
    @keyframes heroSlideUp {
      from { opacity: 0; transform: translateY(18px); }
      to   { opacity: 1; transform: none; }
    }
    .hero-eyebrow { animation: heroSlideUp 0.7s var(--ease-out) 0.10s both; }
    .hero-rule    { animation: heroSlideUp 0.6s var(--ease-out) 0.28s both; }
    .hero-h1a     { animation: heroSlideUp 0.8s var(--ease-out) 0.38s both; }
    .hero-h1b     { animation: heroSlideUp 0.8s var(--ease-out) 0.52s both; }
    .hero-sub     { animation: heroSlideUp 0.7s var(--ease-out) 0.64s both; }
    .hero-cta     { animation: heroSlideUp 0.7s var(--ease-out) 0.78s both; }
    .hero-shipping-note { animation: heroSlideUp 0.6s var(--ease-out) 0.90s both; }

    /* Hero right — full-height editorial image panel, diagonal left edge */
    .hero-right {
      flex: 1;
      align-self: stretch;
      background: var(--c-night);
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border-radius: 0;
      box-shadow: none;
      clip-path: polygon(7% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
    /* Hero image — fills the right panel */
    .hero-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 50% 22%;
      z-index: 2;
      opacity: 0;
      transition: opacity 1s ease;
      filter: contrast(1.06) saturate(1.08) brightness(0.96);
    }
    .hero-img.img-ready { opacity: 1; }
    .hero-img[src=""] { display: none; }
    /* Premium frame overlay — always on top of hero photo */
    .hero-frame {
      position: absolute;
      inset: 0;
      z-index: 3;
      pointer-events: none;
    }
    /* Inner decorations stripped; left corners hidden — clipped by diagonal */
    .hf-inner, .hf-mid, .hf-mt, .hf-mb,
    .hf-tl, .hf-bl { display: none; }

    /* ── Premium L-bracket corners ── */
    .hf-c {
      position: absolute;
      width: 62px;
      height: 62px;
      border-color: rgba(200,169,110,0.82);
      border-style: solid;
    }
    .hf-tl { top: 20px;    left: 20px;    border-width: 1px 0 0 1px; }
    .hf-tr { top: 32px;    right: 32px;   border-width: 1px 1px 0 0; }
    .hf-bl { bottom: 20px; left: 20px;    border-width: 0 0 1px 1px; }
    .hf-br { bottom: 32px; right: 32px;   border-width: 0 1px 1px 0; }
    /* Small gold circle at each corner elbow */
    .hf-c::before {
      content: '';
      position: absolute;
      width: 4px; height: 4px;
      border-radius: 50%;
      background: rgba(200,169,110,0.88);
    }
    .hf-tl::before { top: -2px;    left: -2px;    }
    .hf-tr::before { top: -2px;    right: -2px;   }
    .hf-bl::before { bottom: -2px; left: -2px;    }
    .hf-br::before { bottom: -2px; right: -2px;   }
    .hf-c::after { display: none; }
    /* Vignettes — brand-green tinted, not pure black */
    .hf-vig-top {
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 28%;
      background: linear-gradient(to bottom, rgba(13,24,16,0.58) 0%, rgba(13,24,16,0.02) 78%, transparent 100%);
    }
    .hf-vig {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 38%;
      background: linear-gradient(to top, rgba(13,24,16,0.70) 0%, rgba(13,24,16,0.06) 62%, transparent 100%);
    }
    /* Radial vignette — soft, pulls eye to center jewelry */
    .hf-radial {
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 72% 78% at 50% 46%, transparent 18%, rgba(4,6,5,0.52) 100%);
      pointer-events: none;
    }
    .hero-right::after { display: none; }

    /* Diagonal gold accent line at the editorial split between panels */
    .hero-split-line {
      position: absolute;
      left: calc(52% - 0.5px);
      bottom: 0;
      height: 100%;
      width: 1px;
      transform-origin: bottom center;
      transform: rotate(3.4deg);
      background: linear-gradient(to top,
        rgba(200,169,110,0.72) 0%,
        rgba(200,169,110,0.55) 28%,
        rgba(200,169,110,0.38) 58%,
        rgba(200,169,110,0.12) 82%,
        transparent 100%
      );
      z-index: 20;
      pointer-events: none;
    }
    /* Slow-rotating outer orbit ring */
    @keyframes orbitSpin    { to { transform: rotate(360deg);  } }
    @keyframes orbitSpinRev { to { transform: rotate(-360deg); } }

    .hero-art {
      position: relative;
      width: min(380px, 80%);
      aspect-ratio: 9 / 11;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .ha-orbit1 {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 1px solid rgba(200,169,110,0.14);
      animation: orbitSpin 70s linear infinite;
    }
    .ha-orbit1::before {
      content: '';
      position: absolute;
      top: -3px; left: 50%;
      transform: translateX(-50%);
      width: 5px; height: 5px;
      background: var(--c-gold);
      border-radius: 50%;
      box-shadow: 0 0 10px rgba(200,169,110,0.6);
    }
    .ha-orbit2 {
      position: absolute;
      inset: 14%;
      border-radius: 50%;
      border: 1px solid rgba(200,169,110,0.08);
      animation: orbitSpinRev 90s linear infinite;
    }
    .ha-orbit2::before {
      content: '';
      position: absolute;
      bottom: -2px; left: 50%;
      transform: translateX(-50%);
      width: 3px; height: 3px;
      background: rgba(200,169,110,0.5);
      border-radius: 50%;
    }
    .ha-ring-svg {
      position: relative;
      z-index: 1;
      width: 86%;
      height: 86%;
      animation: crownFloat 8s ease-in-out infinite;
    }
    /* ─────────────────────────────────────────────────────
       HERO PANEL — atmospheric effects
    ───────────────────────────────────────────────────── */
    @keyframes crownFloat {
      0%, 100% { transform: translateY(0); }
      50%       { transform: translateY(-10px); }
    }

    /* Faint emerald noise texture on panel dark areas */
    .hero-right::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='em'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.52' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.03 0 0 0 0 0.12 0 0 0 0 0.05 0 0 0 0.085 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23em)'/%3E%3C/svg%3E");
      background-size: 300px 300px;
      z-index: 1;
      pointer-events: none;
      mix-blend-mode: screen;
    }

    /* Warm gold centre bloom — renders above the photo for a soft luminous effect */
    .hero-glow {
      position: absolute;
      width: 68%;
      height: 60%;
      top: 52%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: radial-gradient(ellipse at 50% 50%,
        rgba(200,169,110,0.13) 0%,
        rgba(200,169,110,0.04) 42%,
        transparent 68%);
      filter: blur(36px);
      z-index: 3;
      pointer-events: none;
      /* slow breath — luxury moves slowly */
      animation: goldGlow 9s ease-in-out infinite;
    }
    @keyframes goldGlow {
      0%, 100% { opacity: 0.7;  transform: translate(-50%, -50%) scale(1);    }
      50%       { opacity: 1;   transform: translate(-50%, -50%) scale(1.08); }
    }

    /* Light sweep across the crown — one graceful pass, then a long rest.
       Transform-only (GPU); left stays fixed so nothing repaints. */
    .ha-sweep {
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      overflow: hidden;
    }
    .ha-sweep::after {
      content: '';
      position: absolute;
      top: -20%;
      left: -30%;
      width: 22%;
      height: 140%;
      background: linear-gradient(
        108deg,
        transparent 0%,
        rgba(200,169,110,0.04) 35%,
        rgba(235,213,165,0.14) 50%,
        rgba(200,169,110,0.04) 65%,
        transparent 100%
      );
      transform: translate3d(0,0,0) skewX(-18deg);
      animation: lightSweep 12s ease-in-out infinite;
    }
    @keyframes lightSweep {
      0%, 58%   { transform: translate3d(0,0,0) skewX(-18deg); opacity: 0; }
      61%       { opacity: 1; }
      78%       { transform: translate3d(700%,0,0) skewX(-18deg); opacity: 1; }
      80%, 100% { transform: translate3d(700%,0,0) skewX(-18deg); opacity: 0; }
    }

    /* Crystal glints — tiny 4-point stars that catch the light every few
       seconds, each on its own long cycle so the moments feel random */
    .hero-sparkles {
      position: absolute;
      inset: 0;
      z-index: 4;
      pointer-events: none;
    }
    .hs {
      position: absolute;
      width: 12px;
      height: 12px;
      opacity: 0;
      background:
        radial-gradient(circle, rgba(255,252,240,0.95) 0%, rgba(255,248,230,0.25) 20%, transparent 34%),
        linear-gradient(to right,  transparent 45%, rgba(255,252,240,0.9) 50%, transparent 55%),
        linear-gradient(to bottom, transparent 45%, rgba(255,252,240,0.9) 50%, transparent 55%);
      filter: drop-shadow(0 0 6px rgba(255,248,230,0.55));
      animation: sparkleTwinkle 9s ease-in-out infinite;
    }
    .hs-1 { top: 38%; left: 46%; animation-delay: 1.6s; }
    .hs-2 { top: 51%; left: 63%; width: 9px;  height: 9px;  animation-delay: 4.4s; animation-duration: 11s; }
    .hs-3 { top: 59%; left: 37%; width: 8px;  height: 8px;  animation-delay: 7.2s; animation-duration: 13s; }
    .hs-4 { top: 31%; left: 56%; width: 10px; height: 10px; animation-delay: 9.5s; animation-duration: 15s; }
    @keyframes sparkleTwinkle {
      0%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); }
      2%       { opacity: 0.9; transform: scale(1) rotate(20deg); }
      4.5%     { opacity: 0; transform: scale(0.4) rotate(38deg); }
      /* rest, invisible, for the remainder of the cycle */
      5%       { opacity: 0; transform: scale(0.3) rotate(0deg); }
    }

    /* Scroll indicator */
    .scroll-ind {
      position: absolute;
      bottom: 36px; left: 26%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      opacity: 0.45;
      animation: scrollAnim 2.2s ease-in-out infinite;
      pointer-events: none;
    }
    .scroll-ind .sl { width: 1px; height: 36px; background: var(--c-gold); }
    .scroll-ind .sa { width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 5px solid var(--c-gold); }
    @keyframes scrollAnim {
      0%,100% { transform: translateX(-50%) translateY(0); }
      60% { transform: translateX(-50%) translateY(7px); }
    }

    /* ─────────────────────────────────────────────────────
       MARQUEE
    ───────────────────────────────────────────────────── */
    .marquee-wrap {
      background: var(--c-gold);
      height: 44px;
      overflow: hidden;
      display: flex;
      align-items: center;
    }
    .marquee-track {
      display: flex;
      white-space: nowrap;
      animation: marquee 45s linear infinite;
    }
    .marquee-track span {
      font-family: 'DM Sans', sans-serif;
      font-weight: 400;
      font-size: 10px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--c-night);
      padding: 0 18px;
      opacity: 0.85;
    }
    /* translate3d keeps the band on the GPU compositor; the exact -100%/6
       loop distance (content = 6 identical groups) restarts seamlessly.
       6 groups (not 3): the track must stay wider than viewport + one
       group at all times, or an empty gap sweeps across on desktop. */
    @keyframes marquee {
      0%   { transform: translate3d(0, 0, 0); }
      100% { transform: translate3d(calc(-100% / 6), 0, 0); }
    }

    /* ─────────────────────────────────────────────────────
       STATS
    ───────────────────────────────────────────────────── */
    #stats { background: var(--c-linen); padding: 72px 0 48px; }
    .stats-grid {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 56px;
      display: grid;
      grid-template-columns: repeat(4,1fr);
    }
    .stat-item {
      text-align: center;
      padding: 40px 24px;
      border-right: 1px solid rgba(181,201,183,0.5);
      position: relative;
    }
    .stat-item:last-child { border-right: none; }
    .stat-num {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 400;
      font-size: 68px;
      color: var(--c-sage);
      display: block;
      line-height: 1;
      letter-spacing: -0.01em;
    }
    .stat-lbl {
      font-family: 'DM Sans', sans-serif;
      font-weight: 200;
      font-size: 9px;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--c-muted);
      display: block;
      margin-top: 14px;
    }

    /* ─────────────────────────────────────────────────────
       EDITORIAL SPLIT
    ───────────────────────────────────────────────────── */
    .editorial-split {
      display: grid;
      grid-template-columns: 58fr 42fr;
      min-height: 520px;
    }
    .ed-col {
      padding: 80px;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      min-height: 520px;
    }
    .ed-col.sage { background: var(--c-sage); }
    .ed-col.pale { background: #1A2B1E; }
    .ed-wm {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 900;
      font-style: italic;
      font-size: 160px;
      color: rgba(240,235,224,0.06);
      position: absolute;
      top: -16px; right: -20px;
      line-height: 1;
      pointer-events: none;
      user-select: none;
    }
    .ed-eyebrow {
      font-family: 'DM Sans', sans-serif;
      font-weight: 300;
      font-size: 10px;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      margin-bottom: 14px;
      display: block;
    }
    .ed-h {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 400;
      font-style: italic;
      font-size: 52px;
      line-height: 1.05;
      margin-bottom: 20px;
    }
    .ed-body {
      font-family: 'DM Sans', sans-serif;
      font-weight: 300;
      font-size: 14px;
      line-height: 1.9;
      margin-bottom: 24px;
    }
    .ed-link {
      font-family: 'DM Sans', sans-serif;
      font-weight: 500;
      font-size: 11px;
      letter-spacing: 0.12em;
      text-decoration: none;
      border-bottom: 1px solid currentColor;
      padding-bottom: 1px;
      opacity: 0.8;
      transition: opacity 0.3s;
      display: inline-block;
    }
    .ed-link:hover { opacity: 1; }

    /* ─────────────────────────────────────────────────────
       PRODUCT SECTION
    ───────────────────────────────────────────────────── */
    #collection { background: var(--c-linen); }

    .sec-label {
      font-family: 'DM Sans', sans-serif;
      font-weight: 300;
      font-size: 10px;
      letter-spacing: 0.26em;
      text-transform: uppercase;
      color: var(--c-mid);
      display: block;
      margin-bottom: 14px;
    }
    .sec-h {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 400;
      font-size: clamp(40px, 5vw, 60px);
      color: var(--c-sage);
      line-height: 1.05;
    }
    .sec-sub {
      font-family: 'DM Sans', sans-serif;
      font-weight: 300;
      font-size: 14px;
      color: var(--c-muted);
      line-height: 1.9;
      max-width: 460px;
      margin-top: 14px;
    }

    /* Filter bar */
    .filter-bar {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin: 48px 0 56px;
    }
    .f-pill {
      font-family: 'DM Sans', sans-serif;
      font-weight: 400;
      font-size: 10px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      background: transparent;
      border: 1px solid rgba(181,201,183,0.6);
      color: var(--c-muted);
      padding: 9px 22px;
      border-radius: 0;
      cursor: pointer;
      transition: all 0.3s;
    }
    .f-pill:hover { border-color: var(--c-gold); color: var(--c-gold); }
    .f-pill.on { background: var(--c-sage); color: var(--c-pgold); border-color: var(--c-sage); }

    /* Product grid — 3 cols desktop, editorial feel */
    .prod-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 3px;
    }
    /* First product: double wide (featured) */
    .prod-card--featured {
      grid-column: span 2;
    }
    .prod-card--featured .prod-visual { aspect-ratio: 3 / 2; }

    .prod-card {
      background: var(--c-linen);
      overflow: hidden;
      /* transition lives in the HOVER DEPTH block further down */
      position: relative;
    }
    .prod-card.hide { pointer-events: none; }

    /* Badge */
    .prod-badge {
      position: absolute;
      top: 16px; left: 16px;
      z-index: 2;
      font-family: 'DM Sans', sans-serif;
      font-weight: 500;
      font-size: 9px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      padding: 5px 12px;
      border-radius: 0;
    }
    .badge-new { background: var(--c-sage); color: var(--c-pgold); }
    .badge-best { background: var(--c-gold); color: var(--c-night); }
    .badge-sale { background: var(--c-bronze); color: var(--c-pgold); }

    /* Product visual (image area) — uniform square box at EVERY breakpoint;
       the photo NEVER gets cropped: the sharp photo is contain-fit (whole
       product always visible, letterboxed if needed) and any empty space
       around it shows .prod-photo-bg, a heavily blurred copy of the same
       photo — the card's own background image. The box itself stays
       transparent, never a solid color. */
    .prod-visual {
      aspect-ratio: 1 / 1;
      position: relative;
      overflow: hidden;
    }
    .prod-photo {
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
      display: block;
      position: absolute;
      inset: 0;
      /* Subtle anti-shine — these are flash-lit crystal close-ups and read
         as too glossy straight from camera. Slight dim + gentle contrast
         lift + tiny desaturation tames the glare without going dull/dark. */
      filter: brightness(0.94) contrast(1.03) saturate(0.97);
      transition: transform 0.7s var(--ease-out);
      z-index: 2;
    }
    /* Blurred fill layer behind the sharp photo (same image file — the browser
       downloads it once). Scale hides the soft edges the blur creates. */
    .prod-photo-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform: scale(1.18);
      filter: blur(26px) brightness(0.90) saturate(1.02);
      z-index: 1;
      pointer-events: none;
    }
    /* Hide image elements with no src set (placeholder state) */
    img[src=""] { opacity: 0; pointer-events: none; }
    /* No prices shown on site */
    .prod-price-wrap,
    .na-price,
    .sale-price-row,
    .sale-pct,
    .prod-badge.badge-sale { display: none !important; }
    /* Visual boxes stay transparent (browser default) — the blurred photo
       copy (.prod-photo-bg) is the only backdrop, never a solid color.
       (The old bg-a…bg-d placeholder colors and the .prod-art SVG
       placeholder layer were removed — every card has a real photo.) */
    @media (hover: hover) {
      .prod-card:hover .prod-photo { transform: scale(1.05); }
    }
    /* Hover overlay */
    .prod-visual::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(28,43,30,0.6);
      opacity: 0;
      transition: opacity 0.4s;
      z-index: 3;
    }
    /* Hover overlay text retired — it duplicated the "Porosit në Instagram"
       button right below every card. The hover now speaks through the photo
       zoom, gold glow, and name lift instead. */
    .prod-overlay { display: none; }
    .prod-overlay span {
      font-family: 'DM Sans', sans-serif;
      font-weight: 400;
      font-size: 10px;
      letter-spacing: 0.26em;
      text-transform: uppercase;
      color: var(--c-pgold);
      border-bottom: 1px solid rgba(232,213,163,0.4);
      padding-bottom: 3px;
    }
    @media (hover: hover) {
      .prod-card:hover .prod-visual::after { opacity: 1; }
      .prod-card:hover .prod-overlay { opacity: 1; }
    }

    /* Card body */
    .prod-body {
      padding: 22px 20px 24px;
      border-top: 1px solid rgba(181,201,183,0.2);
      background: var(--c-linen);
    }
    .prod-row1 { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 5px; }
    .prod-name {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 400;
      font-style: italic;
      font-size: 22px;
      color: var(--c-sage);
      letter-spacing: 0.02em;
    }
    .prod-price-wrap { display: flex; align-items: baseline; gap: 8px; }
    .prod-price {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 500;
      font-size: 18px;
      color: var(--c-gold);
    }
    .prod-price-old {
      font-family: 'DM Sans', sans-serif;
      font-weight: 300;
      font-size: 12px;
      color: rgba(92,122,96,0.45);
      text-decoration: line-through;
    }
    .prod-cat {
      font-family: 'DM Sans', sans-serif;
      font-weight: 300;
      font-size: 9px;
      text-transform: uppercase;
      letter-spacing: 0.22em;
      color: var(--c-muted);
      display: block;
      margin-bottom: 18px;
    }
    .prod-btn {
      display: block;
      width: 100%;
      background: transparent;
      color: var(--c-sage);
      font-family: 'DM Sans', sans-serif;
      font-weight: 400;
      font-size: 9px;
      text-transform: uppercase;
      letter-spacing: 0.24em;
      padding: 13px;
      text-align: center;
      text-decoration: none;
      border: 1px solid rgba(61,92,66,0.3);
      border-radius: 0;
      transition: background 0.35s, color 0.35s, border-color 0.35s;
    }
    .prod-btn:hover { background: var(--c-sage); color: var(--c-pgold); border-color: var(--c-sage); }

    /* ─────────────────────────────────────────────────────
       HOW TO ORDER
    ───────────────────────────────────────────────────── */
    #order { background: var(--c-sage); }
    .order-label {
      font-family: 'DM Sans', sans-serif;
      font-weight: 300;
      font-size: 10px;
      letter-spacing: 0.26em;
      text-transform: uppercase;
      color: var(--c-mid);
      display: block;
      margin-bottom: 16px;
    }
    .order-h {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 400;
      font-size: clamp(40px, 5vw, 60px);
      color: var(--c-pgold);
      line-height: 1.05;
      margin-bottom: 24px;
    }
    .steps {
      display: grid;
      grid-template-columns: repeat(3,1fr);
      gap: 0;
      margin-top: 72px;
      position: relative;
    }
    /* Connecting line between step circles */
    .steps::before {
      content: '';
      position: absolute;
      top: 27px;
      left: calc(16.67% + 10px);
      right: calc(16.67% + 10px);
      height: 1px;
      background: linear-gradient(to right, rgba(200,169,110,0.25), rgba(200,169,110,0.1), rgba(200,169,110,0.25));
    }
    .step { position: relative; padding: 0 48px 0 0; }
    .step:last-child { padding-right: 0; }
    .step-n-wrap {
      display: flex;
      align-items: center;
      gap: 18px;
      margin-bottom: 28px;
    }
    .step-n-circle {
      width: 54px; height: 54px;
      border: 1px solid rgba(200,169,110,0.35);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      background: rgba(28,43,30,0.3);
    }
    .step-n {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 400;
      font-style: italic;
      font-size: 26px;
      color: var(--c-gold);
      line-height: 1;
    }
    .step-h {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 400;
      font-size: 26px;
      color: var(--c-pgold);
      margin-bottom: 14px;
    }
    .step-t {
      font-family: 'DM Sans', sans-serif;
      font-weight: 300;
      font-size: 13px;
      color: rgba(181,201,183,0.75);
      line-height: 2;
    }
    .order-cta { text-align: center; margin-top: 64px; }

    /* ─────────────────────────────────────────────────────
       STORY
    ───────────────────────────────────────────────────── */
    #story { background: var(--c-linen); }
    .story-split {
      display: grid;
      grid-template-columns: 38fr 62fr;
      min-height: 580px;
    }
    .story-left {
      background: var(--c-sage);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      min-height: 480px;
    }
    .story-left img {
      position: absolute;
      inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
      opacity: 0.22;
    }
    .story-wm {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 900;
      font-style: italic;
      font-size: 280px;
      color: rgba(200,169,110,0.06);
      position: absolute;
      line-height: 1;
      user-select: none;
      letter-spacing: -0.05em;
    }
    .story-art {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .story-right {
      background: var(--c-linen);
      padding: 88px 80px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .story-label {
      font-family: 'DM Sans', sans-serif;
      font-weight: 300;
      font-size: 10px;
      letter-spacing: 0.26em;
      text-transform: uppercase;
      color: var(--c-mid);
      margin-bottom: 16px;
      display: block;
    }
    .story-h {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 400;
      font-style: italic;
      font-size: clamp(32px, 3.5vw, 46px);
      color: var(--c-sage);
      line-height: 1.1;
      margin-bottom: 24px;
    }
    .story-p {
      font-family: 'DM Sans', sans-serif;
      font-weight: 300;
      font-size: 14px;
      color: var(--c-text);
      line-height: 1.95;
      margin-bottom: 18px;
    }
    .story-bq {
      border-left: 2px solid var(--c-gold);
      padding-left: 22px;
      margin: 28px 0;
    }
    .story-bq p {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 300;
      font-style: italic;
      font-size: 20px;
      color: var(--c-sage);
      line-height: 1.55;
    }

    /* ─────────────────────────────────────────────────────
       INSTAGRAM WALL
    ───────────────────────────────────────────────────── */
    #instagram { background: var(--c-night); }
    .ig-label {
      font-family: 'DM Sans', sans-serif;
      font-weight: 300;
      font-size: 10px;
      letter-spacing: 0.26em;
      text-transform: uppercase;
      color: var(--c-mid);
      display: block;
      margin-bottom: 14px;
    }
    .ig-h {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 400;
      font-style: italic;
      font-size: clamp(36px, 4.5vw, 52px);
      color: var(--c-pgold);
      line-height: 1.05;
      margin-bottom: 12px;
    }
    .ig-handle {
      font-family: 'DM Sans', sans-serif;
      font-weight: 300;
      font-size: 13px;
      color: rgba(122,158,126,0.7);
      text-decoration: none;
      letter-spacing: 0.05em;
      display: block;
      transition: color 0.3s;
    }
    .ig-handle:hover { color: var(--c-gold); }
    .ig-grid {
      display: grid;
      grid-template-columns: repeat(3,1fr);
      gap: 3px;
      margin-top: 48px;
    }
    .ig-cell {
      aspect-ratio: 1;
      position: relative;
      overflow: hidden;
      display: block;
      text-decoration: none;
    }
    .ig-inner {
      width: 100%; height: 100%;
      display: flex; align-items: center; justify-content: center;
      transition: transform 0.5s var(--ease-out);
    }
    .ig-inner img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .ig-cell:hover .ig-inner { transform: scale(1.06); }
    .ig-cell::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(28,43,30,0.75);
      opacity: 0;
      transition: opacity 0.4s;
    }
    .ig-overlay {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1;
      opacity: 0;
      transition: opacity 0.4s;
    }
    .ig-overlay span {
      font-family: 'DM Sans', sans-serif;
      font-weight: 500;
      font-size: 10px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--c-pgold);
    }
    .ig-cell:hover::after { opacity: 1; }
    .ig-cell:hover .ig-overlay { opacity: 1; }
    .ig-c1 .ig-inner { background: var(--c-sage); }
    .ig-c2 .ig-inner { background: #2a3c2c; }
    .ig-c3 .ig-inner { background: var(--c-pale); }
    .ig-c4 .ig-inner { background: var(--c-bronze); }
    .ig-c5 .ig-inner { background: rgba(61,92,66,0.7); }
    .ig-c6 .ig-inner { background: #22351f; }
    .ig-cta { text-align: center; margin-top: 48px; }

    /* ─────────────────────────────────────────────────────
       FOOTER
    ───────────────────────────────────────────────────── */
    #footer { background: var(--c-night); }

    .footer-top {
      padding: 26px 0 52px;
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr 1fr;
      gap: 48px;
      border-bottom: 1px solid rgba(181,201,183,0.1);
    }
    .f-brand-col { margin-left: 0; }
    .f-brand-row { display: flex; align-items: center; gap: 3px; margin-bottom: 14px; position: relative; left: -18px; top: -10px; }
    .f-brand-desc {
      font-family: 'DM Sans', sans-serif;
      font-weight: 300;
      font-size: 12px;
      color: rgba(122,158,126,0.6);
      line-height: 1.8;
      max-width: 200px;
      margin-bottom: 24px;
    }
    .f-socials { display: flex; gap: 14px; align-items: center; }
    .f-social-link { display: flex; align-items: center; text-decoration: none; opacity: 0.5; transition: opacity 0.3s; }
    .f-social-link:hover { opacity: 1; }
    .f-social-link svg { width: 18px; height: 18px; fill: none; stroke: var(--c-gold); }

    .f-col-head {
      font-family: 'DM Sans', sans-serif;
      font-weight: 500;
      font-size: 10px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--c-gold);
      margin-bottom: 20px;
      display: block;
    }
    .f-links { display: flex; flex-direction: column; gap: 11px; list-style: none; padding: 0; margin: 0; }
    .f-links li a, .f-links li span {
      font-family: 'DM Sans', sans-serif;
      font-weight: 300;
      font-size: 13px;
      color: rgba(181,201,183,0.55);
      text-decoration: none;
      transition: color 0.3s;
      letter-spacing: 0.01em;
    }
    .f-links li a:hover { color: var(--c-pgold); }
    .f-links li .highlight { color: var(--c-mid); }

    .footer-bottom {
      padding: 20px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .f-copy {
      font-family: 'DM Sans', sans-serif;
      font-weight: 300;
      font-size: 11px;
      color: rgba(122,158,126,0.55);
    }
    .f-legal { display: flex; gap: 20px; }
    .f-legal a {
      font-family: 'DM Sans', sans-serif;
      font-weight: 300;
      font-size: 11px;
      color: rgba(122,158,126,0.55);
      text-decoration: none;
      transition: color 0.3s;
    }
    .f-legal a:hover { color: var(--c-mid); }

    /* ─────────────────────────────────────────────────────
       VISIT US — boutique location + framed map
    ───────────────────────────────────────────────────── */
    #visit {
      background: var(--c-linen);
      padding: 112px 0 120px;
    }
    .visit-grid {
      display: grid;
      grid-template-columns: 5fr 7fr;
      gap: 64px;
      margin-top: 56px;
      align-items: stretch;
    }
    .visit-info {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .vi-block + .vi-block {
      margin-top: 28px;
      padding-top: 28px;
      border-top: 1px solid rgba(200,169,110,0.22);
    }
    .vi-label {
      display: block;
      font-family: 'DM Sans', sans-serif;
      font-weight: 300;
      font-size: 9px;
      letter-spacing: 0.30em;
      text-transform: uppercase;
      color: var(--c-bronze);
      margin-bottom: 12px;
    }
    .vi-text {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 400;
      font-size: 22px;
      line-height: 1.55;
      color: var(--c-night);
      margin: 0;
    }
    .vi-note {
      font-family: 'DM Sans', sans-serif;
      font-weight: 300;
      font-size: 13px;
      line-height: 1.85;
      color: rgba(38,56,41,0.72);
      margin: 0;
      max-width: 360px;
    }
    .visit-btn { margin-top: 36px; align-self: flex-start; }
    /* Map in a thin gold gallery frame; muted to match the palette,
       full colour on hover */
    .visit-map {
      position: relative;
      min-height: 380px;
      border: 1px solid rgba(200,169,110,0.4);
      padding: 10px;
      background: var(--c-pale);
      box-shadow: 0 30px 70px rgba(13,24,16,0.10);
    }
    /* The live map is shown untinted — Google requires its logo and
       attribution to stay unmodified. */
    .visit-map iframe {
      position: absolute;
      inset: 10px;
      width: calc(100% - 20px);
      height: calc(100% - 20px);
      border: 0;
      display: block;
    }
    /* One-line note under the framed map */
    .visit-map-note {
      position: absolute;
      top: 100%; left: 0;
      margin: 10px 0 0;
      font-family: 'DM Sans', sans-serif;
      font-weight: 300;
      font-size: 11px;
      letter-spacing: 0.05em;
      color: rgba(44,62,47,0.55);
    }
    @media (max-width: 991px) {
      .visit-grid { grid-template-columns: 1fr; gap: 44px; margin-top: 44px; }
      .visit-map { min-height: 320px; }
      #visit { padding: 88px 0; }
    }
    @media (max-width: 575px) {
      .vi-text { font-size: 19px; }
      .visit-map { min-height: 280px; padding: 8px; }
      .visit-map iframe { inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); }
      .visit-btn { align-self: stretch; text-align: center; }
    }

    /* ─────────────────────────────────────────────────────
       BACK TO TOP
    ───────────────────────────────────────────────────── */
    #btt {
      position: fixed;
      bottom: 28px; right: 28px;
      width: 42px; height: 42px;
      background: rgba(61,92,66,0.9);
      color: var(--c-pgold);
      border: 1px solid rgba(200,169,110,0.2);
      border-radius: 0;
      cursor: pointer;
      font-size: 14px;
      display: flex; align-items: center; justify-content: center;
      opacity: 0; pointer-events: none;
      transition: opacity 0.3s, background 0.3s;
      z-index: 900;
      font-family: 'DM Sans', sans-serif;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }
    #btt.show { opacity: 1; pointer-events: auto; }
    #btt:hover { background: var(--c-night); }

    /* ─────────────────────────────────────────────────────
       RESPONSIVE
    ───────────────────────────────────────────────────── */
    @media (max-width: 1199px) {
      .hero-left { padding-left: 56px; }
      .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
    }

    @media (max-width: 991px) {
      /* Nav */
      .nav-links { display: none; }
      .hamburger { display: flex; }
      #nav { height: 64px; }
      .nav-inner { padding: 0 24px; }
      .lang-btn { font-size: 9px; padding: 4px 10px; }
      .nav-socials { display: flex; gap: 11px; }
      .nav-social-link svg { width: 18px; height: 18px; }

      /* Hero — 4/5 box: crown image fills it, text overlaid at bottom */
      #hero { height: auto; min-height: 0; flex-direction: column; padding-top: 0; }
      .hero-wrap {
        flex-direction: column;
        position: relative;
        width: 100%;
        aspect-ratio: 4 / 5;
        min-height: 0;
      }
      /* Crown image — fills the entire 4/5 box, no gaps */
      .hero-right {
        position: absolute; inset: 0;
        width: 100%; height: 100%;
        max-height: none; min-height: 0;
        z-index: 0; border-radius: 0; box-shadow: none; align-self: auto;
        clip-path: none; aspect-ratio: unset; order: 0;
      }
      .hero-split-line { display: none; }
      .hero-right::before, .hero-right::after { display: none; }
      .hero-frame { display: none; }
      .hero-img { object-fit: cover; object-position: 50% 22%; filter: none; }
      .hero-art { display: none; }
      .hero-wm  { display: none; }
      /* Text — overlaid on the image, anchored to bottom with dark gradient */
      .hero-left {
        position: absolute; inset: 0;
        z-index: 1;
        flex: unset; width: 100%;
        display: flex; flex-direction: column; justify-content: flex-end;
        padding: 0 28px 36px;
        background: linear-gradient(
          to top,
          rgba(13,24,16,0.94) 0%,
          rgba(13,24,16,0.70) 32%,
          rgba(13,24,16,0.18) 62%,
          transparent 100%
        );
      }
      .hero-left::before, .hero-left::after { display: none; }
      .hero-shipping-note { display: none; }
      .hero-h1a { font-size: clamp(34px, 8vw, 52px); }
      .hero-h1b { font-size: clamp(20px, 4.6vw, 30px); }
      .hero-sub { font-size: 13px; margin-top: 14px; max-width: 100%; }
      .hero-cta { margin-top: 28px; }
      .hero-rule { margin: 16px 0; }
      .scroll-ind { display: none; }

      /* Stats */
      .stats-grid { grid-template-columns: repeat(2,1fr); padding: 0 24px; }
      .stat-item:nth-child(2) { border-right: none; }
      .stat-item { border-bottom: 1px solid rgba(181,201,183,0.4); }
      .stat-item:nth-child(3),.stat-item:nth-child(4) { border-bottom: none; }

      /* Editorial */
      .editorial-split { grid-template-columns: 1fr; }
      .ed-col { min-height: 360px; padding: 52px 40px; }

      /* Products — 2-column editorial grid on tablet & mobile.
         (Replaces the old 34-card horizontal slider — a grid is far easier
         to browse and matches the desktop editorial look.) */
      .prod-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 3px;
      }
      /* Cards render immediately — no reveal delay inside the big grid */
      .prod-grid .reveal,
      .prod-grid .reveal-left {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
      }
      /* Featured card spans the full row for hierarchy */
      .prod-card--featured { grid-column: 1 / -1; }

      /* Order */
      .steps { grid-template-columns: 1fr; gap: 40px; }
      .order-h { font-size: 38px; }

      /* Story */
      .story-split { grid-template-columns: 1fr; }
      .story-left { min-height: 280px; }
      .story-right { padding: 52px 32px; }

      /* Instagram */
      .ig-h { font-size: 36px; }

      /* Footer */
      .footer-top { grid-template-columns: 1fr 1fr; gap: 36px; padding: 26px 0 44px; }
      .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
      .f-copy, .f-legal { justify-content: center; }

      /* Global */
      .lux-container { padding: 0 24px; }
      .section-pad { padding: 72px 0; }
    }

    @media (max-width: 575px) {
      /* Phone: 2-col grid stays; tighten the card chrome so it breathes */
      .prod-body { padding: 16px 14px 0; }
      .prod-row1 { padding-bottom: 12px; }
      .ig-grid { grid-template-columns: repeat(2,1fr); }
      /* Footer — single column, all left-aligned */
      .footer-top { grid-template-columns: 1fr; gap: 28px; padding: 44px 0 36px; }
      .f-brand-col { border-bottom: 1px solid rgba(181,201,183,0.1); padding-bottom: 28px; margin-left: 0; }
      .f-brand-row { left: 0px; top: -6px; }
      .footer-bottom { gap: 8px; }
      .f-links li a, .f-links li span { font-size: 12px; word-break: break-word; }
    }

    /* On touch devices, strip ALL card transitions so nothing moves when finger scrolls */
    @media (hover: none) {
      .prod-card { transition: none !important; }
    }


    /* ─────────────────────────────────────────────────────
       BUG FIXES
    ───────────────────────────────────────────────────── */
    /* Badge must sit above hover overlay */
    .prod-badge { z-index: 5; }
    /* Hide connecting line when steps collapse to single col */
    @media (max-width: 991px) { .steps::before { display: none; } }
    /* Hidden filter cards: collapse fully so grid has no gaps */
    .prod-card.hide { display: none; }

    /* ─────────────────────────────────────────────────────
       PRODUCT CARD — HOVER DEPTH (Part 4.2)
    ───────────────────────────────────────────────────── */
    .prod-card {
      transition: opacity 0.3s ease, transform 0.35s var(--ease-out), box-shadow 0.35s ease;
    }
    /* Product name lifts a touch as the card rises */
    .prod-name { transition: transform 0.45s var(--ease-out); }
    @media (hover: hover) {
      .prod-card:hover {
        transform: translateY(-4px);
        /* soft golden halo instead of a plain dark shadow */
        box-shadow:
          0 24px 48px rgba(0,0,0,0.16),
          0 0 0 1px rgba(200,169,110,0.30),
          0 10px 44px rgba(200,169,110,0.13);
        z-index: 2;
      }
      .prod-card:hover .prod-name { transform: translateY(-3px); }
    }

    /* ─────────────────────────────────────────────────────
       SKELETON SHIMMER — product images (Part 4.4)
    ───────────────────────────────────────────────────── */
    @keyframes prodShimmer {
      0%   { background-position: -200% 0; }
      100% { background-position:  200% 0; }
    }
    .prod-visual.img-loading,
    .sale-visual.img-loading,
    .na-visual.img-loading {
      background: linear-gradient(90deg,
        var(--c-pale) 25%,
        rgba(200,169,110,0.1) 50%,
        var(--c-pale) 75%);
      background-size: 200% 100%;
      animation: prodShimmer 1.6s ease-in-out infinite;
    }
    .prod-photo {
      opacity: 0;
      transition: opacity 0.5s ease;
    }
    .prod-photo.img-ready {
      opacity: 1;
    }

    /* ─────────────────────────────────────────────────────
       SECTION DIVIDERS — gold seam lines (Part 4.7)
    ───────────────────────────────────────────────────── */
    #stats           { border-top: 1px solid rgba(200,169,110,0.14); }
    #flash-sale      { border-top: 1px solid rgba(200,169,110,0.10); }
    #order           { border-top: 1px solid rgba(200,169,110,0.18); }
    #instagram       { border-top: 1px solid rgba(200,169,110,0.10); }

    /* ─────────────────────────────────────────────────────
       TYPOGRAPHY SCALE — unified clamp() rhythm (Part 4.5)
    ───────────────────────────────────────────────────── */
    /* Primary section headings */
    .sec-h, .sale-h, .order-h {
      font-size: clamp(38px, 5vw, 64px);
    }
    /* Secondary / content headings */
    .ig-h, .story-h {
      font-size: clamp(34px, 4.5vw, 54px);
    }
    /* Editorial panel heading */
    .ed-h {
      font-size: clamp(34px, 4vw, 52px);
    }
    /* Step headings (h3) */
    .step-h {
      font-size: clamp(20px, 2.2vw, 26px);
    }

    /* ─────────────────────────────────────────────────────
       CUSTOM CURSOR — gold ring follower (Part 4.3)
    ───────────────────────────────────────────────────── */
    @media (hover: hover) and (pointer: fine) {
      body, a, button, [href], [role="button"],
      .prod-card, .f-pill, .ig-cell,
      .btn-ol, .btn-solid, .lang-btn, .hamburger { cursor: none; }
      #cursor-ring {
        position: fixed;
        width: 26px;
        height: 26px;
        border: 1.5px solid var(--c-gold);
        border-radius: 50%;
        pointer-events: none;
        z-index: 99998;
        top: 0; left: 0;
        transform: translate(-50%, -50%);
        transition: width 0.22s var(--ease-out),
                    height 0.22s var(--ease-out),
                    border-color 0.22s ease,
                    opacity 0.3s ease;
        opacity: 0;
        will-change: transform;
      }
      #cursor-ring.cursor-visible { opacity: 1; }
      #cursor-ring.cursor-hover {
        width: 40px;
        height: 40px;
        border-color: rgba(201,169,97,0.6);
      }
    }

    /* ─────────────────────────────────────────────────────
       MICRO-INTERACTIONS — focus-visible ring (Part 4.6)
    ───────────────────────────────────────────────────── */
    a:focus-visible, button:focus-visible {
      outline: 2px solid var(--c-gold);
      outline-offset: 3px;
    }

    /* ─────────────────────────────────────────────────────
       SPACING — more breathing room (Part 4.8)
    ───────────────────────────────────────────────────── */
    .section-pad { padding: 128px 0; }
    @media (max-width: 991px) { .section-pad { padding: 88px 0; } }

    /* ─────────────────────────────────────────────────────
       ANNOUNCEMENT BAR
    ───────────────────────────────────────────────────── */
    #announce-bar {
      position: fixed;
      top: 0; left: 0; right: 0;
      height: var(--bar-h);
      background: var(--c-night);
      border-bottom: 1px solid rgba(200,169,110,0.18);
      z-index: 1001;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 56px;
      transition: transform 0.4s var(--ease-out);
    }
    #announce-bar.hidden { transform: translateY(-100%); }
    .ann-text {
      font-family: 'DM Sans', sans-serif;
      font-weight: 300;
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(232,213,163,0.75);
      text-align: center;
      position: absolute;
      left: 0;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      padding: 0 48px;
      pointer-events: none;
    }
    .ann-text strong {
      font-weight: 500;
      color: var(--c-gold);
      letter-spacing: 0.12em;
    }
    /* Mobile gets the short delivery-only line instead of the full
       Instagram+delivery message (which clips on narrow screens) */
    .ann-mobile { display: none; }
    #ann-close {
      position: absolute;
      right: 24px;
      background: none;
      border: none;
      color: rgba(181,201,183,0.4);
      cursor: pointer;
      font-size: 14px;
      line-height: 1;
      padding: 4px 8px;
      transition: color 0.3s;
    }
    #ann-close:hover { color: var(--c-gold); }
    body.bar-gone { --bar-h: 0px; }
    @media (max-width: 767px) {
      #announce-bar { padding: 0 44px; }
      .ann-text { font-size: 9.5px; letter-spacing: 0.12em; white-space: nowrap; overflow: hidden; }
      .ann-full { display: none; }
      .ann-mobile { display: block; }
    }
    /* The full country list ("… · Maqedonia e Veriut") must never clip —
       tighten size/tracking as the bar narrows instead of hiding words */
    @media (max-width: 520px) {
      .ann-text { font-size: 8.5px; letter-spacing: 0.06em; }
    }
    @media (max-width: 430px) {
      .ann-text { font-size: 8px; letter-spacing: 0.03em; }
    }

    /* ─────────────────────────────────────────────────────
       FLASH SALE / EXCLUSIVE DEALS
    ───────────────────────────────────────────────────── */
    #flash-sale {
      background: var(--c-night);
      padding: 112px 0;
      position: relative;
      overflow: hidden;
    }
    #flash-sale::before {
      content: 'Fantazia';
      position: absolute;
      font-family: 'Cormorant Garamond', serif;
      font-weight: 300;
      font-style: italic;
      font-size: clamp(120px, 18vw, 260px);
      color: rgba(200,169,110,0.028);
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      white-space: nowrap;
      pointer-events: none;
      letter-spacing: 0.08em;
      line-height: 1;
    }
    .sale-top-row {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 32px;
      flex-wrap: wrap;
      margin-bottom: 64px;
    }
    .sec-label-light {
      font-family: 'DM Sans', sans-serif;
      font-weight: 300;
      font-size: 10px;
      letter-spacing: 0.26em;
      text-transform: uppercase;
      color: var(--c-mid);
      display: block;
      margin-bottom: 14px;
    }
    .sale-h {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 400;
      font-style: italic;
      font-size: clamp(40px, 5vw, 64px);
      color: var(--c-pgold);
      line-height: 1.0;
    }
    /* Countdown */
    .countdown {
      display: flex;
      align-items: center;
      gap: 8px;
      padding-bottom: 6px;
    }
    .cd-unit { display: flex; flex-direction: column; align-items: center; }
    .cd-num {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 300;
      font-style: italic;
      font-size: clamp(36px, 5vw, 56px);
      color: var(--c-gold);
      line-height: 1;
      min-width: 52px;
      text-align: center;
    }
    .cd-lbl {
      font-family: 'DM Sans', sans-serif;
      font-weight: 200;
      font-size: 8px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: rgba(122,158,126,0.5);
      margin-top: 4px;
    }
    .cd-sep {
      font-family: 'Cormorant Garamond', serif;
      font-size: 32px;
      color: rgba(200,169,110,0.3);
      align-self: flex-start;
      margin-top: 4px;
      line-height: 1;
    }
    /* Sale grid — 3 cols */
    .sale-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 3px;
    }
    .sale-card {
      background: rgba(61,92,66,0.1);
      border: 1px solid rgba(200,169,110,0.08);
      overflow: hidden;
      transition: border-color 0.35s;
    }
    .sale-card:hover { border-color: rgba(200,169,110,0.25); }
    /* Uniform box — photo is contain-fit with a blurred fill behind it
       (see .prod-photo/.prod-photo-bg), so the tall Komplet shots show whole.
       2:3 matches the Komplet photos' own shape (0.63-0.67). */
    .sale-visual {
      aspect-ratio: 2 / 3;
      position: relative;
      overflow: hidden;
    }
    .sale-visual img.prod-photo { z-index: 2; }
    @media (hover: hover) {
      .sale-card:hover .prod-photo { transform: scale(1.04); }
    }
    .sale-pct {
      position: absolute;
      top: 16px; right: 16px;
      z-index: 5;
      font-family: 'Cormorant Garamond', serif;
      font-weight: 500;
      font-style: italic;
      font-size: 28px;
      color: var(--c-pgold);
      line-height: 1;
    }
    .sale-pct::after {
      content: '';
      display: block;
      height: 1px;
      background: rgba(200,169,110,0.3);
      margin-top: 4px;
    }
    .sale-body {
      padding: 24px 24px 28px;
      border-top: 1px solid rgba(200,169,110,0.08);
    }
    .sale-name {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 400;
      font-style: italic;
      font-size: 22px;
      color: var(--c-pgold);
      display: block;
      margin-bottom: 10px;
    }
    /* Special-edition intro line (replaces the old countdown) */
    .sale-sub {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-weight: 400;
      font-size: 18px;
      line-height: 1.65;
      color: rgba(232,213,163,0.6);
      max-width: 380px;
      text-align: right;
      margin: 0;
    }
    /* What each bridal set contains */
    .set-items {
      display: block;
      font-family: 'DM Sans', sans-serif;
      font-weight: 300;
      font-size: 9px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      line-height: 2;
      color: rgba(122,158,126,0.75);
      margin-bottom: 20px;
    }
    .sale-price-row {
      display: flex;
      align-items: baseline;
      gap: 10px;
      margin-bottom: 20px;
    }
    .sale-price-new {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 500;
      font-size: 22px;
      color: var(--c-gold);
    }
    .sale-price-was {
      font-family: 'DM Sans', sans-serif;
      font-weight: 300;
      font-size: 13px;
      color: rgba(122,158,126,0.4);
      text-decoration: line-through;
    }
    .sale-btn {
      display: block;
      text-align: center;
      padding: 13px;
      font-family: 'DM Sans', sans-serif;
      font-weight: 400;
      font-size: 9px;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: var(--c-gold);
      text-decoration: none;
      border: 1px solid rgba(200,169,110,0.25);
      transition: background 0.35s, color 0.35s;
    }
    .sale-btn:hover { background: var(--c-gold); color: var(--c-night); }
    @media (max-width: 991px) {
      .sale-grid { grid-template-columns: 1fr; gap: 20px; }
      .sale-top-row { flex-direction: column; align-items: flex-start; }
      .sale-sub { text-align: left; max-width: 100%; }
    }

    /* ─────────────────────────────────────────────────────
       NEW ARRIVALS
    ───────────────────────────────────────────────────── */
    #new-arrivals {
      padding: 112px 0;
      background: var(--c-linen);
      position: relative;
      overflow: hidden;
    }
    .na-track {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 3px;
      margin-top: 56px;
    }
    .na-card {
      position: relative;
      overflow: hidden;
      cursor: pointer;
    }
    /* Uniform box — photo contain-fit over its own blurred fill layer.
       21:20 ≈ the shape of all four bestseller photos (1.05-1.16). */
    .na-visual {
      aspect-ratio: 21 / 20;
      position: relative;
      overflow: hidden;
    }
    @media (hover: hover) {
      .na-card:hover .prod-photo { transform: scale(1.05); }
    }
    .na-body {
      padding: 20px 20px 24px;
      background: var(--c-linen);
      border-top: 1px solid rgba(181,201,183,0.35);
    }
    .na-name {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 400;
      font-style: italic;
      font-size: 20px;
      color: var(--c-sage);
      display: block;
      margin-bottom: 4px;
      letter-spacing: 0.02em;
    }
    .na-price {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 500;
      font-size: 16px;
      color: var(--c-gold);
      display: block;
    }
    .na-hover-cta {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      background: rgba(28,43,30,0.92);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      padding: 16px;
      text-align: center;
      font-family: 'DM Sans', sans-serif;
      font-weight: 400;
      font-size: 9px;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: var(--c-pgold);
      text-decoration: none;
      transform: translateY(100%);
      transition: transform 0.4s var(--ease-out);
    }
    .na-card:hover .na-hover-cta,
    .na-card:focus-within .na-hover-cta { transform: translateY(0); }
    /* Touch devices: the CTA bar stays tucked away exactly like desktop
       at rest (user request — same as the desktop hover). Tapping the
       photo opens the lightbox, which carries the same order button. */
    /* On large desktops the arrivals track bleeds slightly past the
       container — noticeably bigger cards, editorial full-bleed feel,
       while section headings stay aligned with the rest of the site.
       (min-width guard: 1280px container + 2×44px bleed + margins) */
    @media (min-width: 1400px) {
      .na-track { margin-left: -44px; margin-right: -44px; }
    }
    @media (max-width: 991px) {
      .na-track {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    @media (max-width: 575px) {
      .na-track {
        display: flex;
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
        touch-action: pan-x pan-y;
        scrollbar-width: none;
        gap: 3px;
        padding-bottom: 8px;
      }
      /* Same pre-reveal fix for new-arrivals slider cards */
      .na-track .reveal,
      .na-track .reveal-left {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
      }
      .na-track::-webkit-scrollbar { display: none; }
      .na-card {
        flex: 0 0 82vw;
        scroll-snap-align: start;
        scroll-snap-stop: always;
      }
      /* The last card can never align its START edge (the track runs out
         of scroll room 18vw early), so mandatory snapping used to yank it
         back — the "pop" at the end of the slider. End-alignment gives it
         a reachable snap point flush with the right edge. */
      .na-card:last-child { scroll-snap-align: end; }
    }

    /* ─────────────────────────────────────────────────────
       PRELOADER
    ───────────────────────────────────────────────────── */
    #preloader {
      position: fixed;
      inset: 0;
      z-index: 99999;
      background: var(--c-night);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 0;
      transition: opacity 0.8s ease, visibility 0.8s ease;
    }
    #preloader.pl-done { opacity: 0; visibility: hidden; pointer-events: none; }

    /* Ornamental ring */
    .pl-ring {
      position: absolute;
      width: min(340px, 72vw);
      height: min(340px, 72vw);
      border-radius: 50%;
      border: 1px solid rgba(200,169,110,0.1);
      animation: plRingSpin 12s linear infinite;
    }
    .pl-ring::before {
      content: '';
      position: absolute;
      top: -3px; left: 50%;
      transform: translateX(-50%);
      width: 5px; height: 5px;
      background: var(--c-gold);
      border-radius: 50%;
      box-shadow: 0 0 12px rgba(200,169,110,0.7);
    }
    .pl-ring2 {
      position: absolute;
      width: min(260px, 56vw);
      height: min(260px, 56vw);
      border-radius: 50%;
      border: 1px solid rgba(200,169,110,0.05);
      animation: plRingSpin 20s linear infinite reverse;
    }
    @keyframes plRingSpin { to { transform: rotate(360deg); } }

    .pl-inner {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .pl-logo {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 300;
      font-style: italic;
      font-size: clamp(62px, 10vw, 100px);
      color: var(--c-pgold);
      letter-spacing: 0.12em;
      line-height: 1;
      opacity: 0;
      animation: plFadeUp 0.7s ease 0.25s forwards;
    }
    .pl-line {
      height: 1px;
      width: 0;
      background: linear-gradient(to right, transparent, var(--c-gold), transparent);
      margin: 22px 0 18px;
      animation: plLineGrow 0.9s cubic-bezier(0.4,0,0.2,1) 0.6s forwards;
    }
    /* Rotating tagline — five short messages, one per second, looping.
       A single shared keyframe + staggered per-child delays (the standard
       CSS round-robin trick) keeps this pure-CSS, no JS timer needed.
       Absolute-positioned children never affect the container's layout,
       so .pl-diamond below always sits the same distance away regardless
       of which message is showing. */
    .pl-rotator {
      position: relative;
      height: 13px;
      /* All children are position:absolute, so this box has no natural
         width of its own — without stretching it to match its flex
         siblings (the FANTAZIA wordmark), it collapses to 0 width and
         text-align:center on the messages inside becomes meaningless
         (they render left-anchored instead of centered). */
      align-self: stretch;
    }
    .pl-msg {
      position: absolute;
      inset: 0;
      text-align: center;
      font-family: 'DM Sans', sans-serif;
      font-weight: 200;
      font-size: 9px;
      letter-spacing: 0.34em;
      text-transform: uppercase;
      color: rgba(122,158,126,0.5);
      white-space: nowrap;
      opacity: 0;
      animation: plMsgCycle 5s ease-in-out infinite;
    }
    .pl-msg:nth-child(1) { animation-delay: 1.0s; }
    .pl-msg:nth-child(2) { animation-delay: 2.0s; }
    .pl-msg:nth-child(3) { animation-delay: 3.0s; }
    .pl-msg:nth-child(4) { animation-delay: 4.0s; }
    .pl-msg:nth-child(5) { animation-delay: 5.0s; }
    @keyframes plMsgCycle {
      0%        { opacity: 0; transform: translateY(3px); }
      2%        { opacity: 1; transform: translateY(0); }
      18%       { opacity: 1; transform: translateY(0); }
      20%, 100% { opacity: 0; transform: translateY(-3px); }
    }
    @media (prefers-reduced-motion: reduce) {
      .pl-msg { animation: none !important; opacity: 0 !important; }
      .pl-msg:first-child { opacity: 1 !important; }
    }
    /* The longest rotating message ("Bizhuteri Tradicionale Shqiptare" /
       "Traditional Albanian Jewellery") clips past the viewport edge on
       the smallest phones at the base 9px/0.34em tracking — tighten it. */
    @media (max-width: 480px) {
      .pl-msg { font-size: 7.5px; letter-spacing: 0.10em; }
    }
    .pl-diamond {
      width: 7px; height: 7px;
      border: 1px solid rgba(200,169,110,0.5);
      transform: rotate(45deg);
      margin-top: 28px;
      opacity: 0;
      animation: plFadeUp 0.5s ease 1.2s forwards;
    }
    @keyframes plFadeUp {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes plLineGrow { to { width: 180px; } }

    /* ─────────────────────────────────────────────────────
       PRODUCT CARD — PREMIUM OVERRIDES
    ───────────────────────────────────────────────────── */
    /* No border-top on body — let the bg color transition suffice */
    .prod-body { padding: 26px 24px 0; border-top: none; }
    /* Stack name → price vertically */
    .prod-row1 {
      display: block;
      margin-bottom: 0;
      padding-bottom: 18px;
      border-bottom: 1px solid rgba(181,201,183,0.18);
    }
    .prod-name { display: block; font-size: 23px; margin-bottom: 7px; }
    .prod-price-wrap { display: block; }
    /* Hide redundant category label */
    .prod-cat { display: none; }
    /* Button: no side/bottom borders — only top separator */
    .prod-btn {
      border-left: none;
      border-right: none;
      border-bottom: none;
      border-top: 1px solid rgba(181,201,183,0.18);
      padding: 15px 24px;
    }
    /* Gold bottom accent sweep on hover */
    .prod-card::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 2px;
      background: var(--c-gold);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.5s var(--ease-out);
      z-index: 10;
    }
    @media (hover: hover) {
      .prod-card:hover::after { transform: scaleX(1); }
    }
    /* Gold shimmer sweep across visual */
    @keyframes shimmerSweep {
      from { left: -80%; }
      to   { left: 140%; }
    }
    .prod-visual::before {
      content: '';
      position: absolute;
      top: 0; bottom: 0;
      left: -80%; width: 55%;
      background: linear-gradient(to right, transparent, rgba(200,169,110,0.07), transparent);
      transform: skewX(-15deg);
      pointer-events: none;
      z-index: 4;
    }
    @media (hover: hover) {
      .prod-card:hover .prod-visual::before {
        animation: shimmerSweep 0.9s ease-out forwards;
      }
    }

    /* ─────────────────────────────────────────────────────
       FLOATING INSTAGRAM CTA
    ───────────────────────────────────────────────────── */
    #ig-float {
      position: fixed;
      bottom: 28px; left: 28px;
      z-index: 900;
      display: flex;
      align-items: center;
      gap: 10px;
      background: rgba(28,43,30,0.92);
      border: 1px solid rgba(200,169,110,0.28);
      padding: 12px 20px 12px 14px;
      text-decoration: none;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      opacity: 0;
      transform: translateY(8px);
      pointer-events: none;
      transition: opacity 0.4s, transform 0.4s, background 0.35s, border-color 0.35s;
    }
    #ig-float.show { opacity: 1; transform: none; pointer-events: auto; }
    #ig-float:hover { background: rgba(28,43,30,1); border-color: rgba(200,169,110,0.6); }
    #ig-float svg { width: 18px; height: 18px; fill: none; stroke: var(--c-gold); flex-shrink: 0; }
    .ig-float-text {
      display: flex;
      flex-direction: column;
      line-height: 1.1;
    }
    .ig-float-top {
      font-family: 'DM Sans', sans-serif;
      font-weight: 200;
      font-size: 8px;
      letter-spacing: 0.26em;
      text-transform: uppercase;
      color: rgba(122,158,126,0.65);
    }
    .ig-float-main {
      font-family: 'DM Sans', sans-serif;
      font-weight: 400;
      font-size: 10px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--c-pgold);
    }
    @media (max-width: 575px) {
      #ig-float { padding: 10px 16px 10px 12px; }
      .ig-float-top { display: none; }
    }

    /* ─────────────────────────────────────────────────────
       PREMIUM — SIGNATURE DETAILS
    ───────────────────────────────────────────────────── */


    /* Hero right panel — editorial watermark */
    .hero-wm {
      position: absolute;
      font-family: 'Cormorant Garamond', serif;
      font-weight: 700;
      font-style: italic;
      font-size: clamp(68px, 9.5vw, 144px);
      color: rgba(200,169,110,0.038);
      letter-spacing: -0.02em;
      pointer-events: none;
      user-select: none;
      white-space: nowrap;
      line-height: 1;
      top: 50%;
      left: 50%;
      /* --pwx/--pwy are set by the mouse-parallax script; they compose with
         the centering translate instead of overwriting it */
      transform: translate(calc(-50% + var(--pwx, 0px)), calc(-50% + var(--pwy, 0px)));
      z-index: 0;
    }

    /* Brand name block — mobile only */
    .hbn { display: none; }


    /* Catalog piece numbers — rendered once JS sets data-piece */
    #pgrid .prod-body::before {
      content: 'No.' attr(data-piece);
      display: block;
      font-family: 'DM Sans', sans-serif;
      font-weight: 200;
      font-size: 8px;
      letter-spacing: 0.32em;
      color: rgba(200,169,110,0.33);
      padding-top: 4px;
      margin-bottom: 10px;
    }

    /* ─────────────────────────────────────────────────────
       COOKIE BANNER — mobile fix
    ───────────────────────────────────────────────────── */
    @media (max-width: 767px) {
      #cookie-bar {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 20px 20px 24px !important;
        gap: 14px !important;
      }
      #cookie-bar button {
        width: 100%;
        text-align: center;
      }
    }

    /* ─────────────────────────────────────────────────────
       LEGACY BROWSER FALLBACKS (no aspect-ratio: iOS ≤14 etc.)
    ───────────────────────────────────────────────────── */
    @supports not (aspect-ratio: 1 / 1) {
      .ig-cell { height: 240px; }
      .hero-art { height: 440px; }
      /* Product/NA/sale boxes hold absolute-positioned photos — without
         aspect-ratio support they'd collapse to zero height */
      .prod-visual, .na-visual { height: 320px; }
      .sale-visual { height: 480px; }
    }

    /* ─────────────────────────────────────────────────────
       ACCESSIBILITY — reduced motion
    ───────────────────────────────────────────────────── */
    @media (prefers-reduced-motion: reduce) {
      .hero-eyebrow, .hero-rule, .hero-h1a, .hero-h1b,
      .hero-sub, .hero-cta, .hero-shipping-note, .hbn {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
      }
      .ha-ring-svg  { animation: none !important; transform: none !important; }
      .ha-sweep::after { animation: none !important; }
      .hero-glow    { animation: none !important; opacity: 0.65 !important; }
      .hs           { animation: none !important; opacity: 0 !important; }
      .hero-img.img-ready { animation: none !important; }
      .btn-ol::before { transition: none; }
    }

    /* ═══════════════════════════════════════════════════════════
       PREMIUM UPGRADE — VISUAL ELEVATION
    ═══════════════════════════════════════════════════════════ */

    /* ── Stats: restored to original (bottom tightened per user ask) ── */
    #stats { padding: 72px 0 48px; }
    .stat-item {
      padding: 40px 24px;
      border-right: 1px solid rgba(181,201,183,0.5);
      border-bottom: none;
    }
    .stat-item::after { display: none; }
    .stat-item:last-child { border-right: none; }
    .stat-num {
      font-size: 68px;
      font-weight: 400;
      letter-spacing: -0.01em;
      line-height: 1;
      color: var(--c-sage);
    }
    .stat-lbl {
      letter-spacing: 0.28em;
      margin-top: 14px;
      font-size: 9px;
      color: var(--c-muted);
    }


    /* ── Countdown: hidden (countdown timers are un-luxury) ── */
    #cdWrap { display: none !important; }
    .sale-top-row { justify-content: flex-start; }

    /* ── Section label luxury tracking ── */
    .sec-label, .sec-label-light, .order-label, .story-label,
    .ig-label { letter-spacing: 0.36em; }


    /* ── Body copy: luxury leading throughout ── */
    .hero-sub, .ed-body, .step-t,
    .story-p { line-height: 2.2; }

    /* ── Editorial watermark: more dramatic ── */
    .ed-wm { font-size: 210px; }

    /* ── Section breathing room ── */
    .section-pad  { padding: 160px 0; }
    #flash-sale   { padding: 140px 0; }
    #new-arrivals { padding: 140px 0; }
    .footer-top   { padding-top: 72px; }
    @media (max-width: 991px) {
      .section-pad  { padding: 100px 0; }
      #flash-sale   { padding: 88px 0; }
      #new-arrivals { padding: 88px 0; }
    }

    /* ── Step numbers & headings: more presence ── */
    .step-n { font-size: 30px; }
    .step-h { font-size: clamp(22px, 2.5vw, 30px); }
    .step-n-circle { width: 62px; height: 62px; }

    /* ── New Arrivals card name size ── */
    .na-name { font-size: 22px; }

    /* ── Flash sale card body ── */
    .sale-name { font-size: 24px; letter-spacing: 0.01em; }
    .sale-body { padding: 28px 28px 32px; }

    /* ── Product name size boost ── */
    .prod-name { font-size: 25px; }

    /* ── Reveal animation: slower, more cinematic ── */
    .reveal {
      transition: opacity 1.0s var(--ease-out), transform 1.0s var(--ease-out);
    }
    .reveal-left {
      transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
    }

    /* ── Marquee: slow down slightly for premium feel ── */
    .marquee-track { animation-duration: 55s; }

    /* ── Editorial split headings: bigger, more commanding ── */
    .ed-h { font-size: clamp(42px, 5.5vw, 72px); }
    .ed-col { padding: 96px 80px; }
    @media (max-width: 991px) { .ed-col { padding: 64px 40px; } }

    /* ── Story section: more breathing room ── */
    #story    { padding: 0; }
    .story-right { padding: 108px 96px; }
    @media (max-width: 991px) {
      .story-right { padding: 64px 36px; }
    }

    /* ── Instagram section ── */
    #instagram { padding: 140px 0 120px; }
    .ig-h { font-size: clamp(40px, 5.5vw, 68px); }
    @media (max-width: 991px) { #instagram { padding: 88px 0 72px; } }

    /* ── Prod card button: more premium spacing ── */
    .prod-btn { padding: 18px 24px; font-size: 8.5px; letter-spacing: 0.28em; }

    /* ── Gold rules: slightly wider ── */
    .gold-rule { width: 64px; }

    /* ── Instagram placeholder cells: gradient backgrounds ── */
    .ig-c1 .ig-inner { background: linear-gradient(135deg, #1A3020 0%, #2D4A35 100%); }
    .ig-c2 .ig-inner { background: linear-gradient(135deg, #222F22 0%, #3A4E30 100%); }
    .ig-c3 .ig-inner { background: linear-gradient(145deg, #D8CEBC 0%, #EAE0CE 100%); }
    .ig-c4 .ig-inner { background: linear-gradient(135deg, #7A5A2A 0%, #A07A40 100%); }
    .ig-c5 .ig-inner { background: linear-gradient(135deg, #1F3220 0%, #2E4830 100%); }
    .ig-c6 .ig-inner { background: linear-gradient(145deg, #141E14 0%, #243024 100%); }

    /* ── Floating Instagram CTA: more presence ── */
    #ig-float { border-radius: 0; }

    /* ── Order steps: more presence ── */
    #order .gold-rule { margin: 28px 0 0; }

    /* ── Section headings: slightly wider tracking ── */
    .sec-h, .sale-h, .order-h, .ig-h, .story-h {
      letter-spacing: 0.005em;
    }

    /* ═══════════════════════════════════════════════════════════
       PREMIUM UPGRADE — PHASE 2: EDITORIAL DEPTH & FINISH
    ═══════════════════════════════════════════════════════════ */

    /* ── New Arrivals: asymmetric editorial layout on desktop ── */
    @media (min-width: 992px) {
      .na-track {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
      }
      .na-card:first-child {
        grid-column: 1;
        grid-row: 1 / 3;
        display: flex;
        flex-direction: column;
      }
      .na-card:first-child .na-visual {
        display: flex;
        align-items: center;
      }
      .na-card:nth-child(2) { grid-column: 2; grid-row: 1; }
      .na-card:nth-child(3) { grid-column: 2; grid-row: 2; }
      .na-card:nth-child(4) { display: none; }
    }

    /* ── Editorial Split: position for pseudo + diagonal gold line ── */
    .editorial-split { position: relative; }
    .editorial-split::before {
      content: '';
      position: absolute;
      left: calc(58% - 0.5px);
      top: 0; bottom: 0;
      width: 1px;
      background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(200,169,110,0.42) 15%,
        rgba(200,169,110,0.64) 50%,
        rgba(200,169,110,0.42) 85%,
        transparent 100%
      );
      transform: rotate(3deg);
      transform-origin: center center;
      z-index: 10;
      pointer-events: none;
    }
    @media (max-width: 991px) {
      .editorial-split::before { display: none; }
    }

    /* ── Footer: brand name watermark ── */
    #footer { position: relative; overflow: hidden; }
    .footer-top    { position: relative; z-index: 1; }
    .footer-bottom { position: relative; z-index: 1; }
    #footer::before {
      content: 'Fantazia';
      position: absolute;
      font-family: 'Cormorant Garamond', serif;
      font-weight: 300;
      font-style: italic;
      font-size: clamp(80px, 13vw, 190px);
      color: rgba(200,169,110,0.03);
      bottom: 10px;
      right: -8px;
      pointer-events: none;
      user-select: none;
      letter-spacing: 0.08em;
      line-height: 1;
      z-index: 0;
      white-space: nowrap;
    }

    /* ── Marquee: soft edge-fade for premium feel ── */
    .marquee-wrap {
      -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 7%,
        black 93%,
        transparent 100%
      );
      mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 7%,
        black 93%,
        transparent 100%
      );
    }

    /* ── Story split: gold divider between visual and text panels ── */
    .story-split { position: relative; }
    .story-split::before {
      content: '';
      position: absolute;
      left: 38%;
      top: 0; bottom: 0;
      width: 1px;
      background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(200,169,110,0.3) 15%,
        rgba(200,169,110,0.5) 50%,
        rgba(200,169,110,0.3) 85%,
        transparent 100%
      );
      z-index: 10;
      pointer-events: none;
    }
    @media (max-width: 991px) {
      .story-split::before { display: none; }
    }

    /* ── Story SVG art: fill more of the panel ── */
    .story-art svg {
      width: min(340px, 76%);
      height: auto;
    }

    /* ── Story blockquote: more commanding weight ── */
    .story-bq { margin: 40px 0; padding-left: 28px; }
    .story-bq p { font-size: 22px; line-height: 1.6; }

    /* ── Section seam accents: thin gold top borders ── */
    #stats      { border-top: 1px solid rgba(200,169,110,0.13); border-bottom: 1px solid rgba(200,169,110,0.13); }
    #flash-sale { border-top: 1px solid rgba(200,169,110,0.10); }
    #order      { border-top: 1px solid rgba(200,169,110,0.08); }

    /* ── New Arrivals: more refined card body ── */
    .na-body { padding: 22px 26px 30px; }

    /* ── Gold rules: generous, consistent width ── */
    .gold-rule { width: 72px; }

    /* ── Filter pills: tighter, more editorial spacing ── */
    .f-pill { letter-spacing: 0.22em; font-size: 9.5px; }

    /* ── Tablet new arrivals: 2-col for clean look ── */
    @media (min-width: 768px) and (max-width: 991px) {
      .na-track { grid-template-columns: repeat(2, 1fr); }
    }

    /* ═══════════════════════════════════════════════════════════
       PREMIUM UPGRADE — PHASE 3: LAYOUT & MOBILE
    ═══════════════════════════════════════════════════════════ */

    /* ── New Arrivals: revert to 4-column row per user request ── */
    @media (min-width: 992px) {
      .na-track {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: auto;
        gap: 3px;
      }
      .na-card:first-child {
        grid-column: auto;
        grid-row: auto;
        display: block;
      }
      .na-card:first-child .na-visual {
        flex: unset;
        display: block;
      }
      .na-card:nth-child(2) { grid-column: auto; grid-row: auto; }
      .na-card:nth-child(3) { grid-column: auto; grid-row: auto; }
      .na-card:nth-child(4) { display: block; }
    }

    /* ── Filter bar: horizontal scroll on mobile instead of wrapping ── */
    @media (max-width: 991px) {
      .filter-bar {
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 10px;
        margin-bottom: 8px;
        gap: 5px;
      }
      .filter-bar::-webkit-scrollbar { display: none; }
      .f-pill { flex-shrink: 0; }
    }

    /* ── Bestseller pill: gold accent to distinguish it ── */
    .f-pill[data-f="bestseller"] {
      border-color: rgba(200,169,110,0.5);
      color: var(--c-gold);
    }
    .f-pill[data-f="bestseller"]:hover {
      background: rgba(200,169,110,0.08);
      border-color: var(--c-gold);
      color: var(--c-gold);
    }
    .f-pill[data-f="bestseller"].on {
      background: var(--c-gold);
      color: var(--c-night);
      border-color: var(--c-gold);
    }

    /* ── Product section: phone refinements ── */
    @media (max-width: 575px) {
      #collection .sec-h  { font-size: clamp(28px, 9vw, 42px); }
      #collection .sec-sub { font-size: 12px; line-height: 1.85; }
      .filter-bar { gap: 6px; padding-bottom: 12px; margin-bottom: 4px; }
      .f-pill {
        padding: 9px 18px;
        font-size: 8.5px;
        letter-spacing: 0.2em;
        border-color: rgba(181,201,183,0.45);
        border-radius: 1px;
      }
      .f-pill.on {
        background: var(--c-sage);
        color: var(--c-pgold);
        border-color: var(--c-sage);
        box-shadow: 0 2px 8px rgba(31,58,38,0.28);
      }
    }

    /* ── Mobile: flash sale cards stack naturally ── */
    @media (max-width: 575px) {
      .sale-grid { grid-template-columns: 1fr; }
      .sale-body { padding: 22px 20px 26px; }
      .sale-name { font-size: 20px; }
    }

    /* ── Mobile: story section ── */
    @media (max-width: 575px) {
      .story-left { min-height: 240px; }
      .story-right { padding: 44px 24px; }
      .story-h { font-size: clamp(26px, 8vw, 38px); }
      .story-bq p { font-size: 18px; }
    }

    /* ── Mobile: instagram section ── */
    @media (max-width: 575px) {
      #instagram { padding: 72px 0 56px; }
      .ig-h { font-size: clamp(28px, 9vw, 40px); }
    }

    /* ── Mobile: order section ── */
    @media (max-width: 575px) {
      #order { padding: 72px 0; }
      .step-n-circle { width: 50px; height: 50px; }
      .step-n { font-size: 24px; }
      .step-h { font-size: clamp(18px, 5vw, 24px); }
    }

    /* ── Mobile: footer ── */
    @media (max-width: 575px) {
      .footer-top { padding: 44px 0 36px; }
    }

    /* ── Product featured card: first + big, explicit desktop ── */
    @media (min-width: 992px) {
      #pgrid .prod-card--featured {
        grid-column: 1 / span 2 !important;
        grid-row: 1 !important;
      }
    }

    /* ── Card boxes keep the SAME aspect ratio at every breakpoint
          (square products, 3:2 featured, 21:20 arrivals, 2:3 sets) —
          photos are contain-fit over a blurred self-background, so no
          box shape ever crops the product. Heights follow the grid
          column width automatically. ── */
    @media (max-width: 991px) {
      /* Sale cards stack to one column here — cap their width so the
         2:3 visual doesn't blow up to full viewport width. */
      .sale-card { width: 100%; max-width: 480px; margin: 0 auto; }
    }

    @media (max-width: 575px) {
      /* Card typography scaled for half-width cards */
      .prod-name { font-size: 17px; margin-bottom: 4px; }
      #pgrid .prod-body::before { margin-bottom: 6px; letter-spacing: 0.26em; }
      .prod-btn { padding: 12px 8px; font-size: 8px; letter-spacing: 0.18em; }
    }

    /* ══════════════════════════════════════════════════════════════
       HERO PREMIUM UPGRADE — Editorial split phone, full-screen all
       ══════════════════════════════════════════════════════════════ */

    /*
      PHONE LAYOUT — ULTRA PREMIUM:
        hero-right (crown photo) → top 60%, photo stays clean, only a tight
                                   20% fade at the very base of the image
        hero-left  (dark panel)  → bottom 46%, diagonal cut, LEFT-aligned
        Hierarchy: pre-mark accent → BIZHUTERIA / FANTAZIA → rule → tagline → CTA
    */
    @media (max-width: 575px) {
      #hero { height: 100vh; height: 100svh; min-height: 620px; }
      .hero-wrap { aspect-ratio: unset !important; height: 100% !important; min-height: 0 !important; }

      /* Photo: full bleed */
      .hero-right {
        top: 0 !important; bottom: 0 !important;
        left: 0 !important; right: 0 !important;
        width: 100% !important; height: 100% !important;
        clip-path: none !important;
      }
      .hero-img {
        /* This <picture> source is the canvas-extended photo (see hero-mobile.jpg) —
           its own shape is already taller/narrower than any real phone, so cover
           now only ever crops into the added background padding, never the crown. */
        object-fit: cover !important;
        object-position: 50% 40% !important;
        filter: contrast(1.06) saturate(1.05) brightness(0.88) !important;
      }
      /* Subtle top vignette — frames the crown, status bar stays readable.
         mix-blend-mode must reset to normal: the base ::before uses screen
         blending (noise texture), which erases dark gradients entirely */
      .hero-right::before {
        display: block !important; content: '' !important;
        position: absolute;
        top: 0; left: 0; right: 0; height: 22%;
        background: linear-gradient(to bottom, rgba(13,24,16,0.52) 0%, transparent 100%);
        mix-blend-mode: normal !important;
        z-index: 2; pointer-events: none;
      }
      /* Rich bottom fade — content zone is clearly dark and readable */
      .hero-right::after {
        display: block !important; content: '' !important;
        position: absolute;
        bottom: 0; left: 0; right: 0; height: 62%;
        background: linear-gradient(
          to top,
          rgba(13,24,16,0.98) 0%,
          rgba(13,24,16,0.94) 14%,
          rgba(13,24,16,0.80) 30%,
          rgba(13,24,16,0.52) 50%,
          rgba(13,24,16,0.18) 72%,
          transparent 100%
        );
        z-index: 3; pointer-events: none;
      }
      .hero-frame { display: none !important; }

      /* All content together at the bottom — centred, no tricks */
      .hero-left {
        top: auto !important; bottom: 0 !important;
        left: 0 !important; right: 0 !important;
        height: auto !important; min-height: 0 !important;
        overflow: visible !important;
        display: flex !important; flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center !important;
        text-align: center !important;
        padding: 0 24px 52px !important;
        background: transparent !important;
        clip-path: none !important;
        z-index: 4 !important;
      }
      .hero-left::before { display: none !important; }
      .hero-left::after  { display: none !important; }

      /* Brand name block — enters first, leading the choreography */
      .hbn {
        display: flex !important; flex-direction: column !important;
        align-items: center !important; gap: 0 !important;
        margin-bottom: 0 !important;
        animation: heroSlideUp 0.8s var(--ease-out) 0.15s both;
      }
      .hbn::before { display: none !important; }
      /* BIZHUTERIA — delicate whisper above */
      .hbn-1 {
        font-family: 'Cormorant Garamond', serif !important;
        font-size: 12px !important; font-weight: 300 !important;
        font-style: normal !important; letter-spacing: 0.42em !important;
        line-height: 1.2 !important; color: rgba(237,219,168,0.52) !important;
        text-align: center !important;
      }
      /* FANTAZIA — the monument; clamp keeps it inside 320px screens */
      .hbn-2 {
        font-family: 'Cormorant Garamond', serif !important;
        font-size: clamp(46px, 16vw, 60px) !important; font-weight: 700 !important;
        font-style: italic !important; letter-spacing: 0.02em !important;
        line-height: 1 !important; color: var(--c-gold) !important;
        text-align: center !important;
      }

      /* Eyebrow hidden — removes visual noise */
      .hero-eyebrow { display: none !important; }

      /* Rule: short centred gold line */
      .hero-rule {
        display: block !important;
        width: 36px !important; height: 1px !important;
        background: rgba(200,169,110,0.48) !important;
        border: none !important; margin: 20px auto 20px !important;
      }

      /* Tagline — centred, both lines visible */
      .hero-h1a {
        display: block !important;
        font-family: 'Cormorant Garamond', serif !important;
        font-size: clamp(21px, 6.4vw, 25px) !important; font-style: italic !important;
        font-weight: 400 !important; line-height: 1.38 !important;
        letter-spacing: 0.01em !important; text-align: center !important;
        color: rgba(237,219,168,0.94) !important;
      }
      .hero-h1b {
        display: block !important;
        font-family: 'Cormorant Garamond', serif !important;
        font-size: clamp(17px, 5.2vw, 20px) !important; font-style: italic !important;
        font-weight: 400 !important; line-height: 1.38 !important;
        letter-spacing: 0.01em !important; text-align: center !important;
        color: rgba(237,219,168,0.68) !important;
      }

      .hero-sub { display: none !important; }
      .hero-cta {
        margin-top: 28px !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
      }
      /* Comfortable thumb target (~48px tall) with a faint gold fill so the
         primary action reads clearly against the photo */
      .hero-cta .btn-ol {
        padding: 17px 48px !important; min-width: 0 !important;
        min-height: 48px !important;
        font-size: 10px !important; letter-spacing: 0.28em !important;
        background: rgba(200,169,110,0.10) !important;
        border-color: rgba(200,169,110,0.55) !important;
        color: rgba(237,219,168,0.95) !important;
      }
      .hero-shipping-note { display: none !important; }
      .hero-link2 { display: none !important; }
      .hero-wm { display: none !important; }
    }

    /* ── Tablet (576px–991px): Full-screen, gradient overlay ── */
    @media (min-width: 576px) and (max-width: 991px) {
      #hero {
        height: 100vh;
        height: 100svh;
        min-height: 600px;
      }
      .hero-wrap {
        aspect-ratio: unset !important;
        height: 100%;
      }
      /* Same shape-matched extended photo as the phone tier — cover is safe here too. */
      .hero-img { object-fit: cover !important; object-position: 50% 40% !important; }
      .hero-left {
        padding: 0 44px 68px !important;
        background: linear-gradient(
          to top,
          rgba(13,24,16,0.97) 0%,
          rgba(13,24,16,0.86) 18%,
          rgba(13,24,16,0.46) 38%,
          rgba(13,24,16,0.10) 56%,
          transparent 70%
        ) !important;
      }
      .hero-left::after {
        display: block !important;
        content: '';
        position: absolute;
        left: 22px; top: 15%; bottom: 36%; width: 1px;
        background: linear-gradient(to bottom,
          transparent, rgba(200,169,110,0.40) 35%,
          rgba(200,169,110,0.40) 65%, transparent);
      }
      .hero-left::before { display: none !important; }
      .hero-frame { display: none !important; }
      .hero-h1a { font-size: clamp(42px, 7vw, 62px) !important; }
      .hero-h1b { font-size: clamp(24px, 4vw, 36px) !important; }
      .hero-eyebrow {
        color: rgba(200,169,110,0.76) !important;
        letter-spacing: 0.30em !important;
      }
      .hero-rule { width: 56px !important; margin: 20px 0 !important; }
      .hero-sub { font-size: 13px !important; color: rgba(237,219,168,0.64) !important; }
      .hero-cta { margin-top: 28px !important; }
      .hero-shipping-note {
        display: flex !important;
        font-size: 9px !important;
        color: rgba(255,248,230,0.34) !important;
      }
      .hero-wm { display: none !important; }
    }

    /* ── Desktop: Finishing touches ── */
    @media (min-width: 992px) {
      .ha-orbit1 { border-color: rgba(200,169,110,0.20) !important; }
      .hero-eyebrow { color: rgba(200,169,110,0.62) !important; }
      .hero-h1a { text-shadow: 0 0 100px rgba(200,169,110,0.22) !important; }
      .hero-h1b { text-shadow: 0 0 80px rgba(200,169,110,0.28) !important; }
    }

    /* ═══════════════════════════════════════════════════════════
       PREMIUM MICRO-INTERACTIONS — FINAL LAYER
       (all additive; safe to remove as a block)
    ═══════════════════════════════════════════════════════════ */

    /* ── Gold reading-progress line across the very top ── */
    #scroll-progress {
      position: fixed;
      top: 0; left: 0;
      height: 2px;
      width: 0%;
      background: linear-gradient(to right, var(--c-bronze), var(--c-gold), var(--c-pgold));
      z-index: 1002;
      pointer-events: none;
    }

    /* ── Keyboard skip link — hidden until focused ── */
    .skip-link {
      position: fixed;
      top: -64px; left: 16px;
      z-index: 10000;
      background: var(--c-night);
      color: var(--c-pgold);
      font-family: 'DM Sans', sans-serif;
      font-weight: 400;
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      padding: 12px 22px;
      text-decoration: none;
      border: 1px solid rgba(200,169,110,0.5);
      transition: top 0.25s ease;
    }
    .skip-link:focus { top: 12px; }

    /* ── Hero photo: slow cinematic settle after fade-in, then a barely
          perceptible float. The float starts exactly when the settle ends
          and keeps a 1.2% overscale so cover-fit edges never peek. ── */
    @media (prefers-reduced-motion: no-preference) {
      @keyframes heroSettle {
        from { transform: scale(1.06); }
        to   { transform: scale(1); }
      }
      @keyframes heroFloat {
        0%, 100% { transform: translateY(0) scale(1); }
        50%      { transform: translateY(-6px) scale(1.012); }
      }
      .hero-img.img-ready {
        animation:
          heroSettle 6.5s var(--ease-out) both,
          heroFloat 14s ease-in-out 6.5s infinite;
      }
    }

    /* ── Product filter: soft fade when switching category ── */
    @keyframes filterFade {
      from { opacity: 0; transform: translateY(10px); }
      to   { opacity: 1; transform: none; }
    }
    .prod-grid.filter-fade { animation: filterFade 0.45s var(--ease-out); }

    /* ── Tactile press feedback on every CTA ── */
    .btn-ol:active, .btn-solid:active, .prod-btn:active, .sale-btn:active,
    .na-hover-cta:active, .f-pill:active, #btt:active {
      transform: scale(0.985);
    }

    /* ── Dark outline button: soft gold aura on hover ── */
    .btn-ol.dark { transition: color 0.35s var(--ease-out), border-color 0.35s var(--ease-out), box-shadow 0.4s ease; }
    .btn-ol.dark:hover { box-shadow: 0 10px 36px rgba(200,169,110,0.20); }

    /* ── Back-to-top: gentle lift ── */
    #btt { transition: opacity 0.3s, background 0.3s, transform 0.3s var(--ease-out); }
    #btt:hover { transform: translateY(-2px); }

    /* ── Firefox/macOS font smoothing to match WebKit ── */
    body { -moz-osx-font-smoothing: grayscale; }

    /* ── Perf: pause infinite animations while their section is off-screen ── */
    .anim-off .ha-orbit1, .anim-off .ha-orbit2,
    .anim-off .ha-ring-svg, .anim-off .hero-glow,
    .anim-off .ha-sweep::after,
    .anim-off .hs, .anim-off .hero-img,
    .anim-off.marquee-wrap .marquee-track {
      animation-play-state: paused;
    }

    @media (prefers-reduced-motion: reduce) {
      #scroll-progress { display: none; }
      .prod-grid.filter-fade { animation: none; }
      /* Marquee stands still for motion-sensitive visitors (text stays visible) */
      .marquee-track { animation: none; }
      /* Scroll-reveals appear instantly — no slide, no fade */
      .reveal, .reveal-left {
        transition: none;
        transform: none;
        opacity: 1;
      }
    }
    /* ─────────────────────────────────────────────────────
       PRODUCT LIGHTBOX — click a product photo to view large
       Deep-forest backdrop, gallery-mat gold frame, caption
       with the product name + order CTA. One dialog reused
       for grid, featured and bridal-set photos.
    ───────────────────────────────────────────────────── */
    #lightbox {
      position: fixed;
      inset: 0;
      z-index: 99990; /* above grain (9999) & cookie bar; below #cursor-ring (99998) */
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 56px 110px;
      visibility: hidden;
      opacity: 0;
      /* no pointer-events while closed/fading — otherwise the invisible
         overlay swallows the first click after closing */
      pointer-events: none;
      transition: opacity 0.45s ease, visibility 0s linear 0.45s;
    }
    #lightbox.open {
      visibility: visible;
      opacity: 1;
      pointer-events: auto;
      transition: opacity 0.45s ease;
    }
    .lb-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(10,18,12,0.93);
      backdrop-filter: blur(16px) saturate(0.85);
      -webkit-backdrop-filter: blur(16px) saturate(0.85);
    }
    .lb-stage {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      max-width: min(1080px, 100%);
      max-height: 100%;
      transform: scale(0.965) translateY(10px);
      transition: transform 0.55s var(--ease-out);
    }
    #lightbox.open .lb-stage { transform: none; }
    /* Gallery mat — thin gold frame with an inner hairline, like the map frame */
    .lb-frame {
      position: relative;
      border: 1px solid rgba(201,169,97,0.3);
      background: rgba(16,28,18,0.55);
      padding: 10px;
    }
    .lb-frame::after {
      content: '';
      position: absolute;
      inset: 5px;
      border: 1px solid rgba(201,169,97,0.12);
      pointer-events: none;
    }
    .lb-img {
      display: block;
      max-width: 100%;
      max-height: calc(100vh - 320px);
      max-height: calc(100dvh - 320px); /* tracks the real visible height in mobile in-app browsers */
      min-height: 180px;
      object-fit: contain;
      opacity: 1;
      transition: opacity 0.26s ease;
    }
    .lb-img.lb-swapping { opacity: 0; }
    .lb-caption {
      text-align: center;
      margin-top: 22px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 7px;
    }
    .lb-count {
      font-family: 'DM Sans', sans-serif;
      font-weight: 400;
      font-size: 9px;
      letter-spacing: 0.32em;
      color: rgba(201,169,97,0.55);
    }
    .lb-count:empty { display: none; }
    .lb-name {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-weight: 500;
      font-size: 27px;
      letter-spacing: 0.02em;
      color: var(--c-linen);
      line-height: 1.25;
    }
    .lb-cat {
      font-family: 'DM Sans', sans-serif;
      font-weight: 300;
      font-size: 10px;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: rgba(181,201,183,0.62);
    }
    .lb-cat:empty { display: none; }
    .lb-cta {
      margin-top: 13px;
      display: inline-block;
      padding: 13px 28px;
      border: 1px solid rgba(201,169,97,0.45);
      background: rgba(201,169,97,0.06);
      color: var(--c-pgold);
      font-family: 'DM Sans', sans-serif;
      font-weight: 400;
      font-size: 10px;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      text-decoration: none;
      transition: border-color 0.3s ease, background 0.3s ease;
    }
    .lb-cta:hover { border-color: var(--c-gold); background: rgba(201,169,97,0.14); }
    .lb-close {
      position: absolute;
      top: 26px;
      right: 30px;
      z-index: 2;
      width: 46px;
      height: 46px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: none;
      border: 1px solid rgba(201,169,97,0.28);
      border-radius: 50%;
      cursor: pointer;
      transition: border-color 0.3s ease, transform 0.45s var(--ease-out);
    }
    .lb-close svg {
      width: 15px;
      height: 15px;
      stroke: var(--c-pgold);
      stroke-width: 1.3;
      stroke-linecap: round;
      fill: none;
    }
    .lb-close:hover { border-color: var(--c-gold); transform: rotate(90deg); }
    .lb-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 2;
      width: 56px;
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: none;
      border: none;
      cursor: pointer;
      opacity: 0.5;
      transition: opacity 0.3s ease, transform 0.3s ease;
    }
    .lb-prev { left: 24px; }
    .lb-next { right: 24px; }
    .lb-arrow svg {
      width: 30px;
      height: 30px;
      stroke: var(--c-pgold);
      stroke-width: 1.2;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
    }
    .lb-arrow:hover { opacity: 1; }
    .lb-prev:hover { transform: translateY(-50%) translateX(-3px); }
    .lb-next:hover { transform: translateY(-50%) translateX(3px); }

    /* Corner "view larger" chip — injected by script.js into every product
       visual; fades in on card hover as the click affordance */
    .lb-hint {
      position: absolute;
      top: 12px;
      right: 12px;
      z-index: 4; /* above the .prod-visual::after hover wash (z 3) */
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(201,169,97,0.5);
      background: rgba(13,24,16,0.4);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      opacity: 0;
      transform: translateY(4px);
      transition: opacity 0.35s ease, transform 0.35s var(--ease-out);
      pointer-events: none;
    }
    .lb-hint svg {
      width: 13px;
      height: 13px;
      stroke: var(--c-pgold);
      stroke-width: 1.4;
      stroke-linecap: round;
      fill: none;
    }
    @media (hover: hover) {
      .prod-card:hover .lb-hint,
      .na-card:hover .lb-hint,
      .sale-card:hover .lb-hint { opacity: 1; transform: none; }
    }

    @media (max-width: 767px) {
      #lightbox { padding: 18px 16px; }
      .lb-close { top: 12px; right: 12px; width: 42px; height: 42px; }
      .lb-arrow { width: 44px; height: 44px; opacity: 0.75; }
      .lb-prev { left: 2px; }
      .lb-next { right: 2px; }
      .lb-arrow svg { width: 24px; height: 24px; }
      .lb-frame { padding: 7px; }
      .lb-frame::after { inset: 3px; }
      .lb-img { max-height: calc(100vh - 290px); max-height: calc(100dvh - 290px); }
      .lb-caption { margin-top: 16px; gap: 6px; }
      .lb-name { font-size: 21px; }
      .lb-cta { padding: 12px 22px; font-size: 9px; }
    }
    @media (prefers-reduced-motion: reduce) {
      #lightbox, .lb-stage, .lb-img, .lb-hint { transition: none; }
    }