/* ==========================================================================
   NeSmith Decals redesign (2026-10-30), Surface A: tokens + shared components + global chrome.
   Link AFTER styles.css / sitev2.css / shopv2.css. Owned by Surface A. Surfaces B and C use these
   tokens and classes and never redefine them (B: .rs-*, C: .rp-* for anything new).

   CONTRACT FOR B AND C
   Tokens: everything under :root below, --r-* prefix only.
   Classes: .r-btn .r-btn--ghost .r-btn--block .r-link .r-chip .r-card .r-ruler .r-steps .r-shipline .r-stars
            .r-details .r-sr .r-eyebrow .r-section .r-wrap
   JS fillers (js/components.js, run on DOMContentLoaded and on the window "nesmith:config" event):
     <span data-ship-line></span>          full line: flat shipping, free threshold after discounts, 1-3 business days
     <span data-ship-line="short"></span>  "$flat shipping, free on $free+ after discounts."
     <span data-ship-free></span>          "$free" (dollar sign included), from NESMITH.shipping.freeOver
     <span data-ship-flat></span>          "$flat" (dollar sign included), from NESMITH.shipping.flat
     <span data-ship-audio></span>         "$fee" for speaker racks, from NESMITH.shipping.audio.fee
     <div data-r-ruler></div>              Chrome Ruler, static link strip to custom.html
     <div data-r-ruler="picker"></div>     Chrome Ruler as <button aria-pressed> segments; fires "r-ruler:pick"
                                           (detail {tier, min, max, price}) on the element. Select from code with
                                           NESMITHRuler.select(el, tierIndex). No price math lives in the ruler.
     data-proof / data-cust-orders / data-cust-reviews keep filling from js/config.js as before.
   ========================================================================== */

