/* Brand typefaces from the Aquamatix Brand Book (2023-05): Glacial Indifference for headings, Assistant for text.
   Self-hosted (no Google Fonts request: LG München 2022). Files converted from the brand-book sources, OFL licence
   next to them. Both faces ship Regular + Bold only, so headings use weight 400/700, never 600/800. */
@font-face{font-family:'Glacial Indifference';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/GlacialIndifference-Regular.woff2) format('woff2')}
@font-face{font-family:'Glacial Indifference';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/GlacialIndifference-Bold.woff2) format('woff2')}
@font-face{font-family:'Assistant';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/Assistant-Regular.woff2) format('woff2')}
@font-face{font-family:'Assistant';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/Assistant-Bold.woff2) format('woff2')}

/* Aquamatix — one stylesheet, no framework. Palette from the logo blue; amber only on buy buttons. */
:root{
  /* Aquamatix Brand Book 2023-05: Purple Haze #262444 + white. Neutrals are tints of the brand colour; the one
     warm accent (amber) is reserved for buy and quote actions. */
  --ink:#262444; --ink-2:#565187; --ink-3:#656479; --rule:#DFDEE8; --paper:#FFFFFF; --panel:#F4F4F8; --panel-2:#EAEAF0;
  --crit:#B3261E; --crit-soft:#FBE4E2; --warn:#7C5C22; --warn-soft:#FBEFD2; --ok-soft:#E3F1E7;
  --brand:#262444; --brand-2:#3A3766; --aqua:#565187; --aqua-line:#9E9BC0; --aqua-soft:#EEEDF4; --buy:#EDAC4B; --star:#7C5C22; --buy-2:#D9962E; --ok:#356249;
  --sans:"Assistant",system-ui,Segoe UI,Arial,sans-serif; --head:"Glacial Indifference","Assistant",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;color-scheme:light}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand)}
h1,h2,h3,h4{font-family:var(--head);line-height:1.15;text-wrap:balance;margin:0 0 .4em;color:var(--ink)}
h1{font-size:clamp(38px,4.8vw,60px);font-weight:400;letter-spacing:-.03em}
h2{font-size:clamp(28px,3vw,40px);font-weight:400;letter-spacing:-.025em;margin-top:1.6em}
h3{font-size:22px;font-weight:400;letter-spacing:-.01em}
p{margin:.5em 0 1em}
.lede{font-size:19px;color:var(--ink-2);max-width:66ch}
.small{font-size:14px;color:var(--ink-3)}
.mono{font-family:ui-monospace,Consolas,monospace;font-size:.92em}
.kicker,.eyebrow{display:block;font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:.17em;text-transform:uppercase;color:var(--aqua);margin:0 0 .9em}
.wrap{max-width:1200px;margin:0 auto;padding:0 22px}
.narrow{max-width:820px}
.note{background:var(--aqua-soft);border-left:3px solid var(--aqua);padding:10px 14px;border-radius:0 6px 6px 0}
.tablewrap{overflow-x:auto;border:1px solid var(--rule);border-radius:8px;background:var(--paper);margin:12px 0 20px}
table{border-collapse:collapse;width:100%;font-size:16px}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--rule);vertical-align:top}
th{font-family:var(--head);font-weight:600;font-size:14px;color:var(--ink-2);background:var(--panel);white-space:nowrap}
tr:last-child td{border-bottom:0}
.tag{display:inline-block;font-family:var(--head);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:var(--aqua-soft);color:var(--brand);padding:3px 8px;border-radius:4px}
.tag.muted{background:var(--panel-2);color:var(--ink-3)}

/* header */
.site-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.bar{display:flex;align-items:center;gap:22px;min-height:84px}
.logo img{width:150px;height:auto}
.main-nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.main-nav a{font-family:var(--sans);font-weight:400;font-size:16px;text-decoration:none;color:var(--ink);padding:10px 2px;margin:0 8px;border-bottom:1px solid transparent;border-radius:0}
.main-nav a:hover{border-bottom-color:var(--ink)}
.main-nav a.cta{background:var(--ink);color:#fff;padding:10px 18px;margin-left:10px;border-radius:3px;border-bottom:0;font-weight:700}
.main-nav a.cta:hover{background:var(--brand-2)}
.lang{display:flex;gap:2px;font-family:var(--head);font-size:13px;font-weight:600}
.lang a{text-decoration:none;color:var(--ink-2);padding:11px 10px;border-radius:5px;min-width:44px;text-align:center}
.lang a[aria-current]{color:var(--brand);background:var(--aqua-soft)}
@media (max-width:1080px){.bar{gap:14px}.main-nav a{padding:8px 9px;font-size:14px}}
@media (max-width:860px){.bar{flex-wrap:wrap;padding:10px 22px}.main-nav{order:3;width:100%;margin-left:0;gap:0}.main-nav a{padding:7px 6px;margin:0 4px;font-size:14px}.main-nav a.cta{padding:8px 14px;margin-left:4px}.lang{margin-left:auto}.lang a{min-width:38px;padding:11px 6px}.logo img{width:130px}}

/* hero */
.hero{background:linear-gradient(180deg,var(--panel) 0%,var(--paper) 100%);border-bottom:1px solid var(--rule)}
.hero-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;padding:48px 22px}
.hero h1{font-size:clamp(34px,4.6vw,52px)}
.hero-visual{border-radius:14px;box-shadow:0 20px 50px -25px rgba(21,34,56,.45);object-fit:cover;aspect-ratio:4/3}
@media (max-width:820px){.hero-grid{grid-template-columns:1fr;padding:32px 22px}.hero-visual{order:-1}}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0}
.btn{display:inline-block;font-family:var(--sans);font-weight:700;font-size:16px;text-decoration:none;background:var(--ink);color:#fff;padding:12px 22px;border-radius:3px;border:2px solid var(--ink);cursor:pointer;transition:background .2s,transform .2s}
.btn:hover{transform:translateY(-2px)}
.btn:hover{background:var(--brand-2);border-color:var(--brand-2)}
.btn.ghost{background:transparent;color:var(--brand)}
.btn.ghost:hover{background:var(--aqua-soft)}
.trust{list-style:none;padding:0;margin:8px 0 0;display:flex;gap:18px;flex-wrap:wrap;font-size:14px;color:var(--ink-2)}
.trust li::before{content:"✓";color:var(--ok);font-weight:700;margin-right:6px}

/* product cards */
.group{margin:44px 0}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--rule);border-radius:6px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 38px -20px rgba(21,34,56,.45);border-color:var(--aqua-line)}
.card img{transition:transform .35s ease}
.card:hover img{transform:scale(1.035)}
/* price and stock on a shop card: without them it is a catalogue, not a shop */
.card-buy{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:10px 0 0;
          padding-top:10px;border-top:1px solid var(--rule)}
.card-price{font-family:var(--head);font-weight:700;font-size:18px;color:var(--ink)}
.card-stock{font-size:12.5px;color:var(--ok)}
.card-stock.stock-low{color:var(--warn)}
.card-stock.stock-out{color:var(--crit)}
.card-stock::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
                    background:currentColor;margin-right:5px;vertical-align:1px}
