/* Public storefront styles. Shared components live in base.css. */
.skip-link{position:absolute;left:-999px;top:8px;z-index:100;padding:8px 12px;background:var(--surface-solid);border-radius:var(--r-md)}
.skip-link:focus{left:8px}

/* Announcement bar (settings → Storefront). Sits above the sticky header, so it scrolls away with the page. */
.announce{border-bottom:1px solid var(--border);background:var(--surface-2);font-size:var(--fs-sm)}
.announce__inner{display:flex;align-items:center;gap:var(--s-3);padding-block:8px}
.announce p{margin:0;flex:1;color:var(--text)}
.announce a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.announce__close{flex:none;display:inline-flex;padding:4px;border:0;border-radius:var(--r-sm);background:transparent;color:inherit;cursor:pointer}
.announce__close:hover{background:var(--surface-3)}
.announce--info{background:var(--info-bg);border-color:rgba(95,216,255,.3)}
.announce--success{background:var(--success-bg);border-color:rgba(59,232,176,.3)}
.announce--warning{background:var(--warning-bg);border-color:rgba(255,194,75,.3)}
.announce--danger{background:var(--danger-bg);border-color:rgba(255,107,129,.3)}

/* Header */
.site-header{position:sticky;top:0;z-index:50;border-bottom:1px solid transparent;border-image:var(--grad-aurora) 1;border-image-slice:0 0 1 0;background:var(--surface-1)}
.site-header__inner{display:flex;align-items:center;gap:var(--s-4);min-height:var(--header-h)}
.logo{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:var(--fs-lg);letter-spacing:-.02em;color:var(--text);text-decoration:none!important}
/* Owner's wordmark (ADR-036): 698×120 source shown at 30 px (≈175 px wide) in the 64 px header, 25 px on phones so the
   header row keeps its height next to the tools, 34 px in the footer. Height-driven, width auto: never distorted. */
.logo__img{flex:none;height:30px;width:auto;max-width:none;object-fit:contain}
.logo--footer .logo__img{height:34px}
@media (max-width:599px){.site-header .logo__img{height:25px}}
/* Narrow phones: the wordmark is ~5.8× as wide as tall, so 25 px (145 px wide) pushed the tools onto their own row
   below 362 px. 22 px + a 12 px gap keeps logo and tools on one row down to 350 px, 18 px below that (1.2 wrapped under 337 px). */
@media (max-width:379px){.site-header .logo__img{height:22px}.site-header__inner{column-gap:var(--s-3)}}
@media (max-width:349px){.site-header .logo__img{height:18px}}
.site-nav{display:none;gap:var(--s-2);align-items:center}
.site-nav>a,.site-nav summary{display:inline-flex;align-items:center;gap:4px;padding:8px 12px;border-radius:var(--r-md);color:var(--text-2);font-weight:600;font-size:var(--fs-sm);text-decoration:none!important;cursor:pointer}
.site-nav>a:hover,.site-nav summary:hover{background:var(--surface-2);color:var(--text)}
.mega{position:relative}
.mega__panel{position:absolute;top:calc(100% + 8px);left:0;min-width:560px;padding:var(--s-4);display:grid;grid-template-columns:1fr 200px;gap:var(--s-4);z-index:60}
.mega__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:2px}
.mega__list a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-md);color:var(--text);text-decoration:none!important;font-size:var(--fs-sm)}
.mega__list a:hover{background:var(--surface-hover)}
.mega__list a small{margin-left:auto;color:var(--text-muted)}
.mega__list svg{color:var(--accent)}
/* v1.5.1 (owner: "the All products page is a very important part of the site"): "All products" is the Products
   menu's first entry, a full-width row above the category grid (layout: .mega__panel > a.mega__all[data-nav-all]). */
