/* ==========================================================================
   Povorot – main stylesheet
   Desktop-first design, built on fluid tokens so mobile needs few overrides.
   Design reference: Figma "WEBSITE DRAFT v2", 1440 px frame.
   Fluid values: clamp(min @ 375px, …, max @ 1440px)
   ========================================================================== */

@font-face {
	font-family: "Veneer";
	src: url("../fonts/veneer.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* Metric-matched fallback shown while Veneer loads (limits layout shift) */
@font-face {
	font-family: "Veneer Fallback";
	src: local("Arial Narrow Bold"), local("ArialNarrow-Bold"), local("Impact");
	ascent-override: 72.2%;
	descent-override: 27.8%;
	line-gap-override: 0%;
	size-adjust: 92%;
}

/* ---------- Tokens ---------- */

:root {
	/* Colours (Figma variables) */
	--c-wheat: #ffd84d;
	--c-blue: #1646c4;
	--c-navy: #0a1f66;
	--c-paper: #fff6d9;
	--c-black: #000;
	--c-white: #fff;
	--gradient-blue: linear-gradient(180deg, var(--c-blue) 0%, var(--c-navy) 100%);

	/* Type */
	--font-display: "Veneer", "Veneer Fallback", "Arial Narrow", Impact, sans-serif;
	--font-body: Arial, "Helvetica Neue", Helvetica, sans-serif;

	--fs-xl: clamp(3rem, 2.206rem + 3.38vw, 5.25rem);      /* 84px */
	--fs-lg: clamp(2.125rem, 1.729rem + 1.69vw, 3.25rem);  /* 52px */
	--fs-price: clamp(2.25rem, 1.94rem + 1.31vw, 3.125rem);/* 50px */
	--fs-md: clamp(1.5rem, 1.368rem + 0.56vw, 1.875rem);   /* 30px */
	--fs-sm: clamp(1.25rem, 1.15rem + 0.42vw, 1.75rem);    /* 28px, small buttons */
	--fs-body: clamp(1rem, 0.956rem + 0.19vw, 1.125rem);   /* 18px */
	--fs-xs: 0.75rem;                                       /* 12px */

	--lh-display: 0.9;
	--lh-body: 1.3;

	/* Space */
	--container: 90rem;                                     /* 1440px */
	--gutter: clamp(1rem, 7.89vw - 0.85rem, 6.25rem);       /* 100px */
	--space-section: clamp(2rem, 1.6rem + 1.69vw, 3.125rem);/* 50px */
	--space-title: clamp(1.5rem, 1.2rem + 1.25vw, 2.5rem);  /* 40px */
	--gap-columns: clamp(2rem, 1.12rem + 3.76vw, 4.5rem);   /* 72px */
	--gap-cards: 1.25rem;                                   /* 20px */
	--gap-buttons: 0.875rem;                                /* 14px */
	--header-height: 9.125rem;                              /* 146px */

	--radius: 5px;
	--radius-lg: 10px;

	/* Motion */
	--ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
	--dur-fast: 0.2s;
	--dur-slow: 0.35s;
}

/* ---------- Base ---------- */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: 1rem;
}

/* In-page links such as "Acheter la bière" glide to their target */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

html:has(dialog[open]) {
	overflow: hidden;
}

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--c-wheat);
	color: var(--c-navy);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	--focus: var(--c-navy);
}

main {
	flex: 1;
}

h1, h2, h3, h4, p, ul, ol, dl, figure {
	margin: 0;
}

img,
picture,
svg {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

a {
	color: inherit;
}

button,
input {
	font: inherit;
	color: inherit;
}

[role="list"] {
	list-style: none;
	padding: 0;
}

:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 3px;
}

.theme-dark {
	--focus: var(--c-wheat);
	color: var(--c-wheat);
}

/* Elements that need JavaScript are hidden until it has loaded */
html:not(.js) .js-only,
html.js .nojs-only {
	display: none !important;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 100;
	padding: 0.75rem 1rem;
	background: var(--c-wheat);
	color: var(--c-navy);
	font-weight: 700;
	border-radius: var(--radius);
	transform: translateY(-200%);
}

.skip-link:focus {
	transform: none;
}

/* ---------- Layout ---------- */

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

.section {
	padding-block: var(--space-section);
}

.section__title {
	margin-bottom: var(--space-title);
}

