/** Shopify CDN: Minification failed

Line 396:19 Unexpected "("
Line 399:111 Unterminated string token

**/
/* Zivol Lathe — tokens and type roles. Every number is derived from STUDY-2026-09-13.md §A1 (Apple's measured
   scale) and PLAN-LATHE-2026-09-13.md §1. Fraunces for statements/headings/name, Archivo for everything else.
   Contrast on ground #F4EAE2: ink 14.38:1, ink-2 8.31:1 (computed, relative luminance; brass 2.43:1 is never text).
   Type ladder after the r3 typography audit: statement 40→84, secondary heading 32→64 (0.76×; Apple's own secondary step is 0.80×), name 28→34, intro 18→26, eyebrow 14 flat (Apple's never grows), one body signature 16/500/1.5 whose <b> lead at 600 is the only step. */
:root {
  /* the ground is defined once and the CHROME reads it too: the announcement bar and the header row inherit the body's
     background (the header element itself is transparent), so on the store's #EFE8DC they read as a different site
     stitched above the page. This stylesheet loads on the Lathe template only, so nothing else in the store moves. */
  --zl-ground: #F4EAE2;
}
body { background: var(--zl-ground); }
.shopify-section:not(.header-section) .section-background[class*="announcement"] { background-color: var(--zl-ground); }
.header__underlay { background-image: none; background-color: var(--zl-ground); }  /* the header row is painted by an underlay gradient in the theme's own cream — every element in the header itself is transparent, so this is the only place it can be changed */  /* the bar paints its own layer under the header; the theme's own rule for it is (0,3,0) — `.shopify-section:not(.header-section) .section-background` — so this must carry the same ancestors plus the attribute. The footer's dark sections are untouched. */
.zl, .zl-sticky {
  --zl-ground: #F4EAE2;  /* the photographs' own seamless (sampled #F1E8DF–#F3E2DB); council 2026-09-13, 3–0, page-only; the store's cream stays #F3EEE4/#EFE8DC elsewhere */ --zl-ground-2: #EDE6D8; --zl-ink: #241A13; --zl-ink-2: #4A423A;
  --zl-line: rgba(36, 26, 19, .14); --zl-line-2: rgba(36, 26, 19, .28); --zl-brass: #B8925A;
  --zl-display: Fraunces, Georgia, "Times New Roman", serif;
  --zl-ui: Archivo, "Helvetica Neue", Arial, sans-serif;
  /* phone → desktop, fluid between 390 and 1440 */
  --zl-t-statement: clamp(2.5rem, 1.4786rem + 4.1905vw, 5.25rem);  /* 40 → 84, exact intercepts for 390 → 1440 */
  --zl-t-section:   clamp(2rem, 1.2114rem + 3.2381vw, 4rem);        /* 32 → 64: the secondary heading (Questions., What people say.) */
  --zl-t-name:      clamp(1.75rem, 1.6107rem + .5714vw, 2.125rem);  /* 28 → 34 */
  --zl-t-label:     .875rem;                                        /* 14 at every width */
  --zl-t-intro:     clamp(1.125rem, .9393rem + .7619vw, 1.625rem);  /* 18 → 26 */
  --zl-lh-statement: 1.10; --zl-lh-section: 1.10;
  --zl-section: clamp(4rem, 2.886rem + 4.571vw, 7rem);          /* 64 → 112: two stacked paddings read as a void at 96/160 (three cold walkers, 2026-09-14) */
  --zl-pill: 9999px; --zl-ease: cubic-bezier(.4, 0, .6, 1); --zl-reveal: .24s;
  font-family: var(--zl-ui); color: var(--zl-ink); background: var(--zl-ground);
  -webkit-font-smoothing: antialiased; text-align: left;
}
@media (min-width: 990px) {
  .zl, .zl-sticky { --zl-lh-statement: 1.04; --zl-lh-section: 1.07; }
}
/* type roles — the selector carries #MainContent where the theme's own h1/h2 rules would otherwise win */
#MainContent .zl .zl-statement, .zl .zl-statement { font-family: var(--zl-display); font-weight: 500; font-size: var(--zl-t-statement); line-height: var(--zl-lh-statement); letter-spacing: -.005em; max-width: 17ch; text-wrap: balance; margin: 0; font-variation-settings: "WONK" 0; font-optical-sizing: auto; }
@media (min-width: 990px) { #MainContent .zl .zl-statement, .zl .zl-statement { letter-spacing: -.008em; } }
#MainContent .zl .zl-section-h, .zl .zl-section-h { font-family: var(--zl-display); font-weight: 500; font-size: var(--zl-t-section); line-height: var(--zl-lh-section); letter-spacing: -.005em; margin: 0; text-wrap: balance; font-variation-settings: "WONK" 0; font-optical-sizing: auto; }
#MainContent .zl h1.zl-name, .zl .zl-name { scroll-margin-top: 16px; /* a Choose on a phone lands here */ font-family: var(--zl-display); font-weight: 500; font-size: var(--zl-t-name); line-height: 1.1; letter-spacing: 0; margin: 0; font-variation-settings: "WONK" 0; font-optical-sizing: auto; }
.zl .zl-label { font-family: var(--zl-ui); font-weight: 600; font-size: var(--zl-t-label); line-height: 1.2; letter-spacing: 0; margin: 0 0 38px; color: var(--zl-ink); }
.zl .zl-intro { font-family: var(--zl-ui); font-weight: 500; font-size: var(--zl-t-intro); line-height: 1.33; color: var(--zl-ink-2); max-width: 37ch; margin: 0; text-wrap: pretty; }
@media (min-width: 990px) { .zl .zl-intro { line-height: 1.23; max-width: 40ch; } }  /* 42ch orphaned the last word of the chapter-1 intro at 1440 */
.zl .zl-intro b { font-weight: 600; color: var(--zl-ink); }
.zl .zl-feature, .zl .zl-quote__text { font-family: var(--zl-ui); font-weight: 500; font-size: 1rem; line-height: 1.5; color: var(--zl-ink-2); max-width: 40ch; margin: 0; text-wrap: pretty; }  /* == .zl-body: one body signature; the <b> lead at 600 is the step */
.zl .zl-feature b { font-weight: 600; color: var(--zl-ink); }
.zl .zl-body { font-weight: 500; font-size: 1rem; line-height: 1.5; color: var(--zl-ink-2); margin: 0; max-width: 46ch; text-wrap: pretty; }
.zl .zl-body, .zl .zl-feature, .zl .zl-quote__text, .zl .zl-intro, .zl .zl-desc, .zl .zl-faq__q { letter-spacing: -.01em; }  /* slight optical tracking on the 16–18 px prose only (Apple: −.022em at 17); small text stays untracked */
.zl .zl-desc { font-weight: 500; font-size: 1.125rem; line-height: 1.4; color: var(--zl-ink-2); margin: 0; text-wrap: balance; }
.zl .zl-price { font-weight: 600; font-size: 1.5rem; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--zl-ink); }
.zl .zl-small { font-weight: 500; font-size: .75rem; line-height: 1.33; color: var(--zl-ink-2); }
.zl .zl-btn { transition: background-color .2s var(--zl-ease), color .2s var(--zl-ease); font-family: var(--zl-ui); font-weight: 600; font-size: 1.0625rem; line-height: 1; height: 64px; padding: 0 28px; border-radius: var(--zl-pill); background: var(--zl-ink); color: var(--zl-ground); border: 0; display: inline-flex; align-items: center; justify-content: center; gap: .5em; width: 100%; cursor: pointer; }
.zl .zl-btn:focus-visible, .zl-sticky button:focus-visible { outline: 2px solid var(--zl-ink); outline-offset: 3px; }
.zl .zl-btn--ghost { background: transparent; color: var(--zl-ink); border: 1.5px solid var(--zl-ink); }
/* rhythm */
.zl .zl-wrap { width: min(100% - 32px, 1200px); margin-inline: auto; }
.zl.zl-chapter, .zl .zl-chapter { padding-block: var(--zl-section); }  /* the section carries .zl itself, so the compound selector is the one that matches */
.zl.zl-chapter--alt, .zl .zl-chapter--alt { background: var(--zl-ground); }  /* one ground, chosen: the frames' own cream (#F1E8DF at their edges) is a hair from it; the deeper cream is kept for inset surfaces only */
/* reveal: 0.24s, once, per node; never on the stage, the comparison, or anything in the buy box */
.zl-js .zl .zl-reveal { opacity: 0; transform: translateY(8px); transition: opacity var(--zl-reveal) var(--zl-ease), transform var(--zl-reveal) var(--zl-ease); }
.zl-js .zl .zl-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .zl-js .zl .zl-reveal { opacity: 1; transform: none; transition: none; } }
/* step-1 marker: the served page proves the template resolved */
.zl[data-zl-marker] { --zl-marker: 1; }

