/* =============================================================================
 * dm-catalog.css - Pegamento del catalogo ya migrado al design system (tramo 2).
 *
 * Mismo criterio que dm-shell.css: dm-tokens.css y dm-components.css se generan
 * desde el design system y NO se editan; este archivo SI se escribe a mano y
 * guarda lo que el design system no puede saber (el reparto de columnas de la
 * grilla por breakpoint, los sellos de esquina de la card, el aire interno).
 *
 * Se carga DESPUES de site.css / site-mobile.css para ganarle al CSS viejo que
 * todavia queda dando vueltas, y esta en el pre-cache de sw.js.
 *
 * Mobile primero: las reglas base son las de celular y los @media suben.
 * Todo con tokens var(--dm-*), nunca un hex a mano.
 * ============================================================================= */


/* ----------------------------------------------------------------------------
 * Grilla de productos
 *
 * El design system define .dm-product-grid como un grid con gap, pero NO cuantas
 * columnas: eso es decision de cada pantalla. Este es el reparto por defecto del
 * catalogo, pensado desde 320px.
 * -------------------------------------------------------------------------- */

/* Mobile y tablet: cantidad de columnas fija. Aca la grilla ocupa todo el ancho
   (la barra de filtros esta colapsada), asi que el viewport y el contenedor miden
   practicamente lo mismo y un @media alcanza. */
.dm-product-grid,
.dm-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* EL AIRE DE LOS BORDES ES EL DE PRODUCCION, MEDIDO. En www.delimart.com.ar la
   grilla del catalogo en telefono deja las cards a 19px del borde y a 8px entre
   si; la nuestra las dejaba a 15 y 16. Son 4px por lado, pero con el doble de
   separacion en el medio el conjunto se lee "pegado a los extremos" y por dentro
   suelto, que es justo al reves de lo que hace produccion.

   Los 4px salen de un padding en la grilla y no de un margen del contenedor
   porque el contenedor (.container de Bootstrap, 15px) lo comparten el titulo y
   la barra de filtros, que SI van a 15: alla el titulo tambien arranca antes que
   las cards. La card sigue midiendo 220.6px, igual que en produccion.

   Solo hasta 575px: de ahi para arriba la grilla pasa a tres columnas y el
   reparto es otro. */
@media (max-width: 575.98px) {
    .dm-product-grid {
        gap: var(--dm-space-2);
        padding: 0 4px;
    }
}

/* Los mosaicos de categoria del home comparten el reparto con la grilla de
   productos, pero no la clase: son otra cosa y antes colgaban de .product-list,
   que les traia encima reglas del listado que no les corresponden. */
.dm-category-grid {
    display: grid;
    gap: var(--dm-space-3);
}

@media (min-width: 576px) {
    .dm-product-grid,
    .dm-category-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Escritorio: las columnas salen del ancho DEL CONTENEDOR, no del viewport.
   Esto no es un detalle: en /search y en las categorias la grilla convive con la
   barra de filtros (~350px), asi que a 1442px de viewport el contenedor mide
   ~1050. Con un "repeat(5, 1fr)" por @media entraban 5 columnas de 189px y los
   nombres se cortaban, mientras que en las paginas sin filtros esas mismas 5
   quedaban holgadas. Con auto-fill cada grilla resuelve sola: ~4 columnas donde
   hay filtros y ~5 donde no. */
@media (min-width: 992px) {
    .dm-product-grid,
    .dm-category-grid {
        grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
        gap: var(--dm-space-4);
    }
}


/* ----------------------------------------------------------------------------
 * Banners promocionales del home (Cms/SpaceBarWidget)
 *
 * Estaba como <style> embebido en la vista del widget. El widget se renderiza
 * CUATRO veces en el home, asi que esas ~48 lineas de CSS venian repetidas cuatro
 * veces en el HTML de cada carga. Aca se sirven una vez y se cachean.
 *
 * El <script> del widget SI se queda inline: usa un id unico por instancia para
 * inicializar su propio Swiper.
 * -------------------------------------------------------------------------- */

/* Grilla compacta de escritorio: tres por fila. */
.promo-grid {
    margin-left: -8px;
    margin-right: -8px;
}

.promo-col {
    padding-left: 8px;
    padding-right: 8px;
}

/* Tarjeta de alto uniforme: la proporcion 2:1 la fija el ::before. */
.promo-card {
    position: relative;
    display: block;
    border-radius: var(--dm-radius-card);
    overflow: hidden;
    box-shadow: var(--dm-shadow-card);
}

.promo-card::before {
    content: "";
    display: block;
    padding-top: 50%;
}

.promo-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* En mobile van en swiper, dejando asomar la siguiente. */
.promo-swiper .swiper-slide {
    width: auto;
}


/* ----------------------------------------------------------------------------
 * Sellos de esquina de la card
 *
 * El design system trae .dm-product-card__ribbon, que es un cartel de TEXTO en la
 * esquina de arriba a la izquierda. Los de DeliMart son dos imagenes y en las dos
 * esquinas: el sello BBB a la izquierda y el de pronto-consumo a la derecha. Eso
 * el DS no lo modela, asi que va aca.
 *
 * Antes median "18%" del ancho de la card, o sea que crecian con la card y en
 * desktop quedaban enormes. Ahora tienen medida propia.
 * -------------------------------------------------------------------------- */

.dm-product-card__badges {
    position: absolute;
    top: var(--dm-space-2);
    left: var(--dm-space-2);
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--dm-space-1);
    pointer-events: none;
}

