/* Capa visual común de la tienda: navbar, títulos de sección, beneficios, cards, slider y footer.
   Los colores vienen de variables que se configuran en Panel > Apariencia (ver layouts/app.blade.php). */
:root {
    --tu-acento: #00B1F0;
    --tu-primario: #2095CE;
    --tu-secundario: #186489;
    --tu-fondo: #EDF1EE;
    --tu-texto: #2b2f33;
    --tu-muted: #667085;
    --tu-borde: #e4e7ea;
    --tu-chip: #eef6fa;
    --tu-radio: 10px;
    --color-primary: var(--tu-acento);
    --color-secondary: var(--tu-secundario);
}

body {
    background: var(--tu-fondo);
}

.icono {
    flex-shrink: 0;
    vertical-align: middle;
}

/* ---------- Barra de anuncios ---------- */
.tu-anuncio {
    font-size: .84rem;
    font-weight: 500;
    text-align: center;
    padding: 7px 0;
    letter-spacing: .1px;
}

.tu-anuncio a:hover {
    text-decoration: underline;
}

/* ---------- Navbar ---------- */
.tu-navbar {
    box-shadow: 0 1px 0 var(--tu-borde), 0 4px 14px #0000000a;
}

.tu-navbar .navbar-top {
    padding: 12px 0;
    border-bottom: 1px solid var(--tu-borde);
}

.tu-navbar .navbar-top-content {
    gap: 28px;
}

.tu-chip {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--tu-chip);
    color: var(--tu-secundario);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
    border: 0;
    transition: background .2s, color .2s, transform .2s;
}

.tu-accion {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--tu-texto);
    text-decoration: none !important;
    padding: 2px 4px;
}

.tu-accion:hover .tu-chip,
.tu-chip.mobile-toggle:hover {
    background: var(--tu-primario);
    color: #fff;
}

.tu-accion:hover {
    color: var(--tu-primario);
}

.tu-accion-texto {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    font-size: .86rem;
    font-weight: 600;
    white-space: nowrap;
}

.tu-accion-texto small {
    font-size: .72rem;
    font-weight: 400;
    color: var(--tu-muted);
}

.tu-accion-texto .icono {
    display: inline;
    margin-left: 2px;
}

.tu-navbar .navbar-actions {
    gap: 18px;
}

.tu-navbar .cart-badge {
    top: -3px;
    right: -3px;
    width: auto;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--tu-acento);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    box-shadow: 0 0 0 2px #fff;
}

.tu-navbar .navbar-user-menu .dropdown-menu {
    border-radius: 10px;
    border-color: var(--tu-borde);
    padding: 8px;
    margin-top: 12px;
    min-width: 220px;
}

.tu-navbar .navbar-user-menu .dropdown-item {
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    font-size: .88rem;
}

.tu-navbar .navbar-user-menu .dropdown-item:hover {
    background: var(--tu-chip);
    color: var(--tu-secundario);
}

/* Buscador */
.tu-navbar .navbar-search {
    max-width: 620px;
}

.tu-navbar .search-input-wrapper input {
    height: 44px;
    border-radius: 22px;
    border: 1.5px solid var(--tu-borde);
    background: #f7f9fa;
    padding: 0 56px 0 20px;
    font-size: .92rem;
}

.tu-navbar .search-input-wrapper input:focus {
    background: #fff;
    border-color: var(--tu-acento);
    box-shadow: 0 0 0 4px #00b1f01f;
}

.tu-navbar .search-input-wrapper .btn-search {
    top: 4px;
    right: 4px;
    height: 36px;
    width: 36px;
    border-radius: 50%;
    background: var(--tu-primario);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tu-navbar .search-input-wrapper .btn-search:hover {
    background: var(--tu-secundario);
    color: #fff;
}

.tu-navbar input[type="search"]::-webkit-search-cancel-button {
    display: none;
}

/* Menú inferior */
.tu-navbar .navbar-bottom {
    height: 48px;
    border-bottom: 0;
}

.tu-navbar-bottom {
    gap: 24px;
    height: 100%;
}

.tu-navbar-bottom .menu-categoria-link {
    font-weight: 600;
    font-size: .9rem;
    color: var(--tu-texto) !important;
}

.tu-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 4px;
    align-items: center;
    overflow-x: auto;
    scrollbar-width: none;
}

.tu-links a {
    display: block;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: .86rem;
    font-weight: 500;
    color: var(--tu-texto);
    white-space: nowrap;
    text-decoration: none;
}

.tu-links a:hover {
    background: var(--tu-chip);
    color: var(--tu-secundario);
}

.tu-links a.destacado {
    color: var(--tu-primario);
    font-weight: 700;
}

/* Menú mobile */
.tu-mobile-cuenta {
    display: grid;
    gap: 4px;
    padding: 12px 16px;
    background: #fff;
    border-bottom: 1px solid var(--tu-borde);
}

.tu-mobile-cuenta a {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--tu-texto);
    font-weight: 600;
    font-size: .92rem;
    padding: 4px 0;
    text-decoration: none;
}

.tu-mobile-cuenta .tu-chip {
    width: 34px;
    height: 34px;
}

.tu-mobile-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px;
    background: #fff;
    border-bottom: 1px solid var(--tu-borde);
}

.tu-mobile-links a {
    padding: 6px 12px;
    border-radius: 16px;
    background: var(--tu-chip);
    color: var(--tu-secundario);
    font-size: .84rem;
    font-weight: 600;
    text-decoration: none;
}

/* ---------- Categorías en el celular (layouts/mobile/navbar-mobile-NUEVO) ----------
   Filas con divisores finos como el resto del menú; al abrir una categoría, sus grupos aparecen en una caja gris
   suave y las subcategorías cuelgan de una línea guía. Los paneles se despliegan con grid 0fr -> 1fr (sin max-height,
   así una lista larga nunca queda cortada). */
.tu-cats {
    background: #fff;
    padding: 4px 0 20px;
}

.tu-cats-titulo {
    margin: 0;
    padding: 14px 16px 2px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tu-muted);
}

.tu-cats-lista,
.tu-cat-grupos,
.tu-cat-items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tu-cat {
    margin: 0 16px;
}

.tu-cat + .tu-cat {
    border-top: 1px solid var(--tu-borde);
}

.tu-cat-fila,
.tu-cat-grupo-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    text-decoration: none;
    color: var(--tu-texto);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.tu-cat-fila {
    min-height: 52px;
    font-size: .95rem;
    font-weight: 600;
}

.tu-cat-fila:hover,
.tu-cat-fila:focus,
.tu-cat-fila[aria-expanded="true"] {
    color: var(--tu-secundario);
    text-decoration: none;
}

.tu-cat-fila:focus-visible,
.tu-cat-grupo-fila:focus-visible,
.tu-cat-todo:focus-visible,
.tu-cat-item:focus-visible {
    outline: 2px solid var(--tu-primario);
    outline-offset: 2px;
    border-radius: 6px;
}

.tu-cat-chevron {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--tu-muted);
    transition: transform .25s ease, background-color .2s, color .2s;
}

[aria-expanded="true"] > .tu-cat-chevron {
    transform: rotate(180deg);
    background: var(--tu-chip);
    color: var(--tu-secundario);
}

/* Panel desplegable: cerrado mide 0 y sus links no reciben foco */
.tu-cat-panel {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows .25s ease, visibility 0s .25s;
}

[aria-expanded="true"] + .tu-cat-panel {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows .25s ease;
}

.tu-cat-panel-interior {
    min-height: 0;
    overflow: hidden;
}

.tu-cat-caja {
    margin-bottom: 14px;
    padding: 4px 6px 6px;
    border-radius: var(--tu-radio);
    background: #f4f7f8;
}

.tu-cat-todo {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 8px;
    font-size: .86rem;
    font-weight: 700;
    color: var(--tu-primario);
    text-decoration: none;
}

.tu-cat-todo:hover {
    color: var(--tu-secundario);
    text-decoration: none;
}

.tu-cat-grupos > .tu-cat-grupo {
    border-top: 1px solid #e4eaec;
}

.tu-cat-grupo-fila {
    min-height: 46px;
    padding: 0 0 0 8px;
    font-size: .9rem;
    font-weight: 600;
}

.tu-cat-grupo-fila .tu-cat-chevron {
    width: 28px;
    height: 28px;
}

.tu-cat-grupo-fila[aria-expanded="true"] > .tu-cat-chevron {
    background: #fff;
}

/* Subcategorías: cuelgan de una línea guía a la altura del texto del grupo */
.tu-cat-items {
    margin-left: 12px;
}

.tu-cat-items > li:last-child {
    padding-bottom: 8px;
}

.tu-cat-item {
    display: block;
    padding: 9px 10px 9px 16px;
    border-left: 2px solid #dbe3e6;
    border-radius: 0 8px 8px 0;
    font-size: .88rem;
    line-height: 1.35;
    color: var(--tu-texto);
    text-decoration: none;
}

.tu-cat-item:hover,
.tu-cat-item:active {
    border-left-color: var(--tu-primario);
    background: #fff;
    color: var(--tu-secundario);
    text-decoration: none;
}

.tu-cat-item-todo {
    font-weight: 700;
    color: var(--tu-primario);
}

/* Grupo dentro de otro grupo (tercer nivel) */
.tu-cat-items .tu-cat-grupo {
    border-left: 2px solid #dbe3e6;
}

.tu-cat-items .tu-cat-grupo-fila {
    min-height: 40px;
    padding-left: 16px;
    font-size: .88rem;
}

@media (prefers-reduced-motion: reduce) {
    .tu-cat-panel,
    [aria-expanded="true"] + .tu-cat-panel,
    .tu-cat-chevron {
        transition: none;
    }
}

@media (max-width: 767.98px) {
    .tu-navbar .navbar-top {
        height: auto;
        padding: 10px 0;
    }

    .tu-navbar .navbar-top-content {
        gap: 10px;
    }

    .tu-navbar .navbar-actions {
        gap: 6px;
    }

    .tu-navbar .search-input-wrapper input {
        height: 40px;
        padding-left: 14px;
        font-size: .86rem;
    }

    .tu-navbar .search-input-wrapper .btn-search {
        height: 32px;
        width: 32px;
    }

    .tu-chip {
        width: 38px;
        height: 38px;
    }
}

