/* Default: sidebar oculto. Theme files lo activan selectivamente. */
#catalog-sidebar { display: none; }

/* ================================================================
   SIN STOCK — overlay y estilos
   ================================================================ */

.product-sin-stock {
    opacity: 0.78;
}

.product-sin-stock .prod-main-img {
    filter: grayscale(55%);
}

.prod-sin-stock-overlay {
    position: absolute;
    inset: 0;
    background: rgba(220, 220, 220, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    pointer-events: none;
}

.prod-sin-stock-overlay span {
    color: #555;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.8);
    padding: 4px 12px;
    border-radius: 20px;
    backdrop-filter: blur(2px);
}

.btn-sin-stock {
    width: 100%;
    padding: 8px;
    border-radius: 8px;
    border: 1.5px solid #ddd;
    background: #f5f5f5;
    color: #aaa;
    font-weight: 600;
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.75;
    user-select: none;
}


/* ================================================================
   ETIQUETAS DE PRODUCTO
   ================================================================ */

.prod-etiquetas-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px 0 0;
}

/* El renglón se dibuja siempre, aunque el producto no tenga etiquetas: así la
   tarjeta que dice "SIN TACC" no queda más alta que sus vecinas de la fila
   (la grilla usa `align-items: start`, ver catalog.css). Vacío no ocupa nada;
   sólo reserva el alto cuando esa grilla tiene alguna etiqueta — la clase
   `con-etiquetas` la pone `_postRenderGrid()`, así que una tienda que no las
   usa no ve ningún hueco. */
.prod-etiquetas-row:empty { padding: 0; }
.product-grid.con-etiquetas .prod-etiquetas-row { min-height: 1.25rem; }

.prod-etiqueta {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    background: var(--color-primario, #6a6e48);
    color: #fff;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* Cartel de promoción automática (3x2, -20%…). Ámbar fijo y texto oscuro en
   vez del color de acento del tema: el acento lo elige el comercio y con uno
   claro el texto blanco heredado quedaba ilegible. Así se distingue de las
   etiquetas manuales (que usan el primario) y siempre se lee. */
.prod-etiqueta-promo {
    background: #fde68a;
    color: #78350f;
    box-shadow: inset 0 0 0 1px rgba(120, 53, 15, .18);
}


/* ================================================================
   FOOTER RICO — diseño multi-columna
   ================================================================ */

.footer-rico {
    background: var(--color-zona-footer-fondo, var(--color-primario-deep));
    color: var(--color-zona-footer-texto, rgba(255, 255, 255, 0.82));
    /* 56px dejaba el footer pegado al último bloque (se notaba en el detalle
       de producto, donde el bloque final es un CTA grande). */
    margin-top: 80px;
    /* Sin padding lateral propio: el eje lo pone .footer-grid con
       --padding-lateral. Sumaba 16px y el footer quedaba 16px más adentro que
       el resto de las secciones. */
    padding-left: 0;
    padding-right: 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
    gap: 32px;
    max-width: var(--ancho-contenido);
    margin: 0 auto;
    /* El pie medía 456-468px con columnas de dos ítems: mucha altura para poca
       información, justo donde la página cierra. */
    padding: 36px var(--padding-lateral) 24px;
    align-items: start;
}

.footer-col {
    display: flex;
    flex-direction: column;
}

.footer-col-title {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    /* Hereda el color del footer en vez de fijar uno: el footer base es oscuro
       pero hay temas que lo pintan claro (modaco-figma), y tanto el acento
       configurado (contraste 3.4) como un blanco fijo (1.09 sobre footer claro)
       fallaban en alguno de los dos casos. */
    color: inherit;
    opacity: 1;
    margin: 0 0 16px;
    padding: 0;
}

.footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-list a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-size: 0.88rem;
    transition: color 0.2s;
}

.footer-list a:hover {
    color: #fff;
}

.footer-list li {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.75);
}

.footer-item-icon {
    flex-shrink: 0;
    width: 1.2em;
    display: flex;
    align-items: center;
    justify-content: center;
}
.footer-item-icon .ico {
    width: 14px;
    height: 14px;
    opacity: 0.8;
}

