/* ==========================================================================
   Plimpton Innovations — shared brand system (all pages, all directions)
   Colours: #000000, #FFFFFF and the four support greys ONLY (Brand tab row 12).
   Type: Arial everywhere (Bold headings, Regular body). Horizon appears only
   inside the wordmark artwork (SVG masters in /assets/brand/).
   ========================================================================== */

:root {
  /* Brand colours (never add another value here) */
  --black: #000000;
  --white: #FFFFFF;
  --grey-90: #1A1A1A;
  --grey-65: #595959;
  --grey-30: #B3B3B3;
  --grey-10: #E6E6E6;

  /* Dark theme roles (DEFAULT: the site is black; reading pages opt into .theme-light) */
  --bg: var(--black);
  --fg: var(--white);
  --muted: var(--grey-30);   /* secondary text on black */
  --rule: var(--grey-65);
  --panel: var(--grey-90);
  --slot-bg: var(--grey-90);
  --slot-fg: var(--grey-30);

  --font: Arial, "Helvetica Neue", Helvetica, "Liberation Sans", Arimo, sans-serif;

  /* Type scale (phone first; clamps grow to desktop) */
  --fs-caption: 0.8125rem;
  --fs-body: 1rem;
  --fs-lead: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --fs-h4: 1rem;
  --fs-h3: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --fs-h2: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  --fs-h1: clamp(2rem, 1.4rem + 3vw, 3.75rem);
  --fs-display: clamp(2.5rem, 1.5rem + 5vw, 5.5rem);

  /* Spacing (8 px base) */
  --s1: 0.5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2rem; --s5: 3rem; --s6: 4rem; --s7: 6rem; --s8: 8rem;

  /* Layout: 12-column grid, 16 px phone gutter */
  --max: 80rem;
  --rule-inset: calc(max(0px, (100% - var(--max)) / 2) + var(--gutter));
  --gutter: 1rem;
  --col-gap: 1rem;
  --header-h: 3.5rem;
}

@media (min-width: 48rem) {
  :root { --gutter: 2rem; --col-gap: 1.5rem; --header-h: 4.5rem; }
}

/* Dark sections / dark-led pages */
.theme-dark, [data-theme="dark"] {
  --bg: var(--black);
  --fg: var(--white);
  --muted: var(--grey-30);   /* secondary text on black */
  --rule: var(--grey-65);
  --panel: var(--grey-90);
  --slot-bg: var(--grey-90);
  --slot-fg: var(--grey-30);
  background: var(--bg);
  color: var(--fg);
}
/* Light: white papers, knowledge articles and any panel that needs dark-on-white reading */
.theme-light, [data-theme="light"] {
  --bg: var(--white); --fg: var(--black); --muted: var(--grey-65); --rule: var(--grey-30);
  --panel: var(--grey-10); --slot-bg: var(--grey-10); --slot-fg: var(--grey-65);
  background: var(--bg); color: var(--fg);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--fg);
  background: var(--bg);
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-weight: 700; line-height: 1.15; margin: 0 0 var(--s2); letter-spacing: -0.01em; }
h1 { font-size: var(--fs-h1); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
p, ul, ol, dl, table, figure { margin: 0 0 var(--s2); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s4) 0; }
small, .caption { font-size: var(--fs-caption); color: var(--muted); }
.lead { font-size: var(--fs-lead); line-height: 1.45; }
.muted { color: var(--muted); }
.label {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 var(--s1);
}
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: var(--gutter); top: -3rem; z-index: 100; background: var(--black); color: var(--white); padding: var(--s1) var(--s2); }
.skip-link:focus { top: var(--s1); }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s4); }
.grid > * { grid-column: 1 / -1; }
@media (min-width: 48rem) {
  .span-2 { grid-column: span 2; } .span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; } .span-5 { grid-column: span 5; }
  .span-6 { grid-column: span 6; } .span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; }
  .start-5 { grid-column-start: 5; } .start-7 { grid-column-start: 7; } .start-9 { grid-column-start: 9; }
}
.section { padding-block: var(--s6); }
.section + .section { position: relative; }
/* Section and page-head rules run the width of the content column, not the screen (owner review 2026-11-06):
   inset by the gutter, plus the margin beside the column once the screen is wider than --max. */
