/*
The account shell — DAY-62, against the "404 and My account" UX spec v2 §4, §7–§11, §14.

Register-by-function (DECISIONS.md, 2026-08-31): account, errors and confirmations are flat,
convention only — no alert-styled boxes competing with each other, which is also what stops
the empty-orders message and the verification notice from reading as "two equal errors"
(spec §1, §8.3).
*/

/* ---------------------------------------------------------------- shell layout, spec §4.2 */

.daylon-account .woocommerce-MyAccount-navigation,
.daylon-account .woocommerce-MyAccount-content {
	width: 100%;
}

@media (min-width: 768px) {
	/* WooCommerce wraps both in `.woocommerce-account` or prints them as siblings depending
	   on the shortcode/block variant; targeting the two elements directly (not a shared
	   parent) is what survives either wrapper. */
	/* Live: this loads after WooCommerce's woocommerce-layout.css, so it beats its `width: 30%`.
	   The rail is 15rem, capped at 30% of the page (216px at 769, 240px from ~850). */
	.daylon-account .woocommerce-MyAccount-navigation {
		float: left;
		width: 15rem;
		max-width: 30%;
	}

	/* No width here on purpose. The content column is 65% of the page container, set by the
	   parent theme's woocommerce.css (Ollie), which loads after this file and wins at the same
	   specificity: 469px at 769, 568px at 922, 624px at 1024, 790px at 1280 (staging, text at
	   100%). The §8.6 orders threshold below measures this column, and spec v18 §4.2 keeps it at
	   65%, so cards at 1024 and the table from ~1035 (DAY-707, DAY-708). */
	.daylon-account .woocommerce-MyAccount-content {
		float: right;
	}
}

/* ---------------------------------------------------------------- account navigation, spec §4.2 */

.daylon-account-nav__toggle {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	min-height: 44px;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--tertiary);
	border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--main);
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

.daylon-account-nav__toggle-icon {
	transition: transform var(--wp--custom--motion--quick) var(--wp--custom--motion--easing);
}

.daylon-account-nav__toggle[aria-expanded="true"] .daylon-account-nav__toggle-icon {
	transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
	.daylon-account-nav__toggle-icon {
		transition: none;
	}
}

/*
A `<div>` is block-level by default, so "persistent at 768px and above" (spec §4.2) needs no
rule of its own — only the collapse below it does, and only there, so nothing above 768px
ever has to out-rank it back.
*/
@media (max-width: 767px) {
	.daylon-account-nav__disclosure {
		display: none;
	}

	.daylon-account-nav__disclosure.is-open {
		display: block;
	}
}

.daylon-account-nav__disclosure {
	border: 1px solid var(--wp--preset--color--border-light);
	border-top: none;
}

.daylon-account-nav__disclosure .woocommerce-MyAccount-navigation-link a {
	display: block;
	min-height: 44px;
	display: flex;
	align-items: center;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}

.daylon-account-nav__disclosure .woocommerce-MyAccount-navigation-link.is-active a {
	font-weight: 600;
	background: var(--wp--preset--color--main-accent);
}

@media (min-width: 768px) {
	/* Persistent rail (spec §4.2): the toggle disappears and the disclosure — a plain
	   block-level `<div>`, never given a `display: none` at this width — is always visible,
	   one tab stop per destination rather than the mobile's single closed control. */
	.daylon-account-nav__toggle {
		display: none;
	}

	.daylon-account-nav__disclosure {
		border-top: 1px solid var(--wp--preset--color--border-light);
	}
}

/* ---------------------------------------------------------------- dashboard, spec §7 */

/* Body-sized, and a long first name wraps — it is never cut with an ellipsis (§7.6). */
.daylon-dashboard-welcome {
	overflow-wrap: break-word;
	margin-bottom: var(--wp--preset--spacing--50);
}

/* A plain list of links (spec v8 §14), one column below 1024px: beside the rail at 768px the
   content column is too narrow for two (§7.6). `minmax(0, 1fr)` so a long word in a card can
   never widen its column past the content. */
