/**
 * WAJ Fixes - polish pass (ASCII-only comments for encoding safety)
 *
 * 1) Neutralises the theme's global button {} styling where it leaks onto our
 *    accordion toggles (the clay filled-pill bug on the FAQ / editorial items).
 * 2) Replaces the default blue focus ring with a tasteful focus-visible outline.
 * 3) Normalises accordion spacing across desktop + mobile.
 * 4) Applies the "Ink & Olive" palette + Bricolage/Inter font tokens.
 * 5) Unifies hero corners (top sharp, bottom round).
 *
 * Loaded after main.css (see inc/waj-polish.php). Where the theme uses
 * !important on buttons, we match it so these rules win cleanly.
 *
 * @package WhatAJazz
 * @version 1.1.0
 */

/* -- FAQ accordion toggles: strip inherited button chrome (bulletproof) ------
   The theme paints every <button> as a filled pill; we override with !important
   so no clay bar leaks onto the FAQ questions. */
.waj-sub__faq-q, .waj-ct__faq-q, .waj-wh__faq-q,
.waj-sub__faq-q:hover, .waj-ct__faq-q:hover, .waj-wh__faq-q:hover,
.waj-sub__faq-q:focus, .waj-ct__faq-q:focus, .waj-wh__faq-q:focus,
.waj-sub__faq-q:active, .waj-ct__faq-q:active, .waj-wh__faq-q:active {
	-webkit-appearance: none !important;
	appearance: none !important;
	background: transparent !important;
	background-color: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	min-height: 0 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	transform: none !important;
	opacity: 1 !important;
}
.waj-sub__faq-q, .waj-ct__faq-q, .waj-wh__faq-q {
	color: var(--text) !important;
	font-weight: 600;
	transition: color var(--ease);
}
.waj-sub__faq-q:hover, .waj-ct__faq-q:hover, .waj-wh__faq-q:hover {
	color: var(--hero-button-hover-bg) !important; /* clay text on hover */
}

/* keyboard focus only - no mouse-click ring */
.waj-sub__faq-q:focus, .waj-ct__faq-q:focus, .waj-wh__faq-q:focus { outline: none !important; }
.waj-sub__faq-q:focus-visible, .waj-ct__faq-q:focus-visible, .waj-wh__faq-q:focus-visible {
	outline: 2px solid var(--accent) !important;
	outline-offset: 3px;
}

/* -- FAQ accordion spacing: roomier so the rows breathe --------------------- */
.waj-sub__faq-q, .waj-ct__faq-q, .waj-wh__faq-q {
	padding-top: 1.5rem !important;
	padding-bottom: 1.5rem !important;
	gap: 1.5rem;
	line-height: 1.35;
}
.waj-sub__faq-a p, .waj-ct__faq-a p, .waj-wh__faq-a p {
	padding-bottom: 1.5rem;
	color: var(--muted);
	line-height: 1.65;
}
@media (max-width: 560px) {
	.waj-sub__faq-q, .waj-ct__faq-q, .waj-wh__faq-q {
		padding-top: 1.2rem !important;
		padding-bottom: 1.2rem !important;
		font-size: 1rem;
		gap: 1rem;
	}
}

/* -- Matcha (editorial) accordion: match the FAQ look -----------------------
   Roomy rows, a clean plus/minus glyph (no circle), clay on hover. */
.ed-panel__trigger { padding: 1.5rem 0 !important; }
.ed-panel__trigger:hover { color: var(--hero-button-hover-bg) !important; }
.ed-panel__icon {
	border: 0 !important;
	width: auto !important;
	height: auto !important;
	background: transparent !important;
	color: var(--muted) !important;
}
.ed-panel__trigger:hover .ed-panel__icon {
	background: transparent !important;
	color: var(--hero-button-hover-bg) !important;
}
.ed-panel__icon::before { font-size: 1.5rem !important; font-weight: 300 !important; }
@media (max-width: 560px) {
	.ed-panel__trigger { padding: 1.2rem 0 !important; }
}

