/* Low Vision Specialists global stylesheet. Generated by tools/copy-design.py: do not edit; edit the design
   sources and re-run it. Sources, in order: design/final/tokens.css, design/final/theme.css, design/templates/SHARED-COMPONENTS.md. */

/* ========== design/final/tokens.css ========== */

/* Low Vision Specialists, final design system (2026-10-15). Base: the premium-health proposal.
   Palette fixed by Ravi's mockup; shape language from leansummits.com, scaled up for low vision.
   Fonts, loaded once in <head> (two Google families):
   https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,500;6..72,600&family=Public+Sans:wght@400;500;600;700&display=swap
   Ratios are WCAG 2.x contrast, computed. Floors: 7:1 body text, 4.5:1 large text, 3:1 control and card edges.
   One light scheme only (no dark theme, per Lalit 2026-10-15). Windows High Contrast is handled in theme.css. */

:root {
  color-scheme: light;
  /* Surfaces */
  --c-paper:     #FFFFFF; /* cards and plain bands */
  --c-stone:     #F3EFE7; /* warm hero and page-head band, matched to the photo set's warm walls */
  --c-sky:       #ECF4FC; /* mockup pale blue */
  --c-cream:     #FCF8F4; /* mockup cream: doctor band */
  --c-off:       #F8F8F4; /* mockup off-white: reviews band */
  --c-foot:      #F4F8FC; /* mockup footer */
  --c-mist:      #EEF2F6; /* image placeholder tint */
  --c-warm:      #E8E1D3; /* portrait placeholder tint */
  --c-stage:     #FFFFFF; /* product photo stage: the photos have white backgrounds, so no blend is needed */
  /* Ink */
  --c-head:      #082840; /* headings. 15.1 white, 13.2 stone */
  --c-ink:       #2B3A4A; /* body. 11.6 white, 10.1 stone, 8.9 on the warm tint */
  --c-ink-soft:  #3D4D5F; /* meta and captions. 8.7 white, 7.55 stone. Never lighter */
  --c-link:      #0C3854; /* links. 12.3 white */
  --c-accent:    #0C3854; /* outline buttons, current nav, ticks, selected picker, hover edge */
  /* Lines */
  --c-hairline:  #DCE3EA; /* decorative rules and edges of panels that are not links */
  --c-edge:      #7A8A9E; /* 1px edge of every clickable card: 3.5 white, 3.1 stone, 3.2 sky */
  --c-control:   #5A6878; /* fields and steppers, 5.7:1 */
  /* Actions */
  --c-amber:     #F8B420; /* one main action per screen, ink text only: 8.3:1 */
  --c-amber-hov: #FFC23D;
  --c-on-amber:  #082840;
  --c-solid:     #0C3854; /* dark button. White on it 12.3:1 */
  --c-solid-hov: #082840;
  --c-on-solid:  #FFFFFF;
  /* The navy band (bioptic) stays navy in both schemes */
  --c-banner:    #0C3048; /* white 13.7, amber 7.5 */
  --c-banner-box:#173E5A; /* buy box on the band, white 10.9, amber 6.0 at 34px (large) */
  --c-on-dark:   #FFFFFF;
  --c-on-dark-2: #DCE6F2; /* secondary text on navy, 10.9 */
  /* States */
  --c-success:   #0A5226;
  --c-error:     #A31B1B;
  --c-focus-ink: #082840; /* focus outline 3px, offset 2px */
  --c-focus-halo:#F8B420; /* focus halo 8px */
  --c-badge:     #082840; /* "Most popular" pill */
  --c-on-badge:  #FFFFFF;
}


:root {
  /* ---------- Type ---------- */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  /* Newsreader only for headings of 28px and larger. Everything functional (prices, product names, buttons,
     card titles, tables, nav, labels, quotes, smaller headings) is Public Sans. */
  --font-body: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --display-opsz: "opsz" 36; /* optical size held at 36 so hairlines stay sturdy */

  --fs-display: 72px;  --lh-display: 1.1; /* home H1 */
  --fs-h1:      58px;  --lh-h1: 1.12;
  --fs-h2:      44px;  --lh-h2: 1.15;
  --fs-h3:      24px;  --lh-h3: 1.3;     /* Public Sans 600 */
  --fs-quote:   28px;  /* Public Sans 500, line height 1.5 */
  --fs-lead:    22px;  --lh-lead: 1.55;
  --fs-body:    20px;  --lh-body: 1.6;
  --fs-ui:      18px;  /* floor */
  --fs-price:   40px;
  --track: 0;          /* no negative tracking on any heading (A11Y-5) */
  --measure: 34em;     /* body copy; article prose 36em max */

  /* ---------- Space and layout ---------- */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;
  --section-y: 96px;   /* 72px on phones */
  --gutter: 40px;      /* 20px on phones */
  --content: 1280px;
  --radius-card: 12px; /* cards, images, panels */
  --radius-ctl: 10px;  /* buttons, fields, picker */
  --radius-pill: 999px;/* the one badge */
  --tap: 48px;
  --btn-h: 60px;       /* Add to Cart 64px */
  --lift: translateY(-4px);
  --ease: .18s ease;
}

@media (max-width: 1100px) { :root { --fs-display: 58px; --fs-h1: 48px; --fs-h2: 38px; --gutter: 32px; } }
@media (max-width: 767px)  { :root { --fs-display: 40px; --lh-display: 1.15; --fs-h1: 36px; --lh-h1: 1.18; --fs-h2: 32px; --fs-h3: 22px;
  --fs-quote: 24px; --fs-lead: 20px; --fs-price: 36px; --section-y: 72px; --gutter: 20px; } }
/* Breakpoints: phone <= 767, tablet 768 to 1100, desktop 1101+. Sticky rails only when min-height is 950px. */

/* ========== design/final/theme.css ========== */

/* Low Vision Specialists, final theme. Maps to the custom WordPress theme's style.css.
   Every section is a block pattern with one root class (lv-*). Tokens live in tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--c-paper); color: var(--c-ink); font: 400 var(--fs-body)/var(--lh-body) var(--font-body); }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { color: var(--c-head); margin: 0; letter-spacing: var(--track); }
h1, h2 { font-family: var(--font-display); font-weight: 500; font-variation-settings: var(--display-opsz); }
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font: 600 var(--fs-h3)/var(--lh-h3) var(--font-body); }
p { margin: 0 0 var(--s2); }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
figure, blockquote { margin: 0; }
a { color: var(--c-link); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
a:hover { text-decoration-thickness: 3px; }
.pr { font-family: var(--font-body); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: calc(var(--content) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.lead { font-size: var(--fs-lead); line-height: var(--lh-lead); }
.meta { font-size: var(--fs-ui); color: var(--c-ink-soft); }
/* A heading below 28px is always Public Sans (the serif's hairlines thin out below that size) */
.h-sans { font: 700 21px/1.3 var(--font-body) !important; }

/* ---------- Images in forced colours (Windows High Contrast) ---------- */
@media (forced-colors: active) {
  img { mix-blend-mode: normal !important; filter: none !important; } /* photos and product shots keep their own colours */
  .lv-brands li, .lv-brand img { forced-color-adjust: none; background: #FFFFFF; border-radius: 6px; padding: 4px; }
}

/* ---------- Focus: outline survives Windows High Contrast; the amber halo adds weight in normal colours ---------- */
:focus-visible { outline: 3px solid var(--c-focus-ink); outline-offset: 2px; box-shadow: 0 0 0 8px var(--c-focus-halo); }
.lv-topbar :focus-visible { outline-color: #FFFFFF; outline-offset: -5px; box-shadow: none; }
.on-dark :focus-visible { outline-color: #FFFFFF; }
@media (forced-colors: active) { :focus-visible { outline: 3px solid Highlight; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } .lv-card:hover, .lv-tile:hover { transform: none !important; } }

.skip { position: absolute; left: 16px; top: -100px; z-index: 10; background: var(--c-amber); color: var(--c-on-amber); padding: 12px 20px; border-radius: var(--radius-ctl); font-weight: 700; }
.skip:focus { top: 12px; }

/* ---------- Buttons: LSS solid plus outline pair, scaled to 60px and 19px ---------- */
.lv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--btn-h); padding: 14px 26px;
  border-radius: var(--radius-ctl); border: 2px solid transparent; font: 600 19px/1.2 var(--font-body); text-decoration: none; cursor: pointer;
  text-align: center; transition: transform var(--ease), background-color var(--ease), border-color var(--ease); }
.lv-btn:hover { transform: translateY(-2px); text-decoration: none; }
.lv-btn--primary { background: var(--c-amber); border-color: var(--c-amber); color: var(--c-on-amber); }
.lv-btn--primary:hover { background: var(--c-amber-hov); border-color: var(--c-amber-hov); }
.lv-btn--dark { background: var(--c-solid); border-color: var(--c-solid); color: var(--c-on-solid); }
.lv-btn--dark:hover { background: var(--c-solid-hov); border-color: var(--c-solid-hov); }
.lv-btn--outline { background: transparent; border-color: var(--c-accent); color: var(--c-accent); }
.lv-btn--outline:hover { background: var(--c-paper); }
.lv-btn--light { background: #FFFFFF; border-color: #FFFFFF; color: #082840; }
.lv-btn--light:hover { background: transparent; color: #FFFFFF; }
.lv-btn--block { width: 100%; }
.lv-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: var(--s4); }
.lv-more { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 600; font-size: var(--fs-ui); }
.arr { font-family: var(--font-body); font-weight: 600; }

/* ---------- Section shell. Same-colour neighbours share one 96px gap; colour changes get the full band ---------- */
.lv-band { padding: var(--section-y) 0; }
.lv-band--plain + .lv-band--plain { padding-top: 0; }
.lv-band--stone { background: var(--c-stone); }
.lv-band--sky { background: var(--c-sky); }
.lv-band--cream { background: var(--c-cream); }
.lv-band--off { background: var(--c-off); }
.lv-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s4); margin-bottom: var(--s5); flex-wrap: wrap; }
.lv-head > div { max-width: 46rem; }
.lv-head p { margin-top: var(--s2); font-size: var(--fs-lead); line-height: var(--lh-lead); }