.dm-product-card__badges--end {
    left: auto;
    right: var(--dm-space-2);
    align-items: flex-end;
}

.dm-product-card__badges img {
    width: 34px;
    height: auto;
}

@media (min-width: 992px) {
    .dm-product-card__badges img {
        width: 40px;
    }
}


/* ----------------------------------------------------------------------------
 * Textos de la card que el design system no define
 *
 * .dm-product-card__tag reemplaza a .its-on-sale (el rojo de "esta en promo" y el
 * sello BBB) y .dm-product-card__expiration a .expiration. Los dos valores
 * estaban en hex y calzan exacto con tokens: #ff1717 = --dm-danger-alt y
 * #747575 = --dm-text-muted.
 * -------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------
 * LA FOTO DEL PRODUCTO, A TODO EL ANCHO
 *
 * El componente ProductCard del design system trae
 *     .dm-product-card__image { width: 40%; max-width: 120px }
 * heredado del viejo .card-img-top. Medido en la grilla: en una card de 254px la
 * foto salia de 89x89, o sea el 35% del ancho, adentro de una caja de 132px de alto.
 * En un supermercado la foto es lo que identifica el producto de un vistazo, y a ese
 * tamano no destaca.
 *
 * Ahora ocupa el ancho completo de la card. La caja es CUADRADA porque las fotos del
 * catalogo lo son —las que cargan miden 1080x1080— asi que la imagen la llena de
 * punta a punta sin franjas a los costados. El template del design system dibuja 4/3,
 * que con fotos cuadradas dejaria ~28px de aire por lado.
 *
 * Se queda object-fit: contain: si alguna foto no fuera cuadrada, se ve entera. Antes
 * que recortarle el envase a un producto, prefiero el aire.
 *
 * El aspect-ratio ademas fija el alto ANTES de que la imagen cargue, asi que la
 * grilla no salta cuando entran las fotos con lazyload.
 *
 * Va aca y no en dm-components.css, que se regenera desde claude.ai/design.
 * -------------------------------------------------------------------------- */

.dm-product-card__image {
    width: 100%;
    max-width: none;
    aspect-ratio: 1;
    height: auto;
    object-fit: contain;
}

.dm-product-card__tag {
    color: var(--dm-danger-alt);
    font-weight: var(--dm-weight-bold);
    font-size: 13px;
    line-height: 1.2;
}

.dm-product-card__expiration {
    color: var(--dm-text-muted);
    font-weight: var(--dm-weight-medium);
    font-size: var(--dm-text-xs);
}

/* El pie de la card lo llena CartBadgeProd (o el boton de "Seleccionar Peso"):
   se le da el ancho y que quede centrado. */
.dm-product-card__footer > * {
    width: 100%;
}

/* CartBadgeProd trae su propio .card-footer porque tambien lo invoca ProductDetail,
   donde ese wrapper si hace falta. Dentro de la card de producto queda anidado en
   .dm-product-card__footer y sumaba padding dos veces. */
.dm-product-card__footer > .card-footer {
    padding: 0;
    border: none;
}


/* ----------------------------------------------------------------------------
 * Selector de cantidad de la card (QuantityStepper)
 *
 * El control que reemplaza a "Agregar" cuando el producto ya esta en el carrito.
 * Estaba armado con una .row de Bootstrap y tres col-md-4: el numero quedaba
 * pegado al borde izquierdo de su columna en vez de centrado, y la .row desbordaba
 * su contenedor por los margenes negativos. Por eso se veia desfasado.
 *
 * Ahora usa .dm-qty del design system, con un modificador propio: el DS pinta el
 * stepper blanco con borde, pero aca el relleno naranja avisa que el producto YA
 * esta en el carrito, que es una senal util que conviene conservar.
 * -------------------------------------------------------------------------- */

/* EL PIE DE LA CARD OCUPA TODO EL ANCHO, en sus dos estados.
   Medido en mobile sobre una card de 220px: el boton "Agregar" salia en 87px y el
   selector de cantidad en 66, o sea ~22px por boton. Muy por debajo del minimo
   comodo para el dedo, y ademas los dos estados del mismo lugar se veian de
   tamanos distintos. De paso se matan los margenes negativos de la .row interna,
   que hacian que el contenido midiera mas que su contenedor (57 contra 87).

   OJO CON EL SELECTOR: los <form class="inline"> del selector de cantidad son
   hermanos dentro del mismo flex, asi que ponerles width:100% a todos rompe la
   fila (cada uno se lleva el ancho entero y el "+" se va fuera de la card). Por eso
   la cadena de ancho completo se ancla en ".col-12", que solo existe en el estado
   "Agregar". */