:root{
  /* surfaces (existing brand values) */
  --r-bg:        var(--black, #0c0d0f);
  --r-bg-alt:    var(--charcoal, #131418);
  --r-card:      var(--surface, #191b20);
  --r-card-hi:   var(--surface-2, #20242b);
  --r-line:      rgba(255,255,255,.12);
  --r-line-soft: rgba(255,255,255,.06);

  /* text (all clear 4.5:1 on --r-bg and --r-card) */
  --r-ink:       #ffffff;
  --r-text:      #e4e6ea;
  --r-text-2:    #b7bcc4;
  --r-text-3:    #9aa0a8;

  /* accents: one job each */
  --r-action:    #e0c074;
  --r-action-hi: #ecd08f;
  --r-premium:   #c9a14a;
  --r-chrome:    linear-gradient(180deg,#f6f8fa 0%,#c4cad3 42%,#9aa1ac 58%,#e8ebef 100%);
  --r-alert:     #c8102e;
  --r-ok:        #3fbf7f;
  --r-focus:     #ffd98a;

  /* type */
  --r-font-display: "Playfair Display", Georgia, serif;
  --r-font-body:    "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --r-fs-xs: .75rem;
  --r-fs-sm: .875rem;
  --r-fs-md: 1rem;
  --r-fs-lg: 1.125rem;
  --r-fs-xl: 1.375rem;
  --r-fs-2xl: clamp(1.75rem, 5vw, 2.25rem);
  --r-fs-3xl: clamp(2.125rem, 7vw, 3.5rem);
  --r-lh-tight: 1.1; --r-lh-body: 1.55;

  /* spacing: 4px base */
  --r-s1: 4px; --r-s2: 8px; --r-s3: 12px; --r-s4: 16px; --r-s5: 24px; --r-s6: 32px; --r-s7: 48px; --r-s8: 64px;
  --r-gutter: 16px;
  --r-section: clamp(40px, 8vw, 80px);

  /* radius */
  --r-rad-sm: 6px;
  --r-rad-md: 12px;
  --r-rad-pill: 999px;

  /* sizing + chrome budget */
  --r-tap: 44px; --r-tap-primary: 48px;
  --r-header-h: 56px; --r-tabbar-h: 60px; --r-announce-h: 32px;
  --r-shadow: 0 8px 24px rgba(0,0,0,.45);
  --r-ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- global ---------- */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{ overflow-x:clip; }
:focus-visible{ outline:3px solid var(--r-focus) !important; outline-offset:2px !important; }
input, select, textarea{ font-size:max(16px, 1em); }
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ---------- layout helpers ---------- */
.r-wrap{ width:100%; max-width:1180px; margin-inline:auto; padding-inline:var(--r-gutter); }
.r-section{ padding-block:var(--r-section); }
.r-eyebrow{ display:block; font:600 var(--r-fs-xs)/1.3 var(--r-font-body); letter-spacing:.14em; text-transform:uppercase; color:var(--r-text-3); margin:0 0 var(--r-s2); }
.r-h2{ font-family:var(--r-font-display); font-size:var(--r-fs-2xl); line-height:var(--r-lh-tight); color:var(--r-ink); margin:0 0 var(--r-s3); }
.r-sr{ position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important; border:0 !important; }

/* ---------- buttons + links ---------- */
.r-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--r-s2);
  min-height:var(--r-tap-primary); padding:0 var(--r-s5); border-radius:var(--r-rad-pill);
  background:var(--r-action); color:var(--r-bg) !important; border:1px solid var(--r-action);
  font:600 var(--r-fs-md)/1.2 var(--r-font-body); text-decoration:none !important; letter-spacing:0; text-transform:none;
  cursor:pointer; transition:background .2s var(--r-ease), border-color .2s var(--r-ease), transform .15s var(--r-ease);
  -webkit-text-fill-color:currentColor;
}
.r-btn:hover{ background:var(--r-action-hi); border-color:var(--r-action-hi); }
.r-btn:active{ transform:translateY(1px); }
.r-btn--ghost{ background:transparent; color:var(--r-ink) !important; border-color:var(--r-line); }
.r-btn--ghost:hover{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.3); }
.r-btn--block{ display:flex; width:100%; }
.r-link{
  display:inline-flex; align-items:center; gap:var(--r-s1); min-height:var(--r-tap);
  color:var(--r-action); font-weight:600; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;
}
.r-link:hover{ color:var(--r-action-hi); }
.r-chip{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--r-s1);
  min-height:var(--r-tap); padding:0 var(--r-s4); border-radius:var(--r-rad-sm);
  background:var(--r-card); color:var(--r-text); border:1px solid var(--r-line);
  font:500 var(--r-fs-sm)/1.2 var(--r-font-body); text-decoration:none; cursor:pointer;
}
.r-chip[aria-pressed="true"], .r-chip.is-on{ border-color:var(--r-action); color:var(--r-ink); box-shadow:inset 0 0 0 1px var(--r-action); }

/* ---------- card ---------- */
.r-card{ background:var(--r-card); border:1px solid var(--r-line-soft); border-radius:var(--r-rad-md); overflow:hidden; color:var(--r-text); }

/* ---------- stars ---------- */
.r-stars{ color:var(--r-premium); letter-spacing:.08em; font-size:var(--r-fs-sm); line-height:1; }

/* ---------- shipping line ---------- */
.r-shipline{ display:block; font-size:var(--r-fs-sm); line-height:1.5; color:var(--r-text-2); }

/* ---------- details ---------- */
.r-details{ border-top:1px solid var(--r-line); }
.r-details:last-of-type{ border-bottom:1px solid var(--r-line); }
.r-details > summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:var(--r-s3);
  min-height:var(--r-tap-primary); padding:var(--r-s2) 0; font:600 var(--r-fs-md)/1.35 var(--r-font-body); color:var(--r-ink);
}
.r-details > summary::-webkit-details-marker{ display:none; }
.r-details > summary::after{ content:"+"; flex:none; font-size:1.3rem; line-height:1; color:var(--r-text-3); transition:transform .2s var(--r-ease); }
.r-details[open] > summary::after{ transform:rotate(45deg); }
.r-details > *:not(summary){ color:var(--r-text-2); padding-bottom:var(--r-s4); }

/* ---------- 3-step strip ---------- */
.r-steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:var(--r-s3); counter-reset:rstep; }
.r-steps > li{
  counter-increment:rstep; position:relative; background:var(--r-card); border:1px solid var(--r-line-soft); border-radius:var(--r-rad-md);
  padding:var(--r-s4); padding-left:calc(var(--r-s4) + 36px); min-height:64px; display:flex; align-items:center;
  font:500 var(--r-fs-md)/1.4 var(--r-font-body); color:var(--r-text);
}
.r-steps > li::before{
  content:counter(rstep); position:absolute; left:var(--r-s4); top:50%; transform:translateY(-50%);
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background:var(--r-chrome); color:var(--r-bg); font:700 var(--r-fs-sm)/1 var(--r-font-body); font-variant-numeric:tabular-nums;
}
@media (max-width:720px){ .r-steps{ grid-template-columns:1fr; gap:var(--r-s2); } }

