/* ==========================================================================
   Bioolife — storefront stylesheet
   Design language: apothecary/pharmacy rather than soft-wellness.
   Crisp hairlines and small radii instead of pillowy cards; one native
   system font throughout (weight/size carry hierarchy, not typeface) with
   mono reserved for data — prices, barcodes, quantities; neutrals biased
   toward the brand green sampled from the logo.
   Light-only by design — product photography assumes a white ground.
   ========================================================================== */

:root {
	/* Ground + neutrals, biased green so they read as chosen, not inherited */
	--paper:      #ffffff;
	--mist:       #f1f4ef;
	--mist-deep:  #e4eae1;
	--hairline:   #d3dbd0;
	--stone:      #676e66;
	--ink:        #101a13;

	/* Brand green, sampled from the Bioolife logo */
	--leaf:       #1a7a1a;
	--leaf-deep:  #0e5714;
	--leaf-wash:  #e8f1e6;

	/* Single warm signal: price, savings, low stock. Never decorative. */
	--amber:      #b25a08; /* WCAG AA vs white: 4.82:1 */
	--amber-deep: #a35204; /* for text on --amber-wash specifically: 4.96:1 — --amber itself only reaches 4.29:1 there */
	--amber-wash: #fbf0e4;

	--crit:       #a32219;
	--crit-wash:  #fdf1f0;

	/* One native system-font family throughout — San Francisco on Mac/iOS,
	   Segoe UI on Windows, Roboto on Android/Chrome OS. No web fonts, no
	   flash-of-unstyled-text, and it renders equally polished everywhere
	   rather than relying on a serif fallback chain that only really looks
	   right on one OS. Headings are set apart by weight/size, not typeface. */
	--sans:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	--display: var(--sans);
	--mono:    ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

	/* Type scale for UI chrome (labels, meta, list text) — everything below
	   body size now steps through these five values instead of dozens of
	   one-off sizes a hundredth of a rem apart. */
	--fs-2xs: .6875rem; /* 11px — tiny mono labels, chips */
	--fs-xs:  .75rem;   /* 12px — meta, captions */
	--fs-sm:  .8125rem; /* 13px — secondary text, list items */
	--fs-base: .875rem; /* 14px — default UI text */
	--fs-md:  .9375rem; /* 15px — emphasized small text */

	--shell: 1240px;
	--r:     3px;
	--r-lg:  4px;
	--shadow:    0 1px 3px rgba(16, 26, 19, .07);
	--shadow-lg: 0 12px 34px rgba(16, 26, 19, .16);
	--t:      140ms ease; /* hover/focus micro-interactions */
	--t-slow: 240ms ease; /* sliding panels: mini-cart, mobile nav, sticky bar */

	--z-header: 100;
	--z-overlay: 200;
	--z-drawer: 210;
	--z-toast: 300;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}
html, body {
	max-width: 100%;
	overflow-x: hidden;
}
body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
/* Belt-and-suspenders: forces the system-font stack on every element, even if
   a plugin (e.g. Elementor's global kit CSS) sets its own font-family
   somewhere with higher specificity. --sans above is the source of truth;
   this just guarantees it wins everywhere. .star-rating below carries its
   own !important — a class selector beats the universal one even under
   equal !important — so WooCommerce's "star" icon font still renders. */
* {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
}
body.mini-cart-open,
body.nav-open { overflow: hidden; }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
table { width: 100%; border-collapse: collapse; }

h1, h2, h3, h4 {
	font-family: var(--display);
	font-weight: 600;
	line-height: 1.2;
	margin: 0 0 .5em;
}

input, select, textarea {
	font-family: inherit;
	font-size: 1rem;
	padding: 11px 13px;
	border: 1px solid var(--hairline);
	border-radius: var(--r);
	background: var(--paper);
	color: var(--ink);
}
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--leaf);
	outline-offset: 2px;
}

.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.skip-link {
	position: absolute;
	top: -100px; left: 0;
	background: var(--leaf);
	color: var(--paper);
	padding: 10px 16px;
	z-index: 10000;
}
.skip-link:focus { top: 0; }

/* Utility: mono figures wherever digits line up */
.num,
.woocommerce-Price-amount,
.price,
.amount {
	font-variant-numeric: tabular-nums;
}

/* ---------- Shared containers ---------- */
.header-inner,
.footer-inner,
.footer-newsletter-inner,
.site-main,
.post-grid,
.archive-header,
.band-inner {
	max-width: var(--shell);
	margin: 0 auto;
	padding: 0 24px;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.button,
button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	display: inline-block;
	background: var(--leaf);
	color: var(--paper);
	border: 1px solid var(--leaf);
	border-radius: var(--r);
	padding: 12px 20px;
	font-family: var(--sans);
	font-weight: 700;
	font-size: var(--fs-md);
	letter-spacing: .01em;
	cursor: pointer;
	text-align: center;
	transition: background var(--t), border-color var(--t), color var(--t);
}
.button:hover,
button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background: var(--leaf-deep);
	border-color: var(--leaf-deep);
	color: var(--paper);
}
.button:disabled,
.woocommerce a.button.disabled,
.woocommerce button.button:disabled {
	background: transparent;
	border-color: var(--hairline);
	color: var(--stone);
	cursor: not-allowed;
}

/* Secondary: outline */
.button-outline,
.woocommerce a.button.button-outline,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button + a {
	background: transparent;
	color: var(--leaf);
	border-color: var(--leaf);
}
.button-outline:hover {
	background: var(--leaf);
	color: var(--paper);
}

/* Loop "add to cart": icon-only, not icon+label. The button's text ("Ajouter")
   is kept in the DOM at font-size:0 rather than removed — invisible on
   screen but still read by screen readers/assistive tech, which is the
   accessible way to do an icon-only control without losing its label. */
.product-card-actions .button,
.product-card-actions a.button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	font-size: 0;
	background: transparent;
	color: var(--leaf);
	border-color: var(--leaf);
	border-radius: 50%;
}
.product-card-actions .button:hover,
.product-card-actions a.button:hover {
	background: var(--leaf);
	color: var(--paper);
}
/* Cart icon via mask-image (not background-image) specifically so it can use
   background-color: currentColor — the same icon then correctly switches
   from green to white on hover along with the button's text color, with no
   need for a second icon asset. */
.product-card-actions .button::before {
	content: "";
	width: 16px; height: 16px;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M2 5h2l1.5 9.5a2 2 0 002 1.5h6a2 2 0 002-1.5L17 7H5.4' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='8' cy='18' r='1.3' fill='%23000'/%3E%3Ccircle cx='15' cy='18' r='1.3' fill='%23000'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M2 5h2l1.5 9.5a2 2 0 002 1.5h6a2 2 0 002-1.5L17 7H5.4' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='8' cy='18' r='1.3' fill='%23000'/%3E%3Ccircle cx='15' cy='18' r='1.3' fill='%23000'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}
.product-card-actions .added_to_cart {
	display: none;
}

/* ==========================================================================
   WooCommerce notices — WC's own stylesheet is disabled, so these need
   styling here or they render as unstyled text.
   ========================================================================== */

.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.woocommerce-notice,
.woocommerce-noreviews,
.cart-empty,
.wc-empty-cart-message {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	background: var(--mist);
	border: 1px solid var(--hairline);
	border-left: 3px solid var(--leaf);
	border-radius: var(--r);
	padding: 13px 16px;
	margin: 0 0 16px;
	font-size: var(--fs-md);
	list-style: none;
}
.woocommerce-error {
	border-left-color: var(--crit);
	background: var(--crit-wash);
	color: var(--crit);
}
.woocommerce-info { border-left-color: var(--leaf); }
ul.woocommerce-error li,
ul.woocommerce-message li,
ul.woocommerce-info li { margin: 0; }
.woocommerce-message .button,
.woocommerce-error .button,
.woocommerce-info .button {
	margin-left: auto;
	flex-shrink: 0;
}
.woocommerce form .form-row.woocommerce-invalid input,
.woocommerce form .form-row.woocommerce-invalid select {
	border-color: var(--crit);
}

/* ==========================================================================
   Header
   ========================================================================== */

.announcement-bar {
	background: var(--leaf-deep);
	color: var(--paper);
	text-align: center;
	font-size: var(--fs-sm);
	letter-spacing: .01em;
	padding: 7px 16px;
}

.site-header {
	border-bottom: 1px solid var(--hairline);
	background: var(--paper);
	position: sticky;
	top: 0;
	z-index: var(--z-header);
}
.header-inner {
	display: flex;
	align-items: center;
	gap: 26px;
	padding-top: 16px;
	padding-bottom: 16px;
}

.site-branding { display: flex; align-items: center; flex-shrink: 0; }
.site-branding img { width: 140px; height: auto; }
.site-title-link {
	font-family: var(--display);
	font-size: 1.42rem;
	font-weight: 700;
	letter-spacing: -.02em;
}

/* flex: 0 (not 1) so the nav takes its natural content width and doesn't
   compete with the search bar for growth — .header-search-bar is the
   element that should expand into the remaining space. */
.main-navigation { flex: 0 1 auto; display: flex; align-items: center; min-width: 0; }
.main-navigation > ul {
	display: flex;
	gap: 22px;
	flex-wrap: wrap;
}
.main-navigation ul ul { display: none; }
.main-navigation a {
	font-size: var(--fs-md);
	font-weight: 500;
	padding: 4px 0;
	border-bottom: 2px solid transparent;
	transition: color var(--t), border-color var(--t);
}
.main-navigation a:hover,
.main-navigation .current-menu-item > a {
	color: var(--leaf);
	border-bottom-color: var(--leaf);
}

/* Category bar — persistent row of links across the header's bottom edge,
   not a dropdown; scrolls horizontally instead of wrapping so it never
   grows the header's height. */
.category-bar {
	border-top: 1px solid var(--hairline);
	overflow-x: auto;
	scrollbar-width: none;
}
.category-bar::-webkit-scrollbar { display: none; }
.category-bar-list {
	max-width: var(--shell);
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	justify-content: space-between;
	gap: 4px;
	white-space: nowrap;
}
.category-bar-list li { flex-shrink: 0; }
.category-bar-list li:last-child a { padding-right: 0; }
.category-bar-list a {
	display: block;
	padding: 10px 12px;
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--stone);
	border-bottom: 2px solid transparent;
	transition: color var(--t), border-color var(--t);
}
.category-bar-list a:hover {
	color: var(--leaf);
	border-bottom-color: var(--leaf);
}

.header-actions { display: flex; align-items: center; gap: 9px; margin-left: auto; }
.header-icon-button {
	position: relative;
	width: 38px; height: 38px;
	display: inline-flex;
	align-items: center; justify-content: center;
	background: transparent;
	border: 0;
	border-radius: var(--r);
	color: var(--ink);
	padding: 0;
	cursor: pointer;
	transition: background-color var(--t), color var(--t);
}
.header-icon-button:hover {
	background: var(--mist);
	color: var(--leaf);
}
.cart-count {
	position: absolute;
	top: -6px; right: -6px;
	min-width: 17px; height: 17px;
	padding: 0 4px;
	display: inline-flex;
	align-items: center; justify-content: center;
	background: var(--amber);
	color: var(--paper);
	border-radius: 9px;
	font-family: var(--mono);
	font-size: var(--fs-2xs);
	font-weight: 700;
}

