/* ============================================================
   CSS propio de SmartbuyStore.Store.
   Se carga DESPUÉS de ui-kit.css (copia sin cambios de
   docs/ui-kit-smartbuy/site.css). Decisión F3-CSS (docs/migracion-ui-kit/
   02-DECISIONES.md): aquí solo vive lo que el kit no trae, acotado a sus
   propias clases para no pisar los componentes del kit.
   Limpieza final (2026-10-22): todas las pantallas migradas, sin CSS viejo.
   ============================================================ */

/* ====== Menú de categorías (☰, Ficha 1 2026-10-22) ======
   Reemplaza la barra azul de categorías (C-01 A). Offcanvas a la izquierda con
   las categorías padre; las que tienen subcategorías se despliegan (collapse). */
.tienda-menu-categorias,
.tienda-menu-categorias-sub {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tienda-menu-categorias-enlace {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 0.5rem;
    padding: 0.8rem 1rem;
    border: 0;
    border-bottom: 1px solid var(--sb-borde);
    background: none;
    color: var(--sb-texto);
    font-weight: 600;
    font-size: 0.95rem;
    text-align: left;
    text-decoration: none;
}

.tienda-menu-categorias-enlace:hover,
.tienda-menu-categorias-enlace:focus-visible {
    background-color: var(--sb-fondo);
    color: var(--sb-naranja-oscuro);
}

.tienda-menu-categorias-flecha.sb-icon {
    width: 16px;
    height: 16px;
    color: var(--sb-secundario);
    transition: transform 0.2s;
}

.tienda-menu-categorias-enlace:not(.collapsed) .tienda-menu-categorias-flecha {
    transform: rotate(180deg);
}

.tienda-menu-categorias-sub {
    background-color: var(--sb-fondo);
    border-bottom: 1px solid var(--sb-borde);
    padding: 0.35rem 0;
}

.tienda-menu-categorias-sub a {
    display: block;
    padding: 0.45rem 1rem 0.45rem 3rem;
    color: var(--sb-texto);
    font-size: 0.9rem;
    text-decoration: none;
}

.tienda-menu-categorias-sub a:hover {
    color: var(--sb-naranja-oscuro);
}

/* Ícono de categoría/subcategoría (C-70): viene de la BD (Category.Icon, elegido en el
   Admin) y se dibuja como SVG del kit en _IconoCategoria. Mismo tamaño en el panel de
   la Home, el panel del catálogo y el menú de categorías (☰). */
.sb-icon.tienda-icono-categoria,
.tienda-categorias-panel .nav-link .sb-icon.tienda-icono-categoria {
    width: 18px;
    height: 18px;
    margin-right: 0.5rem;
    vertical-align: -3px;
    color: var(--sb-azul);
}

/* Boletín dentro del footer (C-09 A): el mensaje de respuesta va sobre fondo azul. */
.tienda-footer #newsletterMessage .alert {
    margin-top: 0.75rem;
    margin-bottom: 0;
    font-size: 0.85rem;
}

/* ====== Slider Principal (A-07 / Ficha 2, 2026-10-22) ======
   Antes: alto fijo de 490 px con la imagen estirada (object-fit: fill).
   Ahora: tamaño FIJO con la proporción del banner recomendado en el Admin (1920×600,
   la del banner de referencia de José), en todas las pantallas. Ninguna imagen cambia
   el tamaño: cada una se recorta para llenar el espacio (cover), nunca se deforma.
   En computadora el panel de categorías toma esa misma altura. */
#mainCarousel {
    aspect-ratio: 1920 / 600;
}

#mainCarousel .carousel-inner,
#mainCarousel .carousel-item {
    height: 100%;
}

/* Absoluta: la imagen no decide la altura del carrusel (por eso antes cambiaba de banner a banner). */
#mainCarousel .carousel-item > a {
    position: relative;
    display: block;
    height: 100%;
}

#mainCarousel img {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

@media (min-width: 992px) {
    /* El kit estira el hero a la altura del panel (.tienda-hero-fila .tienda-hero { height: 100% });
       aquí manda la proporción del banner y el panel se ajusta a ella. */
    .tienda-hero-fila #mainCarousel {
        height: auto;
        width: 100%;
    }
}

