/* Maison Layli — WooCommerce glue.
 *
 * Kept separate from style.css (which is a 1:1 copy of the static design) so
 * the base file stays pristine. Only the bits WooCommerce needs that the
 * static site never had: quantity inputs, store notices, and cart/checkout
 * brand alignment. */

/* ── Header/footer logo fix on WooCommerce pages ──
 * woocommerce-layout.css ships `.woocommerce img,.woocommerce-page img
 * { height:auto; max-width:100% }` (specificity 0,1,1), which outranks
 * `.nav-logo-img { height:46px }` and blows the logo up to natural size on
 * every shop/cart/checkout/account page (they carry the woocommerce-page body
 * class; the homepage does not). Re-assert the intended sizes with a selector
 * that outranks it. */
nav a.nav-logo img.nav-logo-img {
	height: 46px !important;
	width: auto !important;
	max-width: none !important;
}
footer .footer-brand img.footer-logo-img {
	height: 46px !important;
	width: auto !important;
	max-width: none !important;
}
@media (max-width: 768px) {
	nav a.nav-logo img.nav-logo-img {
		height: 35px !important;
	}
	footer .footer-brand img.footer-logo-img {
		height: 38px !important;
	}
}

/* ── Shop pagination vs. fixed site nav ──
 * style.css targets the bare `nav` tag to pin the site header
 * (`nav { position:fixed; top:var(--topbar-h); ... }`). WooCommerce also
 * wraps its pagination links in a `<nav class="woocommerce-pagination">`
 * element, so once the catalog grew past one page it inherited that same
 * fixed positioning and rendered on top of (and hid) the real header nav.
 * Restore normal document flow for WooCommerce's nav specifically. */
nav.woocommerce-pagination {
	position: static;
	top: auto;
	left: auto;
	right: auto;
	z-index: auto;
	margin: 2.5rem 0 0;
	text-align: center;
}

/* ── Shop / category pagination — brand styling ──
 * WooCommerce's default markup is a bare bordered box per page number. Restyle
 * as rounded pill buttons matching .filter-pill (numbers) and .product-fav /
 * .btn-ghost (prev/next arrows), so it reads as part of the design instead of
 * a default WordPress control. */
nav.woocommerce-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.35rem;
	border: none !important;
	background: none !important;
	padding: 0 !important;
}
nav.woocommerce-pagination .page-numbers li {
	display: flex;
	border: none !important;
	background: none !important;
}

/* Bare number links (2, 3, 4, 8…) — no border/circle, just spaced text. */
nav.woocommerce-pagination .page-numbers a.page-numbers,
nav.woocommerce-pagination .page-numbers span.page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 2.2rem;
	height: 2.2rem;
	padding: 0 0.3rem;
	border-radius: 100px;
	border: none;
	background: transparent !important;
	color: var(--deep);
	opacity: 0.55;
	font-family: var(--sans);
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1;
	transition: background 0.15s, color 0.15s, opacity 0.15s;
}
nav.woocommerce-pagination .page-numbers a.page-numbers:hover {
	opacity: 1;
}

/* Current page — the one filled circle. */
nav.woocommerce-pagination .page-numbers span.page-numbers.current {
	background: var(--mauve) !important;
	color: var(--cream);
	opacity: 1;
}

nav.woocommerce-pagination .page-numbers .page-numbers.dots {
	border: none !important;
	background: none !important;
	color: var(--muted);
	opacity: 1;
	min-width: 1.2rem;
}

/* Prev/Next — labeled pills with a chevron, bookending the number group. */
nav.woocommerce-pagination .page-numbers a.next.page-numbers,
nav.woocommerce-pagination .page-numbers a.prev.page-numbers {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-width: 0;
	height: auto;
	width: auto;
	padding: 0.85rem 1.6rem;
	border-radius: 100px;
	border: 1.5px solid rgba(28, 26, 22, 0.18);
	background: transparent !important;
	color: var(--deep);
	opacity: 1;
	font-family: var(--sans);
	font-weight: 500;
	font-size: 0.85rem;
}
nav.woocommerce-pagination .page-numbers a.next.page-numbers:hover,
nav.woocommerce-pagination .page-numbers a.prev.page-numbers:hover {
	border-color: var(--mauve);
	background: transparent !important;
	color: var(--deep);
}
nav.woocommerce-pagination .page-numbers a.prev.page-numbers { margin-right: 0.65rem; }
nav.woocommerce-pagination .page-numbers a.next.page-numbers { margin-left: 0.65rem; }
nav.woocommerce-pagination .pg-chevron {
	font-family: var(--sans);
	font-size: 1.2rem;
	line-height: 1;
}
nav.woocommerce-pagination .pg-label { line-height: 1; }

/* ── Category archive hero — the WooCommerce category image as a full-bleed
   banner behind the header, with a soft dark gradient so the eyebrow, title
   and breadcrumb stay legible over any photo. Only category pages that have an
   image get `.has-hero`; the shop page and imageless categories keep the plain
   beige header. ── */
.page-header.has-hero { background: var(--rose); }
/* Full-width image filling the banner, anchored to the right so the product
   side of the photo stays visible when the banner crops the sides. */
.page-header.has-hero .page-hero-img {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right center;
}
.page-header.has-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(20, 18, 14, 0.30) 0%, rgba(20, 18, 14, 0.55) 100%);
}
.page-header.has-hero > :not(.page-hero-img) { position: relative; z-index: 2; }
.page-header.has-hero .section-label,
.page-header.has-hero h1,
.page-header.has-hero h1 em,
.page-header.has-hero .breadcrumb,
.page-header.has-hero .breadcrumb a { color: var(--cream); }

/* Category + shop hero banner — ~25% taller than the shared header. */
body.tax-product_cat .page-header.has-hero,
body.woocommerce-shop .page-header.has-hero { padding-top: calc(12.9rem + var(--topbar-h)); padding-bottom: 7.3rem; }
@media (max-width: 1200px) { body.tax-product_cat .page-header.has-hero, body.woocommerce-shop .page-header.has-hero { padding-top: calc(11.6rem + var(--topbar-h)); padding-bottom: 6.65rem; } }
@media (max-width: 900px)  { body.tax-product_cat .page-header.has-hero, body.woocommerce-shop .page-header.has-hero { padding-top: calc(10.95rem + var(--topbar-h)); padding-bottom: 6.13rem; } }
@media (max-width: 600px)  { body.tax-product_cat .page-header.has-hero, body.woocommerce-shop .page-header.has-hero { padding-top: calc(10.3rem + var(--topbar-h)); padding-bottom: 5.61rem; } }

/* Homepage category cards — favour the right side of the photo when cropped. */
.cat-bg { object-position: right center; }

