/**
 * SCL 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/scl-polish.php). Where the theme uses
 * !important on buttons, we match it so these rules win cleanly.
 *
 * @package Specialty_Coffee_Lithuania
 * @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. */
.scl-sub__faq-q, .scl-ct__faq-q, .scl-wh__faq-q,
.scl-sub__faq-q:hover, .scl-ct__faq-q:hover, .scl-wh__faq-q:hover,
.scl-sub__faq-q:focus, .scl-ct__faq-q:focus, .scl-wh__faq-q:focus,
.scl-sub__faq-q:active, .scl-ct__faq-q:active, .scl-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;
}
.scl-sub__faq-q, .scl-ct__faq-q, .scl-wh__faq-q {
	color: var(--text) !important;
	font-weight: 600;
	transition: color var(--ease);
}
.scl-sub__faq-q:hover, .scl-ct__faq-q:hover, .scl-wh__faq-q:hover {
	color: var(--hero-button-hover-bg) !important; /* clay text on hover */
}

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

/* -- FAQ accordion spacing: roomier so the rows breathe --------------------- */
.scl-sub__faq-q, .scl-ct__faq-q, .scl-wh__faq-q {
	padding-top: 1.5rem !important;
	padding-bottom: 1.5rem !important;
	gap: 1.5rem;
	line-height: 1.35;
}
.scl-sub__faq-a p, .scl-ct__faq-a p, .scl-wh__faq-a p {
	padding-bottom: 1.5rem;
	color: var(--muted);
	line-height: 1.65;
}
@media (max-width: 560px) {
	.scl-sub__faq-q, .scl-ct__faq-q, .scl-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
   .scl-editorial wrapper adds specificity; !important defeats the theme button.
   Also covers any stray <button> the theme might paint inside the article. */
.scl-editorial .ed-panel,
.scl-editorial .ed-panel__trigger,
.scl-editorial .ed-panel__trigger:hover,
.scl-editorial .ed-panel__trigger:focus,
.scl-editorial .ed-panel__trigger:active,
.scl-editorial .ed-panel.is-open .ed-panel__trigger,
.scl-editorial .ed-panel__body,
.scl-editorial .ed-panel__content {
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
}
.scl-editorial .ed-panel__trigger,
.scl-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.scl-*) beats the page templates' inline styles. */
main.scl-sub .eyebrow, main.scl-ct .eyebrow, main.scl-wh .eyebrow,
main.scl-bg .eyebrow, main.scl-archive .eyebrow,
.scl-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.
   .scl-about__hero-eyebrow + .scl-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 scl-nav.css / scl-footer.css). */
.main-navigation .menu-item.mega > .sub-menu > li > a { color: var(--accent-olive); }
.scl-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. */
.scl-sub__hero, .scl-ct__hero, .scl-wh__hero, .scl-bg__hero,
.scl-about__hero, .scl-ed__hero {
	border-radius: 0 0 28px 28px;
	overflow: hidden;
}
@media (max-width: 560px) {
	.scl-sub__hero, .scl-ct__hero, .scl-wh__hero, .scl-bg__hero,
	.scl-about__hero, .scl-ed__hero { border-radius: 0 0 16px 16px; }
}

/* ===========================================================================
   ACTIVE FONTS - Bricolage Grotesque (headings) + Inter (body)
   The font files are loaded by inc/scl-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;
}

/* ===========================================================================
   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 scl-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 .scl-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.scl-footer { padding-top: 0 !important; }
.scl-footer .scl-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. */
.scl-filter-mobile .scl-filter__select-wrap { display: none !important; }
.scl-filter-mobile .scl-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. */
	.scl-search__submit { width: auto !important; flex: 0 0 auto; padding: 0 1rem !important; }
	.scl-search__form { gap: 0.5rem; }
	.scl-search__input { min-width: 0; flex: 1 1 auto; }

	/* Subscription comparison table: fit on screen instead of scrolling right. */
	.scl-sub__table { min-width: 0 !important; }
	.scl-sub__table th, .scl-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; }

.site-branding .scl-wordmark {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	line-height: 1;
	text-decoration: none;
}
.site-branding .scl-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);
}
.site-branding .scl-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;
	/* optical centering: half the trailing letter-spacing so it sits centred */
	text-indent: 0.15em;
}

/* ===========================================================================
   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. */
.scl-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.scl-has-stepper,
.woocommerce-cart-form .quantity.scl-has-stepper {
	display: inline-flex;
	align-items: center;
	gap: 0;
	border: 1px solid var(--line);
	border-radius: 999px;
	overflow: hidden;
	width: max-content;
}
.quantity.scl-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.scl-has-stepper .qty::-webkit-inner-spin-button,
.quantity.scl-has-stepper .qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.scl-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);
}
.scl-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.scl-step {
	background: transparent !important;
	border: 0 !important;
	color: var(--text) !important;
}
.woocommerce div.product form.variations_form .woocommerce-variation-add-to-cart button.scl-step:hover {
	background: rgba(0, 0, 0, 0.06) !important;
}

/* ===========================================================================
   MINI-CART - live quantity stepper per item + SKIMS-style buttons
   =========================================================================== */
.scl-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. */
.scl-mini-qty {
	display: inline-flex;
	align-items: center;
	gap: 0;
	border: 1px solid var(--line);
	border-radius: 999px;
	overflow: hidden;
}
.scl-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);
}
.scl-mini-qty__btn:hover { background: rgba(0, 0, 0, 0.06); }
.scl-mini-qty__val { min-width: 1.4rem; text-align: center; font-weight: 600; font-size: 0.9rem; }
.scl-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; }

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

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