/* ============================================================
   USED ROLEX WATCHES — Premium Mobile Marketplace
   Ivory / Deep Rolex Green / Muted Gold
   Built around real product photography
   ============================================================ */

:root {
  /* core palette — warm ivory / champagne, deep emerald, muted gold */
  --bg: #F4EEDD;
  --bg-soft: #F8F2E2;
  --bg-warm: #ECE0BE;
  --bg-deep: #D4C495;
  --card: #FFFCF4;
  --card-soft: #FDFAEF;

  /* deeper, richer Rolex-leaning emerald — softer than near-black */
  --green: #1F5E48;
  --green-soft: #2A6E58;
  --green-deep: #143F30;
  --green-rich: #28785D;

  --gold: #A98A3F;
  --gold-soft: #BCA15F;
  --gold-light: #D4B86A;
  --gold-rich: #B8993F;
  --gold-pale: #F5E6B8;

  --text: #1B1B1B;
  --text-soft: #4A4536;
  --muted: #8E8264;
  --muted-soft: #B5AB8E;

  --border: rgba(169, 138, 63, 0.22);
  --border-strong: rgba(169, 138, 63, 0.36);
  --border-soft: rgba(60, 46, 16, 0.08);

  /* softer luxury shadows */
  --shadow-xs: 0 1px 2px rgba(40, 30, 10, 0.04);
  --shadow-sm: 0 2px 8px rgba(40, 30, 10, 0.06);
  --shadow-md: 0 6px 22px rgba(40, 30, 10, 0.08);
  --shadow-lg: 0 14px 44px rgba(40, 30, 10, 0.12);
  --shadow-card: 0 1px 3px rgba(40, 30, 10, 0.04), 0 10px 28px rgba(40, 30, 10, 0.06);

  /* gradients — premium green CTA + gold hairline */
  --gradient-green: linear-gradient(180deg, #28785D 0%, #1F5E48 60%, #1A5040 100%);
  --gradient-cream: linear-gradient(135deg, #FBF6E8 0%, #F0E6C9 60%, #DCCB97 100%);

  --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Product sheet content + refreshed typography uses Montserrat for cleaner,
     more even rendering (especially on numeric prices and phone numbers). */
  --font-montserrat: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}

button { font-family: inherit; cursor: pointer; border: none; background: none; }
a { text-decoration: none; color: inherit; }
input { font-family: inherit; }
img { display: block; }

/* ============ PAGE CONTAINER ============ */
.page {
  max-width: 480px;
  margin: 0 auto;
  background: var(--bg);
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

/* ============ HEADER ============ */
.header {
  /* phone: exactly the owner's original layout (hamburger / tagline / phone);
     the WhatsApp icon only appears from tablet width up */
  display: grid;
  grid-template-columns: 36px 1fr 44px;
  align-items: center;
  gap: 12px;
  padding: 22px 22px 22px;
}
.header .header__phone--wa { display: none; }
@media (min-width: 768px) {
  /* tablet+: equal side columns keep the two-line brand optically centered,
     and the WhatsApp icon joins the phone */
  .header { grid-template-columns: 92px 1fr 92px; }
  .header .header__phone--wa { display: flex; }
}
.header__actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
}

.header__menu {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 4px 0;
  /* Nudged up to optically align with the brand text. */
  margin-top: -4px;
}

.header__menu span {
  display: block;
  width: 26px;
  height: 2.5px;
  background: var(--green);
  border-radius: 1.25px;
}
/* Middle bar is half-width and aligned to the left edge for a more
   distinctive, premium-looking menu icon. */
.header__menu span:nth-child(2) { width: 13px; }

.header__brand {
  text-align: center;
  text-decoration: none;
  color: inherit;
  display: block;
  cursor: pointer;
}
.header__brand:hover .header__subtitle { opacity: 0.85; }

/* Brand name in the collapsed header. Phones keep the owner's original
   single big tagline line (two stacked lines read small and cramped there,
   owner 2026-07-12); the brand name shows from tablet width up. */
.header__title {
  display: none;
}
@media (min-width: 768px) {
  .header__title {
    display: block;
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 17px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--text);
    line-height: 1.25;
  }
}
.header__subtitle {
  /* phone: the original prominent uppercase line */
  margin-top: 8px;
  font-family: var(--font-montserrat);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-soft);
  line-height: 1.3;
}
@media (min-width: 768px) {
  /* tablet+: small tagline under the brand name */
  .header__subtitle {
    margin-top: 3px;
    font-size: 9.5px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
  }
}

.header__phone {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--gradient-green);
  color: #FBF6E8;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  justify-self: end;
  /* Nudged down to optically align with the brand text. */
  margin-top: 4px;
}
.header__phone:hover { transform: translateY(-1px); }
.header__phone:active { transform: translateY(0); }

/* ============ SEARCH ============ */
.search {
  margin: 0 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  padding: 0 14px;
  height: 48px;
  box-shadow: var(--shadow-xs);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.search:focus-within {
  border-color: rgba(31, 94, 72, 0.45);
  box-shadow: 0 0 0 3px rgba(31, 94, 72, 0.08);
}

.search__icon {
  color: var(--muted);
  flex-shrink: 0;
  cursor: pointer;
  transition: color 0.15s ease;
}
.search__icon:hover { color: var(--green); }

.search__input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  padding: 0 12px;
  font-size: 13px;
  color: var(--text);
  letter-spacing: 0.1px;
  cursor: text;
  /* Ensure inputs inside flex don't push siblings off-screen on small phones. */
  min-width: 0;
}
.search__input::placeholder { color: var(--muted); }

.search__filters {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  border-radius: 8px;
  flex-shrink: 0;
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 0;
  transition: color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.search__filters:hover { color: var(--green); background: rgba(31, 94, 72, 0.06); }
.search__filters:active { transform: scale(0.94); }
.search__filters:focus-visible {
  outline: 2px solid var(--gold, #A98A3F);
  outline-offset: 2px;
}

/* ============ CTA BUTTONS ============ */
.cta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 16px 20px 18px;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  transition: transform 0.1s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn:active { transform: scale(0.99); }

.btn--primary {
  background: var(--gradient-green);
  color: #FBF6E8;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.btn--primary:hover { box-shadow: var(--shadow-md); }

.btn--outline {
  background: var(--card);
  color: var(--green-deep);
  border: 1.5px solid var(--gold);
}
.btn--outline:hover { background: var(--card-soft); border-color: var(--gold-rich); }

.btn--bottom {
  width: 100%;
  padding: 16px 22px;
  font-size: 11px;
  letter-spacing: 1.9px;
}

.btn__arrow { font-size: 13px; line-height: 1; }

/* ============ HERO ============ */
.hero {
  margin: 0 20px;
  background: var(--gradient-cream);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 26px 36px;
  position: relative;
  overflow: hidden;
  min-height: 360px;
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Subtle radial gold gradient behind the watch */
.hero__glow {
  position: absolute;
  right: -90px;
  top: -40px;
  width: 360px;
  height: 360px;
  background: radial-gradient(
    circle at center,
    rgba(245, 230, 184, 0.55) 0%,
    rgba(216, 193, 130, 0.30) 35%,
    rgba(212, 196, 149, 0) 70%
  );
  pointer-events: none;
  z-index: 0;
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 60%;
}

.hero__title {
  /* DM Serif Display: free Google font, upright high-contrast display serif
     that stays crisp and stable on mobile (owner choice 2026-07-12; replaced
     the thin, "dancing" Cormorant italic). It ships in a single 400 weight. */
  /* Lora: free Google serif with a true regular weight — reads normal, not
     heavy like DM Serif Display and not thin like Cormorant italic
     (owner 2026-07-12). */
  font-family: 'Lora', var(--font-serif);
  font-style: normal;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  color: var(--text);
  letter-spacing: 0.1px;
}

.hero__subtitle {
  margin-top: 18px;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.65;
  color: var(--text-soft);
  font-weight: 400;
  max-width: 230px;
}

.hero__cta {
  margin-top: 26px;
  padding: 16px 26px;
  font-size: 11px;
  letter-spacing: 1.9px;
  /* Override .btn flex layout so the inline ROLEX accent flows as part of
     the same line of text instead of splitting into separate flex items. */
  display: inline-block;
  text-align: left;
}
/* Gold ROLEX accent inside CTAs — picks up the warm yellow gold of the
   Daytona watch in the hero. Used in any green button to highlight the
   word ROLEX. */
.btn-gold-accent,
.hero__cta-accent {
  color: var(--gold-light);
  font-weight: 700;
}

.hero__watch-wrap {
  position: absolute;
  /* Watch enlarged ~12% (240→270, 280→315). Position fine-tuned so the
     watch sits comfortably to the right with the crown still inside the
     hero card. */
  right: -22px;
  top: 26px;
  width: 270px;
  height: 315px;
  z-index: 1;
  pointer-events: none;
}

.hero__watch-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center right;
  filter: drop-shadow(0 12px 30px rgba(40, 30, 10, 0.18));
}

/* SVG fallback for hero — drawn via CSS only (no JS state) */
.hero__watch-fallback {
  display: none;
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 60% 40%, var(--gold-pale) 0%, var(--gold-light) 22%, transparent 32%),
    radial-gradient(circle at 60% 40%, transparent 36%, var(--green-deep) 38%, var(--green-deep) 50%, transparent 52%),
    radial-gradient(circle at 60% 40%, var(--gold-light) 0%, var(--gold-light) 60%, transparent 62%);
}
.hero__watch-wrap--fallback .hero__watch-fallback { display: block; }

/* ============ TRUST STRIP ============ */
.trust {
  margin: -18px 20px 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 8px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  box-shadow: var(--shadow-md);
  position: relative;
  z-index: 3;
}

.trust__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 0 6px;
  /* min-width:0 lets the grid item shrink to its column instead of pushing
     past it (default min-width:auto = content-width, which clipped Insured
     Delivery on the right edge before this fix). */
  min-width: 0;
}
.trust__text { min-width: 0; }

.trust__item + .trust__item { border-left: 1px solid var(--border); }

.trust__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  background: rgba(169, 138, 63, 0.10);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-top: 0;
}

