/* Aid and device template (module aid-device): design/templates/aid-device/aid-device.css without its shared tail (the
   shared components are in the global stylesheet). Template-only rules, scoped to lv-aid-*, the new lv-play, and the
   variants sheet's head and labels (fixture only). */
/* ---------- Placeholder slot label: slot ID, ratio, one line. Shown until the photo exists ---------- */
.lv-slot .slot span { max-width: 34em; }
.lv-slot .slot b { font-weight: 700; }

/* ---------- What it is: the aid at a glance (theme lv-specs), then the split, which starts at the top ---------- */
.lv-aid-about .lv-specs { margin-bottom: var(--s7); }
@media (max-width: 767px) { .lv-aid-about .lv-specs { margin-bottom: var(--s6); } }
.lv-aid-about .grid { align-items: start; }
.lv-aid-about h2 { margin-bottom: var(--s3); }
.lv-aid-about .grid p { max-width: var(--measure); }
/* An inline link in the live prose: a 48px hit area without moving the line */
.lv-aid-about .grid p a, .lv-sheet-label a { display: inline-block; padding: 12px 0; margin: -12px 0; }

/* ---------- How it works: the evidence column keeps the tick list ---------- */
.lv-aid-how .lv-ticks { margin-top: var(--s3); }
.lv-aid-how .lead { margin-bottom: var(--s2); }

/* ---------- Users: the reviews band (shared use of lv-reviews), with the live videos as two cards that open YouTube ---------- */
.lv-videos { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: var(--s6); }
.lv-vposter { position: relative; }
.lv-vposter .lv-media { aspect-ratio: 16 / 9; border-radius: 0; }
.lv-vposter .slot { align-items: flex-start; }
/* New: lv-play. The play mark on a video poster: white disc, navy triangle, drawn in CSS so it survives High Contrast */
.lv-play { position: absolute; left: calc(50% - 36px); top: calc(50% - 36px); z-index: 1; width: 72px; height: 72px; border-radius: 50%; background: #FFFFFF; border: 2px solid var(--c-head); }
.lv-play::after { content: ""; position: absolute; left: 28px; top: 21px; border-style: solid; border-width: 13px 0 13px 22px; border-color: transparent transparent transparent var(--c-head); }
@media (forced-colors: active) { .lv-play { border-color: CanvasText; background: Canvas; } .lv-play::after { border-left-color: CanvasText; } }
@media (max-width: 767px) { .lv-videos { grid-template-columns: 1fr; gap: 24px; } .lv-play { width: 60px; height: 60px; left: calc(50% - 30px); top: calc(50% - 30px); } .lv-play::after { left: 23px; top: 17px; border-width: 11px 0 11px 18px; } }

/* ---------- Conditions: index rows, then the conditions with no page of their own as one line.
   Three rows or fewer sit in one column (no empty cell), held to a readable width ---------- */
.lv-aid-conditions .lv-index:not(:has(> li:nth-child(4))) { grid-template-columns: minmax(0, 1fr); max-width: 46rem; }
.lv-aid-also { margin-top: var(--s4); max-width: var(--measure); }

/* ---------- Specs: the photo column is a portrait slot beside the text ---------- */
.lv-aid-specs .lv-media { aspect-ratio: 4 / 5; }
.lv-aid-specs .text h3:first-of-type { margin-top: var(--s3); }
@media (max-width: 900px) { .lv-aid-specs .lv-media { aspect-ratio: 3 / 2; } }

/* ---------- Variants sheet only ---------- */
.lv-sheet-head { background: var(--c-off); border-bottom: 1px solid var(--c-hairline); padding: 48px 0; }
.lv-sheet-head h1 { font-size: var(--fs-h2); }
/* The fixture's sheet title: the design sheet's H1 as a paragraph, so the page H1 is the hero's (the live keyword) */
.lv-sheet-head .lv-sheet-title { margin: 0; max-width: none; color: var(--c-head); letter-spacing: var(--track);
  font-family: var(--font-display); font-weight: 500; font-variation-settings: var(--display-opsz); font-size: var(--fs-h2); line-height: var(--lh-h1); }
.lv-sheet-head p { margin-top: var(--s2); max-width: var(--measure); }
.lv-sheet-label { background: var(--c-head); color: #FFFFFF; padding: 20px 0; }
.lv-sheet-label p { margin: 0; font: 700 21px/1.5 var(--font-body); max-width: 36em; }
.lv-sheet-label a { color: #FFFFFF; }
.lv-sheet-label :focus-visible { outline-color: #FFFFFF; }


/* ---------- Latest Posts: a story title that fits on one line still gives a 48px target, without moving the line ---------- */
.lv-learn h3 a { display: inline-block; padding: 11px 0; margin: -11px 0; }

/* ---------- Block wrappers: the patterns keep their text in paragraph blocks (editable in place), so a paragraph that
   holds a button or a link, and the paragraphs of a fact, quote or caption, take no space or type of their own ---------- */
.lv-actions > p { margin: 0; display: flex; }
@media (max-width: 900px) { .lv-hero .lv-actions > p:has(> .lv-btn) { width: 100%; } }
.lv-offer p.ad-call { display: flex; font: inherit; }
.lv-head p.ad-more, .lv-shopline p.ad-more { display: flex; margin: 0; font: inherit; color: inherit; }
.lv-specs p { margin: 0; }
.lv-reviews .lv-quote figcaption p, .lv-patient figcaption p { font: inherit; color: inherit; margin: 0; }