.footer-redes-list .footer-red-link {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-size: 0.88rem;
    transition: color 0.2s;
}

.footer-redes-list .footer-red-link:hover {
    color: #fff;
}

.footer-red-icon {
    font-size: 1.1rem;
    width: 1.1em;
    text-align: center;
}

.footer-dir-link {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-dir-link:hover {
    color: #fff;
    text-decoration: underline;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    padding: 16px 32px;
}

.footer-bottom p {
    /* 0.78rem daba 12.5px; el copyright es texto legal y no debería ser el más
       chico de la página. */
    font-size: 0.82rem;
    /* Blanco al 35% asume footer oscuro: daba 2.49 en los temas claros y 1.06
       en noche (donde el tema lo pisaba con negro al 45% sobre #120F22).
       --color-footer-suave lo calcula api.js contra el fondo real del footer
       de cada tema. */
    color: var(--color-footer-suave, rgba(255, 255, 255, 0.62));
    margin: 0;
}

@media (max-width: 640px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        padding: 44px var(--padding-lateral) 30px;
    }
}

@media (max-width: 380px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }
}
/* ── Centrado en desktop ───────────────────────────────────────────── */
#product-list {
    max-width: var(--ancho-contenido);
    margin: 0 auto;
    padding: 0 var(--padding-lateral);
}

/* ================================================================
   SKELETON LOADING
   ================================================================ */
@keyframes skeleton-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}

.skeleton-card {
    background: var(--color-secundario);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--color-gris-claro);
}

.skeleton-img {
    width: 100%;
    aspect-ratio: 1;
    background: var(--color-fondo-claro);
    animation: skeleton-pulse 1.4s ease-in-out infinite;
}

.skeleton-body {
    padding: 0.7rem 0.8rem;
}

.skeleton-line {
    height: 12px;
    border-radius: 6px;
    background: var(--color-gris-claro);
    margin-bottom: 8px;
    animation: skeleton-pulse 1.4s ease-in-out infinite;
}

.skeleton-line.short { width: 55%; }
.skeleton-line.wide  { width: 85%; animation-delay: 0.2s; }

.skeleton-btn {
    height: 34px;
    border-radius: 8px;
    background: var(--color-fondo-claro);
    margin-top: 10px;
    animation: skeleton-pulse 1.4s ease-in-out infinite;
    animation-delay: 0.35s;
}

/* ================================================================
   TOAST NOTIFICATION
   ================================================================ */
.toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--color-gris-oscuro);
    color: #fff;
    padding: 0.55rem 1.1rem;
    border-radius: 50px;
    font-size: 0.88rem;
    font-weight: 600;
    z-index: 99999;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
    white-space: nowrap;
    max-width: 90vw;
    text-overflow: ellipsis;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.22);
}

.toast.toast-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ================================================================
   FLY-TO-CART ANIMATION
   ================================================================ */
.fly-to-cart-clone {
    position: fixed;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    z-index: 99998;
    pointer-events: none;
    transition: all 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}

/* ================================================================
   FAVORITOS
   ================================================================ */
.fav-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,0.88);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
    z-index: 3;
    transition: transform 0.18s, background 0.18s, opacity 0.2s;
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    opacity: 0;
}

.fav-btn:hover {
    transform: scale(1.18);
    background: #fff;
}

.product:hover .fav-btn {
    opacity: 1;
}

.fav-btn.active {
    background: #fff0f0;
}

.fav-btn.active::after {
    filter: none;
}

/* Botón de compartir */
.share-btn {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,0.88);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    line-height: 1;
    z-index: 3;
    transition: transform 0.18s, background 0.18s;
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    opacity: 0;
}

.product:hover .share-btn {
    opacity: 1;
}

@media (hover: none) {
    .share-btn { opacity: 1; }
}

/* ================================================================
   FILTRO DE PRECIO
   ================================================================ */
.price-filter-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    background: var(--color-secundario);
    border-bottom: 1px solid var(--color-gris-claro);
    flex-wrap: wrap;
    justify-content: center;
}