/* ── Quantity input styled to read like the static text stepper ── */
.pd-qty-stepper input.qty-val {
	width: 2.6rem;
	border: none;
	background: transparent;
	text-align: center;
	font-family: var(--sans);
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--deep);
	padding: 0;
	-moz-appearance: textfield;
	appearance: textfield;
}
.pd-qty-stepper input.qty-val::-webkit-outer-spin-button,
.pd-qty-stepper input.qty-val::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.pd-qty-stepper input.qty-val:focus {
	outline: none;
}
.pd-oos {
	font-size: 0.9rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 1.8rem;
}

/* AJAX "added to cart" link that WooCommerce injects after the card button. */
.product-footer .added_to_cart {
	display: none;
}

/* ── Store notices (classic + block) ── */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
ul.woocommerce-error,
.wc-block-components-notice-banner {
	font-family: var(--sans);
	font-size: 0.86rem;
	line-height: 1.6;
	border: 1px solid rgba(28, 26, 22, 0.15);
	background: var(--blush);
	color: var(--deep);
	padding: 0.9rem 1.1rem;
	border-radius: 0.4rem;
	margin: 0 auto 1.4rem;
	list-style: none;
}
.woocommerce-error,
ul.woocommerce-error {
	background: #f6e7e3;
	border-color: #e0b8b0;
}
.woocommerce-message a,
.woocommerce-info a {
	color: var(--mauve);
	text-decoration: underline;
}
.woocommerce-message .button,
.woocommerce-info .button {
	float: right;
	font-size: 0.78rem;
}

/* ── Cart / checkout / account page wrapper ── */
.page-content-wrap {
	max-width: 1180px;
	margin: 0 auto;
	padding: 1rem 3rem 5rem;
}
@media (max-width: 768px) {
	.page-content-wrap {
		padding: 0.5rem 1.2rem 3rem;
	}
}

/* Nudge WooCommerce's default buttons toward the brand ink, so cart/checkout
   blocks match the bespoke pages without a full checkout re-skin. */
.woocommerce .button,
.woocommerce button.button,
.wc-block-components-button {
	background: var(--mauve);
	color: var(--cream);
	border-radius: 100px;
	font-family: var(--sans);
	font-weight: 500;
	letter-spacing: 0.02em;
	border: none;
}
.woocommerce .button:hover,
.woocommerce button.button:hover,
.wc-block-components-button:hover {
	background: var(--deep);
}
.woocommerce a.button.wc-backward {
	background: transparent;
	color: var(--mauve);
	border: 1px solid rgba(28, 26, 22, 0.35);
}

/* Price colour consistency in cart/checkout tables. */
.woocommerce .price,
.woocommerce-Price-amount {
	color: var(--mauve);
}

/* Related-products spacing (section already styled; add breathing room). */
.related-section {
	padding-top: 1rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   Product cards — boutique / category / bestseller grid
   Inset rounded image, cream badge, centred content, price, ADD TO CART + fav.
   ══════════════════════════════════════════════════════════════════════════ */
.products-grid {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 340px));
	justify-content: center;
	gap: 1.9rem 1.8rem;
	max-width: 1460px;
	margin-left: auto;
	margin-right: auto;
}

.product-card {
	--ml-cta: #c2636a;
	background: #fff;
	border: 1px solid rgba(28, 26, 22, 0.07);
	border-radius: 1.35rem;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 1px 3px rgba(20, 18, 14, 0.04);
	transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
	text-align: center;
}
.product-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 26px 54px rgba(28, 26, 22, 0.13);
	border-color: rgba(28, 26, 22, 0.1);
}

/* Inset, rounded image on a soft beige ground.
   Explicit width:100% because a block box with aspect-ratio nested inside a
   flex column can end up sized by its content instead of stretching to fill
   — without this it renders as a small, centred (text-align:center) square. */
.product-card .product-media { display: block; width: 100%; padding: 0.7rem 0.7rem 0; }
.product-card .product-img-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 4.3;
	overflow: hidden;
	border-radius: 1.1rem;
	background: linear-gradient(160deg, #efe7db 0%, #f7f1e8 100%);
	display: block;
}
.product-card .product-img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.2, 0, 0.2, 1);
}
.product-card:hover .product-img-wrap img { transform: scale(1.05); }

/* Cream badge pill */
.product-card .product-tag {
	top: 0.7rem;
	left: 0.7rem;
	background: rgba(255, 255, 255, 0.94);
	color: var(--deep);
	font-size: 0.5rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 0.35rem 0.7rem;
	border-radius: 0.45rem;
	box-shadow: 0 2px 10px rgba(20, 18, 14, 0.1);
}

/* Body — centred. Positioned + clipped so the decorative leaf mark (below)
   stays confined to this section instead of bleeding into the CTA panel. */
.product-card .product-body {
	position: relative;
	overflow: hidden;
	padding: 1.2rem 1.1rem 0.85rem;
	flex: 1 1 auto;
}
/* Site-wide botanical mark (see template-parts/botanical.php), reused here as
   a low-opacity background flourish behind the name/description. */
.product-card .product-body-leaf {
	position: absolute;
	right: -1.6rem;
	bottom: -2rem;
	width: 9rem;
	height: auto;
	color: var(--rose);
	opacity: 0.14;
	pointer-events: none;
}
/* Text content sits in its own positioned layer so it paints above the leaf. */
.product-card .product-info {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}
/* Category pill — one accent colour per section (Visage/Corps/Cheveux/Coffrets),
   shared by every product in that section (and its subcategories). */
