/* ==========================================================================
   Filago — theme styles
   Breakpoints: mobile < 768 · tablet 768–1023 · desktop ≥ 1024
   ========================================================================== */

:root {
	/* Warm neutrals (ivory, sand) taken from the campaign photos, plus one brand accent. */
	--ink: #140f0f;
	--ink-2: #3f3834;
	--muted: #6f6760;
	--line: #e7e1d9;
	--line-strong: #cfc7bc;
	--soft: #f6f1ea;
	--card: #efe9e1;
	--accent: #7a1f2b;
	--white: #fff;
	--sale: #c8102e;
	--focus: #2b5cd6;

	--font: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--serif: "EB Garamond", Garamond, "Times New Roman", Georgia, serif;

	--gutter: 16px;
	--announce-h: 32px;
	--bar-h: 48px;
	--header-pad: 8px;
	--header-h: calc(var(--bar-h) + var(--header-pad));
	--radius: 8px;
	--ease: cubic-bezier(.2, .7, .2, 1);
}
@media (min-width: 768px) {
	:root { --gutter: 24px; --header-pad: 12px; }
}
@media (min-width: 1024px) {
	:root { --gutter: 40px; --header-pad: 16px; --header-side: 20px; }
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
/* Keyboard focus and #anchor jumps stop below the sticky header (and the listing toolbar, the buy bar). */
html { scroll-padding-top: calc(var(--header-h) + 16px); }
html:has(> body:is(.post-type-archive-product, .tax-product_cat)) { scroll-padding-top: calc(var(--header-h) + 84px); }
html:has(> body.has-buybar) { scroll-padding-bottom: 96px; }
body {
	margin: 0;
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.45;
	color: var(--ink);
	background: var(--white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}
body.is-locked { overflow: hidden; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-weight: 400; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }

.screen-reader-text {
	position: absolute !important; 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; left: 8px; top: -100px; z-index: 1000; background: var(--ink); color: var(--white); padding: 12px 16px; border-radius: 4px; }
.skip-link:focus { top: 8px; }
.muted { color: var(--muted); }

/* ---------- Type ----------
   One rule: every headline is set in the serif (--serif); navigation, buttons, product names,
   prices, labels and body copy stay in Inter Tight. The serif runs larger to match its x-height. */
.display-1, .display-2, .display-3, .pdp__title, .maison__content h2 {
	font-family: var(--serif);
	font-weight: 400;
	letter-spacing: -0.01em;
	text-wrap: balance;
}
/* No lone word on a paragraph's last line; small headings break into even lines (Six Five / Asala). */
p, dd, figcaption, .lead { text-wrap: pretty; }
h1, h2, h3, h4, .drawer__title, .eyebrow { text-wrap: balance; }
.display-1 { font-size: 48px; line-height: .95; }
.display-2 { font-size: 40px; line-height: 1; }
.lead { font-size: 18px; line-height: 1.45; }
@media (min-width: 768px) {
	.display-1 { font-size: 68px; }
	.display-2 { font-size: 54px; }
}
@media (min-width: 1024px) {
	.display-1 { font-size: 96px; line-height: .92; }
	.display-2 { font-size: 76px; line-height: .98; }
	.lead { font-size: 20px; }
}

/* ---------- Buttons & links ---------- */
.btn,
.button,
.woocommerce-mini-cart__buttons a,
button.single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 20px;
	border-radius: 999px;
	border: 1px solid transparent;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
	text-align: center;
	cursor: pointer;
	transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), opacity .2s;
}
.btn--dark, .button, .woocommerce-mini-cart__buttons a.checkout, button.single_add_to_cart_button { background: var(--ink); color: var(--white); }
.btn--dark:hover, .button:hover, .woocommerce-mini-cart__buttons a.checkout:hover, button.single_add_to_cart_button:hover { background: #3a3535; }
.btn--light { background: var(--card); color: var(--ink); }
.btn--light:hover { background: var(--white); }
.btn--outline, .woocommerce-mini-cart__buttons a:not(.checkout) { background: var(--white); color: var(--ink); border-color: var(--ink); }
.btn--outline:hover, .woocommerce-mini-cart__buttons a:not(.checkout):hover { background: var(--soft); }
.btn--sm { min-height: 36px; padding: 0 16px; font-size: 14px; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.button.disabled, .button:disabled { opacity: .45; cursor: not-allowed; }
/* Lululemon keeps the bag button live and explains what's missing instead of greying it out. */
button.single_add_to_cart_button.disabled { opacity: 1; cursor: pointer; }
.button.loading { opacity: .6; pointer-events: none; }

.link-underline {
	display: inline-block;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	border-bottom: 1px solid currentColor;
	padding-bottom: 1px;
}
.link-underline:hover { color: var(--muted); }

/* ---------- Announcement ---------- */
.announcement {
	position: relative;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--announce-h);
	padding: 6px 40px 6px var(--gutter);
	background: var(--ink);
	color: var(--white);
	font-size: 12px;
	line-height: 1.35;
	letter-spacing: -0.005em;
}
.announcement__text { text-align: center; }
.announcement__text a { text-decoration: underline; text-underline-offset: 2px; margin-left: 4px; }
.announcement__close {
	position: absolute; right: calc(var(--gutter) + 2px); top: 50%; transform: translateY(-50%);
	display: grid; place-items: center; width: 24px; height: 24px; color: rgba(255, 255, 255, .7);
}
.announcement__close:hover { color: var(--white); }
@media (min-width: 1024px) {
	.announcement { justify-content: flex-start; padding-right: 64px; }
	.announcement__text { text-align: left; }
}
/* Two messages (shop line + welcome code, header.php) share one grid cell and cross-fade (theme.js). */
.announcement__msgs { display: grid; align-items: center; min-width: 0; }
.announcement__msgs > .announcement__text { grid-area: 1 / 1; text-wrap: balance; transition: opacity .45s var(--ease), transform .45s var(--ease), visibility .45s; }
.announcement__msgs > .announcement__text:not(.is-active) { opacity: 0; visibility: hidden; transform: translateY(6px); }
.announcement__msgs > .announcement__text.is-active { transition-delay: .25s; }
@media (prefers-reduced-motion: reduce) { .announcement__msgs > .announcement__text { transition: none; } }

/* ---------- Header ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	padding: var(--header-pad) var(--header-side, var(--header-pad)) 0;
	pointer-events: none;
}
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .site-header { top: 0; } }

.site-header__bar {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	height: var(--bar-h);
	padding: 0 8px;
	border-radius: var(--radius);
	background: rgba(255, 255, 255, .92);
	-webkit-backdrop-filter: blur(20px) saturate(1.4);
	backdrop-filter: blur(20px) saturate(1.4);
	box-shadow: 0 0 0 1px rgba(20, 15, 15, .06);
	pointer-events: auto;
	transition: background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.has-overlay-header .site-header:not(.is-scrolled):not(.is-open) .site-header__bar {
	background: rgba(255, 255, 255, .42);
	box-shadow: none;
}
.has-overlay-header .site-main > :first-child { margin-top: calc(-1 * var(--header-h)); }

.brand { display: inline-flex; align-items: center; justify-self: center; height: 100%; }
.brand__img { height: 16px; width: auto; }
.brand__word { font-size: 22px; font-weight: 600; letter-spacing: -0.05em; line-height: 1; }

.hdr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 40px;
	height: 40px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 500;
	position: relative;
}
.hdr-btn:hover { background: rgba(20, 15, 15, .06); }
/* Narrow phones: three 40 px action buttons are wider than the 1fr column and push the logo off centre. */
@media (max-width: 379px) { .site-header__bar .hdr-btn { min-width: 36px; } }
.hdr-btn__label { display: none; }
.hdr-btn--menu { justify-self: start; }
.hdr-btn--account { display: none; }
.hdr-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0; }
.cart-count {
	position: absolute;
	top: 4px; right: 2px;
	min-width: 16px; height: 16px; padding: 0 4px;
	border-radius: 999px;
	background: var(--ink); color: var(--white);
	font-size: 10px; font-weight: 600; line-height: 16px; text-align: center;
}

.nav { display: none; }

@media (min-width: 768px) {
	.hdr-btn--account { display: inline-flex; }
}
@media (min-width: 1024px) {
	.site-header__bar { grid-template-columns: auto 1fr auto; padding: 0 12px 0 20px; }
	.brand { justify-self: start; margin-right: 32px; }
	.brand__img { height: 18px; }
	.hdr-btn--menu { display: none; }
	.hdr-btn--search { padding: 0 10px; }
	.hdr-btn__label { display: inline; }
	.nav { display: block; height: 100%; }
	.nav__list { display: flex; height: 100%; align-items: stretch; }
	.nav__list > li { position: static; display: flex; align-items: center; }
	.nav__list > li > a {
		display: flex; align-items: center; height: 100%;
		padding: 0 12px;
		font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: -0.005em;
		position: relative;
	}
	.nav__list > li > a::after {
		content: ""; position: absolute; left: 12px; right: 12px; bottom: 12px;
		height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left;
		transition: transform .25s var(--ease);
	}
	.nav__list > li:hover > a::after,
	.nav__list > li > a:focus-visible::after,
	.nav__list > .current-menu-item > a::after,
	.nav__list > .current-menu-ancestor > a::after { transform: scaleX(1); }

	/* Mega panel. Closed panels are display:none, so their lazy images don't download before the menu is
	   first used and Tab skips their cards. Hover opens a panel; keyboard and touch use the chevron button
	   (.nav__more, li.is-open, theme.js). The fade still runs through allow-discrete + @starting-style. */
	.nav .sub-menu {
		position: absolute; left: 0; right: 0; top: calc(100% + 8px);
		display: none; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 40px;
		padding: 32px 20px 40px;
		max-height: calc(100vh - var(--header-h) - 48px); overflow-y: auto; overscroll-behavior: contain;
		background: var(--white);
		border-radius: var(--radius);
		box-shadow: 0 16px 40px rgba(20, 15, 15, .12);
		opacity: 0; transform: translateY(-4px);
		transition: opacity .2s var(--ease), transform .2s var(--ease), display .2s allow-discrete;
	}
	/* Hover bridge over the 8px gap (on the item, because the panel scrolls and would clip its own). */
	.nav__list > li.menu-item--mega:is(:hover, .is-hover)::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; }
	.nav li.is-open > .sub-menu { display: grid; opacity: 1; transform: none; }
	@starting-style { .nav li.is-open > .sub-menu { opacity: 0; transform: translateY(-4px); } }
	/* Hover only where there is a real hover: on touch screens a tap on "Femme" opens the page directly.
	   .is-hover (theme.js) keeps a panel 0.2s after the mouse leaves its item, so a diagonal move from the
	   link to a far card, which crosses the bar beside the item, doesn't lose it. The panel being opened
	   sits above one still fading out. */
	@media (hover: hover) {
		.nav li:is(:hover, .is-hover) > .sub-menu { display: grid; opacity: 1; transform: none; }
		@starting-style { .nav li:is(:hover, .is-hover) > .sub-menu { opacity: 0; transform: translateY(-4px); } }
		.nav li:is(:hover, .is-hover, .is-open) > .sub-menu { z-index: 1; }
	}
	.nav__list > li > .nav__more {
		position: relative; z-index: 1;
		display: grid; place-items: center; align-self: center;
		width: 24px; height: 24px; margin: 0 6px 0 -5px; border-radius: 50%;
		color: var(--ink-2);
	}
	/* On touch screens the chevron is the only way to open a panel: a 44px-tall hit area around it,
	   stopping short of the link text (a tap on "Femme" itself still opens the page). */
	@media (any-pointer: coarse) {
		.nav__list > li > .nav__more::before { content: ""; position: absolute; inset: -10px -6px; }
	}
	.nav__more .icon { transition: transform .2s var(--ease); }
	.nav__more:hover { background: rgba(20, 15, 15, .06); }
	.nav__list > li.is-open > .nav__more .icon { transform: rotate(180deg); }
	.nav .sub-menu a { display: inline-block; padding: 6px 0; font-size: 16px; line-height: 1.4; }
	.nav .sub-menu a:hover { text-decoration: underline; text-underline-offset: 3px; }
}

/* Search panel */
.search-panel {
	position: relative;
	margin-top: 8px;
	pointer-events: auto;
}
.search-panel__form {
	display: flex; align-items: center; gap: 12px;
	height: 56px; padding: 0 8px 0 20px;
	background: var(--white);
	border-radius: var(--radius);
	box-shadow: 0 16px 40px rgba(20, 15, 15, .12);
}
.search-panel__form input {
	flex: 1; min-width: 0; height: 100%;
	border: 0; outline: 0; background: transparent;
	font-size: 18px; letter-spacing: -0.01em;
}
.search-panel__form input::-webkit-search-cancel-button { display: none; }
.search-panel__close { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 999px; }
.search-panel__close:hover { background: var(--soft); }
/* Submit (header panel + search-inline): an arrow on phones, "Rechercher" from 768 px. */
.search-submit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none; }
.search-submit .icon { flex: none; width: 18px; height: 18px; }
.search-panel__submit {
	width: 40px; height: 40px; margin-right: -4px; border-radius: 999px;
	background: var(--ink); color: var(--white); font-size: 14px; font-weight: 500;
	transition: background-color .2s var(--ease);
}
.search-panel__submit:hover { background: #3a3535; }
@media (max-width: 767px) {
	.search-submit__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
	.search-inline .btn.search-submit { width: 44px; padding: 0; }
}
@media (min-width: 768px) {
	.search-submit .icon-arrow-r { display: none; }
	.search-panel__submit { width: auto; padding: 0 20px; }
}

/* ---------- Drawers ---------- */
.drawer { position: fixed; inset: 0; z-index: 100; }
.drawer__backdrop {
	position: absolute; inset: 0; background: rgba(20, 15, 15, .4);
	opacity: 0; transition: opacity .3s var(--ease);
}
.drawer__panel {
	position: absolute; top: 0; bottom: 0;
	display: flex; flex-direction: column;
	width: min(420px, 100%);
	background: var(--white);
	transition: transform .35s var(--ease);
	overflow: hidden;
}
.drawer--left .drawer__panel { left: 0; transform: translateX(-100%); }
.drawer--right .drawer__panel { right: 0; transform: translateX(100%); }
.drawer.is-open .drawer__backdrop { opacity: 1; }
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head {
	display: flex; align-items: center; justify-content: space-between;
	min-height: 64px; padding: 8px 12px 8px 20px;
	border-bottom: 1px solid var(--line);
}
.drawer__head .brand { justify-self: start; }
.drawer__title { font-size: 20px; letter-spacing: -0.02em; font-weight: 400; }
.drawer__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 8px 20px 24px; }
.drawer__foot { padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }

.drawer-nav { flex: 1; overflow-y: auto; padding: 8px 0; }
.drawer-nav .nav__list > li { border-bottom: 1px solid var(--line); }
.drawer-nav .nav__list > li > a {
	display: flex; align-items: center; justify-content: space-between;
	padding: 18px 20px; font-size: 22px; letter-spacing: -0.03em;
}
.drawer-nav .sub-menu { padding: 0 20px 16px; }
.drawer-nav .sub-menu a { display: block; padding: 8px 0; font-size: 16px; color: var(--ink-2); }
.drawer-links { padding: 16px 20px calc(24px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.drawer-links a { display: flex; align-items: center; gap: 12px; padding: 10px 0; font-size: 15px; font-weight: 500; }

/* ---------- Layout helpers ---------- */
.section { padding: 64px var(--gutter) 72px; }
.section--carousel { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); }
.section--carousel .section-head { padding: 0 calc(var(--gutter) / 2); }
@media (min-width: 1024px) {
	.section { padding: 104px var(--gutter) 112px; }
	.section--carousel { padding-left: 20px; padding-right: 20px; }
	.section--carousel .section-head { padding: 0; }
}
.section-head {
	display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap;
	margin-bottom: 28px;
}
.section-head__actions { flex-shrink: 0; padding-bottom: 6px; }
@media (min-width: 1024px) {
	.section-head { margin-bottom: 46px; }
	.section-head__actions { padding-bottom: 14px; }
}
@media (max-width: 767px) {
	.section-head__actions .btn { min-height: 36px; padding: 0 16px; }
}

/* ---------- Hero ---------- */
.hero {
	position: relative;
	height: min(calc(100svh - var(--announce-h)), 760px);
	min-height: 520px;
	color: var(--white);
	background: #8d8681;
	overflow: hidden;
}
@media (min-width: 1024px) {
	.hero { height: clamp(600px, calc(100svh - var(--announce-h)), 868px); }
}
.hero__media { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr; }
.hero__img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.hero__media > :nth-child(n+2) { display: none; }
@media (min-width: 768px) {
	.hero__media--2 { grid-template-columns: repeat(2, 1fr); }
	.hero__media--3 { grid-template-columns: repeat(3, 1fr); }
	.hero__media > :nth-child(n+2) { display: block; }
}
.hero::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(to top, rgba(20, 15, 15, .55) 0%, rgba(20, 15, 15, .18) 38%, rgba(20, 15, 15, 0) 60%);
}
.hero__content {
	position: absolute; z-index: 1;
	left: var(--gutter); right: var(--gutter); bottom: 32px;
	max-width: 900px;
}
.hero__subtitle { margin-top: 12px; font-size: 18px; line-height: 1.3; letter-spacing: -0.02em; opacity: .92; }
.hero .btn { margin-top: 24px; }
@media (min-width: 1024px) {
	.hero__content { bottom: 40px; }
	.hero__subtitle { margin-top: 18px; font-size: 28px; letter-spacing: -0.025em; }
	.hero .btn { margin-top: 48px; }
}

/* ---------- Carousel ---------- */
.carousel { position: relative; }
.carousel__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 8px) / 1.6);
	gap: 8px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding: 0 calc(var(--gutter) / 2);
	scrollbar-width: none;
	overscroll-behavior-x: contain;
	padding: 0 calc(var(--gutter) / 2);
	margin: 0 calc(var(--gutter) / -2);
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > * { scroll-snap-align: start; }
/* iOS Safari: a sideways scroller must be the stacking context of its positioned children (cards with
   badges, hearts, quick-view buttons), or a swipe that starts on a card does not scroll, only one that
   starts in a gap does (Asala, 2026-10-31). Every horizontal scroller joins this list (cozy.css adds the
   phone menu's thumbnail row). Nothing inside a track can overlay content outside it. */
.carousel__track, .tiles, .pdp__slides, .viewer__track, .univers-tabs, .quick__media, .sg-ruler__track, .sg-table-wrap, .woocommerce-MyAccount-navigation ul, .plp-pills__list, .plp__chips { position: relative; z-index: 0; }
@media (min-width: 768px) {
	.carousel__track { grid-auto-columns: calc((100% - 2 * 16px) / 2.6); gap: 16px; }
}
@media (min-width: 1024px) {
	.carousel__track { grid-auto-columns: calc((100% - 4 * 20px) / 4.35); gap: 20px; padding: 0; margin: 0; scroll-padding: 0; }
}
.carousel__nav {
	display: none;
	width: max-content;
	margin: 48px 0 0 auto;
	border: 1px solid var(--ink);
	border-radius: 999px;
	padding: 0 6px;
}
@media (min-width: 1024px) { .carousel__nav { display: flex; } }
.carousel__btn { display: grid; place-items: center; width: 32px; height: 40px; }
.carousel__btn:disabled { opacity: .3; cursor: default; }

