/* =============================================================================
   Wine Store — estilos que theme.json no expresa
   -----------------------------------------------------------------------------
   Los tokens viven en theme.json y llegan como variables semánticas:
     --wp--preset--color--*          primary, secondary, accent (+ -hover, on-*),
                                     background, surface, foreground, muted, border,
                                     inverse*, danger/success/warning/info
     --wp--preset--gradient--*       primary, primary-hover, primary-text
     --wp--preset--font-family--*    heading, body, system-sans-serif
     --wp--preset--font-size--*      xx-small … display
     --wp--preset--spacing--*        10 … 100
     --wp--preset--border-radius--*  x-small … full
     --wp--preset--shadow--*         small … x-large, drawer
     --wp--custom--*                 wine, header, button, focus, transition,
                                     line-height, letter-spacing
   Aquí no se escribe ningún color, tamaño ni fuente literal: si falta un token,
   se agrega en theme.json. Las clases propias llevan el prefijo ws- para no
   chocar con WP/WooCommerce (ej. WooCommerce ya usa .price).
   Breakpoints (los mismos de docs/ux):
     ≥2000 pantalla grande · ≥1024 desktop · 700–1023 tablet vertical · ≤699 mobile ·
     poca altura en horizontal (≤520) · prefers-reduced-motion.
   ============================================================================= */

/* ---- Ancho en pantallas grandes ----------------------------------------------
   Desde 2000 px el contenedor ancho (wideSize) pasa a custom.layout.wideSizeLarge.
   Plantillas, header y bloques lo leen de --wp--style--global--wide-size; el
   checkout y el pedido recibido fijan su propio ancho y no cambian, y las
   plantillas angostas (page-constrained, page-constrained-no-title y las entradas)
   quedan como están, header incluido. En body, como el contrato --wc-*, para
   ganarle al :root de los estilos globales. */
@media (min-width: 2000px) {
	body:not(.page-template-page-constrained, .page-template-page-constrained-no-title, .single-post) {
		--wp--style--global--wide-size: var(--wp--custom--layout--wide-size-large);
	}
}

/* ---- Contrato con WooCommerce -----------------------------------------------
   woocommerce.css define sus variables --wc-* con su morado en :root. Se
   redefinen en body (no en :root) para ganar sin depender del orden de carga,
   y siempre con var() hacia los tokens de theme.json: la marca vive en un solo
   lugar. Las variables de cada bloque (--wc-product-filter-*, galería…) las
   fija el bloque desde sus atributos y no se tocan aquí. */
body {
	--wc-primary: var(--wp--preset--color--primary);
	--woocommerce: var(--wc-primary);
	--wc-primary-text: var(--wp--preset--color--on-primary);
	--wc-secondary: var(--wp--preset--color--surface-sunken);
	--wc-secondary-text: var(--wp--preset--color--foreground);
	--wc-highlight: var(--wp--preset--color--primary);
	--wc-highligh-text: var(--wp--preset--color--on-primary); /* sic: así lo escribe WooCommerce */
	--wc-content-bg: var(--wp--preset--color--surface);
	--wc-subtext: var(--wp--preset--color--muted);
	--wc-green: var(--wp--preset--color--success);
	--wc-red: var(--wp--preset--color--danger);
	--wc-orange: var(--wp--preset--color--warning);
	--wc-blue: var(--wp--preset--color--info);
	--wc-destructive: var(--wp--preset--color--danger);
	--wc-form-border-color: var(--wp--preset--color--border-strong);
	--wc-form-border-radius: var(--wp--preset--border-radius--small);
	--wc-form-border-width: 1px;
	--wc-form-color-text: var(--wp--preset--color--foreground);
	--wc-form-color-background: var(--wp--preset--color--surface);
	--wc-card-border-radius: var(--wp--preset--border-radius--medium);
	--wc-separator-color: color-mix(in srgb, currentColor 15%, transparent);
}

/* ---- Migas ----------------------------------------------------------------- */
/* Una sola forma en todo el sitio, la del archivo de productos (bloque de WooCommerce): letra pequeña, links como
   el resto de links y un espacio bajo ellas. El bloque Migas del core (entradas, páginas de contenido, blog) se
   alinea con ese aspecto. */
