/* ==========================================================================
   BrandTienda BMG — project-specific layer.
   Everything in this file belongs to THIS project, not to the core theme.
   The parent keeps only the generic system; update it via git freely.
   Bump the child Version (style.css) whenever this file changes.
   ========================================================================== */

/* Desktop: submenus are dropdowns with brand minimum styling.
   min-width 300px: the core default (~200px) wrapped the SERVICIOS items at
   one word per line (REPARACIÓN / DE / NOTEBOOKS); with ~284px usable they
   fit 2+ words (REPARACIÓN DE / NOTEBOOKS). Scoped to desktop: the mobile
   overlay is untouched. max-width 90vw guards against overflow on narrow
   viewports.
   NOTE: core re-declares min-width:200px in its OPEN-state rules (:hover and
   toggle[aria-expanded="true"], specificity 0-5-0). The base min-width above
   loses exactly when the dropdown opens — hence the mirrored selectors with
   the .bt-header__nav prefix (0-7-0) below: they win regardless of load
   order. The !important is insurance against CSS re-ordering optimizers/CDN;
   core uses no !important here. */
@media (min-width: 783px) {
	.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;
		min-width: 300px;
		max-width: 90vw;
	}
	.bt-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		white-space: normal;
		overflow-wrap: break-word;
	}
	/* Mega-nav look for the SERVICIOS dropdown: mirrors .bt-mega__sub /
	   .bt-mega__link — muted uppercase gray text, .9rem, thin --bt-line
	   divider, hover/focus on the vivid --bt-primary. Scoped to desktop +
	   closed/open dropdown (never touches the mobile overlay).
	   Specificity 0-6-0+: beats core without !important. */
	.bt-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item > a.wp-block-navigation-item__content,
	.bt-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item > button.wp-block-navigation-item__content {
		display: block;
		color: var(--bt-muted);
		font-size: .9rem;
		text-transform: uppercase;
		letter-spacing: .04em;
		text-decoration: none;
		padding-bottom: .55rem;
		margin-bottom: .55rem;
		border-bottom: 1px solid var(--bt-line);
	}
	.bt-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item:last-child > a.wp-block-navigation-item__content,
	.bt-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item:last-child > button.wp-block-navigation-item__content {
		margin-bottom: 0;
	}
	.bt-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item > a.wp-block-navigation-item__content:hover,
	.bt-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item > button.wp-block-navigation-item__content:hover,
	.bt-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item > a.wp-block-navigation-item__content:focus-visible,
	.bt-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item > button.wp-block-navigation-item__content:focus-visible {
		color: var(--bt-primary);
	}
	/* Open on hover: core forces 200px via
	   .wp-block-navigation .has-child:not(.open-on-click):hover > ul. */
	.bt-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container {
		min-width: 300px !important;
		max-width: 90vw;
	}
	/* Open on click/toggle: core forces 200px via
	   .wp-block-navigation .has-child .toggle[aria-expanded="true"] ~ ul. */
	.bt-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
		min-width: 300px !important;
		max-width: 90vw;
	}
}

/* SERVICIOS (button) and OFERTAS (fire) items of the main menu.
 *
 * A submenu without its own URL renders a <button> instead of an <a>: it
 * gets the same type, uppercase and color as the links so SERVICIOS blends
 * in next to INICIO/TIENDA/OFERTAS (desktop and mobile overlay).
 * OFERTAS keeps the same weight, size and text color as the rest and only
 * adds an inline fire icon (SVG mask in the brand accent): no emoji, the
 * row never breaks. The mobile overlay already lists these items (core
 * expands them as an accordion): the icon travels with the link, no extra
 * rules needed. */
