/* Archivo and Instrument Sans dropped 20 Aug 2026 - nothing references them
any more, and loading five families through a render-blocking @import was
costing more than it bought. Three families now: Young Serif (headings),
Figtree (body/UI), DM Mono (labels and figures). */
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Young+Serif&family=Figtree:wght@400;500;600;700;800&display=swap');
/* ==========================================================================
JE TOKENS — brand fonts and colours, single source of truth
Previously declared twice, independently, inside body.single-product
(JE PHASE 2) and body.term-jute-bags-for-branding-or-promotions
(JE PHASE 5) - a colour change meant editing both blocks and hoping they
were not missed a third time on the next page that needed them. Moved
to :root so every var(--je-*) reference anywhere in this file - present
or future - now resolves from exactly one place.
6 Aug 2026, second pass: every remaining raw hex colour literal in this
file (outside this block) has been converted to reference one of these
tokens - header nav, My Account, category titles, shadows, everything.
A first pass only matched the exact hex strings already tokenized here,
which missed near-duplicate shades doing the same visual job with
slightly drifted values - found by auditing every distinct hex literal
still left in the file afterwards, not by re-guessing the same list.
(Deliberately describing these by NAME below, not by hex digit, after
the first version of this comment quoted the literal values it was
explaining and a later find-and-replace pass mangled its own prose the
same way it mangled the CSS - this paragraph is now exempt from that
class of accident by construction.)
My Account's button-hover green and its lost-password hover colour
were both a very slightly different shade from --je-green-deep -
close enough to look identical, never actually the same value.
Consolidated into --je-green-deep, the token that role already
exists for.
My Account's select2 dropdown text and its lost-password link's
default colour were each their own near-black, doing exactly the
job --je-ink already does. Consolidated into --je-ink.
Three genuinely distinct colours had no token at all and got one added,
rather than being force-mapped onto an existing value that would have
changed how they render:
--je-cream-deep - a deliberately DARKER shade than --je-cream, used
only on :hover/:drag-hover states (the WhatsApp button, the file
upload dropzone). Mapping it onto --je-cream instead would have
made the hover state indistinguishable from rest - the opposite of
what a hover state is for.
--je-white - crisp white button and badge text, distinct from
--je-paper's warm off-white background tone. Visually close, not
the same design decision, so kept as its own token.
--je-muted-inverse - the closing CTA band's paragraph colour, muted
text sized for the dark --je-ink background rather than for paper.
Zero raw hex colour literals remain anywhere in this file outside this
block. */
:root{
/* Migrated to Young Serif + Figtree (20 Aug 2026), the Earth & Green
pairing, so product pages match the category pages instead of
switching typeface mid-journey. These now ALIAS --je-serif/--je-sans
rather than naming Archivo/Instrument Sans, which are no longer
loaded - one definition, so the two can never drift apart again.
Kept as names rather than search-replaced across the file because
every Phase 2/3 product rule already references them; repointing the
token migrates all of it at once. */
--je-display:var(--je-serif);
--je-body:var(--je-sans);
--je-mono:'DM Mono', ui-monospace, monospace;
--je-green:#03AC13;
--je-green-deep:#02790D;
--je-sand:#EFE6D3;
--je-cream:#FAF4E8;
--je-cream-deep:#F3EAD8;
--je-ochre:#B07D2B;
--je-paper:#FDFBF6;
--je-white:#FFFFFF;
--je-ink:#241A12;
--je-rule:#D9CDB6;
--je-muted:#7C6A56;
--je-muted-inverse:#C9B9A0;
--je-soil:#4A3423;
/* ---- Earth & Green theme (theme 3 of the homepage design preview,
picked 20 Aug 2026) ----
The palette was already here - Sand, Soil, Ochre and Green are the
same values the preview used. What the preview did differently was
how it APPLIES them, and that is what these aliases name:
ground = Sand, not near-white paper. The page sits on the warm
tone and cards lift off it in Cream. Painting the ground
white and the cards white, as the first pass did, is why
the design read flat - there was no layering to see.
primary = Soil for headings and dark bands, not near-black Ink.
on-primary = Cream text on those dark bands.
Aliases rather than renamed tokens so the existing Phase 2/3 product
page styling, which is built on --je-ink and --je-paper, keeps
working untouched. */
--je-ground:var(--je-sand);
--je-surface:var(--je-cream);
--je-primary:var(--je-soil);
--je-on-primary:var(--je-cream);
/* Young Serif + Figtree are the preview's pairing. Kept as separate
tokens from --je-display/--je-body so the two type systems can
coexist while the rollout is category-pages-only. */
--je-serif:'Young Serif', Georgia, serif;
--je-sans:'Figtree', system-ui, -apple-system, sans-serif;
/* A deepened ochre, for ochre used as a BACKGROUND behind small text.
--je-ochre (#B07D2B) is a mid-tone: white on it is 3.6:1 and Soil on
it is 3.2:1, so neither clears the 4.5:1 WCAG AA needs for text at
the announcement bar's 10.5px. Nothing sits on the brand ochre safely
at that size, so the background is darkened instead of the text being
nudged around. White on this is 4.84:1.
Use --je-ochre for ochre AS text/accents on light grounds; use this
only where ochre is the ground. */
--je-ochre-deep:#96691F;
/* Text-weight variants, needed because the Earth & Green ground is Sand
rather than white and that costs roughly a stop of contrast:
--je-muted on Sand = 4.18:1 (fails AA; it passes on Cream at 4.73)
--je-ochre on Sand = 2.91:1 (fails badly)
--je-ochre on Cream = 3.30:1 (also fails)
So ochre is not usable as small text anywhere in this palette, and
--je-muted is only safe on the lighter Cream surface. These two are
the same hues carried down until they clear 4.5:1 on both grounds:
--je-muted-deep on Sand = 5.27:1
--je-ochre-text on Sand = 5.39:1, on Cream = 6.10:1
Keep --je-ochre for ochre as a BACKGROUND or a large graphic element,
and --je-ochre-text wherever it is set as type. */
--je-muted-deep:#6B5B48;
--je-ochre-text:#7A5518;
/* Ochre as text on a DARK ground - the footer's column headings. The
other two ochres both fail there, in opposite directions:
--je-ochre on Soil = 3.20:1 (too dark)
--je-ochre-text on Soil = 1.55:1 (far too dark; it is built to sit
on Sand, which is the reverse job)
Carried up until it clears on Soil at 5.09:1. So the palette now holds
three ochres, each for one specific ground: -text on light, -deep as a
background behind white, and this one as text on dark. */
--je-ochre-on-dark:#D9A247;
}
/* ================= END JE TOKENS ================= */
/* ==========================================================================
JE SITE — content container width
The WooCommerce Product Catalog layout in Appearance > Customize was
switched to Full Width sitewide (6 Aug 2026) to match the Single Product
template. Measured live afterwards: .content-container.site-container
carried max-width:none AND padding:0 on every page, not just a wider
cap - the Customizer control removed the gutter along with the box, so
text ran to the literal browser edge and the branding-page hero's photo
ended up stranded far right with a dead gap before it.
This restores a real cap and a real gutter without undoing the Full
Width intent: still much wider than the old 1290px box, still no hard
"boxed card" look, but nothing touches the edge and nothing sprawls
past a sane reading width on an ultrawide monitor. Site-wide, matching
where the Customizer setting itself applies - not scoped to one page.
Padding is a flat 24px up to 1024px, matching JE HEADER P's mobile
gutter exactly rather than approximately: an earlier version of this
rule used clamp(20px, 3vw, 48px) at every width, which is a continuous
vw-based curve, while JE HEADER P is a flat 24px - the two only agreed
at the single viewport width where 3vw happens to equal 24px (800px),
and drifted apart everywhere else below that. A flat value below
1025px and the SAME clamp() above it, split at the exact breakpoint
JE HEADER R also uses, is the only way to guarantee they compute
identically at every width, not just coincide at one.
JE HEADER R (below) uses these exact numbers at the exact same
breakpoints so the header stays aligned with content everywhere. If
these values change, change them there too.
1600px -> 1800px -> 1880px, clamp ceiling 48px -> 40px -> 32px (both
6 Aug 2026): asked for wider still, closer to the browser edges on
large monitors, twice in the same session. Widening the cap and
trimming the gutter's top end both push the same direction - more
usable width, less dead margin - without going back to the broken
zero-padding state this block was written to fix. */
.content-container.site-container{
max-width: 1880px !important;
margin-inline: auto !important;
padding-inline: 24px !important;
}
@media (min-width: 1025px){
.content-container.site-container{
padding-inline: clamp(24px, 1.6vw, 32px) !important;
}
}
/* ================= END JE SITE — content container width ================= */
/* FIX: Shop page (Bags) footer not visible */
body.woocommerce-shop,
body.page-template-default.page-id-{
min-height: auto !important;
height: auto !important;
overflow-y: auto !important;
}
/* Release Elementor containers that block footer */
body.woocommerce-shop .elementor-section,
body.woocommerce-shop .elementor-container,
body.woocommerce-shop .elementor-widget-wrap,
body.woocommerce-shop .e-con,
body.woocommerce-shop .e-con-inner{
min-height: auto !important;
height: auto !important;
overflow: visible !important;
}
/* Ensure footer is reachable */
body.woocommerce-shop footer,
body.woocommerce-shop .site-footer,
body.woocommerce-shop #colophon{
position: relative !important;
display: block !important;
visibility: visible !important;
}
/* ===============================
Juteearth – Category Title Styling
=============================== */
/* DESKTOP & TABLET (default) */
.woocommerce ul.products li.product-category
.woocommerce-loop-category__title {
font-size: 25px !important; /* Desktop size */
font-weight: 500 !important;
color: var(--je-green) !important;
text-align: center;
}
/* MOBILE ONLY */
@media (max-width: 767px) {
.woocommerce ul.products li.product-category
.woocommerce-loop-category__title {
font-size: 29px !important; /* Mobile size */
font-weight: 500 !important;
}
}
/* Remove category product count */
.woocommerce ul.products li.product-category
.woocommerce-loop-category__title mark.count {
display: none !important;
}
/* =====================================================
Juteearth – My Account Page Styling
Kadence + WooCommerce (Login & Register)
===================================================== */
/* ---------- BUTTONS (Login & Register) ---------- */
body.woocommerce-account .woocommerce form .button,
body.woocommerce-account .woocommerce-Button.button {
background-color: var(--je-green) !important; /* Brand Green */
color: var(--je-white) !important;
border: 2px solid var(--je-green) !important;
border-radius: 12px !important;
padding: 14px 32px !important;
font-size: 16px !important;
font-weight: 700 !important;
letter-spacing: 0.3px;
cursor: pointer;
transition: all 0.25s ease-in-out;
box-shadow: 0 10px 24px rgba(3, 172, 19, 0.25);
}
/* Hover */
body.woocommerce-account .woocommerce form .button:hover,
body.woocommerce-account .woocommerce-Button.button:hover {
background-color: var(--je-green-deep) !important;
border-color: var(--je-green-deep) !important;
color: var(--je-white) !important;
transform: translateY(-2px);
box-shadow: 0 14px 28px rgba(3, 172, 19, 0.35);
}
/* Active */
body.woocommerce-account .woocommerce form .button:active {
transform: translateY(0);
box-shadow: 0 6px 14px rgba(3, 172, 19, 0.25);
}
/* ---------- INPUT FIELDS ---------- */
body.woocommerce-account .woocommerce form .input-text {
border: 1.8px solid var(--je-green) !important;
border-radius: 10px !important;
padding: 12px 14px !important;
font-size: 15px;
transition: all 0.2s ease-in-out;
}
/* Input focus */
body.woocommerce-account .woocommerce form .input-text:focus {
outline: none !important;
border-color: var(--je-green) !important;
box-shadow: 0 0 0 4px rgba(3, 172, 19, 0.18) !important;
}
/* ---------- CHECKBOX & LINKS ---------- */
body.woocommerce-account .woocommerce form .woocommerce-form__label span,
body.woocommerce-account .woocommerce a {
color: var(--je-green);
font-weight: 500;
}
/* ---------- MOBILE OPTIMIZATION ---------- */
@media (max-width: 768px) {
body.woocommerce-account .woocommerce form .button,
body.woocommerce-account .woocommerce-Button.button {
width: 100% !important;
padding: 14px !important;
text-align: center;
}
}
/* ---------- LOST PASSWORD LINK (FORCE BRAND GREEN) ---------- */
body.woocommerce-account .woocommerce-form-login .lost_password a,
body.woocommerce-account .woocommerce-form-login p.lost_password a {
color: var(--je-ink) !important;
font-weight: 600;
text-decoration: none;
}
/* Hover effect */
body.woocommerce-account .woocommerce-form-login .lost_password a:hover,
body.woocommerce-account .woocommerce-form-login p.lost_password a:hover {
color: var(--je-green-deep) !important;
text-decoration: underline;
}
/* =================================================
FIX: My Account B2B dropdown going behind footer
Kadence + WooCommerce + Select2
================================================= */
/* 1️⃣ Ensure account content stacks above footer */
body.woocommerce-account #primary,
body.woocommerce-account .site-main,
body.woocommerce-account .content-area {
position: relative;
z-index: 10;
}
/* 2️⃣ Force Select / Select2 dropdown above everything */
/* =========================================================
Juteearth – FIX footer overlay + dropdown behind footer
Kadence + WooCommerce My Account / Register fields
========================================================= */
/* 1) Make footer NEVER overlap content */
#colophon,
.site-footer,
.kadence-footer-wrap,
.kadence-footer {
position: relative !important;
bottom: auto !important;
top: auto !important;
transform: none !important;
z-index: 1 !important;
}
/* 2) Ensure page content always has enough space before footer */
body.woocommerce-account #primary,
body.woocommerce-account .content-area,
body.woocommerce-account .site-main {
position: relative !important;
z-index: 5 !important;
padding-bottom: 260px !important; /* increase if footer is tall */
}
/* 3) Force ALL dropdown menus & select2 above footer */
.select2-container,
.select2-container--open,
.select2-dropdown,
.select2-results,
.select2-results__options {
z-index: 999999 !important;
}
/* 4) If your “Country/State” or B2B fields are NOT select2 */
body.woocommerce-account select,
body.woocommerce-account .select2-selection,
body.woocommerce-account .select2-container {
position: relative !important;
z-index: 999999 !important;
}
/* Dropdown styling */
body.woocommerce-account .select2-container .select2-selection--single {
border: 1.8px solid var(--je-green) !important;
border-radius: 10px !important;
height: 46px !important;
display: flex !important;
align-items: center !important;
padding: 0 12px !important;
}
body.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__rendered {
color: var(--je-ink);
line-height: 46px !important;
}
body.woocommerce-account .select2-container--default .select2-results__option--highlighted {
background: var(--je-green) !important;
color: var(--je-white) !important;
}
/* =========================================================
FIX: Register fields hidden (clipped) + Select overflow
Kadence + WooCommerce My Account
========================================================= */
/* 1) IMPORTANT: stop clipping/hiding the register form */
body.woocommerce-account .woocommerce .u-column2,
body.woocommerce-account .woocommerce .woocommerce-form-register {
overflow: visible !important; /* <-- this brings back missing fields */
height: auto !important;
max-height: none !important;
}
/* 2) Make sure all rows are normal flow and full width */
body.woocommerce-account .woocommerce form .form-row {
float: none !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
clear: both !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* 3) Box sizing prevents “out of box” width */
body.woocommerce-account .woocommerce,
body.woocommerce-account .woocommerce * {
box-sizing: border-box !important;
}
/* 4) Select2 / SelectWoo must stay inside container */
body.woocommerce-account .woocommerce form .select2-container,
body.woocommerce-account .woocommerce form .select2-container[style] {
width: 100% !important;
max-width: 100% !important;
display: block !important;
}
/* 5) Visible select styling (inside the box) */
body.woocommerce-account .woocommerce form .select2-selection--single {
width: 100% !important;
max-width: 100% !important;
border: 2px solid var(--je-green) !important;
border-radius: 10px !important;
height: 46px !important;
padding: 0 38px 0 14px !important; /* space for arrow */
}
/* 6) Dropdown above footer */
.select2-dropdown,
.select2-container--open {
z-index: 999999 !important;
}
/* Fix Select2 dropdown overlay on My Account */
body.woocommerce-account .select2-container { width:100% !important; }
body.woocommerce-account .select2-dropdown { z-index: 999999 !important; }
/* ===============================
MOBILE OFFERS PAGE: ENABLE X-SCROLL + FIX BUTTON WRAP
Works for B2BKing / Woo MyAccount tables
================================= */
/* 1) Stop theme wrappers from killing horizontal scroll */
html, body{
overflow-x: visible !important;
}
/* 2) Make the My Account content area allow horizontal scroll when needed */
body.woocommerce-account .woocommerce-MyAccount-content{
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
touch-action: pan-x pan-y;
}
/* 3) Any table inside My Account (offers) should be scrollable */
body.woocommerce-account .woocommerce-MyAccount-content table{
min-width: 680px; /* forces overflow on small screens */
}
/* 4) Create scroll behavior around wide tables without breaking layout */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce,
body.woocommerce-account .woocommerce-MyAccount-content .entry-content,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-MyAccount-content{
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
touch-action: pan-x pan-y;
}
/* 5) If plugin uses wrappers, make them scroll too (safe even if not present) */
.b2bking_offers_container,
.b2bking_offers_table,
.b2bking_myaccount_offers,
.woocommerce-account .offers,
.woocommerce-account .available-offers{
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
touch-action: pan-x pan-y;
}
/* 6) Buttons row: prevent Add to Cart + PDF from going out of screen */
body.woocommerce-account .woocommerce-MyAccount-content a.button,
body.woocommerce-account .woocommerce-MyAccount-content button,
body.woocommerce-account .woocommerce-MyAccount-content .button{
max-width: 100%;
white-space: nowrap;
}
@media (max-width: 767px){
/* If buttons are in same row container, allow wrap */
.woocommerce-account .woocommerce-MyAccount-content .actions,
.woocommerce-account .woocommerce-MyAccount-content .buttons,
.woocommerce-account .woocommerce-MyAccount-content .offer-actions{
display: flex !important;
flex-wrap: wrap !important;
gap: 10px;
}
.woocommerce-account .woocommerce-MyAccount-content .actions a,
.woocommerce-account .woocommerce-MyAccount-content .buttons a,
.woocommerce-account .woocommerce-MyAccount-content .offer-actions a{
flex: 1 1 160px;
}
}
/* ✅ FINAL FIX: Stop "Edit" wrapping on mobile (Checkout Blocks address card) */
@media (max-width: 600px){
/* Make the card a positioning context */
.wc-block-components-address-card{
position: relative !important;
}
/* Put actions (Edit) at top-right, always */
.wc-block-components-address-card__actions{
position: absolute !important;
top: 12px !important;
right: 12px !important;
z-index: 5 !important;
width: auto !important;
min-width: 44px !important; /* enough space for tap + no wrap */
display: inline-flex !important;
align-items: center !important;
justify-content: flex-end !important;
}
/* Force the word "Edit" to stay one line */
.wc-block-components-address-card__actions a,
.wc-block-components-address-card__edit{
white-space: nowrap !important;
display: inline-flex !important;
}
/* Give the header space so text doesn't collide with Edit */
.wc-block-components-address-card__header{
padding-right: 70px !important;
}
}
/* ✅ FIX: dropdown menu should overlay My Account content (only /my-account/) */
body.woocommerce-account #masthead,
body.woocommerce-account .site-header,
body.woocommerce-account header{
position: relative !important;
z-index: 999999 !important;
overflow: visible !important;
}
/* Make parent LI the anchor for absolute dropdown */
body.woocommerce-account .menu-item-has-children{
position: relative !important;
}
/* Force dropdown to sit above everything */
body.woocommerce-account .sub-menu,
body.woocommerce-account .nav-menu .sub-menu,
body.woocommerce-account .main-navigation ul ul{
position: absolute !important;
z-index: 1000000 !important;
}
/* Ensure My Account content can't overlay the header */
body.woocommerce-account .site,
body.woocommerce-account .content-area,
body.woocommerce-account .entry-content,
body.woocommerce-account .woocommerce{
position: relative !important;
z-index: 1 !important;
}
/* =========================================================
Header only: My Account menu badge/icon
Class: .je-account-badge (added by PHP)
========================================================= */
/* BUTTON */
.elementor-location-header a.je-account-badge{
font-size: 0 !important; /* hide menu text */
line-height: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 42px !important;
height: 42px !important;
padding: 0 !important;
border-radius: 999px !important;
background:var(--je-white) !important;
text-decoration: none !important;
}
/* hide any inner spans/icons from menu widget */
.elementor-location-header a.je-account-badge *{
display: none !important;
}
/* DEFAULT (logged out): PROFILE ICON ALWAYS VISIBLE */
.elementor-location-header a.je-account-badge::before{
content: "" !important;
width: 22px !important;
height: 22px !important;
display: inline-block !important;
opacity: 1 !important;
visibility: visible !important;
background-repeat: no-repeat !important;
background-size: contain !important;
background-position: center !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23111827'%3E%3Cpath d='M12 12a4 4 0 1 0-4-4 4 4 0 0 0 4 4Zm0 2c-4.42 0-8 2.24-8 5v1h16v-1c0-2.76-3.58-5-8-5Z'/%3E%3C/svg%3E") !important;
}
/* LOGGED IN: show INITIAL (always, not hover) */
.elementor-location-header a.je-account-badge[data-initial]:not([data-initial=""])::before{
content: attr(data-initial) !important;
width: 42px !important;
height: 42px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 16px !important;
font-weight: 800 !important;
line-height: 1 !important;
color: var(--je-white) !important;
background-color: var(--je-green) ;
border-radius : 999%;
background-image: none !important; /* remove svg */
}
/* Optional hover: only background change (badge/icon stays visible) */
.elementor-location-header a.je-account-badge:hover{
background: var(--je-white) !important;
}
selector {
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* ============================================
STICKY GALLERY — bounded by summary column
============================================ */
@media (min-width: 1025px) {
body.single-product .je-product-top {
display: flex !important;
align-items: flex-start !important;
gap: 40px !important;
}
body.single-product .je-product-top > .woo-variation-product-gallery {
flex: 0 0 48% !important;
max-width: 48% !important;
position: -webkit-sticky !important;
position: sticky !important;
top: 120px !important;
float: none !important;
margin: 0 !important;
}
body.single-product .je-product-top > .summary {
flex: 1 1 auto !important;
width: auto !important;
max-width: 100% !important;
float: none !important;
margin: 0 !important;
}
body.single-product div.product > .woocommerce-tabs,
body.single-product div.product > .related {
clear: both !important;
width: 100% !important;
}
}
/* Hide ₹0 price next to shipping options (freight quoted separately) */
.wc-block-components-shipping-rates-control
.wc-block-components-radio-control__secondary-label {
display: none !important;
}
/* Style the description text under each option */
.wc-block-components-shipping-rates-control
.wc-block-components-radio-control__description {
font-size: 13px !important;
line-height: 1.55 !important;
color: var(--je-soil) !important;
margin-top: 6px !important;
}
/* Order summary: hide the "Free" value on the Delivery row */
/* Hide duplicate shipping text in order summary */
.wc-block-components-totals-shipping {
display: none !important;
}
/* =========================================================
JUTEEARTH — Phase 1 product page blocks
========================================================= */
.je-block{margin:40px 0}
.je-block h3{
font-size:clamp(20px,2.4vw,28px);
line-height:1.15;letter-spacing:-.02em;
color:var(--je-ink);margin:0 0 6px;
}
.je-block .je-lede{color:var(--je-muted);margin:0 0 22px;max-width:56ch}
.je-lbl{
font-family:ui-monospace,'SF Mono',Menlo,monospace;
font-size:10px;letter-spacing:.14em;text-transform:uppercase;
color:var(--je-muted);display:block;margin-bottom:5px;
}
/* spec sheet */
.je-spec{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:1px;
background:var(--je-rule);
border:1px solid var(--je-rule);
border-radius:3px;
overflow:hidden;
}
@media(max-width:1000px){.je-spec{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.je-spec{grid-template-columns:1fr}}
.je-spec > div{background:var(--je-paper);padding:16px 18px}
.je-spec strong{display:block;font-size:15.5px;color:var(--je-ink);line-height:1.3}
.je-spec em{
display:block;font-style:normal;font-size:13px;
color:var(--je-muted);margin-top:3px;
}
/* shipping routes */
.je-ship{
display:grid;grid-template-columns:1.1fr 1fr;
gap:clamp(24px,4vw,48px);align-items:start;
}
.je-ship p{color:var(--je-soil);margin:0 0 14px;max-width:54ch}
.je-vow{
border-left:3px solid var(--je-green);padding-left:16px;
font-size:18px;font-weight:600;line-height:1.35;
color:var(--je-ink);margin-top:20px !important;
}
.je-routes{
display:grid;gap:1px;background:var(--je-rule);
border:1px solid var(--je-rule);border-radius:3px;overflow:hidden;
}
.je-route{
background:var(--je-paper);padding:16px 18px;
display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:start;
}
@media(max-width:520px){
.je-route{grid-template-columns:1fr;gap:6px}
}.je-route .je-where{
font-family:ui-monospace,'SF Mono',Menlo,monospace;
font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
color:var(--je-green-deep);padding-top:3px;white-space:nowrap;
}
.je-route b{display:block;font-size:15px;margin-bottom:2px;color:var(--je-ink)}
.je-route span{font-size:13.5px;color:var(--je-muted);line-height:1.45;display:block}
/* client row */
.je-clients{display:flex;gap:9px;flex-wrap:wrap;margin-top:26px}
.je-clients span{
border:1px solid var(--je-rule);background:var(--je-paper);border-radius:2px;
padding:8px 14px;color:var(--je-soil);
font-family:ui-monospace,'SF Mono',Menlo,monospace;
font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
}
@media(max-width:860px){
.je-ship{grid-template-columns:1fr}
}
/* Hide Jetpack related posts on product pages only */
body.single-product .jp-relatedposts{
display:none !important;
}
/* ==========================================================================
JE PHASE 2 — Single product restyle
Scope: body.single-product only. Layers on existing output.
REVERT: delete everything from this header to the END OF JE PHASE 2 marker.
Requires the Young Serif/Figtree/DM Mono @import on line 1 of this file.
Token declarations (--je-*) moved to :root under JE TOKENS near the top
of this file (6 Aug 2026) - this used to redeclare them locally. */
/* ---------- Title ---------- */
body.single-product h1.product_title.entry-title{
font-family:var(--je-display);
font-weight:400; /* Young Serif ships one weight; 600 synthesises a smeared fake bold */
font-size:clamp(26px,3.2vw,38px);
line-height:1.12;
letter-spacing:-.02em;
color:var(--je-ink);
margin:0 0 14px;
}
/* ---------- Price: range, and the del/ins sale pair ---------- */
body.single-product .entry-summary > p.price,
body.single-product .woocommerce-variation-price .price{
font-family:var(--je-body);
font-size:30px;
font-weight:600;
line-height:1.25;
color:var(--je-ink);
margin:0 0 4px;
}
/* regular price: struck, small, muted */
body.single-product .entry-summary > p.price del,
body.single-product .woocommerce-variation-price del{
font-size:17px;
font-weight:400;
color:var(--je-muted);
opacity:1;
text-decoration:line-through;
text-decoration-thickness:1px;
margin-right:4px;
}
/* sale price: full size, no underline, no highlight */
body.single-product .entry-summary > p.price ins,
body.single-product .woocommerce-variation-price ins{
text-decoration:none !important;
background:none !important;
background-color:transparent !important;
font-weight:600;
color:var(--je-ink);
}
/* ---------- Price suffix ---------- */
body.single-product .woocommerce-price-suffix{
display:inline-block;
font-family:var(--je-mono);
font-size:10.5px;
font-weight:400;
letter-spacing:.1em;
text-transform:uppercase;
color:var(--je-muted);
margin-left:8px;
vertical-align:middle;
}
/* ---------- Variation attribute labels ---------- */
body.single-product table.variations th.label label{
display:block;
font-family:var(--je-mono);
font-size:10.5px;
font-weight:500;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--je-muted);
margin:0 0 8px;
}
body.single-product .woo-selected-variation-item-name{
font-family:var(--je-body);
font-size:14px;
font-weight:500;
letter-spacing:0;
text-transform:none;
color:var(--je-ink);
}
body.single-product table.variations td.value{ padding-bottom:6px; }
/* ---------- Variation swatch buttons ----------
Scoped to ul.single-product-variable-items on purpose:
ul.archive-variable-items in related products must stay untouched. */
body.single-product ul.single-product-variable-items li.variable-item.button-variable-item{
border:1px solid var(--je-rule) !important;
border-radius:2px !important;
background:var(--je-white) !important;
box-shadow:none !important;
padding:0 !important;
margin:0 8px 8px 0 !important;
transition:border-color .15s ease, background-color .15s ease;
}
body.single-product ul.single-product-variable-items li.variable-item.button-variable-item
.variable-item-span-button{
display:block;
font-family:var(--je-body);
font-size:13.5px;
font-weight:500;
line-height:1.2;
color:var(--je-soil);
padding:11px 16px;
}
body.single-product ul.single-product-variable-items li.variable-item.button-variable-item:hover{
border-color:var(--je-green) !important;
background:var(--je-cream) !important;
}
body.single-product ul.single-product-variable-items li.variable-item.button-variable-item.selected,
body.single-product ul.single-product-variable-items li.variable-item.button-variable-item[aria-checked="true"]{
border-color:var(--je-green-deep) !important;
background:var(--je-green) !important;
box-shadow:none !important;
}
body.single-product ul.single-product-variable-items li.variable-item.button-variable-item.selected
.variable-item-span-button,
body.single-product ul.single-product-variable-items li.variable-item.button-variable-item[aria-checked="true"]
.variable-item-span-button{
color:var(--je-white);
}
body.single-product ul.single-product-variable-items li.variable-item.disabled,
body.single-product ul.single-product-variable-items li.variable-item.out-of-stock{
opacity:.4;
}
body.single-product a.reset_variations{
font-family:var(--je-mono);
font-size:10.5px;
letter-spacing:.12em;
text-transform:uppercase;
color:var(--je-muted);
text-decoration:none;
border-bottom:1px solid var(--je-rule);
}
body.single-product a.reset_variations:hover{
color:var(--je-green-deep);
border-bottom-color:var(--je-green);
}
/* ---------- Quantity ---------- */
body.single-product form.cart .quantity input.qty{
font-family:var(--je-body);
font-size:15px;
font-weight:500;
color:var(--je-ink);
background:var(--je-white);
border:1px solid var(--je-rule);
border-radius:2px;
box-shadow:none;
height:48px;
padding:0 10px;
text-align:center;
}
body.single-product form.cart .quantity input.qty:focus{
outline:none;
border-color:var(--je-green);
box-shadow:0 0 0 3px rgba(3,172,19,.15);
}
/* ---------- Add to cart ---------- */
body.single-product form.cart button.single_add_to_cart_button{
font-family:var(--je-body);
font-size:14px;
font-weight:600;
letter-spacing:.02em;
text-transform:none;
color:var(--je-white);
background:var(--je-green);
border:1px solid var(--je-green);
border-radius:2px;
box-shadow:none;
height:48px;
padding:0 30px;
transition:background-color .15s ease, border-color .15s ease;
}
body.single-product form.cart button.single_add_to_cart_button:hover{
background:var(--je-green-deep);
border-color:var(--je-green-deep);
}
body.single-product form.cart button.single_add_to_cart_button.disabled,
body.single-product form.cart button.single_add_to_cart_button:disabled{
background:var(--je-rule);
border-color:var(--je-rule);
color:var(--je-muted);
opacity:1;
}
/* ---------- Tabs ---------- */
body.single-product .woocommerce-tabs ul.tabs.wc-tabs{
border-bottom:1px solid var(--je-rule);
padding:0;
margin:0 0 26px;
}
body.single-product .woocommerce-tabs ul.tabs.wc-tabs::before{ display:none; }
body.single-product .woocommerce-tabs ul.tabs.wc-tabs li{
background:none;
border:0;
border-radius:0;
box-shadow:none;
margin:0 26px 0 0;
padding:0;
}
body.single-product .woocommerce-tabs ul.tabs.wc-tabs li::before,
body.single-product .woocommerce-tabs ul.tabs.wc-tabs li::after{ display:none; }
body.single-product .woocommerce-tabs ul.tabs.wc-tabs li a{
display:block;
font-family:var(--je-mono);
font-size:11px;
font-weight:500;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--je-muted);
padding:0 0 12px;
border-bottom:2px solid transparent;
}
body.single-product .woocommerce-tabs ul.tabs.wc-tabs li.active a,
body.single-product .woocommerce-tabs ul.tabs.wc-tabs li a:hover{
color:var(--je-ink);
border-bottom-color:var(--je-green);
}
/* ---------- Description panel ---------- */
body.single-product .woocommerce-Tabs-panel--description h2{
font-family:var(--je-display);
font-weight:400; /* Young Serif ships one weight; 600 synthesises a smeared fake bold */
font-size:clamp(22px,2.4vw,28px);
line-height:1.15;
letter-spacing:-.015em;
color:var(--je-ink);
margin:0 0 14px;
}
body.single-product .woocommerce-Tabs-panel--description h3{
font-family:var(--je-display);
font-weight:400; /* Young Serif ships one weight; 600 synthesises a smeared fake bold */
font-size:clamp(18px,1.9vw,22px);
line-height:1.2;
letter-spacing:-.01em;
color:var(--je-ink);
margin:34px 0 12px;
}
body.single-product .woocommerce-Tabs-panel--description p{
font-family:var(--je-body);
font-size:15.5px;
line-height:1.7;
color:var(--je-soil);
}
/* ---------- Phase 1 blocks: typography refresh only ---------- */
body.single-product .je-block h3{ font-family:var(--je-display); }
body.single-product .je-lbl,
body.single-product .je-route .je-where,
body.single-product .je-clients span{ font-family:var(--je-mono); }
body.single-product .je-spec strong{ font-family:var(--je-body); font-weight:600; }
body.single-product .je-spec em,
body.single-product .je-block .je-lede,
body.single-product .je-ship p,
body.single-product .je-route b,
body.single-product .je-route span{ font-family:var(--je-body); }
body.single-product .je-vow{ font-family:var(--je-display); font-weight:400; }
/* ---------- Mobile ---------- */
@media (max-width:767px){
body.single-product .entry-summary > p.price,
body.single-product .woocommerce-variation-price .price{ font-size:26px; }
body.single-product form.cart button.single_add_to_cart_button{
width:100%;
padding:0 20px;
}
body.single-product .woocommerce-tabs ul.tabs.wc-tabs li{ margin-right:18px; }
}
/* ---------- Phase 3: live price ladder ---------- */
body.single-product .je-ladder{
margin:18px 0;
padding:16px 18px 14px;
background:var(--je-cream);
border:1px solid var(--je-rule);
border-radius:3px;
width:100%;
clear:both;
}
body.single-product .je-ladder__head{
display:flex;
justify-content:space-between;
align-items:baseline;
gap:12px;
flex-wrap:wrap;
margin-bottom:12px;
}
body.single-product .je-ladder__lbl,
body.single-product .je-ladder__tier{
font-family:var(--je-mono);
font-size:10.5px;
letter-spacing:.13em;
text-transform:uppercase;
}
body.single-product .je-ladder__lbl{ color:var(--je-muted); }
body.single-product .je-ladder__tier{ color:var(--je-green-deep); }
body.single-product .je-ladder__readout{
display:flex;
align-items:baseline;
gap:10px;
flex-wrap:wrap;
margin-bottom:16px;
}
body.single-product .je-ladder__was{
font-family:var(--je-body);
font-size:16px;
color:var(--je-muted);
text-decoration:line-through;
text-decoration-thickness:1px;
}
body.single-product .je-ladder__unit{
font-family:var(--je-display);
font-size:clamp(28px,3.4vw,38px);
font-weight:400; /* Young Serif is single-weight; it is already heavy enough to carry this */
line-height:1;
letter-spacing:0; /* negative tracking closes up a chunky serif and muddies the figures */
color:var(--je-ink);
}
body.single-product .je-ladder__per{
font-family:var(--je-mono);
font-size:10px;
letter-spacing:.1em;
text-transform:uppercase;
color:var(--je-muted);
}
body.single-product .je-ladder__bars{
display:grid;
grid-template-columns:repeat(7,1fr);
align-items:end;
gap:4px;
}
body.single-product .je-ladder__bar{
appearance:none;
border:0;
padding:0;
cursor:pointer;
background:var(--je-sand);
border-radius:2px 2px 0 0;
display:flex;
align-items:flex-start;
justify-content:center;
transition:background-color .15s ease;
}
body.single-product .je-ladder__bar:hover{ background:var(--je-rule); }
body.single-product .je-ladder__bar.is-current{ background:var(--je-green); }
body.single-product .je-ladder__pct{
font-family:var(--je-mono);
font-size:10px;
font-weight:500;
color:var(--je-soil);
padding-top:5px;
}
body.single-product .je-ladder__bar.is-current .je-ladder__pct{ color:var(--je-white); }
body.single-product .je-ladder__axis{
display:grid;
grid-template-columns:repeat(7,1fr);
gap:4px;
margin-top:5px;
}
body.single-product .je-ladder__axis span{
font-family:var(--je-mono);
font-size:10px;
color:var(--je-muted);
text-align:center;
}
body.single-product .je-ladder__axis span.is-current{
color:var(--je-ink);
font-weight:500;
}
body.single-product .je-ladder__nudge{
margin:14px 0 0;
padding-top:12px;
border-top:1px solid var(--je-rule);
font-family:var(--je-body);
font-size:13.5px;
line-height:1.5;
color:var(--je-soil);
}
body.single-product .je-ladder__nudge b{ color:var(--je-ink); font-weight:600; }
body.single-product .je-ladder__summary{
margin-top:14px;
padding-top:12px;
border-top:1px solid var(--je-rule);
}
body.single-product .je-ladder__row{
display:flex;
justify-content:space-between;
align-items:baseline;
gap:12px;
padding:5px 0;
font-family:var(--je-body);
font-size:13.5px;
line-height:1.4;
color:var(--je-soil);
}
body.single-product .je-ladder__row b{
font-weight:600;
color:var(--je-ink);
white-space:nowrap;
}
body.single-product .je-ladder__row.is-save b{ color:var(--je-green-deep); }
body.single-product .je-ladder__row.is-total{
margin-top:6px;
padding-top:11px;
border-top:1px solid var(--je-rule);
font-family:var(--je-display);
font-size:17px;
font-weight:400; /* single-weight face */
color:var(--je-ink);
}
body.single-product .je-ladder__row.is-total b{ font-size:20px; }
@media (max-width:520px){
body.single-product .je-ladder{ padding:14px; }
body.single-product .je-ladder__pct{ font-size:9px; }
body.single-product .je-ladder__axis span{ font-size:9px; }
body.single-product .je-ladder__row{ font-size:12.5px; }
body.single-product .je-ladder__row.is-total{ font-size:15px; }
body.single-product .je-ladder__row.is-total b{ font-size:17px; }
}
/* ---------- Phase 3: order desk card ----------
form.variations_form already contains the swatches, price, quantity and
add-to-cart button, and Barn2 renders its option fields inside the same
form - so a future handle-colour option lands inside the card for free. */
body.single-product form.variations_form{
position:relative;
border:1px solid var(--je-rule);
border-radius:4px;
background:var(--je-white);
padding:52px 20px 20px;
margin-top:18px;
}
body.single-product form.variations_form::before{
content:"Order desk" !important;
display:block !important; position:absolute;
top:0; left:0; right:0;
background:var(--je-ink);
color:var(--je-cream);
font-family:var(--je-mono);
font-size:10.5px;
letter-spacing:.16em;
text-transform:uppercase;
padding:11px 20px;
border-radius:3px 3px 0 0;
}
/* Selected chips move from solid green to ink. Green is reserved for
accents and actions; a green fill on every selected chip competed with
the CTA and contradicted the brand tokens. */
body.single-product ul.single-product-variable-items li.variable-item.button-variable-item.selected,
body.single-product ul.single-product-variable-items li.variable-item.button-variable-item[aria-checked="true"]{
border-color:var(--je-ink) !important;
background:var(--je-ink) !important;
}
body.single-product form.cart button.single_add_to_cart_button{
width:100%;
}
/* ---------- Phase 3: quantity block ----------
Sits above the ladder. The JS moves .quantity in here on every render. */
body.single-product .je-qty{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
flex-wrap:wrap;
margin:0 0 4px;
}
body.single-product .je-qty__lbl{
font-family:var(--je-mono);
font-size:10.5px;
letter-spacing:.13em;
text-transform:uppercase;
color:var(--je-muted);
}
body.single-product .je-qty .quantity{
margin:0 !important;
float:none !important;
display:block !important;
}
/* Orders run to 20,000, so the field has to hold five digits plus the
spinner arrows. The theme's default width clipped anything past two -
"300" rendered as "30". Width is set on the input rather than the
wrapper because WooCommerce sizes .quantity from its contents. */
body.single-product .je-qty input.qty,
body.single-product form.cart .quantity input.qty{
width:130px !important;
min-width:130px;
max-width:100%;
font-size:16px;
text-align:center;
}
/* Same clipping on the cart page, where the field showed "30(" at 300.
NOTE: this is the one rule in the Phase 3 work not scoped to
body.single-product - the cart is a different page and the bug is there
too. Deleting the Phase 2 block therefore also reverts this cart fix. */
body.woocommerce-cart td.product-quantity input.qty,
body.woocommerce-cart .quantity input.qty{
width:100px !important;
min-width:100px;
max-width:100%;
text-align:center;
}
@media (max-width:520px){
body.single-product .je-qty input.qty,
body.single-product form.cart .quantity input.qty{
width:110px !important;
min-width:110px;
}
}
/* ---------- Phase 3: WhatsApp secondary CTA ----------
Sits under Add to cart. Secondary by design: cream and outlined, never
green, so it reads as the alternative rather than competing with the
primary action. */
body.single-product .je-wa{
display:block;
width:100%;
box-sizing:border-box;
margin:14px 0 4px;
padding:17px 20px;
text-align:center;
font-family:var(--je-body);
font-size:14.5px;
font-weight:600;
letter-spacing:.01em;
line-height:1.2;
color:var(--je-ink);
background:var(--je-cream);
border:1px solid var(--je-rule);
border-radius:2px;
text-decoration:none;
transition:background-color .15s ease, border-color .15s ease;
}
body.single-product .je-wa:hover,
body.single-product .je-wa:focus{
background:var(--je-cream-deep);
border-color:var(--je-green);
color:var(--je-ink);
text-decoration:none;
}
/* The primary label now carries a total, so it can run long on narrow
screens. Let it wrap rather than overflow, and give the two buttons a
clear gap instead of the theme's default flush stacking. */
body.single-product form.cart button.single_add_to_cart_button{
white-space:normal;
line-height:1.3;
height:auto;
min-height:52px;
padding-top:14px;
padding-bottom:14px;
margin-bottom:0;
}
/* The variation wrapper holds the price row, the CTA and the WhatsApp
button. Space it off the ladder above it. */
body.single-product .woocommerce-variation-add-to-cart{
padding-top:2px;
}
@media (max-width:520px){
body.single-product .je-wa{
padding:15px 16px;
font-size:14px;
}
}
/* ---------- Phase 3: two corrections ----------
Additive overrides, placed after the rules they adjust so they win on
order rather than by editing those rules in place. */
/* 1. Hide the WooCommerce variation price row entirely.
It showed ₹89.00 struck against ₹84.00 - the regular and the 1-unit
price - while the ladder directly above showed the price actually
being charged. At 100 bags that read ₹84.00 here and ₹79.80 there:
the same bag, two prices, the wrong one larger and lower down the
page. Hiding only the struck ₹89.00 would have left ₹84.00 still
contradicting the ladder, so the whole row goes.
Safe because the ladder's readout now renders whenever a variation is
priced, including below the 50 minimum, so there is always a price on
screen. The ₹52.00 – ₹84.00 range higher up is a different element
and is untouched, so the page still shows a price before any variation
is selected. */
body.single-product .woocommerce-variation-price{
display:none;
}
/* 2. Centre the WhatsApp label.
Block plus padding left it sitting high in its box. Flex centres it on
both axes whatever height the box ends up. */
body.single-product .je-wa{
display:flex;
align-items:center;
justify-content:center;
min-height:54px;
}
/* ---------- Phase 3: type scale bump ----------
One override block rather than edits spread across a dozen existing
rules. Additive is safer to paste, and it keeps the whole size decision
in one place to tune again or delete outright.
Second pass, a step up from the first. The mono labels carry heavy
letter-spacing so they read smaller than their nominal size and take
the largest lift; body copy follows. */
/* Mono labels: PRICE LADDER, % OFF AT YOUR QUANTITY, QUANTITY */
body.single-product .je-ladder__lbl,
body.single-product .je-ladder__tier,
body.single-product .je-qty__lbl{
font-size:12.5px;
}
body.single-product .je-ladder__per{
font-size:12px;
}
body.single-product .je-ladder__pct,
body.single-product .je-ladder__axis span{
font-size:12px;
}
/* The headline per-bag price. Lifted so it still clearly outranks a
24px order total below it. */
body.single-product .je-ladder__unit{
font-size:clamp(31px,3.7vw,41px);
}
/* Struck 1-unit price beside it */
body.single-product .je-ladder__was{
font-size:19px;
}
/* Nudge line and the order summary rows */
body.single-product .je-ladder__nudge,
body.single-product .je-ladder__row{
font-size:16.5px;
}
/* Order total row */
body.single-product .je-ladder__row.is-total{
font-size:20px;
}
body.single-product .je-ladder__row.is-total b{
font-size:24px;
}
/* Secondary CTA */
body.single-product .je-wa{
font-size:16.5px;
}
/* Primary CTA, so it keeps pace with the button beneath it */
body.single-product form.cart button.single_add_to_cart_button{
font-size:15.5px;
}
/* Attribute labels above the swatches, and the selected value beside them */
body.single-product table.variations th.label label{
font-size:12.5px;
}
body.single-product .woo-selected-variation-item-name{
font-size:16px;
}
/* Swatch chip text */
body.single-product ul.single-product-variable-items li.variable-item.button-variable-item
.variable-item-span-button{
font-size:15.5px;
}
/* Quantity field */
body.single-product .je-qty input.qty,
body.single-product form.cart .quantity input.qty{
font-size:17px;
}
@media (max-width:520px){
body.single-product .je-ladder__pct,
body.single-product .je-ladder__axis span{
font-size:10.5px;
}
body.single-product .je-ladder__nudge,
body.single-product .je-ladder__row{
font-size:15px;
}
body.single-product .je-ladder__row.is-total{
font-size:17.5px;
}
body.single-product .je-ladder__row.is-total b{
font-size:20px;
}
body.single-product .je-wa{
font-size:15.5px;
}
body.single-product ul.single-product-variable-items li.variable-item.button-variable-item
.variable-item-span-button{
font-size:14.5px;
}
}
/* ---------- Phase 3: option rows ----------
Ledger rows with segmented controls. The variations table becomes three
stacked blocks: label left, current selection right, one joined control
beneath, hairline between. */
body.single-product table.variations,
body.single-product table.variations tbody,
body.single-product table.variations tr,
body.single-product table.variations td.value{
display:block;
width:100%;
border:0;
margin:0;
padding:0;
background:none;
}
/* The plugin writes the attribute name and a ": Selected Value" line in
here. That leading colon read as a rendering fault, and the header row
below states both facts better. */
body.single-product table.variations th.label{
display:none;
}
body.single-product table.variations tr{
padding:15px 0;
border-bottom:1px solid var(--je-sand);
}
body.single-product table.variations tr:first-child{ padding-top:4px; }
body.single-product table.variations tr:last-child{
border-bottom:0;
padding-bottom:8px;
}
/* Label left, current selection right */
body.single-product .je-opt__head{
display:flex;
justify-content:space-between;
align-items:baseline;
gap:10px;
flex-wrap:wrap;
margin-bottom:11px;
}
body.single-product .je-opt__lbl,
body.single-product .je-opt__val{
font-family:var(--je-mono);
font-size:11px;
text-transform:uppercase;
line-height:1.35;
}
body.single-product .je-opt__lbl{
letter-spacing:.13em;
color:var(--je-muted);
}
body.single-product .je-opt__val{
letter-spacing:.1em;
color:var(--je-ink);
text-align:right;
white-space:nowrap;
}
/* Segmented control: the border moves to the list, the chips become
segments divided by hairlines. Overrides the per-chip border, radius and
margin set in the Phase 2 block, so it has to come after it. */
body.single-product ul.single-product-variable-items{
display:inline-flex;
flex-wrap:wrap;
gap:0;
margin:0 !important;
padding:0 !important;
list-style:none;
border:1px solid var(--je-rule);
border-radius:2px;
overflow:hidden;
max-width:100%;
}
body.single-product ul.single-product-variable-items li.variable-item.button-variable-item{
border:0 !important;
border-right:1px solid var(--je-rule) !important;
border-radius:0 !important;
margin:0 !important;
background:var(--je-white) !important;
}
body.single-product ul.single-product-variable-items li.variable-item.button-variable-item:last-child{
border-right:0 !important;
}
body.single-product ul.single-product-variable-items li.variable-item.button-variable-item:hover{
background:var(--je-cream) !important;
}
body.single-product ul.single-product-variable-items li.variable-item.button-variable-item.selected,
body.single-product ul.single-product-variable-items li.variable-item.button-variable-item[aria-checked="true"]{
background:var(--je-ink) !important;
}
body.single-product ul.single-product-variable-items li.variable-item.button-variable-item
.variable-item-span-button{
padding:11px 20px;
text-align:center;
font-size:14px;
}
/* Size labels are down to M / L / XL, so widen those segments back out to
a comfortable tap target. */
body.single-product ul[data-attribute_name="attribute_sizes"]
li.variable-item.button-variable-item .variable-item-span-button{
padding:11px 24px;
}
/* Artwork note, with the green rule that marks it as an aside rather than
another control. */
body.single-product .je-print-note{
margin:12px 0 0;
border-left:3px solid var(--je-green);
border-radius:0;
padding:1px 0 1px 12px;
font-family:var(--je-body);
font-size:13.5px;
line-height:1.5;
color:var(--je-soil);
max-width:56ch;
}
/* CLEAR: a quiet exit, right-aligned under the last row. */
body.single-product a.reset_variations{
display:block;
width:100%;
text-align:right;
margin-top:12px;
border-bottom:0;
}
@media (max-width:520px){
body.single-product .je-opt__lbl,
body.single-product .je-opt__val{ font-size:10px; }
body.single-product .je-opt__val{ white-space:normal; }
body.single-product ul.single-product-variable-items li.variable-item.button-variable-item
.variable-item-span-button{
padding:10px 14px;
font-size:13.5px;
}
body.single-product ul[data-attribute_name="attribute_sizes"]
li.variable-item.button-variable-item .variable-item-span-button{
padding:10px 18px;
}
body.single-product .je-print-note{ font-size:13px; }
}
/* ---------- Phase 3: chip sizing correction ----------
The swatch plugin runs in "large size / squared" mode, which puts a fixed
height and min-width on each li - 75px on closure, 50px elsewhere - and
overrides the padding on the inner span down to 0 5px. The result was a
line of 16.8px text floating in a 75px box.
Size the chip from its own padding instead, so every segment is the same
height and only as wide as its label needs. !important throughout because
the plugin's own rules carry it. */
body.single-product ul.single-product-variable-items li.variable-item.button-variable-item{
height:auto !important;
min-height:0 !important;
width:auto !important;
min-width:0 !important;
line-height:normal !important;
display:flex !important;
align-items:stretch !important;
}
body.single-product ul.single-product-variable-items li.variable-item.button-variable-item
.variable-item-span-button{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
height:auto !important;
min-height:0 !important;
width:auto !important;
padding:12px 20px !important;
line-height:1.2 !important;
white-space:nowrap;
}
/* Size chips carry the dimensions on a second line. */
body.single-product .je-chip__sub{
display:block;
margin-top:4px;
font-family:var(--je-mono);
font-size:10.5px;
font-weight:400;
letter-spacing:.04em;
line-height:1.2;
color:var(--je-muted);
}
body.single-product ul.single-product-variable-items li.variable-item.button-variable-item.selected
.je-chip__sub,
body.single-product ul.single-product-variable-items li.variable-item.button-variable-item[aria-checked="true"]
.je-chip__sub{
color:rgba(250,244,232,.72);
}
/* Two lines need a wider floor than a bare M / L / XL did. */
body.single-product ul[data-attribute_name="attribute_sizes"]
li.variable-item.button-variable-item .variable-item-span-button{
min-width:80px !important;
padding:11px 16px !important;
}
/* Any size row of MORE THAN THREE options wraps unevenly under the
segmented control's natural content width - four short chips fill row
one, leaving row two with a couple of chips and a wide empty gap. First
found on one Juco product (six sizes); a second Juco product turned out
to use a different attribute name for the identical problem, which is
why this is written to catch both rather than either one by name.
:has(li:nth-child(4)) gates it to rows with FOUR OR MORE chips, so the
canvas products' three-chip M / L / XL row - under either attribute name
below - is completely untouched. Forcing three equal columns onto
exactly three items would be a no-op today, but there is no reason to
depend on that staying true.
[data-attribute_name^="attribute_size"] (prefix match) covers BOTH
spellings in one selector: attribute_sizes (canvas, and one Juco
product) and attribute_size (the other Juco product). The two Juco
products do not even agree with each other on which to use, so name-
matching either one alone was never going to cover the other.
flex-basis rather than width: the general rule above sets width:auto
!important on this same selector, and flex-basis takes precedence over
width on a flex item whenever it is not itself "auto", so this wins
without needing a specificity fight. */
body.single-product ul[data-attribute_name^="attribute_size"]:has(li.variable-item:nth-child(4))
li.variable-item.button-variable-item{
flex:0 0 calc(33.333% - 1px) !important;
box-sizing:border-box !important;
justify-content:center !important;
}
body.single-product ul[data-attribute_name^="attribute_size"]:has(li.variable-item:nth-child(4))
li.variable-item.button-variable-item .variable-item-span-button{
width:100% !important;
box-sizing:border-box !important;
}
/* Row divider. The segmented control was designed for one row, so it only
ever carries a border-right between columns - forcing a size row into two
rows above left the seam between them bare, with nothing marking where
row one ends and row two begins. Same rule (colour, weight) as the column
dividers, just turned 90 degrees.
:nth-child(n+4) is "everything from the second row on" for a 3-column
grid, true for ANY item count above 3 - a 5-chip row wraps 3+2, and item
4 still correctly starts the new row. */
body.single-product ul[data-attribute_name^="attribute_size"]:has(li.variable-item:nth-child(4))
li.variable-item.button-variable-item:nth-child(n+4){
border-top:1px solid var(--je-rule) !important;
}
@media (max-width:520px){
body.single-product ul.single-product-variable-items li.variable-item.button-variable-item
.variable-item-span-button{
padding:11px 15px !important;
}
body.single-product ul[data-attribute_name="attribute_sizes"]
li.variable-item.button-variable-item .variable-item-span-button{
min-width:70px !important;
padding:10px 12px !important;
}
body.single-product .je-chip__sub{ font-size:9.5px; }
}
/* ---------- Phase 3: option area type, 1.3x ----------
Every size in the closure / screen print / size block multiplied by 1.3
and rounded to a half pixel. Chip padding and the size min-width grow
with it, or the larger text would sit tight against the segment edges.
!important on the chip font-size because the swatch plugin sets its own
and beat the earlier declaration. */
body.single-product .je-opt__lbl,
body.single-product .je-opt__val{
font-size:14.5px;
}
body.single-product ul.single-product-variable-items li.variable-item.button-variable-item
.variable-item-span-button{
font-size:18px !important;
padding:13px 22px !important;
}
body.single-product .je-chip__sub{
font-size:13.5px;
margin-top:5px;
}
body.single-product ul[data-attribute_name="attribute_sizes"]
li.variable-item.button-variable-item .variable-item-span-button{
min-width:98px !important;
padding:12px 18px !important;
}
body.single-product .je-print-note{
font-size:17.5px;
max-width:48ch;
}
body.single-product a.reset_variations{
font-size:13.5px;
}
@media (max-width:520px){
body.single-product .je-opt__lbl,
body.single-product .je-opt__val{ font-size:13px; }
body.single-product ul.single-product-variable-items li.variable-item.button-variable-item
.variable-item-span-button{
font-size:17.5px !important;
padding:12px 16px !important;
}
body.single-product ul[data-attribute_name="attribute_sizes"]
li.variable-item.button-variable-item .variable-item-span-button{
min-width:88px !important;
padding:11px 13px !important;
}
body.single-product .je-chip__sub{ font-size:12.5px; }
body.single-product .je-print-note{ font-size:17px; }
body.single-product a.reset_variations{ font-size:12.5px; }
}
/* ---------- Phase 3: Barn2 option rows ----------
REPLACES the earlier blind "Phase 3: Barn2 option rows" block. That one
guessed [class*="wpo-option"], which matches p.wpo-option-name - the
LABEL - not the row. Written now against the real markup:
.wpo-options-container
.wpo-layout-default
.wpo-field.wpo-field-datepicker.wpo-field-required
p.wpo-option-name > span.wpo-option-name__text
+ span.wpo-field-required-symbol
div.flatpickr-wrapper > input.wpo-datepicker-alt-input
p.wpo-field-description
.wpo-field.wpo-field-color_swatches
ul.wpo-color-checkboxes > li.wpo-choice-item
> label > input[radio] + span.wpo-swatch-inner
.wpo-field.wpo-field-file_upload
div.wpo-file-dropzone.dropzone > div.dz-message > button.dz-button
The container sits inside .woocommerce-variation-add-to-cart, so these
rows land between the price row and the quantity/CTA. */
body.single-product .wpo-options-container,
body.single-product .wpo-layout-default{
display:block;
width:100%;
margin:0;
padding:0;
}
/* Row treatment, matching the WooCommerce attribute rows above. */
body.single-product .wpo-field{
display:block;
width:100%;
margin:0;
padding:15px 0;
border-bottom:1px solid var(--je-sand);
}
body.single-product .wpo-field:last-child{
border-bottom:0;
padding-bottom:8px;
}
/* Label left, status right. */
body.single-product .wpo-field p.wpo-option-name{
display:flex;
justify-content:space-between;
align-items:baseline;
gap:10px;
margin:0 0 11px;
font-family:var(--je-mono);
font-size:14.5px;
font-weight:400;
letter-spacing:.13em;
text-transform:uppercase;
line-height:1.35;
color:var(--je-muted);
}
/* The bare asterisk becomes a right-aligned word, matching OPEN TOP /
BOTH SIDES / XL in the attribute rows. */
body.single-product .wpo-field .wpo-field-required-symbol{
font-size:0;
letter-spacing:0;
color:transparent;
white-space:nowrap;
}
body.single-product .wpo-field .wpo-field-required-symbol::after{
content:"Required";
font-family:var(--je-mono);
font-size:14.5px;
letter-spacing:.1em;
text-transform:uppercase;
color:var(--je-green-deep);
}
body.single-product .wpo-field p.wpo-field-description{
margin:10px 0 0;
font-family:var(--je-body);
font-size:16px;
line-height:1.5;
letter-spacing:0;
text-transform:none;
color:var(--je-muted);
max-width:52ch;
}
/* ---- Colour swatches ---- */
body.single-product ul.wpo-color-checkboxes{
display:flex;
flex-wrap:wrap;
gap:10px;
margin:0;
padding:0;
list-style:none;
}
body.single-product li.wpo-choice-item.wpo-color-checkbox{
margin:0;
padding:0;
list-style:none;
}
body.single-product li.wpo-color-checkbox label{
display:block;
margin:0;
cursor:pointer;
line-height:0;
}
body.single-product li.wpo-color-checkbox span.wpo-swatch-inner{
display:block;
width:42px;
height:42px;
border-radius:50%;
border:1px solid var(--je-rule);
box-shadow:none;
transition:box-shadow .15s ease, border-color .15s ease;
}
body.single-product li.wpo-color-checkbox label:hover span.wpo-swatch-inner{
border-color:var(--je-soil);
}
/* Ring stands off the swatch so it reads on Off White as well as Black. */
body.single-product li.wpo-color-checkbox input:checked + span.wpo-swatch-inner{
border-color:var(--je-green);
box-shadow:0 0 0 2px var(--je-white), 0 0 0 4px var(--je-green);
}
body.single-product li.wpo-color-checkbox input:focus-visible + span.wpo-swatch-inner{
outline:2px solid var(--je-green);
outline-offset:3px;
}
/* ---- Date field ---- */
body.single-product .wpo-field-datepicker .flatpickr-wrapper{
display:block;
width:100%;
}
body.single-product input.wpo-datepicker-alt-input{
display:block;
width:100%;
box-sizing:border-box;
height:auto;
padding:15px 16px;
font-family:var(--je-mono);
font-size:17px;
letter-spacing:.04em;
color:var(--je-ink);
background:var(--je-white);
border:1px solid var(--je-rule);
border-radius:2px;
box-shadow:none;
}
body.single-product input.wpo-datepicker-alt-input:focus{
outline:none;
border-color:var(--je-green);
box-shadow:0 0 0 3px rgba(3,172,19,.15);
}
/* ---- File upload ---- */
body.single-product .wpo-file-dropzone{
min-height:0;
padding:26px 20px;
background:var(--je-cream);
border:1px dashed var(--je-rule);
border-radius:3px;
transition:border-color .15s ease, background-color .15s ease;
}
body.single-product .wpo-file-dropzone:hover,
body.single-product .wpo-file-dropzone.dz-drag-hover{
border-color:var(--je-green);
background:var(--je-cream-deep);
}
body.single-product .wpo-file-dropzone .dz-button{
font-family:var(--je-body);
font-size:16px;
line-height:1.5;
color:var(--je-soil);
background:none;
border:0;
padding:0;
cursor:pointer;
}
body.single-product .wpo-file-dropzone .dz-button-icon svg{
width:34px;
height:34px;
}
@media (max-width:520px){
body.single-product .wpo-field p.wpo-option-name{ font-size:13px; }
body.single-product .wpo-field .wpo-field-required-symbol::after{ font-size:13px; }
body.single-product .wpo-field p.wpo-field-description{ font-size:15px; }
body.single-product input.wpo-datepicker-alt-input{ font-size:16px; padding:13px 14px; }
body.single-product li.wpo-color-checkbox span.wpo-swatch-inner{ width:38px; height:38px; }
body.single-product .wpo-file-dropzone{ padding:22px 16px; }
}
/* ---------- Phase 3: hide Barn2's total ----------
Barn2 prints its own "Total:" above the CTA, and it is wrong twice over.
At 300 bags of Both Sides / L it read ₹15,600.00, which is 300 x ₹52 -
the M / One Side price. It multiplies the product's base (minimum
variation) price by quantity: it does not follow the selected variation,
and it has no knowledge of the quantity tiers.
The correct figure for that basket is ₹20,865.60, which the ladder, the
CTA and the cart all agree on. Two totals differing by ₹5,265 on one
screen is worse than one, and this is the one that cannot be made right -
Barn2 has no way to see the tier discount applied in
woocommerce_before_calculate_totals.
Hidden rather than restyled. If Barn2's settings offer a "show totals"
toggle, turning it off there is cleaner than hiding it here. */
body.single-product .wpo-totals-container{
display:none !important;
}
/* ---------- Phase 3: over the quantity ceiling ----------
Shown instead of the readout, nudge and summary when quantity exceeds
12,000. Cream panel with a green rule so it reads as a redirection
rather than an error - this is a good problem to have. */
body.single-product .je-ladder__over{
margin:14px 0 0;
padding:16px 18px;
background:var(--je-white);
border:1px solid var(--je-rule);
border-left:3px solid var(--je-green);
border-radius:0 3px 3px 0;
}
body.single-product .je-ladder__over-lead{
margin:0 0 13px;
font-family:var(--je-body);
font-size:16.5px;
line-height:1.5;
color:var(--je-soil);
max-width:52ch;
}
body.single-product a.je-ladder__over-cta{
display:inline-flex;
align-items:center;
justify-content:center;
padding:13px 22px;
font-family:var(--je-body);
font-size:15.5px;
font-weight:600;
line-height:1.2;
color:var(--je-white);
background:var(--je-green);
border:1px solid var(--je-green);
border-radius:2px;
text-decoration:none;
transition:background-color .15s ease, border-color .15s ease;
}
body.single-product a.je-ladder__over-cta:hover,
body.single-product a.je-ladder__over-cta:focus{
background:var(--je-green-deep);
border-color:var(--je-green-deep);
color:var(--je-white);
text-decoration:none;
}
@media (max-width:520px){
body.single-product .je-ladder__over{ padding:14px; }
body.single-product .je-ladder__over-lead{ font-size:15px; }
body.single-product a.je-ladder__over-cta{
display:flex;
width:100%;
box-sizing:border-box;
font-size:15px;
}
}
/* ---------- Phase 3: summary row overflow ----------
The value side carried white-space:nowrap so currency never splits
across lines. That also stopped "Are Extra Quoted Actuals before
dispatch" wrapping, and it ran out of the panel on mobile.
white-space:normal breaks at spaces only, so the shipping text wraps
while ₹19,872.00 stays whole - there is no space inside a formatted
amount to break at. No nowrap needed. */
body.single-product .je-ladder__row{
align-items:baseline;
gap:14px;
}
/* Both sides must be allowed to shrink. Flex children default to
min-width:auto, which is what lets long content push past the container
in the first place. */
body.single-product .je-ladder__row > span{
flex:1 1 auto;
min-width:0;
}
body.single-product .je-ladder__row b{
flex:0 1 auto;
min-width:0;
white-space:normal;
text-align:right;
}
/* Belt and braces: nothing in the ladder may push the card sideways. */
body.single-product .je-ladder{
max-width:100%;
overflow-wrap:break-word;
}
@media (max-width:520px){
body.single-product .je-ladder__row{
gap:10px;
}
}
/* ================= END OF JE PHASE 2 ================= *//* =====================================================================
JE HEADER REGION - replaces everything from the JE HEADER opener to
the end of the stylesheet. Blocks: JE HEADER, D, F, E, G, H, I, J, K.
ANCHOR: the mega menu keys on li.je-mega , a CSS class set by hand on
the Bags item (Appearance > Menus > Screen Options > CSS Classes).
It previously keyed on li.menu-item-722, a WordPress-generated ID that
changed the moment the menu was deleted and rebuilt, silently reverting
the panel to a narrow flyout. A hand-set class survives rebuilds,
reordering and renaming.
If the mega panel ever goes narrow again, check that the Bags menu item
still carries je-mega before touching anything here.
===================================================================== */
/* ================= JE HEADER (replaces A + B) ================= */
/* Selectors carry an extra class so they outrank Elementor's
widget CSS (.elementor-754 .elementor-element-b422a0e ... = 0,4,0).
!important is used only where Elementor writes the same property
from its widget Style tab. */
header.elementor-location-header{
position: sticky;
top: 0;
z-index: 100;
background: var(--je-paper);
border-bottom: 1px solid var(--je-rule);
}
body.admin-bar header.elementor-location-header{ top: 32px; }
@media (min-width: 1025px){
/* --- top level --- */
header.elementor-location-header .elementor-nav-menu--main > ul.elementor-nav-menu{ gap: 26px; }
header.elementor-location-header .elementor-nav-menu--main ul.elementor-nav-menu > li > a.elementor-item{
font-family: var(--je-sans);
font-size: 14px;
font-weight: 600;
color: var(--je-ink) !important;
fill: var(--je-ink) !important;
padding: 0;
border-bottom: 2px solid transparent;
transition: border-color .16s ease;
}
header.elementor-location-header .elementor-nav-menu--main ul.elementor-nav-menu > li > a.elementor-item:hover,
header.elementor-location-header .elementor-nav-menu--main ul.elementor-nav-menu > li > a.elementor-item.elementor-item-active{
color: var(--je-ink) !important;
background: transparent !important;
border-bottom-color: var(--je-green);
}
/* --- the panel ---
position:static carries !important because of a page-specific
collision: the My Account block elsewhere in this file sets
`body.woocommerce-account .menu-item-has-children{ position: relative
!important; }`, written for an unrelated bug (a B2B/account dropdown
rendering behind the footer). li.je-mega also has children, so on
/my-account/ that rule forces it back to position:relative, which
changes the mega panel's containing block from the full-width header
down to the narrow "Bags" nav item itself - the panel's own
background then paints only that ~170px box, while its 3-column grid
content still lays out at full width and spills outside it with
nothing behind it, reading as the page content and the menu bleeding
into each other. Confirmed live via the DOM on /my-account/, not
guessed: li.je-mega measured position:relative there, sub-menu width
172.8px against the header's 1424px. !important is required because
the My Account rule already carries one. */
header.elementor-location-header .elementor-nav-menu--main li.je-mega{ position: static !important; }
header.elementor-location-header .elementor-nav-menu--main li.je-mega > ul.sub-menu{
left: 0; right: 0;
width: auto !important;
min-width: 0 !important;
background: var(--je-paper) !important;
border: 0 !important;
border-top: 1px solid var(--je-rule) !important;
border-bottom: 1px solid var(--je-rule) !important;
box-shadow: 0 18px 40px rgba(36,26,18,.10) !important;
padding: 34px max(20px, calc((100vw - 1320px) / 2)) 40px !important;
display: none;
grid-template-columns: repeat(3, 1fr);
gap: 44px;
align-items: start;
}
header.elementor-location-header .elementor-nav-menu--main li.je-mega:hover > ul.sub-menu,
header.elementor-location-header .elementor-nav-menu--main li.je-mega:focus-within > ul.sub-menu{
display: grid;
}
/* --- every nested list: flatten, strip the box --- */
header.elementor-location-header .elementor-nav-menu--main li.je-mega ul.sub-menu ul.sub-menu{
position: static !important;
display: block !important;
width: auto !important;
min-width: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
transform: none !important;
opacity: 1 !important;
visibility: visible !important;
}
/* --- column headings: Jute / Cotton Canvas / Juco --- */
header.elementor-location-header .elementor-nav-menu--main li.je-mega > ul.sub-menu > li{
width: auto !important;
}
header.elementor-location-header .elementor-nav-menu--main li.je-mega > ul.sub-menu > li > a{
font-family: "DM Mono", ui-monospace, Menlo, monospace;
font-size: 10px !important;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--je-ochre) !important;
background: transparent !important;
padding: 0 0 10px !important;
border-bottom: 1px solid var(--je-rule);
margin-bottom: 14px;
}
/* --- links inside the panel --- */
header.elementor-location-header .elementor-nav-menu--main li.je-mega ul.sub-menu ul.sub-menu a{
font-family: var(--je-sans);
font-size: 13.5px !important;
color: var(--je-soil) !important;
background: transparent !important;
border: 0 !important;
padding: 5px 0 !important;
white-space: normal;
}
header.elementor-location-header .elementor-nav-menu--main li.je-mega ul.sub-menu ul.sub-menu a:hover{
color: var(--je-ink) !important;
background: transparent !important;
text-decoration: underline;
text-underline-offset: 3px;
}
/* level 3 reads as a group lead, level 4 sits under it */
header.elementor-location-header .elementor-nav-menu--main li.je-mega > ul.sub-menu > li > ul > li > a{
font-weight: 700 !important;
color: var(--je-ink) !important;
margin-top: 12px;
}
header.elementor-location-header .elementor-nav-menu--main li.je-mega > ul.sub-menu > li > ul > li > ul > li > a{
font-weight: 400 !important;
padding-left: 12px !important;
}
}
/* ================= END JE HEADER ================= */
/* ================= JE HEADER — D: mobile ================= */
/* Elementor renders the whole 4-level tree expanded (36 items, no
accordion), so hierarchy has to come from type and indentation.
Depth is targeted with child combinators, not classes, because every
nested list shares .sub-menu.elementor-nav-menu--dropdown. */
@media (max-width: 1024px){
/* --- burger --- */
header.elementor-location-header .elementor-menu-toggle{
width: 40px; height: 40px;
border: 1px solid var(--je-rule) !important;
border-radius: 2px;
background: transparent !important;
color: var(--je-ink) !important;
display: grid; place-items: center;
transition: border-color .16s ease;
}
header.elementor-location-header .elementor-menu-toggle:hover{ border-color: var(--je-muted) !important; }
header.elementor-location-header .elementor-menu-toggle.elementor-active{
background: var(--je-ink) !important;
border-color: var(--je-ink) !important;
color: var(--je-cream) !important;
}
header.elementor-location-header .elementor-menu-toggle svg{ width: 20px; height: 20px; fill: currentColor; }
/* --- panel ---
max-height and overflow-y carry !important because Elementor's own
open-state rule outranks this one on specificity alone:
`.elementor-nav-menu--toggle .elementor-menu-toggle.elementor-active +
.elementor-nav-menu__container{ max-height: var(--menu-height); }` is
(0,4,0) - four classes - against this selector's (0,2,2). --menu-height
is set by Elementor's JS to 1000vmax (thousands of px), meant as
"uncapped", and without !important here it wins outright, so the panel
never caps at the viewport at all - it grows to fit however many items
are expanded. Sitting inside `header{ position:sticky; top:0 }`, a box
that tall has no scroll of its own: the user sees one screenful and
everything past it is permanently off-screen with nothing to scroll to
reach it. Confirmed live via the CSSOM (matched rules + computed
specificity), not guessed - this exact fight is why the Bags submenu
stopped moving once expanded past one screen. */
header.elementor-location-header nav.elementor-nav-menu--dropdown{
background: var(--je-paper) !important;
border-top: 1px solid var(--je-rule);
box-shadow: 0 18px 40px rgba(36,26,18,.12);
/* Elementor's own JS sets left/width as INLINE styles on this element
when the menu opens - measured live at left:-24px, width:375px on a
375px-wide phone, against a header that itself spans the full
0-375px. That 24px leftward shift is presumably meant to counter
some default side padding Elementor expects on its own markup, but
JE HEADER P already moved that padding onto `.e-con` instead (see
below), so the offset no longer corresponds to anything real here -
it just leaves the right 24px of the header, and everything behind
it, exposed down the whole height of the open panel. Only
!important beats an inline style; left/right/width pin the panel to
the header's own edges regardless of whatever pixel figures
Elementor's script computes. */
left: 0 !important;
right: 0 !important;
width: auto !important;
/* vh is the LAYOUT viewport - fixed at page-load size and blind to the
browser's own address bar / toolbar showing or hiding afterwards.
Across phones that differ in how much chrome they reserve (and on
the SAME phone as the bar auto-hides while scrolling), 100vh over-
or under-shoots the panel's real available height, so the cap
looked right on some devices/moments and wrong on others - short
on tall content, or leaving a dead gap on short content.
dvh is the DYNAMIC viewport height - it tracks the visible area as
chrome shows/hides, so the cap - and the scroll region overflow-y
creates inside it - stay correct continuously rather than only at
the instant the page loaded. Declared as a second, later
declaration rather than replacing the vh one: a browser that
doesn't understand dvh discards that whole line as invalid and
keeps the vh rule above; one that does understand it uses this
line instead, since it comes later at equal specificity. No
@supports query needed - the cascade already resolves it. */
max-height: calc(100vh - 62px) !important;
max-height: calc(100dvh - 62px) !important;
overflow-y: auto !important;
overscroll-behavior: contain;
/* Bottom padding clears the home-indicator / gesture-bar strip on
notched phones, so the last menu item is not sitting under it.
env() resolves to 0 on devices without a safe-area inset (older
phones, no notch), so this is additive everywhere, never a loss. */
padding: 6px 20px calc(28px + env(safe-area-inset-bottom));
}
header.elementor-location-header nav.elementor-nav-menu--dropdown ul.sub-menu{
background: transparent !important;
border: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
/* all links: comfortable tap targets, no Elementor chrome */
header.elementor-location-header nav.elementor-nav-menu--dropdown a.elementor-item{
background: transparent !important;
border: 0 !important;
padding: 11px 0 !important;
line-height: 1.35;
white-space: normal;
}
/* --- level 1 --- */
header.elementor-location-header nav.elementor-nav-menu--dropdown
> ul.elementor-nav-menu > li{
border-bottom: 1px solid var(--je-rule);
}
header.elementor-location-header nav.elementor-nav-menu--dropdown
> ul.elementor-nav-menu > li > a.elementor-item{
/* Figtree, not the serif: this is a mobile nav row, which is UI rather
than display type, and Young Serif is single-weight so the 700 below
would synthesise a fake bold on it. */
font-family: var(--je-sans);
font-size: 17px !important;
font-weight: 700 !important;
letter-spacing: -.015em;
color: var(--je-ink) !important;
padding: 15px 0 !important;
}
/* --- level 2: Jute / Cotton Canvas / Juco as section labels --- */
header.elementor-location-header nav.elementor-nav-menu--dropdown
> ul > li > ul.sub-menu > li > a.elementor-item{
font-family: "DM Mono", ui-monospace, Menlo, monospace;
font-size: 10px !important;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--je-ochre) !important;
padding: 16px 0 6px !important;
}
/* --- level 3: group leads --- */
header.elementor-location-header nav.elementor-nav-menu--dropdown
> ul > li > ul > li > ul.sub-menu > li > a.elementor-item{
font-size: 15px !important;
font-weight: 700 !important;
color: var(--je-ink) !important;
padding: 9px 0 !important;
}
/* --- level 4: indented children --- */
header.elementor-location-header nav.elementor-nav-menu--dropdown
> ul > li > ul > li > ul > li > ul.sub-menu > li > a.elementor-item{
font-size: 14px !important;
font-weight: 400 !important;
color: var(--je-soil) !important;
padding: 8px 0 8px 14px !important;
border-left: 1px solid var(--je-rule);
margin-left: 2px;
}
header.elementor-location-header nav.elementor-nav-menu--dropdown
a.elementor-item.elementor-item-active{ color: var(--je-green-deep) !important; }
}
/* ================= END JE HEADER D ================= */
/* ================= JE HEADER — F: submenu indicator ================= */
@media (min-width: 1025px){
/* Inside the mega panel every level is already expanded, so these seven
carets point at visible content and do nothing. Not a style choice. */
header.elementor-location-header .elementor-nav-menu--main
li.je-mega ul.sub-menu .sub-arrow{
display: none !important;
}
/* Top-level caret on Bags and Blogs, kept as an affordance. */
header.elementor-location-header .elementor-nav-menu--main
ul.elementor-nav-menu > li > a.elementor-item .sub-arrow{
margin-left: 5px !important;
opacity: .5;
}
header.elementor-location-header .elementor-nav-menu--main
ul.elementor-nav-menu > li > a.elementor-item .sub-arrow svg{
width: 9px; height: 9px; fill: currentColor;
}
header.elementor-location-header .elementor-nav-menu--main
ul.elementor-nav-menu > li:hover > a.elementor-item .sub-arrow{ opacity: 1; }
/* To remove the top-level caret entirely, uncomment:
header.elementor-location-header .elementor-nav-menu--main
ul.elementor-nav-menu > li > a.elementor-item .sub-arrow{
display: none !important;
}
*/
}
@media (max-width: 1024px){
/* The arrow is the only way to open a submenu here, so it needs a real
tap target. Negative margins expand the hit area without moving the row. */
header.elementor-location-header nav.elementor-nav-menu--dropdown .sub-arrow{
padding: 12px !important;
margin: -12px -6px -12px 0 !important;
color: var(--je-muted) !important;
display: flex !important;
align-items: center;
}
header.elementor-location-header nav.elementor-nav-menu--dropdown .sub-arrow svg{
width: 12px; height: 12px; fill: currentColor;
}
}
/* ================= END JE HEADER F ================= */
/* ================= JE HEADER — E: mobile corrections ================= */
@media (max-width: 1024px){
/* --- 1. account badge overlap ---
D's level-1 rule (0,4,5) outranked the badge rule (0,2,1) despite both
using !important, re-showing the menu text at 17px while ::before still
drew the icon. In a vertical list this item should just be a link. */
header.elementor-location-header nav.elementor-nav-menu--dropdown
> ul.elementor-nav-menu > li > a.elementor-item.je-account-badge{
display: block !important;
width: auto !important;
height: auto !important;
border-radius: 0 !important;
background: transparent !important;
font-size: 17px !important;
line-height: 1.35 !important;
padding: 15px 0 !important;
}
header.elementor-location-header nav.elementor-nav-menu--dropdown
a.je-account-badge::before{ content: none !important; display: none !important; }
header.elementor-location-header nav.elementor-nav-menu--dropdown
a.je-account-badge *{ display: inline !important; }
/* --- 2. empty band under the closed header ---
Padding sat on the nav, and padding still renders while Elementor holds
max-height:0 on the closed drawer. Move it onto the list. */
header.elementor-location-header nav.elementor-nav-menu--dropdown{
padding: 0 !important;
}
header.elementor-location-header nav.elementor-nav-menu--dropdown
> ul.elementor-nav-menu{ padding: 6px 20px 28px !important; }
/* --- 3. dividers: Elementor draws its own in green on the anchor --- */
header.elementor-location-header nav.elementor-nav-menu--dropdown
> ul.elementor-nav-menu > li{ border-bottom: 0 !important; }
header.elementor-location-header nav.elementor-nav-menu--dropdown
> ul.elementor-nav-menu > li > a.elementor-item{
border-bottom: 1px solid var(--je-rule) !important;
}
/* --- 4. submenu hierarchy ---
Submenu links are .elementor-sub-item, not .elementor-item, which is why
every level-2/3/4 rule in D was a dead selector. */
header.elementor-location-header nav.elementor-nav-menu--dropdown
a.elementor-sub-item{
background: transparent !important;
border: 0 !important;
white-space: normal !important;
line-height: 1.35 !important;
}
/* level 2 — Jute / Cotton Canvas / Juco, as section labels */
header.elementor-location-header nav.elementor-nav-menu--dropdown
> ul > li > ul.sub-menu > li > a.elementor-sub-item{
font-family: "DM Mono", ui-monospace, Menlo, monospace !important;
font-size: 10px !important;
letter-spacing: .16em !important;
text-transform: uppercase !important;
color: var(--je-ochre) !important;
padding: 16px 0 6px !important;
}
/* level 3 — group leads */
header.elementor-location-header nav.elementor-nav-menu--dropdown
> ul > li > ul > li > ul.sub-menu > li > a.elementor-sub-item{
font-size: 15px !important;
font-weight: 700 !important;
color: var(--je-ink) !important;
padding: 9px 0 !important;
text-transform: none !important;
letter-spacing: normal !important;
}
/* level 4 — indented children */
header.elementor-location-header nav.elementor-nav-menu--dropdown
> ul > li > ul > li > ul > li > ul.sub-menu > li > a.elementor-sub-item{
font-size: 14px !important;
font-weight: 400 !important;
color: var(--je-soil) !important;
padding: 8px 0 8px 14px !important;
border-left: 1px solid var(--je-rule) !important;
margin-left: 2px;
text-transform: none !important;
letter-spacing: normal !important;
}
}
/* ================= END JE HEADER E ================= */
/* ================= JE HEADER — G: panel geometry ================= */
@media (min-width: 1025px){
/* The submenu's containing block is ul.elementor-nav-menu, not the
viewport, so the old calc((100vw - 1320px)/2) padding ballooned to
300px a side on a wide screen. Make the header the containing block
so left/right:0 spans the full width, as in the mockup. */
header.elementor-location-header .elementor-nav-menu--main
> ul.elementor-nav-menu{
position: static !important;
}
header.elementor-location-header .elementor-nav-menu--main
li.je-mega > ul.sub-menu{
padding: 38px clamp(24px, 6vw, 110px) 46px !important;
gap: clamp(28px, 4vw, 72px) !important;
}
/* Product counts on the column heads, as the mockup had. Matched on
href so re-ordering the menu can't misplace them. */
header.elementor-location-header .elementor-nav-menu--main
li.je-mega > ul.sub-menu > li > a[href$="/jute-bags/"]::after{
content: " · 140 products";
}
header.elementor-location-header .elementor-nav-menu--main
li.je-mega > ul.sub-menu > li > a[href$="/juco-bags/"]::after{
content: " · 42 products";
}
}
/* ================= END JE HEADER G ================= */
/* ================= JE HEADER — H: mobile badge + type ================= */
/* --- 1. the standalone .je-mobile-account anchor ---
Injected directly into the header template, outside both navs, with no
breakpoint of its own - so it laid out as a block row at every width.
That is the 42px dead band on mobile and the 131px header on desktop,
where it also duplicates the badge already in the nav. */
@media (min-width: 1025px){
header.elementor-location-header > a.je-mobile-account{
display: none !important;
}
}
@media (max-width: 1024px){
/* Lift it out of flow and sit it beside the burger. Burger is 40px wide
with a 10px right gap, so 60px clears it with 10px of breathing room.
Header is sticky, so it is already the containing block. */
header.elementor-location-header > a.je-mobile-account{
position: absolute !important;
top: 9px !important;
right: 60px !important;
margin: 0 !important;
z-index: 5;
}
}
/* --- 2. type scale, up to match the mockup --- */
@media (min-width: 1025px){
header.elementor-location-header .elementor-nav-menu--main
li.je-mega > ul.sub-menu > li > a{
font-size: 10.5px !important;
}
header.elementor-location-header .elementor-nav-menu--main
li.je-mega ul.sub-menu ul.sub-menu a{
font-size: 14.5px !important;
}
header.elementor-location-header .elementor-nav-menu--main
li.je-mega > ul.sub-menu > li > ul > li > a{
font-size: 16px !important;
}
}
/* ================= END JE HEADER H ================= */
/* ================= JE HEADER — I: account badge ================= */
@media (min-width: 1025px){
/* Desktop: plain text menu item, no circular icon. */
header.elementor-location-header .elementor-nav-menu--main a.je-account-badge{
font-size: 16px !important; /* matches the Elementor nav setting */
line-height: normal !important;
width: auto !important;
height: auto !important;
border-radius: 0 !important;
background: transparent !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
}
header.elementor-location-header .elementor-nav-menu--main a.je-account-badge::before,
header.elementor-location-header .elementor-nav-menu--main
a.je-account-badge[data-initial]:not([data-initial=""])::before{
content: none !important;
display: none !important;
}
header.elementor-location-header .elementor-nav-menu--main a.je-account-badge *{
display: inline !important;
}
}
@media (max-width: 1024px){
/* Mobile: icon to the left edge, away from the burger. */
header.elementor-location-header > a.je-mobile-account{
left: 20px !important;
right: auto !important;
}
}
/* ================= END JE HEADER I ================= */
/* ================= JE HOME — J: type scale ================= */
/* Scoped to body.home only. The hero h1 was 42px under 44px section
headings - the page's most important line was its least prominent.
Nothing here touches product pages, which Phase 2/3 already sets. */
body.home h1.je-title{
font-size: clamp(30px, 4vw, 52px) !important;
line-height: 1.1 !important;
letter-spacing: -0.02em !important;
}
body.home .je-heroWrap .je-left p{
font-size: 18.5px !important;
line-height: 1.55 !important;
}
/* Footer links were 13px, small enough to strain on a laptop. */
footer a,
.footer-navigation a{
font-size: 14px !important;
}
/* ================= END JE HOME J ================= */
/* ================= JE HEADER — K: secondary dropdowns ================= */
/* Any top-level dropdown that is NOT the Bags mega panel. Written as
:not(.je-mega) rather than naming Blogs, so a future menu item
with children inherits this instead of Elementor's default flyout. */
@media (min-width: 1025px){
header.elementor-location-header .elementor-nav-menu--main
> ul.elementor-nav-menu > li:not(.je-mega) > ul.sub-menu{
min-width: 232px !important;
width: auto !important;
padding: 8px 0 !important;
background: var(--je-paper) !important;
border: 1px solid var(--je-rule) !important;
border-radius: 2px !important;
box-shadow: 0 14px 32px rgba(36, 26, 18, .10) !important;
margin-top: 2px;
}
header.elementor-location-header .elementor-nav-menu--main
> ul.elementor-nav-menu > li:not(.je-mega) > ul.sub-menu a{
font-size: 14px !important;
color: var(--je-soil) !important;
padding: 9px 18px !important;
background: transparent !important;
white-space: normal !important;
line-height: 1.35 !important;
}
header.elementor-location-header .elementor-nav-menu--main
> ul.elementor-nav-menu > li:not(.je-mega) > ul.sub-menu a:hover{
background: var(--je-cream) !important;
color: var(--je-ink) !important;
}
}
/* ================= END JE HEADER K ================= */
/* ================= JE HEADER — M: search + cart ================= */
/* --- 1. mega panel containing block ---
G made the ul static, but the nav WIDGET wrapper and the container are
both position:relative, so the panel was bounded by the widget (707px).
Make both static and the sticky header becomes the containing block. */
header.elementor-location-header > div.elementor-element,
header.elementor-location-header [data-widget_type="nav-menu.default"]{
position: static !important;
}
/* --- 2. push the pair right ---
The widget is search.default, not search-form. */
header.elementor-location-header [data-widget_type="search.default"]{
margin-left: auto !important;
}
/* --- 3. search: compact 38px field --- */
header.elementor-location-header .e-search-form{ min-height: 0 !important; }
header.elementor-location-header input.e-search-input{
height: 38px !important;
min-height: 38px !important;
width: 190px !important;
padding: 0 12px !important;
font-family: var(--je-sans) !important;
font-size: 13.5px !important;
color: var(--je-ink) !important;
background: var(--je-white) !important;
border: 1px solid var(--je-rule) !important;
border-radius: 2px !important;
box-shadow: none !important;
transition: border-color .16s ease;
}
header.elementor-location-header input.e-search-input:hover{ border-color: var(--je-muted) !important; }
header.elementor-location-header input.e-search-input:focus{
border-color: var(--je-green) !important;
outline: none !important;
}
header.elementor-location-header input.e-search-input::placeholder{
color: var(--je-muted) !important;
opacity: 1;
}
/* --- 4. cart: 38px outlined square with a green count --- */
header.elementor-location-header .elementor-menu-cart__toggle_button{
position: relative !important;
width: 38px !important;
min-width: 38px !important;
height: 38px !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
border: 1px solid var(--je-rule) !important;
border-radius: 2px !important;
color: var(--je-ink) !important;
fill: var(--je-ink) !important;
transition: border-color .16s ease;
}
header.elementor-location-header .elementor-menu-cart__toggle_button:hover{
border-color: var(--je-muted) !important;
background: transparent !important;
}
header.elementor-location-header .elementor-menu-cart__toggle_button .elementor-button-text{
display: none !important;
}
header.elementor-location-header .elementor-button-icon-qty{
background: var(--je-green) !important;
color: var(--je-white) !important;
font-family: "DM Mono", ui-monospace, Menlo, monospace !important;
font-size: 9.5px !important;
min-width: 17px !important;
height: 17px !important;
line-height: 17px !important;
border-radius: 9px !important;
top: -6px !important;
right: -6px !important;
}
/* --- 5. mobile: drop the field, keep the cart --- */
@media (max-width: 1024px){
header.elementor-location-header [data-widget_type="search.default"]{
display: none !important;
}
}
/* ================= END JE HEADER M ================= */
/* ================= JE HEADER — O: utility bar ================= */
/* Replaces N. Three things N got wrong:
1. Elementor's flex row lives on .e-con-inner, not on the container that
carries the CSS class - so padding and height went to the wrong box.
2. The link rule was (0,4,2); the main-nav rule in the JE HEADER block is
(0,4,4) with !important, so it won and painted these links var(--je-ink) on
a var(--je-ink) bar. Selector below is (0,5,4).
3. span + span never matched, so the two facts ran together. */
header.elementor-location-header .je-utilbar{
background: var(--je-ink) !important;
padding-block: 0 !important;
}
header.elementor-location-header .je-utilbar > .e-con-inner{
min-height: 38px !important;
padding-block: 0 !important;
align-items: center !important;
}
/* --- left: the facts --- */
header.elementor-location-header .je-utilbar [data-widget_type^="text-editor"]{
font-family: "DM Mono", ui-monospace, Menlo, monospace !important;
font-size: 10.5px !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
color: var(--je-sand) !important;
opacity: .72;
line-height: 1.2 !important;
}
header.elementor-location-header .je-utilbar [data-widget_type^="text-editor"] p{
margin: 0 !important;
}
header.elementor-location-header .je-utilbar [data-widget_type^="text-editor"] span{
display: inline-block;
}
header.elementor-location-header .je-utilbar [data-widget_type^="text-editor"] span + span,
header.elementor-location-header .je-utilbar [data-widget_type^="text-editor"] p + p{
margin-left: 28px;
}
/* --- right: the links. (0,5,4) so it outranks the main-nav rule --- */
header.elementor-location-header .je-utilbar .elementor-nav-menu--main
ul.elementor-nav-menu > li > a.elementor-item{
font-family: "DM Mono", ui-monospace, Menlo, monospace !important;
font-size: 10.5px !important;
font-weight: 400 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
color: var(--je-sand) !important;
fill: var(--je-sand) !important;
background: transparent !important;
opacity: .78;
padding: 0 !important;
border: 0 !important;
border-bottom: 0 !important;
transition: opacity .16s ease;
}
header.elementor-location-header .je-utilbar .elementor-nav-menu--main
ul.elementor-nav-menu > li > a.elementor-item:hover,
header.elementor-location-header .je-utilbar .elementor-nav-menu--main
ul.elementor-nav-menu > li > a.elementor-item.elementor-item-active{
color: var(--je-sand) !important;
opacity: 1;
background: transparent !important;
border-bottom: 0 !important;
}
header.elementor-location-header .je-utilbar .elementor-nav-menu{ gap: 22px !important; }
/* Account may still carry the badge class - text only in this bar. */
header.elementor-location-header .je-utilbar a.je-account-badge{
width: auto !important; height: auto !important;
border-radius: 0 !important; background: transparent !important;
padding: 0 !important; display: inline !important;
}
header.elementor-location-header .je-utilbar a.je-account-badge::before{
content: none !important; display: none !important;
}
header.elementor-location-header .je-utilbar a.je-account-badge *{ display: inline !important; }
@media (max-width: 1024px){
header.elementor-location-header .je-utilbar{ display: none !important; }
}
/* ================= END JE HEADER O ================= */
/* ================= JE HEADER — P: mobile gutter ================= */
/* The header container is e-con-full with padding:0, so the cart button
ended flush against the viewport edge. Give the row a gutter and keep
the absolutely-positioned account badge on the same optical margin.
16px -> 24px: the original fix picked 16px on its own, without checking
what the page content actually uses. Kadence's own content-container
padding is 24px site-wide (every page, not set anywhere in this
stylesheet - it's the theme's layout default), so at 16px the header's
logo/burger/cart sat 8px inside of where every page's title, text and
product grid start below it - a visible sideways jog site-wide, worst
on mobile where 8px is a bigger fraction of the gutter. Matching it to
24px lines the header up with the content on every page, since this
gutter is header-only and not scoped to any one page type. */
@media (max-width: 1024px){
header.elementor-location-header > .e-con{
padding-inline: 24px !important;
}
header.elementor-location-header > a.je-mobile-account{
left: 24px !important;
}
}
/* ================= END JE HEADER P ================= */
/* ================= JE HEADER — Q: widget vertical align ================= */
/* The Nav Menu widget carries align-self:flex-start, which beats the row's
align-items:center - the burger pinned to the top of a 59px row while the
cart centred, a 10px offset. Centring is correct at every width. */
header.elementor-location-header [data-widget_type="nav-menu.default"],
header.elementor-location-header [data-widget_type="search.default"],
header.elementor-location-header [data-widget_type="woocommerce-menu-cart.default"]{
align-self: center !important;
}
/* ================= END JE HEADER Q ================= */
/* ================= JE HEADER — R: align header width to content ================= */
/* Originally written against the old 1290px boxed content width; the
Customizer's Product Catalog layout was later switched to Full Width
sitewide (see "JE SITE - content container width" near the top of this
file), which changes what "aligned with content" now means. Updated to
use the exact same max-width and padding-inline as that block, so the
two can never drift out of sync with each other again - if that value
changes, change it in both places.
Same underlying bug as before, still true: neither header row's width
is tied to the page's content width on its own.
- utility bar's .e-con-inner: width:100%, max-width capped by Elementor
- only the cap needs overriding.
- main nav row (.elementor-element-344e8b3): WIDTH itself (not just
max-width) is a fixed 70% from Elementor, and it sat at left:0, not
centred - an e-con-full container. max-width alone cannot fix this:
it only constrains a box DOWN when width would exceed it, never
widens a box whose own width already computes smaller. width:100%
is required alongside max-width so the row can actually reach the
full cap at every viewport, not just the wide end of the range.
Desktop only (min-width:1025px): below that the utility bar is
display:none (JE HEADER O) and the main nav is replaced entirely by the
mobile dropdown (JE HEADER D/E), so neither row exists in this form. */
@media (min-width: 1025px){
header.elementor-location-header .je-utilbar .e-con-inner{
max-width: 1880px !important;
padding-inline: clamp(24px, 1.6vw, 32px) !important;
}
header.elementor-location-header .elementor-element-344e8b3{
width: 100% !important;
max-width: 1880px !important;
margin-inline: auto !important;
padding-inline: clamp(24px, 1.6vw, 32px) !important;
}
}
/* ================= END JE HEADER R ================= */
/* ================= JE HEADER — S: product breadcrumb overlap ================= */
/* Kadence's single-product template ships the breadcrumb wrapper with
margin-top:-16px - harmless while the header scrolled away with the
page, but the header has been position:sticky since Phase 4, so that
negative margin now collapses upward through .product-title.product-above
and pulls the breadcrumb (and the rest of main.site-main with it) 16px
under the header's bottom edge on every product page.
Not present on the shop archive template, which uses a different wrapper
(.entry-header.product-archive-title) and already carries a POSITIVE
margin - so this is scoped to .product-title.product-above only, and
flips the sign rather than zeroing it, landing on the same clean gap the
archive page already has. */
body.single-product .product-title.product-above .kadence-breadcrumbs{
margin-top: 16px;
}
/* ================= END JE HEADER S ================= */
/* ==========================================================================
JE HEADER — T: Earth & Green header
Brings the header onto the same palette as the pages under it. Before
this it was still on the old scheme - a #FDFBF6 near-white shell with
#241A12 ink text and 2px corners - sitting directly above a Sand page
with Soil text and 8-12px corners. It read as a strip bolted on rather
than part of the page.
Follows the theme preview's own header: an Ochre announcement bar over
a Soil nav with cream links and a green accent. Safe to go dark here
because the header carries NO logo image - measured: zero ![]()
, no
site-logo widget, only text and 25 inline SVG icons, all of which use
fill:currentColor and therefore follow the text colour automatically.
Had there been a raster logo built for a light ground, this would have
needed a reversed version first.
The mega panel deliberately stays light. It holds ~36 links; cream on
dark at that density is harder to scan, and a light panel dropping out
of a dark bar is the clearer relationship anyway.
Loads LAST of the header blocks on purpose - it overrides colour only,
and leaves every layout rule in JE HEADER A-S untouched.
REVERT: delete this block; the header returns to the old palette.
========================================================================== */
/* ---- shell + sticky ---- */
header.elementor-location-header{
background:var(--je-primary) !important;
border-bottom:1px solid rgba(255,255,255,.10) !important;
}
/* ---- announcement / utility bar: ochre ---- */
header.elementor-location-header .je-utilbar{
background:var(--je-ochre-deep) !important;
}
/* opacity is forced to 1, not left at the .72/.78 the old ink bar used.
Fading white text is the same as lowering contrast - at .9 the effective
ratio drops back under the threshold the deepened background was chosen
to clear, which would have quietly undone the fix. */
header.elementor-location-header .je-utilbar [data-widget_type^="text-editor"]{
color:#fff !important;
opacity:1 !important;
}
header.elementor-location-header .je-utilbar .elementor-nav-menu--main
ul.elementor-nav-menu > li > a.elementor-item{
color:#fff !important;
fill:#fff !important;
opacity:1 !important;
}
header.elementor-location-header .je-utilbar .elementor-nav-menu--main
ul.elementor-nav-menu > li > a.elementor-item:hover,
header.elementor-location-header .je-utilbar .elementor-nav-menu--main
ul.elementor-nav-menu > li > a.elementor-item.elementor-item-active{
color:#fff !important;
opacity:1 !important;
text-decoration:underline !important; /* hover cue that does not rely on a contrast change */
text-underline-offset:3px;
}
/* ---- main nav: cream on soil ---- */
@media (min-width:1025px){
header.elementor-location-header .elementor-nav-menu--main
ul.elementor-nav-menu > li > a.elementor-item{
color:var(--je-on-primary) !important;
fill:var(--je-on-primary) !important;
}
/* Green underline on hover - the accent stays reserved for interaction,
which is the rule the whole theme is built on. */
header.elementor-location-header .elementor-nav-menu--main
ul.elementor-nav-menu > li > a.elementor-item:hover,
header.elementor-location-header .elementor-nav-menu--main
ul.elementor-nav-menu > li > a.elementor-item.elementor-item-active{
color:var(--je-on-primary) !important;
border-bottom-color:var(--je-green) !important;
}
}
/* ---- search field: readable on the dark bar ---- */
header.elementor-location-header input.e-search-input{
background:rgba(255,255,255,.10) !important;
border:1px solid rgba(255,255,255,.28) !important;
border-radius:8px !important;
color:var(--je-on-primary) !important;
}
/* .82 rather than .65: the field sits on Soil, and at .65 the placeholder
fell to roughly 4:1 against it. Placeholders are still text. */
header.elementor-location-header input.e-search-input::placeholder{
color:rgba(250,244,232,.82) !important;
}
header.elementor-location-header input.e-search-input:hover{
border-color:rgba(255,255,255,.45) !important;
}
header.elementor-location-header input.e-search-input:focus{
border-color:var(--je-green) !important;
background:rgba(255,255,255,.16) !important;
}
/* ---- cart ---- */
header.elementor-location-header .elementor-menu-cart__toggle_button{
border:1px solid rgba(255,255,255,.28) !important;
border-radius:8px !important;
color:var(--je-on-primary) !important;
fill:var(--je-on-primary) !important;
background:transparent !important;
}
header.elementor-location-header .elementor-menu-cart__toggle_button:hover{
border-color:rgba(255,255,255,.45) !important;
}
/* The badge digit is ~9.5px, far below any large-text allowance, so the
button's dark-on-green pairing (3.83:1) cannot be reused here. The
deeper green with white measures 5.61:1 and clears AA outright. */
header.elementor-location-header .elementor-button-icon-qty{
background:var(--je-green-deep) !important;
color:#fff !important;
}
/* ---- mega panel: stays light, now cream rather than paper ---- */
@media (min-width:1025px){
header.elementor-location-header .elementor-nav-menu--main
li.je-mega > ul.sub-menu{
background:var(--je-surface) !important;
border-top:0 !important;
border-bottom:0 !important;
box-shadow:0 18px 40px rgba(60,50,20,.22) !important;
}
header.elementor-location-header .elementor-nav-menu--main
li.je-mega > ul.sub-menu > li > a{
color:var(--je-ochre-text) !important; /* 10px column heads on Cream; plain ochre is 3.30:1 there */
border-bottom-color:var(--je-rule) !important;
}
header.elementor-location-header .elementor-nav-menu--main
li.je-mega ul.sub-menu ul.sub-menu a{
color:var(--je-muted) !important;
}
header.elementor-location-header .elementor-nav-menu--main
li.je-mega > ul.sub-menu > li > ul > li > a{
color:var(--je-primary) !important;
}
header.elementor-location-header .elementor-nav-menu--main
li.je-mega ul.sub-menu ul.sub-menu a:hover{
color:var(--je-primary) !important;
}
/* Secondary (non-mega) dropdowns get the same cream treatment. */
header.elementor-location-header .elementor-nav-menu--main
> ul.elementor-nav-menu > li:not(.je-mega) > ul.sub-menu{
background:var(--je-surface) !important;
border:0 !important;
border-radius:12px !important;
box-shadow:0 14px 32px rgba(60,50,20,.20) !important;
}
header.elementor-location-header .elementor-nav-menu--main
> ul.elementor-nav-menu > li:not(.je-mega) > ul.sub-menu a{
color:var(--je-muted) !important;
}
header.elementor-location-header .elementor-nav-menu--main
> ul.elementor-nav-menu > li:not(.je-mega) > ul.sub-menu a:hover{
background:var(--je-sand) !important;
color:var(--je-primary) !important;
}
}
/* ---- mobile: burger + dropdown on the dark bar ---- */
@media (max-width:1024px){
header.elementor-location-header .elementor-menu-toggle{
border:1px solid rgba(255,255,255,.28) !important;
border-radius:8px !important;
color:var(--je-on-primary) !important;
background:transparent !important;
}
header.elementor-location-header .elementor-menu-toggle:hover{
border-color:rgba(255,255,255,.45) !important;
}
header.elementor-location-header .elementor-menu-toggle.elementor-active{
background:var(--je-green) !important;
border-color:var(--je-green) !important;
color:var(--je-primary) !important;
}
/* The drawer stays light for the same scanning reason as the mega panel. */
header.elementor-location-header nav.elementor-nav-menu--dropdown{
background:var(--je-surface) !important;
border-top:0 !important;
box-shadow:0 18px 40px rgba(60,50,20,.22) !important;
}
header.elementor-location-header nav.elementor-nav-menu--dropdown
> ul.elementor-nav-menu > li > a.elementor-item{
color:var(--je-primary) !important;
border-bottom-color:var(--je-rule) !important;
}
header.elementor-location-header nav.elementor-nav-menu--dropdown
> ul > li > ul.sub-menu > li > a.elementor-sub-item{
color:var(--je-ochre-text) !important;
}
header.elementor-location-header nav.elementor-nav-menu--dropdown
> ul > li > ul > li > ul.sub-menu > li > a.elementor-sub-item{
color:var(--je-primary) !important;
}
header.elementor-location-header nav.elementor-nav-menu--dropdown
> ul > li > ul > li > ul > li > ul.sub-menu > li > a.elementor-sub-item{
color:var(--je-muted) !important;
border-left-color:var(--je-rule) !important;
}
header.elementor-location-header > a.je-mobile-account{
color:var(--je-on-primary) !important;
}
}
/* ================= END JE HEADER T ================= */
/* ==========================================================================
JE BREADCRUMBS — one treatment everywhere
Category and product pages were running two unrelated styles. Measured:
category: system sans, 14.45px, #1A202C slate, weight 400
product: Montserrat, 16px, #03AC1A green, weight 600
Neither matched the Earth & Green palette, and the product version
coloured the CURRENT page green too - so the one crumb that is not a
link looked exactly like the ones that are.
Deliberately NOT scoped to .je-cat-designed: the whole point is that the
trail looks the same wherever it appears, so this targets the breadcrumb
component itself and covers product pages, category pages and anything
else Kadence renders it on.
Colour choices are contrast-checked against BOTH grounds this appears
on - Sand on category pages, white on product pages:
muted-deep on Sand 5.27:1, on white 6.53:1
primary on Sand 9.37:1, on white 11.6:1
green-deep on Sand 4.52:1, on white 5.61:1 (hover)
========================================================================== */
nav#kadence-breadcrumbs,
.kadence-breadcrumbs{
font-family:var(--je-sans) !important;
/* 15px, not the 13px first tried. 13px was smaller than BOTH of the
styles it replaced (category 14.45px, product 16px), so unifying them
also shrank the trail - it read as fine print rather than navigation. */
font-size:15px !important;
line-height:1.5 !important;
margin-bottom:18px !important;
}
nav#kadence-breadcrumbs a,
.kadence-breadcrumbs a{
color:var(--je-muted-deep) !important;
font-weight:500 !important;
/* Underline kept rather than removed on rest: it identifies the links
without relying on colour alone, which is the accessible default. */
text-decoration:underline !important;
text-underline-offset:3px;
text-decoration-thickness:1px;
}
nav#kadence-breadcrumbs a:hover,
.kadence-breadcrumbs a:hover{
color:var(--je-green-deep) !important;
}
/* The current page is not a link, so it should not look like one: no
underline, darker, slightly heavier. */
nav#kadence-breadcrumbs .kadence-bread-current,
.kadence-breadcrumbs .kadence-bread-current{
color:var(--je-primary) !important;
font-weight:600 !important;
text-decoration:none !important;
}
/* Separators recede - they are punctuation, not content. */
nav#kadence-breadcrumbs .bc-delimiter,
.kadence-breadcrumbs .bc-delimiter{
color:var(--je-rule) !important;
padding:0 4px;
}
@media (max-width:560px){
nav#kadence-breadcrumbs,
.kadence-breadcrumbs{ font-size:13.5px !important; margin-bottom:14px !important; }
}
/* ================= END JE BREADCRUMBS ================= */
/* ==========================================================================
JE FOOTER — Earth & Green
The footer was a large flat green fill (#0BA21D - not even the brand
green) carrying #2D3748 slate text at roughly 3.2:1, under the 4.5:1
minimum, so it was genuinely hard to read. It also broke the theme's own
stated rule: "#03AC13 is bright - use it for buttons, links, highlights
and numbers only, never large backgrounds."
Now Soil with cream text, matching JE HEADER T. That bookends the page -
dark top, dark bottom, warm content between - which is what the design
preview does too.
Structure is Kadence's footer builder, three rows:
.site-top-footer-wrap nav + social
.site-middle-footer-wrap three widget columns
.site-bottom-footer-wrap copyright
The widget columns already carry je- classes from earlier work
(.je-footer-office-title etc.), so the column headings have real hooks
and do not need to be targeted positionally.
Every colour here is contrast-checked against Soil:
cream 10.62:1
muted-inverse 5.98:1
ochre-on-dark 5.09:1 (headings)
Green is deliberately NOT used for footer links: on Soil it is 3.78:1
and would fail. Links rest at muted-inverse and brighten to cream on
hover, which passes in both states.
========================================================================== */
footer#colophon.site-footer,
footer#colophon .site-footer-row-container,
footer#colophon .site-top-footer-wrap,
footer#colophon .site-middle-footer-wrap,
footer#colophon .site-bottom-footer-wrap{
background-color:var(--je-primary) !important;
background-image:none !important;
}
footer#colophon.site-footer{
color:var(--je-on-primary) !important;
font-family:var(--je-sans) !important;
}
/* ---- column headings ---- */
footer#colophon .je-footer-office-title,
footer#colophon .je-footer-factory-title,
footer#colophon .je-footer-policies-title{
font-family:var(--je-sans) !important;
font-size:12px !important;
font-weight:700 !important;
letter-spacing:.14em !important;
text-transform:uppercase !important;
color:var(--je-ochre-on-dark) !important;
margin-bottom:12px !important;
}
/* The widgets put a
straight after each title, which doubles the gap
the margin above already provides. */
footer#colophon .je-footer-office-address br:first-child,
footer#colophon .je-footer-factory-address br:first-child{
display:none;
}
/* ---- addresses ---- */
footer#colophon .je-footer-office-address,
footer#colophon .je-footer-factory-address{
font-size:14.5px !important;
line-height:1.65 !important;
color:var(--je-muted-inverse) !important;
max-width:38ch;
}
/* ---- policy list ---- */
footer#colophon .je-footer-policies-list{
list-style:none !important;
margin:0 !important;
padding:0 !important;
}
footer#colophon .je-footer-policies-list li{
padding:4px 0 !important;
list-style:none !important;
}
/* ---- links: rest muted, brighten on hover ---- */
footer#colophon a{
color:var(--je-muted-inverse) !important;
text-decoration:none !important;
transition:color .15s ease;
}
footer#colophon a:hover,
footer#colophon a:focus{
color:var(--je-on-primary) !important;
text-decoration:underline !important;
text-underline-offset:3px;
}
/* ---- top row nav ---- */
footer#colophon .footer-navigation ul{
display:flex !important;
flex-wrap:wrap !important;
gap:8px 30px !important;
justify-content:center;
margin:0 !important;
padding:0 !important;
list-style:none !important;
}
footer#colophon .footer-navigation a{
font-size:15px !important;
font-weight:600 !important;
color:var(--je-on-primary) !important;
}
footer#colophon .footer-navigation a:hover{
color:var(--je-ochre-on-dark) !important;
}
/* ---- social icons ---- */
footer#colophon .footer-social-inner a,
footer#colophon .footer-social-wrap a{
color:var(--je-muted-inverse) !important;
fill:var(--je-muted-inverse) !important;
}
footer#colophon .footer-social-inner a:hover,
footer#colophon .footer-social-wrap a:hover{
color:var(--je-on-primary) !important;
fill:var(--je-on-primary) !important;
}
/* ---- separators between rows ---- */
footer#colophon .site-middle-footer-wrap{
border-top:1px solid rgba(250,244,232,.14) !important;
border-bottom:1px solid rgba(250,244,232,.14) !important;
}
/* ---- bottom bar ---- */
footer#colophon .site-bottom-footer-wrap,
footer#colophon .site-info{
font-size:13px !important;
color:var(--je-muted-inverse) !important;
}
@media (max-width:768px){
footer#colophon .footer-navigation ul{ gap:6px 20px !important; }
footer#colophon .je-footer-office-address,
footer#colophon .je-footer-factory-address{ font-size:14px !important; max-width:none; }
}
/* ================= END JE FOOTER ================= */
/* ================= JE: hide variation swatches on archive/loop cards ================= */
/* Variation Swatches for WooCommerce (Pro) injects a full attribute-swatch
row - closure, print, size - into every product card wherever WooCommerce
loops products: shop/category archives, search results, related products.
Wrapper is div.wvs-archive-variations-wrapper, a sibling AFTER
.product-action-wrap (the "Select options" button) and containing nothing
else - no price, no button - so hiding it is a clean removal, not a
partial one. The card falls back to title / price / "Select options",
matching the single product page for the actual configuration. */
.wvs-archive-variations-wrapper{
display: none !important;
}
/* ================= END JE: hide archive swatches ================= */
/* ==========================================================================
JE PHASE 6 — Category archive design, all 34 categories + shop page
Markup comes from the "CATEGORY HUB ARCHIVE" snippet. That snippet adds
body.je-cat-designed only on pages it is configured for, so everything
here is scoped to that class and cannot leak onto a page that has not
been opted in. That replaced an earlier approach of naming each slug in
the CSS, which would have meant 35 hard-coded selectors kept in sync by
hand with the snippet's config - guaranteed to drift.
SUPERSEDES JE PHASE 5. The old branding-page block is retired along
with its snippet; this engine renders that page now.
Hero photo is the category's own WooCommerce image, so it is set in
Products > Categories, not here. Pages with no image get
.je-cat-hero--noimg and lay the hero out full width instead - a
deliberate fallback, not a broken state.
REVERT: delete everything from this header to the END OF JE PHASE 6 marker.
========================================================================== */
/* ---------- page chrome: ground, title, description, product cards ----------
Ported from the retired JE PHASE 5 block, which styled these for the
branding page only. Removing that block reverted every designed page to
Kadence's defaults - a Montserrat H1 in bright green, a pure-black
description running the full column width, and unstyled product cards.
Scoped to body.je-cat-designed so it now covers all 35 pages instead of
one, and still cannot touch a page that has not been opted in.
The page ground is the visible fix here. Kadence paints #F7FAFC, a
blue-tinted white, which reads as cold and slightly grey next to the
warm cream/sand palette everything else on the page uses. --je-paper is
the same brightness but warm, so the sections stop looking like they
were pasted onto the wrong background.
!important is required here, not decorative: Kadence paints the body
background from its own global stylesheet and the plain declaration lost
to it (measured - body still computed #F7FAFC after the first attempt).
Every other Kadence override in this file carries !important for the
same reason. */
body.je-cat-designed,
body.je-cat-designed.archive,
body.je-cat-designed.woocommerce-shop{
background-color:var(--je-ground) !important;
/* The preview's woven texture: two faint diagonal hatches crossing at
90 degrees, echoing the weave of the fabric being sold. Kept at 3%
opacity - visible as a grain when you look for it, invisible when you
are reading. It is what stops a large flat sand field looking like a
rendering error on a big monitor. */
background-image:
repeating-linear-gradient(45deg, rgba(120,95,50,.03) 0 2px, transparent 2px 9px),
repeating-linear-gradient(-45deg, rgba(120,95,50,.03) 0 2px, transparent 2px 9px) !important;
}
/* The inner wrappers are transparent by default, but Kadence paints
.content-bg white on archive pages, which would sit as a hard white slab
over the warm ground. Cleared so the page reads as one surface. */
body.je-cat-designed .content-container.site-container,
body.je-cat-designed .content-area,
body.je-cat-designed main.site-main{
background-color:transparent !important;
}
/* Title: display face, ink rather than the theme's green. Green is a brand
ACCENT - reserved for actions and highlights - so a full headline in it
competes with the actual buttons instead of leading the page. */
body.je-cat-designed h1.page-title.archive-title{
font-family:var(--je-serif) !important;
font-weight:400 !important; /* Young Serif ships one weight; 700 would fake-bold it */
font-size:clamp(30px,3.6vw,46px) !important;
line-height:1.12 !important;
letter-spacing:0 !important; /* the serif is drawn tight already; negative tracking muddies it */
color:var(--je-primary) !important;
max-width:18ch;
margin:0 0 14px !important;
}
/* Description: capped near 62 characters. Unstyled it ran the full column
width, which is far past a comfortable reading measure. */
body.je-cat-designed .archive-description{margin-bottom:0 !important;}
body.je-cat-designed .archive-description p{
font-family:var(--je-sans) !important;
font-size:18px !important;
line-height:1.6 !important;
color:var(--je-muted-deep) !important; /* sits on Sand: --je-muted is only 4.18:1 there */
max-width:62ch;
margin:0 !important;
}
/* Result count and the sorting select, so the row above the grid does not
fall back to the theme's own typography mid-page. */
body.je-cat-designed .woocommerce-result-count,
body.je-cat-designed .woocommerce-ordering select{
font-family:var(--je-mono) !important;
font-size:12.5px !important;
color:var(--je-muted-deep) !important;
}
/* ---------- product cards ----------
:not(.product-category) matters: subcategory tiles are also li.product
and have their own card treatment further down. Without the exclusion
these two rule sets fight over the same elements on hub pages. */
body.je-cat-designed ul.products li.product:not(.product-category){
/* Cream on the sand ground, not white. The layering IS the theme - a
white card on a near-white page has nothing to lift off. */
background:var(--je-surface) !important;
border:0 !important;
border-radius:12px !important;
overflow:hidden;
box-shadow:0 3px 14px rgba(60,50,20,.08);
transition:box-shadow .18s ease, transform .18s ease;
}
body.je-cat-designed ul.products li.product:not(.product-category):hover{
box-shadow:0 12px 28px rgba(60,50,20,.16);
transform:translateY(-3px);
}
body.je-cat-designed ul.products li.product:not(.product-category) a.woocommerce-loop-image-link{
display:block; aspect-ratio:1/1; overflow:hidden; background:var(--je-sand);
}
body.je-cat-designed ul.products li.product:not(.product-category) a.woocommerce-loop-image-link img{
width:100% !important; height:100% !important; object-fit:cover;
transition:transform .4s ease;
}
body.je-cat-designed ul.products li.product:not(.product-category):hover a.woocommerce-loop-image-link img{
transform:scale(1.05);
}
body.je-cat-designed ul.products li.product:not(.product-category) .product-details{
padding:15px 15px 17px !important;
}
body.je-cat-designed ul.products li.product:not(.product-category) h2.woocommerce-loop-product__title{
font-family:var(--je-sans) !important;
font-weight:600 !important;
font-size:14px !important;
line-height:1.4 !important;
color:var(--je-primary) !important;
margin:0 0 8px !important;
}
body.je-cat-designed ul.products li.product:not(.product-category) .price{
font-family:var(--je-sans) !important;
font-weight:800 !important;
font-size:15px !important;
color:var(--je-primary) !important;
}
body.je-cat-designed ul.products li.product:not(.product-category) .price .woocommerce-price-suffix{
display:block;
font-family:var(--je-body) !important;
font-size:11px !important;
color:var(--je-muted) !important;
}
/* The button reads as a quiet text link, not a second green block. Each
card already competes for attention with its photo; a grid of 20 filled
green buttons would drown the page's real CTA. */
body.je-cat-designed ul.products li.product:not(.product-category) a.add_to_cart_button,
body.je-cat-designed ul.products li.product:not(.product-category) a.button{
font-family:var(--je-sans) !important;
font-weight:700 !important;
font-size:14px !important;
color:var(--je-ochre-text) !important; /* preview's card link colour, carried down to clear AA on Cream */
background:transparent !important;
border:0 !important;
padding:0 !important;
margin-top:10px !important;
}
/* ---------- hero ---------- */
.je-cat-hero{
padding-bottom:40px;
border-bottom:1px solid var(--je-rule);
margin-bottom:0;
}
.je-cat-hero__text{display:flex; flex-direction:column; gap:26px; min-width:0;}
.je-cat-hero__text .entry-header{margin:0 !important; padding:0 !important; border:0 !important;}
.je-cat-hero__text .archive-description{margin:14px 0 0 !important;}
.je-cat-facts{display:flex; flex-wrap:wrap; gap:36px;}
.je-cat-fact{font-family:var(--je-mono);}
.je-cat-fact b{display:block; font-family:var(--je-serif); font-size:26px; font-weight:400; color:var(--je-green);}
.je-cat-fact span{font-family:var(--je-sans); font-size:13px; color:var(--je-muted-deep); letter-spacing:.02em;}
.je-cat-cta{display:flex; gap:14px; flex-wrap:wrap;}
.je-cat-cta--center{justify-content:center; margin-top:24px;}
/* 19px, not the 16px the preview used, and the reason is contrast rather
than taste. The theme's rule is dark text on the green fill, and Soil on
#03AC13 measures 3.83:1 - short of the 4.5:1 AA wants for normal text,
though clear of the 3:1 it accepts for large text. WCAG counts bold type
as large from 18.66px, so 19px/700 makes this pairing genuinely
compliant instead of nearly compliant. Keeping the theme's look and
failing the check was not a real option, and white on green is worse
still at 3.04:1. */
.je-cat-btn{
font-family:var(--je-sans); font-weight:700; font-size:19px;
padding:15px 30px; border-radius:8px; text-decoration:none;
display:inline-flex; align-items:center; justify-content:center; gap:8px;
transition:transform .15s ease, background .15s ease;
}
/* Dark text on the green fill, per the theme's own stated rule: #03AC13 is
a bright green and white on it is the weakest pairing available. Soil
text reads cleanly and keeps the button feeling part of the palette
rather than a generic web button dropped on top of it. */
.je-cat-btn--primary{background:var(--je-green); color:var(--je-primary); border:none; box-shadow:0 4px 14px rgba(0,0,0,.18);}
.je-cat-btn--primary:hover{background:var(--je-green); color:var(--je-primary); transform:translateY(-2px);}
.je-cat-btn--ghost{background:transparent; border:2px solid var(--je-primary); color:var(--je-primary);}
.je-cat-btn--ghost:hover{background:var(--je-primary); color:var(--je-on-primary); transform:translateY(-2px);}
.je-cat-hero__photo{
position:relative; border-radius:5px; overflow:hidden; background:var(--je-sand);
box-shadow:0 20px 44px -20px rgba(36,26,18,.28);
}
.je-cat-hero__photo img{width:100%; height:100%; object-fit:cover; display:block;}
.je-cat-tag{
position:absolute; left:16px; bottom:16px; max-width:260px;
background:var(--je-surface); border:0; border-radius:12px;
padding:14px 17px; font-family:var(--je-sans); font-size:13.5px; line-height:1.45; color:var(--je-primary);
box-shadow:0 6px 20px rgba(60,50,20,.18);
}
.je-cat-tag span{
display:block; font-family:var(--je-sans); font-size:11px; font-weight:700;
letter-spacing:.12em; text-transform:uppercase; color:var(--je-ochre-text); margin-bottom:4px;
}
/* ---------- client strip ---------- */
.je-cat-clients{
display:flex; align-items:center; gap:24px; flex-wrap:wrap;
padding:24px 0; border-bottom:1px solid var(--je-rule); margin-bottom:34px;
}
.je-cat-clients__label{
font-family:var(--je-sans); font-size:12px; font-weight:700;
letter-spacing:.15em; text-transform:uppercase;
color:var(--je-muted-deep); white-space:nowrap;
}
.je-cat-clients__names{display:flex; gap:12px; flex-wrap:wrap;}
/* The preview shows client names as bordered chips rather than loose text -
it reads as a credential list instead of a stray line of words. */
.je-cat-clients__names span{
font-family:var(--je-sans); font-weight:700; font-size:14px;
color:var(--je-muted-deep);
border:1.5px dashed rgba(120,95,50,.45); border-radius:8px;
padding:11px 18px; background:rgba(255,255,255,.3);
}
/* ---------- shared section heading ---------- */
/* Eyebrows in ochre, not green. The theme reserves green strictly for
things you can click; using it on labels too made every section shout at
the same volume as the buttons. */
.je-cat-eyebrow{
font-family:var(--je-sans); font-size:12px; font-weight:700;
letter-spacing:.14em; text-transform:uppercase;
color:var(--je-ochre-text); display:inline-flex; align-items:center; gap:10px; margin-bottom:12px;
}
.je-cat-sec__head h2{
font-family:var(--je-serif); font-weight:400;
font-size:clamp(26px,3.2vw,36px); line-height:1.15;
color:var(--je-primary); margin:0; max-width:22ch;
}
/* ---------- what you get ---------- */
.je-cat-includes{padding:52px 0 8px;}
.je-cat-includes__grid{
display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
background:var(--je-rule); border:1px solid var(--je-rule); margin-top:26px;
}
.je-cat-inc{background:var(--je-surface); padding:24px 22px;}
.je-cat-inc h3{font-family:var(--je-sans); font-weight:800; font-size:16px; color:var(--je-primary); margin:0 0 8px;}
.je-cat-inc p{font-family:var(--je-sans); font-size:14.5px; line-height:1.6; color:var(--je-muted); margin:0;}
/* ---------- how it works ---------- */
.je-cat-process{padding:52px 0 8px;}
.je-cat-process__list{display:flex; flex-direction:column; margin-top:26px;}
.je-cat-process__item{
display:grid; grid-template-columns:70px 1fr; gap:22px;
padding:20px 0; border-top:1px solid var(--je-rule);
}
.je-cat-process__item:last-child{border-bottom:1px solid var(--je-rule);}
.je-cat-process__num{font-family:var(--je-serif); font-size:28px; color:var(--je-green); opacity:1;}
.je-cat-process__item h3{font-family:var(--je-sans); font-weight:800; font-size:16.5px; color:var(--je-primary); margin:0 0 5px;}
.je-cat-process__item p{font-family:var(--je-sans); font-size:14.5px; color:var(--je-muted-deep); margin:0; max-width:62ch;}
/* ---------- closing band ---------- */
/* The preview's final CTA is a rounded gradient panel running ochre into
soil, not a flat dark slab. On a sand ground the gradient is what makes
it read as a deliberate closing statement rather than a footer. */
.je-cat-band{
background:linear-gradient(135deg, var(--je-ochre), var(--je-primary));
color:var(--je-on-primary); text-align:center;
padding:60px 32px; margin:56px 0 0; border-radius:20px;
}
.je-cat-band h2{
font-family:var(--je-serif); font-weight:400;
font-size:clamp(26px,3.4vw,38px); line-height:1.15;
color:var(--je-on-primary); max-width:36ch; margin:0 auto;
}
.je-cat-band p{
font-family:var(--je-sans); font-size:15.5px; color:var(--je-on-primary); opacity:.85;
margin:12px auto 0; max-width:48ch;
}
/* ---------- product / subcategory tiles ----------
Scoped by body.je-cat-designed, which the snippet adds only on
configured pages - so this cannot touch a page not opted in, and no
slug list has to be maintained here. */
body.je-cat-designed ul.products li.product-category{
border:0; border-radius:14px; overflow:hidden;
background:var(--je-surface);
box-shadow:0 3px 14px rgba(60,50,20,.08);
transition:box-shadow .2s ease, transform .2s ease;
}
body.je-cat-designed ul.products li.product-category:hover{
box-shadow:0 14px 32px rgba(60,50,20,.18);
transform:translateY(-3px);
}
body.je-cat-designed ul.products li.product-category a{display:block; text-decoration:none;}
body.je-cat-designed ul.products li.product-category img{
width:100% !important; height:auto !important; aspect-ratio:16/10;
object-fit:cover; display:block; margin:0 !important;
}
body.je-cat-designed ul.products li.product-category .woocommerce-loop-category__title{
font-family:var(--je-serif) !important;
font-size:21px !important; font-weight:400 !important;
color:var(--je-primary) !important; text-align:left !important;
padding:20px 24px 24px !important; margin:0 !important; line-height:1.2 !important;
}
/* The theme prints a raw product count after the title. Next to a styled
heading it reads as a typo rather than as information. */
body.je-cat-designed ul.products li.product-category .woocommerce-loop-category__title mark.count{
display:none !important;
}
/* Column counts come from body.je-tiles-N, set by the snippet from the
actual number of subcategories. Explicit counts rather than
auto-fit/minmax on purpose: auto-fit fits as many columns as will fit
and then leaves the last row short, which looks like a mistake at 2 or
3 tiles. Capped at 4 by the snippet, so 10 subcategories wrap 4/4/2. */
body.je-cat-designed.je-tiles-1 ul.products,
body.je-cat-designed.je-tiles-2 ul.products,
body.je-cat-designed.je-tiles-3 ul.products,
body.je-cat-designed.je-tiles-4 ul.products{
display:grid !important; gap:26px !important; margin:0 !important;
}
body.je-cat-designed.je-tiles-1 ul.products{grid-template-columns:minmax(0,560px) !important;}
body.je-cat-designed.je-tiles-2 ul.products{grid-template-columns:repeat(2,1fr) !important;}
body.je-cat-designed.je-tiles-3 ul.products{grid-template-columns:repeat(3,1fr) !important;}
body.je-cat-designed.je-tiles-4 ul.products{grid-template-columns:repeat(4,1fr) !important;}
/* ---------- hero: desktop ---------- */
@media (min-width:1025px){
.je-cat-hero{
display:grid;
grid-template-columns:minmax(0,1.1fr) minmax(320px,0.9fr);
gap:clamp(40px,4vw,72px);
/* stretch, never center, and no aspect-ratio on the photo: the photo
takes its height from the text column, so the two sides cannot
disagree. A fixed ratio fixes the photo's height while the text
height stays fluid, and every mismatch shows up as dead space above
and below the text - the bug that took several passes to kill on the
branding page. */
align-items:stretch;
}
.je-cat-hero--noimg{display:block;}
.je-cat-hero__photo{width:100%; max-width:480px; margin-left:auto; min-height:400px;}
}
/* ---------- hero: mobile + tablet ---------- */
@media (max-width:1024px){
.je-cat-hero{display:flex; flex-direction:column; gap:26px; padding-bottom:32px;}
.je-cat-hero__text{gap:22px;}
.je-cat-hero__text .archive-description{margin:12px 0 0 !important;}
.je-cat-facts{gap:20px 28px;}
.je-cat-fact b{font-size:19px;}
.je-cat-fact span{font-size:10.5px;}
.je-cat-hero__photo{width:100%; max-width:440px; margin-inline:auto; aspect-ratio:1/1;}
.je-cat-cta .je-cat-btn{flex:1 1 180px;}
}
@media (max-width:900px){
.je-cat-includes__grid{grid-template-columns:repeat(2,1fr);}
body.je-cat-designed.je-tiles-3 ul.products,
body.je-cat-designed.je-tiles-4 ul.products{grid-template-columns:repeat(2,1fr) !important;}
}
@media (max-width:560px){
.je-cat-includes__grid{grid-template-columns:1fr;}
.je-cat-process__item{grid-template-columns:46px 1fr;}
.je-cat-band{padding:40px 20px;}
.je-cat-clients{flex-direction:column; align-items:flex-start; gap:12px;}
body.je-cat-designed.je-tiles-2 ul.products,
body.je-cat-designed.je-tiles-3 ul.products,
body.je-cat-designed.je-tiles-4 ul.products{grid-template-columns:1fr !important;}
}
/* ================= END OF JE PHASE 6 ================= */