/* ── fold one ─────────────────────────────────────────────────────────────── */
.zl-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.zl-buy { background: var(--zl-ground); padding: 0 0 2rem; }
.zl .zl-buy__wrap { width: 100%; margin: 0 auto; }  /* .zl .zl-wrap is (0,2,0); the fold's own width needs the same weight or the gallery is never full-bleed on the phone */
@media (min-width: 990px) { .zl .zl-buy__wrap { width: min(100% - 80px, 1280px); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(22rem, .85fr); gap: 3.5rem; padding-top: 2rem; align-items: start; } }
.zl-buy__gallery { min-width: 0; }
@media (min-width: 990px) { .zl-buy__gallery { position: sticky; top: 4.5rem; } }
/* the gallery is the theme's _product-media-gallery block (see the section); these rules only quiet the chrome it draws */
.zl-buy__gallery { position: relative; }
.zl-buy__gallery [class*='counter'] .slash { color: inherit !important; }  /* the theme's separator is rgba(255,255,255,.4): 1.15:1 over the photograph's cream */
.zl-buy__gallery [class*='slideshow-counter'], .zl-buy__gallery [class*='counter'] { line-height: 1.33 !important; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: var(--zl-ink-2) !important; font-family: var(--zl-ui) !important; font-size: .75rem !important; font-weight: 500 !important; letter-spacing: normal !important; padding: 12px 0 0 !important; backdrop-filter: none !important; }
.zl .zl-tier-note { margin: .625rem 0 0; color: var(--zl-ink-2); }
.zl-buy__col { padding: 1.25rem 16px 0; }
@media (min-width: 990px) { .zl-buy__col { padding: 0; } }
.zl-buy .zl-desc { margin-top: .5rem; }
.zl-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem .75rem; margin: 1rem 0 0; }
.zl-price__for { flex-basis: 100%; color: var(--zl-ink-2); }
.zl-price__now { font-size: 1.5rem; font-weight: 600; line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.zl-price__was { font-size: .9375rem; font-weight: 500; color: var(--zl-ink-2); text-decoration: line-through; }  /* 15, the controls' size, so it no longer collides with the 18 px descriptor */
.zl-field { border: 0; margin: 1.5rem 0 0; padding: 0; min-width: 0; }
.zl-legend { font-size: .9375rem; font-weight: 600; line-height: 1.3; color: var(--zl-ink); padding: 0; margin: 0 0 .625rem; }  /* 15, the pill name's size: six sizes in fold one */
.zl-legend__val { font-weight: 500; color: var(--zl-ink-2); }
.zl-radio { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; transition: none; }
.zl-pills { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.zl-pill { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .125rem; min-height: 64px; padding: .5rem .5rem; border: 1px solid var(--zl-line-2); border-radius: 1rem; background: transparent; cursor: pointer; text-align: center; transition: border-color var(--zl-reveal) var(--zl-ease); }
.zl-pill__name { font-size: .9375rem; font-weight: 600; line-height: 1.2; color: var(--zl-ink); }
.zl-pill__sub { font-size: .75rem; font-weight: 500; line-height: 1.2; color: var(--zl-ink-2); }
.zl-pill__price { font-size: .75rem; font-weight: 500; line-height: 1.2; color: var(--zl-ink-2); font-variant-numeric: tabular-nums; }
.zl-radio:checked + .zl-pill { border: 2px solid var(--zl-ink); padding: calc(.5rem - 1px) calc(.5rem - 1px); }
.zl-radio:focus-visible + .zl-pill, .zl-radio:focus-visible + .zl-swatch .zl-swatch__ring { outline: 2px solid var(--zl-ink); outline-offset: 2px; }
.zl-swatches { display: flex; flex-wrap: wrap; gap: .75rem 1rem; justify-content: center; }
.zl .zl-holders-wrap { display: grid; grid-template-rows: 0fr; visibility: hidden; overflow: hidden; transition: grid-template-rows .22s var(--zl-ease), visibility 0s linear .22s; }
.zl .zl-holders-wrap.is-open { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .22s var(--zl-ease), visibility 0s linear 0s; }
.zl .zl-holders-wrap > * { min-height: 0; }  /* a grid row only collapses if its child may */
@media (prefers-reduced-motion: reduce) { .zl .zl-holders-wrap { transition: none; } }
.zl .zl-holders { margin-top: 1.25rem; }
.zl .zl-holders .zl-help { margin-top: .625rem; }
.zl-swatch { display: flex; flex-direction: column; align-items: center; gap: .375rem; width: calc((100% - 2rem) / 3); max-width: 7.5rem; cursor: pointer; }  /* three to a row, filling the column: the circle is then as large as the row allows instead of a fixed 88px. Capped at 120 so the desktop column does not make saucers of them. */
/* FOUR OPTIONS MUST STAY ON ONE LINE. The option row is 358px inside the 390px phone column and the
   swatches are a wrapping flex row with a 1rem column gap, so the pitch is width+16. At the default
   5.5rem/88px pitch 104 only three fit (3*104-16 = 296 <= 358, four would need 400), and a fourth
   wraps alone onto a second line: measured, the Pair row went 134px -> 251px with "Two Lifts" orphaned
   under the other three. At 4.75rem/76px the arithmetic is 4*76 + 3*16 = 352 <= 358, so four fit on one
   line and the row keeps the height of every other row. The ring stays 64px; only the label box narrows.
   The invariant, not the number: this rule must keep `options * (swatchWidth + 16) - 16 <= rowWidth`. */
@media (max-width: 989px) { .zl .zl-optrow[data-n="4"] .zl-swatch { width: calc((100% - 1.5rem) / 4); } .zl .zl-optrow[data-n="4"] .zl-swatches { column-gap: .5rem; } }
@media (min-width: 990px) { .zl .zl-optrow[data-n="4"] .zl-swatch { width: calc((100% - 3rem) / 4); } }  /* the 120px cap x4 plus three 16px gutters is 528 in a 520px column, so the Pair tier wrapped 3+1. This keeps four across at 118. */  /* phone only: the desktop column is 520px, where 4*88 + 3*16 = 400 already fits and the bigger target is better */
.zl-swatch__ring { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 50%; padding: 3px; border: 1px solid var(--zl-line-2); transition: border-color var(--zl-reveal) var(--zl-ease); }
.zl-swatch__ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.zl-radio:checked + .zl-swatch .zl-swatch__ring { border: 2px solid var(--zl-ink); padding: 2px; }
.zl-swatch__name { font-size: .75rem; font-weight: 600; line-height: 1.2; color: var(--zl-ink); text-align: center; min-height: 2.4em; }  /* 2 lines at 12/1.2. Measured label heights were [29,29,14]: 'Three Lifts' is one line, so its price hung 15px high. */
.zl-swatch__price { font-size: .75rem; font-weight: 500; line-height: 1.2; color: var(--zl-ink-2); font-variant-numeric: tabular-nums; text-align: center; }
.zl-help { margin: .75rem 0 0; max-width: 46ch; color: var(--zl-ink-2); min-height: 1rem; }  /* the holders help ran 95 characters on one line at 1440 */
.zl-help::first-letter { text-transform: uppercase; }
.zl-buy .zl-btn { margin-top: 1.5rem; }
.zl-trust { display: grid; grid-template-columns: 1fr; gap: .625rem 1rem; list-style: none; margin: 1rem 0 0; padding: 0; }
@media (min-width: 990px) { .zl-trust { grid-template-columns: 1fr 1fr; } }
.zl-trust li { display: flex; align-items: center; gap: .625rem; font-size: .75rem; font-weight: 500; line-height: 1.33; color: var(--zl-ink-2); text-wrap: pretty; }
.zl-trust a { color: inherit; text-decoration: underline; text-underline-offset: .15em; }
.zl-trust svg { width: 22px; height: 22px; flex: none; stroke: var(--zl-ink); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* sticky bar: fixed, above the consent bar (it sets --zc-h), no entrance */
.zl-sticky { position: fixed; left: 0; right: 0; bottom: 0; inset-block-end: var(--zc-h, 0px); z-index: 40; display: none; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem 16px calc(.5rem + env(safe-area-inset-bottom)); background: rgba(244, 234, 226, .96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--zl-line); font-family: var(--zl-ui); color: var(--zl-ink); }
.zl-sticky.is-on { display: flex; }
.zl-sticky > div:first-child { min-width: 0; }  /* the flex child must be allowed to shrink, or the name takes the width from the button */
.zl-sticky__name { font-family: var(--zl-display); font-weight: 500; font-size: 1.25rem; line-height: 1.1; font-variation-settings: "WONK" 0; font-optical-sizing: auto; white-space: nowrap; }
.zl-sticky .zl-btn { flex: 0 0 auto; white-space: nowrap; }  /* "Add to bag" broke to two lines at 390 and the bar grew past its own 72px reservation */
.zl-sticky__price { font-size: .75rem; font-weight: 500; line-height: 1.33; color: var(--zl-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }  /* the configuration lives here now: if anything must truncate it is this line, never the price at its end — so the tier is written first and the money last */  /* 12/500 like every small role; Apple's bar also sets its price smallest */
.zl-sticky .zl-btn { width: auto; height: 48px; margin: 0; padding: 0 1.375rem; font-size: 1.0625rem; line-height: 1; font-family: var(--zl-ui); font-weight: 600; border-radius: var(--zl-pill); background: var(--zl-ink); color: var(--zl-ground); border: 0; }
body.zl-has-sticky { padding-bottom: calc(72px + var(--zc-h, 0px)); }  /* the consent bar writes an inline body padding of its own height; the sticky bar sits above it */
@media (min-width: 990px) { body.zl-has-sticky { padding-bottom: 0; } body.zl-has-sticky .page-wrapper { padding-bottom: calc(72px + var(--zc-h, 0px)); } }  /* base.css makes body overflow:hidden above 990 and .page-wrapper the scroller, so padding on body reserved nothing and the bar sat over the footer */
@media (prefers-reduced-motion: reduce) { .zl-pill, .zl-swatch__ring { transition: none; } }

/* ── chapter 1: the pinned stage ─────────────────────────────────────────── */
.zl.zl-stage-ch { background: var(--zl-ground); padding-top: 0; padding-bottom: var(--zl-section); }  /* (0,2,0) to beat .zl.zl-chapter, else the top is padded twice */  /* its own top padding sits on the label wrap */
.zl-stage-ch > .zl-wrap:not(.zl-stage-ch__copy) { padding-top: var(--zl-section); }
#MainContent .zl-stage-ch .zl-statement { margin-bottom: 24px; }
.zl.zl-stage-ch .zl-intro { margin-bottom: 40px; }  /* the sentence now precedes the frames; (0,3,0) beats .zl .zl-intro { margin: 0 } */  /* the shared #MainContent margin:0 rule outranks a class-only override */
.zl-track { position: relative; height: 220svh; margin: 0; }  /* three holds and two fades in 120svh of scroll (the length council: 300 was a stall) */
.zl-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--zl-ground); }
.zl-stage__frame { position: absolute; inset: 0; opacity: 0; }
[data-zl-near] .zl-stage__frame { will-change: opacity; }  /* promoted only while the track is near the viewport */
.zl-stage__frame.is-first { opacity: 1; }
.zl-stage__fill { position: absolute; inset: -10%; width: 120%; height: 120%; object-fit: cover; filter: blur(48px); transform: translateZ(0); }  /* the frame's own tones fill the bands */
/* The frames are square masters. The image is a centred square the size of the stage's short side, its
   four edges feathered 56px into the blurred fill so the band is a surface, not a seam. */
.zl-stage__img { position: absolute; inset: 0; margin: auto; width: min(100vw, 100svh); height: min(100vw, 100svh); max-width: 100%; max-height: 100%; object-fit: cover;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent), linear-gradient(to bottom, transparent, #000 56px, #000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent), linear-gradient(to bottom, transparent, #000 56px, #000 calc(100% - 56px), transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.zl-stage-ch .zl-stage-ch__copy { padding-top: 48px; }
.zl-features { display: grid; gap: 40px; margin-top: 64px; }
@media (min-width: 990px) { .zl-features { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 0 40px; } .zl-feature-block { display: grid; grid-row: span 2; grid-template-rows: subgrid; } .zl-feature-block > img { grid-row: 1; } .zl-feature-block > figcaption, .zl-feature-block > .zl-feature-block__text { grid-row: 2; } }
.zl-feature-block { margin: 0; }
.zl-feature-block img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; margin-bottom: 1rem;  }
@media (prefers-reduced-motion: reduce) {
  .zl-track { height: auto; }
  .zl-stage { position: static; height: auto; display: grid; gap: 8px; overflow: visible; }
  .zl-stage__frame { position: static; opacity: 1; aspect-ratio: 1 / 1; }
  .zl-stage__fill { display: none; }
  .zl-stage__img { position: static; width: 100%; height: 100%; margin: 0; -webkit-mask-image: none; mask-image: none; }
}

/* ── chapter 2: the comparison (no reveal on the cards: the reader compares) ── */
.zl-cmp-ch { background: var(--zl-ground); }
.zl-cmp-ch .zl-cmp-lede { margin-top: 1rem; max-width: 42ch; }
.zl-cmp__family { margin: 40px 0 0; }
.zl-cmp__family img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;   }
@media (min-width: 990px) { .zl-cmp__family img { aspect-ratio: 2 / 1; } }
.zl-cmp__family figcaption { margin-top: .625rem; max-width: 46ch; }
.zl-cmp { display: grid; gap: 40px; margin-top: 3rem; }
.zl-cmp__card { display: grid; gap: 0; margin: 0; padding: 0; }
.zl-cmp__frame img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }  /* 4:3 on the phone: a square card ran a whole screen each, so a reader could never hold two lamps in the eye at once */
@media (min-width: 990px) { .zl-cmp__frame img { aspect-ratio: 1 / 1; } }
.zl-cmp__name { font-family: var(--zl-ui); font-weight: 600; font-size: clamp(1.25rem, 1.12rem + .5vw, 1.5rem); line-height: 1.15;  /* Archivo 20 → 24: a different face from the chapter statement, a clear rank below it */ margin: 1.25rem 0 0; color: var(--zl-ink); letter-spacing: -.008em; }
#MainContent .zl .zl-cmp__name { margin: 1.25rem 0 0; }
.zl .zl-cmp__blurb { margin-top: .375rem; }  /* (0,2,0): .zl .zl-body zeroes margins */
.zl-cmp__rows { margin: 1.25rem 0 0; display: grid; }
.zl-cmp__row { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; align-items: baseline; padding: .625rem 0; border-top: 1px solid var(--zl-line-2); }
.zl-cmp__row:last-child { border-bottom: 1px solid var(--zl-line-2); }
.zl .zl-cmp__row > .zl-body { color: var(--zl-ink); }
.zl-num { font-variant-numeric: tabular-nums; }
.zl .zl-cmp__choose { display: inline-flex; align-items: center; justify-content: center; width: auto; align-self: start; justify-self: start; margin-top: 1.25rem; height: 48px; padding: 0 22px; text-decoration: none; }  /* smaller than the one button that sells */
.zl-cmp__legend { margin-top: 1.5rem; max-width: 46ch; }
.zl .zl-cmp__shared { margin-top: 40px; max-width: 42ch; }  /* .zl .zl-body zeroes margins at (0,2,0); this must match that specificity or the 40px never lands */
@media (min-width: 990px) {
  /* the six rows become grid items (display: contents) so every row lines up across the four cards */
  .zl-cmp { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 32px; grid-template-rows: repeat(8, auto); }
  .zl-cmp__card { grid-row: span 8; grid-template-rows: subgrid; }
  /* the charge row is optional: the row count follows it */
  .zl-cmp:has(.zl-cmp__row--charge) { grid-template-rows: repeat(9, auto); }
  .zl-cmp:has(.zl-cmp__row--charge) .zl-cmp__card { grid-row: span 9; }
  .zl-cmp__rows { display: contents; }
  .zl-cmp__row:nth-child(1) { margin-top: 1.25rem; }
  .zl-cmp__row { align-content: start; }
  .zl-cmp__row { grid-template-columns: 1fr; gap: .125rem; }
  .zl .zl-cmp__choose { align-self: start; }
}
.zl-closer { margin-top: var(--zl-section); }
.zl-closer__grid { display: grid; gap: 24px; margin-top: 3rem; }
.zl-closer__item { margin: 0; }
.zl-closer__item img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;   }
.zl-closer__item figcaption { margin-top: .625rem; max-width: 40ch; }
@media (min-width: 990px) { .zl-closer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } }

/* ── story chapters (3 and 4), the holders, the questions ── */
.zl-story .zl-statement, .zl-gift .zl-statement { margin-bottom: 40px; }
#MainContent .zl-story .zl-statement, #MainContent .zl-gift .zl-statement { margin-bottom: 40px; }
.zl-story__hero { margin: 0; }
.zl-story__hero img { display: block; width: 100%; height: auto; max-width: 1200px; margin-inline: auto; aspect-ratio: 1 / 1; object-fit: cover;  }
@media (min-width: 990px) { .zl-story__hero img { aspect-ratio: 5 / 4;  } }  /* 5:4 keeps the middle 80% of the square master: F07 spans 15–88% of its height, F18 38–86% */
.zl-story .zl-story__copy { padding-top: 48px; }
.zl-quote { margin: 0; }
.zl-quote p { margin: 0; }
.zl-quote { margin: 0; }
.zl-quote__by { display: block; margin-top: .375rem; max-width: 40ch; }
.zl-feature-block .zl-quote__lead { margin-bottom: .5rem; }
.zl-gift__frames { display: grid; gap: 16px; margin-top: 0; }
.zl-gift__frame { margin: 0; }
.zl-gift__frame img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;   }
.zl-gift .zl-intro { margin-top: 40px; }
@media (min-width: 990px) { .zl-gift__frames { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } }
.zl-faq__list { margin-top: 3rem; border-top: 1px solid var(--zl-line-2); max-width: 42rem; }
.zl-faq__item { border-bottom: 1px solid var(--zl-line-2); }
.zl-faq__q { font-family: var(--zl-ui); font-weight: 600; font-size: 1.0625rem; line-height: 1.4; color: var(--zl-ink); padding: 1.125rem 2.5rem 1.125rem 0; cursor: pointer; list-style: none; position: relative; }
.zl-faq__q::-webkit-details-marker { display: none; }
.zl-faq__q::after { content: ""; position: absolute; right: 4px; top: 50%; width: 10px; height: 10px; border-right: 1.5px solid var(--zl-ink); border-bottom: 1.5px solid var(--zl-ink); transform: translateY(-70%) rotate(45deg); }  /* instant, like the native answer it marks */
.zl-faq__item[open] .zl-faq__q::after { transform: translateY(-30%) rotate(225deg); }
.zl-faq__q:focus-visible { outline: 2px solid var(--zl-ink); outline-offset: 2px; }
.zl .zl-faq__q:hover { color: var(--zl-ink); }  /* the theme's summary:hover recolours it otherwise */
.zl .zl-buy__error { display: block; margin-top: .75rem; color: var(--zl-ink); }
.zl .zl-buy__error.hidden { display: none; }
.zl-faq__a { padding: 0 0 1.25rem; max-width: 42ch; }
.zl-notes { margin-top: 2.5rem; max-width: 60ch; }