.price-filter-label {
    font-size: 0.8rem;
    color: var(--color-gris-muted);
    font-weight: 600;
    white-space: nowrap;
}

.price-filter-input {
    width: 90px;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--color-borde-input);
    border-radius: 8px;
    font-size: 0.82rem;
    background: var(--color-fondo-claro);
    color: var(--color-gris-oscuro);
    outline: none;
    transition: border-color 0.2s;
}

.price-filter-input:focus {
    border-color: var(--color-primario);
}

.price-filter-clear {
    font-size: 0.78rem;
    color: var(--color-gris-muted);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
}

.price-filter-clear:hover {
    color: var(--color-primario);
    background: var(--color-fondo-claro);
}

.price-filter-clear.active-filter {
    color: var(--color-acento);
    font-weight: 700;
}

/* ================================================================
   CHIPS DE PRÓXIMAS ENTREGAS (en carrito)
   ================================================================ */
.entrega-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    padding: 0.5rem 0 0.2rem;
    font-size: 0.78rem;
    color: var(--color-gris-muted);
}

.entrega-chip {
    background: var(--color-fondo-claro);
    border: 1px solid var(--color-gris-claro);
    border-radius: 20px;
    padding: 0.18rem 0.55rem;
    font-size: 0.76rem;
    color: var(--color-gris-texto);
    font-weight: 600;
}

/* ================================================================
   HOVER EN TARJETAS DE PRODUCTO
   ================================================================ */
.product {
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    will-change: transform;
}

.product:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.11);
}

.product-sin-stock:hover {
    transform: none;
    box-shadow: none;
}

/* ================================================================
   CARRITO — BOTTOM SHEET EN MOBILE
   ================================================================ */
@media (max-width: 600px) {
    #cart {
        top: auto;
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        max-width: 100%;
        height: 92dvh;
        border-radius: 20px 20px 0 0;
        border-left: none;
        border-top: 1px solid var(--color-gris-claro);
        box-shadow: 0 -6px 32px rgba(0,0,0,0.15);
        transform: translateY(100%);
        transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
    }

    #cart.visible {
        right: 0;
        transform: translateY(0);
    }

    /* Handle indicator */
    .cart-header::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 36px;
        height: 4px;
        background: rgba(255,255,255,0.4);
        border-radius: 2px;
    }

    .cart-header {
        position: relative;
        padding-top: 1.3rem;
    }
}

/* ================================================================
   TAB FAVORITOS EN MENÚ DE CATEGORÍAS
   ================================================================ */
.cat-tab-favs {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.cat-tab-favs .fav-count {
    display: inline-block;
    background: #e74c3c;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 50px;
    padding: 0 5px;
    min-width: 16px;
    text-align: center;
    line-height: 16px;
}
.featured-section { max-width: var(--ancho-contenido); margin: 0 auto; padding: 0 var(--padding-lateral); }

/* ================================================================
   MEJORAS MOBILE
   ================================================================ */

@media (max-width: 600px) {
    /* NAV en mobile: DOS FILAS en vez de scroll horizontal. Con 6 links
       ("Categorías, Cómo comprar, Nosotros, Blog, Mi cuenta, Contacto") no
       entran en 390px: scrolleando, los últimos quedaban cortados en el
       borde y se leía como roto. Envolviendo entra todo a la vista.
       Con wrap no hace falta el scroll horizontal. */
    #category-buttons {
        flex-wrap: wrap;
        justify-content: center;
        overflow-x: visible;
        padding: 0.15rem 0.3rem;
        gap: 0 0.1rem;
    }
    /* Un poco más compacto para que las dos filas del nav no se coman tanto
       alto de pantalla (78px → 72px) sin bajar de 0.7rem, que ya es el
       mínimo legible para estos labels. */
    .nav-link-btn,
    .dropdown-btn {
        padding: 0.4rem 0.5rem;
        font-size: 0.7rem;
    }
    .quick-pill {
        padding: 0.4rem 0.5rem;
        font-size: 0.7rem;
    }

    /* El clamp de 2 líneas ahora es global (catalog.css); acá sólo se ajusta la
       reserva de alto, que en mobile puede ser un poco menor. */
    .product h3 {
        min-height: 2.3em;
    }

    /* CAROUSEL CATEGORÍAS: ocultar flechas */
    .cat-carousel-arrow {
        display: none;
    }
    /* El viewport ocupa todo el ancho sin margen de flechas */
    .cat-carousel-track-wrap {
        padding: 0;
    }

    /* CAROUSEL PRODUCTOS DESTACADOS: ocultar flechas + quitar gradiente de bordes */
    .featured-side-arrow {
        display: none;
    }
    .featured-carousel-wrap {
        -webkit-mask-image: none;
        mask-image: none;
    }
}