/* Hard neutraliser - kill any themed clay fill anywhere in the editorial
   accordion (trigger, open trigger, body, content), in every state. The
   .waj-editorial wrapper adds specificity; !important defeats the theme button.
   Also covers any stray <button> the theme might paint inside the article. */
.waj-editorial .ed-panel,
.waj-editorial .ed-panel__trigger,
.waj-editorial .ed-panel__trigger:hover,
.waj-editorial .ed-panel__trigger:focus,
.waj-editorial .ed-panel__trigger:active,
.waj-editorial .ed-panel.is-open .ed-panel__trigger,
.waj-editorial .ed-panel__body,
.waj-editorial .ed-panel__content {
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
}
.waj-editorial .ed-panel__trigger,
.waj-editorial .ed-panel.is-open .ed-panel__trigger { color: var(--text) !important; }

/* Search submit + newsletter buttons are MEANT to look like buttons - leave
   them alone; the resets above are scoped only to accordion toggles. */


/* ===========================================================================
   ACTIVE PALETTE - "Ink & Olive" (clay buttons, olive labels)
   Clay is the accent for buttons & details so actions stand out; olive is the
   signature colour on eyebrows / section labels; ink is the text. Redefines the
   theme tokens so it cascades everywhere - no edits to main.css.
   - Want olive buttons instead? Set --accent + --hero-button-bg to #5E6B4F.
   - Want hero buttons controlled in Customise > Homepage hero? Delete the
     four --hero-button-* lines.
   =========================================================================== */
:root {
	--bg:           #F2F1EE;   --surface:  #FBFBFA;
	--text:         #15130F;   --muted:    #8A857E;
	--line:         #E4E1DB;
	--accent:       #C25D34;   --accent-2: #FFFFFF;   /* clay - buttons + details */
	--accent-olive: #5E6B4F;                          /* olive - eyebrows / labels */
	--hero-button-bg:        #C25D34;
	--hero-button-text:      #FFFFFF;
	--hero-button-hover-bg:  #A94E2A;
	--hero-button-hover-text:#FFFFFF;
}

/* Olive on eyebrows / section labels - the signature olive touch.
   The extra specificity (main.waj-*) beats the page templates' inline styles. */
main.waj-sub .eyebrow, main.waj-ct .eyebrow, main.waj-wh .eyebrow,
main.waj-bg .eyebrow, main.waj-archive .eyebrow,
.waj-about .eyebrow,                 /* About in-content labels (light bg) */
.editorial-chapter-break__num {      /* Matcha / editorial section labels */
	color: var(--accent-olive);
}
/* Hero eyebrows sit on photos: keep them white (not olive) for legibility.
   .waj-about__hero-eyebrow + .waj-ed__hero-eyebrow keep their theme white. */

/* -- Olive on labels only: mega-menu column headings + footer headings -------
   Dropdown sub-item LINKS and footer LINKS stay ink for legibility (their
   clay hovers are set in waj-nav.css / waj-footer.css). */
.main-navigation .menu-item.mega > .sub-menu > li > a { color: var(--accent-olive); }
.waj-foot__col-title { color: var(--accent-olive); }

/* -- Consistent hero corners: top sharp, bottom round (match the homepage) ---
   All heroes sit in the same constrained .site-main, so one radius unifies them.
   Homepage .hero is already 0 0 28px; About + Matcha were fully rounded. */
.waj-sub__hero, .waj-ct__hero, .waj-wh__hero, .waj-bg__hero,
.waj-about__hero, .waj-ed__hero {
	border-radius: 0 0 28px 28px;
	overflow: hidden;
}
@media (max-width: 560px) {
	.waj-sub__hero, .waj-ct__hero, .waj-wh__hero, .waj-bg__hero,
	.waj-about__hero, .waj-ed__hero { border-radius: 0 0 16px 16px; }
}

/* ===========================================================================
   ACTIVE FONTS - Bricolage Grotesque (headings) + Inter (body)
   The font files are loaded by inc/waj-polish.php, which repoints the theme's
   existing font handle - no extra request and no edit to enqueue.php.
   =========================================================================== */
