/*
 * Site header and footer (master plan §10, §11.0, §7.1; v1.11). Tokens only.
 * Markup: includes/layout/header.php and footer.php. Behaviour: assets/js/header-footer.js.
 */

/* ================================================================ Announcement bar (one message, dismissible) */
.v-announce {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--v-hit-min);
	padding: var(--v-space-2) calc(var(--v-hit-min) + var(--v-space-2));
	text-align: center;
}
.v-announce__text {
	font-size: var(--v-text-small);
	font-weight: var(--v-weight-semibold);
	letter-spacing: var(--v-track-ui);
	line-height: var(--v-lh-ui);
}
.v-announce__sep,
.v-announce__fact--second { display: none; }
@media (min-width: 1024px) {
	.v-announce__sep,
	.v-announce__fact--second { display: inline; }
	.v-announce__sep { margin: 0 var(--v-space-1); color: var(--v-text-muted); }
}
.v-announce__close {
	position: absolute;
	top: 50%;
	right: var(--v-space-1);
	display: grid;
	place-items: center;
	width: var(--v-hit-min);
	height: var(--v-hit-min);
	margin-top: calc(var(--v-hit-min) / -2);
	border: 0;
	background: transparent;
	color: var(--v-text-muted);
	cursor: pointer;
	transition: color var(--v-dur-hover) var(--v-ease-out);
}
.v-announce__close:hover { color: var(--v-text); }
.v-announce-off .v-announce { display: none; }

/* ================================================================ Header
   Sticky under the WordPress admin bar. Hides on scroll down and returns on scroll up through a
   CSS scroll-state container query on the page scroller (no scroll listener, §7.1); where that
   is unsupported the header simply stays pinned. It never hides while it holds focus or while
   the Jackets panel is open. */
html { container-type: scroll-state; }
.v-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: var(--v-z-header);
	transition: translate var(--v-dur-hover) var(--v-ease-out);
}
@media (max-width: 600px) {
	/* WordPress un-sticks its admin bar on phones. */
	.admin-bar .v-header { top: 0px; }
}
@container scroll-state(scrolled: bottom) {
	.v-past-header .v-header:not(:focus-within, :has(.is-open)) { translate: 0 -100%; }
}
.v-header__bar {
	position: relative;   /* the Jackets panel hangs from the bar */
	background: var(--v-surface);
	border-bottom: var(--v-hairline) solid var(--v-border);
}
.v-header__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: var(--v-space-4);
	height: var(--v-header-h);
}

/* Logo */
.v-logo {
	display: inline-flex;
	align-items: center;
	min-height: var(--v-hit-min);
	color: var(--v-text);
	text-decoration: none;
}
/* Two classes: WooCommerce's `.woocommerce-page img { height: auto }` must never resize the logo. */
.v-logo .v-logo__img {
	width: auto;
	height: var(--v-logo-h);
	max-width: none;
}
.v-logo__text {
	font-family: var(--v-font-display);
	font-size: var(--v-text-h3);
	font-weight: var(--v-weight-medium);
}