.bt-header .wp-block-navigation button.wp-block-navigation-item__content {
	text-transform: uppercase;
	letter-spacing: .04em;
	font-weight: 500;
	color: var(--bt-ink);
}
.bt-header .wp-block-navigation button.wp-block-navigation-item__content:hover {
	color: var(--bt-primary);
}
.bt-header .wp-block-navigation-item.bt-nav-ofertas > .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	gap: .35em;
}
.bt-header .wp-block-navigation-item.bt-nav-ofertas > .wp-block-navigation-item__content::before {
	content: "";
	flex: none;
	width: 1em;
	height: 1em;
	/* Forced red: the site's vivid accent (#00C2C2) does not read as fire;
	   !important wins over the theme cascade. */
	background: #E1211C !important;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ------------------------------ Inner pages (page.html lineage). */
/*
 * Content accepts the blocks' own widths, like the home does.
 *
 * page.html nests a constrained post-content (720px) inside a constrained
 * main: alignwide/alignfull children could only break out to the 720px
 * container and heroes rendered as a narrow centered strip. Without
 * max-width the container spans main's width: wide blocks reach 1240px,
 * full heroes reach the viewport (core already cancels the nested
 * container padding and the inner alignfull margins), and plain text stays
 * at 720px centered via the core rule for non-aligned children. Only pages
 * with constrained content (body.page + constrained post-content): home
 * uses front-page.html without post-content, and cart/checkout carry
 * post-content in flow layout, so none of them match this selector.
 */
body.page main.wp-block-group > .wp-block-post-content.is-layout-constrained {
	max-width: none;
}

/* Fallback: hide the dual-price toggle and the shipping estimator in case
   their PHP/JS removal is bypassed (cached HTML, CDN, optimizer reorder). */
button.bmg-toggle { display: none !important; }
.brandtienda-envio { display: none !important; }

/* ------------------------------ Mega-nav: scroll interno del panel. */
/*
 * POR QUÉ ACA NO HAY NADA (y antes había un multicol que estaba roto)
 *
 * El panel se arma en el padre con `display: grid`
 * (theme.css:1428-1429), `max-height: min(70vh, 640px)` y
 * `overflow-y: auto` (theme.css:1435-1436). Ese grid ES el scroll interno: si
 * el contenido no entra en el alto, scrollea en vertical y toda categoría queda
 * alcanzable.
 *
 * En una versión anterior este bloque ponía `display: block` + `column-count`
 * en escritorio, para "emparejar" las columnas. Eso ROMPIÓ el scroll, y el
 * padre ya lo dice, y en la dirección contraria (theme.css:1419-1425):
 *
 *   "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."
 *
 * O sea: un contenedor multicol NO scrollea en vertical. Con el alto acotado,
 * el contenido que no entra no baja: se sigue paginando en columnas EXTRA hacia
 * la derecha, y el padre pone `overflow-x: clip` (theme.css:1437), así que esas
 * columnas quedan recortadas y son INALCANZABLES. No hay scroll porque el
 * desborde no es vertical.
 *
 * Eso es exactamente lo que se reportó al abrir un grupo: las categorías de
 * abajo se perdían y el panel saltaba de lugar. Peor: el ancho de cada columna
 * en multicol sale del contenido, así que al abrir un grupo el panel se
 * recalculaba y se movía.
 *
 * El argumento que justificaba el multicol ("el riesgo venía de darle una
 * altura DEFINIDA, acá uso max-height") no sostenía: `max-height` también es un
 * alto acotado, y el recorte documentado ocurre igual.
 *
 * LO QUE SE PIERDE Y POR QUÉ NO DUELE
 * El grid del padre es row-major (izquierda a derecha, luego la fila siguiente),
 * así que el índice alfabético se lee por filas y no bajando por columnas. Es
 * el trade-off que el propio padre acepta en theme.css:1423-1425 y dice que el
 * orden column-major de verdad necesita un wrapper en PHP.
 *
 * En el estado normal (todo plegado) no se nota: las 30 raíces dan 8 filas
 * parejas de una línea. La fila se desproporciona recién cuando abrís un grupo,
 * y eso es inherente a cualquier acordeón en grilla, no un defecto de este
 * panel.
 *
 * POR QUÉ NO HAY OVERRIDE EN NINGÚN ANCHO
 * Por debajo de 783px el padre ya cae a una sola columna
 * (`grid-template-columns: minmax(0, 1fr)`) con `max-height: min(70vh, 560px)`,
 * y ahí también scrollea en vertical. Móvil y escritorio usan el mismo
 * mecanismo, así que este archivo no necesita tocar el panel en ningún ancho.
 */
/* Sin override de panel en escritorio: manda el grid del padre
   (theme.css:1428-1438). Ver la nota de arriba. */

/* ------------------------------ Mega-nav: desplegable en móvil. */
/*
 * En pantallas angostas las categorías con hijas no vienen desplegadas: se ve
 * solo el título y al apretar el botón se abren sus subcategorías.
 *
 * El botón lo inyecta el servidor (functions.php →
 * brandtienda_bmg_mega_nav_boton_desplegar) y va DESPUÉS del `</a>` del título,
 * nunca adentro: un `<button>` dentro de un `<a>` es contenido interactivo
 * anidado, HTML no válido y foco de teclado roto.
 *
 * El botón solo existe para los `<div class="bt-mega__group">`. Las categorías
 * de primer nivel SIN hijas las emite el padre como `<a class="bt-mega__link">`
 * sueltas, sin `<ul>` debajo (inc/blocks.php:882-885): no hay nada que
 * desplegar, así que no llevan botón.
 *
 * El colapso aplica en TODOS los anchos, no solo en el móvil. Con 30 categorías
 * de primer nivel y 42 subcategorías, el panel de escritorio se cortaba a mitad
 * de camino (llegaba hasta JOYSTICK) y había que scrollear para ver el resto.
 * Plegadas las hijas, entran las 30 raíces sin scroll. El costo es un click
 * extra para ver las subcategorías de un grupo: se acepta a cambio de que la
 * lista completa entre de una.
 */
/* Título a la izquierda, botón a la derecha, en la misma fila. El padre
   pone `display: block` y `margin-bottom: 1rem` en el grupo
   (theme.css:1460-1465); acá pasa a grid de dos columnas. El `<ul>` de
   subcategorías se despliega con `grid-column: 1 / -1` para ocupar LAS DOS
   columnas: si no, se encajaría en la columna angosta del título. */
.bt-mega__group {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	column-gap: .75rem;
}

.bt-mega__group .bt-mega__title {
	grid-column: 1;
	grid-row: 1;
	/* El margen inferior del título era el ritmo vertical hacia sus hijas
	   (theme.css:1468). Con el título en una fila compartida con el botón,
	   ese aire se traspasa al `<ul>` de abajo. */
	margin-bottom: 0;
}

.bt-mega__cat-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	grid-column: 2;
	grid-row: 1;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 1px solid var(--bt-line);
	border-radius: 999px;
	background: transparent;
	color: var(--bt-ink);
	cursor: pointer;
}

