/* ============================================================
   VIOLITA — جواهرات الهام‌گرفته از نور
   Persian · RTL · luminous editorial
   Soft lavender · pearl white · champagne gold · plum
   ============================================================ */

/* Self-hosted from DesignRef/iranyekan (converted TTF -> woff2).
   Was cdn.sqp.ir, a third-party CDN — an availability and privacy dependency.
   woff2 only: universal browser support, and ~48% smaller than the source TTF.
   Weights match the original three declarations; CSS rules using 300 and 600
   resolve to 400 and 700 respectively, exactly as they did against the CDN. */
@font-face{
  font-family:'IRANYekan'; font-weight:400; font-style:normal; font-display:swap;
  src:url('../fonts/iran-yekan-400.woff2') format('woff2');
}
@font-face{
  font-family:'IRANYekan'; font-weight:500; font-style:normal; font-display:swap;
  src:url('../fonts/iran-yekan-500.woff2') format('woff2');
}
@font-face{
  font-family:'IRANYekan'; font-weight:700; font-style:normal; font-display:swap;
  src:url('../fonts/iran-yekan-700.woff2') format('woff2');
}

:root{
  --lavender:  #CDB4DB;  /* Primary Lavender */
  --pearl:     #FAF9F7;  /* Pearl White — light background */
  --gold:      #D4B483;  /* Champagne Gold — luxury accent */
  --plum:      #4A3A57;  /* Deep Plum — text */
  --mist:      #F4EFF8;  /* Mist Lavender — secondary background */
  --gold-glow: #E7D7A5;  /* Soft Gold Glow — highlight */

  --cream:     #F3ECE3;
  --cream-2:   #EEE4D8;

  --plum-soft:  #6E5C7B;
  --plum-faint: rgba(74,58,87,.55);
  --line:       rgba(74,58,87,.14);
  --line-soft:  rgba(74,58,87,.08);
  --gold-line:  rgba(212,180,131,.45);

  /* tweakable */
  --accent:      var(--gold);
  --accent-glow: var(--gold-glow);
  --btn-fg:      #ffffff;
  --page-bg:     var(--pearl);
  --panel-bg:    #ffffff;

  --fa:      'IRANYekan', 'Noto Sans Arabic', system-ui, sans-serif;
  --script:  'IRANYekan', 'Noto Sans Arabic', sans-serif;

  --section-y: clamp(56px,7.5vh,104px);
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--fa);
  color:var(--plum);
  background:var(--page-bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  line-height:1.85;
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

#fx{ position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; }

.wrap{ max-width:1240px; margin:0 auto; padding:0 clamp(20px,5vw,64px); }
section{ position:relative; z-index:2; }

/* ---------- shared type (Persian: NO letter-spacing, NO uppercase) ---------- */
.heading{
  font-family:var(--fa);
  font-weight:600;
  font-size:clamp(30px,4vw,52px);
  color:var(--plum);
  line-height:1.35;
}
.script{
  font-family:var(--script);
  font-weight:700;
  font-size:clamp(21px,2.5vw,34px);
  color:var(--accent);
  line-height:1.4;
  padding:0;
}
.eyebrow{
  font-family:var(--fa);
  font-size:12px; font-weight:500;
  color:var(--plum-faint);
}
p.body{
  font-family:var(--fa);
  font-size:clamp(15px,1.15vw,17px);
  font-weight:300;
  color:var(--plum-soft);
  line-height:2;
  max-width:56ch;
}
.rule{ width:64px; height:1px; background:var(--accent); opacity:.7; }

/* ---------- buttons ---------- */
.btn{
  font-family:var(--fa);
  font-size:14px; font-weight:600;
  white-space:nowrap;
  padding:14px 34px;
  border-radius:999px;
  border:1px solid var(--accent);
  background:var(--accent);
  color:var(--btn-fg);
  cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; gap:.6em;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), background .4s var(--ease), color .4s var(--ease);
  box-shadow:0 12px 30px -16px rgba(212,180,131,.7);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 20px 40px -18px rgba(212,180,131,.85); }
.btn.ghost{
  background:transparent; color:var(--plum); border-color:var(--plum);
  box-shadow:none;
}
.btn.ghost:hover{ background:var(--plum); color:var(--pearl); }
.btn.block{ width:100%; justify-content:center; }