/* the header condenses once the page moves */
.site-header{position:sticky;top:0;z-index:50;transition:box-shadow .2s,padding .2s,background .2s}
.site-header.scrolled{box-shadow:0 10px 24px -20px rgba(21,34,56,.55);backdrop-filter:blur(6px)}
/* sections fade in; the class is only added by script, so with no script nothing is ever hidden */
.reveal-on .reveal{opacity:0;transform:translateY(14px)}
.reveal-on .reveal.shown,.reveal-on .shown{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}
.to-top{position:fixed;right:18px;bottom:18px;z-index:60;width:44px;height:44px;border-radius:50%;
        border:1px solid var(--rule);background:var(--paper);color:var(--brand);font-size:20px;cursor:pointer;
        box-shadow:0 10px 24px -14px rgba(21,34,56,.6)}
.to-top:hover{background:var(--aqua-soft)}
@media (prefers-reduced-motion:reduce){
  .card,.card img,.reveal,.site-header{transition:none!important;transform:none!important}
  .reveal-on .reveal{opacity:1}
}
.card img{aspect-ratio:4/3;object-fit:contain;background:#fff;padding:14px}
.card-body{padding:12px 16px 16px;border-top:1px solid var(--rule)}
.card h3{margin:0 0 6px;font-size:24px;font-family:var(--head)}
.card-kicker{font-size:11px!important;text-transform:uppercase;letter-spacing:.12em;color:var(--aqua)!important;font-weight:700;margin:0 0 4px!important}
.card p{margin:0;font-size:14.5px;color:var(--ink-2)}
.card .key{margin-top:6px;font-family:var(--head);font-weight:600;font-size:13px;color:var(--brand)}
.card .tag{margin-top:8px}

/* tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.tile{display:block;background:var(--panel);border-radius:10px;padding:16px 18px;text-decoration:none;color:inherit;border:1px solid transparent}
.tile:hover{border-color:var(--aqua);background:var(--aqua-soft)}
.tile strong{display:block;font-family:var(--head);font-size:17px;margin-bottom:4px;color:var(--brand)}
.tile span{font-size:14.5px;color:var(--ink-2)}
.cta-band{display:flex;gap:28px;align-items:center;justify-content:space-between;background:var(--brand);color:#fff;border-radius:14px;padding:26px 30px;flex-wrap:wrap}
.cta-band h2{color:#fff;margin-top:0}
.cta-band p{color:#DCE3F5;max-width:70ch;margin-bottom:0}
.cta-band .btn{background:#fff;color:var(--brand);border-color:#fff;white-space:nowrap}

/* product page */
.crumbs{font-size:14px;color:var(--ink-3);margin:18px 0 8px}
.crumbs a{color:var(--ink-3);text-decoration:none}
.product-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) 300px;gap:30px;align-items:start;margin:10px 0 30px}
@media (max-width:1000px){.product-top{grid-template-columns:1fr 1fr}.product-top .buy{grid-column:1/-1}}
@media (max-width:640px){.product-top{grid-template-columns:1fr}}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.gallery .hero-img{border:1px solid var(--rule);border-radius:12px;background:#fff}
.gallery img:not(.hero-img){border:1px solid var(--rule);border-radius:8px;aspect-ratio:1;object-fit:cover}
/* every picture is a button: thumbnails swap the large image, the large image opens full screen */
.gallery button{all:unset;display:block;cursor:pointer;border-radius:12px}
.gallery .hero-btn{grid-column:1/-1;cursor:zoom-in}
.gallery .hero-btn img{width:100%;height:auto;display:block;aspect-ratio:1;object-fit:contain}
.gallery .thumb img{width:100%;height:auto;display:block;transition:border-color .15s}
.gallery .thumb:hover img,.gallery .thumb.active img{border-color:var(--brand)}
.gallery button:focus-visible{outline:3px solid var(--aqua-line);outline-offset:2px}
.zoombox{position:fixed;inset:0;z-index:1000;background:rgba(10,14,30,.92);display:flex;align-items:center;justify-content:center;padding:24px}
.zoombox img{max-width:min(92vw,1400px);max-height:88vh;object-fit:contain;background:#fff;border-radius:8px}
.zoombox button{all:unset;cursor:pointer;color:#fff;font-size:44px;line-height:1;padding:10px 16px;border-radius:8px}
.zoombox button:hover{background:rgba(255,255,255,.12)}
.zoombox button:focus-visible{outline:3px solid #fff}
.zoombox .zb-close{position:absolute;top:12px;right:16px}
.zoombox .zb-prev{position:absolute;left:10px;top:50%;transform:translateY(-50%)}
.zoombox .zb-next{position:absolute;right:10px;top:50%;transform:translateY(-50%)}
.product-intro h1{margin-bottom:.3em}
.apps{list-style:none;padding:0;margin:14px 0;display:flex;gap:10px;flex-wrap:wrap}
.apps li{display:flex;align-items:center;gap:8px;background:var(--panel);border-radius:999px;padding:5px 12px 5px 6px;font-size:14px;font-weight:600}
.apps img{width:28px;height:28px;object-fit:contain;border-radius:50%;background:#fff}
.formerly{margin-top:14px}
.buy{background:var(--panel);border:1px solid var(--rule);border-radius:14px;padding:20px;position:sticky;top:84px}
.buy.muted{background:var(--panel-2)}
.buy h2{font-size:18px;margin:0 0 8px}
.buy .btns{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.amz{display:inline-block;text-align:center;font-family:var(--head);font-weight:700;font-size:15px;text-decoration:none;color:var(--ink);background:#fff;border:1px solid var(--rule);padding:10px 14px;border-radius:8px}
.amz:hover{border-color:var(--buy);background:#FFF6E8}
.amz.primary{background:var(--buy);border-color:var(--buy);color:#1a1a1a;font-size:17px;padding:13px 14px}
.amz.primary:hover{background:var(--buy-2);border-color:var(--buy-2)}
.amz.small{font-size:14px;padding:10px 14px;margin:3px 5px 3px 0;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.amz.ghost{background:transparent}
.rating{margin:0 0 6px;font-size:14.5px;color:var(--ink-2)}
.stars{color:var(--star);letter-spacing:1px}
.buy .trust{flex-direction:column;gap:4px;margin-top:10px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin:28px 0;align-items:start}
@media (max-width:760px){.split{grid-template-columns:1fr}}
.features{padding-left:0;list-style:none}
.features li{padding:8px 0 8px 30px;border-bottom:1px solid var(--rule);position:relative}
.features li::before{content:"✓";position:absolute;left:4px;color:var(--aqua);font-weight:800}
.tile:hover{border-color:var(--aqua-line)}
.links{padding-left:18px}
.links li{margin:6px 0}
.labels{padding-left:22px}
.labels li{margin:4px 0}
.specs table{table-layout:fixed;width:100%}
.specs table th{width:42%;white-space:normal}
.specs th,.specs td{overflow-wrap:anywhere;hyphens:auto}
.drawing{max-width:min(640px,100%);height:auto;border:1px solid var(--rule);border-radius:10px;padding:10px;background:#fff}
.back{margin:30px 0 50px}

/* manual */
.manual-grid{display:grid;grid-template-columns:250px minmax(0,1fr);gap:40px;margin:20px auto 60px}
@media (max-width:820px){.manual-grid{grid-template-columns:minmax(0,1fr)}.side{order:2}}
.side{position:sticky;top:84px;align-self:start}
.side h2{font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin:20px 0 8px}
.side ol{list-style:none;padding:0;margin:0;border-left:2px solid var(--rule)}
.side a{display:block;padding:7px 12px;text-decoration:none;color:var(--ink-2);font-size:15px;margin-left:-2px;border-left:2px solid transparent}
.side a:hover{color:var(--brand)}
.side a[aria-current]{color:var(--brand);border-left-color:var(--brand);font-weight:600}
.doc{max-width:74ch}
.doc h3{margin-top:1.4em}
.doc img{margin:14px 0;border:1px solid var(--rule);border-radius:8px;background:#fff}
.doc figure{margin:14px 0}
.doc table{font-size:15px}
.doc td{padding:8px 10px}
.doc p.note{margin:6px 0 14px}
.doc ul,.doc ol{padding-left:22px}

/* faq */
.faq details{border-bottom:1px solid var(--rule);padding:6px 0}
.faq summary{cursor:pointer;font-family:var(--head);font-weight:700;font-size:17px;padding:10px 0;list-style:none;position:relative;padding-right:30px}
.faq summary::after{content:"+";position:absolute;right:6px;top:8px;color:var(--aqua);font-size:22px;font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq details>div{padding:0 0 14px;color:var(--ink-2);max-width:72ch}

/* stores, spares, forms, contact */
.stores{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:20px 0 34px}
.store{display:block;background:var(--panel);border:1px solid var(--rule);border-radius:10px;padding:14px;text-decoration:none;color:inherit;text-align:center}
.store:hover{border-color:var(--buy);background:#FFF6E8}
.store strong{display:block;font-family:var(--head)}
.store span{font-size:13px;color:var(--ink-3)}
.spares td:first-child{white-space:nowrap}
.form{background:var(--panel);border-radius:12px;padding:20px;margin:24px 0}
.form label{display:block;font-family:var(--head);font-weight:600;font-size:14px;margin-bottom:12px}
.form input{display:block;width:100%;font:inherit;padding:10px 12px;border:1px solid var(--rule);border-radius:8px;margin-top:4px;background:#fff}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin:20px 0 50px}
@media (max-width:640px){.contact-grid{grid-template-columns:1fr}}
.contact-grid h2{font-size:16px;margin-top:.6em}
.names td:first-child{white-space:nowrap}

/* footer */
.site-footer{margin-top:60px;background:var(--panel);border-top:1px solid var(--rule);padding:36px 0 30px;font-size:15px}
.cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:26px}
@media (max-width:760px){.cols{grid-template-columns:1fr 1fr}}
.site-footer a{display:block;color:var(--ink-2);text-decoration:none;margin:4px 0}
.site-footer a:hover{color:var(--brand)}
.site-footer p a{display:inline}
.site-footer img{margin-bottom:10px}
:focus-visible{outline:3px solid var(--aqua);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}


/* ---- added after the pre-launch review, 2026-09-06 ---- */
/* Mobile: name and buy button before the photo gallery, and a button always in reach. */
@media (max-width:640px){
  .product-top{display:flex;flex-direction:column}
  .product-top .product-intro{order:1}
  .product-top .gallery{order:2}
  .product-top .buy{order:3;position:static}
  .product-intro h1{font-size:30px}
  .apps{gap:6px}
  .apps li{font-size:13px;padding:4px 10px 4px 5px}
  body{padding-bottom:74px}
  .sticky-buy{position:fixed;left:0;right:0;bottom:0;z-index:30;background:rgba(255,255,255,.96);
    backdrop-filter:blur(8px);border-top:1px solid var(--rule);padding:10px 14px;
    box-shadow:0 -6px 20px -12px rgba(21,34,56,.5)}
  .sticky-buy .amz{display:block;width:100%}
}
@media (min-width:641px){ .sticky-buy{display:none} }

/* Fewer buttons at rest: the three most likely markets, the rest one click away. */
.more-markets{margin:-4px 0 10px}
.more-markets summary{cursor:pointer;font-family:var(--head);font-weight:600;font-size:14px;color:var(--brand);
  padding:9px 4px;list-style:none;display:flex;align-items:center;gap:6px;min-height:44px}
.more-markets summary::-webkit-details-marker{display:none}
.more-markets summary::after{content:"▾";font-size:12px;color:var(--ink-3)}
.more-markets[open] summary::after{content:"▴"}
.more-markets .btns{margin-top:2px}

/* Pre-purchase check and box contents: the two blocks that prevent returns. */
.check{background:var(--aqua-soft);border-left:3px solid var(--aqua-line);padding:12px 16px;
  border-radius:0 8px 8px 0;margin:14px 0 0;font-size:15.5px;max-width:74ch}
.check strong{font-family:var(--head);color:var(--brand);display:block;margin-bottom:2px}
.inbox{margin:26px 0}
.inbox p{max-width:74ch}

/* Manual sidebar label is not a heading any more. */
.side-label{font-family:var(--head);font-size:14px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);margin:20px 0 8px}


/* ---- direct selling: parts list, basket, checkout ---- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.basket-link{position:relative;display:inline-flex;align-items:center;gap:6px;text-decoration:none;
  color:var(--ink);font-family:var(--head);font-weight:600;font-size:15px;padding:9px 11px;border-radius:6px;min-height:44px}
.basket-link:hover{background:var(--panel)}
/* Anything a script hides must stay hidden, whatever display its own rule sets. Without this the
   empty basket badge showed as an orange dot on every page, as if something were in the basket. */
[hidden]{display:none !important}
.basket-link .badge{background:var(--buy);color:#1a1a1a;border-radius:999px;font-size:12px;font-weight:700;
  min-width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}

.parts{display:grid;gap:14px;margin:22px 0 8px}
.part{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:20px;background:var(--panel);
  border:1px solid var(--rule);border-radius:12px;padding:18px 20px;align-items:center}
.part.muted{background:var(--panel-2)}
.part-body h3{margin:0 0 2px;font-size:18px}
.part-body p{margin:4px 0}
.part-buy{text-align:right}
.part.has-img{grid-template-columns:120px minmax(0,1fr) 230px}
.pack-row{margin-top:12px;padding-top:10px;border-top:1px solid var(--line,#E2E6EE);display:grid;gap:6px;font-size:14px}
.pack-row .btn{width:100%;padding:9px 16px;font-size:15px}
.part-img{width:120px;height:120px;object-fit:cover;border-radius:8px;background:#F4F6FA}
.part-buy .btn{width:100%;margin-top:8px}
.price{font-family:var(--head);font-weight:800;font-size:24px;color:var(--ink);line-height:1.1}
.price .small{font-weight:400;font-size:13px;color:var(--ink-3);display:block;margin-top:2px}
.stock{margin:4px 0 8px;color:var(--ok)}
.stock::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:currentColor;margin-right:6px;vertical-align:1px}
.stock-low{color:var(--warn)}
.stock-out{color:var(--crit)}
.btn:disabled,.btn[aria-disabled="true"]{background:#E4E7EE;border-color:#E4E7EE;color:#5A6173;cursor:not-allowed}
.part-buy input:disabled{opacity:.5}
.qty input{width:100%;font:inherit;padding:9px 10px;border:1px solid var(--rule);border-radius:8px;
  background:#fff;text-align:center;min-height:44px}
.buy-btn{background:var(--buy);border-color:var(--buy);color:#1a1a1a}
.buy-btn:hover{background:var(--buy-2);border-color:var(--buy-2)}
.btn.added{background:var(--ok);border-color:var(--ok);color:#fff}
@media (max-width:640px){.part,.part.has-img{grid-template-columns:1fr}.part-buy{text-align:left}.part-img{width:96px;height:96px}}

.basket{font-size:15px}
.basket td{vertical-align:middle}
.qbtn{font:inherit;min-width:44px;min-height:44px;border:1px solid var(--rule);background:#fff;
  border-radius:7px;cursor:pointer;line-height:1}
.qbtn:hover{border-color:var(--brand)}
.qbtn.rm{border-color:transparent;color:var(--ink-3);font-size:19px}
.qv{display:inline-block;min-width:30px;text-align:center;font-variant-numeric:tabular-nums}
.totals{margin:16px 0 26px;max-width:420px;margin-left:auto}
.totals div{display:flex;justify-content:space-between;gap:20px;padding:7px 0;border-bottom:1px solid var(--rule)}
.totals dt,.totals dd{margin:0}
.totals .grand{font-family:var(--head);font-weight:800;font-size:20px;border-bottom:2px solid var(--ink)}
.totals .small{color:var(--ink-3);font-size:14px;border-bottom:0}
.pill-ok{background:var(--ok-soft,#DFF1E5);color:var(--ok);font-size:12px;padding:2px 7px;border-radius:3px;font-weight:600}

.checkout .f2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.checkout .f2 .wide{grid-column:1/-1}
@media (max-width:600px){.checkout .f2{grid-template-columns:1fr}}
.checkout label{display:block;font-family:var(--head);font-weight:600;font-size:14px;margin:0}
.checkout input,.checkout select{display:block;width:100%;font:inherit;padding:11px 12px;
  border:1px solid var(--rule);border-radius:8px;margin-top:5px;background:#fff;min-height:46px}
.check-line{display:flex;gap:10px;align-items:flex-start;margin:20px 0 6px;font-weight:400;font-family:var(--sans)}
.check-line input{width:22px;height:22px;min-height:22px;margin-top:2px;flex:0 0 auto}
.checkout .buy-btn{margin-top:14px;font-size:17px;padding:15px 26px}
.err{background:var(--crit-soft,#FBE4E2);color:var(--crit,#B3261E);border-left:3px solid currentColor;
  padding:11px 15px;border-radius:0 8px 8px 0;margin:14px 0}
.order-box{background:var(--panel);border:1px solid var(--rule);border-radius:12px;padding:20px 24px;margin:18px 0}
.order-ok{font-family:var(--head);font-weight:700;font-size:19px;color:var(--ok);margin-top:0}
.order-pending{font-family:var(--head);font-weight:700;font-size:18px;color:var(--warn,#9A6400);margin-top:0}
.legal h2{font-size:19px;margin-top:1.8em}
.legal p{font-size:15.5px}

/* Form controls follow the theme through tokens, never a hardcoded colour. */
.qty input,.checkout input,.checkout select,.qbtn{background:var(--panel);color:var(--ink);border-color:var(--rule)}

/* ---------- help hub (symptom -> action) ---------- */
.help-checks ol{padding-left:22px;font-size:16.5px}
.help-checks li{margin:8px 0}
.help-picker .tile{padding:12px 14px}
.help-picker .tile strong{font-size:15.5px;margin:0}
.syms{margin-top:16px}
.sym{background:var(--panel);border:1px solid var(--rule);border-radius:10px;margin:8px 0}
.sym summary{cursor:pointer;padding:14px 18px;font-family:var(--head);font-size:17px;color:var(--brand);list-style:none;display:flex;gap:10px;align-items:center}
.sym summary::before{content:"+";display:inline-block;width:22px;height:22px;border-radius:50%;background:var(--aqua-soft);color:var(--aqua);text-align:center;line-height:22px;font-weight:700;flex:none}
.sym[open] summary::before{content:"\2013"}
.sym-body{padding:0 18px 16px}
.steps{padding-left:20px}
.steps li{margin:10px 0}
.steps li p{margin:4px 0}
.outcome:empty{display:none}
.badge{display:inline-block;font-size:13px;padding:3px 9px;border-radius:999px;font-weight:600}
.badge-free{background:var(--ok-soft,#E3F3E6);color:var(--ok,#1F6F3F)}
.badge-cost{background:var(--aqua-soft);color:var(--aqua)}
.badge-return{background:var(--crit-soft,#FBE4E2);color:var(--crit,#B3261E)}
.btn.small{padding:6px 10px;font-size:13.5px}
.muted{color:var(--ink-2)}
.help-form .grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.help-form label{display:flex;flex-direction:column;gap:4px;font-size:14.5px}
.help-form .span2{grid-column:1/-1}
.help-form input,.help-form select,.help-form textarea{background:var(--panel);color:var(--ink);border:1px solid var(--rule);border-radius:6px;padding:9px 10px;font:inherit;min-height:44px}
.help-form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.note.ok{background:var(--ok-soft,#E3F3E6);border-left-color:var(--ok,#1F6F3F)}
@media (max-width:640px){.help-form .grid2{grid-template-columns:minmax(0,1fr)}}


/* spare-parts finder: model selector + search above the part cards */
.part-finder{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;align-items:end;background:var(--panel);border:1px solid var(--rule);border-radius:10px;padding:14px 16px;margin:14px 0 22px}
.part-finder label{display:flex;flex-direction:column;gap:6px;font-family:var(--head);font-weight:600;font-size:14px}
.part-finder select,.part-finder input{font:inherit;font-family:var(--sans);font-size:16px;padding:10px 12px;border:1px solid var(--rule);border-radius:8px;background:var(--paper);color:var(--ink);min-height:44px}
.part-finder p{grid-column:1/-1;margin:0}
@media (max-width:640px){.part-finder{grid-template-columns:1fr}}


/* =============================== redesign, 26 Sep 2026: "Make room for more" =============================== */
.utility{font-size:12px;letter-spacing:.035em;border-bottom:1px solid var(--rule);padding:7px 0;background:var(--panel)}
.utility .wrap{display:flex;justify-content:space-between;gap:20px}
.utility a{color:var(--ink);text-decoration:none;margin-left:22px}
.utility a:hover{text-decoration:underline}
@media (max-width:760px){.utility{font-size:11px}.utility .links{display:none}}
.text-link{display:inline-flex;gap:14px;align-items:center;border-bottom:1px solid currentColor;padding:8px 0;font-weight:700;text-decoration:none;color:var(--ink)}
.text-link:hover{color:var(--aqua)}
.text-link .arrow,.btn .arrow{transition:transform .2s;margin-left:10px}
.text-link:hover .arrow,.btn:hover .arrow{transform:translateX(5px)}
.section{padding:88px 0}
.section.wash{background:var(--panel)}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:36px}
.section-head h2{margin:0}
.section-head>p{max-width:420px;color:var(--ink-3);margin:0}
.center{text-align:center;margin-top:30px}
.fine-print{font-size:13px;color:var(--ink-3);margin:16px 0 0}
/* hero */
.hero2{position:relative;min-height:640px;overflow:hidden;background:#fafafa}
.hero2 .hero-media{position:absolute;inset:0 0 0 38%;width:62%;height:100%;object-fit:cover;object-position:62% center}
.hero2:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#fff 0%,#fff 30%,#ffffffed 39%,#ffffff60 52%,transparent 64%);pointer-events:none}
.hero2 .wrap{position:relative;z-index:2;min-height:640px;display:flex;align-items:center}
.hero-copy{max-width:570px;padding:60px 0 90px}
.hero2 h1{max-width:560px;font-size:clamp(46px,5.4vw,78px);line-height:1.05}
.hero2 h1 em{font-style:normal;color:var(--aqua)}
.hero-copy .lede{max-width:400px;font-size:20px;color:#535265;margin:24px 0 30px}
.hero-caption{position:absolute;right:5%;bottom:37px;z-index:3;display:flex;align-items:center;gap:16px;background:#fffffff2;border:1px solid #fff;padding:14px 18px;box-shadow:0 8px 35px #26244410;font-size:14px;text-decoration:none;color:var(--ink)}
.hero-caption img{width:90px;height:70px;object-fit:contain;mix-blend-mode:multiply}
.hero-caption strong{font-size:17px;display:block}
.hero-caption small{color:var(--ink-3)}
/* project strip */
.project-strip{display:grid;grid-template-columns:1.3fr repeat(3,1fr);border-bottom:1px solid var(--rule)}
.project-strip>a,.project-strip>div{padding:28px;border-right:1px solid var(--rule);min-height:120px;display:flex;align-items:center;justify-content:space-between;gap:15px;text-decoration:none;color:var(--ink)}
.project-strip>a:last-child{border-right:0}
.project-strip>div{padding-left:0;display:block;font-family:var(--head);font-size:23px;line-height:1.2}
.project-strip>div small{display:block;font:700 12px var(--sans);letter-spacing:.12em;text-transform:uppercase;margin-bottom:9px;color:var(--aqua)}
.project-strip>a:hover{background:var(--panel)}
.icon{width:37px;height:37px;fill:none;stroke:currentColor;stroke-width:1.3;flex-shrink:0}
.project-strip span{flex:1}
.project-strip strong{display:block;font-size:17px}
.project-strip a small{color:var(--ink-3)}
/* story */
.story{display:grid;grid-template-columns:1.05fr 1fr;gap:80px;align-items:center}
.story-photo{position:relative;background:#eeedf3;border-radius:6px;overflow:hidden;margin:0}
.story-photo>img{width:100%;aspect-ratio:1.04;object-fit:cover}
.story-photo figcaption{font-size:12px;padding:10px 15px;background:#fff;color:var(--ink-3)}
.story-copy>p{font-size:19px;color:var(--ink-3)}
.mini-points{border-top:1px solid var(--rule);margin:30px 0;padding:0;list-style:none}
.mini-points>div,.mini-points>li{display:flex;gap:25px;align-items:center;padding:16px 0;border-bottom:1px solid var(--rule)}
.mini-points span{color:var(--aqua);font-size:13px;font-weight:700}
.mini-points p{margin:0}
/* how it works */
.how{background:var(--ink);color:#fff}
.how h2,.how .eyebrow{color:#fff}
.how .eyebrow{color:#c8c6da}
.how-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:80px;align-items:center}
.how p{color:#d9d7e6;max-width:420px}
.step-list{list-style:none;padding:0;margin:32px 0 0}
.step-list li{display:grid;grid-template-columns:31px 1fr;gap:22px;padding:16px 0;border-top:1px solid #ffffff26}
.step-list li span{border:1px solid #ffffff50;font-size:13px;width:31px;height:31px;display:grid;place-items:center;border-radius:50%}
.step-list strong{display:block;font:400 22px var(--head);margin-bottom:4px;color:#fff}
.step-list p{margin:0;font-size:16px}
.diagram{background:#ffffff0d;border:1px solid #ffffff26;border-radius:6px;padding:26px}
.diagram img{width:100%;height:auto;border-radius:4px;background:#fff}
/* compare table */
.compare{overflow:auto;border:1px solid var(--rule);border-radius:5px;background:#fff}
.compare table{border-collapse:collapse;width:100%;min-width:700px;text-align:left;font-size:16px}
.compare th,.compare td{padding:19px 21px;border-bottom:1px solid var(--rule);background:transparent}
.compare thead th{background:var(--panel);font-family:var(--sans);font-weight:700;color:var(--ink)}
.compare tbody th{font-family:var(--head);font-size:20px;font-weight:400}
.compare tr:last-child td,.compare tr:last-child th{border-bottom:0}
.compare td a{font-weight:700;color:var(--ink)}
/* detail band */
.detail-band{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:70px}
.detail-band>img{max-height:520px;width:100%;object-fit:contain;mix-blend-mode:multiply}
.fact-row{display:flex;gap:45px;border-top:1px solid var(--rule);padding:25px 0}
.fact-row strong{display:block;font:400 40px var(--head)}
.fact-row small{color:var(--ink-3)}
/* resources */
.resource-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}
.resource{border-top:1px solid var(--ink);padding-top:24px}
.resource .icon{margin-bottom:22px}
.resource h3{font-size:25px;margin-bottom:12px}
.resource p{color:var(--ink-3);font-size:17px}
/* faq on the home page */
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:90px}
.faq-grid .faq details>div{padding-right:35px}
/* page title block */
.page-title{padding:52px 0 36px}
.page-title h1{max-width:850px}
.page-title .lede{max-width:640px}
/* catalogue filters */
.filter-bar{display:flex;align-items:center;gap:10px;margin:8px 0 26px;flex-wrap:wrap}
.filter-bar button{font:inherit;padding:10px 18px;border:1px solid var(--rule);border-radius:30px;background:#fff;color:var(--ink);font-size:15px;cursor:pointer;min-height:44px}
.filter-bar button[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.filter-bar input{margin-left:auto;border:1px solid var(--rule);border-radius:4px;padding:10px 15px;max-width:100%;font:inherit;min-height:44px;background:#fff;color:var(--ink)}
.catalog{margin:10px 0 30px}
.cards .card[hidden]{display:none}
.model-name{font-size:18px;color:var(--ink-3);margin:-.2em 0 .8em}
@media (max-width:1050px){.hero2 h1{font-size:60px}.hero-copy{max-width:450px}.hero2 .hero-media{left:35%;width:65%}.project-strip>a,.project-strip>div{padding:22px 15px}.project-strip .icon{display:none}.story,.how-grid,.faq-grid{gap:45px}}
@media (max-width:760px){
  .section{padding:56px 0}
  .hero2,.hero2 .wrap{min-height:unset}.hero2 .wrap{display:block}.hero2{display:flex;flex-direction:column}.hero2:after{display:none}
  .hero2 .hero-media{position:relative;inset:auto;width:100%;height:320px;object-position:64% center;order:2}
  .hero2 .wrap{order:1;background:#fff}.hero-copy{padding:36px 0 30px;max-width:none}.hero2 h1{font-size:50px;max-width:400px}
  .hero-copy .lede{font-size:18px;margin:18px 0 22px}
  .hero-caption{right:16px;bottom:16px;padding:9px 13px;gap:12px;font-size:12px}.hero-caption img{width:60px;height:50px}.hero-caption strong{font-size:15px}
  .project-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.project-strip>a,.project-strip>div{min-height:100px;border-bottom:1px solid var(--rule);padding:18px}.project-strip>div{padding-left:0;font-size:22px;grid-column:1/-1}.project-strip .icon{display:block;width:28px}
  .section-head{align-items:start;flex-direction:column;gap:16px}.section-head>p{max-width:none}
  .story,.how-grid,.detail-band,.faq-grid{grid-template-columns:1fr;gap:32px}.story-copy{order:0}.story-photo{order:1}
  .resource-grid{grid-template-columns:1fr;gap:30px}
  .filter-bar input{margin-left:0;width:100%}
  .fact-row{gap:30px}.fact-row strong{font-size:32px}
}

/* stage 2 */
main>.wrap>h1:first-child{margin-top:48px}
.page-title+.filter-bar{margin-top:0}
.form{border-radius:6px;padding:24px}
.form h2{margin-top:0;font-size:26px}
.form input{border-radius:4px;min-height:46px}
.split .doc{max-width:none}
.doc h2,.doc h3{font-family:var(--head);font-weight:400}
.tile{border-radius:6px}
.tile strong{font-family:var(--head);font-weight:400;font-size:20px}
.buy{border-radius:6px}
.part,.part-finder,.order-box,.note{border-radius:6px}
.cta-band{border-radius:6px}

/* drawings from the Aquamatix installation manual (Silencio rev02, 2025) */
.diagram-cap{font-size:14px!important;color:#d9d7e6;margin:14px 0 0!important;max-width:none!important}
.plan-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:34px;align-items:start}
.manual-fig{margin:0;background:#fff;border:1px solid var(--rule);border-radius:6px;padding:16px}
.manual-fig img{width:100%;height:auto}
.manual-fig figcaption{font-size:13.5px;color:var(--ink-3);margin-top:10px;line-height:1.45}
.rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.rules.all{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:28px}
.rule{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;align-items:start;background:#fff;border:1px solid var(--rule);border-radius:6px;padding:12px}
.rule img{width:96px;height:auto;border:1px solid var(--rule);border-radius:3px;background:#fff}
.rule h3{font-size:18px;margin:0 0 4px}
.rule p{font-size:14.5px;color:var(--ink-3);margin:0;line-height:1.45}
.manual-block{margin:34px 0}
.manual-block .plan-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
@media (max-width:1000px){.rules.all{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.plan-grid,.manual-block .plan-grid{grid-template-columns:1fr}.rules,.rules.all{grid-template-columns:1fr}}
.plan-grid.even{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.manual-fig.chart img{max-height:440px;width:auto;max-width:100%;margin:0 auto;display:block}
.manual-block .plan-grid{grid-template-columns:1fr 1fr}
@media (max-width:760px){.plan-grid.even{grid-template-columns:1fr}}

/* phone-width fixes, 4 Oct 2026 (375 px check): nothing may push the page wider than the screen */
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;margin:12px 0 20px}
.tscroll>table{margin:0}
.project-strip strong,.project-strip small{overflow-wrap:anywhere;hyphens:auto}
.help-form input,.help-form select,.help-form textarea{width:100%;max-width:100%;min-width:0}
@media (max-width:520px){.cta-band .btn{white-space:normal;text-align:center;max-width:100%}}
/* iPhone Safari zooms into any form field under 16 px; max() keeps larger inherited sizes */
input,select,textarea{font-size:max(16px,1em)}
.form input,.form select,.form textarea,.checkout input,.checkout select,.checkout textarea,
.help-form input,.help-form select,.help-form textarea,.qty input,.filter-bar input,.part-finder input,.part-finder select{font-size:max(16px,1em)}
.doc input,.doc select,.doc textarea{max-width:100%}
@media (max-width:520px){h1,h2{overflow-wrap:break-word;hyphens:auto}}
/* Guided help: approved mock E; enhancement leaves the original content available without JS. */
@media (prefers-color-scheme:dark){:root:not([data-theme=light]):has(.help-model){
  --ink:#ECEBF5; --ink-2:#C3C0E3; --ink-3:#A9A7BF; --rule:#38365A; --paper:#17162A; --panel:#211F3A; --panel-2:#2B2948;
  --brand:#C9C6F0; --brand-2:#E0DEF8; --aqua:#B1ADDF; --aqua-line:#5D5994; --aqua-soft:#29274A;
  --crit:#F2958E; --crit-soft:#3D1F25; --warn:#E9C27A; --warn-soft:#3A3020; --ok:#8FCFA6; --ok-soft:#1E3529; --on-brand:#17162A;
}
:root:not([data-theme=light]):has(.help-model) :is(.site-header .logo img,.site-footer img){filter:brightness(0) invert(1);opacity:.92}
}
:root[data-theme=dark]:has(.help-model){
  --ink:#ECEBF5; --ink-2:#C3C0E3; --ink-3:#A9A7BF; --rule:#38365A; --paper:#17162A; --panel:#211F3A; --panel-2:#2B2948;
  --brand:#C9C6F0; --brand-2:#E0DEF8; --aqua:#B1ADDF; --aqua-line:#5D5994; --aqua-soft:#29274A;
  --crit:#F2958E; --crit-soft:#3D1F25; --warn:#E9C27A; --warn-soft:#3A3020; --ok:#8FCFA6; --ok-soft:#1E3529; --on-brand:#17162A;
}

:root[data-theme=dark]:has(.help-model) :is(.site-header .logo img,.site-footer img){filter:brightness(0) invert(1);opacity:.92}

.help-model [hidden]{display:none!important}
.help-model{max-width:948px;padding-bottom:30px}
.help-model>h1{font-size:clamp(28px,calc(1.6vw + 16px),40px);line-height:1.15;margin:8px 0 18px;hyphens:manual}
.help-wizard{max-width:860px;margin:22px auto 0;border:1px solid var(--rule);border-radius:16px;padding:26px 28px;background:var(--paper);overflow-wrap:anywhere}
.help-wizard .ico{width:24px;height:24px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hw-who{display:flex;gap:12px;align-items:center;font-size:15px;color:var(--ink-2);margin-bottom:12px}
.hw-who img{width:48px;height:48px;object-fit:contain;background:var(--panel);border-radius:10px;padding:3px}
.hw-who a{display:inline-flex;align-items:center;min-height:44px}
.help-wizard .hw-question{font-size:26px;font-weight:400;margin:6px 0 10px}
.hw-search{display:flex;align-items:center;gap:10px;background:var(--paper);border:2px solid var(--ink);border-radius:12px;padding:0 14px;min-height:56px}
.hw-search input{width:100%;min-width:0;min-height:52px;background:transparent;border:0;color:var(--ink);font:400 16px var(--sans);padding:8px 0}
.help-wizard .hw-question:focus,.help-wizard .hw-question:focus-visible{outline:none}
.help-wizard{scroll-margin-top:130px}
@media (min-width:861px){.help-wizard{scroll-margin-top:100px}}
.hw-search:focus-within{outline:3px solid var(--aqua);outline-offset:2px}
.help-wizard .hw-search input:focus,.help-wizard .hw-search input:focus-visible{outline:none}
.hw-search input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.hw-clear{display:inline-flex;align-items:center;justify-content:center;flex:none;min-width:44px;min-height:44px;padding:10px;border:0;border-radius:8px;background:transparent;color:var(--ink);cursor:pointer}
.hw-hint{font-size:13px;color:var(--ink-3);margin:10px 2px 0}
.hw-search input::placeholder{color:var(--ink-3);opacity:1}
.hw-matches{border:1px solid var(--rule);border-radius:12px;margin-top:6px;padding:6px}
.hw-match{width:100%;display:flex;gap:10px;align-items:center;min-height:48px;padding:6px 10px;border:0;border-radius:8px;background:var(--paper);color:var(--ink);font:400 16px var(--sans);text-align:left;cursor:pointer}
.hw-match small{margin-left:auto;font-size:13px;color:var(--ink-3)}
.hw-match.on,.hw-match:hover,.hw-match:focus-visible{background:var(--aqua-soft)}
.hw-no-match{margin:6px 10px}
.hw-or{margin:18px 0 0;font-size:15px;color:var(--ink-3);font-weight:700}
.hw-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:16px}
.hw-tile{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-height:118px;padding:16px;border:1px solid var(--rule);border-radius:12px;background:var(--panel);color:var(--ink);font:700 16px/1.25 var(--sans);text-align:left;cursor:pointer}
.help-wizard .hw-tile .ico{width:34px;height:34px;color:var(--ink-2)}
.hw-tile:hover{border-color:var(--ink)}
.hw-tile:active{background:var(--ink);color:var(--paper)}
.hw-tile:active .ico{color:var(--paper)}
.hw-safety{display:flex;gap:10px;align-items:flex-start;background:var(--warn-soft);color:var(--ink);border-radius:12px;padding:12px 14px;font-size:15px;margin-top:16px}
.hw-stepno{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:14px;color:var(--ink-3)}
.hw-progress{display:flex;gap:6px;margin:4px 0 18px}
.hw-progress span{flex:1;height:6px;border-radius:999px;background:var(--panel-2)}
.hw-progress .done{background:var(--ok)}.hw-progress .now{background:var(--ink)}
.hw-drawing{background:var(--panel);border-radius:12px;padding:16px;margin:14px 0}
.hw-drawing>.il{max-width:400px;margin:auto}
.hw-do{font-size:17px;max-width:72ch;line-height:1.5;white-space:pre-line}
.hw-answers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}
:root:has(.help-model) .help-wizard .hw-answers .btn{display:flex;align-items:center;gap:10px;justify-content:flex-start;text-align:left;min-height:64px;padding:10px 14px;line-height:1.25;font-size:15px;border-radius:8px;background:var(--paper);border:1px solid var(--rule);color:var(--ink)}
:root:has(.help-model) .help-wizard .hw-answers .btn:hover{background:var(--paper);border-color:var(--ink)}
.hw-trail{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:16px;font-size:14px}
.hw-chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 10px;background:var(--ok-soft)}
.hw-back{display:inline-flex;align-items:center;gap:6px;font-size:15px;color:var(--ink-2);min-height:44px;margin-top:14px}
.hw-nav{display:flex;flex-wrap:wrap;align-items:center;gap:4px 24px;margin-top:14px}.hw-nav .hw-back{margin-top:0}
.hw-known{background:var(--ok-soft);border-radius:12px;padding:12px 16px;font-size:15px}
.hw-known ul{margin:6px 0 0;padding-left:18px}
.help-wizard .help-form{margin:20px 0 0}.help-wizard .help-form>h2{display:none}
.help-wizard .help-form .lede{display:none}
.help-wizard .help-form textarea[name=message]{field-sizing:content;min-height:7.5em}
.help-form #hf-connected-hint{font-size:13px;display:block;margin-top:2px}
.help-wizard input,.help-wizard select,.help-wizard textarea{min-height:44px}
.help-model .outcome button{min-height:44px}
.help-model .help-form [data-help-result]:not([hidden]){display:block}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.help-wizard :focus-visible{outline:3px solid var(--aqua);outline-offset:3px}
:root:has(.help-model) .site-header{background:var(--paper)}
:root:has(.help-model) .btn,:root:has(.help-model) .main-nav a.cta{color:var(--paper)}
:root:has(.help-model) .btn.ghost{color:var(--ink)}
:root:has(.help-model) .amz{background:var(--panel);color:var(--ink)}
:root:has(.help-model) .help-facts th{font-weight:700}
@media (max-width:900px){.hw-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){
 .help-wizard{scroll-margin-top:168px}
 .help-model{padding-left:16px;padding-right:16px}
 .help-wizard{padding:18px 16px}.help-wizard .hw-question{font-size:22px}
 .hw-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.hw-tile{min-height:104px}
 .hw-answers{grid-template-columns:1fr}.hw-match{display:grid;grid-template-columns:24px 1fr;column-gap:10px;align-items:start}.hw-match small{grid-column:2;margin-left:0}
 .help-wizard .pc{grid-template-columns:1fr}.help-wizard .pc>div+div{border-left:0;padding-left:0;border-top:1px dashed var(--rule);padding-top:12px}
 .hw-drawing{padding:8px}.help-wizard .il .tm{font-size:17px}
 .help-facts tr,.help-facts th,.help-facts td{display:block;white-space:normal}
 .help-facts th{border-bottom:0;padding-bottom:3px}.help-facts td{padding-top:3px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.help-wizard *{transition:none!important;animation:none!important}.help-wizard .btn:hover{transform:none}}
.help-wizard .il{width:100%;height:auto;display:block;font-family:var(--sans)}.help-wizard .il .ln{stroke:var(--ink-3);stroke-width:1.5;fill:none}.help-wizard .il .pipe{stroke:var(--aqua);stroke-width:8;fill:none;stroke-linejoin:round;stroke-linecap:round}.help-wizard .il .bad{stroke:var(--crit)}.help-wizard .il .unit{fill:var(--aqua-soft);stroke:var(--ink);stroke-width:2}.help-wizard .il .wall{fill:var(--panel-2);stroke:var(--ink-3);stroke-width:1.2}.help-wizard .il .water{fill:var(--aqua-line);opacity:.55}.help-wizard .il .t{fill:var(--ink);font-size:16px}.help-wizard .il .tb{fill:var(--ink);font-size:17px;font-weight:700}.help-wizard .il .tm{fill:var(--ink-3);font-size:15px}.help-wizard .il .tok{fill:var(--ok);font-size:16px;font-weight:700}.help-wizard .il .tbad{fill:var(--crit);font-size:16px;font-weight:700}.help-wizard .il .okc{fill:var(--ok)}.help-wizard .il .badc{fill:var(--crit)}.help-wizard .il .hot{fill:var(--ink)}.help-wizard .il .hott{fill:var(--paper);font-size:20px;font-weight:700}.help-wizard .il .ring{fill:none;stroke:var(--ink);stroke-width:3}.help-wizard .pc{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px}.help-wizard .pc>div+div{border-left:1px dashed var(--rule);padding-left:20px}.help-wizard .il .avv{fill:var(--ok-soft);stroke:var(--ok);stroke-width:1.5}


@media (max-width:640px){.help-wizard .pc{grid-template-columns:1fr}.help-wizard .pc>div+div{border-left:0;padding-left:0;border-top:1px dashed var(--rule);padding-top:12px}.help-wizard .il .tm,.help-wizard .il .t,.help-wizard .il .tok,.help-wizard .il .tbad,.help-wizard .il .tb{font-size:18px}}


.hw-fig{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:20px;align-items:center}
.hw-fig .hw-do{margin:0}.hw-wide{grid-column:1/-1;border-top:1px solid var(--rule);padding-top:12px}
.help-wizard .badge{font-weight:700}.hw-tile[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.help-wizard .hw-tile[aria-pressed=true] .ico{color:var(--paper)}
@media (max-width:640px){.hw-fig{grid-template-columns:minmax(0,1fr)}}

/* Go-live review, 14 Nov 2026: reachable controls and layouts for narrow screens. */
.header-shell{display:flex;align-items:center;gap:18px;min-height:84px;position:sticky;top:0;z-index:50;
  padding-inline:max(22px,calc((100% - 1196px)/2));background:var(--paper);border-bottom:1px solid var(--rule)}
.header-shell.scrolled{box-shadow:0 10px 24px -20px rgba(21,34,56,.55)}
.header-shell .site-header,.header-shell .bar{display:contents}
.header-shell .logo{order:1;flex:none;display:flex;align-items:center;min-height:44px;min-width:44px}
.header-shell .main-nav{order:2;flex-wrap:nowrap;align-items:center;white-space:nowrap}
.header-shell .basket-link{order:3;flex:none;min-height:44px;min-width:44px;justify-content:center;padding:6px}
.header-shell .lang{order:4;flex:none;margin-left:0}
.main-nav a,.lang a{display:inline-flex;align-items:center;justify-content:center;min-height:44px}
.lang a{min-width:44px;padding:8px}
.site-footer a{min-height:44px;display:flex;align-items:center;margin:0;padding:8px 0}
.site-footer p a{display:inline-flex;vertical-align:middle}
ul.links a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;padding:8px 0}
.compare td a{display:inline-flex;align-items:center;min-height:44px}
.utility{letter-spacing:0}
.utility .wrap>span:first-child{min-width:0}
.utility .links{flex:none;white-space:nowrap}
.utility .wrap{align-items:center}
@media (min-width:1061px){.utility{padding:0}.utility .links a{display:inline-flex;align-items:center;min-height:44px;padding-block:12px}}
@media (max-width:1060px){.utility .links{display:none}}
.shop-utility .links{display:none}
.qty-controls{display:inline-flex;align-items:center;white-space:nowrap}
.basket .part-code{white-space:nowrap}
.basket .basket-name{white-space:normal;word-break:normal;overflow-wrap:normal}
.unit-label{display:none}
.checkout .check-line{display:flex;gap:10px;align-items:flex-start;margin:20px 0 6px}
.checkout .check-line input{width:22px;height:22px;min-height:22px;margin-top:2px;padding:0;flex:0 0 22px}
.sticky-buy [hidden]{display:none!important}
@media (min-width:861px) and (max-width:1200px){
 .header-shell{gap:8px;padding-inline:16px}
 .header-shell .logo img{width:120px}
 .header-shell .main-nav{gap:0}
 .main-nav a{font-size:13px;padding:8px 5px;margin:0 2px}
 .main-nav a.cta{padding:8px 10px;margin-left:4px}
 .lang{gap:0}
}
@media (max-width:860px){
 .header-shell{display:contents}
 .header-shell .site-header{display:block;position:sticky;top:0;background:var(--paper)}
 .header-shell .bar{display:flex;flex-wrap:nowrap;gap:6px;min-height:60px;padding:6px 12px}
 .header-shell .logo{margin-right:auto}
 .header-shell .logo img{width:112px}
 .header-shell .basket-link{order:2}
 .header-shell .lang{order:3;gap:0}
 .header-shell .main-nav{display:flex;flex-wrap:nowrap;width:100%;overflow-x:auto;scrollbar-width:none;
   margin:0;padding:0 12px;background:var(--paper);border-bottom:1px solid var(--rule)}
 .header-shell .main-nav.can-scroll-right{mask-image:linear-gradient(90deg,#000 88%,transparent)}
 .header-shell .main-nav::-webkit-scrollbar{display:none}
 .main-nav a{flex:none;font-size:14px;margin:0 4px;padding:8px 6px}
}
@media (max-width:1000px){
 body:has(.sticky-buy){padding-bottom:64px}
 body:has(.sticky-buy) .to-top{bottom:calc(64px + 16px + env(safe-area-inset-bottom,0px))}
 .sticky-buy{display:block;position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--paper);
   border-top:1px solid var(--rule);padding:4px 12px calc(4px + min(env(safe-area-inset-bottom,0px),10px));
   box-shadow:0 -6px 20px -12px rgba(21,34,56,.5)}
 .sticky-buy .btn,.sticky-buy .amz{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;
   padding:6px 10px;margin:0;font-size:14px;line-height:1.2;white-space:normal;text-align:center}
}
@media (min-width:1001px){.sticky-buy{display:none}}
@media (max-width:600px){
 .basket-wrap{overflow:visible;border:0;background:transparent}
 .basket,.basket tbody{display:block;width:100%}
 .basket thead{display:none}
 .basket tr{display:grid;grid-template-columns:auto minmax(0,1fr) 44px;gap:8px;align-items:center;
   margin:12px 0;padding:12px;border:1px solid var(--rule);border-radius:8px;background:var(--paper)}
 .basket td{display:block;padding:0;border:0;min-width:0}
 .basket .basket-name{grid-column:1/-1;grid-row:1;text-align:left}
 .basket .basket-unit{grid-column:1/-1;grid-row:2;text-align:left;font-size:13px;color:var(--ink-3)}
 .basket .unit-label{display:inline}
 .basket .basket-qty{grid-column:1;grid-row:3}
 .basket .basket-line{grid-column:2;grid-row:3;white-space:nowrap;font-variant-numeric:tabular-nums}
 .basket .basket-line .small{white-space:normal}
 .basket .basket-remove{grid-column:3;grid-row:3}
 .basket .qv{min-width:24px}
 .basket .qbtn{width:44px;height:44px;padding:0;flex:none}
}
@media (max-width:640px){
 .compare{overflow:visible;border:0;background:transparent}
 .compare table,.compare tbody{display:block;min-width:0;width:100%}
 .compare thead{display:none}
 .compare tr{display:block;border:1px solid var(--rule);border-radius:6px;margin:12px 0;padding:12px;background:var(--paper)}
 .compare tbody th{display:block;padding:8px 0;white-space:normal}
 .compare td{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:8px 0}
 .compare td:before{content:attr(data-label);font-size:14px;color:var(--ink-3)}
 .compare tr:last-child td{border-bottom:1px solid var(--rule)}
 .compare tr td:last-child{border-bottom:0}
 .compare .compare-action:before{content:none}
 .compare .compare-action a{width:100%;justify-content:center}
 .site-footer p a[href^="mailto:"],.site-footer p a[href^="tel:"]{display:flex}
 .site-footer .contact-separator{display:none}
}
@media (max-width:480px){.cta-band .btn{flex-basis:100%}.support-help .btn{display:table;margin-top:10px}}
@media (max-width:420px){.project-strip{grid-template-columns:minmax(0,1fr)}}

.product-intro .kicker{text-wrap:balance}
.buy [hidden]{display:none!important}
.buy .muted-link a{display:inline-block;min-height:44px;padding-block:10px;vertical-align:middle}
@media (min-width:701px){
 .project-strip strong,.project-strip small{hyphens:manual;overflow-wrap:normal}
 .project-strip{grid-template-columns:.8fr repeat(3,minmax(0,1fr))}
 .project-strip>a,.project-strip>div{padding:22px 14px;gap:8px}
 .project-strip .icon{width:28px}
 .project-strip span{min-width:0}
 .project-strip strong{font-size:16px}
}
@media (min-width:701px) and (max-width:760px){.project-strip .icon{display:none}}
@media (min-width:701px) and (max-width:1200px){
 .project-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
 .project-strip>div{grid-column:1/-1}
 .project-strip strong{font-size:15px}
}