/**
 * HerbaShape design system — "Alpine Apothecary Everywhere" (Phase 1).
 *
 * Promotes the support-page design language (tokens, Fraunces, pills, mist,
 * quiet motion) to the whole site. Loads LAST in the child-theme CSS chain
 * so it wins over shop/theme/homepage tweaks without editing them.
 *
 * Sections:
 *   1. Tokens + parent-variable overrides
 *   2. Fluid type scale + Fraunces display headings
 *   3. Pill language (buttons, selects, quantity, swatches, pagination)
 *   4. Product cards — lift + static action bar
 *   5. Scroll-reveal stagger (pairs with autoReveal() in support.js)
 *   6. Frosted sticky header (desktop nav row + mobile masthead)
 *   7. Trust-strip marquee
 *   8. Homepage section mists + wave divider
 *   9. Chrome quieting: uppercase removal, toolbar, sidebar, ambient orbs
 *  10. Reduced motion
 */

/* ------------------------------------------------------------------ *
 * 1. Tokens sitewide + parent :root overrides
 * ------------------------------------------------------------------ */

:root {
	/* HerbaShape tokens (promoted from support.css scope) */
	--hs-green: #4A9D3F;
	--hs-green-dark: #2E6B27;
	--hs-lime: #8BC34A;
	--hs-ink: #1B2A1E;
	--hs-forest: #14301A;
	--hs-muted: #5C6B5A;
	--hs-paper: #FBFDFA;
	--hs-soft: #F1F7ED;
	--hs-mist: #E5F0DF;
	--hs-white: #FFFFFF;
	--hs-line: rgba(31, 74, 34, 0.10);
	--hs-line-strong: rgba(31, 74, 34, 0.16);
	--hs-radius: 22px;
	--hs-radius-sm: 14px;
	--hs-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
	--hs-shadow-sm: 0 2px 8px rgba(20, 48, 26, 0.05);
	--hs-shadow: 0 14px 40px -12px rgba(31, 74, 34, 0.16), 0 4px 12px -6px rgba(31, 74, 34, 0.10);
	--hs-shadow-lg: 0 30px 70px -20px rgba(31, 74, 34, 0.28), 0 8px 20px -10px rgba(31, 74, 34, 0.14);
	--hs-glow: 0 12px 28px -8px rgba(74, 157, 63, 0.45);
	--hs-banner-h: 0px; /* set by support.js from the construction bar height */

	/* Parent theme variables (supplero style.css:425) re-pointed to the
	   HerbaShape palette — kills the last demo-yellow accents everywhere. */
	--primary: #3C8330;         /* AA-safe green (matches homepage-tweaks §8) */
	--primary_hover: #2E6B27;
	--text: #4B584A;            /* green-tinted body gray, was #666666 */
	--accent: #1B2A1E;          /* ink, was pure black */
	--border: #E2EBDD;          /* green-tinted hairline, was #e8e8e9 */
}

/* Paper-white canvas; orbs (see §9) sit on body::before/::after behind it. */
html { background: var(--hs-paper); }
body {
	background: transparent;
	font-size: 15px;            /* parent locks 14px — one step airier */
	line-height: 1.7;
}

::selection { background: #DCEFD2; color: var(--hs-forest); }

/* ------------------------------------------------------------------ *
 * 2. Type — fluid scale + Fraunces display headings
 *    (font/weight/tracking only, NEVER color: some headings live on
 *    dark green bands and keep their own color.)
 * ------------------------------------------------------------------ */

h1, h2,
.entry-title,
.page-title,
.woocommerce-products-header__title,
.woocommerce div.product .product_title,
.elementor-widget-heading .elementor-heading-title,
.widget-title,
.wp-block-heading {
	font-family: var(--hs-display);
	font-optical-sizing: auto;
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.15;
	text-transform: none;
}

h1, .page-title { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); }
h2 { font-size: clamp(1.55rem, 1.15rem + 1.6vw, 2.3rem); }

/* Product-card titles stay on the clean sans — legibility in dense grids. */
h3.woocommerce-loop-product__title,
.woocommerce ul.products li.product h3,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: inherit;
	letter-spacing: 0;
	font-weight: 600;
}

/* Widget titles: smaller editorial serif, sentence case. */
.widget-title { font-size: 1.15rem; }

/* ------------------------------------------------------------------ *
 * 3. Pill language
 * ------------------------------------------------------------------ */