/* Panel de categorías: el ícono no agranda la fila (misma altura que en la plantilla). */
.tienda-categorias-panel .nav-link > span {
    display: inline-flex;
    align-items: center;
}

.tienda-categorias-panel .nav-link .sb-icon.tienda-icono-categoria {
    width: 16px;
    height: 16px;
    vertical-align: 0;
}

/* "Ver todas las categorías" (Ficha 2): botón con el mismo aspecto que los enlaces del panel. */
.tienda-categorias-panel .tienda-categorias-ver-todas {
    width: 100%;
    background: none;
    border: 0;
    color: var(--sb-azul);
}

/* ======= Carrusel horizontal de productos (Home y Detalle, C-18 B) ======= */
.product-row {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 1rem;
    padding: 10px 0;
}

.product-row::-webkit-scrollbar {
    display: none;
}

/* Flechas laterales (botón circular con SVG del kit) */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--sb-superficie);
    border: 1px solid var(--sb-borde);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slider-btn.left {
    left: -10px;
}

.slider-btn.right {
    right: -10px;
}

.slider-btn:hover {
    background-color: var(--sb-azul);
    border-color: var(--sb-azul);
}

.slider-btn .sb-icon {
    width: 20px;
    height: 20px;
    color: var(--sb-azul);
}

.slider-btn:hover .sb-icon {
    color: #fff;
}

/* ====== Focus inputs ====== */
/* Acotado a <main> (F3-CSS): fuera de main viven el buscador y el boletín
   del layout, que usan el foco del kit. */
main input:focus,
main textarea:focus,
main select:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(254, 129, 0, 0.4);
    border: 3px solid #FE8100 !important;
}

/* ============================================================
   Home (entrega Home-1, docs/migracion-ui-kit/02-DECISIONES.md)
   Lo que el kit no trae porque no tenía fotos reales: imágenes de
   banners del Admin (C-19 A), foto de producto (C-32 A) y precio
   Efectivo/ACH con monto (C-31 A).
   ============================================================ */

/* Tarjeta de producto sobre el fondo gris de la tienda: superficie blanca,
   igual que .card del kit. */
.sb-producto-card {
    background-color: var(--sb-superficie);
}

.sb-producto-imagen {
    overflow: hidden;
}

.sb-producto-imagen:has(img) {
    background-color: var(--sb-superficie);
}

.sb-producto-imagen img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Precio Efectivo/ACH: badge nativo de Bootstrap (igual que el kit) + el monto. */
.tienda-precio-efectivo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 0.9rem;
}

.tienda-precio-efectivo strong {
    color: var(--sb-naranja-oscuro);
}

/* Carrusel horizontal de productos (C-18 B) con la tarjeta del kit (dentro de su envoltura). */
.product-row > .tienda-producto-wrap {
    flex: 0 0 210px;
}

/* Banner con imagen real (secciones del Admin): mismo radio y hover que las
   tarjetas del kit, texto encima como en el sitio. */
.tienda-banner-imagen {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: var(--sb-radio);
    color: #fff;
    text-decoration: none;
}

.tienda-banner-imagen img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

a.tienda-banner-imagen:hover img {
    transform: scale(1.03);
}

.tienda-banner-imagen-texto {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 1.5rem;
}

.tienda-banner-imagen-texto h3 {
    font-weight: 800;
    font-size: 1.35rem;
    margin: 0;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.45);
}