/* ---------- Image slot: the soft tinted block a generated photo lands on; the label shows only if the file is missing ---------- */
.lv-media { position: relative; background: var(--c-mist); overflow: hidden; border-radius: var(--radius-card); }
.lv-media > img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.lv-media .slot { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 20px 24px; z-index: 0; }
.lv-media .slot span { font: 600 18px/1.4 var(--font-body); color: var(--c-ink); }
.lv-media--warm { background: var(--c-warm); }

/* ---------- Header ---------- */
.lv-topbar { background: #0C3854; color: #FFFFFF; font-size: var(--fs-ui); }
.lv-topbar .wrap { display: flex; justify-content: center; gap: 24px; align-items: center; min-height: 48px; flex-wrap: wrap; }
.lv-topbar a { color: #FFFFFF; font-weight: 600; display: inline-flex; align-items: center; min-height: 48px; }
.lv-header { background: var(--c-paper); border-bottom: 1px solid var(--c-hairline); position: relative; }
.lv-header .bar { display: flex; align-items: center; gap: 32px; min-height: 100px; }
.lv-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--c-head); min-height: 48px; flex: none; }
.lv-brand img { width: 52px; height: 52px; }
.lv-brand .name { display: flex; flex-direction: column; line-height: 1.05; }
.lv-brand .b1 { font: 700 24px/1.05 var(--font-body); }
.lv-brand .b2 { font: 600 18px/1.2 var(--font-body); color: var(--c-ink-soft); }
.lv-search { flex: 1; display: flex; max-width: 520px; min-width: 0; }
.lv-search input { flex: 1; width: 100%; min-width: 0; min-height: 56px; padding: 0 18px; font: 400 19px var(--font-body); color: var(--c-ink); background: var(--c-paper);
  border: 1.5px solid var(--c-control); border-right: 0; border-radius: var(--radius-ctl) 0 0 var(--radius-ctl); }
.lv-search input::placeholder { color: var(--c-ink-soft); opacity: 1; }
.lv-search button { flex: none; min-height: 56px; border-radius: 0 var(--radius-ctl) var(--radius-ctl) 0; padding: 0 22px; }
.lv-tools { margin-left: auto; display: flex; align-items: center; gap: 24px; }
.lv-phone { display: flex; flex-direction: column; text-decoration: none; color: var(--c-head); min-height: 48px; justify-content: center; }
.lv-phone .l { font-size: 18px; color: var(--c-ink-soft); font-weight: 500; line-height: 1.3; }
.lv-phone .n { font: 700 23px/1.2 var(--font-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lv-nav ul { list-style: none; display: flex; gap: 8px; }
.lv-nav a { display: inline-flex; align-items: center; min-height: 56px; padding: 0 14px; font-weight: 600; font-size: 19px; color: var(--c-head);
  text-decoration: none; border-bottom: 3px solid transparent; }
.lv-nav li:first-child a { padding-left: 0; }
.lv-nav a:hover { border-bottom-color: var(--c-edge); }
.lv-nav a[aria-current] { border-bottom-color: var(--c-accent); }
@media (forced-colors: active) { .lv-nav a { border-bottom-color: Canvas; } .lv-nav a[aria-current] { border-bottom-color: Highlight; } }
.lv-menu { display: none; }
.lv-callbar { display: none; }
@media (max-width: 1100px) { .lv-header .bar > .lv-search { display: none; } }
@media (max-width: 900px) {
  .lv-header .bar { min-height: 80px; gap: 12px; }
  .lv-nav, .lv-tools .lv-phone, .lv-tools .shop { display: none; }
  .lv-menu { display: block; }
  .lv-menu summary { list-style: none; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 18px; border: 2px solid var(--c-accent);
    border-radius: var(--radius-ctl); font-weight: 700; color: var(--c-accent); cursor: pointer; font-size: 19px; }
  .lv-menu summary::-webkit-details-marker { display: none; }
  .lv-menu summary .bars { width: 20px; height: 14px; border-top: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; position: relative; }
  .lv-menu summary .bars::after { content: ""; position: absolute; left: 0; right: 0; top: 3.5px; border-top: 2.5px solid currentColor; }
  .lv-menu[open] .panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--c-paper); border-bottom: 1px solid var(--c-hairline); padding: 8px var(--gutter) 24px; z-index: 5; }
  .lv-menu .panel ul { list-style: none; }
  .lv-menu .panel li a { display: flex; align-items: center; min-height: 56px; font-weight: 600; color: var(--c-head); text-decoration: none; border-bottom: 1px solid var(--c-hairline); }
  .lv-menu .lv-search { display: flex; max-width: none; margin-top: 16px; }
  .lv-callbar { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 10px; min-height: 64px; padding: 8px 16px;
    background: var(--c-stone); color: var(--c-head); text-decoration: none; font-size: 18px; border-bottom: 1px solid var(--c-hairline); }
  .lv-callbar b { font-size: 21px; font-variant-numeric: tabular-nums; }
}
@media (max-width: 400px) { .lv-brand img { width: 44px; height: 44px; } .lv-brand .b1 { font-size: 21px; } }

/* ---------- Hero: copy on warm stone; the photograph bleeds to the right edge, the doctor offer sits under it ---------- */
.lv-hero { background: var(--c-stone); overflow: hidden; }
.lv-hero .grid { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); min-height: 640px; }
.lv-hero .copy { padding: 88px 56px 88px max(var(--gutter), calc((100vw - var(--content)) / 2)); align-self: center; }
.lv-hero .site { display: block; font: 700 21px/1.3 var(--font-body); color: var(--c-head); margin-bottom: 20px; }
.lv-hero .q { display: block; font-size: var(--fs-display); line-height: var(--lh-display); max-width: 14ch; }
.lv-hero .lead { margin-top: var(--s4); max-width: 30em; }
.lv-hero .lv-actions { flex-wrap: nowrap; }
.lv-hero .aside { display: flex; flex-direction: column; }
.lv-hero .lv-media { border-radius: 0; flex: 1; min-height: 440px; background: var(--c-warm); }
.lv-hero .lv-media img { object-position: 36% 55%; } /* keeps the device (lower left) and the reader in frame */
.lv-offer { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; padding: 24px 40px 24px 32px; background: var(--c-paper); border-left: 1px solid var(--c-hairline); }
.lv-offer p { margin: 0; font: 700 22px/1.3 var(--font-body); color: var(--c-head); }
.lv-offer p span { display: block; font-weight: 400; font-size: var(--fs-ui); color: var(--c-ink-soft); }
@media (max-width: 1100px) { .lv-hero .grid { grid-template-columns: 1fr 1fr; } .lv-hero .copy { padding: 72px 40px 72px var(--gutter); } .lv-hero .lv-actions { flex-wrap: wrap; } }
@media (max-width: 900px) {
  .lv-hero .grid { grid-template-columns: 1fr; min-height: 0; }
  .lv-hero .copy { padding: 40px var(--gutter) 36px; }
  .lv-hero .lv-media { min-height: 0; flex: none; aspect-ratio: 4 / 3; }
  .lv-offer { padding: 20px var(--gutter); border-left: 0; }
  .lv-hero .lv-actions .lv-btn { width: 100%; }
}

