/* ============================================================
   CHECKOUT · ORDER-RECEIVED · MY ACCOUNT — post-cart surfaces
   (Phase 28). Restyles the WooCommerce block Checkout
   (woocommerce/checkout + inner blocks), the Order Confirmation
   template, and the My Account shortcode UI to match the
   Vendaval design language. All visual values come from design
   tokens (var(--wp--preset--*) / var(--wp--custom--*)) with the
   vendaval fallback baked in, so the file re-skins per client.

   NOTE: this file is intentionally UNLAYERED. WooCommerce ships
   its checkout/cart/account CSS unlayered, and unlayered rules
   always win over any @layer. To reliably restyle WC we must
   compete in the unlayered cascade (and lean on specificity by
   scoping under .woo-sil7en-checkout / .woo-sil7en-thankyou /
   .woo-sil7en-account), NOT from a @layer. Same precedent as the
   cart in base.css.

   Loaded only on checkout / cart / account pages — see
   woo_sil7en_enqueue_checkout_assets() in functions.php.
   ============================================================ */

/* ============================================================
   1 · CHECKOUT CHROME (distraction-free header + footer)
   templates/page-checkout.html — .is-checkout-header /
   .is-checkout-footer. Minimal: centered logo, secure note,
   back-to-cart link; NO main navigation.
   ============================================================ */

