/**
 * Ajustes de compatibilidad del tema Bubba ST.
 *
 * 🚨 ESTO NO CAMBIA EL DISEÑO. Completa lo que le falta al tema para que se vea
 * como fue diseñado. Cada bloque de acá abajo arregla algo medido en pantalla,
 * y dice qué se rompía sin él.
 *
 * Vive en el plugin y no en el tema a propósito: el tema se sube por ZIP y cada
 * subida borra lo que se le haya editado adentro.
 */

/* ============================================================
   🚨 LOS NOMBRES DE LAS VARIABLES DEL TEMA
   ============================================================

   Los tokens del tema Bubba ST se llaman así, y NO como parecería:

     --bst-black  --bst-white  --bst-mute (#6F6F6F)  --bst-label (#9A9A97)
     --bst-body (#4A4A48)  --bst-off (#C9C8C5)
     --bst-line (rgba 0,0,0,.09)   --bst-line2 (rgba 0,0,0,.16)
     --bst-ph  --bst-ph2  --bst-soft  --bst-soft2  --bst-soft3
     --bst-r-card  --bst-r-field  --bst-pill  --bst-ease

   NO existen `--bst-text-2`, `--bst-hair`, `--bst-disabled` ni `--bst-font`:
   ésos son de una copia vieja del tema que quedó en la carpeta de trabajo.

   Y el error es MUDO: cuando un `var()` no existe, el navegador descarta la
   declaración ENTERA. Un `border: 1px solid var(--bst-hair)` no queda gris —
   queda con el color del texto. Un `font: 400 14px/1 var(--bst-font)` no queda
   con otra tipografía: queda sin tamaño ni peso. Se ve raro sin decir por qué.

   Para comprobar uno: getComputedStyle(document.documentElement)
       .getPropertyValue('--bst-line')  →  vacío significa que no existe.
   ============================================================ */

/* ============================================================
   1. EL INTERRUPTOR ESCRITORIO / MÓVIL
   ============================================================

   🚨 El tema marca los elementos del header con `bst-only-mob` y
   `bst-only-desk` —el botón hamburguesa, la lupa chica, el nav de escritorio y
   el botón "Buscar"— pero NUNCA define esas dos clases en su style.css.

   Sin reglas, las dos versiones del menú se dibujan al mismo tiempo: en
   escritorio se ve la hamburguesa Y los enlaces SHOP / BUBBA SALE, que es
   exactamente lo que se veía roto.

   El corte va en 700px y no en 820px por lo que dice el propio CSS del tema:
   a 820px se apila el hero, pero a 700px el tema esconde `.bst-mega`, el panel
   desplegable que SOLO se abre desde el nav de escritorio. Si el nav se
   escondiera a 820, esa regla no tendría a quién esconderle nada. O sea que el
   diseñador contaba con nav de escritorio vivo hasta los 700.

   Las medidas son @container y no @media porque todo el tema funciona así:
   el contenedor es `.bst-shell`, que declara container-type:inline-size.
   ============================================================ */

.bst-only-mob {
	display: none;
}

@container (max-width: 700px) {

	/*
	 * ⚠️ El !important es obligado, no es pereza: el tema escribe
	 * style="display:flex" EN LÍNEA sobre el <nav class="bst-only-desk">
	 * (template-parts/header/nav.php). Un estilo en línea le gana a cualquier
	 * hoja, así que sin !important el nav de escritorio no se esconde nunca.
	 */
	.bst-only-desk {
		display: none !important;
	}

	/* Vuelven con el display que les da .bst-icon-btn / .bst-burger. */
	.bst-only-mob {
		display: grid;
	}
}

/* ============================================================
   2. LAS FOTOS DENTRO DE ELEMENTOR
   ============================================================

   🚨 Elementor trae `.elementor img { height: auto }`. El tema pide
   `height: 100%` en sus contenedores de foto. Las dos reglas tienen la MISMA
   especificidad (0,1,1), así que gana la que se carga última — y Elementor se
   carga después del tema.

   Resultado medido en la portada: la foto del hero quedaba de 478px de alto
   dentro de una caja de 746px, con una franja negra abajo. Lo mismo le pasa a
   la tira de categorías, a las tarjetas de producto y a los locales.

   El diseñador ya se había cruzado con esto: `.bst-ig img` es la única regla de
   su style.css que lleva !important. Le faltó aplicarlo al resto.

   Acá se resuelve subiendo la especificidad con `.elementor` adelante (0,2,1),
   sin !important. Y va acotado a Elementor a propósito: en la tienda y en la
   ficha de producto estas mismas reglas del tema ya funcionan bien solas, y no
   hay por qué tocarlas.
   ============================================================ */

.elementor .bst-hero__media img,
.elementor .bst-strip__item img,
.elementor .bst-card__media img,
.elementor .bst-store__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ============================================================
   3. QUE LOS WIDGETS DEL TEMA OCUPEN TODO EL ANCHO
   ============================================================

   Las secciones de la portada se arman a ancho completo desde el propio
   Elementor. Esto es el cinturón por si alguien crea una sección nueva y se
   olvida: los bloques del tema están diseñados a sangre y manejan su propio
   margen interno con --bst-pad-x.
   ============================================================ */

.elementor-widget-bst_hero .elementor-widget-container,
.elementor-widget-bst_perks .elementor-widget-container,
.elementor-widget-bst_categories .elementor-widget-container,
.elementor-widget-bst_products .elementor-widget-container,
.elementor-widget-bst_sale .elementor-widget-container,
.elementor-widget-bst_instagram .elementor-widget-container,
.elementor-widget-bst_stores .elementor-widget-container {
	width: 100%;
}

/* ============================================================
   4. EL HERO SE METE DEBAJO DEL HEADER
   ============================================================

   🚨 El header del tema es vidrio: se pinta según la sección que tiene detrás.
   theme.js sondea un punto 14px por encima del borde inferior del nav y
   pregunta si ahí hay una sección [data-dark]. Si la hay escribe las variables
   oscuras sobre #bst-nav (vidrio negro, texto blanco); si no, las claras.

   Pero el header es sticky, o sea que OCUPA lugar en el flujo. Medido en la
   portada: nav de 66 a 121, hero arrancando en 121. El sondeo caía a los 107,
   en el vacío blanco de arriba del hero, así que el header quedaba siempre en
   modo claro — vidrio blanco flotando sobre nada.

   El tema da por hecho el solapamiento en dos lugares y no lo produce en
   ninguno:

     · .bst-hero__text lleva padding-top:calc(var(--bst-hdr-h,96px) + …), que
       sólo tiene sentido si el header le tapa la franja de arriba. Sin
       solapamiento ese padding es aire desperdiciado.
     · el CLAUDE.md del diseño lo dice con todas las letras: "el hero tapa el
       header con negro, no al revés".

   En el prototipo .bst-hero tiene margin-top:-96px, exactamente el alto de su
   header. Acá va la variable en vez del número: theme.js escribe --bst-hdr-h
   con el alto REAL medido —89px en este sitio, porque la barra de anuncios y
   el nav no miden igual que en el prototipo— y la vuelve a escribir con un
   ResizeObserver. Un -96px fijo dejaría 7px de fondo blanco asomando arriba.

   ⚠️ Va sin acotar a la portada porque el hero es, por diseño, el bloque que
   abre una página. Si algún día se pone el widget en el medio de una página,
   se va a subir 89px encima de lo que tenga arriba: ahí hay que acotarlo.
   ============================================================ */

.bst-hero {
	margin-top: calc(-1 * var(--bst-hdr-h, 96px));
}

/* ============================================================
   5. EL LOGOTIPO SE VE CASI TRANSPARENTE
   ============================================================

   🚨 El tema pinta la palabra BUBBA con un degradado recortado contra el texto,
   para que le pase un brillo por encima:

     .bst-logo b{
       background-image:linear-gradient(100deg,currentColor 42%,
                        rgba(150,150,150,.55) 50%,currentColor 58%);
       -webkit-background-clip:text;background-clip:text;
       color:transparent;
     }

   El problema es que `currentColor` se resuelve contra el `color` del PROPIO
   elemento, y esa misma regla lo acaba de poner en `transparent`. O sea que el
   degradado real que se pinta es:

     linear-gradient(100deg, rgba(0,0,0,0) 42%,
                     rgba(150,150,150,.55) 50%, rgba(0,0,0,0) 58%)

   Transparente en los dos extremos y con una sola banda gris al 55% en el
   medio: la palabra queda casi invisible. Medido en el sitio.

   En el prototipo el mismo logotipo usa un degradado OPACO
   (rgb(242,241,238) → rgb(255,255,255) → rgb(201,200,196)), y el propio tema lo
   arregla en un solo lugar —.bst-hero__logo b, que reescribe el degradado con
   #fff y #8F8F8F— y se olvida del logo del header, del pie y del carrito.

   La solución es de una línea y respeta la intención original: en vez de matar
   el color, se deja que `color` siga heredando (así `currentColor` vuelve a ser
   el color del header: blanco sobre el hero, negro sobre fondo claro) y se
   vacían sólo los glifos con -webkit-text-fill-color, que es el compañero
   normal de background-clip:text. Cualquier navegador que soporte el recorte
   soporta esta propiedad.

   ⚠️ No se toca `background-image`: así el hero conserva su degradado propio y
   el logo del header, el del pie y el del carrito se adaptan solos al fondo que
   les toque.
   ============================================================ */

.bst-logo b {
	color: inherit;
	-webkit-text-fill-color: transparent;
}

/* ============================================================
   6. LAS CATEGORÍAS NO LLEVAN RÓTULO DE FOTO
   ============================================================

   El widget de la tira escribe, cuando la categoría todavía no tiene imagen:

     bst_placeholder( 'FOTO REMERAS · 720 x 1080' )

   y eso pinta el rótulo cruzado sobre cada baldosa. En el prototipo esa capa
   existe —misma trama rayada de 135°, mismos grises #EFEEEC / #E5E4E1, mismo
   velo oscuro abajo— pero está VACÍA: la baldosa muestra sólo el nombre de la
   categoría. Medido capa por capa contra el diseño.

   ⚠️ Va acotado a `.bst-strip__item` a propósito. En las TARJETAS DE PRODUCTO el
   prototipo sí muestra el rótulo ("FOTO · BUZO CULTURE"), así que ahí no se
   toca: es el aviso de que falta subir la foto y sirve mientras se carga el
   catálogo.

   No se esconde la capa entera, sólo su texto: la trama rayada es la que da la
   textura de "foto pendiente" que el diseño sí tiene.
   ============================================================ */

.bst-strip__item .bst-ph span {
	display: none;
}

/* ============================================================
   7. LA TIRA DE CATEGORÍAS, COMO EL DISEÑO
   ============================================================

   Dos diferencias medidas contra el prototipo, con la misma baldosa de 330px
   de ancho en los dos:

   1. EL NOMBRE. El tema lo topa en 20px —clamp(15px,1.7cqw,20px)— y el diseño
      lo pone en 34px, con interletrado apretado y sin interlineado heredado.
      A 20px la palabra queda chica y perdida en una baldosa de 612px de alto.
      Acá se respeta la forma del tema (un clamp, no un número fijo) y se sube
      el techo: 2cqw sobre el contenedor de 1759px da 35,2 → topa en 34, que es
      exactamente lo que mide el prototipo. En pantallas chicas apoya en 20px,
      donde la baldosa ya bajó a 228px.

   2. EL NÚMERO 01…07 arriba a la derecha. El diseño lo tiene y el widget del
      tema no lo dibuja. Se agrega con un contador de CSS, sin tocar PHP.

      🚨 La trampa está en el bucle: theme.js CLONA todas las baldosas para que
      la tira gire sin corte, así que un contador corrido numeraría 01…16 en vez
      de 01…08 dos veces. Se resuelve reiniciando la cuenta en el primer clon.

      Los clones se reconocen porque initStrip() les pone aria-hidden="true", y
      el PRIMERO es el único con aria-hidden precedido por uno sin él. Por eso
      el selector es `:not([aria-hidden]) + [aria-hidden]` y no un :nth-child:
      así sigue funcionando si mañana agregan o sacan una categoría.

      ⚠️ El número va en blanco al 55%, como en el diseño, porque está pensado
      para leerse SOBRE LA FOTO de la categoría. Mientras las categorías no
      tengan foto se va a ver apenas, igual que en el prototipo. Cuando se
      suban las fotos queda como corresponde.
   ============================================================ */

.bst-strip__item span {
	font-size: clamp(20px, 2cqw, 34px);
	letter-spacing: -.025em;
	line-height: 1;
}

.bst-strip__track {
	counter-reset: bst-cat;
}

.bst-strip__item {
	counter-increment: bst-cat;
}

.bst-strip__item:not([aria-hidden="true"]) + .bst-strip__item[aria-hidden="true"] {
	counter-reset: bst-cat;
}

.bst-strip__item::before {
	content: counter(bst-cat, decimal-leading-zero);
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 2;
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: 9.5px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: .18em;
	color: rgba(255, 255, 255, .55);
}

/* ============================================================
   8. LOS CARRILES DE LOS TIBURONES BALLENA
   ============================================================

   El componente del diseño no sabe nada de opacidad ni de desenfoque —el del
   tema sí, por eso el widget escribe opacity=".16" y blur="1.5" como atributos,
   que en éste no hacen nada—. Acá van esas dos cosas, y el tamaño del carril.

   Cada <whale-swim> es un CARRIL del ancho de la sección, no un tiburón: el
   componente mantiene el carril quieto y mueve el cuerpo adentro. Por eso hace
   falta darle caja, y `y` se lee como fracción DE ESE CARRIL.

   Los tres valores están calcados del prototipo, medidos elemento por elemento
   contra una sección de 833px:

     · 1 y 2 arriba del todo (top:0), de 164 y 150 px.
     · 3 abajo del todo (bottom:0), de 168 px.

   Con esas mismas cajas, los `y` del prototipo (0.52 / 0.34 / 0.5) caen donde
   tienen que caer sin recalcular nada.

   ⚠️ Las alturas van en px fijos a propósito: el tiburón mide lo que diga
   `length` (250/132/156 px) y no cambia con la pantalla, así que el carril
   tampoco tiene por qué. Y como están anclados arriba y abajo, en una sección
   más alta —el móvil— siguen quedando uno arriba y otro abajo.
   ============================================================ */

.bst-sale__whales whale-swim {
	position: absolute;
	left: 0;
	right: 0;
}

.bmv-whale--1 {
	top: 0;
	height: 164px;
	opacity: .42;
}

.bmv-whale--2 {
	top: 0;
	height: 150px;
	opacity: .2;
	filter: blur(1.4px);
}

.bmv-whale--3 {
	bottom: 0;
	height: 168px;
	opacity: .32;
}

/* ============================================================
   9. EL FEED DE INSTAGRAM DENTRO DE LA GRILLA DEL TEMA
   ============================================================

   El tema deja el hueco `.bst-ig` con SU propia grilla —seis columnas en
   escritorio, tres en angosto— y espera que los seis cuadrados sean hijos
   directos. Smash Balloon, en cambio, mete todo adentro de un solo envoltorio:

     .bst-ig > div#sb_instagram > (cabecera propia) + div#sbi_images > .sbi_item

   Medido antes de esto: el feed entero ocupaba UNA de las seis columnas
   —295 px— y las fotos quedaban de 66×66.

   Se disuelven los dos envoltorios con `display:contents`, y así los .sbi_item
   pasan a ser celdas de la grilla del tema.

   🚨 TRAMPA 1 — el DOM no cambia. `display:contents` cambia el LAYOUT, no el
   árbol. Los .sbi_item siguen siendo hijos de #sbi_images, así que la regla
   `.bst-ig > *` del tema —la del cuadrado 1:1, el redondeo y el recorte— NO
   los alcanza. Hay que repetírsela. Es copia exacta de la línea 575 de
   style.css, no un diseño nuevo; lo mismo con el zoom de la línea 577.

   🚨 TRAMPA 2 — Smash Balloon estilo por ID, y por DOS. Su hoja trae
   `#sb_instagram #sbi_images .sbi_item{display:inline-block}`, que es (2,1,0):
   dos IDs le ganan a cualquier cantidad de clases.

   Esto costó dos pasadas. Primero usé `.bst-ig > .sbi` (0,2,0) y perdía entero.
   Después subí a un ID, `.bst-ig #sbi_images .sbi_item` (1,3,0), y quedó a
   medias: el display:contents sí aplicó —ahí competía contra reglas de uno y
   dos IDs que yo igualaba— pero el corte en seis seguía perdiendo contra ese
   (2,1,0), y se veían las veinte fotos.

   Por eso TODOS los selectores de acá abajo arrastran los dos IDs. No es
   adorno: es lo mínimo que gana sin recurrir a !important.
   ============================================================ */

.bst-ig > #sb_instagram,
.bst-ig #sb_instagram #sbi_images {
	display: contents;
}

.bst-ig #sb_instagram .sb_instagram_header,
.bst-ig #sb_instagram #sbi_load,
.bst-ig #sb_instagram .sbi_load_btn {
	display: none;
}

/*
 * El diseño muestra UNA SOLA FILA, y el corte tiene que seguir a la cantidad
 * de columnas de la grilla — si no, esconde publicaciones de más.
 *
 * 🚨 Acá se desincronizó. Este corte se escribió en 6 cuando `.bst-ig` era una
 * grilla de seis columnas. La v1.1 la pasó a OCHO (ver bloque 29) y esta regla
 * quedó vieja: el feed servía ocho, la fila tenía lugar para ocho, y las dos
 * últimas se escondían igual. Se veía como una fila corta con 407px de blanco
 * a la derecha, y parecía culpa de Instagram.
 *
 * Va en 9 = ocho columnas + 1. Si algún día vuelve a cambiar el número de
 * columnas, este número cambia con él.
 */
