/* 24Bottle — complementos a theme.json: detalles de cabecera, tienda y los efectos de la marca. */

/* ---------- Cabecera ---------- */
.b24-topbar a { color: inherit; text-decoration: none; }
.b24-topbar a:hover { text-decoration: underline; }
.b24-header { position: sticky; top: 0; z-index: 50; }
.admin-bar .b24-header { top: var(--wp-admin--admin-bar--height, 32px); }
.b24-header .wp-block-site-logo img { display: block; }
.b24-header .wp-block-search__input { border-radius: var(--wp--custom--radius--control); border-color: var(--wp--preset--color--accent-6); min-width: 16rem; }
.b24-header .wp-block-search__button { border-radius: var(--wp--custom--radius--control); }
@media (max-width: 781px) {
	.b24-header .wp-block-search { display: none; }
	.b24-topbar .b24-hide-sm { display: none !important; }
}

/* Etiqueta pequeña sobre los titulares */
.b24-eyebrow {
	font-family: var(--wp--preset--font-family--barlow-condensed);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Filas de datos con línea fina (la idea de las «fichas» de fábrica) */
.is-style-b24-ficha { border: 1px solid var(--wp--preset--color--accent-6); }
.b24-datos > .wp-block-column + .wp-block-column { border-left: 1px solid var(--wp--preset--color--accent-6); }
@media (max-width: 781px) {
	.b24-datos > .wp-block-column + .wp-block-column { border-left: 0; border-top: 1px solid var(--wp--preset--color--accent-6); }
}

/* Tabla comparativa */
.b24-tabla table { border-collapse: collapse; width: 100%; }
.b24-tabla th, .b24-tabla td { border: 0; border-bottom: 1px solid var(--wp--preset--color--accent-6); padding: 0.7rem 0.5rem; text-align: left; }
.b24-tabla thead th { font-family: var(--wp--preset--font-family--barlow-condensed); text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 2px solid var(--wp--preset--color--accent-3); }

/* ---------- Tienda ---------- */
.wc-block-components-product-sale-badge,
.wc-block-grid__product-onsale,
.woocommerce span.onsale {
	background: var(--wp--preset--color--accent-1) !important;
	border: 0 !important;
	color: #fff !important;
	border-radius: var(--wp--custom--radius--badge) !important;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	font-size: 0.75rem !important;
	padding: 0.3em 0.75em !important;
	min-height: 0 !important;
	min-width: 0 !important;
	line-height: 1.4 !important;
}
.wc-block-components-product-price del { color: var(--wp--preset--color--accent-4); font-weight: 400; }
.wc-block-components-product-price ins { text-decoration: none; color: var(--wp--preset--color--accent-2); }
.wc-block-components-product-stock-indicator { font-size: 0.8125rem; font-weight: 500; }
.wc-block-components-product-stock-indicator--in-stock { color: var(--wp--preset--color--accent-3); }
.wc-block-components-product-stock-indicator--low-stock { color: var(--wp--preset--color--accent-1); }
.wc-block-components-product-stock-indicator--out-of-stock { color: var(--wp--preset--color--accent-4); }
.wc-block-components-product-rating__stars, .star-rating { color: var(--wp--preset--color--accent-1); }

.wc-block-product .wc-block-components-product-stock-indicator { text-align: left; margin: 0.25rem 0 0.75rem; }

/* Datos de contacto dentro del pie */
footer .b24-contacto { font-size: 0.9375rem; }
footer .b24-contacto .b24-eyebrow { color: var(--wp--preset--color--accent-5) !important; }

/* Tarjeta de producto: la foto se acerca un poco al pasar el ratón */
.wc-block-product .wc-block-components-product-image { overflow: hidden; background: var(--wp--preset--color--accent-5); }
.wc-block-product .wc-block-components-product-image img {
	transition: transform 450ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.wc-block-product:hover .wc-block-components-product-image img { transform: scale(1.04); }
.wc-block-product .wp-block-button__link,
.wc-block-product .wc-block-components-product-button__button { width: 100%; }

/* Fichas de categoría con contador */
.b24-cat .wp-block-cover__inner-container a { text-decoration: none; color: inherit; }
.b24-cat .wp-block-cover__image-background { transition: transform 500ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.b24-cat:hover .wp-block-cover__image-background { transform: scale(1.035); }

/* Botones: el color cambia con suavidad */
.wp-element-button, .wp-block-button__link { transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease; }

/* Formularios de Contact Form 7 */
.wpcf7-form p { margin: 0 0 1rem; }
.wpcf7-form label { display: block; font-size: 0.875rem; font-weight: 600; }
.wpcf7-form input:not([type="checkbox"]):not([type="submit"]),
.wpcf7-form textarea {
	width: 100%;
	box-sizing: border-box;
	margin-top: 0.35rem;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: var(--wp--custom--radius--control);
	background: var(--wp--preset--color--base-2);
	font: inherit;
}
.wpcf7-form textarea { min-height: 8rem; }
.wpcf7-form .wpcf7-acceptance label { font-weight: 400; display: inline; }
.wpcf7-form .wpcf7-submit {
	background: var(--wp--preset--color--accent-1);
	color: #fff;
	border: 0;
	border-radius: var(--wp--custom--radius--control);
	padding: 0.85rem 1.8rem;
	font-family: var(--wp--preset--font-family--barlow-condensed);
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 200ms ease;
}
.wpcf7-form .wpcf7-submit:hover { background: var(--wp--preset--color--accent-2); }
.b24-newsletter .wpcf7-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-end; }
.b24-newsletter .wpcf7-form > p:first-of-type { flex: 1 1 14rem; margin: 0; }
.b24-newsletter .wpcf7-form > p { margin: 0; }
.b24-newsletter .wpcf7-form .wpcf7-acceptance { font-size: 0.8125rem; }

/* FAQ */
.wp-block-details summary { font-weight: 600; cursor: pointer; }

/* ---------- Efectos de la marca ---------- */

/* 1. Vapor: la foto de portada se asienta y el texto sube una vez al cargar. */
@keyframes b24-asentar { from { transform: scale(1.06); } to { transform: scale(1); } }
@keyframes b24-subir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.is-style-b24-vapor { overflow: hidden; }
.is-style-b24-vapor .wp-block-cover__image-background { animation: b24-asentar 600ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.is-style-b24-vapor .wp-block-cover__inner-container { animation: b24-subir 520ms 120ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }

/* 2. Llenado: la imagen se descubre de abajo arriba, como un termo que se llena. */
.b24-js .is-style-b24-llenado img,
.b24-js .is-style-b24-llenado .wp-block-media-text__media { position: relative; }
.b24-js .is-style-b24-llenado:is(.wp-block-image, .wp-block-media-text) figure,
.b24-js .wp-block-image.is-style-b24-llenado { position: relative; overflow: hidden; }
.b24-js .wp-block-image.is-style-b24-llenado::after,
.b24-js .wp-block-media-text.is-style-b24-llenado .wp-block-media-text__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--accent-5);
	transform-origin: top;
	transform: scaleY(1);
	transition: transform 600ms cubic-bezier(0.65, 0, 0.35, 1);
	pointer-events: none;
}
.b24-js .wp-block-media-text.is-style-b24-llenado .wp-block-media-text__media { overflow: hidden; }
.b24-js .is-style-b24-llenado.is-visible::after,
.b24-js .is-style-b24-llenado.is-visible .wp-block-media-text__media::after { transform: scaleY(0); }

/* 3. Escalonado: las tarjetas de «Más vendidos» entran una detrás de otra. */
.b24-js .b24-escalonado .wc-block-product {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 360ms ease, transform 360ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.b24-js .b24-escalonado.is-visible .wc-block-product { opacity: 1; transform: none; }
.b24-js .b24-escalonado.is-visible .wc-block-product:nth-child(2) { transition-delay: 70ms; }
.b24-js .b24-escalonado.is-visible .wc-block-product:nth-child(3) { transition-delay: 140ms; }
.b24-js .b24-escalonado.is-visible .wc-block-product:nth-child(4) { transition-delay: 210ms; }

/* En el editor todo se ve sin esperar al efecto */
.editor-styles-wrapper .is-style-b24-llenado::after,
.editor-styles-wrapper .is-style-b24-llenado .wp-block-media-text__media::after { display: none; }
.editor-styles-wrapper .b24-escalonado .wc-block-product { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.is-style-b24-vapor .wp-block-cover__image-background,
	.is-style-b24-vapor .wp-block-cover__inner-container { animation: none; }
	.b24-js .is-style-b24-llenado::after,
	.b24-js .is-style-b24-llenado .wp-block-media-text__media::after { display: none; }
	.b24-js .b24-escalonado .wc-block-product { opacity: 1; transform: none; transition: none; }
	.wc-block-product .wc-block-components-product-image img,
	.b24-cat .wp-block-cover__image-background { transition: none; }
}

/* Rubricas del blog como fila de enlaces */
.b24-cat-list { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0; }
.b24-cat-list li a { display: inline-block; padding: 0.35rem 0.9rem; border: 1px solid var(--wp--preset--color--accent-6); border-radius: var(--wp--custom--radius--badge); text-decoration: none; }
.b24-cat-list li a:hover { border-color: var(--wp--preset--color--accent-3); }