/* ==========================================================================
   Francoalva Sp. z o.o. — main stylesheet
   Single file, cached 1 year. No frameworks, no external CSS imports.
   Replaces 78 separate stylesheets on the previous WordPress build.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* Brand — taken from the live site's WoodMart theme options */
  --navy:#007BC4;          /* --wd-primary-color */
  --navy-2:#0069A8;
  --navy-3:#0069A8;
  --amber:#FBBC34;         /* --wd-alternative-color */
  --amber-deep:#8A6300;
  --amber-soft:#FEF3D8;

  /* Neutrals */
  --paper:#F5F6F7;
  --surface:#FFFFFF;
  --surface-2:#EEF1F3;
  --ink:#242424;           /* --wd-title-color */
  --ink-2:#4A4A4A;
  --muted:#737373;         /* --wd-text-color, nudged to pass 4.5:1 */
  --line:#E1E5E8;
  --line-soft:#EDF0F2;

  /* Semantic — kept distinct from the brand blue and gold */
  --ok:#1F7A45;
  --ok-soft:#DDEFE4;
  --warn:#8A6300;
  --info:#0069A8;

  /* Type — WoodMart pairing */
  --f-display:"Poppins","Helvetica Neue",Arial,sans-serif;
  --f-body:"Lato","Helvetica Neue",Arial,Helvetica,sans-serif;
  --f-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;

  /* Scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  --radius:2px;            /* --wd-brd-radius: sharp cards */
  --radius-pill:35px;      /* --wd-form-brd-radius: pill buttons and inputs */
  --maxw:1200px;
  --shadow:0 1px 2px rgba(36,36,36,.05), 0 10px 30px -22px rgba(36,36,36,.30);
  --shadow-lg:0 2px 4px rgba(36,36,36,.06), 0 20px 48px -28px rgba(36,36,36,.40);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0F1417;
    --surface:#161C20;
    --surface-2:#1D252A;
    --ink:#F0F3F5;
    --ink-2:#C3CBD0;
    --muted:#94A0A7;
    --line:#2A343A;
    --line-soft:#212A2F;
    --navy:#0F1417;
    --navy-2:#16232B;
    --navy-3:#5CB8F0;
    --amber:#FBBC34;
    --amber-deep:#FBBC34;
    --amber-soft:#2C2313;
    --ok:#5FBE8A;
    --ok-soft:#12281D;
    --info:#5CB8F0;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px -22px rgba(0,0,0,.9);
    --shadow-lg:0 2px 4px rgba(0,0,0,.5), 0 20px 48px -28px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
    --paper:#0F1417;
    --surface:#161C20;
    --surface-2:#1D252A;
    --ink:#F0F3F5;
    --ink-2:#C3CBD0;
    --muted:#94A0A7;
    --line:#2A343A;
    --line-soft:#212A2F;
    --navy:#0F1417;
    --navy-2:#16232B;
    --navy-3:#5CB8F0;
    --amber:#FBBC34;
    --amber-deep:#FBBC34;
    --amber-soft:#2C2313;
    --ok:#5FBE8A;
    --ok-soft:#12281D;
    --info:#5CB8F0;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px -22px rgba(0,0,0,.9);
    --shadow-lg:0 2px 4px rgba(0,0,0,.5), 0 20px 48px -28px rgba(0,0,0,.9);
}


/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important}
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{max-width:100%; height:auto; display:block}
a{color:var(--navy-3); text-decoration-thickness:1px; text-underline-offset:2px}
a:hover{color:var(--amber-deep)}
:focus-visible{outline:3px solid var(--amber); outline-offset:2px; border-radius:2px}
h1,h2,h3,h4{font-family:var(--f-display); font-weight:600; line-height:1.2;
  letter-spacing:-.005em; margin:0; text-wrap:balance}
p{margin:0}
ul,ol{margin:0}