.trust__title {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  letter-spacing: 0.2px;
}

.trust__desc {
  font-size: 8.5px;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.4;
  font-weight: 400;
}

/* ============ SECTION ============ */
.section {
  padding: 28px 0 4px;
}

.section--featured { padding-bottom: 8px; }

.section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px 16px;
}

.section__title {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 2.4px;
  color: var(--text);
  text-transform: uppercase;
}

.section__link {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 1.6px;
  display: flex;
  align-items: center;
  gap: 4px;
  text-transform: uppercase;
}
.section__link span { font-size: 12px; line-height: 1; }
.section__link:hover { color: var(--gold-rich); }

/* ============ MODELS — horizontally scrollable circular tiles ============ */
.models-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 22px 4px;
}
.models-scroll::-webkit-scrollbar { display: none; }

.models {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 12px;
  min-width: 100%;
}

@media (max-width: 380px) {
  .models {
    /* Columns at least 60px (so they don't get unreadably small on tiny
       screens) but flex to 1fr so the 4 circles distribute evenly across
       the available width — keeps the row visually centered with the same
       margins as every other block. */
    grid-auto-columns: minmax(60px, 1fr);
  }
}

.model {
  text-align: center;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.model:active { transform: scale(0.97); }

.model__img-wrap {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--border);
  margin-bottom: 10px;
  box-shadow: var(--shadow-xs), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  overflow: hidden;
  position: relative;
}

.model__img {
  /* Browse-by-Model circles read as close-up dial thumbnails. Sources are
     NORMALIZED renders (uniform 1000x1000 canvas, watch height 88%, dial
     center at y~41%), so one scale + one shift produces the identical
     dial-filling crop for every model. The wrapper clips to a circle. */
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: translateY(15.4%) scale(1.75);
  border-radius: 50%;
}

/* Inline SVG fallback fills container when no real image */
.model__fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14%;
}
.model__fallback svg { width: 100%; height: 100%; }

.model__name {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.6px;
  color: var(--text);
  text-transform: uppercase;
}

.model__count {
  font-size: 8.5px;
  color: var(--muted);
  margin-top: 4px;
  font-weight: 500;
  letter-spacing: 0.4px;
}

/* ============ WATCHES GRID — minimal marketplace style ============ */
.watches {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 0 20px;
}

.watch {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.watch:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}
.watch:active { transform: scale(0.99); }

.watch__img-wrap {
  width: 100%;
  /* Image area shortened ~12.5% vs square (8/7 ≈ 1.143) for a more compact card.
     Card height is unchanged — this aspect-ratio stays the same. */
  aspect-ratio: 8 / 7;
  overflow: hidden;
  background: linear-gradient(180deg, #FBF6E8 0%, #F4ECD3 100%);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 2%;
  overflow: hidden;
}

.watch__img {
  /* Sources are NORMALIZED renders: content trimmed and re-centered on a
     uniform square canvas (watch height 88%). Plain contain + center gives
     every card the identical watch size and equal top/bottom margins, with
     the full bracelet always inside the frame. No scale hacks needed. */
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.08));
}

.watch__fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6%;
}
.watch__fallback svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.08));
}

.watch__body {
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.watch__model {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  color: var(--text);
  text-transform: uppercase;
}

.watch__ref {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-top: 4px;
  letter-spacing: 0.2px;
}

.watch__meta {
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 6px;
  font-weight: 500;
  letter-spacing: 0.2px;
}

.watch__set {
  font-size: 10.5px;
  color: var(--gold);
  margin-top: 3px;
  font-weight: 600;
  letter-spacing: 0.4px;
}

.watch__price {
  /* Montserrat with tabular-nums so all four prices line up evenly.
     Deep brand green ties the price visually to the CTA buttons and
     keeps the card palette cohesive. */
  font-family: var(--font-montserrat);
  font-size: 16px;
  font-weight: 500;
  color: var(--green-deep);
  margin-top: 10px;
  letter-spacing: 0.2px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ============ BOTTOM CTA ============ */
.bottom-cta-wrap {
  padding: 28px 20px 32px;
}

/* ============ FOOTER ============ */
.footer {
  margin: 0 20px;
  padding: 28px 0 32px;
  border-top: 1px solid var(--border);
  text-align: center;
}

.footer__brand {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--text);
  text-transform: uppercase;
}

.footer__tagline {
  margin-top: 4px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--gold);
}

.footer__locations {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.footer__loc {
  background: var(--card-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
}

.footer__loc-city {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--gold);
  text-transform: uppercase;
  transition: color 0.15s ease;
}
a.footer__loc-city:hover { color: var(--gold-rich); }
a.footer__loc-city:hover .footer__loc-arrow { transform: translateX(2px); }
.footer__loc-arrow {
  display: inline-block;
  font-size: 11px;
  line-height: 1;
  transition: transform 0.15s ease;
}

.footer__loc-addr {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.45;
}

.footer__loc-hours {
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.2px;
}

.footer__loc-phone {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--font-montserrat);
  font-size: 15px;
  font-weight: 500;
  color: var(--green);
  letter-spacing: 0.4px;
  /* Tabular numerals so all three location numbers line up evenly. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.footer__loc-phone:hover { color: var(--green-soft); }

.footer__contact-row {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.footer__contact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-soft);
  letter-spacing: 0.2px;
}
.footer__contact svg { color: var(--green); flex-shrink: 0; }
.footer__contact:hover { color: var(--text); }

.footer__disclaimer {
  margin-top: 22px;
  padding: 14px;
  background: var(--card-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 10.5px;
  line-height: 1.55;
  color: var(--text-soft);
  text-align: left;
}
.footer__disclaimer em { font-family: var(--font-serif); font-style: italic; }
.footer__disclaimer strong { color: var(--text); font-weight: 600; }

.footer__copy {
  margin-top: 14px;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.4px;
}

/* Mobile-only spacing tweaks for footer locations
   (the city cards needed a touch more breathing room
   between cards on mobile only. Contact info and disclaimer copy are
   unchanged. */
@media (max-width: 767px) {
  .footer__locations {
    margin-top: 18px;
    gap: 12px;
  }
  .footer__loc {
    padding: 10px 12px;
  }
  .footer__loc-addr { margin-top: 6px; }
  .footer__loc-hours { margin-top: 4px; }
  .footer__loc-phone { margin-top: 6px; }
}

/* ============ DESKTOP ============ */
@media (min-width: 768px) {
  body { background: #ECE6D6; }

  .page {
    margin: 30px auto;
    border-radius: var(--radius-xl);
    overflow: hidden;
    min-height: auto;
    box-shadow: var(--shadow-lg);
  }
}

/* ============ PRODUCT DETAIL SHEET ============ */
.psheet {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
}
.psheet[aria-hidden="false"] { display: block; }

.psheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 16, 8, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.psheet[aria-hidden="false"] .psheet__backdrop { opacity: 1; }

.psheet__panel {
  position: absolute;
  inset: 0;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.22s ease;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}
.psheet[aria-hidden="false"] .psheet__panel {
  transform: translateY(0);
  opacity: 1;
}

/* ----- top bar ----- */
.psheet__topbar {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  gap: 12px;
  padding: 14px 18px 12px;
  background: var(--bg);
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
}
.psheet__close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  border-radius: 50%;
  transition: background 0.15s ease;
}
.psheet__close:hover,
.psheet__close:focus-visible {
  background: rgba(169, 138, 63, 0.12);
  outline: none;
}
.psheet__brand {
  text-align: center;
  text-decoration: none;
  color: inherit;
  display: block;
  cursor: pointer;
}
.psheet__brand:hover .header__subtitle { opacity: 0.85; }
/* The product sheet uses the same compact "PRE-OWNED ROLEX MARKETPLACE"
   subtitle as the header — styles for it live under .header__subtitle. */
.psheet__phone {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green);
  border-radius: 50%;
  background: rgba(31, 94, 72, 0.08);
}

