/* ============================================================
   UNDER THE MAHUA TREE — WordPress / WooCommerce additions

   assets/css/original.css is the design system, carried over from the
   single-file build and deliberately left untouched so it stays diffable
   against the source. Everything in this file exists for one of three reasons:

     1. WordPress markup differs from the hand-written markup (form rows,
        pagination, notices) and has to be dressed to match.
     2. The grid filter now hides cards rather than rebuilding them.
     3. Small things the static build never needed (skip link, toast).

   Nothing here restyles the design. If a rule here is fighting original.css,
   the rule here is wrong.
   ============================================================ */

/* ============================================================
   SMALL-SCREEN MENU

   original.css line 513 hides .nav-mid below 1024px, with the comment "fold the
   top nav links into the burger zone". The zone was reserved; the burger was
   never built, so on a phone or tablet the site had no navigation at all.

   Built here to the design's own rules: cream ground, Anton at display size,
   hairline rules between items, the same --ease curves and the same staggered
   --d reveal the rest of the site uses. Nothing invented, nothing borrowed
   from a framework.
   ============================================================ */

/* ---------- the button ---------- */
body.mahua .burger{
	display:none;
	position:relative;
	width:42px;height:42px;
	margin-right:-9px;margin-left:4px;
	padding:0;border:0;background:none;
	color:var(--ink);cursor:pointer;
}
body.mahua .burger span{
	position:absolute;left:10px;
	width:22px;height:1.5px;background:currentColor;
	transition:transform .45s var(--ease),opacity .3s var(--ease);
}
body.mahua .burger span:nth-child(1){transform:translateY(-4px)}
body.mahua .burger span:nth-child(2){transform:translateY(4px)}
body.mahua .burger[aria-expanded="true"] span:nth-child(1){transform:rotate(45deg)}
body.mahua .burger[aria-expanded="true"] span:nth-child(2){transform:rotate(-45deg)}
body.mahua .burger:focus-visible{outline:2px solid var(--pink-dk);outline-offset:2px}

body.mahua .nav-end{align-items:center;gap:14px}

/* ---------- the panel ---------- */
/* The panel sits BELOW the nav in the stack (nav is 90), not above it. That is
   deliberate and load-bearing: the bar has to stay on top so the burger — which
   is the close control once the panel is open — remains visible and tappable.
   Raise this above 90 and the menu traps the visitor, because a phone has no
   Escape key. */
body.mahua .menu{
	position:fixed;inset:0;z-index:85;
	background:var(--cream);
	transform:translateY(-100%);
	transition:transform .62s var(--ease);
	pointer-events:none;
	overflow-y:auto;
	-webkit-overflow-scrolling:touch;
	display:none;
}
body.mahua .menu.on{transform:none;pointer-events:auto}

body.mahua .menu-in{
	min-height:100%;
	display:flex;flex-direction:column;
	padding:calc(var(--nav) + clamp(26px,6vw,44px)) var(--gut) clamp(26px,6vw,40px);
}
body.mahua .menu-in > .eyebrow{display:block;margin-bottom:clamp(20px,5vw,34px)}

body.mahua .menu-nav{
	display:flex;flex-direction:column;
	margin:0 0 auto;
	border-top:var(--line);
}
body.mahua .menu-nav a{
	display:flex;align-items:baseline;gap:16px;
	padding:clamp(14px,3.4vw,20px) 0;
	border-bottom:var(--line);
	font-family:var(--display);font-weight:400;
	font-size:clamp(30px,8.6vw,52px);line-height:.98;
	text-transform:uppercase;letter-spacing:-.01em;
	color:var(--ink);
	opacity:0;transform:translateY(18px);
	transition:opacity .62s var(--ease-out) var(--d,0ms),
	           transform .62s var(--ease-out) var(--d,0ms),
	           color .3s var(--ease);
}
body.mahua .menu.on .menu-nav a{opacity:1;transform:none}
body.mahua .menu-nav a i{
	font-family:var(--body);font-style:normal;font-weight:600;
	font-size:11px;letter-spacing:.18em;color:var(--ink-55);
	min-width:24px;
}
body.mahua .menu-nav a[aria-current="page"]{color:var(--pink-dk)}
body.mahua .menu-nav a[aria-current="page"] i{color:var(--pink-dk)}
body.mahua .menu-nav a:active{color:var(--pink-dk)}

