/* ==========================================================================
   Boutique — the whole online shop: landing, category archives, product
   pages, cart, checkout and thank-you.

   WooCommerce's own three stylesheets are dequeued in shop context (see
   inc/shop.php → revive_shop_dequeue_wc_styles), so this file owns the
   look end to end — including the handful of WooCommerce components we
   still need (star ratings, notices, quantity inputs, the responsive
   cart table, Select2, the gallery thumbs). That trade keeps the dark
   theme free of the !important pile-up a light base stylesheet forces.
   The My Account portal is deliberately NOT in shop context: it keeps
   WooCommerce's CSS and portail.css.

   Sections
     1. Shell, chrome, breadcrumb
     2. WooCommerce base components (notices, stars, qty, badges, Select2)
     3. Product grid + card
     4. Landing sections
     5. Single product
     6. Cart
     7. Checkout + thank-you
     8. Sticky mobile bar
     9. Responsive
   ========================================================================== */

:root {
	--shop-max: 1180px;
	--shop-gutter: 32px;
}

/* ==========================================================================
   1. Shell, chrome, breadcrumb
   ========================================================================== */

.shop {
	width: 100%;
}

.shop--archive,
.shop--product,
.shop--cart,
.shop--checkout,
.shop--thankyou,
.shop--page {
	max-width: var(--shop-max);
	margin: 0 auto;
	padding: 0 var(--shop-gutter) 100px;
}

/* Light page background for the restyled screens (woocommerce/archive-
   product.php only ever renders one class on <main>, so --archive and
   --product are mutually exclusive there) — every section inside them was
   given its own text color assuming a light background, but without this
   the body's default dark background was showing through instead, making
   that text unreadable. This alone isn't enough on a wide viewport though
   — see body.shop-light below, which is what actually fixes the edges. */
.shop--landing,
.shop--archive,
.shop--product,
.shop--cart,
.shop--checkout,
.shop--thankyou {
	background: var(--shop-bg);
	color: var(--shop-text-body);
}

/* .shop--archive and .shop--product (unlike .shop--landing) are
   width-constrained and centered (max-width + margin: auto — see the
   combined rule above), so their own background above only ever
   painted within that centered column: on any viewport wider than
   --shop-max, the actual page edges stayed the body's default dark
   background. body.shop-light (inc/shop.php →
   revive_is_boutique_light_context(), added to every page restyled so
   far — every boutique screen except My Account's gym view) fixes that
   at the source instead of patching each container. */
body.shop-light {
	background: var(--shop-bg);
	color: var(--shop-text-body);
}

/* .btn-outline (base.css) assumes the dark gym theme by default — near-
   white text, a mid-gray border — which goes essentially invisible on any
   light surface. Found via the thank-you page's "Retour à la boutique"
   button, but that's only one of several usages this generic class has
   in shop-light contexts (the mini-cart's "Voir le panier", shop-view My
   Account's order actions / login / dashboard links) — same "dark
   leftover" pattern as the WC notices/selects below, so one override
   here instead of patching each site individually. */
body.shop-light .btn-outline {
	border-color: var(--shop-text-heading);
	color: var(--shop-text-heading);
}

body.shop-light .btn-outline:hover {
	border-color: var(--shop-accent);
	color: var(--shop-accent-700);
}

.shop-page-title {
	font-size: 34px;
	margin: 48px 0 28px;
}

.shop-page-title--thankyou {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--accent);
}

.shop-page-title--thankyou .shop-icon {
	width: 30px;
	height: 30px;
	flex: none;
	stroke-width: 2.6;
}

/* Shop header (boutique context): the light editorial theme starts
   here — .site-header--shop overrides layout.css's dark .site-header
   with the --shop-* tokens from shop-tokens.css, scoped to this class
   so gym pages (still .site-header without the modifier) are
   untouched. Two rows inside .site-header__inner: a utility row that
   never shrinks (logo + search + account/cart, template-parts/shop/
   nav-utility.php) and, full width below it, the mega-menu
   (template-parts/shop/nav-megamenu.php, families from
   inc/shop-nav.php). */
.site-header--shop {
	/* Plain rgba, not color-mix() — see the note in shop-tokens.css:
	   the host's CSS aggregator/minifier mis-parses that function badly
	   enough to corrupt unrelated rules later in the same combined
	   bundle, and this rule sits right before the mega-menu CSS. */
	background: rgba(255, 255, 255, 0.94);
	border-bottom-color: var(--shop-border);
}

.site-header--shop .site-header__inner {
	flex-direction: column;
	align-items: stretch;
	flex-wrap: nowrap;
	gap: 0;
	padding: 0;
	max-width: none;
}

.site-header--shop .site-header__logo {
	color: var(--shop-text-heading);
}

.site-header--shop .site-header__logo span {
	color: var(--shop-accent);
}

/* Checkout-focus (and the gym-menu fallback) render the logo as a bare
   child of .site-header__inner instead of inside .site-header__utility
   — give it the same row padding that container provides everywhere
   else, since .site-header--shop .site-header__inner itself is now
   padding: 0 (each row owns its own padding). */
.site-header--shop .site-header__inner > .site-header__logo {
	padding: 16px var(--shop-gutter) 0;
}

.site-header__utility {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	max-width: var(--shop-max);
	margin: 0 auto;
	padding: 16px var(--shop-gutter);
}

.shop-nav-utility {
	display: flex;
	align-items: center;
	gap: 18px;
	flex: none;
}

.shop-nav-utility__search {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 320px;
	max-width: 420px;
	min-width: 0;
	padding: 0 14px;
	background: var(--shop-surface-alt);
	border: 1px solid var(--shop-border);
	border-radius: var(--shop-radius-sm);
}

/* The input below sets outline:none with no replacement (unlike every
   other input in this file, which pairs that with a border-color
   change) — a keyboard user tabbing to search got no focus feedback at
   all. Putting the indicator on the wrapper instead of the input itself
   matches how this search box already looks focused when a suggestion
   dropdown is open. */
.shop-nav-utility__search:focus-within {
	border-color: var(--shop-accent);
}

.shop-nav-utility__search .shop-icon {
	flex: none;
	width: 16px;
	height: 16px;
	color: var(--shop-text-faint);
}

.shop-nav-utility__search input[type="search"] {
	flex: 1;
	min-width: 0;
	min-height: 40px;
	border: 0;
	background: transparent;
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--shop-text-heading);
	outline: none;
}

.shop-nav-utility__search input[type="search"]::placeholder {
	color: var(--shop-text-faint);
}

.shop-nav-utility__suggestions {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 60;
	max-height: 320px;
	overflow-y: auto;
	background: var(--shop-surface);
	border: 1px solid var(--shop-border);
	border-radius: var(--shop-radius-md);
	box-shadow: var(--shop-shadow-md);
}

.shop-nav-utility__suggestion {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 12px;
	border-bottom: 1px solid var(--shop-divider);
}

.shop-nav-utility__suggestion:last-child {
	border-bottom: 0;
}

.shop-nav-utility__suggestion:hover {
	background: var(--shop-surface-alt);
}

.shop-nav-utility__suggestion img {
	width: 36px;
	height: 36px;
	object-fit: contain;
	background: var(--shop-surface-alt);
	flex: none;
}

.shop-nav-utility__suggestion-name {
	flex: 1;
	min-width: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--shop-text-heading);
}

.shop-nav-utility__suggestion-price {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 13px;
	color: var(--shop-text-heading);
	white-space: nowrap;
}

.shop-nav-utility__account {
	color: var(--shop-text-body);
	font-weight: 600;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	white-space: nowrap;
}

.shop-nav-utility__account:hover {
	color: var(--shop-accent-700);
}

.shop-nav-utility__cart {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--shop-accent);
	color: var(--shop-text-on-accent);
	font-weight: 800;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	padding: 9px 16px;
	border-radius: var(--shop-radius-sm);
	white-space: nowrap;
}

.shop-nav-utility__cart:hover {
	background: var(--shop-accent-hover);
}

.shop-nav-utility__cart .shop-icon {
	width: 18px;
	height: 18px;
}

/* Phones only — shown under 768px below. On desktop the category menu
   is always visible as its own row, and "Mon compte" sits in this row. */
.shop-nav-utility__menu,
.shop-megamenu__mobile-only {
	display: none;
}

.shop-nav-utility__menu {
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 12px;
	background: transparent;
	border: 1px solid var(--shop-border-strong);
	border-radius: var(--shop-radius-sm);
	color: var(--shop-text-heading);
	font-family: var(--font-body);
	font-weight: 800;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	cursor: pointer;
}

/* Three-line icon (one span + two pseudo-elements) that turns into an
   X while the menu is open — same as the gym header's (layout.css). */
.shop-nav-utility__menu-icon,
.shop-nav-utility__menu-icon::before,
.shop-nav-utility__menu-icon::after {
	display: block;
	width: 16px;
	height: 2px;
	background: currentColor;
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.shop-nav-utility__menu-icon {
	position: relative;
}

.shop-nav-utility__menu-icon::before,
.shop-nav-utility__menu-icon::after {
	content: "";
	position: absolute;
	left: 0;
}

.shop-nav-utility__menu-icon::before {
	top: -5px;
}

.shop-nav-utility__menu-icon::after {
	top: 5px;
}

.site-header.is-nav-open .shop-nav-utility__menu-icon {
	background-color: transparent;
}

.site-header.is-nav-open .shop-nav-utility__menu-icon::before {
	transform: translateY(5px) rotate(45deg);
}

.site-header.is-nav-open .shop-nav-utility__menu-icon::after {
	transform: translateY(-5px) rotate(-45deg);
}

/* Mega-menu (template-parts/shop/nav-megamenu.php) */
.shop-megamenu {
	width: 100%;
	border-top: 1px solid var(--shop-divider);
}

.shop-megamenu__families {
	display: flex;
	align-items: stretch;
	gap: 2px;
	list-style: none;
	margin: 0 auto;
	max-width: var(--shop-max);
	padding: 0 var(--shop-gutter);
	/* overflow-x: auto only above 900px (it's needed for the horizontal
	   scroll on mobile, where it's set in the media query below) —
	   setting overflow-x to anything but visible also forces overflow-y
	   to clip, and that silently clips the dropdown panels below (they
	   position:absolute with top:100%, still nested inside this <ul>,
	   so this box's own clipping cut them off even while they correctly
	   computed display:block). Mobile's panels are position:fixed
	   instead, which escapes this entirely — only the desktop panel was
	   ever affected. */
	overflow: visible;
	scrollbar-width: none;
}

.shop-megamenu__families::-webkit-scrollbar {
	display: none;
}

.shop-megamenu__all,
.shop-megamenu__trigger {
	display: flex;
	align-items: center;
	white-space: nowrap;
	background: none;
	border: 0;
	padding: 12px 14px;
	cursor: pointer;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--shop-text-body);
}

.shop-megamenu__all:hover,
.shop-megamenu__trigger:hover {
	color: var(--shop-accent-700);
}

.shop-megamenu__all.is-active,
.shop-megamenu__family.is-current > .shop-megamenu__trigger {
	color: var(--shop-accent-700);
}

.shop-megamenu__family {
	position: relative;
}

.shop-megamenu__family.is-open .shop-megamenu__trigger {
	color: var(--shop-accent-700);
}

.shop-megamenu__panel {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 70;
	width: max-content;
	/* Plain fixed value, not min()/calc() nesting — this rule only ever
	   applies above the 900px breakpoint below (which switches to a
	   fixed-position, viewport-clamped panel instead), where 760px
	   always safely fits regardless of exact width. Nested CSS functions
	   here previously tripped up the host's CSS aggregator/minifier
	   badly enough to corrupt unrelated rules later in the same combined
	   bundle — see the note in shop-tokens.css for the other instance. */
	max-width: 760px;
	background: var(--shop-surface);
	border: 1px solid var(--shop-border);
	border-top: 2px solid var(--shop-accent);
	box-shadow: var(--shop-shadow-lg);
}

.shop-megamenu__family.is-open .shop-megamenu__panel {
	display: block;
}

/* Flex, not grid: the number of category columns varies with how the
   menu is built (a flat family is one column, a grouped one — e.g.
   "Supplément" → "Performance & Énergie" / "Protéine" — is one column
   per group). */
.shop-megamenu__panel-inner {
	display: flex;
	align-items: stretch;
}

.shop-megamenu__col {
	flex: 1 1 180px;
	min-width: 160px;
	padding: 20px 22px;
	border-left: 1px solid var(--shop-divider);
}

.shop-megamenu__col:first-child {
	border-left: 0;
}

.shop-megamenu__col-title {
	display: block;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--shop-accent-700);
	margin-bottom: 12px;
}

.shop-megamenu__col-title:hover {
	color: var(--shop-text-heading);
}