/* Buttons: pill radius + sentence case (parent forces uppercase @2601). */
.button,
input[type="submit"],
button[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .single_add_to_cart_button,
.woocommerce a.added_to_cart,
.checkout-button,
.elementor-button,
.wc-block-components-button,
.wp-element-button {
	border-radius: 999px;
	text-transform: none;
	letter-spacing: .01em;
	font-weight: 600;
}
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .single_add_to_cart_button {
	transition: transform .18s ease, box-shadow .25s ease, background-color .2s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .single_add_to_cart_button:hover {
	transform: translateY(-1px);
	box-shadow: var(--hs-glow);
}

/* Text inputs & selects: soft radius; shop orderby becomes a quiet pill. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea {
	border-radius: var(--hs-radius-sm);
	border-color: var(--hs-line-strong);
}
select,
.woocommerce .woocommerce-ordering select {
	border-radius: 999px;
	border: 1px solid var(--hs-line-strong);
	background-color: var(--hs-white);
	padding: .45em 2em .45em 1.05em;
}

/* Quantity: pill group (support.js adds the −/+ steppers). */
.woocommerce div.product form.cart .quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--hs-line-strong);
	border-radius: 999px;
	background: var(--hs-white);
	overflow: hidden;
}
.woocommerce div.product form.cart .quantity .qty {
	border: 0;
	width: 3.2em;
	text-align: center;
	background: transparent;
	border-radius: 0;
	-moz-appearance: textfield;
	appearance: textfield;
}
.woocommerce div.product form.cart .quantity .qty::-webkit-outer-spin-button,
.woocommerce div.product form.cart .quantity .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.hs-qty-btn,
.woocommerce div.product form.cart .quantity .minus,
.woocommerce div.product form.cart .quantity .plus {
	border: 0 !important;
	background: transparent !important;
	color: var(--hs-forest) !important;
	width: 2.3em;
	height: 2.6em;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	border-radius: 0 !important;
	margin: 0;
	transition: background-color .15s ease;
}
.hs-qty-btn:hover,
.woocommerce div.product form.cart .quantity .minus:hover,
.woocommerce div.product form.cart .quantity .plus:hover { background: var(--hs-soft) !important; }

/* Single-product buy button: the parent locks black + uppercase at
   .single-product div.product depth — out-specific it, go green pill. */
.single-product div.product form.cart .single_add_to_cart_button {
	background: linear-gradient(135deg, var(--hs-green) 0%, var(--hs-green-dark) 100%);
	color: #fff;
	text-transform: none;
	letter-spacing: .01em;
	border-radius: 999px;
	padding-left: 2em;
	padding-right: 2em;
}
.single-product div.product form.cart .single_add_to_cart_button:hover {
	background: linear-gradient(135deg, var(--hs-green-dark) 0%, var(--hs-forest) 100%);
	box-shadow: var(--hs-glow);
}

/* Variation label: keep "Flavour" and the wvs-plugin selected-value span
   (": Chocolat gourmand") on ONE line — the block label used to push the
   colon fragment onto its own row. */
.woocommerce div.product form.cart .variations th.label label { display: inline; }
.woocommerce div.product form.cart .variations .woo-selected-variation-item-name {
	display: inline;
	margin-left: .15em;
	font-weight: 600;
	color: var(--hs-forest);
}

/* Variation swatches (squared style) → pills. */
.variable-items-wrapper.wvs-style-squared .variable-item,
.variable-items-wrapper .variable-item.button-variable-item {
	border-radius: 999px !important;
	padding-left: .4em;
	padding-right: .4em;
	box-shadow: none;
	border: 1px solid var(--hs-line-strong);
}
.variable-items-wrapper .variable-item.selected,
.variable-items-wrapper .variable-item.selected:hover {
	border-color: var(--hs-green-dark) !important;
	box-shadow: 0 0 0 1px var(--hs-green-dark) !important;
}

/* Pagination: round page dots. */
.woocommerce nav.woocommerce-pagination ul {
	border: 0;
	gap: 6px;
	display: inline-flex;
}
.woocommerce nav.woocommerce-pagination ul li {
	border: 0;
	overflow: visible;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	border-radius: 999px;
	min-width: 2.5em;
	height: 2.5em;
	line-height: 2.5em;
	padding: 0 .4em;
	border: 1px solid var(--hs-line-strong);
	background: var(--hs-white);
	color: var(--hs-forest);
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
	background: var(--hs-green-dark);
	border-color: var(--hs-green-dark);
	color: #fff;
}

