/* ==========================================================================
   Lead Opticals — Page styles
   1. Home
   2. Shop
   3. Product
   4. Cart & checkout
   5. Booking, about, contact, account
   ========================================================================== */

/* ==========================================================================
   1. HOME
   ========================================================================== */

/* ------------------------------------------------------------------ Hero */
.hero { position: relative; overflow: hidden; background: var(--paper); }
.hero-grid {
  display: grid; grid-template-columns: 1.02fr 1fr;
  gap: var(--sp-8); align-items: center;
  min-height: min(88vh, 860px);
  padding-block: clamp(3rem, 6vw, 6rem);
}
.hero-copy { max-width: 620px; }
.hero-title { margin: var(--sp-5) 0 var(--sp-5); }
.hero-title .split-line { padding-bottom: .06em; }
.hero-sub { font-size: var(--fs-md); color: var(--ink-soft); line-height: 1.78; max-width: 46ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }

.hero-proof {
  display: flex; flex-wrap: wrap; gap: var(--sp-6);
  margin-top: var(--sp-8); padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
.hero-proof li { display: flex; flex-direction: column; gap: 2px; }
.hero-proof b {
  font-family: var(--display); font-size: var(--fs-xl); font-weight: 500;
  color: var(--ink); line-height: 1;
}
.hero-proof span {
  font-family: var(--mono); font-size: var(--fs-2xs); letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft);
}

/* Stage */
.hero-stage { position: relative; aspect-ratio: 1 / 1; display: grid; place-items: center; }
.hero-plate {
  position: absolute; inset: 6% 4%;
  background: radial-gradient(120% 100% at 30% 20%, var(--sand) 0%, #E6DCCE 55%, #D9CBB8 100%);
  border-radius: 50%;
}
.hero-plate::after {
  content: ''; position: absolute; inset: 8%;
  border: 1px solid rgba(18,16,15,.09); border-radius: 50%;
}
.hero-frame {
  position: relative; z-index: 2; width: 82%;
  transition: opacity .3s var(--e-out), transform .5s var(--e-out);
}
.hero-frame.swapping { opacity: 0; transform: translateY(14px) scale(.96); }
.hero-frame svg { width: 100%; height: auto; filter: drop-shadow(0 26px 34px rgba(18,16,15,.20)); }

.hero-swatches {
  position: absolute; z-index: 3; bottom: 4%; left: 50%; transform: translateX(-50%);
  display: flex; gap: 10px; padding: 9px 13px;
  background: rgba(255,255,255,.86); backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: var(--r-pill);
}
.hero-swatches button {
  width: 22px; height: 22px; border-radius: 50%; background: var(--sw);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
  border: 2px solid transparent; background-clip: padding-box;
  transition: transform var(--t-fast) var(--e-spring), box-shadow var(--t-fast);
}
.hero-swatches button:hover { transform: scale(1.16); }
.hero-swatches button.on { box-shadow: inset 0 0 0 1px rgba(0,0,0,.15), 0 0 0 2px var(--ink); }

.hero-seal {
  position: absolute; z-index: 4; top: 4%; right: 2%;
  width: clamp(88px, 10vw, 128px); aspect-ratio: 1;
  display: grid; place-items: center;
}
.hero-seal-ring { width: 100%; height: 100%; animation: spin 22s linear infinite; }
.hero-seal-ring text {
  font-family: var(--mono); font-size: var(--fs-3xs); letter-spacing: .14em;
  fill: var(--ink-soft); text-transform: uppercase;
}
.hero-seal-dot {
  position: absolute; width: 12px; height: 12px; border-radius: 50%;
  background: var(--red);
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hero-seal-ring { animation: none; } }

.hero-scroll {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  color: var(--ink-soft); z-index: 5;
}
.hero-scroll .mono { font-size: var(--fs-2xs); letter-spacing: .2em; text-transform: uppercase; }
.hero-scroll-line { width: 1px; height: 46px; background: var(--line-strong); position: relative; overflow: hidden; }
.hero-scroll-line::after {
  content: ''; position: absolute; inset: 0; background: var(--red);
  animation: scroll-cue 2.1s var(--e-inout) infinite;
}
@keyframes scroll-cue {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}
.hero-scroll:hover { color: var(--red); }

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--sp-7); min-height: 0; }
  .hero-stage { max-width: 520px; margin-inline: auto; width: 100%; }
  .hero-scroll { display: none; }
}
@media (max-width: 560px) {
  .hero-proof { gap: var(--sp-5); }
  .hero-seal { display: none; }
}

/* ---------------------------------------------------------- Trust strip */
.trust-strip { border-block: 1px solid var(--line); background: var(--tint); }
.trust-inner {
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding-block: var(--sp-6);
}
.trust-item { display: flex; padding-inline: var(--sp-4); align-items: flex-start; }
.trust-item + .trust-item { border-left: 1px solid var(--line); }
.trust-item b { display: block; font-size: var(--fs-sm); font-weight: 500; margin-bottom: 3px; }
.trust-item span { display: block; font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.55; }
@media (max-width: 900px) {
  .trust-inner { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5) 0; }
  .trust-item:nth-child(odd) { border-left: 0; }
  .trust-item { padding-inline: var(--sp-3); }
}
@media (max-width: 520px) {
  .trust-inner { grid-template-columns: 1fr; }
  .trust-item + .trust-item { border-left: 0; }
}

/* ---------------------------------------------------------- Collections */
.collection-intro { max-width: 34ch; }
.collection-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.collection-card { display: flex; flex-direction: column; }
.collection-media {
  position: relative; aspect-ratio: 3 / 3.4; overflow: hidden;
  background: linear-gradient(160deg, var(--tint), var(--sand));
  border: 1px solid var(--line);
  display: grid; place-items: center;
  transition: border-color var(--t-mid);
}
.collection-card:hover .collection-media { border-color: var(--ink); }
.collection-art {
  position: absolute; width: 74%;
  transition: opacity .5s var(--e-out), transform .6s var(--e-out);
}
.collection-art svg { width: 100%; filter: drop-shadow(0 16px 22px rgba(18,16,15,.14)); }
.collection-art-alt { opacity: 0; transform: scale(1.1) translateY(6px); }
.collection-card:hover .collection-art { opacity: 0; transform: scale(.92); }
.collection-card:hover .collection-art-alt { opacity: 1; transform: none; }
.collection-count {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  font-size: var(--fs-2xs); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); background: rgba(255,255,255,.8);
  padding: 5px 10px; border-radius: var(--r-pill);
}
.collection-body { padding-top: var(--sp-4); }
.collection-body h3 { font-size: var(--fs-lg); margin-bottom: 8px; }
.collection-body p { font-size: var(--fs-sm); color: var(--ink-soft); margin-bottom: var(--sp-4); max-width: 34ch; }
@media (max-width: 880px) { .collection-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } }

/* ------------------------------------------------------------- Process */
.process-list {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5);
  counter-reset: step;
}
.process-step { position: relative; padding-top: var(--sp-5); border-top: 1px solid var(--line-strong); }
.process-num {
  font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: .16em;
  color: var(--red); display: block; margin-bottom: var(--sp-4);
}
.process-step h3 { font-size: var(--fs-lg); margin-bottom: 10px; }
.process-step p { font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.7; }
.process-step::after {
  content: ''; position: absolute; top: -1px; left: 0; height: 2px; width: 0;
  background: var(--red); transition: width .6s var(--e-out);
}
.process-step.is-in::after { width: 100%; transition-delay: inherit; }
@media (max-width: 900px) { .process-list { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6) var(--sp-5); } }
@media (max-width: 520px) { .process-list { grid-template-columns: 1fr; } }

/* --------------------------------------------------------- Tabs / grid */
.tab-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--sp-7); }
[data-home-grid] { transition: opacity .25s var(--e-out); }

/* ---------------------------------------------------------- Offer band */
.offer-band {
  position: relative; overflow: hidden; background: var(--ink); color: #fff;
  min-height: clamp(420px, 52vw, 560px); display: flex; align-items: center;
}
.offer-bg {
  position: absolute; inset: -12% -4%;
  background:
    radial-gradient(50% 60% at 78% 44%, rgba(194,33,39,.42) 0%, transparent 62%),
    radial-gradient(44% 56% at 16% 78%, rgba(194,33,39,.16) 0%, transparent 60%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 2px, transparent 2px 26px),
    #0D0C0B;
}
.offer-veil { position: absolute; inset: 0; background: linear-gradient(92deg, rgba(10,9,8,.92) 8%, rgba(10,9,8,.45) 58%, rgba(10,9,8,.72) 100%); }
.offer-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--sp-8);
  align-items: center; padding-block: var(--sp-9);
}
.offer-copy h2 { color: #fff; margin: var(--sp-4) 0 var(--sp-4); }
.offer-copy p { color: rgba(255,255,255,.72); max-width: 46ch; font-size: var(--fs-base); line-height: 1.75; }
.offer-code { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-6) 0; }
.offer-code .mono { color: rgba(255,255,255,.5); letter-spacing: .14em; text-transform: uppercase; }
.code-chip {
  position: relative; font-family: var(--mono); font-size: var(--fs-base);
  letter-spacing: .18em; color: #fff;
  border: 1px dashed rgba(255,255,255,.45); padding: 11px 20px;
  transition: all var(--t-fast) var(--e-out);
}
.code-chip:hover { border-color: var(--red-bright); color: var(--red-bright); border-style: solid; }
.code-chip.copied { background: var(--red); border-color: var(--red); color: #fff; }
.code-hint {
  position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%);
  font-family: var(--sans); font-size: var(--fs-2xs); letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255,255,255,.42); white-space: nowrap;
  opacity: 0; transition: opacity var(--t-fast);
}
.code-chip:hover .code-hint { opacity: 1; }
.offer-art { justify-self: center; width: min(100%, 420px); }
.offer-art svg { width: 100%; filter: drop-shadow(0 30px 40px rgba(0,0,0,.5)); }
@media (max-width: 900px) {
  .offer-inner { grid-template-columns: 1fr; }
  .offer-art { display: none; }
}

/* --------------------------------------------------------- Lens teaser */
.lens-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-9); align-items: center; }
.lens-visual { position: relative; aspect-ratio: 1 / .92; }
.lens-stack { position: absolute; inset: 0; display: grid; place-items: center; }
.lens-layer {
  position: absolute; width: 70%;
  transition: transform .7s var(--e-out);
}
.lens-layer svg { width: 100%; }
.lens-layer-1 { transform: translate(-18%, -16%) scale(.82); opacity: .5; }
.lens-layer-2 { transform: translate(0, 0) scale(1); z-index: 2; filter: drop-shadow(0 22px 30px rgba(18,16,15,.18)); }
.lens-layer-3 { transform: translate(18%, 16%) scale(.82); opacity: .5; }
.lens-visual:hover .lens-layer-1 { transform: translate(-26%, -22%) scale(.82); }
.lens-visual:hover .lens-layer-3 { transform: translate(26%, 22%) scale(.82); }
.lens-callouts { position: absolute; inset: 0; pointer-events: none; }
.callout {
  position: absolute; left: var(--x); top: var(--y);
  display: flex; flex-direction: column; gap: 1px;
  background: var(--paper); border: 1px solid var(--line);
  padding: 8px 13px; box-shadow: var(--shadow-sm);
  font-size: var(--fs-2xs); color: var(--ink-soft); line-height: 1.35;
}
.callout b { font-size: var(--fs-sm); color: var(--red); }
.lens-copy .lens-list { margin: var(--sp-6) 0; display: grid; gap: 12px; }
.lens-list li {
  padding-left: var(--sp-5); position: relative;
  font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.65;
}
.lens-list li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 12px; height: 1.5px; background: var(--red);
}
.lens-list b { color: var(--ink); font-weight: 500; }
@media (max-width: 940px) {
  .lens-grid { grid-template-columns: 1fr; gap: var(--sp-7); }
  .lens-visual { max-width: 460px; margin-inline: auto; width: 100%; }
}

/* -------------------------------------------------------- Testimonials */
.testimonials .section-head h2 { color: #fff; }
.icon-btn.on-dark { color: rgba(255,255,255,.75); border: 1px solid rgba(255,255,255,.24); }
.icon-btn.on-dark:hover { background: var(--red); border-color: var(--red); color: #fff; }
.testi-nav { display: flex; gap: 9px; }
.testi-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 1fr);
  gap: var(--sp-5); overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: var(--sp-4); scrollbar-width: none;
}
.testi-rail::-webkit-scrollbar { display: none; }
.testi-card {
  scroll-snap-align: start;
  border: 1px solid rgba(255,255,255,.16); padding: var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-4);
  transition: border-color var(--t-mid), background-color var(--t-mid);
}
.testi-card:hover { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.04); }
.testi-stars .star { color: rgba(255,255,255,.24); }
.testi-stars .star.on { color: var(--red-bright); }
.testi-card blockquote {
  font-family: var(--display); font-size: var(--fs-md); line-height: 1.6;
  color: #fff; font-weight: 400; flex: 1;
}
.testi-card figcaption { display: flex; flex-direction: column; gap: 2px; padding-top: var(--sp-4); border-top: 1px solid rgba(255,255,255,.14); }
.testi-card figcaption b { color: #fff; font-size: var(--fs-sm); font-weight: 500; }
.testi-card figcaption span { font-family: var(--mono); font-size: var(--fs-2xs); letter-spacing: .06em; color: rgba(255,255,255,.5); }

/* -------------------------------------------------------------- Journal */
.journal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.journal-card { cursor: pointer; display: flex; flex-direction: column; }
.journal-art {
  aspect-ratio: 16 / 10; border: 1px solid var(--line); overflow: hidden;
  transition: transform .6s var(--e-out);
}
.journal-card:hover .journal-art { transform: scale(1.015); }
.journal-art-1 { background: radial-gradient(80% 100% at 20% 10%, #F3E4E6, #E9D3D6 70%, #DCC0C4); }
.journal-art-2 { background: radial-gradient(80% 100% at 80% 20%, #EDE8DE, #DED5C4 70%, #CDC1AB); }
.journal-art-3 { background: radial-gradient(80% 100% at 40% 80%, #E2E9EA, #CFDBDD 70%, #BACBCE); }
.journal-art::after {
  content: ''; display: block; height: 100%;
  background: repeating-linear-gradient(120deg, rgba(255,255,255,.35) 0 1px, transparent 1px 22px);
}
.journal-body { padding-top: var(--sp-4); display: flex; flex-direction: column; gap: 9px; flex: 1; }
.journal-meta { color: var(--red); letter-spacing: .12em; text-transform: uppercase; font-size: var(--fs-2xs); }
.journal-card h3 { font-size: var(--fs-lg); }
.journal-card p { font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.65; flex: 1; }
.journal-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: var(--sp-3); margin-top: auto;
  font-family: var(--mono); font-size: var(--fs-2xs); color: var(--ink-soft);
}
@media (max-width: 900px) { .journal-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; } }

/* ---------------------------------------------------------------- Visit */
.visit { padding-block: var(--section-y); background: var(--tint); border-top: 1px solid var(--line); }
.visit-inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: center; }
.visit-copy h2 { margin: var(--sp-4) 0 var(--sp-4); }
.visit-hours { margin: var(--sp-6) 0; display: grid; gap: 10px; max-width: 380px; }
.visit-hours > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4);
  padding-bottom: 9px; border-bottom: 1px solid var(--line);
}
.visit-hours dt { font-size: var(--fs-sm); color: var(--ink-soft); }
.visit-hours dd { font-size: var(--fs-sm); }
.visit-map { border: 1px solid var(--line); overflow: hidden; background: var(--sand); }
.map-svg { width: 100%; height: auto; display: block; }
.map-pin { animation: pin-pulse 2.6s var(--e-inout) infinite; transform-origin: 330px 130px; }
@keyframes pin-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.09); } }
@media (prefers-reduced-motion: reduce) { .map-pin { animation: none; } }
@media (max-width: 900px) { .visit-inner { grid-template-columns: 1fr; } }


