/*
 * Front-end polish v1 (round 3c, Lane FE; D-466, D-475; FE-POLISH-V1-PORT.md). Loaded only while the option
 * eupepsia_fe_polish_v1 is `yes` (inc/enqueue-fe-polish-v1.php), after every other theme sheet.
 *
 * NO COLOUR VALUES in this file: sizes, spacing, radius and layout only, so the palette v7 generator (D-456) needs no
 * entry for it. Everything is scoped to body.eup-fe1.
 */

body.eup-fe1 {
	--eup-fe1-gutter: var(--eup3-gutter, 17px);
	--eup-fe1-radius: var(--eup3-radius-field, 10px);
	--eup-fe1-btn-h: 52px;
	--eup-fe1-btn-fs: 16px;
}

/* ---------------------------------------------------------------------------------------------------------------
 * PH-1 Cookie banner: a compact bar on phones, and under the bag drawer and the menu drawer at every width.
 * Bar: row 1 = the message on one line + a 44 px close; row 2 = Decline and Accept side by side, Manage as a link.
 * "Manage" opens Complianz's preferences in place (categories get .cmplz-fade-in): the bar then grows back to the
 * full sheet (title, whole message, choices, Save, and the "Do Not Sell or Share" control, which also stays in the
 * footer's fine print). The message stays whole in the DOM (aria-describedby); only its drawing is clamped.
 * ------------------------------------------------------------------------------------------------------------ */
html.eup-drawer-open body.eup-fe1 #cmplz-cookiebanner-container .cmplz-cookiebanner,
html.eup-drawer-lock body.eup-fe1 #cmplz-cookiebanner-container .cmplz-cookiebanner,
html.eup-hd-locked body.eup-fe1 #cmplz-cookiebanner-container .cmplz-cookiebanner {
	z-index: 80;
}

@media (max-width: 767px) {
	body.eup-fe1 #cmplz-cookiebanner-container .cmplz-cookiebanner {
		align-items: center;
		column-gap: 8px;
		grid-template-columns: minmax(0, 1fr) 44px;
		grid-template-rows: auto;
		padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px)) 16px;
		row-gap: 6px;
	}

	body.eup-fe1 #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header {
		display: contents;
	}

	body.eup-fe1 #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-logo,
	body.eup-fe1 #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-divider,
	body.eup-fe1 #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links.cmplz-information {
		display: none;
	}

	/* The title stays the dialog's accessible name, drawn only in the full sheet. */
	body.eup-fe1 #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header .cmplz-title {
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		display: block;
		height: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}

	body.eup-fe1 #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close {
		align-items: center;
		display: flex;
		grid-column: 2;
		grid-row: 1;
		height: 44px;
		justify-content: center;
		justify-self: end;
		margin: 0;
		width: 44px;
	}

	body.eup-fe1 #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close svg {
		height: 18px;
		width: 18px;
	}

	body.eup-fe1 #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-body {
		grid-column: 1;
		grid-row: 1;
		max-height: none;
		min-width: 0;
	}

	body.eup-fe1 #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message {
		-webkit-box-orient: vertical;
		display: -webkit-box;
		font-size: 13px;
		-webkit-line-clamp: 1;
		line-clamp: 1;
		line-height: 1.35;
		margin: 0;
		overflow: hidden;
	}

	body.eup-fe1 #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons {
		flex-wrap: nowrap;
		gap: 8px;
		grid-column: 1 / -1;
		grid-row: 2;
	}

	body.eup-fe1 #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept,
	body.eup-fe1 #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:not(.eup-consent__dnsmpi) {
		flex: 1 1 0;
		min-height: 44px;
		padding: 0 12px;
	}

	body.eup-fe1 #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences {
		flex: 0 0 auto;
		min-height: 44px;
	}

	body.eup-fe1 #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.eup-consent__dnsmpi {
		display: none;
	}

	/* Preferences open: the full sheet again. */
	body.eup-fe1 #cmplz-cookiebanner-container .cmplz-cookiebanner:has(.cmplz-categories.cmplz-fade-in) {
		max-height: calc(100vh - 20px);
		padding-top: 12px;
	}

	body.eup-fe1 #cmplz-cookiebanner-container .cmplz-cookiebanner:has(.cmplz-categories.cmplz-fade-in) .cmplz-header .cmplz-title {
		clip: auto;
		clip-path: none;
		grid-column: 1;
		grid-row: 1;
		height: auto;
		overflow: visible;
		position: static;
		white-space: normal;
		width: auto;
	}

	body.eup-fe1 #cmplz-cookiebanner-container .cmplz-cookiebanner:has(.cmplz-categories.cmplz-fade-in) .cmplz-body {
		grid-column: 1 / -1;
		grid-row: 2;
		max-height: 44vh;
	}

	body.eup-fe1 #cmplz-cookiebanner-container .cmplz-cookiebanner:has(.cmplz-categories.cmplz-fade-in) .cmplz-message {
		display: block;
		-webkit-line-clamp: none;
		line-clamp: none;
	}

	body.eup-fe1 #cmplz-cookiebanner-container .cmplz-cookiebanner:has(.cmplz-categories.cmplz-fade-in) .cmplz-buttons {
		flex-wrap: wrap;
		grid-row: 3;
	}

	body.eup-fe1 #cmplz-cookiebanner-container .cmplz-cookiebanner:has(.cmplz-categories.cmplz-fade-in) .cmplz-buttons .cmplz-btn.eup-consent__dnsmpi {
		display: flex;
	}
}