/* Inline search bar — sits between the nav and the account/cart icons on
   desktop. Below the nav breakpoint it drops to its own full-width row
   instead (see the 900px query), rather than being hidden behind a toggle. */
.header-search-bar {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 auto;
	min-width: 160px;
	margin: 0 4px;
	padding: 0 12px;
	height: 40px;
	background: var(--mist);
	border: 1px solid var(--hairline);
	border-radius: var(--r);
	transition: border-color var(--t), background var(--t);
}
.header-search-bar:focus-within {
	background: var(--paper);
	border-color: var(--leaf);
}
.header-search-bar-icon { color: var(--stone); flex-shrink: 0; }
.header-search-bar:focus-within .header-search-bar-icon { color: var(--leaf); }
.header-search-bar-input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	padding: 0;
	font-size: var(--fs-base);
}
.header-search-bar-input:focus { outline: none; }
/* Native browser "clear" (x) button on type=search inputs */
.header-search-bar-input::-webkit-search-cancel-button { cursor: pointer; }

/* Results dropdown — shared by the desktop bar and the mobile panel. */
.header-search-results {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	background: var(--paper);
	border: 1px solid var(--hairline);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-lg);
	max-height: 70vh;
	overflow-y: auto;
	z-index: var(--z-drawer);
}
.header-search-status {
	padding: 16px 14px;
	font-size: var(--fs-sm);
	color: var(--stone);
	text-align: center;
}
.header-search-results-list { display: flex; flex-direction: column; padding: 6px; }
.header-search-result {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px;
	border-radius: var(--r);
}
.header-search-result:hover,
.header-search-result.is-active {
	background: var(--mist);
}
.header-search-result img {
	width: 40px; height: 40px;
	object-fit: contain;
	background: var(--mist);
	border: 1px solid var(--hairline);
	border-radius: 2px;
	flex-shrink: 0;
}
.header-search-result-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.header-search-result-title {
	font-size: var(--fs-sm);
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.header-search-result-price {
	font-family: var(--mono);
	font-size: var(--fs-xs);
	color: var(--leaf-deep);
}
.header-search-result.is-out-of-stock .header-search-result-price { color: var(--stone); }
.header-search-view-all {
	display: block;
	text-align: center;
	padding: 11px;
	border-top: 1px solid var(--hairline);
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--leaf);
}
.header-search-view-all:hover { background: var(--mist); }

.search-form { display: flex; }
.search-form .search-field {
	flex: 1;
	min-width: 0;
	border-radius: var(--r) 0 0 var(--r);
}
.search-form .search-submit { border-radius: 0 var(--r) var(--r) 0; }

/* Mobile nav trigger */
.menu-toggle {
	display: none;
	background: transparent;
	border: 1px solid var(--hairline);
	border-radius: var(--r);
	padding: 9px 8px;
	cursor: pointer;
}
.menu-toggle-bar {
	display: block;
	width: 18px; height: 1.5px;
	background: var(--ink);
	margin: 4px 0;
}

.nav-overlay {
	position: fixed;
	inset: 0;
	background: rgba(16, 26, 19, .45);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--t);
	z-index: var(--z-overlay);
}
.nav-overlay.is-visible { opacity: 1; pointer-events: auto; }

/* ==========================================================================
   Mini-cart drawer
   ========================================================================== */

.mini-cart-drawer {
	position: fixed;
	top: 0; right: 0; bottom: 0;
	width: 100%;
	max-width: 396px;
	background: var(--paper);
	box-shadow: var(--shadow-lg);
	transform: translateX(100%);
	transition: transform var(--t-slow);
	z-index: var(--z-drawer);
	display: flex;
	flex-direction: column;
}
.mini-cart-drawer.is-open { transform: translateX(0); }

.mini-cart-drawer-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 17px 20px;
	border-bottom: 1px solid var(--hairline);
}
.mini-cart-drawer-header h2 {
	margin: 0;
	font-size: 1.05rem;
}
.mini-cart-close {
	background: transparent;
	border: 0;
	color: var(--stone);
	font-size: 1.5rem;
	line-height: 1;
	padding: 2px 6px;
	cursor: pointer;
}
.mini-cart-close:hover { background: transparent; color: var(--ink); }

.mini-cart-contents {
	flex: 1;
	overflow-y: auto;
	padding: 18px 20px;
	display: flex;
	flex-direction: column;
}
.mini-cart-empty { color: var(--stone); text-align: center; margin-top: 36px; }
.mini-cart-shop-link { align-self: center; }

.mini-cart-items { display: flex; flex-direction: column; gap: 16px; }
.mini-cart-item {
	display: grid;
	grid-template-columns: 60px minmax(0, 1fr) auto;
	gap: 12px;
	align-items: start;
}
.mini-cart-item-image img {
	width: 60px; height: 60px;
	object-fit: cover;
	background: var(--mist);
	border: 1px solid var(--hairline);
	border-radius: var(--r);
}
.mini-cart-item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mini-cart-item-title { font-size: var(--fs-base); font-weight: 600; }
.mini-cart-item-qty { font-family: var(--mono); font-size: var(--fs-xs); color: var(--stone); }
.mini-cart-item-price { font-family: var(--mono); font-weight: 700; font-size: var(--fs-base); }
.mini-cart-item-remove { color: var(--stone); font-size: 1.1rem; line-height: 1; padding: 2px 4px; }
.mini-cart-item-remove:hover { color: var(--crit); }

.mini-cart-footer {
	border-top: 1px solid var(--hairline);
	margin-top: 18px;
	padding-top: 16px;
	display: flex;
	flex-direction: column;
	gap: 9px;
}
.mini-cart-subtotal {
	display: flex;
	justify-content: space-between;
	font-weight: 700;
	margin-bottom: 2px;
}
.mini-cart-subtotal .amount { font-family: var(--mono); }

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */

.woocommerce-breadcrumb,
.breadcrumbs {
	display: none;
	max-width: var(--shell);
	margin: 16px auto 0;
	padding: 0 24px;
	font-size: var(--fs-sm);
	color: var(--stone);
}
.shop-layout .woocommerce-breadcrumb {
	max-width: none;
	margin: 16px 0 14px;
	padding: 0;
}
.woocommerce-breadcrumb a:hover,
.breadcrumbs a:hover { color: var(--leaf); text-decoration: underline; }

/* ==========================================================================
   Shop layout — main + sidebar share this grid parent
   ========================================================================== */

.shop-layout {
	max-width: var(--shell);
	margin: 0 auto;
	padding: 0 24px;
	display: grid;
	grid-template-columns: 288px minmax(0, 1fr);
	gap: 36px;
	align-items: start;
}
.shop-layout--full { grid-template-columns: minmax(0, 1fr); }
/* Content first in the DOM, filters visually left. */
.shop-layout > .site-main {
	grid-column: 2;
	grid-row: 1;
	max-width: none;
	margin: 0;
	padding: 0;
	min-width: 0;
}
.shop-layout--full > .site-main { grid-column: 1; }
.shop-layout > #secondary { grid-column: 1; grid-row: 1; }

.shop-layout.is-loading { transition: opacity var(--t); }
.shop-layout.is-loading > .site-main { opacity: .45; pointer-events: none; }

/* Shop page header — now a sibling before .shop-layout (see inc/woocommerce.php),
   so it needs its own copy of the shell width/padding to line up with the
   grid below instead of inheriting them from a parent. */
.woocommerce-products-header {
	max-width: var(--shell);
	margin: 20px auto 10px;
	padding: 0 24px;
}
.woocommerce-products-header__title,
.archive-title {
	font-size: 1.68rem;
	letter-spacing: -.015em;
	margin-bottom: 4px;
}
.woocommerce-products-header .page-description,
.archive-description { color: var(--stone); font-size: var(--fs-md); }
.woocommerce-products-header .page-description p:empty { display: none; }

/* Toolbar — count and sort are unwrapped siblings, so they're floated */
.woocommerce-result-count,
.woocommerce-ordering { margin: 0; }
.shop-layout .woocommerce-result-count {
	float: left;
	font-size: var(--fs-sm);
	color: var(--stone);
	line-height: 40px;
	font-family: var(--mono);
}
.shop-layout .woocommerce-ordering { float: right; }
.woocommerce-ordering select,
select.orderby {
	padding: 9px 12px;
	font-size: var(--fs-base);
	max-width: 100%;
}
.shop-layout ul.products,
.shop-layout .woocommerce-pagination { clear: both; }
.shop-layout ul.products { padding-top: 14px; }

/* ==========================================================================
   Product grid
   ========================================================================== */

ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin: 0 !important;
	padding: 0;
	list-style: none;
}
.shop-layout ul.products,
.related ul.products,
.upsells ul.products {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.product-card {
	display: flex;
	flex-direction: column;
	background: var(--paper);
	border: 1px solid var(--hairline);
	border-radius: var(--r);
	overflow: hidden;
	transition: border-color var(--t);
}
.product-card:hover { border-color: var(--leaf); }

/* Portrait ratio, because the store's product photography is portrait
   (bottles/boxes, e.g. 1920x2560). Forcing 1:1 left tall products floating
   in a square with wide empty gutters. */
.product-card-image {
	position: relative;
	aspect-ratio: 1;
	background: var(--paper);
	border-bottom: 1px solid var(--hairline);
}
.product-card-image img {
	width: 100%; height: 100%;
	object-fit: contain;
	padding: 12px;
}
.product-card-image .onsale,
.product-card-image .bioolife-chip {
	position: absolute;
	top: 10px; left: 10px;
	font-family: var(--mono);
	font-size: var(--fs-2xs);
	font-weight: 700;
	letter-spacing: .07em;
	background: var(--paper);
	border: 1px solid var(--hairline);
	color: var(--leaf-deep);
	padding: 3px 6px;
	border-radius: 2px;
}
.product-card-image .onsale {
	background: var(--amber-wash);
	border-color: var(--amber);
	color: var(--amber-deep);
}
.product-card-image .out-of-stock-chip {
	color: var(--stone);
}

.product-card-body { padding: 13px 14px 0; flex: 1; }
.product-card-brand {
	font-size: var(--fs-2xs);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--stone);
	font-weight: 700;
	margin-bottom: 5px;
}
.product-card-title {
	font-family: var(--display);
	font-size: var(--fs-md);
	font-weight: 600;
	line-height: 1.32;
	margin: 0 0 8px;
	/* Clamped to 2 lines so uneven title lengths don't stagger the price/
	   add-to-cart row across a grid of otherwise same-height cards. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.product-card-meta {
	font-family: var(--mono);
	font-size: var(--fs-xs);
	color: var(--stone);
}
.product-card-rating {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0 0 6px;
	font-family: var(--mono);
	font-size: var(--fs-xs);
}
.product-card-rating-star {
	width: 12px; height: 12px;
	flex-shrink: 0;
	background-color: var(--amber);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1l2.6 5.4 5.9.8-4.3 4.2 1 5.9L10 14.9l-5.2 2.4 1-5.9L1.5 7.2l5.9-.8L10 1z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1l2.6 5.4 5.9.8-4.3 4.2 1 5.9L10 14.9l-5.2 2.4 1-5.9L1.5 7.2l5.9-.8L10 1z'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}
.product-card-rating-value { font-weight: 700; color: var(--ink); }
.product-card-rating-count { color: var(--stone); }
.product-card-foot {
	padding: 11px 14px 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
}
.product-card-price {
	font-family: var(--mono);
	font-weight: 700;
	font-size: var(--fs-md);
}
.product-card-price del {
	color: var(--stone);
	font-weight: 400;
	font-size: var(--fs-sm);
	margin-right: 5px;
}
.product-card-price ins { text-decoration: none; }
.product-card-price .woocommerce-Price-currencySymbol {
	font-size: var(--fs-xs);
	color: var(--stone);
	font-weight: 600;
}

/* ==========================================================================
   Single product
   ========================================================================== */

.single-product .site-main { padding-top: 8px; padding-bottom: 60px; }

/* Only gallery + summary occupy the two columns; anything else spans full
   width, so stray siblings can't land in a half-width column and collide. */
.woocommerce div.product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 470px);
	column-gap: 52px;
	row-gap: 8px;
	align-items: start;
}
.woocommerce div.product > * {
	grid-column: 1 / -1;
	min-width: 0;
}
.woocommerce div.product > .woocommerce-product-gallery {
	grid-column: 1;
	grid-row: 1;
}
.woocommerce div.product > .summary,
.woocommerce div.product > .entry-summary {
	grid-column: 2;
	grid-row: 1;
}