/* Icon buttons (menu, search, account, bag): 44 px targets */
.v-header__icon {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: var(--v-hit-min);
	height: var(--v-hit-min);
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--v-text);
	cursor: pointer;
	transition: color var(--v-dur-hover) var(--v-ease-out);
}
.v-header__icon .v-icon { width: var(--v-space-5); height: var(--v-space-5); }
@media (hover: hover) and (pointer: fine) {
	.v-header__icon:hover { color: var(--v-text-muted); }
}
.v-header__menu-btn { justify-self: start; margin-left: calc(var(--v-space-3) * -1); }
.v-header__tools {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin-right: calc(var(--v-space-3) * -1);
}
.v-header__account { display: none; }   /* in the menu drawer on small screens */
.v-bag__count {
	position: absolute;
	top: var(--v-space-1);
	right: 0;
	display: grid;
	place-items: center;
	min-width: var(--v-bag-count);
	height: var(--v-bag-count);
	padding-inline: var(--v-space-1);
	background: var(--v-text);
	color: var(--v-surface);
	font-size: var(--v-text-label);
	font-weight: var(--v-weight-semibold);
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

/* Main navigation (desktop) */
.v-nav { display: none; }
.v-nav__list {
	display: flex;
	align-items: center;
	gap: var(--v-space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}
.v-nav__link {
	display: inline-flex;
	white-space: nowrap;
	align-items: center;
	gap: var(--v-space-1);
	min-height: var(--v-hit-min);
	padding: 0;
	border: 0;
	background-color: transparent;
	/* The Stitch underline: drawn on hover, kept on the current section (§6) */
	background-image: repeating-linear-gradient(90deg, currentColor 0 var(--v-stitch-dash), transparent var(--v-stitch-dash) calc(var(--v-stitch-dash) + var(--v-stitch-gap)));
	background-repeat: no-repeat;
	background-position: 0 calc(100% - var(--v-space-2));
	background-size: 0% var(--v-stitch-width);
	color: var(--v-text);
	font-family: var(--v-font-body);
	font-size: var(--v-text-ui);
	font-weight: var(--v-weight-semibold);
	letter-spacing: var(--v-track-ui);
	line-height: var(--v-lh-ui);
	text-decoration: none;
	cursor: pointer;
	transition: background-size var(--v-dur-ui) var(--v-ease-out), color var(--v-dur-hover) var(--v-ease-out);
}
@media (hover: hover) and (pointer: fine) {
	.v-nav__link:hover { background-size: 100% var(--v-stitch-width); }
}
.v-nav__link[aria-current="page"],
.v-nav__link.is-current,
.v-nav__link[aria-expanded="true"] {
	color: var(--v-action);
	background-size: 100% var(--v-stitch-width);
}
.v-nav__caret {
	width: var(--v-caret-size);
	height: var(--v-caret-size);
	transition: rotate var(--v-dur-ui) var(--v-ease-out);
}
[aria-expanded="true"] > .v-nav__caret { rotate: 180deg; }

/* Jackets panel: hangs under the bar, full width; fade + 8 px drop (§7.1 v1.11) */
.v-panel {
	position: absolute;
	inset: 100% 0 auto 0;
	background: var(--v-surface);
	border-bottom: var(--v-hairline) solid var(--v-border);
	opacity: 0;
	visibility: hidden;
	translate: 0 calc(var(--v-space-2) * -1);
	transition:
		opacity var(--v-dur-panel-out) var(--v-ease-out),
		translate var(--v-dur-panel-out) var(--v-ease-out),
		visibility 0s linear var(--v-dur-panel-out);
}
.v-panel.is-open {
	opacity: 1;
	visibility: visible;
	translate: 0 0;
	transition:
		opacity var(--v-dur-hover) var(--v-ease-out),
		translate var(--v-dur-hover) var(--v-ease-out),
		visibility 0s;
}
/* The page below dims with the drawer scrim, so the panel's edge is always clear. */
.v-panel::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 100vh;
	background: var(--v-scrim);
	pointer-events: none;
}
.v-panel__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr);   /* golden split: links / image */
	gap: var(--v-space-9);
	padding-block: var(--v-space-8);
}
.v-panel__links { display: grid; gap: var(--v-space-5); align-content: start; }
.v-panel__title {
	font-size: var(--v-text-small);
	font-weight: var(--v-weight-semibold);
	color: var(--v-text-muted);
}
.v-panel__styles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--v-space-1) var(--v-space-8);
	margin: 0;
	padding: 0;
	list-style: none;
}
.v-panel__style,
.v-menu__list--styles a:not(.v-menu__all) {
	display: inline-flex;
	align-items: center;
	min-height: var(--v-control-h);
	color: var(--v-text);
	font-family: var(--v-font-display);
	font-size: var(--v-text-h3);
	font-weight: var(--v-weight-medium);
	line-height: var(--v-lh-h3);
	text-decoration: none;
	background-image: repeating-linear-gradient(90deg, currentColor 0 var(--v-stitch-dash), transparent var(--v-stitch-dash) calc(var(--v-stitch-dash) + var(--v-stitch-gap)));
	background-repeat: no-repeat;
	background-position: 0 calc(100% - var(--v-space-2));
	background-size: 0% var(--v-stitch-width);
	transition: background-size var(--v-dur-ui) var(--v-ease-out);
}
@media (hover: hover) and (pointer: fine) {
	.v-panel__style:hover { background-size: 100% var(--v-stitch-width); }
}
.v-panel__style[aria-current="page"] { color: var(--v-action); background-size: 100% var(--v-stitch-width); }
.v-panel__more { padding-top: var(--v-space-4); border-top: var(--v-hairline) solid var(--v-border); }
.v-panel__feature {
	justify-self: end;
	width: 100%;
	max-width: var(--v-panel-feature-w);
	aspect-ratio: var(--v-card-ratio);
}