body.mahua .menu-foot{
	display:flex;align-items:center;justify-content:space-between;
	gap:18px;flex-wrap:wrap;
	margin-top:clamp(30px,7vw,50px);padding-top:clamp(18px,4vw,26px);
	border-top:var(--line);
	font-size:13px;
	opacity:0;transition:opacity .5s var(--ease) .36s;
}
body.mahua .menu.on .menu-foot{opacity:1}
body.mahua .menu-foot .socials{margin:0}

/* Only ever present where the bar has folded its links away. */
@media (max-width:1024px){
	body.mahua .burger{display:grid;place-items:center}
	body.mahua .menu{display:block}
}

/* Checkout drops the nav, so the menu goes with it. */
body.mahua[data-route="checkout"] .burger{display:none}

@media (prefers-reduced-motion:reduce){
	body.mahua .menu{transition-duration:.001ms}
	body.mahua .menu-nav a{opacity:1;transform:none;transition-duration:.001ms}
	body.mahua .menu-foot{opacity:1;transition-duration:.001ms}
}

/* ============================================================
   LAYOUT HARDENING

   This design is full-bleed: the nav is fixed, .pdp is a two-column grid that
   runs edge to edge, and every band spans the viewport. WordPress, the block
   editor and a great many plugins assume the opposite — that content sits in a
   centred column of a fixed width — and they say so in CSS that lands after the
   theme's own.

   When that happens the whole site collapses into a narrow strip down the
   middle: the product photo stops filling its half, the nav joins the document
   flow and leaves a band under itself, and links revert to browser blue.

   These rules make the theme's own containers immune. They are scoped to
   body.mahua so they can only ever affect this theme's markup, and they are
   deliberately narrow: full-bleed geometry, the fixed nav, and the media fill.
   Nothing here changes the design — it only stops other stylesheets changing it.
   ============================================================ */
body.mahua{
	max-width:none!important;
	width:auto!important;
	margin:0!important;
	padding:0!important;
	float:none!important;
}
body.mahua #app,
body.mahua #app > *,
body.mahua .nav,
body.mahua .foot,
body.mahua .co-bar{
	max-width:none!important;
	width:auto!important;
	float:none!important;
}
body.mahua #app > *{
	margin-left:0!important;
	margin-right:0!important;
}

/* The nav must overlay the page, not sit in the flow — otherwise every route
   gains a stray band between the bar and the content. */
body.mahua .nav{position:fixed!important}

/* The product photo fills its half of the grid. Core's `img{height:auto}`
   defeats the design's `height:100%` on some setups. */
body.mahua .pdp-media img,
body.mahua .pdp-media .ph{
	width:100%!important;
	height:100%!important;
	max-width:none!important;
	object-fit:cover!important;
}
body.mahua .card-media img{width:100%!important;height:100%!important;object-fit:cover!important}

/* Links carry the ink of whatever they sit in — the design uses colour for
   emphasis, never to mark a link. Restricted to links with no class of their
   own, so .tlink, .btn and .card-link keep their own treatment. */
body.mahua a:not([class]){color:inherit;text-decoration:none}
body.mahua .brand,
body.mahua .brand b,
body.mahua .nav-mid a{color:var(--ink)}

