/*
DAY-63, against DAY-9 (Shop information architecture) v5 §14.3/§14.8: the product-to-
collection relationship row. Quiet by the spec's own words — "not styled as a primary
button, badge, promotion or scarcity cue" — so this is deliberately almost nothing: the
link's own underline and focus ring already come from style.css's site-wide `a` and
`:focus-visible` rules (DAY-28), and are not repeated here.

Three things this file adds: wrapping instead of a horizontal scrollbar for a long or
multiple collection name at 320px (§14.6); and, per §14.8's "at least 44px" touch
target, a real 44px box on each link itself — not padding on the paragraph, which
Tomás's DAY-63 round-3 staging run proved is inert space a tap does not land on
(the `<p>` measured 49.4px tall but its clickable `<a>` was only 26px, its own
line-height). `inline-flex` + `min-height` gives every link an actual 44px hit area
that scales with whatever line-height the theme applies, without needing to guess a
padding value from a measured font size — and because it is a real box in the flow,
two collection names that wrap onto separate lines at 320px still get pushed apart
by it, so their hit areas cannot overlap (§14.8's other condition).

Loaded only on the product page (inc/product.php), same pattern as home.css.
*/

.daylon-product-collections {
	margin: var(--wp--preset--spacing--20) 0;
	padding: var(--wp--preset--spacing--30) 0;
	overflow-wrap: break-word;
}

.daylon-product-collections__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* ================================================================ the product page, DAY-16 */

/*
Against the Product page UX spec v8 (Confluence 2293762). Mobile first, because mobile is the
order that matters (§2); 768–1023 is the mobile order with the gallery capped at 600px (§3);
≥ 1024 is two columns with a sticky buy column (§3).

Hierarchy is size, space and what is absent (§4): the photograph is the largest thing, the
price sits at body size in the body colour, and nothing is red, boxed or badged. Every colour,
size and duration is a theme.json token. No `!important` (ticket AC): none of these rules
competes with Ollie — the markup is the child theme's own.
*/

/* ---------------------------------------------------------------- shell */

.daylon-product {
	padding-block-end: var(--wp--preset--spacing--70);
}

.daylon-product-breadcrumb {
	font-size: var(--wp--preset--font-size--small);
}

.daylon-product-breadcrumb a {
	display: inline-flex;
	align-items: center;
	gap: 0.25em;
	min-height: 44px;
}

/*
The fold is arithmetic (§2.1): the name and the price must land in the first screen of a
390 × 664 phone, so the layout's default block gap does not sit between the breadcrumb, the
gallery and the name. WordPress's own gap rule is zero-specificity (`:where()`), so a class wins.
*/
.daylon-product > .daylon-product-breadcrumb {
	margin-block: 0;
}

.daylon-product > .daylon-product__top {
	margin-block-start: 0;
}