/* ---------------------------------------------------------------------------------------------------------------
 * PH-2 Sign-up popup: the close is a 44 x 44 control in the box's top-right corner (24 px glyph); the box, its field
 * and its button take the site's radius; on phones the box sits on the page gutter. The automatic open waits while the
 * cookie banner or a drawer is open (assets/js/signup-popup.js, `polish`).
 * ------------------------------------------------------------------------------------------------------------ */
body.eup-fe1 #signupPopup .popup-box {
	border-radius: var(--eup3-radius-panel, 10px);
	max-height: calc(100dvh - 32px);
	overflow: auto;
}

body.eup-fe1 #signupPopup .close-popup {
	align-items: center;
	display: flex;
	font-size: 28px;
	font-weight: 300;
	height: 44px;
	justify-content: center;
	line-height: 1;
	right: 4px;
	top: 4px;
	width: 44px;
	z-index: 2;
}

body.eup-fe1 #signupPopup .close-popup:focus-visible {
	outline-offset: -4px;
}

body.eup-fe1 #signupPopup :is(input[type="text"], input[type="email"], input[type="submit"], button[type="submit"], .wpcf7-submit) {
	border-radius: var(--eup-fe1-radius);
}

@media (max-width: 768px) {
	body.eup-fe1 #signupPopup .popup-box {
		width: calc(100% - 2 * var(--eup-fe1-gutter));
	}

	body.eup-fe1 #signupPopup .close-popup {
		right: 4px;
	}

	body.eup-fe1 #signupPopup .popup-content {
		padding-right: 52px;
	}
}

/* ---------------------------------------------------------------------------------------------------------------
 * PH-3 Lost-password and reset-password forms sized like the sign-in form (account v2): one 520 px column, 15 px
 * labels, 52 px fields at 17 px (no iOS zoom), a full-width 52 px button at 18 px, the field radius.
 * ------------------------------------------------------------------------------------------------------------ */
body.eup-fe1.woocommerce-lost-password form.lost_reset_password {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 0 auto;
	max-width: 520px;
	width: 100%;
}

body.eup-fe1.woocommerce-lost-password form.lost_reset_password > p {
	margin: 0;
}

body.eup-fe1.woocommerce-lost-password form.lost_reset_password .form-row {
	float: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

body.eup-fe1.woocommerce-lost-password form.lost_reset_password label {
	display: block;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.3;
	margin: 0 0 8px;
	text-transform: none;
}

body.eup-fe1.woocommerce-lost-password form.lost_reset_password input.input-text {
	border-radius: var(--eup-fe1-radius);
	box-shadow: none;
	font-size: 17px;
	height: 52px;
	margin: 0;
	max-width: 100%;
	padding: 0 16px;
	width: 100%;
}

body.eup-fe1.woocommerce-lost-password form.lost_reset_password button[type="submit"] {
	align-items: center;
	border-radius: var(--eup-fe1-radius);
	display: flex;
	font-size: 18px;
	font-weight: 400;
	height: var(--eup-fe1-btn-h);
	justify-content: center;
	letter-spacing: 0;
	margin: 0;
	max-width: none;
	padding: 0 24px;
	text-transform: none;
	width: 100%;
}

body.eup-fe1.woocommerce-lost-password form.lost_reset_password .clear {
	display: none;
}

/* ---------------------------------------------------------------------------------------------------------------
 * PH-4 Checkout on phones: no card inside a card. The wrapper loses its 16 px and the panels their side padding and
 * side borders, so the fields sit on the page gutter (17 px at 390, was 50 px); the summary keeps its own card.
 * The panel head stacks ("Have an account? Sign in" under the title, left-aligned).
 * ------------------------------------------------------------------------------------------------------------ */
@media (max-width: 480px) {
	body.eup-fe1.eup-co4 .custom-checkout-wrapper {
		padding-left: 0;
		padding-right: 0;
	}

	body.eup-fe1.eup-co4 .eup-co4-panel {
		border-left-width: 0;
		border-radius: 0;
		border-right-width: 0;
		padding-left: 0;
		padding-right: 0;
	}

	body.eup-fe1.eup-co4 .eup-co4-head {
		align-items: flex-start;
		flex-direction: column;
	}
}

/* ---------------------------------------------------------------------------------------------------------------
 * PH-5 Cart (block): quantity buttons and the remove button 44 x 44, quantity text 16 px, the bin centred. The
 * cross-sells' image box keeps its square while the lazy image arrives (no empty-looking jump).
 * ------------------------------------------------------------------------------------------------------------ */
body.eup-fe1 .wc-block-cart .wc-block-components-quantity-selector {
	min-height: 44px;
}

body.eup-fe1 .wc-block-cart .wc-block-components-quantity-selector > .wc-block-components-quantity-selector__button {
	font-size: 16px;
	min-height: 44px;
	min-width: 44px;
}

body.eup-fe1 .wc-block-cart .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
	font-size: 16px;
	min-height: 44px;
}