/* ---------- Chrome Ruler ---------- */
.r-ruler{ position:relative; margin:0; }
.r-ruler-track{
  position:relative; display:grid; grid-template-columns:repeat(5,1fr);
  background:var(--r-bg-alt); border-radius:var(--r-rad-sm); overflow:hidden;
}
/* chrome top and bottom rules with tick marks (no images) */
.r-ruler-track::before, .r-ruler-track::after{
  content:""; position:absolute; left:0; right:0; height:7px; pointer-events:none; z-index:1;
  background:
    repeating-linear-gradient(90deg, rgba(220,226,234,.85) 0 1px, transparent 1px 10px) top/100% 6px no-repeat,
    var(--r-chrome) top/100% 1px no-repeat;
}
.r-ruler-track::before{ top:0; }
.r-ruler-track::after{ bottom:0; transform:scaleY(-1); }
.r-ruler-seg{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  min-height:56px; padding:var(--r-s3) var(--r-s1); text-align:center; text-decoration:none !important;
  background:transparent; border:0; border-left:1px solid var(--r-line); color:var(--r-ink); cursor:pointer;
  font-family:var(--r-font-body); -webkit-appearance:none; appearance:none;
}
.r-ruler-seg:first-child{ border-left:0; }
.r-ruler-seg:hover{ background:rgba(255,255,255,.04); }
.r-ruler-size{ font-size:var(--r-fs-sm); line-height:1.2; color:var(--r-text-2); font-weight:500; white-space:nowrap; }
.r-ruler-price{ font-size:var(--r-fs-lg); line-height:1.15; color:var(--r-ink); font-weight:700; font-variant-numeric:tabular-nums; }
.r-ruler-tag{
  position:absolute; top:9px; left:50%; transform:translateX(-50%); white-space:nowrap;
  font:700 10px/1 var(--r-font-body); letter-spacing:.06em; text-transform:uppercase; color:var(--r-action);
}
.r-ruler-seg--top{ padding-top:22px; }
.r-ruler-seg--quote .r-ruler-price{ font-size:var(--r-fs-sm); color:var(--r-action); font-weight:600; }
.r-ruler-seg[aria-pressed="true"]{ background:rgba(224,192,116,.12); box-shadow:inset 0 0 0 2px var(--r-action); }
.r-ruler-seg[aria-pressed="true"] .r-ruler-size{ color:var(--r-ink); }
.r-ruler-cap{ margin:var(--r-s2) 0 0; font-size:var(--r-fs-sm); line-height:1.5; color:var(--r-text-2); }
@media (max-width:560px){
  .r-ruler-track{ grid-template-columns:repeat(4,1fr); }
  .r-ruler-seg--quote{ grid-column:1 / -1; border-left:0; border-top:1px solid var(--r-line); min-height:var(--r-tap-primary); flex-direction:row; gap:var(--r-s2); }
}

/* ==========================================================================
   GLOBAL CHROME (header, menu, announce bar, tab bar, help, footer)
   ========================================================================== */

/* header: 56px on phones */
@media (max-width:920px){
  :root{ --header-h:var(--r-header-h); }
  .site-header .brand .n-mark{ width:36px; height:36px; }
  .site-header .header-cta .btn--sm{ min-height:var(--r-tap) !important; padding:0 .9rem !important; font-size:.8125rem !important; }
}
@media (max-width:420px){
  .site-header .header-phone-num{ display:none; }   /* the icon stays a 44px call button */
  .site-header .header-phone{ padding:0 !important; width:44px; justify-content:center; }
}

/* menu: primary + secondary groups */
.nav .nav-sec-h{ display:none; }
@media (min-width:1201px){
  .nav .nav-sec, .nav .nav-sec-h{ display:none !important; }
}
@media (max-width:1200px){
  .nav .nav-sec-h{
    display:block; padding:var(--r-s4) clamp(20px,5vw,40px) var(--r-s1); margin:0;
    font:600 var(--r-fs-xs)/1.3 var(--r-font-body); letter-spacing:.14em; text-transform:uppercase; color:var(--r-text-3);
  }
  html body #site-header nav a.nav-sec{
    font-size:var(--r-fs-sm) !important; letter-spacing:.04em !important; text-transform:none !important; font-weight:500 !important;
    color:var(--r-text-2); padding-top:.7rem; padding-bottom:.7rem; min-height:var(--r-tap); display:flex; align-items:center;
  }
}

