/*
Theme Name: Blocksy Child — Abril Hand Bags
Theme URI: https://abrilbags.com
Description: Child theme de Blocksy para Abril Hand Bags. Aloja el CSS a medida y las personalizaciones de la tienda. No editar el tema padre.
Author: Abril Hand Bags
Version: 0.40.1
Template: blocksy
Text Domain: blocksy-child
*/

/* ============================================================
   Fase 2 — Identidad de marca (derivada del logo)
   Logo: "ABRIL" (serif display) + "HANDBAGS" (sans geométrica) sobre crema #efe4db.
   ============================================================ */

/* Fuentes de marca auto-hospedadas (reales del logo) */
@font-face {
	font-family: "The Paloma";
	src: url("fonts/the-paloma.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "URW Gothic";
	src: url("fonts/urw-gothic-book.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "URW Gothic";
	src: url("fonts/urw-gothic-demi.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Paleta de marca — Pearl (#FAF8F5) es el claro dominante en toda la web */
	--abril-pearl: #faf8f5;        /* claro dominante (fondo general y secciones) */
	--abril-cream: #efe4db;        /* crema cálida — SOLO como texto claro sobre fondos oscuros */
	--abril-mist: #ebe3da;         /* tono suave para placeholders de imagen (se reemplazan por fotos) */
	--abril-sand: #f1eae1;         /* banda cálida clara para secciones (newsletter) */
	--abril-ink: #2b2622;          /* tinta cálida (titulares) */
	--abril-text: #4a453f;         /* texto de cuerpo */
	--abril-accent: #7c6a48;       /* bronce antiguo refinado (whisper metálico: enlaces, eyebrow, precio) */
	--abril-accent-dark: #5f5038;  /* acento hover */
	--abril-line: #e6ddd2;         /* bordes/hairlines */

	/* Mapeo a la paleta de Blocksy (los !important ganan al Customizer/inline) */
	--theme-palette-color-1: #7c6a48 !important; /* acento metálico (enlaces) */
	--theme-palette-color-2: #5f5038 !important; /* acento hover */
	--theme-palette-color-3: #2b2622 !important; /* titulares */
	--theme-palette-color-4: #4a453f !important; /* texto */
	--theme-palette-color-5: #e6ddd2 !important; /* bordes */
	--theme-palette-color-6: #faf8f5 !important; /* superficie / footer → Pearl */
	--theme-palette-color-7: #faf8f5 !important; /* fondo claro → Pearl */
	--theme-palette-color-8: #ffffff !important; /* blanco */

	--theme-font-family: "URW Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

body {
	font-family: var(--theme-font-family);
	color: var(--abril-text);
	background-color: var(--abril-pearl);
	font-weight: 400;
	letter-spacing: .01em;
}

/* El logo ya es el wordmark de la marca: ocultar el título de sitio duplicado en el header */
header .site-title-container { display: none; }

/* Carrito del header: ocultar el monto (S/0.00) junto al icono; dejar solo icono + contador */
.ct-header-cart .ct-cart-item .ct-label { display: none; }

/* Titulares: serif editorial (eco de "ABRIL") */
h1, h2, h3, h4, h5, h6,
.entry-title,
.woocommerce-loop-product__title,
.product_title {
	font-family: "The Paloma", Georgia, "Times New Roman", serif;
	color: var(--abril-ink);
	font-weight: 400;
	letter-spacing: .005em;
	line-height: 1.15;
}

/* Enlaces en acento */
a { color: var(--abril-accent); }
a:hover { color: var(--abril-accent-dark); }

/* Botones minimalistas: sans geométrica en mayúsculas espaciadas (eco de "HANDBAGS"), sin sombras */
.ct-button,
.button,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce .single_add_to_cart_button {
	font-family: var(--theme-font-family);
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: .8rem;
	font-weight: 500;
	border-radius: 2px;
	box-shadow: none;
}

/* Tarjeta de producto: nombre serif discreto + precio en tinta */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 1.35rem;
	margin-top: .4em;
}
.woocommerce ul.products li.product .price {
	color: var(--abril-ink);
	font-weight: 500;
}

/* Precio de producto en acento sutil en la ficha */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--abril-ink);
}

/* Superficies crema (secciones destacadas) */
.abril-section--cream { background-color: var(--abril-cream); }

/* Aire editorial: hairlines suaves en bordes de WooCommerce */
.woocommerce table.shop_table,
.woocommerce .cart-collaterals { border-color: var(--abril-line); }

/* ============================================================
   Fase 2b — Home (hero, categorías, valores, newsletter, IG)
   ============================================================ */

.abril-topbar {
	background: var(--abril-ink);
	color: var(--abril-cream);
	text-align: center;
	font-size: .72rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	padding: 9px 16px;
}

/* Home: sin título de página, secciones a todo el ancho */
.home .page-title,
.home .entry-header { display: none; }
.home .entry-content > * { margin-block: 0; }

/* El hero full-bleed pega bajo el header. Dos fuentes del hueco en Blocksy:
   1) el espaciado vertical superior del contenedor de contenido, y
   2) el área de título (.hero-section) que sigue en el DOM con su margen aunque
      ocultemos el <h1>. Se anulan ambas solo en la home. */
.home .ct-container-full[data-vertical-spacing*="top"] { padding-top: 0 !important; }
.home .hero-section { display: none !important; }

/* Blocksy da margin-block-end (--theme-content-spacing, 1.5em) a los hijos
   directos de cualquier .is-layout-flow, pensando en un flujo de párrafos.
   Nuestras secciones a medida maquetan por su cuenta —grid, flex y paddings
   propios—, así que ese margen solo mete un hueco que descuadra: en el bloque
   de las fundadoras dejaba la foto sin llegar al fondo de la banda oscura. */
[class*="abril-"].is-layout-flow > *,
[class*="abril-"].is-layout-constrained > * {
	margin-block-end: 0;
}

/* Botón de marca reutilizable */
.abril-btn {
	display: inline-block;
	background: var(--abril-ink);
	color: #fff !important;
	text-decoration: none;
	font-family: var(--theme-font-family);
	text-transform: uppercase;
	letter-spacing: .14em;
	font-size: .78rem;
	font-weight: 500;
	padding: 14px 30px;
	border-radius: 2px;
	transition: background .2s ease;
}
.abril-btn:hover { background: var(--abril-accent); }

.abril-eyebrow {
	text-transform: uppercase;
	letter-spacing: .2em;
	font-size: .72rem;
	color: var(--abril-accent);
	margin: 0 0 14px;
}
.abril-h2 {
	text-align: center;
	font-size: clamp(1.9rem, 4vw, 2.8rem);
	margin: 0 0 36px;
}
.abril-section { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* Placeholder editorial reutilizable (mientras llega la fotografía real).
   Reemplazar por foto: quitar la clase abril-ph y poner la imagen de fondo. */
.abril-ph {
	position: relative; overflow: hidden;
	background: linear-gradient(135deg, #efe7dd 0%, var(--abril-mist) 100%);
	box-shadow: inset 0 0 0 1px rgba(43, 38, 34, .05);
	display: flex; align-items: center; justify-content: center;
}
.abril-ph > span {
	color: #b0a08c; font-size: .72rem; letter-spacing: .14em;
	text-transform: uppercase; text-align: center;
}

/* Enlace-flecha editorial (CTA secundario) */
.abril-link-arrow {
	display: inline-block; text-decoration: none;
	font-family: var(--theme-font-family); text-transform: uppercase;
	letter-spacing: .14em; font-size: .78rem; font-weight: 600;
	color: var(--abril-accent); transition: color .2s ease;
}
.abril-link-arrow:hover { color: var(--abril-accent-dark); }

/* Hero full-bleed inmersivo: imagen a todo el ancho + texto superpuesto.
   Placeholder = duotono cálido; para foto real, definir background-image. */
.abril-hero {
	position: relative;
	min-height: min(88vh, 780px);
	display: flex; align-items: flex-end;
	background: linear-gradient(150deg, #6b6250 0%, #2b2622 78%);
	background-size: cover; background-position: center;
	overflow: hidden;
}
.abril-hero::after {
	content: ""; position: absolute; inset: 0; z-index: 1;
	/* Velo lateral para que el texto se lea sobre cualquier foto. La portada
	   nueva tiene ropa clara justo donde cae el titular, así que el degradado
	   necesita más cuerpo y llegar más a la derecha. Contraste AA (requisito). */
	background: linear-gradient(90deg, rgba(23, 20, 17, .78) 0%, rgba(23, 20, 17, .55) 34%, rgba(23, 20, 17, .18) 66%, rgba(23, 20, 17, .04) 88%);
}
.abril-hero__inner {
	position: relative; z-index: 2; width: 100%;
	max-width: 1200px; margin: 0 auto;
	padding: clamp(40px, 7vw, 96px) 24px clamp(52px, 8vw, 104px);
}
.abril-hero .abril-eyebrow { color: #d9c7a6; }
.abril-hero__title {
	color: #fff; margin: 0 0 22px;
	font-size: clamp(2.8rem, 7.5vw, 5.6rem); line-height: 1.02;
}
.abril-hero__rule { display: block; width: 64px; height: 1px; background: rgba(255, 255, 255, .55); margin: 0 0 22px; }
.abril-hero__sub { color: rgba(255, 255, 255, .88); font-size: 1.15rem; margin: 0 0 32px; max-width: 34ch; }
.abril-hero__actions { display: flex; align-items: center; gap: clamp(18px, 3vw, 30px); flex-wrap: wrap; }
.abril-hero .abril-btn { background: #fff; color: var(--abril-ink) !important; }
.abril-hero .abril-btn:hover { background: var(--abril-cream); }
.abril-hero__link {
	color: #fff; text-decoration: none;
	text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 600;
	transition: color .2s ease;
}
.abril-hero__link:hover { color: #d9c7a6; }

/* Banner de colección (reemplaza el grid de categorías) */
.abril-collection { background: var(--abril-pearl); }
.abril-collection__inner {
	max-width: 1200px; margin: 0 auto; padding: clamp(56px, 8vw, 112px) 24px;
	display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(32px, 6vw, 76px); align-items: center;
}
.abril-collection__media { display: block; aspect-ratio: 4 / 3; }
.abril-collection__media > span { transition: transform .5s ease; }
.abril-collection__media:hover { box-shadow: inset 0 0 0 1px rgba(43, 38, 34, .12); }
.abril-collection__title { font-size: clamp(2rem, 4vw, 3rem); margin: 8px 0 16px; line-height: 1.1; }
.abril-collection__text p { color: var(--abril-text); line-height: 1.75; max-width: 42ch; margin: 0 0 24px; }

/* Destacados */
.abril-featured { padding: clamp(56px, 8vw, 104px) 0; }
.abril-featured__head { text-align: center; margin: 0 0 40px; }
.abril-featured__head .abril-eyebrow { margin: 0 0 8px; }
.abril-featured__head .abril-h2 { margin: 0; }
.abril-featured__more { text-align: center; margin: 44px 0 0; }

/* Banda de marca full-bleed: imagen de oficio + cita superpuesta.
   Sin imagen (fallback) queda el tono oscuro de marca. */
.abril-statement {
	position: relative; background: var(--abril-ink);
	background-size: cover; background-position: center;
}
.abril-statement::after {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: rgba(23, 20, 17, .58);
}
.abril-statement__text {
	position: relative; z-index: 2;
	max-width: 900px; margin: 0 auto; padding: clamp(88px, 14vw, 180px) 24px;
	text-align: center; color: var(--abril-cream);
	font-family: "The Paloma", Georgia, serif; font-style: italic;
	font-size: clamp(1.6rem, 3.6vw, 2.7rem); line-height: 1.35;
	text-shadow: 0 1px 24px rgba(0, 0, 0, .3);
}

/* Íconos de valor */
.abril-values { background: var(--abril-pearl); border-block: 1px solid var(--abril-line); }
/* Pegada al hero, la fila deja de ser una sección independiente y pasa a ser su
   ZÓCALO: hereda el fondo oscuro, se compacta y pierde el hairline superior.
   Así el hero y los valores se leen como un solo bloque, y el salto a claro
   ocurre donde empieza el contenido de verdad. */
.abril-hero + .abril-values {
	border-top: 0;
	/* Arena cálida, la misma banda que el newsletter: da respiro tras un hero
	   fotográfico intenso y no puede confundirse con la barra de avisos, que es
	   oscura. Dos bandas claras marcan el ritmo de la página. */
	background: var(--abril-sand);
	border-bottom-color: var(--abril-line);
	/* Hilo de bronce que la cose al hero. */
	box-shadow: inset 0 2px 0 rgba(124, 106, 72, .55);
}
.abril-hero + .abril-values .abril-values__inner {
	padding: clamp(34px, 4.2vw, 54px) 24px;
	gap: 0;
}
.abril-hero + .abril-values .abril-value {
	padding: 0 clamp(16px, 2.5vw, 34px);
}
.abril-hero + .abril-values .abril-value + .abril-value {
	border-left: 1px solid var(--abril-line);
}
.abril-hero + .abril-values .abril-value svg {
	width: 30px; height: 30px; stroke: var(--abril-accent); opacity: 1;
}
.abril-hero + .abril-values .abril-value span {
	margin-top: 14px; color: var(--abril-ink); font-size: .82rem;
}
/* La línea que convierte la barra en contenido: dice qué significa cada
   promesa, en vez de dejar tres etiquetas sueltas. */
.abril-value__note {
	margin: 8px auto 0; max-width: 26ch;
	font-size: .88rem; line-height: 1.5;
	color: var(--abril-text);
	text-transform: none; letter-spacing: 0;
}
.abril-values__inner {
	max-width: 1100px; margin: 0 auto; padding: clamp(44px, 6vw, 72px) 24px;
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; text-align: center;
}
.abril-value svg { width: 40px; height: 40px; stroke: var(--abril-accent); }
.abril-value span {
	display: block; margin-top: 12px; text-transform: uppercase;
	letter-spacing: .14em; font-size: .82rem; color: var(--abril-ink);
}

/* Newsletter — banda cálida clara (arena), texto oscuro */
.abril-news { background: var(--abril-sand); color: var(--abril-text); text-align: center; border-block: 1px solid var(--abril-line); }
.abril-news__inner { max-width: 620px; margin: 0 auto; padding: clamp(48px, 7vw, 84px) 24px; }
.abril-news h2 { color: var(--abril-ink); margin: 0 0 10px; font-size: clamp(1.8rem, 4vw, 2.6rem); }
.abril-news p { color: var(--abril-text); margin: 0 0 26px; }
.abril-news__form { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.abril-news__form input[type="email"] {
	flex: 1; min-width: 220px; max-width: 360px; padding: 13px 16px;
	border: 1px solid var(--abril-line); background: #fff; color: var(--abril-ink); border-radius: 2px;
}
.abril-news__form input[type="email"]::placeholder { color: #9a9089; }
.abril-news .abril-btn { background: var(--abril-ink); }
.abril-news .abril-btn:hover { background: var(--abril-accent); }
.abril-news__hp { position: absolute; left: -9999px; }
.abril-news__msg { margin: 16px 0 0; font-size: .9rem; }
.abril-news__msg--ok { color: #3f7a4a; }
.abril-news__msg--err { color: #a1362c; }

/* Instagram */
.abril-ig { padding: clamp(48px, 7vw, 84px) 0; }
.abril-ig__grid {
	max-width: 1200px; margin: 0 auto; padding: 0 24px;
	display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px;
}
.abril-ig__tile { aspect-ratio: 1; background: var(--abril-mist); display: block; transition: opacity .2s ease; }
.abril-ig__tile:hover { opacity: .85; }

/* Responsive (mobile-first cede a una columna) */
@media (max-width: 782px) {
	.abril-hero { min-height: min(78vh, 620px); }
	.abril-collection__inner { grid-template-columns: 1fr; }
	.abril-collection__media { aspect-ratio: 3 / 2; }
	.abril-values__inner { grid-template-columns: 1fr; gap: 28px; }
	.abril-hero + .abril-values .abril-values__inner { gap: 0; }
	.abril-hero + .abril-values .abril-value { padding: 26px 0; }
	.abril-hero + .abril-values .abril-value + .abril-value {
		border-left: 0; border-top: 1px solid var(--abril-line);
	}
	.abril-ig__grid { grid-template-columns: repeat(3, 1fr); }
}

/* Peso Demi (URW Gothic 600) en elementos geométricos en mayúsculas */
.abril-topbar,
.abril-eyebrow,
.abril-value span,
.abril-btn,
.ct-button,
.button,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce .single_add_to_cart_button { font-weight: 600; }

/* ============================================================
   Color: botones y títulos de producto en Espresso; bronce solo como acento
   ============================================================ */

/* Botones sólidos en espresso (unifica hero/tienda); hover en bronce */
.ct-button,
.button,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce .single_add_to_cart_button {
	background-color: var(--abril-ink) !important;
	color: #fff !important;
}
.ct-button:hover,
.button:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .single_add_to_cart_button:hover {
	background-color: var(--abril-accent) !important;
}

/* Títulos de producto en tinta (no en el acento) — calma el grid */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product a { color: var(--abril-ink); }
.woocommerce ul.products li.product a:hover .woocommerce-loop-product__title { color: var(--abril-accent); }

/* Precio: whisper de bronce */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price { color: var(--abril-accent); }

/* ============================================================
   Card de producto (inspirado en reference_04) + hover 2 imágenes
   ============================================================ */
.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--abril-line);
	border-radius: 6px;
	overflow: hidden;
	text-align: left;
	transition: box-shadow .28s ease, transform .28s ease;
}
.woocommerce ul.products li.product:hover {
	box-shadow: 0 16px 36px rgba(43, 38, 34, .10);
	transform: translateY(-3px);
}

/* Imagen: contenedor 3:4 con el hover-swap nativo de Blocksy */
.woocommerce ul.products li.product > figure { order: 0; margin: 0; }
.woocommerce ul.products li.product .ct-media-container {
	display: block;
	aspect-ratio: 3 / 4;
	background: var(--abril-mist);
	overflow: hidden;
}
.woocommerce ul.products li.product .ct-media-container img {
	width: 100%; height: 100%; object-fit: cover;
}

/* Orden editorial: categoría → nombre → precio → acción */
.woocommerce ul.products li.product .entry-meta {
	order: 1; margin: 16px 18px 0; padding: 0; border: 0;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	order: 2; margin: 5px 18px 0; font-size: 1.3rem; line-height: 1.2;
}
.woocommerce ul.products li.product .price { order: 3; margin: 4px 18px 0; font-size: 1rem; }
/* Card sin botón "Seleccionar opciones": se muestran los swatches de color en su
   lugar y toda la card enlaza a la ficha (imagen + título ya son clicables). */
.woocommerce ul.products li.product .ct-woo-card-actions { display: none; }
.woocommerce ul.products li.product .abril-card-swatches {
	order: 4; display: flex; align-items: center; gap: 9px;
	margin: auto 18px 20px; padding-top: 16px; text-decoration: none;
}
.abril-card-swatch {
	width: 16px; height: 16px; border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(43, 38, 34, .18);
	transition: transform .2s ease;
}
.woocommerce ul.products li.product:hover .abril-card-swatch { transform: scale(1.1); }

/* "+N" cuando la gama no cabe en la card */
.abril-card-swatch-more {
	font-family: var(--theme-font-family);
	font-size: .72rem; font-weight: 600; letter-spacing: .04em;
	color: var(--abril-accent);
}

/* Encabezado de la Tienda: contenedor del título más ajustado (menos aire
   arriba/abajo) para que el listado quede más pegado al top. El alto extra venía
   del hero + el padding vertical de .entry-header.ct-container-narrow. */
.post-type-archive-product .hero-section[data-type="type-2"] {
	padding-top: clamp(16px, 2.2vw, 32px);
	padding-bottom: 0;
}
.post-type-archive-product .hero-section .entry-header {
	padding-block: 0;          /* se conserva el padding horizontal del contenedor */
	min-height: 0;             /* Blocksy fuerza min-height:250px en el contenedor */
}
.post-type-archive-product .hero-section .page-title { margin-block: 0; }
.post-type-archive-product .ct-container[data-vertical-spacing] { padding-top: clamp(6px, 1vw, 14px); }

/* Categoría: pequeña, mayúsculas, bronce */
.woocommerce ul.products li.product .entry-meta .meta-categories a {
	font-family: var(--theme-font-family);
	text-transform: uppercase;
	letter-spacing: .14em;
	font-size: .68rem;
	font-weight: 600;
	color: var(--abril-accent);
}

/* ============================================================
   Ficha de producto (inspirada en reference_03)
   ============================================================ */
/* Categoría sobre el título, en bronce */
.abril-single-cat { margin: 0 0 8px; }
.abril-single-cat a {
	font-family: var(--theme-font-family);
	text-transform: uppercase;
	letter-spacing: .16em;
	font-size: .7rem;
	font-weight: 600;
	color: var(--abril-accent);
	text-decoration: none;
}
.abril-single-cat a:hover { color: var(--abril-accent-dark); }

/* Título de producto más presente */
.woocommerce div.product .product_title.entry-title { font-size: clamp(1.8rem, 3.5vw, 2.4rem); line-height: 1.15; }

/* Descripción corta = frase de la marca para el modelo (bajo el precio) */
.woocommerce div.product .woocommerce-product-details__short-description {
	font-family: "The Paloma", Georgia, serif;
	font-size: clamp(1.05rem, 1.6vw, 1.25rem);
	line-height: 1.45;
	color: var(--abril-ink);
	/* Sin margin: el espaciado del summary lo controla Blocksy
	   (--product-element-spacing, ajustable desde el Customizer). */
}

/* Tríada de atributos al cierre de la descripción larga */
.abril-desc-tags {
	margin: 18px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--abril-line);
	font-family: var(--theme-font-family);
	text-transform: uppercase;
	letter-spacing: .14em;
	font-size: .7rem;
	font-weight: 600;
	color: var(--abril-accent);
}

/* Acordeón (Descripción / Envío): dividido con hairlines, aire editorial */
.woocommerce-tabs .ct-accordion-heading {
	border-top: 1px solid var(--abril-line);
	padding: 16px 0;
}
.woocommerce-tabs .ct-accordion-heading:last-of-type,
.woocommerce-tabs .ct-accordion > *:last-child .ct-accordion-heading { }

/* Meta de la ficha (Color / SKU / Categoría) en filas legibles */
.woocommerce div.product .product_meta > span { display: block; margin: 0 0 6px; font-size: .85rem; color: var(--abril-text); }
.woocommerce div.product .product_meta .abril-meta-color > span,
.woocommerce div.product .product_meta .sku,
.woocommerce div.product .product_meta .posted_in a { color: var(--abril-ink); font-weight: 600; }

/* Swatches de color (producto variable): estado seleccionado/hover en tinta */
.woo-variation-swatches .variable-item.color-variable-item {
	box-shadow: 0 0 0 1px var(--abril-line);
}
.woo-variation-swatches .variable-item.color-variable-item:hover,
.woo-variation-swatches .variable-item.color-variable-item.selected {
	box-shadow: 0 0 0 2px var(--abril-ink);
}

/* Reproductor de video debajo de la galería (mu-plugin abril-product-video) */
.abril-product-video { margin-top: 20px; }
.abril-product-video__label {
	margin: 0 0 8px;
	text-transform: uppercase; letter-spacing: .16em;
	font-size: .68rem; font-weight: 600; color: var(--abril-accent);
}
.abril-product-video__frame {
	position: relative; aspect-ratio: 16 / 9; overflow: hidden;
	background: var(--abril-mist); border-radius: 6px;
}
.abril-product-video__frame iframe,
.abril-product-video__frame video {
	position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
	object-fit: cover; display: block;
}

/* Título de "También te puede gustar" (relacionados) en serif */
.related .ct-module-title,
.up-sells .ct-module-title {
	font-family: "The Paloma", Georgia, serif;
	color: var(--abril-ink);
	text-align: center;
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	margin-bottom: 28px;
}

/* ============================================================
   Vista About (inspirada en reference_05): hero editorial con
   retrato superpuesto → declaración → historia a 2 columnas →
   bloque oscuro de la fundadora.
   ============================================================ */

/* El hero "About" hace de encabezado: ocultar el título por defecto.
   Igual que en la home, el hueco bajo el header viene de dos sitios en Blocksy:
   1) el espaciado vertical superior del contenedor de contenido, y
   2) el .hero-section, que sigue en el DOM con su espaciado aunque ocultemos
      el <h1> que lleva dentro.
   Se anulan ambos para que la banda con la fotografía pegue bajo el header. */
.abril-about .entry-header,
.abril-about .page-title { display: none; }
.abril-about .hero-section { display: none !important; }
.abril-about .ct-container-full[data-vertical-spacing*="top"] { padding-top: 0 !important; }
.abril-about .entry-content > * { margin-block: 0; }

/* Con fotografía: se muestra a sangre dentro de su hueco. */
.abril-about-story__media,
.abril-about-founder__media {
	background-size: cover; background-position: center;
}
/* Encuadre anclado a los rostros, que están en el tercio superior de la toma.
   El hueco es un panel de altura variable: cuanto más ancha la pantalla, más
   bajo se vuelve y más recorta. Alineando la posición al punto de interés, las
   caras quedan dentro en cualquier anchura, no solo en la que se probó. */
.abril-about-founder__media { background-position: center 22%; }
/* Sin fotografía (.abril-ph): recuadro rotulado, para que el hueco se explique. */
.abril-about-story__media.abril-ph,
.abril-about-founder__media.abril-ph {
	display: flex; align-items: center; justify-content: center;
	color: #b6a794; font-size: .72rem; letter-spacing: .12em;
	text-transform: uppercase; text-align: center;
}

/* — Hero: banda full-bleed con foto de taller + velo; "About" centrado.
   Sin foto (fallback) queda el degradado oscuro de marca. — */
.abril-about-hero {
	position: relative;
	background: var(--abril-pearl);
}
.abril-about-hero__band {
	position: relative;
	display: flex; align-items: center; justify-content: center;
	height: clamp(280px, 40vw, 560px);
	background: linear-gradient(160deg, #5f5747 0%, #2b2622 100%);
	/* Encuadre amplio: se ve la escena entera, con la fachada y los bolsos. */
	background-size: cover; background-position: center 72%;
}
.abril-about-hero__band::after {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: rgba(23, 20, 17, .45);
}
.abril-about-hero__title {
	position: relative;
	margin: 0;
	text-align: center;
	color: #fff;
	font-size: clamp(3rem, 12vw, 8rem);
	letter-spacing: .06em;
	line-height: 1;
	z-index: 2;
}

/* Al ensancharse la pantalla la banda se vuelve proporcionalmente más baja y
   la franja visible de la foto se estrecha. Si el encuadre no acompañara, las
   caras se saldrían por arriba. Estos saltos lo van cerrando sobre ellas, de
   modo que en un portátil se ve la escena completa y en un monitor grande el
   retrato del grupo. */
@media (min-width: 1500px) {
	.abril-about-hero__band { background-position: center 64%; }
}
@media (min-width: 1900px) {
	.abril-about-hero__band { background-position: center 57%; }
}
@media (min-width: 2300px) {
	.abril-about-hero__band { background-position: center 54%; }
}

/* — Declaración / misión — */
.abril-about-intro { background: var(--abril-pearl); }
.abril-about-intro__inner {
	max-width: 780px; margin: 0 auto;
	padding: clamp(28px, 5vw, 60px) 24px clamp(44px, 7vw, 84px);
	text-align: center;
}
.abril-about-intro__statement {
	margin: 0;
	font-size: clamp(1.7rem, 3.6vw, 2.7rem);
	line-height: 1.28;
}

/* — Historia a 2 columnas — */
.abril-about-story { background: var(--abril-pearl); }
.abril-about-story__inner {
	max-width: 1100px; margin: 0 auto;
	padding: clamp(40px, 6vw, 84px) 24px;
	display: grid; grid-template-columns: 1fr 1fr;
	gap: clamp(32px, 5vw, 72px); align-items: start;
}
.abril-about-story__text p {
	margin: 0 0 1.2em; color: var(--abril-text);
	line-height: 1.75; font-size: 1rem;
}
.abril-about-story__quote {
	font-family: "The Paloma", Georgia, serif;
	font-style: italic; color: var(--abril-ink);
	font-size: clamp(1.4rem, 2.4vw, 1.9rem);
	line-height: 1.35; margin: 1.4em 0; padding: 0; border: 0;
}
.abril-about-story__media {
	aspect-ratio: 4 / 5; background-color: var(--abril-mist); margin-bottom: 22px;
}
.abril-about-story__inspo {
	font-family: "The Paloma", Georgia, serif;
	color: var(--abril-ink);
	font-size: clamp(1.2rem, 2vw, 1.6rem);
	line-height: 1.4; margin: 0;
}

/* — Bloque de la fundadora (fondo oscuro, split) — */
/* El fondo oscuro va a sangre, pero el contenido se acota y se centra: las dos
   columnas laterales absorben el ancho sobrante. Así el bloque mide lo mismo en
   un portátil que en un monitor grande, y —lo que importa aquí— el recorte de
   la fotografía deja de depender del tamaño de la ventana. */
.abril-about-founder {
	display: grid;
	grid-template-columns:
		minmax(0, 1fr)
		minmax(0, 600px)
		minmax(0, 600px)
		minmax(0, 1fr);
	align-items: stretch; background: var(--abril-ink);
}
.abril-about-founder__media { grid-column: 2; }
.abril-about-founder__panel { grid-column: 3; }
.abril-about-founder__media {
	/* Altura fija en escritorio (el 46vw anterior crecía con la ventana y movía
	   el encuadre); proporcional solo mientras la pantalla es menor. */
	min-height: clamp(360px, 44vw, 520px);
	/* background-color, no el shorthand: 'background' resetearía el
	   background-position del encuadre y la foto se recortaría por arriba. */
	background-color: #3a332d; color: #8f8578;
}
.abril-about-founder__panel {
	display: flex; flex-direction: column; justify-content: center;
	padding: clamp(40px, 6vw, 88px) clamp(28px, 5vw, 72px);
	text-align: center; color: var(--abril-cream);
}
.abril-about-founder__script {
	margin: 0 0 4px;
	font-family: "The Paloma", Georgia, serif; font-style: italic;
	font-size: clamp(1.3rem, 2.4vw, 1.9rem);
	color: var(--abril-cream); opacity: .85;
}
.abril-about-founder__name {
	margin: 0 0 20px; color: #fff;
	font-size: clamp(2.4rem, 5vw, 4rem);
	letter-spacing: .14em; text-transform: uppercase;
}
.abril-about-founder__role {
	margin: 0 0 22px;
	font-family: "The Paloma", Georgia, serif; font-style: italic;
	font-size: clamp(1.1rem, 1.8vw, 1.4rem);
	color: var(--abril-cream); line-height: 1.4;
}
.abril-about-founder__panel p:not(.abril-about-founder__script):not(.abril-about-founder__role) {
	margin: 0; color: rgba(239, 228, 219, .82);
	line-height: 1.75; font-size: .95rem;
}

/* — Frase de cierre (remate del relato de marca) — */
.abril-about-closing { background: var(--abril-sand); }
.abril-about-closing__inner {
	max-width: 900px; margin: 0 auto;
	padding: clamp(48px, 8vw, 96px) 24px;
	text-align: center;
}
.abril-about-closing__line {
	margin: 0;
	font-family: "The Paloma", Georgia, serif;
	color: var(--abril-ink);
	font-size: clamp(1.5rem, 3.2vw, 2.4rem);
	line-height: 1.32;
	text-wrap: balance;
}

/* Responsive: apilar en una columna en móvil */
@media (max-width: 782px) {
	.abril-about-story__inner { grid-template-columns: 1fr; }
	.abril-about-founder { grid-template-columns: 1fr; }
	.abril-about-founder__media,
	.abril-about-founder__panel { grid-column: auto; }
	.abril-about-founder__media { min-height: clamp(280px, 60vw, 380px); }
}

/* ============================================================
   Vista Contacto (inspirada en reference_06): formulario editorial
   a la izquierda + imagen y datos de contacto a la derecha.
   ============================================================ */

/* El hero "Hablemos" hace de encabezado: ocultar el título por defecto */
.abril-contacto .entry-header,
.abril-contacto .page-title { display: none; }
.abril-contacto .entry-content > * { margin-block: 0; }

.abril-contact { background: var(--abril-pearl); }
.abril-contact__inner {
	max-width: 1200px; margin: 0 auto;
	padding: clamp(40px, 7vw, 96px) 24px;
	display: grid; grid-template-columns: 1.05fr .95fr;
	gap: clamp(32px, 6vw, 80px); align-items: start;
}
.abril-contact__title {
	margin: 0 0 22px;
	font-size: clamp(3rem, 7vw, 5.5rem); line-height: 1; letter-spacing: .01em;
}
.abril-contact__intro {
	max-width: 46ch; margin: 0 0 40px;
	color: var(--abril-text); line-height: 1.7;
}
.abril-contact__intro a { color: var(--abril-accent); }

/* Formulario: campos minimalistas con línea inferior (eco de la referencia) */
.abril-contact__hp { position: absolute; left: -9999px; }
.abril-contact__field { margin: 0 0 26px; }
.abril-contact__field label {
	display: block; margin: 0 0 8px;
	text-transform: uppercase; letter-spacing: .16em;
	font-size: .68rem; font-weight: 600; color: var(--abril-accent);
}
.abril-contact__field input,
.abril-contact__field textarea {
	width: 100%; box-sizing: border-box;
	border: 0; border-bottom: 1px solid var(--abril-line); border-radius: 0;
	background: transparent; padding: 8px 0;
	font-family: var(--theme-font-family); font-size: 1rem; color: var(--abril-ink);
	transition: border-color .2s ease;
}
.abril-contact__field input:focus,
.abril-contact__field textarea:focus {
	outline: none; border-bottom-color: var(--abril-ink);
}
.abril-contact__field textarea { resize: vertical; min-height: 120px; line-height: 1.6; }

.abril-contact__submit-row { display: flex; justify-content: flex-end; }
.abril-contact__submit,
.abril-contact__submit:hover,
.abril-contact__submit:focus {
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0;
	cursor: pointer;
	font-family: "The Paloma", Georgia, serif;
	font-style: italic;
	font-size: 1.4rem;
	letter-spacing: .01em;
	transition: color .2s ease;
}
.abril-contact__submit { color: var(--abril-ink); }
.abril-contact__submit:hover,
.abril-contact__submit:focus { color: var(--abril-accent); }

.abril-contact__msg { margin: 0 0 24px; font-size: .95rem; }
.abril-contact__msg--ok { color: #3f7a4a; }
.abril-contact__msg--err { color: #a1362c; }

/* Aside: imagen + datos de contacto */
.abril-contact__media {
	aspect-ratio: 3 / 4; margin-bottom: 28px;
	background: var(--abril-mist) center / cover no-repeat;
}
/* Sin foto, el bloque queda como recuadro rotulado */
.abril-contact__media.abril-ph {
	display: flex; align-items: center; justify-content: center;
	color: #b6a794; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
}
.abril-contact__details p { margin: 0 0 4px; color: var(--abril-text); line-height: 1.6; }
.abril-contact__details .abril-eyebrow { margin: 22px 0 6px; }
.abril-contact__details .abril-eyebrow:first-child { margin-top: 0; }
.abril-contact__details a { color: var(--abril-accent); }
.abril-contact__note { margin-top: 24px; font-style: italic; font-size: .9rem; }

@media (max-width: 782px) {
	.abril-contact__inner { grid-template-columns: 1fr; }
	.abril-contact__media { aspect-ratio: 4 / 3; margin: 12px 0 20px; }
}

/* ============================================================
   Carrito — barra de confianza, sugerencias y estado vacío
   ============================================================ */
.abril-cart-extras { max-width: 1200px; margin: clamp(48px, 7vw, 96px) auto 0; padding: 0 24px; }

/* Barra de confianza */
.abril-cart-trust {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
	padding: clamp(28px, 4vw, 44px) clamp(20px, 4vw, 48px);
	background: var(--abril-pearl); border: 1px solid var(--abril-line);
	text-align: center;
}
.abril-cart-trust__item { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.abril-cart-trust__item svg { width: 30px; height: 30px; stroke: var(--abril-accent); }
.abril-cart-trust__item span {
	font-size: .8rem; letter-spacing: .06em; color: var(--abril-ink); line-height: 1.4; max-width: 22ch;
}

/* Sugerencias de producto (reusa la card del shop) */
.abril-cart-suggestions { margin-top: clamp(44px, 6vw, 80px); }
.abril-cart-suggestions .abril-featured__head { text-align: center; margin: 0 0 32px; }
.abril-cart-suggestions .abril-featured__head .abril-eyebrow { margin: 0 0 8px; }
.abril-cart-suggestions .woocommerce { padding: 0; }

/* Estado vacío: separar la barra de confianza cuando va tras las sugerencias */
.abril-cart-suggestions + .abril-cart-trust { margin-top: clamp(44px, 6vw, 80px); }

/* Estado vacío: se ocultan el aviso y botón por defecto (los reemplaza .abril-cart-empty) */
.woocommerce-cart .cart-empty.woocommerce-info,
.woocommerce-cart .return-to-shop { display: none; }

/* Estado vacío con vida */
.abril-cart-empty {
	max-width: 620px; margin: clamp(24px, 4vw, 48px) auto clamp(8px, 2vw, 20px);
	text-align: center; padding: 0 24px;
}
.abril-cart-empty .abril-eyebrow { margin: 0 0 12px; }
.abril-cart-empty__title { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 14px; line-height: 1.15; }
.abril-cart-empty__text { color: var(--abril-text); line-height: 1.7; margin: 0 0 28px; }

@media (max-width: 782px) {
	.abril-cart-trust { grid-template-columns: 1fr; gap: 22px; }
}

/* ============================================================
   Envío — sección "Métodos de envío" del checkout y total
   ============================================================ */

/* OJO: no tocar el display de esta fila ni de su celda.
   Blocksy pinta el envío como un <td colspan="2"> con su propio encabezado
   (.ct-shipping-heading), así que la fila YA ocupa las dos columnas del resumen.
   Poner display:block en ese td lo saca del modelo de tabla, el colspan deja de
   valer y el bloque se encierra en el ancho de la primera columna. */

/* Encabezado de la sección, con la tipografía de marca. */
.woocommerce-checkout .ct-shipping-heading {
	font-family: "The Paloma", Georgia, serif;
	font-size: 1.15rem; font-weight: 400; letter-spacing: .01em;
	color: var(--abril-ink);
	margin-bottom: 12px;
}

/* Las dos opciones, como tarjetas seleccionables a todo el ancho de la celda. */
.woocommerce-checkout ul#shipping_method {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: 10px;
	width: 100%;
}
.woocommerce-checkout ul#shipping_method li {
	margin: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas: "radio label" ".  desc";
	align-items: center;
	gap: 2px 12px;
	width: 100%;
	padding: 14px 16px;
	background: #fff;
	border: 1px solid var(--abril-line);
	border-radius: 2px;
	cursor: pointer;
	transition: border-color .18s ease, box-shadow .18s ease;
}
/* Blocksy separa los li con margin-bottom; aquí el hueco lo pone el gap. */
.woocommerce-checkout ul#shipping_method li:not(:last-child) { margin-bottom: 0; }
.woocommerce-checkout ul#shipping_method li:hover { border-color: var(--abril-accent); }

/* Estado elegido: el borde en tinta marca la opción activa sin ruido. */
.woocommerce-checkout ul#shipping_method li:has(input:checked) {
	border-color: var(--abril-ink);
	box-shadow: inset 0 0 0 1px var(--abril-ink);
}

.woocommerce-checkout ul#shipping_method li input.shipping_method {
	grid-area: radio;
	width: 18px; height: 18px; margin: 0;
	accent-color: var(--abril-ink);
	cursor: pointer;
}
/* El label ocupa su columna entera para que el precio caiga contra el borde. */
.woocommerce-checkout ul#shipping_method li label {
	grid-area: label; margin: 0;
	display: flex; flex-wrap: wrap; align-items: baseline;
	justify-content: space-between; gap: 8px;
	width: 100%;
	font-size: .95rem; color: var(--abril-ink);
	cursor: pointer;
}
.woocommerce-checkout ul#shipping_method li label .woocommerce-Price-amount {
	font-weight: 600; white-space: nowrap;
}
.abril-ship__desc {
	grid-area: desc;
	font-size: .78rem; line-height: 1.45; color: var(--abril-text); opacity: .8;
}

/* Total: el importe que de verdad se paga, ahora que suma el envío. */
.woocommerce-checkout-review-order-table tfoot tr.order-total th,
.woocommerce-checkout-review-order-table tfoot tr.order-total td {
	border-top: 1px solid var(--abril-ink);
	padding-top: 14px;
	color: var(--abril-ink);
}
.woocommerce-checkout-review-order-table tfoot tr.order-total .woocommerce-Price-amount {
	font-size: 1.15rem; font-weight: 600;
}

@media (max-width: 480px) {
	.woocommerce-checkout ul#shipping_method li { padding: 12px 14px; }
	.woocommerce-checkout ul#shipping_method li label { font-size: .9rem; }
}

/* ============================================================
   Footer de marca (cálido claro, con columnas) — hook blocksy:footer:before
   ============================================================ */
.abril-footer { background: var(--abril-sand); color: var(--abril-text); border-top: 1px solid var(--abril-line); }
.abril-footer__inner {
	max-width: 1200px; margin: 0 auto;
	padding: clamp(48px, 7vw, 88px) 24px clamp(36px, 5vw, 56px);
	display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: clamp(28px, 5vw, 64px);
}
.abril-footer__logo {
	font-family: "The Paloma", Georgia, serif;
	font-size: 2rem; letter-spacing: .04em; color: var(--abril-ink); margin: 0 0 14px;
}
.abril-footer__tagline { color: var(--abril-text); line-height: 1.7; font-size: .92rem; margin: 0 0 20px; max-width: 34ch; }
.abril-footer__ig {
	display: inline-flex; align-items: center; gap: 9px; color: var(--abril-ink);
	text-decoration: none; font-size: .85rem; letter-spacing: .04em; transition: color .2s ease;
}
.abril-footer__ig svg { width: 18px; height: 18px; }
.abril-footer__ig:hover { color: var(--abril-accent); }
.abril-footer__title {
	font-family: var(--theme-font-family); text-transform: uppercase;
	letter-spacing: .16em; font-size: .72rem; font-weight: 600;
	color: var(--abril-accent); margin: 0 0 18px;
}
.abril-footer__col { display: flex; flex-direction: column; }
.abril-footer__col a {
	color: var(--abril-text); text-decoration: none;
	font-size: .9rem; line-height: 1; padding: 7px 0; transition: color .2s ease;
}
.abril-footer__col a:hover { color: var(--abril-accent); }
.abril-footer__contact p { color: var(--abril-text); font-size: .88rem; line-height: 1.6; margin: 10px 0 0; }
.abril-footer__contact a { padding: 0 0 4px; }

/* Fila de copyright de Blocksy → mismo cálido claro, para fundirse con el footer de marca */
.ct-footer[data-id="type-1"] {
	background-color: var(--abril-sand) !important;
	border-top: 1px solid var(--abril-line);
}
.ct-footer-copyright { color: #8a8178; font-size: .82rem; }

@media (max-width: 880px) {
	.abril-footer__inner { grid-template-columns: 1fr 1fr; gap: 36px 32px; }
	.abril-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
	.abril-footer__inner { grid-template-columns: 1fr; }
}

/* ============================================================
   Pago con Yape o Plin — caja del checkout, página de gracias
   (mu-plugin abril-pago-yape)
   ============================================================ */

/* La caja que WooCommerce abre bajo el método elegido: fuera el gris de serie. */
.woocommerce-checkout .payment_box.payment_method_abril_yape {
	background: var(--abril-sand);
	border-radius: 2px;
	color: var(--abril-text);
	font-size: .9rem;
}
.woocommerce-checkout .payment_box.payment_method_abril_yape::before {
	border-bottom-color: var(--abril-sand);
}
.abril-yape__intro { margin: 0 0 14px; line-height: 1.6; font-size: .9rem; }

/* Tarjeta del número: el dato que el comprador va a copiar, sin competencia. */
.abril-yape__card {
	background: #fff;
	border: 1px solid var(--abril-line);
	border-radius: 2px;
	padding: 16px 18px;
	text-align: center;
}
.abril-yape__label {
	margin: 0 0 6px;
	font-size: .7rem; font-weight: 600;
	letter-spacing: .16em; text-transform: uppercase;
	color: var(--abril-accent);
}
.abril-yape__card .abril-yape__numero {
	display: flex; flex-wrap: wrap;
	align-items: center; justify-content: center; gap: 12px;
	margin: 0;
	font-size: clamp(1.5rem, 5vw, 1.9rem); font-weight: 600;
	letter-spacing: .06em; color: var(--abril-ink);
}
.abril-yape__copy {
	padding: 6px 12px;
	background: none;
	border: 1px solid var(--abril-line);
	border-radius: 2px;
	font-family: inherit; font-size: .7rem; font-weight: 600;
	letter-spacing: .12em; text-transform: uppercase;
	color: var(--abril-text);
	cursor: pointer;
	transition: border-color .18s ease, color .18s ease;
}
.abril-yape__copy:hover { border-color: var(--abril-accent); color: var(--abril-accent); }
.abril-yape__copy.is-done { border-color: var(--abril-ink); color: var(--abril-ink); }
.abril-yape__titular {
	margin: 8px 0 0;
	font-size: .85rem; letter-spacing: .02em; color: var(--abril-text);
}
.abril-yape__monto {
	margin: 12px 0 0; padding-top: 12px;
	border-top: 1px solid var(--abril-line);
	font-size: .85rem; color: var(--abril-text);
}
.abril-yape__monto strong { color: var(--abril-ink); font-size: 1.05rem; }
.abril-yape__ref { margin: 6px 0 0; font-size: .78rem; color: #8a8178; }

/* Los tres pasos: numeración discreta, sin viñetas de serie. */
.abril-yape__pasos {
	margin: 16px 0 0; padding: 0 0 0 18px;
	font-size: .85rem; line-height: 1.7; color: var(--abril-text);
}
.abril-yape__pasos li { margin: 0 0 4px; }
.abril-yape__pasos li::marker { color: var(--abril-accent); font-weight: 600; }

/* Número de operación: campo opcional, que no compita con el resto del formulario. */
.woocommerce-checkout .abril-yape__op { margin: 16px 0 0; padding: 0; }
.woocommerce-checkout .abril-yape__op label {
	font-size: .78rem; letter-spacing: .04em; color: var(--abril-text);
}
.woocommerce-checkout .abril-yape__op input {
	background: #fff;
	border: 1px solid var(--abril-line);
	border-radius: 2px;
}

/* WooCommerce fija el tamaño de los <p> de la caja de pago con un selector con id
   (`#payment ul.payment_methods .payment_box p { font-size: 14px }`), que gana a
   cualquier clase. Para que la tarjeta se vea igual en el checkout y en la página
   de gracias, aquí se repiten SOLO los tamaños con ese mismo peso. */
#payment ul.payment_methods .payment_box p.abril-yape__intro { font-size: .9rem; }
#payment ul.payment_methods .payment_box p.abril-yape__label { font-size: .7rem; }
#payment ul.payment_methods .payment_box p.abril-yape__numero { font-size: clamp(1.5rem, 5vw, 1.9rem); }
#payment ul.payment_methods .payment_box p.abril-yape__titular { font-size: .85rem; }
#payment ul.payment_methods .payment_box p.abril-yape__monto { font-size: .85rem; }

/* Ayuda bajo el campo: por qué el número de operación es obligatorio. */
.woocommerce-checkout .abril-yape__op .description {
	display: block;
	margin: 6px 0 0;
	font-size: .75rem; line-height: 1.5; color: var(--abril-text); opacity: .75;
}

/* Página de gracias: el pago está declarado, no verificado. */
.abril-yape-gracias {
	max-width: 520px;
	margin: 0 0 36px;
	padding: clamp(24px, 4vw, 34px);
	background: var(--abril-sand);
	border: 1px solid var(--abril-line);
	border-radius: 2px;
	text-align: center;
}
.abril-yape-gracias .abril-eyebrow { margin: 0 0 8px; }
.abril-yape-gracias__title {
	font-size: clamp(1.4rem, 3.4vw, 1.9rem);
	line-height: 1.2; margin: 0 0 20px; color: var(--abril-ink);
}
.abril-yape-gracias__text {
	margin: 18px 0 0;
	font-size: .9rem; line-height: 1.7; color: var(--abril-text);
}
.abril-yape-gracias__nota {
	margin: 10px 0 0;
	font-size: .8rem; line-height: 1.6; color: #8a8178;
}
.abril-yape__wa { margin-top: 18px; }

/* ============================================================
   Recalculando el total — el loader vive en el importe
   ============================================================ */

/* Apagar SOLO los dos overlays del recálculo (resumen y bloque de pago). El
   overlay sigue ahí bloqueando clics; lo que se quita es el aro que Blocksy le
   centra y que, al insertarse dentro de la <table>, cae junto a "Métodos de
   envío". El overlay de "realizando el pedido" no se toca: ese sí debe verse. */
.woocommerce-checkout-review-order-table > .blockUI.blockOverlay,
.woocommerce-checkout-payment > .blockUI.blockOverlay {
	opacity: 0 !important;
}

/* El importe se convierte en su propio esqueleto: mismo sitio, mismo tamaño,
   el número deja de leerse y una luz lo recorre. La clase la pone/quita el
   child theme con los eventos update_checkout / updated_checkout. */
@keyframes abril-recalculando {
	from { background-position: 200% 0; }
	to   { background-position: -200% 0; }
}

form.checkout.abril-recalculando .order-total .woocommerce-Price-amount,
form.checkout.abril-recalculando .abril-yape__monto strong {
	color: transparent;
	background-image: linear-gradient(100deg, var(--abril-line) 20%, #c3b7a6 45%, var(--abril-line) 70%);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	border-radius: 2px;
	animation: abril-recalculando 1.4s linear infinite;
}

/* "Total:" también se atenúa: la fila entera se lee como "en cálculo". */
form.checkout.abril-recalculando .order-total th {
	opacity: .45;
	transition: opacity .2s ease;
}

@media (prefers-reduced-motion: reduce) {
	form.checkout.abril-recalculando .order-total .woocommerce-Price-amount,
	form.checkout.abril-recalculando .abril-yape__monto strong {
		animation: none;
		background-image: none;
		color: var(--abril-line);
	}
}

/* Y un aro girando pegado al número: sin él, el esqueleto se lee como "precio
   apagado" y no como "calculando". */
@keyframes abril-girando { to { transform: rotate(360deg); } }

form.checkout.abril-recalculando .order-total .woocommerce-Price-amount::before,
form.checkout.abril-recalculando .abril-yape__monto strong::before {
	content: "";
	width: .8em; height: .8em;
	border: 2px solid var(--abril-line);
	border-top-color: var(--abril-accent);
	border-radius: 50%;
	background-image: none;
	animation: abril-girando .8s linear infinite;
}

/* En el total, el aro va absoluto contra el borde izquierdo del importe: así
   aparece y desaparece sin mover el número, que está alineado a la derecha. */
form.checkout.abril-recalculando .order-total .woocommerce-Price-amount {
	position: relative;
}
form.checkout.abril-recalculando .order-total .woocommerce-Price-amount::before {
	position: absolute;
	top: 50%; right: calc(100% + .45em);
	margin-top: -.4em;
}

/* En la tarjeta de Yape la línea está centrada y no hay hueco a la izquierda del
   importe: ahí el aro va en línea (el desplazamiento es simétrico y no se nota). */
form.checkout.abril-recalculando .abril-yape__monto strong::before {
	display: inline-block;
	margin-right: .45em;
	vertical-align: baseline;
}

@media (prefers-reduced-motion: reduce) {
	form.checkout.abril-recalculando .order-total .woocommerce-Price-amount::before,
	form.checkout.abril-recalculando .abril-yape__monto strong::before {
		animation: none;
	}
}