/* tienda-core — CSS base. Publicar con: php artisan vendor:publish --tag=tienda-assets --force */

/* ── Tokens de diseño ─────────────────────────────────────────────────────
   Capa de variables que cada tema (atributo data-tema en <html>, ver
   TiendaCoreServiceProvider + base.blade.php) puede reajustar. Los nombres
   antiguos (--color-principal, --font-base…) se conservan como alias para no
   romper las reglas existentes de este archivo. */
:root {
    /* Color */
    --color-principal: #000000; /* sobreescrito inline desde Setting::get('color_principal') */
    --color-acento: var(--color-principal);
    --color-texto: #1a1a1a;
    --color-texto-suave: #555555;
    --color-fondo: #ffffff;
    --color-fondo-alt: #f5f5f5;
    --color-borde: #e0e0e0;

    /* Tipografía */
    --font-base: 'Inter', system-ui, sans-serif;
    --tipo-cuerpo: var(--font-base);
    --tipo-titular: var(--font-base);
    --peso-titular: 700;

    /* Formas */
    --radio: 0;
    --sombra: 0 2px 4px rgba(0,0,0,.08);

    /* Barra superior (franja 1) */
    --barra-fondo: var(--color-fondo-alt);
    --barra-color: var(--color-texto-suave);
    --barra-borde: var(--color-borde);
    --barra-separador: var(--color-borde);

    /* Navegación (franja de menú de la cabecera) */
    --nav-fondo: var(--color-principal);
    --nav-color: #ffffff;
    --nav-borde: transparent;
    --nav-hover-fondo: rgba(255, 255, 255, .15);
    --nav-activo-color: var(--nav-color);
    --nav-activo-borde: transparent;

    /* Métrica */
    --ancho-max: 1200px;
    --gap: 1rem;
}

/* Tema muebles/decoración — titulares con serif (Fraunces, ver themes/muebles/partials/fuentes).
   Nav blanca sobre borde inferior + subrayado del ítem activo (el color de marca lo
   pone --color-principal, configurable por tienda). */
:root[data-tema="muebles"] {
    --tipo-titular: 'Fraunces', Georgia, 'Times New Roman', serif;
    --peso-titular: 500;
    --barra-fondo: #17130f;
    --barra-color: rgba(255, 255, 255, .82);
    --barra-borde: transparent;
    --barra-separador: rgba(255, 255, 255, .28);
    --nav-fondo: var(--color-fondo);
    --nav-color: var(--color-texto);
    --nav-borde: var(--color-borde);
    --nav-hover-fondo: transparent;
    --nav-activo-color: var(--color-texto);
    --nav-activo-borde: var(--color-principal);
}

/* Tema industrial — rediseño de menú "TodoContenedores" (ver
   "Rediseño de menú tienda/README.md"). La barra de nav y los enlaces "Ver
   todo" usaban un verde corporativo fijo (#6f9200, el de TodoContenedores);
   ahora derivan de --color-principal de la tienda (color-mix), igual que el
   resto del sitio — el verde solo aparecía si la tienda configuraba ese
   mismo color como principal. */
:root[data-tema="industrial"] {
    --tipo-titular: 'Archivo', system-ui, sans-serif;
    --tipo-cuerpo: 'Archivo', system-ui, sans-serif;
    --font-base: 'Archivo', system-ui, sans-serif;
    --peso-titular: 700;
    --radio: 6px;

    --industrial-verde: var(--color-principal);
    --industrial-verde-enlace: color-mix(in srgb, var(--color-principal) 85%, black);
    --industrial-verde-enlace-hover: color-mix(in srgb, var(--color-principal) 60%, black);
    --industrial-verde-texto-hover: color-mix(in srgb, var(--color-principal) 72%, black);
    --industrial-verde-tinte: color-mix(in srgb, var(--color-principal) 8%, white);
    --industrial-filete-movil: color-mix(in srgb, var(--color-principal) 22%, white);
    --industrial-titulo-grupo: #2b3318;
    --industrial-texto-enlace: #3d4335;
    --industrial-texto-secundario: #545a4a;
    --industrial-texto-terciario: #6a7160;
    --industrial-placeholder: #8b917e;
    --industrial-hairline: #e4e7dd;
    --industrial-borde-campo: #d3d7c9;
    --industrial-fondo-campo: #fbfbf8;

    --barra-fondo: #f4f5f0;
    --barra-color: var(--industrial-texto-secundario);
    --barra-borde: var(--industrial-hairline);
    --barra-separador: #c4c8bb;

    --nav-fondo: var(--industrial-verde);
    --nav-color: #ffffff;
    --nav-borde: transparent;
    --nav-hover-fondo: rgba(255, 255, 255, .12);
    --nav-activo-color: #ffffff;
    --nav-activo-borde: transparent;
}

/* Tema vintage — titulares con serif de carácter (Playfair Display, ver
   themes/vintage/partials/fuentes) y paleta cálida (salvia/terracota/crema),
   independiente de --color-principal de la tienda salvo donde se indica.
   El mega-menú añade una columna de imagen destacada por grupo, ver
   themes/vintage/components/_nav-submenu.blade.php y .tienda-header__mega-col-imagen. */
:root[data-tema="vintage"] {
    --tipo-titular: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --peso-titular: 600;
    --vintage-salvia: #5c6e51;
    --vintage-salvia-oscura: #3f4c38;
    --vintage-terracota: #b56a4b;
    --vintage-crema: #fbf7f0;
    --color-fondo-alt: var(--vintage-crema);
    --barra-fondo: var(--vintage-crema);
    --barra-color: #6b6656;
    --barra-borde: #e6e0d4;
    --barra-separador: #e6e0d4;
    --nav-fondo: #ffffff;
    --nav-color: var(--color-texto);
    --nav-borde: #e6e0d4;
    --nav-hover-fondo: transparent;
    --nav-activo-color: var(--vintage-salvia-oscura);
    --nav-activo-borde: var(--vintage-salvia);
}

/* ── Reset básico ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* El atributo [hidden] debe ganar siempre, incluso sobre reglas que fijan
   display explícitamente (p. ej. .tienda-modal { display: flex }) — sin esto,
   el modal de variantes y el dropdown del carrito se ven abiertos al cargar. */
[hidden] { display: none !important; }

html { font-size: 15px; scroll-behavior: smooth; }

body {
    font-family: var(--font-base);
    color: var(--color-texto);
    background: var(--color-fondo);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

a { color: var(--color-principal); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
    line-height: 1.25;
    font-family: var(--tipo-titular);
    font-weight: var(--peso-titular);
    margin-bottom: .5rem;
}

p { margin-bottom: 1rem; }

ul { list-style: none; }

/* ── Layout base ───────────────────────────────────────────────────────── */
.tienda-main {
    max-width: var(--ancho-max);
    margin: 0 auto;
    padding: 2rem;
    min-height: 60vh;
}

/* ── Header ────────────────────────────────────────────────────────────── */
.tienda-header {
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Franja 1 — barra de contacto */
.tienda-header__contacto {
    background: var(--barra-fondo);
    border-bottom: 1px solid var(--barra-borde);
    font-size: .8125rem;
    color: var(--barra-color);
}

.tienda-header__contacto-inner {
    max-width: var(--ancho-max);
    margin: 0 auto;
    padding: .5rem var(--gap);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.tienda-header__contacto-datos {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.tienda-header__contacto-datos a {
    color: inherit;
}

.tienda-header__contacto-datos a:hover {
    color: var(--color-principal);
}

.tienda-header__badges {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.tienda-header__badge {
    color: var(--color-texto-suave);
}

/* Barra superior configurable (menu_key='barra-superior') — lista de textos/enlaces
   cortos separados por un punto medio. Visibilidad por ítem (móvil/escritorio). */
.tienda-header__barra {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem 1rem;
    width: 100%;
    justify-content: center;
}

.tienda-header__barra-item {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: inherit;
    position: relative;
}

.tienda-header__barra-item + .tienda-header__barra-item::before {
    content: "·";
    position: absolute;
    left: -0.6rem;
    color: var(--barra-separador);
}

a.tienda-header__barra-item:hover { color: var(--color-acento); }

.tienda-header__barra-icono { font-style: normal; }

/* Por defecto (escritorio) los ítems 'solo móvil' se ocultan; en el media query
   de móvil se invierte. */
.tienda-header__barra-item--solo-movil { display: none; }

/* Franja 2 — marca + buscador + iconos */
.tienda-header__marca {
    background: var(--color-fondo);
    border-bottom: 1px solid var(--color-borde);
}

.tienda-header__marca-inner {
    max-width: var(--ancho-max);
    margin: 0 auto;
    padding: var(--gap);
    display: flex;
    align-items: center;
    gap: var(--gap);
}

.tienda-header__brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: var(--color-texto);
    text-decoration: none;
    flex-shrink: 0;
}

.tienda-header__brand:hover { text-decoration: none; }

.tienda-header__logo {
    height: 60px;
    width: auto;
    object-fit: contain;
}

.tienda-header__nombre {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-principal);
}

/* Favicon alternativo del logo — oculto salvo que un tema lo active en un
   hueco de cabecera demasiado estrecho para el logo completo (ver tema
   industrial en móvil, @media max-width:640px). */
.tienda-header__logo--favicon { display: none; }

.tienda-header__buscador {
    position: relative;
    flex: 1 1 auto;
    max-width: 480px;
    margin: 0 auto;
}

.tienda-header__buscador-icono {
    position: absolute;
    left: .85rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    color: var(--color-texto-suave);
    pointer-events: none;
}

.tienda-header__buscador input[type="search"] {
    width: 100%;
    padding: .625rem .875rem .625rem 2.5rem;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    font-family: var(--font-base);
    font-size: .9375rem;
}

.tienda-header__iconos {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.tienda-header__icono {
    display: flex;
    align-items: center;
    gap: .45rem;
    color: var(--color-texto);
}

.tienda-header__icono:hover {
    color: var(--color-principal);
    text-decoration: none;
}

/* Etiqueta de texto junto al icono (Mi cuenta / Cesta) — oculta salvo que el tema
   la active (p. ej. `muebles`, que muestra texto y convierte la cesta en pastilla). */
.tienda-header__icono-label { display: none; }

/* Botón hamburguesa — solo visible en móvil, ver @media (max-width: 640px) */
.tienda-header__menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: none;
    color: var(--color-texto);
    cursor: pointer;
    flex-shrink: 0;
}

/* Cerrar del panel lateral — solo visible cuando .tienda-header__nav es drawer (móvil) */
.tienda-header__nav-cerrar {
    display: none;
    position: absolute;
    top: .5rem;
    right: .5rem;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    cursor: pointer;
}

/* Cabecera del cajón móvil (marca + cierre) — solo se muestra dentro del drawer,
   ver @media (max-width: 640px). En escritorio no existe como fila del nav. */
.tienda-header__nav-cabecera { display: none; }

/* Ítems que solo tienen sentido en el cajón móvil (Mi cuenta, teléfono) — en
   escritorio ya están en la franja de iconos / el pie. La doble clase gana a
   `.tienda-header__nav-item { display: flex }` sin depender del orden. */
.tienda-header__nav-item.tienda-header__nav-item--solo-movil { display: none; }

/* Fondo oscuro tras el panel lateral — normalmente oculto vía [hidden] */
.tienda-header__overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 15, 15, .5);
    /* Por debajo del drawer (.tienda-header__nav, z-index 200) y por encima
       del resto del contenido/header (.tienda-header, z-index 100). */
    z-index: 190;
}

/* Franja 3 — nav (barra de color en `default`, blanca con borde en `muebles`;
   ambos casos vía tokens --nav-*). */
.tienda-header__nav {
    background: var(--nav-fondo);
}

.tienda-header__nav-inner {
    max-width: var(--ancho-max);
    margin: 0 auto;
    padding: 0 var(--gap);
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 1.5rem;
    /* Ancla del panel mega-menú (.tienda-header__submenu--mega), que se posiciona
       respecto al ancho de contenido y no respecto a su propio ítem. */
    position: relative;
}

.tienda-header__nav-inicio {
    display: flex;
    align-items: center;
    padding: .8rem 0;
    color: var(--nav-color);
    flex-shrink: 0;
}

.tienda-header__nav-inicio:hover {
    opacity: .8;
    text-decoration: none;
}

.tienda-header__nav-lista {
    display: flex;
    align-items: stretch;
    gap: .25rem;
    flex-wrap: wrap;
    /* En escritorio las dos listas (principal + secundaria) conviven en la misma
       barra: cada una mantiene su ancho natural en vez de encogerse y romper
       filas por dentro. En móvil pasan a columna, ver @media. */
    flex-shrink: 0;
}

.tienda-header__nav-item {
    position: relative;
    display: flex;
    align-items: stretch;
}

.tienda-header__nav-item > a {
    display: flex;
    align-items: center;
    padding: .8rem .9rem;
    color: var(--nav-color);
    font-size: .9375rem;
    font-weight: 500;
    border-bottom: 2px solid transparent;
}

.tienda-header__nav-item > a:hover {
    background: var(--nav-hover-fondo);
    text-decoration: none;
}

/* Ítem activo — subrayado (visible en `muebles`; en `default` --nav-activo-borde es
   transparent, así que la barra de color no cambia). */
.tienda-header__nav-item--activo > a {
    color: var(--nav-activo-color);
    border-bottom-color: var(--nav-activo-borde);
}

/* ══ Tema muebles — cabecera ═══════════════════════════════════════════════
   Ver mockups: franja 1 negra con los datos que venden (envío/plazo/devolución),
   buscador protagonista con icono, "Mi cuenta" en texto + "Cesta" en pastilla,
   nav blanca sin icono de casa y con subrayado fino del ítem activo. */

/* Franja 1 — negra, ítems repartidos a lo ancho */
[data-tema="muebles"] .tienda-header__contacto-inner { padding-top: .6rem; padding-bottom: .6rem; }
[data-tema="muebles"] .tienda-header__barra {
    justify-content: space-between;
    gap: .4rem 2rem;
}
[data-tema="muebles"] .tienda-header__barra-item + .tienda-header__barra-item::before { left: -1rem; }
[data-tema="muebles"] a.tienda-header__barra-item:hover { color: #fff; }

/* Franja 2 — buscador protagonista */
[data-tema="muebles"] .tienda-header__marca-inner { padding: 1.15rem var(--gap); gap: 1.75rem; }
[data-tema="muebles"] .tienda-header__buscador { max-width: 560px; }
[data-tema="muebles"] .tienda-header__buscador-icono { left: 1.1rem; }
[data-tema="muebles"] .tienda-header__buscador input[type="search"] {
    padding: .95rem 1.1rem .95rem 2.9rem;
    background: var(--color-fondo-alt);
    border-color: transparent;
    border-radius: 999px;
    font-size: 1rem;
}
[data-tema="muebles"] .tienda-header__buscador input[type="search"]:focus {
    outline: none;
    background: var(--color-fondo);
    border-color: var(--color-borde);
}

/* Franja 2 — iconos: "Mi cuenta" en texto, cesta como botón redondo de marca con
   el icono en blanco y el contador en un badge. */
[data-tema="muebles"] .tienda-header__iconos { gap: 1.25rem; }
[data-tema="muebles"] .tienda-header__icono--cuenta .tienda-header__icono-label { display: inline; font-size: .95rem; font-weight: 500; }
[data-tema="muebles"] .tienda-header__icono--cuenta svg { display: none; }
[data-tema="muebles"] .tienda-carrito-icono .tienda-header__icono,
[data-tema="muebles"] .tienda-header__icono--favoritos {
    width: 44px;
    height: 44px;
    justify-content: center;
    border-radius: 999px;
}
[data-tema="muebles"] .tienda-carrito-icono .tienda-header__icono {
    background: var(--color-principal);
    color: #fff;
}
[data-tema="muebles"] .tienda-carrito-icono .tienda-header__icono:hover {
    background: color-mix(in srgb, var(--color-principal) 82%, black);
    color: #fff;
}
/* Favoritos: mismo tamaño que la cesta pero secundario — contorno, sin relleno. */
[data-tema="muebles"] .tienda-header__icono--favoritos {
    border: 1px solid var(--color-borde);
    color: var(--color-texto);
}
[data-tema="muebles"] .tienda-header__icono--favoritos:hover {
    border-color: var(--color-principal);
    color: var(--color-principal);
}
[data-tema="muebles"] .tienda-header__icono--favoritos svg { width: 24px; height: 24px; }
[data-tema="muebles"] .tienda-carrito-icono .tienda-header__icono-label { display: none; }
[data-tema="muebles"] .tienda-carrito__badge {
    background: #fff;
    color: var(--color-principal);
    border: 1px solid currentColor;
    font-weight: 700;
}

/* Franja 3 — nav blanca, sin icono de casa, más aire, subrayado fino del activo */
[data-tema="muebles"] .tienda-header__nav-inicio { display: none; }
[data-tema="muebles"] .tienda-header__nav-inner { gap: 2.25rem; }
[data-tema="muebles"] .tienda-header__nav-lista { gap: 2rem; }
[data-tema="muebles"] .tienda-header__nav-item > a {
    padding: 1.05rem .1rem;
    font-size: 1rem;
    font-weight: 400;
}
[data-tema="muebles"] .tienda-header__nav-item--activo > a { font-weight: 600; }
[data-tema="muebles"] .tienda-header__nav-item:not(.tienda-header__nav-item--activo) > a:hover {
    border-bottom-color: var(--color-borde);
}
[data-tema="muebles"] .tienda-header__nav-item.tiene-submenu > a { gap: .35rem; }
[data-tema="muebles"] .tienda-header__nav-item.tiene-submenu > a::after { font-size: .95rem; opacity: .5; }

/* Flecha para los ítems de nivel superior con submenú (Categorías, Novedades...) —
   sin ella no había ninguna pista visual de que el ítem se puede abrir, sobre todo
   en el acordeón móvil. Mismo carácter que .tienda-header__submenu-flecha (nivel 2),
   pero en el color del propio texto: este ítem vive siempre sobre la barra de color,
   nunca sobre el panel claro del desplegable. */
.tienda-header__nav-item.tiene-submenu > a {
    justify-content: space-between;
    gap: .4rem;
}

.tienda-header__nav-item.tiene-submenu > a::after {
    content: '\203A';
    font-size: 1.15rem;
    line-height: 1;
    flex-shrink: 0;
    transition: transform .15s ease;
}

.tienda-header__nav-item.tiene-submenu.submenu-abierto > a::after {
    transform: rotate(90deg);
}

/* Submenú desplegable */
.tienda-header__submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    box-shadow: var(--sombra);
    border-radius: var(--radio);
    padding: 0;
    z-index: 10;
}

.tienda-header__submenu a {
    display: block;
    padding: .4rem .8rem;
    color: var(--color-texto);
    font-size: .9rem;
}

.tienda-header__submenu a:hover {
    background: var(--color-fondo-alt);
    color: var(--color-principal);
    text-decoration: none;
}

/* Hijo del submenú que corresponde a la página actual — marca sobria (callout 9:
   solo se resalta lo que es la página en la que estás). */
.tienda-header__submenu-item--activo > a {
    font-weight: 600;
    color: var(--color-principal);
}

/* ">" y no descendiente: que abrir el nivel 1 no vuelva visibles de golpe los
   flyouts de nivel 2 anidados dentro — cada nivel se abre por su propio hover/toggle. */
.tienda-header__nav-item.tiene-submenu:hover > .tienda-header__submenu,
.tienda-header__nav-item.tiene-submenu:focus-within > .tienda-header__submenu,
.tienda-header__nav-item.tiene-submenu.submenu-abierto > .tienda-header__submenu {
    display: block;
}

/* Subcategorías del bloque "Categorías" — flyout que se abre al lateral (no una lista
   apilada dentro del mismo panel), con flecha indicando que el ítem tiene submenú. */
.tienda-header__submenu-item--flyout {
    position: relative;
}

.tienda-header__submenu-item--flyout > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;
}

