/*
 * La tienda online de GestioERP.
 *
 * Los colores salen de las variables que inyecta TiendaTema desde los ajustes
 * del módulo, así que cada empresa cambia --to-principal y todo el escaparate
 * se recoloca solo. Aquí solo van los valores neutros y las medidas.
 *
 * Nada de esto toca al ERP: esta hoja solo la carga la plantilla de la tienda.
 */

:root {
    --to-tinta: #16241f;
    --to-suave: #66787180;
    --to-texto-suave: #5e736b;
    --to-papel: #f6f8f7;
    --to-carta: #ffffff;
    --to-linea: #e2eae6;
    --to-sombra: 0 1px 2px rgba(16, 36, 30, .06), 0 8px 24px -12px rgba(16, 36, 30, .14);
    --to-sombra-alta: 0 2px 6px rgba(16, 36, 30, .08), 0 18px 40px -18px rgba(16, 36, 30, .28);
    --to-max: 1280px;
    --to-cabecera: 116px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--to-papel);
    color: var(--to-tinta);
    font: 15px/1.6 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

.to-ancho {
    max-width: var(--to-max);
    margin: 0 auto;
    padding: 0 20px;
}

/* ═══════════════════════════════════════════════════════ cabecera */
.to-cabecera {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--to-carta);
    border-bottom: 1px solid var(--to-linea);
}

.to-avisos {
    background: var(--to-principal);
    color: var(--to-contraste);
    font-size: 12.5px;
    text-align: center;
    padding: 7px 20px;
    letter-spacing: .01em;
}

.to-barra {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 14px 20px;
    max-width: var(--to-max);
    margin: 0 auto;
}

.to-marca {
    display: flex;
    align-items: center;
    gap: 11px;
    flex: 0 0 auto;
    min-width: 0;
}

/* El logo manda en la cabecera: es lo primero que mira quien llega. */
.to-marca img { height: 62px; width: auto; max-width: 260px; display: block; }

@media (max-width: 640px) {
    .to-marca img { height: 46px; max-width: 170px; }
}

.to-marca-txt { min-width: 0; }

.to-marca-nombre {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.to-marca-lema {
    font-size: 11.5px;
    color: var(--to-texto-suave);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* buscador */
.to-buscar {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--to-papel);
    border: 1px solid var(--to-linea);
    border-radius: 999px;
    padding: 9px 16px;
    transition: border-color .15s, box-shadow .15s;
}

.to-buscar:focus-within {
    border-color: var(--to-principal);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--to-principal) 16%, transparent);
}

.to-buscar input {
    border: 0;
    outline: 0;
    background: none;
    width: 100%;
    font-size: 14.5px;
    color: inherit;
}

.to-buscar button {
    border: 0;
    background: none;
    color: var(--to-texto-suave);
    cursor: pointer;
    padding: 0;
    font-size: 15px;
}

/* acciones */
.to-acciones {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

.to-accion {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 7px 12px;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 600;
    color: var(--to-texto-suave);
    position: relative;
    transition: background .15s, color .15s;
}

.to-accion:hover { background: var(--to-tenue); color: var(--to-principal); }
.to-accion i { font-size: 17px; }

.to-globo {
    position: absolute;
    top: 2px;
    right: 6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--to-acento);
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
}

/* familias */
.to-familias {
    border-top: 1px solid var(--to-linea);
    background: var(--to-carta);
}

.to-familias-tira {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    max-width: var(--to-max);
    margin: 0 auto;
    padding: 0 20px;
}

.to-familias-tira::-webkit-scrollbar { display: none; }

.to-fam {
    flex: 0 0 auto;
    padding: 11px 14px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--to-texto-suave);
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
}

/* Con dibujo delante: la foto de un artículo de la familia, y si no la hay,
   su icono. Se reconoce antes por la imagen que leyendo el rótulo. */
.to-fam { display: inline-flex; align-items: center; gap: 7px; }

.to-fam img {
    width: 24px;
    height: 24px;
    object-fit: cover;
    border-radius: 5px;
    background: var(--to-papel);
}

.to-fam i { font-size: 14px; opacity: .75; }

.to-fam:hover { color: var(--to-principal); }
.to-fam.on { color: var(--to-principal); border-bottom-color: var(--to-principal); }

/* ═══════════════════════════════════════════════════════ portada */
.to-heroe {
    position: relative;
    background: linear-gradient(135deg, var(--to-oscuro), var(--to-principal) 62%, var(--to-claro));
    color: var(--to-contraste);
    overflow: hidden;
}

.to-heroe::after {
    /* Un brillo suave arriba a la derecha: da profundidad sin cargar. */
    content: "";
    position: absolute;
    inset: -40% -10% auto auto;
    width: 60%;
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(255, 255, 255, .18), transparent 62%);
    pointer-events: none;
}

.to-heroe-dentro {
    position: relative;
    z-index: 1;
    max-width: var(--to-max);
    margin: 0 auto;
    padding: 68px 20px 74px;
    display: grid;
    gap: 32px;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    align-items: center;
}

@media (max-width: 900px) {
    .to-heroe-dentro { grid-template-columns: 1fr; padding: 46px 20px 50px; }
}

.to-heroe h1 {
    font-size: clamp(30px, 4.6vw, 48px);
    line-height: 1.1;
    letter-spacing: -.03em;
    margin: 0 0 14px;
    text-wrap: balance;
    font-weight: 800;
}

.to-heroe p {
    font-size: 16.5px;
    opacity: .92;
    margin: 0 0 26px;
    max-width: 46ch;
}

.to-heroe-foto {
    border-radius: calc(var(--to-radio) + 6px);
    overflow: hidden;
    box-shadow: var(--to-sombra-alta);
    aspect-ratio: 4 / 3;
    background: rgba(255, 255, 255, .12);
}

.to-heroe-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* garantías */
.to-garantias {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1px;
    background: var(--to-linea);
    border-block: 1px solid var(--to-linea);
}

.to-garantia {
    background: var(--to-carta);
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 13px;
}

.to-garantia i {
    font-size: 19px;
    color: var(--to-principal);
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    background: var(--to-tenue);
    border-radius: 11px;
    flex: 0 0 auto;
}