.daylon-product__top {
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

/* The group keeps core's flow layout, which spaces every child but the first with a block-gap
   top margin. In a grid that pushes the buy column 32px below the gallery at two columns, and
   adds 24px to the row gap at one (DAY-140, the same fault as the home page's DAY-111 and the
   shop listing's DAY-129); the grid gap already does the spacing. */
.daylon-product__top > * {
	margin-block: 0;
}

.daylon-product__buy > * {
	margin-block: 0;
}

/* ---------------------------------------------------------------- gallery (§2.1, §3, §6 states 7–9, 14) */

.daylon-product-gallery {
	position: relative;
}

.daylon-product-gallery__track {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.daylon-product-gallery__track::-webkit-scrollbar {
	display: none;
}

/*
The box is reserved from the first paint (§6 state 14): ratio 4/5, capped at 62vh so the name
and the price stay in the first screen of a short phone (§2.1).
*/
.daylon-product-gallery__item {
	display: flex;
	flex: 0 0 100%;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 5;
	max-height: 62vh;
	overflow: hidden;
	background: var(--wp--preset--color--tertiary);
	scroll-snap-align: start;
}

.daylon-product-gallery__item--placeholder {
	width: 100%;
}

/*
Centred and covered, never stretched (§6 state 9). An image smaller than the gallery size also
carries an inline max-width/max-height at its natural size (inc/product.php), so it is never
upscaled past it either.

Height auto and max-width 100% are what the page has always rendered: until DAY-449 they came
from WooCommerce's `.woocommerce img` (woocommerce-layout.css, one class more than this rule),
which overrode the `height: 100%` written here. That stylesheet no longer loads on this page,
so the values it supplied are this rule's own.
*/
.daylon-product-gallery__img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	object-fit: cover;
	object-position: center;
}

/*
The measures photograph (§5.6 point 3): whole, never cropped — a crop would cut the arrows and the
figures, which are its content. Contained in the same 4:5 box on its neutral ground, and capped at
its natural size by the inline max-width/max-height (inc/product.php), so never upscaled.
*/
.daylon-product-gallery__img--measures {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/*
«Ver medidas» moves focus to this item (§5.6 point 5). The site's ring is a box-shadow drawn
outside the element, which the scrolling track clips on a phone and the photograph covers if
drawn inside; an outline is painted above both, so the ring is drawn inwards with one. Two
classes over the site rule's pseudo-class, as style.css explains.
*/
html body .daylon-product-gallery__item--measures:focus-visible:focus-visible {
	outline: 2px solid var(--wp--preset--color--main);
	outline-offset: -4px;
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--base);
}

.daylon-product-gallery__counter {
	position: absolute;
	inset-inline-end: var(--wp--preset--spacing--30);
	bottom: var(--wp--preset--spacing--30);
	margin: 0;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--x-small);
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- name, descriptor, price (§4) */

/* §6 state 10: a 60-character name wraps to at most 3 lines. At 320px x-large is 30px across a
   272px column and takes 4; 7.5vw holds 3 there and below (the column is the viewport less
   fixed padding, so the ratio only loosens as it widens), and x-large still wins from ~425px. */
.daylon-product__name {
	margin: 0;
	font-size: min(var(--wp--preset--font-size--x-large), 7.5vw);
	line-height: 1.15;
	overflow-wrap: anywhere;
}

.daylon-product__descriptor {
	margin: var(--wp--preset--spacing--20) 0 0;
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--small);
}

.daylon-product__price {
	margin-block-start: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--main);
	font-size: var(--wp--preset--font-size--base);
}

.daylon-product__price del,
.daylon-buybar__price del {
	color: var(--wp--preset--color--secondary);
}

.daylon-product__price ins,
.daylon-buybar__price ins {
	text-decoration: none;
}

/* ---------------------------------------------------------------- selectors (§5) */

.daylon-options {
	margin-block-start: var(--wp--preset--spacing--40);
}

.daylon-options__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0 var(--wp--preset--spacing--40);
}

.daylon-options__label {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
}

/* §5.6 point 5: where «Guía de tallas» was, with its weight (§8.9 slot D). */
.daylon-options__measures {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: var(--wp--preset--font-size--small);
}

/* Said in words beside the label, not by colour alone. */
.daylon-options__prompt {
	margin-inline-start: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--error);
}

/* Wraps to a second line at 320px rather than scrolling sideways (§3). Targets ≥ 44px, 8px apart (§5.1). */
.daylon-options__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/*
State 20 (§5.2.1): the colour chosen has no photos of its own, and this says whose they are.
Plain text at body-small in the normal text colour — never a badge, an icon or an alert (§4).
*/
.daylon-options__note {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: var(--wp--preset--font-size--small);
}

/* Ollie's own `label { display: block; width: 100% }` would give every size its own line. */
.daylon-option {
	position: relative;
	display: inline-flex;
	width: auto;
}

/*
The native radio stays in place, full size and transparent, over its visible name: it keeps
the keyboard behaviour, the click target and the accessible state; the name draws the look.
*/
/* Two classes, to outrank Ollie's `input[type="radio"] { width: auto }` (0,1,1) without `!important`. */
.daylon-option .daylon-option__input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.daylon-option__name {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--main);
	font-size: var(--wp--preset--font-size--small);
	font-variant-numeric: tabular-nums;
}

.daylon-option__input:checked + .daylon-option__name {
	border-color: var(--wp--preset--color--main);
	background: var(--wp--preset--color--main);
	color: var(--wp--preset--color--base);
}

/* Shown, not removed — and marked three ways: struck, dashed, and announced (§5.1). */
.daylon-option__input:disabled {
	cursor: not-allowed;
}

.daylon-option__input:disabled + .daylon-option__name {
	border-style: dashed;
	color: var(--wp--preset--color--secondary);
	text-decoration: line-through;
}

/* The ring the transparent radio cannot show, drawn on its name — same two-tone ring as style.css. */
.daylon-option__input:focus-visible + .daylon-option__name {
	box-shadow:
		0 0 0 2px var(--wp--preset--color--base),
		0 0 0 4px var(--wp--preset--color--main);
}