.shop-megamenu__links {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.shop-megamenu__link {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 6px 0;
	font-size: 14px;
	color: var(--shop-text-heading);
}

.shop-megamenu__link:hover {
	color: var(--shop-accent-700);
}

.shop-megamenu__count {
	font-size: 12px;
	color: var(--shop-text-faint);
}

.shop-cart-count {
	display: inline-block;
	min-width: 20px;
	text-align: center;
	background: rgb(18 34 10 / 0.18);
	border-radius: 10px;
	padding: 1px 6px;
	font-size: 13px;
}

/* Re-triggered by shop.js after every AJAX add-to-cart. */
.shop-cart-count.is-pulse {
	animation: revive-cart-pulse 0.5s ease;
}

@keyframes revive-cart-pulse {
	0% { transform: scale(1); }
	40% { transform: scale(1.35); }
	100% { transform: scale(1); }
}

/* Checkout-focus header (no nav) */
.site-header__checkout {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
	width: 100%;
	max-width: var(--shop-max);
	margin: 0 auto;
	padding: 16px var(--shop-gutter);
}

.site-header__secure,
.site-header__back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

.site-header__secure {
	color: var(--shop-accent-700);
}

.site-header__back {
	color: var(--shop-text-muted);
}

.site-header__back:hover {
	color: var(--shop-accent-700);
}

.site-header__secure .shop-icon,
.site-header__back .shop-icon {
	width: 17px;
	height: 17px;
}

/* Compact footer on the checkout */
.site-footer--compact {
	padding: 28px var(--shop-gutter) 24px;
}

.site-footer--compact .shop-trust {
	max-width: var(--content-max);
	margin: 0 auto;
	justify-content: center;
}

.site-footer--compact .site-footer__bottom {
	margin-top: 24px;
}

/* Mini-cart drawer (template-parts/shop/mini-cart-drawer.php), and the
   same backdrop pattern the mobile filters sheet reuses (see
   assets/js/shop.js → openPanel()/closePanel()). */
.shop-mini-cart[hidden] {
	display: none;
}

.shop-mini-cart {
	position: fixed;
	inset: 0;
	z-index: 100;
}

.shop-mini-cart__backdrop {
	position: absolute;
	inset: 0;
	background: var(--shop-overlay);
	animation: revive-shop-fadein 0.15s ease;
}

.shop-mini-cart__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 420px;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	background: var(--shop-bg);
	border-left: 2px solid var(--shop-accent);
	box-shadow: var(--shop-shadow-lg);
	animation: revive-shop-slidein 0.22s ease;
}

@keyframes revive-shop-fadein {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes revive-shop-slidein {
	from { transform: translateX(100%); }
	to { transform: translateX(0); }
}

.shop-mini-cart__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px;
	border-bottom: 2px solid var(--shop-divider);
}

.shop-mini-cart__head h3 {
	font-size: 18px;
	margin: 0;
	color: var(--shop-text-heading);
}

.shop-mini-cart__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: none;
	border: 0;
	color: var(--shop-text-heading);
	cursor: pointer;
}

.shop-mini-cart__close .shop-icon {
	width: 18px;
	height: 18px;
}

.shop-mini-cart__body {
	flex: 1;
	overflow-y: auto;
	padding: 16px 20px 0;
}

.shop-mini-cart__empty {
	padding: 32px 0;
}

.shop-mini-cart__empty p {
	color: var(--shop-text-muted);
	font-size: 14px;
	margin: 0 0 16px;
}

.shop-mini-cart__reassure {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0 0 18px;
	padding: 10px 12px;
	background: var(--shop-surface-alt);
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--shop-text-muted);
}

.shop-mini-cart__reassure-dot {
	flex: none;
	width: 7px;
	height: 7px;
	margin-top: 4px;
	border-radius: 50%;
	background: var(--shop-accent);
}

.shop-mini-cart__lines {
	list-style: none;
	margin: 0;
	padding: 0;
}

.shop-mini-cart__line {
	display: grid;
	grid-template-columns: 60px 1fr auto;
	gap: 14px;
	align-items: center;
	padding: 16px 0;
	border-bottom: 1px solid var(--shop-divider);
}

.shop-mini-cart__line-media {
	display: block;
	background: var(--shop-surface-alt);
	aspect-ratio: 1;
}

.shop-mini-cart__line-media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.shop-mini-cart__line-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.shop-mini-cart__line-name {
	font-size: 14px;
	font-weight: 600;
	color: var(--shop-text-heading);
	line-height: 1.25;
}

.shop-mini-cart__line-meta {
	font-size: 12px;
	color: var(--shop-text-muted);
}

.shop-mini-cart__line-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 4px;
}

.shop-mini-cart__qty {
	display: flex;
	align-items: center;
	border: 1px solid var(--shop-border);
	background: var(--shop-surface-alt);
	flex: none;
}

.shop-mini-cart__qty-btn {
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
	color: var(--shop-text-heading);
}

.shop-mini-cart__qty-btn:hover {
	color: var(--shop-accent-700);
}

.shop-mini-cart__qty-value {
	min-width: 22px;
	text-align: center;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 12.5px;
	color: var(--shop-text-heading);
}

.shop-mini-cart__line-remove {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	font: inherit;
	font-size: 11.5px;
	color: var(--shop-text-faint);
	text-decoration: underline;
}

.shop-mini-cart__line-remove:hover {
	color: var(--shop-accent-700);
}

.shop-mini-cart__line.is-updating {
	opacity: 0.5;
	pointer-events: none;
}

.shop-mini-cart__line-total {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 14px;
	color: var(--shop-text-heading);
	white-space: nowrap;
}

/* Upsells (inc/shop.php → revive_shop_mini_cart_upsells_html(), real
   cross-sells for whatever's currently in the cart) */
.shop-mini-cart__upsells {
	margin-top: 8px;
	padding-top: 18px;
	border-top: 1px solid var(--shop-divider);
}

.shop-mini-cart__upsells-title {
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--shop-text-muted);
	margin-bottom: 12px;
}

.shop-mini-cart__upsells-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

.shop-mini-cart__upsell {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.shop-mini-cart__upsell-media {
	display: block;
	aspect-ratio: 1;
	background: var(--shop-surface-alt);
	margin-bottom: 2px;
}

.shop-mini-cart__upsell-media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.shop-mini-cart__upsell-name {
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--shop-text-heading);
}

.shop-mini-cart__upsell-price {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 12.5px;
	color: var(--shop-text-heading);
}

.shop-mini-cart__upsell-add,
.shop-mini-cart__upsell .add_to_cart_button {
	display: block;
	width: 100%;
	margin-top: 2px;
	padding: 6px 4px;
	background: transparent;
	border: 1px solid var(--shop-text-heading);
	color: var(--shop-text-heading);
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 10.5px;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
}

.shop-mini-cart__upsell-add:hover,
.shop-mini-cart__upsell .add_to_cart_button:hover {
	border-color: var(--shop-accent);
	color: var(--shop-accent-700);
}

.shop-mini-cart__foot {
	padding: 18px 0 20px;
}

.shop-mini-cart__totals-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 10px;
	font-size: 13.5px;
	color: var(--shop-text-body);
}

.shop-mini-cart__totals-row:first-child span:first-child {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 15px;
	color: var(--shop-text-heading);
}

.shop-mini-cart__totals-row:first-child span:last-child {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 22px;
	color: var(--shop-text-heading);
}

.shop-mini-cart__totals-row--muted {
	color: var(--shop-text-faint);
	margin-bottom: 16px;
}

.shop-mini-cart__checkout {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	justify-content: flex-start;
	padding: 15px 18px;
	background: var(--shop-accent);
	color: var(--shop-text-on-accent);
	border: 0;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 16px;
	cursor: pointer;
}

.shop-mini-cart__checkout .shop-icon {
	width: 16px;
	height: 16px;
}

.shop-mini-cart__checkout:hover {
	background: var(--shop-accent-hover);
}

.shop-mini-cart__payment {
	margin: 10px 0 0;
	font-size: 11px;
	color: var(--shop-text-faint);
	text-align: center;
}

.shop-mini-cart__view {
	display: flex;
	width: 100%;
	justify-content: flex-start;
	margin-top: 8px;
	padding: 12px 18px;
	background: transparent;
	border: 1px solid var(--shop-border);
	color: var(--shop-text-heading);
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 14px;
	cursor: pointer;
}

body.shop-panel-open {
	overflow: hidden;
}

/* Breadcrumb */
.shop-breadcrumb {
	padding: 28px 0 0;
	color: var(--text-faint);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

.shop-breadcrumb a {
	color: var(--text-muted);
}

.shop-breadcrumb a:hover {
	color: var(--accent);
}

.shop-breadcrumb__sep {
	margin: 0 8px;
	color: var(--text-legal);
}

/* Shared section heading — landing-only (featured.php, reviews.php). */
.shop-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 28px;
}

.shop-section__head h2 {
	font-size: 28px;
	color: var(--shop-text-heading);
}

.shop-section__head--center {
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.shop-section__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--shop-accent-700);
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

.shop-section__more .shop-icon {
	width: 16px;
	height: 16px;
}

.shop-section__more:hover {
	color: var(--shop-accent);
}

/* ==========================================================================
   2. WooCommerce base components
   (re-implemented here because WC's stylesheets are dequeued)
   ========================================================================== */

/* --- Notices ------------------------------------------------------------ */
.woocommerce-notices-wrapper:empty {
	display: none;
}

.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
	list-style: none;
	margin: 0 0 24px;
	padding: 16px 20px;
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-left: 3px solid var(--accent);
	border-radius: var(--radius-card);
	color: var(--text-body);
	font-size: 15px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.woocommerce-error {
	border-left-color: oklch(0.62 0.19 25);
	color: var(--text-body-strong);
}

.woocommerce-error li {
	list-style: none;
}

.woocommerce-error li + li {
	margin-top: 8px;
}

.woocommerce-error a,
.woocommerce-message a,
.woocommerce-info a {
	color: var(--accent);
	font-weight: 700;
}

.woocommerce-error .button,
.woocommerce-message .button,
.woocommerce-info .button {
	flex: none;
	order: 2;
	display: inline-block;
	background: transparent;
	border: 2px solid var(--border-outline);
	color: var(--text-heading);
	font-family: var(--font-body);
	font-weight: 800;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	padding: 9px 18px;
	border-radius: var(--radius-btn);
	cursor: pointer;
}

.woocommerce-error .button:hover,
.woocommerce-message .button:hover,
.woocommerce-info .button:hover {
	border-color: var(--accent);
	color: var(--accent);
}

/* Light-theme override — body.shop-light (every restyled boutique screen,
   now including checkout/thank-you) is the same mechanism used for the
   full-width background fix; reused here so these WC notices (e.g. the
   empty-cart message, "please select a payment method") aren't dark
   boxes sitting on an otherwise light page. */
body.shop-light .woocommerce-error,
body.shop-light .woocommerce-message,
body.shop-light .woocommerce-info {
	background: var(--shop-surface);
	border-color: var(--shop-border);
	border-left-color: var(--shop-accent);
	color: var(--shop-text-body);
}

body.shop-light .woocommerce-error {
	border-left-color: #b3261e;
	color: var(--shop-text-heading);
}

body.shop-light .woocommerce-error a,
body.shop-light .woocommerce-message a,
body.shop-light .woocommerce-info a {
	color: var(--shop-accent-700);
}

body.shop-light .woocommerce-error .button,
body.shop-light .woocommerce-message .button,
body.shop-light .woocommerce-info .button {
	border-color: var(--shop-border-strong);
	color: var(--shop-text-heading);
}

body.shop-light .woocommerce-error .button:hover,
body.shop-light .woocommerce-message .button:hover,
body.shop-light .woocommerce-info .button:hover {
	border-color: var(--shop-accent);
	color: var(--shop-accent-700);
}

/* --- Star rating (wc_get_rating_html) ----------------------------------- */
.star-rating {
	position: relative;
	display: inline-block;
	width: 5.6em;
	height: 1.3em;
	line-height: 1.3;
	font-size: 14px;
	font-family: var(--font-body);
	overflow: hidden;
	white-space: nowrap;
	vertical-align: middle;
}

.star-rating::before {
	content: "★★★★★";
	letter-spacing: 0.1em;
	color: var(--border-outline);
	position: absolute;
	top: 0;
	left: 0;
}

.star-rating span {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	padding-top: 1.6em; /* pushes WC's "Rated x out of 5" text out of view */
}

.star-rating span::before {
	content: "★★★★★";
	letter-spacing: 0.1em;
	color: var(--accent);
	position: absolute;
	top: 0;
	left: 0;
}

/* Inline SVG stars (landing hero + reviews) */
.shop-stars {
	display: inline-flex;
	gap: 1px;
	color: var(--accent);
}

.shop-stars .shop-icon {
	width: 15px;
	height: 15px;
	fill: currentColor;
	stroke-width: 1;
}

/* --- Interactive rating stars (review form) ----------------------------- */
p.stars {
	margin: 0;
	display: inline-flex;
}

p.stars a {
	position: relative;
	display: inline-block;
	width: 1.5em;
	height: 1.5em;
	text-indent: -999em;
	text-decoration: none;
	font-size: 22px;
}

p.stars a::before {
	content: "★";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	text-indent: 0;
	text-align: center;
	line-height: 1.5;
	color: var(--border-outline);
	transition: color 0.12s ease;
}

p.stars:hover a::before {
	color: var(--accent);
}

p.stars:hover a:hover ~ a::before {
	color: var(--border-outline);
}

p.stars.selected a.active::before,
p.stars.selected a:not(.active)::before {
	color: var(--accent);
}

p.stars.selected a.active ~ a::before {
	color: var(--border-outline);
}

/* --- Quantity input ----------------------------------------------------- */
.quantity {
	display: inline-flex;
}

.quantity .qty {
	width: 74px;
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: var(--radius-input);
	color: var(--text-heading);
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 600;
	padding: 12px 10px;
	text-align: center;
}

.quantity .qty:focus {
	outline: none;
	border-color: var(--accent);
}

