/*
Theme Name: Zarrin
Theme URI: https://example.com/zarrin
Author: Umer
Author URI: https://example.com
Description: A luxury apparel storefront for WooCommerce. Rotating announcement bar, centred wordmark with a full-width mega menu, slide-out cart drawer, autoplaying hero slideshow, product cards with hover image-swap and quick view, collection carousels, and full-bleed video banners. Built for South Asian menswear and formalwear brands.
Version: 1.5.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: zarrin
Tags: e-commerce, custom-logo, custom-menu, featured-images, full-width-template, translation-ready, block-styles, wide-blocks
WC requires at least: 7.0
WC tested up to: 9.1
*/

/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root {
	--noir: #131211;
	--ink: #1f1d1a;
	--body: #4b4740;
	--muted: #7d766c;
	--bone: #f7f5f1;
	--paper: #ffffff;
	--line: #e4dfd7;
	--line-soft: #efebe4;
	--gold: #a98b4f;
	--gold-lt: #c7ac76;
	--sale: #96302c;

	--font-display: "Marcellus", "Times New Roman", Georgia, serif;
	--font-ui: "Jost", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

	--t--2: 0.68rem;
	--t--1: 0.78rem;
	--t-0: clamp(0.9rem, 0.88rem + 0.1vw, 0.95rem);
	--t-1: clamp(1.05rem, 1rem + 0.25vw, 1.2rem);
	--t-2: clamp(1.35rem, 1.2rem + 0.7vw, 1.8rem);
	--t-3: clamp(1.7rem, 1.4rem + 1.4vw, 2.6rem);
	--t-4: clamp(2.2rem, 1.5rem + 3.2vw, 4.4rem);

	--gutter: clamp(1rem, 3.5vw, 3.25rem);
	--wrap: 1440px;
	--read: 720px;
	--head-h: 74px;
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   2. Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--paper);
	color: var(--body);
	font-family: var(--font-ui);
	font-size: var(--t-0);
	font-weight: 400;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

img, svg, video, iframe { max-width: 100%; display: block; }
img { height: auto; }

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--gold); }

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 400;
	color: var(--ink);
	line-height: 1.15;
	margin: 0 0 0.5em;
	letter-spacing: 0.005em;
}
h1 { font-size: var(--t-4); }
h2 { font-size: var(--t-3); }
h3 { font-size: var(--t-2); }
h4 { font-size: var(--t-1); }

p, ul, ol, table, pre, blockquote, figure { margin: 0 0 1.4em; }

/* the interface voice: tracked-out small caps */
.ui-label,
.eyebrow,
.btn,
button, input[type="submit"], .wp-block-button__link,
.main-nav a, .util-nav a,
.widget-title, th {
	font-family: var(--font-ui);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-weight: 500;
}

blockquote {
	border-left: 1px solid var(--gold);
	margin-left: 0; padding: 0.2em 0 0.2em 1.6em;
	font-family: var(--font-display); font-size: var(--t-1); color: var(--ink);
}

hr { border: 0; border-top: 1px solid var(--line); margin: 3rem 0; }

table { width: 100%; border-collapse: collapse; font-size: var(--t--1); }
th, td { text-align: left; padding: 0.75em 0.9em; border-bottom: 1px solid var(--line); }
th { font-size: var(--t--2); color: var(--ink); }

:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }
::selection { background: var(--ink); color: var(--bone); }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-read { max-width: var(--read); margin-inline: auto; }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--ink); color: #fff; padding: 0.9em 1.3em; }
.skip-link:focus { left: 0; color: #fff; }

.screen-reader-text {
	border: 0; clip-path: inset(50%); height: 1px; width: 1px;
	overflow: hidden; position: absolute !important; white-space: nowrap; padding: 0; margin: -1px;
}

/* ==========================================================================
   3. Buttons & fields
   ========================================================================== */
.btn,
button, input[type="submit"], input[type="button"], .wp-block-button__link {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
	font-size: var(--t--1);
	padding: 1em 2.4em;
	border: 1px solid var(--ink);
	background: var(--ink);
	color: #fff;
	border-radius: 0;
	cursor: pointer;
	line-height: 1;
	transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.btn:hover, button:hover, input[type="submit"]:hover, .wp-block-button__link:hover {
	background: var(--gold); border-color: var(--gold); color: #fff;
}
.btn-line { background: transparent; color: var(--ink); }
.btn-line:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-light { background: #fff; border-color: #fff; color: var(--ink); }
.btn-light:hover { background: var(--gold); border-color: var(--gold); color: #fff; }
.btn-sm { padding: 0.75em 1.5em; font-size: var(--t--2); }

/* text link with a rule that retracts then redraws */
.link-underline {
	position: relative; font-size: var(--t--1); text-transform: uppercase; letter-spacing: 0.16em; font-weight: 500;
	padding-bottom: 3px;
}
.link-underline::after {
	content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
	background: currentColor; transform-origin: right; transition: transform 0.45s var(--ease-out);
}
.link-underline:hover::after { transform: scaleX(0); transform-origin: left; }

input[type="text"], input[type="email"], input[type="url"], input[type="password"],
input[type="search"], input[type="tel"], input[type="number"], textarea, select {
	width: 100%; font-family: var(--font-ui); font-size: var(--t-0);
	padding: 0.85em 1em; border: 1px solid var(--line); background: var(--paper);
	color: var(--ink); border-radius: 0;
}
input:focus, textarea:focus, select:focus { border-color: var(--ink); outline: none; }
label { display: block; font-size: var(--t--2); text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink); margin-bottom: 0.5em; }

.icon-btn {
	background: none; border: 0; padding: 0.45rem; color: inherit;
	display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
	transition: color 0.25s var(--ease), opacity 0.25s var(--ease);
}
.icon-btn:hover { background: none; color: var(--gold); }
.icon-btn { flex: 0 0 auto; min-width: 38px; min-height: 38px; }
.icon-btn svg { flex: none; width: 21px; height: 21px; max-width: none; }

/* ==========================================================================
   4. Announcement bar
   ========================================================================== */
.announce {
	background: var(--noir); color: #ddd6c9;
	font-size: var(--t--2); letter-spacing: 0.18em; text-transform: uppercase;
	position: relative; z-index: 100;
}
.announce-inner { display: flex; align-items: center; justify-content: center; gap: 1rem; min-height: 40px; padding-inline: 3rem; }
.announce-track { position: relative; flex: 1; text-align: center; min-height: 1.4em; }
.announce-msg {
	position: absolute; inset: 0; display: grid; place-items: center;
	opacity: 0; transform: translateY(6px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
	pointer-events: none;
}
.announce-msg.is-on { opacity: 1; transform: none; pointer-events: auto; }
.announce a { color: var(--gold-lt); text-decoration: underline; text-underline-offset: 3px; }
.announce .icon-btn { position: absolute; right: var(--gutter); color: #8d857a; }
.announce .icon-btn svg { width: 13px; height: 13px; }

/* ==========================================================================
   5. Header
   ========================================================================== */
.site-header {
	position: sticky; top: 0; z-index: 90;
	background: var(--paper);
	border-bottom: 1px solid var(--line-soft);
	transition: box-shadow 0.35s var(--ease);
}
.site-header.is-stuck { box-shadow: 0 10px 34px -28px rgba(19, 18, 17, 0.55); }

.header-inner {
	display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
	gap: 1rem; min-height: var(--head-h);
	transition: min-height 0.35s var(--ease);
}
.site-header.is-stuck .header-inner { min-height: 62px; }

.header-left, .header-right { display: flex; align-items: center; gap: 0.35rem; }
.header-right { justify-content: flex-end; }

.brand { text-align: center; }
.brand .wordmark {
	font-family: var(--font-display);
	font-size: clamp(1.15rem, 0.9rem + 1vw, 1.85rem);
	letter-spacing: 0.3em; text-transform: uppercase;
	margin: 0; line-height: 1; white-space: nowrap;
	transition: font-size 0.35s var(--ease);
}
.brand .wordmark a { color: var(--ink); }
.brand .custom-logo { max-height: 46px; width: auto; margin-inline: auto; transition: max-height 0.35s var(--ease); }
.site-header.is-stuck .brand .custom-logo { max-height: 36px; }
.brand .tagline { font-size: var(--t--2); letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin: 0.45rem 0 0; }
.site-header.is-stuck .brand .tagline { display: none; }

.cart-toggle { position: relative; }
.cart-count {
	position: absolute; top: 1px; right: 0;
	background: var(--ink); color: #fff; font-size: 0.6rem; font-weight: 500;
	min-width: 16px; height: 16px; border-radius: 999px; display: grid; place-items: center; padding: 0 4px; line-height: 1;
}
.cart-count:empty, .cart-count[data-count="0"] { display: none; }

/* ==========================================================================
   6. Main nav + mega menu
   ========================================================================== */
.main-nav { border-top: 1px solid var(--line-soft); }
.main-nav > .wrap { display: flex; justify-content: center; }
.main-nav .menu { list-style: none; display: flex; margin: 0; padding: 0; gap: clamp(1rem, 2.2vw, 2.4rem); }
.main-nav > .wrap > .menu > li { position: static; }
.main-nav a { font-size: var(--t--2); color: var(--ink); display: block; padding: 0.95rem 0; position: relative; }
.main-nav > .wrap > .menu > li > a::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink);
	transform: scaleX(0); transform-origin: right; transition: transform 0.4s var(--ease-out);
}
.main-nav > .wrap > .menu > li:hover > a::after,
.main-nav .current-menu-item > a::after,
.main-nav .current-menu-ancestor > a::after { transform: scaleX(1); transform-origin: left; }
.main-nav .menu-item-sale > a { color: var(--sale); }

/* full-bleed mega panel */
.main-nav > .wrap > .menu > li > .sub-menu {
	position: absolute; left: 0; right: 0; top: 100%;
	background: var(--paper); border-top: 1px solid var(--line-soft);
	box-shadow: 0 28px 46px -34px rgba(19, 18, 17, 0.5);
	display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 0.5rem clamp(1.5rem, 3vw, 3.5rem);
	list-style: none; margin: 0;
	padding: 2.4rem max(var(--gutter), (100% - var(--wrap)) / 2 + var(--gutter)) 2.8rem;
	opacity: 0; visibility: hidden; transform: translateY(-8px);
	transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
}
.main-nav > .wrap > .menu > li:hover > .sub-menu,
.main-nav > .wrap > .menu > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.main-nav .sub-menu a { padding: 0.42rem 0; letter-spacing: 0.1em; color: var(--body); font-size: var(--t--2); }
.main-nav .sub-menu a:hover { color: var(--gold); }
.main-nav .sub-menu > li > a { color: var(--ink); font-weight: 500; letter-spacing: 0.16em; padding-bottom: 0.6rem; }
/* third level sits inside its column */
.main-nav .sub-menu .sub-menu {
	list-style: none; margin: 0; padding: 0 0 0 0.9rem;
	border-left: 1px solid var(--line-soft);
	display: block; position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border-top: 0;
}
.main-nav .sub-menu .sub-menu a { text-transform: none; letter-spacing: 0.04em; color: var(--muted); font-size: var(--t--1); }

/* ==========================================================================
   7. Drawers (menu, cart) + overlay
   ========================================================================== */
.scrim {
	position: fixed; inset: 0; background: rgba(19, 18, 17, 0.5); backdrop-filter: blur(2px);
	opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease), visibility 0.4s; z-index: 110;
}
.scrim.is-on { opacity: 1; visibility: visible; }

.drawer {
	position: fixed; top: 0; bottom: 0; width: min(430px, 90vw);
	background: var(--paper); z-index: 120;
	display: flex; flex-direction: column;
	transition: transform 0.5s var(--ease-out);
}
.drawer-menu { left: 0; transform: translateX(-100%); }
.drawer-menu.is-on { transform: none; }
.drawer-cart { right: 0; transform: translateX(100%); }
.drawer-cart.is-on { transform: none; }

.drawer-head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 1.4rem var(--gutter); border-bottom: 1px solid var(--line-soft); flex: none;
}
.drawer-head h2 { margin: 0; font-family: var(--font-ui); font-size: var(--t--1); text-transform: uppercase; letter-spacing: 0.2em; }
.drawer-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 1rem var(--gutter) 2rem; }
/* Woo replaces this wrapper wholesale on every AJAX update, so it has to carry
   the flex column itself or the body below it never gets a scroll height. */