.wp-block-breadcrumbs {
	margin-block-end: 1em;
}

.wp-block-breadcrumbs ol {
	margin: 0;
	padding: 0;
}

/* ---- Base ---------------------------------------------------------------- */
html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--wp--custom--header--height) + var(--wp--preset--spacing--40));
	-webkit-text-size-adjust: 100%; /* sin inflado de texto al rotar en iOS */
	text-size-adjust: 100%;
}

body {
	-webkit-font-smoothing: antialiased;
}

/* Footer siempre abajo: en una página corta (Mi cuenta sin sesión, carro vacío)
   el main crece hasta llenar la ventana, descontando la barra de administración.
   Toda plantilla tiene un <main> como hijo directo de .wp-site-blocks. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
}

/* La ficha (single-product.html) llega envuelta por WooCommerce en un div.woocommerce.product: cuenta como el main. */
.wp-site-blocks > :is(main, .woocommerce.product:has(> main)) {
	flex-grow: 1;
}

/* ---- Secciones (portada y landing) ----------------------------------------- */
/* Cada sección del home es un grupo <section> con la clase ws-section: abre con el aire de la
   maqueta, por breakpoint (custom.section de theme.json). Un margen elegido en el bloque manda.
   Doble clase para ganarle a :root :where(.is-layout-*) > *. */
.wp-block-group.ws-section {
	margin-block-start: var(--wp--custom--section--space);
}

/* ---- Aire antes del footer ----------------------------------------------------- */
/* El mismo en toda página con el footer de la tienda: el de la portada en la maqueta (custom.section.endSpace,
   96 px; 56 bajo 700 px). Lo pone el main, sin sumarle el espacio entre bloques ni el margen del footer, y las
   plantillas no llevan padding inferior propio. El footer (patrón footer) trae su margen superior en línea:
   !important para anularlo (al primer cambio en el editor el footer se guarda en la base con ese margen). El
   checkout y el pedido recibido tienen su propio footer y no cambian. */
.wp-site-blocks > :is(main, .woocommerce.product:has(> main)):has(+ * > .ws-footer) {
	padding-block-end: var(--wp--custom--section--end-space);
}

.wp-site-blocks > :is(main, .woocommerce.product:has(> main)):has(+ * > .ws-footer) + * {
	margin-block-start: 0;
}

.wp-site-blocks > :is(main, .woocommerce.product:has(> main)) + * > .ws-footer {
	margin-block-start: 0 !important;
}

/* Mi cuenta sin sesión: el formulario de acceso de WooCommerce cierra con su propio margen. */
.woocommerce-account .wp-site-blocks > main .woocommerce > :last-child {
	margin-block-end: 0;
}

/* Una grilla de productos en una sección del home (los packs) va algo más suelta que la de la tienda.
   Bajo 700 px manda la de la tienda: una card horizontal por fila. */
@media (min-width: 700px) {
	.ws-section .wc-block-product-template.wc-block-product-template__responsive {
		gap: var(--wp--custom--section--grid-gap);
	}
}

@media (min-width: 700px) and (max-width: 1023px) {
	.wp-block-group.ws-section {
		margin-block-start: var(--wp--custom--section--space-tablet);
	}
}

@media (max-width: 699px) {
	.wp-block-group.ws-section {
		margin-block-start: var(--wp--custom--section--space-compact);
	}

	.wp-site-blocks > :is(main, .woocommerce.product:has(> main)):has(+ * > .ws-footer) {
		padding-block-end: var(--wp--custom--section--end-space-compact);
	}
}

:where(img) {
	max-width: 100%;
	height: auto;
}

:focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--primary);
	outline-offset: var(--wp--custom--focus--offset);
	border-radius: var(--wp--preset--border-radius--x-small);
}

/* Fondos oscuros (header, footer, avisos): el contorno de foco pasa al acento. */
.has-inverse-background-color :focus-visible,
.has-secondary-background-color :focus-visible {
	outline-color: var(--wp--preset--color--accent);
}

.ws-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---- Botones ------------------------------------------------------------- */
/* theme.json pone degradado (con su variante hover), tipografía, sombra del texto
   y padding; acá el alto mínimo y la alineación del contenido. */
