/*
 * woo-sil7en — Base CSS
 *
 * Cascade layers declaration order. All component/utility CSS written by
 * block collection plugins must declare their own @layer to slot in here.
 * The theme.json engine injects its output at the "theme" stage (outside
 * layers), so block styles injected via `wp-block-styles` land after reset.
 *
 * Layer order (lowest → highest specificity):
 *   reset      : browser normalisation, box-model
 *   tokens     : :root custom property aliases mirroring theme.json vars
 *   base       : element defaults (typography, links, lists, code)
 *   components : reusable UI patterns (block overrides live here)
 *   utilities  : single-purpose overrides
 */

@layer reset, tokens, base, components, utilities;

/* ============================================================
   LAYER: reset
   ============================================================ */

@layer reset {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	html {
		-webkit-text-size-adjust: 100%;
		text-size-adjust:         100%;
		hanging-punctuation:      first last;
	}

	body {
		margin:             0;
		min-block-size:     100dvb;
		-webkit-font-smoothing:  antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	img,
	picture,
	video,
	canvas,
	svg {
		display:   block;
		max-width: 100%;
	}

	input,
	button,
	textarea,
	select {
		font: inherit;
	}

	p,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		overflow-wrap: break-word;
	}

	ul,
	ol {
		list-style: none;
		margin:     0;
		padding:    0;
	}
}

/* ============================================================
   LAYER: tokens
   Semantic aliases so component CSS reads the intent, not the slug.
   These mirror the DESIGN.md §2 semantic aliases + key custom props.
   ============================================================ */

@layer tokens {
	:root {
		/* --- Type scale backfill ------------------------------------- */
		/* WordPress does not emit a CSS var for the `2xl` font-size preset
		   (digit-leading slug), so `--wp--preset--font-size--2xl` resolves to
		   nothing and every H1/hero rule that uses it collapses. Define it here
		   to match theme.json's 2xl. A var defined in any layer is visible to all
		   var() lookups regardless of cascade layer. Keep in sync with theme.json. */
		--wp--preset--font-size--2xl: clamp(1.9rem, 1.55rem + 1.6vw, 3rem);

		/* --- Spacing scale backfill ---------------------------------- */
		/* Same digit-leading-slug problem: WordPress emits NO var for the
		   `3xs`, `2xs` and `2xl` spacing presets, so ~98 uses across the blocks
		   collapsed to 0. Define them here to match theme.json's spacingSizes.
		   Keep in sync with theme.json. */
		--wp--preset--spacing--3xs: 0.25rem;
		--wp--preset--spacing--2xs: 0.5rem;
		--wp--preset--spacing--2xl: clamp(4rem, 2.5rem + 6vw, 8rem);

		/* --- Color semantic aliases ---------------------------------- */
		--text:        var(--wp--preset--color--contrast);
		--text-muted:  var(--wp--preset--color--muted);
		--bg:          var(--wp--preset--color--base);
		--bg-raised:   var(--wp--preset--color--surface);
		--cta:         var(--wp--preset--color--primary);
		--cta-ink:     var(--wp--preset--color--primary-ink);
		--cta-hover:   var(--wp--preset--color--primary-hover);
		--focus-ring:  var(--wp--preset--color--accent);
		--border:      var(--wp--preset--color--border);

		/* --- Layout -------------------------------------------------- */
		--content-size: var(--wp--style--global--content-size, 42rem);
		--wide-size:    var(--wp--style--global--wide-size, 78rem);

		/* --- Grid ---------------------------------------------------- */
		--grid-cols: var(--wp--custom--grid--columns, 12);
		--grid-gap:  var(--wp--custom--grid--gap, clamp(1rem, 0.8rem + 0.8vw, 1.5rem));

		/* --- Focus ring ---------------------------------------------- */
		--outline-color:  var(--focus-ring);
		--outline-width:  3px;
		--outline-offset: 2px;
	}
}

/* ============================================================
   LAYER: base
   Element-level defaults. No class selectors here.
   ============================================================ */

@layer base {
	body {
		font-family: var(--wp--preset--font-family--sans);
		font-size:   var(--wp--preset--font-size--base);
		line-height: var(--wp--custom--font--line-height--normal, 1.5);
		color:       var(--text);
		background:  var(--bg);
	}

	/* Headings — semantic structure only; sizes come from theme.json elements */
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-family:    var(--wp--preset--font-family--display);
		font-weight:    var(--wp--custom--font--weight--display, 500);
		line-height:    var(--wp--custom--font--line-height--tight, 1.1);
		letter-spacing: var(--wp--custom--font--tracking--tight, -0.02em);
		margin-block:   0;
	}

	p {
		max-inline-size: var(--wp--custom--font--measure, 66ch);
		margin-block:    0;
	}

	a {
		color:                   var(--cta);
		text-underline-offset:   0.2em;
		text-decoration-thickness: 1px;
		transition:              color var(--wp--custom--motion--duration--fast, 150ms)
		                         var(--wp--custom--motion--ease--standard,
		                             cubic-bezier(0.2, 0, 0, 1));
	}

	a:hover {
		color: var(--cta-hover);
	}

	a:focus-visible {
		outline:        var(--outline-width) solid var(--outline-color);
		outline-offset: var(--outline-offset);
		border-radius:  var(--wp--custom--radius--sm, 0.25rem);
	}

	/* Remove default focus outline — only show on keyboard navigation */
	:focus:not(:focus-visible) {
		outline: none;
	}

	code,
	pre,
	kbd {
		font-family: var(--wp--preset--font-family--mono);
		font-size:   var(--wp--preset--font-size--sm);
	}

	img {
		height: auto; /* maintain aspect-ratio when width is constrained */
	}

	/* Reduced motion — honour the preference across all transitions/animations */
	@media (prefers-reduced-motion: reduce) {
		*,
		*::before,
		*::after {
			animation-duration:       0.01ms !important; /* stylelint-disable-line */
			animation-iteration-count: 1     !important; /* stylelint-disable-line */
			transition-duration:      0.01ms !important; /* stylelint-disable-line */
			scroll-behavior:          auto   !important; /* stylelint-disable-line */
		}
	}
}