/* ================================================================
   CUPONES DE DESCUENTO (carrito)
   ================================================================ */
.cart-cupon {
    margin: 14px 0 4px;
    padding: 12px 14px;
    background: var(--color-acento-light);
    border: 1px dashed var(--color-borde-acento);
    border-radius: 10px;
}

.cart-cupon label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-acento-text);
    margin-bottom: 7px;
}


.cart-cupon label {
    display: flex;
    align-items: center;
    gap: 5px;
}
.cart-cupon label .ico {
    width: 14px;
    height: 14px;
    opacity: 0.75;
}
.cart-cupon-row {
    display: flex;
    gap: 8px;
}

.cart-cupon-row input {
    flex: 1;
    min-width: 0;
    padding: 9px 12px;
    border: 1.5px solid var(--color-borde-input);
    border-radius: 8px;
    font-size: 0.85rem;
    font-family: var(--font-body);
    text-transform: uppercase;
    background: #fff;
}

.cart-cupon-row input:focus:not(:focus-visible) {
    outline: none;
    border-color: var(--color-primario);
    box-shadow: 0 0 0 3px var(--color-input-shadow-focus);
}

.cart-cupon-row input:disabled {
    background: var(--color-fondo-claro);
    color: var(--color-gris-texto);
}

.cart-cupon-row button {
    padding: 9px 16px;
    border: none;
    border-radius: 8px;
    background: var(--color-primario);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    font-family: var(--font-body);
    cursor: pointer;
    transition: background .18s;
    flex-shrink: 0;
}

.cart-cupon-row button:hover:not(:disabled) {
    background: var(--color-primario-hover);
}

.cart-cupon-row button:disabled {
    opacity: .6;
    cursor: wait;
}

.cupon-msg {
    margin: 7px 0 0;
    font-size: 0.78rem;
    font-weight: 600;
}

.cupon-msg-ok    { color: #1e7e43; }
.cupon-msg-error { color: var(--color-input-borde-error); }

/* Fila de descuento en los totales */
.cart-total-descuento span {
    color: #1e7e43 !important;
    font-weight: 700;
}

.cart-total-descuento #descuento-label {
    font-size: 0.72rem;
    font-weight: 600;
    opacity: .8;
}

.total-row-descuento span {
    color: #1e7e43;
    font-weight: 700;
}

/* ================================================================
   BARRA DE PROGRESO "ENVÍO GRATIS" (carrito)
   ================================================================ */
.envio-gratis-bar {
    margin: 12px 0 2px;
    padding: 11px 14px;
    background: var(--color-fondo-claro);
    border: 1px solid var(--color-borde-divider);
    border-radius: 10px;
}

.envio-gratis-bar p {
    margin: 0 0 8px;
    font-size: 0.8rem;
    color: var(--color-gris-texto);
}

.envio-gratis-bar.completo {
    background: var(--color-verde-ok-bg);
    border-color: #bfe5cc;
}

.envio-gratis-bar.completo p {
    color: #1e7e43;
}

.envio-gratis-track {
    height: 7px;
    background: var(--color-gris-claro);
    border-radius: 99px;
    overflow: hidden;
}

.envio-gratis-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--color-acento), #1e7e43);
    border-radius: 99px;
    transition: width .45s ease;
}

/* ================================================================
   OFERTAS — precio anterior tachado + badge % OFF
   ================================================================ */
.prod-precio-anterior {
    font-size: 0.78em;
    font-weight: 500;
    color: var(--color-gris-muted);
    text-decoration: line-through;
    margin-left: 5px;
}