body.eup-fe1 .wc-block-cart .wc-block-cart-item__remove-link {
	align-items: center;
	background-position: center;
	display: inline-flex;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
	padding: 0;
}

body.eup-fe1 .wc-block-cart .wc-block-cart-item__remove-link svg {
	display: block;
	margin: 0;
}

body.eup-fe1 .wp-block-woocommerce-product-collection .wc-block-components-product-image {
	aspect-ratio: 1 / 1;
}

body.eup-fe1 .wp-block-woocommerce-product-collection .wc-block-components-product-image img {
	height: 100%;
	object-fit: contain;
	width: 100%;
}

/* ---------------------------------------------------------------------------------------------------------------
 * PH-7 Product accordions on the page gutter on phones: the trigger loses its -12 px bleed (it ran to 5 px from the
 * screen edge), so its title and "+" line up with the title, price and text.
 * ------------------------------------------------------------------------------------------------------------ */
@media (max-width: 767.98px) {
	body.eup-fe1.eup-pf1 .eup-product-v3 button.eup-acc__trigger,
	body.eup-fe1.eup-pf1 .eup-product-v3 .eup-acc__head {
		margin-left: 0;
		margin-right: 0;
		padding-left: 0;
		padding-right: 0;
		width: 100%;
	}
}

/* ---------------------------------------------------------------------------------------------------------------
 * PH-8 One phone gutter: the shop, category, search and legal templates use the design system's gutter
 * (--eup3-gutter, 17 px at 390) like the product, account, contact and 404 pages, instead of their own 20 px.
 * (The checkout's 50 px is PH-4.)
 * ------------------------------------------------------------------------------------------------------------ */
@media (max-width: 767px) {
	body.eup-fe1 .eup-shop,
	body.eup-fe1 .eup-legal {
		--eup-gutter: var(--eup-fe1-gutter);
	}
}

/* ---------------------------------------------------------------------------------------------------------------
 * PH-10 Product cards (shop, category, search, related, the cart's cross-sells): names at most three lines, then an
 * ellipsis, and balanced so no name ends on a one-word line. Home track cards (.eup-ds4-card) keep their fixed
 * two-line box.
 * ------------------------------------------------------------------------------------------------------------ */
body.eup-fe1 .eup-card .eup-card__name,
body.eup-fe1 .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-post-title {
	-webkit-box-orient: vertical;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	text-wrap: balance;
}

body.eup-fe1 .eup-card .eup-card__name a,
body.eup-fe1 .wp-block-woocommerce-product-collection li.wc-block-product .wp-block-post-title a {
	text-wrap: balance;
}

/* ---------------------------------------------------------------------------------------------------------------
 * PH-9 Timeless pieces held as "Coming soon" (no photograph yet, or the sales gate closed): a clear state, not a
 * blank gap. On the product page the buy area shows the label as a full-width 52 px outlined pill, and the gallery's
 * grey placeholder icon gives way to the same words; on shop cards the label is a 44 px outlined pill. The collection
 * page draws its own cards (timeless-v1.css) and is not touched. The words are eupepsia_timeless_soon_label().
 * ------------------------------------------------------------------------------------------------------------ */