/* Cart/checkout blocks: radius only — no layout surgery on React DOM. */
.wc-block-cart .wc-block-components-sidebar .wc-block-components-panel,
.wc-block-components-totals-wrapper,
.wc-block-components-order-summary,
.wc-block-components-text-input input,
.wc-block-components-form .wc-block-components-text-input input {
	border-radius: var(--hs-radius-sm);
}

/* ------------------------------------------------------------------ *
 * 4. Product cards — lift + static action bar
 * ------------------------------------------------------------------ */

.woocommerce ul.products li.product {
	background: var(--hs-white);
	border: 1px solid var(--hs-line);
	border-radius: 18px;
	box-shadow: var(--hs-shadow-sm);
	transition: transform .35s cubic-bezier(.2, .7, .3, 1), box-shadow .35s ease, border-color .35s ease;
	overflow: hidden;
}
.woocommerce ul.products li.product:hover,
.woocommerce ul.products li.product:focus-within {
	transform: translateY(-6px);
	box-shadow: var(--hs-shadow);
	border-color: var(--hs-line-strong);
}
.woocommerce ul.products li.product .product-image img {
	transition: transform .6s cubic-bezier(.2, .7, .3, 1), opacity .35s ease;
}
.woocommerce ul.products li.product:hover .product-image img {
	transform: scale(1.045);
}

/* Gallery cross-fade (cards whose product has gallery images — PHP filter
   appends the first one as .hs-hover-img; others keep the plain zoom). */
.woocommerce ul.products li.product .product-image {
	position: relative;
}
.woocommerce ul.products li.product .product-image .hs-hover-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 0;
	pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
	.woocommerce ul.products li.product:hover .product-image .hs-hover-img { opacity: 1; }
	/* fade the base image ONLY when a hover image exists — otherwise cards
	   without a gallery would blank out on hover */
	.woocommerce ul.products li.product:hover .product-image:has(.hs-hover-img) img:not(.hs-hover-img) { opacity: 0; }
}

/* Full product titles — kill the parent's 2-line clamp so long Herbalife names
   ("Barres aux protéines (14 barres) Citron 14 x 35 g") wrap in full. Parent
   woocommerce.css:971 clamps `.woocommerce-loop-product__title a` to
   -webkit-line-clamp:2 (invisible on desktop where titles fit two lines, but
   the narrower mobile column truncated with an ellipsis). We unclamp the anchor;
   the h3 already grows — shop-tweaks' min-height:2.7em is only a floor, and
   .product-caption flexes so price + action bar stay bottom-aligned across
   uneven title heights. */
.woocommerce ul.products li.product .woocommerce-loop-product__title a,
.woocommerce ul.products li.product h3 a {
	display: inline !important;
	-webkit-line-clamp: none !important;
	-webkit-box-orient: horizontal !important;
	overflow: visible !important;
	max-height: none !important;
	text-overflow: clip !important;
}

/* Equal-height cards so the action bars line up across a row even when titles
   wrap to different line counts. The grid is display:flex/wrap with an
   effective align-items:stretch, but shop-tweaks sets li.product height:100%
   which resolves to a fixed px height and defeats the stretch — switch it back
   to auto for grids. Any real slick/woocommerce carousel re-asserts 100% so its
   card still fills the slide the track stretches. */
.woocommerce ul.products { align-items: stretch; }
.woocommerce ul.products li.product { height: auto !important; }
.woocommerce-carousel ul.products li.product,
.slick-slide li.product { height: 100% !important; }

/* Static action bar — ALWAYS visible, UNDER the price (owner: no hover overlay).
   Parent product-style-1 renders .shop-content as a dark panel pinned at
   left:100% that slides across on hover, wrapped in a 60px .shop-action button.
   We flatten that whole chain into one light, full-width bar and sit it under
   the price. In the DOM .price precedes .group-action inside .product-caption-
   bottom, so a column flip relocates it with NO JS. The parent woocommerce.css
   loads AFTER this file (see enqueue order), so every property that fights it is
   forced with !important — the same pattern shop-tweaks.css already uses. */

