/**
 * Tienda web pública.
 *
 * Se sirve suelto, NO por Vite: lo carga también el iframe dentro de la web de
 * otra empresa, igual que catalog.css y catalog-viewer.css.
 *
 * Ni un color escrito a mano. Todo sale de --cat-primary / --cat-accent, que
 * cada catálogo define en sus tokens y el layout imprime en :root. Así un
 * comercio cambia de marca sin tocar esta hoja.
 *
 * catalog.css va cargado antes y trae los tokens y la tipografía. Aquí las
 * medidas son rem y px porque esto es pantalla, no una hoja para imprenta.
 */

.tienda-body {
    margin: 0;
    background: color-mix(in srgb, var(--cat-line) 18%, var(--cat-bg));
}

.tienda {
    max-width: 1280px;
    margin: 0 auto;
    /* Hueco abajo para que el botón flotante del pedido no tape la última
       fila de la rejilla en el móvil. */
    padding: 0 1rem 6rem;
}

/* ── Cabecera ─────────────────────────────────────────────────────────────── */

.tienda__head {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    border-bottom: 1px solid var(--cat-line);
}

.tienda__marca { display: flex; gap: .75rem; align-items: center; }
.tienda__logo  { height: 44px; width: auto; object-fit: contain; }
.tienda__nombre { margin: 0; font-weight: 700; font-size: 1.05rem; }
.tienda__lema   { margin: 0; font-size: .8rem; color: var(--cat-muted); }

.tienda__alcatalogo {
    color: var(--cat-primary);
    text-decoration: none;
    font-size: .875rem;
    font-weight: 600;
    border: 1px solid currentColor;
    border-radius: 999px;
    padding: .4rem .9rem;
}

.tienda__alcatalogo:hover { background: color-mix(in srgb, var(--cat-primary) 10%, transparent); }

/* ── Filtros ──────────────────────────────────────────────────────────────── */

.tienda__filtros {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    /* Pegado arriba: con 3.763 productos se filtra a media lista. */
    position: sticky;
    top: 0;
    z-index: 5;
    padding: .75rem 0;
    background: color-mix(in srgb, var(--cat-line) 18%, var(--cat-bg));
}

.tienda__buscar {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: .4rem;
    flex: 1 1 260px;
    background: var(--cat-bg);
    border: 1px solid var(--cat-line);
    border-radius: 10px;
    padding: .5rem .75rem;
}

.tienda__buscar:focus-within { border-color: var(--cat-primary); }
.tienda__lupa { color: var(--cat-muted); font-size: 1.1rem; line-height: 1; }

.tienda__buscar input {
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    width: 100%;
}

.tienda__cat {
    font: inherit;
    padding: .55rem .75rem;
    border: 1px solid var(--cat-line);
    border-radius: 10px;
    background: var(--cat-bg);
    color: inherit;
    max-width: 260px;
}

.tienda__cuenta { margin: 0; font-size: .8rem; color: var(--cat-muted); }
.tienda__cuenta.is-cargando { opacity: .45; }

/* En el móvil el desplegable y la cuenta comparten el renglón de debajo del
   buscador: con los tres en fila, el select se quedaba en 90px y no se leía
   ni el nombre de la categoría. */
@media (max-width: 559px) {
    .tienda__buscar { flex: 1 0 100%; }
    .tienda__cat { flex: 1 1 auto; max-width: none; }
    .tienda__filtros { gap: .5rem; padding: .6rem 0; }
}

/* ── Caja de imagen ───────────────────────────────────────────────────────────
   Todas las fotos en la misma caja cuadrada, con fondo claro y `contain`: las
   imágenes vienen de sitios distintos (ERP, Homecenter, buscador) y sin caja
   fija la rejilla sale con unas enormes y otras diminutas. El padding deja un
   margen igual alrededor de todas, que es lo que iguala la sensación de
   tamaño aunque los archivos tengan proporciones distintas. */