.bst-ig #sb_instagram #sbi_images .sbi_item:nth-child(n + 9) {
	display: none;
}

/* Igual que `.bst-ig > *`, que acá no llega. */
.bst-ig #sb_instagram #sbi_images .sbi_item {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 10px;
	background: var(--bst-ph);
	width: auto;
	height: auto;
}

/* Sin esto el envoltorio queda de alto cero y la foto no se ve. */
.bst-ig #sb_instagram #sbi_images .sbi_photo_wrap,
.bst-ig #sb_instagram #sbi_images .sbi_photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* Igual que `.bst-ig > *:hover img`. */
.bst-ig #sb_instagram #sbi_images .sbi_item:hover img {
	transform: scale(1.06);
}

/*
 * 🚨 Los emojis del pie del post, tapando la foto.
 *
 * Smash Balloon arma un texto alternativo para lectores de pantalla dentro de
 * `span.sbi-screenreader`, y ahí mete el pie del post. WordPress reemplaza cada
 * emoji del pie por un `<img class="emoji">`.
 *
 * El span mide 0×0 y recorta con overflow:hidden, así que no debería verse
 * nada. Pero la regla `.bst-ig img` del tema lleva !important y pone
 * position:absolute con inset:0 y 100%×100%: eso saca al emoji del span y lo
 * pinta a 295×295 ENCIMA de la foto.
 *
 * Medido: 5 emojis tapando dos de las seis fotos. Es un efecto secundario de
 * meter el feed acá adentro; con los marcadores del tema no pasaba porque no
 * había pies de foto.
 *
 * Se los devuelve al flujo normal. Como el span recorta, quedan invisibles sin
 * sacarlos del árbol de accesibilidad: el lector de pantalla sigue leyendo el
 * pie completo.
 *
 * El !important es obligado: la regla del tema también lo lleva. Gana ésta por
 * especificidad (2,3,0 contra 0,1,1), no por orden.
 */

.bst-ig #sb_instagram #sbi_images img.emoji {
	position: static !important;
	width: 1em !important;
	height: 1em !important;
}

/* ============================================================
   10. EL BOTON "BUSCAR" DEL HEADER
   ============================================================

   El tema lo dibuja como texto plano:

     <button class="bst-nav__link bst-only-desk" data-bst-open="search"
             style="background:none;border:0;cursor:pointer;padding:0 0 2px">

   El diseno lo quiere como una pildora con un circulo hueco al lado, y con una
   interaccion propia. Copiado del prototipo, que lo declara asi:

     style="display:flex;align-items:center;gap:9px;padding:9px 16px 9px 13px;
            background:var(--hpill,rgba(255,255,255,.09));
            border:1px solid var(--hline,rgba(255,255,255,.2));
            border-radius:999px;
            transition:background .25s,border-color .25s,color .25s"
     style-hover="background:var(--hph,#fff);color:var(--hphf,#0b0b0b);
                  border-color:var(--hph,#fff)"

   Es decir: al pasar el mouse la pildora SE INVIERTE — fondo claro, texto
   oscuro, borde del mismo color que el fondo — con 0,25s de transicion.

   El "icono" no es una lupa: es un span de 11x11 con borde de 1,5px, radio
   999px y opacidad .8. Un circulo hueco.

   Tres decisiones que vale la pena dejar escritas:

   1. Los cuatro colores van con variables del tema y no con los literales del
      prototipo. Sus --hpill / --hline / --hph / --hphf son, una por una,
      --bst-hdr-chip / --bst-hdr-line / --bst-hdr-inv-bg / --bst-hdr-inv-fg.
      Los valores coinciden (.1 y .14 contra .09 y .2: lo mismo) y ademas se
      dan vuelta solos cuando el header pasa a modo claro en las paginas
      internas. Clavar un blanco al 20% dejaria el boton invisible sobre
      vidrio blanco, y un hover blanco sobre blanco seria peor todavia.

   2. El tamano de letra va en 11px/.16em, la escala `.bst-link` del propio
      tema. El prototipo mide 10,5px: medio pixel, y no vale inventar un valor
      suelto fuera de la escala.

   3. Se agrega :focus-visible con el mismo tratamiento que el hover. El
      prototipo no lo tiene, pero un boton sin estado de foco no se puede usar
      con el teclado. No es diseno nuevo: es el hover del diseno, aplicado
      tambien cuando llegas tabulando.

   ATENCION: los !important son obligados, no adorno. El tema escribe
   background, border y padding EN LINEA sobre el boton, y un estilo en linea
   le gana a cualquier hoja. Es la misma trampa del bloque 1.

   El circulo se hace con ::before porque el marcado del tema no tiene donde
   colgarlo, y currentColor hace que acompane al color del header — asi se
   invierte junto con el resto, sin una regla aparte.

   De paso, esto explica los 6px que le faltaban al nav. El prototipo mide 61px
   de alto y el sitio media 55. Esta pildora mide 31 (9+11+9+2 de bordes), y 31
   mas los 30 de padding del nav dan los 61.
   ============================================================ */

.bst-nav .bst-nav__link[data-bst-open="search"] {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 9px 16px 9px 13px !important;
	border: 1px solid var(--bst-hdr-line) !important;
	border-radius: var(--bst-pill);
	background: var(--bst-hdr-chip) !important;
	color: var(--bst-hdr-fg);
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .16em;
	line-height: 1;
	transition: background .25s, border-color .25s, color .25s;
}

.bst-nav .bst-nav__link[data-bst-open="search"]:hover,
.bst-nav .bst-nav__link[data-bst-open="search"]:focus-visible {
	background: var(--bst-hdr-inv-bg) !important;
	border-color: var(--bst-hdr-inv-bg) !important;
	color: var(--bst-hdr-inv-fg);
}

.bst-nav .bst-nav__link[data-bst-open="search"]::before {
	content: "";
	flex: none;
	width: 11px;
	height: 11px;
	border: 1.5px solid currentColor;
	border-radius: var(--bst-pill);
	opacity: .8;
}

/* ============================================================
   11. EL BOTÓN BLANCO DEL PANEL DE AYUDA, INVISIBLE
   ============================================================

   🚨 En TODAS las páginas de texto —cómo comprar, contacto, seguimiento,
   preguntas frecuentes, términos— el panel negro del costado termina con un
   botón "Escribir por WhatsApp" que sale BLANCO SOBRE BLANCO. Medido:
   color rgb(255,255,255) sobre background rgb(255,255,255).

   Es una pelea de especificidad entre dos reglas del propio tema. Estas cuatro
   le pegan al botón, que es un <a class="bst-btn bst-btn--light">:

     a                      → var(--bst-black)   (0,0,1)
     .bst-btn               → #fff               (0,1,0)
     .bst-btn--light        → var(--bst-black)   (0,1,0)
     .bst-doc__aside a      → #fff               (0,1,1)   ← gana

   El panel pinta de blanco todos sus enlaces, porque el fondo es negro. Pero el
   botón claro es la excepción: tiene fondo blanco y necesita texto oscuro, y
   `.bst-btn--light` pierde por un mísero selector de tipo.

   Se arregla devolviéndole el color con (0,2,0), que le gana al (0,1,1) del
   panel sin tocar nada más. No se toca `.bst-doc__aside a`: el resto de los
   enlaces del panel —los que van sobre el negro— tienen que seguir blancos.
   ============================================================ */

.bst-doc__aside .bst-btn--light {
	color: var(--bst-black);
}

/* ============================================================
   12. EL BOTÓN DE COMPRA EN PRODUCTOS SIN TALLE
   ============================================================

   La ficha del tema tiene dos caminos, y sólo diseñó uno:

     · CON talle  → dibuja su propio <button class="bst-btn bst-btn--block">
     · SIN talle  → cae en woocommerce_template_single_add_to_cart()

   El segundo sale con el botón de fábrica de WooCommerce: gris, cuadrado, de
   115×20 px, con una caja de cantidad al lado. Medido en la ficha de
   "Remera Salchicha".

   El diseño no contempla el caso —da por hecho que toda prenda tiene talle—
   pero el catálogo real tiene talle único. Así que se le da al formulario de
   WooCommerce la misma forma que el botón del tema, copiando la regla .bst-btn
   con .bst-btn--block: mismo relleno, mismo radio, mismo peso, misma
   transición.

   🚨 La cantidad se esconde porque el diseño NO la tiene: ni en el prototipo ni
   en el camino con talle del propio tema. Se esconde, no se borra: un input con
   display:none igual manda su valor, así que el formulario sigue enviando 1. La
   cantidad se cambia en el carrito, como en el resto del sitio.

   ⚠️ Los selectores arrastran `form.cart` y `button` a propósito. WooCommerce
   estiliza con `.woocommerce button.button.alt`, que es (0,3,1); esto es
   (0,3,2) y le gana por un pelo, sin !important.
   ============================================================ */

.bst-pdp form.cart {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
}

.bst-pdp form.cart .quantity {
	display: none;
}

.bst-pdp form.cart button.single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100%;
	padding: 16px 32px;
	border: 1px solid var(--bst-black);
	border-radius: var(--bst-pill);
	background: var(--bst-black);
	color: #fff;
	cursor: pointer;
	font-weight: 600;
	font-size: 13.5px;
	letter-spacing: .02em;
	line-height: 1;
	transition: transform .35s var(--bst-ease), opacity .3s;
}

.bst-pdp form.cart button.single_add_to_cart_button:hover {
	transform: translateY(-2px);
	opacity: .92;
	background: var(--bst-black);
	color: #fff;
}

/* ============================================================
   13. EL CHECKOUT, COMO EL DISEÑO
   ============================================================

   El prototipo tiene ocho campos sin rótulo arriba —el texto va DENTRO del
   campo— acomodados en una grilla que se parte sola, y las opciones de entrega
   y de pago como tarjetas. WooCommerce dibuja listas de radios y rótulos.

   Los campos escondidos (país y provincia) llevan `.bmv-oculto` desde el PHP.
   El rótulo no se borra: se esconde a la vista pero lo sigue leyendo un lector
   de pantalla, que del placeholder no se entera.
   ============================================================ */

.bmv-oculto {
	display: none !important;
}

/* --- Los ocho campos ------------------------------------------------------ */

.bst-co .woocommerce-billing-fields__field-wrapper,
.bst-co .woocommerce-shipping-fields__field-wrapper {
	display: grid;
	/* Dos como maximo, una sola cuando no entran: el `max()` pide medio ancho
	   por columna, asi que nunca entra una tercera. El prototipo los muestra
	   de a dos y la columna del tema es mas ancha que la del mockup. */
	grid-template-columns: repeat(auto-fit, minmax(max(190px, calc(50% - 5px)), 1fr));
	gap: 10px;
}

.bst-co .form-row {
	margin: 0;
	padding: 0;
}

.bst-co .form-row > label:not(.woocommerce-form__label-for-checkbox) {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* 🚨 Va con `.woocommerce form` adelante y no es adorno: la regla del tema
   es `.woocommerce form .form-row input.input-text` y le gana a `.bst-co` por
   una clase. Sin este prefijo el campo se queda en los 46px del tema. */
.woocommerce form .bst-co .form-row input.input-text,
.woocommerce form .bst-co .form-row textarea,
.woocommerce form .bst-co .form-row select {
	width: 100%;
	height: 52px;
	padding: 0 16px;
	border: 1px solid var(--bst-line2);
	background: var(--bst-white);
	font: 400 14px/1 Archivo, system-ui, -apple-system, sans-serif;
	color: var(--bst-black);
	outline: 0;
	transition: border-color .25s;
	/* El radio NO se toca. El diseno pide 8px y el tema fija su token con
	   !important en todos los campos del sitio. Son 2px: no vale la pena
	   dejar el checkout con una esquina distinta al resto. */
}

.woocommerce form .bst-co .form-row input.input-text:focus,
.woocommerce form .bst-co .form-row textarea:focus,
.woocommerce form .bst-co .form-row select:focus {
	border-color: var(--bst-black);
}

.woocommerce form .bst-co .form-row input.input-text::placeholder {
	color: var(--bst-label);
	opacity: 1;
}

/* --- Entrega y pago: dos tarjetas cada uno -------------------------------- */

/* 🚨 `#payment` va en el selector porque el tema escribe
   `.woocommerce #payment ul.payment_methods`, con un ID, y le gana a
   cualquier cosa de clases. Sin eso la lista se queda en `flex` y las
   tarjetas salen apiladas a lo ancho en vez de una al lado de la otra. */
.bmv-entrega ul#shipping_method,
.woocommerce .bst-co #payment ul.wc_payment_methods {
	display: flex;
	/* En fila y no en columna: el tema deja esta lista en `column` y como el
	   `display: flex` era el mismo valor, no se notaba que el resto de la
	   regla suya seguia mandando. Las tarjetas salian apiladas a lo ancho. */
	flex-direction: row;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 10px;
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
	border: 0;
}

/*
 * Flex y no grilla, aunque el diseño hable de dos tarjetas.
 *
 * Con `repeat(auto-fit, minmax(200px, 1fr))` la fila arma cuatro columnas en
 * este ancho, y la nota de abajo —que cruza de lado a lado— las ocupa todas, asi
 * que `auto-fit` no puede plegar la que sobra: quedaban tres tarjetas y un hueco.
 * Con flex las tarjetas se reparten el ancho sean dos o tres, y la nota se lleva
 * el renglon entero.
 */
.bmv-entrega #shipping_method label,
.woocommerce .bst-co #payment ul.wc_payment_methods li.wc_payment_method > label {
	flex: 1 1 200px;
}

.bmv-entrega #shipping_method li,
.bst-co .wc_payment_methods li.wc_payment_method {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* El radio sigue ahí para el teclado; lo que se ve es la tarjeta. */
.bmv-entrega #shipping_method input.shipping_method,
.woocommerce .bst-co #payment ul.wc_payment_methods li input.input-radio {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

/* Sólo el rótulo directo del <li>: adentro de la caja de Mercado Pago hay
   otros <label> — el de "Cuotas", por ejemplo — que no son tarjetas. */
.bmv-entrega #shipping_method label,
.woocommerce .bst-co #payment ul.wc_payment_methods li.wc_payment_method > label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px 18px;
	border: 1px solid var(--bst-line2);
	border-radius: 10px;
	background: var(--bst-white);
	color: var(--bst-black);
	font: 600 14px/1 Archivo, system-ui, -apple-system, sans-serif;
	cursor: pointer;
	transition: background .25s, border-color .25s, color .25s;
}

.bmv-entrega #shipping_method label:hover,
.woocommerce .bst-co #payment ul.wc_payment_methods li.wc_payment_method > label:hover {
	border-color: var(--bst-black);
}

.bmv-entrega #shipping_method li:has(input:checked) label,
.woocommerce .bst-co #payment ul.wc_payment_methods li.wc_payment_method:has(> input:checked) > label {
	background: var(--bst-black);
	border-color: var(--bst-black);
	color: var(--bst-white);
}

/* El renglon chico de abajo de cada tarjeta. */
.bmv-op__d {
	font: 400 12px/1.4 Archivo, system-ui, -apple-system, sans-serif;
	opacity: .72;
}

/* Sin logos. El diseño no los tiene, y el de Mercado Pago mide 32px: metido
   adentro del rotulo estiraba las TRES tarjetas de 87px a 123px, porque
   todas se igualan a la mas alta. */
.woocommerce .bst-co #payment ul.wc_payment_methods li.wc_payment_method > label img {
	display: none;
}

/* --- La nota de abajo, y el formulario de tarjeta ------------------------- */

/*
 * 🚨 `display: contents` en el <li>, y sin esto el checkout se rompe de verdad.
 *
 * WooCommerce mete la caja del medio de pago DENTRO de su <li>, al lado del
 * rotulo. El prototipo la tiene afuera: dos tarjetas arriba y una nota abajo,
 * cruzando el ancho. Con `contents` el <li> deja de dibujar caja y sus hijos
 * pasan a ser celdas de la grilla, asi que el rotulo queda de tarjeta y la caja
 * se puede mandar a una fila propia.
 *
 * Sin esto, el formulario de tarjeta de Mercado Pago se dibuja adentro de la
 * tarjeta elegida — que es negra — y no se lee nada.
 *
 * El <li> sigue existiendo en el documento, asi que los selectores de arriba
 * (`li:has(input:checked) label`) siguen funcionando igual.
 */
.woocommerce .bst-co #payment ul.wc_payment_methods li.wc_payment_method {
	display: contents;
}

.woocommerce .bst-co #payment ul.wc_payment_methods .payment_box {
	flex: 1 0 100%;
	order: 9;
	margin: 4px 0 0;
	padding: 0;
	background: none;
	font: 400 12px/1.5 Archivo, system-ui, -apple-system, sans-serif;
	color: var(--bst-mute);
}

.bst-co .wc_payment_methods .payment_box::before {
	display: none;
}

.bst-co .wc_payment_methods .payment_box p {
	margin: 0;
}

/* El formulario de tarjeta necesita aire y tamano de lectura, no de nota. */
.bst-co .wc_payment_methods .payment_box form,
.bst-co .wc_payment_methods .payment_box .mp-checkout-container {
	font-size: 14px;
	color: var(--bst-black);
}

.bst-co .wc_payment_methods .payment_box input,
.bst-co .wc_payment_methods .payment_box select {
	height: 52px;
	padding: 0 16px;
	border: 1px solid var(--bst-line2);
	background: var(--bst-white);
	font: 400 14px/1 Archivo, system-ui, -apple-system, sans-serif;
}

