/* ============================================================
   ESTILE — hoja base de la tienda
   ============================================================
   Carga en todas las paginas publicas (index, categorias,
   subcategorias, ver, detalle, carrito).

   Migrated from css/styles.css (Bootstrap 5.1 bundle removed)
   ============================================================ */

/* ------------------------------------------------------------
   1. TOKENS DE LA TIENDA
   ------------------------------------------------------------ */
:root {
    --shop-surface: #ffffff;
    --shop-surface-2: #f7faf8;
    --shop-surface-3: #eef4f0;
    --shop-border: #e3ebe6;
    --shop-border-strong: #cfdcd4;
    --shop-focus-ring: 0 0 0 2px var(--shop-surface), 0 0 0 4px var(--primary);
    --shop-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --shop-dur-fast: 120ms;
    --shop-dur: 220ms;
}

.resultado-precio {
    color: #1cc88a;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.sin-resultados {
    padding: 20px;
    text-align: center;
    color: #999;
}

.buscando {
    padding: 20px;
    text-align: center;
    color: #999;
}

.card-img-top {
    width: 100%;
    height: auto;
    object-fit: cover;
}
/* ── End migrated ── */

#idless_ul_lista {}

#idless_ul_lista ul {
    display: block;
    background: #fcfcfc;
    position: relative;
    height: auto;
    width: auto;
    margin: 0;
    padding: 0;
    max-height: 300px;
    /* `auto` en vez de `scroll`: no reserva la barra si no hace falta */
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--primary, #198754) 38%, transparent) transparent;
}

#idless_ul_lista ul::-webkit-scrollbar {
    width: 8px;
}

#idless_ul_lista ul::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--primary, #198754) 38%, transparent);
    border-radius: 999px;
}

/* ------------------------------------------------------------
   2. FOCUS VISIBLE (WCAG 2.2)
   ------------------------------------------------------------ */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--primary, #198754);
    outline-offset: 2px;
    border-radius: 4px;
}

:where(input, select, textarea):focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary, #198754) 26%, transparent);
}

@supports not selector(:focus-visible) {
    :where(a, button, input, select, textarea, summary, [tabindex]):focus {
        outline: 2px solid var(--primary, #198754);
        outline-offset: 2px;
    }
}

/* ------------------------------------------------------------
   3. CARRUSEL
   ------------------------------------------------------------ */
@media (min-width:300px) {
    .cl_tre {
        height: 50px;
        margin-top: 3%;
        margin-bottom: 10px;
    }
    #idcarCabCu {
        padding-top: 20%;
    }
    #idcarCabCu .carousel-inner img {}
}

@media (min-width:768px) {
    .cl_tre {
        height: 150px;
        margin-top: 3%;
        margin-bottom: 10px;
    }
    #idcarCabCu {
        padding-top: 0%;
    }
    #idcarCabCu .carousel-inner img {
        height: 100%;
        object-fit: cover;
    }
}

/* El selector original "769x" era invalido (unidad inexistente):
   la regla nunca se aplicaba. Se corrige a 769px. */
@media (min-width:769px) {
    .cl_tre {
        height: 150px;
        margin-top: 3%;
        margin-bottom: 10px;
    }
    #idcarCabCu {
        padding-top: 0%;
    }
    #idcarCabCu .carousel-inner img {
        height: 100%;
        object-fit: cover;
    }
}

/* ------------------------------------------------------------
   4. PREFERENCIAS DEL SISTEMA
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Acceso por teclado: fuera del flujo y visible solo cuando recibe foco. */
.skip-link:not(:focus){position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
.skip-link:focus{position:fixed;top:8px;left:8px;z-index:1000001;width:auto;height:auto;padding:12px 18px;background:#fff;color:#0d5c36;border:2px solid #198754;border-radius:8px;font:600 16px/1.4 system-ui;text-decoration:underline;box-shadow:0 3px 12px #0003}
#idlosproCuerpo{scroll-margin-top:calc(var(--menu-height,118px) + 12px)}
@media print{.skip-link{display:none!important}}