.tienda-header__submenu-flecha {
    color: var(--color-text-muted, #94a3b8);
    font-size: 1rem;
    line-height: 1;
}

.tienda-header__submenu--nivel2 {
    top: -0.4rem;
    left: 100%;
    margin-left: -.25rem;
}

.tienda-header__submenu-item--flyout:hover > .tienda-header__submenu--nivel2,
.tienda-header__submenu-item--flyout:focus-within > .tienda-header__submenu--nivel2,
.tienda-header__submenu-item--flyout.submenu-abierto > .tienda-header__submenu--nivel2 {
    display: block;
}

/* ══ Mega-menú ════════════════════════════════════════════════════════════
   Un ítem de nivel superior (grupo o enlace) cuyos hijos son a su vez grupos:
   cada hijo es una columna con su lista de enlaces (patrón "Estancias" de Leroy).
   El panel se ancla a .tienda-header__nav-inner (no al ítem) para poder ocupar
   el ancho de contenido; el ítem pasa a position:static para que así sea. */
.tienda-header__nav-item--mega {
    position: static;
}

.tienda-header__submenu--mega {
    left: 0;
    right: auto;
    width: max-content;
    max-width: min(94vw, 64rem);
    flex-wrap: wrap;
    gap: .25rem 1.5rem;
    padding: 1.5rem 1.25rem;
    /* Salvavidas: con muchas columnas/ítems el panel puede superar el alto del
       viewport; como .tienda-header es sticky, ese sobrante queda inalcanzable
       con scroll de página. Lo acotamos y añadimos scroll propio. */
    max-height: 80vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Gana a la regla genérica `…:hover > .tienda-header__submenu { display:block }`
   (misma especificidad, va después): el panel mega es flex, no block. */
.tienda-header__nav-item--mega.tiene-submenu:hover > .tienda-header__submenu--mega,
.tienda-header__nav-item--mega.tiene-submenu:focus-within > .tienda-header__submenu--mega,
.tienda-header__nav-item--mega.tiene-submenu.submenu-abierto > .tienda-header__submenu--mega {
    display: flex;
}

.tienda-header__submenu--mega > li {
    flex: 0 1 13rem;
    min-width: 0;
}

.tienda-header__mega-col {
    padding-bottom: .5rem;
}

.tienda-header__mega-col-titulo {
    display: block;
    padding: 0 .8rem .35rem;
    margin-bottom: .25rem;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-texto-suave);
    border-bottom: 1px solid var(--color-borde);
}

/* Título de columna que enlaza a la página hub del grupo. */
a.tienda-header__mega-col-titulo:hover,
a.tienda-header__mega-col-titulo:focus {
    color: var(--color-texto);
}

/* Contador de la columna (p.ej. "13") — oculto en escritorio (el panel ya lista
   los enlaces); visible en el acordeón del cajón móvil, ver @media max-width:640px. */
.tienda-header__mega-col-contador { display: none; }

.tienda-header__mega-col > ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* "Ver todo (N)" al pie de una columna / lista recortada → página hub del grupo. */
.tienda-header__mega-col-vermas a,
.tienda-header__submenu-item--vermas a {
    font-weight: 600;
    color: var(--color-principal);
}

/* "Ver todo" al pie del panel mega → página hub del grupo, a lo ancho. */
.tienda-header__submenu--mega > .tienda-header__submenu-item--vertodo {
    flex-basis: 100%;
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px solid var(--color-borde);
}

.tienda-header__submenu-item--vertodo a {
    font-weight: 600;
    color: var(--color-principal);
}

/* Panel del mega-menú a todo el ancho del contenido (el mismo --ancho-max que
   el resto de la página), en vez del max-width:64rem genérico — con más
   columnas + la imagen destacada, el panel angosto dejaba hueco vacío a la
   derecha, viéndose la página de fondo. */
[data-tema="vintage"] .tienda-header__submenu--mega {
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
}

/* Columna de imagen destacada del grupo, solo tema vintage — ver
   themes/vintage/components/_nav-submenu.blade.php. Ocupa el doble de una
   columna normal para leer como panel, no como otra lista de enlaces. */
[data-tema="vintage"] .tienda-header__mega-col-imagen {
    flex: 0 1 16rem;
    min-width: 0;
}

[data-tema="vintage"] .tienda-header__mega-col-imagen a {
    display: block;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

[data-tema="vintage"] .tienda-header__mega-col-imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

[data-tema="vintage"] .tienda-header__mega-col-imagen span {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: .6rem .8rem;
    background: linear-gradient(0deg, rgba(23, 19, 15, .72), rgba(23, 19, 15, 0) 70%);
    color: #fff;
    font-size: .82rem;
    font-weight: 600;
}

/* ══ Tema industrial — cabecera y megamenú de escritorio ═══════════════════
   Rediseño "TodoContenedores": retícula equilibrada del panel (auto-fit, cada
   grupo ocupa una celda completa, nunca se parte entre columnas) + acento de
   marca (--color-principal, vía --industrial-verde-*) en la nav, los "Ver
   todo" y los estados hover. Ver "Rediseño de menú tienda/README.md" para
   las specs exactas. */

/* Franja 1 — barra de utilidades */
[data-tema="industrial"] .tienda-header__contacto-inner { padding: 9px 20px; }
[data-tema="industrial"] .tienda-header__barra { gap: 4px 18px; font-size: 13px; }
[data-tema="industrial"] .tienda-header__barra-item + .tienda-header__barra-item::before { left: -9px; }

/* Franja 2 — cabecera: grid en vez de flex para poder centrar el buscador
   con independencia del ancho del logo/iconos. */
[data-tema="industrial"] .tienda-header__marca-inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 28px;
    padding: 16px;
}
[data-tema="industrial"] .tienda-header__buscador { max-width: 560px; margin: 0; }
[data-tema="industrial"] .tienda-header__buscador-icono { left: 14px; color: #6f7566; }
[data-tema="industrial"] .tienda-header__buscador input[type="search"] {
    padding: 11px 14px 11px 39px;
    border: 1px solid var(--industrial-borde-campo);
    border-radius: 8px;
    background: var(--industrial-fondo-campo);
    font-size: 14px;
}
[data-tema="industrial"] .tienda-header__buscador input[type="search"]::placeholder { color: var(--industrial-placeholder); }
[data-tema="industrial"] .tienda-header__iconos { gap: 18px; }
[data-tema="industrial"] .tienda-header__icono { color: #3d4234; }

/* Franja 3 — nav verde: los ítems no parten su etiqueta y hacen wrap como
   conjunto; el activo se marca con un tinte de fondo, no con un subrayado.
   Nota: el `html{font-size:15px}` del reset base hace que `rem` no equivalga
   a 16px aquí — estos tamaños van en px directos para no depender de eso. */
[data-tema="industrial"] .tienda-header__nav-inner { gap: 2px; padding: 0 12px; }
[data-tema="industrial"] .tienda-header__nav-item > a {
    padding:10px 16px;
    font-size: 15px;
    white-space: nowrap;
}
[data-tema="industrial"] .tienda-header__nav-item--activo > a {
    background: var(--nav-hover-fondo);
    font-weight: 600;
}
/* El icono de casa no tenía padding horizontal propio (solo vertical, herencia
   de la regla base) — con gap:2px quedaba pegado al fondo de hover/activo del
   siguiente ítem. El prototipo le da 14px a cada lado. */
[data-tema="industrial"] .tienda-header__nav-inicio { color: #ffffff; padding: 0 14px; }

/* Desplegable simple (no mega, p. ej. "Ocasión y outlet"): el panel necesita
   su propio padding — los enlaces llevan `margin:0 -8px` (más abajo) para que
   el fondo de hover llegue a los bordes, así que sin este padding el texto
   queda pegado al borde del panel. El mega-menú define el suyo aparte. */
[data-tema="industrial"] .tienda-header__submenu:not(.tienda-header__submenu--mega) {
    padding: 10px;
    background: var(--color-fondo);
    border: none;
    box-shadow: 0 12px 24px -18px rgba(20, 24, 15, .45);
}

/* Chevron del prototipo: icono (chevron-down, 13×13, stroke 2.4) en vez del
   carácter "›" que usan los demás desplegables — mismo trazo que el resto de
   iconos de línea de la cabecera. Gira 180° al abrir (el ::after genérico de
   arriba gira 90°, pensado para "›"; aquí hace falta más especificidad). */
[data-tema="industrial"] .tienda-header__nav-item.tiene-submenu > a::after {
    content: '';
    width: 13px;
    height: 13px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8.5l7 7 7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: .9;
    transition: transform .15s ease;
}
[data-tema="industrial"] .tienda-header__nav-item.tiene-submenu.submenu-abierto > a::after {
    transform: rotate(180deg);
}

/* Megamenú — "el cambio clave" del rediseño: retícula que reparte el 100% del
   ancho entre N grupos (nunca fija un número de columnas), cada grupo es una
   celda completa. Sustituye el `flex-wrap` de columnas de ancho fijo. */
[data-tema="industrial"] .tienda-header__submenu--mega {
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: 26px 30px;
    align-items: start;
    padding: 26px 26px 20px;
    background: var(--color-fondo);
    border: none;
    border-top: 1px solid var(--industrial-hairline);
    box-shadow: 0 12px 24px -18px rgba(20, 24, 15, .45);
}
[data-tema="industrial"] .tienda-header__nav-item--mega.tiene-submenu:hover > .tienda-header__submenu--mega,
[data-tema="industrial"] .tienda-header__nav-item--mega.tiene-submenu:focus-within > .tienda-header__submenu--mega,
[data-tema="industrial"] .tienda-header__nav-item--mega.tiene-submenu.submenu-abierto > .tienda-header__submenu--mega {
    display: grid;
}
[data-tema="industrial"] .tienda-header__submenu--mega > li { flex: none; min-width: 0; }
[data-tema="industrial"] .tienda-header__mega-col { display: flex; flex-direction: column; gap: 10px; padding-bottom: 0; }
[data-tema="industrial"] .tienda-header__mega-col-titulo {
    padding: 0 0 9px;
    margin-bottom: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--industrial-titulo-grupo);
    border-bottom: 1px solid var(--industrial-hairline);
}
[data-tema="industrial"] .tienda-header__mega-col > ul { display: flex; flex-direction: column; }
[data-tema="industrial"] .tienda-header__submenu--mega .tienda-header__mega-col a,
[data-tema="industrial"] .tienda-header__submenu a {
    padding: 5px 8px;
    margin: 0 -8px;
    border-radius: 6px;
    font-size: 14.5px;
    color: var(--industrial-texto-enlace);
}
[data-tema="industrial"] .tienda-header__submenu--mega .tienda-header__mega-col a:hover,
[data-tema="industrial"] .tienda-header__submenu a:hover {
    background: var(--industrial-verde-tinte);
    color: var(--industrial-verde-texto-hover);
    text-decoration: none;
}
[data-tema="industrial"] .tienda-header__mega-col-vermas a,
[data-tema="industrial"] .tienda-header__submenu-item--vermas a,
[data-tema="industrial"] .tienda-header__submenu-item--vertodo a {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--industrial-verde-enlace);
    padding-top: 8px;
    margin: 0;
}
[data-tema="industrial"] .tienda-header__mega-col-vermas a:hover,
[data-tema="industrial"] .tienda-header__submenu-item--vermas a:hover,
[data-tema="industrial"] .tienda-header__submenu-item--vertodo a:hover {
    color: var(--industrial-verde-enlace-hover);
}
[data-tema="industrial"] .tienda-header__submenu--mega > .tienda-header__submenu-item--vertodo {
    border-top: 1px solid var(--industrial-hairline);
}

/* ── Footer ────────────────────────────────────────────────────────────── */
.tienda-footer {
    margin-top: 4rem;
    background: var(--pie-fondo);
    color: var(--pie-texto);
    border-top: 1px solid var(--pie-borde);
}

.tienda-footer--claro {
    --pie-fondo: var(--color-fondo-alt);
    --pie-fondo-2: #ffffff;
    --pie-borde: var(--color-borde);
    --pie-texto: var(--color-texto);
    --pie-texto-suave: var(--color-texto-suave);
    --pie-enlace: var(--color-texto-suave);
    --pie-chip-borde: var(--color-borde);
    --pie-sobre-acento: #ffffff;
}

.tienda-footer--oscuro {
    --pie-fondo: #14171b;
    --pie-fondo-2: #1a1e23;
    --pie-borde: #262c33;
    --pie-texto: #eef0f2;
    --pie-texto-suave: #a9b1bb;
    --pie-enlace: #c9cfd6;
    --pie-chip-borde: #333a43;
    --pie-sobre-acento: #14171b;
}

/* Revisión manual pendiente: el acento (--color-principal) se usa como texto
   de enlace en hover sobre --pie-fondo/--pie-fondo-2 — comprobar 4.5:1 por
   tienda al elegir su color_principal (no hay validación automática en esta
   fase). */

.tienda-footer a {
    color: inherit;
    text-decoration: none;
}

.tienda-footer a:hover {
    color: var(--color-principal);
}

.tienda-footer a:focus-visible,
.tienda-footer button:focus-visible {
    outline: 2px solid var(--color-principal);
    outline-offset: 3px;
}

.tienda-footer__marco {
    max-width: var(--ancho-max);
    margin: 0 auto;
    padding: 3rem var(--gap) 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    justify-content: space-between;
}

/* Marca y contacto */
.tienda-footer__marca {
    flex: 1 1 240px;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.tienda-footer__logo {
    max-width: 260px;
    width: auto;
    border: 1px solid #dedede;
}

.tienda-footer__nombre {
    font-size: 1.15rem;
    color: var(--pie-texto);
}

.tienda-footer__descripcion {
    margin: 0;
    font-size: .88rem;
    line-height: 1.5;
    color: var(--pie-texto-suave);
}

.tienda-footer__contacto {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    font-size: .88rem;
    color: var(--pie-texto-suave);
}

.tienda-footer__contacto li {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
}

.tienda-footer__contacto li svg {
    flex-shrink: 0;
    margin-top: .1rem;
}

.tienda-footer__contacto li a {
    /* tel:/mailto: van en una sola línea: icono y texto se centran juntos
       en vez de heredar el align-items:flex-start del <li> (pensado para
       horario/dirección, que sí pueden ocupar varias líneas). */
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--pie-texto-suave);
}

.tienda-footer__contacto li a svg {
    margin-top: 0;
}

.tienda-footer .tienda-footer__whatsapp {
    align-self: flex-start;
    font-size: .78rem;
    padding: .4rem .75rem;
}

/* Columnas de enlaces */
.tienda-footer__columnas {
    flex: 2 1 480px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.5rem 2rem;
}

.tienda-footer__col-toggle {
    border: none;
}

.tienda-footer__col-titulo {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .25rem 0;
    cursor: pointer;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--pie-texto);
    -webkit-tap-highlight-color: transparent;
}

.tienda-footer__col-titulo::-webkit-details-marker { display: none; }
.tienda-footer__col-titulo::marker { content: ''; }

.tienda-footer__col-lista {
    list-style: none;
    margin: .75rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.tienda-footer__col-lista a {
    display: flex;
    align-items: center;
    min-height: 32px;
    font-size: .9rem;
    color: var(--pie-enlace);
    transition: color .15s ease, transform .15s ease;
}

.tienda-footer__col-lista a:hover {
    color: var(--color-principal);
    transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
    .tienda-footer__col-lista a:hover { transform: none; }
}

.tienda-footer__imagen img {
    display: block;
    width: 100%;
    max-width: 220px;
    height: auto;
    padding: .5rem;
    background: #fff; /* el logo es PNG pensado sobre blanco: legible también con tema oscuro */
    border-radius: 6px;
}

/* Escritorio: columnas siempre abiertas, sin comportamiento de acordeón
   (JS en link-columns.blade.php fuerza `open` y desactiva el tabindex). */
@media (min-width: 1024px) {
    .tienda-footer__col-titulo { pointer-events: none; }
    .tienda-footer__col-titulo svg { display: none; }
}

/* Pagos + volver arriba */
.tienda-footer__pagos {
    max-width: var(--ancho-max);
    margin: 0 auto;
    padding: 1.25rem var(--gap);
    border-top: 1px solid var(--pie-borde);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.tienda-footer__pagos-grupo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
}

.tienda-footer__pagos-etiqueta {
    font-size: .78rem;
    color: var(--pie-texto-suave);
}

.tienda-footer__pagos-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.tienda-footer__pago-chip {
    padding: .3rem .6rem;
    border: 1px solid var(--pie-chip-borde);
    border-radius: 6px;
    font-size: .78rem;
    color: var(--pie-texto-suave);
}

.tienda-footer__volver-arriba {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 44px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--pie-texto);
}

/* Barra legal */
.tienda-footer__legal {
    max-width: var(--ancho-max);
    margin: 0 auto;
    padding: 1rem var(--gap) 1.5rem;
    border-top: 1px solid var(--pie-borde);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.25rem;
    font-size: .8rem;
    color: var(--pie-texto-suave);
}

.tienda-footer__legal-copy {
    margin: 0;
}

.tienda-footer__legal-enlaces {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
}

.tienda-footer__legal-enlaces a {
    color: var(--pie-texto-suave);
}

.tienda-footer__cookies {
    margin-left: auto;
    min-height: 44px;
    padding: 0;
    background: none;
    border: none;
    font: inherit;
    font-size: .8rem;
    color: var(--pie-texto-suave);
    text-decoration: underline;
    cursor: pointer;
}

.tienda-footer__cookies:hover {
    color: var(--color-principal);
}

/* Garantías (4 iconos) */
.tienda-footer__garantias {
    border-bottom: 1px solid var(--pie-borde);
}

.tienda-footer__garantias-lista {
    max-width: var(--ancho-max);
    margin: 0 auto;
    padding: 1.5rem var(--gap);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.tienda-footer__garantia {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

.tienda-footer__garantia-icono {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--pie-fondo-2);
    color: var(--color-principal);
}

.tienda-footer__garantia strong {
    display: block;
    font-size: .9rem;
    color: var(--pie-texto);
}

.tienda-footer__garantia-subtitulo {
    display: block;
    font-size: .82rem;
    color: var(--pie-texto-suave);
}

/* Tiendas del grupo */
.tienda-footer__grupo--band {
    border-top: 1px solid var(--pie-borde);
}

.tienda-footer__grupo--band > * {
    max-width: var(--ancho-max);
    margin: 0 auto;
    padding: 1.5rem var(--gap) 0;
}

.tienda-footer__grupo--column {
    flex: 1 1 200px;
}

.tienda-footer__grupo-intro {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    margin-bottom: 1rem;
    font-size: .85rem;
    color: var(--pie-texto-suave);
}

.tienda-footer__grupo-intro strong {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--pie-texto);
}

.tienda-footer__grupo-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    padding-bottom: 1.5rem;
}

.tienda-footer__grupo--column .tienda-footer__grupo-chips {
    padding-bottom: 0;
}

.tienda-footer__grupo-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .8rem;
    min-height: 44px;
    border: 1px solid var(--pie-chip-borde);
    border-radius: 999px;
    font-size: .82rem;
    color: var(--pie-texto-suave);
}

.tienda-footer__grupo-chip:hover {
    color: var(--color-principal);
    border-color: var(--color-principal);
}

.tienda-footer__grupo-chip--ver-todas {
    color: var(--color-principal);
    border-color: var(--color-principal);
    font-weight: 600;
}

.tienda-footer__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Móvil: acordeón real + área táctil ampliada */
@media (max-width: 639px) {
    .tienda-footer__marco {
        padding: 2rem var(--gap) 1.5rem;
        gap: 2rem;
    }

    .tienda-footer__col-lista a {
        min-height: 44px;
    }

    .tienda-footer__legal {
        flex-direction: column;
        align-items: flex-start;
    }

    .tienda-footer__cookies {
        margin-left: 0;
    }

    .tienda-footer__garantias-lista {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem 1rem;
    }
}

/* ── Zonas CMS (Page/Zone/Block) ──────────────────────────────────────── */
.tienda-zona {
    display: grid;
    grid-template-columns: repeat(var(--tienda-zona-columnas, 1), 1fr);
    gap: var(--gap);
    margin-bottom: 1.5rem;
}

.tienda-bloque--enlace a {
    color: inherit;
}

.tienda-bloque--enlace a:hover {
    color: var(--color-principal);
}

.tienda-bloque--imagen {
    padding: 1.5rem;
    background: var(--color-fondo-alt);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
}

.tienda-bloque--imagen img {
    max-width: min(700px, 100%);
    margin: 0 auto;
}

/* ── Grid de productos / categorías ────────────────────────────────────── */
.tienda-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap);
    margin-top: 1rem;
}

/* ── Tarjeta de producto ───────────────────────────────────────────────── */
.tienda-tarjeta-producto {
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: box-shadow .2s, transform .2s;
    /* Toda la tarjeta en Public Sans, incluido el título (que si no heredaría
       el serif de titulares --tipo-titular). Ver themes/muebles/partials/fuentes. */
    font-family: 'Public Sans', var(--font-base);
}

.tienda-tarjeta-producto h3 {
    font-family: 'Public Sans', var(--font-base);
}

.tienda-tarjeta-producto:hover {
    box-shadow: 0 2px 7px rgba(20, 18, 14, .10);
    transform: translateY(-1px);
}

.tienda-tarjeta-producto__enlace {
    display: block;
    flex: 1 1 auto;
    color: var(--color-texto);
    text-decoration: none;
}

.tienda-tarjeta-producto__media {
    position: relative;
}

.tienda-tarjeta-producto img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: var(--color-fondo);
    padding: 8px;
}

/* Descuento: pastilla oscura despegada de la esquina (sin bandera de color —
   el flag esquinado es un tic de plantilla, igual que el subrayado azul de los
   títulos de sección). */
.tienda-tarjeta-producto__descuento {
    position: absolute;
    top: .6rem;
    left: .6rem;
    background: var(--color-texto);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    padding: .2rem .5rem;
    border-radius: 5px;
}

/* Nº de medidas disponibles, sobre la foto (esquina inferior izquierda) */
.tienda-tarjeta-producto__variantes {
    position: absolute;
    left: .7rem;
    bottom: .55rem;
    font-size: .75rem;
    color: var(--color-texto-suave);
}