/* a) caption-bottom: row -> column (price on top, action bar full-width below) */
.woocommerce ul.products li.product .product-caption-bottom {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	gap: 10px;
	padding: 12px 16px 14px !important;
	border-top: 1px solid var(--hs-line) !important;
	overflow: visible !important;
}
.woocommerce ul.products li.product .product-caption-bottom .price {
	margin: 0 !important;
}

/* b) linearise the parent's nested button/overlay wrappers into a flat bar */
.woocommerce ul.products li.product .group-action { width: 100%; }
.woocommerce ul.products li.product .shop-action,
.woocommerce ul.products li.product .shop-action-button {
	position: static !important;
	display: block !important;
	width: 100% !important;
	height: auto !important;
	max-height: none !important;
	min-width: 0 !important;
	background: transparent !important;
	line-height: normal !important;
	overflow: visible !important;
}
/* hide the parent's decorative "+" glyph; the real add-to-cart carries the + */
.woocommerce ul.products li.product .shop-action-button > i.supplero-icon-plus {
	display: none !important;
}

/* c) .shop-content = the visible bar: static, semi-transparent mist, even spacing */
.woocommerce ul.products li.product .shop-action .shop-content {
	position: static !important;
	inset: auto !important;
	width: 100% !important;
	height: auto !important;
	display: flex !important;
	align-items: center;
	gap: 6px;
	padding: 6px 8px !important;
	background: rgba(241, 247, 237, 0.75) !important;   /* --hs-soft @ 75% alpha */
	border: 1px solid var(--hs-line) !important;
	border-radius: 13px !important;
	box-shadow: none !important;
	overflow: visible !important;
	transition: none !important;
}

/* d) three quick-action icons (eye / heart / compare): icon-only, forest ink */
.woocommerce ul.products li.product .shop-content .woosq-btn,
.woocommerce ul.products li.product .shop-content .woosw-btn,
.woocommerce ul.products li.product .shop-content .woosc-btn {
	width: 40px !important;
	height: 40px !important;
	min-width: 40px;
	flex: 0 0 auto !important;
	border-radius: 50% !important;
	background: transparent !important;
	transition: background-color .2s ease;
}
.woocommerce ul.products li.product .shop-content .woosq-btn::before,
.woocommerce ul.products li.product .shop-content .woosw-btn::before,
.woocommerce ul.products li.product .shop-content .woosc-btn::before {
	color: var(--hs-forest) !important;
	font-size: 15px !important;
}
.woocommerce ul.products li.product .shop-content .woosq-btn:hover,
.woocommerce ul.products li.product .shop-content .woosw-btn:hover,
.woocommerce ul.products li.product .shop-content .woosc-btn:hover {
	background: var(--hs-mist) !important;
}
.woocommerce ul.products li.product .shop-content .woosq-btn:hover::before,
.woocommerce ul.products li.product .shop-content .woosw-btn:hover::before,
.woocommerce ul.products li.product .shop-content .woosc-btn:hover::before {
	color: var(--hs-green-dark) !important;
}

/* e) add-to-cart: green "+" circle on the right, with a CSS tooltip label on
   hover/focus. Tooltip (not an expanding pill) because li.product is
   overflow:hidden and carousel cards are narrow — the tooltip floats above the
   circle, right-aligned so it opens leftward and stays inside the card. The
   theme's "View product" text is zeroed; the "+" is drawn via ::before. */