.dm-product-card__footer > .card-footer,
.dm-product-card__footer > .card-footer > [id^="carrito"],
.dm-product-card__footer .contenido-carrito,
.dm-product-card__footer .contenido-carrito > .row,
.dm-product-card__footer .contenido-carrito .col-12,
.dm-product-card__footer .contenido-carrito .col-12 .inline,
.dm-product-card__footer .contenido-carrito .col-12 .inline > .card,
.dm-product-card__footer .btn-add-cart,
.dm-product-card__footer .btn-select {
    width: 100%;
    max-width: none;
}

.dm-product-card__footer .contenido-carrito > .row {
    margin-left: 0;
    margin-right: 0;
}

.dm-qty--cart {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border: none;
    border-radius: var(--dm-radius-sm);
    background: var(--dm-brand);
    overflow: hidden;
}

/* Los <form> son celdas del stepper: cada boton tiene que quedar dentro del suyo
   porque el JS lee los hidden con closest("form").

   BLANCO DE TOQUE: el ancho se lo damos a la CELDA y no al padding del boton.
   site.css y site-mobile.css le fijan el padding a .btn-minus-cart y
   .btn-add-cart-nuevo con selectores de cuatro clases, asi que pelear
   especificidad ahi es fragil; dimensionar la celda es estable. Sin esto los
   botones quedaban en 30px de ancho, incomodos para el dedo. */
.dm-qty--cart > form {
    display: flex;
    flex: 0 0 auto;
    min-width: 48px;
    margin: 0;
}

.dm-qty--cart > form > .dm-qty__button {
    width: 100%;
    min-height: 40px;
}

.dm-qty--cart .dm-qty__button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    padding: var(--dm-space-1) var(--dm-space-2);
    background: none;
    border: none;
    box-shadow: none;
}

.dm-qty--cart .dm-qty__button:hover {
    border: none;
    box-shadow: none;
}

/* La celda del numero se queda con el espacio del medio y lo centra. */
.dm-qty--cart .dm-qty__field {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: auto;
    line-height: 1;
}

.dm-qty--cart .badge-sea {
    color: var(--dm-text-on-brand);
    font-weight: var(--dm-weight-bold);
    font-size: var(--dm-text-base);
}




/* ============================================================================
 * POR QUE EL PIE DE LA CARD SE DESALINEABA "A CADA RATO" — agosto 2026
 *
 * El sintoma: en una fila de productos, una card quedaba con el boton/selector a
 * distinta altura o distinto ancho que sus vecinas. Se arreglaba solo al
 * recargar, y volvia a romperse al rato. Por eso parecia intermitente y sin
 * causa: no era una regla de CSS mal escrita, era que TRES caminos distintos
 * escriben el pie de la card y ninguno estaba de acuerdo con los otros.
 *
 * Medido en el navegador sobre /search, no deducido:
 *
 *   ESTADO                             clases del .contenido-carrito        display  alto
 *   vista CartBadgeProd (con stock)    contenido-carrito add-minus
 *                                      dm-qty dm-qty--cart                  flex      40px
 *   add-to-cart.js al tocar "Agregar"  contenido-carrito add-minus          block    110px
 *
 * 110 CONTRA 40. El JS inyecta los tres hijos del stepper pero solo agrega
 * `add-minus`: nunca agrega `dm-qty` ni `dm-qty--cart`, que son las que traen el
 * `display: flex`. Sin flex los tres hijos se apilan uno debajo del otro. Y como
 * el naranja NO viene del design system sino de una regla vieja de site.css
 * (`.product-list .card-footer .add-minus { background: #f58634 }`), el bloque
 * roto SIGUE VIENDOSE NARANJA: parece un stepper, mide como tres.
 *
 * Los otros dos caminos que tambien derivan:
 *
 *   · Al bajar la cantidad a 0, add-to-cart.js vuelve a poner el boton "Agregar"
 *     dentro del .contenido-carrito PERO NO LE SACA `add-minus`. O sea que el
 *     boton queda adentro de una caja que sigue pintada de naranja de stepper.
 *
 *   · main.js le corre matchHeight a `.product-list .card`. La card de producto
 *     ya no lleva `.card`... pero el marcado del boton "Agregar" que emite
 *     CartBadgeProd SI trae un `<div class="card">` adentro. Verificado en
 *     /search: quince elementos con `style="height: 40px"` escrito a mano por el
 *     plugin. Esas alturas se calculan una vez al cargar y NO se recalculan
 *     cuando el AJAX cambia el pie, asi que quedan viejas apenas alguien agrega
 *     o quita un producto.
 *
 * ----------------------------------------------------------------------------
 * EL ARREGLO, EN CAPAS, PARA QUE NO VUELVA A PASAR
 * ----------------------------------------------------------------------------
 * El problema de fondo no es ninguno de los tres bugs: es que LA GEOMETRIA DE LA
 * CARD DEPENDIA DE QUE UN JS SE ACORDARA DE ESCRIBIR LAS CLASES CORRECTAS. Eso
 * ya derivo dos veces (hay un comentario en add-to-cart.js del arreglo anterior,
 * pidiendo "si se toca uno de los dos, tocar el otro"). Un acuerdo entre dos
 * archivos no es una garantia: se vuelve a romper.
 *
 * Asi que la garantia ahora es estructural, en tres capas independientes. Con
 * que aguante una sola, la fila no se desalinea:
 *
 *   CAPA 1 — El pie mide siempre lo mismo, le caiga adentro lo que le caiga.
 *            Con min-height propio, un pie roto de 110px deja de arrastrar a
 *            toda la fila. Funciona en cualquier navegador.
 *
 *   CAPA 2 — El contenedor se estila POR LO QUE TIENE ADENTRO, no por las clases
 *            que alguien recordo poner. `:has(.dm-qty__field)` = "esto es un
 *            stepper", `:has(.btn-add-cart)` = "esto es el boton Agregar". Un
 *            cuarto camino que mañana olvide las clases se va a ver bien igual,
 *            y el `add-minus` que quedo pegado deja de pintar de naranja lo que
 *            no es un stepper.
 *
 *   CAPA 3 — Se neutralizan las alturas inline de matchHeight adentro de la card
 *            (y ademas se saca el selector en main.js, ver ese archivo).
 *
 * Los templates de add-to-cart.js tambien se corrigieron para que emitan las
 * mismas clases que la vista. Eso es higiene: la garantia son las tres capas.
 * ========================================================================== */