/* announce bar: one line on phones, slides away after 80px of scroll */
html body div.announce-bar{ transition:transform .25s var(--r-ease); will-change:transform; }
html body div.announce-bar .announce-inner{ min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:640px){
  html.has-announce{ --bar-h:var(--r-announce-h); }
  html body div.announce-bar{
    min-height:var(--r-announce-h) !important; height:var(--r-announce-h); box-sizing:border-box; border-bottom:0 !important; padding:0 12px !important; white-space:nowrap; font-size:.8125rem !important; line-height:1.3 !important;
  }
  html body div.announce-bar a{ display:block; min-height:var(--r-announce-h); line-height:var(--r-announce-h); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}
html.r-bar-away div.announce-bar{ transform:translateY(-100%); }
html.r-bar-away .site-header{ top:0 !important; }
html.r-bar-away .cat-nav{ top:var(--header-h) !important; }
@media (max-width:1200px){
  html.r-bar-away .nav{ inset:var(--header-h) 0 auto 0 !important; }
}
.site-header{ transition:top .25s var(--r-ease), background .3s, box-shadow .3s; }

/* tab bar: 60px, six equal tabs, Custom stays centred and gold */
@media (max-width:920px){
  html body .tabbar{
    grid-template-columns:repeat(6,1fr) !important; align-items:stretch !important;
    padding:4px 2px calc(4px + env(safe-area-inset-bottom, 0px)) !important;
  }
  html body .tabbar .tab{
    min-height:51px !important; padding:4px 0 !important; gap:3px !important; justify-content:center !important;
    font-size:.6875rem !important; letter-spacing:0 !important; background:none; border:0; font-family:var(--r-font-body); cursor:pointer;
  }
  html body .tabbar .tab svg{ width:22px !important; height:22px !important; }
  html body .tabbar .tab-center, html body .tabbar .tab-center span:last-child{ color:var(--r-action) !important; }
  html body .tabbar .tab-center.active{ color:var(--r-action-hi) !important; }
  html body .tabbar .tab[aria-expanded="true"]{ color:var(--r-ink) !important; }
  html body .tabbar .tab-cart .cart-count{ top:0 !important; }
  body{ padding-bottom:calc(var(--r-tabbar-h) + 16px + env(safe-area-inset-bottom, 0px)) !important; }

  /* help: the floating bubble stands down while the tab bar is on screen; the Help tab opens the same sheet */
  html body .v2-qc{ bottom:calc(var(--r-tabbar-h) + 12px + env(safe-area-inset-bottom, 0px)) !important; right:12px !important; }
  html body .v2-qc .v2-qc-btn{ display:none !important; }
  html body .v2-qc .v2-qc-acts{ margin-bottom:0; }
}
.tabbar .tab-help{ -webkit-appearance:none; appearance:none; }
@media (min-width:921px){ .tabbar .tab-help{ display:none; } }

/* footer: accordions on phones */
.site-footer .r-foot-sec > summary{ list-style:none; }
.site-footer .r-foot-sec > summary::-webkit-details-marker{ display:none; }
@media (min-width:641px){
  .site-footer .r-foot-sec > summary{ pointer-events:none; }
}
@media (max-width:640px){
  .site-footer .foot-grid{ gap:0 !important; padding-bottom:var(--r-s5) !important; }
  .site-footer .foot-grid > div:first-child{ padding-bottom:var(--r-s4); }
  .site-footer .foot-about{ font-size:var(--r-fs-sm) !important; max-width:none !important; }
  .site-footer .r-foot-sec{ border-top:1px solid var(--r-line); }
  .site-footer .r-foot-sec > summary{
    display:flex; align-items:center; justify-content:space-between; min-height:var(--r-tap-primary); cursor:pointer;
  }
  .site-footer .r-foot-sec > summary .foot-h{ margin:0 !important; }
  .site-footer .r-foot-sec > summary::after{ content:"+"; font-size:1.3rem; line-height:1; color:var(--r-text-3); }
  .site-footer .r-foot-sec[open] > summary::after{ content:"\2212"; }
  .site-footer .r-foot-sec .foot-links{ padding-bottom:var(--r-s3); }
  .site-footer .foot-links a{ font-size:var(--r-fs-md) !important; }
  .foot-bottom{ font-size:var(--r-fs-xs) !important; padding-block:var(--r-s4) !important; }
}
.foot-bottom a{ min-height:var(--r-tap); display:inline-flex !important; align-items:center; padding:0 !important; margin:0 !important; }

/* ==========================================================================
   HOME (index.html)
   ========================================================================== */
.r-home{ background:var(--r-bg); color:var(--r-text); font-family:var(--r-font-body); }

/* hero */
.r-hero{ padding-top:calc(var(--header-h) + var(--bar-h, 0px) + var(--r-s5)); padding-bottom:var(--r-s6); }
.r-hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,5vw,64px); align-items:center; }
.r-hero h1{
  font-family:var(--r-font-display); font-size:var(--r-fs-3xl); line-height:var(--r-lh-tight); color:var(--r-ink);
  margin:0 0 var(--r-s4); letter-spacing:-.01em; font-weight:700;
}
.r-hero h1 em{ font-style:italic; color:var(--r-action); }
.r-hero-sub{ font-size:var(--r-fs-lg); line-height:var(--r-lh-body); color:var(--r-text-2); margin:0 0 var(--r-s5); max-width:36ch; }
.r-hero-cta{ display:flex; flex-wrap:wrap; gap:var(--r-s3); margin-bottom:var(--r-s5); }
.r-trust{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--r-s2) var(--r-s5); font-size:var(--r-fs-sm); color:var(--r-text-2); }
.r-trust li{ display:flex; align-items:center; gap:6px; }
.r-trust strong{ color:var(--r-ink); font-weight:700; font-variant-numeric:tabular-nums; }
.r-trust .r-stars{ font-size:var(--r-fs-sm); }
.r-hero-media{ margin:0; position:relative; border-radius:var(--r-rad-md); overflow:hidden; aspect-ratio:3 / 4; max-height:620px; justify-self:end; width:100%; max-width:470px; background:var(--r-bg-alt); }
.r-hero-media img{ width:100%; height:100%; object-fit:cover; display:block; }
/* sitev2.css carries a global per-image crop map with !important; the home frames set their own crop */
html body .r-hero-media img{ object-position:50% 72% !important; }
html body .r-hero-media img[src*="v2-jesus-saves-red"]{ object-position:50% 45% !important; }
html body .r-tile-img img[src*="v2-name-hopkins"]{ object-position:50% 70% !important; }
html body .r-tile-img img[src*="v2-hc-night-windshield"]{ object-position:50% 52% !important; }
html body .r-rack-media img{ object-position:50% 50% !important; }
.r-hero-media figcaption{
  position:absolute; left:var(--r-s3); bottom:var(--r-s3); padding:6px 10px; border-radius:var(--r-rad-pill);
  background:rgba(12,13,15,.78); color:var(--r-text); font-size:var(--r-fs-xs); backdrop-filter:blur(6px);
}
@media (max-width:820px){
  .r-hero{ padding-bottom:var(--r-s5); }
  .r-hero-grid{ grid-template-columns:1fr; gap:var(--r-s5); }
  .r-hero-media{ order:-1; aspect-ratio:16 / 10; max-height:none; max-width:none; justify-self:stretch; }
  html body .r-hero-media img{ object-position:50% 80% !important; }
  .r-hero-cta .r-btn{ flex:1 1 100%; }
  .r-hero-sub{ font-size:var(--r-fs-md); margin-bottom:var(--r-s4); }
  .r-hero-cta{ margin-bottom:var(--r-s4); }
  /* 2026-10-31 brand100m: proof row above the buttons on phones so it lands on the first screen. Desktop unchanged. */
  .r-hero-copy{ display:flex; flex-direction:column; }
  .r-hero-copy .r-trust{ order:3; margin:0 0 var(--r-s4); }
  .r-hero-copy .r-hero-cta{ order:4; }
  html body .r-hero-media img[src*="v2-jesus-saves-red"]{ object-position:50% 50% !important; }
}