.skip{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--amber); color:#1A1206; padding:12px 20px; font-weight:600;
}
.skip:focus{left:8px; top:8px}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.sr{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

.eyebrow{
  font-family:var(--f-mono); font-size:11px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--amber-deep);
  display:block; margin-bottom:var(--s3);
}
.eyebrow.on-dark{color:var(--amber)}

/* ---------- 3. Header ---------- */
.topbar{
  background:#0B3C5D; color:#D3E4EF;
  font-size:13px; border-bottom:1px solid rgba(255,255,255,.08);
}
.topbar .wrap{
  display:flex; flex-wrap:wrap; gap:var(--s3) var(--s5);
  align-items:center; justify-content:space-between; min-height:40px; padding-block:6px;
}
.topbar-facts{display:flex; flex-wrap:wrap; gap:var(--s3) var(--s5); align-items:center; margin:0; padding:0; list-style:none}
.topbar-facts li{display:flex; align-items:center; gap:7px}
.topbar a{color:#CFE0E4; text-decoration:none}
.topbar a:hover{color:var(--amber); text-decoration:underline}
.topbar .vat{font-family:var(--f-mono); font-size:12px; letter-spacing:.02em}
.langs{display:flex; gap:2px; list-style:none; margin:0; padding:0}
.langs a{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  padding:4px 9px; border:1px solid rgba(255,255,255,.18); border-radius:2px; display:block;
}
.langs a[aria-current="true"]{background:var(--amber); border-color:var(--amber); color:#1A1206; font-weight:600}

.masthead{
  background:var(--surface); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:50;
}
.masthead .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s5); min-height:74px;
}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink); flex-shrink:0}
.brand .mark{height:40px; width:auto; flex-shrink:0; display:block}
@media (max-width:400px){ .brand .mark{height:34px} }
.brand-txt{display:flex; flex-direction:column; line-height:1.05}
.brand-txt .n{font-family:var(--f-display); font-weight:600; font-size:19px; letter-spacing:-.01em}
.brand-txt .t{font-family:var(--f-mono); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin-top:3px}