.tienda-tarjeta-producto h3 {
    font-size: .95rem;
    font-weight: 500;
    line-height: 1.35;
    margin: 0;
    padding: .85rem 1rem 0;
    text-wrap: pretty;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tienda-tarjeta-producto__pie {
    margin-top: auto;
    padding: .6rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.tienda-tarjeta-producto__desde {
    font-size: .75rem;
    line-height: 1.2;
    color: var(--color-texto-suave);
}

.tienda-tarjeta-producto__precio {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    flex-wrap: wrap;
}

.tienda-tarjeta-producto__precio strong {
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    color: var(--color-texto);
}

.tienda-precio--tachado {
    font-size: .8rem;
    color: var(--color-texto-suave);
    text-decoration: line-through;
    font-variant-numeric: tabular-nums;
}

.tienda-tarjeta-producto__meta {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .2rem;
    font-size: .75rem;
    color: var(--color-texto-suave);
}

.tienda-tarjeta-producto__ahorro {
    font-weight: 700;
    color: var(--color-principal);
    filter: brightness(.8);
}

.tienda-tarjeta-producto__ahorro::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: .7em;
    margin-right: .5rem;
    background: var(--color-borde);
    vertical-align: middle;
}

/* Garantías rápidas en la tarjeta (tema muebles): checklist bajo un divisor,
   como en la propuesta. Se renderiza desde themes/muebles/catalogo/_tarjeta-producto.blade.php;
   en `default` la lista no se pinta, así que estas reglas solo afectan a `muebles`.
   Hoy solo stock + plazo; "Envío gratis" y "Montaje disponible" quedan pendientes
   de exponer esos datos en el listado de icommers-api. */
.tienda-tarjeta-producto__garantias {
    list-style: none;
    margin: .55rem 0 0;
    padding: .6rem 0 0;
    border-top: 1px solid var(--color-borde);
    display: flex;
    flex-direction: column;
    gap: .3rem;
    font-size: .8rem;
    line-height: 1.3;
    color: var(--color-texto);
}

.tienda-tarjeta-producto__garantias li {
    display: flex;
    align-items: baseline;
    gap: .45rem;
}

.tienda-tarjeta-producto__garantias li::before {
    content: "\2713";
    color: #166534;
    font-weight: 700;
}

.tienda-tarjeta-producto__garantias li.es-agotado {
    color: #b91c1c;
}

.tienda-tarjeta-producto__garantias li.es-agotado::before {
    content: "\00d7";
    color: #b91c1c;
}

.tienda-tarjeta-producto__garantias li.es-proximamente {
    color: var(--color-texto-suave);
}

.tienda-tarjeta-producto__garantias li.es-proximamente::before {
    content: "\2022";
    color: var(--color-texto-suave);
}

/* Tema muebles: título de tarjeta un punto mayor, como en la propuesta —
   segundo en jerarquía tras el precio (la familia es Public Sans, ver arriba). */
[data-tema="muebles"] .tienda-tarjeta-producto h3 {
    font-size: 1.0625rem;
    line-height: 1.3;
}

/* Tema muebles: CTA de la tarjeta con el color de marca (igual que la pastilla "Cesta"). */
[data-tema="muebles"] .tienda-tarjeta-producto__comprar {
    background: var(--color-principal);
    border-radius: 999px;
    height: 46px;
    margin-top: .85rem;
    font-size: .9rem;
}
[data-tema="muebles"] .tienda-tarjeta-producto__comprar:hover {
    background: color-mix(in srgb, var(--color-principal) 82%, black);
}

.tienda-tarjeta-producto__comprar {
    margin-top: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    width: 100%;
    height: 44px;
    border: none;
    border-radius: 6px;
    background: var(--color-principal);
    color: #fff;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s;
}

.tienda-tarjeta-producto__comprar:disabled {
    opacity: .6;
    cursor: wait;
}

.tienda-tarjeta-producto__comprar svg {
    flex-shrink: 0;
}

.tienda-tarjeta-producto__comprar:hover {
    background: color-mix(in srgb, var(--color-principal) 90%, black);
    color: #fff;
    text-decoration: none;
}

/* ── Secciones de la home ──────────────────────────────────────────────── */
.tienda-home__hero {
    background: var(--color-fondo-alt);
    border-radius: var(--radio);
    padding: 3rem 2rem;
    text-align: center;
    margin-bottom: 2rem;
}

.tienda-home__hero h1 {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    color: var(--color-principal);
    margin-bottom: .75rem;
}

.tienda-home__hero p {
    font-size: 1.1rem;
    color: var(--color-texto-suave);
    max-width: 600px;
    margin: 0 auto;
}

.tienda-home__hero--banner {
    padding: 0;
    background: none;
    overflow: hidden;
}

.tienda-home__hero--banner a {
    display: block;
}

.tienda-home__hero--banner img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radio);
}

/* Banner de portada — layout 'contenido': foto de fondo + titular/subtítulo/2 CTAs
   configurables desde webadmin + franja de 3 productos reales enlazados debajo.
   Todo el conjunto (hero + franja) es una sola tarjeta. */
.tienda-hero-contenido-wrap {
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    overflow: hidden;
    margin-bottom: 2rem;
}

.tienda-hero-contenido {
    position: relative;
    padding: clamp(2rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem);
    background-color: var(--color-fondo-alt);
    background-image: var(--hero-fondo, none);
    background-size: cover;
    background-position: center;
    min-height: 360px;
    display: flex;
    align-items: center;
}

/* Velo para que el texto se lea sobre cualquier foto (más denso a la izquierda,
   donde va la caja de texto). */
.tienda-hero-contenido::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, .93) 0%,
        rgba(255, 255, 255, .72) 38%,
        rgba(255, 255, 255, 0) 72%);
}

.tienda-hero-contenido__caja {
    position: relative;
    max-width: 30rem;
}

.tienda-hero-contenido__titular {
    font-size: clamp(1.9rem, 4.5vw, 3.1rem);
    line-height: 1.08;
    margin-bottom: 1rem;
}

.tienda-hero-contenido__subtitulo {
    font-size: 1.05rem;
    color: var(--color-texto-suave);
    margin-bottom: 1.5rem;
    max-width: 24rem;
}

.tienda-hero-contenido__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.tienda-hero-contenido__ctas .tienda-btn {
    border-radius: 999px;
    padding: .8rem 1.6rem;
}

/* Franja de 3 productos bajo el hero — columnas con divisores, fondo blanco */
.tienda-hero-contenido__productos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: var(--color-fondo);
    border-top: 1px solid var(--color-borde);
}

.tienda-hero-mini {
    display: flex;
    gap: .85rem;
    align-items: center;
    padding: 1rem 1.25rem;
    color: var(--color-texto);
    min-width: 0;
}

.tienda-hero-mini + .tienda-hero-mini {
    border-left: 1px solid var(--color-borde);
}

.tienda-hero-mini:hover {
    background: var(--color-fondo-alt);
    text-decoration: none;
}

.tienda-hero-mini__media {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    background: var(--color-fondo-alt);
    border-radius: 6px;
    overflow: hidden;
}

.tienda-hero-mini__media img { width: 100%; height: 100%; object-fit: cover; }

.tienda-hero-mini__info {
    display: flex;
    flex-direction: column;
    gap: .12rem;
    min-width: 0;
}

.tienda-hero-mini__titulo {
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tienda-hero-mini__medidas {
    font-size: .78rem;
    color: var(--color-texto-suave);
}

.tienda-hero-mini__precio {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    margin-top: .1rem;
}

.tienda-hero-mini__precio strong {
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}

.tienda-hero-mini__precio s {
    font-size: .8rem;
    color: var(--color-texto-suave);
}

/* Tema muebles — el CTA primario del hero va en negro (el precio bajo se comunica
   una sola vez, en el botón secundario; ver mockup del banner). */
[data-tema="muebles"] .tienda-hero-contenido__ctas .tienda-btn--primario {
    background: var(--color-texto);
    color: var(--color-fondo);
}

@media (max-width: 760px) {
    .tienda-hero-contenido { background-image: var(--hero-fondo-movil, var(--hero-fondo, none)); }
    .tienda-hero-contenido::before {
        background: linear-gradient(180deg, rgba(255, 255, 255, .35) 0%, rgba(255, 255, 255, .9) 85%);
    }
    .tienda-hero-contenido__productos { grid-template-columns: 1fr; }
    .tienda-hero-mini + .tienda-hero-mini {
        border-left: none;
        border-top: 1px solid var(--color-borde);
    }
}

/* ── "Compra por categoría" — grid de grupos del menú en la home ─────────────
   Sustituye al lateral de categorías (que duplicaba el mega-menú). Tarjetas
   grandes con imagen + nombre → página hub del grupo. Ver
   components/grupos-destacados.blade.php. */
.tienda-grupos-destacados {
    margin-bottom: 2rem;
}

.tienda-grupos-destacados__titulo {
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.15;
    margin-bottom: 1.5rem;
}

.tienda-grupos-destacados__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap);
}

.tienda-grupos-destacados__card {
    position: relative;
    display: flex;
    align-items: flex-end;
    aspect-ratio: 4 / 3;
    padding: 1rem;
    overflow: hidden;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    background: var(--color-fondo-alt);
    color: var(--color-texto);
    text-decoration: none;
}

.tienda-grupos-destacados__card:hover {
    text-decoration: none;
}

.tienda-grupos-destacados__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}

.tienda-grupos-destacados__card:hover .tienda-grupos-destacados__img {
    transform: scale(1.04);
}

.tienda-grupos-destacados__nombre {
    position: relative;
    z-index: 1;
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.2;
}

/* Con imagen: el nombre va sobre un velo para legibilidad. */
.tienda-grupos-destacados__card:not(.tienda-grupos-destacados__card--texto) .tienda-grupos-destacados__nombre {
    color: #fff;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .55);
}

.tienda-grupos-destacados__card:not(.tienda-grupos-destacados__card--texto)::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .55) 100%);
}

/* Sin imagen: tarjeta tipográfica centrada. */
.tienda-grupos-destacados__card--texto {
    align-items: center;
    justify-content: center;
    text-align: center;
    aspect-ratio: 3 / 2;
}

.tienda-grupos-destacados__card--texto:hover {
    border-color: var(--color-texto);
    background: var(--color-fondo);
}

@media (max-width: 900px) {
    .tienda-grupos-destacados__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
    .tienda-grupos-destacados__grid { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
    .tienda-grupos-destacados__nombre { font-size: .95rem; }
}

.tienda-bloque-home {
    margin-bottom: 2rem;
}

/* Título de sección (p. ej. "Productos recomendados"): serif grande con aire,
   sin el subrayado azul de plantilla. */
.tienda-bloque-home h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.15;
    margin-bottom: 1.5rem;
}

/* La home ya no tiene lateral: sus grids de producto caben a 4 en pantallas
   grandes (el resto de páginas mantiene 3 por el `.tienda-grid` base). Reglas
   scopeadas para ganar a los media queries globales de `.tienda-grid`. */
.tienda-bloque-home .tienda-grid {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1100px) {
    .tienda-bloque-home .tienda-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
    .tienda-bloque-home .tienda-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .tienda-bloque-home .tienda-grid { grid-template-columns: 1fr; }
}

/* Bloque de portada tipo "imagen": imagen a ancho completo con enlace opcional
   (bloque-imagen-home.blade.php). Mismo título que .tienda-bloque-home. */
.tienda-bloque-imagen-home {
    margin-bottom: 2rem;
}

.tienda-bloque-imagen-home h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.15;
    margin-bottom: 1.5rem;
}

.tienda-bloque-imagen-home__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radio);
}

/* Menos aire entre secciones de la home en móvil que en escritorio. */
@media (max-width: 640px) {
    .tienda-home__hero,
    .tienda-grupos-destacados,
    .tienda-bloque-home,
    .tienda-bloque-imagen-home {
        margin-bottom: 1.25rem;
    }
}

/* ── Carrusel de productos (.tienda-splide) ──────────────────────────────── */
/* Compartido por el carrusel de bloques de home (bloque-productos-home.blade.php)
   y el de "También te puede interesar" de la ficha (catalogo/producto.blade.php).
   La estructura y el comportamiento vienen de Splide; aquí se fija el ancho de
   pista (padding para dejar sitio a flechas/paginación) y se retocan los colores
   de marca sobre las clases .splide__* de la librería. */
.tienda-splide {
    padding: 0 2.75rem 2.75rem;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}
.tienda-splide .splide__arrow {
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    opacity: 1;
}
.tienda-splide .splide__arrow--prev { left: 0; }
.tienda-splide .splide__arrow--next { right: 0; }
.tienda-splide .splide__arrow:hover { background: var(--color-principal); }
.tienda-splide .splide__arrow:hover svg { fill: #fff; }
.tienda-splide .splide__pagination { bottom: 0.5rem; }
.tienda-splide .splide__pagination__page.is-active { background: var(--color-principal); }
.tienda-splide .splide__list { align-items: stretch; padding: 5px !important; }
.tienda-splide .splide__slide { height: auto; display: flex; }

/* ── Paginación de bloques de home ───────────────────────────────────────── */
.tienda-paginacion {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    color: var(--color-texto-suave);
}

.tienda-paginacion a {
    color: var(--color-principal);
    text-decoration: none;
    font-weight: 600;
}

/* ── Layout con sidebar de categorías (páginas de categoría) ────────────── */
.tienda-layout-sidebar {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: var(--gap);
    align-items: start;
}

/* Sin lateral (ofertas/outlet): el contenido ocupa todo el ancho. */
.tienda-layout-sidebar:not(:has(.tienda-layout-sidebar__aside)) {
    display: block;
}

.tienda-layout-sidebar__principal {
    min-width: 0;
}

.tienda-layout-sidebar__aside {
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    overflow: hidden;
}

.tienda-layout-sidebar__aside h2 {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .85rem 1.1rem;
    margin-bottom: 0;
    color: var(--color-texto);
    background: var(--color-fondo-alt);
    border-bottom: 1px solid var(--color-borde);
}

/* Separación entre secciones de primer nivel (grupos y enlaces sueltos). */
.tienda-menu-categorias > li {
    border-bottom: 1px solid var(--color-borde);
}

.tienda-menu-categorias > li:last-child {
    border-bottom: none;
}

.tienda-menu-categorias a {
    display: block;
    padding: .6rem 1.1rem;
    color: var(--color-texto);
    font-size: .9rem;
    border-left: 3px solid transparent;
    transition: background .15s, color .15s, border-color .15s;
}

.tienda-menu-categorias a:hover {
    background: var(--color-fondo-alt);
    color: var(--color-principal);
    text-decoration: none;
}

.tienda-menu-categorias a.is-active {
    color: var(--color-principal);
    font-weight: 700;
    background: var(--color-fondo-alt);
    border-left-color: var(--color-principal);
}

/* Enlaces sueltos de primer nivel (Ofertas, Outlet…): destinos principales, en
   seminegrita para que no se confundan con los ítems dentro de un grupo. */
.tienda-menu-categorias > li > a {
    font-weight: 600;
}

/* Subcategorías del menú NO curado (flyout de la API): banda gris + sangría. */
.tienda-menu-categorias__sublista {
    background: var(--color-fondo-alt);
}

.tienda-menu-categorias__sublista a {
    padding-left: 1.75rem;
    font-size: .85rem;
}

/* Grupo del menú curado ("Por estancia", "Complementos"…): encabezado no clicable
   sobre banda gris con filete inferior, para que cada sección se lea de un vistazo. */
.tienda-menu-categorias__grupo-titulo {
    display: block;
    padding: .55rem 1.1rem;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--color-texto-suave);
    background: var(--color-fondo-alt);
    border-bottom: 1px solid var(--color-borde);
}

a.tienda-menu-categorias__grupo-titulo:hover,
a.tienda-menu-categorias__grupo-titulo:focus {
    color: var(--color-texto);
}

/* "Ver todo (N)" al pie de una sección recortada del sidebar → página hub del grupo. */
.tienda-menu-categorias__vertodo a {
    font-weight: 600;
    color: var(--color-principal);
}

.tienda-menu-categorias__grupo .tienda-menu-categorias__sublista {
    background: transparent;
    padding: .25rem 0;
}

.tienda-menu-categorias__grupo .tienda-menu-categorias__sublista a {
    font-size: .9rem;
}

/* Rama de la categoría activa desplegada bajo su ítem de menú (subcategorías del
   nivel actual — reproduce el `build_menu` del legacy). Sangría creciente por
   nivel vía --rama-nivel (lo fija _sidebar-rama.blade.php en cada <ul>). */
.tienda-menu-categorias__rama a {
    padding-left: calc(1.75rem + (var(--rama-nivel, 1) - 1) * 0.75rem);
    font-size: .85rem;
}

.tienda-menu-categorias__grupo .tienda-menu-categorias__rama a {
    padding-left: calc(2rem + (var(--rama-nivel, 1) - 1) * 0.75rem);
    font-size: .88rem;
}

.tienda-menu-categorias__rama a.is-active {
    font-weight: 700;
}

/* Modo contextual (página de categoría): enlace "‹ volver a la sección" sobre la
   lista, y desplegable "Otras secciones" con el resto de grupos del menú. */
.tienda-menu-categorias__volver {
    display: block;
    padding: .6rem 1.1rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--color-texto-suave);
    background: var(--color-fondo-alt);
    border-bottom: 1px solid var(--color-borde);
}

.tienda-menu-categorias__volver:hover {
    color: var(--color-principal);
    text-decoration: none;
}

.tienda-menu-categorias__otras {
    border-top: 1px solid var(--color-borde);
}

.tienda-menu-categorias__otras > summary {
    padding: .6rem 1.1rem;
    cursor: pointer;
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-texto-suave);
}

.tienda-menu-categorias__otras > ul {
    padding-bottom: .35rem;
    background: var(--color-fondo-alt);
}

.tienda-menu-categorias__otras a {
    display: block;
    padding: .45rem 1.1rem .45rem 1.75rem;
    font-size: .85rem;
    color: var(--color-texto);
}

.tienda-menu-categorias__otras a:hover {
    color: var(--color-principal);
    text-decoration: none;
}

/* ── Avisos ────────────────────────────────────────────────────────────── */
.tienda-aviso {
    padding: .875rem 1.25rem;
    border-radius: var(--radio);
    margin-bottom: 1.5rem;
    font-size: .95rem;
}

/* Especificidad .tienda-aviso.tienda-aviso--* (a propósito): más abajo hay un
   .tienda-aviso "neutro" (texto de ayuda tipo "sin valoraciones todavía") que
   resetea background/border/color — con un solo .tienda-aviso--error aquí,
   ese reset posterior ganaba por orden de aparición y dejaba el aviso de
   error/éxito indistinguible de texto normal. */
.tienda-aviso.tienda-aviso--error {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-left: 4px solid #dc2626;
    color: #991b1b;
}

.tienda-aviso.tienda-aviso--exito {
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-left: 4px solid #16a34a;
    color: #166534;
}

/* Pedido que se tramita como solicitud de presupuesto (algún ítem sin precio
   o sin transporte definido). Ámbar, como el aviso equivalente del legacy. */
.tienda-aviso.tienda-aviso--presupuesto {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-left: 4px solid #f59e0b;
    color: #92400e;
    padding: 5px;
}

.tienda-aviso p { margin: 0; }
.tienda-aviso p + p { margin-top: .375rem; }

/* ── Formularios ───────────────────────────────────────────────────────── */
.tienda-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 480px;
}

.tienda-form__campo {
    display: flex;
    flex-direction: column;
    gap: .375rem;
}

.tienda-form__campo label {
    font-size: .9rem;
    font-weight: 600;
    color: var(--color-texto);
}

.tienda-form__campo input:not([type="checkbox"]),
.tienda-form__campo select,
.tienda-form__campo textarea {
    width: 100%;
    padding: .625rem .875rem;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    font-family: var(--font-base);
    font-size: .9375rem;
    color: var(--color-texto);
    background: var(--color-fondo);
}

.tienda-form__campo input:not([type="checkbox"]):focus,
.tienda-form__campo select:focus,
.tienda-form__campo textarea:focus {
    outline: 2px solid var(--color-principal);
    outline-offset: 1px;
}

.tienda-form__campo--checkbox input[type="checkbox"] {
    width: auto;
}

.tienda-form__campo textarea {
    resize: vertical;
    min-height: 6rem;
}

.tienda-form__campo--checkbox {
    flex-direction: row;
    align-items: flex-start;
}

.tienda-form__campo--checkbox label {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-weight: 400;
    font-size: .9rem;
    cursor: pointer;
}

.tienda-form__campo--checkbox input[type="checkbox"] {
    margin-top: .2rem;
    flex-shrink: 0;
}

/* Campo de contraseña con botón de ver/ocultar */
.tienda-campo-password {
    position: relative;
    display: flex;
    align-items: center;
}

.tienda-form__campo .tienda-campo-password input:not([type="checkbox"]) {
    padding-right: 2.75rem;
}

.tienda-campo-password__toggle {
    position: absolute;
    right: .375rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-texto-suave);
    cursor: pointer;
    border-radius: var(--radio);
}

.tienda-campo-password__toggle:hover {
    color: var(--color-texto);
}

.tienda-campo-password__toggle:focus-visible {
    outline: 2px solid var(--color-principal);
    outline-offset: 1px;
}

.tienda-campo-password__toggle svg {
    width: 20px;
    height: 20px;
}

.tienda-campo-password__toggle[aria-pressed="true"] .tienda-campo-password__ojo,
.tienda-campo-password__toggle[aria-pressed="false"] .tienda-campo-password__ojo-off {
    display: none;
}

.tienda-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .75rem 1.5rem;
    border: none;
    border-radius: var(--radio);
    font-family: var(--font-base);
    font-size: .9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .15s;
    align-self: flex-start;
}

.tienda-btn:hover { opacity: .85; }

.tienda-btn--primario {
    background: var(--color-principal);
    color: #fff;
}

/* Va después de .tienda-btn: si no, su `border: none` anula el borde. */
.tienda-btn--secundario {
    background: var(--color-fondo);
    color: var(--color-texto);
    border: 1.5px solid var(--color-texto);
}

/* ── Página de contacto ───────────────────────────────────────────────── */
.tienda-contacto {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}

.tienda-contacto h2 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.tienda-contacto__datos ul {
    margin-bottom: 1.5rem;
    color: var(--color-texto-suave);
}