.wp-element-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	min-height: var(--wp--custom--button--height);
	white-space: nowrap;
	text-decoration: none;
	transition: color var(--wp--custom--transition--base), border-color var(--wp--custom--transition--base);
}

.ws-btn-small .wp-block-button__link,
.wp-element-button.ws-btn-small {
	min-height: var(--wp--custom--button--height-small);
	padding-block: 0;
	padding-inline: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--x-small);
}

/* ---- Texto de marca ------------------------------------------------------ */
.ws-kicker {
	font: 600 var(--wp--preset--font-size--body-small) / var(--wp--custom--line-height--normal) var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--primary);
	letter-spacing: 0;
	text-transform: none;
}

/* Nombres destacados (sección Historias): texto con el degradado de marca. */
.ws-gradient-text {
	background: var(--wp--preset--gradient--primary-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Link de "ver todo": subrayado de marca grueso y flecha. */
.ws-link-arrow,
.ws-link-arrow a,
.ws-section-head__link a {
	font-weight: 600;
	font-size: var(--wp--preset--font-size--body-small);
	color: var(--wp--preset--color--foreground);
	white-space: nowrap;
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--primary);
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
	transition: color var(--wp--custom--transition--fast);
}

/* Un párrafo .ws-link-arrow con su link dentro: la flecha va solo en el link. */
.ws-link-arrow:not(:has(a))::after,
.ws-link-arrow a::after,
.ws-section-head__link a::after {
	content: " →";
	display: inline-block;
	text-decoration: none;
	color: var(--wp--preset--color--primary);
}

.ws-link-arrow:hover,
.ws-link-arrow a:hover,
.ws-section-head__link a:hover {
	color: var(--wp--preset--color--primary-hover);
}

/* ---- Chips, etiquetas y tipo de vino ------------------------------------- */
.ws-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 34px;
	padding: 0 var(--wp--preset--spacing--30);
	border-radius: var(--wp--preset--border-radius--full);
	border: 1px solid var(--wp--preset--color--border-strong);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	white-space: nowrap;
	text-decoration: none;
	transition: border-color var(--wp--custom--transition--fast), color var(--wp--custom--transition--fast);
}

.ws-chip:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--foreground);
}

.ws-chip[aria-pressed="true"],
.ws-chip.is-active {
	border-color: var(--wp--preset--color--secondary);
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--on-secondary);
}

/* Etiqueta sobre la foto ("Patrimonial", "Ícono"): las fotos de producto son oscuras.
   La insignia "Oferta" de WooCommerce (sobre la foto del producto) usa el mismo aspecto. */
.ws-flag,
:is(.wc-block-components-product-image, .wp-block-woocommerce-product-image, .wc-block-product-gallery-large-image) .wc-block-components-product-sale-badge {
	padding: 6px var(--wp--preset--spacing--20);
	border-radius: var(--wp--preset--border-radius--x-small);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent);
	background: color-mix(in srgb, var(--wp--preset--color--inverse) 72%, transparent);
	color: var(--wp--preset--color--accent);
	font: 600 var(--wp--preset--font-size--xx-small) / var(--wp--custom--line-height--none) var(--wp--preset--font-family--body);
	letter-spacing: 0.04em;
	text-transform: none;
}

.ws-flag {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
}

/* WooCommerce le pone al texto el fondo de la insignia: con el fondo translúcido se vería doble. */
.wc-block-components-product-image .wc-block-components-product-sale-badge span,
.wp-block-woocommerce-product-image .wc-block-components-product-sale-badge span,
.wc-block-product-gallery-large-image .wc-block-components-product-sale-badge span {
	background: none;
}

.wc-block-components-product-image .wc-block-components-product-sale-badge.wc-block-components-product-sale-badge--align-right {
	top: var(--wp--preset--spacing--20);
	right: var(--wp--preset--spacing--20);
}

/* Varias etiquetas sobre una foto: se apilan en filas, cada una del ancho de su texto. */
.ws-flags {
	position: absolute;
	top: var(--wp--preset--spacing--20);
	left: var(--wp--preset--spacing--20);
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--10);
}

.ws-flags .ws-flag {
	position: static;
}