/* ----- scroll body ----- */
.psheet__scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.psheet__body {
  padding: 18px 18px 32px;
  /* Product sheet content uses Montserrat for cleaner, more even typography
     (especially numerals in the price). Header brand lockup is outside this
     container and keeps its existing styling. */
  font-family: var(--font-montserrat);
}

/* ----- gallery ----- */
.psheet__gallery {
  background: linear-gradient(180deg, #FBF6E8 0%, #F4ECD3 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow-sm);
}
.psheet__main-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: pan-y; /* allow vertical page scroll, capture horizontal swipe */
  user-select: none;
  -webkit-user-select: none;
}
.psheet__main-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 24px rgba(40, 30, 10, 0.14));
  cursor: zoom-in;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

/* ----- prev / next arrow buttons (mobile + desktop) ----- */
.psheet__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(20, 63, 48, 0.18);
  background: rgba(255, 252, 245, 0.92);
  color: var(--green-deep, #143F30);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(40, 30, 10, 0.14);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
  z-index: 2;
  padding: 0;
}
.psheet__nav--prev { left: 8px; }
.psheet__nav--next { right: 8px; }
.psheet__nav:hover {
  background: #FFF;
  box-shadow: 0 6px 16px rgba(40, 30, 10, 0.20);
}
.psheet__nav:active { transform: translateY(-50%) scale(0.94); }
.psheet__nav:focus-visible {
  outline: 2px solid var(--gold, #A98A3F);
  outline-offset: 2px;
}
@media (min-width: 768px) {
  .psheet__nav { width: 44px; height: 44px; }
  .psheet__nav--prev { left: 12px; }
  .psheet__nav--next { right: 12px; }
}

/* ----- zoom overlay ----- */
.psheet__zoom {
  position: fixed;
  inset: 0;
  background: rgba(15, 28, 22, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.psheet__zoom[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
}
.psheet__zoom-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}
.psheet__zoom-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(20, 28, 22, 0.55);
  color: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
  padding: 0;
}
.psheet__zoom-close:hover { background: rgba(20, 28, 22, 0.85); }
.psheet__zoom-close:active { transform: scale(0.94); }
@media (min-width: 768px) {
  .psheet__zoom-img { max-height: 92vh; max-width: 92vw; }
  .psheet__zoom-close { top: 24px; right: 24px; }
}
body.psheet-zoom-open { overflow: hidden; }
.psheet__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 14px;
}
.psheet__thumb {
  aspect-ratio: 1 / 1;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.1s ease;
}
.psheet__thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.psheet__thumb:hover { border-color: var(--gold-soft); }
.psheet__thumb:active { transform: scale(0.97); }
.psheet__thumb.is-active {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold) inset;
}

/* ----- summary ----- */
.psheet__summary { margin-top: 22px; }
.psheet__title {
  font-family: var(--font-montserrat);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  color: var(--green-deep);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.psheet__ref {
  margin-top: 6px;
  font-family: var(--font-montserrat);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.4px;
  color: var(--muted);
  text-transform: uppercase;
}
.psheet__price {
  margin-top: 14px;
  font-family: var(--font-montserrat);
  font-weight: 700;
  font-size: 22px;
  color: var(--green-deep);
  letter-spacing: 0.2px;
  /* Tabular numerals so all prices line up consistently across products. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.psheet__meta-row {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-soft);
  letter-spacing: 0.3px;
}
.psheet__meta-row span + span::before {
  content: " · ";
  color: var(--muted-soft);
  margin: 0 2px;
}

/* ----- description ----- */
.psheet__desc {
  margin-top: 18px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-soft);
}

/* ----- CTAs ----- */
.psheet__ctas {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.psheet__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 22px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.9px;
  border-radius: var(--radius-md);
  text-transform: uppercase;
  transition: transform 0.1s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.psheet__cta--primary {
  background: var(--gradient-green);
  color: #FBF6E8;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.psheet__cta--primary:hover { box-shadow: var(--shadow-md); }
.psheet__cta--primary:active { transform: scale(0.99); }
.psheet__cta--secondary {
  background: var(--card);
  color: var(--green-deep);
  border: 1.5px solid var(--gold);
}
.psheet__cta--secondary:hover { background: var(--card-soft); }
.psheet__cta--tertiary {
  background: transparent;
  color: var(--green-deep);
  border: 1.5px solid var(--gold-soft);
}
.psheet__cta--tertiary:hover { background: rgba(255, 252, 244, 0.5); }

/* ----- section blocks ----- */
.psheet__section {
  margin-top: 26px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px;
  box-shadow: var(--shadow-xs);
}
.psheet__section-title {
  font-family: var(--font-montserrat);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--gold);
  text-transform: uppercase;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 14px;
}

/* ----- product details grid ----- */
.psheet__specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
}
.psheet__spec-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.4px;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 3px;
}
.psheet__spec-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.35;
}

/* ----- included set ----- */
.psheet__set {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.psheet__set-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
  color: var(--text);
  padding: 6px 0;
  border-bottom: 1px solid var(--border-soft);
}
.psheet__set-row:last-child { border-bottom: none; }
.psheet__set-label { color: var(--text-soft); letter-spacing: 0.2px; }
.psheet__set-value {
  font-weight: 600;
  letter-spacing: 0.4px;
  font-size: 11.5px;
}
.psheet__set-value--yes { color: var(--green); }
.psheet__set-value--no { color: var(--muted); }
.psheet__set-value--neutral { color: var(--gold); font-weight: 700; }
.psheet__set-notes {
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.55;
  font-style: italic;
}

/* ----- auth & delivery steps ----- */
.psheet__steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.psheet__step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.psheet__step-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gradient-green);
  color: #FBF6E8;
  font-family: var(--font-montserrat);
  font-weight: 600;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.psheet__step-text {
  font-size: 13px;
  color: var(--text);
  line-height: 1.4;
  padding-top: 4px;
}
.psheet__step-note {
  margin-top: 14px;
  font-size: 11.5px;
  color: var(--muted);
  font-style: italic;
  line-height: 1.5;
  padding: 10px 12px;
  background: var(--card-soft);
  border-left: 2px solid var(--gold-soft);
  border-radius: 0 6px 6px 0;
}

/* ----- returns ----- */
.psheet__returns-text {
  font-size: 12.5px;
  color: var(--text-soft);
  line-height: 1.6;
}

/* ----- need help ----- */
.psheet__help {
  margin-top: 26px;
  text-align: center;
  padding: 24px 18px;
  background: var(--card-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.psheet__help-title {
  font-family: var(--font-montserrat);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--gold);
  text-transform: uppercase;
}
.psheet__help-sub {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--text-soft);
}
.psheet__help-phone {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--font-montserrat);
  font-size: 20px;
  font-weight: 700;
  color: var(--green-deep);
  letter-spacing: 0.6px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
/* "or" connector between the phone number and the chat button */
.psheet__help-or {
  margin-top: 12px;
  font-family: var(--font-montserrat);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: lowercase;
  color: var(--muted);
}
/* Chat button — the same noble green as REQUEST THIS WATCH, but airy: a green
   outline on a faint tint rather than a solid fill. */
.psheet__help-whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 10px;
  padding: 13px 18px;
  border-radius: var(--radius-md);
  background: rgba(31, 94, 72, 0.05);
  border: 1.5px solid var(--green);
  color: var(--green-deep);
  font-family: var(--font-montserrat);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  transition: transform 0.1s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.psheet__help-whatsapp svg { flex-shrink: 0; color: var(--green); }
.psheet__help-whatsapp:hover {
  background: rgba(31, 94, 72, 0.10);
  border-color: var(--green-deep);
  box-shadow: 0 2px 10px rgba(31, 94, 72, 0.12);
}
.psheet__help-whatsapp:active { transform: scale(0.99); }

/* ----- desktop adjustments ----- */
@media (min-width: 768px) {
  .psheet__panel {
    position: absolute;
    inset: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% + 20px));
    width: 480px;
    max-height: calc(100vh - 60px);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
  }
  .psheet[aria-hidden="false"] .psheet__panel {
    transform: translate(-50%, -50%);
  }
}