#beech .zl-story__hero img { object-position: 50% 57%; }  /* F07's lamp sits low in its square; 57% equalises the clearance at 5:4 */

/* one treatment for every photograph below the fold: no frame, no fill, no radius — the photograph's own cream meets the page's */
.zl-feature-block img, .zl-closer__item img, .zl-cmp__frame img, .zl-cmp__family img, .zl-gift__frame img, .zl-story__hero img { border-radius: 0; background: transparent; }
/* Below the fold, on the phone, every photograph runs edge to edge: an inset photograph reads as a picture in a frame
   (measured 2026-09-13: 13 of 15 showed a side edge against the ground). Bands above and below remain, as on Apple's
   full-bleed frames; side edges do not. The wrap is min(100% - 32px), so the breakout is exactly the gutter. */
@media (max-width: 989px) {
  .zl-wrap .zl-feature-block img, .zl-wrap .zl-closer__item img, .zl-wrap .zl-cmp__frame, .zl-wrap .zl-cmp__family img, .zl-wrap .zl-gift__frame img { width: calc(100% + 32px); max-width: none; margin-inline: -16px; }  /* only inside the wrap: .zl-story__hero is already a full-width child of its section, and widening it scrolled the page 16px sideways (measured with the rule switched off as a control) */  /* the wrap is min(100% - 32px): the breakout is the gutter exactly. 100vw would add the scrollbar's width on a narrow desktop window and scroll the page sideways */
  .zl-cmp__frame img { width: 100%; }
}