/* Forced colours drop the shadow, and an outline on the radio itself is as transparent as the
   radio: a real outline in a system colour, on the name. */
@media (forced-colors: active) {
	.daylon-option__input:focus-visible + .daylon-option__name {
		outline: 2px solid CanvasText;
		outline-offset: 2px;
	}
}

/* And the chosen one is told apart by its fill, which forced colours replace: chosen and not
   chosen were the same box (DAY-401). A thicker edge in the system's selection colour — a
   border, not an outline, because a radio reached by keyboard is chosen and focused at once and
   the outline is the focus ring's. The padding gives back the 2px each side, so no name moves. */
@media (forced-colors: active) {
	.daylon-option__input:checked + .daylon-option__name {
		padding-inline: calc(var(--wp--preset--spacing--30) - 2px);
		border: 3px solid Highlight;
	}
}

.daylon-option [data-daylon-option-status][hidden] {
	display: none;
}

/*
Colour (§5.2): the swatch sits before the name, inside the same button, so the target, the
focus ring and the checked and sold-out states are the size row's. Its thin border and light
ring keep Blanco visible on the base and Negro visible when the button is checked and dark.
*/
.daylon-option__swatch {
	flex: none;
	width: 20px;
	height: 20px;
	margin-inline-end: var(--wp--preset--spacing--20);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 50%;
	background: var(--daylon-swatch, var(--wp--preset--color--tertiary));
	box-shadow: 0 0 0 1px var(--wp--preset--color--base);
}

/* A colour with no tone set in wp-admin (DAY-81): no guessed paint, a neutral hatch beside its name. */
.daylon-option__swatch--unknown {
	background: repeating-linear-gradient(
		45deg,
		var(--wp--preset--color--tertiary) 0 3px,
		var(--wp--preset--color--border-light) 3px 6px
	);
}

.daylon-option__input:disabled + .daylon-option__name .daylon-option__swatch {
	opacity: 0.4;
}

/* Forced colours replace every background, and the tone is the swatch's background: Negro and
   Terracota were the same empty circle (DAY-403). The tone is content — it is what she is
   choosing — so the swatch opts out and keeps it, edged in a system colour because nothing it
   sits on is the theme's any more. The base-coloured ring would come back with it, and goes.
   A colour with no tone is left as forced colours already draw it. */
@media (forced-colors: active) {
	.daylon-option__swatch:not(.daylon-option__swatch--unknown) {
		border-color: CanvasText;
		box-shadow: none;
		forced-color-adjust: none;
	}
}

@media (hover: hover) {
	.daylon-option__input:not(:disabled):not(:checked):hover + .daylon-option__name {
		border-color: var(--wp--preset--color--main);
	}
}

/* ---------------------------------------------------------------- Añadir, stock, confirmation (§5.4, §6) */

.daylon-buy__single-size,
.daylon-buy__stock,
.daylon-buy__sold-out {
	margin: var(--wp--preset--spacing--40) 0 0;
}

.daylon-buy__action {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* Row 8b, the hygiene-seal notice (DAY-595, spec §4): the body's own size, weight and colour, on
   the page's white with a hairline in the `border` token. The delivery strip has no container to
   borrow, and white keeps the text at 16.7:1 — cream is for the page's bands. Never an error or
   warning colour: it is a fact about the product. In forced colours the line may go; the text stays. */
.daylon-buy__seal {
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--base);
	overflow-wrap: break-word;
}

.daylon-buy__add {
	width: 100%;
	min-height: 48px;
	border: 0;
	font-size: var(--wp--preset--font-size--base);
	cursor: pointer;
}

.daylon-buy__add:disabled {
	background: var(--wp--preset--color--border-light);
	color: var(--wp--preset--color--main);
	cursor: not-allowed;
}

.daylon-buy__form.is-busy .daylon-buy__add {
	cursor: progress;
}

.daylon-buy__error {
	margin: var(--wp--preset--spacing--30) 0 0;
	color: var(--wp--preset--color--error);
}

.daylon-buy__confirm-text {
	margin: var(--wp--preset--spacing--40) 0 0;
}

.daylon-buy__confirm-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--wp--preset--spacing--50);
	margin: 0;
}

.daylon-buy__confirm-actions a,
.daylon-buy__keep-shopping {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.daylon-buy__keep-shopping {
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--primary);
	font: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
	cursor: pointer;
}

/* The wallet under Añadir and its confirmation — "Express payment acceptance" v3 §4.1 (DAY-548).
   WooPayments' container, printed only when WooPayments prints something. The air above it
   comes with the acceptance group, which exists only once a button is on the screen, so a
   device with no wallet gets no gap (E8, E18). The group itself is daylon-core's. */