.tfoto {
    position: relative;
    aspect-ratio: 1;
    background: var(--cat-bg);
    padding: 10%;
    overflow: hidden;
    /* El recorte y el redondeo viven aquí y no en la tarjeta: así la tarjeta
       no recorta el globo del asterisco del precio, que sí se sale de ella. */
    border-radius: 10px 10px 0 0;
}

.tfoto img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform .25s ease;
}

.tcard:hover .tfoto img { transform: scale(1.04); }

.tfoto__sin {
    display: grid;
    place-items: center;
    height: 100%;
    font-size: .75rem;
    color: var(--cat-muted);
    background: color-mix(in srgb, var(--cat-line) 30%, var(--cat-bg));
    border-radius: 8px;
}

/* ── Aviso «imagen de referencia» ─────────────────────────────────────────────
   Muchas fotos se heredaron de un artículo parecido, así que hay que decir que
   la imagen no es necesariamente la del producto.

   El globo se coloca contra la caja de la foto (de borde a borde) y no contra
   la marca: así cabe dentro del recorte y se lee entero. Colgado de la marca
   medía más que la tarjeta y salía cortado a media frase. */

.tfoto__i {
    all: unset;
    position: absolute;
    right: .45rem;
    bottom: .45rem;
    z-index: 3;
    cursor: help;
    display: grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    font-style: italic;
    line-height: 1;
    color: var(--cat-muted);
    background: color-mix(in srgb, var(--cat-line) 55%, var(--cat-bg));
}

.tfoto__i:hover,
.tfoto__i:focus-visible { color: var(--cat-bg); background: var(--cat-primary); }

.tfoto__globo {
    position: absolute;
    left: .45rem;
    right: .45rem;
    bottom: 2.1rem;
    z-index: 3;
    padding: .45rem .6rem;
    border-radius: 8px;
    font-size: .7rem;
    font-weight: 500;
    line-height: 1.35;
    text-align: left;
    color: var(--cat-bg);
    background: color-mix(in srgb, var(--cat-fg) 93%, transparent);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
    pointer-events: none;
    /* visibility y no display: así la transición funciona y el globo no
       aparece de golpe al rozarlo con el ratón. */
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease, visibility .15s;
}

.tfoto__i:hover ~ .tfoto__globo,
.tfoto__i:focus-visible ~ .tfoto__globo { opacity: 1; visibility: visible; }

/* La foto entera abre la ficha. Va por encima de la imagen y por debajo del
   aviso, para que tocar la «i» no abra el producto. */
.tcard__hit {
    all: unset;
    position: absolute;
    inset: 0;
    cursor: pointer;
    z-index: 1;
}

.tcard__off {
    position: absolute;
    top: .5rem;
    left: .5rem;
    z-index: 2;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1;
    padding: .3rem .45rem;
    border-radius: 6px;
    color: #fff;
    background: var(--cat-accent);
}

/* ── Aviso del precio ─────────────────────────────────────────────────────────
   El «*» que sigue al número: el precio sale del ERP y puede estar desfasado,
   igual que el stock. El globo no recibe el ratón (pointer-events: none) para
   que no se robe a sí mismo el hover, y se limita a lo que cabe en pantalla:
   con más ancho, en la primera columna del móvil se salía por el lado. */

.taviso {
    all: unset;
    position: relative;
    cursor: help;
    align-self: flex-start;
}

.taviso__marca {
    padding: 0 .15rem;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1;
    color: var(--cat-primary);
}

.taviso:hover .taviso__marca,
.taviso:focus-visible .taviso__marca { color: var(--cat-accent); }

.taviso__globo {
    position: absolute;
    left: -.5rem;
    bottom: calc(100% + .4rem);
    z-index: 6;
    width: max-content;
    max-width: min(230px, 46vw);
    padding: .5rem .65rem;
    border-radius: 8px;
    font-size: .72rem;
    font-weight: 500;
    font-style: normal;
    line-height: 1.35;
    text-align: left;
    color: var(--cat-bg);
    background: color-mix(in srgb, var(--cat-fg) 93%, transparent);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease, visibility .15s;
}

