/* ============================================================
BOOTH KING — GLOBAL SHOP ARCHIVE TEMPLATE (v2)
Banner hero + filter/sort pills + redesigned product cards.
Applies to every product category and the main shop archive.
PALETTE — homepage colours only, nothing invented:
#8BC34A green · #264601 dark green · #222222 card · #161616 panel
#0C0C0C overlay · #303030 control · #FFFFFF · #EEEEEE · #C0C0C0 · #888888
border rgba(255,255,255,0.14)
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');
/* this widget is only a code container — never let it draw a footer column */
.footer_widget:has(#bk-archive-css){ display:none !important; }
body.tax-product_cat, body.post-type-archive-product{
--bkx-g:#8BC34A; /* homepage brand green */
--bkx-ink:#264601; /* homepage dark green — text on green */
--bkx-card:#222222; /* homepage card / page dark */
--bkx-panel:#161616; /* homepage darker panel */
--bkx-ctrl:#303030; /* homepage control grey */
--bkx-line:rgba(255,255,255,0.14);
--bkx-mut:#C0C0C0; --bkx-mut2:#888888;
}
/* ---------- 1. BANNER HERO ---------- */
.tax-product_cat .term-description,
.post-type-archive-product .term-description{
position:relative; border:0 !important; background:var(--bkx-panel);
border-radius:0 !important; padding:0 !important; overflow:hidden;
min-height:340px; display:flex; align-items:flex-end;
/* full-bleed: break out of the boxed container to the viewport edges.
--bkx-sbw is the scrollbar width (set in JS) — without it 50vw overshoots
by half a scrollbar on each side and reintroduces horizontal scroll. */
width:auto !important; max-width:none !important;
margin-left:calc(50% - 50vw + (var(--bkx-sbw,0px) / 2)) !important;
margin-right:calc(50% - 50vw + (var(--bkx-sbw,0px) / 2)) !important;
margin-top:0 !important; margin-bottom:26px !important;
/* JS rebuilds this block into the banner. Hold it invisible (but still
occupying its reserved min-height) so the raw heading never flashes
and then jumps when the hero is assembled. */
opacity:0; transition:opacity .18s ease;
}
.tax-product_cat .term-description[data-bkx],
.post-type-archive-product .term-description[data-bkx]{ opacity:1; }
/* if JS fails for any reason, never leave the header permanently hidden */
.no-js .term-description, .tax-product_cat .term-description.bkx-fallback{ opacity:1 !important; }
/* reserve the control-bar height so inserting it does not shove the grid down */
.tax-product_cat ul.products, .post-type-archive-product ul.products{ min-height:1px; }
.bkx-tools{ min-height:56px; }
@media (max-width:768px){ .bkx-tools{ min-height:96px; } }
.bkx-hero-bg{ position:absolute; inset:0; background-size:cover; background-position:center; z-index:0; }
.bkx-hero-bg::after{ content:""; position:absolute; inset:0;
background:linear-gradient(100deg,rgba(12,12,12,0.97) 0%,rgba(12,12,12,0.94) 40%,rgba(12,12,12,0.74) 64%,rgba(12,12,12,0.34) 100%); }
.tax-product_cat .term-description > *:not(.bkx-hero-bg),
.post-type-archive-product .term-description > *:not(.bkx-hero-bg){ position:relative; z-index:1; }
/* inner block is pinned to the same width as the product grid, so the
headline lines up with the cards below even though the banner is full-bleed */
.bkx-hero-in{ position:relative; z-index:1; padding:52px 0 44px;
width:var(--bkx-cw,1140px); max-width:calc(100% - 40px); margin:0 auto; }
.bkx-hero-in > *{ max-width:760px; }
.bkx-eyebrow{ display:inline-flex; align-items:center; gap:8px; margin-bottom:13px;
font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.16em;
text-transform:uppercase; color:var(--bkx-g); }
.bkx-eyebrow::before{ content:""; width:22px; height:1px; background:var(--bkx-g); }
.tax-product_cat .term-description h1,
.post-type-archive-product .term-description h1{
font-family:Archivo,sans-serif !important; font-weight:800 !important;
font-size:clamp(27px,4.4vw,46px) !important; letter-spacing:-0.035em !important;
line-height:1.03 !important; color:#fff !important; margin:0 0 15px !important; padding:0 !important;
}
/* clamp to whole lines — a max-height clamp cuts the last line in half */
.bkx-desc{ position:relative; display:-webkit-box; -webkit-box-orient:vertical;
-webkit-line-clamp:3; overflow:hidden; }
.bkx-desc.bkx-open{ display:block; -webkit-line-clamp:unset; overflow:visible; }
.bkx-desc p{ color:var(--bkx-mut) !important; font-size:14.5px !important; line-height:1.62 !important; margin:0 0 9px !important; }
.bkx-desc a{ color:#fff !important; text-decoration:underline; text-underline-offset:2px; }
/* no colour fade here — it sits over a photo and would show as a band.
The "Read more" control is what signals the truncation. */
.bkx-more{ display:inline-flex; align-items:center; gap:6px; margin-top:11px; cursor:pointer;
background:none; border:0; padding:0; color:var(--bkx-g);
font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.13em; text-transform:uppercase; }
.bkx-more:hover{ opacity:.78; }
.bkx-more span{ transition:transform .2s; display:inline-block; }
.bkx-more.bkx-open span{ transform:rotate(180deg); }
.bkx-trust{ display:flex; flex-wrap:wrap; gap:9px 24px; margin-top:20px; padding-top:18px;
border-top:1px solid rgba(255,255,255,0.14); }
.bkx-trust i{ display:inline-flex; align-items:center; gap:7px; font-style:normal;
font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.11em;
text-transform:uppercase; color:#C0C0C0; }
.bkx-trust i::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--bkx-g); flex:none; }
/* ---------- 2. FILTER + SORT PILLS ---------- */
/* single-line control strip: filters scroll horizontally, sort/count/clear pinned right */
.bkx-tools{ background:var(--bkx-card); border:1px solid var(--bkx-line);
border-radius:14px; padding:10px 14px; margin:0 0 22px;
display:flex; align-items:center; gap:12px; }
.bkx-scroll{ flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:8px;
overflow-x:auto; overflow-y:hidden; white-space:nowrap;
scrollbar-width:none; -ms-overflow-style:none; }
.bkx-scroll::-webkit-scrollbar{ display:none; }
.bkx-right{ flex:none; display:flex; align-items:center; gap:10px; }
.bkx-div{ flex:none; width:1px; height:20px; background:rgba(255,255,255,0.14); margin:0 2px; }
.bkx-sort{ appearance:none; -webkit-appearance:none; cursor:pointer;
background:var(--bkx-ctrl) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23888888' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 13px center/9px 6px;
border:1px solid rgba(255,255,255,0.14); color:#EEEEEE; border-radius:999px;
padding:8px 30px 8px 14px; font-family:Archivo,sans-serif; font-size:13px; line-height:1; }
.bkx-sort:focus{ outline:none; border-color:var(--bkx-g); }
.bkx-pill{ display:inline-flex; align-items:center; gap:5px; cursor:pointer; flex:none;
background:var(--bkx-ctrl); border:1px solid rgba(255,255,255,0.14); color:#EEEEEE;
border-radius:999px; padding:8px 14px; font-family:Archivo,sans-serif;
font-size:13px; font-weight:500; line-height:1; transition:all .14s ease; }
.bkx-pill:hover{ border-color:rgba(139,195,74,0.6); color:#fff; }
.bkx-pill.on{ background:var(--bkx-g); border-color:var(--bkx-g); color:var(--bkx-ink); font-weight:700; }
.bkx-pill .n{ font-family:'IBM Plex Mono',monospace; font-size:10px; opacity:.62; }
.bkx-pill.on .n{ opacity:.72; }
.bkx-clear{ flex:none; background:none; border:0; cursor:pointer; color:var(--bkx-mut2);
font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.12em; text-transform:uppercase; }
.bkx-clear:hover{ color:var(--bkx-g); }
.bkx-count{ flex:none; white-space:nowrap; font-family:'IBM Plex Mono',monospace; font-size:11px;
letter-spacing:0.12em; text-transform:uppercase; color:var(--bkx-mut2); }
.bkx-count b{ color:#fff; font-weight:500; }
.bkx-empty{ grid-column:1/-1; text-align:center; padding:60px 20px; color:var(--bkx-mut2);
font-family:Archivo,sans-serif; font-size:16px; }
.bkx-empty button{ display:block; margin:16px auto 0; cursor:pointer; background:var(--bkx-g);
color:var(--bkx-ink); border:0; border-radius:999px; padding:10px 22px; font-weight:700; font-size:13px; }
/* hide the native sort + count — replaced by pills */
.tax-product_cat .woocommerce-ordering,
.post-type-archive-product .woocommerce-ordering,
.tax-product_cat .woocommerce-result-count,
.post-type-archive-product .woocommerce-result-count{ display:none !important; }
/* ---------- 3. GRID ---------- */
.tax-product_cat ul.products,
.post-type-archive-product ul.products{
display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:22px !important; margin:0 !important; padding:0 !important; float:none !important; list-style:none !important;
}
.tax-product_cat ul.products::before, .tax-product_cat ul.products::after,
.post-type-archive-product ul.products::before, .post-type-archive-product ul.products::after{
display:none !important; content:none !important; }
@media (max-width:1024px){
.tax-product_cat ul.products, .post-type-archive-product ul.products{
grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:16px !important; } }
@media (max-width:560px){
.tax-product_cat ul.products, .post-type-archive-product ul.products{
grid-template-columns:1fr !important; gap:14px !important; } }
/* ---------- 4. PRODUCT CARD ---------- */
.tax-product_cat ul.products li.product,
.post-type-archive-product ul.products li.product{
width:auto !important; margin:0 !important; padding:0 !important; float:none !important;
display:flex !important; flex-direction:column;
background:var(--bkx-card); border:1px solid var(--bkx-line); border-radius:18px;
overflow:hidden; position:relative;
transition:transform .16s ease-out, border-color .16s, box-shadow .16s; }
/* The theme's "two column mobile" option ships
`body.xtra-woo-two-col-mobile ul.products li.product{width:48%!important}`
inside @media(max-width:480px). That is both !important AND more specific than a
plain `.tax-product_cat ul.products li.product`, so it squeezed every card to half
of a full-width grid track. Out-specify it by adding the body element + class. */
body.xtra-woo-two-col-mobile.tax-product_cat ul.products li.product,
body.xtra-woo-two-col-mobile.post-type-archive-product ul.products li.product,
body.tax-product_cat ul.products li.product,
body.post-type-archive-product ul.products li.product{
width:auto !important; max-width:none !important; min-width:0 !important; float:none !important; }
/* the theme runs content-box, so padding is ADDED to a grid track's width and the
title spilled out of the card. Border-box keeps every child inside its column. */
.tax-product_cat ul.products li.product,
.tax-product_cat ul.products li.product *,
.post-type-archive-product ul.products li.product,
.post-type-archive-product ul.products li.product *{ box-sizing:border-box; }
.tax-product_cat ul.products li.product:hover,
.post-type-archive-product ul.products li.product:hover{
transform:translateY(-3px); border-color:rgba(139,195,74,0.5);
box-shadow:0 18px 40px rgba(0,0,0,0.42); }
.tax-product_cat ul.products li.product.bkx-hide,
.post-type-archive-product ul.products li.product.bkx-hide{ display:none !important; }
.tax-product_cat ul.products li.product > a.woocommerce-LoopProduct-link,
.post-type-archive-product ul.products li.product > a.woocommerce-LoopProduct-link{
display:flex !important; flex-direction:column; flex:1 1 auto; padding:0 !important; margin:0 !important; }
/* media */
.tax-product_cat li.product .xtra-product-thumbnail,
.post-type-archive-product li.product .xtra-product-thumbnail{
position:relative; background:#fff; overflow:hidden; margin:0 !important; }
.tax-product_cat li.product .xtra-product-thumbnail img,
.post-type-archive-product li.product .xtra-product-thumbnail img{
width:100% !important; height:auto !important; aspect-ratio:1/1; object-fit:contain !important;
padding:12px; display:block; transition:transform .35s ease; background:#fff; }
.tax-product_cat li.product:hover .xtra-product-thumbnail img,
.post-type-archive-product li.product:hover .xtra-product-thumbnail img{ transform:scale(1.045); }
.tax-product_cat li.product .vi-sctv-sale-badge, .post-type-archive-product li.product .vi-sctv-sale-badge,
.tax-product_cat li.product .onsale, .post-type-archive-product li.product .onsale{ display:none !important; }
.bkx-save{ position:absolute; top:10px; left:10px; z-index:3;
background:var(--bkx-g); color:var(--bkx-ink);
font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:500;
letter-spacing:0.07em; text-transform:uppercase; padding:6px 10px; border-radius:999px; }
.bkx-size{ position:absolute; top:10px; right:10px; z-index:3;
background:rgba(12,12,12,0.88); color:#fff; backdrop-filter:blur(4px);
font-family:Archivo,sans-serif; font-size:12px; font-weight:700;
padding:6px 10px; border-radius:999px; }
/* body */
.tax-product_cat li.product .price,
.post-type-archive-product li.product .price{
position:static !important; top:auto !important; right:auto !important;
bottom:auto !important; left:auto !important; transform:none !important;
display:flex !important; align-items:baseline; flex-wrap:wrap; gap:8px;
margin:0 !important;
background:none !important; box-shadow:none !important; border-radius:0 !important;
color:#fff !important; font-family:Archivo,sans-serif !important;
font-size:21px !important; font-weight:800 !important; letter-spacing:-0.02em !important; }
.tax-product_cat li.product .price .vi-sctv-price,
.post-type-archive-product li.product .price .vi-sctv-price{
display:flex !important; align-items:baseline; flex-wrap:wrap; gap:8px;
background:none !important; padding:0 !important; margin:0 !important; }
.tax-product_cat li.product .price del, .post-type-archive-product li.product .price del{
opacity:1 !important; color:var(--bkx-mut2) !important; font-size:13.5px !important;
font-weight:400 !important; text-decoration:line-through; order:2; }
.tax-product_cat li.product .price ins, .post-type-archive-product li.product .price ins{
text-decoration:none !important; background:none !important; color:#fff !important; order:1; }
.tax-product_cat li.product .price .screen-reader-text,
.post-type-archive-product li.product .price .screen-reader-text{ display:none !important; }
.bkx-meta{ padding:9px 16px 0; display:flex; flex-direction:column; gap:5px; }
.bkx-fin{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.09em;
text-transform:uppercase; color:var(--bkx-mut2); }
.bkx-fin b{ color:var(--bkx-g); font-weight:500; }
.bkx-stock{ display:inline-flex; align-items:center; gap:7px;
font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.09em;
text-transform:uppercase; color:var(--bkx-mut2); }
.bkx-stock::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--bkx-g); flex:none; }
.bkx-stock.bkx-out::before{ background:#888888; }
/* CTA */
.tax-product_cat ul.products li.product a.button,
.post-type-archive-product ul.products li.product a.button{
display:flex !important; align-items:center; justify-content:center;
margin:14px 16px 16px !important; margin-top:auto !important; padding:0 14px !important; height:44px;
background:var(--bkx-g) !important; color:#FFFFFF !important;
border:0 !important; border-radius:12px !important;
font-family:Archivo,sans-serif !important; font-size:14px !important; font-weight:700 !important;
letter-spacing:0 !important; text-transform:none !important;
transition:transform .14s ease-out, box-shadow .14s; }
.tax-product_cat ul.products li.product a.button:hover,
.post-type-archive-product ul.products li.product a.button:hover{
transform:translateY(-2px); box-shadow:0 12px 28px rgba(139,195,74,0.3);
background:var(--bkx-g) !important; color:var(--bkx-ink) !important; }
.tax-product_cat li.product a.added_to_cart, .post-type-archive-product li.product a.added_to_cart{
display:block; text-align:center; margin:-6px 16px 14px; color:var(--bkx-g) !important;
font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; }
.tax-product_cat li.product input.pmwProductId,
.post-type-archive-product li.product input.pmwProductId{ display:none !important; }
/* pagination is replaced by load-all */
.tax-product_cat .woocommerce-pagination.bkx-done,
.post-type-archive-product .woocommerce-pagination.bkx-done{ display:none !important; }
/* ---------- 4b. CARD REFINEMENTS ---------- */
/* The theme centres product-card copy at EVERY width, not just mobile. */
.tax-product_cat ul.products li.product,
.tax-product_cat ul.products li.product *,
.post-type-archive-product ul.products li.product,
.post-type-archive-product ul.products li.product *{ text-align:left !important; }
/* ...but the CTA label stays centred inside its button */
.tax-product_cat ul.products li.product a.button,
.post-type-archive-product ul.products li.product a.button{ text-align:center !important; }
/* flex rows must start from the left too, or the stock dot detaches */
.tax-product_cat li.product .price,
.post-type-archive-product li.product .price,
.tax-product_cat li.product .price .vi-sctv-price,
.post-type-archive-product li.product .price .vi-sctv-price,
.tax-product_cat li.product .bkx-stock,
.post-type-archive-product li.product .bkx-stock,
.tax-product_cat li.product .bkx-meta,
.post-type-archive-product li.product .bkx-meta{ justify-content:flex-start !important; align-items:flex-start; }
.tax-product_cat li.product .bkx-stock,
.post-type-archive-product li.product .bkx-stock{ align-items:center; }
/* bigger, more readable product titles */
/* price: current price dominates, sale price carries the brand green */
.tax-product_cat li.product .price,
.post-type-archive-product li.product .price{ font-size:25px !important; }
.tax-product_cat li.product .price ins,
.post-type-archive-product li.product .price ins{
color:var(--bkx-g) !important; font-weight:800 !important; }
.tax-product_cat li.product .price del,
.post-type-archive-product li.product .price del{
font-size:14px !important; color:var(--bkx-mut2) !important; opacity:.85 !important; }
/* ---------- 4c. CARD VERTICAL RHYTHM ---------- */
/* the meta lines were cramped together and jammed against the CTA */
.tax-product_cat li.product .price,
.post-type-archive-product li.product .price{ padding:0 18px 0 !important; }
.tax-product_cat li.product .bkx-meta,
.post-type-archive-product li.product .bkx-meta{
padding:16px 18px 0 !important; gap:9px !important; }
.bkx-fin, .bkx-stock{ font-size:11.5px !important; letter-spacing:0.07em !important; }
.tax-product_cat ul.products li.product a.button,
.post-type-archive-product ul.products li.product a.button{
margin:20px 18px 20px !important; height:46px; }
/* separate the buy row from the detail lines */
.tax-product_cat li.product .bkx-meta,
.post-type-archive-product li.product .bkx-meta{
border-top:1px solid rgba(255,255,255,0.14); margin-top:16px; }
/* the theme gives the inner product link its own darker background (#161616),
which showed as a lighter strip behind the CTA. One card, one colour. */
.tax-product_cat ul.products li.product > a.woocommerce-LoopProduct-link,
.post-type-archive-product ul.products li.product > a.woocommerce-LoopProduct-link{
background:transparent !important; }
/* ---------- 4d. TAP TARGETS & LEGIBILITY ---------- */
/* audit at 390px found filter pills at 29px and "Read more" at 14px tall —
both under a comfortable thumb target. */
.bkx-pill{ min-height:38px; padding:0 16px !important; }
.bkx-sort{ min-height:38px; }
.bkx-more{ padding:9px 0 !important; margin-top:6px !important; }
.bkx-clear{ font-size:11px !important; padding:10px 4px !important; }
.bkx-save{ font-size:10.5px !important; }
.bkx-count{ font-size:11.5px !important; }
/* ---------- 4e. DARKER TILES ---------- */
/* the theme's page background is also #222222, so cards had no separation.
Drop tiles + control strip to #161616 so they read as raised panels. */
.tax-product_cat ul.products li.product,
.post-type-archive-product ul.products li.product{ background:var(--bkx-panel) !important; }
.bkx-tools{ background:var(--bkx-panel) !important; }
.bkx-pill, .bkx-sort{ background:#0C0C0C !important; }
.bkx-pill.on{ background:var(--bkx-g) !important; }
/* ---------- 4f. PRICE ALIGNMENT + EDGE-TO-EDGE MEDIA ---------- */
/* the struck price sat on the big price's baseline and read as dropped;
centre it against the sale price instead */
.tax-product_cat li.product .price,
.post-type-archive-product li.product .price,
.tax-product_cat li.product .price .vi-sctv-price,
.post-type-archive-product li.product .price .vi-sctv-price{
align-items:center !important; }
.tax-product_cat li.product .price del,
.post-type-archive-product li.product .price del{
line-height:1 !important; position:relative; top:1px; }
/* kill the white frame around the product photo — fill the tile */
.tax-product_cat li.product .xtra-product-thumbnail,
.post-type-archive-product li.product .xtra-product-thumbnail{
background:transparent !important; }
.tax-product_cat li.product .xtra-product-thumbnail img,
.post-type-archive-product li.product .xtra-product-thumbnail img{
padding:0 !important; background:transparent !important;
object-fit:cover !important; }
/* ============================================================
GLOBAL PRODUCT-PAGE CHROME — BK-GLOBAL-PRODUCT
Loaded site-wide from this one widget, so shared styling is
edited HERE, once, instead of in 52 per-product style islands.
Per-product islands should only carry their own section markup.
============================================================ */
.single-product{ --bkg:#8BC34A; --bkg-ink:#264601; --bkg-card:#222222;
--bkg-panel:#161616; --bkg-dark:#0C0C0C; --bkg-line:rgba(255,255,255,0.14);
--bkg-mut:#C0C0C0; --bkg-mut2:#888888; }
/* the Woo description tab is our canvas: always open, no tab nav */
.single-product .woocommerce-tabs .tabs.wc-tabs{ display:none !important; }
.single-product .woocommerce-tabs{ margin:0 !important; padding:0 !important; }
.single-product .woocommerce-Tabs-panel--description{ display:block !important;
margin:0 !important; padding:0 !important; }
/* gallery + summary were floated (748px left, fixed 500px right) inside a 1360px
row, leaving ~112px of dead space. Flex the row; summary takes the remainder. */
.single-product .xtra-single-product{ display:flex !important; align-items:flex-start; gap:44px; }
.single-product .xtra-single-product > .iconic-woothumbs-all-images-wrap,
.single-product .xtra-single-product > .images,
.single-product .xtra-single-product > .woocommerce-product-gallery{
float:none !important; flex:0 0 auto; margin-right:0 !important; }
.single-product .xtra-single-product > .summary.entry-summary{ float:none !important;
flex:1 1 auto; width:auto !important; max-width:none !important; margin-left:0 !important; }
@media (max-width:900px){
.single-product .xtra-single-product{ flex-direction:column; gap:24px; }
.single-product .xtra-single-product > *{ width:100% !important; }
}
/* buy box · BK-BUYBOX
One buy box for every product template. The 40px Archivo title used to live
ONLY in the 360 per-product island, so enclosures, inflatables and mirrors
fell back to the theme's 22px rule and looked like a different site. Nothing
below may be duplicated into a per-product island. */
.single-product .summary.entry-summary{ background:var(--bkg-panel) !important;
border:1px solid var(--bkg-line) !important; border-radius:20px !important;
padding:32px !important; }
/* title */
.single-product .summary .product_title.entry-title{
font-family:Archivo,sans-serif !important; font-weight:800 !important;
font-size:clamp(26px,2.5vw,38px) !important; line-height:1.06 !important;
letter-spacing:-0.03em !important; color:#FFFFFF !important;
margin:0 0 14px !important; }
/* price — the sale figure leads, the was-price sits beside it on the same
baseline (no white block, no stacked rows) */
.single-product div.product .summary.entry-summary p.price{
display:flex !important; align-items:center !important; flex-wrap:wrap !important;
gap:12px !important; font-family:Archivo,sans-serif !important;
font-size:34px !important; font-weight:800 !important; line-height:1.1 !important;
color:var(--bkg) !important; margin:0 0 6px !important; }
.single-product div.product .summary.entry-summary p.price .vi-sctv-price{
display:flex !important; align-items:center !important; gap:12px !important;
flex-wrap:wrap !important; }
.single-product div.product .summary.entry-summary p.price ins{
text-decoration:none !important; background:none !important;
color:var(--bkg) !important; font-size:34px !important; font-weight:800 !important; }
.single-product div.product .summary.entry-summary p.price del{
opacity:1 !important; color:var(--bkg-mut2) !important; font-weight:600 !important;
font-size:19px !important; text-decoration:line-through !important; }
.single-product div.product .summary.entry-summary p.price del .amount,
.single-product div.product .summary.entry-summary p.price del bdi{ font-size:inherit !important; }
.single-product div.product .summary.entry-summary .woocommerce-variation-price p.price{ margin:0 0 14px !important; }
/* financing note — informative, not competing with the price */
.single-product .summary .wc-ppcp-paylater-msg__container{
margin:0 0 18px !important; }
.single-product .summary .wc-ppcp-paylater-msg__container *{
font-size:12.5px !important; color:var(--bkg-mut) !important; }
/* countdown — was a black box with radius 5 and white number chips, which
matched nothing else on the page */
.single-product .summary .woo-sctr-countdown-timer-layout{
background:rgba(255,255,255,0.04) !important;
border:1px solid var(--bkg-line) !important;
border-radius:14px !important; padding:14px 16px !important; }
.single-product .summary .woo-sctr-countdown-timer-text-before{
color:#FFFFFF !important; font-size:12.5px !important; font-weight:600 !important; }
.single-product .summary .woo-sctr-countdown-value{
background:var(--bkg-dark) !important; color:var(--bkg) !important;
border:1px solid var(--bkg-line) !important; border-radius:9px !important;
font-family:Archivo,sans-serif !important; font-weight:800 !important;
font-size:23px !important; padding:9px 0 !important; }
.single-product .summary .woo-sctr-countdown-text{
color:var(--bkg-mut2) !important; font-size:10.5px !important;
text-transform:uppercase !important; letter-spacing:0.12em !important; }
/* the excerpt ships a stray
between the timer and the badge, worth 19px of
dead space. The empty above it is NOT touched — its 30px bottom margin is
deliberately cancelled by the timer wrap's -30px top margin. */
.single-product .summary .woocommerce-product-details__short-description{ margin:0 !important; }
.single-product .summary .woocommerce-product-details__short-description br{ display:none !important; }
/* ships badge — GLOBAL, not just the buy box. The badge also renders on shop
and category tiles, so this is deliberately unscoped.
The Customizer's Additional CSS had accumulated SIX conflicting
`span.ships-usa` rules: a red #b32134 pill, then `font-size:16px!important;
line-height:1em!important`, then a later `font-size:14px; line-height:40px`
that never applied at all because the !important pair above outranked it.
This block is the single source of truth — do not re-add rules there. */
/* Specificity matters here — three separate rules compete for this badge:
span.ships-usa 0-1-1 (Additional CSS, x6)
.single-product .ships-usa 0-2-0 (was in all 36 360-booth islands)
.single-product .xtra-single-product img 0-2-1 (our own thumb radius)
Each selector below is listed at a weight that beats all of them in the
context it applies to. A plain `.ships-usa` (0-1-0) loses to every one. */
span.ships-usa,
.single-product .summary span.ships-usa{
display:inline-flex !important; align-items:center !important; gap:9px !important;
width:auto !important; position:relative !important; overflow:visible !important;
background:rgba(139,195,74,0.12) !important;
border:1px solid rgba(139,195,74,0.30) !important;
color:#FFFFFF !important; font-size:13px !important; line-height:1.25 !important;
font-weight:600 !important; border-radius:999px !important;
padding:7px 16px 7px 7px !important; box-shadow:none !important;
vertical-align:middle !important; }
span.ships-usa img,
.single-product .summary .ships-usa img{
width:26px !important; height:26px !important; max-width:26px !important;
min-width:26px !important; border-radius:50% !important; display:block !important;
margin:0 !important; float:none !important; }
span.ships-usa .text-usa,
.single-product .summary .ships-usa .text-usa{
color:#FFFFFF !important; font-size:inherit !important; line-height:inherit !important; }
/* spacing is context-specific, so it lives with the context, not the badge */
.single-product .summary .ships-usa{ margin:14px 0 2px !important; }
/* variation selects */
.single-product .summary table.variations{ width:100% !important; margin:4px 0 14px !important; }
.single-product .summary table.variations th,
.single-product .summary table.variations td{
padding:5px 0 !important; border:0 !important; background:transparent !important; }
.single-product .summary table.variations tr{ display:block !important; }
.single-product .summary table.variations th.label,
.single-product .summary table.variations td.value{
display:block !important; width:auto !important; text-align:left !important; }
.single-product .summary table.variations th.label{ margin-bottom:8px !important; }
.single-product .summary table.variations label{
color:var(--bkg-mut) !important; font-size:12px !important; font-weight:600 !important;
text-transform:uppercase !important; letter-spacing:0.1em !important; }
.single-product .summary table.variations select{
width:100% !important; height:50px !important; padding:0 14px !important;
background:var(--bkg-card) !important; color:#FFFFFF !important;
border:1px solid var(--bkg-line) !important; border-radius:12px !important; }
/* The theme pulls the cart form up with `.woocommerce div.product form.cart
{margin-top:-20px}` (0-3-2), which jammed the variation swatches into the
ships badge on every variable product. Needs 0-4-2 to beat it. */
.single-product div.product .summary.entry-summary form.cart{
margin-top:20px !important; }
.single-product div.product .summary.entry-summary .woocommerce-variation{
margin:0 !important; }
.single-product div.product .summary.entry-summary .woocommerce-variation-price{
margin:0 0 12px !important; }
/* trust strip — every claim here is verified: all three gateways are enabled
in WooCommerce, and the phone number is the one in the site header. Warranty
and returns are deliberately ABSENT: the product pages say 5 years, the
mirror page says 2, and /shipping-returns/ says 1 — and that page also says
booths are non-refundable. Do not add either until that is resolved. */
.single-product .summary .bk-trust{
display:flex !important; flex-wrap:wrap !important; gap:11px 20px !important;
margin:18px 0 0 !important; padding:16px 0 0 !important;
border-top:1px solid var(--bkg-line) !important; list-style:none !important; }
.single-product .summary .bk-trust li{
display:flex !important; align-items:center !important; gap:8px !important;
margin:0 !important; padding:0 !important; list-style:none !important;
font-size:12.5px !important; line-height:1.3 !important; color:var(--bkg-mut) !important; }
.single-product .summary .bk-trust li::before,
.single-product .summary .bk-trust li::marker{ content:none !important; display:none !important; }
.single-product .summary .bk-trust svg{
width:15px !important; height:15px !important; flex:0 0 15px !important;
stroke:var(--bkg) !important; fill:none !important; }
.single-product .summary .bk-trust a{
color:#FFFFFF !important; font-weight:600 !important; text-decoration:none !important; }
.single-product .summary .bk-trust a:hover{ color:var(--bkg) !important; }
/* quantity + add to cart share one row and one height.
Variable products NEST .codevz-woo-add-to-cart inside
.woocommerce-variation-add-to-cart, so only the inner element is the real
qty+button row. Making both flex turned the sibling `.clr` clearfix into a
phantom flex item that stretched the row to 76px — same failure mode as the
WPBakery .vc_row::before clearfix. Outer stays a block; inner is the row. */
.single-product .summary .woocommerce-variation-add-to-cart{ display:block !important; }
/* NOTE: do NOT add a `> .clr { display:none }` rule here. The cart row itself
is `class="codevz-woo-add-to-cart clr"`, so such a rule hides the entire
quantity + add-to-cart row on every variable product. The stray sibling
`
` is harmless now that the outer wrapper is a block. */
.single-product .summary .codevz-woo-add-to-cart{
display:flex !important; align-items:stretch !important; gap:12px !important;
width:100% !important; margin-top:8px !important; }
/* the row also carries the theme's `clr` clearfix class, whose ::before/::after
become zero-width PHANTOM FLEX ITEMS — each one eating a 12px gap, so the
stepper sat 12px in from the left and the button finished 12px short of the
right. Same failure as the WPBakery .vc_row::before clearfix. */
.single-product .summary .codevz-woo-add-to-cart::before,
.single-product .summary .codevz-woo-add-to-cart::after,
.single-product .summary .woocommerce-variation-add-to-cart::before,
.single-product .summary .woocommerce-variation-add-to-cart::after{
display:none !important; content:none !important; }
/* `.quantity{margin:auto !important}` (0-1-0) plus a separate margin-bottom
rule left the stepper centred inside the flex row, eating the free space the
button should have taken. Needs the long form to win outright. */
.single-product div.product .summary.entry-summary .quantity,
.single-product .summary .quantity{
flex:0 0 132px !important; width:132px !important; height:56px !important;
background:var(--bkg-card) !important; border:1px solid var(--bkg-line) !important;
border-radius:12px !important; overflow:hidden !important;
margin:0 !important; margin-left:0 !important; margin-right:0 !important;
margin-bottom:0 !important; }
.single-product .summary .quantity input{
background:transparent !important; color:#FFFFFF !important; border:0 !important;
height:54px !important; font-weight:700 !important; font-size:16px !important; }
.single-product .summary .quantity-up,
.single-product .summary .quantity-down{
background:transparent !important; color:var(--bkg-mut) !important; border:0 !important; }
.single-product .summary .quantity-up:hover,
.single-product .summary .quantity-down:hover{ color:#FFFFFF !important; }
.single-product .summary .single_add_to_cart_button.button{
flex:1 1 auto !important; width:auto !important; min-width:0 !important;
max-width:none !important; height:56px !important; margin:0 !important;
float:none !important; display:inline-flex !important;
align-items:center !important; justify-content:center !important;
background:var(--bkg) !important; color:#FFFFFF !important;
border:0 !important; border-radius:12px !important;
font-family:Archivo,sans-serif !important; font-weight:800 !important;
font-size:16px !important; letter-spacing:0.01em !important;
transition:filter .15s ease !important; }
.single-product .summary .single_add_to_cart_button.button:hover,
.single-product .summary .single_add_to_cart_button.button:focus{
background:var(--bkg) !important; color:#FFFFFF !important; filter:brightness(1.08); }
.single-product .summary .single_add_to_cart_button.button i,
.single-product .summary .single_add_to_cart_button.button svg{ color:#FFFFFF !important; }
/* meta rail */
.single-product .summary .product_meta{
margin-top:22px !important; padding-top:18px !important;
border-top:1px solid var(--bkg-line) !important;
font-size:12.5px !important; color:var(--bkg-mut2) !important; }
.single-product .summary .product_meta strong{
color:var(--bkg-mut) !important; font-weight:600 !important; }
.single-product .summary .product_meta a{ color:var(--bkg-mut) !important; }
.single-product .summary .product_meta a:hover{ color:var(--bkg) !important; }
@media (max-width:600px){
.single-product .summary.entry-summary{ padding:22px !important; }
/* Wrapping the row left the quantity stepper stranded and centred above a
full-width button. At 390px the content box is 286px, which fits
104 + 12 gap + 170 comfortably, so keep them on one line. */
.single-product .summary .codevz-woo-add-to-cart{
flex-wrap:nowrap !important; align-items:stretch !important; }
.single-product div.product .summary.entry-summary .quantity,
.single-product .summary .quantity{
flex:0 0 104px !important; width:104px !important;
margin:0 !important; margin-left:0 !important; margin-right:0 !important; }
.single-product .summary .single_add_to_cart_button.button{
flex:1 1 auto !important; width:auto !important; padding:0 10px !important;
font-size:15px !important; }
.single-product div.product .summary.entry-summary p.price,
.single-product div.product .summary.entry-summary p.price ins{
font-size:30px !important; }
.single-product .summary .bk-trust{ gap:9px 16px !important; }
}
/* ONE radius for every thumbnail on a product page. The WooThumbs thumb wrapper
has overflow:hidden with radius 0, which clipped the img's corners square. */
.single-product .iconic-woothumbs-thumbnails__image,
.single-product .iconic-woothumbs-thumbnails__slide,
.single-product .iconic-woothumbs-images__slide,
.single-product .iconic-woothumbs-images__image,
.single-product .xtra-single-product img,
.single-product .flex-control-thumbs img,
.single-product .woocommerce-product-gallery__image img,
.single-product .bk-ib-thumb, .single-product .bk-cmp-thumb, .single-product .bk-ac-img,
.single-product .bkm-cmp-thumb, .single-product .bke-peer img{
border-radius:12px !important; }
.single-product .iconic-woothumbs-thumbnails__image,
.single-product .bk-ib-thumb, .single-product .bk-cmp-thumb,
.single-product .bk-ac-img, .single-product .bkm-cmp-thumb{ overflow:hidden; }
.single-product .bk-ib-thumb--none{ background:transparent !important;
box-shadow:none !important; border:0 !important; }
/* ---- BK-ALIGN: one content edge for every product-page section ----
Measured from the theme's own product row (--bk-cw) so the section
content lines up with the gallery and buy box above it. Three different
left edges (product row / 360 sections / enclosure sections) was the
inconsistency. */
.single-product .bke-in,
.single-product .bkm-in{ width:var(--bk-cw,1140px) !important; margin:0 auto !important; }
/* ---- BK-CLEARFIX ----
WPBakery adds .vc_row:before/:after clearfix pseudo-elements. Where we made a
row display:flex they become PHANTOM FLEX ITEMS, and justify-content:space-between
then shoves the first column right by one gap (60px) — which is why the 360
sections sat 60px inside the product row while the other templates did not. */
.single-product .vc_row.vc_inner[class*="bk-"]::before,
.single-product .vc_row.vc_inner[class*="bk-"]::after,
.single-product [class*="bk-sec"] .vc_row.vc_inner::before,
.single-product [class*="bk-sec"] .vc_row.vc_inner::after{ display:none !important; content:none !important; }
/* ---------- 5. MOBILE ---------- */
@media (max-width:768px){
.tax-product_cat .term-description, .post-type-archive-product .term-description{
min-height:0; border-radius:16px; margin-bottom:16px !important; }
.bkx-hero-in{ padding:26px 20px 22px; }
.bkx-hero-bg::after{ background:linear-gradient(180deg,rgba(12,12,12,0.80) 0%,rgba(12,12,12,0.93) 60%); }
.bkx-trust{ gap:7px 14px; margin-top:15px; padding-top:13px; }
/* one line for the pills is unusable at phone width — the pinned sort/clear
left them ~150px. Give the pills the full width and drop the controls below. */
.bkx-tools{ padding:10px 11px; border-radius:12px; margin-bottom:16px; gap:9px;
flex-direction:column; align-items:stretch; }
.bkx-scroll{ width:100%; }
.bkx-pill{ min-height:38px; padding:0 14px !important; font-size:13px; }
.bkx-right{ width:100%; gap:9px; padding-top:9px;
border-top:1px solid rgba(255,255,255,0.14); }
.bkx-sort{ flex:1 1 auto; min-width:0; padding:8px 26px 8px 12px; font-size:12.5px;
background-position:right 10px center; }
.bkx-count{ order:3; margin-left:auto; }
.bkx-clear{ font-size:11px !important; }
/* the theme centres archive text on mobile — keep the hero AND the cards
left-aligned (centred copy in a horizontal card reads badly, and it also
detaches the ::before dot on the stock line) */
.tax-product_cat .term-description, .tax-product_cat .term-description *,
.post-type-archive-product .term-description, .post-type-archive-product .term-description *,
.tax-product_cat ul.products li.product, .tax-product_cat ul.products li.product *,
.post-type-archive-product ul.products li.product, .post-type-archive-product ul.products li.product *{
text-align:left !important; }
.tax-product_cat ul.products li.product .price,
.post-type-archive-product ul.products li.product .price,
.tax-product_cat ul.products li.product .bkx-stock,
.post-type-archive-product ul.products li.product .bkx-stock{ justify-content:flex-start !important; }
/* ...but the CTA label stays centred in its button */
.tax-product_cat ul.products li.product a.button,
.post-type-archive-product ul.products li.product a.button{ text-align:center !important; }
.tax-product_cat li.product .price, .post-type-archive-product li.product .price{ font-size:21px !important; padding:9px 13px 0 !important; }
.tax-product_cat li.product .price del, .post-type-archive-product li.product .price del{ font-size:13px !important; }
.bkx-meta{ padding:13px 14px 0 !important; gap:8px !important; margin-top:13px; }
.bkx-fin, .bkx-stock{ font-size:11px !important; }
.tax-product_cat ul.products li.product a.button,
.post-type-archive-product ul.products li.product a.button{ margin:12px 13px 13px !important; height:42px; font-size:13.5px !important; }
}
@media (max-width:560px){
/* NOTE: these must repeat `ul.products` — without it they are less specific than
the base card rules above and silently lose. */
.tax-product_cat ul.products li.product > a.woocommerce-LoopProduct-link,
.post-type-archive-product ul.products li.product > a.woocommerce-LoopProduct-link{
display:grid !important; grid-template-columns:124px minmax(0,1fr);
align-items:start; column-gap:0; }
.tax-product_cat ul.products li.product .xtra-product-thumbnail,
.post-type-archive-product ul.products li.product .xtra-product-thumbnail{
grid-row:1/5; align-self:stretch; height:100%; min-width:0; }
.tax-product_cat ul.products li.product .xtra-product-thumbnail img,
.post-type-archive-product ul.products li.product .xtra-product-thumbnail img{
height:100% !important; aspect-ratio:auto; min-height:124px; padding:0 !important; }
.tax-product_cat ul.products li.product .price,
.post-type-archive-product ul.products li.product .price{ min-width:0; padding:6px 12px 0 !important; }
.tax-product_cat ul.products li.product a.button,
.post-type-archive-product ul.products li.product a.button{ margin:10px 12px 12px !important; }
.bkx-meta{ padding:6px 12px 0; min-width:0; }
.bkx-size{ top:7px; right:auto; left:7px; font-size:11px; padding:5px 8px; }
.bkx-save{ top:auto; bottom:7px; left:7px; font-size:9px; padding:5px 8px; }
}
/* ==== BK archive cards (2026-09-04 v2): match the homepage card layout ====
The card (li.product) is already a dark, rounded, bordered panel inside a CSS
grid, so grid rows auto-equalise card height. Two real bugs remained: the
title (an
) had NO side padding (text touched the border) while price/meta
had 18px, and an earlier 2-line clamp was cutting words. Fix: show the FULL
title with matching 18px side padding, and make the inner link a flex column
so the price + meta + CTA PIN to the bottom of every card and line up across
the row - full titles, nothing truncated, everything aligned. */
.woocommerce ul.products li.product{ display:flex !important; flex-direction:column !important; }
.woocommerce ul.products li.product .woocommerce-LoopProduct-link{
display:flex !important; flex-direction:column !important; flex:1 1 auto !important; height:100% !important; }
.woocommerce ul.products li.product h3.woocommerce-loop-product__title,
.woocommerce ul.products li.product h2.woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title{
display:block !important;
-webkit-line-clamp:unset !important;
height:auto !important; min-height:0 !important; max-height:none !important;
overflow:visible !important;
padding:0 18px !important;
margin:14px 0 12px !important;
font-size:18px !important; font-weight:700 !important; line-height:1.35 !important;
}
/* pin the price group to the card bottom so prices/meta/CTA align across the row */
.woocommerce ul.products li.product .price{ margin-top:auto !important; }
/* ==== BK archive spec row (capacity / weight / setup) — matches homepage card ==== */
.woocommerce ul.products li.product .bkx-specrow{
display:flex; flex-wrap:wrap; align-items:center; gap:18px;
padding:0 18px; margin:0 0 16px; font-size:14px; color:#C0C0C0;
}
.woocommerce ul.products li.product .bkx-spec{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.woocommerce ul.products li.product .bkx-spec svg{
width:17px; height:17px; flex:0 0 auto; fill:none;
stroke:#8BC34A; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}