/* ==========================================================================
   2. SHOP
   ========================================================================== */

.crumb {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding-block: var(--sp-5) 0;
  font-family: var(--mono); font-size: var(--fs-xs);
  letter-spacing: .06em; color: var(--ink-soft);
}
.crumb a { transition: color var(--t-fast); }
.crumb a:hover { color: var(--red); }
.crumb span:last-child { color: var(--ink); }

/* The shared page head. Commerce pages override the bottom padding below --
   on shop there were 296 empty pixels between the eyebrow and the first
   product on a 900px screen, a third of the fold showing nothing. Marketing
   pages keep the roomier rhythm they were designed with. */
.page-head { padding-block: var(--sp-6) var(--sp-8); max-width: var(--maxw); }

.shop-page .page-head,
.cart-page .page-head,
.checkout-page .page-head {
  padding-block: var(--sp-5) var(--sp-5);
}
.shop-page .page-head h1,
.cart-page .page-head h1,
.checkout-page .page-head h1 {
  margin: var(--sp-2) 0 var(--sp-3);
}
.page-head h1 { margin: var(--sp-4) 0 var(--sp-4); font-size: var(--fs-3xl); }
.page-head .lead { max-width: 56ch; }

.shop {
  display: grid; grid-template-columns: 246px minmax(0, 1fr);
  gap: var(--sp-8); align-items: start;
  padding-bottom: var(--section-y);
}

/* ------------------------------------------------------------- Filters */
.filters { position: sticky; top: calc(var(--header-h) + 20px); }
.filters-head { display: none; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); }
.filters-head h2 { font-size: var(--fs-lg); }
.filter-block { padding-bottom: var(--sp-5); margin-bottom: var(--sp-5); border-bottom: 1px solid var(--line); }
.filter-block:last-of-type { border-bottom: 0; }
.filter-block h3 {
  font-family: var(--mono); font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft);
  margin-bottom: var(--sp-3);
}
.filter-opts { display: grid; gap: 1px; }
.filter-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 8px 10px; text-align: left;
  font-size: var(--fs-sm); color: var(--ink-soft); border-radius: var(--r-sm);
  transition: background-color var(--t-fast), color var(--t-fast);
}
.filter-opt:hover { background: var(--tint); color: var(--ink); }
.filter-opt.on { background: var(--ink); color: #fff; }
.filter-opt.on .filter-count { color: rgba(255,255,255,.6); }
.filter-count { font-size: var(--fs-2xs); color: var(--ink-soft); }
.filter-opt.is-empty { opacity: .38; }
.filter-opts-wrap { grid-template-columns: 1fr 1fr; gap: 1px 4px; }
.filter-opts-wrap .filter-opt { padding: 7px 8px; font-size: var(--fs-xs); }

.filter-colors { display: flex; flex-wrap: wrap; gap: 7px; }
.color-opt {
  width: 28px; height: 28px; border-radius: 50%; padding: 2px;
  border: 1px solid var(--line-strong);
  transition: all var(--t-fast) var(--e-out);
}
.color-opt span { display: block; width: 100%; height: 100%; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.color-opt:hover { transform: scale(1.1); }
.color-opt.on { border-color: var(--ink); border-width: 2px; }
.color-any {
  width: auto; padding: 0 11px; border-radius: var(--r-pill);
  font-family: var(--mono); font-size: var(--fs-2xs); letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft);
}

.price-readout { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: var(--fs-sm); }
.price-readout b { color: var(--ink); }
.price-dash { flex: 1; height: 1px; background: var(--line); }
.price-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 3px; background: var(--line-strong); outline: none; cursor: pointer;
}
.price-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--red); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--red);
  cursor: grab; transition: transform var(--t-fast) var(--e-spring);
}
.price-range::-webkit-slider-thumb:hover { transform: scale(1.18); }
.price-range::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--red); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--red); cursor: grab;
}
.price-ticks { display: flex; justify-content: space-between; margin-top: 9px; font-size: var(--fs-2xs); color: var(--ink-soft); }

/* ------------------------------------------------------------- Results */
.results-bar {
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  padding-bottom: var(--sp-4); margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--line);
}
.results-count { font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink-soft); letter-spacing: .05em; }
.results-tools { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.select-sort { min-height: 40px; padding-block: 8px; font-size: var(--fs-sm); width: auto; min-width: 178px; }

.view-toggle { display: flex; border: 1px solid var(--line-strong); }
.view-toggle button {
  width: 38px; height: 40px; display: grid; place-items: center;
  color: var(--ink-soft); transition: all var(--t-fast);
}
.view-toggle button + button { border-left: 1px solid var(--line-strong); }
.view-toggle button:hover { color: var(--ink); }
.view-toggle button.on { background: var(--ink); color: #fff; }

.filters-toggle { display: none; align-items: center; gap: 8px; }
.filters-tally {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill);
  background: var(--red); color: #fff; font-family: var(--mono); font-size: var(--fs-2xs);
  display: inline-flex; align-items: center; justify-content: center;
}

.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: var(--sp-5); }
.active-label { color: var(--ink-soft); letter-spacing: .12em; text-transform: uppercase; font-size: var(--fs-2xs); }
.active-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--tint); border: 1px solid var(--line);
  font-size: var(--fs-xs); color: var(--ink);
  transition: all var(--t-fast) var(--e-out);
}
.active-chip:hover { border-color: var(--red); color: var(--red); background: var(--red-wash); }
.active-clear { font-size: var(--fs-xs); margin-left: 4px; }

.product-grid.is-roomy { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1080px) { .product-grid.is-roomy { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.results-empty { text-align: center; padding: var(--sp-10) var(--sp-4); }
.results-empty-art { width: 170px; margin: 0 auto var(--sp-5); opacity: .35; }
.results-empty h3 { margin-bottom: 10px; }
.results-empty p { max-width: 46ch; margin: 0 auto var(--sp-6); font-size: var(--fs-sm); }

.results-more { text-align: center; margin-top: var(--sp-8); display: grid; gap: 12px; justify-items: center; }
.results-more .mono { font-size: var(--fs-2xs); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }

.recently { border-top: 1px solid var(--line); }

.help-band { background: var(--tint); border-top: 1px solid var(--line); padding-block: var(--sp-9); }
.help-inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-7); align-items: center; }
.help-inner h2 { margin: var(--sp-3) 0 var(--sp-4); }
.help-inner .lead { max-width: 48ch; }
.help-inner .cluster { justify-content: flex-end; }
@media (max-width: 900px) {
  .help-inner { grid-template-columns: 1fr; }
  .help-inner .cluster { justify-content: flex-start; }
}

@media (max-width: 980px) {
  .shop { grid-template-columns: 1fr; }
  .filters-toggle { display: inline-flex; }
  .filters {
    position: fixed; inset: 0 auto 0 0; z-index: 200;
    width: min(340px, 88vw); background: var(--paper);
    padding: var(--sp-5); overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .42s var(--e-inout);
    box-shadow: 8px 0 40px rgba(18,16,15,.14);
  }
  .filters.open { transform: translateX(0); }
  .filters-head { display: flex; }
  .results-count { order: 3; width: 100%; }
  .results-tools { margin-left: auto; }
}
@media (max-width: 560px) {
  .results-tools { width: 100%; margin-left: 0; }
  .select-sort { flex: 1; min-width: 0; }
}


/* ==========================================================================
   3. PRODUCT
   ========================================================================== */

/* 45 / 55. The frame earns its space, but the right-hand column is where the
   work happens — four lens steps, a twelve-field prescription and a running
   total — and it was the narrower of the two at 47%. Reversing the ratio gives
   the configurator room to breathe without shrinking the photograph below the
   size at which a frame can actually be judged. */
.pdp {
  display: grid; grid-template-columns: 45fr 55fr;
  gap: var(--sp-7); align-items: start;
  padding-block: var(--sp-5) var(--sp-8);
}

/* ------------------------------------------------------------- Gallery */
.pdp-gallery { position: sticky; top: calc(var(--header-h) + 20px); }
.gallery-main {
  position: relative; aspect-ratio: 4 / 3.2; overflow: hidden;
  background: linear-gradient(165deg, var(--tint), var(--sand));
  border: 1px solid var(--line);
  display: grid; place-items: center;
  cursor: zoom-in;
}
.gallery-stage {
  width: 78%; transition: transform .55s var(--e-out);
}
.gallery-main.zoomed .gallery-stage { transform: scale(1.55); }
.gallery-stage svg { width: 100%; height: auto; filter: drop-shadow(0 24px 30px rgba(18,16,15,.18)); }
.gallery-badge { position: absolute; top: 0; left: 0; z-index: 3; }
.gallery-badge .card-badge { position: static; display: inline-block; margin: 14px; }
.gallery-wish {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.86); color: var(--ink-soft);
  transition: all var(--t-fast) var(--e-out);
}
.gallery-wish svg { width: 20px; height: 20px; }
.gallery-wish:hover { background: #fff; color: var(--red); transform: scale(1.06); }
.gallery-wish.on { color: var(--red); }
.gallery-hint {
  position: absolute; bottom: 12px; right: 14px; z-index: 3;
  font-size: var(--fs-2xs); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); opacity: 0; transition: opacity var(--t-mid);
}
.gallery-main:hover .gallery-hint { opacity: 1; }

.gallery-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px; }
.gallery-thumbs button {
  border: 1px solid var(--line); background: var(--tint);
  padding: 10px 8px 8px; display: grid; gap: 6px; justify-items: center;
  transition: all var(--t-fast) var(--e-out);
}
.gallery-thumbs button:hover { border-color: var(--ink-faint); }
.gallery-thumbs button.on { border-color: var(--ink); background: var(--paper); }
.thumb-art { width: 100%; display: block; }
.thumb-art svg { width: 100%; height: auto; }
.thumb-label { font-size: var(--fs-3xs); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.gallery-thumbs button.on .thumb-label { color: var(--ink); }

/* ---------------------------------------------------------- Buy panel */
.pdp-info h1 { font-size: var(--fs-2xl); margin: var(--sp-3) 0 var(--sp-3); }
.pdp-rating { display: inline-flex; align-items: center; gap: 9px; font-size: var(--fs-xs); color: var(--ink-soft); }
.pdp-rating:hover { color: var(--red); }
.pdp-price {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px;
  margin: var(--sp-5) 0 var(--sp-4);
}
.pdp-price b { font-size: var(--fs-xl); font-weight: 500; color: var(--red); }
.pdp-price s { font-size: var(--fs-md); color: var(--ink-soft); }
.price-note { font-size: var(--fs-xs); color: var(--ink-soft); }
.pdp-blurb { font-size: var(--fs-base); color: var(--ink-soft); line-height: 1.75; margin-bottom: var(--sp-5); }

.pdp-ticket {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line); background: var(--tint);
  margin-bottom: var(--sp-6);
}
.pdp-ticket > div { padding: 13px 12px; display: grid; gap: 3px; }
.pdp-ticket > div + div { border-left: 1px solid var(--line); }
.pdp-ticket span {
  font-family: var(--mono); font-size: var(--fs-3xs); letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft);
}
.pdp-ticket b { font-size: var(--fs-xs); font-weight: 500; }
@media (max-width: 520px) {
  .pdp-ticket { grid-template-columns: 1fr 1fr; }
  .pdp-ticket > div:nth-child(odd) { border-left: 0; }
  .pdp-ticket > div:nth-child(n+3) { border-top: 1px solid var(--line); }
}

.opt-block { margin-bottom: var(--sp-6); }
.opt-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: 11px; }
.opt-head .label { margin-bottom: 0; }
.opt-head b { font-size: var(--fs-sm); font-weight: 500; }
.opt-help {
  font-size: var(--fs-xs); color: var(--ink-soft);
  border-bottom: 1px solid var(--line-strong); padding-bottom: 1px;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.opt-help:hover { color: var(--red); border-color: var(--red); }
.chip-mm { font-family: var(--mono); font-size: var(--fs-2xs); opacity: .7; margin-left: 3px; }

/* ------------------------------------------------------ Lens builder */
.lens-builder {
  border: 1px solid var(--line); padding: var(--sp-5);
  margin-bottom: var(--sp-6); background: var(--tint);
}
.lens-total { font-size: var(--fs-xs); color: var(--red); letter-spacing: .06em; }
.lens-types { display: grid; gap: 8px; }
.lens-card {
  display: grid; gap: 4px; text-align: left;
  padding: 13px 15px; background: var(--paper);
  border: 1px solid var(--line-strong);
  transition: all var(--t-fast) var(--e-out);
}
.lens-card:hover { border-color: var(--ink-faint); }
.lens-card.on { border-color: var(--ink); border-width: 1.5px; box-shadow: inset 0 0 0 1px var(--ink); }
.lens-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.lens-card-top b { font-size: var(--fs-sm); font-weight: 500; }
.lens-card-price { font-size: var(--fs-xs); color: var(--red); }
.lens-card-note { font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.5; }

/* A step heading in a clinical flow, not a technical label. It was set in
   uppercase monospace with wide tracking, which turned a whole question —
   "what type of vision correction do you need?" — into something that reads
   like a machine label. Sentence case, Manrope, at a size that says this is a
   question being put to the customer. */
.lens-step {
  display: block; margin-bottom: var(--sp-2);
  font-family: var(--display);
  font-size: var(--fs-md); font-weight: 600; letter-spacing: -0.01em;
  text-transform: none; color: var(--ink);
}
.lens-step-note { font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.55; margin-bottom: 11px; }

.lens-purposes { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--line); }
/* The purpose chips carry a price, unlike the thickness chips, because this is
   where the customer's money actually changes: near is GH¢299 against GH¢399
   for distance. */