.product-card .product-cat-badge {
	display: inline-block;
	font-family: var(--sans);
	font-size: 0.55rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	padding: 0.35rem 0.8rem;
	border-radius: 100px;
	margin: 0 0 0.6rem;
	background: var(--blush);
	color: var(--muted);
}
.product-card .product-cat-badge.cat-visage   { background: rgba(180, 101, 122, 0.13); color: #b4657a; }
.product-card .product-cat-badge.cat-corps    { background: rgba(184, 122, 62, 0.15);  color: #a8672c; }
.product-card .product-cat-badge.cat-cheveux  { background: rgba(111, 130, 98, 0.15);  color: #617353; }
.product-card .product-cat-badge.cat-coffrets { background: rgba(140, 95, 134, 0.14);  color: #8c5f86; }

.product-cat-link {
	font-family: var(--sans);
	font-size: 0.62rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 0.4rem;
	display: block;
}
.product-card .product-name {
	font-family: var(--serif);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.3;
	color: var(--deep);
	margin: 0 0 0.4rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(1.3em * 2);
}
.product-card .product-desc {
	font-family: var(--sans);
	font-size: 0.72rem;
	line-height: 1.5;
	color: var(--muted);
	margin: 0 0 0.72rem;
	max-width: 23ch;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Star rating (shown once a product has reviews) */
.product-card .product-rating { display: flex; align-items: center; gap: 0.38rem; margin-bottom: 0.72rem; }
.product-card .product-rating .star-rating { font-size: 0.77rem; color: #c19a5b; margin: 0; }
.product-card .product-rating .star-rating::before { color: rgba(193, 154, 91, 0.28); }
.product-card .product-rating .star-rating span::before { color: #c19a5b; }
.product-card .product-rating-count { font-family: var(--sans); font-size: 0.68rem; color: var(--muted); }

/* Bottom price + CTA panel — its own full-bleed, tinted "shelf" under the
   body, rounded only where it meets the body above. */
.product-card .product-cta-panel {
	position: relative;
	overflow: hidden;
	border-radius: 0.95rem 0.95rem 0 0;
	background: color-mix(in srgb, var(--ml-cta) 10%, #fff);
	padding: 0.95rem 1.1rem 1.1rem;
}
.product-card .product-cta-leaf {
	position: absolute;
	right: -1rem;
	bottom: -1.2rem;
	width: 5.5rem;
	height: auto;
	color: var(--ml-cta);
	opacity: 0.16;
	pointer-events: none;
}

/* Price — "450 DHS" (bold amount + small muted currency) */
.product-card .product-price {
	position: relative;
	font-family: var(--sans);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--deep);
	letter-spacing: -0.01em;
	margin: 0 0 0.75rem;
}
.product-card .product-price .woocommerce-Price-currencySymbol {
	font-size: 0.6rem;
	font-weight: 600;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-left: 0.15rem;
}
.product-card .product-price del { color: var(--muted); font-weight: 400; font-size: 0.85rem; margin-right: 0.35rem; }
.product-card .product-price ins { text-decoration: none; }

/* Actions — full-width ADD TO CART */
.product-card .product-actions {
	position: relative;
	display: flex;
	gap: 0.5rem;
	width: 100%;
	align-items: stretch;
}
.product-card .product-actions .product-add {
	flex: 1 1 auto;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.8rem 0.85rem;
	border-radius: 999px;
	font-size: 0.6rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 500;
	background: var(--ml-cta);
	color: var(--cream);
	transition: filter 0.15s, transform 0.15s;
}
/* Darken in place on hover rather than swapping to a fixed colour. */
.product-card .product-actions .product-add:hover { filter: brightness(0.9); transform: none; }
/* Text-only ADD TO CART (like the reference) — hide the cart glyph on cards. */
.product-card .product-add svg { display: none; }
/* …but keep the confirmation check visible during the "added" animation. */
.product-card .product-add .ml-check-ic { display: inline-block; }
/* Keep the button on its brand colour once WooCommerce marks it "added". */
.product-card .product-add.added { background: var(--ml-cta); }
/* Never show WooCommerce's "Voir le panier" link — the button confirms the add. */
.added_to_cart { display: none !important; }

/* Add-to-cart confirmation: a drawn check + "Ajouté au panier" for ~2s, with a
   green button while it plays. */
.product-card .product-actions .product-add.ml-added-anim,
.pd-buy-row .single_add_to_cart_button.ml-added-anim { background: #2e7d5b; color: var(--cream); }
.ml-check-ic { width: 18px; height: 18px; flex-shrink: 0; }
.ml-added-anim .ml-check-ic path {
	stroke-dasharray: 26;
	stroke-dashoffset: 26;
	animation: mlCheckDraw 0.45s 0.05s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
@keyframes mlCheckDraw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
	.ml-added-anim .ml-check-ic path { animation: none; stroke-dashoffset: 0; }
}

/* Loading state — while the add-to-cart / place-order request is in flight.
   Label + icon are made transparent (not hidden) so the button keeps its size;
   a small spinning ring is drawn on top via ::after. */
.single_add_to_cart_button.loading,
.product-card .product-actions .product-add.loading,
.ml-modal-submit.loading {
	position: relative;
	color: transparent !important;
	pointer-events: none;
}
.single_add_to_cart_button.loading svg,
.product-card .product-actions .product-add.loading svg { visibility: hidden; }
.single_add_to_cart_button.loading::after,
.product-card .product-actions .product-add.loading::after,
.ml-modal-submit.loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1.1em;
	height: 1.1em;
	margin: -0.55em 0 0 -0.55em;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: mlSpin 0.7s linear infinite;
}
@keyframes mlSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	.single_add_to_cart_button.loading::after,
	.product-card .product-actions .product-add.loading::after,
	.ml-modal-submit.loading::after { animation: none; }
}

/* ── Boutique filter pills ── */
.filter-bar { gap: 0.7rem; margin-bottom: 3rem; flex-wrap: wrap; }
.filter-pill {
	padding: 0.7rem 1.5rem;
	border-radius: 100px;
	border: 1px solid rgba(28, 26, 22, 0.18);
	background: #fff;
	color: var(--deep);
	font-family: var(--sans);
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.filter-pill:hover { border-color: var(--deep); }
.filter-pill.active { background: var(--mauve); color: var(--cream); border-color: var(--mauve); }

@media (max-width: 900px) {
	.products-grid { gap: 1.5rem 1.5rem; }
}
@media (max-width: 600px) {
	/* One roomy card per row on phones. */
	.products-grid { grid-template-columns: 1fr; max-width: 430px; gap: 1.2rem; }
	.product-card .product-name { font-size: 0.9rem; min-height: calc(1.3em * 2); }
	.product-card .product-actions { gap: 0.4rem; }
	.filter-pill { padding: 0.55rem 1.15rem; font-size: 0.8rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Checkout — brand styling (classic [woocommerce_checkout])
   Details on the left, a sticky order-summary card on the right.
   ══════════════════════════════════════════════════════════════════════════ */
form.woocommerce-checkout {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: 2.4rem 3rem;
	align-items: start;
}
form.woocommerce-checkout > .woocommerce-form-coupon-toggle,
form.woocommerce-checkout > .woocommerce-form-login-toggle,
form.woocommerce-checkout > .woocommerce-NoticeGroup {
	grid-column: 1 / -1;
}
form.woocommerce-checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; }
form.woocommerce-checkout #order_review_heading { grid-column: 2; grid-row: 1; margin-top: 0; }
form.woocommerce-checkout #order_review { grid-column: 2; grid-row: 2; }

/* Neutralise WooCommerce's floated inner columns. */
#customer_details.col2-set { display: block; width: auto; float: none; }
#customer_details .col-1,
#customer_details .col-2 { float: none; width: auto; max-width: none; padding: 0; }
#customer_details .col-2:empty,
.woocommerce-additional-fields:empty,
.woocommerce-shipping-fields:empty { display: none; }

/* Headings */
form.woocommerce-checkout h3,
#order_review_heading {
	font-family: var(--serif);
	font-weight: 500;
	font-size: 1.5rem;
	color: var(--deep);
	letter-spacing: 0.01em;
	margin: 0 0 1.2rem;
}

/* Fields */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper { display: block; }
.woocommerce form .form-row { margin: 0 0 1.05rem; padding: 0; }
.woocommerce form .form-row label {
	display: block;
	font-family: var(--sans);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 0.4rem;
}
.woocommerce form .form-row .required { color: var(--rose); border: 0; text-decoration: none; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.85rem 1rem;
	border: 1px solid rgba(28, 26, 22, 0.16);
	border-radius: 0.55rem;
	background: #fff;
	font-family: var(--sans);
	font-size: 0.95rem;
	color: var(--deep);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
	outline: none;
	border-color: var(--mauve);
	box-shadow: 0 0 0 3px rgba(167, 139, 114, 0.18);
}
.woocommerce form .form-row input.input-text::placeholder { color: #b7ab9b; }

/* Order-summary card */
#order_review {
	background: var(--cream);
	border: 1px solid rgba(28, 26, 22, 0.1);
	border-radius: 0.9rem;
	padding: 1.4rem 1.5rem;
	position: sticky;
	top: calc(var(--topbar-h) + 5rem);
}
.woocommerce-checkout-review-order-table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--sans);
}
.woocommerce-checkout-review-order-table thead th {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--muted);
	text-align: left;
	padding: 0 0 0.8rem;
	border-bottom: 1px solid rgba(28, 26, 22, 0.12);
}
.woocommerce-checkout-review-order-table thead th.product-total { text-align: right; }
.woocommerce-checkout-review-order-table td {
	padding: 0.85rem 0;
	border-bottom: 1px solid rgba(28, 26, 22, 0.08);
	vertical-align: middle;
	font-size: 0.9rem;
	color: var(--deep);
}
.woocommerce-checkout-review-order-table td.product-total { text-align: right; white-space: nowrap; }
.woocommerce-checkout-review-order-table td.product-name { display: flex; align-items: center; gap: 0.75rem; }
.ml-co-item { display: flex; align-items: center; gap: 0.75rem; flex: 1 1 auto; min-width: 0; }
.ml-co-item img.ml-co-thumb {
	width: 52px !important;
	height: 52px !important;
	min-width: 52px;
	border-radius: 0.5rem;
	object-fit: cover;
	background: var(--blush);
	margin: 0 !important;
}
.ml-co-name { font-weight: 500; line-height: 1.3; }
.woocommerce-checkout-review-order-table .product-quantity { color: var(--muted); font-weight: 500; }
.woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout-review-order-table tfoot td {
	padding: 0.7rem 0;
	font-size: 0.9rem;
	border-bottom: 1px solid rgba(28, 26, 22, 0.08);
}
.woocommerce-checkout-review-order-table tfoot th { text-align: left; font-weight: 500; color: var(--muted); }
.woocommerce-checkout-review-order-table tfoot td { text-align: right; color: var(--deep); }
.woocommerce-checkout-review-order-table tfoot tr.order-total th { color: var(--deep); font-size: 1rem; }
.woocommerce-checkout-review-order-table tfoot tr.order-total td {
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--mauve);
}
.woocommerce-checkout-review-order-table tfoot tr:last-child th,
.woocommerce-checkout-review-order-table tfoot tr:last-child td { border-bottom: 0; }

/* Payment box */
#payment { background: transparent; margin-top: 1.2rem; }
#payment ul.payment_methods { list-style: none; margin: 0 0 1rem; padding: 0; border: 0; }
#payment ul.payment_methods li {
	padding: 0.9rem 1rem;
	border: 1px solid rgba(28, 26, 22, 0.14);
	border-radius: 0.6rem;
	background: #fff;
	margin-bottom: 0.6rem;
}
#payment ul.payment_methods li label {
	font-family: var(--sans);
	font-weight: 500;
	color: var(--deep);
	display: inline;
	margin: 0;
}
#payment .payment_box {
	background: var(--blush);
	border-radius: 0.5rem;
	padding: 0.8rem 1rem;
	margin-top: 0.7rem;
	font-family: var(--sans);
	font-size: 0.85rem;
	color: var(--deep);
}
#payment .payment_box::before { display: none; }
#payment .payment_box p { margin: 0; }
#payment .place-order { padding: 0; margin: 0; }
#payment #place_order {
	width: 100%;
	padding: 1rem 1.5rem;
	font-size: 0.95rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-radius: 100px;
	margin-top: 0.4rem;
}
.woocommerce-privacy-policy-text { font-size: 0.75rem; color: var(--muted); margin-top: 1rem; line-height: 1.6; }
.woocommerce-privacy-policy-text p { margin: 0; }

