/* ============================================================
   Goffin Diagnostics — WooCommerce page-scoped styles.

   Built entirely on the shared tokens in site.css so Woo pages stay
   in perfect UNITY with the rest of the site. Nothing here restyles a
   shared component — these are extra layout pieces (gallery, key-specs,
   anchor strip, panels, downloads, sticky quote-bar) the catalogue PDP
   needs. AIR is the priority: wide gaps, one idea per band.

   Enqueued (handle goffin-woo) on Woo contexts only. Other Woo areas
   (cart / checkout / account) append their own clearly-marked sections
   below — do not edit the SINGLE-PRODUCT section.
   ============================================================ */

/* ============================================================
   WOOCOMMERCE CORE-CSS NEUTRALISATION  — owner: cart/checkout/account area
   ------------------------------------------------------------
   WooCommerce ships woocommerce-layout.css, which floats and 48%-widths the
   legacy two-column markup:  .col2-set .col-1/.col-2 { float; width:48% }  and
   .u-columns { ... }. Our login / address layouts reuse those native class names
   (form-login.php keeps .u-columns .col2-set .col-1 so every Woo login/register
   hook + field still works) but render them with CSS Grid. If Woo's core CSS
   wins the cascade, the grid is broken and the login card collapses to ~one word
   wide. The enqueue layer prints goffin-woo AFTER Woo's stylesheets; these rules
   are the belt-and-braces guarantee that our grids own their own layout no matter
   the print order. Scoped tightly to our grid wrappers so nothing else changes.
   ============================================================ */
.signin-layout,
.details-grid,
.woocommerce-Addresses,
.vo-addresses{width:100%}

.signin-layout > .col-1,
.signin-layout > .col-2,
.signin-layout > .u-column1,
.signin-layout > .u-column2,
.details-grid > .col-1,
.details-grid > .col-2,
.details-grid > .u-column1,
.details-grid > .u-column2,
.woocommerce-Addresses > .u-column1,
.woocommerce-Addresses > .u-column2,
.vo-addresses > .u-column1,
.vo-addresses > .u-column2{
  float:none;
  width:auto;
  max-width:none;
}

/* keep the form card from ever collapsing, even if the grid is unavailable */
.login-card{min-width:0}

/* ------------------------------------------------------------
   MY-ACCOUNT DASHBOARD SHELL  — owner: account area
   ------------------------------------------------------------
   WooCommerce's woocommerce-layout.css floats the account screen into a
   broken two-column legacy grid:
       .woocommerce-account .woocommerce-MyAccount-navigation { float:left;  width:30% }
       .woocommerce-account .woocommerce-MyAccount-content    { float:right; width:68% }
   Our nav renders as the full-width .dash-tabs bar and the content as a
   .tabpanel below it (my-account.php). Left unchecked, the float traps the
   tab bar in a 30% column (clipping the last tab, e.g. "My quotes") and
   pushes the content into a 68% right column with a large empty left
   gutter. These rules un-float both regions so the tab bar spans the full
   .wrap and the content sits directly beneath it, sharing ONE container
   width and the SAME left edge. goffin-woo prints after Woo core, so equal
   specificity wins; the .dash-head ancestor also lifts specificity above
   the .woocommerce-account core selector as a belt-and-braces guarantee.
   ------------------------------------------------------------ */
.woocommerce-account .dash-head .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content{
  float:none;
  width:100%;
  max-width:none;
}
/* the content region is its own panel below the tabs — never beside them */
.woocommerce-account .woocommerce-MyAccount-content{clear:both}
/* nav lives inside .dash-head's .wrap; tab strip already styles itself */
.dash-head .woocommerce-MyAccount-navigation.dash-tabs{margin-bottom:0}

/* ============================================================
   SINGLE-PRODUCT (PDP)  — owner: single-product area
   Ported 1:1 from product.html inline <style> (SLIM PDP: the
   highlights / key-points / trust blocks were removed).
   ============================================================ */

/* --- top: gallery + info two-up --- */
.pdp-top{padding:var(--s-6) 0 0}
.pdp-grid{display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(36px,5vw,64px); align-items:start}
/* No real image → collapse the media column so the buy box spans full width
   (centred to a comfortable measure). Never a broken empty media box / gap. */
.pdp-grid--noimg{grid-template-columns:minmax(0,720px); justify-content:center}
.pdp-grid--noimg .pdp-info{padding-top:0}

/* gallery — sticky on desktop, calm and spacious */
.gallery{position:sticky; top:calc(var(--head-h) + 20px)}
/* Branded placeholder shown when a product has no real image. Calm, on-brand,
   never the stock Woo placeholder. */
.gallery .main.is-empty{background:var(--surface)}
.gallery-ph{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; color:var(--line-2)}
.gallery-ph svg{width:clamp(56px,9vw,84px); height:clamp(56px,9vw,84px); color:var(--orange-ink); opacity:.55}
.gallery-ph-txt{font-family:var(--ff-mono); font-size:.72rem; font-weight:var(--fw-mono); letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted)}
.gallery .main{border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface);
  aspect-ratio:4/3.2; display:grid; place-items:center; padding:clamp(24px,3.4vw,40px); overflow:hidden; position:relative}
.gallery .main img{width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; transition:opacity .25s var(--ease)}
.gallery .glabel{position:absolute; top:16px; left:16px; display:inline-flex; align-items:center; gap:7px;
  background:#fff; border:1px solid var(--line); color:var(--ink); font-size:.72rem; font-weight:500;
  padding:6px 11px; border-radius:8px; box-shadow:var(--shadow-sm)}
.gallery .glabel .d{width:6px; height:6px; border-radius:50%; background:var(--orange)}
.thumbs{display:flex; gap:12px; margin-top:14px}
.thumbs button{width:80px; height:80px; border:1px solid var(--line); border-radius:11px; background:var(--surface);
  padding:9px; cursor:pointer; transition:border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease)}
.thumbs button:hover{transform:translateY(-1px); box-shadow:var(--shadow-sm)}
.thumbs button.active{border-color:var(--orange); box-shadow:0 0 0 1px var(--orange)}
.thumbs img{width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply}
.gallery .gcaption{margin-top:14px; font-size:.8rem; color:var(--muted); line-height:1.6;
  display:flex; align-items:flex-start; gap:8px}
.gallery .gcaption .d{width:6px; height:6px; border-radius:50%; background:var(--orange); flex-shrink:0; margin-top:6px}
.gallery .gcaption b{color:var(--ink); font-weight:600}

/* info column */
.pdp-info{padding-top:6px}
.pdp-domain{display:inline-flex; align-items:center; gap:9px; margin-bottom:16px;
  font-family:var(--ff-mono); font-size:.72rem; font-weight:var(--fw-mono); letter-spacing:.1em;
  text-transform:uppercase; color:var(--orange-ink); background:var(--orange-wash);
  border:1px solid var(--line); padding:7px 13px; border-radius:var(--radius-pill)}
.pdp-domain .d{width:8px; height:8px; border-radius:50%; background:var(--orange); flex-shrink:0}
.pdp-domain .cat{color:var(--muted); font-weight:500}
.pdp-info .pdp-eyebrow{font-family:var(--ff-mono); font-size:.72rem; font-weight:var(--fw-mono); letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin-bottom:18px; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.pdp-info .pdp-eyebrow b{color:var(--orange-ink); font-weight:var(--fw-mono)}
.pdp-info .pdp-eyebrow .dot{width:5px; height:5px; border-radius:50%; background:var(--line-2)}
.pdp-info h1{font-size:var(--h-page); line-height:1.1; margin-bottom:14px}
.pdp-info .lede{margin-bottom:24px; max-width:52ch}
.pdp-badges{display:flex; gap:8px; margin-bottom:30px; flex-wrap:wrap}

/* "Why this kit" — real USPs (usp_N_titel / usp_N_beschrijving) as a calm
   2-up key-points grid inside the buy box. Ports the design's .pdp-highlights
   strip, re-scoped to the narrower .pdp-info column (2 cols, then stacked). */
.pdp-info .pdp-highlights{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0 0 30px}
.pdp-hl{display:flex; gap:13px; align-items:flex-start; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius); padding:16px 16px;
  transition:border-color .25s, box-shadow .25s, transform .25s}
.pdp-hl:hover{border-color:var(--line-2); box-shadow:var(--shadow-sm); transform:translateY(-2px)}
.pdp-hl .hl-ic{width:34px; height:34px; border-radius:10px; background:#fff; border:1px solid var(--line);
  color:var(--orange-ink); display:grid; place-items:center; flex:0 0 auto}
.pdp-hl .hl-ic svg{width:17px; height:17px}
.pdp-hl b{display:block; font-size:.9rem; color:var(--ink); line-height:1.3; margin-bottom:3px}
.pdp-hl span{font-size:.8rem; color:var(--muted); line-height:1.5}
@media(max-width:520px){ .pdp-info .pdp-highlights{grid-template-columns:1fr} }

/* key-specs definition list */
.pdp-meta{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-bottom:30px}
.pdp-meta > div{background:#fff; padding:16px 18px}
.pdp-meta dt{font-family:var(--ff-mono); font-weight:var(--fw-mono); font-size:.65rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:6px}
.pdp-meta dd{font-size:.94rem; color:var(--ink); font-weight:500; line-height:1.5}

/* variation selector (variable products) — choose the variant to quote.
   The native <select> is the no-JS fallback; variation-swatches-woo upgrades
   it to swatch UI. Presented as a calm "configure your quote" panel above the
   CTA — a bordered surface card, one clear label/control row per attribute, and
   a premium select with its own caret. CSS-only elevation (the form markup and
   the JS-referenced selectors are the working WooCommerce unit, untouched). */
.pdp-variations{margin:0 0 24px; padding:18px 20px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius)}
.pdp-variations table.variations{width:100%; border-collapse:collapse}
.pdp-variations table.variations tr{display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px;
  padding:12px 0; border-bottom:1px solid var(--line)}