/* lock body scroll while sheet is open */
body.psheet-open {
  overflow: hidden;
  touch-action: none;
}

/* ============ SUBPAGES (shop / sell / locations / policies / contact) ============ */
.subpage {
  padding: 12px 22px 24px;
}
.subpage__lead {
  margin-top: 6px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.subpage__eyebrow {
  font-family: var(--font-montserrat);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.4px;
  color: var(--gold);
  text-transform: uppercase;
}
.subpage__title {
  margin-top: 8px;
  font-family: var(--font-montserrat);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: 0.4px;
  color: var(--green-deep);
}
.subpage__intro {
  margin-top: 14px;
  font-family: var(--font-montserrat);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-soft);
}
.subpage__intro a { color: var(--green); border-bottom: 1px solid var(--gold-soft); }

.subpage__cta-row {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.subpage__cta-row .btn {
  flex: 1 1 calc(50% - 5px);
  min-width: 140px;
  padding: 14px 16px;
  font-size: 10.5px;
  letter-spacing: 1.6px;
}

.subpage__section {
  margin-top: 22px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px 22px 24px;
  box-shadow: var(--shadow-xs);
}
.subpage__section-title {
  font-family: var(--font-montserrat);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--gold);
  text-transform: uppercase;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 14px;
}
.subpage__section p,
.subpage__section li {
  font-family: var(--font-montserrat);
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-soft);
}
.subpage__section p + p { margin-top: 10px; }

.subpage__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.subpage__list li {
  position: relative;
  padding-left: 22px;
  color: var(--text);
}
.subpage__list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gradient-green);
  box-shadow: 0 0 0 3px rgba(31, 94, 72, 0.08);
}

/* ----- location page address card ----- */
.locinfo {
  display: grid;
  gap: 12px;
}
.locinfo__row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-family: var(--font-montserrat);
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.5;
}
.locinfo__row svg {
  flex-shrink: 0;
  color: var(--green);
  margin-top: 2px;
}
.locinfo__phone {
  font-weight: 600;
  font-size: 16px;
  color: var(--green-deep);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: 0.4px;
}

/* ----- form ----- */
.form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Allow grid/flex columns to shrink narrower than the input's intrinsic
     content size — without this, placeholder text pushes the column past
     its 1fr share and the field overflows the page on mobile. */
  min-width: 0;
}
/* In a 2-column .form__row where one label wraps to 2 lines and the other
   stays on 1, push the input to the bottom of its cell so both inputs in
   the row line up regardless of label height. */
.form__field > .form__input,
.form__field > .form__textarea,
.form__field > .form__select {
  margin-top: auto;
}
.form__label {
  font-family: var(--font-montserrat);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.6px;
  color: var(--muted);
  text-transform: uppercase;
}
.form__input,
.form__textarea,
.form__select {
  width: 100%;
  font-family: var(--font-montserrat);
  font-size: 14px;
  color: var(--text);
  padding: 12px 14px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.form__input:focus,
.form__textarea:focus,
.form__select:focus {
  border-color: var(--gold);
  background: var(--card);
}
.form__textarea { resize: vertical; min-height: 90px; }
.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.form__submit {
  margin-top: 6px;
  padding: 16px 22px;
  font-size: 11px;
  letter-spacing: 1.9px;
}
.form__success {
  display: none;
  padding: 18px;
  background: var(--card-soft);
  border: 1px solid var(--gold-soft);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--green-deep);
  text-align: center;
}
.form--submitted .form { display: none; }
.form--submitted .form__success { display: block; }

/* ----- shop catalog header ----- */
.shop__filter {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.shop__search {
  flex: 1;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0 14px;
  height: 44px;
  display: flex;
  align-items: center;
  box-shadow: var(--shadow-xs);
}
.shop__search input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-montserrat);
  font-size: 13px;
  color: var(--text);
}
.shop__search input::placeholder { color: var(--muted); }
.shop__search svg { color: var(--muted); margin-right: 10px; flex-shrink: 0; }
.shop__count {
  margin-top: 12px;
  font-family: var(--font-montserrat);
  font-size: 11px;
  letter-spacing: 1.6px;
  color: var(--muted);
  text-transform: uppercase;
}

/* ============ LOCATION PAGES (GMB landing) ============ */

/* ----- hero image card ----- */
.loc-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--gradient-cream);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  margin-bottom: 18px;
}
.loc-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.loc-hero__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px 24px 22px;
  background: linear-gradient(180deg, transparent 35%, rgba(20, 16, 8, 0.55) 100%);
  pointer-events: none;
}
.loc-hero__eyebrow {
  font-family: var(--font-montserrat);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.2px;
  color: var(--gold-light);
  text-transform: uppercase;
}
.loc-hero__title {
  margin-top: 6px;
  font-family: var(--font-montserrat);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: 0.4px;
  color: #FBF6E8;
  text-transform: uppercase;
}

/* ----- 2x2 CTA tiles -----
   Premium icon-led tile grid: all 4 actions get equal visual weight.
   Icon colour distinguishes type (green = direct comms, gold = transactional).
   Replaces the old green-vs-outline button mix that felt unbalanced. */
.loc-cta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 10px;
  margin-top: 18px;
}
.loc-cta-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  /* Deep brand green for all 4 tiles — same as the hero CTA. Removes
     the white-vs-outline split and pulls the action group into one
     visually unified premium block. */
  background: var(--gradient-green);
  border: 1px solid rgba(212, 184, 106, 0.22);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  text-align: left;
  min-height: 68px;
  /* Force grid items to share 1fr equally — without this the longer
     labels expand the column past its share. */
  min-width: 0;
  overflow: hidden;
  transition: transform 0.1s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.loc-cta-tile:hover {
  border-color: var(--gold-light);
  box-shadow: var(--shadow-md);
}
.loc-cta-tile:active { transform: scale(0.99); }
.loc-cta-tile__icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Subtle warm-gold tinted circle on the green tile — Rolex dial vibe. */
  background: rgba(212, 184, 106, 0.18);
  border: 1px solid rgba(212, 184, 106, 0.35);
}
/* Communication actions (call/directions) get an ivory icon stroke for
   high-contrast readability. */
.loc-cta-tile__icon--green {
  color: #FBF6E8;
}
/* Transaction actions (request/sell or trade) get a warm gold stroke
   to subtly mark the difference. */
.loc-cta-tile__icon--gold {
  color: var(--gold-light);
}
.loc-cta-tile__label {
  font-family: var(--font-montserrat);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: #FBF6E8;
  text-transform: uppercase;
  line-height: 1.3;
  min-width: 0;
}

/* ----- intro lead paragraphs (subpage__lead extension) ----- */
.loc-intro p + p { margin-top: 12px; }

/* ----- services 2x2 ----- */
.loc-services {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Equal-height rows so service cards line up even when their copy is
     a different length. */
  grid-auto-rows: 1fr;
  gap: 10px;
}
.loc-service-card {
  background: var(--card-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Same as .loc-cta-tile — without min-width:0 the longer card content
     expands the column past its 1fr share. */
  min-width: 0;
}
.loc-service-card__icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(169, 138, 63, 0.10);
  border: 1px solid var(--border);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.loc-service-card__title {
  font-family: var(--font-montserrat);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: var(--text);
  text-transform: uppercase;
  line-height: 1.25;
}
.loc-service-card__text {
  font-family: var(--font-montserrat);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-soft);
}

/* ----- numbered steps (mirrors product sheet pattern but standalone) ----- */
.loc-steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.loc-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.loc-step__num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gradient-green);
  color: #FBF6E8;
  font-family: var(--font-montserrat);
  font-weight: 600;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.loc-step__text {
  font-family: var(--font-montserrat);
  font-size: 13px;
  color: var(--text);
  line-height: 1.45;
  padding-top: 4px;
}
.loc-steps-note {
  margin-top: 16px;
  font-family: var(--font-montserrat);
  font-size: 11.5px;
  color: var(--muted);
  font-style: italic;
  line-height: 1.55;
  padding: 10px 12px;
  background: var(--card-soft);
  border-left: 2px solid var(--gold-soft);
  border-radius: 0 6px 6px 0;
}

/* ----- prominent address card ----- */
.loc-address {
  background: var(--gradient-cream);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 22px;
  box-shadow: var(--shadow-sm);
}
.loc-address__city {
  font-family: var(--font-montserrat);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.2px;
  color: var(--gold);
  text-transform: uppercase;
}
.loc-address__row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 14px;
  font-family: var(--font-montserrat);
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.5;
}
.loc-address__row svg {
  flex-shrink: 0;
  color: var(--green);
  margin-top: 2px;
}
.loc-address__phone {
  font-family: var(--font-montserrat);
  font-weight: 600;
  font-size: 17px;
  color: var(--green-deep);
  letter-spacing: 0.4px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.loc-address__directions {
  margin-top: 16px;
  width: 100%;
}

/* ----- nearby areas ----- */
.loc-nearby {
  font-family: var(--font-montserrat);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-soft);
}