.bt-mega__cat-toggle:hover {
	color: var(--bt-primary);
	border-color: var(--bt-primary);
}

/* Foco visible: sin esto el botón no se puede usar desde el teclado. El
   tema ya usa este mismo par de valores (theme.css:43). */
.bt-mega__cat-toggle:focus-visible {
	outline: 2px solid var(--bt-primary);
	outline-offset: 2px;
}

/* Chevron dibujado con pseudo-elemento en vez de un SVG en el HTML. Es
   contenido generado por CSS, que los lectores de pantalla no anuncian, así
   que el nombre accesible del botón queda solo en el aria-label que pone el
   servidor: un icono sin aria-hidden no aportaba nada y duplicaba texto. */
.bt-mega__cat-toggle::before {
	content: "";
	width: .45rem;
	height: .45rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-20%) rotate(45deg);
	transition: transform var(--bt-t);
}

.bt-mega__panel.is-collapsible .bt-mega__group.is-open .bt-mega__cat-toggle::before {
	transform: translateY(20%) rotate(-135deg);
}

.bt-mega__group .bt-mega__subs {
	grid-column: 1 / -1;
	/* Aire entre el título y sus hijas (ver la nota del margin del título). */
	margin-top: .35rem;
}

/*
 * POR QUÉ EL COLAPSO DEPENDE DE `is-collapsible` Y NO DE UNA CLASE DEL HTML
 *
 * `is-collapsible` la AGREGA el JavaScript (assets/js/bmg-mega-movil.js) en
 * TODOS los anchos: con 30 categorías de primer nivel el panel de escritorio se
 * cortaba a mitad de camino y había que scrollear. Si el JS no carga, falla o el
 * navegador no lo ejecuta, la clase no está, ninguna de las dos reglas de abajo
 * aplica y las subcategorías siguen visibles: navegables con enlaces y sin dejar
 * ninguna categoría inalcanzable. Si la clase estuviera en el HTML el fallo
 * sería el contrario y grave: sin JS no se abriría NADA y el panel de
 * categorías quedaría inservible en un navegador sin JavaScript.
 *
 * El estado abierto/cerrado es solo CSS, por la clase `is-open` del grupo,
 * nunca un atributo inline: así el HTML pintado antes de que corra el JS es
 * válido por sí solo y el script solo aporta la interacción.
 */
.bt-mega__panel.is-collapsible .bt-mega__subs {
	display: none;
}

.bt-mega__panel.is-collapsible .bt-mega__group.is-open .bt-mega__subs {
	display: grid;
	}