/* Vertical rhythm inside rich text */
.flow > * + * {
	margin-top: 1em;
}

/* ---------- Typography ---------- */

/* Veneer is a caps font; its lowercase glyphs are not used */
.display {
	font-family: var(--font-display);
	font-weight: 400;
	line-height: var(--lh-display);
	text-transform: uppercase;
	letter-spacing: 0;
}

.display--xl { font-size: var(--fs-xl); }
.display--lg { font-size: var(--fs-lg); }
.display--md { font-size: var(--fs-md); }

.link {
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 0.15em;
	text-decoration-thickness: 0.08em;
	transition: text-decoration-thickness var(--dur-fast) var(--ease-out);
}

.link:hover {
	text-decoration-thickness: 0.15em;
}

/* ---------- Buttons ---------- */

/* Veneer's caps sit high in the line box, so the top padding is larger */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.4em 0.5em 0.13em;
	border: 2px solid var(--c-wheat);
	border-radius: var(--radius);
	font-family: var(--font-display);
	font-size: var(--fs-md);
	font-weight: 400;
	line-height: var(--lh-display);
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition:
		background-color var(--dur-fast) var(--ease-out),
		color var(--dur-fast) var(--ease-out),
		border-color var(--dur-fast) var(--ease-out),
		transform var(--dur-fast) var(--ease-out);
}

/* Presses down on click */
.btn:active {
	transform: translateY(1px);
	transition-duration: 0.05s;
}

.btn--solid {
	background: var(--c-wheat);
	color: var(--c-blue);
}

.btn--solid:hover {
	background: var(--c-paper);
	border-color: var(--c-paper);
}

.btn--outline {
	background: transparent;
	color: var(--c-wheat);
}

.btn--outline:hover {
	background: var(--c-wheat);
	color: var(--c-blue);
}

.btn--sm {
	font-size: var(--fs-sm);
	padding: 0.33em 0.28em 0.1em;
}

.btn--lg {
	font-size: var(--fs-lg);
	padding: 0.3em 0.3em 0.1em;
}

.button-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-buttons);
}

/* ---------- Header ---------- */

.site-header {
	position: absolute;
	inset: 0 0 auto;
	z-index: 10;
	--focus: var(--c-wheat);
}

.site-header__inner {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1.25rem;
}

.site-header__nav {
	margin-left: auto;
}

.menu-toggle {
	display: flex;
	align-items: flex-end;
	gap: 0.3125rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--c-wheat);
	font-family: var(--font-display);
	font-size: var(--fs-md);
	line-height: var(--lh-display);
	text-transform: uppercase;
	cursor: pointer;
}

.menu-toggle__icon {
	width: auto;
	height: 3.3125rem; /* 53px */
}

.menu-toggle__label,
.menu__close,
.cart__close {
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.12em;
	transition: text-decoration-color var(--dur-fast) var(--ease-out);
}

.menu-toggle:hover .menu-toggle__label {
	text-decoration-color: currentColor;
}

/* ---------- Menu overlay ---------- */

.menu {
	position: fixed;
	inset: 0.9375rem;
	width: auto;
	height: auto;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--radius-lg);
	background: var(--c-blue);
	color: var(--c-wheat);
	--focus: var(--c-wheat);
	overflow: auto;
	opacity: 0;
	transform: scale(0.98);
	transition:
		opacity var(--dur-slow) var(--ease-out),
		transform var(--dur-slow) var(--ease-out),
		overlay var(--dur-slow) allow-discrete,
		display var(--dur-slow) allow-discrete;
}

.menu::backdrop {
	background: rgb(10 31 102 / 0);
	transition:
		background var(--dur-slow),
		overlay var(--dur-slow) allow-discrete,
		display var(--dur-slow) allow-discrete;
}

.menu[open] {
	display: flex;
	opacity: 1;
	transform: none;
}

.menu[open]::backdrop {
	background: rgb(10 31 102 / 0.7);
}

@starting-style {
	.menu[open] {
		opacity: 0;
		transform: scale(0.98);
	}

	.menu[open]::backdrop {
		background: rgb(10 31 102 / 0);
	}
}

/* Menu buttons rise in one after another */
.menu[open] .menu__list > li {
	animation: rise 0.45s var(--ease-out) both;
	animation-delay: calc(0.08s + var(--i, 0) * 0.05s);
}