/* ----- FAQ (using <details>) ----- */
.loc-faq {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.loc-faq__item {
  border-bottom: 1px solid var(--border-soft);
  padding: 4px 0;
}
.loc-faq__item:last-child { border-bottom: none; }
.loc-faq__item summary {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  list-style: none;
  cursor: pointer;
  padding: 12px 0;
  font-family: var(--font-montserrat);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.1px;
  line-height: 1.4;
}
.loc-faq__item summary::-webkit-details-marker { display: none; }
.loc-faq__item summary::after {
  content: "+";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 400;
  color: var(--gold);
  transition: transform 0.2s ease;
}
.loc-faq__item[open] summary::after { content: "−"; }
.loc-faq__item p {
  font-family: var(--font-montserrat);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-soft);
  padding: 0 0 14px;
}

/* ============ SHOP CATALOG (filters, chips, selects, empty state) ============ */
.shop-controls {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* search input — bigger and more prominent on /shop than the homepage
   variant. Full-width with comfortable padding so it doesn't feel cramped.
   `flex: 0 0 auto` overrides the homepage `flex: 1` rule (which collapses
   the height in this column-flex container down to content size). */
.shop-controls .shop__search {
  flex: 0 0 auto;
  margin: 0;
  width: 100%;
  height: 52px;
  padding: 0 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-xs);
}
.shop-controls .shop__search svg {
  margin-right: 0;
  color: var(--muted);
  flex-shrink: 0;
}
.shop-controls .shop__search input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-montserrat);
  font-size: 14px;
  color: var(--text);
  border: none;
  outline: none;
  background: transparent;
  letter-spacing: 0.1px;
}
.shop-controls .shop__search input::placeholder {
  color: var(--muted);
}

.shop-filter-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.shop-filter-label {
  font-family: var(--font-montserrat);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.6px;
  color: var(--muted);
  text-transform: uppercase;
  /* Indent label to align with the dropdown's inner text (matches the
     14px horizontal padding inside .shop-select). */
  padding-left: 14px;
}

/* Collection chip strip — horizontally scrollable on mobile */
.shop-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
  /* Bleed slightly so chips can scroll past the section padding edge */
  margin: 0 -22px;
  padding-left: 22px;
  padding-right: 22px;
}
.shop-chips::-webkit-scrollbar { display: none; }

.shop-chip {
  flex-shrink: 0;
  padding: 9px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-montserrat);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  color: var(--text-soft);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.shop-chip:hover {
  border-color: var(--gold-soft);
  color: var(--text);
}
.shop-chip.is-active {
  background: var(--gradient-green);
  border-color: var(--green-deep);
  color: #FBF6E8;
  box-shadow: var(--shadow-sm);
}

/* Two-column row of selects */
.shop-filter-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.shop-select {
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--font-montserrat);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  padding: 12px 36px 12px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
  cursor: pointer;
  /* Custom caret using inline SVG */
  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='%23A98A3F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.shop-select:focus,
.shop-select:hover {
  border-color: var(--gold-soft);
}
.shop-select.is-active {
  border-color: var(--gold);
  background-color: var(--bg-soft);
}

.shop-reset {
  align-self: flex-start;
  padding: 8px 14px;
  font-family: var(--font-montserrat);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: var(--green-deep);
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--gold-soft);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.shop-reset:hover {
  background: var(--card-soft);
  border-color: var(--gold);
}

.shop-count {
  margin-top: 22px;
  /* Align count text with the filter labels above it (both indented 14px
     to match the dropdown text alignment). */
  padding: 0 14px;
  font-family: var(--font-montserrat);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.6px;
  color: var(--muted);
  text-transform: uppercase;
}

/* Empty state */
.shop-empty {
  margin: 8px 20px 0;
  padding: 36px 24px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.shop-empty__title {
  font-family: var(--font-montserrat);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.25;
  color: var(--green-deep);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.shop-empty__text {
  margin-top: 14px;
  font-family: var(--font-montserrat);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-soft);
}
.shop-empty__cta {
  margin-top: 20px;
  display: inline-flex;
  padding: 14px 24px;
  font-size: 11px;
  letter-spacing: 1.6px;
}

/* ============ BTN SHIMMER (luxury accent CTA) ============
   Used on the /shop "Sell Your Rolex" CTA so it reads as more
   eye-catching than a plain outline button. Periodic gold light
   sweep — like a reflection on a Rolex dial — without being noisy. */
.btn--shimmer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* Slight warm gradient fill so the shimmer has something premium
     to sweep over (vs flat ivory). */
  background: linear-gradient(135deg, var(--card) 0%, var(--bg-soft) 100%);
  border: 1.5px solid var(--gold);
  box-shadow: var(--shadow-sm), 0 0 0 1px rgba(212, 184, 106, 0.18) inset;
  transition: box-shadow 0.2s ease, transform 0.1s ease;
}
.btn--shimmer:hover {
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(212, 184, 106, 0.32) inset;
}
.btn--shimmer .btn__inner {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--green-deep);
}
.btn--shimmer .btn__shine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(212, 184, 106, 0.55) 50%,
    transparent 100%
  );
  transform: skewX(-22deg);
  pointer-events: none;
  z-index: 1;
  animation: btnShimmerSweep 4.5s ease-in-out infinite;
}
@keyframes btnShimmerSweep {
  0%, 55% { left: -60%; opacity: 0; }
  60%     { opacity: 1; }
  100%    { left: 160%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .btn--shimmer .btn__shine { animation: none; }
}

/* ============ FORM PHOTO UPLOAD (sell-my-rolex) ============ */
.form__file-input {
  /* Visually hidden but still accessible — the .form__file-drop label
     is the visible/clickable element. */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.form__file-drop {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px;
  background: var(--bg-soft);
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.form__file-drop:hover,
.form__file-input:focus + .form__file-drop {
  border-color: var(--gold);
  background: var(--card);
}
.form__file-drop svg {
  flex-shrink: 0;
  color: var(--gold);
}
.form__file-drop-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.form__file-drop-title {
  font-family: var(--font-montserrat);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--green-deep);
  text-transform: uppercase;
}
.form__file-drop-hint {
  font-family: var(--font-montserrat);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.2px;
}
.form__file-drop--has-files {
  border-style: solid;
  border-color: var(--gold);
  background: var(--card);
}
.form__file-preview {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.form__file-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  min-width: 0;
}
.form__file-item img {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 6px;
  background: var(--bg-soft);
}
.form__file-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.form__file-name {
  font-family: var(--font-montserrat);
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.form__file-size {
  font-family: var(--font-montserrat);
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: 0.4px;
}
.form__success a {
  color: var(--green);
  font-weight: 600;
  border-bottom: 1px solid var(--gold-soft);
}

/* ============ SITE MENU (hamburger drawer) ============
   Premium left-side drawer with warm ivory bg, deep green CTAs,
   muted gold section labels. Slides in from left on mobile and
   desktop. Click hamburger ≡ icon to open. */
.site-menu {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: none;
}
.site-menu[aria-hidden="false"] { display: block; }
.site-menu__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 16, 8, 0.45);
  opacity: 0;
  transition: opacity 0.22s ease;
}
.site-menu[aria-hidden="false"] .site-menu__backdrop { opacity: 1; }
.site-menu__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(360px, 88vw);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: var(--shadow-lg);
}
.site-menu[aria-hidden="false"] .site-menu__panel {
  transform: translateX(0);
}

/* ----- top bar ----- */
.site-menu__top {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: 14px;
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
}
.site-menu__close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  border-radius: 50%;
  transition: background 0.15s ease;
}
.site-menu__close:hover,
.site-menu__close:focus-visible {
  background: rgba(169, 138, 63, 0.12);
  outline: none;
}
.site-menu__brand-1 {
  font-family: var(--font-montserrat);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2.2px;
  color: var(--text);
  text-transform: uppercase;
}
.site-menu__brand-2 {
  margin-top: 2px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--gold);
}

/* ----- top CTA row ----- */
.site-menu__cta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 16px 20px 4px;
  flex-shrink: 0;
}
.site-menu__cta-row .btn {
  padding: 12px 16px;
  font-size: 10.5px;
  letter-spacing: 1.4px;
  min-width: 0;
}

/* ----- scroll body ----- */
.site-menu__scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 20px 24px;
}

/* ----- sections ----- */
.site-menu__section {
  margin-top: 18px;
}
.site-menu__section:first-child { margin-top: 4px; }
.site-menu__section-title {
  font-family: var(--font-montserrat);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--gold);
  text-transform: uppercase;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 6px;
}

