/* =====================================================================
   Gold Souq — interior page system.
   Scoped under .gs-page so it sits cleanly inside the original site
   header/footer. White surfaces, the brand gold (#BD9E70) as a measured
   accent, pill geometry, no gradients. Ivory belongs to the footer only.
   ===================================================================== */

@font-face {
  font-family: "Fraunces GS";
  src: url("/app/fonts/fraunces-variable-latin.woff2") format("woff2-variations");
  font-weight: 300 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Josefin GS";
  src: url("/app/fonts/josefin-sans-latin.woff2") format("woff2");
  font-weight: 300 600; font-style: normal; font-display: swap;
}
/* visually-hidden text — invisible on screen but present in the DOM text so
   crawlers, LLMs and screen readers still read it (used to keep "AED" machine
   readable beside the Dirham symbol). */
.gs-sr-only {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
/* the Dirham symbol glyph — the "Dirham GS" face draws taller + heavier than
   the light Josefin text around it, so scale it down to the surrounding
   cap-height and nudge it onto the baseline. em-based so it tracks any context. */
.gs-dhs { font-feature-settings: normal; }
.gs-dhs > .gs-dh-glyph {
  font-family: "Dirham GS", inherit;
  /* The Dirham glyph fills its whole em box, whereas Josefin caps reach ~0.71
     and digits ~0.67 of the em. 0.70em sits the symbol at the surrounding
     cap-height / numeral height so it stops looking oversized. em-relative, so
     it tracks every context automatically. */
  font-size: 0.7em;
  font-weight: 300;
  line-height: 1;
  vertical-align: baseline;
  letter-spacing: 0;
}

/* UAE Dirham sign (U+20C3, Unicode 18.0). The unicode-range means ONLY the
   dirham codepoint pulls this font — everything else stays Josefin. So adding
   it to the font stack makes any "⃃" render as the official symbol.
   Native OS support lands ~2026, after which this font becomes unnecessary. */
@font-face {
  font-family: "Dirham GS";
  src: url("/app/fonts/dirham-sans.woff2") format("woff2");
  font-weight: 300 600; font-style: normal; font-display: swap;
  unicode-range: U+20C3;
}

/* ── Arabic text face — light + minimal, the counterpart to Josefin ──────────
   IBM Plex Sans Arabic (Light 300 / Regular 400), loaded on every Arabic page in
   header.php. We slot it into each stack AFTER the Latin face so PER-GLYPH
   fallback applies: Latin + numerals stay Josefin/Manrope, Arabic letters render
   in Plex (light stroke, matched to the English). The Dirham symbol keeps its own
   face via the unicode-range above. Site-wide, RTL only. */

/* 1. interior page content — override the design tokens (defined on .gs-page) */
[dir="rtl"] .gs-page {
  --font-body:    "Josefin GS", "IBM Plex Sans Arabic", "Dirham GS", "Noto Sans Arabic", system-ui, sans-serif;
  --font-display: "Josefin GS", "IBM Plex Sans Arabic", "Dirham GS", "Noto Sans Arabic", system-ui, sans-serif;
}
/* 2. shared chrome rendered OUTSIDE .gs-page (set their own face, so add Plex) */
[dir="rtl"] .gs-body,
[dir="rtl"] .site-footer,
[dir="rtl"] .gs-mobnav,
[dir="rtl"] .gs-header-search-drop {
  font-family: "Josefin GS", "IBM Plex Sans Arabic", "Dirham GS", "Noto Sans Arabic", system-ui, -apple-system, sans-serif;
}
[dir="rtl"] .gs-site-header__nav-link {
  font-family: "Manrope", "IBM Plex Sans Arabic", "Josefin Sans", system-ui, -apple-system, sans-serif;
}
/* 3. headings — IBM Plex Sans Arabic sits heavier than Josefin at the same
   numeric weight, so Arabic titles drop one step (400 → 300 Light) to match the
   thin English look. Functional 400s (buttons, labels, eyebrows, table nums) stay. */
[dir="rtl"] .gs-page :is(h1, h2, h3, h4, h5),
[dir="rtl"] .gs-page .gs-ratebox-title b,
[dir="rtl"] .gs-page .gs-product-title,
[dir="rtl"] .gs-page .gs-review-title,
[dir="rtl"] .gs-page .gs-review-author,
[dir="rtl"] .site-footer .widget-title { font-weight: 300; }
[dir="rtl"] .gs-page .gs-review-reply-by { font-weight: 400; }

/* ============================================================
   Gold Souq — design language v1
   Canvas is a warm near-white (so pure-white cards sit *on* it),
   #BD9E70 is the single accent, no gold+ink combinations, pill
   buttons, hairline borders, subtle dark-grey lift shadows.
   ============================================================ */
.gs-page {
  /* surfaces — barely-perceptible cool near-white canvas (matches old
     WP site visual), pure white reserved for raised cards/panels. */
  --canvas:     #fdfdfd;          /* page background (near-white)          */
  --paper:      #ffffff;           /* card / panel / modal surface          */
  --surface-2:  #f4f4f4;          /* quiet sub-panel (sparing use)         */

  /* type — never black, never near-black.
     A warm medium-dark grey. Headings still read as the "primary" surface
     against body & meta, but the visual weight drops several notches so
     light-300 headlines feel airy instead of heavy. */
  --ink:        #3d3a36;           /* headlines, primary text — soft dark grey */
  --ink-soft:   #66615c;           /* body — comfortably lighter */
  --ink-muted:  #8c8478;           /* meta */
  --ink-faint:  #b8b1a8;           /* placeholders, disabled */

  /* hairlines */
  --line:       rgba(26, 23, 20, 0.08);
  --line-2:     rgba(26, 23, 20, 0.14);

  /* accent — the only colour we ever fill with at scale */
  --gold:       #bd9e70;
  --gold-deep:  #9a7c4f;
  --gold-tint:  rgba(189, 158, 112, 0.10);

  /* status */
  --rise:       #3f8f4f;
  --fall:       #bb5a48;

  /* type — single family, weight discipline carries the brand */
  --font-display: "Josefin GS", "Dirham GS", "Josefin Sans", system-ui, -apple-system, sans-serif;
  --font-body:    "Josefin GS", "Dirham GS", "Josefin Sans", system-ui, -apple-system, sans-serif;

  /* type scale (matches the v1 design language ladder) */
  --t-display:    clamp(1.85rem, 3.6vw, 2.6rem);   /* hero / page-defining H1   */
  --t-h1:         clamp(1.4rem, 2.4vw, 1.85rem);   /* section H1                */
  --t-h2:         clamp(1.15rem, 1.7vw, 1.32rem);  /* H2                        */
  --t-h3:         1rem;                            /* H3 — card titles          */
  --t-body:       0.9375rem;                       /* body — 15px               */
  --t-lede:       1.05rem;                         /* lede / intro              */
  --t-meta:       0.8125rem;                       /* byline / caption          */
  --t-eyebrow:    0.7rem;                          /* MARKET WATCH etc.         */

  /* 4 / 8 spacing ladder */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-8:  48px;
  --space-12: 80px;
  --space-16: 120px;

  /* radii */
  --r-sm:    6px;
  --r-md:    10px;
  --r-lg:    16px;
  --r-pill:  999px;

  /* elevation — subtle dark-grey lift */
  --elev-1: 0 1px 2px rgba(20, 20, 20, 0.04),
            0 1px 1px rgba(20, 20, 20, 0.03);
  --elev-2: 0 6px 16px -8px rgba(20, 20, 20, 0.10),
            0 2px 6px rgba(20, 20, 20, 0.04);
  --elev-3: 0 18px 38px -14px rgba(20, 20, 20, 0.14),
            0 6px 14px rgba(20, 20, 20, 0.06);

  /* motion — custom curves (Kowalski) */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease: var(--ease-out);                          /* legacy alias */

  --container: 1200px;

  /* surfaces */
  background: var(--canvas);
  font-family: var(--font-body);
  font-weight: 300;                  /* Josefin Light — old-site parity */
  color: var(--ink-soft);            /* body lives in soft, never hard ink */
  font-size: var(--t-body);
  line-height: 1.65;
  letter-spacing: 0;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Never let the browser fake a heavier face. Josefin is clamped 300–600;
     anything the engine can't render natively was being synthesised into a
     chunky faux-bold — this forces it to use the real (lighter) stroke. */
  font-synthesis: none;
  font-synthesis-weight: none;
}

/* Inline emphasis from raw content (news bodies, prose, <b>/<strong>)
   defaults to browser-bold (700) → faux-bold smear. Cap it to a gentle
   medium so emphasis still reads but never looks chunky. */
.gs-page b,
.gs-page strong { font-weight: 400; font-synthesis: none; }

/* All number-bearing surfaces get tabular figures so columns align */
.gs-page .gs-ratecell, .gs-page .kc-v, .gs-page .gs-kpi .k-value,
.gs-page .fx-rate, .gs-page .gs-table td.num,
.gs-page time, .gs-page .gs-tnum { font-variant-numeric: tabular-nums; }

/* legacy shadow aliases — keep so existing rules don't break in this pass */
.gs-page {
  --shadow-1: var(--elev-1);
  --shadow-2: var(--elev-2);
  --shadow-soft: var(--elev-1);
  --shadow-card: var(--elev-1);
}

/* lift the canvas to the body itself so nothing dark bleeds in
   beyond the .gs-page container on wide viewports. Header + footer
   surfaces stay white — they don't pick up the canvas tint. */
.gs-page { background: var(--canvas); }
.gs-body[class] > main { background: var(--canvas); }
html { background: #fdfdfd; }

/* ---- resets / overrides against the inherited WordPress CSS ---- */
.gs-page *, .gs-page *::before, .gs-page *::after { box-sizing: border-box; }

/* Headings — light stroke discipline, matched to the homepage (which runs
   font-light / 300 across the board). Big text 300, small headings 400.
   Headings carry full ink; body carries soft ink. The contrast is real
   without ever turning chunky. */
.gs-page h1, .gs-page h2, .gs-page h3, .gs-page h4, .gs-page h5 {
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0;
}
.gs-page h1 { font-size: var(--t-h1);  font-weight: 300; line-height: 1.18; letter-spacing: -0.01em; }
.gs-page h2 { font-size: var(--t-h2);  font-weight: 300; line-height: 1.28; letter-spacing: -0.006em; }
.gs-page h3 { font-size: var(--t-h3);  font-weight: 400; line-height: 1.35; letter-spacing: 0; }
.gs-page h4 { font-size: 0.95rem;       font-weight: 400; line-height: 1.4;  letter-spacing: 0; }
.gs-page h5 { font-size: 0.82rem;       font-weight: 400; line-height: 1.4;  letter-spacing: 0.02em; }

/* Display — page-defining hero / article headline. Stays a touch lighter
   than h1 to read editorial, but never thinner than 300. */
.gs-page .gs-display,
.gs-page h1.gs-display {
  font-size: var(--t-display); font-weight: 400;
  line-height: 1.12; letter-spacing: -0.015em;
}

.gs-page p  { margin: 0; max-width: 70ch; color: var(--ink-soft); font-size: var(--t-body); font-weight: 300; }
.gs-page a  { color: inherit; text-decoration: none; }
.gs-page strong { font-weight: 400; color: var(--ink); }
.gs-page em { font-style: italic; font-weight: 300; }

/* default focus ring — gold, soft, accessible */
.gs-page :where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 2px;
}
.gs-page ul { list-style: none; margin: 0; padding: 0; }
.gs-page img, .gs-page svg { display: block; max-width: 100%; }
.gs-page strong { font-weight: 400; color: var(--ink); }
.gs-page ::selection { background: var(--gold-tint); }

/* ---- layout ---- */
/* Matches the original Bootstrap-style WP container:
   max-width 1200px, flat 15px horizontal padding on every viewport. */
.gs-container { width: 100%; max-width: var(--container); margin-inline: auto;
  padding-inline: 20px; }
.gs-container--narrow  { max-width: 820px; }
.gs-container--reading { max-width: 760px; }
.gs-section { padding-block: clamp(var(--space-8), 5.5vw, var(--space-12)); }
.gs-section--tight { padding-block: clamp(var(--space-6), 3.5vw, var(--space-8)); }

/* monochrome line icons — single weight, round caps */
.gs-icon { width: 18px; height: 18px; flex: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; fill: none; }

/* ---- eyebrow + section head ---- */
.gs-eyebrow {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-size: var(--t-eyebrow); font-weight: 400;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--gold-deep);
}
.gs-eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--gold); }

.gs-section-head { max-width: 62ch; margin-bottom: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-3); }
.gs-section-head--center { margin-inline: auto; text-align: center; align-items: center; }
.gs-section-head--center .gs-eyebrow::after { content: ""; width: 22px; height: 1px; background: var(--gold); }
.gs-lede { font-size: var(--t-lede); color: var(--ink-soft); line-height: 1.55; font-weight: 300; }

/* ---- buttons (pill) ---- */
.gs-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  font-family: var(--font-body); font-size: 0.85rem; font-weight: 400;
  letter-spacing: 0.02em; line-height: 1;
  /* comfortable, consistent gap from the edge to the label */
  padding: 0.7em 1.35em; border-radius: var(--r-pill);
  border: 1px solid transparent; cursor: pointer;
  white-space: nowrap;
  transition: transform 130ms var(--ease-out),
              background-color 200ms var(--ease-out),
              border-color 200ms var(--ease-out),
              color 200ms var(--ease-out),
              box-shadow 200ms var(--ease-out);
}
.gs-btn:active { transform: scale(0.97); }
/* icon scales with the label — same size as the font */
.gs-btn .gs-icon { width: 1em; height: 1em; flex: 0 0 auto; }

/* Primary — gold fill, white text. Never gold + ink/grey.
   The `.gs-page` prefix beats `.gs-page a { color: inherit }`, and the icon is
   forced white so anything on a gold background always reads in white. */
.gs-btn--primary,
.gs-page a.gs-btn--primary { background: var(--gold); color: #ffffff; box-shadow: var(--elev-1); }
.gs-btn--primary:hover,
.gs-page a.gs-btn--primary:hover { background: var(--gold-deep); color: #ffffff; box-shadow: var(--elev-2); }
.gs-btn--primary .gs-icon { color: #ffffff; stroke: #ffffff; }

/* Outline — transparent, gold border, gold text. Hover fills gold + white. */
.gs-btn--ghost,
.gs-btn--goldline { background: transparent; color: var(--gold-deep); border-color: var(--gold); }
.gs-btn--ghost:hover,
.gs-btn--goldline:hover { background: var(--gold); color: #ffffff; border-color: var(--gold); }

/* Quiet — ink text, hairline border, no fill. For tertiary actions. */
.gs-btn--quiet { background: transparent; color: var(--ink); border-color: var(--line-2); }
.gs-btn--quiet:hover { color: var(--gold-deep); border-color: var(--gold); }

/* Sizes — a tight, consistent scale (lg is only marginally larger than base) */
.gs-btn--sm { padding: 0.55em 1.05em; font-size: 0.78rem; }
.gs-btn--lg { padding: 0.82em 1.55em; font-size: 0.88rem; }

.gs-arrow {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-size: 0.9rem; font-weight: 400; color: var(--gold-deep);
}
.gs-arrow .gs-icon { width: 16px; height: 16px; transition: transform 200ms var(--ease); }
.gs-arrow:hover .gs-icon { transform: translateX(4px); }

/* ---- fields (pill) ---- */
.gs-field {
  width: 100%; padding: 0.95em 1.35em; font-family: var(--font-body);
  font-size: 0.92rem; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.gs-field::placeholder { color: var(--ink-muted); }
.gs-field:focus { outline: none; border-color: var(--gold); box-shadow: none; }
textarea.gs-field { border-radius: var(--r-lg); resize: vertical; min-height: 150px; }
select.gs-field { appearance: none; cursor: pointer; }
.gs-label { display: block; font-size: 0.74rem; font-weight: 400;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft);
  margin-bottom: 0.5rem; }
.gs-fieldset { display: flex; flex-direction: column; gap: 0.45rem; }

/* ---- badges ---- */
.gs-badge {
  display: inline-flex; align-items: center; gap: 0.45em;
  font-size: 0.82rem; font-weight: 400; letter-spacing: 0.02em;
  padding: 0.46em 0.95em; border-radius: var(--r-pill);
  border: 1px solid var(--gold); color: var(--gold-deep); background: var(--paper);
}
.gs-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rise); position: relative; }
.gs-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1px solid var(--rise); animation: gs-pulse 2.4s var(--ease) infinite; }
@keyframes gs-pulse { 0%{opacity:.6;transform:scale(.6)} 70%{opacity:0;transform:scale(1.5)} 100%{opacity:0} }

/* ---- page header ---- */
.gs-pagehead { padding-block: clamp(2.4rem, 4vw, 3.6rem); }
.gs-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45em;
  font-size: 0.78rem; color: var(--ink-muted); margin-bottom: 1.1rem; }
.gs-breadcrumb a:hover { color: var(--gold-deep); }
.gs-breadcrumb .gs-icon { width: 13px; height: 13px; color: var(--line-2); }
.gs-breadcrumb [aria-current] { color: var(--gold-deep); }
.gs-pagehead h1 { margin-bottom: 0.7rem; }
.gs-pagehead p { font-size: 1.08rem; color: var(--ink-soft); }
.gs-pagehead-row { display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 1.5rem; }
/* breadcrumb relocated below the heading + description — a quiet, spacious gap,
   no divider (kept minimal). margin-bottom on the nav is neutralised here. */
.gs-pagehead-crumbs { margin-top: clamp(1.5rem, 3vw, 2.2rem); }
.gs-pagehead-crumbs .gs-breadcrumb { margin-bottom: 0; }

/* Tighten the head-to-content spacing on every interior page so they sit as
   neatly as the live Gold-rate page (the homepage is the React SPA and has no
   .gs-pagehead, so it is untouched). Comfortable but not over-spaced. */
.gs-page .gs-pagehead { padding-bottom: clamp(1rem, 2vw, 1.4rem); }
.gs-page .gs-pagehead h1 { margin-bottom: 0.4rem; }
.gs-page .gs-pagehead p { margin-top: 0; }
.gs-page .gs-pagehead + .gs-section { padding-top: clamp(1.1rem, 2.4vw, 1.7rem); }

/* ---- cards + grids ---- */
.gs-grid { display: grid; gap: 1.4rem; }
.gs-grid--2 { grid-template-columns: repeat(2, 1fr); }
.gs-grid--3 { grid-template-columns: repeat(3, 1fr); }
.gs-grid--4 { grid-template-columns: repeat(4, 1fr); }

.gs-card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--space-5);
  box-shadow: var(--elev-1);
  transition: transform 220ms var(--ease-out),
              box-shadow 220ms var(--ease-out),
              border-color 220ms var(--ease-out);
}
a.gs-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--elev-2);
  border-color: var(--line-2);
}
.gs-card-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--r-sm);
  border: 1px solid var(--line); color: var(--gold-deep); margin-bottom: var(--space-3);
}
.gs-card-ico .gs-icon { width: 18px; height: 18px; }
.gs-card h3 { margin-bottom: var(--space-2); font-size: var(--t-h3); }
.gs-card p { font-size: var(--t-body); color: var(--ink-soft); line-height: 1.55; }
.gs-card-foot { margin-top: var(--space-4); }

/* ── Jeweller crest card ──────────────────────────────────────────────────
   Directory result card. A gold-tinted band with a circular logo crest that
   overlaps into the body, then name / rating / chips. No cover photo: the
   scraped Google "covers" are 66px square logos, so a crest is the honest
   frame. Shares the .gs-card shell language (paper, hairline, elev-1, lift).
   Weights stay 300/400 only. */
.gs-jcard {
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  text-decoration: none;
  box-shadow: var(--elev-1);
  transition: transform 220ms var(--ease-out),
              box-shadow 220ms var(--ease-out),
              border-color 220ms var(--ease-out);
}
a.gs-jcard:hover {
  transform: translateY(-2px);
  box-shadow: var(--elev-2);
  border-color: var(--line-2);
}
.gs-jcard-band {
  height: 60px;
  background: var(--gold-tint);
  display: grid; place-items: center;
}
.gs-jcard-crest {
  width: 60px; height: 60px;
  border-radius: 50%;
  border: 3px solid var(--paper);
  background: var(--paper);
  overflow: hidden;
  margin-bottom: -26px;
  display: grid; place-items: center;
  box-shadow: 0 4px 12px -6px rgba(20, 18, 15, 0.4);
  flex: none;
}
.gs-jcard-crest img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.gs-jcard-mono {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.25rem;
  color: var(--gold);
  background: linear-gradient(150deg, var(--gold-tint), rgba(189, 158, 112, 0.04));
  width: 100%; height: 100%;
  display: grid; place-items: center;
  letter-spacing: 0.02em;
}
.gs-jcard-body {
  padding: 32px var(--space-4) var(--space-4);
  text-align: center;
  display: flex; flex-direction: column; gap: var(--space-2);
  flex: 1;
}
.gs-jcard-name {
  font-size: var(--t-h3); font-weight: 400; color: var(--ink);
  line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
  min-height: 2.6em;
}
.gs-jcard-meta {
  font-size: var(--t-meta); color: var(--ink-muted);
  display: flex; align-items: center; justify-content: center; gap: 0.4em;
  flex-wrap: wrap;
}
.gs-jcard-meta .gs-jcard-star { color: var(--gold); }
.gs-jcard-meta .gs-jcard-rating {
  font-variant-numeric: tabular-nums; color: var(--ink-soft);
}
.gs-jcard-meta .gs-jcard-sub { color: var(--ink-muted); }
.gs-jcard-chips {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  justify-content: center; margin-top: auto; padding-top: var(--space-1);
}

/* RTL: keep the crest centred, right-align nothing special (the card is
   centre-aligned already) but isolate the rating so digits stay LTR. */
[dir="rtl"] .gs-jcard-meta .gs-jcard-rating {
  direction: ltr; unicode-bidi: isolate;
}

/* ---- rate grid / table ---- */
.gs-rategrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.9rem; }
.gs-ratecell {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.4rem 1.2rem; background: var(--paper);
  transition: border-color 240ms var(--ease), transform 240ms var(--ease);
}
.gs-ratecell:hover { border-color: var(--gold); transform: translateY(-3px); }
.gs-ratecell .k { display: inline-flex; align-items: center; gap: 0.45em;
  font-size: 0.86rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gold-deep); margin-bottom: 0.6rem; }
.gs-ratecell .k::before { content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold); }
.gs-ratecell .v { font-family: var(--font-display); font-size: 2rem;
  font-weight: 300; line-height: 1; color: var(--ink); letter-spacing: -0.005em; }
.gs-ratecell .u { font-size: 0.84rem; color: var(--ink-soft); margin-top: 0.5rem; }
.gs-ratecell-tag { display: none; }     /* shown only on mobile hero (see below) */
.gs-ratecell-purity { display: none; }  /* extra info shown only on mobile cards */

.gs-table { width: 100%; border-collapse: collapse; }
.gs-table th, .gs-table td { text-align: left; padding: 0.95rem 1rem;
  border-bottom: 1px solid var(--line); font-size: 0.96rem; }
.gs-table th { font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 400; }
.gs-table td.num { font-family: var(--font-display); font-size: 1.14rem; font-weight: 400; }
.gs-table tr:last-child td, .gs-table tbody tr:last-child td { border-bottom: none; }
.gs-table-wrap { border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
  max-width: 100%; overscroll-behavior-x: contain; }
.gs-up { color: var(--rise); } .gs-down { color: var(--fall); }

/* ---- prose ---- */
.gs-prose { max-width: 72ch; }
.gs-prose > * + * { margin-top: 1.1rem; }
.gs-prose h2 { margin-top: 2.4rem; }
.gs-prose h3 { margin-top: 1.8rem; }
.gs-prose p, .gs-prose li { color: var(--ink-soft); }
.gs-prose ul { display: flex; flex-direction: column; gap: 0.5rem; }
.gs-prose li { position: relative; padding-left: 1.5rem; }
.gs-prose li::before { content: ""; position: absolute; left: 0; top: 0.62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.gs-prose a { color: var(--gold-deep); text-decoration: underline;
  text-underline-offset: 3px; }

/* ---- stats ---- */
.gs-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.gs-stat { padding-top: 1.1rem; border-top: 2px solid var(--gold); }
.gs-stat .val { font-family: var(--font-display); font-size: 2rem; font-weight: 300;
  line-height: 1; }
.gs-stat .lab { font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-muted); margin-top: 0.5rem; }

/* ---- accordion / faq ---- */
.gs-faq { border-top: 1px solid var(--line); }
.gs-faq details { border-bottom: 1px solid var(--line); }
.gs-faq summary { display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.3rem 0.2rem; cursor: pointer; list-style: none;
  font-size: 1.05rem; font-weight: 300; color: var(--ink); }
.gs-faq summary::-webkit-details-marker { display: none; }
.gs-faq summary .gs-icon { width: 20px; height: 20px; color: var(--gold-deep);
  transition: transform 240ms var(--ease); }
.gs-faq details[open] summary .gs-icon { transform: rotate(45deg); }
.gs-faq .gs-faq-body { padding: 0 0.2rem 1.4rem; color: var(--ink-soft);
  font-size: 0.95rem; }

/* ---- article list ---- */
.gs-articles { display: flex; flex-direction: column; }
.gs-article { display: grid; grid-template-columns: 8rem 1fr auto; gap: 1.5rem;
  align-items: center; padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.gs-article .date { font-size: 0.8rem; color: var(--ink-muted); }
.gs-article h3 { font-size: 1.25rem; }
.gs-article p { font-size: 0.9rem; color: var(--ink-soft); margin-top: 0.35rem; }
.gs-article:hover h3 { color: var(--gold-deep); }

/* ---- split / feature ---- */
.gs-split { display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }

/* ---- CTA (the one place a solid gold element is welcome) ---- */
.gs-cta { padding-block: clamp(2.5rem, 5vw, 4rem); }
/* Gold-OUTLINE CTA panel — a soft gold-washed card with a 1px gold border,
   not a solid gold fill. Dark text; gold-outline buttons that fill only on hover. */
.gs-cta-panel {
  background: var(--gold-wash, rgba(189, 158, 112, 0.07));
  color: var(--ink); border: 1px solid var(--gold); border-radius: var(--r-lg);
  padding: clamp(2.4rem, 5vw, 3.6rem); text-align: center;
}
.gs-cta-panel h2 { color: var(--ink); margin-bottom: 0.8rem; }
.gs-cta-panel p { color: var(--ink-soft); margin: 0 auto 1.6rem; max-width: 52ch; }
.gs-cta-panel .gs-btn--primary,
.gs-cta-panel .gs-btn--ghost {
  background: transparent !important;
  border: 1px solid var(--gold) !important;
  color: var(--gold-deep) !important;
}
.gs-cta-panel .gs-btn--primary .gs-icon,
.gs-cta-panel .gs-btn--ghost .gs-icon { color: currentColor; }
.gs-cta-panel .gs-btn--primary:hover,
.gs-cta-panel .gs-btn--ghost:hover {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  color: #fff !important;
}
.gs-btn-row { display: inline-flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; }

/* Social icon row (contact card) — branded circles matching the footer set,
   with the same gold hover so the icons read as intentional. */
.gs-social-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.4rem; }
.gs-social-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line-2); color: var(--ink-soft);
  transition: color .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease);
}
.gs-social-ico .gs-icon { width: 18px; height: 18px; }
.gs-social-ico:hover { color: #fff; background: var(--gold); border-color: var(--gold); }

/* ---- map (directory) ---- */
.gs-map-shell { border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; background: var(--paper); }
.gs-map-shell iframe, .gs-map-shell > div { width: 100%; border: 0; display: block; }
/* embedded place map (contact + Deira Gold Souk pages): responsive height so the
   fixed 600x450 iframe scales to the column. */
.gs-map-shell--embed iframe { aspect-ratio: 16 / 10; height: auto; min-height: 300px; }
@media (max-width: 640px) { .gs-map-shell--embed iframe { aspect-ratio: 4 / 3; } }
/* Open-in-Maps / Directions row under an embedded map (same-origin links). */
.gs-map-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.9rem; justify-content: center; }

/* ---- full-screen directory map (Apple-Maps style) ---- */
.gs-mapfull {
  position: relative;
  /* full-bleed: the page wrapper sits at the viewport's left edge, so a
     100vw width spans edge-to-edge. The page hides horizontal overflow,
     which absorbs the scrollbar's width on the right. */
  width: 100vw;
  max-width: 100vw;
  margin-left: 0;
  margin-right: 0;
  background: var(--paper);
  /* sized precisely by JS; this is the pre-paint fallback */
  height: calc(100svh - 150px);
}
.gs-mapfull iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.gs-mapfull-loader {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 0.9rem;
  color: var(--ink-muted); font-size: 0.85rem;
  background: var(--paper);
  transition: opacity 400ms var(--ease);
}
.gs-mapfull-loader.is-hidden { opacity: 0; pointer-events: none; }
.gs-mapfull-loader .spin {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--line-2); border-top-color: var(--gold);
  animation: gs-spin 0.8s linear infinite;
}
@keyframes gs-spin { to { transform: rotate(360deg); } }

/* ---- reveal on scroll ----
   VISIBLE BY DEFAULT. Content is only hidden while it waits to animate when JS
   has confirmed it can reveal it — the head script stamps html.gs-js-reveal
   BEFORE first paint, and the IntersectionObserver (page.php) adds .is-in.
   If either never runs (Rocket Loader, CSP, JS error) the block stays visible,
   so the page never shows just the footer and there is no LCP-killing blackout.
   This inverts the previous rule, which hid everything on opacity:0 and relied
   on a 1.2s failsafe — the cause of the "footer loads first" flash. */
.gs-reveal { opacity: 1; transform: none; }
html.gs-js-reveal .gs-reveal { opacity: 0; transform: translateY(16px);
  /* Safety net for JS users only: if the observer somehow never fires, reveal
     anyway. no-JS users are never hidden (rule is scoped to .gs-js-reveal), so
     they never wait on this. */
  animation: gs-reveal-failsafe 600ms ease-out 1.6s forwards; }
@keyframes gs-reveal-failsafe { from { opacity: 0; } to { opacity: 1; transform: none; } }
html.gs-js-reveal .gs-reveal.is-in { animation: none; opacity: 1; transform: none;
  transition: opacity 540ms var(--ease), transform 540ms var(--ease); }
.gs-reveal[data-d="1"].is-in { transition-delay: 70ms; }
.gs-reveal[data-d="2"].is-in { transition-delay: 140ms; }
.gs-reveal[data-d="3"].is-in { transition-delay: 210ms; }
@media (prefers-reduced-motion: reduce) {
  .gs-reveal, html.gs-js-reveal .gs-reveal { opacity: 1; transform: none; animation: none; }
}

/* ---- responsive ---- */
/* ---- responsive ---- */
@media (max-width: 900px) {
  .gs-grid--3, .gs-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .gs-stats { grid-template-columns: repeat(2, 1fr); }
  .gs-split { grid-template-columns: 1fr; }
  .gs-article { grid-template-columns: 1fr; gap: 0.35rem; }
  .gs-article .date { order: -1; }
}
@media (max-width: 540px) {
  .gs-grid--2, .gs-grid--3, .gs-grid--4, .gs-stats {
    grid-template-columns: 1fr;
  }
}
/* mobile rate grid -> a clean featured 24K block above a 2x2 of the others */
@media (max-width: 820px) {
  .gs-rategrid {
    grid-template-columns: 1fr 1fr !important; gap: 0.6rem;
  }
  .gs-ratecell {
    border: 1px solid var(--line); border-radius: 14px;
    display: flex !important; flex-direction: column; gap: 0;
    padding: 0.95rem 1rem; min-width: 0; background: var(--paper);
  }
  .gs-ratecell:hover { transform: none; }
  .gs-ratecell .k {
    margin-bottom: 0.05rem; font-weight: 400; letter-spacing: .04em;
    color: var(--gold-deep); font-size: 0.82rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .gs-ratecell .gs-ratecell-purity {
    display: block; font-size: 0.62rem; letter-spacing: .05em; text-transform: uppercase;
    color: var(--ink-faint); margin-bottom: 0.5rem;
  }
  .gs-ratecell .v { font-size: 1.55rem !important; line-height: 1.05; text-align: left; }
  .gs-ratecell .u {
    margin-top: 0.45rem; text-align: left;
    display: flex; align-items: center; gap: 0.4rem;
    font-size: 0.7rem; white-space: nowrap; color: var(--ink-muted);
  }
  .gs-ratecell-sep { display: none; }   /* the day-change becomes a chip instead */
  .gs-ratecell .u .gs-up, .gs-ratecell .u .gs-down {
    display: inline-flex; align-items: center; gap: 0.22em;
    font-size: 0.66rem; font-weight: 400; line-height: 1;
    padding: 0.24em 0.55em; border-radius: 999px;
  }
  .gs-ratecell .u .gs-up   { color: var(--rise); background: rgba(63, 143, 79, 0.10); }
  .gs-ratecell .u .gs-down { color: var(--fall); background: rgba(187, 90, 72, 0.10); }
  .gs-ratecell .u .gs-up::before   { content: "\25B2"; font-size: 0.66em; }
  .gs-ratecell .u .gs-down::before { content: "\25BC"; font-size: 0.66em; }

  /* the featured 24K block — same neutral border as the others; it stands out
     by being full-width and larger, with the gold value + pill (no gold outline) */
  .gs-ratecell--hero {
    grid-column: 1 / -1; position: relative;
    border-color: var(--line); background: var(--paper);
    padding: 1.2rem 1.25rem;
  }
  .gs-ratecell--hero .k { font-size: 0.9rem; margin-bottom: 0.05rem; }
  .gs-ratecell--hero .gs-ratecell-purity { display: none; }  /* the pill covers purity */
  .gs-ratecell--hero .v { font-size: 2.45rem !important; color: var(--gold-deep); margin-top: 0.2rem; }
  .gs-ratecell--hero .u { font-size: 0.76rem; margin-top: 0.6rem; }
  .gs-ratecell-tag {
    display: inline-flex; align-items: center;
    position: absolute; top: 0.95rem; right: 0.95rem;
    font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--gold-deep); background: var(--gold-tint);
    border-radius: 999px; padding: 0.3em 0.72em;
  }
  [dir="rtl"] .gs-ratecell-tag { right: auto; left: 0.95rem; }
}

/* =====================================================================
   Jeweller profile page
   ===================================================================== */
.gs-profile { display: block; }

.gs-profile-cover {
  width: 100%;
  height: clamp(160px, 20vw, 240px);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.gs-profile-cover::after {
  /* hairline fade so the head lifts cleanly off the cover */
  content: ""; position: absolute; inset: auto 0 0 0; height: 60%;
  background: linear-gradient(to bottom, transparent 0%, rgba(253, 253, 253, 0.6) 70%, var(--canvas) 100%);
  pointer-events: none;
}
.gs-profile-cover.is-blank { background: var(--surface-2); }
.gs-profile-cover.is-blank::after { display: none; }
.gs-profile-cover-mark {
  font-family: var(--font-display);
  font-size: clamp(4rem, 12vw, 8rem);
  font-weight: 300;
  letter-spacing: 0.06em;
  color: #e3d2b0;
  user-select: none;
}

.gs-profile-head {
  position: relative;
  margin-top: -52px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: end;
  gap: clamp(1rem, 2.5vw, 1.6rem);
  padding-bottom: clamp(1.6rem, 3vw, 2.2rem);
  border-bottom: 1px solid var(--line);
  animation: gs-profile-rise 540ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
@keyframes gs-profile-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.gs-profile-logo {
  position: relative;
  width: clamp(88px, 9.5vw, 108px);
  height: clamp(88px, 9.5vw, 108px);
  border-radius: 50%;
  background: var(--paper);
  border: 4px solid var(--paper);
  box-shadow: 0 8px 22px -8px rgba(20, 20, 20, 0.16),
              0 2px 6px rgba(20, 20, 20, 0.05);
  display: flex; align-items: center; justify-content: center;
  /* let the verified badge overflow the rim */
  overflow: visible;
}
.gs-profile-logo img,
.gs-profile-logo > span:not(.gs-verified-badge) {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 50%;
  overflow: hidden;
}

/* gold disc with white rounded tick — sits at the bottom-right rim */
.gs-verified-badge {
  position: absolute;
  right: -1px; bottom: -1px;
  width: 24px; height: 24px;
  display: inline-flex;
  align-items: center; justify-content: center;
  border-radius: 50%;
  /* white ring to lift the badge off the logo + the canvas */
  box-shadow: 0 0 0 2.5px var(--paper),
              0 3px 8px rgba(20, 20, 20, 0.12);
}
.gs-verified-badge svg { width: 100%; height: 100%; display: block; }
@media (max-width: 768px) {
  .gs-verified-badge { width: 21px; height: 21px; }
}
.gs-profile-logo > span:not(.gs-verified-badge) {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 400;
  color: var(--gold);
  background: var(--gold-tint);
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.gs-profile-id { min-width: 0; padding-bottom: 0.4rem; }
.gs-profile-id .gs-breadcrumb { margin-bottom: 0.55rem; font-size: 0.75rem; }
.gs-profile-id h1 {
  font-size: clamp(1.55rem, 2.6vw, 2.05rem);
  margin-bottom: 0.6rem; font-weight: 400; letter-spacing: -0.012em; line-height: 1.18;
}
.gs-profile-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.gs-chip {
  display: inline-flex; align-items: center; gap: 0.35em;
  font-size: 0.74rem; font-weight: 400;
  color: var(--ink-soft);
  padding: 0.3em 0.7em;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--paper);
  transition: border-color 180ms cubic-bezier(0.23, 1, 0.32, 1),
              color 180ms cubic-bezier(0.23, 1, 0.32, 1);
}
.gs-chip:hover { border-color: var(--line-2); }
.gs-chip .gs-icon { width: 12px; height: 12px; }
.gs-chip--gold {
  border-color: rgba(189, 158, 112, 0.5);
  color: var(--gold-deep);
  background: rgba(189, 158, 112, 0.06);
}
/* Rating sits as its own row right under the cover, pushed to the right edge */
.gs-profile-rating-row {
  display: flex;
  justify-content: flex-end;
  padding: 0.9rem 0 0.4rem;
  position: relative;
  z-index: 2;
}
.gs-profile-rating {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin: 0; font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}
.gs-profile-rating strong {
  font-family: var(--font-display); font-weight: 400; font-size: 0.95rem;
  color: var(--ink);
}
.gs-profile-rating span { color: var(--ink-muted); }
.gs-starline { display: inline-flex; gap: 1px; }
.gs-starline .gs-icon { width: 14px; height: 14px; color: var(--line-2); }
.gs-starline .on .gs-icon { color: var(--gold); fill: var(--gold); }

.gs-profile-actions {
  display: flex; gap: 0.5rem;
  padding-bottom: 0.4rem;
  align-self: end;
}
.gs-profile-actions .gs-btn { transition: transform 130ms cubic-bezier(0.23, 1, 0.32, 1),
                                          background-color 200ms cubic-bezier(0.23, 1, 0.32, 1),
                                          color 200ms cubic-bezier(0.23, 1, 0.32, 1),
                                          border-color 200ms cubic-bezier(0.23, 1, 0.32, 1),
                                          box-shadow 220ms cubic-bezier(0.23, 1, 0.32, 1); }
.gs-profile-actions .gs-btn:active { transform: scale(0.97); }

.gs-profile-body {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: clamp(1.8rem, 3.6vw, 2.8rem);
  padding-block: clamp(1.8rem, 3.6vw, 2.8rem);
}
.gs-profile-block + .gs-profile-block { margin-top: clamp(1.8rem, 3vw, 2.4rem); }
.gs-profile-block h2 {
  font-size: 0.78rem; margin-bottom: 0.8rem;
  padding-bottom: 0; border-bottom: 0;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-deep); font-weight: 400;
  display: inline-flex; align-items: center; gap: 0.5em;
}
.gs-profile-block h2::before {
  content: ""; width: 18px; height: 1px; background: var(--gold);
}
.gs-profile-block p { color: var(--ink-soft); line-height: 1.7; }
.gs-profile-address {
  display: inline-flex; align-items: center; gap: 0.5em;
  color: var(--ink-soft); margin: 0 0 0.9rem;
  font-size: 0.86rem;
}
.gs-profile-address .gs-icon { color: var(--gold-deep); flex: none; width: 14px; height: 14px; }
.gs-profile-map {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  height: 320px;
  background: var(--canvas);
  box-shadow: var(--elev-1);
  transition: box-shadow 220ms cubic-bezier(0.23, 1, 0.32, 1);
}
.gs-profile-map:hover { box-shadow: var(--elev-2); }
.gs-profile-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.gs-profile-map-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; }

.gs-profile-aside { display: flex; flex-direction: column; gap: 1rem; }
.gs-profile-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.4rem 1.4rem 1.2rem;
  box-shadow: var(--elev-1);
  transition: box-shadow 220ms cubic-bezier(0.23, 1, 0.32, 1);
}
.gs-profile-card:hover { box-shadow: var(--elev-2); }
.gs-profile-card h3 {
  font-size: 0.78rem; margin-bottom: 1rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-deep); font-weight: 400;
  display: inline-flex; align-items: center; gap: 0.5em;
}
.gs-profile-card h3::before {
  content: ""; width: 18px; height: 1px; background: var(--gold);
}
.gs-contact-list { display: flex; flex-direction: column; gap: 0; }
.gs-contact-list li {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
  transition: background 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.gs-contact-list li:last-child { border-bottom: 0; }
.gs-contact-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: none;
  border: 1px solid var(--line); border-radius: 50%;
  color: var(--gold-deep);
  background: var(--paper);
  transition: border-color 180ms cubic-bezier(0.23, 1, 0.32, 1),
              background 180ms cubic-bezier(0.23, 1, 0.32, 1);
}
.gs-contact-list li:hover .gs-contact-ico {
  border-color: rgba(189, 158, 112, 0.4);
  background: rgba(189, 158, 112, 0.06);
}
.gs-contact-ico .gs-icon { width: 14px; height: 14px; }
.gs-contact-list span:not(.gs-contact-ico):not(.gs-contact-label) { display: block; font-size: 0.86rem; min-width: 0; }
.gs-contact-list a { color: var(--ink); transition: color 160ms cubic-bezier(0.23, 1, 0.32, 1); }
.gs-contact-list a:hover { color: var(--gold-deep); }
.gs-contact-label {
  display: block; font-size: 0.62rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-muted); margin-bottom: 2px;
  font-weight: 400;
}
.gs-profile-verify {
  display: flex; align-items: center; gap: 0.5em;
  margin-top: 1rem; padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.76rem; color: var(--ink-soft);
}
.gs-profile-verify .gs-icon { width: 14px; height: 14px; color: var(--gold-deep); }
.gs-profile-back {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-size: 0.78rem; font-weight: 400;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--gold-deep);
  padding: 0.5rem 0.2rem;
  transition: color 160ms cubic-bezier(0.23, 1, 0.32, 1),
              gap 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.gs-profile-back:hover { color: var(--gold); gap: 0.8em; }
.gs-profile-back .gs-icon { width: 14px; height: 14px; transform: rotate(180deg); }

/* ── RTL mirrors ─────────────────────────────────────────────────
   Grids with auto/1fr/auto columns flip automatically. Only a handful of
   absolutely-positioned or rotated decorations need explicit flips. */
[dir="rtl"] .gs-verified-badge { right: auto; left: -1px; }
[dir="rtl"] .gs-profile-back .gs-icon { transform: rotate(0deg); }
[dir="rtl"] .gs-arrow .gs-icon { transform: scaleX(-1); }
[dir="rtl"] .gs-arrow:hover .gs-icon { transform: scaleX(-1) translateX(4px); }
[dir="rtl"] .gs-breadcrumb .gs-icon { transform: rotate(180deg); }
/* the rating row uses justify-content: flex-end — flex naturally mirrors
   for RTL, so stars sit at the inline-end (visually left) automatically. */

@media (max-width: 880px) {
  .gs-profile-head {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 0.9rem;
  }
  .gs-profile-actions { padding-bottom: 0; }
  .gs-profile-body { grid-template-columns: 1fr; }
}

/* ---- jeweller profile: mobile ---- */
@media (max-width: 620px) {
  .gs-profile-cover { height: 150px; }
  .gs-profile-head { margin-top: -46px; gap: 0.75rem; }
  .gs-profile-logo {
    width: 86px; height: 86px;
    border-width: 4px;
  }
  .gs-profile-id { padding-bottom: 0; }
  .gs-profile-id .gs-breadcrumb { margin-bottom: 0.55rem; font-size: 0.72rem; }
  .gs-profile-id h1 { font-size: clamp(1.65rem, 7.4vw, 2.1rem); }
  .gs-profile-meta { gap: 0.4rem; }
  .gs-chip { font-size: 0.74rem; padding: 0.34em 0.7em; }

  /* equal, full-width actions */
  .gs-profile-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    width: 100%;
  }
  .gs-profile-actions .gs-btn { width: 100%; padding-inline: 0.8rem; }

  .gs-profile-body { padding-block: 1.8rem 2.4rem; gap: 1.6rem; }
  .gs-profile-block h2 { font-size: 1.18rem; }
  .gs-profile-map { height: 230px; }
  .gs-profile-map-actions .gs-btn { flex: 1; }
  .gs-profile-card { padding: 1.3rem; }
  .gs-profile-back { justify-content: center; width: 100%; }
}

/* re-assert button + chip borders against inherited WordPress link styles */
.gs-page a.gs-btn, .gs-page button.gs-btn { border-width: 1px; border-style: solid; }
.gs-page .gs-btn--ghost { border-color: var(--line-2); }
.gs-page .gs-btn--ghost:hover { border-color: var(--gold); }
.gs-page a.gs-chip { border-width: 1px; border-style: solid; }

/* =====================================================================
   Original header — trim the middle (header-main) row.
   Loaded only on the redesigned pages, so the original site is untouched.
   -5px from the top, -10px from the bottom.
   ===================================================================== */
.site-header .header-row.header-main .header-inner { padding-top: 6px !important; }
.site-header .header-row.header-main { padding-bottom: 0 !important; }

/* =====================================================================
   Live Gold Rate page — rate box (top) + history chart panel (bottom)
   ===================================================================== */
/* ── Rate box — mirrors the original WP Gold Souk markup ─────────
   White surface · 24px radius · generous padding · soft drop shadow.
   The 5 karat pills are slate-edged ovals; the action row sits below
   a hairline top border with three full-width gold-outlined buttons. */
.gs-ratebox {
  background: var(--paper);
  border: 0;
  border-radius: 24px;
  padding: clamp(1.6rem, 3vw, 2.8rem) clamp(1.2rem, 3vw, 2.2rem);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.06);
}
.gs-ratebox-head {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  justify-content: space-between; gap: 0.6rem 1.5rem;
  margin-bottom: 2.2rem;
}
.gs-ratebox-title { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.gs-ratebox-title b { font-size: 1.18rem; font-weight: 400; color: var(--ink); }
.gs-ratebox-title span { font-size: 1.18rem; font-weight: 300; color: var(--ink-soft); }
.gs-ratebox-asof {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-size: 1rem; font-weight: 300; color: var(--ink-soft);
}
.gs-ratebox-actions {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 0.9rem;
  margin-top: 2.4rem; padding-top: 1.8rem;
  border-top: 1px solid var(--line);
}

/* desktop default — show long label, hide the short mobile label */
.gs-desktop-text { display: inline; }
.gs-mobile-text { display: none; }

/* segmented pill control */
.gs-seg {
  display: inline-flex; gap: 3px; padding: 4px;
  border: 0; border-radius: var(--r-pill);
  background: var(--surface-2);
}
.gs-seg button {
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-body); font-size: 0.86rem; font-weight: 400;
  letter-spacing: 0.02em; color: var(--ink-soft);
  padding: 0.52em 1em; border-radius: var(--r-pill);
  transition: background-color 180ms var(--ease), color 180ms var(--ease);
}
.gs-seg button:hover { color: var(--ink); }
.gs-seg button.is-active { background: var(--gold); color: #fff; }

/* chart panel — borderless, same soft drop shadow as the rate table above */
.gs-chartpanel {
  background: var(--paper);
  border: 0;
  border-radius: 24px;
  padding: clamp(1.4rem, 3vw, 2rem);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.06);
}
.gs-chart-controls {
  display: flex; flex-wrap: wrap; gap: 0.9rem;
  align-items: center; justify-content: space-between;
  margin-bottom: 1.4rem;
}
.gs-chart-controls .lbl {
  font-size: 0.8rem; font-weight: 400; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-soft); margin-inline-end: 0.6rem;
}
.gs-chart-wrap { position: relative; }
.gs-chart-wrap svg { width: 100%; height: auto; display: block; }
.gs-chart-tip {
  position: absolute; top: 0; left: 0;
  transform: translate(-50%, -120%);
  background: var(--ink); color: #fff;
  font-size: 0.82rem; line-height: 1.4;
  padding: 0.5rem 0.75rem; border-radius: var(--r-md);
  white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity 140ms var(--ease);
}
.gs-chart-tip b { font-weight: 400; color: var(--gold-bright, #d8c39a); }
.gs-chart-tip.is-on { opacity: 1; }

/* KPI cards */
.gs-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.9rem; margin-top: 1.5rem; }
.gs-kpi { border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.1rem 1.15rem; }
.gs-kpi .k-label {
  font-size: 0.8rem; font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-soft);
}
.gs-kpi .k-value {
  font-family: var(--font-display);
  font-size: 1.7rem; font-weight: 300; margin-top: 0.45rem; line-height: 1;
  color: var(--ink); letter-spacing: -0.005em;
}
.gs-kpi .k-hint { font-size: 0.84rem; color: var(--ink-muted); margin-top: 0.4rem; }
.gs-kpi .k-hint.up { color: var(--rise); }
.gs-kpi .k-hint.down { color: var(--fall); }

@media (max-width: 720px) {
  .gs-kpis { grid-template-columns: repeat(2, 1fr); }
  .gs-chart-controls { gap: 0.7rem; }
}
@media (max-width: 420px) {
  .gs-seg button { padding: 0.5em 0.7em; }
}
/* KPI cards become a swipeable carousel on mobile */
@media (max-width: 640px) {
  .gs-kpis {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 0.7rem;
    margin-inline: -16px; padding-inline: 16px;
    scrollbar-width: none;
  }
  .gs-kpis::-webkit-scrollbar { display: none; }
  .gs-kpi {
    scroll-snap-align: start;
    flex: 0 0 64%; min-width: 0;
  }
}

/* clear the site's fixed mobile bottom navigation on every redesigned page */
@media (max-width: 980px) {
  footer.site-footer .footer-copyright { padding-bottom: 94px !important; }
}

/* =====================================================================
   Live rate dashboard (Gold Rate / Bullion) — reference-style structure
   ===================================================================== */
.gs-chart-headrow {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: flex-start; gap: 1rem; margin-bottom: 1.3rem;
}
.gs-chart-meta {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 0.4rem; text-align: right;
}
.gs-chart-meta .gs-badge { white-space: nowrap; }
.gs-chart-meta .src { font-size: 0.78rem; color: var(--ink-muted); }
.gs-chart-meta .src b { color: var(--gold-deep); font-weight: 400; }
/* quiet "Disclaimer" link that opens the rate-page notice modal */
.gs-disc-link {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 0.78rem; color: var(--gold-deep);
  text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, var(--gold-deep) 40%, transparent);
  transition: text-decoration-color 0.15s ease, opacity 0.15s ease;
}
.gs-disc-link:hover { text-decoration-color: var(--gold-deep); }
.gs-disc-link:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; border-radius: 3px; }
/* the live "Updated N ago" stamp toggles the dot / indicative word via [hidden];
   make sure that wins over any display set on those spans */
.gs-ratebox-asof [hidden] { display: none !important; }
.gs-chart-title {
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 300;
  margin: 0.2rem 0 0.1rem; letter-spacing: -0.01em; color: var(--ink);
}
.gs-unitnote {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-size: 0.78rem; color: var(--ink-muted); margin: 0.2rem 0 1rem;
}
.gs-unitnote b { color: var(--gold-deep); font-weight: 400; }

.gs-dash-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.gs-notes { padding: 1.6rem; }
.gs-notes h4 { font-size: 0.95rem; margin-bottom: 0.3rem; }
.gs-notes p { font-size: 0.86rem; color: var(--ink-soft); margin-bottom: 1.1rem; }
.gs-notes p:last-child { margin-bottom: 0; }
.gs-notes .gold { color: var(--gold-deep); font-weight: 400; }
.gs-notes .block + .block { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }

.gs-summary { margin-top: 0; }
.gs-summary p.lead { color: var(--ink-soft); font-size: 0.95rem; margin-bottom: 1rem; }
.gs-summary .gold { color: var(--gold-deep); font-weight: 400; }
.gs-valuetable-wrap { max-height: 260px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
.gs-valuetable-wrap .gs-table th { position: sticky; top: 0; background: var(--paper); }
.gs-valuetable-wrap .gs-table th, .gs-valuetable-wrap .gs-table td { padding: 0.7rem 1rem; }

@media (max-width: 860px) {
  .gs-dash-grid { grid-template-columns: minmax(0, 1fr); }
  .gs-chart-meta { align-items: flex-start; text-align: left; }
}

/* =========================================================
   Calculator page — bento grid mirroring the original gpc layout
   (Insert · Choose · Making Charge · Other Currencies · Today's
    rates · Jewelry price in home + side currency · Disclaimer ·
    Actions). All native, no iframe, fully styled in site tokens.
   ========================================================= */
.gpc-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr 1fr;
  grid-template-areas:
    "rates g1    g2    g3"
    "rates main  main  side"
    "disc  disc  disc  acts";
  gap: 1rem;
  align-items: stretch;
}
.gpc-card {
  background: var(--paper); border: 0; border-radius: 20px;
  padding: 1.3rem 1.4rem;
  display: flex; flex-direction: column; gap: 0.6rem;
  min-width: 0;   /* allow grid/flex children (number inputs) to shrink */
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.05);
  transition: box-shadow 220ms var(--ease), transform 220ms var(--ease);
}
.gpc-card:hover { box-shadow: 0 16px 42px rgba(0, 0, 0, 0.08); }
.gpc-card[data-area="g1"]    { grid-area: g1; }
.gpc-card[data-area="g2"]    { grid-area: g2; }
.gpc-card[data-area="g3"]    { grid-area: g3; }
.gpc-card[data-area="g4"]    { grid-area: g4; }
.gpc-card[data-area="rates"] { grid-area: rates; }
.gpc-card[data-area="main"]  { grid-area: main; align-items: stretch; }
.gpc-card[data-area="side"]  { grid-area: side; }
.gpc-card[data-area="disc"]  { grid-area: disc; }
.gpc-card[data-area="acts"]  { grid-area: acts; }

.gpc-card__lbl {
  font-size: 0.66rem; font-weight: 400; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-muted);
}
.gpc-card__title {
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 400;
  color: var(--ink); letter-spacing: -0.005em; margin: 0;
}
.gpc-card__title em { font-style: italic; color: var(--gold-deep); font-weight: 400; }
.gpc-card__title-sub {
  font-style: normal; color: var(--gold); font-weight: 400; margin-left: 0.2rem;
}
.gpc-card__head {
  font-family: var(--font-display); font-size: 0.95rem; font-weight: 400;
  color: var(--ink); margin: 0; display: flex; justify-content: space-between; align-items: baseline;
}
.gpc-card__head-sub { font-size: 0.74rem; font-weight: 400; color: var(--ink-muted); letter-spacing: 0.04em; }
.gpc-card__sub { margin: 0.5rem 0 0; font-size: 0.82rem; color: var(--ink-muted); }
.gpc-card__sub em { font-style: normal; color: var(--gold-deep); font-weight: 400; }

/* Field block (input or select) inside the small cards */
.gpc-card__field {
  margin-top: 0.4rem;
  border: 1px solid transparent; border-radius: var(--r-pill);
  background: var(--surface-2);
  padding: 0 1rem;
  display: flex; align-items: center;
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease), background-color 180ms var(--ease);
}
.gpc-card__field:focus-within { background: #fff; border-color: var(--gold); box-shadow: none; }
.gpc-card__field input, .gpc-card__field select {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
  font: inherit; font-size: 1rem; color: var(--ink);
  padding: 0.72rem 0;
  appearance: none; -webkit-appearance: none;
}
.gpc-card__field--select {
  background: #fff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238c8478' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
    no-repeat right 1rem center;
  background-size: 14px;
  padding-right: 0.4rem;
}

/* ── Weight / Purity / Making — "big number" inputs: label on top, a large
   display-font value with its unit, on a quiet underline that lifts to gold on
   focus. Editable, minimal, on-brand. ── */
.gpc-card--field { justify-content: flex-start; }
.gpc-card--field .gpc-card__field {
  margin-top: 0.55rem;
  background: transparent !important;
  border: 0; border-bottom: 1.5px solid var(--line);
  border-radius: 0;
  padding: 0.1rem 0;
  align-items: baseline;
  box-shadow: none !important;
}
.gpc-card--field .gpc-card__field:focus-within {
  background: transparent !important;
  border-bottom-color: var(--gold);
  box-shadow: none !important;
}
.gpc-card--field .gpc-card__field input,
.gpc-card--field .gpc-card__field select {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2.4vw, 2.1rem);
  font-weight: 300; letter-spacing: -0.01em; line-height: 1.1;
  color: var(--gold-deep);
  padding: 0.12rem 0;
}
.gpc-card--field .gpc-field-unit {
  font-family: var(--font-display); font-weight: 300;
  font-size: 1.05rem; color: var(--ink-muted);
}
.gpc-card--field .gpc-card__field--select {
  background-color: transparent !important;
  background-position: right 0.05rem center !important;
  padding-right: 1.1rem;
}

/* Currency picker button — sits inside the "Other Currencies" card */
.gpc-cur-picker-btn {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.8rem;
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.6rem 0.95rem;
  border: 1px solid var(--line-2);                   /* soft pill, matches gold-rates */
  border-radius: 999px;
  background: var(--surface-2); color: var(--ink);
  font: inherit; cursor: pointer;
  transition: color 180ms var(--ease), border-color 180ms var(--ease),
              background-color 180ms var(--ease), box-shadow 180ms var(--ease);
}
.gpc-cur-picker-btn:hover { color: var(--gold-deep); border-color: var(--gold); background: var(--paper); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05); }
.gpc-cur-picker-btn:focus-visible { outline: none; border-color: var(--gold-deep); }
.gpc-cur-picker-left { display: inline-flex; align-items: center; gap: 0.55rem; min-width: 0; }
.gpc-cur-flag-img {
  width: 26px; height: 18px; object-fit: contain; border-radius: 2px;
  background: transparent; flex: 0 0 auto;
}
.gpc-cur-code-txt { font-weight: 400; font-size: 0.95rem; letter-spacing: 0.04em; }
.gpc-cur-chevron { color: var(--ink-muted); }
.gpc-cur-name-txt { font-size: 0.85rem; color: var(--ink-muted); }

/* ────────────────────────────────────────────────────────────
   Currency picker modal — minimal · luxe · calm
   • backdrop blur for focus
   • spring-in panel with a soft tinted top edge
   • search becomes a gold-glow pill on focus
   • items have a quiet gold dot on hover and a gold tick when selected
   ────────────────────────────────────────────────────────────── */
.gpc-cur-modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(34, 29, 23, 0.38);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  opacity: 0; pointer-events: none;
  transition: opacity 240ms var(--ease);
}
.gpc-cur-modal-overlay.is-open { opacity: 1; pointer-events: auto; }
.gpc-cur-modal {
  position: relative;
  background: #fff;
  width: 100%; max-width: 460px; max-height: 84vh;
  border-radius: 24px;
  border: 0;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 34px 90px -28px rgba(34, 29, 23, 0.42),
    0 10px 24px -18px rgba(34, 29, 23, 0.22);
  display: flex; flex-direction: column;
  overflow: hidden;
  transform: translateY(18px) scale(0.95);
  opacity: 0;
  transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1), opacity 240ms ease;
}
.gpc-cur-modal-overlay.is-open .gpc-cur-modal { transform: translateY(0) scale(1); opacity: 1; }

/* slim gold accent at the very top — same width as content, no gradient fill */
.gpc-cur-modal::before {
  content: ""; position: absolute; left: 50%; top: 14px; width: 36px; height: 2px;
  transform: translateX(-50%);
  background: var(--gold, #bd9e70); border-radius: 999px; opacity: 0.55;
}
.gpc-cur-modal-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 2rem 1.5rem 0.4rem;
}
.gpc-cur-modal-titlewrap { display: flex; flex-direction: column; gap: 0.2rem; }
.gpc-cur-modal-title {
  font-family: var(--font-display); font-size: 1.2rem; font-weight: 300;
  color: var(--ink); letter-spacing: -0.01em; line-height: 1.2;
}
.gpc-cur-modal-eyebrow {
  font-size: 0.66rem; font-weight: 400; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold-deep);
}
.gpc-cur-modal-close {
  width: 34px; height: 34px; border-radius: 999px;
  border: 0; background: var(--surface-2); color: var(--ink-soft);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background-color 160ms var(--ease), color 160ms var(--ease), transform 140ms var(--ease);
}
.gpc-cur-modal-close:hover { background: var(--gold, #bd9e70); color: #fff; }
.gpc-cur-modal-close:active { transform: scale(0.94); }

/* Search — quiet bottom line under the title, no pill */
.gpc-cur-modal-search {
  display: flex; align-items: center; gap: 0.7rem;
  margin: 0.4rem 1.5rem 1rem;
  padding: 0.65rem 0 0.7rem;
  border: 0;
  border-bottom: 1px solid rgba(34, 29, 23, 0.10);
  background: transparent;
  color: var(--ink-muted);
  transition: border-color 200ms var(--ease);
}
.gpc-cur-modal-search:focus-within {
  border-bottom-color: var(--gold, #bd9e70);
}
.gpc-cur-modal-search input {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
  font: inherit; font-size: 0.96rem; color: var(--ink);
}
.gpc-cur-modal-search input::placeholder { color: var(--ink-muted); }

/* List */
.gpc-cur-dropdown-list {
  flex: 1 1 auto; overflow-y: auto;
  padding: 0.25rem 0.6rem 1rem;
  scrollbar-width: thin; scrollbar-color: rgba(34, 29, 23, 0.16) transparent;
}
.gpc-cur-dropdown-list::-webkit-scrollbar { width: 10px; }
.gpc-cur-dropdown-list::-webkit-scrollbar-thumb {
  background: rgba(34, 29, 23, 0.14); border-radius: 999px; border: 3px solid #fff;
}
.gpc-cur-dropdown-item {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 1rem;
  width: 100%;
  padding: 0.85rem 1rem;
  margin: 0;
  border: 0; border-radius: 0; background: transparent;
  color: var(--ink); font: inherit; cursor: pointer;
  text-align: left;
  position: relative;
  transition: background-color 180ms var(--ease), padding-left 240ms var(--ease);
  animation: gpcItemIn 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.gpc-cur-dropdown-item:nth-child(1) { animation-delay: 0ms; }
.gpc-cur-dropdown-item:nth-child(2) { animation-delay: 22ms; }
.gpc-cur-dropdown-item:nth-child(3) { animation-delay: 44ms; }
.gpc-cur-dropdown-item:nth-child(4) { animation-delay: 66ms; }
.gpc-cur-dropdown-item:nth-child(5) { animation-delay: 88ms; }
.gpc-cur-dropdown-item:nth-child(6) { animation-delay: 110ms; }
.gpc-cur-dropdown-item:nth-child(n+7) { animation-delay: 120ms; }
@keyframes gpcItemIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.gpc-cur-dropdown-item + .gpc-cur-dropdown-item { border-top: 1px solid rgba(34, 29, 23, 0.05); }
.gpc-cur-dropdown-item:hover { background: #fbf6ee; padding-left: 1.2rem; }
.gpc-cur-dropdown-item[aria-current="true"] { background: transparent; }
.gpc-cur-dropdown-item[aria-current="true"]::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 22px; border-radius: 999px;
  background: var(--gold, #bd9e70);
}
.gpc-cur-dropdown-item .gpc-di-left { display: inline-flex; align-items: center; gap: 0.85rem; min-width: 0; }
.gpc-cur-dropdown-item .gpc-di-flag {
  width: 30px; height: 22px; object-fit: contain; border-radius: 4px;
  background: transparent; flex: 0 0 auto;
}
.gpc-cur-dropdown-item .gpc-di-code {
  font-family: var(--font-display); font-weight: 400; font-size: 0.96rem;
  color: var(--ink); letter-spacing: 0.06em;
}
.gpc-cur-dropdown-item .gpc-di-name {
  font-size: 0.86rem; color: var(--ink-muted); text-align: right;
  font-style: italic;
}
.gpc-cur-dropdown-item[aria-current="true"] .gpc-di-name { color: var(--gold-deep); font-style: normal; }
.gpc-cur-dropdown-item .gpc-di-check { display: none; }
.gpc-cur-empty { text-align: center; padding: 1.6rem; color: var(--ink-muted); font-size: 0.9rem; margin: 0; }

html.is-modal-open { overflow: hidden; }

@media (max-width: 480px) {
  .gpc-cur-modal { max-height: 92vh; border-radius: 18px; }
  .gpc-cur-dropdown-item .gpc-di-name { font-size: 0.82rem; }
}

/* ─────────────────────────────────────────────
   Forex page styles
   ───────────────────────────────────────────── */
.fx-hero { text-align: center; padding: 0.4rem 0 0.8rem; }
.fx-hero__title {
  font-family: var(--font-display); font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 300; letter-spacing: -0.01em; color: var(--ink); margin: 0;
}
.fx-hero__sub { margin: 0.5rem 0 0; font-size: 0.86rem; color: var(--ink-muted); letter-spacing: 0.02em; }

.fx-converter {
  background: #fff;
  border: 0;                                  /* stroke removed */
  border-radius: 24px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.06);   /* same soft shadow as the gold-rate panels */
  padding: clamp(1.2rem, 2.4vw, 1.8rem) clamp(1.4rem, 3vw, 2.4rem);
  max-width: 840px;                           /* contained — not the full page width */
  margin-inline: auto;                        /* centred under the hero title */
}
.fx-row {
  display: grid; grid-template-columns: 1fr 56px 1fr;
  gap: 0.9rem; align-items: end;
}
.fx-side { min-width: 0; }
.fx-label {
  display: block; font-size: 0.7rem; font-weight: 400; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-muted); margin-bottom: 0.5rem;
}
.fx-input-box {
  display: grid; grid-template-columns: 1fr;
  background: var(--surface-2);              /* soft fill, consistent with calculator + pills */
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 0.7rem 0.9rem 0.55rem;
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease), background-color 180ms var(--ease);
}
.fx-input-box:focus-within { background: var(--surface-2); border-color: var(--gold); box-shadow: none; }
.fx-amount {
  border: 0; outline: none; background: transparent;
  font: inherit; font-size: clamp(1.4rem, 3vw, 1.95rem); font-weight: 300;
  color: var(--ink); letter-spacing: -0.005em;
  width: 100%;
}
/* currency selector blends into the light-grey field — no separate pill, so each
   side reads as one seamless block (amount above, currency selector below) */
.fx-cur-btn {
  display: inline-flex; align-items: center; gap: 0.5rem; width: 100%;
  margin-top: 0.55rem; padding: 0.35rem 0 0;
  border: 0; border-radius: 0; background: transparent;
  cursor: pointer; color: var(--ink); font: inherit;
  transition: color 160ms var(--ease);
}
.fx-cur-btn:hover { background: transparent; color: var(--gold-deep); }
.fx-flag {
  width: 30px; height: 22px; object-fit: contain; border-radius: 3px;
  background: transparent; flex: 0 0 auto;
}
.fx-code { font-weight: 400; letter-spacing: 0.04em; }
.fx-sep  { color: rgba(34, 29, 23, 0.25); margin: 0 0.15rem; }
.fx-name { color: var(--ink-muted); font-size: 0.9rem; }
.fx-chev { color: var(--ink-muted); margin-inline-start: auto; }

.fx-swap-wrap { display: flex; align-items: center; justify-content: center; padding-top: 1.6rem; }
.fx-swap {
  width: 44px; height: 44px; border-radius: 999px;
  border: 0; background: #fff; color: var(--gold-deep);
  box-shadow: 0 1px 2px rgba(34, 29, 23, 0.04), 0 10px 22px -10px rgba(189, 158, 112, 0.45);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), background-color 160ms var(--ease), color 160ms var(--ease);
}
.fx-swap:hover { background: var(--gold); color: #fff; }
.fx-swap.is-spin { transform: rotate(180deg); }

.fx-rate-bar {
  margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.9rem;
}
.fx-rate-info { display: flex; flex-direction: column; gap: 0.2rem; }
.fx-rate-main { font-family: var(--font-display); font-size: 1.05rem; font-weight: 400; color: var(--ink); }
.fx-rate-time { font-size: 0.78rem; color: var(--ink-muted); }
.fx-rate-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
/* .gs-page p (margin:0;max-width:70ch) would otherwise win, so scope it up */
.gs-page .fx-disclaimer { display: block; margin: 3rem auto; max-width: 560px; padding: 0 1rem; font-size: 0.78rem; line-height: 1.75; color: var(--ink-muted); text-align: center; }
/* inside the converter / bullion card → tidy gap from the buttons + card foot */
.gs-page .fx-converter .fx-disclaimer { margin: 2.4rem auto 0.4rem; }
/* bullion: sit evenly — equal breathing room above (from the buttons) and below
   (to the card foot), so the line reads as centred in the remaining space. */
.gs-page .gs-ratebox .fx-disclaimer { margin: 2.7rem auto 0.4rem; }
.fx-converter { padding-bottom: clamp(1.6rem, 2.6vw, 2rem); }

/* Crypto strip — marquee */
.fx-crypto-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  margin-bottom: 0.8rem;
}
.fx-crypto-head-left { display: inline-flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.fx-live-badge {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.7rem; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold-deep);
}
.fx-live-badge .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 0 0 rgba(189, 158, 112, 0.5);
  animation: fxPulse 1.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
@keyframes fxPulse { 0% { box-shadow: 0 0 0 0 rgba(189,158,112,0.5); } 100% { box-shadow: 0 0 0 10px rgba(189,158,112,0); } }
.fx-crypto-title { font-family: var(--font-display); font-weight: 400; font-size: 1.1rem; color: var(--ink); }
.fx-crypto-tag { font-size: 0.74rem; color: var(--ink-muted); letter-spacing: 0.06em; }
.fx-crypto-ts { font-size: 0.74rem; color: var(--ink-muted); }

.fx-crypto-strip {
  position: relative;
  overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  max-width: 100%; overscroll-behavior-x: contain;
}
.fx-crypto-track {
  display: flex; gap: 0.9rem;
  width: max-content;
  animation: fxMarquee 60s linear infinite;
}
.fx-crypto-strip:hover .fx-crypto-track { animation-play-state: paused; }
@keyframes fxMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.fx-crypto-card {
  flex: 0 0 220px;
  border: 0; border-radius: 18px;
  padding: 0.95rem 1rem; background: #fff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.05);   /* borderless soft card, bullion aesthetic */
  display: flex; flex-direction: column; gap: 0.45rem;
  transition: box-shadow 220ms var(--ease), transform 220ms var(--ease);
}
.fx-crypto-card:hover { box-shadow: 0 14px 36px rgba(0, 0, 0, 0.09); transform: translateY(-2px); }
.fx-crypto-top { display: flex; align-items: center; gap: 0.7rem; }
/* Crypto coin badge — original logo, rendered monochrome in brand gold via a
   CSS mask so it always matches the site aesthetic. */
.fx-crypto-sym {
  width: 34px; height: 34px; flex: 0 0 auto;
  background-color: var(--gold-deep);
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
}
.fx-crypto-name { font-family: var(--font-display); font-weight: 400; font-size: 0.92rem; color: var(--ink); }
.fx-crypto-tic { font-size: 0.7rem; color: var(--ink-muted); letter-spacing: 0.06em; text-transform: uppercase; }
.fx-crypto-price { font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; color: var(--ink); }
.fx-crypto-change {
  display: inline-flex; align-self: flex-start;
  padding: 0.2rem 0.55rem; border-radius: 999px;
  font-size: 0.72rem; font-weight: 400; letter-spacing: 0.02em;
}
.fx-crypto-change.is-up   { color: var(--rise); background: rgba(63, 143, 79, 0.08); }
.fx-crypto-change.is-down { color: var(--fall); background: rgba(187, 90, 72, 0.08); }

/* All-rates table */
.fx-table th { font-size: 0.74rem; letter-spacing: 0.08em; }
.fx-code-cell { display: inline-flex; align-items: center; gap: 0.55rem; }
.fx-code-cell b { color: var(--ink); font-weight: 400; letter-spacing: 0.04em; }
.fx-table .num { font-family: var(--font-display); font-weight: 400; }

/* Important notice */
.fx-notice {
  background: #fdfaf3; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(1.4rem, 2.4vw, 1.8rem);
}
.fx-notice-body p {
  margin: 0.6rem 0 0; font-size: 0.9rem; color: var(--ink-soft); line-height: 1.65;
  max-width: 80ch;
}
.fx-notice-body p:first-child { margin-top: 0.8rem; }

@media (max-width: 840px) {
  .fx-row { grid-template-columns: 1fr; gap: 0.7rem; }
  .fx-swap-wrap { padding-top: 0; }
  .fx-swap { transform: rotate(90deg); }
  .fx-swap.is-spin { transform: rotate(270deg); }
}
@media (max-width: 540px) {
  .fx-rate-bar { flex-direction: column; align-items: stretch; }
  .fx-rate-actions { justify-content: flex-start; }
  .fx-crypto-card { flex-basis: 200px; }
}

/* Today's gold rate list */
/* Today's Gold Rate — a clean grid of live-style karat widgets.
   24K leads full-width, the rest sit in a tidy 2-column grid. */
.gpc-card--rates { justify-content: flex-start; }
.gpc-card--rates .gpc-card__head { margin-bottom: 0.2rem; }
.gpc-rate-widgets {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem;
  grid-auto-rows: 1fr;                     /* rows fill the panel height evenly */
  margin-top: 0.85rem; flex: 1 1 auto;
}
.gpc-rate-widget {
  display: flex; flex-direction: column; justify-content: center; gap: 0.12rem;
  background: transparent; border: 1px solid var(--line); border-radius: 16px;
  padding: 0.85rem 1rem; min-height: 0;
  transition: border-color 200ms var(--ease), transform 200ms var(--ease);
}
.gpc-rate-widget:hover { border-color: var(--gold); transform: translateY(-1px); }
.gpc-rate-widget--lead { grid-column: 1 / -1; }
.gpc-rate-widget--lead .gpc-rate-widget__v { font-size: 1.85rem; }
.gpc-rate-widget__k {
  font-size: 0.7rem; font-weight: 400; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gold-deep);
}
.gpc-rate-widget__v {
  font-family: var(--font-display); font-size: 1.4rem; font-weight: 300;
  color: var(--ink); letter-spacing: -0.005em; line-height: 1.05;
}
.gpc-rate-widget__u { font-size: 0.66rem; color: var(--ink-muted); letter-spacing: 0.04em; }

/* compact input field unit suffix (g / %) */
.gpc-field-unit { flex: 0 0 auto; color: var(--ink-muted); font-size: 0.95rem; padding-left: 0.3rem; }

/* Main result panel — no fill, just the hairline card. Result is centred. */
.gpc-card--main-result {
  background: transparent;
  text-align: center;
  gap: 0.4rem;
}
.gpc-result {
  display: flex; align-items: baseline; justify-content: center; gap: 0.5rem;
  margin: auto 0;                 /* vertically centred in the card */
}
.gpc-result .amount {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.8vw, 2.6rem);
  font-weight: 300; line-height: 1; color: var(--gold-deep);
  letter-spacing: -0.01em;
}
/* currency mark sits at the numeral's height (the Dirham glyph is scaled to
   ~0.70em of this, which lands at the digits' cap height) */
.gpc-result__cur {
  font-family: var(--font-display); font-size: clamp(1.8rem, 3.8vw, 2.6rem);
  font-weight: 300; line-height: 1; color: var(--gold-deep);
  align-self: baseline;
}
.gpc-formula {
  margin: 0 auto; max-width: 88%;   /* pinned at the bottom, comfortable side space */
  font-size: 0.76rem; color: var(--ink-muted);
  letter-spacing: 0.01em; line-height: 1.5; text-align: center;
  padding-top: 0.75rem; border-top: 1px solid var(--line);
}

/* ── "Show in another currency" — a clean, centred mini-result: label, a
   compact currency chip, the big converted figure and its caption, all stacked
   and centred to mirror the main result. ── */
.gpc-card--side-result {
  background: transparent;
  text-align: center;
  align-items: center; justify-content: center;
  gap: 0.35rem;
}
.gpc-card--side-result .gpc-card__lbl { width: 100%; }
.gpc-card--side-result .gpc-cur-picker-btn {
  width: auto; max-width: 100%;
  margin: 0.55rem auto 0.2rem;
  justify-content: center; gap: 0.55rem;
  padding: 0.45rem 1rem;
}
.gpc-card--side-result .gpc-cur-name-txt { display: none; }   /* keep it minimal */
.gpc-card--side-result .gpc-result {
  justify-content: center; margin: auto 0;
}
.gpc-card--side-result .amount {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.2vw, 2.3rem);
  font-weight: 300; color: var(--gold-deep); letter-spacing: -0.01em; line-height: 1;
}
.gpc-card--side-result .gpc-card__sub { text-align: center; margin-top: 0.25rem; }

/* Disclaimer */
/* Disclaimer — same paper background as every other card, neat spacing */
.gpc-card--disclaimer { background: var(--paper); }
.gpc-disc-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-bottom: 0.4rem;
}
.gpc-disc-agreed {
  font-size: 0.68rem; font-weight: 400; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gold-deep);
  padding: 0.35rem 0.8rem; border: 1px solid var(--gold); border-radius: 999px;
}
.gpc-disc-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem 1.6rem;
  font-size: 0.83rem; color: var(--ink-soft); line-height: 1.6;
}
.gpc-disc-list li { padding-left: 0.95rem; position: relative; }
.gpc-disc-list li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 6px; height: 1px; background: var(--gold);
}
.gpc-disc-list b { color: var(--ink); font-weight: 400; }
@media (max-width: 680px) { .gpc-disc-list { grid-template-columns: 1fr; } }

/* Actions card */
.gpc-card--actions {
  display: flex; flex-direction: column; gap: 0.7rem; justify-content: center;
}
.gpc-asof {
  margin: 0.4rem 0 0; font-size: 0.74rem; color: var(--ink-muted);
  display: inline-flex; align-items: center; gap: 0.4rem;
}
/* timestamp relocated into the page header — quiet text, bottom-aligned with
   the heading block on the opposite side of the row (no pill) */
.gpc-asof--head {
  margin: 0; padding: 0; white-space: nowrap;
  border: 0; border-radius: 0; background: none;
  color: var(--ink-soft); font-size: 0.78rem;
}

/* ── Responsive ── */
@media (max-width: 1000px) {
  .gpc-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "g1    g2    g3"
      "main  main  side"
      "rates rates rates"
      "disc  disc  disc"
      "acts  acts  acts";
  }
  /* rate widgets flow as a multi-column grid when the panel is full-width */
  .gpc-rate-widgets { grid-template-columns: repeat(4, 1fr); }
  .gpc-rate-widget--lead { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .gpc-grid {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
      "g1   g2   g3"
      "main main main"
      "side side side"
      "rates rates rates"
      "disc disc disc"
      "acts acts acts";
  }
  .gpc-rate-widgets { grid-template-columns: 1fr 1fr; }
}

.gs-calc {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 1.6rem;
}
.gs-calc-form {
  min-width: 0;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: clamp(1.4rem, 2.4vw, 1.9rem) clamp(1.4rem, 2.4vw, 2rem);
}
.gs-calc-form-title {
  font-size: 1.3rem; font-weight: 400; letter-spacing: -0.005em;
  margin: 0.4rem 0 1.2rem;
}
.gs-label {
  display: block; font-size: 0.7rem; font-weight: 400; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-muted); margin: 0 0 0.55rem;
}

/* Karat segmented control — pill row, gold active */
.gs-karat-seg {
  display: inline-flex; flex-wrap: wrap; gap: 0.3rem;
  background: #fbf6ec; padding: 0.32rem;
  border-radius: var(--r-pill); border: 1px solid var(--line);
}
.gs-karat-seg button {
  font: inherit; font-weight: 400; font-size: 0.84rem; letter-spacing: 0.04em;
  color: var(--ink-soft); padding: 0.55rem 1.05rem;
  border: 0; border-radius: var(--r-pill); background: transparent; cursor: pointer;
  transition: background-color 180ms var(--ease), color 180ms var(--ease);
}
.gs-karat-seg button.is-active {
  background: var(--gold); color: #fff;
}
.gs-karat-seg button:hover:not(.is-active) { color: var(--ink); background: rgba(34,29,23,0.05); }

.gs-calc-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  margin-top: 1.1rem;
}

/* Unit input — hairline pill, gold focus ring */
.gs-unit-input {
  position: relative; display: flex; align-items: center;
  border: 1px solid var(--line); border-radius: var(--r-pill); background: #fff;
  padding: 0 1rem;
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}
.gs-unit-input:focus-within { border-color: var(--gold); box-shadow: none; }
.gs-unit-input input, .gs-unit-input select {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
  font: inherit; font-size: 0.95rem; color: var(--ink);
  padding: 0.72rem 0;
  appearance: none; -webkit-appearance: none;
}
.gs-unit-input .u { color: var(--ink-muted); font-size: 0.78rem; padding-left: 0.6rem; white-space: nowrap; }

/* VAT toggle row */
.gs-toggle { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.84rem; color: var(--ink-soft); cursor: pointer; }
.gs-toggle input { accent-color: var(--gold); width: 0.95rem; height: 0.95rem; }
.gs-calc-toggle { margin: 1.1rem 0 0; }

.gs-calc-foot { display: flex; gap: 0.7rem; margin-top: 1.6rem; flex-wrap: wrap; align-items: center; }

/* Result card — quiet warm tinted, headline price in gold */
.gs-calc-result {
  background: #fdfaf3; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: clamp(1.4rem, 2.4vw, 1.9rem) clamp(1.4rem, 2.4vw, 2rem);
  display: flex; flex-direction: column; gap: 0.9rem;
}
.gs-calc-total { display: flex; align-items: baseline; gap: 0.55rem; margin: 0.4rem 0 0; }
.gs-calc-total .ccy { font-size: 0.86rem; color: var(--ink-muted); font-weight: 400; letter-spacing: 0.08em; }
.gs-calc-total .num { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.6rem); font-weight: 300; line-height: 1; color: var(--gold-deep); letter-spacing: -0.01em; }
.gs-calc-sub { font-size: 0.82rem; color: var(--ink-soft); margin: 0; }
.gs-calc-break { margin: 0.4rem 0 0; display: flex; flex-direction: column; gap: 0; }
.gs-calc-break > div { display: flex; justify-content: space-between; align-items: baseline; padding: 0.65rem 0; border-bottom: 1px solid var(--line); }
.gs-calc-break > div:last-child { border-bottom: 0; }
.gs-calc-break dt { font-size: 0.84rem; color: var(--ink-soft); margin: 0; }
.gs-calc-break dd { font-family: var(--font-display); font-size: 0.94rem; font-weight: 400; color: var(--ink); margin: 0; }
.gs-calc-break .total { padding-top: 0.8rem !important; border-top: 1px solid var(--line-2); margin-top: 0.4rem; }
.gs-calc-break .total dt { color: var(--ink); font-weight: 400; }
.gs-calc-break .total dd { color: var(--gold-deep); font-size: 1.05rem; font-weight: 400; }
.gs-calc-rate {
  display: flex; justify-content: space-between; align-items: baseline; margin: 0;
  padding-top: 0.9rem; border-top: 1px dashed var(--line);
  font-size: 0.78rem; color: var(--ink-muted);
}
.gs-calc-rate strong { font-family: var(--font-display); color: var(--ink); font-weight: 400; font-size: 0.92rem; }

/* Other-currencies grid */
.gs-calc-fx { margin-top: 2rem; }
.gs-calc-fx-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem;
}
.gs-calc-fx-cell {
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 0.9rem 1rem; background: #fff;
  display: flex; flex-direction: column; gap: 0.2rem;
  transition: border-color 180ms var(--ease);
}
.gs-calc-fx-cell:hover { border-color: rgba(189,158,112,0.45); }
.gs-calc-fx-cell .k {
  font-size: 0.68rem; font-weight: 400; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gold-deep);
}
.gs-calc-fx-cell .v {
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 400; color: var(--ink);
}

/* Footnote */
.gs-calc-note { margin: 1.6rem 0 0; font-size: 0.78rem; color: var(--ink-muted); line-height: 1.65; max-width: 78ch; }

@media (max-width: 860px) {
  .gs-calc { grid-template-columns: 1fr; }
  .gs-calc-row { grid-template-columns: 1fr; }
  .gs-calc-fx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 500px) {
  .gs-calc-fx-grid { grid-template-columns: 1fr; }
}

/* small reusable summary disclosure used on gold-rates */
.gs-summary > summary {
  list-style: none; cursor: pointer; color: var(--gold-deep);
  font-size: 0.86rem; font-weight: 400; letter-spacing: 0.02em;
}
.gs-summary > summary::-webkit-details-marker { display: none; }
.gs-summary[open] > summary { margin-bottom: 0.4rem; }

/* =========================================================
   Products page
   ========================================================= */
.gs-products-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.gs-product-tile {
  display: grid; grid-template-columns: 280px 1fr; gap: 1.4rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1); padding: 1.6rem; align-items: stretch; overflow: hidden;
}
.gs-product-art {
  background: #f6ecd6;                  /* solid warm tint — no gradient */
  border-radius: var(--r-md); padding: 1rem; aspect-ratio: 1 / 1; max-height: 280px;
  display: flex; align-items: center; justify-content: center;
}
.gs-product-art--alt { background: #f3ead2; }
.gs-product-body { display: flex; flex-direction: column; min-width: 0; }
.gs-product-mark {
  font-size: 0.72rem; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-deep);
}
.gs-product-title { font-size: 1.5rem; font-weight: 400; margin: 0.4rem 0 0.6rem; letter-spacing: -0.01em; color: var(--ink); }
.gs-product-lede { font-size: 0.96rem; line-height: 1.6; color: var(--ink-soft); }
.gs-product-traits { margin: 0.9rem 0 1.1rem; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.gs-product-traits li {
  padding-left: 1.1rem; position: relative; font-size: 0.86rem; color: var(--ink-soft);
}
.gs-product-traits li::before {
  content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 1px;
  background: var(--gold);
}
.gs-product-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-top: auto; padding-top: 1rem; }
.gs-products-note { margin-top: 1.6rem; font-size: 0.86rem; color: var(--ink-muted); max-width: 70ch; }

@media (max-width: 1000px) { .gs-products-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .gs-product-tile { grid-template-columns: 1fr; }
  .gs-product-art { max-width: 240px; margin: 0 auto; }
}

/* =========================================================
   Gold outline button (gold line by default, fills on hover)
   ========================================================= */
.gs-page .gs-btn.gs-btn--goldline,
.gs-page a.gs-btn.gs-btn--goldline {
  color: var(--gold-deep) !important;
  background: transparent !important;
  border: 1px solid var(--gold) !important;
  font-weight: 400;
  letter-spacing: 0.03em;
  transition: background-color 200ms var(--ease), color 200ms var(--ease),
              border-color 200ms var(--ease), transform 140ms var(--ease);
}
.gs-page .gs-btn.gs-btn--goldline .gs-icon { color: currentColor; }
.gs-page .gs-btn.gs-btn--goldline:hover,
.gs-page a.gs-btn.gs-btn--goldline:hover {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  color: #fff !important;
}
.gs-page .gs-btn.gs-btn--goldline:active { transform: scale(0.985); }
/* size override to beat any inherited theme padding/font on the rate-table buttons —
   kept in step with the standard .gs-btn--lg so every button stays consistent */
.gs-page .gs-btn.gs-btn--lg,
.gs-page a.gs-btn.gs-btn--lg {
  padding: 0.82em 1.55em !important;
  font-size: 0.88rem !important;
}

/* Rate-table action row — one balanced, centred group of matching pills */
.gs-ratebox-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}

/* ── Unified action buttons (gold-rates · bullion · forex) ──────────────────
   Every control in the row — chart, currency picker, calculator, share, and
   the page-specific links — wears the SAME gold-outline pill so the cluster
   reads as one neat set. !important beats the per-page button variants
   (--primary / --ghost / .gs-rate-ccy / .gs-share-btn) without touching markup. */
.gs-ratebox-actions > .gs-btn,
.gs-ratebox-actions > .gs-rate-ccy,
.gs-ratebox-actions > .gs-share-btn,
.fx-rate-actions > .gs-btn,
.fx-rate-actions > .gs-share-btn {
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 1.25rem !important;
  border-radius: 999px !important;
  border: 1px solid var(--gold) !important;
  background: transparent !important;
  color: var(--gold-deep) !important;
  box-shadow: none !important;
  font-size: 0.86rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.03em;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  transition: background-color 200ms var(--ease), color 200ms var(--ease),
              border-color 200ms var(--ease), transform 140ms var(--ease);
}
.gs-ratebox-actions > .gs-btn .gs-icon,
.gs-ratebox-actions > .gs-share-btn svg,
.fx-rate-actions > .gs-btn .gs-icon,
.fx-rate-actions > .gs-share-btn svg {
  width: 18px; height: 18px; flex: 0 0 auto;
  color: var(--gold-deep) !important; stroke: currentColor;
}
.gs-ratebox-actions > .gs-btn:hover,
.gs-ratebox-actions > .gs-rate-ccy:hover,
.gs-ratebox-actions > .gs-share-btn:hover,
.fx-rate-actions > .gs-btn:hover,
.fx-rate-actions > .gs-share-btn:hover {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  color: #fff !important;
}
.gs-ratebox-actions > .gs-btn:hover .gs-icon,
.gs-ratebox-actions > .gs-share-btn:hover svg,
.fx-rate-actions > .gs-btn:hover .gs-icon,
.fx-rate-actions > .gs-share-btn:hover svg { color: #fff !important; }
/* currency-picker label rides the same gold-deep → white-on-hover as the rest */
.gs-ratebox-actions > .gs-rate-ccy .gs-rate-ccy-name { color: var(--gold-deep) !important; }
.gs-ratebox-actions > .gs-rate-ccy:hover .gs-rate-ccy-name { color: #fff !important; }
.gs-ratebox-actions > *:active,
.fx-rate-actions > *:active { transform: scale(0.97); }

/* Desktop only: every pill the SAME width with an equal gap, so the cluster
   on the live-gold-rate and bullion pages reads as a perfectly even set.
   (Mobile circular/floating treatment lives in the max-width:768px block.) */
@media (min-width: 769px) {
  /* span the full rate-box width: first pill flush left, last flush right,
     equal gaps between — aligned to the rate grid's margins above. */
  .gs-ratebox-actions { justify-content: space-between; gap: 0.85rem; }
  .gs-ratebox-actions > .gs-btn,
  .gs-ratebox-actions > .gs-rate-ccy,
  .gs-ratebox-actions > .gs-share-btn {
    min-width: 234px !important;   /* fits the longest label so every pill is identical */
    justify-content: center !important;
  }
}

/* Inline currency picker — sits between the two rate-box buttons.
   No background, no stroke — quiet typography only with a subtle hover lift. */
/* Currency picker — a quiet pill: coins icon · flag · currency name */
.gs-rate-ccy {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--line-2); background: var(--surface-2);
  border-radius: 999px;
  cursor: pointer; color: var(--ink-soft); font: inherit;
  font-size: 0.84rem; letter-spacing: 0.02em;
  transition: color 180ms var(--ease), border-color 180ms var(--ease),
              background-color 180ms var(--ease), box-shadow 180ms var(--ease);
}
.gs-rate-ccy:hover { color: var(--ink); border-color: var(--gold); background: var(--paper); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05); }
.gs-rate-ccy:focus-visible { outline: none; border-color: var(--gold-deep); color: var(--gold-deep); }
.gs-rate-ccy-flag {
  width: 26px; height: 18px; object-fit: contain; border-radius: 3px;
  background: transparent;
}
.gs-rate-ccy-name { color: var(--ink); font-size: 0.84rem; white-space: nowrap; }

@media (max-width: 720px) {
  .gs-ratebox-actions { gap: 0.6rem; }
}

/* ── Disclaimer "Important Notice" modal ─────────────────────────────── */
.gs-disc-lock { overflow: hidden; }
.gs-disc-overlay {
  position: fixed; inset: 0; z-index: 2147483646;
  display: flex; align-items: center; justify-content: center;
  /* A generous, notch-aware gutter so the dimmed backdrop frames the panel on
     every side — that visible margin is what tells a phone user "this is a
     popup", not a page. */
  padding: max(28px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right))
           max(28px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  background: rgba(20, 16, 12, 0.55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none;
  transition: opacity 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.gs-disc-overlay.is-open { opacity: 1; pointer-events: auto; }
.gs-disc-modal {
  background: var(--paper, #fff);
  border-radius: 24px;
  padding: clamp(1.8rem, 4vw, 2.75rem) clamp(1.4rem, 4vw, 2.5rem) clamp(1.5rem, 3vw, 2.25rem);
  max-width: 560px; width: 100%;
  /* dvh, not vh: on iOS Safari vh is the LARGE viewport, so the action buttons
     could sit behind the URL bar. Capping at 80dvh also guarantees dimmed
     backdrop above and below on tall phones. vh line first as an old-browser
     fallback. */
  max-height: calc(100vh - 56px);
  max-height: min(80dvh, calc(100dvh - 56px));
  box-shadow: 0 28px 80px rgba(20, 16, 12, 0.30);
  text-align: center;
  font-family: var(--font-display, "Josefin GS"), system-ui, sans-serif;
  transform: translateY(16px) scale(0.97);
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
  display: flex; flex-direction: column;
}
.gs-disc-overlay.is-open .gs-disc-modal { transform: translateY(0) scale(1); }
.gs-disc-icon { color: var(--gold-deep, #9a7c4f); line-height: 1; margin-bottom: 0.9rem; }
.gs-disc-icon svg { display: block; margin: 0 auto; }
.gs-disc-overlay .gs-disc-title {
  margin: 0 0 1.5rem; font-size: clamp(1.3rem, 2.6vw, 1.55rem);
  font-weight: 300; color: var(--ink, #3d3a36); letter-spacing: -0.005em; text-align: center;
}
/* hairline divider keeps the heading and the body cleanly separated */
.gs-disc-overlay .gs-disc-title::after {
  content: ""; display: block;
  width: 44px; height: 1px; margin: 1rem auto 0;
  background: var(--line-2, #e2ddd4);
}
.gs-disc-overlay .gs-disc-body {
  text-align: left; overflow-y: auto; min-height: 0;
  margin-bottom: 1.8rem; padding-right: 8px;
  scrollbar-width: thin; scrollbar-color: var(--line-2, #ddd) transparent;
}
.gs-disc-body::-webkit-scrollbar { width: 5px; }
.gs-disc-body::-webkit-scrollbar-thumb { background: var(--line-2, #ddd); border-radius: 3px; }
.gs-disc-overlay .gs-disc-body p {
  margin: 0 0 1rem; font-size: 0.875rem; line-height: 1.8;
  font-weight: 300; color: var(--ink-soft, #66615c);
}
.gs-disc-overlay .gs-disc-body p:last-child { margin-bottom: 0; }
.gs-disc-overlay .gs-disc-body p strong { color: var(--ink, #3d3a36); font-weight: 400; }
.gs-disc-actions { display: flex; gap: 0.7rem; }
.gs-disc-actions button {
  flex: 1 1 0; cursor: pointer; font: inherit;
  border: 0; border-radius: 999px; padding: 0.85rem 1.2rem;
  font-size: 0.9rem; letter-spacing: 0.02em;
  transition: background-color 180ms var(--ease), color 180ms var(--ease);
}
.gs-disc-agree { background: var(--gold, #bd9e70); color: #fff; font-weight: 400; }
.gs-disc-agree:hover { background: var(--gold-deep, #9a7c4f); }
.gs-disc-decline { background: var(--surface-2, #f4f4f4); color: var(--ink-soft, #66615c); font-weight: 400; }
.gs-disc-decline:hover { background: #ebe7e0; color: var(--ink, #3d3a36); }

/* ── Interactive carousel (About · Explore) ──────────────────────────── */
.gs-carousel { position: relative; }
.gs-carousel__viewport {
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
}
.gs-carousel__viewport::-webkit-scrollbar { display: none; }
.gs-carousel__viewport.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.gs-carousel__viewport:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 18px; }
.gs-carousel__track {
  display: flex; gap: 1.25rem;
  padding: 6px 2px;
}
.gs-carousel__item {
  flex: 0 0 calc((100% - 2 * 1.25rem) / 3);
  scroll-snap-align: start;
  margin: 0;            /* override gs-card grid margins */
}
@media (max-width: 900px) {
  .gs-carousel__item { flex-basis: calc((100% - 1.25rem) / 2); }
}
@media (max-width: 600px) {
  .gs-carousel__item { flex-basis: 86%; }
}
.gs-carousel__controls {
  display: flex; align-items: center; justify-content: center;
  gap: 1rem; margin-top: 1.6rem;
}
.gs-carousel__nav {
  width: 44px; height: 44px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--paper); color: var(--ink-soft); cursor: pointer;
  transition: color 180ms var(--ease), border-color 180ms var(--ease),
              background-color 180ms var(--ease), box-shadow 180ms var(--ease), opacity 180ms var(--ease);
}
.gs-carousel__nav:hover { color: #fff; background: var(--gold); border-color: var(--gold); box-shadow: 0 6px 16px rgba(189, 158, 112, 0.35); }
.gs-carousel__nav:disabled { opacity: 0.35; cursor: default; box-shadow: none; background: var(--surface-2); color: var(--ink-muted); border-color: var(--line); }
.gs-carousel__dots { display: flex; align-items: center; gap: 8px; }
.gs-carousel__dot {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px;
  background: var(--line-2, #d9d3c8); cursor: pointer;
  transition: width 220ms var(--ease), background-color 220ms var(--ease);
}
.gs-carousel__dot.is-active { width: 22px; background: var(--gold); }

/* ── About · Services + Products offer cards ─────────────────────────── */
.gs-about-offer {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4rem;
}
@media (max-width: 760px) { .gs-about-offer { grid-template-columns: 1fr; } }
.gs-offer-card {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 0.55rem;
  background: var(--paper); border: 0; border-radius: 24px;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.06);
  text-decoration: none; color: inherit;
  transition: box-shadow 240ms var(--ease), transform 240ms var(--ease);
}
.gs-offer-card:hover { box-shadow: 0 22px 56px rgba(0, 0, 0, 0.10); transform: translateY(-3px); }
.gs-offer-card__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 14px;
  background: var(--surface-2); color: var(--gold-deep); margin-bottom: 0.4rem;
}
.gs-offer-card__ico .gs-icon { width: 24px; height: 24px; }
.gs-offer-card__kicker {
  font-size: 0.72rem; font-weight: 400; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gold-deep);
}
.gs-offer-card h3 {
  margin: 0; font-size: clamp(1.2rem, 2vw, 1.45rem); font-weight: 300;
  color: var(--ink); letter-spacing: -0.005em; line-height: 1.2;
}
.gs-offer-card > p { margin: 0.15rem 0 0.4rem; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.65; }
.gs-offer-chips {
  list-style: none; margin: 0.3rem 0 0.6rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.gs-offer-chips li {
  font-size: 0.78rem; color: var(--ink-soft); letter-spacing: 0.01em;
  background: var(--surface-2); border-radius: 999px; padding: 0.4rem 0.85rem;
}
.gs-offer-card__foot { margin-top: auto; padding-top: 0.4rem; color: var(--gold-deep); font-size: 0.9rem; }

/* =========================================================
   Karat-at-a-glance widget (under the chart)
   ========================================================= */
.gs-karat-glance {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.8rem;
  margin-top: 1.4rem;
}
.gs-karat-card {
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 0.95rem 1rem; background: var(--paper); display: flex; flex-direction: column; gap: 0.25rem;
  transition: border-color 160ms var(--ease), transform 160ms var(--ease);
}
.gs-karat-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.gs-karat-card .kc-k { font-size: 0.78rem; font-weight: 400; letter-spacing: 0.12em; color: var(--ink-muted); text-transform: uppercase; }
.gs-karat-card .kc-v { font-family: var(--font-display); font-size: 1.25rem; font-weight: 400; color: var(--ink); line-height: 1.05; }
.gs-karat-card .kc-r { font-size: 0.74rem; color: var(--ink-muted); }
.gs-karat-card .kc-spark { margin-top: 0.4rem; }
.gs-karat-card .kc-delta { font-size: 0.78rem; font-weight: 400; }
.gs-karat-card .kc-delta.up { color: var(--rise); }
.gs-karat-card .kc-delta.down { color: var(--fall); }
.gs-karat-card .kc-tag { display: none; }

/* mobile: a featured 24K block above a 2x2 of the other karats (desktop unchanged) */
@media (max-width: 860px) {
  .gs-karat-glance { grid-template-columns: repeat(2, 1fr); }
  .gs-karat-card--hero {
    grid-column: 1 / -1; position: relative;
    /* same hairline + paper surface as the other karat cards — no gold outline
       or gold-tint fill; the gold 24K label is the only accent it needs */
    border-color: var(--line);
    background: var(--paper);
  }
  .gs-karat-card--hero .kc-tag {
    display: inline-block; align-self: flex-start;
    font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--gold-deep); border: 1px solid var(--gold); border-radius: 999px;
    padding: 0.26em 0.66em; margin-bottom: 0.45rem; background: rgba(255, 255, 255, 0.55);
  }
  .gs-karat-card--hero .kc-k { color: var(--gold-deep); }
  .gs-karat-card--hero .kc-v { font-size: 1.85rem; }
  .gs-karat-card--hero .kc-spark { height: 40px; }
}

/* iframe wrapper for calculator embed */
.gs-calc-frame-wrap { padding: 1.2rem 0 0; }

/* =========================================================
   Chart panel polish — pill filters, breathable spacing, motion
   ========================================================= */
.gs-chartpanel {
  padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1.4rem, 3vw, 2.4rem);
}
.gs-chartpanel .gs-chart-headrow { margin-bottom: 1.4rem; }
.gs-chartpanel .gs-chart-controls {
  display: flex; flex-wrap: wrap; gap: 1.6rem 2rem;
  margin: 0.4rem 0 1.2rem;
  align-items: center; justify-content: space-between;
}
.gs-chartpanel .gs-chart-controls > div { display: flex; align-items: center; gap: 0.8rem; }
.gs-chartpanel .gs-chart-controls .lbl {
  font-size: 0.72rem; font-weight: 400; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-muted);
}
.gs-chartpanel .gs-unitnote { margin: 0.4rem 0 1rem; font-size: 0.76rem; color: var(--ink-muted); }
.gs-chartpanel .gs-chart-wrap { margin: 0.6rem 0 1.2rem; }
.gs-chartpanel .gs-kpis { margin-top: 1.4rem; gap: 0.9rem; }

/* Pill filter group (karat + range segs) */
.gs-page .gs-chartpanel .gs-seg {
  display: inline-flex; gap: 0.3rem;
  background: var(--surface-2);
  border: 0;
  border-radius: 999px;
  padding: 0.32rem;
}
.gs-page .gs-chartpanel .gs-seg button {
  font: inherit; font-weight: 400; font-size: 0.84rem; letter-spacing: 0.04em;
  color: var(--ink-soft);
  padding: 0.5rem 1rem;
  border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  transition: background-color 200ms var(--ease), color 200ms var(--ease), transform 140ms var(--ease);
}
.gs-page .gs-chartpanel .gs-seg button.is-active {
  background: var(--gold); color: #fff;
  box-shadow: 0 4px 14px -6px rgba(189, 158, 112, 0.7);
}
.gs-page .gs-chartpanel .gs-seg button:not(.is-active):hover {
  color: var(--ink); background: rgba(34, 29, 23, 0.05);
}
.gs-page .gs-chartpanel .gs-seg button:active { transform: scale(0.96); }

/* ── Mobile: stack each control label above a full-width segmented pill so the
   5 karats (gold rate) / 4 metals (bullion) never overflow. RTL-safe (column
   stack + equal-flex buttons mirror automatically). ───────────────────────── */
@media (max-width: 680px) {
  .gs-page .gs-chartpanel .gs-chart-controls { flex-direction: column; align-items: stretch; gap: 1rem; }
  .gs-page .gs-chartpanel .gs-chart-controls > div { flex-direction: column; align-items: stretch; gap: 0.5rem; width: 100%; }
  .gs-page .gs-chartpanel .gs-chart-controls .lbl { margin-inline-end: 0; }
  .gs-page .gs-chartpanel .gs-seg { display: flex; width: 100%; }
  .gs-page .gs-chartpanel .gs-seg button {
    flex: 1 1 0; min-width: 0; text-align: center; white-space: nowrap;
    padding: 0.55rem 0.3rem; font-size: 0.8rem; letter-spacing: 0.01em;
  }
}

/* KPI subtle pulse on update */
.gs-page .gs-kpi .k-value {
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), color 300ms ease;
}
.gs-page .gs-kpi .k-value.is-pulse { animation: gsKpiPulse 380ms cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes gsKpiPulse {
  0%   { transform: translateY(4px); opacity: 0.4; }
  100% { transform: translateY(0);   opacity: 1; }
}

/* Active karat card in the at-a-glance widget */
.gs-karat-card.is-active {
  /* no gold outline, no background — the gold karat label is the only marker */
  background: transparent;
  box-shadow: none;
}
.gs-karat-card.is-active .kc-k { color: var(--gold-deep); }
.gs-karat-card { transition: transform 200ms var(--ease), border-color 200ms var(--ease), box-shadow 200ms var(--ease), background-color 200ms var(--ease); }

/* Accessible utility — hide visually but keep for screen readers */
.sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}

/* =========================================================
   Unified site header (white glass-header replica)
   ========================================================= */
.gs-body { margin: 0; background: #fff; color: var(--ink, #221d17); font-family: "Josefin GS", system-ui, -apple-system, sans-serif; }
.gs-site-header {
  position: sticky; top: 0; z-index: 50;
  /* Glassmorphism — frosted translucent bar, desktop + mobile (same element) */
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  /* hairline on the TOP edge (not the bottom), with a diffuse, quiet shadow */
  border-top: 1px solid rgba(34, 29, 23, 0.10);
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 22px 44px -34px rgba(34, 29, 23, 0.18);
  transition: background 260ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Frost deepens a touch once the page is scrolled (JS toggles .is-stuck) */
.gs-site-header.is-stuck {
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 18px 40px -30px rgba(34, 29, 23, 0.28);
}
/* Fallback for browsers without backdrop-filter — stay fully opaque so text
   never washes out over busy content underneath. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .gs-site-header,
  .gs-site-header.is-stuck { background: #ffffff; }
}
/* every link in the header keeps a single colour — no inherited underline */
.gs-site-header a { text-decoration: none !important; }
.gs-site-header__topbar {
  display: none;
  align-items: center; justify-content: space-between;
  /* match the .container gutter (15px) and keep the row inside the same 1200 frame */
  max-width: 1200px; margin-inline: auto;
  padding: 0.4rem 15px 0.35rem;
  /* homepage utility-bar parity: 10px / .18em, light stroke */
  font-size: 10px; font-weight: 300; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(34, 29, 23, 0.68);
}
.gs-site-header__topnav-left, .gs-site-header__topnav-right { display: flex; align-items: center; gap: 0.9rem; }
.gs-site-header__topbar a {
  color: rgba(34, 29, 23, 0.7); font-weight: 300;
  transition: color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.gs-site-header__topbar a:hover { color: var(--ink, #221d17); }
.gs-site-header__sep { color: rgba(34, 29, 23, 0.18); }
.gs-site-header__lang {
  background: transparent; border: 0; cursor: pointer;
  font: inherit; font-size: 10px; font-weight: 300; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(34, 29, 23, 0.68);
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0;
  transition: color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.gs-site-header__lang:hover { color: var(--ink, #221d17); }

/* language dropdown */
.gs-lang { position: relative; display: inline-flex; }
.gs-lang__chev { transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1); }
.gs-lang.is-open .gs-lang__chev { transform: rotate(180deg); }
.gs-lang__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  margin: 0; padding: 5px;
  list-style: none;
  min-width: 132px;
  background: #ffffff;
  border: 1px solid rgba(34, 29, 23, 0.10);
  border-radius: 12px;
  box-shadow: 0 12px 30px -10px rgba(20, 20, 20, 0.18), 0 2px 6px rgba(20, 20, 20, 0.05);
  z-index: 60;
  animation: gs-lang-in 180ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
[dir="rtl"] .gs-lang__menu { right: auto; left: 0; }
@keyframes gs-lang-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.gs-lang__menu li { margin: 0; }
.gs-lang__menu button {
  width: 100%;
  display: flex; align-items: center; justify-content: flex-start;
  gap: 0.5rem;
  background: transparent; border: 0; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 400; letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink, #3d3a36);
  padding: 9px 12px;
  border-radius: 8px;
  text-align: start;
  transition: background 150ms cubic-bezier(0.22, 1, 0.36, 1), color 150ms cubic-bezier(0.22, 1, 0.36, 1);
}
.gs-lang__menu button:hover { background: rgba(34, 29, 23, 0.04); }
.gs-lang__menu button.is-active { color: var(--gold-deep, #9a7c4f); font-weight: 400; }
.gs-lang__menu button.is-active::after {
  content: "";
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold, #bd9e70);
  margin-inline-start: auto;
}

.gs-site-header__row {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center;
  max-width: 1200px; margin-inline: auto;
  padding: 0.8rem 15px;
}
/* jeweller profile cover frame shares the header's frame + gutters at every
   width (tablet + ≥1024px overrides sit beside the header's below) */
.gs-vp-coverframe { padding-inline: 15px; }  /* full-bleed like the header row */
.gs-site-header__row-left { display: flex; align-items: center; }
.gs-site-header__brand { display: inline-flex; justify-content: center; }
.gs-site-header__brand img {
  /* original size — matches the homepage glass-header */
  width: clamp(176px, 22vw, 284px); height: auto; display: block; object-fit: contain;
  /* native gold — no filter on interior pages */
}
.gs-site-header__row-right { display: flex; align-items: center; justify-content: flex-end; }

.gs-site-header__burger {
  background: transparent; border: 0; cursor: pointer; color: rgba(34, 29, 23, 0.7);
  padding: 0.4rem; display: none;
}

/* search — a compact icon at the far right of the top utility bar
   (matches the homepage glass-header). */
.gs-site-header__search {
  display: inline-flex; align-items: center; justify-content: center;
  appearance: none; -webkit-appearance: none;
  background: transparent; border: 0; border-radius: 0;
  padding: 0.1rem; margin: 0; cursor: pointer;
  color: rgba(34, 29, 23, 0.7);
  transition: color 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.gs-site-header__search:hover { color: var(--ink, #221d17); }
.gs-site-header__search:focus { outline: none; }
.gs-site-header__search:focus-visible { outline: none; color: var(--gold-deep, #9a7c4f); }
.gs-site-header__search-mobile { display: none; color: rgba(34, 29, 23, 0.6); padding: 0.3rem; }

/* desktop search field — a search-box "line" in the logo row's left cell.
   It looks like an input but opens the existing search drawer on click. */
.gs-site-header__search-field { display: none; }
@media (min-width: 1024px) {
  /* homepage glass-header parity: a bare magnifier at the far right of the
     logo row (no "Search" label, no underline). */
  .gs-site-header__search-field {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 4px; margin: 0;
    background: transparent; border: 0;
    color: rgba(34, 29, 23, 0.6); cursor: pointer;
    transition: color 200ms cubic-bezier(0.22,1,0.36,1);
  }
  .gs-site-header__search-field:hover,
  .gs-site-header__search-field:focus-visible {
    outline: none; color: var(--ink, #221d17);
  }
  .gs-site-header__search-field svg { flex: 0 0 auto; }
  /* the search moved into the logo row, so drop the old top-right icon */
  .gs-site-header__topnav-right .gs-site-header__search,
  .gs-site-header__topnav-right .gs-site-header__sep:last-of-type { display: none; }
}
/* homepage SPA glass-header: drop the stray underline beneath its search icon
   (the only .border-b in that header) — icon-only, matching the PHP pages. */
.gs-hero-header .border-b { border-bottom-width: 0 !important; }
/* mobile-only header icon buttons: search (left) + language (right) */
.gs-site-header__search-mob-left,
.gs-site-header__lang-mob {
  display: none; align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer; padding: 0.3rem;
  color: rgba(34, 29, 23, 0.6);
  transition: color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.gs-site-header__search-mob-left:hover,
.gs-site-header__lang-mob:hover { color: var(--ink, #221d17); }
.gs-site-header__search-mob-left:focus-visible,
.gs-site-header__lang-mob:focus-visible { outline: none; color: var(--gold-deep, #9a7c4f); }

/* primary nav row */
.gs-site-header__nav {
  display: none;
  align-items: center; justify-content: center;
  max-width: 1200px; margin-inline: auto;
  padding: 0.2rem 15px 0.95rem;
}
/* two equal halves so the wide gap lands dead-centre under the logo. The links
   keep a small, even spacing (the `gap`) and hug toward that centre gap, so the
   ONLY large space in the bar is the one under the logo. flex-start/flex-end
   follow the inline axis, so this mirrors correctly in LTR and RTL. */
.gs-site-header__nav-side {
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center;
  gap: 2rem;
}
.gs-site-header__nav-side--start { justify-content: flex-end; }
.gs-site-header__nav-side--end   { justify-content: flex-start; }
/* Centre gap — matches the homepage glass-header exactly. The SPA builds its
   gap from two halves each padded clamp(3rem, 6.5vw, 8rem), so the total space
   between "Souq" and "Calculator" is double that. */
.gs-site-header__nav-gap { flex: 0 0 clamp(6rem, 13vw, 16rem); }
.gs-site-header__nav-link {
  /* Manrope 300 to match the homepage hero-header nav exactly (thin weight);
     colour still adapts per page (muted-grey/gold on light pages, white on souq). */
  flex: 0 0 auto;
  font-family: "Manrope", "Josefin Sans", system-ui, -apple-system, sans-serif;
  font-size: 11px; font-weight: 300; letter-spacing: 0.18em; text-transform: uppercase;
  /* near-black warm grey — the white-surface adaptation of the homepage's white nav */
  color: #2f2b26;
  transition: color 180ms cubic-bezier(0.22, 1, 0.36, 1);
  white-space: nowrap;
  text-decoration: none !important;
}
/* hover/active: a quiet gold tint, no weight shift so nothing reflows */
.gs-site-header__nav-link:hover { color: var(--gold-deep, #9a7c4f); }
.gs-site-header__nav-link.is-active { color: var(--gold-deep, #9a7c4f); }

/* desktop ≥ 1024px: show full chrome */
@media (min-width: 1024px) {
  .gs-site-header__topbar { display: flex; }
  .gs-site-header__nav { display: flex; }
  /* Match the homepage glass-header gutters exactly: the topbar and logo row use
     px-16 (64px) inside a max-w-7xl (1280px) content column, the primary nav uses
     px-10 (40px). Cap = 1280 content + 2×64 gutter = 1408px so wide screens inset
     identically. Base (mobile) padding above is left untouched. */
  .gs-site-header__topbar { max-width: 1408px; padding-inline: 64px; }
  .gs-site-header__row    { max-width: 1408px; padding-inline: 64px; }
  .gs-vp-coverframe       { padding-inline: 64px; }  /* cover edges = header edges */
  /* the SPA nav is full-bleed (px-10, no max-width) — the two flex:1 halves
     centre the logo gap, so it must NOT be capped like the rows above it */
  .gs-site-header__nav    { max-width: none; padding-inline: 40px; padding-top: 0.625rem; padding-bottom: 0.625rem; }
}
/* mobile (< 1024px): collapse to one centred row —
   search on the left (was the burger), language switcher on the right. */
@media (max-width: 1023px) {
  /* match the reference mobile header ratio: ~20px row padding, 220px logo,
     24px icon glyphs in a 44px tap target */
  .gs-site-header__row {
    grid-template-columns: 44px auto 44px;
    padding: 1.25rem 15px;
  }
  .gs-site-header__brand img { width: min(220px, 58vw); }
  .gs-site-header__burger { display: none; }
  .gs-site-header__search { display: none; }
  .gs-site-header__search-mobile { display: none; }
  .gs-site-header__search-mob-left,
  .gs-site-header__lang-mob { display: inline-flex; }
  .gs-site-header__search-mob-left svg,
  .gs-site-header__lang-mob svg { width: 24px; height: 24px; }
}

/* ───────── site-wide search — a centred glassmorphism command palette ───────── */
.gs-header-search-scrim {
  /* sits BELOW every header (PHP .gs-site-header z50, SPA .gs-hero-header z30)
     so the header stays crisp + fully clickable; only the page body behind it
     is dimmed + blurred. */
  position: fixed; inset: 0; z-index: 25;
  background: rgba(24, 19, 12, 0.30);
  backdrop-filter: blur(7px) saturate(120%); -webkit-backdrop-filter: blur(7px) saturate(120%);
  opacity: 0; pointer-events: none;
  transition: opacity 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.gs-header-search-scrim.is-open { opacity: 1; pointer-events: auto; }

.gs-header-search-drop {
  /* above the scrim, still under the header — the palette physically drops
     just beneath the header (offset = measured header height + a gap). */
  position: fixed; inset: 0; z-index: 28;
  display: flex; align-items: flex-start; justify-content: center;
  padding: calc(var(--gs-hdr-h, 120px) + 14px) 16px 24px;
  pointer-events: none;
}
/* NOTE: this drawer renders in the header, OUTSIDE .gs-page, so the GS design
   tokens are not in scope — every var() carries an explicit fallback value. */
.gs-header-search-drop__inner {
  /* width tracks the header nav span (HOME … CURRENCY); both are centred so
     the palette lines up under the nav row. */
  width: 100%; max-width: 960px;
  /* frosted glass — translucent paper over a heavy blur */
  background: rgba(255, 255, 255, 0.66);
  backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 24px;
  box-shadow: 0 40px 90px -36px rgba(24, 19, 12, 0.50),
              0 2px 10px rgba(24, 19, 12, 0.06),
              inset 0 1px 0 rgba(255, 255, 255, 0.60);
  overflow: hidden;
  transform: translateY(-12px) scale(0.982);
  opacity: 0;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), opacity 150ms ease;
  /* MUST stay none while closed. The panel is only faded out (opacity: 0), not
     removed from layout, and a transparent element still receives clicks — so
     an `auto` here put a dead 960px-wide band under the header on EVERY page.
     It is what made the directory's filter bar unclickable. */
  pointer-events: none;
}
.gs-header-search-drop.is-open .gs-header-search-drop__inner {
  transform: translateY(0) scale(1); opacity: 1;
  pointer-events: auto;
}
/* opaque fallback where backdrop-filter is unsupported */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .gs-header-search-drop__inner { background: #fdfcfa; }
}

/* search bar — a rounded translucent field + a quiet ghost close button */
.gs-header-search-drop__bar {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 1.5rem 1.6rem 0.9rem;
}
.gs-hsd-field {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.82rem 1.1rem;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(26, 23, 20, 0.10);
  border-radius: 999px;
  transition: border-color 160ms cubic-bezier(0.23,1,0.32,1), background-color 160ms cubic-bezier(0.23,1,0.32,1), box-shadow 160ms cubic-bezier(0.23,1,0.32,1);
}
.gs-hsd-field:focus-within {
  /* a hairline gold line only — no glow, no shadow */
  border-color: var(--gold, #bd9e70);
  background: rgba(255, 255, 255, 0.85);
  box-shadow: none;
}
.gs-hsd-field > svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--gold-deep, #9a7c4f); }
.gs-header-search-drop__bar input {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
  font: inherit; font-family: "Josefin GS", system-ui, sans-serif;
  /* thin, airy stroke — light weight with a touch more tracking */
  font-size: 0.98rem; font-weight: 300; letter-spacing: 0.035em;
  color: var(--ink, #3d3a36);
}
.gs-header-search-drop__bar input::placeholder {
  color: var(--ink-faint, #b8b1a8); font-weight: 300; letter-spacing: 0.035em;
}
.gs-header-search-drop__bar input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.gs-header-search-drop__close {
  flex: 0 0 auto;
  width: 38px; height: 38px; border-radius: 999px;
  border: 0; background: transparent; color: var(--ink-soft, #66615c);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background-color 160ms cubic-bezier(0.23,1,0.32,1), color 160ms cubic-bezier(0.23,1,0.32,1);
}
.gs-header-search-drop__close:hover { background: var(--surface-2, #f4f4f4); color: var(--ink, #3d3a36); }

.gs-header-search-drop__results {
  max-height: 62vh; overflow-y: auto;
  padding: 0.2rem 0.9rem 0.7rem;
  scrollbar-width: thin; scrollbar-color: rgba(34, 29, 23, 0.14) transparent;
}
.gs-header-search-drop__results::-webkit-scrollbar { width: 8px; }
.gs-header-search-drop__results::-webkit-scrollbar-thumb { background: rgba(34, 29, 23, 0.12); border-radius: 999px; border: 2px solid #ffffff; }

/* ── widget tiles — the browse grid in the empty state ─────────────────── */
@keyframes gs-sm-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.gs-sm-grid {
  /* compact, self-sizing widget tiles — as many per row as fit, so they never
     stretch too wide (auto-fit + minmax). ~5 across in the wide palette. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 0.55rem;
  padding: 0.35rem 0.9rem 1rem;
}
.gs-sm-tile {
  position: relative;
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.7rem 0.8rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.44);
  border: 1px solid rgba(26, 23, 20, 0.08);
  text-decoration: none !important; cursor: pointer;
  animation: gs-sm-rise 300ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 26ms);
  transition: border-color 180ms ease, background-color 180ms ease;
}
.gs-sm-tile:hover, .gs-sm-tile:focus-visible {
  /* quiet highlight: a gold hairline and a touch more paper. No lift, no shadow. */
  outline: none;
  border-color: rgba(189, 158, 112, 0.55);
  background: rgba(255, 255, 255, 0.82);
}
/* icon chip — the widget's glyph, in a soft gold-tint square */
.gs-sm-tile__ic {
  flex: 0 0 auto;
  width: 38px; height: 38px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, rgba(189,158,112,0.16), rgba(189,158,112,0.07));
  border: 1px solid rgba(189, 158, 112, 0.22);
  color: var(--gold-deep, #9a7c4f);
  transition: background-color 200ms ease, border-color 200ms ease;
}
.gs-sm-tile:hover .gs-sm-tile__ic {
  /* no scale, no rotation — just a slightly warmer chip */
  background: rgba(189, 158, 112, 0.20);
  border-color: rgba(189, 158, 112, 0.42);
}
.gs-sm-tile__ic .gs-sm-ico { width: 19px; height: 19px; }
.gs-sm-tile__txt { display: flex; flex-direction: column; gap: 0.22rem; min-width: 0; }
.gs-sm-tile__label {
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 0.8rem; font-weight: 500; letter-spacing: 0.005em;
  color: var(--ink, #3d3a36); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gs-sm-tile__sub {
  font-size: 0.66rem; font-weight: 400; letter-spacing: 0.02em;
  color: var(--ink-muted, #8c8478); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* live pulse — signals the real-time rate tile */
.gs-sm-tile__live {
  position: absolute; top: 9px; right: 9px;
  width: 7px; height: 7px; border-radius: 50%;
  background: #3fae6b; box-shadow: 0 0 0 0 rgba(63, 174, 107, 0.5);
  animation: gs-sm-pulse 1.9s cubic-bezier(0.66, 0, 0, 1) infinite;
}
@keyframes gs-sm-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(63, 174, 107, 0.5); }
  70%  { box-shadow: 0 0 0 7px rgba(63, 174, 107, 0); }
  100% { box-shadow: 0 0 0 0 rgba(63, 174, 107, 0); }
}

/* small rounded icon holder that leads every list row */
.gs-sm-icobox {
  flex: 0 0 auto;
  width: 34px; height: 34px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(26, 23, 20, 0.09);
  color: var(--gold-deep, #9a7c4f);
  transition: border-color 180ms cubic-bezier(0.23,1,0.32,1);
}
.gs-sm-icobox .gs-sm-ico { width: 17px; height: 17px; }
.gs-search-item:hover .gs-sm-icobox { border-color: rgba(189, 158, 112, 0.5); }

.gs-search-group { padding: 0.5rem 0 0.3rem; }
.gs-search-group + .gs-search-group { margin-top: 0.25rem; padding-top: 0.7rem; border-top: 1px solid var(--line, rgba(26, 23, 20, 0.08)); }
.gs-search-group__head {
  display: block; padding: 0.35rem 0.9rem 0.5rem;
  font-size: 0.63rem; font-weight: 400; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-muted, #8c8478);
}
.gs-search-list { list-style: none; margin: 0; padding: 0; }
.gs-search-item {
  position: relative; display: flex; align-items: center; gap: 0.75rem;
  padding: 0.55rem 2.2rem 0.55rem 0.75rem;
  border-radius: 13px;
  color: var(--ink, #3d3a36); text-decoration: none !important;
  animation: gs-sm-rise 300ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 28ms);
  transition: background-color 160ms cubic-bezier(0.23,1,0.32,1);
}
.gs-search-item__txt { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.gs-search-item::after {
  content: "\2192";                         /* → slides in on hover */
  position: absolute; right: 0.85rem; top: 50%;
  transform: translate(-5px, -50%); opacity: 0;
  color: var(--gold-deep, #9a7c4f); font-size: 0.95rem;
  transition: opacity 160ms cubic-bezier(0.23,1,0.32,1), transform 220ms cubic-bezier(0.23,1,0.32,1);
}
.gs-search-item:hover, .gs-search-item:focus-visible {
  background: var(--gold-tint, rgba(189, 158, 112, 0.10)); outline: none;
}
.gs-search-item:hover::after, .gs-search-item:focus-visible::after {
  opacity: 1; transform: translate(0, -50%);
}
.gs-search-item__t {
  font-family: "Josefin GS", system-ui, sans-serif; font-size: 0.97rem;
  font-weight: 400; color: var(--ink, #3d3a36); letter-spacing: -0.002em;
}
.gs-search-item__d { font-size: 0.82rem; color: var(--ink-muted, #8c8478); line-height: 1.45; }
.gs-search-item mark {
  background: transparent; color: var(--gold-deep, #9a7c4f); padding: 0; border-radius: 0;
}
.gs-search-item--deep .gs-search-item__t { color: var(--gold-deep, #9a7c4f); }
.gs-search-item--deep::after { content: "\2197"; }   /* ↗ for a deeper search */

.gs-search-empty { padding: 1.6rem 1.2rem; color: var(--ink-muted, #8c8478); font-size: 0.9rem; margin: 0; text-align: center; }

.gs-search-hint {
  margin: 0; padding: 0.7rem 1.1rem;
  border-top: 1px solid var(--line, rgba(26, 23, 20, 0.08));
  font-size: 0.72rem; color: var(--ink-faint, #b8b1a8);
  text-align: center; letter-spacing: 0.02em;
}
.gs-search-hint kbd {
  display: inline-block; padding: 0.05rem 0.4rem;
  border: 1px solid var(--line, rgba(26, 23, 20, 0.08)); border-radius: 5px;
  background: var(--surface-2, #f4f4f4); font-family: inherit; font-size: 0.7rem; color: var(--ink-soft, #66615c);
}

/* RTL: arrow mirrors to the left edge */
[dir="rtl"] .gs-search-item { padding: 0.55rem 0.75rem 0.55rem 2.2rem; }
[dir="rtl"] .gs-search-item::after { right: auto; left: 0.85rem; content: "\2190"; transform: translate(5px, -50%); }
[dir="rtl"] .gs-search-item:hover::after, [dir="rtl"] .gs-search-item:focus-visible::after { transform: translate(0, -50%); }
[dir="rtl"] .gs-search-item--deep::after { content: "\2196"; }

@media (prefers-reduced-motion: reduce) {
  .gs-search-item::after { transition: opacity 160ms var(--ease); transform: translate(0, -50%); }
  .gs-sm-tile, .gs-search-item { animation: none; }
  .gs-sm-tile:hover { transform: none; }
  .gs-sm-tile:hover .gs-sm-tile__ic { transform: none; }
  .gs-sm-tile__live { animation: none; }
}

@media (max-width: 640px) {
  .gs-header-search-drop { padding: calc(var(--gs-hdr-h, 96px) + 12px) 12px 20px; }
  .gs-header-search-drop__inner { border-radius: 20px; }
  .gs-header-search-drop__results { max-height: calc(100vh - 230px); }
  .gs-sm-grid { grid-template-columns: repeat(2, 1fr); }
}
html.is-search-open { overflow: hidden; }

/* mobile drawer */
html.is-drawer-open { overflow: hidden; }
.gs-site-drawer { position: fixed; inset: 0; z-index: 80; display: block; }
.gs-site-drawer[hidden] { display: none; }
.gs-site-drawer__scrim { position: absolute; inset: 0; background: rgba(34, 29, 23, 0.4); backdrop-filter: blur(2px); }
.gs-site-drawer__panel {
  position: absolute; top: 0; left: 0; right: 0;
  background: #fff; padding: 1.6rem 1.4rem 2rem;
  border-bottom: 1px solid rgba(34, 29, 23, 0.08);
  display: flex; flex-direction: column; gap: 0.2rem;
  box-shadow: 0 18px 50px -18px rgba(34, 29, 23, 0.3);
}
.gs-site-drawer__panel a {
  display: block; padding: 0.85rem 0.4rem;
  border-bottom: 1px solid rgba(34, 29, 23, 0.06);
  font-size: 13px; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink, #221d17);
}

/* =========================================================
   Site footer — faithful clone of the original WordPress footer
   ========================================================= */
.site-footer {
  /* Positioned + stacked so it always paints ABOVE the homepage's fixed hero
     backdrop. A position:fixed element paints over later STATIC content in the
     same stacking context, so the hero video was bleeding through here even
     though this footer is opaque. */
  position: relative;
  z-index: 1;
  margin-top: clamp(3rem, 8vw, 5rem);
  background: #faf5eb;                                  /* warm ivory wash */
  color: var(--ink, #3d3a36);
  font-family: "Josefin GS", system-ui, -apple-system, sans-serif;
}
.site-footer .container {
  max-width: 1200px; margin: 0 auto;
  padding-left: 15px; padding-right: 15px;
}

.site-footer .footer-widgets {
  padding: clamp(3rem, 6vw, 4.4rem) 0 clamp(2.4rem, 5vw, 3.4rem);
  border-top: 1px solid rgba(34, 29, 23, 0.10);
}
/* brand + three nav columns. The last track was 1.4fr when a newsletter sat
   there; with three equal link menus the trailing track must match its
   siblings, otherwise the final column stretches and the menus look uneven. */
.site-footer .site-footer-inner.d-flex {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(1.6rem, 3.5vw, 2.4rem);
  align-items: flex-start;
}

/* brand column */
.site-footer .column { min-width: 0; }
.site-footer .footer-logo { display: block; margin-bottom: 0.8rem; }
.site-footer .footer-logo img { width: 180px; height: auto; display: block; }
.site-footer .site-social ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; gap: 12px; flex-wrap: wrap;
}
.site-footer .site-social .social-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(34, 29, 23, 0.16);
  color: var(--ink-soft, #5c554b);
  transition: color 160ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 160ms cubic-bezier(0.22, 1, 0.36, 1),
              background-color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.site-footer .site-social .social-icon:hover {
  color: #fff; background: var(--gold, #bd9e70); border-color: var(--gold, #bd9e70);
}

/* widget titles */
.site-footer .widget-title {
  font-family: "Josefin GS", system-ui, sans-serif;
  font-size: 0.92rem; font-weight: 400; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink, #221d17);
  margin: 0 0 1.2rem;
}

/* menus */
.site-footer .menu {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0.75rem;
}
/* No default underline on any footer link; the few deliberate hover-underlines
   (privacy / legal) set their own and keep winning via the :hover selector. */
.site-footer a { text-decoration: none; }
.site-footer .menu-item a {
  font-size: 0.92rem; color: var(--ink-soft, #5c554b);
  transition: color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.site-footer .menu-item a:hover { color: var(--gold-deep, #9a7c4f); }
.site-footer .menu-item.current-menu-item a { color: var(--gold-deep, #9a7c4f); }

/* newsletter */
.site-footer .klb-newsletter-widget .newsletter-text p {
  margin: 0 0 1rem; font-size: 0.9rem; color: var(--ink-soft, #5c554b);
  line-height: 1.6;
}
.site-footer .mc4wp-form-fields {
  display: grid; grid-template-columns: 1fr auto; gap: 0;
  border: 1px solid rgba(34, 29, 23, 0.18); border-radius: 999px;
  background: #fff; overflow: hidden;
  transition: border-color 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.site-footer .mc4wp-form-fields:focus-within { border-color: var(--gold, #bd9e70); }
.site-footer .subscribe-input {
  border: 0; outline: none; background: transparent;
  padding: 0.75rem 1rem; font: inherit; font-size: 0.88rem; color: var(--ink, #221d17);
  min-width: 0;
}
.site-footer .btn-primary {
  border: 0; cursor: pointer;
  padding: 0 1.2rem; background: var(--gold, #bd9e70); color: #fff;
  font: inherit; font-size: 0.78rem; font-weight: 400; letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background-color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.site-footer .btn-primary:hover { background: var(--gold-deep, #9a7c4f); }
.site-footer .privacy-policy {
  margin-top: 0.7rem;
}
.site-footer .privacy-policy p {
  margin: 0; font-size: 0.74rem; color: var(--ink-muted, #8c8478); line-height: 1.5;
}
.site-footer .privacy-policy a { color: var(--gold-deep, #9a7c4f); }
.site-footer .privacy-policy a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* bottom row: copyright + payment cards */
.site-footer .footer-copyright {
  border-top: 1px solid rgba(34, 29, 23, 0.08);
  padding: 1.1rem 0 1.4rem;
}
.site-footer .footer-copyright .site-footer-inner {
  display: flex !important; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1rem;
}
.site-footer .site-copyright p {
  margin: 0; font-size: 0.78rem; color: var(--ink-muted, #8c8478);
}
.site-footer .site-copyright a { color: var(--gold, #bd9e70); }
.site-footer .site-copyright a:hover { color: var(--gold-deep, #9a7c4f); }
/* legal strip in the bottom bar — matches the copyright type scale so the
   row reads as one line of small print rather than a third menu */
.site-footer .site-legal-links ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.35rem 1.1rem;
}
.site-footer .site-legal-links a {
  font-size: 0.78rem; color: var(--ink-muted, #8c8478);
  transition: color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.site-footer .site-legal-links a:hover { color: var(--gold, #bd9e70); }

.site-footer .site-payment-cards ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; gap: 0.9rem; flex-wrap: wrap; align-items: center;
}
.site-footer .site-payment-cards img {
  height: 35px; width: auto; opacity: 0.85;     /* 30% larger payment logos */
  transition: opacity 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.site-footer .site-payment-cards img:hover { opacity: 1; }

@media (max-width: 1000px) {
  .site-footer .site-footer-inner.d-flex { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  /* mobile footer: brand full-width, then the three link menus 2-up at 50%
     each (the third wraps to its own row). :last-child no longer spans the
     full width — that rule existed for the newsletter block, and leaving it
     would stretch the final link menu across both columns. */
  .site-footer .footer-widgets .site-footer-inner.d-flex {
    grid-template-columns: 1fr 1fr;
    gap: 1.6rem 1rem;
  }
  .site-footer .footer-widgets .site-footer-inner > .column:first-child {
    grid-column: 1 / -1;
  }
  .site-footer .footer-copyright .site-footer-inner { flex-direction: column; align-items: flex-start; text-align: left; }
}

/* =========================================================
   News — Luxury Pro style magazine clone (Gold Souq aesthetic)
   Sections: hero slider · featured row · recent + sidebar ·
   dispatches · three-col by-section · archive
   ========================================================= */

/* Section title block — small horizontal lines flanking the title */
/* Section headings — consistent with the rest of the site: a gold accent
   dash above a light, left-aligned display title, with comfortable spacing
   down to the cards. */
.lp-title-block,
.gs-page .lp-title-block {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
  gap: 0.85rem; margin: 0 0 var(--space-6);
}
.lp-title-block::before {
  content: ""; width: 30px; height: 2px; background: var(--gold); flex: none;
}
.lp-title-block::after { content: none; display: none; }
.lp-title-block span {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 1.85rem); font-weight: 300;
  letter-spacing: -0.012em; text-transform: none; color: var(--ink);
  white-space: normal; line-height: 1.15;
}
.lp-title-block--side { gap: 0.6rem; margin-bottom: 1.1rem; }
.lp-title-block--side::before { width: 24px; }
.lp-title-block--side span { font-size: 1.15rem; }

/* Kicker (small uppercase tag on top of titles) */
.lp-kicker {
  display: inline-block;
  font-size: 0.68rem; font-weight: 400; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--gold-deep);
}

/* ── Hero slider — contained, rounded, editorial ────────── */
.lp-hero {
  position: relative; overflow: hidden;
  background: var(--canvas);
  width: min(100% - 48px, var(--container));
  margin: var(--space-8) auto var(--space-12);
  border-radius: clamp(18px, 1.8vw, 26px);
  box-shadow: var(--elev-2);
  isolation: isolate;
}
/* taller, more generous frame so the photograph is barely cropped */
.lp-hero__viewport { position: relative; aspect-ratio: 16 / 9; max-height: 600px; }
.lp-hero__slide {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.lp-hero__slide.is-active { opacity: 1; pointer-events: auto; }
.lp-hero__link { display: block; height: 100%; color: inherit; position: relative; }
.lp-hero__link img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Caption — bottom-left, restrained, no card chrome */
.lp-hero__caption {
  position: absolute;
  left: clamp(1.4rem, 6vw, 5rem);
  right: clamp(1.4rem, 6vw, 5rem);
  bottom: clamp(2.4rem, 5vw, 3.6rem);
  top: auto;
  transform: none;
  max-width: 540px;
  padding: 0;
  background: transparent;
  color: #ffffff;
  text-align: left;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.lp-hero__caption .lp-kicker {
  color: #ffffff;
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.35em 0.9em;
  font-size: 0.66rem; letter-spacing: 0.18em;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  backdrop-filter: blur(4px);
  text-shadow: none;
}
.gs-page .lp-hero__title,
.lp-hero__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 300;
  letter-spacing: -0.018em; line-height: 1.16;
  margin: 0.9rem 0 0.9rem; color: #ffffff; max-width: 22ch;
}
.lp-hero__meta {
  font-size: 0.82rem; color: rgba(255, 255, 255, 0.85);
  display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 0;
}
/* dots — thin, elegant minimal strokes */
.lp-hero__dots {
  position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%);
  display: flex; align-items: center; gap: 0.5rem; z-index: 3;
}
.lp-hero__dots button {
  width: 18px; height: 2px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.45); border: 0; padding: 0; cursor: pointer;
  transition: background-color 240ms cubic-bezier(0.22, 1, 0.36, 1), width 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.lp-hero__dots button:hover { background: rgba(255, 255, 255, 0.75); }
.lp-hero__dots button.is-active { background: var(--gold); width: 34px; }
/* nav — just a thin chevron, no circle. Minimal, legible over the image. */
.lp-hero__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; padding: 0;
  background: transparent; border: 0; color: #ffffff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0.82;
  filter: drop-shadow(0 1px 8px rgba(0, 0, 0, 0.5));
  transition: color 200ms ease, opacity 200ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 3;
}
.lp-hero__nav:hover { color: var(--gold); opacity: 1; transform: translateY(-50%) scale(1.14); }
.lp-hero__nav:active { transform: translateY(-50%) scale(0.9); }
.lp-hero__nav svg { display: block; width: 30px; height: 30px; stroke-width: 1.4; }
.lp-hero__nav--prev svg { transform: scaleX(-1); }
.lp-hero__nav--prev { left: 1.1rem; }
.lp-hero__nav--next { right: 1.1rem; }

/* ── Featured Articles — spacious 3-column cards (2 rows of 3) ──── */
.lp-featured-row {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.2rem, 2vw, 1.8rem);
}
.lp-mini {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: clamp(14px, 1.2vw, 18px);
  overflow: hidden;
  box-shadow: var(--elev-1);
  transition: transform 260ms cubic-bezier(0.23, 1, 0.32, 1),
              border-color 260ms cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 260ms cubic-bezier(0.23, 1, 0.32, 1);
}
.lp-mini:hover {
  transform: translateY(-3px);
  border-color: rgba(189,158,112,0.35);
  box-shadow: var(--elev-2);
}
.lp-mini__link { display: flex; flex-direction: column; height: 100%; color: inherit; }
.lp-mini__cover { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #f3f3f3; }
.lp-mini__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms cubic-bezier(0.23, 1, 0.32, 1); display: block; }
.lp-mini:hover .lp-mini__cover img { transform: scale(1.05); }
/* category — a clean, minimal glass label over the image (just the name) */
.lp-mini__cat {
  position: absolute; top: 14px; left: 14px;
  padding: 0.34rem 0.75rem; border-radius: 999px;
  background: rgba(20, 16, 12, 0.45);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: 0.58rem; font-weight: 400; letter-spacing: 0.16em;
  text-transform: uppercase; color: #ffffff;
}
.lp-mini__title {
  padding: 1.3rem 1.3rem 0;
  font-family: var(--font-display); font-size: 1.02rem; font-weight: 400;
  line-height: 1.32; color: var(--ink); margin: 0; letter-spacing: -0.008em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lp-mini__meta { padding: 0.5rem 1.3rem 1.3rem; margin: 0; font-size: 0.74rem; color: var(--ink-muted); }
@media (max-width: 880px) {
  .lp-featured-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .lp-featured-row { grid-template-columns: 1fr; }
}

/* ── Two-column layout (main + sidebar) ─────────────────────── */
.lp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); gap: 3rem; align-items: start; }
.lp-grid__main { min-width: 0; }
.lp-grid__side { min-width: 0; }

/* Recent News — 1 lead + 2 medium */
.lp-recent {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4rem;
}
.lp-recent__item {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden;
  transition: transform 200ms var(--ease), border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.lp-recent__item.is-lead { grid-column: 1 / -1; }
.lp-recent__item:hover { transform: translateY(-2px); border-color: rgba(189,158,112,0.4); box-shadow: 0 12px 28px -18px rgba(34,29,23,0.18); }
.lp-recent__link { display: block; color: inherit; }
.lp-recent__item.is-lead .lp-recent__link { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: stretch; }
.lp-recent__cover { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #f3f3f3; }
.lp-recent__item.is-lead .lp-recent__cover { aspect-ratio: auto; height: 100%; }
.lp-recent__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); display: block; }
.lp-recent__item:hover .lp-recent__cover img { transform: scale(1.04); }
.lp-recent__body { padding: 1.1rem 1.2rem 1.2rem; display: flex; flex-direction: column; gap: 0.4rem; justify-content: center; }
.lp-recent__item.is-lead .lp-recent__body { padding: clamp(1.4rem, 2.6vw, 2rem); gap: 0.6rem; }
.lp-recent__title {
  font-family: var(--font-display); font-weight: 400; line-height: 1.3;
  color: var(--ink); margin: 0; letter-spacing: -0.003em;
  font-size: 1.02rem;
}
.lp-recent__item.is-lead .lp-recent__title { font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 300; letter-spacing: -0.01em; line-height: 1.2; }
.lp-recent__excerpt { font-size: 0.94rem; color: var(--ink-soft); line-height: 1.6; margin: 0.3rem 0 0; max-width: 56ch; }
.lp-recent__meta { font-size: 0.76rem; color: var(--ink-muted); margin: 0.4rem 0 0; }

/* Dispatches — horizontal list rows */
.lp-dispatch { display: flex; flex-direction: column; gap: 0; }
.lp-row { border-bottom: 1px solid var(--line); }
.lp-row:first-child { border-top: 1px solid var(--line); }
.lp-row__link { display: grid; grid-template-columns: 200px 1fr; gap: 1.4rem; padding: 1.2rem 0; color: inherit; align-items: center; }
.lp-row__thumb { aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-md); background: #f3f3f3; }
.lp-row__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); display: block; }
.lp-row:hover .lp-row__thumb img { transform: scale(1.04); }
.lp-row__title {
  font-family: var(--font-display); font-size: 1.1rem; font-weight: 400;
  line-height: 1.3; color: var(--ink); margin: 0.4rem 0 0.4rem; letter-spacing: -0.003em;
  transition: color 160ms var(--ease);
}
.lp-row:hover .lp-row__title { color: var(--gold-deep); }
.lp-row__excerpt { font-size: 0.9rem; color: var(--ink-soft); line-height: 1.55; margin: 0 0 0.4rem; max-width: 60ch; }
.lp-row__meta { font-size: 0.74rem; color: var(--ink-muted); margin: 0; }

/* Sidebar — Trending widget */
.lp-trend { list-style: none; margin: 0 0 1.6rem; padding: 0; }
.lp-trend__item {
  display: grid; grid-template-columns: 44px 1fr; gap: 1rem;
  padding: 1rem 0; border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.lp-trend__item:last-child { border-bottom: 0; }
.lp-trend__rank {
  font-family: var(--font-display); font-size: 1.45rem; font-weight: 300;
  color: var(--gold); line-height: 1;
}
.lp-trend__link { color: inherit; display: block; }
.lp-trend__link:hover .lp-trend__title { color: var(--gold-deep); }
.lp-trend__title {
  font-family: var(--font-display); font-size: 0.94rem; font-weight: 400;
  line-height: 1.32; margin: 0; color: var(--ink); letter-spacing: -0.002em;
  transition: color 160ms var(--ease);
}
.lp-trend__meta { font-size: 0.74rem; color: var(--ink-muted); margin: 0.3rem 0 0; }
.lp-trend__meta .cat { color: var(--gold-deep); }

/* Sidebar cards (rate / newsletter) */
.lp-side-card {
  background: #fffefb; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 1.1rem 1.2rem; margin-bottom: 1.2rem;
}
.lp-side-card__head {
  font-size: 0.72rem; font-weight: 400; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gold-deep); margin: 0 0 0.8rem;
}
.lp-side-card__rates { list-style: none; margin: 0; padding: 0; }
.lp-side-card__rates li {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 0.5rem 0; border-bottom: 1px solid var(--line);
  font-size: 0.86rem; color: var(--ink);
}
.lp-side-card__rates li:last-child { border-bottom: 0; }
.lp-side-card__rates b { color: var(--ink); font-weight: 400; font-family: var(--font-display); }

.lp-newsletter p { font-size: 0.86rem; color: var(--ink-soft); margin: 0 0 0.9rem; line-height: 1.5; }
.lp-newsletter form { display: flex; flex-direction: column; gap: 0.5rem; }
.lp-newsletter input {
  border: 1px solid var(--line); border-radius: 999px;
  padding: 0.7rem 1rem; font: inherit; font-size: 0.86rem; color: var(--ink); background: #fff;
}
.lp-newsletter input:focus { outline: none; border-color: var(--gold); box-shadow: none; }
.lp-newsletter button {
  border: 0; cursor: pointer; padding: 0.7rem 1rem;
  background: var(--gold); color: #fff;
  font: inherit; font-size: 0.78rem; font-weight: 400; letter-spacing: 0.14em;
  text-transform: uppercase; border-radius: 999px;
  transition: background-color 160ms var(--ease);
}
.lp-newsletter button:hover { background: var(--gold-deep); }

/* ── Three-column by section ────────────────────────────────── */
.lp-tri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.lp-tri__col { min-width: 0; }
.lp-tri__head {
  font-family: var(--font-display); font-size: 0.86rem; font-weight: 400;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink);
  margin: 0 0 1rem; padding-left: 0.7rem; border-left: 3px solid var(--gold);
}
.lp-tri__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.lp-tri__item { border-bottom: 1px solid var(--line); }
.lp-tri__item:last-child { border-bottom: 0; }
.lp-tri__row { display: grid; grid-template-columns: 86px 1fr; gap: 0.8rem; padding: 0.85rem 0; color: inherit; align-items: start; }
.lp-tri__thumb { aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--r-md); background: #f3f3f3; }
.lp-tri__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease); display: block; }
.lp-tri__row:hover .lp-tri__thumb img { transform: scale(1.05); }
.lp-tri__row:hover .lp-tri__title { color: var(--gold-deep); }
.lp-tri__title {
  font-family: var(--font-display); font-size: 0.92rem; font-weight: 400;
  line-height: 1.32; color: var(--ink); margin: 0; letter-spacing: -0.002em;
  transition: color 160ms var(--ease);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.lp-tri__meta { font-size: 0.72rem; color: var(--ink-muted); margin: 0.3rem 0 0; }
.lp-tri__more {
  display: inline-block; margin-top: 0.8rem;
  font-size: 0.78rem; font-weight: 400; color: var(--gold-deep);
  transition: color 160ms var(--ease);
}
.lp-tri__more:hover { color: var(--ink); }

/* Responsive */
@media (max-width: 1100px) {
  .lp-featured-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-grid { grid-template-columns: 1fr; gap: 2rem; }
  .lp-tri { grid-template-columns: 1fr; gap: 2.4rem; }
}
@media (max-width: 860px) {
  .lp-hero__viewport { aspect-ratio: 4 / 3; }
  .lp-recent__item.is-lead .lp-recent__link { grid-template-columns: 1fr; }
  .lp-row__link { grid-template-columns: 120px 1fr; gap: 1rem; }
}
/* Phones — a tall, mobile-screen-ratio hero with the caption + button
   anchored to the lower-left corner. */
@media (max-width: 560px) {
  .lp-hero { width: min(100% - 32px, var(--container)); margin: var(--space-6) auto var(--space-8); }
  .lp-hero__viewport { aspect-ratio: 4 / 5; max-height: none; }
  .lp-hero__caption {
    left: 1.25rem; right: auto; bottom: 1.4rem; top: auto;
    width: auto; max-width: 86%; padding: 0; text-align: left;
  }
  .lp-hero__caption .lp-hero__title { font-size: 1.5rem; margin: 0.7rem 0; max-width: 100%; }
  .lp-hero__caption .lp-hero__author { margin-bottom: 1rem; }
}
@media (max-width: 640px) {
  .lp-featured-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-recent { grid-template-columns: 1fr; }
  .lp-row__link { grid-template-columns: 100px 1fr; }
  .lp-hero__nav { display: none; }
}

/* =========================================================
   News — magazine layout (masthead, sections, front page,
   pull quote, bento grid). Card design retained, page chrome
   redesigned to feel editorial: generous whitespace, light
   weights, hairline rules, calm motion.
   ========================================================= */

/* Masthead */
.gs-mag-masthead {
  padding: clamp(2.2rem, 5vw, 3.4rem) 0 clamp(1.6rem, 4vw, 2.4rem);
  text-align: center;
}
.gs-mag-masthead__row {
  display: inline-flex; align-items: center; gap: 1rem;
  font-size: 0.72rem; font-weight: 400; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-muted);
}
.gs-mag-masthead__rule { display: inline-block; width: 36px; height: 1px; background: var(--line-2); }
.gs-mag-masthead__title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  font-weight: 300; letter-spacing: -0.015em; line-height: 1.05;
  margin: 0.9rem 0 0; color: var(--ink);
}
.gs-mag-masthead__title em { font-style: italic; color: var(--gold-deep); font-weight: 300; }
.gs-mag-masthead__sub {
  margin: 1rem auto 0; max-width: 56ch;
  font-size: 0.98rem; line-height: 1.65; color: var(--ink-soft);
}
.gs-mag-ticker {
  margin: 1.8rem auto 0; max-width: 720px;
  display: flex; align-items: center; gap: 1.2rem;
  padding: 0.65rem 1.2rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.gs-mag-ticker__label {
  font-size: 0.7rem; font-weight: 400; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gold-deep);
  white-space: nowrap;
}
.gs-mag-ticker__items { display: flex; gap: 1.4rem; flex: 1; justify-content: space-between; flex-wrap: wrap; }
.gs-mag-ticker__item { font-size: 0.84rem; color: var(--ink); }
.gs-mag-ticker__item b { color: var(--gold-deep); font-weight: 400; margin-right: 0.35rem; }

/* Section heads with editorial number + line */
.gs-mag-section-head {
  display: grid; grid-template-columns: auto auto 1fr;
  align-items: baseline; gap: 0.9rem;
  margin-bottom: 1.6rem;
}
.gs-mag-section-no {
  font-size: 0.72rem; font-weight: 400; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold-deep);
}
.gs-mag-section-title {
  font-family: var(--font-display); font-size: 1.6rem; font-weight: 300;
  letter-spacing: -0.005em; color: var(--ink); margin: 0;
}
.gs-mag-section-line { height: 1px; background: var(--line); }

/* Editorial kicker (small uppercase label inside cards) */
.gs-mag-kicker {
  display: inline-block;
  font-size: 0.68rem; font-weight: 400; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--gold-deep);
  margin-bottom: 0.6rem;
}

/* Front page — asymmetric grid: big lead + rail of secondaries */
.gs-mag-front {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 1.8rem;
}
.gs-mag-front__lead {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
  transition: transform 240ms var(--ease), border-color 240ms var(--ease), box-shadow 240ms var(--ease);
}
.gs-mag-front__lead:hover { transform: translateY(-2px); border-color: rgba(189,158,112,0.4); box-shadow: 0 18px 36px -20px rgba(34,29,23,0.15); }
.gs-mag-front__lead-link { display: flex; flex-direction: column; height: 100%; color: inherit; }
.gs-mag-front__lead-cover { aspect-ratio: 16 / 9; overflow: hidden; background: #f3f3f3; }
.gs-mag-front__lead-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); display: block; }
.gs-mag-front__lead:hover .gs-mag-front__lead-cover img { transform: scale(1.03); }
.gs-mag-front__lead-body { padding: clamp(1.4rem, 2.4vw, 2rem); }
.gs-mag-front__lead-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
  font-weight: 300; letter-spacing: -0.01em; line-height: 1.18;
  color: var(--ink); margin: 0.2rem 0 0.7rem; max-width: 24ch;
}
.gs-mag-front__lead-excerpt { font-size: 0.98rem; line-height: 1.65; color: var(--ink-soft); margin: 0 0 1rem; max-width: 60ch; }
.gs-mag-front__lead-foot {
  display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  font-size: 0.82rem; color: var(--ink-muted); margin: 0;
}
.gs-mag-byline { color: var(--ink-muted); font-style: italic; }
.gs-mag-front__lead-arrow { margin-left: auto; color: var(--gold-deep); font-weight: 400; transition: transform 180ms var(--ease); }
.gs-mag-front__lead:hover .gs-mag-front__lead-arrow { transform: translateX(3px); }

/* Side rail of secondary cards */
.gs-mag-front__rail { display: flex; flex-direction: column; gap: 1.2rem; }
.gs-mag-rail-card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
  transition: transform 220ms var(--ease), border-color 220ms var(--ease), box-shadow 220ms var(--ease);
}
.gs-mag-rail-card:hover { transform: translateY(-2px); border-color: rgba(189,158,112,0.4); box-shadow: 0 14px 26px -16px rgba(34,29,23,0.14); }
.gs-mag-rail-link { display: grid; grid-template-columns: 40% 1fr; gap: 0; color: inherit; height: 100%; }
.gs-mag-rail-cover { overflow: hidden; background: #f3f3f3; }
.gs-mag-rail-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms var(--ease); }
.gs-mag-rail-card:hover .gs-mag-rail-cover img { transform: scale(1.04); }
.gs-mag-rail-body { padding: 1rem 1.1rem; display: flex; flex-direction: column; justify-content: center; gap: 0.4rem; }
.gs-mag-rail-title {
  font-family: var(--font-display); font-size: 1.02rem; font-weight: 400;
  letter-spacing: -0.003em; line-height: 1.3; color: var(--ink); margin: 0;
}
.gs-mag-rail-meta { font-size: 0.78rem; color: var(--ink-muted); margin: 0.2rem 0 0; }

/* Pull quote */
.gs-mag-quote {
  text-align: center;
  padding: clamp(2.6rem, 6vw, 4rem) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-top: 2rem;
  background: #fdfaf3;                  /* solid, no gradient */
}
.gs-mag-quote__mark {
  font-family: serif; font-size: clamp(3rem, 7vw, 5.2rem); line-height: 1;
  color: var(--gold-deep); margin: 0 0 0.4rem; font-weight: 300;
}
.gs-mag-quote__body {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.4vw, 1.8rem);
  font-weight: 300; line-height: 1.45;
  color: var(--ink); margin: 0 auto; max-width: 38ch;
  letter-spacing: -0.005em;
}
.gs-mag-quote__attr {
  margin: 1.4rem 0 0; font-size: 0.74rem; font-weight: 400;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-muted);
}

/* Bento sizing for the first row of "columns" */
.gs-news-grid--mag { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.gs-news-grid--mag > .gs-news-card { grid-column: span 2; }
.gs-news-grid--mag > .gs-news-card:nth-child(1) { grid-column: span 3; }
.gs-news-grid--mag > .gs-news-card:nth-child(2) { grid-column: span 3; }
.gs-news-grid--mag > .gs-news-card:nth-child(1) .gs-news-card-title,
.gs-news-grid--mag > .gs-news-card:nth-child(2) .gs-news-card-title {
  font-size: 1.14rem; letter-spacing: -0.005em;
}

/* Stagger fade-in for the grid (uses the .gs-reveal observer already in place) */
.gs-news-grid--mag > .gs-reveal { transition-delay: calc(var(--mag-i, 0) * 60ms); }

/* End-of-issue mark */
.gs-mag-colophon {
  margin: 3rem 0 0; text-align: center;
  font-size: 0.74rem; font-weight: 400; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-muted);
}

/* ── Hero feature (big full-width with caption overlay) ── */
.gs-mag-hero { position: relative; border-radius: var(--r-lg); overflow: hidden; background: #f3f3f3; }
.gs-mag-hero__link { display: block; color: inherit; }
.gs-mag-hero__cover { position: relative; aspect-ratio: 16 / 8; overflow: hidden; }
.gs-mag-hero__cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 900ms var(--ease); }
.gs-mag-hero:hover .gs-mag-hero__cover img { transform: scale(1.02); }
.gs-mag-hero__scrim { display: none; }
.gs-mag-hero__caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(2.4rem, 6vw, 4rem) clamp(1.4rem, 4vw, 2.8rem) clamp(1.4rem, 4vw, 2.6rem);
  color: #fff; max-width: 64ch;
  background: rgba(34, 29, 23, 0.78);   /* solid translucent ink — no gradient */
}
.gs-mag-kicker.is-on-dark { color: #e6cd9a; }
.gs-mag-hero__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.8vw, 2.8rem);
  font-weight: 300; letter-spacing: -0.01em; line-height: 1.18;
  margin: 0.5rem 0 0.6rem; color: #fff;
}
.gs-mag-hero__excerpt { font-size: 0.98rem; line-height: 1.55; color: rgba(255,255,255,0.85); margin: 0 0 0.9rem; max-width: 56ch; }
.gs-mag-hero__meta {
  display: flex; gap: 1rem; flex-wrap: wrap; align-items: baseline; margin: 0;
  font-size: 0.84rem; color: rgba(255,255,255,0.72);
}
.gs-mag-hero__arrow { margin-left: auto; color: #fff; font-weight: 400; transition: transform 180ms var(--ease); }
.gs-mag-hero:hover .gs-mag-hero__arrow { transform: translateX(3px); }

/* ── Top row of 4 small features under the hero ── */
.gs-mag-toprow {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.2rem; margin-top: 1.4rem;
}
.gs-mag-mini {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden;
  transition: transform 200ms var(--ease), border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.gs-mag-mini:hover { transform: translateY(-2px); border-color: rgba(189,158,112,0.4); box-shadow: 0 10px 20px -14px rgba(34,29,23,0.18); }
.gs-mag-mini__link { display: flex; flex-direction: column; height: 100%; color: inherit; }
.gs-mag-mini__cover { aspect-ratio: 16 / 10; overflow: hidden; background: #f3f3f3; }
.gs-mag-mini__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); display: block; }
.gs-mag-mini:hover .gs-mag-mini__cover img { transform: scale(1.04); }
.gs-mag-mini__body { padding: 0.85rem 1rem 1rem; }
.gs-mag-mini__title { font-family: var(--font-display); font-size: 0.95rem; font-weight: 400; line-height: 1.32; color: var(--ink); margin: 0.2rem 0 0.4rem; letter-spacing: -0.002em; }
.gs-mag-mini__meta { font-size: 0.74rem; color: var(--ink-muted); margin: 0; }

/* ── Two-column main + sidebar ── */
.gs-mag-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); gap: 2.6rem; align-items: start; }
.gs-mag-section-head--narrow { grid-template-columns: auto auto; gap: 0.9rem; }

/* Trending widget — numbered ranking */
.gs-mag-trend { list-style: none; margin: 0 0 1.6rem; padding: 0; }
.gs-mag-trend__item {
  display: grid; grid-template-columns: 44px 1fr; gap: 1rem;
  padding: 1rem 0; border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.gs-mag-trend__item:last-child { border-bottom: 0; }
.gs-mag-trend__rank {
  font-family: var(--font-display); font-size: 1.45rem; font-weight: 300;
  color: var(--gold); line-height: 1;
}
.gs-mag-trend__link { color: inherit; display: block; }
.gs-mag-trend__link:hover .gs-mag-trend__title { color: var(--gold-deep); }
.gs-mag-trend__title {
  font-family: var(--font-display); font-size: 0.96rem; font-weight: 400;
  line-height: 1.35; margin: 0; color: var(--ink); letter-spacing: -0.002em;
  transition: color 160ms var(--ease);
}
.gs-mag-trend__meta { font-size: 0.74rem; color: var(--ink-muted); margin: 0.3rem 0 0; }
.gs-mag-trend__meta .cat { color: var(--gold-deep); letter-spacing: 0.04em; }

/* Newsletter card in sidebar */
.gs-mag-news-letter {
  background: #fffefb; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.3rem 1.4rem; box-shadow: var(--shadow-1);
}
.gs-mag-news-letter h4 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 400; line-height: 1.35; color: var(--ink); margin: 0.4rem 0 0.4rem; letter-spacing: -0.003em; }
.gs-mag-news-letter p { font-size: 0.86rem; color: var(--ink-soft); margin: 0 0 0.9rem; }
.gs-mag-news-letter__form { display: flex; flex-direction: column; gap: 0.5rem; }
.gs-mag-news-letter__form input {
  border: 1px solid var(--line); border-radius: 999px;
  padding: 0.7rem 1rem; font: inherit; font-size: 0.88rem; color: var(--ink); background: #fff;
}
.gs-mag-news-letter__form input:focus { outline: none; border-color: var(--gold); box-shadow: none; }

/* ── Tri-column "By section" ── */
.gs-mag-tri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.gs-mag-tri__col { display: flex; flex-direction: column; gap: 0.9rem; }
.gs-mag-tri__head { margin: 0 0 0.4rem; }
.gs-mag-tri__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.gs-mag-tri__item { border-bottom: 1px solid var(--line); }
.gs-mag-tri__item:last-child { border-bottom: 0; }
.gs-mag-tri__lead { display: block; color: inherit; padding: 0 0 1rem; }
.gs-mag-tri__cover { aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-md); background: #f3f3f3; margin-bottom: 0.8rem; }
.gs-mag-tri__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); display: block; }
.gs-mag-tri__lead:hover .gs-mag-tri__cover img { transform: scale(1.04); }
.gs-mag-tri__title { font-family: var(--font-display); font-size: 1rem; font-weight: 400; line-height: 1.35; color: var(--ink); margin: 0; }
.gs-mag-tri__meta { font-size: 0.76rem; color: var(--ink-muted); margin: 0.4rem 0 0; }
.gs-mag-tri__row {
  display: grid; grid-template-columns: 60px 1fr; gap: 0.8rem;
  padding: 0.85rem 0; color: inherit; align-items: baseline;
}
.gs-mag-tri__row:hover .gs-mag-tri__row-title { color: var(--gold-deep); }
.gs-mag-tri__date { font-size: 0.74rem; color: var(--ink-muted); letter-spacing: 0.02em; }
.gs-mag-tri__row-title { font-size: 0.9rem; font-weight: 400; color: var(--ink); line-height: 1.4; transition: color 160ms var(--ease); }
.gs-mag-tri__more { margin-top: 0.6rem; font-size: 0.8rem; font-weight: 400; color: var(--gold-deep); align-self: flex-start; }
.gs-mag-tri__more:hover { color: var(--ink); }

@media (max-width: 1080px) {
  .gs-mag-layout { grid-template-columns: 1fr; gap: 2rem; }
  .gs-mag-tri { grid-template-columns: 1fr; gap: 2.4rem; }
}
@media (max-width: 860px) {
  .gs-mag-toprow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gs-mag-hero__cover { aspect-ratio: 4 / 3; }
}
@media (max-width: 640px) {
  .gs-mag-toprow { grid-template-columns: 1fr; }
}

@media (max-width: 1000px) {
  .gs-mag-front { grid-template-columns: 1fr; }
  .gs-news-grid--mag { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gs-news-grid--mag > .gs-news-card,
  .gs-news-grid--mag > .gs-news-card:nth-child(1),
  .gs-news-grid--mag > .gs-news-card:nth-child(2) { grid-column: span 1; }
}
@media (max-width: 640px) {
  .gs-news-grid--mag { grid-template-columns: 1fr; }
  .gs-mag-rail-link { grid-template-columns: 32% 1fr; }
}

/* =========================================================
   News page — featured (lead + secondary), filter row, grid / list
   ========================================================= */

/* ---- Featured (top) ---- */
.gs-news-lead {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; background: var(--paper);
  margin-bottom: 1.4rem;
  transition: border-color 220ms var(--ease), transform 220ms var(--ease), box-shadow 220ms var(--ease);
}
.gs-news-lead:hover { border-color: rgba(189, 158, 112, 0.4); transform: translateY(-2px); box-shadow: 0 16px 32px -16px rgba(34, 29, 23, 0.15); }
.gs-news-lead-link { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); color: inherit; min-height: 360px; }
.gs-news-lead-cover { overflow: hidden; background: #f3f3f3; }
.gs-news-lead-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1); }
.gs-news-lead:hover .gs-news-lead-cover img { transform: scale(1.03); }
.gs-news-lead-body { display: flex; flex-direction: column; justify-content: center; gap: 0.85rem; padding: clamp(1.6rem, 3vw, 2.4rem); }
.gs-news-meta-cat {
  font-size: 0.7rem; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-deep);
}
.gs-news-lead-title {
  font-family: var(--font-display); font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 400;
  letter-spacing: -0.005em; line-height: 1.25; color: var(--ink); margin: 0; max-width: 22ch;
}
.gs-news-lead-excerpt { font-size: 0.96rem; color: var(--ink-soft); line-height: 1.6; margin: 0; max-width: 60ch; }
.gs-news-lead-foot {
  margin: 0.6rem 0 0; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  font-size: 0.84rem; color: var(--ink-muted);
}
.gs-news-lead-arrow { color: var(--gold-deep); font-weight: 400; transition: transform 180ms var(--ease); }
.gs-news-lead:hover .gs-news-lead-arrow { transform: translateX(3px); }

/* ---- Secondary list (under the lead) ---- */
.gs-news-secondary { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.gs-news-secondary li { border-bottom: 1px solid var(--line); }
.gs-news-secondary-link {
  display: grid; grid-template-columns: 110px 1fr auto;
  align-items: baseline; gap: 1.4rem;
  padding: 1rem 0; color: inherit;
  transition: color 160ms var(--ease);
}
.gs-news-secondary-link:hover { color: var(--ink); }
.gs-news-secondary-link:hover .title { color: var(--gold-deep); }
.gs-news-secondary .date { font-size: 0.78rem; color: var(--ink-muted); letter-spacing: 0.02em; }
.gs-news-secondary .title {
  font-family: var(--font-display); font-size: 1rem; font-weight: 400; color: var(--ink);
  line-height: 1.4; letter-spacing: -0.003em;
  transition: color 160ms var(--ease);
}
.gs-news-secondary .cat { font-size: 0.74rem; color: var(--ink-muted); letter-spacing: 0.04em; text-transform: uppercase; }

@media (max-width: 860px) {
  .gs-news-lead-link { grid-template-columns: 1fr; min-height: 0; }
  .gs-news-lead-cover { aspect-ratio: 16 / 10; }
  .gs-news-secondary-link { grid-template-columns: 1fr; gap: 0.3rem; }
  .gs-news-secondary .cat { display: none; }
}


.gs-news-filters {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1.2rem 1.6rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.6rem;
}
.gs-news-search {
  position: relative; display: flex; align-items: center;
  flex: 1 1 280px; min-width: 220px; max-width: 380px;
  border-bottom: 1px solid var(--line);
  transition: border-color 200ms var(--ease);
}
.gs-news-search:focus-within { border-bottom-color: var(--ink); }
.gs-news-search-icon { color: var(--ink-muted); margin-right: 0.6rem; line-height: 0; }
.gs-news-search input {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
  padding: 0.5rem 0; font: inherit; font-size: 0.9rem; color: var(--ink);
}
.gs-news-search input::placeholder { color: var(--ink-muted); }

.gs-news-select { position: relative; }
.gs-news-select select {
  appearance: none; -webkit-appearance: none;
  border: 0; outline: none; background: transparent;
  padding: 0.4rem 1.6rem 0.4rem 0;
  font: inherit; font-size: 0.86rem; color: var(--ink);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238c8478' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0 center; background-size: 12px;
}
.gs-news-select select:hover { color: var(--gold-deep); }

.gs-news-view { display: inline-flex; gap: 0.1rem; margin-left: auto; }
.gs-news-view-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  color: var(--ink-muted);
  transition: color 160ms var(--ease);
}
.gs-news-view-btn:hover { color: var(--ink); }
.gs-news-view-btn.is-active { color: var(--ink); }
.gs-news-view-btn.is-active svg { stroke-width: 2; }

/* ---- Grid view ---- */
.gs-news-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem;
}
.gs-news-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow-1);
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), border-color 220ms var(--ease);
}
.gs-news-card:hover {
  transform: translateY(-3px); border-color: rgba(189, 158, 112, 0.45);
  box-shadow: 0 16px 32px -16px rgba(34, 29, 23, 0.18);
}
.gs-news-card-link { display: flex; flex-direction: column; height: 100%; color: inherit; }
.gs-news-card-cover {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  background: #f3f3f3;
}
.gs-news-card-cover img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.gs-news-card:hover .gs-news-card-cover img { transform: scale(1.04); }
.gs-news-card-body { display: flex; flex-direction: column; gap: 0.7rem; padding: 1.1rem 1.2rem 1.2rem; }
.gs-news-card-title {
  font-family: var(--font-display); font-size: 0.98rem; font-weight: 400; line-height: 1.35;
  color: var(--ink); margin: 0; letter-spacing: -0.003em;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.gs-news-card-meta {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  font-size: 0.74rem; color: var(--ink-muted);
}
.gs-news-card-meta .sep { color: rgba(34, 29, 23, 0.2); }
.gs-news-card-meta .cat { color: var(--gold-deep); letter-spacing: 0.04em; }
.gs-news-card-more {
  margin-top: auto; padding-top: 0.2rem;
  font-size: 0.78rem; font-weight: 400; color: var(--gold-deep);
  transition: transform 180ms var(--ease);
}
.gs-news-card:hover .gs-news-card-more { transform: translateX(3px); }

/* ---- List view ---- */
.gs-news-list { display: flex; flex-direction: column; gap: 0.6rem; }
.gs-news-row {
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  background: var(--paper); transition: background-color 180ms var(--ease), border-color 180ms var(--ease);
}
.gs-news-row:hover { border-color: rgba(189, 158, 112, 0.45); background: #fffdf8; }
.gs-news-row-link {
  display: grid; grid-template-columns: 180px 1fr 48px;
  align-items: center; gap: 1.2rem;
  padding: 1rem 1.2rem; color: inherit;
}
.gs-news-row-thumb {
  width: 180px; aspect-ratio: 16 / 10; border-radius: var(--r-md); overflow: hidden; background: #f3f3f3;
}
.gs-news-row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gs-news-row-body { min-width: 0; }
.gs-news-row-meta {
  display: flex; gap: 1rem; align-items: center; font-size: 0.78rem; color: var(--ink-muted); margin-bottom: 0.45rem;
}
.gs-news-row-title { font-family: var(--font-display); font-size: 1rem; font-weight: 400; color: var(--ink); margin: 0; letter-spacing: -0.003em; }
.gs-news-row-excerpt { margin: 0.3rem 0 0; font-size: 0.86rem; color: var(--ink-soft); line-height: 1.55; max-width: 70ch; }
.gs-news-row-arrow {
  display: flex; align-items: center; justify-content: center; color: var(--ink-muted);
  transition: color 180ms var(--ease), transform 180ms var(--ease);
}
.gs-news-row:hover .gs-news-row-arrow { color: var(--gold); transform: translate(3px, -3px); }

/* ---- Empty + pager ---- */
.gs-news-empty {
  background: #fffdfa; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 3rem 2rem; text-align: center;
}
.gs-news-pager {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 2.2rem; gap: 1rem; padding: 1rem 0;
  border-top: 1px solid var(--line);
}
.gs-news-page {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.7rem 1.1rem; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  font-size: 0.86rem; font-weight: 400;
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease);
}
.gs-news-page:hover { border-color: var(--gold); color: var(--gold-deep); }
.gs-news-page.is-disabled { opacity: 0.35; pointer-events: none; }
.gs-news-page-info { font-size: 0.84rem; color: var(--ink-muted); }

/* ---- Article view ---- */
.gs-news-article-head { max-width: 70ch; margin: 1.6rem 0 1.4rem; }
.gs-news-article-head h1 { font-size: clamp(2rem, 3.6vw, 2.8rem); font-weight: 300; letter-spacing: -0.015em; margin: 0.6rem 0 1rem; }
.gs-news-article-head .gs-news-cat { position: static; display: inline-flex; background: transparent; border: 0; padding: 0; }
.gs-news-article-lede { font-size: 1.08rem; line-height: 1.65; color: var(--ink-soft); margin: 0; }
.gs-news-article-meta { margin: 1rem 0 0; font-size: 0.86rem; color: var(--ink-muted); display: flex; gap: 0.6rem; flex-wrap: wrap; }
.gs-news-article-cover { margin: 1.4rem 0 1.8rem; border-radius: var(--r-lg); overflow: hidden; }
.gs-news-article-cover img { width: 100%; height: auto; display: block; }
.gs-news-article-body { max-width: 70ch; font-size: 1rem; line-height: 1.75; color: var(--ink); }
.gs-news-article-body p { margin: 0 0 1.1em; }
.gs-news-article-body h2 { margin: 2rem 0 0.8rem; font-size: 1.5rem; font-weight: 400; }
.gs-news-article-body h3 { margin: 1.6rem 0 0.6rem; font-size: 1.2rem; font-weight: 400; }
.gs-news-article-back { margin: 2rem 0 0; }

/* ---- Responsive ---- */
@media (max-width: 860px) {
  .gs-news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
}
@media (max-width: 640px) {
  .gs-news-grid { grid-template-columns: 1fr; }
  .gs-news-row-link { grid-template-columns: 110px 1fr; }
  .gs-news-row-thumb { width: 110px; }
  .gs-news-row-arrow { display: none; }
  .gs-news-pager { flex-direction: column; align-items: stretch; gap: 0.5rem; }
}

/* =====================================================================
   ── Mobile polish — ≤768px ──
   A single coherent layer that enforces neat, spacious, luxurious mobile
   across every cloned-from-WordPress page. Mirrors the original WP mobile
   spacing (16px gutter, single column, generous line-height) and trims
   any leftover desktop chrome.
   ===================================================================== */

@media (max-width: 768px) {

  /* Container — comfortable side margins on mobile (not edge to edge) */
  .gs-container,
  .container { padding-inline: 20px !important; }

  /* Typography scaling — luxe, not loud */
  .gs-h1, .gs-page h1, .gs-section h1, h1.gs-display { font-size: clamp(1.7rem, 7.5vw, 2.25rem) !important; line-height: 1.15 !important; letter-spacing: -0.01em !important; }
  .gs-section h2, .gs-section-title, h2.gs-display { font-size: clamp(1.35rem, 5.5vw, 1.7rem) !important; }
  .gs-lede, .gs-section-lede { font-size: 0.98rem !important; line-height: 1.6 !important; }

  /* Generous vertical breathing room between sections */
  .gs-section { padding-block: 2rem !important; }
  .gs-section + .gs-section { padding-top: 1.2rem !important; }
  .gs-page > section { margin-bottom: 1.6rem; }

  /* Breadcrumbs — quieter */
  .gs-crumbs, .gs-breadcrumb { font-size: 0.8rem !important; gap: 0.4rem !important; flex-wrap: wrap; }

  /* Cards & frames — softer radius, less shadow */
  .gs-card, .gs-panel, .gs-ratebox, .fx-converter, .gpc-card,
  .gs-news-row, .gs-news-cover, .lp-card {
    border-radius: 18px !important;
  }

  /* ── Live gold-rate / bullion ── rate cells already stack
     (820px rule); make sure rating box header doesn't crowd */
  .gs-ratebox { padding: 1.1rem 1rem !important; }
  .gs-ratebox-head { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  /* Buttons under the rate box — inline centred row of circular icons while the
     rate box is in view. Once you scroll PAST it, JS adds .is-floating and the
     row detaches into a vertical stack of FABs on the right edge. */
  .gs-ratebox-actions,
  .fx-rate-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(0.7rem, 4.5vw, 1.6rem) !important;
    width: 100%;
  }
  .gs-ratebox-actions {
    margin-top: 1.6rem !important;
    padding-top: 1.4rem !important;
    border-top: 1px solid var(--line);
  }
  /* Floating state — pinned right, clear of the bottom nav, stays put on scroll */
  .gs-ratebox-actions.is-floating,
  .fx-rate-actions.is-floating {
    position: fixed !important;
    right: 14px !important;
    bottom: 92px !important;
    left: auto !important;
    top: auto !important;
    z-index: 60 !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    gap: 0.7rem !important;
  }
  /* In-page jump links (chart / view-all anchors) drop out of the float */
  .gs-ratebox-actions.is-floating > a[href^="#"],
  .fx-rate-actions.is-floating > a[href^="#"] { display: none !important; }
  /* Floating circles get a solid fill + lift so they read over any content */
  .gs-ratebox-actions.is-floating > .gs-btn,
  .gs-ratebox-actions.is-floating > .gs-rate-ccy,
  .gs-ratebox-actions.is-floating > .gs-share-btn,
  .fx-rate-actions.is-floating > .gs-btn,
  .fx-rate-actions.is-floating > .gs-share-btn {
    background: #fff !important;
    box-shadow: 0 6px 18px rgba(34, 29, 23, 0.18) !important;
  }
  /* Every control → clean circle, NO stroke — just a soft shadow lift. Icon only. */
  .gs-ratebox-actions > .gs-btn,
  .gs-ratebox-actions > .gs-rate-ccy,
  .gs-ratebox-actions > .gs-share-btn,
  .fx-rate-actions > .gs-btn,
  .fx-rate-actions > .gs-share-btn {
    flex: 0 0 auto !important;
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    min-height: 54px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: none !important;
    background: #fff !important;
    color: var(--gold-deep) !important;
    box-shadow: 0 3px 12px rgba(34, 29, 23, 0.13) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    font-size: 0 !important;          /* collapse any bare text labels */
    letter-spacing: 0 !important;
  }
  /* Floating state lifts a touch more so the FABs read over any content */
  .gs-ratebox-actions.is-floating > .gs-btn,
  .gs-ratebox-actions.is-floating > .gs-rate-ccy,
  .gs-ratebox-actions.is-floating > .gs-share-btn,
  .fx-rate-actions.is-floating > .gs-btn,
  .fx-rate-actions.is-floating > .gs-share-btn {
    box-shadow: 0 6px 18px rgba(34, 29, 23, 0.20) !important;
  }
  /* Beat the higher-specificity base variant (goldline/primary/ghost on <a>
     elements) so every circle gets the SAME solid white fill + no stroke on
     mobile, matching the currency picker and share button. 4 classes win. */
  .gs-page .gs-ratebox-actions .gs-btn.gs-btn--goldline,
  .gs-page .gs-ratebox-actions .gs-btn.gs-btn--primary,
  .gs-page .gs-ratebox-actions .gs-btn.gs-btn--ghost,
  .gs-page .fx-rate-actions .gs-btn.gs-btn--goldline,
  .gs-page .fx-rate-actions .gs-btn.gs-btn--ghost {
    border: none !important; background: #fff !important; color: var(--gold-deep) !important;
  }
  /* keep the press-to-fill feedback on those same buttons */
  .gs-page .gs-ratebox-actions .gs-btn.gs-btn--goldline:active,
  .gs-page .gs-ratebox-actions .gs-btn.gs-btn--primary:active,
  .gs-page .gs-ratebox-actions .gs-btn.gs-btn--ghost:active,
  .gs-page .fx-rate-actions .gs-btn.gs-btn--goldline:active {
    background: var(--gold) !important; color: #fff !important;
  }
  .gs-ratebox-actions > .gs-btn:active,
  .gs-ratebox-actions > .gs-rate-ccy:active,
  .gs-ratebox-actions > .gs-share-btn:active,
  .fx-rate-actions > .gs-btn:active,
  .fx-rate-actions > .gs-share-btn:active {
    background: var(--gold) !important; color: #fff !important; transform: scale(0.95);
  }
  /* Icons, sized and centred in the circle */
  .gs-ratebox-actions > .gs-btn .gs-icon,
  .fx-rate-actions > .gs-btn .gs-icon,
  .gs-ratebox-actions > .gs-share-btn svg,
  .fx-rate-actions > .gs-share-btn svg {
    display: block !important;
    width: 23px !important; height: 23px !important;
    min-width: 23px !important; min-height: 23px !important;
    flex: 0 0 auto !important;
    color: var(--gold-deep) !important; stroke: currentColor;
  }
  .gs-ratebox-actions > .gs-btn:active .gs-icon,
  .fx-rate-actions > .gs-btn:active .gs-icon,
  .gs-ratebox-actions > .gs-share-btn:active svg,
  .fx-rate-actions > .gs-share-btn:active svg { color: #fff !important; }
  /* Hide all word labels inside the circles */
  .gs-ratebox-actions .gs-desktop-text,
  .gs-ratebox-actions .gs-mobile-text,
  .gs-ratebox-actions > .gs-share-btn > span { display: none !important; }
  /* Currency picker circle → the FULL flag, uncropped, centred in the circle */
  .gs-rate-ccy-name { display: none !important; }
  .gs-rate-ccy-flag {
    display: block !important; flex: 0 0 auto;
    width: 34px !important; height: auto !important; max-height: 34px !important;
    border-radius: 3px !important; object-fit: contain !important;
    background: transparent !important; box-shadow: none !important;
  }
  /* WP-original label swap kept for any non-circular usage elsewhere */
  .gs-desktop-text { display: none !important; }
  .gs-mobile-text { display: inline !important; }
  .gs-karat-glance { gap: 0.55rem !important; margin-top: 1rem !important; }
  .gs-karat-card { padding: 0.8rem 0.85rem !important; }
  .gs-karat-card .kc-v { font-size: 1.05rem !important; }

  /* ── Calculator (gpc-grid) — app-like mobile layout ──
     Inputs share one row at the top; the gold-rate widgets drop below the
     "show in another currency" card. */
  .gpc-grid { grid-template-columns: 1fr 1fr 1fr !important; grid-template-areas:
    "g1 g2 g3"
    "main main main"
    "side side side"
    "rates rates rates"
    "disc disc disc"
    "acts acts acts" !important;
    gap: 0.7rem !important; }
  .gpc-card { padding: 1.1rem 1.2rem !important; }
  /* compact input cards so the three sit neatly in one row */
  .gpc-card--field { padding: 0.7rem 0.65rem !important; gap: 0.35rem !important; }
  .gpc-card--field .gpc-card__lbl { font-size: 0.6rem !important; letter-spacing: 0.08em !important; }
  .gpc-card--field .gpc-card__field { padding: 0.1rem 0 !important; }
  .gpc-card--field input, .gpc-card--field select { padding: 0.15rem 0 !important; font-size: 1.5rem !important; }
  .gpc-grid input, .gpc-grid select, .gpc-grid .gpc-input { min-height: 42px !important; }
  /* gold-rate widgets: 24K lead, then a 2-column grid */
  .gpc-rate-widgets { grid-template-columns: 1fr 1fr !important; gap: 0.6rem !important; }

  /* ── Forex ── converter stacks From / swap / To */
  .fx-converter { padding: 1.2rem 1rem !important; }
  .fx-row { grid-template-columns: 1fr !important; gap: 0.6rem !important; }
  .fx-swap-btn { margin: 0.2rem auto !important; }
  .fx-crypto-track { font-size: 0.85rem !important; }
  /* The wrapper class here used to be .fx-table-wrap, which matches no markup
     anywhere — currency-converter.php uses .gs-table-wrap. So this treatment
     never applied, leaving .fx-table's min-width to create the overflow with
     nothing containing it. */
  .gs-table-wrap { margin-inline: -16px !important; padding-inline: 16px !important;
    overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .fx-table { min-width: 520px; font-size: 0.85rem; }

  /* ── News (magazine) ── hero shrinks, recent rows collapse */
  .lp-hero { aspect-ratio: auto !important; }   /* viewport controls the height */
  .lp-hero-title { font-size: 1.4rem !important; line-height: 1.25 !important; }
  .lp-section-title, .gs-news-section-title { font-size: 1.05rem !important; }
  .lp-grid, .gs-news-grid { grid-template-columns: 1fr !important; gap: 1.1rem !important; }
  .lp-three-col, .gs-news-three { grid-template-columns: 1fr !important; }
  .lp-side, .gs-news-side { margin-top: 1rem; }
  .lp-title-block { gap: 0.8rem !important; }
  .lp-title-block .lp-line { display: none; }

  /* ── Products / Services / About / Contact ── single column
     (the Souq product grid keeps its own 2-col mobile rule below) */
  .gs-products-grid, .gs-services-grid,
  .gs-about-grid, .gs-contact-grid, .gs-feature-grid,
  .gs-team-grid, .gs-stats { grid-template-columns: 1fr !important; gap: 1rem !important; }
  .gs-product-tile, .gs-souq-card, .gs-service-card { padding: 1.4rem 1.2rem !important; }

  /* Bullion table */
  .gs-bullion-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; margin-inline: -16px; padding-inline: 16px; }
  .gs-bullion-table { min-width: 480px; font-size: 0.86rem; }

  /* Search palette — floats below the header with a comfortable top offset */
  .gs-header-search-drop { padding: calc(var(--gs-hdr-h, 96px) + 12px) 12px 20px !important; }
  .gpc-modal { padding: 1rem !important; }
  .gpc-cur-picker-list { max-height: 60vh !important; }

  /* No accidental horizontal scroll anywhere.
     `hidden` first as the fallback; `clip` wins where supported and is the
     reliable one — on iOS Safari `overflow-x: hidden` on the root can still
     let a too-wide descendant drag the page sideways. */
  html, body { overflow-x: hidden; overflow-x: clip; max-width: 100%; }
  .gs-page, main { overflow-x: clip; }

  /* Every horizontal scroller on the site. Without overscroll containment a
     sideways swipe inside one of these runs to its end and then CHAINS to the
     document, dragging the whole page left/right — which is what made the
     currency converter feel unanchored on a phone. */
  .gs-table-wrap, .fx-crypto-strip, .gs-bullion-table-wrap,
  .gs-research-tablewrap, .gs-souq-cats, .gs-vp-products {
    overscroll-behavior-x: contain;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }

  /* Buttons — comfortable tap targets */
  .gs-btn, .gs-pill-btn, .gpc-btn, .fx-btn { min-height: 44px !important; padding-inline: 1.1rem !important; }
}

@media (max-width: 480px) {
  /* decent, consistent side margins on small phones (not edge to edge) */
  .gs-container, .container { padding-inline: 18px !important; }
  .gs-h1, h1.gs-display { font-size: 1.65rem !important; }
  .gs-ratebox { padding: 0.95rem 0.9rem !important; }
  .gs-ratebox-actions .gs-btn { padding-inline: 0.8rem !important; font-size: 0.86rem; }
  .lp-hero-title { font-size: 1.25rem !important; }
}

/* =====================================================================
   ── Mobile bottom navigation (cloned from the original WP site) ──
   A fixed five-slot bar at the foot of every mobile page:
   Home · Rates · [Souq gold disc centre] · Forex · Language popup.
   Hidden on ≥769px; the body gets bottom padding so content never
   tucks behind the bar.
   ===================================================================== */
.gs-mobnav { display: none; }

@media (max-width: 768px) {

  body { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }

  .gs-mobnav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: 70px;
    padding-bottom: calc(5px + env(safe-area-inset-bottom, 0px));
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 0;
    background: #ffffff;
    border-top: 1px solid rgba(34, 29, 23, 0.08);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    z-index: 2147483646;
    isolation: isolate;
    font-family: 'Josefin Sans', system-ui, -apple-system, sans-serif;
  }

  .gs-mobnav__item,
  .gs-mobnav__centre {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    color: #221d17;
    transition: color 180ms ease, transform 180ms ease;
  }

  /* Side icons — image-based, tinted via filter (WP-original pattern) */
  .gs-mobnav__item {
    flex: 1 1 0;
    flex-direction: column;
    height: 100%;
    padding: 0 4px;
    font-family: inherit;
  }
  .gs-mobnav__icon {
    width: 26px; height: 26px;
    display: block;
    /* dark tint — matches the WP original idle state */
    filter: brightness(0) saturate(100%);
    transition: filter 180ms ease, transform 180ms ease;
  }
  .gs-mobnav__icon--forex { width: 30px; height: 30px; }

  .gs-mobnav__item:active .gs-mobnav__icon { transform: scale(0.92); }

  /* Active item — gold tint #BD9E70 (filter cloned from WP original) */
  .gs-mobnav__item.is-active .gs-mobnav__icon {
    filter: invert(68%) sepia(28%) saturate(550%) hue-rotate(5deg) brightness(92%) contrast(88%);
  }

  /* Centre disc (Souq) — gold circle floating above the bar */
  .gs-mobnav__centre {
    flex: 0 0 auto;
    width: 65px; height: 65px;
    margin-top: -30px;
    border-radius: 50%;
    background: #bd9e70;
    box-shadow: 0 6px 15px rgba(189, 158, 112, 0.40),
                0 0 0 4px #fff;
    position: relative;
    display: inline-flex;
    align-items: center; justify-content: center;
    transition: transform 180ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms ease;
    -webkit-tap-highlight-color: transparent;
  }
  .gs-mobnav__centre:active { transform: scale(0.95); }
  .gs-mobnav__centre.is-active {
    background: #9a7c4f;
    box-shadow: 0 8px 18px rgba(154, 124, 79, 0.50),
                0 0 0 4px #fff;
  }
  .gs-mobnav__centre-icon {
    width: 32px; height: 32px;
    display: block;
    /* white tint on top of the gold disc */
    filter: brightness(0) invert(1);
  }

  /* Language popup overlay & card */
  .gs-mb-popup-overlay {
    position: fixed; inset: 0;
    background: rgba(20, 16, 12, 0.42);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 2147483646;
    opacity: 0;
    visibility: hidden;            /* keep it out of the hit-test layer when closed */
    pointer-events: none;
    transition: opacity 240ms ease, visibility 0s linear 240ms;
  }
  .gs-mb-popup-overlay.is-open {
    opacity: 1; visibility: visible; pointer-events: auto;
    transition: opacity 240ms ease;
  }

  .gs-mb-lang-popup {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -42%);
    width: min(88vw, 340px);
    background: #ffffff;
    border-radius: 22px;
    padding: 26px 24px 24px;
    box-shadow: 0 28px 60px rgba(20, 16, 12, 0.22);
    z-index: 2147483647;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;            /* CRITICAL: stops the invisible popup from eating taps
                                      (its display:flex overrides the [hidden] attribute) */
    pointer-events: none;
    transition: opacity 240ms ease, transform 240ms cubic-bezier(.2,.8,.2,1), visibility 0s linear 240ms;
    font-family: 'Josefin Sans', system-ui, -apple-system, sans-serif;
  }
  .gs-mb-lang-popup.is-open {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translate(-50%, -50%);
    transition: opacity 240ms ease, transform 240ms cubic-bezier(.2,.8,.2,1);
  }
  /* close — quiet icon button, top right */
  .gs-mb-lang-close {
    position: absolute; top: 12px; right: 12px;
    appearance: none; background: transparent; border: 0;
    width: 34px; height: 34px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: rgba(34, 29, 23, 0.4); cursor: pointer;
    transition: background 160ms ease, color 160ms ease;
  }
  .gs-mb-lang-close:hover { background: var(--surface-2); color: #221d17; }
  [dir="rtl"] .gs-mb-lang-close { right: auto; left: 12px; }
  /* bilingual heading (Arabic first / primary, English below), with a
     generous gap down to the buttons */
  .gs-mb-lang-head {
    text-align: center; margin: 0.4rem 0 1.5rem;
    display: flex; flex-direction: column; gap: 0.3rem;
  }
  .gs-mb-lang-head__ar {
    margin: 0; font-size: 1.08rem; font-weight: 400;
    color: var(--ink, #3d3a36); unicode-bidi: isolate;
  }
  .gs-mb-lang-head__en {
    margin: 0; font-size: 0.9rem; font-weight: 400;
    color: var(--ink-muted, #8c8478); letter-spacing: 0.005em;
  }
  .gs-mb-lang-row { display: flex; gap: 10px; }
  .gs-mb-lang-row .gs-mb-lang-option { flex: 1 1 0; text-align: center; }
  .gs-mb-lang-option {
    appearance: none;
    -webkit-appearance: none;
    background: var(--surface-2);
    border: 1px solid rgba(34, 29, 23, 0.08);
    border-radius: 999px;
    padding: 14px 18px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    color: #221d17;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
  }
  .gs-mb-lang-option:hover { background: #f4ebd9; }
  .gs-mb-lang-option.is-active {
    background: #bd9e70;
    border-color: #bd9e70;
    color: #ffffff;
  }

  /* Hide the legacy hamburger on mobile — the bottom nav handles primary
     navigation. The burger drawer (with all pages) is still available via
     the existing burger button, which we surface as a subtle "More" hint
     in the bottom nav by keeping the burger visible up in the header. */
}

/* Desktop: nothing to do — .gs-mobnav stays display:none. */

/* =====================================================================
   ── News page — Luxury Pro magazine clone (extended) ──
   Adds the signature Weekly Top 7 row (centre big + 3 left + 3 right),
   the Recent News "lead + 4 staggered" layout, and the Weekly Gossips
   two-column horizontal list. Hero gets a proper READ MORE button.
   ===================================================================== */

/* Author meta + READ MORE — left-aligned, light on dark slide */
.lp-hero__caption .lp-hero__author {
  list-style: none; padding: 0; margin: 0 0 1.4rem;
  display: flex; gap: 0.4rem 1rem; flex-wrap: wrap;
  font-size: 0.82rem; color: rgba(255, 255, 255, 0.85);
}
.lp-hero__caption .lp-hero__author b { font-weight: 400; color: #ffffff; }
.lp-hero__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  padding: 0.7em 1.35em;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  font-size: 0.8rem; font-weight: 400; letter-spacing: 0.06em;
  color: #ffffff;
  background: transparent;
  text-shadow: none;
  transition: background 220ms cubic-bezier(0.23, 1, 0.32, 1),
              color 220ms cubic-bezier(0.23, 1, 0.32, 1),
              border-color 220ms cubic-bezier(0.23, 1, 0.32, 1);
}
.lp-hero__link:hover .lp-hero__btn,
.lp-hero__link:focus-visible .lp-hero__btn {
  background: #ffffff; color: var(--ink); border-color: #ffffff;
}

/* Ink-wash gradient anchored to the bottom-left where the caption sits, so
   the headline stays crisp on any image without dimming the whole frame. */
.lp-hero__slide::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0) 40%,
    rgba(0, 0, 0, 0.30) 66%,
    rgba(0, 0, 0, 0.74) 100%);
  z-index: 1;
}
.lp-hero__caption, .lp-hero__dots, .lp-hero__nav { z-index: 2; }
.lp-hero__title { text-shadow: 0 1px 14px rgba(0,0,0,0.45); }

/* ── Weekly Top 7 — 3-column row, large centre, vertical mini side ── */
.lp-top7 {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 1.8rem;
  align-items: start;
}
.lp-top7__side { display: flex; flex-direction: column; gap: 1.4rem; }
.lp-top7__row {}
.lp-top7__row-link { display: block; color: inherit; }
.lp-top7__row-thumb {
  aspect-ratio: 16 / 10; overflow: hidden;
  background: #f3f3f3; margin-bottom: 0.7rem;
  border-radius: 12px;
}
.lp-top7__row-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.lp-top7__row:hover .lp-top7__row-thumb img { transform: scale(1.05); }
.lp-top7__row-body { min-width: 0; }
.lp-top7__row .lp-kicker { font-size: 0.66rem; }
.lp-top7__row-title {
  margin: 0.25rem 0 0.3rem; font-size: 0.92rem; font-weight: 400;
  line-height: 1.32; color: var(--ink); letter-spacing: -0.005em;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.lp-top7__row-meta { margin: 0; font-size: 0.72rem; color: var(--ink-muted); }

.lp-top7__hero { background: var(--paper); }
.lp-top7__hero-link { display: block; color: inherit; }
.lp-top7__hero-cover {
  aspect-ratio: 16 / 11; overflow: hidden; border-radius: clamp(14px, 1.4vw, 20px); background: #f3f3f3;
  margin-bottom: 1.2rem;
}
.lp-top7__hero-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.lp-top7__hero:hover .lp-top7__hero-cover img { transform: scale(1.04); }
.lp-top7__hero-cat {
  display: inline-block; padding: 0.32em 0.95em;
  font-size: 0.7rem; font-weight: 400; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 999px;
  margin-bottom: 0.9rem;
}
.lp-top7__hero-title {
  margin: 0 0 0.8rem; font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  font-weight: 400; line-height: 1.2; letter-spacing: -0.012em;
  color: var(--ink);
}
.lp-top7__hero-meta {
  margin: 0 0 1rem; font-size: 0.86rem; color: var(--ink-muted);
  display: flex; gap: 1rem; flex-wrap: wrap;
}
.lp-top7__hero-excerpt {
  font-size: 0.98rem; line-height: 1.65; color: var(--ink-soft); margin: 0;
}

/* ── Recent News (Luxury Pro): 1 large lead + 2 stacked side cards ── */
.lp-recent-lux {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1.6rem;
  align-items: start;
}
.lp-recent-lux__lead-link { display: block; color: inherit; }
.lp-recent-lux__lead-cover {
  aspect-ratio: 4 / 3; overflow: hidden; border-radius: clamp(14px, 1.4vw, 18px);
  background: #f3f3f3; margin-bottom: 1rem; position: relative;
}
.lp-recent-lux__lead-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.lp-recent-lux__lead:hover .lp-recent-lux__lead-cover img { transform: scale(1.04); }
.lp-recent-lux__lead-title {
  margin: 0 0 0.5rem; font-size: clamp(1.25rem, 1.9vw, 1.55rem);
  font-weight: 400; line-height: 1.22; letter-spacing: -0.01em;
  color: var(--ink);
}
.lp-recent-lux__lead-meta {
  margin: 0 0 0.7rem; font-size: 0.82rem; color: var(--ink-muted);
  display: flex; gap: 1rem; flex-wrap: wrap;
}
.lp-recent-lux__lead-excerpt { font-size: 0.92rem; line-height: 1.6; color: var(--ink-soft); margin: 0; }

/* Two side cards stacked vertically on the right */
.lp-recent-lux__grid {
  display: flex; flex-direction: column;
  gap: 1.4rem;
}
.lp-recent-lux__card { background: var(--paper); }
.lp-recent-lux__card-link {
  display: grid; grid-template-columns: 1fr; gap: 0.7rem;
  color: inherit;
}
.lp-recent-lux__card-cover {
  aspect-ratio: 16 / 10; overflow: hidden; border-radius: 12px;
  background: #f3f3f3; position: relative;
}
.lp-recent-lux__card-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.lp-recent-lux__card:hover .lp-recent-lux__card-cover img { transform: scale(1.05); }
.lp-recent-lux__card-title {
  margin: 0 0 0.3rem; font-size: 0.96rem; font-weight: 400;
  line-height: 1.3; color: var(--ink); letter-spacing: -0.005em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lp-recent-lux__card-meta { margin: 0; font-size: 0.74rem; color: var(--ink-muted); }

/* ── Weekly Gossips — single column full-width list, 8 rows ── */
.lp-gossips {
  display: flex; flex-direction: column;
  gap: 1.6rem;
}
.lp-gossip { padding-bottom: 1.6rem; border-bottom: 1px solid var(--line); }
.lp-gossip:last-child { border-bottom: 0; padding-bottom: 0; }
/* Weekly Gossips — two columns on wide screens (single column ≤860px) */
@media (min-width: 861px) {
  .lp-gossips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem clamp(1.8rem, 3vw, 2.8rem); }
  .lp-gossips .lp-gossip__link { grid-template-columns: 150px 1fr; gap: 1.2rem; }
  .lp-gossips .lp-gossip:nth-last-child(-n+2) { border-bottom: 0; padding-bottom: 0; }
}
.lp-gossip__link {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 1.6rem;
  align-items: start;
  color: inherit;
}
.lp-gossip__thumb {
  aspect-ratio: 4 / 3; overflow: hidden; border-radius: 14px;
  background: #f3f3f3;
}
.lp-gossip__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.lp-gossip:hover .lp-gossip__thumb img { transform: scale(1.05); }
.lp-gossip__body { min-width: 0; }
.lp-gossip__title {
  margin: 0.3rem 0 0.55rem; font-size: 1.1rem; font-weight: 400;
  line-height: 1.26; color: var(--ink); letter-spacing: -0.008em;
}
.lp-gossip__meta {
  margin: 0 0 0.7rem; font-size: 0.78rem; color: var(--ink-muted);
  display: flex; gap: 0.8rem; flex-wrap: wrap;
}
.lp-gossip__excerpt {
  margin: 0 0 0.8rem; font-size: 0.92rem; line-height: 1.6;
  color: var(--ink-soft);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lp-gossip__more {
  display: inline-block; font-size: 0.78rem; font-weight: 400;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gold); border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.lp-gossip:hover .lp-gossip__more { color: var(--gold-deep); }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .lp-top7 { grid-template-columns: 1fr 1fr; }
  .lp-top7__hero { grid-column: 1 / -1; order: -1; }
  .lp-recent-lux { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .lp-top7 { grid-template-columns: 1fr; gap: 1.6rem; }
  .lp-top7__side { gap: 1.2rem; }
  .lp-hero__caption { width: 88%; padding: 1.2rem 1rem; }
  .lp-hero__btn { font-size: 0.66rem; padding: 0.7em 1.5em; letter-spacing: 0.16em; }
  .lp-gossip__link { grid-template-columns: 120px 1fr; gap: 1rem; }
  .lp-gossip__title { font-size: 1rem; }
  .lp-gossip__excerpt { -webkit-line-clamp: 3; }
}
@media (max-width: 520px) {
  .lp-gossip__link { grid-template-columns: 1fr; }
  .lp-gossip__thumb { aspect-ratio: 16 / 10; }
}

/* =====================================================================
   ── News article page — clean reading column, Gold Souk aesthetic ──
   Centred 720-760px column · serif-feel display headline · gold-rule
   section starts · readable 17px body · WebP cover with srcset.
   ===================================================================== */

.gs-container--reading { max-width: 760px; }

.gs-news-article-head {
  margin: 1.4rem 0 1.6rem;
  text-align: left;
}
.gs-news-article-head .gs-news-cat {
  display: inline-block;
  padding: 0.32em 0.95em;
  font-size: 0.66rem; font-weight: 400;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-deep);
  background: transparent;
  border: 1px solid var(--gold);
  border-radius: 999px;
  text-decoration: none;
}
.gs-news-article-head h1 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  font-weight: 400; line-height: 1.16; letter-spacing: -0.015em;
  margin: 0.9rem 0 0.7rem; color: var(--ink);
}
.gs-news-article-lede {
  font-size: 1.02rem; line-height: 1.62; color: var(--ink-soft);
  font-weight: 300; letter-spacing: 0;
  margin: 0.4rem 0 1.2rem; max-width: 60ch;
}
.gs-news-article-byline {
  display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap;
  font-size: 0.8rem; color: var(--ink-muted); margin: 0 0 1.6rem;
  font-variant-numeric: tabular-nums;
}
.gs-news-article-byline-author { color: var(--ink); font-weight: 400; }
.gs-news-article-byline-read { color: var(--ink-muted); }

.gs-news-article-cover {
  margin: 0 0 2rem; padding: 0;
  border-radius: 6px; overflow: hidden;
  background: #f3f3f3;
}
.gs-news-article-cover img { width: 100%; height: auto; display: block; }
.gs-news-article-cover figcaption {
  margin-top: 0.6rem; font-size: 0.8rem; color: var(--ink-muted); text-align: center;
}

/* Prose — typographic rhythm for long-form, thin-stroke premium */
.gs-news-article-body.gs-prose {
  font-size: 1rem; line-height: 1.78;
  color: var(--ink-soft); font-weight: 300;
  max-width: 65ch;
}
.gs-news-article-body p { margin: 0 0 1.15em; }
.gs-news-article-body p.lede {
  font-size: 1.1rem; line-height: 1.6;
  color: var(--ink); font-weight: 300; letter-spacing: 0;
  margin: 0 0 1.8em;
}
.gs-news-article-body h2 {
  font-family: var(--font-display);
  margin: 2.4em 0 0.8em;
  font-size: 1.22rem; font-weight: 400; letter-spacing: -0.005em;
  color: var(--ink);
  padding-top: 1.4em; border-top: 1px solid var(--line);
}
.gs-news-article-body h2:first-of-type { padding-top: 0; border-top: 0; margin-top: 1.4em; }
.gs-news-article-body h3 {
  margin: 1.8em 0 0.6em;
  font-size: 1rem; font-weight: 400; color: var(--ink); letter-spacing: 0;
}
.gs-news-article-body ul, .gs-news-article-body ol {
  margin: 0 0 1.4em; padding-left: 1.4em;
}
.gs-news-article-body li { margin: 0.4em 0; }
.gs-news-article-body strong { font-weight: 400; color: var(--ink); }
.gs-news-article-body a {
  color: var(--gold-deep); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.gs-news-article-body a:hover { color: var(--gold); }
.gs-news-article-body blockquote {
  margin: 1.6em 0;
  padding: 0.2em 0 0.2em 1.2em;
  border-left: 2px solid var(--gold);
  font-style: italic; color: var(--ink-soft);
}

.gs-news-article-foot {
  margin-top: 3rem; padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.gs-news-article-share {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 0.78rem; color: var(--ink-muted);
}
.gs-news-article-share-label {
  letter-spacing: 0.18em; text-transform: uppercase; margin-right: 0.2rem;
}
.gs-news-article-share a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--line);
  font-size: 0.86rem; font-weight: 400; color: var(--ink);
  text-decoration: none;
  transition: background 180ms ease-out, color 180ms ease-out, border-color 180ms ease-out;
}
.gs-news-article-share a:hover {
  background: var(--gold); border-color: var(--gold); color: #ffffff;
}

@media (max-width: 768px) {
  .gs-news-article-head h1 { font-size: 1.55rem !important; line-height: 1.2 !important; }
  .gs-news-article-lede { font-size: 0.98rem !important; }
  .gs-news-article-body.gs-prose { font-size: 1rem; line-height: 1.7; }
  .gs-news-article-body h2 { font-size: 1.2rem !important; padding-top: 1em !important; }
  .gs-news-article-body h3 { font-size: 1.02rem !important; }
}

/* ── Reusable FAQ section (gs_faq_section component) ───────────────────── */
/* `.gs-page .gs-faq__title` (0,2,0) beats `.gs-page h2` (0,1,1) so the FAQ
   heading stays on the site's light heading weight — never bold — and is
   distinguished from the questions by size, not stroke. Every page, LTR + RTL.
   That weight is 300: h1, h2 and .gs-pagehead p all render 300, so the 400 this
   block used to carry made every FAQ (and the FAQ appears on most pages) read
   noticeably thicker than the copy around it. */
.gs-page .gs-faq__title,
.gs-faq__title { font-size: 1.5rem; font-weight: 300; color: var(--ink);
  margin: 0 0 1.5rem; letter-spacing: -0.01em; }
.gs-faq__list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.gs-faq__item { border-bottom: 1px solid var(--line); }
.gs-faq__q { list-style: none; cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; gap: 1rem; padding: 1.15rem 0.2rem;
  font-size: 1.02rem; font-weight: 300; color: var(--ink); }
.gs-faq__q::-webkit-details-marker { display: none; }
.gs-faq__q::after { content: "+"; flex: none; width: 1.4rem; height: 1.4rem;
  display: grid; place-items: center; font-size: 1.3rem; font-weight: 300;
  color: var(--gold-deep); transition: transform 0.25s ease; }
.gs-faq__item[open] .gs-faq__q::after { transform: rotate(45deg); }
.gs-faq__a { padding: 0 0.2rem 1.4rem; }
.gs-faq__a p { margin: 0; color: var(--ink-soft); line-height: 1.7; max-width: 70ch; }

/* ════════════════════════════════════════════════════════════════════════
   Consolidated RTL (Arabic) overrides — applied when <html dir="rtl">.
   Numerals, prices, currency codes and Latin tickers stay LTR via isolation.
   ════════════════════════════════════════════════════════════════════════ */
[dir="rtl"] .gs-pagehead,
[dir="rtl"] .gs-prose,
[dir="rtl"] .gs-faq__q,
[dir="rtl"] .gs-faq__a p,
[dir="rtl"] .gs-section-head,
[dir="rtl"] .gs-card { text-align: right; }

/* eyebrow gold dash sits on the leading (right) side of the label in RTL.
   The default flex `row` already does this in an RTL context — adding
   row-reverse here flipped it back to the left (the LTR side), so it's gone. */

/* prose + bullet lists indent from the right */
[dir="rtl"] .gs-prose ul,
[dir="rtl"] .gs-prose ol { padding-right: 1.25em; padding-left: 0; }
[dir="rtl"] .gs-faq__list { text-align: right; }

/* keep prices, karats, currency codes and Latin tickers left-to-right
   so digits and symbols never reorder inside Arabic text */
[dir="rtl"] .gs-ratecell .v,
[dir="rtl"] .gs-ratecell .u,
[dir="rtl"] .gs-kpi-val,
[dir="rtl"] .fx-amount,
[dir="rtl"] .fx-code,
[dir="rtl"] .gs-aed,
[dir="rtl"] .dhs,
[dir="rtl"] [data-aed],
[dir="rtl"] table td .num,
[dir="rtl"] .gs-ratebox-asof { direction: ltr; unicode-bidi: isolate; }

/* …but the rate cards must still read right-to-left: label, value and unit all
   align to the right so the whole card mirrors cleanly (digits stay LTR). */
[dir="rtl"] .gs-ratecell { text-align: right; }
[dir="rtl"] .gs-ratecell .k { flex-direction: row; justify-content: flex-end; }
[dir="rtl"] .gs-ratecell .v,
[dir="rtl"] .gs-ratecell .u { text-align: right; }

/* tables: header + cell text aligns to the start (right) but numeric columns
   remain visually consistent through the isolation rule above */
[dir="rtl"] .gs-table th,
[dir="rtl"] .gs-table td { text-align: right; }
[dir="rtl"] .gs-table th.num,
[dir="rtl"] .gs-table td.num { text-align: left; }

/* select chevrons and field affordances mirror to the left edge */
[dir="rtl"] .gpc-card__field--select .gpc-select-icon,
[dir="rtl"] select.gs-select { background-position: left 0.9rem center; }
[dir="rtl"] .gpc-card__field--select { direction: rtl; }

/* breadcrumb separators already handled; mirror any inline arrows */
[dir="rtl"] .gs-pagehead .gs-icon[data-arrow],
[dir="rtl"] .gs-arrow-up-right { transform: scaleX(-1); }

/* FAQ row: in RTL the flex `row` already flows right-to-left, so the question
   text sits flush right and the +/x marker falls to the left automatically.
   (Do NOT add flex-direction:row-reverse here — it double-reverses back to a
   left-to-right layout, pushing the Arabic text to the wrong side.) */

/* the homepage crawlable SEO block, when visible (no-JS), reads right-to-left */
[dir="rtl"] .gs-home-seo ul { text-align: right; }

/* ════════════════════════════════════════════════════════════════════════
   Live-rate social share — button + sheet + generated card preview.
   ════════════════════════════════════════════════════════════════════════ */
.gs-share-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.7em 1.15em; border-radius: 999px;
  border: 1px solid var(--line, rgba(34,29,23,.14)); background: #fff;
  color: var(--ink, #221d17); font-family: inherit; font-size: 0.82rem;
  font-weight: 400; letter-spacing: .02em; cursor: pointer;
  transition: border-color 180ms ease, color 180ms ease, background 180ms ease;
}
.gs-share-btn:hover { border-color: var(--gold, #bd9e70); color: var(--gold-deep, #9a7c4f); }
.gs-share-btn svg { flex: 0 0 auto; }

.gs-share-sheet {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(0.5rem, 3vw, 1.5rem);
}
.gs-share-sheet[hidden] { display: none; }
.gs-share-sheet__scrim {
  position: absolute; inset: 0; background: rgba(22,18,13,.46);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.gs-share-sheet__panel {
  position: relative; z-index: 1; width: min(420px, 100%);
  max-height: 92vh; overflow: auto; background: var(--paper, #fff);
  border-radius: 22px; box-shadow: 0 24px 60px -18px rgba(20,16,12,.4);
  padding: 1.1rem 1.1rem 1.3rem;
  animation: gsShareIn 280ms cubic-bezier(0.22,1,0.36,1);
}
@keyframes gsShareIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.gs-share-sheet__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.9rem;
}
.gs-share-sheet__head h3 { margin: 0; font-size: 1.02rem; font-weight: 500; color: var(--ink, #221d17); }
.gs-share-sheet__close {
  display: inline-flex; width: 34px; height: 34px; border-radius: 50%;
  align-items: center; justify-content: center; border: 0; cursor: pointer;
  background: rgba(34,29,23,.05); color: var(--ink-soft, #66615c);
}
.gs-share-sheet__close:hover { background: rgba(34,29,23,.1); color: var(--ink, #221d17); }

.gs-share-preview {
  border-radius: 16px; overflow: hidden; background: #fbf8f2;
  border: 1px solid var(--line-soft, rgba(34,29,23,.06));
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 9 / 16; max-height: 46vh; margin: 0 auto 1rem;
}
.gs-share-preview img { width: 100%; height: 100%; object-fit: contain; display: block; }

.gs-share-actions { display: grid; gap: 0.55rem; }
.gs-share-act {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  width: 100%; padding: 0.95em 1rem; border-radius: 14px; border: 0; cursor: pointer;
  font-family: inherit; font-size: 0.92rem; font-weight: 400;
}
.gs-share-act--primary { background: var(--gold, #bd9e70); color: #fff; }
.gs-share-act--primary:hover { background: var(--gold-deep, #9a7c4f); }
.gs-share-hint {
  margin: -0.1rem 0 0.5rem; text-align: center; font-size: 0.72rem; font-weight: 300;
  line-height: 1.45; color: var(--ink-muted, #8c8478);
}
/* social icon grid */
.gs-share-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.5rem 0.35rem;
}
.gs-share-ico {
  display: flex; flex-direction: column; align-items: center; gap: 0.32rem;
  padding: 0.55rem 0.2rem 0.45rem; border-radius: 14px; cursor: pointer;
  border: 1px solid transparent; background: transparent; text-decoration: none;
  color: var(--ink-soft, #4d4640); font-family: inherit;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
.gs-share-ico:hover { background: rgba(189,158,112,0.1); color: var(--gold-deep, #9a7c4f); transform: translateY(-1px); }
.gs-share-ico__g {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--paper-sink, #f2ece1); color: inherit;
  transition: background 160ms ease;
}
.gs-share-ico:hover .gs-share-ico__g { background: rgba(189,158,112,0.18); }
.gs-share-ico__t {
  font-size: 0.64rem; font-weight: 300; letter-spacing: .01em;
  color: var(--ink-muted, #8c8478); white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE SOUQ — marketplace shell (souq.php). Minimal, editorial, RTL-aware.
   Motion: transform/opacity only, ease-out, origin-aware expander, scale-on-press.
   ═══════════════════════════════════════════════════════════════════════════ */
:root { --ease-drawer: cubic-bezier(.32,.72,0,1); }

/* gold-gradient placeholder tiles (no external imagery) */
.gs-tone-1 { background: linear-gradient(135deg,#f5ecdb,#dcc095 55%,#bd9e70); }
.gs-tone-2 { background: linear-gradient(140deg,#efe6d5,#cdb288 50%,#a8895f); }
.gs-tone-3 { background: linear-gradient(135deg,#f6efe0,#e3ca9d 60%,#c4a273); }
.gs-tone-4 { background: linear-gradient(140deg,#ece2cf,#caaf81 55%,#9a7c4f); }
.gs-tone-5 { background: linear-gradient(135deg,#f4ecda,#d8be93 55%,#b89a6b); }
.gs-tone-6 { background: linear-gradient(140deg,#efe7d6,#c7ab7c 55%,#a98b5d); }

/* ── 1 · campaign hero (asymmetric 2-up) ── */
.gs-souq-campaigns { display: grid; grid-template-columns: 1.65fr 1fr; gap: 1rem; }
.gs-souq-camp {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  min-height: 300px; display: flex; align-items: flex-end; padding: 1.9rem;
  text-decoration: none; color: var(--ink); border: 1px solid var(--line);
  background: linear-gradient(165deg,#fbf6ec,#f3ead9);
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
.gs-souq-camp--lead { min-height: 392px; }
.gs-souq-camp::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 85% at 100% 0%, rgba(189,158,112,.20), transparent 58%); }
.gs-souq-camp.gs-tone-2::after { background: radial-gradient(120% 85% at 0% 100%, rgba(154,124,79,.20), transparent 58%); }
.gs-souq-camp__copy { position: relative; z-index: 1; }
.gs-souq-camp__eyebrow { display: inline-block; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .18em; color: var(--gold-deep); margin-bottom: .7rem; }
.gs-souq-camp__title { font-family: var(--font-display); font-weight: 300; line-height: 1.04;
  font-size: clamp(1.6rem, 1rem + 2.4vw, 2.7rem); margin: 0; color: var(--ink); }
.gs-souq-camp__sub { color: var(--ink-soft); max-width: 42ch; margin: .8rem 0 0; font-size: .95rem; }
.gs-souq-camp__cta { display: inline-flex; align-items: center; gap: .45rem; margin-top: 1rem;
  color: var(--gold-deep); font-size: .9rem; letter-spacing: .02em;
  transition: gap 200ms var(--ease-out); }
.gs-souq-camp__cta .gs-icon { width: 16px; height: 16px; }
.gs-souq-camp:active { transform: scale(.99); }
@media (hover:hover) and (pointer:fine) {
  .gs-souq-camp:hover { transform: translateY(-3px); box-shadow: 0 20px 44px -20px rgba(120,90,40,.38); }
  .gs-souq-camp:hover .gs-souq-camp__cta { gap: .8rem; }
}

/* ── 2 · search bar + advanced button ── */
.gs-souq-searchbar { display: flex; gap: .7rem; align-items: center; margin-bottom: 1rem; }
.gs-souq-searchbar__field { flex: 1; display: flex; align-items: center; gap: .6rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: .72rem 1.15rem;
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease); }
.gs-souq-searchbar__field:focus-within { border-color: var(--gold); box-shadow: none; }
.gs-souq-searchbar__field .gs-icon { width: 18px; height: 18px; color: var(--ink-muted); flex: 0 0 auto; }
.gs-souq-searchbar__field input { flex: 1; min-width: 0; border: 0; background: transparent;
  font: inherit; font-weight: 300; color: var(--ink); outline: none; }
.gs-souq-advbtn { display: inline-flex; align-items: center; gap: .45rem; flex: 0 0 auto;
  border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: .66rem 1.1rem;
  font: inherit; font-size: .86rem; color: var(--ink-soft); cursor: pointer;
  transition: border-color 160ms var(--ease), color 160ms var(--ease), transform 140ms var(--ease-out); }
.gs-souq-advbtn .gs-icon { width: 17px; height: 17px; }
.gs-souq-advbtn[aria-expanded="true"] { border-color: var(--gold); color: var(--gold-deep); }
.gs-souq-advbtn:active { transform: scale(.97); }

/* ── category strip ── */
.gs-souq-cats { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .4rem;
  scrollbar-width: none; -ms-overflow-style: none; }
.gs-souq-cats::-webkit-scrollbar { display: none; }
.gs-souq-cat { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: .5rem .9rem;
  cursor: pointer; font: inherit; font-size: .84rem; color: var(--ink-soft); white-space: nowrap;
  transition: border-color 160ms var(--ease), background 160ms var(--ease), color 160ms var(--ease), transform 140ms var(--ease-out); }
.gs-souq-cat img { width: 18px; height: 18px; opacity: .62; flex: 0 0 auto; }
.gs-souq-cat__all { font-weight: 400; }
.gs-souq-cat.is-on { border-color: var(--gold); background: var(--gold-wash); color: var(--ink); }
.gs-souq-cat.is-on img { opacity: .85; }
.gs-souq-cat:active { transform: scale(.97); }

/* ── advanced facets (desktop = expander; mobile = bottom sheet) ── */
.gs-souq-facets { margin: .5rem 0 1rem; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--paper-sink); padding: 1.1rem 1.2rem; transform-origin: top center; }
.gs-souq-facets__sheethead { display: none; }
.gs-souq-facet { border: 0; padding: 0; margin: 0 0 .9rem; }
.gs-souq-facet legend { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-muted); margin-bottom: .5rem; padding: 0; }
.gs-souq-facet__pills { display: flex; flex-wrap: wrap; gap: .4rem; }
.gs-souq-pill { border: 1px solid var(--line); background: var(--paper); border-radius: 999px;
  padding: .42rem .85rem; font: inherit; font-size: .82rem; color: var(--ink-soft); cursor: pointer;
  transition: border-color 150ms var(--ease), background 150ms var(--ease), color 150ms var(--ease), transform 130ms var(--ease-out); }
.gs-souq-pill[aria-pressed="true"] { border-color: var(--gold); background: var(--gold-wash); color: var(--gold-deep); }
.gs-souq-pill:active { transform: scale(.96); }
.gs-souq-facets__foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: .4rem; }
.gs-souq-clear { border: 0; background: none; color: var(--ink-muted); text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer; font: inherit; font-size: .82rem; }
.gs-souq-apply { display: none; }
@media (min-width: 769px) {
  .gs-souq-facets:not(.is-open) { display: none; }
  .gs-souq-facets.is-open { animation: souqExpand 200ms var(--ease-out); }
}
@keyframes souqExpand { from { opacity: 0; transform: translateY(-6px) scale(.99); } to { opacity: 1; transform: none; } }

/* ── result bar + tabs ── */
.gs-souq-resultbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  margin: .4rem 0 1.1rem; flex-wrap: wrap; }
.gs-souq-count { font-size: .86rem; color: var(--ink-muted); }
.gs-souq-tabs { display: inline-flex; gap: .2rem; background: var(--paper-sink); border-radius: 999px; padding: .25rem; }
.gs-souq-tab { border: 0; background: none; border-radius: 999px; padding: .42rem .9rem; font: inherit;
  font-size: .82rem; color: var(--ink-soft); cursor: pointer;
  transition: color 150ms var(--ease), background 150ms var(--ease); }
.gs-souq-tab.is-on { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(34,29,23,.08); }

/* ── product grid + tiles ── */
.gs-souq-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.3rem 1.1rem; }
.gs-souq-grid.is-busy { opacity: .55; transition: opacity 120ms var(--ease); }
.gs-souq-tile { display: flex; flex-direction: column; }
.gs-souq-tile[hidden] { display: none; }
.gs-souq-tile__media { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--r-md);
  overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.45); }
.gs-souq-tile__media::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 30% 18%, rgba(255,255,255,.4), transparent 55%); }
.gs-souq-tile__badge { position: absolute; top: .6rem; inset-inline-start: .6rem; z-index: 2;
  background: rgba(253,252,249,.92); color: var(--gold-deep); font-size: .64rem; letter-spacing: .08em;
  text-transform: uppercase; padding: .25rem .55rem; border-radius: 999px; }
.gs-souq-tile__wish { position: absolute; top: .5rem; inset-inline-end: .5rem; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(253,252,249,.86);
  color: var(--ink-soft); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: transform 140ms var(--ease-out), color 160ms var(--ease), background 160ms var(--ease); }
.gs-souq-tile__wish:active { transform: scale(.9); }
.gs-souq-tile__wish[aria-pressed="true"] { color: #bb5a48; background: #fff; }
.gs-souq-tile__wish[aria-pressed="true"] svg { fill: currentColor; }
.gs-souq-tile__body { padding: .85rem .15rem 0; }
.gs-souq-tile__house { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-muted); }
.gs-souq-tile__name { font-size: 1rem; font-weight: 400; line-height: 1.25; margin: .2rem 0 .5rem; }
.gs-souq-tile__meta { display: flex; align-items: center; gap: .6rem; margin-bottom: .45rem; }
.gs-souq-chip { font-size: .72rem; border: 1px solid var(--line); border-radius: 999px; padding: .1rem .5rem; color: var(--ink-soft); }
.gs-souq-tile__weight { font-size: .76rem; color: var(--ink-muted); }
.gs-souq-tile__price { font-family: var(--font-display); font-size: 1.06rem; color: var(--ink); }
.gs-souq-tile__onreq { font-family: var(--font-body); font-size: .82rem; color: var(--ink-muted); }
@media (hover:hover) and (pointer:fine) {
  .gs-souq-tile__media { transition: transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out); }
  .gs-souq-tile:hover .gs-souq-tile__media { transform: translateY(-3px); box-shadow: 0 16px 34px -18px rgba(120,90,40,.42); }
}

/* ── empty state ── */
.gs-souq-empty { text-align: center; padding: 3rem 1rem; }
.gs-souq-empty[hidden] { display: none; }
.gs-souq-empty__ico { display: inline-flex; width: 46px; height: 46px; border-radius: 50%;
  background: var(--paper-sink); align-items: center; justify-content: center; color: var(--ink-muted); margin-bottom: .8rem; }
.gs-souq-empty__ico .gs-icon { width: 20px; height: 20px; }
.gs-souq-empty p { color: var(--ink-soft); margin-bottom: 1.1rem; }

/* ── 3 · featured jewellers (carousel items) ── */
.gs-souq-house { flex: 0 0 auto; width: 232px; display: flex; flex-direction: column; gap: .5rem;
  padding: 1.4rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper);
  text-decoration: none; color: var(--ink); transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out), border-color 200ms var(--ease); }
.gs-souq-house__crest { width: 54px; height: 54px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-family: var(--font-display); font-size: 1.5rem; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }
.gs-souq-house__name { font-size: 1.05rem; font-weight: 400; }
.gs-souq-house__meta { display: flex; align-items: center; gap: .45rem; font-size: .8rem; color: var(--ink-muted); }
.gs-souq-house__rating { display: inline-flex; align-items: center; gap: .25rem; color: var(--gold-deep); }
.gs-souq-house__rating .gs-icon { width: 14px; height: 14px; }
.gs-souq-house__cta { margin-top: .3rem; font-size: .82rem; color: var(--gold-deep); display: inline-flex; align-items: center; gap: .35rem;
  transition: gap 200ms var(--ease-out); }
.gs-souq-house__cta .gs-icon { width: 14px; height: 14px; }
.gs-souq-house:active { transform: scale(.985); }
@media (hover:hover) and (pointer:fine) {
  .gs-souq-house:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 16px 34px -20px rgba(120,90,40,.4); }
  .gs-souq-house:hover .gs-souq-house__cta { gap: .7rem; }
}

/* ── 4 · trust strip ── */
.gs-souq-trust { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 1.4rem; align-items: center;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.6rem 0; }
.gs-souq-trust__item { display: flex; gap: .7rem; align-items: flex-start; }
.gs-souq-trust__ico { color: var(--gold-deep); flex: 0 0 auto; }
.gs-souq-trust__ico .gs-icon { width: 22px; height: 22px; }
.gs-souq-trust__item b { font-weight: 500; font-size: .92rem; }
.gs-souq-trust__item p { font-size: .8rem; color: var(--ink-soft); margin: .15rem 0 0; }
.gs-souq-trust__pay { display: flex; flex-direction: column; gap: .4rem; align-items: flex-end; }
.gs-souq-trust__pay > span:first-child { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-muted); }
.gs-souq-trust__logos { display: flex; gap: .5rem; align-items: center; }
.gs-souq-trust__logos img { height: 22px; width: auto; opacity: .85; }

/* ── mobile: bottom-sheet filters + FAB ── */
.gs-souq-filterfab { display: none; }
.gs-souq-sheet-scrim { position: fixed; inset: 0; background: rgba(20,16,10,.42); z-index: 59; }
.gs-souq-sheet-scrim[hidden] { display: none; }
@media (max-width: 768px) {
  .gs-souq-campaigns { grid-template-columns: 1fr; }
  .gs-souq-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem .8rem; }
  .gs-souq-advbtn { display: none; }
  .gs-souq-filterfab { position: fixed; left: 50%; transform: translateX(-50%); bottom: 84px; z-index: 55;
    display: inline-flex; align-items: center; gap: .5rem; background: var(--ink); color: #fff; border: 0;
    border-radius: 999px; padding: .75rem 1.4rem; font: inherit; font-size: .88rem; cursor: pointer;
    box-shadow: 0 10px 26px rgba(34,29,23,.3); }
  .gs-souq-filterfab .gs-icon { width: 17px; height: 17px; }
  .gs-souq-filterfab:active { transform: translateX(-50%) scale(.97); }
  .gs-souq-facets { position: fixed; inset-inline: 0; bottom: 0; top: auto; margin: 0; z-index: 60;
    max-height: 82vh; overflow: auto; border: 0; border-radius: 20px 20px 0 0; background: var(--paper);
    padding: 1.1rem 1.2rem calc(1.2rem + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%); transition: transform 320ms var(--ease-drawer); box-shadow: 0 -10px 40px rgba(20,16,10,.22); }
  .gs-souq-facets.is-open { transform: translateY(0); animation: none; }
  .gs-souq-facets__sheethead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; font-weight: 500; }
  .gs-souq-facets__sheethead button { border: 0; background: none; font-size: 1.6rem; line-height: 1; color: var(--ink-muted); cursor: pointer; }
  .gs-souq-apply { display: inline-flex; }
}

/* ── RTL ── */
[dir="rtl"] .gs-souq-camp__eyebrow,
[dir="rtl"] .gs-souq-tile__house { letter-spacing: 0; }
[dir="rtl"] .gs-souq-camp .gs-icon[data-arrow],
[dir="rtl"] .gs-souq-camp__cta .gs-icon,
[dir="rtl"] .gs-souq-house__cta .gs-icon { transform: scaleX(-1); }
[dir="rtl"] .gs-souq-trust__pay { align-items: flex-start; }

/* ── reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .gs-souq-camp, .gs-souq-tile__media, .gs-souq-house, .gs-souq-facets.is-open,
  .gs-souq-advbtn, .gs-souq-pill, .gs-souq-cat, .gs-souq-tile__wish { transition: none; animation: none; }
  .gs-souq-facets { transition: none; }
}

/* ═══ News (Luxury Pro magazine) — arrows, RTL mirroring, reduced motion, press ═══ */
.lp-arrow { display: inline-block; }
[dir="rtl"] .lp-arrow { transform: scaleX(-1); }

/* RTL text alignment for captions, heads and metas */
[dir="rtl"] .lp-hero__caption,
[dir="rtl"] .lp-top7__hero-body,
[dir="rtl"] .lp-recent-lux__lead-body,
[dir="rtl"] .lp-gossip__body,
[dir="rtl"] .lp-tri__head,
[dir="rtl"] .gs-news-row-body,
[dir="rtl"] .gs-news-card-body { text-align: right; }

/* category badge: top-left → top-right */
[dir="rtl"] .lp-mini__cat { left: auto; right: 14px; }

/* hero nav arrows: mirror sides + glyph direction */
[dir="rtl"] .lp-hero__nav--prev { left: auto; right: 1.4rem; }
[dir="rtl"] .lp-hero__nav--next { right: auto; left: 1.4rem; }
[dir="rtl"] .lp-hero__nav--prev svg { transform: scaleX(1); }
[dir="rtl"] .lp-hero__nav--next svg { transform: scaleX(-1); }

/* archive filter row: search icon side + view toggle anchoring */
[dir="rtl"] .gs-news-search-icon { margin-right: 0; margin-left: 0.6rem; }
[dir="rtl"] .gs-news-view { margin-left: 0; margin-right: auto; }

/* breadcrumb chevrons point the reading direction */
[dir="rtl"] .gs-breadcrumb .gs-icon { transform: scaleX(-1); }

/* press feedback on magazine card links (Emil: pressables acknowledge the press) */
.lp-mini__link, .lp-gossip__link, .lp-top7__row-link,
.lp-recent-lux__card-link, .lp-tri__row, .gs-news-card-link, .gs-news-row-link {
  transition: transform 140ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .lp-mini__link:active, .lp-gossip__link:active, .lp-top7__row-link:active,
  .lp-recent-lux__card-link:active, .lp-tri__row:active,
  .gs-news-card-link:active, .gs-news-row-link:active { transform: scale(0.99); }
}

/* reduced motion: drop image zoom + slide motion, keep fades */
@media (prefers-reduced-motion: reduce) {
  .lp-mini__cover img, .lp-recent__cover img, .lp-row__thumb img, .lp-tri__thumb img,
  .lp-gossip__thumb img, .lp-recent-lux__card-cover img, .lp-recent-lux__lead-cover img,
  .lp-top7__hero-cover img, .lp-top7__row-thumb img, .gs-news-card-cover img {
    transition: none !important; transform: none !important;
  }
  .lp-mini__link, .lp-gossip__link, .lp-top7__row-link, .lp-recent-lux__card-link,
  .lp-tri__row, .gs-news-card-link, .gs-news-row-link { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   NEWS — editorial redesign v2 (scoped to .gs-page--news so it wins cleanly).
   Goals: calmer imagery, denser grid (more columns), smaller cards, refined
   type, fixed hero, compact rhythm. Modern minimal-luxury editorial.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hero: cinematic, shorter, full bottom scrim (caption reads on any photo) ── */
/* decent breathing room between the sticky header and the hero slider — applied
   as container padding (margin-top would collapse through the padding-less page). */
.gs-page--news .gs-page { padding-top: clamp(4.5rem, 7vw, 6rem); }
.gs-page--news .lp-hero { margin-block: 0 clamp(2.2rem, 4.5vw, 3.2rem); border-radius: 16px; box-shadow: 0 24px 60px -34px rgba(34,29,23,.4); }
/* fill the full hero width and drive height directly (+~10%); aspect-ratio +
   max-height was shrinking the WIDTH to keep ratio, leaving a side gap. */
.gs-page--news .lp-hero__viewport { aspect-ratio: auto; width: 100%; height: clamp(440px, 40vw, 506px); max-height: none; }
.gs-page--news .lp-hero__link img { object-position: center; }
.gs-page--news .lp-hero__link::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(to top, rgba(14,10,6,.74) 0%, rgba(14,10,6,.30) 36%, rgba(14,10,6,.04) 64%, transparent 100%); }
.gs-page--news .lp-hero__caption { z-index: 2; bottom: clamp(1.6rem, 4vw, 2.8rem); }
.gs-page--news .lp-hero__title { font-size: clamp(1.35rem, 1rem + 1.7vw, 2.05rem); line-height: 1.12; max-width: 22ch; }
.gs-page--news .lp-hero__btn { margin-top: .9rem; }

/* ── Section rhythm: tighter so the page reads compact, not huge ── */
.gs-page--news .lp-title-block { margin-bottom: 1.05rem; }
.gs-page--news .gs-section--tight { padding-block: clamp(1.6rem, 3vw, 2.6rem); }

/* ── Grids: more columns ── */
.gs-page--news .lp-featured-row,
.gs-page--news .gs-news-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1.4rem 1.15rem; }
@media (max-width: 1040px) { .gs-page--news .lp-featured-row, .gs-page--news .gs-news-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 720px)  { .gs-page--news .lp-featured-row, .gs-page--news .gs-news-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem .75rem; } }
@media (max-width: 340px)  { .gs-page--news .lp-featured-row, .gs-page--news .gs-news-grid { grid-template-columns: 1fr; } }
/* Featured row paired with the Most Popular sidebar → 3-up to fit the narrower
   left column; reverts to full-width column counts once the sidebar stacks. */
.gs-page--news .lp-featured-row--aside { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 1100px) { .gs-page--news .lp-featured-row--aside { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (max-width: 1040px) { .gs-page--news .lp-featured-row--aside { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 720px)  { .gs-page--news .lp-featured-row--aside { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 340px)  { .gs-page--news .lp-featured-row--aside { grid-template-columns: 1fr; } }

/* ── Featured Articles — portrait auto-carousel (one story at a time) ──────── */
.lp-fc { position: relative; margin-top: clamp(1.2rem, 2.4vw, 1.8rem); }
/* coverflow stage: active card centred (≈ hero height), prev + next peek behind */
.lp-fc__stage { position: relative; width: 100%; height: clamp(455px, 41vw, 520px); overflow: hidden; cursor: grab; touch-action: pan-y; perspective: 1600px; }
.lp-fc.is-dragging .lp-fc__stage { cursor: grabbing; }
.lp-fc.is-dragging .lp-fc__slide { transition: none; }
.lp-fc__slide {
  position: absolute; top: 50%; left: 50%; height: clamp(420px, 37vw, 468px); aspect-ratio: 2 / 3;
  border-radius: clamp(16px, 1.6vw, 22px); overflow: hidden;
  opacity: 0; z-index: 1; pointer-events: none;
  transform-origin: center center; will-change: transform, opacity;
  transform: translate(calc(-50% + var(--fcd, 0px)), -50%) scale(.66);
  transition: transform .7s var(--ease-out), opacity .7s var(--ease-out);
  box-shadow: 0 28px 60px -36px rgba(34, 29, 23, 0.55);
}
/* layered 3D coverflow — active centred, two tiers receding (tilting) on each side */
.lp-fc__slide.is-active { opacity: 1;  z-index: 4; pointer-events: auto; transform: translate(calc(-50%  + var(--fcd, 0px)), -50%) scale(1)   rotateY(0deg); }
.lp-fc__slide.is-p1     { opacity: .62; z-index: 3; transform: translate(calc(-8%   + var(--fcd, 0px)), -50%) scale(.86) rotateY(-18deg); }
.lp-fc__slide.is-n1     { opacity: .62; z-index: 3; transform: translate(calc(-92%  + var(--fcd, 0px)), -50%) scale(.86) rotateY(18deg); }
.lp-fc__slide.is-p2     { opacity: .3;  z-index: 1; transform: translate(calc(24%   + var(--fcd, 0px)), -50%) scale(.72) rotateY(-26deg); box-shadow: 0 18px 42px -28px rgba(34,29,23,.5); }
.lp-fc__slide.is-n2     { opacity: .3;  z-index: 1; transform: translate(calc(-124% + var(--fcd, 0px)), -50%) scale(.72) rotateY(26deg);  box-shadow: 0 18px 42px -28px rgba(34,29,23,.5); }
/* tablet: drop the far tier, gentler ±1 coverflow */
@media (max-width: 900px) {
  .lp-fc__slide.is-n2, .lp-fc__slide.is-p2 { opacity: 0; }
  .lp-fc__slide.is-p1 { transform: translate(calc(-12% + var(--fcd, 0px)), -50%) scale(.84) rotateY(-14deg); }
  .lp-fc__slide.is-n1 { transform: translate(calc(-88% + var(--fcd, 0px)), -50%) scale(.84) rotateY(14deg); }
}
/* mobile: single card with a thin peek behind */
@media (max-width: 560px) {
  .lp-fc__slide.is-p1 { opacity: .42; transform: translate(calc(-26% + var(--fcd, 0px)), -50%) scale(.8) rotateY(-10deg); }
  .lp-fc__slide.is-n1 { opacity: .42; transform: translate(calc(-74% + var(--fcd, 0px)), -50%) scale(.8) rotateY(10deg); }
}
/* controls row beneath the slider: prev arrow · dots · next arrow */
.lp-fc__controls { display: flex; align-items: center; justify-content: center; gap: clamp(.8rem, 2vw, 1.4rem); margin-top: clamp(1.1rem, 2vw, 1.5rem); }
.lp-fc__nav {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--paper); color: var(--ink-soft); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px -6px rgba(34, 29, 23, .2);
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease-out);
}
.lp-fc__nav .gs-icon { width: 18px; height: 18px; }
.lp-fc__nav--prev .gs-icon { transform: scaleX(-1); }
[dir="rtl"] .lp-fc__nav--prev .gs-icon { transform: none; }
[dir="rtl"] .lp-fc__nav--next .gs-icon { transform: scaleX(-1); }
@media (hover: hover) and (pointer: fine) {
  .lp-fc__nav:hover { background: var(--gold); color: #fff; border-color: var(--gold); }
  .lp-fc__nav--prev:hover { transform: translateX(-2px); }
  .lp-fc__nav--next:hover { transform: translateX(2px); }
}
.lp-fc__nav:active { transform: scale(.94); }
.lp-fc__nav:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
/* mobile: swipe + dots are enough — drop the arrows */
@media (max-width: 640px) { .lp-fc__nav { display: none; } }
.lp-fc__card { position: absolute; inset: 0; display: block; text-decoration: none; color: #fff; }
.lp-fc__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.05); transition: transform .8s var(--ease-out);
}
.lp-fc__slide.is-active .lp-fc__img { transform: scale(1); transition: transform 6s linear; } /* slow ken-burns while live */
/* side cards read as quiet thumbnails — only the active card carries full chrome */
.lp-fc__slide:not(.is-active) .lp-fc__body,
.lp-fc__slide:not(.is-active) .lp-fc__cat { opacity: 0; transition: opacity .4s var(--ease); }
.lp-fc__slide:not(.is-active) .lp-fc__card::after { opacity: .55; }
.lp-fc__card::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(14, 10, 6, .86) 0%, rgba(14, 10, 6, .42) 40%, rgba(14, 10, 6, 0) 68%);
}
.lp-fc__cat {
  position: absolute; inset-block-start: 1.05rem; inset-inline-start: 1.05rem; z-index: 2;
  display: inline-flex; align-items: center; padding: .42rem .8rem; border-radius: 999px;
  font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: #fff;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .26);
  backdrop-filter: blur(8px) saturate(120%); -webkit-backdrop-filter: blur(8px) saturate(120%);
}
.lp-fc__body { position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 2; padding: clamp(1.3rem, 2.6vw, 2rem); }
.lp-fc__card .lp-fc__title { margin: 0 0 .5rem; color: #fff; font-weight: 300; letter-spacing: -.01em; line-height: 1.18; font-size: clamp(1.35rem, 2.4vw, 1.85rem); }
.lp-fc__card .lp-fc__meta { margin: 0 0 1rem; font-size: .82rem; letter-spacing: .02em; color: rgba(255, 255, 255, .74); max-width: none; }
.lp-fc__card .lp-fc__more { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.lp-fc__more .gs-icon { width: 16px; height: 16px; transition: transform .3s var(--ease-out); }
[dir="rtl"] .lp-fc__more .gs-icon { transform: scaleX(-1); }
@media (hover: hover) and (pointer: fine) {
  .lp-fc__card:hover .lp-fc__more .gs-icon { transform: translateX(4px); }
  [dir="rtl"] .lp-fc__card:hover .lp-fc__more .gs-icon { transform: scaleX(-1) translateX(4px); }
}
/* line-style dots */
.lp-fc__dots { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.lp-fc__dot { width: 22px; height: 3px; padding: 0; border: 0; border-radius: 2px; cursor: pointer; background: var(--line-2); transition: background-color .3s var(--ease), width .3s var(--ease-out); }
.lp-fc__dot.is-active { background: var(--gold); width: 36px; }
@media (hover: hover) and (pointer: fine) { .lp-fc__dot:hover { background: var(--gold-deep); } }
.lp-fc__dot:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .lp-fc__slide, .lp-fc__img, .lp-fc__slide.is-active .lp-fc__img { transition: none !important; }
}
/* tighter card type on small screens so the 2-up grid stays readable */
@media (max-width: 720px) {
  .gs-page--news .lp-mini__title, .gs-page--news .gs-news-card-title { font-size: .82rem; }
  .gs-page--news .lp-mini__title { padding: .7rem .7rem 0; }
  .gs-page--news .lp-mini__meta { padding: .25rem .7rem .75rem; }
  .gs-page--news .gs-news-card-body { padding: .7rem .75rem .8rem; }
}

/* ── Cards: calmer image, lighter chrome, refined type ── */
.gs-page--news .lp-mini,
.gs-page--news .gs-news-card { border-radius: 13px; box-shadow: none; border-color: var(--line);
  transition: transform 220ms var(--ease-out), border-color 220ms var(--ease), box-shadow 220ms var(--ease); }
.gs-page--news .lp-mini:hover,
.gs-page--news .gs-news-card:hover { transform: translateY(-3px); border-color: rgba(189,158,112,.4);
  box-shadow: 0 14px 30px -20px rgba(120,90,40,.34); }
.gs-page--news .lp-mini__cover,
.gs-page--news .gs-news-card-cover,
.gs-page--news .lp-recent-lux__card-cover { aspect-ratio: 3 / 2; }

/* unify news cover imagery: desaturate + soften + slight warm cast, so mixed-source
   photos sit quietly against the paper/gold palette */
.lp-hero__link img,
.lp-fc__img,
.lp-mini__cover img,
.lp-top7__hero img,
.lp-top7__row-thumb img,
.lp-recent-lux__lead-cover img,
.lp-recent-lux__card-cover img,
.lp-gossip__thumb img,
.lp-tri__thumb img,
.gs-news-card-cover img,
.gs-news-article-cover img,
.gs-keepreading__thumb img {
  filter: saturate(0.68) brightness(0.94) contrast(0.96) sepia(0.08);
}

/* category over image → a quiet bottom-left label over a soft gradient (no glass pill) */
.gs-page--news .lp-mini__cover::after,
.gs-page--news .lp-recent-lux__card-cover::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(14,10,6,.5), transparent 42%); }
.gs-page--news .lp-mini__cat {
  top: auto; bottom: 10px; left: 12px; right: auto;
  padding: 0; background: none !important; -webkit-backdrop-filter: none; backdrop-filter: none;
  font-size: .56rem; letter-spacing: .15em; color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,.45); }
[dir="rtl"] .gs-page--news .lp-mini__cat { left: auto; right: 12px; }

/* type + padding — smaller, editorial */
.gs-page--news .lp-mini__title { padding: .85rem .9rem 0; font-size: .9rem; line-height: 1.3; }
.gs-page--news .lp-mini__meta { padding: .3rem .9rem .95rem; font-size: .7rem; }
.gs-page--news .gs-news-card-body { padding: .85rem .95rem 1rem; gap: .5rem; }
.gs-page--news .gs-news-card-title { font-size: .9rem; -webkit-line-clamp: 2; line-height: 1.3; }
.gs-page--news .gs-news-card-meta { font-size: .7rem; }
.gs-page--news .gs-news-card-more { display: none; }          /* the whole card is the link */
.gs-page--news .lp-recent-lux__card-title { font-size: .9rem; }

/* ── Big editorial blocks (top7 hero, recent lead): tame the scale ── */
.gs-page--news .lp-top7__hero-cover { aspect-ratio: 16 / 10; }
.gs-page--news .lp-top7__hero-title { font-size: clamp(1.15rem, .9rem + 1vw, 1.55rem); }
.gs-page--news .lp-recent-lux__lead-cover { aspect-ratio: 16 / 9; }
.gs-page--news .lp-recent-lux__lead-title { font-size: clamp(1.2rem, .95rem + 1vw, 1.6rem); }

/* ── Category quick-filter chips (new, future-proof) ── */
.gs-news-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: -.2rem 0 1.2rem; }
.gs-news-chip { display: inline-flex; align-items: center; border: 1px solid var(--line); background: var(--paper);
  border-radius: 999px; padding: .42rem .95rem; font-size: .8rem; color: var(--ink-soft); text-decoration: none;
  transition: border-color 160ms var(--ease), background 160ms var(--ease), color 160ms var(--ease), transform 130ms var(--ease-out); }
.gs-news-chip:hover { border-color: var(--gold); color: var(--ink); }
.gs-news-chip.is-on { border-color: var(--gold); background: var(--gold-wash); color: var(--gold-deep); }
.gs-news-chip:active { transform: scale(.97); }

/* ── News article · "Keep reading" — compact thumbnail list (not bulky cards) ── */
.gs-keepreading__head { font-family: var(--font-display); font-weight: 400; font-size: 1.05rem;
  letter-spacing: .01em; color: var(--ink); margin: 0 0 .4rem; padding-bottom: .7rem;
  border-bottom: 1px solid var(--line); }
.gs-keepreading { list-style: none; margin: 0; padding: 0; }
.gs-keepreading__item + .gs-keepreading__item { border-top: 1px solid var(--line); }
.gs-keepreading__link { display: grid; grid-template-columns: 96px 1fr; gap: 1rem; align-items: center;
  padding: .95rem 0; color: inherit; text-decoration: none; transition: transform 160ms var(--ease-out); }
.gs-keepreading__thumb { aspect-ratio: 4 / 3; border-radius: 9px; overflow: hidden; background: var(--paper-sink); }
.gs-keepreading__thumb img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 500ms var(--ease-out); }
.gs-keepreading__body { min-width: 0; }
.gs-keepreading__cat { display: block; font-size: .6rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--gold-deep); margin-bottom: .25rem; }
.gs-keepreading__title { display: block; font-family: var(--font-display); font-weight: 400;
  font-size: .98rem; line-height: 1.3; color: var(--ink); letter-spacing: -.005em;
  transition: color 160ms var(--ease); }
.gs-keepreading__date { display: block; margin-top: .3rem; font-size: .74rem; color: var(--ink-muted); }
@media (hover: hover) and (pointer: fine) {
  .gs-keepreading__link:hover .gs-keepreading__thumb img { transform: scale(1.05); }
  .gs-keepreading__link:hover .gs-keepreading__title { color: var(--gold-deep); }
}
.gs-keepreading__link:active { transform: scale(.995); }
[dir="rtl"] .gs-keepreading__cat { letter-spacing: 0; }
@media (prefers-reduced-motion: reduce) {
  .gs-keepreading__link, .gs-keepreading__thumb img { transition: none !important; }
}

/* =========================================================================
   Service / industry pages (.gs-svc-*) — minimalist luxury, RTL-aware
   ========================================================================= */
.gs-svc .gs-section { padding-block: clamp(2rem, 5vw, 3.6rem); }
.gs-svc-intro { padding-top: clamp(1.4rem, 3vw, 2.2rem) !important; }

/* prose */
.gs-svc-prose { max-width: 68ch; }
.gs-svc-prose p { margin: 0 0 1.15em; color: var(--ink-soft); line-height: 1.78; font-weight: 300; font-size: 1.04rem; }
.gs-svc-prose p:last-child { margin-bottom: 0; }
.gs-svc-intro .gs-svc-prose p:first-child { color: var(--ink); font-size: clamp(1.1rem, 1.6vw, 1.22rem); line-height: 1.7; }

/* card grids (includes / related / industry services) */
.gs-svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(0.9rem, 1.8vw, 1.4rem); margin-top: clamp(1.4rem, 3vw, 2.2rem); }
.gs-svc-grid--compact { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 880px) { .gs-svc-grid, .gs-svc-grid--compact { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .gs-svc-grid, .gs-svc-grid--compact { grid-template-columns: 1fr; } }

.gs-svc-card { display: flex; flex-direction: column; gap: 0.5rem; padding: clamp(1.2rem, 2vw, 1.6rem); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); text-decoration: none; color: inherit; }
.gs-svc-card-ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--gold-wash, rgba(189,158,112,.1)); color: var(--gold-deep); margin-bottom: 0.35rem; }
.gs-svc-card-ico .gs-icon { width: 19px; height: 19px; }
.gs-svc-card h3 { margin: 0; font-size: 1.04rem; font-weight: 400; letter-spacing: -.01em; color: var(--ink); }
.gs-svc-card p { margin: 0; font-size: 0.9rem; line-height: 1.6; font-weight: 300; color: var(--ink-muted); }
.gs-svc-card-more { margin-top: auto; padding-top: 0.5rem; display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--gold-deep); }
.gs-svc-card-more .gs-icon { width: 15px; height: 15px; transition: transform .25s var(--ease-out); }
.gs-svc-card--link { transition: border-color .25s var(--ease), transform .25s var(--ease-out), box-shadow .25s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .gs-svc-card--link:hover { border-color: var(--gold); transform: translateY(-3px); box-shadow: 0 14px 34px rgba(34,29,23,.07); }
  .gs-svc-card--link:hover .gs-svc-card-more .gs-icon { transform: translateX(3px); }
}
[dir="rtl"] .gs-svc-card-more .gs-icon { transform: scaleX(-1); }
[dir="rtl"] .gs-svc-card--link:hover .gs-svc-card-more .gs-icon { transform: scaleX(-1) translateX(3px); }

/* split sections (why / outcomes) */
.gs-svc-split { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 760px) { .gs-svc-split { grid-template-columns: 1fr; gap: 1.4rem; } }
.gs-svc-split-head h2 { margin: 0.5rem 0 0; font-weight: 300; letter-spacing: -.01em; font-size: clamp(1.5rem, 3vw, 2rem); }
.gs-svc-why, .gs-svc-outcomes { background: var(--paper-sink, #faf8f3); }

/* outcomes list */
.gs-svc-outcomes-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
.gs-svc-outcomes-list li { display: flex; gap: 0.7rem; align-items: flex-start; color: var(--ink-soft); font-weight: 300; line-height: 1.6; }
.gs-svc-outcomes-list .gs-icon { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 3px; color: var(--gold-deep); }

/* process steps */
.gs-svc-steps { list-style: none; margin: clamp(1.4rem,3vw,2.2rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2.4vw, 2rem) clamp(1.6rem, 4vw, 3.5rem); }
@media (max-width: 700px) { .gs-svc-steps { grid-template-columns: 1fr; } }
.gs-svc-step { display: flex; gap: 1rem; align-items: flex-start; }
.gs-svc-step-n { flex: 0 0 auto; font-size: 0.86rem; font-weight: 400; letter-spacing: .06em; color: var(--gold-deep); padding-top: 0.35rem; border-top: 1px solid var(--gold); min-width: 2.4ch; }
.gs-svc-step h3 { margin: 0 0 0.3rem; font-size: 1.05rem; font-weight: 400; color: var(--ink); }
.gs-svc-step p { margin: 0; color: var(--ink-muted); font-weight: 300; line-height: 1.6; font-size: 0.94rem; }

/* who-it-is-for chips (services → industries) */
.gs-svc-who .gs-lede { max-width: 60ch; margin-top: 0.6rem; }
.gs-svc-chips { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: clamp(1.2rem, 2.5vw, 1.8rem); }
.gs-svc-chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.1rem; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink-soft); font-size: 0.9rem; text-decoration: none; transition: border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease); }
.gs-svc-chip .gs-icon { width: 16px; height: 16px; color: var(--gold-deep); }
@media (hover: hover) and (pointer: fine) { .gs-svc-chip:hover { border-color: var(--gold); color: var(--ink); background: var(--paper-sink, #faf8f3); } }

/* FAQ */
.gs-svc-faq-list { margin-top: clamp(1.4rem,3vw,2.2rem); border-top: 1px solid var(--line); }
.gs-svc-faq-item { border-bottom: 1px solid var(--line); }
.gs-svc-faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 0.2rem; font-size: 1.04rem; font-weight: 400; color: var(--ink); }
.gs-svc-faq-item summary::-webkit-details-marker { display: none; }
.gs-svc-faq-item summary .gs-icon { flex: 0 0 auto; width: 18px; height: 18px; color: var(--gold-deep); transition: transform .25s var(--ease-out); }
.gs-svc-faq-item[open] summary .gs-icon { transform: rotate(180deg); }
.gs-svc-faq-a { padding: 0 0.2rem 1.25rem; }
.gs-svc-faq-a p { margin: 0; max-width: 72ch; color: var(--ink-soft); font-weight: 300; line-height: 1.75; }

/* CTA band */
.gs-svc-cta-band { display: flex; align-items: center; justify-content: space-between; gap: clamp(1.2rem, 3vw, 2.5rem); flex-wrap: wrap; padding: clamp(1.8rem, 4vw, 3rem); border: 1px solid var(--gold); border-radius: var(--r-lg); background: var(--gold-wash, rgba(189,158,112,.07)); }
.gs-svc-cta-band h2 { margin: 0 0 0.5rem; font-weight: 300; letter-spacing: -.01em; font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.gs-svc-cta-band p { margin: 0; max-width: 52ch; color: var(--ink-soft); font-weight: 300; line-height: 1.6; }
.gs-svc-cta-band .gs-btn { flex: 0 0 auto; }
@media (max-width: 620px) { .gs-svc-cta-band { flex-direction: column; align-items: flex-start; } .gs-svc-cta-band .gs-btn { width: 100%; justify-content: center; } }

/* =========================================================================
   Careers / Job portal — auth, account, landing (.gs-auth-*, .gs-careers-*)
   ========================================================================= */
.gs-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; opacity: 0; }

.gs-auth-section { padding-block: clamp(2rem, 5vw, 3.6rem); }
.gs-auth-card {
  max-width: 460px; margin-inline: auto;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(1.6rem, 3vw, 2.4rem); text-align: center;
}
.gs-auth-card .gs-eyebrow { justify-content: center; display: inline-flex; }
.gs-auth-title { margin: 0.6rem 0 0.4rem; font-weight: 300; letter-spacing: -.01em; font-size: clamp(1.5rem, 3vw, 2rem); }
.gs-auth-sub { margin: 0 0 1.4rem; color: var(--ink-soft); font-weight: 300; line-height: 1.6; }
.gs-auth-error {
  margin: 0 0 1rem; padding: .7rem .9rem; border-radius: var(--r-md, 10px);
  border: 1px solid var(--fall, #ec968b); background: rgba(236, 150, 139, .08);
  color: #9a3b30; font-size: .9rem; text-align: start;
}

/* social sign-in row */
.gs-auth-social { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.gs-auth-social-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .7rem .6rem; border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--paper); color: var(--ink); font: inherit; font-size: .86rem; cursor: pointer; text-decoration: none;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.gs-auth-social-btn .gs-auth-social-ico { display: inline-flex; }
@media (hover: hover) { .gs-auth-social-btn:not(.is-soon):hover { border-color: var(--gold); background: var(--paper-sink, #faf8f3); } }
.gs-auth-social-btn.is-soon { opacity: .5; cursor: not-allowed; }
.gs-auth-social-btn span:last-child { font-weight: 400; }
@media (max-width: 380px) { .gs-auth-social-btn span:last-child { display: none; } }
.gs-auth-social-note { margin: .7rem 0 0; font-size: .78rem; color: var(--ink-muted); }
.gs-auth-divider { display: flex; align-items: center; gap: .8rem; margin: 1.2rem 0; color: var(--ink-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; }
.gs-auth-divider::before, .gs-auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* forms */
.gs-auth-form { text-align: start; }
.gs-auth-form .gs-fieldset { margin-bottom: 1rem; }
.gs-auth-hint { display: block; margin-top: .35rem; font-size: .78rem; color: var(--ink-muted); }
.gs-auth-form .gs-btn { width: 100%; justify-content: center; margin-top: .4rem; }

/* role chooser */
.gs-auth-roles { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: 1.1rem; }
.gs-auth-role { position: relative; cursor: pointer; }
.gs-auth-role input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.gs-auth-role-box {
  display: flex; flex-direction: column; gap: .15rem; padding: .85rem .9rem;
  border: 1px solid var(--line-2); border-radius: var(--r-md, 12px); transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.gs-auth-role-box strong { font-weight: 400; font-size: .95rem; color: var(--ink); }
.gs-auth-role-box small { font-size: .76rem; color: var(--ink-muted); line-height: 1.35; }
.gs-auth-role input:checked + .gs-auth-role-box { border-color: var(--gold); background: var(--gold-wash, rgba(189,158,112,.07)); }
.gs-auth-role input:focus-visible + .gs-auth-role-box { outline: 2px solid var(--gold-deep); outline-offset: 2px; }

/* consent + alt link */
.gs-auth-consent { display: flex; gap: .55rem; align-items: flex-start; margin: .2rem 0 1.1rem; font-size: .84rem; color: var(--ink-soft); line-height: 1.45; text-align: start; }
.gs-auth-consent input { margin-top: .2rem; flex: 0 0 auto; accent-color: var(--gold-deep); }
.gs-auth-consent a { color: var(--gold-deep); }
.gs-auth-alt { margin: 1.2rem 0 0; font-size: .9rem; color: var(--ink-soft); }
.gs-auth-alt a { color: var(--gold-deep); }

/* landing + account */
.gs-careers-hero { text-align: center; max-width: 640px; margin-inline: auto; padding: clamp(1.6rem,3vw,2.4rem); border: 1px solid var(--gold); border-radius: var(--r-lg); background: var(--gold-wash, rgba(189,158,112,.07)); }
.gs-careers-hero h2 { margin: 0 0 .5rem; font-weight: 300; letter-spacing: -.01em; font-size: clamp(1.4rem,2.6vw,1.9rem); }
.gs-careers-hero p { margin: 0 0 1.3rem; color: var(--ink-soft); font-weight: 300; }
.gs-careers-hero .gs-btn-row { justify-content: center; }
.gs-account-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.gs-account-role { display: inline-block; padding: .12rem .6rem; border: 1px solid var(--line-2); border-radius: 999px; font-size: .78rem; color: var(--gold-deep); }

/* ── Careers — candidate profile builder ──────────────────────────────────── */
.gs-auth-success { margin: 0 0 1rem; padding: .7rem .9rem; border-radius: var(--r-md, 10px); border: 1px solid var(--gold); background: var(--gold-wash, rgba(189,158,112,.1)); color: var(--gold-deep); font-size: .9rem; text-align: start; }
.gs-profile { max-width: 960px; margin-inline: auto; }
.gs-profile-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.gs-profile-head .gs-eyebrow { display: inline-flex; }
.gs-profile-progress { position: relative; height: 8px; border-radius: 999px; background: var(--line); margin: 1rem 0 1.4rem; overflow: hidden; }
.gs-profile-progress-bar { position: absolute; inset-block: 0; inset-inline-start: 0; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); border-radius: 999px; transition: width .5s var(--ease-out); }
.gs-profile-progress-label { position: absolute; inset-inline-end: 0; inset-block-start: -1.5rem; font-size: .76rem; color: var(--ink-muted); letter-spacing: .04em; }

.gs-profile-grid { display: grid; grid-template-columns: 1fr 320px; gap: clamp(1.4rem, 3vw, 2.6rem); align-items: start; }
@media (max-width: 820px) { .gs-profile-grid { grid-template-columns: 1fr; } }
.gs-profile-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 480px) { .gs-profile-row { grid-template-columns: 1fr; } }
.gs-profile-form textarea.gs-field { resize: vertical; min-height: 96px; font: inherit; }
.gs-file { padding: .6rem .7rem; }
.gs-profile-cv .gs-cv-current { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .6rem .85rem; margin-bottom: .6rem; border: 1px solid var(--line); border-radius: var(--r-md, 10px); background: var(--paper-sink, #faf8f3); }
.gs-cv-file { display: inline-flex; align-items: center; gap: .45rem; font-size: .88rem; color: var(--ink); }
.gs-cv-file .gs-icon { width: 16px; height: 16px; color: var(--gold-deep); }
.gs-cv-link { font-size: .82rem; color: var(--gold-deep); text-decoration: underline; }
.gs-profile-visible { margin-top: .4rem; }
.gs-profile-visible strong { font-weight: 400; color: var(--ink); }
.gs-profile-form .gs-btn { width: 100%; justify-content: center; margin-top: .6rem; }

/* side preview (how employers see you) */
.gs-profile-side { position: sticky; top: 90px; }
.gs-profile-side-title { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-muted); margin: 0 0 .7rem; font-weight: 400; }
.gs-profile-side-note { margin: .8rem 0 0; font-size: .8rem; color: var(--ink-muted); line-height: 1.5; }
.gs-cand-card { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.2rem; background: var(--paper); }
.gs-cand-card-top { display: flex; align-items: center; gap: .8rem; margin-bottom: .9rem; }
.gs-cand-avatar { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--gold-wash, rgba(189,158,112,.12)); color: var(--gold-deep); font-weight: 400; font-size: 1.1rem; }
.gs-cand-name { margin: 0; font-size: 1.02rem; font-weight: 400; color: var(--ink); }
.gs-cand-headline { margin: .1rem 0 0; font-size: .85rem; color: var(--ink-muted); line-height: 1.35; }
.gs-cand-meta { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.gs-cand-meta li { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--ink-soft); }
.gs-cand-meta .gs-icon { width: 15px; height: 15px; color: var(--gold-deep); flex: 0 0 auto; }
.gs-cand-skills { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem; }
.gs-cand-skill { font-size: .74rem; padding: .22rem .6rem; border-radius: 999px; background: var(--paper-sink, #f3efe7); color: var(--ink-soft); border: 1px solid var(--line); }

/* ============================================================
   Jeweller reviews — sign-in gated, auto-published.
   ============================================================ */
.gs-reviews-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.gs-reviews-score{display:inline-flex;align-items:center;gap:.5rem;}
.gs-reviews-score strong{font-size:1.5rem;color:var(--ink);font-weight:400;font-family:var(--font-display);}
.gs-reviews-score .gs-starline .on{color:var(--gold);}
.gs-reviews-count{color:var(--ink-muted);font-size:.85rem;}
.gs-reviews-google{display:inline-flex;align-items:center;gap:.45rem;color:var(--ink-muted);font-size:.84rem;margin:.4rem 0 0;}
.gs-reviews-google .gs-icon{width:15px;height:15px;color:var(--gold);}
.gs-reviews-flash{display:flex;align-items:center;gap:.5rem;border-radius:var(--r-md);padding:.7rem .9rem;font-size:.9rem;margin:1rem 0 0;}
.gs-reviews-flash.is-ok{background:rgba(63,143,79,.10);color:var(--rise);}
.gs-reviews-flash.is-err{background:rgba(187,90,72,.10);color:var(--fall);}

.gs-review-form{margin:1.2rem 0 0;padding:1.1rem 1.2rem;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--paper);box-shadow:var(--elev-1);display:flex;flex-direction:column;gap:.7rem;}
.gs-review-form-head{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;}
.gs-review-form-head strong{font-weight:400;font-family:var(--font-display);color:var(--ink);font-size:1.05rem;}
.gs-review-as{color:var(--ink-muted);font-size:.8rem;}
.gs-review-form .gs-field{width:100%;}

/* star picker */
.gs-star-pick{display:inline-flex;flex-direction:row-reverse;justify-content:flex-end;gap:.15rem;}
.gs-star-pick input{position:absolute;width:1px;height:1px;opacity:0;}
.gs-star-pick label{cursor:pointer;color:var(--ink-faint);line-height:0;transition:color .12s var(--ease);}
.gs-star-pick label .gs-icon{width:26px;height:26px;}
.gs-star-pick label:hover,.gs-star-pick label:hover ~ label,
.gs-star-pick input:checked ~ label{color:var(--gold);}
.gs-star-pick input:focus-visible + label{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px;}

.gs-review-cta{margin:1.2rem 0 0;padding:1rem 1.2rem;border:1px dashed var(--line-2);border-radius:var(--r-lg);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:var(--ink-soft);font-size:.92rem;}

.gs-review-list{list-style:none;margin:1.4rem 0 0;padding:0;display:flex;flex-direction:column;gap:1.1rem;}
.gs-review{border-top:1px solid var(--line);padding-top:1.1rem;}
.gs-review-top{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.3rem;}
.gs-review-author{color:var(--ink);font-weight:400;}
.gs-review-badge{display:inline-flex;align-items:center;gap:.25rem;font-size:.7rem;color:var(--gold-deep);
  background:var(--gold-tint);border-radius:var(--r-pill);padding:.12rem .5rem;}
.gs-review-badge .gs-icon{width:12px;height:12px;}
.gs-review-date{margin-inline-start:auto;color:var(--ink-muted);font-size:.78rem;}
.gs-review .gs-starline{margin:.15rem 0;} .gs-review .gs-starline .on{color:var(--gold);}
.gs-review-title{font-size:1rem;font-weight:400;color:var(--ink);margin:.3rem 0 .2rem;font-family:var(--font-display);}
.gs-review-body{color:var(--ink-soft);font-size:.92rem;margin:0;line-height:1.6;}
.gs-review-reply{margin:.7rem 0 0;padding:.7rem .85rem;border-radius:12px;background:var(--gold-tint);
  border-inline-start:2px solid var(--gold);}
.gs-review-reply-by{display:inline-flex;align-items:center;gap:.35rem;font-size:.74rem;font-weight:500;
  letter-spacing:.02em;color:var(--gold-deep);}
.gs-review-reply-by .gs-icon{width:13px;height:13px;}
.gs-review-reply-body{color:var(--ink-soft);font-size:.88rem;margin:.35rem 0 0;line-height:1.55;}
.gs-review-empty{color:var(--ink-muted);font-size:.9rem;margin:1.2rem 0 0;}

/* ── Careers: job portal ───────────────────────────────────────────────── */
.gs-jobs-filters{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-bottom:1rem;}
.gs-jobs-filters .gs-field{flex:1 1 160px;min-width:0;height:44px;}
.gs-jobs-filters .gs-btn{flex:0 0 auto;}
.gs-jobs-count{color:var(--ink-muted);font-size:.85rem;margin:0 0 1.2rem;}
.gs-jobs-empty{border:1px solid var(--line);border-radius:var(--r-lg);padding:2rem;text-align:center;color:var(--ink-muted);}
.gs-jobs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;}
.gs-job-card{display:flex;flex-direction:column;gap:.7rem;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:1.3rem 1.35rem;text-decoration:none;box-shadow:var(--elev-1);
  transition:transform .2s var(--ease-out),border-color .2s var(--ease-out),box-shadow .2s var(--ease-out);}
.gs-job-card:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:var(--elev-2);}
.gs-job-card-top{display:flex;gap:.75rem;align-items:center;}
.gs-job-card-logo{width:44px;height:44px;border-radius:12px;object-fit:cover;flex:0 0 auto;background:var(--surface-2);}
.gs-job-card-logo--ph{display:grid;place-items:center;color:var(--gold-deep);}
.gs-job-card-logo--ph .gs-icon{width:20px;height:20px;}
.gs-job-card-title{font-family:var(--font-display);font-weight:400;font-size:1.08rem;color:var(--ink);margin:0;line-height:1.25;}
.gs-job-card-biz{color:var(--ink-muted);font-size:.84rem;margin:.1rem 0 0;}
.gs-job-card-meta{display:flex;flex-wrap:wrap;gap:.4rem;}
.gs-job-chip{display:inline-flex;align-items:center;gap:.25rem;font-size:.72rem;color:var(--ink-soft);
  background:var(--surface-2);border-radius:999px;padding:.28em .7em;}
.gs-job-chip .gs-icon{width:12px;height:12px;}
.gs-job-chip--closed{background:rgba(187,90,72,.12);color:var(--fall);}
.gs-job-card-salary{font-size:.92rem;color:var(--ink);margin:0;}
.gs-job-card-salary span,.gs-job-salary span{color:var(--ink-muted);font-size:.8rem;}
.gs-job-card-cta{margin-top:auto;color:var(--gold-deep);font-size:.86rem;font-weight:400;display:inline-flex;align-items:center;gap:.35rem;}
.gs-job-card-cta .gs-icon{width:15px;height:15px;}

.gs-job-detail{display:grid;grid-template-columns:1fr 320px;gap:2rem;align-items:start;}
.gs-job-back{display:inline-flex;align-items:center;gap:.35rem;color:var(--ink-muted);font-size:.85rem;text-decoration:none;margin-bottom:1rem;}
.gs-job-back:hover{color:var(--gold-deep);}
.gs-job-head{display:flex;gap:1rem;align-items:center;}
.gs-job-head-logo{width:60px;height:60px;border-radius:14px;object-fit:cover;background:var(--surface-2);}
.gs-job-h1{font-family:var(--font-display);font-weight:400;font-size:clamp(1.5rem,3vw,2rem);margin:0;line-height:1.15;color:var(--ink);}
.gs-job-biz{margin:.25rem 0 0;color:var(--ink-soft);}
.gs-job-biz a{color:var(--gold-deep);}
.gs-job-salary{display:inline-flex;align-items:center;gap:.4rem;color:var(--ink);font-size:1rem;margin:0 0 1.4rem;}
.gs-job-salary .gs-icon{width:16px;height:16px;color:var(--gold-deep);}
.gs-job-section{margin-top:1.6rem;}
.gs-job-section h2{font-family:var(--font-display);font-weight:400;font-size:1.2rem;margin:0 0 .6rem;color:var(--ink);}
.gs-job-prose{color:var(--ink-soft);line-height:1.7;font-size:.95rem;}
.gs-job-aside{position:sticky;top:96px;}
.gs-job-apply{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.4rem;box-shadow:var(--elev-1);}
.gs-job-apply h3{font-family:var(--font-display);font-weight:400;font-size:1.15rem;margin:0 0 .5rem;color:var(--ink);}
.gs-job-apply-note{color:var(--ink-muted);font-size:.88rem;margin:0 0 1rem;line-height:1.5;}
.gs-job-apply .gs-btn{width:100%;margin-top:.5rem;}
.gs-job-applied{display:flex;align-items:center;gap:.5rem;color:var(--rise);font-weight:400;margin:0 0 1rem;}
.gs-job-applied .gs-icon{width:18px;height:18px;}

.gs-emp-jobs{display:flex;flex-direction:column;gap:.7rem;}
.gs-emp-job{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:space-between;align-items:center;
  background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:1rem 1.2rem;}
.gs-emp-job-main h3{font-size:1.02rem;font-weight:400;margin:0;color:var(--ink);}
.gs-emp-job-main h3 a{color:var(--ink);text-decoration:none;}
.gs-emp-job-main h3 a:hover{color:var(--gold-deep);}
.gs-emp-job-meta{color:var(--ink-muted);font-size:.8rem;margin:.2rem 0 0;}
.gs-emp-job-actions{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;}
.gs-job-status{font-size:.72rem;border-radius:999px;padding:.25em .7em;text-transform:capitalize;}
.gs-job-status--open{background:rgba(63,143,79,.12);color:var(--rise);}
.gs-job-status--draft,.gs-job-status--submitted{background:var(--surface-2);color:var(--ink-soft);}
.gs-job-status--closed,.gs-job-status--rejected{background:rgba(187,90,72,.12);color:var(--fall);}
.gs-job-status--shortlisted,.gs-job-status--reviewed{background:var(--gold-tint);color:var(--gold-deep);}
.gs-job-status--hired{background:rgba(63,143,79,.16);color:var(--rise);}
.gs-emp-apps{border:1px solid var(--line);border-top:0;border-radius:0 0 14px 14px;margin-top:-.7rem;padding:1rem 1.2rem 1.2rem;background:var(--surface-2);}
.gs-emp-apps h4{font-size:.9rem;font-weight:400;margin:0 0 .8rem;color:var(--ink);}
.gs-emp-app{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:space-between;align-items:flex-start;
  background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:.9rem 1rem;margin-bottom:.6rem;}
.gs-emp-app strong{color:var(--ink);font-weight:400;}
.gs-emp-app-head{color:var(--ink-soft);font-size:.85rem;margin-inline-start:.5rem;}
.gs-emp-app-meta{color:var(--ink-muted);font-size:.78rem;margin-top:.2rem;}
.gs-emp-app-note{color:var(--ink-soft);font-size:.85rem;margin:.5rem 0 0;line-height:1.5;}
.gs-emp-app-actions{display:flex;gap:.5rem;align-items:center;flex:0 0 auto;}
.gs-emp-app-status .gs-field{height:34px;padding:0 .6rem;font-size:.82rem;}
@media (max-width:820px){
  .gs-job-detail{grid-template-columns:1fr;}
  .gs-job-aside{position:static;}
}
html[dir="rtl"] .gs-review-date{margin-inline-start:auto;}
/* Careers directional icons point the wrong way in Arabic. The global mirror
   at ~line 1013 keys on .gs-arrow, which these inline CTAs don't carry, so
   mirror them explicitly. */
[dir="rtl"] .gs-job-card-cta .gs-icon,
[dir="rtl"] .gs-job-back .gs-icon { transform: scaleX(-1); }

/* ============================================================
   Jeweller vendor profile — modern minimal (.gs-vp-*)   [2026 redesign]
   ============================================================ */
.gs-vp { display: block; }
.gs-vp-top { display: block; height: 1px; }

/* ── Hero ─────────────────────────────────────────────────── */
.gs-vp-hero {
  position: relative;
  padding-block: clamp(0.9rem, 2vw, 1.4rem) clamp(1.6rem, 3.4vw, 2.4rem);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(189, 158, 112, 0.16), transparent 55%),
    radial-gradient(120% 120% at 100% 0%, rgba(189, 158, 112, 0.10), transparent 50%),
    linear-gradient(180deg, var(--surface-2), var(--canvas) 88%);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.gs-vp-hero-inner { position: relative; }

/* Cover: a separate rounded rectangle ABOVE the breadcrumbs, never behind the
   name. The frame uses the header's own gutters (base here; the tablet and
   ≥1024px widths are added to the header's rules so they can never drift). */
.gs-vp-coverframe { margin-bottom: clamp(1.1rem, 2.6vw, 1.6rem); }
.gs-vp-cover {
  position: relative;
  aspect-ratio: 4 / 1;
  max-height: 340px;
  width: 100%;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  box-shadow: var(--elev-1);
  overflow: hidden;
  background: var(--paper);
}
.gs-vp-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Placeholder until the shared cover is uploaded (Admin > Settings > Branding >
   Directory cover image): soft gold wash + a faint Gold Souq watermark, so it
   reads as intentional rather than a broken image. */
.gs-vp-cover.is-empty {
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(189, 158, 112, 0.22), transparent 55%),
    radial-gradient(120% 140% at 100% 100%, rgba(189, 158, 112, 0.14), transparent 55%),
    linear-gradient(135deg, var(--surface-2), var(--paper));
}
.gs-vp-cover.is-empty::after {
  content: ""; position: absolute; inset: 0;
  background: url("/app/img/goldsouklogo.svg") center / auto 46% no-repeat;
  opacity: 0.16;
  filter: grayscale(0.2);
}
@media (max-width: 640px) {
  .gs-vp-cover { aspect-ratio: 5 / 2; }
  .gs-vp-cover.is-empty::after { background-size: auto 40%; }
}
.gs-vp-crumb { margin-bottom: clamp(1rem, 2.4vw, 1.5rem); font-size: 0.75rem; }

.gs-vp-headrow {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: end;
  gap: clamp(1rem, 2.4vw, 1.5rem);
}
.gs-vp-avatar {
  position: relative; flex: none;
  width: clamp(78px, 9vw, 104px);
  height: clamp(78px, 9vw, 104px);
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px -22px rgba(20, 18, 15, 0.45), 0 2px 6px rgba(20, 18, 15, 0.05);
  display: flex; align-items: center; justify-content: center;
  overflow: visible;
}
/* Logos are often wordmarks, so 'contain' (with a little breathing room) shows
   the whole mark inside the circle rather than cropping it like 'cover' would. */
.gs-vp-avatar img { width: 100%; height: 100%; object-fit: contain; padding: 10px; border-radius: 50%; }
.gs-vp-mono {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  border-radius: inherit;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 400; color: var(--gold);
  background: linear-gradient(150deg, var(--gold-tint), rgba(189, 158, 112, 0.04));
}
.gs-vp-avatar .gs-verified-badge {
  /* Circle avatar: the badge sits on the ~4-5 o'clock arc, not the old square
     corner, so it hugs the rounded edge instead of floating past it. */
  position: absolute; right: 2px; bottom: 2px;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--canvas), 0 3px 8px rgba(20, 18, 15, 0.18);
}
.gs-vp-avatar .gs-verified-badge svg { width: 100%; height: 100%; display: block; }

.gs-vp-headmain { min-width: 0; padding-bottom: 0.25rem; }
.gs-vp-headmain h1 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  font-weight: 400; line-height: 1.12; letter-spacing: -0.015em;
  margin: 0 0 0.65rem;
}
.gs-vp-subline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.7rem; }
.gs-vp-rating { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.gs-vp-rating strong { font-family: var(--font-display); font-weight: 400; color: var(--ink); }
.gs-vp-rating-n { color: var(--ink-muted); }
.gs-vp-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--line-2); }
.gs-vp-chips { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; }

.gs-vp-actions { display: flex; gap: 0.5rem; align-self: end; padding-bottom: 0.25rem; }
.gs-vp-actions .gs-btn { transition: transform 130ms var(--ease-out), background-color 200ms var(--ease-out), border-color 200ms var(--ease-out), box-shadow 220ms var(--ease-out); }
.gs-vp-actions .gs-btn:active, .gs-vp-card-cta .gs-btn:active { transform: scale(0.97); }

/* ── Slim sticky bar ──────────────────────────────────────── */
.gs-vp-bar {
  position: fixed; left: 0; right: 0; top: var(--vp-bar-top, 64px);
  z-index: 40;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--line);
  transform: translateY(-12px); opacity: 0; pointer-events: none;
  transition: opacity 0.26s var(--ease-out), transform 0.26s var(--ease-out);
}
.gs-vp-bar.is-on { transform: none; opacity: 1; pointer-events: auto; }
.gs-vp-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.55rem; }
.gs-vp-bar-id { display: inline-flex; align-items: center; gap: 0.6rem; min-width: 0; }
.gs-vp-bar-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--gold-tint); color: var(--gold);
  font-family: var(--font-display); font-size: 0.85rem;
  border: 1px solid var(--line);
}
.gs-vp-bar-avatar img { width: 100%; height: 100%; object-fit: cover; }
.gs-vp-bar-name { font-weight: 400; font-size: 0.95rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-vp-bar-rating { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.82rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; flex: none; }
.gs-vp-bar-rating .gs-icon { width: 13px; height: 13px; color: var(--gold); fill: var(--gold); }
.gs-vp-bar-actions { display: flex; gap: 0.4rem; flex: none; }
@media (max-width: 560px) { .gs-vp-bar-dirtxt { display: none; } }

/* ── Body grid + trust strip ──────────────────────────────── */
.gs-vp-body {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(1.8rem, 3.6vw, 3rem);
  padding-block: clamp(1.6rem, 3.4vw, 2.6rem) clamp(2.4rem, 5vw, 4rem);
}
.gs-vp-trust {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  padding-top: clamp(1.2rem, 2.6vw, 1.8rem);
}
.gs-vp-trust-item {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--paper); box-shadow: var(--elev-1);
  font-size: 0.82rem; color: var(--ink);
}
.gs-vp-trust-item .gs-icon { width: 16px; height: 16px; color: var(--gold-deep); flex: none; }
.gs-vp-trust-item > span { display: flex; flex-direction: column; line-height: 1.25; }
.gs-vp-trust-k { font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }

/* ── Sections ─────────────────────────────────────────────── */
.gs-vp-sec + .gs-vp-sec { margin-top: clamp(2rem, 4vw, 3rem); }
.gs-vp-h {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  font-weight: 400; letter-spacing: -0.01em; color: var(--ink);
  margin: 0 0 1rem;
}
.gs-vp-sechead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.gs-vp-sechead .gs-vp-h { margin: 0; }
.gs-vp-prose { color: var(--ink-soft); line-height: 1.75; font-size: 0.95rem; max-width: 62ch; }
.gs-vp-seelink { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; color: var(--gold-deep); }
.gs-vp-seelink .gs-icon { width: 14px; height: 14px; transition: transform 0.2s var(--ease-out); }
.gs-vp-seelink:hover .gs-icon { transform: translateX(3px); }

/* status badge */
.gs-vp-status { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; padding: 0.3rem 0.7rem; border-radius: var(--r-pill); border: 1px solid var(--line); }
.gs-vp-status-dot { width: 7px; height: 7px; border-radius: 50%; }
.gs-vp-status.is-open { color: var(--rise); border-color: rgba(63, 143, 79, 0.35); background: rgba(63, 143, 79, 0.07); }
.gs-vp-status.is-open .gs-vp-status-dot { background: var(--rise); box-shadow: 0 0 0 3px rgba(63, 143, 79, 0.18); }
.gs-vp-status.is-closed { color: var(--ink-muted); background: var(--surface-2); }
.gs-vp-status.is-closed .gs-vp-status-dot { background: var(--ink-faint); }

/* hours */
.gs-vp-hours { display: flex; flex-direction: column; max-width: 440px; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--paper); }
.gs-vp-hours li { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 0.95rem; font-size: 0.86rem; border-bottom: 1px solid var(--line); }
.gs-vp-hours li:last-child { border-bottom: 0; }
.gs-vp-hours-day { color: var(--ink-soft); }
.gs-vp-hours-time { color: var(--ink); font-variant-numeric: tabular-nums; }
.gs-vp-hours-closed { color: var(--ink-faint); }
.gs-vp-hours li.is-today { background: var(--gold-tint); }
.gs-vp-hours li.is-today .gs-vp-hours-day { color: var(--gold-deep); }

/* products */
.gs-vp-products { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 0.9rem; overflow-x: auto; padding-bottom: 0.4rem; scroll-snap-type: x proximity; }
@media (min-width: 700px) { .gs-vp-products { grid-template-columns: repeat(4, 1fr); grid-auto-flow: row; overflow: visible; } }
.gs-vp-prod { display: flex; flex-direction: column; gap: 0.5rem; scroll-snap-align: start; }
.gs-vp-prod-img { aspect-ratio: 1 / 1; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface-2) center / cover no-repeat; display: flex; align-items: center; justify-content: center; transition: box-shadow 0.22s var(--ease-out), transform 0.22s var(--ease-out); }
.gs-vp-prod-img.is-blank .gs-icon { width: 30px; height: 30px; color: var(--ink-faint); }
.gs-vp-prod:hover .gs-vp-prod-img { box-shadow: var(--elev-2); transform: translateY(-2px); }
.gs-vp-prod-name { font-size: 0.86rem; color: var(--ink); line-height: 1.3; }
.gs-vp-prod-price { font-size: 0.8rem; color: var(--gold-deep); font-variant-numeric: tabular-nums; }

/* location/map */
.gs-vp-address { display: inline-flex; align-items: center; gap: 0.5em; color: var(--ink-soft); margin: 0 0 0.9rem; font-size: 0.88rem; }
.gs-vp-address .gs-icon { color: var(--gold-deep); width: 15px; height: 15px; flex: none; }
.gs-vp-map { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; height: 340px; background: var(--paper); box-shadow: var(--elev-1); }
.gs-vp-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.gs-vp-map-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; }

/* ── Aside (contact + enquiry) ────────────────────────────── */
.gs-vp-aside { display: flex; flex-direction: column; gap: 1rem; align-content: start; }
@media (min-width: 981px) { .gs-vp-aside { position: sticky; top: calc(var(--vp-bar-top, 72px) + 1rem); align-self: start; } }
.gs-vp-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.3rem 1.3rem 1.2rem; box-shadow: var(--elev-1); }
.gs-vp-cardh { font-family: var(--font-display); font-size: 1.05rem; font-weight: 400; color: var(--ink); margin: 0 0 1rem; }
.gs-vp-card-cta { display: flex; gap: 0.5rem; margin-top: 1rem; }
.gs-vp-card-cta .gs-btn { flex: 1; justify-content: center; }
.gs-vp-verify { display: flex; align-items: center; gap: 0.5em; margin: 0.9rem 0 0; font-size: 0.76rem; color: var(--ink-muted); }
.gs-vp-verify .gs-icon { width: 14px; height: 14px; color: var(--gold-deep); flex: none; }
.gs-vp-enq-lead { font-size: 0.84rem; color: var(--ink-soft); line-height: 1.6; margin: 0 0 0.9rem; }
.gs-vp-enq { display: flex; flex-direction: column; gap: 0.6rem; }
.gs-vp-enq .gs-btn { margin-top: 0.2rem; justify-content: center; }
.gs-vp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.gs-vp-flash { display: flex; align-items: center; gap: 0.5em; font-size: 0.84rem; padding: 0.6rem 0.8rem; border-radius: var(--r-md); margin: 0 0 0.9rem; }
.gs-vp-flash.is-ok { color: var(--rise); background: rgba(63, 143, 79, 0.08); }
.gs-vp-flash.is-ok .gs-icon { width: 15px; height: 15px; flex: none; }
.gs-vp-flash.is-err { color: var(--fall); background: rgba(187, 90, 72, 0.08); }
.gs-vp-back { display: inline-flex; align-items: center; gap: 0.5em; font-size: 0.84rem; color: var(--ink-soft); padding: 0.4rem 0; }
.gs-vp-back .gs-icon { width: 15px; height: 15px; transition: transform 0.2s var(--ease-out); }
.gs-vp-back:hover .gs-icon { transform: translateX(3px); }

/* reviews block sits inside .gs-vp-sec — normalise its heading to the new scale */
.gs-vp-sec.gs-reviews .gs-reviews-head h2 {
  font-family: var(--font-display); font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  font-weight: 400; letter-spacing: -0.01em; color: var(--ink); text-transform: none;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 980px) {
  .gs-vp-body { grid-template-columns: 1fr; }
  .gs-vp-headrow { grid-template-columns: auto 1fr; }
  .gs-vp-actions { grid-column: 1 / -1; margin-top: 0.4rem; }
}
@media (max-width: 560px) {
  .gs-vp-headrow { grid-template-columns: auto 1fr; gap: 0.9rem; }
  .gs-vp-actions { flex-wrap: wrap; }
  .gs-vp-actions .gs-btn { flex: 1; justify-content: center; }
}

/* ── RTL ──────────────────────────────────────────────────── */
[dir="rtl"] .gs-vp-avatar .gs-verified-badge { right: auto; left: 2px; }
[dir="rtl"] .gs-vp-seelink:hover .gs-icon,
[dir="rtl"] .gs-vp-back:hover .gs-icon { transform: translateX(-3px); }

@media (prefers-reduced-motion: reduce) {
  .gs-vp-bar { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   GEM STUDIO — immersive hero (.gs-gemx). Background reproduces the MDX
   reference stack as-is (#c1c5c9 base + hero-layer.avif + centre-ellipse
   AVIF in overlay blend + white bottom fade). Entrance = Cartier-style
   staggered gem rain; each stone is a live lock-mode viewer iframe.
   ═══════════════════════════════════════════════════════════════════ */

.gs-gemx {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 620px;
  padding: 8rem 5rem 4.5rem;
  background-color: #c1c5c9;              /* MDX hero base */
  overflow: hidden;
}

/* ── MDX background stack ─────────────────────────────────── */
.gs-gemx__layer {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none; user-select: none;
}
.gs-gemx__layer img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.gs-gemx__ellipse {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 80vmin; height: 80vmin;
  z-index: 1;
  mix-blend-mode: overlay;
  pointer-events: none; user-select: none;
  will-change: transform;
}
.gs-gemx__ellipse img { width: 100%; height: 100%; object-fit: contain; display: block; }
.gs-gemx__whitefade {
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 100%; height: 20rem;
  background: #fff;
  mask: linear-gradient(transparent 40%, black);
  -webkit-mask: linear-gradient(transparent 40%, black);
  z-index: 1;
}

/* ── gem rain stage ───────────────────────────────────────── */
.gs-gemx__stage {
  position: absolute;
  inset: 9% 6% 30%;
  z-index: 2;
  transform: translate(var(--px, 0), var(--py, 0));
  transition: transform 600ms cubic-bezier(.6,.08,.02,.99);
}
.gs-gemx__gem {
  position: absolute;
  inset-inline-start: var(--gx);
  top: var(--gy);
  width: var(--gs); height: var(--gs);
  /* pre-drop: parked above the viewport, invisible (Cartier initial state) */
  opacity: 0;
  transform: translateY(-110vh) rotate(calc(var(--gr) * 2));
  will-change: transform, opacity;
}
/* the fall — fast arrival, long soft settle (Cartier cascade feel) */
.gs-gemx__gem.is-drop {
  animation: gs-gemx-fall 1.05s cubic-bezier(.16, 1, .3, 1) forwards;
}
.gs-gemx__gem.is-settled { opacity: 1; transform: rotate(var(--gr)); }
@keyframes gs-gemx-fall {
  0%   { opacity: 0; transform: translateY(-110vh) rotate(calc(var(--gr) * 2)); }
  12%  { opacity: 1; }
  78%  { transform: translateY(1.6%) rotate(var(--gr)); }
  100% { opacity: 1; transform: translateY(0) rotate(var(--gr)); }
}

.gs-gemx__orb {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: #c6cacd;                     /* = engine background_hex */
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.35),
    0 24px 48px -24px rgba(16,24,32,.35);
  transition: transform 380ms cubic-bezier(.16,1,.3,1), box-shadow 380ms ease;
}
.gs-gemx__gem:hover .gs-gemx__orb {
  transform: scale(1.05) translateY(-4px);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.45),
    0 34px 60px -26px rgba(16,24,32,.45);
}
.gs-gemx__orb iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; display: block;
  opacity: 0;
  transition: opacity 700ms ease;
}
.gs-gemx__gem.is-alive .gs-gemx__orb iframe { opacity: 1; }
/* soft colour poster shown before the engine wakes (and as no-WebGL fallback) */
.gs-gemx__poster {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 60% at 50% 42%, var(--pa) 0%, transparent 75%),
    radial-gradient(90% 90% at 50% 60%, color-mix(in srgb, var(--pb) 30%, #c6cacd) 0%, #c6cacd 100%);
}

/* ground shadow + label chip — arrive on landing */
.gs-gemx__shadow {
  position: absolute;
  left: 50%; bottom: -9%;
  width: 74%; height: 12%;
  transform: translateX(-50%) scaleX(.4);
  background: radial-gradient(50% 50% at 50% 50%, rgba(16,24,32,.30), transparent 70%);
  opacity: 0;
  transition: opacity 700ms ease, transform 700ms cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
.gs-gemx__chip {
  position: absolute;
  left: 50%; bottom: -2.6rem;
  transform: translateX(-50%) translateY(6px);
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .8rem;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.6);
  font-size: .72rem; font-weight: 300; letter-spacing: .04em;
  color: #101820;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 600ms ease 150ms, transform 600ms cubic-bezier(.16,1,.3,1) 150ms;
  pointer-events: none;
}
.gs-gemx__chip-dot { width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(16,24,32,.15); }
.gs-gemx__gem.is-settled .gs-gemx__shadow { opacity: 1; transform: translateX(-50%) scaleX(1); }
.gs-gemx__gem.is-settled .gs-gemx__chip   { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── MDX content: bottom two columns ──────────────────────── */
.gs-gemx__flex {
  position: absolute;
  inset-inline: 5rem; bottom: 4.5rem;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 3rem;
}
.gs-gemx__eyebrow {
  font-size: 11px; font-weight: 300;
  letter-spacing: .22em; text-transform: uppercase;
  color: #5b6871;
  margin-bottom: 1rem;
}
[dir="rtl"] .gs-gemx__eyebrow { letter-spacing: normal; font-size: 13px; }
.gs-gemx__h1, .gs-gemx__h2 {
  font-size: min(6.2rem, 8.8vh);            /* MDX: min(6.5rem, 6.5vh) family */
  line-height: 0.92;
  letter-spacing: .01em;
  color: #101820;
  font-weight: 400;
  margin: 0;
}
.gs-gemx__h2 { font-weight: 300; font-style: italic; color: #2b3640; }
[dir="rtl"] .gs-gemx__h1, [dir="rtl"] .gs-gemx__h2 { line-height: 1.25; font-style: normal; }
.gs-gemx__lede {
  margin-top: 1.2rem;
  max-width: 30rem;
  font-size: .98rem; line-height: 1.6;
  color: #5b6871;                            /* MDX muted */
}
.gs-gemx__right {
  display: grid; gap: 1.1rem;
  width: min(24rem, 34vw);
  justify-items: start;
}
.gs-gemx__note { font-size: .85rem; line-height: 1.55; color: #5b6871; }
.gs-gemx__ctas { display: flex; flex-wrap: wrap; gap: .6rem; }

/* ── responsive ───────────────────────────────────────────── */
@media (max-width: 1023px) {
  .gs-gemx { padding: 6rem 2.5rem 3.5rem; }
  .gs-gemx__flex { inset-inline: 2.5rem; bottom: 3rem; }
  .gs-gemx__h1, .gs-gemx__h2 { font-size: min(4.2rem, 7vh); }
}
@media (max-width: 767px) {
  .gs-gemx { height: auto; min-height: 100svh; padding: 5.5rem 1.4rem 3rem; }
  .gs-gemx__gem--desk { display: none; }     /* 3 stones on mobile */
  .gs-gemx__stage { inset: 8% 2% 46%; }
  .gs-gemx__gem { width: calc(var(--gs) * .62); height: calc(var(--gs) * .62); }
  .gs-gemx__flex {
    position: relative; inset: auto;
    margin-top: 62svh;
    flex-direction: column; align-items: flex-start;
    inset-inline: 0; bottom: 0;
  }
  .gs-gemx__h1, .gs-gemx__h2 { font-size: 2.4rem; }
  .gs-gemx__right { width: 100%; }
  .gs-gemx__ellipse { width: 100%; height: 100%; }
}

/* ── RTL — mirror the scatter so it composes the same way ─── */
[dir="rtl"] .gs-gemx__chip { letter-spacing: normal; font-size: .8rem; }

/* ── reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .gs-gemx__gem { opacity: 1; transform: rotate(var(--gr)); }
  .gs-gemx__gem.is-drop { animation: none; }
  .gs-gemx__stage { transition: none; }
  .gs-gemx__shadow, .gs-gemx__chip { transition: none; opacity: 1; }
  .gs-gemx__shadow { transform: translateX(-50%) scaleX(1); }
  .gs-gemx__chip { transform: translateX(-50%); }
}

/* =========================================================================
   About · entity facts grid (Knowledge Panel corroboration block)
   ========================================================================= */
.gs-factgrid {
  max-width: 640px;
  margin-inline: auto;
  border: 1px solid var(--hairline, rgba(0,0,0,.08));
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface, #fff);
}
.gs-factgrid__row {
  display: grid;
  grid-template-columns: 40% 1fr;
  gap: 1rem;
  padding: 0.95rem 1.4rem;
  border-bottom: 1px solid var(--hairline, rgba(0,0,0,.06));
}
.gs-factgrid__row:last-child { border-bottom: 0; }
.gs-factgrid dt {
  margin: 0;
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted, #8a8a8a);
  font-weight: 400;
}
.gs-factgrid dd {
  margin: 0;
  color: var(--ink, #1a1a1a);
  font-weight: 400;
}
@media (max-width: 560px) {
  .gs-factgrid__row { grid-template-columns: 1fr; gap: .25rem; padding: .85rem 1.1rem; }
}

/* =========================================================================
   Research & Data (/research citation silo)
   ========================================================================= */
.gs-research-card {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--line, rgba(0,0,0,.08));
  border-radius: 16px;
  background: var(--surface, #fff);
  text-decoration: none; color: inherit;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.gs-research-card:hover { border-color: var(--gold, #c9a24b); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,.06); }
.gs-research-card__ic { flex: 0 0 auto; color: var(--gold, #c9a24b); display: inline-flex; }
.gs-research-card__ic .gs-icon { width: 24px; height: 24px; }
.gs-research-card__body { flex: 1 1 auto; min-width: 0; }
.gs-research-card__title { display: block; font-size: 1.08rem; color: var(--ink, #1a1a1a); margin-bottom: .35rem; }
.gs-research-card__sum { display: block; font-size: .9rem; line-height: 1.55; color: var(--ink-muted, #7c7c7c); }
.gs-research-card__go { flex: 0 0 auto; color: var(--ink-muted, #9a9a9a); }
[dir="rtl"] .gs-research-card__go { transform: scaleX(-1); }

.gs-research-cite {
  margin-top: 2rem; padding: 1.5rem 1.6rem;
  border: 1px dashed var(--line, rgba(0,0,0,.14));
  border-radius: 16px; background: var(--surface-2, rgba(0,0,0,.02));
}
.gs-research-cite p { margin: .6rem 0 .8rem; color: var(--ink-muted, #6f6f6f); line-height: 1.6; }
.gs-research-cite__ref { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; color: var(--ink, #1a1a1a); word-break: break-word; }

.gs-research-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.6rem; }
.gs-research-tools__dl { display: flex; gap: .6rem; flex-wrap: wrap; }
.gs-research-tools__lic { font-size: .85rem; color: var(--ink-muted, #7c7c7c); margin: 0; }

.gs-research-tablewrap { overflow-x: auto; border: 1px solid var(--line, rgba(0,0,0,.08)); border-radius: 14px; }
.gs-research-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.gs-research-table th, .gs-research-table td { padding: .8rem 1rem; text-align: start; border-bottom: 1px solid var(--line, rgba(0,0,0,.06)); white-space: nowrap; }
.gs-research-table thead th { background: var(--surface-2, rgba(0,0,0,.03)); color: var(--ink-muted, #6f6f6f); font-weight: 400; letter-spacing: .02em; }
.gs-research-table tbody tr:last-child td { border-bottom: 0; }
.gs-research-empty { text-align: center; color: var(--ink-muted, #9a9a9a); white-space: normal; padding: 1.4rem; }

.gs-research-method { margin-top: 1.8rem; }
.gs-research-method p { margin-top: .6rem; line-height: 1.7; color: var(--ink-muted, #6f6f6f); }

.gs-research-faq { margin-top: 1.8rem; }
.gs-research-faq__item { border-bottom: 1px solid var(--line, rgba(0,0,0,.08)); padding: .3rem 0; }
.gs-research-faq__item summary { cursor: pointer; padding: .85rem 0; color: var(--ink, #1a1a1a); list-style: none; }
.gs-research-faq__item summary::-webkit-details-marker { display: none; }
.gs-research-faq__item p { margin: 0 0 .9rem; color: var(--ink-muted, #6f6f6f); line-height: 1.6; }
@media (max-width: 560px) {
  .gs-research-tools { flex-direction: column; align-items: flex-start; }
}

/* =========================================================================
   Scam Watch (/scam-watch) — safety tips, report form, notices
   ========================================================================= */
.gs-scam-tip__t { display:block; color:var(--ink,#1a1a1a); font-size:1.02rem; margin-bottom:.4rem; }
.gs-scam-tip__d { margin:0; color:var(--ink-muted,#6f6f6f); font-size:.92rem; line-height:1.55; }
.gs-scam-dirlink { margin-top:1.6rem; text-align:center; }
.gs-scam-disclaimer { margin-top:1rem; font-size:.82rem; color:var(--ink-muted,#8a8a8a); line-height:1.5; }

.gs-form { display:flex; flex-direction:column; gap:1.15rem; }
.gs-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.15rem; }
.gs-field-row { display:flex; flex-direction:column; gap:.4rem; }
.gs-field-hint { font-size:.8rem; color:var(--ink-muted,#8a8a8a); }
.gs-req { color:var(--gold,#c9a24b); }
.gs-form-actions { margin-top:.4rem; }

.gs-consent { display:flex; align-items:flex-start; gap:.65rem; font-size:.9rem; color:var(--ink-muted,#6f6f6f); line-height:1.5; cursor:pointer; }
.gs-consent input { margin-top:.2rem; flex:0 0 auto; }
.gs-consent a { color:var(--gold,#c9a24b); text-decoration:underline; }

.gs-formnote { padding:.95rem 1.2rem; border-radius:12px; margin-bottom:1.4rem; font-size:.94rem; }
.gs-formnote--ok  { background:rgba(40,140,70,.10);  border:1px solid rgba(40,140,70,.30);  color:#1e6b39; }
.gs-formnote--err { background:rgba(180,40,40,.08);  border:1px solid rgba(180,40,40,.28);  color:#9a2b2b; }

.gs-h3 { font-size:1.5rem; margin-top:.4rem; }

/* keep the honeypot out of sight + out of the a11y tree */
.gs-hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

@media (max-width:620px){ .gs-form-grid { grid-template-columns:1fr; } }
@media (prefers-color-scheme:dark){
  .gs-formnote--ok  { color:#8fe0aa; }
  .gs-formnote--err { color:#f0a6a6; }
}

/* =========================================================================
   Souq — "enhancing your experience" hero.
   The liquid-gold mesh is a FIXED, full-viewport backdrop that sits BEHIND the
   header too (matching the homepage), so the transparent souq header floats
   over it. Colours match the homepage light shader palette exactly.
   ========================================================================= */
/* souq page: transparent header + footer float over the fixed mesh */
.gs-page--soon{ background:#050402; }
.gs-page--soon .gs-site-header{ background:transparent!important; border-color:transparent!important;
  box-shadow:none!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important;
  position:fixed; top:0; left:0; right:0; z-index:30; }
.gs-page--soon .gs-site-header__topbar{ background:transparent!important; }
/* header content in white (like the homepage), with a soft shadow for legibility
   over the flowing gold. */
.gs-page--soon .gs-site-header,
.gs-page--soon .gs-site-header a,
.gs-page--soon .gs-site-header button,
.gs-page--soon .gs-site-header .gs-site-header__nav-link,
.gs-page--soon .gs-site-header .gs-site-header__lang,
.gs-page--soon .gs-site-header input,
.gs-page--soon .gs-site-header input::placeholder{ color:#fff!important; }
/* match the homepage hero-header nav exactly: thin (300), inactive links faded to
   55% white, active + hover full white */
.gs-page--soon .gs-site-header .gs-site-header__nav-link{ color:rgba(255,255,255,.55)!important; font-weight:300!important; }
.gs-page--soon .gs-site-header .gs-site-header__nav-link:hover{ color:#fff!important; }
.gs-page--soon .gs-site-header .gs-site-header__nav-link.is-active{ color:#fff!important; }
.gs-page--soon .gs-site-header svg{ color:#fff!important; stroke:#fff!important; }
.gs-page--soon .gs-site-header .gs-site-header__search-field{ border-bottom-color:rgba(255,255,255,.28)!important; }
.gs-page--soon .gs-site-header .gs-site-header__sep{ color:rgba(255,255,255,.55)!important; }
/* logo → white on the gold backdrop */
.gs-page--soon .gs-site-header a img{ filter:brightness(0) invert(1)!important; }
.gs-page--soon .gs-site-header__topnav-left a,
.gs-page--soon .gs-site-header__topnav-right a,
.gs-page--soon .gs-site-header .gs-site-header__search input{ text-shadow:0 1px 10px rgba(20,15,8,.35); }
.gs-page--soon .gs-site-header .gs-site-header__nav-link{ text-shadow:0 1px 12px rgba(20,15,8,.40); }
/* souq page: no footer */
.gs-page--soon .gs-site-footer,
.gs-page--soon footer{ display:none!important; }

/* homepage hero-header: nudge the logo and the nav row up ~5px each. transform (not
   margin) so the header's overall height and the other rows stay put. */
.gs-hero-header img{ transform:translateY(-5px); }
.gs-hero-header nav{ transform:translateY(-5px); }

/* homepage hero copy block dropped ~2 text lines below the vertical centre */
#root .mx-auto.w-full.max-w-7xl{ transform:translateY(3rem); }

/* the real homepage shader, embedded full-bleed behind everything incl. header */
.gs-souq-liquid{
  position:fixed; inset:0; z-index:0; width:100vw; height:100vh;
  border:0; pointer-events:none; background:#050402;
}
/* hero content vertically centred; own dark backdrop so the light copy stays
   legible even if the liquid-gold iframe shader fails to paint behind it */
.gs-souq-soon{
  position:relative; z-index:1; min-height:100vh; box-sizing:border-box;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:clamp(180px,22vh,240px) 1.25rem clamp(110px,15vh,170px); text-align:center; background:transparent;
}
/* flat content block — no scrim / drop shadow behind the copy */
.gs-souq-soon__inner{
  position:relative; z-index:1; max-width:720px; background:none;
}
.gs-souq-soon__eyebrow{
  display:inline-block; font-size:.78rem; letter-spacing:.32em; text-transform:uppercase;
  color:#fff; margin-bottom:1.6rem;
}
/* selector doubled up to outrank the global `.gs-page h1` (which forces dark --ink
   + weight 300 and was the real reason the heading looked black) */
/* previous Josefin display face restored (family inherited); lightest weight for the
   thinnest possible stroke. Shadow kept soft so it doesn't visually thicken the strokes. */
.gs-souq-soon .gs-souq-soon__title{
  font-size:clamp(2.4rem,5.6vw,4rem); line-height:1.1; color:#fff;
  /* real Josefin Sans Thin (100) — the bundled "Josefin GS" face clamps at 300,
     so name the Bunny family (loaded on this page) first to get a true hairline */
  font-family:"Josefin Sans","Josefin GS",system-ui,-apple-system,sans-serif;
  font-weight:100; letter-spacing:-.01em; margin:0 auto; max-width:16ch;
  text-shadow:none;
}
/* a calm, generous gap sets the actions apart from the statement above */
.gs-souq-soon__ctas{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:3.25rem; }
/* roomier CTAs — comfortable padding around the label */
.gs-souq-soon__ctas .gs-btn{ padding:1em 2.1em; font-size:.9rem; line-height:1.2; }
/* buttons over the dark shader: primary gold, secondary outline-light */
.gs-souq-soon .gs-btn--ghost{ color:#fdf7ec; border-color:rgba(253,247,236,.5); background:transparent; }
.gs-souq-soon .gs-btn--ghost:hover{ border-color:#fdf7ec; background:rgba(253,247,236,.08); }
[dir="rtl"] .gs-souq-soon__eyebrow{ letter-spacing:normal; }
@media (prefers-reduced-motion:reduce){ .gs-souq-soon__flow::before,.gs-souq-soon__flow::after{ animation:none; } }

/* =========================================================================
   Header — Products hover mega-menu (two product cards drop down)
   ========================================================================= */
/* TEMPORARILY HIDDEN — the Products link still navigates to /products; only
   the hover panel is off. To bring it back, delete this one rule. Everything
   below (markup in includes/header.php + all styling) is left intact. */
.gs-hdrmega{ display:none !important; }

/* the wrap must NOT be the positioned ancestor — the panel anchors to the
   sticky header so it can span the full header container width, centred. */
.gs-hdrmega-wrap{ position:static; display:inline-flex; }
.gs-hdrmega{
  /* drops below the header with the same 14px gap and the same width as the
     search palette, so both header overlays read as one system */
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(8px);
  box-sizing:border-box; width:min(960px,calc(100vw - 32px));
  display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:16px;
  background:var(--paper,#fff); border:1px solid var(--line,rgba(0,0,0,.08));
  border-radius:18px; box-shadow:0 26px 60px -22px rgba(20,20,20,.30),0 10px 24px rgba(20,20,20,.07);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .18s var(--ease-out,ease),transform .18s var(--ease-out,ease),visibility .18s;
  z-index:120;
}
/* invisible bridge so moving from the link down to the panel doesn't close it */
.gs-hdrmega::before{ content:""; position:absolute; left:0; right:0; top:-26px; height:26px; }
.gs-hdrmega-wrap:hover .gs-hdrmega,
.gs-hdrmega-wrap:focus-within .gs-hdrmega{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
}
.gs-hdrmega__card{
  display:flex; flex-direction:column; gap:7px; position:relative;
  padding:22px 24px; border-radius:14px; background:var(--surface-2,#f6f4ef);
  border:1px solid transparent; transition:background .15s ease,border-color .15s ease,transform .15s ease;
}
.gs-hdrmega__card:hover{ background:var(--paper,#fff); border-color:var(--gold,#bd9e70); transform:translateY(-1px); }
.gs-hdrmega__title{ font-size:1.12rem; color:var(--ink,#221d17); font-weight:400; }
.gs-hdrmega__desc{ font-size:.9rem; line-height:1.5; color:var(--ink-muted,#8c8478); max-width:38ch; }
.gs-hdrmega__go{ position:absolute; top:20px; inset-inline-end:22px; color:var(--gold,#bd9e70); display:inline-flex; }
.gs-hdrmega__go .gs-icon{ width:17px; height:17px; }
[dir="rtl"] .gs-hdrmega__go{ transform:scaleX(-1); }
@media (max-width:900px){ .gs-hdrmega{ display:none!important; } } /* mobile uses the burger menu */

/* =========================================================================
   Homepage SPA header — balance the centred nav gap so it sits dead under the
   logo (the built nav puts the spacer inside the first half → off-centre).
   #root only exists on the homepage, so this never touches other pages.

   Gated at 1024px on purpose. The nav ships as `hidden lg:flex`, and these
   selectors outrank that `.hidden` utility, so an unscoped `display:flex` here
   drags the desktop nav back onto mobile alongside .gs-mobnav. 1024px IS
   Tailwind's `lg` — keep the two in step if the breakpoint ever moves.
   ========================================================================= */
@media (min-width:1024px){
  #root header nav[aria-label="Primary"]{ display:flex; }
  #root header nav[aria-label="Primary"] > div{ flex:1 1 0; }
  #root header nav[aria-label="Primary"] > div:first-child{ justify-content:flex-end; padding-inline-end:clamp(3rem,6.5vw,8rem); }
  #root header nav[aria-label="Primary"] > div:last-child{ justify-content:flex-start; padding-inline-start:clamp(3rem,6.5vw,8rem); }
  /* the built-in logo-gap spacer is now redundant — the symmetric padding owns it */
  #root header nav[aria-label="Primary"] > div:first-child > span[aria-hidden="true"]{ display:none!important; }
}

/* =========================================================================
   FOLDABLES LAYER — posture-aware tiers for folding phones
   =========================================================================
   Tier map (mirrored verbatim in app/js/gs-fold.js, which also stamps the
   classes gs-t-fold / gs-t-glance / gs-t-landshort / gs-spanned on <html>):

   T1 FOLD-INNER   near-square unfolded book screens (Z Fold 7, Razr Fold,
                   Find N6, Mate X7, Pixel Fold, iPhone Fold) — and, by
                   design, tablets in portrait: rescues the 769–1023px
                   "gap zone" that previously had neither bottom nav nor
                   desktop chrome.
   T3 GLANCE       Flip-cover ~1:1 screens: glance economics — info first,
                   chrome last, no heavy GPU work.
   T4 LAND-SHORT   any landscape viewport with scarce height: chrome pays
                   rent, dvh everywhere.
   T5 SPANNED      real dual viewport segments: crease-derived gutter.

   Crease law: discrete controls never sit in the horizontal centre band on
   T1/T5; continuous surfaces (text, cards, the search field) may span it.
   ========================================================================= */
:root { --gs-crease-gutter: 0px; }

/* ── T1 · FOLD-INNER — the "mini tablet" ──────────────────────────────── */
@media (min-width: 600px) and (max-width: 1023px)
       and (min-aspect-ratio: 7/10) and (max-aspect-ratio: 10/7) {

  :root { --gs-crease-gutter: 24px; }

  /* Bottom nav returns — highest-frequency surface, reachable by BOTH thumbs
     in the two-hand book grip. Clone of the ≤768 bar with wider breathing
     room; the centre disc keeps its big 65px floating target. */
  body { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  .gs-mobnav {
    position: fixed; left: 0; right: 0; bottom: 0;
    height: 70px;
    padding-bottom: calc(5px + env(safe-area-inset-bottom, 0px));
    padding-inline: clamp(24px, 6vw, 72px);
    display: flex; align-items: center; justify-content: space-between;
    background: #ffffff;
    border-top: 1px solid rgba(34, 29, 23, 0.08);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    z-index: 2147483646; isolation: isolate;
    font-family: 'Josefin Sans', system-ui, -apple-system, sans-serif;
  }
  .gs-mobnav__item, .gs-mobnav__centre {
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none; border: 0; background: transparent; cursor: pointer;
    -webkit-tap-highlight-color: transparent; color: #221d17;
    transition: color 180ms ease, transform 180ms ease;
  }
  .gs-mobnav__item { flex: 0 1 88px; flex-direction: column; height: 100%; padding: 0 8px; }
  .gs-mobnav__icon { width: 26px; height: 26px; display: block; filter: brightness(0) saturate(100%); transition: filter 180ms ease, transform 180ms ease; }
  .gs-mobnav__icon--forex { width: 30px; height: 30px; }
  .gs-mobnav__item:active .gs-mobnav__icon { transform: scale(0.92); }
  .gs-mobnav__item.is-active .gs-mobnav__icon { filter: invert(68%) sepia(28%) saturate(550%) hue-rotate(5deg) brightness(92%) contrast(88%); }
  .gs-mobnav__centre {
    flex: 0 0 auto; width: 65px; height: 65px; margin-top: -30px; border-radius: 50%;
    background: #bd9e70; box-shadow: 0 6px 15px rgba(189, 158, 112, 0.40), 0 0 0 4px #fff;
    position: relative;
    transition: transform 180ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms ease;
  }
  .gs-mobnav__centre:active { transform: scale(0.95); }
  .gs-mobnav__centre.is-active { background: #9a7c4f; box-shadow: 0 8px 18px rgba(154, 124, 79, 0.50), 0 0 0 4px #fff; }
  .gs-mobnav__centre-icon { width: 32px; height: 32px; display: block; filter: brightness(0) invert(1); }
  footer.site-footer .footer-copyright { padding-bottom: 94px; }

  /* Header: mini-tablet gutters; drawer hugs its trigger side (never spans
     the fold); mega menu stays off (burger owns nav here). */
  .gs-site-header__topbar, .gs-site-header__row, .gs-site-header__nav, .gs-vp-coverframe { padding-inline: clamp(20px, 4vw, 40px); }
  .gs-site-drawer__panel { max-width: 420px; }

  /* Search palette: continuous surface — may span the crease; height in dvh
     so the URL-bar show/hide never clips the result list. */
  .gs-header-search-drop__inner { max-width: 640px; }
  .gs-header-search-drop__results { max-height: calc(100dvh - var(--gs-hdr-h, 120px) - 150px); }

  /* Two-column pattern: LEFT = browse/scan, RIGHT = act/confirm. The
     column-gap doubles as the crease gutter; primary CTAs sit at column
     edges (lower-outer thumb quadrants), never mid-screen. */
  .gs-souq-grid { grid-template-columns: repeat(2, 1fr) !important; column-gap: max(1.1rem, var(--gs-crease-gutter)); }
  .gs-souq-facets__foot .gs-btn--primary { margin-inline-start: auto; }
  .gs-vp-products { grid-template-columns: repeat(2, 1fr); grid-auto-flow: row; overflow: visible; column-gap: max(0.9rem, var(--gs-crease-gutter)); }
  .lp-featured-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: max(1.2rem, var(--gs-crease-gutter)); }
  .gs-grid--3, .gs-grid--4 { grid-template-columns: repeat(2, 1fr); column-gap: max(1rem, var(--gs-crease-gutter)); }
  .gs-rategrid { grid-template-columns: 1fr 1fr !important; column-gap: max(0.8rem, var(--gs-crease-gutter)); }
  .gs-karat-glance { grid-template-columns: repeat(2, 1fr) !important; column-gap: max(0.8rem, var(--gs-crease-gutter)); }
  .gs-products-grid { grid-template-columns: repeat(2, 1fr) !important; column-gap: max(1rem, var(--gs-crease-gutter)); }

  /* Calculator: input column ‖ outcome column — the L→R task flow puts the
     conversion element under the dominant thumb. */
  .gpc-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      "g1    g2"
      "g3    rates"
      "main  main"
      "side  acts"
      "disc  disc" !important;
    column-gap: max(1rem, var(--gs-crease-gutter)) !important;
  }
  .gpc-card[data-area="acts"] { justify-self: stretch; }

  /* Homepage SPA: give the near-square screen a 2-up rhythm where the
     Tailwind 48rem tier misses 600–767px, and calm the hero height. */
  #root section .grid { column-gap: max(1.5rem, var(--gs-crease-gutter)); }

  /* Long-form reading: measure capped + centred; the eye bridges the crease,
     so text may span, but a 68ch measure keeps saccades comfortable. */
  .lp-article-body, .gs-article-body { max-width: 68ch; margin-inline: auto; }
}

/* ── T5 · SPANNED — real crease geometry (progressive enhancement) ─────── */
@media (horizontal-viewport-segments: 2) {
  :root { --gs-crease-gutter: calc(env(viewport-segment-left 1 0, 50vw) - env(viewport-segment-right 0 0, 50vw) + 24px); }
}

/* ── T3 · GLANCE — Flip cover ~1:1 (class-gated + media-gated) ─────────── */
@media (max-width: 440px) and (max-height: 460px)
       and (min-aspect-ratio: 4/5) and (max-aspect-ratio: 5/4) {

  /* Glance economics: the visit is 5–15 seconds for one fact. Type up,
     chrome down, nothing heavy. */
  :root { font-size: 17px; }

  /* Header: brand confirmation only — nav is a "commit" action that belongs
     on the inner screen. */
  .gs-site-header__topbar, .gs-site-header__nav { display: none !important; }
  .gs-site-header__row { padding-block: 8px; }
  .gs-site-header__brand img { width: min(180px, 52vw); }

  /* Bottom nav: icon-only, fat-finger tolerant (48px+ targets in a 56px bar),
     centre disc scaled to fit. */
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  .gs-mobnav { height: 56px; }
  .gs-mobnav__centre { width: 52px; height: 52px; margin-top: -18px; }
  .gs-mobnav__centre-icon { width: 26px; height: 26px; }

  /* Battery/thermals: cover panels throttle fast — no shader, no video,
     no backdrop blur, tickers paused. */
  #root canvas, #root video, .gs-hero-video, canvas.gs-mesh { display: none !important; }
  .gs-header-search-drop__inner { border-radius: 14px; backdrop-filter: none; -webkit-backdrop-filter: none; background: #fdfcfa; }
  .gs-header-search-scrim { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(24,19,12,.5); }
  .gs-ticker, [class*="marquee"] { animation-play-state: paused !important; }

  /* Everything single-column; the first viewport must already contain the
     answer (rate, search, continue) — no scroll-critical content below. */
  .gs-grid--2, .gs-grid--3, .gs-grid--4, .gs-rategrid, .gs-karat-glance,
  .gs-souq-grid, .gs-products-grid, .lp-featured-row { grid-template-columns: 1fr !important; }
  .gs-header-search-drop { padding: 8px !important; }
  .gs-header-search-drop__results { max-height: calc(100dvh - 150px); }
  #gsSearchInput { font-size: 18px; }
}

/* ── T4 · LANDSCAPE-SHORT — height is the scarce resource ─────────────── */
@media (orientation: landscape) and (max-height: 500px) {

  /* Chrome pays rent: one-row header (topbar folded away, smaller logo),
     48px icon bottom nav. --gs-hdr-h re-measures via gs-fold's tierchange. */
  .gs-site-header__topbar { display: none !important; }
  .gs-site-header__row { padding-block: 6px; }
  .gs-site-header__brand img { width: min(190px, 20vw); }
  .gs-site-header__nav { padding-block: 4px 8px; }
  .gs-mobnav { height: 48px; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .gs-mobnav__icon { width: 22px; height: 22px; }
  .gs-mobnav__centre { width: 46px; height: 46px; margin-top: -14px; }
  .gs-mobnav__centre-icon { width: 24px; height: 24px; }
  body { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }

  /* Verticals in dvh; capped media so content is visible without scrolling
     past a full-bleed hero. */
  .gs-header-search-drop { padding-top: calc(var(--gs-hdr-h, 64px) + 8px) !important; }
  .gs-header-search-drop__results { max-height: calc(100dvh - var(--gs-hdr-h, 64px) - 120px); }
  .gs-chart-wrap, .gs-chartpanel { max-height: 60dvh; }
  .lp-hero__viewport { aspect-ratio: auto !important; max-height: 45dvh; }
  .gs-souq-facets.is-open { max-height: 85dvh; overflow-y: auto; }
  #root section:first-of-type { min-height: 0 !important; }
}

/* Reduced motion: the tiers add layout only — but make the morphs instant. */
@media (prefers-reduced-motion: reduce) {
  .gs-mobnav, .gs-mobnav__item, .gs-mobnav__centre { transition: none; }
}
/* ══ end FOLDABLES LAYER ══ */

/* ── Direct-answer block (AEO) ────────────────────────────────────────────
   One liftable paragraph under the H1 answering the page's head query, with
   the live number and the timestamp in it. This is the passage AI Overviews,
   Perplexity and ChatGPT search quote, and the target of the `speakable`
   selectors in each page's JSON-LD.

   Visually hidden using the site's existing .sr-only clip technique — present
   in the HTML for crawlers and screen readers, invisible to sighted visitors,
   so the visible page stays exactly as designed. */
.gs-answer-block {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}

/* ── Landing pages (seo-land.php) ─────────────────────────────────────────
   Additive helpers so the programmatic landing family inherits the design
   system instead of drifting into inline styles. Weights stay 300/400. */

/* Focus-karat row on a rate table — a quiet gold wash, never bold. */
.gs-ratetable tr.is-focus td { background: var(--gold-wash, rgba(189, 158, 112, 0.07)); }

/* Cross-link mesh — the eyebrow label sits inline with a row of chips. */
.gs-land-mesh {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 0.6rem;
}
.gs-land-mesh .gs-eyebrow::before { display: none; }

/* Rate table restacks into calm rows on narrow screens — no sideways scroll,
   nothing hidden. Karat + price share the top line; purity + change sit
   beneath in muted text. */
@media (max-width: 560px) {
  .gs-ratetable thead {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .gs-ratetable, .gs-ratetable tbody, .gs-ratetable tr, .gs-ratetable td { display: block; }
  .gs-ratetable tr {
    display: grid; grid-template-columns: 1fr auto;
    column-gap: 1rem; padding: 0.9rem 0; border-top: 1px solid var(--line);
  }
  .gs-ratetable tr:first-child { border-top: none; }
  .gs-ratetable td { padding: 0 !important; border: none !important; }
  .gs-ratetable td.gs-rt-karat  { grid-column: 1; grid-row: 1; font-size: 1.05rem; }
  .gs-ratetable td.gs-rt-price  { grid-column: 2; grid-row: 1; text-align: end; }
  .gs-ratetable td.gs-rt-purity { grid-column: 1; grid-row: 2; }
  .gs-ratetable td.gs-rt-change { grid-column: 2; grid-row: 2; text-align: end; }
  .gs-ratetable td.gs-rt-purity,
  .gs-ratetable td.gs-rt-change { font-size: 0.82rem; color: var(--ink-muted); margin-top: 0.15rem; }
  .gs-ratetable td.gs-rt-change.gs-up { color: var(--rise); }
  .gs-ratetable td.gs-rt-change.gs-down { color: var(--fall); }
}

/* ── Tools modal (homepage bento → "Tools & guides") ──────────────────────
   Native <dialog>: centered on desktop, a bottom sheet under 600px. Injected
   before </body> on the SPA homepage, i.e. OUTSIDE .gs-page, so the design
   tokens are not in scope — every value here is explicit (same discipline as
   the search palette). Weights 300/400 only. */
dialog.gs-tools-modal {
  width: 100%; max-width: 620px; max-height: 86vh;
  margin: auto; /* the site reset zeroes dialog margins, killing UA centering */
  padding: 0; border: 0; border-radius: 24px;
  background: #fdfcfa; color: #2a2016;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 34px 90px -28px rgba(34, 29, 23, 0.42),
    0 10px 24px -18px rgba(34, 29, 23, 0.22);
  overflow: hidden;
}
dialog.gs-tools-modal::backdrop {
  background: rgba(34, 29, 23, 0.38);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
/* enter transition (centered) */
dialog.gs-tools-modal { opacity: 0; transform: translateY(18px) scale(0.96); transition: opacity .24s ease, transform .38s cubic-bezier(0.22, 1, 0.36, 1); }
dialog.gs-tools-modal[open] { opacity: 1; transform: translateY(0) scale(1); }
/* slim gold accent at the top, like .gpc-cur-modal */
dialog.gs-tools-modal::before {
  content: ""; position: absolute; left: 50%; top: 14px; width: 36px; height: 2px;
  transform: translateX(-50%); background: #bd9e70; border-radius: 999px; opacity: .55; z-index: 2;
}
.gs-tools-modal__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; padding: 1.8rem 1.6rem 0.4rem;
}
.gs-tools-modal__titlewrap { display: flex; flex-direction: column; gap: 0.35rem; }
.gs-tools-modal__eyebrow {
  font-size: 0.7rem; letter-spacing: 0.28em; text-transform: uppercase;
  font-weight: 400; color: #9a7c4f;
}
.gs-tools-modal__title {
  font-family: "Fraunces GS", "Times New Roman", Georgia, serif;
  font-weight: 300; font-size: 1.5rem; letter-spacing: -0.01em; color: #2a2016;
}
.gs-tools-modal__close {
  flex: 0 0 auto; width: 38px; height: 38px; display: inline-flex;
  align-items: center; justify-content: center; border-radius: 999px;
  border: 1px solid rgba(42, 32, 22, 0.14); background: #fff; color: #66615c;
  cursor: pointer; transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.gs-tools-modal__close:hover { color: #9a7c4f; border-color: #bd9e70; }

/* carousel */
.gs-tools-carousel { padding: 1rem 1.6rem 1.8rem; }
.gs-tools-carousel__viewport {
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; cursor: grab;
}
.gs-tools-carousel__viewport::-webkit-scrollbar { display: none; }
.gs-tools-carousel__viewport:focus-visible { outline: 2px solid #bd9e70; outline-offset: 4px; border-radius: 18px; }
.gs-tools-carousel__track { display: flex; gap: 0.9rem; padding: 6px 2px; }
.gs-tool-flip {
  flex: 0 0 calc((100% - 1.8rem) / 3);
  scroll-snap-align: start; text-decoration: none;
  height: 158px; perspective: 900px;
}
@media (max-width: 760px) { .gs-tool-flip { flex-basis: calc((100% - 0.9rem) / 2); } }
@media (max-width: 460px) { .gs-tool-flip { flex-basis: 78%; } }

.gs-tool-flip__inner {
  position: relative; display: block; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) and (pointer: fine) {
  .gs-tool-flip:hover .gs-tool-flip__inner,
  .gs-tool-flip:focus-visible .gs-tool-flip__inner { transform: rotateY(180deg); }
}
.gs-tool-flip__face {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  justify-content: center; gap: 0.5rem; padding: 1.1rem;
  border: 1px solid rgba(42, 32, 22, 0.12); border-radius: 18px;
  background: #fff; -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.gs-tool-flip__front { align-items: flex-start; }
.gs-tool-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid rgba(42, 32, 22, 0.10); color: #9a7c4f;
}
.gs-tool-ico .gs-icon { width: 18px; height: 18px; }
.gs-tool-name {
  font-family: "Fraunces GS", "Times New Roman", Georgia, serif;
  font-weight: 400; font-size: 1rem; color: #2a2016; line-height: 1.25;
}
.gs-tool-sub { font-size: 0.82rem; line-height: 1.45; color: rgba(42, 32, 22, 0.66); }
.gs-tool-sub--touch { display: none; }
.gs-tool-flip__back {
  transform: rotateY(180deg); align-items: flex-start;
  background: rgba(189, 158, 112, 0.07); border-color: rgba(189, 158, 112, 0.45);
}
.gs-tool-open {
  margin-top: auto; display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: #9a7c4f;
}
[dir="rtl"] .gs-tool-open svg { transform: scaleX(-1); }

/* controls (mirror .gs-carousel) */
.gs-tools-carousel__controls { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.3rem; }
.gs-tools-carousel__nav {
  width: 40px; height: 40px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(42, 32, 22, 0.14); border-radius: 999px; background: #fff; color: #66615c; cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease, opacity .18s ease;
}
.gs-tools-carousel__nav:hover { color: #fff; background: #bd9e70; border-color: #bd9e70; }
.gs-tools-carousel__nav:disabled { opacity: 0.35; cursor: default; background: #f4f4f4; color: #8c8478; }
.gs-tools-carousel__dots { display: flex; align-items: center; gap: 8px; }
.gs-tools-carousel__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: #d9d3c8; cursor: pointer; transition: width .22s ease, background-color .22s ease; }
.gs-tools-carousel__dot.is-active { width: 22px; background: #bd9e70; }

/* touch devices: no flip — the description shows on the front, so one tap
   always navigates and never lands on a dead back face. */
@media (hover: none) {
  .gs-tool-flip__inner { transform: none !important; }
  .gs-tool-flip__back { display: none; }
  .gs-tool-sub--touch { display: block; }
}

/* bottom sheet under 600px */
@media (max-width: 600px) {
  dialog.gs-tools-modal {
    max-width: 100%; width: 100%; max-height: 88vh;
    margin: 0 auto 0; position: fixed; inset: auto 0 0 0;
    border-radius: 22px 22px 0 0;
    transform: translateY(100%); transition: transform .4s cubic-bezier(0.22, 1, 0.36, 1), opacity .24s ease;
  }
  dialog.gs-tools-modal[open] { transform: translateY(0); }
}

html.is-tools-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  dialog.gs-tools-modal,
  .gs-tool-flip__inner { transition: none !important; }
}