:root {
	--font-heading: "Bricolage Grotesque", "Plus Jakarta Sans", Arial, sans-serif;
	--font-body:    "Inter", "Plus Jakarta Sans", Arial, sans-serif;
}

/* ===========================================================================
   WOOCOMMERCE - "added to cart" success notice (desktop layout)
   Moved here from Customise > Additional CSS. It lays the success message out
   as a clean row (icon + text + "View cart" button) and removes WooCommerce's
   floats/clearfix. This file loads after WooCommerce's CSS, and the rules are
   !important, so it wins from the file - you can now clear the Additional CSS box.
   Desktop only (>=821px); mobile keeps WooCommerce's default stacked layout.
   =========================================================================== */
@media (min-width: 821px) {
	.woocommerce-notices-wrapper .woocommerce-message,
	.woocommerce .woocommerce-message,
	.woocommerce-message {
		position: relative !important;
		display: flex !important;
		align-items: center !important;
		justify-content: flex-start !important;
		gap: 18px !important;
		padding: 34px 40px !important;
		min-height: 120px !important;
	}

	.woocommerce-notices-wrapper .woocommerce-message::before,
	.woocommerce .woocommerce-message::before,
	.woocommerce-message::before {
		position: static !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		bottom: auto !important;
		transform: none !important;
		margin: 0 !important;
		width: auto !important;
		height: auto !important;
		line-height: 1 !important;
		flex: 0 0 auto !important;
		align-self: center !important;
	}

	.woocommerce-notices-wrapper .woocommerce-message .button,
	.woocommerce .woocommerce-message .button,
	.woocommerce-message .button,
	.woocommerce-notices-wrapper .woocommerce-message a.button,
	.woocommerce .woocommerce-message a.button,
	.woocommerce-message a.button {
		order: 3 !important;
		float: none !important;
		margin: 0 0 0 18px !important;
		margin-right: 0 !important;
		align-self: center !important;
		flex: 0 0 auto !important;
	}

	.woocommerce-notices-wrapper .woocommerce-message > *,
	.woocommerce .woocommerce-message > *,
	.woocommerce-message > * {
		float: none !important;
	}

	.woocommerce-notices-wrapper .woocommerce-message::after,
	.woocommerce .woocommerce-message::after,
	.woocommerce-message::after {
		content: "" !important;
		display: none !important;
	}
}

/* ===========================================================================
   PRODUCT PAGE - remove the (non-working) gallery magnifier trigger
   =========================================================================== */
.woocommerce-product-gallery__trigger { display: none !important; }

/* ===========================================================================
   PRODUCT PAGE - unify the Add to cart button across all product types
   Goal: transparent button with an INK border + quantity beside it; fills CLAY
   on hover. Fixes the coffee-vs-gear inconsistency (the theme's simple-product
   "inline" selector never matched, so gear stacked the quantity above). */