/* --- Los rotulos de los pasos, en monoespaciada como el diseño ------------ */

.bst-co .bst-h3 {
	font: 500 10px/1 'IBM Plex Mono', ui-monospace, monospace;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--bst-label);
}

.bst-co .bst-h3::before {
	content: '· ';
}

/* --- Los legales, en una linea ------------------------------------------- */

.bst-co .woocommerce-terms-and-conditions-wrapper {
	margin-top: 18px;
	font: 400 12px/1.5 Archivo, system-ui, -apple-system, sans-serif;
	color: var(--bst-mute);
}

.bst-co .woocommerce-terms-and-conditions-wrapper .form-row {
	margin: 0;
}

/* ============================================================
   14. EL PANEL "TU PEDIDO", COMO EL DISEÑO
   ============================================================

   WooCommerce dibuja acá una tabla: encabezado "Producto / Subtotal", las
   prendas en texto plano y el envío como lista de opciones. El prototipo tiene
   cada prenda con su foto y su talle, tres renglones de totales, el total
   grande con la nota de cuotas debajo, el botón de pagar adentro del panel y el
   pie de garantía.

   El armado nuevo está en la plantilla del plugin
   (woocommerce/checkout/review-order.php). Acá va sólo la pintura.
   ============================================================ */

/* El rótulo y el pie del tema: los reemplaza la plantilla.

   🚨 El `!important` va porque el tema escribe `style="display:block"` DIRECTO
   en la etiqueta, y un estilo en línea le gana a cualquier hoja. Sin eso quedaba
   "TU PEDIDO" arriba y "Tu pedido" abajo, el mismo título dos veces. */
.bst-co__side > .bst-mono,
.bst-co__side > p {
	display: none !important;
}

/* La tarjeta de ayuda del tema arma una tercera columna que el diseño no tiene.

   La plantilla de documentos del tema —la de las páginas legales— le agrega un
   panel "DUDAS?" a la derecha. En el checkout descoloca todo: el resumen queda
   en el medio en vez de contra el borde. El botón flotante de WhatsApp sigue
   estando, así que no se pierde el canal de ayuda. */
body:has(.bst-co) .bst-doc__aside {
	display: none;
}

body:has(.bst-co) .bst-doc {
	display: block;
}

.bst-co__side .bmv-resumen {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	border: 0;
	margin: 0;
}

/* --- Cabecera ------------------------------------------------------------- */

.bmv-resumen__cabeza {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.bmv-resumen__titulo {
	font: 600 15px/1 Archivo, system-ui, -apple-system, sans-serif;
	color: var(--bst-black);
}

.bmv-resumen__editar {
	padding: 0 0 2px;
	border-bottom: 1px solid rgba(0, 0, 0, .2);
	font: 400 10.5px/1 'IBM Plex Mono', ui-monospace, monospace;
	letter-spacing: .16em;
	color: var(--bst-mute);
	text-decoration: none;
	transition: color .25s, border-color .25s;
}

.bmv-resumen__editar:hover,
.bmv-resumen__editar:focus-visible {
	color: var(--bst-black);
	border-color: var(--bst-black);
}

/* --- Las prendas ---------------------------------------------------------- */

.bmv-resumen__items {
	display: flex;
	flex-direction: column;
}

.bmv-resumen__item {
	display: flex;
	gap: 12px;
	padding: 12px 0;
	border-top: 1px solid var(--bst-line);
}

.bmv-resumen__foto {
	width: 56px;
	flex: none;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: repeating-linear-gradient(135deg, var(--bst-ph) 0 8px, var(--bst-ph2) 8px 16px);
}

.bmv-resumen__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bmv-resumen__datos {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.bmv-resumen__nombre {
	font: 500 13.5px/1.3 Archivo, system-ui, -apple-system, sans-serif;
	color: var(--bst-black);
}

.bmv-resumen__meta {
	font: 400 10.5px/1 'IBM Plex Mono', ui-monospace, monospace;
	letter-spacing: .14em;
	color: var(--bst-label);
}

.bmv-resumen__precio {
	font: 600 13.5px/1 Archivo, system-ui, -apple-system, sans-serif;
	color: var(--bst-black);
	white-space: nowrap;
}

/* --- Los renglones de totales --------------------------------------------- */

.bmv-resumen__lineas {
	display: flex;
	flex-direction: column;
	gap: 9px;
	padding-top: 14px;
	border-top: 1px solid var(--bst-line);
}

.bmv-resumen__linea {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.bmv-resumen__linea > span:first-child {
	font: 400 13px/1.3 Archivo, system-ui, -apple-system, sans-serif;
	color: var(--bst-mute);
}

.bmv-resumen__linea > span:last-child {
	font: 500 13px/1.3 Archivo, system-ui, -apple-system, sans-serif;
	color: var(--bst-black);
}

/* --- El renglón del descuento por medio de pago --------------------------- */

/* Es plata a favor del cliente y tiene que saltar entre el subtotal y el envío,
   así que va en negro de los dos lados en vez de rótulo gris. Sin color nuevo:
   la paleta de Bubba es blanco y negro, y un verde de descuento sería de otra
   tienda. */

.bmv-resumen__linea--off > span:first-child {
	font-weight: 500;
	color: var(--bst-black);
}

.bmv-resumen__linea--off > span:last-child {
	font-weight: 600;
}

/* --- El total ------------------------------------------------------------- */

.bmv-resumen__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding-top: 14px;
	border-top: 1px solid var(--bst-line);
}

.bmv-resumen__rotulo {
	font: 400 10px/1 'IBM Plex Mono', ui-monospace, monospace;
	letter-spacing: .24em;
	color: var(--bst-label);
}

.bmv-resumen__cifra {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 5px;
	font: 700 26px/1 Archivo, system-ui, -apple-system, sans-serif;
	letter-spacing: -.02em;
	color: var(--bst-black);
}

.bmv-resumen__cuota {
	font: 400 11.5px/1 Archivo, system-ui, -apple-system, sans-serif;
	letter-spacing: 0;
	color: var(--bst-mute);
}

/* --- El botón y el pie ---------------------------------------------------- */

.bmv-resumen__boton[data-vacio] {
	display: none;
}

.woocommerce .bmv-resumen__boton #place_order {
	width: 100%;
	padding: 19px 24px;
	background: var(--bst-black);
	color: var(--bst-white);
	border: 0;
	border-radius: 999px;
	font: 600 14.5px/1 Archivo, system-ui, -apple-system, sans-serif;
	letter-spacing: .03em;
	cursor: pointer;
	transition: transform .35s cubic-bezier(.16, 1, .3, 1), opacity .3s;
}

.woocommerce .bmv-resumen__boton #place_order:hover {
	transform: translateY(-2px);
	opacity: .94;
}

.bmv-resumen__pie {
	text-align: center;
	font: 400 10px/1.5 'IBM Plex Mono', ui-monospace, monospace;
	letter-spacing: .14em;
	color: var(--bst-label);
}

/* ============================================================
   15. LOS TALLES, COMO BOTONES
   ============================================================

   WooCommerce dibuja las variaciones con una <table> y un <select> del
   navegador: 132×19 píxeles, con la flechita del sistema y el rótulo pegado al
   costado, en una ficha donde todo lo demás está trabajado. El diseño tiene una
   fila de botones de 52×46.

   Los botones los arma bmv_ficha_script(). El <select> sigue existiendo,
   escondido, porque es lo que WooCommerce lee para armar precio, foto y stock —
   y lo que se envía al agregar al carrito.
   ============================================================ */

.bst-pdp table.variations {
	display: block;
	width: 100%;
	margin: 0;
	border: 0;
}