/* --- Gallery: the image stands on its own, no framing panel --- */
.woocommerce div.product .woocommerce-product-gallery {
	position: sticky;
	top: 96px;
}
.woocommerce div.product .woocommerce-product-gallery__wrapper {
	position: relative;
	margin: 0;
	background: var(--paper);
	border-radius: 2px;
	overflow: hidden;
}
.woocommerce div.product .woocommerce-product-gallery__image { cursor: zoom-in; }
/* WooCommerce's own zoom trigger — a real, working, keyboard-accessible
   button that already opens the lightbox correctly (single-product.js binds
   its click handler directly to this element). It just injects a literal 🔍
   emoji as its content at runtime, so give it a real icon instead: keep the
   emoji in the DOM at font-size:0 (still readable by screen readers) and
   draw the icon with CSS the same way every other icon in this theme works. */
.woocommerce div.product .woocommerce-product-gallery__trigger {
	position: absolute;
	right: 12px; bottom: 12px;
	width: 34px; height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: var(--paper);
	box-shadow: 0 1px 4px rgba(16, 26, 19, .18);
	z-index: 3;
	font-size: 0;
}
.woocommerce div.product .woocommerce-product-gallery__trigger::before {
	content: "";
	width: 17px; height: 17px;
	background-color: var(--ink);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='8.5' cy='8.5' r='5.5' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M12.8 12.8 17 17' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M8.5 6.3v4.4M6.3 8.5h4.4' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='8.5' cy='8.5' r='5.5' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M12.8 12.8 17 17' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M8.5 6.3v4.4M6.3 8.5h4.4' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}
.woocommerce div.product .woocommerce-product-gallery__trigger:hover::before { background-color: var(--leaf); }
.woocommerce div.product .woocommerce-product-gallery img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
	border-radius: 2px;
}
.woocommerce div.product .zoomImg,
.woocommerce div.product .zoomWindow,
.woocommerce div.product .zoomContainer {
	z-index: calc(var(--z-drawer) + 10) !important;
}
.woocommerce div.product .flex-viewport {
	border-radius: 2px;
	overflow: hidden;
	background: var(--paper);
}
.woocommerce div.product .woocommerce-product-gallery .onsale {
	position: absolute;
	top: 12px; left: 12px;
	z-index: 2;
	font-family: var(--mono);
	font-size: var(--fs-2xs);
	font-weight: 700;
	letter-spacing: .07em;
	background: var(--amber-wash);
	border: 1px solid var(--amber);
	color: var(--amber-deep);
	padding: 4px 8px;
	border-radius: 2px;
}

/* Gallery arrows */
.woocommerce div.product ul.flex-direction-nav { margin: 0; }
.woocommerce div.product .flex-direction-nav li { list-style: none; }
.woocommerce div.product .flex-direction-nav a {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 36px; height: 36px;
	display: flex;
	align-items: center; justify-content: center;
	background: var(--paper);
	border: 1px solid var(--hairline);
	border-radius: 50%;
	font-size: 0;
	opacity: 0;
	transition: opacity var(--t);
	z-index: 2;
}
.woocommerce div.product .woocommerce-product-gallery:hover .flex-direction-nav a { opacity: 1; }
.woocommerce div.product .flex-direction-nav a::before {
	content: "";
	width: 7px; height: 7px;
	border: 1.6px solid var(--ink);
	border-width: 1.6px 1.6px 0 0;
}
.woocommerce div.product .flex-direction-nav .flex-nav-prev a { left: 10px; }
.woocommerce div.product .flex-direction-nav .flex-nav-prev a::before { transform: rotate(-135deg) translate(1px, -1px); }
.woocommerce div.product .flex-direction-nav .flex-nav-next a { right: 10px; }
.woocommerce div.product .flex-direction-nav .flex-nav-next a::before { transform: rotate(45deg) translate(-1px, -1px); }

/* Thumbnails */
.woocommerce div.product .flex-control-thumbs {
	display: flex;
	gap: 8px;
	margin-top: 14px;
	flex-wrap: wrap;
}
.woocommerce div.product .flex-control-thumbs li { width: 62px; }
.woocommerce div.product .flex-control-thumbs img {
	background: var(--paper);
	border: 1px solid var(--hairline);
	border-radius: 2px;
	aspect-ratio: 1;
	object-fit: contain;
	padding: 3px;
	cursor: pointer;
	opacity: .8;
	transition: opacity var(--t), border-color var(--t);
}
.woocommerce div.product .flex-control-thumbs img:hover { opacity: 1; }
.woocommerce div.product .flex-control-thumbs img.flex-active {
	border-color: var(--leaf);
	box-shadow: inset 0 0 0 1px var(--leaf);
	opacity: 1;
}

/* PhotoSwipe lightbox — exempt from the global img max-width reset */
.pswp { z-index: 9999; }
.pswp img { max-width: none; max-height: none; }

/* Real SVG icons for the lightbox controls, replacing WooCommerce's bundled
   PhotoSwipe sprite (a low-res PNG that something in the stack — LiteSpeed's
   optimizer, going by the injected rule — was forcing over the SVG version
   anyway). !important is needed to beat that forced background-image. */
.pswp__button {
	background-image: none !important;
	opacity: 1 !important;
}
.pswp__button--share,
.pswp__button--fs { display: none !important; }
.pswp__button--zoom,
.pswp__button--close {
	position: relative;
	width: 44px; height: 44px;
	border-radius: 50%;
	background-color: rgba(16, 26, 19, .45) !important;
	transition: background-color var(--t);
}
.pswp__button--zoom:hover,
.pswp__button--close:hover { background-color: rgba(16, 26, 19, .7) !important; }
.pswp__button--zoom::before,
.pswp__button--close::before {
	content: "";
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 20px; height: 20px;
	background-color: var(--paper);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}
.pswp__button--zoom::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='8.5' cy='8.5' r='5.5' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M12.8 12.8 17 17' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M8.5 6.3v4.4M6.3 8.5h4.4' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='8.5' cy='8.5' r='5.5' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M12.8 12.8 17 17' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M8.5 6.3v4.4M6.3 8.5h4.4' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}
.pswp--zoomed-in .pswp__button--zoom::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='8.5' cy='8.5' r='5.5' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M12.8 12.8 17 17' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M6.3 8.5h4.4' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='8.5' cy='8.5' r='5.5' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M12.8 12.8 17 17' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M6.3 8.5h4.4' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}
.pswp__button--close::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4.5 4.5l11 11M15.5 4.5l-11 11' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4.5 4.5l11 11M15.5 4.5l-11 11' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
.pswp__button--arrow--left,
.pswp__button--arrow--right { background: none !important; }
.pswp__button--arrow--left::before,
.pswp__button--arrow--right::before {
	content: "";
	position: absolute;
	top: 50%; left: 50%;
	width: 42px; height: 42px;
	margin: -21px 0 0 -21px;
	border-radius: 50%;
	background-color: rgba(16, 26, 19, .45) !important;
	background-image: none !important;
}
.pswp__button--arrow--left::after,
.pswp__button--arrow--right::after {
	content: "";
	position: absolute;
	top: 50%; left: 50%;
	width: 10px; height: 10px;
	border: 1.8px solid var(--paper);
	border-width: 1.8px 1.8px 0 0;
}
.pswp__button--arrow--left::after { transform: translate(-30%, -50%) rotate(-135deg); }
.pswp__button--arrow--right::after { transform: translate(-70%, -50%) rotate(45deg); }

/* --- Buy box --- */
.woocommerce div.product .summary.entry-summary { max-width: none; }

/* Legacy code emits a couple of empty wrappers into the summary; they'd
   otherwise leave dead vertical gaps between blocks. */
.woocommerce div.product .summary > div:empty,
.woocommerce div.product .summary > p:empty { display: none; }

.woocommerce div.product .summary .product_title {
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	letter-spacing: -.015em;
	margin-bottom: 10px;
}

/* Brand + barcode line (output by bioolife-store-logic) — plain metadata,
   no box: it's a footnote to the title, not a callout. */
.woocommerce div.product .brand-ean {
	font-family: var(--mono) !important;
	font-size: var(--fs-xs) !important;
	color: var(--stone) !important;
	margin: 0 0 16px !important;
	padding: 0;
	background: none;
	border: 0;
}
.woocommerce div.product .brand-ean a {
	color: var(--ink) !important;
	font-weight: 600;
	text-decoration: none !important;
}
.woocommerce div.product .brand-ean a:hover { color: var(--leaf) !important; }

/* Rating */
.woocommerce div.product .woocommerce-product-rating,
.woocommerce div.product .custom-rating-display {
	margin-bottom: 14px !important;
	font-size: var(--fs-base);
	color: var(--stone);
}
.woocommerce div.product .custom-rating-display a { color: var(--stone) !important; }
.woocommerce div.product .custom-rating-display a:hover { color: var(--leaf) !important; }

/* Price */
.woocommerce div.product p.price {
	font-family: var(--mono);
	font-size: 1.75rem;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--ink);
	margin: 0 0 16px;
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
}
.woocommerce div.product p.price del {
	color: var(--stone);
	font-size: var(--fs-md);
	font-weight: 400;
}
.woocommerce div.product p.price ins { text-decoration: none; }
.woocommerce div.product p.price .woocommerce-Price-currencySymbol {
	font-size: var(--fs-base);
	font-weight: 600;
	color: var(--stone);
}