.section + .section::before, .page-head::after {
  content: ""; position: absolute; left: var(--rule-inset); right: var(--rule-inset); border-top: 1px solid var(--rule);
}
.section + .section::before { top: 0; }
.section--tight { padding-block: var(--s4); }
@media (min-width: 64rem) { .section { padding-block: var(--s7); } }
.stack > * + * { margin-top: var(--s2); }
.measure { max-width: 42rem; }
.rule-top { border-top: 1px solid var(--rule); padding-top: var(--s3); }

/* ---------- Prototype bar (remove at launch) ---------- */
.proto-bar {
  background: var(--grey-90); color: var(--white); font-size: 0.75rem; line-height: 1.4;
  padding: 0.4rem var(--gutter); display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; align-items: center; justify-content: space-between;
}
.proto-bar a { color: var(--white); }
.proto-bar button {
  font: inherit; font-size: 0.75rem; background: transparent; color: var(--white); border: 1px solid var(--grey-65);
  padding: 0.15rem 0.5rem; cursor: pointer;
}
.proto-bar button[aria-pressed="true"] { background: var(--white); color: var(--black); border-color: var(--white); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50; background: var(--bg); color: var(--fg);
  border-bottom: 1px solid var(--rule);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: var(--s2); }
.brand { display: inline-flex; align-items: center; text-decoration: none; padding-block: 0.6rem; }
.brand img { height: 22px; width: auto; }   /* about 145 px wide: wordmark minimum is 150 px, see below */
@media (min-width: 22.5rem) { .brand img { height: 24px; } } /* >= 155 px wide */
@media (min-width: 48rem) { .brand img { height: 30px; } }   /* about 194 px wide */
/* Default is dark: white wordmark. A light page or header switches to the black wordmark. */
.logo-on-light { display: none; }
.theme-light .logo-on-dark, [data-theme="light"] .logo-on-dark { display: none; }
.theme-light .logo-on-light, [data-theme="light"] .logo-on-light { display: block; }

.nav-toggle {
  font: inherit; font-weight: 700; font-size: 0.875rem; background: transparent; color: inherit;
  border: 1px solid var(--rule); padding: 0.45rem 0.75rem; cursor: pointer; min-height: 44px;
}
.site-nav { display: none; }
.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav a { text-decoration: none; font-weight: 700; font-size: 0.9375rem; }
.site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }
.header-tools { display: flex; align-items: center; gap: var(--s2); }
.cart-link { text-decoration: none; font-size: 0.875rem; font-weight: 700; display: inline-flex; gap: 0.35rem; align-items: center; min-height: 44px; }
.cart-count { display: inline-block; min-width: 1.4em; text-align: center; border: 1px solid currentColor; font-size: 0.75rem; line-height: 1.4; padding: 0 0.25rem; }

/* phone menu: opened by JS (adds .is-open); without JS the footer nav is the fallback */
.site-nav.is-open {
  display: block; position: absolute; left: 0; right: 0; top: 100%;
  background: var(--bg); border-bottom: 1px solid var(--rule); padding: var(--s2) var(--gutter) var(--s3);
}
.site-nav.is-open li { border-top: 1px solid var(--rule); }
.site-nav.is-open a { display: block; padding: 0.85rem 0; font-size: 1.125rem; }

@media (min-width: 64rem) {
  .nav-toggle { display: none; }
  .site-nav, .site-nav.is-open { display: block; position: static; border: 0; padding: 0; background: none; }
  .site-nav ul { display: flex; gap: var(--s3); }
  .site-nav.is-open li { border: 0; }
  .site-nav.is-open a { display: inline; padding: 0; font-size: 0.9375rem; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--black); color: var(--white); padding-block: var(--s6) var(--s4); --rule: var(--grey-65); --muted: var(--grey-30); }