/* Quantity + button on one row for SIMPLE products (variable already inline) */
.woocommerce div.product form.cart:not(.variations_form) {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	gap: 0.5rem !important;
}
.woocommerce div.product form.variations_form.cart { display: block !important; }
.woocommerce div.product .woocommerce-variation-add-to-cart {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 0.5rem !important;
}
/* Ghost (ink border) button, clay on hover - both simple + variable */
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce div.product .woocommerce-variation-add-to-cart .single_add_to_cart_button {
	background: transparent !important;
	border: 1px solid var(--text) !important;
	color: var(--text) !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.woocommerce div.product .woocommerce-variation-add-to-cart .single_add_to_cart_button:hover {
	background: var(--accent) !important;   /* clay */
	border-color: var(--accent) !important;
	color: #fff !important;
}

/* ===========================================================================
   COOKIE BANNER (Complianz) - Accept stays clay; Deny + View preferences +
   Save preferences become transparent with an INK border (clay on hover).
   Uses the theme's exact selector (.cmplz-cookiebanner .cmplz-btn.cmplz-*),
   which main.css paints clay; this loads later + !important, so it wins.
   The base .cmplz-btn rule also sets a clay border, so we must reset the
   border-color to ink here (the bit the earlier shorter selector missed). */
.cmplz-cookiebanner .cmplz-btn.cmplz-deny,
.cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences,
.cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences {
	background: transparent !important;
	border: 1px solid var(--text) !important;   /* ink border */
	color: var(--text) !important;              /* ink text */
}
.cmplz-cookiebanner .cmplz-btn.cmplz-deny:hover,
.cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences:hover,
.cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences:hover {
	background: var(--accent) !important;       /* clay */
	border-color: var(--accent) !important;
	color: #fff !important;
}

/* ---------------------------------------------------------------------------
   COMPACT SIZING - the short consent copy left the banner feeling oversized.
   Tighten the padding, shrink the pill buttons (48px -> 40px) and trim the
   title/message scale so the box reads as a neat card, not a billboard.
   --------------------------------------------------------------------------- */
.cmplz-cookiebanner,
.cmplz-cookiebanner.cmplz-bottom-right,
.cmplz-cookiebanner.cmplz-bottom-left,
.cmplz-cookiebanner.cmplz-bottom-center,
.cmplz-cookiebanner.cmplz-center {
	max-width: 340px !important;
	padding: 15px 16px !important;
	border-radius: 16px !important;
}
.cmplz-cookiebanner .cmplz-header,
.cmplz-cookiebanner .cmplz-title {
	font-size: 0.9rem !important;
	margin: 0 0 5px !important;
}
.cmplz-cookiebanner .cmplz-message,
.cmplz-cookiebanner .cmplz-description {
	font-size: 0.76rem !important;
	line-height: 1.4 !important;
	margin: 0 0 11px !important;
}
.cmplz-cookiebanner .cmplz-buttons {
	gap: 6px !important;
	margin: 0 !important;
}
.cmplz-cookiebanner .cmplz-btn,
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
	min-height: 34px !important;
	padding: 0 14px !important;
	font-size: 0.66rem !important;
	letter-spacing: 0.05em !important;
}
.cmplz-cookiebanner .cmplz-links,
.cmplz-cookiebanner .cmplz-save-settings .cmplz-links {
	font-size: 0.7rem !important;
	margin-top: 9px !important;
}

/* Even tighter on phones, where the banner usually goes full width. */
@media (max-width: 600px) {
	.cmplz-cookiebanner,
	.cmplz-cookiebanner.cmplz-bottom-right,
	.cmplz-cookiebanner.cmplz-bottom-left,
	.cmplz-cookiebanner.cmplz-bottom-center,
	.cmplz-cookiebanner.cmplz-center {
		max-width: none !important;
		padding: 13px 14px !important;
		border-radius: 14px !important;
	}
	.cmplz-cookiebanner .cmplz-header,
	.cmplz-cookiebanner .cmplz-title {
		font-size: 0.86rem !important;
	}
	.cmplz-cookiebanner .cmplz-message,
	.cmplz-cookiebanner .cmplz-description {
		font-size: 0.74rem !important;
		margin: 0 0 9px !important;
	}
	.cmplz-cookiebanner .cmplz-btn,
	.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
		min-height: 32px !important;
		padding: 0 12px !important;
		font-size: 0.64rem !important;
	}
}

/* ===========================================================================
   NAV - small hover-intent delay so dropdowns don't fire instantly when the
   pointer just passes over the bar. Opens after 180ms, closes immediately.
   =========================================================================== */
@media (min-width: 821px) {
	/* A closed/closing dropdown must NOT capture the mouse - otherwise its
	   invisible panel lingers as a "hot zone" below the nav (fading out for
	   ~0.2s) and re-opens the menu / lets you click hidden sub-items. Only the
	   actually-open panel is interactive. This makes dropdowns open only when
	   you're really on a menu item. */
	/* Dropdowns open instantly on hover, but a JS hover-intent class (.is-open,
	   added by waj-nav.js) keeps them open for a moment after you leave the item
	   - so you can move down to the sub-items without it snapping shut.
	   Closed panels ignore the mouse (no phantom hot-zone). */
	.main-navigation .sub-menu { pointer-events: none; }
	.main-navigation li:hover > .sub-menu,
	.main-navigation li.is-open > .sub-menu,
	.main-navigation li:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		pointer-events: auto;
	}
}