/* ── reviews: the rating from the app's own numbers, stars drawn from the average, the widget in the page's type ── */
.zl-reviews .zl-section-h { margin-top: 0; }
.zl-reviews__rating { display: flex; align-items: center; gap: 12px; margin: 24px 0 0; }
.zl-stars { position: relative; display: inline-block; width: 120px; height: 24px; flex: 0 0 auto; }
/* the fold's rating: a presence mark, a number that carries the value, and the source in the same line at the same size */
.zl-stars--sm { width: 80px; height: 16px; }
.zl-stars.zl-stars--sm::before, .zl-stars--sm .zl-stars__fill { -webkit-mask-size: 80px 16px; mask-size: 80px 16px; }  /* (0,2,1): the base .zl-stars::before rule is later in the file and equal weight, so a single class lost and only the fill scaled — the two layers then sat half a star apart */  /* the mask is pinned in px (the fill's own width is the rating, so it cannot be 100%); each size needs its own */
.zl .zl-foldrate { display: flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; padding-block: 13px; margin-top: 11px; margin-bottom: -13px; }  /* 11 + 13 = 24px of air above the stars; the 13px below is cancelled by the negative margin, so a 42px tap target costs the column ~40px, not 70 (margin-block with three values is invalid and was dropped) */
.zl .zl-foldrate__avg { font-size: .9375rem; font-weight: 500; line-height: 1.33; color: var(--zl-ink); font-variant-numeric: tabular-nums; }  /* 500, the same step as the reviews header: the number is read, not shouted */
.zl .zl-foldrate__src { font-size: .75rem; font-weight: 500; line-height: 1.33; color: var(--zl-ink-2); }
.zl .zl-foldrate:hover .zl-foldrate__src, .zl .zl-foldrate:focus-visible .zl-foldrate__src { color: var(--zl-ink); }
.zl .zl-foldrate:focus-visible { outline: 2px solid var(--zl-ink); outline-offset: 2px; }
.zl-stars::before, .zl-stars__fill { content: ''; position: absolute; inset: 0; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24'%3E%3Cpath d='M12 1.5l3.1 6.6 7.2.9-5.3 5 1.4 7.1L12 17.6 5.6 21.1 7 14l-5.3-5 7.2-.9zM36 1.5l3.1 6.6 7.2.9-5.3 5 1.4 7.1L36 17.6l-6.4 3.5 1.4-7.1-5.3-5 7.2-.9zM60 1.5l3.1 6.6 7.2.9-5.3 5 1.4 7.1L60 17.6l-6.4 3.5 1.4-7.1-5.3-5 7.2-.9zM84 1.5l3.1 6.6 7.2.9-5.3 5 1.4 7.1L84 17.6l-6.4 3.5 1.4-7.1-5.3-5 7.2-.9zM108 1.5l3.1 6.6 7.2.9-5.3 5 1.4 7.1-6.4-3.5-6.4 3.5 1.4-7.1-5.3-5 7.2-.9z'/%3E%3C/svg%3E") no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24'%3E%3Cpath d='M12 1.5l3.1 6.6 7.2.9-5.3 5 1.4 7.1L12 17.6 5.6 21.1 7 14l-5.3-5 7.2-.9zM36 1.5l3.1 6.6 7.2.9-5.3 5 1.4 7.1L36 17.6l-6.4 3.5 1.4-7.1-5.3-5 7.2-.9zM60 1.5l3.1 6.6 7.2.9-5.3 5 1.4 7.1L60 17.6l-6.4 3.5 1.4-7.1-5.3-5 7.2-.9zM84 1.5l3.1 6.6 7.2.9-5.3 5 1.4 7.1L84 17.6l-6.4 3.5 1.4-7.1-5.3-5 7.2-.9zM108 1.5l3.1 6.6 7.2.9-5.3 5 1.4 7.1-6.4-3.5-6.4 3.5 1.4-7.1-5.3-5 7.2-.9z'/%3E%3C/svg%3E") no-repeat; -webkit-mask-size: 120px 24px; mask-size: 120px 24px; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.zl-stars::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24'%3E%3Cpath d='M12 1.5l3.1 6.6 7.2.9-5.3 5 1.4 7.1L12 17.6 5.6 21.1 7 14l-5.3-5 7.2-.9zM36 1.5l3.1 6.6 7.2.9-5.3 5 1.4 7.1L36 17.6l-6.4 3.5 1.4-7.1-5.3-5 7.2-.9zM60 1.5l3.1 6.6 7.2.9-5.3 5 1.4 7.1L60 17.6l-6.4 3.5 1.4-7.1-5.3-5 7.2-.9zM84 1.5l3.1 6.6 7.2.9-5.3 5 1.4 7.1L84 17.6l-6.4 3.5 1.4-7.1-5.3-5 7.2-.9zM108 1.5l3.1 6.6 7.2.9-5.3 5 1.4 7.1-6.4-3.5-6.4 3.5 1.4-7.1-5.3-5 7.2-.9z' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24'%3E%3Cpath d='M12 1.5l3.1 6.6 7.2.9-5.3 5 1.4 7.1L12 17.6 5.6 21.1 7 14l-5.3-5 7.2-.9zM36 1.5l3.1 6.6 7.2.9-5.3 5 1.4 7.1L36 17.6l-6.4 3.5 1.4-7.1-5.3-5 7.2-.9zM60 1.5l3.1 6.6 7.2.9-5.3 5 1.4 7.1L60 17.6l-6.4 3.5 1.4-7.1-5.3-5 7.2-.9zM84 1.5l3.1 6.6 7.2.9-5.3 5 1.4 7.1L84 17.6l-6.4 3.5 1.4-7.1-5.3-5 7.2-.9zM108 1.5l3.1 6.6 7.2.9-5.3 5 1.4 7.1-6.4-3.5-6.4 3.5 1.4-7.1-5.3-5 7.2-.9z' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E"); color: var(--zl-ink-2); }  /* the empty track is DRAWN, not tinted: brass on this ground is 2.43:1 and a tinted empty star sat within 1.35:1 of the fill, so "4.4 out of 5" could not be read. An outline separates by shape, and matches the review cards the app renders below. */
.zl-stars__fill { color: var(--zl-brass); width: var(--zl-star-pct, 0%); }   /* the filled part, the page's brass, to the tenth */
.zl-reviews__avg { font-family: var(--zl-ui); font-weight: 500; font-size: 1rem; line-height: 1; color: var(--zl-ink); font-variant-numeric: tabular-nums; }  /* body size and weight in the H1's ink — the only new pairing on the page. It was 1.5rem/600, the price's role, and read as a price. Council 2026-09-18: nothing in either rating line sits above 500 */
/* the header stars stay 120×24: stepped down to 100×20 for an hour on 2026-09-18, which left the summary row's stars smaller than every review card's beneath it (Judge.me draws theirs at 24px). The number was the complaint, not the stars. */
.zl-reviews__count { margin: 0; }
.zl .zl-reviews__none { margin-top: 24px; max-width: 42ch; }
.zl .zl-reviews__source { margin-top: .625rem; max-width: 46ch; }  /* (0,2,0): .zl .zl-body zeroes margins */
/* THE APP RENDERS jm-*, NOT jdgm-*. The widget served is jdgm-widget-revamp: eleven jdgm- selectors here matched
   nothing and 341 reviews arrived in the app's own type (20/700 titles, 16/400 bodies at line-height normal, a fourth
   weight, an uncapped 1200px measure). Measured 2026-09-14; the jdgm- names are kept only where the app still emits
   them server-side. The `.jm-text.` prefixes are load-bearing: the app's own .jm-text colour rule is equal
   specificity and later in its sheet. */