.product-authenticity-badge {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 14px;
	font-size: var(--fs-md);
	font-weight: 700;
	color: var(--leaf-deep);
}
.product-authenticity-badge-icon {
	width: 13px; height: 13px;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 2 3.5 4.5v5c0 4.4 2.8 7.7 6.5 9 3.7-1.3 6.5-4.6 6.5-9v-5L10 2Z' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='m7 10 2 2 4-4' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 2 3.5 4.5v5c0 4.4 2.8 7.7 6.5 9 3.7-1.3 6.5-4.6 6.5-9v-5L10 2Z' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='m7 10 2 2 4-4' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* Short description bullets */
.woocommerce div.product .woocommerce-product-details__short-description {
	margin-bottom: 18px;
	font-size: var(--fs-md);
}
.woocommerce div.product .woocommerce-product-details__short-description ul {
	display: grid;
	gap: 7px;
}
.woocommerce div.product .woocommerce-product-details__short-description li {
	position: relative;
	padding-left: 20px;
	list-style: none;
}
.woocommerce div.product .woocommerce-product-details__short-description li::before {
	content: "";
	position: absolute;
	left: 2px; top: .54em;
	width: 8px; height: 4px;
	border: 1.8px solid var(--leaf);
	border-width: 0 0 1.8px 1.8px;
	transform: rotate(-45deg);
}

/* Availability line */
.woocommerce div.product .stock,
.woocommerce div.product .custom_availability {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--fs-base);
	font-weight: 600;
	margin: 0 0 14px;
}
.woocommerce div.product p.stock { margin-bottom: 14px; }

/* Add-to-cart form — grid rather than flex-grow so the button's width is a
   deterministic "everything left over", not something that has to win a
   flex-basis/min-content tug-of-war against the quantity control (which
   differs in markup between a plain number input and a variation's select). */
#add-to-cart-form { margin-bottom: 18px; }
/* :not(.variations_form) — a variable product's form.cart holds the
   attribute table + .single_variation_wrap as its direct children, not
   quantity/button directly, so this grid must not apply there (it was
   scrambling the attribute picker into the same 2-column grid). */
.woocommerce div.product form.cart:not(.variations_form) {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: stretch;
	gap: 10px;
	margin: 0;
}
/* Variable products nest quantity + button inside this wrapper instead of
   putting them directly in form.cart, so the grid rule above never reaches
   them there — same treatment, applied one level deeper. */
.woocommerce div.product .woocommerce-variation-add-to-cart {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: stretch;
	gap: 10px;
	margin-top: 4px;
}
.quantity {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--hairline);
	border-radius: var(--r);
	overflow: hidden;
	width: fit-content;
}
.quantity .qty,
.quantity select {
	width: 54px;
	border: 0;
	text-align: center;
	text-align-last: center;
	border-radius: 0;
	background: var(--paper);
	font-family: var(--mono);
	padding: 10px 4px;
}
.quantity-stepper-button {
	width: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--mist);
	border: 0;
	color: var(--ink);
	padding: 0;
	cursor: pointer;
	border-radius: 0;
}
.quantity-stepper-button:hover { background: var(--mist-deep); }
.woocommerce div.product form.cart .button {
	width: 100%;
	font-size: 1rem;
	padding: 14px 22px;
}
.woocommerce div.product form.cart .button.loading { opacity: .6; pointer-events: none; }

/* Delivery / payment / returns — printed as .woocommerce-message by the
   legacy plugin. A plain stacked list, divided by hairlines rather than
   boxed — reads as reference info, not a series of alerts. */
.woocommerce div.product .summary .woocommerce-message {
	display: block;
	position: relative;
	background: none;
	border: 0;
	border-top: 1px solid var(--hairline);
	border-radius: 0;
	margin: 0;
	padding: 12px 0 12px 30px;
	font-size: var(--fs-base);
	color: var(--stone);
}
.woocommerce div.product .summary .woocommerce-message:first-of-type {
	margin-top: 4px;
}
.woocommerce div.product .summary .woocommerce-message:last-of-type {
	border-bottom: 1px solid var(--hairline);
	margin-bottom: 18px;
}
.woocommerce div.product .summary .woocommerce-message strong {
	display: block;
	color: var(--ink);
	font-family: var(--sans);
	font-size: var(--fs-base);
	font-weight: 700;
	margin-bottom: 2px;
}
.woocommerce div.product .summary .woocommerce-message br { display: none; }

/* One icon per message, in their fixed output order (Livraison, Paiement,
   Retour — hardcoded in that sequence by bioolife-store-logic). Drawn as
   inline SVG data URIs so no icon font or image request is needed; stroke
   color/weight matches the header's icon buttons. */
.woocommerce div.product .summary .woocommerce-message::before {
	content: "";
	position: absolute;
	left: 0; top: 14px;
	width: 20px; height: 20px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px;
}
/* :nth-of-type counts by raw tag name among ALL sibling <div>s, not by
   class — since other divs precede these three in the summary (add-to-cart
   wrapper, trust list, ...), nth-of-type(1/2/3) never matched any of them.
   Adjacent-sibling combinators target by position *relative to same-class
   siblings* instead, which is what's actually needed here: default to the
   1st icon, then override on any message preceded by one/two others. */
.woocommerce div.product .summary .woocommerce-message::before {
	/* delivery truck — default, applies to the first message */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a7a1a' stroke-width='1.7'%3E%3Cpath d='M2.5 7h11v10h-11z' stroke-linejoin='round'/%3E%3Cpath d='M13.5 10.5h5l3 3v3.5h-8z' stroke-linejoin='round'/%3E%3Ccircle cx='6.5' cy='18.5' r='1.8'/%3E%3Ccircle cx='17' cy='18.5' r='1.8'/%3E%3C/svg%3E");
}
.woocommerce div.product .summary .woocommerce-message + .woocommerce-message::before {
	/* cash on delivery — any message with one .woocommerce-message before it */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a7a1a' stroke-width='1.7'%3E%3Crect x='2.5' y='6' width='19' height='12' rx='2'/%3E%3Cpath d='M2.5 10h19'/%3E%3C/svg%3E");
}
.woocommerce div.product .summary .woocommerce-message + .woocommerce-message + .woocommerce-message::before {
	/* returns — the message with two .woocommerce-message in a row before it */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a7a1a' stroke-width='1.7'%3E%3Cpath d='M3.5 12a8.5 8.5 0 1 0 2.6-6.1' stroke-linecap='round'/%3E%3Cpath d='M3 4v5h5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Satisfaction/shipping/tracking list — the legacy plugin sets an inline
   `display: inline-table` on this div. inline-table shrink-wraps to its
   content width (like inline-block), which is what actually put it out of
   layout: it rendered narrower than the full-width blocks above and below
   it. Forcing width explicitly rather than trusting the display override
   alone, since inline styles win ties and this needs to be bulletproof. */
.woocommerce div.product .product-widget {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	margin: 0 0 16px;
}
.woocommerce div.product .product-widget ul {
	display: grid;
	gap: 6px;
	width: 100%;
}
.woocommerce div.product .product-widget li {
	position: relative;
	padding-left: 20px;
	font-size: var(--fs-base);
	color: var(--stone);
	list-style: none;
}
.woocommerce div.product .product-widget li::before {
	content: "";
	position: absolute;
	left: 2px; top: .54em;
	width: 8px; height: 4px;
	border: 1.8px solid var(--leaf);
	border-width: 0 0 1.8px 1.8px;
	transform: rotate(-45deg);
}

/* Product meta */
.woocommerce div.product .product_meta {
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid var(--hairline);
	font-family: var(--mono);
	font-size: var(--fs-xs);
	color: var(--stone);
}
.woocommerce div.product .product_meta a { color: var(--leaf); }

/* Description + reviews, side by side below the fold */
.product-description-reviews-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 52px;
	align-items: start;
	margin-top: 44px;
}
.woocommerce-product-description {
	font-size: var(--fs-md);
}
.woocommerce-product-description h2,
.woocommerce-product-description h3 { font-size: 1.16rem; margin-top: 26px; }
.woocommerce-product-description img { border-radius: var(--r); }
.woocommerce-product-reviews {
	padding-left: 44px;
	border-left: 1px solid var(--hairline);
}

@media (max-width: 900px) {
	.product-description-reviews-row { grid-template-columns: minmax(0, 1fr); gap: 36px; }
	.woocommerce-product-reviews {
		padding-left: 0;
		padding-top: 32px;
		border-left: 0;
		border-top: 1px solid var(--hairline);
	}
}

.woocommerce-tabs { margin-top: 40px; }
.woocommerce-tabs ul.tabs {
	display: flex;
	gap: 6px;
	border-bottom: 1px solid var(--hairline);
	margin-bottom: 22px;
	flex-wrap: wrap;
}
.woocommerce-tabs ul.tabs li {
	padding: 11px 16px;
	font-weight: 600;
	font-size: var(--fs-md);
	color: var(--stone);
	border-bottom: 2px solid transparent;
	cursor: pointer;
	list-style: none;
}
.woocommerce-tabs ul.tabs li.active,
.woocommerce-tabs ul.tabs li:hover {
	color: var(--leaf);
	border-bottom-color: var(--leaf);
}
.woocommerce-tabs .woocommerce-Tabs-panel { max-width: 78ch; }

.related.products,
.upsells.products { margin-top: 48px; }
.related.products > h2,
.upsells.products > h2 {
	font-size: 1.3rem;
	border-bottom: 1px solid var(--hairline);
	padding-bottom: 12px;
	margin-bottom: 22px;
}