.daylon-buy__express {
	position: relative;
}

.daylon-buy__express:has(.daylon-express-acceptance) {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* Over the wallet while no variation is chosen (E9): transparent, so the buttons look as they
   always do, never greyed. Placed by product.js, which knows where the buttons are. */
.daylon-buy__wallet-guard {
	position: absolute;
	/* Above daylon-core's acceptance overlay (z-index 2): the variation answers first (§4.1 c). */
	z-index: 3;
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: transparent;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.daylon-buy__wallet-guard[hidden] {
	display: none;
}

/* Always visible, never an accordion (§2 row 11). */
.daylon-product-strip {
	margin: var(--wp--preset--spacing--40) 0 0;
	font-size: var(--wp--preset--font-size--small);
}

/* ---------------------------------------------------------------- description, facts, accordion (§2 rows 12–14) */

.daylon-product__details {
	margin-block-start: var(--wp--preset--spacing--60);
}

/* The group is wide so it lines up with the gallery; its text keeps a readable measure. */
.daylon-product__details > * {
	max-width: 44rem;
}

.daylon-product-description > p {
	margin: 0 0 var(--wp--preset--spacing--40);
}

/* One per line, with air between them — never a dense table (§4). */
.daylon-product-facts__list {
	margin: 0 0 var(--wp--preset--spacing--50);
	padding: 0;
	list-style: none;
}

.daylon-product-facts__list li + li {
	margin-block-start: var(--wp--preset--spacing--30);
}

.daylon-product-accordion {
	border-block: 1px solid var(--wp--preset--color--border-light);
}

/* Two accordions in a row share one rule between them, not two. */
.daylon-product-accordion + .daylon-product-accordion {
	border-block-start: 0;
}

.daylon-product-accordion summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	min-height: 48px;
	list-style: none;
	cursor: pointer;
}

.daylon-product-accordion summary::-webkit-details-marker {
	display: none;
}

.daylon-product-accordion summary::after {
	content: "+";
	content: "+" / "";
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1;
}

.daylon-product-accordion[open] summary::after {
	content: "−";
	content: "−" / "";
}

.daylon-product-accordion__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--base);
}

/* One unbroken run of characters breaks rather than pushing the page sideways: the shop's email
   address in «Devoluciones» measured 443px with text at 200 % on a 320 screen (DAY-603). */
.daylon-product-accordion__body {
	padding-block-end: var(--wp--preset--spacing--40);
	overflow-wrap: anywhere;
}

.daylon-product-accordion__body h3 {
	margin: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--base);
}

.daylon-product-accordion__body p {
	margin: 0 0 var(--wp--preset--spacing--30);
}

/* ---------------------------------------------------------------- Más de [categoría] (§2 row 15, §6 states 1 and 15) */

.daylon-product-related {
	margin-block-start: var(--wp--preset--spacing--60);
}

.daylon-product-related--promoted {
	margin-block-start: var(--wp--preset--spacing--50);
}

/* Sold out, the block is printed twice (inc/product.php) and shown once: promoted in the buy
   column here, in its usual place from 1024px (below). */
.daylon-product-related--repeated {
	display: none;
}

.daylon-product-related__title {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--large);
}

.daylon-product-related__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The card itself is product-card.css, the one copy every page that prints a card shares
   (DAY-320). Only the grid above is this block's. */

/* ---------------------------------------------------------------- sticky buy bar (§2.1) */

.daylon-buybar {
	position: fixed;
	inset-inline: 0;
	/* Above the cookie banner while it is open — see cart-checkout.css (DAY-21). */
	bottom: var(--daylon-consent-offset, 0px);
	/* Above the header (z-index 40), always: where the two overlap — text at 400 %, the header
	   still in the page under the bar — the header is what is covered and the centre of «Añadir»
	   takes the touch (§2.1b rule 1, DAY-617). Below the open mobile menu panel (50) and the
	   consent banner (100000). */
	z-index: 41;
	display: flex;
	align-items: center;
	/* The bar's air is capped at its 100 % size, in px, and only the words grow with the
	   reader's text: with text at 200 % at 320 the rem gap and the button's rem padding doubled
	   with it and pushed «Añadir» to x=373 (DAY-603, WCAG 1.4.4 and 1.4.10). At 100 % the cap
	   equals the preset (1rem = 16px, 1.5rem = 24px), so nothing moves. The bar's structure —
	   one row, price · size · Añadir — is the spec's (§2.1) and stays. */
	gap: min(var(--wp--preset--spacing--40), 16px);
	min-height: 64px;
	/* As wide as the page, its content on the page container's edges (style.css). */
	padding: var(--wp--preset--spacing--20) var(--daylon-edge) calc(var(--wp--preset--spacing--20) + env(safe-area-inset-bottom));
	border-top: 1px solid var(--wp--preset--color--border-light);
	background: var(--wp--preset--color--base);
	/* Its inner width decides the size slot (§2.1a rule 2, below). */
	container: daylon-buybar / inline-size;
}