.bst-pdp table.variations tbody {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.bst-pdp table.variations tr {
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.bst-pdp table.variations th,
.bst-pdp table.variations td {
	display: block;
	width: auto;
	padding: 0;
	border: 0;
	text-align: left;
}

.bst-pdp table.variations th.label label {
	margin: 0;
	font: 500 11px/1 'IBM Plex Mono', ui-monospace, monospace;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--bst-black);
}

/* El desplegable sigue ahí para WooCommerce, pero no se ve. */
.bst-pdp table.variations td.value select {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.bmv-talles {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.bmv-talle {
	min-width: 52px;
	height: 46px;
	padding: 0 14px;
	border: 1px solid var(--bst-line2);
	border-radius: 6px;
	background: var(--bst-white);
	color: var(--bst-black);
	font: 500 13.5px/1 Archivo, system-ui, -apple-system, sans-serif;
	cursor: pointer;
	transition: background .25s, color .25s, border-color .25s;
}

.bmv-talle:hover:not(:disabled),
.bmv-talle:focus-visible {
	border-color: var(--bst-black);
}

.bmv-talle.is-on {
	background: var(--bst-black);
	border-color: var(--bst-black);
	color: var(--bst-white);
}

/* Tachado y apagado: se ve QUÉ talle no hay, que es lo que pide el diseño.

   🚨 El borde tiene que SEGUIR VIÉNDOSE. Con `--bst-hair-soft` quedaba casi
   invisible y los talles agotados parecían letras sueltas flotando pegadas al
   botón elegido, como si se tocaran. El borde es lo que los separa. */
.bmv-talle.is-sin {
	text-decoration: line-through;
	color: var(--bst-off);
	border-color: var(--bst-line);
	background: var(--bst-white);
	cursor: not-allowed;
}

/* --- Dos cosas de WooCommerce que el diseño no tiene ---------------------- */

/* El enlace "Limpiar". Colgaba debajo de los círculos, en monoespaciada y con
   subrayado, y era lo que más ensuciaba el bloque.

   No se pierde la función: tocar el talle o el color ya elegido lo suelta, que
   es lo que hace bmv_ficha_script(). Se esconde en vez de quitarlo del HTML
   porque WooCommerce lo usa como referencia al reponer las variaciones.

   🚨 El !important no es pereza. WooCommerce le escribe al enlace
   `style="visibility: visible; display: inline;"` EN LÍNEA, con jQuery, cada
   vez que cambia una variación — y un estilo en línea le gana a cualquier regla
   de una hoja. Sin el !important la regla se aplica y no pasa nada, igual que
   el `border="1"` de las tablas del correo. */
.bst-pdp .reset_variations {
	display: none !important;
}

/* El selector de cantidad. El diseño va del renglón de stock derecho al botón:
   se agrega de a una prenda y la cantidad se ajusta en el carrito, que tiene
   los botones + y −.

   🚨 Escondido, NO borrado. El input sigue en el formulario con su valor en 1,
   que es lo que WooCommerce necesita para agregar al carrito; sin él el botón
   no hace nada.

   🚨 Y con !important, por lo mismo que el enlace de arriba: en cuanto la
   variación queda completa, WooCommerce le escribe `style="display: block"` en
   línea. Sin el !important la caja se esconde al cargar y REAPARECE al elegir
   el talle, que es justo cuando se mira. */
.bst-pdp form.cart .quantity {
	display: none !important;
}

/* --- El bloque de abajo: disponibilidad y botón --------------------------- */

/* Los 10px son los del diseño, y son los mismos que ya separan el botón del
   renglón de envío en la ficha de talle único. Con 14 acá, dos fichas del mismo
   catálogo respiraban distinto según tuvieran talles o no. */
.bst-pdp .single_variation_wrap {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bst-pdp .single_variation {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* El precio de la variación.

   Hoy está SIEMPRE vacío, porque todos los talles de un producto valen igual y
   WooCommerce sólo lo llena cuando difieren. Estuve por esconderlo por eso, y
   habría sido un error: en cuanto un producto tenga precios distintos por
   talle, este renglón es lo único que le dice al cliente cuánto sale el que
   eligió. Vacío no ocupa lugar; lleno, tiene que verse bien. */
.bst-pdp .woocommerce-variation-price {
	font: 600 15px/1 Archivo, system-ui, -apple-system, sans-serif;
	color: var(--bst-black);
}

.bst-pdp .woocommerce-variation-price .price del {
	margin-right: 7px;
	font-weight: 400;
	color: var(--bst-label);
}

/* El renglón de disponibilidad, igual en los dos casos.

   🚨 Los dos selectores no sobran. WooCommerce dibuja este renglón en dos
   lugares distintos según el producto: dentro de .woocommerce-variation-
   availability cuando hay talles, y suelto en el resumen cuando es talle
   único. Con un solo selector quedaban dos renglones que dicen lo mismo con
   dos estilos: 12px gris en una ficha y 15px negro con 15px de margen en la
   de al lado. */
.bst-pdp .woocommerce-variation-availability p,
.bst-pdp .bmv-elegir,
.bst-pdp p.stock {
	margin: 0;
	font: 400 12px/1.4 Archivo, system-ui, -apple-system, sans-serif;
	color: var(--bst-mute);
}

.bst-pdp .bmv-elegir[hidden] {
	display: none;
}

/* Sin stock se pone en negro: es lo único del renglón que cambia una decisión. */
.bst-pdp .woocommerce-variation-availability p.out-of-stock,
.bst-pdp p.stock.out-of-stock {
	color: var(--bst-black);
}

/* ============================================================
   16. EL BUSCADOR DE LOCALIDADES
   ============================================================

   Se escribe en "Ciudad" y abajo aparece la lista: nombre de la localidad y,
   más chico, la provincia y el código postal. Al elegir se completan la ciudad,
   el CP y la provincia escondida.

   La lista va posicionada sobre el campo, no empujándolo: si empujara, el
   formulario entero saltaría cada vez que alguien escribe una letra.
   ============================================================ */

.bst-co .form-row.bmv-busca {
	position: relative;
}

.bmv-busca__lista {
	display: none;
	position: absolute;
	z-index: 30;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	max-height: 264px;
	overflow-y: auto;
	margin: 0;
	padding: 4px;
	list-style: none;
	border: 1px solid var(--bst-line2);
	border-radius: 8px;
	background: var(--bst-white);
	box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .55);
}

.bmv-busca__lista.is-abierta {
	display: block;
}

.bmv-busca__lista li {
	margin: 0;
	list-style: none;
}

.bmv-busca__opcion {
	display: flex;
	flex-direction: column;
	gap: 3px;
	width: 100%;
	padding: 10px 12px;
	border: 0;
	border-radius: 6px;
	background: none;
	text-align: left;
	cursor: pointer;
	transition: background .18s;
}

.bmv-busca__opcion:hover,
.bmv-busca__opcion.is-marcada,
.bmv-busca__opcion:focus-visible {
	background: var(--bst-soft);
}

.bmv-busca__nombre {
	font: 500 13.5px/1.2 Archivo, system-ui, -apple-system, sans-serif;
	color: var(--bst-black);
}

.bmv-busca__detalle {
	font: 400 11px/1 'IBM Plex Mono', ui-monospace, monospace;
	letter-spacing: .1em;
	color: var(--bst-label);
}

/* ============================================================
   17. LOS COLORES, COMO CÍRCULOS
   ============================================================

   Cuando el atributo se llama "Color", cada opción sale como un círculo del
   color de verdad en vez de un botón con el nombre escrito. El nombre no se
   pierde: va en el `title` y en el `aria-label`, así lo lee el lector de
   pantalla y aparece al pasar el mouse.

   Un color que no esté en la lista de bmv_colores() sigue saliendo como botón
   de texto. Es a propósito: mejor el nombre escrito que un color inventado.
   ============================================================ */

.bmv-talles--color {
	/* Más aire que en los talles: el anillo del elegido se dibuja por fuera. */
	gap: 12px;
	padding: 3px 0;
}

.bmv-color {
	position: relative;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid var(--bst-line2);
	border-radius: 999px;
	cursor: pointer;
	transition: box-shadow .25s, transform .25s;
}

.bmv-color:hover:not(:disabled) {
	transform: scale(1.06);
}

/* El elegido lleva un anillo negro, separado por un hueco blanco. */
.bmv-color.is-on {
	box-shadow: 0 0 0 2px var(--bst-white), 0 0 0 3px var(--bst-black);
}

.bmv-color:focus-visible {
	outline: 0;
	box-shadow: 0 0 0 2px var(--bst-white), 0 0 0 3px var(--bst-black);
}

/* Sin stock: el color lavado y una barra cruzada, el equivalente al tachado.

   🚨 NO con `opacity` en el botón. Eso apagaba TAMBIÉN la barra, y sobre un
   círculo claro —blanco, crudo, natural— quedaba una raya grisácea casi
   invisible que se leía como suciedad en vez de como "agotado". El color se
   lava con una capa aparte y la barra queda entera encima. */
.bmv-color.is-sin {
	cursor: not-allowed;
	border-color: var(--bst-line);
}

.bmv-color.is-sin::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, .68);
}

/* La barra va semitransparente, no en un gris fijo.

   Un gris fijo anda sobre el blanco lavado y se pierde sobre el negro lavado,
   que queda en un gris parecido. Al ser semitransparente se oscurece sobre lo
   claro y se aclara sobre lo oscuro: el mismo color sirve para las 34 entradas
   de bmv_colores(), del blanco al bordó. */
.bmv-color.is-sin::after {
	content: '';
	position: absolute;
	inset: -1px;
	border-radius: 999px;
	background: linear-gradient(
		45deg,
		transparent calc(50% - 1px),
		rgba(11, 11, 11, .6) calc(50% - 1px),
		rgba(11, 11, 11, .6) calc(50% + 1px),
		transparent calc(50% + 1px)
	);
}

/* El círculo elegido no se lava ni al pasar el mouse. */
.bmv-color.is-sin:hover {
	transform: none;
}

/* ============================================================
   18. "COMPLETA EL LOOK" Y "LO QUE VISTE ANTES", CENTRADOS
   ============================================================

   🚨 `auto-fill` contra `auto-fit`, que es UNA letra y cambia todo.

   El tema arma estas tiras con
   `repeat(auto-fill, minmax(clamp(140px,20cqw,260px), 1fr))`. Con `auto-fill`
   el navegador crea TODAS las columnas que entren —seis en un monitor ancho—
   aunque haya cuatro productos. Las dos que sobran quedan vacías a la derecha:
   la fila arranca pegada a la izquierda y deja un hueco enorme al costado.

   Con `auto-fit` las columnas vacías se pliegan solas. Y el máximo pasa de
   `1fr` a 260px —el mismo que ya quería el tema— para que las tarjetas NO se
   estiren: con dos productos en "Lo que viste antes", `1fr` las dejaría de
   900px cada una. Con el tope puesto, `justify-content: center` centra el
   grupo, que es lo que se buscaba.

   Sólo toca `.bst-grid--sm`, que el tema usa en esas dos tiras y en el widget
   chico de Elementor. La grilla grande de la tienda no se toca.
   ============================================================ */

.bst-grid--sm {
	grid-template-columns: repeat(auto-fit, minmax(clamp(140px, 20cqw, 260px), 260px));
	justify-content: center;
}

/* ============================================================
   19. BUBBA SALE: CUATRO POR FILA Y CENTRADO
   ============================================================

   Mismo problema que la sección 18 y en el mismo lugar: `auto-fill` armaba
   CINCO columnas de 351px para CUATRO productos, y la quinta quedaba vacía
   contra el borde derecho. La fila se veía corrida a la izquierda.

   Acá van dos cosas juntas:

     · `auto-fit` en vez de `auto-fill`, para que la columna que sobra se
       pliegue sola.
     · un `max-width` de exactamente cuatro columnas más sus tres separaciones,
       con `margin-inline: auto`. Eso es lo que garantiza que NUNCA entren cinco
       aunque el monitor sea enorme, y lo que centra el grupo.

   El tope de 340px es el que ya usa el tema para `.bst-grid` — no es un número
   inventado. Si algún día se quieren las tarjetas más grandes, se cambia ese
   valor en los dos lugares de esta regla.

   ⚠️ Los tiburones ballena NO se tocan: viven en `.bst-sale__whales`, que es
   hermano de la grilla, no hijo. Angostar la grilla no les mueve los carriles.
   ============================================================ */

.bst-sale .bst-grid {
	grid-template-columns: repeat(auto-fit, minmax(clamp(154px, 26cqw, 340px), 340px));
	justify-content: center;
	max-width: calc(340px * 4 + var(--bst-gap) * 3);
	margin-inline: auto;
}

/* ============================================================
   20. LUZ BAJO EL AGUA EN BUBBA SALE
   ============================================================

   El tema trae dos bandas diagonales de opacidad .05 y .035 con los bordes
   duros: en un fondo negro casi no se ven, y las que se ven parecen rayas de
   una tela, no luz.

   Lo que hace que algo se lea como sol entrando al agua son cuatro cosas, y
   ninguna es "subirle el brillo":

     1. BORDES BLANDOS. Un haz de luz no tiene filo. Cada uno nace y muere en
        transparente, así que son triángulos suaves y no franjas.
     2. ANCHOS DESPAREJOS. Tres haces distintos por período —uno ancho y
        brillante, uno finito, uno medio— y el patrón se repite. Si son todos
        iguales se lee como estampado.
     3. SE APAGAN CON LA PROFUNDIDAD. Una máscara vertical los desvanece hacia
        abajo: bajo el agua la luz se pierde a medida que baja.
     4. SE MUEVEN, Y NO AL MISMO TIEMPO. Dos capas con ángulos apenas distintos
        (104° y 98°) que se mecen a velocidades distintas. Donde se cruzan se
        aclara y se oscurece solo — de ahí sale el titileo de las cáusticas, sin
        dibujar ninguna cáustica.

   Van en ::before y ::after del propio `glass`, que es el PRIMER hijo de la
   sección: pinta debajo de las tarjetas y de los tiburones, así que no tapa
   nada. Se mueven con `transform`, que lo resuelve la placa de video.
   ============================================================ */

.bst-sale__glass {
	overflow: hidden;
	/* La superficie: por acá entra la luz. */
	background:
		radial-gradient(85% 55% at 24% -14%, rgba(255, 255, 255, .13), transparent 70%),
		radial-gradient(55% 38% at 76% -10%, rgba(255, 255, 255, .06), transparent 72%);
}

.bst-sale__glass::before,
.bst-sale__glass::after {
	content: '';
	position: absolute;
	top: -25%;
	bottom: -25%;
	left: -55%;
	width: 210%;
	pointer-events: none;
	/* Se apagan hacia abajo, como la luz con la profundidad. */
	-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, #000 20%, rgba(0, 0, 0, .62) 58%, transparent 94%);
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, #000 20%, rgba(0, 0, 0, .62) 58%, transparent 94%);
}

/* Haces anchos. */
.bst-sale__glass::before {
	background: repeating-linear-gradient(
		104deg,
		transparent 0 3.5%,
		rgba(255, 255, 255, .10) 5.5%,
		rgba(255, 255, 255, .13) 6.6%,
		rgba(255, 255, 255, .02) 8.6%,
		transparent 10% 16%,
		rgba(255, 255, 255, .06) 18%,
		transparent 20% 27%,
		rgba(255, 255, 255, .09) 29.5%,
		transparent 32% 42%
	);
	animation: bmvAgua 19s ease-in-out infinite alternate;
}

/* Haces finos, en otro ángulo, para que se crucen con los anchos. */
.bst-sale__glass::after {
	background: repeating-linear-gradient(
		98deg,
		transparent 0 5%,
		rgba(255, 255, 255, .05) 6.2%,
		transparent 7.6% 13%,
		rgba(255, 255, 255, .075) 14.5%,
		transparent 16% 23%,
		rgba(255, 255, 255, .035) 24.5%,
		transparent 26% 31%
	);
	animation: bmvAgua2 27s ease-in-out infinite alternate;
}

@keyframes bmvAgua {
	from { transform: translate3d(-3.5%, 0, 0) skewX(0deg); }
	to   { transform: translate3d(3.5%, 0, 0) skewX(1.6deg); }
}

@keyframes bmvAgua2 {
	from { transform: translate3d(3%, 0, 0) skewX(1.2deg); }
	to   { transform: translate3d(-3%, 0, 0) skewX(-.8deg); }
}

/* Quien pidió menos movimiento ve la luz quieta, no la pierde. */
@media (prefers-reduced-motion: reduce) {
	.bst-sale__glass::before,
	.bst-sale__glass::after {
		animation: none;
	}
}

/* ============================================================
   21. FUERA EL BOTÓN FLOTANTE DE WHATSAPP
   ============================================================

   Decisión del dueño: molestaba. Y tiene razón de fondo — el prototipo no lo
   tiene, tapa contenido en la esquina y compite con el botón de subir, que vive
   en la esquina de al lado.

   🚨 El WhatsApp NO se pierde. Sigue estando en el pie de todas las páginas, en
   la tarjeta "DUDAS?" de las páginas de texto, y en los botones de "Escribinos
   por WhatsApp" de contacto y seguimiento. Se saca un atajo, no el canal.

   Se esconde con CSS en vez de borrarlo: el botón lo imprime el TEMA, y el tema
   se sube por ZIP —cada subida pisa lo que se le edite adentro—. Devolverlo es
   borrar este bloque.

   ⚠️ El botón de subir (`.bst-top`) se queda. Si algún día también sobra, va
   con la misma regla agregándolo al selector.
   ============================================================ */

.bst-wa {
	display: none !important;
}


/* ============================================================
   22. LOS AVISOS DE WOOCOMMERCE
   ============================================================

   El de "se agregó a tu carrito" ya no existe: ahora se abre el cajón con la
   prenda adentro, que es lo que hace el prototipo, y el cartel se quita desde
   inc/carrito.php.

   Los que quedan son los que hacen falta —un cupón que no sirve, un dato que
   falta en el checkout, un talle que se quedó sin stock mientras comprabas—, y
   esos tienen que verse. Lo que se arregla acá es CÓMO se ven: WooCommerce los
   dibuja como una barra de sistema, con su tilde, su borde de 3px de color y
   un botón de "Ver carrito" que compite con el de comprar.
   ============================================================ */

.bst-shell .woocommerce-message,
.bst-shell .woocommerce-info,
.bst-shell .woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	margin: 0 0 18px;
	padding: 14px 17px;
	border: 1px solid var(--bst-line);
	border-radius: var(--bst-r-card);
	background: var(--bst-soft2);
	font: 400 13.5px/1.45 Archivo, system-ui, -apple-system, sans-serif;
	color: var(--bst-black);
	list-style: none;
}

/* El tilde y el signo de admiración que WooCommerce mete con ::before. Vienen
   de su tipografía de íconos, que este tema no carga: en vez del dibujo salía
   un cuadradito. */
.bst-shell .woocommerce-message::before,
.bst-shell .woocommerce-info::before,
.bst-shell .woocommerce-error::before {
	content: none;
}

/* Un error se lee distinto de un aviso: va en negro, como el botón de comprar. */
.bst-shell .woocommerce-error {
	border-color: var(--bst-black);
	background: var(--bst-black);
	color: var(--bst-white);
}

.bst-shell .woocommerce-error a {
	color: var(--bst-white);
}

/* Los botones que WooCommerce mete adentro del aviso ("Ver carrito") quedan
   como enlace: son una salida lateral, no la acción principal de la pantalla. */
.bst-shell .woocommerce-message .button,
.bst-shell .woocommerce-info .button,
.bst-shell .woocommerce-error .button {
	order: 2;
	margin: 0;
	padding: 0;
	border: 0;
	border-bottom: 1px solid var(--bst-line2);
	border-radius: 0;
	background: none;
	font: 500 12.5px/1.3 Archivo, system-ui, -apple-system, sans-serif;
	letter-spacing: .01em;
	color: inherit;
}

.bst-shell .woocommerce-message .button:hover,
.bst-shell .woocommerce-info .button:hover {
	border-bottom-color: var(--bst-black);
	background: none;
	color: var(--bst-black);
}

/* El texto primero y el botón después, aunque WooCommerce los imprima al revés. */
.bst-shell .woocommerce-message,
.bst-shell .woocommerce-info {
	justify-content: space-between;
}


/* ============================================================
   23. EL PRECIO DE TRANSFERENCIA EN LA FICHA
   ============================================================

   El chip de abajo del precio salia con un rectangulo negro donde tenia que
   decir el importe: "● ▬▬▬ pagando por transferencia".

   El precio NUNCA falto — estaba ahi, en negro sobre negro.

   La causa esta en el tema, en la regla que dibuja el puntito del chip:

       .bst-transfer-chip span:first-child { width:6px; height:6px; background:#0B0B0B }

   🚨 Ese selector NO dice "hijo directo". Alcanza a cualquier <span> que sea
   el primero de SU padre, tan adentro como haga falta — y wc_price() devuelve
   justamente eso:

       <span>                                    ← 2do hijo del chip, a salvo
         <span class="woocommerce-Price-amount">   ← 1ro de su padre, PINTADO
           <span class="...currencySymbol">$</span> ← 1ro de su padre, PINTADO
           3.200
         </span>
         pagando por transferencia
       </span>

   Se arregla desde acá y no en el tema: el tema se sube por ZIP y cada
   actualizacion se lleva puesto lo que se le edite adentro. El puntito es hijo
   directo del chip, asi que devolverle la normalidad a los spans anidados no
   lo toca.
   ============================================================ */

.bst-pdp .bst-transfer-chip span span {
	width: auto;
	height: auto;
	border-radius: 0;
	background: none;
	flex: 0 1 auto;
}


/* ============================================================
   24. LOS LOCALES PARA RETIRAR
   ============================================================

   La lista que aparece en el paso 02 al elegir "Retiro en local".

   🚨 Nace como <tr> dentro de la tabla escondida del resumen —tiene que nacer
   ahi para que WooCommerce la actualice por AJAX— y bmv_entrega_script() la
   mueve al paso 02. Ahi ya no hay tabla, asi que la fila y su celda quedan
   como table-row y table-cell sueltos: por eso se veia torcida, con el rotulo
   pegado a la izquierda y los redondeles del navegador alineados a mano.
   Devolverlas a display:block es lo que la endereza.

   El diseño: filete arriba y abajo de cada renglon, el punto a la izquierda,
   la calle con su barrio debajo y el horario a la derecha en monoespaciada.
   ============================================================ */

.bmv-retiro,
.bmv-retiro > td {
	display: block;
	width: auto;
	padding: 0;
	border: 0;
}

.bmv-locales {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--bst-line);
}

.bmv-local {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin: 0;
	padding: 16px 0;
	border-bottom: 1px solid var(--bst-line);
	cursor: pointer;
}

/* El redondel del navegador no se puede pintar; se dibuja uno propio. */
.bmv-local input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.bmv-local__punto {
	flex: none;
	width: 15px;
	height: 15px;
	border: 1px solid var(--bst-line2);
	border-radius: var(--bst-pill);
	background: var(--bst-white);
	transition: border-color .25s, background .25s, box-shadow .25s;
}

.bmv-local:hover .bmv-local__punto {
	border-color: var(--bst-black);
}

/* Elegido: circulo negro con un anillo blanco adentro, como el prototipo. */
.bmv-local:has(input:checked) .bmv-local__punto {
	border-color: var(--bst-black);
	background: var(--bst-black);
	box-shadow: inset 0 0 0 3px var(--bst-white);
}

/* El punto y los datos van juntos; el horario se va al otro extremo. */
.bmv-local__datos {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 3px;
	margin-right: auto;
}

.bmv-local__punto + .bmv-local__datos {
	margin-left: -2px;
}

.bmv-local__calle {
	font: 500 14.5px/1.2 Archivo, system-ui, -apple-system, sans-serif;
	color: var(--bst-black);
}

.bmv-local__zona {
	font: 400 12px/1.2 Archivo, system-ui, -apple-system, sans-serif;
	color: var(--bst-mute);
}

.bmv-local__hora {
	flex: none;
	font: 400 10.5px/1 'IBM Plex Mono', ui-monospace, monospace;
	letter-spacing: .14em;
	color: var(--bst-label);
	white-space: nowrap;
}

/* Con un solo local no hay nada que elegir: se muestra cual es y listo. */
.bmv-local:only-child {
	cursor: default;
}


/* ============================================================
   25. ACEPTAR LOS TERMINOS
   ============================================================

   🚨 Este bloque estaba INVISIBLE y nadie podia comprar.

   El checkout usa el texto adentro del campo en vez de rotulos arriba, asi que
   el bloque 12 esconde todos los <label> de las filas. Pero el de los terminos
   no rotula ningun campo: ES la casilla. Escondido, quedaba de 1x1 pixel, y al
   intentar pagar saltaba "Por favor, lee y acepta los terminos y condiciones"
   sin que hubiera nada que tildar. La compra no se podia terminar.

   Arriba se lo excluye de aquella regla; aca se le da la forma del diseño.
   ============================================================ */

.bst-co .woocommerce-terms-and-conditions-wrapper .form-row {
	margin: 0;
}

.bst-co .form-row > label.woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	font: 400 13px/1.5 Archivo, system-ui, -apple-system, sans-serif;
	color: var(--bst-body);
	cursor: pointer;
}

.bst-co input#terms {
	flex: none;
	width: 17px;
	height: 17px;
	margin: 2px 0 0;
	accent-color: var(--bst-black);
	cursor: pointer;
}

/* El enlace a la pagina de terminos, que abre el detalle. */
.bst-co .woocommerce-terms-and-conditions-link {
	color: var(--bst-black);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* El asterisco de obligatorio: el resto del checkout no los usa. */
.bst-co .woocommerce-terms-and-conditions-wrapper abbr.required {
	display: none;
}

/* El aviso para quien tenga el JavaScript apagado ocupa lugar sin decir nada
   util en un checkout que sin JavaScript no funciona igual. */
.bst-co .form-row.place-order > noscript {
	display: none;
}

/* La casilla, ya dentro del panel: separada del total y del boton. */
.bmv-resumen__terminos[data-vacio] {
	display: none;
}

.bmv-resumen__terminos {
	padding-top: 14px;
	border-top: 1px solid var(--bst-line);
}

.bmv-resumen__terminos .form-row {
	margin: 0;
}


/* ============================================================
   26. PEDIDO CONFIRMADO
   ============================================================

   La pantalla que el cliente ve JUSTO DESPUES de darte la plata. WooCommerce
   la resuelve con una lista de viñetas, una tabla y las direcciones en
   cursiva: es el peor lugar de la tienda para parecer un volante de sistema.

   El prototipo: tilde grande, titulo, una linea que explica que pasa ahora,
   tres datos separados por filetes y tres salidas.
   ============================================================ */

.bmv-gracias {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
	padding: clamp(30px, 6cqw, 90px) 0;
	text-align: center;
}

.bmv-gracias__tilde {
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	border-radius: var(--bst-pill);
	background: var(--bst-black);
	color: var(--bst-white);
	font: 400 22px/1 Archivo, system-ui, -apple-system, sans-serif;
}

.bmv-gracias__texto {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.bmv-gracias__titulo {
	margin: 0;
	font: 700 clamp(26px, 3.2cqw, 44px)/1.05 Archivo, system-ui, -apple-system, sans-serif;
	letter-spacing: -.03em;
	color: var(--bst-black);
}

.bmv-gracias__bajada {
	max-width: 46ch;
	margin: 0;
	font: 400 14.5px/1.6 Archivo, system-ui, -apple-system, sans-serif;
	color: var(--bst-mute);
	text-wrap: pretty;
}

/* Los tres datos. El fondo del contenedor asoma por el hueco de 1px y hace de
   filete entre las celdas, sin bordes dobles en las esquinas. */
.bmv-gracias__datos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1px;
	margin-top: 6px;
	background: var(--bst-line2);
}

.bmv-gracias__dato {
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: flex-start;
	min-width: 150px;
	padding: 16px 26px;
	background: var(--bst-white);
}

.bmv-gracias__rotulo {
	font: 500 9.5px/1 IBM Plex Mono, ui-monospace, monospace;
	letter-spacing: .24em;
	color: var(--bst-label);
}

.bmv-gracias__valor {
	font: 600 14.5px/1 Archivo, system-ui, -apple-system, sans-serif;
	color: var(--bst-black);
}

/* Los datos de transferencia que imprime la pasarela. */
.bmv-gracias__pasarela:empty {
	display: none;
}

.bmv-gracias__pasarela {
	width: 100%;
	max-width: 560px;
	padding: 20px 24px;
	border: 1px solid var(--bst-line);
	border-radius: var(--bst-r-card);
	background: var(--bst-soft2);
	text-align: left;
}

.bmv-gracias__pasarela h2,
.bmv-gracias__pasarela h3 {
	margin: 0 0 10px;
	font: 500 11px/1 IBM Plex Mono, ui-monospace, monospace;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--bst-label);
}