.zl-reviews__widget .jdgm-rev-widg { padding: 0; border: 0; }
.zl-reviews__widget .jm-review-item { border-top: 1px solid var(--zl-line); padding: 24px 0; margin: 0; }
.zl-reviews__widget .jm-text.jm-review-content__title {
  font-size: 1.0625rem !important; font-weight: 600 !important; line-height: 1.4 !important;
  letter-spacing: -.01em !important; color: var(--zl-ink) !important; }
.zl-reviews__widget .jm-text.jm-reviewer-info__name {
  font-size: .75rem !important; font-weight: 600 !important; line-height: 1.33 !important; color: var(--zl-ink) !important; }
.zl-reviews__widget .jm-reviewer-info__details .jm-text:not(.jm-reviewer-info__name) {
  font-size: .75rem !important; font-weight: 500 !important; line-height: 1.33 !important; }
.zl-reviews__widget .jm-review-content__body,
.zl-reviews__widget .jm-review-content__body p {   /* the app sets line-height: normal on the inner <p> itself */
  font-size: 1rem !important; font-weight: 500 !important; line-height: 1.5 !important;
  letter-spacing: -.01em !important; max-width: 46ch; }
.zl-reviews__widget .jm-pagination-controls__button .jm-text,
.zl-reviews__widget .jm-pagination-controls__ellipsis {
  font-size: 1.0625rem !important; font-weight: 600 !important; line-height: 1 !important; color: var(--zl-ink) !important; }