/* ===========================================================================
   HOMEPAGE - Featured "short list": move "View all" under the heading
   (the section head is a space-between flex, which shoved it to the far right).
   To remove it entirely instead, delete this block and add:
     .home-featured-section .product-section__head > a { display:none; }
   =========================================================================== */
.home-featured-section .product-section__head {
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 0.5rem !important;
}
.home-featured-section .product-section__head > a {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 4px;
	color: var(--text);
}
.home-featured-section .product-section__head > a:hover { color: var(--hero-button-hover-bg); }

/* ===========================================================================
   HOMEPAGE - About: drop the floating card on the right. Render as a single
   column: eyebrow + heading, with the supporting copy as a clean ink statement
   beneath (no box). To show ONLY the heading, clear the About text in
   Customise > Homepage sections.
   =========================================================================== */
.split-intro--with-card { display: block !important; max-width: var(--content-width); }
.split-intro--with-card .section-copy--card {
	border: 0 !important;
	background: transparent !important;
	padding: 0 !important;
	border-radius: 0 !important;
	margin-top: 1.1rem;
	max-width: 52ch;
}
.split-intro--with-card .section-copy--card p {
	color: var(--text);
	font-size: 1.1rem;
	line-height: 1.6;
	font-weight: 500;
}

/* ===========================================================================
   FOOTER spacing - bring the newsletter closer to the page content.
   The footer had DOUBLE top padding (.site-footer + the inner .waj-foot),
   which left a big gap above the newsletter. Remove the outer layer, trim the
   inner one a touch, and tighten the homepage's last section (About) bottom. */
.site-footer.waj-footer { padding-top: 0 !important; }
.waj-footer .waj-foot { padding-top: clamp(2.5rem, 5vw, 3.5rem); }
body.home .site-main > section:last-child { padding-bottom: clamp(1rem, 2vw, 1.5rem) !important; }

/* ===========================================================================
   MOBILE FIXES
   =========================================================================== */

/* Shop: drop the redundant "Default" sort dropdown in the mobile filter bar.
   It overflowed the row and made the whole page scroll sideways. The Filter
   button now takes the full width. (Desktop keeps its sort - this bar is
   mobile-only.) Sorting can be moved into the Filter drawer later if wanted. */
.waj-filter-mobile .waj-filter__select-wrap { display: none !important; }
.waj-filter-mobile .waj-filter-mobile-btn { flex: 1 1 auto !important; width: 100% !important; }

@media (max-width: 560px) {
	/* Search overlay: the theme forces every <button> to width:100% on mobile,
	   which swallowed the input. Keep the submit compact so the field has room. */
	.waj-search__submit { width: auto !important; flex: 0 0 auto; padding: 0 1rem !important; }
	.waj-search__form { gap: 0.5rem; }
	.waj-search__input { min-width: 0; flex: 1 1 auto; }

	/* Subscription comparison table: fit on screen instead of scrolling right. */
	.waj-sub__table { min-width: 0 !important; }
	.waj-sub__table th, .waj-sub__table td {
		padding: 0.7rem 0.5rem !important;
		font-size: 0.8rem !important;
		line-height: 1.35;
	}
}

/* ===========================================================================
   BRAND WORDMARK (concept D) - stacked lockup in the header.
   Big name on top, small spaced last word beneath. Renders in the real
   Bricolage font (no image needed). Markup is in header.php.
   =========================================================================== */

/* True-center the wordmark: make the two side columns equal so the brand sits
   at the real viewport centre, regardless of nav vs. icon widths. */
.site-header__inner { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important; }

/* Base wordmark - applies anywhere it's used (header brand + mobile menu top). */
.waj-wordmark {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	line-height: 1;
	text-decoration: none;
}
.waj-wordmark__main {
	font-family: var(--font-heading);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: clamp(0.82rem, 2.4vw, 1.02rem);
	color: var(--text);
}
.waj-wordmark__sub {
	font-size: clamp(0.55rem, 1.6vw, 0.64rem);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.3em;
	color: var(--muted);
	margin-top: 4px;
}
/* Header brand is centred; mobile-menu top stays left-aligned (base default). */
.site-branding .waj-wordmark { align-items: center; }
.site-branding .waj-wordmark__sub { text-indent: 0.15em; } /* optical centre nudge */