.menu__list > li:nth-child(2) { --i: 1; }
.menu__list > li:nth-child(3) { --i: 2; }
.menu__list > li:nth-child(4) { --i: 3; }
.menu__list > li:nth-child(n + 5) { --i: 4; }
.menu__list + .menu__list > li:nth-child(1) { --i: 2; }
.menu__list + .menu__list > li:nth-child(2) { --i: 3; }
.menu__list + .menu__list > li:nth-child(3) { --i: 4; }
.menu__list + .menu__list > li:nth-child(n + 4) { --i: 5; }

@keyframes rise {
	from {
		opacity: 0;
		transform: translateY(0.75rem);
	}
}

/* The panel is inset by 15px; the content keeps the page gutter */
.menu__inner {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding-block: 1.25rem;
	padding-inline: max(1rem, calc(var(--gutter) - 0.9375rem));
}

.menu__top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1rem;
}

.menu__logo img {
	width: 7.975rem; /* 128px */
}

.menu__close {
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--font-display);
	font-size: var(--fs-md);
	line-height: var(--lh-display);
	text-transform: uppercase;
	cursor: pointer;
}

.menu__close:hover {
	text-decoration-color: currentColor;
}

.menu__nav {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
	margin-block: auto;
	padding-block: 3rem;
}

.menu__list {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.9375rem;
}

/* ---------- Hero ---------- */

.hero {
	position: relative;
	display: flex;
	min-height: clamp(40rem, 100svh, 60.375rem); /* 966px incl. header */
	background: var(--gradient-blue);
	overflow: hidden;
}

.hero__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding-top: var(--header-height);
	padding-bottom: clamp(3rem, 2.5rem + 2.2vw, 4.6875rem); /* 75px */
}

.hero__copy {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.75rem;
	max-width: min(46.25rem, 55%); /* 740px, clear of the bottle */
}

.hero__text {
	max-width: 32rem;
}

/* Can: centre point taken from the Figma frame, tilted 15° */
.hero__bottle {
	position: absolute;
	left: 69.6%;
	top: 57%;
	width: min(22vw, 20rem, 34svh);
	--can-base: translate(-50%, -50%);
	transform:
		var(--can-base)
		translateY(calc(var(--hero-p, 0) * 35%))
		rotate(calc(15deg + var(--hero-p, 0) * 25deg));
	will-change: transform;
}

.hero__bottle img {
	width: 100%;
	filter: drop-shadow(0 20px 28px rgb(0 0 0 / 0.35));
	animation: can-in 0.9s var(--ease-out) 0.15s both;
}

@keyframes can-in {
	from {
		opacity: 0;
		transform: translateY(12%) rotate(-8deg) scale(0.94);
	}
}

/* ---------- Story ---------- */

.story__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--gap-columns);
	row-gap: 2.75rem;
}

.story__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
}

/* ---------- Steps ---------- */

.steps__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--gap-cards);
}

.step {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.75rem 1.625rem 1.875rem;
	border-radius: var(--radius);
	background: var(--gradient-blue);
}

/* ---------- Product ---------- */

.product-card {
	display: grid;
	grid-template-columns: 15.625rem minmax(0, 1fr); /* 250px can column */
	align-items: center;
	gap: var(--gap-columns);
	padding: 3.5rem;
	border-radius: var(--radius);
	background: var(--gradient-blue);
}

.product-card__media {
	display: flex;
	justify-content: center;
}

.product-card__media picture {
	width: 12.9375rem; /* 207px */
}

.product-card__media img {
	width: 100%;
	filter: drop-shadow(0 24px 30px rgb(0 0 0 / 0.35));
}

.product-card__info {
	align-self: end;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.9375rem;
}

.product-card__text {
	max-width: 34rem;
}

.buy {
	display: flex;
	flex-direction: column;
	gap: 0.9375rem;
}

.buy__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

.qty {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 11.25rem;
	height: 3.125rem;
	padding-inline: 1rem;
	border: 2px solid var(--c-wheat);
	border-radius: var(--radius);
}

.qty__btn,
.qty__input {
	height: 100%;
	padding: 0.2em 0 0;
	border: 0;
	background: none;
	font-family: var(--font-display);
	font-size: 2.375rem; /* 38px */
	line-height: 1;
	text-align: center;
}