/* ---------- Card: LSS flat card. White, 1px edge, 12px radius, image on top; lift and accent edge on hover ---------- */
.lv-card { position: relative; display: flex; flex-direction: column; background: var(--c-paper); border: 1px solid var(--c-edge); border-radius: var(--radius-card);
  overflow: hidden; transition: transform var(--ease), border-color var(--ease), box-shadow var(--ease); }
.lv-card:hover { transform: var(--lift); border-color: var(--c-accent); box-shadow: inset 0 0 0 1px var(--c-accent); }
.lv-card .lv-media { border-radius: 0; }
.lv-card .body { padding: 28px 28px 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.lv-card h3 a { color: var(--c-head); text-decoration: none; display: inline-block; min-height: 48px; }
.lv-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.lv-card h3 a:focus-visible { outline: none; box-shadow: 0 4px 0 0 var(--c-focus-ink); }
.lv-card:has(h3 a:focus-visible) { outline: 3px solid var(--c-focus-ink); outline-offset: 3px; box-shadow: 0 0 0 9px var(--c-focus-halo); }
@media (forced-colors: active) { .lv-card h3 a:focus-visible { outline: 3px solid Highlight; outline-offset: 2px; } .lv-card:has(h3 a:focus-visible) { outline-color: Highlight; } .lv-card, .lv-tile { border: 1px solid CanvasText; } }
.lv-card .foot { margin-top: auto; padding-top: 8px; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-size: var(--fs-ui); font-weight: 600; color: var(--c-link); }
.lv-card .foot .go { font-size: 22px; transition: transform var(--ease); }
.lv-card:hover .foot .go { transform: translateX(4px); }

/* ---------- Category strip (product-commerce): five product tiles, each with a 3.5:1 edge ---------- */
.lv-cats { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.lv-tile { position: relative; display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--c-head);
  background: var(--c-paper); border: 1px solid var(--c-edge); border-radius: var(--radius-card); overflow: hidden; transition: transform var(--ease), border-color var(--ease), box-shadow var(--ease); }
.lv-tile .stage { aspect-ratio: 1 / 1; background: var(--c-stage); display: grid; place-items: center; padding: 20px; border-bottom: 1px solid var(--c-hairline); }
.lv-tile .stage img { width: 100%; height: 100%; object-fit: contain; }
.lv-tile .t-name { display: block; padding: 18px 20px 4px; font: 700 20px/1.3 var(--font-body); }
.lv-tile .t-meta { display: block; padding: 0 20px 20px; font-size: var(--fs-ui); color: var(--c-ink-soft); }
.lv-tile:hover { transform: var(--lift); border-color: var(--c-accent); box-shadow: inset 0 0 0 1px var(--c-accent); }
.lv-tile:focus-visible { outline-offset: 4px; }
@media (max-width: 1100px) { .lv-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .lv-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .lv-tile .t-name { font-size: 19px; padding: 14px 14px 2px; } .lv-tile .t-meta { padding: 0 14px 14px; } }

/* ---------- Tasks: four large editorial photo cards, two by two ---------- */
.lv-tasks .grid { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.lv-tasks .lv-media { aspect-ratio: 16 / 10; }
@media (max-width: 767px) { .lv-tasks .grid { grid-template-columns: 1fr; gap: 24px; } .lv-tasks .lv-media { aspect-ratio: 4 / 3; } }

/* ---------- Doctor: a portrait-sized slot, bio, quote, a patient's words, then the exam as numbered steps ---------- */
.lv-doctor .grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 64px; align-items: start; }
.lv-doctor .portrait { width: 240px; height: 300px; }
.lv-doctor .portrait .slot { align-items: center; justify-content: center; text-align: center; padding: 20px; }
.lv-doctor h2 { margin-bottom: var(--s3); }
.lv-doctor .bio { max-width: var(--measure); }
.lv-quote p { font: 500 var(--fs-quote)/1.5 var(--font-body); color: var(--c-head); margin: 0; }
.lv-quote footer, .lv-quote figcaption { margin-top: 12px; font-size: var(--fs-ui); font-weight: 600; color: var(--c-ink-soft); }
.lv-doctor .lv-quote { margin: var(--s4) 0; max-width: 34em; }
.lv-patient { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--c-hairline); max-width: var(--measure); }
.lv-patient p { margin: 0; }
.lv-patient figcaption { margin-top: 8px; font-size: var(--fs-ui); font-weight: 600; color: var(--c-ink-soft); }
.lv-steps { margin-top: var(--s7); }
.lv-steps h3 { font: 500 34px/1.2 var(--font-display); font-variation-settings: var(--display-opsz); margin-bottom: 12px; }
.lv-steps > p { max-width: var(--measure); }
.lv-steps ol { list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: var(--s5); }
.lv-steps li { counter-increment: s; border-top: 2px solid var(--c-head); padding-top: 20px; font-weight: 600; color: var(--c-head); font-size: 21px; line-height: 1.35; }
.lv-steps li::before { content: counter(s, decimal-leading-zero); display: block; font: 600 30px/1 var(--font-body); color: var(--c-link); margin-bottom: 14px; font-variant-numeric: tabular-nums; }
.lv-steps .after { margin-top: var(--s4); }
@media (max-width: 1100px) { .lv-steps ol { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) { .lv-doctor .grid { grid-template-columns: 1fr; gap: 28px; } .lv-doctor .portrait { width: 180px; height: 225px; } .lv-steps ol { grid-template-columns: 1fr; gap: 24px; } .lv-steps h3 { font-size: 30px; } }

/* ---------- Split: photograph and text side by side ---------- */
.lv-split .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.lv-split .lv-media { aspect-ratio: 3 / 2; }
.lv-split h2 { margin-bottom: var(--s4); }
.lv-split--flip .lv-media { order: 2; }
@media (max-width: 900px) { .lv-split .grid { grid-template-columns: 1fr; gap: 40px; } .lv-split--flip .lv-media { order: 0; } }

/* ---------- Bioptic band (product-commerce): the full 21:9 photo so the telescope shows, copy and a buy box under it ---------- */
.lv-banner { background: var(--c-banner); color: var(--c-on-dark); padding: var(--section-y) 0; }
.lv-banner .wide { aspect-ratio: 21 / 9; border-radius: var(--radius-card); background: #22465F; margin-bottom: var(--s5); }
.lv-banner .wide img { object-position: 8% 40%; } /* the driver and the bioptic sit in the left third */
.lv-banner .wide .slot span { color: #FFFFFF; }
.lv-banner .grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s6); align-items: start; }
.lv-banner h2 { color: #FFFFFF; margin-bottom: var(--s3); }
.lv-banner p { color: var(--c-on-dark-2); }
.lv-buybox { background: var(--c-banner-box); border: 1px solid rgba(255, 255, 255, .28); border-radius: var(--radius-card); padding: 32px; }
.lv-buybox .pname { font: 700 21px/1.35 var(--font-body); color: #FFFFFF; margin-bottom: 8px; }
.lv-buybox .pr { display: block; font-size: 40px; line-height: 1.2; color: var(--c-amber); margin-bottom: 16px; }
.lv-buybox .lv-btn { margin-top: 8px; }
@media (max-width: 900px) { .lv-banner .grid { grid-template-columns: 1fr; gap: var(--s4); } .lv-banner .wide { aspect-ratio: 16 / 10; } .lv-buybox { padding: 24px; } }

/* ---------- Reviews: one large pull quote on the band, no card ---------- */
.lv-reviews .top { display: grid; grid-template-columns: 4fr 8fr; gap: 80px; align-items: start; }
.lv-reviews .big p { font: 500 34px/1.5 var(--font-body); color: var(--c-head); }
@media (max-width: 900px) { .lv-reviews .top { grid-template-columns: 1fr; gap: 32px; } .lv-reviews .big p { font-size: 26px; } }

/* ---------- Plans: MaculaRevive. Not links, so a hairline edge; the plan the live page features gets the accent outline and pill ---------- */
.lv-plans .grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; margin-top: 8px; }
.lv-plan { position: relative; background: var(--c-paper); border: 1px solid var(--c-hairline); border-radius: var(--radius-card); padding: 40px 32px 32px; display: flex; flex-direction: column; gap: 20px; }
.lv-plan h3 { font: 700 26px/1.25 var(--font-body); }
.lv-plan .price { display: flex; flex-direction: column; gap: 2px; padding-bottom: 20px; border-bottom: 1px solid var(--c-hairline); }
.lv-plan .price .pr { font-size: 44px; line-height: 1.1; color: var(--c-head); }
.lv-plan .price span:last-child { font-size: var(--fs-ui); color: var(--c-ink-soft); }
.lv-plan ul { list-style: none; display: grid; gap: 12px; font-size: 19px; }
.lv-plan li { padding-left: 32px; position: relative; }
.lv-plan li::before, .lv-ticks li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 18px; height: 10px; border-left: 3px solid var(--c-accent); border-bottom: 3px solid var(--c-accent); transform: rotate(-45deg); }
.lv-plan--featured { border: 2px solid var(--c-accent); }
.lv-badge { position: absolute; top: 0; left: 30px; transform: translateY(-50%); background: var(--c-badge); color: var(--c-on-badge); border-radius: var(--radius-pill);
  padding: 6px 16px; font: 700 18px/1.3 var(--font-body); }
@media (forced-colors: active) { .lv-badge { border: 2px solid CanvasText; } }
.lv-plans .note { margin-top: var(--s4); max-width: var(--measure); }
.lv-plans .claire { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--c-hairline); display: grid; grid-template-columns: 4fr 8fr; gap: 80px; }
.lv-plans .claire h3 { font: 700 21px/1.3 var(--font-body); }
.lv-plans .claire .lv-quote p { font-size: 22px; font-weight: 400; }
@media (max-width: 900px) { .lv-plans .grid { grid-template-columns: 1fr; gap: 32px; } .lv-plans .claire { grid-template-columns: 1fr; gap: 20px; } }

