/*
Theme Name: Nutrabase
Description: Custom WooCommerce theme for Nutrabase: sleep, relaxation and self-care.
Version: 1.9.1
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: nutrabase
WC requires at least: 8.0
*/

/* Hatch's palette: off-white and sand surfaces, navy bands, deep-navy ink and buttons, blue body text, muted tan accent on navy. */
:root {
	--night: #faf8f4;
	--night-2: #ffffff;
	--night-3: #f1ebe1;
	--deep: #13294b;
	--ink: #0a1a34;
	--muted: #274d7b;
	--accent-text: #1f4370;
	--accent: #0a1a34;
	--accent-hover: #13294b;
	--accent-ink: #ffffff;
	--line: rgba(10, 26, 52, 0.1);
	--shadow: 0 1px 2px rgba(10, 26, 52, 0.04), 0 6px 18px rgba(10, 26, 52, 0.05);
	--radius: 12px;
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Hatch's easing: quick start, long soft landing */
	--sans: "DM Sans", system-ui, -apple-system, sans-serif;
	/* Hatch's glass: white at 82% over a 12px blur, a hairline edge, a soft lift. */
	--glass-light: rgba(255, 255, 255, 0.82);
	--glass-border: rgba(204, 204, 204, 0.23);
	--glass-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
	--glass-blur: blur(12px);
}

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

body {
	margin: 0;
	background: var(--night);
	color: var(--ink);
	font: 400 17px/1.6 var(--sans);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip; /* the swipe rail bleeds to the right edge; clip (unlike hidden) keeps the header sticky */
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; transition: color 0.3s ease; }
a:hover { color: var(--accent); }
h1, h2, h3 { font-family: var(--sans); font-weight: 500; line-height: 1.1; letter-spacing: -0.025em; margin: 0 0 0.5em; }
h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
h3 { font-size: 1.3rem; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.eyebrow { text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.78rem; font-weight: 700; color: var(--accent-text); margin: 0 0 1rem; }
.lede { font-size: 1.15rem; color: var(--muted); max-width: 34em; }
.visually-hidden, .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--accent); color: var(--accent-ink); padding: 8px 14px; z-index: 100; border-radius: 8px; }
.skip-link:focus { left: 8px; }

/* Buttons: WooCommerce's buttons share the same look */
.btn,
.button,
button.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.single_add_to_cart_button {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
	background: var(--accent); color: var(--accent-ink);
	border: 0; border-radius: 10px; padding: 0.95em 1.8em;
	font: 700 1rem/1 var(--sans); text-decoration: none; cursor: pointer;
	min-height: 48px; letter-spacing: 0.01em; transition: all 0.3s ease-in-out;
}
.btn:hover, .button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce button.button.alt:hover, .single_add_to_cart_button:hover {
	background: var(--accent-hover); color: var(--accent-ink); transform: translateY(-1px);
}
/* Press: a quick, tight squeeze (Hatch: 0.18s cubic-bezier(0.2, 0, 0, 1)). Same selectors as the hover rule so it wins while the pointer is down. */
.btn:active, .button:active, .woocommerce a.button:active, .woocommerce button.button:active, .woocommerce button.button.alt:active, .single_add_to_cart_button:active {
	transform: scale(0.98); transition: all 0.3s ease-in-out, transform 0.18s cubic-bezier(0.2, 0, 0, 1);
}
.btn--ghost { background: rgba(255, 255, 255, 0.6); color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(10, 26, 52, 0.18); }
.btn--ghost:hover { background: var(--night-3); color: var(--ink); }

/* WooCommerce block cart & checkout buttons */
.wc-block-components-button:not(.is-link) {
	background: var(--accent) !important; color: #fff !important; border-radius: 10px !important; font-weight: 700 !important;
}
.wc-block-components-button:not(.is-link):hover { background: var(--accent-hover) !important; }