/* --- Sale badge --------------------------------------------------------- */
.onsale {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	margin: 0;
	background: var(--accent);
	color: var(--bg);
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	padding: 4px 10px;
	border-radius: var(--radius-btn);
}

/* --- Prices ------------------------------------------------------------- */
.price del {
	color: var(--text-faint);
	font-weight: 400;
	margin-right: 8px;
}

.price ins {
	text-decoration: none;
}

.woocommerce-Price-currencySymbol {
	font-size: 0.8em;
	margin-left: 2px;
}

/* --- Ordering select + Select2 ------------------------------------------ */
.woocommerce-ordering {
	margin: 0 0 24px;
	display: flex;
	justify-content: flex-end;
}

.woocommerce-ordering select,
.shop select,
.shop .select2-selection--single {
	appearance: none;
	-webkit-appearance: none;
	background-color: var(--bg-card);
	background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
	background-position: calc(100% - 18px) calc(50% + 2px), calc(100% - 13px) calc(50% + 2px);
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	border: 1px solid var(--border);
	border-radius: var(--radius-input);
	color: var(--text-heading);
	font-family: var(--font-body);
	font-size: 15px;
	padding: 12px 42px 12px 14px;
	width: 100%;
	height: auto;
	cursor: pointer;
}

.woocommerce-ordering select {
	width: auto;
	min-width: 220px;
}

/* Sort dropdown only (.woocommerce-ordering fires exclusively inside
   the catalog/archive loop) — overrides the shared .shop select/Select2
   rules above with higher specificity, without touching those shared
   rules themselves (still the dark default for any not-yet-restyled
   context). Same values as the body.shop-light block below, kept
   separate since .shop-catalog is never itself body.shop-light-gated. */
.shop-catalog .woocommerce-ordering select {
	background-color: var(--shop-surface);
	background-image: linear-gradient(45deg, transparent 50%, var(--shop-text-muted) 50%), linear-gradient(135deg, var(--shop-text-muted) 50%, transparent 50%);
	border-color: var(--shop-border);
	color: var(--shop-text-heading);
}

.shop-catalog .woocommerce-ordering select:focus {
	border-color: var(--shop-accent);
}

/* Every other select/Select2 in a restyled context (Phase 5: checkout's
   country/state fields) — body.shop-light-gated so the shared, still-dark
   base rules above stay correct for anything not yet restyled. The
   dropdown/search-field rules are portalled to <body> (outside .shop),
   so they need the body.shop-light selector regardless. */
body.shop-light .shop select,
body.shop-light .shop .select2-selection--single {
	background-color: var(--shop-surface);
	background-image: linear-gradient(45deg, transparent 50%, var(--shop-text-muted) 50%), linear-gradient(135deg, var(--shop-text-muted) 50%, transparent 50%);
	border-color: var(--shop-border);
	color: var(--shop-text-heading);
}

body.shop-light .shop select:focus,
body.shop-light .shop .select2-container--focus .select2-selection--single {
	border-color: var(--shop-accent);
}

body.shop-light .shop .select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--shop-text-heading);
}

body.shop-light .shop .select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: var(--shop-text-faint);
}

body.shop-light .select2-dropdown {
	background: var(--shop-surface);
	border-color: var(--shop-border);
	color: var(--shop-text-body);
}

body.shop-light .select2-search--dropdown .select2-search__field {
	background: var(--shop-bg);
	border-color: var(--shop-border);
	color: var(--shop-text-heading);
}

body.shop-light .select2-container--default .select2-results__option--highlighted[aria-selected],
body.shop-light .select2-container--default .select2-results__option[data-selected="true"] {
	background: var(--shop-accent);
	color: var(--shop-text-on-accent);
}

.shop select:focus,
.shop .select2-container--focus .select2-selection--single {
	outline: none;
	border-color: var(--accent);
}

.shop .select2-container .select2-selection--single {
	display: flex;
	align-items: center;
}

.shop .select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--text-heading);
	line-height: 1.4;
	padding: 0;
}

.shop .select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: var(--text-faint);
}

.shop .select2-container--default .select2-selection--single .select2-selection__arrow {
	display: none;
}

/* The dropdown is portalled to <body>, outside .shop — scope by its own class. */
.select2-dropdown {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-input);
	color: var(--text-body);
}

.select2-search--dropdown .select2-search__field {
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: var(--radius-input);
	color: var(--text-heading);
	padding: 9px 12px;
	font-family: var(--font-body);
}

.select2-container--default .select2-results__option {
	padding: 9px 14px;
	font-size: 15px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[data-selected="true"] {
	background: var(--accent);
	color: var(--bg);
}

/* --- Loading overlay ---------------------------------------------------- */
.blockUI.blockOverlay {
	background: var(--bg) !important; /* set inline by WC's JS */
	opacity: 0.6 !important;
}

body.shop-light .blockUI.blockOverlay {
	background: var(--shop-bg) !important;
}

/* --- Pagination (catalog/archive only) ----------------------------------- */
.woocommerce-pagination {
	margin-top: 48px;
	display: flex;
	justify-content: center;
}

.woocommerce-pagination ul {
	display: flex;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-pagination a,
.woocommerce-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	border: 1px solid var(--shop-border);
	color: var(--shop-text-body);
	font-weight: 600;
}

.woocommerce-pagination a:hover {
	border-color: var(--shop-accent);
	color: var(--shop-accent-700);
}

.woocommerce-pagination .current {
	background: var(--shop-accent);
	border-color: var(--shop-accent);
	color: var(--shop-text-on-accent);
	font-weight: 800;
}

/* --- Dosage table (moved from the retired product-tabs.css) ------------- */
.revive-dosage-table-wrap {
	overflow-x: auto;
}

.revive-dosage-table {
	border-collapse: collapse;
	width: 100%;
	font-size: 15px;
}

.revive-dosage-table th,
.revive-dosage-table td {
	border: 1px solid var(--border-row);
	padding: 10px 14px;
	text-align: left;
}

.revive-dosage-table thead th {
	background: var(--bg-panel-alt);
	color: var(--text-heading);
	font-weight: 700;
}

.revive-dosage-table tbody tr:nth-child(even) {
	background: oklch(0.17 0.011 45 / 0.5);
}

/* ==========================================================================
   3. Product grid + card
   ========================================================================== */

.shop-catalog {
	max-width: var(--shop-max);
	margin: 0 auto;
	padding: 60px var(--shop-gutter) 0;
	/* Clears the sticky shop header when landing here via the hero's
	   #produits anchor. */
	scroll-margin-top: var(--shop-header-h, 180px);
	color: var(--shop-text-body);
}

.shop--archive .shop-catalog,
.shop--product .shop-catalog {
	padding-left: 0;
	padding-right: 0;
}

/* Sidebar (template-parts/shop/filters-sidebar.php) + grid, on both the
   landing and every archive/category/tag/search view — see
   woocommerce/archive-product.php. */
.shop-catalog__layout {
	display: grid;
	grid-template-columns: 248px minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}

.shop-catalog__main {
	min-width: 0;
}

/* assets/js/shop.js → initInstantCatalog(): brief feedback while an
   instant filter/sort/pagination fetch is in flight. */
.shop-catalog__main.is-loading {
	opacity: 0.45;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.shop-catalog__head {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--shop-divider);
}

.shop-catalog__head h2 {
	font-size: 24px;
	margin: 0;
	color: var(--shop-text-heading);
}

.shop-catalog__count {
	font-size: 13px;
	color: var(--shop-text-muted);
}

.shop-catalog__filters-trigger {
	display: none;
	align-items: center;
	gap: 8px;
	margin-left: auto;
	padding: 0 14px;
	min-height: 40px;
	background: transparent;
	border: 1px solid var(--shop-text-heading);
	color: var(--shop-text-heading);
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 13px;
	cursor: pointer;
}

.shop-catalog__filters-trigger .shop-icon {
	width: 15px;
	height: 15px;
}

/* Active filter chips (inc/shop.php → revive_shop_active_filter_chips()) */
.shop-active-filters {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	padding: 12px 0 0;
}

.shop-active-filters__chip {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 5px 10px;
	background: var(--shop-accent-100);
	border: 1px solid var(--shop-accent);
	color: var(--shop-accent-800);
	font-size: 12px;
}

.shop-active-filters__chip span {
	font-weight: 800;
}

/* Filters sidebar (template-parts/shop/filters-sidebar.php) — desktop
   sticky column; becomes a bottom sheet under the 900px breakpoint
   below, toggled by .shop-catalog__filters-trigger via
   assets/js/shop.js → initFiltersToggle() (same open/close pattern as
   the mini-cart drawer). */
.shop-filters__backdrop {
	display: none;
}

/* Desktop: always visible regardless of the [hidden] attribute the
   template renders by default (that attribute only matters once the
   900px breakpoint below turns this into a JS-toggled bottom sheet). */
.shop-filters[hidden] {
	display: block;
}

.shop-filters {
	position: sticky;
	top: calc(var(--shop-header-h, 138px) + 16px);
}

.shop-filters__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--shop-divider);
}

.shop-filters__head h3 {
	font-size: 15px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0;
	color: var(--shop-text-heading);
}

.shop-filters__reset {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	font-size: 12px;
	color: var(--shop-accent-700);
}

.shop-filters__group {
	padding: 16px 0;
	border-bottom: 1px solid var(--shop-divider);
}

.shop-filters__group-title {
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--shop-text-muted);
	margin-bottom: 10px;
}

.shop-filters__options {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.shop-filters__option {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 13.5px;
	color: var(--shop-text-body);
}

.shop-filters__option:hover {
	color: var(--shop-accent-700);
}

.shop-filters__option.is-active {
	color: var(--shop-text-heading);
	font-weight: 600;
}

.shop-filters__box {
	width: 16px;
	height: 16px;
	flex: none;
	display: grid;
	place-items: center;
	border: 1px solid var(--shop-border-strong);
	background: var(--shop-bg);
	color: var(--shop-text-on-accent);
}

.shop-filters__box .shop-icon {
	width: 11px;
	height: 11px;
	stroke-width: 3;
	/* Always rendered in the markup; opacity (not conditional PHP
	   output) drives visibility, so assets/js/shop.js's
	   initInstantCatalog() can toggle .is-active on the fly after an
	   AJAX filter update without needing to inject/remove this icon's
	   markup itself. */
	opacity: 0;
}

.shop-filters__option.is-active .shop-filters__box {
	background: var(--shop-accent);
	border-color: var(--shop-accent);
}

.shop-filters__option.is-active .shop-filters__box .shop-icon {
	opacity: 1;
}

.shop-filters__option-label {
	flex: 1;
}

.shop-filters__count {
	font-size: 11px;
	color: var(--shop-text-faint);
}

/* Category tree (inc/shop.php → revive_shop_category_tree()): a parent
   term with children becomes a native <details> (consistent with
   .shop-accordion elsewhere in this file, e.g. the FAQ — no JS either
   way); one without children stays exactly the plain .shop-filters__option
   link it always was. The parent's own link lives INSIDE <summary>
   (clicking it also toggles the panel open for a split second before the
   page navigates away — a common, purely cosmetic quirk of nesting a
   link in a summary, invisible in practice since navigation follows
   immediately) so the whole row keeps acting like every other filter
   option, with the chevron as a second, independent click target next to
   it for expand/collapse only. */
.shop-filters__cat > summary {
	display: flex;
	align-items: center;
	gap: 6px;
	list-style: none;
	cursor: pointer;
}

.shop-filters__cat > summary::-webkit-details-marker {
	display: none;
}

.shop-filters__cat .shop-filters__option {
	flex: 1;
	min-width: 0;
}

.shop-filters__cat-chevron {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	color: var(--shop-text-faint);
}

.shop-filters__cat-chevron .shop-icon {
	width: 14px;
	height: 14px;
	transition: transform 150ms ease;
}

.shop-filters__cat > summary:hover .shop-filters__cat-chevron {
	color: var(--shop-accent-700);
}

/* > summary here matters now that categories can nest more than one
   level deep: without it, this descendant selector would also match a
   nested (closed) details' own chevron whenever its ancestor happens to
   be open, rotating it incorrectly. Scoping to the direct-child summary
   keeps each details' chevron tied only to its own [open] state. */
.shop-filters__cat[open] > summary .shop-filters__cat-chevron .shop-icon {
	transform: rotate(180deg);
}

.shop-filters__subcats {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 7px 0 0 25px;
}

.shop-filters__option--sub {
	font-size: 13px;
}

.shop-filters__group--price .price_slider_wrapper {
	margin-top: 4px;
}

/* jQuery UI's own stylesheet normally supplies the base position rules
   a slider needs (.ui-slider: relative; .ui-slider-handle/-range:
   absolute) — WooCommerce's default styles carry them, but those are
   dequeued theme-wide in boutique context (inc/shop.php →
   revive_shop_dequeue_wc_styles()), so this theme has to provide them
   itself. Without `position`, the JS-computed `left` offsets on the
   handles have no effect and both collapse to the start. */
.shop-filters__group--price .price_slider {
	position: relative;
	margin-bottom: 14px;
	background: var(--shop-divider);
	height: 4px;
	text-align: left;
}

.shop-filters__group--price .ui-slider-range {
	position: absolute;
	top: 0;
	height: 100%;
	background: var(--shop-accent);
}

.shop-filters__group--price .ui-slider-handle {
	position: absolute;
	top: -5px;
	/* Centers the handle on its computed left% (jQuery UI positions by
	   the handle's left edge, not its center). */
	margin-left: -7px;
	z-index: 2;
	width: 14px;
	height: 14px;
	background: var(--shop-bg);
	border: 2px solid var(--shop-accent);
	border-radius: 50%;
	outline: none;
	cursor: pointer;
	touch-action: none;
}

.shop-filters__group--price .price_slider_amount {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 12.5px;
	color: var(--shop-text-muted);
}

.shop-filters__group--price .price_slider_amount .button {
	order: -1;
	background: transparent;
	border: 1px solid var(--shop-border-strong);
	color: var(--shop-text-heading);
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 11px;
	text-transform: uppercase;
	padding: 6px 10px;
	cursor: pointer;
}

.shop-filters__apply {
	display: none;
}

/* Thin divider lines are drawn per-card (border-right/border-bottom
   below), not via a gap + container-background trick — that trick
   leaves the container's background exposed across an incomplete last
   row (fewer items than columns), showing as a solid grey block where
   no card exists to cover it. Real borders on real cards can't do that:
   a missing card just leaves nothing there. */
.shop-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
	border-top: 1px solid var(--shop-divider);
	border-left: 1px solid var(--shop-divider);
}