/* ----- link list ----- */
.site-menu__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.site-menu__list li { margin: 0; }
.site-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 4px;
  font-family: var(--font-montserrat);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.2px;
  color: var(--text);
  border-bottom: 1px solid var(--border-soft);
  transition: color 0.15s ease, padding-left 0.15s ease;
}
.site-menu__link:last-child { border-bottom: none; }
.site-menu__link:hover {
  color: var(--green-deep);
  padding-left: 8px;
}
.site-menu__link::after {
  content: "›";
  font-size: 16px;
  font-weight: 400;
  color: var(--muted-soft);
  transition: color 0.15s ease, transform 0.15s ease;
}
.site-menu__link:hover::after {
  color: var(--gold);
  transform: translateX(2px);
}

/* ----- contact block ----- */
.site-menu__contact {
  margin-top: 22px;
  padding: 16px;
  background: var(--card-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.site-menu__contact-title {
  font-family: var(--font-montserrat);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.site-menu__contact a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-family: var(--font-montserrat);
  font-size: 12.5px;
  color: var(--text-soft);
  border-bottom: 1px dashed var(--border-soft);
}
.site-menu__contact a:last-child { border-bottom: none; }
.site-menu__contact a:hover { color: var(--green-deep); }
.site-menu__contact a svg {
  flex-shrink: 0;
  color: var(--green);
}

/* ----- disclaimer ----- */
.site-menu__disclaimer {
  margin-top: 18px;
  padding: 0 4px;
  font-family: var(--font-montserrat);
  font-size: 10px;
  line-height: 1.55;
  color: var(--muted);
  letter-spacing: 0.1px;
}

/* lock body scroll while menu is open */
body.site-menu-open {
  overflow: hidden;
  touch-action: none;
}

/* ============================================================
   COLLECTION LANDING PAGES
   /collections/<slug>/ — premium SEO landing pages.
   Reuses .subpage / .subpage__section / .btn from the policy
   pages; only genuinely new components live here.
   ============================================================ */

.collection-page .subpage__title { font-size: 24px; line-height: 1.2; }

/* ----- snapshot 4-card row ----- */
.collection-snapshot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 6px;
  /* Equal-height rows so 1-line and 3-line cells align top + bottom. */
  grid-auto-rows: 1fr;
}
.collection-snap {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 12px 14px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.collection-snap__label {
  font-family: var(--font-montserrat);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.collection-snap__value {
  font-family: var(--font-montserrat);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

/* ----- popular reference chips ----- */
.collection-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.collection-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 999px;
  font-family: var(--font-montserrat);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--text);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
  cursor: pointer;
}
.collection-chip:hover { border-color: var(--gold); background: rgba(169, 138, 63, 0.06); }
.collection-chip:active { transform: scale(0.97); }
.collection-chips__note {
  margin-top: 12px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

/* ----- "Why buy" 4-card grid ----- */
.collection-why {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 4px;
}
.collection-why__card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}
.collection-why__title {
  font-family: var(--font-montserrat);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.4px;
  color: var(--green);
  margin-bottom: 6px;
}
.collection-why__card p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-soft);
  margin: 0;
}

/* ----- FAQ — uses native <details> ----- */
.collection-faq details {
  border-top: 1px solid var(--border);
  padding: 14px 0;
}
.collection-faq details:last-child { border-bottom: 1px solid var(--border); }
.collection-faq summary {
  font-family: var(--font-montserrat);
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 28px;
  line-height: 1.4;
}
.collection-faq summary::-webkit-details-marker { display: none; }
.collection-faq summary::after {
  content: '+';
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  font-weight: 400;
  color: var(--gold);
  transition: transform 0.15s ease;
}
.collection-faq details[open] summary::after { content: '−'; }
.collection-faq details p {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-soft);
}
.collection-faq details a { color: var(--green); border-bottom: 1px solid var(--gold-soft); text-decoration: none; }

/* ----- Related collections ----- */
.collection-related {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
  /* Equal-height rows so 1-line and 2-line names align cleanly. */
  grid-auto-rows: 1fr;
}
.collection-related__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s ease, transform 0.1s ease;
  min-width: 0;
  /* Reserve enough vertical space for 2 lines of name across all cards. */
  min-height: 56px;
}
.collection-related__card:hover { border-color: var(--gold); }
.collection-related__card:active { transform: scale(0.98); }
.collection-related__name {
  font-family: var(--font-montserrat);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.25;
}
.collection-related__arrow { color: var(--gold); font-size: 14px; flex-shrink: 0; }

/* ----- Available Watches grid (uses existing .watch card visuals) -----
   Auto-fit so a single card spans the row instead of leaving an empty
   half-column on the right; two or more cards still pair up cleanly.
   Override the .watches base padding (designed for homepage) since the
   parent subpage__section already supplies horizontal padding here. */
.collection-watches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 4px;
  padding: 0;
}
.collection-watches.collection-watches--empty { grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .collection-watches {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}

/* ----- Empty state ----- */
.collection-empty {
  background: var(--card);
  border: 1px dashed var(--gold-soft);
  border-radius: var(--radius-md);
  padding: 22px 14px 24px;
  text-align: center;
}
.collection-empty__title {
  font-family: var(--font-montserrat);
  font-weight: 700;
  font-size: 14px;
  color: var(--green);
  margin-bottom: 8px;
}
.collection-empty__sub {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-soft);
  margin: 0 0 16px;
}
.collection-empty .btn {
  /* Full width inside the empty-state card so long CTA copy fits one line. */
  display: flex;
  width: 100%;
  font-size: 10px;
  letter-spacing: 0.9px;
  padding: 14px 10px;
}

/* ----- All Rolex Collections index ----- */
/* All Rolex Collections — simplified tile: round image (or placeholder
   circle) on top, collection name below. No category, no arrow. */
.collection-index {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  grid-auto-rows: 1fr;
}
.collection-index__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 18px 12px 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
  min-width: 0;
}
.collection-index__card:hover {
  border-color: var(--gold);
  box-shadow: 0 4px 14px rgba(40, 30, 10, 0.08);
}
.collection-index__card:active { transform: scale(0.98); }

.collection-index__media {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(180deg, #FBF6E8 0%, #F4ECD3 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid rgba(169, 138, 63, 0.18);
}
.collection-index__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
  filter: drop-shadow(0 4px 10px rgba(40, 30, 10, 0.10));
}
/* Placeholder circle: gold-soft tinted, no image. */
.collection-index__media--placeholder {
  background: radial-gradient(circle at 35% 30%, #F8EFD0 0%, #E8D9A4 70%, #C9B26C 100%);
  position: relative;
}
.collection-index__media--placeholder::after {
  content: '';
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  border: 1px dashed rgba(169, 138, 63, 0.45);
  background: rgba(255, 252, 245, 0.55);
}

.collection-index__name {
  font-family: var(--font-montserrat);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--green);
  letter-spacing: 0.2px;
  text-align: center;
  line-height: 1.25;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
  margin-top: auto;
}

/* ============================================================
   COLLECTION PAGE — extra components added in revision pass
   Breadcrumbs · Trust strip · Concierge block · What Affects Price
   ============================================================ */
.collection-breadcrumbs {
  margin: 12px 20px 0;
  font-family: var(--font-montserrat);
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.collection-breadcrumbs a {
  color: var(--green);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.collection-breadcrumbs a:hover { border-bottom-color: var(--gold-soft); }
.collection-breadcrumbs__sep { margin: 0 6px; color: var(--gold); }
.collection-breadcrumbs__current { color: var(--text); }

/* ----- Collection trust strip — premium / luxury treatment -----
   Icons in soft gold "medallions" (circular, subtle gradient + ring),
   vertical hairline dividers between columns, generous breathing room.
   Three-row internal grid keeps icons / titles / subtitles on shared
   horizontal baselines across all 3 columns. */
.collection-trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* Modest gap so the gold hairline divider has its own space, but still
     leaves enough column width for AUTHENTICATED on a 375px viewport. */
  gap: 10px;
  margin: 6px 0 0;
  padding: 22px 10px 24px;
  background: linear-gradient(180deg, var(--card) 0%, #FBF6E8 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 2px rgba(40, 30, 10, 0.04);
}
.collection-trust__item {
  display: grid;
  grid-template-rows: 48px 28px auto;
  /* stretch so each grid item fills its row track — guarantees the title
     element is the full 28px tall (not just 1-line height), so the text
     bottom-aligns to the same baseline across all 3 columns. */
  align-items: stretch;
  justify-items: center;
  gap: 10px;
  text-align: center;
  min-width: 0;
  position: relative;
}
/* Hairline gold divider centred in the 10px gap (skipped on first child). */
.collection-trust__item + .collection-trust__item::before {
  content: "";
  position: absolute;
  left: -5px;          /* halfway across the 10px gap */
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(169, 138, 63, 0.28) 20%,
    rgba(169, 138, 63, 0.28) 80%,
    transparent 100%);
}
/* Gold medallion that holds the icon. */
.collection-trust__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-rich, #8a6a1e);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,
    #FBF1D2 0%,
    #F0DFA0 60%,
    #D9C175 100%);
  border: 1px solid rgba(169, 138, 63, 0.35);
  box-shadow:
    0 2px 4px rgba(40, 30, 10, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  flex-shrink: 0;
}
.collection-trust__icon svg {
  width: 22px;
  height: 22px;
  /* Slightly stronger stroke + drop-shadow for crisp luxury feel. */
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.45));
}
.collection-trust__title {
  font-family: var(--font-montserrat);
  /* Sized to fit "AUTHENTICATED" (13 chars) in ~80px column width on
     a 375px-wide viewport. */
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--green-deep, #143F30);
  line-height: 1.3;
  /* Bottom-align inside the 28px slot so 1-line titles sit on the same
     baseline as the second line of 2-line titles. */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  /* Defensive: never bleed into neighbouring column. */
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
  overflow: hidden;
  box-sizing: border-box;
}
.collection-trust__sub {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.4;
  width: 100%;
  font-weight: 500;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
  letter-spacing: 0.1px;
}