.bmv-gracias__pasarela ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bmv-gracias__pasarela li {
	padding: 7px 0;
	border-bottom: 1px solid var(--bst-line);
	font: 400 13.5px/1.5 Archivo, system-ui, -apple-system, sans-serif;
	color: var(--bst-body);
}

.bmv-gracias__pasarela li:last-child {
	border-bottom: 0;
}

.bmv-gracias__pasarela strong {
	color: var(--bst-black);
}

.bmv-gracias__botones {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 8px;
}

.bmv-gracias__btn {
	padding: 16px 32px;
	border: 1px solid transparent;
	border-radius: var(--bst-pill);
	font: 600 13px/1 Archivo, system-ui, -apple-system, sans-serif;
	letter-spacing: .03em;
	color: var(--bst-black);
	transition: transform .35s var(--bst-ease), border-color .3s, background .3s, color .3s;
}

.bmv-gracias__btn--fuerte {
	background: var(--bst-black);
	color: var(--bst-white);
}

.bmv-gracias__btn--fuerte:hover {
	transform: translateY(-2px);
	color: var(--bst-white);
}

.bmv-gracias__btn:not(.bmv-gracias__btn--fuerte) {
	border-color: var(--bst-line2);
}

.bmv-gracias__btn:not(.bmv-gracias__btn--fuerte):hover {
	border-color: var(--bst-black);
}

.bmv-gracias__btn--borde {
	border-color: var(--bst-black);
}

.bmv-gracias__btn--borde:hover {
	background: var(--bst-black);
	color: var(--bst-white);
}

/* El titulo de la pagina, que en esta pantalla sobra.

   🚨 No sale del endpoint de WooCommerce —ese filtro no lo toca— sino del
   the_title() con el que el tema encabeza cualquier pagina. Y el titulo de
   esta pagina es "Finalizar la compra": leerlo justo despues de pagar da la
   sensacion de que algo no se completo. La plantilla propia ya trae el suyo. */
.woocommerce-order-received .bst-section > .bst-h1,
.woocommerce-order-received .bst-doc__head {
	display: none;
}


/* ============================================================
   27. SEGUI TU PEDIDO
   ============================================================

   El formulario salia con los rotulos arriba, dos parrafos que decian lo
   mismo y el boton gris del navegador. El prototipo lo resuelve en una linea:
   campo, campo y boton negro, todos de la misma altura.

   El parrafo repetido lo saca la plantilla propia de order/form-tracking.php.
   ============================================================ */

.bmv-seguir {
	margin: 0 0 clamp(24px, 3cqw, 40px);
}

.woocommerce form.bmv-seguir .bmv-seguir__campos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 9px;
}

.woocommerce form.bmv-seguir .form-row.bmv-seguir__campo {
	flex: 1 1 220px;
	max-width: 320px;
	min-width: 0;
	margin: 0;
	padding: 0;
}

/* El texto va adentro del campo, como en el resto del sitio. El rotulo queda
   para el lector de pantalla. */
.bmv-seguir__rotulo {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.woocommerce form.bmv-seguir input.input-text {
	width: 100%;
	height: 54px;
	padding: 0 18px;
	border: 1px solid var(--bst-line2) !important;
	/* El tema fija el radio de todos los campos en 10px; el del boton es 12 y
	   uno al lado del otro la diferencia se ve. */
	border-radius: 12px !important;
	background: var(--bst-white);
	font: 400 15px/1 Archivo, system-ui, -apple-system, sans-serif;
	color: var(--bst-black);
	outline: 0;
	transition: border-color .25s;
}

.woocommerce form.bmv-seguir input.input-text:focus {
	border-color: var(--bst-black) !important;
}

.woocommerce form.bmv-seguir input.input-text::placeholder {
	color: var(--bst-label);
}

/* El numero de pedido, en monoespaciada: es un codigo, no una palabra. */
.woocommerce form.bmv-seguir input#orderid {
	font-family: IBM Plex Mono, ui-monospace, monospace;
	font-weight: 600;
	letter-spacing: .08em;
}

.woocommerce form.bmv-seguir .bmv-seguir__btn {
	flex: none;
	height: 54px;
	padding: 0 28px;
	border: 0;
	border-radius: 12px;
	background: var(--bst-black);
	color: var(--bst-white);
	font: 600 13.5px/1 Archivo, system-ui, -apple-system, sans-serif;
	letter-spacing: .02em;
	cursor: pointer;
	transition: opacity .25s;
}

.woocommerce form.bmv-seguir .bmv-seguir__btn:hover {
	opacity: .9;
	color: var(--bst-white);
}

/* --- El resultado de la busqueda ----------------------------------------- */

.bmv-seguimiento {
	display: flex;
	flex-direction: column;
	gap: clamp(24px, 3cqw, 36px);
	max-width: 60ch;
}

/* Los tres datos, alineados a la izquierda y con marco, no centrados como en
   la pantalla de confirmacion. */
.bmv-seguimiento__datos {
	justify-content: flex-start;
	margin: 0;
	border: 1px solid var(--bst-line2);
	border-radius: 14px;
	overflow: hidden;
}

.bmv-seguimiento__datos .bmv-gracias__dato {
	flex: 1 1 130px;
	padding: 16px 18px;
}

/* La linea de tiempo. Cada paso lleva su punto y el hilo que baja al
   siguiente; el ultimo no lo lleva, para que la linea no quede colgando. */