.daylon-dashboard-cards {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	grid-template-columns: minmax(0, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Two equal columns: five cards give 2 + 2 + 1, the last one in the first column at its own
   column's width — nothing spans it across both (§7.6). */
@media (min-width: 1024px) {
	.daylon-dashboard-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* The row sets the height and the link fills it, so the whole card is the target and the
   cards of one row are equally tall whichever line is longer (§7.5). */
.daylon-dashboard-cards > li {
	display: flex;
	margin: 0;
}

/* Rest: one style for every card (§7.4). No fill — the filled cream block is how the account
   navigation says "you are here", and no card is. */
.daylon-dashboard-card {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	min-width: 0;
	min-height: 44px;
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--border-light);
	color: var(--wp--preset--color--main);
	text-decoration: none;
	overflow-wrap: break-word;
}

/* theme.json's link hover (`a:where(…):hover`, one element above this class) would recolour
   and underline the whole card; only the title is underlined, and only below. */
.daylon-dashboard-card:hover,
.daylon-dashboard-card:active {
	color: var(--wp--preset--color--main);
	text-decoration: none;
}

/* Hover: the border takes the accent at the same 1px, so nothing moves, and the title is
   underlined (§7.4). Behind `hover: hover` because a touch screen keeps `:hover` on the last
   card tapped, which would leave one card looking selected; there the pressed state below
   is the only feedback. */
@media (hover: hover) {
	.daylon-dashboard-card:hover {
		border-color: var(--wp--preset--color--primary);
	}

	.daylon-dashboard-card:hover .daylon-dashboard-card__title {
		text-decoration: underline;
		text-underline-offset: 0.15em;
	}
}

/* Pressed: the hover treatment, held while pressed (§7.4). */
.daylon-dashboard-card:active {
	border-color: var(--wp--preset--color--primary);
}

.daylon-dashboard-card:active .daylon-dashboard-card__title {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* Keyboard focus: 3px of ink, set off from the border by a gap (§7.4) — heavier than the
   site-wide two-tone ring (style.css), which it replaces here at one class more than that
   rule's (0,2,2). An outline, not a border, so it shows together with the hover and moves
   nothing. */
html body .daylon-dashboard-card:focus-visible:focus-visible {
	outline: 3px solid var(--wp--preset--color--main);
	outline-offset: 3px;
	box-shadow: none;
}

/* Colour only, and not at all under reduced motion (§7.4). */
@media (prefers-reduced-motion: no-preference) {
	.daylon-dashboard-card {
		transition: border-color var(--wp--custom--motion--quick) var(--wp--custom--motion--easing);
	}
}

.daylon-dashboard-card__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
}

.daylon-dashboard-card__qualifier {
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--small);
}

/* ---------------------------------------------------------------- notices, register-by-function */

/*
On this block theme WooCommerce renders every notice with its Blocks banner markup
(.wc-block-components-notice-banner.is-info / .is-error / .is-success) — never the classic
.woocommerce-info / .woocommerce-error the first pass styled, which therefore styled nothing
(Tomás's screenshots, DAY-62 third pass). Flattened here the way that pass meant to: no
filled box, one left rule whose colour is the notice's function. The empty-orders state is
not a notice at all any more (see below), so the verification notice is the only info
banner left on the orders endpoint.
*/
.daylon-account .wc-block-components-notice-banner,
.daylon-account-notice {
	background: none;
	border: none;
	border-left: 3px solid var(--wp--preset--color--border);
	border-radius: 0;
	color: var(--wp--preset--color--main);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	margin: 0 0 var(--wp--preset--spacing--50);
}

.daylon-account .wc-block-components-notice-banner.is-error {
	border-left-color: var(--wp--preset--color--error);
}

.daylon-account .wc-block-components-notice-banner.is-success {
	border-left-color: var(--wp--preset--color--success);
}

.daylon-account .wc-block-components-notice-banner .button {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

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

/* ---------------------------------------------------------------- form errors, spec §10.2 / §11 */

.daylon-form-errors {
	border-left: 3px solid var(--wp--preset--color--error);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	margin: 0 0 var(--wp--preset--spacing--50);
}

/* It is focused by script after a failed save (spec §14) — a container is not a control,
   so the browser's default focus ring does not reach it and it gets an explicit one. */
.daylon-form-errors:focus {
	outline: 2px solid var(--wp--preset--color--main);
	outline-offset: 2px;
}

.daylon-form-errors__heading {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--error);
	margin: 0 0 var(--wp--preset--spacing--30);
}

.daylon-form-errors__list {
	margin: 0;
	padding-left: 1.25em;
}

.daylon-form-errors__list li + li {
	margin-top: var(--wp--preset--spacing--20);
}

.daylon-form-errors__list a {
	color: var(--wp--preset--color--error);
	text-decoration: underline;
}

/* The invalid field: a rule colour and the message under it — the message is what
   identifies the field (spec §14: "form errors are never colour-only"). */
.daylon-account .daylon-field--invalid input,
.daylon-account .daylon-field--invalid select {
	border-color: var(--wp--preset--color--error);
}

.daylon-field-error {
	display: block;
	margin-top: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--error);
}

/* ---------------------------------------------------------------- orders list, spec §8 */

/* `.order-actions-button`: the same actions on the single order's page, outside the orders
   table — inline there, so the 44px floor did not apply: «Desistir» measured 79×38 at 390
   ("Desistimiento online" spec v2 §6; DAY-314). */