.pdp-variations table.variations tr:first-child{padding-top:0}
.pdp-variations table.variations tr:last-child{border-bottom:0; padding-bottom:0}
.pdp-variations .label label{font-family:var(--ff-mono); font-weight:var(--fw-mono); font-size:.66rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink); font-weight:var(--fw-mono); min-width:120px; display:inline-block}
.pdp-variations .value{flex:1; min-width:200px}
.pdp-variations .value select{appearance:none; -webkit-appearance:none; -moz-appearance:none;
  width:100%; max-width:340px; min-height:46px; padding:11px 40px 11px 14px; font-family:inherit; font-size:.94rem;
  color:var(--ink); background-color:#fff; border:1px solid var(--line-2); border-radius:10px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a717b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:16px;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease)}
.pdp-variations .value select:hover{border-color:var(--muted)}
.pdp-variations .value select:focus-visible{outline:none; border-color:var(--orange);
  box-shadow:0 0 0 3px var(--orange-wash)}
/* interactive PILL swatches (product.js upgrades the native <select> into these,
   so packaging/options read as tappable choices in the design language). The
   <select> is hidden but kept as the source of truth. */
.pdp-variations .value select[hidden]{display:none}
/* "Capacity cards": each packaging option is a compact card whose HERO is the
   count (mono lab figure) with the pack as a caption — distinctive, on-brand
   (data reads in IBM Plex Mono), and it makes the meaningful difference between
   options obvious at a glance. Selected = orange accent + a corner tick. */
.pdp-variations .pdp-swatches{display:flex; flex-wrap:wrap; gap:10px; max-width:430px}
.pdp-variations .pdp-swatch{position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  flex:1 1 118px; min-width:118px; text-align:left; cursor:pointer; font:inherit; color:var(--ink);
  background:#fff; border:1.5px solid var(--line-2); border-radius:14px; padding:15px 16px 14px;
  transition:border-color .16s var(--ease), background .16s var(--ease), box-shadow .2s var(--ease), transform .1s var(--ease)}
.pdp-variations .pdp-swatch .sw-num{font-family:var(--ff-mono); font-size:1.55rem; font-weight:var(--fw-mono);
  line-height:1; letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums}
.pdp-variations .pdp-swatch .sw-unit{font-family:var(--ff-mono); font-size:.58rem; font-weight:var(--fw-mono);
  letter-spacing:.11em; text-transform:uppercase; color:var(--muted)}
.pdp-variations .pdp-swatch .sw-cap{margin-top:7px; font-size:.8rem; font-weight:500; color:var(--ink-2)}
.pdp-variations .pdp-swatch::after{content:""; position:absolute; top:11px; right:12px; width:16px; height:16px;
  border-radius:50%; border:1.5px solid var(--line-2); background:#fff; transition:.16s var(--ease)}
.pdp-variations .pdp-swatch:hover{border-color:var(--muted); transform:translateY(-1px)}
.pdp-variations .pdp-swatch:focus-visible{outline:2px solid var(--orange-ink); outline-offset:2px}
.pdp-variations .pdp-swatch.is-active{border-color:var(--orange); background:var(--orange-wash);
  box-shadow:0 12px 26px -16px rgba(233,138,44,.6)}
.pdp-variations .pdp-swatch.is-active .sw-num,.pdp-variations .pdp-swatch.is-active .sw-unit{color:var(--orange-ink)}
.pdp-variations .pdp-swatch.is-active::after{border-color:var(--orange); background:var(--orange);
  box-shadow:inset 0 0 0 2px #fff}
/* plain fallback (option carries no count) — a calm text pill */
.pdp-variations .pdp-swatch--plain{flex:0 1 auto; min-width:0; flex-direction:row; align-items:center;
  padding:12px 16px; font-size:.92rem; font-weight:500}
.pdp-variations .pdp-swatch--plain::after{display:none}
.pdp-variations .pdp-swatch--plain.is-active{color:var(--orange-ink)}
/* swatch UI (when variation-swatches-woo is active) rides the same calm rhythm */
.pdp-variations .value ul{display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none}
.pdp-variations .single_variation_wrap{margin-top:6px}
/* SR-only resolution echo — visual feedback is the swatch + CTA state. */
.pdp-variations .woocommerce-variation{position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

.pdp-cta{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:18px}
.pdp-cta .btn-primary{flex:1; min-width:220px}
.pdp-note{font-size:.84rem; color:var(--muted); display:flex; align-items:flex-start; gap:9px; line-height:1.6; max-width:54ch}
.pdp-note svg{width:16px; height:16px; color:var(--orange-ink); flex-shrink:0; margin-top:2px}

/* in-quote state for the main CTA */
.btn-primary.in-quote{background:var(--ink)}
.btn-primary.in-quote:hover{background:#2a2d34}

/* disabled quote CTA — shown until a full, valid variant is chosen on a
   variable product, so a quote is never sent for an unspecified variant. */
.btn-primary[disabled],
.btn-primary[aria-disabled="true"]{
  background:var(--grey-2); color:var(--muted); cursor:not-allowed;
  box-shadow:none; transform:none; pointer-events:none;
}
.btn-primary[disabled]:hover,
.btn-primary[aria-disabled="true"]:hover{background:var(--grey-2); transform:none; box-shadow:none}

/* --- anchor strip ---
   top:0 (not --head-h) — .ogx-head is position:relative, not sticky/fixed,
   so it scrolls away with the page. Reserving --head-h here left a blank
   gap the height of the header once you'd scrolled past it. */
.pdp-tabs{position:sticky; top:0; z-index:40; background:rgba(255,255,255,.94); backdrop-filter:blur(12px);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:var(--s-5)}
.pdp-tabs .wrap{display:flex; gap:4px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none}
.pdp-tabs .wrap::-webkit-scrollbar{display:none}
.pdp-tabs a{padding:16px 14px; font-size:.9rem; font-weight:500; color:var(--muted); white-space:nowrap;
  border-bottom:2px solid transparent; transition:color .2s, border-color .2s}
.pdp-tabs a:hover{color:var(--ink)}
.pdp-tabs a.active{color:var(--ink); border-bottom-color:var(--orange)}

/* --- content sections: generous, one idea each --- */
.pdp-section{padding:clamp(38px,5vw,60px) 0; border-top:1px solid var(--line); scroll-margin-top:calc(var(--head-h) + 60px)}
.pdp-section:first-of-type{border-top:none}
.pdp-section > .sec-head{max-width:680px; margin-bottom:var(--gap)}
.pdp-section > .sec-head h2{font-size:var(--h-section); margin-bottom:12px}
.pdp-section > .sec-head p{color:var(--muted); font-size:1.02rem; line-height:1.7; margin:0}
/* One head treatment shared by BOTH PDP head patterns: .sec-head (details /
   downloads / application notes) and the .section-head-row > .section-head used
   by #related (which additionally carries a right-aligned link-arrow).
   NO index badge: #downloads used to be the only head with a "02", and that
   numbering exists nowhere else on the site, so it was removed from every head
   rather than added to the rest. The `.num` badge rule that lived here is gone
   with it — no PDP markup emits one any more. (The unrelated .num elements on
   the About / Insights / application-notes templates are their own components
   with their own styles and are untouched.) */
.sec-head .sec-eyebrow,
.pdp-section .section-head .sec-eyebrow{display:flex; align-items:center; gap:12px; margin-bottom:16px}
.sec-head .sec-eyebrow .eyebrow,
.pdp-section .section-head .sec-eyebrow .eyebrow{margin:0}
/* site.css spaces the heading off a BARE .eyebrow sibling (.eyebrow + h2). Now
   that the eyebrow is wrapped in .sec-eyebrow that rule no longer matches, so
   neutralise the h2's own top margin and let .sec-eyebrow's margin-bottom own
   the gap — identical spacing to the .sec-head pattern. */
.pdp-section .section-head .sec-eyebrow + h2{margin-top:0}

/* description / intended use */
.desc-grid{display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(32px,4vw,52px); align-items:start}
.desc-prose p{font-size:1rem; line-height:1.85; color:var(--ink-2); margin-bottom:18px; max-width:60ch}
.desc-prose p:last-of-type{margin-bottom:0}
.desc-prose strong{color:var(--ink); font-weight:600}
.intended{margin-top:28px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px 26px}
.intended .lbl{font-family:var(--ff-mono); font-weight:var(--fw-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--orange-ink); font-weight:var(--fw-mono); display:flex; align-items:center; gap:8px; margin-bottom:12px}
.intended .lbl svg{width:15px; height:15px}
.intended p{font-size:.93rem; line-height:1.75; color:var(--ink-2); margin:0; max-width:none}
.desc-figure{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--grey); position:sticky; top:calc(var(--head-h) + 72px)}
.desc-figure img{width:100%; aspect-ratio:4/3.4; object-fit:cover}
.desc-figure figcaption{padding:14px 18px; border-top:1px solid var(--line); background:#fff;
  font-size:.8rem; color:var(--muted); display:flex; align-items:center; gap:8px}
.desc-figure figcaption .d{width:6px; height:6px; border-radius:50%; background:var(--orange); flex-shrink:0}

/* two-column body: kit contents + protocol */
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:var(--gap-lg); align-items:start}
.panel-card{border:1px solid var(--line); border-radius:var(--radius); background:#fff; overflow:hidden}
.panel-card .pc-head{display:flex; align-items:center; gap:13px; padding:20px 24px; border-bottom:1px solid var(--line); background:var(--surface)}
.panel-card .pc-head .ic{width:42px; height:42px; border-radius:11px; background:#fff; border:1px solid var(--line);
  color:var(--ink); display:grid; place-items:center; flex-shrink:0}
.panel-card .pc-head .ic svg{width:21px; height:21px}
.panel-card .pc-head h3{font-size:var(--h-sub); margin:0}
.panel-card .pc-body{padding:24px}

.kit-list{list-style:none; display:flex; flex-direction:column; gap:15px}
.kit-list li{display:flex; gap:12px; font-size:.93rem; color:var(--ink-2); line-height:1.6}
.kit-list li svg{width:18px; height:18px; color:var(--orange-ink); flex-shrink:0; margin-top:3px}
.kit-list li b{color:var(--ink); font-weight:600}

.steps-list{list-style:none; counter-reset:step; display:flex; flex-direction:column; gap:20px}
.steps-list li{display:grid; grid-template-columns:auto 1fr; gap:15px; align-items:start}
.steps-list li::before{counter-increment:step; content:counter(step,decimal-leading-zero); font-family:var(--ff-mono); font-size:.78rem; font-weight:var(--fw-mono); color:var(--orange-ink); width:34px; height:34px; border-radius:9px;
  background:var(--orange-wash); display:grid; place-items:center; flex-shrink:0}
.steps-list li b{display:block; color:var(--ink); font-size:.96rem; margin-bottom:3px; font-weight:600}
.steps-list li span{font-size:.9rem; color:var(--muted); line-height:1.65}

/* specifications — uses the shared .table; small helpers for genes/channels */
.spec-stack{display:flex; flex-direction:column; gap:var(--gap-lg)}
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--radius)}
.table-scroll > .table{min-width:480px}
.gene{font-family:var(--ff-mono); font-weight:var(--fw-mono); font-size:.85rem; color:var(--orange-ink)}
.chan{display:inline-flex; align-items:center; gap:8px; font-family:var(--ff-mono); font-weight:var(--fw-mono); font-size:.83rem; color:var(--ink-2)}
.chan .sw{width:9px; height:9px; border-radius:50%; flex-shrink:0}
.table tbody th[scope="row"]{width:34%}

/* downloads
   NOTE: renamed .dl → .doc-link (was colliding with the unrelated .dl
   definition-list rows used on account/order pages further down this file —
   same 2-letter class, different components; the later rule was silently
   overriding display/gap here, flattening this into a single stacked
   column with no gap instead of the intended icon+label+arrow row). */
.downloads{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
.doc-link{display:flex; align-items:center; gap:16px; border:1px solid var(--line); border-radius:var(--radius); padding:17px 20px; transition:border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease), background .2s var(--ease); background:#fff}
.doc-link:hover{border-color:var(--orange-wash); box-shadow:var(--shadow-sm); transform:translateY(-1px); background:var(--orange-wash)}
.doc-link .ic{position:relative; width:46px; height:46px; border-radius:12px; background:var(--orange-wash); color:var(--orange-ink); display:grid; place-items:center; flex-shrink:0}
.doc-link .ic svg{width:21px; height:21px}
.doc-link .fmt{position:absolute; left:50%; bottom:-7px; transform:translateX(-50%); background:var(--orange-ink); color:#fff; font-family:var(--ff-mono); font-size:.58rem; font-weight:var(--fw-mono); letter-spacing:.03em; line-height:1; padding:3px 6px; border-radius:5px; white-space:nowrap}
.doc-link .txt{min-width:0}
.doc-link b{display:block; font-size:.92rem; color:var(--ink); font-weight:600; line-height:1.35}
.doc-link small{display:block; margin-top:3px; color:var(--muted); font-size:.78rem; font-family:var(--ff-mono); font-weight:var(--fw-mono)}
.doc-link .arrow{margin-left:auto; color:var(--muted); flex-shrink:0; transition:transform .2s var(--ease), color .2s}
.doc-link:hover .arrow{color:var(--orange-ink); transform:translateY(2px)}
/* Documentation REFERENCE row (no real file): a calm, non-interactive listing —
   not a fake download link. Muted icon, no hover-lift, no arrow. */
.doc-link.is-ref{cursor:default; background:var(--surface)}
.doc-link.is-ref:hover{border-color:var(--line); box-shadow:none; transform:none; background:var(--surface)}
.doc-link.is-ref .ic{background:#fff; border:1px solid var(--line); color:var(--muted)}

/* Documentation GROUPS — the real `documentation` field keeps its structure: a
   category heading (Brochure / Manuals / Application Notes) followed by its own
   set of document rows. The heading renders as a quiet mono eyebrow LABEL that
   is visually distinct from the document cards beneath it, so a category is
   never mistaken for a downloadable file. */
.doc-groups{display:flex; flex-direction:column; gap:34px}
.doc-group{display:flex; flex-direction:column; gap:14px}
.doc-group-label{margin:0; font-family:var(--ff-mono); font-size:.72rem; font-weight:var(--fw-mono);
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
  padding-bottom:10px; border-bottom:1px solid var(--line)}
/* A single ungrouped block (editor downloads, or plain references) carries no
   heading — collapse the heading gap so it reads as one clean list. But when a
   lone group DOES have a label (its border-bottom is the section's top line),
   keep the gap so the first download card never sits flush against that line. */
.doc-group:only-child{gap:0}
.doc-group:only-child:has(> .doc-group-label){gap:14px}
/* Quiet note shown only when the whole field is plain-text references with no
   links: documentation exists but is supplied on request, not as files.
   (Named distinctly from the .doc-note callout used on the account pages.) */
.doc-refs-note{margin:22px 0 0; font-size:.86rem; color:var(--muted); line-height:1.6; max-width:60ch}

/* application notes (#application-notes) — notes that reference THIS product.
   Moved here out of an inline <style> in single-product.php: PDP CSS belongs in
   this file, and the section now sits inside tabs.php's single .wrap as a
   .pdp-section (so it shares the siblings' rhythm, top rule and scroll-margin)
   instead of its own full-width .section band.

   The horizontal split — intro left, cards right — is the REFERENCE layout for
   this pattern across the site; keep it. .rel-notes-intro doubles as a .sec-head
   (for the numbered eyebrow) but is NOT a direct child of .pdp-section, so the
   `.pdp-section > .sec-head` max-width/margin rules deliberately do not reach it
   and cannot fight the grid. */
.rel-notes-inner{display:grid; grid-template-columns:minmax(240px,340px) 1fr; gap:var(--gap); align-items:start}
.rel-notes-intro{display:flex; flex-direction:column; align-items:flex-start; gap:14px}
.rel-notes-intro h2{margin:0}
.rel-notes-intro p{margin:0; color:var(--ink-2); font-size:.96rem; line-height:1.55; max-width:34ch}
.rel-notes-intro .link-arrow{margin-top:6px}
/* the column's flex gap already spaces the eyebrow — drop the .sec-head margin */
.rel-notes-intro .sec-eyebrow{margin-bottom:0}
.rel-notes-grid{display:grid; gap:var(--gap)}
.rel-notes-grid--1{grid-template-columns:minmax(0,420px)}
.rel-notes-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.rel-notes-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.rel-note-card{display:flex; flex-direction:column; gap:12px; padding:24px; text-decoration:none;
  border:1px solid var(--line); border-radius:var(--radius); background:#fff; color:inherit;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease)}
.rel-note-card:hover{border-color:var(--line-2); box-shadow:var(--shadow); transform:translateY(-3px)}
.rel-note-card .rn-top{display:flex; align-items:center; gap:12px; flex-wrap:nowrap; min-width:0}
.rel-note-card .rn-tag{font-family:var(--ff-mono); font-weight:var(--fw-mono); font-size:.62rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--orange-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rel-note-card .rn-rt{margin-left:auto; flex-shrink:0; display:inline-flex; align-items:center; gap:6px;
  font-family:var(--ff-mono); font-weight:var(--fw-mono); font-size:.66rem; letter-spacing:.04em; color:var(--muted); white-space:nowrap}
.rel-note-card .rn-rt svg{width:13px; height:13px}
.rel-note-card h3{font-size:1.02rem; line-height:1.35; margin:0; color:var(--ink)}
.rel-note-card .rn-excerpt{margin:0; font-size:.9rem; line-height:1.6; color:var(--muted)}
.rel-note-card .rn-link{margin-top:auto; font-size:.86rem; font-weight:500; color:var(--orange-ink);
  display:inline-flex; align-items:center; gap:7px}
.rel-note-card .rn-link svg{width:15px; height:15px; transition:transform .2s var(--ease)}
.rel-note-card:hover .rn-link svg{transform:translateX(3px)}

/* related — uses shared .pcard inside a grid that REFLOWS for <4 items so a
   sparse product never shows empty cells or over-stretched cards. The column
   count is capped at the real item count; cards stay left-aligned at a sensible
   card width rather than ballooning to fill 4 tracks. */
.related-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.related-grid--1{grid-template-columns:minmax(0,300px)}
.related-grid--2{grid-template-columns:repeat(2,minmax(0,300px))}
.related-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.related-grid--4{grid-template-columns:repeat(4,1fr)}

/* --- responsive --- */
@media(max-width:1080px){
  .desc-grid{grid-template-columns:1fr; gap:32px}
  .desc-figure{position:static}
  /* 3–4 wide collapse to 2-up; 1–2 keep their natural (capped) width. */
  .related-grid--3,.related-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .pdp-grid,.pdp-grid--noimg{grid-template-columns:1fr; gap:36px; justify-content:stretch}
  .gallery{position:static}
  .two-col{grid-template-columns:1fr}
  /* application notes: the intro/cards split stacks, intro copy goes full width */
  .rel-notes-inner{grid-template-columns:1fr}
  .rel-notes-intro p{max-width:none}
  .rel-notes-grid--2,.rel-notes-grid--3{grid-template-columns:1fr}
}
@media(max-width:560px){
  .pdp-meta{grid-template-columns:1fr}
  .downloads{grid-template-columns:1fr}
  /* every related variant stacks to a single column on phones. */
  .related-grid,.related-grid--1,.related-grid--2,.related-grid--3,.related-grid--4{grid-template-columns:minmax(0,1fr)}
  .pdp-cta .btn-primary{min-width:0; width:100%}
  .pdp-cta .btn-ghost{width:100%}
  .table tbody th[scope="row"]{width:42%}
}

/* sticky quote bar — slides up once the hero CTA scrolls away */
.pdp-stickybar{position:fixed; left:0; right:0; bottom:0; z-index:60; transform:translateY(118%);
  transition:transform .36s cubic-bezier(.16,1,.3,1); background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-top:1px solid var(--line);
  box-shadow:0 -12px 32px -18px rgba(22,24,29,.3)}
.pdp-stickybar.show{transform:none}
.pdp-stickybar .sb-wrap{max-width:var(--maxw,1240px); margin:0 auto; padding:11px clamp(16px,4vw,40px); display:flex; align-items:center; gap:18px}
.pdp-stickybar .sb-thumb{width:46px; height:46px; border-radius:10px; overflow:hidden; border:1px solid var(--line); flex:0 0 auto; background:var(--grey)}
.pdp-stickybar .sb-thumb img{width:100%; height:100%; object-fit:cover}
.pdp-stickybar .sb-txt{min-width:0; display:flex; flex-direction:column; gap:2px}
.pdp-stickybar .sb-name{font-weight:600; color:var(--ink); font-size:.98rem; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pdp-stickybar .sb-spec{font-family:var(--ff-mono); font-weight:var(--fw-mono); font-size:.72rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pdp-stickybar .sb-actions{margin-left:auto; display:flex; gap:10px; align-items:center; flex:0 0 auto}
.pdp-stickybar .sb-actions .btn{white-space:nowrap}
@media(max-width:640px){
  .pdp-stickybar .sb-thumb,.pdp-stickybar .sb-spec,.pdp-stickybar .sb-ifu{display:none}
  .pdp-stickybar .sb-actions .btn-primary{flex:1}
}

/* ============================================================
   CART  — owner: cart/checkout/account area
   Ported 1:1 from cart.html inline <style> (the quote-basket /
   "offerte-mandje"), re-tokenised to site.css :root vars and
   reusing shared primitives (.btn, .link-arrow, .input/.qty).
   A few WooCommerce-only affordances the static mock lacked —
   functional quantity row + cart-actions bar — are added at the
   end of this block so the native cart form renders cleanly.
   ============================================================ */

/* quote header band — calm, one idea */
.q-head{padding:clamp(40px,6vw,72px) 0 0}
.q-head .eyebrow{margin-bottom:18px}
.q-head h1{margin-bottom:16px}
.q-head .lede{margin-bottom:0}

/* two-column layout: list + sticky summary */
.q-layout{display:grid; grid-template-columns:1.7fr .95fr; gap:var(--gap-lg); align-items:start}

/* count / summary line above the list */
.q-listhead{display:flex; align-items:baseline; justify-content:space-between; gap:18px; flex-wrap:wrap;
  margin-bottom:22px; padding-bottom:18px; border-bottom:1px solid var(--line)}
.q-listhead .q-count{font-size:1.06rem; font-weight:600; color:var(--ink)}
.q-listhead .q-count b{color:var(--orange-ink); font-weight:600}
.q-listhead .q-clear{font-size:.84rem; color:var(--muted); font-weight:500; cursor:pointer;
  background:none; border:none; font-family:inherit; display:inline-flex; align-items:center; gap:7px; padding:0}
.q-listhead .q-clear svg{width:15px; height:15px}
.q-listhead .q-clear:hover{color:var(--ink)}

/* the basket list */
.q-list{list-style:none; display:flex; flex-direction:column; gap:16px; margin:0; padding:0}

/* a single basket row */
.q-row{display:flex; gap:20px; align-items:flex-start; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); padding:22px 24px; transition:border-color .25s var(--ease), box-shadow .25s var(--ease)}
.q-row:hover{border-color:var(--line-2); box-shadow:var(--shadow-sm)}
.q-row .q-thumb{width:60px; height:60px; flex-shrink:0; border-radius:var(--radius-sm); background:var(--surface);
  border:1px solid var(--line); display:grid; place-items:center; color:var(--muted); overflow:hidden}
.q-row .q-thumb svg{width:28px; height:28px}
.q-row .q-thumb img{width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply}
.q-row .q-main{flex:1; min-width:0}
.q-row .q-name{font-size:1.04rem; font-weight:600; color:var(--ink); line-height:1.3; margin-bottom:4px; letter-spacing:-.01em; display:block}
.q-row a.q-name:hover{color:var(--orange-ink)}
.q-row .q-id{font-family:var(--ff-mono); font-weight:var(--fw-mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); margin-bottom:13px; display:block}
.q-row .q-chips{display:flex; flex-wrap:wrap; gap:7px}
/* Remove control. NB: WooCommerce core ships `.woocommerce a.remove` at
   specificity (0,2,1) — em-based 1em×1em sizing at font-size:1.5em,
   display:block, border-radius:100%, border:0 and color:red!important —
   which outranked the old `.q-row .q-remove` (0,2,0) and produced a 24px
   red circle with the × pinned to its top edge. The `a.q-remove.remove`
   selector below is (0,3,1) so every declaration (and the two !important
   colours, needed only to counter Woo's own !important) wins cleanly, and
   the grid model centres the SVG exactly on both axes with no magic
   offsets. Keep this selector at least this specific. */
.q-row .q-remove,
.q-row a.q-remove.remove{flex-shrink:0; width:40px; height:40px; display:grid; place-items:center; border-radius:9px;
  border:1px solid var(--line); background:#fff; color:var(--muted) !important; cursor:pointer; transition:.2s var(--ease);
  font-size:1rem; line-height:1; font-weight:400}
.q-row .q-remove svg{width:17px; height:17px}
.q-row .q-remove:hover,
.q-row a.q-remove.remove:hover{border-color:var(--line-2); color:var(--ink) !important; background:var(--surface)}

/* the meta chips on each row (static, calm) */
.q-chip{display:inline-flex; align-items:center; gap:7px; background:var(--grey); border:1px solid var(--line);
  color:var(--ink-2); font-size:.76rem; font-weight:var(--fw-mono); padding:5px 11px; border-radius:var(--radius-pill);
  font-family:var(--ff-mono); font-weight:var(--fw-mono); letter-spacing:.01em}
.q-chip .d{width:5px; height:5px; border-radius:50%; background:var(--orange); flex-shrink:0}

/* sticky summary card */
.q-summary{position:sticky; top:96px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:clamp(24px,2.6vw,30px)}
.q-summary h2{font-size:var(--h-sub); margin-bottom:6px}
.q-summary .sub{font-size:.88rem; color:var(--muted); line-height:1.6; margin-bottom:22px}
.q-summary .q-sumline{display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding:14px 0; border-bottom:1px solid var(--line); font-size:.92rem}
.q-summary .q-sumline:first-of-type{padding-top:0}
.q-summary .q-sumline span{color:var(--muted)}
.q-summary .q-sumline b{color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums}
.q-summary .q-sumline .pill{font-family:var(--ff-mono); font-weight:var(--fw-mono); font-size:.72rem; color:var(--orange-ink);
  background:var(--orange-wash); padding:4px 10px; border-radius:var(--radius-pill); font-weight:var(--fw-mono)}
.q-summary .q-noprice{display:flex; gap:10px; align-items:flex-start; margin:22px 0 24px;
  font-size:.84rem; color:var(--ink-2); line-height:1.55}
.q-summary .q-noprice svg{width:17px; height:17px; color:var(--orange-ink); flex-shrink:0; margin-top:2px}
.q-summary .btn{margin-bottom:12px}
.q-summary .q-keep{display:block; text-align:center; font-size:.88rem; color:var(--muted); font-weight:500}
.q-summary .q-keep:hover{color:var(--ink)}

/* reassurance strip below summary */
.q-assure{margin-top:18px; border-top:1px solid var(--line); padding-top:18px; list-style:none;
  display:flex; flex-direction:column; gap:11px}
.q-assure li{display:flex; gap:10px; align-items:flex-start; font-size:.84rem; color:var(--ink-2); line-height:1.5}
.q-assure svg{width:16px; height:16px; color:var(--orange-ink); flex-shrink:0; margin-top:2px}

/* ---------- EMPTY STATE ---------- */
.q-empty{max-width:560px; margin:0 auto; text-align:center; padding:clamp(20px,4vw,40px) 0}
.q-empty .q-emptyic{width:84px; height:84px; margin:0 auto 28px; border-radius:22px; background:var(--surface);
  border:1px solid var(--line); display:grid; place-items:center; color:var(--muted)}
.q-empty .q-emptyic svg{width:38px; height:38px}
.q-empty h2{font-size:var(--h-section); margin-bottom:14px}
.q-empty p{color:var(--muted); font-size:1.04rem; line-height:1.7; margin:0 auto 32px; max-width:46ch}
.q-empty .cta-row{justify-content:center}

/* WooCommerce-only: functional quantity row + cart-actions bar that the
   static mock did not include (native cart form needs them styled). */
.q-row .q-qtyrow{display:flex; align-items:center; gap:11px; margin-top:14px}
.q-row .q-qtylabel{font-family:var(--ff-mono); font-weight:var(--fw-mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.q-row .quantity{display:inline-flex}
.q-row .qty.q-qty{width:74px; padding:9px 11px; text-align:center; font-variant-numeric:tabular-nums}
.q-actions{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:22px;
  padding-top:20px; border-top:1px solid var(--line)}
.btn.btn-block{display:flex; width:100%; justify-content:center}

/* responsive */
@media(max-width:900px){
  .q-layout{grid-template-columns:1fr; gap:36px}
  .q-summary{position:static}
}
@media(max-width:560px){
  .q-row{padding:18px; gap:15px}
  .q-row .q-thumb{width:50px; height:50px}
  .q-row .q-thumb svg{width:24px; height:24px}
}

/* ============================================================
   CHECKOUT  — owner: cart/checkout/account area
   Ported from checkout.html inline <style> (the "Request a
   quote" submission: .co-grid form + sticky .summary + .co-help).
   The native WooCommerce checkout fields use .form-row / .input-text
   markup, so they are mapped to the design system below (Woo does not
   emit the .input / .select classes from site.css).
   ============================================================ */

/* page intro — a quiet, confident header */
.co-intro{max-width:680px}
.co-intro h1{margin:18px 0 16px}

/* the three reassurance ticks under the title — restraint */
.co-assure{display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:26px}
.co-assure span{display:inline-flex; align-items:center; gap:9px; font-size:.86rem; color:var(--ink-2); font-weight:500}
.co-assure svg{width:17px; height:17px; color:var(--orange-ink); flex-shrink:0}

/* the two-column body: form (left) · summary (right) */
.co-grid{display:grid; grid-template-columns:1.55fr 1fr; gap:var(--gap-lg); align-items:start}

/* form column — quiet panel, one block per idea */
.co-form{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(26px,3.4vw,44px)}
.co-form h3{font-size:var(--h-sub); letter-spacing:-.018em; margin:0 0 var(--s-4)}
/* each step is a 2-column field grid; full-width fields + the head span both,
   so Woo's form-row-first / -last pairs sit two-up exactly like .field-row. */
.co-block{display:grid; grid-template-columns:1fr 1fr; gap:0 18px; align-items:start;
  padding:0 0 var(--s-5); margin-bottom:var(--s-5); border-bottom:1px solid var(--line)}
.co-block:last-of-type{padding-bottom:0; margin-bottom:0; border-bottom:none}
.co-block-head{grid-column:1 / -1; margin-bottom:var(--s-4)}
.co-block-head .step{font-family:var(--ff-mono); font-size:.7rem; font-weight:var(--fw-mono); letter-spacing:.12em;
  text-transform:uppercase; color:var(--orange-ink)}
.co-block-head h2{font-size:var(--h-sub); letter-spacing:-.018em; margin-top:9px}
.co-block-head p{font-size:.88rem; color:var(--muted); margin-top:6px; line-height:1.6}

/* ---- native WooCommerce checkout fields → the shared .field/.input look ----
   Woo renders <p class="form-row …"><label>…<span class="woocommerce-input-wrapper">
   <input class="input-text">. Map that markup onto the design system and let the
   .co-block grid pair form-row-first / -last two-up. */
/* NB: selectors include .co-block so they out-specify WooCommerce core's
   `.woocommerce form .form-row-first{width:47%;float:left}` (0,2,1) — otherwise
   the paired inputs are locked to 47% of their column instead of filling it. */
.co-form .co-block .form-row{grid-column:1 / -1; float:none; width:auto; margin:0 0 22px; padding:0}
.co-form .co-block .form-row-first{grid-column:1}
.co-form .co-block .form-row-last{grid-column:2}
.co-form .form-row > label{display:block; font-size:.92rem; font-weight:500; color:var(--ink); margin-bottom:9px; line-height:1.3}
.co-form .form-row label .required{color:var(--orange-ink); text-decoration:none; border:0}
.co-form .form-row label .optional{color:var(--muted); font-weight:400; font-size:.82em}
.co-form .woocommerce-input-wrapper{display:block; width:100%}
.co-form .input-text,
.co-form textarea,
.co-form select{width:100%; box-sizing:border-box; font-family:inherit; font-size:1.02rem; color:var(--ink);
  background:#fff; border:1px solid var(--line-2); border-radius:var(--radius); padding:16px 18px;
  transition:border-color .2s, box-shadow .2s}
.co-form textarea{min-height:170px; resize:vertical; line-height:1.6}
.co-form select{appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:46px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a717b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:18px}
.co-form .input-text:focus,
.co-form textarea:focus,
.co-form select:focus{outline:none; border-color:var(--orange); box-shadow:0 0 0 3px var(--orange-wash)}
.co-form .input-text::placeholder,
.co-form textarea::placeholder{color:var(--muted)}
/* Woo field help text (e.g. the optional Phone reassurance) = site.css .help */
.co-form .description{font-size:.8rem; color:var(--muted); margin-top:7px}
/* Woo client-side validation states (checkout.js toggles these classes) */
.co-form .woocommerce-invalid .input-text,
.co-form .woocommerce-invalid select,
.co-form .woocommerce-invalid textarea{border-color:var(--error); box-shadow:0 0 0 3px rgba(192,57,43,.10)}
.co-form .woocommerce-invalid > label{color:var(--error)}

/* Step 03 (consent + submit) is single-column */
.co-block-submit{grid-template-columns:1fr}
.co-block-submit .co-consent-field{margin-bottom:var(--s-5)}

/* place-order area: the button itself is the design's .btn-primary .btn-block
   (via order_button_html); strip Woo's payment chrome around it — at €0 total
   there is no payment UI, only the "Send quote request" button + nonce. */
.co-form #order_review{margin:0}
.co-form #payment{background:none; border:0; padding:0; margin:0; border-radius:0}
.co-form #payment .payment_methods{margin:0; padding:0; border:0; list-style:none}
.co-form #payment .place-order{padding:0; margin:0; float:none; width:auto}
.co-form #payment .place-order #place_order{width:100%; float:none; margin:0}
.co-form #payment .woocommerce-terms-and-conditions-wrapper{margin-bottom:16px}

/* inline validation error state on a field */
.field.invalid .input,
.field.invalid .select,
.field.invalid .textarea{border-color:var(--error); box-shadow:0 0 0 3px rgba(192,57,43,.10)}
.err{display:none; font-size:.78rem; color:var(--error); margin-top:7px; font-weight:500}
.field.invalid .err{display:block}

/* checkbox consent row */
.co-consent{display:flex; gap:12px; align-items:flex-start}
.co-consent input{appearance:none; width:20px; height:20px; flex-shrink:0; margin-top:1px; cursor:pointer;
  border:1.5px solid var(--line-2); border-radius:6px; background:#fff; transition:.15s; position:relative}
.co-consent input:checked{background:var(--orange); border-color:var(--orange)}
.co-consent input:checked::after{content:""; position:absolute; left:6px; top:2px; width:5px; height:10px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg)}
.co-consent input:focus-visible{outline:2px solid var(--orange-ink); outline-offset:2px}
.co-consent label{font-size:.86rem; color:var(--ink-2); line-height:1.6; cursor:pointer}
.co-consent a{color:var(--orange-ink); font-weight:500; text-decoration:underline; text-underline-offset:2px}
.field.invalid .co-consent input{border-color:var(--error); box-shadow:0 0 0 3px rgba(192,57,43,.10)}

.co-submit-row{margin-top:var(--s-5)}
.co-submit-note{font-size:.8rem; color:var(--muted); margin-top:16px; display:flex; gap:8px; align-items:flex-start; line-height:1.6}
.co-submit-note svg{width:15px; height:15px; flex-shrink:0; margin-top:2px; color:var(--muted)}

/* ---- SUMMARY column (right) ---- */
.co-aside{position:sticky; top:calc(var(--head-h) + 22px); display:flex; flex-direction:column; gap:var(--gap)}
.summary{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden}
.summary-head{padding:24px 26px; border-bottom:1px solid var(--line); display:flex; align-items:baseline;
  justify-content:space-between; gap:14px}
.summary-head h2{font-size:var(--h-sub)}
.summary-head .count{font-family:var(--ff-mono); font-size:.74rem; font-weight:var(--fw-mono); color:var(--muted); letter-spacing:.04em}

.summary-list{list-style:none; padding:8px 0; margin:0; max-height:none}
.summary-item{display:flex; gap:13px; padding:16px 26px; align-items:flex-start}
.summary-item + .summary-item{border-top:1px solid var(--line)}
.summary-item .si-ic{width:38px; height:38px; border-radius:10px; background:#fff; border:1px solid var(--line);
  display:grid; place-items:center; color:var(--orange-ink); flex-shrink:0}
.summary-item .si-ic svg{width:18px; height:18px}
.summary-item .si-main{min-width:0; flex:1}
.summary-item .si-name{font-size:.9rem; font-weight:600; color:var(--ink); line-height:1.35}
.summary-item .si-meta{font-family:var(--ff-mono); font-weight:var(--fw-mono); font-size:.68rem; color:var(--muted); letter-spacing:.02em;
  margin-top:5px; line-height:1.5; word-break:break-word}
.summary-item .si-remove{border:none; background:none; cursor:pointer; color:var(--muted); width:26px; height:26px;
  display:grid; place-items:center; border-radius:7px; flex-shrink:0; transition:.15s}
.summary-item .si-remove:hover{background:var(--grey-2); color:var(--ink)}
.summary-item .si-remove svg{width:15px; height:15px}

.summary-foot{padding:20px 26px; border-top:1px solid var(--line); background:#fff}
.summary-foot .no-price{display:flex; gap:11px; align-items:flex-start; font-size:.82rem; color:var(--ink-2); line-height:1.55}
.summary-foot .no-price svg{width:17px; height:17px; flex-shrink:0; margin-top:1px; color:var(--orange-ink)}
.summary-foot .add-more{display:inline-flex; align-items:center; gap:7px; margin-top:16px; font-size:.85rem;
  font-weight:500; color:var(--ink-2)}
.summary-foot .add-more:hover{color:var(--ink)}
.summary-foot .add-more svg{width:15px; height:15px}

/* empty summary state */
.summary-empty{padding:34px 26px; text-align:center}
.summary-empty .se-ic{width:50px; height:50px; border-radius:14px; background:#fff; border:1px solid var(--line);
  display:grid; place-items:center; margin:0 auto 16px; color:var(--muted)}
.summary-empty .se-ic svg{width:24px; height:24px}
.summary-empty p{font-size:.88rem; color:var(--muted); margin:0 auto 18px; max-width:34ch; line-height:1.6}

/* small help card under the summary — support line */
.co-help{background:var(--ink); color:rgba(255,255,255,.66); border-radius:var(--radius-lg); padding:24px 26px}
.co-help h3{color:#fff; font-size:var(--h-sub); margin-bottom:6px}
.co-help p{font-size:.84rem; line-height:1.6; margin:0 0 16px; color:rgba(255,255,255,.6); max-width:none}
.co-help .hl-line{display:flex; gap:10px; align-items:center; font-size:.86rem; margin-bottom:10px; color:rgba(255,255,255,.86)}
.co-help .hl-line:last-child{margin-bottom:0}
.co-help .hl-line svg{width:16px; height:16px; color:var(--orange); flex-shrink:0}
.co-help .hl-line a{color:#fff}
.co-help .hl-line a:hover{color:var(--orange)}

/* ---- SUCCESS state (replaces the grid after submit) ---- */
.co-success{display:none; max-width:680px; margin:0 auto; text-align:center}
.co-success.show{display:block}
.co-success .su-ic{width:74px; height:74px; border-radius:50%; background:var(--orange-wash); color:var(--orange-ink);
  display:grid; place-items:center; margin:0 auto 28px}
.co-success .su-ic svg{width:36px; height:36px}
.co-success h2{font-size:var(--h-section); margin-bottom:18px}
.co-success .su-lede{font-size:1.08rem; color:var(--ink-2); line-height:1.7; margin:0 auto 30px; max-width:52ch}
.co-success .su-lede b{color:var(--ink); font-weight:600}
.co-ref{display:inline-flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-pill); padding:10px 20px; font-size:.86rem; color:var(--ink-2); margin-bottom:34px}
.co-ref .mono{color:var(--ink); font-weight:600}
.co-ref .dot{width:7px; height:7px; border-radius:50%; background:var(--orange); flex-shrink:0}
.su-next{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:0 auto 38px; text-align:left; max-width:680px}
.su-next .nx{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px}
.su-next .nx .n{font-family:var(--ff-mono); font-size:.72rem; font-weight:var(--fw-mono); color:var(--orange-ink); letter-spacing:.06em}
.su-next .nx h4{font-size:var(--h-minor); margin:10px 0 7px}
.su-next .nx p{font-size:.82rem; color:var(--muted); line-height:1.55; margin:0}
.su-cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

/* ---- order details on the confirmation page (quote-only, no pricing) ----
   Rendered by woocommerce/order/order-details.php via the shared
   woocommerce_thankyou hook (see checkout/thankyou.php). Sits directly below
   .co-success at the same 680px measure; everything else reuses the already-
   shipped .card/.detail-card/.table/.vo-* classes from myaccount/view-order.php
   so both quote-detail views share one visual language. */
.ty-details{max-width:680px; margin:34px auto 0; text-align:left}
.ty-details .detail-card + .detail-card{margin-top:20px}
.ty-items .table{margin-top:4px}

@media(max-width:980px){
  .co-grid{grid-template-columns:1fr; gap:var(--gap)}
  .co-aside{position:static; order:-1}
  /* once the form is full-width, stack the two-up field pairs too (matches the
     reference .field-row at 980 — never half-width inputs in the 561–980 band) */
  .co-block{grid-template-columns:1fr}
  .co-form .co-block .form-row-first,
  .co-form .co-block .form-row-last{grid-column:1 / -1}
}
@media(max-width:560px){
  .su-next{grid-template-columns:1fr}
}

/* ============================================================
   MY ACCOUNT  — owner: cart/checkout/account area
   Ported 1:1 from account.html inline <style> (signed-out login
   card + signed-in dashboard: tabs, status pills, "My quotes"
   cards, account details, rep card, downloads). Native my-account
   forms keep the shared .input / .btn styling from site.css.
   ============================================================ */

/* ---- page header band — one idea, lots of air ---- */
.acc-head{padding:clamp(40px,6vw,72px) 0 0}
.acc-head .eyebrow{margin-bottom:18px}
.acc-head h1{margin-bottom:16px}
.acc-head .lede{margin-bottom:0}

/* shared panel header used across account endpoints */
.panel-head{max-width:620px; margin-bottom:var(--gap-lg)}
.panel-head h2{font-size:var(--h-section); margin-bottom:10px}
.panel-head p{color:var(--muted); font-size:.96rem; margin:0}

/* ---- SIGNED-OUT — login card + context column ---- */
.signin-layout{display:grid; grid-template-columns:1.05fr .95fr; gap:var(--gap-lg); align-items:start}

/* the login card itself */
.login-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(28px,3.4vw,40px)}
.login-card .lc-head{margin-bottom:26px}
.login-card .lc-head h2{font-size:var(--h-sub); margin-bottom:8px}
.login-card .lc-head p{color:var(--muted); font-size:.94rem; margin:0}
.login-row{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:-4px 0 8px}
.login-row .label{margin-bottom:0}
.login-row a{font-size:.83rem; color:var(--orange-ink); font-weight:500}
.login-row a:hover{color:#a45a0f}

/* remember-me — calm custom checkbox */
.checkrow{display:flex; align-items:center; gap:11px; margin:4px 0 24px; cursor:pointer; user-select:none}
.checkrow input{position:absolute; opacity:0; width:0; height:0}
.checkrow .box{width:20px; height:20px; border:1.5px solid var(--line-2); border-radius:6px; background:#fff;
  display:grid; place-items:center; flex-shrink:0; transition:.2s var(--ease)}
.checkrow .box svg{width:13px; height:13px; color:#fff; opacity:0; transform:scale(.6); transition:.2s var(--ease)}
.checkrow input:checked + .box{background:var(--orange); border-color:var(--orange)}
.checkrow input:checked + .box svg{opacity:1; transform:scale(1)}
.checkrow input:focus-visible + .box{outline:2px solid var(--orange-ink); outline-offset:2px}
.checkrow span{font-size:.88rem; color:var(--ink-2)}

.login-foot{margin-top:24px; padding-top:22px; border-top:1px solid var(--line); text-align:center}
.login-foot p{font-size:.88rem; color:var(--muted); margin:0 auto}
.login-foot a{color:var(--orange-ink); font-weight:500}
.login-foot a:hover{color:#a45a0f}

/* context column — "request access" rationale, calm list */
.access-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(26px,3.2vw,36px); height:100%}
.access-card .eyebrow{margin-bottom:18px}
.access-card h3{font-size:var(--h-sub); margin-bottom:12px}
.access-card > p{color:var(--muted); font-size:.94rem; line-height:1.7; margin-bottom:26px}
.access-list{list-style:none; display:flex; flex-direction:column; gap:18px; margin:0 0 28px}
.access-list li{display:flex; gap:14px; align-items:flex-start}
.access-list .ai{width:38px; height:38px; border-radius:10px; background:#fff; border:1px solid var(--line);
  color:var(--ink); display:grid; place-items:center; flex-shrink:0}
.access-list .ai svg{width:19px; height:19px}
.access-list .at b{display:block; color:var(--ink); font-size:.94rem; font-weight:600; margin-bottom:3px}
.access-list .at span{display:block; color:var(--muted); font-size:.86rem; line-height:1.6}
.access-card .ac-foot{padding-top:24px; border-top:1px solid var(--line)}
.access-card .ac-foot p{font-size:.86rem; color:var(--muted); margin:0 0 14px; line-height:1.65}

/* ---- SIGNED-IN — dashboard ---- */
.dash-head{padding:clamp(40px,6vw,72px) 0 0}
.dash-greet{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap}
.dash-greet .dg-left{min-width:0}
.dash-greet .eyebrow{margin-bottom:16px}
.dash-greet h2{margin-bottom:10px; font-size:var(--h-page)}
.dash-greet .dg-sub{color:var(--muted); font-size:1rem; margin:0}
.dash-greet .dg-sub b{color:var(--ink-2); font-weight:600}
.signout-btn{font-family:inherit; font-size:.9rem; font-weight:500; color:var(--ink); cursor:pointer;
  background:#fff; border:1.5px solid var(--line-2); border-radius:var(--radius-sm); padding:11px 18px;
  display:inline-flex; align-items:center; gap:8px; min-height:44px; transition:.2s var(--ease)}
.signout-btn:hover{border-color:var(--ink); background:var(--surface)}
.signout-btn svg{width:16px; height:16px}

/* tabs — calm segmented control */
.dash-tabs{display:flex; gap:4px; margin-top:clamp(32px,4vw,46px); border-bottom:1px solid var(--line);
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none}
.dash-tabs::-webkit-scrollbar{display:none}
.dash-tab{font-family:inherit; font-size:.93rem; font-weight:500; color:var(--muted); cursor:pointer;
  background:none; border:none; border-bottom:2px solid transparent; padding:14px 18px 16px; white-space:nowrap;
  display:inline-flex; align-items:center; gap:9px; transition:color .2s, border-color .2s; margin-bottom:-1px; text-decoration:none}
.dash-tab svg{width:17px; height:17px}
.dash-tab:hover{color:var(--ink)}
.dash-tab.active{color:var(--ink); border-bottom-color:var(--orange)}
.dash-tab .tcount{font-family:var(--ff-mono); font-size:.68rem; font-weight:var(--fw-mono); background:var(--grey);
  color:var(--ink-2); border-radius:20px; padding:2px 8px; line-height:1.5}
.dash-tab.active .tcount{background:var(--orange-wash); color:var(--orange-ink)}

.tabpanel{padding-top:clamp(36px,4.6vw,56px)}
.tabpanel .panel-head{max-width:620px; margin-bottom:var(--gap-lg)}
.tabpanel .panel-head h2{font-size:var(--h-section); margin-bottom:10px}
.tabpanel .panel-head p{color:var(--muted); font-size:.96rem; margin:0}

/* ---- status pill (quote requests / downloads) ---- */
.status{display:inline-flex; align-items:center; gap:7px; font-family:var(--ff-mono); font-weight:var(--fw-mono); font-size:.68rem;
  font-weight:var(--fw-mono); letter-spacing:.04em; text-transform:uppercase; padding:5px 11px; border-radius:7px; white-space:nowrap}
.status .d{width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0}
.status.quoted{background:#eef6f0; color:#2f6a45}
.status.review{background:var(--orange-wash); color:var(--orange-ink)}
.status.draft{background:var(--grey); color:var(--ink-2)}
.status.closed{background:#f3f1ee; color:var(--muted)}

/* ---- quote request list ---- */
.qr-list{display:flex; flex-direction:column; gap:16px}
.qr-item{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px clamp(22px,2.4vw,30px);
  display:grid; grid-template-columns:1fr auto; gap:18px 28px; align-items:start;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease)}
.qr-item:hover{border-color:var(--line-2); box-shadow:var(--shadow-sm)}
.qr-main{min-width:0}
.qr-top{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px}
.qr-ref{font-family:var(--ff-mono); font-size:.78rem; font-weight:var(--fw-mono); color:var(--ink); letter-spacing:.02em}
.qr-date{font-size:.8rem; color:var(--muted)}
.qr-item h3{font-size:var(--h-sub); margin-bottom:8px; line-height:1.3}
.qr-item .qr-items{font-size:.88rem; color:var(--muted); line-height:1.6; margin:0}
.qr-side{display:flex; flex-direction:column; align-items:flex-end; gap:14px; text-align:right}
.qr-meta{font-family:var(--ff-mono); font-weight:var(--fw-mono); font-size:.72rem; color:var(--muted); letter-spacing:.03em}
.qr-link{font-size:.85rem; font-weight:600; color:var(--orange-ink); display:inline-flex; align-items:center; gap:6px}
.qr-link:hover{color:#a45a0f}
.qr-link svg{width:15px; height:15px; transition:transform .25s var(--ease)}
.qr-link:hover svg{transform:translateX(3px)}

/* empty-ish helper / CTA strip after the list */
.qr-cta{margin-top:var(--gap-lg); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px clamp(22px,2.6vw,32px); display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap}
.qr-cta .qc-txt b{display:block; color:var(--ink); font-size:1.02rem; font-weight:600; margin-bottom:4px}
.qr-cta .qc-txt span{font-size:.9rem; color:var(--muted)}

/* ---- account details ---- */
.details-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:var(--gap-lg); align-items:start}
.detail-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(26px,3vw,34px)}
.detail-card h3{font-size:var(--h-sub); margin-bottom:6px}
.detail-card .dc-sub{color:var(--muted); font-size:.88rem; margin:0 0 24px}
.dl{display:grid; grid-template-columns:1fr; gap:0; margin:0}
.dl-row{display:flex; justify-content:space-between; align-items:baseline; gap:18px; padding:15px 0;
  border-bottom:1px solid var(--line)}
.dl-row:last-child{border-bottom:none}
.dl-row dt{font-size:.82rem; color:var(--muted); font-weight:500; flex-shrink:0}
.dl-row dd{font-size:.92rem; color:var(--ink); font-weight:500; text-align:right; word-break:break-word; margin:0}
.detail-card .dc-foot{margin-top:24px; padding-top:22px; border-top:1px solid var(--line)}
.verified{display:inline-flex; align-items:center; gap:7px; font-size:.82rem; color:#2f6a45; font-weight:600}
.verified svg{width:16px; height:16px}

/* contact / rep mini-card */
.rep-card{background:var(--ink); color:rgba(255,255,255,.66); border-radius:var(--radius); padding:clamp(26px,3vw,34px)}
.rep-card .eyebrow{color:rgba(255,255,255,.6); margin-bottom:18px}
.rep-card h3{color:#fff; font-size:var(--h-sub); margin-bottom:6px}
.rep-card .rc-role{font-size:.85rem; color:rgba(255,255,255,.55); margin:0 0 22px}
.rep-line{display:flex; align-items:flex-start; gap:11px; margin-bottom:14px; font-size:.9rem}
.rep-line svg{width:16px; height:16px; color:var(--orange); flex-shrink:0; margin-top:3px}
.rep-line a{color:#fff}
.rep-line a:hover{color:var(--orange)}
.rep-card .rc-hours{font-size:.82rem; color:rgba(255,255,255,.45); margin:18px 0 0; padding-top:18px;
  border-top:1px solid rgba(255,255,255,.1)}

/* ---- downloads (IFU / CE-IVDR docs) ---- */
.dl-list{display:flex; flex-direction:column; gap:14px}
.doc-row{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px clamp(20px,2.2vw,26px);
  display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease)}
.doc-row:hover{border-color:var(--line-2); box-shadow:var(--shadow-sm)}
.doc-ic{width:46px; height:46px; border-radius:11px; background:var(--surface); border:1px solid var(--line);
  color:var(--ink); display:grid; place-items:center; flex-shrink:0}
.doc-ic svg{width:22px; height:22px}
.doc-info{min-width:0}
.doc-info h3{font-size:var(--h-sub); margin-bottom:6px; line-height:1.3}
.doc-tags{display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-family:var(--ff-mono); font-weight:var(--fw-mono);
  font-size:.7rem; color:var(--muted); letter-spacing:.03em}
.doc-tags .dt-kind{color:var(--orange-ink); font-weight:600; text-transform:uppercase; letter-spacing:.06em}
.doc-tags .sep{opacity:.5}
.doc-dl{display:inline-flex; align-items:center; gap:8px; font-size:.85rem; font-weight:600; color:var(--ink);
  background:#fff; border:1.5px solid var(--line-2); border-radius:var(--radius-sm); padding:10px 16px;
  min-height:42px; white-space:nowrap; transition:.2s var(--ease)}
.doc-dl:hover{border-color:var(--ink); background:var(--surface)}
.doc-dl svg{width:16px; height:16px}
.doc-note{margin-top:var(--gap-lg); display:flex; align-items:flex-start; gap:13px; padding:20px 24px;
  background:var(--orange-wash); border:1px solid #f0dcc1; border-radius:var(--radius)}
.doc-note svg{width:19px; height:19px; color:var(--orange-ink); flex-shrink:0; margin-top:2px}
.doc-note p{font-size:.88rem; color:#7a4a10; line-height:1.65; margin:0; max-width:none}
.doc-note a{color:var(--orange-ink); font-weight:600; text-decoration:underline; text-underline-offset:2px}

/* ---- address overview + formatted-address cards (my-address / view-order) ---- */
.dc-lede{color:var(--muted); font-size:.96rem; line-height:1.65; max-width:64ch; margin:0 0 var(--gap-lg)}
.dc-address{font-style:normal; font-size:.94rem; line-height:1.7; color:var(--ink); margin:0}
.dc-empty{font-size:.92rem; color:var(--muted); line-height:1.6; margin:0}
.detail-card .dc-empty + .dc-foot,
.detail-card .dc-address + .dc-foot{margin-top:22px}
/* equal columns when a grid holds two like-for-like address cards */
.woocommerce-Addresses.details-grid,
.vo-addresses.details-grid{grid-template-columns:1fr 1fr}

/* ---- lost / reset password — single centred card ---- */
.lostpw-layout{max-width:520px; margin:0 auto}
.lostpw-layout .login-card{padding:clamp(28px,3.4vw,40px)}
.lostpw-layout .lc-msg{font-size:.94rem; color:var(--ink-2); line-height:1.7; margin:0}
.lostpw-layout .lc-ok{display:inline-grid; place-items:center; width:52px; height:52px; border-radius:14px;
  background:#eef6f0; color:#2f6a45; margin-bottom:18px}
.lostpw-layout .lc-ok svg{width:26px; height:26px}
.lostpw-layout .login-foot{text-align:left}
.lostpw-layout .login-foot .link-arrow{margin:0}

/* ---- view-order (quote detail) ---- */
.panel-head .ph-back{margin:0 0 16px}
.panel-head .ph-back .link-arrow svg{transform:rotate(180deg)}
.panel-head .ph-back .link-arrow:hover svg{transform:rotate(180deg) translateX(4px)}
.vo-head{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:10px}
.vo-head h2{margin:0}
.vo-detail{display:flex; flex-direction:column; gap:var(--gap)}
.vo-items .table{margin-top:4px}
.vo-table .vo-qty-col,.vo-table .vo-qty{width:120px; white-space:nowrap}
.vo-table .vo-qty{font-family:var(--ff-mono); font-weight:var(--fw-mono); font-size:.88rem; color:var(--ink)}
.vo-table .vo-name a{color:var(--ink); font-weight:600}
.vo-table .vo-name a:hover{color:var(--orange-ink)}
.vo-table .wc-item-meta{list-style:none; margin:8px 0 0; padding:0; font-size:.82rem; color:var(--muted)}
.vo-table .wc-item-meta li{display:flex; gap:6px; margin-top:3px}
.vo-table .wc-item-meta strong{font-weight:600; color:var(--ink-2)}
.vo-table .wc-item-meta p{margin:0}
.vo-note{margin-top:22px; padding-top:20px; border-top:1px solid var(--line)}
.vo-note .vo-note-label{display:block; font-family:var(--ff-mono); font-size:.7rem; font-weight:var(--fw-mono);
  letter-spacing:.07em; text-transform:uppercase; color:var(--muted); margin-bottom:8px}
.vo-note p{font-size:.92rem; color:var(--ink-2); line-height:1.65; margin:0}
.vo-contact{margin-top:20px}
.vo-contact .dl-row dd a{color:var(--orange-ink)}
.vo-timeline{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0}
.vo-tl-item{position:relative; padding:0 0 22px 26px; border-left:1.5px solid var(--line)}
.vo-tl-item:last-child{padding-bottom:0; border-left-color:transparent}
.vo-tl-item::before{content:""; position:absolute; left:-6px; top:4px; width:11px; height:11px; border-radius:50%;
  background:#fff; border:2px solid var(--orange)}
.vo-tl-meta{font-family:var(--ff-mono); font-weight:var(--fw-mono); font-size:.72rem; color:var(--muted); letter-spacing:.02em; margin:0 0 6px}
.vo-tl-text{font-size:.92rem; color:var(--ink-2); line-height:1.65}
.vo-tl-text p{margin:0}

/* responsive */
@media(max-width:900px){
  .signin-layout{grid-template-columns:1fr; gap:32px}
  .access-card{height:auto}
  .details-grid,
  .woocommerce-Addresses.details-grid,
  .vo-addresses.details-grid{grid-template-columns:1fr; gap:28px}
  .qr-item{grid-template-columns:1fr; gap:18px}
  .qr-side{align-items:flex-start; text-align:left; flex-direction:row; justify-content:space-between; width:100%;
    padding-top:16px; border-top:1px solid var(--line)}
}
@media(max-width:560px){
  .dash-greet{flex-direction:column; align-items:flex-start; gap:18px}
  .signout-btn{align-self:flex-start}
  .doc-row{grid-template-columns:auto 1fr; gap:14px}
  .doc-dl{grid-column:1 / -1; justify-content:center}
  .dl-row{flex-direction:column; gap:5px}
  .dl-row dd{text-align:left}
  .qr-side{flex-direction:column; gap:12px}
}

/* ============================================================
   WOOCOMMERCE SYSTEM NOTICES — brand-styled.

   WC prints its own message / error / info notices via
   woocommerce_output_all_notices on cart, checkout, account and the
   login form (login errors, "details saved", "address saved", coupon
   applied, cart/checkout validation, etc). Woo's default green/red
   boxes clash with the calm clinical system, so we restyle them on the
   shared tokens: a left accent rule + faint tint + hairline border +
   the standard radius. Covers BOTH the classic list/div notices and
   the Cart/Checkout *Blocks* notice banner so the storefront stays in
   UNITY whichever cart experience is active. No new colours are
   introduced — orange for success/info, the one system --error for
   errors. (Owned by the final UI review; nothing else styles notices.)
   ============================================================ */
.goffin-woo .woocommerce-message,
.goffin-woo .woocommerce-info,
.goffin-woo .woocommerce-error,
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error,
.woocommerce-cart .woocommerce-message,
.woocommerce-cart .woocommerce-info,
.woocommerce-cart .woocommerce-error,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error{
  list-style:none; margin:0 0 var(--gap); padding:16px 20px 16px 22px;
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--orange);
  border-radius:var(--radius-sm); color:var(--ink-2); font-size:.94rem; line-height:1.6;
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px;
  box-shadow:var(--shadow-sm); position:relative; animation:goffin-notice-in .4s var(--ease-out) both;
}
@keyframes goffin-notice-in{from{opacity:0; transform:translateY(-6px)}to{opacity:1; transform:none}}
@media(prefers-reduced-motion:reduce){
  .goffin-woo .woocommerce-message,.goffin-woo .woocommerce-info,.goffin-woo .woocommerce-error,
  .woocommerce-account .woocommerce-message,.woocommerce-account .woocommerce-info,.woocommerce-account .woocommerce-error,
  .woocommerce-cart .woocommerce-message,.woocommerce-cart .woocommerce-info,.woocommerce-cart .woocommerce-error,
  .woocommerce-checkout .woocommerce-message,.woocommerce-checkout .woocommerce-info,.woocommerce-checkout .woocommerce-error,
  .woocommerce-notices-wrapper .woocommerce-message,.woocommerce-notices-wrapper .woocommerce-info,.woocommerce-notices-wrapper .woocommerce-error{animation:none}
}
/* error variant uses the one system red, faintly tinted */
.goffin-woo .woocommerce-error,
.woocommerce-account .woocommerce-error,
.woocommerce-cart .woocommerce-error,
.woocommerce-checkout .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-error{
  background:var(--error-wash); border-color:#f3d2cd; border-left-color:var(--error); color:var(--ink-2);
  flex-direction:column; align-items:flex-start; gap:8px;
}
.goffin-woo .woocommerce-error li,
.woocommerce-account .woocommerce-error li,
.woocommerce-cart .woocommerce-error li,
.woocommerce-checkout .woocommerce-error li,
.woocommerce-notices-wrapper .woocommerce-error li{list-style:none; margin:0; width:100%}
.goffin-woo .woocommerce-error li strong,
.woocommerce-account .woocommerce-error li strong,
.woocommerce-cart .woocommerce-error li strong,
.woocommerce-checkout .woocommerce-error li strong{color:var(--error)}
/* the inline action button some notices carry (e.g. "View cart") → ghost button language */
.goffin-woo .woocommerce-message .button,
.goffin-woo .woocommerce-info .button,
.woocommerce-account .woocommerce-message .button,
.woocommerce-cart .woocommerce-message .button,
.woocommerce-checkout .woocommerce-message .button,
.woocommerce-notices-wrapper .woocommerce-message .button{
  margin-left:auto; display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font-family:inherit; font-weight:500; font-size:.86rem; line-height:1; padding:10px 16px; min-height:40px;
  border-radius:var(--radius-sm); border:1.5px solid var(--line-2); background:#fff; color:var(--ink);
  transition:border-color .2s var(--ease-out), background .2s var(--ease-out), transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.goffin-woo .woocommerce-message .button:hover,
.woocommerce-account .woocommerce-message .button:hover,
.woocommerce-cart .woocommerce-message .button:hover,
.woocommerce-checkout .woocommerce-message .button:hover,
.woocommerce-notices-wrapper .woocommerce-message .button:hover{
  border-color:var(--ink); background:var(--paper); transform:translateY(-2px); box-shadow:var(--shadow-sm);
}
.goffin-woo .woocommerce-message a:not(.button),
.woocommerce-account .woocommerce-message a:not(.button),
.woocommerce-cart .woocommerce-message a:not(.button),
.woocommerce-checkout .woocommerce-message a:not(.button),
.woocommerce-notices-wrapper .woocommerce-message a:not(.button),
.goffin-woo .woocommerce-info a,.woocommerce-account .woocommerce-info a,
.woocommerce-cart .woocommerce-info a,.woocommerce-checkout .woocommerce-info a,
.woocommerce-notices-wrapper .woocommerce-info a{color:var(--orange-ink); font-weight:600;
  text-decoration:underline; text-underline-offset:2px; text-decoration-color:var(--line-2)}
.goffin-woo .woocommerce-message a:not(.button):hover,
.woocommerce-account .woocommerce-message a:not(.button):hover,
.woocommerce-cart .woocommerce-message a:not(.button):hover,
.woocommerce-checkout .woocommerce-message a:not(.button):hover,
.woocommerce-notices-wrapper .woocommerce-info a:hover{text-decoration-color:var(--orange)}

/* Cart / Checkout BLOCKS notice banner — same brand language */
.wc-block-components-notice-banner{
  margin:0 0 var(--gap) !important; padding:16px 20px !important;
  background:var(--surface) !important; border:1px solid var(--line) !important;
  border-left:3px solid var(--orange) !important; border-radius:var(--radius-sm) !important;
  color:var(--ink-2) !important; box-shadow:var(--shadow-sm);
}
.wc-block-components-notice-banner.is-error{
  background:var(--error-wash) !important; border-color:#f3d2cd !important; border-left-color:var(--error) !important;
}
.wc-block-components-notice-banner .wc-block-components-notice-banner__content{color:var(--ink-2)}
.wc-block-components-notice-banner svg{fill:var(--orange-ink)}
.wc-block-components-notice-banner.is-error svg{fill:var(--error)}

/* PDP accordion bodies (e.g. "Information" / meer_informatie raw content): the
   migrated body sometimes opens with a heading/empty node carrying a large top
   margin, leaving a visible gap under the accordion header. Trim it. */
.acc-body .inner > :first-child{margin-top:0}
.acc-body .inner > p:empty,.acc-body .inner > br:first-child{display:none}

/* WooCommerce core absolutely-positions its notice glyph at left:1.5em, which
   lands on top of the first characters of our flex-laid-out notice (padding is
   22px, not 1.5em). The orange left border already carries the signal, so drop
   the glyph rather than reserving space no other notice needs. */
.goffin-woo .woocommerce-error::before,
.woocommerce-account .woocommerce-error::before,
.woocommerce-cart .woocommerce-error::before,
.woocommerce-checkout .woocommerce-error::before,
.woocommerce-notices-wrapper .woocommerce-error::before,
.goffin-woo .woocommerce-message::before,
.woocommerce-checkout .woocommerce-message::before,
.woocommerce-notices-wrapper .woocommerce-message::before,
.goffin-woo .woocommerce-info::before,
.woocommerce-checkout .woocommerce-info::before,
.woocommerce-notices-wrapper .woocommerce-info::before{content:none}

/* --- validation notices must not reflow the checkout ---
   WooCommerce injects its error list as the FIRST child of form.checkout, and
   that form IS the two-column grid. The notice therefore claimed column one and
   pushed every step block into the narrow second column: submit an incomplete
   form and the whole layout jumped sideways. Spanning it across both columns
   keeps the grid intact and puts the summary where it belongs — directly above
   the fields it is talking about. */
.co-grid > .woocommerce-error,
.co-grid > .woocommerce-message,
.co-grid > .woocommerce-info,
.co-grid > .woocommerce-NoticeGroup,
form.checkout > .woocommerce-error,
form.checkout > .woocommerce-message,
form.checkout > .woocommerce-info,
form.checkout > .woocommerce-NoticeGroup{
  grid-column:1 / -1;
  margin-bottom:0;   /* the grid's own row-gap already spaces it; adding margin doubled it */
}

/* The quote list applies quantity changes by itself (main.js), so the manual
   update button is redundant. Hidden only when that script is running. */
html.goffin-cart-auto [name="update_cart"]{display:none}