/* ============================================================
   Synelys Biotech — V2 (ESSLAB-inspired e-commerce style)
   Palette from esslabshop.com: navy #252a61 + cyan #058aaa
   + light-blue tints + yellow #ffdd33 highlights.  Font: Archivo (UI/body) + IBM Plex Mono (technical data).
   The wordmark is an SVG of outlined paths, so Archivo Black is not loaded.
   Separate from V1 — this is the "shop" version.
   ============================================================ */
:root{
  --navy:#20264a;         /* deep navy — ink, footer, wordmark harmony */
  --navy-2:#171c39;
  --navy-3:#333a68;
  --cyan:#0b5cc4;         /* signal blue — primary accent (replaces electric cyan) */
  --cyan-2:#1f74de;
  --cyan-dk:#094ea3;      /* text-safe blue on white (AA) */
  --blue:#0b5cc4;
  --tint:#dbe7f7;
  --tint-2:#eef3fb;
  --tint-3:#f1f6fa;       /* EXACT baked studio bg of product photos — keep in sync so no visible box */
  --yellow:#e8a300;       /* refined amber — rare accent, not neon */
  --yellow-2:#cf9000;
  --red:#d6323c;
  --green:#127a3e;
  --ink:#1b2330;          /* charcoal-navy body text */
  --muted:#5b6472;        /* navy-tinted grey */
  --line:#e3e8ef;         /* navy-tinted hairline */
  --line-2:#d1d9e2;
  --bg:#ffffff;
  --bg-2:#f6f8fa;
  --radius:5px;
  --maxw:1240px;
  --sh:0 1px 3px rgba(20,28,45,.06),0 1px 2px rgba(20,28,45,.05);
  --sh-2:0 8px 24px -10px rgba(20,28,45,.20);
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* Every in-page anchor target has to clear the sticky header, or the heading it
   scrolls to lands underneath it. Measured: .stik is 126px at desktop widths
   and 143px below 640px, so the offset is set past the taller of the two.
   #main is the skip link's target and #guides already carried its own inline
   value, which this makes redundant but harmless. */
#contact,#sample,#guides,#news,#main,#faq{scroll-margin-top:150px}
body{background:var(--bg);color:var(--ink);font-family:'Archivo',sans-serif;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:'Archivo',sans-serif;font-weight:700;line-height:1.12;color:var(--navy);letter-spacing:-.01em;text-wrap:balance}
p{text-wrap:pretty}
code,.mono,kbd{font-family:var(--mono)}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:'Archivo';font-weight:600;font-size:14px;padding:11px 20px;border-radius:var(--radius);border:1.5px solid var(--navy);background:var(--navy);color:#fff;cursor:pointer;transition:.15s;line-height:1}
.btn:hover{background:var(--navy-2);border-color:var(--navy-2)}
.btn.cyan{background:var(--cyan);border-color:var(--cyan)}
.btn.cyan:hover{background:var(--cyan-dk);border-color:var(--cyan-dk)}
.btn.yellow{background:var(--yellow);border-color:var(--yellow);color:var(--navy)}
.btn.yellow:hover{background:var(--yellow-2);border-color:var(--yellow-2)}
.btn.ghost{background:#fff;color:var(--navy)}
.btn.ghost:hover{background:var(--navy);color:#fff}
.btn.sm{padding:8px 14px;font-size:13px}
.btn.wide{width:100%}

/* ---------- TOP BAR (light utility) ---------- */
.topbar{background:var(--bg-2);color:var(--muted);font-size:12.5px;border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;padding:7px 24px}
.topbar a{color:var(--muted)}
.topbar a:hover{color:var(--navy)}
.topbar .tb-l{display:flex;gap:20px;align-items:center}
.topbar .tb-r{display:flex;gap:16px;align-items:center}
.topbar .pill{background:var(--tint);color:var(--cyan-dk);font-weight:600;padding:2px 10px;border-radius:3px;font-size:12px}

/* ---------- HEADER ---------- */
.stik{position:sticky;top:0;z-index:90;background:#fff;box-shadow:0 2px 12px rgba(37,42,97,.06)}
.header{border-bottom:1px solid var(--line);background:#fff}
.header .wrap{display:flex;align-items:center;gap:26px;padding:16px 24px}
.logo{display:flex;align-items:center;flex:none}
.logo-mark{height:22px;width:auto;display:block}
.searchbar{flex:1;display:flex;max-width:620px;border:2px solid var(--navy);border-radius:7px}
.searchbar .sfield{flex:1;display:flex;position:relative}
.searchbar input{flex:1;width:100%;border:0;padding:11px 14px;font-family:'Archivo';font-size:14.5px;outline:none;background:transparent;border-radius:5px 0 0 5px}
.searchbar button{border:0;background:var(--navy);color:#fff;padding:0 16px;cursor:pointer;display:flex;align-items:center;border-radius:0 4px 4px 0}
.sug{position:absolute;top:calc(100% + 8px);left:-2px;right:-2px;background:#fff;border:1px solid var(--line);border-top:3px solid var(--cyan);border-radius:0 0 8px 8px;box-shadow:var(--sh-2);z-index:120;overflow:hidden}
.sug a{display:flex;align-items:baseline;gap:8px;padding:10px 14px;font-size:13.5px;color:var(--ink);border-bottom:1px solid var(--line)}
.sug a:hover{background:var(--tint-2)}
.sug a b{color:var(--cyan-dk);font-size:12px;flex:none}
.sug a .sn{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sug a .sp{font-size:12px;color:var(--muted);flex:none}
.sug .sn0{padding:12px 14px;font-size:13px;color:var(--muted)}
.sug .all{justify-content:center;font-weight:600;color:var(--cyan-dk);border-bottom:0;background:var(--bg-2)}
.head-icons{display:flex;gap:20px;align-items:center;margin-left:auto}
.hi{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--navy);font-size:11px;position:relative;cursor:pointer;background:none;border:0;font-family:inherit}
.hi svg{width:23px;height:23px}
.hi .badge{position:absolute;top:-6px;right:-8px;background:var(--red);color:#fff;font-size:10px;font-weight:700;min-width:16px;height:16px;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.hi .amt{font-weight:600;font-size:12px}

/* ---------- MEGA NAV (light) ---------- */
.mainnav{background:#fff;border-bottom:1px solid var(--line);position:relative;z-index:80}
.mainnav .wrap{display:flex;align-items:stretch;gap:0;padding:0 24px}
.mainnav>.wrap>a,.navitem>a{color:var(--ink);font-size:14px;font-weight:500;padding:14px 15px;display:flex;align-items:center;gap:6px;white-space:nowrap;box-shadow:inset 0 -2px 0 transparent;transition:.15s}
.navitem{position:relative}
.mainnav>.wrap>a:hover,.navitem:hover>a{color:var(--cyan-dk);box-shadow:inset 0 -2px 0 var(--cyan)}
.navitem .caret{width:9px;height:9px;opacity:.7}
.navitem .caret path{stroke:currentColor}
.drop{position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--line);border-top:2px solid var(--cyan);border-radius:0 0 6px 6px;box-shadow:var(--sh-2);min-width:250px;padding:10px;display:none;z-index:99}
.navitem:hover .drop,.navitem:focus-within .drop{display:block}
.drop a{display:flex;justify-content:space-between;align-items:center;color:var(--ink);padding:9px 12px;font-size:14px;border-radius:5px}
.drop a:hover{background:var(--tint-2);color:var(--navy)}
.drop a .rf{font-size:11px;color:var(--cyan);font-weight:600}
.drop a.viewall{font-weight:600;color:var(--cyan)}
/* Desktop: the family name in the bar is the same link, one hover away. */
@media (min-width:1001px){.drop a.viewall{display:none}}
.navburger{display:none;margin-left:auto;background:none;border:0;color:var(--navy);cursor:pointer;padding:12px}

/* ---------- HERO CAROUSEL (homepage — navy/blue banner, by founder's request) ---------- */
.hero{background:linear-gradient(120deg,var(--navy) 0%,var(--navy-3) 55%,var(--cyan) 145%);color:#fff;position:relative;overflow:hidden;border-bottom:1px solid var(--navy)}
.hero::after{content:"";position:absolute;right:-6%;top:-30%;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.10),transparent 62%)}
.slides{position:relative}
.slide{display:none;padding:70px 0 56px}
.slide.on{display:block;animation:fade .5s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.slide .wrap{display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:center;position:relative;z-index:2}
.slide .tagpill{display:inline-block;background:var(--yellow);border:0;color:var(--navy);font-family:var(--mono);font-weight:600;font-size:11.5px;padding:5px 10px;border-radius:3px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:16px}
.slide h1,.slide h2{color:#fff;font-family:'Archivo',sans-serif;font-size:clamp(1.9rem,3.6vw,2.9rem);font-weight:700;letter-spacing:-.02em;line-height:1.06;margin-bottom:14px}
.slide p{color:#c9d3ea;font-size:17px;max-width:34em;margin-bottom:24px}
.slide .h-cta{display:flex;gap:12px;flex-wrap:wrap}
.slide .h-vis{display:flex;justify-content:center}
.pvphoto{display:block;max-width:100%;height:auto}
.slide .h-vis .hphoto{width:auto;height:360px;max-width:100%;object-fit:contain;border-radius:10px;box-shadow:0 18px 48px -20px rgba(0,0,0,.35);background:var(--tint-3);border:1px solid rgba(255,255,255,.15)}
.hero-dots{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:3}
.hero-dots button{width:11px;height:11px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.35);cursor:pointer}
.hero-dots button.on{background:var(--yellow);border-color:var(--yellow)}
.bottle{width:150px;height:200px}

/* ---------- USP STRIP ---------- */
/* Facts read one after another, separated by a hairline, the way a supplier's
   information sheet sets them out. No tint, no rounded card, no border box:
   three boxes of unequal height read as a comparison, and a green one reads as
   a success message rather than a fact about customs. */
.mfacts{margin:0}
.mfacts dt{font-weight:650;color:var(--navy);font-size:14.5px;letter-spacing:-.005em}
.mfacts dd{margin:5px 0 15px;padding-bottom:15px;border-bottom:1px solid var(--line);
  font-size:13.5px;color:var(--ink);line-height:1.62;max-width:66ch}
.mfacts dd:last-of-type{margin-bottom:0;padding-bottom:0;border-bottom:0}
.mnote{margin:15px 0 0;padding-top:15px;border-top:1px solid var(--line);
  font-size:13.5px;color:var(--ink);line-height:1.62;max-width:66ch}
.mnote strong{color:var(--navy);font-weight:650}
.usp{background:var(--tint-2);border-bottom:1px solid var(--line)}
.usp .wrap{display:grid;grid-template-columns:repeat(5,1fr)}
.usp .u{display:flex;gap:11px;align-items:center;padding:16px 14px;border-right:1px solid #d5e3f2;cursor:pointer;transition:all .18s ease;user-select:none;text-align:left;background:none;border-top:0;border-bottom:0;border-left:0;font-family:inherit}
.usp .u:last-child{border-right:0}
/* Two of the five cards state a fact and open nothing. They keep the row's
   geometry and lose every affordance that promises a click. */
.usp .u.static{cursor:default}
.usp .u.static:hover{background:none;box-shadow:none;transform:none}
.usp .u.static:hover svg{color:var(--cyan);transform:none}
.usp .u:hover,.usp .u:focus-visible{background:#fff;box-shadow:0 4px 12px rgba(32,38,74,.10);transform:translateY(-2px)}
.usp .u:hover svg,.usp .u:focus-visible svg{color:var(--cyan-dk);transform:scale(1.08)}
.usp .u svg{width:26px;height:26px;color:var(--cyan);flex:none;transition:transform .18s ease, color .18s ease}
.usp .u b{display:block;font-size:13.5px;color:var(--navy);font-weight:600;line-height:1.2}
.usp .u span{font-size:12px;color:var(--muted)}

/* ---------- SECTION ---------- */
.sec{padding:52px 0}
.sec-h{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:26px;gap:20px;flex-wrap:wrap}
.sec-h h1,.sec-h h2{font-size:clamp(1.5rem,2.8vw,2.1rem);font-weight:700}
.sec-h h2 .u{color:var(--cyan)}
.sec-h .link{color:var(--cyan);font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:6px}
.sec-h .link:hover{text-decoration:underline}
.eyebrow{color:var(--cyan-dk);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}

/* ---------- PROMO TILES ---------- */

/* ---------- INTRO / SINCE ---------- */
.intro{background:var(--navy);color:#fff;border-radius:14px;padding:44px;display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center;position:relative;overflow:hidden}
.intro::after{content:"";position:absolute;left:-4%;bottom:-40%;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(5,138,170,.35),transparent 60%)}
.intro h2{color:#fff;font-size:clamp(1.6rem,3vw,2.3rem);margin-bottom:14px;position:relative;z-index:2}
.intro h2 .y{color:var(--yellow)}
.intro p{color:#cfd6f4;position:relative;z-index:2;margin-bottom:10px}
.intro .stats{display:flex;flex-direction:column;gap:14px;position:relative;z-index:2}
.intro .st{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:16px 18px}
.intro .st b{font-size:26px;color:var(--yellow);display:block;font-weight:700}
.intro .st span{font-size:13px;color:#cfd6f4}

/* ---------- CATEGORY TILES ---------- */
/* 7 families: a grid cannot centre a partial last row (justify-content
   centres the tracks, not the items in them), so this is flex. */
/* Five families, one row. At 262px they needed 1374px and fell 4 + 1 inside a
   1192px container; 180px of basis lets all five sit on one line down to a
   1024px viewport, and they grow to fill the row rather than leaving a gutter. */
.cats{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.cats>.cat{flex:1 1 180px;max-width:228px;min-width:0}
/* The photograph fills the tile and the family name and its standards sit over
   it. Before, the image had 172px of a 308px card and the text hung underneath,
   which read as a picture with a caption bolted on. The bottle is anchored to
   the top of the frame so the lower band stays clear for the overlay, and the
   scrim keeps navy text legible over the pale studio background. */
/* One surface, not an image with a caption bolted on: the frame and the photo
   share the same background, so the name and the standards read as sitting on
   the picture while never overlapping the bottle. Overlaying them properly was
   tried first and collided with the bottle base by 36px. */
.cat{border:1px solid var(--line);border-radius:10px;overflow:hidden;text-align:center;
  transition:.2s;background:var(--tint-3);display:block}
.cat:hover{border-color:var(--cyan);box-shadow:var(--sh-2);transform:translateY(-3px)}
.cat .cimg{height:236px;background:var(--tint-3);display:flex;align-items:center;
  justify-content:center;padding:4px 10px 0}
.cat .cimg img{max-height:224px;max-width:100%;width:auto;object-fit:contain}
.cat .cimg svg{max-height:224px;width:auto}
.cat-ov{padding:8px 14px 16px;background:var(--tint-3)}
.cat h4{font-size:15.5px;font-weight:600;color:var(--navy);margin:0;padding:16px 14px 8px}

/* ---------- PRODUCT CARD ---------- */
/* Small families used to pin their cards left in fixed 300px columns, leaving
   592px of white on a two-product family and 892px on a one-product family - the
   worst visual defect on six of the seven category pages. The row is now centred
   AND carries the family's protocol guide as a tile, so the space holds something
   a visitor who cannot yet choose actually wants. */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
/* AFTER .pgrid on purpose. Declared before it, this had the same specificity
   (0,0,1,0) and lost the cascade, so grid-template-columns stayed repeat(4,1fr),
   the tracks filled the full width and there was nothing left for
   justify-content to centre. */
.pgrid-few{grid-template-columns:repeat(auto-fit,minmax(280px,340px));
  justify-content:center}
@media (max-width:700px){
  .pgrid-few{grid-template-columns:1fr}
}

/* The guide tile: same frame as a product card, no photo, so it reads as a
   sibling of the products rather than an advert wedged between them. */
.pcard-guide{padding:20px;justify-content:flex-start;text-decoration:none}
.pcard-guide .pgd-k{font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--cyan-dk);margin-bottom:10px}
.pcard-guide .pgd-t{color:var(--navy);font-size:15.5px;font-weight:700;
  line-height:1.3;margin-bottom:8px}
.pcard-guide .pgd-c{color:var(--muted);font-size:13px;line-height:1.55;
  margin-bottom:14px}
.pcard-guide .pcard-go{margin-top:auto;color:var(--cyan-dk);font-weight:600;font-size:13.5px}
.pcard-guide:hover .pcard-go{text-decoration:underline}
.pcard{border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden;display:flex;flex-direction:column;position:relative;transition:.2s}
.pcard:hover{box-shadow:var(--sh-2);border-color:var(--line-2)}
.pcard .wish{position:absolute;top:10px;right:10px;z-index:3;background:#fff;border:1px solid var(--line);width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted)}
.pcard .wish:hover{color:var(--red);border-color:var(--red)}
.pcard .pimg{background:var(--tint-3);height:225px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line);overflow:hidden}
.pcard .pimg img{height:100%;width:auto;max-width:100%;object-fit:contain}
.pcard .pbody{padding:15px 16px;display:flex;flex-direction:column;flex:1}
.pcard h3{font-size:15.5px;font-weight:600;color:var(--navy);line-height:1.2;margin-bottom:0}
.pcard .pstd{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.02em;color:var(--muted);margin-top:6px}
.pcard h3 a:hover{color:var(--cyan)}
.pcard .prow{display:flex;align-items:baseline;gap:8px}
.pcard .price{font-size:21px;font-weight:700;color:var(--navy)}
.pcard .price small{font-size:12px;color:var(--muted);font-weight:500}
.pcard .price-req{font-size:16px}
/* Price and call to action on the cards.
   Default, and the only layout a touch screen ever gets: .pmedia dissolves
   (display:contents), its two children become children of the card, and the
   four blocks stack photo / name / price / button. A phone has no hover state,
   so anything conditional on it would be permanently unreachable there. */
.pcard .pmedia{display:contents}
.pcard .pbuy{order:3;padding:0 16px 15px;display:flex;flex-direction:column;gap:11px}
.pcard .pimg{order:1}
.pcard .pbody{order:2}
/* On a pointer device the block is lifted out of the flow and slides up as a
   strip over the foot of the photograph. Two things this buys over hiding it
   in place: the card keeps one height whether hovered or not, and there is no
   reserved gap sitting empty under every card that is not being pointed at.
   It covers the bottom of the image, never the product name: on this catalogue
   SW1a and SW1b differ only by their standard, and taking the name away at the
   moment someone clicks Add to cart is how you sell the wrong fluid.
   :focus-within is there so the keyboard path does not run through a control
   that cannot be seen. */
@media(hover:hover) and (pointer:fine){
  .pcard .pmedia{display:block;position:relative}
  /* One row, not two: stacked, the strip stood 107px tall and cut the bottle
     across its label. Side by side it is 68px and clears the photograph. */
  .pcard .pbuy{position:absolute;left:0;right:0;bottom:0;z-index:2;
    flex-direction:row;align-items:center;flex-wrap:wrap;gap:12px;
    padding:12px 16px;background:#fff;border-top:1px solid var(--line);
    opacity:0;visibility:hidden;transform:translateY(8px);
    transition:opacity .18s ease,transform .18s ease,visibility .18s}
  /* Sized to its label, not stretched to the free space. Filling the row put a
     200px button next to a 39px price, 71% of the strip for the secondary
     element; the card is a place to recognise a product, and the buy action
     belongs to the product page. Now it takes what its text needs and sits
     against the right edge. */
  .pcard .pbuy .btn{flex:0 0 auto;width:auto;margin-left:auto;
    font-size:13.5px;padding:9px 15px}
  .pcard .pbuy .pcard-go{flex:0 0 auto;margin-left:auto}
  /* On the two cards with no published price the strip said "Price on request"
     next to a button reading "Request quote", the same sentence twice, and in
     French the pair did not fit on one line so the strip grew to 91px where
     every other card is 59. The button carries the message; the label goes.
     It stays in the flow layout below, where nothing competes for the width. */
  .pcard .pbuy .prow:has(.price-req){display:none}
  .pcard:hover .pbuy,.pcard:focus-within .pbuy{
    opacity:1;visibility:visible;transform:none}
}

/* tabs (top sellers) */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.tabs button{font-family:'Archivo';font-size:13.5px;font-weight:600;padding:8px 16px;border-radius:20px;border:1px solid var(--line-2);background:#fff;color:var(--navy);cursor:pointer;transition:.18s}
.tabs button:hover{border-color:var(--cyan)}
.tabs button.on{background:var(--navy);color:#fff;border-color:var(--navy)}

/* ---------- STANDARDS WALL ---------- */
.brands{background:var(--bg-2)}
.logowall{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.lw{background:#fff;border:1px solid var(--line);border-radius:8px;padding:18px 10px;text-align:center}
.lw b{display:block;font-family:var(--mono);font-size:14px;color:var(--navy);font-weight:600;letter-spacing:-.01em}
.lw span{font-size:11px;color:var(--muted)}

/* ---------- TESTIMONIALS ---------- */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tcard{background:#fff;border:1px solid var(--line);border-radius:10px;padding:22px;box-shadow:var(--sh)}
.tcard .stars{color:var(--yellow);font-size:15px;letter-spacing:2px;margin-bottom:10px}
.tcard p{font-size:14.5px;color:var(--ink);margin-bottom:14px}
.tcard .who{display:flex;align-items:center;gap:10px}
.tcard .av{width:38px;height:38px;border-radius:50%;background:var(--tint);color:var(--navy);display:flex;align-items:center;justify-content:center;font-weight:700}
.tcard .who b{font-size:14px;color:var(--navy);display:block}
.tcard .who span{font-size:12px;color:var(--muted)}
.tnote{text-align:center;font-size:12px;color:var(--muted);margin-top:18px;font-style:italic}

/* ---------- NEWS ---------- */
.ngrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ncard{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;transition:.2s}
.ncard:hover{box-shadow:var(--sh-2)}
.ncard .nimg{height:150px;background:var(--navy);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:15px;padding:20px;text-align:center;border-bottom:3px solid var(--cyan)}
.ncard .nb{padding:18px}
.ncard .nb p{font-size:13.5px;color:var(--muted);margin-bottom:12px}
.ncard .nb a{color:var(--cyan);font-weight:600;font-size:13.5px}

/* ---------- OEM GRID & CARDS ---------- */
.oem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.oem-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px;box-shadow:var(--sh);transition:.2s;display:flex;flex-direction:column}
.oem-card:hover{border-color:var(--cyan);box-shadow:var(--sh-2);transform:translateY(-2px)}
.oem-ic{width:46px;height:46px;border-radius:10px;background:var(--tint-2);border:1px solid var(--tint);color:var(--cyan-dk);display:flex;align-items:center;justify-content:center;margin-bottom:18px;flex:none}
.oem-card h3{font-size:17px;font-weight:700;color:var(--navy);margin-bottom:8px}
.oem-card p{font-size:14px;color:var(--ink);line-height:1.55}

/* ---------- NEWSLETTER ---------- */
.news{background:var(--navy);color:#fff;border-radius:8px;padding:40px;display:grid;grid-template-columns:1.2fr 1fr;gap:30px;align-items:center;border:1px solid var(--navy)}
.news h2{color:#fff;font-size:1.7rem;margin-bottom:6px}
.news p{color:#d3daf6;font-size:15px}
.news form{display:flex;gap:10px}
.news input{flex:1;border:0;border-radius:6px;padding:13px 15px;font-family:'Archivo';font-size:15px}
.news .ok{font-size:13px;color:var(--yellow);margin-top:8px;display:none}

/* ---------- FOOTER ---------- */
footer{background:var(--navy);color:#fff;padding:52px 0 26px;margin-top:52px}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px;margin-bottom:34px}
footer .logo{color:#fff}
footer .logo-mark{margin-left:-4px}
footer .fdesc{color:#b9c0e4;font-size:13.5px;margin:14px 0;max-width:30ch}
footer .fcon{font-size:13px;color:#cdd4f5;line-height:1.9}
footer .fcon a{color:var(--yellow)}
.fcol h5{font-size:14px;color:#fff;margin-bottom:14px;font-weight:700}
.fcol a{display:block;color:#b9c0e4;font-size:13.5px;padding:4px 0}
.fcol a:hover{color:#fff}
.fsoc{display:flex;gap:10px;margin-top:12px}
.fsoc a{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center}
.fsoc a:hover{background:var(--cyan)}
.fruo{border:1px solid rgba(255,255,255,.18);border-radius:8px;padding:13px 16px;font-size:11.5px;color:#b9c0e4;margin-bottom:22px;text-align:center}
.fruo b{color:var(--yellow)}
/* Centred, like the disclaimer directly above it. Pushed apart with
   space-between, the copyright sat hard left and the payment badges hard
   right, which read as two stray fragments under a centred line. */
.fbot{border-top:1px solid rgba(255,255,255,.15);padding-top:20px;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px 22px;font-size:12.5px;color:#9aa2cf;text-align:center}
/* Terms, legal notice and privacy sit on the bottom bar, not in the Support
   column: they are obligations, not help, and next to "request a quote"
   they made that column unreadable. */
.flegal{display:flex;flex-wrap:wrap;gap:6px 16px}
.flegal a{color:#9aa2cf;text-decoration:none}
.flegal a:hover{color:#fff;text-decoration:underline}
.pay{display:flex;gap:6px}
.pay span{background:#fff;color:var(--navy);font-size:10px;font-weight:700;padding:3px 7px;border-radius:4px}

/* ---------- CART DRAWER ---------- */
.overlay{position:fixed;inset:0;background:rgba(27,31,77,.5);opacity:0;visibility:hidden;transition:.25s;z-index:200}
.overlay.on{opacity:1;visibility:visible}
.cart{position:fixed;top:0;right:-440px;width:420px;max-width:92vw;height:100%;background:#fff;z-index:201;box-shadow:-10px 0 40px rgba(0,0,0,.2);display:flex;flex-direction:column;transition:right .3s cubic-bezier(.22,.61,.36,1)}
.cart.on{right:0}
.cart-h{background:var(--navy);color:#fff;padding:18px 22px;display:flex;justify-content:space-between;align-items:center}
.cart-h h3{color:#fff;font-size:18px}
.cart-h button{background:none;border:0;color:#fff;font-size:22px;cursor:pointer;line-height:1}
.cart-body{flex:1;overflow-y:auto;padding:14px 22px}
.cart-empty{text-align:center;color:var(--muted);padding:60px 20px;font-size:14px}
.citem{display:grid;grid-template-columns:56px 1fr auto;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);align-items:center}
.citem .ci-img{width:56px;height:56px;background:var(--tint-3);border-radius:6px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.citem .ci-img img{max-height:100%;max-width:100%;object-fit:contain}
.citem .ci-t{font-size:14px;font-weight:600;color:var(--navy);line-height:1.2}
.citem .ci-r{font-size:11.5px;color:var(--muted)}
.citem .qty{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:5px;margin-top:6px}
.citem .qty button{width:30px;height:30px;border:0;background:#fff;cursor:pointer;color:var(--navy);font-size:16px}
/* Free-sample lines are capped at one, so the + is inert rather than absent:
   removing it would shift the stepper layout between line types. */
.citem .qty button:disabled,.qtybox button:disabled{opacity:.3;cursor:not-allowed}
.qtybox input:disabled{background:var(--bg-2);color:var(--muted)}
.citem .qty span{width:26px;text-align:center;font-size:13px}
.citem .ci-p{font-weight:700;color:var(--navy);font-size:14px;text-align:right}
.citem .rm{display:block;font-size:11px;color:var(--red);cursor:pointer;margin-top:6px;text-align:right}
.cart-f{border-top:1px solid var(--line);padding:18px 22px}
.cart-f .tot{display:flex;justify-content:space-between;font-size:17px;font-weight:700;color:var(--navy);margin-bottom:4px}
.cart-f .vat{font-size:12px;color:var(--muted);margin-bottom:14px}

/* ---------- BREADCRUMB / SHOP ---------- */
.crumb{font-size:13px;color:var(--muted);padding:16px 0}
.crumb a{color:var(--cyan-dk)}
/* category page */
.cat-hero{background:var(--tint-2);border-bottom:1px solid var(--line);padding:10px 0 34px}
.cat-hero .wrap.cat-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:stretch}
.cat-hero h1{font-size:clamp(1.8rem,3.4vw,2.6rem);margin:6px 0 14px}
.cat-hero .lead{max-width:78ch;color:var(--ink);font-size:15.5px}
.cat-hero .lead p{margin-bottom:10px}
/* The hero photograph used to set the height of the whole band: it rendered
   288px tall against an intro of 177 to 247px, so every category page carried
   41 to 111px of dead white under its own text. The column is now stretched to
   whatever the text needs and the picture is taken out of the height
   calculation (absolute), then scaled to fit inside it. The band is sized by
   its copy, the image follows, and the gap cannot come back when an intro is
   reworded. */
/* 170px floor: below the shortest intro on the site (177px), so it never
   drives the band today, but the picture cannot collapse to a stamp if an
   intro is ever cut to one line. */
.cat-hero-vis{position:relative;min-height:170px}
.cat-hero-img,.cat-hero-svg{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;
  max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain}
.cat-hero-img{background:var(--tint-3);border:1px solid var(--line);border-radius:8px;box-shadow:var(--sh);padding:10px}
.cat-hero-svg{background:#fff;border:1px solid var(--line);border-radius:8px;padding:16px;box-shadow:var(--sh);display:flex;align-items:center;justify-content:center}
@media(max-width:820px){.cat-hero .wrap.cat-hero-grid{grid-template-columns:1fr}.cat-hero-vis{display:none}}
.shop-grid{display:grid;grid-template-columns:250px 1fr;gap:30px;align-items:start}
.filters{border:1px solid var(--line);border-radius:10px;padding:18px;position:sticky;top:118px}
.filters h4{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--navy);margin:14px 0 10px;border-bottom:1px solid var(--line);padding-bottom:8px}
.filters h4:first-child{margin-top:0}
.filters label{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ink);padding:5px 0;cursor:pointer}
.filters input{accent-color:var(--cyan);width:16px;height:16px}
.shop-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:12px}
.shop-top .cnt{font-size:14px;color:var(--muted)}
.shop-top select{font-family:'Archivo';font-size:14px;padding:9px 12px;border:1px solid var(--line-2);border-radius:6px;color:var(--navy)}
.shop-grid .pgrid{grid-template-columns:repeat(3,1fr)}

/* ---------- PRODUCT PAGE ---------- */
.pd{display:grid;grid-template-columns:1fr 1.05fr;gap:44px;padding:20px 0 10px}
/* height:100% so the picture frame ends level with the column beside it. Its
   grid item (the wrapper div) already stretches to the row height, but the
   frame inside it was sized by min-height alone and stopped ~23px short, so
   the document links under the buy box hung below the photograph. On the
   one-column layout the wrapper's height is auto, so this resolves to auto
   and min-height keeps the frame sensible. */
.pd-media{border:1px solid var(--line);border-radius:12px;background:var(--tint-3);padding:28px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:380px;height:100%;position:relative;overflow:hidden}
.pd-media .pvphoto{width:auto;height:auto;max-width:100%;max-height:460px;object-fit:contain}
.pd-media svg{max-width:100%;height:auto}
.pd-thumbs{display:flex;gap:10px;margin-top:20px}
.pd-thumbs .th{width:60px;height:60px;border:1px solid var(--line);border-radius:7px;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.pd-thumbs .th.on{border-color:var(--cyan);border-width:2px}
/* No top margin: the h1 is the first thing in the right column and has to
   start level with the top of the picture frame. */
.pd-info h1{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:700;margin:0 0 10px}
.pd-norms{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}
.pd-norms .nm{font-family:var(--mono);font-size:11.5px;background:var(--tint-2);border:1px solid var(--tint);color:var(--cyan-dk);padding:4px 9px;border-radius:2px;font-weight:500}
.pd-price{display:flex;align-items:baseline;gap:10px}
/* Three columns, two rows, everything placed explicitly:
      price   |  Format select  |  second select
              |  quantity box   |  Add to cart
   The rules that used to fence the price above and below are gone, and the
   price shares its row with the selectors instead of standing alone over them.
   Three stacked bands inside a box that already has its own border was one
   frame too many, and it made the buy box taller than the photograph beside it.

   display:contents dissolves the .pd-opts and .pd-buy wrappers so their
   children become grid items of the box itself. That is what lets the quantity
   box sit in the Format column and the button in the second selector's column:
   each column is sized by its own widest member, so the two rows line up
   without a single hardcoded width. In a flex row the button took its position
   from the quantity box width plus the gap and landed 52px off. */
.pd-buy-box{display:grid;grid-template-columns:auto auto 1fr;gap:16px 24px;
  align-items:end}
.pd-buy-box>.pd-quote-line{grid-column:1/-1}
.pd-buy-box:not(.pd-buy-box-req)>.pd-price{grid-column:1;grid-row:1/3;
  align-self:center}
.pd-buy-box:not(.pd-buy-box-req)>.pd-opts{display:contents}
.pd-buy-box:not(.pd-buy-box-req)>.pd-opts>.fld:nth-child(1){grid-column:2;grid-row:1}
.pd-buy-box:not(.pd-buy-box-req)>.pd-opts>.fld:nth-child(2){grid-column:3;grid-row:1}
.pd-buy-box:not(.pd-buy-box-req)>.pd-buy{display:contents}
.pd-buy-box:not(.pd-buy-box-req)>.pd-buy>.qtybox{grid-column:2;grid-row:2;
  justify-self:start}
.pd-buy-box:not(.pd-buy-box-req)>.pd-buy>.btn{grid-column:3;grid-row:2;
  justify-self:start}
/* The stacked variant has no quantity box and two buttons, so it keeps its
   flex row and its single column. */
.pd-buy-box-req>.pd-buy{grid-column:1/-1}
.pd-price .p{font-size:34px;font-weight:700;color:var(--navy)}
.pd-desc{font-size:15px;color:var(--ink);margin-bottom:18px}
.pd-opts{display:flex;gap:14px;flex-wrap:wrap}
.pd-opts .fld label{display:block;font-size:12px;color:var(--muted);margin-bottom:5px;font-weight:600}
.pd-opts select{font-family:'Archivo';font-size:14px;padding:10px 12px;border:1px solid var(--line-2);border-radius:6px;color:var(--navy);min-width:150px}
/* Revealed only when the option selector offers a bespoke value. Spans the
   box so the hint under it has room, and so it reads as a question being
   asked rather than a third dropdown. */
.pd-custom{grid-column:1/-1}
.pd-custom input{width:100%;max-width:320px;font-family:'Archivo';font-size:14px;padding:10px 12px;border:1px solid var(--line-2);border-radius:6px;color:var(--navy)}
.pd-custom input:invalid,.pd-custom input.miss{border-color:var(--red)}
.pd-custom .hint{display:block;font-size:12px;color:var(--muted);margin-top:5px}
.qtybox{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:6px;overflow:hidden}
.qtybox button{width:38px;height:42px;border:0;background:var(--bg-2);cursor:pointer;font-size:18px;color:var(--navy)}
.qtybox input{width:46px;height:42px;border:0;text-align:center;font-family:'Archivo';font-size:15px;
  -moz-appearance:textfield;appearance:textfield}
/* No native spinner here: this box already has its own − and + buttons, so
   the browser arrows are a second, smaller control doing the same job.
   Scoped to .qtybox on purpose — the calculator inputs (sel-n, mb-vol,
   sc-v...) have no buttons of their own and need theirs. */
.qtybox input::-webkit-outer-spin-button,
.qtybox input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pd-buy{display:flex;gap:12px;flex-wrap:wrap;margin:0}
.pd-buy .btn{padding:13px 26px;font-size:15px}

/* product tabs */
.ptabs{border-bottom:2px solid var(--line);display:flex;gap:4px;margin:10px 0 26px;flex-wrap:wrap}
.ptabs button{font-family:'Archivo';font-size:15px;font-weight:600;padding:12px 20px;border:0;background:none;color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px}
.ptabs button.on{color:var(--navy);border-color:var(--cyan)}
.panel{display:none;max-width:900px}
.panel.on{display:block}
.panel h3{font-size:18px;color:var(--navy);margin:18px 0 10px}
.panel p{color:var(--ink);margin-bottom:12px}
.panel ul{margin:0 0 14px 18px}
.panel li{margin-bottom:6px}
.spectab{width:100%;border-collapse:collapse;border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-bottom:14px}
.spectab tr{border-bottom:1px solid var(--line)}
.spectab td{padding:12px 16px;font-size:14px}
.spectab td:first-child{background:var(--bg-2);color:var(--muted);width:36%;font-weight:600}
.edge-box{background:var(--tint-2);border-left:4px solid var(--cyan);border-radius:8px;padding:18px 20px;margin-bottom:14px}
.edge-box p{margin:0;color:var(--navy)}

/* reveal */
.rv{opacity:0;transform:translateY(20px);transition:.6s cubic-bezier(.22,.61,.36,1)}
.rv.in{opacity:1;transform:none}

/* responsive */
@media(max-width:1080px){
  .pgrid,.logowall{grid-template-columns:repeat(3,1fr)}
  .cats>.cat{flex-basis:165px}
  .shop-grid .pgrid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:1000px){
  .slide .wrap,.intro,.news,.pd{grid-template-columns:1fr}
  .slide .h-vis,.intro .stats{display:none}
  .tgrid,.ngrid,.oem-grid{grid-template-columns:repeat(2,1fr)}
  .usp .wrap{grid-template-columns:repeat(3,1fr)}
  .fgrid{grid-template-columns:1fr 1fr}
  .shop-grid{grid-template-columns:1fr}
  .filters{position:static}
  .navburger{display:block}
  .mainnav .wrap{flex-direction:column;align-items:stretch;padding:0;display:none}
  .mainnav .wrap.open{display:flex}
  .mainnav>.wrap>a,.navitem>a{padding:13px 20px;border-bottom:1px solid var(--line);box-shadow:none}
  .navitem{position:static}
  .navitem .caret{margin-left:auto}
  .drop{position:static;box-shadow:none;border:0;border-top:0;border-radius:0;min-width:0;display:none;background:var(--bg-2);padding:0}
  .navitem:focus-within .drop,.navitem.open .drop{display:block}
  .drop a{color:var(--ink);padding:11px 30px}
  .drop a:hover{background:var(--tint-2);color:var(--cyan-dk)}
}
@media(max-width:640px){
  .searchbar,.topbar .tb-l{display:none}
  .pgrid,.logowall,.tgrid,.ngrid,.shop-grid .pgrid{grid-template-columns:1fr 1fr}
  .cats>.cat{flex-basis:44%}
  .usp .wrap{grid-template-columns:1fr 1fr}
  .fgrid{grid-template-columns:1fr}
  .intro,.news{padding:26px}
  .header .wrap{gap:14px}
  .head-icons{gap:14px}
}
@media(max-width:460px){
  .pgrid,.logowall,.tgrid,.ngrid,.shop-grid .pgrid,.usp .wrap,.oem-grid{grid-template-columns:1fr}
  .cats>.cat{flex-basis:100%;max-width:none}
}

/* ---------- ACCESSIBILITY ---------- */
.skip{position:absolute;left:-9999px;top:0;background:var(--yellow);color:var(--navy);font-weight:700;padding:10px 18px;border-radius:0 0 8px 0;z-index:999}
.skip:focus{left:0}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--cyan);outline-offset:2px;border-radius:4px}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .rv{opacity:1;transform:none}
}

/* ---------- SHOP EXTRAS ---------- */
.schip{display:inline-flex;align-items:center;gap:8px;background:var(--tint-2);border:1px solid var(--tint);color:var(--navy);font-size:13px;font-weight:600;padding:6px 12px;border-radius:20px}
.schip a{color:var(--red);font-weight:700;font-size:15px;line-height:1}
.noresults{text-align:center;color:var(--muted);font-size:14.5px;padding:60px 20px;border:1px dashed var(--line-2);border-radius:10px}
.noresults b{color:var(--navy);font-size:16px}

/* ---------- FAQ ---------- */
/* Full container width: capped at 820px the list sat visibly narrower than
   its own section heading. Answer text still holds a 70ch measure inside. */
.faqwrap{max-width:none}
.faq{background:#fff;border:1px solid var(--line);border-radius:10px;margin-bottom:10px;overflow:hidden}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:16px 20px;font-weight:600;color:var(--navy);font-size:15.5px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;font-weight:400;color:var(--cyan);flex:none;transition:transform .2s}
.faq[open] summary::after{transform:rotate(45deg)}
.faq[open] summary{border-bottom:1px solid var(--line)}
/* No measure cap: the boxes run the container's full width, so a 70ch answer
   sat hard against the left edge with a third of the box empty. These answers
   are two to four lines, which is short enough that the wider measure reads
   fine, and it matches the category-page FAQ, which never had a cap. */
.faq p{padding:14px 20px 18px;color:var(--muted);font-size:14.5px}

/* ---------- EU vs IMPORT COMPARISON (sober) ---------- */
.cmp{border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden}
.cmp-wide{box-shadow:var(--sh)}
.cmp-h{background:var(--bg-2);border-bottom:1px solid var(--line);padding:13px 18px;font-weight:700;color:var(--navy);font-size:15px}
.cmp-h span{font-weight:500;color:var(--muted);font-size:13.5px}
.cmptab{width:100%;border-collapse:collapse}
.cmptab th,.cmptab td{text-align:left;padding:12px 18px;font-size:14px;border-bottom:1px solid var(--line);vertical-align:top}
.cmptab thead th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700}
.cmptab tbody th{font-weight:600;color:var(--muted);width:32%}
.cmptab .c-us{color:var(--navy);font-weight:600;border-left:3px solid var(--cyan);background:var(--tint-3)}
.cmptab thead .c-us{color:var(--cyan-dk)}
.cmptab .c-them{color:var(--ink)}
.cmptab tr:last-child th,.cmptab tr:last-child td{border-bottom:0}
.cmp-src{padding:11px 18px;font-size:11.5px;color:var(--muted);background:var(--bg-2);border-top:1px solid var(--line);margin:0}

/* ---------- VOLUME TIER PRICING ---------- */
.tiers{border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-bottom:16px;background:var(--tint-3)}
.tiers h4{font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--navy);margin-bottom:10px}
.tiers h4 span{text-transform:none;letter-spacing:0;color:var(--muted);font-weight:500}
.tiertab{width:100%;border-collapse:collapse}
.tiertab td{padding:7px 4px;font-size:14px;border-bottom:1px solid var(--line);color:var(--ink)}
.tiertab tr:last-child td{border-bottom:0}
.tiertab td:first-child{color:var(--muted)}
.tiertab td:last-child{text-align:right;font-weight:600;color:var(--navy)}
.tiertab small{color:var(--muted);font-weight:400}
.toff{display:inline-block;background:#e5f6ec;color:var(--green);font-size:11px;font-weight:700;padding:1px 6px;border-radius:4px;margin-left:6px}
.tiers-note{font-size:12px;color:var(--muted);margin:10px 0 0}
.tiers-note a{color:var(--cyan-dk);font-weight:600}
.pdtier{display:inline-flex;align-items:center;background:#e5f6ec;color:var(--green);font-size:12px;font-weight:700;padding:2px 8px;border-radius:5px}

/* ---------- SAME-LOT REORDER ---------- */
.reorder{display:flex;gap:12px;align-items:flex-start;background:var(--tint-2);border:1px solid var(--tint);border-radius:10px;padding:14px 16px;margin-bottom:18px}
.reorder svg{width:24px;height:24px;color:var(--cyan-dk);flex:none;margin-top:1px}
.reorder b{display:block;color:var(--navy);font-size:14px}
.reorder span{font-size:13px;color:var(--muted)}

/* ---------- OEM PAGE ---------- */
.oem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.oem-card{border:1px solid var(--line);border-radius:12px;padding:22px;background:#fff;transition:.2s}
.oem-card:hover{box-shadow:var(--sh-2);border-color:var(--line-2)}
.oem-ic{font-size:26px;margin-bottom:10px}
.oem-card h3{font-size:17px;color:var(--navy);margin-bottom:6px}
.oem-card p{font-size:14px;color:var(--muted)}
/* Equal-height cards (the grid default stretch), by request. This was
   previously align-items:start so that each card hugged its own copy: the
   three blocks are 2, 3 and 4 lines long, so stretched they leave 66 / 45 /
   23px of empty space under the text. Centring the content absorbs most of that
   asymmetry, which is why the badge, heading and copy are all centred here
   rather than only the badge. */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.step{position:relative;padding:22px;border:1px solid var(--line);border-radius:12px;background:#fff;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
.step .stn{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;font-weight:700;margin-bottom:12px;flex:none}
.step h4{font-size:16px;color:var(--navy);margin-bottom:6px}
.step p{font-size:14px;color:var(--muted)}
#oemquote .news form{flex-direction:column;align-items:stretch;gap:10px}
#oemquote .news input{width:100%}

/* ---------- OEM BAND (home) ---------- */
.oemband{padding:0}
.oemband-in{background:var(--navy);border-radius:8px;padding:34px 40px;display:grid;grid-template-columns:1.4fr .9fr;gap:28px;align-items:center;color:#fff}
.oemband-in h2{color:#fff;font-size:1.55rem;margin:4px 0 8px}
.oemband-in p{color:#d3daf6;font-size:14.5px;max-width:46ch}
.oemband-cta{display:flex;flex-direction:column;gap:10px}
.btn.ghost.light{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn.ghost.light:hover{background:#fff;color:var(--navy);border-color:#fff}

@media(max-width:1000px){
  .oem-grid,.steps{grid-template-columns:1fr 1fr}
  .oemband-in{grid-template-columns:1fr;padding:26px}
  .cmptab tbody th{width:38%}
}
@media(max-width:640px){
  .oem-grid,.steps{grid-template-columns:1fr}
  .cmptab th,.cmptab td{padding:10px 12px;font-size:13px}
  .cmptab tbody th{width:34%}
}

/* ---------- LANGUAGE SWITCHER ---------- */
/* Language switch. Styled for the LIGHT utility bar: the previous values
   (#cdd4f5 text on a translucent white pill) were inherited from the old dark
   topbar and scored 1.38:1 against #f6f8fa — effectively invisible.
   Min-height 24px keeps the tap target at the WCAG 2.2 (2.5.8) floor. */
/* A dropdown rather than one button per language: three codes already crowd
   the utility bar and six would not fit. Built on <details>/<summary> so it
   opens without JS and stays keyboard-operable, and the entries are real
   links, which a crawler can follow. */
.lang-switch{position:relative;display:inline-block}
.lang-switch>summary{list-style:none;display:inline-flex;align-items:center;gap:6px;
  background:#fff;border:1px solid var(--line-2);border-radius:4px;padding:3px 8px;
  min-height:24px;font-family:'Archivo';font-size:12px;font-weight:600;
  color:var(--navy);cursor:pointer;user-select:none}
.lang-switch>summary::-webkit-details-marker{display:none}
.lang-switch>summary:hover{background:var(--bg-2)}
.lang-globe{width:13px;height:13px;flex:none;color:var(--muted)}
.lang-caret{width:9px;height:9px;flex:none;color:var(--muted);
  transition:transform .15s ease}
.lang-switch[open]>summary .lang-caret{transform:rotate(180deg)}
.lang-menu{position:absolute;top:calc(100% + 4px);right:0;z-index:130;
  background:#fff;border:1px solid var(--line-2);border-radius:6px;
  box-shadow:var(--sh-2);padding:4px;min-width:150px}
.lang-opt{display:flex;align-items:baseline;gap:8px;padding:7px 10px;
  border-radius:4px;font-size:13px;color:var(--ink);white-space:nowrap}
.lang-opt:hover{background:var(--tint-2)}
.lang-opt.active{background:var(--navy);color:#fff}
.lang-code{font-family:var(--mono);font-size:11px;font-weight:600;
  color:var(--cyan-dk);flex:none;min-width:20px}
.lang-opt.active .lang-code{color:#fff}
.lang-name{font-weight:500}
.lang-cur{letter-spacing:.02em}

/* ---------- B2B MODALS & DIALOGS ---------- */
.syn-modal-overlay{position:fixed;inset:0;background:rgba(15,20,50,.65);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:all .25s ease;z-index:900;display:flex;align-items:center;justify-content:center;padding:20px}
.syn-modal-overlay.on{opacity:1;visibility:visible}
.syn-modal{background:#fff;border-radius:12px;box-shadow:0 20px 50px rgba(0,0,0,.3);width:100%;max-width:760px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;transform:scale(.96);transition:transform .25s ease}
.syn-modal-overlay.on .syn-modal{transform:scale(1)}
.syn-modal-header{background:var(--navy);color:#fff;padding:18px 24px;display:flex;justify-content:space-between;align-items:center}
.syn-modal-header h3{color:#fff;font-size:19px;font-weight:700;display:flex;align-items:center;gap:10px}
.syn-modal-close{background:none;border:0;color:#fff;font-size:24px;line-height:1;cursor:pointer;opacity:.8;transition:.15s}
.syn-modal-close:hover{opacity:1}
.syn-modal-body{padding:24px;overflow-y:auto;flex:1;overscroll-behavior:contain}
.syn-modal-footer{border-top:1px solid var(--line);padding:16px 24px;background:var(--bg-2);display:flex;justify-content:flex-end;gap:12px}

/* ---------- COA DOCUMENT SPECIMEN ----------
   Reviewed against real certificates on 2026-09-05 (Ricca lot 2505F01,
   Pickering SDS 1700-0008) after the founder's reviewer said ours "looked
   generated". Three things did it, and none was the content:

   - a decorative dotted ground. No laboratory prints a certificate on
     patterned paper. It is now white, because a document of record is white.
   - a tilted dashed "Synelys Certified Batch" rubber stamp. A stamp is a mark
     of authority, and drawing one in CSS on a specimen is the single most
     obviously fake element on the page. Gone. The release statement, which is
     the thing that actually carries authority, gets the weight instead.
   - zebra-striped rows and a solid navy header band, which is a web table.
     Real certificates use thin rules and let the figures line up.

   Figures are tabular-numeric so specification and result align digit under
   digit, the way they do on a printed sheet. */
.coa-doc{border:1px solid var(--line-2);border-radius:4px;padding:30px 32px;background:#fff;
  font-family:'Archivo',sans-serif;color:var(--navy);position:relative}
.coa-doc-header{display:flex;justify-content:space-between;align-items:flex-start;
  border-bottom:1.5px solid var(--navy);padding-bottom:14px;margin-bottom:18px}
.coa-doc-title{text-align:right}
.coa-doc-title h2{font-size:16px;letter-spacing:.09em;color:var(--navy);text-transform:uppercase;font-weight:700}
.coa-doc-title span{font-size:11px;color:var(--muted);font-weight:600;letter-spacing:.02em}
.coa-meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px 24px;padding:12px 0;
  border-bottom:1px solid var(--line);margin-bottom:18px;font-size:13px;
  font-variant-numeric:tabular-nums}
.coa-meta-grid div b{color:var(--muted);font-weight:600}
.coa-table{width:100%;border-collapse:collapse;margin-bottom:16px;font-size:13px;
  font-variant-numeric:tabular-nums}
.coa-table th,.coa-table td{padding:8px 10px;border:0;border-bottom:1px solid var(--line);text-align:left;
  vertical-align:top}
.coa-table th{border-bottom:1.5px solid var(--navy);color:var(--navy);font-size:10.5px;
  text-transform:uppercase;letter-spacing:.06em;font-weight:700;background:none}
.coa-badge-pass{color:var(--green);font-weight:700;font-size:11.5px;display:inline-block;
  text-transform:uppercase;letter-spacing:.04em}
.coa-sign-block{display:flex;justify-content:space-between;align-items:flex-end;
  margin-top:22px;padding-top:14px;border-top:1px solid var(--line)}
.coa-stamp{display:none}

/* ---------- PROFORMA & PO FORM STYLES ---------- */
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.syn-field{margin-bottom:14px}
.syn-field label{display:block;font-size:13px;font-weight:600;color:var(--navy);margin-bottom:5px}
.syn-field input,.syn-field select,.syn-field textarea{width:100%;padding:11px 14px;border:1px solid var(--line-2);border-radius:6px;font-family:'Archivo';font-size:14.5px;color:var(--ink);background:#fff}
.syn-field input:focus,.syn-field select:focus,.syn-field textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(5,138,170,.15)}

.btn-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.btn.coa{background:var(--tint-2);color:var(--navy);border-color:var(--tint);justify-content:center}
.btn.coa:hover{background:var(--tint);border-color:var(--cyan)}
.btn.sample-btn{background:#e8f8f5;color:var(--green);border-color:#a3e4d7;justify-content:center}
.btn.sample-btn:hover{background:#d1f2eb;border-color:var(--green)}
.cart-actions{display:flex;flex-direction:column;gap:10px;margin-top:14px}

/* ---------- PRODUCT DETAIL STREAMLINED BOXES ---------- */
.pd-buy-box{background:var(--bg-2);border:1px solid var(--line-2);border-radius:12px;padding:20px 22px;margin-bottom:16px}
.pd-share-row{display:flex;justify-content:flex-end;margin-top:12px}
.pd-share-trigger{background:none;border:0;color:var(--cyan-dk);font-family:'Archivo';font-size:13.5px;font-weight:600;display:inline-flex;align-items:center;gap:6px;cursor:pointer;padding:4px 8px;border-radius:4px;transition:.15s}
.pd-share-trigger:hover{color:var(--navy);background:var(--tint-3)}
.syn-modal.sm-popover{max-width:440px}

/* ---------- UNIFORM PRODUCT DOCUMENTATION ACTIONS BAR ---------- */
.pd-doc-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.pd-doc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;font-family:'Archivo',sans-serif;font-size:13px;font-weight:600;color:var(--navy);background:var(--bg-2);border:1px solid var(--line-2);border-radius:8px;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease;text-decoration:none;text-align:center}
.pd-doc-btn:hover{background:var(--tint-3);border-color:var(--cyan-dk);color:var(--navy);box-shadow:0 2px 6px rgba(37,42,97,0.08)}
.pd-doc-btn.accent{background:var(--tint-2);color:var(--cyan-dk);border-color:#bce5f3}
.pd-doc-btn.accent:hover{background:var(--cyan-dk);color:#fff;border-color:var(--cyan-dk)}
.pd-doc-btn svg{flex:none}
@media (max-width:768px){.pd-doc-actions{grid-template-columns:1fr}}
/* The one action a product-tab section ends on (protocol guide, batch lookup).
   Sits after the content it follows from, with enough air to read as a control
   rather than another line of body copy. */
.pd-panel-act{margin:16px 0 6px}

/* ---------- AUTHENTIC 16-SECTION REACH SDS VIEWER STYLES ---------- */
.sds-modal-container{max-width:840px !important}
.sds-lang-note{background:#fff8e1;border:1px solid #e6c65c;border-left:4px solid #d9a406;border-radius:8px;padding:12px 16px;margin-bottom:16px;font-size:13px;line-height:1.55;color:#5c4708}
.sds-lang-note b{color:#4a3906}
.sds-lang-note a{color:#4a3906;text-decoration:underline}
/* One labelled entry of a safety data sheet section. Sub-numbering in bold
   on its own line, body under it, the way the printed sheets do it. */
.sds-row{margin:0 0 11px}
.sds-row:last-child{margin-bottom:0}
.sds-row b{color:var(--navy);font-weight:700}
.sds-doc-header{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:14px;border-bottom:2px solid var(--navy);margin-bottom:14px}
.sds-logo-block strong{font-size:18px;color:var(--navy);letter-spacing:0.5px;display:block}
.sds-logo-block span{font-size:11.5px;color:var(--muted);display:block}
.sds-title-block{text-align:right}
.sds-title-block h2{font-size:15px;color:var(--navy);margin:0;font-weight:700}
.sds-title-block h3{font-size:12px;color:var(--muted);margin:2px 0 0;font-weight:500}
.sds-ver-tag{font-size:11px;background:var(--tint-3);color:var(--navy);padding:2px 8px;border-radius:4px;display:inline-block;margin-top:4px;font-weight:700;border:1px solid var(--line)}

.sds-ghs-banner{background:#f8fafc;border:1px solid #cbd5e1;border-radius:8px;padding:12px 16px;margin-bottom:16px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px}
.sds-ghs-badge{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:12.5px;padding:4px 12px;border-radius:20px}
.sds-ghs-badge.safe{background:#e5f6ec;color:#0d8a4f;border:1px solid #a3e4d7}
.sds-ghs-tags{display:flex;gap:6px;flex-wrap:wrap}
.sds-tag{font-size:11px;font-weight:600;background:#fff;border:1px solid var(--line-2);padding:2px 8px;border-radius:4px;color:var(--navy)}

.sds-16-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-height:520px;overflow-y:auto;padding-right:6px}
.sds-16-sec{background:#fff;border:1px solid var(--line);border-radius:6px;padding:12px;box-shadow:0 1px 3px rgba(0,0,0,0.03)}
.sds-16-sec.full{grid-column:1 / -1}
.sds-16-num{font-size:11px;font-weight:800;color:var(--cyan-dk);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:3px}
.sds-16-title{font-size:13px;font-weight:700;color:var(--navy);margin-bottom:6px;border-bottom:1px dashed var(--line-2);padding-bottom:3px}
.sds-16-body{font-size:12px;color:var(--ink);line-height:1.45}
.sds-16-body ul{margin:4px 0 0 16px;padding:0}
.sds-16-body li{margin-bottom:3px}

/* ---------- CART SHIPPING TOP BANNER & COUNTRY SELECTOR ---------- */
.cart-ship-top-banner{background:var(--navy);color:#fff;padding:14px 16px;border-bottom:2px solid var(--cyan)}
.ship-top-progress-bar{height:6px;background:rgba(255,255,255,0.15);border-radius:4px;overflow:hidden;margin:0 0 8px}
.ship-top-progress-fill{height:100%;background:var(--cyan);width:0%;transition:width .3s ease}
.cart-ship-top-msg{font-size:12px;font-weight:600;color:#fff}

.cart-ship-country-box{background:var(--bg-2);border-top:1px solid var(--line);padding:10px 16px;margin-bottom:10px}
.cart-ship-country-box label{display:block;font-size:11px;font-weight:700;color:var(--navy);margin-bottom:4px;text-transform:uppercase;letter-spacing:0.3px}
.cart-ship-country-select{width:100%;font-family:'Archivo',sans-serif;font-size:12.5px;font-weight:600;color:var(--navy);background:#fff;border:1px solid var(--line-2);border-radius:6px;padding:7px 10px;cursor:pointer;outline:none}
.cart-ship-country-select:focus{border-color:var(--cyan-dk);box-shadow:0 0 0 2px rgba(9,186,220,0.15)}

/* ---------- NORM FINDER TAG CHIPS ---------- */
.norm-chips-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:10px 0}
.norm-chip{font-size:12px;font-weight:600;color:var(--navy);background:var(--tint-2);border:1px solid var(--line-2);padding:4px 10px;border-radius:14px;cursor:pointer;transition:.15s;text-decoration:none}
.norm-chip:hover,.norm-chip.on{background:var(--navy);color:#fff;border-color:var(--navy)}

/* ---------- ABOUT / LAB PAGE STYLES ---------- */
.about-hero{background:var(--navy);color:#fff;padding:60px 0 50px;border-bottom:3px solid var(--cyan)}
/* The breadcrumb defaults to --muted, which is tuned for light backgrounds and
   scores only 2.44:1 on this navy band. Lighten it inside dark heroes. */
.about-hero .crumb{color:#c4cfe6}
.about-hero .crumb a{color:#9db2e0}
.about-hero .crumb a:hover{color:#fff}
.about-hero h1{font-size:clamp(2rem,3.6vw,2.8rem);color:#fff;margin-bottom:14px}
.about-hero p{color:#d3daf6;font-size:17px;max-width:65ch}
.lab-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:30px 0}
.lab-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:24px;box-shadow:var(--sh)}
.lab-card .ic{width:42px;height:42px;border-radius:8px;background:var(--tint-2);color:var(--cyan-dk);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.lab-card h3{font-size:16px;color:var(--navy);margin-bottom:8px}
.lab-card p{font-size:13.5px;color:var(--ink);line-height:1.5}

/* ---------- PRINT STYLES ---------- */
@media print {
  @page {
    size: A4 portrait;
    margin: 10mm 12mm;
  }
  
  header, footer, main, section, nav, .topbar, .cart, .overlay, #overlay {
    display: none !important;
  }

  body {
    background: #ffffff !important;
    color: #000000 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body > *:not(.syn-modal-overlay) {
    display: none !important;
  }

  .syn-modal-overlay {
    position: static !important;
    background: transparent !important;
    display: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
  }

  .syn-modal-overlay.on {
    display: block !important;
  }

  .syn-modal {
    box-shadow: none !important;
    border: none !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
  }

  .syn-modal-header, .syn-modal-footer, .syn-modal-close, button {
    display: none !important;
  }

  .syn-modal-body > .form-grid-2,
  .syn-modal-body > .syn-field,
  .syn-modal-body > div[style*="font-weight:700"] {
    display: none !important;
  }

  .coa-doc, #proforma-doc, #sds-doc-content {
    display: block !important;
    border: 1px solid #ccc !important;
    padding: 16px !important;
    margin: 0 !important;
    page-break-inside: avoid;
  }
}

/* ---------- PRODUCT PAGE: DOCUMENT LINKS ----------
   Sector convention (verified on Biochemazone, Pickering and Merck/Sigma in
   2026): quality documents are NOT buttons in the buy box — they live in a
   documents area, typically searched by lot number. Demoting them from three
   competing buttons to a quiet text row keeps them one click away while leaving
   "Add to cart" / "Request a quote" / free sample as the only real CTAs. */
.pd-docs{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px;font-size:13px}
.pd-doclink{background:none;border:0;padding:0;font-family:'Archivo';font-size:13px;
  color:var(--cyan-dk);font-weight:600;cursor:pointer;text-decoration:none;
  border-bottom:1px solid transparent;transition:.15s}
.pd-doclink:hover{border-bottom-color:var(--cyan-dk)}

/* ---- Contact block (#contact) ---------------------------------------------
   The form used to inherit `.news form{display:flex}`, written for the old
   single-input newsletter strip: every field ended up side by side on one row,
   squashed to ~90px wide. It now has its own layout — two columns for the
   short fields, full width for the message and the submit — which is the
   pattern every B2B supplier uses.                                          */
.ctblock{grid-template-columns:1fr 1.15fr;gap:44px;align-items:start;padding:44px}
.ct-intro .eyebrow{color:var(--yellow)}
.ct-intro h2{margin:6px 0 12px}
.ct-intro p{color:#c4cfe6;line-height:1.6;max-width:44ch}
.ct-card{margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.16);
  font-size:14px;color:#dbe3f5;line-height:1.85}
.ct-org{font-weight:700;color:#fff;font-size:15px;margin-bottom:2px}
.ct-card a{color:var(--yellow);text-decoration:none;font-weight:600}
.ct-card a:hover{text-decoration:underline}

.news form.ctform{display:block;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:10px;padding:28px}
.ct-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ctform .syn-field{margin-bottom:16px}
.ctform label{color:#fff;font-size:12.5px;font-weight:600;letter-spacing:.01em;margin-bottom:6px}
.news .ctform input,.news .ctform select,.news .ctform textarea{width:100%;box-sizing:border-box;min-height:44px;
  border:1px solid rgba(255,255,255,.2);border-radius:6px;padding:11px 13px;
  font-family:'Archivo';font-size:14.5px;color:var(--ink);background:#fff}
.news .ctform textarea{min-height:120px;resize:vertical;line-height:1.5}
.news .ctform select{appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2320264a' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:11px;padding-right:34px}
.ctform input:focus,.ctform select:focus,.ctform textarea:focus{outline:none;border-color:var(--yellow);
  box-shadow:0 0 0 3px rgba(232,163,0,.35)}
.ctform input::placeholder,.ctform textarea::placeholder{color:#8a93a8}
.ct-send{width:100%;justify-content:center;text-align:center;font-weight:700;min-height:48px}
.ct-note{color:#a9b4cf;font-size:12.5px;line-height:1.5;margin-top:12px}
.ct-ok{display:none;background:#e5f6ec;color:var(--green);padding:14px;border-radius:8px;
  margin-top:12px;font-size:14px}

@media (max-width:1000px){
  .ctblock{grid-template-columns:1fr;gap:30px;padding:30px}
}
@media (max-width:560px){
  .ct-row{grid-template-columns:1fr;gap:0}
  .news form.ctform{padding:20px}
}
.ct-points{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:11px}
.ct-points li{position:relative;padding-left:24px;color:#dbe3f5;font-size:14.5px;line-height:1.55}
.ct-points li::before{content:"";position:absolute;left:0;top:7px;width:9px;height:9px;
  border-radius:2px;background:var(--yellow)}
.ct-note a{color:#dbe3f5;text-decoration:underline}
.ct-note a:hover{color:#fff}

/* The About page's three lab cards stayed in a 3-column grid at every width,
   so the third card hung 79px off the right edge of a phone screen. */
@media (max-width:1000px){ .lab-grid{grid-template-columns:repeat(2,1fr);gap:16px} }
@media (max-width:640px){ .lab-grid{grid-template-columns:1fr} }

/* ---- Product page, 2026-07 simplification pass ---------------------------
   Driven by a benchmark of Ricca, Pickering, Biochemazone, ESSLab and Lab Pro:
   in this sector the most credible supplier has the shortest page and one
   call to action. We were at 13 CTAs.                                      */
.pd-ref{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:6px 0 10px}
.pd-sku{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--navy);
  background:var(--tint-3);border:1px solid var(--line);border-radius:4px;padding:3px 8px}
/* Custom pH, bulk and public tenders were one grey sentence under the buy
   box, which is where a reader stops. It is the highest-value request on the
   page and now reads as its own object: left rule in the accent, its own
   ground, the link carrying the weight. */
.pd-quote-line{margin-top:14px;font-size:13.5px;color:var(--ink);line-height:1.55;
  background:var(--tint-3);border:1px solid var(--line-2);border-left:3px solid var(--cyan);
  border-radius:8px;padding:11px 14px}
.pd-quote-line a{color:var(--cyan-dk);font-weight:700;text-decoration:underline;
  text-underline-offset:2px}
.pd-sample-band{display:flex;align-items:center;justify-content:space-between;gap:20px;
  flex-wrap:wrap;background:var(--tint-3);border:1px solid var(--line);border-radius:8px;
  padding:18px 22px;margin:8px 0 4px}
.pd-sample-band b{display:block;color:var(--navy);font-size:15px;margin-bottom:3px}
.pd-sample-band span{font-size:13.5px;color:var(--ink);line-height:1.5;max-width:62ch;display:block}
@media (max-width:640px){ .pd-sample-band{flex-direction:column;align-items:flex-start} }
.pcard-go{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;
  color:var(--cyan-dk);text-decoration:none;padding:8px 0;min-height:24px}
.pcard-go:hover{text-decoration:underline}

/* ---- Product Q&A -------------------------------------------------------- */
.pfaq{border-top:1px solid var(--line);padding-top:28px;margin-top:8px}
.pfaq h2{font-size:20px;color:var(--navy);margin-bottom:14px}
.pfaq-i{border:1px solid var(--line);border-radius:8px;margin-bottom:10px;background:#fff}
.pfaq-i summary{cursor:pointer;padding:14px 18px;font-weight:600;font-size:15px;color:var(--navy);
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:24px}
.pfaq-i summary::-webkit-details-marker{display:none}
.pfaq-i summary::after{content:"+";font-family:var(--mono);font-size:18px;color:var(--cyan-dk);flex:0 0 auto}
.pfaq-i[open] summary::after{content:"\2212"}
.pfaq-i p{padding:0 18px 16px;font-size:14.5px;line-height:1.65;color:var(--ink);margin:0}
.pfaq-i a{color:var(--cyan-dk);font-weight:600;white-space:nowrap}
.guide-byline{color:#9db2e0;font-size:13px;margin-top:14px;font-family:var(--mono)}

/* "Which one do I need?" table on the category pages */
/* The per-standard prose, below the grid instead of above it. Measured in two
   columns because a 1240px-wide single column of body text runs to ~150
   characters a line, roughly twice a comfortable measure. */
.cat-depth{padding-top:6px;border-top:1px solid var(--line)}
.cat-depth h2{font-size:20px;color:var(--navy);margin-bottom:16px}
.cat-depth-b{columns:2;column-gap:48px;color:var(--ink);font-size:15px;line-height:1.65}
.cat-depth-b p{margin-bottom:12px;break-inside:avoid}
.cat-faq{padding-top:6px}
.cat-faq h2{font-size:20px;color:var(--navy);margin-bottom:14px}
.cat-faq .pfaq{border-top:0;padding-top:0;margin-top:0}
.cat-faq .pfaq-a{padding:0 18px 16px;font-size:14.5px;line-height:1.65;color:var(--ink)}
.cat-faq .pfaq-a p{margin:0 0 8px}
.cat-faq .pfaq-a ul{margin:0;padding-left:20px}
.cat-faq .pfaq-a li{margin-bottom:6px}
.cat-faq .pfaq-a a{color:var(--cyan-dk);font-weight:600}
@media (max-width:820px){
  .cat-depth-b{columns:1}
}

/* The search field was hidden outright below 900px, which on a catalogue of 15
   standard-referenced fluids is the one control a phone visitor most needs —
   and the bilingual search work is invisible there. It now moves to its own row
   under the logo instead of disappearing. */
@media (max-width:1000px){
  .header .wrap{flex-wrap:wrap;row-gap:10px}
  .searchbar{display:flex;order:99;flex:1 0 100%;max-width:none}
  .searchbar input{font-size:15px;min-height:44px}
  .searchbar button{min-width:48px}
}
.pd-equiv{font-size:12.5px;color:var(--muted);font-family:var(--mono)}
/* the trust row was falling 3 + 1, leaving the fourth item alone on its line */

/* Between the burger breakpoint (900px) and roughly 1150px the horizontal nav
   has to fit eleven items. The French labels are longer than the English ones
   ("Gros volumes / OEM", "Ressources & Outils"), and adding "Digestif" with the
   digestive family pushed the row to 1097px inside a 1024px container: 73px of
   sideways scroll on every French page. Tighten the row instead of letting it
   spill. Found by testing 1024px, which the earlier sweeps skipped. */
@media (min-width:1001px) and (max-width:1180px){
  .mainnav .wrap{gap:2px}
  .mainnav .navitem>a,.mainnav .wrap>a{padding-left:9px;padding-right:9px;font-size:14px}
}

/* Standards on the category tiles. They replaced the separate standards wall:
   the designations are what a test engineer scans for, so they belong where the
   families are chosen rather than in a block of their own further down. */
.cat-lead{max-width:66ch;color:var(--muted);font-size:14.5px;margin:-6px 0 22px}

.cat-stds{display:flex;flex-wrap:wrap;align-content:flex-start;justify-content:center;
  gap:4px;min-height:24px}
.cat-std{font-family:var(--mono);font-size:10.5px;font-weight:500;color:var(--cyan-dk);
  background:var(--tint-3);border:1px solid var(--line);border-radius:3px;padding:1px 5px;
  white-space:nowrap;line-height:1.55;letter-spacing:-.01em}

/* Sample offer as a single strip. It was a heading plus three cards arguing
   product chemistry, which duplicated the guides directly below and did not
   support the free-sample offer its own title announced. */
.samplestrip{display:flex;align-items:center;justify-content:space-between;gap:32px;
  flex-wrap:wrap;background:var(--tint-3);border:1px solid var(--line);border-radius:10px;
  padding:28px 32px}
.samplestrip h2{font-size:1.5rem;margin:4px 0 8px}
.samplestrip p{color:var(--ink);font-size:14.5px;line-height:1.6;max-width:62ch;margin:0}
@media (max-width:700px){ .samplestrip{padding:22px;gap:18px} }

/* Below 1100px the tiles narrow to a 180px chip zone, and the longest pairs
   ("DIN 53160-1" + "ISO 10271" needs 186px, "ISO 11948" + "EN ISO 20696" 194px)
   wrapped to a second line, making those two tiles 27px taller than the rest.
   Slightly tighter chips and less side padding keep every family on one line. */
@media (max-width:1100px){
  .cat-ov{padding-left:10px;padding-right:10px}
  .cat-std{font-size:9.5px;padding:1px 4px}
}

/* Sample / bulk band. Two earlier versions were wrong in opposite directions:
   an icon-in-a-rounded-square + eyebrow + heading + paragraph + mono line +
   filled button per half (the generic card pattern, 386px), then a bare label +
   sentence + link (a footnote, 165px). The fix is density of INFORMATION, not
   of decoration.

   Taken from Pickering, the nearest competitor: they frame the custom-supply
   offer as the question the buyer is already asking - "Can't find the exact
   Artificial Body Fluid you need?" - and answer it with facts and one link. No
   band, no button, no icon. So: left column asks, right column answers with the
   three or four facts that actually decide it, as a hairline-separated spec
   row. Substance carries the weight that decoration was carrying. */
.duosec{padding-top:10px;padding-bottom:10px}
/* Same colour code as the hero: identical gradient, white type, #c9d3ea body,
   amber filled + light ghost buttons. Reuses .btn.yellow and .btn.ghost.light
   rather than defining band-local buttons, so the two stay in sync. */
.duoband{display:grid;grid-template-columns:1fr 1fr;border-radius:10px;overflow:hidden;
  background:linear-gradient(120deg,var(--navy) 0%,var(--navy-3) 55%,var(--cyan) 145%);
  color:#fff}
/* Two halves side by side. Each is a question and the button that answers it -
   the spec rows that lived here moved out, they belong on oem.html where the
   buyer is already reading detail, not on a homepage band. */
.duo{display:flex;flex-direction:column;align-items:flex-start;padding:26px 30px}
.duo+.duo{border-left:1px solid rgba(255,255,255,.16)}
.duo-k{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--yellow);margin-bottom:8px}
.duo-q{color:#fff;font-size:17px;font-weight:700;line-height:1.35;margin:0 0 18px;
  max-width:34ch}
.duo .btn{margin-top:auto}
@media (max-width:800px){
  .duoband{grid-template-columns:1fr}
  .duo+.duo{border-left:0;border-top:1px solid rgba(255,255,255,.16)}
  .duo{padding:22px 20px}
  .duo-q{margin-bottom:16px}
}

/* ---- legal pages -------------------------------------------------------
   Mentions légales, CGV and privacy policy. These are long, they are read
   under pressure (a procurement officer checking a clause, a buyer looking
   for the payment terms), so they get a contents list, anchored headings
   and real tables instead of one wall of prose. */
.legal-upd{font-family:var(--mono);font-size:12.5px;color:var(--muted);
  margin:0 0 26px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.legal-toc{background:var(--tint-3);border-radius:8px;padding:20px 24px;margin-bottom:34px}
.legal-toc h2{font-size:13px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);margin:0 0 12px;font-family:var(--mono);font-weight:600}
.legal-toc ol{margin:0;padding-left:0;list-style:none;columns:2;column-gap:32px}
.legal-toc li{margin-bottom:7px;font-size:14.5px;break-inside:avoid}
.legal-toc a{color:var(--blue);text-decoration:none}
.legal-toc a:hover{text-decoration:underline}
/* Anchor targets sit under the sticky header without scroll-margin. */
.wrap h2[id]{scroll-margin-top:110px}
.legal-tbl{overflow-x:auto;margin:0 0 20px}
.legal-tbl table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:520px}
.legal-tbl th{text-align:left;font-size:11.5px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted);font-family:var(--mono);font-weight:600;
  padding:0 14px 8px 0;border-bottom:1px solid var(--line-2)}
.legal-tbl td{padding:11px 14px 11px 0;border-bottom:1px solid var(--line);
  vertical-align:top;color:var(--ink)}
.legal-tbl tr:last-child td{border-bottom:0}
.legal-foot{margin-top:34px;padding-top:20px;border-top:1px solid var(--line);
  color:var(--muted);font-size:14.5px}
@media (max-width:640px){
  .legal-toc ol{columns:1}
  .legal-toc{padding:16px 18px}
}
/* Legal prose needs air between a clause and the next heading: these pages are
   scanned for one article, and a heading glued to the paragraph above it reads
   as part of that paragraph. Scoped to the narrow legal column so no other
   section's rhythm changes. */
.wrap[style*="820px"] h2{margin-top:34px;font-size:19px}
.wrap[style*="820px"] h2:first-of-type{margin-top:0}
.wrap[style*="820px"] p{line-height:1.62;margin-bottom:13px}
.wrap[style*="820px"] .legal-toc h2{margin-top:0}

/* ---- resources & tools -------------------------------------------------
   These five pages were built from inline styles repeated generator by
   generator, which is why they had drifted apart visually. One set of classes
   instead, so a change to the tool chrome happens in one place. */
.res-hero{background:var(--navy);color:#fff;padding:40px 0 44px}
.res-hero h1{font-size:clamp(1.7rem,3.2vw,2.5rem);font-weight:800;margin:10px 0;
  letter-spacing:-0.02em;max-width:30ch;
  /* Explicit, not inherited. The global h1,h2,h3,h4 rule sets color:var(--navy),
     and a rule always beats inheritance, so an h1 inside a navy banner renders
     navy on navy and disappears. .about-hero h1 carries the same override for
     the same reason. */
  color:#fff}
.res-hero .lead{color:#c4cfe6;max-width:74ch;font-size:16px;line-height:1.6}
.res-hero .crumb a{color:#9db2e0}
.res-hero .crumb span{color:#fff}

/* A tool panel. One card, generous padding, never a card inside a card. */
.res-panel{background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:30px;box-shadow:var(--sh)}
.res-panel+.res-panel{margin-top:24px}
.res-step{font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.res-panel h2{font-size:19px;color:var(--navy);margin:4px 0 6px}
.res-sub{color:var(--muted);font-size:14px;line-height:1.55;margin:0 0 20px}

/* Input grid shared by the three calculators. */
.res-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:20px;background:var(--bg-2);border-radius:10px;padding:22px;margin-bottom:18px}
.res-f label{display:block;font-weight:600;font-size:13px;color:var(--navy);
  margin-bottom:6px}
.res-f input[type=number],.res-f input[type=text],.res-f select{width:100%;
  padding:10px 12px;border:1px solid var(--line-2);border-radius:6px;
  font-size:15px;font-weight:600;color:var(--ink);background:#fff;
  font-family:inherit;box-sizing:border-box}
.res-f input[type=range]{width:100%;margin:4px 0}
.res-f .hint{display:block;font-size:12px;color:var(--muted);line-height:1.45;
  margin-top:6px}
.res-f .val{color:var(--cyan-dk);font-weight:700;font-family:var(--mono);
  font-size:13px}
.res-note{font-size:12.5px;color:var(--muted);line-height:1.5;
  background:var(--tint-3);border-radius:8px;padding:12px 14px;margin-bottom:22px}

/* Result panel. Readable at a glance, printable. */
.res-out{background:var(--tint-2);border:1px solid #c4cfe6;border-radius:12px;
  padding:24px}
.res-out-dark{background:var(--navy);color:#fff;border-radius:12px;padding:26px}
.res-out-dark h2,.res-out-dark h3{color:#fff}
.res-big{font-family:var(--mono);font-size:27px;font-weight:700;
  color:var(--cyan-dk);line-height:1.15}
.res-out-dark .res-big{color:#7cc7f5}
.res-kv{display:flex;justify-content:space-between;gap:16px;font-size:14px;
  padding:9px 0;border-bottom:1px solid var(--line)}
.res-out-dark .res-kv{border-bottom-color:rgba(255,255,255,.14);color:#cbd5e1}
.res-kv:last-child{border-bottom:0}
.res-kv b{color:var(--navy);font-family:var(--mono);font-size:13.5px;
  /* Not nowrap. French values run 20 to 30 percent longer than the English and
     pushed past a 390 px viewport ("6,5 ± 0,1 (personnalisable sur demande)"),
     the same trap the matrix cells hit. */
  text-align:right;overflow-wrap:break-word;min-width:0}
.res-out-dark .res-kv b{color:#fff}
.res-flags{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.res-flag{background:#fff;border:1px solid var(--line-2);border-radius:6px;
  padding:5px 11px;font-size:12.5px;color:var(--navy)}
.res-warn{background:#fff8e6;border:1px solid #e6cf94;border-radius:8px;
  padding:13px 15px;font-size:13.5px;color:#6b5320;line-height:1.55;margin-top:16px}
.res-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}

/* Sector / compound picker: a row of toggles, not a select, so every option is
   visible and indexable. */
.res-pick{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.res-pick button{font-family:inherit;font-size:13px;font-weight:600;
  padding:9px 14px;border-radius:7px;border:1px solid var(--line-2);
  background:#fff;color:var(--navy);cursor:pointer;text-align:left}
.res-pick button:hover{border-color:var(--cyan)}
.res-pick button[aria-pressed=true]{background:var(--navy);border-color:var(--navy);
  color:#fff}

/* Matrix table. Wide, so it scrolls in its own box and never the page. */
.res-tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px}
.res-tbl{width:100%;border-collapse:collapse;font-size:13.5px;min-width:1080px;
  table-layout:fixed}
/* Six columns of prose cramp badly if the browser is left to guess. Fixed
   proportions instead, tuned to the longest real content in each: the standard
   designation plus its national adoptions, and the product name, are the two
   that wrapped to four lines. */
.res-tbl col.c-std{width:13%}
.res-tbl col.c-sec{width:23%}
.res-tbl col.c-rep{width:17%}
.res-tbl col.c-ph{width:13%}
.res-tbl col.c-sto{width:16%}
.res-tbl col.c-ref{width:18%}
.res-tbl th{text-align:left;padding:11px 14px;background:var(--bg-2);
  font-size:11px;text-transform:uppercase;letter-spacing:.05em;
  font-family:var(--mono);font-weight:600;color:var(--muted);
  border-bottom:1px solid var(--line-2);position:sticky;top:0}
.res-tbl td{padding:12px 14px;border-bottom:1px solid var(--line);
  vertical-align:top;color:var(--ink);line-height:1.45}
.res-tbl tbody tr:last-child td{border-bottom:0}
.res-tbl tbody tr:hover{background:var(--tint-3)}
/* No nowrap in a fixed-layout table: the column cannot grow, so the text
   leaves the cell and lands on top of the next column instead of wrapping.
   "EN ISO 20696 (ex-EN 1616)" and "15-25 °C, no cold chain" both did. */
.res-tbl .std{font-family:var(--mono);font-weight:600;color:var(--navy);
  font-size:13px;overflow-wrap:break-word}
.res-tbl .eq{display:block;font-family:var(--mono);font-size:11.5px;
  color:var(--muted);margin-top:3px;white-space:normal;overflow-wrap:break-word}
.res-tbl .num{font-family:var(--mono);font-size:13px;overflow-wrap:break-word}
.res-tbl .sku{font-family:var(--mono);font-weight:600;color:var(--navy);
  font-size:12.5px}
.res-tbl .sku a{color:var(--blue);font-weight:600;text-decoration:none;
  display:block;font-family:var(--sans,inherit);font-size:13px;margin-top:3px}
.res-tbl .sku a:hover{text-decoration:underline}
.res-empty{padding:26px;text-align:center;color:var(--muted);font-size:14px}
.res-bar{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;
  justify-content:space-between;margin-bottom:18px}
.res-bar .grow{flex:1 1 240px}
@media (max-width:560px){
  /* Below this the label and the value no longer fit on one line in either
     language, so stack them rather than compress both. */
  .res-kv{flex-direction:column;gap:2px}
  .res-kv b{text-align:left}
}
@media (max-width:700px){
  .res-panel{padding:22px 18px}
  .res-grid{padding:18px}
  .res-out,.res-out-dark{padding:20px 18px}
}
@media print{
  header,.mainnav,footer,.res-cta,.res-pick,.res-bar button{display:none!important}
  .res-hero{background:#fff!important;color:#000!important;padding:0 0 12px}
  .res-hero h1,.res-hero .lead{color:#000!important}
  .res-out-dark{background:#fff!important;color:#000!important;
    border:1px solid #999!important}
  .res-out-dark .res-kv,.res-out-dark .res-kv b{color:#000!important}
  .res-panel{box-shadow:none!important;break-inside:avoid}
}

/* ---- whole-card click target ------------------------------------------
   A card that shows a title, a summary and a "read more" link is one object,
   so the whole of it should be the click target and not just the twelve
   characters of the link. The stretched-pseudo-element pattern rather than
   wrapping the card in an <a> or adding a click handler: the real anchor keeps
   the focus ring and the status-bar URL, the markup stays valid, and no
   JavaScript is involved.

   Only cards carrying .clickcard get this, and a build guard checks that each
   one has exactly one destination outside its buy row. Applied to product
   cards, the resources tool and guide cards, and the homepage "From the lab"
   cards. Deliberately NOT applied to .ct-card: its only link is a mailto, and
   opening a mail client because someone clicked near an address is not what
   they asked for.

   Trade-off, accepted: text inside a stretched card cannot be selected by
   dragging. These cards are navigation, not copy to quote. */
.clickcard{position:relative}
.clickcard .pbody h3 a::after,
.clickcard .nb > a[href]::after,
.clickcard > a[href]::after{content:"";position:absolute;inset:0;z-index:1}
/* The buy row sits above the overlay so Add to cart, the price and any
   quote link inside it stay independently clickable.
   position is set twice on purpose. On a pointer device the buy row is already
   position:absolute inside a hover media query at equal specificity, and this
   block is later in the file, so a bare position:relative here won the cascade,
   dropped the row back into the flow and made every product card 353px tall
   with a hidden strip taking up space. The media query below hands it back. */
.clickcard .pbuy{position:relative;z-index:2}
@media(hover:hover) and (pointer:fine){
  .clickcard .pbuy{position:absolute}
}
.clickcard:hover{border-color:var(--cyan)}

/* Below this the price and two selectors no longer fit on one line, so the box
   goes back to stacking rather than squeezing three things into 340px. */
@media (max-width:700px){
  /* One column below this, so the wrappers come back: with display:contents
     their children would each claim a row of their own and the quantity box
     would end up on a line by itself.

     The selectors repeat :not(.pd-buy-box-req) on purpose. :not() contributes
     the specificity of its argument, so the desktop rules score 0,0,3,0 and a
     bare .pd-buy-box>.pd-opts here scores 0,0,2,0 and loses whatever the order.
     The box kept its three columns at 390px and pushed the whole product layout
     to 529px wide. */
  .pd-buy-box{grid-template-columns:1fr}
  .pd-buy-box:not(.pd-buy-box-req)>.pd-opts,
  .pd-buy-box:not(.pd-buy-box-req)>.pd-buy{display:flex}
  .pd-buy-box:not(.pd-buy-box-req)>.pd-price,
  .pd-buy-box:not(.pd-buy-box-req)>.pd-opts,
  .pd-buy-box:not(.pd-buy-box-req)>.pd-buy{grid-column:1;grid-row:auto}
  .pd-buy-box:not(.pd-buy-box-req)>.pd-price{align-self:start}
  .pd-buy-box:not(.pd-buy-box-req)>.pd-opts{justify-self:start}
}

/* A box whose price is a sentence rather than a figure keeps the stacked
   layout: at 24px "Price on request" is 209px wide, and sharing the row with
   two 150px selectors wraps them onto a second line and bottom-aligns the
   price against the gap it created. */
.pd-buy-box-req{grid-template-columns:1fr}
.pd-buy-box-req>.pd-opts{justify-self:start}

/* --- guide typography and the read-next strip ---------------------------
   The guide bodies carried line-height and colour as inline styles on every
   paragraph, which is why the measure could not be tuned: an inline style
   beats any rule a stylesheet can write. They are classes now, so the text
   can breathe and one edit reaches all thirteen guides in three languages. */
.guide-body{font-size:16.5px}
.guide-body h2{color:var(--navy);font-size:1.28rem;line-height:1.3;margin:44px 0 14px;letter-spacing:-.01em}
.guide-body h2:first-child{margin-top:4px}
.guide-body p{line-height:1.78;color:var(--ink);margin:0 0 22px;max-width:74ch}
.guide-body p.note{color:var(--muted);font-size:14px;line-height:1.7}
.guide-body table{margin:6px 0 26px}
.guide-body ul,.guide-body ol{line-height:1.78;margin:0 0 22px;padding-left:22px}
.guide-body li{margin-bottom:8px}
.guide-body b{color:var(--navy)}
@media(max-width:700px){.guide-body{font-size:16px}.guide-body h2{margin:34px 0 12px}}

/* A guide ended on its product and nowhere else. The reader whose method
   fixes a pH we do not list had read the whole protocol to reach a dead
   end. One line, not a second box. */
.guide-quote{max-width:900px;margin:18px auto 0;padding:14px 18px;
  background:var(--tint-3);border:1px solid var(--line-2);border-left:3px solid var(--yellow);
  border-radius:8px;font-size:14px;line-height:1.55;color:var(--ink)}
.guide-quote a{color:var(--cyan-dk);font-weight:700}
.relg-wrap{margin-top:34px;padding-top:6px}
.relg-h{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
        font-weight:700;margin:0 0 14px}
.relg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.relg{display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid var(--line);
      border-radius:10px;padding:16px 18px;text-decoration:none;transition:border-color .15s,box-shadow .15s}
.relg:hover{border-color:var(--cyan-dk);box-shadow:var(--sh)}
.relg-k{font-size:11px;font-weight:700;color:var(--cyan-dk);text-transform:uppercase;letter-spacing:.04em}
.relg-t{font-size:14px;font-weight:600;color:var(--navy);line-height:1.4}

/* Stop the wheel handing over to the page once the panel hits its end. */
.cart-body{overscroll-behavior:contain}
.syn-modal-overlay{overscroll-behavior:contain}

/* The modal is a flex column capped at 90vh, and .syn-modal-body is the part
   meant to scroll. In four modals the content is wrapped in a <form>, so the
   body was a flex child of the form instead of the modal: it sized to its
   content, never overflowed, and the modal clipped the lot with its own
   overflow:hidden. The form has to be the flex column, and min-height:0 lets
   the scrolling child shrink below its content, which is the part that is easy
   to miss. */
.syn-modal>form{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.syn-modal-body{min-height:0}

/* The buyer's own carrier account. A checkbox that reveals one field, kept
   visually quieter than the required fields around it because most orders
   will not use it. */
.own-carrier{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line-2)}
.own-carrier-t{display:flex;align-items:center;gap:9px;font-size:13.5px;
  color:var(--ink);cursor:pointer;font-weight:500}
.own-carrier-t input{width:16px;height:16px;accent-color:var(--cyan);cursor:pointer;flex:none}
.own-carrier-acct{display:none;margin-top:10px;width:100%;padding:9px 12px;
  border:1px solid var(--line-2);border-radius:6px;font-size:13.5px;
  font-family:var(--mono);box-sizing:border-box;background:var(--bg)}
.own-carrier-acct:focus{outline:2px solid var(--cyan);outline-offset:1px;border-color:var(--cyan)}

/* The two facts a purchasing department screens on, stated once, on the page
   where a volume buyer lands. */
.oem-facts{max-width:70ch;margin:18px 0 0;font-size:14.5px;line-height:1.65;
  color:var(--muted);padding-left:14px;border-left:2px solid var(--cyan)}

/* The credit rule, stated against the basket the buyer is looking at. Neutral
   when nothing is owed now, amber when a deposit is: a colour change is the
   fastest way to read "this order behaves differently". */
.credit-note{display:none;margin-top:14px;padding:11px 14px;border-radius:6px;
  font-size:13.5px;line-height:1.5;background:var(--tint-2);
  border:1px solid var(--tint);color:var(--navy)}
.credit-note.over{background:#fff8e1;border-color:#e6c65c;color:#5c4708;font-weight:500}

/* The two acknowledgements under the order form. Aligned to the top of the box
   rather than centred, so a wrapping second line does not push the tick out of
   line with the sentence it belongs to. */
.ack{display:flex;align-items:flex-start;gap:9px;margin-top:12px;
  font-size:13.5px;line-height:1.5;color:var(--ink);cursor:pointer}
.ack input{margin-top:2px;flex:0 0 auto;width:15px;height:15px;accent-color:var(--cyan-dk);cursor:pointer}
.ack a{color:var(--cyan-dk);text-decoration:underline}
/* The quote a purchase order continues from, stated once at the top of the
   form so the buyer can see the two documents are linked. */
.po-quote-ref{margin-bottom:14px;padding:8px 12px;border-radius:6px;
  background:var(--tint-2);border:1px solid var(--tint);
  font-size:13px;color:var(--navy);font-weight:600}

/* The line shown once a form has been sent (or has failed). In the site's own
   blue tint with a cyan rule, like the other notes, rather than a green alert. */
.mail-sent{display:none;background:var(--tint-2);border:1px solid var(--tint);
  border-left:3px solid var(--cyan);color:var(--navy);font-weight:500;
  padding:12px 14px;border-radius:var(--radius);font-size:14px;line-height:1.55;margin-top:12px}
.mail-sent .mail-err{color:var(--red)}
/* Destination picker in the cart footer, above the subtotal. */
.cart-ship-c{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.cart-ship-c label{font-size:12.5px;color:var(--muted);white-space:nowrap}
.cart-ship-c select{flex:1 1 auto;min-width:0;padding:7px 10px;font-size:13px;
  border:1px solid var(--line-2);border-radius:6px;background:#fff;color:var(--navy)}

/* A field the quote cannot do without, and the sentence that says which.
   The modal is not a form, so this is the only feedback there is. */
.syn-field input.err{border-color:#d4574a;background:#fff7f6}
.form-err{background:#fdecea;border:1px solid #f0bcb5;color:#8c2f24;
  padding:9px 12px;border-radius:6px;font-size:13px;line-height:1.5;margin-bottom:12px}

/* Shown only when the message went to the clipboard because the link could not
   carry it. Amber, not green: something the reader has to act on. */
.mail-long{background:#fff8e1;border:1px solid #e6c65c;color:#5c4708;
  padding:9px 12px;border-radius:6px;font-size:13px;line-height:1.5;margin-bottom:10px}

/* ---------- CUSTOM FORMULATION PAGE ----------
   The technical-envelope lists and the enquiry form. Field styling is the
   same rule set as .syn-field so the page cannot drift from the modals; only
   the two-column row and the constraint checkboxes are new. */
.cf-list{margin:10px 0 0;padding-left:18px}
.cf-list li{font-size:14.5px;line-height:1.65;color:var(--ink);margin-bottom:7px}
.cf-steps{counter-reset:cfs;list-style:none;margin:12px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 26px;max-width:820px}
.cf-steps li{counter-increment:cfs;position:relative;padding-left:27px;font-size:14.5px;
  line-height:1.55;color:var(--ink)}
.cf-steps li::before{content:counter(cfs);position:absolute;left:0;top:2px;width:19px;height:19px;
  border-radius:50%;background:var(--navy);color:#fff;font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center}
@media(max-width:700px){.cf-steps{grid-template-columns:1fr}}
.cf-sched{max-width:70ch;margin:14px 0 0;font-size:14.5px;line-height:1.6;color:var(--muted)}
.cf-sched a{color:var(--cyan-dk);font-weight:600;white-space:nowrap}
.cf-form{max-width:760px;margin-top:6px}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cf-fld{margin-bottom:14px}
.cf-fld label{display:block;font-size:13px;font-weight:600;color:var(--navy);margin-bottom:5px}
.cf-fld input,.cf-fld select,.cf-fld textarea{width:100%;padding:11px 14px;border:1px solid var(--line-2);
  border-radius:6px;font-family:'Archivo';font-size:14.5px;color:var(--ink);background:#fff}
.cf-fld textarea{resize:vertical;line-height:1.55}
.cf-fld input:focus,.cf-fld select:focus,.cf-fld textarea:focus{outline:none;border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(5,138,170,.15)}
.cf-chks{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px 18px;margin-top:4px}
/* The technical fields fold away. Nine of them ahead of the send button read
   as a supplier questionnaire, and a first enquiry does not survive one. The
   four that identify the request stay open; the rest are for whoever has the
   numbers to hand. */
.cf-more{border:1px solid var(--line-2);border-radius:10px;background:var(--bg-2);
  padding:0 16px;margin:4px 0 20px}
.cf-more>summary{cursor:pointer;padding:13px 0;font-size:14px;font-weight:600;
  color:var(--navy);list-style:none}
.cf-more>summary::-webkit-details-marker{display:none}
.cf-more>summary::before{content:"+";display:inline-block;width:16px;font-weight:700;
  color:var(--cyan-dk)}
.cf-more[open]>summary::before{content:"\2212"}
.cf-more[open]>summary{border-bottom:1px solid var(--line);margin-bottom:16px}
.cf-more>*:last-child{margin-bottom:16px}
.cf-chk{display:flex;align-items:flex-start;gap:8px;font-size:14px;color:var(--ink);line-height:1.5;cursor:pointer}
.cf-chk input{width:auto;margin-top:3px;flex:0 0 auto}
@media(max-width:640px){.cf-row{grid-template-columns:1fr;gap:0}}