.tienda-banner-imagen-texto p {
    margin: 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.tienda-banner-imagen.mediano .tienda-banner-imagen-texto {
    padding: 2rem;
}

.tienda-banner-imagen.mediano h3 {
    font-size: 1.75rem;
}

/* ============================================================
   Catálogo (docs/migracion-ui-kit/02-DECISIONES.md)
   ============================================================ */

/* Lista de marcas del filtro (C-24 C): con scroll propio. Ajuste 2026-10-22: 6 marcas
   visibles (alto fijado por JS en Store/Index) y el mismo scroll discreto de Categorías. */
.tienda-filtro-marcas {
    max-height: 220px;
    overflow-y: auto;
    padding-right: 0.25rem;
    scrollbar-width: thin;
    scrollbar-color: var(--sb-borde-fuerte) transparent;
}

.tienda-filtro-marcas::-webkit-scrollbar {
    width: 4px;
}

.tienda-filtro-marcas::-webkit-scrollbar-thumb {
    background-color: var(--sb-borde-fuerte);
    border-radius: 4px;
}

/* ============================================================
   Detalle de producto (entrega Detalle-1, docs/migracion-ui-kit/02-DECISIONES.md)
   ============================================================ */

/* Galería (C-35 A): miniaturas debajo. Las <img class="main-image-thumb"> las
   regenera el JS al cambiar de color, por eso se estilizan por clase y no se
   convierten en <button class="tienda-galeria-miniatura"> como en el patrón. */
.tienda-galeria-miniaturas .main-image-thumb {
    width: 64px;
    height: 64px;
    object-fit: contain;
    background-color: var(--sb-superficie);
    border: 2px solid var(--sb-borde);
    border-radius: 0.65rem;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.tienda-galeria-miniaturas .main-image-thumb:hover {
    border-color: var(--sb-borde-fuerte);
}

.tienda-galeria-miniaturas .main-image-thumb.active {
    border-color: var(--sb-naranja);
}

/* Descuento junto al precio regular: mismo rojo que .tienda-badge-descuento,
   pero en línea (el del kit va absoluto sobre la imagen de la tarjeta). */
.tienda-descuento-detalle {
    display: inline-block;
    background-color: #842029;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    vertical-align: middle;
}

.tienda-precio-efectivo-texto {
    color: var(--sb-naranja-oscuro);
}

/* Selectores de variantes (C-33 A): mismas clases que usa el JS
   (.variant-selector-item / .selected / .variant-circle), estilo del kit:
   anillo naranja al seleccionar (color de "activo/seleccionado" del kit). */
.variant-selector-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--sb-borde-fuerte);
    border-radius: var(--sb-radio);
    background-color: var(--sb-superficie);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.variant-selector-item:hover {
    border-color: var(--sb-azul);
}

.variant-selector-item.selected {
    border-color: var(--sb-naranja);
    box-shadow: 0 0 0 0.2rem rgba(254, 129, 0, 0.25);
}

.variant-selector-item .variant-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--sb-superficie);
    box-shadow: 0 0 0 1px var(--sb-borde-fuerte);
}

.variant-selector-item.selected .variant-circle {
    box-shadow: 0 0 0 2px var(--sb-naranja);
}

.variant-selector-item .variant-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--sb-secundario);
    text-align: center;
}

.variant-selector-item.selected .variant-name {
    color: var(--sb-naranja-oscuro);
}

/* Capacidad/variantes hijas: botones tipo píldora. */
.variant-selector-item:not(:has(.variant-circle)) {
    border-radius: 999px;
}

.variant-selector-item .text-primary {
    color: var(--sb-azul) !important;
}

/* ============================================================
   Carrito y checkout (entrega Carrito-1, docs/migracion-ui-kit/02-DECISIONES.md)
   ============================================================ */

/* Foto real del producto en la línea del carrito (.tienda-carrito-producto del kit). */
.tienda-carrito-producto .sb-producto-nombre {
    -webkit-line-clamp: 2;
}

/* Código de descuento junto a la tabla (C-38 A). */
/* Código de cupón (como la plantilla): grupo input + "Aplicar cupón", ancho acotado. */
.tienda-cupon {
    max-width: 320px;
}

/* Aviso con ícono + texto en lugar de una caja .alert de color (C-15 A). */
.tienda-aviso-icono {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.tienda-aviso-icono .sb-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 0.1rem;
    color: var(--sb-azul);
}

.tienda-aviso-icono.text-success .sb-icon {
    color: inherit;
}

/* Lupa de consulta NIT/CUI dentro del input-group. */
#taxIdLookupBtn .sb-icon {
    width: 16px;
    height: 16px;
}