.to-garantia b { display: block; font-size: 13.5px; }
.to-garantia span { font-size: 12px; color: var(--to-texto-suave); }

/* ═══════════════════════════════════════════════════════ secciones */
.to-seccion { padding: 46px 0; }

.to-seccion-cab {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}

.to-seccion h2 {
    font-size: 23px;
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 0;
}

.to-seccion-cab p {
    margin: 4px 0 0;
    font-size: 13.5px;
    color: var(--to-texto-suave);
}

.to-mas {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--to-principal);
    white-space: nowrap;
}

/* tarjetas de familia */
.to-familias-rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 14px;
}

.to-familia-tarjeta {
    background: var(--to-carta);
    border: 1px solid var(--to-linea);
    border-radius: var(--to-radio);
    overflow: hidden;
    transition: transform .18s, box-shadow .18s, border-color .18s;
}

.to-familia-tarjeta:hover {
    transform: translateY(-3px);
    box-shadow: var(--to-sombra);
    border-color: color-mix(in srgb, var(--to-principal) 35%, var(--to-linea));
}

.to-familia-foto {
    aspect-ratio: 4 / 3;
    background: var(--to-tenue);
    display: grid;
    place-items: center;
    overflow: hidden;
}

.to-familia-foto img { width: 100%; height: 100%; object-fit: cover; }

.to-familia-txt { padding: 12px 14px 14px; }
.to-familia-txt b { font-size: 14px; display: block; line-height: 1.3; }
.to-familia-txt span { font-size: 12px; color: var(--to-texto-suave); }

/* ═══════════════════════════════════════════════════════ productos */
.to-rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
    gap: 16px;
}

.to-producto {
    background: var(--to-carta);
    border: 1px solid var(--to-linea);
    border-radius: var(--to-radio);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform .18s, box-shadow .18s, border-color .18s;
}

.to-producto:hover {
    transform: translateY(-3px);
    box-shadow: var(--to-sombra-alta);
    border-color: color-mix(in srgb, var(--to-principal) 35%, var(--to-linea));
}

.to-producto-foto {
    aspect-ratio: 1;
    background: #fff;
    display: grid;
    place-items: center;
    overflow: hidden;
    position: relative;
}

.to-producto-foto img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .3s;
}

.to-producto:hover .to-producto-foto img { transform: scale(1.045); }

.to-sello {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--to-acento);
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 999px;
}

.to-sello.agotado { background: #6b7280; }

/* La oferta se marca en rojo: es el único sitio donde la tienda grita. */
.to-sello.oferta {
    background: #d92d20;
    font-size: 12px;
    letter-spacing: 0;
    padding: 4px 10px;
}

.to-producto-datos {
    padding: 12px 13px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 auto;
}

.to-producto-familia {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--to-principal);
}

.to-producto-nombre {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
}

.to-producto-pie {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 8px;
}

.to-precio {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.to-precio small {
    display: block;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--to-texto-suave);
    letter-spacing: 0;
}

/* Precio rebajado: el de antes tachado y pequeño encima del nuevo. */
.to-precio.rebajado { color: #d92d20; }

.to-antes {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--to-texto-suave);
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    letter-spacing: 0;
    margin-bottom: -2px;
}

.to-ficha-precio.rebajado { color: #d92d20; }

.to-ficha-antes {
    font-size: 19px;
    font-weight: 600;
    color: var(--to-texto-suave);
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    margin-right: 12px;
    letter-spacing: -.01em;
}

.to-ahorro {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fdeced;
    color: #98232c;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12.5px;
    font-weight: 800;
    margin-left: 4px;
    vertical-align: middle;
}

.to-anadir {
    border: 0;
    background: var(--to-principal);
    color: var(--to-contraste);
    width: 38px;
    height: 38px;
    border-radius: 11px;
    font-size: 14px;
    cursor: pointer;
    flex: 0 0 auto;
    transition: background .15s, transform .12s;
}

.to-anadir:hover { background: var(--to-oscuro); }
.to-anadir:active { transform: scale(.94); }
.to-anadir[disabled] { background: var(--to-linea); color: var(--to-texto-suave); cursor: not-allowed; }

/* ═══════════════════════════════════════════════════════ catálogo */
.to-catalogo {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    gap: 28px;
    padding: 26px 0 60px;
}

@media (max-width: 860px) {
    .to-catalogo { grid-template-columns: 1fr; }

    /* Los filtros, arriba. Estaban puestos detrás de los artículos (order: 2)
       y en el móvil eso los deja al final de la lista: con dos mil artículos,
       para filtrar por pulgadas había que bajar hasta el fondo, así que nadie
       los encontraba. Van delante, que es donde se busca lo que acota. El
       botón los mantiene plegados: ocupan una línea, no media pantalla. */
    .to-filtros { order: 0; }
}

.to-filtros {
    align-self: start;
    position: sticky;
    top: calc(var(--to-cabecera) + 14px);
}

.to-filtro-grupo {
    background: var(--to-carta);
    border: 1px solid var(--to-linea);
    border-radius: var(--to-radio);
    padding: 14px 16px;
    margin-bottom: 12px;
}

.to-filtro-grupo h3 {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--to-texto-suave);
    margin: 0 0 10px;
}

.to-filtro-lista { display: flex; flex-direction: column; gap: 2px; }

.to-filtro-lista a {
    font-size: 13.5px;
    padding: 6px 9px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    transition: background .13s, color .13s;
}

.to-filtro-lista a:hover { background: var(--to-papel); }
.to-filtro-lista a.on { background: var(--to-tenue); color: var(--to-principal); font-weight: 700; }
.to-filtro-lista a span { color: var(--to-texto-suave); font-size: 12px; }

/* ── Familias con subfamilias ──
   La madre se distingue en negrita y las hijas van sangradas con una guía a
   la izquierda. Cerradas de entrada: con 45 familias, abrirlas todas deja un
   lateral de tres pantallas. */
.to-filtro-lista a.to-fam-madre { font-weight: 650; }