.lens-purposes .lens-chip-name .mono { color: var(--red); margin-left: 4px; }

.lens-materials { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.lens-chips { display: grid; gap: 7px; }
/* Single column since the price came off the chip — thickness is priced
   against the chosen lens type and is shown in the running total instead. */
.lens-chip {
  display: grid; gap: 2px;
  text-align: left; padding: 11px 14px;
  background: var(--paper); border: 1px solid var(--line-strong);
  transition: all var(--t-fast) var(--e-out);
}
.lens-chip:hover { border-color: var(--ink-faint); }
.lens-chip.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.lens-chip-name { font-size: var(--fs-sm); font-weight: 500; }
.lens-chip-note { font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.5; }

/* A thickness the entered prescription cannot be cut in. Left on screen and
   closed rather than removed, so the ladder still explains itself: the
   customer can see the cheaper lens exists and why it is not being offered. */
.lens-chip.is-unavailable {
  cursor: not-allowed; background: var(--tint);
  border-color: var(--line); border-style: dashed;
}
.lens-chip.is-unavailable .lens-chip-name { color: var(--ink-soft); text-decoration: line-through; }
.lens-chip.is-unavailable .lens-chip-note { color: var(--ink-soft); }
.lens-chip.is-unavailable:hover { border-color: var(--line); }

.lens-gate-note {
  margin-top: 9px; font-size: var(--fs-xs); line-height: 1.5;
  color: var(--ink-soft); border-left: 2px solid var(--red); padding-left: 10px;
}

.lens-breakdown {
  margin-top: var(--sp-5); padding-top: var(--sp-4);
  border-top: 1px dashed var(--line-strong);
  display: grid; gap: 6px;
}
.lens-breakdown > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  font-size: var(--fs-xs); color: var(--ink-soft);
}
.lens-breakdown b { font-size: var(--fs-xs); color: var(--ink); }
.lens-breakdown-total {
  order: -1; padding-bottom: 6px; margin-bottom: 2px;
  border-bottom: 1px solid var(--line);
}

.lens-addons { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.lens-addons .label { margin-bottom: 10px; }

/* Cart: prescription pairs read differently from frame-only pairs */
.cart-line.is-rx .line-art { box-shadow: inset 3px 0 0 var(--red); }
.line-kind { color: var(--red); }
.line-rx {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); margin-bottom: 10px;
}
.line-rx::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.line-rx.is-ok { color: var(--success); }
.line-rx.is-wait { color: var(--warning); }
.addon-check {
  display: grid; grid-template-columns: auto 1fr auto; align-items: start;
  gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--line);
}
.addon-check:last-child { border-bottom: 0; }
.addon-text { display: grid; gap: 2px; }
.addon-text b { font-size: var(--fs-sm); font-weight: 500; color: var(--ink); }
.addon-text b em {
  font-style: normal; font-family: var(--mono); font-size: var(--fs-3xs);
  letter-spacing: .1em; text-transform: uppercase; color: var(--red);
  border: 1px solid var(--red); padding: 1px 5px; margin-left: 5px; vertical-align: 2px;
}
.addon-text > span { font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.5; }
.addon-price { font-size: var(--fs-xs); color: var(--ink-soft); white-space: nowrap; }

/* A coating that cannot be fitted alongside the one already chosen. Shown and
   closed, with the reason written on the row, rather than quietly refusing to
   tick — a disabled box saying "Not available with Polarised" answers the
   question the customer is about to ask. */
/* Dimmed and labelled "Replaces X", but still clickable: a customer who
   ticked Hard coat and wants Tint should get it in one click rather than
   having to work out that something must be unticked first. Disabling these
   rows produced exactly that dead end. The row says what will happen; the
   click does it. */
.addon-check.is-replaces { opacity: .68; }
.addon-check.is-replaces .addon-text > span { color: var(--red); }

/* Said once under the list rather than repeated on every closed row. */
.addon-note {
  margin-top: 10px; padding-left: 10px;
  border-left: 2px solid var(--line-strong);
  font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.55;
}

/* Free standard coatings. Marked rather than left blank, so "no figure" reads
   as included in the price instead of as a missing price. */
.addon-price.is-free {
  font-family: var(--mono); font-size: var(--fs-3xs);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft);
}

/* Already paid for in the frame price. Shown so the customer can see they
   have it, locked so they cannot be charged for it twice. */
.addon-check.is-included { opacity: .8; }
.addon-price.is-included {
  font-family: var(--mono); font-size: var(--fs-3xs);
  letter-spacing: .1em; text-transform: uppercase; color: var(--success);
}

.rx-box {
  margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--line);
}
.rx-box.shake { animation: shake .5s var(--e-out); }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-7px); } 40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); } 80% { transform: translateX(3px); }
}
.rx-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.rx-note { font-size: var(--fs-3xs); letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.rx-choices { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 13px; }
.rx-choice {
  padding: 8px 14px; border: 1px solid var(--line-strong); background: var(--paper);
  font-size: var(--fs-xs); border-radius: var(--r-pill);
  transition: all var(--t-fast) var(--e-out);
}
.rx-choice:hover { border-color: var(--ink); }
.rx-choice.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.rx-drop {
  display: flex; align-items: center; gap: 13px; cursor: pointer;
  padding: 16px; border: 1.5px dashed var(--line-strong); background: var(--paper);
  transition: all var(--t-fast) var(--e-out);
}
.rx-drop:hover { border-color: var(--red); background: var(--red-wash); }
.rx-drop svg { color: var(--red); flex: none; }
.rx-drop span { display: grid; gap: 2px; }
.rx-drop b { font-size: var(--fs-sm); font-weight: 500; }
.rx-drop b + span, .rx-drop span > span { font-size: var(--fs-xs); color: var(--ink-soft); }
.rx-file {
  display: flex; align-items: center; gap: 9px; margin-top: 10px;
  padding: 10px 13px; font-size: var(--fs-xs);
}
.rx-file svg { width: 15px; height: 15px; flex: none; }
.rx-file.is-ok { background: rgba(27,127,90,.09); color: var(--success); }
.rx-file.is-error { background: rgba(192,57,43,.09); color: var(--danger); }
.rx-file-clear { margin-left: auto; text-decoration: underline; color: inherit; font-size: var(--fs-xs); }
.rx-text { font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.65; }

/* Said plainly where no prescription has been supplied yet: the thickness on
   this order is provisional and the practice confirms it before cutting. */
.rx-verify {
  margin-top: 9px; padding-left: 10px;
  border-left: 2px solid var(--warning, #b26a00);
  font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.6;
}

.pdp-buy { display: flex; gap: 10px; margin-bottom: 10px; }
.pdp-buy .qty { flex: none; }
.pdp-buy .qty button { width: 44px; height: 100%; }
.pdp-buy .qty span { min-width: 40px; }

.pdp-assure { margin-top: var(--sp-6); display: grid; gap: 11px; }
.pdp-assure li { display: flex; align-items: flex-start; gap: 11px; font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.5; }
.pdp-assure svg { width: 17px; height: 17px; color: var(--red); flex: none; margin-top: 1px; }

.pdp-stock {
  display: flex; align-items: center; gap: 9px;
  margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: .04em; color: var(--ink-soft);
}
.pdp-stock .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.pdp-stock.is-good .dot { background: var(--success); box-shadow: 0 0 0 3px rgba(27,127,90,.16); }
.pdp-stock.is-low .dot  { background: var(--warning); box-shadow: 0 0 0 3px rgba(180,105,14,.16); }
.pdp-stock.is-out .dot  { background: var(--danger); box-shadow: 0 0 0 3px rgba(192,57,43,.16); }

@media (max-width: 940px) {
  .pdp { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
  .pdp-gallery { position: static; }
}
/* Narrow screens can't fit the quantity stepper and a nowrap price button
   side by side — stack them rather than let the row overflow. */
@media (max-width: 430px) {
  .pdp-buy { flex-wrap: wrap; }
  .pdp-buy .qty { width: 100%; justify-content: space-between; }
  .pdp-buy .qty span { flex: 1; }
}

/* ----------------------------------------------------- Detail section */
.pdp-detail {
  display: grid; grid-template-columns: 1.4fr .8fr; gap: var(--sp-8);
  padding-bottom: var(--section-y); align-items: start;
}
.acc-item { border-top: 1px solid var(--line); }
.acc-item:last-child { border-bottom: 1px solid var(--line); }
.acc-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-5) 0; text-align: left;
  font-family: var(--display); font-size: var(--fs-lg); font-weight: 500;
  transition: color var(--t-fast);
}
.acc-trigger:hover { color: var(--red); }
.acc-icon { position: relative; width: 15px; height: 15px; flex: none; }
.acc-icon::before, .acc-icon::after {
  content: ''; position: absolute; background: currentColor;
  transition: transform var(--t-mid) var(--e-out), opacity var(--t-mid);
}
.acc-icon::before { left: 0; right: 0; top: 7px; height: 1.5px; }
.acc-icon::after { top: 0; bottom: 0; left: 7px; width: 1.5px; }
.acc-item.open .acc-icon::after { transform: scaleY(0); opacity: 0; }
.acc-panel { overflow: hidden; }
.acc-inner { padding-bottom: var(--sp-5); display: grid; gap: var(--sp-4); max-width: 62ch; }
.acc-inner p { font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.8; }
.feature-list { display: grid; gap: 9px; margin-top: 4px; }
.feature-list li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-sm); color: var(--ink-soft); }
.feature-list svg { width: 15px; height: 15px; color: var(--red); flex: none; margin-top: 4px; }

.spec-table { font-size: var(--fs-sm); }
.spec-table th, .spec-table td { padding: 11px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.spec-table th { font-weight: 400; color: var(--ink-soft); width: 42%; }
.spec-table td { color: var(--ink); }

.pdp-measure {
  border: 1px solid var(--line); padding: var(--sp-5); background: var(--tint);
  position: sticky; top: calc(var(--header-h) + 20px);
}
.pdp-measure h3 { font-size: var(--fs-md); margin-bottom: var(--sp-4); }
.measure-art { padding: var(--sp-3) 0 var(--sp-4); }
.measure-art svg { width: 100%; opacity: .85; }
.measure-list { display: grid; gap: 0; }
.measure-list > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3);
  padding: 9px 0; border-bottom: 1px solid var(--line);
}
.measure-list dt { font-size: var(--fs-xs); color: var(--ink-soft); }
.measure-list dd { font-size: var(--fs-xs); }
.measure-note { margin-top: var(--sp-4); font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.6; }
@media (max-width: 940px) {
  .pdp-detail { grid-template-columns: 1fr; }
  .pdp-measure { position: static; }
}

/* ---------------------------------------------------------- Reviews */
.reviews-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--sp-8); align-items: start; }
.reviews-summary { border: 1px solid var(--line); padding: var(--sp-5); position: sticky; top: calc(var(--header-h) + 20px); }
.rv-score { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.rv-score b { font-family: var(--display); font-size: var(--fs-2xl); font-weight: 500; line-height: 1; }
.rv-score span { font-size: var(--fs-xs); color: var(--ink-soft); }
.rv-total { font-size: var(--fs-2xs); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin: 10px 0 var(--sp-4); }
.rv-bars { display: grid; gap: 7px; }
.rv-bar { display: grid; grid-template-columns: 26px 1fr 20px; align-items: center; gap: 9px; font-size: var(--fs-2xs); color: var(--ink-soft); }
.rv-track { height: 4px; background: var(--line); overflow: hidden; }
.rv-track span { display: block; height: 100%; background: var(--red); transition: width .8s var(--e-out); }
.rv-bar-n { text-align: right; }
.rv-note { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.55; }

.reviews-list { display: grid; gap: var(--sp-5); }
.rv-item { border-bottom: 1px solid var(--line); padding-bottom: var(--sp-5); }
.rv-head { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: 10px; flex-wrap: wrap; }
.rv-verified {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: var(--fs-3xs); letter-spacing: .08em;
  text-transform: uppercase; color: var(--success);
}
.rv-verified svg { width: 12px; height: 12px; }
.rv-item h4 { font-size: var(--fs-md); margin-bottom: 7px; }
.rv-item p { font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.75; margin-bottom: 11px; }
.rv-item footer { font-size: var(--fs-2xs); letter-spacing: .06em; color: var(--ink-soft); }
@media (max-width: 860px) {
  .reviews-grid { grid-template-columns: 1fr; }
  .reviews-summary { position: static; }
}

/* ------------------------------------------------------- Sticky buy */
.sticky-buy {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 140;
  display: none; align-items: center; gap: var(--sp-4);
  padding: 11px var(--gutter); background: rgba(255,255,255,.97);
  backdrop-filter: blur(12px); border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px rgba(18,16,15,.07);
}
.sticky-info { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; }
.sticky-art { width: 56px; flex: none; }
.sticky-art svg { width: 100%; }
.sticky-info > span:last-child { display: grid; gap: 1px; min-width: 0; }
.sticky-info b { font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-info .mono { font-size: var(--fs-xs); color: var(--red); }
.sticky-buy .btn { flex: none; }
@media (max-width: 940px) { .sticky-buy { display: flex; } }
@media (max-width: 420px) { .sticky-buy .btn { padding-inline: 18px; font-size: var(--fs-2xs); } }

/* ------------------------------------------------------- Fit & review */
.modal-narrow { width: min(560px, 100%); }
.fit-body { padding: var(--sp-7) var(--sp-6); }
.fit-body h3 { margin: var(--sp-3) 0 var(--sp-3); }
.fit-body > p { font-size: var(--fs-sm); line-height: 1.7; }
.fit-diagram { margin: var(--sp-5) 0; padding: var(--sp-5); background: var(--tint); border: 1px solid var(--line); }
.fit-diagram svg { width: 100%; }
.fit-list { display: grid; gap: 0; margin-bottom: var(--sp-5); }
.fit-list > div { padding: 12px 0; border-bottom: 1px solid var(--line); }
.fit-list dt { font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: .06em; margin-bottom: 4px; }
.fit-list dd { font-size: var(--fs-sm); color: var(--ink-soft); }
.fit-foot { font-size: var(--fs-xs); color: var(--ink-soft); margin-bottom: var(--sp-5); }

.review-form { padding: var(--sp-7) var(--sp-6); }
.review-form h3 { margin: var(--sp-3) 0 var(--sp-5); }
.rating-input { display: flex; gap: 5px; }
.rate-star {
  width: 30px; height: 30px; color: var(--line-strong);
  transition: color var(--t-fast), transform var(--t-fast) var(--e-spring);
}
.rate-star svg { width: 100%; height: 100%; }
.rate-star:hover { transform: scale(1.15); color: var(--red-bright); }
.rate-star.on { color: var(--red); }
.review-disclaimer { margin-top: var(--sp-4); font-size: var(--fs-xs); color: var(--ink-soft); text-align: center; }


/* ==========================================================================
   4. CART & CHECKOUT
   ========================================================================== */

.cart-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--sp-8); align-items: start; padding-bottom: var(--section-y);
}
.cart-head {
  display: grid; grid-template-columns: 1fr 150px 110px; gap: var(--sp-4);
  padding-bottom: 12px; border-bottom: 1px solid var(--ink);
  font-size: var(--fs-2xs); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft);
}
.cart-head span:nth-child(2) { text-align: center; }
.cart-head span:last-child { text-align: right; }