.daylon-buybar[hidden] {
	display: none;
}

.daylon-buybar__price {
	flex: none;
	font-size: var(--wp--preset--font-size--small);
}

/* §2.1a (v29, DAY-607): the size slot is whole or absent, never a fragment. With text at 200 %
   at 320 it was clipped to 11px and «Elige talla» read as «E». It never shrinks below the
   longest thing it can hold — «Elige talla», drawn invisibly and zero-high by ::after from
   `data-daylon-buybar-longest` — so its size is the same before and after she chooses, and
   choosing a size never rearranges the bar. Where that does not fit, it is not displayed at all
   (removed from the layout and the accessibility tree): below an inner width of 18rem here, and
   wherever else product.js finds the bar overflowing with it (fitBar(), rule 4 (a)). */
.daylon-buybar__size {
	display: flex;
	flex-direction: column;
	flex: 1 0 auto;
	font-size: var(--wp--preset--font-size--small);
	white-space: nowrap;
}

.daylon-buybar__size::after {
	content: attr(data-daylon-buybar-longest);
	height: 0;
	overflow: hidden;
	visibility: hidden;
}

@container daylon-buybar (width < 18rem) {
	.daylon-buybar__size {
		display: none;
	}
}

/* §2.1a rule 4 — nothing in the bar is ever off-screen. When the bar still overflows, product.js
   steps through the spec's order, one class at a time, until it fits: (a) the slot goes, (b) the
   gaps shrink, (c) Añadir's side padding shrinks, (d) the price may wrap, the new price over the
   struck-through one. (b) and (c) are the spec's 0.5rem and 0.75em at their 100 % size, in px,
   for the reason DAY-603 capped the bar's air: in rem they would be no smaller at 200 %.
   Añadir keeps its whole word, its 48px height and its whole box as the target. */
.daylon-buybar.is-fit-size .daylon-buybar__size {
	display: none;
}

.daylon-buybar.is-fit-gap {
	gap: 8px;
}

.daylon-buybar.is-fit-button .daylon-buybar__add {
	padding-inline: 12px;
}

.daylon-buybar.is-fit-price .daylon-buybar__price {
	display: flex;
	flex-direction: column-reverse;
	align-items: flex-start;
	flex: 0 1 auto;
	min-width: min-content;
}

/* §2.1a rule 4 (e) and rule 8 (v30, DAY-611): where the price and Añadir still do not fit after
   (a)–(d), the price leaves the bar whole, like the size slot — removed from the layout and the
   accessibility tree, never truncated — and Añadir alone takes the bar's inner width, one row.
   The decision is by width in rem, so it needs no zoom detection: 7.75rem is the price at its
   widest wrapped form (a reduced price, 129,90 € over 99,90 €) + the 8px gap + Añadir at 200 %,
   measured at 320 on product 643. At 320 that is ≤ the inner width at 200 % (9rem), which stays
   exactly as v29, and > the inner width at 400 % (4.5rem), where the bar is Añadir alone. A wider
   price between the two is caught by fitBar() in product.js, with `is-fit-out`. */
@container daylon-buybar (width < 7.75rem) {
	.daylon-buybar__price,
	.daylon-buybar.is-fit-price .daylon-buybar__price {
		display: none;
	}

	/* Scoped to the bar: `.daylon-buybar__add`'s own `flex: none` comes later in this file. */
	.daylon-buybar .daylon-buybar__add {
		flex: 1 1 auto;
	}
}

.daylon-buybar.is-fit-out .daylon-buybar__price {
	display: none;
}

.daylon-buybar.is-fit-out .daylon-buybar__add {
	flex: 1 1 auto;
}

.daylon-buybar__add {
	flex: none;
	min-height: 48px;
	margin-inline-start: auto;
	padding-inline: min(var(--wp--preset--spacing--50), 24px);
	border: 0;
	cursor: pointer;
}