.to-fam-hijas {
    display: none;
    margin: 1px 0 4px 10px;
    padding-left: 8px;
    border-left: 2px solid var(--to-borde, #e5e7eb);
}

.to-fam-hijas.to-fam-abierta { display: block; }

.to-fam-hijas a { font-size: 13px; padding: 5px 8px; }

.to-precio-campos { display: flex; gap: 8px; align-items: center; }

.to-precio-campos input {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--to-linea);
    border-radius: 9px;
    padding: 7px 9px;
    font-size: 13px;
    outline: 0;
}

.to-precio-campos input:focus { border-color: var(--to-principal); }

.to-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    background: var(--to-principal);
    color: var(--to-contraste);
    border-radius: 11px;
    padding: 11px 20px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, transform .12s;
}

.to-btn:hover { background: var(--to-oscuro); }
.to-btn:active { transform: scale(.985); }
.to-btn.ancho { width: 100%; }
.to-btn.claro { background: var(--to-carta); color: var(--to-principal); border: 1px solid var(--to-linea); }
.to-btn.claro:hover { background: var(--to-tenue); }
.to-btn.blanco { background: #fff; color: var(--to-principal); }
.to-btn[disabled] { background: var(--to-linea); color: var(--to-texto-suave); cursor: not-allowed; }

/* barra de resultados */
.to-resultados {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.to-resultados-txt { font-size: 13.5px; color: var(--to-texto-suave); }
.to-resultados-txt b { color: var(--to-tinta); }

.to-orden {
    border: 1px solid var(--to-linea);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 13.5px;
    background: var(--to-carta);
    color: inherit;
    outline: 0;
    cursor: pointer;
}

/* migas */
.to-migas {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
    font-size: 12.5px;
    color: var(--to-texto-suave);
    padding: 16px 0 0;
}

.to-migas a:hover { color: var(--to-principal); }
.to-migas i { font-size: 9px; opacity: .5; }

/* paginación */
.to-paginas {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 34px;
}

.to-paginas a, .to-paginas span {
    min-width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    border: 1px solid var(--to-linea);
    background: var(--to-carta);
    font-size: 13.5px;
    font-weight: 600;
    padding: 0 10px;
}

.to-paginas a:hover { border-color: var(--to-principal); color: var(--to-principal); }
.to-paginas .on { background: var(--to-principal); border-color: var(--to-principal); color: var(--to-contraste); }
.to-paginas .mudo { opacity: .4; }

/* ═══════════════════════════════════════════════════════ ficha */
.to-ficha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
    gap: 40px;
    padding: 26px 0 60px;
}

@media (max-width: 900px) {
    .to-ficha { grid-template-columns: 1fr; gap: 26px; }
}

.to-galeria-grande {
    background: var(--to-carta);
    border: 1px solid var(--to-linea);
    border-radius: var(--to-radio);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.to-galeria-grande img { width: 100%; height: 100%; object-fit: contain; }

.to-galeria-tira {
    display: flex;
    gap: 9px;
    margin-top: 11px;
    overflow-x: auto;
    scrollbar-width: none;
}

.to-galeria-tira::-webkit-scrollbar { display: none; }

.to-mini {
    flex: 0 0 auto;
    width: 68px;
    height: 68px;
    border-radius: 10px;
    border: 2px solid var(--to-linea);
    background: var(--to-carta);
    overflow: hidden;
    cursor: pointer;
    padding: 0;
}

.to-mini img { width: 100%; height: 100%; object-fit: contain; }
.to-mini.on { border-color: var(--to-principal); }

.to-ficha-familia {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--to-principal);
}

.to-ficha h1 {
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.2;
    margin: 8px 0 6px;
    text-wrap: balance;
}

.to-ficha-ref { font-size: 12.5px; color: var(--to-texto-suave); }

.to-ficha-precio {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    margin: 18px 0 2px;
}

.to-ficha-iva { font-size: 12.5px; color: var(--to-texto-suave); }

.to-stock {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    margin: 16px 0;
}

.to-stock .punto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #16a34a;
}