/* Sticky add-to-cart */
.sticky-add-to-cart {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	background: rgba(255, 255, 255, .94);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-top: 1px solid var(--hairline);
	box-shadow: 0 -3px 18px rgba(16, 26, 19, .09);
	padding: 10px 16px;
	transform: translateY(100%);
	transition: transform var(--t-slow);
	z-index: var(--z-header);
}
.sticky-add-to-cart.is-visible { transform: translateY(0); }
.sticky-add-to-cart-inner {
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: var(--shell);
	margin: 0 auto;
}
.sticky-add-to-cart-image {
	width: 42px; height: 42px;
	object-fit: contain;
	background: var(--mist);
	border: 1px solid var(--hairline);
	border-radius: var(--r);
	flex-shrink: 0;
}
.sticky-add-to-cart-details { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sticky-add-to-cart-title {
	font-weight: 600;
	font-size: var(--fs-base);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.sticky-add-to-cart-price {
	font-family: var(--mono);
	font-weight: 700;
	font-size: var(--fs-base);
	white-space: nowrap;
}
.sticky-add-to-cart-button { flex-shrink: 0; }

/* ==========================================================================
   Star ratings — WooCommerce's bundled icon font, re-declared because WC's
   own stylesheet is disabled.
   ========================================================================== */

@font-face {
	font-family: star;
	src: url("/wp-content/plugins/woocommerce/assets/fonts/star.woff") format("woff"),
		url("/wp-content/plugins/woocommerce/assets/fonts/star.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: block;
}
.star-rating {
	overflow: hidden;
	position: relative;
	height: 1em;
	line-height: 1;
	width: 5.4em;
	font-family: star !important;
	font-weight: 400;
	flex-shrink: 0;
}
.star-rating::before {
	content: "\53\53\53\53\53";
	float: left;
	top: 0; left: 0;
	position: absolute;
	color: var(--hairline);
}
.star-rating span {
	overflow: hidden;
	float: left;
	top: 0; left: 0;
	position: absolute;
	padding-top: 1.5em;
	/* The universal font-family rule near the top of this file matches this
	   span directly (it's a real element, not inherited from .star-rating),
	   which otherwise overrides the icon font this element needs to draw
	   the filled/colored stars via ::before below. */
	font-family: star !important;
}
.star-rating span::before {
	content: "\53\53\53\53\53";
	top: 0; left: 0;
	position: absolute;
	color: var(--amber);
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.woocommerce-pagination,
.navigation.pagination { margin: 40px 0 8px; }
.woocommerce-pagination ul.page-numbers,
.navigation.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 7px;
	border: 0;
	margin: 0;
	padding: 0;
}
.woocommerce-pagination ul.page-numbers li { border: 0; margin: 0; overflow: visible; }
.page-numbers {
	display: inline-flex;
	align-items: center; justify-content: center;
	min-width: 38px; height: 38px;
	padding: 0 11px;
	border: 1px solid var(--hairline);
	border-radius: var(--r);
	background: var(--paper);
	font-family: var(--mono);
	font-size: var(--fs-base);
	font-weight: 600;
	transition: border-color var(--t), color var(--t), background var(--t);
}
a.page-numbers:hover { border-color: var(--leaf); color: var(--leaf); }
.page-numbers.current {
	background: var(--leaf);
	border-color: var(--leaf);
	color: var(--paper);
}
.page-numbers.dots { border-color: transparent; background: transparent; min-width: 22px; padding: 0 3px; }

/* ==========================================================================
   Reviews
   ========================================================================== */

.woocommerce-Reviews-title,
#reviews h2 { font-size: 1.24rem; margin-bottom: 18px; }
#reviews ol.commentlist,
.woocommerce-product-reviews ol.commentlist {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
#reviews ol.commentlist li { margin: 0; }
/* No grid here — the reviews column now shares a row with the description
   (see .product-description-reviews-row), so it's roughly half the width it
   used to have; a 44px avatar column made every review feel cramped. Padding
   alone gives the text room to breathe instead. */
#reviews .comment_container {
	background: var(--paper);
	border: 1px solid var(--hairline);
	border-radius: var(--r);
	padding: 17px;
}
#reviews .comment_container img.avatar { display: none; }
#reviews .comment-text { min-width: 0; }
#reviews .woocommerce-review__author { font-weight: 700; margin-right: 8px; }
#reviews .woocommerce-review__published-date {
	font-family: var(--mono);
	font-size: var(--fs-xs);
	color: var(--stone);
}
#reviews .woocommerce-review__verified {
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--leaf-deep);
}
#reviews .comment-text .star-rating { margin-bottom: 7px; }
#reviews .description p:last-child { margin-bottom: 0; }

#review_form_wrapper { border-top: 1px solid var(--hairline); padding-top: 24px; }
#review_form .comment-form { max-width: 640px; }
#review_form .comment-form label {
	display: block;
	font-weight: 600;
	font-size: var(--fs-base);
	margin-bottom: 6px;
}
#review_form .comment-form input[type="text"],
#review_form .comment-form input[type="email"],
#review_form .comment-form textarea { width: 100%; }
#review_form .comment-form-rating .stars { margin-bottom: 12px; }

/* ==========================================================================
   Cart
   ========================================================================== */

.woocommerce-cart .site-main,
.woocommerce-checkout .site-main,
.woocommerce-account .site-main { padding-top: 28px; padding-bottom: 60px; }

/* Cart/Checkout/Account are shortcodes on regular Pages, so they render
   through page.php's narrow .entry-content — widen those here. */
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content,
.woocommerce-account .entry-content,
.woocommerce-cart .entry-header,
.woocommerce-checkout .entry-header,
.woocommerce-account .entry-header { max-width: var(--shell); }

.woocommerce table.shop_table {
	border: 1px solid var(--hairline);
	border-radius: var(--r);
	border-spacing: 0;
	overflow: hidden;
}
.woocommerce table.shop_table th {
	background: var(--mist);
	text-align: left;
	padding: 12px 15px;
	font-size: var(--fs-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--stone);
	border-bottom: 1px solid var(--hairline);
}
.woocommerce table.shop_table td {
	padding: 15px;
	border-top: 1px solid var(--hairline);
	vertical-align: middle;
	font-size: var(--fs-md);
}
.woocommerce table.shop_table td.product-thumbnail img {
	width: 64px;
	border: 1px solid var(--hairline);
	border-radius: var(--r);
	background: var(--mist);
}
.woocommerce table.shop_table td.product-remove a { color: var(--stone); font-size: 1.15rem; }
.woocommerce table.shop_table td.product-remove a:hover { color: var(--crit); }
.woocommerce table.shop_table .amount { font-family: var(--mono); }

/* Cart items — modern card rows instead of a classic data table. Same
   underlying <table>/<tr>/<td> markup (WooCommerce needs the exact
   cart[key][qty] field names to process quantity updates and removals),
   just re-laid-out with CSS grid so none of that functionality changes. */
.woocommerce-cart table.cart {
	border: 0;
	border-radius: 0;
	overflow: visible;
}
.woocommerce-cart table.cart thead {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.woocommerce-cart table.cart tbody { display: block; }
.woocommerce-cart table.cart tr.cart_item {
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr) auto;
	grid-template-areas:
		"thumb name   remove"
		"thumb price  remove"
		"thumb qty    subtotal";
	column-gap: 18px;
	row-gap: 6px;
	align-items: center;
	padding: 16px;
	border: 1px solid var(--hairline);
	border-radius: var(--r-lg);
	margin-bottom: 12px;
	background: var(--paper);
}
.woocommerce-cart table.cart tr.cart_item td {
	padding: 0;
	border-top: 0;
	font-size: var(--fs-md);
}
.woocommerce-cart table.cart td.product-thumbnail { grid-area: thumb; }
.woocommerce-cart table.cart td.product-thumbnail img {
	width: 84px; height: 84px;
	object-fit: contain;
	padding: 6px;
}
.woocommerce-cart table.cart td.product-name { grid-area: name; font-weight: 600; }
.woocommerce-cart table.cart td.product-name a { color: var(--ink); }
.woocommerce-cart table.cart td.product-name a:hover { color: var(--leaf); }
.woocommerce-cart table.cart td.product-price {
	grid-area: price;
	color: var(--stone);
	font-size: var(--fs-sm);
}
.woocommerce-cart table.cart td.product-quantity { grid-area: qty; }
.woocommerce-cart table.cart td.product-subtotal {
	grid-area: subtotal;
	font-weight: 700;
	justify-self: end;
	align-self: end;
}
.woocommerce-cart table.cart td.product-remove {
	grid-area: remove;
	justify-self: end;
	align-self: start;
}
.woocommerce-cart table.cart td.product-remove a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px; height: 28px;
	border-radius: 50%;
	background: var(--mist);
	font-size: 1.1rem;
	line-height: 1;
}
.woocommerce-cart table.cart td.product-remove a:hover { background: var(--crit-wash); }
.woocommerce-cart table.cart tr:not(.cart_item) td.actions {
	border: 0;
	padding: 4px 0 0;
	text-align: right;
}

.woocommerce-cart-form { margin-bottom: 24px; }
.woocommerce-cart .cart-collaterals { max-width: 400px; margin-left: auto; }
.woocommerce-cart .cart_totals {
	background: var(--mist);
	border: 1px solid var(--hairline);
	border-radius: var(--r);
	padding: 22px;
}
.woocommerce-cart .cart_totals h2 { font-size: 1.05rem; }
.woocommerce-cart .cart_totals table { margin-bottom: 14px; }
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
	padding: 10px 0;
	border-top: 1px solid var(--hairline);
	font-size: var(--fs-md);
}
.woocommerce-cart .cart_totals .order-total .amount {
	font-family: var(--mono);
	font-weight: 700;
	font-size: 1.15rem;
}
.woocommerce-cart .wc-proceed-to-checkout a { width: 100%; display: block; }
.cross-sells { margin-top: 48px; }
.cross-sells > h2 {
	font-size: 1.2rem;
	border-bottom: 1px solid var(--hairline);
	padding-bottom: 12px;
	margin-bottom: 20px;
}

/* ==========================================================================
   Checkout
   ========================================================================== */

.woocommerce-checkout form.checkout {
	display: grid;
	grid-template-columns: 1.35fr minmax(0, 1fr);
	column-gap: 44px;
	row-gap: 16px;
	align-items: start;
}
.woocommerce-checkout #customer_details { display: contents; }
/* Everything defaults left; only the summary moves right. */
.woocommerce-checkout form.checkout > *,
.woocommerce-checkout #customer_details > * {
	grid-column: 1;
	min-width: 0;
}
.woocommerce-checkout .col-1,
.woocommerce-checkout .col-2 { width: auto; float: none; }
/* Wrapper of hidden inputs — would otherwise take an empty grid row */
.woocommerce-checkout form.checkout > wc-order-attribution-inputs { display: none; }
.woocommerce-checkout #order_review_heading {
	grid-column: 2;
	grid-row: 1;
	margin: 0;
	font-size: 1.08rem;
}
.woocommerce-checkout #order_review {
	grid-column: 2;
	grid-row: 2 / -1;
	align-self: start;
	background: var(--mist);
	border: 1px solid var(--hairline);
	border-radius: var(--r);
	padding: 22px;
	position: sticky;
	top: 96px;
}
.woocommerce-checkout h3 { font-size: 1.08rem; margin-bottom: 14px; }
.woocommerce-checkout .form-row { margin-bottom: 13px; }
.woocommerce-checkout .form-row label {
	display: block;
	font-size: var(--fs-sm);
	font-weight: 600;
	margin-bottom: 5px;
}
.woocommerce-checkout input,
.woocommerce-checkout select,
.woocommerce-checkout textarea { width: 100%; }
.woocommerce-checkout table.shop_table { border: 0; border-radius: 0; }
.woocommerce-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td {
	padding: 9px 0;
	background: transparent;
	font-size: var(--fs-md);
}
.woocommerce-checkout table.shop_table .order-total .amount {
	font-family: var(--mono);
	font-weight: 700;
	font-size: 1.1rem;
}
.woocommerce-checkout ul#shipping_method { display: grid; gap: 6px; }
.woocommerce-checkout ul#shipping_method li { font-size: var(--fs-md); }
.woocommerce-checkout .payment_methods {
	display: grid;
	gap: 8px;
	margin-bottom: 14px;
	padding: 0;
}
.woocommerce-checkout .payment_methods li {
	list-style: none;
	font-size: var(--fs-md);
	border: 1px solid var(--hairline);
	border-radius: var(--r);
	padding: 13px 14px;
	background: var(--paper);
}
.woocommerce-checkout .payment_methods li:has(input:checked) { border-color: var(--leaf); background: var(--leaf-wash); }
.woocommerce-checkout .payment_methods input[type="radio"] { margin-right: 4px; }
.woocommerce-checkout .payment_methods label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
}
.woocommerce-checkout .payment_methods label::before {
	content: "";
	width: 15px; height: 15px;
	flex-shrink: 0;
	background-color: var(--leaf);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='2' y='6' width='20' height='13' rx='2' stroke='%23000' stroke-width='1.8'/%3E%3Ccircle cx='12' cy='12.5' r='3' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M6 6V5a2 2 0 0 1 2-2h9' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='2' y='6' width='20' height='13' rx='2' stroke='%23000' stroke-width='1.8'/%3E%3Ccircle cx='12' cy='12.5' r='3' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M6 6V5a2 2 0 0 1 2-2h9' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}