.shop-card {
	display: flex;
	flex-direction: column;
	position: relative;
	background: var(--shop-bg);
	border-right: 1px solid var(--shop-divider);
	border-bottom: 1px solid var(--shop-divider);
	transition: transform 0.15s ease;
}

.shop-card:hover {
	transform: translateY(-2px);
}

.shop-card__media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	background: var(--shop-surface-alt);
	overflow: hidden;
}

.shop-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform 0.2s ease;
}

.shop-card:hover .shop-card__media img {
	transform: scale(1.04);
}

.shop-card__placeholder {
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(135deg, var(--shop-surface-sunken) 0px, var(--shop-surface-sunken) 14px, var(--shop-surface-alt) 14px, var(--shop-surface-alt) 28px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px;
	text-align: center;
}

.shop-card__placeholder span {
	color: var(--shop-text-faint);
	font-family: monospace;
	font-size: 12px;
}

/* Badge (template-parts/shop/product-badge.php) — bestseller / nouveau
   / % de rabais, computed from real product data in inc/shop.php. */
.shop-badge {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	padding: 4px 9px;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: var(--shop-accent);
	color: var(--shop-text-on-accent);
}

.shop-badge--dark {
	background: #201e1d;
	color: #f3f2f2;
}

/* White on this red passes AA contrast at the badge's small size. */
.shop-badge--sale {
	background: #d32f2f;
	color: #ffffff;
}

.shop-card__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px 14px 0;
	flex: 1;
}

.shop-card__tag {
	color: var(--shop-accent-700);
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.shop-card__title {
	font-size: 15px;
	line-height: 1.2;
	margin: 0;
	color: var(--shop-text-heading);
}

.shop-card__title a {
	color: var(--shop-text-heading);
}

.shop-card__title a:hover {
	color: var(--shop-accent-700);
}

.shop-card__rating {
	display: flex;
	align-items: center;
	gap: 7px;
}

.shop-card__reviews {
	color: var(--shop-text-faint);
	font-size: 11.5px;
}

.shop-card__price {
	font-family: var(--font-heading);
	color: var(--shop-text-heading);
	font-size: 19px;
	margin-top: auto;
	padding-top: 4px;
}

.shop-card__portion {
	color: var(--shop-text-muted);
	font-size: 12px;
}

.shop-card__actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px 14px 14px;
}

.shop-card__btn {
	width: 100%;
	font-size: 13.5px;
	padding: 12px;
	background: var(--shop-accent);
	color: var(--shop-text-on-accent);
	border: 0;
}

.shop-card__btn:hover {
	background: var(--shop-accent-hover);
}

.shop-card__btn.loading {
	opacity: 0.65;
}

.shop-card__btn.is-added {
	background: #201e1d;
	color: #f3f2f2;
}

/* WooCommerce appends this after an AJAX add — the natural next step. */
.shop-card .added_to_cart {
	display: block;
	text-align: center;
	border: 1px solid var(--shop-border-strong);
	color: var(--shop-text-heading);
	font-weight: 800;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	padding: 10px;
}

.shop-card .added_to_cart:hover {
	border-color: var(--shop-accent);
	color: var(--shop-accent-700);
}

.woocommerce-no-products-found {
	padding: 40px 0 0;
	color: var(--shop-text-muted);
}

/* Archive/category/tag pagination (woocommerce_pagination(), core markup:
   <nav class="woocommerce-pagination"><ul class="page-numbers">…) — had
   no styling at all until now, picking up whatever bare browser/global
   defaults applied. Current page is marked by both fill and weight, not
   color alone; every link/current span is a 44px touch target. */
.woocommerce-pagination {
	margin: 48px 0 0;
	display: flex;
	justify-content: center;
}

.woocommerce-pagination .page-numbers {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
}

.woocommerce-pagination a.page-numbers,
.woocommerce-pagination span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	border: 1px solid var(--shop-border);
	border-radius: var(--shop-radius-sm);
	color: var(--shop-text-body);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 14px;
}

.woocommerce-pagination a.page-numbers:hover {
	border-color: var(--shop-accent);
	color: var(--shop-accent-700);
}

.woocommerce-pagination a.page-numbers:focus-visible {
	outline: 2px solid var(--shop-accent);
	outline-offset: 2px;
}

.woocommerce-pagination span.page-numbers.current {
	background: var(--shop-accent);
	border-color: var(--shop-accent);
	color: var(--shop-text-on-accent);
	font-weight: 800;
}

.woocommerce-pagination .page-numbers.dots {
	border-color: transparent;
	min-width: auto;
	padding: 0 4px;
	color: var(--shop-text-faint);
}

/* ==========================================================================
   4. Landing sections
   ========================================================================== */

.shop-hero {
	padding: 56px var(--shop-gutter) 44px;
	border-bottom: 2px solid var(--shop-divider);
	background: var(--shop-bg);
	color: var(--shop-text-body);
}

.shop-hero__inner {
	max-width: 780px;
	margin: 0 auto;
	text-align: center;
}

.shop-hero__eyebrow {
	display: inline-block;
	color: var(--shop-accent-700);
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 18px;
}

.shop-hero__title {
	font-size: 44px;
	line-height: 1.1;
	margin: 0 0 18px;
	color: var(--shop-text-heading);
}

.shop-hero__subtitle {
	color: var(--shop-text-muted);
	font-size: 18px;
	max-width: 620px;
	margin: 0 auto 24px;
}

.shop-hero__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.shop-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 16px;
	padding: 17px 34px;
	background: var(--shop-accent);
	color: var(--shop-text-on-accent);
	border: 0;
}

.shop-hero__cta:hover {
	background: var(--shop-accent-hover);
}

.shop-hero__cta .shop-icon {
	width: 18px;
	height: 18px;
}

.shop-hero__proof {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--shop-text-muted);
	font-size: 14px;
	font-weight: 600;
}

.shop-hero__proof:hover {
	color: var(--shop-accent-700);
}

/* Trust strip — the landing (non-compact) instance only; .shop-trust--compact
   (product page / checkout) overrides its own colors below and is
   untouched here. */
.shop-trust {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px 40px;
	list-style: none;
	margin: 0;
	padding: 22px var(--shop-gutter);
	background: var(--shop-surface-alt);
	border-bottom: 1px solid var(--shop-divider);
}

.shop-trust__item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--shop-text-body);
	font-size: 14px;
	font-weight: 600;
}

.shop-trust__item .shop-icon {
	color: var(--shop-accent);
	flex: none;
}

.shop-trust--compact {
	justify-content: flex-start;
	gap: 10px 24px;
	padding: 16px 0 0;
	background: none;
	border: none;
}

.shop-trust--compact .shop-trust__item {
	font-size: 13px;
	color: var(--text-muted);
}

.shop-trust--compact .shop-icon {
	width: 17px;
	height: 17px;
}

/* Shop-by-goal band (template-parts/shop/goal-band.php) — real category
   shortcuts, replaces the old category-tile grid. */
.shop-goals {
	max-width: var(--shop-max);
	margin: 0 auto;
	padding: 40px var(--shop-gutter) 0;
	color: var(--shop-text-body);
}

.shop-goals__head {
	margin-bottom: 16px;
}

.shop-goals__head h2 {
	font-size: 24px;
	margin: 0;
	color: var(--shop-text-heading);
}

/* Same fix as .shop-grid above: real borders per tile, not a
   gap + container-background trick, so a row with fewer than 5
   resolved tiles doesn't show a grey block where a tile is missing. */
.shop-goals__list {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--shop-divider);
	border-left: 1px solid var(--shop-divider);
}

.shop-goals__tile {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
	padding: 20px 18px;
	background: var(--shop-bg);
	border-right: 1px solid var(--shop-divider);
	border-bottom: 1px solid var(--shop-divider);
	height: 100%;
}

.shop-goals__tile:hover {
	background: var(--shop-surface-alt);
}

.shop-goals__label {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 16px;
	line-height: 1.15;
	color: var(--shop-text-heading);
}

.shop-goals__sub {
	font-size: 12px;
	color: var(--shop-text-muted);
}

/* Featured / best sellers */
.shop-section {
	max-width: var(--shop-max);
	margin: 0 auto;
	padding: 60px var(--shop-gutter) 0;
	color: var(--shop-text-body);
}

/* "Pourquoi Revive" */
.shop-why {
	background: var(--shop-surface-alt);
	border-top: 1px solid var(--shop-divider);
	border-bottom: 1px solid var(--shop-divider);
	margin-top: 80px;
	padding: 72px var(--shop-gutter);
	color: var(--shop-text-body);
}

.shop-why__inner {
	max-width: var(--shop-max);
	margin: 0 auto;
}

.shop-why h2 {
	font-size: 30px;
	text-align: center;
	margin: 0 0 44px;
	color: var(--shop-text-heading);
}

.shop-why__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 36px;
}

.shop-why__item {
	text-align: center;
}

.shop-why__icon {
	width: 60px;
	height: 60px;
	margin: 0 auto 18px;
	border: 2px solid var(--shop-accent);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--shop-accent-700);
}

.shop-why__icon .shop-icon {
	width: 26px;
	height: 26px;
}

.shop-why__item h3 {
	font-size: 18px;
	margin: 0 0 10px;
	color: var(--shop-text-heading);
}

.shop-why__item p {
	color: var(--shop-text-muted);
	font-size: 15px;
}

/* Reviews */
.shop-reviews {
	padding: 72px var(--shop-gutter) 0;
	color: var(--shop-text-body);
}

.shop-reviews__inner {
	max-width: var(--shop-max);
	margin: 0 auto;
}

.shop-reviews__summary {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--shop-text-muted);
	font-size: 15px;
	margin-top: 10px;
}

.shop-reviews__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
}