.prod-oferta-hasta {
    display: block;
    font-size: 0.7em;
    color: var(--color-acento, #e55);
    font-weight: 500;
    margin-top: 2px;
}

.prod-off-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    background: #1a1a1a;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: .06em;
    padding: 3px 7px;
    border-radius: 4px;
    pointer-events: none;
}

/* Detalle de producto */
.pd-price-anterior {
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--color-gris-muted);
    text-decoration: line-through;
    margin-left: 10px;
}

.pd-off-badge {
    display: inline-block;
    background: #D7263D;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: .04em;
    padding: 4px 10px;
    border-radius: 99px;
    margin-left: 8px;
    vertical-align: middle;
}

/* ================================================================

   CATALOG LAYOUT — sidebar + main (Grupo A)
══════════════════════════════════════════════════════ */
.catalog-layout { display:flex; gap:20px; align-items:flex-start; padding:0; }

.catalog-sidebar {
  width:220px; flex-shrink:0; position:sticky; top:80px;
  border:1px solid #e5e7eb; border-radius:12px; padding:16px;
  /* Superficie clara fija: las categorías del sidebar tienen color de texto
     hardcodeado (#374151), con el fondo de página de un tema oscuro quedaban
     ilegibles. */
  background:var(--color-secundario);
  /* Y con el fondo claro va el color de texto que le corresponde. Faltaba: la
     superficie se pintaba clara pero el color se seguía heredando del tema, así
     que en los temas oscuros cualquier texto que no tuviera el suyo propio
     salía claro sobre blanco. Medido en `noche`: contraste 1.31 contra el 4.5
     mínimo — texto invisible. Las categorías no lo sufrían porque traen su
     color hardcodeado; lo sufría todo lo demás. */
  color:#374151;
}
.sidebar-section { margin-bottom:20px; }
/* #9ca3af sobre blanco da 2.54:1 y el mínimo accesible es 4.5:1 — y encima
   es texto chico (0.7rem) en mayúsculas, que es lo más difícil de leer.
   #6b7280 da 4.83:1 y se sigue viendo como una etiqueta secundaria. */