/* ============================================================
   FAIL-OPEN REVEALS

   original.css hides every reveal until JavaScript adds `.in`:

       [data-rev]{opacity:0;transform:translateY(26px)}
       .mask>span{transform:translateY(105%)}

   If theme.js is deferred, combined, minified badly or blocked — which any
   caching or "optimise JavaScript" plugin can do — those elements stay hidden
   and the page shows the visitor nothing, while the HTML is perfectly correct.
   On a product page that is the whole right column: title, price, description,
   Add to cart.

   The guard script in header.php puts `js` on <html> before any stylesheet
   loads, and removes it again if theme.js has not signalled within 3.5s. These
   rules key off that, so a broken script costs the animation and nothing else.

   Do not "simplify" this by deleting the :not(.js) rules. They are the reason
   a plugin conflict degrades instead of taking the shop down.
   ============================================================ */
html:not(.js) [data-rev]{opacity:1!important;transform:none!important}
html:not(.js) .mask>span{transform:none!important}
html:not(.js) #loader,
html:not(.js) #curtain{display:none!important}
html:not(.js) body{opacity:1!important}

/* Belt and braces: if the script runs but something later throws, theme.js
   still marks the document live, and this keeps the loader from sitting over
   the page forever. */
html.js body:not(.mahua-live) #loader{animation:mahua-loader-bail 0s linear 6s forwards}
@keyframes mahua-loader-bail{to{transform:translateY(-101%);visibility:hidden}}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
.skip{
  position:absolute;left:-9999px;top:0;z-index:300;
  background:var(--ink);color:var(--cream);padding:12px 20px;
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
}
.skip:focus{left:0}

/* ---------- filtered grid ----------
   The source build rebuilt .pgrid on every filter change. Rebuilding a
   WooCommerce loop over AJAX would cost a request and a flash, so cards are
   hidden instead — which means [hidden] has to beat .card{display:flex}. */
.card[hidden]{display:none!important}
.pgrid .empty-cat[hidden]{display:none!important}
/* .card:last-child drops its right border; with cards hidden the last *visible*
   card takes that over, or the grid grows a stray hairline. */
.card.is-last{border-right:0}
@media (min-width:641px) and (max-width:1024px){
  .card.is-last{border-right:0}
}

/* ---------- pagination (only drawn past the per-page ceiling) ---------- */
.shop-pages{padding:clamp(30px,4vw,60px) var(--gut);border-top:var(--line)}
.shop-pages ul{list-style:none;margin:0;padding:0;display:flex;gap:6px;justify-content:center}
.shop-pages a,.shop-pages span{
  display:grid;place-items:center;min-width:44px;height:44px;padding:0 12px;
  border:var(--line);font-size:12px;letter-spacing:.1em;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.shop-pages a:hover{background:var(--pink);border-color:var(--pink)}
.shop-pages .current{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ============================================================
   WOOCOMMERCE FORMS — dressed as the design's .f fields

   Woo prints  <p class="form-row f"><label>…</label><span><input></span></p>
   The source build printed  <div class="f"><input><label></div>
   so the floating label cannot use the sibling selector. Two mechanisms are
   used together: :has() where the browser supports it, and .is-focus/.is-filled
   classes set by checkout.js. Either alone is sufficient.
   ============================================================ */
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3{
  font-size:11px;font-family:var(--body);font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-55);
  padding-bottom:14px;margin:0 0 22px;border-bottom:var(--line);
}
.woocommerce-billing-fields,
.woocommerce-shipping-fields,
.woocommerce-additional-fields{margin:0 0 40px}

.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper{
  display:grid;grid-template-columns:1fr 1fr;gap:0 22px;
}
.form-row{position:relative;margin:0 0 26px;grid-column:1/-1;padding-top:16px}
.form-row.f-half{grid-column:span 1}
@media (max-width:640px){
  .woocommerce-billing-fields__field-wrapper,
  .woocommerce-shipping-fields__field-wrapper,
  .woocommerce-additional-fields__field-wrapper{grid-template-columns:1fr}
  .form-row.f-half{grid-column:1/-1}
}

.form-row label{
  position:absolute;left:0;top:30px;font-size:14px;color:var(--ink-55);
  pointer-events:none;transition:transform .4s var(--ease),font-size .4s var(--ease),color .4s;
}
.form-row label .required{color:var(--pink-dk);text-decoration:none;border:0}
.form-row .woocommerce-input-wrapper{display:block;width:100%}

.form-row input[type=text],
.form-row input[type=email],
.form-row input[type=tel],
.form-row input[type=password],
.form-row input[type=number],
.form-row textarea,
.form-row select,
.form-row .select2-selection{
  width:100%;padding:14px 0 12px;background:none;border:0;border-bottom:var(--line);
  border-radius:0;font:inherit;font-size:16px;color:var(--ink);appearance:none;
}
.form-row textarea{min-height:96px;resize:vertical}
.form-row input:focus,.form-row textarea:focus,.form-row select:focus{
  outline:0;border-bottom-color:var(--pink-dk);
}

/* raised label */
.form-row.is-focus label,
.form-row.is-filled label,
.form-row:has(input:focus) label,
.form-row:has(textarea:focus) label,
.form-row:has(select) label,
.form-row:has(input:not(:placeholder-shown)) label{
  transform:translateY(-22px);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-55);
}
.form-row.is-focus label,
.form-row:has(input:focus) label,
.form-row:has(textarea:focus) label{color:var(--pink-dk)}