.shop-review {
	margin: 0;
	background: var(--shop-surface);
	border: 1px solid var(--shop-border);
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.shop-review__stars {
	display: flex;
	gap: 2px;
	color: var(--shop-accent-700);
}

.shop-review__stars .shop-icon {
	width: 16px;
	height: 16px;
	fill: currentColor;
	stroke-width: 1;
}

.shop-review blockquote {
	margin: 0;
	color: var(--shop-text-body);
	font-size: 15px;
	line-height: 1.6;
}

.shop-review figcaption {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: auto;
	padding-top: 6px;
	border-top: 1px solid var(--shop-divider);
}

.shop-review__avatar {
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--shop-surface-alt);
	color: var(--shop-accent-700);
	font-family: var(--font-heading);
	font-size: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.shop-review__meta {
	display: flex;
	flex-direction: column;
	gap: 1px;
	font-size: 13px;
	min-width: 0;
}

.shop-review__meta strong {
	color: var(--shop-text-heading);
	font-size: 14px;
}

.shop-review__meta a {
	color: var(--shop-text-faint);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.shop-review__meta a:hover {
	color: var(--shop-accent-700);
}

.shop-review__verified {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--shop-accent-700);
	font-size: 12px;
	font-weight: 600;
}

.shop-review__verified .shop-icon {
	width: 13px;
	height: 13px;
	stroke-width: 2.6;
}

/* FAQ */
.shop-faq {
	padding: 72px var(--shop-gutter) 0;
	scroll-margin-top: var(--shop-header-h, 180px);
	color: var(--shop-text-body);
}

.shop-faq__inner {
	max-width: 840px;
	margin: 0 auto;
}

.shop-faq h2 {
	font-size: 30px;
	text-align: center;
	margin: 0 0 32px;
	color: var(--shop-text-heading);
}

/* Accordion (native <details>) — shared by the landing FAQ
   (.shop-accordion--faq) and the product page tabs
   (.shop-accordion--product, restyled alongside the rest of the PDP in
   Phase 3). One base rule set now that both consumers are on the same
   light theme; previously this was split per-variant and the base
   structural rules (layout/cursor/icon rotation, not just color) were
   accidentally dropped entirely in the Phase 2 rewrite — the product
   page's accordion had no styling at all as a result, unnoticed since
   PDP wasn't being tested yet at that point. */
.shop-accordion {
	border-top: 1px solid var(--shop-divider);
}

.shop-accordion__item {
	border-bottom: 1px solid var(--shop-divider);
}

.shop-accordion__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 4px;
	cursor: pointer;
	list-style: none;
	color: var(--shop-text-heading);
	font-family: var(--font-heading);
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

.shop-accordion__summary::-webkit-details-marker {
	display: none;
}

.shop-accordion__summary:hover {
	color: var(--shop-accent-700);
}

.shop-accordion__summary .shop-icon {
	flex: none;
	color: var(--shop-accent);
	transition: transform 0.15s ease;
}

.shop-accordion__item[open] > .shop-accordion__summary .shop-icon {
	transform: rotate(180deg);
}

.shop-accordion__panel {
	padding: 0 4px 24px;
	color: var(--shop-text-body);
	font-size: 15px;
	line-height: 1.7;
}

.shop-accordion__panel > :first-child {
	margin-top: 0;
}

.shop-accordion__panel p {
	margin-bottom: 14px;
}

.shop-accordion__panel a {
	color: var(--shop-accent-700);
	text-decoration: underline;
}

.shop-accordion__panel ul,
.shop-accordion__panel ol {
	padding-left: 20px;
}

.shop-accordion__panel li {
	margin-bottom: 8px;
}

/* Closing CTA */
.shop-closing {
	margin-top: 80px;
	padding: 72px var(--shop-gutter);
	background: var(--shop-accent);
	color: var(--shop-text-on-accent);
	text-align: center;
}

.shop-closing h2 {
	font-size: 30px;
	margin: 0 0 16px;
	color: inherit;
}

.shop-closing p {
	color: inherit;
	opacity: 0.85;
	font-size: 16px;
	max-width: 560px;
	margin: 0 auto 28px;
}

.shop-closing__actions {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	justify-content: center;
}

.shop-closing .btn-solid {
	background: #201e1d;
	color: #f3f2f2;
}

.shop-closing .btn-outline {
	border-color: rgb(18 34 10 / 0.4);
	color: inherit;
}

.shop-closing .btn-outline:hover {
	border-color: currentColor;
	color: inherit;
}

/* Category archive hero */
.shop-archive-hero {
	padding: 40px 0 24px;
	text-align: left;
	max-width: none;
}

.shop-archive-hero h1 {
	font-size: 34px;
	color: var(--shop-text-heading);
}

.shop-archive-hero p {
	margin: 10px 0 0;
	max-width: 620px;
	color: var(--shop-text-muted);
}

/* .shop-catalog's 60px top padding separates the grid from the landing
   sections above it; on a category page it sat right under this hero's
   own bottom padding, leaving ~85px of empty space before the count. */
.shop--archive .shop-catalog {
	padding-top: 8px;
}

/* ==========================================================================
   5. Single product
   ========================================================================== */

.shop--product {
	background: var(--shop-bg);
	color: var(--shop-text-body);
}

.shop--product div.product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 56px;
	align-items: start;
	padding-top: 36px;
}

/* Locked to a fixed square, !important on the sizing/fit rules: WC's
   FlexSlider script (assets/js/shop.js's un-delay fix now lets it run
   correctly) sets its own inline width/height on the slide wrapper and
   image via JS, which otherwise wins over a plain external stylesheet
   rule — a product photo with a different aspect ratio than the ones
   this was first tested against (a tall/narrow bar wrapper vs. a
   roughly-square box) exposed that the box's real height was coming
   from FlexSlider's own calculation, not this CSS. */
.shop--product .woocommerce-product-gallery {
	position: relative;
	grid-column: 1;
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--shop-surface-alt);
}

.shop--product .woocommerce-product-gallery__wrapper,
.shop--product .flex-viewport,
.shop--product .woocommerce-product-gallery__image {
	height: 100% !important;
	margin: 0;
}

.shop--product .woocommerce-product-gallery__image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain;
	mix-blend-mode: multiply;
	border: 1px solid var(--shop-border);
}

.shop--product .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 10px;
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}

.shop--product .flex-control-thumbs li {
	margin: 0;
}

.shop--product .flex-control-thumbs img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
	background: var(--shop-surface-alt);
	mix-blend-mode: multiply;
	border: 1px solid var(--shop-border);
	opacity: 0.55;
	cursor: pointer;
}

.shop--product .flex-control-thumbs img.flex-active,
.shop--product .flex-control-thumbs img:hover {
	opacity: 1;
	border-color: var(--shop-accent);
}

.shop-gallery-wrap {
	position: relative;
}

/* Summary column */
.shop--product .summary {
	grid-column: 2;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.shop--product .summary .product_title {
	font-size: 32px;
	line-height: 1.15;
	margin: 0 0 14px;
	color: var(--shop-text-heading);
}

.shop--product .woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
}

.shop--product .woocommerce-review-link {
	color: var(--shop-text-muted);
	font-size: 14px;
}

.shop--product .woocommerce-review-link:hover {
	color: var(--shop-accent-700);
}

.shop--product .summary .price {
	font-family: var(--font-heading);
	color: var(--shop-text-heading);
	font-size: 30px;
	margin: 0 0 4px;
}

.shop--product .summary .price del {
	font-size: 22px;
	color: var(--shop-text-faint);
}

.shop-save-badge {
	display: inline-block;
	margin: 0 0 10px;
	padding: 4px 10px;
	background: var(--shop-accent-100);
	color: var(--shop-accent-800);
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 12.5px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

.shop-portion {
	color: var(--shop-text-muted);
	font-size: 15px;
	margin: 0 0 20px;
}

.shop-benefits {
	list-style: none;
	margin: 0 0 26px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.shop-benefits li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: var(--shop-text-body);
	font-size: 15px;
	line-height: 1.5;
}

.shop-benefits .shop-icon {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	color: var(--shop-accent-700);
	stroke-width: 2.6;
}

/* Add-to-cart form */
.shop--product form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	margin: 0 0 6px;
}

.shop--product form.cart.variations_form {
	display: block;
}

.shop--product .single_add_to_cart_button {
	flex: 1;
	min-width: 200px;
	font-size: 16px;
	padding: 17px 30px;
	background: var(--shop-accent);
	color: var(--shop-text-on-accent);
	font-family: var(--font-body);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	border: none;
	cursor: pointer;
}

.shop--product .single_add_to_cart_button:hover {
	background: var(--shop-accent-hover);
}

.shop--product .single_add_to_cart_button.disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.shop--product .stock {
	margin: 12px 0 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--shop-accent-700);
}

.shop--product .stock.out-of-stock {
	color: #b3261e;
}

.shop--product .quantity .qty {
	background: var(--shop-bg);
	border-color: var(--shop-border);
	color: var(--shop-text-heading);
}

.shop--product .quantity .qty:focus {
	border-color: var(--shop-accent);
}

/* Variations — table + native <select> stay in the DOM (WooCommerce's
   own wc-add-to-cart-variation.js drives price/stock/image sync off
   them) but are visually replaced by swatch buttons; see
   initVariationSwatches() in assets/js/shop.js. */
.shop--product table.variations {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 18px;
}

.shop--product table.variations th,
.shop--product table.variations td {
	padding: 0 0 14px;
	text-align: left;
	vertical-align: top;
}

.shop--product table.variations th {
	width: 100px;
	padding-top: 8px;
	color: var(--shop-text-muted);
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

/* Attributes with too many options to swatch-ify (assets/js/shop.js →
   initVariationSwatches(), e.g. "Saveur") stay a real <select> — two
   classes to beat the shared, still-dark ".shop select" rule (Section 2,
   dark by default for any not-yet-restyled context; checkout's own
   country/state selects are relit instead via a body.shop-light
   override, not by touching this shared rule), same technique as the
   catalog sort dropdown in Section 3. */
.shop--product table.variations select {
	background-color: var(--shop-surface);
	background-image: linear-gradient(45deg, transparent 50%, var(--shop-text-muted) 50%), linear-gradient(135deg, var(--shop-text-muted) 50%, transparent 50%);
	border-color: var(--shop-border);
	color: var(--shop-text-heading);
}

.shop--product table.variations select:focus {
	border-color: var(--shop-accent);
}

/* Two classes (0,2,0), not one — beats the pre-existing ".shop select"
   rule's (0,1,1) specificity (Section 2, still the dark default outside
   any restyled context), which otherwise won and rendered this at
   width:100% with its own dark background, on top of the swatch buttons
   instead of invisibly behind them. */
.shop--product .shop-swatch-select {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	white-space: nowrap;
	border: 0;
}

.shop-swatch-group {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.shop-swatch {
	padding: 10px 16px;
	background: var(--shop-bg);
	border: 1px solid var(--shop-border-strong);
	color: var(--shop-text-heading);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
}

.shop-swatch:hover {
	border-color: var(--shop-accent);
}

.shop-swatch.is-selected {
	background: var(--shop-text-heading);
	border-color: var(--shop-text-heading);
	color: var(--shop-bg);
}

.shop--product .reset_variations {
	display: inline-block;
	margin-top: 10px;
	color: var(--shop-text-faint);
	font-size: 13px;
	text-decoration: underline;
}

.shop--product .woocommerce-variation-price {
	margin-bottom: 14px;
}

.shop--product .woocommerce-variation-price .price {
	font-size: 26px;
}

.shop--product .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

/* Trust + guarantee under the CTA */
.shop--product .summary .shop-trust--compact {
	border-top: 1px solid var(--shop-divider);
	margin-top: 20px;
	padding-top: 18px;
}

.shop--product .summary .shop-trust--compact .shop-trust__item {
	color: var(--shop-text-muted);
}

.shop--checkout .shop-trust--compact .shop-trust__item {
	color: var(--shop-text-muted);
}

.shop-guarantee {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 14px 0 0;
	color: var(--shop-text-muted);
	font-size: 14px;
	line-height: 1.5;
}

.shop-guarantee .shop-icon {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	color: var(--shop-accent-700);
}

/* Tabs / accordion below the two columns */
.shop--product .shop-accordion--product {
	grid-column: 1 / -1;
	margin-top: 28px;
}

.shop--product .shop-accordion--product .shop-accordion__summary {
	font-size: 16px;
	padding: 22px 4px;
}

.shop--product .shop-accordion__panel h2 {
	display: none; /* WC repeats the tab title inside the panel */
}

.shop--product .shop-accordion__panel table.shop_attributes {
	width: 100%;
	border-collapse: collapse;
}

.shop--product .shop-accordion__panel table.shop_attributes th,
.shop--product .shop-accordion__panel table.shop_attributes td {
	border-bottom: 1px solid var(--shop-divider);
	padding: 10px 0;
	text-align: left;
	font-size: 15px;
}

.shop--product .shop-accordion__panel table.shop_attributes th {
	width: 200px;
	color: var(--shop-text-muted);
	font-weight: 700;
}

.shop--product .shop-accordion__panel table.shop_attributes p {
	margin: 0;
}

/* Promoted dosage section (inc/shop.php → revive_single_dosage_section()) */
.shop-dosage-section {
	grid-column: 1 / -1;
	margin-top: 56px;
	padding-top: 44px;
	border-top: 2px solid var(--shop-divider);
}

.shop-dosage-section h2 {
	font-size: 26px;
	margin: 0 0 6px;
	color: var(--shop-text-heading);
}

.shop-dosage-section__intro {
	color: var(--shop-text-muted);
	font-size: 14px;
	margin: 0 0 20px;
	max-width: 60ch;
}

.revive-dosage-table-wrap {
	overflow-x: auto;
}

.shop--product .revive-dosage-table {
	border-collapse: collapse;
	width: 100%;
	font-size: 15px;
}

.shop--product .revive-dosage-table th,
.shop--product .revive-dosage-table td {
	border: 1px solid var(--shop-divider);
	padding: 10px 14px;
	text-align: left;
}

.shop--product .revive-dosage-table thead th {
	background: var(--shop-surface-alt);
	color: var(--shop-text-heading);
	font-weight: 700;
}

.shop--product .revive-dosage-table tbody tr:nth-child(even) {
	background: var(--shop-surface-alt);
}

/* Reviews inside the accordion */
#reviews .commentlist {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

#reviews .comment_container {
	display: flex;
	gap: 16px;
	background: var(--shop-surface);
	border: 1px solid var(--shop-border);
	padding: 20px;
}

#reviews .comment_container img.avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	flex: none;
}

#reviews .comment-text {
	flex: 1;
	min-width: 0;
}

#reviews .woocommerce-review__author {
	color: var(--shop-text-heading);
	font-weight: 700;
}

#reviews .woocommerce-review__published-date,
#reviews .woocommerce-review__verified {
	color: var(--shop-text-faint);
	font-size: 13px;
	margin-left: 8px;
}

#reviews .woocommerce-review__verified {
	color: var(--shop-accent-700);
}

#reviews .description {
	margin-top: 10px;
	color: var(--shop-text-body);
}

#review_form_wrapper {
	background: var(--shop-surface-alt);
	border: 1px solid var(--shop-border);
	padding: 28px;
}

#review_form .comment-reply-title {
	display: block;
	font-family: var(--font-heading);
	color: var(--shop-text-heading);
	font-size: 17px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	margin-bottom: 18px;
}

#review_form .comment-form-rating label,
#review_form .comment-form-comment label,
#review_form .comment-form-author label,
#review_form .comment-form-email label {
	display: block;
	color: var(--shop-text-muted);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	margin-bottom: 6px;
}

#review_form textarea,
#review_form input[type="text"],
#review_form input[type="email"] {
	width: 100%;
	background: var(--shop-bg);
	border: 1px solid var(--shop-border);
	color: var(--shop-text-heading);
	font-family: var(--font-body);
	font-size: 15px;
	padding: 12px 14px;
}