/* Desktop layout */
@media (min-width: 1024px) {
	.v-header__inner {
		grid-template-columns: auto minmax(0, 1fr) auto;
		gap: var(--v-space-9);
	}
	.v-header__menu-btn { display: none; }
	.v-nav { display: block; }
	.v-header__account { display: inline-grid; }
}

/* ================================================================ Search dialog */
.v-search { width: min(var(--v-modal-w), calc(100vw - 2 * var(--v-gutter))); }
.v-search__form {
	display: flex;
	gap: var(--v-space-3);
	padding: var(--v-space-5);
}
.v-search__form .v-input { flex: 1; min-width: 0; }

/* ================================================================ Menu drawer (mobile, left) */
.v-menu__body { display: grid; gap: var(--v-space-6); align-content: start; }
.v-menu__title {
	font-size: var(--v-text-small);
	font-weight: var(--v-weight-semibold);
	color: var(--v-text-muted);
}
.v-menu__list {
	display: grid;
	margin: calc(var(--v-space-4) * -1) 0 0;
	padding: 0;
	list-style: none;
}
.v-menu__list--main { margin-top: 0; padding-top: var(--v-space-5); border-top: var(--v-hairline) solid var(--v-border); }
.v-menu__list a {
	display: flex;
	align-items: center;
	gap: var(--v-space-2);
	min-height: var(--v-control-h);
	color: var(--v-text);
	font-size: var(--v-text-body-lg);
	font-weight: var(--v-weight-semibold);
	text-decoration: none;
}
.v-menu__list a[aria-current="page"] { color: var(--v-action); }
.v-menu__list--help a { font-size: var(--v-text-body); font-weight: var(--v-weight-regular); }
.v-menu__list a.v-menu__all { font-size: var(--v-text-ui); }

/* ================================================================ Footer newsletter band (§11.0, v1.46, v1.47)
   A short full-width photo band under a Hide-derived dark tint, flush on top of the Ink footer.
   Desktop: label, heading and line on the left; one joined field + button on the right.
   `.v-dark` remaps the semantic tokens (Paper text, Paper button); the band then raises the muted
   text and field border to Sand so both hold contrast over any photo. Empty photo: the plain tint.
   Every page except checkout (checkout renders its own one-line footer). */
.v-footer-news {
	--v-text-muted: var(--v-sand);
	--v-field-border: var(--v-sand);
	--v-field-bg: transparent;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	align-items: center;
	min-height: calc(var(--v-space-13) + var(--v-space-8));   /* 208px */
	background: var(--v-news-tint);
}
/* Focus target of the scroll button (not a control): no ring around the whole band. */
.v-footer-news:focus { outline: none; }
.v-footer-news__img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 60%;
}
/* Two layers over the photo: ::before takes the photo's colour to Hide Deep and keeps its light and
   shade (blend "color"), so any photo reads as leather brown; ::after darkens it for the text. */