/* ------------------------------ Sidebar de tienda: árbol de categorías. */
/*
 * El grupo "Categoría" del filtro de /tienda/ lo reagrupa el child en 3
 * niveles (functions.php → brandtienda_bmg_filtros_cats_agrupa_html). El `<ul>`
 * raíz conserva el max-height: 260px + overflow-y: auto del engine
 * (brandtienda-engine/assets/css/filters.css:46), así que el scroll sigue
 * siendo UNO y el sidebar no se estira.
 *
 * Por qué `max-height: none` en las sublistas: el selector del engine es
 * `.btf__list` a secas, así que hereda el clamp también en `.btf__list--sub`.
 * Sin esto cada `<li>` con hijas tendría su propio scroll interno anidado
 * dentro del scroll del padre: dos barras para un solo grupo, y con la
 * sublista más corta que su caja el contenido se corta sin llegar a leerse.
 * El alto del `<ul>` raíz no se toca, que es lo único que acota la altura.
 *
 * La guía vertical con border-left sobre --bt-line (la misma línea divisoria
 * que usa el mega-nav) marca el salto de nivel sin sumar un color: la sangría
 * sola no se lee cuando una categoría tiene muchas hijas cortas.
 *
 * El `li` raíz queda sin estilo de lista porque el engine ya pone
 * list-style: none en .btf__list; el padding-left corre por el `<ul>` para que
 * todos los niveles compartan la misma lógica de sangría.
 */
.bt-shop__aside .btf__list--sub {
	padding-left: .85rem;
	max-height: none;
	overflow: visible;
	border-left: 1px solid var(--bt-line);
	margin-left: .35rem;
	gap: 0;
}

/* Los descendientes se leen un punto más chico que la raíz para que la
   jerarquía se vea en el tamaño de letra y no solo en la sangría. */
.bt-shop__aside .btf__list--sub .btf__opt-label {
	font-size: .88em;
	color: var(--bt-muted);
}

/* La raíz se lee como encabezado de grupo: sin ella, una categoría de nivel 1
   y su hija de nivel 2 se leen igual y el agrupado no aporta nada. El peso lo
   pone el HIJO directo (`.btf__item--l1 > .btf__opt`) para no heredar el 600 a
   los nietos, que deben seguir en el peso normal del engine. */
.bt-shop__aside .btf__item--l1 > .btf__opt {
	font-weight: 600;
}

.bt-shop__aside .btf__item--l1 > .btf__opt .btf__opt-label {
	color: var(--bt-ink);
}

/* El checkbox se corre un poco para que la sangría y el cuadro queden
   alineados en los tres niveles. */
.bt-shop__aside .btf__list--sub .btf__opt {
	padding-left: .2rem;
}

/* ------------------------------ Mega-nav: jerarquía legible. */
/*
 * Una categoría de primer nivel se emite de dos formas en el padre
 * (inc/blocks.php:882-888):
 *
 *   - con hijas  → <a class="bt-mega__title">  → font-weight 600
 *   - sin hijas  → <a class="bt-mega__link">   → comparte estilo con las
 *                                                SUBCATEGORÍAS
 *
 * O sea que el padre estiliza la hoja de nivel 1 como si fuera de nivel 2: gris
 * (--bt-muted) y 0.9rem. En el desplegable eso hace que ACCESORIOS, JOYSTICK,
 * MOUSE PAD y las demás sin hijas se lean como hijas de algo, y la jerarquía
 * se pierde a simple vista.
 *
 * PESO, MÁS PROLIJO
 * Con los 30 títulos de primer nivel en mayúscula y peso 600 el panel se leía
 * como un muro de texto: ningún nombre destacaba y todos competían entre sí. Se
 * baja el grupo a 500 y la hoja a 400, dejando que el botón desplegable sea el
 * que marque qué categorías tienen hijas. El mismo tamaño para las dos, así la
 * columna se lee como una sola lista y no como dos tipos de cosa.
 *
 * OJO con el 500: el sitio carga Montserrat 400/600/700 e Inter 400/700, así
 * que NO existe un peso 500 y el navegador dibuja 400. Hoy el resultado en
 * pantalla es que los 30 nombres van en normal, que es lo pedido. El 500 queda
 * escrito para que el día que se cargue una fuente con ese peso reaparezca la
 * jerarquía sola; no es un 500 que se esté perdiendo ni un valor a corregir.
 *
 * LÍNEAS Y RITMO
 * Con el margen de 1rem que el padre pone en la celda (theme.css:1460-1465) y
 * 30 items, el panel queda con aire de más y sin separación: los nombres flotan.
 * El ritmo pasa al `padding` y el divisor lo hace `border-bottom`, con el mismo
 * `--bt-line` que ya usa el tema. Es la misma línea que el padre dibuja bajo
 * cada subcategoría, así que el bloque se lee como una lista uniforme.
 *
 * El padding va arriba Y abajo, no solo abajo: el divisor marca el FINAL de una
 * fila, así que si solo airea abajo el nombre siguiente queda pegado a la línea
 * y la lista se ve apretada. Con .5rem de cada lado la línea se lee como lo que
 * es, un separador entre dos filas.
 *
 * La última subcategoría de un grupo pierde su línea para no quedar pegada a
 * la del grupo, que daría dos píxeles seguidos.
 *
 * Sin cambio de markup: `bt-mega__link` solo lo emite el padre para términos
 * de primer nivel sin hijas, nunca para una subcategoría real, así que estas
 * reglas no tocan ningún nivel 2.
 */
