/* ==========================================================================
CommsBuyer — Skin 2 "Scandi Workshop".
Warm-white throughout; graphite type; signal-yellow accent used sparingly
(primary CTAs + in-stock pills). Inter for everything, JetBrains Mono for
SKUs and spec data. Lots of whitespace, designed-object mood.
========================================================================== */
/* ---- self-hosted fonts (Inter v4 variable + JetBrains Mono webfont) ---- */
@font-face{
font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
src:url('../fonts/InterVariable.woff2') format('woff2-variations'),
url('../fonts/InterVariable.woff2') format('woff2');
}
@font-face{
font-family:'Inter';font-style:italic;font-weight:100 900;font-display:swap;
src:url('../fonts/InterVariable-Italic.woff2') format('woff2-variations'),
url('../fonts/InterVariable-Italic.woff2') format('woff2');
}
@font-face{
font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;
src:url('../fonts/JetBrainsMono-400.woff2') format('woff2');
}
@font-face{
font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;
src:url('../fonts/JetBrainsMono-500.woff2') format('woff2');
}
@font-face{
font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;
src:url('../fonts/JetBrainsMono-600.woff2') format('woff2');
}
:root{
/* surfaces */
--paper:#FAFAF7; /* page background — warm white */
--paper-2:#F2F0EA; /* slight panel tint (cards, footer band) */
--panel:#FFFFFF; /* pure white — product cards, forms */
/* text */
--ink:#161A1D; /* primary text + headings (graphite) */
--ink-2:#3A4048; /* secondary text */
--ink-3:#5E6470; /* tertiary / muted — darkened from #6B7280 to clear
WCAG AA contrast on small mono text against --paper */
/* borders */
--line:#E5E3DC; /* warm hairline */
--line-2:#C8C5BC; /* darker border on hover / focus */
/* accents */
--accent:#FFD400; /* signal yellow */
--accent-ink:#161A1D;/* type on yellow */
--good:#0E8A4E; /* in-stock green */
--danger:#B42318; /* error red */
/* type */
--font-display:'Inter',system-ui,sans-serif;
--font-body:'Inter',system-ui,sans-serif;
--font-mono:'JetBrains Mono',ui-monospace,monospace;
/* rhythm */
--radius:10px;
--radius-sm:6px;
}
/* ---- universal focus ring (accessibility) ------------------------------ */
/* Keyboard-only focus indicator on every interactive element. Browsers
only apply :focus-visible when keyboard navigation is detected, so
mouse clicks don't draw the ring. */
:where(a, button, input, select, textarea, summary, [role="button"]):focus-visible{
outline:2px solid var(--ink);
outline-offset:2px;
border-radius:var(--radius-sm);
}
/* Icon-only buttons (header toggles, modal closes) get a softer ring so
the outline doesn't overflow their small target. */
.cb-search-toggle:focus-visible,
.cb-mobile-toggle:focus-visible,
.cb-cookie-close:focus-visible,
.cb-exit-close:focus-visible,
.cb-mobile-drawer-close:focus-visible,
.cb-compare-remove:focus-visible{
outline:2px solid var(--accent-ink);
outline-offset:0;
background:var(--paper-2);
}
/* ---- base --------------------------------------------------------------- */
body,body.woocommerce,body.woocommerce-page{
background:var(--paper);color:var(--ink-2);
font-family:var(--font-body);font-size:15.5px;line-height:1.55;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
body a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-2);
text-underline-offset:3px;transition:color .15s;}
body a:hover{color:var(--accent-ink);text-decoration-color:var(--accent);}
h1,h2,h3,h4,h5,h6{color:var(--ink);font-family:var(--font-display);
letter-spacing:-.022em;font-weight:700;line-height:1.15;}
h1{font-size:clamp(40px,5.4vw,72px);font-weight:800;letter-spacing:-.035em;}
h2{font-size:clamp(28px,3.2vw,40px);font-weight:700;}
h3{font-size:22px;}
h4{font-size:17px;}
p,li,td,th,label{color:var(--ink-2);}
strong{color:var(--ink);}
.site-content,.col-full{max-width:1280px;}
.site,.site-content,.content-area,#content,
.storefront-full-width-content .site-main{background:var(--paper)!important;}
/* ===== UTILITY BAR + HEADER (light chrome) ============================== */
.cb-utility{background:var(--paper-2);border-bottom:1px solid var(--line);font-family:var(--font-mono);}
.cb-utility-inner{max-width:1280px;margin:0 auto;padding:0 28px;height:40px;
display:flex;align-items:center;justify-content:space-between;font-size:11.5px;}
.cb-utility-left span{color:var(--ink-3);margin-right:22px;}
.cb-utility-left span::before{content:"";display:inline-block;width:6px;height:6px;
border-radius:50%;background:var(--accent);margin-right:9px;vertical-align:middle;}
.cb-utility-right{color:var(--ink-2);}
.cb-utility-right a{color:var(--ink);text-decoration:none;font-weight:500;}
@media(max-width:782px){.cb-utility-left span:nth-child(n+2){display:none;}}
/* Header is a single grid row: [logo + tagline] [nav centred] [cart].
The Storefront secondary-row container is collapsed in PHP (see
inc/setup.php) so every header element sits inside this one .col-full. */
.site-header{background:var(--paper)!important;border-bottom:1px solid var(--line);
transition:box-shadow .2s;padding:0!important;}
.site-header.cb-scrolled{box-shadow:0 1px 0 var(--line),0 12px 28px -22px rgba(22,26,29,.18);}
.site-header *,.site-header .site-title a{color:var(--ink)!important;}
/* Desktop grid: branding | nav | search-toggle | cart | account.
DOM order matches column order (hooks at 20/50/55/60/65) so no
grid-auto-flow:dense needed. Branding column capped at 320px so a
long tagline can't push the row into a second line. */
.site-header > .col-full{
display:grid;grid-template-columns:minmax(220px,320px) 1fr auto auto auto;
align-items:center;column-gap:24px;
max-width:1280px;margin:0 auto;padding:14px 28px;}
/* Storefront's WooCommerce-active layout floats every header item with
fixed percentage widths (.site-branding 73.9%, .main-navigation 73.9%,
.site-header-cart 21.7%). In a grid container floats are ignored, but
the fixed widths still apply and squash items into the wrong columns.
We hard-override width + float on every grid child AND pin each to an
explicit column so the layout is deterministic regardless of cascade. */
.site-header .site-branding{display:flex;flex-direction:column;gap:4px;
grid-column:1;width:auto!important;float:none!important;clear:none!important;
margin:0!important;padding:0!important;}
.cb-logo{display:inline-flex;align-items:center;text-decoration:none!important;}
.cb-logo img{height:36px;width:auto;display:block;
/* the bundled logo is white-on-dark; invert so it reads on warm white */
filter:invert(1) hue-rotate(180deg) brightness(.95);}
.cb-tagline{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-3);
margin:0;letter-spacing:.01em;line-height:1.3;}
@media(max-width:480px){.cb-logo img{height:30px;}.cb-tagline{font-size:10.5px;}}
/* Primary nav: centred horizontal flex list of the assigned menu only.
Storefront emits a fallback wp_page_menu() inside .main-navigation when
it can't decide; we suppress it so only the explicitly-assigned primary
menu items appear. */
.site-header .main-navigation{margin:0!important;padding:0!important;
width:auto!important;float:none!important;clear:none!important;
grid-column:2;justify-self:center;border:0!important;}
.site-header .main-navigation .menu-toggle{display:none!important;}
.site-header .main-navigation > .menu{display:none!important;}
.site-header .main-navigation .primary-navigation,
.site-header .main-navigation .primary-navigation > ul{margin:0;padding:0;}
.site-header .main-navigation .primary-navigation > ul{
display:flex;align-items:center;gap:32px;list-style:none;}
.site-header .main-navigation .primary-navigation > ul > li{margin:0;padding:0;}
.main-navigation ul li a{color:var(--ink)!important;font-family:var(--font-display);
font-weight:500;font-size:14px;letter-spacing:0;text-transform:none;
text-decoration:none;padding:8px 0;display:inline-block;}
.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item a{color:var(--ink)!important;
text-decoration:underline;text-decoration-color:var(--accent);
text-decoration-thickness:2px;text-underline-offset:6px;}
/* Cart in column 4 of the grid. We only render the cart-link
; the
mini-cart widget
(Storefront's hover preview) is hidden because it
expands inline when items are present and blows the grid out. The cart
link itself still goes to /cart/. */
.site-header #site-header-cart.site-header-cart{margin:0!important;padding:0!important;
width:auto!important;float:none!important;clear:none!important;
grid-column:4;justify-self:end;
list-style:none;display:flex;align-items:center;gap:14px;}
.site-header #site-header-cart li{margin:0;padding:0;list-style:none;}
/* Mini-cart popover — Storefront's widget_shopping_cart
is shown as
an absolutely positioned dropdown that fades in on cart-link hover,
instead of taking inline space in the header grid. */
.site-header #site-header-cart{position:relative;}
.site-header #site-header-cart > li + li{
position:absolute;top:calc(100% + 8px);right:0;z-index:5000;
width:320px;background:var(--panel);border:1px solid var(--line);
border-radius:var(--radius);box-shadow:0 24px 48px -16px rgba(22,26,29,.3);
opacity:0;visibility:hidden;transform:translateY(-4px);
transition:opacity .15s,transform .15s,visibility 0s linear .15s;
pointer-events:none;}
.site-header #site-header-cart:hover > li + li,
.site-header #site-header-cart > li + li:hover,
.site-header #site-header-cart > li + li:focus-within{
opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;
transition:opacity .15s,transform .15s,visibility 0s;}
.site-header #site-header-cart .widget_shopping_cart{padding:16px;font-size:13.5px;}
.site-header #site-header-cart .widget_shopping_cart h2{display:none;}
.site-header #site-header-cart .woocommerce-mini-cart{margin:0 0 12px;padding:0;list-style:none;
max-height:280px;overflow-y:auto;}
.site-header #site-header-cart .woocommerce-mini-cart__total{
font-family:var(--font-display);font-weight:700;color:var(--ink);
padding:10px 0;border-top:1px solid var(--line);margin:0;}
.site-header #site-header-cart .woocommerce-mini-cart__buttons{
display:flex;flex-direction:column;gap:8px;margin:10px 0 0;padding:0;}
.site-header #site-header-cart .woocommerce-mini-cart__buttons .button{
display:block;text-align:center;padding:10px 16px;font-size:13px;}
.site-header #site-header-cart .woocommerce-mini-cart__empty-message{
font-size:13px;color:var(--ink-3);text-align:center;padding:20px 0;margin:0;}
.site-header-cart .cart-contents{color:var(--ink)!important;font-weight:500;
font-family:var(--font-mono);font-size:13px;text-decoration:none;
display:inline-flex;align-items:center;gap:8px;white-space:nowrap;}
.site-header-cart .cart-contents .count{color:var(--ink-3)!important;}
.site-header-cart .cart-contents .woocommerce-Price-amount{
font-family:var(--font-mono);font-weight:600;color:var(--ink)!important;}
/* Search toggle button — column 3 of the header grid. */
.cb-search-toggle,.cb-mobile-toggle{
appearance:none;background:transparent;border:0;cursor:pointer;
color:var(--ink);padding:8px;border-radius:var(--radius-sm);
display:inline-flex;align-items:center;justify-content:center;
transition:background .15s;}
.cb-search-toggle:hover,.cb-mobile-toggle:hover{background:var(--paper-2);}
.cb-search-toggle{grid-column:3;}
/* Hamburger button — shown only on mobile via media query below. */
.cb-mobile-toggle{display:none;}
/* Search panel — drops down beneath the header when toggled. */
.cb-search-panel{background:var(--paper-2);border-bottom:1px solid var(--line);
animation:cb-search-in .2s ease;}
.cb-search-panel[hidden]{display:none;}
.cb-search-panel-inner{max-width:1280px;margin:0 auto;padding:18px 28px;
display:flex;gap:14px;align-items:center;}
.cb-search-panel form{flex:1;display:flex;gap:10px;}
.cb-search-panel input[type=search]{flex:1;padding:13px 16px;font-size:15px;
background:var(--panel)!important;color:var(--ink)!important;
border:1px solid var(--line-2)!important;border-radius:var(--radius-sm)!important;}
.cb-search-panel input[type=search]:focus{outline:0;border-color:var(--ink)!important;
box-shadow:0 0 0 3px rgba(255,212,0,.32)!important;}
.cb-search-panel .screen-reader-text{position:absolute;left:-9999px;}
.cb-search-close{appearance:none;background:transparent;border:0;cursor:pointer;
font-size:28px;line-height:1;color:var(--ink-3);padding:4px 10px;
border-radius:var(--radius-sm);}
.cb-search-close:hover{color:var(--ink);background:var(--panel);}
@keyframes cb-search-in{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:translateY(0);}}
/* Account link — sits to the right of the cart in column 5 of the header
grid. Same visual treatment as the cart-contents link so the two read
as a pair of header actions. */
.site-header .cb-account-link{grid-column:5;justify-self:end;
display:inline-flex;align-items:center;gap:8px;
font-family:var(--font-mono);font-size:13px;font-weight:500;
color:var(--ink)!important;text-decoration:none!important;
white-space:nowrap;}
.site-header .cb-account-link:hover{color:var(--ink)!important;}
.site-header .cb-account-link:hover .cb-account-label{
text-decoration:underline;text-decoration-color:var(--accent);
text-decoration-thickness:2px;text-underline-offset:4px;}
.cb-account-icon{flex:0 0 auto;}
/* On narrow widths drop the label, keep the icon — saves a row break. */
@media (max-width:980px){
.site-header .cb-account-label{display:none;}
}
/* Bits we don't want in the new layout */
.site-header .site-search,
.site-header .secondary-navigation{display:none!important;}
/* Mobile (≤ 780px): hamburger replaces the centred desktop nav, search
toggle is hidden (search lives inside the drawer), single-row layout. */
@media(max-width:780px){
.site-header > .col-full{grid-template-columns:auto 1fr auto auto;
column-gap:10px;padding:14px 18px;}
.cb-mobile-toggle{display:inline-flex;grid-column:1;}
.site-header .site-branding{grid-column:2;}
.cb-logo img{height:30px;}
.cb-tagline{display:none;}
.site-header .main-navigation{display:none;}
.cb-search-toggle{display:none;}
.site-header #site-header-cart.site-header-cart{grid-column:3;}
.site-header .cb-account-link{grid-column:4;}
}
/* ===== MOBILE NAVIGATION DRAWER ======================================== */
.cb-mobile-drawer{position:fixed;inset:0;z-index:9300;display:flex;}
.cb-mobile-drawer[hidden]{display:none;}
.cb-mobile-drawer-backdrop{position:absolute;inset:0;background:rgba(22,26,29,.55);}
.cb-mobile-drawer-panel{position:relative;background:var(--panel);
width:min(340px,90vw);height:100vh;overflow-y:auto;padding:22px 22px 28px;
display:flex;flex-direction:column;gap:18px;
animation:cb-drawer-in .25s cubic-bezier(.2,.7,.2,1.1);
box-shadow:0 0 60px rgba(22,26,29,.25);}
@keyframes cb-drawer-in{from{transform:translateX(-100%);}to{transform:translateX(0);}}
.cb-mobile-drawer-head{display:flex;align-items:center;justify-content:space-between;
padding-bottom:14px;border-bottom:1px solid var(--line);}
.cb-mobile-drawer-title{font-family:var(--font-mono);font-size:11.5px;font-weight:500;
letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);}
.cb-mobile-drawer-close{appearance:none;background:transparent;border:0;
font-size:32px;line-height:1;color:var(--ink-3);padding:0 6px;cursor:pointer;
border-radius:var(--radius-sm);}
.cb-mobile-drawer-close:hover{color:var(--ink);background:var(--paper-2);}
.cb-mobile-drawer-search form{display:flex;gap:0;}
.cb-mobile-drawer-search input[type=search]{width:100%;padding:12px 14px;
background:var(--paper-2);color:var(--ink);
border:1px solid var(--line-2);border-radius:var(--radius-sm);
font-family:var(--font-body);font-size:14.5px;}
.cb-mobile-drawer-search button[type=submit]{display:none;} /* enter to submit */
.cb-mobile-drawer-menu{list-style:none;padding:0;margin:0;
display:flex;flex-direction:column;}
.cb-mobile-drawer-menu li{margin:0;padding:0;list-style:none;}
.cb-mobile-drawer-menu a{display:block;padding:14px 4px;
font-family:var(--font-display);font-size:16px;font-weight:500;
color:var(--ink);text-decoration:none;
border-bottom:1px solid var(--line);}
.cb-mobile-drawer-menu a:hover,
.cb-mobile-drawer-menu .current-menu-item a{color:var(--ink);
text-decoration:underline;text-decoration-color:var(--accent);
text-decoration-thickness:2px;text-underline-offset:5px;}
.cb-mobile-drawer-foot{display:flex;flex-direction:column;gap:10px;
margin-top:auto;padding-top:18px;border-top:1px solid var(--line);}
.cb-mobile-drawer-foot .cb-btn{justify-content:center;padding:13px 18px;}
/* ===== FOOTER (light tinted band, two-column link list) ================ */
.site-footer{background:var(--paper-2)!important;border-top:1px solid var(--line);
color:var(--ink-2);padding-top:0;}
.site-footer *,.site-footer a,.site-footer li,.site-footer p{color:var(--ink-2);}
.site-footer a{text-decoration-color:var(--line-2);}
.site-footer a:hover{color:var(--ink);text-decoration-color:var(--accent);}
.site-footer .widget-title,.site-footer h1,.site-footer h2,.site-footer h3{
color:var(--ink)!important;font-family:var(--font-display);font-weight:600;}
/* Column block — Company on the left (1fr), Legal on the right (2fr) so
the wider Legal column can split its links into two sub-columns. Stacks
to a single column under 720px. */
.cb-foot-cols{max-width:1280px;margin:0 auto;padding:48px 28px 32px;
display:grid;grid-template-columns:1fr 2fr;gap:48px;}
.cb-foot-col h5.cb-foot-head{font-family:var(--font-display);font-weight:600;font-size:13px;
letter-spacing:.08em;text-transform:uppercase;color:var(--ink);
margin:0 0 18px;padding-bottom:14px;border-bottom:1px solid var(--line);}
.cb-foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.cb-foot-col li{margin:0;padding:0;}
.cb-foot-col a{color:var(--ink-2);text-decoration:none;font-size:14px;
display:inline-block;transition:color .15s;}
.cb-foot-col a:hover{color:var(--ink);text-decoration:underline;
text-decoration-color:var(--accent);text-decoration-thickness:2px;
text-underline-offset:4px;}
/* Split column: the
becomes a two-column layout so 8 links land as
4 + 4. `break-inside:avoid` keeps each
in one column. */
.cb-foot-col--split ul{display:block;column-count:2;column-gap:48px;}
.cb-foot-col--split li{break-inside:avoid;margin-bottom:10px;}
.cb-foot-col--split li:last-child{margin-bottom:0;}
@media (max-width:720px){
.cb-foot-cols{grid-template-columns:1fr;gap:32px;}
.cb-foot-col--split ul{column-count:1;}
}
/* Slim credit row */
.commsbuyer-credit{max-width:1280px;margin:0 auto;padding:22px 28px 32px;
display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
font-family:var(--font-mono);font-size:11.5px;color:var(--ink-3);
border-top:1px solid var(--line);}
.commsbuyer-credit a{color:var(--ink-2);text-decoration:none;}
.commsbuyer-credit a:hover{color:var(--ink);text-decoration:underline;
text-decoration-color:var(--accent);}
.cb-credit-meta{color:var(--ink-3);}
/* ===== SHARED — buttons, eyebrow, pills ================================ */
.cb-eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;
text-transform:uppercase;color:var(--ink-3);display:inline-flex;align-items:center;
gap:11px;margin-bottom:18px;}
.cb-eyebrow::before{content:"";width:24px;height:1px;background:var(--ink-3);}
.cb-btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);
font-weight:600;font-size:14px;letter-spacing:0;text-transform:none;text-decoration:none;
padding:14px 26px;border-radius:var(--radius-sm);border:1px solid transparent;
transition:transform .15s,box-shadow .15s,background .15s,border-color .15s;cursor:pointer;}
.cb-btn--primary,.cb-btn--amber{background:var(--accent);color:var(--accent-ink);
box-shadow:0 1px 0 rgba(22,26,29,.05),0 8px 20px -10px rgba(255,212,0,.55);}
.cb-btn--primary:hover,.cb-btn--amber:hover{background:#FFDA1F;color:var(--accent-ink);
transform:translateY(-1px);box-shadow:0 1px 0 rgba(22,26,29,.05),0 14px 24px -10px rgba(255,212,0,.6);}
.cb-btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-2);}
.cb-btn--ghost:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-1px);}
/* WooCommerce buttons routed through the same look */
.woocommerce a.button,.woocommerce button.button,
.woocommerce input.button,.woocommerce #respond input#submit,
.woocommerce a.button.alt,.woocommerce button.button.alt,
.woocommerce-page a.button,.woocommerce-page button.button{
background:var(--accent)!important;color:var(--accent-ink)!important;
font-family:var(--font-display)!important;font-weight:600!important;
text-transform:none!important;letter-spacing:0!important;
border:1px solid var(--accent)!important;border-radius:var(--radius-sm)!important;
box-shadow:0 1px 0 rgba(22,26,29,.05),0 8px 20px -10px rgba(255,212,0,.55);transition:.15s;}
.woocommerce a.button:hover,.woocommerce button.button:hover,
.woocommerce input.button:hover,.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover{
background:#FFDA1F!important;border-color:#FFDA1F!important;transform:translateY(-1px);}
.woocommerce a.button.wc-backward,
.woocommerce .cart .button[name="update_cart"]{
background:var(--panel)!important;color:var(--ink)!important;
border:1px solid var(--line-2)!important;box-shadow:none;}
/* ===== HERO ============================================================ */
.cb-hero{border-bottom:1px solid var(--line);background:var(--paper);overflow:hidden;}
.cb-hero-inner{max-width:1280px;margin:0 auto;padding:20px 28px 56px;
display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center;}
.cb-hero-copy h1{font-size:clamp(44px,5.6vw,76px);font-weight:800;line-height:.98;
letter-spacing:-.038em;margin:18px 0 22px;color:var(--ink);}
.cb-hero-copy h1 em{font-style:normal;display:block;color:var(--ink-3);
font-weight:500;font-size:.78em;letter-spacing:-.025em;margin-top:6px;}
.cb-hero-copy h1 mark{background:linear-gradient(transparent 62%,var(--accent) 62%,var(--accent) 92%,transparent 92%);
color:var(--ink);padding:0 .04em;}
.cb-hero-copy p{font-size:17px;line-height:1.55;max-width:520px;margin-bottom:32px;color:var(--ink-2);}
.cb-hero-cta{display:flex;gap:12px;flex-wrap:wrap;}
.cb-hero-stats{display:grid;grid-template-columns:repeat(4,auto);gap:40px;
margin-top:48px;padding-top:30px;border-top:1px solid var(--line);}
.cb-hero-stats .cb-n{font-family:var(--font-display);font-weight:700;font-size:30px;
color:var(--ink);display:block;line-height:1;letter-spacing:-.02em;}
.cb-hero-stats .cb-l{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.05em;
text-transform:uppercase;color:var(--ink-3);margin-top:9px;display:block;}
.cb-hero-fig{position:relative;display:flex;align-items:center;justify-content:center;
min-height:420px;border-radius:var(--radius);background:var(--paper-2);
border:1px solid var(--line);overflow:hidden;}
.cb-hero-glow{display:none;}
.cb-hero-fig .cb-cabinet-svg{width:280px;position:relative;z-index:2;
filter:drop-shadow(0 28px 38px rgba(22,26,29,.18));}
/* Hero carousel — N slides stacked, each fades in for its 1/N window of
a (5s * N) cycle. Pure CSS, no JS. Pauses on hover. The --n var (set on
the wrapper) drives the total duration; --i (set per slide) drives the
per-slide animation-delay. */
.cb-carousel{position:relative;width:100%;min-height:380px;
display:flex;align-items:stretch;justify-content:stretch;}
.cb-carousel:hover .cb-carousel-slide{animation-play-state:paused;}
/* Flex column with fixed-pixel image height — no percentage-height chain
to break. Each slide owns the full carousel box (absolute, inset:0). */
.cb-carousel-slide{position:absolute;inset:0;
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:14px;padding:20px;
text-decoration:none;opacity:0;pointer-events:none;
animation:cb-carousel-fade calc(var(--n,5) * 5s) infinite;
animation-delay:calc(var(--i,0) * 5s);
animation-fill-mode:backwards;}
.cb-carousel-fig{display:flex;align-items:center;justify-content:center;
flex:0 0 auto;width:100%;}
.cb-carousel-fig .cb-cabinet-svg,
.cb-carousel-fig .cb-carousel-svg .cb-cabinet-svg{
height:240px;width:auto;max-width:200px;
filter:drop-shadow(0 22px 32px rgba(22,26,29,.18));}
.cb-carousel-fig .cb-carousel-img{max-width:320px;max-height:360px;
width:auto;height:auto;object-fit:contain;
filter:drop-shadow(0 22px 32px rgba(22,26,29,.18));}
.cb-carousel-meta{display:flex;flex-direction:column;gap:6px;align-items:center;
text-align:center;max-width:300px;}
.cb-carousel-title{font-family:var(--font-display);font-weight:600;font-size:13.5px;
color:var(--ink);line-height:1.35;letter-spacing:-.005em;
text-decoration:none;}
.cb-carousel-price{font-family:var(--font-display);font-weight:700;font-size:17px;
color:var(--ink);letter-spacing:-.015em;text-decoration:none;}
.cb-carousel-price del{color:var(--ink-3);font-weight:400;font-size:12.5px;margin-right:6px;
text-decoration:line-through;}
.cb-carousel-price ins{text-decoration:none;}
/* Slide is an anchor — kill the default underline that would draw through
the title and price. */
.cb-carousel-slide,
.cb-carousel-slide *{text-decoration:none!important;}
/* pointer-events steps with opacity — only the currently-visible slide
receives clicks, so the link lands on the product you actually see
rather than whichever slide happens to be top of the absolute stack. */
@keyframes cb-carousel-fade{
0% {opacity:0;transform:translateY(8px);pointer-events:none;}
4% {opacity:1;transform:translateY(0);pointer-events:auto;}
16% {opacity:1;transform:translateY(0);pointer-events:auto;}
20% {opacity:0;transform:translateY(-8px);pointer-events:none;}
100% {opacity:0;pointer-events:none;}
}
@media (prefers-reduced-motion:reduce){
.cb-carousel-slide{animation:none;opacity:1;}
.cb-carousel-slide ~ .cb-carousel-slide{display:none;}
}
/* Marquee — slim, mono, restrained (no rotating yellow band) */
.cb-marquee{background:var(--paper);border-top:1px solid var(--line);
border-bottom:1px solid var(--line);overflow:hidden;}
.cb-marquee-track{display:flex;white-space:nowrap;animation:cb-scroll 38s linear infinite;}
.cb-marquee-track span{font-family:var(--font-mono);font-weight:500;font-size:11.5px;
text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);padding:14px 0;
display:flex;align-items:center;}
.cb-marquee-track span::after{content:"";width:4px;height:4px;background:var(--accent);
border-radius:50%;margin:0 28px;}
@keyframes cb-scroll{to{transform:translateX(-50%);}}
/* USP band — flat, no borders between cells, lots of breathing */
.cb-usp{background:var(--paper);}
.cb-usp-inner{max-width:1280px;margin:0 auto;padding:80px 28px;
display:grid;grid-template-columns:repeat(4,1fr);gap:48px;}
.cb-u{padding:0;}
.cb-u h5{font-family:var(--font-display);font-weight:600;font-size:16px;
color:var(--ink);margin-bottom:10px;letter-spacing:-.01em;}
.cb-u h5::before{content:"";display:block;width:28px;height:2px;background:var(--accent);
margin-bottom:18px;}
.cb-u p{font-size:14.5px;color:var(--ink-2);line-height:1.55;}
/* Trade band — slim, single-row callout */
.cb-trade{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.cb-trade-inner{max-width:1280px;margin:0 auto;padding:64px 28px;
display:flex;align-items:center;justify-content:space-between;gap:48px;}
.cb-trade h2{font-size:clamp(28px,3vw,38px);font-weight:700;letter-spacing:-.025em;
max-width:680px;color:var(--ink);line-height:1.1;}
.cb-trade h2 mark{background:linear-gradient(transparent 60%,var(--accent) 60%,var(--accent) 92%,transparent 92%);
color:var(--ink);padding:0 .04em;}
.cb-trade p{font-size:15px;max-width:560px;margin-top:14px;color:var(--ink-2);}
.cb-section-title{max-width:1280px;margin:80px auto 28px;padding:0 28px;
font-size:clamp(24px,2.6vw,32px);font-weight:700;letter-spacing:-.025em;color:var(--ink);}
/* ===== "THE COMMSBUYER EDGE" — three feature cards ====================== */
.cb-edge{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.cb-edge-inner{max-width:1280px;margin:0 auto;padding:80px 28px;text-align:center;}
.cb-edge-inner .cb-eyebrow{display:inline-flex;justify-content:center;margin-bottom:16px;}
.cb-edge-title{font-size:clamp(30px,3.4vw,44px);font-weight:800;letter-spacing:-.03em;
color:var(--ink);margin:0 0 12px;line-height:1.1;}
.cb-edge-title em{font-style:italic;font-weight:800;color:var(--ink);
background:linear-gradient(transparent 60%,var(--accent) 60%,var(--accent) 92%,transparent 92%);
padding:0 .08em;}
.cb-edge-intro{font-size:16px;color:var(--ink-2);max-width:620px;margin:0 auto 48px;line-height:1.55;}
.cb-edge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;text-align:left;}
.cb-edge-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
padding:36px 32px;transition:transform .2s,box-shadow .2s,border-color .2s;}
.cb-edge-card:hover{transform:translateY(-3px);border-color:var(--line-2);
box-shadow:0 1px 0 var(--line),0 24px 38px -22px rgba(22,26,29,.22);}
.cb-edge-icon{display:inline-flex;align-items:center;justify-content:center;
width:56px;height:56px;border-radius:12px;background:var(--paper-2);
color:var(--ink);margin-bottom:22px;}
.cb-edge-icon svg{width:28px;height:28px;}
.cb-edge-card h3{font-size:19px;font-weight:700;color:var(--ink);margin:0 0 10px;letter-spacing:-.015em;}
.cb-edge-card p{font-size:14.5px;color:var(--ink-2);line-height:1.6;margin:0;}
@media (max-width:980px){.cb-edge-grid{grid-template-columns:1fr;}.cb-edge-inner{padding:64px 28px;}}
/* ===== "CONTACT US" ===================================================== */
.cb-contact{background:var(--paper);border-bottom:1px solid var(--line);}
.cb-contact-inner{max-width:1280px;margin:0 auto;padding:80px 28px;}
.cb-contact-head{text-align:center;max-width:680px;margin:0 auto 48px;}
.cb-contact-head .cb-eyebrow{display:inline-flex;justify-content:center;margin-bottom:16px;}
.cb-contact-head h2{font-size:clamp(30px,3.4vw,44px);font-weight:800;letter-spacing:-.03em;
color:var(--ink);margin:0 0 14px;line-height:1.1;}
.cb-contact-head p{font-size:16px;color:var(--ink-2);line-height:1.55;margin:0;}
.cb-contact-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:32px;align-items:stretch;}
.cb-contact-card,.cb-contact-ctas{background:var(--panel);border:1px solid var(--line);
border-radius:var(--radius);padding:36px 36px 32px;}
.cb-contact-card h3,.cb-contact-ctas h3{font-size:18px;font-weight:700;color:var(--ink);
margin:0 0 22px;padding-bottom:16px;border-bottom:1px solid var(--line);letter-spacing:-.015em;}
.cb-contact-list{margin:0;padding:0;}
.cb-contact-list > div{display:grid;grid-template-columns:160px 1fr;gap:24px;
padding:12px 0;border-bottom:1px solid var(--line);align-items:start;}
.cb-contact-list > div:last-child{border-bottom:0;}
.cb-contact-list dt{font-family:var(--font-mono);font-size:11.5px;font-weight:500;
text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);margin:0;padding-top:2px;}
.cb-contact-list dd{margin:0;font-size:14.5px;color:var(--ink);line-height:1.55;}
.cb-contact-list dd a{color:var(--ink);text-decoration:underline;
text-decoration-color:var(--line-2);text-underline-offset:3px;}
.cb-contact-list dd a:hover{text-decoration-color:var(--accent);}
.cb-contact-muted{color:var(--ink-3);font-size:13px;}
.cb-contact-link{font-family:var(--font-mono);font-size:12.5px;font-weight:500;
text-transform:uppercase;letter-spacing:.05em;display:inline-block;margin-top:6px;}
.cb-contact-ctas{display:flex;flex-direction:column;gap:12px;}
.cb-contact-ctas .cb-btn{justify-content:center;}
.cb-contact-meta{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-3);
text-align:center;margin:14px 0 0;letter-spacing:.02em;}
@media (max-width:780px){
.cb-contact-grid{grid-template-columns:1fr;}
.cb-contact-list > div{grid-template-columns:1fr;gap:4px;}
.cb-contact-card,.cb-contact-ctas{padding:28px 24px;}
.cb-contact-inner{padding:64px 22px;}
}
/* ===== SHOP — product grid ============================================== */
.woocommerce .page-title,.woocommerce-products-header__title{
font-size:clamp(32px,3.4vw,44px);font-weight:700;color:var(--ink);letter-spacing:-.025em;}
.woocommerce .woocommerce-breadcrumb{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-3);}
.woocommerce .woocommerce-breadcrumb a{color:var(--ink-2);text-decoration:none;}
.woocommerce .woocommerce-breadcrumb a:hover{color:var(--ink);text-decoration:underline;
text-decoration-color:var(--accent);}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s;
padding:0;margin-bottom:22px;}
.woocommerce ul.products li.product:hover{
transform:translateY(-4px);border-color:var(--line-2);
box-shadow:0 1px 0 var(--line),0 24px 38px -22px rgba(22,26,29,.22);}
.woocommerce ul.products li.product a img,.cb-svg-thumb{
margin:0;border-bottom:1px solid var(--line);background:var(--paper-2);}
.cb-svg-thumb{display:flex;align-items:center;justify-content:center;min-height:220px;
padding:32px;position:relative;}
.cb-svg-thumb .cb-cabinet-svg{width:112px;
filter:drop-shadow(0 14px 18px rgba(22,26,29,.18));transition:transform .25s;}
.woocommerce ul.products li.product:hover .cb-cabinet-svg{transform:scale(1.04);}
.cb-svg-thumb--single .cb-cabinet-svg{width:260px;}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
font-family:var(--font-body)!important;font-weight:500;font-size:14.5px;
color:var(--ink)!important;padding:18px 20px 0;line-height:1.4;letter-spacing:-.005em;}
.woocommerce ul.products li.product .price{
color:var(--ink)!important;font-family:var(--font-display);font-weight:700;
font-size:20px;padding:6px 20px 0;display:block;letter-spacing:-.015em;}
.woocommerce ul.products li.product .price del{
color:var(--ink-3)!important;font-weight:400;font-size:13px;font-family:var(--font-mono);}
.woocommerce ul.products li.product .price ins{text-decoration:none;}
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart{
margin:16px 20px 20px;display:block;text-align:center;}
/* U-size badge on product card */
.cb-u-badge{position:absolute;top:14px;right:14px;font-family:var(--font-mono);
font-size:10.5px;font-weight:600;color:var(--ink);border:1px solid var(--line-2);
background:var(--panel);padding:4px 8px;border-radius:var(--radius-sm);z-index:3;
letter-spacing:.05em;}
/* In-stock pill (now yellow signal, not green pip — matches accent system) */
.cb-stock-pip{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);
font-size:11.5px;font-weight:500;color:var(--ink);padding:10px 20px 0;
text-transform:uppercase;letter-spacing:.05em;}
.cb-stock-pip::before{content:"";width:8px;height:8px;border-radius:50%;
background:var(--accent);box-shadow:0 0 0 4px rgba(255,212,0,.18);}
.woocommerce span.onsale{background:var(--accent)!important;color:var(--accent-ink)!important;
font-family:var(--font-mono);font-weight:600;border-radius:var(--radius-sm);min-height:auto;
min-width:auto;padding:5px 9px;line-height:1;top:14px;left:14px;margin:0;letter-spacing:.05em;}
/* ===== SHOP SIDEBAR (filters) =========================================== */
/* Two-column shop archive: filters left, products right. Stacks on mobile.
The .cb-shop-grid wrapper is emitted by the PHP hooks in inc/setup.php
AROUND Storefront's #primary > main wrappers, so the .cb-shop-sidebar