/* a select always has a value, so its label lives permanently in the raised slot */
.form-row select{cursor:pointer}
.form-row.mahua-select::after{
  content:"";position:absolute;right:2px;bottom:20px;width:7px;height:7px;pointer-events:none;
  border-right:1.5px solid var(--ink-55);border-bottom:1.5px solid var(--ink-55);transform:rotate(45deg);
}

/* Woo's validation states, in the design's own ink */
.woocommerce-invalid input,
.woocommerce-invalid select,
.woocommerce-invalid .select2-selection{border-bottom-color:var(--pink-dk)!important}
.woocommerce-validated input{border-bottom-color:var(--rule)}
.form-row .description{font-size:12px;color:var(--ink-55);margin-top:8px}

/* select2, when Woo loads it for country/state */
.select2-container--default .select2-selection--single{
  border:0;border-bottom:var(--line);border-radius:0;height:auto;background:none;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  padding:14px 0 12px;line-height:1.2;color:var(--ink);font-size:16px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{top:auto;bottom:14px;right:0}
.select2-dropdown{border:var(--line);border-radius:0;background:var(--cream)}
.select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--pink);color:var(--ink)}

/* ============================================================
   PAYMENT — Woo's gateway list, drawn as the design's .paytabs strip
   ============================================================ */
.co-pay{border:0;padding:0;margin:0 0 40px}
#mahuaPayment #payment{background:none;border-radius:0}
.wc_payment_methods{
  list-style:none;margin:0 0 26px;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));
  gap:1px;background:var(--rule);border:var(--line);
}
.wc_payment_methods > li{background:var(--band,var(--cream));margin:0;position:relative}
.wc_payment_methods > li > input[type=radio]{
  position:absolute;opacity:0;width:100%;height:100%;top:0;left:0;margin:0;cursor:pointer;z-index:2;
}
.wc_payment_methods > li > label{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:14px 10px;font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-55);cursor:pointer;text-align:center;
  transition:background .35s var(--ease),color .35s var(--ease);
}
.wc_payment_methods > li > label img{max-height:20px;width:auto;display:block;margin:2px auto 0}
.wc_payment_methods > li:hover > label{color:var(--ink)}
.wc_payment_methods > li > input[type=radio]:checked + label{background:var(--ink);color:var(--paper)}
.wc_payment_methods > li > input[type=radio]:focus-visible + label{outline:2px solid var(--pink-dk);outline-offset:-2px}