.taviso:hover .taviso__globo,
.taviso:focus-visible .taviso__globo { opacity: 1; visibility: visible; }

/* En el móvil el globo anclado a la marca se salía por la derecha en la
   segunda columna y ensanchaba toda la página (477 px en un móvil de 375).
   Fijo abajo no ocupa sitio en el flujo y siempre se lee entero. */
@media (max-width: 600px) {
    .taviso__globo {
        position: fixed;
        left: 1rem; right: 1rem; bottom: 1rem; top: auto;
        width: auto; max-width: none;
    }
}

/* ── Rejilla ──────────────────────────────────────────────────────────────── */

.tienda__grid {
    display: grid;
    /* min(100%, 158px): con 178px, un móvil de 360 se quedaba en UNA columna,
       que es media pantalla desperdiciada por tarjeta. Con 158 caben dos, y en
       escritorio siguen saliendo hasta seis sin una sola media query. El min()
       evita que una pantalla más estrecha que el mínimo desborde. */
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 158px), 1fr));
    gap: .6rem;
    padding: 1rem 0;
}

@media (min-width: 560px) {
    .tienda__grid { grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: .75rem; }
}

.tienda__grid.is-cargando { opacity: .55; }

.tcard {
    display: flex;
    flex-direction: column;
    background: var(--cat-bg);
    border: 1px solid transparent;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
    transition: box-shadow .18s ease, transform .18s ease;
}

.tcard:hover {
    box-shadow: 0 8px 22px rgba(0, 0, 0, .14);
    transform: translateY(-2px);
}

.tcard--agotado .tfoto img { filter: grayscale(.55); opacity: .75; }

.tcard__cuerpo {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: .7rem .8rem .8rem;
    /* Empuja el botón al fondo para que todas las tarjetas de la fila lo
       tengan a la misma altura pese a nombres de largo distinto. */
    flex: 1;
}

/* Alto reservado aunque el producto no traiga marca: sin esto el precio de
   unas tarjetas queda una línea más arriba que el de las de al lado y la fila
   se ve desordenada. */
.tcard__marca {
    margin: 0;
    min-height: 1rem;
    font-size: .68rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--cat-muted);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.tcard__nombre { margin: 0; font-size: .9rem; font-weight: 400; line-height: 1.3; }

.tcard__nombre button {
    all: unset;
    cursor: pointer;
    display: -webkit-box;
    /* Dos líneas fijas: el nombre largo se corta y el corto deja el hueco, y
       así el precio de toda la fila cae a la misma altura. */
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.34rem;
    color: var(--cat-fg);
    text-align: left;
}

.tcard__nombre button:hover { color: var(--cat-primary); }

/* ── Precio ───────────────────────────────────────────────────────────────── */

.tprecio {
    margin: .15rem 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .35rem;
}

.tprecio s { order: -1; flex-basis: 100%; font-size: .75rem; color: var(--cat-muted); }
.tprecio strong { font-size: 1.25rem; font-weight: 600; color: var(--cat-fg); line-height: 1.1; }
.tprecio__consultar { font-size: .85rem; color: var(--cat-muted); }

/* El porcentaje de la ficha: junto al precio y con el color de acento, que es
   el que este catálogo reserva para lo que llama la atención. */
.tprecio__off {
    font-size: .85rem;
    font-weight: 700;
    padding: .1rem .4rem;
    border-radius: 6px;
    color: var(--cat-accent);
    background: color-mix(in srgb, var(--cat-accent) 14%, transparent);
}

.tprecio--grande strong { font-size: 1.85rem; color: var(--cat-primary); }
.tprecio--grande s { font-size: .9rem; }
.tprecio--grande .taviso__marca { font-size: 1.35rem; }

/* ── Disponibilidad ───────────────────────────────────────────────────────── */

.tcard__dispo { margin: .15rem 0 .35rem; }

.tchip {
    display: inline-block;
    font-size: .7rem;
    font-weight: 600;
    padding: .12rem .45rem;
    border-radius: 999px;
}

