/* ==========================================================================
   Zeest v2 — shop.css: every WooCommerce surface. Product cards follow
   the v2 anatomy exactly (LAYOUT-SPEC-V2 §3.4): 16px padding, 4:5 image,
   badge 12px inside the image, footer row with price + ADD in normal
   flow. Loaded last, after elements.css, only when WooCommerce is on.
   ========================================================================== */

/* ================= Product grids ================= */
.woocommerce ul.products,.woocommerce-page ul.products{
	display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
	column-gap:32px;row-gap:40px;margin:0;padding:0;list-style:none;
}
.woocommerce ul.products::before,.woocommerce ul.products::after{content:none!important;display:none!important}
.woocommerce ul.products li.product,.woocommerce-page ul.products li.product{
	float:none!important;width:auto!important;margin:0!important;
	grid-column:span 3;display:flex;flex-direction:column;
}
.z-shop-main ul.products li.product{grid-column:span 4}
@media (max-width:1199px){
	.woocommerce ul.products{column-gap:24px;row-gap:32px}
	.woocommerce ul.products li.product{grid-column:span 4}
	.z-shop-main ul.products li.product{grid-column:span 6}
}
@media (max-width:767px){
	.woocommerce ul.products{column-gap:16px;row-gap:24px}
	.woocommerce ul.products li.product{grid-column:span 6}
	.z-shop-main ul.products li.product{grid-column:span 6}
}
@media (max-width:479px){
	.woocommerce ul.products li.product{grid-column:span 6}
	.z-shop-main ul.products li.product{grid-column:span 6}
}
/* Lookbook "shop this look" rows (v2.4): these rules sit AFTER the
   generic grid rules so they actually win — the copies that used to
   live in elements.css lost at equal specificity and the rows
   rendered at the generic span 3, leaving a quarter of every row
   empty. Three products fill the 12 columns exactly (4+4+4); on
   mobile the standard 2-up pair stays, and a lone third item is
   centred in its row deliberately instead of hugging the left. */
.z-look-shop ul.products li.product{grid-column:span 4}
.z-row-products{min-width:0}
@media (max-width:767px){
	.z-look-shop ul.products li.product{grid-column:span 6}
	.z-look-shop ul.products li.product:nth-child(3):last-child{grid-column:4/span 6}
}
.wc-block-grid__products{display:grid;grid-template-columns:repeat(4,1fr);gap:32px 24px;margin:0;padding:0;list-style:none}
@media (max-width:1199px){.wc-block-grid__products{grid-template-columns:repeat(3,1fr)}}
@media (max-width:767px){.wc-block-grid__products{grid-template-columns:repeat(2,1fr)}}

/* ================= Product card anatomy (§3.4) ================= */
.woocommerce ul.products li.product{
	background:var(--z-card);border:1px solid var(--z-line);border-radius:var(--r-card);
	padding:16px;box-shadow:none;text-align:left;position:relative;
	/* v2.5: a grid item's automatic minimum is its min-content —
	   one long button label must never stretch the card (or paint
	   outside it). The card is exactly its track, always. */
	min-width:0;
}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link{
	display:flex;flex-direction:column;text-decoration:none;color:var(--z-ink);flex:1;
}
/* In-link flow: image → title → colour → sizes. The price is NOT here in
   v2 — it lives in .z-card-foot in normal flow (see below). */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link img{
	width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-img);margin:0;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
	font-size:16px;font-weight:500;line-height:1.4;color:var(--z-ink);
	margin-top:16px;padding:0;text-align:left;
}
.woocommerce ul.products li.product .z-card-colour{
	display:block;font-size:13px;color:var(--z-ink2);margin-top:4px;
}
.woocommerce ul.products li.product .z-card-sizes{
	display:block;font-size:13px;color:var(--z-ink2);margin-top:4px;
}
/* Footer row — in normal flow, pushed to the card bottom by flex so a
   uniform row keeps equals-height cards tidy with NO reserved void. */