.woocommerce ul.products li.product .shop-content a[class*="product_type_"] {
	position: relative !important;
	margin-left: auto !important;
	flex: 0 0 auto !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0 !important;
	border-radius: 50% !important;
	background: var(--hs-green) !important;
	color: #fff !important;
	overflow: visible !important;
	white-space: nowrap;
	font-size: 0 !important;                 /* hide theme "View product" text */
	line-height: 1 !important;
	-webkit-line-clamp: none !important;
	box-shadow: 0 6px 16px rgba(74, 157, 63, .40);
	transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.woocommerce ul.products li.product .shop-content a[class*="product_type_"]::before {
	content: "+" !important;
	display: block;
	font-family: inherit !important;
	font-size: 22px !important;
	font-weight: 400;
	line-height: 1;
	color: #fff;
}
.woocommerce ul.products li.product .shop-content a[class*="product_type_"]::after {
	content: "Add to cart";
	position: absolute;
	bottom: calc(100% + 8px);
	right: 0;
	margin: 0 !important;
	padding: 5px 10px;
	border-radius: 8px;
	background: var(--hs-forest);
	color: #fff;
	font-size: 11px !important;
	font-weight: 600;
	text-transform: none !important;
	letter-spacing: .01em !important;
	white-space: nowrap;
	line-height: 1.3;
	opacity: 0;
	transform: translateY(4px);
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
}
.woocommerce ul.products li.product .shop-content a[class*="product_type_"]:hover,
.woocommerce ul.products li.product .shop-content a[class*="product_type_"]:focus-visible {
	background: var(--hs-green-dark) !important;
	box-shadow: 0 8px 20px rgba(46, 107, 39, .50);
	transform: translateY(-2px) scale(1.04);
}
.woocommerce ul.products li.product .shop-content a[class*="product_type_"]:hover::after,
.woocommerce ul.products li.product .shop-content a[class*="product_type_"]:focus-visible::after {
	opacity: 1;
	transform: translateY(0);
}
/* variable products route to the product page → contextual "Select options" */
.woocommerce ul.products li.product .shop-content a.product_type_variable::after {
	content: "Select options";
}

/* ------------------------------------------------------------------ *
 * 4b. Cutout drift — product gallery & hero cutouts float on mist
 *     (hero/band drop-shadow already comes from homepage-tweaks (h);
 *     here they only get the drift so shadows are never doubled)
 * ------------------------------------------------------------------ */

.woocommerce div.product .woocommerce-product-gallery {
	position: relative;
}
.woocommerce div.product .woocommerce-product-gallery::before {
	content: "";
	position: absolute;
	inset: 8% 12% 14%;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, var(--hs-mist), transparent 72%);
	z-index: 0;
	pointer-events: none;
}
.woocommerce div.product .woocommerce-product-gallery .wp-post-image {
	position: relative;
	z-index: 1;
	filter: drop-shadow(0 24px 32px rgba(27, 58, 20, 0.18));
	animation: hs-float 7s ease-in-out infinite;
}
.elementor-element.elementor-element-3bb556c .elementor-widget-image img,
.elementor-element.elementor-element-83a5bf4 .elementor-widget-image img {
	animation: hs-float 7s ease-in-out infinite;
}
@keyframes hs-float {
	50% { transform: translateY(-8px); }
}

/* ------------------------------------------------------------------ *
 * 4c. Mobile sticky buy bar (.hs-buybar markup from frontend-extras)
 *     z 9975: above sticky nav 9970 / handheld 996, below hs-up 99997
 * ------------------------------------------------------------------ */

.hs-buybar { display: none; }
@media (max-width: 991px) {
	.hs-buybar {
		position: fixed;
		left: 12px;
		right: 12px;
		bottom: calc(60px + env(safe-area-inset-bottom) + 10px);
		z-index: 9975;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: .9rem;
		padding: .55rem .6rem .55rem 1.15rem;
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.92);
		-webkit-backdrop-filter: blur(12px);
		backdrop-filter: blur(12px);
		border: 1px solid var(--hs-line);
		box-shadow: var(--hs-shadow-lg);
	}
	.hs-buybar[hidden] { display: none; }
	.hs-buybar__price {
		font-weight: 700;
		color: var(--hs-forest);
		font-size: .95rem;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.hs-buybar__price del { opacity: .5; }
	.hs-buybar__cta {
		border: 0;
		border-radius: 999px;
		padding: .7em 1.5em;
		background: linear-gradient(135deg, var(--hs-green), var(--hs-green-dark));
		color: #fff;
		font-weight: 700;
		white-space: nowrap;
		text-transform: none;
		letter-spacing: .01em;
	}
	.hs-buybar__cta:disabled { opacity: .5; }
	/* lift the floating stack clear of the bar on product pages */
	.single-product .hs-wa-float { bottom: 150px; }
	.single-product button.hs-up { bottom: 210px; }
}

/* ------------------------------------------------------------------ *
 * 4d. Bento "why" band ([herbashape_support_hero] teaser)
 * ------------------------------------------------------------------ */

