/* ===================================================================
   AMAN INDUSTRY — B2B website design system
   Brand: black + orange (from logo). Swap brand colours in :root below.
   =================================================================== */

:root{
  /* ---- BRAND COLOURS (change these to match Aman's exact brand) ---- */
  --accent:      #F07A1A;   /* Aman orange */
  --accent-dark: #d2640b;
  --accent-soft: #fff2e6;
  --ink:         #16181d;   /* near-black */
  --ink-2:       #232730;

  /* ---- neutrals ---- */
  --bg:        #ffffff;
  --bg-soft:   #f5f6f8;
  --bg-dark:   #15171c;
  --line:      #e6e8ec;
  --text:      #1f2329;
  --muted:     #6b7280;
  --white:     #ffffff;

  /* ---- system ---- */
  --container: 1240px;
  --radius:    14px;
  --radius-sm: 9px;
  --shadow:    0 6px 24px rgba(20,24,33,.08);
  --shadow-lg: 0 18px 50px rgba(20,24,33,.16);
  --ease:      .25s cubic-bezier(.4,0,.2,1);
  --font: "Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:96px}  /* anchor jumps clear the sticky header */
body{
  margin:0;font-family:var(--font);color:var(--text);background:var(--bg);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{line-height:1.2;color:var(--ink);margin:0 0 .4em;font-weight:800;letter-spacing:-.01em}
h2{font-size:clamp(1.6rem,3vw,2.4rem)}
h3{font-size:1.25rem}
p{margin:0 0 1em}
.container{max-width:var(--container);margin:0 auto;padding:0 24px}
.center{text-align:center}
.muted{color:var(--muted)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5em;cursor:pointer;border:0;
  font-weight:700;font-size:.95rem;padding:.85em 1.5em;border-radius:999px;
  transition:var(--ease);font-family:inherit;white-space:nowrap;
}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-dark);transform:translateY(-2px);box-shadow:0 10px 24px rgba(240,122,26,.35)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#000;transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-lg{padding:1.05em 2em;font-size:1.05rem}
.arrow{transition:transform var(--ease)}
.btn:hover .arrow{transform:translateX(3px)}

/* ===================================================================
   TOP BAR
   =================================================================== */
.topbar{background:var(--ink);color:#cfd3da;font-size:.82rem}
.topbar .container{display:flex;justify-content:space-between;align-items:center;height:40px;gap:20px}
.topbar a{color:#cfd3da;transition:color var(--ease)}
.topbar a:hover{color:#fff}
.topbar .tb-left{display:flex;gap:22px;align-items:center}
.topbar .tb-right{display:flex;gap:16px;align-items:center}
.tb-lang{display:flex;gap:10px;align-items:center}
.tb-lang span{opacity:.5}
@media(max-width:860px){.topbar .tb-left{display:none}}

/* ===================================================================
   HEADER + MEGA MENU
   =================================================================== */
.header{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--line);
  transition:box-shadow var(--ease)}
.header.scrolled{box-shadow:var(--shadow)}
.header .container{display:flex;align-items:center;gap:32px;height:78px}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.brand img{height:46px;width:auto}

.nav-wrap{margin-left:auto;height:100%;display:flex}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:10px 18px;border-radius:0 0 8px 0;font-weight:700}
.skip-link:focus{left:0}
.nav{display:flex;align-items:center;gap:4px;height:100%;list-style:none;margin:0;padding:0}
.nav>li{position:static;height:100%;display:flex;align-items:center}
.nav>li>a{display:flex;align-items:center;gap:6px;height:100%;padding:0 16px;font-weight:600;
  font-size:.96rem;color:var(--ink);position:relative}
.nav>li>a:hover{color:var(--accent)}
.nav>li>a .caret{width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform var(--ease)}
.nav>li:hover>a .caret{transform:rotate(225deg) translateY(2px)}
.nav>li>a::after{content:"";position:absolute;left:16px;right:16px;bottom:-1px;height:3px;background:var(--accent);
  transform:scaleX(0);transition:transform var(--ease);border-radius:3px 3px 0 0}
.nav>li:hover>a::after{transform:scaleX(1)}

/* mega panel */
.mega{position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--line);
  box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(8px);
  transition:var(--ease);z-index:90}
.has-mega.is-open .mega,.has-mega:focus-within .mega{opacity:1;visibility:visible;transform:translateY(0)}
.mega-inner{max-width:var(--container);margin:0 auto;padding:30px 24px;display:grid;
  grid-template-columns:repeat(4,1fr) 280px;gap:8px 28px}
.mega-col h4{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);
  margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.mega-col a{display:block;padding:6px 0;font-size:.9rem;color:var(--text);transition:var(--ease)}
.mega-col a:hover{color:var(--accent);transform:translateX(4px)}
.mega-feature{background:var(--bg-soft);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column}
.mega-feature img{border-radius:var(--radius-sm);height:170px;object-fit:contain;background:#fff;width:100%;margin-bottom:12px}
.mega-feature h4{color:var(--ink);font-size:1rem;text-transform:none;letter-spacing:0;border:0;margin-bottom:6px}
.mega-feature p{font-size:.82rem;color:var(--muted);margin-bottom:12px}
.mega-feature .btn{align-self:flex-start;margin-top:auto}

.menu-btn{display:none;background:0;border:0;cursor:pointer;padding:8px;margin-left:auto}
.menu-btn span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;transition:var(--ease)}

/* ===================================================================
   HERO
   =================================================================== */
.hero{position:relative;background:var(--bg-dark);color:#fff;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,#15171c 0%,#15171c 42%,rgba(21,23,28,.55) 100%),
             url("../img/hero-factory.jpg?v=434d3afc21") right center/cover no-repeat}
.hero .container{position:relative;padding:92px 24px;min-height:520px;display:flex;flex-direction:column;justify-content:center}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(240,122,26,.15);
  color:var(--accent);font-weight:700;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
  padding:7px 16px;border-radius:999px;width:fit-content;margin-bottom:22px}