.bmv-pasos {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bmv-paso {
	position: relative;
	display: flex;
	gap: 16px;
	padding-bottom: 22px;
}

.bmv-paso:last-child {
	padding-bottom: 0;
}

.bmv-paso::before {
	content: '';
	position: absolute;
	top: 26px;
	bottom: 0;
	left: 13px;
	width: 1px;
	background: var(--bst-line2);
}

.bmv-paso:last-child::before {
	display: none;
}

.bmv-paso__punto {
	position: relative;
	z-index: 1;
	display: grid;
	flex: none;
	place-items: center;
	width: 26px;
	height: 26px;
	border: 1px solid var(--bst-line2);
	border-radius: var(--bst-pill);
	background: var(--bst-white);
	color: transparent;
	font: 400 12px/1 Archivo, system-ui, -apple-system, sans-serif;
}

.bmv-paso.is-hecho .bmv-paso__punto {
	border-color: var(--bst-black);
	background: var(--bst-black);
	color: var(--bst-white);
}

.bmv-paso__datos {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.bmv-paso__cabeza {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
}

.bmv-paso__titulo {
	font: 600 15px/1.2 Archivo, system-ui, -apple-system, sans-serif;
	color: var(--bst-black);
}

/* El paso que todavia no paso se lee en gris. */
.bmv-paso:not(.is-hecho) .bmv-paso__titulo {
	color: var(--bst-label);
}

.bmv-paso__cuando {
	font: 400 10.5px/1 IBM Plex Mono, ui-monospace, monospace;
	letter-spacing: .14em;
	color: var(--bst-label);
}

.bmv-paso__texto,
.bmv-paso__texto p {
	margin: 0;
	font: 400 13px/1.55 Archivo, system-ui, -apple-system, sans-serif;
	color: var(--bst-mute);
	text-wrap: pretty;
}


/* ============================================================
   28. EL HEADER, QUE LA HOME v1.1 ROMPIÓ
   ============================================================

   🚨 Choque de nombres dentro del propio tema.

   La actualización de la home (ago-2026) usa la clase `bst-head` para el
   ENCABEZADO DE CADA SECCIÓN —el título a la izquierda y el "ver todos" a la
   derecha— y le puso reglas nuevas:

       .bst-head { display:flex; flex-wrap:wrap; justify-content:space-between;
                   gap:16px; margin-bottom:clamp(18px,2.2cqw,26px) }
       .bst-head > div:first-child { display:flex; flex-direction:column; gap:9px }

   Pero esa clase YA la usaba el <header> del sitio, y el paquete **no trae
   header.php**: quedó el marcado viejo con el CSS nuevo encima.

   El resultado se veía así: la barra de anuncios y la navegación pasaron a ser
   items de un flex en fila, cada uno con el ancho de su contenido —1756px y
   769px dentro de 1922— y con el wrap se apilaron. La barra quedaba cortada,
   con una franja blanca a la derecha, y el menú entero apretado contra la
   mitad izquierda, encima del hero.

   Se devuelve el header a bloque. Los tres encabezados de sección, que son
   <div class="bst-head">, no se tocan: la regla apunta a la etiqueta header.
   ============================================================ */

header.bst-head {
	display: block;
	gap: 0;
	margin-bottom: 0;
}

/* La barra de anuncios se volvió una columna por la regla de arriba. */
header.bst-head > div:first-child {
	flex-direction: row;
	gap: 0;
}


/* ============================================================
   29. EL MEGA MENÚ, QUE QUEDÓ APRETADO
   ============================================================

   🚨 La v1.1 dejó a medias el rediseño del mega menú.

   El menú viejo era un grid de cuatro columnas dibujado por `.bst-mega`. El
   nuevo pone las columnas en un `.bst-mega__inner` propio —con las dos
   tarjetas con foto a los costados— y a `.bst-mega` sólo le toca ser el panel
   que lo contiene.

   Pero el paquete agregó la regla nueva SIN anular la vieja:

       .bst-mega { position:absolute; …; display:grid;
                   grid-template-columns:repeat(3,minmax(150px,1fr)) minmax(220px,.9fr) }
       .bst-mega { position:absolute; …; border:0; background:none }   ← la nueva

   La segunda apaga el fondo, el borde y el desenfoque, pero no dice nada del
   `display`. Así que el panel seguía siendo un grid de cuatro columnas y el
   contenido entero caía adentro de la primera: medía 436px de 1922, con las
   columnas de enlaces aplastadas a 132px.

   Vuelve a ser un bloque; el grid ya lo hace `.bst-mega__inner`.
   ============================================================ */

.bst-mega {
	display: block;
	gap: 0;
}


/* ============================================================
   30. LA FOTO DEL LOOK NO LLENABA SU MARCO
   ============================================================

   El marco es un 4/5 con recorte centrado, y la foto se le escapaba: el marco
   medía 999,13px y la imagen 1200,9px, así que el `overflow:hidden` cortaba
   202px por abajo — las zapatillas, que son el ítem 04 del look.

   La regla del tema para esa foto es la versión débil:

       .bst-look__media img { width:100%; height:100% ; object-fit:cover }

   Y no alcanza: sin `position:absolute` el `height:100%` no gana, la imagen
   vuelve a su proporción natural y `object-fit` no tiene caja que llenar.

   Lo que va abajo NO es invento: es el modismo que el propio tema ya usa, y
   que le funciona, en la grilla de Instagram —

       .bst-ig img { position:absolute!important; inset:0;
                     width:100%!important; height:100%!important;
                     object-fit:cover }

   — sólo que en el look se olvidó de aplicarlo. Copiarlo tal cual deja la foto
   en 799×999, exactamente el marco. Medido antes de escribirlo.
   ============================================================ */

.bst-look__media img {
	position: absolute !important;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
}


/* ============================================================
   31. SHOP THE LOOK: LAS PROPORCIONES NO ERAN LAS DEL DISEÑO
   ============================================================

   🚨 Acá el CSS del tema NO coincide con su propia referencia. La captura que
   viene en el paquete (`export/bubba-st-desktop.png`, 1454px de ancho) se midió
   pixel a pixel y da:

       foto ...... 668 × 720  →  proporción 0,928
       lista ..... 635
       la foto ocupa el 51,3% de las dos columnas
       ambas columnas empiezan en y=102 y terminan en 821 / 818

   Y el tema dice:

       .bst-look { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);  ← 45%
                   align-items: start }
       .bst-look__media { aspect-ratio: 4/5 }                              ← 0,800

   Las tres cosas mal, y se suman: la foto salía más angosta (45%) pero mucho
   más alta (4/5 en vez de 13/14), y con `align-items:start` la lista quedaba
   arriba, corta y suelta, con un vacío enorme debajo mientras la foto seguía
   bajando. De ahí el "se ve muy grande y no está bien acomodado".

   Que las dos columnas terminen a 3px una de otra en la referencia no es
   casualidad: la lista se ESTIRA hasta la altura de la foto y empuja el total,
   el botón y la nota al fondo. Eso es `align-items:stretch` + `margin-top:auto`.

   Con las proporciones de la referencia quedaba 811×874 al 51,2% (ella da
   0,928 y 51,3%). Pero el pedido final fue otro: que la foto entre ENTERA en
   pantalla, sin scrollear para terminar de verla. Eso ya no es una proporción,
   es una medida de ALTO, y que depende de la pantalla y no del ancho.

   Medido en su equipo: ventana de 901px, encabezado pegado 96, título de la
   sección 57, aire 26. Quedan 698px reales para la foto — y medía 758.

   Por eso acá manda el alto y el ancho lo sigue: `height` atado a la ventana,
   `width:auto` para que el 13/14 derive el ancho, y la columna en `auto` para
   que se ajuste sola. Da 642×691: entra con 31px de sobra.

   El `min(700px, …)` es el techo para monitores altos, donde si no volvería a
   crecer de más. Y el `height:700px` suelto de arriba es el respaldo para
   navegadores sin `svh`: si no entienden `min()` con esa unidad, descartan la
   línea entera y les queda la anterior.

   De paso arregla el hueco. El texto de la lista tiene tamaño FIJO y la foto
   no, así que en una pantalla más ancha que la referencia (1745 contra 1454)
   la foto crecía, el contenido no, y todo el sobrante se volvía aire entre el
   último producto y el total. Ahora ese vacío es el 30% de la columna, contra
   el 34% de la referencia.

   Es una desviación DELIBERADA, no un error. Para volver a la referencia
   exacta: `1.05fr / 1fr` y sacar el `height`.

   ⚠️ Dentro de la container query: en móvil la lista va debajo, no al lado, y
   ahí el 4/5 vertical del tema es el correcto. Si esto se aplicara suelto, en
   el teléfono la foto se quedaría sin alto de referencia y colapsaría.
   ============================================================ */

@container (min-width: 761px) {
	.bst-look {
		grid-template-columns: auto minmax(0, 1fr);
		align-items: stretch;
	}

	.bst-look__media {
		aspect-ratio: 13 / 14;
		height: 700px;
		height: min(700px, calc(100svh - 210px));
		width: auto;
	}

	.bst-look__total {
		margin-top: auto;
	}
}


/* ============================================================
   32. LA FOTO DEL LOOK ERA LA ÚNICA QUE NO SE ANIMABA
   ============================================================

   El tema hace crecer despacio la foto al pasar el mouse en SEIS lugares, y
   siempre con la misma receta:

       .bst-strip__item:hover img         → scale(1.05)   .9s
       .bst-card:hover .bst-card__media img → translateY(-4%) scale(1.06)  .8s
       .bst-ig>*:hover img                → scale(1.06)   .8s
       .bst-style:hover img               → scale(1.06)   .8s
       .bst-ugc__card:hover img           → scale(1.05)   .85s
       .bst-store:hover .bst-store__media img → scale(1.05)  .9s

   Shop the Look es la ÚNICA foto grande que quedó afuera. Así que esto no es
   un efecto nuevo: es el mismo modismo, con la duración larga (.9s) que el
   tema reserva para las fotos más grandes, y su easing `--bst-ease`.

   El `overflow:hidden` del marco ya estaba, así que la foto crece por dentro
   sin empujar nada. Las pastillas ("5 PRENDAS", "LOOK 01 · INVIERNO") no se
   mueven: la regla toca sólo al `img`.

   El bloque de `prefers-reduced-motion` lo agrego yo — el tema no lo hace para
   sus seis hovers, pero cuesta nada y es lo correcto para quien pide en el
   sistema que se reduzca el movimiento.
   ============================================================ */

.bst-look__media img {
	transition: transform .9s var(--bst-ease);
}

.bst-look__media:hover img {
	transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
	.bst-look__media img {
		transition: none;
	}

	.bst-look__media:hover img {
		transform: none;
	}
}


/* ============================================================
   33. LOS RENGLONES DEL LOOK ERAN MÁS BAJOS QUE EN EL DISEÑO
   ============================================================

   Cuarta discrepancia entre el código del tema y su propia captura de
   referencia. Detectando las líneas separadoras en `bubba-st-desktop.png`:

       separadores en y = 102, 171, 240, 309, 378, 447   →  69px por renglón
       el texto del renglón mide 28px, con 20px de aire arriba y 22 abajo

   El tema pone `padding:13px 0`, que da renglones de 57px. Son 12px menos por
   renglón: 60px que la lista deja de ocupar y que se suman al vacío entre el
   último producto y el total —el que se veía como un agujero—.

   Con `19px` el renglón mide 69px clavado (30px del botón "+", que es lo más
   alto del renglón, más 19+19 de relleno más 1 del borde).

   Nota: el hueco que queda NO es un error, está en el diseño — la lista se
   estira hasta la foto y el total queda anclado abajo, alineado con el pie de
   la imagen (ver bloque 31). Esto sólo lo devuelve a la proporción correcta:
   de 382px a 322px, contra los ~292 de la referencia escalada.

   Va sin container query a propósito: en el teléfono renglones más altos son
   mejores para tocar con el dedo, no peores.
   ============================================================ */

.bst-look__row {
	padding: 19px 0;
}


/* ============================================================
   34. "RECIÉN LLEGADOS": DESPLAZAMIENTO LATERAL CON FLECHAS
   ============================================================

   El tema YA tiene este carrusel… pero sólo en teléfonos:

       @container (max-width:700px) {
         .bst-new { grid-auto-flow:column; grid-auto-columns:60cqw;
                    overflow-x:auto; scroll-snap-type:x mandatory }
       }

   En escritorio lo deja en `repeat(5,1fr)`: cinco columnas fijas y punto. Con
   cinco productos cargados no sobraba ninguno, así que no había nada para
   desplazar aunque se quisiera. Por eso además se subió a 12 la cantidad del
   widget en la portada — sin eso las flechas no tendrían adónde llevar.

   Lo de abajo lleva ese mismo carrusel al escritorio, cuidando que las
   tarjetas NO cambien de tamaño: `grid-auto-columns` repite exactamente el
   ancho que daba `repeat(5,1fr)` —(100% menos las cuatro separaciones) sobre
   cinco—, así se siguen viendo cinco y el resto espera afuera.

   Las flechas no son un dibujo nuevo: son la pastilla `.bst-strip__nav` del
   propio tema, la misma de la tira de categorías (44×44, fondo blanco al 90%,
   desenfoque, sombra suave y realce al pasar el mouse). El módulo
   `inc/carrusel.php` sólo les pone esa clase; todo el aspecto ya estaba.

   🚨 Las flechas van FUERA de la grilla, no adentro: `.bst-new` tiene
   `overflow-x:auto`, y un hijo posicionado se desplaza con el contenido, así
   que se irían de pantalla al primer clic. Por eso el envoltorio
   `.bmv-carrusel` con `position:relative`.
   ============================================================ */

.bmv-carrusel {
	position: relative;
}

@container (min-width: 701px) {
	.bmv-carrusel .bst-new {
		grid-auto-flow: column;
		grid-template-columns: none;
		grid-auto-columns: calc((100% - 4 * clamp(10px, 1.4cqw, 22px)) / 5);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		scroll-behavior: smooth;
	}

	.bmv-carrusel .bst-new::-webkit-scrollbar {
		display: none;
	}
}

/* La sombra de la pastilla se recortaría contra el borde de la sección. */
.bmv-carrusel__nav {
	opacity: 1;
	transition: opacity .3s, background .25s, transform .3s;
}

/*
 * Apagada la flecha que no lleva a ningún lado. Se deja visible pero atenuada
 * en vez de sacarla: si aparecieran y desaparecieran, el contenido de al lado
 * saltaría en cada clic.
 */
.bmv-carrusel__nav[disabled] {
	opacity: 0;
	pointer-events: none;
}

/* Si todo entra en pantalla, no hay carrusel: sobran las dos. */
.bmv-carrusel--quieto .bmv-carrusel__nav {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.bmv-carrusel .bst-new {
		scroll-behavior: auto;
	}

	.bmv-carrusel__nav {
		transition: none;
	}
}


/* ============================================================
   35. "COMPLETÁ EL LOOK": ALINEADA CON SU TÍTULO
   ============================================================

   Corrige al bloque 18, que es mío. Ahí centré estas tiras
   (`justify-content:center`) para tapar el hueco que dejaba `auto-fill` cuando
   armaba seis columnas para cuatro productos.

   Funcionaba, pero se veía raro por otro lado: el título "Completá el look"
   arranca pegado al margen izquierdo y las tarjetas quedaban flotando en el
   medio. Medido: el título en x=56 y la primera tarjeta en x=312 — 256px de
   aire entre uno y otra, que se lee como un error de maquetado.

   Ahora que "Lo que viste antes" ya no está (ver inc/combinar.php), en una
   ficha esta tira SIEMPRE trae exactamente cuatro productos. Con cuatro
   columnas iguales que ocupan el ancho no sobra ni falta nada: no hay columna
   vacía que tapar, y el borde izquierdo cae justo debajo del título.

   El bloque 18 se deja como está: `.bst-grid--sm` también lo usa el widget
   chico de Elementor, donde la cantidad SÍ es variable y el centrado sigue
   siendo lo correcto. Por eso esta regla va acotada a `body.single-product`.

   ⚠️ Dentro de la container query: en el teléfono cuatro columnas dejarían
   tarjetas de 80px. Ahí sigue mandando el bloque 18.
   ============================================================ */

@container (min-width: 701px) {
	body.single-product .bst-grid--sm {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		justify-content: start;
	}
}


/* ============================================================
   36. LA FICHA: JERARQUÍA DEL DESCUENTO Y ENTRADA EN ESCENA
   ============================================================

   🚨 EL PRECIO VIEJO PESABA IGUAL QUE EL NUEVO.

   El tema sólo define el tamaño del bloque:

       .bst-pdp__price > span:first-child { font-weight:700; font-size:clamp(20px,2.2cqw,26px) }

   …y NADA para el `del` y el `ins` que WooCommerce mete adentro. Así que los
   dos heredaban lo mismo. Medido en "Wide leg": tachado y vigente, los dos en
   `700 26px` y en negro. $ 56.300 y $ 39.500 compitiendo de igual a igual, con
   una rayita como única diferencia. El descuento no se leía.

   Ahora el anterior pasa a la mitad del tamaño, peso medio y gris: queda como
   referencia, que es su trabajo. El vigente se queda con todo el peso.

   La insignia `-30%` la agrega `bmv_insignia_de_descuento()` en inc/ficha.php,
   con la MISMA cuenta que ya hace la tarjeta del listado.

   ── LA ANIMACIÓN ──

   La ficha no tenía ninguna: medido, `.bst-pdp .bst-reveal` daba CERO, mientras
   el resto de la página tenía cuatro. Se entraba y todo aparecía de golpe.

   No se inventa un movimiento nuevo: se copia el del tema —`.bst-reveal` sube
   18px y aparece en .8s con `--bst-ease`— y se escalona por bloque, de arriba
   hacia abajo, siguiendo el orden en que se lee: volanta, título, precio,
   transferencia, stock, formulario, envío, y al final el acordeón.

   ⚠️ Va dentro de `prefers-reduced-motion: no-preference`, no al revés. La
   animación arranca en `opacity:0`, así que si por lo que fuera no corriera,
   el texto quedaría INVISIBLE. Poniéndola sólo donde el movimiento está
   aceptado, quien pidió que se reduzca ve la ficha completa y quieta desde el
   primer instante, sin depender de que nada se ejecute.
   ============================================================ */

.bst-pdp__price del {
	font-size: .55em;
	font-weight: 500;
	color: var(--bst-mute);
	text-decoration-thickness: 1px;
}

.bst-pdp__price ins {
	text-decoration: none;
	font-weight: 700;
}

/* Misma pastilla negra que el tema usa para BEST SELLER y SALE. */
.bmv-off {
	display: inline-flex;
	align-items: center;
	margin-left: 4px;
	padding: 5px 9px;
	border-radius: var(--bst-pill);
	background: var(--bst-black);
	color: #fff;
	font-weight: 700;
	font-size: 10px;
	line-height: 1;
	letter-spacing: .1em;
	vertical-align: middle;
}

/* El precio por transferencia es el que paga la mayoría: que se lea. */
.bst-transfer-chip {
	border: 1px solid rgba(0, 0, 0, .07);
}

.bst-transfer-chip span:last-child {
	font-weight: 600;
	font-size: 13px;
}

/* Respuesta al tacto en los talles, con el easing del tema. */
.bst-size {
	transition:
		background .3s var(--bst-ease),
		color .3s var(--bst-ease),
		border-color .3s var(--bst-ease),
		transform .18s var(--bst-ease);
}

.bst-size:active {
	transform: scale(.96);
}

/* Que se vea por dónde se está navegando con el teclado. */
.bst-pdp__info button:focus-visible,
.bst-pdp__info a:focus-visible,
.bst-size:focus-visible {
	outline: 2px solid var(--bst-black);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
	@keyframes bmv-entra {
		from {
			opacity: 0;
			transform: translateY(18px);
		}

		to {
			opacity: 1;
			transform: none;
		}
	}

	/*
	 * Los dos bloques por separado, NO `> div > *` a secas: `.bst-acc` también
	 * es un div, así que esa forma le animaba los tres paneles de adentro con
	 * retraso 0 y aparecían ANTES que el título. El acordeón entra entero, al
	 * final, como un bloque.
	 */
	.bst-pdp__info > div:first-child > *,
	.bst-pdp__info > div:nth-child(2) > *,
	.bst-pdp__info > .bst-acc {
		animation: bmv-entra .7s var(--bst-ease) both;
	}

	/* Volanta, título, precio, transferencia. */
	.bst-pdp__info > div:first-child > *:nth-child(1) { animation-delay: .05s; }
	.bst-pdp__info > div:first-child > *:nth-child(2) { animation-delay: .11s; }
	.bst-pdp__info > div:first-child > *:nth-child(3) { animation-delay: .17s; }
	.bst-pdp__info > div:first-child > *:nth-child(4) { animation-delay: .23s; }

	/* Stock, formulario de compra, línea de envío. */
	.bst-pdp__info > div:nth-child(2) > *:nth-child(1) { animation-delay: .29s; }
	.bst-pdp__info > div:nth-child(2) > *:nth-child(2) { animation-delay: .35s; }
	.bst-pdp__info > div:nth-child(2) > *:nth-child(3) { animation-delay: .41s; }

	.bst-pdp__info > .bst-acc { animation-delay: .47s; }
}


/* ============================================================
   37. LA FOTO DE LA FICHA: CUADRADA
   ============================================================

   Dos problemas encadenados, y el segundo lo creé yo arreglando el primero.

   1. El tema le fija `aspect-ratio:4/5` a la foto y alinea las columnas arriba
      (`align-items:start`). La foto medía 783×979 al lado de una columna de
      información de 725: 254px de imagen colgando solos contra el blanco, que
      obligaban a bajar para terminar de verla.

   2. Lo até a la altura de la información. Se acabó el sobrante, pero apareció
      otra cosa: como cada ficha tiene distinto contenido, la foto cambiaba de
      forma sola. En "Wide leg" quedaba 783×547 — proporción 1,43, ACHATADA.
      Para ropa eso se ve mal: las fotos de indumentaria son cuadradas o más
      altas que anchas, nunca apaisadas.

   La forma la tiene que decidir el diseño, no cuánto texto tenga cada producto.

   Queda CUADRADA, y no es un número al azar: las fotos del catálogo son
   1254×1254, así que en un marco 1:1 el `object-fit:cover` no recorta NADA —
   se ve la prenda entera. Y a 783×783 es bastante más baja que los 979 de
   origen, que era la queja inicial.

   `align-items:stretch` se conserva para que la columna de información se
   estire hasta la foto y las dos terminen parejas. El aire que le sobra abajo
   al texto es normal en una ficha; una foto deformada, no.

   ⚠️ Dentro de la container query: apilado en el teléfono manda el 4/5 vertical
   del tema, que ahí es lo correcto.

   Si algún día se la quiere más alta, es un solo número: `4/5` o `3/4`.
   ============================================================ */

@container (min-width: 761px) {
	.bst-pdp {
		align-items: stretch;
	}

	.bst-gal__main {
		aspect-ratio: 1 / 1;
	}
}


/* ============================================================
   38. LA FIRMA: EL TIBURÓN FUERA DEL SALE Y LAS TARJETAS DE A UNA
   ============================================================

   ── EL TIBURÓN ──

   El `<whale-swim>` del tema es lo único verdaderamente propio que tiene este
   sitio, y estaba usado en UN solo lugar. `inc/firma.php` lo lleva al pie y al
   carrito vacío — dos espacios muertos, donde no le compite a ninguna prenda.

   Cada `<whale-swim>` es un CARRIL, no un tiburón: el componente mantiene la
   caja quieta y mueve el cuerpo adentro (ver bloque 8). Por eso hay que darle
   medida, y por eso la opacidad va acá y no como atributo.

   Muy tenues a propósito: 0.10 en el pie y 0.13 en el carrito. Una firma se
   nota cuando se la busca, no antes; si se ve de entrada, es un dibujo.

   ── LAS TARJETAS, DE A UNA ──

   🚨 Acá me equivoqué primero y vale dejarlo escrito, porque es una trampa fina.

   Quise escalonarlas con un sistema propio: una clase que las dejaba en
   `opacity:0` y un observador que las destapaba. No andaba nunca. El motivo es
   que el tema YA las anima —

       .bst-card { …; animation: bstUp .5s var(--bst-ease) both }

   — y una ANIMACIÓN con `both` le gana a cualquier declaración normal en la
   cascada, por más específica que sea. Mi `opacity:1` no tenía chance. Lo
   confirmé creando un div de prueba con cada clase por separado: con
   `.bst-card` daba 0, sin ella daba 1.

   Entonces no hay nada que agregar: alcanza con escalonar la animación que ya
   existe. Cada tarjeta arranca 70ms después de la anterior.

   Y así, de paso, desaparece el modo de falla grave: yo no toco NUNCA la
   opacidad de un producto. Si esto fallara, el peor caso es que entren todas
   juntas —como hasta ayer—, nunca un catálogo invisible.
   ============================================================ */

.bmv-firma {
	position: absolute;
	left: 0;
	right: 0;
	pointer-events: none;
	z-index: 0;
}

.bmv-firma--pie {
	top: 50%;
	transform: translateY(-50%);
	height: 190px;
	opacity: .1;
}

.bmv-firma--carrito {
	top: 42%;
	height: 150px;
	opacity: .13;
}

/*
 * El pie tiene que poder alojar el carril: es `static` por defecto.
 *
 * 🚨 ACÁ ESTABA `.bst-drawer__panel` TAMBIÉN, Y ROMPÍA EL CARRITO.
 *
 * El tema lo define así:
 *
 *     .bst-drawer__panel { position:absolute; top:0; right:0; bottom:0;
 *                          width:min(430px,100%); display:flex; flex-direction:column }
 *
 * Pisarle el `position` con `relative` anula los `top/right/bottom`: el panel
 * se iba a la IZQUIERDA y se encogía al alto de su contenido —556px de 901—,
 * en vez de ocupar el alto completo con el bloque de pago anclado abajo.
 *
 * Y sobraba: `position:absolute` YA es contenedor de posicionamiento para sus
 * hijos absolutos. No hacía falta tocar nada.
 */
footer.bst-foot {
	position: relative;
}

/* Y el contenido queda por encima del tiburón. */
footer.bst-foot > *:not(.bmv-firma) {
	position: relative;
	z-index: 1;
}

.bst-new > *:nth-child(2),
.bst-grid > *:nth-child(2) {
	animation-delay: 70ms;
}

.bst-new > *:nth-child(3),
.bst-grid > *:nth-child(3) {
	animation-delay: 140ms;
}

.bst-new > *:nth-child(4),
.bst-grid > *:nth-child(4) {
	animation-delay: 210ms;
}

.bst-new > *:nth-child(5),
.bst-grid > *:nth-child(5) {
	animation-delay: 280ms;
}

.bst-new > *:nth-child(6),
.bst-grid > *:nth-child(6) {
	animation-delay: 350ms;
}

.bst-new > *:nth-child(7),
.bst-grid > *:nth-child(7) {
	animation-delay: 420ms;
}

.bst-new > *:nth-child(8),
.bst-grid > *:nth-child(8) {
	animation-delay: 490ms;
}

.bst-new > *:nth-child(9),
.bst-grid > *:nth-child(9) {
	animation-delay: 560ms;
}


/* ============================================================
   39. EL CAJÓN DEL CARRITO, DEBAJO DE LA BARRA DE WORDPRESS
   ============================================================

   El cajón es `position:fixed; inset:0`. Cuando hay sesión iniciada, WordPress
   empuja la página con `html{margin-top:32px}` para hacerle lugar a su barra…
   pero un elemento fijo no se entera de ese margen: se planta contra el borde
   real de la ventana y la barra le tapa los primeros 32px — justo donde están
   el logo y el botón CERRAR.

   Sólo lo sufre quien administra el sitio; el cliente nunca ve la barra. Pero
   el que administra es el que más veces abre ese cajón.

   Los 46px del segundo caso no son un número inventado: es el alto que toma la
   barra de WordPress abajo de 783px, donde pasa a dos líneas.
   ============================================================ */

body.admin-bar .bst-drawer {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .bst-drawer {
		top: 46px;
	}
}


/* ============================================================
   40. EL TELÉFONO: DOS TARJETAS, INSTAGRAM GRANDE Y LOCALES QUE SE FUNDEN
   ============================================================

   Medido a 390px, que es un teléfono común:

     · Los más elegidos → dos columnas de 174px, la foto del tamaño de una
       estampilla y sin forma de ver el resto.
     · Instagram → cuatro columnas en UNA fila: cuadraditos de ~85px.
     · Locales → tres tarjetas apiladas de 269px cada una.

   Todo va dentro de `@container (max-width:700px)`, el mismo corte que usa el
   tema para apilar. En escritorio no cambia nada.

   ── DOS TARJETAS POR VEZ ──

   `46cqw` cada una: entran dos enteras y asoma un pedazo de la tercera. Ese
   pedazo es lo que le avisa al dedo que hay más al costado — con dos justas y
   nada asomando, la tira parece terminada y nadie desliza.

   ── INSTAGRAM ──

   Cuatro fotos en 2×2 en vez de cuatro en fila: mismo espacio, cada una cuatro
   veces más grande, y siguen cuadradas. El corte pasa a la quinta (en
   escritorio es la novena, ver bloque 33).

   ── LOCALES: FUNDIDO ──

   Los tres ocupan la MISMA celda (`grid-area:1/1`), así el alto es el de la
   tarjeta más alta y no salta al cambiar. Se ve la que tenga `.bmv-on` y las
   otras se apagan.

   🚨 Esa clase la pone el JavaScript. Si estas reglas se aplicaran sin que él
   corra, las tres quedarían invisibles y la sección en blanco. Por eso todo
   cuelga de `.bmv-carrusel--fundido`, que TAMBIÉN la pone el JavaScript, y
   recién despues de haber marcado la primera. Sin guion no hay modificador, y
   sin modificador el tema se dibuja como siempre.

   `visibility` ademas de `opacity` para que las apagadas no reciban clics ni
   las lea un lector de pantalla.
   ============================================================ */

@container (max-width: 700px) {

	/* --- Los más elegidos: dos por vez --- */
	.bmv-carrusel--elegidos .bst-grid {
		grid-auto-flow: column;
		grid-template-columns: none;
		grid-auto-columns: 46cqw;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		scroll-behavior: smooth;
	}

	.bmv-carrusel--elegidos .bst-grid > * {
		scroll-snap-align: start;
	}

	.bmv-carrusel--elegidos .bst-grid::-webkit-scrollbar {
		display: none;
	}

	/* --- Instagram: cuatro grandes, en cuadrado --- */
	.bst-ig {
		grid-template-columns: repeat(2, 1fr);
	}

	.bst-ig #sb_instagram #sbi_images .sbi_item:nth-child(n + 5) {
		display: none;
	}

	/* --- Locales: uno por vez, fundiéndose --- */
	.bmv-carrusel--fundido .bst-stores {
		display: grid;
		grid-template-columns: 1fr;
	}

	.bmv-carrusel--fundido .bst-stores > * {
		grid-area: 1 / 1;
		opacity: 0;
		visibility: hidden;
		transition: opacity .55s var(--bst-ease), visibility .55s;
	}

	.bmv-carrusel--fundido .bst-stores > .bmv-on {
		opacity: 1;
		visibility: visible;
	}

	/* Pastillas un poco más chicas: en 390px una de 44 se come el 11% del ancho. */
	.bmv-carrusel--elegidos .bmv-carrusel__nav,
	.bmv-carrusel--locales .bmv-carrusel__nav {
		width: 38px;
		height: 38px;
	}

	.bmv-carrusel--elegidos .bst-strip__nav--prev,
	.bmv-carrusel--locales .bst-strip__nav--prev {
		left: 4px;
	}

	.bmv-carrusel--elegidos .bst-strip__nav--next,
	.bmv-carrusel--locales .bst-strip__nav--next {
		right: 4px;
	}
}

/* Los puntitos: en fundido no hay barra de scroll que diga dónde estás. */
.bmv-puntos {
	display: flex;
	justify-content: center;
	gap: 7px;
	margin-top: 16px;
}

.bmv-punto {
	width: 7px;
	height: 7px;
	padding: 0;
	border: 0;
	border-radius: var(--bst-pill);
	background: rgba(0, 0, 0, .18);
	cursor: pointer;
	transition: background .3s var(--bst-ease), transform .3s var(--bst-ease);
}

.bmv-punto.is-on {
	background: var(--bst-black);
	transform: scale(1.25);
}

/*
 * ⚠️ En escritorio estas dos NO son carrusel: siguen siendo la grilla del tema.
 * Las flechas y los puntitos existen igual en el marcado —los crea el mismo
 * guion— así que hay que esconderlos, o quedan flotando sobre algo que no se
 * mueve.
 */
@container (min-width: 701px) {
	.bmv-carrusel--elegidos .bmv-carrusel__nav,
	.bmv-carrusel--locales .bmv-carrusel__nav,
	.bmv-carrusel--locales .bmv-puntos {
		display: none;
	}
}


/* ============================================================
   41. EL PIE, MÁS CORTO EN EL TELÉFONO
   ============================================================

   Medido a 390px: el pie ocupaba 749px de una pantalla de 844. Casi una
   pantalla entera de links para terminar de bajar la portada.

   El grueso no era el diseño sino el apilado: las CUATRO columnas de enlaces
   —Tienda, Ayuda, Locales, Contacto— una debajo de la otra sumaban 465px ellas
   solas (79 + 143 + 100 + 57 más las separaciones), en un ancho de 358px donde
   sobraba lugar de costado.

   Van de a dos. Cada fila mide lo que la columna más alta del par, así que
   465px pasan a ~250: unos 210px menos, sin sacar un solo enlace ni achicar
   una sola letra. Nadie pierde nada, sólo deja de haber aire vertical.

   El bloque legal también se comprime: el copyright y los dos enlaces se
   acomodan en la misma línea cuando entran, en vez de uno por renglón.

   ⚠️ Sólo en `@container (max-width:700px)`. En escritorio las cuatro columnas
   en fila están bien y no se tocan.
   ============================================================ */

@container (max-width: 700px) {
	.bst-foot__cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: clamp(20px, 5cqw, 32px) clamp(14px, 4cqw, 24px);
	}

	.bst-foot__legal {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 8px 16px;
		text-align: center;
	}
}