.site-footer a { color: var(--white); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .footer-brand img { width: 180px; height: auto; margin-bottom: var(--s2); }
.site-footer .tagline { font-weight: 700; margin-bottom: var(--s1); }
.site-footer h2 { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey-30); margin-bottom: var(--s2); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 0.5rem; }
.footer-base { border-top: 1px solid var(--grey-65); margin-top: var(--s5); padding-top: var(--s3); display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); justify-content: space-between; font-size: var(--fs-caption); color: var(--grey-30); }
.footer-base button { font: inherit; color: var(--white); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font: inherit; font-weight: 700; font-size: 0.9375rem; line-height: 1.2;
  min-height: 48px; padding: 0.75rem 1.4rem; cursor: pointer; text-decoration: none;
  background: var(--fg); color: var(--bg); border: 1px solid var(--fg); border-radius: 0;
}
.btn:hover { background: var(--bg); color: var(--fg); }
.btn--ghost { background: transparent; color: var(--fg); }
.btn--ghost:hover { background: var(--fg); color: var(--bg); }
.btn[disabled], .btn[aria-disabled="true"] { cursor: not-allowed; background: var(--panel); color: var(--muted); border-color: var(--rule); }
.text-link { font-weight: 700; text-decoration: none; border-bottom: 1px solid currentColor; }
.text-link::after { content: " \2192"; }

/* ---------- Image slots (renders still in progress) ----------
   Named views: Hero, Front, Back, Left, Right, Top, Bottom, Exploded.
   A slot holds a neutral placeholder until the Fusion render is supplied.
   Renders should be exported with a transparent background so they sit on
   white or black; html[data-slot-bg] previews both (background standard open). */
.slot {
  position: relative; margin: 0; background: var(--slot-bg); color: var(--slot-fg);
  aspect-ratio: var(--ratio, 4 / 3); display: grid; place-items: center; overflow: hidden;
}
.slot--square { --ratio: 1 / 1; }
.slot--wide { --ratio: 16 / 9; }
.slot--tall { --ratio: 4 / 5; }
.slot img { width: 100%; height: 100%; object-fit: contain; }
.slot__label { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; padding: var(--s2); line-height: 1.5; }
.slot__label strong { display: block; font-size: 0.875rem; letter-spacing: 0.04em; }
.slot::before { /* outline of the shared enclosure, 56.11 x 38.92 mm, drawn as a neutral placeholder only */
  content: ""; position: absolute; width: 38%; aspect-ratio: 56.11 / 38.92; border: 1px solid currentColor; opacity: 0.35;
}
.slot[data-view="Exploded"]::before { box-shadow: 0 -1.2rem 0 -1px var(--slot-bg), 0 -1.2rem 0 0 currentColor, 0 1.2rem 0 -1px var(--slot-bg), 0 1.2rem 0 0 currentColor; }
html[data-slot-bg="white"] .slot { --slot-bg: var(--white); --slot-fg: var(--grey-65); outline: 1px solid var(--grey-30); outline-offset: -1px; }
html[data-slot-bg="black"] .slot { --slot-bg: var(--black); --slot-fg: var(--grey-30); outline: 1px solid var(--grey-65); outline-offset: -1px; }
figcaption { font-size: var(--fs-caption); color: var(--muted); margin-top: var(--s1); }

/* ---------- Data tables (datasheet style: Grey 10 header, no vertical lines) ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
table.data th, table.data td { text-align: left; vertical-align: top; padding: 0.65rem 0.75rem 0.65rem 0; border-bottom: 1px solid var(--rule); }
table.data thead th { background: var(--panel); padding-left: 0.75rem; font-size: 0.8125rem; letter-spacing: 0.02em; }
table.data tbody th { font-weight: 700; width: 40%; }
table.data td.num { text-align: right; }
dl.specs { display: grid; grid-template-columns: 1fr; margin: 0; }
dl.specs > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--s2); padding-block: 0.7rem; border-top: 1px solid var(--rule); }
dl.specs > div:last-child { border-bottom: 1px solid var(--rule); }
dl.specs dt { font-weight: 700; }
dl.specs dd { margin: 0; }
.pending { color: var(--muted); font-style: italic; }

/* ---------- Lists, cards (no rounded corners, no shadows) ---------- */
.list-rule { list-style: none; padding: 0; margin: 0; }
.list-rule > li { border-top: 1px solid var(--rule); padding-block: var(--s2); }
.list-rule > li:last-child { border-bottom: 1px solid var(--rule); }
.card { border-top: 1px solid var(--fg); padding-top: var(--s2); display: flex; flex-direction: column; gap: var(--s1); }
.card a.card__link { text-decoration: none; }
.card a.card__link:hover h3 { text-decoration: underline; }
.card h3 { margin-bottom: 0.25rem; }
.breadcrumb { font-size: var(--fs-caption); color: var(--muted); padding-top: var(--s3); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0; margin: 0; }
.breadcrumb li { display: inline-flex; align-items: center; min-height: 44px; }
.breadcrumb li + li::before { content: "/"; margin-right: 0.35rem; }
.breadcrumb a { color: var(--muted); }