.mega__all{grid-column:1/-1;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-md);border:1px solid var(--border);background:var(--surface-2);color:var(--text);font-weight:700;font-size:var(--fs-sm);text-decoration:none!important}
.mega__all:hover,.mega__all:focus-visible{background:var(--surface-hover)}
.mega__all small{margin-left:auto;color:var(--text-2);font-weight:500}
.mega__all svg{color:var(--accent);flex:none}
.mobile-nav a[data-nav-all]{font-weight:700;color:var(--text)}
.mega__promo{display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:var(--s-4);border-radius:var(--r-md);background:var(--grad-aurora-soft);border:1px solid var(--border);color:var(--text);text-decoration:none!important}
.site-search{position:relative;flex:1;display:flex;align-items:center;max-width:520px;margin-left:auto}
.site-search input{min-height:40px;padding-right:44px;border-radius:var(--r-pill)}
.site-search button{position:absolute;right:2px;top:2px;min-height:36px;width:40px;padding:0}
.site-search__suggest{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--surface-solid);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-3);overflow:hidden;z-index:70}
.site-search__suggest a{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;color:var(--text);text-decoration:none!important;font-size:var(--fs-sm);border-bottom:1px solid var(--divider)}
.site-search__suggest a:hover,.site-search__suggest a.is-active{background:var(--surface-hover)}
.site-search__suggest .mono{color:var(--text-muted)}
.site-tools{display:flex;align-items:center;gap:var(--s-2);margin-left:auto}
/* The header's VAT toggle is a desktop control; the mobile nav carries its own copy (same class since ADR-070's frozen
   markup), so the hide is scoped to the header tools and never removes the phone's only VAT switch. */
.site-tools .vat-toggle{display:none}
.cart-link{position:relative;display:inline-flex;padding:8px;border-radius:var(--r-md);color:var(--text)}
.cart-link:hover{background:var(--surface-2)}
.cart-link__count{position:absolute;top:0;right:0;min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pill);background:var(--grad-aurora);color:var(--text-on-accent);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.nav-toggle{padding:0 8px}
.mobile-nav .container{display:flex;flex-direction:column;padding-block:var(--s-3)}
.mobile-nav a{padding:12px 4px;border-bottom:1px solid var(--divider);color:var(--text);font-weight:600;text-decoration:none!important}
@media (min-width:1024px){
  .site-nav{display:flex}.site-tools .vat-toggle{display:inline-flex}.nav-toggle{display:none}.site-search{margin-left:0}.site-tools{margin-left:0}
}
/* The search keeps its own full-width row until the header really has room beside it. The nav appears at 1024, but
   between 1024 and 1199 the logo (~175px), the nav (~361px) and the tools (market pill + VAT toggle + cart, ~303px)
   left the field 90px — four characters of placeholder, and a part number unreadable while it is being typed. 1024 is
   an iPad in landscape, so this was a real device, not a corner of the resize range. */
@media (max-width:1199px){.site-search{max-width:none;order:3;flex-basis:100%;min-width:220px}.site-header__inner{flex-wrap:wrap;padding-block:8px}}
@media (max-width:1023px){.mobile-nav .prefs{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);padding-block:var(--s-3)}}
/* The open phone menu lives inside the sticky header, so a menu taller than the screen could never be scrolled into
   view: on a 375×667 or 360×780 phone its last row — the market link and the only VAT toggle — sat below the bottom
   edge at every scroll position (v1.5.1 review). The menu scrolls on its own instead; site.js sets
   --mobile-nav-offset to the menu's distance from the header top when it opens (7rem is the phone header's height). */
@media (max-width:1023px){.mobile-nav{max-height:calc(100vh - var(--mobile-nav-offset,7rem));max-height:calc(100dvh - var(--mobile-nav-offset,7rem));overflow-y:auto;overscroll-behavior:contain}}
/* v1.3: site.js focuses a flash notice on load so screen readers announce it; the focus itself needs no ring. */
.flash:focus{outline:none}

/* Hero */
.hero{position:relative;padding-block:var(--s-8) var(--s-7);overflow:hidden}
.hero h1{font-size:var(--fs-hero);max-width:16ch;margin-bottom:var(--s-4)}
.hero p.lead{font-size:var(--fs-md);color:var(--text-2);max-width:56ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-5)}
/* Search-first hero (storefront.hero.showSearch): one big MPN field, the CTAs drop to secondary below it.
   Reuses .site-search so site.js's suggest dropdown works here with no extra script. */