/* ============================================================
   42. LA FRANJA DE BENEFICIOS EN EL TELÉFONO
   ============================================================

   Dos cosas distintas se veían mal, y la segunda era la que molestaba.

   ── LAS RAYAS ──

   El tema le pone borde arriba y abajo con `--bst-dline`, que es
   `rgba(255,255,255,.13)` — BLANCO al 13%. La franja es negra (#0b0b0b), así
   que quedaban dos rayas claras cortando el negro. En escritorio la franja es
   ancha y esas líneas la enmarcan bien; en el teléfono sólo cortan.

   ── EL DEGRADADO BLANCO (esto era lo feo) ──

   En móvil la franja se convierte en marquesina y el tema le pone una máscara:

       -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 42px,
                                           #000 calc(100% - 42px), transparent 100%)

   La intención es buena: que el texto que entra y sale no se corte de golpe.
   Pero una máscara no distingue texto de fondo — desvanece TODO, incluido el
   negro de la franja. Y detrás está el `body`, que es blanco. Resultado: 42px
   de degradado blanco en cada punta, como si la franja estuviera despintada.

   🚨 Lo correcto en teoría sería mover el negro a un elemento de arriba que la
   máscara no toque, y dejar la máscara desvaneciendo sólo el contenido. No se
   pudo: el padre es un `div` de Elementor y no hubo forma de pintarlo desde acá
   —probado con selector directo y con `:has()`, ninguno llegó—. Y masquear el
   riel de adentro tampoco sirve: mide 1785px, así que el `calc(100% - 42px)`
   caería a un metro de la pantalla.

   Así que se saca la máscara. El texto entra y sale con corte limpio en vez de
   desvanecerse. Se pierde un detalle fino, pero se gana no tener dos manchas
   blancas: el degradado sobre negro no se leía como un efecto, se leía como un
   defecto.
   ============================================================ */

@container (max-width: 700px) {
	.bst-perks-wrap {
		border-top: 0;
		border-bottom: 0;
		-webkit-mask-image: none;
		mask-image: none;
	}
}


/* ============================================================
   43. EL PIE: MENOS COSAS, Y LAS COLUMNAS PAREJAS
   ============================================================

   Catorce enlaces en cuatro columnas, y repartidos 3 / 6 / 3 / 2. La de AYUDA
   medía el doble que sus vecinas y desbalanceaba la fila entera — ése era el
   problema de fondo, más que la cantidad.

   Se sacan TRES de esa columna, y ninguno por capricho: los tres estaban de
   más.

     1. «Guía de talles» → apuntaba a /como-comprar/, EXACTAMENTE el mismo
        destino que «Cómo comprar» de la columna de al lado. No existe una
        página de talles (verificado: /guia-de-talles/ y /talles/ dan 404), así
        que el tema la usaba de reemplazo. Un enlace que promete una cosa y
        lleva a otra es peor que no tenerlo.

     2. «Términos» → ya está abajo, en la línea legal, como «TÉRMINOS Y
        CONDICIONES». El mismo enlace dos veces en el mismo pie.

     3. «Contacto» → la columna CONTACTO, tres al costado, ya ofrece WhatsApp e
        Instagram, que es por donde escribe la gente de verdad.

   Quedan 11 enlaces reales repartidos 3 / 3 / 3 / 2. Ninguna página se vuelve
   inalcanzable: las tres siguen llegándose desde otro lado del mismo pie.

   ⚠️ Se esconden con CSS y no se borran del tema. Si mañana se quiere alguno de
   vuelta —o aparece una página de talles de verdad— se saca su línea de acá y
   vuelve solo. Los `nth-of-type` van sobre la columna 2, en el orden en que el
   tema los imprime.
   ============================================================ */

.bst-foot__cols > div:nth-child(2) > a:nth-of-type(1),
.bst-foot__cols > div:nth-child(2) > a:nth-of-type(5),
.bst-foot__cols > div:nth-child(2) > a:nth-of-type(6) {
	display: none;
}


/* ============================================================
   44. EL PIE EN EL TELÉFONO: APRETAR SIN SACAR
   ============================================================

   Medido a 390px, el pie eran 519px repartidos así:

       arriba (newsletter) ... 185px   ← 106 de contenido, 79 de aire
       columnas ............... 234px
       legal ................... 100px  ← 63 de contenido, 37 de relleno

   Toda la grasa estaba en el newsletter y en el legal. Las columnas NO: sus
   enlaces ya son de 12,5px con interlineado 14,4 y los títulos de 9px. Probé
   achicarlos y salió al revés —el 13,5px que puse era MÁS grande que el 12,5
   que ya tenían, y el bloque creció de 234 a 274—. Ahí no hay nada que ganar
   sin sacar enlaces.

   Lo que sí sobraba:

     · El newsletter usaba 19px de relleno arriba y abajo más separaciones
       grandes entre logo, título y campo.
     · El subtítulo «Nuevos ingresos, reposiciones y Bubba Sale antes que
       nadie.» repite lo que ya dice el título en mayúsculas justo arriba.
       Se esconde sólo en el teléfono; en escritorio, donde hay lugar de sobra,
       se queda.
     · El legal tenía 28px de relleno y tipografía de 15px para tres renglones
       de letra chica.

   Quedan 479px. Los 40 que faltan salen sin perder un solo enlace ni el
   formulario de suscripción.

   ⚠️ De acá para abajo ya no se puede apretar: hay que SACAR. Los dos únicos
   bloques con volumen son los locales (−43px, pero ya están completos en la
   sección «Probate todo antes de comprar» de la portada) y el newsletter
   (−153px, pero es la única captura de mails del sitio). Esa decisión es de
   Gabriel, no mía.
   ============================================================ */

@container (max-width: 700px) {
	.bst-foot__top {
		padding-top: 24px;
		padding-bottom: 20px;
		gap: 12px;
	}

	.bst-foot__news > *:nth-child(2) {
		display: none;
	}

	.bst-foot__cols {
		gap: 18px 16px;
	}

	/*
	   Se aprieta un poco mas que en agosto porque el bloque crecio: al pie le
	   entraron dos datos OBLIGATORIOS —el enlace a Defensa del Consumidor y la
	   identificacion del vendedor con CUIT— que la Resolucion 424/2020 exige y
	   que antes no estaban.

	   Medido a 390px: el bloque paso de 93 a 196px. Acortando la etiqueta de
	   Defensa y con este espaciado baja a 157, y el pie completo de 582 a 543.

	   ⚠️ No se puede volver a los 479 de antes: esos 64px son contenido que por
	   ley tiene que estar. Se recupera lo que se puede y se dice cuanto.
	*/
	.bst-foot__legal {
		padding-top: 8px;
		padding-bottom: 12px;
		gap: 4px 12px;
		font-size: 12px;
	}
}


/* ============================================================
   45. EL PIE, ACOMODADO
   ============================================================

   Dos arreglos sobre lo que se veía en la captura del teléfono.

   ── a) El botón de subir dejaba de tapar el legal ──────────

   La mitad del trabajo está en inc/pie.php, que marca el <body> cuando el
   bloque legal entra en pantalla. Acá sólo se apaga la pastilla.

   Gana por especificidad sobre `.bst-top.is-on` del tema —(0,2,1) contra
   (0,2,0)— sin pisarle la clase, así que el tema sigue mandando en cuándo
   aparece y este bloque sólo manda en cuándo estorba.

   Se apaga con `visibility` además de `opacity` para que no quede una trampa
   invisible de 50×50 sobre los enlaces, y con `pointer-events` por si algún
   navegador se hace el distraído con la visibilidad heredada.

   ── b) Los enlaces legales, centrados de verdad ────────────

   El bloque legal ya tenía `justify-content:center`, pero eso centra a sus DOS
   hijos —el «© 2026…» y un <div> con los enlaces adentro—, y ese div ocupa el
   ancho completo, así que centrarlo no lo mueve. Los cuatro enlaces de adentro
   se acomodaban con `justify-content:normal`, o sea pegados a la izquierda:

       Términos y condiciones    Política de privacidad
       Botón de arrepentimiento    ARGENTINA · ARS
       ↑ arrancaban en x=18, contra un © que arrancaba en x=94

   Centrar el div de adentro es lo que alinea las tres líneas entre sí. El hueco
   de 20px se baja a 16 porque, ya centrado, se lee como separación y no como
   margen perdido.
   ============================================================ */