/* ---------- Page head ---------- */
.page-head { position: relative; padding-block: var(--s4) var(--s5); }
.page-head::after { bottom: 0; }
.page-head h1 { max-width: 20ch; }
.page-head .lead { max-width: 40rem; color: var(--muted); }

/* ---------- Price and store ---------- */
.price { font-size: 1.5rem; font-weight: 700; }
.price[data-placeholder="true"] { text-decoration: underline dotted var(--grey-30); text-underline-offset: 0.3em; }
.store-note { font-size: var(--fs-caption); color: var(--muted); }
.notice { border: 1px solid var(--rule); padding: var(--s2); font-size: 0.9375rem; }
.notice--draft { border-style: dashed; }

/* ---------- Forms ---------- */
.form { display: grid; gap: var(--s3); max-width: 40rem; }
.field { display: grid; gap: 0.4rem; }
.field label, .field legend { font-weight: 700; font-size: 0.9375rem; }
.field .hint { font-size: var(--fs-caption); color: var(--muted); }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea {
  font: inherit; color: var(--fg); background: var(--bg); width: 100%;
  border: 1px solid var(--muted); border-radius: 0; padding: 0.75rem; min-height: 48px;
}
textarea { min-height: 10rem; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--fg); outline-offset: 0; border-color: var(--fg); }
.check { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.9375rem; }
.check input { width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; accent-color: var(--fg); }
.field-error { color: var(--fg); font-weight: 700; font-size: var(--fs-caption); }
.field-error::before { content: "Error: "; }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.appnote-form [data-captcha]:empty { display: none; }
.appnote { margin-top: var(--s4); scroll-margin-top: 5rem; }
.appnote h2 { margin-bottom: var(--s2); }
.form-status { border-left: 3px solid var(--fg); padding: var(--s1) var(--s2); }

/* ---------- Cookie notice ---------- */
.cookie-notice {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--black); color: var(--white);
  border-top: 1px solid var(--grey-65); padding: var(--s2) var(--gutter);
  display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; justify-content: space-between; font-size: 0.875rem;
}
.cookie-notice[hidden] { display: none; }
[data-topic-only][hidden] { display: none; } /* fields shown for one inquiry topic only (contact form) */
/* The chosen files are listed below the button, so the browser's own "No file chosen" text is hidden. */
.field input[type="file"] { color: transparent; font: inherit; font-size: 0.875rem; border: 0; padding: 0; background: none; width: auto; min-height: 0; }
input[type="file"]::file-selector-button {
  font: inherit; font-weight: 700; color: var(--fg); background: transparent; border: 1px solid var(--fg);
  border-radius: 0; padding: 0.55rem 1rem; margin-right: var(--s2); cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: var(--fg); color: var(--bg); }
