/* =========================================================
   HEADER / NAVBAR (2 NIVELES)
   ========================================================= */

/* Logo responsivo (escala de 64px a 96px según viewport) */
.navbar-brand .brand-logo {
    height: clamp(80px, 8vw, 120px);
    width: auto;
    object-fit: contain;
    display: block;
}

/* Alineación vertical del logo */
.navbar-brand {
    padding-top: .25rem;
    padding-bottom: .25rem;
    display: flex;
    align-items: center;
}

/* Acciones (carrito / WhatsApp / Admin) con salto en móvil si hace falta */
.action-bar {
    row-gap: .4rem;
}

/* Buscador ancho y cómodo (si envuelves el input en .gd-search) */
.gd-search {
    min-width: 260px;
}

    .gd-search .form-control {
        font-size: 1rem;
    }

    .gd-search .input-group-lg .form-control {
        padding-top: .6rem;
        padding-bottom: .6rem;
    }

/* Compactación en móviles: enlaces y botones del navbar */
@media (max-width: 575.98px) {
    .navbar .nav-link {
        padding: .375rem .5rem;
    }

    .navbar .btn {
        padding: .375rem .5rem;
        font-size: .875rem;
    }
}

/* Mejor cohesión del menú desplegable en navbar oscuro */
.navbar-dark .dropdown-menu {
    border-color: rgba(255,255,255,.15);
}

/* Si quieres forzar fondo del header oscuro sin clases de Bootstrap:
   .navbar { background: #111; } */

/* =========================================================
   BARRA DE CATEGORÍAS (NIVEL 2)
   ========================================================= */

/* Contenedor de la barra: sin “ascensor” lateral */
.gd-catnav {
    overflow: visible; /* Evita scroll externo */
    gap: .5rem;
}

    /* Estilo de los links de la barra */
    .gd-catnav .nav-link {
        white-space: nowrap;
        color: #fff;
        opacity: .8;
    }

        .gd-catnav .nav-link:hover {
            opacity: 1;
            text-decoration: underline;
        }

        /* Estado activo de pestaña */
        .gd-catnav .nav-link.active {
            opacity: 1 !important;
            font-weight: 600;
            border-bottom: 2px solid #fff;
        }

/* Menú de categorías: si hay muchas, el scroll es interno del dropdown */
.gd-cat-list {
    min-width: 280px;
    max-height: 70vh;
    overflow-y: auto;
}

/* Apariencia del dropdown oscuro */
.dropdown-menu-dark .dropdown-item {
    color: #fff;
}

    .dropdown-menu-dark .dropdown-item:hover {
        background: rgba(255,255,255,.08);
        color: #fff;
    }

/* Pestañas inline (accesos rápidos). Si no caben, scroll horizontal suave */
.gd-cat-inline {
    display: flex;
    flex-wrap: nowrap;
    gap: .25rem;
    overflow-x: auto;
    scrollbar-width: thin; /* Firefox */
}

    .gd-cat-inline::-webkit-scrollbar {
        height: 6px;
    }
    /* WebKit */
    .gd-cat-inline::-webkit-scrollbar-thumb {
        background: #555;
        border-radius: 4px;
    }

    .gd-cat-inline::-webkit-scrollbar-track {
        background: transparent;
    }

/* En pantallas chicas mostramos solo el dropdown; ocultamos pestañas inline */
@media (max-width: 767.98px) {
    .gd-cat-inline {
        display: none;
    }
}

/* =========================================================
   FOOTER OSCURO (3 COLUMNAS)
   ========================================================= */

.site-footer {
    background: #1f1f1f;
    color: #ddd;
}

    .site-footer .footer-title {
        color: #fff;
        font-weight: 600;
        margin-bottom: .5rem;
    }

    .site-footer a {
        color: #cfd3d8;
        text-decoration: none;
    }

        .site-footer a:hover {
            color: #fff;
            text-decoration: underline;
        }

/* Lista de contacto: ícono (emoji) + texto alineados */
.footer-list li {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .5rem;
}

/* Enlaces de la tercera columna */
.footer-links li {
    margin-bottom: .4rem;
}

/* Botones de redes circulares */
.site-footer .btn {
    --bs-btn-color: #fff;
    --bs-btn-border-color: rgba(255,255,255,.5);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #fff;
    width: 32px;
    height: 32px;
    padding: 0;
    line-height: 32px;
    text-align: center;
    font-weight: 600;
}

/* =========================================================
   TARJETAS DE PRODUCTO
   ========================================================= */

.product-card .product-thumb {
    position: relative;
    height: 220px; /* Alto base móvil */
    background: #f5f6f8;
    border-radius: .5rem .5rem 0 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 768px) {
    .product-card .product-thumb {
        height: 260px;
    }
    /* Tablet/desktop */
}

/* Imagen ajustada sin recorte + zoom suave en hover */
.product-card .product-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform .25s ease;
}

.product-card:hover .product-thumb img {
    transform: scale(1.05);
}

/* Título en una línea con elipsis */
.product-card .card-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* === TOAST estilo Gracia Divina === */
#toastCarrito.toast-cart {
    position: fixed;
    bottom: 15rem;
    right: 30rem;
    max-width: 520px;
    font-size: 1.05rem;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.45);
    padding: .75rem 1rem;
    z-index: 1055;
    /* 🎨 Colores inspirados en el logo */
    background-color: #111; /* negro profundo */
    color: #d4af37; /* dorado elegante */
    border: 1px solid #b08d2f; /* borde fino dorado */
}

    /* Imagen del producto dentro del toast */
    #toastCarrito.toast-cart .toast-img {
        width: 60px;
        height: 60px;
        object-fit: cover;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(212,175,55,0.3); /* brillo dorado suave */
    }

/* Cuerpo del mensaje */
#toastCarrito .toast-body {
    padding: 0.5rem 0.75rem;
}

/* Botón de cerrar */
#toastCarrito .btn-close {
    filter: invert(85%) sepia(70%) saturate(500%) hue-rotate(10deg);
    transform: scale(1.2);
}

/*estilo boton de llamar en el footer*/
.footer-tel {
    display: inline-block;
    padding: 2px 0;
    color: inherit;
    text-decoration: none;
}

    .footer-tel:hover {
        text-decoration: underline;
        opacity: 0.85;
    }