@media (max-width: 900px) {
	form.woocommerce-checkout { grid-template-columns: 1fr; gap: 1.6rem; }
	form.woocommerce-checkout #customer_details,
	form.woocommerce-checkout #order_review_heading,
	form.woocommerce-checkout #order_review { grid-column: 1; grid-row: auto; }
	#order_review { position: static; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Slide-in cart drawer + cash-on-delivery order modal
   ══════════════════════════════════════════════════════════════════════════ */
body.ml-noscroll { overflow: hidden; }

.ml-overlay {
	position: fixed;
	inset: 0;
	background: rgba(20, 18, 14, 0.48);
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 9998;
	pointer-events: none;
}
.ml-overlay.show { opacity: 1; pointer-events: auto; }

/* Drawer */
.ml-drawer {
	position: fixed;
	top: 0;
	right: 0;
	width: 420px;
	max-width: 92vw;
	height: 100%;
	background: var(--cream);
	box-shadow: -18px 0 50px rgba(20, 18, 14, 0.22);
	z-index: 9999;
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1);
	font-family: var(--sans);
}
.ml-drawer.open { transform: none; }
.ml-drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.4rem 1.5rem;
	border-bottom: 1px solid rgba(28, 26, 22, 0.1);
	flex: 0 0 auto;
}
.ml-drawer-head h3 {
	font-family: var(--serif);
	font-weight: 500;
	font-size: 1.4rem;
	color: var(--deep);
	margin: 0;
}
.ml-drawer-close,
.ml-modal-close {
	background: none;
	border: 0;
	font-size: 1.7rem;
	line-height: 1;
	color: var(--muted);
	cursor: pointer;
	padding: 0.2rem 0.4rem;
	transition: color 0.15s ease;
}
.ml-drawer-close:hover,
.ml-modal-close:hover { color: var(--deep); }

.ml-drawer-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.ml-drawer-items {
	list-style: none;
	margin: 0;
	padding: 0.5rem 1.5rem;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}