.woocommerce ul.products li.product .z-card-foot{
	margin-top:auto;padding-top:16px;min-width:0;
	display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.woocommerce ul.products li.product .price{
	font-size:16px;font-weight:600;color:var(--z-ink);margin:0;line-height:1.3;
	flex:0 1 auto;min-width:0;
}
.woocommerce ul.products li.product .price del{color:var(--z-ink2);font-weight:400;margin-right:8px}
.woocommerce ul.products li.product .price ins{text-decoration:none}
/* v2.5 containment (owner's live screenshots): the pill must live
   INSIDE the card's content box at every tier. Three causes stacked
   up in v2.4 — (1) no box-sizing anywhere in the theme, so the
   mobile width:100% added 1.85em of side padding ON TOP of the
   100% and bled ~50px past the card; (2) flex:none + the automatic
   flex minimum (min-content) let the long SELECT OPTIONS label —
   ~139px of tracked uppercase text + 48px padding ≈ 177px — force
   the button wider than a ~126px mobile content box; (3) the fixed
   height:44px left a wrapped label nowhere to go. Now: border-box,
   shrinkable (flex:0 1 auto, min-width:0, max-width:100%), tighter
   em padding/tracking, wrapping allowed, height is a MINIMUM —
   the pill grows a few px taller rather than ever bleeding. */
.woocommerce ul.products li.product a.z-add-btn{
	box-sizing:border-box;min-width:0;max-width:100%;
	min-height:44px;padding:.77em 1.5em;border-radius:var(--r-pill);
	background:var(--z-dark);color:#fff;border:1px solid var(--z-dark);
	font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
	line-height:1.25;text-align:center;white-space:normal;
	display:inline-flex;align-items:center;justify-content:center;margin:0;text-decoration:none;flex:0 1 auto;
}
.woocommerce ul.products li.product a.z-add-btn:hover{background:var(--z-ink-hover)}
/* Narrow cards (mobile 2-col grid, small containers): price and the
   non-shrinking CTA stack — price on its own line, CTA full width —
   so the two can never collide or squeeze each other out. */
@media (max-width:767px){
	.woocommerce ul.products li.product .z-card-foot{flex-direction:column;align-items:stretch;gap:8px}
	/* Stacked: the pill is exactly the content-box width (border-box
	   makes width:100% mean the WHOLE pill, padding included), and
	   its side padding steps down to 1em so the label fits the box. */
	.woocommerce ul.products li.product a.z-add-btn{width:100%;padding:.77em 1em}
}
.woocommerce ul.products li.product .star-rating{font-size:13px;margin:8px 0 0;color:var(--z-tbrown)}
.woocommerce ul.products li.product .onsale,.woocommerce span.onsale{
	position:absolute;top:28px;left:28px; /* card padding 16 + 12 inside the image */
	background:var(--z-error);color:#fff;border-radius:var(--r-pill);
	padding:6px 12px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
	min-height:0;line-height:1.3;margin:0;z-index:2;
}
.woocommerce ul.products li.product .z-badge-new{
	position:absolute;top:28px;left:28px;
	background:var(--z-dark);color:#fff;border-radius:var(--r-pill);
	padding:6px 12px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.3;z-index:2;
}
/* When both appear, the sale badge drops below the NEW badge */
.woocommerce ul.products li.product .z-badge-new~.onsale{top:64px}

/* ================= Homepage product carousel (New Arrivals) =================
   The shortcode's product list becomes a horizontal scroll-snap row:
   native scrolling (touch, wheel, keyboard via the buttons), no
   library. Card widths mirror the grid tiers: 4 across on desktop,
   3 on tablet, 2 on mobile, with the grid's own gaps between them. */
.z-carousel{position:relative}
.z-carousel ul.products{
	display:flex;flex-wrap:nowrap;overflow-x:auto;
	scroll-snap-type:x mandatory;scrollbar-width:none;
	-webkit-overflow-scrolling:touch;padding-bottom:8px;
}
.z-carousel ul.products::-webkit-scrollbar{display:none}
.z-carousel ul.products li.product{flex:0 0 calc((100% - 96px)/4);scroll-snap-align:start}
@media (max-width:1199px){
	.z-carousel ul.products li.product{flex-basis:calc((100% - 48px)/3)}
}
@media (max-width:767px){
	.z-carousel ul.products li.product{flex-basis:calc((100% - 16px)/2)}
}
/* v2.4: the prev/next controls OVERLAY the track's vertical centre
   (prev at the left edge, next at the right) instead of reserving a
   44px strip under the track — controls must not reserve layout
   space. The strip between the buttons is click-transparent; the
   buttons themselves keep their 44px touch size. */
.z-carousel-nav{position:absolute;left:8px;right:8px;top:50%;transform:translateY(-50%);display:flex;justify-content:space-between;margin:0;pointer-events:none;z-index:4}
.z-carousel-nav .z-carousel-btn{pointer-events:auto;box-shadow:0 4px 16px rgba(35,35,35,.14)}
.z-carousel-btn{
	width:44px;height:44px;border-radius:50%;flex:none;
	border:1px solid var(--z-line2);background:var(--z-card);color:var(--z-ink);
	display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
}
.z-carousel-btn svg{width:20px;height:20px;display:block}
.z-carousel-btn:hover{border-color:var(--z-ink)}
.z-carousel-btn[disabled]{opacity:.35;cursor:default}
.z-carousel-btn[disabled]:hover{border-color:var(--z-line2)}

/* ================= Quick-shop hover reveal =================
   A duplicate of the card's buy action (printed by the theme after
   the product link), revealed over the photo's lower edge on
   hover-capable screens. The in-flow ADD in .z-card-foot remains
   the touch and keyboard route, so the overlay is pointer-only
   (aria-hidden; shop.js removes it from the tab order).
   Its vertical position is computed from the card's own width —
   photo height = (card width − 32px padding) × 5/4 — using
   container-query units; where those are unsupported the overlay
   simply never reveals and nothing is lost. */
.z-card-quick{display:none}
@supports (width:1cqw){
	.woocommerce ul.products li.product{container-type:inline-size}
	/* Relative card internals (v2.4): the card's padding is a ratio
	   of the card's OWN width — 5.33cqw, floored at 12px and capped
	   at the approved 16px — so the same card in a 4-up row, a 2-up
	   mobile row or a lookbook row keeps proportional internals
	   instead of fixed pixels everywhere. At the anchor card widths
	   (≥300px) every value below equals the v2.3 px exactly: padding
	   16, image radius 12, badge offset 28 (padding + 12 inside the
	   image), title/price 16. The badge offsets and the quick-shop
	   position derive from the same --cpad variable, so the whole
	   card scales from one number. Browsers without container-query
	   units keep the px rules above untouched. */
	.woocommerce ul.products li.product{
		--cpad:clamp(12px,5.33cqw,16px);
		padding:var(--cpad);
	}
	.woocommerce ul.products li.product a.woocommerce-LoopProduct-link img{
		border-radius:clamp(8px,4cqw,var(--r-img));
	}
	.woocommerce ul.products li.product .woocommerce-loop-product__title{
		font-size:clamp(14px,5.33cqw,16px);margin-top:var(--cpad);
	}
	.woocommerce ul.products li.product .price{font-size:clamp(14px,5.33cqw,16px)}
	/* v2.5: the buy label scales with the CARD (4.2cqw, floored at
	   11px, capped at the approved 13px) — at a 152px mobile card
	   the label renders at 11px and SELECT OPTIONS fits the 126px
	   content box on one line (~99px of text + ~22px padding);
	   at desktop card widths it is the full 13px. Browsers without
	   container units keep 13px and wrap inside the pill instead
	   of bleeding (see the base rule). */
	.woocommerce ul.products li.product a.z-add-btn{font-size:clamp(11px,4.2cqw,13px)}
	.woocommerce ul.products li.product .onsale,
	.woocommerce ul.products li.product .z-badge-new{
		top:calc(var(--cpad) + 12px);left:calc(var(--cpad) + 12px);
	}
	.woocommerce ul.products li.product .z-badge-new~.onsale{top:calc(var(--cpad) + 48px)}
	.z-card-quick{
		display:block;position:absolute;z-index:3;
		left:calc(var(--cpad) + 12px);right:calc(var(--cpad) + 12px);
		top:calc(var(--cpad) + (100cqw - (2 * var(--cpad)))*1.25 - 56px);
		opacity:0;transform:translateY(8px);pointer-events:none;
		transition:opacity .18s ease,transform .18s ease;
	}
	.z-card-quick a.z-add-btn{width:100%;box-shadow:0 8px 24px rgba(35,35,35,.20)}
	@media (hover:hover) and (min-width:768px){
		.woocommerce ul.products li.product:hover .z-card-quick,
		.woocommerce ul.products li.product:focus-within .z-card-quick{
			opacity:1;transform:translateY(0);pointer-events:auto;
		}
	}
}

/* Block-based product cards (cart/checkout blocks) get the same skin */
.wc-block-grid__product{background:var(--z-card);border:1px solid var(--z-line);border-radius:var(--r-card);padding:16px;text-align:left}
.wc-block-grid__product-image img{aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-img);width:100%}
.wc-block-grid__product-title{font-size:16px;font-weight:500;line-height:1.4;margin-top:16px}
.wc-block-grid__product-price{font-size:16px;font-weight:600}