.cart-line {
  display: grid; grid-template-columns: 132px 1fr 150px 110px;
  gap: var(--sp-4); align-items: center;
  padding: var(--sp-5) 0; border-bottom: 1px solid var(--line);
}
.line-art {
  background: var(--tint); border: 1px solid var(--line); padding: 10px;
  display: grid; place-items: center; transition: border-color var(--t-fast);
}
.line-art:hover { border-color: var(--red); }
.line-art svg { width: 100%; }
.line-info h3 { font-size: var(--fs-md); margin-bottom: 4px; }
.line-info h3 a:hover { color: var(--red); }
.line-sku { font-size: var(--fs-2xs); letter-spacing: .1em; color: var(--ink-soft); margin-bottom: 10px; }
.line-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 11px; }
.line-chip {
  font-size: var(--fs-2xs); padding: 3px 9px; border-radius: var(--r-pill);
  background: var(--tint); border: 1px solid var(--line); color: var(--ink-soft);
}
.line-links { display: flex; gap: var(--sp-4); }
.line-link {
  font-size: var(--fs-xs); color: var(--ink-soft);
  border-bottom: 1px solid var(--line-strong); padding-bottom: 1px;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.line-link:hover { color: var(--red); border-color: var(--red); }
.line-link.is-danger:hover { color: var(--danger); border-color: var(--danger); }
.line-qty { display: grid; justify-items: center; gap: 8px; }
.line-unit { font-size: var(--fs-2xs); color: var(--ink-soft); }
.line-total { text-align: right; font-size: var(--fs-md); }

.cart-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); padding-top: var(--sp-5); flex-wrap: wrap;
}
.cart-upsell { margin-top: var(--sp-9); padding-top: var(--sp-7); border-top: 1px solid var(--line); }
.cart-upsell h3 { font-size: var(--fs-lg); margin-bottom: 6px; }
.cart-upsell p { font-size: var(--fs-sm); margin-bottom: var(--sp-5); }

/* --------------------------------------------------------- Summary card */
.cart-summary, .checkout-summary { position: sticky; top: calc(var(--header-h) + 20px); }
.summary-card { border: 1px solid var(--line); padding: var(--sp-5); background: var(--tint); }
.summary-card h2 { font-size: var(--fs-lg); margin-bottom: var(--sp-5); }

.promo { padding-bottom: var(--sp-5); border-bottom: 1px solid var(--line); margin-bottom: var(--sp-5); }
.promo-row { display: flex; gap: 8px; }
.promo-row .input { flex: 1; min-height: 42px; padding-block: 10px; }
.promo-msg { margin-top: 8px; font-size: var(--fs-xs); min-height: 16px; }
.promo-msg.is-ok { color: var(--success); }
.promo-msg.is-err { color: var(--danger); }
.promo-active { display: flex; align-items: center; gap: 9px; margin-top: 10px; }
.promo-tag {
  flex: 1; font-family: var(--mono); font-size: var(--fs-2xs); letter-spacing: .05em;
  background: var(--red-wash); color: var(--red); padding: 7px 11px;
  border: 1px dashed var(--red);
}
.promo-drop { width: 26px; height: 26px; display: grid; place-items: center; color: var(--ink-soft); }
.promo-drop svg { width: 14px; height: 14px; }
.promo-drop:hover { color: var(--danger); }

.ship-picker { padding-bottom: var(--sp-5); border-bottom: 1px solid var(--line); margin-bottom: var(--sp-5); }
.ship-picker .label { margin-bottom: 10px; }
.ship-opt {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 11px; padding: 12px 13px; cursor: pointer;
  background: var(--paper); border: 1px solid var(--line-strong);
  transition: all var(--t-fast) var(--e-out);
}
.ship-opt + .ship-opt { margin-top: 7px; }
.ship-opt:hover { border-color: var(--ink-faint); }
.ship-opt.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.ship-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.ship-dot {
  width: 17px; height: 17px; border-radius: 50%; flex: none;
  border: 1px solid var(--line-strong); position: relative;
  transition: border-color var(--t-fast);
}
.ship-dot::after {
  content: ''; position: absolute; inset: 3.5px; border-radius: 50%;
  background: var(--red); transform: scale(0);
  transition: transform var(--t-fast) var(--e-spring);
}
.ship-opt.on .ship-dot { border-color: var(--red); }
.ship-opt.on .ship-dot::after { transform: scale(1); }
.ship-opt input:focus-visible + .ship-dot { outline: 2px solid var(--red); outline-offset: 2px; }
.ship-text { display: grid; gap: 2px; }
.ship-text b { font-size: var(--fs-sm); font-weight: 500; }
.ship-text span { font-size: var(--fs-xs); color: var(--ink-soft); }
.ship-price { font-size: var(--fs-xs); white-space: nowrap; }

.totals { display: grid; gap: 9px; margin-bottom: var(--sp-5); }
.totals > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); }
.totals dt { font-size: var(--fs-sm); color: var(--ink-soft); }
.totals dd { font-size: var(--fs-sm); }
.totals .is-discount dt, .totals .is-discount dd { color: var(--success); }
.totals-grand {
  padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--line-strong);
}
.totals-grand dt { font-size: var(--fs-md); color: var(--ink); font-weight: 500; }
.totals-grand dd { font-size: var(--fs-lg); color: var(--red); }
.totals-note {
  grid-column: 1 / -1; font-size: var(--fs-xs); color: var(--ink-soft);
  line-height: 1.55; margin-top: 4px;
}
.totals-note.is-good { color: var(--success); display: flex; align-items: center; gap: 6px; }
.totals-note svg { width: 14px; height: 14px; }

.summary-assure { margin-top: var(--sp-5); display: grid; gap: 8px; }
.summary-assure li {
  position: relative; padding-left: 18px;
  font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.5;
}
.summary-assure li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 8px; height: 1.5px; background: var(--red);
}

/* ------------------------------------------------------------ Cart empty */
.cart-empty { text-align: center; padding-bottom: var(--section-y); }
.cart-empty-art { width: 190px; margin: 0 auto var(--sp-5); opacity: .35; }
.cart-empty h2 { margin-bottom: 12px; }
.cart-empty .lead { max-width: 46ch; margin: 0 auto var(--sp-6); }
.cart-empty-picks { margin-top: var(--sp-10); text-align: left; }
.cart-empty-picks h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-5); text-align: center; }

@media (max-width: 1000px) {
  .cart-layout { grid-template-columns: 1fr; }
  .cart-summary { position: static; }
}
@media (max-width: 720px) {
  .cart-head { display: none; }
  .cart-line { grid-template-columns: 92px 1fr; grid-template-areas: 'art info' 'qty total'; row-gap: var(--sp-4); }
  .line-art { grid-area: art; }
  .line-info { grid-area: info; }
  .line-qty { grid-area: qty; justify-items: start; }
  .line-total { grid-area: total; text-align: right; align-self: center; }
}

/* ========================== Checkout ========================== */
/* Checkout is a task, not a page to linger on: the vertical rhythm of a
   marketing section only pushes the form further from the fold. */
.checkout { padding-block: var(--sp-5) var(--sp-9); }
.checkout-head { margin-bottom: var(--sp-5); }
.checkout-head h1 { font-size: var(--fs-2xl); margin-bottom: var(--sp-5); }

.steps { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.step {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 16px 9px 9px; border: 1px solid var(--line);
  font-size: var(--fs-xs); color: var(--ink-soft);
  transition: all var(--t-mid) var(--e-out);
}
.step-num {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--line); color: var(--ink-soft);
  font-family: var(--mono); font-size: var(--fs-xs);
  transition: all var(--t-mid) var(--e-out);
}
.step.on { border-color: var(--ink); color: var(--ink); }
.step.on .step-num { background: var(--red); color: #fff; }
.step.done { border-color: var(--line-strong); color: var(--ink-soft); }
.step.done .step-num { background: var(--success); color: #fff; }
.step.done .step-num::after { content: '✓'; }
.step.done .step-num { font-size: 0; }
.step.done .step-num::after { font-size: var(--fs-xs); }

.checkout-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--sp-8); align-items: start; }
.step-panel { animation: step-in .45s var(--e-out); }
@keyframes step-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.step-panel h2 { font-size: var(--fs-xl); margin-bottom: var(--sp-3); }
.step-intro { font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.7; margin-bottom: var(--sp-6); max-width: 60ch; }
.step-panel .ship-picker { border-bottom: 0; padding-bottom: 0; }
.opt-tag {
  font-family: var(--sans); font-size: var(--fs-2xs); letter-spacing: .04em;
  text-transform: none; color: var(--ink-soft); margin-left: 5px;
}
.delivery-fields { animation: step-in .35s var(--e-out); }

.step-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); margin-top: var(--sp-7); padding-top: var(--sp-5);
  border-top: 1px solid var(--line); flex-wrap: wrap;
}

.rx-choices-lg { margin-bottom: var(--sp-5); }
.rx-choices-lg .rx-choice { padding: 11px 18px; font-size: var(--fs-sm); }
.rx-panel-lg { margin-bottom: var(--sp-6); }

.pd-row { display: grid; gap: 6px; margin-bottom: 12px; }
.pd-input { position: relative; max-width: 200px; }
.pd-unit {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--ink-soft); font-size: var(--fs-xs); pointer-events: none;
}
[data-error-pd], [data-error-terms] { display: none; }

.pay-options { display: grid; gap: 9px; margin-bottom: var(--sp-5); }
.pay-opt {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px;
  padding: 15px; text-align: left; background: var(--paper);
  border: 1px solid var(--line-strong);
  transition: all var(--t-fast) var(--e-out);
}
.pay-opt:hover { border-color: var(--ink-faint); }
.pay-opt.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.pay-mark {
  width: 58px; height: 38px; display: grid; place-items: center; flex: none;
  background: var(--tint); border: 1px solid var(--line);
  font-family: var(--mono); font-size: var(--fs-2xs); letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-soft);
}
.pay-opt.on .pay-mark { background: var(--ink); color: #fff; border-color: var(--ink); }
.pay-text { display: grid; gap: 3px; }
.pay-text b { font-size: var(--fs-sm); font-weight: 500; }
.pay-text span { font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.5; }
.pay-panel { margin-bottom: var(--sp-5); }
.pay-note {
  display: flex; gap: 13px; padding: 16px;
  background: var(--tint); border: 1px solid var(--line);
}
.pay-note svg { width: 20px; height: 20px; color: var(--red); flex: none; }
.pay-note b { display: block; font-size: var(--fs-sm); font-weight: 500; margin-bottom: 4px; }
.pay-note p { font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.6; }
.terms-check { margin-bottom: 4px; }

.summary-toggle {
  display: none; width: 100%; align-items: center; justify-content: space-between;
  gap: var(--sp-4); padding-bottom: var(--sp-4); margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm); font-weight: 500;
}
.summary-toggle b { color: var(--red); }
.summary-lines { display: grid; gap: 13px; padding-bottom: var(--sp-5); margin-bottom: var(--sp-5); border-bottom: 1px solid var(--line); }
.sum-line { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; }
.sum-art { position: relative; background: var(--paper); border: 1px solid var(--line); padding: 6px; }
.sum-art svg { width: 100%; }
.sum-qty {
  position: absolute; top: -7px; right: -7px;
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: var(--r-pill);
  background: var(--ink); color: #fff;
  font-family: var(--mono); font-size: var(--fs-2xs);
  display: grid; place-items: center;
}
.sum-info { display: grid; gap: 2px; min-width: 0; }
.sum-info b { font-size: var(--fs-sm); font-weight: 500; }
.sum-info span { font-size: var(--fs-xs); color: var(--ink-soft); }
.sum-price { font-size: var(--fs-xs); white-space: nowrap; }

.summary-secure {
  display: flex; gap: 10px; padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.summary-secure svg { width: 17px; height: 17px; color: var(--success); flex: none; }
.summary-secure p { font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.55; }

.checkout-empty { text-align: center; padding-block: var(--sp-10); }
.checkout-empty h1 { margin-bottom: 12px; }
.checkout-empty .lead { max-width: 44ch; margin: 0 auto var(--sp-6); }

@media (max-width: 1000px) {
  .checkout-grid { grid-template-columns: 1fr; }
  .checkout-summary { position: static; order: -1; }
  .summary-toggle { display: flex; }
  .summary-body { display: none; }
  .summary-body.open { display: block; animation: step-in .3s var(--e-out); }
}
@media (max-width: 560px) {
  .steps { gap: 6px; }
  .step { padding: 7px 11px 7px 7px; font-size: var(--fs-xs); }
  .step span:last-child { display: none; }
  .step.on span:last-child { display: inline; }
}

/* ------------------------------------------------------- Confirmation */
.confirm { text-align: center; padding-block: var(--sp-9) var(--section-y); max-width: 760px; }
.confirm-mark { width: 76px; margin: 0 auto var(--sp-5); color: var(--success); }
.confirm-ring { stroke-dasharray: 176; stroke-dashoffset: 176; animation: draw 0.8s var(--e-out) forwards; }
.confirm-tick { stroke-dasharray: 44; stroke-dashoffset: 44; animation: draw .45s var(--e-out) .6s forwards; }
.confirm h1 { margin: var(--sp-3) 0 var(--sp-4); }
.confirm .lead { max-width: 52ch; margin: 0 auto var(--sp-7); }

.confirm-card {
  text-align: left; border: 1px solid var(--line); background: var(--tint);
  padding: var(--sp-6); margin-bottom: var(--sp-8);
}
.confirm-meta {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4);
  padding-bottom: var(--sp-5); margin-bottom: var(--sp-5); border-bottom: 1px solid var(--line);
}
.confirm-meta > div { display: grid; gap: 3px; }
.confirm-meta span {
  font-family: var(--mono); font-size: var(--fs-3xs); letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft);
}
.confirm-meta b { font-size: var(--fs-sm); font-weight: 500; line-height: 1.45; }
.confirm-lines { display: grid; gap: 13px; padding-bottom: var(--sp-5); margin-bottom: var(--sp-5); border-bottom: 1px solid var(--line); }
.confirm-lines .sum-art { background: var(--paper); }