/* Vacío del carrito: ícono grande del kit. */
.tienda-vacio > .sb-icon {
    width: 48px;
    height: 48px;
    color: var(--sb-secundario);
}

/* Resumen corto fijo al hacer scroll (C-71 B), como la columna derecha de la plantilla. */
@media (min-width: 992px) {
    .tienda-resumen-fijo {
        position: sticky;
        top: 1rem;
    }
}

/* ============================================================
   Revisión de compra y pedido realizado (Cart/Confirm, ficha 2026-10-22)
   ============================================================ */

/* Estado de la factura FEL en vivo: ícono/spinner + texto, sin caja de color. */
.tienda-fel-estado {
    border: 1px solid var(--sb-borde);
    border-radius: var(--sb-radio);
    padding: 0.85rem 1rem;
}

/* Guía de 4 pasos para registrar el comprobante (modal). */
.tienda-guia-pasos {
    padding-left: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.tienda-guia-pasos li::marker {
    font-weight: 700;
    color: var(--sb-naranja-oscuro);
}

/* ============================================================
   Pago con tarjeta (Checkout/Index, ficha 2026-10-22)
   ============================================================ */

/* Bloque "¿Con qué programa de cuotas…?" (antes border + rounded-4 en línea). */
.tienda-bloque-cuotas {
    border: 1px solid var(--sb-borde);
    border-radius: var(--sb-radio);
    padding: 1rem;
}

@media (min-width: 768px) {
    .tienda-bloque-cuotas {
        padding: 1.5rem;
    }
}

/* Cuotas BAC / NeoCuotas: mismo look que .sb-tarjeta-opcion del kit (borde
   naranja al elegir). Son <button> que el JS marca con .active; el círculo
   .choice-radio lo dibuja el CSS (antes Bootstrap Icons bi-circle / bi-check-circle-fill). */
.issuer-choice {
    background-color: var(--sb-superficie);
    border: 1px solid var(--sb-borde-fuerte) !important;
    border-radius: var(--sb-radio) !important;
    color: inherit !important;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.issuer-choice:hover,
.issuer-choice:focus {
    background-color: var(--sb-superficie) !important;
    border-color: var(--sb-naranja) !important;
    color: inherit !important;
}

.issuer-choice.active {
    background-color: rgba(254, 129, 0, 0.05) !important;
    border-color: var(--sb-naranja) !important;
    color: inherit !important;
}

.issuer-choice .choice-radio {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--sb-borde-fuerte);
    border-radius: 50%;
}

.issuer-choice.active .choice-radio {
    border-color: var(--sb-naranja);
    background: radial-gradient(circle, var(--sb-naranja) 0 45%, transparent 50%);
}

/* Aviso 3D Secure: escudo en verde. */
.tienda-aviso-pago-3ds .sb-icon {
    width: 24px;
    height: 24px;
    color: #0f5132;
}

/* Pedido confirmado con NeoLink (Checkout/Success): ícono de envío en azul de marca. */
.tienda-vacio > .sb-icon.tienda-icono-azul {
    color: var(--sb-azul);
}

/* ============================================================
   Cuenta (ficha 2026-10-22): texto de políticas con formato del Admin
   (antes en un <style> de AcceptPolicies/Register).
   ============================================================ */
.tienda-politica-caja {
    border: 1px solid var(--sb-borde);
    border-radius: var(--sb-radio);
    background-color: var(--sb-fondo);
    padding: 1rem;
    max-height: 380px;
    overflow-y: auto;
}

.policy-content h1,
.policy-content h2,
.policy-content h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.policy-content p {
    margin-bottom: 0.5rem;
}

.policy-content ul,
.policy-content ol {
    padding-left: 1.25rem;
    margin-bottom: 0.75rem;
}

.policy-content blockquote {
    border-left: 3px solid var(--sb-naranja);
    padding: 0.25rem 0.75rem;
    margin: 0.5rem 0;
    background: rgba(254, 129, 0, 0.05);
}

/* Favoritos (C-06 B): enlace del detalle (.tienda-favoritos-link del kit) — corazón relleno al estar en favoritos. */
.tienda-favoritos-link {
    color: var(--sb-azul);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
}

.tienda-favoritos-link.activo .sb-icon {
    color: var(--sb-naranja);
    fill: var(--sb-naranja);
}

/* Panel de categorías del catálogo (A-09): a una columna (celular) el flyout se saldría
   de la pantalla; ahí las subcategorías se ven en las tiles de arriba al tocar la categoría. */
@media (max-width: 767.98px) {
    .tienda-catalogo-categorias .tienda-categoria-flyout,
    .tienda-catalogo-categorias .nav-link > .sb-icon:not(.tienda-icono-categoria) {
        display: none;
    }
}

/* Franja de marcas con logos (A-08): el kit la tiene con texto + ícono; aquí son los
   logos del Admin. En una sola fila; si no caben, se desplaza hacia los lados. */
.tienda-marcas.tienda-marcas-logos {
    background-color: var(--sb-superficie);
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    gap: 2rem;
    padding: 1rem 1.5rem;
    scrollbar-width: thin;
}

.tienda-marcas-logos .tienda-marcas-item {
    flex: 0 0 auto;
    margin: 0 auto;
}

.tienda-marcas-logos .tienda-marcas-item img {
    height: 48px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
}

/* Banner Vitrina (Ficha 1): imagen fija a la izquierda de las pestañas, misma altura
   que la grilla de productos, recortada sin deformarse. */
.tienda-vitrina-imagen {
    display: block;
    position: relative;
    min-height: 240px;
    border-radius: var(--sb-radio);
    overflow: hidden;
}

/* Absoluta: la imagen no decide la altura de la fila (la decide la grilla). */
.tienda-vitrina-imagen img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.tienda-vitrina-imagen:hover img {
    transform: scale(1.03);
}

.tienda-vitrina .tienda-titulo-seccion {
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Ícono de bolsa en "Agregar al carrito" (Ficha 5): mismo ícono que el carrito del header. */
.btn .sb-icon.tienda-icono-boton {
    width: 20px;
    height: 20px;
    margin-right: 0.4rem;
    vertical-align: -4px;
}

/* Medios de pago en el pie del footer (A-06): logos sobre fondo blanco para que se
   lean sobre el azul del footer; misma altura todos. */
.tienda-pagos-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.tienda-pagos-logos img {
    height: 32px;
    width: auto;
    padding: 0.2rem 0.4rem;
    background-color: #fff;
    border-radius: 0.4rem;
    object-fit: contain;
}

/* Mensaje de error debajo del campo (B-09, js/validacion-formularios.js). Mismo aspecto
   que los <span asp-validation-for class="text-danger small">. */
.tienda-error-campo {
    font-size: 0.875em;
    margin-top: 0.25rem;
}

.tienda-error-campo:empty {
    display: none;
}

/* Vitrina en el celular (2 columnas): los espacios vacíos no hacen falta, el banner va arriba. */
@media (max-width: 767.98px) {
    .tienda-vitrina-espacio {
        display: none;
    }
}

/* "Categorías populares": ícono del Admin dentro del círculo del kit (mismo tamaño que el
   ícono de la plantilla, sin el margen del panel) y la cantidad de productos con el estilo
   de los subenlaces cuando la categoría no tiene subcategorías. */
.tienda-categoria-icono .sb-icon.tienda-icono-categoria {
    width: 30px;
    height: 30px;
    margin: 0;
    vertical-align: 0;
    color: var(--sb-marron);
}

.tienda-categoria-conteo {
    color: var(--sb-secundario);
    font-size: 0.78rem;
}

/* ====== Acciones rápidas de la tarjeta de producto (ajuste 2026-10-22) ======
   _TarjetaProducto: 🛍 agregar, ♡ favorito, 🔍 ver detalle. Con el puntero sobre el
   producto entran de derecha a izquierda (uno tras otro) y se quedan mientras siga ahí.
   En pantallas táctiles (sin puntero) se ven siempre. */
.tienda-producto-wrap {
    position: relative;
    height: 100%;
}

/* El realce de la tarjeta se mantiene aunque el puntero esté sobre los botones. */
.tienda-producto-wrap:hover .sb-producto-card {
    border-color: var(--sb-borde-fuerte);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.06);
}

.tienda-producto-acciones {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    pointer-events: none;
}

.tienda-accion-rapida {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--sb-borde);
    border-radius: 50%;
    background-color: var(--sb-superficie);
    color: var(--sb-texto);
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.12);
    opacity: 0;
    transform: translateX(16px);
    transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.15s ease, color 0.15s ease;
    /* Ocultos no reciben clics: ahí la imagen sigue llevando al detalle. */
    pointer-events: none;
}