/* ruler band */
.r-ruler-band{ padding-block:var(--r-s5) var(--r-s6); border-top:1px solid var(--r-line-soft); }
.r-ruler-band .r-eyebrow{ margin-bottom:var(--r-s3); }

/* category tiles */
.r-tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--r-s3); list-style:none; margin:0; padding:0; }
.r-tile{ position:relative; display:flex; flex-direction:column; min-height:100%; text-decoration:none !important; color:var(--r-text); }
.r-tile:hover{ border-color:var(--r-line); }
.r-tile-img{ aspect-ratio:1 / 1; background:var(--r-bg-alt); overflow:hidden; }
.r-tile-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s var(--r-ease); }
.r-tile:hover .r-tile-img img{ transform:scale(1.03); }
.r-tile-img--mono{ display:grid; place-items:center; background:radial-gradient(120% 120% at 30% 20%, #2a2d34, #121317 70%); }
.r-tile-img--mono span{
  font:700 clamp(2rem,9vw,3.4rem)/1 var(--r-font-display); letter-spacing:.12em;
  background:var(--r-chrome); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.r-tile-body{ padding:var(--r-s3) var(--r-s3) var(--r-s4); }
.r-tile-t{ display:block; font:600 var(--r-fs-md)/1.3 var(--r-font-body); color:var(--r-ink); }
.r-tile-s{ display:block; margin-top:2px; font-size:var(--r-fs-sm); line-height:1.4; color:var(--r-text-2); }
@media (max-width:900px){ .r-tiles{ grid-template-columns:repeat(2,1fr); } .r-tile-img{ aspect-ratio:4 / 3; } .r-tile-body{ padding:var(--r-s2) var(--r-s3) var(--r-s3); } }

/* section heads */
.r-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--r-s3); margin-bottom:var(--r-s4); flex-wrap:wrap; }
.r-head .r-h2{ margin:0; }

/* best sellers: keep the shared product cards, trim their weight on home */
.r-home #featured-grid{ gap:var(--r-s3); }
@media (max-width:640px){
  .r-home #featured-grid{ grid-template-columns:repeat(2,1fr) !important; }
}

/* speaker rack premium band */
.r-rack{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); align-items:stretch;
  border:1px solid rgba(201,161,74,.35); background:linear-gradient(135deg,#121317,#0d0e11);
}
.r-rack-media{ min-height:220px; background:#07070a; }
.r-rack-media img{ width:100%; height:100%; object-fit:cover; object-position:50% 52%; display:block; }
.r-rack-body{ padding:clamp(20px,4vw,40px); display:flex; flex-direction:column; justify-content:center; gap:var(--r-s3); }
.r-rack-kick{ font:700 var(--r-fs-xs)/1.2 var(--r-font-body); letter-spacing:.14em; text-transform:uppercase; color:var(--r-premium); }
.r-rack-body .r-h2{ margin:0; }
.r-rack-body p{ margin:0; color:var(--r-text-2); font-size:var(--r-fs-md); line-height:var(--r-lh-body); }
.r-rack-body .r-btn{ align-self:flex-start; }
@media (max-width:720px){
  .r-rack{ grid-template-columns:1fr; }
  .r-rack-media{ min-height:0; aspect-ratio:16 / 9; }
  .r-rack-body .r-btn{ align-self:stretch; }
}

/* reviews strip */
.r-rev-head{ display:flex; align-items:center; gap:var(--r-s3); flex-wrap:wrap; margin-bottom:var(--r-s4); }
.r-rev-score{ font:700 var(--r-fs-xl)/1.2 var(--r-font-body); color:var(--r-ink); font-variant-numeric:tabular-nums; }
.r-rev-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:var(--r-s3); }
.r-rev{ padding:var(--r-s4); display:flex; flex-direction:column; gap:var(--r-s2); }
.r-rev blockquote{ margin:0; color:var(--r-text); font-size:var(--r-fs-md); line-height:var(--r-lh-body); }
.r-rev cite{ font-style:normal; font-size:var(--r-fs-sm); color:var(--r-text-3); }
.r-rev-links{ display:flex; flex-wrap:wrap; gap:0 var(--r-s5); margin-top:var(--r-s3); }
@media (max-width:820px){
  .r-rev-list{ grid-template-columns:1fr; }
  .r-rev blockquote{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
}

/* final CTA */
.r-final{ text-align:center; padding-block:var(--r-section); border-top:1px solid var(--r-line-soft); }
.r-final .r-h2{ margin-inline:auto; max-width:20ch; }
.r-final p{ color:var(--r-text-2); margin:0 auto var(--r-s5); max-width:46ch; }
.r-final .r-hero-cta{ justify-content:center; margin:0; }
@media (max-width:640px){ .r-final .r-hero-cta .r-btn{ flex:1 1 100%; } }

.r-home .r-section + .r-section{ padding-top:0; }
@media (max-width:640px){ :root{ --r-section:40px; } }

/* ==========================================================================
   LUXURY PASS (2026-11-01). Restraint over decoration: one gold per job, hairlines instead of slabs, fine-line
   numerals, calmer photography, generous space. Appended last so it lifts every page that links this sheet.
   No prices, offers or copy live here.
   ========================================================================== */
:root{
  --r-gold-line: rgba(201,161,74,.28);
  --r-gold-wash: rgba(224,192,116,.08);
  --r-hair: rgba(255,255,255,.08);
}

/* ---- header: quiet mark, tracked small caps, one gold underline for the current page ---- */
html body .site-header .brand-mark, html body .site-header .brand-mark .n-mark{ background:transparent !important; box-shadow:none !important; border:0 !important; }
@media (min-width:1201px){
  html body #site-header nav a{
    font-size:12.5px !important; letter-spacing:.12em !important; font-weight:500 !important; color:var(--r-text-2) !important;
    -webkit-text-fill-color:currentColor !important;
  }
  html body #site-header nav a:hover, html body #site-header nav a[aria-current="page"]{ color:var(--r-ink) !important; }
  html body #site-header nav a::after{ height:1px !important; bottom:-6px !important; background:var(--r-premium) !important; }
  html body #site-header nav a.nav-gold{ color:var(--r-text-2) !important; }
  html body #site-header nav a.nav-gold:hover{ color:var(--r-ink) !important; }
}
html body .site-header .header-phone{ border-color:var(--r-hair) !important; font-weight:500 !important; letter-spacing:.02em; }
html body .site-header .header-phone svg{ color:var(--r-text-2) !important; stroke:currentColor; width:15px; height:15px; }
html body .site-header .header-phone:hover{ border-color:var(--r-gold-line) !important; background:transparent !important; }

/* ---- buttons: one shape, one gold for fills ---- */
html body .btn--gold, html body a.btn--gold{
  background:var(--r-action) !important; border-color:var(--r-action) !important; color:var(--r-bg) !important;
  -webkit-text-fill-color:var(--r-bg) !important; box-shadow:none !important; border-radius:var(--r-rad-pill) !important;
}
html body .btn--gold:hover, html body a.btn--gold:hover{ background:var(--r-action-hi) !important; border-color:var(--r-action-hi) !important; }
.r-btn{ letter-spacing:.01em; }
.r-btn--ghost{ border-color:rgba(255,255,255,.22); }

/* ---- headings: one display voice everywhere ---- */
html body .page-hero h1{ letter-spacing:-.015em !important; text-wrap:balance; }
.r-h2{ font-weight:600; letter-spacing:-.01em; }
.r-eyebrow{ color:var(--r-premium); letter-spacing:.18em; font-weight:500; }

/* ---- fine-line step numerals (home + custom share this) ---- */
.r-steps > li{ background:transparent; border-color:var(--r-hair); }
.r-steps > li::before{
  width:28px; height:28px; background:transparent; border:1px solid var(--r-premium); color:var(--r-action);
  font:500 13px/1 var(--r-font-display); font-variant-numeric:lining-nums;
}

/* ---- Chrome Ruler: fewer, finer ticks, top edge only ---- */
.r-ruler-track{ background:transparent; border:1px solid var(--r-hair); }
.r-ruler-track::before{
  height:6px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 1px, transparent 1px 24px) top/100% 6px no-repeat,
    linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent) top/100% 1px no-repeat;
}
.r-ruler-track::after{ display:none; }
.r-ruler-seg{ border-left-color:var(--r-hair); }
.r-ruler-price{ font-weight:600; color:var(--r-action); }
.r-ruler-tag{ font-weight:600; letter-spacing:.14em; color:var(--r-premium); }