.confirm-next { text-align: left; margin-bottom: var(--sp-7); }
.confirm-next h2 { font-size: var(--fs-lg); margin-bottom: var(--sp-5); }
.next-steps { display: grid; gap: 0; counter-reset: n; }
.next-steps li {
  display: grid; grid-template-columns: 150px 1fr; gap: var(--sp-4);
  padding: var(--sp-4) 0; border-top: 1px solid var(--line);
}
.next-steps li:last-child { border-bottom: 1px solid var(--line); }
.next-steps b { font-size: var(--fs-xs); letter-spacing: .06em; color: var(--red); }
.next-steps span { font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.7; }
.confirm-actions { justify-content: center; }
@media (max-width: 620px) {
  .confirm-meta { grid-template-columns: 1fr; }
  .next-steps li { grid-template-columns: 1fr; gap: 5px; }
}


/* ==========================================================================
   5. BOOKING, ABOUT, CONTACT, ACCOUNT
   ========================================================================== */

/* ------------------------------------------------------------- Booking */
.book-head { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--sp-7); align-items: end; }
.book-facts { display: grid; gap: var(--sp-4); }
.book-facts li { display: grid; gap: 2px; padding-left: var(--sp-4); border-left: 2px solid var(--red); }
.book-facts b { font-family: var(--display); font-size: var(--fs-lg); font-weight: 500; line-height: 1; }
.book-facts span { font-family: var(--mono); font-size: var(--fs-2xs); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
@media (max-width: 860px) { .book-head { grid-template-columns: 1fr; } }

.book { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sp-8); align-items: start; padding-bottom: var(--section-y); }
.book-block { border: 0; margin-bottom: var(--sp-8); }
.book-block legend {
  display: flex; align-items: center; gap: 12px; margin-bottom: var(--sp-5);
  font-family: var(--display); font-size: var(--fs-lg); font-weight: 500;
}
.book-step {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--red); color: var(--red); font-size: var(--fs-xs);
}

.service-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.service-card {
  display: grid; gap: 7px; text-align: left; padding: 16px;
  background: var(--paper); border: 1px solid var(--line-strong);
  transition: all var(--t-fast) var(--e-out);
}
.service-card:hover { border-color: var(--ink-faint); transform: translateY(-2px); }
.service-card.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.service-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.service-top b { font-size: var(--fs-sm); font-weight: 500; }
.service-price { font-size: var(--fs-xs); color: var(--red); white-space: nowrap; }
.service-desc { font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.6; }
.service-mins { font-size: var(--fs-2xs); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
@media (max-width: 620px) { .service-grid { grid-template-columns: 1fr; } }

.date-strip { display: flex; align-items: stretch; gap: 8px; }
.date-nav {
  width: 40px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--line-strong); color: var(--ink-soft);
  transition: all var(--t-fast) var(--e-out);
}
.date-nav svg { width: 17px; height: 17px; }
.date-nav:hover:not(:disabled) { background: var(--ink); color: #fff; border-color: var(--ink); }
.date-nav:disabled { opacity: .3; cursor: not-allowed; }
.date-rail { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; flex: 1; }
.date-cell {
  display: grid; gap: 3px; justify-items: center; padding: 12px 4px;
  border: 1px solid var(--line-strong); background: var(--paper);
  transition: all var(--t-fast) var(--e-out);
}
.date-cell:hover:not(:disabled) { border-color: var(--ink); transform: translateY(-2px); }
.date-cell.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.date-cell.is-closed { opacity: .38; cursor: not-allowed; background: var(--tint); }
.date-dow { font-size: var(--fs-3xs); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.date-cell.on .date-dow, .date-cell.on .date-mon { color: rgba(255,255,255,.65); }
.date-day { font-family: var(--display); font-size: var(--fs-lg); font-weight: 500; line-height: 1; }
.date-mon { font-size: var(--fs-3xs); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
@media (max-width: 620px) {
  .date-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .date-cell:nth-child(n+5) { display: none; }
}

.slots-note { font-size: var(--fs-xs); color: var(--ink-soft); margin-bottom: var(--sp-4); }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 7px; }
.slot {
  padding: 11px 6px; border: 1px solid var(--line-strong); background: var(--paper);
  font-family: var(--mono); font-size: var(--fs-sm);
  transition: all var(--t-fast) var(--e-out);
}
.slot:hover:not(:disabled) { border-color: var(--ink); transform: translateY(-2px); }
.slot.on { background: var(--red); color: #fff; border-color: var(--red); }
.slot.is-taken { opacity: .32; text-decoration: line-through; cursor: not-allowed; background: var(--tint); }

.book-submit {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5);
  padding-top: var(--sp-5); border-top: 1px solid var(--line); flex-wrap: wrap;
}
.book-recap { display: grid; gap: 3px; }
.book-recap .mono { font-size: var(--fs-3xs); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.book-recap b { font-size: var(--fs-sm); font-weight: 500; color: var(--ink-soft); }
.book-recap.is-ready b { color: var(--red); }
.book-disclaimer { margin-top: var(--sp-4); font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.65; max-width: 66ch; }

.book-aside { display: grid; gap: var(--sp-4); position: sticky; top: calc(var(--header-h) + 20px); }
.aside-card { border: 1px solid var(--line); padding: var(--sp-5); background: var(--tint); }
.aside-card h3 { font-size: var(--fs-md); margin-bottom: var(--sp-4); }
.aside-contact { display: grid; gap: 11px; margin-bottom: var(--sp-5); }
.aside-contact li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.55; }
.aside-contact svg { width: 16px; height: 16px; color: var(--red); flex: none; margin-top: 2px; }
.aside-contact a:hover { color: var(--red); }
.aside-card .visit-hours { margin: 0; }
.prep-list { display: grid; gap: 10px; }
.prep-list li { position: relative; padding-left: 18px; font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.6; }
.prep-list li::before { content: ''; position: absolute; left: 0; top: .6em; width: 9px; height: 1.5px; background: var(--red); }
.aside-note { margin-top: var(--sp-4); font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.55; }
.aside-empty { font-size: var(--fs-xs); line-height: 1.6; }
.aside-help p { font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.7; }
.aside-help a { color: var(--red); border-bottom: 1px solid currentColor; }

@media (max-width: 980px) {
  .book { grid-template-columns: 1fr; }
  .book-aside { position: static; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) { .book-aside { grid-template-columns: 1fr; } }

.fee-list { display: grid; gap: 0; max-width: 900px; margin-inline: auto; }
.fee-row {
  display: grid; grid-template-columns: 1fr auto; gap: var(--sp-5);
  padding: var(--sp-5) 0; border-top: 1px solid var(--line-strong); align-items: start;
}
.fee-row:last-child { border-bottom: 1px solid var(--line-strong); }
.fee-main h3 { font-size: var(--fs-md); margin-bottom: 6px; }
.fee-main p { font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.65; max-width: 58ch; }
.fee-meta { display: grid; gap: 3px; justify-items: end; text-align: right; }
.fee-price { font-size: var(--fs-md); color: var(--red); }
.fee-meta .mono { font-size: var(--fs-2xs); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.fee-note { margin-top: var(--sp-6); font-size: var(--fs-sm); color: var(--ink-soft); }
@media (max-width: 560px) { .fee-row { grid-template-columns: 1fr; } .fee-meta { justify-items: start; text-align: left; } }

.book-done { padding: var(--sp-7) var(--sp-6); text-align: center; }
.book-done h3 { margin: var(--sp-3) 0 var(--sp-5); }
.book-summary { text-align: left; display: grid; gap: 11px; padding: var(--sp-5); background: var(--tint); border: 1px solid var(--line); margin-bottom: var(--sp-5); }
.book-summary > div { display: grid; gap: 2px; }
.book-summary span { font-family: var(--mono); font-size: var(--fs-3xs); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.book-summary b { font-size: var(--fs-sm); font-weight: 500; }
.book-done .text-muted { font-size: var(--fs-xs); margin-bottom: var(--sp-5); }

/* --------------------------------------------------------------- About */
.about-hero { padding-block: var(--sp-7) var(--sp-9); max-width: 900px; }
.about-hero h1 { margin: var(--sp-5) 0 var(--sp-5); }
.about-hero .lead { max-width: 56ch; }

.about-band { background: var(--ink); color: #fff; }
.about-stats { display: grid; grid-template-columns: repeat(4, 1fr); padding-block: var(--sp-7); }
.about-stats > div { display: grid; gap: 6px; padding-inline: var(--sp-4); }
.about-stats > div + div { border-left: 1px solid rgba(255,255,255,.14); }
.about-stats b { font-family: var(--display); font-size: var(--fs-2xl); font-weight: 500; line-height: 1; color: #fff; }
.about-stats span { font-family: var(--mono); font-size: var(--fs-2xs); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55); line-height: 1.5; }
@media (max-width: 860px) {
  .about-stats { grid-template-columns: 1fr 1fr; gap: var(--sp-5) 0; }
  .about-stats > div:nth-child(odd) { border-left: 0; }
}

.story-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--sp-9); align-items: start; }
.story-copy h2 { margin: var(--sp-3) 0 var(--sp-6); max-width: 18ch; }
.story-text { display: grid; gap: var(--sp-4); }
.story-text p { font-size: var(--fs-base); color: var(--ink-soft); line-height: 1.85; max-width: 60ch; }
.story-art { position: relative; }
.story-frames { position: relative; aspect-ratio: 1 / 1.05; background: linear-gradient(160deg, var(--tint), var(--sand)); border: 1px solid var(--line); }
.story-frame { position: absolute; width: 62%; transition: transform .7s var(--e-out); }
.story-frame svg { width: 100%; filter: drop-shadow(0 16px 22px rgba(18,16,15,.14)); }
.story-frame-a { top: 8%; left: 6%; }
.story-frame-b { top: 36%; right: 4%; width: 68%; z-index: 2; }
.story-frame-c { bottom: 6%; left: 12%; width: 56%; }
.story-frames:hover .story-frame-a { transform: translate(-5px, -8px) rotate(-2deg); }
.story-frames:hover .story-frame-b { transform: translate(6px, 0) rotate(1.5deg); }
.story-frames:hover .story-frame-c { transform: translate(-4px, 8px) rotate(-1deg); }
.story-caption { margin-top: var(--sp-4); }
.story-caption figcaption { font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.6; }
@media (max-width: 940px) { .story-grid { grid-template-columns: 1fr; gap: var(--sp-7); } }

.value-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
.value-card { background: var(--paper); border: 1px solid var(--line); padding: var(--sp-6); transition: border-color var(--t-mid), transform var(--t-mid) var(--e-out); }
.value-card:hover { border-color: var(--ink); transform: translateY(-3px); }
.value-num { display: block; font-size: var(--fs-xs); letter-spacing: .16em; color: var(--red); margin-bottom: var(--sp-4); }
.value-card h3 { font-size: var(--fs-lg); margin-bottom: 10px; }
.value-card p { font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.75; }
@media (max-width: 780px) { .value-grid { grid-template-columns: 1fr; } }

.team-intro { max-width: 34ch; }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.team-card { display: flex; flex-direction: column; }
.team-art {
  aspect-ratio: 4 / 3.4; background: linear-gradient(160deg, var(--tint), var(--sand));
  border: 1px solid var(--line); display: grid; place-items: center;
  padding: var(--sp-5); margin-bottom: var(--sp-4);
}
.team-art svg { width: 100%; }
.team-card h3 { font-size: var(--fs-md); margin-bottom: 3px; }
.team-role { font-size: var(--fs-2xs); letter-spacing: .1em; text-transform: uppercase; color: var(--red); margin-bottom: 10px; }
.team-bio { font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.7; }
@media (max-width: 1000px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .team-grid { grid-template-columns: 1fr; max-width: 360px; margin-inline: auto; } }

.about-standards .standards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: center; }
.about-standards h2 { color: #fff; margin: var(--sp-3) 0 var(--sp-4); }
.standards-list { display: grid; gap: 0; }
.standards-list li {
  display: grid; grid-template-columns: 92px 1fr; gap: var(--sp-4);
  padding: var(--sp-4) 0; border-top: 1px solid rgba(255,255,255,.14); align-items: baseline;
}
.standards-list li:last-child { border-bottom: 1px solid rgba(255,255,255,.14); }
.standards-list b { font-size: var(--fs-xs); letter-spacing: .12em; color: var(--red-bright); }
.standards-list span { font-size: var(--fs-sm); color: rgba(255,255,255,.68); line-height: 1.65; }
@media (max-width: 860px) {
  .about-standards .standards-grid { grid-template-columns: 1fr; }
  .standards-list li { grid-template-columns: 1fr; gap: 5px; }
}

/* ------------------------------------------------------------- Contact */
.contact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); padding-bottom: var(--sp-8); }
.contact-card {
  border: 1px solid var(--line); padding: var(--sp-6); background: var(--paper);
  transition: all var(--t-mid) var(--e-out);
}
.contact-card:hover { border-color: var(--ink); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.contact-icon { display: flex; color: var(--red); margin-bottom: var(--sp-4); }
.contact-icon svg { width: 24px; height: 24px; }
.contact-card h2 { font-size: var(--fs-md); margin-bottom: 8px; }
.contact-value { font-size: var(--fs-sm); color: var(--ink); margin-bottom: 6px; word-break: break-word; }
.contact-note { font-size: var(--fs-xs); color: var(--ink-soft); }
@media (max-width: 860px) { .contact-cards { grid-template-columns: 1fr; } }

.contact-main { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sp-8); align-items: start; padding-bottom: var(--section-y); }
.contact-form-col h2 { font-size: var(--fs-xl); margin-bottom: 10px; }
.contact-form-intro { font-size: var(--fs-sm); margin-bottom: var(--sp-6); max-width: 56ch; }
.contact-form .btn { margin-top: var(--sp-4); }
.contact-sent {
  margin-top: var(--sp-4); padding: 13px 16px;
  background: rgba(27,127,90,.08); border-left: 2px solid var(--success);
  font-size: var(--fs-sm); color: var(--success); line-height: 1.6;
}
.contact-aside { display: grid; gap: var(--sp-4); position: sticky; top: calc(var(--header-h) + 20px); }
.contact-map { border: 1px solid var(--line); overflow: hidden; margin-bottom: var(--sp-4); }
.directions { display: grid; gap: 9px; counter-reset: d; margin-bottom: var(--sp-5); }
.directions li {
  counter-increment: d; position: relative; padding-left: 26px;
  font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.6;
}
.directions li::before {
  content: counter(d); position: absolute; left: 0; top: 0;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--ink); color: #fff;
  font-family: var(--mono); font-size: var(--fs-3xs);
  display: grid; place-items: center;
}
@media (max-width: 980px) {
  .contact-main { grid-template-columns: 1fr; }
  .contact-aside { position: static; }
}

.faq-wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--sp-8); align-items: start; }
.faq-head h2 { margin: var(--sp-3) 0 var(--sp-4); }
.faq-head p { font-size: var(--fs-sm); line-height: 1.7; max-width: 34ch; }
@media (max-width: 900px) { .faq-wrap { grid-template-columns: 1fr; gap: var(--sp-6); } }