/* ---- CAPA 1: el pie tiene geometria propia ---- */

/* 40px es el alto del stepper (.dm-qty--cart > form > .dm-qty__button tiene
   min-height: 40px). Fijarlo aca significa que el pie ocupa lo mismo en sus tres
   estados -- "Agregar", stepper, y stepper a medio construir -- asi que las
   cards de una fila se alinean por construccion y no por coincidencia. */
.dm-product-card__footer {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    min-height: 40px;
}

/* ---- CAPA 2: el contenedor se estila por su contenido ---- */

/* ES UN STEPPER si adentro tiene la celda del numero, venga de la vista o del
   JS, con clases o sin ellas. Repite lo que declara .dm-qty--cart a proposito:
   la idea es justamente NO depender de que esa clase este puesta. */
.dm-product-card__footer .contenido-carrito:has(.dm-qty__field) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 40px;
    border: none;
    border-radius: var(--dm-radius-sm);
    background: var(--dm-brand);
    overflow: hidden;
}

/* Y sus celdas, por lo mismo. */
.dm-product-card__footer .contenido-carrito:has(.dm-qty__field) > form {
    display: flex;
    flex: 0 0 auto;
    min-width: 48px;
    margin: 0;
}

.dm-product-card__footer .contenido-carrito:has(.dm-qty__field) > form > .dm-qty__button {
    width: 100%;
    min-height: 40px;
}