.v-footer-news.has-image::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--v-hide-deep);
	mix-blend-mode: color;
}
.v-footer-news.has-image::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--v-news-tint);
	opacity: var(--v-news-tint-opacity);
}
.v-footer-news__inner {
	display: grid;
	gap: var(--v-space-6);
	padding-block: var(--v-space-9);
	width: 100%;
}
.v-footer-news__label { margin: 0 0 var(--v-space-3); color: var(--v-text-muted); }
.v-footer-news__copy h2 {
	margin: 0 0 var(--v-space-2);
	font-size: var(--v-text-h3);    /* 28-32px: the display face never below 28px (§4) */
	font-weight: var(--v-weight-medium);
	line-height: var(--v-lh-h3);
}
.v-footer-news__copy p:not(.v-label) { margin: 0; color: var(--v-text-muted); font-size: var(--v-text-small); max-width: 52ch; }
.v-footer-news__form { width: 100%; }
/* Field and button share one edge, like one control (the button keeps its own focus ring) */
.v-footer-news__row { display: flex; }
.v-footer-news__row .v-input { flex: 1 1 auto; min-width: 0; border-right-width: 0; }
.v-footer-news__row .v-input::placeholder { color: var(--v-text-muted); }
.v-footer-news__row .v-btn { flex: 0 0 auto; gap: var(--v-space-2); }
.v-footer-news .v-btn:is([aria-busy="true"], [data-state="done"]) .v-btn__arrow { display: none; }
/* Hover (v1.47, owner): the Paper button fills with Ink from the bottom edge, the button's own
   fill mechanism (§7.1), and the label turns Paper once the fill has passed its middle, as on the
   secondary button. The only dark-section button that fills with Ink instead of Sand. */
.v-footer-news { --v-btn-primary-bg-hover: var(--v-ink); }
@media (hover: hover) and (pointer: fine) {
	.v-footer-news .v-btn:hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"], [data-state="done"]) {
		color: var(--v-paper);
		transition-delay: 0ms, 0ms, var(--v-dur-press), 0ms;
	}
}
.v-footer-news .v-field__error { margin-top: var(--v-space-2); }
.v-footer-news__status { margin: var(--v-space-2) 0 0; font-size: var(--v-text-small); }
.v-footer-news__confirm { display: grid; gap: var(--v-space-3); justify-items: start; }
.v-footer-news__hp { position: absolute; left: -9999px; }
.v-footer-news__status:empty { display: none; }
@media (max-width: 399px) {
	/* 320-399px: the button drops under the field (full width) so the field keeps room to type */
	.v-footer-news__row { flex-direction: column; gap: var(--v-space-2); }
	.v-footer-news__row .v-input { border-right-width: var(--v-hairline); }
}
@media (min-width: 1024px) {
	.v-footer-news__inner {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		align-items: center;
		gap: var(--v-space-9);
	}
	.v-footer-news__form { justify-self: end; max-width: 30rem; }
}