/* ===========================================================================
   MATCHA (editorial) page - olive accents specific to this page only
   =========================================================================== */
/* Part 2 product-guide headings (1., 2., ...) -> olive green */
.editorial-part--linear h3 { color: var(--accent-olive) !important; }

/* CTA button after the article, before "Further reading" (aligned to the
   content column). The .button itself is recoloured olive by the rule below. */
.waj-ed__cta { max-width: var(--ed-max); margin: var(--ed-gap) auto 0; text-align: center; }

/* ===========================================================================
   QUANTITY STEPPERS - product page + cart page (-  qty  +)
   =========================================================================== */
/* One single bordered pill containing [ - number + ] - no extra bubbles, no
   accent fill, native number arrows hidden. Used on product + cart pages. */
.woocommerce div.product form.cart .quantity.waj-has-stepper,
.woocommerce-cart-form .quantity.waj-has-stepper {
	display: inline-flex;
	align-items: center;
	gap: 0;
	border: 1px solid var(--line);
	border-radius: 999px;
	overflow: hidden;
	width: max-content;
}
.quantity.waj-has-stepper .qty {
	border: 0 !important;
	background: transparent !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	width: 2.4rem !important;
	min-width: 0;
	min-height: 2.5rem;
	text-align: center;
	padding: 0 !important;
	font-weight: 600;
	-moz-appearance: textfield;
}
.quantity.waj-has-stepper .qty::-webkit-inner-spin-button,
.quantity.waj-has-stepper .qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.waj-step {
	width: 2.4rem;
	min-height: 2.5rem;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	color: var(--text);
	font-size: 1.15rem;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	transition: background var(--ease);
}
.waj-step:hover { background: rgba(0, 0, 0, 0.06); }

/* Variable products (e.g. coffee): main.css forces the buttons - and any
   <button> in the variation row, which catches our steppers - to clay with
   high-specificity !important rules. Match that specificity so coffee looks
   like the simple/gear products: plain steppers + ghost-ink Add to cart. */
.woocommerce div.product form.variations_form .single_add_to_cart_button,
.woocommerce div.product form.variations_form .woocommerce-variation-add-to-cart .single_add_to_cart_button {
	background: transparent !important;
	border: 1px solid var(--text) !important;
	color: var(--text) !important;
}
.woocommerce div.product form.variations_form .single_add_to_cart_button:hover,
.woocommerce div.product form.variations_form .woocommerce-variation-add-to-cart .single_add_to_cart_button:hover {
	background: var(--accent) !important;
	border-color: var(--accent) !important;
	color: #fff !important;
}
.woocommerce div.product form.variations_form .woocommerce-variation-add-to-cart button.waj-step {
	background: transparent !important;
	border: 0 !important;
	color: var(--text) !important;
}
.woocommerce div.product form.variations_form .woocommerce-variation-add-to-cart button.waj-step:hover {
	background: rgba(0, 0, 0, 0.06) !important;
}

/* ===========================================================================
   MINI-CART - live quantity stepper per item + SKIMS-style buttons
   =========================================================================== */
.waj-mini-cart-controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 0.5rem;
}
/* Same minimal style: plain - and +, subtle hover, no accent colour. */
.waj-mini-qty {
	display: inline-flex;
	align-items: center;
	gap: 0;
	border: 1px solid var(--line);
	border-radius: 999px;
	overflow: hidden;
}
.waj-mini-qty__btn {
	width: 1.9rem;
	height: 1.9rem;
	flex: 0 0 auto;
	border: 0;
	background: transparent;
	color: var(--text);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background var(--ease);
}
.waj-mini-qty__btn:hover { background: rgba(0, 0, 0, 0.06); }
.waj-mini-qty__val { min-width: 1.4rem; text-align: center; font-weight: 600; font-size: 0.9rem; }
.waj-mini-cart-line-price { font-weight: 600; }
.cart-drawer__body.is-updating { opacity: 0.55; pointer-events: none; transition: opacity var(--ease); }