.dm-product-card__footer .contenido-carrito:has(.dm-qty__field) > .dm-qty__field {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

/* NO ES UN STEPPER si adentro esta el boton "Agregar". Esto limpia el `add-minus`
   que add-to-cart.js deja pegado al volver la cantidad a 0: sin esta regla, el
   boton "Agregar" queda dentro de una caja pintada de naranja de stepper por la
   regla vieja de site.css. */
.dm-product-card__footer .contenido-carrito:has(.btn-add-cart) {
    display: block;
    background: transparent;
    border-radius: 0;
}

/* ---- CAPA 3: las alturas inline de matchHeight no mandan ---- */

/* matchHeight escribe `style="height: NNpx"` sobre `.product-list .card`, y
   adentro del pie de la card hay un `<div class="card">` heredado del marcado
   viejo. Esas alturas se calculan una sola vez y quedan viejas apenas el AJAX
   cambia el pie. El !important es necesario: se esta ganandole a un estilo
   inline, y no hay otra forma desde una hoja de estilos.
   El selector en main.js tambien se acoto para que no las escriba mas; esto es
   la red por si alguien lo vuelve a abrir. */
.dm-product-card .card[style*="height"] {
    height: auto !important;
}


/* ----------------------------------------------------------------------------
 * Celdas de la grilla
 *
 * Las 18 grillas del catalogo pasaron de ".row + col-6 col-md-3" de Bootstrap a
 * .dm-product-grid, y el wrapper de cada producto quedo como
 * .dm-product-grid__item. Se conservo el wrapper (en vez de dejar la card como
 * hija directa) porque en varias vistas lleva las clases de animacion de entrada
 * (animate__fadeIn) y sacarlas cambiaba el comportamiento.
 *
 * La celda se estira sola al alto de la fila, porque align-items en grid es
 * stretch por default. Lo que falta es que la CARD llene su celda en vez de
 * quedarse en su alto natural: sin esto las filas quedan desparejas y los botones
 * "Agregar" no se alinean. La card ya no tiene alto fijo ni la toca el matchHeight
 * de main.js, que apunta a ".product-list .card".
 * -------------------------------------------------------------------------- */

.dm-product-grid__item {
    display: flex;
    min-width: 0;
}

.dm-product-grid__item > .dm-product-card {
    height: 100%;
}


/* ----------------------------------------------------------------------------
 * Selector de peso de la card (template "Card de producto por peso")
 *
 * Lo dibuja product-weight-card.js dentro de .dm-product-card__footer cuando el
 * producto se vende por peso. Hasta ahora ahi habia un boton que mandaba a la ficha.
 *
 * ES UN DESPLEGABLE Y NO CHIPS. El template propone tres chips (250 g / 500 g / 1 kg),
 * pero en Delimart los pesos son RANGOS de 100 g ("Entre 1.200 Kg a 1.299 Kg") y no
 * son tres: van de 1 a 43, con mediana 7 (medido sobre las 529 variaciones de la base
 * de testing). Tres chips no entran ni en el mejor caso.
 *
 * El <select> nativo aguanta 43 opciones sin crecer, en telefono abre la rueda del
 * sistema —que es lo mas comodo que hay para una lista larga— y ADEMAS NUNCA SE SALE
 * DE LA CARD: a width 100% no se estira con el texto de sus opciones, lo recorta el
 * navegador. Eso ultimo importa porque hay variaciones con nombre libre y largo.
 *
 * El alto NO puede cambiar al elegir otro peso: son celdas de una grilla y cualquier
 * salto correria toda la fila. Por eso la franja tiene alto propio y todo lo que
 * puede quedar largo va en una sola linea con elipsis.
 * -------------------------------------------------------------------------- */

/* EL min-width: 0 ES LO QUE MANTIENE EL PIE ADENTRO DE LA CARD, y no es opcional.
 *
 * .dm-weight es hijo de .dm-product-card__footer, que es una GRILLA. Un item de
 * grilla (igual que uno de flex) arranca con min-width: auto, o sea que NO BAJA de
 * su ancho minimo de contenido por mas que se le pida width: 100%. Y el ancho minimo
 * de este bloque lo fijan sus hijos con white-space: nowrap —la franja del precio y
 * el boton "Agregar 1 – 1,1 kg"—, que piden ~180px.
 *
 * Resultado en telefono, donde la card mide 149px y su contenido 117: el bloque se
 * estiraba a 182px y el desplegable de pesos, que copia ese ancho, salia 49px por
 * afuera de la card. Como .dm-product-card tiene overflow: hidden, lo que sobraba no
 * se veia: el control quedaba cortado al medio. Pasaba en TODA card de producto por
 * peso en telefono, no en un producto puntual (medido en /Carne de Cerdo-2 a 360px:
 * 4 de 4 cards, 13 elementos desbordando cada una).
 *
 * Con min-width: 0 el bloque acepta el ancho de la celda y el recorte lo hacen los
 * hijos, que para eso ya tienen su overflow + text-overflow. Es la misma trampa que
 * documenta la seccion 3 del README del design system.
 *
 * OJO: no alcanza con el min-width: 0 que ya tenia .dm-weight__trigger. Ese lo deja
 * encogerse DENTRO de su contenedor; el que se estiraba era el contenedor. */
.dm-weight {
    display: flex;
    flex-direction: column;
    gap: var(--dm-space-2);
    width: 100%;
    min-width: 0;
    text-align: left;
}

.dm-weight__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--dm-space-1);
}

/* Los dos rotulos estaban en --dm-text-faint y 11px. Suben a 12px y a --dm-text-muted:
   el gris clarito sobre blanco es justo lo que no se lee de grande. */
.dm-weight__label {
    font-size: var(--dm-text-sm);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: var(--dm-weight-semibold);
    color: var(--dm-text-muted);
}

.dm-weight__count {
    font-size: var(--dm-text-sm);
    color: var(--dm-text-muted);
    white-space: nowrap;
}

/* EL DISPARADOR del desplegable. 48px de alto y 16px de texto: esta pensado para que
   lo lea y lo toque comodo una persona mayor, que es el pedido explicito.

   El min-width: 0 mas el recorte del texto son el cinturon del "que no atraviese la
   card": algunas variaciones no son un rango sino un nombre libre y largo, y ahi el
   control tiene que RECORTAR, nunca empujar. Ojo que un nowrap sin overflow no
   contiene nada: la caja no crece pero el texto se pinta igual afuera. */
.dm-weight__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dm-space-2);
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 0 var(--dm-space-3);
    border: 1px solid var(--dm-border-strong);
    border-radius: var(--dm-radius-pill);
    background: var(--dm-surface);
    font-family: var(--dm-font);
    font-size: var(--dm-text-md);
    font-weight: var(--dm-weight-semibold);
    color: var(--dm-text-strong);
    text-align: left;
    cursor: pointer;
    transition: var(--dm-transition-fast);
}

.dm-weight__trigger:hover {
    border-color: var(--dm-brand);
}

.dm-weight__trigger:focus-visible {
    outline: 2px solid var(--dm-brand);
    outline-offset: 2px;
}

.dm-weight__trigger-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* La flechita, dibujada con bordes para no depender de una fuente de iconos. */
.dm-weight__trigger-caret {
    flex: 0 0 auto;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid var(--dm-brand-strong);
}

.dm-weight__trigger[aria-expanded="true"] {
    border-color: var(--dm-brand);
}

.dm-weight__trigger[aria-expanded="true"] .dm-weight__trigger-caret {
    transform: rotate(180deg);
}

/* La franja crema del template, con el precio de la pieza elegida. El importe sale
   de la variacion, no de una multiplicacion: cada peso es un producto con su precio. */