/* ================================================================ Footer (Ink, §11.0) */
.v-footer {
	padding-block: var(--v-space-10) var(--v-space-7);
	font-size: var(--v-text-small);
}
.v-footer__top {
	display: grid;
	gap: var(--v-space-9);
}
.v-footer__brand {
	display: grid;
	gap: var(--v-space-5);
	align-content: start;
	max-width: 36ch;
}
.v-footer__line { color: var(--v-text-muted); font-size: var(--v-text-body); }
.v-footer__contact { display: grid; gap: var(--v-space-2); }
.v-footer__socials {
	display: flex;
	gap: var(--v-space-1);
	margin: 0 0 0 calc(var(--v-space-3) * -1);
	padding: 0;
	list-style: none;
}
.v-footer__social {
	display: grid;
	place-items: center;
	width: var(--v-hit-min);
	height: var(--v-hit-min);
	color: var(--v-text);
}
.v-footer__social .v-icon { width: var(--v-space-5); height: var(--v-space-5); }
.v-footer__cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--v-space-8) var(--v-space-5);
}
.v-footer__title {
	margin-bottom: var(--v-space-4);
	font-size: var(--v-text-ui);
	font-weight: var(--v-weight-semibold);
	letter-spacing: var(--v-track-ui);
}
.v-footer__list {
	display: grid;
	gap: var(--v-space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}
.v-footer__list a {
	display: inline-flex;
	align-items: center;
	min-height: var(--v-hit-min);
	color: var(--v-text-muted);
	text-decoration: none;
}
.v-footer__list a:hover,
.v-footer__list a[aria-current="page"] { color: var(--v-text); }
.v-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--v-space-6);
	margin-top: var(--v-space-10);
	padding-top: var(--v-space-6);
	border-top: var(--v-hairline) solid var(--v-border);
}
.v-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--v-space-1) var(--v-space-5);
	color: var(--v-text-muted);
	font-size: var(--v-text-label);
	line-height: var(--v-lh-body);
}
.v-footer .v-footer__sign {
	width: auto;
	height: var(--v-space-6);
}
@media (min-width: 768px) {
	.v-footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.v-footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr); }   /* golden split */
}

@media (prefers-reduced-motion: reduce) {
	.v-header,
	.v-panel,
	.v-panel.is-open,
	.v-nav__caret { transition-duration: 0s; }
	.v-panel { translate: none; }
}

/* ================================================================ Scroll button (§8, §7.1 v1.48)
   Paper square, Ink border, the V-wing in Ink. The V points down in the first half of the page and
   turns over (180° about its own point, so the tip stays on the button's centre line) in the
   second half. Shown by header-footer.js only once the first screen has scrolled away. The wrapper
   carries the entrance so the button keeps its own press scale. */
.v-scroll {
	--_raise: 0px;
	position: fixed;
	right: var(--v-gutter);
	bottom: calc(var(--v-gutter) + var(--_raise) + env(safe-area-inset-bottom, 0px));
	z-index: var(--v-z-header);
	opacity: 0;
	transform: translateY(var(--v-lift-sm));
	visibility: hidden;
	transition:
		opacity var(--v-dur-bar-out) var(--v-ease-out),
		transform var(--v-dur-bar-out) var(--v-ease-out),
		visibility 0s linear var(--v-dur-bar-out);
}
.v-scroll[hidden] { display: none; }
.v-scroll.is-shown {
	opacity: 1;
	transform: none;
	visibility: visible;
	transition-duration: var(--v-dur-ui), var(--v-dur-ui), 0s;
	transition-delay: 0s;
}
.v-scroll__btn {
	--_bg: var(--v-paper);
	--_border: var(--v-ink);
	--_fg: var(--v-ink);
	--_bg-hover: var(--v-ink);
	width: var(--v-control-h);
	padding: 0;
}
.v-scroll__mark {
	width: var(--v-space-6);            /* 24 px wide, 18.6 px tall */
	aspect-ratio: 694 / 537;
	/* The V's point is at 39.9% of the mark: shift it onto the button's centre line and turn about it. */
	translate: calc(var(--v-space-6) * 0.101) 0;
	transform-origin: 39.9% 50%;
	transition: transform var(--v-dur-ui) var(--v-ease-in-out);
}
.v-scroll.is-up .v-scroll__mark { transform: rotate(180deg); }
/* Sit above the product page's sticky buy bar (every width, §11.3.2): its button + 12 px padding each side. */
html.v-has-sticky-buy .v-scroll { --_raise: calc(var(--v-control-h-lg) + var(--v-space-3) * 2); }
/* Never over the consent bar, drawers or modals (they own the bottom and the focus). */
html:has(.v-consent:not([hidden])) .v-scroll,
html:has(dialog[open]) .v-scroll { opacity: 0; visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
	.v-scroll { transform: none; }
	.v-scroll__mark { transition: none; }
}
@media print { .v-scroll { display: none; } }