/* the gateway's own description / fields panel, below the strip */
.wc_payment_methods .payment_box{
  grid-column:1/-1;background:var(--band,var(--cream));
  font-size:12px;line-height:1.55;color:var(--ink-55);
  padding:0 0 22px;margin:0;
}
.wc_payment_methods .payment_box p{margin:0 0 10px}
.wc_payment_methods .payment_box p:last-child{margin:0}
.wc_payment_methods .payment_box::before{display:none}
.woocommerce-notice--info,.woocommerce-info{font-size:12.5px;color:var(--ink-55)}

.woocommerce-terms-and-conditions-wrapper{margin:0 0 22px;font-size:12px;color:var(--ink-55)}
.woocommerce-terms-and-conditions-wrapper a{border-bottom:1px solid var(--rule)}
.woocommerce-privacy-policy-text{font-size:11.5px;line-height:1.5;color:var(--ink-55)}
.woocommerce-privacy-policy-text p{margin:0 0 10px}

/* The place-order button is moved into the summary column by checkout.js and
   inherits .btn.btn--wide there. Hide the original slot so nothing jumps. */
#payment .form-row.place-order{margin:0;padding:0}
#payment .place-order .button[name="woocommerce_checkout_place_order"]{display:none}
#mahuaPlace .btn{margin-top:26px}
#mahuaPlace .btn[disabled]{opacity:.32;pointer-events:none}

/* ---------- notices ---------- */
.woocommerce-notices-wrapper:empty{display:none}
.woocommerce-error,.woocommerce-message,.woocommerce-info{
  list-style:none;margin:0 0 22px;padding:16px 20px;
  border:var(--line);background:var(--cream-2);
  font-size:13px;line-height:1.55;color:var(--ink);
}
.woocommerce-error{border-color:var(--pink-dk)}
.woocommerce-error li{margin:0 0 6px}
.woocommerce-error li:last-child{margin:0}
.woocommerce-message .button,.woocommerce-error .button{display:none}
.co-form .woocommerce-notices-wrapper{margin-bottom:8px}

/* ---------- order received (the overlay does the talking) ---------- */
body.order-received .woocommerce-order{padding:calc(var(--nav) + var(--sec)) var(--gut) var(--sec)}
body.order-received .woocommerce-order h2{font-size:clamp(24px,3vw,40px);margin:38px 0 18px}
body.order-received .woocommerce-order-overview{
  list-style:none;margin:0 0 34px;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1px;background:var(--rule);border:var(--line);
}
body.order-received .woocommerce-order-overview li{background:var(--band,var(--cream));padding:18px 16px;font-size:14px}
body.order-received .woocommerce-order-overview li strong{display:block;font-family:var(--display);font-size:22px;margin-top:6px}
body.order-received table{width:100%;border-collapse:collapse;font-size:14px}
body.order-received table th,body.order-received table td{
  text-align:left;padding:14px 0;border-bottom:1px solid var(--rule);
}

/* ============================================================
   PDP — Woo's own add-to-cart form, for anything not a simple product
   ============================================================ */
.pdp-buy form.cart{display:flex;gap:14px;align-items:stretch;flex-wrap:wrap;width:100%;margin:0}
.pdp-buy form.cart .quantity{display:flex;align-items:center;border:var(--line);height:62px}
.pdp-buy form.cart .quantity input.qty{
  width:76px;height:100%;border:0;background:none;text-align:center;font:inherit;font-size:15px;
}
.pdp-buy form.cart button[type=submit]{
  display:inline-flex;align-items:center;justify-content:space-between;gap:28px;
  min-width:210px;flex:1;height:62px;padding:0 26px 0 30px;
  background:var(--pink);color:var(--ink);border:var(--line);
  font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  transition:background .38s var(--ease),color .38s var(--ease);
}
.pdp-buy form.cart button[type=submit]:hover{background:var(--ink);color:var(--paper)}
.pdp-buy table.variations{width:100%;margin:0 0 16px}
.pdp-buy table.variations td{padding:0 0 14px;display:block}
.pdp-buy table.variations label{
  font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-55);
}
.pdp-buy table.variations select{
  width:100%;padding:12px 0;background:none;border:0;border-bottom:var(--line);
  font:inherit;font-size:15px;color:var(--ink);appearance:none;border-radius:0;
}
.pdp-buy .woocommerce-variation-price{font-family:var(--display);font-size:26px;margin-bottom:12px}
.pdp-buy .stock.out-of-stock{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--pink-dk)}