.link-underline{
  font-family:var(--fa); font-size:13px; font-weight:600;
  color:var(--accent);
  text-decoration:none; position:relative; padding-bottom:3px;
  display:inline-flex; gap:.5em; align-items:center;
}
.link-underline::after{
  content:""; position:absolute; inset-inline:0; bottom:0; height:1px; width:100%;
  background:var(--accent); transform:scaleX(.001); transform-origin:inline-start;
  transition:transform .5s var(--ease);
}
.link-underline:hover::after{ transform:scaleX(1); }
.link-underline .arrow{ transition:transform .45s var(--ease); }
.link-underline:hover .arrow{ transform:translateX(5px); }
[dir="rtl"] .link-underline:hover .arrow{ transform:translateX(-5px); }

/* ---------- reveal ---------- */
[data-reveal]{ opacity:1; transform:none; }
@media (prefers-reduced-motion: no-preference){
  html:not(.no-anim) [data-reveal]:not(.in){ opacity:0; transform:translateY(30px); }
  html:not(.no-anim) [data-reveal].in{ animation:revealUp 1s var(--ease-out) both; }
  html:not(.no-anim) [data-reveal].in[data-d="1"]{ animation-delay:.08s; }
  html:not(.no-anim) [data-reveal].in[data-d="2"]{ animation-delay:.16s; }
  html:not(.no-anim) [data-reveal].in[data-d="3"]{ animation-delay:.24s; }
  html:not(.no-anim) [data-reveal].in[data-d="4"]{ animation-delay:.32s; }
  html:not(.no-anim) [data-reveal].in[data-d="5"]{ animation-delay:.40s; }
}
@keyframes revealUp{ from{ opacity:0; transform:translateY(30px);} to{ opacity:1; transform:none;} }

/* ---------- image slots ---------- */
image-slot{
  display:block;
  background:
    radial-gradient(120% 90% at 70% 15%, rgba(255,255,255,.9), transparent 60%),
    linear-gradient(150deg, var(--mist), #ece3f3 55%, #e7dbcb);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);
  --ph-color: var(--plum-faint);
}
image-slot::part(placeholder){ color:var(--plum-faint); font-family:var(--fa); }

/* <image-slot> is kept as the media wrapper in server-rendered markup. Its JS is gone,
   so it is now an inert custom element — but roughly twenty rules across these two
   stylesheets already give it the correct aspect-ratio, radius and hover transform in
   every context (product, journal, cart, collage, hero, thumbs). Reusing the element
   preserves all of that; a real photograph simply renders inside it, and an empty slot
   keeps the gradient defined above. */
image-slot img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit; }

/* ============================================================
   NAV (injected by chrome.js)
   ============================================================ */
.nav{
  position:fixed; top:0; inset-inline:0; z-index:50;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:28px;
  padding:20px clamp(20px,5vw,64px);
  transition:background .6s var(--ease), padding .6s var(--ease), box-shadow .6s var(--ease);
}
.nav.solid{
  background:color-mix(in srgb, var(--page-bg) 88%, transparent);
  backdrop-filter:blur(16px) saturate(1.1);
  box-shadow:0 1px 0 var(--line-soft);
  padding-top:14px; padding-bottom:14px;
}
.brand{ display:inline-flex; align-items:center; gap:12px; text-decoration:none; }
.brand .mark{
  width:34px; height:34px; flex:none;
  /* The house mark: gold filigree whale-tail cradling a pearl. Reads on both the
     light nav and the dark footer, so one image serves both. */
  background:url("../img/logo-mark.png") center/contain no-repeat;
}
.brand .wm{
  font-family:var(--fa); font-weight:700; font-size:24px;
  color:var(--plum); line-height:1;
}
.nav-links{ display:flex; gap:30px; justify-content:center; align-items:center; }
.nav-links a{
  font-family:var(--fa); font-size:14px; font-weight:500;
  color:var(--plum); text-decoration:none; opacity:.8;
  transition:opacity .4s var(--ease), color .4s var(--ease);
}
.nav-links a:hover{ opacity:1; }
.nav-links a.active{ color:var(--accent); opacity:1; }
.nav-actions{ display:flex; gap:18px; align-items:center; justify-content:flex-end; }
.nav-actions a{ color:var(--plum); text-decoration:none; display:inline-flex; align-items:center; }
.icon-btn{ opacity:.82; transition:opacity .4s var(--ease); }
.icon-btn:hover{ opacity:1; }
.bag{ position:relative; }
.bag .count{
  position:absolute; inset-block-start:-6px; inset-inline-end:-8px;
  font-family:var(--fa); font-size:11px; font-weight:600;
  min-width:18px; height:18px; padding:0 4px; border-radius:999px;
  background:var(--accent); color:#fff;
  display:inline-grid; place-items:center;
}
@media (max-width:960px){ .nav-links{ display:none; } }