@layer utilities {
	/*
	 * WP color-preset collision fix. A palette color with slug `border` makes the
	 * style engine emit `.has-border-color{color:var(--wp--preset--color--border)!important}`
	 * — a TEXT-color utility. But `.has-border-color` is ALSO the marker class WordPress
	 * adds to every block that sets a border color, so the hairline color bleeds onto the
	 * text of any bordered block (cards, callouts) and tanks its contrast. Cancel the text
	 * bleed; genuine text colors (`.has-text-color`) and the border color itself are left
	 * alone. A layered `!important` beats core's unlayered `!important` regardless of
	 * specificity, so the guard `:not(.has-text-color)` is what keeps real colors safe.
	 */
	.has-border-color:not(.has-text-color) {
		color: inherit !important;
	}

	/* Skip-to-content link — WCAG 2.1 AA requirement */
	.skip-link {
		position:   absolute;
		inset-inline-start: var(--wp--preset--spacing--sm, 1rem);
		inset-block-start:  var(--wp--preset--spacing--sm, 1rem);
		z-index:    9999;
		padding:    0.5em 1em;
		background: var(--wp--preset--color--primary, #000);
		color:      var(--wp--preset--color--primary-ink, #fff);
		font-size:  var(--wp--preset--font-size--sm, 0.875rem);
		font-weight: 700;
		border-radius: var(--wp--custom--radius--sm, 4px);
		text-decoration: none;
		/* Hidden by default — visible on focus only */
		clip:        rect(1px, 1px, 1px, 1px);
		clip-path:   inset(50%);
		overflow:    hidden;
		white-space: nowrap;
		width:       1px;
		height:      1px;
	}

	.skip-link:focus {
		clip:      auto;
		clip-path: none;
		overflow:  visible;
		width:     auto;
		height:    auto;
	}
}
/* Shared scroll-reveal keyframe — used by marketing blocks via animation-timeline: view() */
@keyframes woo-sil7en-fade-up {
        from {
                opacity:   0;
                translate:  0 1.5rem;
        }

        to {
                opacity:   1;
                translate:  0 0;
        }
}
/* =========================================================
   Product category archive — editorial header
   ========================================================= */
.woo-sil7en-taxonomy-product-cat__hero,
.woo-sil7en-archive-product__hero,
.woo-sil7en-archive-post__hero {
	margin-block: clamp(2rem, 1.5rem + 2vw, 3.5rem) 0;
	text-align: left;
}

.woo-sil7en-taxonomy-product-cat__eyebrow,
.woo-sil7en-archive-product__eyebrow,
.woo-sil7en-archive-post__eyebrow {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xs, 0.8125rem);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary, #333333);
	margin: 0 0 0.6rem;
}

.woo-sil7en-taxonomy-product-cat__hero .wp-block-query-title,
.woo-sil7en-archive-product__hero .wp-block-query-title,
.woo-sil7en-archive-post__hero .wp-block-query-title,
.woo-sil7en-archive-post__title {
	font-family: var(--wp--preset--font-family--display, "Lora", Georgia, serif);
	font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.6rem);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.05;
	margin: 0;
	color: var(--wp--preset--color--contrast, #1a1714);
}

.woo-sil7en-taxonomy-product-cat__hero .wp-block-term-description,
.woo-sil7en-archive-product__hero .wp-block-term-description,
.woo-sil7en-archive-post__hero .wp-block-term-description,
.woo-sil7en-archive-post__lead {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--md, 1.0625rem);
	line-height: 1.6;
	color: var(--wp--preset--color--muted, #6f6b64);
	max-width: 60ch;
	margin-block-start: clamp(0.85rem, 0.6rem + 0.7vw, 1.25rem);
}

/* Search field under the "Resultados" H1 on the search template. */
.woo-sil7en-archive-post__search {
	margin-block-start: clamp(0.85rem, 0.6rem + 0.7vw, 1.25rem);
	max-width: 32rem;
}

/* Breadcrumb — thin, quiet, hairline divider below separates header from grid. */
.woo-sil7en-taxonomy-product-cat__breadcrumbs,
.woo-sil7en-archive-product__breadcrumbs,
.woo-sil7en-archive-post__breadcrumbs {
	margin-block: clamp(1.25rem, 0.9rem + 1.2vw, 2rem) clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
	padding-block-end: clamp(1rem, 0.7rem + 1vw, 1.5rem);
	border-block-end: 1px solid var(--wp--preset--color--border, #e6e3de);
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	color: var(--wp--preset--color--muted, #6f6b64);
}

/* ============================================================
   View Transitions — cross-document page transitions + cover morph
   (Phase 17.6). Cross-document is zero-JS; the cover morph is tagged
   by assets/js/view-transitions.js. Progressive enhancement, reduced-
   motion safe. Only opacity/transform animate (compositor-only).
   ============================================================ */

@view-transition {
	navigation: auto;
}

@media (prefers-reduced-motion: no-preference) {
	/* Root: soft cross-fade with a slight rise on the incoming page. */
	::view-transition-old(root) {
		animation: wsvt-fade-out var(--wp--custom--motion--duration--base, 250ms) var(--wp--custom--motion--ease--soft, ease) both;
	}

	::view-transition-new(root) {
		animation: wsvt-fade-in var(--wp--custom--motion--duration--base, 280ms) var(--wp--custom--motion--ease--soft, ease) both;
	}

	@keyframes wsvt-fade-out {
		to {
			opacity: 0;
		}
	}

	@keyframes wsvt-fade-in {
		from {
			opacity: 0;
			transform: translateY(0.5rem);
		}
	}

	/* Cover morph: the shared cover eases (position + size) between the card
	   and the product page; the two snapshots cross-fade by default. */
	::view-transition-group(wsvt-cover) {
		animation-duration: var(--wp--custom--motion--duration--slow, 500ms);
		animation-timing-function: var(--wp--custom--motion--ease--soft, ease);
	}

	/* Directional archive slide (Phase 27). Driven by [data-vt-nav] on <html>
	   (set in view-transitions.js). Entering an archive = "drill-in" (incoming
	   from the right, outgoing to the left); leaving an archive = the reverse.
	   The html[attr] prefix outranks the default root fade above, so it only
	   applies to archive navigations. Transform/opacity only (compositor). */
	html[data-vt-nav="to-archive"]::view-transition-old(root) {
		animation: wsvt-slide-out-start var(--wp--custom--motion--duration--base, 280ms) var(--wp--custom--motion--ease--soft, ease) both;
	}

	html[data-vt-nav="to-archive"]::view-transition-new(root) {
		animation: wsvt-slide-in-end var(--wp--custom--motion--duration--base, 320ms) var(--wp--custom--motion--ease--soft, ease) both;
	}

	html[data-vt-nav="from-archive"]::view-transition-old(root) {
		animation: wsvt-slide-out-end var(--wp--custom--motion--duration--base, 280ms) var(--wp--custom--motion--ease--soft, ease) both;
	}

	html[data-vt-nav="from-archive"]::view-transition-new(root) {
		animation: wsvt-slide-in-start var(--wp--custom--motion--duration--base, 320ms) var(--wp--custom--motion--ease--soft, ease) both;
	}

	/* Forward (drill-in): old leaves toward the start, new arrives from the end. */
	@keyframes wsvt-slide-out-start {
		to {
			opacity: 0;
			transform: translateX(-2.5rem);
		}
	}

	@keyframes wsvt-slide-in-end {
		from {
			opacity: 0;
			transform: translateX(2.5rem);
		}
	}

	/* Back: old leaves toward the end, new arrives from the start. */
	@keyframes wsvt-slide-out-end {
		to {
			opacity: 0;
			transform: translateX(2.5rem);
		}
	}

	@keyframes wsvt-slide-in-start {
		from {
			opacity: 0;
			transform: translateX(-2.5rem);
		}
	}
}

/* Honour reduced motion: no page or element transitions at all. */
@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}
}

/* ============================================================
   Mobile edge padding — keep content off the viewport edges.
   Full-bleed children opt back out with a negative margin.
   ============================================================ */

@media (max-width: 781px) {
	main.wp-block-group {
		--ws-edge: clamp(1rem, 4.5vw, 1.5rem);
		padding-inline: var(--ws-edge);
	}

	main.wp-block-group > .alignfull {
		margin-inline: calc(-1 * var(--ws-edge));
	}
}

/* ============================================================
   Single product (book) — editorial layout.
   The asymmetric hero (cover LCP | sticky buy panel) is owned by
   the woo-sil7en/buy-box block. This section governs the page
   rhythm and the details band below it. Single DOM: cover → buy
   panel → details → discovery stack naturally on mobile. Sober
   tokens, hairline borders, restrained purple.
   ============================================================ */

@layer components {

	/* Generous editorial rhythm around the whole product page. */
	.woo-sil7en-single-product {
		padding-block-end: var(--wp--preset--spacing--2xl, 5rem);
	}

	/* --- Details band (Ficha técnica + trust + discovery) ------------- */

	/* Earns the wide measure so the two-column sheet and the discovery rail
	   breathe; overrides the constrained main's content-width clamp. */
	.woo-sil7en-single-product .woo-sil7en-single-product__details {
		max-inline-size: var(--wp--style--global--wide-size, 78rem);
		inline-size: 100%;
		margin-inline: auto;
		container-type: inline-size;
		margin-block-start: var(--wp--preset--spacing--xl, 3rem);
		padding-block-start: var(--wp--preset--spacing--xl, 3rem);
		border-block-start: 1px solid var(--wp--preset--color--border, #ddd8e6);
		font-family: var(--wp--preset--font-family--sans, "Poppins", sans-serif);
		color: var(--wp--preset--color--contrast, #150a1e);
	}

	.woo-sil7en-single-product__details :is(h2, h3) {
		font-family: var(--wp--preset--font-family--display, "Lora", Georgia, serif);
		color: var(--wp--preset--color--contrast, #150a1e);
	}
}

/* ============================================================
   Single post (article) — editorial reading view.
   Reading sibling of the single-product page: an asymmetric
   editorial header (eyebrow -> H1 -> dek -> byline), a 16:9 hero
   below the header (zero overlap), then a sticky TOC/share rail
   beside a ~66ch reading column, an author box, prev/next, and a
   "Seguir leyendo" related rail. Single DOM: the columns stack on
   mobile. Sober tokens, hairline borders, restrained purple.
   ============================================================ */

@layer components {

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

	/* --- Editorial header ------------------------------------------- */

	.woo-sil7en-single-post__header {
		margin-block-start: clamp(1.5rem, 1rem + 2vw, 3rem);
	}

	.woo-sil7en-single-post__eyebrow {
		display: block;
		margin: 0 0 0.7rem;
		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.16em;
		text-transform: uppercase;
		line-height: 1.2;
		/* Brand purple base so the category eyebrow matches every other on-white
		   editorial eyebrow site-wide — including when the term renders as plain
		   text (no link), which previously fell back to near-black contrast. */
		color: var(--wp--preset--color--primary, #333333);
	}

	.woo-sil7en-single-post__eyebrow a {
		color: var(--wp--preset--color--primary, #333333);
		text-decoration: none;
	}

	.woo-sil7en-single-post__eyebrow a:hover,
	.woo-sil7en-single-post__eyebrow a:focus-visible {
		text-decoration: underline;
		text-underline-offset: 0.2em;
	}

	.woo-sil7en-single-post__title {
		max-inline-size: 20ch;
		margin: 0;
		font-family: var(--wp--preset--font-family--display, "Lora", Georgia, serif);
		font-size: clamp(1.9rem, 1.45rem + 2vw, 2.9rem);
		font-weight: 500;
		line-height: 1.05;
		letter-spacing: -0.022em;
		color: var(--wp--preset--color--contrast, #150a1e);
		text-wrap: balance;
	}

	.woo-sil7en-single-post__dek {
		max-inline-size: 60ch;
		margin-block: clamp(1rem, 0.7rem + 0.9vw, 1.5rem) 0;
		font-family: var(--wp--preset--font-family--sans, "Poppins", sans-serif);
		font-size: var(--wp--preset--font-size--md, 1.0625rem);
		line-height: 1.6;
		color: var(--wp--preset--color--muted, #6f6b64);
	}

	.woo-sil7en-single-post__header .woo-sil7en-article-meta {
		margin-block-start: clamp(1.25rem, 0.9rem + 1vw, 1.75rem);
		padding-block-start: clamp(1rem, 0.8rem + 0.7vw, 1.5rem);
		border-block-start: 1px solid var(--wp--preset--color--border, #e6e3de);
	}

	/* --- Hero (LCP) ------------------------------------------------- */

	.woo-sil7en-single-post__hero {
		overflow: hidden;
		border-radius: var(--wp--custom--radius--xl, 0.5rem);
		border: 1px solid var(--wp--preset--color--border, #e6e3de);
	}

	.woo-sil7en-single-post__hero img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	/* --- Asymmetric layout: sticky rail | reading column ------------ */

	/* Earns the wide measure so the rail + reading column breathe,
	   overriding the constrained main's content-width clamp. */
	.woo-sil7en-single-post__layout {
		max-inline-size: var(--wp--style--global--wide-size, 78rem);
		inline-size: 100%;
		margin-inline: auto;
		align-items: flex-start;
	}

	.woo-sil7en-single-post__reading {
		min-inline-size: 0;
	}

	/* The reading column constrains every child to the measure for a
	   pleasant longform line length, then re-widens figures/quotes. */
	.woo-sil7en-single-post__reading .wp-block-post-content {
		max-inline-size: var(--wp--custom--font--measure, 66ch);
		margin-inline: 0;
	}

	.woo-sil7en-single-post__reading .wp-block-post-content > * {
		max-inline-size: var(--wp--custom--font--measure, 66ch);
	}

	.woo-sil7en-single-post__reading .wp-block-post-content {
		font-family: var(--wp--preset--font-family--sans, "Poppins", sans-serif);
		font-size: var(--wp--preset--font-size--base, 1.0625rem);
		line-height: 1.75;
		color: var(--wp--preset--color--contrast, #1c140d);
	}

	.woo-sil7en-single-post__reading .wp-block-post-content p {
		margin-block: 0 1.25em;
	}

	.woo-sil7en-single-post__reading .wp-block-post-content :is(h2, h3) {
		font-family: var(--wp--preset--font-family--display, "Lora", Georgia, serif);
		color: var(--wp--preset--color--contrast, #150a1e);
		line-height: 1.15;
		letter-spacing: -0.015em;
	}

	.woo-sil7en-single-post__reading .wp-block-post-content h2 {
		margin-block: 2em 0.6em;
		font-size: var(--wp--preset--font-size--xl, 1.875rem);
	}

	.woo-sil7en-single-post__reading .wp-block-post-content h3 {
		margin-block: 1.6em 0.5em;
		font-size: var(--wp--preset--font-size--lg, 1.5rem);
	}

	/* Drop-cap on the first paragraph — editorial flourish, tokens. */
	.woo-sil7en-single-post__reading .wp-block-post-content > p:first-of-type::first-letter {
		float: inline-start;
		margin-inline-end: 0.08em;
		padding-inline-end: 0.04em;
		font-family: var(--wp--preset--font-family--display, "Lora", Georgia, serif);
		font-size: 3.4em;
		font-weight: 500;
		line-height: 0.78;
		color: var(--wp--preset--color--primary, #333333);
	}

	/* Pull-quotes / blockquotes break slightly wider than the measure. */
	.woo-sil7en-single-post__reading .wp-block-post-content blockquote {
		max-inline-size: none;
		margin-block: 1.75em;
		margin-inline: 0;
		padding-inline-start: var(--wp--preset--spacing--md, 1.5rem);
		border-inline-start: 3px solid var(--wp--preset--color--primary, #333333);
		font-family: var(--wp--preset--font-family--display, "Lora", Georgia, serif);
		font-size: var(--wp--preset--font-size--lg, 1.4rem);
		line-height: 1.3;
		color: var(--wp--preset--color--contrast, #150a1e);
	}

	.woo-sil7en-single-post__reading .wp-block-post-content blockquote p {
		max-inline-size: none;
	}

	/* Inline figures + their own images may exceed the measure. */
	.woo-sil7en-single-post__reading .wp-block-post-content :is(figure, .wp-block-image) {
		max-inline-size: none;
		margin-block: 1.75em;
	}

	.woo-sil7en-single-post__reading .wp-block-post-content :is(figure, .wp-block-image) img {
		border-radius: var(--wp--custom--radius--lg, 0.5rem);
	}

		.woo-sil7en-single-post__reading .wp-block-post-content img,
	.woo-sil7en-single-post__reading .wp-block-post-content > img {
		max-inline-size: 100% !important;
		width: auto;
		height: auto;
	}

	.woo-sil7en-single-post__reading .wp-block-post-content figcaption {
		margin-block-start: 0.6rem;
		font-family: var(--wp--preset--font-family--sans, "Poppins", sans-serif);
		font-size: var(--wp--preset--font-size--sm, 0.875rem);
		color: var(--wp--preset--color--muted, #6f6b64);
	}

	.woo-sil7en-single-post__reading .wp-block-post-content :is(ul, ol) {
		max-inline-size: var(--wp--custom--font--measure, 66ch);
		padding-inline-start: 1.4em;
		margin-block: 0 1.25em;
	}

	.woo-sil7en-single-post__reading .wp-block-post-content li {
		margin-block: 0.4em;
		line-height: 1.7;
	}

	/* Share bar: a horizontal label + pills row above the article (the post is
	   now a single centered reading column, not a rail + column split). */
	.woo-sil7en-single-post__reading .woo-sil7en-single-post__share {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.75rem;
		margin-block-end: var(--wp--preset--spacing--lg, 2rem);
		padding-block-end: var(--wp--preset--spacing--md, 1.5rem);
		border-block-end: 1px solid var(--wp--preset--color--border, #e6e3de);
	}

	/* --- Prev / next ------------------------------------------------ */

	.woo-sil7en-single-post__nav {
		max-inline-size: var(--wp--style--global--wide-size, 78rem);
		margin-inline: auto;
		gap: var(--wp--preset--spacing--md, 1.5rem);
		font-family: var(--wp--preset--font-family--sans, "Poppins", sans-serif);
		font-size: var(--wp--preset--font-size--sm, 0.9375rem);
	}

	.woo-sil7en-single-post__nav a {
		color: var(--wp--preset--color--contrast, #1c140d);
		text-decoration: none;
		font-weight: 600;
	}

	.woo-sil7en-single-post__nav a:hover,
	.woo-sil7en-single-post__nav a:focus-visible {
		color: var(--wp--preset--color--primary, #333333);
	}

	/* The author box + related rail earn the wide measure. */
	.woo-sil7en-single-post > .woo-sil7en-author-box,
	.woo-sil7en-single-post > .woo-sil7en-related-posts {
		max-inline-size: var(--wp--style--global--wide-size, 78rem);
		margin-inline: auto;
	}

	.woo-sil7en-single-post > .woo-sil7en-author-box {
		max-inline-size: var(--wp--style--global--content-size, 48rem);
	}

	/* Mobile: single column, TOC/share rail flow above the reading body. */
	@media (max-width: 781px) {
		.woo-sil7en-single-post__layout {
			flex-wrap: wrap;
		}

		.woo-sil7en-single-post__rail {
			flex-basis: 100% !important;
		}

		.woo-sil7en-single-post__rail .woo-sil7en-toc {
			margin-block-end: var(--wp--preset--spacing--md, 1.5rem);
			padding: var(--wp--preset--spacing--sm, 1rem) 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, 0.5rem);
		}
	}
}


/* ============================================================
   CART PAGE — premium editorial cart (templates/page-cart.html)
   Styles the WooCommerce block Cart (woocommerce/cart and its
   inner blocks) plus the theme's editorial header and the
   woo-sil7en/cart-extras trust + cross-sell strip. All visual
   values come from design tokens. Mobile-first, single DOM.

   NOTE: this section is intentionally UNLAYERED. WooCommerce ships
   its cart block CSS unlayered, and unlayered rules always win over
   any @layer. To reliably restyle the WC cart we must compete in the
   unlayered cascade (and lean on specificity), not from a layer.
   Every rule below is scoped under .woo-sil7en-cart for that reason.
   ============================================================ */

	/* ---- Editorial page header -------------------------------------- */

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

	.woo-sil7en-cart__eyebrow {
		margin: 0 0 var(--wp--preset--spacing--2xs, 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, #333333);
	}

	.woo-sil7en-cart__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, #150a1e);
	}

	.woo-sil7en-cart__subtitle {
		margin: var(--wp--preset--spacing--2xs, 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, #5a5068);
	}

	/* ---- Two-column layout (WC sidebar-layout) ---------------------- */

	/* WooCommerce renders main + sidebar as a flex row (it adds .is-large
	   itself once the container is wide enough). Base (mobile) is a single
	   column; from the tablet breakpoint up, lay out ~62/34 side by side.
	   nowrap + min-width:0 lets the columns share one row and shrink instead
	   of wrapping (62% + 34% + gap would otherwise force a wrap). */
	.woo-sil7en-cart .wc-block-components-sidebar-layout {
		gap: var(--wp--preset--spacing--xl, 3rem);
		align-items: start;
	}

	@media (min-width: 48rem) {
		.woo-sil7en-cart .wc-block-components-sidebar-layout.is-large {
			flex-wrap: nowrap;
		}

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

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

	/* ---- Line items: hairline rows, cover-forward ------------------- */

	.woo-sil7en-cart .wc-block-cart-items {
		border: 0;
	}

	/* Hide WooCommerce's table-style column header; the editorial header
	   already names the section and each row is self-describing. */
	.woo-sil7en-cart .wc-block-cart-items__header {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
	}

	.woo-sil7en-cart .wc-block-cart-items__row {
		padding-block: var(--wp--preset--spacing--md, 1.5rem);
		border-block-start: 1px solid var(--wp--preset--color--border, #ddd8e6);
	}

	.woo-sil7en-cart .wc-block-cart-items__row:first-child {
		border-block-start: 0;
	}

	/* Book cover thumbnail: capped width + fixed cover ratio → zero CLS,
	   no oversized covers. WooCommerce's image cell can stretch, so the
	   cap lives on the cell and the <img>. */
	.woo-sil7en-cart .wc-block-cart-item__image {
		inline-size: clamp(4rem, 14vw, 6rem);
		flex: 0 0 auto;
	}

	.woo-sil7en-cart .wc-block-cart-item__image img {
		inline-size: 100%;
		max-inline-size: 6rem;
		border-radius: var(--wp--custom--radius--md, 0.5rem);
		aspect-ratio: 2 / 3;
		object-fit: cover;
		box-shadow: var(--wp--custom--shadow--sm, 0 2px 6px rgb(17 24 28 / 0.08));
	}

	.woo-sil7en-cart .wc-block-components-product-name {
		font-family: var(--wp--preset--font-family--display, "Lora", Georgia, serif);
		font-size: var(--wp--preset--font-size--md, 1.125rem);
		font-weight: 500;
		line-height: 1.25;
		color: var(--wp--preset--color--contrast, #150a1e);
		text-decoration: none;
	}

	.woo-sil7en-cart .wc-block-components-product-metadata,
	.woo-sil7en-cart .wc-block-cart-item__product .wc-block-components-product-details {
		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, #5a5068);
	}

	.woo-sil7en-cart .wc-block-cart-item__total,
	.woo-sil7en-cart .wc-block-cart-item__prices {
		font-family: var(--wp--preset--font-family--sans, "Poppins", sans-serif);
		font-weight: 600;
		color: var(--wp--preset--color--contrast, #150a1e);
	}

	/* Quantity stepper: pill outline, comfortable targets. */
	.woo-sil7en-cart .wc-block-components-quantity-selector {
		border: 1px solid var(--wp--preset--color--border, #ddd8e6);
		border-radius: var(--wp--custom--radius--pill, 999px);
		overflow: hidden;
	}

	.woo-sil7en-cart .wc-block-components-quantity-selector__button {
		color: var(--wp--preset--color--primary, #333333);
		min-inline-size: 2.5rem;
		min-block-size: 2.5rem;
	}

	.woo-sil7en-cart .wc-block-components-quantity-selector__button:hover {
		background: var(--wp--preset--color--surface, #f5f3f9);
	}

	/* Remove control: quiet until hovered/focused. */
	.woo-sil7en-cart .wc-block-cart-item__remove-link {
		color: var(--wp--preset--color--muted, #5a5068);
		text-underline-offset: 0.2em;
	}

	.woo-sil7en-cart .wc-block-cart-item__remove-link:hover,
	.woo-sil7en-cart .wc-block-cart-item__remove-link:focus-visible {
		color: var(--wp--preset--color--danger, #c0362c);
	}

	/* ---- Order summary card ----------------------------------------- */

	.woo-sil7en-cart .wc-block-components-sidebar {
		padding: var(--wp--preset--spacing--lg, 2rem);
		background: var(--wp--preset--color--surface, #f5f3f9);
		border: 1px solid var(--wp--preset--color--border, #ddd8e6);
		border-radius: var(--wp--custom--radius--lg, 1rem);
	}

	.woo-sil7en-cart .wc-block-components-totals-item__label {
		color: var(--wp--preset--color--muted, #5a5068);
	}

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

	/* Primary checkout CTA in brand purple. */
	.woo-sil7en-cart .wc-block-cart__submit-button,
	.woo-sil7en-cart .wc-block-cart__submit-container .wc-block-components-button {
		width: 100%;
		background: var(--wp--preset--color--primary, #333333);
		color: var(--wp--preset--color--primary-ink, #ffffff);
		border-radius: var(--wp--custom--radius--md, 0.5rem);
		font-weight: 600;
	}

	.woo-sil7en-cart .wc-block-cart__submit-button:hover,
	.woo-sil7en-cart .wc-block-cart__submit-container .wc-block-components-button:hover {
		background: var(--wp--preset--color--primary-hover, #400080);
	}

	/* ---- Mobile: keep the real checkout button reachable ------------ */

	/* Reuse WooCommerce's own submit button (no duplicate DOM) as a
	   sticky bottom action on small screens. Desktop: static in card. */
	@media (max-width: 47.999rem) {
		.woo-sil7en-cart .wc-block-cart__submit {
			position: sticky;
			bottom: 0;
			z-index: 5;
			margin-inline: calc(-1 * var(--wp--preset--spacing--lg, 2rem));
			margin-block-end: calc(-1 * var(--wp--preset--spacing--lg, 2rem));
			padding: var(--wp--preset--spacing--sm, 1rem) var(--wp--preset--spacing--lg, 2rem);
			background: var(--wp--preset--color--base, #ffffff);
			border-block-start: 1px solid var(--wp--preset--color--border, #ddd8e6);
			box-shadow: var(--wp--custom--shadow--md, 0 8px 24px rgb(17 24 28 / 0.10));
		}
	}

	/* ---- Empty cart state ------------------------------------------- */

	.woo-sil7en-cart .wc-block-cart__empty-cart__title,
	.woo-sil7en-cart .wp-block-woocommerce-empty-cart-block h2 {
		font-family: var(--wp--preset--font-family--display, "Lora", Georgia, serif);
		color: var(--wp--preset--color--contrast, #150a1e);
	}

	/* ---- Motion (compositor-only, reduced-motion safe) -------------- */

	@media (prefers-reduced-motion: no-preference) {
		.woo-sil7en-cart .wc-block-components-quantity-selector__button,
		.woo-sil7en-cart .wc-block-cart-item__remove-link,
		.woo-sil7en-cart .wc-block-cart__submit-button,
		.woo-sil7en-cart .wc-block-cart__submit-container .wc-block-components-button {
			transition:
				background-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)),
				transform var(--wp--custom--motion--duration--fast, 150ms) var(--wp--custom--motion--ease--standard, cubic-bezier(0.2, 0, 0, 1));
		}

		.woo-sil7en-cart .wc-block-cart__submit-button:active,
		.woo-sil7en-cart .wc-block-cart__submit-container .wc-block-components-button:active {
			transform: translateY(1px);
		}
	}

/* ===== Contact page (page-contacto.html) ============================ */
.woo-sil7en-contact-page {
	padding-block-end: var(--wp--preset--spacing--2xl, 4rem);
}

.woo-sil7en-contact-hero {
	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-contact-hero__eyebrow {
	margin: 0 0 var(--wp--preset--spacing--2xs, 0.5rem);
	font-size: var(--wp--preset--font-size--xs, 0.8125rem);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary, #333333);
}

.woo-sil7en-contact-hero__title {
	margin: 0;
}

.woo-sil7en-contact-hero__lead {
	margin: var(--wp--preset--spacing--xs, 0.75rem) auto 0;
	max-inline-size: 38rem;
	font-size: var(--wp--preset--font-size--md, 1.2rem);
	line-height: 1.6;
	color: var(--wp--preset--color--muted, #5a5068);
}

/* Blog hero eyebrow + lead — moved off the template's inline styles so the copy
   can come from the client-config via [woo_sil7en_text] (Tanda B). */
@layer components {
	.woo-sil7en-blog-hero__eyebrow {
		margin: 0 0 var(--wp--preset--spacing--xs, 0.5rem);
		font-size: var(--wp--preset--font-size--xs, 0.8125rem);
		font-weight: 600;
		letter-spacing: 0.16em;
		line-height: 1.2;
		text-transform: uppercase;
		color: var(--wp--preset--color--primary, #333333);
	}

	.woo-sil7en-blog-hero__lead {
		margin: var(--wp--preset--spacing--xs, 0.5rem) 0 0;
		font-size: var(--wp--preset--font-size--md, 1.125rem);
		line-height: 1.6;
		color: var(--wp--preset--color--muted, #6f6b64);
	}
}

/* --- Maker credit ("Desarrollado por Silten") — footer + checkout chrome ---
   The wrappers (.wsf__credit / __chrome) inherit their context's text colour, so
   the link stays high-contrast on both the dark footer and the light checkout;
   only the prefix is muted. The sparkle is the accent colour + a subtle twinkle. */
.wsf__credit,
.woo-sil7en-checkout-chrome__credit {
	margin-block-start: 0.85rem;
	font-size: var(--wp--preset--font-size--xs, 0.75rem);
	color: inherit;
	text-align: center;
}

.woo-sil7en-checkout-chrome__credit {
	margin-block-start: 0.35rem;
}

.woo-sil7en-credit {
	display: inline-flex;
	align-items: baseline;
	justify-content: center;
	gap: 0.34em;
}

.woo-sil7en-credit__prefix {
	color: color-mix(in srgb, currentColor 62%, transparent);
}

.woo-sil7en-credit__link {
	display: inline-flex;
	align-items: center;
	gap: 0.32em;
	color: inherit;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.woo-sil7en-credit__name {
	border-block-end: 1px solid transparent;
	transition: border-color 160ms ease;
}

.woo-sil7en-credit__link:hover .woo-sil7en-credit__name,
.woo-sil7en-credit__link:focus-visible .woo-sil7en-credit__name {
	border-block-end-color: currentColor;
}

.woo-sil7en-credit__icon {
	flex: none;
	color: var(--wp--preset--color--accent, currentColor);
	transform-origin: center;
	animation: woo-sil7en-credit-twinkle 3.4s ease-in-out infinite;
}

.woo-sil7en-credit__link:hover .woo-sil7en-credit__icon,
.woo-sil7en-credit__link:focus-visible .woo-sil7en-credit__icon {
	animation-duration: 1.1s;
}

@keyframes woo-sil7en-credit-twinkle {
	0%, 100% { transform: scale(0.78) rotate(0deg); opacity: 0.55; }
	50% { transform: scale(1.08) rotate(90deg); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.woo-sil7en-credit__icon {
		animation: none;
		transform: none;
		opacity: 1;
	}
}

/* ===========================================================================
   Product rating — compact SVG star row (cards, buy box, summaries).
   A muted star track with a width-clipped accent overlay = the average, so it
   needs no WooCommerce star font. Output by woo_sil7en_rating_html() (core).
   =========================================================================== */
.woo-sil7en-rating {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	line-height: 1;
}

.woo-sil7en-rating__stars {
	position: relative;
	display: inline-flex;
	white-space: nowrap;
}

.woo-sil7en-rating__track,
.woo-sil7en-rating__fill {
	display: inline-flex;
}

.woo-sil7en-rating__fill {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}

.woo-sil7en-rating svg {
	width: 1em;
	height: 1em;
	flex: none;
	margin-right: 0.08em;
}

.woo-sil7en-rating__track svg {
	fill: color-mix(in srgb, var(--wp--preset--color--contrast, #1c140d) 16%, transparent);
}

.woo-sil7en-rating__fill svg {
	fill: var(--wp--preset--color--accent, #ffb703);
}

.woo-sil7en-rating__value {
	font-weight: 600;
	font-size: 0.82em;
	color: var(--wp--preset--color--contrast, #1c140d);
}

.woo-sil7en-rating__count {
	font-size: 0.82em;
	color: var(--wp--preset--color--muted, #6f6b64);
	text-decoration: none;
}

a.woo-sil7en-rating__count:hover,
a.woo-sil7en-rating__count:focus-visible {
	color: var(--wp--preset--color--primary, #531099);
	text-decoration: underline;
}

.woo-sil7en-rating--sm { font-size: 0.95rem; }
.woo-sil7en-rating--md { font-size: 1.2rem; }

.woo-sil7en-product-card__body .woo-sil7en-rating { margin-block: 0.15rem 0.1rem; }
.woo-sil7en-buy-box__title + .woo-sil7en-rating { margin-block: 0.5rem 0; }

/* ===========================================================================
   Product reviews — WooCommerce reviews template restyled with tokens.
   Rendered by [woo_sil7en_product_reviews] inside #reviews on the PDP.
   =========================================================================== */
.woo-sil7en-product-reviews {
	max-width: var(--wp--style--global--content-size, 48rem);
	margin-inline: auto;
	margin-block-start: clamp(2.5rem, 2rem + 3vw, 4rem);
	padding-block-start: clamp(2rem, 1.5rem + 2vw, 3rem);
	border-top: 1px solid var(--wp--preset--color--border, #e6e3de);
}

.woo-sil7en-product-reviews .woocommerce-Reviews-title {
	font-family: var(--wp--preset--font-family--display, sans-serif);
	font-size: var(--wp--preset--font-size--xl, 1.75rem);
	margin-block: 0 1.5rem;
}

.woo-sil7en-product-reviews .commentlist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
}

.woo-sil7en-product-reviews .commentlist .review {
	border: 1px solid var(--wp--preset--color--border, #e6e3de);
	border-radius: var(--wp--custom--radius--md, 0.6rem);
	padding: 1.25rem;
	background: var(--wp--preset--color--surface, #fff);
}

.woo-sil7en-product-reviews .comment_container {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.15rem 1rem;
	align-items: start;
}

.woo-sil7en-product-reviews .comment_container img.avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	margin: 0;
	grid-row: span 2;
}

.woo-sil7en-product-reviews .comment-text { min-width: 0; }

.woo-sil7en-product-reviews .meta {
	font-size: var(--wp--preset--font-size--sm, 0.9375rem);
	color: var(--wp--preset--color--muted, #6f6b64);
	margin-block: 0.35rem 0.5rem;
}

.woo-sil7en-product-reviews .meta .woocommerce-review__author {
	font-weight: 600;
	color: var(--wp--preset--color--contrast, #1c140d);
}

.woo-sil7en-product-reviews .description p:last-child { margin-bottom: 0; }

/* WooCommerce star ratings (review list + selector) — token colours, with a
   unicode-star fallback so they read correctly even if WC's star font is absent. */
.woo-sil7en-product-reviews .star-rating { color: var(--wp--preset--color--accent, #ffb703); }

.woo-sil7en-product-reviews #respond { margin-block-start: 2rem; }

.woo-sil7en-product-reviews .comment-reply-title {
	font-family: var(--wp--preset--font-family--display, sans-serif);
	font-size: var(--wp--preset--font-size--lg, 1.25rem);
	display: block;
	margin-block-end: 1rem;
}

.woo-sil7en-product-reviews .comment-form { display: grid; gap: 1rem; }

.woo-sil7en-product-reviews .comment-form input[type="text"],
.woo-sil7en-product-reviews .comment-form input[type="email"],
.woo-sil7en-product-reviews .comment-form textarea {
	width: 100%;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--wp--preset--color--border, #e6e3de);
	border-radius: var(--wp--custom--radius--sm, 0.4rem);
	font: inherit;
	background: var(--wp--preset--color--surface, #fff);
}

.woo-sil7en-product-reviews .comment-form input:focus-visible,
.woo-sil7en-product-reviews .comment-form textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary, #531099);
	outline-offset: 2px;
}

.woo-sil7en-product-reviews .comment-form-rating > label {
	display: block;
	margin-block-end: 0.35rem;
	font-weight: 600;
}

.woo-sil7en-product-reviews .form-submit .submit {
	background: var(--wp--preset--color--primary, #531099);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: 0.7rem 1.6rem;
	font-weight: 600;
	cursor: pointer;
}

.woo-sil7en-product-reviews .form-submit .submit:hover,
.woo-sil7en-product-reviews .form-submit .submit:focus-visible {
	background: color-mix(in srgb, var(--wp--preset--color--primary, #531099) 88%, #000);
}