/* ---------- Slider ---------- */
.slider-swiper-principal .swiper-slide {
    background: var(--tu-secundario) !important;
}

.slider-swiper-principal .swiper-slide img {
    object-fit: cover;
}

.slider-swiper-principal .swiper-pagination-bullet {
    background: #fff;
    opacity: .6;
    width: 8px;
    height: 8px;
}

.slider-swiper-principal .swiper-pagination-bullet-active {
    background: #fff !important;
    opacity: 1;
    width: 22px;
    border-radius: 4px;
}

/* ---------- Títulos de sección ---------- */
.tu-seccion {
    margin-top: 36px;
}

.tu-seccion-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.tu-seccion-titulo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

.tu-seccion-titulo .tu-chip {
    width: 42px;
    height: 42px;
    background: #fff;
    color: var(--tu-primario);
    box-shadow: 0 2px 6px #0000000d;
}

.tu-seccion-titulo h2 {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0;
    color: var(--tu-texto);
    letter-spacing: -.3px;
}

.tu-seccion-titulo h2 small {
    display: block;
    font-size: .82rem;
    font-weight: 500;
    color: var(--tu-muted);
    letter-spacing: 0;
    margin-top: 2px;
}

.tu-ver-todo {
    font-size: .88rem;
    font-weight: 600;
    color: var(--tu-primario);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.tu-ver-todo:hover {
    color: var(--tu-secundario);
    text-decoration: none;
}

.title-with-img .img {
    display: flex;
    align-items: center;
    justify-content: center;
}

.title-with-img h2 {
    color: var(--tu-texto);
    font-weight: 700;
}

/* ---------- Beneficios ---------- */
.tu-beneficios {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    background: #fff;
    border-radius: var(--tu-radio);
    box-shadow: 0 2px 4px #00000010;
    margin-top: 24px;
}

.tu-beneficio {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
}

.tu-beneficio+.tu-beneficio {
    border-left: 1px solid #f0f2f4;
}

.tu-beneficio .tu-chip {
    width: 44px;
    height: 44px;
}

.tu-beneficio>div>strong {
    display: block;
    font-size: .9rem;
    font-weight: 700;
    color: var(--tu-texto);
}

.tu-beneficio>div>span {
    display: block;
    font-size: .78rem;
    color: var(--tu-muted);
    line-height: 1.3;
}

@media (max-width: 991.98px) {
    .tu-beneficios {
        grid-template-columns: repeat(2, 1fr);
    }

    .tu-beneficio:nth-child(3) {
        border-left: 0;
    }

    .tu-beneficio:nth-child(n+3) {
        border-top: 1px solid #f0f2f4;
    }
}

@media (max-width: 575.98px) {
    .tu-beneficios {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .tu-beneficio {
        min-width: 78%;
        scroll-snap-align: start;
        padding: 14px 16px;
    }

    .tu-beneficio:nth-child(n+3) {
        border-top: 0;
    }

    .tu-beneficio:nth-child(3) {
        border-left: 1px solid #f0f2f4;
    }
}

/* ---------- Card de producto (partials/producto-tarjeta.blade.php) ----------
   Misma estética que la ficha: marca arriba del nombre, precio con centavos en superíndice y botón con borde.
   Los selectores llevan .product.pc para ganarle a las reglas viejas de custom.css sobre .product. */
.product.pc,
.layout-grid .product.pc,
.container-box .product.pc {
    --pc-tinta: #17262F;
    --pc-muted: #5B7280;
    --pc-linea: #DEE7E3;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: auto;
    padding: 0;
    grid-row-end: auto;
    border: 1px solid var(--pc-linea);
    border-radius: 12px;
    background: #fff;
    color: var(--pc-tinta);
    box-shadow: none;
    transition: box-shadow .25s cubic-bezier(.16, 1, .3, 1), transform .25s cubic-bezier(.16, 1, .3, 1), border-color .25s;
}

@media (hover: hover) {
    .product.pc:hover {
        border-color: #CFDCD7;
        box-shadow: 0 10px 24px rgb(23 38 47 / .08);
        transform: translateY(-2px);
    }

    .product.pc:hover .pc-media img {
        transform: scale(1.04);
    }
}

.product.pc .pc-link {
    display: flex;
    flex-direction: column;
    flex: 1;
    color: inherit;
    text-decoration: none;
}

.product.pc .pc-media {
    position: relative;
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    padding: 18px;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
}

.product.pc .pc-media img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    border-radius: 0;
    transition: transform .4s cubic-bezier(.16, 1, .3, 1);
}

.product.pc .pc-sin-imagen {
    display: grid;
    justify-items: center;
    gap: 6px;
    color: var(--pc-muted);
    font-size: 12.5px;
}

.product.pc .pc-sin-imagen[hidden] {
    display: none;
}

.product.pc .pc-sin-imagen i {
    font-size: 34px;
    color: #C9D5D9;
}

/* El precio va abajo, pegado al botón: si no hay promo ni aviso de stock no queda un hueco entre los dos */
.product.pc .pc-cuerpo {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 4px;
    padding: 14px 16px 14px;
    border-top: 1px solid #F0F4F2;
}

.product.pc .pc-marca {
    width: auto;
    max-height: none;
    margin: 0;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--pc-muted);
}

.product.pc .pc-nombre {
    margin: 0;
    font-size: 15px;
    line-height: 20px;
    font-weight: 600;
    color: var(--pc-tinta);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product.pc .pc-precios {
    display: flex;
    flex-direction: column;
    margin-top: auto;
    padding-top: 10px;
}

.product.pc .pc-lista {
    min-height: 17px;
    font-size: 13px;
    color: var(--pc-muted);
    font-variant-numeric: tabular-nums;
}

.product.pc .pc-lista del {
    text-decoration-thickness: 1px;
}

.product.pc .pc-precio {
    display: block;
    font-size: 23px;
    line-height: 28px;
    font-weight: 700;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
    color: var(--pc-tinta);
}

.product.pc .pc-precio sup {
    position: relative;
    top: -.6em;
    left: 1px;
    vertical-align: baseline;
    font-size: 52%;
}

.product.pc .pc-extras {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

.product.pc .pc-promo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 6px;
    background: #E4F2FA;
    color: var(--tu-secundario);
    font-size: 12px;
    font-weight: 700;
}

.product.pc .pc-promo i {
    font-size: 11px;
}

.product.pc .pc-pocas {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #B4453A;
}

.product.pc .pc-pocas::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.product.pc .pc-accion {
    padding: 0 16px 16px;
}

.product.pc .pc-btn {
    width: 100%;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--tu-primario);
    border-radius: 8px;
    background: #fff;
    color: var(--tu-secundario);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.product.pc .pc-btn i {
    font-size: 13px;
}

.product.pc .pc-btn:hover:not(:disabled) {
    background: var(--tu-primario);
    color: #fff;
}

.product.pc .pc-btn:disabled {
    border-color: var(--pc-linea);
    color: var(--pc-muted);
    background: #F4F7F6;
    cursor: not-allowed;
}

/* Bloqueado mientras se agrega al carrito (tienda-layout.js): no es "Sin stock", conserva su color */
.product.pc .pc-btn[data-agregando]:disabled {
    border-color: var(--tu-primario);
    color: var(--tu-secundario);
    background: #fff;
    opacity: .7;
    cursor: progress;
}

.product.pc .pc-cantidad .btn {
    font-size: .9rem;
    position: relative;
}

.product.pc .pc-fav {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--pc-linea);
    border-radius: 50%;
    background: #fff;
    color: var(--tu-secundario);
    font-size: 14px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .2s;
}

.product.pc:hover .pc-fav,
.product.pc .pc-fav:focus-visible,
.product.pc .pc-fav:has(.solid) {
    opacity: 1;
}

.product.pc .pc-fav i.solid {
    font-weight: 900;
    color: var(--tu-primario);
}

.product-tags .pc-tag-sin-stock {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 9px;
    border-radius: 6px;
    background: #EEF2F1;
    color: var(--pc-muted, #5B7280);
    font-size: 12.5px;
    font-weight: 700;
}

/* Encabezado del listado: "Philips · 76 resultados" */
.tu-listado-titulo {
    margin: 0;
    font-size: 26px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -.01em;
    color: #17262F;
    text-wrap: balance;
}

.tu-listado-titulo span {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0;
    color: #5B7280;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .tu-listado-titulo {
        font-size: 21px;
    }

    .tu-listado-titulo span {
        font-size: 13.5px;
    }
}

/* ---------- Filtros del listado (productos/partials/filtros*.blade.php) ----------
   Desplegables "Filtros" y "Ordenar" a la derecha del título; en celular, un botón que abre una hoja desde abajo. */
.tf-controles {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

.tf-filtro {
    position: relative;
}

.tf-boton {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid #DEE7E3;
    border-radius: 8px;
    background: #fff;
    color: #17262F;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: border-color .15s, background-color .15s;
}

.tf-boton::-webkit-details-marker,
.tf-seccion>summary::-webkit-details-marker {
    display: none;
}

.tf-boton:hover,
.tf-filtro[open]>.tf-boton {
    border-color: var(--tu-primario);
}

.tf-boton.is-activo {
    border-color: var(--tu-primario);
    background: #EEF7FC;
    color: var(--tu-secundario);
}

.tf-boton>.fa-sliders {
    font-size: 13px;
    color: var(--tu-secundario);
}

.tf-boton-etiqueta {
    font-weight: 500;
    color: #5B7280;
}

.tf-flecha {
    font-size: 11px;
    color: #5B7280;
    transition: transform .2s cubic-bezier(.16, 1, .3, 1);
}

.tf-filtro[open]>.tf-boton .tf-flecha,
.tf-seccion[open]>summary .tf-flecha {
    transform: rotate(180deg);
}

.tf-cuenta {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--tu-secundario);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
}