/* Composición por tipo de vino ("3 Naranjo", "6 Blanco"): fichas claras sobre la foto. */
.ws-wine-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10);
}

.ws-wine-chip {
	display: inline-flex;
	align-items: center;
	padding: 5px 9px;
	border-radius: var(--wp--preset--border-radius--full);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--foreground);
	box-shadow: var(--wp--preset--shadow--small);
	font: 600 var(--wp--preset--font-size--x-small) / var(--wp--custom--line-height--none) var(--wp--preset--font-family--body);
	white-space: nowrap;
}

.ws-type-dot {
	display: inline-block;
	flex: none;
	width: 8px;
	height: 8px;
	margin-right: 6px;
	border-radius: 50%;
}

.ws-type-dot--red { background: var(--wp--custom--wine--red); }
.ws-type-dot--white { background: var(--wp--custom--wine--white); }
.ws-type-dot--orange { background: var(--wp--custom--wine--orange); }
.ws-type-dot--rose { background: var(--wp--custom--wine--rose); }
.ws-type-dot--sparkling { background: var(--wp--custom--wine--sparkling); }

/* ---- Producto: línea superior, precio por unidad y compra ----------------- */
/* Línea sobre el nombre del producto ("Mix · 12 botellas", la línea de una botella). */
.ws-overline {
	margin: 0;
	color: var(--wp--preset--color--primary);
	font: 700 var(--wp--preset--font-size--x-small) / var(--wp--custom--line-height--normal) var(--wp--preset--font-family--body);
	letter-spacing: 0;
	text-transform: none;
}

/* Precio de referencia junto al precio ("$ 13.650 por botella"). */
.ws-unit-price {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
	white-space: nowrap;
}

/* Compra con cantidad (inc/product-buy.php): selector − 1 + y botón Agregar. */
.ws-buy {
	display: flex;
	gap: var(--wp--preset--spacing--20);
}

.ws-qty {
	display: inline-flex;
	flex: none;
	align-items: center;
	height: var(--wp--custom--button--height-small);
	box-sizing: border-box;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--preset--border-radius--small);
	background: var(--wp--preset--color--surface);
}

.ws-qty button {
	display: grid;
	place-items: center;
	width: 34px;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--muted);
	cursor: pointer;
}

.ws-qty button:hover:not(:disabled) {
	color: var(--wp--preset--color--foreground);
}

.ws-qty button:disabled {
	color: var(--wp--preset--color--subtle);
	cursor: default;
}

.ws-qty__icon {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
}

.ws-qty output {
	min-width: 20px;
	text-align: center;
	font-size: var(--wp--preset--font-size--body-small);
	font-weight: 600;
}

.ws-buy__add:disabled {
	cursor: progress;
}

.ws-unavailable {
	font-size: var(--wp--preset--font-size--body-small);
	font-weight: 600;
	color: var(--wp--preset--color--muted);
}

.ws-buy-status {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--success);
}

.ws-buy-status:has(> span:not(:empty)) {
	margin-block-start: var(--wp--preset--spacing--20);
}

.ws-buy-status.is-error {
	color: var(--wp--preset--color--danger);
}

.ws-buy-status a {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}

/* ---- Beneficios (patrones product-perks y cart-perks) ----------------------- */
/* Lista de garantías con íconos core/icon de la colección del theme. La caja la
   pone cada página (ficha: product-page.css; carro: cart.css). */
.ws-perks {
	--ws-perks-line-width: 1px;
}

.ws-perks > .ws-perks__item {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--wp--preset--spacing--40);
	align-items: center;
	margin: 0;
	padding: var(--wp--preset--spacing--40);
	border-bottom: var(--ws-perks-line-width) solid var(--wp--preset--color--border);
}

.ws-perks > .ws-perks__item:last-child {
	border-bottom: 0;
}

.ws-perks .ws-perks__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 36px;
	height: 36px;
	box-sizing: border-box;
	border: var(--ws-perks-line-width) solid var(--wp--preset--color--primary);
	border-radius: 50%;
	color: var(--wp--preset--color--primary);
}

.ws-perks .ws-perks__icon svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.ws-perks .ws-perks__copy > p {
	margin: 0;
}