/* ------------------------------------------------------------- Account */
.account { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sp-8); align-items: start; padding-block: var(--sp-6) var(--section-y); }
.account-panel { border: 1px solid var(--line); }
.account-tabs { display: flex; border-bottom: 1px solid var(--line); }
.account-tab {
  flex: 1; padding: 16px 12px; font-size: var(--fs-sm); font-weight: 500;
  color: var(--ink-soft); position: relative;
  transition: color var(--t-fast), background-color var(--t-fast);
}
.account-tab + .account-tab { border-left: 1px solid var(--line); }
.account-tab:hover { background: var(--tint); color: var(--ink); }
.account-tab.on { color: var(--ink); background: var(--tint); }
.account-tab.on::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--red);
}
.account-body { padding: var(--sp-7) var(--sp-6); animation: step-in .35s var(--e-out); }
.account-body h1 { font-size: var(--fs-xl); margin-bottom: 8px; }
.account-body > .text-muted { font-size: var(--fs-sm); margin-bottom: var(--sp-6); }
.account-form { max-width: 460px; }
.account-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin: var(--sp-3) 0 var(--sp-5); flex-wrap: wrap; }
.account-msg { margin-top: var(--sp-4); font-size: var(--fs-xs); line-height: 1.65; }
.account-msg.is-info { color: var(--ink-soft); padding: 12px 14px; background: var(--tint); border-left: 2px solid var(--red); }
.account-msg.is-err  { color: var(--danger);  padding: 12px 14px; background: rgba(192,57,43,.07); border-left: 2px solid var(--danger); }
.account-msg.is-ok   { color: var(--success); padding: 12px 14px; background: rgba(27,127,90,.07); border-left: 2px solid var(--success); }
.account-msg.is-warn { color: var(--warning); padding: 12px 14px; background: rgba(180,105,14,.07); border-left: 2px solid var(--warning); }

/* Signed-in summary reuses the measurement list styling for consistency */
.signedin-facts { margin-bottom: var(--sp-6); }
.signedin-facts dd { text-transform: capitalize; }
[data-acct-panel="signedin"] .btn + .btn { margin-top: 10px; }

.track-result { margin-top: var(--sp-6); }
.track-card { border: 1px solid var(--line); padding: var(--sp-5); background: var(--tint); }
.track-card.is-empty p { font-size: var(--fs-sm); line-height: 1.7; }
.track-card.is-empty a { color: var(--red); border-bottom: 1px solid currentColor; }
.track-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--line); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.track-head b { font-size: var(--fs-md); }
.track-head span { font-size: var(--fs-xs); color: var(--ink-soft); }
.track-steps { display: grid; gap: 0; }
.track-steps li { display: grid; grid-template-columns: auto 1fr; gap: 14px; padding-bottom: var(--sp-5); position: relative; }
.track-steps li:last-child { padding-bottom: 0; }
.track-steps li::before {
  content: ''; position: absolute; left: 6px; top: 16px; bottom: 0; width: 1px; background: var(--line-strong);
}
.track-steps li:last-child::before { display: none; }
.track-dot {
  width: 13px; height: 13px; border-radius: 50%; margin-top: 3px; flex: none;
  background: var(--paper); border: 1.5px solid var(--line-strong); z-index: 1;
}
.track-steps li.is-done .track-dot { background: var(--success); border-color: var(--success); }
.track-text { display: grid; gap: 2px; }
.track-text b { font-size: var(--fs-sm); font-weight: 500; }
.track-text span { font-size: var(--fs-xs); color: var(--ink-soft); }
.track-note { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--ink-soft); }

.account-aside { display: grid; gap: var(--sp-4); position: sticky; top: calc(var(--header-h) + 20px); }
.mini-order { display: grid; gap: 5px; }
.mini-order b { font-size: var(--fs-sm); }
.mini-order span { font-size: var(--fs-xs); color: var(--ink-soft); }
.mini-total { color: var(--red) !important; font-size: var(--fs-sm) !important; }
.saved-list { display: grid; gap: 10px; margin-bottom: var(--sp-4); }
.saved-list a { display: flex; align-items: center; gap: 11px; }
.saved-art { width: 58px; flex: none; background: var(--paper); border: 1px solid var(--line); padding: 5px; }
.saved-art svg { width: 100%; }
.saved-info { display: grid; gap: 2px; min-width: 0; }
.saved-info b { font-size: var(--fs-xs); font-weight: 500; }
.saved-info .mono { font-size: var(--fs-2xs); color: var(--red); }
.saved-list a:hover .saved-art { border-color: var(--red); }
@media (max-width: 980px) {
  .account { grid-template-columns: 1fr; }
  .account-aside { position: static; grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .account-aside { grid-template-columns: 1fr; }
  .account-tabs { flex-direction: column; }
  .account-tab + .account-tab { border-left: 0; border-top: 1px solid var(--line); }
  .account-tab.on::after { display: none; }
  .account-body { padding: var(--sp-6) var(--sp-5); }
}

/* ------------------------------------------------- prescription entry form */
/* One row per eye, columns in the order they are printed on a prescription:
   sphere, cylinder, axis, ADD. The grid is the whole point — people read
   their prescription across, not down. */
.rx-grid { display: grid; gap: 6px; margin-bottom: 14px; }
.rx-row {
  display: grid;
  grid-template-columns: 62px repeat(4, 1fr);
  gap: 6px;
  align-items: center;
}
.rx-row-head {
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  letter-spacing: .02em;
}
.rx-row-head span { padding-left: 2px; }
.rx-eye { display: grid; line-height: 1.15; }
.rx-eye b { font-size: var(--fs-sm); font-weight: 500; }
.rx-eye .mono { font-size: var(--fs-2xs); color: var(--ink-soft); }
.rx-cell { display: block; }
.rx-input { width: 100%; text-align: center; padding-left: 4px; padding-right: 4px; }

/* Spinners steal width and nobody clicks them on a form like this. */
.rx-input::-webkit-outer-spin-button,
.rx-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rx-input { -moz-appearance: textfield; }

.rx-pd {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: end;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.rx-pd-switch { grid-column: 1 / -1; display: flex; gap: 6px; }
.rx-choice.is-small { font-size: var(--fs-xs); padding: 5px 10px; }

.rx-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rx-field { display: grid; gap: 4px; margin-bottom: 10px; }
.rx-field > span { font-size: var(--fs-xs); color: var(--ink-soft); }
.rx-field.is-wide { grid-column: 1 / -1; }

.rx-help { font-size: var(--fs-xs); color: var(--ink-soft); margin: 4px 0 0; }

.rx-problems {
  margin-top: 10px;
  padding: 9px 11px;
  border-left: 2px solid var(--red);
  background: var(--red-wash);
  border-radius: 0 4px 4px 0;
}
.rx-problems p { font-size: var(--fs-xs); margin: 0 0 4px; }
.rx-problems p:last-child { margin-bottom: 0; }

/* Says plainly that a human checks this before anything is cut. */
.rx-review-note {
  margin: 12px 0 0;
  padding-top: 11px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
  color: var(--ink-soft);
}

@media (max-width: 620px) {
  .rx-row { grid-template-columns: 48px repeat(4, 1fr); gap: 4px; }
  .rx-row-head { font-size: var(--fs-2xs); }
  .rx-input { font-size: var(--fs-xs); }
  .rx-meta, .rx-pd { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------ saved prescriptions */
.rx-list { display: grid; gap: 10px; }
.rx-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 13px 15px;
  display: grid;
  gap: 6px;
}
.rx-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.rx-card-values { font-size: var(--fs-xs); }
.rx-card-meta { font-size: var(--fs-xs); color: var(--ink-soft); }
.rx-status {
  font-size: var(--fs-2xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--line);
  white-space: nowrap;
}
.rx-status.is-verified { border-color: var(--green, #2f6b45); color: var(--green, #2f6b45); }
.rx-status.is-rejected { border-color: var(--red); color: var(--red); }
.rx-card-file {
  font-size: var(--fs-xs);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* WhatsApp call-to-action — same weight as the other secondary actions, with
   the mark for recognition. Hidden until a number is configured. */
.btn-wa { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn-wa[hidden] { display: none; }

/* Service areas and home service, under the Visit CTA on the homepage.
   Both are quiet supporting lines, not another competing call to action. */
.visit-areas,
.visit-home { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--ink-soft); max-width: 46ch; }
.visit-home { margin-top: 10px; }
.visit-home a[hidden] { display: none; }
.btn-wa-icon { display: inline-flex; width: 17px; height: 17px; }
.btn-wa-icon svg { width: 100%; height: 100%; }

/* Policy pages — long-form reading, kept narrow and quiet. */
.policy-hero { padding-block: var(--sp-8) var(--sp-5); max-width: 760px; }
.policy-body { max-width: 760px; padding-bottom: var(--sp-9); }
.policy-body h2 { margin: var(--sp-6) 0 var(--sp-3); font-size: var(--fs-lg); }
.policy-body p { margin: 0 0 var(--sp-3); line-height: 1.7; color: var(--ink-soft); }
.policy-draft { border-left: 2px solid var(--brand); background: #fdf6f6; padding: var(--sp-4); margin-top: var(--sp-4); font-size: var(--fs-sm); line-height: 1.6; }
.policy-rule { border: 0; border-top: 1px solid var(--line); margin: var(--sp-7) 0 var(--sp-4); }
.policy-meta { font-size: var(--fs-xs); color: var(--ink-soft); }

/* ==========================================================================
   PRODUCT GALLERY — quiet chrome, the frame does the work
   ========================================================================== */
.gallery-main { position: relative; }
.gallery-stage { cursor: zoom-in; }

/* Crossfade between photographs. Short enough not to be noticed as an
   animation, long enough that the swap does not feel like a flicker. */
.gallery-stage > * { animation: galleryFade 220ms var(--e-out) both; }
@keyframes galleryFade { from { opacity: 0; } to { opacity: 1; } }

.gallery-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(255,255,255,.9);
  color: var(--ink); display: grid; place-items: center; cursor: pointer;
  opacity: 0; transition: opacity 160ms var(--e-out), border-color 160ms var(--e-out);
}
.gallery-nav svg { width: 19px; height: 19px; }
.gallery-nav.is-prev { left: 14px; }
.gallery-nav.is-next { right: 14px; }
.gallery-main:hover .gallery-nav, .gallery-nav:focus-visible { opacity: 1; }
.gallery-nav:hover { border-color: var(--ink); }

.gallery-expand {
  position: absolute; right: 14px; bottom: 14px;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(255,255,255,.9);
  color: var(--ink); display: grid; place-items: center; cursor: pointer;
  opacity: 0; transition: opacity 160ms var(--e-out);
}
.gallery-expand svg { width: 15px; height: 15px; }
.gallery-main:hover .gallery-expand, .gallery-expand:focus-visible { opacity: 1; }

.gallery-counter {
  position: absolute; left: 14px; bottom: 14px;
  font-size: var(--fs-xs); color: var(--ink-soft); letter-spacing: .06em;
}

/* Touch: controls are always visible, because there is no hover to reveal
   them and a hidden control on a phone is simply a missing control. */
@media (pointer: coarse) {
  .gallery-nav, .gallery-expand { opacity: 1; }
  .gallery-nav { width: 44px; height: 44px; }
  .gallery-expand { width: 40px; height: 40px; }
}

/* ---------------------------------------------------------- lightbox --- */
.lightbox {
  /* Above the sticky header (150), the sticky buy bar (140) and the cart
     drawer (200), matching the existing modal at 240. At 120 the page showed
     straight through it. */
  position: fixed; inset: 0; z-index: 240;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: var(--sp-3); padding: var(--sp-5);
  background: rgba(28,26,24,.94);
  opacity: 0; transition: opacity 200ms var(--e-out);
}
.lightbox.is-open { opacity: 1; }
.lightbox[hidden] { display: none; }

/* A light matte behind the subject. The drawn frame artwork is dark line work
   and all but disappears directly on the dark backdrop; photographs benefit
   from the same border for the same reason a print does. */
.lightbox-stage {
  /* Explicit box rather than max-* alone: the drawn frame artwork is an SVG
     with a viewBox and no intrinsic size, so inside a shrink-to-fit parent it
     collapses to nothing. Sizing the matte and letting the subject fill it
     keeps photographs and drawings on identical footing. */
  margin: 0; justify-self: center;
  width: min(860px, 92vw); height: min(78vh, 860px);
  overflow: hidden; cursor: zoom-in; display: grid; place-items: center;
  background: var(--paper); padding: clamp(14px, 3.5vw, 38px);
}
.lightbox-stage img, .lightbox-stage svg {
  width: 100%; height: 100%; object-fit: contain; display: block;
  transition: transform 260ms var(--e-out); transform-origin: var(--zx, 50%) var(--zy, 50%);
}
.lightbox-stage.is-zoomed { cursor: zoom-out; }
.lightbox-stage.is-zoomed img, .lightbox-stage.is-zoomed svg { transform: scale(2.1); }

.lightbox-nav, .lightbox-close {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.28); background: none; color: #fff;
  display: grid; place-items: center; cursor: pointer;
  transition: border-color 160ms var(--e-out), background 160ms var(--e-out);
}
.lightbox-nav svg, .lightbox-close svg { width: 20px; height: 20px; }
.lightbox-nav:hover, .lightbox-close:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.lightbox-close { position: absolute; top: var(--sp-4); right: var(--sp-4); }

.lightbox-foot {
  position: absolute; left: 0; right: 0; bottom: var(--sp-4);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: rgba(255,255,255,.72); font-size: var(--fs-xs); letter-spacing: .06em; pointer-events: none;
}
.lightbox-hint { color: rgba(255,255,255,.42); }

@media (max-width: 700px) {
  .lightbox { grid-template-columns: 1fr; padding: var(--sp-4); }
  .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); }
  .lightbox-nav.is-prev { left: var(--sp-3); }
  .lightbox-nav.is-next { right: var(--sp-3); }
  .lightbox-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-stage > * { animation: none; }
  .lightbox, .lightbox-stage img, .lightbox-stage svg,
  .gallery-nav, .gallery-expand { transition: none; }
}

/* Add-to-bag acknowledgement — a brief settle, not a bounce. */
.btn.is-added { background: #1f7a4d; border-color: #1f7a4d; }
@media (prefers-reduced-motion: no-preference) {
  .btn.is-added { transition: background 160ms var(--e-out), border-color 160ms var(--e-out); }
}

/* Filter panel actions — the apply button is a mobile affordance only; on
   desktop the panel sits beside the results and nothing is covered. */
.filters-actions { display: grid; gap: 8px; }
.filters-apply { display: none; }
@media (max-width: 900px) {
  .filters-apply { display: inline-flex; }
  .filters-actions { position: sticky; bottom: 0; background: var(--paper); padding-top: 10px; }
}

/* ==========================================================================
   VIRTUAL TRY-ON — overlay
   Same conventions as the product lightbox (z-index 240, dark ground, quiet
   chrome) so the two feel like one system. Inert until a provider is
   configured; these rules simply exist ahead of that.
   ========================================================================== */
.btn-vto { display: inline-flex; align-items: center; justify-content: center; gap: 9px; }
.btn-vto[hidden] { display: none; }
.btn-vto-icon { display: inline-flex; width: 20px; height: 20px; }
.btn-vto-icon svg { width: 100%; height: 100%; }

.vto {
  position: fixed; inset: 0; z-index: 240;
  background: rgba(28,26,24,.96);
  display: grid; place-items: center; padding: var(--sp-4);
  opacity: 0; transition: opacity 200ms var(--e-out);
}
.vto.is-open { opacity: 1; }
.vto[hidden] { display: none; }

.vto-shell {
  width: min(980px, 100%); height: min(88vh, 900px);
  display: grid; grid-template-rows: auto 1fr auto;
  background: var(--paper); border-radius: 2px; overflow: hidden;
}

.vto-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 14px 16px; border-bottom: 1px solid var(--line); }
.vto-title { font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.vto-close { width: 36px; height: 36px; border: 1px solid var(--line); background: none; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--ink); }
.vto-close svg { width: 18px; height: 18px; }
.vto-close:hover { border-color: var(--ink); }

.vto-body { overflow: auto; display: grid; }
.vto-panel { display: grid; align-content: center; justify-items: center; gap: var(--sp-3); padding: var(--sp-6) var(--sp-5); text-align: center; }
.vto-h { font-family: var(--display); font-size: var(--fs-xl); margin: 0; }
.vto-copy { max-width: 52ch; color: var(--ink-soft); margin: 0; line-height: 1.6; }
.vto-copy-pending { border-left: 2px solid var(--line-strong); padding-left: var(--sp-4); text-align: left; }
.vto-consent-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: var(--sp-3); }
.vto-reasons { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; color: var(--ink-soft); font-size: var(--fs-sm); max-width: 52ch; }

.vto-stage-wrap { padding: 0; align-content: stretch; }
.vto-stage { width: 100%; height: 100%; min-height: 320px; background: #f6f5f3; }
.vto-status { padding: 8px 16px; font-size: var(--fs-xs); color: var(--ink-soft); margin: 0; }

.vto-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 12px 16px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.vto-frames { display: flex; gap: 8px; flex-wrap: wrap; }
.vto-swatch { width: 30px; height: 30px; border-radius: 50%; padding: 3px; border: 1px solid var(--line-strong); background: none; cursor: pointer; }
.vto-swatch span { display: block; width: 100%; height: 100%; border-radius: 50%; }
.vto-swatch.on { border-color: var(--ink); border-width: 1.5px; }
.vto-actions { display: flex; gap: 8px; }

@media (max-width: 700px) {
  .vto { padding: 0; }
  .vto-shell { width: 100%; height: 100%; border-radius: 0; }
  .vto-foot { position: sticky; bottom: 0; background: var(--paper); }
  .vto-swatch { width: 34px; height: 34px; }
}

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

/* VTO: loading, denial and failure states */
.vto-stage.is-loading { position: relative; }
.vto-stage.is-loading::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 12px, rgba(0,0,0,.03) 12px 24px);
}
.vto-file { cursor: pointer; }
.vto-file input { position: absolute; left: -9999px; }
.vto-denied .vto-copy, .vto-failed .vto-copy { max-width: 46ch; }
@media (prefers-reduced-motion: reduce) { .vto-stage.is-loading::after { background: rgba(0,0,0,.03); } }

/* Panel headings that were <h1> for visual weight but are not the page's
   heading. Demoted for document structure; the type scale is unchanged. */
.acc-panel-h, .co-done-h { font-family: var(--display); font-size: var(--fs-2xl); line-height: 1.1; margin: 0 0 var(--sp-3); font-weight: 400; }

/* Offline/fallback availability — stated as unknown, never asserted. */
.pdp-stock.is-unknown .dot { background: var(--ink-faint); }
.pdp-stock.is-unknown { color: var(--ink-soft); }

/* Journal previews — real editorial copy, unpublished. No link affordance
   until the articles exist. */
.journal-card { cursor: default; }
.journal-soon { font-size: var(--fs-2xs); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }

/* ---------------------------------------------------------------- services */
/* Homepage service grid: four doorways into services.html, deliberately kept
   to one line of copy each so the section stays a signpost, not a second
   services page. */
.home-svc { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); margin-top: var(--sp-6); }
.home-svc-card {
  display: block; padding: var(--sp-5); border: 1px solid var(--line);
  border-radius: var(--r-lg); background: var(--bg); text-decoration: none;
  transition: border-color .2s ease, transform .2s ease;
}
.home-svc-card:hover { border-color: var(--red); transform: translateY(-2px); }
.home-svc-card h3 { font-size: var(--fs-lg); margin-bottom: 6px; }
.home-svc-card p { font-size: var(--fs-sm); color: var(--ink-soft); }
.home-svc-cta { margin-top: var(--sp-5); justify-content: center; }