.to-stock.no { color: var(--to-texto-suave); }
.to-stock.no .punto { background: #9ca3af; }

.to-variantes { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 20px; }

.to-variante {
    border: 1.5px solid var(--to-linea);
    background: var(--to-carta);
    border-radius: 10px;
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.to-variante:hover { border-color: var(--to-principal); }
.to-variante.on { border-color: var(--to-principal); background: var(--to-tenue); color: var(--to-principal); }
.to-variante[disabled] { opacity: .45; cursor: not-allowed; text-decoration: line-through; }

.to-comprar { display: flex; gap: 10px; align-items: stretch; }

.to-cantidad {
    display: flex;
    align-items: center;
    border: 1px solid var(--to-linea);
    border-radius: 11px;
    background: var(--to-carta);
    overflow: hidden;
    flex: 0 0 auto;
}

.to-cantidad button {
    border: 0;
    background: none;
    width: 38px;
    height: 44px;
    font-size: 15px;
    cursor: pointer;
    color: var(--to-texto-suave);
}

.to-cantidad button:hover { color: var(--to-principal); background: var(--to-papel); }

.to-cantidad input {
    width: 46px;
    border: 0;
    outline: 0;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: none;
    color: inherit;
    -moz-appearance: textfield;
}

.to-cantidad input::-webkit-outer-spin-button,
.to-cantidad input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.to-comprar .to-btn { flex: 1 1 auto; padding: 13px 20px; font-size: 15px; }

.to-descripcion {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--to-linea);
    font-size: 14.5px;
    line-height: 1.7;
    color: #33443d;
    white-space: pre-line;
}

/* ═══════════════════════════════════════════════════════ avisos */
.to-avisos-zona { padding-top: 14px; }

.to-aviso {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 12px 15px;
    border-radius: 12px;
    font-size: 14px;
    margin-bottom: 9px;
    border: 1px solid;
}

.to-aviso.ok { background: var(--to-tenue); border-color: color-mix(in srgb, var(--to-principal) 30%, transparent); color: var(--to-oscuro); }
.to-aviso.ojo { background: #fdf1e7; border-color: #f0d0b0; color: #8a3f14; }
.to-aviso.mal { background: #fdeced; border-color: #f3c3c7; color: #98232c; }
.to-aviso i { margin-top: 2px; }

.to-vacio {
    text-align: center;
    padding: 64px 20px;
    color: var(--to-texto-suave);
}

.to-vacio i { font-size: 42px; opacity: .25; display: block; margin-bottom: 14px; }
.to-vacio b { display: block; font-size: 17px; color: var(--to-tinta); margin-bottom: 5px; }

/* ═══════════════════════════════════════════════════════ pie */
.to-pie {
    background: var(--to-tinta);
    color: #cfdad5;
    margin-top: 40px;
    padding: 44px 0 0;
}

.to-pie-rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 30px;
    padding-bottom: 34px;
}

.to-pie h4 {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 12px;
}

.to-pie a { display: block; font-size: 13.5px; padding: 3px 0; color: #cfdad5; }
.to-pie a:hover { color: #fff; }
.to-pie p { font-size: 13.5px; margin: 0 0 8px; line-height: 1.6; }

.to-pie-abajo {
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding: 16px 0;
    font-size: 12.5px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    align-items: center;
    opacity: .8;
}

.to-pagos { display: flex; gap: 10px; font-size: 21px; opacity: .75; }

/* ═══════════════════════════════════════════════════════ móvil */
@media (max-width: 760px) {
    .to-barra { flex-wrap: wrap; gap: 12px; padding: 12px 16px; }
    .to-buscar { order: 3; width: 100%; flex-basis: 100%; }
    .to-marca { flex: 1 1 auto; }
    .to-marca-lema { display: none; }
    .to-accion span { display: none; }
    .to-accion { padding: 8px 10px; }
    .to-ancho { padding: 0 16px; }
    .to-seccion { padding: 32px 0; }
    /* Dos por fila fijas, como en cualquier tienda del móvil: con auto-fill
       una pantalla estrecha se quedaba en una sola columna y había que hacer
       scroll eterno para ver cuatro artículos. */
    .to-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .to-familias-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

    /* Y la tarjeta encoge para que quepan las dos sin apreturas. */
    .to-producto-txt { padding: 8px 9px 10px; }
    .to-producto-nombre { font-size: 12.5px; line-height: 1.3; }
    .to-producto-precio { font-size: 15px; }
    .to-producto-familia { font-size: 9.5px; }
    .to-producto .to-btn { padding: 7px 9px; font-size: 12px; }
}

/* ═══════════════════════════════════════════════════════ cesta y compra */
.to-cesta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 350px;
    gap: 26px;
    padding: 24px 0 50px;
}

@media (max-width: 880px) {
    .to-cesta { grid-template-columns: 1fr; }
    .to-resumen { position: static !important; }
}

.to-pasos {
    display: flex;
    margin: 20px 0 0;
    background: var(--to-carta);
    border: 1px solid var(--to-linea);
    border-radius: 12px;
    overflow: hidden;
}

.to-paso {
    flex: 1;
    padding: 12px 10px;
    text-align: center;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--to-texto-suave);
    border-right: 1px solid var(--to-linea);
}

.to-paso:last-child { border-right: 0; }
.to-paso.on { background: var(--to-tenue); color: var(--to-principal); }
.to-paso.hecho { color: #16a34a; }

.to-linea-cesta {
    display: flex;
    gap: 14px;
    background: var(--to-carta);
    border: 1px solid var(--to-linea);
    border-radius: var(--to-radio);
    padding: 12px;
    margin-bottom: 10px;
    align-items: center;
}

.to-linea-foto {
    width: 76px;
    height: 76px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid var(--to-linea);
    display: grid;
    place-items: center;
    overflow: hidden;
    flex: 0 0 auto;
}

.to-linea-foto img { width: 100%; height: 100%; object-fit: contain; }
.to-linea-txt { flex: 1 1 auto; min-width: 0; }
.to-linea-txt b { font-size: 14px; display: block; line-height: 1.35; }
.to-linea-txt span { font-size: 12px; color: var(--to-texto-suave); }

.to-linea-total {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    min-width: 90px;
    text-align: right;
    font-size: 15px;
}

.to-quitar {
    border: 0;
    background: none;
    color: var(--to-texto-suave);
    cursor: pointer;
    padding: 8px;
    font-size: 14px;
    border-radius: 8px;
}

.to-quitar:hover { color: #b42318; background: #fdeced; }

.to-resumen {
    background: var(--to-carta);
    border: 1px solid var(--to-linea);
    border-radius: var(--to-radio);
    padding: 18px;
    align-self: start;
    position: sticky;
    top: calc(var(--to-cabecera) + 14px);
}

.to-resumen h3 { margin: 0 0 14px; font-size: 16px; font-weight: 800; }

.to-fila {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    padding: 6px 0;
    font-variant-numeric: tabular-nums;
}

.to-fila.total {
    border-top: 1px solid var(--to-linea);
    margin-top: 8px;
    padding-top: 12px;
    font-size: 19px;
    font-weight: 800;
}

.to-fila .gratis { color: #16a34a; font-weight: 700; }
.to-fila.tenue { color: var(--to-texto-suave); font-size: 12.5px; }

.to-progreso {
    background: var(--to-tenue);
    border-radius: 11px;
    padding: 11px 13px;
    margin-top: 12px;
    font-size: 12.5px;
    color: var(--to-oscuro);
    display: flex;
    gap: 9px;
    align-items: center;
}

.to-bloque {
    background: var(--to-carta);
    border: 1px solid var(--to-linea);
    border-radius: var(--to-radio);
    padding: 18px;
    margin-bottom: 16px;
}

.to-bloque h2 {
    font-size: 17px;
    font-weight: 800;
    margin: 0 0 14px;
    letter-spacing: -.01em;
}

.to-campo { margin-bottom: 12px; }

.to-campo label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--to-texto-suave);
    margin-bottom: 5px;
}

.to-campo input,
.to-campo select,
.to-campo textarea {
    width: 100%;
    border: 1px solid var(--to-linea);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 14px;
    outline: 0;
    background: var(--to-carta);
    color: inherit;
    font-family: inherit;
}

.to-campo input:focus,
.to-campo select:focus,
.to-campo textarea:focus {
    border-color: var(--to-principal);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--to-principal) 14%, transparent);
}

/* Particular o empresa: dos opciones en línea, del tamaño que se puede
   pulsar con el dedo sin apuntar. */
.to-tipo-cuenta { display: flex; gap: 10px; flex-wrap: wrap; }

.to-tipo {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 140px;
    border: 1px solid var(--to-linea);
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    color: inherit;
    margin: 0;
}

.to-tipo input { width: auto; margin: 0; accent-color: var(--to-marca); }

.to-tipo:has(input:checked) {
    border-color: var(--to-marca);
    background: var(--to-marca-suave, rgba(12, 125, 104, .06));
}

.to-ayuda {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: var(--to-texto-suave);
}

.to-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.to-tres { display: grid; grid-template-columns: .7fr 1.3fr 1fr; gap: 12px; }

@media (max-width: 560px) {
    .to-dos, .to-tres { grid-template-columns: 1fr; }
}

.to-opcion {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1.5px solid var(--to-linea);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 9px;
    background: var(--to-carta);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.to-opcion:hover { border-color: color-mix(in srgb, var(--to-principal) 45%, var(--to-linea)); }
.to-opcion input { position: absolute; opacity: 0; pointer-events: none; }
.to-opcion.on { border-color: var(--to-principal); background: var(--to-tenue); }

.to-opcion .radio {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--to-linea);
    flex: 0 0 auto;
}

.to-opcion.on .radio { border-color: var(--to-principal); box-shadow: inset 0 0 0 4px var(--to-principal); }
.to-opcion b { font-size: 13.5px; display: block; }
.to-opcion .sub { font-size: 12px; color: var(--to-texto-suave); }
.to-opcion .precio { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; }
.to-opcion i.pago { font-size: 22px; color: var(--to-principal); width: 30px; text-align: center; }

.to-aviso-caja {
    background: var(--to-tenue);
    border-radius: 11px;
    padding: 11px 14px;
    font-size: 13px;
    color: var(--to-oscuro);
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 14px;
}

/* confirmación */
.to-hecho { text-align: center; padding: 44px 20px 20px; max-width: 620px; margin: 0 auto; }

.to-hecho .marca {
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background: var(--to-tenue);
    color: var(--to-principal);
    display: grid;
    place-items: center;
    font-size: 38px;
    margin: 0 auto 20px;
}

.to-hecho h1 { font-size: 27px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 8px; }
.to-hecho p { color: var(--to-texto-suave); margin: 0 0 6px; font-size: 15px; }

.to-tarjeta-pedido {
    background: var(--to-carta);
    border: 1px solid var(--to-linea);
    border-radius: var(--to-radio);
    padding: 18px;
    text-align: left;
    margin: 24px 0;
}

.to-tarjeta-pedido .to-fila { border: 0; }

/* ═══════════════════════════════════════════════════════ idiomas */
.to-idiomas { position: relative; }

.to-idiomas > button {
    border: 0;
    background: none;
    cursor: pointer;
    font-family: inherit;
}

.to-idiomas-lista {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 60;
    background: var(--to-carta);
    border: 1px solid var(--to-linea);
    border-radius: 12px;
    box-shadow: var(--to-sombra-alta);
    padding: 6px;
    min-width: 168px;
}

.to-idiomas-lista.abierta { display: block; }

.to-idiomas-lista a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 11px;
    border-radius: 9px;
    font-size: 13.5px;
    white-space: nowrap;
}