.hs-teaser--bento .hs-teaser__inner { text-align: left; }
.hs-teaser--bento .hs-teaser__grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: minmax(120px, auto);
}
.hs-tile {
	border-radius: var(--hs-radius);
	padding: 1.5rem 1.6rem;
	background: var(--hs-white);
	border: 1px solid var(--hs-line);
	box-shadow: var(--hs-shadow-sm);
}
.hs-tile--copy {
	grid-column: span 2;
	grid-row: span 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 2.1rem 2.3rem;
}
.hs-teaser--bento .hs-teaser__title { margin: 0 0 .8rem; }
.hs-teaser--bento .hs-teaser__sub { margin: 0 0 1rem; }
.hs-teaser--bento .hs-teaser__note {
	margin: auto 0 0;
	font-size: .8rem;
	color: var(--hs-muted);
}
.hs-tile--fact {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: .4rem;
}
.hs-tile--fact strong {
	font-family: var(--hs-display);
	font-optical-sizing: auto;
	font-weight: 600;
	font-size: clamp(1.5rem, 2.3vw, 2.1rem);
	line-height: 1;
	color: var(--hs-green-dark);
}
.hs-tile--fact span {
	color: var(--hs-muted);
	font-size: .95rem;
	line-height: 1.45;
}
.hs-tile--soft { background: var(--hs-soft); border-color: transparent; }
.hs-tile--mist { background: var(--hs-mist); border-color: transparent; }
.hs-tile--cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	background: linear-gradient(135deg, var(--hs-green) 0%, var(--hs-green-dark) 100%);
	border-color: transparent;
	color: #fff;
	font-weight: 700;
	font-size: 1.05rem;
	text-decoration: none;
	transition: transform .25s ease, box-shadow .25s ease;
}
.hs-tile--cta,
.hs-tile--cta:hover,
.hs-tile--cta:focus { color: #fff; }
.hs-tile--cta:hover {
	transform: translateY(-3px);
	box-shadow: var(--hs-glow);
}
.hs-tile__arrow { font-size: 1.35rem; line-height: 1; transition: transform .25s ease; }
.hs-tile--cta:hover .hs-tile__arrow { transform: translateX(4px); }
.hs-teaser--bento .hs-teaser__more { text-align: right; margin: .9rem 0 0; }
.hs-teaser--bento .hs-teaser__more a {
	color: var(--hs-green-dark);
	font-weight: 600;
	text-decoration: none;
}
.hs-teaser--bento .hs-teaser__more a:hover { text-decoration: underline; }
@media (max-width: 960px) {
	.hs-teaser--bento .hs-teaser__grid { grid-template-columns: repeat(2, 1fr); }
	.hs-tile--copy { grid-column: span 2; grid-row: auto; }
}
@media (max-width: 620px) {
	.hs-teaser--bento .hs-teaser__grid { grid-template-columns: 1fr; }
	.hs-tile--copy { grid-column: auto; }
}

/* ------------------------------------------------------------------ *
 * 5. Scroll-reveal stagger (support.js autoReveal sets --hs-d per item)
 * ------------------------------------------------------------------ */

.hs-js .hs-reveal { transition-delay: var(--hs-d, 0ms); }

/* ------------------------------------------------------------------ *
 * 6. Frosted sticky header
 * ------------------------------------------------------------------ */

/* Desktop nav row (Elementor header template 2260): frosted deep-green
   glass. Pure sticky can't escape its short header parent, so support.js
   toggles html.hs-nav-stuck and we pin it fixed under the construction bar;
   #masthead padding holds the freed space (no content jump). */
@media (min-width: 992px) {
	.elementor-2260 .elementor-element-be2d08f {
		background: linear-gradient(120deg, rgba(46, 107, 39, 0.94), rgba(26, 66, 21, 0.92)) !important;
		-webkit-backdrop-filter: blur(12px) saturate(1.3);
		backdrop-filter: blur(12px) saturate(1.3);
	}
	html.hs-nav-stuck .elementor-2260 .elementor-element-be2d08f {
		position: fixed;
		top: var(--hs-banner-h, 0px);
		left: 0;
		right: 0;
		width: 100%;
		z-index: 9970;
		box-shadow: 0 10px 30px -22px rgba(20, 48, 26, 0.75);
		animation: hs-nav-in .32s cubic-bezier(.2, .7, .3, 1);
	}
	html.hs-nav-stuck #masthead {
		padding-bottom: var(--hs-nav-h, 56px);
	}
}
@keyframes hs-nav-in {
	from { transform: translateY(-100%); }
	to { transform: none; }
}

/* Top member bar (4cd3b07): owner asked for ~half the height — kill the
   Elementor min-height, slim the paddings, shrink the type one step. */
