/* =========================================================================
   BrandTienda — sistema de comercio moderno limpio.
   Estructura versátil; el color/tipografía los inyecta BT Diseño
   (--wp--preset--color--*). Presupuesto: ~9KB gzip (36KB raw).
   ========================================================================= */
/* --------------------------------------------------------------------------
   BREAKPOINTS: una sola escala, la de settings.viewport en theme.json (WP 7.1):
     mobile  (width <= 600px)    tablet  (600px < width <= 782px)    desktop (width > 782px)
   Todo @media de este archivo usa 600 o 782, con sintaxis de rango. Excepción
   documentada: los cortes de Woo en 1100px (grilla de productos de 5/6 columnas)
   y 1024/1025 en woo.css (checkout), que siguen a WooCommerce, no al theme.
   Regla: si una grilla queda apretada entre 782 y 900, bajar columnas, no agregar
   un breakpoint. Inventario: tools/inventario-css.py.
   -------------------------------------------------------------------------- */

:root {
	--bt-r-sm: var(--wp--custom--radius--sm, 6px);
	--bt-r-md: var(--wp--custom--radius--md, 10px);
	--bt-r-lg: var(--wp--custom--radius--lg, 16px);
	--bt-r-pill: var(--wp--custom--radius--pill, 999px);
	--bt-t: var(--wp--custom--transition, 180ms cubic-bezier(.2,.6,.2,1));
	--bt-line: var(--wp--preset--color--line, #e6e6e2);
	--bt-surface: var(--wp--preset--color--surface, #f6f6f4);
	--bt-ink: var(--wp--preset--color--contrast, #16181d);
	--bt-muted: var(--wp--preset--color--muted, #6b7076);
	--bt-primary: var(--wp--preset--color--primary, #0e7a5f);
	/* Relleno para superficies con etiqueta BLANCA: el primario crudo no da AA
	   con blanco encima (con el magenta de este sitio, 3.63:1). Ver Designer. */
	--bt-primary-btn: var(--wp--preset--color--primary-btn, #0b5f49);
	--bt-accent-btn: var(--wp--preset--color--accent-btn, #b8481c);
	--bt-accent: var(--wp--preset--color--accent, #e8632a);
}

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

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Accesibilidad: foco visible y consistente. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--bt-primary);
	outline-offset: 2px;
	border-radius: var(--bt-r-sm);
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ------------------------------------------------------------------ Header. */
.wp-block-site-title a { text-decoration: none; letter-spacing: -0.02em; }
.wp-block-site-title { font-weight: 800; white-space: nowrap; }

/* Barra de anuncios: degradado de marca, mensaje editable. */
.bt-announce {
	background: linear-gradient(90deg, var(--bt-primary), color-mix(in srgb, var(--bt-primary) 60%, var(--bt-accent)));
	color: var(--wp--preset--color--primary-ink, #fff);
	padding: .45rem 1rem;
}
.bt-announce__text {
	margin: 0;
	letter-spacing: .01em;
	opacity: .96;
}

/* Header sticky con dos filas: principal (logo|search|acciones) + nav.
   El blur va en un ::before, NO como backdrop-filter directo del header: esa
   propiedad en el elemento real crea un containing block para descendientes
   `position:fixed` (spec CSS, la mayoría de los navegadores ya lo aplican) —
   y el bloque Navigation nativo de WP, cuyo overlay móvil es `fixed`, queda
   dentro de este header. El overlay se ata entonces al alto chico del header
   en vez de al viewport: por eso el menú móvil se ve "detrás"/recortado
   contra el Hero en vez de tapar la pantalla entera. Un ::before no es
   ancestro real del bloque Navigation, así que el blur se ve igual sin
   romper el fixed. */
.bt-header {
	position: sticky;
	top: 0;
	z-index: 20;
	border-bottom: 1px solid var(--bt-line);
}
.bt-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: color-mix(in srgb, var(--wp--preset--color--base) 90%, transparent);
	backdrop-filter: saturate(1.1) blur(10px);
}
.bt-header__main { gap: clamp(1rem, 3vw, 2.5rem); }
.bt-header__brand { align-items: center; gap: .6rem; flex: 0 0 auto; }

/* Buscador: protagonista en el centro, ocupa el espacio libre. */
.bt-search {
	flex: 1 1 auto;
	max-width: 560px;
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: 0 .35rem 0 .9rem;
	border: 1.5px solid var(--bt-line);
	border-radius: var(--bt-r-pill);
	background: var(--wp--preset--color--base, #fff);
	transition: border-color var(--bt-t), box-shadow var(--bt-t);
}
.bt-search:focus-within {
	border-color: var(--bt-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--bt-primary) 15%, transparent);
}
.bt-search__icon { color: var(--bt-muted); flex: 0 0 auto; }
.bt-search__input {
	flex: 1; min-width: 0; border: 0; outline: none; background: none;
	padding: .6rem 0; font-size: .92rem; color: inherit; font-family: inherit;
}
.bt-search__input::placeholder { color: var(--bt-muted); }
.bt-search__btn {
	flex: 0 0 auto; border: 0; cursor: pointer;
	padding: .5rem 1.1rem; border-radius: var(--bt-r-pill);
	background: var(--bt-primary-btn); color: var(--wp--preset--color--primary-ink, #fff);
	font-weight: 600; font-size: .85rem; font-family: inherit;
	transition: filter var(--bt-t);
}
.bt-search__btn:hover { filter: brightness(1.08); }

/* Acciones: cuenta + carrito. */
.bt-header__actions { align-items: center; gap: clamp(.75rem, 2vw, 1.4rem); flex: 0 0 auto; }
.bt-iconlink {
	display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
	text-decoration: none; color: var(--bt-ink); font-size: .68rem; font-weight: 600;
	transition: color var(--bt-t);
}
.bt-iconlink:hover { color: var(--bt-primary); }
.bt-iconlink__label { line-height: 1; }

/* Fila de navegación. */
.bt-header__nav {
	margin-top: .7rem;
	padding-top: .7rem;
	border-top: 1px solid color-mix(in srgb, var(--bt-line) 60%, transparent);
}
.wp-block-navigation a {
	text-decoration: none;
	font-weight: 500;
	color: var(--bt-ink);
	transition: color var(--bt-t);
}
.wp-block-navigation a:hover { color: var(--bt-primary); }

/*
 * Menú del header en versales.
 *
 * Los nombres de categoría los escribe cada comercio y vienen como vengan: uno
 * carga «STEEL FRAME» y otro «Calzado». Mezclados en la misma fila el menú se ve
 * descuidado, y no es algo que se pueda pedir que arreglen a mano en cada tienda.
 * Uniformar acá lo resuelve para todos.
 *
 * Se hace por CSS y no cambiando el texto del enlace a propósito: `text-transform`
 * es solo presentación, así que el lector de pantalla sigue leyendo «Inicio» y no
 * deletrea I-N-I-C-I-O, que es lo que pasa cuando las mayúsculas se escriben de
 * verdad. El espaciado extra es el mínimo que las versales necesitan para no
 * apelmazarse.
 */
.bt-header .wp-block-navigation a {
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* Mini-cart del header con contador visible. */
.bt-header__actions .wc-block-mini-cart__button { color: var(--bt-ink); }

/* Woo inyecta un icono "customer account" en el navigation; ya tenemos el
   icono Cuenta propio en las acciones → ocultar el duplicado (link + wrapper
   + su ítem de menú para no dejar un gap en la fila flex). */
.bt-header .wc-block-customer-account,
.bt-header .wc-block-customer-account__link,
.bt-header .wp-block-navigation-item:has(.wc-block-customer-account__link) {
	display: none !important;
}

/* Responsive: móvil apila el buscador en su fila; el nav colapsa a
   hamburguesa (overlayMenu del bloque) — NO se oculta, si no desaparece
   el acceso al menú. */
@media (width <= 782px) {
	.bt-header__main { flex-wrap: wrap; row-gap: .7rem; }
	.bt-search { order: 3; flex-basis: 100%; max-width: none; }
	.bt-iconlink__label { display: none; }
	.bt-header__nav { margin-top: 0; padding-top: .4rem; border-top: 0; justify-content: flex-start; }
	.bt-announce__text { font-size: .72rem; }
}

/* --------------------------------------------------------------- Botones. */
.wp-element-button, .wp-block-button__link,
.woocommerce a.button, .woocommerce button.button,
.woocommerce .button, .woocommerce #respond input#submit,
.wc-block-components-button {
	border-radius: var(--bt-r-pill) !important;
	font-weight: 600 !important;
	letter-spacing: 0.005em;
	transition: transform var(--bt-t), background var(--bt-t), box-shadow var(--bt-t) !important;
	line-height: 1.2;
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.wp-block-button__link:hover, .wc-block-components-button:hover {
	transform: translateY(-1px);
	box-shadow: var(--wp--preset--shadow--lift, 0 6px 16px rgba(16,24,32,.08));
}

/* Botón primario Woo → paleta del theme. */
.woocommerce .button.alt, .woocommerce button.button.alt,
.woocommerce #respond input#submit.alt, .single_add_to_cart_button {
	background: var(--bt-primary-btn) !important;
	color: var(--wp--preset--color--primary-ink, #fff) !important;
}
.woocommerce .button.alt:hover, .single_add_to_cart_button:hover {
	background: var(--bt-ink) !important;
}

/* ------------------------------------------------------- Grilla de productos. */
ul.products, .wc-block-grid__products {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: clamp(1rem, 2vw, 1.75rem);
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
/* Woo mete ::before/::after de clearfix (content:" "; display:table) que en
   display:grid se vuelven celdas fantasma y corren la primera tarjeta una
   columna. Neutralizar con especificidad que le gane a .woocommerce. */
.woocommerce ul.products::before, .woocommerce ul.products::after,
ul.products::before, ul.products::after { content: normal !important; display: none !important; }

ul.products li.product, .wc-block-grid__product {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: 0;
	margin: 0 !important;
	width: auto !important;
}

/* Product Collection (bloques): refina la card sin pelear con su grilla. */
/* --- Tarjetas del bloque «Colección de productos» (product-collection). ---
 *
 * Este bloque no matcheaba ninguna de las reglas de tarjeta del theme: esas
 * apuntan a `ul.products li.product` y `.wc-block-grid__product`, que son el
 * shortcode viejo y el bloque anterior. El resultado era una tarjeta con borde y
 * radio pero SIN relleno interno y SIN separación entre columnas: los títulos
 * tocaban el borde y el botón, al medir el ancho completo, se apoyaba encima de
 * la línea.
 */
.wc-block-product-template {
	gap: clamp(0.75rem, 1.4vw, 1.25rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Las pistas pasan a fracciones. WordPress las emite en píxeles fijos (cinco de
 * 240px), que sumaban justo el ancho del contenedor: agregarles separación sin
 * tocarlas empujaba la última columna afuera. En `1fr` la separación sale del
 * ancho de las columnas y nada se desborda.
 */
.wc-block-product-template.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wc-block-product-template.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wc-block-product-template.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wc-block-product-template.columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.wc-block-product-template.columns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

@media (max-width: 1100px) {
	.wc-block-product-template.columns-5,
	.wc-block-product-template.columns-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.wc-block-product-template.columns-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (width <= 600px) {
	.wc-block-product-template[class*="columns-"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.wc-block-product {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding: clamp(0.6rem, 0.9vw, 0.85rem);
	background: var(--wp--preset--color--base, #fff);
	min-width: 0;
}

/*
 * El botón cierra la tarjeta y se empuja al fondo: los títulos ocupan una o dos
 * líneas según el producto, y sin esto los botones de una misma fila quedaban a
 * distinta altura.
 */
.wc-block-product .wp-block-woocommerce-product-button {
	margin-top: auto;
	padding-top: 0.6rem;
	margin-bottom: 0;
}

.wc-block-product .wc-block-components-product-image img,
.wc-block-product .wp-block-woocommerce-product-image img {
	border-radius: var(--bt-r-md);
	background: var(--bt-surface);
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform 400ms cubic-bezier(.2,.6,.2,1);
}
.wc-block-product:hover .wc-block-components-product-image img { transform: scale(1.04); }
.wc-block-product .wc-block-components-product-image { overflow: clip; border-radius: var(--bt-r-md); display: block; }
.wc-block-product .wp-block-post-title { font-size: .95rem; font-weight: 600; line-height: 1.3; margin: .4rem 0 .1rem; }
.wc-block-product .wp-block-post-title a { text-decoration: none; color: var(--bt-ink); }
.wc-block-product .wc-block-components-product-price { font-weight: 700; }
.wc-block-product .wc-block-components-product-price ins { text-decoration: none; color: var(--bt-primary); }
/*
 * El botón de la tarjeta de producto.
 *
 * `display` VA ACÁ Y NO SE HEREDA DE NADIE. La regla declaraba `width: 100%` sin
 * declarar display, así que dependía de que otra hoja —la de WooCommerce— dejara
 * el enlace en `inline-block`. Donde esa hoja no carga, llega en otra versión o
 * queda en otro orden, el botón se resuelve como `inline`: ignora el `width` y,
 * peor, no crece en alto al partirse en dos líneas, porque un inline pinta el
 * fondo por fragmento. «Seleccionar opciones» se salía de su propia píldora.
 *
 * Se vio en dos instalaciones con el MISMO código del theme: una lo mostraba
 * bien y la otra no. Un theme que se distribuye no puede apoyarse en CSS ajeno
 * para su propia caja.
 *
 * `inline-flex` y no `inline-block`: centra las dos líneas en vertical sin
 * depender del line-height, que es lo que dejaba el texto pegado arriba.
 */
.wc-block-product .wp-block-woocommerce-product-button .wp-block-button__link,
.wc-block-product .wc-block-components-product-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	text-align: center;
	background: var(--bt-surface);
	color: var(--bt-ink);
}
.wc-block-product .wp-block-woocommerce-product-button .wp-block-button__link:hover { background: var(--bt-primary-btn); color: var(--wp--preset--color--primary-ink, #fff); }

/* Card: imagen con marco de superficie, hover con zoom + lift. */
ul.products li.product a img, .wc-block-grid__product-image img, .wc-block-components-product-image img {
	border-radius: var(--bt-r-md);
	background: var(--bt-surface);
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
	height: auto;
	transition: transform 400ms cubic-bezier(.2,.6,.2,1);
}
ul.products li.product { overflow: clip; }
ul.products li.product > a:first-child { position: relative; display: block; overflow: clip; border-radius: var(--bt-r-md); }
ul.products li.product:hover a img { transform: scale(1.04); }

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title {
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.3;
	padding: 0;
	margin: .35rem 0 0;
	color: var(--bt-ink);
}

.woocommerce ul.products li.product .price, .wc-block-grid__product-price {
	color: var(--bt-ink);
	font-weight: 700;
	font-size: 1rem;
	margin: 0;
}
.woocommerce ul.products li.product .price del { color: var(--bt-muted); font-weight: 400; margin-right: .35rem; }
.woocommerce ul.products li.product .price ins { text-decoration: none; color: var(--bt-primary); }

/* Add-to-cart de card: al fondo de la tarjeta (margin-top:auto) para que en
   una fila con misma altura todos los botones queden alineados, aunque una
   card tenga badge de stock/urgencia que agregue altura. */
.woocommerce ul.products li.product .button {
	margin-top: auto;
	width: 100%;
	text-align: center;
	background: var(--bt-surface) !important;
	color: var(--bt-ink) !important;
}
.woocommerce ul.products li.product .button:hover { background: var(--bt-primary-btn) !important; color: var(--wp--preset--color--primary-ink, #fff) !important; }

/* Badge de oferta. */
/*
 * Sello de oferta ARRIBA A LA IZQUIERDA, y el corazón de lista de deseos queda
 * solo en la derecha: los dos son absolutos y estaban en la misma esquina, uno
 * encima del otro.
 *
 * El `left` ya estaba declarado acá, pero no alcanzaba: WooCommerce posiciona su
 * sello con `.woocommerce ul.products li.product .onsale`, que gana por
 * especificidad, y encima fija `right: 0`. Hay que igualar el selector Y anular
 * el `right`; con solo declarar `left` quedaban las dos anclas activas.
 */
.woocommerce ul.products li.product span.onsale,
.woocommerce span.onsale,
.wc-block-components-product-sale-badge {
	position: absolute;
	top: .6rem;
	left: .6rem;
	right: auto;
	margin: 0;
	min-height: 0;
	min-width: 0;
	padding: .2rem .6rem;
	background: var(--bt-accent-btn);
	color: var(--wp--preset--color--primary-ink, #fff);
	border-radius: var(--bt-r-pill);
	font-size: .72rem;
	font-weight: 700;
	line-height: 1.6;
	z-index: 2;
}

/* Estrellas. */
.woocommerce .star-rating { font-size: .82em; color: var(--bt-accent); }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea,
.woocommerce-checkout .input-text, .select2-container .select2-selection {
	border: 1px solid var(--bt-line) !important; border-radius: var(--bt-r-md) !important;
	padding: .7rem .9rem !important; min-height: 46px; background: var(--wp--preset--color--base, #fff);
	transition: border-color var(--bt-t), box-shadow var(--bt-t);
}
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-block-components-select .wc-block-components-select__container,
.wc-block-components-address-form input {
	border-radius: var(--bt-r-md) !important;
	border-color: var(--bt-line) !important;
	transition: border-color var(--bt-t), box-shadow var(--bt-t);
}

/* Checkout enfocado (clase que setea el módulo Checkout del engine). */
.brandtienda-checkout-focus header.wp-block-group { position: static; }
.brandtienda-checkout-focus .wp-block-navigation { display: none; }

/* Notices refinados. */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	border-radius: var(--bt-r-md); border: 1px solid var(--bt-line); border-left-width: 3px; padding: .9rem 1.1rem;
}
.woocommerce-message { border-left-color: var(--bt-primary); }
.woocommerce-info { border-left-color: var(--bt-accent); }

/* ============================================================ ENGINE SLOTS.
   Estilizado nativo de los incentivos (pisa el fallback del plugin). */

.brandtienda-slot { margin: 1.5rem 0; }

/* Upsell / cross-sell / más vendidos. */
/* font-size y margin los fija la regla de producto de más abajo (misma especificidad, gana la última). */
.brandtienda-upsell__title { font-weight: 700; letter-spacing: -0.01em; }
.brandtienda-upsell {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; list-style: none; padding: 0; margin: 0;
}
.brandtienda-upsell__item {
	display: flex; flex-direction: column; gap: .4rem; padding: .6rem; border: 1px solid var(--bt-line);
	border-radius: var(--bt-r-md); background: var(--wp--preset--color--base, #fff); transition: transform var(--bt-t), box-shadow var(--bt-t);
}
.brandtienda-upsell__item:hover { transform: translateY(-3px); box-shadow: var(--wp--preset--shadow--lift, 0 6px 16px rgba(16,24,32,.08)); }
.brandtienda-upsell__item img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: var(--bt-r-sm); background: var(--bt-surface); }
.brandtienda-upsell__name { font-size: .85rem; font-weight: 500; line-height: 1.3; }
.brandtienda-upsell__price { font-weight: 700; font-size: .9rem; }
.brandtienda-upsell__price .amount { color: var(--bt-primary); }
.brandtienda-upsell__add { font-size: .8rem; text-align: center; margin-top: auto; padding: .4rem .6rem; }

/* Urgencia. */
.brandtienda-urgency {
	display: inline-flex; align-items: center; gap: .4rem; margin: .6rem 0; font-weight: 600; font-size: .9rem; color: var(--bt-accent);
}
.brandtienda-urgency::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--bt-accent); box-shadow: 0 0 0 0 color-mix(in srgb, var(--bt-accent) 60%, transparent); animation: bt-pulse 2s infinite; }
@keyframes bt-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bt-accent) 55%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.brandtienda-urgency--low_stock_badge { font-size: .78rem; }
.brandtienda-countdown-timer { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--bt-ink); }

/* Barra de envío gratis. */
.brandtienda-freeship { margin: 1rem 0; padding: .9rem 1.1rem; border: 1px solid var(--bt-line); border-radius: var(--bt-r-md); background: var(--bt-surface); }
.brandtienda-freeship__text { margin: 0 0 .45rem; font-size: .9rem; font-weight: 500; }
.brandtienda-freeship__text--done { color: var(--bt-primary); font-weight: 700; }
.brandtienda-freeship__track { height: 7px; border-radius: var(--bt-r-pill); background: rgba(16,24,32,.08); overflow: hidden; }
.brandtienda-freeship__fill { height: 100%; border-radius: var(--bt-r-pill); background: linear-gradient(90deg, var(--bt-primary), color-mix(in srgb, var(--bt-primary) 70%, var(--bt-accent))); transition: width 500ms cubic-bezier(.2,.6,.2,1); }
.brandtienda-freeship-note { margin: .5rem 0; font-size: .85rem; color: var(--bt-muted); }

/* Social proof (reseña destacada). */
.brandtienda-proof {
	display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: center; margin: 1.5rem 0;
	padding: 1.25rem; border: 1px solid var(--bt-line); border-radius: var(--bt-r-lg); background: var(--wp--preset--color--base, #fff);
}
.brandtienda-proof__img { width: 120px; height: 120px; object-fit: cover; border-radius: var(--bt-r-md); }
.brandtienda-proof__quote { margin: 0; font-size: 1.05rem; line-height: 1.5; font-style: italic; color: var(--bt-ink); }
.brandtienda-proof__meta { grid-column: 1 / -1; font-size: .85rem; color: var(--bt-muted); }
.brandtienda-review-photos { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }
.brandtienda-review-photos img { width: 68px; height: 68px; object-fit: cover; border-radius: var(--bt-r-sm); }

/* Order bump. */
.brandtienda-bump {
	margin: 1rem 0; padding: 1rem 1.1rem; border: 2px dashed color-mix(in srgb, var(--bt-primary) 45%, var(--bt-line));
	border-radius: var(--bt-r-md); background: color-mix(in srgb, var(--bt-primary) 5%, var(--wp--preset--color--base, #fff));
}
.brandtienda-bump__label { display: flex; gap: .6rem; align-items: baseline; cursor: pointer; font-size: .95rem; }
.brandtienda-bump__check { margin-top: .2rem; width: 18px; height: 18px; accent-color: var(--bt-primary); }

/* Wishlist. */
.brandtienda-wl {
	background: var(--wp--preset--color--base, #fff); border: 1px solid var(--bt-line); border-radius: 50%; width: 2.4rem; height: 2.4rem;
	display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
	color: var(--bt-muted); font-size: 1.1rem; transition: color var(--bt-t), border-color var(--bt-t), transform var(--bt-t);
}
.brandtienda-wl:hover { transform: scale(1.08); }
.brandtienda-wl.is-active { color: var(--bt-accent); border-color: var(--bt-accent); }
ul.products li.product .brandtienda-wl { position: absolute; top: .6rem; right: .6rem; z-index: 3; backdrop-filter: blur(4px); }

/* Back-in-stock. */
.brandtienda-bis {
	margin: 1rem 0; padding: 1.1rem; border: 1px solid var(--bt-line); border-radius: var(--bt-r-md);
	background: var(--bt-surface); display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
}
.brandtienda-bis__text { width: 100%; margin: 0; font-weight: 600; }
.brandtienda-bis input[type="email"] { flex: 1; min-width: 200px; border: 1px solid var(--bt-line); border-radius: var(--bt-r-pill); padding: .6rem 1rem; }
.brandtienda-bis__done { width: 100%; margin: 0; color: var(--bt-primary); font-weight: 600; }

/* --------------------------------------------------------- Home patterns. */
.bt-hero {
	display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; padding: clamp(2rem, 5vw, 4.5rem) 0;
	/* Ancla de la franja de productos (.bt-hero2__strip es position:absolute
	   al borde inferior). Sin esto la franja se posiciona contra el body. */
	position: relative;
}
/*
 * Dos columnas SOLO si hay imagen cargada. Antes la segunda columna existía
 * siempre, así que un hero de solo texto reservaba la mitad del ancho para nada
 * y el copy quedaba comprimido contra el borde izquierdo.
 */
@media (width > 782px) {
	.bt-hero--has-media { grid-template-columns: 1.1fr .9fr; }

	/*
	 * Colocación EXPLÍCITA, no auto-placement.
	 *
	 * Con auto-placement la imagen caía en la columna 1 fila 2 —apilada debajo del
	 * copy— aunque la grilla tuviera las dos columnas resueltas: el `grid-column`
	 * computado de los hijos daba `1` en vez de `auto`, así que algo del stack
	 * (bloques de WP en el medio) los estaba anclando a la primera línea. Decirlo
	 * explícito saca la ambigüedad y no depende de quién más opine.
	 */
	.bt-hero--has-media > .bt-hero__copy  { grid-column: 1; grid-row: 1; }
	.bt-hero--has-media > .bt-hero__media { grid-column: 2; grid-row: 1; }
}
/* La franja cruza las dos columnas: es una barra, no una tercera celda. */
.bt-hero__copy { min-width: 0; }
.bt-hero > .bt-hero2__strip { grid-column: 1 / -1; }
.bt-hero--has-strip { margin-bottom: 1rem; }
.bt-hero__eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 700; color: var(--bt-primary); }
.bt-hero h1 { font-size: clamp(2.2rem, 5.5vw, 3.75rem); line-height: 1.05; margin: .5rem 0 1rem; }
/*
 * `height:auto` + tope: sin eso mandaba el atributo `height` que escribe
 * `wp_get_attachment_image()`, así que una foto vertical estiraba la fila a mil
 * píxeles y el copy —centrado en la grilla— aparecía a media pantalla, con un
 * hueco enorme arriba. El `aspect-ratio` declarado no alcanzaba a imponerse.
 *
 * Tope y no `aspect-ratio` fijo: recortar a 4/3 una foto de producto vertical le
 * corta el producto. Con tope, el alto lo pone la imagen y el hero no se desmadra.
 */
.bt-hero__media {
	border-radius: var(--bt-r-lg); background: var(--bt-surface);
	object-fit: cover; width: 100%;
	height: auto; max-height: clamp(320px, 40vw, 500px);
}

.bt-trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; padding: 1.5rem 0; border-top: 1px solid var(--bt-line); border-bottom: 1px solid var(--bt-line); }
.bt-trust__item { display: flex; gap: .6rem; align-items: center; font-size: .9rem; font-weight: 500; }
.bt-trust__item strong { display: block; }
.bt-trust__ico { font-size: 1.4rem; }
/* Garantía con enlace: hereda el color y no se subraya sola, para que la
   franja siga leyéndose como una tira de datos y no como cuatro links. El
   subrayado aparece al pasar el mouse, que es donde el usuario espera la
   señal de que se puede hacer clic. */
.bt-trust__link { display: flex; gap: .6rem; align-items: center; color: inherit; text-decoration: none; }
.bt-trust__link:hover strong,
.bt-trust__link:focus-visible strong { text-decoration: underline; }
.bt-trust__link:focus-visible { outline: 2px solid var(--bt-primary); outline-offset: 3px; border-radius: var(--bt-r-md, 8px); }

.bt-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0 0 1.25rem; }
.bt-section-head h2 { margin: 0; }
.bt-section-head a { font-weight: 600; font-size: .9rem; white-space: nowrap; }

/* Reveal de carga (una sola orquestación, respeta reduced-motion). */
.bt-reveal > * { opacity: 0; transform: translateY(12px); animation: bt-in .6s cubic-bezier(.2,.6,.2,1) forwards; }
.bt-reveal > *:nth-child(2) { animation-delay: .06s; }
.bt-reveal > *:nth-child(3) { animation-delay: .12s; }
.bt-reveal > *:nth-child(4) { animation-delay: .18s; }
@keyframes bt-in { to { opacity: 1; transform: none; } }

/* La franja del hero NO usa bt-in: su transform de anclaje (centrado + 50%
   afuera) debe sobrevivir al fill de la animación. Reveal propio. */
/*
 * Solo la franja ANCLADA (variantes fondo/lado/promo) lleva el translate: su
 * `left:50%` necesita el `-50%` para centrarse.
 *
 * Antes el selector era `.bt-reveal > .bt-hero2__strip`, sin acotar a `.bt-hero2`,
 * y `.bt-hero` —la variante simple— también lleva `bt-reveal`: la franja estática
 * de esa variante se comía un `translateX(-50%)` que no le correspondía y quedaba
 * corrida media caja hacia la izquierda, saliéndose de la pantalla.
 */
.bt-hero2.bt-reveal > .bt-hero2__strip {
	transform: translate(-50%, calc(50% + 12px));
	animation-name: bt-in-strip;
	animation-delay: .18s;
}
@keyframes bt-in-strip { to { opacity: 1; transform: translate(-50%, 50%); } }

/* La franja estática entra sin desplazarse de lugar. */
.bt-hero.bt-reveal > .bt-hero2__strip {
	transform: translateY(12px);
	animation-name: bt-in-strip-static;
	animation-delay: .18s;
}
@keyframes bt-in-strip-static { to { opacity: 1; transform: none; } }

/* Logo del header: alto fijo, ancho natural — nítido con cualquier logo
   (el width fijo del bloque escalaba y empastaba logos con texto). */
.wp-block-site-logo img,
.wp-block-site-logo.is-default-size img {
	height: 44px;
	width: auto;
	max-width: 180px;
	object-fit: contain;
}
.woocommerce div.product .related > h2,
.woocommerce div.product .upsells > h2,
.brandtienda-upsell__title {
	font-size: clamp(1.15rem, 2vw, 1.45rem);
	margin: 0 0 1rem;
}

/* --------------------------------------------------- Footer. */
.bt-footer { position: relative; }
/* Filo superior teñido de marca: separa el footer del contenido. */
.bt-footer::before {
	content: ""; position: absolute; inset: 0 0 auto; height: 3px;
	background: linear-gradient(90deg, var(--bt-primary), var(--bt-accent));
	opacity: .9;
}
.bt-footer__cols { align-items: start; }
.bt-footer a { color: inherit; text-decoration: none; opacity: .82; transition: opacity .15s ease; }
.bt-footer a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.bt-footer__cols p { margin: 0 0 .5rem; line-height: 1.5; }
.bt-footer__brand p { margin-bottom: .75rem; }
.bt-footer__head {
	font-size: .72rem; text-transform: uppercase; letter-spacing: .12em;
	opacity: .55; margin: 0 0 .9rem; font-weight: 700;
}
.bt-footer__badges { font-size: .78rem; opacity: .75; }
.bt-footer__bar { align-items: center; }
.bt-footer__bar p { margin: 0; }
@media (width <= 600px) {
	.bt-footer__bar { justify-content: flex-start; }
	.bt-footer__pay { order: -1; }
}

/* ------------------------------- Tienda: layout sidebar + grilla. */
.bt-shop { display: block; }
@media (width > 782px) {
	.bt-shop {
		display: grid;
		grid-template-columns: 250px minmax(0, 1fr);
		gap: clamp(1.5rem, 3vw, 2.5rem);
		align-items: start;
	}
	.bt-shop__aside { position: sticky; top: 92px; }
}
/* El aside en móvil pasa a drawer (lo maneja filters.css); el main
   siempre ocupa su columna sin encoger. */
.bt-shop__main { min-width: 0; }

/* ============================================================
   Home: secciones profesionales (categorías, banner promo).
   ============================================================ */

/* Tarjetas de categoría: color de marca + emoji + nombre. */
.bt-cats {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: clamp(.75rem, 1.5vw, 1.25rem);
}
.bt-cat {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: 130px;
	padding: 1.25rem 1rem;
	border-radius: var(--bt-r-lg);
	text-decoration: none;
	color: var(--bt-ink);
	overflow: hidden;
	background: color-mix(in srgb, var(--bt-primary) 8%, var(--wp--preset--color--base, #fff));
	border: 1px solid var(--bt-line);
	transition: transform var(--bt-t), box-shadow var(--bt-t), border-color var(--bt-t);
}
.bt-cat::before {
	content: "";
	position: absolute; inset: 0; opacity: .9; z-index: 0;
	background: radial-gradient(ellipse 80% 70% at 50% 120%, color-mix(in srgb, var(--bt-primary) 22%, transparent), transparent);
}
.bt-cat:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px color-mix(in srgb, var(--bt-ink) 14%, transparent);
	border-color: var(--bt-primary);
}
.bt-cat > * { position: relative; z-index: 1; }
.bt-cat__emoji { font-size: 2rem; line-height: 1; }
.bt-cat__name { font-family: var(--wp--preset--font-family--heading, inherit); font-weight: 700; font-size: 1rem; }
/* Variedad de tinte por posición (acento en la del medio). */
.bt-cat:nth-child(3n)::before { background: radial-gradient(ellipse 80% 70% at 50% 120%, color-mix(in srgb, var(--bt-accent) 24%, transparent), transparent); }

/* Banner promocional: fondo de marca, CTA que contrasta. */
.bt-promo {
	position: relative;
	border-radius: var(--bt-r-lg);
	overflow: hidden;
	text-align: center;
	color: var(--wp--preset--color--primary-ink, #fff);
	background: linear-gradient(120deg, var(--bt-primary) 0%, color-mix(in srgb, var(--bt-primary) 55%, var(--bt-accent)) 100%);
}
.bt-promo::after {
	content: "";
	position: absolute; inset: 0; pointer-events: none;
	background:
		radial-gradient(circle at 12% 20%, color-mix(in srgb, #fff 22%, transparent), transparent 40%),
		radial-gradient(circle at 90% 90%, color-mix(in srgb, var(--bt-accent) 40%, transparent), transparent 45%);
}
.bt-promo > * { position: relative; z-index: 1; }
.bt-promo__eyebrow {
	margin: 0 0 .5rem; font-size: .78rem; font-weight: 700;
	letter-spacing: .16em; text-transform: uppercase; opacity: .85;
}
.bt-promo__title {
	margin: 0 auto .6rem; max-width: 20ch;
	color: var(--wp--preset--color--primary-ink, #fff);
	line-height: 1.1;
}
.bt-promo__text { margin: 0 auto 1.4rem; max-width: 46ch; opacity: .92; }
.bt-promo__btn .wp-block-button__link {
	background: var(--wp--preset--color--base, #fff) !important;
	color: var(--bt-ink) !important;
	padding-inline: 2rem;
}

/* --- CTA plano (variante del bloque brandtienda/cta; gradient reusa .bt-promo). --- */
.bt-promo--plain {
	background: var(--bt-surface);
	color: var(--bt-ink);
}
.bt-promo--plain::after { display: none; }
.bt-promo--plain .bt-promo__title { color: var(--bt-ink); }

/* --- Slideshow (versión de marca; pisa el fallback :where del engine). --- */
/* Alto del contrato: manuales y promo comparten la MISMA variable, así el
   carrusel no salta cuando entra la slide de campaña. ~600px en desktop,
   escala con el viewport en móvil (600 fijo en celular es altísimo). */
.bt-slideshow { border-radius: 0; --bt-slide-h: clamp(360px, 46vw, 600px); }
.bt-slideshow .bt-slide { min-height: var(--bt-slide-h); }
.bt-slide__title { font-size: var(--wp--preset--font-size--xx-large); line-height: 1.1; }
.bt-slide__btn {
	display: inline-block;
	padding: 0.75rem 1.5rem;
	border-radius: var(--bt-r-pill);
	background: var(--wp--preset--color--base, #fff);
	color: var(--bt-ink);
	font-weight: 600;
	text-decoration: none;
	transition: transform var(--bt-t);
}
.bt-slide__btn:hover { transform: translateY(-1px); }
.bt-slideshow__arrow { transition: background var(--bt-t); }
.bt-slideshow__arrow:hover { background: rgba(0, 0, 0, 0.55); }

/* --- Promo con Diseño del banner dentro de un slide. -----------------------
   El banner (`.btb`) es autocontenido: cada variante trae su propio alto. En
   el slide tiene que llenarlo entero, al alto del contrato de arriba. Dos
   niveles de estirado, porque el render es `.btb > __marco|__lienzo`: el
   slide ya es flex por el fallback del engine; lo que falta es estirar en
   cruz (el default del slide es `align-items: center`, que deja el banner a
   su alto natural, centrado, con aire abajo) y que la envoltura interna
   herede el alto. La foto de las variantes ya hace `object-fit: cover` por
   el contrato de `banner/base.css`. */
.bt-slide--banner { align-items: stretch; }
.bt-slide--banner > * { flex: 1 1 auto; min-height: 100%; }
.bt-slide--banner > .btb { display: flex; flex-direction: column; }
.bt-slide--banner > .btb > * { flex: 1 1 auto; }

/* «Tu diseño»: la imagen va a alto natural (height:auto) porque en hero y
   slots es la pieza del diseñador tal cual. Como slide tiene que cubrir el
   contrato — sin el zoom 1.12 de las fotos de catálogo, que acá deformaría
   el trabajo ajeno. */
.bt-slide--banner .btb--propio .btb__lienzo img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* --- Banner con imagen (bloque brandtienda/banner-imagen). --- */
.bt-banner {
	position: relative;
	overflow: hidden;
	border-radius: var(--bt-r-lg);
	min-height: clamp(260px, 34vw, 420px);
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(120deg, var(--bt-primary) 0%, color-mix(in srgb, var(--bt-primary) 55%, var(--bt-accent)) 100%);
}
.bt-banner__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bt-banner__img + .bt-banner__content::before {
	content: ""; position: absolute; inset: -100vh -100vw; z-index: -1; background: rgba(0, 0, 0, 0.35);
}
.bt-banner__content {
	position: relative; z-index: 1; text-align: center; color: #fff;
	padding: 2.5rem 1.25rem; max-width: 640px; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}
.bt-banner__eyebrow {
	margin: 0 0 0.4rem; font-size: 0.78rem; font-weight: 700;
	letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.9;
}
.bt-banner__title { margin: 0 0 0.5rem; color: #fff; font-size: var(--wp--preset--font-size--xx-large); line-height: 1.1; }
.bt-banner__text { margin: 0 0 1.2rem; opacity: 0.95; }
.bt-banner__btn {
	display: inline-block; padding: 0.75rem 1.5rem; border-radius: var(--bt-r-pill);
	background: var(--wp--preset--color--base, #fff); color: var(--bt-ink);
	font-weight: 600; text-decoration: none; transition: transform var(--bt-t);
}
.bt-banner__btn:hover { transform: translateY(-1px); }
.bt-banner--empty { min-height: 200px; } /* Editor sin imagen: compacto. */
.bt-banner__pick { position: relative; z-index: 2; }

/* --- Imagen con texto (bloque brandtienda/imagen-texto). --- */
.bt-imgtext {
	display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
	padding: clamp(1.5rem, 4vw, 3rem) 0;
}
@media (width > 782px) {
	.bt-imgtext { grid-template-columns: 1fr 1fr; }
	.bt-imgtext--media-right .bt-imgtext__media { order: 2; }
}
.bt-imgtext__img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--bt-r-lg); }
.bt-imgtext__title { margin: 0 0 0.75rem; }
.bt-imgtext__text { color: var(--bt-muted); margin: 0 0 1.25rem; }
.bt-imgtext__btn {
	display: inline-block; padding: 0.7rem 1.4rem; border-radius: var(--bt-r-pill);
	background: var(--bt-primary-btn); color: var(--wp--preset--color--primary-ink, #fff);
	font-weight: 600; text-decoration: none;
}

/* --- Hero v2 (bloque brandtienda/hero, layouts fondo/lado/promo). --- */
/* overflow visible: la franja de productos PISA el borde inferior (mitad
   adentro, mitad afuera). El fondo/scrim son absolute inset:0 → no desbordan. */
.bt-hero2 { position: relative; }
.bt-hero2--has-strip { margin-bottom: 4.5rem; }

/*
 * Full-bleed SIN tocar el viewport.
 *
 * Antes era `width: 100vw` + `margin-left: calc(50% - 50vw)`. El problema es que
 * `100vw` INCLUYE la barra de scroll: el hero medía 15px de más y arrancaba
 * media barra fuera del borde izquierdo —medido, -7,5px— comiéndose ese borde
 * del contenido. El `clip` de abajo tapaba el desborde derecho; el izquierdo no
 * se tapa, se pierde.
 *
 * La salida no es calcular el ancho de la barra —`calc(100vw - 100%)` no se
 * puede registrar con `@property` porque `<length>` rechaza porcentajes, y sin
 * registrar el `100%` se re-evalúa contra el padre y da cualquier cosa.
 *
 * No hace falta: el contenedor de la página YA mide el ancho del documento sin
 * la barra. Alcanza con cancelar su padding global, que es la misma variable que
 * usa core para su propio `alignfull`. Medido: left 0, ancho 1849 contra 1849 de
 * documento. Exacto, y la barra deja de entrar en la cuenta.
 *
 * Si el hero se insertara en un contenedor SIN padding global, el fallback `0px`
 * lo deja del ancho de su contenedor: no sangra, pero tampoco se corre.
 */
.bt-hero2.alignfull {
	width: auto;
	max-width: none;
	margin-left: calc(-1 * var(--wp--style--root--padding-left, 0px));
	margin-right: calc(-1 * var(--wp--style--root--padding-right, 0px));
}

/*
 * Guarda general contra el desborde horizontal.
 *
 * `clip` y no `hidden`: no crea contenedor de scroll, así el header sticky sigue
 * funcionando. Va en `html` y no en `body`: desde body el valor se propaga al
 * viewport y deja de recortar (regla de propagación de overflow de CSS).
 *
 * LO QUE NO ATRAPA, y conviene tenerlo escrito: los elementos `position: fixed`
 * se posicionan contra el VIEWPORT, no contra `html`, así que ningún `overflow`
 * en la raíz los recorta. Un panel off-canvas fijo que quede estacionado fuera
 * del borde sigue desplazando la página aunque esta regla esté puesta — medido:
 * con `clip` aplicado, `window.scrollTo(600,0)` igual movía 480px. Para esos hay
 * que sacarlos del layout en su propio estado cerrado, como abajo con el
 * mini-carrito.
 */
html {
	overflow-x: clip;
}

/*
 * El mini-carrito de WooCommerce desplazaba la página 480px de costado.
 *
 * Su panel es `position: fixed` en `left: 1849px` —estacionado justo afuera del
 * borde derecho— y WooCommerce lo oculta SOLO con `opacity: 0`. Opacidad no
 * saca del layout: el panel seguía ocupando su lugar y estirando el área
 * desplazable del viewport.
 *
 * Pasaba en toda página SIN hero (/tienda/, fichas, carrito), y en móvil se
 * siente en cada gesto lateral.
 *
 * `--is-hidden` es el marcador propio de WooCommerce para el estado cerrado, y
 * viene acompañado de `aria-hidden="true"`: no se está adivinando el estado.
 * Al abrir, WooCommerce quita la clase y el panel vuelve al layout.
 */
.wc-block-components-drawer__screen-overlay--is-hidden {
	display: none;
}

/* Botones del hero: el markup server-side no trae las clases is-layout-flex
   de core → el flex/gap lo garantiza el theme. */
.bt-hero2 .wp-block-buttons,
.bt-hero .wp-block-buttons {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	align-items: center;
}
.bt-hero2--promo .wp-block-buttons { justify-content: center; }
.bt-hero2__inner {
	position: relative; z-index: 1; max-width: var(--wp--style--global--wide-size, 1240px);
	margin-inline: auto; padding: clamp(2.5rem, 7vw, 5.5rem) var(--wp--preset--spacing--40);
}
.bt-hero2__copy { max-width: 620px; }
.bt-hero2__copy h1 { font-size: clamp(2.4rem, 6vw, 4.25rem); line-height: 1.03; margin: 0.4rem 0 1rem; }
.bt-hero2__text { margin: 0 0 1.5rem; }

/* Fondo: imagen full + scrim degradado para contraste garantizado. */
.bt-hero2--fondo { background: var(--bt-ink); }
.bt-hero2__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.bt-hero2--fondo::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(10, 10, 14, 0.72) 0%, rgba(10, 10, 14, 0.45) 45%, rgba(10, 10, 14, 0.12) 100%);
}
.bt-hero2--fondo .bt-hero2__inner { z-index: 1; }
.bt-hero2--fondo .bt-hero2__badge { z-index: 2; }
.bt-hero2--fondo .bt-hero2__strip { z-index: 1; }
.bt-hero2--fondo .bt-hero2__copy { color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4); }
.bt-hero2--fondo .bt-hero2__copy h1 { color: #fff; }
.bt-hero2--fondo .bt-hero__eyebrow { color: #fff; opacity: 0.85; }
.bt-hero2--fondo .bt-hero2__text { color: rgba(255, 255, 255, 0.92); }

/* Lado: copy + imagen destacada a la derecha (flotando con sombra). */
.bt-hero2--lado { background: linear-gradient(135deg, var(--bt-surface) 0%, color-mix(in srgb, var(--bt-primary) 14%, var(--bt-surface)) 100%); }
.bt-hero2--lado .bt-hero2__inner { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (width > 782px) {
	.bt-hero2--lado .bt-hero2__inner { grid-template-columns: 1.05fr 0.95fr; }
	/* Sin foto no hay segunda columna que llenar: el copy toma el ancho entero.
	   La grilla reservaba 0.95fr igual —una celda vacía de media portada— y el
	   texto quedaba apretado contra la izquierda. */
	.bt-hero2--lado.bt-hero2--sin-foto .bt-hero2__inner { grid-template-columns: 1fr; }
}
.bt-hero2__side { display: grid; place-items: center; }
.bt-hero2__side-img { max-width: 100%; height: auto; filter: drop-shadow(0 24px 48px rgba(16, 24, 32, 0.28)); border-radius: var(--bt-r-lg); }
.bt-hero2__side-hint { opacity: 0.6; }

/* Promo: descuento gigante sobre degradado de marca. */
.bt-hero2--promo { background: linear-gradient(120deg, var(--bt-primary) 0%, color-mix(in srgb, var(--bt-primary) 55%, var(--bt-accent)) 100%); text-align: center; }
.bt-hero2--promo .bt-hero2__copy { max-width: 720px; margin-inline: auto; color: var(--wp--preset--color--primary-ink, #fff); }
.bt-hero2--promo .bt-hero2__copy h1 { color: inherit; font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
.bt-hero2--promo .bt-hero__eyebrow { color: inherit; opacity: 0.85; }
.bt-hero2--promo .bt-hero2__text { color: inherit; opacity: 0.92; }
.bt-hero2__mega {
	margin: 0; font-weight: 800; line-height: 0.95;
	font-size: clamp(4rem, 14vw, 9rem);
	font-family: var(--wp--preset--font-family--heading);
	letter-spacing: -0.03em;
}
.bt-hero2--promo .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: var(--wp--preset--color--base, #fff); color: var(--bt-ink);
}

/* Sello de descuento (círculo rotado, layouts no-promo). Tres tamaños. */
.bt-hero2__badge, .bt-hero .bt-hero2__badge {
	position: absolute; top: clamp(1rem, 4vw, 2.5rem); right: clamp(1rem, 5vw, 4rem); z-index: 2;
	display: grid; place-items: center; text-align: center;
	aspect-ratio: 1; border-radius: 50%;
	background: var(--bt-accent); color: #fff; font-weight: 800;
	line-height: 1.1; padding: 0.6rem;
	transform: rotate(8deg); box-shadow: 0 10px 30px rgba(16, 24, 32, 0.25);
	font-family: var(--wp--preset--font-family--heading);
}
.bt-hero2__badge--sm { width: clamp(72px, 9vw, 96px); font-size: clamp(0.85rem, 1.4vw, 1.1rem); }
.bt-hero2__badge--md, .bt-hero2__badge:not([class*="--sm"]):not([class*="--lg"]) { width: clamp(110px, 14vw, 152px); font-size: clamp(1.3rem, 2.2vw, 1.8rem); }
.bt-hero2__badge--lg { width: clamp(150px, 19vw, 210px); font-size: clamp(1.8rem, 3vw, 2.6rem); }

/* Franja de productos destacados: ANCLADA al borde inferior del hero,
   corrida 50% hacia afuera → la imagen/fondo corta EXACTO en la mitad de
   la barra. Mitad adentro, mitad afuera, sin ambigüedad. */
.bt-hero2 .bt-hero2__strip {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 50%);
	z-index: 2;
	display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
	width: min(var(--wp--style--global--wide-size, 1240px), calc(100% - 2 * var(--wp--preset--spacing--40)));
	margin: 0; padding: 0.9rem 1.2rem;
	background: var(--wp--preset--color--base, #fff);
	border: 1px solid var(--bt-line); border-radius: var(--bt-r-lg);
	box-shadow: 0 16px 40px rgba(16, 24, 32, 0.18);
}
/* Aire extra sobre el borde para que el copy no choque con la barra. */
.bt-hero2--has-strip .bt-hero2__inner { padding-bottom: clamp(4rem, 9vw, 7rem); }
/* Hero simple: la franja va estática debajo del contenido. */
.bt-hero .bt-hero2__strip {
	position: static; transform: none;
	display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
	margin: 2rem auto 0; padding: 0.9rem 1.2rem;
	max-width: var(--wp--style--global--wide-size, 1240px);
	background: var(--wp--preset--color--base, #fff);
	border: 1px solid var(--bt-line); border-radius: var(--bt-r-lg);
	box-shadow: 0 16px 40px rgba(16, 24, 32, 0.18);
}
.bt-hero2__strip-label {
	font-weight: 800; padding: 0.5rem 0.9rem; border-radius: var(--bt-r-md);
	background: var(--bt-ink); color: #fff; white-space: nowrap;
}
.bt-hero2__strip-card {
	display: flex; align-items: center; gap: 0.6rem; text-decoration: none;
	color: var(--bt-ink); flex: 1 1 180px; min-width: 0;
}
/* El texto puede encoger: sin esto el nowrap del nombre impide el corte. */
.bt-hero2__strip-info { min-width: 0; }
.bt-hero2__strip-img { width: 52px; height: 52px; object-fit: cover; border-radius: var(--bt-r-md); flex: none; }
.bt-hero2__strip-name { display: block; font-weight: 600; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-hero2__strip-price { display: block; font-size: 0.85rem; color: var(--bt-muted); }
.bt-hero2__strip--mock { justify-content: flex-start; }
.bt-hero2__strip-mock-card { padding: 0.6rem 1rem; background: var(--bt-surface); border-radius: var(--bt-r-md); }

@media (width <= 782px) {
	/* Móvil: sin overlap — la barra va estática debajo del hero. */
	.bt-hero2 .bt-hero2__strip { position: static; transform: none; width: auto; margin: 1rem var(--wp--preset--spacing--40) 1rem; }
	.bt-hero2--has-strip { margin-bottom: 1.5rem; }
	.bt-hero2--has-strip .bt-hero2__inner { padding-bottom: clamp(2rem, 5vw, 3rem); }
	/* Móvil: "Destacados" arriba solo y cada producto apilado full-width.
	   Cubre las dos variantes con franja (simple y hero2), comparten clases. */
	.bt-hero .bt-hero2__strip,
	.bt-hero2 .bt-hero2__strip { flex-direction: column; align-items: stretch; padding: 0.75rem 1rem; box-shadow: 0 8px 20px rgba(16, 24, 32, 0.12); }
	.bt-hero2__strip-label { align-self: flex-start; }
	.bt-hero2__strip-card { flex: 1 1 auto; width: 100%; }
	/* La franja simple abarca la columna entera: los auto margins del desktop la
	   vuelven fit-content y con la pila en columna su max-content es el de la
	   card más ancha (~285px) quedando colgada al medio. Columna única 1fr. */
	.bt-hero { grid-template-columns: minmax(0, 1fr); }
	.bt-hero .bt-hero2__strip { width: 100%; margin-inline: 0; }
}

/* --- Columnas con ícono (bloque brandtienda/multicolumna). --- */
.bt-cols { padding: clamp(1.5rem, 4vw, 3rem) 0; }
.bt-cols__heading { text-align: center; margin: 0 0 1.5rem; }
.bt-cols__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; }
.bt-cols__item { text-align: center; padding: 1.5rem 1rem; border-radius: var(--bt-r-lg); background: var(--bt-surface); }
.bt-cols__ico { font-size: 2rem; display: block; margin-bottom: 0.6rem; }
.bt-cols__title { margin: 0 0 0.4rem; font-size: 1.05rem; }
.bt-cols__item--left { text-align: left; }
.bt-cols__item--center { text-align: center; }
.bt-cols__item--right { text-align: right; }
.bt-cols__item--left .bt-cols__ico--img img { margin: 0 auto 0.6rem 0; }
.bt-cols__item--center .bt-cols__ico--img img { margin: 0 auto 0.6rem; }
.bt-cols__item--right .bt-cols__ico--img img { margin: 0 0 0.6rem auto; }
.bt-cols__text { margin: 0; color: var(--bt-muted); font-size: 0.9rem; }
.bt-cols__ico--img img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--bt-r-md, 10px); display: block; margin: 0 auto 0.6rem; }
.bt-cols__link { text-decoration: none; color: inherit; display: block; }
.bt-cols__link:hover .bt-cols__title { text-decoration: underline; }

/* --- Comparativa (bloque brandtienda/comparativa). --- */
.bt-compara { padding: clamp(1.5rem, 4vw, 3rem) 0; }
.bt-compara__heading { text-align: center; margin: 0 0 1.5rem; }
.bt-compara__table {
	border: 1px solid var(--bt-line); border-radius: var(--bt-r-lg);
	overflow: clip; background: var(--wp--preset--color--base, #fff);
}
.bt-compara__row {
	display: grid; grid-template-columns: 1.2fr 1fr 1fr;
	border-top: 1px solid var(--bt-line);
}
.bt-compara__row:first-child { border-top: 0; }
.bt-compara__row--head { background: var(--bt-surface); font-weight: 700; }
.bt-compara__cell { padding: 0.85rem 1rem; min-width: 0; }
.bt-compara__cell--aspecto { font-weight: 600; }
.bt-compara__cell--us { background: color-mix(in srgb, var(--bt-primary) 8%, transparent); }
.bt-compara__row--head .bt-compara__cell--us { color: var(--bt-primary); }
.bt-compara__cell--them { color: var(--bt-muted); }
.bt-compara__check { color: var(--bt-primary); font-weight: 800; }
.bt-compara__foot { margin: 0.75rem 0 0; text-align: center; color: var(--bt-muted); font-size: 0.9rem; }
@media (width <= 600px) {
	.bt-compara__row { grid-template-columns: 1fr 1fr; }
	.bt-compara__cell--aspecto { grid-column: 1 / -1; padding-bottom: 0.25rem; }
	.bt-compara__row--head .bt-compara__cell:first-child { display: none; }
}

/* --- Contacto (bloque brandtienda/contacto). --- */
.bt-contacto { text-align: center; padding: clamp(1.5rem, 4vw, 3rem) 0; }
.bt-contacto__title { margin: 0 0 0.4rem; }
.bt-contacto__text { color: var(--bt-muted); margin: 0 0 1.25rem; }
.bt-contacto__actions { display: flex; justify-content: center; align-items: center; gap: 1rem; flex-wrap: wrap; }
.bt-contacto__wa {
	display: inline-block; padding: 0.75rem 1.5rem; border-radius: var(--bt-r-pill);
	background: #25d366; color: #fff; font-weight: 700; text-decoration: none;
}
.bt-contacto__item { font-weight: 600; }

/* --- Video (bloque brandtienda/video, fachada liviana). --- */
.bt-video__facade {
	position: relative; display: block; width: 100%; padding: 0; border: 0;
	border-radius: var(--bt-r-lg); overflow: clip; cursor: pointer; background: #000;
	aspect-ratio: 16 / 9;
}
.bt-video__thumb { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.bt-video__play {
	position: absolute; inset: 0; display: grid; place-items: center;
	font-size: 2rem; color: #fff;
}
.bt-video__play::before {
	content: ""; position: absolute; width: 72px; height: 72px; border-radius: 50%;
	background: var(--bt-primary); opacity: 0.9; z-index: -1;
	left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.bt-video__iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--bt-r-lg); }

/* --- Marcas (bloque brandtienda/marcas). --- */
.bt-marcas { text-align: center; padding: clamp(1.5rem, 4vw, 2.5rem) 0; }
.bt-marcas__title { margin: 0 0 1.25rem; font-size: 1.05rem; color: var(--bt-muted); }
.bt-marcas__grid { display: flex; justify-content: center; align-items: center; gap: clamp(1.5rem, 4vw, 3rem); flex-wrap: wrap; }
.bt-marcas__logo { max-height: 48px; width: auto; filter: grayscale(1); opacity: 0.7; transition: filter var(--bt-t), opacity var(--bt-t); }
.bt-marcas__logo:hover { filter: none; opacity: 1; }
/* Tamaño del logo. Mediano (48px) es el default histórico. */
.bt-marcas--size-s  .bt-marcas__logo { max-height: 34px; }
.bt-marcas--size-m  .bt-marcas__logo { max-height: 48px; }
.bt-marcas--size-l  .bt-marcas__logo { max-height: 72px; }
.bt-marcas--size-xl .bt-marcas__logo { max-height: 104px; }
/* A color: sin el filtro gris ni la opacidad, en reposo y sin depender del hover. */
.bt-marcas--color .bt-marcas__logo { filter: none; opacity: 1; }
/* Grilla: N columnas parejas (el número lo pone el bloque en --bt-marcas-cols). */
.bt-marcas--grilla .bt-marcas__grid { display: grid; grid-template-columns: repeat(var(--bt-marcas-cols, 4), 1fr); justify-items: center; }
/* Carrusel: la tira se desliza sola, en loop, y se frena al pasar el mouse. */
.bt-marcas--carrusel { overflow: hidden; }
.bt-marcas--carrusel .bt-marcas__grid { flex-wrap: nowrap; justify-content: flex-start; width: max-content; animation: bt-marcas-scroll 30s linear infinite; }
.bt-marcas--carrusel .bt-marcas__grid:hover { animation-play-state: paused; }
.bt-marcas--carrusel .bt-marcas__logo { flex: 0 0 auto; }
.bt-marcas__dup { display: contents; }
@keyframes bt-marcas-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
	/* Sin animación, la tira duplicada vuelve a envolver como una fila normal. */
	.bt-marcas--carrusel .bt-marcas__grid { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
}
@media (width <= 782px) {
	.bt-marcas--grilla .bt-marcas__grid { grid-template-columns: repeat(min(var(--bt-marcas-cols, 4), 3), 1fr); }
}
@media (width <= 600px) {
	.bt-marcas--grilla .bt-marcas__grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- Galería (bloque brandtienda/galeria). --- */
.bt-galeria__title { text-align: center; margin: 0 0 1.25rem; }
.bt-galeria__grid { display: grid; gap: 0.75rem; }
.bt-galeria__grid--2 { grid-template-columns: repeat(2, 1fr); }
.bt-galeria__grid--3 { grid-template-columns: repeat(3, 1fr); }
.bt-galeria__grid--4 { grid-template-columns: repeat(4, 1fr); }
.bt-galeria__img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--bt-r-md); }

@media (width <= 782px) {
	.bt-cats { grid-template-columns: repeat(3, 1fr); }
	.bt-slideshow__arrow { display: none; } /* En móvil manda el swipe. */
	.bt-galeria__grid--3, .bt-galeria__grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (width <= 600px) {
	.bt-cats { grid-template-columns: repeat(2, 1fr); }
	.bt-cat { min-height: 104px; }
}

/* Product Collection del home: respetar columns-5/4 (Woo lo marca en la
   clase pero el grid auto-fill resolvía 4). Grid explícito + responsive. */
.wp-block-woocommerce-product-collection .wc-block-product-template {
	display: grid;
}
.wp-block-woocommerce-product-collection .wc-block-product-template.columns-5 {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}
.wp-block-woocommerce-product-collection .wc-block-product-template.columns-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
.wp-block-woocommerce-product-collection .wc-block-product-template > li { width: auto !important; margin: 0 !important; }
@media (max-width: 1100px) {
	.wp-block-woocommerce-product-collection .wc-block-product-template.columns-5,
	.wp-block-woocommerce-product-collection .wc-block-product-template.columns-4 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (width <= 782px) {
	.wp-block-woocommerce-product-collection .wc-block-product-template.columns-5,
	.wp-block-woocommerce-product-collection .wc-block-product-template.columns-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Tarjeta de producto (clásica): links sin subrayado, título/rating limpios.
   Woo-general se carga también en el home ahora; esto asegura el look. */
.woocommerce ul.products li.product a:not(.button) { text-decoration: none; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { text-decoration: none; }
/* Rating con aire y sin empujar el botón contra el precio. */
.woocommerce ul.products li.product .star-rating { margin: .1rem 0 .15rem; }
.woocommerce ul.products li.product .price { margin-bottom: .15rem; }

/* Alturas uniformes + botón al fondo (woo-general reintroduce float y quita
   el stretch → tarjetas con badge de urgencia empujaban el botón). */
.woocommerce ul.products { align-items: stretch; }
.woocommerce ul.products li.product { height: 100%; justify-content: flex-start; }
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
	margin-top: auto !important;
}
.woocommerce ul.products li.product .brandtienda-urgency,
.woocommerce ul.products li.product .brandtienda-slot { margin-top: 0 !important; }

/* Tarjetas de bloque (product-collection): altura uniforme + botón al fondo.
   El rating/título de 2 líneas variaba la altura y desalineaba los botones. */
.wp-block-woocommerce-product-collection .wc-block-product-template > li {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.wp-block-woocommerce-product-collection .wc-block-product-template .wp-block-woocommerce-product-button {
	margin-top: auto;
}
.wp-block-woocommerce-product-collection .wc-block-product-template .wp-block-woocommerce-product-button .wp-block-button__link {
	width: 100%;
}
/* Rating de bloque con aire consistente. */
.wp-block-woocommerce-product-collection .wc-block-components-product-rating { margin: .15rem 0; min-height: 1.2em; }

/* ------------------------------ Menú móvil jerárquico (overlay + dropdown). */
/*
 * El engine siembra padre/hijo/nieto como `core/navigation-submenu` anidados;
 * el overlay del bloque Navigation (overlayMenu:"mobile") ya los expande como
 * acordeón con el viewScript de WP core — acá solo va la marca, sin JS propio.
 */

/* Overlay full-screen en tono claro. */
.bt-header__nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--base, #fff);
	color: var(--bt-ink);
	padding: 1rem 1.25rem 2.5rem;
	overflow-y: auto;
}

/* WP centra el overlay por default: lista a la izquierda, ancho completo. */
.bt-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	justify-content: flex-start;
	align-items: stretch;
	gap: 0;
	width: 100%;
}
.bt-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	margin: 0;
}

/* Filas de 48px con separador sutil entre ítems de primer nivel. */
.bt-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	gap: .5rem;
	width: 100%;
	min-height: 48px;
	padding-top: .35rem;
	padding-bottom: .35rem;
}
.bt-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	border-top: 1px solid var(--bt-line);
}
/* Nombres largos: se parten dentro de la fila en vez de desbordar. */
.bt-header__nav .wp-block-navigation__responsive-container.is-menu-open a.wp-block-navigation-item__content,
.bt-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content a {
	min-width: 0;
	overflow-wrap: break-word;
}

/* "+/−" de marca en vez del chevron de core, con área de toque amplia. */
.bt-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
	display: grid;
	place-items: center;
	min-width: 48px;
	min-height: 48px;
	margin-left: auto;
	padding: 0;
	background: none;
	border: 0;
	color: var(--bt-primary);
	font-size: 1.6rem;
	font-weight: 300;
	line-height: 1;
	cursor: pointer;
}
.bt-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle svg {
	display: none;
}
.bt-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle::after {
	content: "+";
}
.bt-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="true"]::after {
	content: "−";
}

/*
 * Sangría por nivel: cada submenú anidado se corre solo (la regla matchea en
 * cascada), con un filo de marca para leer la profundidad.
 */
.bt-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	gap: 0;
	margin: 0 0 .25rem .25rem;
	padding-inline-start: 1rem;
	border-inline-start: 2px solid color-mix(in srgb, var(--bt-primary) 30%, transparent);
}

/* Hamburguesa y cierre con color de marca. */
.bt-header__nav .wp-block-navigation__responsive-container-open,
.bt-header__nav .wp-block-navigation__responsive-container-close {
	color: var(--bt-ink);
}
.bt-header__nav .wp-block-navigation__responsive-container-open:hover,
.bt-header__nav .wp-block-navigation__responsive-container-close:hover {
	color: var(--bt-primary);
}

/* Categoría actual. */
.bt-header__nav .wp-block-navigation a[aria-current="page"] {
	color: var(--bt-primary);
}

/* Desktop: los submenu ahora también son dropdowns — mínimo de marca para que
   no queden con el look crudo de core. */
@media (width > 782px) {
	.bt-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container {
		background: var(--wp--preset--color--base, #fff);
		border: 1px solid var(--bt-line);
		border-radius: var(--bt-r-md);
		box-shadow: 0 12px 28px rgba(16, 24, 32, .12);
		padding: .4rem;
	}
}

/* ------------------------------ Mega-nav desktop ("Todas las categorías"). */
/*
 * Category button next to the header navigation: a <details> with the
 * top-level categories in columns. The regular navigation block (Inicio,
 * Tienda, Ofertas, Contacto) sits beside it in the same row — both stay
 * visible on desktop. On mobile the pill stays visible next to the
 * hamburger (compact, same row) and its panel drops full-width below the
 * nav row as a single column; the navigation hamburger + overlay take
 * care of the pages, unchanged.
 */
.bt-mega-nav { display: flex; align-items: center; gap: 1.25rem; }

/* The button is first on the LEFT, so the panel hangs from the LEFT edge of
   the header nav container (the positioned ancestor on desktop, see below) and
   grows left → right. Never centered under the button: centering under a
   left-edge button pushes the panel past the viewport on the left side. */
.bt-mega { position: relative; }
.bt-mega__toggle {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .55rem 1.1rem;
	border: 0;
	border-radius: var(--bt-r-pill);
	background: var(--bt-primary-btn);
	color: var(--wp--preset--color--primary-ink, #fff);
	font-weight: 600;
	font-size: .88rem;
	font-family: inherit;
	cursor: pointer;
	list-style: none;
	transition: filter var(--bt-t);
}
.bt-mega__toggle:hover { filter: brightness(1.08); }
/* Sin el marcador nativo del details (triángulo): el botón ya lleva su icono. */
.bt-mega__toggle::-webkit-details-marker { display: none; }
.bt-mega__toggle::marker { content: ""; }
.bt-mega__panel {
	position: absolute;
	top: calc(100% + 10px);
	/* Left-anchored fallback (button-relative). The desktop media query below
	   re-anchors this to the nav container; these values just keep it off the
	   left viewport edge anywhere the query does not apply. */
	left: 0;
	right: auto;
	transform: none;
	z-index: 30;
	/* Width follows the content, never the viewport: capped by the container
	   (100% of the positioned ancestor) and by the viewport with a safety
	   margin, so it fits at any resolution without horizontal clipping. */
	/* Columns set by PHP from the top-level count (--bt-mega-cols).
	   Grid, NOT CSS multicol: a multicol container paginates overflow
	   horizontally, so with a capped height + overflow-x: clip the extra
	   columns were clipped instead of scrolling. Grid flows row by row and
	   scrolls vertically, so all categories stay reachable. Row-major order
	   (left to right, then next row) is the CSS-only tradeoff; true
	   column-major order needs a PHP wrapper — see note below. */
	width: fit-content;
	max-width: min(100%, calc(100vw - 2rem));
	display: grid;
	grid-template-columns: repeat(var(--bt-mega-cols, 3), minmax(0, max-content));
	column-gap: 1.75rem;
	align-items: start;
	/* Huge catalogs scroll vertically only — horizontal overflow is clipped,
	   never scrollable, so nothing is ever cut off outside the viewport.
	   overscroll-behavior keeps the inner scroll from chaining to the page. */
	max-height: min(70vh, 640px);
	overflow-y: auto;
	overflow-x: clip;
	overscroll-behavior-y: contain;
	/* Subtle thin scrollbar (Firefox). */
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--bt-muted) 45%, transparent) transparent;
	padding: 1.25rem 1.5rem;
	background: var(--wp--preset--color--base, #fff);
	border: 1px solid var(--bt-line);
	border-radius: var(--bt-r-lg);
	box-shadow: 0 16px 40px rgba(16, 24, 32, .14);
}
/* Subtle thin scrollbar (WebKit/Chromium/Safari): 6px, translucent thumb
   on a transparent track, slightly stronger on hover. */
.bt-mega__panel::-webkit-scrollbar { width: 6px; }
.bt-mega__panel::-webkit-scrollbar-track { background: transparent; }
.bt-mega__panel::-webkit-scrollbar-thumb {
	background: color-mix(in srgb, var(--bt-muted) 45%, transparent);
	border-radius: 999px;
}
.bt-mega__panel::-webkit-scrollbar-thumb:hover {
	background: color-mix(in srgb, var(--bt-muted) 70%, transparent);
}
/* Cada grupo/link suelto es una unidad de columna: nunca se parte en dos. */
.bt-mega__group,
.bt-mega__link {
	break-inside: avoid;
	display: block;
	margin-bottom: 1rem;
}
.bt-mega__title {
	display: block;
	margin-bottom: .3rem;
	font-weight: 600;
	color: var(--bt-ink);
	text-decoration: none;
	white-space: nowrap;
}
.bt-mega__title:hover { color: var(--bt-primary); }
.bt-mega__subs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .3rem;
}
.bt-mega__sub,
.bt-mega__link {
	color: var(--bt-muted);
	text-decoration: none;
	font-size: .9rem;
	white-space: nowrap;
}
.bt-mega__sub:hover,
.bt-mega__link:hover { color: var(--bt-primary); }
/* Línea divisoria bajo cada categoría/subcategoría (estética). */
.bt-mega__link {
	padding-bottom: .55rem;
	margin-bottom: .55rem;
	border-bottom: 1px solid var(--bt-line);
}
.bt-mega__sub-item {
	padding-bottom: .3rem;
	border-bottom: 1px solid var(--bt-line);
}

/* Desktop: el navigation y el botón de categorías conviven en la misma fila.
   (Antes el navigation se escondía acá, y como este CSS también carga en el
   editor vía add_editor_style, el canvas tampoco mostraba el menú.) */
@media (width > 782px) {
	.bt-header__nav { position: relative; }
	/* Static button wrapper: the panel's containing block becomes
	   .bt-header__nav, so left:0 pins it to the container's left edge and
	   max-width:100% caps it at the container width. It opens left → right
	   no matter where the button sits in the row. */
	.bt-mega { position: static; }
}

/* Mobile: the category pill stays visible next to the hamburger, so
   categories remain one tap away without opening the overlay. The panel
   drops full-width below the nav row as a single column (multiple columns
   would be unreadable at 360px) and long names wrap instead of
   overflowing. The navigation overlay is untouched: pages still live
   there. */
@media (width <= 782px) {
	.bt-header__nav { position: relative; align-items: center; }
	.bt-mega-nav { display: flex; flex: 1 1 auto; min-width: 0; }
	/* Static wrapper: the panel's containing block becomes .bt-header__nav,
	   so left:0 pins it to the row's left edge and max-width:100% caps it
	   at the row width — full-width drop-down, no viewport overflow. */
	.bt-mega { position: static; flex: 1 1 auto; min-width: 0; }
	.bt-mega__toggle { max-width: 100%; }
	.bt-mega__toggle span {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.bt-mega__panel {
		left: 0;
		right: 0;
		width: auto;
		max-width: 100%;
		grid-template-columns: minmax(0, 1fr);
		top: calc(100% + 8px);
		max-height: min(70vh, 560px);
	}
	.bt-mega__title,
	.bt-mega__sub,
	.bt-mega__link { white-space: normal; overflow-wrap: break-word; }
}