.ws-perks .ws-perks__title {
	font-size: var(--wp--preset--font-size--body-small);
	font-weight: 700;
}

.ws-perks .ws-perks__text {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--normal);
}

/* ---- Ítems del carro (Cart, Checkout y Mini-Cart) -------------------------- */
/* Cada producto se ve solo por su nombre: sin la descripción corta que pintan los
   tres bloques. Las variaciones y los datos del ítem (mismo contenedor) se mantienen. */
.wc-block-components-product-metadata__description {
	display: none;
}

/* ---- Paginador (core/query-pagination) ------------------------------------ */
/* Casillas como el selector de cantidad; la página actual, con el degradado de los botones.
   La clase doble le gana al gap del layout del bloque (.wp-container-…, 24 px), que separaba
   la flecha de los números el triple que los números entre sí. */
.wp-block-query-pagination.wp-block-query-pagination,
.wp-block-query-pagination-numbers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
}

.wp-block-query-pagination :is(.page-numbers, .wp-block-query-pagination-previous, .wp-block-query-pagination-next) {
	display: inline-grid;
	place-items: center;
	min-width: var(--wp--custom--button--height-small);
	height: var(--wp--custom--button--height-small);
	margin: 0;
	padding-inline: var(--wp--preset--spacing--20);
	box-sizing: border-box;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--preset--border-radius--small);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--foreground);
	font-size: var(--wp--preset--font-size--body-small);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--none);
	text-decoration: none;
	transition: border-color var(--wp--custom--transition--fast), color var(--wp--custom--transition--fast);
}

.wp-block-query-pagination a:is(.page-numbers, .wp-block-query-pagination-previous, .wp-block-query-pagination-next):hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.wp-block-query-pagination .page-numbers.current {
	border-color: transparent;
	background: var(--wp--preset--gradient--primary);
	color: var(--wp--preset--color--on-primary);
}

.wp-block-query-pagination .page-numbers.dots {
	min-width: 0;
	padding-inline: 0;
	border-color: transparent;
	background: none;
	color: var(--wp--preset--color--muted);
}

/* Sin texto junto a la flecha (showLabel: false): sin el margen de 1ch del core, queda centrada en su casilla. */
.wp-block-query-pagination.wp-block-query-pagination :is(.wp-block-query-pagination-previous-arrow, .wp-block-query-pagination-next-arrow) {
	margin: 0;
	font-size: var(--wp--preset--font-size--lead);
}

/* ---- Formularios --------------------------------------------------------- */
/* Los campos (texto, select, casillas…) están en forms.css. Aquí, solo dónde va el "Ordenar". */
.woocommerce.wc-block-catalog-sorting .woocommerce-ordering {
	margin: 0;
}

/* ---- Sin resultados (búsqueda o filtros que no traen productos) ------------------- */
/* Sin productos no hay nada que filtrar: la columna de filtros (y su "Filtrar" hasta 1023 px) no se muestra y
   el aviso usa todo el ancho. El bloque de WooCommerce solo se pinta cuando la consulta no trae productos. */
.wp-block-columns.ws-shop:has(.wp-block-woocommerce-product-collection-no-results) > .wp-block-column:has(.wc-block-product-filters) {
	display: none;
}

/* Centrado como su título también cuando el texto pasa a dos líneas (mobile). */
.wp-block-woocommerce-product-collection-no-results p {
	text-align: center;
}

/* El botón Buscar del aviso, del alto del campo que acompaña. */
.wp-block-woocommerce-product-collection-no-results .wp-block-search__button {
	min-height: 0;
	height: var(--wp--custom--button--height-small);
	padding-block: 0;
}

/* ---- Barra de resultados (tienda, categorías y búsqueda) --------------------- */
/* Cantidad de resultados a la izquierda y "Ordenar" a la derecha, sobre la grilla. */
.ws-results-bar {
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	margin-block-end: var(--wp--preset--spacing--50);
}