.to-idiomas-lista a:hover { background: var(--to-papel); }
.to-idiomas-lista a.on { background: var(--to-tenue); color: var(--to-principal); font-weight: 700; }

.to-idiomas-lista b {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .06em;
    background: var(--to-tenue);
    color: var(--to-principal);
    border-radius: 5px;
    padding: 2px 6px;
    min-width: 28px;
    text-align: center;
}

.to-idiomas-lista a.on b { background: var(--to-principal); color: var(--to-contraste); }

/* ═══════════════════════════════════════════════════════ páginas */
.to-pagina { max-width: 780px; margin: 0 auto; padding: 30px 0 60px; }

.to-pagina h1 {
    font-size: clamp(26px, 3.6vw, 36px);
    font-weight: 800;
    letter-spacing: -.03em;
    margin: 0 0 6px;
    text-wrap: balance;
}

.to-pagina .entradilla {
    font-size: 17px;
    color: var(--to-texto-suave);
    margin: 0 0 26px;
    line-height: 1.6;
}

.to-pagina-cuerpo { font-size: 15.5px; line-height: 1.75; }
.to-pagina-cuerpo h2 { font-size: 21px; font-weight: 800; letter-spacing: -.02em; margin: 30px 0 10px; }
.to-pagina-cuerpo h3 { font-size: 17px; font-weight: 700; margin: 24px 0 8px; }
.to-pagina-cuerpo p { margin: 0 0 14px; }
.to-pagina-cuerpo ul, .to-pagina-cuerpo ol { margin: 0 0 14px; padding-left: 22px; }
.to-pagina-cuerpo li { margin-bottom: 5px; }
.to-pagina-cuerpo a { color: var(--to-principal); font-weight: 600; }
.to-pagina-cuerpo a:hover { text-decoration: underline; }

.to-pagina-cuerpo img {
    border-radius: var(--to-radio);
    margin: 8px 0 18px;
    box-shadow: var(--to-sombra);
}

.to-pagina-cuerpo blockquote {
    border-left: 3px solid var(--to-principal);
    background: var(--to-tenue);
    margin: 18px 0;
    padding: 14px 18px;
    border-radius: 0 12px 12px 0;
    color: var(--to-oscuro);
}

.to-enlace-web {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 26px;
    background: var(--to-tenue);
    color: var(--to-principal);
    border-radius: 12px;
    padding: 13px 20px;
    font-weight: 700;
    font-size: 14.5px;
    transition: background .15s;
}