/* ---- home hero: balanced lines, calmer photo, even columns ---- */
.r-hero h1{ text-wrap:balance; letter-spacing:-.015em; }
.r-hero-media img{ filter:saturate(.85) contrast(1.04); }
.r-hero-media figcaption{ background:rgba(12,13,15,.6); border:1px solid var(--r-hair); letter-spacing:.08em; text-transform:uppercase; font-size:10.5px; }
@media (min-width:821px){
  .r-hero-grid{ grid-template-columns:1fr 1fr; gap:clamp(32px,4vw,56px); }
  .r-hero h1{ max-width:13ch; }
  .r-trust{ max-width:560px; }
}
/* phones: the main button lands above the tab bar on a 375x812 screen */
@media (max-width:820px){
  .r-hero{ padding-top:calc(var(--header-h) + var(--bar-h, 0px) + var(--r-s3)); }
  .r-hero-media{ aspect-ratio:2 / 1; }
  .r-hero .r-eyebrow{ display:none; }
  .r-hero h1{ font-size:clamp(1.9rem, 8.4vw, 2.4rem); margin-bottom:var(--r-s3); }
  /* the full sub line shows (no mid-sentence ellipsis); the main button still clears the tab bar at 375x667 */
  .r-hero-grid{ gap:var(--r-s4); }
  .r-hero-copy .r-trust{ gap:var(--r-s1) var(--r-s4); font-size:13px; }
}