.woocommerce-checkout .payment_box {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--hairline);
	font-size: var(--fs-sm);
	color: var(--stone);
}
.woocommerce-checkout .payment_box p { margin: 0; }
.woocommerce-checkout #place_order { width: 100%; margin-top: 14px; padding: 15px 22px; font-size: 1rem; }
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-form-coupon { margin-bottom: 14px; }

/* ==========================================================================
   My account
   ========================================================================== */

/* Two-column dashboard only when the account nav exists (logged in) —
   logged out, this wrapper holds the login/register block. */
.woocommerce-account.logged-in .woocommerce {
	display: grid;
	grid-template-columns: 216px minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}
.woocommerce-account.logged-in .woocommerce > * { grid-column: 2; min-width: 0; }
.woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-navigation { grid-column: 1; grid-row: 1; }
.woocommerce-account.logged-in .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }

.woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--hairline);
	border-radius: var(--r);
	overflow: hidden;
}
.woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--hairline); }
.woocommerce-MyAccount-navigation li:last-child { border-bottom: 0; }
.woocommerce-MyAccount-navigation a {
	display: block;
	padding: 11px 15px;
	font-size: var(--fs-md);
	font-weight: 500;
}
.woocommerce-MyAccount-navigation a:hover { background: var(--mist); }
.woocommerce-MyAccount-navigation li.is-active a {
	background: var(--leaf-wash);
	color: var(--leaf-deep);
	font-weight: 700;
}
.woocommerce-MyAccount-content { min-width: 0; }
.woocommerce-MyAccount-content .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
}
.woocommerce-MyAccount-content address {
	border: 1px solid var(--hairline);
	border-radius: var(--r);
	padding: 15px;
	font-style: normal;
	font-size: var(--fs-md);
}

/* Account forms */
.woocommerce-form__label,
.woocommerce form .form-row label,
.woocommerce-EditAccountForm label {
	display: block;
	font-weight: 600;
	font-size: var(--fs-base);
	margin-bottom: 5px;
}
.woocommerce-Input,
.woocommerce-form__input,
input.input-text,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea { width: 100%; }
.woocommerce-form-row,
.woocommerce form .form-row { margin-bottom: 13px; }
.woocommerce-form__label-for-checkbox,
.woocommerce-form-login__rememberme {
	display: flex !important;
	align-items: center;
	gap: 8px;
	font-weight: 500;
	margin-bottom: 0;
}
.woocommerce-form__input-checkbox { width: auto; margin: 0; }
.woocommerce-Button,
.woocommerce-button,
.woocommerce-form-login__submit,
.woocommerce-form-register__submit { margin-top: 8px; }
.woocommerce-LostPassword { margin-top: 12px; font-size: var(--fs-base); }
.woocommerce-LostPassword a:hover { color: var(--leaf); text-decoration: underline; }
.woocommerce-privacy-policy-text {
	font-size: var(--fs-sm);
	color: var(--stone);
	margin: 12px 0;
}
.woocommerce-privacy-policy-text a { text-decoration: underline; }

/* Login + register side by side */
.woocommerce-account .u-columns.col2-set {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px;
}
.woocommerce-account .u-columns.col2-set .col-1,
.woocommerce-account .u-columns.col2-set .col-2 {
	width: auto;
	float: none;
	border: 1px solid var(--hairline);
	border-radius: var(--r);
	padding: 24px;
}
.woocommerce-account .u-columns.col2-set h2 { font-size: 1.14rem; margin-bottom: 16px; }

.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-EditAccountForm,
.woocommerce-ResetPassword { max-width: 520px; }

/* ==========================================================================
   Sidebar / custom shop filters
   ========================================================================== */

.shop-filters {
	background: var(--paper);
	border: 1px solid var(--hairline);
	border-radius: var(--r-lg);
	padding: 18px;
}
.shop-filters-panel-header,
.shop-filters-toggle { display: none; }

.shop-filters-section { margin-bottom: 26px; }
.shop-filters-section:last-child { margin-bottom: 0; }
.shop-filters-title {
	font-family: var(--sans);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--stone);
	padding-bottom: 9px;
	margin-bottom: 12px;
	border-bottom: 1px solid var(--hairline);
}

/* Every filter section collapses by default except Category (a plain div,
   not a <details>) — the one people almost always want visible right away. */
summary.shop-filters-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	list-style: none;
	user-select: none;
}
summary.shop-filters-title::-webkit-details-marker { display: none; }
summary.shop-filters-title::after {
	content: "";
	width: 9px; height: 9px;
	flex-shrink: 0;
	margin-left: 8px;
	border-right: 1.5px solid var(--stone);
	border-bottom: 1.5px solid var(--stone);
	transform: rotate(45deg);
	transition: transform var(--t);
}
details[open] > summary.shop-filters-title::after { transform: rotate(-135deg); }
details.shop-filters-section > :not(summary) { animation: shop-filters-reveal var(--t) ease; }
@keyframes shop-filters-reveal {
	from { opacity: 0; }
	to { opacity: 1; }
}

.shop-filter-list li { list-style: none; }
.shop-filter-list { margin: 0; padding: 0; }
.shop-filter-item + .shop-filter-item { margin-top: 2px; }
.shop-filter-item > a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 4px;
	border-radius: var(--r);
	font-size: var(--fs-md);
	color: var(--ink);
	transition: color var(--t), background-color var(--t);
}
.shop-filter-item > a:hover { color: var(--leaf); background: var(--mist); }
.shop-filter-item.is-active > a { color: var(--leaf-deep); font-weight: 700; }
.shop-filter-item > a > span:first-of-type { flex: 1; }
.shop-filter-count {
	font-family: var(--mono);
	font-size: var(--fs-2xs);
	color: var(--stone);
}

.shop-filter-checkbox {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	border: 1.5px solid var(--hairline);
	border-radius: 3px;
	background: var(--paper);
	transition: border-color var(--t), background-color var(--t);
}
.shop-filter-item.is-active .shop-filter-checkbox {
	background: var(--leaf);
	border-color: var(--leaf);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.2l3 3 6-6.4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}
.shop-filter-stars { color: var(--amber); letter-spacing: 1px; font-size: var(--fs-sm); }

/* Active filter chips */
.shop-filters-active { margin-bottom: 26px; }
.shop-filters-active-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.shop-filter-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--leaf-wash);
	color: var(--leaf-deep);
	border-radius: 2px;
	padding: 4px 8px 4px 10px;
	font-size: var(--fs-sm);
	font-weight: 700;
	transition: background-color var(--t);
}
.shop-filter-chip:hover { background: var(--hairline); }
.shop-filter-chip span[aria-hidden] { font-size: var(--fs-md); line-height: 1; opacity: .7; }
.shop-filters-clear {
	font-size: var(--fs-xs);
	color: var(--stone);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.shop-filters-clear:hover { color: var(--leaf); }

/* Price range */
.shop-filter-price-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.shop-filter-price-row input[type="number"] {
	flex: 1 1 0;
	min-width: 0;
	border: 1px solid var(--hairline);
	border-radius: var(--r);
	padding: 8px 9px;
	font-family: var(--mono);
	font-size: var(--fs-sm);
	color: var(--ink);
	background: var(--paper);
}
.shop-filter-price-row input[type="number"]:focus { outline: none; border-color: var(--leaf); }
.shop-filter-price-sep { color: var(--stone); flex: 0 0 auto; }
.shop-filter-price-submit { width: 100%; padding: 9px 14px; font-size: var(--fs-sm); }

/* ==========================================================================
   Blog / archive / static pages
   ========================================================================== */

.post-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	padding-top: 28px;
	padding-bottom: 48px;
}
.post-card {
	border: 1px solid var(--hairline);
	border-radius: var(--r);
	overflow: hidden;
	background: var(--paper);
	transition: border-color var(--t);
}
.post-card:hover { border-color: var(--leaf); }
.post-card-thumb img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.post-card-body { padding: 16px; }
.post-card-title { font-size: 1.02rem; margin-bottom: 6px; }
.post-card-meta {
	font-family: var(--mono);
	font-size: var(--fs-xs);
	color: var(--stone);
	margin-bottom: 8px;
}
.post-card-excerpt { font-size: var(--fs-md); color: var(--stone); }

.archive-header { padding-top: 32px; }
.entry-header {
	max-width: 74ch;
	margin: 40px auto 0;
	padding: 0 24px;
}
.entry-header .entry-title { font-size: clamp(1.7rem, 3.4vw, 2.35rem); letter-spacing: -.02em; }
.entry-meta {
	font-family: var(--mono);
	font-size: var(--fs-xs);
	color: var(--stone);
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}
.entry-thumbnail {
	max-width: var(--shell);
	margin: 26px auto 0;
	padding: 0 24px;
}
.entry-thumbnail img { border-radius: var(--r); }
.entry-content {
	max-width: 74ch;
	margin: 0 auto;
	padding: 22px 24px 60px;
	font-size: 1.02rem;
}
.entry-content h2, .entry-content h3 { margin-top: 1.6em; }
.entry-content p, .entry-content ul, .entry-content ol { margin-bottom: 1.15em; }
.entry-content ul, .entry-content ol { padding-left: 1.3em; list-style: revert; }
.entry-content img { border-radius: var(--r); }
.entry-content a { color: var(--leaf); text-decoration: underline; }
.entry-footer {
	max-width: 74ch;
	margin: 0 auto;
	padding: 0 24px 40px;
	font-size: var(--fs-base);
	color: var(--stone);
}

.no-results,
.error-404 {
	max-width: 62ch;
	margin: 0 auto;
	padding: 60px 24px 80px;
	text-align: center;
}
.error-404 h1 { font-size: 1.9rem; }
.error-404 .search-form { margin: 20px 0; }

.comments-area {
	max-width: 74ch;
	margin: 0 auto;
	padding: 0 24px 60px;
}
.comments-title { font-size: 1.2rem; }

/* ==========================================================================
   Assurance band + footer
   ========================================================================== */

.footer-newsletter {
	background: var(--mist);
	border-top: 1px solid var(--hairline);
	border-bottom: 1px solid var(--hairline);
	margin-top: 60px;
}
.footer-newsletter-inner {
	padding: 32px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}