.tf-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    border: 1px solid #DEE7E3;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 14px 32px rgb(23 38 47 / .14);
}

.tf-panel-filtros {
    width: 330px;
    max-height: min(72vh, 560px);
}

.tf-panel-orden {
    width: 220px;
    padding: 6px;
}

.tf-panel-cabecera {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 6px;
}

.tf-panel-titulo {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: #17262F;
}

.tf-cerrar {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: #F1F5F3;
    color: #3E5560;
    font-size: 15px;
    cursor: pointer;
}

.tf-panel-cuerpo {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 8px;
}

.tf-panel-pie {
    flex-shrink: 0;
    padding: 10px 16px 12px;
    border-top: 1px solid #EEF2F0;
    text-align: right;
}

.tf-seccion+.tf-seccion {
    border-top: 1px solid #EEF2F0;
}

.tf-seccion>summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 8px;
    list-style: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    color: #17262F;
}

.tf-seccion>summary .tf-flecha {
    margin-left: auto;
}

.tf-seccion-valor {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--tu-secundario);
}

.tf-seccion[open] {
    padding-bottom: 8px;
}

.tf-buscar {
    width: calc(100% - 8px);
    height: 36px;
    margin: 0 4px 6px;
    padding: 0 12px;
    border: 1px solid #DEE7E3;
    border-radius: 8px;
    font-size: 14px;
    color: #17262F;
}

.tf-buscar:focus {
    outline: none;
    border-color: var(--tu-primario);
    box-shadow: 0 0 0 3px rgb(32 149 206 / .15);
}