/* page top spacer for interior pages */
.page-top{ padding-top:clamp(120px,16vh,168px); padding-bottom:clamp(64px,10vh,120px); }
/* pages that end with a newsletter section provide their own separation */
.page-top:has(+ .news){ padding-bottom:0; }
.page-head{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px; margin-bottom:var(--section-y); }
.breadcrumb{ font-family:var(--fa); font-size:13px; color:var(--plum-faint); display:flex; gap:8px; align-items:center; }
.breadcrumb a{ color:var(--plum-faint); text-decoration:none; }
.breadcrumb a:hover{ color:var(--accent); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; overflow:hidden;
  padding:clamp(116px,16vh,168px) 0 clamp(96px,15vh,156px);
  background:
    radial-gradient(60% 55% at 18% 24%, rgba(205,180,219,.40), transparent 60%),
    radial-gradient(50% 60% at 90% 78%, rgba(231,215,165,.30), transparent 60%),
    linear-gradient(180deg, var(--mist), var(--page-bg) 70%);
}
.hero .blob{ position:absolute; z-index:0; pointer-events:none; filter:blur(2px); opacity:.55; }
.blob-1{
  width:520px; height:480px; top:-60px; inset-inline-end:-120px;
  background:radial-gradient(circle at 40% 40%, rgba(205,180,219,.5), transparent 62%);
  border-radius:47% 53% 44% 56% / 55% 46% 54% 45%;
}
.blob-2{
  width:420px; height:420px; bottom:40px; inset-inline-start:-100px;
  background:radial-gradient(circle at 60% 40%, rgba(231,215,165,.45), transparent 62%);
  border-radius:52% 48% 57% 43% / 44% 55% 45% 56%;
}
.hero-grid{
  position:relative; z-index:3;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,72px); align-items:center;
}
.hero-text{ display:flex; flex-direction:column; align-items:flex-start; gap:22px; }
.hero-title{
  font-family:var(--fa); font-weight:700;
  font-size:clamp(56px,8.5vw,120px); line-height:1;
  color:var(--plum);
}
.hero-lockup{ display:flex; align-items:center; gap:20px; width:100%; margin-top:-6px; }
.hero-lockup .ln{ flex:1; height:1px; background:var(--line); max-width:120px; }
.hero-lockup .script{ font-size:clamp(28px,3.4vw,46px); }
.hero-text p.body{ max-width:46ch; }
.hero-cta{ display:flex; gap:22px; align-items:center; flex-wrap:wrap; margin-top:6px; }

.hero-photo{ position:relative; justify-self:center; width:min(100%,460px); aspect-ratio:1/1.05; }
.hero-photo image-slot{
  width:100%; height:100%;
  border-radius:52% 48% 50% 50% / 46% 46% 54% 54%;
  filter:drop-shadow(0 40px 70px rgba(74,58,87,.22));
}
.hero-photo .ring-deco{
  position:absolute; inset:-5%; border:1px solid var(--gold-line);
  border-radius:50%; pointer-events:none;
  animation:spin 42s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg);} }
.hero-photo .float-price{
  position:absolute; bottom:8%; inset-inline-start:-6%;
  background:color-mix(in srgb, var(--panel-bg) 92%, transparent);
  backdrop-filter:blur(8px); padding:14px 20px; border-radius:14px;
  box-shadow:0 24px 50px -20px rgba(74,58,87,.4); border:1px solid var(--line-soft);
}
.hero-photo .float-price .t{ font-family:var(--fa); font-size:11px; color:var(--plum-faint); }
.hero-photo .float-price .v{ font-family:var(--fa); font-weight:600; font-size:18px; color:var(--plum); margin-top:3px; }

.hero-curve{ position:absolute; inset-inline:0; bottom:-1px; z-index:2; line-height:0; }
.hero-curve svg{ display:block; width:100%; height:clamp(60px,9vw,120px); }
.hero-curve path{ fill:var(--page-bg); }

@media (max-width:860px){
  .hero-grid{ grid-template-columns:1fr; text-align:center; }
  .hero-text{ align-items:center; order:2; }
  .hero-lockup{ justify-content:center; }
  .hero-photo{ order:1; max-width:360px; }
}