.qty__btn {
	flex: 1;
	cursor: pointer;
	transition:
		color var(--dur-fast) var(--ease-out),
		transform var(--dur-fast) var(--ease-out);
}

.qty__btn:hover {
	color: var(--c-paper);
}

.qty__btn:active:not(:disabled) {
	transform: scale(0.8);
	transition-duration: 0.05s;
}

.qty__input {
	width: 2.75rem;
	-moz-appearance: textfield;
	appearance: textfield;
}

.qty__input::-webkit-inner-spin-button,
.qty__input::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.buy__submit {
	min-width: 11.25rem;
	height: 3.125rem;
	font-size: var(--fs-sm);
}

.buy__price {
	font-family: var(--font-display);
	font-size: var(--fs-price);
	line-height: var(--lh-display);
	padding-top: 0.12em;
}

.consent {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	font-size: 1rem;
}

.consent input {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	margin: 0;
	accent-color: var(--c-wheat);
}

.consent a {
	font-weight: 700;
}

.buy__message {
	padding: 0.625rem 0.875rem;
	border-radius: var(--radius);
	background: var(--c-wheat);
	color: var(--c-navy);
	font-weight: 700;
}

/* ---------- Impact ---------- */

.impact__text {
	max-width: 50rem;
	margin-bottom: var(--space-title);
}

.stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--gap-cards);
}

.stat {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

/* ---------- Text pages ---------- */

.page-hero {
	padding-top: var(--header-height);
	padding-bottom: var(--space-section);
	background: var(--gradient-blue);
}

.page-top {
	height: var(--header-height);
	background: var(--c-blue);
}

.prose {
	max-width: 48rem;
	line-height: 1.45;
}

.prose h2,
.prose h3 {
	margin-top: 2em;
	font-family: var(--font-display);
	font-weight: 400;
	line-height: var(--lh-display);
	text-transform: uppercase;
}

.prose h2 { font-size: var(--fs-md); }
.prose h3 { font-size: var(--fs-body); }

.prose h2 + *,
.prose h3 + * {
	margin-top: 0.5em;
}

.prose a {
	font-weight: 700;
	text-underline-offset: 0.15em;
}

.prose ul,
.prose ol {
	padding-left: 1.25em;
}

/* ---------- Footer ---------- */

.site-footer {
	background: var(--c-black);
	color: var(--c-white);
	font-size: var(--fs-xs);
	line-height: 1.1;
	--focus: var(--c-white);
}

.site-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.625rem 1.875rem;
	padding-block: 1.25rem;
}

.site-footer__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	text-transform: uppercase;
}

.site-footer__links a {
	text-decoration: none;
}

.site-footer__links a:hover {
	text-decoration: underline;
}

.site-footer__notice {
	margin-inline: auto;
}

.site-footer__copy {
	text-transform: uppercase;
}

/* ---------- Cart toggle (header) ---------- */

.cart-toggle {
	gap: 0.3em;
}

.cart-toggle__icon {
	width: 0.8em;
	height: 0.8em;
	margin-top: -0.2em; /* optically centre with Veneer caps */
}

.cart-toggle__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.4rem;
	height: 1.4rem;
	margin-top: -0.2em;
	padding-inline: 0.35rem;
	border-radius: 999px;
	background: var(--c-blue);
	color: var(--c-wheat);
	font-family: var(--font-body);
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1;
}

.cart-toggle__count[hidden] {
	display: none;
}

/* ---------- Cart drawer ---------- */

.cart {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(30rem, 100%);
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--c-blue);
	transform: translateX(100%);
	transition:
		transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
		overlay 0.35s allow-discrete,
		display 0.35s allow-discrete;
}

.cart[open] {
	display: flex;
	transform: none;
}

.cart::backdrop {
	background: rgb(10 31 102 / 0);
	transition:
		background 0.35s,
		overlay 0.35s allow-discrete,
		display 0.35s allow-discrete;
}

.cart[open]::backdrop {
	background: rgb(10 31 102 / 0.7);
}

@starting-style {
	.cart[open] {
		transform: translateX(100%);
	}

	.cart[open]::backdrop {
		background: rgb(10 31 102 / 0);
	}
}

.cart__inner {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	min-height: 0;
	padding: 1.25rem 2rem 2rem;
}

.cart__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1rem;
	padding-top: 1rem;
}

.cart__close {
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--font-display);
	font-size: var(--fs-md);
	line-height: var(--lh-display);
	text-transform: uppercase;
	cursor: pointer;
}