.zl-reviews__widget .jm-reviewer-avatar__initial { font-size: .75rem !important; font-weight: 600 !important; }
/* the app's empty state: our heading and our line say it; the widget keeps only its "Write a review" action, in the page's ghost pill */
.zl-reviews__widget .jm-review-widget-minimal-header__title, .zl-reviews__widget .jm-no-reviews-state__text { display: none !important; }
.zl-reviews__widget .jm-button, .zl-reviews__widget .jm-button--primary, .zl-reviews__widget .jm-action-buttons__button {
  display: inline-flex !important; align-items: center; height: 48px; padding: 0 20px; margin: 0;
  font-family: var(--zl-ui) !important; font-size: 1.0625rem !important; font-weight: 600 !important; color: var(--zl-ink) !important;
  background: none !important; border: 1.5px solid var(--zl-ink) !important; border-radius: var(--zl-pill) !important; box-shadow: none !important; text-transform: none !important;
}
.zl-reviews__widget .jm-button:hover { background: var(--zl-ink) !important; color: var(--zl-ground) !important; }
.zl-reviews--empty .zl-reviews__widget .jm-button, .zl-reviews--empty .zl-reviews__widget .jm-action-buttons__button { display: none !important; }
.zl-reviews__widget { --jdgm-star-color: var(--zl-brass); --jdgm-primary-color: var(--zl-ink); }
.zl-reviews__widget .jm-star-rating, .zl-reviews__widget .jm-star-rating__font-icon, .zl-reviews__widget .jdgm-star { color: var(--zl-brass) !important; }  /* the widget's own stars, measured rgb(43,42,38) until this: the app ships two generations of class names and neither reads the variable above */
.zl-reviews__widget .jm-review-widget-minimal-header, .zl-reviews__widget .jdgm-rev-widg__header, .zl-reviews__widget .jdgm-rev-widg__summary, .zl-reviews__widget .jdgm-rev-widg__title, .zl-reviews__widget .jdgm-ssr-rating-summary, .zl-reviews__widget .jm-rating-summary, .zl-reviews__widget .jm-review-widget__header { display: none !important; }  /* the page prints the rating once, above; every name the app has shipped for its own header */  /* a stranger is not asked to write the first review; the button returns with the first review */
.zl-reviews__widget .jm-action-buttons, .zl-reviews__widget .jm-no-reviews-state { text-align: left !important; justify-content: flex-start !important; padding: 0 !important; margin: 0 !important; }
.zl-reviews__widget .jm-text { font-family: var(--zl-ui) !important; color: var(--zl-ink-2) !important; }
.zl-reviews__widget { margin-top: 32px; }
@media (min-width: 990px) { .zl-reviews__widget { margin-top: 40px; } }
.zl-reviews__widget .jm-review-widget, .zl-reviews__widget .jdgm-review-list { padding-top: 0; }  /* the app pads 48px above its header (hidden above) and 24px above the list, which left 96px of nothing between our rating and the first review; the widget's own margin is now the only gap */

/* ─── FOLD ONE ON A PHONE (2026-09-22) ──────────────────────────────────────────────────────────────
   Measured before this block, 390x844, consent declined: price 649, tier pills 767, Add to bag
   1124-1188 — the buy control rendered 280px past the fold, so a cold ad arrival saw no price at 675
   and no button at either height. Desktop already fitted (button 744-808 of 900) and is left alone.
   Two moves, no markup change and nothing touched inside the theme's own media-gallery component:
   (1) the option swatches, their help line and the holder colours move BELOW the button on phones via
       flex order, so the fold carries price + tier choice + button and the configuring happens after;
   (2) the vertical rhythm above the button is tightened. The gallery keeps its full 390px square:
       shrinking it was the other way to win the pixels and it would have cost the one thing the page
       is being asked to gain. The sticky bar (now on whenever the real button is off screen) is what
       actually guarantees a reachable control at every height. */
/* DESKTOP TOO, for one reason only: the opening selection is now a Set, and a Set carries the free
   holders, so the colour picker opens on load. Measured 2026-09-22 at 1440x900 it grew from 20px
   (collapsed, on a Single) to 272px and pushed Add to bag from 744 to 1080 — out of a fold it had
   been inside. The swatches go below the button here as well; the option row stays above it, because
   the desktop column has the room and the two-column layout reads top-down. */
@media (min-width: 990px) {
  .zl-buy .zl-holders-wrap { margin-top: 1.5rem }
}