.cart-drawer-inner { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.drawer-foot { flex: none; border-top: 1px solid var(--line-soft); padding: 1.4rem var(--gutter); }

/* accordion nav inside the menu drawer */
.drawer-nav ul { list-style: none; margin: 0; padding: 0; }
.drawer-nav > .menu > li { border-bottom: 1px solid var(--line-soft); }
.drawer-nav a { display: block; padding: 1.05rem 0; font-size: var(--t--1); text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink); }
.drawer-nav .menu-item-has-children { position: relative; }
.drawer-nav .sub-toggle {
	position: absolute; top: 0.4rem; right: 0; background: none; border: 0; padding: 0.6rem; color: var(--ink); cursor: pointer;
}
.drawer-nav .sub-toggle svg { width: 13px; height: 13px; transition: transform 0.35s var(--ease); }
.drawer-nav .sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.drawer-nav .sub-menu { display: none; padding: 0 0 0.8rem 1rem; border-left: 1px solid var(--line-soft); margin-bottom: 0.6rem; }
.drawer-nav .sub-menu.is-open { display: block; }
.drawer-nav .sub-menu a { padding: 0.6rem 0; text-transform: none; letter-spacing: 0.03em; color: var(--body); }

/* Secondary list in the drawer: quieter than the main navigation. */
.drawer-secondary { margin-top: 1.6rem; padding-top: 1.3rem; border-top: 1px solid var(--line); }
.drawer-secondary > .menu > li { border-bottom: 0; }
.drawer-secondary a { padding: 0.5rem 0; font-size: var(--t--2); letter-spacing: 0.12em; color: var(--muted); }
.drawer-secondary a:hover { color: var(--ink); }

.drawer-utility { margin-top: 1.8rem; padding-top: 1.3rem; border-top: 1px solid var(--line); display: grid; gap: 0.9rem; }
.drawer-utility a { display: flex; align-items: center; gap: 0.7rem; font-size: var(--t--2); text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink); }
.drawer-utility a:hover { color: var(--gold); }

/* cart drawer contents */
.mini-line { display: grid; grid-template-columns: 76px 1fr auto; gap: 1rem; padding: 1.2rem 0; border-bottom: 1px solid var(--line-soft); }
.mini-line img { width: 76px; aspect-ratio: 3 / 4; object-fit: cover; }
.mini-line .name { font-family: var(--font-display); font-size: var(--t-1); line-height: 1.25; margin: 0 0 0.3rem; }
.mini-line .variation { font-size: var(--t--2); color: var(--muted); margin: 0 0 0.4rem; }
.mini-line .qty { font-size: var(--t--1); color: var(--muted); }
.mini-line .amount { font-weight: 500; color: var(--ink); }
.mini-line .remove { font-size: var(--t--2); color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.cart-subtotal { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.4rem; }
.cart-subtotal .ui-label { font-size: var(--t--2); color: var(--muted); }
.cart-subtotal .total { font-family: var(--font-display); font-size: var(--t-2); color: var(--ink); }
.cart-note { font-size: var(--t--2); color: var(--muted); margin: 0 0 1rem; }
.drawer-foot .btn { width: 100%; }
.drawer-foot .btn + .btn { margin-top: 0.6rem; }
.cart-empty { text-align: center; padding: 4rem 0; color: var(--muted); }

/* ==========================================================================
   8. Search overlay
   ========================================================================== */
.search-overlay {
	position: fixed; inset: 0; background: var(--paper); z-index: 130;
	display: grid; place-items: start center; padding-top: 18vh;
	opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease), visibility 0.4s;
}
.search-overlay.is-on { opacity: 1; visibility: visible; }
.search-overlay .inner { width: min(760px, 90vw); }
.search-overlay .search-form { display: flex; gap: 0; border-bottom: 1px solid var(--ink); }
.search-overlay input[type="search"] {
	border: 0; font-family: var(--font-display); font-size: var(--t-3); padding: 0.3em 0;
}
.search-overlay input[type="search"]:focus { border: 0; }
.search-overlay .search-submit { background: none; border: 0; color: var(--ink); padding: 0 0 0 1rem; }
.search-overlay .search-submit:hover { background: none; color: var(--gold); }
.search-overlay .hint { font-size: var(--t--2); text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted); margin-top: 1.2rem; }
.search-overlay .close { position: absolute; top: 1.4rem; right: var(--gutter); }

