/*
Theme Name: Tropical Fish & Coral
Description: An editorial WooCommerce theme for a marine livestock, dry goods and reef supplies store. Builds its own category tree, mega menu and starter pages; pairs with the TFC Supplier Import plugin.
Version: 2.6.1
Requires at least: 6.3
Requires PHP: 7.4
Text Domain: tfc
*/

/* ==========================================================================
   Tokens
   ========================================================================== */
:root {
	--ink: #0d2436;
	--ink-2: #2a4256;
	--muted: #557084;
	--abyss: #062b45;
	--deep: #005a91;
	--lagoon: #0077be;
	--lagoon-2: #1e90ff;
	--foam: #d9fafa;
	--mist: #f0fcfc;
	--sand: #e0ffff;
	--sand-2: #c7f0f0;
	--paper: #fbfeff;
	--line: #cfe5ea;
	--line-2: #b4d2db;

	/* The brand palette: #0077BE #00BFFF #1E90FF #E0FFFF #2E8B57 */
	--blue: #0077be;        /* primary: buttons, links, brand */
	--blue-ink: #005f98;    /* hover / pressed */
	--sky: #00bfff;         /* highlight on dark blue surfaces */
	--dodger: #1e90ff;      /* secondary accent: focus rings, glows */
	--ice: #e0ffff;         /* light surfaces */
	--sea: #2e8b57;         /* accent: icons, numerals */
	--sea-ink: #23724a;     /* sea green where white text sits on it */
	--sea-soft: #ddf3e6;
	--alert: #b3261e;       /* errors and "out of stock" only */
	--alert-soft: #fdecea;

	--display: "Fraunces", "Iowan Old Style", Georgia, serif;
	--body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

	--wrap: 1320px;
	--gutter: clamp(16px, 4vw, 40px);
	--r: 16px;
	--r-sm: 10px;
	--shadow-sm: 0 1px 2px rgba(13, 36, 54, .06);
	--shadow: 0 1px 2px rgba(13, 36, 54, .05), 0 12px 32px -16px rgba(13, 36, 54, .28);
	--ease: cubic-bezier(.2, .7, .2, 1);
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font: 400 16px/1.65 var(--body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; height: auto; }
img { display: block; }
a { color: var(--lagoon); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--blue-ink); }
:focus-visible { outline: 2px solid var(--dodger); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, h4 {
	font-family: var(--display);
	font-weight: 500;
	line-height: 1.12;
	letter-spacing: -.015em;
	color: var(--ink);
	margin: 0 0 .5em;
	font-optical-sizing: auto;
}
h1 { font-size: clamp(2.3rem, 4.6vw, 4.1rem); letter-spacing: -.025em; }
h2 { font-size: clamp(1.7rem, 2.8vw, 2.5rem); }
h3 { font-size: 1.35rem; }
h1 em, h2 em, h3 em { font-style: italic; font-weight: 400; color: var(--blue); }
p { margin: 0 0 1em; }
.icon { width: 1.25em; height: 1.25em; flex: none; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 8px; }
.skip-link:focus { top: 12px; }

.eyebrow {
	display: inline-flex; align-items: center; gap: 10px;
	font: 600 .74rem/1 var(--body);
	letter-spacing: .16em; text-transform: uppercase;
	color: var(--lagoon);
	margin-bottom: 14px;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .7; }
.eyebrow--light { color: var(--sky); }
.lead { font-size: 1.14rem; line-height: 1.6; color: var(--ink-2); }

/* Buttons (theme + WooCommerce) */
.btn,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit,
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt,
.woocommerce .button, .wp-element-button {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 48px; padding: 0 22px;
	border: 1px solid transparent; border-radius: var(--r-sm);
	background: var(--ink); color: #fff;
	font: 600 .95rem/1 var(--body); letter-spacing: .01em;
	text-decoration: none; cursor: pointer;
	transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.btn:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce .button:hover { background: var(--deep); color: #fff; }
.btn--coral, .btn--primary, .woocommerce button.button.alt, .woocommerce a.button.alt, .woocommerce input.button.alt, .single_add_to_cart_button { background: var(--blue) !important; }
.btn--coral:hover, .btn--primary:hover, .woocommerce button.button.alt:hover, .woocommerce a.button.alt:hover, .single_add_to_cart_button:hover { background: var(--blue-ink) !important; color: #fff; }
.btn--dark { background: var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); }
.woocommerce button.button:disabled, .woocommerce button.button.disabled { opacity: .45; }

.link-arrow {
	display: inline-flex; align-items: center; gap: 8px;
	font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap;
}
.link-arrow .icon { transition: transform .25s var(--ease); }
.link-arrow:hover { color: var(--blue-ink); }
.link-arrow:hover .icon { transform: translateX(4px); }

/* Forms */
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"], input[type="url"],
select, textarea, .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .select2-container .select2-selection {
	width: 100%; min-height: 46px; padding: 10px 14px;
	border: 1px solid var(--line-2); border-radius: var(--r-sm);
	background: #fff; color: var(--ink); font: inherit;
	transition: border-color .2s, box-shadow .2s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--lagoon); box-shadow: 0 0 0 3px rgba(0, 119, 190, .18); }
select { appearance: none; padding-right: 40px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f1e26' stroke-width='1.8'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center / 18px; }
label { font-weight: 500; }

.search-field { position: relative; display: flex; align-items: center; }
.search-field .icon { position: absolute; left: 14px; color: var(--muted); pointer-events: none; }
.search-field input[type="search"] { padding-left: 44px; background: var(--mist); border-color: transparent; }
.search-field input[type="search"]:focus { background: #fff; border-color: var(--lagoon); }

/* ==========================================================================
   Header
   ========================================================================== */
.announce { background: var(--abyss); color: #d4ecfb; font-size: .84rem; text-align: center; }
.announce .wrap { padding-block: 9px; }
.announce a { color: #fff; font-weight: 600; margin-left: 6px; }

.site-header {
	position: sticky; top: 0; z-index: 50;
	background: rgba(251, 254, 255, .92);
	backdrop-filter: saturate(160%) blur(12px);
	border-bottom: 1px solid var(--line);
	transition: box-shadow .25s var(--ease);
}
.admin-bar .site-header { top: 32px; }
.site-header.is-scrolled { box-shadow: 0 8px 24px -18px rgba(13, 36, 54, .45); }
.header-bar { display: flex; align-items: center; gap: 28px; min-height: 78px; max-width: 1440px; } /* a little wider than the page: logo + seven items + icons need ~1320px of content */

.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); flex: none; }
.brand-mark { width: 40px; height: 40px; }
.brand-logo { max-height: 52px; width: auto; }
.brand-name { font: 600 1.34rem/1 var(--display); letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
.brand-name em { font-style: italic; font-weight: 400; color: var(--blue); }

.site-nav { flex: 1; }
.nav-list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-item { position: static; display: flex; align-items: center; }
.nav-link {
	display: inline-flex; align-items: center; min-height: 78px; padding: 0 12px;
	font-weight: 500; font-size: .96rem; color: var(--ink); text-decoration: none;
	position: relative; white-space: nowrap;
}
.nav-link::after {
	content: ""; position: absolute; left: 12px; right: 12px; bottom: 22px; height: 2px;
	background: var(--sky); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease);
}
.nav-item:hover > .nav-link::after, .nav-item:focus-within > .nav-link::after, .nav-item.is-open > .nav-link::after { transform: scaleX(1); }
.nav-link:hover { color: var(--ink); }
.mega-toggle { display: none; }

.mega {
	position: absolute; left: 0; right: 0; top: 100%;
	background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
	box-shadow: 0 30px 50px -30px rgba(13, 36, 54, .35);
	opacity: 0; visibility: hidden; transform: translateY(-6px);
	transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear .2s;
}
.nav-item.has-mega:hover .mega, .nav-item.has-mega:focus-within .mega, .nav-item.is-open .mega {
	opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
.mega-inner { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) 280px; gap: 12px 36px; padding-block: 34px 38px; }
.mega-inner { grid-template-columns: [cols-start] repeat(5, minmax(0, 1fr)) [cols-end] 280px; }
.mega-col { min-width: 0; }
.mega-col--wide { grid-column: span 2; }
.mega-col--wide ul { columns: 2; column-gap: 28px; }
.mega-heading { display: block; font: 500 1.08rem/1.2 var(--display); color: var(--ink); text-decoration: none; margin-bottom: 12px; }
a.mega-heading:hover { color: var(--blue-ink); }
.mega-col ul { list-style: none; margin: 0; padding: 0; }
.mega-col li { break-inside: avoid; }
.mega-col li a { display: block; padding: 5px 0; color: var(--ink-2); text-decoration: none; font-size: .94rem; }
.mega-col li a:hover { color: var(--lagoon); }
.mega-note { color: var(--muted); font-size: .9rem; }
.mega-promo { grid-column: -2 / -1; grid-row: 1 / span 3; position: relative; border-radius: var(--r); overflow: hidden; min-height: 260px; color: #fff; text-decoration: none; }
.mega-promo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.mega-promo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(6, 43, 69, .82)); }
.mega-promo:hover img { transform: scale(1.04); }
.mega-promo__label { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 1; display: flex; align-items: center; justify-content: space-between; font: 500 1.1rem/1.2 var(--display); }

.header-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.header-search { width: 270px; margin-right: 6px; }
.header-search input[type="search"] { min-height: 42px; }
.header-icon {
	position: relative; display: inline-grid; place-items: center; flex: none;
	width: 44px; height: 44px; border-radius: 50%; border: 0; background: none;
	color: var(--ink); cursor: pointer; text-decoration: none;
	transition: background-color .2s;
}
.header-icon:hover { background: var(--mist); color: var(--ink); }
.cart-count {
	position: absolute; top: 4px; right: 2px;
	min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
	background: var(--sea-ink); color: #fff; font: 700 .68rem/18px var(--body); text-align: center;
}
.cart-count.is-empty { display: none; }
.menu-toggle, .drawer-head, .drawer-search, .nav-scrim, .nav-item--home { display: none; }

/* ==========================================================================
   Sections
   ========================================================================== */
.section { padding-block: clamp(36px, 4.5vw, 64px); }
.section--tight { padding-top: clamp(24px, 3vw, 40px); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.section-head h2 { margin: 0; }

/* Hero: a looping aquarium video behind the headline, with a facts strip along the bottom edge.
   Autoplay is skipped for reduced motion or Save-Data (the inline script below decides, before first
   paint); either way the poster (the video's own first frame) fills the space, so there's never a
   blank box. */
.hero { position: relative; background: var(--abyss); color: #cfe6f5; }
.hero-stage { position: relative; display: flex; align-items: center; min-height: min(92vh, 860px); padding-bottom: 96px; overflow: clip; isolation: isolate; }
.hero-video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.hero-stage::before { /* darkens the left and bottom so the copy reads over every frame */
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(90deg, rgba(6, 43, 69, .86), rgba(6, 43, 69, .5) 42%, rgba(6, 43, 69, 0) 72%), linear-gradient(0deg, rgba(6, 43, 69, .8), rgba(6, 43, 69, 0) 55%);
}
/* No max-width here: .hero-copy is a plain .wrap box (see markup), so its left edge already lines up
   with the header's logo; the headline and lead cap their own width in ch instead of the box itself,
   since the box now spans the full wrap. The extra left padding that lines it up with the logo's TEXT
   specifically (desktop only, below) is skipped on phones/tablets - the header shows a hamburger button
   before the logo there, so that alignment isn't meaningful, and the room is worth more than the nicety. */
.hero-copy { position: relative; padding-block: clamp(40px, 9vh, 96px); }
@media (min-width: 761px) {
	/* 40px mark + 12px gap, both from .brand. */
	.hero-copy { padding-inline: calc(var(--gutter) + 52px) var(--gutter); }
}
.hero-copy h1 { color: #fff; max-width: 13ch; margin: 14px 0 18px; font-size: clamp(2.5rem, 5vw, 4.6rem); }
.hero-copy h1 em { color: var(--sky); font-style: italic; background-image: linear-gradient(var(--sky), var(--sky)); background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 2px; }
.hero-copy .lead { color: #cfe6f5; max-width: 44ch; margin: 0; font-size: 1.22rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.btn--light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .6); }
.btn--light:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* Loading bar: a thin shimmer under the header while the video downloads, gone once it can play (or
   never shown at all when autoplay was skipped). */
.hero-loading { position: absolute; top: 0; left: 0; width: 100%; height: 3px; overflow: hidden; background: rgba(255, 255, 255, .15); z-index: 2; transition: opacity .3s; }
.hero-loading::after { content: ""; position: absolute; inset: 0; width: 40%; background: var(--sky); animation: hero-loading 1.1s ease-in-out infinite; }
.hero-loading.is-done { opacity: 0; }
@keyframes hero-loading { from { translate: -100% 0; } to { translate: 350% 0; } }

/* Facts strip, along the bottom edge of the hero. */
.hero-facts {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; list-style: none; margin: 0;
	display: flex; flex-wrap: wrap; gap: 8px clamp(24px, 4vw, 56px); padding: 18px clamp(20px, 5vw, 64px);
	border-top: 1px solid rgba(255, 255, 255, .2); background: rgba(6, 43, 69, .55); backdrop-filter: blur(8px);
}
.hero-facts li { display: flex; flex-direction: column; gap: 2px; }
.hero-facts strong { font: 500 clamp(1.05rem, 1.6vw, 1.3rem)/1.1 var(--display); color: #fff; }
.hero-facts span { font-size: .82rem; max-width: 30ch; }


/* Category bento */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, minmax(220px, 1fr)); gap: 16px; }
.bento__a { grid-column: 1 / 3; grid-row: 1 / 3; }
.bento__b { grid-column: 3 / 4; grid-row: 1; }
.bento__c { grid-column: 4 / 5; grid-row: 1; }
.bento__d { grid-column: 3 / 4; grid-row: 2; }
.bento__e { grid-column: 4 / 5; grid-row: 2; }
.cat-tile { position: relative; display: block; overflow: hidden; border-radius: var(--r); color: #fff; text-decoration: none; isolation: isolate; min-height: 220px; }
.cat-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .8s var(--ease); }
.cat-tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6, 43, 69, 0) 40%, rgba(6, 43, 69, .78)); }
.cat-tile:hover img { transform: scale(1.05); }
.cat-tile__body { position: absolute; left: 22px; bottom: 20px; right: 70px; }
.cat-tile__count { display: block; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; opacity: .85; margin-bottom: 4px; }
.cat-tile__name { display: block; font: 500 1.55rem/1.1 var(--display); letter-spacing: -.01em; }
.bento__a .cat-tile__name { font-size: clamp(2rem, 3vw, 2.8rem); }
.cat-tile__go { position: absolute; right: 18px; bottom: 20px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .35); backdrop-filter: blur(6px); transition: background .25s, color .25s; }
.cat-tile:hover .cat-tile__go { background: #fff; color: var(--ink); }
.cat-tile:hover { color: #fff; }

.dry-strip {
	margin-top: 16px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; align-items: center;
	padding: clamp(28px, 4vw, 44px); border-radius: var(--r);
	background: var(--deep); color: #d4ecfb;
	background-image: radial-gradient(circle at 100% 0, rgba(0, 191, 255, .24), transparent 40%), repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 14px);
}
.dry-strip h3 { color: #fff; font-size: clamp(1.5rem, 2.4vw, 2rem); }
.dry-strip p { color: #b9d9ee; max-width: 46ch; }
.dry-strip .eyebrow { color: var(--sky); }
.dry-strip .btn--dark { background: #fff; color: var(--ink); }
.dry-strip .btn--dark:hover { background: var(--sky); color: var(--ink); }
.dry-strip__links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dry-strip__links a {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 15px 18px; border-radius: var(--r-sm);
	border: 1px solid rgba(255, 255, 255, .14); color: #fff; text-decoration: none; font-weight: 500;
	transition: background .2s, border-color .2s;
}
.dry-strip__links a:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .35); color: #fff; }

/* Story */
.story { background: linear-gradient(180deg, var(--paper), var(--mist)); }
.story-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.story-media { margin: 0; }
.story-media img { width: 100%; aspect-ratio: 10 / 11; object-fit: cover; border-radius: 120px 28px 28px 28px; box-shadow: var(--shadow); }
.steps { list-style: none; margin: 30px 0 30px; padding: 0; display: grid; gap: 22px; }
.steps li { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding-top: 22px; border-top: 1px solid var(--line); }
.steps li > span { font: 400 2rem/1 var(--display); color: var(--sea); font-style: italic; }
.steps strong { display: block; font-size: 1.05rem; margin-bottom: 4px; }
.steps p { margin: 0; color: var(--muted); }

/* Shipping band */
.ship-band { background: var(--abyss); color: #c6def0; padding-block: clamp(36px, 4.5vw, 64px); position: relative; overflow: clip; }
.ship-band::after { content: ""; position: absolute; inset: auto -10% -60% auto; width: 70%; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(0, 191, 255, .28), transparent); pointer-events: none; }
.ship-band__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: center; }
.ship-band h2 { color: #fff; max-width: 16ch; }
.ship-band p { max-width: 52ch; margin-bottom: 28px; }
.ship-band__facts { margin: 0; display: grid; gap: 0; border-top: 1px solid rgba(255, 255, 255, .14); }
.ship-band__facts div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 22px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.ship-band__facts dt { font: 400 clamp(1.8rem, 3vw, 2.6rem)/1 var(--display); color: #fff; }
.ship-band__facts dd { margin: 0; text-align: right; color: #9fc4de; font-size: .92rem; }

/* Assurance band + footer */
.assurance { background: var(--sand); border-top: 1px solid var(--line); }
.assurance-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-block: 34px; }
.assurance-grid div { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; align-items: center; }
.assurance-grid .icon { grid-row: span 2; width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: #fff; color: var(--lagoon); box-shadow: var(--shadow-sm); }
.assurance-grid strong { font-size: .97rem; }
.assurance-grid span { font-size: .86rem; color: var(--muted); }

.site-footer { background: var(--abyss); color: #a9c6dc; font-size: .94rem; }
.site-footer a { color: #d4ecfb; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 40px; padding-block: 64px 48px; }
.footer-brand .brand-name { color: #fff; font-size: 1.5rem; display: inline-block; margin-bottom: 16px; }
.footer-brand .brand-name em { color: var(--sky); }
.footer-brand p { max-width: 34ch; }
.footer-title { font: 600 .74rem/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: #fff; margin: 6px 0 18px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer-contact li { display: flex; align-items: center; gap: 10px; }
.footer-contact .icon { color: var(--sky); }
.footer-hours { color: #86a6bd; }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; padding-block: 22px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .84rem; color: #86a6bd; }

/* ==========================================================================
   Product cards (everywhere: home rows, shop, related products)
   ========================================================================== */
.woocommerce ul.products, ul.products {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px;
	list-style: none; margin: 0 0 32px; padding: 0;
}
.woocommerce ul.products::before, .woocommerce ul.products::after, ul.products::before, ul.products::after { display: none !important; }
.woocommerce ul.products li.product, ul.products li.product {
	position: relative; display: flex; flex-direction: column;
	width: auto !important; float: none !important; margin: 0 !important; padding: 0 0 18px !important;
	background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
	transition: box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s;
	text-align: left;
}
ul.products li.product:hover { box-shadow: var(--shadow); transform: translateY(-3px); border-color: var(--line-2); }
ul.products li.product .woocommerce-LoopProduct-link { display: flex; flex-direction: column; flex: 1; color: inherit; text-decoration: none; }
ul.products li.product img, ul.products li.product .attachment-woocommerce_thumbnail {
	width: 100% !important; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
	margin: 0 0 16px !important; background: var(--mist); border-bottom: 1px solid var(--line);
	box-shadow: none !important; border-radius: 0 !important;
}
.card-badges { position: absolute; top: 12px; left: 12px; z-index: 2; display: flex; gap: 6px; }
.badge { display: inline-block; padding: 5px 9px; border-radius: 6px; font: 700 .68rem/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--ink); }
.badge--live { background: var(--blue); }
.badge--sale { background: var(--sea-ink); }
.badge--muted { background: rgba(13, 36, 54, .72); }
.card-cat { display: block; padding: 0 18px; margin-bottom: 6px; font: 600 .7rem/1.3 var(--body); letter-spacing: .13em; text-transform: uppercase; color: var(--lagoon); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
ul.products li.product .woocommerce-loop-product__title {
	padding: 0 18px !important; margin: 0 0 12px !important;
	font: 500 1.06rem/1.32 var(--display) !important; color: var(--ink); letter-spacing: -.005em;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	min-height: calc(1.06rem * 1.32 * 2);
}
ul.products li.product .price {
	display: block; margin: auto 0 0 !important; padding: 0 18px;
	font: 600 1.08rem/1.3 var(--body) !important; color: var(--ink) !important;
}
ul.products li.product .price del { color: var(--muted); font-weight: 400; font-size: .9em; opacity: 1; margin-right: 6px; }
ul.products li.product .price ins { text-decoration: none; color: var(--sea-ink); }
ul.products li.product .button, ul.products li.product .button--disabled {
	display: flex !important; width: calc(100% - 36px); margin: 16px 18px 0 !important; min-height: 44px;
	font-size: .9rem !important; padding: 0 12px !important;
}
ul.products li.product .button.loading { opacity: .6; }
ul.products li.product .button.added::after { content: "✓"; margin-left: 6px; }
.button--disabled { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-sm); background: var(--mist); color: var(--muted); border: 1px dashed var(--line-2); font-weight: 600; cursor: not-allowed; }
ul.products li.product .added_to_cart { display: none !important; }
ul.products li.product .star-rating { display: none; }

/* ==========================================================================
   Shop archive
   ========================================================================== */
.shop-banner {
	display: grid; grid-template-columns: 1.1fr .9fr; gap: 0; align-items: stretch;
	width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--wrap) - 2 * var(--gutter));
	margin: 28px auto 0; padding: 0 !important; overflow: hidden;
	border-radius: var(--r); background: var(--sand);
}
.shop-banner__text { padding: clamp(28px, 4vw, 52px); align-self: center; }
.shop-banner__text h1 { font-size: clamp(2rem, 3.6vw, 3.2rem); margin-bottom: 12px; }
.shop-banner__text p { color: var(--ink-2); max-width: 52ch; }
.shop-banner__count { display: inline-block; margin-top: 4px; font: 600 .74rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.shop-banner__media { position: relative; min-height: 240px; }
.shop-banner__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shop-banner__media::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 80px; z-index: 1; background: linear-gradient(90deg, var(--sand), transparent); }

.breadcrumb, .woocommerce-breadcrumb { font-size: .84rem; color: var(--muted); margin-bottom: 16px; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--lagoon); }
.crumb-sep { margin: 0 8px; opacity: .5; }

.subcats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.subcats a {
	display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border-radius: 999px;
	border: 1px solid var(--line-2); background: #fff; color: var(--ink); text-decoration: none; font-size: .9rem; font-weight: 500;
	transition: background .2s, color .2s, border-color .2s;
}
.subcats a:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

.shop-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 44px; padding-block: 36px 80px; }
.shop-sidebar { position: sticky; top: 110px; align-self: start; max-height: calc(100vh - 130px); overflow: auto; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; padding-right: 6px; }
.shop-nav ul { list-style: none; margin: 0; padding: 0; }
.shop-nav > ul > li { border-bottom: 1px solid var(--line); }
.shop-nav > ul > li > a { display: block; padding: 12px 0; font: 500 1.08rem/1.3 var(--display); color: var(--ink); text-decoration: none; }
.shop-nav li ul { padding: 0 0 12px 12px; border-left: 1px solid var(--line); margin-left: 2px; }
.shop-nav li ul a { display: block; padding: 5px 0 5px 12px; color: var(--ink-2); text-decoration: none; font-size: .93rem; }
.shop-nav a:hover { color: var(--lagoon); }
.shop-nav a[aria-current="page"] { color: var(--blue); font-weight: 600; }

.shop-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.woocommerce .woocommerce-result-count, .woocommerce-result-count { margin: 0; color: var(--muted); font-size: .9rem; float: none; }
.woocommerce .woocommerce-ordering, .woocommerce-ordering { margin: 0; float: none; }
.woocommerce-ordering select { min-height: 42px; width: auto; min-width: 220px; }

.woocommerce nav.woocommerce-pagination { text-align: left; }
.woocommerce nav.woocommerce-pagination ul { display: inline-flex; flex-wrap: wrap; gap: 6px; border: 0; margin: 0; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; float: none; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span {
	display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 10px; border-radius: var(--r-sm);
	border: 1px solid var(--line-2); color: var(--ink); background: #fff; font-weight: 600;
}
.woocommerce nav.woocommerce-pagination ul li span.current, .woocommerce nav.woocommerce-pagination ul li a:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

.empty-state { text-align: center; padding: 64px 24px; border: 1px dashed var(--line-2); border-radius: var(--r); background: var(--mist); }
.empty-state > .icon { width: 44px; height: 44px; color: var(--lagoon); margin: 0 auto 14px; }
.empty-state p { color: var(--muted); }
.empty-state .search-field { max-width: 420px; margin: 20px auto 0; }

/* ==========================================================================
   Single product
   ========================================================================== */
.single-wrap { padding-block: 28px 80px; }
.single-product div.product { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.single-product div.product > *:not(.woocommerce-product-gallery):not(.summary) { grid-column: 1 / -1; }
.woocommerce div.product div.images, .woocommerce div.product div.summary { width: auto !important; float: none !important; margin: 0 !important; }
.woocommerce div.product div.images img { border-radius: var(--r); background: var(--mist); }
.woocommerce div.product div.images .flex-control-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 10px; }
.woocommerce div.product div.images .flex-control-thumbs li { width: auto !important; }
.woocommerce div.product div.images .flex-control-thumbs img { border-radius: var(--r-sm); opacity: .6; }
.woocommerce div.product div.images .flex-control-thumbs img.flex-active { opacity: 1; outline: 2px solid var(--lagoon); }
.woocommerce div.product div.images .woocommerce-product-gallery__trigger { top: 14px; right: 14px; background: #fff; box-shadow: var(--shadow-sm); }
.woocommerce div.product .product_title { font-size: clamp(2rem, 3.4vw, 2.9rem); margin-bottom: 14px; }
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--ink); font: 600 1.6rem/1.2 var(--body); margin-bottom: 18px; }
.woocommerce div.product p.price ins { text-decoration: none; color: var(--sea-ink); }
.woocommerce-product-details__short-description { color: var(--ink-2); }
.woocommerce div.product form.cart { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; margin: 26px 0; padding: 22px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.woocommerce div.product form.cart.variations_form { display: block; }
.woocommerce div.product form.cart .variations { width: 100%; margin-bottom: 12px; border: 0; }
.woocommerce div.product form.cart .variations th, .woocommerce div.product form.cart .variations td { display: block; padding: 0; text-align: left; line-height: 1.4; }
.woocommerce div.product form.cart .variations label { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.woocommerce div.product form.cart .variations select { margin: 8px 0 4px; min-width: 100%; }
.woocommerce div.product form.cart .reset_variations { font-size: .85rem; }
.woocommerce-variation-add-to-cart { display: flex; gap: 12px; margin-top: 12px; }
.woocommerce div.product form.cart div.quantity, .woocommerce .quantity { float: none; margin: 0; }
.woocommerce .quantity .qty { width: 84px; min-height: 52px; text-align: center; }
.woocommerce div.product form.cart .button { flex: 1; min-height: 52px; font-size: 1rem; }
.woocommerce div.product .stock { font-weight: 600; }
.woocommerce div.product .stock.in-stock { color: var(--sea-ink); }
.woocommerce div.product .stock.out-of-stock { color: var(--alert); }
.live-note { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: var(--r-sm); background: var(--foam); color: var(--ink-2); font-size: .94rem; line-height: 1.5; }
.live-note .icon { width: 26px; height: 26px; color: var(--lagoon); margin-top: 1px; }
.live-note strong { display: block; color: var(--ink); }
.product-assurance { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 12px; font-size: .94rem; color: var(--ink-2); }
.product-assurance li { display: flex; align-items: center; gap: 12px; }
.product-assurance .icon { color: var(--lagoon); }
.product_meta { font-size: .86rem; color: var(--muted); display: grid; gap: 4px; padding-top: 18px; border-top: 1px solid var(--line); }
.woocommerce div.product .woocommerce-tabs { margin-top: 32px; }
.woocommerce div.product .woocommerce-tabs ul.tabs { display: flex; gap: 28px; padding: 0 !important; margin: 0 0 26px !important; border-bottom: 1px solid var(--line); }
.woocommerce div.product .woocommerce-tabs ul.tabs::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { background: none !important; border: 0 !important; border-radius: 0 !important; margin: 0 !important; padding: 0 !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { display: block; padding: 12px 0 !important; font-weight: 600 !important; color: var(--muted) !important; border-bottom: 2px solid transparent; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--ink) !important; border-color: var(--blue); }
.woocommerce div.product .woocommerce-tabs .panel { max-width: 76ch; color: var(--ink-2); }
.woocommerce div.product .woocommerce-tabs .panel h2:first-child { display: none; }
.related.products, .upsells.products { margin-top: 64px; }
.related.products > h2, .upsells.products > h2 { margin-bottom: 26px; }

/* ==========================================================================
   Pages
   ========================================================================== */
.page-banner { position: relative; isolation: isolate; min-height: 340px; display: flex; align-items: flex-end; color: #fff; background: var(--deep); overflow: hidden; }
.page-banner__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.page-banner::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6, 43, 69, .15), rgba(6, 43, 69, .82)); }
.page-banner__inner { padding-block: 44px; }
.page-banner h1 { color: #fff; max-width: 20ch; margin: 0; }
.page-banner--compact { min-height: 0; background: var(--sand); color: var(--ink); }
.page-banner--compact::before { display: none; }
.page-banner--compact h1 { color: var(--ink); font-size: clamp(2rem, 3.4vw, 3rem); }
.page-body { padding-block: 56px 88px; }
.page-body--wide .prose { max-width: none; }
.prose { max-width: 760px; margin-inline: auto; font-size: 1.05rem; color: var(--ink-2); }
.prose > * + * { margin-top: 1em; }
.prose h2 { margin-top: 1.8em; font-size: clamp(1.5rem, 2.4vw, 2rem); }
.prose .lead { font-size: 1.25rem; color: var(--ink); font-family: var(--display); font-weight: 400; line-height: 1.5; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: .5em; }
.prose .note { padding: 16px 18px; border-left: 3px solid var(--blue); background: var(--foam); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: .95rem; }
.tfc-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tfc-steps > div { padding: 22px; border-radius: var(--r); background: var(--mist); border: 1px solid var(--line); }
.tfc-steps strong { display: block; font: 500 1.15rem/1.25 var(--display); color: var(--ink); margin-bottom: 8px; }
.tfc-steps p { margin: 0; font-size: .95rem; }
.tfc-faq { display: grid; gap: 10px; }
.tfc-faq details { border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; padding: 0 20px; }
.tfc-faq summary { cursor: pointer; list-style: none; padding: 18px 28px 18px 0; position: relative; font: 500 1.08rem/1.35 var(--display); color: var(--ink); }
.tfc-faq summary::-webkit-details-marker { display: none; }
.tfc-faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font: 300 1.6rem/1 var(--body); color: var(--lagoon); transition: transform .2s; }
.tfc-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.tfc-faq details p { margin: 0 0 18px; }
.contact-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 28px; }
.contact-card { padding: 22px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); }
.contact-card .icon { width: 40px; height: 40px; padding: 9px; border-radius: 10px; background: var(--foam); color: var(--lagoon); margin-bottom: 14px; }
.contact-card .eyebrow { margin-bottom: 6px; }
.contact-card p { margin: 0; color: var(--ink); font-size: 1.05rem; }
.contact-form { max-width: 520px; margin-top: 32px; display: grid; gap: 16px; }
.contact-form label { display: block; font-weight: 500; margin-bottom: 6px; }
.contact-form input, .contact-form textarea { width: 100%; }
.contact-form .tfc-hp { position: absolute; left: -9999px; } /* honeypot: hidden from people, still there for bots */
.contact-form .form-error { padding: 12px 16px; border-radius: var(--r-sm); background: var(--alert-soft); color: var(--alert); margin: 0; }
.form-success { padding: 22px; border-radius: var(--r); background: var(--foam); color: var(--ink); max-width: 520px; margin-top: 32px; }
.post-list { display: grid; gap: 18px; max-width: 760px; margin-inline: auto; }
.post-card { padding: 22px; border: 1px solid var(--line); border-radius: var(--r); }

/* ==========================================================================
   WooCommerce notices, cart, checkout, account
   ========================================================================== */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .wc-block-components-notice-banner {
	border: 0 !important; border-radius: var(--r-sm) !important; background: var(--foam) !important; color: var(--ink) !important;
	padding: 16px 20px 16px 52px !important; margin-bottom: 24px !important;
}
.woocommerce-message::before, .woocommerce-info::before { color: var(--lagoon) !important; top: 16px !important; left: 20px !important; }
.woocommerce-error { background: var(--alert-soft) !important; }
.woocommerce-error::before { color: var(--alert) !important; }
.woocommerce-message .button { float: right; min-height: 36px; }
.wc-block-components-button:not(.is-link) { background: var(--ink) !important; color: #fff !important; border-radius: var(--r-sm) !important; min-height: 50px; }
.wc-block-components-button:not(.is-link):hover { background: var(--deep) !important; }
.wc-block-checkout__actions_row .wc-block-components-button, .wc-block-cart__submit-button { background: var(--blue) !important; }
.wc-block-components-text-input input, .wc-block-components-combobox .wc-block-components-combobox-control input { border-radius: var(--r-sm) !important; }
.wc-block-components-sidebar-layout { gap: 36px; }
.wc-block-cart .wc-block-components-product-name, .wc-block-components-product-name { font-family: var(--display); font-weight: 500; color: var(--ink); }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.woocommerce-account .woocommerce-MyAccount-navigation a { display: block; padding: 10px 14px; border-radius: var(--r-sm); color: var(--ink); text-decoration: none; }
.woocommerce-account .woocommerce-MyAccount-navigation .is-active a, .woocommerce-account .woocommerce-MyAccount-navigation a:hover { background: var(--mist); }
.woocommerce form.login, .woocommerce form.register { border: 1px solid var(--line) !important; border-radius: var(--r) !important; padding: 28px !important; background: #fff; }

/* ==========================================================================
   Responsive
   ========================================================================== */
/* Search is an icon that opens on click at every desktop width: with seven menu items there is no room for the full box. */
.header-search { width: 44px; margin: 0; }
.header-search input[type="search"] { position: absolute; right: 0; width: 44px; padding: 0; opacity: 0; cursor: pointer; }
.header-search .icon { left: 50%; transform: translateX(-50%); color: var(--ink); }
.header-search:focus-within { width: 260px; }
.header-search:focus-within input[type="search"] { width: 260px; padding-left: 44px; opacity: 1; cursor: text; }
.header-search:focus-within .icon { left: 14px; transform: none; color: var(--muted); }

@media (max-width: 1240px) {
	.mega-inner { grid-template-columns: repeat(4, minmax(0, 1fr)) 240px; }
	.woocommerce ul.products, ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.shop-main ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.footer-grid { grid-template-columns: 1.4fr repeat(2, 1fr); }
	.footer-grid > :first-child { grid-row: span 2; }
}

/* Menu: the full menu needs about 1270px with seven items, so it becomes the hamburger drawer below 1320px
   (the rest of the layout switches at 1024px, further down). */
@media (max-width: 1320px) {
	/* backdrop-filter would make the fixed drawer size itself to the header, so go solid here */
	.site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--paper); }
	.menu-toggle { display: inline-grid; margin-left: -8px; }
	.header-bar { gap: 8px; min-height: 66px; }
	.header-search { display: none; } /* search lives in the menu drawer */
	.header-actions { gap: 2px; }
	.brand { margin-right: auto; min-width: 0; }
	.brand-name { font-size: 1.18rem; }
	.brand-mark { width: 34px; height: 34px; }

	/* The nav becomes a slide-out drawer; mega menus become accordions. */
	.site-nav {
		position: fixed; inset: 0 auto 0 0; z-index: 70; width: min(88vw, 400px);
		display: flex; flex-direction: column; overflow-y: auto;
		background: var(--paper); box-shadow: 30px 0 60px -30px rgba(0, 0, 0, .4);
		transform: translateX(-102%); transition: transform .35s var(--ease); visibility: hidden;
	}
	.menu-open .site-nav { transform: none; visibility: visible; }
	.nav-scrim { display: block; position: fixed; inset: 0; z-index: 60; background: rgba(6, 43, 69, .45); opacity: 0; pointer-events: none; transition: opacity .3s; }
	.menu-open .nav-scrim { opacity: 1; pointer-events: auto; }
	.menu-open { overflow: hidden; }
	.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 14px 22px; border-bottom: 1px solid var(--line); }
	.drawer-search { display: flex; margin: 16px 16px 6px; }
	.nav-list { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 0 24px; }
	.nav-item { flex-wrap: wrap; border-bottom: 1px solid var(--line); }
	.nav-item--home { display: flex; }
	.nav-link { flex: 1; min-height: 58px; padding: 0 22px; font: 500 1.2rem/1 var(--display); }
	.nav-link::after { display: none; }
	.mega-toggle { display: grid; place-items: center; width: 58px; height: 58px; border: 0; background: none; color: var(--ink); cursor: pointer; }
	.mega-toggle .icon { transition: transform .25s; }
	.nav-item.is-open .mega-toggle .icon { transform: rotate(180deg); }
	.mega { position: static; flex-basis: 100%; display: none; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: var(--mist); }
	.nav-item.has-mega:hover .mega { display: none; }
	.nav-item.is-open .mega, .nav-item.is-open:hover .mega { display: block; }
	.mega-inner { display: block; padding: 14px 22px 18px; }
	.mega-col { padding: 10px 0; }
	.mega-col--wide ul { columns: 2; }
	.mega-promo, .mega-note { display: none; }
	.mega-heading { font-size: 1rem; margin-bottom: 6px; }
}

@media (max-width: 1024px) {
	.bento { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; grid-auto-rows: minmax(230px, auto); }
	.bento__a { grid-column: 1 / -1; grid-row: auto; min-height: 320px; }
	.bento__b, .bento__c, .bento__d, .bento__e { grid-column: auto; grid-row: auto; }
	.dry-strip { grid-template-columns: 1fr; }
	.story-grid, .ship-band__grid { grid-template-columns: 1fr; gap: 40px; }
	.story-media { max-width: 520px; }
	.shop-layout { grid-template-columns: minmax(0, 1fr); }
	.shop-sidebar { display: none; }
	.single-product div.product { grid-template-columns: minmax(0, 1fr); }
	.assurance-grid { grid-template-columns: repeat(2, 1fr); }
	.admin-bar .site-header { top: 46px; }
}

/* Home rows at 3 across: show whole rows only (6 of 8, 3 of 4) so no card sits alone. */
@media (min-width: 761px) and (max-width: 1240px) {
	.section ul.products > li:nth-child(n+7) { display: none !important; }
	.section ul.products:has(> li:nth-child(4):last-child) > li:nth-child(4) { display: none !important; }
}

@media (max-width: 760px) {
	body { font-size: 15.5px; }
	.announce { font-size: .76rem; }
	.announce .wrap { padding-block: 7px; }
	.header-icon { width: 40px; height: 40px; }
	.brand { gap: 8px; }
	.brand-mark { width: 30px; height: 30px; }
	.brand-name { font-size: 1.04rem; }
	.section-head { flex-direction: column; align-items: flex-start; gap: 10px; }
	/* Copy spans the full width on phones, so darken from the bottom instead of the left. */
	.hero-stage::before { background: linear-gradient(0deg, rgba(6, 43, 69, .94), rgba(6, 43, 69, .62) 52%, rgba(6, 43, 69, .12) 88%); }
	.hero-copy { padding-block: 32px 24px; }
	/* Facts strip: each fact's own text wraps to 2 lines at this width, so its rendered height is
	   unpredictable - a fixed padding-bottom reserved for it (the old approach) overlapped the buttons
	   whenever the text wrapped more than expected. Flow it after the copy instead of pinning it to the
	   stage's bottom edge, so the section just grows to fit both, no magic number to keep in sync. */
	.hero-stage { padding-bottom: 0; flex-wrap: wrap; align-content: center; }
	.hero-facts { position: static; margin-top: 20px; flex-direction: column; gap: 10px; padding: 14px 20px; }
	.hero-actions { margin-top: 24px; }
	.hero-actions .btn { flex: 1; }
	.bento { grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(180px, auto); gap: 10px; } /* auto: a tile never outgrows its row and overlaps the next */
	.cat-tile { min-height: 180px; }
	.bento__a { min-height: 260px; }
	.cat-tile__body { left: 14px; bottom: 14px; right: 50px; }
	.cat-tile__name { font-size: 1.2rem; }
	.cat-tile__go { width: 34px; height: 34px; right: 12px; bottom: 14px; }
	.dry-strip__links { grid-template-columns: 1fr; }
	.woocommerce ul.products, ul.products, .shop-main ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.card-cat { padding: 0 12px; font-size: .64rem; }
	ul.products li.product .woocommerce-loop-product__title { padding: 0 12px !important; font-size: .95rem !important; min-height: calc(.95rem * 1.32 * 2); }
	ul.products li.product .price { padding: 0 12px; font-size: .98rem !important; }
	ul.products li.product .button, ul.products li.product .button--disabled { width: calc(100% - 24px); margin: 12px 12px 0 !important; min-height: 40px; font-size: .84rem !important; }
	ul.products li.product { padding-bottom: 12px !important; }
	.badge { font-size: .6rem; padding: 4px 7px; }
	.shop-banner { grid-template-columns: 1fr; }
	.shop-banner__media { min-height: 180px; order: -1; }
	.shop-banner__media::before { display: none; }
	.subcats { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
	.subcats a { flex: none; }
	.shop-toolbar { flex-direction: column; align-items: stretch; }
	.woocommerce-ordering select { width: 100%; min-width: 0; }
	.tfc-steps, .contact-cards { grid-template-columns: 1fr; }
	.assurance-grid { grid-template-columns: 1fr; gap: 16px; }
	.footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
	.footer-grid > :first-child { grid-column: 1 / -1; grid-row: auto; }
	.footer-bottom { flex-direction: column; }
	.page-banner { min-height: 240px; }
	.ship-band__facts dd { max-width: 50%; }
}

/* ==========================================================================
   Motion: hero entrance and reveal-on-scroll. (The hero video's loop and
   pause/play button are handled in theme.js.) Only for visitors who haven't
   asked for reduced motion. The reveal uses CSS scroll timelines; browsers
   without them show everything in place.
   Animations use translate/scale (not transform) so hover transforms still work.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
	/* Hero entrance: the kicker and headline rise in word by word, the accent's underline draws in,
	   then the lead, buttons and facts strip follow. inc/home.php sets --word-count on .hero-stage. */
	.hero-word { animation: word-in .6s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 60ms); }
	.hero-copy h1 em { animation: underline-in .5s var(--ease) backwards; animation-delay: calc((var(--word-count, 6) + 1) * 60ms + .3s); }
	.hero-copy .lead, .hero-actions, .hero-facts > * { animation: rise-in .7s var(--ease) backwards; }
	.hero-copy .lead { animation-delay: calc((var(--word-count, 6) + 1) * 60ms + .5s); }
	.hero-actions { animation-delay: calc((var(--word-count, 6) + 1) * 60ms + .65s); }
	.hero-facts li:nth-child(1) { animation-delay: calc((var(--word-count, 6) + 1) * 60ms + .8s); }
	.hero-facts li:nth-child(2) { animation-delay: calc((var(--word-count, 6) + 1) * 60ms + .9s); }
	.hero-facts li:nth-child(3) { animation-delay: calc((var(--word-count, 6) + 1) * 60ms + 1s); }

	@supports (animation-timeline: view()) {
		/* Sections rise in as they scroll into view; --i staggers items that enter side by side. */
		.section-head, .cat-tile, .dry-strip, ul.products li.product, .story-media, .steps li,
		.ship-band__copy, .ship-band__facts div, .assurance-grid > div {
			animation: rise-in var(--ease) both; animation-timeline: view();
			animation-range: entry calc(var(--i, 0) * 8%) entry calc(75% + var(--i, 0) * 8%);
		}
		ul.products li.product:nth-child(4n+2), .bento__b, .bento__d, .assurance-grid > div:nth-child(2) { --i: 1; }
		ul.products li.product:nth-child(4n+3), .bento__c, .bento__e, .assurance-grid > div:nth-child(3) { --i: 2; }
		ul.products li.product:nth-child(4n), .assurance-grid > div:nth-child(4) { --i: 3; }
	}
}
@keyframes rise-in { from { opacity: 0; translate: 0 28px; } }
@keyframes word-in { from { opacity: 0; translate: 0 14px; filter: blur(6px); } }
@keyframes underline-in { from { background-size: 0% 2px; } }

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