/* ================================================================ Making-of film (§8, §7.1 v1.54)
   A play mark in a thin ring with the rationed label set round it on a circle (owner): no poster,
   no running time. Ink on Paper, Paper on dark (currentColor). Hover: the ring fills with the text
   colour and the mark takes the surface colour (the button fill's colours); press 0.97. The words
   never rotate (§7.3: no infinite loops). The ring is an icon, not a shape (radius 0 rule). */
.v-film {
	display: inline-block;
	width: var(--v-film-badge);
	aspect-ratio: 1;
	color: var(--v-text);
	text-decoration: none;
}
/* Stays Ink (Paper on dark) on hover: the fill is the feedback, not the link colour (Hide is rationed). */
.v-film:hover, .v-film:focus-visible { color: var(--v-text); }
.v-film__badge { display: block; width: 100%; height: 100%; overflow: visible; transition: transform var(--v-dur-press) var(--v-ease-out); }
.v-film__words {
	fill: currentColor;
	font-family: var(--v-font-body);
	font-size: var(--v-text-label);
	font-weight: var(--v-weight-semibold);
	letter-spacing: var(--v-track-label);
}
.v-film__ring { fill: transparent; stroke: currentColor; stroke-width: var(--v-stitch-width); transition: fill var(--v-dur-hover) var(--v-ease-out); }
.v-film__tri { fill: currentColor; transition: fill var(--v-dur-hover) var(--v-ease-out); }
.v-film:active .v-film__badge { transform: scale(var(--v-btn-press-scale)); }
@media (hover: hover) and (pointer: fine) {
	.v-film:hover .v-film__ring { fill: currentColor; }
	.v-film:hover .v-film__tri { fill: var(--v-surface); }
}

.v-film-modal {
	/* Portrait: limited by the height left after the title and the description; landscape: by the width (v1.53). */
	width: min(calc(100vw - var(--v-gutter) * 2), calc((100svh - var(--v-space-13) - var(--v-space-9)) * (var(--v-film-ratio, 9 / 16))), var(--v-container));
	max-width: none;
	max-height: 100svh;
	margin: auto;
	padding: 0;
	overflow-x: hidden;   /* the close button's hit area never adds a sideways scrollbar */
	border: 0;
	background: transparent;
	color: var(--v-paper);
	opacity: 1;
	transform: none;
	transition: opacity var(--v-dur-ui) var(--v-ease-out), transform var(--v-dur-ui) var(--v-ease-out), overlay var(--v-dur-ui) allow-discrete, display var(--v-dur-ui) allow-discrete;
}
@starting-style {
	.v-film-modal[open] { opacity: 0; transform: scale(var(--v-btn-press-scale)); }
}
.v-film-modal::backdrop { background: var(--v-film-backdrop); }
.v-film-modal__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--v-space-4); margin-bottom: var(--v-space-2); }
.v-film-modal__title { margin: 0; font-size: var(--v-text-small); font-weight: var(--v-weight-semibold); }
.v-film-modal .v-close { color: var(--v-paper); }
.v-film-modal__video { display: block; width: 100%; height: auto; aspect-ratio: var(--v-film-ratio, 9 / 16); background: var(--v-ink); }
.v-film-modal__desc { margin: var(--v-space-3) 0 0; font-size: var(--v-text-small); color: var(--v-sand); }
@media (prefers-reduced-motion: reduce) {
	.v-film__badge { transition: none; }
	.v-film-modal { transform: none; transition: opacity var(--v-dur-fill-out) linear, overlay var(--v-dur-fill-out) allow-discrete, display var(--v-dur-fill-out) allow-discrete; }
	@starting-style { .v-film-modal[open] { transform: none; } }
}