.nav{display:flex; align-items:center; gap:var(--s2)}
.nav ul{display:flex; gap:var(--s1); list-style:none; margin:0; padding:0}
.nav ul a{
  font-size:14.5px; font-weight:500; color:var(--ink-2); text-decoration:none;
  padding:9px 13px; border-radius:2px; display:block; white-space:nowrap;
}
.nav ul a:hover{background:var(--surface-2); color:var(--ink)}
.nav ul a[aria-current="page"]{color:var(--ink); box-shadow:inset 0 -2px 0 var(--amber)}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--f-body); font-size:14.5px; font-weight:600;
  padding:12px 26px; border-radius:var(--radius-pill); border:1px solid transparent;
  text-decoration:none; cursor:pointer; transition:background .15s ease, color .15s ease, border-color .15s ease;
  line-height:1.2; text-align:center;
}
.btn-primary{background:var(--amber); color:#1A1206; border-color:var(--amber)}
.btn-primary:hover{background:var(--amber-deep); border-color:var(--amber-deep); color:#fff}
.btn-outline{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-outline:hover{border-color:var(--ink); background:var(--surface-2); color:var(--ink)}
.btn-ghost-light{background:transparent; color:#fff; border-color:rgba(255,255,255,.35)}
.btn-ghost-light:hover{background:rgba(255,255,255,.1); color:#fff; border-color:#fff}
.btn-lg{padding:15px 34px; font-size:16px}

.navtoggle{
  display:none; background:none; border:1px solid var(--line); border-radius:2px;
  padding:9px 11px; cursor:pointer; color:var(--ink);
}
.navtoggle svg{width:20px; height:20px; display:block}

/* ---------- 4. Hero ---------- */
.hero{background:#0B3C5D; color:#fff; position:relative; overflow:hidden}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(70% 90% at 88% 8%, rgba(232,163,23,.16), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 40%);
}
.hero .wrap{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:var(--s8); align-items:center; padding-block:var(--s9);
}
.hero h1{
  font-size:clamp(34px,5.2vw,58px); color:#fff; margin-bottom:var(--s5);
  letter-spacing:-.025em;
}
.hero h1 em{font-style:normal; color:var(--amber)}
.hero .lede{font-size:clamp(17px,2vw,19.5px); color:#C6D8DC; max-width:56ch; line-height:1.6}
.hero-cta{display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s6)}

.spec-panel{
  background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius); backdrop-filter:blur(2px);
}
.spec-panel h2{
  font-family:var(--f-mono); font-size:11px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--amber); padding:16px 22px;
  border-bottom:1px solid rgba(255,255,255,.14); margin:0;
}
.spec-panel dl{margin:0; padding:6px 22px 18px}
.spec-panel div{display:flex; justify-content:space-between; gap:var(--s4);
  padding:11px 0; border-bottom:1px solid rgba(255,255,255,.08)}
.spec-panel div:last-child{border-bottom:none}
.spec-panel dt{font-size:13.5px; color:#A9C0C6; margin:0}
.spec-panel dd{margin:0; font-family:var(--f-mono); font-size:13.5px; font-weight:500;
  color:#fff; text-align:right; font-variant-numeric:tabular-nums}

/* ---------- 5. Sections ---------- */
.sec{padding-block:var(--s9)}
.sec-tight{padding-block:var(--s8)}
.sec-alt{background:var(--surface)}
.sec-dark{background:#0B3C5D; color:#fff}
.sec-dark h2,.sec-dark h3{color:#fff}
.sec-dark p{color:#C6D8DC}

.sec-head{max-width:64ch; margin-bottom:var(--s7)}
.sec-head h2{font-size:clamp(26px,3.6vw,38px); margin-bottom:var(--s4)}
.sec-head p{font-size:17px; color:var(--ink-2); line-height:1.65}
.sec-dark .sec-head p{color:#B5CBD0}

/* ---------- 6. Stat band ---------- */
.stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:1px; background:var(--line); border-block:1px solid var(--line);
}
.sec-dark .stats{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.14)}
.stat{background:var(--paper); padding:26px 24px}
.sec-dark .stat{background:#0B3C5D}
.stat .n{
  font-family:var(--f-display); font-weight:600; font-size:38px; line-height:1;
  font-variant-numeric:tabular-nums; display:block; color:var(--navy-3); margin-bottom:9px;
  letter-spacing:-.03em;
}
.sec-dark .stat .n{color:var(--amber)}
.stat .l{font-size:13.5px; color:var(--muted); line-height:1.45; display:block}
.sec-dark .stat .l{color:#A9C0C6}

/* ---------- 7. Category grid ---------- */
.cats{display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:var(--s4)}
.cat{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 24px 24px; text-decoration:none; color:inherit; display:block;
  transition:border-color .16s ease, transform .16s ease, box-shadow .16s ease;
  position:relative; overflow:hidden;
}
.cat::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--amber); transform:scaleY(0); transform-origin:top;
  transition:transform .2s ease;
}
.cat:hover{border-color:var(--navy-3); transform:translateY(-2px); box-shadow:var(--shadow-lg)}
.cat:hover::before{transform:scaleY(1)}
.cat .ico{width:34px; height:34px; color:var(--navy-3); margin-bottom:var(--s4)}
.cat h3{font-size:17.5px; margin-bottom:9px; color:var(--ink)}
.cat p{font-size:14px; color:var(--muted); line-height:1.55}
.cat .lines{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--amber-deep); margin-top:14px; display:block; font-weight:500;
}

/* ---------- 8. Product cards ---------- */
.products{display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:var(--s4)}
.product{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  display:flex; flex-direction:column; overflow:hidden;
}
.product-fig{
  background:#fff; border-bottom:1px solid var(--line);
  aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  padding:16px; overflow:hidden; text-decoration:none;
}
.product-fig img{
  max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; mix-blend-mode:multiply;
}
.noimg{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:#8A9AA0; text-align:center; line-height:1.7; border:1px dashed #C9D3D6;
  padding:22px 14px; border-radius:2px; width:100%;
}
.product-body{padding:20px 20px 22px; display:flex; flex-direction:column; flex:1}
.product .brandline{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin-bottom:8px; display:block;
}
.product h3{font-size:16px; line-height:1.32; margin-bottom:14px}
.product dl{
  margin:0 0 16px; font-size:13px; display:grid; grid-template-columns:auto 1fr;
  gap:5px var(--s3); align-items:baseline;
}
.product dt{color:var(--muted); font-size:12.5px}
.product dd{
  margin:0; text-align:right; font-family:var(--f-mono); font-size:12.5px;
  color:var(--ink-2); font-variant-numeric:tabular-nums;
}
.product .foot{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:var(--s3)}
.product .quote{font-size:13px; color:var(--muted)}
.badge{
  display:inline-block; font-family:var(--f-mono); font-size:10px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; padding:4px 8px; border-radius:2px;
  background:var(--ok-soft); color:var(--ok);
}
.badge-stock{background:var(--ok-soft); color:var(--ok)}
.badge-order{background:var(--amber-soft); color:var(--amber-deep)}

/* ---------- 9. Process ---------- */
.steps{counter-reset:step; display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:var(--s5)}
.step{position:relative; padding-top:var(--s5)}
.step::before{
  counter-increment:step; content:counter(step,decimal-leading-zero);
  font-family:var(--f-mono); font-size:12px; font-weight:600; letter-spacing:.1em;
  color:var(--amber); position:absolute; top:0; left:0;
}
.step::after{
  content:""; position:absolute; top:7px; left:34px; right:0; height:1px;
  background:var(--line);
}
.sec-dark .step::after{background:rgba(255,255,255,.18)}
.step:last-child::after{display:none}
.step h3{font-size:16.5px; margin-bottom:9px; margin-top:var(--s3)}
.step p{font-size:14px; color:var(--ink-2); line-height:1.6}

/* ---------- 10. Split feature ---------- */
.split{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:var(--s8); align-items:start}
.checklist{list-style:none; padding:0; margin:var(--s5) 0 0; display:grid; gap:var(--s4)}
.checklist li{display:grid; grid-template-columns:22px 1fr; gap:var(--s3); font-size:15px; line-height:1.6; color:var(--ink-2)}
.checklist svg{width:19px; height:19px; color:var(--ok); margin-top:3px}
.checklist strong{color:var(--ink); font-weight:600; display:block}
.sec-dark .checklist li{color:#C6D8DC}
.sec-dark .checklist strong{color:#fff}
.sec-dark .checklist svg{color:var(--amber)}

/* ---------- 11. Credentials ---------- */
.creds{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.cred{background:var(--surface); padding:22px 22px 20px}
.cred .k{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); display:block; margin-bottom:8px;
}
.cred .v{font-family:var(--f-mono); font-size:15px; font-weight:500; color:var(--ink);
  display:block; word-break:break-word}
.cred .note{font-size:12.5px; color:var(--muted); margin-top:7px; display:block; line-height:1.45}

/* ---------- 12. Forms ---------- */
.formcard{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:32px; box-shadow:var(--shadow);
}
.formgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:var(--s4)}
.field{display:flex; flex-direction:column; gap:7px}
.field.full{grid-column:1/-1}
label{font-size:13.5px; font-weight:600; color:var(--ink)}
label .req{color:var(--amber-deep)}
.hint{font-size:12.5px; color:var(--muted); font-weight:400}
input,select,textarea{
  font-family:var(--f-body); font-size:15px; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-pill);
  padding:11px 13px; width:100%; transition:border-color .15s ease;
}
input:hover,select:hover,textarea:hover{border-color:var(--muted)}
input:focus,select:focus,textarea:focus{border-color:var(--navy-3); outline:none;
  box-shadow:0 0 0 3px rgba(0,123,196,.18)}
textarea{resize:vertical; min-height:110px; line-height:1.55; border-radius:14px}
.consent{display:grid; grid-template-columns:20px 1fr; gap:var(--s3); align-items:start; font-size:13.5px; color:var(--ink-2)}
.consent input{width:18px; height:18px; margin-top:2px; accent-color:var(--navy-3)}
.formnote{font-size:12.5px; color:var(--muted); margin-top:var(--s4); line-height:1.55}

/* ---------- 13. FAQ ---------- */
.faq{display:grid; gap:var(--s2); max-width:74ch}
.faq details{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
}
.faq summary{
  cursor:pointer; padding:17px 22px; font-weight:600; font-size:15.5px;
  list-style:none; display:flex; justify-content:space-between; gap:var(--s4); align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-family:var(--f-mono); font-size:19px; color:var(--amber-deep); flex-shrink:0}
.faq details[open] summary::after{content:"−"}
.faq details[open] summary{border-bottom:1px solid var(--line-soft)}
.faq .a{padding:16px 22px 20px; font-size:14.5px; color:var(--ink-2); line-height:1.65}
.faq .a p+p{margin-top:var(--s3)}

/* ---------- 14. Article ---------- */
.article{max-width:70ch; margin:0 auto}
.article h1{font-size:clamp(29px,4.4vw,44px); margin-bottom:var(--s4)}
.article .meta{
  font-family:var(--f-mono); font-size:12px; color:var(--muted);
  letter-spacing:.06em; display:flex; flex-wrap:wrap; gap:var(--s4); margin-bottom:var(--s7);
  padding-bottom:var(--s5); border-bottom:1px solid var(--line);
}
.article h2{font-size:clamp(21px,2.7vw,27px); margin:var(--s8) 0 var(--s4)}
.article h3{font-size:18.5px; margin:var(--s6) 0 var(--s3)}
.article p{font-size:17px; line-height:1.72; color:var(--ink-2); margin-bottom:var(--s4)}
.article ul,.article ol{margin:0 0 var(--s5); padding-left:22px}
.article li{font-size:17px; line-height:1.7; color:var(--ink-2); margin-bottom:10px}
.article strong{color:var(--ink); font-weight:600}
.callout{
  background:var(--amber-soft); border-left:3px solid var(--amber);
  padding:20px 24px; margin:var(--s6) 0; border-radius:0 var(--radius) var(--radius) 0;
}
.callout p{margin:0; font-size:15.5px; color:var(--ink-2)}
.callout strong{color:var(--ink)}

.postlist{display:grid; gap:var(--s4); grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.post{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 24px; display:flex; flex-direction:column; transition:border-color .16s ease, box-shadow .16s ease;
}
.post:hover{border-color:var(--navy-3); box-shadow:var(--shadow-lg)}
.post .tagline{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--amber-deep); margin-bottom:11px; display:block}
.post h3{font-size:19px; line-height:1.28; margin-bottom:11px}
.post h3 a{color:var(--ink); text-decoration:none}
.post h3 a:hover{color:var(--navy-3)}
.post p{font-size:14.5px; color:var(--ink-2); line-height:1.6; margin-bottom:var(--s4)}
.post .when{font-family:var(--f-mono); font-size:11.5px; color:var(--muted); margin-top:auto}

/* ---------- 15. Tables ---------- */
.scroller{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface)}
table{width:100%; border-collapse:collapse; font-size:14.5px}
th,td{padding:12px 16px; text-align:left; border-bottom:1px solid var(--line-soft)}
th{font-family:var(--f-mono); font-size:10.5px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-2); background:var(--surface-2);
  border-bottom:1px solid var(--line); white-space:nowrap}
tr:last-child td{border-bottom:none}
td.num{font-family:var(--f-mono); font-variant-numeric:tabular-nums; white-space:nowrap}

/* ---------- 16. Breadcrumbs ---------- */
.crumbs{padding-block:var(--s4); border-bottom:1px solid var(--line); background:var(--surface)}
.crumbs ol{display:flex; flex-wrap:wrap; gap:9px; list-style:none; margin:0; padding:0;
  font-size:13px; color:var(--muted)}
.crumbs li+li::before{content:"/"; margin-right:9px; color:var(--line)}
.crumbs a{color:var(--muted); text-decoration:none}
.crumbs a:hover{color:var(--navy-3); text-decoration:underline}
.crumbs [aria-current="page"]{color:var(--ink-2)}

/* ---------- 17. CTA band ---------- */
.ctaband{background:#0069A8; color:#fff}
.ctaband .wrap{
  display:flex; flex-wrap:wrap; gap:var(--s6); align-items:center; justify-content:space-between;
  padding-block:var(--s8);
}
.ctaband h2{font-size:clamp(24px,3.2vw,34px); color:#fff; margin-bottom:var(--s3); max-width:22ch}
.ctaband p{color:#E4EFF7; font-size:16.5px; max-width:52ch}
.ctaband .acts{display:flex; flex-wrap:wrap; gap:var(--s3)}

/* ---------- 18. Footer ---------- */
.footer{background:#0B3C5D; color:#B7CCDA; padding-block:var(--s8) var(--s6); font-size:14.5px}
.footer-grid{
  display:grid; grid-template-columns:minmax(240px,1.4fr) repeat(auto-fit,minmax(160px,1fr));
  gap:var(--s7); padding-bottom:var(--s7); border-bottom:1px solid rgba(255,255,255,.12);
}
.footer h3{
  font-family:var(--f-mono); font-size:11px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--amber); margin-bottom:var(--s4);
}
.footer ul{list-style:none; padding:0; margin:0; display:grid; gap:11px}
.footer a{color:#A9C0C6; text-decoration:none}
.footer a:hover{color:#fff; text-decoration:underline}
.footer address{font-style:normal; line-height:1.75; color:#A9C0C6}
.footer address strong{color:#fff; font-weight:600; display:block; margin-bottom:6px}
.footer .legal{
  display:flex; flex-wrap:wrap; gap:var(--s3) var(--s5); justify-content:space-between;
  padding-top:var(--s5); font-size:13px; color:#8AA3AA;
}
.footer .legal ul{display:flex; flex-wrap:wrap; gap:var(--s5)}
.footer .regs{font-family:var(--f-mono); font-size:12.5px; line-height:1.9; color:#A9C0C6; margin-top:var(--s4)}
.footer .regs b{color:#fff; font-weight:500}

/* Placeholder marker — every one must be replaced before launch. See README.md */
.todo{
  background:var(--amber-soft); color:var(--amber-deep); font-family:var(--f-mono);
  font-size:.86em; padding:1px 6px; border-radius:2px; border:1px dashed var(--amber);
  white-space:nowrap;
}
.footer .todo{background:rgba(232,163,23,.16); color:var(--amber); border-color:rgba(232,163,23,.5)}

/* ---------- 19. Responsive ---------- */
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr; gap:var(--s7); padding-block:var(--s8)}
  .navtoggle{display:block}
  .nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:var(--surface); border-bottom:1px solid var(--line);
    flex-direction:column; align-items:stretch; padding:var(--s4) 24px var(--s5);
    gap:var(--s3); box-shadow:var(--shadow-lg);
  }
  .nav[data-open="true"]{display:flex}
  .nav ul{flex-direction:column; gap:2px}
  .nav ul a{padding:12px 14px; font-size:16px}
  .nav ul a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--amber); background:var(--surface-2)}
  .nav .btn{width:100%}
  .masthead .wrap{position:relative}
}
@media (max-width:620px){
  :root{--s9:64px; --s8:48px}
  .wrap{padding:0 18px}
  .topbar .wrap{justify-content:flex-start}
  .formcard{padding:22px 20px}
  .step::after{display:none}
  .ctaband .wrap{flex-direction:column; align-items:flex-start}
}

@media print{
  .topbar,.masthead,.ctaband,.navtoggle,.formcard{display:none}
  body{background:#fff; color:#000; font-size:12pt}
  .hero{background:#fff; color:#000}
  .hero h1,.sec-dark h2{color:#000}
}


/* ---------- 20. Catalogue (real product data) ---------- */
.product h3 a{color:var(--ink); text-decoration:none}
.product h3 a:hover{color:var(--navy-3); text-decoration:underline}
.pblurb{
  font-size:13px; line-height:1.55; color:var(--muted);
  margin:0 0 14px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden;
}
.product .foot{padding-top:2px}

/* Brand wall */
.brandwall{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:var(--s2);
}
.brandwall li{
  font-family:var(--f-mono); font-size:13px; font-weight:500; color:var(--ink-2);
  background:var(--paper); border:1px solid var(--line); border-radius:2px;
  padding:9px 15px; white-space:nowrap;
}
.sec-alt .brandwall li{background:var(--paper)}

/* Catalogue index rows */
.catrows{display:grid; gap:var(--s3)}
.catrow{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 26px; display:grid; grid-template-columns:40px 1fr auto;
  gap:var(--s5); align-items:start; transition:border-color .16s ease, box-shadow .16s ease;
}
.catrow:hover{border-color:var(--navy-3); box-shadow:var(--shadow-lg)}
.catrow .ico{width:34px; height:34px; color:var(--navy-3); margin-top:3px}
.catrow h2{font-size:20px; margin:0 0 8px}
.catrow h2 a{color:var(--ink); text-decoration:none}
.catrow h2 a:hover{color:var(--navy-3); text-decoration:underline}
.catrow-body p{font-size:14.5px; color:var(--ink-2); line-height:1.6; margin:0}
.catsubs{margin-top:12px !important; font-size:13px !important; color:var(--muted) !important}
.catsubs a{color:var(--navy-3); text-decoration:none}
.catsubs a:hover{text-decoration:underline}
.catcount{
  font-family:var(--f-mono); text-align:right; color:var(--muted);
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
}
.catcount b{
  display:block; font-family:var(--f-display); font-size:27px; font-weight:600;
  color:var(--navy-3); letter-spacing:-.02em; line-height:1; margin-bottom:5px;
  font-variant-numeric:tabular-nums;
}

/* Sub-category blocks on a division page */
.subcat{margin-bottom:var(--s8); scroll-margin-top:96px}
.subcat:last-child{margin-bottom:0}
.subhead{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--s4);
  border-bottom:2px solid var(--ink); padding-bottom:12px; margin-bottom:var(--s5);
}
.subhead h2{font-size:clamp(19px,2.4vw,24px); margin:0}
.subhead .catcount b{font-size:19px; display:inline; margin:0 5px 0 0}

/* Product detail page */
.pdp{display:grid; grid-template-columns:minmax(0,460px) minmax(0,1fr); gap:var(--s8); align-items:start}
.pdp-media{
  margin:0; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:28px; display:flex; align-items:center; justify-content:center;
  aspect-ratio:1/1; overflow:hidden;
}
.pdp-media img{max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; mix-blend-mode:multiply}
.pdp-info h1{font-size:clamp(26px,3.8vw,38px); margin-bottom:var(--s5)}
.pdp-info .eyebrow a{color:inherit; text-decoration:none}
.pdp-info .eyebrow a:hover{text-decoration:underline}
.pdp-desc p{font-size:16.5px; line-height:1.7; color:var(--ink-2); margin-bottom:var(--s4)}
.pdp-desc p:last-child{margin-bottom:0}
.muted-note{color:var(--muted) !important; font-style:italic}
.pdp-specs{
  margin:var(--s6) 0 var(--s6); border-top:1px solid var(--line);
}
.pdp-specs div{
  display:flex; justify-content:space-between; gap:var(--s4);
  padding:11px 0; border-bottom:1px solid var(--line-soft);
}
.pdp-specs dt{font-size:14px; color:var(--muted); margin:0}
.pdp-specs dd{
  margin:0; font-family:var(--f-mono); font-size:13.5px; color:var(--ink);
  text-align:right; font-variant-numeric:tabular-nums;
}
.pdp-specs dd a{color:var(--navy-3); text-decoration:none}
.pdp-specs dd a:hover{text-decoration:underline}
.pdp-cta{display:flex; flex-wrap:wrap; gap:var(--s3); margin-bottom:var(--s4)}

@media (max-width:820px){
  .pdp{grid-template-columns:1fr; gap:var(--s6)}
  .pdp-media{max-width:420px}
}
@media (max-width:640px){
  .catrow{grid-template-columns:1fr; gap:var(--s4)}
  .catrow .ico{margin-top:0}
  .catcount{text-align:left}
  .catcount b{display:inline; font-size:20px; margin-right:6px}
  .subhead{flex-direction:row; align-items:baseline}
}


/* ---------- 21. WhatsApp click-to-chat ---------- */
/* Plain links, no widget script. WhatsApp green is used only here, as a
   channel signal — it is not part of the site palette. */
/* WhatsApp brand green is ~3:1 against white, which fails for a 15px button
   label. The green is darkened in light mode and inverted (light green, dark
   ink) in dark mode, the same way the amber primary button works. */
:root{ --wa:#117F41; --wa-hover:#0C6533; --wa-on:#FFFFFF; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --wa:#4FD68A; --wa-hover:#6FE0A0; --wa-on:#062616; }
}
:root[data-theme="dark"]{ --wa:#4FD68A; --wa-hover:#6FE0A0; --wa-on:#062616; }

.wa-inline{display:inline-flex; align-items:center; gap:6px}
.wa-inline svg{width:14px; height:14px; flex-shrink:0}

.btn-wa{background:var(--wa); border-color:var(--wa); color:var(--wa-on)}
.btn-wa:hover{background:var(--wa-hover); border-color:var(--wa-hover); color:var(--wa-on)}
.btn-wa svg{width:18px; height:18px; flex-shrink:0}

.footer .wa-float svg{width:26px; height:26px}
.wa-float{
  position:fixed; right:20px; bottom:20px; z-index:60;
  display:inline-flex; align-items:center; gap:10px;
  background:var(--wa); color:var(--wa-on); text-decoration:none;
  padding:13px 20px 13px 16px; border-radius:999px;
  font-family:var(--f-body); font-size:15px; font-weight:600; line-height:1;
  box-shadow:0 4px 14px rgba(15,26,29,.28);
  transition:transform .16s ease, background .16s ease;
}
.wa-float svg{width:24px; height:24px; flex-shrink:0}
.wa-float:hover{background:var(--wa-hover); color:var(--wa-on); transform:translateY(-2px)}
.wa-float:focus-visible{outline:3px solid var(--amber); outline-offset:3px}
@media (prefers-reduced-motion: reduce){ .wa-float{transition:none} .wa-float:hover{transform:none} }
@media (max-width:620px){
  .wa-float{right:14px; bottom:14px; padding:13px; gap:0}
  .wa-float span{position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
}
@media print{ .wa-float{display:none} }

/* ---- Client reviews ------------------------------------------------------ */
.stars{color:#FBBC34; letter-spacing:2px; font-size:18px; line-height:1}
.reviewlist{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; margin:8px 0 8px}
.review{background:var(--card,#fff); border:1px solid rgba(0,0,0,.08); border-radius:6px;
  padding:22px 24px; display:flex; flex-direction:column; gap:12px}
.review-text{margin:0; font-size:16px; line-height:1.65; color:var(--ink-2,#555)}
.review-who{margin:0; font-size:14px; color:var(--ink-2,#555)}
.review-who strong{color:var(--ink,#242424)}
.review-who span{display:block; font-size:13px; opacity:.85}
.rating-input{display:inline-flex; flex-direction:row-reverse; gap:4px}
.rating-input input{position:absolute; opacity:0; width:1px; height:1px}
.rating-input label{font-size:30px; color:#d4d4d4; cursor:pointer; line-height:1}
.rating-input input:checked ~ label,
.rating-input label:hover, .rating-input label:hover ~ label{color:#FBBC34}
@media (prefers-color-scheme:dark){
  .review{background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.12)}
}