.hero-search{max-width:620px;margin-top:var(--s-5);gap:var(--s-2)}
.hero-search input{min-height:52px;font-size:var(--fs-md);padding-right:var(--s-4)}
.hero-search button{position:static;width:auto;min-height:52px;padding:0 var(--s-5)}
@media (max-width:599px){.hero-search{flex-wrap:wrap}.hero-search button{width:100%}.hero-search button span{display:inline}}
.ticker{display:inline-flex;flex-wrap:wrap;gap:var(--s-3) var(--s-4);margin-top:var(--s-6);padding:10px 16px;border-radius:var(--r-pill);border:1px solid var(--border);background:var(--surface-1);font-size:var(--fs-sm);color:var(--text-2)}
.ticker strong{color:var(--text)}
.ticker .dot{color:var(--success);box-shadow:var(--glow-success)}
@media (min-width:1024px){.hero{padding-block:var(--s-9) var(--s-8)}}

/* Photographic backdrop (ADR-037). The owner's own data-centre photograph sits behind the hero (or behind the whole
   site) under a scrim whose opacity is MEASURED, not eyeballed: --scrim-l is the opacity where the text sits and is
   never below .70, the level at which the brightest pixel of the photo still leaves 7.2:1 for --text and 4.6:1 for
   --text-2 (I61, test/backdrop.test.js re-reads these numbers). --scrim-r may be lighter because only the photo is
   there — on narrow screens, where the text runs the full width, the right side is clamped back to --scrim-l. */
.hero--photo{isolation:isolate;padding-block:var(--s-9) var(--s-8)}
.hero__media{position:absolute;inset:0;z-index:-1;overflow:hidden;background:var(--bg-0)}
.hero__photo{width:100%;height:100%;object-fit:cover;object-position:62% 45%}
.hero__scrim{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(3,5,12,var(--scrim-l)) 0%,rgba(3,5,12,var(--scrim-l)) 34%,rgba(3,5,12,var(--scrim-r)) 100%),
  linear-gradient(180deg,rgba(3,5,12,.5) 0%,rgba(3,5,12,0) 26%,rgba(5,7,15,.72) 84%,var(--bg-0) 100%)}
.hero--tone-soft{--scrim-l:.86;--scrim-r:.68}
.hero--tone-balanced{--scrim-l:.74;--scrim-r:.46}
.hero--tone-bold{--scrim-l:.7;--scrim-r:.34}
/* The hero text and the glass ticker gain a little more separation from a photograph than from flat colour. */
.hero--photo h1,.hero--photo .lead{text-shadow:0 1px 24px rgba(3,5,12,.55)}
.hero--photo .ticker{background:rgba(10,14,28,.62);backdrop-filter:blur(8px)}
@media (max-width:899px){
  /* One column: the copy crosses the whole band, so the lighter right-hand side would put text over bare photo —
     the horizontal layer goes flat at --scrim-l instead. The crop moves to the lit aisle (the floor was measured
     against the brightest pixel in the frame, so a brighter crop costs no contrast) and the top shadow lifts, or the
     only part of the photograph a phone shows would be the part the shadow covers. */
  .hero__scrim{background:
    linear-gradient(180deg,rgba(3,5,12,.22) 0%,rgba(3,5,12,0) 18%,rgba(5,7,15,.62) 88%,var(--bg-0) 100%),
    linear-gradient(90deg,rgba(3,5,12,var(--scrim-l)) 0%,rgba(3,5,12,var(--scrim-l)) 100%)}
  .hero__photo{object-position:76% 42%}
  .hero--photo{padding-block:var(--s-7) var(--s-6)}
}
/* Photo behind every page: fixed, and darker (--text-muted also lands on it; .90 keeps its worst pixel at 5.4:1). */
.page-photo{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none;contain:strict}
.page-photo__img{width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.page-photo::after{content:'';position:absolute;inset:0;background:rgba(3,5,12,.9)}
/* The glow is atmosphere over flat colour; over a photograph it turns to haze, so it steps back. */
.has-page-photo .aurora span{opacity:.24}
.has-page-photo .aurora .ribbon{opacity:.04}
@media print{.hero__media,.page-photo{display:none!important}}

/* Category tiles */
.tiles{display:grid;gap:var(--s-3);grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr))}
.tile{display:flex;flex-direction:column;gap:6px;padding:var(--s-4);border-radius:var(--r-lg);background:var(--surface-1);border:1px solid var(--border);color:var(--text);text-decoration:none!important;transition:transform var(--dur),border-color var(--dur),background var(--dur)}
.tile:hover{transform:translateY(-2px);border-color:var(--border-accent);background:var(--surface-2)}
.tile svg{color:var(--accent);width:26px;height:26px}
.tile strong{font-size:var(--fs-base)}
.tile small{color:var(--text-muted)}
.tiles--brands{grid-template-columns:repeat(auto-fill,minmax(min(100%,160px),1fr))}