.daylon-account .woocommerce-orders-table__cell-order-actions .button,
.daylon-account .order-actions-button {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

/* In the orders list WooCommerce's block-theme sheet makes each action a full-width block and
   the parent theme zeroes its margin, both from selectors that outrank the rule above: «Ver»
   and «Desistir» stood flush, 0px apart, at every width (DAY-321, F-25). The cell is a
   `table-cell` in the table and a block in the card (below), so the separation is carried by
   the second action and not by a `gap` on the cell. */
.daylon-account .woocommerce-orders-table__cell.woocommerce-orders-table__cell-order-actions .button {
	display: flex;
	justify-content: center;
	margin: 0;
}

.daylon-account .woocommerce-orders-table__cell.woocommerce-orders-table__cell-order-actions .button + .button {
	margin-top: var(--wp--preset--spacing--30);
}

/* «Desistir de esta compra» is the quiet one of the two: an outline in the accent, so «Ver» is the only
   filled action in the row. Still a 44px target with its own text, in every order that offers
   it — it is how the buyer withdraws (DECISIONS.md, 2026-09-28, route B). The hover is an
   underline and not a fill: theme.json's button hover changes the background, which under
   this text colour would leave the word unreadable. */
.daylon-account .woocommerce-orders-table__cell.woocommerce-orders-table__cell-order-actions .button.daylon-withdraw,
.daylon-account .woocommerce-orders-table__cell.woocommerce-orders-table__cell-order-actions .button.daylon-withdraw:hover {
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.daylon-account .woocommerce-orders-table__cell.woocommerce-orders-table__cell-order-actions .button.daylon-withdraw:hover {
	text-decoration: underline;
}

/* «Desistir de esta compra» is shown whole, never cut (L5; UX spec v6 §13.3, DAY-673).
   WooCommerce's `.woocommerce table.my_account_orders .button` sets `nowrap`, which in the
   table pushed the label past its 121px column. Here it wraps instead, centred, and the 44px
   above stays a floor rather than a height, so a second line (or a third at a larger text size)
   grows the button and is never clipped. `balance` keeps the two lines even. */
.daylon-account .woocommerce-orders-table__cell.woocommerce-orders-table__cell-order-actions .button.daylon-withdraw {
	white-space: normal;
	text-align: center;
	text-wrap: balance;
}

/* Where the list is a real table (never at 768px and below: there it is always the cards), the
   Acciones column widens to fit the label on two lines — «Desistir de» / «esta compra» — and
   the room comes from Total, which already wraps. In `em`, so the column follows the text size.
   Measured on staging at 1024: 154px column, 124×62 button; 160px at 1280. */
@media (min-width: 769px) {
	.daylon-account .woocommerce-orders-table__header-order-actions,
	.daylon-account .woocommerce-orders-table__cell-order-actions {
		width: 10.5em;
	}
}

/* The table gives way to the cards whenever it does not fit its column, at every text size
   (spec v13 §8.6 rules 1 and 3, DAY-675/676/678/679). WooCommerce's switch is a viewport width
   in px, which the text size does not move: at 1024 with text at 200% the column is 624px and
   the table needs 823px; at 769 with text at 100% it is 469px against 499px.

   The test is a container query on the content column, so its `em` is the column's own text
   size and it follows both the browser's text-size setting and a root font-size override.
   Measured on staging (master @ 5e2e361) from 769 to 1280px and root 16–32px, the table's
   narrowest width is 20.5em + 145px (the px part is the cells' fixed padding and borders).
   The threshold is the spec's 25em + 180px: a margin of 4.5em + 35px (~113px at 100%) for the
   worst real row. That row — four-digit total with item count, five-digit order number, the
   longest status word, Pagar + Ver + Cancelar + Desistir — measured 58px wider than an ordinary
   one (DAY-679), so the margin is kept, not raised. The actions column is a fixed 10.5em with
   the buttons stacked, which is why four actions do not widen the row.

   The column's `em` is the fluid `base` preset (17.3px at 769, 17.6px at 900, 18.6px from
   1259), so at 100% text the table starts at a 622px column, ~922px viewport.

   Only the orders list is made a container (`:has`): containment would otherwise change the
   other account pages' layout for nothing. The container's width is set by the shell, never by
   the table, so one width and one text size always give one format (rule 3a). */
.daylon-account .woocommerce-MyAccount-content:has(> .woocommerce-orders-table) {
	container: daylon-orders / inline-size;
}

/* The §8.1 card — one definition for every width that gets it (DAY-677). Two triggers:

   - the threshold above, from 769px up (§8.6 rule 3);
   - at 768px and below, at any text size (§8.6 rule 2). A container query cannot read the
     viewport, so this is written as "nothing stands beside the column": below 768px the column
     is the page less its gutters (32px at 390, 48px at 767), well inside 10rem of the
     viewport. From 768px the rail stands beside it and the column is 65% of the page (the
     parent theme's woocommerce.css, which outranks the shell rule above), at least 35% short.
     Where 10rem is more than that 35% — a large root size at 768–900px — the threshold already
     makes it cards, so this condition never decides above 768px (measured on staging, root 16
     and 32px, 769–1280px: the format is the threshold's at every width).

   WooCommerce's small-screen sheet is still loaded up to 768px and draws its own card on the
   same cells: it hides the row's `<th>` — the order number, which §8.1 makes the record's name —
   floats a «Fecha: » label and paints alternate rows and a border per cell. Every rule here
   names the cell by its class through the table's own two (0,4,2), above that sheet's
   `.woocommerce table.shop_table_responsive tr td` (0,2,3), so its card never shows through.
   The sheet's `text-align: right !important` on the cells is the alignment this card wants. */
@container daylon-orders (width < calc(25em + 180px)) or (width > calc(100vw - 10rem)) {
	.daylon-account table.woocommerce-orders-table.shop_table thead {
		display: none;
	}

	.daylon-account table.woocommerce-orders-table.shop_table,
	.daylon-account table.woocommerce-orders-table.shop_table tbody,
	.daylon-account table.woocommerce-orders-table.shop_table tr {
		display: block;
		width: 100%;
	}

	.daylon-account table.woocommerce-orders-table.shop_table tr {
		border: 1px solid var(--wp--preset--color--border-light);
		margin-bottom: var(--wp--preset--spacing--40);
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	}

	/* Label left, value right, one field per line. The label is each cell's `data-title` —
	   WooCommerce's own template prints it for exactly this — so there is no second,
	   hand-maintained copy of the column names (§8.1: "labels remain visible, values are not
	   identified by position alone"). `width: auto` undoes the table's 10.5em actions column.

	   The label floats and the value is the cell's own text, not a flex row: the total is a
	   price `<span>` followed by «para 1 artículo» as bare text, and a flex container makes those
	   two items and pushes them apart (seen at 390 in the first cut). `flow-root` holds the float
	   inside its own cell, so a long value wraps under its own label and never into the next. */
	.daylon-account table.woocommerce-orders-table.shop_table tr > .woocommerce-orders-table__cell {
		display: flow-root;
		width: auto;
		padding: var(--wp--preset--spacing--20) 0;
		border: none;
		background: none;
		text-align: right;
		overflow-wrap: anywhere;
	}

	.daylon-account table.woocommerce-orders-table.shop_table tr > .woocommerce-orders-table__cell::before {
		content: attr(data-title);
		float: left;
		margin-right: var(--wp--preset--spacing--40);
		font-weight: 600;
		text-align: left;
	}

	/* The actions under the fields, each the card's full width (§8.6, the card): a block, so
	   the buttons stack and keep the spacing the rules above give them. */
	.daylon-account table.woocommerce-orders-table.shop_table tr > .woocommerce-orders-table__cell-order-actions {
		display: block;
		padding-top: var(--wp--preset--spacing--30);
	}

	.daylon-account table.woocommerce-orders-table.shop_table tr > .woocommerce-orders-table__cell-order-actions::before {
		content: none;
	}
}

/* No orders (spec §8.2): the empty-state pattern the home page also uses — one flat
   sentence and one primary action, no box, so it cannot read as a second notice next to
   the verification banner above it (decision 5). Left-aligned inside the content column,
   unlike the home's full-width centred variant. */
.daylon-account-empty-orders {
	padding-block: var(--wp--preset--spacing--30) 0;
}

.daylon-account-empty-orders p {
	margin: 0 0 var(--wp--preset--spacing--40);
}

/* ---------------------------------------------------------------- addresses, spec §10 */

.daylon-account-addresses-purpose {
	margin-bottom: var(--wp--preset--spacing--50);
}

/* Billing then shipping, the checkout's order, side by side while each card keeps 16rem and
   one per row when it cannot — the content column decides, not the viewport: beside the
   account rail it is 424px at 768, where two cards would be 200px each. */
.daylon-account .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: var(--wp--preset--spacing--50);
}

/* WooCommerce's `.col2-set` is a float layout: a clearfix pseudo-element at each end and a
   48% width on each column. In a grid the two pseudo-elements are items too, so they took the
   first and last cells, billing landed in the second column with shipping under the first,
   and each card was 48% of its own cell — 184px at 1280, its title on three lines (DAY-321,
   F-24). */
.daylon-account .woocommerce-Addresses.col2-set::before,
.daylon-account .woocommerce-Addresses.col2-set::after {
	content: none;
}

.daylon-account .woocommerce-Addresses.col2-set .woocommerce-Address {
	float: none;
	width: auto;
	min-width: 0;
}

.daylon-account .woocommerce-Address-title h2 {
	overflow-wrap: break-word;
}

/* ---------------------------------------------------------------- one order, DAY-321 */

/* The billing box prints the buyer's email as one unbreakable word: at 320 a long address ran
   23px past the box's right edge (F-26). It breaks where it has to and stays whole. */
.daylon-account .woocommerce-customer-details address {
	overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- login, spec §6 */

.daylon-account-login-intro {
	margin-bottom: var(--wp--preset--spacing--50);
	max-width: 30em;
}

/* The password-reset page's return-to-login link (spec §6.2): quiet, the same treatment as
   the 404's "Volver al inicio" — present in every state of the page, never competing with
   the submit. */
.daylon-account-reset-return {
	margin-top: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--small);
}

.daylon-account-reset-return a {
	color: var(--wp--preset--color--secondary);
	display: inline-flex;
	min-height: 44px;
	align-items: center;
}

/* ---------------------------------------------------------------- the third failed login, DAY-526
   «Login: the third failed attempt» spec v2 §4, §9. The block daylon-core prints in the login
   column's place. The reset form stands on the card the login form stood on (WooCommerce's
   radius, the parent theme's ground and padding), so the column keeps its shape; the heading
   and the button lead, T6 and the contact line are quiet, like the return link above. */

.daylon-login-paused--account .daylon-login-paused__body {
	max-width: 30em;
}

.daylon-login-paused--account .daylon-login-paused__form {
	margin: var(--wp--preset--spacing--50) 0;
	padding: var(--wp--preset--spacing--medium);
	border-radius: 5px;
	background: var(--wp--preset--color--tertiary);
	font-size: var(--wp--preset--font-size--small);
}

.daylon-login-paused--account .daylon-login-paused__form > p:last-of-type {
	margin-bottom: 0;
}

.daylon-login-paused--account .daylon-login-paused__later,
.daylon-login-paused--account .daylon-login-paused__contact {
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--small);
}