/* ---- category tiles + best sellers: one photographic grade so the grid reads as one family ---- */
.r-tile{ background:transparent; border-color:var(--r-hair); }
.r-tile-img img, .r-home #featured-grid .card-media img, #shop-sections .card-media img, .pp-card img{
  filter:saturate(.82) contrast(1.06) brightness(.96);
}
.r-tile-t{ font-weight:500; letter-spacing:.01em; }

/* ---- speaker rack band: a hairline frame and a fixed height, not a half-screen poster ---- */
.r-rack{ background:var(--r-bg-alt); border:1px solid var(--r-gold-line); }
@media (min-width:721px){
  .r-rack{ min-height:420px; max-height:480px; }
  .r-rack-media{ position:relative; min-height:0; overflow:hidden; }
  .r-rack-media img{ position:absolute; inset:0; }
}
.r-rack-media img{ filter:saturate(.75) contrast(1.05); }
.r-rack-kick{ font-weight:500; letter-spacing:.18em; }

/* ---- reviews + final ---- */
.r-rev{ background:transparent; border-color:var(--r-hair); }
.r-rev blockquote{ font-family:var(--r-font-display); font-style:italic; font-size:var(--r-fs-lg); line-height:1.5; color:var(--r-text); }
.r-final{ border-top-color:var(--r-hair); }
.r-final .r-h2{ font-size:clamp(1.9rem, 5vw, 2.75rem); }

/* ---- proof lines: a gold hairline, not a green success message ---- */
html body .pp-proof, html body .nb-promise{
  color:var(--r-text-2) !important; font-weight:500 !important;
  border-left:1px solid rgba(201,161,74,.45); padding-left:12px;
}

/* ---- product page: thumbnails sit with the photo on phones; no dead band above the crumb ---- */
body[data-page="product"] .pp-hero{ background:none !important; border-bottom:0 !important; padding-top:calc(var(--header-h, 72px) + var(--bar-h, 0px) + 8px) !important; padding-bottom:0 !important; }
@media (max-width:899px){
  .pp-thumbs{ order:2 !important; margin-top:8px !important; display:flex !important; overflow-x:auto; gap:8px; scrollbar-width:none; }
  .pp-thumbs > *{ flex:0 0 64px; }
  .pp-info{ order:3 !important; }
}

/* ---- shop cards: lighter type on the art, two lines max ---- */
html body .v2scrim .v2name{ font-weight:600 !important; text-shadow:0 1px 4px rgba(0,0,0,.55) !important; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
html body .v2chip{ color:var(--r-action) !important; border-color:var(--r-gold-line) !important; border-radius:var(--r-rad-sm) !important; letter-spacing:.02em !important; }
@media (max-width:560px){
  html body .v2scrim{ padding:1.6rem .55rem .5rem !important; gap:.4rem !important; }
  html body .v2scrim .v2name{ font-size:.8125rem !important; line-height:1.3 !important; }
}

/* ---- shop search: the magnifier its padding was waiting for ---- */
html body .rs-searchbar .shop-search, html body #shop-search{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%239aa0a8' stroke-width='1.6'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='m13 13 4 4'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important; background-position:16px 50% !important;
}