.ml-drawer-item {
	display: flex;
	align-items: flex-start;
	gap: 0.9rem;
	padding: 1rem 0;
	border-bottom: 1px solid rgba(28, 26, 22, 0.08);
	transition: opacity 0.15s ease;
}
.ml-drawer-item.ml-updating { opacity: 0.45; pointer-events: none; }
.ml-drawer-thumb-wrap { flex: 0 0 auto; }
.ml-drawer-item img.ml-drawer-thumb {
	width: 66px !important;
	height: 66px !important;
	min-width: 66px;
	border-radius: 0.5rem;
	object-fit: cover;
	background: var(--blush);
	margin: 0 !important;
}
.ml-drawer-item-main { flex: 1 1 auto; min-width: 0; }
.ml-drawer-item-name { font-weight: 500; font-size: 0.92rem; color: var(--deep); line-height: 1.3; }
.ml-drawer-item-price { font-size: 0.88rem; margin: 0.25rem 0 0.55rem; line-height: 1.4; }
.ml-drawer-item-price .ml-drawer-unit { color: var(--muted); font-size: 0.82rem; }
.ml-drawer-item-price .ml-drawer-unit .woocommerce-Price-amount { color: var(--muted); }
.ml-drawer-item-price .ml-drawer-eq { color: var(--muted); margin: 0 0.15rem; }
.ml-drawer-item-price .ml-drawer-line-total { color: var(--rose); font-weight: 600; }
.ml-drawer-item-price .ml-drawer-line-total .woocommerce-Price-amount { color: var(--rose); }
.ml-drawer-qty {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	border: 1px solid rgba(28, 26, 22, 0.16);
	border-radius: 100px;
	padding: 0.2rem 0.6rem;
}
.ml-qty-btn {
	background: none;
	border: 0;
	font-size: 1rem;
	line-height: 1;
	color: var(--deep);
	cursor: pointer;
	padding: 0.1rem 0.2rem;
}
.ml-qty-val { font-size: 0.85rem; min-width: 1.1rem; text-align: center; }
.ml-drawer-remove {
	background: none;
	border: 0;
	font-size: 1.2rem;
	line-height: 1;
	color: var(--muted);
	cursor: pointer;
	padding: 0 0.2rem;
	transition: color 0.15s ease;
}
.ml-drawer-remove:hover { color: #a4443a; }

.ml-drawer-empty { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem; padding: 2rem; text-align: center; color: var(--muted); }
.ml-drawer-empty .btn-primary { text-decoration: none; }

/* Free-shipping progress */
.ml-drawer-freeship {
	flex: 0 0 auto;
	padding: 0.9rem 1.5rem 0;
	font-size: 0.8rem;
	color: var(--deep);
}
.ml-drawer-freeship p { margin: 0 0 0.5rem; }
.ml-freeship-bar { height: 5px; background: rgba(28, 26, 22, 0.1); border-radius: 100px; overflow: hidden; }
.ml-freeship-bar span { display: block; height: 100%; background: var(--rose); border-radius: 100px; transition: width 0.4s ease; }

/* Totals + actions pinned at the bottom of the drawer */
.ml-drawer-totals {
	flex: 0 0 auto;
	padding: 1rem 1.5rem 0.4rem;
	border-top: 1px solid rgba(28, 26, 22, 0.1);
	margin-top: 0.6rem;
}
.ml-drawer-line { display: flex; justify-content: space-between; align-items: center; padding: 0.3rem 0; font-size: 0.9rem; color: var(--deep); }
.ml-drawer-line span:last-child { font-weight: 500; }
.ml-drawer-total { font-size: 1.05rem; padding-top: 0.6rem; margin-top: 0.3rem; border-top: 1px solid rgba(28, 26, 22, 0.1); }
.ml-drawer-total span:last-child { font-weight: 600; color: var(--mauve); }
.ml-drawer-total .woocommerce-Price-amount { color: var(--mauve); }

.ml-drawer-confirm { flex: 0 0 auto; display: block; width: calc(100% - 3rem); margin: 0.9rem 1.5rem 0.4rem; text-align: center; }
.ml-drawer-continue {
	flex: 0 0 auto;
	display: block;
	text-align: center;
	padding: 0.6rem 1.5rem 1.4rem;
	font-size: 0.82rem;
	letter-spacing: 0.03em;
	color: var(--muted);
	text-decoration: underline;
}

/* Modal */
.ml-modal-wrap {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	opacity: 0;
	transition: opacity 0.25s ease;
}
.ml-modal-wrap[hidden] { display: none; }
.ml-modal-wrap.open { opacity: 1; }
.ml-modal-backdrop { position: absolute; inset: 0; background: rgba(20, 18, 14, 0.55); }
.ml-modal {
	position: relative;
	z-index: 1;
	width: 460px;
	max-width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	background: var(--cream);
	border-radius: 1rem;
	padding: 2rem 2rem 1.6rem;
	box-shadow: 0 30px 70px rgba(20, 18, 14, 0.35);
	transform: translateY(14px) scale(0.98);
	transition: transform 0.28s cubic-bezier(0.34, 1.2, 0.5, 1);
	font-family: var(--sans);
}
.ml-modal-wrap.open .ml-modal { transform: none; }
.ml-modal-close { position: absolute; top: 0.9rem; right: 1rem; }
.ml-modal h3 { font-family: var(--serif); font-weight: 500; font-size: 1.7rem; color: var(--deep); margin: 0 0 0.4rem; }
.ml-modal-sub { font-size: 0.86rem; color: var(--muted); line-height: 1.5; margin: 0 0 1.4rem; }
.ml-field { display: block; margin-bottom: 1rem; }
.ml-field span {
	display: block;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 0.35rem;
}
.ml-field input {
	width: 100%;
	box-sizing: border-box;
	padding: 0.85rem 1rem;
	border: 1px solid rgba(28, 26, 22, 0.16);
	border-radius: 0.55rem;
	background: #fff;
	font-family: var(--sans);
	font-size: 0.95rem;
	color: var(--deep);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.ml-field input:focus { outline: none; border-color: var(--mauve); box-shadow: 0 0 0 3px rgba(167, 139, 114, 0.18); }
.ml-field input::placeholder { color: #b7ab9b; }
.ml-modal-error {
	background: #f6e7e3;
	border: 1px solid #e0b8b0;
	color: #a4443a;
	font-size: 0.84rem;
	padding: 0.7rem 0.9rem;
	border-radius: 0.5rem;
	margin-bottom: 1rem;
}
.ml-modal-submit { width: 100%; margin-top: 0.3rem; }
.ml-modal-cod { text-align: center; font-size: 0.75rem; color: var(--muted); margin: 0.9rem 0 0; }

@media (max-width: 480px) {
	.ml-modal { padding: 1.6rem 1.3rem 1.3rem; }
	.ml-modal h3 { font-size: 1.45rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Order-received / thank-you page
   ══════════════════════════════════════════════════════════════════════════ */
/* The generic "Commander" page banner reads oddly here — hide it, but keep the
   top spacing it used to provide so content clears the fixed nav + marquee. */
.woocommerce-order-received .page-header { display: none; }
.woocommerce-order-received .page-content-wrap { padding-top: calc(7rem + var(--topbar-h)); }
@media (max-width: 900px) {
	.woocommerce-order-received .page-content-wrap { padding-top: calc(6rem + var(--topbar-h)); }
}
@media (max-width: 600px) {
	.woocommerce-order-received .page-content-wrap { padding-top: calc(5.5rem + var(--topbar-h)); }
}

/* COD instructions line that WooCommerce echoes after the hero. */
.ml-ty > p {
	text-align: center;
	color: var(--muted);
	font-family: var(--sans);
	font-size: 0.9rem;
	line-height: 1.6;
	max-width: 600px;
	margin: 1.3rem auto 0;
}

.ml-ty { max-width: 720px; margin: 0 auto; }

.ml-ty-hero {
	text-align: center;
	background: linear-gradient(180deg, #eef7f1 0%, var(--cream) 100%);
	border: 1px solid #cfe6d8;
	border-radius: 1.2rem;
	padding: 2.6rem 1.8rem 2.2rem;
}
.ml-ty-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 90px;
	height: 90px;
	border-radius: 50%;
	background: #e5f4ec;
	margin-bottom: 1.4rem;
	animation: mlTyPop 0.5s cubic-bezier(0.34, 1.5, 0.5, 1) both;
}
.ml-ty-check svg { width: 54px; height: 54px; }
.ml-ty-check-circle {
	stroke: #3fa972;
	stroke-width: 2.5;
	stroke-dasharray: 151;
	stroke-dashoffset: 151;
	animation: mlTyDraw 0.6s 0.15s ease forwards;
}
.ml-ty-check-mark {
	stroke: #2e7d5b;
	stroke-width: 3.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 40;
	stroke-dashoffset: 40;
	animation: mlTyDraw 0.32s 0.62s ease forwards;
}
@keyframes mlTyDraw { to { stroke-dashoffset: 0; } }
@keyframes mlTyPop { 0% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

.ml-ty-hero h1 {
	font-family: var(--serif);
	font-weight: 500;
	font-size: 2rem;
	line-height: 1.15;
	color: var(--deep);
	margin: 0 0 0.5rem;
}
.ml-ty-lead { color: #2e7d5b; font-weight: 500; font-size: 1rem; margin: 0 0 1.1rem; }
.ml-ty-call {
	display: inline-block;
	max-width: 100%;
	background: #fff;
	border: 1px solid #d7eadf;
	border-radius: 0.75rem;
	padding: 0.9rem 1.15rem;
	font-family: var(--sans);
	font-size: 0.92rem;
	line-height: 1.5;
	color: var(--deep);
}
.ml-ty-call strong { color: #2e7d5b; }

.ml-ty-meta {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.7rem;
	margin-top: 1.7rem;
}
.ml-ty-meta div {
	background: #fff;
	border: 1px solid rgba(28, 26, 22, 0.08);
	border-radius: 0.6rem;
	padding: 0.75rem 0.5rem;
}
.ml-ty-meta > div > span {
	display: block;
	font-family: var(--sans);
	font-size: 0.6rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 0.3rem;
}
/* Value line — including the wc_price markup in the Total tile — kept in the
   sans face at one consistent size (not the serif price styling). */
.ml-ty-meta strong,
.ml-ty-meta strong .woocommerce-Price-amount,
.ml-ty-meta strong .woocommerce-Price-currencySymbol {
	font-family: var(--sans);
	font-size: 0.86rem;
	font-weight: 600;
	color: var(--deep);
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
}

.ml-ty-summary {
	text-align: left;
	background: var(--cream);
	border: 1px solid rgba(28, 26, 22, 0.1);
	border-radius: 1rem;
	padding: 1.6rem 1.7rem;
	margin-top: 1.8rem;
}
.ml-ty-summary h2 {
	font-family: var(--serif);
	font-weight: 500;
	font-size: 1.35rem;
	color: var(--deep);
	margin: 0 0 1rem;
}
.ml-ty-items { list-style: none; margin: 0; padding: 0; }
.ml-ty-item {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.85rem 0;
	border-bottom: 1px solid rgba(28, 26, 22, 0.08);
}
.ml-ty-thumb-wrap img.ml-ty-thumb {
	width: 62px !important;
	height: 62px !important;
	min-width: 62px;
	border-radius: 0.5rem;
	object-fit: cover;
	background: var(--blush);
	margin: 0 !important;
}
.ml-ty-item-main { flex: 1 1 auto; min-width: 0; font-family: var(--sans); }
.ml-ty-item-name { display: block; font-weight: 500; color: var(--deep); font-size: 0.95rem; line-height: 1.3; }
.ml-ty-item-qty { font-size: 0.8rem; color: var(--muted); }
.ml-ty-item-price { font-family: var(--sans); font-weight: 600; color: var(--mauve); white-space: nowrap; }
.ml-ty-item-price .woocommerce-Price-amount { color: var(--mauve); }

.ml-ty-totals { padding-top: 0.6rem; font-family: var(--sans); }
.ml-ty-total-line { display: flex; justify-content: space-between; padding: 0.4rem 0; font-size: 0.92rem; color: var(--deep); }
.ml-ty-total-line span:last-child { font-weight: 500; }
.ml-ty-grand {
	border-top: 1px solid rgba(28, 26, 22, 0.14);
	margin-top: 0.4rem;
	padding-top: 0.7rem;
	font-size: 1.1rem;
}
.ml-ty-grand span:last-child { font-weight: 600; color: var(--mauve); }
.ml-ty-grand .woocommerce-Price-amount { color: var(--mauve); }

.ml-ty-actions { text-align: center; margin-top: 1.8rem; }
.ml-ty-actions .btn-primary { text-decoration: none; }

@media (max-width: 600px) {
	.ml-ty-hero { padding: 2rem 1.2rem 1.8rem; }
	.ml-ty-hero h1 { font-size: 1.6rem; }
	.ml-ty-meta { grid-template-columns: repeat(2, 1fr); }
	.ml-ty-summary { padding: 1.3rem 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
	.ml-ty-check { animation: none; }
	.ml-ty-check-circle, .ml-ty-check-mark { animation: none; stroke-dashoffset: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Product detail page — redesign
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Gallery (WooCommerce's own — zoom/lightbox already wired via the
   wc-product-gallery-* theme supports in functions.php). With a single image
   (every current product) this just renders one large rounded photo; the
   thumbnail-column rules below are ready for whenever a product gets extra
   gallery photos, but are untested against real multi-image data. ── */
.pd-gallery .woocommerce-product-gallery { display: flex; flex-direction: row-reverse; gap: 0.9rem; }
.pd-gallery .woocommerce-product-gallery__wrapper {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	border-radius: 1.1rem;
	overflow: hidden;
	background: linear-gradient(160deg, #efe7db 0%, #f7f1e8 100%);
}
.pd-gallery .woocommerce-product-gallery__image { aspect-ratio: 4 / 5; }
.pd-gallery .woocommerce-product-gallery__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
	border-radius: 0;
}
.pd-gallery .woocommerce-product-gallery__image + .woocommerce-product-gallery__image { display: none; }
/* Thumbnail rail — WooCommerce injects this only when there's more than one image. */
.pd-gallery .flex-control-thumbs {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	width: 76px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.pd-gallery .flex-control-thumbs li { width: 100%; }
.pd-gallery .flex-control-thumbs img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 0.6rem;
	cursor: pointer;
	opacity: 0.6;
	transition: opacity 0.2s ease, box-shadow 0.2s ease;
}
.pd-gallery .flex-control-thumbs img.flex-active,
.pd-gallery .flex-control-thumbs img:hover { opacity: 1; box-shadow: 0 0 0 2px var(--mauve); }
/* Hide WooCommerce's zoom (magnifying-glass) trigger in the gallery corner. */
.pd-gallery .woocommerce-product-gallery__trigger { display: none; }

/* ── Badge pill ── */
.pd-tag {
	display: inline-block;
	background: rgba(255, 255, 255, 0.94);
	color: var(--deep);
	border: 1px solid rgba(28, 26, 22, 0.1);
	font-family: var(--sans);
	font-size: 0.65rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 0.4rem 0.85rem;
	border-radius: 0.55rem;
	margin-bottom: 0.9rem;
}

/* ── Rating row ── */
.pd-rating { display: flex; align-items: center; gap: 0.5rem; margin: -0.4rem 0 1rem; }
.pd-rating .star-rating { font-size: 0.95rem; color: #c19a5b; margin: 0; }
.pd-rating .star-rating::before { color: rgba(193, 154, 91, 0.28); }
.pd-rating .star-rating span::before { color: #c19a5b; }
.pd-rating-count { font-family: var(--sans); font-size: 0.85rem; color: var(--muted); }

/* ── Feature rows (product highlights) — stacked icon-beside-text list ── */
.pd-benefits {
	display: flex;
	flex-direction: column;
	gap: 0.95rem;
	padding: 1.5rem 0;
	margin-bottom: 1.6rem;
	border-top: 1px solid rgba(28, 26, 22, 0.1);
	border-bottom: 1px solid rgba(28, 26, 22, 0.1);
}
.pd-benefit { display: flex; flex-direction: row; align-items: center; gap: 0.9rem; }
.pd-benefit svg { width: 20px; height: 20px; color: var(--rose); flex-shrink: 0; }
.pd-benefit span { font-family: var(--sans); font-size: 0.9rem; line-height: 1.45; color: var(--deep); }

/* ── Size ("Taille") pills — dormant until a variable product exists ── */
.pd-size { margin-bottom: 1.3rem; }
.pd-size-label {
	font-family: var(--sans);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	color: var(--muted);
	margin-bottom: 0.6rem;
}
.pd-size-pills { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.pd-size-pill {
	padding: 0.65rem 1.3rem;
	border-radius: 0.6rem;
	border: 1px solid rgba(28, 26, 22, 0.2);
	background: #fff;
	color: var(--deep);
	font-family: var(--sans);
	font-size: 0.88rem;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.pd-size-pill:hover { border-color: var(--deep); }
.pd-size-pill.active { background: var(--mauve); color: var(--cream); border-color: var(--mauve); }

/* ── Buy row: quantity stepper + full add-to-cart button, side by side ── */
.pd-buy-row { display: flex; align-items: stretch; gap: 0.8rem; margin-bottom: 1rem; }
.pd-buy-row .pd-qty-stepper { flex: 0 0 auto; padding: 0.3rem 0.7rem; }
.pd-buy-row .single_add_to_cart_button {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	padding: 0.95rem 1.4rem;
	border-radius: 0.7rem;
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 500;
}
.pd-buy-row .single_add_to_cart_button svg { width: 18px; height: 18px; }

/* ── Tabs (desktop) / accordion (mobile) ── */
.pd-tabs { margin-top: 0.4rem; }
.pd-tabs-nav {
	display: flex;
	gap: 1.8rem;
	border-bottom: 1px solid rgba(28, 26, 22, 0.14);
	margin-bottom: 1.6rem;
}
.pd-tab-btn {
	background: none;
	border: none;
	padding: 0 0 0.9rem;
	margin-bottom: -1px;
	font-family: var(--sans);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
	cursor: pointer;
	border-bottom: 2px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.pd-tab-btn:hover { color: var(--deep); }
.pd-tab-btn.active { color: var(--deep); border-bottom-color: var(--mauve); }
.pd-tab-panel { display: none; }
.pd-tab-panel.active { display: block; }
.pd-panel-mobile-header { display: none; }
.pd-panel-body { font-size: 0.92rem; line-height: 1.75; color: var(--deep); opacity: 0.75; }
.pd-panel-body p { margin: 0 0 0.9rem; }
.pd-panel-body p:last-child { margin-bottom: 0; }

/* ── Trust badges footer — five circular-icon claims with two-line labels.
   Full-bleed cream strip (.pd-trust-strip) with a centred inner row. ── */
.pd-trust-strip {
	border-top: 1px solid rgba(28, 26, 22, 0.08);
}
.pd-trust-row {
	max-width: 1340px;
	margin: 0 auto;
	padding: 2.6rem 3rem 4rem;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1.4rem;
}
.pd-trust-item { display: flex; align-items: center; gap: 0.85rem; justify-content: center; }
.pd-trust-ic {
	flex-shrink: 0;
	width: 46px;
	height: 46px;
	border: 1px solid rgba(138, 107, 71, 0.38);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #8a6b47;
}
.pd-trust-ic svg { width: 22px; height: 22px; }
.pd-trust-txt { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.pd-trust-txt strong { font-family: var(--sans); font-size: 0.82rem; font-weight: 600; color: var(--deep); }
.pd-trust-txt small { font-family: var(--sans); font-size: 0.73rem; color: var(--muted); margin-top: 0.12rem; }

/* Related products under a single-product page — hold four across on desktop. */
.related-section .products-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	max-width: 1340px;
	gap: 1.8rem;
}

/* ── White single-product page with a single cream accent band ──
   The whole page is white; only the full-bleed trust strip keeps the brand
   cream ground, so it reads as a deliberate divider between the product zone
   and the related products below. */
body.single-product { background: #fff; }
body.single-product .pd-trust-strip { background: var(--cream); }

@media (max-width: 900px) {
	/* Stack vertically with the thumbnail rail BELOW the main image. */
	.pd-gallery .woocommerce-product-gallery { flex-direction: column; }
	.pd-gallery .flex-control-thumbs { flex-direction: row; width: auto; }
	.pd-gallery .flex-control-thumbs li { width: 64px; flex-shrink: 0; }

	.related-section .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pd-trust-row { grid-template-columns: repeat(2, 1fr); gap: 1.2rem 1rem; padding: 2rem 1.6rem 3rem; }
	.pd-trust-item { justify-content: flex-start; }

	/* Switch to accordion: hide the tab bar, show each panel's own header. */
	.pd-tabs-nav { display: none; }
	.pd-tab-panel {
		display: block !important;
		border-bottom: 1px solid rgba(28, 26, 22, 0.12);
	}
	.pd-tab-panel:first-child { border-top: 1px solid rgba(28, 26, 22, 0.12); }
	.pd-panel-mobile-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		background: none;
		border: none;
		padding: 1.05rem 0;
		font-family: var(--serif);
		font-size: 1rem;
		font-weight: 600;
		color: var(--deep);
		cursor: pointer;
		text-align: left;
	}
	.pd-panel-chevron { width: 18px; height: 18px; color: var(--rose); transition: transform 0.2s ease; flex-shrink: 0; }
	.pd-tab-panel.active .pd-panel-chevron { transform: rotate(180deg); }
	.pd-panel-body { display: none; padding-bottom: 1.1rem; }
	.pd-tab-panel.active .pd-panel-body { display: block; }
}

@media (max-width: 600px) {
	.pd-buy-row { flex-wrap: wrap; }
	.pd-buy-row .pd-qty-stepper { flex: 1 1 auto; justify-content: center; }
	.pd-buy-row .single_add_to_cart_button { flex: 1 1 100%; order: -1; }
	.related-section .products-grid { grid-template-columns: 1fr; max-width: 430px; margin-left: auto; margin-right: auto; }
	.pd-trust-row { grid-template-columns: repeat(2, 1fr); gap: 1.2rem 0.9rem; padding: 1.8rem 1.2rem 2.6rem; }
	.pd-trust-ic { width: 42px; height: 42px; }
	.pd-trust-ic svg { width: 20px; height: 20px; }
}

/* ── Product reviews (write + list) — the "Avis (N)" pd-tab, rendered via
   WooCommerce's own comments_template() so the form/nonce/AJAX all stay
   stock; only the visual layer is themed here. ── */
#reviews.woocommerce-Reviews { font-family: var(--sans); }
#reviews .woocommerce-Reviews-title { display: none; } /* redundant with the "Avis (N)" tab label itself */

#reviews .commentlist { list-style: none; margin: 0 0 2rem; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
#reviews .commentlist .comment_container {
	display: flex; gap: 0.9rem; align-items: flex-start;
	padding: 1.1rem 1.3rem;
	background: #fff; border: 1px solid rgba(28, 26, 22, 0.1); border-radius: 0.8rem;
}
#reviews .commentlist img.avatar { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; }
#reviews .commentlist .star-rating { font-size: 0.85rem; color: #c19a5b; margin-bottom: 0.35rem; }
#reviews .commentlist .star-rating::before { color: rgba(193, 154, 91, 0.28); }
#reviews .commentlist .star-rating span::before { color: #c19a5b; }
#reviews .commentlist p.meta { font-size: 0.82rem; color: var(--muted); margin: 0 0 0.35rem; }
#reviews .commentlist .woocommerce-review__author { color: var(--deep); font-weight: 600; font-style: normal; }
#reviews .commentlist .woocommerce-review__dash { display: none; }
#reviews .commentlist .description p { margin: 0; font-size: 0.92rem; line-height: 1.7; color: var(--deep); opacity: 0.85; }

#review_form_wrapper { max-width: 640px; }
#review_form #respond { background: var(--cream); border-radius: 1rem; padding: 1.7rem 1.8rem; }
#reviews .comment-reply-title {
	font-family: var(--serif); font-size: 1.3rem; font-weight: 500; color: var(--deep);
	margin: 0 0 0.9rem; display: block;
}
#reviews p.comment-notes,
#reviews p.comment-form-cookies-consent { font-size: 0.82rem; color: var(--muted); }
#reviews p.comment-notes { margin: 0 0 1.2rem; }

#reviews .comment-form-rating { margin-bottom: 1.1rem; }
#reviews .comment-form-rating label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--deep); margin-bottom: 0.5rem; }
#reviews .comment-form-rating select { display: none; } /* WooCommerce's JS swaps this for the clickable .stars widget below */
#reviews .comment-form-rating .stars a { color: #c19a5b; text-decoration: none; }

#reviews .comment-form-comment label,
#reviews .comment-form-author label,
#reviews .comment-form-email label {
	display: block; font-size: 0.82rem; font-weight: 600; color: var(--deep); margin-bottom: 0.5rem;
}
#reviews .comment-form-comment,
#reviews .comment-form-author,
#reviews .comment-form-email { margin-bottom: 1.1rem; }
#reviews #comment,
#reviews #author,
#reviews #email {
	width: 100%; box-sizing: border-box;
	padding: 0.8rem 1rem; border: 1px solid rgba(28, 26, 22, 0.16); border-radius: 0.55rem;
	background: #fff; font-family: var(--sans); font-size: 0.92rem; color: var(--deep);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
#reviews #comment { min-height: 120px; resize: vertical; }
#reviews #comment:focus,
#reviews #author:focus,
#reviews #email:focus {
	outline: none; border-color: var(--mauve); box-shadow: 0 0 0 3px rgba(167, 139, 114, 0.18);
}
#reviews p.comment-form-cookies-consent { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.2rem; }
#reviews p.comment-form-cookies-consent input { margin: 0; }

#reviews p.form-submit { margin: 0; }
#reviews #submit {
	background: var(--mauve); color: var(--cream); border: none; border-radius: 100px;
	padding: 0.85rem 2.1rem; font-family: var(--sans); font-size: 0.85rem; font-weight: 500;
	letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer;
	transition: background 0.2s;
}
#reviews #submit:hover { background: var(--deep); }

@media (max-width: 600px) {
	#review_form #respond { padding: 1.3rem 1.2rem; }
	#reviews .commentlist .comment_container { flex-direction: column; }
}