@media (max-width: 989px) {
  /* the legend reads "One, two or three" directly above three pills that already say One lamp /
     Two lamps / Three lamps — 30px of restatement in the tightest part of the page. Kept for
     screen readers, which still need the fieldset named. */
  .zl-buy [data-zl-tiers] > .zl-legend { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0 }

  /* tightened rhythm: every value here was 1.5–2x this before, which is what put the button past the fold */
  /* 16px reclaimed from the gaps, not from the type. Raising delivery+returns to 13px (owner's floor, it
     answers the cold-US question) made that row wrap to two lines and grow 19px, which pushed Add to bag
     from 787-843 to 804-860 — out of the 844 fold it had just been inside. These are the gaps, each cut by
     2-4px; nothing readable got smaller. */
  .zl-buy__col                { padding-top: .5rem }
  .zl-buy .zl-desc            { margin-top: .125rem }
  .zl-buy .zl-price           { margin-top: .375rem }
  .zl-buy .zl-field           { margin-top: .5rem }
  .zl-buy .zl-tier-note       { margin-top: .375rem }
  .zl-buy .zl-trust           { margin-top: .5rem }
  .zl-buy .zl-btn             { margin-top: .875rem }
  /* TYPE SCALE. Measured across 8 comparison pages 2026-09-22: name:price ratio runs 1.40-1.56
     (Apple Pencil Pro 1.41, set median 1.50). Ours was 28/24 = 1.17 — the lowest of the nine pages
     measured, i.e. our price was proportionally the loudest thing on any of them. 28/20 = 1.40. */
  .zl-buy .zl-price__now      { font-size: 1.25rem }
  /* THE FOLD'S LAST 60px, taken from restatement rather than from the photograph.
     At 844 the sticky bar's top edge is 779, so everything that must be read before a tap has to
     finish above it. Measured after the tier-note move: pills ran 769-838, i.e. the chooser itself
     sat under the bar — a worse trade than the one it fixed. Reclaimed here:
     (a) the price eyebrow ("Set · Lift, Tall and Small") is hidden visually but kept for screen
         readers: the selected tier is already marked in the pills and the sticky bar prints the
         full option string at all times, so on a phone it was the third statement of one fact;
     (b) the offer line drops to 13px/600 in full ink — smaller but darker, and it fits one line;
     (c) pill height 64 -> 56 (still well over the 44px house minimum and WCAG 2.5.8's 24px). */
  /* THE PRICE MUST SAY WHAT IT BUYS. Hiding this label reclaimed 18px and left a bare "$169.15" under a
     photograph, with nothing in words saying it is three lamps — the same class of defect as the picture
     and the price disagreeing. It comes back INLINE rather than on its own line, so it costs 0px: at 13px
     "Set · Lift, Tall and Small" (26ch) + $169.15 + the struck $199 measure well inside 358px. */
  .zl-buy .zl-price__for      { position: static; width: auto; height: auto; margin: 0; padding: 0; overflow: visible; clip-path: none; flex-basis: auto; font-size: .8125rem; align-self: baseline }
  .zl-buy .zl-tier-note       { font-size: .8125rem; font-weight: 600; line-height: 1.3; color: var(--zl-ink); margin-top: .375rem }
  .zl-buy .zl-field           { margin-top: .75rem }
  .zl-buy .zl-pill            { min-height: 56px }
  /* the last 39px, so Add to bag itself lands inside the 844 fold rather than 26px of it.
     Body 18 -> 17px is Apple's own measured body size on a product page; the CTA at 56px is still
     taller than every competitor CTA measured 2026-09-22 (Mantar 48, Domisana 50, Stella 47). */
  .zl-buy .zl-desc            { font-size: 1.0625rem }
  /* CTA 50px: the measured median of the long-running competitor set (Mantar 48, Domisana 50, Stella 47)
     and still well over the 44px house minimum and WCAG 2.5.8's 24px. With the three gaps below it, this
     is what puts the whole control inside the 844 fold with clear space under it rather than flush. */
  .zl-buy .zl-btn             { height: 50px; margin-top: .625rem }
  .zl-buy .zl-optrow          { margin-top: 1.5rem }   /* below the button, so it may breathe again */

  /* delivery and returns as one compact row rather than two stacked lines: 54px -> ~22px */
  /* DELIVERY AND RETURNS ARE NOT SMALL PRINT. They answer the question a cold US buyer is actually asking
     of a Scottish company shipping from China — where is this coming from, and how long. 11px made it the
     smallest type on the page; 13px is the floor, and the icons come back up with it. */
  .zl-buy .zl-trust           { grid-template-columns: auto auto; justify-content: start; gap: .5rem .875rem }
  .zl-buy .zl-trust svg       { width: 18px; height: 18px }
  .zl-buy .zl-trust li        { font-size: .8125rem }
  .zl-buy .zl-btn             { margin-top: .5rem }
}

/* the three lines, below the buy block: one statement each, air between, no spec-list grammar */
     rule here was (0,1,0) and lost, so the block was auto-centred inside the column: measured left 59px
     on a 430px iPhone against 16px for every other element (holders legend, help line, option cards).
     The comment that used to sit here claimed it was left-aligned — it asserted a result nobody checked.
     This rule now matches the wrap's weight and wins on order. Verified on the served page at 390/430/1440. */
     other element in the buy column starts at 16px, and at 1440 it straddled the gap between the two columns. */
/* NB: body padding for the fixed bar is already handled above (search zl-has-sticky) and correctly
   accounts for the consent bar's own height and for .page-wrapper being the scroller above 990px.
   A second, simpler rule here would win on order and undo both. Do not add one. */

/* OPTION CARDS ALIGN ACROSS THE ROW. "Tall, Wide and Small" and "Lift, Tall and Small" wrap to two lines,
   "Three Lifts" to one, so the three prices landed at three different heights and the row read as broken.
   The row already stretches its items to equal height (flex default), so pushing the price to the bottom of
   each card aligns all three whatever the label does — including a future three-line label. */
.zl-swatch__price { margin-top: auto; }

/* The buy section is followed immediately by a sticky full-height stage, so the last line of the statement
   block could come to rest against the foot of the visual viewport, where iOS Safari's toolbar overlays it.
   NOTE: env(safe-area-inset-bottom) resolves to 0 on this store — the viewport meta carries no
   viewport-fit=cover — so the reserve below is a plain value and the env() is only future-proofing. */

/* the delivery line carries the same weight on desktop: 13px is the floor for this role at any width */
.zl-buy .zl-trust li { font-size: .8125rem; }
.zl-buy .zl-trust svg { width: 18px; height: 18px; }