/* ==========================================================================
   9. Hero slideshow
   ========================================================================== */
.hero { position: relative; background: var(--noir); overflow: hidden; }
.hero-slide {
	position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s var(--ease);
	pointer-events: none;
}
.hero-slide.is-on { opacity: 1; pointer-events: auto; }
.hero-slide:first-child { position: relative; }
.hero-media { position: absolute; inset: 0; }
.hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; }
.hero-slide.is-on .hero-media img { animation: kenburns 9s var(--ease) forwards; }
@keyframes kenburns { from { transform: scale(1.001); } to { transform: scale(1.075); } }
.hero-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(19,18,17,0.34) 0%, rgba(19,18,17,0.05) 42%, rgba(19,18,17,0.62) 100%); }
.hero-frame { position: relative; min-height: clamp(430px, 76vh, 800px); display: grid; align-items: end; }
.hero-copy { position: relative; padding-block: clamp(2.5rem, 6vw, 5rem); color: #fff; max-width: 640px; }
.hero-copy .eyebrow { color: var(--gold-lt); }
.hero-copy h2 { color: #fff; font-size: var(--t-4); margin-bottom: 0.35em; }
.hero-copy p { color: rgba(255,255,255,0.82); font-size: var(--t-1); margin-bottom: 1.8rem; max-width: 44ch; }
.hero-slide.is-on .hero-copy > * { animation: riseIn 0.9s var(--ease-out) backwards; }
.hero-slide.is-on .hero-copy > *:nth-child(1) { animation-delay: 0.18s; }
.hero-slide.is-on .hero-copy > *:nth-child(2) { animation-delay: 0.3s; }
.hero-slide.is-on .hero-copy > *:nth-child(3) { animation-delay: 0.42s; }
.hero-slide.is-on .hero-copy > *:nth-child(4) { animation-delay: 0.54s; }
@keyframes riseIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

.hero-ui { position: absolute; left: 0; right: 0; bottom: clamp(1rem, 3vw, 2rem); z-index: 5; pointer-events: none; }
.hero-ui .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.hero-dots { display: flex; gap: 0.55rem; pointer-events: auto; }
.hero-dots button {
	width: 34px; height: 2px; padding: 0; border: 0; background: rgba(255,255,255,0.34); position: relative; overflow: hidden;
}
.hero-dots button:hover { background: rgba(255,255,255,0.6); }
.hero-dots button[aria-current="true"] { background: rgba(255,255,255,0.34); }
.hero-dots button[aria-current="true"]::after {
	content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left;
	animation: dotFill var(--slide-ms, 6000ms) linear forwards;
}
.hero.is-paused .hero-dots button[aria-current="true"]::after { animation-play-state: paused; }
@keyframes dotFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero-arrows { display: flex; gap: 0.4rem; pointer-events: auto; }
.hero-ui .icon-btn { color: #fff; }
.hero-ui .icon-btn:hover { color: var(--gold-lt); }

/* ==========================================================================
   10. Sections
   ========================================================================== */
.section { padding-block: clamp(3rem, 6vw, 5.5rem); }
.section-tight { padding-block: clamp(2rem, 4vw, 3.5rem); }

.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.section-head h2 { margin: 0; font-size: var(--t-3); }
.section-head .eyebrow { display: block; font-size: var(--t--2); color: var(--muted); margin: 0 0 0.6rem; letter-spacing: 0.24em; }

.eyebrow { display: inline-block; font-size: var(--t--2); letter-spacing: 0.24em; color: var(--muted); margin: 0 0 0.9rem; }

/* promo strip */
.promo { background: var(--noir); color: #ded7ca; text-align: center; }
.promo .inner { padding-block: clamp(2.2rem, 4.5vw, 3.4rem); }
.promo h2 { color: #fff; font-size: var(--t-2); margin-bottom: 0.4rem; }
.promo p { margin: 0 0 1.6rem; font-size: var(--t--1); letter-spacing: 0.14em; text-transform: uppercase; color: #a49b8d; }
.promo .marks { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 2rem; margin-bottom: 1.6rem; font-size: var(--t--2); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-lt); }

/* ==========================================================================
   11. Product cards
   ========================================================================== */
.product-grid { display: grid; gap: clamp(1.2rem, 2.2vw, 2rem) clamp(0.8rem, 1.6vw, 1.6rem); grid-template-columns: repeat(2, 1fr); list-style: none; margin: 0; padding: 0; }
@media (min-width: 720px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { .product-grid { grid-template-columns: repeat(4, 1fr); } }

.card { position: relative; display: flex; flex-direction: column; }
.card-media { position: relative; }
/* The frame clips the image; the action rail lives outside it so that on touch
   devices it can fall below the picture instead of being cropped away. */
.card-frame { position: relative; overflow: hidden; background: var(--bone); aspect-ratio: 3 / 4; }
.card-frame > a { position: absolute; inset: 0; z-index: 1; display: block; }
.card-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card-frame .front { transition: opacity 0.7s var(--ease), transform 1.1s var(--ease); }
.card-frame .back { opacity: 0; transition: opacity 0.7s var(--ease), transform 1.1s var(--ease); }
.card:hover .card-frame .front { opacity: 0; transform: scale(1.04); }
.card:hover .card-frame .back { opacity: 1; transform: scale(1.04); }
.card-frame.single:hover .front { opacity: 1; transform: scale(1.05); }

.badges { position: absolute; left: 0; top: 0; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.badge {
	font-size: var(--t--2); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500;
	padding: 0.42em 0.85em; background: var(--ink); color: #fff; line-height: 1;
}
.badge-sale { background: var(--sale); }
.badge-out { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.badge-new { background: var(--gold); }

/* hover action rail */
.card-actions {
	position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 3;
	display: grid; gap: 6px;
	opacity: 0; transform: translateY(12px);
	transition: opacity 0.4s var(--ease), transform 0.4s var(--ease-out);
}
.card:hover .card-actions, .card:focus-within .card-actions { opacity: 1; transform: none; }
.card-actions .btn { width: 100%; padding: 0.9em 1em; font-size: var(--t--2); letter-spacing: 0.18em; }
.card-actions .quick-view { background: rgba(255,255,255,0.94); border-color: rgba(255,255,255,0.94); color: var(--ink); }
.card-actions .quick-view:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
@media (hover: none) {
	.card-actions { opacity: 1; transform: none; position: static; margin-top: 0.7rem; }
	.card-actions .btn { padding: 0.95em 1em; }
	.card-actions .quick-view { display: none; }
}

.card-body { padding-top: 0.9rem; }
.card-cat { font-size: var(--t--2); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.35rem; }
.card-title { font-family: var(--font-display); font-size: var(--t-1); line-height: 1.3; margin: 0 0 0.45rem; }
.card-title a { color: var(--ink); }
.card-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.55rem; font-size: var(--t-0); color: var(--ink); }
.card-price del { color: var(--muted); font-size: var(--t--1); text-decoration-thickness: 1px; }
.card-price ins { text-decoration: none; color: var(--sale); font-weight: 500; }
.card-save { font-size: var(--t--2); letter-spacing: 0.14em; text-transform: uppercase; color: var(--sale); }
.card-swatches { display: flex; gap: 5px; margin-top: 0.6rem; }
.card-swatches span { width: 13px; height: 13px; border-radius: 999px; border: 1px solid var(--line); }

/* ==========================================================================
   12. Carousel rail
   ========================================================================== */
.rail-wrap { position: relative; }
.rail {
	display: grid; grid-auto-flow: column;
	grid-auto-columns: calc((100% - 1.6rem) / 2);
	gap: clamp(0.8rem, 1.6vw, 1.6rem);
	overflow-x: auto; scroll-snap-type: x mandatory;
	scrollbar-width: none; -ms-overflow-style: none;
	padding-bottom: 4px;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
@media (min-width: 720px) { .rail { grid-auto-columns: calc((100% - 3.2rem) / 3); } }
@media (min-width: 1040px) { .rail { grid-auto-columns: calc((100% - 4.8rem) / 4); } }

.rail-ui { display: flex; align-items: center; gap: 0.9rem; }
.rail-count { font-size: var(--t--2); letter-spacing: 0.2em; color: var(--muted); font-variant-numeric: tabular-nums; }
.rail-btn { width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); background: transparent; color: var(--ink); }
.rail-btn:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.rail-btn[disabled] { opacity: 0.3; pointer-events: none; }
.rail-btn svg { width: 15px; height: 15px; }

/* ==========================================================================
   13. Media banners
   ========================================================================== */
.banner { position: relative; overflow: hidden; background: var(--noir); }
.banner-media { position: absolute; inset: 0; }
.banner-media img, .banner-media video { width: 100%; height: 100%; object-fit: cover; }
.banner-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(19,18,17,0.15), rgba(19,18,17,0.6)); }
.banner-frame { position: relative; min-height: clamp(360px, 60vh, 640px); display: grid; place-items: center; text-align: center; padding-block: 4rem; }
.banner-copy { color: #fff; max-width: 560px; }
.banner-copy h2 { color: #fff; font-size: var(--t-3); }
.banner-copy p { color: rgba(255,255,255,0.82); margin-bottom: 1.6rem; }
.banner-copy .eyebrow { color: var(--gold-lt); }

.split { display: grid; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } }
.split .banner-frame { min-height: clamp(340px, 52vh, 560px); }

/* category tiles */
.tiles { display: grid; gap: clamp(0.6rem, 1.4vw, 1.2rem); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .tiles { grid-template-columns: repeat(4, 1fr); } }
.tile { position: relative; overflow: hidden; aspect-ratio: 3 / 4; display: block; background: var(--bone); }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.tile:hover img { transform: scale(1.06); }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(19,18,17,0.66)); }
.tile-label {
	position: absolute; left: 0; right: 0; bottom: 1.3rem; z-index: 2; text-align: center;
	color: #fff; font-size: var(--t--1); letter-spacing: 0.22em; text-transform: uppercase;
}
.tile-label small { display: block; font-size: var(--t--2); letter-spacing: 0.16em; color: rgba(255,255,255,0.7); margin-top: 0.3rem; text-transform: none; }

/* ==========================================================================
   14. Journal strip
   ========================================================================== */
.journal-grid { display: grid; gap: clamp(1.2rem, 2.5vw, 2.2rem); grid-template-columns: 1fr; }
@media (min-width: 760px) { .journal-grid { grid-template-columns: repeat(3, 1fr); } }
.journal-card .thumb { overflow: hidden; aspect-ratio: 4 / 3; background: var(--bone); margin-bottom: 1rem; }
.journal-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.journal-card:hover .thumb img { transform: scale(1.05); }
.journal-card time { font-size: var(--t--2); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.journal-card h3 { font-size: var(--t-1); margin: 0.5rem 0 0.5rem; }
.journal-card p { color: var(--muted); font-size: var(--t--1); margin: 0; }

/* ==========================================================================
   15. Quick view modal
   ========================================================================== */
.qv {
	position: fixed; inset: 0; z-index: 140; display: grid; place-items: center; padding: var(--gutter);
	opacity: 0; visibility: hidden; transition: opacity 0.35s var(--ease), visibility 0.35s;
}
.qv.is-on { opacity: 1; visibility: visible; }
.qv-box {
	position: relative; background: var(--paper); width: min(980px, 100%); max-height: 88vh; overflow-y: auto;
	transform: translateY(18px) scale(0.99); transition: transform 0.45s var(--ease-out);
}
.qv.is-on .qv-box { transform: none; }
.qv-close { position: absolute; top: 0.8rem; right: 0.8rem; z-index: 3; background: var(--paper); }
.qv-grid { display: grid; }
@media (min-width: 760px) { .qv-grid { grid-template-columns: 1fr 1fr; } }
.qv-gallery { background: var(--bone); }
.qv-gallery img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.qv-info { padding: clamp(1.5rem, 3vw, 2.6rem); }
.qv-info .price { font-family: var(--font-display); font-size: var(--t-2); color: var(--ink); margin-bottom: 1rem; }
.qv-info .price del { color: var(--muted); font-size: var(--t-1); }
.qv-info .price ins { text-decoration: none; color: var(--sale); }
.qv-loading { padding: 5rem; text-align: center; color: var(--muted); font-size: var(--t--2); letter-spacing: 0.2em; text-transform: uppercase; }

/* ==========================================================================
   16. WooCommerce surfaces
   ========================================================================== */
/* WooCommerce ships a float-based grid: it puts width:22.05%/float:left on every
   li.product and adds clearfix pseudo-elements to ul.products. Inside a CSS grid
   the pseudo-elements become grid items (eating the first cell) and the width
   shrinks each card to a quarter of its column. All of that has to go. */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after { content: none; display: none; }

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	width: auto;
	max-width: none;
	min-width: 0;
	float: none;
	clear: none;
	margin: 0;
	padding: 0;
}
.woocommerce ul.products li.product::before,
.woocommerce ul.products li.product::after { content: none; display: none; }

.woocommerce ul.products li.product .card-frame a,
.woocommerce-page ul.products li.product .card-frame a { display: block; margin: 0; }

.woocommerce ul.products li.product .card-frame img,
.woocommerce-page ul.products li.product .card-frame img {
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	box-shadow: none;
}
.woocommerce ul.products li.product .card-title,
.woocommerce ul.products li.product .card-cat { text-align: left; }

/* Related products and upsells use the same loop. */
.woocommerce .related ul.products,
.woocommerce .upsells ul.products,
.woocommerce .cross-sells ul.products { margin-top: 1.5rem; }
.woocommerce .related > h2,
.woocommerce .upsells > h2 { font-size: var(--t-2); margin-bottom: 0.6rem; }

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering { font-size: var(--t--2); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.woocommerce-ordering select { width: auto; padding: 0.6em 2em 0.6em 0.8em; font-size: var(--t--2); }
.shop-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-bottom: 1.4rem; border-bottom: 1px solid var(--line-soft); margin-bottom: 2rem; }

/* Category row across the top of shop and category archives. */
.cat-nav { border-bottom: 1px solid var(--line-soft); }
.cat-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 clamp(0.9rem, 2.4vw, 2.4rem); }
.cat-nav li { margin: 0; }
.cat-nav a { position: relative; display: inline-block; padding: 1rem 0; font-size: var(--t--2); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; color: var(--muted); }
.cat-nav a:hover { color: var(--ink); }
.cat-nav .count { font-size: 0.62rem; letter-spacing: 0.04em; vertical-align: super; opacity: 0.55; }
.cat-nav .is-current a { color: var(--ink); }
.cat-nav .is-current a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink); }

/* Optional shop sidebar, shown only when the widget area has content. */
.shop-layout { display: grid; gap: clamp(1.5rem, 3vw, 3rem); }
@media (min-width: 1000px) { .shop-layout { grid-template-columns: 250px minmax(0, 1fr); } }
.shop-aside .widget { margin-bottom: 2.2rem; }
.shop-aside .widget:last-child { margin-bottom: 0; }
.shop-aside .widget ul { list-style: none; padding: 0; margin: 0; }
.shop-aside .widget li { padding: 0.45em 0; border-bottom: 1px solid var(--line-soft); font-size: var(--t--1); }
.shop-aside .widget li .count { color: var(--muted); float: right; }

.shop-hero { background: var(--bone); text-align: center; padding-block: clamp(2.5rem, 5vw, 4rem); margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.shop-hero h1 { margin: 0; font-size: var(--t-3); }
.shop-hero .term-desc { color: var(--muted); max-width: 58ch; margin: 0.8rem auto 0; }

.woocommerce div.product { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); }
@media (min-width: 900px) { .woocommerce div.product { grid-template-columns: 1.05fr 0.95fr; align-items: start; } }
.woocommerce div.product .product_title { font-size: var(--t-3); }
.woocommerce div.product p.price { font-family: var(--font-display); font-size: var(--t-2); color: var(--ink); }
.woocommerce div.product p.price del { color: var(--muted); font-size: var(--t-1); }
.woocommerce div.product p.price ins { text-decoration: none; color: var(--sale); }
.woocommerce div.product .woocommerce-tabs { grid-column: 1 / -1; }
.woocommerce div.product .related, .woocommerce div.product .upsells { grid-column: 1 / -1; }
.woocommerce div.product form.cart .button { width: 100%; padding-block: 1.15em; }
.woocommerce div.product form.cart div.quantity { margin-bottom: 0.8rem; }
.woocommerce .quantity input[type="number"] { width: 92px; text-align: center; }
.woocommerce span.onsale { background: var(--sale); color: #fff; border-radius: 0; padding: 0.45em 0.9em; font-size: var(--t--2); letter-spacing: 0.16em; text-transform: uppercase; min-height: 0; min-width: 0; line-height: 1; top: 0; left: 0; margin: 0; }
.woocommerce .woocommerce-tabs ul.tabs { padding: 0; border: 0; border-bottom: 1px solid var(--line); }
.woocommerce .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce .woocommerce-tabs ul.tabs li { background: none; border: 0; border-radius: 0; margin: 0 1.8rem 0 0; padding: 0; }
.woocommerce .woocommerce-tabs ul.tabs li::before, .woocommerce .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce .woocommerce-tabs ul.tabs li a { font-size: var(--t--2); letter-spacing: 0.18em; text-transform: uppercase; padding: 0.9rem 0; color: var(--muted); }
.woocommerce .woocommerce-tabs ul.tabs li.active a { color: var(--ink); box-shadow: inset 0 -1px 0 var(--ink); }
.woocommerce-message, .woocommerce-info, .woocommerce-error { border-top-color: var(--gold); background: var(--bone); font-size: var(--t--1); }
.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce a.button.alt, .woocommerce button.button.alt {
	background: var(--ink); color: #fff; border-radius: 0; font-family: var(--font-ui);
	font-size: var(--t--1); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; padding: 1em 2.2em;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover { background: var(--gold); color: #fff; }
.woocommerce nav.woocommerce-pagination ul { border: 0; gap: 0.4rem; display: flex; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span {
	min-width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); font-size: var(--t--1);
}
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ==========================================================================
   17. Editorial / blog
   ========================================================================== */
.entry-head { text-align: center; padding-block: clamp(2rem, 4vw, 3.5rem); }
.entry-head .entry-meta { font-size: var(--t--2); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.entry-thumb img { width: 100%; max-height: 640px; object-fit: cover; }
.entry-content > * { max-width: var(--read); margin-inline: auto; }
.entry-content > .alignwide { max-width: 1040px; }
.entry-content > .alignfull { max-width: none; }
.entry-content a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.entry-content h2 { margin-top: 2em; }
.aligncenter { margin-inline: auto; }
figcaption, .wp-caption-text { font-size: var(--t--2); color: var(--muted); text-align: center; margin-top: 0.7em; }

.post-grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }

.pagination { margin-top: 3rem; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pagination .page-numbers { min-width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); font-size: var(--t--1); padding: 0 0.7rem; }
.pagination .current { background: var(--ink); border-color: var(--ink); color: #fff; }

.comments-area { max-width: var(--read); margin: 3.5rem auto 0; padding-top: 2.5rem; border-top: 1px solid var(--line); }
.comment-list { list-style: none; padding: 0; }
.comment-list ol.children { list-style: none; padding-left: 1.6rem; }
.comment-body { padding: 1.3rem 0; border-bottom: 1px solid var(--line-soft); }
.comment-metadata { font-size: var(--t--2); color: var(--muted); text-transform: uppercase; letter-spacing: 0.14em; }

.widget { margin-bottom: 2.5rem; }
.widget-title { font-size: var(--t--2); color: var(--ink); margin-bottom: 1rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--line); }
.widget ul { list-style: none; padding: 0; margin: 0; }
.widget li { padding: 0.45em 0; border-bottom: 1px solid var(--line-soft); }

.page-blank { text-align: center; padding-block: clamp(4rem, 12vw, 8rem); max-width: 54ch; margin-inline: auto; }
.page-blank .code { font-family: var(--font-display); font-size: clamp(4.5rem, 18vw, 10rem); line-height: 0.9; color: var(--line); margin: 0 0 1rem; }

/* ==========================================================================
   18. Footer
   ========================================================================== */
.site-footer { background: var(--noir); color: #9c948a; margin-top: clamp(2.5rem, 6vw, 5rem); }
.site-footer a { color: #ddd6c9; }
.site-footer a:hover { color: var(--gold-lt); }

.footer-signup { border-bottom: 1px solid rgba(255,255,255,0.1); }
.footer-signup .inner { display: grid; gap: 1.5rem; padding-block: clamp(2.2rem, 4vw, 3.4rem); align-items: center; }
@media (min-width: 860px) { .footer-signup .inner { grid-template-columns: 1fr 1fr; } }
.footer-signup h2 { color: #fff; font-size: var(--t-2); margin: 0 0 0.4rem; }
.footer-signup p { margin: 0; font-size: var(--t--1); }
.footer-signup form { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.footer-signup input[type="email"] { flex: 1 1 220px; background: transparent; border-color: rgba(255,255,255,0.24); color: #fff; }
.footer-signup input[type="email"]::placeholder { color: #7d766c; }
.footer-signup input[type="email"]:focus { border-color: var(--gold); }
.footer-signup .btn { background: #fff; border-color: #fff; color: var(--ink); }
.footer-signup .btn:hover { background: var(--gold); border-color: var(--gold); color: #fff; }

.footer-cols { display: grid; gap: clamp(1.8rem, 3.5vw, 3rem); padding-block: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 680px) { .footer-cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .footer-cols { grid-template-columns: 1.5fr repeat(3, 1fr); } }
.site-footer .widget { margin: 0; }
.site-footer .widget-title { color: #fff; border-bottom-color: rgba(255,255,255,0.12); }
.site-footer .widget li { border-bottom-color: rgba(255,255,255,0.07); }
.footer-brand .wordmark { font-family: var(--font-display); font-size: var(--t-2); letter-spacing: 0.28em; text-transform: uppercase; color: #fff; margin: 0 0 0.9rem; }
.footer-brand p { font-size: var(--t--1); max-width: 40ch; }

.socials { display: flex; gap: 0.7rem; margin-top: 1.3rem; }
.socials a { width: 38px; height: 38px; border: 1px solid rgba(255,255,255,0.18); display: grid; place-items: center; transition: background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease); }
.socials a:hover { background: var(--gold); border-color: var(--gold); color: var(--noir); }
.socials svg { width: 16px; height: 16px; fill: currentColor; }

.footer-base {
	border-top: 1px solid rgba(255,255,255,0.1); padding-block: 1.4rem;
	display: flex; flex-wrap: wrap; gap: 0.8rem 1.6rem; justify-content: space-between; align-items: center;
	font-size: var(--t--2); letter-spacing: 0.1em;
}
.footer-base p { margin: 0; }
.footer-base .menu { list-style: none; display: flex; flex-wrap: wrap; gap: 1.4rem; margin: 0; padding: 0; }
.footer-base .menu a { font-size: var(--t--2); letter-spacing: 0.14em; text-transform: uppercase; }
.pay-marks { display: flex; gap: 0.5rem; align-items: center; opacity: 0.55; }
.pay-marks span { border: 1px solid rgba(255,255,255,0.2); padding: 0.25em 0.5em; font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; }

.to-top {
	position: fixed; right: clamp(0.8rem, 2vw, 1.6rem); bottom: clamp(0.8rem, 2vw, 1.6rem);
	width: 44px; height: 44px; padding: 0; border: 0; background: var(--ink); color: #fff;
	display: grid; place-items: center; cursor: pointer; z-index: 80;
	opacity: 0; visibility: hidden; transform: translateY(10px);
	transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0.35s;
}
.to-top.is-on { opacity: 1; visibility: visible; transform: none; }

/* ==========================================================================
   19. Motion utilities
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(22px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }

.marquee { overflow: hidden; border-block: 1px solid var(--line-soft); padding-block: 0.9rem; }
.marquee-track { display: flex; gap: 3.5rem; width: max-content; animation: slide 32s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee span { font-size: var(--t--2); letter-spacing: 0.26em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
	.reveal { opacity: 1; transform: none; }
	.hero-slide.is-on .hero-media img { animation: none; }
	.marquee-track { animation: none; }
}

/* ==========================================================================
   20. Responsive header
   ========================================================================== */
@media (max-width: 1023px) {
	.main-nav { display: none; }
}
@media (max-width: 700px) {
	:root { --head-h: 60px; }
	.header-inner { gap: 0.35rem; }
	.brand .wordmark { font-size: 1.02rem; letter-spacing: 0.16em; }
	.brand .tagline { display: none; }
	.icon-btn { padding: 0.35rem; min-width: 40px; min-height: 40px; }
	.icon-btn svg { width: 22px; height: 22px; }
	.announce-inner { padding-inline: 2.75rem; min-height: 36px; }
	.drawer { width: min(430px, 92vw); }
}
@media (min-width: 1024px) {
	.menu-toggle { display: none; }
	/* Customizer: keep the drawer reachable at every width. */
	.nav-drawer-always .menu-toggle { display: inline-flex; }
}