/* Steps / trust */
.steps{counter-reset:step}
.step{position:relative;padding-left:56px}
.step::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;background:var(--grad-aurora);color:var(--text-on-accent)}
.trust{display:grid;gap:var(--s-3);grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.trust li{list-style:none;display:flex;gap:10px;align-items:flex-start;color:var(--text-2);font-size:var(--fs-sm)}
.trust svg{flex:none;color:var(--success)}

/* Catalog */
.catalog{display:grid;gap:var(--s-5);grid-template-columns:minmax(0,1fr)}
@media (min-width:1024px){.catalog{grid-template-columns:264px minmax(0,1fr)}}
.filters{align-self:start}
@media (min-width:1024px){.filters{position:sticky;top:calc(var(--header-h) + 16px)}}
.filters details{border-bottom:1px solid var(--divider);padding:10px 0}
.filters summary{font-weight:600;font-size:var(--fs-sm);color:var(--text);display:flex;justify-content:space-between}
.filters .options{display:flex;flex-direction:column;gap:6px;padding-top:8px;max-height:260px;overflow:auto}
.filters .check{font-size:var(--fs-sm)}
.filters .check small{margin-left:auto;color:var(--text-muted)}
.filters-toggle{display:inline-flex}
@media (min-width:1024px){.filters-toggle{display:none}.filters-drawer{display:block!important}}
.toolbar{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center;justify-content:space-between;margin-bottom:var(--s-4)}
.toolbar select{min-height:36px;padding:4px 32px 4px 10px;width:auto;font-size:var(--fs-sm)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--s-4)}
.product-grid{display:grid;gap:var(--s-3);grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
.pcard{display:flex;flex-direction:column;gap:8px;padding:var(--s-4);background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-lg);color:var(--text);text-decoration:none!important;transition:border-color var(--dur),background var(--dur)}
.pcard:hover{border-color:var(--border-accent);background:var(--surface-2)}
.pcard .mono{font-size:var(--fs-xs);color:var(--text-muted)}
.pcard h3{font-size:var(--fs-base);font-weight:600;margin:0;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard .specs{display:flex;flex-wrap:wrap;gap:4px}
.pcard .specs span{font-size:var(--fs-xs);padding:2px 8px;border-radius:var(--r-pill);background:var(--surface-3);color:var(--text-2)}
.pcard__foot{margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end;gap:8px}
.pcard .price{font-size:var(--fs-lg)}
.pcard .price--sub{display:block}
.ptable td.title a{font-weight:600}
.ptable .mono{color:var(--text-muted);font-size:var(--fs-xs)}

/* Product page */
.product{display:grid;gap:var(--s-5);grid-template-columns:1fr}
@media (min-width:900px){.product{grid-template-columns:7fr 5fr;align-items:start}.buybox{position:sticky;top:calc(var(--header-h) + 16px)}}
.product__title{font-size:var(--fs-2xl)}
.product__ids{display:flex;flex-wrap:wrap;gap:var(--s-3);color:var(--text-muted);font-size:var(--fs-sm);margin-bottom:var(--s-4)}
.spec-table th{width:40%;color:var(--text-muted);font-weight:500;text-align:left;padding:8px 12px;border-bottom:1px solid var(--divider)}
.spec-table td{padding:8px 12px;border-bottom:1px solid var(--divider)}
.buybox .price--lg{display:block}
.buybox .stamp{font-size:var(--fs-xs);color:var(--text-muted);display:flex;gap:6px;align-items:center;margin-top:8px}
.buybox .stamp button{background:none;border:0;color:var(--text-link);cursor:pointer;padding:0;display:inline-flex}
.breaks td,.breaks th{padding:6px 10px;font-size:var(--fs-sm)}
.breaks .save{color:var(--success);font-size:var(--fs-xs)}
.stockline{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-3);align-items:center;margin:var(--s-3) 0;font-size:var(--fs-sm);color:var(--text-2)}
.buy-actions{display:flex;gap:var(--s-2);align-items:stretch;margin-top:var(--s-3)}
.buy-actions .btn{flex:1}
.price-hold{margin-top:var(--s-3);font-size:var(--fs-xs);color:var(--text-muted)}