/* ⛔ It never covers the last line of content (§2.1). */
@media (max-width: 1023px) {
	html.daylon-has-buybar body {
		/* Plus the cookie banner the bar stands on while it is open, or the pill standing on
		   the bar once she has chosen (style.css, DAY-21). */
		padding-block-end: calc(64px + env(safe-area-inset-bottom) + var(--daylon-consent-offset, 0px) + var(--daylon-consent-reopen-offset, 0px));
	}
}

/* ---------------------------------------------------------------- tablet and desktop (§3) */

@media (min-width: 768px) and (max-width: 1023px) {
	.daylon-product-gallery {
		width: 100%;
		max-width: 600px;
		margin-inline: auto;
	}
}

@media (min-width: 1024px) {
	/* The phone's fold arithmetic does not apply here, and without it the breadcrumb sat on the
	   photograph (DAY-324). */
	.daylon-product > .daylon-product-breadcrumb {
		margin-block-end: var(--wp--preset--spacing--50);
	}

	.daylon-product__top {
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
		align-items: start;
		gap: var(--wp--preset--spacing--70);
	}

	/* A vertical stack, not a carousel: no image already paid for is hidden (§3). */
	.daylon-product-gallery__track {
		flex-direction: column;
		gap: var(--wp--preset--spacing--30);
		overflow: visible;
		scroll-snap-type: none;
	}

	.daylon-product-gallery__item {
		flex: none;
		max-height: none;
	}

	.daylon-product-gallery__counter {
		display: none;
	}

	/* Under the site header, which is pinned too (style.css), at whatever height chrome.js
	   measures it: this was a spacing step that happened to equal the header's 80px, and the
	   header is taller now (DAY-394). 102px is what stands in until the script has run.
	   A column taller than the window rises by what it is short (`--daylon-buy-lift`, product.js),
	   so it sticks with its foot — the wallet and the delivery line — in reach (DAY-548). */
	.daylon-product__buy {
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--daylon-header-height, 102px) - var(--daylon-buy-lift, 0px));
	}

	/* A sealed product's column rises like any other; it stops being sticky and scrolls with the
	   page only when the window cannot hold the span from the notice's top to the column's foot
	   (hygiene-seal spec v4 H13, DAY-605). product.js sets the class; `top` stays declared so it
	   can still measure what the column would need. */
	.daylon-product__buy.is-unstuck {
		position: static;
	}

	/* Beside the photograph the name keeps the phone's size instead of stepping up, and the
	   price steps up to meet it: in a 490px column a 60px name outweighed the price and
	   "Añadir", the two things the column is for (DAY-324). */
	.daylon-product__price {
		font-size: var(--wp--preset--font-size--medium);
		font-weight: 600;
	}

	/* Sold out, "Más de…" is not promoted here: in the narrow buy column it left the
	   photograph's side empty and pushed the description a screen down (DAY-324). */
	.daylon-product-related--promoted {
		display: none;
	}

	.daylon-product-related--repeated {
		display: block;
	}

	.daylon-product-related__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.daylon-buybar {
		display: none;
	}
}

/* ---------------------------------------------------------------- motion — the whole list (§4.1) */

/* A cross-fade on the gallery, a slight scale on desktop hover, the bar sliding in. Nothing else. */
@media (prefers-reduced-motion: no-preference) {
	@keyframes daylon-product-fade {
		from {
			opacity: 0;
		}
	}

	@keyframes daylon-buybar-in {
		from {
			transform: translateY(100%);
		}
	}

	/* A colour's photo not arrived yet: the box stays neutral, never the previous colour's (§5.2.1 step 2). */
	.daylon-product-gallery__img.is-arriving {
		opacity: 0;
	}

	.daylon-product-gallery__img.is-swapping {
		animation: daylon-product-fade var(--wp--custom--motion--calm) var(--wp--custom--motion--easing);
	}

	.daylon-buybar:not([hidden]) {
		animation: daylon-buybar-in var(--wp--custom--motion--calm) var(--wp--custom--motion--easing);
	}

	@media (hover: hover) and (min-width: 1024px) {
		.daylon-product-gallery__img {
			transition: transform var(--wp--custom--motion--calm) var(--wp--custom--motion--easing);
		}

		/* Not the measures photograph: scaled inside its clipped box, it would lose its edges. */
		.daylon-product-gallery__item:hover .daylon-product-gallery__img:not(.daylon-product-gallery__img--measures) {
			transform: scale(1.02);
		}
	}
}