/* FONTS ARE NO LONGER LOADED FROM THIS FILE. Removed 31 Aug 2026. There was an @import here pulling Young Serif, Figtree and DM Mono. It worked, but it was the most expensive possible way to fetch a font: an @import is a CHAINED request, unable to start until this 49.5 KB stylesheet has itself been downloaded and parsed. The fonts queued behind it rather than loading alongside everything else - straight onto the critical path, on mobile, where it hurts most. It also duplicated: Elementor was fetching Figtree separately from fonts-api.wp.com, and Montserrat and Poppins came from both Kadence and the je-fonts snippet. Five families arrived over four requests to two hosts, three of them twice over. All five now come in ONE request enqueued by the PERFORMANCE TRIM snippet, with preconnect to fonts.gstatic.com. Same families, same weights - Young Serif (headings), Figtree (body/UI), DM Mono (labels), Montserrat and Poppins (header and homepage). SO: if type falls back to Georgia and system-ui across the site, the cause is that snippet being inactive, NOT anything in this file. Nothing here loads a font any more. */ /* ========================================================================== 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', 'DM Mono Fallback', ui-monospace, monospace; --je-green:#027D0E; /* was #03AC13 (3.0:1 on white); #027D0E passes 4.5:1 for text and white-on-green. JE POLISH, 13 Sep 2026 */ --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', 'Young Serif Fallback', Georgia, serif; --je-sans:'Figtree', 'Figtree Fallback', Arial, system-ui, 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; } /* ========================================================================== JE POLISH 2, theme font stacks - 13 Sep 2026 (second Lighthouse pass). Placed right after the tokens ON PURPOSE: these rules must beat the theme's own stacks (same specificity, printed earlier in the page) and lose to every Juteearth rule below (all later in this file). Kadence paints every heading, breadcrumb and loop title in Montserrat and every button and price in Poppins; Elementor's kit paints the body and header menu in Figtree. None of those stacks name a metric-matched fallback, so on the cart, About Us, the story page, How It Works and every blog post the text re-flowed when the web font arrived (the "Web font loaded" layout shifts, 0.04 to 0.26). Same fonts, same look; only the fallback face behind each one changes. Faces are declared in the JE POLISH block near the end of this file. REVERT: delete from this header to the END JE POLISH 2 TOP marker. ========================================================================== */ h1, h2, h3, h4, h5, h6, .entry-hero h1, .entry-hero .kadence-breadcrumbs, .entry-hero .search-form, .product-title .kadence-breadcrumbs, .woocommerce div.product .product_title, .wp-site-blocks .product-archive-title h1, .woocommerce ul.products li.product h3, .woocommerce ul.products li.product .product-details .woocommerce-loop-product__title, .woocommerce ul.products li.product .product-details .woocommerce-loop-category__title, .wc-block-grid__products .wc-block-grid__product .wc-block-grid__product-title, .elementor-754 .elementor-element.elementor-element-b422a0e .elementor-nav-menu--dropdown .elementor-item, .elementor-754 .elementor-element.elementor-element-b422a0e .elementor-nav-menu--dropdown .elementor-sub-item{ font-family:Montserrat, "Montserrat Fallback", sans-serif; } button, .button, .wp-block-button__link, input[type="button"], input[type="reset"], input[type="submit"], .fl-button, .elementor-button-wrapper .elementor-button, .wc-block-components-checkout-place-order-button, .wc-block-cart__submit, .woocommerce div.product .product-single-category, .woocommerce ul.products li.product .product-details .price, .wc-block-grid__products .wc-block-grid__product .wc-block-grid__product-price, .woocommerce ul.products.woo-archive-btn-button .product-action-wrap .button:not(.kb-button), .woocommerce ul.products li.woo-archive-btn-button .button:not(.kb-button), .wc-block-grid__product.woo-archive-btn-button .product-details .wc-block-grid__product-add-to-cart .wp-block-button__link{ font-family:Poppins, "Poppins Fallback", sans-serif; } /* Elementor kit 533: body copy and the primary typography variable. */ body.elementor-kit-533{ font-family:var(--je-sans); --e-global-typography-primary-font-family:var(--je-sans); } .elementor-754 .elementor-element.elementor-element-b422a0e .elementor-nav-menu .elementor-item{ font-family:var(--je-sans); } /* My Jute Cute Story: the page's own styles name Poppins and Montserrat with a bare system-ui fallback (specificity raised because that style block sits in the body, after this file). */ body .jjs-page{ font-family:Poppins, "Poppins Fallback", system-ui, sans-serif; } body .jjs-heading, body .jjs-subheading{ font-family:Montserrat, "Montserrat Fallback", system-ui, sans-serif; } /* ================= END JE POLISH 2 TOP ================= */ /* ================= 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. DESKTOP ONLY. These two rules were written for the hover dropdown and used to apply at every width, so on a phone the My Account page's menu drew the "Bags" sub-items as an absolute box on top of "Custom Printing" and "Blogs" (Krishna's iPhone, 11 Sep 2026). The phone menu is a stacked list and must keep position:static. */ @media (min-width: 1025px){ 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; min-width: 0 !important; /* a flex item's default min-width is its content's minimum; below ~1500px that minimum (813px of order desk) pushed the desk past the viewport. 12 Sep 2026. */ 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:35.9em /* was 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:34.6em /* was 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 Young Serif / Figtree / DM Mono, which the PERFORMANCE TRIM snippet now enqueues - they are no longer imported from 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_size"] 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:35.9em /* was 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_size"] 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_size"] 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; } /* Column divider at the RIGHT EDGE of each row. The segmented control clears border-right on :last-child only, which is correct while the chips are one row - the last item is the right edge. Forced into three columns, item 3 is also a right edge but is NOT :last-child, so its divider painted straight against the container's own border and read as a doubled line beside S on every six-size product. :nth-child(3n) is "last in its row" for a 3-column grid, and stays correct for any item count: 6 chips clear items 3 and 6, 9 would clear 3, 6 and 9. */ body.single-product ul[data-attribute_name^="attribute_size"]:has(li.variable-item:nth-child(4)) li.variable-item.button-variable-item:nth-child(3n){ border-right:0 !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_size"] 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_size"] 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:30.8em /* was 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_size"] 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 !important; justify-content:space-between !important; align-items:baseline; gap:10px; margin:0 0 11px; width:100% !important; text-align:left !important; 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 label is pinned left by its own margin, not only by the row's justify-content, and that redundancy is deliberate. These headings come in two shapes: the required fields render [label][Required] - two children, which space-between puts at the two ends correctly - while HANDLE COLOR renders [label] alone. A single flex child is laid out from flex-start, so it should also sit left, and measured on the live page it does: offset 0 from the container edge at both 1280 and 1920, with no ancestor overriding text-align. It was still reported as sitting centre/right, which cannot be reproduced here - so rather than guess at which rule wins elsewhere, margin-right:auto makes the outcome independent of the container's justify-content entirely. Even if something later flips the row to center or flex-end, the label stays hard left and only the Required tag moves. It costs nothing when the row is already correct. */ body.single-product .wpo-field p.wpo-option-name .wpo-option-name__text{ margin-right:auto !important; text-align:left !important; } /* Same treatment for the plugin's separate