.hero h1{color:#fff;font-size:clamp(2.2rem,5vw,3.8rem);max-width:14ch;margin-bottom:18px}
.hero h1 em{color:var(--accent);font-style:normal}
.hero p{font-size:1.15rem;color:#c8ccd4;max-width:54ch;margin-bottom:30px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-stats{display:flex;gap:42px;margin-top:54px;flex-wrap:wrap}
.hero-stats .num{font-size:2.1rem;font-weight:900;color:#fff}
.hero-stats .num span{color:var(--accent)}
.hero-stats .lbl{font-size:.85rem;color:#9aa0ab}

/* ===================================================================
   TRUST STRIP
   =================================================================== */
.trust{background:var(--bg-soft);border-bottom:1px solid var(--line)}
.trust .container{display:flex;align-items:center;gap:30px;padding:22px 24px;flex-wrap:wrap;justify-content:center}
.trust .t-label{font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:700}
.trust .t-items{display:flex;gap:34px;flex-wrap:wrap;align-items:center}
.trust .t-item{display:flex;align-items:center;gap:9px;font-weight:600;color:var(--ink-2);font-size:.92rem}
.trust .t-item svg{color:var(--accent);flex-shrink:0}

/* ===================================================================
   SECTIONS
   =================================================================== */
section{padding:84px 0}
/* 680 -> 760 (2026-08-18). 680 was the site's only body-facing width that was
   neither 760 nor 1240; at 760 the headline box shares not just a centre line but
   a LEFT EDGE (260px) with the column under it. Widening a max-width cannot break
   anything - the worst it can do is let a headline fall back from two lines to one.
   Do not "tidy" it back to 680: that reintroduces a fourth number and R8 fails it. */
.sec-head{max-width:760px;margin:0 auto 50px;text-align:center}
.sec-head .eyebrow{color:var(--accent);font-weight:800;font-size:.82rem;letter-spacing:.12em;
  text-transform:uppercase;display:block;margin-bottom:12px}
.sec-head p{color:var(--muted);font-size:1.05rem}
/* ★ `.sec-head col` IS DELETED (2026-08-19, ruling V3). DO NOT PUT IT BACK. ★
   There is now exactly ONE shape for a body-section headline - the rule above:
   a 760px box, centred, with CENTRED TYPE. Every headline on the site uses it.

   The modifier existed for one day and was correct on its own terms: `.left`
   (08-17) meant "the box sits hard left", renamed `.col` (08-18) to mean "this
   headline governs a 760 reading column, so its type is flush left while the box
   centres like everything else". Each call site obeyed 「标题跟它下面那块配」 and
   each one was, locally, right.
   IT WAS THE PAGE THAT WAS WRONG. Read a category page top to bottom and the
   alignment folded back and forth three times:
       video section  .sec-head col  LEFT     over a 760 media block
       .choose        .sec-head      CENTRED  over a 1192 card grid
       .cat-about     bare h2        LEFT     over a 760 prose column
       .vs            .sec-head      CENTRED  over a 1192 vs-grid
       FAQ            .sec-head col  LEFT     over a 760 FAQ column
   A local rule cannot promise a global result. "有的靠中间,有的靠左边" is what the
   boss reported on 08-17 and again on 08-19, and this modifier is how it survived
   a fix that was otherwise correct.

   SO THE VARIABLE WENT, NOT THE VALUE. This does not reverse the 08-18 ruling, it
   finishes it: `.choose` and `.vs` were put on centred type then and have not moved
   a pixel - the other three headlines came to THEM. The alternatives are still
   rejected: headlines back to full width (no), card grids pulled in to 760 (no),
   and V5, `.choose`/`.vs` re-cut as full-width boxes with centred type (tried
   2026-08-19, the fold was still there, rejected).
   With one shape there is no choice left to get wrong. Gate R7 fails a left-set
   body-section headline outright; mutation N13 in
   _build	ests	est_layout_gate_selftest.py plants one and requires the red.
   The body copy UNDER the headline is still flush left, and R1 still fails anyone
   who centres it - 居中的是那一栏,不是每一行字, which has never changed. */

/* category cards */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.cat-card{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--ink);
  min-height:340px;display:flex;flex-direction:column;justify-content:flex-end;
  box-shadow:var(--shadow);transition:var(--ease)}
.cat-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62;transition:var(--ease)}
.cat-card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,11,14,.92),rgba(10,11,14,.15) 70%)}
.cat-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.cat-card:hover img{opacity:.78;transform:scale(1.05)}
.cat-card .cc-body{position:relative;z-index:2;padding:26px;color:#fff}
.cat-card .cc-kicker{font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);font-weight:700}
.cat-card h3{color:#fff;font-size:1.3rem;margin:8px 0 6px}
.cat-card p{font-size:.88rem;color:#c2c6cf;margin-bottom:14px}
.cat-card .cc-link{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.9rem;color:#fff}
.cat-card .cc-link .arrow{color:var(--accent)}

/* feature / why grid */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.feat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;transition:var(--ease)}
.feat:hover{border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-4px)}
.feat .ic{width:54px;height:54px;border-radius:13px;background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;margin-bottom:18px}
.feat h3{font-size:1.12rem;margin-bottom:8px}
.feat p{color:var(--muted);font-size:.94rem;margin:0}

/* product grid */
.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:24px}
.prod-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;transition:var(--ease)}
.prod-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-5px);border-color:transparent}
.prod-thumb{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--bg-soft);position:relative}
.prod-thumb{background:#fff}
.prod-thumb img{width:100%;height:100%;object-fit:contain;transition:var(--ease)}  /* product shots are mostly square with white bg - contain shows the full machine + sample bottles */
/* a product picture that is NOT a white-ground studio shot covers the frame (build adds .fill -
   ProductThumbFill; white-ground shots stay whole, their strips are their own white). 老板 2026-09-27 */
.prod-thumb img.fill{object-fit:cover}
.prod-card:hover .prod-thumb img{transform:scale(1.06)}
.prod-body h3 a{color:var(--ink)}
.prod-body h3 a:hover{color:var(--accent)}
.prod-tag{position:absolute;top:12px;left:12px;background:var(--accent);color:#fff;font-size:.72rem;
  font-weight:700;padding:4px 10px;border-radius:999px;letter-spacing:.03em}
.prod-body{padding:20px;display:flex;flex-direction:column;flex:1}
.prod-body h3{font-size:1.04rem;margin-bottom:8px}
.prod-body .specs{list-style:none;padding:0;margin:0 0 16px;font-size:.84rem;color:var(--muted)}
.prod-body .specs li{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px dashed var(--line)}
.prod-body .specs b{color:var(--ink-2);font-weight:600}
.prod-foot{margin-top:auto;display:flex;gap:10px}
.prod-foot .btn{flex:1;justify-content:center;font-size:.85rem;padding:.65em 1em}

/* applications strip */
.app-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.app-card{position:relative;border-radius:var(--radius-sm);overflow:hidden;aspect-ratio:3/4;display:flex;
  align-items:flex-end;box-shadow:var(--shadow)}
.app-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:var(--ease)}
.app-card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,11,14,.85),transparent 65%)}
.app-card span{position:relative;z-index:2;color:#fff;font-weight:700;padding:16px;font-size:.98rem}
.app-card:hover img{transform:scale(1.08)}

/* about teaser */
.about-split{display:grid;grid-template-columns:1.05fr 1fr;gap:54px;align-items:center}
.about-split .media{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg)}
.about-split .media img{display:block;width:100%;height:auto}  /* never let width/height attrs distort */
.about-split h2{margin-bottom:18px}
.about-list{list-style:none;padding:0;margin:22px 0 28px;display:grid;gap:14px}
.about-list li{display:flex;gap:12px;align-items:flex-start;font-size:.98rem}
.about-list svg{color:var(--accent);flex-shrink:0;margin-top:3px}