/* ----- "Different reference?" concierge block (below inventory) ----- */
.collection-concierge {
  margin-top: 14px;
  padding: 18px 18px 20px;
  background: linear-gradient(180deg, #FBF6E8 0%, #F4ECD3 100%);
  border: 1px solid var(--gold-soft);
  border-radius: var(--radius-md);
  text-align: center;
}
.collection-concierge__title {
  font-family: var(--font-montserrat);
  font-weight: 700;
  font-size: 14px;
  color: var(--green);
  margin-bottom: 6px;
}
.collection-concierge p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-soft);
  margin: 0 0 14px;
}
.collection-concierge .btn {
  /* Full width inside the concierge card so long CTA copy fits one line. */
  display: flex;
  width: 100%;
  font-size: 10.5px;
  letter-spacing: 1.2px;
  padding: 14px 12px;
}

/* ----- "What Affects Price" cards (collection page) ----- */
.collection-price-factors {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 4px;
}
.collection-price-factors__card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.collection-price-factors__title {
  font-family: var(--font-montserrat);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.4px;
  color: var(--green);
  margin-bottom: 4px;
}
.collection-price-factors__card p {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-soft);
  margin: 0;
}

/* ============================================================
   REQUEST AVAILABLE OPTIONS — modal
   Single instance mounted at <body> level by app.js.
   ============================================================ */
.reqmodal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.reqmodal[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
}
.reqmodal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 28, 22, 0.55);
}
.reqmodal__panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(440px, calc(100% - 24px));
  max-height: calc(100% - 24px);
  display: flex;
  flex-direction: column;
  background: var(--bg, #F4EEDD);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.30);
  overflow: hidden;
}
.reqmodal__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--card);
}
.reqmodal__title {
  margin: 0;
  font-family: var(--font-montserrat);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--green);
  text-transform: uppercase;
}
.reqmodal__close {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s ease;
}
.reqmodal__close:hover { background: rgba(20, 63, 48, 0.06); }

.reqmodal__scroll {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 18px 22px;
}
.reqmodal__intro {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-soft);
  margin: 0 0 14px;
}
.reqmodal__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* The form hides on submit via the [hidden] attribute. Without this override
   `display: flex` above would beat the UA stylesheet's [hidden]{display:none}
   and leave the filled form visible behind the success message. */
.reqmodal__form[hidden] { display: none !important; }
.reqmodal__row { display: flex; gap: 10px; min-width: 0; }
.reqmodal__row--two {
  /* Two-column grid where each cell stretches to row height. Each .field
     inside is itself a grid with `1fr auto`: label fills top, input pinned
     to bottom. Because both fields stretch to the same row height, both
     inputs land on the same baseline regardless of label line-count. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: stretch;
}
.reqmodal__row--two > .reqmodal__field {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 6px;
  min-width: 0;
}
.reqmodal__row--two > .reqmodal__field > .reqmodal__label {
  align-self: start;
}
.reqmodal__row--two > .reqmodal__field > input,
.reqmodal__row--two > .reqmodal__field > select,
.reqmodal__row--two > .reqmodal__field > textarea {
  align-self: end;
}
.reqmodal__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.reqmodal__label {
  font-family: var(--font-montserrat);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1.3;
  display: block;
}
.reqmodal__optional {
  font-weight: 500;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0.2px;
}
.reqmodal__form input,
.reqmodal__form select,
.reqmodal__form textarea {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 13px;
  font-family: var(--font-montserrat);
  color: var(--text);
  min-width: 0;
  width: 100%;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.reqmodal__form input:focus,
.reqmodal__form select:focus,
.reqmodal__form textarea:focus {
  border-color: rgba(31, 94, 72, 0.45);
  box-shadow: 0 0 0 3px rgba(31, 94, 72, 0.08);
}
.reqmodal__form input[readonly] {
  background: rgba(169, 138, 63, 0.06);
  color: var(--green);
  font-weight: 600;
}
.reqmodal__form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A98A3F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  padding-right: 32px;
}
.reqmodal__form textarea { resize: vertical; min-height: 70px; }
.reqmodal__submit { width: 100%; margin-top: 4px; }
.reqmodal__fallback {
  margin: 4px 0 0;
  text-align: center;
  font-size: 12px;
  color: var(--text-soft);
}
.reqmodal__fallback a {
  color: var(--green);
  font-weight: 700;
  border-bottom: 1px solid var(--gold-soft);
  text-decoration: none;
}

/* Success state */
.reqmodal__success {
  text-align: center;
  padding: 14px 6px 4px;
}
.reqmodal__success-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: rgba(31, 94, 72, 0.10);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
}
.reqmodal__success-title {
  font-family: var(--font-montserrat);
  font-weight: 700;
  font-size: 15px;
  color: var(--green);
  margin-bottom: 6px;
}
.reqmodal__success-sub {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-soft);
  margin: 0 0 18px;
}
.reqmodal__success-close { display: inline-flex; min-width: 140px; }

/* Delivery: Pickup vs Shipping radio choice + conditional pickup city.
   Fieldset layout: legend on its own row, then a 2-column row of radios. */
.reqmodal__radio-group {
  border: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 8px;
}
.reqmodal__radio-group > legend.reqmodal__label,
.reqmodal__radio-group > .reqmodal__label {
  grid-column: 1 / -1;
  padding: 0;
  margin: 0 0 2px;
}
.reqmodal__radio {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  min-width: 0;
}
.reqmodal__radio input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  background: transparent;
  margin: 0;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
  outline: none;
  padding: 0;
}
.reqmodal__radio input[type="radio"]:checked {
  border-color: var(--green);
}
.reqmodal__radio input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  border-radius: 50%;
  background: var(--green);
}
.reqmodal__radio:has(input[type="radio"]:checked) {
  border-color: var(--green);
  background: rgba(31, 94, 72, 0.06);
}
.reqmodal__radio-label {
  font-family: var(--font-montserrat);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.2px;
}

/* Hidden state: native [hidden] disables grid/flex placement so the field
   doesn't reserve vertical space when Shipping is selected. */
.reqmodal__pickup-city[hidden] { display: none; }

body.reqmodal-open { overflow: hidden; touch-action: none; }
@media (min-width: 768px) {
  .collection-trust { grid-template-columns: 1fr 1fr 1fr; }
  .collection-price-factors { grid-template-columns: 1fr 1fr; }
}

/* BROWSE BY MODEL with live inventory (10+ lines): keep the designed 4-tile
   layout untouched; when app.js flags more than 5 tiles, give columns a
   floor so the .models-scroll wrapper does its horizontal-scroll job
   instead of squeezing names into overlapping slivers. */
.models--many {
  grid-auto-columns: minmax(96px, 1fr);
}

/* ---- zoom overlay navigation (swipe + arrows, owner 2026-07-09) ---- */
.psheet__zoom-nav { position: fixed; top: 50%; transform: translateY(-50%); z-index: 2; }
.psheet__zoom .psheet__nav--prev.psheet__zoom-nav { left: 14px; }
.psheet__zoom .psheet__nav--next.psheet__zoom-nav { right: 14px; }
.psheet__zoom--single .psheet__zoom-nav { display: none; }