/* SKIMS-style cart buttons: one big accent Checkout, "View cart" as a text link
   beneath it (the drawer outputs both as .button via WooCommerce). */
/* main.css forces these buttons into a 2-col grid with !important; we override
   with the same specificity (later in the cascade) to stack them: big full-width
   Checkout on top, "View cart" as a text link beneath. */
.cart-drawer .woocommerce-mini-cart__buttons,
.widget_shopping_cart .woocommerce-mini-cart__buttons {
	display: flex !important;
	flex-direction: column !important;
	grid-template-columns: none !important;
	gap: 0.6rem !important;
	margin-top: 1rem;
}
.cart-drawer .woocommerce-mini-cart__buttons .checkout,
.widget_shopping_cart .woocommerce-mini-cart__buttons .checkout {
	order: 1;
	width: 100% !important;
	min-height: 54px !important;
	font-size: 0.9rem !important;
	letter-spacing: 0.08em;
}
.cart-drawer .woocommerce-mini-cart__buttons a.button:not(.checkout),
.widget_shopping_cart .woocommerce-mini-cart__buttons a.button:not(.checkout) {
	order: 2;
	background: transparent !important;
	border: 0 !important;
	color: var(--text) !important;
	min-height: auto !important;
	padding: 0.35rem !important;
	text-align: center;
	text-transform: none;
	letter-spacing: 0.01em;
	text-decoration: underline;
	text-underline-offset: 3px;
	font-weight: 600;
}
.cart-drawer .woocommerce-mini-cart__buttons a.button:not(.checkout):hover,
.widget_shopping_cart .woocommerce-mini-cart__buttons a.button:not(.checkout):hover { color: var(--accent) !important; }

/* ===========================================================================
   LEGAL PAGES - clean single-column reading layout (page-legal.php)
   =========================================================================== */
.waj-legal { --legal-max: 760px; color: var(--text); font-family: var(--font-body); }
.waj-legal__wrap {
	max-width: var(--legal-max);
	margin: 0 auto;
	padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3rem, 7vw, 6rem);
}
.waj-legal__head {
	margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
	padding-bottom: clamp(1.2rem, 3vw, 2rem);
	border-bottom: 1px solid var(--line);
}
.waj-legal__head .eyebrow {
	display: inline-block;
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--accent-olive);
	margin-bottom: 0.6rem;
}
.waj-legal__head h1 {
	font-family: var(--font-heading);
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.08;
	font-size: clamp(2rem, 5vw, 2.8rem);
	margin: 0 0 0.5rem;
}
.waj-legal__updated { color: var(--muted); font-size: 0.9rem; margin: 0; }

.waj-legal__toc {
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	background: var(--surface);
	padding: 1.1rem 1.3rem;
	margin-bottom: clamp(2rem, 5vw, 3rem);
}
.waj-legal__toc-label {
	display: block;
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--muted);
	margin-bottom: 0.6rem;
}
.waj-legal__toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.waj-legal__toc a { color: var(--text); text-decoration: none; font-size: 0.95rem; }
.waj-legal__toc a:hover { color: var(--accent); }

.waj-legal__body { font-size: 1.02rem; line-height: 1.75; color: var(--text); }
.waj-legal__body h2 {
	color: var(--accent);
	font-family: var(--font-heading);
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.2;
	font-size: clamp(1.3rem, 2.6vw, 1.6rem);
	margin: 2.4rem 0 0.8rem;
	scroll-margin-top: 90px;
}
.waj-legal__body h3 { font-size: 1.05rem; font-weight: 700; margin: 1.6rem 0 0.5rem; }
.waj-legal__body p { margin: 0 0 1rem; }
.waj-legal__body ul, .waj-legal__body ol { margin: 0 0 1.1rem; padding-left: 1.3rem; }
.waj-legal__body li { margin-bottom: 0.5rem; }
.waj-legal__body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.waj-legal__body strong { font-weight: 700; }
.waj-legal__body table { width: 100%; border-collapse: collapse; margin: 0 0 1.2rem; }
.waj-legal__body th, .waj-legal__body td {
	text-align: left;
	padding: 0.6rem 0.8rem;
	border-bottom: 1px solid var(--line);
	font-size: 0.95rem;
	vertical-align: top;
}
.waj-legal__body hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