/* factory photo gallery (About) */
.photo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.photo-grid .ph{border-radius:var(--radius-sm);overflow:hidden;aspect-ratio:4/3;box-shadow:var(--shadow);display:block;background:var(--bg-soft)}
.photo-grid .ph img{width:100%;height:100%;object-fit:cover;transition:var(--ease)}
.photo-grid .ph:hover img{transform:scale(1.06)}
@media(max-width:900px){.photo-grid{grid-template-columns:repeat(2,1fr)}}

/* stat band */
.statband{background:var(--ink);color:#fff}
.statband .container{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;padding:60px 24px;text-align:center}
.statband .num{font-size:2.6rem;font-weight:900;color:var(--accent)}
.statband .lbl{color:#aab0bb;font-size:.95rem;margin-top:4px}

/* CTA band */
.cta{background:linear-gradient(120deg,var(--accent) 0%,var(--accent-dark) 100%);color:#fff;text-align:center}
.cta h2{color:#fff;margin-bottom:14px}
.cta p{font-size:1.1rem;opacity:.95;max-width:56ch;margin:0 auto 28px}
.cta .btn-dark{background:var(--ink)}
.cta .btn-white{background:#fff;color:var(--ink)}
.cta .btn-white:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}

/* ===================================================================
   FOOTER
   =================================================================== */
.footer{background:var(--bg-dark);color:#9aa0ab;font-size:.92rem;padding:64px 0 0}
.footer a{color:#9aa0ab;transition:color var(--ease)}
.footer a:hover{color:#fff}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:40px;padding-bottom:48px}
.foot-about p{margin:16px 0}
.foot-col h4{color:#fff;font-size:.95rem;margin-bottom:16px;letter-spacing:.02em}
.foot-col ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.foot-contact li{display:flex;gap:10px;margin-bottom:12px;align-items:flex-start}
.foot-contact svg{color:var(--accent);flex-shrink:0;margin-top:3px}
.foot-bottom{border-top:1px solid rgba(255,255,255,.08);padding:22px 0;display:flex;
  justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.85rem}

/* ===================================================================
   BREADCRUMB / PAGE HEADER
   =================================================================== */
.page-head{background:var(--bg-soft);border-bottom:1px solid var(--line);padding:34px 0}
.crumb{display:flex;gap:8px;font-size:.85rem;color:var(--muted);margin-bottom:10px;flex-wrap:wrap}
.crumb a:hover{color:var(--accent)}
.crumb .sep{opacity:.5}
.page-head h1{font-size:clamp(1.8rem,3.4vw,2.6rem);margin:0}

/* layout with sidebar */
.shell{display:grid;grid-template-columns:280px 1fr;gap:40px;padding:54px 0}
.side{align-self:start;position:sticky;top:100px}
.side h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:0 0 12px}
.side-nav{list-style:none;padding:0;margin:0 0 28px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.side-nav>li>a{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;font-weight:600;
  font-size:.92rem;border-bottom:1px solid var(--line)}
.side-nav>li:last-child>a{border-bottom:0}
.side-nav>li>a:hover,.side-nav>li.active>a{background:var(--accent-soft);color:var(--accent-dark)}
.side-nav .sub{list-style:none;padding:4px 0 10px 16px;margin:0;background:var(--bg-soft);border-bottom:1px solid var(--line)}
.side-nav .sub li a{display:block;padding:6px 12px;font-size:.86rem;color:var(--muted)}
.side-nav .sub li a:hover{color:var(--accent)}

/* product detail */
.pd-top{display:grid;grid-template-columns:1fr 1fr;gap:46px;margin-bottom:20px}
.pd-gallery .main{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;aspect-ratio:4/3}
.pd-gallery .main img{width:100%;height:100%;object-fit:contain}
/* main photo that is not a white-ground studio shot covers the frame (build: ProductThumbFill) - 老板 2026-09-27 */
.pd-gallery .main img.fill{object-fit:cover}
.pd-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px}
.pd-thumbs img{border:1px solid var(--line);border-radius:var(--radius-sm);aspect-ratio:1;object-fit:cover;cursor:pointer;transition:var(--ease)}
.pd-thumbs img:hover{border-color:var(--accent)}
.pd-info .tag{color:var(--accent);font-weight:700;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}
.pd-info h1{font-size:1.9rem;margin:10px 0 16px}
.pd-info .lead{color:var(--muted);margin-bottom:22px}
.pd-actions{display:flex;gap:12px;flex-wrap:wrap}

.prose{max-width:760px}.prose h3{margin-top:28px}
.prose ul{padding-left:20px}.prose li{margin-bottom:8px}

/* inquiry / form */
.inquiry{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.inquiry h3{margin-bottom:6px}

/* FAQ accordion (AEO) */
/* 820 -> 760 AND centred (boss ruling 2026-08-18 「窄栏居中」). Both numbers here
   have been wrong once each, in opposite directions, and the reason is worth
   keeping because it is the clearest example on the site of "the criterion did not
   change, the input did".
     A stack of questions and answers is a READING COLUMN - not a UI card - so it
     obeys whatever the body column does. That judgement has never changed.
     Flush left (2026-08-17) the column started at 44 and 820 was harmless: only
     the RIGHT edge stuck out 60px past the prose and nobody sees a ragged right.
     Centred (2026-08-18) the left edge is a function of the width - 760 lands on
     260, 820 lands on 230 - so the same 820 now puts the whole block 30px left of
     every other column on the page, which is exactly the misalignment the boss
     has reported twice. Gate R5 fails it.
   The card's own 22px inner padding stays: a buyer reads that as "this is a box",
   not as a misalignment, because the BOX edge is what lines up. */
.faq{max-width:760px;margin-left:auto;margin-right:auto}
.faq-item{border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:12px;overflow:hidden;background:#fff}
.faq-q{width:100%;text-align:left;background:0;border:0;padding:20px 22px;font-weight:700;font-size:1.02rem;
  cursor:pointer;display:flex;justify-content:space-between;gap:16px;font-family:inherit;color:var(--ink)}
.faq-q .pm{color:var(--accent);font-size:1.4rem;transition:var(--ease);flex-shrink:0}
.faq-item.open .faq-q .pm{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height var(--ease);color:var(--muted)}
.faq-item.open .faq-a,.faq-item[open] .faq-a{max-height:1400px}
.faq-a>*{padding:0 22px 20px}

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media(max-width:1080px){
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .app-grid{grid-template-columns:repeat(3,1fr)}
  .mega-inner{grid-template-columns:repeat(3,1fr)}
  .mega-feature{display:none}
}
@media(max-width:900px){
  .nav{display:none}
  .menu-btn{display:block;margin-left:10px}
  /* only the basket keeps the auto push - the (empty) nav wrapper and the burger must not
     split the free space, or the basket icon strands mid-header on tablets */
  .nav-wrap{margin-left:0}
  .nav.open{display:flex;position:fixed;inset:118px 0 0;background:#fff;flex-direction:column;
    align-items:stretch;padding:16px 24px;overflow-y:auto;gap:0;height:auto}
  .nav.open>li{height:auto;border-bottom:1px solid var(--line)}
  .nav.open>li>a{height:auto;padding:16px 0;justify-content:space-between}
  .nav.open .mega{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    border:0;display:none;padding:0 0 14px}
  .nav.open li.expanded .mega{display:block}
  .nav.open .mega-inner{grid-template-columns:1fr;padding:0;gap:6px}
  .feat-grid,.statband .container{grid-template-columns:repeat(2,1fr)}
  .about-split,.pd-top,.shell{grid-template-columns:1fr;gap:30px}
  .side{position:static}
  .shell .smain{order:1}            /* products before the filter sidebar on mobile */
  .shell .side{order:2;margin-top:8px}
  section{padding:60px 0}
}
@media(max-width:560px){
  .cat-grid,.app-grid{grid-template-columns:1fr}
  .hero-stats{gap:26px}
  .statband .container{grid-template-columns:1fr 1fr;gap:24px}
}

/* ===== mobile / touch polish ===== */
html{-webkit-text-size-adjust:100%}
a,button,.btn,summary,.faq-q,.htab-btn,label,.size-card,.cat-card,.app-card{touch-action:manipulation;-webkit-tap-highlight-color:rgba(240,122,26,.18)}
@media(max-width:900px){
  body{overflow-x:hidden}
  .wa-float{bottom:calc(18px + env(safe-area-inset-bottom,0px));right:calc(18px + env(safe-area-inset-right,0px))}
  .btn{min-height:44px}                 /* comfortable tap target */
  .side-nav>li>a{padding:15px 16px}      /* larger tap targets in filters */
}

/* ===================================================================
   PRINT - spec sheets print clean: no chrome, no forms, no floats
   =================================================================== */
@media print{
  .topbar,.header,.footer,.wa-float,.menu-btn,.basket-link,
  .pd-cta-line,.pd-actions,.inquiry,.quote-form,.skip-link{display:none !important}
  body{background:#fff;color:#000}
  a{color:#000;text-decoration:none}
  .faq-item .faq-a{display:block}        /* answers visible without clicking */
}

/* ===================================================================
   WIDE SINGLE CARD  (.prod-card.card-wide)
   For a section that legitimately has ONE card. The site-wide product
   grid is repeat(auto-fill,minmax(250px,1fr)); a lone card in it sits
   in the first column and leaves the rest of a wide page empty, and it
   does not line up with the centred body copy above it or the centred
   video below it. This lays that single card out horizontally instead
   - image left, copy right - at the same 860px width and centre axis
   as the video block, so the section reads as one column.
   Used by: products/mould-injection-moulds.html cap-and-closure block.
   =================================================================== */
/* 860 -> 760 (2026-08-18): 860 was a fourth width, and it was already past the
   760 reading-column cap. Gate R8 fails a fourth number. */
.card-wide{
  display:flex;
  align-items:stretch;
  max-width:760px;
  margin:26px auto 0;
  text-align:left;
}
/* min-width:0 - INSURANCE, and the honest note about it. A flex item's automatic
   minimum size is its content's min-content width, which can override max-width on
   the row and leave a "760px" card wider than 760. The design spec predicted exactly
   that here (it reported the card stopping at 814), so this line was added with it.
   MEASURED AFTERWARDS IN A REAL BROWSER, on the one page that emits this component
   (products/mould-injection-moulds.html): the card renders 760px WITH the line and
   760px WITHOUT it - the copy column's min-content width is only 758, so the trap
   does not spring on today's content. The line is kept because it costs nothing and
   the failure mode is real the moment a long unbroken word (a model code, a URL)
   lands in that card. It is NOT, today, what holds the card at 760.
   Recorded this way on purpose: repeating "load-bearing, measured at 814" when the
   measurement says otherwise is how a comment starts lying to the next reader. */
.card-wide > .prod-body{min-width:0}
.card-wide > .prod-thumb{
  flex:0 0 44%;
  margin:0;
  align-self:stretch;
}
.card-wide > .prod-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.card-wide > .prod-body{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:24px 26px;
}
.card-wide > .prod-body h3{ margin:0 0 12px }
.card-wide > .prod-body .prod-foot{ margin-top:18px }

@media(max-width:760px){
  .card-wide{ display:block; max-width:520px; text-align:center }
  .card-wide > .prod-thumb{ width:100% }
  .card-wide > .prod-thumb img{ height:auto }
  .card-wide > .prod-body{ padding:18px 20px }
}

/* ===================================================================
   TRUST BAR LINKS
   Two of the five trust-strip items are links (cases.html and
   products/moulds.html). They shipped in the same colour and weight as
   the three plain items beside them, with no underline, so buyers could
   not tell they were clickable - the same defect the 2026-08-04 body
   copy pass fixed everywhere else, missed here because .trust is on
   that plan's exclusion list.
   Same visual language as that pass: var(--accent-dark), 1.5px
   underline at 3px offset, hover to var(--accent), and NO font-weight
   change - the item is already 600 and bolding would re-wrap the strip.
   Scope is one selector; nothing else on the site uses .trust .t-item.
   =================================================================== */
.trust .t-item a:not(.btn){
  color: var(--accent-dark);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color var(--ease);
}

.trust .t-item a:not(.btn):hover{
  color: var(--accent);
  text-decoration-thickness: 2px;
}

/* ===================================================================
   BODY COPY LINKS
   Make in-text links inside body copy visibly clickable.
   Scope is deliberately narrow: only paragraphs / list items that are
   direct children of a body-copy container. Navigation, breadcrumbs,
   footer, cards, chips, buttons and forms are NOT touched, because
   they are never direct children of these containers.
   =================================================================== */
.prose > p:not(.pd-cta-line) a:not(.btn),
.prose > ul > li a:not(.btn),
.prose > ol > li a:not(.btn),
.faq-a p a:not(.btn),
.faq-a li a:not(.btn),
.sec-head > p a:not(.btn),
.showcase .sc-body p a:not(.btn),
main > section > .container > p a:not(.btn),
.smain > p a:not(.btn),
.why4 .feat > p a:not(.btn){
  color: var(--accent-dark);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color var(--ease);
}

.prose > p:not(.pd-cta-line) a:not(.btn):hover,
.prose > ul > li a:not(.btn):hover,
.prose > ol > li a:not(.btn):hover,
.faq-a p a:not(.btn):hover,
.faq-a li a:not(.btn):hover,
.sec-head > p a:not(.btn):hover,
.showcase .sc-body p a:not(.btn):hover,
main > section > .container > p a:not(.btn):hover,
.smain > p a:not(.btn):hover,
.why4 .feat > p a:not(.btn):hover{
  color: var(--accent);
  text-decoration-thickness: 2px;
}