/* Services page */
.svc-jump { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: var(--sp-5); }
.svc-jump a { font-size: var(--fs-sm); color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--line); }
.svc-jump a:hover { color: var(--red); border-color: var(--red); }
.svc-wrap { padding: var(--sp-7) 0; display: grid; gap: var(--sp-7); }
.svc-group-head { margin-bottom: var(--sp-5); }
.svc-group-head h2 { margin-bottom: 6px; }
.svc-group { display: grid; gap: var(--sp-4); }
.svc-card { padding: var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-lg); scroll-margin-top: 90px; }
.svc-card h3 { font-size: var(--fs-xl); margin-bottom: 8px; }
.svc-meta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: var(--sp-3); }
.svc-price { font-size: var(--fs-sm); color: var(--red); }
.svc-dur, .svc-tag { font-size: var(--fs-xs); color: var(--ink-soft); }
.svc-tag { border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; }
.svc-short { font-weight: 500; margin-bottom: 10px; }
.svc-who { font-size: var(--fs-sm); color: var(--ink-soft); margin-top: 10px; }
.svc-cta { margin-top: var(--sp-4); }
.svc-areas h2, .svc-foot h2 { margin-bottom: var(--sp-3); }
.svc-foot { text-align: center; }
.svc-foot p { margin: 0 auto var(--sp-4); max-width: 52ch; }
.area-list { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: var(--sp-4) 0 var(--sp-5); }
.area-list li { border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: var(--fs-sm); }

/* Insurance page */
.ins-section { padding-bottom: var(--sp-6); }
.ins-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); list-style: none; }
.ins-card {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 74px; padding: var(--sp-4); border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--bg);
}
.ins-name { font-size: var(--fs-sm); font-weight: 500; }
.ins-note { margin-top: var(--sp-5); font-size: var(--fs-sm); color: var(--ink-soft); max-width: 60ch; }
.ins-next { text-align: center; }
.ins-next p { margin: 0 auto var(--sp-4); max-width: 56ch; }
.ins-next .cluster { justify-content: center; }
.ins-small { margin-top: var(--sp-4); font-size: var(--fs-xs); color: var(--ink-soft); }

@media (max-width: 900px) {
  .home-svc { grid-template-columns: repeat(2, 1fr); }
  .ins-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .home-svc { grid-template-columns: 1fr; }
  .ins-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-cta { gap: 10px; }
}

/* Second ask point under the insurance list. */
.ins-ask { margin-top: var(--sp-4); }

/* --------------------------------------------------------------------------
   Mobile refinements — measured, not guessed

   Every rule below fixes something found by measuring the real pages at
   320-414px, where most of this practice's traffic actually arrives.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {

  /* The 13 service jump-links were 23px tall with no padding and 10px between
     rows: thirteen small targets packed into a cloud, where a mis-tap lands on
     the wrong service. As chips they become real targets with real separation,
     and the list is easier to read as a list. */
  .svc-jump { gap: 8px; }
  .svc-jump a {
    display: inline-flex; align-items: center;
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid var(--line); border-bottom-color: var(--line);
    border-radius: 999px;
    line-height: 1.2;
  }
  .svc-jump a:hover, .svc-jump a:focus-visible { border-color: var(--red); }

  /* A service card's actions are the point of the card. Stacked full width
     they are unmissable and unmistakable; side by side at this width they wrap
     into slivers. */
  .svc-cta { flex-direction: column; align-items: stretch; gap: 10px; }
  .svc-cta .btn { width: 100%; justify-content: center; min-height: 48px; }
  .svc-cta .link-u { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

  /* Same reasoning for the other CTA clusters on conversion pages. */
  .svc-areas .cluster, .ins-next .cluster, .ins-ask { flex-direction: column; align-items: stretch; }
  .svc-areas .cluster .btn, .ins-next .cluster .btn, .ins-ask .btn { width: 100%; justify-content: center; min-height: 48px; }

  /* Insurance providers read as a scannable list rather than a wall. */
  .ins-grid { grid-template-columns: 1fr; gap: 8px; }
  .ins-card { padding: 12px 14px; }

  /* Area chips are links, so they need thumb-sized targets too. */
  .area-list a { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 12px; }
}

@media (max-width: 767px) {
  /* "See accepted insurance providers" measured 357px wide inside a 320px
     screen and was clipped by 57px, because .btn is white-space: nowrap.
     The closing CTA on each conversion page now goes full width and wraps.
     The .btn rule is the safety net: no button anywhere can run off the side
     of a phone again, whatever its label later grows into. */
  .svc-foot .btn, .ins-next .btn { width: 100%; justify-content: center; min-height: 48px; }
  .btn { max-width: 100%; white-space: normal; }
}

/* ==========================================================================
   Premium layer — visual hierarchy
   ==========================================================================
   The complaint this answers: too much of the site was WHITE BOX / BORDER /
   ROUNDED CORNER / TEXT / BUTTON, repeated until every section carried the
   same weight and nothing led the eye. These rules give the repeated
   components a hierarchy without changing a single piece of markup or copy.
   ========================================================================== */

/* Service cards: an accent rail that only appears on the card you are on, and
   a lift that is felt rather than seen. Bookable services carry the rail in
   the brand colour because those are the ones that convert to an appointment;
   everything else stays quiet. */
.svc-card {
  position: relative;
  background: var(--paper);
  border-color: var(--line);
  transition: border-color var(--t-mid) var(--e-out),
              transform var(--t-mid) var(--e-out),
              box-shadow var(--t-mid) var(--e-out);
}
.svc-card::before {
  content: '';
  position: absolute; left: -1px; top: 22px; bottom: 22px; width: 2px;
  background: var(--red);
  opacity: 0;
  transform: scaleY(.4); transform-origin: center;
  transition: opacity var(--t-mid) var(--e-out), transform var(--t-mid) var(--e-out);
  border-radius: 2px;
}
@media (hover: hover) {
  .svc-card:hover {
    border-color: var(--line-strong);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
  }
  .svc-card:hover::before { opacity: 1; transform: scaleY(1); }
}
.svc-card:focus-within::before { opacity: 1; transform: scaleY(1); }

/* Category headings carry the weight instead of every card shouting equally. */
.svc-group-head h2 { font-size: var(--fs-2xl); }
.svc-group-head { position: relative; padding-top: var(--sp-3); border-top: 1px solid var(--ink); }

/* Insurance: a plain, dense, scannable list. A provider name does not need a
   bordered box around it, and twelve boxes read as a wall. */
.ins-card {
  border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0; background: transparent;
  padding: 14px 2px;
  transition: background-color var(--t-fast) var(--e-out), padding-left var(--t-fast) var(--e-out);
}
@media (hover: hover) { .ins-card:hover { background: var(--tint); padding-left: 10px; } }
.ins-name { font-family: var(--display); font-weight: 600; letter-spacing: -0.01em; }

/* Arrow movement on the tertiary links — restrained, 200ms, and only where a
   pointer exists. */
@media (hover: hover) {
  .link-u { transition: color var(--t-fast) var(--e-out); }
}

/* Someone who has asked for less motion gets less motion, everywhere. */
@media (prefers-reduced-motion: reduce) {
  .svc-card, .svc-card::before, .ins-card { transition: none; }
  .svc-card:hover { transform: none; }
}

@media (max-width: 767px) {
  /* Tertiary CTAs — "Call the clinic", "Ask about our home service" — sit in a
     CTA cluster beside the primary and secondary buttons, so they are targets a
     thumb aims at, not links inside a sentence. They measured 26px. Inline
     phone numbers written into prose are deliberately NOT included here: a link
     inside a sentence is exempt from target sizing, and padding one out would
     break the line it sits in. */
  .cluster > .link-u,
  .visit-home .link-u {
    display: inline-flex; align-items: center;
    min-height: var(--touch-target);
  }
}