.tienda-contacto__icommers {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.tienda-contacto__icommers-logo {
    height: 1.25rem;
    width: auto;
}

.tienda-contacto__form {
    max-width: none;
}

/* ── Valoración y recogida (venta de usados) ─────────────────────────────
   Réplica del formulario legacy "Vender" (s24h-site-r/HTML/valoracion.html):
   columna lateral con reclamo + WhatsApp, formulario a la derecha. Reusa las
   variables de tema (industrial u otro) en vez de los colores fijos del
   legacy (#073241/#FFB000), para que encaje en cualquier tienda. */
.tienda-valoracion__layout {
    display: grid;
    grid-template-columns: minmax(200px, .85fr) minmax(0, 2.4fr);
    gap: 2.5rem;
    align-items: start;
}

.tienda-valoracion__lateral {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tienda-valoracion__banner {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radio);
}

.tienda-valoracion__nube {
    padding: 1.5rem;
    background: var(--industrial-fondo-campo, var(--color-fondo-alt));
    border: 1px solid var(--industrial-hairline, var(--color-borde));
    border-radius: var(--radio);
    line-height: 1.9;
    color: var(--industrial-texto-secundario, var(--color-texto-suave));
}

.tienda-valoracion__titulo {
    font-family: 'Roboto Condensed', var(--tipo-titular), sans-serif;
    font-weight: 700;
    line-height: .9;
    margin-bottom: 1rem;
    color: var(--valoracion-titulo-color, #073241);
    font-size: 1.9rem;
}

.tienda-valoracion__titulo span {
    display: block;
    font-size: .6em;
    font-weight: 700;
    margin-bottom: .2em;
}

.tienda-valoracion__intro {
    margin-bottom: 1rem;
    font-weight: 700;
    color: var(--color-texto);
    line-height: 1.5;
}

.tienda-valoracion__intro span {
    display: block;
    font-size: 1.5em;
    color: var(--valoracion-destacado-color, #FFB000);
    margin: .25rem 0;
}

.tienda-valoracion__instrucciones {
    margin-bottom: 1.5rem;
    color: var(--color-texto-suave);
    font-size: .9rem;
}

.tienda-valoracion__form-el h2 {
    font-family: 'Roboto Condensed', var(--tipo-titular), sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--valoracion-titulo-color, #073241);
    margin: 1.5rem 0 .25rem;
}

.tienda-valoracion__form-el h2:first-of-type {
    margin-top: 0;
}

.tienda-valoracion__fila {
    display: flex;
    gap: 1rem;
}

.tienda-valoracion__fila .tienda-form__campo {
    flex: 1;
}

.tienda-valoracion__producto input[type="file"] {
    display: block;
    margin-bottom: .5rem;
    font-size: .875rem;
}

.tienda-valoracion__opciones-venta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.tienda-valoracion__opciones-venta label {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-weight: 400;
    cursor: pointer;
}

.tienda-valoracion__opciones-venta input[type="checkbox"] {
    width: auto;
}

.tienda-valoracion__saber-mas {
    display: block;
    background: none;
    border: 0;
    padding: 0;
    margin-top: .25rem;
    color: var(--industrial-verde-enlace, var(--color-principal));
    font-size: .85rem;
    cursor: pointer;
    text-decoration: underline;
}

@media (max-width: 780px) {
    .tienda-valoracion__layout {
        grid-template-columns: 1fr;
    }
}

/* ── Novedades: formato 1/2/3 ─────────────────────────────────────────── */
.tienda-novedad {
    max-width: var(--ancho-max);
    margin: 0 auto;
}

.tienda-novedad__portada img {
    border-radius: var(--radio);
}

.tienda-novedad__meta {
    color: var(--color-texto-suave);
    font-size: .9rem;
}

.tienda-novedad__cuerpo {
    line-height: 1.6;
}

/* El reset global (ul { list-style: none } más arriba) es intencional para las
   listas de UI del propio tema, pero también anula el <ul>/<ol> que llega en el
   HTML crudo del bloque texto-html (editor del admin) — se restaura aquí. */
.tienda-bloque--texto-html ul,
.tienda-bloque--texto-html ol {
    margin: 0 0 1rem 1.5rem;
}

.tienda-bloque--texto-html ul { list-style: disc; }
.tienda-bloque--texto-html ol { list-style: decimal; }
.tienda-bloque--texto-html ul ul { list-style: circle; }
.tienda-bloque--texto-html ul ul ul { list-style: square; }

.tienda-bloque--texto-html li {
    margin-bottom: .25rem;
}

.tienda-novedad__galeria {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.tienda-novedad__galeria img {
    border-radius: var(--radio);
}

/* La portada de Noticia siempre usa formato 1 desde que dejó de existir el
   campo formato (ver Noticia/zonas/bloques); Servicio también fija formato=1
   siempre — es el único valor que sigue en uso. */
.tienda-novedad--formato-1 .tienda-novedad__portada {
    margin-bottom: 1.5rem;
}

/* Bloque "galería" (Zone/Block, ver Support/BlockTypeRegistry) — imagen principal
   grande vía Splide + miniaturas debajo que la cambian al hacer clic, mismo
   patrón que la ficha de producto (tienda-producto__galeria-*) pero con
   namespace propio: este bloque puede aparecer en cualquier página o noticia,
   no solo en fichas de producto. */
.tienda-galeria-bloque__principal .splide__slide img {
    display: block;
    width: 100%;
    height: 420px;
    object-fit: scale-down;
    background: var(--color-fondo-alt);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
}

.tienda-galeria-bloque__principal .splide__arrow {
    background: rgba(255, 255, 255, .85);
}

.tienda-galeria-bloque__principal .splide__arrow svg {
    fill: var(--color-texto);
}

.tienda-galeria-bloque__miniaturas {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin-top: .75rem;
    overflow-x: auto;
    padding-bottom: 2px;
}

.tienda-galeria-bloque__miniatura {
    flex-shrink: 0;
    width: 84px;
    height: 64px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: calc(var(--radio) - 2px);
    overflow: hidden;
    background: none;
    cursor: pointer;
    transition: border-color .15s, opacity .15s;
}

.tienda-galeria-bloque__miniatura img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .65;
    transition: opacity .15s;
}

.tienda-galeria-bloque__miniatura:hover img {
    opacity: .9;
}

.tienda-galeria-bloque__miniatura.is-activa {
    border-color: var(--color-principal);
}

.tienda-galeria-bloque__miniatura.is-activa img {
    opacity: 1;
}

/* ── Novedades: listado ───────────────────────────────────────────────── */
.tienda-novedades {
    max-width: var(--ancho-max);
    margin: 0 auto;
}

.tienda-novedades__cabecera {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-borde);
}

.tienda-novedades__cabecera h1 {
    color: var(--color-principal);
    text-transform: uppercase;
    font-size: 1.25rem;
    letter-spacing: .02em;
}

.tienda-novedades__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap);
}

@media (max-width: 1100px) {
    .tienda-novedades__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
    .tienda-novedades__grid { grid-template-columns: repeat(2, 1fr); }
}

.tienda-tarjeta-noticia {
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    overflow: hidden;
    transition: box-shadow .2s, transform .2s;
}

.tienda-tarjeta-noticia:hover {
    box-shadow: var(--sombra);
    transform: translateY(-2px);
}

.tienda-tarjeta-noticia > a {
    display: block;
    color: var(--color-texto);
    text-decoration: none;
}

.tienda-tarjeta-noticia img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.tienda-tarjeta-noticia h3 {
    font-size: 1.05rem;
    padding: .875rem .875rem 0;
    margin-bottom: .5rem;
}

.tienda-tarjeta-noticia__resumen {
    padding: 0 .875rem .875rem;
    color: var(--color-texto-suave);
    font-size: .9rem;
    line-height: 1.5;
}

/* ── Preguntas frecuentes: acordeón ───────────────────────────────────── */
.tienda-faq {
    max-width: 820px;
    margin: 0 auto;
    padding-bottom: 3rem;
}

.tienda-faq__cabecera {
    margin-bottom: 2rem;
}

.tienda-faq__cabecera h1 {
    font-size: 1.9rem;
    margin-bottom: .35rem;
}

.tienda-faq__intro {
    color: var(--color-texto-suave);
    font-size: 1.05rem;
    margin: 0;
}

.tienda-faq__grupo + .tienda-faq__grupo {
    margin-top: 2.25rem;
}

.tienda-faq__grupo-titulo {
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-principal);
    margin-bottom: .875rem;
}

.tienda-faq__lista {
    display: flex;
    flex-direction: column;
    gap: .625rem;
}

.tienda-faq__item {
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    background: var(--color-fondo);
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.tienda-faq__item:hover {
    border-color: color-mix(in srgb, var(--color-principal) 35%, var(--color-borde));
}

.tienda-faq__item[open] {
    border-color: color-mix(in srgb, var(--color-principal) 55%, var(--color-borde));
    box-shadow: 0 4px 18px rgba(0, 0, 0, .06);
}

.tienda-faq__pregunta {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.05rem 1.25rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 1.02rem;
    color: var(--color-texto);
    -webkit-tap-highlight-color: transparent;
}

.tienda-faq__pregunta::-webkit-details-marker { display: none; }
.tienda-faq__pregunta::marker { content: ''; }

.tienda-faq__item:hover > .tienda-faq__pregunta,
.tienda-faq__item[open] > .tienda-faq__pregunta {
    color: var(--color-principal);
}

.tienda-faq__pregunta:focus-visible {
    outline: 2px solid var(--color-principal);
    outline-offset: -3px;
}

.tienda-faq__texto { flex: 1; }

.tienda-faq__chevron {
    flex: none;
    width: .58rem;
    height: .58rem;
    margin-right: .15rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .2s ease;
    color: var(--color-texto-suave);
}

.tienda-faq__item[open] > .tienda-faq__pregunta .tienda-faq__chevron {
    transform: rotate(-135deg);
    color: var(--color-principal);
}

.tienda-faq__respuesta {
    padding: 0 1.25rem 1.25rem;
    color: var(--color-texto-suave);
    line-height: 1.65;
}

.tienda-faq__respuesta > :first-child { margin-top: 0; }
.tienda-faq__respuesta > :last-child { margin-bottom: 0; }

.tienda-faq__item:target {
    border-color: var(--color-principal);
    scroll-margin-top: 1rem;
}

@media (max-width: 600px) {
    .tienda-faq__cabecera h1 { font-size: 1.5rem; }
    .tienda-faq__pregunta { padding: .95rem 1rem; font-size: .97rem; }
    .tienda-faq__respuesta { padding: 0 1rem 1rem; }
}

/* ── Página de categoría / listado filtrado ──────────────────────────────── */

/* Banner de cabecera de la categoría (imagen configurada en el panel central,
   `categoria.imagen`). Va arriba del todo, antes del breadcrumb. */
.tienda-categoria__banner {
    margin-bottom: 1.5rem;
}

.tienda-categoria__banner img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}

/* Bloques "Productos recomendados" / "Ofertas" de las categorías de nivel 1
   (ver categoria.blade.php + _bloque-productos.blade.php). Reusan .tienda-grid. */
.tienda-categoria__bloque {
    margin-bottom: 2.5rem;
}

.tienda-categoria__bloque-titulo {
    font-size: clamp(1.4rem, 2.5vw, 1.8rem);
    line-height: 1.15;
    color: var(--color-texto);
    margin-bottom: 1rem;
}

.tienda-categoria__cabecera {
    margin-bottom: 1.5rem;
}

.tienda-categoria__cabecera h1 {
    font-size: clamp(1.6rem, 3vw, 2rem);
    color: var(--color-texto);
}

/* Descripción de la categoría — bloque de texto SEO tras el listado y la paginación
   (ver plantilla-categoria.blade.php). Separado del grid con un filete y en color
   apagado: es contenido de apoyo, no compite con los productos. */
.tienda-categoria__descripcion {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-borde);
    color: var(--color-texto-suave);
    font-size: .9rem;
    line-height: 1.7;
}

.tienda-categoria__descripcion p:last-child {
    margin-bottom: 0;
}

/* ── Página de grupo (hub) ─────────────────────────────────────────────────
   /g/{slug}.html — grid de categorías del grupo + carruseles "más vendidos" /
   "ofertas". Ver CatalogoController::grupo() + catalogo/grupo.blade.php. */
.tienda-grupo__cabecera {
    margin-bottom: 2rem;
}

.tienda-grupo__cabecera h1 {
    font-size: clamp(1.6rem, 3vw, 2rem);
    color: var(--color-texto);
}

.tienda-grupo__intro {
    margin-top: .5rem;
    color: var(--color-texto-suave);
    max-width: 60ch;
}

.tienda-grupo__grid {
    list-style: none;
    margin: 0 0 2.5rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: .6rem;
}

/* Tile de texto — directorio de categorías del grupo. */
.tienda-grupo__cat {
    display: flex;
    align-items: center;
    height: 100%;
    padding: .7rem .85rem;
    font-weight: 600;
    font-size: .92rem;
    line-height: 1.25;
    color: var(--color-texto);
    text-decoration: none;
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    transition: border-color .15s, background .15s;
}

.tienda-grupo__cat:hover {
    border-color: var(--color-texto);
    background: var(--color-fondo-alt);
}

.tienda-grupo__seccion {
    margin-bottom: 2.5rem;
}

.tienda-grupo__seccion-titulo {
    font-size: clamp(1.4rem, 2.5vw, 1.8rem);
    line-height: 1.15;
    color: var(--color-texto);
    margin-bottom: 1rem;
}

.tienda-filtros {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1.5rem;
    font-size: .9rem;
}

.tienda-filtros select {
    margin-left: .5rem;
    padding: .4rem .6rem;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    color: var(--color-texto);
    background: var(--color-fondo);
}

/* ── Paginación (compartida por listados de noticias y catálogo) ───────── */
.tienda-paginacion {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    color: var(--color-texto-suave);
    font-size: .9rem;
}

.tienda-paginacion a {
    padding: .5rem 1rem;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    color: var(--color-texto);
    text-decoration: none;
    transition: border-color .15s, color .15s;
}

.tienda-paginacion a:hover {
    border-color: var(--color-principal);
    color: var(--color-principal);
}

/* ── Carrito: badge, mini-cart, toast, selector de variantes ───────────── */
.tienda-carrito-icono {
    position: relative;
}

.tienda-carrito__badge {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-principal);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1;
    border-radius: 999px;
}

.tienda-carrito__dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 340px;
    max-width: 90vw;
    max-height: 70vh;
    overflow-y: auto;
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    box-shadow: 0 10px 30px rgba(0,0,0,.15);
    z-index: 60;
}

.tienda-carrito__dropdown-vacio {
    padding: 1.5rem 1.25rem;
    color: var(--color-texto-suave);
    text-align: center;
    font-size: .9rem;
}

.tienda-carrito__dropdown-items {
    display: flex;
    flex-direction: column;
}

.tienda-carrito__dropdown-pie {
    padding: .9rem 1.1rem;
    border-top: 1px solid var(--color-borde);
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.tienda-carrito__dropdown-subtotal {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: .9rem;
}

.tienda-carrito__dropdown-pie .tienda-btn {
    width: 100%;
}

#tienda-cart-items {
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    margin-top: 1rem;
    overflow: hidden;
}

.tienda-carrito__resumen {
    display: flex;
    justify-content: space-between;
    max-width: 340px;
    margin-left: auto;
    margin-top: .5rem;
    font-size: .95rem;
}

.tienda-carrito__acciones {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.5rem;
}

.tienda-carrito-item {
    display: grid;
    grid-template-columns: 52px 1fr auto auto;
    align-items: center;
    gap: .6rem;
    padding: .75rem 1.1rem;
    border-bottom: 1px solid var(--color-borde);
}

.tienda-carrito-item:last-child {
    border-bottom: none;
}

.tienda-carrito-item__imagen {
    width: 52px;
    height: 52px;
    object-fit: contain;
    background: var(--color-fondo-alt);
    border-radius: 4px;
}

.tienda-carrito-item__imagen--vacia {
    display: block;
}

.tienda-carrito-item__info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.tienda-carrito-item__titulo {
    font-size: .85rem;
    font-weight: 600;
    color: var(--color-texto);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tienda-carrito-item__titulo:hover {
    text-decoration: underline;
}

.tienda-carrito-item__medidas {
    font-size: .75rem;
    color: var(--color-texto-suave);
}

.tienda-carrito-item__precio {
    font-size: .8rem;
    color: var(--color-texto-suave);
}

.tienda-carrito-item__cantidad {
    width: 48px;
    padding: .3rem;
    text-align: center;
    border: 1px solid var(--color-borde);
    border-radius: 4px;
    font-family: inherit;
}

.tienda-carrito-item__eliminar {
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 999px;
    background: none;
    color: var(--color-texto-suave);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.tienda-carrito-item__eliminar:hover {
    background: var(--color-fondo-alt);
    color: #b91c1c;
}

/* ── Carrito: página de detalle (/cart, paso 1 del checkout) ────────────── */
.tienda-carrito-detalle__pasos {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    gap: 2rem;
    border-bottom: 1px solid var(--color-borde);
    padding-bottom: 1rem;
}

.tienda-carrito-detalle__pasos li {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--color-texto-suave);
    font-size: .9rem;
}

.tienda-carrito-detalle__pasos li span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: var(--color-fondo-alt);
    font-weight: 700;
    font-size: .85rem;
}

.tienda-carrito-detalle__pasos li.is-activa {
    color: var(--color-texto);
    font-weight: 600;
}

.tienda-carrito-detalle__pasos li.is-activa span {
    background: var(--color-principal);
    color: #fff;
}

.tienda-carrito-detalle__layout {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 2rem;
    align-items: start;
}

.tienda-carrito-detalle__tabla {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
}

.tienda-carrito-detalle__tabla th {
    text-align: left;
    font-size: .8rem;
    color: var(--color-texto-suave);
    padding: .6rem .5rem;
    border-bottom: 1px solid var(--color-borde);
}

.tienda-carrito-detalle__tabla td {
    padding: .75rem .5rem;
    border-bottom: 1px solid var(--color-borde);
    vertical-align: middle;
    font-size: .9rem;
}

.tienda-carrito-detalle__col-precio,
.tienda-carrito-detalle__col-cantidad,
.tienda-carrito-detalle__col-total {
    white-space: nowrap;
}

.tienda-carrito-detalle__col-eliminar {
    width: 32px;
}

.tienda-carrito-detalle__cantidad-control {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--color-borde);
    border-radius: 6px;
    overflow: hidden;
    width: fit-content;
}

.tienda-carrito-detalle__cantidad-btn {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: var(--color-fondo-alt);
    color: var(--color-texto);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.tienda-carrito-detalle__cantidad-btn:hover {
    background: var(--color-borde);
}

.tienda-carrito-detalle__cantidad-btn:active {
    background: var(--color-principal);
    color: #fff;
}

.tienda-carrito-detalle__cantidad {
    width: 44px;
    height: 32px;
    padding: 0;
    border: none;
    border-left: 1px solid var(--color-borde);
    border-right: 1px solid var(--color-borde);
    text-align: center;
    font-family: inherit;
    font-size: .9rem;
    -moz-appearance: textfield;
}

.tienda-carrito-detalle__cantidad::-webkit-outer-spin-button,
.tienda-carrito-detalle__cantidad::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.tienda-carrito-detalle__ahorro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .25rem;
    margin-top: .35rem;
    font-size: .78rem;
    color: var(--color-texto-suave);
}