/* ---------- Product card ---------- */
.products { display: grid; }
.product-card { position: relative; display: flex; flex-direction: column; min-width: 0; }
.product-card__media {
	position: relative; display: block;
	aspect-ratio: 5 / 6;
	background: var(--card);
	overflow: hidden;
}
.product-card__img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; object-position: center 20%;
	transition: opacity .35s var(--ease);
}
.product-card__img--alt { opacity: 0; }
@media (hover: hover) {
	.product-card__visual:hover .product-card__img--alt { opacity: 1; }
}
/* Touch screens never see the worn photo: display:none keeps the lazy image from downloading at all. */
@media (hover: none) { .product-card__img--alt { display: none; } }
.product-card__media.is-swapped .product-card__img--alt { opacity: 0; }
/* Sold out: a faded photo and greyed text (in stock pieces come first in every listing, inc/woocommerce.php). */
.product-card.outofstock .product-card__img { filter: grayscale(.85) contrast(.92); opacity: .78; }
.product-card.outofstock .product-card__img--alt { display: none; }
.product-card.outofstock :is(.product-card__title, .product-card__price) { color: var(--muted); }
.badge {
	position: absolute; left: 12px; top: 12px; z-index: 1;
	padding: 4px 10px; border-radius: 999px;
	background: var(--white); color: var(--ink);
	font-size: 12px; font-weight: 500;
}
.badge--muted { color: var(--muted); }

.product-card__swatches { display: flex; align-items: center; gap: 6px; margin: 12px 4px 0; }
.swatch-dot {
	display: block; width: 24px; height: 24px; border-radius: 50%;
	overflow: hidden; background: var(--card);
	box-shadow: 0 0 0 1px var(--line);
	transition: box-shadow .15s;
}
.swatch-dot img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; transform: scale(2.4); }
a.swatch-dot:hover, .swatch-dot.is-active { box-shadow: 0 0 0 1px var(--white), 0 0 0 2px var(--ink); }
/* True-colour dot (products without per-colour photos, colour filters): a hairline keeps white and grège visible. */
.swatch-dot--hex { background: var(--dot, var(--card)); box-shadow: inset 0 0 0 1px rgba(20, 15, 15, .16); }
a.swatch-dot--hex:hover, .swatch-dot--hex.is-active { box-shadow: inset 0 0 0 1px rgba(20, 15, 15, .16), 0 0 0 1px var(--white), 0 0 0 2px var(--ink); }
.product-card__more { font-size: 12px; color: var(--muted); }
.product-card__swatches--empty { height: 24px; }
/* Narrow cards (2 columns on small phones): smaller dots so five dots and "+1" stay inside the card. */
.product-card__swatches { container: dots / inline-size; }
@container dots (max-width: 175px) {
	.product-card__swatches > li { flex: none; }
	.product-card__swatches .swatch-dot { width: 22px; height: 22px; }
}
@container card (max-width: 185px) { .product-card__swatches { gap: 4px; } }

.product-card__info {
	display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
	margin-top: 12px; padding: 0 4px;
}
.product-card__title { font-size: 14px; line-height: 1.4; font-weight: 400; letter-spacing: -0.005em; }
.product-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.product-card__swatches, .product-card__swatches a { position: relative; z-index: 1; }
.product-card__price { flex-shrink: 0; font-size: 13px; line-height: 1.55; white-space: nowrap; }
.product-card__price del { color: var(--muted); margin-right: 4px; }
.product-card__price ins { text-decoration: none; color: var(--sale); }
.product-card__meta { margin-top: 2px; padding: 0 4px; font-size: 12px; color: var(--muted); }
.product-card__ship { display: flex; align-items: center; gap: 5px; margin: 4px 0 0; padding: 0 4px; font-size: 12.5px; font-weight: 500; color: var(--sale); }
.product-card__ship svg { flex: none; }
/* Name and price side by side only on cards wide enough for both (decided by the card's own width,
   so a carousel, a 3-column grid at 1024 px and a 1-column phone grid each get the right layout). */
.product-card__price .woocommerce-Price-amount + .woocommerce-Price-amount { margin-left: 2px; }
.product-card { container: card / inline-size; }
@container card (max-width: 279px) {
	.product-card .product-card__info { flex-direction: column; gap: 2px; } /* (0,2,0): beats the ≥1024 px gap below. */
}
.price-from { margin-right: 1px; font-size: .92em; color: var(--muted); }
@media (min-width: 1024px) {
	.product-card__swatches { margin: 14px 20px 0; }
	.product-card__info { margin-top: 14px; padding: 0 20px; gap: 20px; }
	.product-card__title { font-size: 16px; line-height: 1.45; }
	.product-card__price { font-size: 14px; line-height: 1.6; }
	.product-card__meta { padding: 0 20px; font-size: 13px; }
}

/* ---------- Tiles (shop by colour) ---------- */
.tiles {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 42%;
	overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
	margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter);
	scroll-padding: 0 var(--gutter);
}
.tiles::-webkit-scrollbar { display: none; }
.tile { scroll-snap-align: start; }
.tile a { display: block; }
.tile__media { display: block; aspect-ratio: 5 / 6; overflow: hidden; background: var(--card); }
.tile__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; transition: transform .6s var(--ease); }
.tile a:hover .tile__media img { transform: scale(1.03); }
.tile__label { display: block; margin-top: 16px; text-align: center; font-size: 15px; font-weight: 500; letter-spacing: -0.005em; }
@media (min-width: 768px) {
	.tiles { grid-auto-columns: 30%; }
}
@media (min-width: 1024px) {
	.tiles { grid-auto-flow: row; grid-template-columns: repeat(6, 1fr); overflow: visible; margin: 0; padding: 0; }
	.tiles--3 { grid-template-columns: repeat(3, 1fr); }
	.tiles--4 { grid-template-columns: repeat(4, 1fr); }
	.tiles--5 { grid-template-columns: repeat(5, 1fr); }
	.tile__label { margin-top: 18px; font-size: 16px; }
}

/* ---------- Banner ---------- */
.banner {
	position: relative;
	height: min(85svh, 680px);
	color: var(--white);
	background: #6f6965;
	overflow: hidden;
	display: flex; align-items: flex-end; justify-content: center;
	text-align: center;
}
.banner__media { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr; }
.banner__media > :nth-child(n+2) { display: none; }
.banner__img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.banner::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(20, 15, 15, .62) 0%, rgba(20, 15, 15, .25) 45%, rgba(20, 15, 15, 0) 70%);
}
.banner__content { position: relative; z-index: 1; padding: 0 var(--gutter) 48px; max-width: 1300px; }
.banner__text { margin: 12px auto 0; max-width: 60ch; font-size: 17px; line-height: 1.35; letter-spacing: -0.015em; }
.banner .btn-row { margin-top: 28px; }
@media (min-width: 768px) {
	.banner__media { grid-template-columns: 1fr 1fr; }
	.banner__media > :nth-child(n+2) { display: block; }
}
@media (min-width: 1024px) {
	.banner { height: 900px; max-height: 100svh; min-height: 640px; }
	.banner__content { padding-bottom: 128px; }
	.banner__text { margin-top: 16px; font-size: 24px; max-width: none; }
	.banner .btn-row { margin-top: 40px; }
}

/* ---------- Stories ---------- */
.stories { display: grid; grid-template-columns: 1fr; gap: 40px; padding-bottom: 56px; }
.story__media { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--card); }
.story__media img { width: 100%; height: 100%; object-fit: cover; }
.story__body { padding: 20px var(--gutter) 0; }
.story__title { font-size: 24px; line-height: 1.25; letter-spacing: -0.025em; }
.story__text { margin-top: 8px; font-size: 16px; line-height: 1.45; color: var(--ink-2); max-width: 46ch; }
.story .link-underline { margin-top: 24px; }
@media (min-width: 768px) {
	.stories { grid-template-columns: repeat(3, 1fr); gap: 0; }
	.story__body { padding: 32px 16px 0; }
}
@media (min-width: 1024px) {
	.stories { padding-bottom: 56px; }
	.story__text { margin-top: 12px; font-size: 18px; line-height: 1.4; }
	.story .link-underline { margin-top: 36px; }
}

/* ---------- Generic pages ---------- */
.page-wrap { padding: 32px var(--gutter) 80px; max-width: 880px; margin: 0 auto; }
.page-wrap--wide { max-width: 1360px; }
.page-wrap--center { text-align: center; min-height: 50vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; }
.page-header { margin-bottom: 32px; }
@media (min-width: 1024px) {
	.page-wrap { padding-top: 56px; }
	.page-header { margin-bottom: 48px; }
}
.entry-content { font-size: 16px; line-height: 1.6; }
.entry-content > * + * { margin-top: 1em; }
.entry-content h2 { font-size: 28px; letter-spacing: -0.03em; line-height: 1.2; margin-top: 1.6em; }
.entry-content h3 { font-size: 20px; letter-spacing: -0.02em; line-height: 1.3; margin-top: 1.4em; }
.entry-content a { text-decoration: underline; text-underline-offset: 2px; }
.entry-content a.link-underline { text-decoration: none; } /* it draws its own underline */
.entry-content ul { list-style: disc; padding-left: 1.2em; }
.entry-content ol { list-style: decimal; padding-left: 1.2em; }
.post-list { display: grid; gap: 32px; }
.post-item__title { font-size: 24px; letter-spacing: -0.02em; }

/* ---------- Breadcrumbs ---------- */
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--muted); }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }

/* ---------- Product listing ---------- */
.plp { padding: 24px var(--gutter) 80px; }
.plp__header { margin-bottom: 20px; }
.plp__title { margin-top: 12px; }
.plp__count { font-size: .45em; letter-spacing: 0; color: var(--muted); vertical-align: .9em; margin-left: 4px; }
.plp__desc { margin-top: 12px; max-width: 70ch; color: var(--ink-2); }
.plp__toolbar {
	position: sticky; top: calc(var(--header-h) + 8px); z-index: 20;
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	margin: 0 calc(-1 * var(--gutter)) 16px; padding: 8px var(--gutter);
	background: rgba(255, 255, 255, .95);
}
.admin-bar .plp__toolbar { top: calc(var(--header-h) + 8px + 32px); }
.plp__result-count { display: none; font-size: 14px; color: var(--muted); }
.plp__filter-btn { flex: none; }
.plp__toolbar .woocommerce-ordering { min-width: 0; margin-left: auto; }
.woocommerce .plp__toolbar .woocommerce-ordering select.orderby { max-width: 100%; text-overflow: ellipsis; }
.pill-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--ink); color: var(--white); font-size: 11px; }
.woocommerce .woocommerce-ordering select.orderby {
	width: auto; min-height: 0;
	appearance: none; -webkit-appearance: none;
	height: 36px; padding: 0 36px 0 16px;
	border: 1px solid var(--line-strong); border-radius: 999px;
	background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23140f0f' stroke-width='1.5' viewBox='0 0 24 24'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
	font-size: 14px; font-weight: 500; cursor: pointer;
}
.plp__grid .products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 8px; }
.plp__empty { padding: 64px 0; display: grid; justify-items: start; gap: 24px; }
@media (min-width: 768px) {
	.plp__grid .products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 16px; }
}
@media (min-width: 1600px) {
	.plp__grid .products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Nothing to list and no filter on: no sidebar column, no toolbar (archive-product.php). */
@media (min-width: 1024px) { .plp--nofilters .plp__layout { display: block; } }
@media (min-width: 1024px) {
	.plp { padding-top: 32px; }
	.plp__header { margin-bottom: 32px; }
	.plp__toolbar { position: static; margin: 0 0 24px 304px; padding: 0; background: none; }
	.plp__filter-btn { display: none; }
	.plp__result-count { display: block; }
	.plp__layout { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 40px; align-items: start; }
	.plp__grid .products { gap: 48px 20px; }
	.plp__grid .product-card__swatches { margin-left: 0; margin-right: 0; }
	.plp__grid .product-card__info, .plp__grid .product-card__meta { padding: 0; }
}

/* Filters: drawer on mobile/tablet, static sidebar on desktop */
.filters__group { border-bottom: 1px solid var(--line); }
.filters__group summary {
	display: flex; align-items: center; justify-content: space-between;
	padding: 18px 0; list-style: none; cursor: pointer;
	font-size: 16px; font-weight: 500;
}
.filters__group summary::-webkit-details-marker { display: none; }
.filters__group[open] summary .icon { transform: rotate(180deg); }
.filters__group summary .icon { transition: transform .2s var(--ease); }
.filters__cats { padding-bottom: 16px; display: grid; gap: 2px; }
.filters__cats a { display: block; padding: 6px 0; font-size: 15px; }
.filters__cats a[aria-current] { font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.filters__options { padding-bottom: 20px; display: grid; gap: 4px; }
.filter-opt { display: flex; align-items: center; gap: 12px; padding: 6px 0; font-size: 15px; }
.filter-opt .swatch-dot { width: 28px; height: 28px; }
.filter-opt.is-active { font-weight: 600; }
.filter-opt.is-active .swatch-dot { box-shadow: 0 0 0 2px var(--white), 0 0 0 3px var(--ink); }
.filters__options--pa_taille { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.filters__options--pa_taille .filter-opt {
	justify-content: center; min-height: 44px; padding: 6px 8px;
	border: 1px solid var(--line-strong); border-radius: 4px; font-size: 13px; text-align: center; line-height: 1.2;
}
.filters__options--pa_taille .filter-opt:hover { border-color: var(--ink); }
.filters__options--pa_taille .filter-opt.is-active { background: var(--ink); color: var(--white); border-color: var(--ink); font-weight: 500; }
.filters__active { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.chip {
	display: inline-flex; align-items: center; gap: 6px;
	height: 32px; padding: 0 10px 0 14px; border-radius: 999px;
	background: var(--card); font-size: 13px; font-weight: 500;
}
.chip:hover { background: var(--line); }

@media (min-width: 1024px) {
	.drawer--static { position: sticky; inset: auto; top: calc(var(--header-h) + 24px); z-index: auto; display: block !important; }
	.drawer--static .drawer__backdrop, .drawer--static .drawer__head, .drawer--static .drawer__foot { display: none; }
	.drawer--static .drawer__panel { position: static; width: auto; transform: none; overflow: visible; background: none; }
	.drawer--static .drawer__body { padding: 0; overflow: visible; }
	.drawer--static .filters__group:first-child summary, .drawer--static .filters__active + .filters__group summary { padding-top: 0; }
}
@media (max-width: 1023px) {
	.drawer--static:not(.is-open):not(.is-closing) { display: none; }
}

/* Pagination */
.woocommerce-pagination { margin-top: 56px; }
.woocommerce-pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.woocommerce-pagination .page-numbers {
	display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 12px;
	border-radius: 999px; font-size: 14px; font-weight: 500;
}
.woocommerce-pagination a.page-numbers:hover { background: var(--card); }
.woocommerce-pagination .current { background: var(--ink); color: var(--white); }

/* ---------- Product page ---------- */
.pdp { display: grid; grid-template-columns: minmax(0, 1fr); }
.pdp__gallery { position: relative; }
.pdp__thumbs { display: none; }
.pdp__stage { position: relative; }
.pdp__slides {
	display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
	overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
	overscroll-behavior-x: contain;
	background: var(--card);
}
.pdp__slides::-webkit-scrollbar { display: none; }
.pdp__slide { scroll-snap-align: start; aspect-ratio: 3 / 4; }
.pdp__slide img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
/* Position bar, like a scrollbar (theme.js sets --w = visible share, --p = scroll progress).
   White track with a hairline and an ink thumb: readable on the light covers and on dark photos. */
.pdp__progress {
	position: absolute; left: 16px; right: 16px; bottom: 16px; height: 3px;
	background: rgba(255, 255, 255, .72); border-radius: 3px; overflow: hidden;
	box-shadow: 0 0 0 .5px rgba(20, 15, 15, .16);
}
.pdp__progress span {
	display: block; height: 100%; width: calc(var(--w, .25) * 100%);
	border-radius: inherit; background: var(--ink);
	transform: translateX(calc(var(--p, 0) * (1 / var(--w, .25) - 1) * 100%));
}
.pdp__count { display: none; } /* "2 / 7" pill, used by Cozy pop on phones */
/* Opens the full-screen viewer (assets/js/gallery.js); a tap on the photo does the same. */
.pdp__zoom {
	position: absolute; top: 16px; right: 16px; z-index: 1;
	display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px;
	background: rgba(255, 255, 255, .88); color: var(--ink);
	box-shadow: 0 1px 3px rgba(20, 15, 15, .14);
	transition: background-color .2s, transform .15s var(--ease);
}
.pdp__zoom:hover { background: var(--white); }
.pdp__zoom:active { transform: scale(.94); }
.pdp__rating { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 14px; color: var(--ink-2); }
.pdp__rating strong { font-weight: 600; color: var(--ink); }
.pdp__rating-count { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.pdp__rating:hover .pdp__rating-count { text-decoration-color: currentColor; }
#reviews { scroll-margin-top: calc(var(--header-h) + 16px); }
.pdp__arrow {
	position: absolute; top: 50%; transform: translateY(-50%);
	display: none; place-items: center; width: 44px; height: 44px; border-radius: 999px;
	background: rgba(255, 255, 255, .85);
	transition: background-color .2s, opacity .2s, visibility .2s;
}
.pdp__arrow:hover { background: var(--white); }
.pdp__arrow--prev { left: 16px; }
.pdp__arrow--next { right: 16px; }
/* At the first / last photo the arrow that would do nothing fades out (theme.js sets disabled from the
   scroll position; the template starts with "previous" disabled). */
.pdp__arrow:disabled { opacity: 0; visibility: hidden; pointer-events: none; }

.pdp__info { padding: 20px var(--gutter) 48px; }
.pdp__info .crumbs { margin-bottom: 12px; }
.pdp__title { font-size: 36px; line-height: 1.05; }
.pdp__price { margin-top: 8px; font-size: 18px; letter-spacing: -0.01em; }
.pdp__price del { color: var(--muted); margin-right: 6px; }
.pdp__price ins { text-decoration: none; color: var(--sale); }
.pdp__badge { margin-top: 10px; line-height: 1; } /* Épuisé / −X % / Nouveau under the price (inc/woocommerce.php). */
.pdp__badge .badge { position: static; display: inline-block; box-shadow: inset 0 0 0 1px var(--line-strong); }
.pdp__short { margin-top: 16px; color: var(--ink-2); font-size: 15px; }
.pdp__buy { margin-top: 24px; }

@media (min-width: 768px) {
	.pdp__slides { grid-auto-columns: 50%; }
	.pdp__slide { aspect-ratio: 3 / 4; }
	.pdp__arrow { display: grid; }
}
/* Every photo already in view (theme.js sets .is-static): the arrows and the progress bar would do nothing.
   Tablets with exactly two photos are caught in CSS too, so the arrows never flash before the script runs. */
.pdp__gallery.is-static :is(.pdp__arrow, .pdp__progress) { display: none; }
@media (min-width: 768px) and (max-width: 1023px) {
	.pdp__stage:has(> .pdp__slides > .pdp__slide:nth-child(2):last-child) :is(.pdp__arrow, .pdp__progress) { display: none; }
}
@media (min-width: 1024px) {
	/* The whole 3:4 photo fits the screen under the floating header (and the announcement bar) and
	   stays in view (sticky) while the longer purchase column scrolls past. When both columns reach
	   their width (wide screens) they are centred. The sizes live on the body so the sections under the
	   product can follow the same width (below). */
	:is(.single-product, .pdp) {
		--pdp-vh: 100vh; --pdp-gap: 40px; --pdp-info: 376px;
		--pdp-stage: calc((var(--pdp-vh) - var(--header-h) - 64px) * .75);
		--pdp-w: calc(var(--pdp-stage) + 88px + var(--pdp-gap) + 640px); /* both columns at full size */
	}
	.pdp {
		grid-template-columns: min(calc(var(--pdp-stage) + 88px), calc(100% - var(--pdp-info) - var(--pdp-gap))) minmax(var(--pdp-info), 640px);
		justify-content: center; gap: var(--pdp-gap); padding: 24px var(--gutter) 0;
	}
	/* Once the product block is centred (wide or short screens, e.g. 1600 px and up at 900 px tall, where
	   its left edge is (100% - --pdp-w) / 2), the reviews and "Vous aimerez aussi" move their content in
	   by the same amount, so the page keeps one left edge under the header; their top lines stay full width.
	   Before that, each keeps its own side padding: reviews 40 px; the classic carousel 20 px, i.e. 20 px
	   outside the product's edge, kept here (Cozy pop aligns it on the gutter, cozy.css 4d). */
	.single-product .reviews { padding-inline: max(40px, (100% - var(--pdp-w)) / 2); }
	.single-product .section--related { padding-inline: max(20px, (100% - var(--pdp-w)) / 2 - 20px); }
	.pdp__gallery {
		display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px;
		align-self: start; position: sticky; top: calc(var(--header-h) + 24px);
	}
	/* Thumbs: exactly as tall as the photo (size containment keeps them out of the row height); more scroll. */
	.pdp__thumbs {
		display: grid; align-content: start; gap: 8px; margin: -4px; padding: 4px;
		contain: size; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain;
	}
	.pdp__thumbs::-webkit-scrollbar { display: none; }
	.pdp__thumbs.is-more-down { --fade-b: 48px; }
	.pdp__thumbs.is-more-up { --fade-t: 48px; }
	.pdp__thumbs:is(.is-more-down, .is-more-up) {
		-webkit-mask-image: linear-gradient(transparent, #000 var(--fade-t, 0px), #000 calc(100% - var(--fade-b, 0px)), transparent);
		mask-image: linear-gradient(transparent, #000 var(--fade-t, 0px), #000 calc(100% - var(--fade-b, 0px)), transparent);
	}
	.pdp__thumb { display: block; width: 72px; aspect-ratio: 3 / 4; overflow: hidden; background: var(--card); opacity: .6; transition: opacity .2s; }
	.pdp__thumb img { width: 100%; height: 100%; object-fit: cover; }
	.pdp__thumb:hover { opacity: 1; }
	.pdp__thumb[aria-current="true"] { opacity: 1; outline: 1px solid var(--ink); outline-offset: 2px; }
	.pdp__slides { grid-auto-columns: 100%; border-radius: 0; }
	.pdp__progress { display: none; }
	.pdp__info { padding: 0; }
	.pdp__sticky { position: sticky; top: calc(var(--header-h) + 24px); padding-bottom: 64px; }
	.pdp__title { font-size: clamp(44px, 3.6vw, 56px); }
	.pdp__price { font-size: 20px; margin-top: 12px; }
}
@supports (height: 100svh) {
	@media (min-width: 1024px) { :is(.single-product, .pdp) { --pdp-vh: 100svh; } }
}
@media (min-width: 1440px) {
	:is(.single-product, .pdp) { --pdp-gap: 64px; --pdp-info: 400px; }
}

/* Variations form → swatches/size buttons (theme.js builds them from the selects) */
.variations_form .variations, .variations_form .variations tbody, .variations_form .variations tr { display: block; }
.variations_form .variations { border: 0; border-collapse: collapse; width: 100%; }
.variations_form .variations tr + tr { margin-top: 24px; }
.variations_form .variations th, .variations_form .variations td { display: block; padding: 0; text-align: left; }
.variations_form .variations th { margin-bottom: 12px; font-size: 14px; font-weight: 500; }
.variations_form .variations th label { font-weight: 500; }
.variations_form .variations .opt-current { font-weight: 400; color: var(--ink-2); }
.variations_form select.is-enhanced { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt {
	position: relative;
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 64px; min-height: 44px; padding: 6px 12px;
	border: 1px solid var(--line-strong); border-radius: 4px;
	background: var(--white);
	font-size: 14px; line-height: 1.2;
	transition: border-color .15s, background-color .15s, color .15s;
}
.opt:hover { border-color: var(--ink); }
.opt[aria-checked="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.opt.is-unavailable { color: var(--muted); background: linear-gradient(to top left, transparent calc(50% - .5px), var(--line-strong) 50%, transparent calc(50% + .5px)); }
.opts--colour { gap: 10px; }
.opt--colour {
	min-width: 0; width: 48px; height: 48px; padding: 0;
	border-radius: 50%; border: 0; overflow: hidden;
	box-shadow: 0 0 0 1px var(--line);
}
.opt--colour img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; transform: scale(2); }
.opt--colour:hover { box-shadow: 0 0 0 1px var(--white), 0 0 0 2px var(--line-strong); }
.opt--colour[aria-checked="true"] { background: none; box-shadow: 0 0 0 2px var(--white), 0 0 0 3px var(--ink); }
.opt--colour.is-unavailable { opacity: .35; background: none; }
.opt--colour.no-img { width: auto; min-width: 64px; border-radius: 4px; padding: 6px 12px; border: 1px solid var(--line-strong); box-shadow: none; }
.opt--colour.no-img[aria-checked="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); box-shadow: none; } /* Selected colour shown as text: was white on white. */
/* True colour (inc/pdp-buy.php → theme.js): a dot on the photo swatch, or dot + name without a photo per colour. */
.opt--colour.has-hex:not(.no-img)::before {
	content: ""; position: absolute; right: 7px; bottom: 7px; z-index: 1;
	width: 12px; height: 12px; border-radius: 50%;
	background: var(--c); box-shadow: 0 0 0 2px var(--white);
}
.opt--colour.no-img { gap: 8px; }
.opt__dot { flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(20, 15, 15, .2); }
@media (max-width: 767px) {
	/* Colour names on phones: two even columns ("Vert Militaire" never alone on a third row). */
	.opts--colour:has(.no-img:nth-child(4)) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.opts--colour:has(.no-img:nth-child(4)) .opt { justify-content: flex-start; min-width: 0; padding-inline: 14px; white-space: nowrap; }
}
.opt[aria-checked="true"] .opt__dot { box-shadow: 0 0 0 2px var(--white); }
/* Size buttons as an even grid (theme.js sets --cols from the number and length of the labels, as on Six Five). */
.opts--grid { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); }
.opts--grid .opt { min-width: 0; padding-inline: 6px; white-space: nowrap; }
@media (min-width: 768px) { .opts--grid { grid-template-columns: repeat(var(--cols, 4), minmax(0, 104px)); } }
/* Reserve the option rows before theme.js swaps the selects for buttons (layout shift). */
.pdp .variations_form .variations td.value { min-height: 48px; }
/* Size row with the finder: buttons + the "Trouver ma taille" line (size-guide.js); the link waits off-flow
   until size-guide.js moves it next to the "Taille" label. */
.pdp .variations_form:has([data-size-guide-link]) tr:has(select[name="attribute_pa_taille"]) td.value { min-height: 76px; }
.pdp .variations_form > .size-guide-link { position: absolute; visibility: hidden; }

.single_variation_wrap { margin-top: 24px; }
.woocommerce-variation-price { display: none; }
.woocommerce-variation-availability { font-size: 14px; color: var(--muted); margin-bottom: 12px; }
.woocommerce-variation-availability .out-of-stock { color: var(--sale); }
.pdp .quantity, .pdp .added_to_cart, .quick .quantity, .quick .added_to_cart { display: none !important; }
/* Buy area order (owner, 2026-11-10): with the express form, the add-to-cart row (quantity stepper and button on
   one line) comes after it and « ou ». The DOM keeps WooCommerce's order (theme.js and WooCommerce need the button
   inside form.cart), so form.cart and .single_variation_wrap lend their children to a flex column. */
.pdp__buy:has(.fc-wrap) { display: flex; flex-direction: column; }
.pdp__buy:has(.fc-wrap) :is(form.cart, .single_variation_wrap) { display: contents; }
.pdp__buy:has(.fc-wrap) .woocommerce-variation-add-to-cart { order: 1; display: flex; flex-wrap: wrap; gap: 10px; }
.pdp__buy:has(.fc-wrap) .woocommerce-variation-add-to-cart button.single_add_to_cart_button { flex: 1; width: auto; min-width: 0; }
.pdp__buy:has(.fc-wrap) .woocommerce-variation-add-to-cart .form-hint { flex-basis: 100%; margin-top: 0; }
.pdp__buy:has(.fc-wrap) .fc-or { margin: 18px 0 14px; }
.pdp__buy:has(.fc-wrap) .quantity {
	display: flex !important; flex: none; width: 128px; min-height: 52px;
	border: 1px solid var(--line-strong); border-radius: 999px; background: var(--white); overflow: hidden;
}
.pdp__buy .quantity input.qty {
	flex: 1; min-width: 0; height: auto; margin: 0; padding: 0; border: 0; background: none; text-align: center;
	font: 500 16px var(--font); color: var(--ink); -moz-appearance: textfield; appearance: textfield;
}
.pdp__buy .quantity input.qty::-webkit-inner-spin-button, .pdp__buy .quantity input.qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.qty-step { display: flex; align-items: center; justify-content: center; flex: none; width: 40px; color: var(--ink); transition: background-color .15s; }
.qty-step:hover:not(:disabled) { background: var(--soft); }
.qty-step:disabled { color: var(--line-strong); cursor: default; }
.pdp .cart, .quick .cart { display: block; }
.pdp button.single_add_to_cart_button, .quick button.single_add_to_cart_button { width: 100%; min-height: 56px; font-size: 16px; }
.variations_form .form-hint { margin-top: 10px; font-size: 13px; color: var(--sale); }
/* The buy bar scrolls the first row still to choose under the header: html's scroll-padding (header + 16px)
   + 8px = a 24px gap. Then the row shakes once (theme.js). */
.pdp .variations tr { scroll-margin-top: 8px; }
.variations_form .opts.is-shake { animation: piece-shake .45s; }
@media (prefers-reduced-motion: reduce) { .variations_form .opts.is-shake { animation: none; } }
.pdp .stock.out-of-stock { color: var(--sale); font-size: 14px; }

.pdp__perks { display: grid; gap: 12px; margin-top: 28px; padding: 20px 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.pdp__perks li { display: flex; gap: 12px; align-items: flex-start; }
.pdp__perks .icon { flex-shrink: 0; }

.accordion { border-top: 1px solid var(--line); }
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__item summary {
	display: flex; align-items: center; justify-content: space-between;
	padding: 20px 0; cursor: pointer; list-style: none;
	font-size: 16px; font-weight: 500;
}
.accordion__item summary::-webkit-details-marker { display: none; }
.accordion__item summary .icon { transition: transform .25s var(--ease); }
.accordion__item[open] summary .icon { transform: rotate(45deg); }
.accordion__body { padding-bottom: 24px; font-size: 15px; color: var(--ink-2); }
.accordion__body > * + * { margin-top: .8em; }
.accordion__body h3 { font-size: 16px; font-weight: 500; color: var(--ink); }
/* A description that opens with a heading: no .entry-content h3 top margin (22 px) under the summary. */
.pdp .accordion__body > :first-child { margin-top: 0; }
.spec { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; }
.spec dt { font-weight: 500; color: var(--ink); }

.section--related { border-top: 1px solid var(--line); margin-top: 32px; }
@media (min-width: 1024px) { .section--related { margin-top: 48px; padding-top: 80px; } }
/* Below the product: section titles stay under the product name (.pdp__title) in size. */
.section--related .display-2, .reviews__head .display-3 { font-size: clamp(30px, 3.4vw, 48px); line-height: 1.02; }

/* Full-screen photo viewer (inc/gallery.php shell, assets/js/gallery.js). */
.viewer { position: fixed; inset: 0; z-index: 130; background: var(--white); opacity: 0; transition: opacity .25s var(--ease); overscroll-behavior: contain; }
.viewer.is-open { opacity: 1; }
.viewer__track {
	position: relative; z-index: 0; /* iOS: keeps the swiped track under the buttons */
	display: grid; grid-auto-flow: column; grid-auto-columns: 100%; height: 100%; margin: 0; padding: 0; list-style: none;
	overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
}
.viewer__track::-webkit-scrollbar { display: none; }
.viewer__track.is-zoomed { overflow: hidden; }
.viewer__slide { position: relative; overflow: hidden; scroll-snap-align: center; scroll-snap-stop: always; }
.viewer__slide img {
	position: absolute; inset: 0; margin: auto; width: auto; height: auto;
	max-width: calc(100% - 32px); max-height: calc(100% - 144px);
	cursor: zoom-in; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-user-drag: none;
	transition: transform .3s var(--ease);
}
.viewer__slide img.is-zoomed { transform: scale(2.2); cursor: zoom-out; touch-action: none; }
.viewer__btn {
	position: absolute; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 999px;
	background: var(--white); color: var(--ink); box-shadow: 0 2px 10px rgba(20, 15, 15, .12);
	transition: background-color .2s, color .2s, opacity .2s, transform .15s var(--ease);
}
.viewer__btn:hover { background: var(--ink); color: var(--white); }
.viewer__btn:active { transform: scale(.94); }
.viewer__close { top: calc(16px + env(safe-area-inset-top)); right: var(--gutter); }
.viewer__count {
	position: absolute; z-index: 2; top: calc(26px + env(safe-area-inset-top)); left: var(--gutter);
	padding: 5px 12px; border-radius: 999px; background: var(--soft); font-size: 14px; font-variant-numeric: tabular-nums;
}
.viewer__arrow { top: 50%; display: none; margin-top: -24px; }
.viewer__arrow:active { transform: scale(.94); }
.viewer__arrow--prev { left: var(--gutter); }
.viewer__arrow--next { right: var(--gutter); }
.viewer__arrow[aria-disabled="true"] { opacity: .3; pointer-events: none; }
.viewer.is-single :is(.viewer__arrow, .viewer__count) { display: none; }
.viewer__hint {
	position: absolute; z-index: 2; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translate(-50%, 8px);
	padding: 8px 16px; border-radius: 999px; background: var(--ink); color: var(--white); font-size: 14px; white-space: nowrap;
	opacity: 0; pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.viewer__hint.is-shown { opacity: 1; transform: translate(-50%, 0); }
.viewer__hint--mouse { display: none; }
@media (hover: hover) and (pointer: fine) {
	.viewer__hint--touch { display: none; }
	.viewer__hint--mouse { display: inline; }
}
@media (min-width: 768px) {
	.viewer__arrow { display: grid; }
	.viewer__slide img { max-width: calc(100% - 192px); max-height: calc(100% - 160px); }
}
@media (prefers-reduced-motion: reduce) {
	.viewer, .viewer__slide img, .viewer__hint { transition: none; }
}

/* ---------- Mini cart ---------- */
.woocommerce-mini-cart { display: grid; }
.woocommerce-mini-cart-item {
	position: relative;
	display: grid; grid-template-columns: 88px 1fr; column-gap: 16px; align-items: start;
	padding: 20px 28px 20px 0; border-bottom: 1px solid var(--line);
	font-size: 14px;
}
.woocommerce-mini-cart-item > a:not(.remove) { display: contents; font-size: 15px; font-weight: 500; }
.woocommerce-mini-cart-item img { grid-row: 1 / span 4; width: 88px; aspect-ratio: 3 / 4; height: auto; object-fit: cover; background: var(--card); }
.woocommerce-mini-cart-item .variation { grid-column: 2; display: grid; grid-template-columns: max-content 1fr; gap: 0 6px; margin-top: 4px; color: var(--muted); font-size: 13px; }
.woocommerce-mini-cart-item .variation dd p { margin: 0; }
.woocommerce-mini-cart-item .quantity { grid-column: 2; margin-top: 8px; color: var(--ink-2); }
.woocommerce-mini-cart-item .remove {
	position: absolute; top: 18px; right: 0;
	display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
	font-size: 18px; line-height: 1; color: var(--muted);
}
.woocommerce-mini-cart-item .remove:hover { background: var(--card); color: var(--ink); }
.woocommerce-mini-cart__total { display: flex; justify-content: space-between; margin-top: 20px; font-size: 16px; }
.woocommerce-mini-cart__buttons { display: grid; gap: 10px; margin-top: 20px; }
.woocommerce-mini-cart__buttons a { min-height: 52px; font-size: 15px; }
.woocommerce-mini-cart__empty-message { padding: 40px 0; text-align: center; color: var(--muted); }

/* ---------- Notices ---------- */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message, .woocommerce-error, .woocommerce-info {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
	margin: 0 0 24px; padding: 14px 18px;
	border-radius: var(--radius); background: var(--soft);
	font-size: 14px; list-style: none;
}
.woocommerce-error { background: #fbeeee; color: #8a1020; }
/* Notices in page content (account pages): no bullet or indent from `.entry-content ul` (0,1,1). */
.entry-content :is(.woocommerce-error, .woocommerce-message, .woocommerce-info) { list-style: none; padding-left: 18px; }
/* WooCommerce focuses a new notice (tabindex -1) for screen readers: no browser ring around it (Cozy does the same). */
:is(.woocommerce-message, .woocommerce-info, .woocommerce-error):focus { outline: none; }
.woocommerce-message .button, .woocommerce-info .button { min-height: 36px; order: 2; }
.pdp ~ .woocommerce-notices-wrapper, .single-product .woocommerce-notices-wrapper { padding: 16px var(--gutter) 0; }
.single-product .woocommerce-notices-wrapper > * { margin-bottom: 0; }

/* ---------- Forms (account, classic checkout) ---------- */
.woocommerce form .form-row { margin: 0 0 16px; }
.woocommerce form .form-row label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 500; }
.woocommerce form .input-text, .woocommerce form select, .woocommerce form textarea, .search-form input[type="search"] {
	width: 100%; min-height: 48px; padding: 10px 14px;
	border: 1px solid var(--line-strong); border-radius: 4px; background: var(--white);
	font-size: 16px;
}
.woocommerce form .input-text:focus, .woocommerce form select:focus { outline: 0; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.woocommerce-account .u-columns { display: grid; gap: 48px; }
@media (min-width: 768px) { .woocommerce-account .u-columns { grid-template-columns: 1fr 1fr; } }
.woocommerce-account .entry-content h2 { font-size: 28px; letter-spacing: -0.03em; margin-bottom: 20px; }
.woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.woocommerce-MyAccount-navigation a { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px; background: var(--card); font-size: 14px; font-weight: 500; }
.woocommerce-MyAccount-navigation .is-active a { background: var(--ink); color: var(--white); }
.woocommerce table.shop_table { width: 100%; border-collapse: collapse; font-size: 14px; }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { padding: 12px 8px; border-bottom: 1px solid var(--line); text-align: left; }

/* ---------- Toast ---------- */
.toast {
	position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 120;
	transform: translate(-50%, 20px); opacity: 0;
	padding: 12px 20px; border-radius: 999px;
	background: var(--ink); color: var(--white); font-size: 14px; font-weight: 500;
	transition: opacity .25s var(--ease), transform .25s var(--ease);
	pointer-events: none;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.toast { width: max-content; max-width: calc(100vw - 32px); text-align: center; text-wrap: balance; } /* Add-to-cart refusals can be a sentence. */

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

/* ---------- Order received ---------- */
.woocommerce-order-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin: 24px 0 40px; padding: 20px; background: var(--soft); border-radius: var(--radius); font-size: 13px; color: var(--muted); }
.woocommerce-order-overview strong { display: block; margin-top: 4px; font-size: 16px; font-weight: 500; color: var(--ink); }
.woocommerce-order h2 { font-size: 28px; letter-spacing: -0.03em; margin: 40px 0 16px; }
.woocommerce-order address { font-style: normal; line-height: 1.6; }
.woocommerce-order .woocommerce-table__product-name a { text-decoration: none; }

/* ---------- Hero slider ---------- */
.hero__slide {
	position: absolute; inset: 0;
	opacity: 0; visibility: hidden;
	transition: opacity .9s var(--ease), visibility 0s .9s;
}
.hero__slide.is-active { opacity: 1; visibility: visible; transition-delay: 0s; z-index: 1; }
.hero__slide::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(to top, rgba(20, 15, 15, .55) 0%, rgba(20, 15, 15, .18) 38%, rgba(20, 15, 15, 0) 60%);
}
.hero::after { content: none; }
.hero__slide .hero__content { transform: translateY(16px); opacity: 0; transition: transform .9s var(--ease) .15s, opacity .9s var(--ease) .15s; }
.hero__slide.is-active .hero__content { transform: none; opacity: 1; }
/* Phones and tablets crop the landscape slides around each slide's subject; desktop shows nearly all of it. */
.hero__media--1 .hero__img { object-position: var(--hero-focus, 50%) 40%; }
@media (min-width: 1024px) {
	.hero__media--1 .hero__img { object-position: 50% 40%; }
}
.hero__content { padding-bottom: 40px; }
@media (min-width: 1024px) { .hero__content { padding-bottom: 0; max-width: 960px; } }

.hero__controls {
	position: absolute; z-index: 3;
	left: var(--gutter); right: var(--gutter); bottom: 20px;
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	color: var(--white);
}
.hero__dots { display: flex; gap: 6px; }
.hero__dot { display: block; width: 32px; height: 24px; padding: 11px 0; }
.hero__dot span { display: block; height: 2px; background: rgba(255, 255, 255, .45); border-radius: 2px; overflow: hidden; position: relative; }
.hero__dot span::after { content: ""; position: absolute; inset: 0; background: var(--white); transform: scaleX(0); transform-origin: left; }
.hero__dot[aria-selected="true"] span::after { transform: scaleX(1); }
.hero.is-playing .hero__dot[aria-selected="true"] span::after { animation: hero-progress var(--hero-delay, 6500ms) linear forwards; }
@keyframes hero-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero__arrows { display: none; }
.hero__arrows, .hero__pause {
	align-items: center; height: 40px; border-radius: 999px;
	background: rgba(20, 15, 15, .45);
	-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.hero__arrows button { display: grid; place-items: center; width: 36px; height: 40px; color: var(--white); }
.hero__arrows { padding: 0 4px; }
.hero__pause { display: grid; place-items: center; width: 40px; margin-left: auto; color: var(--white); }
.hero__pause .is-play { display: none; }
.hero:not(.is-playing) .hero__pause .is-play { display: block; }
.hero:not(.is-playing) .hero__pause .is-pause { display: none; }
@media (min-width: 1024px) {
	.hero__controls { left: auto; bottom: 40px; justify-content: flex-end; }
	.hero__dots { margin-right: 12px; }
	.hero__arrows { display: flex; }
	.hero__pause { margin-left: 0; }
}

/* ---------- Category tiles ---------- */
.section--flush-top { padding-top: 0; }
.tiles--large .tile__media { aspect-ratio: 5 / 6; }
@media (max-width: 1023px) {
	.tiles--large { grid-auto-columns: 62%; }
}
@media (min-width: 768px) and (max-width: 1023px) {
	.tiles--large { grid-auto-columns: 40%; }
}
.tile .tile__media { position: relative; }
.tile.is-soon .tile__media img { filter: grayscale(.35) brightness(.92); }
.tile.is-soon .tile__label { color: var(--muted); }
.tile.is-soon > div { cursor: default; }

/* ---------- Feature (full-bleed image) ---------- */
.feature {
	position: relative;
	display: flex; align-items: flex-start; justify-content: center;
	height: min(88svh, 720px);
	color: var(--white); text-align: center;
	overflow: hidden; background: #8a8178;
}
.feature__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; }
/* Phones and tablets: the text sits in the sky at the top, so the people below stay visible. */
.feature::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(to bottom, rgba(20, 15, 15, .42) 0%, rgba(20, 15, 15, .14) 38%, rgba(20, 15, 15, 0) 58%);
}
.feature__content { position: relative; z-index: 1; padding: 56px var(--gutter) 0; }
.feature__text { margin: 12px auto 0; max-width: 52ch; font-size: 17px; line-height: 1.35; letter-spacing: -0.015em; }
.feature .btn-row { margin-top: 28px; }
@media (min-width: 1024px) {
	/* Text sits over the open sky on the left; the people in the photo stay clear on the right. */
	.feature { height: 900px; max-height: 100svh; min-height: 640px; align-items: center; justify-content: flex-start; text-align: left; }
	.feature__img { object-position: 50% 50%; }
	.feature::after { background: linear-gradient(90deg, rgba(20, 15, 15, .38) 0%, rgba(20, 15, 15, .14) 40%, rgba(20, 15, 15, 0) 58%); }
	.feature__content { max-width: 50%; padding: 0 0 0 var(--gutter); }
	.feature__text { margin: 16px 0 0; font-size: 24px; max-width: 30ch; }
	.feature .btn-row { margin-top: 40px; justify-content: flex-start; }
}

/* ---------- Craft ---------- */
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.craft { display: grid; grid-template-columns: 1fr; background: var(--soft); }
.craft__media { aspect-ratio: 4 / 5; overflow: hidden; }
.craft__img { width: 100%; height: 100%; object-fit: cover; }
.craft__body { position: relative; padding: 48px var(--gutter) 56px; }
.craft__text { margin-top: 16px; font-size: 17px; line-height: 1.5; color: var(--ink-2); max-width: 46ch; }
.craft__list { margin: 32px 0; border-top: 1px solid var(--line-strong); }
.craft__list li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--line-strong); }
.craft__list span { font-size: 13px; font-weight: 500; color: var(--muted); padding-top: 3px; font-variant-numeric: tabular-nums; }
.craft__list h3 { font-size: 18px; letter-spacing: -0.02em; line-height: 1.3; }
.craft__list p { margin-top: 4px; font-size: 15px; color: var(--ink-2); }
.craft__inset { display: none; }
@media (min-width: 768px) {
	.craft { grid-template-columns: 1fr 1fr; align-items: stretch; }
	.craft__media { aspect-ratio: auto; min-height: 640px; }
	.craft__body { padding: 64px 48px; }
}
@media (min-width: 1024px) {
	.craft__media { min-height: 900px; }
	.craft__body { padding: 104px 64px 104px 80px; display: flex; flex-direction: column; justify-content: center; }
	.craft__text { font-size: 20px; margin-top: 24px; }
	.craft__list { margin: 48px 0 40px; max-width: 560px; }
	.craft__list h3 { font-size: 20px; }
	.craft__body > .link-underline { align-self: flex-start; }
	/* Framed detail photo floating over the large photo, next to the text column. */
	.craft__inset { display: block; position: absolute; left: -232px; bottom: 64px; z-index: 1; width: 192px; border: 6px solid var(--soft); aspect-ratio: 5 / 6; overflow: hidden; box-shadow: 0 20px 40px rgba(20, 15, 15, .12); }
	.craft__inset img { width: 100%; height: 100%; object-fit: cover; }
}
@media (min-width: 1024px) and (max-width: 1279px) { .craft__inset { display: none; } }

/* ---------- Promises ---------- */
.promises { padding: 48px var(--gutter); border-bottom: 1px solid var(--line); }
.promises__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
.promises__list li { display: grid; gap: 8px; align-content: start; }
.promises__list .icon { margin-bottom: 8px; }
.promises__list h3 { font-size: 16px; font-weight: 500; letter-spacing: -0.01em; }
.promises__list p { font-size: 14px; color: var(--muted); line-height: 1.45; overflow-wrap: anywhere; }
.promises__list p a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
@media (min-width: 1024px) {
	.promises { padding: 72px var(--gutter); }
	.promises__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
	.promises__list h3 { font-size: 18px; }
	.promises__list p { font-size: 15px; }
}

/* ==========================================================================
   Pack offers (inc/packs.php, assets/js/packs.js) — ported from Six Five
   ========================================================================== */
.packs { margin: 24px 0 20px; }
.packs__head { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; margin-bottom: 12px; }
.packs__title { font-size: 14px; font-weight: 500; }
.packs__sub { font-size: 13px; color: var(--muted); }
.packs__list { display: grid; gap: 10px; }
.pack { position: relative; display: block; padding: 14px 14px 14px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--white); cursor: pointer; transition: border-color .15s, box-shadow .15s, background-color .15s; }
.pack:hover { border-color: var(--ink); }
.pack input { position: absolute; opacity: 0; pointer-events: none; }
.pack:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.pack.is-active { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); background: var(--soft); }
.pack__badge { position: absolute; top: -1px; right: -1px; padding: 4px 10px; border-radius: 0 var(--radius) 0 var(--radius); background: var(--ink); color: var(--white); font-size: 11px; font-weight: 500; letter-spacing: .02em; }
.pack--best .pack__badge { background: var(--sale); }
.pack__row { display: flex; align-items: center; gap: 12px; }
.pack__radio { flex: none; width: 20px; height: 20px; border: 1.5px solid var(--line-strong); border-radius: 50%; background: var(--white); transition: border-color .15s, box-shadow .15s; }
.pack.is-active .pack__radio { border-color: var(--ink); box-shadow: inset 0 0 0 4px var(--white), inset 0 0 0 10px var(--ink); }
/* Little stack of folded knits: one per piece, tinted with each piece's colour once chosen. */
.pack__stack { flex: none; display: flex; width: 46px; height: 34px; align-items: center; }
.pack__stack i { flex: none; width: 22px; height: 26px; margin-right: -10px; border-radius: 3px; background: var(--c, #e3e1de); box-shadow: 0 0 0 1.5px var(--white), inset 0 0 0 1px rgba(20, 15, 15, .1); transform: rotate(calc((var(--i, 0) - 1) * 7deg)); transition: background-color .2s, transform .2s; }
.pack__stack i:nth-child(1) { --i: 0; } .pack__stack i:nth-child(2) { --i: 1; } .pack__stack i:nth-child(3) { --i: 2; } .pack__stack i:nth-child(4) { --i: 3; }
.pack.is-active .pack__stack i { --c: var(--pc, var(--line-strong)); }
.pack__main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.pack__name { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }
.pack__meta { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 13px; color: var(--muted); }
.pack__ship { display: inline-flex; align-items: center; gap: 4px; color: var(--sale); font-weight: 500; }
.pack__ship svg { flex: none; }
.pack__price { flex: none; display: grid; justify-items: end; gap: 1px; text-align: right; }
.pack__price b { font-size: 16px; font-weight: 500; white-space: nowrap; }
.pack--best .pack__price b { color: var(--sale); }
.pack__price del { font-size: 12px; color: var(--muted); white-space: nowrap; }
.pack__save { margin-top: 3px; padding: 2px 6px; border-radius: 4px; background: #fbeeee; color: var(--sale); font-size: 11px; font-weight: 600; white-space: nowrap; }
.pack__badge ~ .pack__row .pack__price { padding-top: 10px; }

.pack__pieces { display: grid; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line-strong); cursor: default; }
.pack__hint { font-size: 13px; color: var(--muted); }
.piece { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto 1fr; column-gap: 12px; row-gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.piece.is-missing { border-color: #e9b3b9; }
.piece.is-shake { animation: piece-shake .45s; }
@keyframes piece-shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.piece__n { grid-column: 2; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.piece__img { grid-row: 1 / 3; grid-column: 1; width: 44px; height: 56px; border-radius: 4px; overflow: hidden; background: var(--card); }
.piece__img img { width: 100%; height: 100%; object-fit: cover; }
.piece__opts { grid-column: 2; display: grid; gap: 8px; }
.piece__attr { display: flex; flex-wrap: wrap; gap: 6px; }
/* Colours beside the photo, sizes as an even row across the whole piece (no "T3" alone on a second line at 360px). */
.piece { grid-template-rows: auto auto auto; }
.piece__opts { display: contents; }
.piece__attr--color { grid-column: 2; }
.piece__attr:not(.piece__attr--color) { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
.piece__attr:not(.piece__attr--color) .pc { min-width: 0; padding-inline: 4px; white-space: nowrap; }
@media (min-width: 768px) { .piece__attr:not(.piece__attr--color) { grid-template-columns: repeat(var(--cols, 3), minmax(0, 104px)); } }
.pc { min-width: 38px; height: 32px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--white); font-size: 13px; color: var(--ink); cursor: pointer; transition: border-color .15s, background-color .15s, color .15s; }
.pc:hover:not(:disabled) { border-color: var(--ink); }
.pc[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.pc:disabled { opacity: .35; text-decoration: line-through; cursor: not-allowed; }
.pc--color { width: 32px; min-width: 32px; padding: 3px; border-radius: 50%; }
.pc--color::before { content: ""; display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(20, 15, 15, .12); }
.pc--color[aria-pressed="true"] { background: var(--white); border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }

.packs__nudge { margin-top: 10px; }
.packs__nudge button { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.packs__nudge button:has(> span) { text-decoration: none; } /* Underline the words only, not the "+" inside the circle. */
.packs__nudge button > span { text-decoration: underline; text-underline-offset: 3px; }
.packs__nudge button::before { content: "+"; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); color: var(--white); font-size: 14px; line-height: 1; }
.packs__error { margin-top: 10px; padding: 10px 12px; border-radius: var(--radius); background: #fbeeee; color: #8a1020; font-size: 13px; font-weight: 500; }
@media (max-width: 380px) { .pack__stack { display: none; } }
@media (prefers-reduced-motion: reduce) { .piece.is-shake { animation: none; } }

/* ==========================================================================
   Size finder (inc/size-guide.php, assets/js/size-guide.js) — ported from Six Five
   ========================================================================== */
.variations_form .variations th.has-guide { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; }
.size-guide-link { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 13px; font-weight: 400; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.size-guide-link:hover { color: var(--ink); }
.size-guide .drawer__panel { width: min(520px, 100%); }
.size-guide .drawer__head { align-items: flex-start; padding-top: 16px; padding-bottom: 14px; }
.size-guide__kicker { font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.size-guide__body { padding-top: 20px; padding-bottom: 0; }
.seg { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: var(--card); margin-bottom: 20px; }
.seg__btn { min-height: 40px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--muted); transition: background-color .2s, color .2s; }
.seg__btn.is-active { background: var(--white); color: var(--ink); box-shadow: 0 1px 4px rgba(20, 15, 15, .1); }

.sg-wiz { display: grid; grid-template-columns: minmax(0, 1fr); }
.sg-step, .sg-ruler, .sg-ruler__track { min-width: 0; }
.sg-wiz__top { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.sg-wiz__back { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; }
.sg-wiz__back:hover { background: var(--card); }
.sg-wiz[data-step="1"] .sg-wiz__back { display: none; } /* The progress bar starts at the content edge (Six Five). */
.sg-wiz__bar { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.sg-wiz__bar li { height: 3px; border-radius: 2px; background: var(--line); transition: background-color .25s; }
.sg-wiz__bar li.is-on { background: var(--ink); }
.sg-units { flex: none; display: flex; padding: 3px; border-radius: 999px; background: var(--card); }
.sg-units button { padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--muted); }
.sg-units button.is-active { background: var(--ink); color: var(--white); }
.sg-step { min-height: 300px; animation: sg-in .25s var(--ease); }
@keyframes sg-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.sg-step__title { font-size: 24px; letter-spacing: -0.03em; line-height: 1.2; margin-bottom: 4px; }
.sg-step__sub { margin-bottom: 20px; font-size: 14px; color: var(--muted); }

.sg-ruler { position: relative; margin-bottom: 22px; }
.sg-ruler__head { position: relative; display: flex; align-items: baseline; justify-content: space-between; min-height: 32px; margin-bottom: 8px; font-size: 14px; font-weight: 500; }
.sg-ruler__head output { position: absolute; left: 50%; transform: translateX(-50%); font-size: 13px; color: var(--muted); }
.sg-ruler__head output b { font-size: 26px; font-weight: 500; letter-spacing: -0.03em; color: var(--ink); }
.sg-ruler__track { position: relative; display: flex; height: 66px; overflow-x: auto; overflow-y: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--soft); scrollbar-width: none; cursor: grab; touch-action: pan-x; user-select: none; }
.sg-ruler__track::-webkit-scrollbar { display: none; }
/* Numbers fade out at both ends instead of being cut (Six Five). */
.sg-ruler__track {
	-webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
	mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}
.sg-ruler__track:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sg-ruler__pad { flex: none; width: 50%; }
.sg-ruler__scale { position: relative; flex: none; height: 100%;
	background:
		linear-gradient(to right, #8f8a85 1.5px, transparent 1.5px) 0 0 / 100px 24px repeat-x,
		linear-gradient(to right, #b5b0aa 1px, transparent 1px) 0 0 / 50px 16px repeat-x,
		linear-gradient(to right, #d3cfca 1px, transparent 1px) 0 0 / 10px 10px repeat-x; }
.sg-ruler__scale::after { content: ""; position: absolute; top: 0; right: -1px; width: 1.5px; height: 24px; background: #8f8a85; }
.sg-ruler__scale span { position: absolute; bottom: 10px; transform: translateX(-50%); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Centre pointer over the scrolling scale. */
.sg-ruler::after { content: ""; position: absolute; left: 50%; bottom: 40px; width: 0; height: 0; margin-left: -7px; border: 7px solid transparent; border-top: 10px solid var(--ink); pointer-events: none; }
.sg-ruler::before { content: ""; position: absolute; left: 50%; bottom: 8px; width: 2px; height: 50px; margin-left: -1px; background: linear-gradient(var(--ink), rgba(20, 15, 15, 0)); pointer-events: none; z-index: 1; }

.sg-shapes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 480px) { .sg-shapes { grid-template-columns: repeat(4, 1fr); } }
.sg-fit.sg-shapes { grid-template-columns: repeat(3, 1fr); }
.sg-shape { position: relative; display: grid; justify-items: center; align-content: center; gap: 8px; padding: 14px 8px 12px; border: 1px solid transparent; border-radius: var(--radius); background: var(--card); cursor: pointer; text-align: center; transition: border-color .15s, background-color .15s; }
.sg-shape input { position: absolute; opacity: 0; }
.sg-shape svg { width: 56px; height: 90px; }
.sg-shape svg circle, .sg-shape__legs { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.sg-shape__body { fill: var(--ink-2); stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
.sg-shape span { font-size: 14px; }
.sg-shape:has(input:checked) { border-color: var(--ink); background: var(--white); box-shadow: 0 0 0 1px var(--ink); }
.sg-shape:has(input:checked) span { font-weight: 600; }
.sg-shape:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.sg-fit .sg-shape { min-height: 104px; }
.sg-fit__ico { display: block; width: 28px; height: 30px; background: var(--ink-2); clip-path: polygon(22% 0, 78% 0, 100% 18%, 88% 32%, 82% 26%, 82% 100%, 18% 100%, 18% 26%, 12% 32%, 0 18%); }
.sg-fit__ico--slim { width: 22px; }
.sg-fit__ico--wide { width: 38px; }
.sg-more { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 16px; }
.sg-more summary { cursor: pointer; font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; list-style: none; }
.sg-more summary::-webkit-details-marker { display: none; }
.sg-more[open] summary { margin-bottom: 14px; }
.sg-skip { display: flex; align-items: center; gap: 8px; font-size: 14px; }

.sg-done { display: grid; align-content: start; gap: 16px; }
.sg-match { display: grid; justify-items: center; gap: 4px; padding: 24px 16px; border-radius: var(--radius); background: var(--soft); text-align: center; }
.sg-match__ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: var(--white); margin-bottom: 4px; }
.sg-match strong { font-size: 44px; font-weight: 400; letter-spacing: -0.04em; line-height: 1.05; }
.sg-match p { font-size: 15px; color: var(--ink-2); }
.sg-scale { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.sg-scale span { min-width: 44px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: 4px; font-size: 13px; text-align: center; color: var(--muted); }
.sg-scale span.is-on { border-color: var(--ink); background: var(--ink); color: var(--white); }
.sg-between { padding: 12px 14px; border-radius: var(--radius); background: var(--card); font-size: 14px; line-height: 1.45; }
.sg-recap { font-size: 13px; color: var(--muted); text-align: center; }
.sg-edit { justify-self: center; }
/* Sticky action bar at the bottom of the scrolling drawer body. */
.sg-wiz__foot { position: sticky; bottom: 0; z-index: 2; display: grid; gap: 8px; margin: 12px -20px 0; padding: 12px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--white); }
/* The finder fills the drawer: its action bar sits at the bottom instead of mid-panel. */
.size-guide__body { display: flex; flex-direction: column; }
.size-guide__body > .sg-wiz { flex: 1 0 auto; grid-template-rows: auto 1fr auto; }
.sg-wiz__foot .btn { min-height: 52px; font-size: 15px; }
.sg-privacy { font-size: 12px; color: var(--muted); text-align: center; }

.sg-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.sg-table { width: 100%; border-collapse: collapse; font-size: 14px; text-align: center; }
.sg-table th, .sg-table td { padding: 12px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
@media (max-width: 429px) {
	/* Small phones: the five columns fit the drawer ("T1 (38-40)" and the headers may wrap). */
	.sg-table th, .sg-table td { padding: 10px 4px; font-size: 13px; }
	.sg-table thead th, .sg-table tbody th { white-space: normal; }
	.sg-table tbody th { padding-left: 10px; }
}
.sg-nw { white-space: nowrap; }
.sg-table thead th { background: var(--ink); color: var(--white); font-size: 12px; font-weight: 500; }
.sg-table tbody th { font-weight: 500; text-align: left; padding-left: 12px; }
.sg-table tr:last-child > * { border-bottom: 0; }
.sg-table tr.is-match > * { background: var(--soft); font-weight: 600; }
.sg-unit { margin: 10px 0 24px; font-size: 12px; color: var(--muted); }
.sg-how-title { font-size: 16px; font-weight: 500; margin-bottom: 8px; }
.sg-how { list-style: disc; padding: 0 0 32px 18px; display: grid; gap: 6px; font-size: 14px; color: var(--ink-2); }

/* Product page: recommended size + measures of the selected size */
.size-meta { display: grid; gap: 8px; margin-top: 12px; }
.size-meta:empty { display: none; }
.size-meta__measures { padding: 10px 12px; border-radius: var(--radius); background: var(--soft); font-size: 13px; line-height: 1.5; color: var(--muted); }
.size-meta__measures b { color: var(--ink); font-weight: 500; white-space: nowrap; } /* "80–88 cm" never splits at the dash. */
.size-meta__reco { justify-self: start; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
/* Inline text buttons of the buy panel: a 40px tap area without moving the layout. */
.size-guide-link, .size-meta__reco, .packs__nudge button, .pdp__info .crumbs a { padding-block: 10px; margin-block: -10px; }
.size-meta__reco b { font-weight: 600; }
.size-meta__reco span { font-size: 18px; line-height: 1; }
.opt.is-reco::after { content: ""; position: absolute; top: -7px; right: -7px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 10px no-repeat; box-shadow: 0 0 0 2px var(--white); }
.opt[aria-checked="true"].is-reco::after { background-color: var(--sale); }
@media (prefers-reduced-motion: reduce) { .sg-step { animation: none; } }

/* ==========================================================================
   Site-wide polish (secondary pages, mega menu, quick view, motion)
   ========================================================================== */

/* ---------- Shared type & bits ---------- */
.display-3 { font-size: 32px; line-height: 1.05; }
@media (min-width: 768px) { .display-3 { font-size: 38px; } }
@media (min-width: 1024px) { .display-3 { font-size: 48px; } }
.btn--lg { min-height: 52px; font-size: 15px; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-status { margin-top: 12px; font-size: 14px; }
.contact__form-wrap .form-status { margin: 0 0 16px; }
.form-status--ok { color: #1d6b3a; }
.form-status--error { color: var(--sale); }

.chip-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.chip--link { min-height: 40px; padding: 0 16px; font-size: 14px; }
.chip--link .muted { margin-left: 4px; }

.search-inline {
	display: flex; align-items: center; gap: 10px;
	width: 100%; max-width: 560px; height: 56px; padding: 0 6px 0 18px;
	border: 1px solid var(--line-strong); border-radius: 999px; background: var(--white);
	transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.search-inline:focus-within { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.search-inline input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font-size: 16px; }
.search-inline input::-webkit-search-cancel-button { display: none; }
.search-inline .btn { min-height: 44px; }

/* ---------- Empty states (404, empty search) ---------- */
.empty-state {
	display: flex; flex-direction: column; align-items: center; gap: 20px;
	padding: 56px var(--gutter) 32px; text-align: center;
}
.empty-state .eyebrow { margin: 0; }
.empty-state .lead { max-width: 560px; color: var(--ink-2); }
.empty-state .search-inline { margin-top: 8px; }
@media (min-width: 1024px) { .empty-state { padding-top: 96px; gap: 24px; } }
.section--suggest { border-top: 1px solid var(--line); margin-top: 40px; }
.plp__empty { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 32px 0 16px; }
.plp__empty .chip-row { justify-content: flex-start; }

/* ---------- Mega menu (desktop) ---------- */
@media (min-width: 1024px) {
	/* One row, every card the same width (6 categories + "Tout voir"), so the panel fits a 1024x768 screen. */
	.nav .sub-menu { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 20px; padding: 24px; }
	.nav .sub-menu a.mega__card { display: grid; gap: 4px; padding: 0; font-size: 15px; }
	.nav .sub-menu a.mega__card:hover { text-decoration: none; }
	.mega__media { display: block; aspect-ratio: 5 / 6; overflow: hidden; border-radius: 4px; background: var(--card); margin-bottom: 8px; }
	.mega__img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
	.mega__card:hover .mega__img { transform: scale(1.04); }
	.mega__label { font-weight: 500; }
	.mega__note { font-size: 13px; color: var(--muted); }
	.nav .sub-menu a.mega__card--all {
		align-content: end; height: 100%; min-height: 200px; padding: 20px;
		border-radius: 4px; background: var(--soft);
	}
	.mega__card--all .icon { transition: transform .25s var(--ease); }
	.mega__card--all:hover .icon { transform: translateX(4px); }
	.mega__sum { font-size: 13px; color: var(--muted); }
}
/* In the mobile drawer the same items are plain links. */
.drawer-nav .mega__media, .drawer-nav .mega__note, .drawer-nav .mega__card--all .icon, .drawer-nav .mega__sum, .drawer-nav .nav__more { display: none; }
.drawer-nav .mega__card { display: block; padding: 8px 0; font-size: 16px; color: var(--ink-2); }

/* ---------- Search suggestions (inc/search.php, assets/js/search.js) ----------
   The list sits under any form[data-suggest]. Its layout follows its own width (classes set by search.js):
   rows; .is-wide two columns of rows (≥ 640 px); .is-split categories beside articles (≥ 860 px);
   .is-cards articles as small cards (≥ 1260 px). Cozy pop: block 4h at the end of cozy.css. */
form[data-suggest] { position: relative; }
.suggest__field { position: relative; display: flex; flex: 1; min-width: 0; align-self: stretch; align-items: center; }
.suggest__field > input[type="search"] { flex: 1; min-width: 0; }
.suggest__ghost { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; overflow: hidden; white-space: pre; color: var(--muted); opacity: .62; pointer-events: none; }
.suggest__typed { color: transparent; }
.suggest {
	position: absolute; z-index: 40; top: calc(100% + 8px); left: 0; right: 0;
	padding: 8px; overflow-y: auto; overscroll-behavior: contain;
	background: var(--white); color: var(--ink); border-radius: var(--radius);
	box-shadow: 0 0 0 1px rgba(20, 15, 15, .06), 0 16px 40px rgba(20, 15, 15, .14);
	font-size: 15px; line-height: 1.35; text-align: left;
}
.suggest__group + .suggest__group, .suggest__side + .suggest__main { margin-top: 8px; }
.suggest__label { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; margin: 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.suggest__clear { min-height: 40px; margin-right: -8px; padding: 0 8px; font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.suggest__row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 6px 8px; border-radius: 6px; color: inherit; text-align: left; transition: background-color .12s; }
a.suggest__row:hover, button.suggest__row:hover, .suggest__row.is-active { background: var(--soft); }
.suggest__icon { flex: none; color: var(--muted); }
.suggest__pic { flex: none; width: 44px; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 4px; background: var(--card); }
.suggest__thumb { flex: none; width: 44px; height: 44px; overflow: hidden; border-radius: 50%; background: var(--card); }
.suggest__pic img, .suggest__thumb img { width: 100%; height: 100%; object-fit: cover; }
.suggest__dot { flex: none; width: 28px; height: 28px; margin: 0 8px; border-radius: 50%; background: var(--dot); box-shadow: inset 0 0 0 1px rgba(20, 15, 15, .16); }
.suggest__info { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.suggest__name { overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.suggest__item .suggest__name { display: -webkit-box; white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.suggest__name b { font-weight: 700; }
.suggest__meta { overflow: hidden; font-size: 13px; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.suggest__price { display: flex; flex: none; flex-direction: column; align-items: flex-end; font-size: 14px; font-weight: 600; white-space: nowrap; }
.suggest__price del { font-size: 12px; font-weight: 400; color: var(--muted); }
.suggest__price ins { text-decoration: none; }
.suggest__price small { font-size: 12px; font-weight: 400; color: var(--muted); }
.suggest__price.is-sale ins { color: var(--sale); }
.suggest__item.is-out :is(.suggest__pic, .suggest__price) { opacity: .55; }
.suggest__cat.is-soon { color: var(--muted); }
.suggest__cat.is-soon .suggest__thumb { opacity: .6; }
.suggest__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 8px 8px; }
.suggest__chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 14px; font-weight: 500; transition: border-color .15s, background-color .15s; }
.suggest__chip small { font-size: 12px; font-weight: 400; color: var(--muted); }
a.suggest__chip:hover, .suggest__chip.is-active { border-color: var(--ink); background: var(--soft); }
.suggest__chip.is-soon { border-style: dashed; color: var(--muted); }
.suggest__empty { padding: 8px 8px 4px; color: var(--ink-2); }
.suggest__empty b { font-weight: 600; color: var(--ink); }
.suggest__all { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; margin-top: 8px; padding: 0 16px 0 20px; border-radius: 999px; background: var(--ink); color: var(--white); font-size: 14px; font-weight: 500; transition: background-color .15s; }
.suggest__all span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest__all .suggest__icon { color: currentColor; }
.suggest__all:hover, .suggest__all.is-active { background: #3a3535; }
.suggest__all--quiet { border: 1px solid var(--line-strong); background: none; color: var(--ink); }
.suggest__all--quiet:hover, .suggest__all--quiet.is-active { background: var(--soft); }
.suggest.is-wide .suggest__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 8px; }
.suggest.is-wide .suggest__all { width: fit-content; min-width: 280px; max-width: 100%; margin-left: 8px; gap: 24px; }
/* 340px side: two or three category chips per row, so the chip column stays about as tall as the articles. */
.suggest.is-split { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 0 16px; align-items: start; padding: 16px; }
.suggest.is-split .suggest__side { align-self: stretch; padding-right: 16px; border-right: 1px solid var(--line); }
.suggest.is-split .suggest__main { margin-top: 0; }
.suggest.is-cards .suggest__grid { grid-template-columns: repeat(6, minmax(0, 220px)); gap: 12px; }
.suggest.is-cards .suggest__item { flex-direction: column; align-items: stretch; gap: 8px; padding: 8px; }
.suggest.is-cards .suggest__item .suggest__pic { width: 100%; }
.suggest.is-cards .suggest__item .suggest__price { flex-direction: row; align-items: baseline; gap: 8px; }
.suggest:not(.is-split) .suggest__group--fresh .suggest__item:nth-child(n+5) { display: none; }
/* Split rows beside the tall univers/category column: all six, with larger photos (the 56px slot in sizes). */
.suggest.is-split:not(.is-cards) .suggest__group--fresh .suggest__pic { width: 56px; }
/* While suggestions are open, the floating buttons and toasts step aside. */
body:has(:not([hidden]) > form.is-suggesting) :is(.wa-float, .proof, .wheel-fab) { visibility: hidden; opacity: 0; pointer-events: none; }

/* ---------- La Maison ---------- */
.maison__hero { position: relative; display: grid; align-items: end; min-height: 72vh; overflow: hidden; background: var(--card); }
.maison__hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.maison__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20, 15, 15, .55), rgba(20, 15, 15, 0) 55%); }
.maison__hero-text { position: relative; z-index: 1; padding: 0 var(--gutter) 40px; color: var(--white); }
.maison__hero-text .eyebrow { color: rgba(255, 255, 255, .8); }
.maison__hero--plain { min-height: 0; padding-top: 48px; }
.maison__hero--plain::after { display: none; }
.maison__hero--plain .maison__hero-text { color: var(--ink); }
.maison__body { display: grid; gap: 40px; padding: 56px var(--gutter) 72px; }
.maison__aside img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; }
.maison__content { max-width: 680px; font-size: 17px; color: var(--ink-2); }
.maison__content .is-lead { font-size: 24px; line-height: 1.3; letter-spacing: -0.02em; color: var(--ink); }
.maison__content h2 { color: var(--ink); }
.principles { display: grid; gap: 12px; margin-top: 24px !important; }
.principles > .wp-block-column { padding: 24px; border-radius: var(--radius); background: var(--soft); }
.principles h3 { margin-top: 0 !important; font-size: 18px; font-weight: 500; color: var(--ink); }
.principles p { margin-top: 8px !important; font-size: 15px; }
@media (min-width: 768px) {
	.maison__hero-text { padding-bottom: 56px; }
	.principles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.maison__hero { min-height: calc(100vh - var(--header-h) - 24px); }
	.maison__hero-text { padding: 0 var(--gutter) 72px; }
	.maison__body { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; align-items: start; padding: 120px var(--gutter); }
	.maison__aside { position: sticky; top: calc(var(--header-h) + 32px); }
	.maison__content { font-size: 18px; }
	.maison__content .is-lead { font-size: 36px; line-height: 1.15; letter-spacing: -0.035em; }
	.maison__content h2 { font-size: 44px; line-height: 1.02; }
}

/* ---------- Contact ---------- */
.contact { display: grid; gap: 32px; padding: 32px var(--gutter) 0; }
.contact__head .lead { margin-top: 16px; color: var(--ink-2); max-width: 560px; }
.contact__ways { display: grid; gap: 8px; margin-top: 32px; }
.way {
	display: grid; grid-template-columns: 24px 1fr; column-gap: 16px; align-items: center;
	padding: 16px 20px; border-radius: var(--radius); background: var(--soft);
	transition: background-color .2s var(--ease);
}
.way .icon { grid-row: span 2; }
.way__label { font-size: 13px; color: var(--muted); }
.way__value { font-size: 16px; font-weight: 500; overflow-wrap: anywhere; }
a.way:hover { background: var(--card); }
.contact__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; }
.contact__grid { display: grid; gap: 56px; padding: 64px var(--gutter); }
.contact__grid .display-3 { margin-bottom: 24px; }
.contact-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field { grid-column: 1 / -1; display: grid; gap: 6px; }
.field label { font-size: 14px; font-weight: 500; }
.field input, .field textarea {
	width: 100%; min-height: 48px; padding: 12px 14px;
	border: 1px solid var(--line-strong); border-radius: 4px; background: var(--white); font-size: 16px;
}
.field textarea { resize: vertical; min-height: 140px; }
.field input:focus, .field textarea:focus { outline: 0; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.field--foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; font-size: 13px; }
.contact__map { padding: 0 var(--gutter) 72px; }
.contact__map iframe { display: block; width: 100%; height: 360px; border: 0; border-radius: 4px; filter: grayscale(1) contrast(1.05); }
@media (min-width: 768px) {
	.field--half { grid-column: span 1; }
	/* An odd last card (Horaires) spans the row instead of leaving an empty cell. */
	.contact__ways > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* Portrait tablets: cards side by side and a landscape photo, so the form isn't two screens down. */
@media (min-width: 768px) and (max-width: 1023px) {
	.contact__ways { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.contact__media img { aspect-ratio: 16 / 9; }
}
@media (min-width: 1024px) {
	.contact { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 80px; align-items: center; padding-top: 56px; }
	.contact__ways { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.contact__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 80px; padding: 120px var(--gutter); }
	.contact__map iframe { height: 440px; }
	.contact__map { padding-bottom: 120px; }
}

/* ---------- Account: login / register ---------- */
.page-wrap--auth { max-width: none; padding: 24px var(--gutter) 64px; }
.auth { display: grid; gap: 32px; }
.auth__media { position: relative; overflow: hidden; border-radius: 4px; background: var(--card); }
.auth__media img { width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: center 30%; }
.auth__perks { display: none; }
.auth__panel { width: 100%; max-width: 460px; margin: 0 auto; }
.auth__tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; margin-bottom: 32px; border-radius: 999px; background: var(--card); }
.auth__tabs button { height: 44px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--muted); transition: background-color .2s var(--ease), color .2s var(--ease); }
.auth__tabs [aria-selected="true"] { background: var(--white); color: var(--ink); box-shadow: 0 1px 3px rgba(20, 15, 15, .1); }
.auth__form .display-3 { margin-bottom: 24px; }
/* The panel titles are H1s now; keep the size they had as .entry-content h2. */
.auth .display-3 { font-size: 28px; line-height: 1.2; }
.auth__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 20px; font-size: 14px; }
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--ink); }
.auth__note { margin-top: 20px; font-size: 14px; color: var(--muted); text-wrap: pretty; }
.auth .woocommerce-privacy-policy-text { margin: 4px 0 20px; font-size: 13px; color: var(--muted); }
.auth .woocommerce-privacy-policy-text a { text-decoration: underline; }
/* "Mot de passe oublié ?": a 44px tap target without moving its underline. */
.auth__row .link-underline { position: relative; }
.auth__row .link-underline::after { content: ""; position: absolute; inset: -11px -8px; }
/* Lost password / new password: one centred card (woocommerce/myaccount/form-lost-password.php). */
.auth.auth--solo { display: block; }
.auth--solo .auth__panel { margin: 0 auto; }
.auth__card { padding: 32px 24px; border-radius: var(--radius); background: var(--soft); }
.auth__card .display-3 { margin-bottom: 12px; }
.auth__lead { margin-bottom: 24px; color: var(--ink-2); text-wrap: pretty; }
.auth__card .auth__note a { color: var(--ink); white-space: nowrap; }
.auth__back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 8px; font-size: 14px; font-weight: 500; }
.entry-content .auth__back { text-decoration: none; }
.auth__back span { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 768px) {
	.auth__card { padding: 40px; }
}
/* Portrait tablets: the photo takes the form's 460px column so their edges line up. */
@media (min-width: 768px) and (max-width: 1023px) {
	.auth__media { width: 100%; max-width: 460px; margin: 0 auto; }
}
@media (min-width: 1024px) {
	.page-wrap--auth { padding-top: 24px; padding-bottom: 96px; }
	.auth { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: center; }
	.auth__media img { aspect-ratio: 4 / 5; max-height: calc(100vh - var(--header-h) - 48px); }
	.auth__perks {
		position: absolute; left: 24px; right: 24px; bottom: 24px; display: block;
		padding: 24px; border-radius: var(--radius);
		background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
	}
	.auth__perks-title { font-size: 18px; font-weight: 500; margin-bottom: 12px; }
	.auth__perks li { display: flex; align-items: center; gap: 12px; padding: 6px 0; font-size: 15px; }
	.auth__panel { margin: 0; justify-self: center; }
	.auth--solo .auth__panel { margin: 24px auto 0; }
}

/* ---------- Account: logged in ---------- */
@media (min-width: 1024px) {
	.logged-in.woocommerce-account .entry-content > .woocommerce { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 64px; align-items: start; }
	.woocommerce-MyAccount-navigation { position: sticky; top: calc(var(--header-h) + 24px); }
	.woocommerce-MyAccount-navigation ul { display: grid; gap: 2px; margin: 0; }
	.woocommerce-MyAccount-navigation a { display: flex; width: 100%; height: 44px; border-radius: 6px; background: none; font-size: 15px; }
	.woocommerce-MyAccount-navigation a:hover { background: var(--soft); }
	.woocommerce-MyAccount-navigation .is-active a { background: var(--ink); }
}
.woocommerce-MyAccount-navigation ul { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
.woocommerce-MyAccount-navigation li { flex-shrink: 0; }
/* The account sits in .entry-content (page.php): no bullets on its lists, no underline on its cards and buttons. */
.woocommerce-account .entry-content :is(.woocommerce-MyAccount-navigation ul, .dash__cards) { list-style: none; padding-left: 0; }
.woocommerce-account .entry-content :is(.woocommerce-MyAccount-navigation a, a.dash__card, a.dash__order, .btn, .button) { text-decoration: none; }
.woocommerce-account .entry-content .dash__cards { margin-top: 0; }
/* Addresses and account details */
.woocommerce-Addresses { margin-top: 16px; }
.woocommerce-Address { padding: 22px; border-radius: var(--radius); background: var(--soft); }
.woocommerce-EditAccountForm legend { padding: 0; }
.woocommerce-Address-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 10px; }
.entry-content .woocommerce-Address-title h2 { margin: 0; font-size: 22px; }
.woocommerce-Address address { font-style: normal; line-height: 1.6; color: var(--ink-2); }
.woocommerce-EditAccountForm, .woocommerce-address-fields { max-width: 640px; }
.woocommerce-EditAccountForm fieldset { margin: 32px 0 8px; padding: 0; border: 0; }
.woocommerce-EditAccountForm legend { margin-bottom: 16px; font-size: 20px; font-weight: 500; letter-spacing: -0.01em; }
#account_display_name_description { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); }
#account_display_name_description em { font-style: normal; }
.dash { display: grid; gap: 24px; }
.dash__order {
	display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: center;
	padding: 20px; border: 1px solid var(--line); border-radius: var(--radius);
	transition: border-color .2s var(--ease);
}
a.dash__order:hover { border-color: var(--ink); }
.dash__order-label { grid-column: 1 / -1; font-size: 13px; color: var(--muted); }
.dash__order-main { display: grid; gap: 2px; font-size: 14px; }
.dash__order-main strong { font-size: 18px; font-weight: 500; }
.dash__order-total { grid-column: 1 / -1; font-size: 16px; font-weight: 500; }
.dash__order--empty { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; color: var(--ink-2); }
.status-pill { justify-self: end; padding: 4px 12px; border-radius: 999px; background: var(--card); font-size: 12px; font-weight: 500; white-space: nowrap; }
.status-pill--completed { background: #e3f3e8; color: #1d6b3a; }
.status-pill--processing { background: #e7eefc; color: #23439a; }
.status-pill--cancelled, .status-pill--failed { background: #fbeeee; color: #8a1020; }
.dash__cards { display: grid; gap: 12px; }
.dash__card { display: grid; gap: 4px; padding: 20px; border-radius: var(--radius); background: var(--soft); font-size: 14px; transition: background-color .2s var(--ease); }
.dash__card:hover { background: var(--card); }
.dash__card .icon { margin-bottom: 12px; }
.dash__card-title { font-size: 17px; font-weight: 500; }
@media (min-width: 768px) {
	.dash__order { grid-template-columns: 1fr auto auto; }
	.dash__order-total { grid-column: auto; }
	.dash__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Category banner ---------- */
.plp__header--banner { display: grid; gap: 24px; }
.plp__banner { overflow: hidden; border-radius: 4px; background: var(--card); aspect-ratio: 16 / 9; }
.plp__banner img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; } /* Portrait photos: keep the face. */
.plp__header .search-inline { margin-top: 20px; }
@media (max-width: 767px) { .plp__header--banner .plp__banner { order: -1; aspect-ratio: 16 / 10; } }
@media (min-width: 1024px) {
	.plp__header--banner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: end; }
	.plp__banner { aspect-ratio: 16 / 9; max-height: 360px; width: 100%; }
}

/* ---------- Product card: quick view ---------- */
/* Above the title link's full-card overlay (.product-card__title a::after), so the photo gets the hover
   (worn photo, quick-view button); a click on it still opens the product through .product-card__media. */
.product-card__visual { position: relative; z-index: 1; }
.product-card__quick {
	position: absolute; right: 10px; bottom: 10px; z-index: 2;
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	width: 36px; height: 36px; border-radius: 999px;
	background: rgba(255, 255, 255, .92); box-shadow: 0 2px 8px rgba(20, 15, 15, .1);
	font-size: 13px; font-weight: 500;
	transition: opacity .25s var(--ease), transform .25s var(--ease), background-color .2s;
}
.product-card__quick span { display: none; }
.product-card__quick:hover { background: var(--white); }
@media (hover: hover) and (min-width: 1024px) {
	.product-card__quick { left: 12px; right: 12px; bottom: 12px; width: auto; height: 44px; opacity: 0; transform: translateY(6px); }
	.product-card__quick span { display: inline; }
	.product-card__visual:hover .product-card__quick, .product-card__quick:focus-visible { opacity: 1; transform: none; }
}

/* ---------- Quick view drawer ---------- */
.drawer--quick .drawer__panel { width: min(480px, 100%); }
.quick__loading { height: 60vh; margin-top: 12px; border-radius: 4px; background: linear-gradient(100deg, var(--card) 40%, var(--soft) 50%, var(--card) 60%) 0 0 / 200% 100%; animation: shimmer 1.2s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.quick__inner { display: grid; gap: 20px; padding-top: 12px; }
.quick__media { display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.quick__media:has(img:only-child) { grid-auto-columns: 100%; }
.quick__media img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; scroll-snap-align: start; background: var(--card); }
.quick__title { font-size: 24px; letter-spacing: -0.03em; }
.quick__price { margin-top: 4px; font-size: 17px; }
.quick__price ins { text-decoration: none; color: var(--sale); }
.quick__form { margin-top: 20px; }
.quick__more { margin-top: 20px; }

/* ---------- Sticky buy bar (product page, below desktop) ---------- */
.buybar {
	position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 40;
	display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px;
	padding: 8px 8px 8px 8px; border-radius: 12px;
	background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
	box-shadow: 0 8px 32px rgba(20, 15, 15, .16);
	transform: translateY(calc(100% + 24px)); transition: transform .35s var(--ease);
}
.buybar.is-visible { transform: none; }
.buybar__img { width: 44px; aspect-ratio: 5 / 6; height: auto; object-fit: cover; border-radius: 4px; }
.buybar__text { display: grid; min-width: 0; font-size: 13px; }
.buybar__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; font-size: 14px; }
.buybar__price del { color: var(--muted); }
.buybar__price ins { text-decoration: none; color: var(--sale); }
.buybar .btn { min-height: 44px; padding: 0 18px; }
@media (min-width: 1024px) { .buybar { display: none; } }
.buybar__opts { display: flex; gap: 4px; min-width: 0; overflow: hidden; font-size: 12px; line-height: 16px; color: var(--ink-2); white-space: nowrap; }
.buybar__opts span + span::before { content: "·"; margin-right: 4px; }
@media (max-width: 1023px) {
	/* The fixed bar must not cover the footer's last line (© and "Haut de page"), as on Asala. */
	.single-product:has(.buybar) .site-footer { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
	.has-buybar .toast { bottom: calc(100px + env(safe-area-inset-bottom)); }
}

/* ---------- "Complétez votre tenue" (product page, inc/pdp-buy.php) ---------- */
.outfit { margin-top: 32px; }
.outfit__title { margin-bottom: 14px; font-family: var(--serif); font-size: 26px; font-weight: 400; line-height: 1.1; letter-spacing: -0.01em; }
.outfit__list { display: grid; gap: 10px; }
.mini {
	position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 14px;
	padding: 10px 12px 10px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white);
	transition: border-color .2s var(--ease);
}
.mini:hover { border-color: var(--ink); }
.mini__img { display: block; overflow: hidden; border-radius: 4px; background: var(--card); }
.mini__img img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.mini__body { display: grid; gap: 2px; min-width: 0; }
.mini__type { font-size: 12px; color: var(--muted); }
.mini__name { overflow: hidden; padding-block: 6px; margin-block: -6px; font-size: 15px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; } /* 35px tall for the keyboard ring, same layout. */
.mini__name::after { content: ""; position: absolute; inset: 0; } /* The whole card opens the product… */
.mini__price { font-size: 14px; color: var(--ink-2); }
.mini__price del { margin-right: 4px; color: var(--muted); }
.mini__price ins { text-decoration: none; color: var(--sale); }
.mini__add { /* …and the + opens quick view. */
	position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px;
	border: 1px solid var(--line-strong); border-radius: 50%; background: var(--white); color: var(--ink);
	transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.mini__add:hover { border-color: var(--ink); background: var(--ink); color: var(--white); }

/* ---------- Order received: next steps ---------- */
.next-steps { display: grid; gap: 0; margin: 8px 0 40px; padding: 0; counter-reset: none; }
.next-steps__item {
	position: relative; display: grid; grid-template-columns: 40px 1fr; column-gap: 16px;
	padding-bottom: 24px;
}
.next-steps__item:not(:last-child)::before { content: ""; position: absolute; left: 19px; top: 40px; bottom: 0; width: 2px; background: var(--line); }
.next-steps__icon { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--soft); border: 1px solid var(--line); }
.next-steps__item.is-done .next-steps__icon { background: var(--ink); color: var(--white); border-color: var(--ink); }
.next-steps__title { font-weight: 500; padding-top: 2px; }
.next-steps__text { font-size: 14px; color: var(--muted); }
@media (min-width: 768px) {
	.next-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
	.next-steps__item { grid-template-columns: 1fr; row-gap: 6px; padding-bottom: 0; }
	.next-steps__icon { grid-row: auto; margin-bottom: 8px; }
	.next-steps__item:not(:last-child)::before { left: 48px; right: -8px; top: 19px; bottom: auto; width: auto; height: 2px; }
}

/* ---------- Motion ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.promises__list > li.reveal:nth-child(2), .principles > .reveal:nth-child(2), .dash__cards > li.reveal:nth-child(2) { transition-delay: .08s; }
.promises__list > li.reveal:nth-child(3), .principles > .reveal:nth-child(3), .dash__cards > li.reveal:nth-child(3) { transition-delay: .16s; }
.promises__list > li.reveal:nth-child(4) { transition-delay: .24s; }
.drawer__panel { will-change: transform; }
/* Grey placeholder while images load. */
.pdp__slide, .tile, .craft__media, .feature, .banner__media { background-color: var(--card); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ==========================================================================
   Home motion (assets/js/motion.js adds .has-motion, .mo--* and .is-in)
   One easing curve for everything: a soft, decelerating "expo out".
   ========================================================================== */
:root { --ease-out: cubic-bezier(.16, 1, .3, 1); }

/* ---------- Promises marquee ---------- */
.marquee { overflow: hidden; border-bottom: 1px solid var(--line); background: var(--white); }
.marquee__track { display: flex; width: max-content; }
.marquee__group { display: flex; flex-shrink: 0; }
.marquee__group li {
	display: flex; align-items: center; gap: 28px;
	padding: 16px 0 16px 28px;
	font-size: 14px; font-weight: 500; letter-spacing: -0.005em; white-space: nowrap;
}
.marquee__group li::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); opacity: .35; }
@media (min-width: 1024px) {
	.marquee__group li { gap: 40px; padding: 20px 0 20px 40px; font-size: 16px; }
}

@media (prefers-reduced-motion: no-preference) {
	.marquee__track { animation: marquee 38s linear infinite; }
	.marquee:hover .marquee__track { animation-play-state: paused; }
	@keyframes marquee { to { transform: translateX(-50%); } }

	/* ---------- Hero: slow push-in on the photo, words rising on each slide ---------- */
	.hero__slide .hero__img { transform: scale(1.08); transition: transform 9s cubic-bezier(.25, .1, .25, 1); will-change: transform; }
	.hero__slide.is-active .hero__img { transform: scale(1); }
	.hero__media > :nth-child(2) { transition-delay: .12s; }
	.hero__media > :nth-child(3) { transition-delay: .24s; }

	.has-motion .hero__slide .hero__content { transform: none; opacity: 1; transition: none; }
	.has-motion .hero__title .w__in { transform: translateY(105%); transition: transform 1.1s var(--ease-out); }
	.has-motion .hero.is-ready .hero__slide.is-active .hero__title .w__in { transform: none; transition-delay: calc(.25s + var(--i) * 70ms); }
	.has-motion .hero__subtitle, .has-motion .hero__content .btn { opacity: 0; transform: translateY(16px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
	.has-motion .hero.is-ready .hero__slide.is-active .hero__subtitle { opacity: .92; transform: none; transition-delay: .55s; }
	.has-motion .hero.is-ready .hero__slide.is-active .hero__content .btn { opacity: 1; transform: none; transition-delay: .7s; }
	.has-motion .hero__controls { opacity: 0; transition: opacity 1s var(--ease-out) .9s; }
	.has-motion .hero.is-ready .hero__controls { opacity: 1; }

	/* ---------- Masked words (headings) ---------- */
	.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
	.w__in { display: inline-block; }
	.mo--words .w__in { transform: translateY(105%); transition: transform 1.1s var(--ease-out); transition-delay: calc(var(--i) * 55ms); }
	.mo--words.is-in .w__in { transform: none; }

	/* ---------- Soft fade-up (text, buttons) ---------- */
	.mo--fade { opacity: 0; transform: translateY(20px); transition: opacity 1s var(--ease-out) .2s, transform 1s var(--ease-out) .2s; }
	.mo--fade.is-in { opacity: 1; transform: none; }

	/* ---------- Category / colour tiles: image curtain, then label ---------- */
	.mo--tiles .tile__media { clip-path: inset(100% 0 0 0); transition: clip-path 1.2s var(--ease-out); transition-delay: var(--d, 0ms); }
	.mo--tiles .tile__media img { transform: scale(1.18); transition: transform 1.6s var(--ease-out), filter .3s; transition-delay: var(--d, 0ms); }
	.mo--tiles .tile__label { opacity: 0; transform: translateY(10px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); transition-delay: calc(var(--d, 0ms) + .35s); }
	.mo--tiles.is-in .tile__media { clip-path: inset(0); }
	.mo--tiles.is-in .tile__media img { transform: none; }
	.mo--tiles.is-in .tile a:hover .tile__media img { transform: scale(1.04); transition-delay: 0s; transition-duration: .8s; }
	.mo--tiles.is-in .tile__label { opacity: 1; transform: none; }

	/* ---------- Product cards and stories: staggered rise ---------- */
	.mo--cards > * { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out); transition-delay: var(--d, 0ms); }
	.mo--cards.is-in > * { opacity: 1; transform: none; }

	/* ---------- Craft list: lines draw in, items follow ---------- */
	.mo--list > li { opacity: 0; transform: translateX(-12px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay: var(--d, 0ms); }
	.mo--list.is-in > li { opacity: 1; transform: none; }

	/* ---------- Promises: line icons draw themselves ---------- */
	.mo--icons .icon * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--ease-out); transition-delay: calc(var(--d, 0ms) + .1s); }
	.mo--icons > li > :not(.icon) { opacity: 0; transform: translateY(12px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay: calc(var(--d, 0ms) + .3s); }
	.mo--icons.is-in .icon * { stroke-dashoffset: 0; }
	.mo--icons.is-in > li > :not(.icon) { opacity: 1; transform: none; }

	/* ---------- Craft photos: curtain wipe ---------- */
	.mo--curtain { clip-path: inset(0 0 100% 0); transition: clip-path 1.4s var(--ease-out); }
	.mo--curtain img { transform: scale(1.15); transition: transform 1.8s var(--ease-out); }
	.mo--curtain.is-in { clip-path: inset(0); }
	.mo--curtain.is-in img { transform: none; }
	.craft__inset.mo--curtain { transition-delay: .4s; }
	.craft__inset.mo--curtain img { transition-delay: .4s; }

	/* ---------- Header slides away while scrolling down (home) ---------- */
	.site-header { transition: transform .45s var(--ease-out); }
	.site-header.is-hidden { transform: translateY(calc(-100% - 12px)); }

	/* ---------- Scroll-linked parallax on full-bleed photos (browsers that support it) ---------- */
	@supports (animation-timeline: view()) {
		.feature__img, .banner__media, .craft__img {
			animation: filago-parallax linear both;
			animation-timeline: view();
			animation-range: cover 0% cover 100%;
		}
		.craft__img { animation-name: filago-parallax-soft; }
		@keyframes filago-parallax { from { transform: translateY(-7%) scale(1.15); } to { transform: translateY(7%) scale(1.15); } }
		@keyframes filago-parallax-soft { from { transform: translateY(-4%) scale(1.09); } to { transform: translateY(4%) scale(1.09); } }
	}

	/* ---------- Micro-interactions ---------- */
	.btn { transition: background-color .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out), transform .25s var(--ease-out); }
	.btn:active { transform: scale(.97); }
	.product-card__img { transition: opacity .5s var(--ease-out), transform 1.2s var(--ease-out); }
	@media (hover: hover) {
		.product-card__media:hover .product-card__img { transform: scale(1.03); }
	}
	.link-underline { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; border-bottom: 0; padding-bottom: 2px; transition: background-size .45s var(--ease-out), color .2s; }
	.link-underline:hover { background-size: 0 1px; background-position: 100% 100%; }
}

/* =====================================================================
   Shop extras (ideas from the 2brothers.com.tr review): favourites,
   WhatsApp ordering, sale %, reviews, grid toggle, editorial tiles.
   ===================================================================== */
:root { --wa: #128c4a; --wa-hover: #0f7a40; --star: #140f0f; }

/* ---------- Favourite heart ---------- */
.fav-btn {
	display: inline-grid; place-items: center; flex: none;
	width: 40px; height: 40px; border-radius: 999px;
	color: var(--ink); transition: background-color .2s, transform .2s var(--ease);
}
.fav-btn svg { transition: fill .2s, transform .3s var(--ease); }
.fav-btn:hover { background: rgba(20, 15, 15, .06); }
.fav-btn[aria-pressed="true"] { color: var(--sale); }
.fav-btn[aria-pressed="true"] svg { fill: currentColor; }
.fav-btn.is-pop svg { animation: filago-pop .45s var(--ease); }
@keyframes filago-pop { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }
.fav-btn--card {
	position: absolute; top: 8px; right: 8px; z-index: 2;
	width: 36px; height: 36px; background: rgba(255, 255, 255, .92); box-shadow: 0 2px 8px rgba(20, 15, 15, .08);
}
.fav-btn--card svg { width: 18px; height: 18px; }
.fav-btn--card:hover { background: var(--white); }
@media (min-width: 1024px) { .fav-btn--card { top: 12px; right: 12px; } }
.hdr-btn--fav .cart-count { background: var(--sale); }

/* ---------- Card: sale percentage ---------- */
.badge--sale { border-radius: 4px; background: var(--ink); color: var(--white); font-weight: 600; letter-spacing: .01em; }

/* ---------- Product page ---------- */
.pdp__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pdp__head .fav-btn--pdp { margin: -4px -8px 0 0; width: 44px; height: 44px; }
.pdp__sku { margin-top: 4px; font-size: 13px; color: var(--muted); }
.pdp__model { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 14px; color: var(--ink-2); }
.pdp__model svg { flex: none; color: var(--muted); }
.btn--wa {
	display: flex; align-items: center; justify-content: center; gap: 10px;
	margin-top: 12px; min-height: 52px;
	background: var(--wa); border-color: var(--wa); color: var(--white);
}
.btn--wa:hover { background: var(--wa-hover); border-color: var(--wa-hover); }

/* ---------- Floating WhatsApp ---------- */
.wa-float {
	position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 45;
	display: inline-flex; align-items: center; gap: 10px;
	height: 56px; padding: 0 16px; border-radius: 999px;
	background: var(--wa); color: var(--white);
	box-shadow: 0 8px 24px rgba(18, 140, 74, .32);
	font-size: 15px; font-weight: 500;
	transition: transform .35s var(--ease), opacity .35s var(--ease), visibility .35s, background-color .2s, bottom .35s var(--ease);
}
.wa-float:hover { background: var(--wa-hover); }
.wa-float__label { display: none; }
.has-buybar .wa-float { bottom: calc(88px + env(safe-area-inset-bottom)); }
.is-locked .wa-float { transform: scale(0); }
/* Floating launchers (theme.js "Floating launchers"): away on the first screen, over the hero, the buy column and the footer. */
.wa-float.is-away { opacity: 0; visibility: hidden; transform: translateY(12px); pointer-events: none; }
@media (min-width: 1024px) {
	.wa-float { right: 24px; bottom: 24px; padding: 0 22px 0 18px; }
	.wa-float__label { display: inline; }
}

/* ---------- Stars ---------- */
.stars {
	--size: 16px; --pct: calc(var(--rating) / 5 * 100%);
	display: inline-block; width: calc(var(--size) * 5); height: var(--size); vertical-align: -2px;
	background: linear-gradient(90deg, var(--star) var(--pct), var(--line-strong) var(--pct));
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2.5 2.9 6.1 6.6.8-4.9 4.6 1.3 6.5L12 17.3l-5.9 3.2 1.3-6.5-4.9-4.6 6.6-.8z'/%3E%3C/svg%3E") repeat-x 0 0 / var(--size) var(--size);
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2.5 2.9 6.1 6.6.8-4.9 4.6 1.3 6.5L12 17.3l-5.9 3.2 1.3-6.5-4.9-4.6 6.6-.8z'/%3E%3C/svg%3E") repeat-x 0 0 / var(--size) var(--size);
}

/* ---------- Reviews ---------- */
.reviews { margin-top: 32px; padding: 56px var(--gutter) 24px; border-top: 1px solid var(--line); }
.reviews__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 24px; margin-bottom: 24px; }
.reviews__summary { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.reviews__empty { margin-bottom: 24px; font-size: 15px; }
.reviews__list { display: grid; gap: 0; margin: 0 0 32px; padding: 0; list-style: none; }
.review { padding: 24px 0; border-bottom: 1px solid var(--line); }
.review:first-child { border-top: 1px solid var(--line); }
.review__top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 8px; font-size: 14px; }
.review__author { font-weight: 600; }
.review__verified { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #1d6b3a; }
.review__text { margin-top: 10px; max-width: 70ch; color: var(--ink-2); }
.reviews__write { max-width: 720px; }
.reviews__write > summary { list-style: none; display: inline-flex; gap: 8px; cursor: pointer; }
.reviews__write > summary::-webkit-details-marker { display: none; }
.reviews__write[open] > summary { margin-bottom: 24px; }
.reviews__write[open] > summary svg { transform: rotate(45deg); }
.reviews__write > summary svg { transition: transform .25s var(--ease); }
.review-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.review-form > * { grid-column: 1 / -1; }
.review-form > .muted { font-size: 13px; margin: 0; }
.review-form .form-submit { margin: 0; }
@media (min-width: 768px) { .review-form .field--half { grid-column: span 1; } }
.rate { border: 0; margin: 0; padding: 0; }
.rate legend { margin-bottom: 6px; font-size: 14px; font-weight: 500; }
.rate__stars { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.rate__stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rate__stars label {
	width: 32px; height: 32px; cursor: pointer; background: var(--line-strong);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2.5 2.9 6.1 6.6.8-4.9 4.6 1.3 6.5L12 17.3l-5.9 3.2 1.3-6.5-4.9-4.6 6.6-.8z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2.5 2.9 6.1 6.6.8-4.9 4.6 1.3 6.5L12 17.3l-5.9 3.2 1.3-6.5-4.9-4.6 6.6-.8z'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: background-color .15s, transform .15s;
}
.rate__stars label:hover, .rate__stars label:hover ~ label,
.rate__stars input:checked ~ label { background: var(--star); }
.rate__stars input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 2px; }
.rate__stars label:active { transform: scale(.9); }
@media (min-width: 1024px) {
	.reviews { margin-top: 48px; padding: 80px 40px 24px; display: grid; grid-template-columns: 320px minmax(0, 1fr); column-gap: 80px; align-items: start; }
	.reviews__head { grid-column: 1; grid-row: 1 / span 4; flex-direction: column; align-items: flex-start; position: sticky; top: calc(var(--header-h) + 32px); }
	.reviews > :not(.reviews__head) { grid-column: 2; }
}
.reviews + .section--related { margin-top: 0; }

/* ---------- Favourites page ---------- */
.favs { padding: 40px var(--gutter) 0; }
.favs__head { margin-bottom: 32px; }
.favs__head .lead { margin-top: 12px; max-width: 560px; color: var(--ink-2); }
.favs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 8px; }
.favs__grid .product-card__info { margin-top: 12px; }
.favs__grid .product-card.is-loading .product-card__media { display: block; aspect-ratio: 5 / 6; background: var(--card); animation: filago-shimmer 1.2s infinite alternate; }
@keyframes filago-shimmer { from { opacity: 1; } to { opacity: .55; } }
.favs__empty { padding-top: 24px; }
.favs__icon { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--soft); color: var(--sale); }
@media (min-width: 768px) { .favs__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 16px; } }
@media (min-width: 1024px) {
	.favs { padding: 56px 40px 0; }
	.favs__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 20px; }
	.favs__grid :is(.product-card__info, .product-card__meta) { padding: 0; }
}

/* ---------- Shop: one / two per row on phones ---------- */
.plp__grid-toggle { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border: 1px solid var(--line-strong); border-radius: 999px; }
.plp__grid-icon { display: flex; gap: 2px; }
.plp__grid-icon i { display: block; width: 6px; height: 14px; border: 1.5px solid currentColor; border-radius: 1.5px; }
.plp__grid-icon--one i { width: 12px; }
.plp__grid-toggle[aria-pressed="false"] .plp__grid-icon--two,
.plp__grid-toggle[aria-pressed="true"] .plp__grid-icon--one { display: none; }
@media (max-width: 767px) {
	.plp__grid--one .products { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.plp__grid--one .product-card__title { font-size: 16px; }
}
@media (min-width: 768px) { .plp__grid-toggle { display: none; } }

/* ---------- Home: editorial category tiles (caption on the photo) ---------- */
.tiles--editorial .tile__media { aspect-ratio: 3 / 4; }
.tiles--editorial .tile__media::after {
	content: ""; position: absolute; inset: 45% 0 0; pointer-events: none;
	background: linear-gradient(180deg, rgba(20, 15, 15, 0), rgba(20, 15, 15, .62));
}
.tiles--editorial .tile > a, .tiles--editorial .tile > div { position: relative; display: block; }
.tiles--editorial .tile__caption {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
	display: grid; gap: 8px; padding: 16px; color: var(--white);
}
.tiles--editorial .tile__label {
	margin: 0; padding-bottom: 10px; text-align: left;
	font-family: var(--serif); font-size: 30px; line-height: 1; letter-spacing: -0.005em; font-weight: 400;
	border-bottom: 1px solid rgba(255, 255, 255, .6);
}
.tiles--editorial .tile__note { font-size: 13px; opacity: .9; }
.tiles--editorial .tile.is-soon .tile__label { color: var(--white); }
.tiles--editorial a .tile__label { background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px; transition: background-size .5s var(--ease); }
.tiles--editorial a:hover .tile__label { background-size: 100% 1px; }
@media (min-width: 1024px) {
	.tiles--editorial .tile__caption { padding: 24px; gap: 10px; }
	.tiles--editorial .tile__label { font-size: 44px; padding-bottom: 12px; }
	.tiles--editorial .tile__note { font-size: 14px; }
}
@media (prefers-reduced-motion: no-preference) {
	.mo--tiles .tile__note { opacity: 0; transform: translateY(10px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); transition-delay: calc(var(--d, 0ms) + .45s); }
	.mo--tiles.is-in .tile__note { opacity: .9; transform: none; }
}

/* =====================================================================
   Campaign home (from a review of mlameh.com, Oct 2026):
   serif campaign titles over photos, lookbook mosaic, home FAQ.
   ===================================================================== */

/* ---------- Hero: small tracked kicker over a large light serif ---------- */
.hero__kicker {
	margin-bottom: 14px;
	font-size: 11px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase;
	text-shadow: 0 1px 12px rgba(0, 0, 0, .25);
}
.hero__title,
.feature .display-1,
.lookbook__title {
	font-family: var(--serif);
	font-weight: 400;
	letter-spacing: -0.01em;
}
.hero__title { font-size: 58px; line-height: .9; text-shadow: 0 2px 30px rgba(0, 0, 0, .2); }
.feature .display-1 { font-size: 54px; line-height: .92; }
.lookbook__title { font-size: 48px; line-height: .95; }
@media (min-width: 768px) {
	.hero__kicker { font-size: 12px; }
	.hero__title { font-size: 88px; }
	.feature .display-1 { font-size: 80px; }
	.lookbook__title { font-size: 68px; }
}
@media (min-width: 1024px) {
	.hero__kicker { margin-bottom: 22px; font-size: 13px; }
	.hero__title { font-size: clamp(110px, 9.4vw, 150px); line-height: .86; letter-spacing: -0.015em; }
	.hero__subtitle { margin-top: 22px; }
	.feature .display-1 { font-size: clamp(96px, 8vw, 124px); line-height: .9; }
	.lookbook__title { font-size: 96px; line-height: .9; }
}
/* Serif accents and descenders need more room inside the masked words. */
.hero__title .w, .mo--words .w { padding: .12em 0 .2em; margin: -.12em 0 -.2em; }

/* ---------- Lookbook mosaic: one large look, four smaller ones ---------- */
.lookbook__head { margin-bottom: 32px; }
.lookbook__head .eyebrow { margin-bottom: 14px; }
.lookbook__text { margin-top: 16px; max-width: 46ch; font-size: 17px; line-height: 1.45; color: var(--ink-2); }
.lookbook__head .link-underline { margin-top: 20px; }
@media (min-width: 1024px) {
	.lookbook__head {
		display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: 64px; align-items: end;
		margin-bottom: 56px;
	}
	.lookbook__head .eyebrow { grid-column: 1 / -1; }
	.lookbook__aside { justify-self: end; max-width: 40ch; padding-bottom: 10px; }
	.lookbook__text { margin-top: 0; }
}
.lookbook__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.look:first-child { grid-column: 1 / -1; }
.look__link { position: relative; display: block; height: 100%; aspect-ratio: 3 / 4; overflow: hidden; background: var(--card); border-radius: 2px; }
.look:first-child .look__link { aspect-ratio: 4 / 5; }
.look__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform 1.2s cubic-bezier(.16, 1, .3, 1); }
.look__link::after {
	content: ""; position: absolute; inset: 55% 0 0; pointer-events: none;
	background: linear-gradient(to top, rgba(20, 15, 15, .28), rgba(20, 15, 15, 0));
}
.look__tag {
	position: absolute; z-index: 1; left: 10px; bottom: 10px;
	display: inline-flex; align-items: center; gap: 10px;
	max-width: calc(100% - 20px);
	padding: 6px 6px 6px 14px; border-radius: 999px;
	background: rgba(255, 255, 255, .92); color: var(--ink);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	font-size: 13px; line-height: 1.2;
	box-shadow: 0 6px 24px rgba(20, 15, 15, .12);
}
.look__name { min-width: 0; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.look__price { flex-shrink: 0; color: var(--ink-2); white-space: nowrap; }
.look__price del { display: none; }
.look__price ins { text-decoration: none; }
.look__go {
	flex-shrink: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
	background: var(--ink); color: var(--white);
	transition: transform .4s var(--ease);
}
@media (max-width: 1023px) {
	.look:not(:first-child) .look__price { display: none; }
	.look:not(:first-child) .look__tag { left: 8px; bottom: 8px; max-width: calc(100% - 16px); gap: 8px; padding-left: 12px; font-size: 12px; }
	.look:not(:first-child) .look__go { width: 24px; height: 24px; }
}
@media (hover: hover) {
	.look__link:hover .look__img { transform: scale(1.05); }
	.look__link:hover .look__go { transform: translateX(2px) rotate(-45deg); }
}
@media (min-width: 768px) {
	.lookbook__grid { gap: 16px; }
	.lookbook__grid--mosaic { grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); }
	.lookbook__grid--mosaic .look:first-child { grid-column: auto; grid-row: span 2; }
	.lookbook__grid--mosaic .look:first-child .look__link { aspect-ratio: auto; }
	.lookbook__grid--row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
	.lookbook__grid--row .look:first-child { grid-column: auto; }
	.lookbook__grid--row .look:first-child .look__link { aspect-ratio: 3 / 4; }
	.look:first-child .look__tag { left: 24px; bottom: 24px; padding: 8px 8px 8px 18px; font-size: 15px; }
	.look:first-child .look__go { width: 34px; height: 34px; }
}
@media (min-width: 1024px) {
	.look:not(:first-child) .look__tag { left: 16px; bottom: 16px; max-width: calc(100% - 32px); font-size: 14px; }
}

/* ---------- Home FAQ ---------- */
.home-faq { background: var(--soft); }
.home-faq__head .eyebrow { margin-bottom: 14px; }
.home-faq__text { margin-top: 16px; max-width: 36ch; font-size: 17px; line-height: 1.45; color: var(--ink-2); }
.home-faq .btn { margin-top: 24px; }
.home-faq .accordion { margin-top: 36px; border-top-color: var(--line-strong); }
.home-faq .accordion__item { border-bottom-color: var(--line-strong); }
.home-faq .accordion__item summary { gap: 16px; padding: 22px 0; font-size: 18px; letter-spacing: -0.015em; }
.home-faq .accordion__body { max-width: 60ch; font-size: 16px; line-height: 1.55; }
@media (min-width: 1024px) {
	.home-faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 96px; align-items: start; }
	.home-faq__head { position: sticky; top: calc(var(--header-h) + 40px); }
	.home-faq .accordion { margin-top: 8px; }
	.home-faq .accordion__item summary { padding: 28px 0; font-size: 22px; }
}

@media (prefers-reduced-motion: no-preference) {
	.has-motion .hero__kicker { opacity: 0; transform: translateY(10px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
	.has-motion .hero.is-ready .hero__slide.is-active .hero__kicker { opacity: 1; transform: none; transition-delay: .15s; }
}
.hero__title, .lookbook__title { text-wrap: balance; }
@media (prefers-reduced-motion: no-preference) {
	/* Push serif words fully below their (taller) mask so no accent peeks out before they rise. */
	.has-motion .hero__title .w__in,
	.mo--words .w__in { transform: translateY(140%); }
	.has-motion .hero.is-ready .hero__slide.is-active .hero__title .w__in,
	.mo--words.is-in .w__in { transform: none; }
}

/* =====================================================================
   Footer: serif newsletter, brand column, service strip, full-width wordmark.
   ===================================================================== */
.site-footer {
	--f-line: rgba(255, 255, 255, .14);
	--f-dim: rgba(255, 255, 255, .62);
	position: relative; overflow: hidden;
	background: var(--ink); color: var(--white);
	padding: 56px var(--gutter) calc(24px + env(safe-area-inset-bottom));
	font-size: 14px;
}
.site-footer a { transition: color .2s, opacity .2s; }
.footer-eyebrow { margin-bottom: 14px; font-size: 11px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--f-dim); }

/* Newsletter */
.footer-news { display: grid; gap: 28px; padding-bottom: 48px; border-bottom: 1px solid var(--f-line); }
.footer-news__title { font-family: var(--serif); font-weight: 400; font-size: 48px; line-height: .95; letter-spacing: -0.01em; text-wrap: balance; }
.footer-news__lead { margin-top: 14px; max-width: 40ch; font-size: 16px; line-height: 1.45; color: var(--f-dim); }
.footer-news__form { position: relative; align-self: end; }
.footer-news__field { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid rgba(255, 255, 255, .4); transition: border-color .25s; }
.footer-news__field:focus-within { border-color: var(--white); }
.footer-news__field input {
	flex: 1; min-width: 0; height: 60px; padding: 0;
	border: 0; background: transparent; color: var(--white); font-size: 18px; letter-spacing: -0.01em;
}
.footer-news__field input::placeholder { color: rgba(255, 255, 255, .6); }
.footer-news__field input:focus { outline: 0; }
.footer-news__submit {
	flex-shrink: 0; display: inline-flex; align-items: center; gap: 10px;
	height: 44px; padding: 0 8px 0 18px; border-radius: 999px;
	background: var(--white); color: var(--ink); font-size: 14px; font-weight: 500;
}
.footer-news__submit .icon { display: grid; place-items: center; width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: var(--ink); color: var(--white); transition: transform .35s var(--ease); }
@media (hover: hover) { .footer-news__submit:hover .icon { transform: translateX(3px); } }
.footer-news__note { margin-top: 12px; font-size: 12px; color: rgba(255, 255, 255, .6); }
.footer-news .form-status { margin-top: 10px; }
.site-footer .form-status--ok { color: #9fe0b4; }
.site-footer .form-status--error { color: #ffb3bd; }

/* Brand + link columns */
.site-footer__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; padding: 48px 0; }
.footer-brand { grid-column: 1 / -1; }
.footer-brand__statement { max-width: 30ch; font-family: var(--serif); font-size: 26px; line-height: 1.15; letter-spacing: -0.005em; }
.footer-brand__info { display: grid; gap: 10px; margin-top: 22px; color: var(--f-dim); }
.footer-brand__info li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.4; }
.footer-brand__info .icon { flex-shrink: 0; margin-top: 1px; }
.social { display: flex; gap: 8px; margin-top: 24px; }
.social a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--f-line); border-radius: 50%; }
.social a:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.footer-col__title { margin-bottom: 14px; font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--f-dim); }
.footer-col li a { display: inline-block; padding: 5px 0; font-size: 15px; line-height: 1.4; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 3px) / 0 1px no-repeat; transition: background-size .35s var(--ease); }
.footer-col li a:hover { background-size: 100% 1px; }
.footer-col__cta { display: inline-flex !important; align-items: center; gap: 8px; }
.footer-col__cta .icon { transition: transform .3s var(--ease); }
@media (hover: hover) { .footer-col__cta:hover .icon { transform: translateX(3px); } }
/* Link columns are <details> (footer.php): folded on phones by theme.js, always open from 768 px. */
.footer-col__head { display: block; list-style: none; }
.footer-col__head::-webkit-details-marker { display: none; }
.footer-col__head .icon { display: none; }
@media (max-width: 767px) {
	.site-footer__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.footer-brand { margin-bottom: 32px; }
	.footer-col { border-top: 1px solid var(--f-line); }
	.footer-col:last-child { border-bottom: 1px solid var(--f-line); }
	.footer-col__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; cursor: pointer; }
	.footer-col__head .footer-col__title { margin: 0; }
	.footer-col__head .icon { display: block; flex: none; transition: transform .3s var(--ease); }
	.footer-col[open] > .footer-col__head .icon { transform: rotate(180deg); }
	.footer-col > ul { padding-bottom: 18px; }
}
@media (min-width: 768px) {
	.footer-col__head { pointer-events: none; }
}

/* Service strip */
.footer-badges { display: grid; border-top: 1px solid var(--f-line); }
.footer-badges li { display: flex; align-items: center; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--f-line); }
.footer-badges li > span { display: grid; gap: 2px; color: var(--f-dim); font-size: 13px; }
.footer-badges strong { color: var(--white); font-size: 14px; font-weight: 500; }
.footer-badges .icon { flex-shrink: 0; width: 44px; height: 44px; padding: 11px; border: 1px solid var(--f-line); border-radius: 50%; }
/* Phones: the last link fold already closes with a hairline, so no second one 48 px below it. */
@media (max-width: 767px) { .footer-badges { border-top: 0; } }

/* Full-width wordmark */
.footer-mark { display: block; margin: 48px 0 8px; color: var(--white); }
.footer-mark__svg { display: block; width: 100%; height: auto; overflow: visible; }
.footer-mark:hover { opacity: .85; }

/* Legal row */
.site-footer__legal {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px;
	padding-top: 20px; border-top: 1px solid var(--f-line);
	font-size: 13px; color: var(--f-dim);
}
.site-footer__legal a:hover { color: var(--white); }
.footer-top { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; color: var(--white); font-size: 13px; }
.footer-top span { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--f-line); border-radius: 50%; transition: background .25s, color .25s, transform .35s var(--ease); }
.footer-top span .icon { transform: rotate(-90deg); }
@media (hover: hover) { .footer-top:hover span { background: var(--white); color: var(--ink); transform: translateY(-3px); } }

@media (min-width: 768px) {
	.site-footer { padding-top: 72px; }
	.footer-news { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; padding-bottom: 64px; }
	.footer-news__title { font-size: 64px; }
	/* Four link columns side by side ("Nous contacter" used to wrap alone onto a second row). */
	.site-footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 64px 0; }
	.footer-badges { grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--f-line); }
	.footer-badges li { border-bottom: 0; padding: 24px 20px 24px 0; }
	.footer-badges li + li { padding-left: 24px; border-left: 1px solid var(--f-line); }
	.footer-mark { margin-top: 64px; }
}
@media (min-width: 1024px) {
	.site-footer { padding-top: 96px; }
	.footer-news { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 96px; padding-bottom: 80px; }
	.footer-news__title { font-size: 92px; line-height: .9; }
	.footer-news__lead { font-size: 17px; }
	.site-footer__grid { grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)); gap: 32px; padding: 80px 0; }
	.footer-brand { grid-column: auto; padding-right: 48px; }
	.footer-brand__statement { font-size: 30px; }
	.footer-badges li { padding: 28px 24px 28px 0; }
	.footer-badges li + li { padding-left: 32px; }
	.footer-mark { margin: 80px 0 16px; }
}
/* Small laptops and landscape tablets: five columns left 136 px per link column at 1024 ("Écrire un message"
   and "Suivre ma commande" wrapped), so the brand line keeps its own row above the four columns until 1280. */
@media (min-width: 1024px) and (max-width: 1279px) {
	.site-footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 48px; }
	.footer-brand { grid-column: 1 / -1; padding-right: 0; }
}
@media (max-width: 767px) {
	.footer-news__submit span { display: none; }
	.footer-news__submit { padding: 0 7px; width: 44px; justify-content: center; }
}

@media (prefers-reduced-motion: no-preference) {
	.has-motion .footer-mark.mo { clip-path: inset(0 0 100% 0); transform: translateY(24%); transition: clip-path 1.4s var(--ease-out), transform 1.4s var(--ease-out); }
	.has-motion .footer-mark.mo.is-in { clip-path: inset(-10% 0 -10% 0); transform: none; }
}

/* =====================================================================
   Univers (inc/univers.php): Femme, Homme and Enfant side by side,
   no univers first.
   ===================================================================== */

/* ---------- Home: Tout / Femme / Homme / Enfant tabs over the new arrivals ---------- */
.univers-tabs {
	display: flex; gap: 8px; margin: -8px 0 24px; padding: 0 calc(var(--gutter) / 2);
	overflow-x: auto; scrollbar-width: none;
}
.univers-tabs::-webkit-scrollbar { display: none; }
.univers-tabs__btn {
	flex-shrink: 0; min-height: 40px; padding: 0 18px;
	border: 1px solid var(--line-strong); border-radius: 999px; background: transparent;
	font: inherit; font-size: 14px; font-weight: 500; color: var(--ink); cursor: pointer;
	transition: background-color .2s, color .2s, border-color .2s;
}
.univers-tabs__btn:hover { border-color: var(--ink); }
.univers-tabs__btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.univers-empty { margin: 0 calc(var(--gutter) / 2); padding: 64px 16px; border-radius: 2px; background: var(--soft); text-align: center; font-family: var(--serif); font-size: 28px; line-height: 1.1; }
.carousel__track > li[hidden] { display: none; }
@media (min-width: 1024px) {
	.univers-tabs { margin: -20px 0 36px; padding: 0; }
	.univers-tabs__btn { min-height: 44px; padding: 0 22px; font-size: 15px; }
	.univers-empty { margin: 0; padding: 120px 24px; font-size: 40px; }
}

/* ---------- Home: the three univers tiles ---------- */
.tiles--univers { grid-auto-columns: 78%; }
.tiles--univers .tile__media { aspect-ratio: 4 / 5; }
@media (min-width: 768px) {
	.tiles--univers { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); gap: 8px; overflow: visible; margin: 0; padding: 0; }
	.tiles--univers .tile__media { aspect-ratio: 3 / 4; }
}
/* An univers without a photo yet: a quiet card with dark type instead of the photo caption. */
.tile--blank .tile__media { background: var(--card); }
.tiles--editorial .tile--blank .tile__media::after { display: none; }
.tiles--editorial .tile.tile--blank .tile__caption,
.tiles--editorial .tile.tile--blank .tile__label { color: var(--ink); border-bottom-color: var(--line-strong); }
.tiles--editorial .tile.tile--blank .tile__note { color: var(--muted); opacity: 1; }

/* ---------- Menu: empty univers × category cards ---------- */
.mega__card--soon .mega__media { background: var(--card); }
.mega__card--soon .mega__img { filter: grayscale(.35) brightness(1.04); opacity: .78; }
.mega__card--soon .mega__label { color: var(--muted); }
/* "Tout voir" of an univers without pieces yet (inc/extras.php, .mega__card--photo): its photo fills the card
   under a dark fade; the type cards around it stay blank sand cards rather than repeat that photo. */
@media (min-width: 1024px) {
	.nav .sub-menu a.mega__card--photo { position: relative; overflow: hidden; isolation: isolate; color: #fff; }
	.nav .mega__card--photo .mega__media { position: absolute; inset: 0; z-index: -1; margin: 0; aspect-ratio: auto; border-radius: 0; }
	.nav .mega__card--photo .mega__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 15, 15, 0) 30%, rgba(20, 15, 15, .62) 62%, rgba(20, 15, 15, .8)); }
	.nav .mega__card--photo .mega__sum { color: rgba(255, 255, 255, .85); }
}

/* ---------- Listing: "Femme" over "Pull" on a scoped page ---------- */
.plp__eyebrow { margin: 16px 0 -4px; }

/* ---------- Listing (2026-11-01): shortcut pills, active chips, "Lire plus", empty listings ---------- */
/* Pills and the active-filter row are for phones and tablets; the desktop sidebar does the same job. */
.plp-pills { margin: -4px calc(-1 * var(--gutter)) 12px; }
.plp-pills__list { display: flex; gap: 8px; overflow-x: auto; padding: 4px var(--gutter) 6px; scroll-padding: 0 var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
.plp-pills__list::-webkit-scrollbar { display: none; }
.plp-pills__list > li { flex: none; }
.plp-pill {
	display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 16px;
	border: 1px solid var(--line-strong); border-radius: 999px;
	font-size: 14px; font-weight: 500; white-space: nowrap; color: var(--ink);
	transition: background-color .2s, color .2s, border-color .2s;
}
a.plp-pill:hover { border-color: var(--ink); }
.plp-pill[aria-current] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.plp-pill__n { font-size: 12px; color: var(--muted); }
.plp-pill[aria-current] .plp-pill__n { color: inherit; opacity: .8; }
.plp-pill--soon { border-style: dashed; color: var(--muted); }
.plp__chips { display: flex; align-items: center; gap: 8px; overflow-x: auto; margin: -4px calc(-1 * var(--gutter)) 16px; padding: 2px var(--gutter); scrollbar-width: none; }
.plp__chips::-webkit-scrollbar { display: none; }
.plp__chips > * { flex: none; }
.plp__chips .chip { height: 36px; }
.plp__chips-clear { font-size: 13px; }
@media (min-width: 1024px) { .plp-pills, .plp__chips { display: none; } }
/* Long category descriptions: two lines on phones, "Lire plus" opens the rest (theme.js). */
.plp__desc.is-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.plp__desc.is-clamped > * { display: inline; }
.plp__more { margin-top: 6px; font-size: 14px; font-weight: 500; }
.plp__tip { margin-top: 12px; font-size: 14px; color: var(--ink-2); }
.filters__cats a.is-soon { color: var(--muted); }
.filters__cats .soon { margin-left: 4px; font-size: 12px; }
.badge--new { background: var(--ink); color: var(--white); }

/* =====================================================================
   Editorial details (Oct 2026): burgundy italic accents, the brand
   line, the serif strip and colour tiles.
   ===================================================================== */

/* ---------- Italic accents: *word* in a title (filago_title()) ---------- */
.display-1 em, .display-2 em, .display-3 em, .lookbook__title em, .manifesto__text em { font-style: italic; color: var(--accent); }
.hero__title em, .feature em, .footer-news__title em { color: inherit; }

/* ---------- Small labels above titles: burgundy ---------- */
.eyebrow { color: var(--accent); }

/* ---------- Brand line before the univers tiles (one ivory block with them) ---------- */
.manifesto { padding: 88px var(--gutter) 8px; background: var(--soft); text-align: center; }
.manifesto__mark { margin-bottom: 24px; font-size: 16px; color: var(--accent); }
.manifesto__text {
	max-width: 19ch; margin: 0 auto;
	font-family: var(--serif); font-size: 38px; line-height: 1.08; letter-spacing: -0.01em; text-wrap: balance;
}
.manifesto__sign { margin-top: 28px; font-size: 12px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.section--univers { background: var(--soft); }
.tiles--univers { gap: 8px; }
@media (min-width: 768px) {
	.manifesto { padding-top: 120px; }
	.manifesto__text { font-size: 56px; }
}
@media (min-width: 1024px) {
	.manifesto { padding: 168px var(--gutter) 24px; }
	.manifesto__mark { margin-bottom: 36px; }
	.manifesto__text { max-width: 18ch; font-size: clamp(64px, 5.6vw, 88px); line-height: 1.04; }
	.manifesto__sign { margin-top: 40px; font-size: 13px; }
}

/* ---------- Strip under the hero: slow serif italics on ivory ---------- */
.marquee { border-bottom: 0; background: var(--soft); }
.marquee__group li {
	gap: 32px; padding: 14px 0 14px 32px;
	font-family: var(--serif); font-style: italic; font-size: 19px; font-weight: 400; letter-spacing: 0;
}
.marquee__group li::after {
	content: "✦"; width: auto; height: auto; border-radius: 0; background: none; opacity: 1;
	font-style: normal; font-size: 11px; color: var(--accent);
}
@media (min-width: 1024px) {
	.marquee__group li { gap: 48px; padding: 20px 0 20px 48px; font-size: 24px; }
}
@media (prefers-reduced-motion: no-preference) {
	.marquee__track { animation-duration: 64s; }
}

/* ---------- Shop by colour: tall photo tiles, colour name in serif with a true-colour dot ---------- */
.tiles--colours { gap: 8px; }
.tiles--colours .tile__media { aspect-ratio: 3 / 4; }
.tiles--colours .tile__label { display: flex; align-items: center; gap: 8px; font-size: 18px; padding-bottom: 8px; white-space: nowrap; }
@media (min-width: 768px) { .tiles--colours .tile__label { gap: 10px; font-size: 22px; } }
.tile__dot { width: 12px; height: 12px; flex-shrink: 0; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 1px rgba(255, 255, 255, .75); }
@media (min-width: 1024px) {
	/* 151 px tiles at 1024: 26 px pushed "Bordeaux" past the caption padding (and its hairline); the size
	   eases from 23.5 px there to 26 px by 1130 px. Cozy sets its own size (cozy.css, "Univers and colour tiles"). */
	.tiles--colours .tile__label { font-size: clamp(23px, 2.3vw, 26px); }
	.tiles--colours .tile__caption { padding: 18px; }
}
/* Long names ("Rouge Bordeaux", "Bleu Marine") wrap inside narrow tiles instead of running out of them
   (they caused sideways scrolling at 1024 px). The label stays a flex row, so the name wraps as one block
   beside the dot: "Marine" starts under "Bleu", not under the dot. The dot is centred on the first line. */
.tiles--colours .tile__label { align-items: flex-start; white-space: normal; line-height: 1.05; text-wrap: balance; }
.tiles--colours .tile__dot { margin-top: calc(.525em - 6px); }

/* Promises strip: pause button (WCAG 2.2.2). motion.js shows it only where the strip moves. */
.marquee { position: relative; }
.marquee__toggle {
	position: absolute; z-index: 1; top: 50%; right: calc(var(--gutter) - 4px); transform: translateY(-50%);
	display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
	background: var(--white); color: var(--ink); cursor: pointer;
	box-shadow: 0 0 0 6px var(--soft), 0 0 0 7px var(--line);
}
.marquee__toggle[hidden], .marquee__toggle .is-play, .marquee.is-paused .marquee__toggle .is-pause { display: none; }
.marquee.is-paused .marquee__toggle .is-play { display: block; }
.marquee.is-paused .marquee__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .marquee__toggle { display: none; } }

/* Art-directed photos (filago_art_image()): the <picture> wrapper stays out of the layout. Its <source>
   would then become a grid item of .hero__media and take a row above the photo (a grey band at the top of
   the hero, 161 px at 768), so it gets no box (the browser still reads it to pick the file). */
picture.art { display: contents; }
picture.art > source { display: none; }

/* =====================================================================
   Page transitions (inc/transitions.php, 2026-11-02): no white flash between pages. The product photo glides
   from its card into the product gallery (and back), the header stays put, the rest cross-fades. Chrome /
   Edge 126+, Safari 18.2+; other browsers and reduced motion load pages as before. The head script names
   the photos only during the transition (a name must be unique on the page).
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
	@view-transition { navigation: auto; }
}
.vt-photo .pdp__gallery .pdp__slide:first-child { view-transition-name: filago-photo; }
.vt-on .site-header { view-transition-name: filago-header; }
/* The new page sits ready underneath and the old one fades off on top: quick, no doubled text for long, and
   always opaque (a cross-fade would let the cherry html background show through halfway). */
::view-transition-old(root) { z-index: 1; mix-blend-mode: normal; animation: filago-vt-out .22s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { mix-blend-mode: normal; animation: none; }
@keyframes filago-vt-out { to { opacity: 0; } }
::view-transition-group(filago-photo) {
	z-index: 1;
	animation-duration: .55s;
	animation-timing-function: cubic-bezier(.65, 0, .35, 1);
}
/* Card (5:6) and gallery (3:4) differ: the snapshot fills the moving box, cropped, with the theme's corners. */
::view-transition-image-pair(filago-photo) { overflow: hidden; border-radius: var(--radius); }
::view-transition-old(filago-photo),
::view-transition-new(filago-photo) { height: 100%; object-fit: cover; animation-duration: .55s; }
/* Only the product page's photo moves (fading the two into each other doubled the face): it holds the whole
   picture and the card is its centred 5:6 crop (filago-card), so cover + centre match the card at the card end.
   To the product (vt-photo) the card snapshot is hidden; back to the listing (vt-back) the card's own one is. */
.vt-photo::view-transition-old(filago-photo),
.vt-back::view-transition-new(filago-photo) { display: none; }
.vt-photo::view-transition-new(filago-photo),
.vt-back::view-transition-old(filago-photo) { animation: none; }
::view-transition-group(filago-header) { z-index: 2; animation-duration: .3s; }

/* Add to cart: the photo flies into the bag (theme.js flyToBag), then the bag bumps. */
.flyer {
	position: fixed; z-index: 150; margin: 0; pointer-events: none;
	object-fit: cover; background: var(--card);
	box-shadow: 0 14px 34px rgba(20, 15, 15, .22);
	will-change: transform, opacity;
}
.hdr-btn--cart.is-bump { animation: filago-bump .55s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes filago-bump {
	35% { transform: scale(1.22) rotate(-8deg); }
	65% { transform: scale(.94) rotate(4deg); }
}
@media (prefers-reduced-motion: reduce) { .hdr-btn--cart.is-bump { animation: none; } }