/* Announcement / free-shipping bar */
.announce {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px;
	background: var(--deep); color: #faf8f4; text-align: center;
	font-size: 0.88rem; font-weight: 500; padding: 8px 16px;
}
.announce .amount { font-weight: 700; }
.announce__track { width: 120px; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.18); overflow: hidden; }
.announce__track span { display: block; height: 100%; background: #d9c7b5; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; padding-top: 12px; transition: transform 1s var(--ease-out); }
/* Slid away while scrolling down (toggled in header.php); keyboard focus always brings it back. */
.site-header.is-hidden { transform: translateY(calc(-100% - 12px)); }
.site-header.is-hidden:focus-within { transform: none; }
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 0; } }
.site-header__inner {
	position: relative; isolation: isolate;
	display: flex; align-items: center; gap: 24px; min-height: 64px; padding-inline: 24px;
	border-radius: 30px;
	transition: color 0.3s;
}
/* Hatch-style glass pill. The glass lives on a ::before layer so the nav dropdown (a child) can blur the page on its own, and text stays crisp. */
.site-header__inner::before {
	content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
	background: var(--glass-light);
	-webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
	border: 1px solid var(--glass-border);
	box-shadow: var(--glass-shadow);
	transition: background 0.3s, border-color 0.3s, box-shadow 0.3s, border-radius 0.3s;
}
@media (min-resolution: 2dppx) { .site-header__inner::before { border-width: 0.5px; } }
/* Over the hero photo the pill is nearly clear: just the blur, a hairline and a whisper of navy. */
.site-header.is-over-hero:not(.is-mega-open) .site-header__inner { color: #faf8f4; }
.site-header.is-over-hero:not(.is-mega-open) .site-header__inner::before {
	background: rgba(10, 26, 52, 0.12); border-color: rgba(255, 255, 255, 0.22); box-shadow: none;
}
@media (min-width: 641px) { .site-header.is-over-hero:not(.is-mega-open) .site-nav a:hover { color: #ffffff; } }
.logo { display: block; padding: 12px 0; }
.logo img { width: 150px; }
/* The logo is black on transparent; invert turns it white over the hero. */
.site-header.is-over-hero:not(.is-mega-open) .logo img { filter: invert(1); }
.site-nav { margin-left: auto; }
.site-nav ul { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.site-nav a { text-decoration: none; font-weight: 500; font-size: 0.95rem; letter-spacing: 0.01em; display: inline-flex; align-items: center; min-height: 44px; }
.menu-toggle { display: none; }
.menu-toggle .burger path { transform-box: fill-box; transform-origin: center; transition: transform 0.3s var(--ease-out), opacity 0.25s ease; }
.menu-toggle[aria-expanded="true"] .burger__top { transform: translateY(5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .burger__bot { transform: translateY(-5px) rotate(-45deg); }
.menu-toggle[aria-expanded="true"] .burger__mid { opacity: 0; }

/* Desktop "Shop" mega menu (markup from nutrabase_mega_panel() in functions.php; behaviour in header.php). Phones and tablets keep the plain Shop link. */
.nav-shop { display: inline-flex; align-items: center; }
.nav-trigger, .mega, .mega-scrim { display: none; }
.nav-trigger {
	align-items: center; gap: 6px; min-height: 44px; padding: 0; background: none; border: 0; color: inherit; cursor: pointer;
	font: 500 0.95rem/1 var(--sans); letter-spacing: 0.01em; transition: color 0.3s ease;
}
.nav-trigger:hover { color: var(--accent); }
.nav-trigger__chev { transition: transform 0.2s ease, color 0.3s ease; }
.nav-trigger[aria-expanded="true"] .nav-trigger__chev { transform: rotate(180deg); }
.site-header.is-over-hero:not(.is-mega-open) .nav-trigger:hover { color: #ffffff; }
@media (min-width: 901px) {
	.has-mega .nav-shop > a { display: none; }
	.has-mega .nav-trigger { display: inline-flex; }
	/* The pill goes light and square-bottomed while the panel hangs from it. */
	.site-header.is-mega-open .site-header__inner::before { background: rgba(255, 255, 255, 0.94); border-radius: 30px 30px 0 0; border-bottom-color: transparent; }
	.mega {
		display: block; position: absolute; top: calc(100% - 1px); left: 0; right: 0; color: var(--ink);
		background: rgba(255, 255, 255, 0.94);
		-webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
		border: 1px solid transparent; border-top: 0; border-radius: 0 0 30px 30px;
		clip-path: inset(0 0 100% round 0 0 30px 30px);
		visibility: hidden; pointer-events: none;
		transition: clip-path 0.45s var(--ease-out), border-color 0.45s var(--ease-out), visibility 0s linear 0.45s;
	}
	.is-mega-open .mega {
		clip-path: inset(0 0 0% round 0 0 30px 30px); border-color: rgba(204, 204, 204, 0.4);
		visibility: visible; pointer-events: auto; transition-delay: 0s;
	}
	.mega__inner {
		display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 40px; padding: 28px 24px 32px;
		opacity: 0; transition: opacity 0.35s ease;
		/* Short windows: scroll inside the panel instead of cutting it off (header bottom is at most ~130px down). */
		max-height: calc(100vh - 146px); max-height: calc(100dvh - 146px); overflow-y: auto; overscroll-behavior: contain;
	}
	.is-mega-open .mega__inner { opacity: 1; transition-delay: 0.08s; }
	.mega__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
	.mega-card { display: flex; flex-direction: column; }
	.mega .mega-card__photo { display: block; overflow: hidden; border-radius: var(--radius); margin-bottom: 14px; background: var(--night-3); min-height: 0; }
	.mega-card__photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
	.mega-card__name { font: 600 1.05rem/1.3 var(--sans); letter-spacing: -0.01em; margin: 0 0 4px; }
	.mega-card__price { margin: 0 0 14px; color: var(--muted); font-size: 0.95rem; }
	.mega-card__actions { display: flex; align-items: center; gap: 18px; margin: auto 0 0; }
	.mega .btn { border-radius: 999px; min-height: 40px; padding: 0.7em 1.4em; font-size: 0.9rem; }
	.mega .mega-card__more { min-height: 40px; font-size: 0.92rem; text-decoration: underline; text-underline-offset: 4px; }
	.mega .mega__links { display: block; gap: 0; margin: 0; padding: 0 0 0 32px; border-left: 1px solid var(--line); align-self: start; }
	.mega .mega__links a {
		display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 52px;
		border-bottom: 1px solid var(--line); font-size: 1.05rem;
	}
	.mega .mega__links li:last-child a { border-bottom: 0; }
	.mega__chev { font-size: 1.5rem; line-height: 1; color: var(--accent-text); transition: transform 0.2s ease, color 0.3s ease; }
	.mega__links a:hover .mega__chev, .mega__links a:focus-visible .mega__chev { transform: translateX(3px); }
	/* Page scrim under the header; clicking it closes the menu. */
	.mega-scrim {
		display: block; position: fixed; inset: 0; z-index: 49; background-color: transparent; visibility: hidden; pointer-events: none;
		transition: background-color 0.3s ease, visibility 0s linear 0.3s;
	}
	.site-header.is-mega-open + .mega-scrim { background-color: rgba(10, 26, 52, 0.28); visibility: visible; pointer-events: auto; transition-delay: 0s; }
}
.show-sm { display: none !important; }
.cart-link { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; text-decoration: none; }
.cart-count {
	position: absolute; top: 2px; right: -2px; min-width: 20px; height: 20px; padding: 0 5px;
	border-radius: 10px; background: var(--accent); color: var(--accent-ink);
	font-size: 0.72rem; font-weight: 700; display: grid; place-items: center;
}

/* Hero: full-bleed night photo; slides up under the floating header, navy fade keeps the text readable. */
.hero {
	--muted: #d6dde8; --accent-text: #d9c7b5;
	color: #faf8f4;
	background:
		linear-gradient(90deg, rgba(10, 26, 52, 0.9) 0%, rgba(10, 26, 52, 0.65) 42%, rgba(10, 26, 52, 0) 78%),
		url("assets/hero-bedroom.jpg") 70% center / cover no-repeat var(--deep);
	margin-top: -78px;
	padding: calc(78px + clamp(72px, 11vw, 150px)) 0 clamp(72px, 11vw, 150px);
}
.hero__inner { max-width: 1180px; }
.hero__copy { max-width: 560px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2rem; }
.hero .btn { background: #faf8f4; color: var(--deep); }
.hero .btn:hover { background: #ffffff; color: var(--deep); }
.hero .btn--ghost {
	background: rgba(255, 255, 255, 0.1); color: #faf8f4; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
	-webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.hero .btn--ghost:hover { background: rgba(255, 255, 255, 0.18); color: #ffffff; }

/* Perks strip */
.perks {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
	list-style: none; padding: 0; margin-block: 40px 0;
	background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.perks li { background: var(--night-2); padding: 22px 24px; display: grid; gap: 2px; text-align: center; }
.perks span { color: var(--muted); font-size: 0.92rem; }

/* Routine */
.routine { margin-block: 96px; }
.routine__head { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.routine__head img { border-radius: var(--radius); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.ink-accent { color: #5e4561; } /* solid fallback; dusk plum to warm coral from the footer palette, both ends 4.8:1 or better on #faf8f4 */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.ink-accent {
		background: linear-gradient(90deg, #5e4561, #a5583f); -webkit-background-clip: text; background-clip: text;
		-webkit-text-fill-color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone;
	}
}
@media (forced-colors: active) { .ink-accent { background: none; -webkit-text-fill-color: currentColor; } }

/* Swipe rail: native scroll-snap, bleeds off the right edge so the next card peeks. */
.rail {
	margin: 40px calc(50% - 50vw) 0 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
	scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 4px;
}
.rail::-webkit-scrollbar { display: none; }
.rail:focus-visible { outline-offset: 6px; border-radius: var(--radius); }
.steps { list-style: none; padding: 0; margin: 0; display: flex; gap: 24px; }
.steps li { flex: 0 0 34%; min-width: 0; scroll-snap-align: start; }
.steps li:last-child { margin-right: 16px; }
.steps img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); margin-bottom: 18px; background: var(--night-3); user-select: none; -webkit-user-drag: none; }
.steps__title { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.steps__title h3 { margin: 0; }
.steps p { color: var(--muted); margin: 0; max-width: 30em; }
.steps__num {
	flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
	background: var(--night-3); color: var(--accent-text); font-weight: 700; font-size: 0.95rem;
}

/* Product grids (WooCommerce loop markup) */
.products-section { margin-bottom: 96px; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.section-head a { color: var(--accent-text); text-decoration: none; font-weight: 500; padding: 12px 0; }
ul.products { list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
ul.products::before, ul.products::after { display: none !important; }
ul.products li.product {
	position: relative; background: var(--night-2); border: 1px solid var(--line); border-radius: var(--radius);
	padding: 14px 14px 20px; display: flex; flex-direction: column; box-shadow: var(--shadow); transition: box-shadow 0.2s, transform 0.2s; margin: 0 !important; width: auto !important; float: none !important;
}
ul.products li.product:hover { box-shadow: 0 2px 4px rgba(10, 26, 52, 0.05), 0 16px 36px rgba(10, 26, 52, 0.1); transform: translateY(-2px); }
.product-thumb { display: block; overflow: hidden; border-radius: 12px; margin-bottom: 14px; }
ul.products li.product a img { border-radius: 12px; aspect-ratio: 1; object-fit: cover; width: 100%; margin-bottom: 0; transition: transform 0.6s var(--ease-out); }
ul.products li.product:hover a img { transform: scale(1.04); }
/* WooCommerce's own img margin (1em) is more specific than the rule above; reset it so the clipped box is exactly the photo, and the title sits 14px below it. */
.woocommerce ul.products li.product .product-thumb img { margin: 0; display: block; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { padding-top: 0; }
ul.products li.product a { text-decoration: none; }
.woocommerce-loop-product__title { font: 600 1.05rem/1.3 var(--sans); margin: 0 4px 6px; }
.woocommerce ul.products li.product .price { display: block; margin: 0 4px 16px; color: var(--muted); font-size: 1rem; }
ul.products li.product .button { margin: auto 4px 0; }
ul.products li.product .star-rating { margin: 0 4px 6px; }
.price ins { text-decoration: none; color: var(--accent); font-weight: 700; }
.price del { opacity: 0.6; margin-right: 6px; }
.onsale {
	position: absolute; top: 24px; left: 24px; z-index: 2; background: var(--accent); color: var(--accent-ink);
	border-radius: 999px; padding: 4px 12px; font-size: 0.8rem; font-weight: 700; line-height: 1.6;
}
.added_to_cart { display: block; margin: 10px 4px 0; color: var(--accent-text); font-size: 0.9rem; }

/* Bundle */
.bundle { background: var(--deep); color: #faf8f4; --muted: #b7c4d6; --accent-text: #d9c7b5; padding: 88px 0; margin-bottom: 96px; }
.bundle .btn { background: #faf8f4; color: var(--deep); }
.bundle .btn:hover { background: #ffffff; color: var(--deep); }
.bundle__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.bundle__media img { border-radius: var(--radius); width: 100%; aspect-ratio: 1; object-fit: cover; }
.bundle .price { font-size: 1.4rem; margin: 0 0 24px; }

/* Reviews */
.reviews { margin-bottom: 96px; }
.reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.review { margin: 0; background: var(--night-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }
.review blockquote { margin: 12px 0; }
.review figcaption { color: var(--muted); font-size: 0.9rem; }

/* FAQ */
.faq { max-width: 780px; margin-bottom: 96px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 36px 20px 0; font-weight: 500; font-size: 1.08rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 16px; font-size: 1.5rem; color: var(--accent-text); transition: transform 0.2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--muted); margin: 0 0 20px; }

/* Shop + single product */
.shop-wrap, .page-wrap { padding-block: 40px 80px; }
.woocommerce-breadcrumb { color: var(--muted); font-size: 0.9rem; margin-bottom: 24px; }
.woocommerce-breadcrumb a { color: var(--muted); }
.woocommerce-products-header__title { margin-bottom: 0.2em; }
.woocommerce-result-count { color: var(--muted); float: left; margin: 0; }
.woocommerce-ordering { float: right; margin: 0; }
.woocommerce-ordering select, .quantity input.qty, select, input[type="text"], input[type="email"], input[type="tel"], input[type="password"], textarea {
	background: var(--night-2); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font: inherit;
}
.woocommerce-ordering + ul.products, .woocommerce-result-count + .woocommerce-ordering + ul.products { clear: both; padding-top: 24px; }

div.product { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; position: relative; }
div.product > *:not(.woocommerce-product-gallery):not(.summary):not(.onsale) { grid-column: 1 / -1; }
div.product .onsale { top: 16px; left: 16px; }
.woocommerce-product-gallery { position: relative; width: auto !important; opacity: 1 !important; }
.woocommerce-product-gallery img { border-radius: var(--radius); }
.woocommerce-product-gallery__trigger { position: absolute; top: 16px; right: 16px; z-index: 5; width: 40px; height: 40px; border-radius: 50%; background: var(--night-2); display: grid; place-items: center; text-indent: -999px; overflow: hidden; }
/* WooCommerce sets this to z-index 99; keep it under the header (50) and the mega-menu scrim (49). */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger { z-index: 2; }
.woocommerce-product-gallery__trigger::before { content: "⤢"; text-indent: 0; color: var(--ink); position: absolute; }
.flex-control-thumbs { list-style: none; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.flex-control-thumbs img { border-radius: 10px; cursor: pointer; opacity: 0.6; }
.flex-control-thumbs img.flex-active, .flex-control-thumbs img:hover { opacity: 1; }
.summary .product_title { font-size: clamp(2rem, 4vw, 3rem); }
.woocommerce div.product p.price, .woocommerce div.product span.price { font-size: 1.5rem; margin: 0 0 20px; color: var(--accent); }
.summary .woocommerce-product-details__short-description { color: var(--muted); }
.summary .woocommerce-product-details__short-description ul { padding-left: 1.2em; }
form.cart { display: flex; gap: 12px; margin: 28px 0 16px; }
form.cart .quantity input.qty { width: 72px; height: 100%; text-align: center; }
form.cart .single_add_to_cart_button { flex: 1; font-size: 1.05rem; }
.trust { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--muted); font-size: 0.92rem; }
.trust li::before { content: "✓"; color: var(--accent-text); margin-right: 6px; font-weight: 700; }
.product_meta { color: var(--muted); font-size: 0.88rem; display: grid; gap: 4px; }
.product_meta a { color: var(--muted); }

.woocommerce-tabs { border-top: 1px solid var(--line); padding-top: 32px; }
.woocommerce-tabs ul.tabs { list-style: none; padding: 0; margin: 0 0 24px; display: flex; gap: 8px; flex-wrap: wrap; }
.woocommerce-tabs ul.tabs::before, .woocommerce-tabs ul.tabs::after { display: none; }
.woocommerce-tabs ul.tabs li { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
.woocommerce-tabs ul.tabs li::before, .woocommerce-tabs ul.tabs li::after { display: none !important; }
.woocommerce-tabs ul.tabs li a { display: block; padding: 10px 18px; border-radius: 999px; text-decoration: none; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink) !important; font-weight: 500 !important; }
.woocommerce-tabs ul.tabs li.active a { background: var(--night-3); }
.woocommerce-Tabs-panel { max-width: 780px; color: var(--muted); }
.woocommerce-Tabs-panel h2 { color: var(--ink); font-size: 1.5rem; }
div.product .faq { max-width: 780px; margin: 0; padding: 0; width: auto; }
.related.products > h2 { margin-top: 24px; }

/* Notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	background: var(--night-2) !important; color: var(--ink) !important; border: 1px solid var(--line) !important;
	border-left: 4px solid var(--accent) !important; border-radius: 12px; padding: 16px 20px 16px 48px !important; margin-bottom: 24px;
	list-style: none;
}
.woocommerce-message .button { float: right; padding: 0.6em 1.2em; }

/* Footer: a cream card floating over a calm dusk backdrop (navy to muted rose), as on hatch.co. */
.site-footer {
	color: #faf8f4; padding: 24px 0 28px;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
		radial-gradient(120% 55% at 50% 112%, rgba(201, 138, 107, 0.2), transparent 70%),
		linear-gradient(180deg, #0a1a34 0%, #13294b 30%, #2f3558 55%, #5e4561 78%, #7d4f60 100%);
}
.site-footer__card {
	--muted: #274d7b; --line: rgba(19, 41, 75, 0.14);
	margin: 0 16px; padding: clamp(28px, 5vw, 64px); border-radius: 12px;
	background: var(--night-3); color: var(--deep);
}
.site-footer__inner { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.logo-footer { width: 130px; margin-bottom: 8px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, auto); gap: 10px 40px; }
.site-footer__card a { color: var(--muted); text-decoration: none; }
.site-footer__card a:hover { color: var(--deep); text-decoration: underline; }
.site-footer__legal { margin: 0 16px; padding: 24px 12px 0; }
.site-footer__legal a { color: #faf8f4; text-decoration: none; }
.site-footer__legal a:hover { color: #ffffff; text-decoration: underline; }
.site-footer__legal ul { display: flex; flex-wrap: wrap; gap: 6px 28px; font-size: 0.9rem; }
.site-footer__legal p { margin: 16px 0 0; color: #f1ebe1; }

/* Tablet */
@media (max-width: 900px) {
	.bundle__inner, div.product, .routine__head { grid-template-columns: 1fr; gap: 32px; }
	ul.products, .reviews__grid { grid-template-columns: repeat(2, 1fr); }
	.steps li { flex-basis: 44%; }
}

/* Phone */
@media (max-width: 640px) {
	body { font-size: 16px; }
	.hide-sm { display: none !important; }
	.show-sm { display: revert !important; }
	.announce { font-size: 0.82rem; padding: 7px 12px; }

	/* Header: logo left, cart + menu button right; menu drops down full width. */
	.site-header__inner { gap: 4px; min-height: 60px; }
	.logo { margin-right: auto; }
	.logo img { width: 120px; }
	.menu-toggle { display: inline-grid; place-items: center; width: 44px; height: 44px; order: 3; background: none; border: 0; color: inherit; cursor: pointer; }
	.site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; color: var(--ink); margin-top: 8px; border-radius: 16px;
		background: var(--glass-light); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
		border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow), 0 16px 32px rgba(10, 26, 52, 0.08); }
	.menu-open .site-nav { display: block; animation: nav-enter 0.3s var(--ease-out); }
	.menu-open .site-nav ul { animation: fade-in 0.4s ease; }
	.site-nav ul { flex-direction: column; gap: 0; padding: 8px 16px 16px; }
	.site-nav a { min-height: 52px; width: 100%; font-size: 1.1rem; border-bottom: 1px solid var(--line); }
	.site-nav li:last-child a { border-bottom: 0; }

	/* No iOS zoom-on-focus: inputs must be at least 16px. */
	input, select, textarea { font-size: 16px !important; }

	/* Text spans the full width on phones, so fade top-to-bottom instead of left-to-right. */
	.hero {
		margin-top: -72px; padding: calc(72px + 64px) 0 56px;
		background:
			linear-gradient(180deg, rgba(10, 26, 52, 0.82) 0%, rgba(10, 26, 52, 0.6) 60%, rgba(10, 26, 52, 0.85) 100%),
			url("assets/hero-bedroom.jpg") 78% center / cover no-repeat var(--deep);
	}
	.hero__actions .btn { flex: 1 1 100%; }
	.routine { margin-top: 56px; }
	.steps li { flex-basis: 80%; }
	.steps { gap: 16px; }
	.nav-shop { display: block; width: 100%; }
	.site-footer a { display: inline-flex; align-items: center; min-height: 44px; }
	.site-footer ul { gap: 0 32px; }
	.site-footer__legal ul { gap: 0 20px; }
	.site-footer__legal { padding-inline: 8px; }
	.woocommerce-result-count { display: none; }
	.woocommerce-ordering select { width: 100%; }
	/* Keep the product title and price peeking above the fold under tall photos. */
	.woocommerce-product-gallery__image img { max-height: 50vh; width: 100%; object-fit: contain; background: var(--night-2); }
	div.product { gap: 16px; }
	.shop-wrap { padding-top: 16px; }
	.perks { grid-template-columns: 1fr; margin-top: 24px; }
	ul.products { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	ul.products li.product { padding: 8px 8px 14px; }
	.woocommerce-loop-product__title { font-size: 0.95rem; }
	ul.products li.product .button { padding: 0.8em 1em; font-size: 0.88rem; }
	.reviews__grid { grid-template-columns: 1fr; }
	.routine, .products-section, .reviews, .faq, .bundle { margin-bottom: 64px; }
	.woocommerce-result-count, .woocommerce-ordering { float: none; margin-bottom: 12px; }

	/* Sticky Add to cart on product pages: the buy button is always one tap away. */
	.single-product form.cart {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; margin: 0;
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
		background: var(--glass-light); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
		border-top: 1px solid var(--glass-border); box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.08);
	}
	.single-product .site-footer { padding-bottom: 110px; }
}



/* The phone menu unrolls from the top, as on hatch.co. */
@keyframes nav-enter { from { clip-path: inset(0 0 100% 0 round 16px); } to { clip-path: inset(0 0 0 0 round 16px); } }
@keyframes fade-in { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
	/* No travel, zoom or clip animation: state changes are instant. */
	.btn:hover, .btn:active, .button:hover, .button:active, .woocommerce a.button:hover, .woocommerce a.button:active,
	.woocommerce button.button:hover, .woocommerce button.button:active, .woocommerce button.button.alt:hover, .woocommerce button.button.alt:active,
	.single_add_to_cart_button:hover, .single_add_to_cart_button:active, ul.products li.product:hover,
	ul.products li.product:hover a img, .mega__links a:hover .mega__chev, .mega__links a:focus-visible .mega__chev { transform: none !important; }
	.mega { clip-path: none !important; }
	.rail { scroll-behavior: auto; }
}

/* No backdrop-filter support, or the visitor asked for less transparency: solid fills, same look. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.site-header__inner::before { background: #ffffff; }
	.site-header.is-over-hero:not(.is-mega-open) .site-header__inner::before { background: rgba(10, 26, 52, 0.55); }
	.hero .btn--ghost { background: rgba(10, 26, 52, 0.45); }
	.site-nav, .single-product form.cart { background: #ffffff; }
}
@media (prefers-reduced-transparency: reduce) {
	.site-header__inner::before, .hero .btn--ghost, .site-nav, .single-product form.cart {
		-webkit-backdrop-filter: none; backdrop-filter: none;
	}
	.site-header__inner::before { background: #ffffff; }
	.site-header.is-over-hero:not(.is-mega-open) .site-header__inner::before { background: rgba(10, 26, 52, 0.55); }
	.hero .btn--ghost { background: rgba(10, 26, 52, 0.45); }
	.site-nav, .single-product form.cart { background: #ffffff; }
}