body.eup-fe1 .eup-product-v3 .eup-timeless-soon--single,
body.eup-fe1 .eup-timeless-soon--loop {
	align-items: center;
	border: 1px solid currentColor;
	border-radius: var(--eup3-radius-pill, 999px);
	display: flex;
	font-size: var(--eup-fe1-btn-fs);
	font-weight: 500;
	justify-content: center;
	letter-spacing: 0.02em;
	line-height: 1.2;
	margin: 0;
	padding: 0 20px;
	text-align: center;
	width: 100%;
}

body.eup-fe1 .eup-product-v3 .eup-timeless-soon--single {
	min-height: var(--eup-fe1-btn-h);
}

body.eup-fe1 .eup-timeless-soon--loop {
	min-height: 44px;
}

body.eup-fe1.eup-fe1-soon .eup-pv3__media .woocommerce-product-gallery__image--placeholder {
	position: relative;
}

body.eup-fe1.eup-fe1-soon .eup-pv3__media .woocommerce-product-gallery__image--placeholder img {
	visibility: hidden;
}

body.eup-fe1.eup-fe1-soon .eup-pv3__media .woocommerce-product-gallery__image--placeholder::after {
	align-items: center;
	content: "Coming soon";
	display: flex;
	font-size: clamp(18px, 2.2vw + 10px, 30px);
	font-weight: 300;
	inset: 0;
	justify-content: center;
	letter-spacing: 0.08em;
	pointer-events: none;
	position: absolute;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------------------------------------------------
 * PH-12 Empty cart: 24 px between "Your cart is empty." and the tiles (was 10 px). The "Best sellers" tile's missing
 * photograph is filled in PHP (eupepsia_fe_polish_v1_bag_tiles).
 * ------------------------------------------------------------------------------------------------------------ */
body.eup-fe1 .eup-bag-empty--cart .eup-bag-empty__tiles {
	margin-top: 24px;
}

/* ---------------------------------------------------------------------------------------------------------------
 * PH-14 Legal pages: the contents links are 44 px tap targets (were 41 px).
 * ------------------------------------------------------------------------------------------------------------ */
body.eup-fe1 .eup-legal .eup-legal__toc-link {
	align-items: center;
	display: flex;
	min-height: 44px;
	padding-bottom: 8px;
	padding-top: 8px;
}

/* ---------------------------------------------------------------------------------------------------------------
 * PH-17 / PH-18 One primary button height (52 px, as the sign-in button; checkout's Complete Order was 56 px) and one
 * button text size (16 px) on product-card buttons (the cart's cross-sells printed 13 px, the shop 16 px).
 * ------------------------------------------------------------------------------------------------------------ */
body.eup-fe1.eup-co4 .place-order-section #place_order {
	min-height: var(--eup-fe1-btn-h);
}

body.eup-fe1 .wp-block-woocommerce-product-collection .wc-block-components-product-button__button,
body.eup-fe1 .eup-card .eup-card__actions :is(.button, .add_to_cart_button) {
	font-size: var(--eup-fe1-btn-fs);
}

/* ---------------------------------------------------------------------------------------------------------------
 * PH-19 One add-to-cart layout on phones: the button fills the row beside the quantity at every phone width (it was
 * 328 px full width at 360 but 205 px at 390 and 414); it wraps under the quantity only below 160 px of room.
 * ------------------------------------------------------------------------------------------------------------ */
@media (max-width: 767.98px) {
	body.eup-fe1 .eup-product-v3 .eup-buy__form form.cart:not(.variations_form) .single_add_to_cart_button,
	body.eup-fe1 .eup-product-v3 .eup-buy__form .woocommerce-variation-add-to-cart .single_add_to_cart_button {
		flex: 1 1 160px;
		min-width: 0;
	}
}

/* ---------------------------------------------------------------------------------------------------------------
 * PH-20 404 and search-field pill on the form-field radius, like the site's other fields.
 * ------------------------------------------------------------------------------------------------------------ */
body.eup-fe1.eup-system-v3 .eup-afx-search {
	border-radius: var(--eup-fe1-radius);
}

/* ---------------------------------------------------------------------------------------------------------------
 * PH-3 fix (RV 27 Oct: field still 14 px / 40 px / square). site-legacy.css styles every
 * `.woocommerce .form-row input.input-text` with !important (height 40, font 14, radius 0, padding 8, margin 5px 0),
 * so the lost-password field needs !important to take the sign-in sizes.
 * ------------------------------------------------------------------------------------------------------------ */
body.eup-fe1.woocommerce-lost-password form.lost_reset_password .form-row input.input-text {
	border-radius: var(--eup-fe1-radius) !important;
	font-size: 17px !important;
	height: 52px !important;
	line-height: 1.3 !important;
	margin: 0 !important;
	padding: 0 16px !important;
	width: 100% !important;
}