/* Cart / checkout */
.cart-layout{display:grid;gap:var(--s-5);grid-template-columns:1fr}
@media (min-width:900px){.cart-layout{grid-template-columns:minmax(0,1fr) 360px;align-items:start}.summary{position:sticky;top:calc(var(--header-h) + 16px)}}
/* ADR-068: a configured server from an older cart — name, "sold by quote" and the quote link stacked in one block, so
   the phone's stacked table (base.css .table--stack, a flex row per cell) never squeezes or clips the link. */
.cart-config{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.cart-config .btn{white-space:normal;text-align:left}
@media (max-width:699px){.table--stack td.cart-config__cell{display:block;text-align:left}.table--stack td.cart-config__cell::before{content:none}}
/* Same trap, the ORDINARY product line: an item cell holds the name, the MPN, a partial-stock line, the "only sold in
   US" notice with its 44px switch buttons and a price-change note. As flex ROW children those became narrow columns
   beside each other on a phone (name right-aligned in ~160px, MPN broken over two lines in ~94px, buttons clipped).
   `display:block` stacks them; the data-label stays, on its own line. Cart, quote and bulk-check item cells share it. */
@media (max-width:699px){
  .table--stack td.line-cell{display:block;text-align:left}
  .table--stack td.line-cell::before{display:block}
}
.summary dl{display:grid;grid-template-columns:1fr auto;gap:6px 12px;margin:0}
.summary dt{color:var(--text-2)}
.summary dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.summary .total dt,.summary .total dd{font-weight:700;font-size:var(--fs-md);color:var(--text);padding-top:8px;border-top:1px solid var(--border)}
/* Delivered-total estimator inside the summary (orders.showDeliveredTotal). The <dl> is fenced off from the
   controls above it; the grand-total rule above still owns the heavier rule inside the list. */
.estimate .field{margin-bottom:var(--s-2)}
.estimate select{width:100%}
.estimate .check{display:flex;align-items:center;gap:var(--s-2)}
.estimate>dl{margin-top:var(--s-4);padding-top:var(--s-4);border-top:1px solid var(--border)}
.estimate>p{margin:var(--s-2) 0 0}
.checkout fieldset{border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s-4) var(--s-5);margin:0 0 var(--s-4);background:var(--surface-1)}
.checkout legend{padding:0 8px;font-weight:700}
.checkout .cols{display:grid;gap:0 var(--s-4);grid-template-columns:1fr}
@media (min-width:640px){.checkout .cols{grid-template-columns:1fr 1fr}}
.paycard{display:flex;gap:12px;padding:12px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface-sunken);margin-bottom:8px;cursor:pointer}
.paycard:has(input:checked){border-color:var(--border-accent);box-shadow:0 0 0 1px var(--border-accent)}
.paycard input{margin-top:4px}
.paycard small{display:block;color:var(--text-muted)}
.vies{margin-top:6px;font-size:var(--fs-xs)}
.vies.ok{color:var(--success)}.vies.warn{color:var(--warning)}.vies.bad{color:var(--danger)}

/* Order status */
.status-rail{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin:var(--s-4) 0}
@media (max-width:599px){.status-rail{grid-template-columns:1fr;gap:2px}.status-rail li{text-align:left;padding:6px 0 6px 12px;border-left:3px solid var(--surface-3)}.status-rail li::before{display:none}.status-rail li.done{border-left-color:var(--accent)}}
.status-rail li{list-style:none;text-align:center;font-size:var(--fs-xs);color:var(--text-muted);position:relative;padding-top:14px}
.status-rail li::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;border-radius:3px;background:var(--surface-3)}
.status-rail li.done::before{background:var(--grad-aurora)}
.status-rail li.done{color:var(--text)}
.timeline{list-style:none;margin:0;padding:0}
.timeline li{padding:10px 0 10px 20px;border-left:2px solid var(--divider);position:relative;font-size:var(--fs-sm)}
.timeline li::before{content:"";position:absolute;left:-6px;top:16px;width:10px;height:10px;border-radius:50%;background:var(--accent)}
.timeline time{display:block;color:var(--text-muted);font-size:var(--fs-xs)}