/* ================= Shop layout (§3.2) ================= */
.z-shop-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:40px;align-items:start;padding-bottom:80px}
@media (max-width:1199px){.z-shop-layout{gap:32px;padding-bottom:64px}}
@media (max-width:767px){
	.z-shop-layout{grid-template-columns:1fr;gap:24px;padding-bottom:48px}
	.z-shop-sidebar{display:none}
	body.z-filters-open .z-shop-sidebar{display:block}
}
.z-shop-sidebar .widget{
	background:var(--z-card);border:1px solid var(--z-line);border-radius:var(--r-card);
	padding:24px;margin:0 0 20px;
}
.z-shop-sidebar .widget:last-child{margin-bottom:0}
.z-shop-sidebar .widget-title{font-size:16px;font-weight:600;margin:0 0 16px}
.z-shop-sidebar ul{list-style:none;margin:0;padding:0}
.z-shop-sidebar li{margin-bottom:8px;font-size:14px}
.z-shop-sidebar li:last-child{margin-bottom:0}
.z-shop-sidebar a{color:var(--z-ink2);text-decoration:none}
.z-shop-sidebar a:hover{color:var(--z-ink)}
.z-filters-toggle{display:none;width:100%;margin:0 0 24px;min-height:48px;border:1px solid var(--z-line2);border-radius:var(--r-pill);background:var(--z-card);font-family:var(--fh);font-size:14px;font-weight:600;cursor:pointer;color:var(--z-ink)}
@media (max-width:767px){.z-filters-toggle{display:block}}
.woocommerce .woocommerce-breadcrumb{margin:24px 0 8px;font-size:13px;color:var(--z-ink2)}
.woocommerce .woocommerce-breadcrumb a{color:var(--z-ink2);text-decoration:none}
.woocommerce .woocommerce-result-count{font-size:14px;color:var(--z-ink2);margin:0}
.woocommerce .woocommerce-ordering{margin:0 0 24px}
.woocommerce .woocommerce-ordering select{
	min-height:48px;border:1px solid var(--z-line2);border-radius:var(--r-img);
	padding:8px 16px;font-size:14px;background:var(--z-card);color:var(--z-ink);
}
.z-archive-note{
	background:var(--z-oat);border-radius:var(--r-panel);padding:32px;
	margin-top:32px;max-width:820px;
}
.z-archive-note h2{font-family:var(--fd);font-size:31px;line-height:1.15;margin-bottom:12px;text-transform:none;letter-spacing:0;border:0;padding:0}
.z-archive-note p{color:var(--z-ink2);margin:0}
.z-no-products-help{margin-top:24px}
.woocommerce nav.woocommerce-pagination{margin-top:32px}
.woocommerce nav.woocommerce-pagination ul{display:flex;gap:8px;justify-content:center;border:0;margin:0;padding:0;list-style:none}
.woocommerce nav.woocommerce-pagination ul li{border:0;float:none}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
	display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;
	padding:0 16px;border:1px solid var(--z-line);border-radius:var(--r-pill);
	background:var(--z-card);color:var(--z-ink);font-size:14px;font-weight:600;text-decoration:none;line-height:1;
}
.woocommerce nav.woocommerce-pagination ul li span.current{background:var(--z-dark);border-color:var(--z-dark);color:#fff}

/* ================= Notices + forms ================= */
.woocommerce-message,.woocommerce-info,.woocommerce-error,
.woocommerce .woocommerce-message,.woocommerce .woocommerce-info,.woocommerce .woocommerce-error{
	border:1px solid var(--z-line);border-radius:var(--r-img);padding:16px 20px;
	background:var(--z-card);color:var(--z-ink);font-size:15px;margin:0 0 24px;
}
.woocommerce-message,.woocommerce .woocommerce-message{border-color:var(--z-sage);background:var(--z-success-bg)}
.woocommerce-error,.woocommerce .woocommerce-error{border-color:var(--z-error)}
.woocommerce form .form-row label,.woocommerce-page form .form-row label{font-size:14px;font-weight:600;margin-bottom:8px;display:block}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,.woocommerce-page form .form-row textarea,.woocommerce-page form .form-row select,
.woocommerce .quantity .qty{
	min-height:52px;border:1px solid var(--z-line2);border-radius:var(--r-img);
	padding:12px 16px;font-size:16px;background:var(--z-card);color:var(--z-ink);width:100%;
}
.woocommerce form .form-row{margin:0 0 16px;padding:0}

/* ================= Single product (§3.3) ================= */
/* v2.4: the grid gap is COLUMN-only. The old uniform 56px gap also
   acted as a row gap, stacking on top of the rows' own margins —
   summary→accordions measured 56 + 48 = 104px instead of the
   spec's 48. Vertical rhythm between the rows is now owned once,
   by each row's own margin (accordions 48, trust row 24, reviews
   48, related padding 64 — spec §3.4). */
/* v2.5 width discipline: the tracks are minmax(0,1fr), never bare
   1fr — a bare track's automatic minimum is its content's
   min-content, so one wide child (thumb row, purchase form, a long
   unbroken string) could force the whole product grid wider than
   the page and give the page its slight left-right slide. The
   gallery and summary also carry min-width:0 as grid items. */
.woocommerce div.product{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:56px;row-gap:0;align-items:start}
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product .summary{width:auto!important;float:none!important;margin:0;min-width:0}
/* Product title: 28px flat through mobile/tablet (v2.3 anchors),
   fluid from 28 to the 31px desktop anchor between 768 and 1200px
   (1.75× → 1.94× base). */
.woocommerce div.product .product_title{font-size:28px;line-height:1.2;margin-bottom:12px;overflow-wrap:break-word}
@media (min-width:768px){
	.woocommerce div.product .product_title{font-size:clamp(28px,calc(22.67px + .694vw),31px)}
}
.woocommerce div.product p.price,.woocommerce div.product span.price{font-size:24px;font-weight:600;color:var(--z-ink);margin:0 0 24px}
.woocommerce div.product p.price del{color:var(--z-ink2);font-weight:400;margin-right:8px}
.woocommerce div.product p.price ins{text-decoration:none}
.woocommerce-product-details__short-description{color:var(--z-ink2);margin-bottom:24px}
.woocommerce-product-details__short-description p{margin:0 0 12px}
.woocommerce div.product .woocommerce-product-gallery__wrapper img{border-radius:var(--r-page)}
/* Thumbs wrap to a second row instead of pushing the gallery
   (and the page) wide — 5 thumbs at 80px + gaps ≈ 448px of
   min-content against a ~320px mobile column (v2.5). */
.woocommerce div.product .flex-control-thumbs{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;padding:0}
.woocommerce div.product .flex-control-thumbs li{width:80px;float:none}
.woocommerce div.product .flex-control-thumbs li img{border-radius:var(--r-img)}
.woocommerce div.product .out-of-stock{color:var(--z-error);font-weight:600}
.z-chips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0}
.z-chip{display:inline-flex;align-items:center;gap:8px;background:var(--z-card);border:1px solid var(--z-line);border-radius:var(--r-pill);padding:8px 16px;font-size:13px;font-weight:500}
.z-dot{width:14px;height:14px;border-radius:50%;border:1px solid var(--z-line2);display:inline-block;flex:none}
.z-dot--multi{background:conic-gradient(#B4716C,#C9A227,#858D78,#7D9BB5,#B4716C)}
/* v2.5.1 — the buy box is a deliberate GRID, in both containers
   that can hold the controls. Why two: for SIMPLE products the
   quantity, Add to Cart, Buy Now and the note are direct children
   of form.cart; for VARIABLE products WooCommerce groups the
   quantity + Add to Cart inside .woocommerce-variation-add-to-cart
   and the theme's woocommerce_after_add_to_cart_button output
   (Buy Now, then this note) lands inside that wrapper too. The
   v2.5 flex rules were written for direct children only, so on
   variable products they were inert inside the wrapper and Woo's
   default float flow placed the controls instead — quantity and
   Add to Cart misaligned, Buy Now hanging at content width, and
   the note's panel background painting up behind the floated
   buttons (the owner's screenshot). Both containers now run the
   same grid: row 1 = quantity (112px) + Add to Cart (the rest),
   row 2 = Buy Now full width, then the note full width. Nothing
   floats and nothing can cross the note panel's edge. */
/* The note is a full-width grid row in both buy-box containers:
   it can shrink — it must never stretch the purchase form (v2.5). */
.z-buybox-note{background:var(--z-oat);border-radius:var(--r-img);padding:16px 20px;margin-top:8px;font-size:14px;line-height:1.55;grid-column:1/-1;min-width:0}
.z-buybox-note p{margin:0 0 8px}
.z-buybox-note p:last-child{margin-bottom:0}
.woocommerce div.product form.cart{display:grid;grid-template-columns:112px minmax(0,1fr);gap:16px;margin:24px 0 0}
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart{display:grid;grid-template-columns:112px minmax(0,1fr);gap:16px;align-items:stretch}
/* Full-width rows in the form-level grid: the variations table,
   the whole variation wrap, a grouped product list, and the
   simple form's own Buy Now + note (direct children there).
   A grouped form's button also spans — it follows its table. */
.woocommerce div.product form.cart table.variations,
.woocommerce div.product form.cart .single_variation_wrap,
.woocommerce div.product form.cart .woocommerce-grouped-product-list,
.woocommerce div.product form.cart>.z-buy-now-btn,
.woocommerce div.product form.cart>.z-buybox-note,
.woocommerce div.product form.cart.grouped_form .single_add_to_cart_button{grid-column:1/-1}
/* Full-width rows in the variation wrapper grid. */
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart .z-buy-now-btn,
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart .z-buybox-note{grid-column:1/-1}
/* An external product's lone button spans the form, not one cell. */
.woocommerce div.product form.cart>a.single_add_to_cart_button{grid-column:1/-1}
.woocommerce div.product form.cart .quantity{min-width:0}
.woocommerce div.product form.cart .quantity .qty{width:96px;height:56px;text-align:center}
/* Inside the buy-box grids the quantity box fills its 112px
   column exactly; the 96px rule above stays the fallback for
   quantity inputs outside the grids (e.g. grouped products). */
.woocommerce div.product form.cart>.quantity .qty,
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart .quantity .qty{width:100%}
/* v2.5: the theme's primary pill, painted HERE in full. The old
   rule set geometry only (height/padding/flex) and declared no
   background, colour or radius at all — and the one theme rule
   that does paint buttons (elements.css .woocommerce
   button.button, specificity 0-2-1) loses to WooCommerce's own
   .button.alt lavender rule (0-3-1), so the button rendered in
   Woo's default pale purple. This selector is 0-4-2, so the
   charcoal now wins outright. Height matches the quantity box
   beside it (56px), as before. */
.woocommerce div.product form.cart .single_add_to_cart_button{
	height:56px;padding:14px 40px;min-width:0;
	background:var(--z-dark);color:#fff;border:1px solid var(--z-dark);
	border-radius:var(--r-pill);font-family:var(--fh);font-size:15px;font-weight:600;
	cursor:pointer;box-sizing:border-box;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover{background:var(--z-ink-hover);border-color:var(--z-ink-hover);color:#fff}
/* Buy Now (v2.5): the secondary pill on its own full row of the
   purchase panel, same 56px height as Add to Cart — white with a
   charcoal border and text. Printed by the theme inside form.cart
   (includes/woocommerce.php); submitting it adds the current
   selection exactly like Add to Cart, then the theme's redirect
   filter sends the buyer straight to checkout. */
.woocommerce div.product form.cart .z-buy-now-btn{
	height:56px;padding:14px 40px;min-width:0;
	background:#fff;color:var(--z-ink);border:1px solid var(--z-dark);
	border-radius:var(--r-pill);font-family:var(--fh);font-size:15px;font-weight:600;
	cursor:pointer;box-sizing:border-box;
}
.woocommerce div.product form.cart .z-buy-now-btn:hover{background:var(--z-bg);color:var(--z-ink)}
.woocommerce div.product form.cart table.variations{width:100%;margin:0 0 8px}
.woocommerce div.product form.cart table.variations td,.woocommerce div.product form.cart table.variations th{padding:0 0 12px;vertical-align:top;text-align:left}
.woocommerce div.product form.cart table.variations label{font-size:14px;font-weight:600}
.woocommerce div.product form.cart .reset_variations{font-size:13px;color:var(--z-ink2)}
.z-varbtns{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.z-varbtn{min-width:52px;min-height:48px;padding:.71em 1.29em;border:1px solid var(--z-line2);border-radius:var(--r-pill);background:var(--z-card);font-family:var(--fh);font-size:14px;font-weight:600;color:var(--z-ink);cursor:pointer}
.z-varbtn:hover{border-color:var(--z-ink)}
.z-varbtn.is-active{background:var(--z-dark);border-color:var(--z-dark);color:#fff}
.woocommerce div.product .product_meta{margin-top:24px;font-size:13px;color:var(--z-ink2);display:flex;flex-direction:column;gap:4px;overflow-wrap:anywhere}
.woocommerce div.product .woocommerce-tabs{grid-column:1/-1}
.z-reviews{grid-column:1/-1;max-width:820px;margin-top:48px}
.z-reviews h2{font-size:22px;margin-bottom:16px}
.related.products{grid-column:1/-1;padding-top:64px}
.related.products>h2,.upsells.products>h2{
	font-size:22px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
	padding-bottom:12px;border-bottom:2px solid var(--z-ink);margin-bottom:32px;
}
.upsells.products{grid-column:1/-1;padding-top:64px}
.z-sticky-atc{
	box-sizing:border-box;max-width:calc(100vw - 24px);
	display:none;position:fixed;left:12px;right:12px;bottom:12px;z-index:80;
	background:var(--z-card);border:1px solid var(--z-line);border-radius:var(--r-card);
	padding:12px;padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px));
	box-shadow:0 8px 32px rgba(35,35,35,.18);
	align-items:center;gap:12px;
}
.z-sticky-atc img{width:48px;height:48px;object-fit:cover;border-radius:var(--r-img)}
.zsa-info{flex:1;min-width:0}
.zsa-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zsa-price{font-size:14px;font-weight:600}

@media (max-width:1199px){
	.woocommerce div.product{column-gap:40px}
}
@media (max-width:767px){
	.woocommerce div.product{grid-template-columns:1fr}
	/* v2.5.1 sticky-bar clearance: the fixed bar is 76px tall
	   (12 padding + 52 content + 12 padding, with the device
	   safe-area carried inside its bottom padding) floating
	   12px above the viewport bottom — 88px of screen it can
	   cover. The product grid gets 104px + safe-area of bottom
	   padding, so the last content (size-guide line, accordions,
	   related products) always scrolls fully clear of the bar,
	   with 16px to spare. Only single products render the bar,
	   and only in this tier (it is display:flex solely here),
	   so no other page gains the space. */
	.woocommerce div.product{padding-bottom:calc(104px + env(safe-area-inset-bottom, 0px))}
	/* With row-gap gone, the mobile gallery→summary space is owned
	   by the summary's own top margin (spec §3.4: 32px). */
	.woocommerce div.product .summary{margin-top:32px}
	.woocommerce div.product form.cart .single_add_to_cart_button{padding:14px 24px}
	.z-accordions{grid-column:1/-1}
	.z-trustrow{grid-column:1/-1}
	.z-sticky-atc{display:flex}
	.related.products,.upsells.products{padding-top:48px}
}

/* ================= Cart drawer ================= */
body.zd-locked{overflow:hidden}
.zd-overlay{position:fixed;inset:0;background:rgba(35,35,35,.5);opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:90}
.zd-overlay.is-open{opacity:1;pointer-events:auto}
.zeest-drawer{
	position:fixed;top:0;right:0;height:100dvh;max-height:100dvh;width:min(420px,92vw);z-index:95;
	background:var(--z-card);transform:translateX(105%);transition:transform .3s ease;
	display:flex;flex-direction:column;box-shadow:-8px 0 32px rgba(35,35,35,.18);
}
.zeest-drawer.is-open{transform:translateX(0)}
.zd-head{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--z-line)}
.zd-head h3{font-size:20px;margin:0}
/* AJAX failure feedback: visible inline error + retry, and the
   inert fallback class used behind the open drawer. */
.zd-error{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 24px 0;padding:12px 16px;border:1px solid var(--z-error);border-radius:var(--r-img);background:var(--z-card);color:var(--z-error);font-size:14px;line-height:1.45}
.zd-error[hidden]{display:none}
.zd-error-text{flex:1;min-width:0}
.zd-retry{flex:none;border:1px solid var(--z-error);background:none;color:var(--z-error);border-radius:var(--r-pill);padding:8px 16px;font-family:var(--fh);font-size:13px;font-weight:600;cursor:pointer}
.zd-retry:hover{background:var(--z-error);color:#fff}
.zd-qty-btn[disabled],.zd-remove[disabled],.zd-retry[disabled]{opacity:.45;cursor:wait}
.z-inert{pointer-events:none!important}
.zd-count-note{color:var(--z-ink2);font-weight:400;font-size:16px}
.zd-close{width:44px;height:44px;border:0;background:none;font-size:24px;cursor:pointer;color:var(--z-ink);line-height:1}
/* Drawer scroll structure: head, progress and totals/CTA stay put —
   ONLY the item list (.zd-items) scrolls. */
.zd-body{flex:1;min-height:0;display:flex;overflow:hidden;padding:24px}
.zeest-drawer-inner{flex:1;min-height:0;display:flex;flex-direction:column}
.zd-progress{flex:none}
.zd-items{flex:1;min-height:0;overflow-y:auto}
.zd-progress,.z-cart-progress{background:var(--z-bg);border:1px solid var(--z-line);border-radius:var(--r-img);padding:16px;font-size:14px;line-height:1.55}
.z-cart-progress{padding:16px 20px;margin-bottom:24px}
.zd-progress-track{height:8px;border-radius:var(--r-pill);background:var(--z-line);margin-top:8px;overflow:hidden}
.zd-progress-fill{height:100%;background:var(--z-sage);border-radius:var(--r-pill);transition:width .3s ease}
/* v2.4 touch pass: the remove column and the quantity steppers are
   44px targets (the owner's ≥44px rule) — they were 32px. */
.zd-item{display:grid;grid-template-columns:64px 1fr 44px;gap:12px;padding:16px 0;border-bottom:1px solid var(--z-line);align-items:start}
.zd-item img{width:64px;height:64px;object-fit:cover;border-radius:var(--r-img)}
.zd-item-name{font-size:15px;font-weight:600;line-height:1.4}
.zd-item-meta{font-size:13px;color:var(--z-ink2);margin-top:4px}
.zd-item-row{display:flex;align-items:center;justify-content:space-between;margin-top:8px;gap:12px}
.zd-qty{display:inline-flex;align-items:center;border:1px solid var(--z-line2);border-radius:var(--r-pill);overflow:hidden}
.zd-qty-btn{width:44px;height:44px;border:0;background:var(--z-card);font-size:16px;cursor:pointer;color:var(--z-ink)}
.zd-qty-val{min-width:32px;text-align:center;font-size:14px;font-weight:600}
.zd-item-price{font-size:15px;font-weight:600}
.zd-remove{width:44px;height:44px;border:0;background:none;font-size:20px;color:var(--z-ink2);cursor:pointer;line-height:1}
.zd-foot{flex:none;padding-top:16px;padding-bottom:env(safe-area-inset-bottom,0px)}
.zd-subtotal{display:flex;justify-content:space-between;font-size:16px;font-weight:600;margin-bottom:8px}
.zd-note{font-size:13px;color:var(--z-ink2);margin:0 0 16px;line-height:1.55}
.zd-foot .button{width:100%}
.zd-continue{display:block;text-align:center;margin-top:12px;font-size:14px;font-weight:600;color:var(--z-ink)}
.zd-empty{text-align:center;padding:32px 0}
.zd-empty p{color:var(--z-ink2);margin:0 0 16px}
.zd-empty p strong{color:var(--z-ink)}

/* ================= Cart / checkout / account ================= */
.woocommerce table.shop_table{border:1px solid var(--z-line);border-radius:var(--r-card);background:var(--z-card);border-collapse:separate;overflow:hidden}
.woocommerce table.shop_table th,.woocommerce table.shop_table td{padding:16px;border-top:1px solid var(--z-line)}
.woocommerce table.shop_table thead th{border-top:0;background:var(--z-bg);font-size:14px}
.woocommerce-cart .cart-collaterals .cart_totals{width:100%}
.coupon input#coupon_code{min-height:52px;border:1px solid var(--z-line2);border-radius:var(--r-img);padding:12px 16px}
.woocommerce-checkout #payment{background:var(--z-card);border:1px solid var(--z-line);border-radius:var(--r-card)}
.woocommerce-checkout #payment ul.payment_methods{border-bottom:1px solid var(--z-line)}
.woocommerce-checkout #payment div.payment_box{background:var(--z-bg)}
.z-pol-links{font-size:14px;color:var(--z-ink2);margin-top:16px;line-height:1.6}
.woocommerce-MyAccount-navigation{background:var(--z-card);border:1px solid var(--z-line);border-radius:var(--r-card);padding:16px}
.woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0}
.woocommerce-MyAccount-navigation li{margin-bottom:8px}
.woocommerce-MyAccount-navigation li:last-child{margin-bottom:0}
.woocommerce-MyAccount-navigation a{display:block;padding:12px 16px;border-radius:var(--r-img);color:var(--z-ink);text-decoration:none;font-weight:500}
.woocommerce-MyAccount-navigation li.is-active a{background:var(--z-bg)}
.woocommerce .star-rating span::before,.woocommerce .star-rating::before{color:var(--z-tbrown)}
.woocommerce p.stars a{color:var(--z-tbrown)}
.woocommerce .woocommerce-form-login,.woocommerce .woocommerce-form-register{border:1px solid var(--z-line);border-radius:var(--r-card);background:var(--z-card);padding:24px}
.woocommerce .woocommerce-ordering,.woocommerce .woocommerce-result-count{float:none}
.woocommerce .products .product-category img{aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-img)}
.woocommerce ul.products li.product-category h2{font-size:18px;margin-top:12px}