/* ============================================================
   CIRCLE CATEGORY ROW
   ============================================================ */
.circles{ padding:clamp(20px,3vh,40px) 0 clamp(36px,5vh,64px); }
.circle-row{ display:flex; gap:clamp(14px,2.5vw,36px); justify-content:center; flex-wrap:wrap; }
.circle{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  text-decoration:none; width:clamp(96px,12vw,140px);
}
.circle .disc{
  position:relative; width:100%; aspect-ratio:1/1; border-radius:50%; overflow:hidden;
  box-shadow:0 20px 40px -22px rgba(74,58,87,.5);
  transition:transform .5s var(--ease);
}
.circle .disc image-slot{ width:100%; height:100%; border-radius:50%; }
.circle .disc::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(255,255,255,.55);
  box-shadow:inset 0 0 0 6px color-mix(in srgb, var(--page-bg) 80%, transparent);
}
.circle:hover .disc{ transform:translateY(-4px) scale(1.02); }
.circle .clabel{
  font-family:var(--fa); font-size:14px; font-weight:500;
  color:var(--plum-soft);
}

/* ============================================================
   WELCOME
   ============================================================ */
.welcome{ padding:var(--section-y) 0; }
.welcome-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,84px); align-items:center; }
.collage{ display:grid; grid-template-columns:1.1fr .9fr; grid-template-rows:auto auto; gap:16px; }
.collage .c-tall{ grid-row:1 / span 2; }
.collage image-slot{ width:100%; border-radius:6px; box-shadow:0 30px 60px -34px rgba(74,58,87,.5); }
.collage .c-tall image-slot{ aspect-ratio:3/4.3; }
.collage .c-a image-slot{ aspect-ratio:1/1; }
.collage .c-b image-slot{ aspect-ratio:1/1.15; }
.welcome-text{ display:flex; flex-direction:column; align-items:flex-start; gap:20px; }
.head-lockup{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
@media (max-width:860px){
  .welcome-grid{ grid-template-columns:1fr; }
}

/* ============================================================
   OH SO LOVELY — text card + arch collage
   ============================================================ */
.lovely{ padding:var(--section-y) 0; }
.lovely-grid{ position:relative; display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(30px,5vw,64px); align-items:center; }
.lovely-card{
  position:relative; z-index:3;
  background:var(--panel-bg);
  border:1px solid var(--line-soft);
  box-shadow:0 40px 80px -44px rgba(74,58,87,.35);
  padding:clamp(36px,5vw,64px);
  display:flex; flex-direction:column; align-items:flex-start; gap:20px;
  border-radius:6px;
}
.lovely-card .head-lockup{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.arch-collage{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
}
.arch-collage image-slot{ width:100%; overflow:hidden; }
.arch-top{ border-radius:200px 200px 6px 6px; }
.arch-collage .a1 image-slot{ aspect-ratio:4/5; }
.arch-collage .a2{ align-self:end; }
.arch-collage .a2 image-slot{ aspect-ratio:1/1.1; }
.arch-collage .a3 image-slot{ aspect-ratio:1/1.1; }
.arch-collage .a4{ align-self:start; }
.arch-collage .a4 image-slot{ aspect-ratio:4/5; }
@media (max-width:860px){
  .lovely-grid{ grid-template-columns:1fr; }
  .lovely-card{ margin-bottom:0; }
}

/* ============================================================
   PRODUCTS (shared card)
   ============================================================ */
.collection{ padding:var(--section-y) 0; }
.collection-intro{ text-align:center; max-width:720px; margin:0 auto clamp(40px,6vh,72px); display:flex; flex-direction:column; align-items:center; gap:14px; }
.collection-intro .head-lockup{ justify-content:center; }
.products{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(22px,3vw,40px); }
.product{ cursor:pointer; position:relative; text-decoration:none; display:block; }
.product .pmedia{ position:relative; overflow:hidden; background:var(--mist); border-radius:200px 200px 6px 6px; }
.product image-slot{ width:100%; aspect-ratio:4/5; border-radius:inherit; transition:transform .9s var(--ease); }
.product:hover image-slot{ transform:scale(1.04); }
.product .tag{
  position:absolute; top:14px; inset-inline-start:14px; z-index:4;
  font-family:var(--fa); font-size:12px; font-weight:500;
  background:color-mix(in srgb, var(--panel-bg) 88%, transparent); backdrop-filter:blur(6px);
  padding:5px 12px; border-radius:999px; color:var(--plum-soft);
  box-shadow:0 6px 16px -8px rgba(74,58,87,.4);
}
.product .pinfo{ padding:18px 4px 0; display:flex; justify-content:space-between; align-items:baseline; gap:14px; }
.product .pname{ font-family:var(--fa); font-size:18px; font-weight:600; color:var(--plum); }
.product .pmeta{ font-family:var(--fa); font-size:13px; font-weight:300; color:var(--plum-faint); margin-top:4px; }
.product .pprice{ font-family:var(--fa); font-size:16px; font-weight:600; color:var(--plum); white-space:nowrap; }
.collection-cta{ text-align:center; margin-top:clamp(40px,7vh,72px); }
@media (max-width:860px){ .products{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .products{ grid-template-columns:1fr; } }

/* ============================================================
   JOURNAL cards (shared)
   ============================================================ */
.journal{ padding:var(--section-y) 0; background:linear-gradient(180deg, var(--page-bg), var(--mist)); }
.journal-head{ text-align:center; margin-bottom:clamp(40px,6vh,72px); display:flex; flex-direction:column; align-items:center; gap:4px; }
.journal-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,36px); }
.jcard{
  background:var(--panel-bg); border:1px solid var(--line-soft); border-radius:8px;
  overflow:hidden; text-align:center; padding-bottom:34px; text-decoration:none;
  box-shadow:0 30px 60px -40px rgba(74,58,87,.4);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
  display:block;
}
.jcard:hover{ transform:translateY(-5px); box-shadow:0 40px 70px -38px rgba(74,58,87,.5); }
.jcard .jmedia{ padding:22px 22px 0; }
/* aspect-ratio added: this was the one selector with no height of its own, so it
   inherited the 160px default from the old web component's shadow DOM. With the
   component gone it collapsed to zero. 16/9 is the closest standard ratio to the
   ~1.88 the design actually rendered, and unlike a fixed height it scales. */
.jcard image-slot{ width:100%; aspect-ratio:16/9; border-radius:200px 200px 6px 6px; overflow:hidden; }
.jcard .jtitle{ font-family:var(--fa); font-size:20px; font-weight:600; color:var(--plum); margin:24px 26px 0; line-height:1.5; }
.jcard .jdate{ font-family:var(--fa); font-size:13px; color:var(--plum-faint); margin-top:8px; }
.jcard .jexcerpt{ font-family:var(--fa); font-size:14px; font-weight:300; color:var(--plum-soft); margin:14px 30px 0; line-height:1.9; }
.jcard .link-underline{ margin-top:18px; }
@media (max-width:820px){ .journal-grid{ grid-template-columns:1fr; max-width:440px; margin:0 auto; } }

/* ============================================================
   NEWSLETTER BAR
   ============================================================ */
.news{ padding:var(--section-y) 0; }
.news-card{
  position:relative; overflow:hidden; border-radius:16px;
  background:
    radial-gradient(70% 130% at 12% 6%, rgba(205,180,219,.5), transparent 55%),
    radial-gradient(70% 120% at 94% 100%, rgba(231,215,165,.42), transparent 55%),
    linear-gradient(150deg, var(--cream-2), #efe6f2);
  border:1px solid var(--line-soft);
  padding:clamp(34px,5vw,56px) clamp(28px,5vw,64px);
  display:grid; grid-template-columns:1.15fr auto; gap:clamp(28px,4vw,56px); align-items:center;
}
.news-copy{ display:flex; flex-direction:column; gap:8px; }
.news-copy .script{ font-size:clamp(28px,3.4vw,42px); }
.news-copy .micro{ font-family:var(--fa); font-size:14px; font-weight:300; color:var(--plum-soft); max-width:46ch; }
.news-form{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.news-form input{
  border:1px solid var(--line); border-radius:999px; background:color-mix(in srgb, var(--panel-bg) 80%, transparent);
  padding:14px 22px; font-family:var(--fa); font-size:14px; color:var(--plum); outline:none; min-width:170px;
}
.news-form input::placeholder{ color:var(--plum-faint); }
.news-form input:focus{ border-color:var(--accent); }
.news-form button{ border:none; }
.news .ok{ font-family:var(--script); font-size:28px; color:var(--accent); }
@media (max-width:760px){ .news-card{ grid-template-columns:1fr; } .news-form{ justify-content:flex-start; } }

/* ============================================================
   FOOTER (injected by chrome.js)
   ============================================================ */
.footer{ background:var(--plum); color:rgba(255,255,255,.72); padding:clamp(48px,7vh,80px) 0 34px; position:relative; z-index:2; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr auto; gap:32px; align-items:start; }
.footer .brand .wm{ color:#fff; }
.f-col h4{ font-family:var(--fa); font-size:14px; color:rgba(255,255,255,.55); font-weight:600; margin-bottom:14px; }
.f-col a.fl{ display:block; color:rgba(255,255,255,.72); text-decoration:none; font-size:14px; font-weight:300; padding:5px 0; transition:color .3s var(--ease); }
.f-col a.fl:hover{ color:var(--gold-glow); }
.f-col p{ font-size:14px; font-weight:300; line-height:1.9; color:rgba(255,255,255,.72); }
.f-col p .accent-txt{ color:var(--gold-glow); }
.socials{ display:flex; gap:12px; }
.socials a, .socials button{
  width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.22);
  display:grid; place-items:center; color:rgba(255,255,255,.75);
  transition:all .4s var(--ease); text-decoration:none;
}
.socials a:hover, .socials button:hover{ background:var(--gold-glow); color:var(--plum); border-color:var(--gold-glow); }
.footer-tag{ display:flex; align-items:center; gap:8px; margin-top:6px; }
.footer-tag .script{ font-size:24px; color:var(--gold-glow); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); margin-top:clamp(36px,5vh,56px); padding-top:24px; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:13px; font-weight:300; color:rgba(255,255,255,.5); }

/* live gold rate ticker (footer) */
.gold-rates{ margin-top:22px; border:1px solid var(--gold-line); border-radius:12px; padding:14px 16px; background:linear-gradient(160deg, rgba(231,215,165,.10), rgba(255,255,255,.03)); min-width:216px; }
.gold-rates .gr-head{ display:flex; align-items:center; gap:8px; font-family:var(--fa); font-size:12.5px; font-weight:600; color:var(--gold-glow); margin-bottom:12px; }
.gold-rates .live-dot{ width:8px; height:8px; border-radius:50%; background:oklch(0.78 0.16 152); flex:none; animation:livePulse 2.1s var(--ease) infinite; }
@media (prefers-reduced-motion: reduce){ .gold-rates .live-dot{ animation:none; } }
@keyframes livePulse{ 0%{ box-shadow:0 0 0 0 oklch(0.78 0.16 152 / .55); } 70%{ box-shadow:0 0 0 7px oklch(0.78 0.16 152 / 0); } 100%{ box-shadow:0 0 0 0 oklch(0.78 0.16 152 / 0); } }
.gold-rates .gr-row{ display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:baseline; padding:7px 0; }
.gold-rates .gr-row + .gr-row{ border-top:1px solid rgba(255,255,255,.09); }
.gold-rates .gr-k{ font-family:var(--fa); font-size:13px; font-weight:300; color:rgba(255,255,255,.72); }
.gold-rates .gr-v{ font-family:var(--fa); font-size:15px; font-weight:600; color:#fff; transition:color .5s var(--ease); }
.gold-rates .gr-v.flash{ color:var(--gold-glow); }
.gold-rates .gr-ch{ font-family:var(--fa); font-size:11px; font-weight:500; min-width:56px; text-align:end; direction:ltr; }
.gold-rates .gr-ch.up{ color:oklch(0.80 0.14 152); }
.gold-rates .gr-ch.down{ color:#e2a6a6; }
.gold-rates .gr-foot{ font-family:var(--fa); font-size:10.5px; color:rgba(255,255,255,.4); margin-top:11px; }
.f-rates{ justify-self:end; }
.f-rates .gold-rates{ margin-top:0; }

@media (max-width:900px){ .footer-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-top{ grid-template-columns:1fr; } }

/* tweaks mount */
#tweaks-root{ position:fixed; z-index:9999; }


/* Save-to-wishlist heart, sitting over the product media. Filled once saved. */
.product-wrap{ position:relative; }
.wish-heart{
  position:absolute; top:14px; inset-inline-end:14px; z-index:5;
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  border:1px solid var(--line-soft);
  background:color-mix(in srgb, var(--panel-bg) 88%, transparent);
  backdrop-filter:blur(8px);
  color:var(--plum-faint); fill:none;
  transition:color .3s var(--ease), transform .3s var(--ease), background .3s var(--ease);
}
.wish-heart:hover{ color:var(--err); transform:scale(1.08); }
.wish-heart.saved{ color:var(--err); fill:currentColor; }