.bt-mega__link {
	display: block;
	/* Deshace el 0.9rem de la regla compartida con .bt-mega__sub. */
	font-size: inherit;
	font-weight: 400;
	color: var(--bt-ink);
}

.bt-mega__link:hover {
	color: var(--bt-primary);
}

/* El padre pone 600 en el título (theme.css:1466). */
.bt-mega__title {
	font-weight: 500;
}

/* Divisor y ritmo, igual para las dos formas de nivel 1. */
.bt-mega__group,
.bt-mega__link {
	margin-bottom: 0;
	padding: .5rem 0;
	border-bottom: 1px solid var(--bt-line);
}

/* Evita la línea doble entre la última subcategoría y la del grupo. */
.bt-mega__group .bt-mega__sub-item:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

/* Popup promo: la X de cierre siempre visible y táctil.
   El tema padre la deja en 30px casi sin fondo y se pierde sobre la foto;
   acá va pastilla sólida de alto contraste de 44px (mínimo táctil móvil). */
.bgpro-ann--popup .bgpro-ann__close {
	width: 44px;
	min-width: 44px;
	height: 44px;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: rgba(20, 16, 24, 0.85);
	color: #fff;
	font-size: 24px;
	line-height: 1;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
	z-index: 5;
}
.bgpro-ann--popup .bgpro-ann__close:hover {
	background: #000;
	color: #fff;
}

/* Top contact bar (shortcode [brandtienda_contacto]). Transparent background:
   the blue (or gradient) comes from the wrapping Group block in the editor,
   so the bar always matches its container. White text inherits contrast. */
.bt-contactbar {
	background: transparent;
	color: var(--wp--preset--color--base, #ffffff);
	font-size: 0.8rem;
}
.bt-contactbar__inner {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4rem 1.25rem;
	padding: 0.35rem 1rem;
}
.bt-contactbar__item {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: inherit;
	text-decoration: none;
}
.bt-contactbar__item:hover {
	text-decoration: underline;
}
.bt-contactbar__item svg {
	flex: none;
}
@media (max-width: 640px) {
	.bt-contactbar {
		font-size: 0.72rem;
	}
	.bt-contactbar__inner {
		gap: 0.3rem 0.8rem;
		padding: 0.3rem 0.75rem;
	}
}

/* Aviso de urgencia en rojo. El acento del sitio (cian) no comunica escasez,
   y este cartel tiene que leerse como alarma. Se redefine --bt-accent en el
   propio elemento: asi cambian el texto, el punto y el pulso de una sola vez. */
.brandtienda-urgency {
	--bt-accent: #cc1818;
}

/* El aviso de ultima unidad tiene que cortar la lectura, no parecer otro
   parrafo de la descripcion: chip gris redondeado con icono de alerta rojo.
   Solo en la ficha (--low_stock); la variante de tarjetas (--low_stock_badge)
   sigue compacta para no romper la grilla. */
.brandtienda-urgency--low_stock {
	padding: 0.5rem 0.85rem;
	background: #f2f2f0;
	border: 1px solid #e6e6e2;
	border-radius: 8px;
	font-size: 0.9rem;
	line-height: 1.25;
}
.brandtienda-urgency--low_stock::before {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	border-radius: 0;
	background: none;
	box-shadow: none;
	animation: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23cc1818'%3E%3Cpath d='M12 2 1 21h22L12 2zm0 5.7 6.5 11.3h-13L12 7.7zM11 10h2v5h-2zm0 6h2v2h-2z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px 18px;
}