/* The early insurance ask sits above the provider list, so it needs a little
   air beneath it rather than above. */
.ins-ask.is-early { margin: 0 0 var(--sp-5); }

/* ==========================================================================
   Lens configurator on a phone
   ==========================================================================
   The builder asks four questions, each with its own list, and then a
   prescription form of twelve numbers. On a 375px screen that is a long
   scroll with no sense of position, so each step folds and its heading
   carries the answer.

   <details> rather than scripted panels: it works before JS runs, keeps its
   keyboard and screen-reader behaviour for nothing, and cannot get stuck in a
   half-open state if a repaint lands mid-animation.

   Desktop is deliberately untouched — every rule below either applies to the
   folded chrome (which desktop shows open) or sits inside a max-width query.
   ========================================================================== */

.lens-step-box { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.lens-step-box:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.lens-step-box > summary {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3); cursor: pointer; list-style: none;
  padding: 2px 0; margin-bottom: 10px;
}
.lens-step-box > summary::-webkit-details-marker { display: none; }
/* Only ever shown on a phone, and only while its step is folded. Desktop
   shows every step open, so the answer is already on screen and repeating it
   in the heading would be a change to a layout that was asked to stay put. */
.lens-step-pick {
  display: none;
  font-family: var(--body); font-size: var(--fs-xs); font-weight: 500;
  color: var(--ink); text-align: right; letter-spacing: 0; text-transform: none;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* The marker is drawn rather than inherited so it can be hidden on desktop,
   where nothing folds and a disclosure triangle would be a lie. */
.lens-step-box > summary::after {
  content: ''; flex: none; width: 9px; height: 9px; margin-left: 2px;
  border-right: 1.5px solid var(--ink-faint); border-bottom: 1.5px solid var(--ink-faint);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--t-fast) var(--e-out);
  display: none;
}
.lens-step-box[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }

/* The materials wrapper carries .lens-materials, which already draws a rule.
   Two borders on one edge reads as a mistake, so the box wins. */
.lens-step-box.lens-materials,
.lens-step-box.lens-addons { margin-top: var(--sp-5); padding-top: var(--sp-5); }

/* ------------------------------------------------------------- the bar */
.sticky-spec {
  display: block; font-size: var(--fs-2xs); color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sticky-buy { padding-bottom: calc(11px + env(safe-area-inset-bottom, 0px)); }

@media (max-width: 940px) {
  /* Room for the bar, so the last control is never sitting under it. */
  .pdp { padding-bottom: calc(var(--sp-9) + 84px); }
}

/* ========================================================================
   Phones
   ======================================================================== */
@media (max-width: 640px) {
  /* One column, and nothing may reach past the viewport. A configurator that
     scrolls sideways on a phone is unusable with a thumb. */
  .pdp { grid-template-columns: 1fr; gap: var(--sp-6); }
  .pdp-gallery { position: static; }

  .lens-step-box > summary::after { display: block; }
  .lens-step-box > summary { padding: 10px 0; margin-bottom: 8px; min-height: 44px; }

  /* A folded step shows its answer; an open one does not need to repeat it. */
  .lens-step-box:not([open]) > summary .lens-step-pick { display: block; }

  /* Touch targets. 44px is the smallest thing a thumb hits reliably. */
  .lens-card, .lens-chip { min-height: 52px; padding: 13px 15px; }
  .lens-chip-name, .lens-card b { font-size: var(--fs-sm); }
  .addon-check { padding: 13px 0; gap: 13px; min-height: 52px; align-items: center; }
  .addon-check .box { width: 22px; height: 22px; }
  .rx-choice { min-height: 44px; padding: 11px 15px; }
  .qty button { min-width: 44px; min-height: 44px; }

  /* Colourway and width sit in the same buying flow as the lens steps, so
     they get the same thumb target. The gallery and wishlist controls are
     left alone: they are not on the path to a configured pair. */
  .swatch { width: 44px; height: 44px; }
  .chip { min-height: 44px; padding-block: 11px; }

  /* Prescription. Five columns across 375px gave 55px cells and 11px text;
     each eye becomes a labelled block of four fields instead, which is
     readable and thumb-sized. */
  .rx-grid { gap: 12px; }
  .rx-row-head { display: none; }
  .rx-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px; padding: 12px; border: 1px solid var(--line);
    border-radius: var(--r-sm); background: var(--paper);
  }
  .rx-eye { grid-column: 1 / -1; }
  .rx-cell { display: grid; gap: 4px; }
  /* The column header is gone, so each field says what it is. */
  .rx-cell::before {
    content: attr(data-label);
    font-size: var(--fs-2xs); color: var(--ink-soft);
    letter-spacing: .06em; text-transform: uppercase;
  }
  .rx-input { font-size: 16px; min-height: 46px; text-align: left; padding-inline: 11px; }

  .rx-meta, .rx-pd { grid-template-columns: 1fr; }
  .rx-pd { gap: 12px; }
  .rx-field .input, .rx-field .select { min-height: 46px; font-size: 16px; }

  /* A select that opens past the right edge is a clipped dropdown. */
  .rx-field .select, .lens-tint .select { width: 100%; max-width: 100%; }
}

/* Very narrow only. At 375px two columns still give ~150px per field, which
   is comfortable; stacking every box there would make the form twice as long
   for no gain. Below 340px it genuinely stops fitting. */
@media (max-width: 340px) {
  .rx-row { grid-template-columns: 1fr; }
  .sticky-art { display: none; }
}

/* ------------------------------------------------------------------------
   Nothing may scroll sideways. Set on the page rather than on one component
   because the offender is usually whichever child was added last.
   ------------------------------------------------------------------------ */
@media (max-width: 640px) {
  html, body { overflow-x: hidden; }
  .lens-builder, .lens-chips, .lens-types, .rx-panel, .rx-grid { max-width: 100%; min-width: 0; }
  .lens-chip, .lens-card, .addon-check { min-width: 0; }
  .lens-chip-note, .addon-text > span { overflow-wrap: anywhere; }
}

/* ------------------------------------------------------------------ Tint
   Three questions, asked as pills rather than dropdowns. A <select> on a
   phone opens a picker that can clip at the edge of the viewport, and there
   are only six colours, four depths and two styles — small enough to show in
   the flow of the page, where a thumb can reach them. */
.tint-panel {
  margin-top: var(--sp-4); padding: var(--sp-4);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--tint); display: grid; gap: var(--sp-4);
}
.tint-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.tint-group legend {
  padding: 0 0 7px; font-size: var(--fs-xs); font-weight: 500; color: var(--ink);
  letter-spacing: .04em; text-transform: uppercase;
}
.tint-pills { display: flex; flex-wrap: wrap; gap: 7px; }
.tint-pill {
  display: grid; gap: 1px; cursor: pointer;
  padding: 9px 13px; min-height: 44px; align-content: center;
  background: var(--paper); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.tint-pill:hover { border-color: var(--ink-faint); }
.tint-pill.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.tint-pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.tint-pill input:focus-visible + .tint-pill-label { outline: 2px solid var(--red); outline-offset: 3px; }
.tint-pill-label { font-size: var(--fs-sm); font-weight: 500; }
.tint-pill-note { font-size: var(--fs-2xs); color: var(--ink-soft); line-height: 1.4; }
.tint-empty { font-size: var(--fs-xs); color: var(--red); margin: 0; }

/* What is still missing, so the Add button never refuses without a reason
   already on screen. */
.tint-missing {
  margin: 0; padding-left: 10px; border-left: 2px solid var(--red);
  font-size: var(--fs-xs); color: var(--red);
}

@media (max-width: 640px) {
  /* One pill per row would be a very long panel; two fit a 375px screen with
     room for the note under each label. */
  .tint-pills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tint-pill { min-height: 52px; }
  .tint-panel { padding: var(--sp-3); }
}
@media (max-width: 340px) {
  .tint-pills { grid-template-columns: 1fr; }
}

/* ==========================================================================
   The configurator as a guided flow
   ==========================================================================
   Four questions, each with an answer on the record, and a review at the end.
   The visual work here is doing one job: making it obvious at a glance which
   decisions are made, which are still open, and which are closed to this
   prescription. None of it decides anything — every rule is still enforced in
   price_cart, and the storefront only mirrors it.
   ========================================================================== */

/* A step with an answer. The tick is drawn rather than an image so it inherits
   colour and needs no asset. */
.lens-step-box[data-done] > summary .lens-step::before {
  content: ''; display: inline-block;
  width: 15px; height: 15px; margin-right: var(--sp-2);
  border-radius: 50%; background: var(--success);
  vertical-align: -2px;
  /* The tick itself, as a mask so it takes the background colour. */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat,
           linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat,
                  linear-gradient(#000, #000);
          mask-composite: exclude;
}

/* The answer, shown beside the question once the step is folded. */
.lens-step-pick { color: var(--ink-soft); }

/* ------------------------------------------------------------ selected */
/* One selected treatment across the whole configurator: brand red on the
   wash, a solid ring, and weight on the label. It read as a 1px border
   change before, which is easy to miss on a phone in daylight. */
.lens-card.on,
.lens-chip.on,
.tint-pill.on {
  border-color: var(--red);
  background: var(--red-wash);
  box-shadow: inset 0 0 0 1px var(--red);
}
.lens-card.on .lens-card-name,
.lens-chip.on .lens-chip-name,
.tint-pill.on .tint-pill-label { font-weight: 600; color: var(--ink); }

/* ------------------------------------------------------------ disabled */
/* Closed by the prescription. Dashed, dimmed, and struck through, so it reads
   as "not for you" rather than "broken". */
.lens-chip.is-unavailable { cursor: not-allowed; }

/* ------------------------------------------------------------- review */
.lens-review {
  margin-top: var(--sp-5); padding: var(--sp-4);
  background: var(--tint);
  border: 1px solid var(--line); border-radius: var(--r-md);
}
.review-title {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: -0.01em;
}
.review-list { margin: 0; display: grid; gap: var(--sp-2); }
.review-row {
  display: grid; grid-template-columns: 92px minmax(0, 1fr);
  gap: var(--sp-3); align-items: baseline;
}
.review-row dt { font-size: var(--fs-xs); color: var(--ink-soft); }
.review-row dd {
  margin: 0; display: flex; align-items: baseline; gap: var(--sp-2);
  flex-wrap: wrap; font-size: var(--fs-sm);
}
.review-value { color: var(--ink); }
.review-price { margin-left: auto; color: var(--ink-soft); font-size: var(--fs-xs); white-space: nowrap; }
.review-edit {
  flex: none; padding: 2px 0;
  font-size: var(--fs-xs); font-weight: 600; color: var(--red);
  /* Underlined via text-decoration, not a border. A border sits at the bottom
     of the box, so once the touch rules give this a 44px height the rule
     detached from the word and floated below it. */
  text-decoration: underline; text-underline-offset: 3px;
  min-height: 0;
}
.review-edit:hover { color: var(--red-dark); }
.review-total {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-3); padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.review-total b { font-size: var(--fs-md); font-weight: 600; }

@media (max-width: 640px) {
  .review-row { grid-template-columns: 1fr; gap: 2px; }
  .review-row dd { width: 100%; }
}

/* ==========================================================================
   Touch targets, by input device rather than by width
   ==========================================================================
   These were scoped to max-width: 640px, which meant a tablet held in two
   hands got the desktop's 38px swatches and 24px Edit links. Target size is a
   property of the finger, not of the viewport, so the query asks about the
   pointer as well — and keeps a width fallback for touch laptops that still
   report a fine pointer.
   ========================================================================== */
@media (max-width: 1024px), (pointer: coarse) {
  .swatch { width: var(--touch-target); height: var(--touch-target); }
  .chip { min-height: var(--touch-target); padding-block: 11px; }
  .qty button { min-width: var(--touch-target); min-height: var(--touch-target); }
  .rx-choice { min-height: var(--touch-target); }
  .gallery-nav { width: var(--touch-target); height: var(--touch-target); }
  .gallery-thumbs button { min-height: var(--touch-target); }
  .lens-card, .lens-chip { min-height: var(--touch-target-lg); }
  .addon-check { min-height: var(--touch-target-lg); align-items: center; }
  .tint-pill { min-height: var(--touch-target-lg); }
  .lens-step-box > summary { min-height: var(--touch-target); align-items: center; }
  .review-edit { min-height: var(--touch-target); display: inline-flex; align-items: center; }
  .card-wish, .gallery-expand, .swatch-mini, .opt-help {
    min-width: var(--touch-target); min-height: var(--touch-target);
  }
}

/* ==========================================================================
   The prescription sign toggle
   ==========================================================================
   inputmode="decimal" asks for "digits and the decimal separator" and gets
   exactly that: neither the iOS decimal pad nor Gboard's decimal mode has a
   minus key, and the native spinners are removed above. On a phone there was
   no way at all to enter -2.00 — which is most prescriptions.

   The button sits inside the field's frame rather than beside it, so the pair
   reads as one control and the row does not grow a third column on a 320px
   screen.
   ========================================================================== */
.rx-signed-row {
  display: flex; align-items: stretch;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--paper);
  transition: border-color var(--t-fast) var(--e-out), box-shadow var(--t-fast) var(--e-out);
}
.rx-signed-row:hover { border-color: var(--ink-faint); }
/* The focus ring belongs to the pair, so tabbing to either half shows it on
   the whole control rather than on half of it. */
.rx-signed-row:focus-within { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-wash); }

/* The input loses its own frame; the wrapper carries it. */
.rx-cell.is-signed .rx-input {
  border: 0; border-radius: 0; background: none;
  min-width: 0; flex: 1;
}
.rx-cell.is-signed .rx-input:focus { outline: none; box-shadow: none; }

.rx-sign {
  flex: none; width: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: var(--fs-md); font-weight: 600;
  line-height: 1; color: var(--ink-soft);
  border-right: 1px solid var(--line);
  border-radius: var(--r-sm) 0 0 var(--r-sm);
  transition: background-color var(--t-fast), color var(--t-fast);
}
.rx-sign:hover { background: var(--tint); color: var(--ink); }
/* Negative is the common case and the one that must be unmistakable. */
.rx-sign.is-negative {
  background: var(--red-wash); color: var(--red);
  border-right-color: var(--red);
}
.rx-sign:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }

@media (max-width: 1024px), (pointer: coarse) {
  /* A thumb target, and wide enough that the sign is readable at arm's
     length. The input keeps the rest of the width. */
  .rx-sign { width: var(--touch-target); min-height: var(--touch-target); font-size: var(--fs-lg); }
}