/* Legal: sticky "On this page" sidebar (privacy / taisyklės / parama) */
.waj-legal__body a { color: var(--accent) !important; } /* override colours pasted inline from old editor */
.waj-legal--toc .waj-legal__wrap { max-width: 1040px; }
@media (min-width: 900px) {
  .waj-legal--toc .waj-legal__cols {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
  }
  .waj-legal--toc .waj-legal__side { position: sticky; top: 100px; }
}
.waj-legal__side { margin-bottom: clamp(1.6rem, 4vw, 2.4rem); }
.waj-legal__toc { border: 0; border-left: 2px solid var(--line); border-radius: 0; background: transparent; padding: 0.2rem 0 0.2rem 1.1rem; margin: 0; }
.waj-legal__toc ul { gap: 0.6rem; }
.waj-legal__toc a { color: var(--muted); display: block; line-height: 1.4; transition: color 150ms ease; }
.waj-legal__toc a:hover, .waj-legal__toc a.is-current { color: var(--accent); }
.waj-legal__toc a.is-current { font-weight: 600; }
.waj-legal__toc li.is-sub { padding-left: 0.9rem; }
.waj-legal__toc li.is-sub a { font-size: 0.88rem; }
.waj-legal--toc .waj-legal__body h2 { padding-top: 1.5rem; border-top: 1px solid var(--line); }
.waj-legal--toc .waj-legal__body h2:first-of-type { padding-top: 0; border-top: 0; }

/* ===========================================================================
   FOOTER brand - match the header wordmark's font treatment
   (same Bricolage face + tight tracking; kept single-line for the footer bar).
   =========================================================================== */
.waj-foot__brand {
	font-family: var(--font-heading) !important;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* Footer brand mark (eye-in-heart) sitting first in the FOLLOW row.
   Same 52px footprint as the social icons, but borderless (it's decorative,
   not a clickable button). Ink outline + clay pupil. */
.waj-foot__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	flex: 0 0 auto;
	color: var(--text);
}
.waj-foot__mark svg { width: 46px; height: 46px; display: block; }

/* Mobile menu: stacked wordmark at the top (left-aligned) + eye-in-heart mark
   at the bottom (replacing the old social icons). */
/* Mobile menu top wordmark: a touch larger than the header version. */
/* Center the whole wordmark in the panel (matches the centered SHOP NOW
   button + social row at the bottom). Close button floats to the top-right
   so it does not pull the lockup off-center. */
.mobile-menu-panel__top {
	position: relative;
	justify-content: center !important;
}
.mobile-menu-panel__top .waj-wordmark {
	align-items: center;        /* match header (no left-align) */
	text-align: center;
}
.mobile-menu-panel__top .waj-wordmark__sub { text-indent: 0.15em; }  /* optical-centre nudge */
.mobile-menu-panel__top .waj-wordmark__main { font-size: 0.95rem; }
.mobile-menu-panel__top .mobile-menu-close {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 1rem;       /* match the row's padding-bottom; this band == wordmark height */
	margin: auto 0;     /* vertically center on the wordmark, not the corner */
}
/* The bottom row reuses the footer's .waj-foot__social / __mark / __social-link
   styles, so it matches the footer exactly. */

/* This page's CTA button (e.g. "Search matcha") -> olive instead of clay.
   Scoped to .waj-editorial so it only recolours buttons on the Matcha page. */
.waj-editorial .button,
.waj-editorial .wp-element-button,
.waj-editorial .wp-block-button__link {
	background: var(--accent-olive) !important;
	border-color: var(--accent-olive) !important;
	color: #fff !important;
}
.waj-editorial .button:hover,
.waj-editorial .wp-element-button:hover,
.waj-editorial .wp-block-button__link:hover {
	background: #4E5A41 !important;   /* darker olive on hover */
	border-color: #4E5A41 !important;
	color: #fff !important;
}