/* ==========================================================================
   SOXMILL v4 — catalogue-first storefront UI
   Loaded after style.css (brand basics) and legacy.css (ported marketing blocks)
   ========================================================================== */

:root{
  --ink:#0E1726; --ink-2:#25324A; --muted:#66748C; --faint:#93A0B5;
  --brand:#0B4F6C; --brand-2:#0E6B8F; --brand-ink:#08313F;
  --accent:#FF6B35; --accent-2:#E8551F;
  --line:#E3E9F1; --line-2:#EEF2F7;
  --bg:#FFFFFF; --surface:#F7F9FC; --surface-2:#F1F5F9;
  --ok:#1B7F5A; --warn:#B45309;
  --r:10px; --r-sm:7px; --r-lg:16px;
  --sh-1:0 1px 2px rgba(14,23,38,.06);
  --sh-2:0 6px 20px rgba(14,23,38,.08);
  --sh-3:0 18px 44px rgba(14,23,38,.14);
  --wrap:1280px;
  --font:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --head:'Sora',var(--font);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.v4{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.6;font-size:15.5px}
body.v4[dir=rtl]{font-family:var(--font);text-align:right}
.v4 img{max-width:100%;display:block}
.v4 a{color:inherit;text-decoration:none}
.v4 h1,.v4 h2,.v4 h3,.v4 h4{font-family:var(--head);line-height:1.22;margin:0 0 .5em;color:var(--ink);letter-spacing:-.015em}
.v4 h1{font-size:clamp(1.9rem,3.6vw,3rem);font-weight:800}
.v4 h2{font-size:clamp(1.4rem,2.3vw,2.05rem);font-weight:700}
.v4 h3{font-size:1.12rem;font-weight:700}
.v4 p{margin:0 0 1em}
.v4 .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
.v4 .center{text-align:center}
.v4 .mt{margin-top:1.2rem}
.v4 .note{font-size:.83rem;color:var(--muted)}
.v4 .muted{color:var(--muted)}
.v4 .prose{max-width:74ch;font-size:1.02rem}
.v4 .prose ul{padding-inline-start:1.2em}

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;gap:.5em;justify-content:center;
  padding:.68em 1.15em;border-radius:var(--r-sm);font-weight:700;font-size:.92rem;
  border:1.5px solid transparent;cursor:pointer;transition:.16s ease;white-space:nowrap;line-height:1.2}
/* Button colour bridge. The reset above — `.v4 a{color:inherit}` — has
   specificity (0,1,1) and outranks every single-class `.btn-*` colour rule
   (0,1,0) in this sheet and in style.css. Inside a coloured section
   (`.cta-band` sets color:#fff) a white .btn-light therefore inherits white
   text: invisible on its white pill. Re-anchor every variant at (0,2,0) so
   the intended colour always wins, wherever the button sits. */