/* Bulk quote */
.bulk textarea{font-family:var(--font-mono);min-height:200px}
.bulk .summary-bar{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-5);padding:var(--s-3) var(--s-4);border-radius:var(--r-md);background:var(--surface-2);border:1px solid var(--border);margin:var(--s-4) 0;font-size:var(--fs-sm)}

/* Configurator */
.cfg{display:grid;gap:var(--s-5);grid-template-columns:1fr}
@media (min-width:1100px){.cfg{grid-template-columns:200px minmax(0,1fr) 360px;align-items:start}.cfg__rail,.cfg__summary{position:sticky;top:calc(var(--header-h) + 16px)}}
@media (max-width:1099px){.cfg__rail{display:none}}
.cfg__rail ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.cfg__rail a{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--r-md);color:var(--text-2);font-size:var(--fs-sm);text-decoration:none!important}
.cfg__rail a.is-done{color:var(--text)}
.cfg__rail a.is-done::before{content:"✓";color:var(--success);font-weight:700}
.cfg__rail a:not(.is-done)::before{content:"○";color:var(--text-muted)}
.cfg-section{margin-bottom:var(--s-5)}
.cfg-section h2{display:flex;align-items:center;gap:10px;font-size:var(--fs-lg)}
.cfg-section h2 .badge{margin-left:auto}
.opt-table td.pick{width:44px}
.opt-table .qty input{width:70px;min-height:36px;padding:4px 8px}
.cfg__summary ul{list-style:none;margin:0;padding:0}
.cfg__summary li{display:flex;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px solid var(--divider);font-size:var(--fs-sm)}
.cfg__summary li span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}
.cfg__summary .total{font-size:var(--fs-xl);font-weight:800;margin:var(--s-3) 0}
.meter{height:10px;border-radius:5px;background:var(--surface-3);overflow:hidden;margin:6px 0}
.meter span{display:block;height:100%;background:var(--grad-aurora);transition:width var(--dur)}
.meter.is-warn span{background:var(--warning)}.meter.is-over span{background:var(--danger)}
.issues li{list-style:none;padding:8px 10px;border-radius:var(--r-md);margin-bottom:6px;font-size:var(--fs-sm)}
.issues .error{background:var(--danger-bg);color:var(--danger)}
.issues .warning{background:var(--warning-bg);color:var(--warning)}
.issues .info{background:var(--info-bg);color:var(--info)}
.cfg-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px var(--s-4);background:var(--surface-3);border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);backdrop-filter:blur(14px)}
@media (min-width:1100px){.cfg-bar{display:none}}

/* Footer */
.site-footer{margin-top:var(--s-8);padding-block:var(--s-7) var(--s-5);border-top:1px solid var(--divider);background:linear-gradient(180deg,transparent,rgba(5,7,15,.8))}
.site-footer__grid{display:grid;gap:var(--s-5);grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.site-footer h4{font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:var(--s-3)}
.site-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.site-footer ul a{color:var(--text-2)}
.site-footer__bottom{display:flex;flex-wrap:wrap;gap:var(--s-3);justify-content:space-between;margin-top:var(--s-6);padding-top:var(--s-4);border-top:1px solid var(--divider)}

/* Prose pages */
.prose{max-width:72ch}
.prose h2{margin-top:var(--s-6)}
.prose ul,.prose ol{padding-left:1.2em}
.prose li{margin-bottom:6px;color:var(--text-2)}
/* ADR-070 — the VAT display switches in place. Every VAT-dependent figure is rendered twice ([data-vat-show]) and the
   attribute on <html> shows one; site.js flips it without a reload. The second rule is the safe side for a document
   without the attribute (the excl. figure, the B2B default), so a figure is never printed twice. */
html[data-vat="incl"] [data-vat-show="excl"],html[data-vat="excl"] [data-vat-show="incl"]{display:none!important}
html:not([data-vat]) [data-vat-show="incl"]{display:none!important}
.vat-pair,.vat-label{white-space:nowrap}