#review_form textarea:focus,
#review_form input:focus {
	outline: none;
	border-color: var(--shop-accent);
}

#review_form p {
	margin-bottom: 16px;
}

#review_form .form-submit input[type="submit"] {
	background: var(--shop-accent);
	color: var(--shop-text-on-accent);
	font-family: var(--font-body);
	font-weight: 800;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	padding: 14px 30px;
	border: none;
	cursor: pointer;
}

#review_form .form-submit input[type="submit"]:hover {
	background: var(--shop-accent-hover);
}

#reviews .comment-form-cookies-consent label {
	display: inline;
	font-size: 13px;
	color: var(--shop-text-muted);
	text-transform: none;
	letter-spacing: 0;
}

/* Related / upsells */
.shop--product .related,
.shop--product .upsells,
.cross-sells {
	grid-column: 1 / -1;
	margin-top: 72px;
}

.shop--product .related > h2,
.shop--product .upsells > h2,
.cross-sells > h2 {
	font-size: 26px;
	margin: 0 0 26px;
	color: var(--shop-text-heading);
}

/* ==========================================================================
   6. Cart
   ========================================================================== */

.shop--cart .shop-page-title {
	color: var(--shop-text-heading);
}

/* Layout wrapper (inc/shop.php → revive_shop_cart_layout_open/close(),
   hooked to woocommerce_before_cart / woocommerce_after_cart — brackets
   the entire core cart.php render without overriding it) — items table
   on the left, cross-sells + order summary stacked on the right. */
.shop-cart-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 372px;
	gap: 40px;
	align-items: start;
}

.woocommerce-cart-form {
	grid-column: 1;
	margin-bottom: 0;
}

/* Free-shipping nudge (inc/shop.php → revive_shop_free_shipping_nudge_html(),
   shared with the mini-cart drawer) */
.shop-ship-nudge {
	padding: 12px 16px;
	background: var(--shop-accent-100);
	border: 1px solid var(--shop-accent);
	margin-bottom: 20px;
}

.shop-ship-nudge__row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}

.shop-ship-nudge__label {
	flex: 1;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 13px;
	color: var(--shop-accent-800);
}

.shop-ship-nudge__info {
	flex: none;
	display: inline-flex;
	color: var(--shop-accent-700);
	cursor: help;
}

.shop-ship-nudge__info .shop-icon {
	width: 15px;
	height: 15px;
}

.shop-ship-nudge__track {
	height: 4px;
	background: var(--shop-accent-200);
}

.shop-ship-nudge__bar {
	height: 100%;
	background: var(--shop-accent);
}

table.shop_table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

table.shop_table th {
	text-align: left;
	color: var(--shop-text-muted);
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	padding: 0 12px 14px;
	border-bottom: 2px solid var(--shop-divider);
}

table.shop_table td {
	padding: 18px 12px;
	border-bottom: 1px solid var(--shop-divider);
	vertical-align: middle;
	color: var(--shop-text-body);
}

table.shop_table th:first-child,
table.shop_table td:first-child {
	padding-left: 0;
}

table.shop_table th:last-child,
table.shop_table td:last-child {
	padding-right: 0;
}

table.cart .product-remove {
	width: 40px;
}

table.cart .product-remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1px solid var(--shop-border-strong);
	color: var(--shop-text-muted);
	font-size: 18px;
	line-height: 1;
}

table.cart .product-remove a.remove:hover {
	border-color: var(--shop-accent);
	color: var(--shop-accent-700);
}

table.cart .product-thumbnail {
	width: 90px;
}

table.cart .product-thumbnail img {
	width: 72px;
	height: 72px;
	object-fit: contain;
	background: var(--shop-surface-alt);
	mix-blend-mode: multiply;
	border: 1px solid var(--shop-border);
}

table.cart .product-name a {
	color: var(--shop-text-heading);
	font-weight: 600;
}

table.cart .product-name a:hover {
	color: var(--shop-accent-700);
}

table.cart .product-subtotal {
	color: var(--shop-text-heading);
	font-weight: 700;
	text-align: right;
}

.shop--cart .quantity .qty {
	background: var(--shop-bg);
	border-color: var(--shop-border);
	color: var(--shop-text-heading);
}

.shop--cart .quantity .qty:focus {
	border-color: var(--shop-accent);
}

.cart .actions {
	padding-top: 22px;
	text-align: right;
}

.cart .actions .button {
	display: inline-block;
	background: transparent;
	border: 1px solid var(--shop-text-heading);
	color: var(--shop-text-heading);
	font-family: var(--font-body);
	font-weight: 800;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	padding: 13px 26px;
	cursor: pointer;
}

.cart .actions .button:hover:not(:disabled) {
	border-color: var(--shop-accent);
	color: var(--shop-accent-700);
}

.cart .actions .button:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* Coupon row (only rendered when coupons are enabled in WooCommerce) —
   had no styling of its own, so the input showed as a tiny bare browser
   field floating above its button. */
.cart .actions .coupon {
	display: flex;
	gap: 8px;
	float: left;
}

.cart .actions .coupon label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.cart .actions .coupon input {
	min-width: 0;
	padding: 12px 14px;
	background: var(--shop-surface);
	border: 1px solid var(--shop-border);
	border-radius: var(--shop-radius-sm);
	color: var(--shop-text-heading);
	font-family: var(--font-body);
	font-size: 15px;
}

.cart .actions .coupon input:focus {
	outline: none;
	border-color: var(--shop-accent);
}

.cart-collaterals {
	grid-column: 2;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.cross-sells {
	max-width: none;
}

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

.cross-sells h2 {
	font-size: 17px;
	margin: 0 0 14px;
	color: var(--shop-text-heading);
}

.cart_totals {
	width: 100%;
	max-width: none;
	border: 1px solid var(--shop-divider);
	padding: 24px;
}

.cart_totals h2 {
	font-size: 17px;
	margin: 0 0 18px;
	color: var(--shop-text-heading);
}

.cart_totals table.shop_table th,
.cart_totals table.shop_table td {
	padding: 10px 0;
	border-bottom: 1px solid var(--shop-divider);
}

.cart_totals .order-total th,
.cart_totals .order-total td {
	border-bottom: none;
	padding-bottom: 0;
	color: var(--shop-text-heading);
	font-size: 18px;
}

.cart_totals .order-total .amount {
	font-family: var(--font-heading);
}

.cart_totals td {
	text-align: right;
}

.cart_totals .woocommerce-shipping-methods {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: left;
}

.cart_totals .woocommerce-shipping-methods li {
	margin-bottom: 8px;
}

.cart_totals .woocommerce-shipping-methods label {
	color: var(--shop-text-body);
	cursor: pointer;
}

.woocommerce-shipping-destination {
	color: var(--shop-text-faint);
	font-size: 13px;
	text-align: left;
	margin-top: 8px;
}

.shipping-calculator-button {
	color: var(--shop-accent-700);
	font-size: 13px;
	text-decoration: underline;
}

.wc-proceed-to-checkout {
	margin-top: 24px;
}

.wc-proceed-to-checkout .checkout-button {
	display: block;
	width: 100%;
	text-align: center;
	background: var(--shop-accent);
	color: var(--shop-text-on-accent);
	font-family: var(--font-body);
	font-weight: 800;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	padding: 17px;
	border: none;
	cursor: pointer;
}

.wc-proceed-to-checkout .checkout-button:hover {
	background: var(--shop-accent-hover);
}

.cart-empty {
	grid-column: 1 / -1;
	font-size: 18px;
	color: var(--shop-text-muted);
	margin-bottom: 20px;
}

.return-to-shop {
	grid-column: 1 / -1;
}

.return-to-shop .button {
	display: inline-block;
	background: var(--shop-accent);
	color: var(--shop-text-on-accent);
	font-weight: 800;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	padding: 15px 30px;
}

/* ==========================================================================
   7. Checkout + thank-you
   ========================================================================== */

/* base.css's sitewide "h1, h2, h3, h4 { color: var(--text-heading) }"
   (dark-theme, near-white) sets color directly on the element — a direct
   rule always wins over whatever a light-theme ancestor like .shop--
   checkout/body.shop-light would otherwise hand down through inheritance,
   so every heading needs its OWN override, not just a lighter ancestor.
   The cart page's title already has exactly this fix (Section 6,
   .shop--cart .shop-page-title) — checkout's own "Paiement" title never
   got the same treatment, which is what made it unreadable (near-white
   text on white). Scoped to .shop--checkout specifically (not just
   .shop-page-title) so it can't touch .shop-page-title--thankyou's own
   accent-green version — that's .shop--thankyou's title, a different,
   mutually exclusive <main> class (see page.php), never both at once. */
.shop--checkout .shop-page-title {
	color: var(--shop-text-heading);
}

.woocommerce-form-login-toggle,
.woocommerce-form-coupon-toggle {
	margin-bottom: 24px;
}

/* Two grid items only (.shop-checkout-col--left/--right, opened/closed
   via hooks in inc/shop.php — see revive_shop_checkout_col_left_open()'s
   docblock for why: letting #customer_details/#order_review_heading/
   #order_review and the two step badges all sit directly in this grid
   and rely on auto-placement to sort out the rows looked simpler but
   broke live, because the auto-placement cursor doesn't just find "the
   first free cell per column" the way a couple of worked examples
   suggest — it advances based on each item's column relative to the
   previous item's. Wrapping each column's content in one element removes
   the ambiguity instead of re-guessing it). */
form.checkout {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}

.shop-checkout-col--left {
	grid-column: 1;
}

.shop-checkout-col--right {
	grid-column: 2;
}

form.checkout #order_review_heading {
	font-size: 20px;
	margin: 0;
	color: var(--shop-text-heading);
}

form.checkout .col2-set .col-1,
form.checkout .col2-set .col-2 {
	width: 100%;
}

form.checkout .col2-set .col-2 {
	margin-top: 32px;
}

/* Section headings inside the cart/checkout shortcode output only —
   never .shop-card__title, which is also an <h3>. Color is explicit
   because base.css colors every h1–h4 directly with the dark theme's
   near-white, which beats any inherited color: "Vos coordonnées" and
   "Informations complémentaires" were nearly invisible without it. */
.shop--cart > h2,
.shop--checkout h3,
.shop--thankyou h2 {
	font-size: 19px;
	margin: 0 0 20px;
	color: var(--shop-text-heading);
}

/* Step badges (inc/shop.php → revive_shop_checkout_step()) — a static
   visual aid, not a real wizard. Plain block elements now (no grid-
   column of their own): each one is just the first/an inner child of
   its column's wrapper div, so normal document flow already puts it in
   the right place. */
.shop-checkout-step {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 18px;
}

.shop-checkout-step__num {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--shop-accent);
	color: var(--shop-text-on-accent);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 13px;
}

.shop-checkout-step__label {
	font-family: var(--font-heading);
	color: var(--shop-text-heading);
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper {
	display: flex;
	flex-direction: column;
}

.form-row {
	margin: 0 0 16px;
	display: flex;
	flex-direction: column;
}

.form-row label {
	color: var(--shop-text-muted);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	margin-bottom: 6px;
}

.form-row .required {
	color: var(--shop-accent);
	text-decoration: none;
}

.form-row .optional {
	color: var(--shop-text-faint);
	text-transform: none;
	letter-spacing: 0;
}

.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="tel"],
.form-row input[type="password"],
.form-row input[type="number"],
.form-row textarea {
	width: 100%;
	background: var(--shop-surface);
	border: 1px solid var(--shop-border);
	border-radius: var(--shop-radius-sm);
	color: var(--shop-text-heading);
	font-family: var(--font-body);
	font-size: 15px;
	padding: 13px 14px;
}

.form-row textarea {
	min-height: 110px;
	resize: vertical;
}

.form-row input:focus,
.form-row textarea:focus {
	outline: none;
	border-color: var(--shop-accent);
}

.form-row input::placeholder,
.form-row textarea::placeholder {
	color: var(--shop-text-faint);
}

.form-row.woocommerce-invalid input,
.form-row.woocommerce-invalid .select2-selection--single {
	border-color: oklch(0.62 0.19 25);
}

.woocommerce-shipping-fields > h3 label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-heading);
	color: var(--shop-text-heading);
	font-size: 17px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	cursor: pointer;
	margin: 0;
}

input[type="checkbox"],
input[type="radio"] {
	accent-color: var(--accent);
	width: 17px;
	height: 17px;
	margin: 0 8px 0 0;
	cursor: pointer;
}

/* Checkbox labels sit inside .form-row, so they have to out-specify
   .form-row label's uppercase treatment. */
.form-row label.woocommerce-form__label-for-checkbox,
label.woocommerce-form__label-for-checkbox {
	display: inline-flex;
	align-items: center;
	color: var(--shop-text-body);
	font-size: 14px;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
	cursor: pointer;
	margin-bottom: 0;
}

/* Terms checkbox: as a flex row, its multi-line text span stretched to
   fill the width and pushed the required "*" all the way to the right
   edge. Plain inline flow keeps the "*" right after the text. */
.woocommerce-terms-and-conditions-wrapper label.woocommerce-form__label-for-checkbox {
	display: block;
	line-height: 1.5;
}

.woocommerce-terms-and-conditions-wrapper label.woocommerce-form__label-for-checkbox input {
	vertical-align: -3px;
}