.elementor-2260 .elementor-element.elementor-element-4cd3b07,
.elementor-2260 .elementor-element.elementor-element-4cd3b07 > .elementor-container {
	min-height: 0 !important;
}
.elementor-2260 .elementor-element.elementor-element-4cd3b07 {
	padding-top: 5px !important;
	padding-bottom: 5px !important;
}
.elementor-2260 .elementor-element.elementor-element-4cd3b07 .elementor-widget-container,
.elementor-2260 .elementor-element.elementor-element-4cd3b07 .elementor-element-populated {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
.hs-topbar { font-size: .8rem; line-height: 1.4; }
.hs-topbar__right a { font-size: .68rem; }
/* owner: no bold in the top bar — regular weight reads cleaner this small */
.hs-topbar,
.hs-topbar a,
.hs-topbar__member { font-weight: 400 !important; }

/* Mobile masthead (already sticky via homepage-tweaks §11): frosted white. */
@media (max-width: 991px) {
	#masthead {
		background: rgba(255, 255, 255, 0.85) !important;
		-webkit-backdrop-filter: blur(12px) saturate(1.3);
		backdrop-filter: blur(12px) saturate(1.3);
		box-shadow: 0 8px 24px -20px rgba(20, 48, 26, 0.5);
	}
}

/* ------------------------------------------------------------------ *
 * 7. Trust-strip marquee ([hs_trust_strip marquee="1"])
 * ------------------------------------------------------------------ */

.hs-trust--marquee {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.hs-trust--marquee .hs-trust__track {
	display: flex;
	width: max-content;
	animation: hs-marquee 36s linear infinite;
	will-change: transform;
}
.hs-trust--marquee:hover .hs-trust__track,
.hs-trust--marquee:focus-within .hs-trust__track {
	animation-play-state: paused;
}
.hs-trust__set {
	display: flex;
	align-items: center;
	gap: 2.6rem;
	padding-right: 2.6rem;
	flex: none;
	white-space: nowrap;
}
@keyframes hs-marquee {
	to { transform: translateX(-50%); }
}

/* ------------------------------------------------------------------ *
 * 8. Homepage section mists + wave divider
 *    (page 1013; body.home + full chain outranks Elementor's own rule)
 * ------------------------------------------------------------------ */

body.home .elementor-1013 .elementor-element.elementor-element-7cd3947 {
	background: linear-gradient(180deg, var(--hs-paper) 0%, var(--hs-soft) 88%, var(--hs-soft) 100%);
	position: relative;
}
body.home .elementor-1013 .elementor-element.elementor-element-0850cbd {
	background: linear-gradient(180deg, #FFFFFF 0%, var(--hs-soft) 100%);
}
/* (5e7c4c3 "Shop by Category" keeps its deep-green band — the dark pop
   between two light sections is deliberate rhythm; inner card gradients
   would cover any section background anyway.) */

/* One soft wave under "Top Selling" — hands off to the paper teaser below. */
body.home .elementor-1013 .elementor-element.elementor-element-7cd3947::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 56px;
	pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 34 C 240 62 480 4 720 26 C 960 48 1200 10 1440 32 L 1440 64 L 0 64 Z' fill='%23FBFDFA'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
	z-index: 1;
}

/* ------------------------------------------------------------------ *
 * 9. Chrome quieting
 * ------------------------------------------------------------------ */

/* Navigation: sentence case (parent forces uppercase @2248). */
.main-navigation ul.menu li.menu-item > a {
	text-transform: none;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .01em;
}

/* Shop toolbar: quieter result count, breathing room. */
.woocommerce .woocommerce-result-count {
	color: var(--hs-muted);
	font-size: .92rem;
}

/* Sidebar widgets: hairline cards instead of hard boxes. */
.widget-area .widget {
	border: 1px solid var(--hs-line);
	border-radius: var(--hs-radius-sm);
	background: var(--hs-white);
	box-shadow: var(--hs-shadow-sm);
}

/* Sidebar category tree: the theme drew an icon-font glyph on a green square
   before every link — the glyph renders unevenly across nesting levels. One
   uniform pure-CSS chevron at every depth instead (anchor is display:flex,
   the ::before is a static flex child, so only the visual needs replacing). */
.widget_product_categories li > a::before {
	content: "" !important;
	width: 7px !important;
	height: 7px !important;
	min-width: 7px;
	background: transparent !important;
	border-right: 2px solid var(--hs-green-dark);
	border-bottom: 2px solid var(--hs-green-dark);
	border-radius: 1px;
	transform: rotate(-45deg);
	margin: 0 14px 0 3px !important;
	transition: transform .2s ease, border-color .2s ease;
}
.widget_product_categories li > a:hover::before {
	transform: rotate(-45deg) translate(1px, 1px);
	border-color: var(--hs-green);
}

/* Footer subscribe fine-print: it sits on the green band but inherited a
   dark green at 80% opacity — near-invisible. Force readable white. */
#colophon .hs-newsletter__note {
	color: rgba(255, 255, 255, 0.92) !important;
	opacity: 1 !important;
}