.woo-sil7en-checkout-chrome {
	padding-block: var(--wp--preset--spacing--sm, 1rem);
	padding-inline: var(--wp--preset--spacing--md, 1.5rem);
	border-block-end: 1px solid var(--wp--preset--color--border, #e6e3de);
	background: var(--wp--preset--color--base, #ffffff);
}

.woo-sil7en-checkout-chrome--footer {
	margin-block-start: var(--wp--preset--spacing--xl, 3rem);
	border-block-end: 0;
	border-block-start: 1px solid var(--wp--preset--color--border, #e6e3de);
	background: var(--wp--preset--color--surface, #f6f5f3);
}

.woo-sil7en-checkout-chrome__inner {
	max-inline-size: var(--wp--style--global--wide-size, 78rem);
	margin-inline: auto;
	gap: var(--wp--preset--spacing--md, 1.5rem);
}

/* Centered logo: the back link and secure note flank it on desktop. */
.woo-sil7en-checkout-chrome__logo {
	margin: 0;
	flex: 0 0 auto;
}

.woo-sil7en-checkout-chrome__logo img {
	display: block;
	block-size: auto;
}

.woo-sil7en-checkout-chrome__back {
	margin: 0;
	flex: 1 1 0;
	font-family: var(--wp--preset--font-family--sans, "Poppins", sans-serif);
	font-size: var(--wp--preset--font-size--sm, 0.9375rem);
}

.woo-sil7en-checkout-chrome__back a {
	color: var(--wp--preset--color--muted, #6f6b64);
	text-decoration: none;
}

.woo-sil7en-checkout-chrome__back a:hover,
.woo-sil7en-checkout-chrome__back a:focus-visible {
	color: var(--wp--preset--color--primary, #531099);
}

.woo-sil7en-checkout-chrome__secure {
	margin: 0;
	flex: 1 1 0;
	text-align: end;
	font-family: var(--wp--preset--font-family--sans, "Poppins", sans-serif);
	font-size: var(--wp--preset--font-size--sm, 0.9375rem);
	font-weight: 600;
	color: var(--wp--preset--color--success, #1a7f4b);
	white-space: nowrap;
}

.woo-sil7en-checkout-chrome__secure-icon {
	margin-inline-end: 0.25em;
}

.woo-sil7en-checkout-chrome__note,
.woo-sil7en-checkout-chrome__copyright {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans, "Poppins", sans-serif);
	font-size: var(--wp--preset--font-size--sm, 0.9375rem);
	color: var(--wp--preset--color--muted, #6f6b64);
}

/* Footer chrome: a calm centered stack (note · copyright · maker credit) rather
   than a spread row, so the credit reads as a centered sign-off. */
.woo-sil7en-checkout-chrome--footer .woo-sil7en-checkout-chrome__inner {
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.4rem;
}

/* Mobile: stack the three chrome items, keep the logo centered. */
@media (max-width: 47.999rem) {
	.woo-sil7en-checkout-chrome__inner {
		flex-wrap: wrap;
		justify-content: center;
		text-align: center;
	}

	.woo-sil7en-checkout-chrome__back,
	.woo-sil7en-checkout-chrome__secure {
		flex: 1 1 100%;
		text-align: center;
	}

	.woo-sil7en-checkout-chrome__logo {
		order: -1;
		flex-basis: 100%;
		text-align: center;
	}

	.woo-sil7en-checkout-chrome__logo img {
		margin-inline: auto;
	}
}

/* ============================================================
   2 · CHECKOUT — editorial page head
   ============================================================ */

.woo-sil7en-checkout__head {
	margin-block: var(--wp--preset--spacing--lg, 2.5rem) var(--wp--preset--spacing--xl, 3rem);
}

.woo-sil7en-checkout__eyebrow {
	margin: 0 0 var(--wp--preset--spacing--xs, 0.5rem);
	font-family: var(--wp--preset--font-family--sans, "Poppins", sans-serif);
	font-size: var(--wp--preset--font-size--xs, 0.8125rem);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary, #531099);
}

.woo-sil7en-checkout__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display, "Lora", Georgia, serif);
	font-size: var(--wp--preset--font-size--2xl, 2.75rem);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--contrast, #1a1714);
}

/* ============================================================
   3 · CHECKOUT — two-column layout, sticky order summary
   WC renders .wc-block-checkout__main (form) +
   .wc-block-checkout__sidebar (order summary). Base = single
   column (sidebar first so the summary leads on mobile); from
   the tablet breakpoint up, two columns with a sticky summary.
   ============================================================ */

.woo-sil7en-checkout .wc-block-checkout__form,
.woo-sil7en-checkout .wp-block-woocommerce-checkout {
	max-inline-size: var(--wp--style--global--wide-size, 78rem);
	margin-inline: auto;
}

@media (min-width: 48rem) {
	.woo-sil7en-checkout .wc-block-checkout {
		display: flex;
		flex-wrap: nowrap;
		gap: var(--wp--preset--spacing--xl, 3rem);
		align-items: start;
	}

	.woo-sil7en-checkout .wc-block-checkout__main {
		flex: 1 1 auto;
		min-inline-size: 0;
	}

	.woo-sil7en-checkout .wc-block-checkout__sidebar {
		flex: 0 0 36%;
		max-inline-size: 26rem;
		min-inline-size: 0;
		position: sticky;
		top: var(--wp--preset--spacing--md, 1.5rem);
		align-self: start;
	}
}

/* ============================================================
   4 · CHECKOUT — step headings (Contacto / Envío / Pago)
   ============================================================ */

.woo-sil7en-checkout .wc-block-components-checkout-step__title {
	font-family: var(--wp--preset--font-family--display, "Lora", Georgia, serif);
	font-size: var(--wp--preset--font-size--lg, 1.5rem);
	font-weight: 500;
	color: var(--wp--preset--color--contrast, #1a1714);
}

.woo-sil7en-checkout .wc-block-components-checkout-step__description {
	font-family: var(--wp--preset--font-family--sans, "Poppins", sans-serif);
	color: var(--wp--preset--color--muted, #6f6b64);
}

.woo-sil7en-checkout .wc-block-components-checkout-step {
	border-block-end: 1px solid var(--wp--preset--color--border, #e6e3de);
	padding-block-end: var(--wp--preset--spacing--lg, 2rem);
	margin-block-end: var(--wp--preset--spacing--lg, 2rem);
}

/* Numbered step badges in brand purple. */
.woo-sil7en-checkout .wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__title::before {
	color: var(--wp--preset--color--primary, #531099);
}

/* ============================================================
   5 · CHECKOUT — inputs, labels, selects (incl. región/comuna)
   WC text inputs are floating-label fields: a container with an
   <input> and a <label> that floats on focus/fill. Style the
   container border + the native <select> the same way so the
   Chilexpress región/comuna selects match the text fields.
   ============================================================ */

.woo-sil7en-checkout .wc-block-components-text-input,
.woo-sil7en-checkout .wc-block-components-select {
	font-family: var(--wp--preset--font-family--sans, "Poppins", sans-serif);
}

.woo-sil7en-checkout .wc-block-components-text-input input,
.woo-sil7en-checkout .wc-block-components-select .wc-block-components-select-input,
.woo-sil7en-checkout .wc-block-components-address-form select,
.woo-sil7en-checkout .wc-block-components-combobox input {
	border: 1px solid var(--wp--preset--color--border, #e6e3de);
	border-radius: var(--wp--custom--radius--md, 0.5rem);
	background: var(--wp--preset--color--base, #ffffff);
	color: var(--wp--preset--color--contrast, #1a1714);
	min-block-size: 3rem; /* >=44px tap target */
}

.woo-sil7en-checkout .wc-block-components-text-input input:focus,
.woo-sil7en-checkout .wc-block-components-select .wc-block-components-select-input:focus,
.woo-sil7en-checkout .wc-block-components-address-form select:focus,
.woo-sil7en-checkout .wc-block-components-combobox input:focus {
	border-color: var(--wp--preset--color--primary, #531099);
	outline: 2px solid var(--wp--preset--color--accent, #b07a1e);
	outline-offset: 1px;
}

/* Field labels (floating + the active/floated state). */
.woo-sil7en-checkout .wc-block-components-text-input label,
.woo-sil7en-checkout .wc-block-components-select label {
	color: var(--wp--preset--color--muted, #6f6b64);
}

.woo-sil7en-checkout .wc-block-components-text-input.is-active label,
.woo-sil7en-checkout .wc-block-components-select.is-active label {
	color: var(--wp--preset--color--primary, #531099);
}

/* Native dropdown affordance for the región/comuna selects. */
.woo-sil7en-checkout .wc-block-components-address-form select {
	appearance: none;
	padding-inline-end: 2.25rem;
	background-image: linear-gradient(45deg, transparent 50%, var(--wp--preset--color--muted, #6f6b64) 50%), linear-gradient(135deg, var(--wp--preset--color--muted, #6f6b64) 50%, transparent 50%);
	background-position: calc(100% - 1.1rem) center, calc(100% - 0.75rem) center;
	background-size: 0.4rem 0.4rem, 0.4rem 0.4rem;
	background-repeat: no-repeat;
}

/* Validation errors honor the danger token. */
.woo-sil7en-checkout .wc-block-components-validation-error {
	color: var(--wp--preset--color--danger, #c0362c);
}

.woo-sil7en-checkout .has-error input,
.woo-sil7en-checkout .has-error select {
	border-color: var(--wp--preset--color--danger, #c0362c);
}

/* ============================================================
   6 · CHECKOUT — shipping + payment radio rows
   ============================================================ */

.woo-sil7en-checkout .wc-block-components-radio-control__option {
	border: 1px solid var(--wp--preset--color--border, #e6e3de);
	border-radius: var(--wp--custom--radius--md, 0.5rem);
	padding: var(--wp--preset--spacing--sm, 1rem) var(--wp--preset--spacing--md, 1.5rem);
	/* The radio input is absolutely positioned at the inline-start; reserve room
	   for it so the label text never sits underneath the control. */
	padding-inline-start: 3rem;
	margin-block-end: var(--wp--preset--spacing--xs, 0.5rem);
}

.woo-sil7en-checkout .wc-block-components-radio-control__option-checked,
.woo-sil7en-checkout .wc-block-checkout__shipping-method-option--selected {
	border-color: var(--wp--preset--color--primary, #531099);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--primary, #531099);
	background: color-mix(in srgb, var(--wp--preset--color--primary, #531099) 4%, transparent);
}

.woo-sil7en-checkout .wc-block-components-radio-control__input:checked {
	accent-color: var(--wp--preset--color--primary, #531099);
}

.woo-sil7en-checkout .wc-block-components-radio-control__label {
	font-family: var(--wp--preset--font-family--sans, "Poppins", sans-serif);
	font-weight: 600;
	color: var(--wp--preset--color--contrast, #1a1714);
}

.woo-sil7en-checkout .wc-block-checkout__shipping-method-option {
	border: 1px solid var(--wp--preset--color--border, #e6e3de);
	border-radius: var(--wp--custom--radius--md, 0.5rem);
}

/* ============================================================
   7 · CHECKOUT — order summary card (sidebar)
   ============================================================ */

.woo-sil7en-checkout .wc-block-components-sidebar,
.woo-sil7en-checkout .wc-block-checkout__sidebar > .wc-block-components-panel,
.woo-sil7en-checkout .wp-block-woocommerce-checkout-order-summary-block {
	padding: var(--wp--preset--spacing--lg, 2rem);
	background: var(--wp--preset--color--surface, #f6f5f3);
	border: 1px solid var(--wp--preset--color--border, #e6e3de);
	border-radius: var(--wp--custom--radius--lg, 1rem);
}

.woo-sil7en-checkout .wc-block-components-totals-item__label {
	color: var(--wp--preset--color--muted, #6f6b64);
}

.woo-sil7en-checkout .wc-block-components-totals-item__value {
	font-weight: 600;
	color: var(--wp--preset--color--contrast, #1a1714);
}

/* Order-summary book covers: fixed cover ratio → zero CLS. */
.woo-sil7en-checkout .wc-block-components-order-summary-item__image img {
	border-radius: var(--wp--custom--radius--sm, 0.25rem);
	aspect-ratio: 2 / 3;
	object-fit: cover;
}

/* ============================================================
   8 · CHECKOUT — primary place-order button (brand purple)
   ============================================================ */

.woo-sil7en-checkout .wc-block-components-checkout-place-order-button,
.woo-sil7en-checkout .wc-block-checkout__actions .wc-block-components-button {
	width: 100%;
	min-block-size: 3.25rem;
	background: var(--wp--preset--color--primary, #531099);
	color: var(--wp--preset--color--primary-ink, #ffffff);
	border-radius: var(--wp--custom--radius--md, 0.5rem);
	font-family: var(--wp--preset--font-family--sans, "Poppins", sans-serif);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--md, 1.125rem);
}

.woo-sil7en-checkout .wc-block-components-checkout-place-order-button:hover,
.woo-sil7en-checkout .wc-block-checkout__actions .wc-block-components-button:hover {
	background: var(--wp--preset--color--primary-hover, #3f0b78);
}

.woo-sil7en-checkout .wc-block-components-checkout-place-order-button:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent, #b07a1e);
	outline-offset: 2px;
}

/* Coupon / secondary buttons: quiet outline, brand text. */
.woo-sil7en-checkout .wc-block-components-button.wc-block-components-button--outlined {
	color: var(--wp--preset--color--primary, #531099);
	border-color: var(--wp--preset--color--primary, #531099);
}

/* ============================================================
   9 · CHECKOUT — mobile: collapsible summary above the form
   The order summary leads on mobile (source order in markup is
   main-then-sidebar; pull the sidebar above the form with order).
   ============================================================ */

@media (max-width: 47.999rem) {
	.woo-sil7en-checkout .wc-block-checkout {
		display: flex;
		flex-direction: column;
	}

	.woo-sil7en-checkout .wc-block-checkout__sidebar {
		order: -1;
		margin-block-end: var(--wp--preset--spacing--lg, 2rem);
	}

	.woo-sil7en-checkout .wc-block-components-checkout-place-order-button,
	.woo-sil7en-checkout .wc-block-checkout__actions .wc-block-components-button {
		min-block-size: 3.5rem;
	}
}

/* ============================================================
   10 · CHECKOUT — motion (compositor-only, reduced-motion safe)
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
	.woo-sil7en-checkout .wc-block-components-checkout-place-order-button,
	.woo-sil7en-checkout .wc-block-checkout__actions .wc-block-components-button,
	.woo-sil7en-checkout .wc-block-components-radio-control__option,
	.woo-sil7en-checkout-chrome__back a {
		transition:
			background-color var(--wp--custom--motion--duration--fast, 150ms) var(--wp--custom--motion--ease--standard, cubic-bezier(0.2, 0, 0, 1)),
			border-color var(--wp--custom--motion--duration--fast, 150ms) var(--wp--custom--motion--ease--standard, cubic-bezier(0.2, 0, 0, 1)),
			color var(--wp--custom--motion--duration--fast, 150ms) var(--wp--custom--motion--ease--standard, cubic-bezier(0.2, 0, 0, 1));
	}

	.woo-sil7en-checkout .wc-block-components-checkout-place-order-button:active {
		transform: translateY(1px);
	}
}

/* ============================================================
   11 · ORDER-RECEIVED ("gracias") — templates/order-confirmation.html
   ============================================================ */

.woo-sil7en-thankyou {
	padding-block-end: var(--wp--preset--spacing--2xl, 4rem);
}

.woo-sil7en-thankyou__head {
	max-inline-size: 46rem;
	margin-inline: auto;
	padding-block: var(--wp--preset--spacing--xl, 3rem) var(--wp--preset--spacing--lg, 2.5rem);
	text-align: center;
}

.woo-sil7en-thankyou__eyebrow {
	margin: 0 0 var(--wp--preset--spacing--xs, 0.5rem);
	font-family: var(--wp--preset--font-family--sans, "Poppins", sans-serif);
	font-size: var(--wp--preset--font-size--xs, 0.8125rem);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--success, #1a7f4b);
}

.woo-sil7en-thankyou__check {
	display: inline-grid;
	place-items: center;
	inline-size: 1.5rem;
	block-size: 1.5rem;
	margin-inline-end: 0.35em;
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: var(--wp--preset--color--success, #1a7f4b);
	color: var(--wp--preset--color--base, #ffffff);
	font-size: var(--wp--preset--font-size--xs, 0.8125rem);
	vertical-align: middle;
}

.woo-sil7en-thankyou__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display, "Lora", Georgia, serif);
	font-size: var(--wp--preset--font-size--2xl, 2.75rem);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--contrast, #1a1714);
}

.woo-sil7en-thankyou__lead {
	margin: var(--wp--preset--spacing--xs, 0.75rem) auto 0;
	max-inline-size: 38rem;
	font-family: var(--wp--preset--font-family--sans, "Poppins", sans-serif);
	font-size: var(--wp--preset--font-size--md, 1.125rem);
	line-height: 1.6;
	color: var(--wp--preset--color--muted, #6f6b64);
}

/* Receipt panel: the WC summary/totals/addresses on a surface card. */
.woo-sil7en-thankyou__panel {
	max-inline-size: 52rem;
	margin-inline: auto;
	padding: var(--wp--preset--spacing--lg, 2rem);
	background: var(--wp--preset--color--surface, #f6f5f3);
	border: 1px solid var(--wp--preset--color--border, #e6e3de);
	border-radius: var(--wp--custom--radius--lg, 1rem);
}

.woo-sil7en-thankyou__panel .wc-block-order-confirmation-summary,
.woo-sil7en-thankyou__panel .woocommerce-order-overview {
	font-family: var(--wp--preset--font-family--sans, "Poppins", sans-serif);
	color: var(--wp--preset--color--contrast, #1a1714);
}

.woo-sil7en-thankyou__panel h2,
.woo-sil7en-thankyou__panel h3 {
	font-family: var(--wp--preset--font-family--display, "Lora", Georgia, serif);
	color: var(--wp--preset--color--contrast, #1a1714);
}

.woo-sil7en-thankyou__cta {
	margin-block-start: var(--wp--preset--spacing--xl, 3rem);
}

.woo-sil7en-thankyou__cta .wp-block-button__link {
	border-color: var(--wp--preset--color--primary, #531099);
	color: var(--wp--preset--color--primary, #531099);
	border-radius: var(--wp--custom--radius--md, 0.5rem);
}

/* ============================================================
   12 · MY ACCOUNT — templates/page-my-account-2.html
   WC [woocommerce_my_account] renders
   .woocommerce-MyAccount-navigation (nav: ul>li>a, current item
   marked aria-current="page") + .woocommerce-MyAccount-content.
   Desktop: sidebar nav + content. Mobile: nav stacks above.
   ============================================================ */

.woo-sil7en-account__head {
	margin-block: var(--wp--preset--spacing--lg, 2.5rem) var(--wp--preset--spacing--xl, 3rem);
}

.woo-sil7en-account__eyebrow {
	margin: 0 0 var(--wp--preset--spacing--xs, 0.5rem);
	font-family: var(--wp--preset--font-family--sans, "Poppins", sans-serif);
	font-size: var(--wp--preset--font-size--xs, 0.8125rem);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary, #531099);
}

.woo-sil7en-account__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display, "Lora", Georgia, serif);
	font-size: var(--wp--preset--font-size--2xl, 2.75rem);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--contrast, #1a1714);
}

.woo-sil7en-account__subtitle {
	margin: var(--wp--preset--spacing--xs, 0.5rem) 0 0;
	font-family: var(--wp--preset--font-family--sans, "Poppins", sans-serif);
	font-size: var(--wp--preset--font-size--md, 1.125rem);
	color: var(--wp--preset--color--muted, #6f6b64);
}

/* Two-column: sidebar nav + content. WC's .woocommerce wraps a (usually empty)
   .woocommerce-notices-wrapper + the nav + the content — three children. Placing
   them with named grid areas keeps the empty notices div from shoving the nav into
   column 2 and wrapping the content to a new row. Also widen past the constrained
   content-size so the dashboard has room (beats the layout cap by specificity). */
@media (min-width: 48rem) {
	.woo-sil7en-account .woocommerce {
		display: grid;
		grid-template-columns: 16rem minmax(0, 1fr);
		grid-template-areas:
			"notices notices"
			"nav     content";
		column-gap: var(--wp--preset--spacing--xl, 3rem);
		row-gap: var(--wp--preset--spacing--md, 1.5rem);
		align-items: start;
		max-width: var(--wp--style--global--wide-size, 75rem);
		margin-inline: auto;
	}

	.woo-sil7en-account .woocommerce-notices-wrapper {
		grid-area: notices;
	}

	.woo-sil7en-account .woocommerce-MyAccount-navigation {
		grid-area: nav;
	}

	.woo-sil7en-account .woocommerce-MyAccount-content {
		grid-area: content;
	}

	/* Widen the intro + dashboard past the constrained content-size so the
	   sidebar + content have room (beats the layout cap by specificity). */
	.woo-sil7en-account > .woo-sil7en-account__head,
	.woo-sil7en-account > .entry-content {
		max-width: var(--wp--style--global--wide-size, 75rem);
	}
}

/* Let the nav + content fill their grid cells — WC ships legacy float + percent
   widths that otherwise shrink them. */
.woo-sil7en-account .woocommerce-MyAccount-navigation,
.woo-sil7en-account .woocommerce-MyAccount-content {
	width: auto;
	max-width: none;
	float: none;
}

/* Sidebar/tabs navigation. */
.woo-sil7en-account .woocommerce-MyAccount-navigation {
	font-family: var(--wp--preset--font-family--sans, "Poppins", sans-serif);
}

/* Reset WC's default <li> margins/borders so the ul `gap` controls spacing
   (otherwise each item floats with ~50px of legacy whitespace). */
.woo-sil7en-account .woocommerce-MyAccount-navigation li {
	margin: 0;
	padding: 0;
	border: 0;
}

.woo-sil7en-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xs, 0.25rem);
}

.woo-sil7en-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: var(--wp--preset--spacing--xs, 0.75rem) var(--wp--preset--spacing--sm, 1rem);
	border-radius: var(--wp--custom--radius--md, 0.5rem);
	color: var(--wp--preset--color--contrast, #1a1714);
	text-decoration: none;
	font-weight: 500;
}

.woo-sil7en-account .woocommerce-MyAccount-navigation li a:hover,
.woo-sil7en-account .woocommerce-MyAccount-navigation li a:focus-visible {
	background: var(--wp--preset--color--surface, #f6f5f3);
	color: var(--wp--preset--color--primary, #531099);
}

.woo-sil7en-account .woocommerce-MyAccount-navigation li.is-active a,
.woo-sil7en-account .woocommerce-MyAccount-navigation li a[aria-current="page"] {
	background: var(--wp--preset--color--primary, #531099);
	color: var(--wp--preset--color--primary-ink, #ffffff);
}

/* Mobile: nav becomes a horizontal scrolling tab strip above content. */
@media (max-width: 47.999rem) {
	.woo-sil7en-account .woocommerce-MyAccount-navigation ul {
		flex-direction: row;
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: var(--wp--preset--spacing--xs, 0.5rem);
		padding-block-end: var(--wp--preset--spacing--xs, 0.5rem);
		margin-block-end: var(--wp--preset--spacing--md, 1.5rem);
	}

	.woo-sil7en-account .woocommerce-MyAccount-navigation li a {
		white-space: nowrap;
	}
}

/* Account content typography. */
.woo-sil7en-account .woocommerce-MyAccount-content {
	font-family: var(--wp--preset--font-family--sans, "Poppins", sans-serif);
	color: var(--wp--preset--color--contrast, #1a1714);
}

/* Orders table: hairline rows, readable money. */
.woo-sil7en-account .woocommerce-orders-table,
.woo-sil7en-account table.shop_table {
	width: 100%;
	border-collapse: collapse;
}

.woo-sil7en-account .woocommerce-orders-table th,
.woo-sil7en-account table.shop_table th {
	font-family: var(--wp--preset--font-family--sans, "Poppins", sans-serif);
	font-weight: 600;
	color: var(--wp--preset--color--muted, #6f6b64);
	text-align: start;
}

.woo-sil7en-account .woocommerce-orders-table td,
.woo-sil7en-account table.shop_table td {
	padding-block: var(--wp--preset--spacing--sm, 1rem);
	border-block-start: 1px solid var(--wp--preset--color--border, #e6e3de);
}

/* Addresses: card grid. */
.woo-sil7en-account .woocommerce-Addresses {
	display: grid;
	gap: var(--wp--preset--spacing--md, 1.5rem);
}

@media (min-width: 36rem) {
	.woo-sil7en-account .woocommerce-Addresses {
		grid-template-columns: 1fr 1fr;
	}
}

.woo-sil7en-account .woocommerce-Address {
	margin: 0;
	padding: var(--wp--preset--spacing--md, 1.5rem);
	background: var(--wp--preset--color--surface, #f6f5f3);
	border: 1px solid var(--wp--preset--color--border, #e6e3de);
	border-radius: var(--wp--custom--radius--lg, 1rem);
}

/* WC ships the address columns as float:left/right width:47% (`.woocommerce
   .col2-set .col-1`, specificity 0,3,0), so inside our grid each card filled only
   ~half its track and the headings wrapped per word. Override with higher
   specificity so each card fills its grid cell. */
.woo-sil7en-account .woocommerce-Addresses.col2-set .woocommerce-Address {
	float: none;
	width: auto;
}

/* WC's `.col2-set` adds clearfix `::before`/`::after`. On a grid container those
   become grid ITEMS, taking cells 1 and 4 and pushing the two cards into cells 2
   and 3 (a diagonal stagger). Drop them from the grid. */
.woo-sil7en-account .woocommerce-Addresses.col2-set::before,
.woo-sil7en-account .woocommerce-Addresses.col2-set::after {
	display: none;
}

/* Card heading + the un-italicised address block. */
.woo-sil7en-account .woocommerce-Address .woocommerce-Address-title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--xs, 0.5rem);
	margin-block-end: var(--wp--preset--spacing--sm, 1rem);
}

.woo-sil7en-account .woocommerce-Address h3 {
	margin: 0;
	font-size: var(--wp--preset--font-size--md, 1.2rem);
	font-weight: 500;
}

.woo-sil7en-account .woocommerce-Address address {
	font-style: normal;
	line-height: 1.6;
	color: var(--wp--preset--color--muted, #6f6b64);
}

/* Account headings + buttons in brand voice. */
.woo-sil7en-account .woocommerce-MyAccount-content h2,
.woo-sil7en-account .woocommerce-MyAccount-content h3 {
	font-family: var(--wp--preset--font-family--display, "Lora", Georgia, serif);
	color: var(--wp--preset--color--contrast, #1a1714);
}

.woo-sil7en-account .woocommerce-button,
.woo-sil7en-account .button,
.woo-sil7en-account input[type="submit"] {
	display: inline-block;
	padding: var(--wp--preset--spacing--xs, 0.75rem) var(--wp--preset--spacing--md, 1.5rem);
	min-block-size: 2.75rem;
	background: var(--wp--preset--color--primary, #531099);
	color: var(--wp--preset--color--primary-ink, #ffffff);
	border: 0;
	border-radius: var(--wp--custom--radius--md, 0.5rem);
	font-family: var(--wp--preset--font-family--sans, "Poppins", sans-serif);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.woo-sil7en-account .woocommerce-button:hover,
.woo-sil7en-account .button:hover,
.woo-sil7en-account input[type="submit"]:hover {
	background: var(--wp--preset--color--primary-hover, #3f0b78);
}

.woo-sil7en-account .woocommerce-button:focus-visible,
.woo-sil7en-account .button:focus-visible,
.woo-sil7en-account input[type="submit"]:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent, #b07a1e);
	outline-offset: 2px;
}

/* Account form fields match the checkout field language. */
.woo-sil7en-account .woocommerce-MyAccount-content input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.woo-sil7en-account .woocommerce-MyAccount-content select,
.woo-sil7en-account .woocommerce-MyAccount-content textarea {
	border: 1px solid var(--wp--preset--color--border, #e6e3de);
	border-radius: var(--wp--custom--radius--md, 0.5rem);
	background: var(--wp--preset--color--base, #ffffff);
	color: var(--wp--preset--color--contrast, #1a1714);
	min-block-size: 3rem;
	padding-inline: var(--wp--preset--spacing--sm, 0.75rem);
}

.woo-sil7en-account .woocommerce-MyAccount-content input:focus,
.woo-sil7en-account .woocommerce-MyAccount-content select:focus,
.woo-sil7en-account .woocommerce-MyAccount-content textarea:focus {
	border-color: var(--wp--preset--color--primary, #531099);
	outline: 2px solid var(--wp--preset--color--accent, #b07a1e);
	outline-offset: 1px;
}

/* ============================================================
   12 · CHECKOUT — identity refinements (Phase 28 polish)
   Numbered steps, sticky summary, serif summary identity, calmer
   rhythm. Goal: clear flow, brand identity, zero friction.
   ============================================================ */

/* Numbered steps: a brand-purple circle before each step heading so the
   buyer always knows where they are. CSS counter scoped to the form. */
.woo-sil7en-checkout .wc-block-checkout__main {
	counter-reset: wsco-step;
}

.woo-sil7en-checkout .wc-block-components-checkout-step__title {
	display: flex;
	align-items: center;
	gap: 0.65rem;
}

.woo-sil7en-checkout .wc-block-components-checkout-step__title::before {
	counter-increment: wsco-step;
	content: counter(wsco-step);
	flex: none;
	display: inline-grid;
	place-items: center;
	inline-size: 1.9rem;
	block-size: 1.9rem;
	border-radius: 50%;
	background: var(--wp--preset--color--primary, #531099);
	color: var(--wp--preset--color--primary-ink, #ffffff);
	font-family: var(--wp--preset--font-family--sans, "Poppins", sans-serif);
	font-size: var(--wp--preset--font-size--sm, 0.9375rem);
	font-weight: 600;
	line-height: 1;
}

/* Sticky order summary on desktop: the items + total stay in view while
   the buyer fills the form (reassurance, no scrolling back). */
@media (min-width: 48rem) {
	.woo-sil7en-checkout .wc-block-checkout__sidebar {
		position: sticky;
		top: var(--wp--preset--spacing--md, 1.5rem);
		align-self: start;
	}
}

/* Summary identity: serif heading + serif book titles, larger covers. */
.woo-sil7en-checkout .wc-block-components-checkout-order-summary__title,
.woo-sil7en-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-title {
	font-family: var(--wp--preset--font-family--display, "Lora", Georgia, serif);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--lg, 1.5rem);
}

.woo-sil7en-checkout .wc-block-components-order-summary-item__name {
	font-family: var(--wp--preset--font-family--display, "Lora", Georgia, serif);
	font-weight: 500;
}

.woo-sil7en-checkout .wc-block-components-order-summary-item__image,
.woo-sil7en-checkout .wc-block-components-order-summary-item__image img {
	inline-size: 3.25rem;
}

/* Emphatic grand total in brand purple. */
.woo-sil7en-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.woo-sil7en-checkout .wc-block-components-totals-item--total .wc-block-components-totals-item__value {
	color: var(--wp--preset--color--primary, #531099);
	font-size: var(--wp--preset--font-size--lg, 1.5rem);
	font-weight: 700;
}

/* Single payment radio (Webpay) reads as a clean selected card, not a
   lonely row — keep the brand reassurance. */
.woo-sil7en-checkout .wc-block-components-radio-control__label img {
	max-block-size: 1.5rem;
	inline-size: auto;
}

/* ============================================================
   13 · CHECKOUT — tighter summary padding + trust microcopy
   (Phase 28 polish)
   ============================================================ */

/* The summary was double-carded: the sidebar COLUMN (.wc-block-checkout__sidebar)
   AND the inner order-summary block each carried ~3rem padding + the same surface
   background, stacking to ~80px of inset before the list and squeezing the titles.
   Keep a SINGLE padded card (the column, tightened) and flatten the inner block. */
.woo-sil7en-checkout .wc-block-checkout__sidebar {
	padding: var(--wp--preset--spacing--sm, 1.25rem);
}

.woo-sil7en-checkout .wp-block-woocommerce-checkout-order-summary-block {
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
}

.woo-sil7en-checkout .wc-block-components-order-summary {
	padding-inline: 0;
}

/* Trust microcopy — reassurance at the two decision points. The WC checkout block
   gives no markup hook here, so this is generated content fed per-client from the
   client-config via CSS custom properties (set in woo_sil7en_enqueue_checkout_assets).
   Unset → `none` → the pseudo-element is not generated. */
.woo-sil7en-checkout .wp-block-woocommerce-checkout-order-summary-block::after {
	content: var(--wsl-checkout-trust, none);
	display: block;
	margin-block-start: var(--wp--preset--spacing--sm, 1rem);
	padding-block-start: var(--wp--preset--spacing--sm, 1rem);
	border-block-start: 1px solid var(--wp--preset--color--border, #e6e3de);
	font-family: var(--wp--preset--font-family--sans, "Poppins", sans-serif);
	font-size: var(--wp--preset--font-size--xs, 0.8125rem);
	line-height: 1.5;
	color: var(--wp--preset--color--muted, #6f6b64);
	text-align: center;
}

.woo-sil7en-checkout .wc-block-checkout__actions::after {
	content: var(--wsl-checkout-secure, none);
	display: block;
	width: 100%;
	margin-block-start: var(--wp--preset--spacing--xs, 0.75rem);
	font-family: var(--wp--preset--font-family--sans, "Poppins", sans-serif);
	font-size: var(--wp--preset--font-size--xs, 0.8125rem);
	line-height: 1.5;
	color: var(--wp--preset--color--muted, #6f6b64);
	text-align: center;
}

/* -------------------------------------------------------------------------- *
 *  Cart shipping highlight banner  ([woo_sil7en_cart_shipping_banner])        *
 *  Light, on-brand card: a delivery truck + the message + a "siete colores"  *
 *  (Chilean bird) that hops and flaps, with a soft sheen sweep. Re-skins via  *
 *  tokens; all motion gated behind prefers-reduced-motion.                    *
 * -------------------------------------------------------------------------- */
.woo-sil7en-cart-shipping {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1.05rem;
	margin-block: 1.4rem 1.7rem;
	padding: 1.05rem 1.5rem;
	overflow: hidden;
	isolation: isolate;
	border-radius: 1.6rem;
	background:
		radial-gradient(135% 165% at 91% 18%, color-mix(in srgb, var(--wp--preset--color--accent, #ffb703) 22%, transparent) 0%, transparent 52%),
		radial-gradient(120% 150% at 6% 100%, color-mix(in srgb, var(--wp--preset--color--primary, #00b8bf) 16%, transparent) 0%, transparent 46%),
		linear-gradient(108deg, color-mix(in srgb, var(--wp--preset--color--primary, #00b8bf) 13%, #fff) 0%, #ffffff 60%, color-mix(in srgb, var(--wp--preset--color--accent, #ffb703) 8%, #fff) 100%);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary, #00b8bf) 14%, #fff);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.85),
		0 2px 5px rgba(15, 42, 52, 0.05),
		0 20px 38px -22px color-mix(in srgb, var(--wp--preset--color--primary, #00b8bf) 55%, transparent);
}

/* Soft sheen sweeping left-to-right every few seconds. */
.woo-sil7en-cart-shipping::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	transform: translateX(-100%);
	background: linear-gradient(100deg, transparent 36%, rgba(255, 255, 255, 0.5) 50%, transparent 64%);
}

.woo-sil7en-cart-shipping__truck {
	position: relative;
	z-index: 1;
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	inline-size: 2.65rem;
	block-size: 2.65rem;
	border-radius: 50%;
	color: #fff;
	background: linear-gradient(145deg, var(--wp--preset--color--primary, #00b8bf), color-mix(in srgb, var(--wp--preset--color--primary, #00b8bf) 68%, #000));
	box-shadow: 0 6px 14px -4px color-mix(in srgb, var(--wp--preset--color--primary, #00b8bf) 75%, transparent);
}

.woo-sil7en-cart-shipping__truck svg {
	inline-size: 1.45rem;
	block-size: 1.45rem;
}

.woo-sil7en-cart-shipping__text {
	margin: 0;
	position: relative;
	z-index: 1;
	flex: 1 1 auto;
	min-inline-size: 0;
	font-weight: 650;
	font-size: var(--wp--preset--font-size--md, 1.0625rem);
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--primary-ink, var(--wp--preset--color--contrast, #14302f));
}

.woo-sil7en-cart-shipping__bird {
	position: relative;
	z-index: 1;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.woo-sil7en-bird {
	inline-size: 3.4rem;
	block-size: auto;
	filter: drop-shadow(0 4px 5px rgba(10, 28, 36, 0.2));
}

.woo-sil7en-bird .wsb-wing {
	transform-origin: 10% 58%;
	transform-box: fill-box;
}

@media (max-width: 480px) {
	.woo-sil7en-cart-shipping { gap: 0.7rem; padding: 0.85rem 1rem; }
	.woo-sil7en-bird { inline-size: 2.55rem; }
}

@media (prefers-reduced-motion: no-preference) {
	.woo-sil7en-cart-shipping::after { animation: woo-sil7en-ship-sheen 6s ease-in-out 1.4s infinite; }
	.woo-sil7en-cart-shipping__truck svg { animation: woo-sil7en-ship-drive 3s ease-in-out infinite; }
	.woo-sil7en-bird { animation: woo-sil7en-ship-hop 2.4s ease-in-out infinite; }
	.woo-sil7en-bird .wsb-wing { animation: woo-sil7en-ship-flap 0.85s ease-in-out infinite; }
}

@keyframes woo-sil7en-ship-sheen {
	0% { transform: translateX(-100%); }
	22%, 100% { transform: translateX(100%); }
}

@keyframes woo-sil7en-ship-drive {
	0%, 100% { transform: translateX(-1.5px); }
	50% { transform: translateX(1.5px); }
}

@keyframes woo-sil7en-ship-hop {
	0%, 100% { transform: translateY(0) rotate(0); }
	50% { transform: translateY(-3px) rotate(-3deg); }
}

@keyframes woo-sil7en-ship-flap {
	0%, 100% { transform: rotate(0); }
	50% { transform: rotate(-5deg); }
}

/* ============================================================
   12 · CART — assembly service upsell (prominent, actionable)
   Rendered by [woo_sil7en_cart_assembly] above the shipping banner.
   ============================================================ */

.woo-sil7en-cart-addon {
	display: flex;
	align-items: center;
	gap: 1.1rem;
	margin-block: 1.6rem 0.4rem;
	padding: 1.1rem 1.35rem;
	border-radius: 1.4rem;
	background:
		radial-gradient(120% 150% at 8% 0%, color-mix(in srgb, var(--wp--preset--color--primary, #00b8bf) 12%, transparent) 0%, transparent 50%),
		linear-gradient(106deg, color-mix(in srgb, var(--wp--preset--color--primary, #00b8bf) 9%, #fff) 0%, #ffffff 70%);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary, #00b8bf) 22%, #fff);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.85),
		0 18px 36px -24px color-mix(in srgb, var(--wp--preset--color--primary, #00b8bf) 55%, transparent);
}

.woo-sil7en-cart-addon__icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: color-mix(in srgb, var(--wp--preset--color--primary, #00b8bf) 14%, #fff);
	color: var(--wp--preset--color--primary, #00b8bf);
}

.woo-sil7en-cart-addon__icon svg {
	width: 1.7rem;
	height: 1.7rem;
}

.woo-sil7en-cart-addon__body {
	flex: 1 1 auto;
	min-width: 0;
}

.woo-sil7en-cart-addon__eyebrow {
	margin: 0;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary, #00b8bf);
}

.woo-sil7en-cart-addon__title {
	margin: 0.1rem 0 0;
	font-family: var(--wp--preset--font-family--sans, "Poppins", sans-serif);
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--wp--preset--color--contrast, #1a1714);
	line-height: 1.25;
}

.woo-sil7en-cart-addon__text {
	margin: 0.2rem 0 0;
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted, #6f6b64);
	line-height: 1.35;
}

.woo-sil7en-cart-addon__action {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.45rem;
}

.woo-sil7en-cart-addon__price {
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--wp--preset--color--contrast, #1a1714);
	white-space: nowrap;
}

.woo-sil7en-cart-addon__price::before {
	content: "+ ";
	color: var(--wp--preset--color--primary, #00b8bf);
}

.woo-sil7en-cart-addon__add {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.55rem 1.25rem;
	border-radius: 999px;
	background: var(--wp--preset--color--contrast, #1a1714);
	color: #fff;
	font-weight: 600;
	font-size: 0.92rem;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.woo-sil7en-cart-addon__add-plus {
	font-size: 1.05em;
	line-height: 1;
}

.woo-sil7en-cart-addon__add:hover,
.woo-sil7en-cart-addon__add:focus-visible {
	background: var(--wp--preset--color--primary, #00b8bf);
	color: var(--wp--preset--color--primary-ink, #fff);
}

.woo-sil7en-cart-addon__add:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary, #00b8bf);
	outline-offset: 2px;
}

.woo-sil7en-cart-addon.is-adding {
	opacity: 0.7;
}

.woo-sil7en-cart-addon.is-added {
	border-color: color-mix(in srgb, #1a7f4b 45%, #fff);
}

.woo-sil7en-cart-addon.is-added .woo-sil7en-cart-addon__add {
	background: #1a7f4b;
	pointer-events: none;
}

.woo-sil7en-cart-addon.is-added .woo-sil7en-cart-addon__add-plus {
	display: none;
}

@media (max-width: 36rem) {
	.woo-sil7en-cart-addon {
		flex-wrap: wrap;
	}

	.woo-sil7en-cart-addon__action {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		gap: 1rem;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.woo-sil7en-cart-addon__add {
		transition: background-color 150ms ease, color 150ms ease;
	}
}