/* ---------------------------------------------------------------------------------------------------------------
 * PH-4 fix (RV 27 Oct: ZIP box about 5 px lower than State). The same legacy rule gives the ZIP input a 5 px top
 * margin that the State select does not have; the postcode inputs drop it so the pair shares one top edge.
 * ------------------------------------------------------------------------------------------------------------ */
body.eup-fe1.eup-co4 :is(#billing_postcode_field, #shipping_postcode_field) input.input-text {
	margin-top: 0 !important;
}

/* ---------------------------------------------------------------------------------------------------------------
 * PH-9 follow-up: a placeholder chip that wraps keeps its padding and corners on both lines.
 * ------------------------------------------------------------------------------------------------------------ */
body.eup-fe1 .eup-product-v3 .eup-placeholder {
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}


/* ---------------------------------------------------------------------------------------------------------------
 * S-PH (D-571, slot 29a): rest-of-site phone faults from the whole-site phone audit of 29-30 Oct
 * (research/internal/release/2026-10-18/round-3/phone-audit-2026-10-29/REPORT-SITE.md, G4 and G8).
 * No colour values here (sizes, spacing, layout, image URLs only).
 * ------------------------------------------------------------------------------------------------------------ */

/* G4 (site-legacy.css has `.banner .fill { background: ... !important }`, so the picture rules below are !important too): the Features and The Rituals page banners (Flatsome UX Builder content in the database: ux_banner with the
 * classes feat_ban and rituals_banner) used one 1921 px desktop file in a tall phone box (0.94 and 1.74 image px per
 * CSS px against 2.6 needed, and the headline across the face). Under 768 px each gets its own phone crop cut from the
 * same 1921 px original at native pixels (no upscaling): Features 880x640, The Rituals 1100x868. The box takes the
 * crop's own proportions, so the picture is never scaled up by cover (412 px wide: 2.1 and 2.7 image px per CSS px),
 * the subject sits in the right half and the headline in the left 44 to 46 per cent, over trees and haze only.
 * The desktop <img> stays in the markup (hidden here); from 768 px nothing below applies. The files live in
 * wp-content/uploads/2026/10/ (slot 29a uploads step); a missing file leaves the old picture showing through. */
@media (max-width: 767px) {
	body.eup-fe1 #main .banner.feat_ban,
	body.eup-fe1 #main .banner.rituals_banner {
		padding-top: 0;
		height: auto;
		min-height: 0;
	}

	body.eup-fe1 #main .banner.feat_ban {
		aspect-ratio: 880 / 640;
	}

	body.eup-fe1 #main .banner.rituals_banner {
		aspect-ratio: 1100 / 868;
	}

	body.eup-fe1 #main .banner.feat_ban .banner-bg,
	body.eup-fe1 #main .banner.rituals_banner .banner-bg {
		background-position: center !important;
		background-repeat: no-repeat !important;
		background-size: cover !important;
	}

	body.eup-fe1 #main .banner.feat_ban .banner-bg {
		background-image: url("/wp-content/uploads/2026/10/features-phone.jpg") !important;
		background-image: image-set(url("/wp-content/uploads/2026/10/features-phone.webp") type("image/webp"), url("/wp-content/uploads/2026/10/features-phone.jpg") type("image/jpeg")) !important;
	}

	body.eup-fe1 #main .banner.rituals_banner .banner-bg {
		background-image: url("/wp-content/uploads/2026/10/rituals-phone.jpg") !important;
		background-image: image-set(url("/wp-content/uploads/2026/10/rituals-phone.webp") type("image/webp"), url("/wp-content/uploads/2026/10/rituals-phone.jpg") type("image/jpeg")) !important;
	}

	body.eup-fe1 #main .banner.feat_ban .banner-bg img.bg,
	body.eup-fe1 #main .banner.rituals_banner .banner-bg img.bg {
		opacity: 0;
	}

	body.eup-fe1 #main .banner.feat_ban .text-box,
	body.eup-fe1 #main .banner.rituals_banner .text-box {
		width: 46% !important;
	}

	body.eup-fe1 #main .banner.feat_ban .text-box h2 {
		font-size: 22px !important;
		line-height: 1.2;
	}

	body.eup-fe1 #main .banner.rituals_banner .text-box h2 {
		font-size: 19px !important;
		line-height: 1.2;
	}

	body.eup-fe1 #main .banner.rituals_banner .text-box h3 {
		font-size: 14px !important;
		line-height: 1.35;
	}
}

/* G8: tap targets on touch screens (hover:none and pointer:coarse, so a mouse desktop keeps its look). Inline links get
 * vertical padding, which enlarges the hit box without moving any line; the footer's list links become 44 px rows from
 * 768 px (the phone footer already has them); the contents list of the legal pages keeps its PH-14 rule. */
