and
the single product's own top-level , so this one rule catches
every place a badge for an explicit-category product can render:
the shop grid, any category archive, the homepage catalog, related
products, upsells, and the single product page itself — based on
the PRODUCT's actual category, not which page happens to be
showing it. That matters for related products/upsells specifically:
a non-explicit product shown on an explicit product's page should
stay green, and an explicit product shown among related items on a
non-explicit product's page should still show pink. Same
specificity (3 classes + 1 type) as the green rule immediately
above on purpose — a genuine tie, correctly broken by this rule
coming second. */
.jh-home .product_cat-explicit span.onsale{background:var(--pink) !important; color:var(--ink) !important;}
.jh-product-wrap .woocommerce-product-gallery{background:var(--panel); border-radius:12px; padding:16px; border:1px solid var(--line);}
.jh-product-wrap .woocommerce-product-gallery img{border-radius:8px;}
.jh-product-wrap div.summary{color:var(--paper);}
.jh-product-wrap div.summary h1.product_title{
font-family:var(--f-display); text-transform:uppercase; color:var(--paper); font-size:clamp(28px,3.5vw,40px); margin-bottom:14px;
}
.jh-product-wrap div.summary .price{
color:var(--green); font-family:var(--f-mono); font-size:24px; display:block; margin-bottom:16px;
}
.jh-product-wrap div.summary .price del{color:var(--paper-dim); text-decoration:line-through;}
.jh-product-wrap div.summary .woocommerce-product-details__short-description{color:#C7C6C1; line-height:1.6; margin-bottom:20px;}
.jh-product-wrap div.summary .star-rating{color:var(--green); margin-bottom:14px;}
.jh-product-wrap form.cart{margin-top:20px;}
.jh-product-wrap form.cart .button,
.jh-product-wrap div.summary a.button{
background:var(--green); color:var(--ink); border-radius:4px; border:2px solid var(--green);
font-family:var(--f-mono); font-weight:700; text-transform:uppercase; letter-spacing:0.04em;
padding:14px 28px; font-size:13px;
transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); will-change:transform;
}
.jh-product-wrap form.cart .button:hover,
.jh-product-wrap div.summary a.button:hover{transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--pink);}
.jh-product-wrap form.cart .button:active,
.jh-product-wrap div.summary a.button:active{transform:translate(0,0) scale(.98); box-shadow:none; transition-duration:60ms;}
/* !important: a Beaver Builder skin stylesheet
("skin-.css", generated by the parent theme's Customizer
settings — see the dequeue note in functions.php) ships its own
".woocommerce .quantity input.qty{background:#fff; color:#757575;}"
plus a generic "input[type=number]{background:#fcfcfc;
color:#757575;}" — both with enough specificity to beat these
rules for at least one of background/color, leaving the quantity
number nearly illegible (dark gray text on a white/near-white
field sitting on our dark page). Confirmed live via computed
styles before adding !important here rather than guessing. */
.jh-product-wrap form.cart .quantity input{
background:var(--panel) !important; border:1px solid var(--line) !important; color:var(--paper) !important; border-radius:4px; padding:10px; width:64px;
}
.jh-product-wrap table.variations select{
background:var(--panel) !important; color:var(--paper) !important; border:1px solid var(--line) !important; border-radius:4px; padding:8px;
}
.jh-product-wrap .product_meta{
margin-top:24px; padding-top:16px; border-top:1px solid var(--line);
font-family:var(--f-mono); font-size:11.5px; color:var(--paper-dim);
}
.jh-product-wrap .product_meta a{color:var(--paper-dim); text-decoration:underline;}
/* tabs (description / additional information / reviews).
!important throughout: both WooCommerce core AND a Beaver Builder
skin stylesheet ship ".woocommerce div.product .woocommerce-tabs
ul.tabs li(.active)" rules (5 classes + 3 types) that outrank ours
(4 classes + 2 types) on class count alone — confirmed live via
computed styles (white active tab, dark gray text, no green
anywhere) before adding !important rather than guessing. Every
tab now gets the same green-pill / white-text treatment regardless
of how many tabs a given product has (Reviews always present;
Additional information only shows up for products with attributes). */
.jh-product-wrap .woocommerce-tabs{grid-column:1 / -1; margin-top:48px; border-top:1px solid var(--line); padding-top:32px;}
.jh-product-wrap .woocommerce-tabs ul.tabs{list-style:none; display:flex; gap:10px; margin:0 0 24px; padding:0; flex-wrap:wrap;}
.jh-product-wrap .woocommerce-tabs ul.tabs li{
font-family:var(--f-mono); font-size:12px; text-transform:uppercase; letter-spacing:0.04em;
padding:10px 16px; border:1px solid var(--green) !important; border-radius:999px; cursor:pointer;
background:var(--green) !important;
}
.jh-product-wrap .woocommerce-tabs ul.tabs li a{color:#fff !important;}
.jh-product-wrap .woocommerce-tabs ul.tabs li.active{font-weight:700;}
.jh-product-wrap .woocommerce-tabs ul.tabs li.active a{color:#fff !important;}
/* WooCommerce's own ".woocommerce-Tabs-panel" ships a solid white
background (confirmed live: rgb(255,255,255)). We already set the
panel's own text to a light gray/paper — on that white background
it was nearly illegible (white-on-white for headings, light gray
on white for body copy). !important since this is WooCommerce's
own class, not ours. */
.jh-product-wrap .woocommerce-tabs .panel{color:#C7C6C1; line-height:1.7; background:transparent !important;}
.jh-product-wrap .woocommerce-tabs .panel h2{color:var(--paper); font-family:var(--f-display); text-transform:uppercase; margin-bottom:14px;}
/* Related products AND Upsells — same card design, same section
treatment, own heading. These are two separate WooCommerce
sections ("Related products" vs. the Upsells block, which
defaults to the heading "You may also like…") — up-sells is a
distinct, curated list (products the merchant explicitly marked
as upsells for this product), completely separate from "related",
which WooCommerce generates automatically from shared categories/
tags. Both use content-product.php for their cards, so both need
the same grid CSS; only "related.products" had it, leaving
Upsells to fall back to broken styling once the global card reset
(li.product.jh-tag-card{width:auto!important; float:none!important})
stripped its old float-based layout with nothing to replace it. */
.jh-product-wrap .related.products,
.jh-product-wrap .upsells.products{grid-column:1 / -1; margin-top:56px; padding-top:32px; border-top:1px solid var(--line);}
.jh-product-wrap .related.products > h2,
.jh-product-wrap .upsells.products > h2{
font-family:var(--f-display); text-transform:uppercase; font-size:26px; margin-bottom:24px; color:var(--paper);
}
.jh-product-wrap .related.products ul.products,
.jh-product-wrap .upsells.products ul.products{
display:grid; grid-template-columns:repeat(4,1fr); gap:22px; list-style:none; margin:0; padding:0;
}
@media (max-width:900px){
.jh-product-wrap div.product{grid-template-columns:1fr;}
ul.products.jh-shelf,
.jh-product-wrap .related.products ul.products,
.jh-product-wrap .upsells.products ul.products{grid-template-columns:repeat(2,1fr);}
}
/* ============================================================
PART 4 — Generic Pages (page.php): About Us, Contact Us, Terms
of Service, Privacy Policy, and any future Page.
These pages were authored in Beaver Builder using PowerPack/
Ultimate Addons modules (".pp-primary-title", ".pp-button", etc.)
styled for the OLD light-background design: near-black headings,
mid-gray body text, a solid black button. page.php still calls
the_content() so the client can keep editing these pages in
Beaver Builder — so instead of matching specific module classes,
these rules force color/background broadly (and use !important
throughout, since BB writes plenty of its own specific,
sometimes per-element-ID, CSS) across whatever text and structural
wrapper elements the page editor happens to contain.
============================================================ */
.jh-page-wrap{padding:64px 0 90px; max-width:820px;}
.jh-page-wrap h1{font-size:clamp(32px,4.2vw,50px); margin-bottom:32px;}
/* Structural Beaver Builder row/column/module wrappers: strip
whatever background color the page editor set so our dark
.jh-home background shows through instead of a light panel. */
.jh-page-content .fl-row,
.jh-page-content .fl-row-content-wrap,
.jh-page-content .fl-col-content,
.jh-page-content .fl-module-content,
.jh-page-content [class*="fl-node-"]{
background-color:transparent !important;
background-image:none !important;
}
/* Text: force onto the site's light-on-dark palette regardless of
whatever color the page editor originally set, but leave buttons/
links alone here — those get their own treatment below. */
.jh-page-content,
.jh-page-content h1, .jh-page-content h2, .jh-page-content h3,
.jh-page-content h4, .jh-page-content h5, .jh-page-content h6,
.jh-page-content p, .jh-page-content li, .jh-page-content span,
.jh-page-content div{
color:var(--paper) !important;
}
.jh-page-content p, .jh-page-content li{
color:#C7C6C1 !important; line-height:1.7; margin-bottom:16px; font-size:15.5px;
}
.jh-page-content h1, .jh-page-content h2, .jh-page-content h3{
font-family:var(--f-display); text-transform:uppercase; letter-spacing:0.01em;
color:var(--paper) !important; margin:32px 0 14px; line-height:1.1;
}
.jh-page-content > *:first-child{margin-top:0;}
.jh-page-content a:not([class*="button"]){color:var(--green) !important; text-decoration:underline;}
.jh-page-content a:not([class*="button"]):hover{color:var(--pink) !important;}
/* Buttons (Beaver Builder's own ".fl-button" and PowerPack's
".pp-button") — restyled to match the site's own .jh-btn look
instead of the black CTA button these pages shipped with, which
had almost no contrast against our near-black background. */
.jh-page-content a.fl-button,
.jh-page-content a.pp-button,
.jh-page-content .fl-button-wrap a{
display:inline-flex !important; align-items:center; gap:8px;
background:var(--green) !important; color:var(--ink) !important;
border:2px solid var(--green) !important; border-radius:4px !important;
font-family:var(--f-mono) !important; font-weight:600 !important; font-size:13px !important;
text-transform:uppercase; letter-spacing:0.04em; text-decoration:none !important;
padding:14px 26px !important; transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.jh-page-content a.fl-button:hover,
.jh-page-content a.pp-button:hover,
.jh-page-content .fl-button-wrap a:hover{
transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--pink);
}
.jh-page-content a.fl-button *,
.jh-page-content a.pp-button *,
.jh-page-content .fl-button-wrap a *{color:inherit !important;}
/* Cart and Checkout are WooCommerce shortcodes ([woocommerce_cart],
[woocommerce_checkout]) sitting on ordinary WordPress Pages, so
page.php — and therefore .jh-page-content — now covers them too.
The generic overrides above don't reach WooCommerce's own table/
payment-panel markup, which ships styled for a white page
background: the cart items table, the checkout order-review
table, the coupon toggle, and the payment-method box (GoDaddy
Payments/Poynt's card-entry panel included) all rendered as a
barely-legible near-white-on-white panel. Confirmed live by
adding a real item to cart and walking through to Checkout. */
.jh-page-content table.shop_table{
background:transparent !important; border-color:var(--line) !important; color:var(--paper) !important;
}
.jh-page-content table.shop_table th,
.jh-page-content table.shop_table td{
border-color:var(--line) !important; color:var(--paper) !important;
}
.jh-page-content table.shop_table .product-name a{color:var(--green) !important;}
.jh-page-content table.shop_table del{color:var(--paper-dim) !important;}
.jh-page-content table.shop_table ins{text-decoration:none;}
.jh-page-content .cart_totals,
.jh-page-content .woocommerce-checkout-payment,
.jh-page-content .wc_payment_methods,
.jh-page-content .payment_box,
.jh-page-content #payment,
.jh-page-content .woocommerce-form-coupon,
.jh-page-content .woocommerce-info,
.jh-page-content .woocommerce-NoticeGroup{
background:var(--panel) !important; border-color:var(--line) !important; color:var(--paper) !important;
}
.jh-page-content .payment_box{border-radius:0 0 8px 8px;}
.jh-page-content ul.payment_methods{border-color:var(--line) !important;}
.jh-page-content ul.payment_methods li{border-color:var(--line) !important; color:var(--paper) !important;}
.jh-page-content .woocommerce-form-coupon-toggle .woocommerce-info,
.jh-page-content .woocommerce-form-coupon-toggle a{color:var(--green) !important;}
.jh-page-content .woocommerce-Price-amount{color:var(--green);}
.jh-page-content #order_review_heading,
.jh-page-content h3#order_review_heading{color:var(--paper) !important;}
/* ============================================================
PART 5 — About Us (page-about-us.php)
A page-specific template, so it takes over from the generic
page.php + .jh-page-content rules above for this one URL. Reuses
existing tokens/classes wherever one already fit (.jh-eyebrow,
.jh-halftone, .jh-btn, .jh-hero-ctas, .jh-stat-row/.jh-stat — the
same stat-row styling the homepage's "Who's behind the printer"
section already uses) rather than inventing parallel ones.
============================================================ */
.jh-story-head{padding:64px 0 40px;}
.jh-story-head h1{font-size:clamp(38px,6vw,64px); margin-top:10px;}
.jh-story-block{padding:64px 0;}
.jh-story-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px; align-items:center;}
.jh-story-reverse .jh-story-media{order:2;}
.jh-story-reverse .jh-story-copy{order:1;}
/* Framed panel rather than a cropped photo treatment: the two
images used here (a product mockup, a logo lockup) have very
different native aspect ratios, and object-fit:cover would crop
the logo lockup's tagline right off. Same framed-panel language
as .jh-thumb uses for product photos elsewhere on the site. */
.jh-story-media{
background:var(--panel); border:1px solid var(--line); border-radius:10px;
padding:36px; display:flex; align-items:center; justify-content:center; min-height:280px;
}
.jh-story-media img{width:100%; height:auto; max-width:360px;}
.jh-story-copy h2{font-size:clamp(28px,3.6vw,42px); margin:10px 0 18px;}
.jh-story-copy > p{font-size:16px; line-height:1.65; color:#C7C6C1; max-width:52ch;}
.jh-quote{border-left:3px solid var(--green); padding:4px 0 4px 22px; margin:22px 0 30px;}
.jh-quote p{font-size:19px; line-height:1.5; color:var(--paper); font-style:italic; max-width:44ch;}
.jh-story-stats{padding:20px 0 76px;}
.jh-story-stats .jh-stat-row{margin-top:18px;}
.jh-story-cta{
padding:76px 0; text-align:center; border-top:1px solid var(--line);
}
.jh-story-cta h2{font-size:clamp(30px,4.6vw,52px); max-width:16ch; margin:0 auto 30px;}
@media (max-width:820px){
.jh-story-grid{grid-template-columns:1fr;}
.jh-story-reverse .jh-story-media{order:1;}
.jh-story-reverse .jh-story-copy{order:2;}
.jh-story-media img{aspect-ratio:4/3;}
}