.v4 .btn{color:var(--ink)}
.v4 .btn-accent,.v4 .btn-dark{color:#fff}
.v4 .btn-light{background:#fff;color:var(--brand-ink)}
.v4 .btn-outline{color:var(--ink)}
.v4 .btn-ghost{color:var(--ink)}
.v4 .btn-danger{background:#FDECEC;color:#B42318}
.v4 .btn-outline-light{color:#fff;border-color:rgba(255,255,255,.5);background:transparent}
.v4 .btn-light:hover{color:var(--brand-ink)}
.v4 .btn-outline-light:hover{color:#fff}

/* Language-menu rows hit the same reset: the menu lives in the dark topbar
   (color:#D7E6EE) and `.v4 a{color:inherit}` (0,1,1) outranks the single-class
   `.lang-row` colour (0,1,0), so every non-current row inherited the topbar's
   light text on the white dropdown. Re-anchor at (0,2,0). */
.v4 .lang-row{color:var(--ink)}
.v4 .lang-row:hover{color:var(--ink)}
.v4 .lang-row[aria-current]{color:var(--brand)}
.v4 .lang-row .lang-flag{color:var(--muted)}
.btn svg{width:16px;height:16px;flex:none}
.btn-accent{background:var(--accent);color:#fff;box-shadow:var(--sh-1)}
.btn-accent:hover{background:var(--accent-2);transform:translateY(-1px);box-shadow:var(--sh-2)}
.btn-outline{border-color:var(--line);background:#fff;color:var(--ink)}
.btn-outline:hover{border-color:var(--brand);color:var(--brand);background:var(--surface)}
.btn-ghost{background:transparent;color:var(--ink);border-color:transparent}
.btn-ghost:hover{background:var(--surface-2)}
.btn-lg{padding:.85em 1.5em;font-size:1rem}
.btn.full{width:100%}

/* ---------------------------------------------------------------- topbar */
.topbar{background:var(--brand-ink);color:#D7E6EE;font-size:.78rem;border-bottom:1px solid rgba(255,255,255,.08)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;min-height:38px;gap:1rem}
.topbar-tag{letter-spacing:.06em;text-transform:uppercase;opacity:.85;font-weight:600}
.topbar-right{display:flex;align-items:center;gap:1.1rem}
.topbar-link{display:inline-flex;align-items:center;gap:.4em;color:#D7E6EE;font-weight:600}
.topbar-link:hover{color:#fff}
.topbar-link svg{width:14px;height:14px}

/* ------------------------------------------------------------ lang switcher */
.lang{position:relative}
.lang-btn{display:inline-flex;align-items:center;gap:.45em;background:rgba(255,255,255,.08);
  color:#EAF3F8;border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:.28em .7em;
  font:inherit;font-size:.78rem;font-weight:700;cursor:pointer}
.lang-btn:hover{background:rgba(255,255,255,.16)}
.lang-btn svg{width:14px;height:14px}
.lang-btn svg:last-child{width:9px;height:6px;opacity:.7}
.lang-menu{position:absolute;inset-inline-end:0;top:calc(100% + 8px);min-width:186px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-3);padding:.4rem;
  display:none;z-index:80}
.lang.open .lang-menu{display:block}
.lang-row{display:flex;align-items:center;gap:.6em;padding:.5em .6em;border-radius:var(--r-sm);color:var(--ink);font-size:.88rem;font-weight:600}
.lang-row:hover{background:var(--surface)}
.lang-row[aria-current]{background:var(--surface-2);color:var(--brand)}
.lang-flag{display:inline-grid;place-items:center;width:24px;height:18px;border-radius:3px;
  background:var(--surface-2);font-size:.6rem;font-weight:800;color:var(--muted);letter-spacing:.02em}

/* ---------------------------------------------------------------- header */
.hdr{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line)}
.hdr.scrolled{box-shadow:var(--sh-2)}
.hdr-main .wrap{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:1.4rem;padding-block:.7rem}
.logo{display:inline-flex;align-items:center;gap:.6rem}
.logo-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;font-family:var(--head);
  font-weight:800;font-size:1.1rem}
.logo-text{display:flex;flex-direction:column;line-height:1.15}
.logo-text strong{font-family:var(--head);font-size:1.18rem;letter-spacing:-.02em}
.logo-text small{font-size:.63rem;color:var(--muted);max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.search{position:relative;display:flex;align-items:center;background:var(--surface);
  border:1.5px solid var(--line);border-radius:999px;overflow:hidden;max-width:560px;width:100%;justify-self:center}
.search:focus-within{border-color:var(--brand-2);background:#fff;box-shadow:0 0 0 3px rgba(14,107,143,.1)}
.search input{flex:1;border:0;background:transparent;padding:.62em 1em;font:inherit;font-size:.9rem;outline:none;min-width:0}
.search button{border:0;background:transparent;padding:.5em .9em;cursor:pointer;color:var(--brand);display:grid;place-items:center}
.search button svg{width:18px;height:18px}
.search-panel{position:absolute;inset-inline:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh-3);max-height:60vh;overflow:auto;z-index:70;padding:.3rem}
.sp-item{display:flex;gap:.7rem;align-items:center;padding:.5rem;border-radius:var(--r-sm)}
.sp-item:hover{background:var(--surface)}
.sp-item img{width:44px;height:44px;border-radius:6px;object-fit:cover;background:var(--surface-2)}
.sp-item b{display:block;font-size:.85rem;font-weight:700;line-height:1.3}
.sp-item span{font-size:.74rem;color:var(--muted)}
.sp-empty{padding:.9rem;color:var(--muted);font-size:.86rem}

.nav-toggle{display:none;flex-direction:column;gap:4px;background:none;border:0;cursor:pointer;padding:.5rem}
.nav-toggle span{width:22px;height:2px;background:var(--ink);border-radius:2px;transition:.2s}
.nav-toggle.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ------------------------------------------------------------------- nav */
.mainnav{border-top:1px solid var(--line-2);background:#fff}
.nav-list{list-style:none;margin:0;padding:0;display:flex;gap:.2rem;align-items:center}
.nav-link{display:inline-flex;align-items:center;gap:.34em;padding:.85rem .95rem;font-weight:700;
  font-size:.88rem;color:var(--ink-2);border-bottom:2.5px solid transparent}
.nav-link svg{width:9px;height:6px;opacity:.55}
.nav-item:hover>.nav-link{color:var(--brand);border-bottom-color:var(--accent)}
.nav-item{position:relative}

.drop,.mega{position:absolute;top:100%;inset-inline-start:0;background:#fff;border:1px solid var(--line);
  border-radius:0 0 var(--r) var(--r);box-shadow:var(--sh-3);display:none;z-index:65}
.nav-item:hover>.drop,.nav-item:hover>.mega,.nav-item.open>.drop,.nav-item.open>.mega{display:block}
.drop{min-width:250px;padding:.5rem}
.drop-link{display:block;padding:.55em .7em;border-radius:var(--r-sm);font-size:.88rem;font-weight:600;color:var(--ink-2)}
.drop-link:hover{background:var(--surface);color:var(--brand)}

.mega{width:min(1080px,94vw);padding:1.3rem 1.4rem 0}
.mega-inner{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1.2rem 1.6rem}
.mega-head{display:block;font-family:var(--head);font-weight:700;font-size:.92rem;color:var(--brand);
  padding-bottom:.5rem;margin-bottom:.35rem;border-bottom:1px solid var(--line-2)}
.mega-link{display:flex;justify-content:space-between;gap:.6em;padding:.34em 0;font-size:.85rem;color:var(--ink-2)}
.mega-link:hover{color:var(--accent)}
.mega-link b{color:var(--faint);font-weight:600;font-size:.76rem}
.mega-foot{display:flex;gap:1.6rem;border-top:1px solid var(--line-2);margin-top:1.2rem;padding:.8rem 0}
.mega-foot a{display:inline-flex;align-items:center;gap:.45em;font-size:.85rem;font-weight:700;color:var(--brand)}
.mega-foot svg{width:16px;height:10px}

/* ------------------------------------------------------------ breadcrumbs */
.crumbs{border-bottom:1px solid var(--line-2);background:var(--surface)}
.crumbs ol{list-style:none;margin:0;padding:.62rem 0;display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;font-size:.8rem}
.crumbs li{color:var(--muted)}
.crumbs li a{color:var(--muted);font-weight:600}
.crumbs li a:hover{color:var(--accent);text-decoration:underline}
.crumbs li[aria-current] span{color:var(--ink);font-weight:700}
.crumbs .sep{color:var(--faint);font-size:.9rem}

/* --------------------------------------------------------------- sections */
.sec{padding:3.2rem 0}
.sec.alt{background:var(--surface)}
.sec-head{max-width:760px;margin-bottom:2rem}
.sec-head .eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:.5rem}
.sec-head .sub{color:var(--muted);font-size:1.02rem;margin:0}
.sec-head.center{margin-inline:auto;text-align:center}

/* ------------------------------------------------------------------- hero */
.hero{padding:3rem 0 0;background:linear-gradient(180deg,#fff,var(--surface))}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:2.6rem;align-items:center;padding-bottom:2.4rem}
.hero .eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:.7rem}
.hero .lead{font-size:1.06rem;color:var(--ink-2);max-width:56ch}
.hero-cta{display:flex;gap:.7rem;flex-wrap:wrap;margin:1.4rem 0 .9rem}
.hero-note{display:inline-flex;align-items:center;gap:.5em;font-size:.82rem;color:var(--muted);margin:0}
.hero-note svg{width:16px;height:16px;color:var(--ok)}
.hero-tiles{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.hero-tile{border-radius:var(--r-lg);overflow:hidden;background:var(--surface-2);box-shadow:var(--sh-2);aspect-ratio:1}
.hero-tile img{width:100%;height:100%;object-fit:cover;transition:.4s}
.hero-tile:hover img{transform:scale(1.05)}
.statbar{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.statbar>div{background:#fff;padding:1.05rem 1.15rem;display:flex;flex-direction:column;gap:.15rem}
.statbar strong{font-family:var(--head);font-size:1.42rem;color:var(--brand)}
.statbar span{font-size:.78rem;color:var(--muted);font-weight:600}

/* ------------------------------------------------------- category tiles */
.cat-groups{display:grid;gap:2rem}
.cat-group-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  border-bottom:2px solid var(--line);padding-bottom:.5rem;margin-bottom:1rem}
.cat-group-head span{font-family:var(--head);font-size:1.2rem;font-weight:700}
.cat-group-head b{font-size:.78rem;color:var(--muted);font-weight:700}
.cat-group-head:hover span{color:var(--brand)}
.ctile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.7rem}
.ctile-grid.wide{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.ctile{display:flex;justify-content:space-between;align-items:center;gap:.7rem;
  border:1px solid var(--line);border-radius:var(--r);padding:.85rem 1rem;background:#fff;transition:.16s}
.ctile:hover{border-color:var(--brand-2);box-shadow:var(--sh-2);transform:translateY(-1px)}
.ctile-label{font-weight:700;font-size:.92rem}
.ctile-count{font-size:.75rem;color:var(--muted);white-space:nowrap;font-weight:600}
/* v4.0.29 — category tiles with a representative product image */
.ctile.has-img{flex-direction:column;align-items:stretch;padding:0;overflow:hidden}
.ctile.has-img .ctile-media{display:block;aspect-ratio:1/1;overflow:hidden;background:var(--surface)}
.ctile.has-img .ctile-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.ctile.has-img:hover .ctile-media img{transform:scale(1.04)}
.ctile.has-img .ctile-label,.ctile.has-img .ctile-count{padding:0 .85rem}
.ctile.has-img .ctile-label{margin-top:.7rem}
.ctile.has-img .ctile-count{margin:.15rem 0 .85rem}
/* v4.0.29 — category tiles with a representative product image */
.ctile.has-img{flex-direction:column;align-items:stretch;padding:0;overflow:hidden}
.ctile.has-img .ctile-media{display:block;aspect-ratio:1/1;overflow:hidden;background:var(--surface)}
.ctile.has-img .ctile-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.ctile.has-img:hover .ctile-media img{transform:scale(1.04)}
.ctile.has-img .ctile-label,.ctile.has-img .ctile-count{padding:0 .85rem}
.ctile.has-img .ctile-label{margin-top:.7rem}
.ctile.has-img .ctile-count{margin:.15rem 0 .85rem}

/* --------------------------------------------------------------- product */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.2rem}
.pcard{border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden;
  display:flex;flex-direction:column;transition:.18s}
.pcard:hover{box-shadow:var(--sh-3);transform:translateY(-2px);border-color:var(--line-2)}
.pcard-img{position:relative;display:block;aspect-ratio:1;background:var(--surface-2)}
.pcard-img img{width:100%;height:100%;object-fit:cover}
.pcard-badge{position:absolute;top:.6rem;inset-inline-start:.6rem;background:var(--accent);color:#fff;
  font-size:.68rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:.22em .55em;border-radius:4px}
.pcard-body{padding:.85rem .95rem 1rem;display:flex;flex-direction:column;flex:1;gap:.45rem}
.pcard-cat{font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-2);margin:0}
.pcard-title{font-size:.94rem;font-weight:700;line-height:1.35;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em}
.pcard-title a:hover{color:var(--accent)}
.pcard-meta{margin:0;display:grid;gap:.28rem;font-size:.76rem}
.pcard-meta>div{display:flex;justify-content:space-between;gap:.6rem}
.pcard-meta dt{color:var(--muted);font-weight:600}
.pcard-meta dd{margin:0;font-weight:700;text-align:end;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcard-foot{margin-top:auto;padding-top:.6rem;border-top:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap}
.pcard-price{margin:0;display:flex;align-items:baseline;gap:.28em;flex-wrap:wrap}
.pcard-price .from{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.pcard-price strong{font-family:var(--head);font-size:1.16rem;color:var(--ink)}
.pcard-price .unit{font-size:.7rem;color:var(--muted)}
.pcard-cta{font-size:.78rem;font-weight:700;color:var(--accent);border-bottom:1.5px solid transparent}
.pcard-cta:hover{border-bottom-color:var(--accent)}
.empty{padding:3rem;text-align:center;color:var(--muted)}

/* ------------------------------------------------------- catalog layout */
.sec.catalog .wrap{display:grid;grid-template-columns:250px 1fr;gap:2rem;align-items:start}
.cat-side{position:sticky;top:120px;display:grid;gap:1.2rem;font-size:.86rem}
.side-group{display:grid;gap:.1rem}
.side-group h4{margin:0 0 .45rem;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.side-group a{display:flex;justify-content:space-between;gap:.6em;padding:.35em .1em;color:var(--ink-2);font-weight:600;border-bottom:1px solid var(--line-2)}
.side-group a:hover{color:var(--accent)}
.side-group a b{color:var(--faint);font-weight:600}
.side-cta{display:flex;align-items:center;justify-content:space-between;gap:.5em;background:var(--brand);
  color:#fff;padding:.8rem 1rem;border-radius:var(--r);font-weight:700;font-size:.88rem}
.side-cta:hover{background:var(--brand-2)}
.side-cta svg{width:18px;height:12px}
.factbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:1.4rem}
.fact{background:#fff;padding:.85rem 1rem;display:flex;flex-direction:column;gap:.15rem}
.fact span{font-size:.72rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.fact strong{font-size:.98rem;color:var(--ink)}

/* MOQ explainer shown above every product grid. The catalogue quotes MOQ per
   style (most styles run 1,500 pairs) while custom programmes start at 500, so
   the two numbers are reconciled in one sentence right where the cards are. */
.moq-note{margin:1.3rem 0 0;padding:.75rem 1rem;background:var(--surface);
  border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:var(--r-sm);
  font-size:.85rem;line-height:1.55;color:var(--ink-2)}

.pager{display:flex;gap:.3rem;flex-wrap:wrap;margin-top:2rem;align-items:center}
.pg{padding:.5em .85em;border:1px solid var(--line);border-radius:var(--r-sm);font-size:.84rem;font-weight:700;color:var(--ink-2);background:#fff}
.pg:hover{border-color:var(--brand);color:var(--brand)}
.pg.on{background:var(--brand);border-color:var(--brand);color:#fff}
.pg.gap{border:0;color:var(--faint)}

/* ------------------------------------------------------------ product detail */
.pdp{padding:2.2rem 0}
.pdp-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:2.6rem;align-items:start}
.gal{display:grid;gap:.8rem}
.gal-main{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface-2)}
.gal-main img{width:100%;aspect-ratio:1;object-fit:cover}
.gal-thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:.5rem}
.gal-th{border:2px solid var(--line);border-radius:var(--r-sm);overflow:hidden;padding:0;background:#fff;cursor:pointer}
.gal-th.on{border-color:var(--accent)}
.gal-th img{width:100%;aspect-ratio:1;object-fit:cover}
.pdp-cat{font-size:.76rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin:0 0 .5rem}
.pdp-cat a{color:var(--brand-2)}
.pdp-points{list-style:none;padding:0;margin:0 0 1.2rem;display:flex;flex-wrap:wrap;gap:.4rem .9rem}
.pdp-points li{display:inline-flex;align-items:center;gap:.4em;font-size:.83rem;color:var(--ink-2);font-weight:600}
.pdp-points svg{width:14px;height:14px;color:var(--ok);flex:none}
.pdp-price{display:flex;gap:2rem;align-items:baseline;padding:1rem 1.15rem;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);margin-bottom:1.2rem;flex-wrap:wrap}
.pdp-price .lbl{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:800}
.pdp-price strong{font-family:var(--head);font-size:1.9rem;color:var(--brand)}
.pdp-price .unit{font-size:.82rem;color:var(--muted)}
.pdp-moq strong{font-size:1.3rem}
table.ladder{width:100%;border-collapse:collapse;font-size:.86rem;margin-bottom:.6rem}
table.ladder th{text-align:start;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  padding:.45rem .6rem;border-bottom:1.5px solid var(--line)}
table.ladder td{padding:.55rem .6rem;border-bottom:1px solid var(--line-2)}
table.ladder td.price{font-weight:800;color:var(--brand);font-family:var(--head)}
.tier{display:inline-block;background:var(--surface-2);color:var(--muted);font-size:.68rem;font-weight:800;
  padding:.15em .5em;border-radius:4px}
.save{color:var(--ok);font-weight:800;font-size:.8rem}
.pdp-cta{display:flex;gap:.55rem;flex-wrap:wrap;margin:1.2rem 0}
.pdp-trust{list-style:none;padding:0;margin:0;display:grid;gap:.5rem;font-size:.83rem;color:var(--muted)}
.pdp-trust li{display:flex;align-items:center;gap:.55em}
.pdp-trust svg{width:17px;height:17px;color:var(--brand-2);flex:none}
table.spec{width:100%;border-collapse:collapse;font-size:.9rem;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
table.spec th{text-align:start;background:var(--surface);padding:.7rem 1rem;width:34%;font-weight:700;
  color:var(--ink-2);border-bottom:1px solid var(--line);vertical-align:top}
table.spec td{padding:.7rem 1rem;border-bottom:1px solid var(--line-2)}
table.spec tr:last-child th,table.spec tr:last-child td{border-bottom:0}

/* ------------------------------------------------------------------- faq */
.faq{display:grid;gap:.55rem;max-width:900px}
.faq details{border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden}
.faq summary{padding:.9rem 1.1rem;font-weight:700;cursor:pointer;font-size:.95rem;display:flex;
  justify-content:space-between;gap:1rem;align-items:center;list-style:none}
.faq summary::-webkit-details-marker{display:none}
/* the question is a real <h3> so answer engines can map question -> answer;
   font:inherit keeps the summary's own type style so nothing shifts visually */
.faq summary h3{font:inherit;margin:0;color:inherit;letter-spacing:inherit}
.faq summary h3::after{content:none}
.faq summary::after{content:'+';font-family:var(--head);font-size:1.25rem;color:var(--accent);flex:none}
.faq details[open] summary::after{content:'–'}
.faq details[open] summary{border-bottom:1px solid var(--line-2);background:var(--surface)}
.faq-a{padding:.95rem 1.1rem;color:var(--ink-2);font-size:.9rem}
.faq-a p:last-child{margin-bottom:0}

/* ----------------------------------------------------------------- misc */
.sol-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.sol-card{border:1px solid var(--line);border-radius:var(--r-lg);padding:1.4rem;background:#fff;display:flex;flex-direction:column;gap:.5rem;transition:.18s}
.sol-card:hover{box-shadow:var(--sh-3);transform:translateY(-2px);border-color:var(--brand-2)}
.sol-card p{color:var(--muted);font-size:.9rem;margin:0;flex:1}
.sol-more{display:inline-flex;align-items:center;gap:.45em;font-size:.82rem;font-weight:800;color:var(--accent)}
.sol-more svg{width:16px;height:10px}
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.1rem}
.why-item{display:flex;gap:.8rem;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:1.1rem}
.why-item>svg{width:22px;height:22px;color:var(--ok);flex:none;margin-top:.15rem}
.why-item h4{margin:0 0 .25rem;font-size:.95rem}
.why-item p{margin:0;font-size:.85rem;color:var(--muted)}
.flow{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}
.flow-step{display:flex;gap:.9rem;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:1.1rem}
.flow-n{font-family:var(--head);font-weight:800;font-size:1.05rem;color:var(--accent);flex:none}
.flow-step h4{margin:0 0 .25rem;font-size:.95rem}
.flow-step p{margin:0;font-size:.85rem;color:var(--muted)}

.cta-band{background:linear-gradient(120deg,var(--brand-ink),var(--brand));color:#fff;padding:2.8rem 0}
.cta-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.cta-band h2{color:#fff;margin:0 0 .35rem}
.cta-band p{margin:0;color:#BFD6E2;max-width:62ch}
.cta-band-btns{display:flex;gap:.6rem;flex-wrap:wrap}
.cta-band .btn-ghost{color:#fff;border-color:rgba(255,255,255,.3)}
.cta-band .btn-ghost:hover{background:rgba(255,255,255,.12)}

.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.contact-card{border:1px solid var(--line);border-radius:var(--r);padding:1.2rem;background:#fff}
.contact-card h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:.5rem}
.contact-card .big{font-family:var(--head);font-size:1.25rem;font-weight:800;color:var(--brand);margin:0 0 .3rem}
.contact-card p{margin:0 0 .3rem;font-size:.9rem}
.contact-card a{color:var(--brand-2);font-weight:700}

/* ---------------------------------------------------------------- forms */
.form-wrap{max-width:760px}
form.lead{display:grid;gap:.9rem;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.5rem}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
form.lead label{display:grid;gap:.35rem;font-size:.82rem;font-weight:700;color:var(--ink-2)}
form.lead input,form.lead textarea,form.lead select{
  border:1.5px solid var(--line);border-radius:var(--r-sm);padding:.65em .8em;font:inherit;font-size:.9rem;
  background:#fff;outline:none;width:100%}
form.lead input:focus,form.lead textarea:focus{border-color:var(--brand-2);box-shadow:0 0 0 3px rgba(14,107,143,.1)}
form.lead .check-row{display:flex;gap:.6rem;align-items:flex-start;font-size:.8rem;color:var(--muted)}
form.lead .check-row input{width:auto;margin-top:.2rem}
form.lead .check-row label{display:block;font-weight:500;color:var(--muted);font-size:.8rem}
.form-error{color:#B42318;font-size:.85rem;font-weight:600}
.form-note{border:1px solid var(--ok);background:#F0FBF6;color:#14532D;padding:1rem;border-radius:var(--r);margin-bottom:1rem;font-size:.9rem}
.rfq-grid{display:grid;grid-template-columns:300px 1fr;gap:2rem;align-items:start}
.rfq-aside{display:grid;gap:.7rem;position:sticky;top:120px}
.rfq-aside .fact{border:1px solid var(--line);border-radius:var(--r);background:#fff}
.rfq-form h3{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:.7rem}

/* --------------------------------------------------------------- footer */
.ftr{background:var(--ink);color:#C3CEDA;margin-top:0}
.ftr-cta{background:var(--brand);padding:2.2rem 0}
.ftr-cta .wrap{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.ftr-cta h2{color:#fff;margin:0 0 .3rem;font-size:1.4rem}
.ftr-cta p{margin:0;color:#C9E0EA;font-size:.92rem}
.ftr-cta-btns{display:flex;gap:.6rem;flex-wrap:wrap}
.ftr-cta .btn-ghost{color:#fff;border-color:rgba(255,255,255,.35)}
.ftr-cta .btn-ghost:hover{background:rgba(255,255,255,.12)}
.ftr-main{padding:2.8rem 0}
.ftr-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:2rem}
.ftr-col h3{font-size:.78rem;text-transform:uppercase;letter-spacing:.07em;color:#7E93A8;margin:0 0 .7rem}
.ftr-col h3.mt{margin-top:1.3rem}
.f-link{display:block;padding:.24rem 0;color:#C3CEDA;font-size:.87rem}
.f-link:hover{color:#fff}
.ftr-brand .logo-text strong{color:#fff}
.ftr-brand p{font-size:.86rem;color:#9FB0C2;margin:.9rem 0 0;max-width:38ch}
.ftr-markets{font-size:.82rem}
/* v4.0.14 — official social channels (footer). Icon-only, so they stay quiet
   next to the brand block; the platform name lives in aria-label / title. */
.ftr-social{display:flex;gap:.5rem;margin-top:1rem}
.ftr-social a{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;border:1px solid rgba(255,255,255,.14);color:#C3CEDA;transition:color .18s,border-color .18s,background .18s}
.ftr-social a:hover{color:#fff;border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.06)}
.ftr-social svg{width:17px;height:17px}
.ftr-line{font-size:.84rem;color:#9FB0C2;margin:.2rem 0}
.ftr-bar{border-top:1px solid rgba(255,255,255,.1);padding:1rem 0;font-size:.79rem;color:#8A9CB0}
.ftr-bar .wrap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.ftr-legal{display:flex;gap:1.1rem}
.ftr-legal a:hover{color:#fff}

/* ------------------------------------------------------- floating / misc */
.wa-float{position:fixed;inset-inline-end:18px;bottom:18px;z-index:90;display:inline-flex;align-items:center;
  gap:.5em;background:#25D366;color:#fff;padding:.7rem 1rem;border-radius:999px;font-weight:800;font-size:.85rem;
  box-shadow:0 10px 28px rgba(37,211,102,.4)}
.wa-float svg{width:20px;height:20px}
.wa-float:hover{transform:translateY(-2px)}
.e404n{font-family:var(--head);font-size:5rem;font-weight:800;color:var(--accent);line-height:1;margin:0 0 .5rem}
.pad{padding:4rem 0}
.cookie{position:fixed;inset-inline:0;bottom:0;z-index:95;background:#fff;border-top:1px solid var(--line);
  box-shadow:0 -8px 30px rgba(14,23,38,.12);padding:1rem 0}
.cookie .wrap{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;justify-content:space-between}
.cookie p{margin:0;font-size:.85rem;color:var(--muted);max-width:70ch}
.cookie-btns{display:flex;gap:.5rem}

.reveal{opacity:0;transform:translateY(14px)}
.reveal.in{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}

/* ------------------------------------------------------------------- RTL */
[dir=rtl] .pcard-meta dd,[dir=rtl] .cat-group-head,[dir=rtl] .mega-link,
[dir=rtl] .side-group a,[dir=rtl] .ctile,[dir=rtl] .cta-band .wrap,
[dir=rtl] .ftr-cta .wrap,[dir=rtl] .fact{text-align:right}
[dir=rtl] .pg.next svg,[dir=rtl] .pg.prev svg{transform:scaleX(-1)}

/* ------------------------------------------------------------ responsive */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr;gap:2rem}
  .sec.catalog .wrap{grid-template-columns:1fr}
  .cat-side{position:static;grid-auto-flow:column;grid-auto-columns:minmax(200px,1fr);overflow-x:auto;padding-bottom:.5rem}
  .side-cta{display:none}
  .pdp-grid{grid-template-columns:1fr;gap:1.8rem}
  .ftr-grid{grid-template-columns:1fr 1fr}
  .rfq-grid{grid-template-columns:1fr}
  .rfq-aside{position:static}
}
@media (max-width:900px){
  .hdr-main .wrap{grid-template-columns:1fr auto;gap:.7rem}
  .search{grid-column:1/-1;order:3;max-width:none}
  .logo-text small{display:none}
  .nav-toggle{display:flex}
  .mainnav{max-height:0;overflow:hidden;transition:max-height .28s ease;border-top:0}
  .mainnav.open{max-height:80vh;overflow:auto;border-top:1px solid var(--line)}
  .nav-list{flex-direction:column;align-items:stretch;padding:.5rem 0 1rem}
  .nav-link{border-bottom:1px solid var(--line-2);justify-content:space-between;padding:.9rem .2rem}
  .drop,.mega{position:static;box-shadow:none;border:0;border-radius:0;width:auto;padding:0 0 .6rem .8rem;display:none}
  .nav-item.open>.drop,.nav-item.open>.mega{display:block}
  .nav-item:hover>.drop,.nav-item:hover>.mega{display:none}
  .nav-item.open:hover>.drop,.nav-item.open:hover>.mega{display:block}
  .mega-foot{flex-direction:column;gap:.5rem}
  .statbar{grid-template-columns:1fr 1fr}
  .topbar-tag{display:none}
}
@media (max-width:640px){
  .sec{padding:2.2rem 0}
  .field-row{grid-template-columns:1fr}
  .pgrid{grid-template-columns:1fr 1fr;gap:.8rem}
  .pcard-body{padding:.6rem .65rem .7rem}
  .pcard-title{font-size:.83rem}
  .pcard-meta{display:none}
  .hero-tiles{display:none}
  .gal-thumbs{grid-template-columns:repeat(6,1fr);gap:.35rem}
  .ftr-grid{grid-template-columns:1fr}
  .pdp-price{gap:1.2rem}
  .wa-float span{display:none}
}

/* ============================================================ layout safety
   Grid children default to min-width:auto, which lets a long product name
   blow the column out and force a horizontal scrollbar. These are the
   structural children of the PDP, catalogue and hero grids. */
.cat-main,.pdp-media,.pdp-info,.hero-copy,.cat-group{min-width:0}
.cat-group{display:grid;gap:1rem}
.hdr-cta{flex:none}
/* keep the header CTA on one line at every width — it is the primary action */
.hdr-cta .btn{white-space:nowrap}
@media (max-width:480px){
  .hdr-cta .btn{padding:.5rem .7rem;font-size:.78rem}
  .logo-text small{display:none}
}

/* ---- v4.0.14 homepage showcase videos (vertical 9:16 cards) ---- */
.video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,300px));gap:1.6rem;justify-content:center}
.video-card{margin:0;text-align:center}
.video-card video{width:100%;max-width:300px;aspect-ratio:9/16;display:block;margin:0 auto;border-radius:var(--r-lg);background:var(--ink);box-shadow:var(--sh-3)}
.video-card figcaption{margin-top:.65rem;font-size:.92rem;color:var(--ink-2);font-weight:600}
.video-note{margin-top:1.1rem}
@media (max-width:560px){
  .video-grid{gap:1.1rem}
  .video-card video{max-width:260px}
}

/* ======================================= v4.0.18 sourcing-guide furniture
   The long-form buyer guides (/resources/*, GEO answer-engine series) carry
   inline figures, photographed workshop evidence, pull-quotes and a sourcing
   note. Everything below is scoped to .article-body so no other page type is
   touched. Images are kept at native width (568px) so the workshop frames are
   never upscaled into mush. */
.article-body .figure{margin:1.9rem 0;max-width:640px}
.article-body .figure img{display:block;width:100%;height:auto;border-radius:var(--r-lg);border:1px solid var(--line)}
.article-body .figcap{margin-top:.6rem;font-size:.92rem;color:var(--muted);line-height:1.5}
.article-body blockquote{margin:1.6rem 0;padding:.9rem 1.2rem;border-left:3px solid var(--accent);background:var(--surface);font-size:1.02rem;color:var(--ink-2);border-radius:0 var(--r-sm) var(--r-sm) 0}
.article-body .keytake p{margin-bottom:0}
.article-body .table-wrap{margin:1.7rem 0}
.article-body .src-note{margin-top:2.2rem;padding-top:1.1rem;border-top:1px solid var(--line);font-size:.9rem;color:var(--muted);line-height:1.6}

/* ============================================================
   v4.0.21 — promotional band (home, directly under the hero).

   Design register is deliberately trade, not retail: one accent chip for
   the code, no starbursts, no price-slash graphics. `[dir="rtl"]` flips the
   two-column layout and the step numbers so the Arabic page reads right to
   left without any string juggling. Japanese gets a muted surface and wider
   tracking (見やすさ over punch); German keeps the same sober layout, the
   terms simply carry more of the weight.
   ============================================================ */
.promo{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface)}
.promo-inner{display:grid;grid-template-columns:1.55fr .85fr;gap:2.6rem;align-items:start;padding:2.6rem 0 2.8rem}
.promo-badge{display:inline-flex;align-items:center;gap:.5rem;margin:0 0 .9rem;padding:.34rem .72rem;border-radius:999px;background:var(--accent);color:#fff;font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.promo-count{font-weight:600;letter-spacing:0;text-transform:none;opacity:.92}
.promo-title{margin:0 0 .7rem;font-size:1.72rem;line-height:1.22;letter-spacing:-.015em;color:var(--ink);max-width:32ch}
.promo-lead{margin:0 0 1.05rem;color:var(--ink-2);font-size:1rem;line-height:1.62;max-width:60ch}
.promo-steps{margin:0 0 1.05rem;padding:0;list-style:none;counter-reset:ps;display:grid;gap:.5rem}
.promo-steps li{position:relative;padding-inline-start:2rem;font-size:.94rem;color:var(--ink-2);line-height:1.55;counter-increment:ps}
.promo-steps li::before{content:counter(ps);position:absolute;inset-inline-start:0;top:.1rem;width:1.4rem;height:1.4rem;border-radius:50%;background:var(--ink);color:#fff;font-size:.76rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.promo-code{display:inline-block;padding:.16rem .5rem;border:1.5px dashed var(--accent-2);border-radius:var(--r-sm);background:#fff;color:var(--accent-2);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.95em;font-weight:700;letter-spacing:.09em;direction:ltr;unicode-bidi:isolate}
.promo-terms{margin:0;font-size:.79rem;line-height:1.62;color:var(--muted);max-width:68ch}
.promo-action{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.5rem;display:grid;gap:.7rem;justify-items:stretch;text-align:center;box-shadow:0 1px 2px rgba(14,23,38,.04)}
.promo-codelabel{margin:0;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
.promo-action .promo-code{justify-self:center;font-size:1.34rem;padding:.5rem 1.05rem;letter-spacing:.16em}
.promo-action .btn{width:100%;justify-content:center}
.promo-end{margin:0;font-size:.82rem;color:var(--muted)}
.promo-end strong{color:var(--ink);font-weight:700}
.promo-closed .promo-title{font-size:1.35rem}
.promo-closed .promo-badge{background:var(--muted)}

/* ---- v4.0.23 — "showcase" variant: a full-bleed dark band in the same
   visual language as the print/social poster (deep navy field, diagonal
   accent rake, oversized ghosted numeral, orange code plate). The light
   variant above read as a notice; this one reads as an offer. Text stays
   real DOM (never an image) so answer engines can still quote the price,
   the code and the end date. */
.promo-showcase{position:relative;overflow:hidden;border-top:none;border-bottom:none;
  background:#0A1220;color:#E8EEF7;isolation:isolate}
.promo-showcase::before{content:"";position:absolute;inset:-30% -10% auto auto;width:900px;height:900px;
  background:radial-gradient(circle at 60% 40%,rgba(255,107,53,.30),rgba(255,107,53,.07) 45%,transparent 68%);
  pointer-events:none;z-index:-1}
.promo-showcase::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(circle at 78% 12%,#000,transparent 72%);
          mask-image:radial-gradient(circle at 78% 12%,#000,transparent 72%)}
.promo-showcase .promo-inner{position:relative;grid-template-columns:1.5fr .9fr;gap:3rem;
  align-items:center;padding:3.4rem 0 3.6rem}
/* oversized ghosted numeral behind the copy */
.promo-ghost{position:absolute;inset-inline-end:2%;top:-.28em;z-index:-1;pointer-events:none;
  font-family:var(--head);font-size:clamp(15rem,26vw,24rem);font-weight:800;line-height:.8;
  letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.12);
  -webkit-text-fill-color:transparent;user-select:none}
.promo-showcase .promo-badge{background:rgba(255,107,53,.16);color:#FFB59A;
  border:1px solid rgba(255,107,53,.38);letter-spacing:.08em}
.promo-showcase .promo-count{color:#FFD9C9}
.promo-showcase .promo-title{color:#fff;font-size:clamp(1.9rem,3.1vw,2.55rem);letter-spacing:-.025em;
  max-width:24ch;margin-bottom:.85rem}
.promo-showcase .promo-title em{font-style:normal;color:#FF8A5C}
.promo-showcase .promo-lead{color:#B9C6DA;font-size:1.03rem;max-width:58ch}
.promo-showcase .promo-steps li{color:#C9D5E6}
.promo-showcase .promo-steps li::before{background:rgba(255,255,255,.10);color:#FFB59A;
  border:1px solid rgba(255,255,255,.16)}
.promo-showcase .promo-terms{color:#8494AC}
/* the code plate: solid accent block, Consolas-grade monospace, LTR isolated */
.promo-showcase .promo-action{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.13);
  box-shadow:0 24px 60px rgba(0,0,0,.34);backdrop-filter:blur(2px);padding:1.7rem 1.6rem}
.promo-showcase .promo-codelabel{color:#94A3B8}
.promo-showcase .promo-code{display:inline-block;border:none;border-radius:12px;
  background:linear-gradient(180deg,#FF7B47,#E8551F);color:#121C2B;
  font-family:Consolas,'SF Mono',ui-monospace,Menlo,monospace;font-weight:700;
  letter-spacing:.045em;box-shadow:0 12px 26px rgba(232,85,31,.34);
  max-width:100%;overflow-wrap:anywhere}
.promo-showcase .promo-action .promo-code{font-size:clamp(1.5rem,3.4vw,1.95rem);
  padding:.62rem .95rem;letter-spacing:.03em;width:100%;text-align:center}
.promo-showcase .promo-end{color:#8C9CB4}
.promo-showcase .promo-end strong{color:#fff}
.promo-showcase .btn-accent{background:#fff;color:#0E1726;box-shadow:0 10px 24px rgba(0,0,0,.28)}
.promo-showcase .btn-accent:hover{background:#FFE7DC;color:#0E1726}
.promo-showcase .promo-cta-sub{margin:0;font-size:.79rem;color:#8494AC;line-height:1.5}
@media (max-width:860px){
  .promo-showcase .promo-inner{grid-template-columns:1fr;gap:1.6rem;padding:2.3rem 0 2.5rem}
  .promo-showcase .promo-title{font-size:1.62rem;max-width:none}
  .promo-ghost{font-size:15rem;opacity:.5;inset-inline-end:-8%;top:-.15em}
  .promo-showcase .promo-action{padding:1.3rem 1.1rem}
}
/* RTL: the ghost numeral and the radial rake move to the other side */
[dir="rtl"] .promo-showcase::before{inset:-30% auto auto -10%}
[dir="rtl"] .promo-ghost{inset-inline-end:auto;inset-inline-start:2%}
/* Japanese / German: same dark field, quieter type */
html[lang="ja"] .promo-showcase .promo-title{letter-spacing:.005em;line-height:1.5}
html[lang="ja"] .promo-showcase .promo-lead{line-height:1.95}
html[lang="de"] .promo-showcase .promo-terms{color:#94A3B8}

@media (max-width:860px){
  .promo-inner{grid-template-columns:1fr;gap:1.5rem;padding:1.9rem 0 2rem}
  .promo-title{font-size:1.4rem;max-width:none}
  .promo-action{order:-1}
}
/* RTL: mirror the grid and the counter rail (Arabic page) */
[dir="rtl"] .promo-steps li{padding-inline-start:0;padding-inline-end:2rem}
[dir="rtl"] .promo-steps li::before{inset-inline-start:auto;inset-inline-end:0}
[dir="rtl"] .promo-title,[dir="rtl"] .promo-lead,[dir="rtl"] .promo-terms{letter-spacing:0}
/* Japanese: quieter surface, looser leading — reads as considered, not loud */
html[lang="ja"] .promo{background:#FAFAF8}
html[lang="ja"] .promo-title{letter-spacing:.01em;line-height:1.45}
html[lang="ja"] .promo-lead{line-height:1.9}
html[lang="ja"] .promo-badge{text-transform:none;letter-spacing:.02em;background:#3B4A63}
/* German: terms carry legal weight, so give them a readable measure */
html[lang="de"] .promo-terms{font-size:.8rem;color:var(--ink-2)}

/* ============================================================ v4.0.26 — opening splash (开屏广告)
   A <dialog> so the browser handles focus trap, Esc and the ::backdrop,
   and so the page behind it keeps rendering (crawlable, quotable).
   Markup ships closed; site.js opens it only when the campaign has not
   been dismissed and the visitor is not on a reduced-motion / save-data
   profile. Same poster language as the showcase band: navy field, orange
   rake, oversized ghosted numeral, solid accent code plate. */
.pm{position:fixed;inset:0;margin:auto;padding:0;border:none;background:transparent;
  width:min(560px,calc(100vw - 2.2rem));max-height:calc(100vh - 2.2rem);overflow:visible;
  color:#E8EEF7;z-index:200}
.pm:not([open]){display:none}
.pm::backdrop{background:rgba(6,11,20,.74);backdrop-filter:blur(6px) saturate(.9);-webkit-backdrop-filter:blur(6px) saturate(.9)}
.pm-card{position:relative;overflow:hidden;isolation:isolate;
  background:#0A1220;border:1px solid rgba(255,255,255,.14);border-radius:20px;
  padding:2.1rem 1.9rem 1.5rem;text-align:center;
  box-shadow:0 40px 100px rgba(0,0,0,.55),0 2px 0 rgba(255,255,255,.06) inset;
  animation:pm-in .32s cubic-bezier(.22,.61,.36,1) both}
@keyframes pm-in{from{opacity:0;transform:translateY(14px) scale(.975)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pm-card{animation:none}}
/* orange rake + faint grid, identical recipe to .promo-showcase */
.pm-card::before{content:"";position:absolute;inset:-40% -20% auto auto;width:640px;height:640px;z-index:-1;
  background:radial-gradient(circle at 62% 38%,rgba(255,107,53,.34),rgba(255,107,53,.08) 46%,transparent 68%);
  pointer-events:none}
.pm-card::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(circle at 74% 8%,#000,transparent 70%);
          mask-image:radial-gradient(circle at 74% 8%,#000,transparent 70%)}
.pm-badge{display:inline-block;margin:0 0 .9rem;padding:.3rem .7rem;border-radius:999px;
  background:rgba(255,107,53,.16);border:1px solid rgba(255,107,53,.38);color:#FFB59A;
  font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.pm-x{position:absolute;inset-inline-end:.85rem;top:.85rem;width:2.1rem;height:2.1rem;
  display:grid;place-items:center;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);color:#C9D5E6;
  transition:background .18s ease,color .18s ease}
.pm-x:hover{background:rgba(255,255,255,.16);color:#fff}
.pm-x svg{width:15px;height:15px;display:block}
.pm-title{margin:0 0 .65rem;font-size:clamp(1.5rem,4.4vw,2rem);line-height:1.2;letter-spacing:-.025em;color:#fff;padding-inline:1.1rem}
.pm-title em{font-style:normal;color:#FF8A5C}
.pm-lead{margin:0 auto 1.15rem;max-width:42ch;font-size:.95rem;line-height:1.6;color:#B9C6DA}
.pm-plate{margin:0 0 .5rem;font-family:Consolas,'SF Mono',ui-monospace,Menlo,monospace;
  font-size:clamp(1.45rem,6vw,1.9rem);font-weight:700;letter-spacing:.03em;color:#121C2B;
  background:linear-gradient(180deg,#FF7B47,#E8551F);border-radius:12px;padding:.6rem .9rem;
  box-shadow:0 12px 26px rgba(232,85,31,.34);direction:ltr;unicode-bidi:isolate}
.pm-sub{margin:0 0 1.15rem;font-size:.79rem;line-height:1.5;color:#8494AC}
.pm-cta{width:100%;justify-content:center;background:#fff !important;color:#0E1726 !important;box-shadow:0 10px 24px rgba(0,0,0,.28)}
.pm-cta:hover{background:#FFE7DC !important;color:#0E1726 !important;transform:none}
.pm-end strong{color:#fff;font-weight:700}
.pm-skip{display:inline-block;font-size:.8rem;color:#7E8DA5;text-decoration:underline;
  text-underline-offset:3px;cursor:pointer}
.pm-skip:hover{color:#C9D5E6}
/* Arabic / Hebrew: drop the negative tracking, mirror nothing else (centred card) */
[dir="rtl"] .pm-title,[dir="rtl"] .pm-lead{letter-spacing:0}
/* Japanese: quieter badge, looser leading */
html[lang="ja"] .pm-badge{text-transform:none;letter-spacing:.03em}
html[lang="ja"] .pm-lead{line-height:1.85}
@media (max-width:420px){
  .pm-card{padding:1.9rem 1.25rem 1.3rem;border-radius:16px}
  .pm-lead{font-size:.9rem}
}
/* No-JS safety net: the dialog is inert markup, so it can never be a
   content-blocking wall for a crawler that does not run scripts. */

/* v4.0.33 — heading semantics.
   570 pages (listing + utility) had no <h1>; render.js now promotes the first
   <h2> and tags it .h1-promoted. Restore the previous H2 metrics so the visual
   result is byte-for-byte the same as before the change. */
.v4 h1.h1-promoted{font-size:clamp(1.4rem,2.3vw,2.05rem);font-weight:700}