.to-enlace-web:hover { background: color-mix(in srgb, var(--to-principal) 18%, #fff); }

/* ═══════════════════════════════════════ lo que trae la plantilla */
/* La proporción de la foto y las columnas las pone TiendaPlantilla. */
.to-producto-foto { aspect-ratio: var(--to-foto, 1/1); }
.to-rejilla { grid-template-columns: repeat(auto-fill, minmax(var(--to-ancho-tarjeta, 212px), 1fr)); }

/*
 * Y en el móvil, dos por fila, otra vez.
 *
 * La regla de arriba viene después del bloque de móvil y lo pisaba: con
 * auto-fill y tarjetas de 212px, en una pantalla de 360px solo cabía UNA
 * columna, así que las ofertas salían de una en una y había que bajar media
 * pantalla por artículo. Va aquí, detrás, porque en CSS a igual especificidad
 * manda la última.
 */
@media (max-width: 760px) {
    .to-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Variante en muestra de color: el círculo ES el producto (moda, pintura). */
.to-variantes.to-var-color { gap: 10px; }

.to-var-color .to-variante {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    padding: 0;
    font-size: 0;
    border-width: 2px;
    background: var(--to-linea);
    position: relative;
}

.to-var-color .to-variante.on::after {
    content: "";
    position: absolute;
    inset: -6px;
    border: 2px solid var(--to-principal);
    border-radius: 50%;
}

/* Variante en talla: cuadraditos iguales, como en cualquier zapatería. */
.to-var-talla .to-variante {
    min-width: 48px;
    padding: 10px 6px;
    text-align: center;
}

/* Variante en tamaño: pastilla ancha con su precio (ramos, packs). */
.to-var-tamano .to-variante { padding: 12px 18px; font-size: 14px; }

/* Precio oculto: se pone el texto que haya configurado la empresa. */
.to-precio.consultar,
.to-ficha-precio.consultar {
    font-size: 15px;
    font-weight: 700;
    color: var(--to-principal);
    letter-spacing: 0;
}

.to-ficha-precio.consultar { font-size: 22px; }

/* ═══════════════════════════════════════════════════════ vídeo */
.to-video {
    position: relative;
    border-radius: var(--to-radio);
    overflow: hidden;
    background: #000;
    aspect-ratio: 16 / 9;
    box-shadow: var(--to-sombra-alta);
}

.to-video iframe,
.to-video video { width: 100%; height: 100%; border: 0; display: block; }

.to-seccion-ofertas { background: linear-gradient(180deg, #fdeced22, transparent 60%); }

.to-quitar-filtros {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--to-tenue);
    color: var(--to-principal);
    border-radius: 10px;
    padding: 9px 13px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 12px;
}

.to-filtros-movil { display: none; }

/* ═══════════════════════════════════════ menú de abajo, en el móvil */
.to-menu-movil { display: none; }

@media (max-width: 860px) {
    body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }

    .to-menu-movil {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 70;
        background: var(--to-carta);
        border-top: 1px solid var(--to-linea);
        padding: 6px 2px calc(8px + env(safe-area-inset-bottom));
        box-shadow: 0 -2px 14px rgba(16, 36, 30, .07);
    }

    .to-menu-movil a {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        padding: 5px 0;
        color: var(--to-texto-suave);
        position: relative;
        min-width: 0;
    }

    /* Iconos grandes y con peso: en el móvil se ven de reojo y con el dedo
       encima, así que si son finos no se distinguen. */
    .to-menu-movil i { font-size: 20px; line-height: 1; }

    .to-menu-movil span {
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: -.01em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .to-menu-movil a.on { color: var(--to-principal); }

    /* Una barrita arriba marca dónde estás, además del color. */
    .to-menu-movil a.on::before {
        content: "";
        position: absolute;
        top: -6px;
        width: 26px;
        height: 3px;
        border-radius: 0 0 3px 3px;
        background: var(--to-principal);
    }

    .to-globo-movil {
        position: absolute;
        top: 0;
        right: 50%;
        transform: translateX(19px);
        min-width: 17px;
        height: 17px;
        padding: 0 4px;
        border-radius: 999px;
        background: var(--to-acento);
        color: #fff;
        font-size: 10px;
        font-weight: 800;
        line-height: 17px;
        text-align: center;
        font-style: normal;
    }

    /* En el móvil la cesta y la cuenta ya están abajo: fuera de la cabecera. */
    .to-acciones .to-accion:not(.to-idiomas > *) { display: none; }
    .to-idiomas { display: block; }

    /* Los filtros se despliegan con un botón, no ocupan media pantalla. */
    .to-filtros-movil { display: flex; margin-bottom: 12px; }
    .to-filtros-caja { display: none; }
    .to-filtros-caja.abierta { display: block; }
    .to-filtros { position: static; }
}

/* ═══════════════════════════════════════════════════════ acceso */
.to-acceso { max-width: 460px; margin: 0 auto; padding: 34px 0 60px; }

.to-acceso-caja {
    background: var(--to-carta);
    border: 1px solid var(--to-linea);
    border-radius: var(--to-radio);
    padding: 0 0 22px;
    box-shadow: var(--to-sombra);
    overflow: hidden;
}

.to-acceso-pestanas {
    display: flex;
    border-bottom: 1px solid var(--to-linea);
    margin-bottom: 22px;
}

.to-acceso-pestanas a {
    flex: 1;
    text-align: center;
    padding: 15px 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--to-texto-suave);
    border-bottom: 2px solid transparent;
}

.to-acceso-pestanas a.on { color: var(--to-principal); border-bottom-color: var(--to-principal); }
.to-acceso-caja form { padding: 0 22px; }
.to-acceso-pie { text-align: center; margin-top: 16px; font-size: 13.5px; }
.to-acceso-pie a { color: var(--to-principal); font-weight: 600; }

.to-acceso-nota {
    font-size: 12.5px;
    color: var(--to-texto-suave);
    margin: 0 0 14px;
    line-height: 1.5;
}

.to-acceso-invitado {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--to-tenue);
    border-radius: var(--to-radio);
    padding: 16px 18px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.to-acceso-invitado i { font-size: 20px; color: var(--to-principal); }
.to-acceso-invitado > div { flex: 1 1 180px; }
.to-acceso-invitado b { display: block; font-size: 14px; }
.to-acceso-invitado span { font-size: 12.5px; color: var(--to-texto-suave); }

/* El interrogante de ayuda: presente pero discreto. */
.to-ayuda { color: var(--to-texto-suave); }
.to-ayuda:hover { color: var(--to-principal); background: var(--to-tenue); }

@media (max-width: 860px) {
    /* En el móvil la cabecera va justa: se queda el icono, sin etiqueta. */
    .to-acciones .to-ayuda { display: flex; }
    .to-acciones .to-ayuda span { display: none; }
}

/* El vídeo de escaparate llena su marco sin deformarse ni dejar franjas. */
.to-video video { object-fit: cover; }

/* El logo, más grande: cuando lleva el nombre dentro es toda la cabecera. */
.to-marca img { height: 54px; }

@media (max-width: 760px) {
    .to-marca img { height: 42px; }
}

/* El dibujo de la familia, cuando no hay foto de sus artículos. */
.to-familia-foto i {
    font-size: 34px;
    color: var(--to-principal);
    opacity: .55;
}

/* ── la cuenta del cliente ─────────────────────────────────────────────
   Solo lo que no tenía ya la tienda: la cabecera con el nombre, la pastilla
   de estado y la tabla de documentos. Lo demás son las piezas de siempre
   (to-bloque, to-fila, to-campo, las pestañas del acceso).             */

.to-cuenta { padding: 24px 0 50px; }

.to-cuenta-cab {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.to-cuenta-cab h1 { font-size: 23px; font-weight: 800; margin: 0; letter-spacing: -.02em; }
.to-cuenta-cab p { margin: 4px 0 0; color: var(--to-texto-suave); font-size: 13.5px; }

.to-cuenta-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }

@media (max-width: 880px) {
    .to-cuenta-dos { grid-template-columns: 1fr; }
}

/* El distintivo del estado: pagada, en preparación, servido… */
.to-pastilla {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .02em;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
    border: 1px solid;
}

.to-pastilla.ok { background: var(--to-tenue); border-color: color-mix(in srgb, var(--to-principal) 30%, transparent); color: var(--to-oscuro); }
.to-pastilla.ojo { background: #fdf1e7; border-color: #f0d0b0; color: #8a3f14; }
.to-pastilla.mal { background: #fdeced; border-color: #f3c3c7; color: #98232c; }

.to-tabla-docs { width: 100%; border-collapse: collapse; font-size: 14px; }

.to-tabla-docs th {
    text-align: left;
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--to-texto-suave);
    padding: 0 10px 9px;
    border-bottom: 1px solid var(--to-linea);
}

.to-tabla-docs td { padding: 12px 10px; border-bottom: 1px solid var(--to-linea); vertical-align: top; }
.to-tabla-docs tr:last-child td { border-bottom: 0; }
.to-tabla-docs .der { text-align: right; font-variant-numeric: tabular-nums; }
.to-tabla-docs a { color: var(--to-principal); }
.to-tabla-docs small { color: var(--to-texto-suave); font-size: 12px; }

/* En el móvil la tabla no cabe: se deja rodar en horizontal en su caja en
   vez de romper el ancho de toda la pantalla. */
@media (max-width: 620px) {
    .to-bloque:has(> .to-tabla-docs) { overflow-x: auto; }
    .to-tabla-docs { min-width: 460px; }
}

/* ── el vídeo, solo en pantalla ancha ──────────────────────────────────
   En el móvil se esconde el marco y, si el bloque tiene imagen, se enseña
   esa en su lugar. La descarga la corta tienda.js, que es quien pone el
   src: esconder un iframe no impide que se baje.                       */

.to-video-foto { display: none; }

@media (max-width: 760px) {
    .to-video { display: none; }

    .to-video-foto {
        display: block;
        border-radius: var(--to-radio);
        overflow: hidden;
    }

    .to-video-foto img { width: 100%; height: auto; display: block; }
}

/* El plazo de lo que va bajo pedido: en ámbar, que es un aviso, no un error. */
.to-linea-plazo {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
    font-size: 12px;
    font-weight: 600;
    color: #8a3f14;
}

.to-progreso.to-progreso-ojo {
    background: #fdf1e7;
    color: #8a3f14;
}

/* El recuadro del seguimiento, dentro de la ficha del pedido. */
.to-envio {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    background: var(--to-tenue);
    border-radius: var(--to-radio);
    padding: 14px 16px;
    margin-top: 16px;
}

.to-envio-txt { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.to-envio-txt .to-et-rotulo {
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--to-texto-suave);
    font-weight: 800;
    width: 100%;
}
.to-envio code { font-family: monospace; font-size: 13.5px; }

/* ── la línea de la cesta cuando no hay ancho ──────────────────────────
 *
 * En una sola fila no cabe: la foto (76), el contador (122), el total (90)
 * y la papelera (30), más los huecos y el relleno, suman unos 398 px de
 * piezas que NO encogen. En un teléfono de 360 solo hay unos 328 útiles, así
 * que al nombre le tocaba ancho negativo: se quedaba en una palabra por línea
 * («Aisens / Cable / USB / 2.0 / Tipo…») y la fila se salía por la derecha,
 * dejando el total fuera de la pantalla.
 *
 * El corte está en 1050 y no en el ancho de un móvil porque el problema no es
 * el teléfono, es el ancho que le queda a la línea: por encima de 880 px la
 * cesta abre la columna del resumen (350 px fijos) y a 900 el nombre volvía a
 * salir en seis líneas. Solo a partir de 1050 hay sitio de verdad para la fila
 * entera de una tirada.
 *
 * Aquí pasa a dos filas: arriba la foto, el nombre y la papelera; abajo el
 * contador y el total. Va al final del fichero a propósito, para que ninguna
 * regla posterior la pise.
 */
@media (max-width: 1050px) {
    .to-linea-cesta {
        position: relative;
        display: grid;
        /*
         * La segunda columna la mide el contador y la tercera se queda con lo
         * que sobre. Al revés —el total en una columna «auto»— el importe se
         * comía el hueco: con «1.078,80 €» quedaba pegado al botón «+», sin
         * ni un píxel entre medias.
         */
        grid-template-columns: 64px auto minmax(0, 1fr);
        grid-template-areas:
            "foto  texto  texto"
            "foto  cant   total";
        gap: 10px 12px;
        align-items: center;
        /* Hueco a la derecha para la papelera, que va suelta en la esquina. */
        padding: 12px 34px 12px 10px;
    }

    .to-linea-foto {
        grid-area: foto;
        width: 64px;
        height: 64px;
        align-self: start;
    }

    /*
     * El nombre ocupa las dos columnas de la derecha.
     *
     * Si se queda solo en la del medio, el ancho se lo marca el total de
     * debajo: con «1.078,80 €» el nombre bajaba a 115 px y salía en cuatro
     * líneas. Ocupando las dos, el importe ya no le quita sitio.
     */
    .to-linea-txt {
        grid-area: texto;
        /* Una referencia larga sin espacios no debe volver a romper la fila. */
        overflow-wrap: anywhere;
    }

    .to-linea-txt b { font-size: 13.5px; }
    .to-linea-txt span { font-size: 11.5px; }

    /* Fuera de la rejilla: dentro le robaría una columna al nombre. */
    .to-quitar { position: absolute; top: 8px; right: 4px; padding: 4px 6px; }

    /*
     * El contador, más estrecho: con sus 122 px de escritorio no quedaba sitio
     * para el total. Con 96 hay aire hasta en el caso peor —doce unidades y un
     * importe de cuatro cifras— sin bajar de los 32 px que necesita un botón
     * para poder pulsarse con el dedo.
     */
    .to-cantidad { grid-area: cant; justify-self: start; }
    .to-cantidad button { width: 32px; height: 38px; }
    .to-cantidad input { width: 32px; font-size: 14px; }

    .to-linea-total {
        grid-area: total;
        min-width: 0;
        justify-self: end;
        font-size: 15.5px;
        /* Un importe no se parte en dos líneas. */
        white-space: nowrap;
    }
}

/*
 * Y en los teléfonos estrechos, el total a su propia línea.
 *
 * Contador (96) e importe (78) más los huecos necesitan unos 374 px de
 * pantalla. Por debajo se pisaban: a 320 px el «1.078,80 €» se montaba 47 px
 * encima del botón «+». El corte está en 400 y no en 374 para dejar margen:
 * un móvil justo en la frontera no puede depender de que el relleno mida
 * exactamente lo que se calculó aquí.
 */
@media (max-width: 400px) {
    .to-linea-cesta {
        grid-template-columns: 56px minmax(0, 1fr);
        grid-template-areas:
            "foto  texto"
            "foto  cant"
            "foto  total";
        gap: 8px 10px;
    }

    .to-linea-foto { width: 56px; height: 56px; }
    .to-linea-total { justify-self: end; font-size: 16px; }
}

/* ── el aviso de «añadido» ─────────────────────────────────────────────
   Abajo, por encima del menú del móvil, y se va solo. Es la confirmación
   que faltaba: antes se pulsaba «+», se recargaba la página y no se veía
   absolutamente nada.                                                   */

.to-chivato {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translate(-50%, 16px);
    z-index: 200;
    max-width: min(92vw, 420px);
    background: var(--to-oscuro);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 20px;
    border-radius: 999px;
    box-shadow: var(--to-sombra-alta);
    opacity: 0;
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
    text-align: center;
}

.to-chivato.visible { opacity: 1; transform: translate(-50%, 0); }
.to-chivato.mal { background: #98232c; }

/* En el móvil sube, que abajo está la barra de navegación. */
@media (max-width: 760px) {
    .to-chivato { bottom: 84px; }
}

/* El tic del botón: verde un momento y vuelve. */
.to-anadir.hecho {
    background: #16a34a !important;
    border-color: #16a34a !important;
    color: #fff !important;
}

.to-anadir.hecho i::before { content: "\f00c"; }

@media (prefers-reduced-motion: reduce) {
    .to-chivato { transition: none; }
}

/* ── cuánto falta para el envío gratis ─────────────────────────────────
   La tira de la cabecera y la barra de la cesta. Los colores salen de las
   variables de la plantilla, así que cada tienda la ve con los suyos. */
.to-gratis-tira {
    display: flex;
    gap: 11px;
    align-items: center;
    background: var(--to-tenue);
    color: var(--to-oscuro);
    border-radius: var(--to-radio);
    padding: 10px 14px;
    margin-top: 12px;
    font-size: 13px;
    text-decoration: none;
}
.to-gratis-tira:hover { background: var(--to-suave); }
.to-gratis-texto { flex: 1; }

.to-gratis-barra {
    height: 6px;
    border-radius: 99px;
    background: var(--to-borde);
    margin-top: 6px;
    overflow: hidden;
}
.to-gratis-barra > span {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: var(--to-principal);
    /* Se anima al recargar tras añadir algo: se ve avanzar, que es la gracia. */
    transition: width .5s ease;
}

/* ── tablas dentro del contenido de una página ─────────────────────────
   El editor deja <table> sin clases, así que sin esto salía desnuda: sin
   bordes, sin cabecera y sin aire. En el móvil se desliza a lo ancho en
   lugar de estrujar las columnas hasta partir las palabras. */
.to-pagina-cuerpo table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: 14px;
}
.to-pagina-cuerpo th,
.to-pagina-cuerpo td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--to-borde);
    text-align: left;
    vertical-align: top;
}
.to-pagina-cuerpo thead th {
    background: var(--to-tenue);
    color: var(--to-oscuro);
    font-weight: 600;
    border-bottom: 2px solid var(--to-borde);
}
.to-pagina-cuerpo tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 640px) {
    .to-pagina-cuerpo table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ── filtros por características del lateral ───────────────────────────── */
.to-faceta {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    font-size: 13.5px;
    cursor: pointer;
}
.to-faceta input { accent-color: var(--to-principal); margin: 0; }
.to-faceta span { flex: 1; }
/* La cuenta va apagada: informa, pero no compite con el nombre. */
.to-faceta em {
    font-style: normal;
    font-size: 12px;
    color: var(--to-texto-suave);
}
.to-facetas .to-btn { margin-top: 4px; }