/*
   Sin recorte de ancho A PROPOSITO: el estorbo no es cosa del telefono. El
   boton esta fijo a la VENTANA —siempre en x 18–68— mientras que el legal
   arranca donde lo deje el tema. Medido:

       1280px .... el renglon empieza en x 51  → le come el «© 20»
        900px .... x 36                        → peor
        440px .... x 18                        → tapa los enlaces enteros

   En escritorio el tema separa el «©» de los enlaces, asi que lo que queda
   debajo del boton es la fecha y no el «Boton de arrepentimiento»: molesta
   menos, pero se pisa igual. Una sola regla para los dos casos.
*/
body.bmv-pie-a-la-vista .bst-top {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/*
   La centrada, en cambio, SI es solo del telefono: de 701px para arriba el
   tema acomoda el legal a su manera —el «©» de un lado y los enlaces del
   otro— y eso es parte del diseño aprobado. No se toca.
*/
@container (max-width: 700px) {
	.bst-foot__legal > div {
		justify-content: center;
		gap: 6px 16px;
	}
}


/* ============================================================
   46. EL MENÚ DEL TELÉFONO, COMO EL DISEÑO
   ============================================================

   El panel lo dibuja el TEMA (`template-parts/header/mobile-nav.php`) y ya
   trae casi todo bien: cabecera con lupa y carrito, buscador, categorías con
   ícono y flechita, enlaces de ayuda. Lo que sigue son las diferencias contra
   la captura aprobada, y nada más que eso. El reacomodo del DOM está en
   inc/menu.php; acá está cómo se ve.

   ── Las placas ─────────────────────────────────────────────

   Venían apiladas, cada una a lo ancho, con ícono a la izquierda, dos
   renglones de texto y flechita a la derecha. A media pantalla ese contenido
   no entra: se van el ícono y la flechita, y el texto pasa a dos líneas
   cortas, una arriba de la otra.

   ⚠️ `span:nth-child(2)` del tema sigue funcionando aunque el hijo 1 esté
   escondido: `nth-child` cuenta posición en el HTML, no lo que se ve. Por eso
   alcanza con `display:none` y no hay que reordenar nada.

   ── Los rubros ─────────────────────────────────────────────

   El tema le pone un ícono de 19px a cada categoría. En el diseño no están:
   el nombre arranca contra el margen, igual que el rótulo CATEGORÍAS de
   arriba, y la única marca a la derecha es la flechita. Se esconde el primer
   svg de cada renglón — el segundo, la flechita, se queda.

   ── El pie de ayuda ────────────────────────────────────────

   Era una lista vertical de siete renglones de 17px con línea divisoria, uno
   de ellos WhatsApp. Ahora: WhatsApp arriba como botón blanco —el mismo que
   la portada usa en «Escribinos por WhatsApp»— y abajo cuatro enlaces chicos
   en dos columnas, sin líneas.

   🚨 `.bst-mnav__list a` del tema trae `border-bottom`, `font-size:17px` y
   `font-weight:600`. Los tres hay que apagarlos explícitamente: heredar no
   alcanza, porque son declaraciones directas sobre el mismo elemento.
   ============================================================ */

/*
   🚨 VA CON EL PANEL ADELANTE, Y NO ES ADORNO.
   
   Suelta —`.bmv-menu__oculto`, (0,1,0)— pierde: el tema declara
   `.bst-mnav__list a{display:flex}`, que con (0,1,1) le gana. La clase se
   aplicaba bien y los enlaces seguían viéndose igual; lo comprobé leyendo el
   `display` computado, que decía `flex` con la clase puesta.
   
   Con el panel adelante son (0,2,0) y gana por el segundo número. Nada de
   `!important`: acá alcanza con contar.
*/
.bst-mnav__panel .bmv-menu__oculto {
	display: none;
}

/* ---------- placas lado a lado ---------- */

.bmv-menu__placas {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-bottom: 22px;
}

.bmv-menu__placas .bst-mnav__promo {
	align-items: flex-start;
	gap: 0;
	min-height: 78px;
	margin-bottom: 0;
	padding: 15px 14px;
}

.bmv-menu__placas .bst-mnav__ico,
.bmv-menu__placas .bst-mnav__promo > svg {
	display: none;
}

.bmv-menu__placas .bst-mnav__promo > span:nth-child(2) {
	gap: 7px;
}

.bmv-menu__placas .bst-mnav__promo em {
	font: 500 10px/1.3 Archivo, sans-serif;
	letter-spacing: .13em;
	text-transform: uppercase;
}

/* ---------- rubros sin ícono ---------- */

.bst-mnav__list a > svg:first-child {
	display: none;
}

/* ---------- WhatsApp como botón ---------- */

.bmv-menu__wa {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 4px 0 16px;
	padding: 15px 20px;
	border-radius: 999px;
	background: #fff;
	color: #0b0b0b;
	font: 600 13px/1 Archivo, sans-serif;
	letter-spacing: .02em;
}

.bmv-menu__wa > svg:last-child {
	display: none;
}

/* ---------- ayuda en dos columnas ---------- */

.bmv-menu__ayuda {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 14px;
	padding-top: 0;
}

.bmv-menu__ayuda a {
	padding: 0;
	border-bottom: 0;
	color: rgba(255, 255, 255, .62);
	font-weight: 400;
	font-size: 12px;
	letter-spacing: 0;
}

.bmv-menu__ayuda a > svg {
	display: none;
}


/* ============================================================
   47. LAS PLACAS DEL MEGA MENÚ: LA FOTO SOLA, Y EL DESTINO AL PASAR
   ============================================================

   ── Lo que había ───────────────────────────────────────────

   Las fotos que subió Gabriel ya vienen compuestas —dicen NUEVOS INGRESOS y
   BUBBA SALE · HASTA 30% OFF— y el tema les dibujaba encima SU propia versión
   del mismo texto. Todo escrito dos veces. Además las tapaba con un degradado
   de `rgba(11,11,11,.9)`: noventa por ciento de negro justo sobre el borde
   izquierdo, que es donde estas fotos tienen el texto. Eso era lo que las
   hacía verse lavadas — no era opacidad de la imagen, era una cortina.

   ── El problema que quedaba ────────────────────────────────

   Sacando todo el texto la placa quedó limpia, pero **muda**: una foto sin
   nada que diga a dónde lleva. Y una foto que no parece un botón no se toca.
   Ahí es donde se pierden las visitas: no en el precio, en la duda.

   ── Lo que hace ahora ──────────────────────────────────────

   En reposo, la foto sola: es lo que se pidió y es lo que mejor se ve.
   Al acercar el mouse, tres cosas a la vez, en 450ms:

     · la foto se acerca un 4,5%
     · vuelve la cortina, pero suave y sólo abajo
     · aparece «VER NUEVOS →» / «IR A LA SALE →» subiendo 8px

   Limpio cuando mirás, explícito cuando vas a hacer clic. La duda se contesta
   justo en el momento en que aparece.

   ── Por qué estos números y no otros ───────────────────────

   🚨 NO ES UN GESTO NUEVO: es el que ya usa todo el sitio. El tema acerca la
   foto en las tarjetas (1.06), en la tira de rubros (1.05), en Instagram
   (1.06), en los locales (1.05) y en los estilos (1.06). Un movimiento
   distinto acá se leería como que esta parte la hizo otro.

   `1.045` y no `1.06` porque la placa es MUCHO más grande: el mismo
   porcentaje sobre 357px se ve más brusco que sobre una tarjeta de 186px. Se
   busca que el movimiento se PERCIBA igual, no que el número sea igual.

   450ms y no los 800 que usan los estilos: en el menú estás de paso, decidiendo
   a dónde ir. Un movimiento lento ahí se siente trabado, no elegante.

   `cubic-bezier(.16,1,.3,1)` es el easing del tema — arranca rápido y frena
   suave, que es como se mueve algo con peso.

   ── Lo que NO se anima, a propósito ────────────────────────

   Los precios, los descuentos y la franja de beneficios (envío, cuotas,
   cambios) se quedan quietos. Un número que se mueve se lee como un truco, y
   la barra de garantías vale justamente porque parece un dato y no un aviso.
   En una marca en blanco y negro, la contención ES la señal de que es cara.

   ── Detalles que hacen falta ───────────────────────────────

   ⚠️ El texto NO se borra, se esconde a 1px. La placa es un `<a>` con `alt`
   vacío: sin texto el enlace queda MUDO para un lector de pantalla y para
   Google, porque el texto de las fotos está quemado en el pixel.

   ⚠️ La llamada se saca de ese ocultamiento —por eso el `:not()`— y se maneja
   con `opacity`, que sí deja el texto en el árbol de accesibilidad.

   ⚠️ `:focus-visible` hace lo mismo que `:hover`: quien navega con el teclado
   tiene que ver lo mismo que quien usa el mouse.

   ⚠️ Y todo el movimiento va dentro de `prefers-reduced-motion: no-preference`.
   A quien pidió menos movimiento le aparece el texto igual, sin desplazamiento
   ni acercamiento: la información no se negocia, el adorno sí.
   ============================================================ */

.bst-mega .bst-mega__tile > span:not(.bst-mega__cta),
.bst-mega .bst-mega__tile > strong {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* La cortina del tema vuelve, pero apagada y sólo en el pie de la foto. */
.bst-mega .bst-mega__tile::before {
	display: block;
	opacity: 0;
	background: linear-gradient(180deg, transparent 42%, rgba(11, 11, 11, .8) 100%);
}

.bst-mega .bst-mega__tile > .bst-mega__cta {
	position: absolute;
	left: clamp(16px, 1.7cqw, 22px);
	bottom: clamp(16px, 1.7cqw, 22px);
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip-path: none;
	opacity: 0;
}

.bst-mega .bst-mega__tile:hover::before,
.bst-mega .bst-mega__tile:focus-visible::before,
.bst-mega .bst-mega__tile:hover > .bst-mega__cta,
.bst-mega .bst-mega__tile:focus-visible > .bst-mega__cta {
	opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
	.bst-mega .bst-mega__tile img {
		transition: transform .55s var(--bst-ease);
	}

	.bst-mega .bst-mega__tile:hover img,
	.bst-mega .bst-mega__tile:focus-visible img {
		transform: scale(1.045);
	}

	.bst-mega .bst-mega__tile::before {
		transition: opacity .45s var(--bst-ease);
	}

	.bst-mega .bst-mega__tile > .bst-mega__cta {
		transform: translateY(8px);
		transition: opacity .45s var(--bst-ease), transform .45s var(--bst-ease);
	}

	.bst-mega .bst-mega__tile:hover > .bst-mega__cta,
	.bst-mega .bst-mega__tile:focus-visible > .bst-mega__cta {
		transform: none;
	}
}


/* ============================================================
   48. EL PRECIO CON TRANSFERENCIA, ADELANTE
   ============================================================

   La jerarquía estaba invertida. Medido antes de tocar:

       tarjeta:  lista $21.000 a 15px negrita   ·  transferencia $16.800 a 10px
       ficha:    lista $55.996 a 20px           ·  transferencia: no existía

   El número que el cliente NO va a pagar era el doble de grande que el que sí.
   Se da vuelta: manda el de transferencia, el de lista pasa a ser la
   referencia tachada. Es el mismo dato de siempre, contado al derecho.

   ── Sin color, a propósito ─────────────────────────────────

   Se evaluó rojo y verde y se eligió jerarquía pura. Bubba es blanco y negro:
   meter un color de oferta es lo que abarata una marca cara, y el rojo en
   indumentaria se lee «liquidación». Sobre fondo blanco, negro a 26px CONTRA
   gris tachado a 12px tiene más contraste real que cualquier rojo — y no le
   toca la estética a nadie.

   ── Lo que se muestra y lo que no ──────────────────────────

   ⚠️ Las cuotas se calculan sobre el precio de LISTA, no sobre el de
   transferencia, porque pagando en cuotas no hay descuento. Son dos caminos
   distintos y mezclarlos sería mentir. Por eso la línea de cuotas queda
   asociada al precio tachado, no al grande.

   ⚠️ El sello dice «−20% TRANSFERENCIA» y no «20% OFF»: el signo menos y la
   palabra completa dicen QUÉ hay que hacer para conseguirlo. «OFF» a secas no
   le dice a nadie que tiene que pagar por transferencia.
   ============================================================ */

/* ---------- la tarjeta del listado y del home ---------- */

/*
   `.bst-card__info` ya es una columna flex, así que alcanza con mandar el
   precio de lista al final. No se toca el HTML: el orden de lectura para un
   lector de pantalla sigue siendo el del documento.
*/
.bst-card__prices {
	order: 1;
}

/*
   ⚠️ Va con `.bst-card` adelante y no suelta. El tema tiene
   `.bst-card--sm .bst-card__price{font-size:15px}` —(0,2,0)— y una regla de
   un solo nombre (0,1,0) le pierde. Se notaba raro: el gris y el tachado
   entraban, el tamaño no, porque esa regla del tema declara SOLO el tamaño.
*/
.bst-card .bst-card__price {
	font-size: 13px;
	font-weight: 500;
	color: var(--bst-mute, #6f6f6f);
}

.bst-card__transfer--chip {
	padding: 0;
	background: none;
	color: var(--bst-black, #0b0b0b);
	font-size: 9px;
	font-weight: 500;
	letter-spacing: .12em;
}

/*
   El monto y la palabra «TRANSF.» son dos cosas distintas dentro del mismo
   span —una etiqueta y un texto suelto—, así que se les da tamaño por
   separado: el número grande, la palabra como marca chica al lado.
*/
.bst-card__transfer--chip .woocommerce-Price-amount {
	margin-right: 5px;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -.02em;
}

/* ---------- la ficha ---------- */

/*
   El precio del tema pasa a ser la referencia: chico, gris y tachado. Su
   línea de cuotas se esconde porque el bloque nuevo la vuelve a decir, mejor
   compuesta y con el número en negrita.
*/
/*
   El bloque del tema se esconde ENTERO y los dos precios los dibuja el bloque
   nuevo. Es la única forma de ponerlos en el orden correcto —primero el grande,
   después el de tarjeta— sin tocar el orden del HTML del tema.

   🚨 Condicionado a `bmv-precio-listo`, que el JavaScript pone recién después
   de dibujar. Si el script no corre, esta regla no aplica y el precio del tema
   se ve como siempre. Una ficha sin precio sería mucho peor que una ficha con
   el precio viejo.
*/
.bst-pdp__price.bmv-precio-listo {
	display: none;
}

.bmv-precio {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 7px;
	margin-bottom: 4px;
}

.bmv-precio__grande {
	font: 700 26px/1 Archivo, sans-serif;
	letter-spacing: -.03em;
	color: var(--bst-black, #0b0b0b);
}

/* El «desde» de un producto variable no compite con el número. */
.bmv-precio__grande i {
	font: 400 13px/1 Archivo, sans-serif;
	font-style: normal;
	letter-spacing: 0;
	color: var(--bst-mute, #6f6f6f);
}

.bmv-precio__sello {
	padding: 6px 11px;
	border-radius: 999px;
	background: var(--bst-black, #0b0b0b);
	color: #fff;
	font: 600 9.5px/1 Archivo, sans-serif;
	letter-spacing: .14em;
}

/*
   El precio con tarjeta: legible de verdad, sin tachar y con su nombre al lado.
   No compite con el grande —14,5 contra 26— pero tampoco se pierde, que era
   justo el reclamo.
*/
.bmv-precio__tarjeta {
	display: flex;
	flex-direction: column;
	gap: 3px;
	font: 400 14.5px/1.3 Archivo, sans-serif;
	color: var(--bst-mute, #6f6f6f);
}

.bmv-precio__tarjeta b {
	font-weight: 600;
	color: var(--bst-black, #0b0b0b);
}

.bmv-precio__tarjeta i {
	font: 400 13px/1.3 Archivo, sans-serif;
	font-style: normal;
}

/*
   El tema YA mostraba el precio con transferencia en la ficha, en un recuadro
   gris más abajo: «$ 44.797 pagando por transferencia», a 15px. No lo vi en la
   primera pasada porque está afuera del bloque de precio. Ahora que el bloque
   nuevo lo dice más grande y con las cuotas, ese recuadro repetiría el mismo
   número dos veces.

   🚨 Se esconde CONDICIONADO a que el bloque nuevo exista: `bmv-precio-listo`
   se la pone el JavaScript recién después de dibujar. Si el script no corre
   —error, navegador viejo, lo que sea— la clase no aparece, el recuadro del
   tema sigue visible y no se pierde el dato. Esconderlo con una regla suelta
   sería apostar a que el JavaScript nunca falle.
*/
.bst-pdp__price.bmv-precio-listo ~ .bst-transfer-chip {
	display: none;
}


/* ============================================================
   49. LA PLACA DEL MEGA MENÚ SE PISABA CON LAS CATEGORÍAS
   ============================================================

   En una notebook la foto de «Nuevos ingresos» tocaba las palabras Remeras,
   Buzos, Sweaters. No era una impresión: medí el hueco entre el borde derecho
   de la placa y el texto del primer enlace, y de 1520px para abajo es NEGATIVO
   —o sea, se superponen de verdad—:

       1920 ....  45px
       1700 ....  43px
       1600 ....  19px   ← 1920 con 120% de escala, el caso reportado
       1500 ....  −5px
       1400 ....  −30px
       1280 ....  −60px

   ── Por qué ────────────────────────────────────────────────

   La placa tiene dos reglas del tema que juntas la vuelven rígida:

       .bst-mega__tile { aspect-ratio: 4/3; min-height: 268px }

   Con esa proporción, 268px de alto obligan a 268 × 4/3 = **357px de ancho
   mínimo**, y ese piso no baja nunca. Mientras tanto las columnas del medio sí
   se achican con el ancho de la ventana. Llega un punto donde la columna de la
   placa mide menos de 357 + 44 de márgenes, y la placa se desborda de su celda
   y se mete encima de los enlaces.

   Por eso el problema no aparece en un monitor grande y sí en una notebook: no
   es que «se vea apretado», es que a partir de cierto ancho hay superposición.

   ── El arreglo ─────────────────────────────────────────────

   Se le saca el piso de alto. Sin `min-height`, el ancho lo decide la columna
   —que es lo que corresponde en una grilla— y `aspect-ratio` calcula el alto a
   partir de ahí. La placa escala sola:

       1920 → 410x307     1500 → 307x230
       1700 → 356x267     1400 → 283x212
       1600 → 331x248     1280 → 255x192

   y el hueco hasta el texto queda CLAVADO en ~45px en todos los anchos.

   🚨 NO SE LA ESTIRA PARA LLENAR LA CELDA, y es a propósito. Probé
   `align-self:stretch` con `aspect-ratio:auto`: queda más prolijo el alto, pero
   la placa pasa a 410x221 —proporción 1,85— y `object-fit:cover` le come el
   28% de la foto. Gabriel subió esas fotos en 1448x1086 justamente para que
   entraran enteras en el 4:3. Estirarlas sería deshacer eso.

   `align-self:center` reparte el aire sobrante arriba y abajo por igual, que es
   lo único que hacía falta.
   ============================================================ */

.bst-mega .bst-mega__tile {
	min-height: 0;
	align-self: center;
}


/* ============================================================
   50. LA FOTO DE LOS LOCALES: MÁS ALTA, Y SIEMPRE LA MISMA FORMA
   ============================================================

   Se pidió "un poco más alta". Midiéndola apareció algo peor que el alto: el
   marco tiene ALTO FIJO, así que la proporción cambia en cada ancho de pantalla.

       1440px ... 429x210   (2.04)
       1280px ... 381x192   (1.98)
        900px ... 268x150   (1.78)
        390px ... 358x150   (2.39)

   Cuatro formas distintas para la misma foto. Y el cartel de relleno promete
   «1200 x 900», que es 1.33: cualquier foto que se suba con esa medida iba a
   entrar recortada, y recortada distinto en cada dispositivo.

   ── Por qué 3:2 y no 4:3 ───────────────────────────────────

   4:3 sería la que calza exacto con el 1200x900 que pide el cartel, pero sube
   la tarjeta de 349 a 461px — un 32% más alta, y lo que se pidió fue "un poco".

   3:2 es la proporción de una cámara de fotos, sube la tarjeta a 425 y le
   recorta apenas un 11% a una foto 4:3. En un local —una fachada, un
   interior— ese recorte no se lleva puesto nada; en una prenda sí, y por eso
   allá se respetó la proporción exacta.

   ⚠️ Para que entre sin recorte, las fotos de local van en **1200 x 800**.

   ⚠️ `height:auto` es obligatorio: sin eso el alto fijo del tema le gana a
   `aspect-ratio` y no cambia nada.
   ============================================================ */

.bst-store .bst-store__media {
	height: auto;
	aspect-ratio: 3 / 2;
}