.daylon-login-paused--account .daylon-login-paused__contact a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* The heading T2 (S3) and the error notice (S1 / S2) are focused by script after a failed post
   (§9, daylon-core's login-paused-focus.js). Programmatic focus matches :focus-visible, so the
   theme's own ring (style.css) shows on them: nothing to add here. */

/* The help mark beside the login's verification-code label. The security plugin's script
   builds it as a dashicons glyph; dashicons is not loaded here, because core's stylesheet
   embeds the font as a data: URI and `font-src 'self'` refuses it (DAY-307, docs/csp.md §6).
   The same mark, drawn: a data: SVG as a mask is an image, which the policy allows. */
.wfls-2fa-code-help .dashicons-editor-help {
	display: inline-block;
	width: 20px;
	height: 20px;
	vertical-align: top;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cmask id='m'%3E%3Crect width='20' height='20' fill='%23fff'/%3E%3Cpath d='M7.5 7.9a2.5 2.5 0 1 1 3.8 2.1c-.8.5-1.3 1-1.3 1.9' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='14.6' r='1.05'/%3E%3C/mask%3E%3Ccircle cx='10' cy='10' r='8' mask='url(%23m)'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cmask id='m'%3E%3Crect width='20' height='20' fill='%23fff'/%3E%3Cpath d='M7.5 7.9a2.5 2.5 0 1 1 3.8 2.1c-.8.5-1.3 1-1.3 1.9' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='14.6' r='1.05'/%3E%3C/mask%3E%3Ccircle cx='10' cy='10' r='8' mask='url(%23m)'/%3E%3C/svg%3E") center / contain no-repeat;
}

.wfls-2fa-code-help .dashicons-editor-help::before {
	content: none;
}

/* The two-step verification screen's icons (DAY-309, docs/csp.md §6). The security plugin
   draws them with FontAwesome and dashicons, both embedded in their stylesheets as data: fonts,
   which `font-src 'self'` refuses; on this screen those stylesheets are not loaded
   (inc/account.php). The seven glyphs the screen uses, drawn the same way as the help mark
   above. Keyed off the body class, not the content column: the plugin moves its modals to the
   end of the body. Every one is decorative — each sits beside its own text or heading. */
.daylon-account .wfls-fa,
.daylon-account .dashicons-download {
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
	background-color: currentColor;
	-webkit-mask: center / contain no-repeat;
	mask: center / contain no-repeat;
}

.daylon-account .dashicons-download {
	width: 20px;
	height: 20px;
	vertical-align: middle;
}

.daylon-account .wfls-fa::before,
.daylon-account .dashicons-download::before {
	content: none;
}

.daylon-account .wfls-fa-check-circle {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 1a9 9 0 1 0 0 18 9 9 0 0 0 0-18zm4.7 6.7-5.5 5.6a1 1 0 0 1-1.4 0l-2.5-2.5a1 1 0 0 1 1.4-1.4l1.8 1.8 4.8-4.9a1 1 0 0 1 1.4 1.4z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 1a9 9 0 1 0 0 18 9 9 0 0 0 0-18zm4.7 6.7-5.5 5.6a1 1 0 0 1-1.4 0l-2.5-2.5a1 1 0 0 1 1.4-1.4l1.8 1.8 4.8-4.9a1 1 0 0 1 1.4 1.4z'/%3E%3C/svg%3E");
}

.daylon-account .wfls-fa-times-circle {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 1a9 9 0 1 0 0 18 9 9 0 0 0 0-18zm3.5 11.1a1 1 0 0 1-1.4 1.4L10 11.4l-2.1 2.1a1 1 0 0 1-1.4-1.4L8.6 10 6.5 7.9a1 1 0 0 1 1.4-1.4L10 8.6l2.1-2.1a1 1 0 0 1 1.4 1.4L11.4 10z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 1a9 9 0 1 0 0 18 9 9 0 0 0 0-18zm3.5 11.1a1 1 0 0 1-1.4 1.4L10 11.4l-2.1 2.1a1 1 0 0 1-1.4-1.4L8.6 10 6.5 7.9a1 1 0 0 1 1.4-1.4L10 8.6l2.1-2.1a1 1 0 0 1 1.4 1.4L11.4 10z'/%3E%3C/svg%3E");
}

.daylon-account .wfls-fa-key {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6.5' cy='13.5' r='3.5'/%3E%3Cpath d='M9.2 10.8 17 3m-2.5 2.5L17 8m-5-.1 2 2'/%3E%3C/g%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6.5' cy='13.5' r='3.5'/%3E%3Cpath d='M9.2 10.8 17 3m-2.5 2.5L17 8m-5-.1 2 2'/%3E%3C/g%3E%3C/svg%3E");
}

.daylon-account .wfls-fa-qrcode {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M2 2h7v7H2zm2 2v3h3V4zm7-2h7v7h-7zm2 2v3h3V4zM2 11h7v7H2zm2 2v3h3v-3z'/%3E%3Cpath d='M11 11h3v3h-3zm4 0h3v2h-3zm0 4h3v3h-3zm-4 0h2v3h-2z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M2 2h7v7H2zm2 2v3h3V4zm7-2h7v7h-7zm2 2v3h3V4zM2 11h7v7H2zm2 2v3h3v-3z'/%3E%3Cpath d='M11 11h3v3h-3zm4 0h3v2h-3zm0 4h3v3h-3zm-4 0h2v3h-2z'/%3E%3C/svg%3E");
}

.daylon-account .wfls-fa-mobile {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M7 1h6a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2zm0 3v11h6V4zm3 12.1a.9.9 0 1 0 0 1.8.9.9 0 0 0 0-1.8z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M7 1h6a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2zm0 3v11h6V4zm3 12.1a.9.9 0 1 0 0 1.8.9.9 0 0 0 0-1.8z'/%3E%3C/svg%3E");
}

.daylon-account .wfls-fa-lock {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M6 8V6a4 4 0 0 1 8 0v2h1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1zm2 0h4V6a2 2 0 0 0-4 0z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M6 8V6a4 4 0 0 1 8 0v2h1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1zm2 0h4V6a2 2 0 0 0-4 0z'/%3E%3C/svg%3E");
}

.daylon-account .dashicons-download {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M9 2h2v7h3l-4 4.5L6 9h3zM3 15h14v2H3z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M9 2h2v7h3l-4 4.5L6 9h3zM3 15h14v2H3z'/%3E%3C/svg%3E");
}

/* The links around the two-step verification screen keep the shop's colour (DAY-347). The
   security plugin's management stylesheet, loaded on this view only (inc/account.php), opens
   with a bare `a { color }`: it ties with the theme's own link rule on specificity and wins on
   order, so the account menu, «Mi cuenta» in the header, the logo link and the skip link all
   turned the plugin's blue here and nowhere else.
   Two type selectors and nothing else that counts: enough to out-rank the plugin's one, and
   still below the theme's hover colour (a class's worth) and every rule that names a link by
   class — which is why the page and its regions sit inside `:where()`. Named regions, not
   «everything but the content»: the screen's own links are the rule below. */
body a:where(:not(.wp-element-button)):where(.daylon-account--security :is(.skip-link, header a, footer a, .woocommerce-MyAccount-navigation a)) {
	color: var(--wp--preset--color--primary);
}

/* The screen's own links, icons and buttons, in the shop's colours (DAY-325, point 1): the same
   stylesheet painted every one of them its own blue. Colour only — the plugin's grey card, its
   layout and its type are left as they are, by the human's decision (2026-10-07).
   The screen and the dialog are named by id because the plugin names its dialog by id too: its
   modals are templates in the screen, cloned into `#wfls-standalone-modal` at the end of the
   body, and styled there with rules an id's worth strong, in a stylesheet that loads after this
   one. The plain links keep the weight of the rule above, for the same reason; a button is a
   link here too, and is left to its own rules below. */
body a:where(:not(.wp-element-button, .wfls-btn)):where(.daylon-account--security :is(#wfls-management-embedded, #wfls-standalone-modal) a) {
	color: var(--wp--preset--color--primary);
}

body.daylon-account--security .wfls-two-factor-card-title-icon {
	color: var(--wp--preset--color--primary);
}

/* The quiet button is the account's outline («Desistir», above) and the filled one is the
   theme's button, hover included. Each rule names no state, so it holds in all of them: the
   plugin restates its blue for hover, focus and active, one rule each. */
body.daylon-account--security :is(#wfls-management-embedded, #wfls-standalone-modal) .wfls-btn.wfls-btn-default {
	background-color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

body.daylon-account--security :is(#wfls-management-embedded, #wfls-standalone-modal) .wfls-btn.wfls-btn-default:not(.wfls-disabled):is(:hover, :focus, :active) {
	background-color: var(--wp--preset--color--primary-accent);
}

body.daylon-account--security :is(#wfls-management-embedded, #wfls-standalone-modal) .wfls-btn.wfls-btn-primary {
	background-color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

body.daylon-account--security :is(#wfls-management-embedded, #wfls-standalone-modal) .wfls-btn.wfls-btn-primary:not(.wfls-disabled):is(:hover, :focus, :active) {
	background-color: var(--wp--preset--color--primary-alt);
	border-color: var(--wp--preset--color--primary-alt);
}

/* Not available yet — «Activar» until the code is typed. The plugin greys the quiet one and
   turns its border blue under the pointer; the filled one it only fades. Both are muted here,
   and stay so in every state. Its own `opacity` and `not-allowed` cursor still apply. */
body.daylon-account--security :is(#wfls-management-embedded, #wfls-standalone-modal) .wfls-btn.wfls-btn-default.wfls-disabled {
	border-color: var(--wp--preset--color--border-light);
	color: var(--wp--preset--color--secondary);
}

body.daylon-account--security :is(#wfls-management-embedded, #wfls-standalone-modal) .wfls-btn.wfls-btn-primary.wfls-disabled {
	background-color: var(--wp--preset--color--border);
	border-color: var(--wp--preset--color--border);
}

/* ---------------------------------------------------------------- targets, spec §14 */

.daylon-account input[type="text"],
.daylon-account input[type="email"],
.daylon-account input[type="password"],
.daylon-account input[type="tel"],
.daylon-account select,
.daylon-account .button {
	min-height: 44px;
}

/* ---------------------------------------------------------------- online withdrawal, DAY-311
   "Desistimiento online" spec v2 §3, §5. One column at the account forms' measure. */

.daylon-withdrawal {
	max-width: 680px;
}

/* The form stands on the card the other account forms stand on (DAY-325, point 2): the parent
   theme draws it for «Detalles de la cuenta» and the addresses by naming their classes, and
   this form is not one of them — it was the only bare form in the account. The same ground,
   padding and corners, in the parent's own tokens. The form step only: the review step's form
   holds two buttons and nothing else. */
[data-daylon-withdrawal="form"] .woocommerce-OrderWithdrawalForm {
	padding: var(--wp--preset--spacing--large);
	border-radius: 5px;
	background: var(--wp--preset--color--tertiary);
}

/* Focused by script on the review and confirmation states (§6): a heading is not a control,
   so the ring that says "you are here now" is drawn once and not on every later click. */
/* The page's own title block is taken off this page (inc/account.php) and the template prints
   the H1 inside the content, where it met two things the other account pages' H1 does not: the
   browser's own heading margins, and the block gap that follows the now-empty title group. On
   staging it stood 63px lower at 1280 and 45px lower at 390 (DAY-314). Pulled back by exactly
   that gap, with the same gap under it, it is where «Mi cuenta» is on every other screen. */
.daylon-withdrawal__title {
	margin-block: calc(-1 * var(--wp--style--block-gap)) var(--wp--style--block-gap);
}

.daylon-withdrawal__title:focus {
	outline: none;
}

.daylon-withdrawal__title:focus-visible {
	outline: 2px solid var(--wp--preset--color--main);
	outline-offset: 4px;
}

/* The step indicator is text and wraps rather than shrinks (§5). */
.daylon-withdrawal__steps {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	margin: 0 0 var(--wp--preset--spacing--50);
	padding: 0;
	list-style-position: inside;
}

.daylon-withdrawal__steps [aria-current="step"] {
	font-weight: 600;
}

.daylon-withdrawal__hint {
	display: block;
	margin-top: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
}

/* `display: block` above outranks the browser's own rule for `hidden`: the garments hint showed
   under «Detalles adicionales (opcional)», where the spec has no hint (§9.1, W4; DAY-314). */
.daylon-withdrawal__hint[hidden] {
	display: none;
}

/* Nombre and Apellidos stack below 768px (§5): WooCommerce floats them at 47% at every width,
   which left two 122px inputs side by side at 320. */
@media (max-width: 767px) {
	.daylon-account .daylon-withdrawal .form-row-first,
	.daylon-account .daylon-withdrawal .form-row-last {
		float: none;
		width: 100%;
	}
}

/* The cookie banner (§4, DAY-314). style.css already keeps a focused control out from under it
   with `scroll-padding-bottom`, but only just: the control lands flush on the banner's top edge
   (0px measured at 768), its focus ring runs underneath, and the message and hint below a field
   stay covered. The margin is what a field carries with it — its error and a two-line hint. */
.daylon-withdrawal :is(a, button, input) {
	scroll-margin-bottom: 1rem;
}

.daylon-withdrawal :is(.input-text, .input-radio) {
	scroll-margin-bottom: 5rem;
}

/* Each option is a 44px target, by padding and not by the glyph alone (§6). Named through the
   form and its row: under the class alone WooCommerce's `.woocommerce form .form-row label`
   kept the label `display: block`, so the row was 44px tall but never a flex row, and the glyph
   sat at its top edge instead of beside its text (measured on staging, DAY-325). */
.daylon-withdrawal form .form-row label.daylon-withdrawal__radio {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	min-height: 44px;
}

/* The glyph itself was the browser's 13px (DAY-325, point 2): the row was a 44px target and
   looked like nothing to press. 24px, in the shop's colour; WooCommerce's margins would set it
   off centre in the row, and the row's gap already spaces it. */
.daylon-withdrawal form .form-row .daylon-withdrawal__radio .input-radio {
	flex: none;
	width: 24px;
	height: 24px;
	margin: 0;
	accent-color: var(--wp--preset--color--primary);
}

.daylon-withdrawal fieldset:focus {
	outline: 2px solid var(--wp--preset--color--main);
	outline-offset: 2px;
}

/* Long names and garment lists wrap, in the form and in the review (§4). */
.daylon-withdrawal__review dd {
	margin: 0 0 var(--wp--preset--spacing--30);
	overflow-wrap: anywhere;
}

.daylon-withdrawal__review dt {
	font-weight: 600;
}

.daylon-withdrawal__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
}

.daylon-withdrawal__actions .button {
	min-height: 48px;
}

/* Below 768px the buttons take the full width, «Confirmar» above «Editar» (§5). */
@media (max-width: 767px) {
	.daylon-withdrawal__actions {
		flex-direction: column;
	}

	.daylon-withdrawal__actions .button {
		width: 100%;
	}
}

/* ---------------------------------------------------------------- her own order's garments, DAY-496
   "Desistimiento online" spec v5 §12.3–§12.8: the fixed order line, the one-garment line and
   the list a signed-in buyer ticks. */

.daylon-withdrawal__order > span {
	display: block;
}

.daylon-withdrawal__order-label {
	font-weight: 600;
}

.daylon-withdrawal__order-other {
	margin-top: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
}

/* «Elige otro pedido en Mi cuenta» is a 44px target by its box (§8). */
.daylon-withdrawal__order-other a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.daylon-withdrawal-list[hidden],
.daylon-withdrawal [data-daylon-withdrawal-details-row][hidden] {
	display: none;
}

/* The group reads as the radios' group does: WooCommerce takes the browser's frame off that one
   by its own class, which this one does not carry. `min-width: 0` lets a long name wrap instead
   of widening the fieldset to it. */
.daylon-withdrawal-list {
	min-width: 0;
	border: 0;
}

.daylon-withdrawal-list legend {
	padding: 0;
}

/* The list grows with the page: no inner scroll box, which would trap touch on a phone (§12.5). */
.daylon-withdrawal-list__rows {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0;
	list-style: none;
}

/* A ticked row reads as chosen by more than colour (§12.4): the box's own check mark, and a
   border twice as heavy. The negative margin gives back the extra pixel so nothing moves. */
.daylon-withdrawal-line {
	--daylon-line-pad: var(--wp--preset--spacing--30);
	--daylon-line-photo: 56px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 5px;
	background: var(--wp--preset--color--base);
}

.daylon-withdrawal-line:has(.daylon-withdrawal-line__box:checked) {
	margin: -1px;
	border: 2px solid var(--wp--preset--color--primary);
}

/* The whole row is the label, at least 44px tall across its width (§12.3, §12.8). Named
   through the form and its row, as the radios are: WooCommerce's `.woocommerce form .form-row
   label` would otherwise keep it `display: block`. */
.daylon-withdrawal form .form-row label.daylon-withdrawal-line__main {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	min-height: 44px;
	margin: 0;
	padding: var(--wp--preset--spacing--20) var(--daylon-line-pad);
	cursor: pointer;
}

.daylon-withdrawal form .form-row .daylon-withdrawal-line__box {
	flex: none;
	width: 24px;
	height: 24px;
	margin: 0;
	accent-color: var(--wp--preset--color--primary);
}

.daylon-withdrawal-line__photo {
	flex: none;
	width: var(--daylon-line-photo);
	height: var(--daylon-line-photo);
	border-radius: 3px;
	object-fit: cover;
}

/* Long names wrap, never truncate (§12.6). */
.daylon-withdrawal-line__name {
	flex: 1;
	min-width: 0;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

/* The quantity hangs off its row, under the name, in the text column — at 320 too (§12.6):
   indented by the box (and the photo, when there is one) and the gaps after them. */
.daylon-withdrawal-line__units {
	padding: 0 var(--daylon-line-pad) var(--wp--preset--spacing--30) calc(var(--daylon-line-pad) + 24px + var(--wp--preset--spacing--20));
}

.daylon-withdrawal-line--photo .daylon-withdrawal-line__units {
	padding-left: calc(var(--daylon-line-pad) + 24px + var(--daylon-line-photo) + 2 * var(--wp--preset--spacing--20));
}

.daylon-withdrawal form .form-row .daylon-withdrawal-line__units label {
	display: block;
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
}

.daylon-withdrawal-line__units select {
	width: 100%;
	max-width: 16rem;
}

.daylon-withdrawal-line__units .daylon-withdrawal__hint {
	line-height: 1.4;
}

/* At a phone's width the form's card leaves the row about 210px: the photo and the row's own
   padding give way so the text column — and the select in it — keeps room to read «2 unidades»
   (§12.6, 320px: photo, box and text still on one row). */
@media (max-width: 479px) {
	.daylon-withdrawal-line {
		--daylon-line-pad: var(--wp--preset--spacing--20);
		--daylon-line-photo: 40px;
	}

	/* The parent's 43px for a 16px arrow clipped «2 unidades» to «2 unidade» at 320 (seen on
	   staging); 2rem still clears the arrow. Named through the form and its row to outrank it. */
	.daylon-withdrawal form .form-row .daylon-withdrawal-line__units select {
		padding-right: 2rem;
		font-size: var(--wp--preset--font-size--small);
	}
}

/* The order page's one way to the withdrawal form: a block of its own after the billing
   address, set apart so it does not read as a line of the address, and tertiary — a text link,
   never a button ("Withdrawal entry point on the order page" spec v2 §5; DAY-377). */
.daylon-account .daylon-order-withdrawal {
	margin-top: var(--wp--preset--spacing--60);
	margin-bottom: 0;
}

/* The link is a 44px target by its box, not by its type size (§8). */
.daylon-account .daylon-order-withdrawal a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	overflow-wrap: anywhere;
}

.daylon-order-withdrawal__hint {
	display: block;
	font-size: var(--wp--preset--font-size--small);
}

/* ---------------------------------------------------------------- account created, DAY-380
   "Account creation after payment and its confirmation" spec v2 §3. The page is My account's
   own — header, footer, white ground, container and H1 are already there — so this is only
   the two lines under the title: a text block of at most 560px on the container's edge, the
   one action, and the way out as a quiet link. Breakpoint: 640, the page container's (§3.6). */

.daylon-account-created {
	max-width: 560px;
}

.daylon-account-created__lead {
	margin: 0 0 var(--wp--preset--spacing--medium);
}

/* Stacked on a phone: the button across the column, the link centred under it. */
.daylon-account-created__actions {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
}

.daylon-account-created__order,
.daylon-account-created__continue {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	text-align: center;
}

.daylon-account-created__order {
	min-height: 48px;
	text-decoration: none;
}

.daylon-account-created__continue {
	min-height: 44px;
	color: var(--wp--preset--color--main);
}

@media (min-width: 640px) {
	.daylon-account-created__actions {
		flex-flow: row wrap;
		align-items: center;
		gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	}
}