.footer-newsletter-inner h2 { font-size: 1.2rem; margin-bottom: 3px; }
.footer-newsletter-inner p { margin: 0; color: var(--stone); font-size: var(--fs-md); }
.newsletter-form { display: flex; gap: 8px; flex-wrap: wrap; position: relative; }
.newsletter-form input[type="email"] { min-width: 250px; }
.newsletter-message {
	position: absolute;
	top: 100%; left: 0;
	margin: 6px 0 0;
	font-size: var(--fs-sm);
	color: var(--leaf-deep);
}

.site-footer { background: var(--paper); }
.footer-inner { padding: 44px 24px 28px; }
.footer-columns {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: 32px;
	margin-bottom: 30px;
}
.footer-column .widget-title,
.footer-column h3 {
	font-family: var(--sans);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--stone);
	margin-bottom: 12px;
}
.footer-column ul { display: grid; gap: 8px; font-size: var(--fs-md); }
.footer-column a:hover { color: var(--leaf); }
.footer-logo img { width: 140px; height: auto; margin-bottom: 10px; }
.footer-about p { color: var(--stone); font-size: var(--fs-md); max-width: 34ch; margin-bottom: 14px; }

.footer-social { display: flex; gap: 8px; }
.footer-social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px; height: 34px;
	border: 1px solid var(--hairline);
	border-radius: 50%;
	color: var(--stone);
	transition: border-color var(--t), color var(--t);
}
.footer-social-link:hover { border-color: var(--leaf); color: var(--leaf); }
.footer-social-icon {
	width: 15px; height: 15px;
	background-color: currentColor;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}
.footer-social-icon--facebook {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 8.5h2.2V5.1h-2.6c-2.6 0-4 1.6-4 4.1v2.1H8.5v3.4h2.1V21h3.4v-6.3h2.6l.5-3.4h-3.1V9.4c0-.7.3-.9.9-.9Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 8.5h2.2V5.1h-2.6c-2.6 0-4 1.6-4 4.1v2.1H8.5v3.4h2.1V21h3.4v-6.3h2.6l.5-3.4h-3.1V9.4c0-.7.3-.9.9-.9Z'/%3E%3C/svg%3E");
}

.payment-icons { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.payment-icon {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: var(--fs-sm);
	font-weight: 600;
	border: 1px solid var(--hairline);
	border-radius: var(--r);
	padding: 7px 11px;
	color: var(--ink);
	background: var(--paper);
}
.payment-icon-glyph {
	width: 15px; height: 15px;
	flex-shrink: 0;
	background-color: var(--leaf);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}
.payment-icon-glyph--cod {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='2' y='6' width='20' height='13' rx='2' stroke='%23000' stroke-width='1.8'/%3E%3Ccircle cx='12' cy='12.5' r='3' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M6 6V5a2 2 0 0 1 2-2h9' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='2' y='6' width='20' height='13' rx='2' stroke='%23000' stroke-width='1.8'/%3E%3Ccircle cx='12' cy='12.5' r='3' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M6 6V5a2 2 0 0 1 2-2h9' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
.site-info {
	border-top: 1px solid var(--hairline);
	padding-top: 18px;
	font-size: var(--fs-sm);
	color: var(--stone);
	text-align: center;
}
.footer-navigation ul { display: grid; gap: 8px; }

/* ==========================================================================
   Front page
   ========================================================================== */

.home-content { max-width: var(--shell); margin: 0 auto; padding: 0 24px; }

/* ---- Hero slider — full-height rotating background, real product photos ---- */
.hero-slider {
	position: relative;
	min-height: 82vh;
	max-height: 760px;
	overflow: hidden;
	background: var(--ink);
}
.hero-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 1s ease, visibility 1s;
}
.hero-slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.hero-slide-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-color: var(--mist);
}
.hero-slide-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	background: linear-gradient(90deg, rgba(16,26,19,.85) 0%, rgba(16,26,19,.6) 42%, rgba(16,26,19,.2) 72%, transparent 100%);
}
.hero-slide-inner { max-width: 580px; padding: 0 24px; margin: 0 auto; width: 100%; }
.hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--mono);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--leaf-deep);
	background: var(--leaf-wash);
	border-radius: 999px;
	padding: 5px 12px;
	margin-bottom: 18px;
}
.hero-slide-title {
	font-size: clamp(2rem, 4.4vw, 3.1rem);
	font-weight: 700;
	letter-spacing: -.025em;
	line-height: 1.1;
	color: var(--paper);
	margin-bottom: 14px;
}
.hero-slide-title--product { font-size: clamp(1.55rem, 3vw, 2.2rem); }
.hero-slide-text { color: rgba(255,255,255,.86); font-size: 1.08rem; max-width: 46ch; margin-bottom: 28px; }
.hero-slide-price,
.hero-slide-price .amount { font-family: var(--mono); font-weight: 700; font-size: 1.25rem; color: var(--paper) !important; }
.hero-slide-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-slide-ctas .button-outline {
	color: var(--paper);
	border-color: rgba(255,255,255,.55);
}
.hero-slide-ctas .button-outline:hover {
	background: rgba(255,255,255,.12);
	color: var(--paper);
	border-color: var(--paper);
}

.hero-slider-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 44px; height: 44px;
	border-radius: 50%;
	background: rgba(255,255,255,.14);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border: 1px solid rgba(255,255,255,.4);
	cursor: pointer;
	transition: background var(--t), border-color var(--t);
}
.hero-slider-arrow:hover { background: rgba(255,255,255,.28); border-color: var(--paper); }
.hero-slider-arrow::before {
	content: "";
	position: absolute;
	top: 50%; left: 50%;
	width: 9px; height: 9px;
	border: 1.8px solid var(--paper);
	border-width: 1.8px 1.8px 0 0;
}
.hero-slider-prev { left: 24px; }
.hero-slider-prev::before { transform: translate(-30%, -50%) rotate(-135deg); }
.hero-slider-next { right: 24px; }
.hero-slider-next::before { transform: translate(-70%, -50%) rotate(45deg); }

.hero-slider-dots {
	position: absolute;
	bottom: 26px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	display: flex;
	gap: 8px;
}
.hero-slider-dot {
	width: 8px; height: 8px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: rgba(255,255,255,.45);
	cursor: pointer;
	transition: background var(--t), width var(--t);
}
.hero-slider-dot:hover { background: rgba(255,255,255,.7); }
.hero-slider-dot.is-active { width: 26px; background: var(--paper); }

/* ---- Trust bar — real, verified numbers only (no fabricated stats) ---- */
.trust-bar { background: var(--paper); border-bottom: 1px solid var(--hairline); }
.trust-bar-inner {
	max-width: var(--shell);
	margin: 0 auto;
	padding: 22px 24px;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}
.trust-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 2px;
	padding: 0 12px;
	border-left: 1px solid var(--hairline);
}
.trust-stat:first-child { border-left: 0; }
.trust-stat strong {
	font-family: var(--mono);
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--leaf-deep);
}
.trust-stat span {
	font-size: var(--fs-xs);
	color: var(--stone);
	text-transform: uppercase;
	letter-spacing: .06em;
}

/* ---- Section shell, reused by every homepage block below the hero ---- */
/* 52px was doubling up between adjacent sections (52 + 52 = 104px of dead
   space where two .sec siblings meet), since padding doesn't collapse the
   way margins do. 40px keeps real breathing room without the excess. */
.sec { padding: 40px 0; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.sec-head h2 { font-size: 1.55rem; letter-spacing: -.01em; }
.sec-head > a { font-size: var(--fs-sm); font-weight: 700; color: var(--leaf); white-space: nowrap; }
.sec-head > a:hover { text-decoration: underline; }
.sec-eyebrow {
	display: block;
	font-family: var(--mono);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--stone);
	margin-bottom: 6px;
}