.tf-opciones {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tf-opciones-largas {
    max-height: 248px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.tf-opciones li[hidden] {
    display: none;
}

.tf-opcion {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    color: #17262F;
    font-size: 14px;
    text-decoration: none !important;
}

.tf-opcion:hover {
    background: #F4F7F6;
    color: #17262F;
}

.tf-check,
.tf-radio {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    border: 1.5px solid #B5C4C9;
    background: #fff;
}

.tf-check {
    border-radius: 5px;
}

.tf-radio {
    border-radius: 50%;
}

.tf-opcion.is-activa .tf-check {
    border-color: var(--tu-primario);
    background: var(--tu-primario);
}

.tf-opcion.is-activa .tf-check::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 10px;
    color: #fff;
}

.tf-opcion.is-activa .tf-radio {
    border: 5px solid var(--tu-primario);
}

.tf-opcion.is-activa .tf-nombre {
    font-weight: 600;
}

.tf-nombre {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tf-total {
    flex-shrink: 0;
    color: #5B7280;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}

.tf-tilde {
    font-size: 12px;
    color: var(--tu-primario);
    visibility: hidden;
}

.tf-opcion-orden.is-activa {
    color: var(--tu-secundario);
}

.tf-opcion-orden.is-activa .tf-tilde {
    visibility: visible;
}

.tf-sin-resultados {
    margin: 8px 10px;
    color: #5B7280;
    font-size: 13px;
}

.tf-activos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 12px 0 0;
}

.tf-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: #E4F2FA;
    color: var(--tu-secundario);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background-color .15s;
}

.tf-chip:hover {
    background: #D3EAF6;
    color: var(--tu-secundario);
}

.tf-chip i {
    font-size: 12px;
}

.tf-limpiar {
    font-size: 13px;
    font-weight: 600;
    color: #5B7280;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.tf-limpiar:hover {
    color: #17262F;
}

/* Encabezado del listado en celular: título y botón "Filtrar" en la misma línea */
.tu-listado-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.tu-listado-cabecera .tu-listado-titulo {
    min-width: 0;
}

/* Celular: el panel sube desde abajo como hoja, con fondo oscuro que cierra al tocarlo */
@media (max-width: 768px) {
    .tf-boton {
        height: 38px;
        padding: 0 12px;
        font-size: 13.5px;
    }

    .tf-filtro[open]>.tf-boton::before {
        content: '';
        position: fixed;
        inset: 0;
        z-index: 1040;
        background: rgb(23 38 47 / .4);
        cursor: default;
    }

    .tf-panel,
    .tf-panel-filtros {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1041;
        width: auto;
        max-height: 80vh;
        border: 0;
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -10px 30px rgb(23 38 47 / .18);
        animation: tf-subir .28s cubic-bezier(.16, 1, .3, 1);
    }

    .tf-panel-cabecera {
        display: flex;
    }

    .tf-panel-cuerpo {
        padding: 0 12px;
    }

    .tf-panel-pie {
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
    }

    .tf-opcion {
        padding: 12px 10px;
        font-size: 15px;
    }

    /* Sin scroll propio: en la hoja se desplaza todo junto (antes la lista atrapaba el gesto con un scroll interno) */
    .tf-opciones-largas {
        max-height: none;
        overflow: visible;
    }

    .tf-bloqueado,
    .tf-bloqueado body {
        overflow: hidden;
    }

    .tf-buscar {
        height: 42px;
        font-size: 16px;
    }

    .tf-activos {
        margin: 0 0 12px;
    }
}

/* Hoja del celular en dos columnas: secciones a la izquierda y sus opciones a la derecha (cada columna con su scroll) */
.tf-columnas {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(120px, 30%) 1fr;
    border-top: 1px solid #EEF2F0;
}

.tf-pestanas {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    background: #F4F7F6;
}

.tf-pestana {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    width: 100%;
    padding: 14px;
    border: 0;
    border-bottom: 1px solid #E6ECE9;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.tf-pestana-nombre {
    font-size: 14px;
    font-weight: 600;
    color: #3E5560;
}

.tf-pestana-valor {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    color: #5B7280;
}

.tf-pestana-valor.is-elegido {
    color: var(--tu-secundario);
    font-weight: 600;
}

.tf-pestana.is-activa {
    background: #fff;
}

.tf-pestana.is-activa .tf-pestana-nombre {
    color: #17262F;
    font-weight: 700;
}

.tf-paneles {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px 10px 12px;
    background: #fff;
}

.tf-pane[hidden] {
    display: none;
}

.tf-pie-hoja {
    display: flex;
    gap: 10px;
    text-align: left;
}

.tf-btn {
    flex: 1;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none !important;
    cursor: pointer;
}

.tf-btn-secundario {
    flex: 0 0 auto;
    padding: 0 18px;
    border: 1px solid #DEE7E3;
    background: #fff;
    color: #17262F;
}

.tf-btn-secundario:hover {
    color: #17262F;
}

.tf-btn-primario {
    border: 0;
    background: var(--tu-primario);
    color: #fff;
}

.tf-btn-primario:hover {
    background: var(--tu-secundario);
    color: #fff;
}

/* Pie del desplegable de escritorio: "Limpiar filtros" a la izquierda y "Ver resultados" a la derecha */
.tf-pie-escritorio {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.tf-pie-escritorio .tf-btn {
    flex: 0 0 auto;
    height: 40px;
    margin-left: auto;
    padding: 0 18px;
    border-radius: 8px;
    font-size: 14px;
}

@media (max-width: 768px) {
    .tf-hoja {
        height: 80vh;
    }

    .tf-hoja .tf-opcion {
        padding: 12px 8px;
    }
}

@keyframes tf-subir {
    from {
        transform: translateY(24px);
        opacity: 0;
    }

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

@media (prefers-reduced-motion: reduce) {
    .tf-panel {
        animation: none;
    }
}

/* Celular: dos columnas parejas y sin botón (se agrega desde la ficha) */
.container-box {
    grid-auto-rows: auto;
}

.container-box>.title {
    grid-column: 1 / -1;
}

.product.pc.pc-compacta .pc-media {
    padding: 12px;
}

.product.pc.pc-compacta .pc-cuerpo {
    padding: 10px 10px 12px;
}

.product.pc.pc-compacta .pc-marca {
    font-size: 10.5px;
}

.product.pc.pc-compacta .pc-nombre {
    font-size: 13.5px;
    line-height: 18px;
}

.product.pc.pc-compacta .pc-precios {
    padding-top: 8px;
}

.product.pc.pc-compacta .pc-lista {
    min-height: 15px;
    font-size: 12px;
}

.product.pc.pc-compacta .pc-precio {
    font-size: 18px;
    line-height: 22px;
}

.product.pc.pc-compacta .pc-promo {
    padding: 3px 6px;
    font-size: 11px;
}

.product.pc.pc-compacta .pc-pocas {
    font-size: 11px;
}

.product.pc.pc-compacta .pc-fav {
    top: 6px;
    right: 6px;
    width: 32px;
    height: 32px;
    font-size: 13px;
    opacity: 1;
}

@media (max-width: 768px) {
    .product-tags .pc-tag-sin-stock {
        height: 21px;
        padding: 0 7px;
        font-size: 11px;
    }
}

/* Etiquetas de la card (descuento y envío gratis): apiladas arriba a la izquierda, misma forma y alto */
.product .product-tags {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    pointer-events: none;
}

.product-tags .discount,
.product-tags .prod-envio-gratis {
    position: static;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 24px;
    padding: 0 9px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.product-tags .discount {
    background: var(--tu-secundario);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -.01em;
    box-shadow: 0 2px 6px rgb(24 100 137 / .25);
}

.product-tags .discount span {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
}

.product-tags .prod-envio-gratis {
    background: #e8f6ef;
    color: #17794F;
    box-shadow: inset 0 0 0 1px #17794F26;
}

.product-tags .prod-envio-gratis i {
    font-size: 11px;
}

@media (max-width: 768px) {
    .product .product-tags {
        top: 8px;
        left: 8px;
        gap: 4px;
    }

    .product-tags .discount,
    .product-tags .prod-envio-gratis {
        height: 21px;
        padding: 0 7px;
        font-size: 11px;
    }

    .product-tags .discount {
        font-size: 12.5px;
    }

    .product-tags .discount span {
        font-size: 9.5px;
    }
}

@media (max-width: 575.98px) {

    /* En mobile las secciones de productos se deslizan horizontalmente */
    .tu-scroll {
        display: flex !important;
        overflow-x: auto;
        gap: 12px !important;
        scroll-snap-type: x mandatory;
        padding-bottom: 6px;
        scrollbar-width: none;
    }

    .tu-scroll>.product {
        min-width: 68%;
        scroll-snap-align: start;
    }
}

/* ---------- Publicidades ---------- */
.tu-promos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

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

.tu-promos a,
.tu-banner a {
    display: block;
    border-radius: var(--tu-radio);
    overflow: hidden;
    transition: transform .25s, box-shadow .25s;
}

.tu-promos a:hover,
.tu-banner a:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px #0000001a;
}

@media (max-width: 575.98px) {
    .tu-promos {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* ---------- Páginas institucionales ---------- */
.tu-pagina {
    background: #fff;
    border-radius: var(--tu-radio);
    padding: 32px 36px;
    margin: 28px auto 40px;
    max-width: 920px;
    box-shadow: 0 2px 4px #00000010;
}

.tu-pagina h1 {
    font-size: 1.7rem;
    font-weight: 700;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 3px solid var(--tu-acento);
    display: inline-block;
}

.tu-pagina-contenido {
    font-size: .96rem;
    line-height: 1.7;
    color: #3b4045;
}

.tu-pagina-contenido img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.tu-pagina-contenido h2,
.tu-pagina-contenido h3 {
    font-weight: 700;
    margin-top: 1.4em;
    font-size: 1.15rem;
}

@media (max-width: 575.98px) {
    .tu-pagina {
        padding: 22px 18px;
        margin-top: 16px;
    }
}

/* ---------- Footer ---------- */
footer.tu-footer {
    background: var(--tu-secundario);
    color: #d5e5ee;
    padding: 0;
    margin-top: 48px;
}

.tu-footer a {
    color: #d5e5ee;
}

.tu-footer a:hover {
    color: #fff;
    text-decoration: none;
}

.tu-footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 32px;
    padding: 44px 0 32px;
}

.tu-footer h5 {
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.tu-footer-links {
    display: grid;
    gap: 8px;
    font-size: .88rem;
}

.tu-footer-marca img {
    max-height: 46px;
    max-width: 170px;
    margin-bottom: 14px;
    filter: brightness(0) invert(1);
}

.tu-footer-marca p {
    font-size: .86rem;
    line-height: 1.55;
    color: #bcd3e0;
    max-width: 320px;
}

.tu-footer-contacto {
    display: grid;
    gap: 10px;
    font-size: .88rem;
}

.tu-footer-contacto a,
.tu-footer-contacto span {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.tu-redes {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.tu-redes a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #ffffff1a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: background .2s;
}

.tu-redes a:hover {
    background: var(--tu-acento);
}

.tu-footer-base {
    border-top: 1px solid #ffffff1f;
    padding: 18px 0 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    font-size: .78rem;
    color: #a9c4d3;
}

.tu-footer-base img {
    height: 44px;
    border-radius: 4px;
}

@media (max-width: 991.98px) {
    .tu-footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 575.98px) {
    .tu-footer-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        padding-top: 32px;
    }
}

/* El menú de categorías ocupa solo lo necesario y los accesos rápidos van a la derecha */
.tu-navbar-bottom>.menu-nav {
    width: auto !important;
    flex: 0 0 auto;
}

.tu-navbar-bottom>.tu-links {
    margin-left: auto;
    min-width: 0;
}

/* Menú de la cuenta */
.tu-accion:focus {
    outline: none;
}

.tu-accion:focus-visible .tu-chip {
    box-shadow: 0 0 0 3px #00b1f040;
}

.tu-accion-linea {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.tu-caret {
    transition: transform .2s;
}

.navbar-user-menu.show .tu-caret {
    transform: rotate(180deg);
}

.navbar-user-menu.show .tu-chip {
    background: var(--tu-primario);
    color: #fff;
}

.tu-navbar .navbar-user-menu .dropdown-menu {
    box-shadow: 0 12px 28px #0000001f;
}

.tu-menu-usuario {
    padding: 8px 12px 12px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--tu-borde);
    line-height: 1.3;
}

.tu-menu-usuario strong {
    display: block;
    font-size: .9rem;
    color: var(--tu-texto);
}

.tu-menu-usuario span {
    display: block;
    font-size: .76rem;
    color: var(--tu-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}

.tu-navbar .navbar-user-menu .dropdown-item .icono {
    color: var(--tu-muted);
}

.tu-navbar .navbar-user-menu .dropdown-item:hover .icono {
    color: var(--tu-secundario);
}

/* Header fijo arriba. El sticky va en #app (que solo contiene el header): dentro de un contenedor
   de su mismo alto el sticky no tiene recorrido y el navbar "salta" al empezar a scrollear. */
#app {
    position: sticky;
    top: 0;
    z-index: 1030;
}

.tu-navbar {
    position: relative;
    top: auto;
}

#mobileMenu {
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fff;
    box-shadow: 0 12px 24px #0000001a;
}

/* Animación de los desplegables: no toca "transform", que es lo que usa Popper para ubicarlos.
   La versión anterior (fadeInDown) lo pisaba y el menú aparecía arriba antes de acomodarse. */
@keyframes tu-aparecer {
    from {
        opacity: 0;
        translate: 0 -6px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

.dropdown-menu.show {
    animation: tu-aparecer .18s ease-out;
}

/* Menú de la cuenta: posición fija por CSS debajo del botón, alineado a la derecha */
.tu-navbar .navbar-user-menu .dropdown-menu {
    top: 100%;
    right: 0;
    left: auto;
    margin-top: 10px;
}

@media (prefers-reduced-motion: reduce) {
    .dropdown-menu.show {
        animation: none;
    }
}

/* Contenedor general en escritorio: mismo ancho que la ficha de producto (.pd-shell en producto-desktop.css).
   Bootstrap lo deja en 960/1140px; si se cambia acá, cambiarlo también en tienda-checkout.css. */
@media (min-width: 992px) {
    .container {
        max-width: 1280px;
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* Archivos para descargar en la descripción del producto */
.prod-adjuntos {
    margin-top: 18px;
}

.prod-adjuntos-titulo {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 10px;
    color: #17262F;
}

.prod-adjuntos ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.prod-adjuntos a {
    display: grid;
    grid-template-columns: 22px 1fr auto 18px;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid #DEE7E3;
    border-radius: 10px;
    background: #fff;
    color: #17262F;
    text-decoration: none;
    transition: border-color .15s ease;
}

.prod-adjuntos a:hover,
.prod-adjuntos a:focus-visible {
    border-color: var(--tu-primario, #2095CE);
    color: #17262F;
    text-decoration: none;
}

.prod-adjuntos a>.fas:first-child {
    color: var(--tu-primario, #2095CE);
    font-size: 18px;
}

.prod-adjunto-nombre {
    font-size: 14px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prod-adjunto-peso {
    font-size: 12px;
    color: #5B7280;
    white-space: nowrap;
}

.prod-adjunto-bajar {
    color: #5B7280;
}

@media (max-width: 575.98px) {
    .prod-adjuntos a {
        grid-template-columns: 22px 1fr 18px;
    }

    .prod-adjunto-peso {
        grid-column: 2;
        grid-row: 2;
    }

    .prod-adjunto-bajar {
        grid-column: 3;
        grid-row: 1 / span 2;
    }
}

/* Promo por cantidad en la ficha del producto ("Llevando X: Y% OFF") */
.prod-promo-cant {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0;
    padding: 10px 10px 10px 12px;
    border-radius: 12px;
    background: #eef8fd;
    transition: background-color .2s ease;
}

.prod-promo-cant.is-aplicada {
    background: #e8f6ef;
}

.prod-promo-cant-icono {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--tu-primario, #2095CE);
    color: #fff;
    font-size: 13px;
    transition: background-color .2s ease;
}

.prod-promo-cant.is-aplicada .prod-promo-cant-icono {
    background: #17794F;
}

.prod-promo-cant-cuerpo {
    flex: 1;
    min-width: 0;
}

.prod-promo-cant-titulo {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: #17262F;
}

.prod-promo-cant.is-aplicada .prod-promo-cant-titulo {
    color: #17794F;
}

.prod-promo-cant-estado {
    margin: 1px 0 0;
    font-size: 13px;
    line-height: 1.3;
    color: #5B7280;
    font-variant-numeric: tabular-nums;
}

.prod-promo-cant-estado:empty {
    display: none;
}

.prod-promo-cant-llevar {
    flex-shrink: 0;
    border: 1px solid var(--tu-primario, #2095CE);
    border-radius: 8px;
    padding: 6px 12px;
    background: #fff;
    color: var(--tu-primario, #2095CE);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}

.prod-promo-cant-llevar:hover,
.prod-promo-cant-llevar:focus-visible {
    background: var(--tu-primario, #2095CE);
    color: #fff;
}

.prod-promo-cant-llevar[hidden] {
    display: none;
}

.pd-total del {
    color: #5B7280;
    font-weight: 400;
}

/* Envío gratis en la ficha */
.prod-envio-ficha {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 3px 10px;
    border-radius: 999px;
    background: #e8f6ef;
    color: #17794F;
    font-size: 13px;
    font-weight: 700;
}

.pd-info-row.is-gratis .pd-info-icon,
.pm-info-row.is-gratis .pm-info-icon {
    color: #17794F;
}

.pd-info-row.is-gratis .pd-info-title,
.pm-info-row.is-gratis .pm-info-title {
    color: #17794F;
    font-weight: 700;
}

.pd-info-row.is-gratis,
.pm-info-row.is-gratis {
    background: #f3faf6;
}

/* Stock + envío gratis en la misma línea de la ficha */
.prod-stock-linea {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
}

.prod-stock-linea>p {
    margin: 0;
}

/* ---------- Pocas unidades (productos/partials/pocas-unidades) ----------
   Tarjeta cálida en lugar de la línea de stock: el título en el mismo rojo que el aviso del listado ("Últimas N
   unidades") y una barra casi vacía. Comparte la línea con "Envío gratis" cuando hay lugar. */
.pu {
    flex: 1 1 240px;
    margin-top: 6px;
    padding: 10px 12px 11px;
    border: 1px solid #F3D2CB;
    border-radius: 10px;
    background: #FFF5F2;
}

.pu-titulo {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #B4453A;
}

.pu-titulo i {
    color: #E0633F;
    animation: pu-latido 1.6s ease-in-out infinite;
}

@keyframes pu-latido {
    50% { transform: scale(1.18); }
}

.pu-barra {
    display: block;
    height: 6px;
    margin: 8px 0 6px;
    border-radius: 3px;
    background: #F3D2CB;
    overflow: hidden;
}

.pu-barra > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #E0633F, #B4453A);
}

.pu-texto {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.4;
    color: #7A4A43;
}

@media (prefers-reduced-motion: reduce) {
    .pu-titulo i { animation: none; }
}

/* ---------- Promociones vigentes (productos/partials/promociones-vigentes.blade.php) ----------
   Franja de tarjetas arriba del listado de /promociones; en celular se desliza de costado. */
.tp-franja {
    margin: 24px 0 8px;
}

.tp-franja-titulo {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 700;
    color: #17262F;
}

.tp-tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px;
}

.tp-tarjeta {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    border: 1px solid #DEE7E3;
    border-radius: 12px;
    background: #fff;
    color: #17262F;
    text-decoration: none !important;
}

.tp-tarjeta-link {
    transition: border-color .2s, box-shadow .25s cubic-bezier(.16, 1, .3, 1), transform .25s cubic-bezier(.16, 1, .3, 1);
}

.tp-tarjeta-link:hover {
    border-color: #CFDCD7;
    box-shadow: 0 10px 24px rgb(23 38 47 / .08);
    transform: translateY(-2px);
    color: #17262F;
}

.tp-icono {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #E4F2FA;
    color: var(--tu-secundario);
    font-size: 17px;
}

.tp-texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tp-valor {
    font-size: 21px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--tu-secundario);
}

.tp-titulo {
    font-size: 14px;
    font-weight: 600;
    color: #17262F;
}

.tp-detalle {
    font-size: 12.5px;
    color: #5B7280;
}

.tp-ir {
    position: absolute;
    top: 18px;
    right: 16px;
    font-size: 13px;
    color: var(--tu-primario);
    transition: transform .2s;
}

.tp-tarjeta-link:hover .tp-ir {
    transform: translateX(3px);
}

@media (max-width: 768px) {
    .tp-franja {
        margin: 16px 0 0;
    }

    .tp-franja-titulo {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .tp-tarjetas {
        display: flex;
        gap: 10px;
        margin: 0 -15px;
        padding: 0 15px 4px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 15px;
        scrollbar-width: none;
    }

    .tp-tarjetas::-webkit-scrollbar {
        display: none;
    }

    .tp-tarjeta {
        flex: 0 0 78%;
        scroll-snap-align: start;
        padding: 14px;
    }

    .tp-valor {
        font-size: 19px;
    }
}

/* ---------- Ofertas destacadas (productos/partials/promociones-destacadas.blade.php) ----------
   Card horizontal: la esquina de color se expande al pasar el mouse y cubre la card; el texto pasa a blanco.
   El texto cambia de color con retraso: al entrar, cuando el color ya lo cubre; al salir, recién cuando se retira. */
.tp-destacados {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 16px 0 4px;
}

.tp-destacado {
    --tp-curva: cubic-bezier(.16, 1, .3, 1);
    --tp-duracion: .95s;
    --tp-suave: cubic-bezier(.65, 0, .35, 1);
    --tp-texto-entra: .24s;
    --tp-texto-sale: .42s;
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 220px;
    padding: 22px;
    overflow: hidden;
    border: 1px solid #DEE7E3;
    border-radius: 16px;
    background: #fff;
    color: #17262F;
    text-decoration: none !important;
    transition: box-shadow .8s ease, border-color .6s ease;
}

.tp-destacado-fondo {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(135deg, var(--tu-secundario), #1F7FAE);
    /* En reposo, un cuarto de círculo en la esquina que no llega al texto (el texto termina 48px más arriba) */
    clip-path: circle(40px at 0 100%);
    transition: clip-path var(--tp-duracion) var(--tp-suave);
}

.tp-destacado-texto {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
    padding-bottom: 26px;
}

.tp-destacado-etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    padding: 4px 10px;
    border-radius: 6px;
    background: #E4F2FA;
    color: var(--tu-secundario);
    font-size: 13px;
    font-weight: 800;
    transition: background-color .45s ease var(--tp-texto-sale), color .45s ease var(--tp-texto-sale);
}

.tp-destacado-etiqueta i {
    font-size: 11px;
}

.tp-destacado-marca {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #5B7280;
    transition: color .45s ease var(--tp-texto-sale);
}

.tp-destacado-nombre {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
    color: #17262F;
    transition: color .45s ease var(--tp-texto-sale);
}

.tp-destacado-precios {
    display: flex;
    flex-direction: column;
    margin-top: 2px;
}

.tp-destacado-precios del {
    font-size: 13px;
    color: #5B7280;
    transition: color .45s ease var(--tp-texto-sale);
}

.tp-destacado-precio {
    font-size: 24px;
    line-height: 30px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #17262F;
    transition: color .45s ease var(--tp-texto-sale);
}

.tp-destacado-precio sup {
    position: relative;
    top: -.6em;
    left: 1px;
    vertical-align: baseline;
    font-size: 52%;
}

.tp-destacado-ver {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--tu-secundario);
    transition: color .45s ease var(--tp-texto-sale);
}

.tp-destacado-ver i {
    font-size: 12px;
    transition: transform .4s var(--tp-curva);
}

.tp-destacado-foto {
    flex-shrink: 0;
    width: 176px;
    height: 176px;
    display: grid;
    place-items: center;
    padding: 12px;
    border-radius: 12px;
    background: #fff;
    transition: box-shadow .8s ease, transform var(--tp-duracion) var(--tp-suave);
}

.tp-destacado-foto img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (hover: hover) {
    .tp-destacado:hover {
        border-color: transparent;
        box-shadow: 0 16px 36px rgb(24 100 137 / .22);
    }

    .tp-destacado:hover .tp-destacado-fondo {
        clip-path: circle(150% at 0 100%);
    }

    .tp-destacado:hover .tp-destacado-nombre,
    .tp-destacado:hover .tp-destacado-precio,
    .tp-destacado:hover .tp-destacado-ver {
        color: #fff;
    }

    .tp-destacado:hover .tp-destacado-marca,
    .tp-destacado:hover .tp-destacado-precios del {
        color: rgb(255 255 255 / .78);
    }

    .tp-destacado:hover .tp-destacado-etiqueta {
        background: #fff;
        color: var(--tu-secundario);
    }

    .tp-destacado:hover :is(.tp-destacado-etiqueta, .tp-destacado-marca, .tp-destacado-nombre, .tp-destacado-precios del, .tp-destacado-precio, .tp-destacado-ver) {
        transition-delay: var(--tp-texto-entra);
    }

    .tp-destacado:hover .tp-destacado-ver i {
        transform: translateX(4px);
    }

    .tp-destacado:hover .tp-destacado-foto {
        box-shadow: 0 10px 24px rgb(0 0 0 / .18);
        transform: scale(1.03);
    }
}

.tp-destacado:focus-visible {
    outline: 3px solid var(--tu-primario);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {

    .tp-destacado-fondo,
    .tp-destacado-foto,
    .tp-destacado-ver i {
        transition: none;
    }

    .tp-destacado {
        --tp-texto-entra: 0s;
        --tp-texto-sale: 0s;
    }
}

@media (max-width: 991.98px) {
    .tp-destacados {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 768px) {
    .tp-destacados {
        gap: 10px;
        margin-top: 14px;
    }

    .tp-destacado {
        min-height: 0;
        gap: 12px;
        padding: 14px;
        border-radius: 14px;
    }

    .tp-destacado-fondo {
        clip-path: circle(28px at 0 100%);
    }

    .tp-destacado-texto {
        padding-bottom: 20px;
    }

    .tp-destacado-nombre {
        font-size: 15px;
        line-height: 20px;
    }

    .tp-destacado-precio {
        font-size: 20px;
        line-height: 26px;
    }

    .tp-destacado-foto {
        width: 112px;
        height: 112px;
        padding: 8px;
    }
}

/* ---------- Combos de la ficha (productos/partials/combos-del-producto.blade.php) ----------
   "Comprados juntos": los productos del combo en fila (A + B) y al costado el resumen con precio y ahorro.
   Misma superficie que las cards de la ficha (blanco, borde suave, radio 12). */
.cb-seccion {
    padding: 22px 24px;
    border: 1px solid #DEE7E3;
    border-radius: 12px;
    background: #fff;
}

.cb-titulo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 700;
    color: #17262F;
}

.cb-titulo i {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #E4F2FA;
    color: var(--tu-secundario);
    font-size: 15px;
}

.cb-combo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    align-items: center;
    gap: 24px;
}

.cb-combo+.cb-combo {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #EEF2F0;
}

.cb-items {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cb-item {
    flex: 1 1 0;
    min-width: 0;
    max-width: 200px;
}

.cb-item-link {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #17262F;
    text-decoration: none !important;
}

.cb-item-foto {
    position: relative;
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    margin-bottom: 4px;
    padding: 12px;
    border: 1px solid #DEE7E3;
    border-radius: 12px;
    background: #fff;
    color: #C9D5D9;
    font-size: 28px;
    transition: border-color .2s, box-shadow .25s;
}

.cb-item-foto img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

a.cb-item-link:hover .cb-item-foto {
    border-color: #CFDCD7;
    box-shadow: 0 8px 18px rgb(23 38 47 / .08);
}

.cb-item.is-este .cb-item-foto {
    border: 2px solid var(--tu-primario);
}

.cb-item-cantidad {
    position: absolute;
    right: 8px;
    bottom: 8px;
    padding: 2px 7px;
    border-radius: 6px;
    background: #17262F;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.cb-item-este {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 2px 8px;
    border-radius: 6px;
    background: #E4F2FA;
    color: var(--tu-secundario);
    font-size: 11.5px;
    font-weight: 700;
}

.cb-item-nombre {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
    line-height: 18px;
    font-weight: 600;
}

.cb-item-precio {
    font-size: 13px;
    color: #5B7280;
    font-variant-numeric: tabular-nums;
}

.cb-mas {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    margin-top: 52px;
    border-radius: 50%;
    background: #F1F5F3;
    color: #5B7280;
    font-size: 12px;
}

.cb-resumen {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px;
    border-radius: 12px;
    background: #F4F7F6;
}

.cb-resumen p {
    margin: 0;
}

.cb-resumen-nombre {
    font-size: 14px;
    font-weight: 700;
    color: #17262F;
}

.cb-separado {
    margin-top: 6px !important;
    font-size: 13px;
    color: #5B7280;
}

.cb-separado del {
    font-variant-numeric: tabular-nums;
}

.cb-precio {
    font-size: 26px;
    line-height: 32px;
    font-weight: 800;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
    color: #17262F;
}

.cb-precio sup {
    position: relative;
    top: -.6em;
    left: 1px;
    vertical-align: baseline;
    font-size: 52%;
}

.cb-ahorro {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    background: #E8F6EF;
    color: #17794F;
    font-size: 13px;
    font-weight: 700;
}

.cb-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    margin-top: 10px;
    border: 1px solid var(--tu-primario);
    border-radius: 8px;
    background: #fff;
    color: var(--tu-secundario);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
    transition: background-color .15s, color .15s;
}

.cb-boton i {
    font-size: 12px;
    transition: transform .2s;
}

.cb-boton:hover {
    background: var(--tu-primario);
    color: #fff;
}

.cb-boton:hover i {
    transform: translateX(3px);
}

/* En la ficha de celular va entre el bloque de compra y la descripción */
.pm-page .cb-seccion {
    margin: 0 16px 16px;
}

@media (max-width: 991.98px) {
    .cb-combo {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .cb-seccion {
        padding: 16px;
    }

    .cb-titulo {
        font-size: 16px;
        margin-bottom: 14px;
    }

    .cb-titulo i {
        width: 30px;
        height: 30px;
        font-size: 13px;
    }

    .cb-items {
        gap: 6px;
    }

    .cb-item-foto {
        padding: 8px;
    }

    .cb-item-nombre,
    .cb-item-precio {
        font-size: 12px;
        line-height: 16px;
    }

    .cb-mas {
        width: 22px;
        height: 22px;
        margin-top: 36px;
        font-size: 10px;
    }

    .cb-resumen {
        padding: 14px;
    }

    .cb-precio {
        font-size: 22px;
        line-height: 28px;
    }
}

/* ---------- Ruta de navegación (partials/migas.blade.php) ----------
   "Inicio › Categoría › Subcategoría": gris de textos secundarios, el último nivel más oscuro y los nombres
   largos cortados con "…" (el nombre completo queda en el title). En celular, solo "‹ anterior". */
.rn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
}

.rn-nav {
    min-width: 0;
}

.rn-lista {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    line-height: 20px;
}

.rn-item {
    display: flex;
    align-items: center;
    min-width: 0;
    flex-shrink: 1;
}

.rn-item:first-child {
    flex-shrink: 0;
}

.rn-item+.rn-item::before {
    content: '\f054';
    flex-shrink: 0;
    margin: 0 9px;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 9px;
    color: #A9BAC1;
}

.rn-item a,
.rn-item span {
    max-width: 340px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rn-item a {
    color: #5B7280;
    text-decoration: none;
    transition: color .15s;
}

.rn-item a:hover {
    color: var(--tu-secundario);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.rn-item span[aria-current] {
    color: #17262F;
    font-weight: 600;
}

/* En la ficha el último nivel también es link: se marca como el más cercano */
.rn-item:last-child a {
    color: #17262F;
    font-weight: 600;
}

.rn-compartir {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid #DEE7E3;
    border-radius: 8px;
    background: #fff;
    color: var(--tu-secundario);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s;
}

.rn-compartir:hover {
    border-color: var(--tu-primario);
}

.rn-compartir i {
    font-size: 13px;
}

.rn-volver {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    overflow: hidden;
    color: var(--tu-secundario);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-decoration: none !important;
}

.rn-volver i {
    font-size: 12px;
}

/* Listado de categoría: la ruta va arriba del título */
.tu-listado-migas {
    padding-top: 18px;
}

@media (max-width: 768px) {
    .tu-listado-migas {
        padding-top: 14px;
    }

    .rn-compartir span {
        display: none;
    }
}
/* ---------- Paginación del listado (solo sin JavaScript; para buscadores) ---------- */
.tu-paginacion {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 24px 15px 8px;
}

.tu-paginacion[hidden] {
    display: none;
}

.tu-paginacion-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border: 1px solid #DEE7E3;
    border-radius: 8px;
    background: #fff;
    color: var(--tu-secundario);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
}

.tu-paginacion-link:hover {
    border-color: var(--tu-primario);
}

.tu-paginacion-actual {
    font-size: 14px;
    color: #5B7280;
}

/* ---------- Producto no disponible (productos/no-disponible.blade.php) ---------- */
.nd-aviso {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 28px 0 8px;
    padding: 22px 24px;
    border: 1px solid #DEE7E3;
    border-radius: 12px;
    background: #fff;
}

.nd-icono {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #E4F2FA;
    color: var(--tu-secundario);
    font-size: 22px;
}

.nd-texto {
    flex: 1;
    min-width: 0;
}

.nd-titulo {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #17262F;
}

.nd-nombre {
    margin: 4px 0 0;
    font-size: 14px;
    font-weight: 600;
    color: #3E5560;
}

.nd-detalle {
    margin: 2px 0 0;
    font-size: 13.5px;
    color: #5B7280;
}

.nd-boton {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 18px;
    border-radius: 8px;
    background: var(--tu-primario);
    color: #fff !important;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
}

.nd-boton:hover {
    background: var(--tu-secundario);
}

.nd-subtitulo {
    margin: 26px 0 4px;
    font-size: 18px;
    font-weight: 700;
    color: #17262F;
}

@media (max-width: 768px) {
    .nd-aviso {
        flex-direction: column;
        align-items: flex-start;
        padding: 18px;
    }

    .nd-boton {
        width: 100%;
        justify-content: center;
    }
}

/* ---------- Sin resultados (productos/partials/sin-resultados.blade.php) ----------
   Va dentro de la grilla del listado: los bloques ocupan todo el ancho y las cards sugeridas siguen la grilla. */
.sr,
.sr-subtitulo {
    grid-column: 1 / -1;
}

.sr {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 24px;
    border: 1px solid #DEE7E3;
    border-radius: 12px;
    background: #fff;
}

.sr-cabecera {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.sr-icono {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #E4F2FA;
    color: var(--tu-secundario);
    font-size: 19px;
}

.sr-titulo {
    margin: 0;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
    color: #17262F;
    overflow-wrap: anywhere;
}

.sr-texto {
    margin: 4px 0 0;
    font-size: 14px;
    color: #5B7280;
}

.sr-quisiste {
    margin: 0;
    padding: 12px 16px;
    border-radius: 10px;
    background: #EEF7FC;
    font-size: 16px;
    color: #17262F;
}

.sr-quisiste a {
    font-weight: 700;
    color: var(--tu-secundario);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sr-quisiste span {
    margin-left: 6px;
    font-size: 13px;
    color: #5B7280;
}

.sr-grupo-titulo {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 700;
    color: #3E5560;
}

.sr-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sr-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid #DEE7E3;
    border-radius: 999px;
    background: #fff;
    color: #17262F;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    transition: border-color .15s, background-color .15s;
}

.sr-chip:hover {
    border-color: var(--tu-primario);
    color: var(--tu-secundario);
}

.sr-chip span {
    font-size: 12px;
    font-weight: 600;
    color: #5B7280;
}

.sr-chip-destacado {
    border-color: var(--tu-primario);
    background: #EEF7FC;
    color: var(--tu-secundario);
}

.sr-ayuda {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 10px;
    background: #F4F7F6;
}

.sr-ayuda p {
    margin: 0;
}

.sr-ayuda-titulo {
    font-size: 14px;
    font-weight: 700;
    color: #17262F;
}

.sr-ayuda-texto {
    font-size: 13px;
    color: #5B7280;
}

.sr-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border-radius: 8px;
    background: #17794F;
    color: #fff !important;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
}

.sr-whatsapp:hover {
    background: #12633F;
}

.sr-whatsapp i {
    font-size: 17px;
}

.sr-subtitulo {
    margin: 16px 0 0;
    font-size: 18px;
    font-weight: 700;
    color: #17262F;
}

@media (max-width: 768px) {
    .sr {
        padding: 18px;
        gap: 16px;
    }

    .sr-titulo {
        font-size: 18px;
    }

    .sr-whatsapp {
        width: 100%;
        justify-content: center;
    }

    .sr-subtitulo {
        font-size: 16px;
    }
}

/* ---------- Páginas de error (errors/tienda.blade.php: 403, 404, 419, 429) ----------
   Mismo lenguaje que "sin resultados" y "producto no disponible": panel blanco, ícono en celda celeste, acciones.
   Los chips y la ayuda por WhatsApp reusan las clases sr-. Los 5xx (errors/minimo) copian estos valores inline. */
.er {
    max-width: 760px;
    margin: 40px auto 8px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 28px;
    border: 1px solid #DEE7E3;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 30px -18px #17262f40;
}

.er-cabecera {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.er-icono {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #E4F2FA;
    color: var(--tu-secundario);
    font-size: 23px;
}

.er-titulo {
    margin: 2px 0 0;
    font-size: 24px;
    line-height: 1.25;
    font-weight: 700;
    color: #17262F;
    text-wrap: balance;
}

.er-texto {
    margin: 6px 0 0;
    max-width: 58ch;
    font-size: 15px;
    line-height: 1.55;
    color: #5B7280;
}

.er-buscador {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 50px;
    padding: 0 6px 0 16px;
    border: 1px solid #DEE7E3;
    border-radius: 10px;
    background: #F8FAF9;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}

.er-buscador:focus-within {
    border-color: var(--tu-primario);
    background: #fff;
    box-shadow: 0 0 0 3px #2095ce26;
}

.er-buscador > i {
    color: #7A8C96;
    font-size: 15px;
}

.er-buscador input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 15px;
    color: #17262F;
}

.er-buscador input::placeholder {
    color: #6B7F89;
}

.er-buscador button {
    height: 38px;
    padding: 0 16px;
    border: 0;
    border-radius: 8px;
    background: var(--tu-primario);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s;
}

.er-buscador button:hover {
    background: var(--tu-secundario);
}

.er-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.er-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 20px;
    border: 1px solid var(--tu-primario);
    border-radius: 8px;
    background: var(--tu-primario);
    color: #fff !important;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
    transition: background-color .15s, border-color .15s, color .15s;
}

.er-boton:hover {
    background: var(--tu-secundario);
    border-color: var(--tu-secundario);
}

.er-boton-secundario {
    background: #fff;
    border-color: #DEE7E3;
    color: #17262F !important;
}

.er-boton-secundario:hover {
    background: #F4F7F6;
    border-color: var(--tu-primario);
    color: var(--tu-secundario) !important;
}

.er-boton:focus-visible,
.er-buscador button:focus-visible {
    outline: 3px solid #9BD3F0;
    outline-offset: 2px;
}

.er-codigo {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: #7A8C96;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.er-subtitulo {
    margin: 32px 0 4px;
    font-size: 18px;
    font-weight: 700;
    color: #17262F;
}

@media (max-width: 768px) {
    .er {
        margin-top: 20px;
        padding: 20px;
    }

    .er-cabecera {
        flex-direction: column;
        gap: 14px;
    }

    .er-titulo {
        font-size: 21px;
    }

    .er-boton {
        width: 100%;
    }

    .er-subtitulo {
        font-size: 16px;
    }
}

/* ---------- Ingreso y registro (auth/base.blade.php, login, register) ----------
   Tarjeta de dos columnas: formulario con pestañas y, al costado, lo que se gana con la cuenta (color del footer). */
.au {
    max-width: 980px;
    margin: 40px auto 24px;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    border: 1px solid #DEE7E3;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 30px -18px #17262f40;
}

.au-principal {
    padding: 32px 44px 28px;
}

.au-pestanas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    margin-bottom: 28px;
    border-radius: 10px;
    background: #F1F5F3;
}

.au-pestana {
    display: grid;
    place-items: center;
    height: 40px;
    border-radius: 8px;
    color: #5B7280 !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background-color .15s, color .15s, box-shadow .15s;
}

.au-pestana:hover {
    color: #17262F !important;
}

.au-pestana[aria-current="page"] {
    background: #fff;
    color: #17262F !important;
    font-weight: 700;
    box-shadow: 0 1px 2px #17262f1f, 0 2px 8px -2px #17262f14;
}

.au-titulo {
    margin: 0;
    font-size: 24px;
    line-height: 1.25;
    font-weight: 700;
    color: #17262F;
}

.au-texto {
    margin: 4px 0 22px;
    font-size: 14.5px;
    color: #5B7280;
}

.au-aviso {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -6px 0 18px;
    padding: 10px 14px;
    border-radius: 8px;
    background: #E8F5EE;
    color: #17633F;
    font-size: 14px;
    font-weight: 600;
}

.au-form .au-campo {
    margin-bottom: 16px;
}

.au-campo label,
.au-etiqueta label {
    display: block;
    margin: 0 0 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: #3E5560;
}

.au-opcional {
    margin-left: 4px;
    font-weight: 500;
    color: #7A8C96;
}

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

.au-etiqueta a,
.au-alternativa a,
.au-ayuda a {
    color: var(--tu-secundario) !important;
    font-weight: 700;
    text-decoration: underline !important;
    text-decoration-color: #18648959 !important;
    text-underline-offset: 3px;
}

.au-etiqueta a {
    font-size: 13px;
    font-weight: 600;
}

.au-etiqueta a:hover,
.au-alternativa a:hover,
.au-ayuda a:hover {
    text-decoration-color: currentColor !important;
}

.au-campo input {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    border: 1px solid #D5DFDB;
    border-radius: 8px;
    background: #fff;
    font-size: 15px;
    color: #17262F;
    transition: border-color .15s, box-shadow .15s;
}

.au-campo input:hover {
    border-color: #B9C8C2;
}

.au-campo input:focus {
    outline: 0;
    border-color: var(--tu-primario);
    box-shadow: 0 0 0 3px #2095ce26;
}

.au-campo input.is-invalid {
    border-color: #D14343;
}

.au-campo input.is-invalid:focus {
    box-shadow: 0 0 0 3px #d1434326;
}

.au-clave {
    position: relative;
}

.au-clave input {
    padding-right: 48px;
}

.au-ver {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #6B7F89;
    font-size: 15px;
    cursor: pointer;
}

.au-ver:hover {
    color: var(--tu-secundario);
    background: #F1F5F3;
}

.au-error {
    margin: 6px 0 0;
    font-size: 13px;
    font-weight: 500;
    color: #B42318;
}

.au-fila {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.au-fila .au-campo {
    margin-bottom: 0 !important;
}

.au-pista,
.au-error-fila {
    margin: 6px 0 18px;
    font-size: 13px;
}

.au-pista {
    color: #6B7F89;
}

.au-recordar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 20px;
    font-size: 14px;
    color: #3E5560;
    cursor: pointer;
}

.au-recordar input {
    width: 18px;
    height: 18px;
    accent-color: var(--tu-primario);
    cursor: pointer;
}

.au-enviar {
    width: 100%;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-radius: 8px;
    background: var(--tu-primario);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s;
}

.au-enviar:hover {
    background: var(--tu-secundario);
}

.au-enviar:disabled {
    background: var(--tu-secundario);
    cursor: progress;
}

.au-enviar:focus-visible,
.au-ver:focus-visible,
.au-pestana:focus-visible {
    outline: 3px solid #9BD3F0;
    outline-offset: 2px;
}

.au-alternativa {
    margin: 18px 0 0;
    text-align: center;
    font-size: 14px;
    color: #5B7280;
}

.au-ayuda {
    margin: 24px 0 0;
    padding-top: 18px;
    border-top: 1px solid #EDF1EE;
    text-align: center;
    font-size: 13px;
    color: #6B7F89;
}

.au-ayuda a {
    font-weight: 600;
}

.au-lateral {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 44px 36px;
    background: var(--tu-secundario);
    color: #fff;
}

.au-lateral-titulo {
    margin: 0 0 24px;
    font-size: 19px;
    line-height: 1.3;
    font-weight: 700;
    text-wrap: balance;
}

.au-beneficios {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.au-beneficios li {
    display: flex;
    gap: 14px;
    font-size: 14px;
    line-height: 1.5;
    color: #CFE6F2;
}

.au-beneficios b {
    color: #fff;
    font-weight: 700;
}

.au-beneficios i {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #ffffff1f;
    color: #fff;
    font-size: 15px;
}

@media (max-width: 860px) {
    .au {
        grid-template-columns: 1fr;
        margin-top: 20px;
    }

    .au-principal {
        padding: 20px 18px 22px;
    }

    .au-pestanas {
        margin-bottom: 22px;
    }

    .au-titulo {
        font-size: 21px;
    }

    /* 16px evita que el iPhone haga zoom al tocar el campo */
    .au-campo input {
        font-size: 16px;
    }

    .au-lateral {
        padding: 24px 18px;
    }

    .au-lateral-titulo {
        margin-bottom: 16px;
        font-size: 16px;
    }

    .au-beneficios {
        gap: 14px;
    }
}

@media (max-width: 420px) {
    .au-fila {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* ---------- Cotizador de envío (partials/cotizador-envio.blade.php) ----------
   No tiene caja propia: en la ficha es una fila más de la lista de info (hereda pd-/pm-info-row) y en el carrito es la
   línea "Envío" del resumen (hereda tc-row). Acá solo va lo que esas filas no traen. */

/* Ficha: el contenedor es la fila (separador y fondo verde de "gratis"); el botón interno, su contenido */
.ce.pd-info-row,
.ce.pm-info-row {
    display: block;
    min-height: 0;
    padding: 0;
}

.ce-ficha .ce-fila {
    cursor: pointer;
}

.ce-ficha .ce-fila:hover {
    background: #F7FAF8;
}

.ce-ficha.is-gratis .ce-fila:hover {
    background: transparent;
}

.ce-ficha .ce-fila:focus-visible {
    outline: 2px solid #9BD3F0;
    outline-offset: -2px;
}

.ce-chevron {
    transition: transform .2s ease;
}

.ce.is-abierto .ce-chevron {
    transform: rotate(180deg);
}

.ce-monto {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ce-ficha.is-sin-envio .ce-icono {
    color: #93A6AE;
}

/* Carrito: monto a la derecha de "Envío" y el detalle debajo, más chico */
.ce-resumen .ce-fila {
    align-items: baseline;
}

/* El monto se lee igual que el de "Productos": mismo tamaño y peso ("desde" va en la etiqueta de la izquierda) */
.ce-resumen .ce-monto {
    font-weight: inherit;
    text-align: right;
}

.ce-gratis {
    color: var(--tc-success, #17794F);
    font-weight: 700;
}

.ce-gratis i {
    margin-right: 3px;
    font-size: .9em;
}

.ce-detalle {
    margin: -3px 0 6px;
    font-size: .75rem;
    line-height: 1.4;
    color: var(--tc-muted, #6B7F89);
}

.ce-detalle .ce-link {
    font-weight: 500;
}

/* "Calcular" y "Cambiar": links como los del sitio */
.ce-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--tu-secundario);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: #18648959;
    text-underline-offset: 3px;
    cursor: pointer;
}

.ce-link:hover {
    text-decoration-color: currentColor;
}

.ce-link:focus-visible {
    outline: 2px solid #9BD3F0;
    outline-offset: 2px;
    border-radius: 3px;
}

/* Formulario del código postal: se despliega dentro de la fila */
.ce-form {
    padding: 0 12px 14px 44px;
}

.ce-resumen .ce-form {
    padding: 2px 0 10px;
}

.ce-linea {
    display: flex;
    gap: 8px;
}

.ce-linea input,
.ce-provincia select {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #D5DFDB;
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
    color: #17262F;
    transition: border-color .15s, box-shadow .15s;
}

.ce-linea input {
    flex: 1;
    min-width: 0;
    font-variant-numeric: tabular-nums;
}

.ce-linea input:focus,
.ce-provincia select:focus {
    outline: 0;
    border-color: var(--tu-primario);
    box-shadow: 0 0 0 3px #2095ce26;
}

.ce-calcular {
    flex-shrink: 0;
    height: 40px;
    padding: 0 18px;
    border: 0;
    border-radius: 8px;
    background: var(--tu-primario);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s;
}

.ce-calcular:hover {
    background: var(--tu-secundario);
}

.ce-calcular:disabled {
    opacity: .7;
    cursor: progress;
}

.ce-calcular:focus-visible {
    outline: 3px solid #9BD3F0;
    outline-offset: 2px;
}

.ce-provincia {
    margin-top: 10px;
}

.ce-provincia label {
    display: block;
    margin: 0 0 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: #3E5560;
}

.ce-error {
    margin: 8px 0 0;
    font-size: 12.5px;
    color: #B42318;
}

.ce-no-se {
    display: inline-block;
    margin-top: 8px;
    font-size: 12px;
    color: #6B7F89 !important;
    text-decoration: underline !important;
    text-decoration-color: #6b7f8966 !important;
    text-underline-offset: 3px;
}

.ce-no-se:hover {
    color: var(--tu-secundario) !important;
}

/* Cargando: líneas de esqueleto con un brillo que las recorre y el camión andando sobre una ruta punteada */
.ce-esqueleto {
    display: block;
    height: 11px;
    border-radius: 6px;
    background: linear-gradient(90deg, #E7EEF1 0%, #E7EEF1 35%, #F6FAFB 50%, #E7EEF1 65%, #E7EEF1 100%);
    background-size: 300% 100%;
    animation: ce-brillo 1.3s cubic-bezier(.4, 0, .2, 1) infinite;
}

.ce-esqueleto-titulo {
    width: 60%;
    max-width: 200px;
    margin: 4px 0 6px;
}

.ce-esqueleto-sub {
    width: 85%;
    max-width: 260px;
    height: 9px;
    margin-bottom: 3px;
    animation-delay: .12s;
}

.ce-esqueleto-monto {
    display: inline-block;
    width: 84px;
    height: 12px;
    vertical-align: middle;
}

@keyframes ce-brillo {
    from {
        background-position: 100% 0;
    }

    to {
        background-position: 0 0;
    }
}

.ce-ficha.is-cargando .ce-icono {
    position: relative;
    animation: ce-camion .7s ease-in-out infinite alternate;
}

.ce-ficha.is-cargando .ce-icono::after {
    content: '';
    position: absolute;
    left: -2px;
    right: -2px;
    bottom: -5px;
    height: 2px;
    border-radius: 2px;
    background: repeating-linear-gradient(90deg, #9FC3D4 0 5px, transparent 5px 9px);
    background-size: 18px 2px;
    animation: ce-ruta .45s linear infinite;
}

@keyframes ce-camion {
    from {
        transform: translate(-1px, 0);
    }

    to {
        transform: translate(1px, -1.5px);
    }
}

@keyframes ce-ruta {
    from {
        background-position: 0 0;
    }

    to {
        background-position: -18px 0;
    }
}

.ce.is-cargando .ce-link {
    opacity: .5;
    pointer-events: none;
}

/* El resultado entra con un fundido corto */
.ce-ficha.is-listo .pd-info-body,
.ce-ficha.is-listo .pm-info-body,
.ce-resumen.is-listo .ce-monto,
.ce-resumen.is-listo .ce-detalle {
    animation: ce-entrada .35s cubic-bezier(.16, 1, .3, 1);
}

@keyframes ce-entrada {
    from {
        opacity: 0;
        transform: translateY(3px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ce-esqueleto,
    .ce-ficha.is-cargando .ce-icono,
    .ce-ficha.is-cargando .ce-icono::after,
    .ce-ficha.is-listo .pd-info-body,
    .ce-ficha.is-listo .pm-info-body,
    .ce-resumen.is-listo .ce-monto,
    .ce-resumen.is-listo .ce-detalle {
        animation: none;
    }
}

@media (max-width: 768px) {
    .ce-form {
        padding-left: 12px;
    }

    /* 16px evita que el iPhone haga zoom al tocar el campo */
    .ce-linea input,
    .ce-provincia select {
        font-size: 16px;
    }
}

/* ---------- Combo: qué incluye (productos/partials/combo-incluye.blade.php) ----------
   Mismo lenguaje que la lista de info de la ficha: caja con borde, filas separadas, miniatura y cantidad. */
.ci {
    border: 1px solid #DEE7E3;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}

/* Celular: separado de la línea de stock y de la lista de info */
.prod-stock-linea + .ci {
    margin-top: 12px;
}

.ci + .pm-info {
    margin-top: 16px;
}

.ci-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    background: #F7FAF8;
    border-bottom: 1px solid #EDF1EE;
}

.ci-titulo {
    margin: 0;
    font-size: 13.5px;
    font-weight: 700;
    color: #17262F;
}

.ci-ahorro {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: #E8F5EE;
    color: #17633F;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.ci-lista {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ci-lista li + li {
    border-top: 1px solid #EDF1EE;
}

.ci-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    color: inherit !important;
    text-decoration: none !important;
    transition: background-color .15s;
}

.ci-item:hover {
    background: #F7FAF8;
}

.ci-item:focus-visible {
    outline: 2px solid #9BD3F0;
    outline-offset: -2px;
}

.ci-foto {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid #EDF1EE;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.ci-foto img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ci-texto {
    flex: 1;
    min-width: 0;
}

.ci-nombre {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 13.5px;
    line-height: 18px;
    font-weight: 500;
    color: #17262F;
}

.ci-item:hover .ci-nombre {
    color: var(--tu-secundario);
}

.ci-precio {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: #6B7F89;
    font-variant-numeric: tabular-nums;
}

.ci-cantidad {
    flex-shrink: 0;
    min-width: 34px;
    height: 24px;
    display: grid;
    place-items: center;
    padding: 0 8px;
    border-radius: 999px;
    background: #EEF7FC;
    color: var(--tu-secundario);
    font-size: 12.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ---------- Medios de pago de la ficha (productos/partials/medios-pago.blade.php) ----------
   Diálogo nativo: centrado en computadora, hoja desde abajo en el celular. */
.mp {
    width: min(460px, calc(100% - 32px));
    max-height: calc(100dvh - 48px);
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: #fff;
    color: #17262F;
    box-shadow: 0 24px 60px -20px #17262f59;
}

.mp::backdrop {
    background: #17262f73;
}

.mp[open] {
    animation: mp-entrada .25s cubic-bezier(.16, 1, .3, 1);
}

@keyframes mp-entrada {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
}

.mp-caja {
    padding: 18px 20px 20px;
    outline: 0;
}

.mp-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.mp-titulo {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

.mp-cerrar {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    margin-right: -8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #5B7280;
    font-size: 17px;
    cursor: pointer;
}

.mp-cerrar:hover {
    background: #F1F5F3;
    color: #17262F;
}

.mp-cerrar:focus-visible {
    outline: 2px solid #9BD3F0;
}

.mp-intro {
    margin: 4px 0 14px;
    font-size: 13.5px;
    color: #5B7280;
}

.mp-lista {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid #DEE7E3;
    border-radius: 10px;
    overflow: hidden;
}

.mp-medio {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
}

.mp-medio + .mp-medio {
    border-top: 1px solid #EDF1EE;
}

.mp-icono {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #E4F2FA;
    color: var(--tu-secundario);
    font-size: 15px;
}

.mp-texto {
    flex: 1;
    min-width: 0;
}

.mp-nombre {
    display: block;
    font-size: 14px;
    font-weight: 600;
}

.mp-descripcion {
    display: block;
    margin-top: 1px;
    font-size: 12.5px;
    line-height: 17px;
    color: #6B7F89;
}

.mp-precio {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}

.mp-monto {
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.mp-ajuste {
    padding: 1px 8px;
    border-radius: 999px;
    background: #F1F5F3;
    color: #5B7280;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

.mp-ajuste.is-descuento {
    background: #E8F5EE;
    color: #17633F;
}

.mp-nota {
    margin: 12px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: #6B7F89;
}

@media (max-width: 576px) {
    /* Celular: hoja que sube desde abajo */
    .mp {
        width: 100%;
        max-width: none;
        margin: auto 0 0;
        border-radius: 16px 16px 0 0;
    }

    .mp[open] {
        animation-name: mp-hoja;
    }

    @keyframes mp-hoja {
        from {
            transform: translateY(100%);
        }
    }

    .mp-caja {
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
    }
}

@media (prefers-reduced-motion: reduce) {
    .mp[open] {
        animation: none;
    }
}

/* ---------- Scroll infinito del listado (productos/indexSinFiltro) ---------- */
.tu-scroll-infinito {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 1px;
    padding: 16px 0 24px;
}

.tu-scroll-infinito .spinner-border {
    color: var(--tu-primario);
}

.tu-scroll-error {
    margin: 0;
    font-size: .9rem;
    color: var(--tu-muted);
}

.tu-scroll-reintentar {
    margin-left: 6px;
    padding: 6px 14px;
    border: 1px solid var(--tu-primario);
    border-radius: 999px;
    background: #fff;
    font: inherit;
    font-weight: 600;
    color: var(--tu-secundario);
    cursor: pointer;
}

.tu-scroll-reintentar:hover {
    background: var(--tu-chip);
}