/*
Theme Name: A+ Roofing Supply
Theme URI: https://aroofingsupply.com/
Description: Purpose-built WooCommerce storefront for A+ Roofing Supply, Sugar Hill GA. No page builder, no framework, one stylesheet. Contractors first, homeowners second.
Author: A+ Roofing Supply
Version: 4.16.6
Requires at least: 6.4
Requires PHP: 8.1
Tested up to: 7.0
WC requires at least: 8.0
WC tested up to: 10.0
Text Domain: aplus
Tags: e-commerce, custom-menu, featured-images, translation-ready
*/

/* =========================================================================
   A+ Roofing Supply — single stylesheet.
   Replaces 55 CSS files from Avanam + TemplateMela + Elementor + RevSlider.
   Section map:
     1. Tokens & reset            6. Shop archive
     2. Layout & rhythm           7. Single product
     3. Buttons                   8. Cart / checkout / account
     4. Utility bar & header      9. Homepage sections
     5. Footer                   10. Responsive
   ========================================================================= */

/* ===== 1-5, 9. TOKENS, LAYOUT, BUTTONS, HEADER, FOOTER, HOMEPAGE ===== */
/* ============================== TOKENS ============================== */
:root{
  --ink:#0E1013;
  --ink-2:#16191E;
  --ink-3:#22262D;
  --slate:#5C636E;
  --slate-2:#8B929C;
  --line:#E3E5E1;
  --line-dark:#2C3039;
  --paper:#FFFFFF;
  --paper-2:#F6F7F5;

  /* User-approved high-energy brand accent. Bright fills always use dark
     text; the deeper companion tone remains AA-safe for text on white. */
  --accent:#CBFF00;
  --accent-hover:#B8E600;
  --accent-deep:#466000;
  --accent-mid:#6A8A00;
  --accent-wash:#F8FFE0;
  --accent-dark:#354A00;
  --on-accent:#101112;

  --r-sm:6px; --r:10px; --r-lg:16px;
  --sh-1:0 1px 2px rgba(14,16,19,.06), 0 1px 1px rgba(14,16,19,.04);
  --sh-2:0 4px 14px rgba(14,16,19,.08), 0 1px 3px rgba(14,16,19,.05);
  --sh-3:0 18px 44px rgba(14,16,19,.12), 0 2px 8px rgba(14,16,19,.06);
  --max:1240px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--ap-font-body);
  color:var(--ink);
  background:var(--paper);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;line-height:1.1;letter-spacing:-0.025em;font-weight:800}