/* ---- Category grid ---- */
.cat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cat-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 20px;
	background: var(--paper);
	border: 1px solid var(--hairline);
	border-radius: var(--r-lg);
	transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.cat-card:hover { border-color: var(--leaf); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.cat-icon {
	width: 42px; height: 42px;
	border-radius: 10px;
	background: var(--leaf-wash);
	color: var(--leaf-deep);
	display: flex;
	align-items: center;
	justify-content: center;
}
.cat-card h3 { font-size: var(--fs-md); margin-bottom: 2px; }
.cat-count { font-family: var(--mono); font-size: var(--fs-sm); color: var(--stone); }

/* ---- Sliders (bestsellers, related products): reuse the sitewide
   ul.products/.product-card styling, just need horizontal scroll-snap. ---- */
.slider { position: relative; }
/* ul.bestseller-grid / ul.related-grid (not bare .bestseller-grid etc.): the
   sitewide ul.products rule is itself `ul` + class, specificity (0,1,1) with
   !important — a bare class selector (0,1,0) would lose that tie even with
   matching !important, since ties fall back to specificity before source
   order. Matching the type+class shape here guarantees this rule wins
   (related products additionally fights .related ul.products, but that one
   isn't !important, so it loses outright regardless of specificity). */
ul.bestseller-grid,
ul.related-grid {
	max-width: none;
	margin: 0 !important;
	padding: 4px 4px 12px !important;
	display: flex !important;
	grid-template-columns: none !important;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: 4px;
	-webkit-overflow-scrolling: touch;
	/* Firefox + modern Chromium: hide the scrollbar but keep it scrollable —
	   the arrow buttons are the intended control, native drag/swipe still works. */
	scrollbar-width: none;
}
.bestseller-grid::-webkit-scrollbar,
.related-grid::-webkit-scrollbar { display: none; }
.bestseller-grid > .product-card,
.related-grid > .product-card {
	scroll-snap-align: start;
	flex: 0 0 260px;
}
.slider-arrow {
	position: absolute;
	top: 42%;
	transform: translateY(-50%);
	width: 40px; height: 40px;
	border-radius: 50%;
	background: var(--paper);
	border: 1px solid var(--hairline);
	box-shadow: var(--shadow-lg);
	cursor: pointer;
	z-index: 2;
	transition: border-color var(--t), opacity var(--t);
}
.slider-arrow:hover { border-color: var(--leaf); }
.slider-arrow::before {
	content: "";
	position: absolute;
	top: 50%; left: 50%;
	width: 8px; height: 8px;
	border: 1.8px solid var(--ink);
	border-width: 1.8px 1.8px 0 0;
}
.slider-arrow-prev { left: -8px; }
.slider-arrow-prev::before { transform: translate(-30%, -50%) rotate(-135deg); }
.slider-arrow-next { right: -8px; }
.slider-arrow-next::before { transform: translate(-70%, -50%) rotate(45deg); }
.slider-arrow[disabled] { opacity: 0; pointer-events: none; }

/* ---- Why Bioolife / value props ---- */
.value-band { background: var(--mist); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.value-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.value-item { display: flex; flex-direction: column; gap: 10px; }
.value-icon {
	width: 40px; height: 40px;
	border-radius: 10px;
	background: var(--paper);
	border: 1px solid var(--hairline);
	color: var(--leaf);
	display: flex;
	align-items: center;
	justify-content: center;
}
.value-item h3 { font-size: var(--fs-md); }
.value-item p { font-size: var(--fs-sm); color: var(--stone); margin: 0; line-height: 1.55; }

/* ---- Brand strip ---- */
.brand-strip-eyebrow { text-align: center; margin-bottom: 22px; }
.brand-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 36px; }
.brand-strip a { font-weight: 700; font-size: 1rem; color: var(--stone); letter-spacing: -.01em; transition: color var(--t); }
.brand-strip a:hover { color: var(--ink); }

/* ---- Real customer reviews ---- */
.review-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.review-card { border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 22px; background: var(--paper); }
.review-card .star-rating { margin-bottom: 12px; }
.review-card p { font-size: var(--fs-md); color: var(--ink); margin: 0 0 16px; line-height: 1.6; }
.review-who { display: flex; align-items: center; gap: 10px; }
.review-avatar {
	width: 34px; height: 34px;
	border-radius: 50%;
	background: var(--leaf-wash);
	color: var(--leaf-deep);
	font-weight: 700;
	font-size: var(--fs-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.review-who b { display: block; font-size: var(--fs-base); }
.review-who span { font-size: var(--fs-xs); color: var(--stone); font-family: var(--mono); }

@media (max-width: 1000px) {
	.cat-grid,
	.value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.review-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
	.hero-slider { min-height: 64vh; }
	.hero-slide-overlay {
		background: linear-gradient(180deg, rgba(16,26,19,.35) 0%, rgba(16,26,19,.78) 55%, rgba(16,26,19,.9) 100%);
		align-items: flex-end;
		padding-bottom: 56px;
	}
	.hero-slide-inner { max-width: none; }
	.hero-slider-arrow { display: none; }
	.cat-grid { grid-template-columns: minmax(0, 1fr); }
	.sec { padding: 32px 0; }
	.sec-head { flex-direction: column; align-items: flex-start; gap: 8px; }
	.trust-bar-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 8px; padding: 18px 16px; }
	.trust-stat:nth-child(odd) { border-left: 0; }
}

/* ==========================================================================
   Toast
   ========================================================================== */

.bioolife-toast {
	position: fixed;
	bottom: 22px; right: 22px;
	background: var(--ink);
	color: var(--paper);
	padding: 13px 18px;
	border-radius: var(--r);
	box-shadow: var(--shadow-lg);
	font-size: var(--fs-base);
	transform: translateY(18px);
	opacity: 0;
	pointer-events: none;
	transition: transform var(--t), opacity var(--t);
	z-index: var(--z-toast);
}
.bioolife-toast.is-visible { transform: translateY(0); opacity: 1; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
	/* Single column: gallery, then summary, then everything else */
	.woocommerce div.product {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 24px;
	}
	.woocommerce div.product > .woocommerce-product-gallery { grid-column: 1; grid-row: 1; }
	.woocommerce div.product > .summary,
	.woocommerce div.product > .entry-summary { grid-column: 1; grid-row: 2; }
	.woocommerce div.product .woocommerce-product-gallery { position: static; }

	.woocommerce-checkout form.checkout { grid-template-columns: minmax(0, 1fr); }
	.woocommerce-checkout #order_review_heading,
	.woocommerce-checkout #order_review {
		grid-column: 1;
		grid-row: auto;
		position: static;
	}

	/* Full-width product grid; filters move into the drawer below instead
	   of taking a grid row of their own. */
	.shop-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.shop-layout > .site-main { grid-column: 1; grid-row: 1; }
	.shop-layout ul.products,
	.related ul.products,
	.upsells ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	.footer-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* Filters become a bottom-sheet drawer instead of a full-width block
	   dumped below every product — reachable from a floating button
	   without scrolling past the whole grid first. */
	.shop-filters-toggle {
		display: flex;
		align-items: center;
		gap: 7px;
		position: fixed;
		left: 50%;
		bottom: max(18px, env(safe-area-inset-bottom));
		transform: translateX(-50%);
		z-index: var(--z-drawer);
		background: var(--ink);
		color: var(--paper);
		border: 0;
		border-radius: 999px;
		padding: 12px 22px;
		font-size: var(--fs-sm);
		font-weight: 700;
		box-shadow: var(--shadow-lg);
		cursor: pointer;
	}
	.shop-filters-toggle-icon {
		width: 14px; height: 14px;
		background-color: currentColor;
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M3 5h14M6 10h8M9 15h2' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M3 5h14M6 10h8M9 15h2' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
		-webkit-mask-size: contain;
		mask-size: contain;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
	}

	.shop-layout > #secondary { display: contents; }
	.shop-filters {
		position: fixed;
		inset: auto 0 0 0;
		max-height: 85vh;
		overflow-y: auto;
		border: 0;
		border-radius: 16px 16px 0 0;
		box-shadow: var(--shadow-lg);
		padding: 18px 18px max(18px, env(safe-area-inset-bottom));
		transform: translateY(100%);
		transition: transform var(--t-slow);
		z-index: var(--z-drawer);
	}
	.shop-filters.is-open { transform: translateY(0); }

	.shop-filters-panel-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 14px;
		padding-bottom: 12px;
		border-bottom: 1px solid var(--hairline);
	}
	.shop-filters-panel-title { margin: 0; font-size: 1.05rem; }
	.shop-filters-close {
		background: transparent;
		border: 0;
		color: var(--stone);
		font-size: 1.5rem;
		line-height: 1;
		padding: 2px 6px;
		cursor: pointer;
	}
	.shop-filters-close:hover { background: transparent; color: var(--ink); }
}

@media (max-width: 900px) {
	ul.products,
	.shop-layout ul.products,
	.related ul.products,
	.upsells ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.woocommerce-MyAccount-content .woocommerce-Addresses { grid-template-columns: minmax(0, 1fr); }
	.woocommerce-cart .cart-collaterals { max-width: none; }

	/* Not enough width for logo + nav + a persistent search bar + icons on
	   one line — let the header wrap, with the search bar forced onto its
	   own full-width row below the logo/nav/icons instead of being hidden. */
	.header-inner { flex-wrap: wrap; }
	.header-search-bar { flex-basis: 100%; order: 10; margin: 4px 0 0; }
}

@media (max-width: 680px) {
	.shell,
	.header-inner,
	.footer-inner,
	.footer-newsletter-inner,
	.site-main,
	.post-grid,
	.archive-header,
	.shop-layout,
	.woocommerce-products-header,
	.entry-content,
	.entry-header { padding-left: 16px; padding-right: 16px; }

	.menu-toggle { display: block; order: -1; }
	.header-inner { gap: 8px; flex-wrap: wrap; }
	.category-bar-list { padding: 0 16px; }
	.site-branding img { width: 110px; height: auto; }

	.main-navigation {
		position: fixed;
		top: 0; left: 0; bottom: 0;
		width: 84%;
		max-width: 320px;
		background: var(--paper);
		z-index: var(--z-drawer);
		transform: translateX(-100%);
		transition: transform var(--t-slow);
		padding: 20px 20px max(20px, env(safe-area-inset-bottom));
		overflow-y: auto;
		display: block;
	}
	.main-navigation.is-open { transform: translateX(0); }
	.main-navigation > ul { flex-direction: column; gap: 0; }
	.main-navigation ul ul { display: block; padding-left: 14px; }
	.main-navigation a {
		display: block;
		padding: 12px 0;
		border-bottom: 1px solid var(--hairline);
	}

	.header-icon-button { width: 42px; height: 42px; }

	/* Cart/checkout tables: scroll the table, not the page — except the cart
	   item table itself, which is already a stack of cards (see .cart_item
	   grid rules above) and needs none of this. */
	.woocommerce table.shop_table:not(.cart) {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.woocommerce table.shop_table:not(.cart) th,
	.woocommerce table.shop_table:not(.cart) td { padding: 11px; white-space: nowrap; }
	.woocommerce table.shop_table td.product-name,
	.woocommerce table.shop_table td.product-subtotal { white-space: normal; }
	.woocommerce table.shop_table:not(.cart) td.product-thumbnail img { width: 46px; }
	.woocommerce-cart table.cart tr.cart_item {
		grid-template-columns: 64px minmax(0, 1fr) auto;
		column-gap: 12px;
		padding: 12px;
	}
	.woocommerce-cart table.cart td.product-thumbnail img { width: 64px; height: 64px; }
	.woocommerce-checkout table.shop_table { display: table; }
	.woocommerce-checkout table.shop_table th,
	.woocommerce-checkout table.shop_table td { white-space: normal; }

	/* Touch targets */
	.quantity .qty,
	.quantity select { min-height: 44px; }
	.quantity-stepper-button { width: 42px; }
	.woocommerce form .form-row input[type="radio"],
	.woocommerce form .form-row input[type="checkbox"],
	.woocommerce-checkout input[type="radio"],
	.woocommerce-checkout input[type="checkbox"] { width: 20px; height: 20px; }
	.woocommerce ul#shipping_method li,
	.woocommerce-checkout .payment_methods li { padding: 9px 0; }

	/* Arrows can't rely on hover on touch devices */
	.woocommerce div.product .flex-direction-nav a { opacity: 1; }
	.woocommerce div.product .woocommerce-product-gallery { padding: 14px; }

	/* Toolbar stacks */
	.shop-layout .woocommerce-result-count,
	.shop-layout .woocommerce-ordering {
		float: none;
		display: block;
		line-height: 1.5;
	}
	.shop-layout .woocommerce-ordering { margin-top: 10px; }
	.woocommerce-ordering select, select.orderby { width: 100%; }

	ul.products,
	.shop-layout ul.products,
	.related ul.products,
	.upsells ul.products { gap: 12px; }
	.post-grid { grid-template-columns: minmax(0, 1fr); }

	.woocommerce div.product .summary .product_title { font-size: 1.4rem; }
	.woocommerce div.product p.price { font-size: 1.42rem; }

	.woocommerce-account .u-columns.col2-set { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	.woocommerce-account .u-columns.col2-set .col-1,
	.woocommerce-account .u-columns.col2-set .col-2 { padding: 18px; }
	.woocommerce-account.logged-in .woocommerce { grid-template-columns: minmax(0, 1fr); }
	.woocommerce-account.logged-in .woocommerce > *,
	.woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-navigation { grid-column: 1; }
	.woocommerce-MyAccount-navigation ul { flex-direction: row; flex-wrap: wrap; }
	.woocommerce-MyAccount-navigation li { border-bottom: 0; border-right: 1px solid var(--hairline); }

	.page-numbers { min-width: 36px; height: 36px; padding: 0 9px; }

	.footer-columns { grid-template-columns: minmax(0, 1fr); gap: 28px; text-align: center; }
	.footer-about p { max-width: none; margin-left: auto; margin-right: auto; }
	.footer-social { justify-content: center; }
	.footer-column ul { justify-items: center; }
	.payment-icons { justify-content: center; }
	.footer-newsletter-inner { flex-direction: column; text-align: center; }
	.newsletter-form { justify-content: center; width: 100%; }
	.newsletter-form input[type="email"] { flex: 1; min-width: 0; }

	.hero { padding: 40px 20px; }
	.section-title { margin: 34px 0 16px; }

	.sticky-add-to-cart { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
	.sticky-add-to-cart-details { max-width: 42vw; }
	.bioolife-toast { left: 16px; right: 16px; bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
	html { scroll-behavior: auto; }
}