/* ---------- Index list: conditions. Rows on hairlines, no boxes ---------- */
.lv-index { list-style: none; display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; border-top: 1px solid var(--c-edge); }
.lv-index li { border-bottom: 1px solid var(--c-edge); }
.lv-index a { display: grid; grid-template-columns: 1fr auto; gap: 8px 24px; padding: 28px 0; text-decoration: none; color: var(--c-ink); min-height: 48px; }
.lv-index .t { font: 600 var(--fs-h3)/1.3 var(--font-body); color: var(--c-head); }
.lv-index .d { grid-column: 1; }
.lv-index .go { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 26px; color: var(--c-link); transition: transform var(--ease); }
.lv-index a:hover .t { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.lv-index a:hover .go { transform: translateX(4px); }
@media (max-width: 767px) { .lv-index { grid-template-columns: 1fr; } .lv-index a { padding: 22px 0; } }

/* ---------- Learning Center ---------- */
.lv-learn .grid { display: grid; grid-template-columns: 7fr 5fr; gap: 64px; }
.lv-learn .date { font-size: var(--fs-ui); color: var(--c-ink-soft); }
.lv-learn .lead-story { border-top: 1px solid var(--c-edge); padding-top: 28px; }
.lv-learn .lead-story h3 { font: 500 38px/1.2 var(--font-display); font-variation-settings: var(--display-opsz); margin: 8px 0 16px; }
.lv-learn h3 a { color: var(--c-head); text-decoration: none; }
.lv-learn h3 a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.lv-learn .rows { list-style: none; border-top: 1px solid var(--c-edge); }
.lv-learn .rows li { border-bottom: 1px solid var(--c-edge); padding: 28px 0; }
.lv-learn .rows h3 { margin: 6px 0 10px; }
.lv-topics { margin-top: var(--s6); }
.lv-topics h3 { margin-bottom: var(--s3); }
.lv-topics ul { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 48px; }
.lv-topics li a { display: flex; justify-content: space-between; gap: 16px; align-items: center; min-height: 60px; border-bottom: 1px solid var(--c-hairline); text-decoration: none; font-weight: 500; }
.lv-topics li a span:first-child { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.lv-topics .n { color: var(--c-ink-soft); font-variant-numeric: tabular-nums; font-size: var(--fs-ui); }
@media (max-width: 900px) { .lv-learn .grid { grid-template-columns: 1fr; gap: 40px; } .lv-topics ul { grid-template-columns: 1fr; } .lv-learn .lead-story h3 { font-size: 30px; } }

/* ---------- Brands ---------- */
.lv-brands { padding: 64px 0; border-top: 1px solid var(--c-hairline); }
.lv-brands .wrap { display: flex; align-items: center; gap: 56px; flex-wrap: wrap; }
.lv-brands h2 { font: 600 20px/1.3 var(--font-body); color: var(--c-ink-soft); }
.lv-brands ul { list-style: none; display: flex; flex-wrap: wrap; gap: 32px 64px; align-items: center; }
.lv-brands .wm { font: 700 24px/1 var(--font-body); color: var(--c-ink-soft); }
@media (max-width: 767px) { .lv-brands .wrap { gap: 24px; } .lv-brands ul { gap: 28px 40px; } }

/* ---------- Footer ---------- */
.lv-footer { background: var(--c-foot); padding: 88px 0 40px; font-size: var(--fs-ui); border-top: 1px solid var(--c-hairline); }
.lv-footer .top { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 40px; }
.lv-footer .about p { margin: 20px 0; max-width: 24em; }
.lv-footer .fphone { display: inline-flex; flex-direction: column; text-decoration: none; color: var(--c-head); min-height: 48px; }
.lv-footer .fphone span:first-child { color: var(--c-ink-soft); }
.lv-footer .fphone span:last-child { font-weight: 700; font-size: 24px; }
.lv-footer h2 { font: 700 19px/1.3 var(--font-body); color: var(--c-head); margin-bottom: 12px; }
.lv-footer nav ul { list-style: none; }
.lv-footer nav a { display: inline-flex; align-items: center; min-height: 48px; min-width: 48px; }
.lv-footer .social { list-style: none; display: flex; gap: 8px; margin-top: 16px; }
.lv-footer .social a { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border: 1px solid var(--c-edge); border-radius: var(--radius-ctl); color: var(--c-link); }
.lv-footer .social svg { width: 22px; height: 22px; }
.lv-footer .bottom { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--c-hairline); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; }
.lv-footer .bottom ul { list-style: none; display: flex; gap: 24px; flex-wrap: wrap; }
.lv-footer .bottom a { display: inline-flex; align-items: center; min-height: 48px; }
@media (max-width: 1100px) { .lv-footer .top { grid-template-columns: 1fr 1fr; } .lv-footer .about { grid-column: 1 / -1; } }
@media (max-width: 480px) { .lv-footer .top { grid-template-columns: 1fr; } }

/* =================== Product page (product-commerce layout, this system's type) =================== */
.lv-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0 4px; font-size: var(--fs-ui); }
.lv-crumbs li { display: inline-flex; align-items: center; }
.lv-crumbs li + li::before { content: "/"; margin: 0 10px; color: var(--c-ink-soft); }
.lv-crumbs a { display: inline-flex; align-items: center; min-height: 48px; }
.lv-crumbs [aria-current] { color: var(--c-ink-soft); }
.lv-pdp { padding: 8px 0 var(--section-y); }
.lv-pdp .grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "gallery head" "gallery buy" "gallery ."; grid-template-rows: auto auto 1fr; column-gap: 64px; margin-top: 8px; }
.lv-pdp .head { grid-area: head; }
.lv-pdp .buy { grid-area: buy; }
.lv-pdp .gallery { grid-area: gallery; }
.lv-pdp .maker a { font-weight: 600; font-size: var(--fs-ui); display: inline-flex; min-height: 48px; align-items: center; }
.lv-pdp h1 { font-family: var(--font-body); font-variation-settings: normal; }
.lv-pdp h1 .nm { display: block; font: 700 52px/1.1 var(--font-body); color: var(--c-head); }
.lv-pdp h1 .ds { display: block; margin-top: 6px; font: 600 25px/1.3 var(--font-body); color: var(--c-head); }
.lv-pdp .sub { margin: 12px 0 0; }
.lv-pdp .price-row { display: flex; align-items: baseline; gap: 16px; margin: 16px 0 0; flex-wrap: wrap; }
.lv-pdp .price-row .pr { font-size: var(--fs-price); color: var(--c-head); }
.lv-pdp .price-row .ship { font-size: var(--fs-ui); color: var(--c-ink-soft); }
.lv-pdp .cart { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: end; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--c-hairline); }
.lv-flabel { display: block; font-weight: 600; font-size: var(--fs-ui); margin-bottom: 6px; color: var(--c-head); }
.lv-stepper { display: inline-flex; align-items: stretch; border: 1.5px solid var(--c-control); border-radius: var(--radius-ctl); background: var(--c-paper); }
.lv-stepper button { width: 54px; min-height: 64px; background: transparent; border: 0; font: 600 26px var(--font-body); color: var(--c-link); cursor: pointer; border-radius: var(--radius-ctl); }
.lv-stepper input { width: 60px; text-align: center; border: 0; border-left: 1px solid var(--c-hairline); border-right: 1px solid var(--c-hairline); font: 700 22px var(--font-body); color: var(--c-head); background: transparent; }
.lv-pdp .cart .lv-btn { min-height: 64px; font-size: 20px; }
.lv-callbtn { display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-top: 12px; padding: 12px 24px; }
.lv-callbtn .num { font-variant-numeric: tabular-nums; font-weight: 700; }
.lv-pdp .note { margin: 8px 0 0; font-size: var(--fs-ui); color: var(--c-ink-soft); }
.lv-pick-label { margin: 28px 0 10px; font-weight: 700; font-size: var(--fs-ui); color: var(--c-head); }
.lv-pick-label span { font-weight: 400; color: var(--c-ink-soft); }
.lv-pick { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lv-pick a { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; min-height: 48px; border: 1px solid var(--c-edge); border-radius: var(--radius-ctl); text-decoration: none; color: var(--c-ink); background: var(--c-paper); }
.lv-pick a:hover { border-color: var(--c-accent); }
.lv-pick .sz { font: 700 22px/1.2 var(--font-body); color: var(--c-head); }
.lv-pick .pr { font-size: 19px; color: var(--c-head); }
.lv-pick a[aria-current] { border: 3px solid var(--c-accent); padding: 12px 14px; background: var(--c-sky); }
.lv-assure { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 28px; margin-top: 20px; font-size: var(--fs-ui); color: var(--c-head); font-weight: 600; }
.lv-pdp .stage { background: var(--c-stage); border: 1px solid var(--c-hairline); border-radius: var(--radius-card); aspect-ratio: 1 / 1; max-height: 720px; display: flex; align-items: center; justify-content: center; padding: 48px; }
.lv-pdp .stage img { max-height: 100%; width: auto; }
.lv-thumbs { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.lv-thumbs button { width: 100%; aspect-ratio: 1; background: var(--c-stage); border: 1px solid var(--c-edge); border-radius: var(--radius-ctl); padding: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.lv-thumbs button img { width: 100%; height: 100%; object-fit: contain; }
.lv-thumbs button[aria-current] { border: 3px solid var(--c-accent); }
.lv-thumbs .t-slot { width: 100%; height: 100%; background: var(--c-mist); border-radius: 6px; display: flex; align-items: flex-end; padding: 10px; text-align: left; font: 600 18px/1.25 var(--font-body); color: var(--c-ink); }
@media (max-width: 1100px) { .lv-pdp .grid { column-gap: 40px; } .lv-pdp h1 .nm { font-size: 44px; } }
@media (max-width: 900px) {
  .lv-pdp .grid { grid-template-columns: 1fr; grid-template-areas: "head" "buy" "gallery"; grid-template-rows: none; }
  .lv-pdp .gallery { margin-top: 32px; }
  .lv-pdp h1 .nm { font-size: 40px; } .lv-pdp h1 .ds { font-size: 22px; }
  .lv-pdp .stage { padding: 24px; }
}
@media (max-width: 480px) { .lv-pdp .cart { grid-template-columns: 1fr; } .lv-thumbs { gap: 10px; } .lv-thumbs .t-slot { font-size: 18px; padding: 6px; } .lv-pick { gap: 8px; } .lv-pick a { padding: 10px; } .lv-pick a[aria-current] { padding: 8px; } }

/* Local nav (Apple product sub-nav) */
.lv-localnav { position: sticky; top: 0; z-index: 4; background: var(--c-paper); border-top: 1px solid var(--c-hairline); border-bottom: 1px solid var(--c-hairline); }
.lv-localnav .wrap { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.lv-localnav .ln-name { font: 700 21px/1.2 var(--font-body); color: var(--c-head); }
.lv-localnav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0 28px; }
.lv-localnav a { display: inline-flex; align-items: center; min-height: 60px; font-weight: 600; font-size: 19px; }
@media (max-height: 949px), (max-width: 900px) { .lv-localnav { position: static; } }
@media (max-width: 767px) { .lv-localnav .ln-name { display: none; } .lv-localnav ul { gap: 0 20px; } .lv-localnav a { min-height: 52px; } }

/* Spec row: three facts on hairlines, text only (no tiles) */
.lv-specs { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--c-edge); border-bottom: 1px solid var(--c-edge); }
.lv-specs li { padding: 28px 32px; border-left: 1px solid var(--c-hairline); display: flex; flex-direction: column; gap: 6px; }
.lv-specs li:first-child { border-left: 0; padding-left: 0; }
.lv-specs .k { font: 700 30px/1.2 var(--font-body); color: var(--c-head); }
.lv-specs .v { color: var(--c-ink); }
@media (max-width: 767px) { .lv-specs { grid-template-columns: 1fr; } .lv-specs li { border-left: 0; border-top: 1px solid var(--c-hairline); padding: 20px 0; } .lv-specs li:first-child { border-top: 0; } }

.lv-fit { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: center; margin-top: var(--s6); }
.lv-fit .stage { background: var(--c-stage); border: 1px solid var(--c-hairline); border-radius: var(--radius-card); aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; padding: 40px; }
.lv-fit h2 { font-size: 38px; margin-bottom: var(--s3); }
.lv-ticks { list-style: none; display: grid; gap: 18px; }
.lv-ticks li { padding-left: 40px; position: relative; }
.lv-ticks li::before { left: 4px; top: 8px; width: 20px; height: 11px; }
@media (max-width: 900px) { .lv-fit { grid-template-columns: 1fr; gap: 32px; } .lv-fit h2 { font-size: 30px; } }

/* Three-up compare (Apple "Compare models"): rows line up across columns */
.lv-cmp3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.lv-cmp3 .col { display: grid; grid-template-rows: subgrid; grid-row: span 4; gap: 0; border: 1px solid var(--c-hairline); border-radius: var(--radius-card); overflow: hidden; background: var(--c-paper); }
.lv-cmp3 .col.is-this { border: 2px solid var(--c-accent); }
.lv-cmp3 .stage { position: relative; height: 240px; padding: 28px; background: var(--c-stage); display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--c-hairline); }
.lv-cmp3 .stage img { max-height: 100%; width: auto; }
.lv-cmp3 .stage .lv-media { position: absolute; inset: 0; border-radius: 0; }
.lv-cmp3 .flag { position: absolute; top: 14px; left: 14px; z-index: 2; background: var(--c-badge); color: var(--c-on-badge); border-radius: var(--radius-pill); padding: 4px 14px; font: 700 18px/1.3 var(--font-body); }
.lv-cmp3 .hd { padding: 20px 24px 8px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.lv-cmp3 .hd a { display: inline-flex; min-height: 48px; align-items: center; }
.lv-cmp3 .hd .pr { font-size: 24px; color: var(--c-head); }
.lv-cmp3 .row { padding: 14px 24px; border-top: 1px solid var(--c-hairline); display: flex; flex-direction: column; gap: 2px; }
.lv-cmp3 .k { font-size: var(--fs-ui); color: var(--c-ink-soft); font-weight: 600; }
.lv-cmp3 .v.big { font: 700 28px/1.2 var(--font-body); color: var(--c-head); }
@media (forced-colors: active) { .lv-cmp3 .flag { border: 2px solid CanvasText; } }
@media (max-width: 900px) { .lv-cmp3 { grid-template-columns: 1fr; } .lv-cmp3 .col { grid-template-rows: none; grid-row: auto; } .lv-cmp3 .stage { height: 200px; } }

.lv-table-wrap { background: var(--c-paper); border: 1px solid var(--c-hairline); border-radius: var(--radius-card); overflow: hidden; }
.lv-table { width: 100%; border-collapse: collapse; font-size: 19px; }
.lv-table th, .lv-table td { text-align: left; padding: 18px 28px; border-bottom: 1px solid var(--c-hairline); vertical-align: top; }
.lv-table thead th { font-size: var(--fs-ui); font-weight: 700; color: var(--c-head); background: var(--c-off); }
.lv-table tbody th { font-weight: 600; }
.lv-table th a, .lv-table td a { display: inline-flex; align-items: center; min-height: 48px; }
.lv-table tr:last-child > * { border-bottom: 0; }
.lv-table .num { text-align: right; }
.lv-table .num .pr { font-size: 20px; color: var(--c-head); }
.lv-table .is-current { background: var(--c-sky); }
.lv-table .is-current th { box-shadow: inset 4px 0 0 var(--c-accent); }
.lv-table .you { display: block; font-size: var(--fs-ui); font-weight: 600; color: var(--c-ink-soft); }
@media (max-width: 760px) {
  .lv-table th, .lv-table td { padding: 14px 18px; }
  .lv-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .lv-table--stack tr { display: block; border-bottom: 1px solid var(--c-hairline); padding: 14px 18px; }
  .lv-table--stack td { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; border: 0; text-align: left; }
  .lv-table--stack tbody th { display: block; padding: 0 0 6px; border: 0; }
  .lv-table--stack td::before { content: attr(data-label); font-weight: 600; color: var(--c-ink-soft); font-size: var(--fs-ui); }
  .lv-table--stack .is-current { box-shadow: inset 4px 0 0 var(--c-accent); }
  .lv-table--stack .is-current th { box-shadow: none; }
}

.lv-desc .grid { display: grid; grid-template-columns: 7fr 5fr; gap: 80px; }
.lv-desc h2 { font-size: 38px; margin-bottom: var(--s3); }
.lv-desc h3 { margin: var(--s4) 0 var(--s1); }
.lv-desc .text p { max-width: var(--measure); }
.lv-desc .after { margin-top: var(--s6); }
@media (max-width: 900px) { .lv-desc .grid { grid-template-columns: 1fr; gap: 56px; } .lv-desc h2 { font-size: 30px; } }

.lv-related { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.lv-related .stage { height: 220px; background: var(--c-stage); display: flex; align-items: center; justify-content: center; padding: 20px; border-bottom: 1px solid var(--c-hairline); }
.lv-related .stage img { max-height: 100%; width: auto; }
.lv-related .maker { font-size: var(--fs-ui); color: var(--c-ink-soft); margin: 0; }
.lv-related .foot .pr { font-size: 22px; color: var(--c-head); }
@media (max-width: 1100px) { .lv-related { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .lv-related { grid-template-columns: 1fr; } }

/* =================== Article =================== */
.lv-arthead { background: var(--c-stone); padding: 24px 0 72px; }
.lv-arthead .inner { max-width: 880px; }
.lv-arthead h1 { margin-top: 20px; }
.lv-arthead .lead { margin-top: 24px; max-width: 36em; }
.lv-art { padding: 72px 0 var(--section-y); }
.lv-art .grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 96px; align-items: start; }
.lv-prose { max-width: 34em; }
.lv-prose .lv-links li { margin: 0; }
.lv-prose .lv-links a { display: inline-flex; align-items: center; min-height: 48px; }
.lv-prose h2 { font-size: 36px; margin: 64px 0 18px; scroll-margin-top: 24px; }
.lv-prose h3 { margin: 32px 0 10px; }
.lv-prose p, .lv-prose li { line-height: 1.65; }
.lv-prose ul { padding-left: 28px; margin-bottom: var(--s2); }
.lv-prose li { margin-bottom: 10px; }
.lv-prose li ul { margin-top: 10px; }
.lv-toc { border-top: 1px solid var(--c-edge); border-bottom: 1px solid var(--c-edge); padding: 20px 0; }
.lv-toc .lbl { font-weight: 700; color: var(--c-head); margin: 0 0 4px; }
.lv-toc ol { list-style: decimal; padding-left: 32px; columns: 1; }
.lv-toc li { margin: 0; line-height: 1.4; }
.lv-toc a { display: inline-flex; align-items: center; min-height: 48px; }
.lv-act { margin: 40px 0; padding: 4px 0 4px 28px; border-left: 4px solid var(--c-amber); }
.lv-act .lv-more { font-size: 20px; }
.lv-figure { margin: 40px 0 8px; }
.lv-figure .lv-media { aspect-ratio: 3 / 2; }
.lv-posts { list-style: none !important; padding: 0 !important; display: grid; gap: 0; border-top: 1px solid var(--c-edge); }
.lv-posts li { border-bottom: 1px solid var(--c-edge); padding: 22px 0; margin: 0; }
.lv-posts h3 { margin: 0 0 8px; }
.lv-posts h3 a { color: var(--c-head); }
.lv-rail { display: grid; gap: 24px; }
@media (min-height: 950px) and (min-width: 1101px) { .lv-rail { position: sticky; top: 24px; } }
.lv-rail section { border: 1px solid var(--c-hairline); border-radius: var(--radius-card); padding: 28px; background: var(--c-paper); }
.lv-rail h2 { font: 700 20px/1.3 var(--font-body); margin-bottom: 8px; }
.lv-rail ul { list-style: none; }
.lv-rail li a { display: flex; justify-content: space-between; gap: 12px; align-items: center; min-height: 52px; border-bottom: 1px solid var(--c-hairline); font-size: 19px; }
.lv-rail li:last-child a { border-bottom: 0; }
.lv-rail .tel { font: 700 26px/1.2 var(--font-body); display: inline-flex; min-height: 48px; align-items: center; }
.lv-rail .rail-call { background: var(--c-stone); border-color: var(--c-stone); }
@media (max-width: 1100px) { .lv-art .grid { grid-template-columns: 1fr; gap: 64px; } .lv-rail { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) { .lv-rail { grid-template-columns: 1fr; } .lv-prose h2 { font-size: 30px; margin-top: 52px; } }

/* ========== design/templates/SHARED-COMPONENTS.md ========== */

/* lv-hero--page: the home hero on an inner page */
.lv-hero--page .grid { min-height: 560px; }
.lv-hero--page .copy { padding-top: 40px; padding-bottom: 72px; }
.lv-hero--page .lv-crumbs { margin-bottom: 24px; }
.lv-hero--page h1, .lv-hero--page .lv-h1, .lv-hero--page .q { font-size: var(--fs-h1); line-height: var(--lh-h1); max-width: 14ch; }
.lv-hero--page .lead { margin-top: var(--s3); max-width: 30em; }
.lv-hero--page .lv-actions { flex-wrap: wrap; }
.lv-hero--page .lv-media { min-height: 400px; }
@media (max-width: 900px) {
  .lv-hero--page .copy { padding: 24px var(--gutter) 36px; }
  .lv-hero--page .lv-media { min-height: 0; }
}

/* lv-faq: questions and answers, all open */
.lv-faq__list { border-top: 1px solid var(--c-edge); }
.lv-faq .item { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px 64px; padding: 32px 0; border-bottom: 1px solid var(--c-edge); }
.lv-faq .item h3 { max-width: 20em; }
.lv-faq .item .a { max-width: var(--measure); }
@media (max-width: 900px) { .lv-faq .item { grid-template-columns: 1fr; padding: 24px 0; } }

/* lv-consult--form: the consult band holding a form (fields: see the 56px field block) */
.lv-consult--form .grid { align-items: start; }
.lv-form { background: var(--c-paper); border: 1px solid var(--c-hairline); border-radius: var(--radius-card); padding: 40px; display: grid; gap: 20px; }
.lv-form .lv-btn { margin-top: 4px; }
.lv-form .consent { margin: 0; font-size: var(--fs-ui); color: var(--c-ink-soft); }
@media (forced-colors: active) { .lv-form { border-color: CanvasText; } }
@media (max-width: 900px) { .lv-form { padding: 24px; } }

/* lv-shopline: the store line under the consult band's buttons */
.lv-shopline { margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--c-hairline); }
.lv-shopline p { margin: 0 0 4px; font: 700 21px/1.35 var(--font-body); color: var(--c-head); }

/* lv-moreline: one quieter link under the consult band's buttons, in the lv-shopline slot */
.lv-moreline { margin: 8px 0 0; }

/* Field: 56px, the header search's field, for every input and select */
.lv-form input, .lv-select select { width: 100%; min-height: 56px; margin: 0; padding: 0 18px; font: 400 19px/1.3 var(--font-body); color: var(--c-ink);
  background: var(--c-paper); border: 1.5px solid var(--c-control); border-radius: var(--radius-ctl); }
.lv-form input:hover, .lv-select select:hover { border-color: var(--c-accent); }
.lv-select { position: relative; }
.lv-select select { -webkit-appearance: none; appearance: none; padding-right: 56px; cursor: pointer; }
.lv-select::after { content: ""; position: absolute; right: 24px; top: 50%; width: 11px; height: 11px; pointer-events: none;
  border-right: 3px solid var(--c-head); border-bottom: 3px solid var(--c-head); transform: translateY(-70%) rotate(45deg); }
@media (forced-colors: active) { .lv-select::after { border-color: CanvasText; } }

/* lv-arthead--split: the stone page head with a tool on the right */
.lv-arthead--split .grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px 64px; align-items: end; }
@media (max-width: 1100px) { .lv-arthead--split .grid { grid-template-columns: 1fr; } }
@media (max-width: 767px) { .lv-arthead--split { padding-bottom: 56px; } }

/* lv-topics on a page and in a rail */
.lv-head + .lv-topics { margin-top: 0; }
.lv-topics--rail { margin-top: 0; }
.lv-topics--rail ul { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
.lv-topics--rail li a { padding: 8px 0; line-height: 1.35; }
.lv-topics--rail .n { font-weight: 600; white-space: nowrap; }
.lv-topics--rail a[aria-current] { margin: 0 -16px; padding: 8px 16px 8px 12px; border-left: 4px solid var(--c-accent); background: var(--c-sky); color: var(--c-head); font-weight: 700; }
.lv-topics--rail a[aria-current] span:first-child { text-decoration: none; }
.lv-topics--rail a[aria-current] .n { color: var(--c-head); }
@media (forced-colors: active) { .lv-topics--rail a[aria-current] { border-left-color: Highlight; } }

/* lv-reviews: a long lead quote drops to the quote size */
.lv-reviews .lv-quote--long p { font-size: var(--fs-quote); }
@media (max-width: 900px) { .lv-reviews .lv-quote--long p { font-size: 24px; } }

/* lv-specs--stack: the spec rows one per line at every width; label small and first, the value bold under it */
.lv-specs--stack { grid-template-columns: 1fr; margin-top: var(--s5); max-width: 30em; }
.lv-specs--stack li { border-left: 0; border-top: 1px solid var(--c-hairline); padding: 18px 0; gap: 2px; }
.lv-specs--stack li:first-child { border-top: 0; }
.lv-specs--stack .v { font-size: var(--fs-ui); font-weight: 600; color: var(--c-ink-soft); }
.lv-specs--stack .k { font: 700 24px/1.35 var(--font-body); color: var(--c-head); font-style: normal; overflow-wrap: anywhere; }
.lv-specs--stack a.k { color: var(--c-link); display: inline-flex; align-items: center; min-height: 48px; width: fit-content; }

/* lv-posts: the optional date line */
.lv-posts .meta { margin: 0 0 4px; }

/* lv-meta: the topic link and the date, each on its own line, above a post title */
.lv-meta { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 48px; margin: 0; font-size: var(--fs-ui); color: var(--c-ink-soft); line-height: 1.4; }
.lv-meta a { position: relative; z-index: 3; display: inline-block; padding: 12px 0; font-weight: 600; }
.lv-meta a .pre { display: inline-block; font-weight: 400; color: var(--c-ink-soft); }
/* lv-postlist and lv-post: listing rows, not cards, so a post with no image never leaves a hole */
.lv-postlist { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; border-top: 1px solid var(--c-edge); }
.lv-postlist--one { grid-template-columns: minmax(0, 1fr); }
.lv-post { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; padding: 12px 0 28px; border-bottom: 1px solid var(--c-edge); }
.lv-post .txt { min-width: 0; }
.lv-post h3 { margin: 2px 0 8px; line-height: 1.5; }
.lv-post h3 a { display: flex; align-items: center; min-height: 48px; color: var(--c-head); text-decoration: none; }
.lv-post h3 a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.lv-post .ex { margin: 0; max-width: 34em; }
.lv-post .go { align-self: center; font-size: 26px; color: var(--c-link); transition: transform var(--ease); }
.lv-post:hover h3 a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.lv-post:hover .go { transform: translateX(4px); }
.lv-post .lv-media { width: 240px; aspect-ratio: 3 / 2; margin-top: 14px; align-self: start; }
.lv-post h3 a:focus-visible { outline: none; box-shadow: 0 4px 0 0 var(--c-focus-ink); }
.lv-post:has(h3 a:focus-visible) { outline: 3px solid var(--c-focus-ink); outline-offset: 4px; box-shadow: 0 0 0 10px var(--c-focus-halo); border-radius: 4px; }
@media (forced-colors: active) { .lv-post h3 a:focus-visible { outline: 3px solid Highlight; outline-offset: 2px; } .lv-post:has(h3 a:focus-visible) { outline-color: Highlight; } }
@media (max-width: 900px) { .lv-postlist { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .lv-post { grid-template-columns: 1fr; }
  .lv-post .go { display: none; }
  .lv-post .lv-media { width: 100%; order: -1; margin: 16px 0 4px; }
}

/* lv-deals: the store's offers on the navy band, one buy box per offered product */
.lv-deals .lv-head h2 { color: #FFFFFF; }
.lv-deals .lv-head p { color: var(--c-on-dark-2); }
.lv-deals .lv-head .lv-more { color: #FFFFFF; }
.lv-deals .list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.lv-deals .lv-buybox { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 28px; align-items: center; }
.lv-deals .stage { background: var(--c-stage); border-radius: var(--radius-ctl); aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; padding: 16px; }
.lv-deals .stage img { max-height: 100%; width: auto; object-fit: contain; }
.lv-deals .stage .lv-media { width: 100%; height: 100%; border-radius: 6px; }
.lv-deals .stage .lv-slot .slot { padding: 10px; }
.lv-deals .stage .lv-slot .slot span { color: var(--c-ink); font-size: 18px; line-height: 1.3; }
.lv-deals .when { margin: 0 0 4px; font: 600 var(--fs-ui)/1.4 var(--font-body); color: var(--c-on-dark-2); }
.lv-deals .get { margin: 0 0 16px; font: 700 32px/1.2 var(--font-body); color: var(--c-amber); }
.lv-deals .sub { margin: 0 0 10px; font-size: var(--fs-ui); line-height: 1.5; color: var(--c-on-dark-2); }
.lv-deals .lv-buybox .pr { font-size: 24px; color: #FFFFFF; margin-bottom: 8px; }
.lv-deals .price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px; margin: 0 0 8px; }
.lv-deals .price .pr { display: inline; margin: 0; }
.lv-deals .was { font-size: var(--fs-ui); color: var(--c-on-dark-2); }
@media (forced-colors: active) { .lv-deals .stage { forced-color-adjust: none; background: #FFFFFF; } }
@media (max-width: 1100px) { .lv-deals .list { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .lv-deals .lv-buybox { grid-template-columns: 1fr; } .lv-deals .stage { max-width: 200px; } .lv-deals .get { font-size: 28px; } }

/* lv-related states: the "Sale" pill and the struck price, and a photo slot on the stage */
.lv-related .stage { position: relative; }
.lv-related .stage .lv-media { position: absolute; inset: 0; border-radius: 0; }
.lv-related .stage .lv-media .slot { padding: 16px 18px; }
.lv-related .flag { position: absolute; top: 14px; left: 14px; z-index: 1; background: var(--c-badge); color: var(--c-on-badge);
  border-radius: var(--radius-pill); padding: 4px 14px; font: 700 18px/1.3 var(--font-body); }
@media (forced-colors: active) { .lv-related .flag { border: 2px solid CanvasText; } }
.lv-related .foot del { margin-right: 8px; font-size: var(--fs-ui); font-weight: 500; color: var(--c-ink-soft); }

/* lv-pager: "Page 1 of 127", large numbered targets, the current page solid and not a link */
.lv-pager { margin-top: 56px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "where where where" "prev nums next"; align-items: center; gap: 16px 24px; }
.lv-pager .where { grid-area: where; margin: 0; font: 700 21px/1.3 var(--font-body); color: var(--c-head); }
.lv-pager .prev { grid-area: prev; }
.lv-pager .next { grid-area: next; }
.lv-pager ul { grid-area: nums; list-style: none; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px; }
.lv-pager .num { display: inline-flex; align-items: center; justify-content: center; min-width: 56px; min-height: 56px; padding: 0 14px;
  border: 1px solid var(--c-edge); border-radius: var(--radius-ctl); background: var(--c-paper); color: var(--c-link);
  font: 700 20px/1 var(--font-body); font-variant-numeric: tabular-nums; text-decoration: none; }
.lv-pager a.num:hover { border-color: var(--c-accent); box-shadow: inset 0 0 0 1px var(--c-accent); text-decoration: underline; text-underline-offset: 4px; }
.lv-pager .num[aria-current] { background: var(--c-solid); border: 2px solid var(--c-solid); color: var(--c-on-solid); }
.lv-pager .gap { display: inline-flex; align-items: center; min-height: 56px; padding: 0 4px; font-weight: 700; color: var(--c-ink); }
@media (forced-colors: active) { .lv-pager .num[aria-current] { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; } }
@media (max-width: 767px) {
  .lv-pager { grid-template-columns: 1fr; grid-template-areas: "where" "next" "prev" "nums"; }
  .lv-pager .lv-btn { width: 100%; }
  .lv-pager ul { justify-content: flex-start; }
}

/* lv-doc: a doctor row. Name (links to the state page), area if any, then the phone as a tap-to-call link. No photos */
.lv-doc { padding: 10px 0 12px; border-bottom: 1px solid var(--c-hairline); }
.lv-doc:last-child { border-bottom: 0; padding-bottom: 0; }
.lv-doc .who { margin: 0; }
.lv-doc .dn { display: inline-flex; align-items: center; min-height: 48px; font: 600 21px/1.3 var(--font-body); color: var(--c-head); }
.lv-doc .area { display: block; margin: -2px 0 2px; font-size: var(--fs-ui); color: var(--c-ink-soft); }
.lv-doc .tel { display: flex; align-items: center; width: fit-content; min-height: 48px; font-size: 20px; }
.lv-doc .tel .num { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 767px) {
  /* On phones the number becomes a full-width button: the target is the whole row width, 56px tall */
  .lv-doc .tel { width: auto; justify-content: center; min-height: 56px; margin-top: 4px; border: 2px solid var(--c-accent);
    border-radius: var(--radius-ctl); text-decoration: none; color: var(--c-accent); }
  .lv-doc .tel:hover { background: var(--c-paper); }
}

/* lv-byline: author link, date and count under the H1, split by 1px rules */
.lv-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; margin: 16px 0 0; font-size: var(--fs-ui); color: var(--c-ink-soft); }
.lv-byline a { display: inline-flex; align-items: center; min-height: 48px; font-weight: 600; }
.lv-byline > span + span { border-left: 1px solid var(--c-edge); padding-left: 20px; }
@media (max-width: 767px) { .lv-byline > span + span { border-left: 0; padding-left: 0; } .lv-byline { flex-direction: column; align-items: flex-start; } }

/* Tiles: the finder's state map and the glossary's letter jump. Navy = has something, white = nothing there */
.lv-tilemap .cap, .lv-az .cap { margin: 0 0 12px; font-weight: 700; font-size: var(--fs-ui); color: var(--c-head); }
.lv-tilemap li, .lv-az li { aspect-ratio: 1 / 1; min-width: 0; }
.lv-tilemap a, .lv-tilemap .off, .lv-az a, .lv-az .off { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  border-radius: 6px; font: 700 18px/1 var(--font-body); text-decoration: none; }
.lv-tilemap a, .lv-az a { background: var(--c-solid); color: var(--c-on-solid); transition: background-color var(--ease); }
.lv-tilemap a:hover, .lv-az a:hover { background: var(--c-amber); color: var(--c-on-amber); }
.lv-tilemap .off, .lv-az .off { background: var(--c-paper); color: var(--c-ink-soft); border: 1px solid var(--c-hairline); }
@media (forced-colors: active) {
  .lv-tilemap a, .lv-az a { border: 2px solid LinkText; color: LinkText; }
  .lv-tilemap .off, .lv-az .off { border-color: GrayText; color: GrayText; }
}

/* Landed row: a group or term reached by its link is tinted sky 16px past each side, under a 2px accent rule */
.lv-dir .grp:target, .lv-term:target { background: var(--c-sky); box-shadow: -16px 0 0 var(--c-sky), 16px 0 0 var(--c-sky); }
.lv-dir .grp:target { border-top-color: var(--c-accent); }
.lv-term:target { box-shadow: -16px 0 0 var(--c-sky), 16px 0 0 var(--c-sky), 0 -2px 0 var(--c-accent); }
@media (forced-colors: active) { .lv-dir .grp:target, .lv-term:target { outline: 3px solid Highlight; outline-offset: 8px; } }

/* lv-art--archive: the topic archive's results column and rail. The rail is taller than a laptop window, so it scrolls with the page */
.lv-art--archive .lv-rail { position: static; }
.lv-art--archive .lv-head { margin-bottom: 24px; align-items: baseline; }
.lv-art--archive .lv-head .meta { margin: 0; }
@media (max-width: 1100px) { .lv-art--archive .lv-rail { grid-template-columns: 1fr 1fr; } .lv-art--archive .lv-rail .lv-topics--rail { grid-row: span 2; } }
@media (max-width: 767px) { .lv-art--archive .lv-rail { grid-template-columns: 1fr; } .lv-art--archive .lv-rail .lv-topics--rail { grid-row: auto; } }

/* lv-loop and lv-loopbar: the result count and sort, then the product cards, the pager and the store promises */
.lv-loop { padding-top: 48px; }
.lv-loopbar { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 32px; flex-wrap: wrap;
  padding-bottom: 24px; margin-bottom: 32px; border-bottom: 1px solid var(--c-hairline); }
.lv-loopbar .count { margin: 0; font: 700 21px/1.3 var(--font-body); color: var(--c-head); }
.lv-loopbar .row { display: flex; gap: 12px; }
.lv-loopbar .lv-select { width: 380px; }
.lv-loopbar .lv-btn { min-height: 56px; }
@media (max-width: 767px) {
  .lv-loopbar .sort { width: 100%; }
  .lv-loopbar .lv-select { width: auto; flex: 1; min-width: 0; }
}
@media (max-width: 480px) { .lv-loopbar .row { flex-direction: column; } .lv-loopbar .lv-btn { width: 100%; } }
.lv-loop .lv-assure { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--c-hairline); }

/* lv-cats--six: six category tiles, three on laptops and tablets, two on phones; a photo to come fills the stage */
.lv-cats--six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.lv-tile .stage .lv-media { width: 100%; height: 100%; border-radius: 6px; }
.lv-tile .stage .lv-slot .slot { padding: 12px; }
.lv-tile .stage .lv-slot .slot span { font-size: 18px; line-height: 1.3; }
@media (max-width: 1280px) { .lv-cats--six { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .lv-cats--six { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* lv-choice: 56px option boxes. The input is the box; a radio has a round mark, a checkbox a square mark with a tick */
.lv-choice { border: 0; margin: 0; padding: 0; min-width: 0; }
.lv-choice legend { padding: 0; margin-bottom: 10px; font: 600 var(--fs-ui)/1.4 var(--font-body); color: var(--c-head); }
.lv-choice .opts { display: flex; flex-wrap: wrap; gap: 12px; }
.lv-choice .opt { position: relative; display: inline-flex; align-items: center; gap: 12px; max-width: 100%; min-height: 56px; min-width: 120px;
  padding: 10px 22px 10px 18px; font: 600 19px/1.3 var(--font-body); color: var(--c-head); cursor: pointer; }
.lv-choice input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; appearance: none; -webkit-appearance: none; cursor: pointer;
  background: var(--c-paper); border: 1.5px solid var(--c-control); border-radius: var(--radius-ctl); transition: border-color var(--ease); }
.lv-choice input:hover { border-color: var(--c-accent); }
.lv-choice input:checked { border: 3px solid var(--c-accent); background: var(--c-sky); }
.lv-choice .mark, .lv-choice .t { position: relative; z-index: 1; pointer-events: none; }
.lv-choice .mark { flex: none; width: 24px; height: 24px; border: 2px solid var(--c-accent); border-radius: 50%; background: var(--c-paper); }
.lv-choice input:checked ~ .mark::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--c-accent); }
.lv-choice input[type="checkbox"] ~ .mark { border-radius: 6px; }
.lv-choice input[type="checkbox"]:checked ~ .mark { background: var(--c-accent); }
.lv-choice input[type="checkbox"]:checked ~ .mark::after { inset: auto; left: 6px; top: 1px; width: 7px; height: 13px; border-radius: 0; background: none;
  border-right: 3px solid #FFFFFF; border-bottom: 3px solid #FFFFFF; transform: rotate(45deg); }
@media (forced-colors: active) {
  .lv-choice input { border-color: ButtonText; }
  .lv-choice input:checked { border-color: Highlight; }
  .lv-choice .mark { forced-color-adjust: none; border-color: CanvasText; background: Canvas; }
  .lv-choice input:checked ~ .mark { border-color: Highlight; }
  .lv-choice input:checked ~ .mark::after { forced-color-adjust: none; background: Highlight; }
  .lv-choice input[type="checkbox"]:checked ~ .mark { background: Highlight; }
  .lv-choice input[type="checkbox"]:checked ~ .mark::after { background: none; border-color: HighlightText; }
}