.tienda-carrito-detalle__porcentaje {
    display: inline-block;
    padding: .15rem .55rem;
    border-radius: 999px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

.tienda-carrito-detalle__articulo {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.tienda-carrito-detalle__imagen {
    width: 56px;
    height: 56px;
    object-fit: contain;
    background: var(--color-fondo-alt);
    border-radius: 4px;
    flex-shrink: 0;
}

.tienda-carrito-detalle__imagen--vacia {
    display: block;
}

.tienda-carrito-detalle__info {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.tienda-carrito-detalle__titulo {
    font-weight: 600;
    color: var(--color-texto);
    text-decoration: none;
}

.tienda-carrito-detalle__titulo:hover {
    text-decoration: underline;
}

.tienda-carrito-detalle__medidas {
    font-size: .8rem;
    color: var(--color-texto-suave);
}

/* Recogida en tienda por línea (checkbox en /cart + "Recoges este producto en …") */
.tienda-carrito-detalle__recogida {
    margin-top: .35rem;
    font-size: .85rem;
}

.tienda-carrito-detalle__recogida label {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    cursor: pointer;
}

.tienda-recogida-linea {
    display: block;
    margin-top: .2rem;
    font-size: .8rem;
    color: var(--color-texto-suave);
}

.tienda-recogida-linea a {
    color: inherit;
    text-decoration: underline;
}

.tienda-checkout__recogida ul {
    list-style: none;
    margin: 0 0 .75rem;
    padding: 0;
}

.tienda-checkout__recogida li {
    padding: .6rem 0;
    border-bottom: 1px solid var(--color-borde);
}

.tienda-carrito-detalle__caja {
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    background: var(--color-fondo-alt);
    padding: 1.1rem;
}

.tienda-carrito-detalle__caja-titulo {
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: .02em;
    margin-bottom: .75rem;
}

.tienda-carrito-detalle__totales-fila {
    display: flex;
    justify-content: space-between;
    padding: .4rem 0;
    font-size: .9rem;
}

.tienda-carrito-detalle__totales-fila--total {
    border-top: 1px solid var(--color-borde);
    margin-top: .4rem;
    padding-top: .6rem;
    font-size: 1rem;
}

.tienda-carrito-detalle__finalizar {
    width: 100%;
    margin-top: 1rem;
}

.tienda-carrito-detalle__finalizar:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* Aviso de transporte gratis — tarjeta destacada sobre el fondo del resumen.
   Toda la tipografía es la del cuerpo (var(--tipo-cuerpo)), no el serif de titulares,
   para que lea como el resto del bloque "Su compra". `--color-principal` puede ser un
   tono claro (p. ej. #69b5e4), así que para texto/barra se usa una versión oscurecida. */
.tienda-carrito-detalle__promo {
    --promo-acento: color-mix(in srgb, var(--color-principal) 72%, black);
    margin-top: 1rem;
    padding: .85rem .9rem;
    background: color-mix(in srgb, var(--color-principal) 7%, var(--color-fondo));
    border: 1px solid var(--color-borde);
    border-left: 4px solid var(--color-principal);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}

.tienda-carrito-detalle__promo--conseguido {
    border-left-color: #16a34a;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.tienda-carrito-detalle__promo-titulo {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin: 0 0 .4rem;
    font-family: var(--tipo-cuerpo);
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--color-texto);
}

.tienda-carrito-detalle__promo-titulo::before {
    content: "";
    flex: none;
    width: 1rem;
    height: 1rem;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 3h13v13H1z'/%3E%3Cpath d='M14 8h5l4 4v4h-9z'/%3E%3Ccircle cx='6' cy='19' r='2.2'/%3E%3Ccircle cx='18' cy='19' r='2.2'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 3h13v13H1z'/%3E%3Cpath d='M14 8h5l4 4v4h-9z'/%3E%3Ccircle cx='6' cy='19' r='2.2'/%3E%3Ccircle cx='18' cy='19' r='2.2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.tienda-carrito-detalle__promo--conseguido .tienda-carrito-detalle__promo-titulo {
    color: #166534;
}

.tienda-carrito-detalle__promo-texto {
    margin: 0;
    font-family: var(--tipo-cuerpo);
    font-size: .85rem;
    line-height: 1.45;
    color: var(--color-texto-suave);
}

.tienda-carrito-detalle__promo-texto strong {
    font-weight: 700;
    color: var(--color-texto);
    white-space: nowrap;
}

.tienda-carrito-detalle__promo-barra {
    display: block;
    height: 6px;
    margin: .55rem 0 .45rem;
    background: color-mix(in srgb, var(--color-principal) 18%, #fff);
    border-radius: var(--radio);
    overflow: hidden;
}

.tienda-carrito-detalle__promo-barra::after {
    content: "";
    display: block;
    height: 100%;
    width: var(--promo-progreso, 0%);
    background: var(--promo-acento);
    transition: width .5s ease;
}

.tienda-carrito-detalle__promo-ahorro {
    margin: 0;
    font-family: var(--tipo-cuerpo);
    font-size: .8rem;
    font-weight: 700;
    color: var(--promo-acento);
}

.tienda-carrito-detalle__promo-ok {
    margin: 0;
    font-family: var(--tipo-cuerpo);
    font-size: .95rem;
    font-weight: 700;
    color: #166534;
}

.tienda-carrito-detalle__iva-nota {
    margin: .1rem 0 0;
    font-size: .78rem;
    color: var(--color-texto-suave);
    text-align: right;
}

.tienda-carrito-detalle__presupuesto {
    font-style: italic;
    color: var(--color-texto-suave);
    white-space: nowrap;
}

.tienda-carrito-detalle__presupuesto-nota {
    margin: .35rem 0 0;
    font-size: .8rem;
    color: var(--color-texto-suave);
}

.tienda-carrito-detalle__bono {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-borde);
}

.tienda-carrito-detalle__bono h4 {
    font-size: .85rem;
    margin: 0 0 .5rem;
}

.tienda-carrito-detalle__bono-form {
    display: flex;
    gap: .5rem;
}

.tienda-carrito-detalle__bono-form input {
    flex: 1;
    min-width: 0;
    padding: .55rem .75rem;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    font-family: inherit;
    font-size: .9rem;
}

@media (max-width: 980px) {
    .tienda-carrito-detalle__layout {
        grid-template-columns: 1fr;
    }

    /* La tabla de escritorio (5 columnas fijas) no cabe en una pantalla de
       móvil sin amontonarse — cada <tr> pasa a ser una tarjeta con la info
       del artículo arriba y precio/cantidad/total repartidos debajo,
       reutilizando las mismas clases __col-* que ya seleccionan cada celda. */
    .tienda-carrito-detalle__tabla thead {
        display: none;
    }

    .tienda-carrito-detalle__tabla,
    .tienda-carrito-detalle__tabla tbody,
    .tienda-carrito-detalle__tabla tr {
        display: block;
        width: 100%;
    }

    .tienda-carrito-detalle__tabla tr {
        position: relative;
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "articulo articulo"
            "precio   total"
            "cantidad cantidad";
        gap: .6rem 1rem;
        padding: 1rem 2.25rem 1rem 0;
        border-bottom: 1px solid var(--color-borde);
    }

    .tienda-carrito-detalle__tabla td {
        padding: 0;
        border-bottom: none;
    }

    .tienda-carrito-detalle__col-eliminar {
        position: absolute;
        top: 1rem;
        right: 0;
        width: auto;
    }

    .tienda-carrito-detalle__col-articulo {
        grid-area: articulo;
    }

    .tienda-carrito-detalle__col-precio {
        grid-area: precio;
        white-space: normal;
    }

    .tienda-carrito-detalle__col-cantidad {
        grid-area: cantidad;
        white-space: normal;
    }

    .tienda-carrito-detalle__col-total {
        grid-area: total;
        white-space: normal;
        text-align: right;
        align-self: end;
        font-weight: 600;
    }

    .tienda-carrito-detalle__col-precio::before,
    .tienda-carrito-detalle__col-cantidad::before,
    .tienda-carrito-detalle__col-total::before {
        content: attr(data-label);
        display: block;
        font-size: .7rem;
        color: var(--color-texto-suave);
        font-weight: 400;
        margin-bottom: .3rem;
    }

    /* Objetivo táctil ≥40px (guía habitual de accesibilidad para controles
       tocados con el dedo) — en escritorio el control se queda compacto. */
    .tienda-carrito-detalle__cantidad-btn {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    .tienda-carrito-detalle__cantidad {
        width: 56px;
        height: 40px;
        font-size: 1rem;
    }
}

/* ── Checkout (pasos 2 y 3) ─────────────────────────────────────────────── */

.tienda-checkout {
    padding-bottom: 2rem;
}

/* ── Cabecera y pie reducidos del checkout (menos distractores) ── */
.tienda-co-header {
    background: #fff;
    border-bottom: 1px solid var(--color-borde);
    padding: 1rem 1.25rem;
}

.tienda-co-header__inner {
    max-width: var(--ancho-max);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
}

.tienda-co-header__logo {
    height: 50px;
    width: auto;
}

.tienda-co-header__nombre {
    font-weight: 700;
    font-size: 1.15rem;
}

.tienda-co-header__aparte {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    font-size: .8rem;
    color: var(--color-texto-suave);
}

.tienda-co-header__seguro,
.tienda-co-header__tel {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.tienda-co-header__tel {
    color: var(--color-texto);
    font-weight: 600;
    text-decoration: none;
}

.tienda-co-footer {
    margin-top: 3rem;
    padding: 1.5rem 1.25rem;
    background: var(--color-fondo-alt);
    border-top: 1px solid var(--color-borde);
}

.tienda-co-footer__inner {
    max-width: var(--ancho-max);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    text-align: center;
}

.tienda-co-footer__enlaces {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem 1.25rem;
    font-size: .82rem;
}

.tienda-co-footer__copy {
    margin: 0;
    font-size: .78rem;
    color: var(--color-texto-suave);
}

/* Barra de pasos: 1 completado (verde) · 2 activo (oscuro) · 3 pendiente (gris) */
.tienda-checkout__pasos {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    list-style: none;
    margin: 0 0 2.5rem;
    padding: 1.5rem 0 .5rem;
    flex-wrap: wrap;
}

.tienda-checkout__pasos li,
.tienda-checkout__pasos li a {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: var(--color-texto-suave);
    font-size: .9rem;
    text-decoration: none;
}

.tienda-checkout__pasos li span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--color-fondo-alt);
    color: var(--color-texto-suave);
    font-weight: 700;
    font-size: .85rem;
    flex-shrink: 0;
}

.tienda-checkout__pasos li.is-completa span {
    background: #6aa84f;
    color: #fff;
}

.tienda-checkout__pasos li.is-activa {
    color: var(--color-texto);
    font-weight: 600;
}

.tienda-checkout__pasos li.is-activa span {
    background: #333;
    color: #fff;
}

.tienda-checkout__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}

/* ── Columna izquierda (dirección) ── */
.tienda-checkout__bloque {
    margin-bottom: 1.75rem;
}

.tienda-checkout__bloque h2 {
    font-size: 1.15rem;
    margin: 0 0 1rem;
}

.tienda-checkout__bloque--cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.tienda-checkout__opciones {
    list-style: none;
    padding: 0;
    margin: 0 0 .75rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.tienda-checkout__opcion {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .75rem .9rem;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    font-size: .88rem;
    line-height: 1.4;
    cursor: pointer;
}

.tienda-checkout__opcion:has(input:checked) {
    border-color: var(--color-principal);
    background: color-mix(in srgb, var(--color-principal) 6%, var(--color-fondo));
}

.tienda-checkout__opcion input {
    margin-top: .15rem;
    flex-shrink: 0;
}

.tienda-checkout__opciones--pago .tienda-checkout__opcion {
    align-items: center;
}

.tienda-checkout__check {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .9rem;
    line-height: 1.4;
    margin: 1rem 0;
    cursor: pointer;
}

.tienda-checkout__alta {
    margin-top: .5rem;
}

.tienda-checkout__alta summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    list-style: none;
    cursor: pointer;
    font-size: .9375rem;
    font-weight: 600;
    padding: .75rem 1.5rem;
    border: 1.5px solid var(--color-texto);
    border-radius: var(--radio);
    background: var(--color-fondo);
    color: var(--color-texto);
    transition: opacity .15s;
}

.tienda-checkout__alta summary::-webkit-details-marker {
    display: none;
}

.tienda-checkout__alta summary:hover {
    opacity: .85;
}

.tienda-checkout__alta .tienda-form {
    margin-top: .75rem;
    padding: 1rem;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    background: var(--color-fondo-alt);
}

.tienda-form__req {
    color: #d93025;
}

.tienda-checkout__acciones {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.tienda-checkout__modificar {
    display: inline-block;
    margin-top: .5rem;
    font-size: .82rem;
}

.tienda-checkout__direccion {
    font-style: normal;
    font-size: .9rem;
    line-height: 1.6;
}

.tienda-checkout__comentarios {
    width: 100%;
    padding: .6rem .75rem;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    font-family: inherit;
    font-size: .9rem;
    resize: vertical;
    margin-bottom: 1rem;
}

/* ── Columna derecha (resumen + pago + botón) ── */
.tienda-checkout__resumen {
    background: var(--color-fondo-alt);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.tienda-checkout__resumen h2 {
    font-size: 1.15rem;
    margin: 0 0 1rem;
}

.tienda-checkout__lineas {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}

.tienda-checkout__linea {
    display: grid;
    grid-template-columns: 1.5rem 1fr auto;
    gap: .75rem;
    padding: .75rem 0 .75rem .75rem;
    border-left: 3px solid var(--color-borde);
    font-size: .82rem;
}

.tienda-checkout__linea + .tienda-checkout__linea {
    border-top: 1px solid var(--color-borde);
}

.tienda-checkout__linea-cant {
    color: var(--color-texto-suave);
}

.tienda-checkout__linea-info {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.tienda-checkout__linea-titulo {
    font-weight: 600;
    color: var(--color-texto);
}

.tienda-checkout__linea-car {
    color: var(--color-texto-suave);
    font-size: .78rem;
}

.tienda-checkout__linea-precio {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.tienda-checkout__totales {
    border-top: 1px solid var(--color-borde);
    padding-top: .75rem;
}

.tienda-checkout__totales-fila {
    display: flex;
    justify-content: space-between;
    padding: .3rem 0;
    font-size: .9rem;
}

.tienda-checkout__totales-fila--total {
    border-top: 1px solid var(--color-borde);
    margin-top: .35rem;
    padding-top: .6rem;
    font-size: 1.05rem;
    font-weight: 700;
}

.tienda-checkout__iva-nota {
    margin: .2rem 0 0;
    font-size: .78rem;
    color: var(--color-texto-suave);
    text-align: right;
}

.tienda-checkout__nota {
    margin: .4rem 0 0;
    font-size: .85rem;
    color: var(--color-texto-suave);
}

.tienda-checkout__envio-gratis {
    margin: .9rem 0 0;
    font-size: .85rem;
    line-height: 1.5;
    color: var(--color-texto-suave);
}

.tienda-checkout__envio-gratis strong {
    color: var(--color-texto);
    white-space: nowrap;
}

.tienda-checkout__finalizar {
    width: 100%;
    margin-top: 1rem;
    text-decoration: none;
    background: #333;
}

/* ── Pasarela / Gracias ── */
.tienda-checkout__pasarela,
.tienda-checkout__gracias {
    max-width: 640px;
    margin: 3rem auto;
    padding: 0 1.25rem;
    text-align: center;
}

.tienda-checkout__gracias h1 {
    font-size: 1.5rem;
    margin-bottom: .75rem;
}

.tienda-checkout__gracias-numero {
    font-weight: 600;
    margin: 1rem 0;
}

.tienda-checkout__transferencia {
    text-align: left;
    display: inline-block;
    margin: 1.5rem auto;
    padding: 1.1rem 1.4rem;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    background: var(--color-fondo-alt);
}

.tienda-checkout__transferencia h2 {
    font-size: 1rem;
    margin: 0 0 .6rem;
}

.tienda-checkout__transferencia p {
    margin: .3rem 0;
    font-size: .9rem;
}

.tienda-checkout__gracias-acciones {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 1.5rem;
}

@media (max-width: 900px) {
    .tienda-checkout__layout,
    .tienda-checkout__bloque--cols {
        grid-template-columns: 1fr;
    }

    .tienda-checkout__col-lateral {
        order: -1;
    }
}


/* ── Toast de confirmación (añadido al carrito) ──────────────────────────── */
.tienda-toast {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    /* Por encima de .tienda-header (position: sticky, z-index: 100) — si no, el header
       tapa el toast/modal en vez de quedar debajo del overlay. */
    z-index: 150;
    max-width: 320px;
}

.tienda-toast__contenido {
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-left: 4px solid var(--color-principal);
    border-radius: var(--radio);
    box-shadow: 0 10px 30px rgba(0,0,0,.18);
    padding: .9rem 1.1rem;
    font-size: .9rem;
}

.tienda-toast__contenido--error {
    border-left-color: #dc2626;
    color: #991b1b;
}

.tienda-toast__acciones {
    margin-top: .6rem;
    display: flex;
    gap: 1rem;
    font-size: .85rem;
}

.tienda-toast__acciones a {
    color: var(--color-principal);
    font-weight: 600;
    text-decoration: none;
}

.tienda-toast__acciones button {
    background: none;
    border: none;
    padding: 0;
    color: var(--color-texto-suave);
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
}

/* ── Selector de variantes (modal) ───────────────────────────────────────── */
.tienda-modal {
    position: fixed;
    inset: 0;
    /* Por encima de .tienda-header (position: sticky, z-index: 100) y del toast. */
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tienda-modal__fondo {
    position: absolute;
    inset: 0;
    background: rgba(15, 15, 15, .5);
}

.tienda-modal__panel {
    position: relative;
    width: 560px;
    max-width: 92vw;
    max-height: 85vh;
    overflow-y: auto;
    background: var(--color-fondo);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 20px 50px rgba(0,0,0,.25);
}

.tienda-modal__cerrar {
    position: absolute;
    top: .75rem;
    right: .75rem;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 999px;
    background: var(--color-fondo-alt);
    color: var(--color-texto);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.tienda-modal__titulo {
    font-size: 1.1rem;
    padding-right: 2rem;
    margin-bottom: .25rem;
}

.tienda-modal__ayuda {
    color: var(--color-texto-suave);
    font-size: .85rem;
    margin-bottom: 1rem;
}

/* Popups "Más opciones" de la ficha: el cuerpo es contenido CMS (párrafos,
   listas, enlaces) — se le da tipografía de lectura sobre el panel del modal. */
.tienda-info-modal__cuerpo {
    margin-top: 1rem;
    font-size: .875rem;
    line-height: 1.65;
    color: var(--color-texto);
}

.tienda-info-modal__cuerpo .tienda-zona { display: block; }

.tienda-info-modal__cuerpo :is(p, ul, ol, h2, h3, h4) { margin-bottom: .75rem; }
.tienda-info-modal__cuerpo :is(ul, ol) { padding-left: 1.25rem; }
.tienda-info-modal__cuerpo :is(h2, h3, h4) { font-size: 1rem; }
.tienda-info-modal__cuerpo a { color: var(--color-principal); }
.tienda-info-modal__cuerpo > *:last-child,
.tienda-info-modal__cuerpo .tienda-bloque:last-child :last-child { margin-bottom: 0; }

.tienda-modal__variantes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: .75rem;
}

.tienda-variante-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .3rem;
    padding: .8rem;
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    background: var(--color-fondo);
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: border-color .15s, box-shadow .15s;
}

.tienda-variante-card:hover:not(:disabled) {
    border-color: var(--color-principal);
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.tienda-variante-card:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.tienda-variante-card__caracteristica {
    font-size: .82rem;
    line-height: 1.35;
}

.tienda-variante-card__caracteristica strong {
    font-weight: 600;
}

.tienda-variante-card__precio {
    font-size: 1rem;
    font-weight: 700;
    margin-top: .2rem;
}

.tienda-variante-card__ref {
    font-size: .7rem;
    color: var(--color-texto-suave);
    font-family: monospace;
}

.tienda-variante-card__badge {
    font-size: .7rem;
    font-weight: 700;
    color: #b91c1c;
}

/* ── Modal "Añadir a favoritos" (ficha de producto) ──────────────────────── */
.tienda-favorito-modal__tabs {
    display: flex;
    gap: .25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--color-borde);
}

.tienda-favorito-modal__tabs button {
    flex: 1;
    padding: .65rem .5rem;
    border: none;
    background: none;
    font-family: inherit;
    font-size: .9rem;
    color: var(--color-texto-suave);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.tienda-favorito-modal__tabs button.is-activa {
    color: var(--color-texto);
    font-weight: 600;
    border-bottom-color: var(--color-principal);
}

.tienda-favorito-modal__form {
    max-width: none;
    gap: .9rem;
}

.tienda-favorito-modal__form .tienda-btn { margin-top: .25rem; align-self: flex-start; }

.tienda-favorito-modal__olvido {
    font-size: .85rem;
    color: var(--color-texto-suave);
}

.tienda-favorito-modal__producto {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0 1.5rem;
}

.tienda-favorito-modal__producto img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: var(--radio);
}

.tienda-favorito-modal__acciones {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}

/* ── Ficha de producto ─────────────────────────────────────────────────── */
.tienda-producto {
    /* Versión oscurecida de --color-principal para texto/bordes que necesitan
       contraste AA (ver design_handoff_ficha_producto/README.md → Design Tokens):
       el color principal puro puede ser demasiado claro para texto blanco encima. */
    --color-principal-oscuro: color-mix(in srgb, var(--color-principal) 70%, black);
    --color-principal-hover: color-mix(in srgb, var(--color-principal) 60%, black);
    --color-chip-fondo: color-mix(in srgb, var(--color-principal) 14%, white);
}

.tienda-producto__breadcrumb,
.tienda-producto__ayuda,
.tienda-producto__relacionados {
    grid-column: 1 / -1;
}

.tienda-producto__breadcrumb {
    margin: -1rem 0 1.75rem;
    font-size: .8125rem;
    color: #607d8b;
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}

.tienda-producto__breadcrumb a { color: #607d8b; }
.tienda-producto__breadcrumb a:hover { color: var(--color-principal-oscuro); }
.tienda-producto__breadcrumb [aria-current] { color: var(--color-texto); font-weight: 600; }

/* Separador ">" — compartido por el breadcrumb de la ficha y el de listado/categoría */
.tienda-breadcrumb__sep { color: #b0bec5; }

/* Breadcrumb de listado/categoría: en línea, sobre el título, sin franja gris */
.tienda-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: .9rem;
    font-size: .8125rem;
    color: #607d8b;
}

.tienda-breadcrumb a { color: #607d8b; }
.tienda-breadcrumb a:hover { color: var(--color-principal-oscuro); }
.tienda-breadcrumb [aria-current] { color: var(--color-texto); font-weight: 600; }

/* Grid principal: galería + columna de compra */
.tienda-producto__principal {
    display: grid;
    grid-template-columns: 1fr 470px;
    gap: 2.5rem;
    align-items: start;
}

.tienda-producto__compra-col { min-width: 0; }

/* ── Galería ───────────────────────────────────────────────────────────── */
.tienda-producto__galeria { min-width: 0; }

.tienda-producto__galeria-inner {
    display: flex;
    gap: 1rem;
}

.tienda-producto__galeria-miniaturas {
    display: flex;
    flex-direction: column;
    gap: .625rem;
    width: 84px;
    flex-shrink: 0;
    max-height: 480px;
    overflow-y: auto;
}

.tienda-producto__miniatura {
    padding: 0;
    width: 84px;
    height: 84px;
    flex-shrink: 0;
    border: 1.5px solid #e8ebed;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    cursor: pointer;
}

.tienda-producto__miniatura img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 5px;
    opacity: .65;
}

.tienda-producto__miniatura.is-activa {
    border-color: var(--color-principal-oscuro);
}

.tienda-producto__miniatura.is-activa img,
.tienda-producto__miniatura:hover img {
    opacity: 1;
}

.tienda-producto__miniatura--video {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--color-texto-suave);
}

.tienda-producto__galeria-principal {
    position: relative;
    min-width: 0;
    flex: 1;
}

.tienda-producto__splide-main img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: #fff;
    padding: 14px;
    border: 1px solid #e8ebed;
    border-radius: 12px;
}

/* producto.video es un snippet de embed ya listo (iframe de YouTube, medidas fijas
   inline) — se envuelve para forzarlo a 16:9 responsive dentro del slide. */
.tienda-producto__video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 1px solid #e8ebed;
    border-radius: 12px;
    overflow: hidden;
}

.tienda-producto__video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #000;
    object-fit: contain;
}

/* Vídeo de la descripción (embed legacy), bajo el texto. */
.tienda-producto__video--descripcion {
    margin-top: 1rem;
}

.tienda-producto__video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.tienda-producto__badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    font-size: .75rem;
    font-weight: 700;
    padding: .375rem .625rem;
    border-radius: 999px;
}

.tienda-producto__badge--eco {
    background: #166534;
    color: #fff;
}

.tienda-producto__ampliar {
    position: absolute;
    bottom: 14px;
    right: 14px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: .4375rem;
    height: 40px;
    padding: 0 .875rem;
    border: 1px solid var(--color-borde);
    border-radius: 999px;
    background: rgba(255,255,255,.95);
    font-family: var(--font-base);
    font-size: .8125rem;
    font-weight: 600;
    color: #37474f;
    cursor: zoom-in;
}

.tienda-producto__imagen-unica {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
}

/* Lightbox: reutiliza .tienda-modal (fixed, overlay, z-index) del selector de
   variantes, pero con su propio panel a pantalla casi completa. */
.tienda-lightbox__panel {
    position: relative;
    width: 1000px;
    max-width: 94vw;
    max-height: 90vh;
    background: var(--color-fondo);
    border-radius: var(--radio);
    padding: 1.5rem;
    box-shadow: 0 20px 50px rgba(0,0,0,.25);
}

.tienda-lightbox__cerrar {
    top: -1rem;
    right: -1rem;
    background: var(--color-fondo);
    box-shadow: var(--sombra);
}

.tienda-lightbox__splide-main img {
    display: block;
    width: 100%;
    max-height: 75vh;
    object-fit: contain;
    background: var(--color-fondo);
}

.tienda-lightbox__splide-thumbs { margin-top: .75rem; }

.tienda-lightbox__splide-thumbs img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    cursor: pointer;
    opacity: .6;
}

.tienda-lightbox__splide-thumbs .is-active img {
    opacity: 1;
    border-color: var(--color-principal);
}

/* ── Meta, nombre, rating ──────────────────────────────────────────────── */
.tienda-producto__meta {
    display: flex;
    align-items: center;
    gap: .625rem;
    font-size: .78rem;
    color: #78909c;
    margin-bottom: .5rem;
}

.tienda-producto__marca {
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-principal-oscuro);
}