/* ---- tab bar: one active tab, marked by a gold hairline; Custom is not permanently lit ---- */
@media (max-width:920px){
  html body .tabbar{ border-top:1px solid var(--r-hair) !important; }
  html body .tabbar .tab{ position:relative; color:var(--r-text-3) !important; }
  html body .tabbar .tab-center, html body .tabbar .tab-center span:last-child{ color:var(--r-text-3) !important; }
  html body .tabbar .tab.active, html body .tabbar .tab[aria-current="page"], html body .tabbar .tab-center.active,
  html body .tabbar .tab-center.active span:last-child{ color:var(--r-ink) !important; }
  html body .tabbar .tab.active::before, html body .tabbar .tab[aria-current="page"]::before{
    content:""; position:absolute; top:-4px; left:30%; right:30%; height:2px; background:var(--r-action); border-radius:2px;
  }
  html body .tabbar .tab-center .tab-ico{ background:none !important; box-shadow:none !important; border:0 !important; }
  html body .tabbar .tab-cart .cart-count{ background:var(--r-action) !important; color:var(--r-bg) !important; }
}

/* ---- footer: one size for contact lines, centred CTA ---- */
html body .site-footer .foot-contact a:not(.btn), html body .site-footer .foot-contact p{ font-size:.875rem !important; color:var(--r-text-3) !important; }
html body .site-footer .foot-contact .btn--gold{ display:flex !important; justify-content:center; align-items:center; }
html body .site-footer .foot-h{ letter-spacing:.16em; font-weight:500; color:var(--r-premium); }

/* ---- floating help button on desktop: corner, not mid-screen ---- */
@media (min-width:921px){
  html body .v2-qc{ bottom:24px !important; right:24px !important; top:auto !important; }
}

/* ---- shop hero: copy sits on a darker left wash so the sub lines read clear of the headlight ---- */
html body[data-page="shop"] .page-hero::before{
  background:
    linear-gradient(90deg, rgba(9,10,12,.92) 0%, rgba(9,10,12,.7) 45%, rgba(9,10,12,.2) 75%, rgba(9,10,12,.1) 100%),
    linear-gradient(180deg, rgba(9,10,12,.2), rgba(9,10,12,0) 35%, rgba(9,10,12,0) 55%, #0c0d0f 92%, #0c0d0f 100%) !important;
}
/* ---- shop trust strip: one quiet scrolling line on phones; the 3 steps already live on home and in the cart ---- */
@media (max-width:560px){
  html body #v2-trust{ box-sizing:border-box; width:100%; max-width:100%; min-width:0; display:flex !important; flex-wrap:nowrap !important; overflow-x:auto !important; overflow-y:hidden !important; gap:16px !important; justify-content:flex-start !important; scrollbar-width:none; white-space:nowrap; padding-inline:2px; }
  html body #v2-trust::-webkit-scrollbar{ display:none; }
  html body #v2-trust > span{ flex:none; }
  html body #v2-how{ display:none !important; }
}
html body .v2-how b{ background:transparent !important; border:1px solid var(--r-premium) !important; color:var(--r-action) !important; font-family:var(--r-font-display); font-weight:500 !important; }

/* ---- custom page: every field the full width of its card, left-aligned intro, one hint style ---- */
#custom-form select, #custom-form input:not([type=checkbox]):not([type=radio]):not([type=file]), #custom-form textarea{ width:100%; box-sizing:border-box; }
.form-hint{ font-size:.8125rem; line-height:1.5; color:var(--r-text-3); margin:.4rem 0 0; }
.rp-steps li::before{
  background:transparent !important; border:1px solid var(--r-premium) !important; color:var(--r-action) !important;
  width:28px !important; height:28px !important; font:500 13px/1 var(--r-font-display) !important; font-variant-numeric:lining-nums;
}

/* header + footer quote links stay secondary: gold text on a gold hairline (restores their text after the fill rule above) */
html body #site-header .btn--gold, html body .site-header .btn--gold, html body .site-footer .btn--gold, html body .foot-contact .btn--gold{
  background:transparent !important; color:var(--r-action) !important; -webkit-text-fill-color:var(--r-action) !important; border:1px solid var(--r-gold-line) !important;
}
html body #site-header .btn--gold:hover, html body .site-header .btn--gold:hover, html body .site-footer .btn--gold:hover, html body .foot-contact .btn--gold:hover{
  background:var(--r-gold-wash) !important; border-color:rgba(201,161,74,.55) !important;
}
html body .nb-promise{ font-size:.8125rem !important; line-height:1.5 !important; }