input[type="file"]:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.file-list { list-style: none; margin: var(--s1) 0 0; padding: 0; }
.file-list:empty { display: none; }
.file-list li { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); padding: 0.5rem 0; border-top: 1px solid var(--rule); font-size: 0.875rem; }
.file-list li:last-child { border-bottom: 1px solid var(--rule); }
.file-list .file-name { overflow-wrap: anywhere; }
.file-list button { font: inherit; font-weight: 700; color: var(--fg); background: none; border: 0; text-decoration: underline; text-underline-offset: 0.25em; padding: 0 0 0 var(--s2); min-height: 44px; cursor: pointer; flex: none; }
.upload-progress { margin: var(--s3) 0 0; width: 120px; height: 120px; }
.upload-progress[hidden] { display: none; }
.upload-progress svg { display: block; width: 120px; height: 120px; }
.upload-progress__dot { fill: var(--grey-65); transition: fill 0.2s linear; }
.upload-progress__dot.is-lit { fill: var(--fg); }
.upload-progress__pct { fill: var(--fg); font: 700 20px Arial, Helvetica, sans-serif; }
.footer-sign { display: inline-flex; align-items: center; gap: 0.6rem; }
.footer-emblem { width: 15px; height: auto; display: block; opacity: 0.9; }
.cookie-notice p { margin: 0; max-width: 46rem; }
.cookie-notice a { color: var(--white); }
.cookie-notice .btn { background: var(--white); color: var(--black); border-color: var(--white); min-height: 44px; padding: 0.5rem 1rem; }
.cookie-notice .btn--ghost { background: transparent; color: var(--white); }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Print ---------- */
@media print {
  .proto-bar, .site-header, .site-footer, .cookie-notice, .nav-toggle { display: none !important; }
  body { color: #000000; background: #FFFFFF; }
}

/* ---------- Prototype: show where each piece of copy comes from ----------
   data-src="brand"  approved line from the tracker Brand tab
   data-src="claim"  Verified-public row from the tracker Claims tab
   data-src="draft"  new copy, DRAFT until approved
   data-src="ruling" wording set by a recorded ruling (Decisions tab)
   data-src="archive" an older blog post carried over word for word (not marketing copy)
   data-src="approved" new wording approved by the owner (docs/wording-decisions.md) */
html.show-sources [data-src] { outline: 1px dashed var(--grey-65); outline-offset: 2px; position: relative; }
html.show-sources [data-src]::after {
  content: attr(data-src); position: absolute; top: -0.9rem; right: 0; font: 700 0.625rem/1 var(--font);
  letter-spacing: 0.08em; text-transform: uppercase; background: var(--black); color: var(--white); padding: 0.15rem 0.3rem;
}
html.show-sources [data-src="draft"] { outline: 2px dashed var(--black); }
html.show-sources [data-theme="dark"] [data-src="draft"], html.show-sources .theme-dark [data-src="draft"] { outline-color: var(--white); }
.h3 { font-size: var(--fs-h3); }
details.faq { border-top: 1px solid var(--rule); }
details.faq:last-of-type { border-bottom: 1px solid var(--rule); }
details.faq summary { cursor: pointer; list-style: none; padding-block: var(--s2); display: flex; justify-content: space-between; gap: var(--s2); align-items: baseline; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; font-weight: 700; font-size: 1.25rem; }
details.faq[open] summary::after { content: "\2212"; }
details.faq summary h2 { margin: 0; }
details.faq > :not(summary) { padding-bottom: var(--s2); max-width: 42rem; }

/* Contact page: form first; the dealer and documents notes sit beside it only when there is room
   for a readable column (about 22rem), otherwise below it in two columns, then one. */
.contact-layout { display: grid; gap: var(--s5); }
.contact-side { display: grid; gap: var(--s4); align-content: start; }
@media (min-width: 40rem) { .contact-side { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) {
  .contact-layout { grid-template-columns: minmax(0, 7fr) minmax(20rem, 4fr); gap: var(--s6); }
  .contact-side { grid-template-columns: 1fr; }
}

/* Optional Closeout promotion: one quiet line under the header, never a pop-up. */
.promo-bar { border-bottom: 1px solid var(--rule); background: var(--panel); font-size: 0.875rem; }
.promo-bar p { margin: 0; padding-block: 0.6rem; }
.promo-bar a { font-weight: 700; margin-left: 0.5rem; white-space: nowrap; }

/* Slots holding a real render. Renders are on white (background standard still open),
   so the slot becomes a white plate on the black site. The neutral outline and label go away. */
.slot--img { background: var(--white); }
.slot--img::before { display: none; }
.slot--img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
html[data-slot-bg] .slot--img { background: var(--white); }

/* Shared fixes from the merged design: comfortable tap targets and a footer edge on black pages. */
.breadcrumb a, .site-footer li a, .footer-base a, .footer-base button { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer li { margin-bottom: 0; }
.brand { min-height: 44px; }
.site-footer { border-top: 1px solid var(--grey-65); }

/* Cart (/cart/): lines from the Wix cart, summary beside them on wide screens. */
.cart-lines { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.cart-line { display: grid; grid-template-columns: 5rem 1fr auto; gap: var(--s2); padding: var(--s2) 0; border-bottom: 1px solid var(--rule); align-items: start; }
.cart-line__img { width: 5rem; aspect-ratio: 1 / 1; background: var(--white); display: grid; place-items: center; overflow: hidden; }
.cart-line__img img { width: 100%; height: 100%; object-fit: contain; }
.cart-line__name { font-weight: 700; margin: 0 0 var(--s1); }
.cart-line__price { margin: 0; font-weight: 700; white-space: nowrap; }
.cart-line__controls { display: flex; flex-wrap: wrap; gap: var(--s1); align-items: center; margin-top: var(--s1); }
.cart-line__controls input { width: 5rem; min-height: 44px; }
.cart-line__controls .btn { min-height: 44px; }
.cart-summary { border: 1px solid var(--rule); padding: var(--s3); margin-bottom: var(--s3); }
.cart-summary__row { display: flex; justify-content: space-between; gap: var(--s2); font-size: var(--fs-lead); }
@media (max-width: 40rem) { .cart-line { grid-template-columns: 4rem 1fr; } .cart-line__img { width: 4rem; } .cart-line__price { grid-column: 2; } }
.captcha:empty { display: none; }
.captcha { margin: var(--s2) 0; }

/* Store listings generated from the Wix catalog: Closeout categories and item cards. */
.category-grid, .listing-grid { list-style: none; margin: 0 0 var(--s4); padding: 0; display: grid; gap: var(--col-gap); grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.category-card { display: flex; flex-direction: column; justify-content: space-between; gap: var(--s1); min-height: 6rem; padding: var(--s2); border: 1px solid var(--rule); text-decoration: none; }
.category-card:hover, .category-card:focus-visible { border-color: var(--fg); }
.category-card__name { font-weight: 700; }
.category-card__meta, .listing-card__meta { font-size: var(--fs-caption); color: var(--muted); }
.listing-card a { display: block; text-decoration: none; min-height: 44px; }
.listing-card__name { display: block; font-weight: 700; margin: var(--s1) 0 0.25rem; }
.listing-text ul, .listing-text ol { padding-left: 1.25rem; }
/* Store-item pages: even spacing in the buy form; Details sits under the buy column, Wix's one-line paragraphs kept tight. */
.buy form[data-add-to-cart] { display: grid; gap: var(--s2); }
.buy form[data-add-to-cart] > p { margin: 0; }
.buy form[data-add-to-cart] .qty { gap: var(--s2); }
.listing-details { padding-top: var(--s4); }
@media (min-width: 48rem) { .listing-details .listing-text { grid-column: 7 / span 6; } }  /* under the buy column */
.listing-text h2 { font-size: var(--fs-h3); margin-bottom: var(--s2); }
.listing-text p, .listing-text li { margin: 0 0 0.4em; }
.listing-text .listing-back { margin-top: var(--s3); }

/* Knowledge Library posts carried over from the old blog: text as published, images from the Wix media host. */
.article-body h2 { margin-top: var(--s5); }
.article-figure { margin: var(--s3) 0; }
.article-figure img { width: 100%; height: auto; display: block; border: 1px solid var(--grey-10); }
.article-body ul { padding-left: 1.25rem; }
.article-body li { margin-bottom: var(--s1); }

/* Document lists (hub, /docs/<product>/ pages): type label above the title, as on the product pages. */
[data-doc-list] .label { display: block; margin-bottom: 0.25rem; letter-spacing: var(--track, 0.08em); }

/* ---------- Launch view (release build sets data-release on <html>; on the preview add ?launchview to any address) ----------
   Image boxes still waiting for a render or photo are hidden, and so are the frames around them; each one
   appears by itself as soon as its image is added. */
[data-release] .slot:not(:has(img)),
[data-release] .xv:not(:has(img)),
[data-release] .pdp-still:not(:has(img)),
[data-release] .plate:not(:has(img)) { display: none; }