/*
Theme Name: Jungle Standard
Author: Jungle Standard
Description: Jungle Standard storefront with WooCommerce and adult-entry compliance.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wildroot
Tags: e-commerce, woocommerce
*/
/* ==========================================================
TOKENS — BuyKratomHere brand board: soft & modern
========================================================== */
:root {
/* Brand board palette */
--canopy: #3e5c3f; /* forest canopy — primary */
--canopy-deep: #2f4830;
--earth: #43302a; /* earthy brown — headings/text */
--earth-soft: #6b5a50;
--gold: #c2a14d; /* root gold — accent */
--gold-soft: #e9dcbc;
--stone: #a9a49b; /* river stone — muted */
--cream: #f7f3ec; /* page ground */
--card: #fffdf9; /* card surface */
/* Vein taxonomy — softened tints */
--vein-red: #b06152;
--vein-green: #6f8f68;
--vein-white: #d8d2c4;
--vein-yellow: #d3b264;
--vein-gold: #b8933f;
--display: 'Fraunces', Georgia, serif;
--body: 'Figtree', system-ui, sans-serif;
--radius: 16px;
--radius-sm: 10px;
--gutter: clamp(1.25rem, 4vw, 3rem);
--measure: 66ch;
--shadow: 0 6px 24px rgba(67, 48, 42, .08);
}
/* ==========================================================
BASE
========================================================== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
margin: 0;
background: var(--cream);
color: var(--earth);
font-family: var(--body);
font-size: 1.0625rem;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
font-family: var(--display);
font-weight: 560;
font-variation-settings: 'SOFT' 100, 'opsz' 40;
line-height: 1.12;
letter-spacing: -0.015em;
color: var(--earth);
margin: 0 0 .5em;
}
h1 { font-size: clamp(2.3rem, 5.5vw, 4rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
h3 { font-size: 1.3rem; }
a { color: var(--canopy); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--gold); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
img { max-width: 100%; height: auto; display: block; border-radius: var(--radius-sm); }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }
.wr-eyebrow {
display: block;
font-family: var(--body);
font-size: .8125rem;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: .9rem;
}
.price, .wr-batch { font-family: var(--body); font-size: .875rem; }
/* ==========================================================
HEADER — light, airy
========================================================== */
.site-header {
background: var(--card);
border-bottom: 1px solid #eee7da;
position: relative;
}
.header-actions { display: flex; align-items: center; gap: 1rem; }
.header-search-toggle {
background: none; border: none; padding: .3rem; margin: 0; cursor: pointer;
color: var(--earth); display: inline-flex; line-height: 0; border-radius: 50%;
}
.header-search-toggle:hover { color: var(--canopy); }
.header-search-toggle:focus-visible { outline: 2px solid var(--canopy); outline-offset: 2px; }
.header-login {
color: var(--earth); font-size: .9375rem; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.header-login:hover { color: var(--canopy); }
.wr-search-panel {
position: absolute; top: calc(100% + .4rem); right: var(--gutter); z-index: 60;
background: var(--card); border: 1px solid #eee7da; border-radius: var(--radius);
box-shadow: 0 16px 40px rgba(67,48,42,.16);
padding: 1rem; width: min(380px, calc(100vw - 2 * var(--gutter)));
}
.wr-search-panel form,
.wr-search-panel .woocommerce-product-search { display: flex; gap: .5rem; margin: 0; }
.wr-search-panel label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wr-search-panel input.search-field,
.wr-search-panel input[type="search"] {
flex: 1 1 auto; min-width: 0; padding: .6rem .85rem; font: inherit;
border: 1px solid #e6ded0; border-radius: 999px; background: var(--cream); color: var(--earth);
}
.wr-search-panel button[type="submit"] {
flex: 0 0 auto; background: var(--canopy); color: #fff; border: none;
border-radius: 999px; padding: .6rem 1.15rem; font-weight: 600; cursor: pointer;
}
.wr-search-panel button[type="submit"]:hover { background: var(--canopy-deep); }
.site-header .wrap {
display: flex; align-items: center; justify-content: space-between;
gap: 1.5rem; padding-top: 1.1rem; padding-bottom: 1.1rem; flex-wrap: wrap;
}
.site-logo {
display: inline-flex; align-items: center; gap: .55rem; text-decoration: none;
}
/* .site-header prefix keeps these ahead of WooCommerce's `.woocommerce img{height:auto}` (0,1,1) on shop/archive pages */
.site-header .site-logo__mark { height: 48px; width: auto; display: block; }
.site-header .site-logo__word { height: 30px; width: auto; display: block; }
@media (max-width: 560px) {
.site-header .site-logo__mark { height: 40px; }
.site-header .site-logo__word { height: 25px; }
}
.site-nav ul { list-style: none; display: flex; gap: 1.9rem; margin: 0; padding: 0; }
.site-nav a {
font-size: .9375rem; font-weight: 500;
color: var(--earth-soft); text-decoration: none;
}
.site-nav a:hover { color: var(--canopy); }
.header-cart a {
color: var(--earth); font-size: .9375rem; font-weight: 600; text-decoration: none;
background: var(--gold-soft); padding: .45rem 1rem; border-radius: 999px;
}
.compliance-strip {
background: var(--canopy); color: #eef2ea;
font-size: .75rem; font-weight: 500; letter-spacing: .06em;
text-align: center; padding: .4rem var(--gutter);
}
/* Mobile header: logo + cart on top row, nav wraps to its own centered row */
@media (max-width: 820px) {
.site-header .wrap { row-gap: .9rem; }
.site-logo { order: 1; }
.header-actions { order: 2; }
.site-nav { order: 3; flex-basis: 100%; }
.site-nav ul { flex-wrap: wrap; justify-content: center; gap: .4rem 1.2rem; }
.site-nav a { display: inline-block; padding: .4rem 0; }
}
/* ==========================================================
HERO — warm, light, breathing room
========================================================== */
.wr-hero {
background: linear-gradient(180deg, var(--card) 0%, var(--cream) 100%);
padding: clamp(3.5rem, 10vw, 7.5rem) 0 clamp(3rem, 8vw, 6rem);
position: relative;
}
.wr-hero h1 { max-width: 17ch; }
.wr-hero h1 .accent { color: var(--canopy); font-style: italic; font-variation-settings: 'SOFT' 100, 'opsz' 60; }
.wr-hero p { max-width: 52ch; font-size: 1.15rem; color: var(--earth-soft); }
/* hero strata ribbon removed */
.wr-btn, .button, .single_add_to_cart_button {
display: inline-block;
font-family: var(--body); font-size: .9375rem; font-weight: 600;
background: var(--canopy); color: #fff !important;
border: none; border-radius: 999px;
padding: .85rem 1.9rem; text-decoration: none; cursor: pointer;
transition: background .15s ease, transform .15s ease;
}
.wr-btn:hover, .button:hover, .single_add_to_cart_button:hover { background: var(--canopy-deep); transform: translateY(-1px); }
.wr-btn--ghost { background: transparent; color: var(--canopy) !important; box-shadow: inset 0 0 0 1.5px var(--canopy); }
.wr-btn--ghost:hover { background: #eef2ea; }
/* ==========================================================
VEIN TAXONOMY NAV — soft chips
========================================================== */
.vein-nav {
display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center;
padding: clamp(2rem, 5vw, 3.2rem) var(--gutter) 0;
max-width: 1180px; margin: 0 auto;
}
.vein-nav a {
display: block; padding: 1rem 1.6rem;
font-family: var(--display); font-weight: 560; font-size: 1.05rem;
text-decoration: none; color: var(--earth);
background: var(--card); border-radius: var(--radius);
box-shadow: var(--shadow);
border-top: 4px solid transparent;
transition: transform .15s ease;
}
.vein-nav a:hover { transform: translateY(-2px); }
.vein-nav a small { display: block; font-family: var(--body); font-weight: 400; font-size: .75rem; color: var(--stone); margin-top: .2rem; }
.vein-nav .vein-red { border-top-color: var(--vein-red); }
.vein-nav .vein-green { border-top-color: var(--vein-green); }
.vein-nav .vein-white { border-top-color: var(--vein-white); }
.vein-nav .vein-yellow { border-top-color: var(--vein-yellow); }
.vein-nav .vein-gold { border-top-color: var(--vein-gold); }
/* ==========================================================
PRODUCT CARDS — rounded, soft vein tag
========================================================== */
.wr-section { padding: clamp(2.5rem, 7vw, 5rem) 0; }
ul.products { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.6rem; }
ul.products li.product {
background: var(--card);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 1.2rem;
position: relative;
transition: transform .18s ease, box-shadow .18s ease;
}
ul.products li.product:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(67,48,42,.13); }
/* soft vein tag pill, top-left over the image */
li.product::before {
content: '';
position: absolute; top: 1.6rem; left: 1.6rem;
width: 12px; height: 12px; border-radius: 999px;
background: var(--stone);
box-shadow: 0 0 0 4px var(--card);
z-index: 2;
}
li.product.vein-red::before { background: var(--vein-red); }
li.product.vein-green::before { background: var(--vein-green); }
li.product.vein-white::before { background: var(--vein-white); }
li.product.vein-yellow::before { background: var(--vein-yellow); }
li.product.vein-gold::before { background: var(--vein-gold); }
li.product .woocommerce-loop-product__title {
font-family: var(--display); font-weight: 560;
font-size: 1.15rem; margin: .9rem 0 .2rem;
}
li.product .price { color: var(--earth-soft); font-weight: 600; }
li.product .wr-batch { color: var(--canopy); display: block; margin-top: .35rem; font-size: .8125rem; }
li.product .button { margin-top: 1rem; width: 100%; text-align: center; }
/* ==========================================================
SINGLE PRODUCT
========================================================== */
.single-product div.product .product_title { font-size: clamp(1.9rem, 4vw, 2.8rem); }
.single-product div.product .price { font-size: 1.25rem; }
.wr-coa-box {
background: #eef2ea; border: none;
border-radius: var(--radius); padding: 1.1rem 1.4rem; margin: 1.25rem 0;
font-size: .9375rem;
}
.wr-coa-box strong { color: var(--canopy); }
.wr-ingredients {
margin: 1.1rem 0; padding-top: 1rem; border-top: 1px solid #e6ded0;
font-size: .9375rem; line-height: 1.55;
}
.wr-ingredients strong { display: block; color: var(--earth); margin-bottom: .2rem;
font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; }
.wr-ingredients p { margin: 0; color: var(--earth-soft); }
/* ==========================================================
Cart & checkout: fill the standard site content width
(they were stuck in the narrow .entry-content measure).
Keep the normal .wrap gutters/margins as the rest of the site.
========================================================== */
body.woocommerce-cart .entry-content,
body.woocommerce-checkout .entry-content { max-width: none; }
.wr-card-logos { display: inline-flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.wr-card-logos svg { display: block; }
.wr-accepted-cards {
display: flex; align-items: center; justify-content: center; gap: .7rem;
flex-wrap: wrap; margin: 2rem auto 0; padding: 1.1rem; max-width: 1180px;
border-top: 1px solid #e6ded0;
}
.wr-accepted-cards__label { font-size: .85rem; color: var(--earth-soft); letter-spacing: .02em; }
/* ==========================================================
FOOTER — soft dark
========================================================== */
.site-footer { background: var(--earth); color: #d9cfc6; margin-top: 4rem; border-radius: var(--radius) var(--radius) 0 0; }
.site-footer .wrap { padding-top: 3rem; padding-bottom: 2rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2.5rem; }
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4 { color: #fff; font-size: 1.05rem; }
/* .site-footer prefix (0,2,0) keeps this ahead of WooCommerce `.woocommerce img{height:auto}` (0,1,1) on shop pages */
.site-footer .footer-logo { height: 34px; width: auto; display: block; margin: 0 0 .9rem; }
.site-footer a { color: #d9cfc6; }
.site-footer a:hover { color: var(--gold); }
.footer-disclaimer {
margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid #5a463d;
font-size: .75rem; line-height: 1.7; color: #a3968c;
}
/* ==========================================================
AGE GATE — soft card
========================================================== */
.wr-agegate {
position: fixed; inset: 0; z-index: 9999;
background: rgba(67, 48, 42, .55);
backdrop-filter: blur(6px);
display: flex; align-items: center; justify-content: center;
padding: var(--gutter);
}
.wr-agegate[hidden] { display: none; }
.wr-agegate__card {
background: var(--card); color: var(--earth);
max-width: 460px; width: 100%;
border-radius: 22px; box-shadow: 0 24px 60px rgba(0,0,0,.25);
padding: 2.5rem 2.25rem; text-align: center;
}
.wr-agegate__card h2 { font-size: 1.55rem; }
.wr-agegate__card p { font-size: .9375rem; color: var(--earth-soft); }
.wr-agegate__actions { display: flex; gap: .75rem; justify-content: center; margin-top: 1.4rem; flex-wrap: wrap; }
.wr-agegate__deny { background: transparent; color: var(--earth) !important; box-shadow: inset 0 0 0 1.5px var(--stone); }
body.wr-gate-locked { overflow: hidden; }
/* ==========================================================
CONTENT / BLOG
========================================================== */
.wr-prose { max-width: none; }
.wr-prose h2, .wr-prose h3 { margin-top: 2em; }
.entry-content { max-width: none; }
.woocommerce-message, .woocommerce-info {
border-top-color: var(--canopy); background: var(--card); color: var(--earth);
border-radius: var(--radius-sm);
}
.woocommerce-error { border-top-color: var(--vein-red); background: var(--card); border-radius: var(--radius-sm); }
/* ==========================================================
CATEGORY ARCHIVE HERO
========================================================== */
.wr-cat-hero {
background: var(--card);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: clamp(1.8rem, 5vw, 3rem);
margin-bottom: 2.2rem;
border-top: 6px solid var(--stone);
}
.wr-cat-hero.vein-red { border-top-color: var(--vein-red); }
.wr-cat-hero.vein-green { border-top-color: var(--vein-green); }
.wr-cat-hero.vein-white { border-top-color: var(--vein-white); }
.wr-cat-hero.vein-yellow { border-top-color: var(--vein-yellow); }
.wr-cat-hero.vein-gold { border-top-color: var(--vein-gold); }
.wr-cat-hero h1 { margin-bottom: .3em; }
.wr-cat-hero p { max-width: 60ch; color: var(--earth-soft); margin: 0; }
/* ==========================================================
SHOP BY FORM
========================================================== */
.wr-format-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.4rem;
}
.wr-format-grid a {
display: block; background: var(--card); border-radius: var(--radius);
box-shadow: var(--shadow); padding: 1.6rem 1.5rem; text-decoration: none;
transition: transform .15s ease;
}
.wr-format-grid a:hover { transform: translateY(-3px); }
.wr-format-grid h3 { margin-bottom: .25em; color: var(--canopy); }
.wr-format-grid p { margin: 0; color: var(--earth-soft); font-size: .9375rem; }
/* ==========================================================
VALUES
========================================================== */
.wr-values { background: var(--card); }
.wr-values-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 2rem;
}
.wr-values-grid h3 { font-size: 1.15rem; color: var(--earth); }
.wr-values-grid h3::before {
content: ''; display: block; width: 34px; height: 4px; border-radius: 999px;
background: var(--gold); margin-bottom: .7rem;
}
.wr-values-grid p { margin: 0; color: var(--earth-soft); font-size: .9375rem; }
/* ==========================================================
WOO ARCHIVE POLISH
========================================================== */
.woocommerce-breadcrumb { font-size: .8125rem; color: var(--stone); margin-bottom: 1.2rem; }
.woocommerce-breadcrumb a { color: var(--stone); }
.woocommerce-result-count { color: var(--earth-soft); font-size: .875rem; }
.woocommerce-ordering select {
font-family: var(--body); border: 1.5px solid #e5ddcd; border-radius: 999px;
padding: .45rem 1rem; background: var(--card); color: var(--earth);
}
.woocommerce-pagination ul { list-style: none; display: flex; gap: .4rem; justify-content: center; padding: 0; margin: 2.5rem 0 0; }
.woocommerce-pagination li a, .woocommerce-pagination li span {
display: inline-block; min-width: 2.4rem; text-align: center;
padding: .5rem .6rem; border-radius: 999px; text-decoration: none;
background: var(--card); color: var(--earth); box-shadow: var(--shadow);
}
.woocommerce-pagination li span.current { background: var(--canopy); color: #fff; }
.quantity .qty {
font-family: var(--body); border: 1.5px solid #e5ddcd; border-radius: 999px;
padding: .5rem .8rem; width: 4.5rem; text-align: center; background: var(--card);
}
/* ==========================================================
NAV DROPDOWN
========================================================== */
.site-nav li { position: relative; }
.site-nav ul ul.sub-menu {
position: absolute; top: calc(100% + .35rem); left: -1rem;
min-width: 210px; background: var(--card); border-radius: var(--radius);
box-shadow: 0 16px 40px rgba(67,48,42,.16);
padding: .7rem 0; margin: 0; display: none; flex-direction: column; gap: 0;
z-index: 50;
}
/* invisible hover-bridge so the cursor can travel from the link to the
dropdown without the gap breaking :hover */
.site-nav ul ul.sub-menu::before {
content: ''; position: absolute; left: 0; right: 0; top: -.5rem; height: .5rem;
}
.site-nav li:hover > .sub-menu,
.site-nav li:focus-within > .sub-menu { display: flex; }
.site-nav .sub-menu li { width: 100%; }
.site-nav .sub-menu a {
display: block; padding: .45rem 1.2rem; font-size: .9rem; color: var(--earth);
}
.site-nav .sub-menu a:hover { background: #f3eee3; color: var(--canopy); }
.site-nav .sub-label {
padding: .55rem 1.2rem .2rem; font-size: .6875rem; font-weight: 600;
letter-spacing: .12em; text-transform: uppercase; color: var(--gold);
}
.site-nav .has-sub > a::after,
.site-nav .menu-item-has-children > a::after { content: ' ▾'; font-size: .7em; color: var(--stone); }
/* Shop mega menu: two columns (Shop by Vein | Shop by Brand) */
.site-nav li.wr-mega > .sub-menu {
flex-direction: row; gap: 0 2.4rem;
padding: 1.1rem 1.5rem 1.25rem; left: -1rem;
}
.site-nav li.wr-mega > .sub-menu > li { width: auto; min-width: 140px; }
/* column heading = the group's parent link, styled as a label */
.site-nav li.wr-mega > .sub-menu > li > a {
padding: .1rem 0 .5rem; margin-bottom: .4rem;
font-size: .6875rem; font-weight: 600; letter-spacing: .12em;
text-transform: uppercase; color: var(--gold);
border-bottom: 1px solid #eadfce; cursor: default;
}
.site-nav li.wr-mega > .sub-menu > li > a:hover { background: none; color: var(--gold); }
.site-nav li.wr-mega > .sub-menu > li > a::after { content: none; }
/* nested column list: static and always shown while the panel is open */
.site-nav li.wr-mega > .sub-menu .sub-menu {
position: static; display: flex; min-width: 0;
background: none; box-shadow: none; border-radius: 0; padding: 0;
}
.site-nav li.wr-mega > .sub-menu .sub-menu::before { content: none; }
.site-nav li.wr-mega > .sub-menu .sub-menu a { padding: .35rem 0; white-space: nowrap; }
.site-nav li.wr-mega > .sub-menu .sub-menu a:hover { background: none; color: var(--canopy); }
/* small vein swatch before each vein link */
.site-nav li.wr-mega .sub-menu a[class*="vein-"]::before,
.site-nav li.wr-mega .sub-menu .vein-red > a::before,
.site-nav li.wr-mega .sub-menu .vein-green > a::before,
.site-nav li.wr-mega .sub-menu .vein-white > a::before,
.site-nav li.wr-mega .sub-menu .vein-yellow > a::before,
.site-nav li.wr-mega .sub-menu .vein-gold > a::before {
content: ''; display: inline-block; width: .55rem; height: .55rem;
border-radius: 50%; margin-right: .5rem; vertical-align: middle;
box-shadow: inset 0 0 0 1px rgba(67,48,42,.15);
}
.site-nav li.wr-mega .sub-menu .vein-red > a::before { background: var(--vein-red); }
.site-nav li.wr-mega .sub-menu .vein-green > a::before { background: var(--vein-green); }
.site-nav li.wr-mega .sub-menu .vein-white > a::before { background: var(--vein-white); }
.site-nav li.wr-mega .sub-menu .vein-yellow > a::before { background: var(--vein-yellow); }
.site-nav li.wr-mega .sub-menu .vein-gold > a::before { background: var(--vein-gold); }
/* ==========================================================
IMAGE PLACEHOLDERS
Swap each .wr-ph for an ![]()
when photography is ready.
========================================================== */
.wr-ph {
position: relative; overflow: hidden;
background:
radial-gradient(120% 90% at 20% 15%, #f4edde 0%, transparent 55%),
linear-gradient(155deg, #ece3cf 0%, #dfd3b6 60%, #d5c7a6 100%);
border-radius: var(--radius);
display: flex; align-items: center; justify-content: center;
}
.wr-ph::before {
/* soft leaf silhouette */
content: '';
position: absolute; width: 46%; aspect-ratio: 1/1.6;
background: var(--stone); opacity: .18;
border-radius: 100% 0;
transform: rotate(35deg);
}
.wr-ph span {
position: relative; z-index: 1;
font-size: .8125rem; font-weight: 600; letter-spacing: .08em;
text-transform: uppercase; color: #9a8f7e;
background: rgba(255,253,249,.75); border-radius: 999px; padding: .35rem .9rem;
}
.wr-ph--hero { aspect-ratio: 4/3.4; box-shadow: var(--shadow); }
.wr-ph--tall { aspect-ratio: 4/3; align-self: stretch; }
.wr-ph--card { aspect-ratio: 16/9; margin-bottom: 1rem; border-radius: var(--radius-sm); }
.wr-ph--card span { font-size: .6875rem; padding: .25rem .7rem; }
.wr-ph--icon {
width: 56px; height: 56px; border-radius: 999px; margin-bottom: .8rem;
}
.wr-ph--icon::before { width: 40%; }
/* ==========================================================
LAYOUT GRIDS FOR IMAGE SECTIONS
========================================================== */
.wr-hero-grid {
display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2rem, 5vw, 4rem);
align-items: center;
}
.wr-split {
display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(2rem, 5vw, 4rem);
align-items: center;
}
@media (max-width: 860px) {
.wr-hero-grid, .wr-split { grid-template-columns: 1fr; }
.wr-ph--hero { order: -1; }
}
/* ==========================================================
PAGE TITLE BANNER
Uses the featured image when set; otherwise the branded
parchment placeholder with leaf silhouette.
========================================================== */
.wr-page-banner {
position: relative; overflow: hidden;
min-height: clamp(200px, 28vw, 320px);
display: flex; align-items: flex-end;
padding: clamp(2rem, 5vw, 3.5rem) 0;
background:
radial-gradient(120% 90% at 20% 15%, #f4edde 0%, transparent 55%),
linear-gradient(155deg, #ece3cf 0%, #dfd3b6 60%, #d0c19c 100%);
background-size: cover; background-position: center;
}
.wr-page-banner::before {
content: '';
position: absolute; right: 8%; top: -12%;
width: min(300px, 32vw); aspect-ratio: 1/1.6;
background: var(--stone); opacity: .16;
border-radius: 100% 0;
transform: rotate(35deg);
pointer-events: none;
}
.wr-page-banner .wrap { position: relative; z-index: 1; width: 100%; }
.wr-page-banner h1 { margin: 0; max-width: 20ch; }
.wr-page-banner .wr-eyebrow { margin-bottom: .5rem; }
/* Featured-image variant: photo background + legibility scrim */
.wr-page-banner.has-photo::before { display: none; }
.wr-page-banner.has-photo::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(36,26,20,.05) 30%, rgba(36,26,20,.55) 100%);
}
.wr-page-banner.has-photo .wrap { z-index: 1; }
.wr-page-banner.has-photo h1 { color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.wr-page-banner.has-photo .wr-eyebrow { color: var(--gold-soft); }
/* ==========================================================
HERO SLIDER
========================================================== */
.wr-slider { display: grid; }
.wr-slider .wr-slide {
grid-area: 1 / 1;
opacity: 0; visibility: hidden;
transition: opacity .6s ease, visibility .6s ease;
}
.wr-slider .wr-slide.is-active { opacity: 1; visibility: visible; }
.wr-slide .wr-slide-title {
font-size: clamp(2.3rem, 5.5vw, 4rem);
line-height: 1.12; margin: 0 0 .5em;
}
.wr-slider-nav {
grid-area: 1 / 1; align-self: end; justify-self: center;
display: flex; gap: .55rem; padding-bottom: 1.4rem; z-index: 2;
}
.wr-slider-nav button {
width: 10px; height: 10px; border-radius: 999px; border: none;
background: var(--stone); opacity: .5; cursor: pointer; padding: 0;
transition: opacity .2s ease, transform .2s ease;
}
.wr-slider-nav button.is-active { background: var(--canopy); opacity: 1; transform: scale(1.25); }
@media (prefers-reduced-motion: reduce) {
.wr-slider .wr-slide { transition: none; }
}
/* ==========================================================
FIVE WORLDS — full-bleed vein bands
========================================================== */
:root {
--world-red: #5e241b; --world-red-ink: #f3e2d8;
--world-green: #2b4530; --world-green-ink: #dce8d6;
--world-white: #eae3d3; --world-white-ink: #43302a;
--world-yellow: #94701a; --world-yellow-ink: #f7ecce;
--world-gold: #6e5410; --world-gold-ink: #efdfae;
}
.wr-worlds { display: flex; flex-direction: column; }
.wr-world {
position: relative; display: flex; align-items: center; gap: 1.5rem;
min-height: clamp(110px, 17vh, 180px);
padding-block: 1.2rem;
padding-inline: max(var(--gutter), calc((100% - 1180px) / 2));
text-decoration: none; overflow: hidden;
transition: min-height .35s ease;
}
.wr-world:hover, .wr-world:focus-visible { min-height: clamp(160px, 25vh, 250px); }
.wr-world__name {
margin: 0;
font-family: var(--display); font-weight: 600;
font-size: clamp(2.6rem, 7.5vw, 5.5rem);
line-height: .95; letter-spacing: -0.02em;
transition: transform .35s ease;
}
.wr-world:hover .wr-world__name { transform: translateX(.35em); }
.wr-world__name em { font-style: italic; font-weight: 480; opacity: .85; }
.wr-world__meta {
margin-left: auto; text-align: right;
font-size: .9375rem; opacity: .8; max-width: 14rem;
}
.wr-world__arrow {
font-size: clamp(1.6rem, 3vw, 2.4rem);
opacity: 0; transform: translateX(-10px);
transition: opacity .3s ease, transform .3s ease;
}
.wr-world:hover .wr-world__arrow, .wr-world:focus-visible .wr-world__arrow { opacity: 1; transform: none; }
.wr-world::after {
content: '';
position: absolute; right: -4%; top: -30%;
width: clamp(160px, 22vw, 300px); aspect-ratio: 1/1.6;
border-radius: 100% 0;
transform: rotate(35deg);
opacity: .12; background: currentColor;
pointer-events: none;
}
.wr-world--red { background: var(--world-red); color: var(--world-red-ink); }
.wr-world--green { background: var(--world-green); color: var(--world-green-ink); }
.wr-world--white { background: var(--world-white); color: var(--world-white-ink); }
.wr-world--yellow { background: var(--world-yellow); color: var(--world-yellow-ink); }
.wr-world--gold { background: var(--world-gold); color: var(--world-gold-ink); }
@media (prefers-reduced-motion: reduce) {
.wr-world, .wr-world__name, .wr-world__arrow { transition: none; }
}
@media (max-width: 640px) {
.wr-world { flex-wrap: wrap; }
.wr-world__meta { margin-left: 0; text-align: left; }
}
/* ==========================================================
WORLD-IMMERSED CATEGORY PAGES
========================================================== */
body.wr-world-page--red { background: var(--world-red); color: var(--world-red-ink); }
body.wr-world-page--green { background: var(--world-green); color: var(--world-green-ink); }
body.wr-world-page--white { background: var(--world-white); color: var(--world-white-ink); }
body.wr-world-page--yellow { background: var(--world-yellow); color: var(--world-yellow-ink); }
body.wr-world-page--gold { background: var(--world-gold); color: var(--world-gold-ink); }
body.wr-world-page .wr-cat-hero {
background: transparent; box-shadow: none; border-top: none;
padding-left: 0; padding-right: 0;
}
body.wr-world-page .wr-cat-hero h1 {
color: inherit;
font-size: clamp(3rem, 9vw, 6.5rem);
line-height: .95; letter-spacing: -0.02em;
}
body.wr-world-page .wr-cat-hero p { color: inherit; opacity: .82; }
body.wr-world-page .wr-cat-hero .wr-eyebrow { color: inherit; opacity: .65; }
body.wr-world-page .woocommerce-breadcrumb,
body.wr-world-page .woocommerce-breadcrumb a,
body.wr-world-page .woocommerce-result-count { color: inherit; opacity: .7; }
body.wr-world-page ul.products li.product { box-shadow: 0 10px 34px rgba(0,0,0,.22); }
body.wr-world-page .woocommerce-pagination li a,
body.wr-world-page .woocommerce-pagination li span {
background: rgba(255,255,255,.12); color: inherit; box-shadow: none;
}
body.wr-world-page--white .woocommerce-pagination li a,
body.wr-world-page--white .woocommerce-pagination li span { background: rgba(0,0,0,.08); }
/* Category pages: our hero replaces the default Woo title */
body.tax-product_cat h1.page-title { display: none; }
/* Five Worlds refinements: readable names + vein descriptions */
.wr-world__name { color: inherit; }
.wr-world__text { max-width: 52ch; }
.wr-world__desc {
margin: .45rem 0 0; font-size: .9375rem; line-height: 1.5;
color: inherit; opacity: .78; max-width: 44ch;
}
/* ==========================================================
OUR QUALITY — designed page components
========================================================== */
.entry-content:has(.wr-quality) { max-width: none; }
.page-id-16 .entry-content { max-width: none; }
.wr-quality section { padding: clamp(2.2rem, 6vw, 4.5rem) 0; border-bottom: 1px solid rgba(67,48,42,.08); }
.wr-quality section:last-child { border-bottom: none; }
.wr-q-lede {
font-family: var(--display); font-size: clamp(1.35rem, 2.6vw, 1.9rem);
line-height: 1.4; max-width: 30ch; margin: 0 0 1rem;
}
.wr-q-lede em { color: var(--canopy); }
.wr-q-sub { max-width: 58ch; color: var(--earth-soft); }
.wr-q-steps { list-style: none; margin: 2.5rem 0 0; padding: 0; position: relative; }
.wr-q-steps::before {
content: ''; position: absolute; left: clamp(28px, 4vw, 44px); top: 0; bottom: 0;
width: 2px; background: linear-gradient(180deg, var(--vein-red), var(--vein-green), var(--vein-white), var(--vein-yellow), var(--vein-gold));
opacity: .5;
}
.wr-q-steps li {
position: relative;
display: grid; grid-template-columns: clamp(56px, 8vw, 88px) 1fr;
gap: clamp(1rem, 3vw, 2.2rem);
padding: 1.6rem 0; max-width: 780px;
}
.wr-q-num {
font-family: var(--display); font-style: italic; font-weight: 480;
font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1;
color: var(--gold); background: var(--cream);
align-self: start; text-align: center; padding: .2rem 0;
position: relative; z-index: 1;
}
.wr-q-steps h3 { margin: .2rem 0 .4rem; font-size: 1.35rem; }
.wr-q-steps p { margin: 0; color: var(--earth-soft); max-width: 56ch; }
.wr-q-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.4rem; margin-top: 2rem; }
.wr-q-panel {
background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
padding: 1.6rem 1.5rem; border-top: 5px solid var(--stone);
}
.wr-q-panel--identity { border-top-color: var(--vein-green); }
.wr-q-panel--metals { border-top-color: var(--vein-red); }
.wr-q-panel--micro { border-top-color: var(--vein-yellow); }
.wr-q-panel h3 { font-size: 1.2rem; margin-bottom: .4rem; }
.wr-q-panel p { margin: 0; color: var(--earth-soft); font-size: .95rem; }
.wr-q-lot {
display: inline-block; margin: 2rem 0 1.2rem;
font-family: var(--display); font-weight: 600;
font-size: clamp(2.2rem, 7vw, 4.5rem); letter-spacing: .04em;
color: var(--earth);
border: 2px dashed var(--gold); border-radius: var(--radius);
padding: .5em .8em; background: var(--card);
}
.wr-q-lot .y { color: var(--canopy); }
.wr-q-lot .r { color: var(--vein-red); }
.wr-q-legend { display: flex; gap: 2.5rem; flex-wrap: wrap; margin: 0 0 1.2rem; padding: 0; list-style: none; }
.wr-q-legend li { font-size: .9375rem; color: var(--earth-soft); max-width: 22ch; }
.wr-q-legend b { display: block; font-family: var(--display); font-size: 1.05rem; margin-bottom: .15rem; }
.wr-q-legend .y b { color: var(--canopy); }
.wr-q-legend .r b { color: var(--vein-red); }
.wr-q-always { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 2rem; margin-top: 2rem; }
.wr-q-always h3 { font-size: 1.15rem; }
.wr-q-always h3::before {
content: ''; display: block; width: 34px; height: 4px; border-radius: 999px;
background: var(--gold); margin-bottom: .7rem;
}
.wr-q-always p { margin: 0; color: var(--earth-soft); font-size: .95rem; }
.wr-q-quote {
font-family: var(--display); font-style: italic; font-weight: 480;
font-size: clamp(1.5rem, 3.4vw, 2.4rem); line-height: 1.3;
color: var(--canopy); max-width: 26ch; margin: 0;
}
.wr-q-quote::before { content: '\201C'; color: var(--gold); }
.wr-q-quote::after { content: '\201D'; color: var(--gold); }
.wr-q-coa {
background: #eef2ea; border-radius: var(--radius);
padding: 1.6rem 1.8rem; max-width: none;
}
.wr-q-coa p { margin: 0; color: var(--earth-soft); }
/* ==========================================================
OUR QUALITY — full-width split layouts
========================================================== */
.wr-q-split {
display: grid; grid-template-columns: 1.05fr 1fr;
gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.wr-q-split .wr-ph { aspect-ratio: 4/3; margin-top: 0 !important; }
@media (max-width: 860px) { .wr-q-split { grid-template-columns: 1fr; } }
@media (min-width: 900px) {
.wr-q-steps::before { left: 50%; }
.wr-q-steps li {
width: 50%; max-width: none;
padding-right: clamp(2rem, 4vw, 3.5rem);
}
.wr-q-steps li:nth-child(even) {
margin-left: 50%;
padding-right: 0;
padding-left: clamp(2rem, 4vw, 3.5rem);
}
}
.wr-q-quote { margin: 0 auto; text-align: center; }
.wr-q-quote + .wr-q-sub { text-align: center; margin-left: auto; margin-right: auto; }
.wr-quality section:has(.wr-q-coa) { text-align: center; }
.wr-q-coa { margin: 0 auto; }
/* Footer: four columns + link lists */
.footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: .45rem; }
/* ==========================================================
CONTACT FORM (Contact Form 7)
========================================================== */
.wr-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
@media (max-width: 700px) { .wr-form-grid { grid-template-columns: 1fr; } }
.wpcf7 label { font-weight: 600; font-size: .9375rem; }
.wpcf7 input[type="text"], .wpcf7 input[type="email"],
.wpcf7 select, .wpcf7 textarea {
width: 100%; margin-top: .4rem;
font-family: var(--body); font-size: 1rem; color: var(--earth);
background: var(--card); border: 1.5px solid #e5ddcd; border-radius: var(--radius-sm);
padding: .8rem 1rem;
transition: border-color .15s ease;
}
.wpcf7 input:focus, .wpcf7 select:focus, .wpcf7 textarea:focus {
outline: none; border-color: var(--canopy);
}
.wpcf7 textarea { min-height: 160px; resize: vertical; }
.wpcf7 input[type="submit"] {
font-family: var(--body); font-size: .9375rem; font-weight: 600;
background: var(--canopy); color: #fff; border: none; border-radius: 999px;
padding: .85rem 2.2rem; cursor: pointer;
transition: background .15s ease, transform .15s ease;
}
.wpcf7 input[type="submit"]:hover { background: var(--canopy-deep); transform: translateY(-1px); }
.wpcf7 form .wpcf7-response-output {
border-radius: var(--radius-sm); border-color: var(--gold);
padding: .8rem 1.2rem; margin: 1.2rem 0 0;
}
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--vein-green); background: #eef2ea; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { border-color: var(--vein-red); }
.wpcf7-not-valid-tip { color: var(--vein-red); font-size: .8125rem; margin-top: .3rem; }
.wr-q-form { max-width: none; }
/* ==========================================================
HOMEPAGE: commerce copy, FAQ, email band
========================================================== */
.wr-commerce-cols {
display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem);
max-width: none;
}
@media (max-width: 800px) { .wr-commerce-cols { grid-template-columns: 1fr; } }
.wr-commerce-cols p { margin: 0; color: var(--earth-soft); }
.wr-faq { max-width: none; margin-top: 1.5rem; }
.wr-faq-item {
background: var(--card); border-radius: var(--radius);
box-shadow: var(--shadow); margin-bottom: .8rem;
padding: 0; overflow: hidden;
}
.wr-faq-item summary {
cursor: pointer; list-style: none;
font-family: var(--display); font-weight: 560; font-size: 1.1rem;
padding: 1.1rem 1.4rem; position: relative;
}
.wr-faq-item summary::-webkit-details-marker { display: none; }
.wr-faq-item summary::after {
content: '+'; position: absolute; right: 1.3rem; top: 50%;
transform: translateY(-50%);
font-family: var(--body); font-weight: 400; font-size: 1.4rem; color: var(--gold);
transition: transform .2s ease;
}
.wr-faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.wr-faq-item p { margin: 0; padding: 0 1.4rem 1.2rem; color: var(--earth-soft); }
.wr-email-band {
background: var(--canopy); color: #eef2ea;
padding: clamp(2.5rem, 7vw, 4.5rem) 0;
}
.wr-email-band h2 { color: #fff; margin-bottom: .3em; }
.wr-email-band p { color: #cfdcc9; max-width: 50ch; }
.wr-news-row { display: flex; gap: .8rem; flex-wrap: wrap; max-width: 520px; }
.wr-news-row .wpcf7-form-control-wrap { flex: 1 1 280px; }
.wr-email-band .wpcf7 input[type="email"] {
width: 100%; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25);
color: #fff;
}
.wr-email-band .wpcf7 input[type="email"]::placeholder { color: #b9c9b3; }
.wr-email-band .wpcf7 input[type="email"]:focus { border-color: var(--gold); }
.wr-email-band .wpcf7 input[type="submit"] { background: var(--gold); color: var(--earth); }
.wr-email-band .wpcf7 input[type="submit"]:hover { background: #d4b45e; }
/* ==========================================================
HOMEPAGE SECTION VISUALS
========================================================== */
.wr-home-split {
display: grid; grid-template-columns: 1.15fr .85fr;
gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.wr-home-split--top { align-items: start; }
@media (max-width: 900px) { .wr-home-split { grid-template-columns: 1fr; } }
.wr-home-split .wr-commerce-cols { grid-template-columns: 1fr; max-width: none; }
.wr-leaf-scene { position: relative; min-height: 340px; align-self: stretch; }
.wr-leaf-scene i {
position: absolute; display: block;
border-radius: 100% 0;
animation: wr-drift 9s ease-in-out infinite;
}
.wr-leaf-scene .l1 {
width: 42%; aspect-ratio: 1/1.6; left: 6%; top: 8%;
background: var(--vein-green); opacity: .28;
}
.wr-leaf-scene .l2 {
width: 30%; aspect-ratio: 1/1.6; right: 12%; top: 34%;
background: var(--vein-red); opacity: .22;
animation-delay: -3s; animation-duration: 11s;
}
.wr-leaf-scene .l3 {
width: 22%; aspect-ratio: 1/1.6; left: 34%; bottom: 4%;
background: var(--gold); opacity: .3;
animation-delay: -6s; animation-duration: 13s;
}
@keyframes wr-drift {
0%, 100% { transform: rotate(35deg) translateY(0); }
50% { transform: rotate(30deg) translateY(-16px); }
}
.wr-vein-ring {
justify-self: center;
width: min(260px, 70%); aspect-ratio: 1;
border-radius: 50%;
background: conic-gradient(
var(--vein-red), var(--vein-yellow), var(--vein-white),
var(--vein-green), var(--vein-gold), var(--vein-red)
);
-webkit-mask: radial-gradient(farthest-side, transparent 62%, #000 63%);
mask: radial-gradient(farthest-side, transparent 62%, #000 63%);
animation: wr-spin 26s linear infinite;
opacity: .85;
}
@keyframes wr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.wr-leaf-scene i, .wr-vein-ring { animation: none; }
}
@media (max-width: 900px) {
.wr-leaf-scene { min-height: 220px; }
.wr-vein-ring { margin-top: 1rem; }
}
/* ==========================================================
LEAF ILLUSTRATION — vein draw-in
========================================================== */
.wr-leaf-art { display: flex; justify-content: center; align-self: stretch; align-items: center; }
.wr-leaf-svg { width: min(340px, 80%); height: auto; }
.wr-leaf-svg path { fill: none; stroke-linecap: round; }
.wr-leaf-svg .wr-leaf-outline,
.wr-leaf-svg .wr-leaf-midrib,
.wr-leaf-svg .wr-leaf-vein {
stroke-dasharray: 1;
stroke-dashoffset: 1;
animation: wr-draw 1.4s ease-out forwards;
}
.wr-leaf-svg .wr-leaf-outline { animation-duration: 2s; }
.wr-leaf-svg .wr-leaf-midrib { animation-delay: .7s; }
@keyframes wr-draw { to { stroke-dashoffset: 0; } }
.wr-leaf-svg--gold path { animation: none; stroke-dashoffset: 0; opacity: .9; }
.wr-leaf-art--band .wr-leaf-svg { width: min(260px, 65%); }
@media (prefers-reduced-motion: reduce) {
.wr-leaf-svg path { animation: none; stroke-dashoffset: 0; }
}
/* Gold leaf: fully static (specificity fix) */
.wr-leaf-svg--gold .wr-leaf-outline,
.wr-leaf-svg--gold .wr-leaf-midrib,
.wr-leaf-svg--gold .wr-leaf-vein { animation: none; stroke-dashoffset: 0; }
/* ==========================================================
LEAF: scroll-triggered slow sketch (overrides load-draw)
========================================================== */
.wr-leaf-svg .wr-leaf-outline,
.wr-leaf-svg .wr-leaf-midrib,
.wr-leaf-svg .wr-leaf-vein {
animation: none;
stroke-dashoffset: 1;
}
.wr-leaf-svg.is-drawing .wr-leaf-outline { animation: wr-draw 3.2s ease-out forwards; }
.wr-leaf-svg.is-drawing .wr-leaf-midrib { animation: wr-draw 2.4s ease-out forwards; animation-delay: 1.1s; }
.wr-leaf-svg.is-drawing .wr-leaf-vein { animation: wr-draw 2.2s ease-out forwards; }
.wr-ph--band { aspect-ratio: 4/3; opacity: .92; }
@media (prefers-reduced-motion: reduce) {
.wr-leaf-svg path, .wr-leaf-svg.is-drawing path { animation: none !important; stroke-dashoffset: 0; }
}
/* Branch illustration sizing */
.wr-leaf-svg { width: min(420px, 92%); }
/* Email band: breathing room between input and button */
.wr-news-row { gap: 1rem; }
.wr-email-band .wpcf7 input[type="submit"] { margin-top: .5rem; }
/* Overflow fix: placeholders never exceed their grid track */
.wr-ph { max-width: 100%; }
.wr-home-split .wr-ph--tall,
.wr-split .wr-ph--tall {
align-self: center; width: 100%; height: auto;
}
/* ==========================================================
REAL IMAGES (replacing placeholders)
========================================================== */
.wr-img {
display: block; width: 100%; height: auto;
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.wr-img--card { aspect-ratio: 16/9; object-fit: cover; }
.wr-img--tall { aspect-ratio: 4/3; object-fit: cover; }
.wr-img--hero { aspect-ratio: 5/4; object-fit: cover; }
.wr-img--icon {
width: 72px; height: 72px; border-radius: 50%;
object-fit: cover; box-shadow: none;
margin-bottom: .9rem;
}
.wr-home-split .wr-img--tall { align-self: center; }
/* Format cards: tighter rhythm between image and text */
.wr-format-grid .wr-img--card { margin-bottom: 1rem; }
.wr-format-grid h3 { margin: 0 0 .3rem; }
.wr-format-grid p { margin: 0; line-height: 1.5; }
/* Footer links: no underlines (hover only) */
.footer-links a { text-decoration: none; }
.footer-links a:hover, .footer-links a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
/* ==========================================================
WOOCOMMERCE OVERRIDES — win specificity vs WC core styles
========================================================== */
.woocommerce ul.products,
.woocommerce-page ul.products {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 1.5rem;
margin: 2rem 0 0;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
float: none; width: 100%; margin: 0;
background: var(--card); border-radius: var(--radius);
box-shadow: var(--shadow); padding: 1.1rem;
display: flex; flex-direction: column;
transition: transform .18s ease, box-shadow .18s ease;
}
.woocommerce ul.products li.product:hover { transform: translateY(-3px); }
.woocommerce ul.products li.product a img {
width: 100%; aspect-ratio: 1/1; object-fit: cover;
border-radius: var(--radius-sm); margin: 0 0 .9rem;
box-shadow: none;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-family: var(--display); font-size: 1.1rem; line-height: 1.25;
padding: 0; color: var(--earth);
}
.woocommerce ul.products li.product .price {
color: var(--earth); font-weight: 600; font-size: 1rem; margin: .35rem 0 0;
}
.woocommerce ul.products li.product .wr-batch { margin-top: .25rem; }
.woocommerce ul.products li.product .button,
.woocommerce a.button, .woocommerce button.button {
background: var(--canopy); color: #fff;
border-radius: 999px; padding: .7rem 1.5rem;
font-weight: 600; font-size: .9rem;
margin-top: auto; text-align: center;
transition: background .15s ease;
}
.woocommerce ul.products li.product .button { margin-top: .9rem; }
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce ul.products li.product .button:hover { background: var(--canopy-deep); color: #fff; }
/* ==========================================================
SINGLE PRODUCT PAGE
========================================================== */
.woocommerce div.product {
display: grid; grid-template-columns: 1fr 1fr;
gap: clamp(2rem, 5vw, 4rem); align-items: start;
max-width: var(--wrap); margin: 0 auto;
padding: clamp(1.5rem, 4vw, 3rem) var(--gutter) clamp(2rem, 5vw, 4rem);
}
.woocommerce div.product div.images,
.woocommerce div.product div.summary { float: none; width: 100%; margin: 0; }
.woocommerce div.product div.images img { border-radius: var(--radius); box-shadow: var(--shadow); }
.woocommerce div.product .product_title {
font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1.1; margin-bottom: .3em;
}
.woocommerce div.product p.price {
font-size: 1.5rem; color: var(--canopy); font-weight: 600; margin-bottom: 1rem;
}
.woocommerce div.product .woocommerce-product-details__short-description {
color: var(--earth-soft); margin-bottom: 1.2rem;
}
.woocommerce div.product form.cart { display: flex; gap: .8rem; align-items: center; margin: 1.2rem 0; }
.woocommerce div.product form.cart .quantity .qty {
border: 1.5px solid #e5ddcd; border-radius: var(--radius-sm);
padding: .7rem .4rem; width: 4.2rem; text-align: center;
font-family: var(--body); font-size: 1rem; background: var(--card);
}
.woocommerce div.product form.cart .button { margin-top: 0; padding: .85rem 2rem; }
.woocommerce div.product .product_meta {
font-size: .875rem; color: var(--stone-dark, #8a847c);
border-top: 1px solid rgba(67,48,42,.1); padding-top: 1rem; margin-top: 1.2rem;
}
.woocommerce div.product .product_meta a { color: var(--canopy); }
.woocommerce div.product .woocommerce-tabs { grid-column: 1 / -1; margin-top: 1rem; }
.woocommerce div.product .woocommerce-tabs ul.tabs {
padding: 0; margin: 0 0 1.4rem; border-bottom: 1px solid rgba(67,48,42,.12);
display: flex; gap: 1.6rem;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
background: none; border: none; border-radius: 0; padding: 0; margin: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
padding: .6rem 0; font-weight: 600; color: var(--earth-soft);
border-bottom: 3px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
color: var(--earth); border-bottom-color: var(--gold);
}
.woocommerce div.product .woocommerce-Tabs-panel { max-width: none; width: 100%; }
.woocommerce div.product .wr-coa-embed {
grid-column: 1 / -1; width: 100%; min-width: 0;
}
.woocommerce div.product .woocommerce-Tabs-panel > h2:first-of-type { display: none; }
.woocommerce div.product .wr-product-glance {
list-style: none; margin: 1.4rem 0 0; padding: 1.2rem 1.4rem;
background: var(--card); border-radius: var(--radius);
border-left: 4px solid var(--gold);
}
.woocommerce div.product .wr-product-glance li { margin-bottom: .35rem; font-size: .9375rem; }
.woocommerce div.product .wr-product-glance b { color: var(--earth); }
@media (max-width: 820px) {
.woocommerce div.product { grid-template-columns: 1fr; }
}
/* Specificity boosts: WC .alt buttons + tab chrome */
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt,
body .woocommerce div.product form.cart .button {
background: var(--canopy); color: #fff;
}
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover,
body .woocommerce div.product form.cart .button:hover { background: var(--canopy-deep); color: #fff; }
body .woocommerce div.product .woocommerce-tabs ul.tabs li {
background: none; border: none; border-radius: 0; padding: 0; margin: 0; box-shadow: none;
}
body .woocommerce div.product .woocommerce-tabs ul.tabs { background: none; border-bottom: 1px solid rgba(67,48,42,.12); }
body .woocommerce div.product .woocommerce-tabs ul.tabs::before { border: none; }
body .woocommerce div.product .woocommerce-tabs ul.tabs li.active,
body .woocommerce div.product .woocommerce-tabs ul.tabs li:hover { background: none; }
/* Final word on WC tab chrome */
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active,
.woocommerce div.product .woocommerce-tabs ul.tabs li:hover {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* Product page depth: trust strip, ship note, description sections */
.wr-trust-strip {
list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem;
margin: 1.2rem 0 .4rem; padding: 1rem 0 0;
border-top: 1px solid rgba(67,48,42,.1);
}
.wr-trust-strip li {
font-size: .85rem; font-weight: 600; color: var(--earth-soft);
display: flex; align-items: center; gap: .45rem;
}
.wr-trust-strip li::before {
content: ''; width: 8px; height: 8px; border-radius: 100% 0;
background: var(--gold); transform: rotate(35deg); flex: none;
}
.wr-ship-note { font-size: .85rem; color: var(--earth-soft); margin: .4rem 0 0; }
.wr-ship-note a { color: var(--canopy); font-weight: 600; }
.woocommerce div.product .woocommerce-Tabs-panel h2 {
font-size: 1.35rem; margin: 1.8rem 0 .5rem; padding-top: 1.2rem;
border-top: 1px solid rgba(67,48,42,.08);
}
.woocommerce div.product .woocommerce-Tabs-panel h2 + p { margin-top: 0; }
.woocommerce div.product .related.products { grid-column: 1 / -1; margin-top: 2rem; }
.woocommerce div.product .related.products > h2 {
font-size: 1.6rem; border: none; padding: 0;
}
/* ==========================================================
PRODUCT DESCRIPTION COMPONENTS
========================================================== */
.wr-pd-quote {
font-family: var(--display); font-size: 1.35rem; font-weight: 560;
color: var(--canopy); border-left: 4px solid var(--gold);
padding: .25rem 0 .25rem 1.1rem; margin: 1.3rem 0;
}
.wr-pd-links { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.2rem 0 .4rem; padding: 0; list-style: none; }
.wr-pd-links a {
display: inline-block; padding: .45rem 1.05rem;
border: 1.5px solid rgba(67,48,42,.18); border-radius: 999px;
font-size: .85rem; font-weight: 600; color: var(--earth);
background: var(--card); text-decoration: none;
transition: border-color .15s ease, color .15s ease;
}
.wr-pd-links a:hover { border-color: var(--gold); color: var(--canopy); }
.wr-pd-journey { list-style: none; margin: 1rem 0 0; padding: 0; position: relative; }
.wr-pd-journey::before {
content: ''; position: absolute; left: 9px; top: 8px; bottom: 8px; width: 2px;
background: linear-gradient(var(--gold), rgba(194,161,77,.12));
}
.wr-pd-journey li { position: relative; padding: 0 0 1.15rem 2.1rem; }
.wr-pd-journey li::before {
content: ''; position: absolute; left: 3px; top: 4px;
width: 14px; height: 14px; border-radius: 100% 0;
transform: rotate(35deg); background: var(--gold);
}
.wr-pd-journey b { display: block; font-family: var(--display); font-size: 1.02rem; }
.wr-pd-senses {
display: flex; gap: 1.3rem; align-items: center;
background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
padding: 1.2rem 1.4rem; margin: 1rem 0;
}
.wr-pd-swatch {
width: 64px; height: 64px; border-radius: 100% 0; transform: rotate(35deg);
flex: none; box-shadow: inset 0 0 0 4px rgba(255,255,255,.3);
}
.wr-pd-senses dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .3rem .9rem; font-size: .95rem; }
.wr-pd-senses dt { font-weight: 700; color: var(--earth); }
.wr-pd-senses dd { margin: 0; color: var(--earth-soft); }
.wr-pd-tests {
display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: .8rem; margin: 1rem 0; padding: 0; list-style: none;
}
.wr-pd-tests li {
background: var(--card); border-radius: var(--radius-sm); box-shadow: var(--shadow);
padding: .9rem 1rem; font-size: .9rem; font-weight: 600; color: var(--earth);
}
.wr-pd-tests li::before { content: '✓'; color: var(--gold); font-weight: 800; margin-right: .5rem; }
.wr-pd-care { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; list-style: none; padding: 0; margin: .8rem 0 0; font-size: .92rem; color: var(--earth-soft); }
.wr-pd-care li::before { content: '·'; color: var(--gold); margin-right: .55rem; font-weight: 800; }
@media (max-width: 560px) { .wr-pd-senses { flex-direction: column; align-items: flex-start; } }
/* Pagination: brand-styled */
.woocommerce nav.woocommerce-pagination { margin: 2.5rem 0 1rem; }
.woocommerce nav.woocommerce-pagination ul {
border: none; display: flex; justify-content: center;
gap: .55rem; margin: 0; white-space: normal;
}
.woocommerce nav.woocommerce-pagination ul li {
border: none; overflow: visible; float: none;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
width: 44px; height: 44px; min-width: 44px;
display: flex; align-items: center; justify-content: center;
border-radius: 50%; padding: 0; line-height: 1;
font-weight: 600; font-size: .95rem;
background: var(--card); color: var(--earth);
box-shadow: var(--shadow);
transition: background .15s ease, color .15s ease;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
background: var(--canopy); color: #fff;
}
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li a:focus {
background: var(--gold); color: var(--earth);
}
/* Cards: pin Add to cart to bottom for row consistency */
.woocommerce ul.products li.product .button { margin-top: auto; }
.woocommerce ul.products li.product .price { margin-bottom: .15rem; }
.woocommerce ul.products li.product .wr-batch { margin-bottom: 1rem; }
.woocommerce ul.products li.product .woocommerce-loop-product__link { display: contents; }
/* ==========================================================
RESOURCES HUB
========================================================== */
.wr-res-nav { margin: .5rem 0 1rem; }
.wr-res-section { margin: 2.6rem 0 0; padding-top: 1.6rem; border-top: 1px solid rgba(67,48,42,.08); }
.wr-res-section h2 { margin-bottom: .2em; }
.wr-res-sub { color: var(--earth-soft); margin: 0 0 1rem; }
.wr-res-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1.3rem; margin-top: 1.2rem;
}
.wr-res-card {
display: flex; flex-direction: column;
background: var(--card); border-radius: var(--radius);
box-shadow: var(--shadow); padding: 1.2rem 1.3rem;
text-decoration: none; color: var(--earth);
transition: transform .18s ease;
}
.wr-res-card:hover { transform: translateY(-3px); }
.wr-res-card .wr-res-thumb {
width: calc(100% + 2.6rem); margin: -1.2rem -1.3rem .9rem;
border-radius: var(--radius) var(--radius) 0 0;
aspect-ratio: 16/9; object-fit: cover; height: auto;
}
.wr-res-card h3 { font-size: 1.12rem; line-height: 1.3; margin: 0 0 .4rem; }
.wr-res-card p { color: var(--earth-soft); font-size: .93rem; margin: 0 0 .8rem; }
.wr-res-more { margin-top: auto; font-weight: 600; font-size: .88rem; color: var(--canopy); }
.wr-res-all { margin-top: 1rem; }
.wr-res-all a { font-weight: 600; color: var(--canopy); text-decoration: none; }
.wr-res-all a:hover { text-decoration: underline; text-underline-offset: 3px; }
.wr-res-soon {
border: 1.5px dashed rgba(67,48,42,.22); border-radius: var(--radius);
padding: 1.2rem 1.4rem; margin-top: 1.1rem; background: rgba(255,253,249,.55);
}
.wr-res-soon-label {
display: inline-block; font-size: .78rem; font-weight: 700;
letter-spacing: .08em; text-transform: uppercase; color: var(--gold);
margin-bottom: .5rem;
}
.wr-res-soon ul { list-style: none; margin: 0; padding: 0; }
.wr-res-soon li { color: var(--earth-soft); padding: .22rem 0; }
.wr-res-soon li::before { content: '—'; color: var(--gold); margin-right: .6rem; }
/* ==========================================================
BLOG POST (single)
========================================================== */
.wr-post-body { max-width: none; }
.wr-post-body > p:first-child {
font-size: 1.18rem; color: var(--earth-soft); line-height: 1.65;
}
.wr-post-body h2 {
font-size: 1.5rem; margin: 2.2rem 0 .6rem;
padding-top: 1.4rem; border-top: 1px solid rgba(67,48,42,.08);
}
.wr-post-body h3 { font-size: 1.15rem; margin: 1.5rem 0 .4rem; }
.wr-post-body ul:not(.wr-pd-links):not(.wr-pd-care) { padding-left: 1.1rem; }
.wr-post-body ul:not(.wr-pd-links):not(.wr-pd-care) li { margin-bottom: .5rem; }
.wr-post-body ul:not(.wr-pd-links):not(.wr-pd-care) li::marker { color: var(--gold); }
.wr-post-body a { color: var(--canopy); font-weight: 600; }
.wr-post-body .wr-faq-item { max-width: none; }
.wr-post-disclaimer {
font-size: .82rem; color: var(--stone-dark, #8a847c);
border-top: 1px solid rgba(67,48,42,.1); padding-top: 1.2rem; margin-top: 2.2rem;
}
.wr-post-cat { color: inherit; text-decoration: none; }
.wr-post-cat:hover { text-decoration: underline; text-underline-offset: 3px; }
.wr-post-foot { max-width: none; margin-top: 2.4rem; }
.wr-post-cta {
display: flex; align-items: center; justify-content: space-between;
gap: 1.5rem; flex-wrap: wrap;
background: #315943; color: #eef2ea;
border: 1px solid #264a38;
border-radius: var(--radius); padding: 1.6rem 1.8rem; margin-top: 1.4rem;
}
.wr-post-cta h2 { color: #fffdf4; font-size: 1.35rem; margin: 0 0 .2rem; border: none; padding: 0; }
.wr-post-cta p { color: #dce7d9; margin: 0; font-size: .95rem; }
/* Hub thumbs: allow full-bleed past the max-width clamp */
.wr-res-card .wr-res-thumb { max-width: calc(100% + 2.6rem); }
/* ==========================================================
SEO-audit additions: breadcrumbs, reviewer byline, restrictions
========================================================== */
.wr-breadcrumb {
font-size: .8125rem; color: var(--earth-soft);
margin: 0 0 1.4rem; letter-spacing: .01em;
}
.wr-breadcrumb a { color: var(--earth-soft); text-decoration: none; }
.wr-breadcrumb a:hover { color: var(--canopy); text-decoration: underline; }
.wr-breadcrumb__sep { color: var(--stone); margin: 0 .15rem; }
.wr-reviewer {
margin: 0 0 1.5rem; padding: .55rem 0 .55rem .9rem;
border-left: 3px solid var(--gold);
font-size: .85rem; color: var(--earth-soft); font-style: italic;
}
.wr-restrictions { margin: 1.4rem 0; }
.wr-restrictions p { margin: 0 0 .8rem; }
.wr-restrictions strong { color: var(--earth); }
.wr-restrictions__note { font-size: .875rem; color: var(--earth-soft); }
/* ==========================================================
MOBILE: one product per row, centered. Uses a real single
`1fr` column (auto-fill was leaving an empty 2nd track → the
card sat LEFT). Card capped + margin:auto so it centers at
any phone width.
========================================================== */
@media (max-width: 767px) {
ul.products,
.woocommerce ul.products,
.woocommerce-page ul.products {
display: flex !important;
flex-direction: column !important;
align-items: center !important; /* centers each card horizontally */
gap: 1.1rem;
margin: 2rem 0 0;
}
ul.products li.product,
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
width: 100% !important;
max-width: 420px !important;
margin: 0 !important;
float: none !important;
}
}
/* ============================================================
PRODUCT PAGE — variation dropdown + add-to-cart + COA position
(ported from Wild Root 2026-08-03; uses BKH's own brand vars)
============================================================ */
/* ============================================================
SINGLE PRODUCT — balance the image + summary columns
============================================================ */
.woocommerce div.product { align-items: center; }
.woocommerce div.product div.images { align-self: center; }
.woocommerce div.product .woocommerce-tabs, .woocommerce div.product .related.products { align-self: stretch; }
/* ============================================================
VARIABLE PRODUCT — variation dropdowns + add-to-cart button
============================================================ */
.woocommerce div.product form.cart .variations { border: 0; margin: 0 0 1rem; }
.woocommerce div.product form.cart .variations td, .woocommerce div.product form.cart .variations th { border: 0; padding: .35rem 0; vertical-align: middle; }
.woocommerce div.product form.cart .variations td.label label { font-family: "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; font-size: .85rem; color: var(--earth); margin-right: .9rem; }
.woocommerce div.product form.cart .variations select {
-webkit-appearance: none; -moz-appearance: none; appearance: none;
border: 1.5px solid #e5ddcd; border-radius: var(--radius-sm, 6px); background-color: var(--card, #f7efdd);
padding: .68rem 2.4rem .68rem .95rem; min-width: 14rem; max-width: 100%;
font-family: var(--body); font-size: .95rem; color: var(--earth); line-height: 1.2; cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right .85rem center; background-size: .75rem;
transition: border-color .15s, box-shadow .15s;
}
.woocommerce div.product form.cart .variations select:hover { border-color: var(--gold, #c1701f); }
.woocommerce div.product form.cart .variations select:focus { outline: 0; border-color: var(--gold, #c1701f); box-shadow: 0 0 0 3px rgba(193,112,31,.22); }
.woocommerce div.product form.cart .reset_variations { font-size: .82rem; color: var(--earth-soft); margin-left: .6rem; }
.woocommerce div.product .woocommerce-variation-price .price { font-size: 1.5rem; color: var(--canopy); font-weight: 600; }
/* Add-to-cart — always brand orange (WooCommerce's default .button.alt is mauve/purple) */
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce div.product form.cart .single_add_to_cart_button.alt,
.woocommerce div.product form.cart .single_add_to_cart_button.disabled,
.woocommerce div.product form.cart .single_add_to_cart_button:disabled {
background-color: var(--gold, #c1701f); color: #fff; border: 0; box-shadow: none;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover:not(.disabled) { background-color: var(--gold-deep, #a2590f); color: #fff; }
.woocommerce div.product form.cart .single_add_to_cart_button.disabled, .woocommerce div.product form.cart .single_add_to_cart_button:disabled { opacity: .5; cursor: not-allowed; }
/* Variable product: stack the variations, put qty + button on their own row below (not beside) */
.woocommerce div.product form.variations_form.cart { display: block; }
.woocommerce div.product form.cart table.variations { display: block; width: 100%; margin: 0 0 1.1rem; }
.woocommerce div.product form.cart table.variations tbody { display: block; }
.woocommerce div.product form.cart table.variations tr { display: flex; align-items: center; gap: .9rem; margin-bottom: .7rem; }
.woocommerce div.product form.cart table.variations td.label { width: auto; min-width: 3.5rem; }
.woocommerce div.product .single_variation_wrap { margin-top: 0; }
.woocommerce div.product .single_variation_wrap .woocommerce-variation-price { margin: 0 0 1rem; }
.woocommerce div.product .woocommerce-variation-add-to-cart { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin: 0; }
.woocommerce div.product .woocommerce-variation-add-to-cart.woocommerce-variation-add-to-cart-disabled .single_add_to_cart_button { pointer-events: none; }
/* COA box moved under the product image (left column) */
.woocommerce-product-gallery .wr-coa-box, div.images .wr-coa-box { margin: 1.3rem 0 0; }
/* Hide SKU on the product page (kept in structured data for SEO); Categories stay. */
.woocommerce div.product .product_meta .sku_wrapper { display: none; }
/* BKH catalog filters */
.bkh-shop-filters {
clear: both;
margin: 1.5rem 0 2rem;
padding: 1.4rem;
background: #f7f5ef;
border: 1px solid #dedbd0;
border-radius: 12px;
}
.bkh-filter-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1rem; margin-bottom: 1rem; }
.bkh-filter-heading strong { font-size: 1.2rem; color: #233d2e; }
.bkh-filter-heading span { color: #5d655d; font-size: .92rem; }
.bkh-filter-fields { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem; }
.bkh-filter-field { display: flex; flex: 1 1 160px; flex-direction: column; gap: .35rem; min-width: 0; margin: 0; }
.bkh-filter-search { flex: 1.4 1 200px; }
.bkh-filter-field span { font-size: .83rem; font-weight: 700; color: #334638; }
.bkh-filter-field input,
.bkh-filter-field select { width: 100%; min-height: 44px; margin: 0; padding: .55rem .75rem; border: 1px solid #aeb9ac; border-radius: 7px; background: #fff; color: #26352b; font: inherit; }
.bkh-filter-field input:focus,
.bkh-filter-field select:focus { outline: 2px solid #38644b; outline-offset: 2px; }
.bkh-filter-actions { display: flex; flex: 0 0 auto; align-items: center; gap: .7rem; min-height: 44px; }
.bkh-filter-actions button { min-height: 44px; padding: .55rem 1rem; border: 0; border-radius: 7px; background: #263e2d; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.bkh-filter-actions button:hover { background: #3b6047; }
.bkh-filter-actions a { font-size: .9rem; text-decoration: underline; }
@media (max-width: 640px) {
.bkh-shop-filters { padding: 1rem; }
.bkh-filter-field, .bkh-filter-search { flex-basis: 100%; }
.bkh-filter-actions { width: 100%; justify-content: space-between; }
}
/* BKH homepage section redesign 2026-09-18 */
.wr-format-section {
background: #eee9dc;
border-top: 1px solid #e5dcc8;
border-bottom: 1px solid #e5dcc8;
}
.wr-format-section h2 { margin-bottom: 1.1em; }
.wr-format-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: .9rem;
}
.wr-format-grid a {
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-width: 0;
min-height: 355px;
padding: 1.35rem;
overflow: hidden;
border: 1px solid rgba(44, 63, 44, .18);
border-radius: 14px;
background: #2f4830;
box-shadow: 0 14px 30px rgba(50, 48, 36, .13);
text-decoration: none;
transition: transform .2s ease, box-shadow .2s ease;
}
.wr-format-grid a:hover,
.wr-format-grid a:focus-visible {
transform: translateY(-5px);
box-shadow: 0 20px 38px rgba(50, 48, 36, .2);
}
.wr-format-grid a::before {
content: '';
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg, rgba(15, 29, 20, .04) 28%, rgba(15, 29, 20, .48) 62%, rgba(15, 29, 20, .92) 100%);
pointer-events: none;
}
.wr-format-grid a::after {
content: '›';
position: absolute;
top: 1rem;
right: 1rem;
z-index: 2;
display: grid;
place-items: center;
width: 2.2rem;
height: 2.2rem;
border: 1px solid rgba(255, 255, 255, .8);
border-radius: 50%;
background: rgba(24, 43, 30, .36);
color: #fff;
font-family: var(--body);
font-size: 1.1rem;
line-height: 1;
}
.wr-format-grid .wr-img--card {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
margin: 0;
border-radius: 0;
box-shadow: none;
aspect-ratio: auto;
object-fit: cover;
transition: transform .4s ease;
}
.wr-format-grid a:hover .wr-img--card,
.wr-format-grid a:focus-visible .wr-img--card { transform: scale(1.045); }
.wr-format-grid h3,
.wr-format-grid p { position: relative; z-index: 2; }
.wr-format-grid h3 {
margin: 0 0 .3rem;
color: #fffdf6;
font-size: clamp(1.35rem, 1.7vw, 1.65rem);
line-height: 1.15;
}
.wr-format-grid p {
margin: 0;
color: #eee9df;
font-size: .92rem;
line-height: 1.45;
}
.wr-values {
background: #2a4332;
color: #f8f5eb;
}
.wr-values .wr-eyebrow { color: #dfbd72; }
.wr-values h2 { color: #fffdf6; margin-bottom: 1.2em; }
.wr-values-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0;
border-top: 1px solid rgba(245, 234, 205, .32);
border-bottom: 1px solid rgba(245, 234, 205, .32);
}
.wr-values-grid > div {
display: grid;
grid-template-columns: 72px minmax(0, 1fr);
grid-template-rows: auto 1fr;
column-gap: 1.3rem;
min-width: 0;
min-height: 185px;
padding: 2rem;
border-bottom: 1px solid rgba(245, 234, 205, .25);
}
.wr-values-grid > div:nth-child(odd) { border-right: 1px solid rgba(245, 234, 205, .25); }
.wr-values-grid > div:nth-child(n+3) { border-bottom: 0; }
.wr-values-grid .wr-img--icon {
grid-row: 1 / span 2;
width: 68px;
height: 68px;
margin: 0;
border: 1px solid rgba(245, 234, 205, .46);
border-radius: 50%;
box-shadow: none;
}
.wr-values-grid h3 {
margin: .15rem 0 .4rem;
color: #fffaf0;
font-size: 1.33rem;
}
.wr-values-grid h3::before { display: none; }
.wr-values-grid p {
margin: 0;
color: #e4e7dc;
font-size: .98rem;
line-height: 1.6;
}
@media (max-width: 960px) {
.wr-format-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wr-format-grid a { min-height: 350px; }
}
@media (max-width: 700px) {
.wr-values-grid { grid-template-columns: 1fr; }
.wr-values-grid > div { min-height: 0; padding: 1.5rem .25rem; border-right: 0 !important; border-bottom: 1px solid rgba(245, 234, 205, .25) !important; }
.wr-values-grid > div:last-child { border-bottom: 0 !important; }
}
@media (max-width: 520px) {
.wr-format-grid { grid-template-columns: 1fr; }
.wr-format-grid a { min-height: 290px; }
.wr-values-grid > div { grid-template-columns: 58px minmax(0, 1fr); column-gap: 1rem; }
.wr-values-grid .wr-img--icon { width: 56px; height: 56px; }
}
/* BKH values icon visibility 2026-09-18 */
.wr-values-grid > div {
grid-template-columns: 124px minmax(0, 1fr);
column-gap: 1.4rem;
}
.wr-values-grid .wr-img--icon {
width: 108px;
height: 108px;
align-self: center;
border: 2px solid #d5b971;
background: #fffaf0;
box-shadow: 0 0 0 5px rgba(220, 190, 120, .13);
filter: contrast(1.55) saturate(1.15);
}
@media (max-width: 700px) {
.wr-values-grid > div { grid-template-columns: 104px minmax(0, 1fr); column-gap: 1.2rem; }
.wr-values-grid .wr-img--icon { width: 92px; height: 92px; }
}
@media (max-width: 520px) {
.wr-values-grid > div { grid-template-columns: 88px minmax(0, 1fr); column-gap: 1rem; }
.wr-values-grid .wr-img--icon { width: 80px; height: 80px; }
}
/* BKH crisp values icons 2026-09-18 */
.wr-values-grid .wr-value-icon {
grid-row: 1 / span 2;
display: grid;
place-items: center;
width: 108px;
height: 108px;
align-self: center;
border: 2px solid #d5b971;
border-radius: 50%;
background: #f8efd8;
box-shadow: 0 0 0 5px rgba(220, 190, 120, .13);
color: #234331;
}
.wr-values-grid .wr-value-icon svg { display: block; width: 64px; height: 64px; }
@media (max-width: 700px) {
.wr-values-grid .wr-value-icon { width: 92px; height: 92px; }
.wr-values-grid .wr-value-icon svg { width: 56px; height: 56px; }
}
@media (max-width: 520px) {
.wr-values-grid .wr-value-icon { width: 80px; height: 80px; }
.wr-values-grid .wr-value-icon svg { width: 48px; height: 48px; }
}
/* Jungle Standard visual system — editorial rather than the copied storefront layout. */
:root {
--canopy: #183a2e; --canopy-deep: #10281f; --earth: #2c2c2c;
--earth-soft: #575e52; --gold: #a48250; --gold-soft: #e9dfc9;
--stone: #686d64; --cream: #f3ebdd; --card: #faf6ec;
--display: 'Cinzel', Georgia, serif; --body: 'Lato', Arial, sans-serif;
--radius: 0; --radius-sm: 0; --shadow: none;
}
body { background: var(--cream); line-height: 1.6; }
h1,h2,h3,h4 { font-family: var(--display); font-weight: 500; font-variation-settings: normal; letter-spacing: -.035em; line-height: 1.16; }
img { border-radius: 0; }
.wrap { max-width: 1440px; padding-left: clamp(1.25rem, 5vw, 5rem); padding-right: clamp(1.25rem, 5vw, 5rem); }
.compliance-strip { background: #10271e; color: #e8ddc8; font-size: .65rem; letter-spacing: .2em; padding: .5rem 1rem; }
.site-header { background: var(--cream); border-bottom: 1px solid #cfc4ad; z-index: 20; }
.site-header .wrap { padding-top: .7rem; padding-bottom: .7rem; gap: 1rem; }
.site-header .site-logo__mark { height: 60px; width: 59px; object-fit: cover; object-position: center; }
.site-logo { gap: .65rem; color: var(--canopy); }
.site-logo__name { display: block; font: 600 1.2rem/.85 var(--display); letter-spacing: -.075em; }
.site-logo__name span { display: block; font-size: .74em; letter-spacing: -.055em; margin-top: .22em; }
.site-logo__name small { display: block; margin-top: .5em; font: 500 .48rem/1 var(--body); letter-spacing: .45em; }
.site-nav a { text-transform: uppercase; font-size: .68rem; letter-spacing: .16em; font-weight: 700; color: var(--canopy); }
.header-login { font-size: .75rem; text-transform: uppercase; letter-spacing: .13em; }
.header-cart a { background: var(--canopy); color: var(--cream); border-radius: 0; text-transform: uppercase; letter-spacing: .13em; font-size: .68rem; padding: .75rem 1rem; }
.header-cart a:hover { color: #fff; }
.wr-eyebrow { color: var(--gold); }
.wr-btn,.button,.single_add_to_cart_button { border-radius: 0; background: var(--canopy); text-transform: uppercase; letter-spacing: .11em; font-size: .72rem; }
.site-footer { background: #10281f; color: #dbd8c9; border-radius: 0; margin-top: 0; }
.site-footer h4 { color: #ead9b8; text-transform: uppercase; letter-spacing: .16em; font: 500 .78rem var(--body); }
.site-footer a { color: #e3e1d6; }
.site-footer .wrap { padding-top: 4rem; }
.js-footer-brand { display:flex; align-items:center; gap:.9rem; color:#f3ebdd; font:600 1.55rem/.93 var(--display); letter-spacing:-.07em; margin-bottom:1rem; }
.js-footer-brand .footer-logo { width:70px; height:70px; object-fit:cover; margin:0; }
.js-footer-brand small { display:block; font:500 .55rem var(--body); letter-spacing:.5em; margin-top:.55rem; }
.footer-disclaimer { border-top:1px solid #526052; }
.wr-agegate { background:rgba(8,24,16,.65); }
.wr-agegate__card { border-radius:0; border:1px solid #c4ae87; }
.wr-agegate__deny.wr-btn { background:transparent; color:var(--canopy) !important; box-shadow:inset 0 0 0 1px var(--canopy); }
.wr-agegate__deny.wr-btn:hover { background:#e6dcc8; }
.js-home h1,.js-home h2,.js-home h3 { margin:0; }
.js-home h2 { font-size:clamp(2.2rem,4.4vw,4.5rem); }
.js-home em { font-style:normal; color:var(--gold); }
.js-kicker { display:block; font:700 .68rem/1.4 var(--body); text-transform:uppercase; letter-spacing:.25em; color:#85663f; margin-bottom:1.3rem; }
.js-kicker--light { color:#e5c995; }
.js-hero { min-height:clamp(650px,68vw,800px); position:relative; display:flex; align-items:center; isolation:isolate; color:var(--cream); background:#10271e; overflow:hidden; }
.js-hero__image { position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(9,23,17,.93) 0%,rgba(9,23,17,.72) 34%,rgba(9,23,17,.18) 72%),url('assets/img/jungle-canopy-hero.webp') center/cover no-repeat; }
.js-hero__inner { width:100%; padding-top:7rem; padding-bottom:6rem; }
.js-hero h1 { color:#f5edde; font-size:clamp(3.25rem,6.9vw,7.25rem); max-width:12ch; line-height:1.05; }
.js-hero h1 em { color:#e6c995; }
.js-hero p { max-width:42ch; margin:1.7rem 0 2.4rem; font-size:clamp(1rem,1.4vw,1.2rem); color:#ebe5d7; line-height:1.7; }
.js-actions { display:flex; align-items:center; gap:2rem; flex-wrap:wrap; }
.js-button { display:inline-flex; justify-content:space-between; align-items:center; gap:2rem; min-width:220px; padding:1.1rem 1.35rem; text-decoration:none; font:700 .69rem var(--body); letter-spacing:.16em; text-transform:uppercase; transition:transform .2s,background .2s; }
.js-button:hover { transform:translateY(-3px); }
.js-button--sand { background:#e7d3ad; color:#173a2e; }
.js-button--sand:hover { color:#173a2e; background:#f7e6c6; }
.js-button--outline { border:1px solid #e6d6b6; color:#f3ebdd; }
.js-button--outline:hover { color:#fff; background:#355a48; }
.js-text-link { color:#f5edde; text-decoration:none; border-bottom:1px solid #e7d3ad; padding:.4rem 0; text-transform:uppercase; font-size:.7rem; letter-spacing:.16em; }
.js-text-link:hover { color:#e7d3ad; }
.js-hero__index { display:block; margin-top:clamp(4rem,8vw,8rem); text-transform:uppercase; letter-spacing:.2em; font-size:.63rem; color:#d4cfba; }
.js-intro { padding:clamp(5rem,9vw,10rem) 0; }
.js-intro__grid { display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,10vw,10rem); align-items:end; }
.js-intro h2 { color:var(--canopy); }
.js-intro__copy p { font-size:clamp(1.1rem,1.8vw,1.45rem); line-height:1.65; margin:0 0 2rem; max-width:34ch; }
.js-underlink { display:inline-flex; align-items:center; justify-content:space-between; gap:2.5rem; border-bottom:1px solid currentColor; padding:.25rem 0 .65rem; color:var(--canopy); text-decoration:none; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.15em; }
.js-underlink:hover { color:#7d6039; }
.js-collections { background:#e4dccb; padding:clamp(5rem,8vw,8rem) 0; }
.js-section-heading { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:2.5rem; }
.js-section-heading h2 { color:var(--canopy); }
.js-collection-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#8f9987; }
.js-collection { min-height:clamp(330px,34vw,500px); position:relative; display:flex; flex-direction:column; justify-content:space-between; padding:1.5rem; color:#f3ebdd; text-decoration:none; isolation:isolate; overflow:hidden; }
.js-collection:before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(5,20,13,.35),rgba(5,20,13,.78)),url('assets/img/jungle-canopy-hero.webp') center/cover; transition:transform .5s; }
.js-collection:hover:before { transform:scale(1.05); }
.js-collection--powder:before { background-image:linear-gradient(180deg,rgba(5,20,13,.3),rgba(5,20,13,.78)),url('assets/img/jungle-leaf-detail.webp'); background-position:28% center; }
.js-collection--capsules:before { background-image:linear-gradient(180deg,rgba(5,20,13,.25),rgba(5,20,13,.8)),url('assets/img/jungle-forest-path.webp'); background-position:52% center; }
.js-collection--extracts:before { background-position:95% center; }
.js-collection:hover { color:#fff; }
.js-collection__num { font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; }
.js-collection__body strong { display:block; font:500 clamp(1.65rem,2.5vw,2.8rem)/1.1 var(--display); letter-spacing:-.035em; }
.js-collection__body small { display:block; margin-top:.55rem; font-size:.87rem; }
.js-collection__arrow { position:absolute; right:1.5rem; bottom:1.5rem; font-size:1.6rem; }
.js-story { background:var(--canopy); color:#e8e5d5; }
.js-story__grid { display:grid; grid-template-columns:1fr 1fr; padding-top:0; padding-bottom:0; }
.js-story__visual { min-height:640px; display:flex; align-items:end; padding:2.5rem; background:linear-gradient(0deg,rgba(0,15,8,.75),transparent 65%),url('assets/img/jungle-leaf-detail.webp') 45% center/cover; }
.js-story__visual span { color:#eee6d6; font:500 clamp(2.1rem,4vw,4.5rem)/1.15 var(--display); text-transform:uppercase; }
.js-story__content { align-self:center; padding:clamp(3rem,6vw,7rem); }
.js-story h2 { color:#f2ebde; }
.js-story p { max-width:44ch; font-size:1.08rem; line-height:1.8; margin:1.7rem 0 2rem; }
.js-products { padding:clamp(5rem,8vw,8rem) 0; }
.js-products ul.products { margin-top:2.5rem !important; }
.js-products li.product { background:#f9f4e9; border:1px solid #d8cdb9; padding:1rem !important; }
.js-products li.product img { background:#e9e5d9; }
.js-values { padding:clamp(5rem,8vw,8rem) 0; background:#e5dcc8; }
.js-values h2 { color:var(--canopy); }
.js-values__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:3rem; border-top:1px solid #a9aa96; }
.js-values__grid>div { padding:2rem 1.5rem 0 0; border-right:1px solid #b6b4a1; }
.js-values__grid>div:not(:first-child) { padding-left:1.5rem; }
.js-values__grid>div:last-child { border:0; }
.js-values__grid span { font:500 .75rem var(--display); color:#846744; }
.js-values__grid h3 { font-size:1.25rem; color:var(--canopy); margin:.9rem 0; }
.js-values__grid p { margin:0; font-size:.93rem; color:#4c5549; }
.js-endnote { text-align:center; background:#10281f; color:#e7ddca; padding:clamp(5rem,9vw,9rem) 0; }
.js-endnote h2 { color:#f4ebd9; font-size:clamp(2.6rem,5.5vw,5.5rem); margin:0 auto 2rem; }
.js-endnote .js-button { margin:auto; }
.wr-page-banner { background:linear-gradient(90deg,rgba(10,31,21,.82),rgba(10,31,21,.32)),url('assets/img/jungle-forest-path.webp') center/cover; min-height:clamp(260px,33vw,460px); align-items:center; }
.wr-page-banner::before { display:none; }
.wr-page-banner h1 { color:#f3ebdd; font-size:clamp(2.5rem,5vw,5rem); text-shadow:0 2px 15px rgba(0,0,0,.35); }
.wr-cat-hero { background:#e4dccb; border-radius:0; border-top:3px solid var(--gold); }
.wr-cat-hero h1 { color:var(--canopy); }
.js-about-hero { display:flex; align-items:center; min-height:clamp(500px,53vw,720px); color:#f3ebdd; background:linear-gradient(90deg,rgba(10,31,21,.87),rgba(10,31,21,.2)),url('assets/img/jungle-canopy-hero.webp') center/cover; }
.js-about-hero .wrap { width:100%; }
.js-about-hero h1 { color:#f3ebdd; font-size:clamp(3.2rem,7vw,7.2rem); line-height:1.07; max-width:13ch; }
.js-about-hero h1 em { color:#e6c995; font-style:normal; }
.js-about-hero p { max-width:39ch; font-size:1.2rem; margin-top:1.5rem; }
.js-about .js-intro__copy p+p { margin-top:1.5rem; }
.js-about-image { min-height:clamp(400px,48vw,700px); display:flex; align-items:end; background:linear-gradient(0deg,rgba(7,29,19,.75),transparent 65%),url('assets/img/jungle-leaf-detail.webp') center/cover; }
.js-about-image .wrap { width:100%; padding-bottom:3rem; }
.js-about-image span { color:#f3ebdd; text-transform:uppercase; font:500 clamp(2.5rem,5vw,5.5rem)/1.1 var(--display); }
@media(max-width:900px) {
.js-intro__grid,.js-story__grid { grid-template-columns:1fr; }
.js-story__visual { min-height:450px; }
.js-story__content { padding:4rem 0; }
.js-values__grid { grid-template-columns:repeat(2,1fr); }
.js-values__grid>div:nth-child(2) { border:0; }
.js-values__grid>div:nth-child(3) { padding-left:0; }
}
@media(max-width:650px) {
.site-header .site-logo__mark { height:50px; width:49px; }
.site-logo__name { font-size:1rem; }
.site-nav { overflow:auto; }
.site-nav ul { flex-wrap:nowrap; justify-content:flex-start; width:max-content; }
.site-nav a { white-space:nowrap; }
.header-actions { gap:.6rem; }
.header-login { display:none; }
.js-hero { min-height:650px; }
.js-hero__image { background-position:65% center; }
.js-hero h1 { font-size:clamp(3rem,11vw,4.5rem); }
.js-section-heading { display:block; }
.js-section-heading .js-underlink { margin-top:1.25rem; }
.js-collection-grid { grid-template-columns:1fr; }
.js-collection { min-height:280px; }
.js-values__grid { grid-template-columns:1fr; }
.js-values__grid>div,.js-values__grid>div:not(:first-child) { border:0; border-bottom:1px solid #aaa995; padding:1.5rem 0; }
.js-story__visual { min-height:380px; }
}
/* V3 — a distinct field-journal layout across home, navigation and commerce. */
.js-header { background:#f1e9d9; border-bottom:0; }
.js-header .js-header__top { display:grid; grid-template-columns:1fr auto 1fr; gap:1rem; align-items:center; padding-top:1.2rem; padding-bottom:1.2rem; flex-wrap:initial; }
.js-header__edition { font:700 .6rem var(--body); letter-spacing:.2em; color:#4a5946; }
.js-header__edition span { color:#b19c77; padding:0 .45rem; }
.js-header .js-header__logo { justify-self:center; color:#163b2c; text-align:center; text-decoration:none; }
.js-header .site-logo__name { font-size:clamp(1.35rem,2.1vw,2rem); line-height:.83; letter-spacing:-.09em; }
.js-header .site-logo__name span { margin-top:.17em; }
.js-header .site-logo__name small { letter-spacing:.57em; font-size:.52rem; margin-top:.72em; }
.js-header .header-actions { justify-self:end; gap:1.5rem; }
.js-header .header-login { text-transform:uppercase; font-size:.62rem; font-weight:700; letter-spacing:.15em; }
.js-header .header-cart a { background:transparent; color:#173a2e; border-bottom:1px solid #173a2e; padding:.25rem .1rem; font-size:.64rem; }
.js-header .header-cart a span { display:inline-grid; place-items:center; width:1.25rem; height:1.25rem; border:1px solid #173a2e; border-radius:50%; margin-left:.25rem; }
.js-header__nav { border-top:1px solid #c9c3b3; border-bottom:1px solid #c9c3b3; }
.js-header__nav .wrap { display:flex; flex-wrap:nowrap; justify-content:center; align-items:center; gap:clamp(1.25rem,3vw,3.3rem); padding-top:.75rem; padding-bottom:.75rem; }
.js-header__nav a { text-decoration:none; color:#173a2e; font:700 .66rem var(--body); letter-spacing:.16em; text-transform:uppercase; white-space:nowrap; }
.js-header__nav a:hover,.js-header__nav a:focus-visible { color:#8d6f46; }
.js-header .wr-search-panel { top:calc(100% + .2rem); right:5vw; border-radius:0; }
.js-header .wr-search-panel input[type=search],.js-header .wr-search-panel button[type=submit] { border-radius:0; }
.js2-label { display:block; font:700 .63rem/1.4 var(--body); letter-spacing:.23em; text-transform:uppercase; color:#896d43; }
.js2-home h1,.js2-home h2,.js2-home h3 { font-family:var(--display); font-weight:500; }
.js2-home h2 { font-size:clamp(2.4rem,4.8vw,5rem); line-height:1.1; letter-spacing:-.055em; }
.js2-home em,.js2-shop-mast em { font-style:italic; font-weight:400; }
.js2-hero { display:grid; grid-template-columns:minmax(0,46fr) minmax(0,54fr); min-height:710px; }
.js2-hero__paper { display:flex; flex-direction:column; min-width:0; background:#efe7d5; padding:clamp(1.6rem,3.5vw,3.75rem) clamp(1.6rem,4vw,4.5rem) 1.8rem; }
.js2-hero__topline { display:flex; justify-content:space-between; gap:1rem; font:700 .56rem var(--body); letter-spacing:.2em; color:#68705e; }
.js2-hero__logo { width:100%; max-width:570px; max-height:260px; object-fit:contain; margin:clamp(1rem,2vw,2rem) auto .75rem; mix-blend-mode:multiply; }
.js2-hero__copy { margin-top:auto; }
.js2-hero h1 { color:#183a2e; font-size:clamp(3.1rem,5.4vw,6.2rem); line-height:1.04; letter-spacing:-.07em; margin:.8rem 0 1rem; }
.js2-hero p { max-width:43ch; font-size:1.04rem; color:#3f4b40; line-height:1.65; margin:0 0 1.8rem; }
.js2-link-button { display:inline-flex; justify-content:space-between; gap:3rem; min-width:260px; padding:1rem 1.2rem; background:#183a2e; color:#f4e9d3; text-decoration:none; text-transform:uppercase; letter-spacing:.14em; font:700 .66rem var(--body); }
.js2-link-button:hover { background:#355b42; color:#fff; }
.js2-hero__folio { display:flex; align-items:center; gap:.9rem; margin-top:clamp(1.5rem,3vw,3rem); font:700 .55rem var(--body); letter-spacing:.2em; color:#526049; }
.js2-hero__folio i { width:2rem; height:1px; background:#a99d80; }
.js2-hero__photo { min-width:0; position:relative; background:url('assets/img/jungle-canopy-hero.webp') 58% center/cover; }
.js2-hero__photo:after { content:''; position:absolute; inset:1.5rem; border:1px solid rgba(244,234,209,.48); pointer-events:none; }
.js2-hero__photo-label,.js2-hero__photo-caption { position:absolute; z-index:1; color:#f3ebdd; font:700 .62rem var(--body); letter-spacing:.2em; text-transform:uppercase; }
.js2-hero__photo-label { top:3rem; right:3rem; }
.js2-hero__photo-caption { bottom:3rem; left:3rem; }
.js2-marquee { background:#183a2e; color:#e7d9b9; overflow:hidden; text-align:center; padding:1.15rem 1rem; }
.js2-marquee div { white-space:nowrap; font:500 clamp(.7rem,1vw,.86rem) var(--display); letter-spacing:.18em; }
.js2-marquee span { padding:0 clamp(.8rem,2vw,2rem); color:#ad9364; }
.js2-intro { padding:clamp(5rem,10vw,10rem) 0; background:#f4eedf; }
.js2-intro__grid { display:grid; grid-template-columns:1fr 2fr; gap:clamp(2rem,6vw,7rem); }
.js2-intro__grid>.js2-label { padding-top:.8rem; }
.js2-intro h2 { color:#183a2e; margin:0 0 1.5rem; }
.js2-intro p { max-width:57ch; font-size:clamp(1.05rem,1.6vw,1.35rem); line-height:1.65; color:#4d534b; margin:0 0 2rem; }
.js2-inline-link { display:inline-flex; align-items:center; justify-content:space-between; gap:2rem; border-bottom:1px solid currentColor; padding:.35rem 0 .65rem; color:#183a2e; text-decoration:none; text-transform:uppercase; font:700 .65rem var(--body); letter-spacing:.16em; }
.js2-inline-link:hover { color:#85673e; }
.js2-index { padding:clamp(5rem,8vw,8rem) 0; background:#e0d4bc; }
.js2-section-head { display:flex; justify-content:space-between; gap:2rem; align-items:end; margin-bottom:2.5rem; }
.js2-section-head h2 { color:#183a2e; margin:.55rem 0 0; }
.js2-section-head p { max-width:20ch; font-size:.98rem; color:#4f584d; margin:0 0 .35rem; }
.js2-index__rows { border-top:1px solid #6f806c; }
.js2-index__rows a { display:grid; grid-template-columns:70px minmax(0,1.8fr) minmax(0,.8fr) 40px; align-items:center; gap:1rem; min-height:125px; border-bottom:1px solid #6f806c; color:#183a2e; text-decoration:none; transition:background .2s,padding .2s; }
.js2-index__rows a:hover { background:#ece3ce; padding-left:1rem; }
.js2-index__number,.js2-index__meta { font:700 .62rem var(--body); letter-spacing:.16em; }
.js2-index__name { font:500 clamp(1.7rem,3.7vw,3.6rem)/1.1 var(--display); letter-spacing:-.05em; }
.js2-index__arrow { justify-self:end; font-size:1.7rem; }
.js2-index__all { margin-top:2rem; }
.js2-standard { display:grid; grid-template-columns:1fr 1fr; min-height:660px; }
.js2-standard__image { position:relative; min-height:540px; background:url('assets/img/jungle-leaf-detail.webp') 35% center/cover; }
.js2-standard__image span { position:absolute; bottom:2.3rem; left:2.3rem; color:#f5ead5; font:700 .62rem/1.7 var(--body); letter-spacing:.22em; }
.js2-standard__content { padding:clamp(4rem,7vw,8rem); background:#183a2e; color:#e7e7d8; display:flex; flex-direction:column; justify-content:center; }
.js2-standard__content .js2-label { color:#d5b77e; }
.js2-standard h2 { color:#f3ead5; margin:.9rem 0 1.2rem; }
.js2-standard p { max-width:42ch; line-height:1.8; margin:0 0 2rem; }
.js2-standard__steps { border-top:1px solid #78917a; margin-bottom:2rem; }
.js2-standard__steps div { display:flex; gap:1.5rem; border-bottom:1px solid #78917a; padding:.65rem 0; }
.js2-standard__steps b { color:#d6ba83; font:500 .73rem var(--display); }
.js2-standard__steps span { font-size:.91rem; }
.js2-standard .js2-inline-link { align-self:flex-start; color:#e8d9bb; }
.js2-products { padding:clamp(5rem,9vw,9rem) 0; background:#f4eedf; }
.js2-products .js2-section-head .js2-inline-link { margin-bottom:.3rem; }
.js2-fieldnote { position:relative; min-height:560px; display:flex; align-items:center; text-align:center; background:linear-gradient(rgba(6,28,16,.62),rgba(6,28,16,.66)),url('assets/img/jungle-forest-path.webp') center/cover; }
.js2-fieldnote .wrap { width:100%; }
.js2-fieldnote .js2-label { color:#e0c99e; }
.js2-fieldnote p { color:#f4ecd9; font:500 clamp(2.6rem,5.8vw,6rem)/1.12 var(--display); letter-spacing:-.055em; margin:1rem 0 2rem; }
.js2-fieldnote a { color:#f0e6d1; font:700 .67rem var(--body); letter-spacing:.2em; text-decoration:none; border-bottom:1px solid #e6d4af; padding-bottom:.6rem; }
.site-footer { background:#10271e; }
.site-footer .wrap { padding-top:0; }
.js-footer-intro { display:grid; grid-template-columns:1fr 2fr 1fr; align-items:end; gap:2rem; padding:clamp(4rem,8vw,8rem) 0 3rem; border-bottom:1px solid #71836d; }
.js-footer-intro>span,.js-footer-smallmark { align-self:start; color:#d5b57d; font:700 .62rem var(--body); letter-spacing:.19em; }
.js-footer-intro h2 { color:#f4ecdc; font-size:clamp(2.5rem,4.8vw,5rem); line-height:1.1; margin:0; }
.js-footer-intro h2 em { color:#d4b981; }
.js-footer-intro>a { justify-self:end; color:#f4ecdc; border-bottom:1px solid #d4b981; text-decoration:none; text-transform:uppercase; font:700 .62rem var(--body); letter-spacing:.14em; padding-bottom:.5rem; }
.js-footer-wordmark { color:#d7c9a8; font:500 clamp(3rem,10vw,11rem)/1 var(--display); letter-spacing:-.095em; white-space:nowrap; overflow:hidden; padding:1.5rem 0 2rem; border-bottom:1px solid #71836d; }
.js-footer-wordmark span { color:#f4ecdc; }
.site-footer .footer-grid { padding:3rem 0; }
.site-footer .footer-grid p { max-width:30ch; font-size:.88rem; }
.site-footer .footer-links a { font-size:.85rem; text-decoration:none; }
.site-footer .footer-disclaimer { font-size:.69rem; line-height:1.6; color:#adb9a9; }
.js2-commerce { padding-top:0; }
.js2-shop-mast { margin:0 0 3rem; background:#183a2e; color:#f3ebdd; min-height:340px; display:flex; align-items:center; background-image:linear-gradient(90deg,#173a2e 0%,rgba(23,58,46,.9) 54%,rgba(23,58,46,.5)),url('assets/img/jungle-leaf-detail.webp'); background-position:center; background-size:cover; }
.js2-shop-mast .wrap { width:100%; }
.js2-shop-mast .js2-label { color:#d9ba81; }
.js2-shop-mast h1 { font-size:clamp(3rem,6vw,6rem); color:#f3ebdd; margin:.7rem 0 .5rem; }
.js2-shop-mast p { max-width:48ch; margin:0; color:#e8e5d6; }
.js2-shop-mast__index { display:block; margin-top:2.5rem; font:700 .58rem var(--body); letter-spacing:.2em; color:#d8cda9; }
.js2-commerce .wr-cat-hero { background:#183a2e; color:#f3ebdd; border:0; border-left:8px solid #a38553; min-height:300px; padding:clamp(2rem,4vw,4rem); margin:0 0 2rem; }
.js2-commerce .wr-cat-hero h1 { color:#f3ebdd; font-size:clamp(2.6rem,5vw,5rem); }
.js2-commerce .wr-cat-hero p { color:#e3e1d1; }
.js2-commerce .bkh-shop-filters { border:0; border-top:1px solid #8a9a83; border-bottom:1px solid #8a9a83; background:transparent; border-radius:0; padding:1.5rem 0; margin:2rem 0 3rem; }
.js2-commerce .bkh-filter-heading { display:block; }
.js2-commerce .bkh-filter-heading strong { display:block; font:500 1.65rem var(--display); color:#183a2e; }
.js2-commerce .bkh-filter-heading span { font-size:.84rem; }
.js2-commerce .bkh-filter-field input,.js2-commerce .bkh-filter-field select { border-radius:0; border:1px solid #a9ae9c; background:#f7f1e5; }
.js2-commerce .bkh-filter-actions button { border-radius:0; background:#183a2e; font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; }
.js2-commerce .woocommerce-ordering select { border-radius:0; }
.js2-commerce .woocommerce-result-count,.js2-commerce .woocommerce-ordering { margin-top:.5rem; }
.woocommerce ul.products,.woocommerce-page ul.products { grid-template-columns:repeat(3,minmax(0,1fr)); gap:2rem 1.4rem; }
.woocommerce ul.products li.product,.woocommerce-page ul.products li.product,.js2-products .woocommerce ul.products li.product { background:transparent; box-shadow:none; border:0; border-top:1px solid #98a28f; border-radius:0; padding:1rem 0 1.6rem; }
.woocommerce ul.products li.product:hover { transform:none; box-shadow:none; }
.woocommerce ul.products li.product a img { aspect-ratio:1/1; object-fit:contain; background:#e6dfce; margin:0 0 1.2rem; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size:clamp(1.1rem,1.6vw,1.5rem); color:#183a2e; }
.woocommerce ul.products li.product .price { font-size:.95rem; }
.woocommerce ul.products li.product .button,.woocommerce a.button,.woocommerce button.button { border-radius:0; background:#183a2e; color:#f4eedf; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; }
.woocommerce ul.products li.product .button { align-self:flex-start; width:auto; padding:.8rem 1.2rem; }
.woocommerce ul.products li.product:before { border-radius:0; width:9px; height:9px; top:1.5rem; left:.5rem; }
.woocommerce nav.woocommerce-pagination ul { display:flex; flex-wrap:wrap; justify-content:center; max-width:100%; overflow:hidden; }
body.wr-world-page,body.wr-world-page--red,body.wr-world-page--green,body.wr-world-page--white,body.wr-world-page--yellow,body.wr-world-page--gold { background:#f3ebdd; color:#2c2c2c; }
body.wr-world-page .wr-cat-hero { color:#f3ebdd; background:#183a2e; }
body.wr-world-page .wr-cat-hero h1,body.wr-world-page .wr-cat-hero p,body.wr-world-page .wr-cat-hero .wr-eyebrow { color:#f3ebdd; }
body.wr-world-page ul.products li.product { box-shadow:none; }
.single-product .woocommerce div.product { padding-top:2rem; }
.single-product .woocommerce div.product .summary { background:#e8ddc7; padding:clamp(1.5rem,3vw,3rem); }
.single-product .woocommerce div.product .product_title { font-size:clamp(2.2rem,4vw,4rem); color:#183a2e; }
.single-product .woocommerce div.product .woocommerce-product-gallery { background:#e4ddcd; }
.single-product .woocommerce div.product .woocommerce-tabs { border-top:1px solid #9fae9d; padding-top:2rem; }
.wr-page-banner { background-image:linear-gradient(90deg,rgba(13,45,29,.8),rgba(13,45,29,.25)),url('assets/img/jungle-forest-path.webp'); }
.js2-about__hero { display:grid; grid-template-columns:46% 54%; min-height:630px; }
.js2-about__paper { display:flex; flex-direction:column; justify-content:center; background:#e7dac0; padding:clamp(2rem,6vw,6rem); }
.js2-about__paper h1 { color:#183a2e; font-size:clamp(3.5rem,6.3vw,7rem); line-height:1.05; margin:1rem 0; letter-spacing:-.07em; }
.js2-about__paper h1 em { font-style:italic; }
.js2-about__paper p { max-width:35ch; font-size:1.15rem; line-height:1.7; }
.js2-about__folio { font:700 .6rem var(--body); letter-spacing:.19em; margin-top:3rem; color:#596b55; }
.js2-about__photo { position:relative; background:url('assets/img/jungle-leaf-detail.webp') 45% center/cover; }
.js2-about__photo span { position:absolute; bottom:2.5rem; left:2.5rem; color:#f4ead4; font:700 .6rem var(--body); letter-spacing:.2em; }
.js2-about__manifesto { padding:clamp(5rem,9vw,9rem) 0; background:#183a2e; color:#f3ead6; }
.js2-about__manifesto .js2-label { color:#dfc798; }
.js2-about__manifesto .wrap>div { display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,7vw,7rem); margin-top:2rem; }
.js2-about__manifesto p { font:500 clamp(2.7rem,5.3vw,5.8rem)/1.13 var(--display); letter-spacing:-.05em; margin:0; }
.js2-about__manifesto p em { color:#d3b87d; }
.js2-about__manifesto ol { list-style:none; padding:0; margin:0; align-self:end; border-top:1px solid #82947f; }
.js2-about__manifesto li { display:flex; gap:1.5rem; border-bottom:1px solid #82947f; padding:1rem 0; }
.js2-about__manifesto li b { color:#d3b87d; font:500 .7rem var(--display); }
@media(max-width:950px) {
.js-header__edition { display:none; }
.js-header .js-header__top { grid-template-columns:1fr auto; }
.js-header .js-header__logo { justify-self:start; }
.js-header__nav .wrap { justify-content:flex-start; overflow-x:auto; }
.js2-hero { grid-template-columns:1fr; }
.js2-hero__paper { min-height:680px; }
.js2-hero__photo { min-height:390px; }
.js2-intro__grid { grid-template-columns:1fr; gap:1.5rem; }
.js2-standard { grid-template-columns:1fr; }
.js2-standard__image { min-height:450px; }
.js2-about__hero { grid-template-columns:1fr; }
.js2-about__paper { min-height:500px; }
.js2-about__photo { min-height:380px; }
.js2-about__manifesto .wrap>div { grid-template-columns:1fr; }
.js-footer-intro { grid-template-columns:1fr 2fr; }
.js-footer-intro>a { grid-column:2; justify-self:start; }
.woocommerce ul.products,.woocommerce-page ul.products { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:650px) {
.js-header .js-header__top { gap:.5rem; padding-top:.8rem; padding-bottom:.8rem; }
.js-header .site-logo__name { font-size:1.35rem; }
.js-header .header-actions { gap:.7rem; }
.js-header .header-login { display:none; }
.js-header__nav .wrap { gap:1.25rem; }
.js2-hero__paper { min-height:640px; }
.js2-hero__logo { max-height:190px; margin:2rem auto 1rem; }
.js2-hero h1 { font-size:clamp(3.4rem,12vw,5rem); }
.js2-hero__photo { min-height:330px; }
.js2-marquee { text-align:left; }
.js2-index__rows a { grid-template-columns:36px minmax(0,1fr) 25px; min-height:100px; }
.js2-index__meta { display:none; }
.js2-index__name { font-size:clamp(1.55rem,7vw,2.4rem); }
.js2-section-head { display:block; }
.js2-section-head>.js2-inline-link { margin-top:1rem; }
.js2-standard__content { padding:4rem 1.5rem; }
.js-footer-intro { display:block; }
.js-footer-intro h2 { margin:1.5rem 0; }
.js-footer-wordmark { font-size:12vw; }
.woocommerce ul.products,.woocommerce-page ul.products { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:1.5rem .8rem; }
.woocommerce ul.products li.product,.woocommerce-page ul.products li.product { max-width:none !important; width:100% !important; }
.woocommerce ul.products li.product .button { align-self:stretch; }
.js2-commerce .wr-cat-hero { padding:2rem 1.5rem; }
}
@media(max-width:420px) {
.woocommerce ul.products,.woocommerce-page ul.products { grid-template-columns:1fr !important; }
}
/* Modern botanical typography and changing editorial rhythm. */
:root { --display:'DM Sans',Arial,sans-serif; --body:'DM Sans',Arial,sans-serif; --headline:'Cinzel',Georgia,serif; }
body { font-family:var(--body); }
h1,h2,h3,h4 { font-weight:700; letter-spacing:-.065em; }
.js2-home h1,.js2-home h2,.js2-home h3 { font-weight:700; letter-spacing:-.075em; }
.js2-home em,.js2-shop-mast em,.js2-about__paper h1 em,.js2-about__manifesto em,.js-footer-intro h2 em,.js2-intro h2 em,.js2-fieldnote p em { font-family:var(--headline); font-style:normal; font-weight:700; letter-spacing:-.02em; text-transform:uppercase; }
.js-header .site-logo__name { font-family:var(--display); font-weight:700; letter-spacing:-.045em; font-size:clamp(1.55rem,2.5vw,2.3rem); }
.js-header .site-logo__name span { letter-spacing:-.045em; }
.js-header .site-logo__name small { font-family:var(--body); font-size:.45rem; font-weight:700; letter-spacing:.46em; }
.js2-hero h1 { font-size:clamp(3.5rem,5.8vw,6.8rem); line-height:.98; }
.js2-hero__topline,.js2-label,.js2-index__number,.js2-index__meta { letter-spacing:.11em; }
.js2-marquee div { font:700 clamp(.68rem,1vw,.82rem) var(--body); letter-spacing:.15em; }
/* The opening note is a single typographic pause, not another split panel. */
.js2-intro { padding:clamp(6rem,11vw,11rem) 0; background:#f4eedf; text-align:center; }
.js2-intro__grid { display:block; max-width:1000px; }
.js2-intro__grid>.js2-label { padding:0; margin-bottom:2.2rem; }
.js2-intro h2 { font-size:clamp(3.6rem,8vw,8.2rem); line-height:.96; margin:0 auto 2rem; }
.js2-intro p { margin:0 auto 1.8rem; max-width:48ch; font-size:clamp(1rem,1.35vw,1.15rem); }
.js2-intro .js2-inline-link { margin:auto; }
/* Dark, open catalogue index creates a clear visual break. */
.js2-index { background:#10281f; color:#eee8d9; padding:clamp(4.5rem,8vw,8rem) 0; }
.js2-index .js2-label { color:#c9ae7b; }
.js2-index .js2-section-head h2 { color:#f0eadc; }
.js2-index .js2-section-head p { color:#c8d0c2; }
.js2-index__rows { border-color:#607365; }
.js2-index__rows a { color:#f0eadc; border-color:#607365; min-height:110px; }
.js2-index__rows a:hover { background:#234333; }
.js2-index__name { font-family:var(--display); font-weight:700; letter-spacing:-.07em; }
.js2-index__number,.js2-index__meta { color:#c7b48d; }
.js2-index__all { color:#f0eadc; }
/* One cinematic image, followed by an information rail instead of another 50/50 split. */
.js2-standard { display:block; min-height:0; background:#ded3b9; }
.js2-standard__image { min-height:clamp(360px,54vw,690px); background-position:center 42%; }
.js2-standard__image span { bottom:2rem; left:clamp(1.25rem,5vw,5rem); }
.js2-standard__content { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr); gap:clamp(2rem,7vw,7rem); align-items:end; padding:clamp(3.5rem,7vw,7rem) clamp(1.25rem,5vw,5rem); background:#ded3b9; color:#193a2d; }
.js2-standard__content .js2-label { color:#795c39; }
.js2-standard h2 { color:#193a2d; font-size:clamp(3.3rem,6vw,6.5rem); line-height:.98; }
.js2-standard p { max-width:55ch; margin:1.4rem 0 1.5rem; line-height:1.65; }
.js2-standard .js2-inline-link { color:#193a2d; }
.js2-standard__steps { margin:0; border-color:#7f8e79; }
.js2-standard__steps div { justify-content:space-between; border-color:#7f8e79; padding:1rem 0; }
.js2-standard__steps b { font:700 .7rem var(--body); color:#795c39; }
.js2-standard__steps span { font-size:.94rem; text-align:right; }
/* Compact, image-first catalog cards. WooCommerce links and cart actions stay native. */
.woocommerce ul.products,.woocommerce-page ul.products { display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:1.5rem !important; clear:both; margin:0 0 2rem; }
.woocommerce ul.products::before,.woocommerce ul.products::after,.woocommerce-page ul.products::before,.woocommerce-page ul.products::after { content:none; }
.woocommerce ul.products li.product,.woocommerce-page ul.products li.product,.js2-products .woocommerce ul.products li.product {
display:flex !important; flex-direction:column; align-items:stretch; min-width:0; width:100% !important; max-width:none !important;
margin:0 !important; padding:1rem !important; border:1px solid #d5ddcd !important; border-radius:4px; background:#fcfcf5 !important; box-shadow:none;
transition:border-color .18s ease,box-shadow .18s ease;
}
.woocommerce ul.products li.product:hover,.woocommerce-page ul.products li.product:hover { transform:none; border-color:#a5b29b !important; box-shadow:0 6px 18px rgba(25,58,45,.05); }
.woocommerce ul.products li.product::before,.woocommerce-page ul.products li.product::before,.woocommerce ul.products li.product::after,.woocommerce-page ul.products li.product::after { display:none !important; content:none; }
.woocommerce ul.products li.product .woocommerce-loop-product__link,.woocommerce-page ul.products li.product .woocommerce-loop-product__link { display:flex !important; flex-direction:column; flex:1; min-width:0; text-decoration:none; }
.woocommerce ul.products li.product a img,.woocommerce-page ul.products li.product a img { flex:none; width:100%; height:auto; aspect-ratio:1; object-fit:contain; padding:.75rem; margin:0 0 1.1rem; border:1px solid #edf0e7; border-radius:2px; background:#fff; }
.woocommerce ul.products li.product .woocommerce-loop-product__title,.woocommerce-page ul.products li.product .woocommerce-loop-product__title { min-height:4.05em; padding:0 !important; margin:0 0 .75rem; font:600 1rem/1.35 var(--body); letter-spacing:-.025em; color:#193a2d; overflow-wrap:break-word; }
.woocommerce ul.products li.product .price,.woocommerce-page ul.products li.product .price { margin:auto 0 0 !important; color:#193a2d; font:700 1rem/1.5 var(--body); }
.woocommerce ul.products li.product .price del { color:#697360; font-weight:400; }
.woocommerce ul.products li.product .price ins { text-decoration:none; }
.woocommerce ul.products li.product .wr-batch { margin:.35rem 0 0; color:#697360; font-size:.8rem; }
.woocommerce ul.products li.product>.button,.woocommerce-page ul.products li.product>.button { align-self:stretch; width:100% !important; min-width:0; min-height:46px; margin:1rem 0 0 !important; padding:.8rem .65rem !important; border:1px solid #294c3b !important; border-radius:2px; background:transparent !important; color:#193a2d !important; font:600 .875rem/1.3 var(--body) !important; letter-spacing:0; text-transform:none; text-align:center; }
.woocommerce ul.products li.product>.button:hover,.woocommerce-page ul.products li.product>.button:hover { background:#193a2d !important; color:#f6f6e9 !important; }
.woocommerce ul.products li.product a:focus-visible { outline:2px solid #8d6f46; outline-offset:4px; }
.woocommerce ul.products li.product>.added_to_cart { margin-top:.7rem; text-align:center; font-size:.875rem; text-decoration:underline; text-underline-offset:3px; }
.woocommerce ul.products li.product .onsale { top:1.5rem; left:1.5rem; right:auto; min-height:0; min-width:0; margin:0; padding:.3rem .55rem; border-radius:2px; background:#193a2d; color:#f6f6e9; font:600 .75rem/1.4 var(--body); }
@media(max-width:1050px) {
.woocommerce ul.products,.woocommerce-page ul.products { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
}
@media(max-width:750px) {
.woocommerce ul.products,.woocommerce-page ul.products { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:1rem !important; }
.woocommerce ul.products li.product,.woocommerce-page ul.products li.product,.js2-products .woocommerce ul.products li.product { padding:.7rem !important; }
.woocommerce ul.products li.product a img,.woocommerce-page ul.products li.product a img { padding:.35rem; margin-bottom:.85rem; }
.woocommerce ul.products li.product .woocommerce-loop-product__title,.woocommerce-page ul.products li.product .woocommerce-loop-product__title { font-size:.9rem; }
.woocommerce ul.products li.product .price,.woocommerce-page ul.products li.product .price { font-size:.9rem; }
.woocommerce ul.products li.product>.button,.woocommerce-page ul.products li.product>.button { font-size:.8rem !important; }
}
@media(max-width:359px) {
.woocommerce ul.products,.woocommerce-page ul.products { grid-template-columns:1fr !important; }
}
.js2-products { background:#f4eedf; }
.js2-products .js2-section-head h2 { font-size:clamp(3rem,6vw,6rem); }
.js2-fieldnote p { font-weight:700; letter-spacing:-.07em; }
.js-footer-wordmark { font-weight:700; letter-spacing:-.09em; }
@media(max-width:800px) {
.js2-standard__content { grid-template-columns:1fr; }
}
@media(max-width:650px) {
.js-header .site-logo__name { font-size:1.55rem; }
.js2-intro h2 { font-size:clamp(3.3rem,14vw,5.5rem); }
.js2-standard__image { min-height:390px; }
}
/* Brand artwork belongs in the site header; the hero carries the message. */
.js-header .js-header__top { min-height:128px; }
.js-header .js-header__logo { display:block; line-height:0; }
.js-header__brandmark { display:block; width:clamp(210px,23vw,280px); height:auto; max-height:112px; object-fit:contain; mix-blend-mode:multiply; }
.js2-link-button span,.js2-inline-link span,.js2-index__arrow,.js2-fieldnote a span,.js-footer-intro>a span { font-family:Arial,sans-serif; font-size:1.35em; font-weight:400; line-height:.7; transition:transform .2s ease; }
.js2-link-button:hover span,.js2-inline-link:hover span,.js2-index__rows a:hover .js2-index__arrow,.js2-fieldnote a:hover span,.js-footer-intro>a:hover span { transform:translateX(3px); }
/* Render the current chevron even when WP Engine briefly serves older cached link markup. */
.js2-link-button span,.js2-inline-link span,.js2-index__arrow,.js2-fieldnote a span,.js-footer-intro>a span { font-size:0 !important; }
.js2-link-button span::after,.js2-inline-link span::after,.js2-index__arrow::after,.js2-fieldnote a span::after,.js-footer-intro>a span::after { content:'›'; display:inline-block; font:400 20px/.7 Arial,sans-serif; }
/* Quality page: retain editorial information and links, replace the old layout. */
.js-quality-renewed { background:#f5f4e9; color:#12362a; }
.js-quality-renewed__hero { padding:clamp(3.5rem,7vw,7rem) 0; background:linear-gradient(90deg,rgba(8,29,22,.9),rgba(8,29,22,.15)),url('assets/img/jungle-speciosa-banner.webp') center/cover; color:#f5f4e9; }
.js-quality-renewed h1,.js-quality-renewed h2 { font-family:var(--headline); font-weight:700; letter-spacing:-.02em; line-height:1.16; }
.js-quality-renewed__hero h1 { color:inherit; font-size:clamp(2.6rem,5.5vw,5.5rem); margin:0 0 1.5rem; }
.js-quality-renewed__hero p { color:#e5e9dd; font-size:1.1rem; line-height:1.7; }
.js-quality-renewed__hero a { display:inline-flex; gap:2rem; margin-top:1rem; border:1px solid #c6cfba; padding:.85rem 1.15rem; color:inherit; text-decoration:none; }
.js-quality-renewed__body .entry-content { max-width:none; }
.js-quality-renewed .wr-quality section { padding:clamp(2.5rem,5vw,5rem) 0; border-bottom:1px solid #c6cebf; }
.js-quality-renewed .wr-quality h2 { font-size:clamp(1.9rem,3vw,3rem); color:#12362a; margin:0 0 1rem; }
.js-quality-renewed .wr-quality h3 { font:600 1.15rem/1.4 var(--body); color:#12362a; letter-spacing:0; }
.js-quality-renewed .wr-quality p { color:#536457; font-family:var(--body); font-size:1rem; line-height:1.75; }
.js-quality-renewed .wr-q-split { display:block; }
.js-quality-renewed .wr-q-split>div { display:grid; grid-template-columns:1fr 1.3fr; gap:clamp(2rem,5vw,5rem); align-items:start; }
.js-quality-renewed .wr-q-split>p { display:none; }
.js-quality-renewed .wr-q-lede { max-width:25ch; margin:0; }
.js-quality-renewed .wr-q-lede em { display:block; font:700 clamp(1.5rem,2.5vw,2.2rem)/1.3 var(--headline); color:#12362a; margin-bottom:.8rem; }
.js-quality-renewed .wr-q-sub { max-width:70ch; margin-top:0; }
.js-quality-renewed .wr-q-steps { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 3rem; counter-reset:none; }
.js-quality-renewed .wr-q-steps::before,.js-quality-renewed .wr-q-num { display:none; }
.js-quality-renewed .wr-q-steps li { display:block; width:auto; max-width:none; grid-column:auto; justify-self:stretch; border-top:1px solid #becab8; padding:1.5rem 0; }
.js-quality-renewed .wr-q-steps p { max-width:none; }
.js-quality-renewed .wr-q-steps li:nth-child(even) { margin-left:0; padding-left:0; padding-right:0; }
.js-quality-renewed .wr-q-panels { grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.js-quality-renewed .wr-q-panel { background:#143629; border:0; border-radius:0; box-shadow:none; padding:clamp(1.2rem,2.5vw,2rem); }
.js-quality-renewed .wr-q-panel h3 { color:#f5f4e9; }
.js-quality-renewed .wr-q-panel p { color:#d3ddca; font-size:.95rem; }
.js-quality-renewed .wr-quality .wr-img { width:100%; max-height:280px; object-fit:cover; border-radius:0; box-shadow:none; }
.js-quality-renewed .wr-q-always { grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem 3rem; }
.js-quality-renewed .wr-q-always h3::before { display:none; }
.js-quality-renewed .wr-q-always>div { border-left:2px solid #ab9661; padding-left:1.2rem; }
.js-quality-renewed .wr-quality .wr-q-quote { font:700 clamp(1.7rem,3vw,2.8rem)/1.3 var(--headline); color:#12362a; max-width:30ch; }
.js-quality-renewed .wr-q-quote::before,.js-quality-renewed .wr-q-quote::after,.js-quality-renewed .wr-eyebrow { display:none; }
.js-quality-renewed__support { background:#102b21; color:#f5f4e9; padding:3rem 0; }
.js-quality-renewed__support>.wrap { display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.js-quality-renewed__support h2 { color:inherit; font-size:clamp(1.5rem,2.5vw,2.3rem); margin:0 0 .8rem; }
.js-quality-renewed__support p { color:#d3ddca; max-width:55ch; margin:0; }
.js-quality-renewed__support a { display:inline-flex; gap:2rem; flex-shrink:0; border:1px solid #c6cfba; padding:.9rem 1.2rem; color:inherit; text-decoration:none; }
.js-quality-renewed a:focus-visible { outline:2px solid #aa8c4c; outline-offset:4px; }
@media(max-width:700px) {
.js-quality-renewed .wr-q-split>div,.js-quality-renewed .wr-q-steps,.js-quality-renewed .wr-q-panels,.js-quality-renewed .wr-q-always { grid-template-columns:1fr; }
.js-quality-renewed__support>.wrap { flex-direction:column; align-items:flex-start; }
}
/* About: panoramic introduction and image-led principles. */
.js-about-renewed { background:#f5f4e9; color:#12362a; }
.js-about-renewed h1,.js-about-renewed h2 { font-family:var(--headline); font-weight:700; letter-spacing:-.025em; line-height:1.12; }
.js-about-renewed p { line-height:1.75; }
.js-about-renewed__hero { background:linear-gradient(90deg,rgba(8,29,22,.82),rgba(8,29,22,.12)),url('assets/img/jungle-canopy-scene.webp') center 48%/cover; color:#f5f4e9; padding:clamp(4rem,8vw,8rem) 0; }
.js-about-renewed__hero h1 { color:inherit; font-size:clamp(2.8rem,6vw,6rem); max-width:13ch; margin:0 0 1.5rem; }
.js-about-renewed__hero h1 span { display:block; font:500 clamp(1rem,1.7vw,1.5rem)/1.5 var(--body); text-transform:uppercase; letter-spacing:.12em; margin-bottom:1rem; }
.js-about-renewed__hero p { color:#edf0e5; font-size:clamp(1rem,1.5vw,1.2rem); margin:0; }
.js-about-renewed__intro { display:grid; grid-template-columns:1fr 1.2fr; gap:clamp(2rem,6vw,6rem); padding-top:clamp(3rem,6vw,6rem); padding-bottom:clamp(3rem,6vw,6rem); }
.js-about-renewed h2 { font-size:clamp(2rem,3.5vw,3.4rem); margin:0 0 1.3rem; color:inherit; }
.js-about-renewed__intro p { max-width:54ch; color:#536457; }
.js-about-renewed__intro .js-about-renewed__lead { font-size:clamp(1.25rem,2vw,1.65rem); line-height:1.5; color:#12362a; margin-top:0; }
.js-about-renewed__principles { background:#102b21; color:#f5f4e9; padding:clamp(3rem,5vw,5rem) 0; }
.js-about-renewed__principles-grid { display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(2rem,6vw,6rem); align-items:center; }
.js-about-renewed__leaf { height:100%; min-height:430px; }
.js-about-renewed__leaf img { display:block; width:100%; height:100%; max-height:680px; object-fit:cover; }
.js-about-renewed dl { margin:1.5rem 0; }
.js-about-renewed dl>div { border-top:1px solid #526658; padding:1.2rem 0; }
.js-about-renewed dt { font:600 1.1rem/1.4 var(--body); margin-bottom:.45rem; }
.js-about-renewed dd { margin:0; color:#cbd5c8; line-height:1.6; max-width:48ch; }
.js-about-renewed__link { display:inline-flex; gap:2rem; color:#f5f4e9; text-decoration:none; border-bottom:1px solid #a9b79d; padding-bottom:.5rem; }
.js-about-renewed__next { display:flex; align-items:center; justify-content:space-between; gap:2rem; padding-top:clamp(3rem,5vw,5rem); padding-bottom:clamp(3rem,5vw,5rem); }
.js-about-renewed__next h2 { font-size:clamp(1.8rem,2.8vw,2.6rem); }
.js-about-renewed__next p { color:#536457; margin-bottom:0; }
.js-about-renewed__actions { display:flex; flex-wrap:wrap; gap:1rem; }
.js-about-renewed__actions a { display:inline-flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:.9rem 1.2rem; border:1px solid #12362a; color:#12362a; text-decoration:none; font-weight:500; }
.js-about-renewed__actions a:first-child { background:#12362a; color:#f5f4e9; }
.js-about-renewed a:hover { text-decoration:underline; text-underline-offset:4px; }
.js-about-renewed a:focus-visible { outline:2px solid #aa8c4c; outline-offset:5px; }
@media(max-width:700px) {
.js-about-renewed__intro,.js-about-renewed__principles-grid { grid-template-columns:1fr; gap:1.8rem; }
.js-about-renewed__leaf { min-height:0; height:260px; }
.js-about-renewed__next { align-items:flex-start; flex-direction:column; }
.js-about-renewed__hero { background-position:60% center; }
}
/* One site-wide content edge, matching the centered .wrap used by the collection index. */
:root { --site-content-edge:max(clamp(1.25rem,5vw,5rem),calc((100vw - 1280px)/2)); }
.js2-home .js2-hero__paper { padding-left:var(--site-content-edge); }
.js2-home .js2-hero__photo-label { right:var(--site-content-edge); }
.js2-home .js2-standard__image span { left:var(--site-content-edge); }
.js2-home .js2-standard__content { padding-left:var(--site-content-edge); padding-right:var(--site-content-edge); }
.js2-about__paper { padding-left:var(--site-content-edge); }
.js2-about__photo span { left:auto; right:var(--site-content-edge); text-align:right; }
.js2-hero__copy { flex:1; display:flex; flex-direction:column; justify-content:center; margin:0; }
.js2-hero__copy .js2-link-button { align-self:flex-start; }
.js2-hero__folio { margin-top:0; }
/* Simplified hierarchy after removing repetitive editorial eyebrows. */
.js-header .js-header__logo { grid-column:2; }
.js-header .header-actions { grid-column:3; }
.js2-section-head h2,.js2-standard h2,.js2-shop-mast h1,.js2-about__paper h1 { margin-top:0; }
.js2-about__manifesto .wrap>div { margin-top:0; }
.js-footer-intro { grid-template-columns:2fr 1fr; }
@media(max-width:950px) {
.js-header .js-header__top { min-height:110px; }
.js-header__brandmark { width:clamp(180px,29vw,240px); }
.js-header .js-header__logo { grid-column:1; }
.js-header .header-actions { grid-column:2; }
.js2-about__paper { padding-right:var(--site-content-edge); }
.js-footer-intro { grid-template-columns:2fr 1fr; }
.js-footer-intro>a { grid-column:auto; }
}
@media(max-width:650px) {
.js-header .js-header__top { min-height:86px; }
.js-header__brandmark { width:clamp(156px,43vw,205px); }
}
.compliance-strip { padding:.5rem 0; }
.js-topbar { display:flex; justify-content:space-between; align-items:center; gap:1rem; text-align:left; }
.js-topbar>span:last-child { text-align:right; }
.js-header .header-cart a { display:flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; gap:.3rem; padding:.25rem; border:0; }
.js-header .header-cart a:hover { color:#677943; }
.js-header .header-cart a:focus-visible { outline:2px solid #8d6f46; outline-offset:3px; }
.js-header .header-cart svg { flex:none; }
.js-header .header-cart a span { margin:0; font-size:.65rem; letter-spacing:0; }
.footer-contact a { overflow-wrap:anywhere; }
@media(max-width:650px) {
.compliance-strip .js-topbar { font-size:.55rem; letter-spacing:.07em; line-height:1.5; gap:.75rem; }
.js-topbar>span:first-child { white-space:nowrap; }
.js-topbar>span:last-child { max-width:23ch; text-wrap:balance; }
}
/* Site-wide pairing: calm sans-serif support and clean serif display headings. */
main h1,main h2,.entry-content h1,.entry-content h2,.wr-page-banner h1,
.woocommerce div.product .product_title,.woocommerce div.product .related.products>h2,
.woocommerce div.product .woocommerce-tabs h2,.wr-cat-body h2 {
font-family:var(--headline); font-weight:700; font-style:normal; letter-spacing:-.01em; line-height:1.2; text-shadow:none; overflow-wrap:break-word;
}
.js2-commerce>header.js-collection-mast h1 { font-family:var(--headline); font-size:clamp(2rem,4vw,4.2rem); letter-spacing:-.01em; line-height:1.15; }
.wr-page-banner h1 { font-size:clamp(2rem,4vw,4rem); }
.woocommerce div.product .product_title { font-size:clamp(1.65rem,2.7vw,2.8rem); }
.js2-about__paper h1,.js2-about__manifesto p { font-family:var(--body); font-weight:500; letter-spacing:0; }
.js2-about__paper h1 em,.js2-about__manifesto em,.js2-shop-mast em { font-family:var(--headline); font-weight:700; font-style:normal; letter-spacing:-.01em; line-height:1.15; }
.js2-about__paper h1 { font-size:clamp(2.4rem,4.4vw,4.8rem); }
.js2-about__manifesto p { font-size:clamp(2rem,3.6vw,3.8rem); line-height:1.25; }
.woocommerce div.product form.cart .variations td.label label { font-family:var(--body); }
.wr-q-quote,.wr-q-promise { font-style:normal; }
/* Soft ivory sampled from the displayed logo background. */
:root { --jungle-paper:#f6f6e9; --jungle-paper-rgb:246,246,233; }
body,body.wr-world-page,.js-header,.js2-about__paper { background:var(--jungle-paper); }
.js-header__brandmark { mix-blend-mode:darken; }
/* Compact utility footer; no oversized promo or clipped display wordmark. */
.site-footer { background:var(--jungle-paper); color:#536457; border-top:1px solid #d3d9cd; }
.site-footer h4,.site-footer a { color:#193c2e; }
.site-footer a:hover { color:#677943; }
.site-footer .footer-disclaimer { color:#657162; border-color:#c6cebf; }
.site-footer .js-footer-logo { display:block; width:220px; max-width:100%; margin:0 0 1.25rem; }
.site-footer .js-footer-logo img { display:block; width:100%; height:auto; mix-blend-mode:darken; }
.site-footer .js-footer-logo:focus-visible { outline:2px solid #8d6f46; outline-offset:5px; }
/* Shared full-bleed collection banners, with the same content edge as products. */
.js2-commerce>.js-commerce-breadcrumbs { padding-top:clamp(1.5rem,2.5vw,2.5rem); padding-bottom:1.5rem; }
.js-commerce-breadcrumbs .wr-breadcrumb { margin:0; line-height:1.6; }
.js2-commerce>header.js-collection-mast {
width:100%; min-height:360px; margin:0 0 2.5rem; padding:clamp(3rem,5vw,5rem) 0;
display:flex; align-items:center; border:0; border-radius:0; box-shadow:none;
background-color:#102c22;
background-image:linear-gradient(90deg,rgba(7,27,19,.88) 0%,rgba(7,27,19,.7) 48%,rgba(7,27,19,.2) 100%),url('assets/img/jungle-canopy-scene.webp');
background-size:cover; background-position:center,center 47%; color:#f6f6e9;
}
.js-collection-mast>.wrap { width:100%; }
.js2-commerce>header.js-collection-mast h1 { max-width:24ch; margin:0 0 1.1rem; color:#f6f6e9; font-family:var(--headline); font-size:clamp(2rem,4vw,4.2rem); font-weight:700; line-height:1.15; letter-spacing:-.01em; overflow-wrap:break-word; }
.js2-commerce>header.js-collection-mast p { max-width:72ch !important; margin:0; color:#f0f0df; opacity:1; font-size:clamp(1rem,1.2vw,1.1rem); line-height:1.65; }
/* A quiet, practical filter bar and sorting row above the collection. */
.js2-commerce .bkh-shop-filters { margin:0 0 1.5rem; padding:1.25rem; border:1px solid #d5ddcd; border-radius:4px; background:#edf0e3; }
.js2-commerce .bkh-filter-heading { display:none; }
.js2-commerce .bkh-filter-fields { gap:1rem; }
.js2-commerce .bkh-filter-field span { color:#40543f; font-size:.8rem; font-weight:600; }
.js2-commerce .bkh-filter-field input,.js2-commerce .bkh-filter-field select { min-height:46px; border:1px solid #c3ceba; border-radius:2px; background:#fcfcf5; color:#193a2d; font-size:.9rem; }
.js2-commerce .bkh-filter-actions button { min-height:46px; padding:.8rem 1.2rem; border-radius:2px; font:600 .875rem/1.3 var(--body); letter-spacing:0; text-transform:none; }
.js2-commerce .woocommerce-result-count { display:flex; align-items:center; min-height:46px; margin:0 1rem 1.5rem 0; color:#596852; font-size:.875rem; }
.js2-commerce .woocommerce-ordering { margin:0 0 1.5rem; }
.js2-commerce .woocommerce-ordering select { min-height:46px; max-width:100%; padding:.6rem 2rem .6rem .85rem; border:1px solid #c3ceba; border-radius:2px; background:#fcfcf5; color:#193a2d; font:.875rem var(--body); }
.js2-commerce .woocommerce-ordering select:focus-visible { outline:2px solid #8d6f46; outline-offset:3px; }
.tax-product_cat .js2-commerce .bkh-filter-field { flex:0 1 320px; }
.js2-commerce nav.woocommerce-pagination ul { gap:.5rem; }
.js2-commerce nav.woocommerce-pagination ul li a,.js2-commerce nav.woocommerce-pagination ul li span { min-width:44px; min-height:44px; border:1px solid #c3ceba; border-radius:2px; background:transparent; color:#193a2d; }
.js2-commerce nav.woocommerce-pagination ul li span.current { border-color:#193a2d; background:#193a2d; color:#f6f6e9; }
.js2-commerce nav.woocommerce-pagination ul li a:hover { background:#e4ead9; }
@media(max-width:650px) {
.js2-commerce>.js-commerce-breadcrumbs { padding-top:1.75rem; padding-bottom:1.25rem; }
.js2-commerce>header.js-collection-mast { min-height:320px; padding:2.75rem 0; margin-bottom:2rem; background-position:center,72% center; background-image:linear-gradient(90deg,rgba(7,27,19,.85),rgba(7,27,19,.57)),url('assets/img/jungle-canopy-scene.webp'); }
.js2-commerce .bkh-shop-filters { padding:1rem; }
.js2-commerce .bkh-filter-fields { gap:.85rem; }
.js2-commerce .bkh-filter-field { flex:1 1 calc(50% - .5rem); }
.js2-commerce .bkh-filter-search { flex-basis:100%; }
.js2-commerce .bkh-filter-field input,.js2-commerce .bkh-filter-field select,.js2-commerce .woocommerce-ordering select { font-size:1rem; }
.js2-commerce .bkh-filter-actions { justify-content:flex-start; flex-wrap:wrap; }
.js2-commerce .woocommerce-result-count { min-height:0; margin:0 0 .75rem; float:none; }
.js2-commerce .woocommerce-ordering { float:none; width:100%; }
.js2-commerce .woocommerce-ordering select { width:100%; }
}