.tchip--si { background: color-mix(in srgb, var(--cat-primary) 12%, transparent); color: var(--cat-primary); }
.tchip--no { background: color-mix(in srgb, var(--cat-accent) 12%, transparent); color: var(--cat-accent); }

/* ── Botones ──────────────────────────────────────────────────────────────── */

.tadd,
.tcart__comprar,
.tienda__mas button,
.tienda__vacio button {
    font: inherit;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    border: 0;
    border-radius: 8px;
    padding: .5rem .75rem;
    background: var(--cat-primary);
    color: #fff;
    margin-top: auto;
}

.tadd:hover,
.tcart__comprar:hover,
.tienda__mas button:hover { filter: brightness(1.08); }

.tadd.is-puesto { background: var(--cat-accent); }

.tadd--grande { width: 100%; padding: .8rem; font-size: 1rem; margin: .25rem 0; }

.tienda__mas { display: grid; place-items: center; padding: 1.5rem 0; }
.tienda__mas button[disabled] { opacity: .5; cursor: progress; }

.tienda__vacio { text-align: center; padding: 3rem 1rem; color: var(--cat-muted); }
.tienda__vacio button { margin-left: .5rem; }

/* ── Ficha ────────────────────────────────────────────────────────────────── */

.tmodal {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.tmodal__fondo { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }

.tmodal__caja {
    position: relative;
    background: var(--cat-bg);
    border-radius: 14px;
    max-width: 980px;
    width: 100%;
    max-height: 92vh;
    overflow: auto;
    /* Más aire arriba y a la derecha: ahí vive la X, y sin ese hueco se comía
       la esquina de la foto. */
    padding: 3.25rem 1.5rem 1.5rem;
    /* Sin esto width 100% + padding medía 423 px en un móvil de 375 y el texto
       quedaba pegado (y cortado) contra los bordes. */
    box-sizing: border-box;
}

/* En el móvil la ficha ocupa la pantalla entera. Con el recuadro flotante se
   perdían 2rem de alto y 2rem de ancho en enseñar el fondo gris, y la tabla de
   medidas quedaba con la mitad del sitio del que hay. Va DESPUÉS de la regla
   base: antes estaba delante y el max-height de 92vh la pisaba. */
@media (max-width: 639px) {
    .tmodal { padding: 0; }

    .tmodal__caja {
        max-width: none;
        max-height: none;
        height: 100%;
        border-radius: 0;
        padding: 3.25rem 1rem 1.5rem;
    }
}

@media (min-width: 720px) {
    /* A la derecha cabe la X sin pisar el título del producto. */
    .tmodal__caja { padding: 1.75rem 3.75rem 2rem 2rem; }
}

.tmodal__cerrar {
    all: unset;
    position: absolute;
    top: .75rem;
    right: .75rem;
    z-index: 4;
    cursor: pointer;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--cat-muted);
    /* Fondo propio: la caja se desplaza al leer y la X se quedaba encima del
       texto o de la foto sin nada que la separara. */
    background: color-mix(in srgb, var(--cat-line) 45%, var(--cat-bg));
}

.tmodal__cerrar:hover,
.tmodal__cerrar:focus-visible { color: var(--cat-bg); background: var(--cat-accent); }

/* En el móvil la X se quedaba arriba al desplazar la ficha: fija, siempre a mano. */
@media (max-width: 639px) {
    .tmodal__cerrar { position: fixed; top: .6rem; right: .6rem; }
}

.tmodal__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }

@media (min-width: 720px) {
    /* 320 y no 360: en una tableta de 768 la columna de datos se quedaba sin
       sitio y el nombre del producto salía en cuatro renglones. */
    .tmodal__grid { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); }
}

@media (min-width: 1000px) {
    .tmodal__grid { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); }
}

.tmodal__col-media { min-width: 0; }

.tfoto--grande {
    border: 1px solid var(--cat-line);
    border-radius: 12px;
    padding: 6%;
}