@media (hover: none) and (pointer: coarse) {
	body.eup-fe1 .eup-legal__doc a,
	body.eup-fe1.page-template-default #main .col-inner > p > a,
	body.eup-fe1.page-template-default #main .col-inner > ul > li > a,
	body.eup-fe1 .eup-crumbs__item a,
	body.eup-fe1 nav.breadcrumbs a,
	body.eup-fe1 .woocommerce-breadcrumb a {
		padding-block: 13px;
	}

	body.eup-fe1 #footer.eup-ft6 .eup-ft6__band-link {
		padding-block: 13px;
	}
}

@media (hover: none) and (pointer: coarse) and (min-width: 768px) {
	body.eup-fe1 #footer.eup-ft6 .eup-ft6__link {
		align-items: center;
		display: inline-flex;
		min-height: 44px;
	}
}

/* N1 (slot 29b, 30 Oct 2026): listing pages (shop, categories, search) jumped on a cold first load on phones (CLS 0.61
 * on /shop/, 0.22 and 0.30 on categories, 0.50 on search). The rail is open in the markup and only shop-v2.js
 * (deferred, footer) adds `.eup-shop--js`, which closes the drawer, puts "Filters" beside the sort (shop-sort-v2.css)
 * and caps the shelf tiles; when the browser paints before that script has run, the grid moves up by the rail's height.
 * Fix: where scripting is on, draw that state from the first paint. Every rule below matches only BEFORE the script
 * has run (`.eup-shop:not(.eup-shop--js)`) and copies the rule the script would switch on, with the same flag classes
 * (shop-v2.css drawer, shop-sort-v2.css and palette-v7.css 2318-2320 phone row under body.eup-so2, shop-v2.css shelf
 * cap). The row layout needs a rail in the body (filters.php prints none when there is nothing to filter, and the
 * script then never runs its drawer part). After the script the original rules apply unchanged. A reader without scripting keeps the open rail; a
 * browser without the `scripting` media feature keeps today's behaviour. No colour values (var() only). */