/* "Déjà client?" / coupon toggles above the checkout form */
.woocommerce-form-login,
.woocommerce-form-coupon {
	background: var(--shop-surface-alt);
	border: 1px solid var(--shop-border);
	border-radius: var(--shop-radius-md);
	padding: 24px;
	margin-bottom: 24px;
}

.woocommerce-form-login .button,
.woocommerce-form-coupon .button {
	background: var(--shop-accent);
	color: var(--shop-text-on-accent);
	font-family: var(--font-body);
	font-weight: 800;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	padding: 13px 26px;
	border: none;
	border-radius: var(--shop-radius-sm);
	cursor: pointer;
}

.woocommerce-form-login .button:hover,
.woocommerce-form-coupon .button:hover {
	background: var(--shop-accent-hover);
}

.woocommerce-form-login .woocommerce-form-login__rememberme {
	display: block;
	margin-bottom: 14px;
}

.woocommerce-LostPassword a {
	color: var(--shop-accent);
	font-size: 14px;
}

/* Sticky order summary — top offset matches the filters sidebar's own
   pattern (Section 3): --shop-header-h is the real, measured height of
   the sticky site-header + tab-bar (shop.js → initStickyOffsets()), which
   on checkout's distraction-free header is shorter than elsewhere, so
   this tracks it automatically instead of a guessed fixed value. Reset
   to position:static below 900px (Section 9) alongside the single-column
   layout. */
#order_review {
	background: var(--shop-surface);
	border: 1px solid var(--shop-border);
	border-radius: var(--shop-radius-md);
	padding: 28px;
	position: sticky;
	top: calc(var(--shop-header-h, 100px) + 16px);
}

#order_review table.shop_table th,
#order_review table.shop_table td {
	padding: 12px 0;
}

#order_review td {
	text-align: right;
}

/* Beats #order_review td (ID specificity) so the line item stays left. */
#order_review td.product-name,
#order_review th {
	color: var(--shop-text-body);
	text-align: left;
}

#order_review .product-quantity {
	color: var(--shop-text-faint);
}

#order_review .order-total th,
#order_review .order-total td {
	color: var(--shop-text-heading);
	font-size: 18px;
	border-bottom: none;
}

#order_review .order-total .amount {
	font-family: var(--font-heading);
}

/* Radio-card shipping/payment selection. Shares one visual language
   across both lists — checkout's real shipping-method choice (rendered
   inside #order_review, unlike the cart page's simpler .cart_totals
   version, which is left alone) and the payment gateway list — so
   picking either reads as the same kind of decision. :has() gives the
   selected card a real border/fill; browsers without :has() just keep
   every card in its neutral resting state, still fully usable since the
   native radio input itself is never hidden. */
.shop--checkout .woocommerce-shipping-methods,
#payment ul.payment_methods {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.shop--checkout .woocommerce-shipping-methods li,
#payment ul.payment_methods li {
	background: var(--shop-surface);
	border: 1px solid var(--shop-border);
	border-radius: var(--shop-radius-md);
	padding: 14px 16px;
	transition: border-color 150ms ease, background-color 150ms ease;
}

.shop--checkout .woocommerce-shipping-methods li:has(input:checked),
#payment ul.payment_methods li:has(input:checked) {
	border-color: var(--shop-accent);
	background: var(--shop-accent-50);
}

.shop--checkout .woocommerce-shipping-methods li label,
#payment ul.payment_methods li label {
	display: flex;
	align-items: center;
	color: var(--shop-text-heading);
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
	gap: 10px;
	text-align: left;
}

.shop--checkout .woocommerce-shipping-methods li label input,
#payment ul.payment_methods li label input {
	order: -1;
	flex: none;
	margin: 0;
}

.shop--checkout .woocommerce-shipping-methods li label .amount {
	margin-left: auto;
	white-space: nowrap;
}

/* Shipping row: stack the heading above the cards so the (up to 5)
   options get the full column width instead of a squeezed right cell. */
#order_review tr.woocommerce-shipping-totals th,
#order_review tr.woocommerce-shipping-totals td {
	display: block;
	width: 100%;
	text-align: left;
	border-bottom: none;
}

#order_review tr.woocommerce-shipping-totals th {
	padding-bottom: 4px;
}

#order_review tr.woocommerce-shipping-totals td {
	padding-top: 0;
}

/* Match the th underline to the td's so rows don't show a half-width line. */
#order_review table.shop_table th {
	border-bottom: 1px solid var(--shop-divider);
}

#order_review table.shop_table .order-total th,
#order_review table.shop_table tr.woocommerce-shipping-totals th {
	border-bottom: none;
}

#payment {
	margin-top: 24px;
}

#payment .payment_box {
	margin-top: 12px;
	padding: 14px;
	background: var(--shop-surface-alt);
	border-radius: var(--shop-radius-sm);
	color: var(--shop-text-muted);
	font-size: 14px;
	line-height: 1.6;
}

#payment .payment_box p:last-child {
	margin-bottom: 0;
}

.woocommerce-terms-and-conditions-wrapper {
	margin-bottom: 20px;
	color: var(--shop-text-muted);
	font-size: 14px;
	line-height: 1.6;
}

.woocommerce-terms-and-conditions-wrapper a {
	color: var(--shop-accent);
	text-decoration: underline;
}

.woocommerce-privacy-policy-text p {
	margin-bottom: 14px;
}

#place_order {
	width: 100%;
	background: var(--shop-accent);
	color: var(--shop-text-on-accent);
	font-family: var(--font-body);
	font-weight: 800;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	padding: 18px;
	border: none;
	border-radius: var(--shop-radius-sm);
	cursor: pointer;
}

#place_order:hover {
	background: var(--shop-accent-hover);
}

.shop--checkout .shop-trust--compact {
	justify-content: center;
	margin-bottom: 28px;
	padding-top: 0;
}

/* Thank-you */
.shop-thankyou-next {
	display: flex;
	gap: 18px;
	background: var(--shop-surface);
	border: 1px solid var(--shop-accent);
	border-radius: var(--shop-radius-md);
	padding: 26px;
	margin-bottom: 36px;
}

.shop-thankyou-next__icon {
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--shop-accent-100);
	color: var(--shop-accent-700);
	display: flex;
	align-items: center;
	justify-content: center;
}

.shop-thankyou-next__icon .shop-icon {
	width: 24px;
	height: 24px;
}

.shop-thankyou-next h3 {
	font-size: 17px;
	margin: 0 0 8px;
	color: var(--shop-text-heading);
}

.shop-thankyou-next p {
	color: var(--shop-text-muted);
	font-size: 15px;
	margin-bottom: 16px;
}

.woocommerce-thankyou-order-received {
	font-size: 17px;
	color: var(--shop-text-heading);
	margin-bottom: 24px;
}

ul.woocommerce-thankyou-order-details,
ul.woocommerce-order-overview {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 16px;
	margin: 0 0 40px;
	padding: 0;
}

ul.woocommerce-order-overview li {
	background: var(--shop-surface);
	border: 1px solid var(--shop-border);
	border-radius: var(--shop-radius-md);
	padding: 16px;
	color: var(--shop-text-faint);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

ul.woocommerce-order-overview li strong {
	display: block;
	margin-top: 6px;
	color: var(--shop-text-heading);
	font-size: 16px;
	text-transform: none;
	letter-spacing: 0;
}

.woocommerce-order-details,
.woocommerce-customer-details {
	margin-bottom: 40px;
}

.woocommerce-order-details__title,
.woocommerce-column__title {
	font-size: 20px;
	margin: 0 0 20px;
	color: var(--shop-text-heading);
}

.woocommerce-customer-details address {
	font-style: normal;
	background: var(--shop-surface);
	border: 1px solid var(--shop-border);
	border-radius: var(--shop-radius-md);
	padding: 20px;
	color: var(--shop-text-body);
	line-height: 1.7;
}

/* Product thumbnail (inc/shop.php → revive_shop_line_item_thumbnail_html(),
   prepended to the line-item name wherever WooCommerce's own template has
   no thumbnail column of its own: checkout's order review, the thank-you
   page, and shop-view My Account's order history). */
/* inline-flex, not flex: the quantity badge ("× 1") and item-meta list
   (e.g. "Saveur: ...") print as separate text/markup right after this,
   on the same line in the original markup — a block-level flex container
   here would force them onto their own new line instead. */
.shop-line-item {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	vertical-align: middle;
}

.shop-line-item__thumb {
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: var(--shop-radius-sm);
	overflow: hidden;
	background: var(--shop-surface-alt);
}

.shop-line-item__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.shop-line-item__name {
	min-width: 0;
}

/* ==========================================================================
   8. Sticky mobile bar
   ========================================================================== */

.shop-sticky {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 60;
	display: none;
	align-items: center;
	gap: 12px;
	padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
	background: oklch(0.1 0.01 45 / 0.97);
	backdrop-filter: blur(8px);
	border-top: 1px solid var(--border);
	transform: translateY(100%);
	transition: transform 0.2s ease;
}

.shop-sticky.is-visible {
	transform: translateY(0);
}

/* min-width: 0 + normal wrapping: as a flex item the button otherwise
   can't shrink below its one-line text width, which pushed the bar
   (e.g. the product page's "CHOISIR MES OPTIONS" next to the price)
   past the right edge of a phone screen. */
.shop-sticky__btn {
	flex: 1;
	min-width: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	font-size: 14px;
	padding: 12px 14px;
	white-space: normal;
	text-align: center;
	line-height: 1.2;
}

.shop-sticky__btn .shop-icon {
	width: 18px;
	height: 18px;
}

.shop-sticky__cart {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: none;
	color: var(--text-body-strong);
	font-size: 14px;
	font-weight: 700;
	padding: 12px 4px;
}

.shop-sticky__price {
	display: flex;
	flex-direction: column;
	flex: none;
	line-height: 1.2;
}

.shop-sticky__amount {
	font-family: var(--font-heading);
	color: var(--text-heading);
	font-size: 18px;
}

.shop-sticky__amount del {
	display: none;
}

.shop-sticky__portion {
	color: var(--text-faint);
	font-size: 12px;
}

/* ==========================================================================
   9. Responsive
   ========================================================================== */

@media (max-width: 1024px) {
	.shop--product div.product {
		gap: 36px;
	}

	form.checkout {
		gap: 32px;
	}
}

@media (max-width: 900px) {
	.shop--product div.product {
		grid-template-columns: minmax(0, 1fr);
	}

	.shop--product .woocommerce-product-gallery,
	.shop--product .summary {
		grid-column: 1;
	}

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

	.shop-checkout-col--left,
	.shop-checkout-col--right {
		grid-column: 1;
	}

	#order_review {
		position: static;
	}

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

	.cart-collaterals {
		grid-column: 1;
	}

	/* Filters sidebar becomes a bottom sheet, triggered by
	   .shop-catalog__filters-trigger (assets/js/shop.js →
	   initFiltersToggle(), same open/close pattern as the mini-cart
	   drawer — see .shop-mini-cart above). */
	.shop-catalog__layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.shop-catalog__filters-trigger {
		display: inline-flex;
	}

	.shop-filters__backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 90;
		background: var(--shop-overlay);
	}

	.shop-filters__backdrop[hidden] {
		display: none;
	}

	/* Undo the desktop override above: back to genuinely hidden until
	   assets/js/shop.js's initFiltersToggle() clears the attribute. */
	.shop-filters[hidden] {
		display: none;
	}

	.shop-filters {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: auto;
		z-index: 91;
		max-height: 78%;
		overflow-y: auto;
		padding: 14px var(--shop-gutter) calc(14px + env(safe-area-inset-bottom));
		background: var(--shop-bg);
		border-top: 2px solid var(--shop-accent);
		box-shadow: var(--shop-shadow-lg);
	}

	.shop-filters__apply {
		display: block;
		width: 100%;
		margin-top: 16px;
		padding: 14px;
		background: var(--shop-accent);
		color: var(--shop-text-on-accent);
		border: 0;
		font-family: var(--font-heading);
		font-weight: 800;
		font-size: 14.5px;
		cursor: pointer;
	}
}