.sidebar-title { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:#6b7280; margin:0 0 8px; }
.sidebar-cat-list { list-style:none; margin:0; padding:0; }
.sidebar-cat-list li { display:flex; justify-content:space-between; align-items:center; padding:7px 8px; border-radius:7px; cursor:pointer; font-size:.88rem; color:#374151; transition:background .13s; }
.sidebar-cat-list li:hover { background:#f3f4f6; }
.sidebar-cat-list li.activo { background:var(--color-primario,#1a1a2e); color:#fff; font-weight:600; }
.sidebar-cat-label { display:flex; align-items:center; gap:6px; min-width:0; flex:1 1 auto; overflow:hidden; white-space:nowrap; }
/* El "…" tiene que vivir en el elemento que contiene el texto, no en el flex
   que lo envuelve: si no, el nombre largo se corta al ras y queda pegado al
   contador. `title` deja leer el nombre completo al pasar el mouse. */
.sidebar-cat-nombre { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar-cat-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.sidebar-cat-emoji { font-size:.95rem; line-height:1; flex-shrink:0; }
.sidebar-cat-count { font-size:.72rem; background:rgba(0,0,0,.08); border-radius:10px; padding:1px 6px; flex-shrink:0; margin-left:8px; }
.sidebar-cat-list li.activo .sidebar-cat-count { background:rgba(255,255,255,.2); }
.sidebar-price-inputs { display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.sidebar-price-inputs input { width:72px; padding:5px 7px; border:1px solid #d1d5db; border-radius:6px; font-size:.82rem; }
.sidebar-price-apply { width:100%; padding:7px; background:var(--color-primario,#1a1a2e); color:#fff; border:none; border-radius:7px; cursor:pointer; font-size:.82rem; font-weight:600; }
.sidebar-reset-btn { width:100%; padding:7px; background:none; border:1px solid #e5e7eb; border-radius:7px; color:#9ca3af; font-size:.8rem; cursor:pointer; }
.sidebar-reset-btn:hover { background:#f9fafb; }
.catalog-main { flex:1; min-width:0; }

/* ── Toolbar ─────────────────────────────────────────── */
.catalog-toolbar { display:flex; justify-content:space-between; align-items:center; padding:6px 0 12px; gap:10px; flex-wrap:wrap; }
.toolbar-count { font-size:.83rem; color:#6b7280; }
.toolbar-right { display:flex; align-items:center; gap:8px; }
.toolbar-sort { padding:5px 9px; border:1px solid #d1d5db; border-radius:7px; font-size:.83rem; background:#fff; }
.toolbar-view-btns { display:flex; border:1px solid #d1d5db; border-radius:7px; overflow:hidden; }
.toolbar-view-btn { background:none; border:none; padding:5px 8px; cursor:pointer; color:#9ca3af; display:flex; align-items:center; }
.toolbar-view-btn.active { background:var(--color-primario,#1a1a2e); color:#fff; }

/* ── Vista lista ─────────────────────────────────────── */
.product-grid.vista-lista { display:flex !important; flex-direction:column; gap:10px; }
.product-grid.vista-lista .product { display:flex; flex-direction:row; align-items:center; gap:16px; border-radius:10px; border:1px solid #e5e7eb; padding:12px; }
.product-grid.vista-lista .prod-img-wrap { width:100px; min-width:100px; height:100px; border-radius:8px; overflow:hidden; }
.product-grid.vista-lista h3 { font-size:1rem; }
/* width:auto es necesario: en vista grilla el botón "Agregar" es
   width:calc(100% - 1rem) (catalog.css) y en la fila horizontal de la vista
   lista eso lo hacía ocupar casi todo el ancho, empujando nombre y precio. */
.product-grid.vista-lista .product button,
.product-grid.vista-lista .product .quantity-controls { margin-top:0; margin-left:auto; margin-right:0; width:auto; flex-shrink:0; }

/* ── Card styles ─────────────────────────────────────── */
/* Sin overflow:hidden acá: .product es flex-item y esto cortaba nombres largos
   a mitad de línea junto con precio/botón (la imagen ya se recorta aparte en
   .prod-img-wrap, no hace falta repetirlo en la card entera). */
.product-grid.style-cards .product { border:1px solid #e5e7eb; border-radius:14px; box-shadow:0 1px 4px rgba(0,0,0,.06); }
.product-grid.style-thumbs .product { border:none; border-radius:14px; box-shadow:0 4px 16px rgba(0,0,0,.10); }
.product-grid.style-grid { border:1px solid #e5e7eb; border-radius:0; gap:0 !important; }
.product-grid.style-grid .product { border-right:1px solid #e5e7eb; border-bottom:1px solid #e5e7eb; border-radius:0; }

/* ── Hover actions overlay ───────────────────────────── */
.prod-hover-actions { position:absolute; bottom:8px; right:8px; display:flex; flex-direction:column; gap:6px; opacity:0; transform:translateY(6px); transition:opacity .18s,transform .18s; pointer-events:none; z-index:4; }
.product:hover .prod-hover-actions { opacity:1; transform:translateY(0); pointer-events:auto; }
.prod-hover-btn { width:34px; height:34px; border-radius:50%; background:#fff; border:1px solid #e5e7eb; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,.12); font-size:.85rem; transition:background .13s; }
.prod-hover-btn:hover { background:var(--color-primario,#1a1a2e); color:#fff; }

/* ── Desc en card ────────────────────────────────────── */
.prod-desc-card { font-size:.78rem; color:#6b7280; margin:2px 0 4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ── Columnas vía CSS custom property ───────────────── */
.product-grid { --catalog-cols:3; }
@media (min-width:769px) { .product-grid:not(.vista-lista) { grid-template-columns:repeat(var(--catalog-cols),1fr) !important; } }
/* Tablet: máx 3 columnas aunque esté configurado a 4 */
@media (max-width:768px) and (min-width:601px) { .product-grid:not(.vista-lista) { grid-template-columns:repeat(min(3,var(--catalog-cols)),1fr) !important; } }
/* Mobile: siempre 2 columnas. Corte a 600px (no 480) para coincidir con el
   resto de los breakpoints mobile del sitio (responsive.css, header, cart):
   con el corte en 480 un celular de 560px mostraba 3 columnas de ~170px
   mientras responsive.css pedía 2, y el !important de acá ganaba. */
@media (max-width:600px) { .product-grid:not(.vista-lista) { grid-template-columns:repeat(2,1fr) !important; } }

/* ── Mobile ──────────────────────────────────────────── */
@media (max-width:768px) { .catalog-layout { flex-direction:column; padding:0; } .catalog-sidebar { width:100%; position:static; } }

/* ── Filtros en barra superior ("catalogo_filtros_pos: top") ───
   El sidebar es el mismo elemento del DOM; esta variante lo convierte en
   una barra horizontal arriba de la grilla en vez de columna lateral. */
.catalog-layout.filtros-top { flex-direction:column; align-items:stretch; }
.catalog-layout.filtros-top .catalog-sidebar {
  width:100%; position:static; display:flex; flex-wrap:wrap;
  align-items:center; gap:10px 22px; padding:12px 16px;
}
.catalog-layout.filtros-top .sidebar-section {
  margin-bottom:0; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.catalog-layout.filtros-top .sidebar-title { margin:0; white-space:nowrap; }
.catalog-layout.filtros-top .sidebar-cat-list { display:flex; flex-wrap:wrap; gap:6px; }
.catalog-layout.filtros-top .sidebar-cat-list li { padding:5px 12px; border:1px solid #e5e7eb; border-radius:999px; }
.catalog-layout.filtros-top .sidebar-cat-list li.activo { border-color:var(--color-primario,#1a1a2e); }
.catalog-layout.filtros-top .sidebar-price-inputs { margin-bottom:0; }
.catalog-layout.filtros-top .sidebar-price-apply,
.catalog-layout.filtros-top .sidebar-reset-btn { width:auto; white-space:nowrap; }
@media (max-width:600px) {
  .catalog-layout.filtros-top .catalog-sidebar { gap:10px 14px; }
  .catalog-layout.filtros-top .sidebar-section { width:100%; }
}

/* ══════════════════════════════════════════════════════
   GRUPO B — Product detail enhancements
══════════════════════════════════════════════════════ */

/* ── Zoom de imagen (hover) ──────────────────────────── */
.detalle-img-wrap { overflow:hidden; border-radius:12px; }
.detalle-img-wrap img { transition:transform .35s ease; display:block; width:100%; }
.detalle-img-wrap:hover img { transform:scale(1.06); }

/* ── Specs table ─────────────────────────────────────── */
.prod-specs-table { margin-top:20px; border-radius:10px; overflow:hidden; border:1px solid #e5e7eb; }
.prod-specs-table h3 { font-size:.9rem; font-weight:700; padding:12px 16px; background:#f9fafb; border-bottom:1px solid #e5e7eb; margin:0; }
.prod-spec-row { display:flex; border-bottom:1px solid #f3f4f6; }
.prod-spec-row:last-child { border-bottom:none; }
.prod-spec-nombre { width:40%; padding:10px 16px; font-size:.85rem; color:#6b7280; font-weight:500; background:#fafafa; border-right:1px solid #f3f4f6; }
.prod-spec-valor  { flex:1; padding:10px 16px; font-size:.85rem; color:#111827; }

/* ── Botón comprar ahora ─────────────────────────────── */
.btn-comprar-ahora {
  display:block; width:100%; padding:13px;
  background:var(--color-acento,#C8913A); color:#fff;
  border:none; border-radius:10px; font-size:1rem; font-weight:700;
  cursor:pointer; margin-top:8px; transition:opacity .15s;
}
.btn-comprar-ahora:hover { opacity:.88; }

/* Stock limit message — product detail page */
.detalle-stock-limite {
  font-size:.8rem; font-weight:600; color:#b45309;
  background:#fef3c7; border:1px solid #fde68a;
  border-radius:7px; padding:6px 12px; margin-top:6px; text-align:center;
}
@keyframes shake {
  0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)}
}

/* Stock limit in cart panel */
.cart-stock-limite {
  font-size:.72rem; font-weight:600; color:#b45309;
  background:#fef3c7; border-radius:4px; padding:2px 8px; margin:3px 0 0;
  display:inline-block;
}

/* quantity-controls-large — product detail page */
.quantity-controls-large {
  display:flex; align-items:center; gap:12px;
  justify-content:flex-start; padding:0; width:auto; background:none; border:none;
}
.quantity-controls-large button {
  width:38px; height:38px; font-size:1.1rem; font-weight:700;
  border-radius:50%; border:2px solid var(--color-primario);
  background:transparent; color:var(--color-primario); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s,color .15s;
}
.quantity-controls-large button:not(:disabled):hover {
  background:var(--color-primario); color:#fff;
}
.quantity-controls-large span {
  font-size:1.2rem; font-weight:700; min-width:2rem; text-align:center;
}

/* ── Share buttons ───────────────────────────────────── */
.prod-share-row { display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }
.prod-share-btn {
  display:flex; align-items:center; gap:5px; padding:7px 13px;
  border-radius:8px; border:1px solid #e5e7eb; background:#fff;
  font-size:.82rem; cursor:pointer; text-decoration:none; color:inherit; transition:background .13s;
}
.prod-share-btn:hover { background:#f3f4f6; }
.prod-share-wsp { border-color:#25D366; color:#25D366; }
.prod-share-wsp:hover { background:#25D366; color:#fff; }

/* ══════════════════════════════════════════════════════
   GRUPO B — Cart stepper
══════════════════════════════════════════════════════ */
.cart-stepper { display:flex; align-items:center; padding:12px 16px; border-bottom:1px solid #f3f4f6; }
.stepper-step { display:flex; flex-direction:column; align-items:center; gap:3px; flex:1; }
.stepper-circle {
  width:26px; height:26px; border-radius:50%; background:#e5e7eb; color:#9ca3af;
  display:flex; align-items:center; justify-content:center;
  font-size:.78rem; font-weight:700; transition:background .2s,color .2s;
}
.stepper-step.active .stepper-circle,
.stepper-step.done .stepper-circle { background:var(--color-primario,#1a1a2e); color:#fff; }
.stepper-step span { font-size:.72rem; color:#6b7280; }  /* #9ca3af daba 2.5 sobre el panel blanco */
.stepper-step.active span { color:var(--color-primario,#1a1a2e); font-weight:600; }
.stepper-line { flex:1; height:2px; background:#e5e7eb; margin:0 4px; margin-bottom:14px; }
.cart-step { display:none; flex-direction:column; flex:1; overflow-y:auto; }
.cart-step.active { display:flex; }
.cart-step-footer { padding:12px 16px; border-top:1px solid #f3f4f6; display:flex; gap:8px; flex-wrap:wrap; }
.btn-step-next, .btn-confirmar-pedido {
  flex:1; padding:12px; background:var(--color-primario,#1a1a2e); color:var(--color-texto-sobre-primario);
  border:none; border-radius:9px; font-size:.95rem; font-weight:700; cursor:pointer;
}
.btn-step-back { padding:12px 16px; background:none; border:1px solid #e5e7eb; border-radius:9px; cursor:pointer; font-size:.9rem; }
.btn-confirmar-pedido { background:var(--color-acento,#C8913A); }

/* ── Paginación catálogo ────────────────────────────────── */
.pg-indicador {
    text-align: center;
    font-size: 0.83rem;
    color: #888;
    margin: 0.5rem 0 1rem;
    letter-spacing: 0.01em;
}
.pg-cargar-mas-wrap {
    display: flex;
    justify-content: center;
    margin: 1.5rem 0 2rem;
}
.btn-cargar-mas {
    background: transparent;
    color: var(--color-primario);
    border: 1.5px solid var(--color-primario);
    padding: 0.6rem 2rem;
    border-radius: 7px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
    letter-spacing: 0.02em;
}
.btn-cargar-mas:hover {
    background: var(--color-primario);
    color: #fff;
}