.tienda-producto__meta-separador {
    width: 1px;
    height: .7rem;
    background: var(--color-borde);
}

.tienda-producto__nombre {
    font-size: 1.6875rem;
    line-height: 1.22;
    font-weight: 700;
    letter-spacing: -.02em;
    text-wrap: pretty;
    margin: 0 0 .625rem;
}

.tienda-producto__rating {
    display: flex;
    align-items: center;
    gap: .625rem;
    font-size: .8125rem;
    color: var(--color-texto-suave);
    margin-bottom: 1.125rem;
}

.tienda-producto__estrellas {
    letter-spacing: .08em;
    font-size: .9375rem;
    color: var(--color-borde);
}

.tienda-producto__estrellas .is-activa { color: #f59e0b; }

/* ── Tarjeta de compra ─────────────────────────────────────────────────── */
.tienda-producto__tarjeta-compra {
    padding: 1.125rem 1.25rem;
    border: 1px solid #e4e8ea;
    border-radius: 12px;
    background: #fbfcfd;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tienda-producto__precio-linea {
    display: flex;
    align-items: baseline;
    gap: .625rem;
    flex-wrap: wrap;
}

.tienda-producto__precio-valor {
    font-size: 2.375rem;
    font-weight: 800;
    letter-spacing: -.035em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.tienda-precio--tachado {
    font-size: .95rem;
    color: var(--color-texto-suave);
    text-decoration: line-through;
    font-variant-numeric: tabular-nums;
}

.tienda-precio--descuento {
    background: var(--color-principal-oscuro);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    padding: .15rem .5rem;
    border-radius: 4px;
}

.tienda-producto__iva {
    font-size: .8125rem;
    color: #607d8b;
    margin-top: -.5rem;
}

.tienda-producto__transporte-linea {
    font-size: .8125rem;
    font-weight: 600;
    color: #166534;
}

.tienda-producto__unidades {
    color: #b91c1c;
    font-weight: 600;
    font-size: .875rem;
    margin: 0;
}

.tienda-producto__canon {
    font-size: .875rem;
    color: var(--color-texto-suave);
    margin: 0;
}

.tienda-producto__descuentos-cantidad {
    border-collapse: collapse;
    font-size: .85rem;
}

.tienda-producto__descuentos-cantidad caption {
    text-align: left;
    font-weight: 600;
    margin-bottom: .35rem;
}

.tienda-producto__descuentos-cantidad td {
    padding: .35rem .75rem .35rem 0;
    border-bottom: 1px solid var(--color-borde);
}

/* Selector de opción por chips (sin modal) */
.tienda-producto__selector-cabecera {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: .5rem;
    font-size: .8125rem;
}

.tienda-producto__selector-cabecera > span:first-child {
    font-size: .84375rem;
    font-weight: 700;
    color: var(--color-texto);
}

.tienda-producto__selector-cabecera > span:last-child {
    color: #78909c;
}

.tienda-producto__chips {
    display: flex;
    gap: .625rem;
    flex-wrap: wrap;
}

/* Desplegable ancho: alternativa a los chips cuando hay más de 4 variantes (ver
   @section('variantes') en producto.blade.php) — con muchas opciones, o varias
   características distintivas a la vez, el grid de chips se vuelve alto e
   inescaneable, y un <select> nativo se recorre mejor. */
.tienda-producto__select {
    width: 100%;
    height: 52px;
    padding: 0 2.25rem 0 .875rem;
    border: 1.5px solid #dde2e5;
    border-radius: 10px;
    background: #fff;
    font-family: var(--font-base);
    font-size: .875rem;
    font-weight: 600;
    color: var(--color-texto);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23546e7a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .875rem center;
    background-size: 18px;
}

.tienda-producto__select:focus {
    outline: 2px solid var(--color-principal-oscuro);
    outline-offset: 1px;
}

.tienda-producto__chip {
    position: relative;
    flex: 1 1 0;
    min-width: 150px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .125rem;
    padding: .6875rem .875rem;
    border: 1.5px solid #dde2e5;
    border-radius: 10px;
    background: #fff;
    font-family: var(--font-base);
    cursor: pointer;
    text-align: left;
    transition: border-color .15s, background-color .15s;
}

.tienda-producto__chip.is-activa {
    border-color: var(--color-principal-oscuro);
    background: var(--color-chip-fondo);
}

.tienda-producto__chip:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.tienda-producto__chip-label {
    font-size: .875rem;
    font-weight: 700;
    color: var(--color-texto);
}

.tienda-producto__chip-precio {
    font-size: .78125rem;
    color: #607d8b;
    font-variant-numeric: tabular-nums;
}

.tienda-producto__chip-badge {
    font-size: .7rem;
    font-weight: 700;
    color: #b91c1c;
}

/* Fila de acción: stepper + CTA + favorito */
.tienda-producto__accion {
    display: flex;
    gap: .625rem;
    align-items: stretch;
}

.tienda-producto__stepper {
    display: flex;
    align-items: center;
    border: 1px solid #dde2e5;
    border-radius: 10px;
    background: #fff;
    height: 52px;
    flex-shrink: 0;
}

.tienda-producto__stepper button {
    width: 42px;
    height: 100%;
    border: none;
    background: none;
    font-size: 1.1875rem;
    color: #546e7a;
    cursor: pointer;
    font-family: var(--font-base);
}

.tienda-producto__stepper button:hover { background: var(--color-fondo-alt); }

.tienda-producto__stepper span {
    width: 34px;
    text-align: center;
    font-size: .9375rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.tienda-producto__comprar-cta {
    flex: 1;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5625rem;
    border-radius: 10px;
    background: var(--color-principal);
    color: #fff;
    font-size: .96875rem;
    font-weight: 700;
    white-space: nowrap;
}

.tienda-producto__comprar-cta:hover { background: var(--color-principal-hover); opacity: 1; }

.tienda-producto__comprar-cta:disabled {
    opacity: .6;
    cursor: wait;
}

.tienda-producto__favorito {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dde2e5;
    border-radius: 10px;
    background: #fff;
    color: #546e7a;
    cursor: pointer;
}

.tienda-producto__favorito.is-activo {
    border-color: #d34d5e;
    background: #fdf2f4;
    color: #d34d5e;
}

.tienda-producto__favorito.is-activo svg { fill: currentColor; }

.tienda-producto__entrega-linea {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .84375rem;
    color: var(--color-texto);
}

.tienda-producto__entrega-linea svg { color: #166534; flex-shrink: 0; }

.tienda-producto__preguntar-enlace {
    display: inline-block;
    margin-top: .5rem;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-size: .84375rem;
    color: var(--color-principal);
    text-decoration: underline;
    cursor: pointer;
}

.tienda-producto__preguntar-enlace:hover { text-decoration: none; }

/* "Hacer una oferta" dentro de la tarjeta de compra: ancho completo, como el
   resto de filas de la tarjeta (paridad con el botón del sitio legacy). */
.tienda-producto__oferta-cta {
    width: 100%;
    align-self: stretch;
}

/* Ahorro de residuos (segunda mano) */
.tienda-producto__ahorro-residuos {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: #f0fdf4;
    border: 1px solid #86efac;
    color: #166534;
    padding: .6rem .9rem;
    border-radius: var(--radio);
    font-size: .85rem;
    margin: 1.125rem 0 0;
}

/* Rejilla de datos clave */
.tienda-producto__datos-clave {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: #eceff1;
    border: 1px solid #eceff1;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 1.125rem;
}

.tienda-producto__dato {
    background: #fff;
    padding: .8125rem .9375rem;
    display: flex;
    flex-direction: column;
    gap: .125rem;
}

/* Con un número impar de datos (1 o 3) el último queda solo en su fila — que
   ocupe el ancho completo evita el hueco vacío del fondo de la rejilla. */
.tienda-producto__dato:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.tienda-producto__dato-titulo {
    font-size: .78125rem;
    font-weight: 700;
}

.tienda-producto__dato-detalle {
    font-size: .75rem;
    color: #78909c;
}

/* Bloque "Más opciones" (paridad con el recuadro de la ficha legacy).
   Va a ancho completo bajo el carrusel de relacionados. */
.tienda-producto__mas-opciones {
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-borde);
}

.tienda-producto__mas-opciones-titulo {
    display: block;
    margin-bottom: .5rem;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #90a4ae;
}

.tienda-producto__mas-opciones-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .375rem 1.25rem;
    font-size: .8125rem;
}

.tienda-producto__mas-opciones-lista a,
.tienda-producto__enlace-boton {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.tienda-producto__mas-opciones-lista a:hover,
.tienda-producto__enlace-boton:hover {
    border-bottom-color: currentColor;
}

.tienda-producto__enlace-boton {
    background: none;
    border-width: 0 0 1px;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

@media (max-width: 480px) {
    .tienda-producto__mas-opciones-lista { grid-template-columns: 1fr; }
}

/* Formularios plegables (oferta, valoración, pregunta) */
.tienda-producto__form-toggle {
    margin: 1.125rem 0 0;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    padding: 1rem 1.25rem;
}

.tienda-producto__form-toggle summary {
    cursor: pointer;
    font-weight: 600;
}

.tienda-producto__form-toggle .tienda-form {
    margin-top: 1rem;
    max-width: none;
}

/* ── Acordeón ──────────────────────────────────────────────────────────── */
.tienda-producto__acordeon {
    grid-column: 1 / -1;
    border-top: 1px solid #eceff1;
    margin-top: 2rem;
}

.tienda-producto__seccion {
    border-bottom: 1px solid #eceff1;
}

.tienda-producto__seccion-cabecera {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem .125rem;
    cursor: pointer;
}

.tienda-producto__seccion-cabecera::-webkit-details-marker { display: none; }

.tienda-producto__seccion-titulo-linea {
    display: flex;
    align-items: baseline;
    gap: .625rem;
}

.tienda-producto__seccion-titulo {
    font-size: 1.0625rem;
    font-weight: 700;
}

.tienda-producto__seccion-meta {
    font-size: .78125rem;
    color: #90a4ae;
}

.tienda-producto__seccion-icono {
    font-size: 1.25rem;
    color: #607d8b;
    line-height: 1;
}

.tienda-producto__seccion-icono::before { content: '+'; }

.tienda-producto__seccion[open] > .tienda-producto__seccion-cabecera .tienda-producto__seccion-icono::before {
    content: '−';
}

.tienda-producto__seccion-cuerpo {
    max-width: 820px;
    padding: 0 .125rem 1.5rem;
    font-size: .90625rem;
    line-height: 1.65;
    color: #37474f;
}

.tienda-producto__seccion-cuerpo p { margin-bottom: .75rem; }
.tienda-producto__seccion-cuerpo ul { list-style: disc; padding-left: 1.125rem; }
.tienda-producto__seccion-cuerpo li { margin-bottom: .375rem; }

.tienda-producto__descripcion-texto {
    max-height: 16.5em; /* 10 líneas a line-height: 1.65 */
    overflow: hidden;
}

.tienda-producto__descripcion.is-expandida .tienda-producto__descripcion-texto {
    max-height: none;
}

.tienda-producto__descripcion-toggle {
    display: block;
    margin-top: .75rem;
    padding: 0;
    background: none;
    border: none;
    color: var(--color-principal, #37474f);
    font-size: .90625rem;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

.tienda-producto__tabla-precios {
    border-collapse: collapse;
    width: 100%;
    max-width: 820px;
}

.tienda-producto__tabla-precios th {
    text-align: left;
    font-weight: 600;
    color: #607d8b;
    font-size: .8125rem;
    padding: .5rem 1rem .5rem 0;
    border-bottom: 1px solid #eceff1;
}

.tienda-producto__tabla-precios td {
    padding: .625rem 1rem .625rem 0;
    border-bottom: 1px solid #eceff1;
}

.tienda-producto__tabla-precios-ref {
    font-family: ui-monospace, monospace;
    font-size: .8125rem;
    color: #607d8b;
}

.tienda-producto__tabla-precios-precio {
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

th.tienda-producto__tabla-precios-precio { font-weight: 600; }

.tienda-producto__tabla-precios-accion { text-align: right; }
.tienda-producto__tabla-precios td.tienda-producto__tabla-precios-accion,
.tienda-producto__tabla-precios th.tienda-producto__tabla-precios-accion { padding-right: 0; }

.tienda-producto__tabla-precios-compra {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.tienda-producto__tabla-precios-cantidad {
    width: 4rem;
    height: 38px;
    padding: 0 .5rem;
    border: 1px solid #cfd8dc;
    border-radius: var(--radio);
    font: inherit;
    font-size: .875rem;
    text-align: center;
}

.tienda-producto__tabla-precios-anadir {
    gap: .375rem;
    height: 38px;
    padding: 0 .875rem;
    font-size: .8125rem;
    white-space: nowrap;
    align-self: auto;
}

.tienda-producto__tabla-precios-anadir:disabled { opacity: .6; cursor: wait; }

.tienda-producto__tabla-precios-sin-stock {
    font-size: .8125rem;
    color: #90a4ae;
}

.tienda-producto__tabla-precios-ref-movil { display: none; }

.tienda-producto__lista-hechos {
    list-style: disc;
    padding-left: 1.125rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

/* ── Valoraciones y preguntas ──────────────────────────────────────────── */
.tienda-producto__ayuda {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 2rem;
}

.tienda-producto__valoraciones,
.tienda-producto__preguntas {
    border: 1px solid #e8ebed;
    border-radius: 12px;
    padding: 1.375rem;
}

.tienda-producto__valoraciones h2,
.tienda-producto__preguntas h2 {
    font-size: 1.0625rem;
    margin-bottom: .375rem;
}

.tienda-producto__valoraciones-media {
    font-weight: 700;
    font-size: 1.1rem;
}

/* :not() en vez de un .tienda-aviso plano: con la misma especificidad que la
   base (línea ~1731), un padding:0 aquí ganaba por orden de aparición y
   dejaba sin padding a los avisos --error/--exito/--presupuesto (aunque su
   fondo/borde sí sobrevivían, protegidos por el selector compuesto). */
.tienda-aviso:not(.tienda-aviso--error):not(.tienda-aviso--exito):not(.tienda-aviso--presupuesto) {
    color: var(--color-texto-suave);
    font-size: .875rem;
    background: none;
    border: none;
    padding: 0;
    margin: 0 0 1rem;
}

.tienda-valoraciones-lista,
.tienda-preguntas-lista {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.tienda-valoracion,
.tienda-pregunta {
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--color-borde);
}

.tienda-valoracion__estrellas {
    color: var(--color-borde);
    font-size: 1rem;
    letter-spacing: .1rem;
}

.tienda-valoracion__estrellas .is-activa { color: #f59e0b; }

.tienda-valoracion__titulo,
.tienda-pregunta__pregunta {
    margin: .4rem 0 .2rem;
}

.tienda-valoracion__mensaje,
.tienda-pregunta__respuesta {
    margin: 0;
    color: var(--color-texto-suave);
    font-size: .9rem;
}

.tienda-valoracion__imagenes {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .6rem;
}

.tienda-valoracion__imagenes img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--color-borde);
}

/* ── Modal de valoración / pregunta ───────────────────────────────────── */
/* Honeypot anti-spam: fuera de pantalla, nunca visible ni tabulable. */
.tienda-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.tienda-form__campo-label {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    margin-bottom: .3rem;
}

.tienda-resena-estrellas {
    display: flex;
    gap: .15rem;
}

.tienda-resena-estrellas__item {
    border: none;
    background: none;
    padding: 0 .1rem;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--color-borde);
    cursor: pointer;
}

.tienda-resena-estrellas__item.is-activa { color: #f59e0b; }

.tienda-resena-modal [data-turnstile] { margin: .25rem 0 .25rem; }

/* CTA de WhatsApp bajo el botón de enviar (paridad con el sitio legacy). */
.tienda-form__whatsapp {
    display: flex;
    align-items: center;
    gap: .625rem;
    margin-top: -.25rem;
    padding: .625rem .875rem;
    border: 1px solid #25d366;
    border-radius: var(--radio);
    color: #0f7a37;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: .02em;
    text-decoration: none;
}

.tienda-form__whatsapp svg {
    flex-shrink: 0;
    color: #25d366;
}

.tienda-form__whatsapp:hover,
.tienda-form__whatsapp:focus-visible {
    background: #edfaf1;
}

/* ── Relacionados ──────────────────────────────────────────────────────── */
.tienda-producto__relacionados {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.tienda-producto__relacionados h2 {
    font-size: 1.1875rem;
    margin-bottom: 1rem;
}

/* ── Barra sticky de compra ────────────────────────────────────────────── */
.tienda-producto__sticky {
    position: sticky;
    bottom: 0;
    z-index: 90;
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: .875rem var(--gap);
    /* margin-top: aire para que el último bloque de la página (relacionados,
       "Más opciones" o zonas CMS) se pueda ver entero al llegar abajo del scroll,
       sin quedar tapado por la barra fija (~72px). */
    margin: 3.5rem calc(-1 * var(--gap)) 0;
    background: #fff;
    border-top: 1px solid var(--color-borde);
    box-shadow: 0 -6px 18px rgba(20,30,40,.06);
}

.tienda-producto__sticky-info {
    display: flex;
    align-items: center;
    gap: .875rem;
    min-width: 0;
}

.tienda-producto__sticky-info img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    border: 1px solid #eceff1;
    border-radius: 8px;
    flex-shrink: 0;
}

.tienda-producto__sticky-texto {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tienda-producto__sticky-titulo {
    font-size: .84375rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tienda-producto__sticky-nota {
    font-size: .75rem;
    color: #78909c;
}

.tienda-producto__sticky-accion {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

/* En desktop el favorito solo vive en la tarjeta de compra; en el patrón móvil
   del handoff reaparece en la barra fija inferior (ver @media max-width:640px). */
.tienda-producto__sticky-accion .js-favorito-toggle {
    display: none;
}

.tienda-producto__sticky-accion strong {
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}

.tienda-producto__sticky-accion .tienda-producto__comprar-cta {
    flex: none;
    height: 46px;
    padding: 0 1.375rem;
}

@media print {
    /* "Imprimir ficha": deja una hoja limpia de producto — sin barra fija, sin
       acciones ni carruseles, y con las secciones del acordeón desplegadas. */
    .tienda-producto__sticky,
    .tienda-producto__mas-opciones,
    .tienda-producto__accion,
    .tienda-producto__favorito,
    .tienda-producto__form-toggle,
    .tienda-producto__relacionados,
    .tienda-producto__ayuda,
    .tienda-producto__breadcrumb { display: none !important; }

    .tienda-producto__seccion .tienda-producto__seccion-cuerpo { display: block !important; }
    .tienda-producto__seccion { break-inside: avoid; }
}

/* ── Responsivo ────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .tienda-grid { grid-template-columns: repeat(2, 1fr); }

    .tienda-producto__principal { grid-template-columns: 1fr; gap: 1.5rem; }
    .tienda-producto__ayuda { grid-template-columns: 1fr; }

    .tienda-producto__galeria-inner { flex-direction: column-reverse; }
    .tienda-producto__galeria-miniaturas {
        flex-direction: row;
        width: auto;
        max-height: none;
        overflow-x: auto;
        overflow-y: visible;
    }

    .tienda-galeria-bloque__principal .splide__slide img {
        height: 260px;
    }
}

@media (max-width: 640px) {
    .tienda-header__contacto-datos { gap: .75rem; }
    .tienda-header__badges { display: none; }

    /* Barra superior: se invierte la visibilidad por ítem. */
    .tienda-header__barra-item--solo-desktop { display: none; }
    .tienda-header__barra-item--solo-movil { display: inline-flex; }
    .tienda-header__barra { gap: .3rem .85rem; font-size: .75rem; }

    .tienda-header__marca-inner { flex-wrap: wrap; }
    .tienda-header__buscador { order: 3; flex-basis: 100%; max-width: none; }
    .tienda-header__iconos { margin-left: auto; }

    .tienda-header__menu-toggle { display: inline-flex; }

    /* Tema muebles — cabecera compacta en móvil: una sola fila (hamburguesa + logo +
       cuenta + cesta) y el buscador debajo; sin "Mi cuenta" en texto. */
    [data-tema="muebles"] .tienda-header__contacto-inner { padding-top: .4rem; padding-bottom: .4rem; }
    [data-tema="muebles"] .tienda-header__marca-inner { padding: 8px 8px 8px 2px; gap:3px; row-gap: .55rem; }
    [data-tema="muebles"] .tienda-header__logo { height: 38px; }
    [data-tema="muebles"] .tienda-header__iconos { gap: .6rem; }
    [data-tema="muebles"] .tienda-header__icono--cuenta .tienda-header__icono-label { display: none; }
    [data-tema="muebles"] .tienda-header__icono--cuenta svg { display: block; }
    [data-tema="muebles"] .tienda-carrito-icono .tienda-header__icono,
    [data-tema="muebles"] .tienda-header__icono--favoritos { width: 40px; height: 40px; }
    [data-tema="muebles"] .tienda-header__buscador input[type="search"] { padding-top: .7rem; padding-bottom: .7rem; }

    /* Tema industrial — cabecera compacta en móvil: la retícula grid de
       escritorio (grid-template-columns: auto minmax(0,1fr) auto, ver arriba)
       da por hecho 3 elementos, pero aquí aparece un 4º (la hamburguesa), que
       cae a una segunda fila compartiendo columna con el buscador — su ancho
       de max-content infla esa columna y aplasta el logo a unos pocos px.
       Se vuelve a flex (mismo patrón que el resto de temas) y, ya que el
       hueco junto a la hamburguesa es demasiado estrecho para el logo
       rectangular, se muestra el favicon cuadrado en su lugar — el logo
       completo se ve igualmente en la cabecera del cajón (nav-cabecera). */
    [data-tema="industrial"] .tienda-header__marca-inner {
        display: flex;
        flex-wrap: wrap;
        padding: 12px 16px;
        gap: 12px;
    }
    [data-tema="industrial"] .tienda-header__buscador { order: 3; flex-basis: 100%; max-width: none; }
    [data-tema="industrial"] .tienda-header__logo--completo { display: none; }
    [data-tema="industrial"] .tienda-header__logo--favicon { display: block; width: 32px; height: 32px; object-fit: contain; }

    /* La franja 3 deja de ser una barra horizontal y pasa a ser el panel
       lateral que abre/cierra .js-menu-toggle, vía la clase body.tienda-menu-movil-abierto
       (ver el primer <script> en header.blade.php). Oculto fuera de pantalla
       por defecto, con transform para animar la entrada/salida. */
    .tienda-header__nav {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        max-width: 85vw;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform .25s ease;
        /* Por encima de .tienda-header__overlay (190) y de .tienda-header (100). */
        z-index: 200;
    }

    body.tienda-menu-movil-abierto { overflow: hidden; }
    body.tienda-menu-movil-abierto .tienda-header__nav { transform: translateX(0); }
    body.tienda-menu-movil-abierto .tienda-header__overlay { display: block; }

    .tienda-header__nav-cerrar { display: flex; }

    .tienda-header__nav-inner {
        flex-direction: column;
        align-items: stretch;
        flex-wrap: nowrap;
        gap: 0;
        padding: 0 0 1.5rem;
    }

    /* ── Cajón móvil: cabecera con marca + cierre "en su sitio" (44px) ── */
    .tienda-header__nav-cabecera {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: .75rem .75rem .75rem 1rem;
        border-bottom: 1px solid var(--nav-borde, var(--color-borde));
        margin-bottom: .5rem;
    }
    .tienda-header__nav-cabecera-marca { display: flex; align-items: center; min-height: 44px; }
    .tienda-header__nav-cabecera .tienda-header__logo { height: 42px; width: auto; }
    .tienda-header__nav-cabecera-nombre { font-size: 1.05rem; font-weight: 700; color: var(--nav-color); }

    .tienda-header__nav-cerrar {
        position: static;
        width: 44px;
        height: 44px;
    }

    .tienda-header__nav-item.tienda-header__nav-item--solo-movil { display: flex; }

    /* ── Grupo = encabezado de sección PLEGABLE (acordeón real, cerrado por
       defecto): usa las mismas reglas genéricas de .tiene-submenu/.submenu-abierto
       de más abajo (el <a> ya no lleva pointer-events:none, así que el toggle
       táctil de tiendaToggleSubmenu()/Dinamico() puede dispararse). Mismo
       tratamiento visual que el sidebar de escritorio
       (.tienda-menu-categorias__grupo-titulo): versalitas sobre banda gris con
       filete arriba y abajo + flecha que gira al abrir, para que cada sección
       se lea y se pliegue de un vistazo — así no hace falta hacer scroll por
       toda una sección para llegar a la siguiente. ── */
    .tienda-header__nav-lista > .tienda-header__nav-item--grupo > a {
        display: flex;
        align-items: center;
        gap: .5rem;
        min-height: 44px;
        padding: .6rem 1rem;
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .07em;
        text-transform: uppercase;
        color: var(--color-texto-suave);
        background: var(--color-fondo-alt);
        border-top: 1px solid var(--color-borde);
        border-bottom: 1px solid var(--color-borde);
    }
    /* La primera sección va pegada a la cabecera: sin filete ni margen extra. */
    .tienda-header__nav-lista > .tienda-header__nav-item--grupo:first-child > a {
        border-top: none;
    }
    .tienda-header__nav-lista > .tienda-header__nav-item--grupo:not(:first-child) {
        margin-top: .75rem;
    }
    /* Flecha de acordeón — gira 90° cuando el grupo está abierto (.submenu-abierto). */
    .tienda-header__nav-lista > .tienda-header__nav-item--grupo > a::after {
        content: '\203A';
        margin-left: auto;
        font-size: 1rem;
        font-weight: 400;
        color: var(--color-texto-suave);
        transition: transform .16s ease;
    }
    .tienda-header__nav-item--grupo.submenu-abierto > a::after {
        transform: rotate(90deg);
    }
    /* Grupo con página hub (`/g/{slug}.html`): su título en color de texto normal
       (primer toque abre/cierra el desplegable, segundo navega — como los demás
       ítems con submenú). */
    .tienda-header__nav-lista > .tienda-header__nav-item--grupo-hub > a {
        color: var(--color-texto);
    }
    .tienda-header__nav-item--grupo > .tienda-header__submenu {
        background: transparent;
    }
    /* Hijos de un grupo (estancias): misma sangría, ritmo y divisoria fina que un
       ítem suelto — no la sangría de submenú-acordeón. */
    .tienda-header__nav-item--grupo > .tienda-header__submenu a {
        padding: .8rem 1rem;
        border-bottom: 1px solid var(--color-borde);
    }

    /* Ítems sueltos de nivel superior (Outlet, Ofertas…): misma sangría/tamaño que
       las estancias — sin heredar el padding horizontal mínimo de la nav de escritorio
       ([data-tema="muebles"] .tienda-header__nav-item > a { padding: 1.05rem .1rem }). */
    .tienda-header__nav-lista > .tienda-header__nav-item:not(.tienda-header__nav-item--grupo) > a {
        padding: .8rem 1rem;
        font-size: .9375rem;
        font-weight: 400;
    }

    /* ── Bloque secundario, sobre fondo gris, tras los ítems de compra ── */
    .tienda-header__nav-lista--secundario {
        margin-top: .5rem;
        background: var(--color-fondo-alt);
        border-top: 1px solid var(--color-borde);
        padding: .5rem 0 1rem;
    }
    .tienda-header__nav-lista--secundario .tienda-header__nav-item > a {
        min-height: 44px;
        padding-top: .7rem;
        padding-bottom: .7rem;
        font-size: .9375rem;
        color: var(--color-texto-suave);
        border-bottom: none;
    }
    .tienda-header__nav-lista--secundario .tienda-header__nav-item--tel > a {
        font-weight: 600;
        color: var(--color-texto);
    }

    .tienda-header__nav-inicio {
        padding: .8rem 1rem;
    }

    /* En el cajón las listas apilan sin separación entre ítems (el ritmo lo dan
       padding + filete). Hay que repetir el selector con [data-tema="muebles"]
       para ganar a `[data-tema="muebles"] .tienda-header__nav-lista { gap: 2rem }`
       (regla de la barra de escritorio, fuera de este media query). */
    .tienda-header__nav-lista,
    [data-tema="muebles"] .tienda-header__nav-lista {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 0;
    }

    .tienda-header__nav-item { flex-direction: column; align-items: stretch; }
    .tienda-header__nav-item > a { padding: .8rem 1rem; white-space: normal; }

    /* Los submenús (incluidos los flyouts de nivel 2) dejan de ser paneles
       flotantes posicionados en absoluto y pasan a expandirse en línea, en
       acordeón, dentro del propio panel — la clase submenu-abierto que los
       muestra ya la gestiona tiendaToggleSubmenu()/tiendaToggleSubmenuDinamico(). */
    .tienda-header__submenu,
    .tienda-header__submenu--nivel2 {
        position: static;
        min-width: 0;
        background: rgba(255, 255, 255, .06);
        border: none;
        box-shadow: none;
        border-radius: 0;
        margin: 0;
    }

    /* Dentro del acordeón móvil el :hover de escritorio (líneas ~305-309, ~336-338)
       sigue coincidiendo si el dispositivo tiene ratón (p.ej. probando el layout
       móvil en escritorio con la ventana estrecha) — el submenú se quedaba abierto
       aunque el JS ya hubiera quitado submenu-abierto en el segundo toque, porque
       el :hover ganaba el empate de especificidad al ir después en el HTML pero
       antes en la hoja de estilos. Aquí, más abajo en la cascada, solo manda la
       clase que gestiona tiendaToggleSubmenu()/tiendaToggleSubmenuDinamico().
       Especificidad (0,4,0): empata con .submenu-abierto de abajo, que gana por ir
       después — NO subir esta especificidad o el acordeón deja de abrir. */
    .tienda-header__nav-item.tiene-submenu:hover > .tienda-header__submenu,
    .tienda-header__nav-item.tiene-submenu:focus-within > .tienda-header__submenu,
    .tienda-header__submenu-item--flyout:hover > .tienda-header__submenu--nivel2,
    .tienda-header__submenu-item--flyout:focus-within > .tienda-header__submenu--nivel2 {
        display: none;
    }

    .tienda-header__nav-item.tiene-submenu.submenu-abierto > .tienda-header__submenu,
    .tienda-header__submenu-item--flyout.submenu-abierto > .tienda-header__submenu--nivel2 {
        display: block;
    }

    .tienda-header__submenu a {
        color: #fff;
        padding: .65rem 1rem .65rem 2rem;
    }

    .tienda-header__submenu a:hover {
        background: rgba(255, 255, 255, .12);
        color: #fff;
    }

    .tienda-header__submenu--nivel2 a { padding-left: 3rem; }

    /* Mega-menú en el cajón: el grupo de nivel superior es la sección plegable
       de nivel 1 (ver reglas de arriba); cada columna es a su vez un acordeón
       de nivel 2 dentro de esa sección — cerrada por defecto, con su propio
       contador y flecha, en vez de volcar de golpe todos sus enlaces al abrir
       el grupo. El toggle de una columna no cierra su grupo padre (ver el
       filtro el.contains(item) en tiendaToggleSubmenu()/Dinamico() del
       <script> de header.blade.php). */
    .tienda-header__submenu--mega {
        padding: 0;
        max-width: none;
        gap: 0;
    }
    .tienda-header__submenu--mega > li { flex-basis: auto; }
    .tienda-header__mega-col { padding: 0; }
    /* Calificado con el padre directo (.tienda-header__mega-col > …, 0,2,0) para
       ganar sin ambigüedad a la regla de escritorio `.tienda-header__submenu a`
       (0,1,1 — un enlace dentro de .tienda-header__submenu-mega, que también lleva
       la clase .tienda-header__submenu): a igualdad de especificidad (0,1,0 vs
       0,1,1) esa regla ganaba pese a ir antes en la hoja, porque especificidad
       manda sobre orden — el disparador se quedaba en display:block y el
       acordeón (flex + flecha + contador) no se pintaba. */
    .tienda-header__mega-col > .tienda-header__mega-col-titulo {
        display: flex;
        align-items: center;
        gap: .5rem;
        min-height: 44px;
        padding: .5rem 1.75rem;
        margin: 0;
        border: none;
        font-size: .75rem;
        font-weight: 600;
        letter-spacing: .05em;
    }
    .tienda-header__mega-col-contador {
        display: inline;
        margin-left: auto;
        font-size: .7rem;
        font-weight: 400;
        color: var(--color-texto-suave);
    }
    .tienda-header__mega-col > .tienda-header__mega-col-titulo::after {
        content: '\203A';
        font-size: 1rem;
        font-weight: 400;
        color: var(--color-texto-suave);
        transition: transform .16s ease;
    }
    .tienda-header__mega-col.submenu-abierto > .tienda-header__mega-col-titulo::after {
        transform: rotate(90deg);
    }
    .tienda-header__mega-col > ul {
        display: none;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .tienda-header__mega-col.submenu-abierto > ul {
        display: block;
    }
    /* Enlaces de columna con más sangría que su título (gana a la regla base
       `.tienda-header__nav-item--grupo > .tienda-header__submenu a`, 0,3,0, por ir
       después con la misma especificidad). */
    .tienda-header__submenu--mega .tienda-header__mega-col a { padding-left: 2.5rem; }

    /* ── Tema muebles — cajón móvil: panel claro al 88 %, objetivos táctiles 44px ── */
    [data-tema="muebles"] .tienda-header__nav {
        width: 88%;
        max-width: 88vw;
    }

    [data-tema="muebles"] .tienda-header__nav-cerrar {
        background: var(--color-fondo-alt);
        color: var(--color-texto);
    }

    [data-tema="muebles"] .tienda-header__nav-inicio,
    [data-tema="muebles"] .tienda-header__nav-item:not(.tienda-header__nav-item--grupo) > a,
    [data-tema="muebles"] .tienda-header__submenu a {
        min-height: 44px;
    }

    /* Divisoria fina solo entre los ítems de compra (no bajo el encabezado de
       grupo ni dentro del bloque gris del pie). */
    [data-tema="muebles"] .tienda-header__nav-lista:not(.tienda-header__nav-lista--secundario) > .tienda-header__nav-item:not(.tienda-header__nav-item--grupo) > a {
        border-bottom: 1px solid var(--color-borde);
    }

    /* Ítem = página actual: marca sobria (barra lateral), nunca relleno azul. */
    [data-tema="muebles"] .tienda-header__nav-item--activo > a {
        color: var(--color-principal);
        box-shadow: inset 3px 0 0 var(--color-principal);
    }

    [data-tema="muebles"] .tienda-header__submenu,
    [data-tema="muebles"] .tienda-header__submenu--nivel2 {
        background: var(--color-fondo-alt);
    }

    [data-tema="muebles"] .tienda-header__submenu a {
        color: var(--color-texto);
    }

    [data-tema="muebles"] .tienda-header__submenu a:hover {
        background: color-mix(in srgb, var(--color-principal) 10%, var(--color-fondo));
        color: var(--color-principal);
    }

    /* ── Tema vintage — cajón móvil: mismo patrón simple que muebles (panel
       claro al 88%, grupos siempre desplegados), pero con overrides propios
       porque aquí --nav-fondo es blanco y no el oscuro que el CSS base del
       drawer asume por defecto (enlaces en color:#fff, botón de cerrar
       blanco translúcido — ambos invisibles sobre un fondo claro). ── */
    [data-tema="vintage"] .tienda-header__nav {
        width: 88%;
        max-width: 88vw;
    }

    [data-tema="vintage"] .tienda-header__nav-cerrar {
        background: var(--color-fondo-alt);
        color: var(--color-texto);
    }

    [data-tema="vintage"] .tienda-header__nav-inicio,
    [data-tema="vintage"] .tienda-header__nav-item:not(.tienda-header__nav-item--grupo) > a,
    [data-tema="vintage"] .tienda-header__submenu a {
        min-height: 44px;
    }

    [data-tema="vintage"] .tienda-header__nav-item--activo > a {
        color: var(--vintage-salvia-oscura);
        box-shadow: inset 3px 0 0 var(--vintage-salvia);
    }

    [data-tema="vintage"] .tienda-header__submenu,
    [data-tema="vintage"] .tienda-header__submenu--nivel2 {
        background: var(--color-fondo-alt);
    }

    [data-tema="vintage"] .tienda-header__submenu a {
        color: var(--color-texto);
    }

    [data-tema="vintage"] .tienda-header__submenu a:hover {
        background: color-mix(in srgb, var(--vintage-salvia) 10%, var(--color-fondo));
        color: var(--vintage-salvia-oscura);
    }

    /* La imagen destacada del grupo no aporta en una lista táctil y, a ancho
       completo del drawer con aspect-ratio 4:3, descolocaba el scroll. */
    [data-tema="vintage"] .tienda-header__mega-col-imagen {
        display: none;
    }

    /* ── Tema industrial — cajón móvil: ancho completo, blanco (el verde queda
       reservado al grupo activo, los "Ver todo" y el filete de las hijas —
       nada de bloques verdes a pantalla completa). ── */
    [data-tema="industrial"] .tienda-header__nav {
        width: 100%;
        max-width: 100vw;
        background: #ffffff;
    }

    [data-tema="industrial"] .tienda-header__nav-cabecera {
        border-bottom: 1px solid var(--industrial-hairline);
    }
    [data-tema="industrial"] .tienda-header__nav-cabecera-nombre { color: var(--industrial-titulo-grupo); }

    [data-tema="industrial"] .tienda-header__nav-cerrar {
        background: #f2f3ee;
        color: #2b3318;
    }

    /* Grupos = acordeón real (a diferencia de default/muebles, que los dejan
       siempre desplegados): colapsados por defecto, un solo grupo abierto a
       la vez (mismo mecanismo `.submenu-abierto` que ya gestiona el toggle de
       click/touch — ver tiendaToggleSubmenu en el script de header.blade.php).
       El nombre permite 2 líneas en vez de truncarse. */
    [data-tema="industrial"] .tienda-header__nav-lista > .tienda-header__nav-item--grupo > a {
        pointer-events: auto;
        min-height: 52px;
        padding: 12px 4px;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.3;
        letter-spacing: normal;
        text-transform: none;
        color: var(--industrial-titulo-grupo);
        background: transparent;
        border-top: none;
        border-bottom: 1px solid #eceee6;
        white-space: normal;
        justify-content: space-between;
        gap: 10px;
    }
    [data-tema="industrial"] .tienda-header__nav-lista > .tienda-header__nav-item--grupo:not(:first-child) {
        margin-top: 0;
    }
    [data-tema="industrial"] .tienda-header__nav-lista > .tienda-header__nav-item--grupo > a::after {
        content: '\203A';
        font-size: 15px;
        opacity: 1;
        color: var(--industrial-placeholder);
        transition: transform .16s ease;
    }
    [data-tema="industrial"] .tienda-header__nav-item--grupo.submenu-abierto > a {
        color: var(--industrial-verde-texto-hover);
    }
    [data-tema="industrial"] .tienda-header__nav-item--grupo.submenu-abierto > a::after {
        color: var(--industrial-verde);
        transform: rotate(90deg);
    }
    [data-tema="industrial"] .tienda-header__nav-lista > .tienda-header__nav-item--grupo > .tienda-header__submenu {
        display: none;
        background: transparent;
        border-left: 2px solid var(--industrial-filete-movil);
        margin-left: 14px;
    }
    [data-tema="industrial"] .tienda-header__nav-item--grupo.submenu-abierto > .tienda-header__submenu {
        display: block;
    }
    [data-tema="industrial"] .tienda-header__nav-item--grupo > .tienda-header__submenu a {
        padding: 11px 4px 11px 14px;
        min-height: 44px;
        font-size: 14.5px;
        color: var(--industrial-texto-enlace);
        border-bottom: none;
    }
    [data-tema="industrial"] .tienda-header__nav-item--grupo > .tienda-header__submenu a:hover {
        background: transparent;
        color: var(--industrial-verde-texto-hover);
    }
    [data-tema="industrial"] .tienda-header__submenu-item--activo > a {
        color: var(--industrial-verde-texto-hover);
        font-weight: 600;
    }

    /* Mega-menú (grupo "Productos") en el cajón: sus columnas se aplanan a filas de
       acordeón de primer nivel — mismo trato visual que un grupo normal (fila con
       contador + chevron, single-open), en vez de mostrarse todas expandidas de golpe
       bajo un único disparador. El <li> y el <ul> intermedios (el grupo "Productos" y
       su .tienda-header__submenu--mega) se vuelven transparentes al layout con
       display:contents — sus hijos (.tienda-header__mega-col) pasan a fluir como si
       fueran hermanos directos de "Ocasión y outlet"/"Contacto" en la misma lista.
       El disparador "Productos" deja de ser clicable y pasa a ser solo una etiqueta
       de sección con el nombre del propio grupo (generaliza a cualquier tienda/label,
       a diferencia de un texto "PRODUCTOS" fijo). !important porque debe ganar tanto
       al display:none por defecto de .tienda-header__submenu como al display:flex
       condicionado a .submenu-abierto del panel de escritorio (ninguno de los dos
       media-gated) — aquí el submenú del mega ya no depende de ese estado. */
    [data-tema="industrial"] .tienda-header__nav-item--mega > a {
        pointer-events: none;
        min-height: 0;
        padding: 12px 4px 4px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--industrial-placeholder);
        background: transparent;
        border: none;
    }
    [data-tema="industrial"] .tienda-header__nav-item--mega > a::after { display: none; }
    [data-tema="industrial"] .tienda-header__nav-item--mega > .tienda-header__submenu--mega {
        display: contents !important;
    }

    [data-tema="industrial"] .tienda-header__mega-col {
        display: block;
        border-bottom: 1px solid #eceee6;
    }
    [data-tema="industrial"] .tienda-header__mega-col-titulo {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 52px;
        padding: 12px 4px;
        margin: 0;
        border: none;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.3;
        letter-spacing: normal;
        text-transform: none;
        white-space: normal;
        color: var(--industrial-titulo-grupo);
    }
    [data-tema="industrial"] .tienda-header__mega-col-contador {
        display: inline;
        margin-left: auto;
        font-size: 12px;
        color: var(--industrial-texto-terciario);
        font-variant-numeric: tabular-nums;
    }
    [data-tema="industrial"] .tienda-header__mega-col-titulo::after {
        content: '\203A';
        font-size: 15px;
        color: var(--industrial-placeholder);
        transition: transform .16s ease;
    }
    [data-tema="industrial"] .tienda-header__mega-col.submenu-abierto > .tienda-header__mega-col-titulo {
        color: var(--industrial-verde-texto-hover);
    }
    [data-tema="industrial"] .tienda-header__mega-col.submenu-abierto > .tienda-header__mega-col-titulo .tienda-header__mega-col-contador {
        color: var(--industrial-verde-texto-hover);
    }
    [data-tema="industrial"] .tienda-header__mega-col.submenu-abierto > .tienda-header__mega-col-titulo::after {
        color: var(--industrial-verde);
        transform: rotate(90deg);
    }
    [data-tema="industrial"] .tienda-header__mega-col > ul {
        display: none;
        margin: 0 0 10px 14px;
        padding: 0;
        list-style: none;
        border-left: 2px solid var(--industrial-filete-movil);
    }
    [data-tema="industrial"] .tienda-header__mega-col.submenu-abierto > ul {
        display: block;
    }
    [data-tema="industrial"] .tienda-header__submenu--mega .tienda-header__mega-col a {
        padding: 11px 4px 11px 14px;
        min-height: 44px;
        display: flex;
        align-items: center;
        font-size: 14.5px;
        color: var(--industrial-texto-enlace);
    }
    [data-tema="industrial"] .tienda-header__mega-col-vermas a,
    [data-tema="industrial"] .tienda-header__submenu-item--vermas a,
    [data-tema="industrial"] .tienda-header__submenu-item--vertodo a {
        color: var(--industrial-verde-enlace);
    }

    /* Enlaces sueltos de nivel superior (Ideas y consejos, Contacto...) */
    [data-tema="industrial"] .tienda-header__nav-lista > .tienda-header__nav-item:not(.tienda-header__nav-item--grupo) > a {
        color: var(--industrial-texto-enlace);
        border-bottom: 1px solid #eceee6;
    }

    .tienda-contacto { grid-template-columns: 1fr; gap: 2rem; }

    .tienda-footer__inner { flex-direction: column; gap: 1.25rem; }

    /* El aside de categorías (sidebar-categorias) se oculta en móvil: en la página
       de categoría su función (navegar subcategorías) la cubre el cajón
       hamburguesa. En escritorio sigue a la izquierda. */
    .tienda-layout-sidebar { grid-template-columns: 1fr; }
    .tienda-layout-sidebar__aside { display: none; }

    .tienda-grid { grid-template-columns: 1fr; }
    .tienda-zona { grid-template-columns: 1fr; }
    .tienda-novedades__grid { grid-template-columns: 1fr; }

    .tienda-paginacion { flex-wrap: wrap; gap: .75rem; }

    .tienda-carrito__dropdown {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: auto;
        max-width: none;
        max-height: 75vh;
        border-radius: 16px 16px 0 0;
    }

    .tienda-toast {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
        max-width: none;
    }

    .tienda-modal {
        align-items: flex-end;
    }

    .tienda-modal__panel {
        width: 100%;
        max-width: none;
        max-height: 80vh;
        border-radius: 16px 16px 0 0;
        padding: 1.25rem 1rem 1.5rem;
    }

    .tienda-modal__variantes {
        grid-template-columns: 1fr 1fr;
    }

    /* El lightbox se centra verticalmente: como hoja inferior dejaba mucho hueco
       arriba con las imágenes apaisadas. (El modal de favoritos sigue abajo.) */
    .tienda-modal.tienda-lightbox {
        align-items: center;
    }

    .tienda-lightbox__panel {
        width: 100%;
        max-width: none;
        max-height: 90vh;
        border-radius: 16px;
        padding: 1.25rem 1rem 1.5rem;
    }

    /* En escritorio el botón cuelga fuera del panel (-1rem); sobre el panel de
       móvil eso lo saca del viewport y en blanco no se ve encima de la foto —
       se trae dentro con fondo oscuro. */
    .tienda-lightbox__cerrar {
        top: .5rem;
        right: .5rem;
        width: 36px;
        height: 36px;
        /* por encima del carrusel y sus flechas (.splide__arrow z-index:1),
           que van después en el DOM y si no lo tapan */
        z-index: 3;
        background: rgba(15, 15, 15, .6);
        color: #fff;
        box-shadow: none;
    }

    .tienda-form__campo { max-width: none; }

    .tienda-producto__breadcrumb,
    .tienda-breadcrumb {
        font-size: .75rem;
        flex-wrap: nowrap;
        overflow-x: auto;
    }
    .tienda-producto__breadcrumb a,
    .tienda-producto__breadcrumb span,
    .tienda-breadcrumb a,
    .tienda-breadcrumb span { white-space: nowrap; }

    .tienda-producto__miniatura { width: 56px; height: 56px; }

    .tienda-producto__nombre { font-size: 1.3125rem; }
    .tienda-producto__precio-valor { font-size: 2rem; }

    .tienda-producto__chips { flex-direction: column; }
    .tienda-producto__chip {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        min-height: 52px;
        width: 100%;
    }

    /* A 360 px, stepper (118) + CTA "Añadir al carrito" (nowrap) + favorito (52)
       no caben en una fila: el desbordamiento ensancha la página ~50 px y el
       navegador móvil expande el viewport, dejando todo (incluido el lightbox
       fixed) cortado por la derecha. La CTA baja a su propia fila. */
    .tienda-producto__accion { flex-wrap: wrap; }
    .tienda-producto__accion .tienda-producto__comprar-cta {
        flex-basis: 100%;
        order: 1;
    }

    .tienda-producto__seccion-titulo { font-size: .90625rem; }
    .tienda-producto__seccion-cabecera { min-height: 52px; padding: .875rem .125rem; }

    /* Tabla de precios: sin columna de referencia (pasa bajo la opción) y el
       botón de añadir queda solo con el icono, para que quepan las 3 columnas. */
    .tienda-producto__tabla-precios th.tienda-producto__tabla-precios-ref,
    .tienda-producto__tabla-precios td.tienda-producto__tabla-precios-ref { display: none; }
    .tienda-producto__tabla-precios-ref-movil {
        display: block;
        font-family: ui-monospace, monospace;
        font-size: .75rem;
        color: #607d8b;
    }
    .tienda-producto__tabla-precios td { padding-right: .625rem; }
    .tienda-producto__tabla-precios-anadir-texto { display: none; }
    .tienda-producto__tabla-precios-anadir { width: 42px; padding: 0; }
    .tienda-producto__tabla-precios-cantidad { width: 3.25rem; }

    .tienda-producto__sticky-info { display: none; }
    .tienda-producto__sticky-accion { flex: 1; }
    .tienda-producto__sticky-accion .js-favorito-toggle { display: flex; }
    .tienda-producto__sticky-accion .tienda-producto__comprar-cta { flex: 1; height: 50px; }
}

/* ── Área de cliente ──────────────────────────────────────────────────── */
.tienda-cuenta {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 2.5rem;
    align-items: start;
}

.tienda-cuenta__sidebar {
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    padding: 1.25rem;
}

.tienda-cuenta__saludo {
    font-weight: 600;
    margin-bottom: .75rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--color-borde);
}

.tienda-cuenta__menu ul { list-style: none; margin: 0; padding: 0; }

.tienda-cuenta__menu li { margin: .125rem 0; }

.tienda-cuenta__menu a {
    display: block;
    padding: .5rem .625rem;
    border-radius: var(--radio);
    color: var(--color-texto);
    text-decoration: none;
    font-size: .9375rem;
}

.tienda-cuenta__menu a:hover { background: var(--color-fondo-alt); }

.tienda-cuenta__menu a.is-activa {
    background: var(--color-principal);
    color: #fff;
}

.tienda-cuenta__menu-salir {
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px solid var(--color-borde);
}

.tienda-cuenta__contenido h1 { margin-bottom: 1.5rem; }
.tienda-cuenta__contenido h2 { font-size: 1.15rem; margin: 2rem 0 1rem; }

.tienda-cuenta__tarjeta {
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.tienda-cuenta__separador {
    border: none;
    border-top: 1px solid var(--color-borde);
    margin: 2.5rem 0;
}

/* Tabs (pedidos / presupuestos) */
.tienda-cuenta__tabs {
    display: flex;
    gap: .25rem;
    border-bottom: 1px solid var(--color-borde);
    margin-bottom: 1.5rem;
}

.tienda-cuenta__tabs a {
    padding: .625rem 1rem;
    text-decoration: none;
    color: var(--color-texto-suave);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.tienda-cuenta__tabs a.is-activa {
    color: var(--color-texto);
    border-bottom-color: var(--color-principal);
    font-weight: 600;
}

.tienda-cuenta__paginacion {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.25rem;
}

/* Listas de direcciones / facturación */
.tienda-cuenta__lista { list-style: none; margin: 0 0 1.5rem; padding: 0; }

.tienda-cuenta__lista > li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    padding: 1rem 1.25rem;
    margin-bottom: .75rem;
}

.tienda-cuenta__direccion { font-style: normal; line-height: 1.5; font-size: .9375rem; }

.tienda-cuenta__lista-acciones {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    align-items: flex-end;
    flex-shrink: 0;
}

.tienda-cuenta__enlace-boton {
    background: none;
    border: none;
    padding: 0;
    color: #991b1b;
    cursor: pointer;
    font: inherit;
    text-decoration: underline;
}

/* Totales de pedido / factura */
.tienda-cuenta__totales {
    margin: 1.5rem 0;
    max-width: 320px;
    margin-left: auto;
}

.tienda-cuenta__totales p {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    padding: .25rem 0;
}

.tienda-cuenta__totales-final {
    border-top: 1px solid var(--color-borde);
    margin-top: .375rem;
    padding-top: .5rem !important;
    font-size: 1.0625rem;
}

.tienda-cuenta__acciones { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; }
.tienda-cuenta__acciones form { display: inline; }
.tienda-cuenta__aviso-pago {
    margin: 1.5rem 0 .6rem;
    padding: .8rem 1rem;
    background: color-mix(in srgb, var(--color-principal) 8%, transparent);
    border-left: 3px solid var(--color-principal);
    border-radius: 4px;
    font-size: .9rem;
}
.tienda-cuenta__pagar { margin-bottom: .5rem; }

/* Favoritos */
.tienda-favoritos {
    /* Igual que .tienda-producto: el color principal puro puede quedar muy claro
       para texto blanco sobre el badge de descuento. */
    --color-principal-oscuro: color-mix(in srgb, var(--color-principal) 70%, black);
}

.tienda-favoritos__scroll { overflow-x: auto; }

.tienda-favoritos__tabla {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
}

.tienda-favoritos__tabla th {
    text-align: left;
    font-size: .8rem;
    color: var(--color-texto-suave);
    padding: .6rem .5rem;
    border-bottom: 1px solid var(--color-borde);
    white-space: nowrap;
}

.tienda-favoritos__tabla td {
    padding: .75rem .5rem;
    border-bottom: 1px solid var(--color-borde);
    vertical-align: top;
    font-size: .9rem;
}

.tienda-favoritos__ref {
    display: block;
    margin-top: .2rem;
    font-size: .8rem;
    color: var(--color-texto-suave);
    font-variant-numeric: tabular-nums;
}

.tienda-favoritos__col-img { width: 80px; }
.tienda-favoritos__col-acciones { width: 52px; }

.tienda-favoritos__img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--radio);
    display: block;
}

.tienda-favoritos__desc { min-width: 200px; }

.tienda-favoritos__titulo {
    font-weight: 600;
    color: var(--color-texto);
    text-decoration: none;
    display: block;
}
a.tienda-favoritos__titulo:hover { text-decoration: underline; }

.tienda-favoritos__opciones {
    display: block;
    margin-top: .25rem;
    font-size: .8rem;
    color: var(--color-texto-suave);
    line-height: 1.4;
}

.tienda-favoritos__nodisp {
    display: block;
    margin-top: .35rem;
    font-size: .8rem;
    color: var(--color-error, #c0392b);
}

.tienda-favoritos__precio { white-space: nowrap; }

.tienda-favoritos__precio-valor {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    display: inline-block;
}

.tienda-favoritos__precio .tienda-precio--tachado { display: block; }

.tienda-favoritos__agotado {
    display: block;
    color: var(--color-error, #c0392b);
    text-transform: uppercase;
    font-size: .75rem;
    margin-bottom: .15rem;
}

.tienda-favoritos__iva {
    display: block;
    font-size: .75rem;
    color: var(--color-texto-suave);
    margin-top: .15rem;
}

.tienda-favoritos__notify {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    margin-top: .5rem;
    font-size: .78rem;
    color: var(--color-texto-suave);
    white-space: normal;
    max-width: 180px;
    cursor: pointer;
}
.tienda-favoritos__notify input { margin-top: .15rem; flex-shrink: 0; }

.tienda-favoritos__cantidad-control {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--color-borde);
    border-radius: 6px;
    overflow: hidden;
    width: fit-content;
}

.tienda-favoritos__cantidad-btn {
    width: 30px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: var(--color-fondo-alt);
    color: var(--color-texto);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}
.tienda-favoritos__cantidad-btn:hover { background: var(--color-borde); }
.tienda-favoritos__cantidad-btn:active { background: var(--color-principal); color: #fff; }

.tienda-favoritos__cantidad-input {
    width: 42px;
    height: 32px;
    padding: 0;
    border: none;
    border-left: 1px solid var(--color-borde);
    border-right: 1px solid var(--color-borde);
    text-align: center;
    font-family: inherit;
    font-size: .9rem;
    -moz-appearance: textfield;
}
.tienda-favoritos__cantidad-input::-webkit-outer-spin-button,
.tienda-favoritos__cantidad-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.tienda-favoritos__total { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* La columna de acciones es un <td> normal (participa en la altura de la fila);
   el flex va en el <div> interno, no en el <td> — un <td> con display:flex se sale
   del layout de tabla y su borde inferior queda desalineado con el resto de celdas. */
.tienda-favoritos__acciones { width: 1%; white-space: nowrap; vertical-align: middle; }

.tienda-favoritos__acciones-fila {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    align-items: center;
}

.tienda-favoritos__accion {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    background: var(--color-fondo);
    color: var(--color-texto-suave);
    cursor: pointer;
}
.tienda-favoritos__accion:hover { color: var(--color-texto); border-color: var(--color-texto-suave); }
.tienda-favoritos__accion[disabled] { opacity: .5; cursor: default; }

.tienda-favoritos__pie { border-top: 1px solid var(--color-borde); padding-top: 1.25rem; }

@media (max-width: 768px) {
    .tienda-favoritos__tabla,
    .tienda-favoritos__tabla thead,
    .tienda-favoritos__tabla tbody,
    .tienda-favoritos__tabla td { display: block; width: 100%; border-bottom: none; }
    .tienda-favoritos__tabla thead { display: none; }

    /* Cada fila es una tarjeta con la imagen fija a la izquierda y el resto
       apilado a la derecha — grid en vez de position:absolute (que recortaba la
       imagen y dejaba el texto por debajo en pantallas estrechas). */
    .tienda-favoritos__fila {
        display: grid;
        grid-template-columns: 64px 1fr;
        column-gap: .85rem;
        row-gap: .3rem;
        align-items: start;
        border: 1px solid var(--color-borde);
        border-radius: var(--radio);
        padding: .85rem;
        margin-bottom: 1rem;
    }

    /* Todo va en la columna derecha MENOS la imagen (columna izquierda).
       El :not() es necesario: `.tienda-favoritos__tabla td` (0-1-1) ganaba a
       `.tienda-favoritos__col-img` (0-1-0) y metía la imagen también en la col 2,
       dejando la col 1 vacía = margen blanco a la izquierda. */
    .tienda-favoritos__tabla td:not(.tienda-favoritos__col-img) {
        border: none;
        padding: 0;
        grid-column: 2;
        min-width: 0;
    }

    .tienda-favoritos__col-img {
        border: none;
        padding: 0;
        grid-column: 1;
        grid-row: 1 / span 2;
        align-self: start;
    }
    .tienda-favoritos__img { width: 64px; height: 64px; }

    .tienda-favoritos__tabla td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: .72rem;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--color-texto-suave);
        margin-bottom: .1rem;
    }

    .tienda-favoritos__acciones { width: auto; }
    .tienda-favoritos__acciones-fila { flex-direction: row; align-items: center; margin-top: .35rem; }
    .tienda-favoritos__notify { max-width: none; }

    .tienda-favoritos__pie { display: flex; flex-direction: column; }
    .tienda-favoritos__pie .tienda-btn { text-align: center; }
}

/* Tabla genérica del área de cliente */
.tienda-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: .9375rem;
    margin-bottom: 1.5rem;
}

.tienda-tabla th,
.tienda-tabla td {
    text-align: left;
    padding: .625rem .75rem;
    border-bottom: 1px solid var(--color-borde);
}

.tienda-tabla th { font-weight: 600; background: var(--color-fondo-alt); }

/* Factura imprimible */
.tienda-factura { max-width: 720px; margin: 0 auto; }
.tienda-factura__acciones { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
.tienda-factura__cabecera { margin-bottom: 2rem; }
.tienda-factura__partes { display: flex; gap: 3rem; flex-wrap: wrap; margin-bottom: 2rem; }
.tienda-factura__partes address { font-style: normal; line-height: 1.6; }

@media print {
    .tienda-header, .tienda-footer, .tienda-no-print { display: none !important; }
    .tienda-main { padding: 0 !important; }
    .tienda-factura { max-width: none; }
}

@media (max-width: 768px) {
    .tienda-cuenta { grid-template-columns: 1fr; gap: 1.5rem; }
    .tienda-cuenta__lista > li { flex-direction: column; }
    .tienda-cuenta__lista-acciones { flex-direction: row; align-items: center; }
    .tienda-cuenta__totales { margin-left: 0; max-width: none; }
}

/* Banner de cookies (cookie-consent.js del legacy, ver partials/cookies/head): el script
   inyecta sus estilos con colores fijos al final del <head>; `body` sube la especificidad
   para que ganen los de la tienda. */
body .cc-btn-primary,
body .cc-toggle.active,
body .cc-float-btn {
    background: var(--color-principal);
}

body .cc-btn-primary:hover {
    background: color-mix(in srgb, var(--color-principal) 80%, black);
}

body .cc-float-btn,
body .cc-float-btn:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}

/* En móvil el botón flotante tapa la barra fija de la ficha; la configuración sigue
   accesible desde el enlace "Cookies" del pie. */
@media (max-width: 768px) {
    body .cc-float-btn.show { display: none; }
}

.tienda-carrito-detalle__finalizar--presupuesto {
    margin-top: .5rem;
    text-align: center;
}