.tienda-accion-rapida:nth-child(2) { transition-delay: 0.05s; }
.tienda-accion-rapida:nth-child(3) { transition-delay: 0.1s; }

.tienda-producto-wrap:hover .tienda-accion-rapida,
.tienda-producto-wrap:focus-within .tienda-accion-rapida {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.tienda-accion-rapida .sb-icon {
    width: 18px;
    height: 18px;
}

.tienda-accion-rapida:hover,
.tienda-accion-rapida:focus-visible {
    background-color: var(--sb-naranja);
    border-color: var(--sb-naranja);
    color: #fff;
}

/* Favorito marcado: corazón relleno en naranja (como en el detalle). */
.tienda-accion-rapida.activo {
    color: var(--sb-naranja);
}

.tienda-accion-rapida.activo .sb-icon {
    fill: currentColor;
}

.tienda-accion-rapida.activo:hover .sb-icon {
    fill: #fff;
}

.tienda-accion-rapida.agregado {
    background-color: var(--bs-success, #198754);
    border-color: var(--bs-success, #198754);
    color: #fff;
}

/* Sin puntero (celular/tablet): siempre visibles y clicables, un poco más chicas. */
@media (hover: none) {
    .tienda-accion-rapida {
        opacity: 1;
        transform: none;
        pointer-events: auto;
        width: 32px;
        height: 32px;
    }
}

/* Bolsa "agregar al carrito" (ajuste 2026-10-22): en la esquina inferior derecha de la
   tarjeta, blanca como los demás botones; entra deslizándose de derecha a izquierda al pasar
   el puntero por el producto (como ♡ y 🔍) y se pone azul al pasar el puntero sobre ella. */
.tienda-accion-rapida.tienda-accion-carrito {
    position: absolute;
    z-index: 2;
    right: 0.75rem;
    bottom: 0.75rem;
    width: 40px;
    height: 40px;
    transition-delay: 0s;
}

.tienda-accion-rapida.tienda-accion-carrito .sb-icon {
    width: 20px;
    height: 20px;
}

.tienda-accion-rapida.tienda-accion-carrito:hover,
.tienda-accion-rapida.tienda-accion-carrito:focus-visible {
    background-color: var(--sb-azul);
    border-color: var(--sb-azul);
    color: #fff;
    transform: translateX(0) scale(1.08);
}

.tienda-accion-rapida.tienda-accion-carrito.agregado {
    background-color: var(--bs-success, #198754);
    border-color: var(--bs-success, #198754);
}

@media (hover: none) {
    .tienda-accion-rapida.tienda-accion-carrito {
        width: 40px;
        height: 40px;
    }
}

/* Tarjetas del mismo alto (ajuste 2026-10-22): el nombre siempre ocupa 2 líneas (el kit
   ya lo corta a 2), así un nombre corto no hace la tarjeta más baja. */
.sb-producto-card .sb-producto-nombre {
    line-height: 1.4;
    min-height: calc(2 * 1.4em);
}

/* ====== Catálogo (ajuste 2026-10-22) ======
   Ícono de etiqueta en las marcas del panel (como la plantilla) y dos grupos de tarjetas
   pequeñas arriba de los productos: subcategorías y logos de marcas. */
.tienda-filtro-marcas .tienda-icono-etiqueta {
    width: 16px;
    height: 16px;
    margin-right: 0.3rem;
    vertical-align: -3px;
    color: var(--sb-secundario);
}

.tienda-catalogo-grupo {
    margin-bottom: 1.25rem;
}

.tienda-catalogo-grupo-titulo {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--sb-secundario);
    margin-bottom: 0.6rem;
}

.tienda-catalogo-tarjetas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.tienda-catalogo-tarjeta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 120px;
    min-height: 72px;
    padding: 0.6rem;
    background-color: var(--sb-superficie);
    border: 1px solid var(--sb-borde);
    border-radius: var(--sb-radio);
    color: var(--sb-texto);
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tienda-catalogo-tarjeta img {
    max-width: 100%;
    max-height: 40px;
    object-fit: contain;
}

.tienda-catalogo-tarjeta.marca img {
    max-height: 48px;
}

.tienda-catalogo-tarjeta:hover {
    border-color: var(--sb-borde-fuerte);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.06);
    color: var(--sb-naranja-oscuro);
}

/* Marca elegida en el filtro: borde naranja, como la opción elegida del kit. */
.tienda-catalogo-tarjeta.activa {
    border-color: var(--sb-naranja);
    box-shadow: 0 0 0 2px rgba(254, 129, 0, 0.25);
}

@media (max-width: 575.98px) {
    .tienda-catalogo-tarjeta {
        width: calc(33.333% - 0.5rem);
    }
}

/* Panel de categorías del catálogo con scroll (ajuste 2026-10-22): "Todas" + 6 categorías
   visibles (alto fijado por JS en Store/Index) y el resto con un scroll fino y discreto.
   El flyout se ancla al panel (fuera de la lista con scroll) para que no se recorte; el JS
   le da la altura de la categoría bajo el puntero. */
.tienda-catalogo-categorias.con-scroll {
    position: relative;
}

.tienda-catalogo-categorias.con-scroll .nav {
    flex-wrap: nowrap;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--sb-borde-fuerte) transparent;
}

.tienda-catalogo-categorias.con-scroll .nav::-webkit-scrollbar {
    width: 4px;
}

.tienda-catalogo-categorias.con-scroll .nav::-webkit-scrollbar-thumb {
    background-color: var(--sb-borde-fuerte);
    border-radius: 4px;
}

.tienda-catalogo-categorias.con-scroll li {
    position: static;
}

/* La última visible ya no es la última de la lista: conserva su borde inferior. */
.tienda-catalogo-categorias.con-scroll li:last-child .nav-link {
    border-radius: 0;
}

/* Mis favoritos en tabla (ajuste 2026-10-22): el ✓ que pone "Agregar al carrito" al agregar
   va al tamaño del texto del botón; el nombre no se corta a 2 líneas en la tabla. */
.tienda-tabla-favoritos .btn .sb-icon {
    width: 16px;
    height: 16px;
}

.tienda-tabla-favoritos .sb-producto-nombre {
    min-height: 0;
    color: var(--sb-texto);
}

.tienda-tabla-favoritos .tienda-disponibilidad {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* Cupón aplicado: "Aplicar cupón" se oculta y el campo queda solo en el grupo; se le
   devuelven las esquinas derechas (Bootstrap las quita porque no es el último hijo). */
/* !important: la regla de Bootstrap (.input-group > :not(:last-child)...) es más específica. */
.tienda-cupon > .form-control:has(+ .btn.d-none) {
    border-top-right-radius: var(--bs-border-radius) !important;
    border-bottom-right-radius: var(--bs-border-radius) !important;
}

/* "Powered by Mycenternet" (2026-10-22): discreto y centrado al pie del footer. */
.tienda-footer-credito {
    margin: 1rem 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    opacity: 0.7;
}

.tienda-footer-credito img {
    border-radius: 0.25rem;
}

/* Sellos de compra segura en el footer (2026-10-22): franja centrada entre las columnas y la
   línea final; cada logo sobre fondo blanco, misma altura. */
.tienda-sellos {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}

.tienda-sellos-titulo {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.85;
}

.tienda-sellos-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
}

.tienda-sellos-logos img {
    height: 44px;
    width: auto;
    max-width: 120px;
    padding: 0.25rem 0.5rem;
    background-color: #fff;
    border-radius: 0.4rem;
    object-fit: contain;
}