/* WooCommerce le pone font-size: inherit al párrafo: el tamaño va en el bloque. */
.ws-results-bar .wc-block-product-results-count {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.ws-results-bar .woocommerce-result-count {
	float: none;
	margin: 0;
}

/* ---- Encabezado de sección (patrón em-wine-store/section-head) ---------------- */
/* Título y bajada a la izquierda, link con flecha a la derecha, alineados por abajo.
   Hasta 699 px el link baja bajo la bajada. */
.wp-block-group.ws-section-head {
	gap: var(--wp--preset--spacing--50);
	margin-block-end: var(--wp--custom--section--head-space);
}

/* El aire bajo el encabezado es solo su margen: sin sumarle el espacio entre bloques del que sigue. */
.wp-block-group.ws-section-head + * {
	margin-block-start: 0;
}

.ws-section-head .ws-section-head__copy {
	min-width: 0;
}

.ws-section-head .ws-section-head__copy > * {
	margin-block: 0;
}

.ws-section-head .ws-section-head__kicker {
	margin-block-start: var(--wp--preset--spacing--20);
}

.ws-section-head .ws-section-head__link {
	margin-block: 0;
}

@media (max-width: 699px) {
	.wp-block-group.ws-section-head {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--30);
		margin-block-end: var(--wp--custom--section--head-space-compact);
	}

	.ws-section-head .ws-section-head__title {
		font-size: var(--wp--preset--font-size--large);
	}
}

/* ---- Franja de confianza (patrón em-wine-store/trust) ------------------------- */
/* La banda es alignfull (sale del container) y el contenido queda en el ancho
   "wide" del theme. Los íconos son bloques core/icon con la colección del theme
   (assets/icons/*.svg): el cliente los cambia desde el bloque y toman el color del texto. */
.ws-trust {
	--ws-trust-icon: 42px;
	--ws-trust-glyph: 20px;
	border-block: 1px solid var(--wp--preset--color--border);
}

.ws-trust .ws-trust__grid {
	gap: 0;
}

.ws-trust .ws-trust__item {
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	border-inline-end: 1px solid var(--wp--preset--color--border);
}

.ws-trust .ws-trust__item:last-child {
	border-inline-end: 0;
}

.ws-trust .ws-trust__icon {
	display: grid;
	flex: none;
	place-items: center;
	box-sizing: border-box;
	width: var(--ws-trust-icon);
	height: var(--ws-trust-icon);
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: var(--wp--preset--border-radius--full);
	color: var(--wp--preset--color--primary);
}

.ws-trust .ws-trust__icon svg {
	width: var(--ws-trust-glyph);
	height: var(--ws-trust-glyph);
}

.ws-trust .ws-trust__copy {
	min-width: 0;
}

.ws-trust .ws-trust__copy > * {
	margin-block: 0;
}

.ws-trust .ws-trust__title {
	font-size: var(--wp--preset--font-size--body-small);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--normal);
}

.ws-trust .ws-trust__text {
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--normal);
	color: var(--wp--preset--color--muted);
}

@media (max-width: 1023px) {
	.ws-trust {
		--ws-trust-icon: 34px;
	}

	.ws-trust .ws-trust__item {
		padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	}
}

@media (max-width: 699px) {
	.ws-trust {
		--ws-trust-glyph: 18px;
	}

	.ws-trust.has-global-padding {
		padding-inline: 0;
	}

	.ws-trust .ws-trust__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ws-trust .ws-trust__item {
		align-items: flex-start;
		padding: var(--wp--preset--spacing--30);
		border-bottom: 1px solid var(--wp--preset--color--border);
	}

	.ws-trust .ws-trust__item:nth-child(2n) {
		border-inline-end: 0;
	}

	.ws-trust .ws-trust__item:nth-last-child(-n + 2) {
		border-bottom: 0;
	}

	.ws-trust .ws-trust__title {
		font-size: var(--wp--preset--font-size--small);
	}

	.ws-trust .ws-trust__text {
		font-size: var(--wp--preset--font-size--x-small);
	}
}

/* ---- Compacto (≤1023 px: mobile y tablet vertical) ------------------------ */
@media (max-width: 1023px) {
	html {
		scroll-padding-top: calc(var(--wp--custom--header--height-compact) + var(--wp--preset--spacing--40));
	}
}

/* ---- Poca altura en horizontal: el header deja de ser fijo ----------------- */
@media (max-height: 520px) and (orientation: landscape) {
	html {
		scroll-padding-top: var(--wp--preset--spacing--30);
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation: none !important;
	}
}