@media (scripting: enabled) and (max-width: 849px) {
	body.eup-fe1 .eup-shop:not(.eup-shop--js) .eup-shop__rail:not([data-eup-filtered]) .eup-shop__rail-body {
		display: none;
	}

	body.eup-fe1 .eup-shop:not(.eup-shop--js) .eup-shop__rail-title {
		clip: rect(1px, 1px, 1px, 1px);
		clip-path: inset(50%);
		height: 1px;
		overflow: hidden;
		position: absolute;
		width: 1px;
	}

	body.eup-fe1 .eup-shop:not(.eup-shop--js) .eup-shop__rail-toggle[hidden] {
		display: block;
	}

	body.eup-fe1.eup-so2 .eup-shop:not(.eup-shop--js) .eup-shop__body:has(> .eup-shop__rail) {
		align-items: start;
		column-gap: 12px;
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
	}

	body.eup-fe1.eup-so2 .eup-shop:not(.eup-shop--js) .eup-shop__body:has(> .eup-shop__rail) > .eup-shop__main {
		display: contents;
	}

	body.eup-fe1.eup-so2 .eup-shop:not(.eup-shop--js) .eup-shop__body:has(> .eup-shop__rail) > .eup-shop__main > * {
		grid-column: 1 / -1;
	}

	body.eup-fe1.eup-so2 .eup-shop:not(.eup-shop--js) .eup-shop__body > .eup-shop__rail {
		background: none;
		border: 0;
		grid-column: 1;
		grid-row: 1;
		margin: 0 0 16px;
		padding: 0;
	}

	body.eup-fe1.eup-so2 .eup-shop:not(.eup-shop--js) .eup-shop__rail .eup-shop__rail-toggle {
		margin: 0;
		min-height: 48px;
		white-space: nowrap;
	}

	body.eup-fe1.eup-so2 .eup-shop:not(.eup-shop--js) .eup-shop__body:has(> .eup-shop__rail) > .eup-shop__main > .eup-shop__toolbar {
		border-bottom: 0;
		grid-column: 2;
		grid-row: 1;
		margin: 0 0 16px;
		padding: 0;
	}

	/* Filters already applied: shop-v2.js opens the drawer at once, so the open drawer is the first-paint state. */
	body.eup-fe1.eup-so2 .eup-shop:not(.eup-shop--js) .eup-shop__body > .eup-shop__rail[data-eup-filtered] {
		grid-column: 1 / -1;
	}

	body.eup-fe1.eup-so2 .eup-shop:not(.eup-shop--js) .eup-shop__body:has(> .eup-shop__rail[data-eup-filtered]) > .eup-shop__main > .eup-shop__toolbar {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	body.eup-fe1.eup-so2 .eup-shop:not(.eup-shop--js) .eup-shop__rail[data-eup-filtered] .eup-shop__rail-body {
		background: var(--eup-surface);
		border: 1px solid var(--eup3-line);
		border-radius: var(--eup3-radius, 10px);
		margin-top: 12px;
		padding: 18px;
	}

	body.eup-fe1.eup-so2 .eup-shop:not(.eup-shop--js) .eup-shop__body:has(> .eup-shop__rail) > .eup-shop__main > .eup-shop__toolbar > .eup-shop__sort {
		flex: 1 1 auto;
		min-width: 0;
	}

	/* Shelf tiles: two rows (four tiles) and the "Show all N shelves" button, as shop-v2.js sets them. */
	body.eup-fe1 .eup-shop:not(.eup-shop--js) .eup-shop__shelves:not(.is-capped):has([data-eup-shelves-more]) .eup-shop__shelf:nth-child(n+5) {
		display: none;
	}

	body.eup-fe1 .eup-shop:not(.eup-shop--js) .eup-shop__shelves:not(.is-capped) .eup-shop__shelves-more[hidden] {
		display: inline-flex;
	}
}

/* ---------------------------------------------------------------------------------------------------------------
 * SF Shop filter rail scrolls on its own (round 4, D-593).
 * From 850 px the rail is sticky (shop-v2.css 698-703: top 16; header-v3.css 767-769 at 1024+ and body.eup-motion-v3:
 * top = pinned bar + admin bar + 16, which measures 80 px at 1440). It is taller than the viewport (about 1200 px with the
 * brand list), so its lower facets (most of Brand, all of Price) could never be reached. Fix: cap it at the viewport
 * below its own sticky top and scroll inside it. --eup-fe1-rail-top repeats the two sticky-top values above, so the
 * cap and the stick point move together. Show all brands still expands the list in place. Phones (under 850) use the
 * drawer and are untouched. No colour values.
 * ------------------------------------------------------------------------------------------------------------ */
@media (min-width: 850px) {
	body.eup-fe1 .eup-shop {
		--eup-fe1-rail-top: 16px;
	}

	body.eup-fe1 .eup-shop .eup-shop__rail {
		max-height: calc(100vh - var(--eup-fe1-rail-top) - 16px);
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
	}
}

@media (min-width: 850px) {
	@supports (height: 100dvh) {
		body.eup-fe1 .eup-shop .eup-shop__rail {
			max-height: calc(100dvh - var(--eup-fe1-rail-top) - 16px);
		}
	}
}

@media (min-width: 1024px) {
	body.eup-fe1.eup-motion-v3 .eup-shop {
		--eup-fe1-rail-top: calc(var(--eup3-hd-pinned-h) + var(--eup3-hd-top) + 16px);
	}
}

/* ---------------------------------------------------------------------------------------------------------------
 * SW-1 In-page jumps land just under the pinned header, at every width (round 4, lane SW; owner 31 Oct: the olive
 * page's SHOP NOW landed too high, the photo above still showing, "its supposed to be a little bit lower").
 * Root cause: header v3 computes --eup3-hd-pinned-h on :root (header-v3.css:656: 84 px at 1920, 64 at 1440, 60 under
 * 1024), but header v5/v6 pin a 64 px bar at every width (header-v6.css:349). brand-v2.css:30-33 corrected the token
 * on body only, and only from 1024 up, while scroll-padding-top is read on html (header-v3.css:660,
 * brands-b1.css:309/561), so every jump used the stale value; pages then added their own scroll-margin-top on top of
 * it (double offsets) and aimed at padded sections. Here, once: the token on html, the gap, one scroll-padding-top;
 * page targets add no margin of their own, and a padded target is entered at its content (scroll-margin-top = minus
 * its own padding-top; keep each one in step with the rule cited). Native jumps, :target and every
 * scrollIntoView({block:'start'}) (product accordions, brands search, checkout) all follow it.
 * ------------------------------------------------------------------------------------------------------------ */
html:has(> body.eup-fe1.eup-hd5.eup-motion-v3) {
	--eup3-hd-pinned-h: 64px; /* the pinned bar, header v5/v6 (also feeds the sticky A-Z bar on the brands page) */
	--eup-pin-h: var(--eup3-hd-pinned-h);
	--eup-pin-gap: 24px;
	--eup-pin-top: var(--eup3-hd-top, 0px); /* the WordPress admin bar above the pinned bar, when signed in */
	scroll-padding-top: calc(var(--eup-pin-h) + var(--eup-pin-top) + var(--eup-pin-gap));
}

/* Phones with the admin bar: it scrolls away and the pinned bar goes to 0 (header-v3.css:717-720). */
@media (max-width: 600px) {
	html:has(> body.eup-fe1.eup-hd5.eup-motion-v3.admin-bar) {
		--eup-pin-top: 0px;
	}
}

/* Brands A to Z (brands-b1.css:304-310): the letter bar sticks under the header, so groups land under the bar. The bar
   is 56 px tall under 1024 (6 + 44 + 6). From 1024 up it is 12 + chip + 12, the chip min(40px, a 27th of the row)
   (brands-b1.css:572-586): 56.1 px at 1024, 58.6 at 1100, 61.3 at 1180, 63.4 at 1240, 64 from about 1260 (measured,
   lane SW 31 Oct); the clamp below follows it within 0.5 px. */
html:has(> body.eup-fe1.eup-hd5.eup-motion-v3 .eup-b1) {
	scroll-padding-top: calc(var(--eup-pin-h) + var(--eup-pin-top) + 56px + var(--eup-pin-gap));
}

@media (min-width: 1024px) {
	html:has(> body.eup-fe1.eup-hd5.eup-motion-v3 .eup-b1) {
		scroll-padding-top: calc(var(--eup-pin-h) + var(--eup-pin-top) + clamp(56px, 3.36vw + 21.7px, 64px) + var(--eup-pin-gap));
	}
}

/* Targets that added a top margin of their own (now counted twice). */
body.eup-fe1.eup-hd5.eup-motion-v3 .eup-product-v3 .eup-acc__h,           /* product-v3.css:623, 96 px */
body.eup-fe1.eup-hd5.eup-motion-v3 .eup-legal .eup-legal__body [id],      /* legal-v2.css:485 and :531, 24 and 16 px (contents list) */
body.eup-fe1.eup-hd5.eup-motion-v3 .eup-h6-way,                           /* home-v6.css:843, 64 px (#the-eupepsia-way) */
body.eup-fe1.eup-hd5.eup-motion-v3 .eup-brandspage .eup-brands__group,    /* brands-v2.css:604, 24 px (the earlier brands page) */
body.eup-fe1.eup-hd5.eup-motion-v3 .eup-bal-shop,                         /* balance-v1.css:267, 80 px (template not in use on staging) */
body.eup-fe1.eup-hd5.eup-motion-v3 .eup-home3 #eup4-needs {                /* home-v4.css:173, 100 px (home-v4.css not loaded today; the id is) */
	scroll-margin-top: 0;
}