/* ============================================================================
   RESPONSIVE LAYER — tablet + desktop (owner 2026-07-10)
   The base stylesheet is a fixed 480px phone column. This layer progressively
   widens it: tablet (>=768) uses a fluid centred column with 3-up grids;
   desktop (>=1024) becomes a contained ~1240px marketplace with a horizontal
   nav, 4-up grids, a two-column hero and a two-column product sheet.
   Everything below only ADDS/OVERRIDES at these widths; mobile is untouched.
   ============================================================================ */
:root { --container: 1240px; --gutter: 24px; }

/* desktop nav is injected on every page but stays hidden until >=1024 */
.site-nav { display: none; }

/* ---------------------------------------------------------------- TABLET -- */
@media (min-width: 768px) {
  html, body { font-size: 15px; }
  body { background: var(--bg); }

  /* widen the phone column into a fluid centred page; drop the floating-card
     treatment the base file applied at 768 */
  .page {
    max-width: min(94vw, 900px);
    margin: 0 auto;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    min-height: 100vh;
  }

  /* search + primary CTAs read better constrained rather than full width */
  .search { max-width: 620px; margin-left: auto; margin-right: auto; }
  .cta-row { max-width: 620px; margin-left: auto; margin-right: auto; }
  /* wide enough here that neither CTA should wrap and grow taller */
  .cta-row .btn { white-space: nowrap; }

  /* product grids: 3 up */
  .watches { grid-template-columns: repeat(3, 1fr); gap: 18px; }

  /* hero grows with the column */
  .hero { min-height: 300px; padding: 40px 34px; }
  .hero__title { font-size: 28px; }
  .hero__content { max-width: 62%; }
  .hero__watch-wrap { width: 320px; height: 360px; right: 0; top: 20px; }

  /* footer locations 2-up on tablet */
  .footer__locations { grid-template-columns: 1fr 1fr; gap: 16px; text-align: left; }
}

/* --------------------------------------------------------------- DESKTOP -- */
@media (min-width: 1024px) {
  html, body { font-size: 16px; }

  .page {
    max-width: var(--container);
    padding: 0 var(--gutter) 40px;
  }

  /* Desktop type scale (owner feedback 2026-07-12): subpage headings step
     up; card/hero sizes live in the desktop block further down. The
     .collection-page selector matches the base rule's higher specificity. */
  .subpage__title, .collection-page .subpage__title { font-size: 32px; }

  /* swap mobile hamburger header for the horizontal nav */
  .header { display: none; }
  .site-nav {
    display: block;
    position: sticky;
    top: 0;
    z-index: 40;
    margin: 0 calc(-1 * var(--gutter));
    padding: 0 var(--gutter);
    background: var(--bg-soft);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), var(--shadow-xs);
  }
  .site-nav__inner {
    max-width: var(--container);
    margin: 0 auto;
    height: 76px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 28px;
  }
  .site-nav__brand { display: flex; flex-direction: column; gap: 2px; line-height: 1; }
  .site-nav__brand-1 {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 17px;
    letter-spacing: 1.2px;
    color: var(--text);
    text-transform: uppercase;
    white-space: nowrap;
  }
  .site-nav__brand-2 {
    font-family: var(--font-montserrat);
    font-size: 9px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
  }
  .site-nav__links { display: flex; justify-content: center; gap: 20px; }
  .site-nav__link {
    position: relative;
    font-family: var(--font-montserrat);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--text-soft);
    /* "Sell & Trade" must never break into three lines */
    white-space: nowrap;
    padding: 6px 0;
    transition: color 0.15s ease;
  }
  .site-nav__link::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 2px;
    background: var(--gold);
    transform: scaleX(0);
    transition: transform 0.18s ease;
  }
  .site-nav__link:hover { color: var(--green); }
  .site-nav__link:hover::after,
  .site-nav__link.is-active::after { transform: scaleX(1); }
  .site-nav__link.is-active { color: var(--green); }

  .site-nav__actions { display: flex; align-items: center; gap: 12px; }
  .site-nav__btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 42px;
    padding: 0 18px;
    border-radius: var(--radius-md);
    font-family: var(--font-montserrat);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;
    white-space: nowrap;
    transition: transform 0.1s ease, box-shadow 0.15s ease, background 0.15s ease;
  }
  .site-nav__btn--ghost {
    color: var(--green-deep);
    border: 1px solid var(--border-strong);
    background: var(--card);
  }
  .site-nav__btn--ghost:hover { border-color: var(--gold-rich); }
  .site-nav__btn--primary {
    background: var(--gradient-green);
    color: #FBF6E8;
    box-shadow: var(--shadow-sm);
  }
  .site-nav__btn--primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }

  /* ---- homepage: search + CTAs sit together, hero becomes the centrepiece -- */
  .search { max-width: 680px; margin-top: 28px; height: 54px; }
  .cta-row { max-width: 680px; }

  .hero {
    min-height: 420px;
    padding: 60px 56px;
    display: flex;
    align-items: center;
  }
  .hero__content { max-width: 52%; }
  .hero__title { font-size: 38px; }
  .hero__subtitle { font-size: 14px; max-width: 340px; }
  .hero__glow { width: 520px; height: 520px; right: -80px; top: -60px; }
  .hero__watch-wrap { width: 440px; height: 500px; right: 10px; top: 50%; transform: translateY(-50%); }

  /* trust strip: roomier */
  .trust { padding: 26px 12px; }
  .trust__title { font-size: 13px; }
  .trust__desc { font-size: 11px; }

  /* section heads + grids use the full container */
  .section { padding: 44px 0 6px; }
  .section__head { padding: 0 4px 20px; }
  .section__title { font-size: 13px; }
  .watches { grid-template-columns: repeat(4, 1fr); gap: 22px; padding: 0; }
  /* card type steps up on desktop (owner feedback 2026-07-12: reads small) */
  .watch__model { font-size: 15.5px; }
  .watch__ref { font-size: 15px; }
  .watch__meta { font-size: 11.5px; }
  .watch__set { font-size: 11.5px; }
  .watch__price { font-size: 18px; }

  /* ---- footer: 4 locations across, brand block left ---- */
  .footer { margin: 40px 0 0; padding: 40px 0; }
  .footer__locations { grid-template-columns: repeat(4, 1fr); gap: 20px; }

  /* ---- shop page ---- */
  .shop-controls { max-width: none; }
  .shop-filter-row { grid-template-columns: repeat(4, 1fr); }
  #shop-grid.watches { grid-template-columns: repeat(4, 1fr); }

  /* ---- subpages: keep long-form copy readable, not full 1240 ---- */
  .subpage { max-width: 900px; margin: 0 auto; padding: 20px 0 48px; }
  /* the shop catalog is not long-form text: let it use the full container so
     its filter bar aligns with the product grid below (which is a sibling
     .section--featured spanning the whole page) */
  .page:has(.shop-controls) .subpage { max-width: none; }
  .subpage__lead { max-width: 820px; }
  /* the collections index is a tile grid with only a short lead, so give it
     more room and show 4 tiles per row instead of 2 (long-form collection and
     location pages keep the 900px reading column on purpose) */
  .page:has(.collection-index) .subpage { max-width: 1120px; }
  .collection-index { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .collection-index__media { width: 168px; height: 168px; }
  .collection-index__card { gap: 14px; padding: 24px 14px; }
  .collection-index__name { font-size: 15px; }

  /* ---- product detail sheet: two columns, gallery sticky ---- */
  .psheet__panel {
    width: min(1080px, 94vw);
    max-height: calc(100vh - 48px);
  }
  .psheet__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 40px;
    align-items: start;
    padding: 28px 32px 40px;
  }
  /* gallery spans the full column height so sticky holds for the whole
     right-hand detail scroll. `span 999` (not `1 / -1`): with no explicit row
     track, `-1` resolves to line 1, so the gallery would occupy only row 1 and
     inflate it to its own height, leaving a big gap under the summary. */
  .psheet__gallery { grid-column: 1; grid-row: 1 / span 999; align-self: start; position: sticky; top: 8px; }
  .psheet__body > :not(.psheet__gallery) { grid-column: 2; }
  .psheet__summary { margin-top: 0; }
}

/* -------------------------------------------------------------- WIDE DESK -- */
/* compact action buttons while the bar is tight (1024-1200) */
@media (min-width: 1024px) and (max-width: 1199px) {
  .site-nav__inner { gap: 14px; }
  .site-nav__btn { padding: 0 12px; font-size: 11px; gap: 5px; }
  .site-nav__actions { gap: 8px; }
}
/* roomier nav once the bar is no longer tight */
@media (min-width: 1200px) {
  .site-nav__brand-1 { font-size: 20px; letter-spacing: 1.6px; }
  .site-nav__brand-2 { font-size: 9.5px; letter-spacing: 2.2px; }
  .site-nav__links { gap: 30px; }
}

@media (min-width: 1440px) {
  .watches { grid-template-columns: repeat(4, 1fr); }
}