.cart__close:hover {
	text-decoration-color: currentColor;
}

.cart__message {
	padding: 0.625rem 0.875rem;
	border-radius: var(--radius);
	background: var(--c-wheat);
	color: var(--c-navy);
	font-weight: 700;
}

.cart__items {
	flex: 1;
	min-height: 0;
	margin: 0;
	overflow-y: auto;
	border-top: 1px solid rgb(255 216 77 / 0.35);
}

.cart-item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 1rem;
	padding-block: 1rem;
	border-bottom: 1px solid rgb(255 216 77 / 0.35);
}

.cart-item__image {
	width: auto;
	height: 6rem;
}

.cart-item__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
}

.cart-item__title {
	text-decoration: none;
}

.cart-item__title:hover {
	text-decoration: underline;
	text-decoration-thickness: 0.08em;
}

.cart-item__actions {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.cart-item__remove {
	padding: 0;
	border: 0;
	background: none;
	font-size: 0.875rem;
	text-decoration: underline;
	text-underline-offset: 0.15em;
	cursor: pointer;
}

.cart-item__price {
	align-self: start;
	padding-top: 0.15em;
}

.qty--sm {
	width: 7.5rem;
	height: 2.5rem;
	padding-inline: 0.5rem;
}

.qty--sm .qty__btn,
.qty--sm .qty__value {
	font-family: var(--font-display);
	font-size: 1.75rem;
	line-height: 1;
	text-align: center;
}

.qty--sm .qty__value {
	min-width: 1.75rem;
	padding-top: 0.2em;
}

.qty__btn:disabled {
	opacity: 0.35;
	cursor: default;
}

.cart__empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgb(255 216 77 / 0.35);
	font-size: var(--fs-md);
}

.cart__items[hidden],
.cart__empty[hidden],
.cart__footer[hidden] {
	display: none;
}

.cart__footer {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.cart__subtotal {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-family: var(--font-display);
	font-size: var(--fs-md);
	line-height: var(--lh-display);
	text-transform: uppercase;
}

.cart__note {
	font-size: 0.875rem;
	opacity: 0.85;
}

.cart__checkout {
	width: 100%;
	min-height: 3.125rem;
}

/* ==========================================================================
   Breakpoints (desktop-first)
   --bp-tablet: 60em (960px) · --bp-mobile: 40em (640px)
   ========================================================================== */

@media (max-width: 60em) {
	:root {
		--header-height: 6.5rem;
	}

	/* Can moves into the flow above the headline, centred in the free space */
	.hero__bottle {
		position: static;
		order: -1;
		align-self: center;
		width: min(34vw, 13rem, 20svh);
		margin-block: auto;
		padding-block: 1.5rem 2.5rem;
		--can-base: translate(0);
	}

	.hero__copy {
		max-width: 46.25rem;
	}

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

	.product-card {
		grid-template-columns: minmax(0, 1fr);
		gap: 2rem;
		padding: clamp(1.5rem, var(--gutter), 3.5rem);
	}

	.product-card__media picture {
		width: min(45vw, 12rem);
	}
}

@media (max-width: 40em) {
	:root {
		--header-height: 5.75rem;
	}

	/* Header buttons repeat the menu; only the cart stays */
	.site-header__nav li:not(:has(.cart-toggle)) {
		display: none;
	}

	.menu-toggle__icon {
		height: 2.75rem;
	}

	.hero__copy {
		max-width: none;
		gap: 1.25rem;
	}

	.story__grid,
	.stats {
		grid-template-columns: minmax(0, 1fr);
	}

	.stats {
		gap: 1.5rem;
	}

	.stat {
		gap: 0.25rem;
	}

	.menu__logo img {
		width: 6rem;
	}

	.cart__inner {
		padding: 1rem var(--gutter) 1.5rem;
	}

	.cart-item__image {
		height: 5rem;
	}

	/* Larger tap targets for the small footer links */
	.site-footer__inner {
		flex-direction: column;
		align-items: flex-start;
		padding-block: 1.25rem 1.5rem;
	}

	.site-footer__links {
		gap: 0 1.25rem;
	}

	.site-footer__links a {
		display: inline-block;
		padding-block: 0.5rem;
	}

	.site-footer__notice {
		margin-inline: 0;
	}
}

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