/* Padded targets: entered at their content. */
body.eup-fe1.eup-hd5.eup-motion-v3 .eup-64-products {                     /* sixfour-v1.css:354-356: padding-top clamp(32px, 3.54vw, 68px) */
	scroll-margin-top: calc(-1 * clamp(32px, 3.54vw, 68px));
}

body.eup-fe1.eup-hd5.eup-motion-v3 .eup-tl .eup-tl-sec[id] {              /* timeless-v1.css:111-112: padding var(--eup-tl-section) 0 */
	scroll-margin-top: calc(-1 * var(--eup-tl-section, 0px));
}

html body.eup-fe1.eup-hd5.eup-motion-v3.eup-olive-v1 .eup-olive .eup-olive-buy { /* product-olive-v1.css:384-386: padding-top 16px */
	scroll-margin-top: -16px;
}

@media (min-width: 1024px) {
	html body.eup-fe1.eup-hd5.eup-motion-v3.eup-olive-v1 .eup-olive .eup-olive-buy { /* product-olive-v1.css:1282-1285: the designer's gap */
		scroll-margin-top: calc(-134.1 * var(--ol-u));
	}
}

/* ---------------------------------------------------------------------------------------------------------------
 * SW-2 Accordion rows grow from themselves (round 4, lane SW; owner 31 Oct: on the olive page at 412 opening
 * "Overview" scrolled the page 700 px and the row left the screen). Root cause: scroll anchoring follows DOM order,
 * and product-olive-v1.css:64-77 reorders the page under 1024 px (hero, buy box, then sections that come earlier in
 * the DOM), so the browser anchored to the harvest section below the row and scrolled by the panel's height.
 * product-v3.js (setOpen, holdAnchor) sets this class on html for the length of the open or close motion. The
 * olive page carries the same rule (product-olive-v1.css), so the olive flag alone is covered too.
 * ------------------------------------------------------------------------------------------------------------ */
html.eup-acc-moving:has(> body.eup-fe1) {
	overflow-anchor: none;
}