.tmodal__info { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.tmodal__info h2 { margin: 0; font-size: 1.35rem; line-height: 1.3; font-weight: 500; }

.tmodal__meta {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    font-size: .78rem;
    color: var(--cat-muted);
}

.tmodal__desc { margin: .25rem 0 0; font-size: .9rem; line-height: 1.5; color: var(--cat-muted); }

/* Botón de contorno: la ficha completa no compite con «Añadir al pedido», que
   es lo que de verdad tiene que tocar el visitante. */
.tmodal__ficha {
    align-self: flex-start;
    margin-top: .5rem;
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    padding: .45rem .9rem;
    border: 1px solid var(--cat-primary);
    border-radius: 999px;
    color: var(--cat-primary);
}

.tmodal__ficha:hover { background: color-mix(in srgb, var(--cat-primary) 10%, transparent); }

.tmodal__bloque { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--cat-line); }
.tmodal__titulo { margin: 0 0 .75rem; font-size: 1rem; font-weight: 700; }

/* ── Parecidos ────────────────────────────────────────────────────────────────
   Fila que se arrastra en lugar de una segunda rejilla: la ficha ya es larga y
   ocho tarjetas apiladas dejarían el botón de añadir a tres pantallas de la
   foto. Con scroll-snap cada tarjeta encaja al soltar. */

.tsimilares {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(150px, 1fr);
    gap: .75rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: .5rem;
    scrollbar-width: thin;
}

.tsimilares .tcard { scroll-snap-align: start; }
.tcard--mini { box-shadow: none; border-color: var(--cat-line); }
.tcard--mini .tcard__cuerpo { padding: .5rem .6rem .7rem; }
.tcard--mini .tcard__nombre { font-size: .8rem; }
.tcard--mini .tcard__nombre button { min-height: 2.08rem; }
.tcard--mini .tprecio strong { font-size: 1rem; }

/* ── Tabla de medidas ─────────────────────────────────────────────────────── */

.tmedidas { width: 100%; border-collapse: collapse; font-size: .85rem; }
.tmedidas caption { text-align: left; font-weight: 700; font-size: 1rem; padding: 0 0 .75rem; }

.tmedidas th {
    text-align: left;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #fff;
    background: var(--cat-primary);
    padding: .4rem .5rem;
}

.tmedidas td { padding: .45rem .5rem; border-bottom: 1px solid var(--cat-line); }
.tmedidas tr.is-actual { background: color-mix(in srgb, var(--cat-primary) 8%, transparent); }
.tmedidas__add { margin: 0; padding: .3rem .6rem; font-size: .78rem; }

/* En el móvil la tabla se vuelve lista: cinco columnas en 360px no se leen.
   El rótulo de cada dato sale del data-th que pone el componente. */
@media (max-width: 639px) {
    .tmedidas thead { display: none; }
    .tmedidas, .tmedidas tbody, .tmedidas tr, .tmedidas td { display: block; width: 100%; }

    .tmedidas tr {
        border: 1px solid var(--cat-line);
        border-radius: 10px;
        padding: .5rem .65rem;
        margin-bottom: .6rem;
    }

    .tmedidas td { border: 0; padding: .2rem 0; display: flex; justify-content: space-between; gap: 1rem; }
    .tmedidas td[data-th]::before { content: attr(data-th); color: var(--cat-muted); font-size: .75rem; }
    .tmedidas__add { width: 100%; margin-top: .4rem; }
}

.tvisual-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

/* ── Carrito ──────────────────────────────────────────────────────────────── */

.tcart__abrir {
    position: fixed;
    right: 1rem;
    /* Por encima de la barra del navegador del móvil, que se come el fondo. */
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    z-index: 30;
    display: flex;
    align-items: center;
    gap: .5rem;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    border: 0;
    border-radius: 999px;
    padding: .8rem 1.2rem;
    color: #fff;
    background: linear-gradient(90deg, var(--cat-primary), var(--cat-accent));
    box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
}

.tcart__contador {
    background: rgba(255, 255, 255, .28);
    border-radius: 999px;
    padding: 0 .45rem;
    min-width: 1.4rem;
    text-align: center;
}