p{margin:0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.icon{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.icon-sm{width:16px;height:16px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* section rhythm */
.sec{padding:72px 0}
.sec--tight{padding:52px 0}
.sec--paper{background:var(--paper-2)}
.sec--dark{background:var(--ink);color:#fff}
.eyebrow{
  font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent-deep);margin-bottom:14px;display:flex;align-items:center;gap:9px;
}
.sec--dark .eyebrow{color:var(--accent)}
.eyebrow::before{content:"";width:22px;height:2px;background:currentColor;flex:none}
.h2{font-size:clamp(28px,3.6vw,42px)}
.lede{font-size:17px;color:var(--slate);max-width:62ch;margin-top:14px}
.sec--dark .lede{color:#A9B0BA}
.head{margin-bottom:40px}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-weight:700;font-size:15px;letter-spacing:-0.01em;
  padding:14px 24px;border-radius:var(--r);border:1px solid transparent;
  cursor:pointer;transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--accent);color:var(--on-accent);box-shadow:var(--sh-2)}
.btn--primary:hover{background:var(--accent-hover);box-shadow:var(--sh-3)}
.btn--dark{background:var(--ink);color:#fff;box-shadow:var(--sh-2)}
.btn--dark:hover{background:var(--ink-3)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--ink);background:var(--paper-2)}
.btn--onDark{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.18)}
.btn--onDark:hover{background:rgba(255,255,255,.14)}
.btn--lg{padding:17px 30px;font-size:16px}
.btn--block{width:100%}

/* ============================== UTILITY BAR ============================== */
.util{background:var(--ink);color:#C9CFD8;font-size:13px;font-weight:500}
.util .wrap{display:flex;align-items:center;gap:26px;height:42px;overflow-x:auto;scrollbar-width:none}
.util .wrap::-webkit-scrollbar{display:none}
.util a{display:flex;align-items:center;gap:7px;white-space:nowrap;transition:color .15s}
.util a:hover{color:#fff}
.util .u-hi{color:#fff;font-weight:700}
.util .u-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
.util .u-push{margin-left:auto}

/* ============================== HEADER ============================== */
.hdr{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;gap:20px;height:76px}
.logo{display:flex;align-items:baseline;gap:2px;font-weight:800;font-size:23px;letter-spacing:-0.045em;flex:none}
.logo .plus{color:var(--accent-deep)}
.logo .sub{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--slate-2);margin-left:8px;align-self:center}

.aplus-search-form{flex:1 1 auto;min-width:0;max-width:460px;position:relative;display:flex;align-items:center}
.aplus-search-form svg{position:absolute;left:14px;color:var(--slate-2)}
.aplus-search-form input{
  width:100%;padding:12px 14px 12px 42px;font:inherit;font-size:15px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--paper-2);
  transition:border-color .15s, background .15s;
}
.aplus-search-form input:focus{outline:none;border-color:var(--ink);background:#fff}

.hdr-nav{display:flex;align-items:center;gap:22px;font-size:15px;font-weight:600;margin-left:auto}
.hdr-nav a{transition:color .15s}
.hdr-nav a:hover{color:var(--accent-deep)}
.hdr-cta{display:flex;align-items:center;gap:12px;flex:none}
.hdr-phone{display:flex;flex-direction:column;line-height:1.15}
.hdr-phone .lbl{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--slate-2)}
.hdr-phone .num{font-size:18px;font-weight:800;letter-spacing:-0.02em}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:var(--r-sm);padding:9px;cursor:pointer;color:var(--ink)}

/* ============================== HERO ============================== */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;opacity:.34}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(14,16,19,.97) 0%, rgba(14,16,19,.88) 42%, rgba(14,16,19,.52) 100%);
}
.hero .wrap{position:relative;z-index:1;padding-top:84px;padding-bottom:84px}
.hero-in{max-width:680px}
.hero-tag{
  display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:700;
  padding:7px 14px;border-radius:100px;border:1px solid rgba(203,255,0,.40);
  background:rgba(203,255,0,.14);color:var(--accent);margin-bottom:24px;
}
.hero h1{font-size:clamp(34px,5.4vw,60px);line-height:1.04;letter-spacing:-0.035em}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero-sub{margin-top:20px;font-size:18px;line-height:1.6;color:#BFC6D0;max-width:56ch}
.hero-brands{margin-top:26px;font-size:14px;font-weight:600;color:#8F98A4;letter-spacing:.01em}
.hero-brands b{color:#fff;font-weight:700}
.hero-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero-note{margin-top:18px;font-size:13.5px;color:#8F98A4;display:flex;align-items:center;gap:8px}

.hero-stats{
  position:relative;z-index:1;border-top:1px solid var(--line-dark);
  display:grid;grid-template-columns:repeat(4,1fr);
}
.hero-stats div{padding:24px 0}
.hero-stats .n{font-size:26px;font-weight:800;letter-spacing:-0.03em;color:#fff}
.hero-stats .l{font-size:13px;color:#8F98A4;margin-top:3px;font-weight:500}

/* ============================== SPLIT (audience) ============================== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.split-card{
  border:1px solid var(--line);border-radius:var(--r-lg);padding:34px;background:#fff;
  display:flex;flex-direction:column;transition:border-color .18s, box-shadow .18s, transform .18s;
}
.split-card:hover{border-color:var(--ink);box-shadow:var(--sh-3);transform:translateY(-2px)}
.split-card--pro{background:var(--ink);color:#fff;border-color:var(--ink)}
.split-card h3{font-size:24px;margin-bottom:10px}
.split-card p{font-size:15.5px;color:var(--slate);margin-bottom:20px}
.split-card--pro p{color:#A9B0BA}
.split-ico{width:44px;height:44px;border-radius:var(--r);background:var(--accent-wash);color:var(--accent-deep);display:grid;place-items:center;margin-bottom:18px}
.split-card--pro .split-ico{background:rgba(203,255,0,.18);color:var(--accent)}
.split-list{list-style:none;margin:0 0 24px;padding:0;font-size:14.5px}
.split-list li{display:flex;gap:10px;padding:7px 0;align-items:flex-start}
.split-list .icon{color:var(--accent-deep);margin-top:3px}
.split-card--pro .split-list .icon{color:var(--accent)}
.split-card .btn{margin-top:auto}

/* ============================== PROMISE STRIP ============================== */
.promise{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.promise > div{background:#fff;padding:28px 24px}
.promise .icon{color:var(--accent-deep);margin-bottom:14px}
.promise h4{font-size:16px;margin-bottom:7px}
.promise p{font-size:14px;color:var(--slate);line-height:1.5}
.promise .fact{display:block;margin-top:9px;font-size:13px;font-weight:700;color:var(--ink)}

/* ============================== CATEGORY GRID ============================== */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cat{
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff;
  display:flex;flex-direction:column;transition:border-color .18s, box-shadow .18s, transform .18s;
}
.cat:hover{border-color:var(--ink);box-shadow:var(--sh-2);transform:translateY(-2px)}
.cat-img{aspect-ratio:4/3;background:var(--paper-2);position:relative;overflow:hidden}
.cat-img img{width:100%;height:100%;object-fit:cover}
.cat-body{padding:16px 18px 18px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.cat-body h3{font-size:15.5px;letter-spacing:-0.015em}
.cat-body .n{font-size:12.5px;color:var(--slate-2);font-weight:700;white-space:nowrap}

/* photo placeholder — visible until the real photo is uploaded */
.ph{position:relative;background:
  repeating-linear-gradient(45deg,#EFF1ED,#EFF1ED 10px,#E7E9E4 10px,#E7E9E4 20px);}
.ph::after{
  content:attr(data-shot);position:absolute;inset:0;display:grid;place-items:center;
  padding:14px;text-align:center;font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:#98A0A6;line-height:1.5;
}
.ph img{position:relative;z-index:1}
.ph img:not([src]),.ph img[src=""]{display:none}

/* ============================== BRANDS ============================== */
.brands{display:grid;grid-template-columns:repeat(7,1fr);gap:16px}
.brand{
  border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:20px 14px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  text-align:center;min-height:104px;transition:border-color .18s, box-shadow .18s;
}
.brand:hover{border-color:var(--ink);box-shadow:var(--sh-1)}
.brand .name{font-size:15px;font-weight:800;letter-spacing:-0.02em}
.brand .meta{font-size:11.5px;color:var(--slate-2);font-weight:600}

/* ============================== PRODUCTS ============================== */
.prods{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.prod{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;overflow:hidden;display:flex;flex-direction:column;transition:border-color .18s, box-shadow .18s, transform .18s}
.prod:hover{border-color:var(--ink);box-shadow:var(--sh-2);transform:translateY(-2px)}
.prod-img{aspect-ratio:1;background:#fff;border-bottom:1px solid var(--line);position:relative}
.prod-img img{width:100%;height:100%;object-fit:contain;padding:14px}
.prod-flag{position:absolute;top:12px;left:12px;z-index:2;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;background:var(--accent);color:var(--on-accent);padding:5px 10px;border-radius:100px}
.prod-body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.prod-brand{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-2);margin-bottom:6px}
.prod-name{font-size:15px;font-weight:700;letter-spacing:-0.015em;line-height:1.32;margin-bottom:10px}
.prod-spec{font-size:13px;color:var(--slate);margin-bottom:14px;line-height:1.45}
.prod-foot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.prod-price .p{font-size:22px;font-weight:800;letter-spacing:-0.03em;line-height:1}
.prod-price .u{font-size:12px;color:var(--slate-2);font-weight:700;margin-top:4px;display:block}
.prod-price .sq{font-size:12.5px;color:var(--slate);margin-top:5px;display:block}
.prod-stock{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--accent-deep);margin-bottom:10px}
.prod-stock .d{width:7px;height:7px;border-radius:50%;background:var(--accent-deep)}

/* ============================== ACCOUNT / FORM ============================== */
.acct{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:start}
.acct-list{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:2px 22px}
.acct-list li{display:flex;gap:11px;padding:9px 0;font-size:15px;align-items:flex-start}
.acct-list .icon{color:var(--accent);margin-top:3px}
.form-card{background:#fff;border-radius:var(--r-lg);padding:32px;box-shadow:var(--sh-3);color:var(--ink)}
.form-card h3{font-size:21px;margin-bottom:6px}
.form-card .fc-sub{font-size:14px;color:var(--slate);margin-bottom:22px}
.fields{display:grid;gap:14px}
.field label{display:block;font-size:12.5px;font-weight:700;letter-spacing:.03em;margin-bottom:6px}
.field input,.field select{
  width:100%;padding:12px 13px;font:inherit;font-size:15px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper-2);
  transition:border-color .15s, background .15s;
}
.field input:focus,.field select:focus{outline:none;border-color:var(--ink);background:#fff}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-fine{font-size:12.5px;color:var(--slate-2);margin-top:14px;line-height:1.5}

/* ============================== RENTALS ============================== */
.rentals{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.rental{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff;display:flex;flex-direction:column}
.rental-img{aspect-ratio:16/9}
.rental-img img{width:100%;height:100%;object-fit:cover}
.rental-body{padding:26px 28px 28px}
.rental-body h3{font-size:21px;margin-bottom:8px}
.rental-body p{font-size:15px;color:var(--slate);margin-bottom:18px}
.rate{display:flex;gap:28px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:20px}
.rate div span{display:block;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--slate-2)}
.rate div b{font-size:20px;font-weight:800;letter-spacing:-0.02em}

/* ============================== WHY US ============================== */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.why-card{padding:28px;border-radius:var(--r-lg);background:var(--ink-2);border:1px solid var(--line-dark)}
.why-card .icon{color:var(--accent);margin-bottom:16px}
.why-card h3{font-size:18px;margin-bottom:9px}
.why-card p{font-size:14.5px;color:#A9B0BA;line-height:1.55}

/* ============================== REVIEWS ============================== */
.rev-top{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:34px;padding:20px 24px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff}
.rev-score{font-size:42px;font-weight:800;letter-spacing:-0.04em;line-height:1}
.stars{display:flex;gap:2px;color:var(--accent-deep)}
.stars svg{width:17px;height:17px;fill:currentColor;stroke:none}
.rev-meta{font-size:14px;color:var(--slate);margin-top:5px}
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rev{border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;background:#fff;display:flex;flex-direction:column}
.rev q{font-size:15px;line-height:1.6;quotes:none;display:block;margin:14px 0 18px}
.rev-who{margin-top:auto;display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--line)}
.rev-av{width:38px;height:38px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:800;font-size:14px;flex:none}
.rev-who .nm{font-size:14px;font-weight:700}
.rev-who .co{font-size:12.5px;color:var(--slate-2)}

/* ============================== LOCATION ============================== */
.loc{display:grid;grid-template-columns:1fr 1.15fr;gap:44px;align-items:start}
.hours{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid var(--line)}
.hours li{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line);font-size:15px}
.hours li b{font-weight:700}
.hours li.today{color:var(--accent-deep)}
.loc-map{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3;background:var(--paper-2)}
.loc-map iframe{width:100%;height:100%;border:0;display:block}
.towns{margin-top:22px;font-size:14px;color:var(--slate);line-height:1.7}
.towns b{color:var(--ink)}

/* ============================== FAQ ============================== */
.faq{max-width:840px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:22px 44px 22px 0;position:relative;
  font-size:17.5px;font-weight:700;letter-spacing:-0.02em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--slate);border-bottom:2px solid var(--slate);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq details p{padding:0 0 22px;font-size:15.5px;color:var(--slate);line-height:1.65;max-width:70ch}

/* ============================== CTA BAND ============================== */
.band{background:var(--accent);color:var(--on-accent)}
.band .wrap{padding:52px 24px;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.band h2{font-size:clamp(24px,3vw,34px);letter-spacing:-0.03em}
.band p{margin-top:8px;font-size:16px;font-weight:600;color:var(--accent-dark)}
.band-btns{display:flex;gap:12px;flex-wrap:wrap}
.btn--band{background:var(--ink);color:#fff}
.btn--band:hover{background:var(--ink-3)}
.btn--bandGhost{background:transparent;border-color:rgba(16,17,18,.3);color:var(--on-accent)}
.btn--bandGhost:hover{background:rgba(16,17,18,.07)}

/* ============================== FOOTER ============================== */
.ftr{background:var(--ink);color:#98A0AC;font-size:14.5px;padding:64px 0 0}
.ftr-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:36px;padding-bottom:48px}
.ftr h4{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#fff;margin-bottom:16px}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li{padding:5px 0}
.ftr a:hover{color:var(--accent)}
.ftr .logo{color:#fff;margin-bottom:16px}
.ftr .logo .plus{color:var(--accent)}
.ftr-about{font-size:14.5px;line-height:1.6;max-width:34ch}
.ftr-nap{margin-top:20px;font-size:14.5px;line-height:1.9}
.ftr-nap a{color:#fff;font-weight:700}
.ftr-soc{display:flex;gap:10px;margin-top:20px}
.ftr-soc a{width:38px;height:38px;border-radius:var(--r-sm);border:1px solid var(--line-dark);display:grid;place-items:center;transition:border-color .15s,color .15s}
.ftr-soc a:hover{border-color:var(--accent);color:var(--accent)}
.ftr-bot{border-top:1px solid var(--line-dark);padding:22px 0;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13px}
.ftr-bot ul{display:flex;gap:18px}

/* mobile sticky call bar */
.callbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;background:#fff;border-top:1px solid var(--line);padding:10px 14px;gap:10px;box-shadow:0 -4px 18px rgba(14,16,19,.09)}
.callbar .btn{flex:1;padding:13px 10px;font-size:14.5px}

/* ============================== RESPONSIVE ============================== */
@media (max-width:1320px){
  .hdr-nav{gap:15px;font-size:14.5px}
  .aplus-search-form{max-width:320px}
}
@media (max-width:1180px){
  .hdr-nav{display:none}
  .aplus-search-form{max-width:520px}
}
@media (max-width:1080px){
  .cats,.prods{grid-template-columns:repeat(3,1fr)}
  .brands{grid-template-columns:repeat(4,1fr)}
  .promise{grid-template-columns:repeat(2,1fr)}
  .acct{grid-template-columns:1fr;gap:36px}
  .loc{grid-template-columns:1fr;gap:32px}
  .why{grid-template-columns:1fr}
  .revs{grid-template-columns:1fr}
  .hdr-nav{display:none}
  .aplus-search-form{max-width:none}
}
@media (max-width:820px){
  .sec{padding:56px 0}
  .split,.rentals{grid-template-columns:1fr}
  .cats,.prods{grid-template-columns:repeat(2,1fr)}
  .hero-stats{grid-template-columns:repeat(2,1fr)}
  .hero-stats div{padding:18px 0}
  .acct-list{grid-template-columns:1fr}
  .hdr-cta .btn{display:none}
  .burger{display:block}
  .hero .wrap{padding-top:56px;padding-bottom:56px}
  .hero-media::after{background:linear-gradient(180deg,rgba(14,16,19,.9) 0%,rgba(14,16,19,.95) 100%)}
  .callbar{display:flex}
  body{padding-bottom:68px}
}
@media (max-width:600px){
  .wrap{padding:0 18px}
  .brands{grid-template-columns:repeat(2,1fr)}
  .cats,.prods{grid-template-columns:1fr}
  .promise{grid-template-columns:1fr}
  .hdr .wrap{height:64px;gap:12px}
  .hdr .aplus-search-form{display:none}
  .util .wrap{gap:18px}
  .f2{grid-template-columns:1fr}
  .form-card{padding:24px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .btn:hover,.cat:hover,.prod:hover,.split-card:hover{transform:none}
}

/* =========================================================================
   6. SHOP — archive, category, search results
   ========================================================================= */

/* --- breadcrumb ------------------------------------------------------- */
.crumbs{border-bottom:1px solid var(--line);background:var(--paper-2)}
.crumbs .wrap{padding:13px 24px;font-size:13px;color:var(--slate);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.crumbs a{font-weight:600}
.crumbs a:hover{color:var(--accent-deep)}
.crumbs .sep{color:var(--slate-2)}
.crumbs .cur{color:var(--ink);font-weight:700}

/* --- archive head ----------------------------------------------------- */
.shop-head{padding:38px 0 26px}
.shop-head h1{font-size:clamp(26px,3.4vw,38px)}
.shop-head .desc{margin-top:12px;font-size:16px;color:var(--slate);max-width:74ch;line-height:1.6}
.shop-head .desc p{margin:0 0 10px}
.shop-head .desc p:last-child{margin:0}

/* --- toolbar: count + sort ------------------------------------------- */
.shop-bar{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin-bottom:28px;
}
.shop-bar .count{font-size:13.5px;color:var(--slate);font-weight:600}
.shop-bar .woocommerce-ordering{margin-left:auto}
.shop-bar select{
  font:inherit;font-size:14px;font-weight:600;padding:9px 34px 9px 12px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;color:var(--ink);
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C636E' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:15px;
}
.shop-bar select:focus{outline:none;border-color:var(--ink)}
.filter-toggle{display:none}

/* --- shop layout: filters + grid ------------------------------------- */
.shop-layout{display:grid;grid-template-columns:246px 1fr;gap:40px;align-items:start;padding-bottom:72px}
.shop-side{position:sticky;top:96px}
.fgroup{border-bottom:1px solid var(--line);padding:0 0 18px;margin-bottom:18px}
.fgroup:last-child{border-bottom:0}
.fgroup h3{font-size:12px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--slate-2);margin-bottom:12px}
.fgroup ul{list-style:none;margin:0;padding:0;font-size:14.5px}
.fgroup li{padding:5px 0;display:flex;justify-content:space-between;gap:10px}
.fgroup li a{font-weight:500;transition:color .15s}
.fgroup li a:hover{color:var(--accent-deep)}
.fgroup li.current > a{font-weight:800;color:var(--accent-deep)}
.fgroup li .n{font-size:12.5px;color:var(--slate-2);font-weight:700;flex:none}
.fgroup li ul{padding-left:12px;margin-top:2px;border-left:1px solid var(--line)}

/* --- product grid (WooCommerce ul.products) -------------------------- */
/* WooCommerce prints <ul class="products columns-N"> — match that, do not
   override loop-start.php just to rename a class. */
ul.products{list-style:none;margin:0;padding:0;display:grid;gap:18px;grid-template-columns:repeat(4,1fr)}
ul.products.columns-1{grid-template-columns:1fr}
ul.products.columns-2{grid-template-columns:repeat(2,1fr)}
ul.products.columns-3{grid-template-columns:repeat(3,1fr)}
ul.products.columns-4{grid-template-columns:repeat(4,1fr)}
ul.products li.product{margin:0;padding:0;list-style:none;display:flex}
ul.products li.product > .prod{flex:1}

/* the card itself reuses .prod from the homepage design system */
.prod-link{display:flex;flex-direction:column;flex:1;min-height:0}
.prod-img .ph-none{
  position:absolute;inset:0;display:grid;place-items:center;gap:8px;
  font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--slate-2);background:var(--paper-2);text-align:center;padding:16px;
}
.prod-flag--out{background:var(--slate-2);color:#fff}
.prod-flag--sale{background:var(--accent);color:var(--on-accent)}
.prod-sku{font-size:11.5px;font-weight:700;color:var(--slate-2);letter-spacing:.02em;margin-bottom:8px;font-variant-numeric:tabular-nums}
.prod-stock--out{color:var(--slate-2)}
.prod-stock--out .d{background:var(--slate-2)}
.prod .add_to_cart_button,.prod .added_to_cart{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:700;font-size:14px;padding:11px 16px;border-radius:var(--r);
  background:var(--ink);color:#fff;border:1px solid var(--ink);cursor:pointer;
  transition:background .16s ease;white-space:nowrap;
}
.prod .add_to_cart_button:hover{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.prod .add_to_cart_button.loading{opacity:.6;pointer-events:none}
.prod .add_to_cart_button.added{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff}
.prod .added_to_cart{display:none}
.prod-oos{font-size:13.5px;font-weight:700;color:var(--slate-2)}

/* price block inside the card */
.prod .price{font-size:22px;font-weight:800;letter-spacing:-0.03em;line-height:1;color:var(--ink)}
.prod .price del{font-size:14px;font-weight:600;color:var(--slate-2);margin-right:7px}
.prod .price ins{text-decoration:none}
.prod .price .woocommerce-Price-currencySymbol{font-size:.72em;vertical-align:.14em;margin-right:1px}
.prod-unit{font-size:12px;color:var(--slate-2);font-weight:700;margin-top:4px;display:block}
.prod-persq{font-size:12.5px;color:var(--slate);margin-top:5px;display:block}

/* --- pagination ------------------------------------------------------ */
.woocommerce-pagination{margin-top:36px}
.woocommerce-pagination ul{list-style:none;display:flex;gap:7px;padding:0;margin:0;flex-wrap:wrap}
.woocommerce-pagination a,.woocommerce-pagination span{
  display:grid;place-items:center;min-width:42px;height:42px;padding:0 12px;
  border:1px solid var(--line);border-radius:var(--r-sm);font-size:14.5px;font-weight:700;
  background:#fff;transition:border-color .15s,background .15s;
}
.woocommerce-pagination a:hover{border-color:var(--ink)}
.woocommerce-pagination span.current{background:var(--ink);border-color:var(--ink);color:#fff}

.shop-empty{padding:56px 0;text-align:center}
.shop-empty h2{font-size:22px;margin-bottom:10px}
.shop-empty p{color:var(--slate);font-size:15.5px}

/* =========================================================================
   7. SINGLE PRODUCT
   ========================================================================= */
.sp{display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:start;padding:34px 0 64px}

/* gallery */
.sp-gal{position:sticky;top:96px}
.sp-shot{
  border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;
  aspect-ratio:1;overflow:hidden;display:grid;place-items:center;
}
.sp-shot img{width:100%;height:100%;object-fit:contain;padding:26px}
.sp-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:12px}
.sp-thumbs button{
  border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;padding:6px;
  aspect-ratio:1;cursor:pointer;transition:border-color .15s;
}
.sp-thumbs button[aria-current="true"]{border-color:var(--ink);border-width:2px;padding:5px}
.sp-thumbs img{width:100%;height:100%;object-fit:contain}
.sp-noimg{
  border:1px solid var(--line);border-radius:var(--r-lg);aspect-ratio:1;
  display:grid;place-items:center;text-align:center;padding:32px;background:var(--paper-2);
  font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--slate-2);
}

/* summary column */
.sp-brand{font-size:12px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--accent-deep);margin-bottom:12px}
.sp h1.product_title{font-size:clamp(24px,3vw,34px);line-height:1.14}
.sp-meta{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-top:14px;font-size:13.5px;color:var(--slate)}
.sp-meta b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}

.sp-price{margin:26px 0;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sp-price .price{font-size:38px;font-weight:800;letter-spacing:-0.04em;line-height:1;color:var(--ink)}
.sp-price .price del{font-size:19px;font-weight:600;color:var(--slate-2);margin-right:10px}
.sp-price .price ins{text-decoration:none}
.sp-price .unit{font-size:14px;color:var(--slate);font-weight:600;margin-top:9px}
.sp-price .unit b{color:var(--ink);font-weight:800}
.sp-trade{
  display:flex;align-items:center;gap:10px;margin-top:16px;padding:12px 15px;
  background:var(--accent-wash);border:1px solid rgba(70,96,0,.24);border-radius:var(--r);
  font-size:14px;font-weight:600;color:var(--accent-dark);
}
.sp-trade a{font-weight:800;text-decoration:underline;text-underline-offset:2px}

/* Availability. This is WooCommerce's own <p class="stock">, styled rather than
   replaced — drawing our own badge alongside it printed the message twice. */
p.stock{
  display:inline-flex;align-items:center;gap:8px;margin:0 0 20px;
  font-size:14.5px;font-weight:700;color:var(--accent-deep);
}
p.stock::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
p.stock.out-of-stock,p.stock.available-on-backorder{color:var(--slate-2)}

/* add to cart */
form.cart{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch;margin-bottom:22px}
.quantity{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.quantity button{
  width:46px;background:var(--paper-2);border:0;cursor:pointer;font-size:19px;font-weight:700;
  color:var(--ink);transition:background .15s;
}
.quantity button:hover{background:var(--line)}
.quantity input.qty{
  width:62px;border:0;text-align:center;font:inherit;font-size:16px;font-weight:800;
  -moz-appearance:textfield;background:#fff;
}
.quantity input.qty::-webkit-outer-spin-button,.quantity input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.quantity input.qty:focus{outline:none}
button.single_add_to_cart_button{
  flex:1 1 220px;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--accent);color:var(--on-accent);border:1px solid var(--accent);border-radius:var(--r);
  font:inherit;font-size:16px;font-weight:800;padding:16px 28px;cursor:pointer;
  box-shadow:var(--sh-2);transition:background .16s,box-shadow .16s,transform .16s;
}
button.single_add_to_cart_button:hover{background:var(--accent-hover);box-shadow:var(--sh-3);transform:translateY(-1px)}
button.single_add_to_cart_button:disabled{background:var(--line);border-color:var(--line);color:var(--slate-2);box-shadow:none;cursor:not-allowed;transform:none}
.sp-alt{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px}
.sp-alt .btn{flex:1 1 180px}

/* short description + spec table */
.sp-short{font-size:15.5px;line-height:1.65;color:var(--slate);margin-bottom:26px}
.sp-short p{margin:0 0 12px}
.sp-short ul{margin:0 0 12px;padding-left:20px}
.sp-short li{padding:3px 0}

.specs{width:100%;border-collapse:collapse;font-size:14.5px;margin-bottom:26px}
.specs th,.specs td{padding:11px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.specs th{width:44%;font-weight:600;color:var(--slate)}
.specs td{font-weight:700}

.sp-ship{border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px;background:var(--paper-2)}
.sp-ship h4{font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-2);margin-bottom:14px}
.sp-ship ul{list-style:none;margin:0;padding:0;font-size:14.5px}
.sp-ship li{display:flex;gap:11px;padding:7px 0;align-items:flex-start;line-height:1.5}
.sp-ship .icon{color:var(--accent-deep);margin-top:2px}

/* long description / tabs */
.sp-body{padding:0 0 64px}
.sp-body .h2{margin-bottom:22px}
.sp-copy{max-width:76ch;font-size:16px;line-height:1.7;color:var(--ink-3)}
.sp-copy h2,.sp-copy h3{margin:32px 0 12px;font-size:20px}
.sp-copy p{margin:0 0 16px}
.sp-copy ul,.sp-copy ol{margin:0 0 16px;padding-left:22px}
.sp-copy li{padding:4px 0}
.sp-copy a{color:var(--accent-deep);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.sp-copy table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:15px}
.sp-copy th,.sp-copy td{padding:10px 12px;border:1px solid var(--line);text-align:left}
.sp-copy th{background:var(--paper-2);font-weight:700}

.related.products,.upsells.products{padding:0 0 72px}
.related.products > h2,.upsells.products > h2{font-size:clamp(22px,2.6vw,28px);margin-bottom:24px;letter-spacing:-0.025em}

/* =========================================================================
   8. CART / CHECKOUT / ACCOUNT — styling WooCommerce core markup
   ========================================================================= */
.woo-page{padding:34px 0 72px}
.woo-page > h1{font-size:clamp(26px,3.4vw,36px);margin-bottom:26px}

/* notices */
.woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-notice{
  list-style:none;margin:0 0 22px;padding:15px 18px;border-radius:var(--r);
  font-size:14.5px;font-weight:600;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  border:1px solid var(--line);background:var(--paper-2);
}
.woocommerce-message{background:var(--accent-wash);border-color:rgba(70,96,0,.28);color:var(--accent-dark)}
.woocommerce-error{background:#FFF1F0;border-color:#F3C7C2;color:#8A1F13;flex-direction:column;align-items:flex-start;gap:6px}
.woocommerce-error li{width:100%}
.woocommerce-message .button,.woocommerce-info .button{margin-left:auto}

/* tables */
table.shop_table{width:100%;border-collapse:collapse;font-size:14.5px;margin-bottom:28px}
table.shop_table th{
  text-align:left;padding:13px 12px;border-bottom:2px solid var(--ink);
  font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-2);
}
table.shop_table td{padding:16px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
table.shop_table th:last-child,table.shop_table td:last-child{text-align:right}
table.shop_table img{width:66px;height:66px;object-fit:contain;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff}
table.shop_table .product-name a{font-weight:700;line-height:1.4;display:block}
table.shop_table .product-name a:hover{color:var(--accent-deep)}
table.shop_table .product-price,table.shop_table .product-subtotal{font-weight:800;font-variant-numeric:tabular-nums}
a.remove{
  display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  border:1px solid var(--line);color:var(--slate);font-size:17px;line-height:1;
  transition:border-color .15s,color .15s,background .15s;
}
a.remove:hover{border-color:#C0392B;color:#C0392B;background:#FFF1F0}
.coupon{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.actions{padding-top:8px!important}

/* totals */
.cart-collaterals{display:grid;grid-template-columns:1fr 400px;gap:40px;align-items:start}
.cart_totals{border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 28px;background:var(--paper-2)}
.cart_totals h2{font-size:19px;margin-bottom:18px}
.cart_totals table{margin:0}
.cart_totals th{border:0;padding:11px 0;text-transform:none;font-size:14.5px;letter-spacing:0;color:var(--slate);font-weight:600}
.cart_totals td{border:0;padding:11px 0;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.cart_totals tr.order-total th,.cart_totals tr.order-total td{border-top:1px solid var(--line);padding-top:16px;font-size:19px;font-weight:800;color:var(--ink)}
.wc-proceed-to-checkout{margin-top:20px}
.wc-proceed-to-checkout .checkout-button{
  display:flex;align-items:center;justify-content:center;width:100%;
  background:var(--accent);color:var(--on-accent);border:0;border-radius:var(--r);
  font-size:16px;font-weight:800;padding:17px 24px;box-shadow:var(--sh-2);
  transition:background .16s,box-shadow .16s;
}
.wc-proceed-to-checkout .checkout-button:hover{background:var(--accent-hover);box-shadow:var(--sh-3)}

/* forms — shared by checkout, account, address */
.form-row,.woocommerce-form-row{margin-bottom:16px}
.form-row label,.woocommerce-form-row label,.woocommerce-billing-fields label,.woocommerce-shipping-fields label{
  display:block;font-size:12.5px;font-weight:700;letter-spacing:.03em;margin-bottom:6px;
}
.required{color:#C0392B;text-decoration:none}
input.input-text,textarea.input-text,.woocommerce-input-wrapper input,.woocommerce-input-wrapper textarea,
.woo-page select,.woo-page input[type=text],.woo-page input[type=email],.woo-page input[type=tel],
.woo-page input[type=password],.woo-page input[type=number],.woo-page textarea{
  width:100%;padding:12px 13px;font:inherit;font-size:15px;color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper-2);
  transition:border-color .15s,background .15s;
}
input.input-text:focus,textarea.input-text:focus,.woo-page select:focus,.woo-page input:focus,.woo-page textarea:focus{
  outline:none;border-color:var(--ink);background:#fff;
}
.form-row-first,.form-row-last{display:inline-block;width:calc(50% - 7px)}
.form-row-first{margin-right:12px}
#customer_details{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-bottom:36px}
#customer_details h3{font-size:19px;margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--line)}
#order_review_heading{font-size:19px;margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--line)}
#order_review{border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 28px;background:var(--paper-2)}
#payment ul.payment_methods{list-style:none;margin:0 0 20px;padding:0}
#payment ul.payment_methods li{padding:12px 0;border-bottom:1px solid var(--line)}
#payment ul.payment_methods label{display:inline;font-size:15px;font-weight:700;letter-spacing:0}
#payment .payment_box{margin-top:12px;font-size:14px;color:var(--slate);line-height:1.55}
/* Stripe reads this invisible input's theme styles; keep it measurable without
   letting its absolute 100% width extend beyond the payment fieldset. */
.woocommerce-checkout #wc-stripe-upe-form{position:relative;min-width:0}
.woocommerce-checkout #wc-stripe-hidden-style-input{inset-inline-start:0;max-width:100%;box-sizing:border-box}
#place_order{
  width:100%;background:var(--accent);color:var(--on-accent);border:0;border-radius:var(--r);
  font:inherit;font-size:17px;font-weight:800;padding:18px 24px;cursor:pointer;
  box-shadow:var(--sh-2);transition:background .16s,box-shadow .16s;
}
#place_order:hover{background:var(--accent-hover);box-shadow:var(--sh-3)}
.woocommerce-terms-and-conditions-wrapper{font-size:13.5px;color:var(--slate);margin-bottom:16px;line-height:1.55}

/* generic WooCommerce .button — anything we did not style above */
.woo-page .button,a.button,button.button,input.button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:inherit;font-size:14.5px;font-weight:700;padding:13px 20px;
  border:1px solid var(--ink);border-radius:var(--r);background:var(--ink);color:#fff;
  cursor:pointer;transition:background .16s,border-color .16s;
}
.woo-page .button:hover,a.button:hover,button.button:hover,input.button:hover{background:var(--ink-3)}
.woo-page .button:disabled{opacity:.5;cursor:not-allowed}
.button.wc-backward{background:#fff;color:var(--ink);border-color:var(--line)}
.button.wc-backward:hover{background:var(--paper-2);border-color:var(--ink)}

/* my account */
.woocommerce-MyAccount-navigation ul{list-style:none;margin:0 0 28px;padding:0;display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.woocommerce-MyAccount-navigation li a{
  display:block;padding:12px 16px;font-size:14.5px;font-weight:700;
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s,border-color .15s;
}
.woocommerce-MyAccount-navigation li.is-active a{border-bottom-color:var(--accent-deep);color:var(--accent-deep)}
.woocommerce-MyAccount-navigation li a:hover{color:var(--accent-deep)}
.woocommerce-MyAccount-content{font-size:15.5px;line-height:1.65}
.woocommerce-MyAccount-content p{margin:0 0 14px}
.woo-cols-2{display:grid;grid-template-columns:1fr 1fr;gap:44px}
.woo-cols-2 h2{font-size:20px;margin-bottom:16px}
.woo-cols-2 > div{border:1px solid var(--line);border-radius:var(--r-lg);padding:28px}

/* =========================================================================
   9. BLOG / STATIC PAGES
   ========================================================================= */
.page-head{padding:44px 0 8px}
.page-head h1{font-size:clamp(28px,3.8vw,44px)}
.page-head .lede{margin-top:14px}
.entry{max-width:76ch;font-size:17px;line-height:1.72;color:var(--ink-3);padding:24px 0 72px}
.entry h2{font-size:clamp(22px,2.6vw,28px);margin:40px 0 14px}
.entry h3{font-size:20px;margin:30px 0 10px}
.entry p{margin:0 0 18px}
.entry ul,.entry ol{margin:0 0 18px;padding-left:24px}
.entry li{padding:4px 0}
.entry a{color:var(--accent-deep);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.entry img{border-radius:var(--r);margin:8px 0 20px}
.entry blockquote{margin:0 0 20px;padding:4px 0 4px 22px;border-left:3px solid var(--accent);font-size:18px;font-style:normal;color:var(--ink)}
.entry table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:15.5px}
.entry th,.entry td{padding:11px 13px;border:1px solid var(--line);text-align:left}
.entry th{background:var(--paper-2);font-weight:700}
.entry figure{margin:0 0 22px}
.entry figcaption{font-size:13.5px;color:var(--slate-2);margin-top:8px}

.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding-bottom:72px}
.post-card{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff;display:flex;flex-direction:column;transition:border-color .18s,box-shadow .18s,transform .18s}
.post-card:hover{border-color:var(--ink);box-shadow:var(--sh-2);transform:translateY(-2px)}
.post-card .thumb{aspect-ratio:16/9;background:var(--paper-2)}
.post-card .thumb img{width:100%;height:100%;object-fit:cover}
.post-card .body{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.post-card .cat{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-deep);margin-bottom:9px}
.post-card h2{font-size:18px;line-height:1.3;margin-bottom:10px}
.post-card .ex{font-size:14.5px;color:var(--slate);line-height:1.55;margin-bottom:16px}
.post-card .meta{margin-top:auto;font-size:12.5px;color:var(--slate-2);font-weight:600}

/* mobile filter drawer + nav drawer */
.drawer{
  position:fixed;inset:0;z-index:90;background:rgba(14,16,19,.5);
  opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s;
}
.drawer[data-open="true"]{opacity:1;visibility:visible}
.drawer-panel{
  position:absolute;top:0;bottom:0;left:0;width:min(88vw,330px);background:#fff;
  padding:22px;overflow-y:auto;transform:translateX(-100%);transition:transform .24s ease;
}
.drawer[data-open="true"] .drawer-panel{transform:none}
.drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.drawer-head strong{font-size:16px}
.drawer-close{background:none;border:1px solid var(--line);border-radius:var(--r-sm);padding:8px;cursor:pointer;color:var(--ink);display:grid;place-items:center}
.drawer-nav{list-style:none;margin:0;padding:0;font-size:16px;font-weight:600}
.drawer-nav li{border-bottom:1px solid var(--line)}
.drawer-nav a{display:block;padding:13px 0}
.drawer-nav .sub{padding-left:14px;font-size:14.5px;font-weight:500}

/* cart count bubble in header */
.hdr-cart{position:relative;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:var(--r);transition:border-color .15s}
.hdr-cart:hover{border-color:var(--ink)}
.hdr-cart .n{
  position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;
  border-radius:100px;background:var(--accent-deep);color:#fff;
  font-size:11px;font-weight:800;display:grid;place-items:center;font-variant-numeric:tabular-nums;
}
.hdr-cart[data-empty="true"] .n{display:none}

/* skip link */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:12px 18px;font-weight:700}
.skip:focus{left:12px;top:12px}
:focus-visible{outline:2px solid var(--accent-deep);outline-offset:2px}

/* =========================================================================
   10. RESPONSIVE — shop-specific
   ========================================================================= */
@media (max-width:1080px){
  .shop-layout{grid-template-columns:1fr;gap:0}
  .shop-side{display:none}
  .filter-toggle{display:inline-flex}
  .sp{grid-template-columns:1fr;gap:34px}
  .sp-gal{position:static}
  .cart-collaterals{grid-template-columns:1fr;gap:28px}
  #customer_details{grid-template-columns:1fr;gap:28px}
  .woo-cols-2{grid-template-columns:1fr;gap:24px}
  .posts{grid-template-columns:repeat(2,1fr)}
  ul.products.columns-4{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:820px){
  ul.products.columns-4,ul.products.columns-3{grid-template-columns:repeat(2,1fr)}
  .posts{grid-template-columns:1fr}
  .sp-thumbs{grid-template-columns:repeat(4,1fr)}
  table.shop_table thead{display:none}
  table.shop_table tr{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:16px 0;border-bottom:1px solid var(--line)}
  table.shop_table td{border:0;padding:3px 0;display:flex;justify-content:space-between;gap:12px;align-items:center}
  table.shop_table td::before{content:attr(data-title);font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--slate-2)}
  table.shop_table td.product-thumbnail{grid-row:span 4;order:-1}
  table.shop_table td.product-thumbnail::before{display:none}
  .form-row-first,.form-row-last{width:100%;margin-right:0}
}
@media (max-width:600px){
  ul.products.columns-4,ul.products.columns-3,ul.products.columns-2{grid-template-columns:1fr}
  .shop-bar{gap:10px}
  .shop-bar .woocommerce-ordering{margin-left:0;width:100%}
  .shop-bar select{width:100%}
  .sp-price .price{font-size:32px}
  form.cart{gap:10px}
  button.single_add_to_cart_button{flex:1 1 100%}
}

/* =========================================================================
   11. GLUE — markup WordPress and WooCommerce generate for us
   ========================================================================= */

/* wp_nav_menu with items_wrap '%3$s' drops the <ul>, so the <li> are the flex
   items directly. */
.hdr-nav li{list-style:none}
.hdr-nav > li > a{display:block}
.ftr .menu-item{padding:5px 0}
.ftr div[class*="menu-"] ul{list-style:none;margin:0;padding:0}
.ftr-bot ul{list-style:none;margin:0;padding:0;display:flex;gap:18px;flex-wrap:wrap}

.entry-hero{width:100%;border-radius:var(--r-lg);margin-bottom:26px}
.page-links{display:flex;gap:8px;margin:24px 0;font-weight:700;font-size:14.5px}

/* Star rating.
   WooCommerce's own stars come from its icon font, which this theme does not
   load. Text stars cost nothing and stay crisp at any zoom. The inline width
   percentage WooCommerce writes on the <span> still drives the fill. */
.star-rating{
  position:relative;display:inline-block;width:5.6em;height:1.15em;
  font-size:14px;line-height:1;overflow:hidden;flex:none;
}
.star-rating::before{
  content:"\2605\2605\2605\2605\2605";position:absolute;inset:0;
  letter-spacing:.12em;color:var(--line);white-space:nowrap;
}
.star-rating span{position:absolute;left:0;top:0;height:100%;overflow:hidden;font-size:0}
.star-rating span::before{
  content:"\2605\2605\2605\2605\2605";font-size:14px;letter-spacing:.12em;
  color:var(--accent-deep);white-space:nowrap;
}
.star-rating strong,.star-rating span a{display:none}
.prod .star-rating{margin-bottom:10px}
.woocommerce-review-link{font-size:13px;color:var(--slate);font-weight:600}

/* Product reviews — WooCommerce's comment markup */
#reviews{padding:0 0 56px}
#reviews h2{font-size:clamp(22px,2.6vw,28px);margin-bottom:22px;letter-spacing:-0.025em}
#reviews .commentlist{list-style:none;margin:0 0 34px;padding:0;display:grid;gap:16px}
#reviews .commentlist li{border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px;background:#fff}
#reviews .comment_container{display:flex;gap:16px;align-items:flex-start}
#reviews .avatar{width:42px;height:42px;border-radius:50%;flex:none}
#reviews .meta{font-size:13px;color:var(--slate-2);margin-bottom:8px;font-weight:600}
#reviews .meta strong{color:var(--ink);font-weight:800;font-size:14.5px}
#reviews .description{font-size:15px;line-height:1.6}
#reviews .description p{margin:0 0 10px}
#review_form_wrapper{border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;background:var(--paper-2)}
#review_form_wrapper .comment-reply-title{font-size:18px;font-weight:800;display:block;margin-bottom:16px}
.comment-form-rating label{display:block;font-size:12.5px;font-weight:700;margin-bottom:8px}
.comment-form-rating .stars{display:flex;gap:6px;margin-bottom:18px}
.comment-form-rating .stars a{font-size:0;width:26px;height:26px;position:relative}
.comment-form-rating .stars a::before{content:"\2605";font-size:24px;color:var(--line);position:absolute;inset:0;line-height:1}
.comment-form-rating .stars a:hover::before,.comment-form-rating .stars.selected a.active::before{color:var(--accent-deep)}
.woocommerce-noreviews{font-size:15px;color:var(--slate);margin-bottom:26px}

/* Shop grid with no filter column takes the full width. */
.shop-layout--full{grid-template-columns:1fr}

/* Sale badge WooCommerce prints on its own in places we did not unhook. */
span.onsale{
  position:absolute;top:12px;left:12px;z-index:2;font-size:11px;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;background:var(--accent);color:var(--on-accent);
  padding:5px 10px;border-radius:100px;
}

/* WooCommerce screen-reader text and loaders */
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.blockUI.blockOverlay{background:#fff!important;opacity:.55!important}

/* Password-protected and login forms inherit the field styles */
.woocommerce-form-login,.woocommerce-form-register,.post-password-form{
  max-width:460px;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;
}
.woocommerce-form-login__rememberme{font-size:14px;font-weight:600;display:block;margin-bottom:14px}
.woocommerce-form-login .lost_password{font-size:13.5px;margin-top:14px}
.woocommerce-form-login .lost_password a{color:var(--accent-deep);font-weight:700}

/* =========================================================================
   12. HOMEPAGE — sections the front page adds on top of the shared kit
   ========================================================================= */

/* --- announcement strip: the brand green doing what it is good at --------
   Large flat fill, near-black type on top. 9.67:1. */
.ann{background:var(--accent);color:var(--on-accent);font-weight:700;font-size:14px}
.ann .wrap{display:flex;align-items:center;gap:12px;padding:11px 24px;flex-wrap:wrap}
.ann strong{font-weight:800}
.ann .icon{flex:none}
.ann a{
  margin-left:auto;white-space:nowrap;font-weight:800;
  border-bottom:2px solid rgba(16,17,18,.35);transition:border-color .15s;
}
.ann a:hover{border-color:var(--on-accent)}

/* --- section head with an action on the right --------------------------- */
.head--row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.head--row .eyebrow{margin-bottom:12px}

/* --- category tiles without a photograph -------------------------------
   Deliberately typographic rather than showing an unrelated stock-ish shot.
   The shoot does not cover these categories yet; when it does, name the file
   in front-page.php and the tile becomes a photo tile with no other change. */
.cat--type .cat-img--type{
  aspect-ratio:4/3;display:grid;place-items:center;
  background:var(--accent-wash);color:var(--accent-deep);
  border-bottom:1px solid var(--line);
}
.cat--type .cat-img--type .icon{width:34px;height:34px;stroke-width:1.4}
.cat--type:hover .cat-img--type{background:#F1FFC0}

/* --- promo banners ------------------------------------------------------ */
.bnr-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.bnr{
  position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:266px;
  display:flex;align-items:flex-end;isolation:isolate;
  transition:transform .18s ease, box-shadow .18s ease;
}
.bnr:hover{transform:translateY(-2px);box-shadow:var(--sh-3)}
.bnr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.bnr::after{content:"";position:absolute;inset:0;z-index:-1}
.bnr--dark::after{background:linear-gradient(180deg,rgba(14,16,19,.32) 0%,rgba(14,16,19,.93) 78%)}
.bnr--green::after{background:linear-gradient(180deg,rgba(16,17,18,.28) 0%,rgba(53,74,0,.94) 78%)}
.bnr-in{position:relative;padding:30px 32px 30px;color:#fff}
.bnr-kick{
  display:inline-block;font-size:11px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent);margin-bottom:11px;
}
.bnr h3{font-size:clamp(21px,2.3vw,27px);margin-bottom:9px}
.bnr p{font-size:15px;line-height:1.5;color:#D5DAD3;max-width:44ch}
.bnr-go{
  display:inline-flex;align-items:center;gap:6px;margin-top:16px;
  font-size:14.5px;font-weight:800;color:var(--accent);
}
.bnr:hover .bnr-go .icon{transform:translateX(3px)}
.bnr-go .icon{transition:transform .16s ease}

/* --- quote builder band ------------------------------------------------- */
.calc{background:var(--ink);color:#fff;padding:72px 0;overflow:hidden}
.calc-in{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.calc .h2{color:#fff}
.calc .lede{color:#A9B0BA}
.calc .eyebrow{color:var(--accent)}
.calc-list{list-style:none;margin:26px 0 30px;padding:0;font-size:15.5px}
.calc-list li{display:flex;gap:11px;padding:8px 0;align-items:flex-start;line-height:1.5}
.calc-list .icon{color:var(--accent);margin-top:4px}
.calc-shot{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-3)}
.calc-shot img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10}

/* --- full-bleed photo strip -------------------------------------------- */
.strip{position:relative;background:var(--ink);color:#fff;overflow:hidden;isolation:isolate}
.strip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.42}
.strip::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(14,16,19,.94) 0%,rgba(14,16,19,.72) 55%,rgba(14,16,19,.34) 100%);
}
.strip .wrap{position:relative;padding:96px 24px}
.strip-in{max-width:600px}
.strip h2{font-size:clamp(26px,3.4vw,40px);letter-spacing:-0.03em}
.strip p{margin-top:14px;font-size:17px;line-height:1.6;color:#C4CBD2;max-width:52ch}

/* --- find us ----------------------------------------------------------- */
.loc-nap{margin-top:24px;font-style:normal;font-size:16.5px;line-height:1.65}
.loc-nap strong{font-weight:800}

@media (max-width:1080px){
  .calc-in{grid-template-columns:1fr;gap:34px}
  .calc-shot{order:-1}
}
@media (max-width:820px){
  .bnr-grid{grid-template-columns:1fr}
  .strip .wrap{padding:64px 24px}
  .strip::after{background:linear-gradient(180deg,rgba(14,16,19,.86) 0%,rgba(14,16,19,.94) 100%)}
  .ann{font-size:13px}
  .ann a{margin-left:0}
  .head--row{align-items:flex-start}
}

/* =========================================================================
   13. 2026 STOREFRONT DIRECTION
   Wide, contractor-first commerce layout inspired by the discipline of large
   supply distributors. Brand assets, content, proportions and interactions
   remain specific to A+ Roofing Supply.
   ========================================================================= */
:root{--max:1480px}

.util{background:#171A20;color:#C7CBD1;font-size:12px}
.util .wrap{height:30px;gap:10px}
.util-links{display:flex;align-items:center;gap:0}
.util-links a{height:30px;padding:0 15px;border-left:1px solid rgba(255,255,255,.13)}
.util-links a:last-child{padding-right:0}

.hdr{background:#fff;backdrop-filter:none;border:0;box-shadow:0 1px 0 rgba(14,16,19,.12)}
.hdr-main .wrap{height:88px;gap:24px}
.brand-logo{display:flex;align-items:center;width:252px;height:78px;flex:0 0 252px;overflow:hidden}
.brand-logo img{width:100%;height:100%;object-fit:contain;object-position:left center}
.hdr-branch{display:flex;align-items:center;gap:9px;flex:none;padding-right:22px;border-right:1px solid var(--line);font-size:14px;font-weight:800;line-height:1.1}
.hdr-branch .icon{width:22px;height:22px;color:var(--accent-deep)}
.hdr-branch small{display:block;margin-bottom:4px;color:var(--slate-2);font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.hdr-main .aplus-search-form{max-width:none}
.hdr-main .aplus-search-form input{height:50px;padding-left:48px;background:#F5F6F4;border-color:#D7DAD4;border-radius:5px;font-size:15px}
.hdr-main .aplus-search-form svg{left:17px}
.hdr-cta{gap:14px}
.hdr-account{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:800}
.hdr-account .icon{width:21px;height:21px}
.hdr-phone{padding:0 4px}
.hdr-phone .num{font-size:17px}
.hdr-cart{border-radius:5px;background:#F5F6F4}

.supply-nav{background:#171A20;color:#fff}
.supply-nav .wrap{display:flex;align-items:center;min-height:52px;gap:0;overflow-x:auto;scrollbar-width:none}
.supply-nav .wrap::-webkit-scrollbar{display:none}
.supply-nav a{display:flex;align-items:center;align-self:stretch;padding:0 18px;white-space:nowrap;font-size:13.5px;font-weight:700;transition:background .15s,color .15s}
.supply-nav a:hover{background:#242831;color:#fff}
.supply-nav-all{gap:8px;background:var(--accent);color:var(--on-accent)!important;margin-right:8px}
.supply-nav-all:hover{background:var(--accent-hover)!important}
.supply-nav-trade{margin-left:auto;border-left:1px solid #343942;color:var(--accent)!important}

.ann{background:#F5FFD0;color:var(--accent-dark);border-bottom:1px solid #DFF58A;font-size:13.5px}
.ann .wrap{min-height:48px;padding-top:9px;padding-bottom:9px}

.hero.hero--supply{background:#fff;color:var(--ink);overflow:visible}
.hero.hero--supply > .wrap{padding-top:42px;padding-bottom:0}
.hero-shell{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));min-height:470px;background:#171A20;overflow:hidden}
.hero--supply .hero-in{display:flex;flex-direction:column;justify-content:center;max-width:none;padding:54px 56px;color:#fff}
.hero--supply .hero-media{position:relative;inset:auto;min-width:0}
.hero--supply .hero-media::after{display:none}
.hero--supply .hero-media img{width:100%;height:100%;object-fit:cover;object-position:center;opacity:1}
.hero--supply .hero-tag{align-self:flex-start;margin-bottom:21px;padding:0;border:0;border-radius:0;background:none;color:var(--accent);font-size:12px;letter-spacing:.025em}
.hero--supply h1{font-size:clamp(38px,3.4vw,50px);line-height:1.08;letter-spacing:-.035em}
.hero--supply h1 em{color:#fff}
.hero--supply .hero-sub{max-width:48ch;margin-top:19px;color:#D0D4D9;font-size:17px;line-height:1.55}
.hero--supply .hero-btns{margin-top:28px}
.hero--supply .btn{border-radius:4px}
.hero--supply .hero-note{margin-top:17px;color:#AEB4BC}
.hero--supply .hero-note a{color:#fff;font-weight:800}
.hero--supply .hero-stats{grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-top:0;background:#fff;color:var(--ink)}
.hero--supply .hero-stats > div{padding:21px 24px;border-right:1px solid var(--line)}
.hero--supply .hero-stats > div:last-child{border-right:0}
.hero--supply .hero-stats .n{color:var(--ink);font-size:22px}
.hero--supply .hero-stats .l{color:var(--slate);font-size:12.5px}

@media (max-width:1320px){
  .brand-logo{width:220px;flex-basis:220px}
  .hdr-branch{display:none}
  .supply-nav a{padding-left:14px;padding-right:14px}
}
@media (max-width:1080px){
  .hdr-account span{display:none}
  .hero-shell{grid-template-columns:1fr 1fr}
  .hero--supply .hero-in{padding:44px 40px}
  .supply-nav-trade{margin-left:0}
}
@media (max-width:860px){
  .util-links{display:none}
  .hdr-phone,.hdr-account{display:none}
  .burger{display:grid;place-items:center}
  .supply-nav{display:none}
  .hero.hero--supply > .wrap{padding-top:24px}
  .hero-shell{grid-template-columns:1fr}
  .hero--supply .hero-media{min-height:330px}
  .hero--supply .hero-in{padding:44px 36px}
  .hero--supply .hero-stats{grid-template-columns:repeat(2,1fr)}
  .hero--supply .hero-stats > div:nth-child(2){border-right:0}
  .hero--supply .hero-stats > div:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media (max-width:600px){
  .util .wrap{height:32px;font-size:11px;white-space:nowrap}
  .hdr-main .wrap{height:72px;gap:10px}
  .brand-logo{width:176px;height:62px;flex-basis:176px}
  .hdr-cta{margin-left:auto;gap:8px}
  .hdr-cart{width:40px;height:40px}
  .burger{width:40px;height:40px;padding:8px}
  .ann .wrap{min-height:0;padding-top:10px;padding-bottom:10px}
  .ann .icon,.ann a{display:none}
  .hero.hero--supply > .wrap{padding-left:0;padding-right:0;padding-top:0}
  .hero--supply .hero-in{padding:38px 22px 40px}
  .hero--supply h1{font-size:37px}
  .hero--supply .hero-sub{font-size:16px}
  .hero--supply .hero-btns{display:grid;grid-template-columns:1fr}
  .hero--supply .btn{width:100%}
  .hero--supply .hero-media{min-height:250px}
  .hero--supply .hero-stats{margin:0 18px}
  .hero--supply .hero-stats > div{padding:17px 14px}
  .hero--supply .hero-stats .n{font-size:19px}
}

/* =========================================================================
   14. PREMIUM MERCHANDISING LAYER
   Larger editorial typography, centered section introductions and clearer
   product information. Decorative motion stays restrained and functional.
   ========================================================================= */
.sec{padding-top:96px;padding-bottom:96px}
.sec--tight{padding-top:72px;padding-bottom:72px}
.h2{font-size:clamp(34px,3.4vw,48px);line-height:1.08;letter-spacing:-.04em}
.lede{font-size:18px;line-height:1.65}
.head{max-width:780px;margin:0 auto 52px;text-align:center}
.head .eyebrow{justify-content:center}
.head .lede{margin-left:auto;margin-right:auto}
.head--row{max-width:none;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:22px}
.head--row > div{max-width:780px}
.head--row .eyebrow{justify-content:center}
.eyebrow{font-size:11.5px;letter-spacing:.16em}

.cats{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.cat{border-radius:10px;border-color:#DDE0DA;box-shadow:0 8px 28px rgba(14,16,19,.055);transform:none}
.cat:hover{border-color:#AEB4AA;box-shadow:0 18px 42px rgba(14,16,19,.11);transform:translateY(-3px)}
.cat-img{aspect-ratio:16/10;background:#F3F4F1}
.cat-img img{object-fit:contain;padding:22px;transition:transform .35s ease}
.cat:hover .cat-img img{transform:scale(1.035)}
.cat-body{min-height:88px;padding:19px 20px 20px;align-items:center}
.cat-body h3{font-size:18px;line-height:1.25;letter-spacing:-.025em}
.cat-body .n{display:block;margin-top:6px;font-size:12px}
.cat-arrow,.brand-arrow{display:grid;place-items:center;width:38px;height:38px;flex:none;border:1px solid var(--line);border-radius:50%;color:var(--ink);transition:background .16s,color .16s,border-color .16s}
.cat:hover .cat-arrow,.brand:hover .brand-arrow{background:var(--ink);border-color:var(--ink);color:#fff}

.brands.brands--visual{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.brand.brand--visual{position:relative;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;align-items:center;justify-content:stretch;gap:0;min-height:0;padding:0;text-align:left;border-radius:10px;overflow:hidden;border-color:#DDE0DA;box-shadow:0 8px 28px rgba(14,16,19,.05)}
.brand.brand--visual:hover{border-color:#AEB4AA;box-shadow:0 18px 42px rgba(14,16,19,.1)}
.brand-photo{grid-column:1/-1;display:block;aspect-ratio:16/9;background:#F3F4F1;overflow:hidden;border-bottom:1px solid var(--line)}
.brand-photo img{width:100%;height:100%;object-fit:contain;padding:20px;transition:transform .35s ease}
.brand:hover .brand-photo img{transform:scale(1.04)}
.brand-copy{display:flex;flex-direction:column;gap:5px;padding:19px 0 20px 20px}
.brand.brand--visual .name{font-size:18px;line-height:1.15}
.brand.brand--visual .meta{font-size:12px}
.brand.brand--visual .brand-arrow{margin:0 18px 0 14px}

ul.products,.prods{gap:24px}
.prod{border-radius:10px;border-color:#DDE0DA;box-shadow:0 8px 28px rgba(14,16,19,.05);transform:none}
.prod:hover{border-color:#AEB4AA;box-shadow:0 20px 46px rgba(14,16,19,.11);transform:translateY(-3px)}
.prod-img{aspect-ratio:4/3;background:#F4F5F2}
.prod-img img{padding:26px;transition:transform .35s ease}
.prod:hover .prod-img img{transform:scale(1.035)}
.prod-flag{top:14px;left:14px;padding:6px 10px;border-radius:4px;font-size:10.5px}
.prod-body{padding:21px 22px 22px}
.prod-brand{margin-bottom:8px;color:var(--accent-deep);font-size:11.5px;letter-spacing:.12em}
.prod-name{font-size:17px;line-height:1.38;margin-bottom:11px}
.prod-sku{font-size:11.5px;margin-bottom:10px}
.prod-spec{min-height:19px;font-size:13px;margin-bottom:13px}
.prod-stock{margin-bottom:15px;font-size:12.5px}
.prod-foot{flex-direction:column;align-items:stretch;gap:17px;padding-top:17px;border-top:1px solid var(--line)}
.prod-price{min-height:45px}
.prod .price{font-size:25px}
.prod .add_to_cart_button,.prod .prod-call{width:100%;min-height:46px;border-radius:5px;font-size:14px}
.prod .prod-call{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 16px;background:#fff;color:var(--ink);border:1px solid var(--ink);font-weight:800}
.prod .prod-call:hover{background:var(--ink);color:#fff}
.prod-call-price{display:block;font-size:18px;font-weight:800;letter-spacing:-.02em}

.btn{border-radius:5px}
.btn--lg{padding:16px 27px}
.icon{stroke-width:1.6}

@media (max-width:1080px){
  .cats,.brands.brands--visual{grid-template-columns:repeat(2,minmax(0,1fr))}
  ul.products.columns-4,.prods{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:820px){
  .sec{padding-top:70px;padding-bottom:70px}
  .sec--tight{padding-top:54px;padding-bottom:54px}
  .head{margin-bottom:38px}
  ul.products.columns-4,.prods{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .h2{font-size:34px}
  .lede{font-size:16.5px}
  .cats,.brands.brands--visual,ul.products.columns-4,.prods{grid-template-columns:1fr}
  .cat-body h3,.brand.brand--visual .name{font-size:19px}
}

/* =========================================================================
   15. COMMERCE HOMEPAGE
   A clean retail system: large imagery, hard-working typography and real
   manufacturer marks. The earlier brochure sections are not used by the new
   homepage template.
   ========================================================================= */
:root{--max:1540px}

.hdr-main .wrap{height:92px;gap:32px}
.brand-logo{width:242px;height:76px;flex-basis:242px}
.hdr-main .aplus-search-form input{height:54px;border:1px solid #C9CDC7;background:#fff;padding-left:52px;font-size:16px}
.hdr-main .aplus-search-form input:focus{border-color:#11151A;box-shadow:0 0 0 1px #11151A}
.hdr-main .aplus-search-form svg{left:19px}
.hdr-phone .lbl{color:#69717A}
.supply-nav .wrap{min-height:54px}
.supply-nav a{font-size:14px;padding:0 22px}
.supply-nav-all{min-width:194px;justify-content:center}

.commerce-note{background:var(--accent-wash);border-bottom:1px solid #E1F39B;color:var(--accent-dark);font-size:13px;font-weight:750;letter-spacing:.005em}
.commerce-note .wrap{min-height:44px;display:flex;align-items:center;gap:0}
.commerce-note span{display:flex;align-items:center;white-space:nowrap}
.commerce-note span+span::before{content:"";width:3px;height:3px;margin:0 20px;border-radius:50%;background:var(--accent-mid)}
.commerce-note a{margin-left:auto;color:#11151A;font-weight:800;border-bottom:1px solid currentColor}

.store-hero{position:relative;min-height:680px;overflow:hidden;background:#15191D;color:#fff;isolation:isolate}
.store-hero__media{position:absolute;inset:0;z-index:-2}
.store-hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 46%}
.store-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(10,13,15,.94) 0%,rgba(10,13,15,.82) 39%,rgba(10,13,15,.30) 70%,rgba(10,13,15,.10) 100%)}
.store-hero__inner{min-height:680px;display:flex;align-items:center}
.store-hero__copy{width:min(720px,58vw);padding:76px 0}
.store-hero__eyebrow{margin-bottom:24px;color:var(--accent);font-size:13px!important;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.store-hero h1{max-width:11.5ch;font-size:clamp(52px,5.1vw,78px);line-height:.98;letter-spacing:-.052em}
.store-hero__copy>p:not(.store-hero__eyebrow){max-width:610px;margin-top:27px;color:#E2E5E7;font-size:20px;line-height:1.55}
.store-hero__actions{display:flex;align-items:center;gap:12px;margin-top:34px;flex-wrap:wrap}
.commerce-btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 29px;border:1px solid transparent;border-radius:2px;font-size:15px;font-weight:800;letter-spacing:-.012em;transition:background .16s,border-color .16s,color .16s}
.commerce-btn--green{background:var(--accent);color:var(--on-accent)}
.commerce-btn--green:hover{background:var(--accent-hover)}
.commerce-btn--glass{border-color:rgba(255,255,255,.50);background:rgba(10,13,15,.28);color:#fff}
.commerce-btn--glass:hover{border-color:#fff;background:#fff;color:#11151A}
.store-hero__links{display:flex;gap:26px;margin-top:32px;flex-wrap:wrap}
.store-hero__links a{color:#E9ECEE;font-size:13px;font-weight:750;border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:3px}
.store-hero__links a:hover{border-color:var(--accent);color:var(--accent)}

.commerce-section{padding:112px 0}
.commerce-section--brands{background:#F3F4F1;border-top:1px solid #E2E4DF;border-bottom:1px solid #E2E4DF}
.commerce-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:46px}
.commerce-heading p,.commerce-promo__copy>p{margin-bottom:13px;color:var(--accent-deep);font-size:12px;font-weight:850;letter-spacing:.15em;text-transform:uppercase}
.commerce-heading h2,.commerce-promo h2{max-width:820px;font-size:clamp(36px,3.7vw,56px);line-height:1.04;letter-spacing:-.046em}
.commerce-heading>a{margin-bottom:6px;padding-bottom:5px;border-bottom:2px solid #11151A;font-size:14px;font-weight:800;white-space:nowrap}
.commerce-heading>a:hover{border-color:var(--accent-deep);color:var(--accent-deep)}
.commerce-heading--center{justify-content:center;text-align:center}
.commerce-heading--center h2{max-width:none}

.commerce-categories{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.commerce-category{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:#22272B;color:#fff;isolation:isolate}
.commerce-category>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2;transform:scale(1.01);transition:transform .55s cubic-bezier(.2,.75,.25,1)}
.commerce-category:nth-child(2)>img,.commerce-category:nth-child(4)>img,.commerce-category:nth-child(6)>img{object-position:center 42%}
.commerce-category__shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(9,12,14,.05) 22%,rgba(9,12,14,.86) 100%)}
.commerce-category__copy{position:absolute;left:0;right:0;bottom:0;padding:31px 32px 29px}
.commerce-category__copy small{display:block;margin-bottom:8px;color:#D3DCDB;font-size:11px;font-style:normal;font-weight:750;letter-spacing:.12em;text-transform:uppercase}
.commerce-category__copy strong{display:block;font-size:clamp(22px,2vw,30px);line-height:1.1;letter-spacing:-.035em}
.commerce-category__copy em{display:inline-block;margin-top:14px;padding-bottom:3px;border-bottom:1px solid rgba(255,255,255,.55);font-size:13px;font-style:normal;font-weight:800}
.commerce-category__copy em span{display:inline-block;margin-left:8px;transition:transform .16s}
.commerce-category:hover>img{transform:scale(1.055)}
.commerce-category:hover .commerce-category__copy em span{transform:translateX(4px)}

.commerce-brands{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));background:#DADDDA;gap:1px;border:1px solid #DADDDA}
.commerce-brand{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:154px;padding:26px 24px 20px;background:#fff;transition:background .16s}
.commerce-brand img{display:block;max-width:154px;max-height:60px;width:auto;height:auto;object-fit:contain;filter:saturate(.92);transition:transform .2s,filter .2s}
.commerce-brand>span{color:#72787D;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.commerce-brand:hover{background:#FAFBF8}
.commerce-brand:hover img{transform:scale(1.035);filter:saturate(1.08)}

.commerce-section--products{background:#fff}
.commerce-section--products .commerce-heading{margin-bottom:38px}

.commerce-promo{padding:0;background:#13171B;color:#fff}
.commerce-promo>.wrap{display:grid;grid-template-columns:1.1fr .9fr;max-width:none;padding:0}
.commerce-promo__image{min-height:570px;overflow:hidden}
.commerce-promo__image img{width:100%;height:100%;object-fit:cover;object-position:center}
.commerce-promo__copy{display:flex;flex-direction:column;justify-content:center;padding:76px clamp(46px,6vw,106px)}
.commerce-promo__copy>p{color:var(--accent)}
.commerce-promo__copy>span{display:block;max-width:620px;margin-top:23px;color:#C9CED2;font-size:18px;line-height:1.65}
.commerce-text-link{color:#fff;font-size:14px;font-weight:650;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:4px}
.commerce-text-link strong{margin-left:6px}

.commerce-service{background:#fff;border-bottom:1px solid #E0E2DE}
.commerce-service .wrap{display:grid;grid-template-columns:repeat(3,1fr)}
.commerce-service .wrap>div{padding:34px 42px;border-right:1px solid #E0E2DE}
.commerce-service .wrap>div:first-child{border-left:1px solid #E0E2DE}
.commerce-service strong,.commerce-service span{display:block}
.commerce-service strong{font-size:16px;letter-spacing:-.02em}
.commerce-service span{margin-top:5px;color:#687079;font-size:13px}

@media (max-width:1180px){
  .commerce-categories{grid-template-columns:repeat(2,minmax(0,1fr))}
  .commerce-brands{grid-template-columns:repeat(4,minmax(0,1fr))}
  .store-hero{min-height:610px}
  .store-hero__inner{min-height:610px}
  .store-hero h1{font-size:clamp(48px,6vw,68px)}
}
@media (max-width:860px){
  .commerce-note span:nth-child(2),.commerce-note span:nth-child(3){display:none}
  .commerce-note a{font-size:12px}
  .store-hero,.store-hero__inner{min-height:580px}
  .store-hero::after{background:linear-gradient(90deg,rgba(10,13,15,.93),rgba(10,13,15,.56))}
  .store-hero__copy{width:min(680px,90%)}
  .commerce-section{padding:78px 0}
  .commerce-heading h2,.commerce-promo h2{font-size:40px}
  .commerce-promo>.wrap{grid-template-columns:1fr}
  .commerce-promo__image{min-height:390px}
  .commerce-promo__copy{padding:58px 30px 64px}
  .commerce-service .wrap>div{padding:28px 22px}
}
@media (max-width:600px){
  .hdr-main .wrap{height:74px}
  .brand-logo{width:170px;height:62px;flex-basis:170px}
  .commerce-note .wrap{min-height:40px;padding-left:18px;padding-right:18px}
  .commerce-note span{font-size:11.5px}
  .store-hero,.store-hero__inner{min-height:560px}
  .store-hero::after{background:linear-gradient(180deg,rgba(10,13,15,.48) 0%,rgba(10,13,15,.90) 70%,rgba(10,13,15,.96) 100%)}
  .store-hero__inner{align-items:flex-end;padding-left:20px;padding-right:20px}
  .store-hero__copy{width:100%;padding:48px 0}
  .store-hero__eyebrow{margin-bottom:17px;font-size:11px!important}
  .store-hero h1{max-width:12ch;font-size:43px;line-height:1.01}
  .store-hero__copy>p:not(.store-hero__eyebrow){margin-top:19px;font-size:16.5px;line-height:1.5}
  .store-hero__actions{display:grid;grid-template-columns:1fr;width:100%;margin-top:27px}
  .commerce-btn{width:100%;min-height:54px}
  .store-hero__links{display:none}
  .commerce-section{padding:64px 0}
  .commerce-heading{display:block;margin-bottom:30px}
  .commerce-heading h2,.commerce-promo h2{font-size:34px}
  .commerce-heading>a{display:inline-block;margin-top:22px}
  .commerce-categories{grid-template-columns:1fr;gap:12px}
  .commerce-category{aspect-ratio:4/3}
  .commerce-category__copy{padding:25px 24px}
  .commerce-category__copy strong{font-size:25px}
  .commerce-brands{grid-template-columns:repeat(2,minmax(0,1fr))}
  .commerce-brand{min-height:118px;padding:24px 18px}
  .commerce-brand img{max-width:124px;max-height:52px}
  .commerce-promo__image{min-height:270px}
  .commerce-promo__copy{padding:48px 22px 54px}
  .commerce-promo__copy>span{font-size:16px}
  .commerce-service .wrap{grid-template-columns:1fr}
  .commerce-service .wrap>div,.commerce-service .wrap>div:first-child{border-left:1px solid #E0E2DE;border-right:1px solid #E0E2DE;border-bottom:1px solid #E0E2DE}
}