/* Two ambient orbs behind everything — desktop only, plain gradients
   (no filter blur → cheap). html carries the paper color; body is
   transparent so z-index:-1 keeps orbs behind all content. */
@media (min-width: 1025px) {
	body::before,
	body::after {
		content: "";
		position: fixed;
		z-index: -1;
		width: 44vw;
		height: 44vw;
		border-radius: 50%;
		pointer-events: none;
	}
	body::before {
		top: -14vw;
		right: -12vw;
		background: radial-gradient(closest-side, rgba(139, 195, 74, 0.13), transparent 72%);
	}
	body::after {
		bottom: -18vw;
		left: -14vw;
		background: radial-gradient(closest-side, rgba(74, 157, 63, 0.10), transparent 72%);
	}
}

/* ------------------------------------------------------------------ *
 * 9b. Complianz consent banner — restyled to the alpine language
 *     (colors owned here, not in the plugin UI, so they version with git)
 * ------------------------------------------------------------------ */

.cmplz-cookiebanner {
	border-radius: var(--hs-radius) !important;
	border: 1px solid var(--hs-line) !important;
	box-shadow: var(--hs-shadow-lg) !important;
	font-family: inherit !important;
}
.cmplz-cookiebanner .cmplz-title { color: var(--hs-forest); }
.cmplz-cookiebanner .cmplz-btn {
	border-radius: 999px !important;
	text-transform: none !important;
	font-weight: 600 !important;
	transition: transform .18s ease, box-shadow .25s ease;
}
.cmplz-cookiebanner .cmplz-btn.cmplz-accept {
	background: linear-gradient(135deg, var(--hs-green), var(--hs-green-dark)) !important;
	border: 0 !important;
	color: #fff !important;
}
.cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover { box-shadow: var(--hs-glow); }
.cmplz-cookiebanner .cmplz-btn.cmplz-deny,
.cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences,
.cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences {
	background: var(--hs-white) !important;
	border: 1px solid var(--hs-line-strong) !important;
	color: var(--hs-forest) !important;
}
.cmplz-cookiebanner .cmplz-links a { color: var(--hs-green-dark) !important; }

/* ------------------------------------------------------------------ *
 * 10. Reduced motion — stillness for those who ask for it
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.hs-trust--marquee { mask-image: none; -webkit-mask-image: none; }
	.hs-trust--marquee .hs-trust__track { animation: none; flex-wrap: wrap; justify-content: center; }
	.hs-trust__set[aria-hidden="true"] { display: none; }
	.woocommerce ul.products li.product,
	.woocommerce ul.products li.product img.attachment-woocommerce_thumbnail,
	.woocommerce ul.products li.product .shop-action,
	.woocommerce ul.products li.product .shop-content a[class*="product_type_"],
	.woocommerce ul.products li.product .shop-content a[class*="product_type_"]::after,
	.woocommerce ul.products li.product .shop-content .woosq-btn,
	.woocommerce ul.products li.product .shop-content .woosw-btn,
	.woocommerce ul.products li.product .shop-content .woosc-btn,
	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce .single_add_to_cart_button {
		transition: none !important;
		transform: none !important;
	}
	.woocommerce ul.products li.product .shop-action { opacity: 1 !important; }
	.hs-js .hs-reveal { transition-delay: 0ms; }
	.woocommerce div.product .woocommerce-product-gallery .wp-post-image,
	.elementor-element.elementor-element-3bb556c .elementor-widget-image img,
	.elementor-element.elementor-element-83a5bf4 .elementor-widget-image img {
		animation: none;
	}
	.hs-tile--cta { transition: none; }
}