.tcart {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    /* En el móvil deja ver un dedo de la tienda por el lado: así se entiende
       que es un cajón que se cierra y no otra pantalla. */
    width: min(400px, 92%);
    display: flex;
    flex-direction: column;
    background: var(--cat-bg);
    border-left: 1px solid var(--cat-line);
    box-shadow: -8px 0 28px rgba(0, 0, 0, .18);
}

.tcart[hidden] { display: none; }

.tcart__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid var(--cat-line);
}

.tcart__head h2 { margin: 0; font-size: 1rem; }

.tcart__head button {
    all: unset;
    cursor: pointer;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--cat-muted);
}

.tcart__lineas { flex: 1; overflow: auto; padding: .5rem 1rem; }

.tcart__vacio { color: var(--cat-muted); font-size: .875rem; text-align: center; padding: 2rem 0; }

.tlinea {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    gap: .25rem .6rem;
    align-items: start;
    padding: .7rem 0;
    border-bottom: 1px solid var(--cat-line);
}

/* Misma caja para todas, con o sin foto: si el hueco desapareciera en las que
   no tienen imagen, la columna del texto bailaría renglón a renglón. */
.tlinea__foto {
    grid-row: span 2;
    width: 52px;
    height: 52px;
    object-fit: contain;
    border: 1px solid var(--cat-line);
    border-radius: 8px;
    background: var(--cat-bg);
    padding: 2px;
}

.tlinea__foto--sin { border-style: dashed; }

.tlinea__nombre { font-size: .85rem; font-weight: 600; line-height: 1.25; }
.tlinea__meta { font-size: .72rem; color: var(--cat-muted); }
.tlinea__importe { font-size: .85rem; font-weight: 700; color: var(--cat-primary); text-align: right; }

.tlinea__cant { display: flex; align-items: center; gap: .3rem; }

.tlinea__cant button {
    all: unset;
    cursor: pointer;
    width: 1.6rem;
    height: 1.6rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--cat-line);
    border-radius: 6px;
    font-weight: 700;
}

.tlinea__cant input {
    font: inherit;
    width: 3.2rem;
    text-align: center;
    padding: .2rem;
    border: 1px solid var(--cat-line);
    border-radius: 6px;
    background: var(--cat-bg);
    color: inherit;
}

.tlinea__quitar {
    all: unset;
    cursor: pointer;
    font-size: .72rem;
    color: var(--cat-accent);
    text-decoration: underline;
}

.tcart__aviso { margin: 0; padding: .5rem 1rem; font-size: .75rem; color: var(--cat-accent); }
.tcart__aviso[hidden] { display: none; }

.tcart__pie { padding: 1rem; border-top: 1px solid var(--cat-line); display: grid; gap: .6rem; }

.tcart__total { display: flex; justify-content: space-between; align-items: baseline; margin: 0; }
.tcart__total strong { font-size: 1.3rem; color: var(--cat-primary); }

.tcart__comprar { margin: 0; padding: .8rem; font-size: 1rem; }
.tcart__comprar[disabled] { opacity: .45; cursor: not-allowed; }
.tcart__sinwa { margin: 0; font-size: .8rem; color: var(--cat-muted); }

.tcart__vaciar {
    all: unset;
    cursor: pointer;
    font-size: .78rem;
    color: var(--cat-muted);
    text-decoration: underline;
    justify-self: center;
}

/* ── Embed ────────────────────────────────────────────────────────────────────
   Dentro del iframe de otra web el fondo lo pone el anfitrión y el cajón del
   pedido no puede ocupar 400px de un marco de 320. */

.tienda-body--bare { background: transparent; }
.tienda-body--bare .tienda { padding-bottom: 5rem; }
.tienda-body--bare .tcart { width: 100%; }

/* Quien pide menos movimiento no quiere que la foto crezca ni que la tarjeta
   salte al pasar por encima. */
@media (prefers-reduced-motion: reduce) {
    .tcard, .tfoto img, .tfoto__globo, .taviso__globo { transition: none; }
    .tcard:hover { transform: none; }
    .tcard:hover .tfoto img { transform: none; }
}