@media (max-width: 768px) {
	:root {
		--shop-gutter: 20px;
	}

	/* The sticky bar is a mobile affordance only. */
	.shop-sticky {
		display: flex;
	}

	/* Keep the last section clear of the bar. */
	.boutique-context .site-footer {
		padding-bottom: 96px;
	}

	.site-header__utility,
	.site-header__checkout {
		gap: 14px;
		padding: 14px var(--shop-gutter);
	}

	/* Phones: the category menu is hidden behind the header's "Menu"
	   button (initShopNavToggle() in shop.js) and opens as a vertical
	   list. Each family ("Supplément"…) expands its sub-categories in
	   place, accordion-style, instead of a floating panel. */
	/* Icon-only, left of the logo: logo + cart + a labelled "Menu" button
	   needed ~385px of a 350px row. The label stays in the markup for
	   screen readers, just visually hidden. */
	.shop-nav-utility__menu {
		display: inline-flex;
		order: -1;
		justify-content: center;
		width: 40px;
		height: 40px;
		padding: 0;
	}

	.shop-nav-utility__menu-label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.shop-megamenu {
		display: none;
	}

	.site-header--shop.is-nav-open .shop-megamenu {
		display: block;
		max-height: calc(100vh - var(--shop-header-h, 200px));
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.shop-megamenu__families {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 0 var(--shop-gutter) 12px;
		overflow: visible;
	}

	.shop-megamenu__families > li {
		border-top: 1px solid var(--shop-divider);
	}

	.shop-megamenu__families > li:first-child {
		border-top: 0;
	}

	.shop-megamenu__mobile-only {
		display: block;
	}

	.shop-megamenu__all,
	.shop-megamenu__trigger {
		width: 100%;
		min-height: 52px;
		justify-content: space-between;
		padding: 12px 0;
		font-size: 14px;
		text-align: left;
	}

	.shop-megamenu__trigger::after {
		content: "";
		width: 8px;
		height: 8px;
		margin-right: 4px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
		transition: transform 0.15s ease;
	}

	.shop-megamenu__family.is-open > .shop-megamenu__trigger::after {
		transform: rotate(-135deg);
	}

	.shop-megamenu__panel {
		position: static;
		width: auto;
		max-width: none;
		margin-bottom: 12px;
		border: 0;
		border-left: 2px solid var(--shop-accent);
		box-shadow: none;
		background: var(--shop-surface-alt);
	}

	.shop-megamenu__panel-inner {
		flex-direction: column;
	}

	.shop-megamenu__col {
		min-width: 0;
		padding: 14px 16px;
	}

	.shop-megamenu__link {
		min-height: 40px;
		align-items: center;
	}

	.shop-megamenu__col {
		border-left: 0;
		border-top: 1px solid var(--shop-divider);
	}

	.shop-megamenu__col:first-child {
		border-top: 0;
	}

	/* Logo + cart on the first row, search on its own full-width row.
	   .shop-nav-utility is flex: none on desktop (it must never shrink
	   next to the logo there), which on a phone left search + cart
	   ~170px past the right edge — the cart button was off-screen and the
	   whole page scrolled sideways. display: contents lifts search and
	   cart into the utility row itself so they can wrap independently of
	   each other. */
	.site-header__utility {
		flex-wrap: wrap;
		justify-content: flex-start;
		row-gap: 10px;
		column-gap: 8px;
	}

	.shop-nav-utility {
		display: contents;
	}

	/* Hamburger, logo, cart on one row. The logo takes whatever space is
	   left (flex-basis 0, so it can never be what pushes the row into
	   wrapping), capped at 220px. A fixed logo width left the cart with
	   0px to spare at 430px wide (iPhone Plus/Pro Max), and Safari draws
	   text a hair wider than Chrome, so the cart dropped to its own row. */
	.site-header--shop .site-header__utility > .site-header__logo {
		flex: 1 1 0;
		min-width: 0;
	}

	.site-header--shop .site-header__logo .site-logo__img {
		width: 100%;
		max-width: 220px;
	}

	.shop-nav-utility__cart,
	.shop-nav-utility__menu {
		flex: none;
	}

	.shop-nav-utility__search {
		order: 3;
		flex: 1 1 100%;
		max-width: none;
	}

	/* 16px minimum: iOS Safari zooms the whole page into any field smaller
	   than that when it's tapped. */
	.shop-nav-utility__search input[type="search"] {
		font-size: 16px;
	}

	.shop-nav-utility__account {
		display: none;
	}

	.shop-nav-utility__cart-label {
		display: none;
	}

	.shop-hero {
		padding-top: 48px;
	}

	.shop-hero__title {
		font-size: 30px;
	}

	.shop-hero__subtitle {
		font-size: 16px;
	}

	.shop-hero__cta {
		width: 100%;
		justify-content: center;
	}

	.shop-trust {
		gap: 12px 24px;
		justify-content: flex-start;
	}

	.shop-grid {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	}

	.shop-goals__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.shop-card__body {
		padding: 14px 14px 0;
	}

	.shop-card__actions {
		padding: 12px 14px 14px;
	}

	.shop-card__title {
		font-size: 15px;
	}

	.shop-card__price {
		font-size: 17px;
	}

	.shop-card__tag {
		font-size: 11px;
		letter-spacing: 0.06em;
	}

	/* "AJOUTER AU PANIER" wraps to two lines in a ~150px phone column
	   while "CHOISIR" doesn't — a fixed height (enough for two lines)
	   keeps every button in a row the same size and lined up. */
	.shop-card__btn {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 48px;
		padding: 4px 8px;
		font-size: 12.5px;
		line-height: 1.15;
		letter-spacing: 0.2px;
		white-space: normal;
		text-align: center;
	}

	/* 16px minimum on every field: iOS Safari zooms the whole page into
	   any input smaller than that when it's tapped. */
	.shop select,
	.shop .select2-selection--single,
	.form-row input[type="text"],
	.form-row input[type="email"],
	.form-row input[type="tel"],
	.form-row input[type="password"],
	.form-row input[type="number"],
	.form-row textarea,
	#review_form input,
	#review_form textarea,
	.quantity .qty,
	.woocommerce-form-coupon input,
	.shop--cart .coupon input {
		font-size: 16px;
	}

	.shop-section__head h2,
	.shop-why h2,
	.shop-faq h2,
	.shop-closing h2 {
		font-size: 24px;
	}

	.shop--product .summary .product_title {
		font-size: 26px;
	}

	.shop--product .single_add_to_cart_button {
		flex: 1 1 100%;
	}

	.woocommerce-ordering {
		justify-content: stretch;
	}

	.woocommerce-ordering select {
		width: 100%;
	}

	.shop-page-title {
		font-size: 26px;
		margin-top: 32px;
	}

	/* Stacked cart/order tables — each cell labelled by its column. */
	table.shop_table_responsive thead {
		display: none;
	}

	table.shop_table_responsive tr {
		display: block;
		border-bottom: 1px solid var(--border);
		padding: 14px 0;
	}

	table.shop_table_responsive td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		padding: 6px 0;
		border: none;
		text-align: right;
	}

	table.shop_table_responsive td::before {
		content: attr(data-title) ": ";
		color: var(--text-faint);
		font-size: 13px;
		text-transform: uppercase;
		letter-spacing: 0.4px;
		flex: none;
	}

	table.shop_table_responsive td.product-remove::before,
	table.shop_table_responsive td.product-thumbnail::before,
	table.shop_table_responsive td.actions::before {
		content: "";
	}

	table.shop_table_responsive td.product-thumbnail {
		justify-content: flex-start;
	}

	/* Cart line on a phone: thumbnail on the left spanning the item's
	   rows, remove (×) pinned top-right — instead of each sitting alone
	   on its own row above the details. */
	table.cart.shop_table_responsive tr.cart_item {
		display: grid;
		grid-template-columns: 72px minmax(0, 1fr);
		column-gap: 14px;
		position: relative;
	}

	table.cart.shop_table_responsive tr.cart_item td {
		grid-column: 2;
	}

	table.cart.shop_table_responsive tr.cart_item td.product-thumbnail {
		grid-column: 1;
		grid-row: 1 / span 4;
		align-items: flex-start;
		width: auto;
	}

	table.cart.shop_table_responsive tr.cart_item td.product-remove {
		position: absolute;
		top: 10px;
		right: 0;
		width: auto;
		padding: 0;
	}

	table.cart.shop_table_responsive tr.cart_item td.product-name {
		padding-right: 40px;
	}

	/* The totals table keeps its own <th> labels visible, and the stacked
	   <td>s add their data-title label too — every row read "SOUS-TOTAL"
	   twice. Keep only the td's own label. */
	.cart_totals table.shop_table_responsive th {
		display: none;
	}

	/* Checkout shipping row: cards stack full width under the heading. */
	#order_review tr.woocommerce-shipping-totals th {
		display: block;
	}

	#order_review tr.woocommerce-shipping-totals td {
		display: block;
	}

	#order_review tr.woocommerce-shipping-totals td::before {
		content: none;
	}

	#order_review .woocommerce-shipping-methods li {
		padding: 12px 14px;
	}

	#order_review .woocommerce-shipping-methods li label {
		min-height: 24px;
	}

	.cart .actions {
		text-align: stretch;
	}

	.cart .actions .coupon {
		float: none;
		flex-direction: column;
		margin-bottom: 10px;
	}

	.cart .actions .button,
	.cart .actions .coupon input {
		width: 100%;
	}

	.shop-reviews__grid,
	.shop-why__grid {
		gap: 16px;
	}

	.shop-thankyou-next {
		flex-direction: column;
		gap: 14px;
	}
}

@media (max-width: 480px) {
	.shop-grid {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	}

	.shop-hero__title {
		font-size: 26px;
	}

	.shop-closing__actions .btn {
		width: 100%;
	}
}

/* ==========================================================================
   10. Rounded look (client request)
   Kept last so it wins over the square defaults above on equal
   specificity. The product and goal grids switch from one shared
   hairline per cell (a table look that can't have rounded corners) to
   separate cards with a gap.
   ========================================================================== */

.shop-grid,
.shop-goals__list {
	gap: 16px;
	border: 0;
}

.shop-card,
.shop-goals__tile {
	border: 1px solid var(--shop-border);
	border-radius: var(--shop-radius-md);
}

/* Clips the product photo to the card's top corners. */
.shop-card {
	overflow: hidden;
}

.shop-badge {
	top: 10px;
	left: 10px;
	border-radius: 6px;
}

.shop-card__btn,
.shop-card .added_to_cart,
body.boutique-context .btn,
body.boutique-context .button,
.shop--product .single_add_to_cart_button,
.wc-proceed-to-checkout .checkout-button,
.shop-filters__apply,
.shop-sticky__btn,
.shop-catalog__filters-trigger {
	border-radius: var(--shop-radius-sm);
}

.shop--product .woocommerce-product-gallery {
	border-radius: var(--shop-radius-md);
	overflow: hidden;
}

@media (max-width: 768px) {
	.shop-grid,
	.shop-goals__list {
		gap: 10px;
	}
}

/* Free-shipping bar (template-parts/shop/shipping-bar.php) — first row of
   .site-sticky-chrome, so it stays at the top of the screen. */
.shop-shipbar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 9px var(--shop-gutter);
	background: var(--shop-accent-100);
	border-bottom: 1px solid var(--shop-accent-200);
	color: var(--shop-accent-900);
	font-size: 13.5px;
	text-align: center;
}

.shop-shipbar .shop-icon {
	flex: none;
	width: 18px;
	height: 18px;
	color: var(--shop-accent-700);
}

.shop-shipbar strong {
	font-weight: 800;
}

/* Checkout address autocomplete (assets/js/checkout-places.js). */
.shop--checkout .shop-places {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 30;
	margin: 4px 0 0;
	padding: 4px;
	list-style: none;
	background: var(--shop-surface);
	border: 1px solid var(--shop-border-strong);
	border-radius: var(--shop-radius-sm);
	box-shadow: var(--shop-shadow-md);
}

.shop--checkout .shop-places[hidden] {
	display: none;
}

.shop--checkout .shop-places li {
	margin: 0;
	padding: 10px 12px;
	border-radius: 6px;
	color: var(--shop-text-body);
	font-size: 14.5px;
	line-height: 1.35;
	cursor: pointer;
}

.shop--checkout .shop-places li:hover,
.shop--checkout .shop-places li.is-active {
	background: var(--shop-accent-100);
	color: var(--shop-text-heading);
}

.shop--checkout .shop-places .shop-places__attr {
	padding: 6px 12px 4px;
	color: var(--shop-text-faint);
	font-size: 11px;
	text-align: right;
	cursor: default;
}

.shop--checkout .shop-places .shop-places__attr:hover {
	background: none;
}

/* Shop Contact page (page-contact-boutique.php): light versions of the
   gym styles in forms.css. Headings need their own color — base.css sets
   it directly on them, so they don't inherit it. */
.shop--contact .contact-hero h1,
.shop--contact .contact-details h3 {
	color: var(--shop-text-heading);
}

.shop--contact .contact-hero p {
	color: var(--shop-text-muted);
}

.shop--contact .contact-details__label {
	color: var(--shop-accent-700);
}

.shop--contact .contact-details__value {
	color: var(--shop-text-body);
}

.shop--contact .contact-details__value a:hover {
	color: var(--shop-accent-700);
}

/* forms.css inverts the map to look dark on the gym pages. */
.shop--contact .contact-map {
	border-color: var(--shop-border);
	border-radius: var(--shop-radius-md);
	filter: none;
}

.shop--contact .contact-form-panel {
	background: var(--shop-surface-alt);
	border-color: var(--shop-border);
	border-radius: var(--shop-radius-md);
}

.shop--contact .contact-form__field label {
	color: var(--shop-text-body);
}

/* !important to beat the dark input rules in forms.css, which use it too. */
.shop--contact .contact-form-panel input[type="text"],
.shop--contact .contact-form-panel input[type="email"],
.shop--contact .contact-form-panel input[type="tel"],
.shop--contact .contact-form-panel textarea {
	background: var(--shop-bg) !important;
	border-color: var(--shop-border-strong) !important;
	color: var(--shop-text-heading) !important;
}

.shop--contact .contact-form-panel button[type="submit"] {
	color: var(--shop-text-on-accent) !important;
}

.shop--contact .contact-form__message {
	border-color: var(--shop-accent);
	color: var(--shop-text-body);
}

.shop--contact .contact-form__message--error {
	border-color: #d32f2f;
}

/* Promotions tab (?promotions=1) with nothing on sale. */
.shop-promo-empty {
	padding: 56px 24px;
	border: 1px solid var(--shop-border);
	border-radius: 14px;
	text-align: center;
}

.shop-promo-empty p {
	margin: 0 0 18px;
	color: var(--shop-text-body);
	font-size: 16px;
}