@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/barlow-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/barlow-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/barlow-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/barlow-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/barlow-condensed-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/barlow-condensed-latin-700-normal.woff2) format('woff2')}
/* Design system carried over from the approved mock-ups (mockups/src/base.css + extra.css). */
:root{
  --blue:#25459C; --blue-dk:#1C3678; --blue-tint:#EAEEF8;
  --lime:#A1C733;
  --ink:#24282D; --ink-2:#4A5058; --muted:#6B727B;
  --line:#E3E5E8; --bg:#FFFFFF; --bg-soft:#F7F7F5;
  --radius:6px;
  --font:'Barlow', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-head:'Barlow Condensed', 'Barlow', Arial, sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font);color:var(--ink);background:var(--bg);font-size:16px;line-height:1.5}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
svg{display:block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.wrap{max-width:1360px;margin:0 auto;padding:0 24px}
.tbc{display:inline-block;background:#FFF4C2;color:#6B5600;font-size:.78em;font-weight:600;padding:0 6px;border-radius:3px;margin-left:4px;white-space:nowrap}
.tbc-dark{background:#4a4b3a;color:#f3e7a6}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:15px;line-height:1;padding:12px 16px;border-radius:var(--radius);border:2px solid transparent;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-dk)}
.btn-outline{border-color:var(--blue);color:var(--blue);background:#fff}
.btn-outline:hover{background:var(--blue-tint)}
.btn-light{background:#fff;color:var(--blue)}
.btn-light:hover{background:var(--blue-tint)}
.btn-ghost{border-color:rgba(255,255,255,.7);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.12)}

/* Header – single white row */
.site-header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.header-row{display:flex;align-items:center;gap:20px;height:84px}
.logo img{width:189px;height:auto}
.menu-btn{display:none}
.search{flex:1;display:flex;min-width:240px;height:48px;border:2px solid var(--ink);border-radius:var(--radius);overflow:hidden}
.search input{flex:1;border:0;padding:0 16px;font:inherit;font-size:15px;color:var(--ink);outline:none;min-width:0}
.search input::placeholder{color:var(--muted)}
.search button{width:54px;border:0;background:var(--ink);color:#fff;cursor:pointer;display:grid;place-items:center}
.search button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.search:focus-within{border-color:var(--blue)}
.search:focus-within button{background:var(--blue)}
.phone{display:flex;align-items:center;gap:10px;font-family:var(--font-head);font-weight:700;font-size:24px;color:var(--blue);white-space:nowrap;letter-spacing:.2px}
.phone small{display:block;font-family:var(--font);font-weight:500;font-size:12px;color:var(--muted);letter-spacing:0;line-height:1.1}
.phone span{line-height:1.05}
.phone svg{width:28px;height:28px;fill:none;stroke:var(--blue);stroke-width:2;stroke-linejoin:round}
.account{display:flex;gap:8px}
.cart{position:relative;width:46px;height:46px;display:grid;place-items:center;border-radius:var(--radius);color:var(--ink)}
.cart:hover{background:var(--bg-soft)}
.cart svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.cart .count{position:absolute;top:2px;right:0;min-width:19px;height:19px;border-radius:10px;background:var(--lime);color:var(--ink);font-size:11px;font-weight:700;display:grid;place-items:center;padding:0 4px}

/* USP strip */
.usp-strip{background:var(--bg-soft);border-bottom:1px solid var(--line);font-size:14px;color:var(--ink-2)}
.usp-strip ul{list-style:none;margin:0 auto;display:flex;justify-content:space-between;gap:16px;padding-top:9px;padding-bottom:9px}
.usp-strip li{display:flex;align-items:center;gap:8px;font-weight:500}
.usp-strip svg{width:18px;height:18px;fill:none;stroke:var(--blue);stroke-width:2;stroke-linejoin:round;flex:none}

/* Layout */
.layout{display:grid;grid-template-columns:280px 1fr;gap:28px;padding-top:24px;padding-bottom:48px;align-items:start}

/* Sidebar */
.sidebar{border:1px solid var(--line);border-radius:var(--radius);background:#fff;position:relative}
.sidebar-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:3px solid var(--blue);font-family:var(--font-head);font-weight:700;font-size:19px;text-transform:uppercase;letter-spacing:.6px}
.close-btn{display:none;border:0;background:none;font-size:28px;line-height:1;cursor:pointer;color:var(--ink)}
.cats{list-style:none;margin:0;padding:6px 0}
.cats > li{position:relative}
.cats > li > a{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 16px;font-weight:600;font-size:15px;color:var(--ink);border-left:3px solid transparent}
.cats > li:hover > a,.cats > li:focus-within > a{background:var(--blue-tint);color:var(--blue);border-left-color:var(--blue)}
.chev{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);flex:none;opacity:.6}
.flyout{display:none;position:absolute;left:100%;top:-6px;width:300px;background:#fff;border:1px solid var(--line);border-top:3px solid var(--blue);border-radius:0 var(--radius) var(--radius) var(--radius);box-shadow:0 10px 24px rgba(20,24,30,.12);padding:16px 18px;z-index:40}
.cats > li:hover > .flyout,.cats > li:focus-within > .flyout{display:block}
.flyout h4{margin:0 0 8px;font-family:var(--font-head);font-size:18px;text-transform:uppercase;letter-spacing:.4px}
.flyout ul{list-style:none;margin:0 0 10px;padding:0}
.flyout li a{display:block;padding:5px 0;font-size:15px;color:var(--ink-2)}
.flyout li a:hover{color:var(--blue);text-decoration:underline}
.flyout .fly-tool{margin-top:4px;padding-top:4px;border-top:1px solid var(--line)}
.flyout .fly-tool a{font-weight:600;color:var(--blue)}
.flyout .all{font-weight:600;color:var(--blue);font-size:14px}
.sidebar-card{margin:6px 12px 12px;padding:14px;background:var(--bg-soft);border-radius:var(--radius);font-size:14px}
.sidebar-card p{margin:4px 0 8px;color:var(--ink-2)}
.sidebar-card a{color:var(--blue);font-weight:600;word-break:break-all}

/* Hero */
.hero{display:grid;grid-template-columns:1.25fr 1fr;align-items:center;gap:24px;background:var(--blue);color:#fff;border-radius:var(--radius);padding:36px 40px;position:relative;overflow:hidden;
  background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 2px,transparent 2px 14px)}
.hero::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--lime)}
.eyebrow{margin:0 0 6px;font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:1.4px;color:#D8E6B0}
.hero h1{margin:0 0 12px;font-family:var(--font-head);font-weight:700;font-size:44px;line-height:1.02;text-transform:uppercase;letter-spacing:.3px}
.lede{margin:0 0 20px;font-size:17px;color:#E4E9F5;max-width:52ch}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap}
.hero-points{list-style:none;margin:18px 0 0;padding:0;display:flex;gap:6px 20px;flex-wrap:wrap;font-size:14px;color:#E4E9F5}
.hero-points li::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--lime);margin-right:8px;vertical-align:1px}
.hero-art{position:relative}
.hero-art svg{width:100%;max-width:340px;margin:0 auto}
.ph-note{display:block;text-align:center;font-size:11px;letter-spacing:.3px;opacity:.75;margin-top:6px}

/* Tiles */
.tiles-section{margin-top:32px}
.section-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.section-head h2,.how h2,.contact h2{margin:0;font-family:var(--font-head);font-weight:700;font-size:30px;text-transform:uppercase;letter-spacing:.3px}
.link{color:var(--blue);font-weight:600;font-size:15px}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tile{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow:hidden;transition:border-color .15s,box-shadow .15s,transform .15s}
.tile:hover{border-color:var(--blue);box-shadow:0 6px 18px rgba(37,69,156,.12);transform:translateY(-2px)}
.tile-lg{grid-column:span 2}
.ph{position:relative;aspect-ratio:16/9;background:#F1F2F3;background-image:linear-gradient(45deg,#ECEDEF 25%,transparent 25%,transparent 75%,#ECEDEF 75%),linear-gradient(45deg,#ECEDEF 25%,transparent 25%,transparent 75%,#ECEDEF 75%);background-size:20px 20px;background-position:0 0,10px 10px;display:grid;place-items:center;border-bottom:1px solid var(--line)}
.tile-lg .ph{aspect-ratio:21/9}
.ph svg{width:52%;max-width:200px}
.ph span{position:absolute;left:8px;bottom:6px;font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:#8A9098;background:rgba(255,255,255,.85);padding:1px 6px;border-radius:3px}
.tile-body{padding:12px 14px 14px;position:relative}
.tile h3{margin:0;font-size:16px;font-weight:700;line-height:1.25}
.tile-lg h3{font-family:var(--font-head);font-size:24px;text-transform:uppercase;letter-spacing:.3px}
.count{margin:4px 0 0;font-size:13px;color:var(--muted);font-weight:500}
.subs{margin:6px 0 0;font-size:14px;color:var(--ink-2)}
.tile-feature{border-color:var(--blue)}
.tile-feature .tile-body{background:var(--blue-tint)}
.badge{display:inline-block;background:var(--lime);color:var(--ink);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;padding:2px 8px;border-radius:3px;margin-bottom:6px}

/* How it works */
.how{background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:48px 0}
.how-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:24px}
.how-head p{margin:0;color:var(--ink-2);max-width:56ch}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:s}
.steps li{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 22px 20px;position:relative}
.steps li:not(:last-child)::after{content:"";position:absolute;right:-15px;top:38px;width:10px;height:10px;border-top:2px solid var(--blue);border-right:2px solid var(--blue);transform:rotate(45deg);z-index:1}
.num{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:2px solid var(--blue);color:var(--blue);font-family:var(--font-head);font-size:22px;font-weight:700;margin-bottom:12px}
.steps h3{margin:0 0 6px;font-size:18px}
.steps p{margin:0;color:var(--ink-2);font-size:15px}
.how-cta{display:flex;gap:10px;margin-top:24px}

/* Contact */
.contact{padding:48px 0}
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:stretch}
.contact-info > p{color:var(--ink-2);margin:10px 0 20px;max-width:52ch}
.contact dl{margin:0;display:grid;gap:12px}
.contact dl > div{display:grid;grid-template-columns:130px 1fr;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.contact dt{font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}
.contact dd{margin:0}
.contact dd a{color:var(--blue);font-weight:600}
.map-ph{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);min-height:300px}
.map-ph svg{width:100%;height:100%;position:absolute;inset:0}
.map-ph .ph-note{position:absolute;left:12px;bottom:10px;background:#fff;color:var(--ink-2);opacity:1;padding:3px 8px;border-radius:3px;font-size:12px}

/* Footer */
.footer{background:#23272B;color:#C9CDD2;font-size:15px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding-top:40px;padding-bottom:32px}
.f-brand{font-family:var(--font-head);font-size:22px;font-weight:700;text-transform:uppercase;color:#fff;margin:0 0 8px;letter-spacing:.4px}
.footer p{margin:0 0 8px}
.footer .small{font-size:13px;color:#9AA0A6}
.footer h4{margin:0 0 10px;color:#fff;font-size:14px;text-transform:uppercase;letter-spacing:1px}
.footer h4::after{content:"";display:block;width:24px;height:2px;background:var(--lime);margin-top:6px}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{margin:0 0 6px}
.footer a:hover{color:#fff;text-decoration:underline}
.footer-base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid #3A3F45;padding-top:16px;padding-bottom:20px;font-size:13px;color:#9AA0A6}

/* ---------- Responsive ---------- */
@media (max-width:1240px){
  .account .btn-outline{display:none}
  .phone small{display:none}
}
@media (max-width:1100px){
  .usp-strip li:nth-child(3){display:none}
  .tiles{grid-template-columns:repeat(3,1fr)}
  .tile-lg{grid-column:span 3}
  .hero{grid-template-columns:1fr}
  .hero-art{display:none}
}
@media (max-width:960px){
  .header-row{flex-wrap:wrap;height:auto;padding-top:10px;padding-bottom:10px;gap:10px 14px}
  .menu-btn{display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 12px;border:2px solid var(--ink);border-radius:var(--radius);background:#fff;font:600 14px var(--font);color:var(--ink);cursor:pointer}
  .menu-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
  .logo{margin-right:auto}
  .logo img{width:140px}
  .search{order:10;flex-basis:100%;height:46px}
  .account{display:none}
  .phone{font-size:20px}
  .phone svg{width:22px;height:22px}
  .layout{grid-template-columns:1fr;padding-top:16px}
  /* Sidebar becomes a push-down panel opened by the menu button (no overlay) */
  .sidebar{display:none}
  body.menu-open .sidebar{display:block}
  .close-btn{display:block}
  .flyout{position:static;width:auto;box-shadow:none;border:0;border-top:0;padding:0 16px 8px 28px;display:none}
  .flyout h4{display:none}
  .cats > li:hover > .flyout{display:none}
  .cats > li:focus-within > .flyout{display:block}
  .how-head{flex-direction:column;align-items:flex-start}
  .steps{grid-template-columns:1fr}
  .steps li:not(:last-child)::after{display:none}
  .contact-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .wrap{padding:0 16px}
  .phone{order:5;flex-basis:100%;justify-content:center;background:var(--blue-tint);border-radius:var(--radius);padding:8px;font-size:20px}
  .usp-strip ul{flex-direction:column;gap:4px;font-size:13px}
  .usp-strip li:nth-child(3){display:flex}
  .usp-strip li{flex-wrap:wrap}
  .usp-strip .tbc{margin-left:0;font-size:11px}
  .header-row{gap:10px 8px;padding-top:10px;padding-bottom:12px}
  .logo{margin:0;flex:1;display:flex;justify-content:center}
  .logo img{width:124px}
  .menu-btn{padding:0 10px}
  .hero{padding:26px 22px 24px 26px}
  .hero h1{font-size:32px}
  .lede{font-size:16px}
  .hero-cta .btn{flex:1 1 100%}
  .tiles{grid-template-columns:1fr 1fr;gap:12px}
  .tile-lg{grid-column:span 2}
  .tile h3{font-size:15px}
  .tile-lg h3{font-size:21px}
  .section-head h2,.how h2,.contact h2{font-size:26px}
  .how-cta{flex-direction:column}
  .contact dl > div{grid-template-columns:1fr;gap:2px}
  .map-ph{min-height:220px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:24px}
  .footer-grid > div:first-child{grid-column:span 2}
}


/* ===== Portal mock-up additions (shared by every page) ===== */
.logo img{width:200px;height:auto}
/* Inner pages: category menu opens from a Products button at every width */
body.inner .menu-btn{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 12px;border:2px solid var(--ink);border-radius:var(--radius);background:#fff;font:600 14px var(--font);color:var(--ink);cursor:pointer}
body.inner .menu-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
body.inner .menu-drop{display:none;position:absolute;left:24px;top:100%;width:300px;z-index:60;box-shadow:0 14px 30px rgba(20,24,30,.18)}
body.inner.menu-open .menu-drop{display:block}
body.inner .menu-drop .sidebar{display:block}
body.inner .menu-drop .close-btn{display:block}
.site-header .wrap{position:relative}
/* Breadcrumb and titles */
.crumbs{font-size:14px;color:var(--muted);padding:14px 0 4px}
.crumbs a{color:var(--blue)}
.crumbs span{margin:0 6px;color:#B0B5BB}
.page-title{font-family:var(--font-head);font-size:38px;line-height:1.05;text-transform:uppercase;margin:4px 0 8px;letter-spacing:.3px}
.page-intro{color:var(--ink-2);max-width:75ch;margin:0 0 18px}
.h2{font-family:var(--font-head);font-weight:700;font-size:26px;text-transform:uppercase;margin:0 0 12px;letter-spacing:.3px}
.h3{font-size:18px;font-weight:700;margin:0 0 8px}
.muted{color:var(--muted)}
.small{font-size:13px}
.ex{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;background:#FFF4C2;color:#6B5600;border-radius:3px;padding:0 5px;margin-left:5px;vertical-align:2px;white-space:nowrap}
.ai{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;background:var(--blue-tint);color:var(--blue);border-radius:3px;padding:2px 7px}
.ai svg{width:13px;height:13px;fill:currentColor}
.card{border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:18px}
.note{background:var(--bg-soft);border-left:3px solid var(--lime);padding:10px 14px;border-radius:0 var(--radius) var(--radius) 0;font-size:14px;color:var(--ink-2)}
.btn-sm{padding:8px 12px;font-size:14px}
.btn-lime{background:var(--lime);color:var(--ink)}
.btn-lime:hover{background:#8FB42A}
.btn-block{width:100%}
.price-gate{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--blue);font-size:14px}
.price-gate svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2}
.price{font-weight:700;font-size:18px}
.price small{font-weight:500;font-size:12px;color:var(--muted)}
/* Sub-category cards */
.subcats{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:22px}
.subcat{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.subcat:hover{border-color:var(--blue)}
.subcat .ph{aspect-ratio:4/3}
.subcat .ph svg{width:60%}
.subcat b{display:block;padding:8px 10px 0;font-size:14px;line-height:1.2}
.subcat em{display:block;padding:2px 10px 10px;font-style:normal;font-size:12px;color:var(--muted)}
/* Category layout with filters */
.cat-layout{display:grid;grid-template-columns:260px 1fr;gap:26px;align-items:start;padding-bottom:48px}
.filters{border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.filters-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:3px solid var(--blue);font-family:var(--font-head);font-weight:700;font-size:19px;text-transform:uppercase}
.filters-head a{font-family:var(--font);font-size:13px;text-transform:none;color:var(--blue);font-weight:600}
.fgroup{padding:12px 16px;border-bottom:1px solid var(--line)}
.fgroup h4{margin:0 0 8px;font-size:14px;text-transform:uppercase;letter-spacing:.6px;color:var(--ink-2);display:flex;justify-content:space-between}
.fgroup label{display:flex;align-items:center;gap:8px;font-size:14px;padding:3px 0;cursor:pointer}
.fgroup label span{margin-left:auto;color:var(--muted);font-size:12px}
.fgroup input[type=checkbox]{width:17px;height:17px;accent-color:var(--blue)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid #C9CED4;border-radius:999px;padding:3px 10px;font-size:13px;background:#fff;cursor:pointer;white-space:nowrap}
.chip.on{background:var(--blue);border-color:var(--blue);color:#fff}
.chip i{font-style:normal;color:var(--muted);font-size:11px;margin-left:3px}
.chip.on i{color:#C9D3EE}
.active-filters{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:12px;font-size:14px}
.af{background:var(--blue-tint);color:var(--blue);border-radius:999px;padding:3px 10px;font-weight:600;font-size:13px}
.toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 0 14px;border-bottom:1px solid var(--line);margin-bottom:16px}
.toolbar .count-txt{font-weight:600;margin-right:auto}
.select{height:40px;border:1px solid #C9CED4;border-radius:var(--radius);padding:0 10px;font:inherit;font-size:14px;background:#fff}
.vt{display:inline-flex;border:1px solid #C9CED4;border-radius:var(--radius);overflow:hidden}
.vt button{width:40px;height:38px;border:0;background:#fff;cursor:pointer;display:grid;place-items:center;color:var(--ink-2)}
.vt button.on{background:var(--blue);color:#fff}
.vt svg{width:18px;height:18px;fill:currentColor}
.filter-btn{display:none}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pcard{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow:hidden}
.pcard:hover{border-color:var(--blue);box-shadow:0 6px 18px rgba(37,69,156,.10)}
.pcard .ph{aspect-ratio:4/3}
.pcard .ph svg{width:55%}
.pcard .body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.pcard h3{margin:0;font-size:17px;line-height:1.25}
.pcard .codes{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;color:var(--ink-2)}
.pcard .meta{font-size:13px;color:var(--muted)}
.pcard .acts{display:flex;gap:8px;margin-top:auto;padding-top:6px;align-items:center;flex-wrap:wrap}
.pcard .ds{font-size:13px;font-weight:600;color:var(--blue);display:inline-flex;gap:4px;align-items:center}
.ds svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
.pgrid.list{grid-template-columns:1fr}
.pgrid.list .pcard{flex-direction:row}
.pgrid.list .pcard .ph{width:200px;flex:none;aspect-ratio:4/3;border-bottom:0;border-right:1px solid var(--line)}
.pgrid.list .pcard .acts{margin-top:4px}
.badge-n{display:inline-block;font-size:11px;font-weight:700;background:var(--lime);color:var(--ink);padding:1px 7px;border-radius:3px;text-transform:uppercase;letter-spacing:.5px}
.growth{border:1px dashed #C9CED4;border-radius:var(--radius);padding:14px;color:var(--muted);font-size:14px;margin-top:18px}
/* Product page */
.pd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:32px;align-items:start}
.gallery .ph{aspect-ratio:1/1;border:1px solid var(--line);border-radius:var(--radius)}
.gallery .ph svg{width:70%;max-width:none}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}
.thumbs div{aspect-ratio:1;border:1px solid var(--line);border-radius:4px;background:#F1F2F3}
.thumbs div:first-child{border:2px solid var(--blue)}
/* Claim badge under the H1 (t355u), styled like the catalogue's LOW SMOKE HALOGEN FREE badge */
.claim-badge{display:inline-block;background:var(--lime);color:var(--ink);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;padding:3px 9px;border-radius:3px;margin:-4px 0 10px}
.pd-info .codes-line{font-size:14px;color:var(--muted);margin:0 0 10px}
.pd-points{margin:0 0 14px;padding-left:18px;color:var(--ink-2)}
.pd-points li{margin:2px 0}
.dl-row{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 16px}
.dl{display:inline-flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:var(--radius);padding:8px 12px;background:#fff;font-weight:600;font-size:14px}
.dl:hover{border-color:var(--blue)}
.dl svg{width:26px;height:26px}
.dl small{display:block;font-weight:500;color:var(--muted);font-size:12px}
.picker{border:2px solid var(--blue);border-radius:var(--radius);overflow:hidden;background:#fff}
.picker-head{background:var(--blue);color:#fff;padding:10px 14px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.picker-head b{font-family:var(--font-head);font-size:20px;text-transform:uppercase;letter-spacing:.4px}
.picker-head span{font-size:13px;color:#D6DDF0}
.picker-note{margin:0;padding:8px 14px;background:#EEF2FB;border-bottom:1px solid #D6DDF0;font-size:14px;font-weight:600;color:var(--ink,#1a1a1a)}
.matrix-wrap{overflow-x:auto;padding:10px 12px 4px}
.matrix{border-collapse:collapse;width:100%;font-size:14px}
.matrix th{font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:700;padding:4px 2px;text-align:center}
.matrix th:first-child,.matrix td:first-child{text-align:left;padding-left:4px;white-space:nowrap}
.matrix td{padding:3px 2px;text-align:center}
.matrix td:first-child{font-weight:700}
.matrix td:first-child small{font-weight:500;color:var(--muted);font-size:11px;margin-left:4px}
.cell{display:inline-grid;place-items:center;min-width:38px;height:30px;border:1px solid #C9CED4;border-radius:4px;font-weight:600;font-size:13px;background:#fff;cursor:pointer;padding:0 4px}
.cell:hover{border-color:var(--blue);color:var(--blue)}
.cell.sel{background:var(--blue);border-color:var(--blue);color:#fff}
.cell.na{border:0;color:#CDD1D6;cursor:default}
.matrix tr.hl td{background:var(--blue-tint)}
.selected{display:grid;grid-template-columns:1fr auto;gap:10px 16px;align-items:center;padding:12px 14px;border-top:1px solid var(--line);background:var(--bg-soft)}
.selected .code{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700;font-size:18px;color:var(--blue)}
.selected .desc{font-size:13px;color:var(--ink-2)}
.buy{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.qty{display:inline-flex;border:1px solid #C9CED4;border-radius:var(--radius);overflow:hidden;height:42px;background:#fff}
.qty button{width:34px;border:0;background:#fff;font-size:18px;cursor:pointer;color:var(--ink-2)}
.qty input{width:44px;border:0;text-align:center;font:inherit;font-weight:600}
.stock{font-size:13px;display:inline-flex;align-items:center;gap:6px;color:var(--ink-2)}
.dot{width:9px;height:9px;border-radius:50%;background:#3C9A4A;display:inline-block}
.dot.amber{background:#D99A1E}.dot.grey{background:#A0A6AD}
.tabs{display:flex;gap:4px;border-bottom:2px solid var(--line);margin:34px 0 16px;overflow-x:auto}
.tabs a{padding:10px 14px;font-weight:700;font-size:15px;color:var(--ink-2);border-bottom:3px solid transparent;margin-bottom:-2px;white-space:nowrap}
.tabs a.on{color:var(--blue);border-bottom-color:var(--blue)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.spec{width:100%;border-collapse:collapse;font-size:14px}
.spec th,.spec td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.spec th{width:42%;color:var(--ink-2);font-weight:600;background:var(--bg-soft)}
.data{width:100%;border-collapse:collapse;font-size:14px}
.data th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);padding:8px 10px;border-bottom:2px solid var(--line);white-space:nowrap}
.data td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.data td.mono,.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:600}
.data td.tnum,.data th.tnum{text-align:right;white-space:nowrap}
.data tr:hover td{background:#FAFBFC}
.scroll-x{overflow-x:auto}
.goes{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gcard{border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow:hidden;display:flex;flex-direction:column}
.gcard .ph{aspect-ratio:16/10}
.gcard .ph svg{width:50%}
.gcard .body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px;flex:1}
.gcard b{font-size:15px;line-height:1.25}
.gcard .why{font-size:13px;color:var(--muted)}
.gcard .acts{margin-top:auto;padding-top:8px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.section{margin-top:36px}
.section-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.sticky-buy{display:none}
/* Forms */
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.field label{font-weight:600;font-size:14px}
.field label .req{color:#B3261E}
.field .hint{font-size:12px;color:var(--muted)}
.input,.textarea{height:46px;border:1px solid #B9BFC6;border-radius:var(--radius);padding:0 12px;font:inherit;font-size:15px;background:#fff;width:100%}
.textarea{height:auto;min-height:110px;padding:10px 12px;resize:vertical}
.input:focus,.textarea:focus,.select:focus{outline:2px solid var(--blue);outline-offset:0;border-color:var(--blue)}
select.input{padding-right:8px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.radio-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.rc{border:1px solid #B9BFC6;border-radius:var(--radius);padding:12px 14px;display:flex;gap:10px;align-items:flex-start;cursor:pointer;background:#fff}
.rc.on{border:2px solid var(--blue);background:var(--blue-tint);padding:11px 13px}
.rc input{accent-color:var(--blue);margin-top:4px}
.rc b{display:block}
.rc span{font-size:13px;color:var(--ink-2)}
.check{display:flex;gap:8px;align-items:flex-start;font-size:14px;margin:6px 0 14px}
.check input{accent-color:var(--blue);width:17px;height:17px;margin-top:2px}
/* Login page */
.auth{display:grid;grid-template-columns:420px 1fr;gap:28px;align-items:start;padding:8px 0 48px}
.auth .card{padding:24px}
.auth .card.blue-top{border-top:4px solid var(--blue)}
.auth .card.lime-top{border-top:4px solid var(--lime)}
.ticks{list-style:none;margin:10px 0 0;padding:0;font-size:14px;color:var(--ink-2)}
.ticks li{padding:4px 0 4px 24px;position:relative}
.ticks li::before{content:"";position:absolute;left:3px;top:9px;width:10px;height:6px;border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(-45deg)}
.rm{border:0;background:none;color:var(--muted);font-size:13px;text-decoration:underline;cursor:pointer}
.st{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;border-radius:3px;padding:2px 8px;white-space:nowrap}
.st.ok{background:#E5F3E7;color:#226B2F}
.st.warn{background:#FFF1D6;color:#7A5200}
.st.err{background:#FBE4E2;color:#9B1C14}
.linkbtn{border:0;background:none;color:var(--blue);font-weight:600;font-size:14px;cursor:pointer;padding:0;text-decoration:underline}
.footer .f-logo{width:220px;margin-bottom:10px}
/* ---------- Responsive additions ---------- */
@media (max-width:1240px){}
@media (max-width:1100px){
  .subcats{grid-template-columns:repeat(3,1fr)}
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .goes{grid-template-columns:repeat(2,1fr)}
  .pd{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:22px}
}
@media (max-width:960px){
  .logo img{width:150px}
  .cat-layout{grid-template-columns:1fr}
  .filters{display:none}
  body.filters-open .filters{display:block;margin-bottom:12px}
  .filter-btn{display:inline-flex;gap:6px;align-items:center}
  .pd{grid-template-columns:minmax(0,1fr)}
  .gallery{display:grid;grid-template-columns:1fr;gap:0}
  .gallery .ph{aspect-ratio:16/10}
  .thumbs{display:none}
  .two{grid-template-columns:1fr}
  .auth{grid-template-columns:1fr}
  body.inner .menu-drop{left:16px;right:16px;width:auto}
}
@media (max-width:600px){
  .logo img{width:132px}
  .page-title{font-size:30px}
  .subcats{grid-template-columns:1fr 1fr;gap:10px}
  .pgrid{grid-template-columns:1fr}
  .pgrid.list .pcard .ph{width:120px}
  .pgrid.list .pcard h3{font-size:15px}
  .toolbar .select{flex:1}
  .goes{grid-template-columns:1fr 1fr;gap:10px}
  .gcard .acts{flex-direction:column;align-items:flex-start}
  .selected{grid-template-columns:1fr}
  .buy{justify-content:flex-start}
  .matrix-wrap{padding:8px 6px 2px}
  .cell{min-width:34px;height:30px;font-size:12px}
  .matrix td:first-child small{display:none}
  .grid2{grid-template-columns:1fr}
  .radio-cards{grid-template-columns:1fr}
  .data.stack thead{display:none}
  .data.stack tr{display:grid;grid-template-columns:1fr auto;border-bottom:1px solid var(--line);padding:8px 0}
  .data.stack td{border:0;padding:3px 4px}
  .data.stack td[data-l]::before{content:attr(data-l) ": ";color:var(--muted);font-size:12px;font-family:var(--font);font-weight:500}
  .data.stack td.tnum{text-align:left}
  .sticky-buy{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:65;background:#fff;border-top:1px solid var(--line);box-shadow:0 -6px 18px rgba(20,24,30,.08);padding:10px 16px;gap:10px;align-items:center;justify-content:space-between}
  .sticky-buy .mono{color:var(--blue)}
  body.has-sticky{padding-bottom:70px}
  body.has-sticky
  .footer .f-logo{width:180px}
}
/* --- review fixes --- */
@media (max-width:600px){
  .usp-strip ul{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:18px;padding-top:7px;padding-bottom:7px;scrollbar-width:none}
  .usp-strip li{flex:none;flex-wrap:nowrap;white-space:nowrap}
  .phone{order:0;flex-basis:auto;background:none;padding:0;width:42px;height:42px;justify-content:center}
  .phone span{display:none}
  .phone svg{width:24px;height:24px}
  .menu-btn span,body.inner .menu-btn span{display:none}
  .menu-btn,body.inner .menu-btn{padding:0 9px}
  .logo{flex:1;justify-content:flex-start}
  .header-row{gap:8px 10px}
  .gallery .ph{aspect-ratio:21/9}
  .pd-info .page-title{font-size:28px !important}
  .pd-points{display:none}
}
@media (max-width:600px){
  .picker-head span{display:none}
  body.has-sticky
}
.data td[data-l="Product"]{min-width:230px}
.st{white-space:normal;max-width:200px}
@media (max-width:960px){.data td[data-l="Product"]{min-width:0}}

/* ===== Phase 1 public site additions ===== */
/* Blue ring plus a white halo: lime on white is about 2:1, which fails the 3:1 focus contrast. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--blue-dk);outline-offset:2px;box-shadow:0 0 0 2px #fff}
.skip{position:absolute;left:-9999px;top:0;background:var(--blue);color:#fff;padding:10px 14px;z-index:100;font-weight:700}
.skip:focus{left:8px;top:8px}
/* Text links only: buttons inside these blocks keep their own .btn styles (Matt 23 Oct 2026: blank blue box on /login). */
.prose a:not(.btn),.page-intro a:not(.btn),.note a:not(.btn),.card p a:not(.btn),.field .hint a:not(.btn),.check a:not(.btn),.inline-link{color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.prose{max-width:75ch;padding-bottom:48px}
.prose h2{font-family:var(--font-head);font-size:26px;text-transform:uppercase;margin:28px 0 8px}
.prose h3{font-size:18px;margin:20px 0 6px}
.prose li{margin:4px 0}
.draft-banner{background:#FFF4C2;color:#4D3E00;border:1px solid #E8D27A;border-radius:var(--radius);padding:10px 14px;margin:8px 0 18px;font-weight:600}
.soon{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;background:var(--lime);color:var(--ink);border-radius:3px;padding:1px 5px;margin-left:6px;vertical-align:2px}
.btn .soon{margin-left:6px;vertical-align:0}
.notice{border:1px solid var(--line);border-left:4px solid var(--blue);background:var(--blue-tint);border-radius:0 var(--radius) var(--radius) 0;padding:12px 16px;margin:0 0 18px;color:var(--ink)}
.notice.warn{border-left-color:#C98A00;background:#FFF7E0}
.notice.ok{border-left-color:#2E7D32;background:#E9F5EA}
.notice.err{border-left-color:#B3261E;background:#FCE8E6}
.notice[hidden]{display:none}
/* Header quote list counter (replaces the cart on the public site) */
.cart .count[data-empty]{background:#E3E5E8}
.cart{width:auto;padding:0 8px;gap:6px;display:flex;align-items:center;font-weight:600;font-size:14px}
.cart .lbl{white-space:nowrap}
@media (max-width:1240px){.cart .lbl{display:none}}
/* Range pages */
.pd-info .page-title{font-size:34px}
.price-note{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--blue);font-size:14px}
.price-note svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;flex:none}
.add-q{border:1px solid var(--blue);background:#fff;color:var(--blue);border-radius:var(--radius);font:600 13px var(--font);padding:6px 10px;cursor:pointer;white-space:nowrap}
.add-q:hover{background:var(--blue-tint)}
.add-q[aria-pressed=true]{background:var(--blue);color:#fff}
.data tr:target td{background:#F3F8E4}
.data .nm{min-width:220px}
.matrix a.cell{color:inherit}
.cell.sel{background:var(--blue);border-color:var(--blue);color:#fff}
.matrix .single th:first-child{width:1%}
.codes-table{max-height:640px;overflow:auto;border:1px solid var(--line);border-radius:var(--radius)}
.codes-table thead th{position:sticky;top:0;background:#fff;z-index:1}
.spec-empty{color:var(--ink-2);font-size:14px}
/* Search */
.search-page .results{list-style:none;margin:0;padding:0}
.search-page .results li{border-bottom:1px solid var(--line);padding:12px 0;display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap}
.search-page .results a{color:var(--blue);font-weight:700}
.search-page .results small{display:block;color:var(--muted)}
.search-page mark{background:#F3F8E4;color:inherit;padding:0}
/* Forms */
.form-card{max-width:860px}
.field input[aria-invalid=true],.field select[aria-invalid=true],.field textarea[aria-invalid=true]{border-color:#B3261E;outline-color:#B3261E}
.err-msg{color:#B3261E;font-size:13px;font-weight:600}
.err-msg:empty{display:none}
legend .req,.small .req{color:#B3261E}
.rc:has(input:checked){border:2px solid var(--blue);background:var(--blue-tint);padding:11px 13px}
.rc:has(input[aria-invalid=true]){border-color:#B3261E}
.radio-field .radio-cards{margin-bottom:0}
/* Request a trade account page (layout polish, 24 Oct 2026) */
.two-col.trade-layout{grid-template-columns:minmax(0,1fr) 340px}
.trade-layout>*{min-width:0}
.trade-layout .form-card{max-width:none;padding:24px}
.next-card{position:sticky;top:16px}
.next-steps{list-style:none;margin:12px 0 0;padding:0;counter-reset:n;font-size:14px;color:var(--ink-2)}
.next-steps li{counter-increment:n;position:relative;padding:0 0 12px 34px;line-height:1.45}
.next-steps li::before{content:counter(n);position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;background:var(--blue-tint);color:var(--blue);font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center}
.next-help{margin:6px 0 0;padding-top:14px;border-top:1px solid var(--line)}
.form-section{font-size:16px;font-weight:700;margin:22px 0 12px;padding:0 0 8px;border-bottom:1px solid var(--line);width:100%;color:var(--ink)}
.req-note+.form-section{margin-top:6px}
.req-note{margin:0 0 4px}
legend.form-section{float:left}
legend.form-section+*{clear:both}
.field .hint{line-height:1.35}
.form-actions .btn{min-width:180px}
@media (max-width:1100px){.two-col.trade-layout{grid-template-columns:minmax(0,1fr)}.trade-layout .form-card,.trade-layout .next-card{max-width:860px}.next-card{position:static}}
@media (max-width:600px){.form-actions{flex-direction:column;align-items:stretch}.form-actions .btn{width:100%}.form-actions .small{text-align:center}.trade-layout .form-card{padding:18px 16px}}
/* Business address type-ahead (trade account form) */
.js-form [hidden]{display:none!important}
.addr{margin-bottom:4px}
.addr legend{margin-bottom:8px}
.addr-search .hint{font-size:13px}
.addr-search .addr-attrib{font-size:11px}
.addr-search .addr-attrib a{color:var(--muted)}
.combo{position:relative}
.combo-list{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:40;margin:0;padding:4px 0;list-style:none;background:#fff;border:1px solid #B9BFC6;border-radius:var(--radius);box-shadow:0 8px 24px rgba(16,24,40,.14);max-height:min(320px,60vh);overflow-y:auto}
/* Google provider: the list and the "Google Maps" attribution share one dropdown container (Google Maps
   Platform policies: text attribution in the same visual container, Roboto/sans-serif 400, #5E5E5E,
   12-16px, not wrapped, not translated). */
.combo-pop{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:40;background:#fff;border:1px solid #B9BFC6;border-radius:var(--radius);box-shadow:0 8px 24px rgba(16,24,40,.14);overflow:hidden}
.combo-pop .combo-list{position:static;border:0;border-radius:0;box-shadow:none;max-height:min(280px,52vh)}
.gmaps-attrib{margin:0;padding:6px 14px;border-top:1px solid var(--line);background:#fff;text-align:right;font-family:Roboto,Arial,sans-serif;font-weight:400;font-size:12px;line-height:16px;color:#5E5E5E;white-space:nowrap}
.combo-list li{padding:10px 14px;cursor:pointer;display:flex;flex-direction:column;gap:1px;line-height:1.3;min-height:44px;justify-content:center}
.combo-list li+li{border-top:1px solid var(--line)}
.combo-list li:hover,.combo-list li[aria-selected=true]{background:var(--blue-tint)}
.combo-list li[aria-selected=true]{box-shadow:inset 3px 0 0 var(--blue)}
.combo-main{font-size:15px;font-weight:600;color:var(--ink)}
.combo-sub{font-size:13px;color:var(--muted)}
.addr-row{display:grid;grid-template-columns:2fr 1fr 1fr;gap:0 14px}
@media (max-width:600px){.addr-row{grid-template-columns:1fr 1fr}.addr-row .field:first-child{grid-column:1/-1}}
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
fieldset{border:0;padding:0;margin:0 0 14px}
legend{font-weight:600;font-size:14px;margin-bottom:6px;padding:0}
.rc:has(input:checked){border:2px solid var(--blue);background:var(--blue-tint);padding:11px 13px}
.form-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.quote-items{list-style:none;padding:0;margin:0 0 14px}
.quote-items li{display:grid;grid-template-columns:1fr 90px auto;gap:10px;align-items:center;border-bottom:1px solid var(--line);padding:8px 0}
.quote-items .mono{color:var(--blue)}
.quote-items input{height:38px}
.two-col{display:grid;grid-template-columns:1.4fr 1fr;gap:28px;align-items:start;padding-bottom:48px}
@media (max-width:960px){.two-col{grid-template-columns:1fr}}
/* Cookie notice */
.cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:90;max-width:720px;margin:0 auto;background:#fff;border:1px solid var(--line);border-top:4px solid var(--blue);border-radius:var(--radius);box-shadow:0 14px 34px rgba(20,24,30,.22);padding:14px 16px;display:flex;gap:12px 16px;align-items:center;flex-wrap:wrap}
.cookie[hidden]{display:none}
.cookie p{margin:0;flex:1 1 320px;font-size:14px;color:var(--ink-2)}
.cookie a{color:var(--blue);font-weight:600;text-decoration:underline}
.cookie .btns{display:flex;gap:8px}
.linkbtn{font:inherit}
.footer a{text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(255,255,255,.25)}
.footer .linkbtn{color:#C9CDD2}
.footer .linkbtn:hover{color:#fff}
.footer .fh4{font-family:inherit}
.footer .small{color:#B4BAC0}
.footer-base{color:#B4BAC0}
.contact-map{display:flex;flex-direction:column;gap:10px}
.map-ph{display:block}
/* Contact map (/contact and the home page contact band): Google's Share embed iframe directly in the card (Matt, 24 Oct 2026).
   The fallback link sits underneath the iframe, so it only shows if the map can't load. */
/* width:100% matters: on iPhone (WebKit) a grid item with aspect-ratio and only absolutely positioned
   children is not stretched, so without it the card collapsed to 0 wide and the map never showed (24 Oct 2026). */
.map-embed{position:relative;display:block;width:100%;box-sizing:border-box;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);min-height:300px;background:#eceeef}
.map-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;z-index:1}
.map-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;text-align:center;color:var(--blue);font-weight:600;text-decoration:underline}
@media (max-width:600px){.map-embed{min-height:0;height:auto;aspect-ratio:4/3;justify-self:stretch}}
@supports not (aspect-ratio:4/3){@media (max-width:600px){.map-embed{min-height:260px}}}
.not-found{padding-top:40px;padding-bottom:64px}
.hero-art .ph-note{color:#E4E9F5}
.tile .subs{color:var(--ink-2)}
.ph span{color:#5F666E}
.flyout .fh{margin:0 0 8px;font-family:var(--font-head);font-weight:700;font-size:18px;text-transform:uppercase;letter-spacing:.4px}
.footer .fh4{margin:0 0 10px;color:#fff;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:1px}
.footer .fh4::after{content:"";display:block;width:24px;height:2px;background:var(--lime);margin-top:6px}
.foot-btn{color:#C9CDD2;font-weight:400;font-size:15px;text-decoration:underline;text-decoration-color:rgba(255,255,255,.25)}
.qo-nav{color:var(--blue)!important}
@media (max-width:960px){.flyout .fh{display:none}}
.spacer{height:40px}
.ds-img{border:1px solid var(--line);border-radius:4px;max-height:520px;object-fit:cover;object-position:top;width:100%;height:auto}
.codec{color:var(--blue)}
.gcard b a:hover,.pcard h3 a:hover{color:var(--blue);text-decoration:underline}
.matrix th[scope=row]{font-weight:700;text-align:left;white-space:nowrap;font-size:14px;color:var(--ink);text-transform:none;letter-spacing:0}
.fgh{display:block;margin:0 0 8px;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--ink-2)}
.fgroup-last{border:0}
.fnote{margin:0}
.crumbs .cur{color:var(--ink-2);margin:0}
.mt20{margin-top:20px}
.fp{margin:12px 0}
.search-inline{max-width:640px;margin:10px 0 14px;flex:none}
.prose code{font-size:.9em;background:var(--bg-soft);padding:0 4px;border-radius:3px}
.tile-feature .count{color:var(--ink-2)}
.matrix a.cell.sel{color:#fff}
.crumbs a{text-decoration:underline;text-underline-offset:2px}
.f-logo{width:220px;height:auto}
@media (max-width:480px){.tabs a{padding:10px 9px;font-size:14px}}
/* Product names carry units (mm, mm², m); keep their case so "mm" never reads as "MM" */
.pd-info .page-title{text-transform:none;letter-spacing:0}
/* One-row size charts (e.g. inline joiners) wrap instead of running off the screen */
.matrix.single,.matrix.single tbody{display:block}
.matrix.single tr{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.matrix.single th,.matrix.single td{display:block;padding:0}
.matrix.single th[scope=row]{flex-basis:100%;padding:2px 0 2px 4px}
.matrix.single .cell{min-width:44px;height:34px}
@media (max-width:600px){body.has-sticky .cookie{bottom:78px}}
/* Terminal & ferrule charts: second line in the row heading (type or colour); first column stays put while the chart scrolls sideways */
.matrix th[scope=row] small{display:block;font-weight:500;color:var(--muted);font-size:11px;line-height:1.2}
.matrix tbody th[scope=row]{position:sticky;left:0;background:#fff;z-index:1}
.matrix.single tbody th[scope=row]{position:static}
/* ---- Quote list (guests): Add to quote buttons, header badge, toast and /quote page ---- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.quote-add{gap:7px;cursor:pointer}
.quote-add svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;flex:none}
.btn-sm.quote-add svg{width:15px;height:15px}
.quote-link .count{position:static;margin-left:-2px}
.quote-toast{position:fixed;z-index:90;right:16px;bottom:16px;max-width:380px;background:var(--ink);color:#fff;border-left:4px solid var(--lime);border-radius:var(--radius);padding:12px 16px;font-size:14px;box-shadow:0 8px 24px rgba(20,24,30,.25)}
.quote-toast[hidden]{display:none}
.quote-toast a{color:#fff;font-weight:700;text-decoration:underline}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}
@media (max-width:820px){.quote-toast{left:12px;right:12px;bottom:76px;max-width:none}}
.quote-card{margin:0 0 24px}
.ql-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px}
.ql-head h2{margin:0}
.ql-head .muted{font-weight:400;font-size:.8em}
.ql-table{width:100%;border-collapse:collapse;font-size:15px}
.ql-table th{text-align:left;font-size:13px;color:var(--muted);font-weight:600;border-bottom:1px solid var(--line);padding:8px 10px}
.ql-table td{border-bottom:1px solid var(--line);padding:10px;vertical-align:middle}
.ql-table td.mono a{color:var(--blue);font-weight:700}
.ql-table .qty{height:38px}
.ql-rm{text-align:right}
.linkish{background:none;border:0;padding:4px 2px;font:inherit;font-size:14px;font-weight:600;color:var(--blue);text-decoration:underline;cursor:pointer}
.ql-note{margin:10px 0 0}
.ql-empty p{margin:0 0 12px}
.ql-empty-acts{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:640px){
  .ql-table thead{display:none}
  .ql-table,.ql-table tbody,.ql-table tr,.ql-table td{display:block;width:100%}
  .ql-table tr{display:grid;grid-template-columns:1fr auto;gap:4px 12px;border-bottom:1px solid var(--line);padding:10px 0}
  .ql-table td{border:0;padding:0}
  .ql-table td.ql-desc{grid-column:1/-1;font-size:14px;color:var(--ink-2)}
  .ql-table td.ql-rm{grid-row:1;grid-column:2}
}
/* SEO copy blocks (src/_data/seoCopy.json, off until approved) and the optional SEO hero H1 */
.seo-intro{padding-bottom:0;margin:0 0 18px;color:var(--ink-2)}
.seo-intro p{margin:0 0 10px}
.faq-list{max-width:75ch}
.faq-item h3{margin:18px 0 6px;font-size:18px}
.faq-item p{margin:0;color:var(--ink-2)}
.hero-sub{margin:0 0 12px;font-size:19px;font-weight:600;line-height:1.3;color:#fff;max-width:52ch}
.pd-photo{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;background:#fff}
/* "Goes with" / "Suits" panel (suits.njk) */
.suits-intro{margin:-6px 0 12px;font-size:14px}
.suit-pick{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--muted);margin-top:4px}
.suit-pick .select{height:36px;font-size:13px;width:100%;color:var(--ink,#111)}
.suits .gcard .acts{justify-content:flex-start}
/* Product catalogue download (/catalogue) */
.cat-dl{display:grid;grid-template-columns:minmax(180px,300px) 1fr;gap:32px;align-items:start;padding:8px 0 48px}
.cat-dl-cover{display:block;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:0 6px 18px rgba(37,69,156,.12);background:#fff;transition:box-shadow .15s,transform .15s}
.cat-dl-cover:hover{box-shadow:0 10px 26px rgba(37,69,156,.2);transform:translateY(-2px)}
.cat-dl-cover img{display:block;width:100%;height:auto}
.cat-dl-body{max-width:68ch}
.cat-dl-body h2{font-family:var(--font-head);font-size:26px;line-height:1.15;text-transform:uppercase;letter-spacing:.3px;margin:0 0 8px}
.cat-dl-body h3{font-size:17px;margin:22px 0 8px}
.cat-dl-meta{display:flex;flex-wrap:wrap;gap:6px 18px;color:var(--ink-2);font-size:15px;margin:0 0 16px}
.cat-dl-meta span+span::before{content:"·";margin-right:18px;color:var(--muted)}
.cat-dl-btn{gap:10px;white-space:normal;text-align:left;font-size:16px;padding:14px 18px}
.cat-dl-btn svg{width:22px;height:22px;flex:none}
.cat-dl-list{margin:0 0 18px;padding-left:20px}
.cat-dl-list li{margin:0 0 6px}
.cat-dl-small{color:var(--ink-2);font-size:14px;margin-top:14px}
.cat-dl-small a{color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:2px}
@media (max-width:700px){.cat-dl{grid-template-columns:1fr;gap:16px}.cat-dl-cover{max-width:150px}.cat-dl-body h2{font-size:22px}.cat-dl-meta{gap:2px 14px;font-size:14px}.cat-dl-meta span+span::before{display:none}.cat-dl-btn{width:100%;justify-content:center;text-align:center}}
.ph-cover{padding:0;background:var(--blue-tint);display:block;overflow:hidden}
.ph-cover img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center top}
.range-specs .spec{max-width:760px}.range-specs .spec-note{margin-top:8px}
/* Catalogue illustrations (Media Bot, 26 Oct 2026): a square picture centred in each image box, never cropped. */
.ph.ph-pic{background:#fff;background-image:none;overflow:hidden}
.ph.ph-pic img{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);object-fit:contain}
/* ---- Bus bar heatshrink selector (src/_includes/busbar-selector.njk) ---- */
.bb .picker-head .bb-h{margin:0;font-family:var(--font-head);font-size:20px;text-transform:uppercase;letter-spacing:.4px;color:#fff}
.bb-body{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.bb-pick{padding:16px 18px;border-right:1px solid var(--line)}
.bb-res{padding:16px 18px}
.bb-step{margin-bottom:14px}
.bb-lbl{margin:0 0 6px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.bb-lbl i{font-style:normal;display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--blue);color:#fff;font-size:11px;margin-right:6px}
.bb-chips{display:flex;flex-wrap:wrap;gap:6px}
.bb-chips .cell{min-width:58px;height:38px;font:inherit;font-weight:600;font-size:14px;line-height:1.05;display:inline-flex;flex-direction:column;justify-content:center;color:var(--ink)}
.bb-chips .cell small{font-size:10px;font-weight:500;color:var(--muted)}
.bb-chips .cell.sel{color:#fff}
.bb-chips .cell.sel small{color:#D6DDF0}
.bb-diag{display:flex;align-items:center;gap:14px;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px}
.bb-diag svg{width:200px;height:auto;flex:none}
.bb-diag div{font-size:13px;color:var(--ink-2)}
.bb-diag div b{display:block;font-size:16px;color:var(--ink)}
.bb-sleeve{fill:rgba(161,199,51,.35);stroke:var(--lime);stroke-width:2}
.bb-bar{fill:#C9792B;stroke:#8E4F15}
.bb-dim{stroke:var(--blue);fill:none}
.bb-txt{font-family:var(--font);font-size:10px;font-weight:700;fill:var(--blue)}
.bb-rh{margin:0 0 2px;font-family:var(--font-head);font-size:19px;text-transform:uppercase;letter-spacing:.3px}
.bb-card+.bb-card{margin-top:10px}
.bb-none{font-size:14px;color:var(--ink-2)}
.bb-none p{margin:0 0 6px}
.bb-none p:first-child{font-weight:700;color:var(--ink)}
.bb-table .cell.na-bb{border-style:dashed;color:#B0B5BB}
.bb-for{margin:0 0 10px;font-size:14px;color:var(--ink-2)}
.bb-for b{color:var(--ink)}
.bb-card{border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px}
.bb-card .top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.bb-code{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700;font-size:26px;color:var(--blue)}
.bb-lf{font-size:14px;color:var(--ink-2);background:var(--blue-tint);border-radius:4px;padding:3px 8px}
.bb-lf b{color:var(--blue)}
.bb-meta{font-size:13px;color:var(--ink-2);margin:2px 0 10px}
.bb-cols{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.bb-cols .cell{display:inline-flex;gap:6px;padding:0 9px;height:32px;color:var(--ink)}
.bb-cols .cell.sel{color:#fff}
.bb-dot{width:12px;height:12px;border-radius:50%;border:1px solid rgba(0,0,0,.25);display:inline-block;flex:none}
.bb-red{background:#D22B2B}.bb-white{background:#fff}.bb-blue{background:#2459C4}.bb-black{background:#1E1E1E}.bb-clear{background:#EEF3F6}
.bb-gy{background:linear-gradient(135deg,#2E9B3E 50%,#F2D21B 50%)}
.bb-acts{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.bb-acts .btn svg{width:18px;height:18px;flex:none}
.bb-sel{font-weight:700;font-size:15px}
.bb-acts .inline-link{font-size:14px}
.bb-why,.bb-help{font-size:13px;color:var(--muted);margin:10px 0 0}
.bb-chart{border-top:1px solid var(--line)}
.bb-chart summary{cursor:pointer;padding:12px 18px;font-weight:600;color:var(--blue)}
.bb-chart .scroll-x{padding:0 14px 14px;overflow-x:auto}
.bb-table{border-collapse:collapse;width:100%;font-size:14px}
.bb-table th{font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);padding:6px 4px;text-align:center;white-space:nowrap}
.bb-table thead th{border-bottom:2px solid var(--line)}
.bb-table tbody th{text-align:left;color:var(--ink);font-size:14px}
.bb-table tbody th small{color:var(--muted);font-weight:500;margin-left:6px;text-transform:none}
.bb-table td{text-align:center;padding:5px 3px;border-bottom:1px solid var(--line)}
.bb-table .cell{min-width:58px;height:32px;color:var(--ink)}
.bb-table .cell.sel{color:#fff}
.bb-page .page-intro{max-width:760px}
.bb-links{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}
@media (max-width:960px){
  .bb-body{grid-template-columns:1fr}
  .bb-pick{border-right:0;border-bottom:1px solid var(--line)}
  .bb .picker-head span{display:none}
}
@media (max-width:600px){
  .bb-pick,.bb-res{padding:14px 12px}
  .bb-chips{display:grid;grid-template-columns:repeat(4,1fr)}
  .bb-chips.bb-t{grid-template-columns:repeat(5,1fr)}
  .bb-chips .cell{min-width:0}
  .bb-diag svg{width:150px}
  .bb-cols{display:grid;grid-template-columns:repeat(2,1fr)}
  .bb-acts .btn{flex:1 1 100%;justify-content:center}
}
/* --- Trust strip marquee on phones (Matt, 27 Oct 2026) ---
   600px and under: the strip loops slowly sideways (about 50 s a loop) so every point can be read without swiping.
   The track holds the list twice (the copy is aria-hidden) and moves by exactly one list, so the loop is seamless.
   Pauses on hover, touch or keyboard focus. With reduced motion, or above 600px, the copy stays hidden and the
   strip is unchanged (static on desktop, swipeable on phones). */
.usp-strip ul.usp-dup{display:none}
@media (max-width:600px) and (prefers-reduced-motion:no-preference){
  .usp-strip{overflow:hidden}
  .usp-track{display:flex;width:max-content;animation:usp-marquee 50s linear infinite}
  .usp-strip .usp-track ul{display:flex;max-width:none;margin:0;overflow:visible;padding-left:9px;padding-right:9px}
  .usp-strip .usp-track ul.usp-dup{display:flex}
  .usp-strip:hover .usp-track,.usp-strip:active .usp-track,.usp-strip:focus-within .usp-track{animation-play-state:paused}
}
@keyframes usp-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}