/* LA FRANJA NO PUEDE CRECER DE ALTO. Con el rotulo a 12px y el importe a 20px, en una
   card de 215px "Precio de la pieza" se partia en tres renglones y esa card quedaba
   mas alta que sus vecinas de la misma fila. El rotulo va en una sola linea y el
   importe baja a 16px: medido, entran los dos en el peor caso. */
.dm-weight__strip {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--dm-space-1);
    min-height: 36px;
    padding: 6px 10px;
    border-radius: var(--dm-radius-sm);
    background: var(--dm-brand-soft);
}

.dm-weight__strip-label {
    flex: 0 1 auto;
    min-width: 0;
    font-size: var(--dm-text-xs);
    color: var(--dm-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dm-weight__strip-price {
    flex: 0 0 auto;
    font-size: var(--dm-text-md);
    font-weight: var(--dm-weight-bold);
    color: var(--dm-brand-strong);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* El envoltorio del carrito. Es el que lleva el id #carrito<id> y adentro tiene el
   .contenido-carrito que reescribe add-to-cart.js: ahi vive el boton "Agregar" o el
   selector de cantidad, segun si ese peso ya esta en el carrito. */
.dm-weight__cart,
.dm-weight__cart > .contenido-carrito {
    width: 100%;
}

.dm-weight__form {
    width: 100%;
    margin: 0;
}

/* En una sola linea SIEMPRE: el rotulo lleva el peso adentro y hay variaciones con
   nombre libre ("CARNE HIJO 2") que partian el boton en dos renglones y le cambiaban
   el alto a la card. */
.dm-weight__cta {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* El "por kg" al lado del precio grande. El precio de estos productos SIEMPRE fue el
   del kilo —los nombres terminan en "El kilo a"— pero la card no lo decia y se leia
   como el precio del producto. */
.dm-weight__unit {
    font-size: var(--dm-text-xs);
    font-weight: var(--dm-weight-normal);
    color: var(--dm-text-muted);
}

/* Declara su text-align porque el tema tiene "p { text-align: right }" global. */
.dm-weight__empty {
    margin: 0;
    text-align: center;
    font-size: var(--dm-text-base);
    color: var(--dm-text-muted);
}

/* ----------------------------------------------------------------------------
 * EL PIE EN LA CARD ANGOSTA DEL TELEFONO
 *
 * Meterlo adentro de la card (el min-width: 0 de arriba) era la mitad del trabajo:
 * la otra mitad es que ADENTRO se lea. El template se diseño sobre una card de
 * ~215px y en telefono la grilla da dos columnas de mucho menos. Medido:
 *
 *   ancho de pantalla   320    360    430    540    768   1024   1440
 *   contenido del pie    97    117    153    207    198    299    226
 *
 * Y lo que cada pieza necesita para entrar entera:
 *
 *   "Elegí el peso" + "9 piezas"        154px
 *   "Esta pieza" + "$ 200.000,00"       143px
 *   boton "Agregar 1 – 1,1 kg"          172px
 *
 * O sea que de ~480px de pantalla para abajo NO ENTRAN, y sin estas reglas se ve lo
 * que se vio: el rotulo "Esta pieza" recortado a una letra y el boton cortado por los
 * dos lados (con texto centrado, text-overflow ni siquiera pone puntos suspensivos,
 * come de las dos puntas).
 *
 * El corte va en 479.98 y no en 480: con escala de pantalla fraccionaria un ancho
 * entero puede caer entre "max-width: 479px" y "min-width: 480px" y quedarse sin
 * ninguna de las dos reglas. Es exactamente el agujero de 1px que tiene el tema en
 * 1023/1024.
 *
 * SE PODA POR IMPORTANCIA, no se achica todo:
 *   - la cuenta de piezas se va (el panel las muestra todas igual);
 *   - "Esta pieza" NO se va, se apila arriba del importe: sin ese rotulo quedan dos
 *     precios en la card —el del kilo y el de la pieza— sin nada que los distinga,
 *     que es peor que ocupar un renglon mas;
 *   - el boton se queda en "Agregar" a secas: el peso ya esta en el desplegable,
 *     justo arriba, y repetirlo no valia partir el boton al medio.
 *
 * VA ANCLADO A .dm-product-card. El mismo bloque .dm-weight vive tambien en la ficha
 * del producto (.dm-weight--ficha), donde a 360px la columna mide ~325 y entra todo:
 * ahi estas reglas no tienen nada que arreglar y solo sacarian informacion.
 * -------------------------------------------------------------------------- */
@media (max-width: 479.98px) {
    .dm-product-card .dm-weight__count {
        display: none;
    }

    /* align-items pasa de baseline a stretch: en columna, "baseline" alinea contra la
       primera linea y dejaba el importe pegado al rotulo. */
    .dm-product-card .dm-weight__strip {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    /* Ya no comparte renglon con el importe: puede usar todo el ancho y no necesita
       recortarse. */
    .dm-product-card .dm-weight__strip-label {
        overflow: visible;
        text-overflow: clip;
    }

    .dm-product-card .dm-weight__cta-peso {
        display: none;
    }

    /* EL RANGO DE PESO NO SE PUEDE RECORTAR: es lo unico que dice el disparador.
       La cuenta a 360px, que es el telefono tipico: el pie da 117px y el control se
       lleva 32 de padding + 8 de gap + 12 de flechita = 52, dejando 65 para un texto
       que necesita 81 ("1,5 – 1,6 kg" a 16px). Salia "1,5 – 1,…", o sea sin el
       extremo de arriba del rango.
       Los pixeles salen del padding lateral y del gap contra la flechita, que es lo
       unico que se puede ceder sin tocar el cuerpo del texto —16px es pedido explicito
       para el publico mayor— ni el area de toque, que la da el min-height de 48.

       El gap tambien, y no es de mas: con solo el padding quedaban 80,6px de caja para
       un texto de 81,34. Menos de un pixel, pero el navegador elide igual y se perdia
       el "kg". Ojo con medirlo: scrollWidth y clientWidth son ENTEROS y los dos daban
       81, o sea que decian que entraba. Hay que medirlo con un Range sobre el texto. */
    .dm-product-card .dm-weight__trigger {
        padding: 0 var(--dm-space-2);
        gap: var(--dm-space-1);
    }
}

/* 320px es el piso soportado y ahi no alcanza con lo de arriba: el pie da 97px. Se
   recorta todo lo que queda alrededor del texto —el padding al minimo, el gap y la
   flechita, que a 8px se sigue leyendo como flechita— y con eso entran los rangos
   normales ("1 – 1,1 kg"). El mas largo ("1,5 – 1,6 kg") queda a unos pocos pixeles y
   se corta un poco: a 320 no hay de donde sacarlos sin bajar el cuerpo de 16px, que
   es justo lo que no se toca. Se banca porque el panel muestra todos los pesos
   enteros y con su precio, que es adonde va el que necesita comparar. */
@media (max-width: 359.98px) {
    .dm-product-card .dm-weight__trigger {
        padding: 0 var(--dm-space-1);
    }

    .dm-product-card .dm-weight__trigger-caret {
        border-left-width: 4px;
        border-right-width: 4px;
        border-top-width: 5px;
    }
}


/* ----------------------------------------------------------------------------
 * El panel de pesos
 *
 * ES UNO SOLO Y CUELGA DEL <body>, no de la card: .dm-product-card tiene
 * overflow: hidden y un panel adentro quedaba recortado. Ningun ancestro tiene
 * transform, asi que position: fixed escapa limpio. Ademas, trece cards con hasta
 * 43 opciones cada una serian cientos de nodos al pedo; se llena al abrirlo.
 *
 * PENSADO PARA LEERSE DE GRANDE: filas de 48px, texto de 16px, el peso en
 * --dm-text-strong y el precio en --dm-brand-strong y negrita. Nada de gris claro
 * sobre blanco. Cada fila muestra el precio de ese peso, que con el desplegable
 * nativo habia que elegir para poder ver.
 *
 * En telefono y tablet no es un panel colgado del control sino una HOJA AL PIE
 * (.dm-weight-panel--hoja), que es donde llega el pulgar y donde entran mas filas.
 * -------------------------------------------------------------------------- */

.dm-weight-panel {
    position: fixed;
    z-index: 1050;   /* sobre el header sticky (1030) y la tab bar (1020) */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--dm-surface);
    border: 1px solid var(--dm-border);
    border-radius: var(--dm-radius-card);
    box-shadow: var(--dm-shadow-panel);
    padding: var(--dm-space-1) 0;
}

.dm-weight-scrim {
    position: fixed;
    inset: 0;
    z-index: 1049;
    background: rgb(0 0 0 / 45%);
}

.dm-weight-panel__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dm-space-2);
    min-height: 48px;
    padding: var(--dm-space-2) var(--dm-space-3);
    border-left: 3px solid transparent;
    font-size: var(--dm-text-md);
    color: var(--dm-text-strong);
    cursor: pointer;
}

/* ACA EL NOMBRE VA ENTERO, Y ES LA DIFERENCIA CON EL DISPARADOR.
   El disparador vive adentro de una card de 215px y no puede crecer sin empujar la
   grilla: ahi el nombre largo se corta con puntos suspensivos y se queda asi. Pero
   cortarlo tambien en el PANEL era el peor de los dos mundos. Las variaciones con
   nombre libre lo tienen largo casi siempre por el mismo motivo —les quedo adelante
   el nombre del producto, "Matambrito de Cerdo Congelado -Entre 1.000 y 1.099"— asi
   que lo que se comian los puntos suspensivos era justo el peso, que es lo unico por
   lo que se distinguen entre si. Con seis filas cortadas en el mismo lugar, el
   desplegable ofrecia seis opciones identicas.

   Por eso el panel es el lugar donde se ve todo: para eso se lo abre. El nombre parte
   en los renglones que necesite y la fila crece. Las dos cosas que podrian romperse
   ya estaban previstas: las filas tienen min-height y no height, y el panel scrollea
   (max-height 70vh en la hoja al pie, y en escritorio el alto lo mide dm-peso-combo.js
   sobre el panel ya lleno).

   break-word Y NO anywhere. Los dos parten una palabra que no entra, pero "anywhere"
   ademas achica el ancho MINIMO DE CONTENIDO del elemento a un caracter, y el panel se
   dimensiona con width:auto: con anywhere la columna del nombre se podia aplastar hasta
   quedar de una letra de ancho y el texto salia deshilachado en vertical
   ("Entr / e / 1.00 / 0 G"). break-word parte igual cuando hace falta pero no toca el
   minimo, asi que la columna conserva el ancho de su palabra mas larga. */
.dm-weight-panel__peso {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: break-word;
    font-weight: var(--dm-weight-medium);
}

/* NOMBRE ARRIBA Y PRECIO ABAJO, SOLO EN LA FILA QUE LO NECESITA.
 *
 * La fila normal es "peso ......... precio", en un renglon, y asi tiene que quedar: con
 * hasta 43 pesos, apilar todas las filas duplicaria el alto de la lista y se perderia
 * de un vistazo. Pero cuando el nombre no entra al lado del precio —los que traen texto
 * libre, y ojo que la fila elegida tiene ademas el tilde comiendo ~20px, asi que puede
 * no entrar justo en esa— el nombre quedaba partido en dos o tres renglones dentro de
 * una columna angosta, contra un precio holgado al lado.
 *
 * Quien decide cual fila se apila es dm-peso-combo.js al abrir el panel: mide con el
 * texto en una sola linea y marca las que no entran. No se puede resolver solo con CSS
 * —no hay manera de decir "envolve al hermano si yo me parto"— y hacerlo por ancho de
 * pantalla seria adivinar, porque depende del largo del nombre y del importe.
 *
 * flex-wrap + basis 100% en vez de flex-direction: column, para que el precio y el
 * tilde sigan juntos en su renglon en lugar de caer uno abajo del otro. */
.dm-weight-panel__option.is-apilada {
    flex-wrap: wrap;
    row-gap: 2px;
    /* El alto lo pone el contenido: son dos renglones, no uno. */
    align-items: flex-start;
}

.dm-weight-panel__option.is-apilada .dm-weight-panel__peso {
    flex: 1 1 100%;
}

.dm-weight-panel__precio {
    flex: 0 0 auto;
    font-weight: var(--dm-weight-bold);
    color: var(--dm-brand-strong);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* La fila que sigue el teclado o el puntero. Gris suave: no compite con la elegida. */
.dm-weight-panel__option.is-resaltada {
    background: var(--dm-surface-sunken);
}

/* La elegida: crema, barra naranja a la izquierda y un tilde. Gana sobre el
   resaltado, por eso va despues. */
.dm-weight-panel__option.is-elegida {
    background: var(--dm-brand-soft);
    border-left-color: var(--dm-brand);
}

.dm-weight-panel__option.is-elegida::after {
    content: "✓";
    flex: 0 0 auto;
    color: var(--dm-brand-strong);
    font-weight: var(--dm-weight-bold);
}

/* La cabecera es de la hoja al pie; en escritorio el rotulo ya esta arriba del
   disparador y aca sobraria. */
.dm-weight-panel__head {
    display: none;
}

.dm-weight-panel--hoja {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-height: 70vh;
    border-radius: var(--dm-radius-card) var(--dm-radius-card) 0 0;
    border-bottom: none;
    padding-bottom: env(safe-area-inset-bottom);
}

.dm-weight-panel--hoja .dm-weight-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dm-space-2);
    position: sticky;
    top: 0;
    z-index: 1;
    padding: var(--dm-space-3);
    background: var(--dm-surface);
    border-bottom: 1px solid var(--dm-border);
}

.dm-weight-panel__title {
    font-size: var(--dm-text-md);
    font-weight: var(--dm-weight-bold);
    color: var(--dm-text-strong);
}

/* 44px de lado: el minimo comodo para el pulgar. */
.dm-weight-panel__close {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border: none;
    background: none;
    font-size: var(--dm-text-md);
    color: var(--dm-text-muted);
    cursor: pointer;
}

.dm-weight-panel--hoja .dm-weight-panel__option {
    min-height: 56px;   /* en telefono el dedo agradece la fila mas alta */
    padding-left: var(--dm-space-4);
    padding-right: var(--dm-space-4);
}


/* ----------------------------------------------------------------------------
 * El mismo desplegable, en la ficha del producto
 *
 * Ahi el control no vive en una card de 220px sino en una columna ancha, asi que se
 * lo capa: un disparador de 700px con "1,2 - 1,3 kg" adentro queda ridiculo.
 *
 * EL <select> SIGUE EN EL DOM. product-detail.js arma el nombre de la variacion con
 * el TEXTO de la opcion elegida ($(this).find(':selected').text()) y con eso busca el
 * div[data-variation-name]. Se lo esconde a la vista pero no se lo saca ni se le toca
 * el texto: el desplegable nuevo le escribe el selectedIndex y le dispara su change.
 * Es el mismo patron que los chips de IVA del checkout.
 * -------------------------------------------------------------------------- */

.dm-weight--ficha {
    max-width: 340px;
    margin-bottom: var(--dm-space-3);
}

/* Oculto pero presente: nada de display:none sobre un control que sigue siendo el que
   manda, para que no desaparezca del arbol por si algun dia alguien lo consulta. */
.dm-weight__select-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}