/* ---------- product page: gallery is deliberately single-image ---------- */
.pdp-media .woocommerce-product-gallery__wrapper{display:contents}
.pdp-media .flex-control-thumbs{display:none}

/* ============================================================
   JOURNAL — the opener panel is optional in WordPress
   ============================================================ */
.jhero[hidden]{display:none!important}

/* ============================================================
   PAGES — plain WordPress content, kept inside the design's measure
   ============================================================ */
.page-wrap{padding:calc(var(--nav) + var(--sec)) var(--gut) var(--sec);max-width:1200px}
.page-wrap h1{font-size:clamp(38px,6.4vw,110px);margin-bottom:clamp(24px,3vw,48px)}
.page-body{max-width:62ch;font-size:16.5px;line-height:1.7;color:var(--ink-70)}
.page-body h2{font-family:var(--edit);font-weight:300;text-transform:none;letter-spacing:-.01em;
  font-size:clamp(26px,3vw,44px);line-height:1.06;margin:1.6em 0 .5em;color:var(--ink)}
.page-body h3{font-size:22px;margin:1.6em 0 .5em;color:var(--ink)}
.page-body p{margin:0 0 1.1em}
.page-body a{border-bottom:1px solid var(--rule)}
.page-body a:hover{color:var(--pink-dk);border-color:currentColor}
.page-body ul,.page-body ol{margin:0 0 1.2em;padding-left:1.3em}
.page-body li{margin-bottom:.5em}
.page-body img{margin:2em 0}
.page-body blockquote{
  margin:1.6em 0;padding-left:24px;border-left:2px solid var(--rule);
  font-family:var(--edit);font-size:20px;line-height:1.5;color:var(--ink);
}

/* ---------- 404 / search ---------- */
.mini-hero{padding:calc(var(--nav) + var(--sec)) var(--gut) clamp(30px,3.4vw,58px)}
.mini-hero h1{font-size:clamp(44px,8vw,140px);line-height:.86}
.mini-hero p{margin-top:20px;color:var(--ink-55);max-width:44ch}
.mini-hero .btn{margin-top:34px}

/* ---------- toast: the quiet failure case ---------- */
#mahuaToast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);z-index:130;
  background:var(--ink);color:var(--cream);padding:13px 22px;
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  opacity:0;pointer-events:none;transition:opacity .4s var(--ease),transform .4s var(--ease);
  max-width:calc(100vw - 40px);text-align:center;
}
#mahuaToast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- cart busy: the drawer stays legible mid-request ---------- */
body.cart-busy #cartBody{opacity:.62;transition:opacity .2s}
body.cart-busy #cartBody .qty button{pointer-events:none}

/* the cart line title is a link now; it must not read as one */
.ci h4 a{color:inherit}
.ci h4 a:hover{color:var(--pink-dk)}

/* ---------- admin bar offset ---------- */
body.admin-bar .nav{top:32px}
body.admin-bar #cart,body.admin-bar #loader,body.admin-bar #curtain,body.admin-bar #done{top:32px}
@media screen and (max-width:782px){
  body.admin-bar .nav{top:46px}
  body.admin-bar #cart,body.admin-bar #loader,body.admin-bar #curtain,body.admin-bar #done{top:46px}
}

/* ---------- WordPress core alignment classes ---------- */
.alignleft{float:left;margin:0 2em 1.4em 0}
.alignright{float:right;margin:0 0 1.4em 2em}
.aligncenter{margin-left:auto;margin-right:auto}
.screen-reader-text{
  border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;
  overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important;
}
.wp-caption-text{font-size:12px;color:var(--ink-55);margin-top:8px}