.title-font { font-family: 'Cinzel', serif; }
.text-gold { color: var(--gold-primary) !important; }


/* Header del Catálogo */
    .catalog-header {
        padding: 80px 0 0px;
        background: radial-gradient(circle at 50% 100%, #1a1b20 0%, var(--bg-deep) 70%);
        border-bottom: 1px solid rgba(255,255,255,0.02);
        text-align: center; position: relative;
        overflow: hidden;
    }
    .catalog-header::after {
        content: ''; position: absolute; bottom: -50px; left: 50%; transform: translateX(-50%);
        width: 60%; height: 100px; background: var(--gold-primary); filter: blur(150px); opacity: 0.1;
    }
    .search-box { position: relative; width: 100%; max-width: 600px; margin: 0 auto; z-index: 2; }
    .search-box input {
        width: 100%; background: rgba(255,255,255,0.03); border: 1px solid var(--gold-dim); border-radius: 30px;
        padding: 18px 50px 18px 25px; color: var(--text-main); font-size: 1.1rem;
        backdrop-filter: blur(10px); transition: var(--transition-smooth);
    }
    .search-box input:focus { outline: none; border-color: var(--gold-primary); background: rgba(255,255,255,0.05); box-shadow: 0 0 20px rgba(197, 160, 89, 0.15); }
    .search-box i { position: absolute; right: 25px; top: 50%; transform: translateY(-50%); color: var(--gold-primary); font-size: 1.2rem; }
    /* Sidebar Filtros Avanzados */
    .filter-section {
        background-color: transparent; padding-right: 20px;
    }
    .filter-block { margin-bottom: 30px; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 20px; }
    /* Acordeón Bootstrap Modificado para Lujo */
    .accordion-item { background-color: transparent; border: none; }
    .accordion-button {
        background-color: transparent !important; color: var(--text-main) !important;
        padding: 15px 0; font-family: 'Cinzel', serif; letter-spacing: 1px; font-size: 1rem;
        box-shadow: none !important; border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .accordion-button::after {
        filter: invert(1) grayscale(100%) brightness(200%); /* Flecha blanca */
        transition: var(--transition-smooth);
    }
    .accordion-button:not(.collapsed)::after { filter: invert(70%) sepia(50%) saturate(600%) hue-rotate(5deg); /* Flecha dorada */ }
    .accordion-button:not(.collapsed) { color: var(--gold-primary) !important; }
    .accordion-body { padding: 15px 0; }
    /* Checkboxes Personalizados de Lujo */
    .lux-checkbox-container {
        display: block; position: relative; padding-left: 35px; margin-bottom: 12px;
        cursor: pointer; font-size: 0.9rem; color: var(--text-muted); transition: var(--transition-smooth);
        user-select: none; font-weight: 300;
    }
    .lux-checkbox-container:hover { color: var(--text-main); }
    .lux-checkbox-container input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
    .checkmark {
        position: absolute; top: 0; left: 0; height: 18px; width: 18px;
        border: 1px solid #444; border-radius: 3px; transition: var(--transition-smooth);
        background-color: rgba(255,255,255,0.02);
    }
    .lux-checkbox-container:hover input ~ .checkmark { border-color: var(--gold-dim); }
    .lux-checkbox-container input:checked ~ .checkmark { background-color: var(--gold-primary); border-color: var(--gold-primary); }
    .checkmark:after {
        content: ""; position: absolute; display: none;
        left: 5px; top: 1px; width: 6px; height: 12px;
        border: solid var(--bg-deep); border-width: 0 2px 2px 0; transform: rotate(45deg);
    }
    .lux-checkbox-container input:checked ~ .checkmark:after { display: block; }
    .lux-checkbox-container input:checked ~ .label-text { color: var(--gold-primary); font-weight: 400; }
    /* Tags visuales para contar resultados */
    .filter-count { font-size: 0.7rem; background: rgba(255,255,255,0.05); padding: 2px 6px; border-radius: 10px; float: right; color: var(--text-muted); }
    /* Tarjetas de Producto */
    .product-card {
        background-color: var(--bg-surface); border: 1px solid rgba(255,255,255,0.03); border-radius: 12px;
        overflow: hidden; position: relative; transition: var(--transition-smooth); height: 100%;
        display: flex; flex-direction: column; cursor: pointer;
        opacity: 0; transform: translateY(20px); /* Para animación */
    }
    .product-card.show { opacity: 1; transform: translateY(0); } /* Clase que añade JS */
    .product-card:hover {
        border-color: var(--gold-dim); transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.8);
    }
    .product-img-wrapper {
        position: relative; width: 100%; height: 350px; overflow: hidden; background-color: #16171b;
        display: flex; align-items: center; justify-content: center; padding: 30px;
    }
    /* Destello detrás de la botella */
    .product-img-wrapper::before {
        content: ''; position: absolute; width: 150px; height: 150px;
        background: var(--gold-primary); filter: blur(80px); opacity: 0; transition: var(--transition-smooth);
        border-radius: 50%; z-index: 0;
    }
    .product-card:hover .product-img-wrapper::before { opacity: 0.15; }
    .product-img-wrapper img {
        position: relative; z-index: 1; max-height: 100%; max-width: 100%; object-fit: contain;
        transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); filter: drop-shadow(0 15px 25px rgba(0,0,0,0.6));
    }
    .product-card:hover .product-img-wrapper img { transform: scale(1.1) translateY(-10px); }
    .product-badge {
        position: absolute; top: 15px; right: 15px; background: rgba(197, 160, 89, 0.1); color: var(--gold-primary);
        border: 1px solid var(--gold-primary); backdrop-filter: blur(5px);
        font-size: 0.65rem; font-weight: 600; padding: 5px 12px; border-radius: 20px; text-transform: uppercase; letter-spacing: 1px; z-index: 2;
    }
    .product-info { padding: 30px 25px; text-align: center; flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; position: relative; z-index: 2; background: var(--bg-surface); }
    .product-category { font-size: 0.7rem; color: var(--gold-primary); text-transform: uppercase; letter-spacing: 3px; margin-bottom: 10px; display: block; font-weight: 500; }
    .product-title { font-family: 'Cinzel', serif; font-size: 1.3rem; color: var(--text-main); margin-bottom: 15px; line-height: 1.3; }
    .product-price { font-size: 1.3rem; font-weight: 400; color: var(--text-main); letter-spacing: 1px; }
    /* Botón Añadir Hover Elegante */
    .btn-add {
        position: absolute; bottom: -60px; left: 0; width: 100%; background: var(--gold-primary); color: var(--bg-deep);
        border: none; padding: 18px 0; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; font-size: 0.8rem;
        transition: var(--transition-smooth); cursor: pointer; z-index: 3;
    }
    .product-card:hover .btn-add { bottom: 0; }
    .product-card:hover .product-info { transform: translateY(-20px); }
    /* Controles superiores de grid */
    .sort-select {
        background-color: rgba(255,255,255,0.02); color: var(--text-main); border: 1px solid rgba(255,255,255,0.1);
        padding: 10px 20px; border-radius: 30px; cursor: pointer; outline: none; font-size: 0.9rem; transition: var(--transition-smooth);
    }
    .sort-select:hover { border-color: var(--gold-dim); }
    .sort-select option { background-color: var(--bg-dark); color: var(--text-main); }
    .btn-clear {
        background: transparent; border: 1px solid var(--gold-dim); color: var(--text-muted);
        padding: 8px 20px; border-radius: 20px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px;
        transition: var(--transition-smooth); cursor: pointer;
    }
    .btn-clear:hover { background: var(--gold-primary); color: var(--bg-deep); }
    /* Offcanvas Móvil */
    .offcanvas.offcanvas-start { background-color: var(--bg-dark); border-right: 1px solid var(--gold-dim); }
    .offcanvas-header .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
    @media (max-width: 991px) {
        .product-img-wrapper { height: 300px; }
        .btn-add { bottom: 0; position: relative; margin-top: 15px; background: transparent; border: 1px solid var(--gold-primary); color: var(--gold-primary); padding: 12px 0;}
        .product-card:hover .product-info { transform: none; }
    }



/*FILTROS MOVIL AND DESKSTOP------------------------------------------*/

    /* Botón de mostrar filtros en móvil */
    .filter-mobile-btn {
        position: fixed;
        top: 250px; /* Ajusta este valor si el navbar es más alto, puede ser 70px o más dependiendo de la altura del navbar */
        right: 10px;
        z-index: 1100;
    }

    .filter-mobile-btn button {
        font-size: 14px;           /* Letra un poco más pequeña */
        padding: 6px 10px;         /* Menos espacio interno */
        border-radius: 6px;        /* Opcional, para esquinas más redondeadas */
    }

    /* Estilo para los filtros móviles (lista de checkboxes) */
    .filter-mobile ul {
        list-style-type: none;
        padding-left: 0;
    }

    .filter-mobile ul li {
        margin-bottom: 15px;
    }

    #botonesFiltros {
    text-align: center;
    }

    .button_filter {
    background: #000000;
    font-size: 17px !important;
    border-radius: 4px;
    border: 1px solid;
    color: #FFFFFF;
    font: inherit;
    line-height: 1;
    /* margin: 0.5em; */
    padding: .6em .9em;
    }

    #cerrar-filters-container {
    background: #54555a;
    border: 1px solid;
    color: white;
    font: inherit;
    line-height: 1;
    /* margin: 0.5em; */
    padding: .6em .5em;
    position: fixed;
    bottom: 0px;
    width: 100%;
    }

    /* CONTENEDOR */
    .filter-sidebar{
        background: #0f0f0f;
        border: 1px solid rgba(212,175,55,.15);
        border-radius: 14px;
        padding: 20px;
        box-shadow: 0 10px 30px rgba(0,0,0,.4);
    }



    /* TITULO */
    .filter-header{
        color: #d4af37;
        font-family: 'Cinzel', serif;
        font-size: 1rem;
        letter-spacing: 3px;
        text-transform: uppercase;
        border-bottom: 1px solid rgba(212,175,55,.15);
        padding-bottom: 12px;
        margin-bottom: 20px;
    }

    /* DETAILS */
    .filter-group{
        margin-bottom: 15px;
    }

    .filter-group details{
        border-bottom: 1px solid rgba(255,255,255,.05);
        padding-bottom: 10px;
    }

    /* SUMMARY */
    .filter-group summary{
        list-style: none;
        cursor: pointer;
        color: #fff;
        font-weight: 500;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        transition: .3s;
    }

    .filter-group summary::-webkit-details-marker{
        display:none;
    }

    .filter-group summary:hover{
        color:#d4af37;
    }

    /* ICONO + */
    .filter-group summary i{
        color:#d4af37;
        font-size:.8rem;
    }

    /* ITEMS */
    .filter-item{
        color:#bdbdbd;
        font-size:.9rem;
        transition:.3s;
        cursor:pointer;
    }

    .filter-item:hover{
        color:#d4af37;
    }

    /* SUBCATEGORIAS */
    .filter-group ul{
        margin-top:8px;
    }

    /* CHECKBOX */
    .filter-sidebar input[type="checkbox"]{
        accent-color:#d4af37;
        cursor:pointer;
    }

    /* LABELS */
    .filter-content{
        margin-bottom:8px;
    }

    /* SCROLL */
    #bodyFiltros::-webkit-scrollbar{
        width:6px;
    }

    #bodyFiltros::-webkit-scrollbar-thumb{
        background:#d4af37;
        border-radius:10px;
    }
    @media (max-width: 360px) {
        .filter-mobile-btn {
            position: fixed;
            top: 260px; /* Ajusta este valor si el navbar es más alto, puede ser 70px o más dependiendo de la altura del navbar */
            right: 20px;
            z-index: 1100;
        }
    }

    @media (max-width: 360px) {
        .filter-mobile-btn button {
            font-size: 14px;           /* Letra un poco más pequeña */
            padding: 6px 8px;         /* Menos espacio interno */
            border-radius: 6px;        /* Opcional, para esquinas más redondeadas */
        }
    }

    @media (max-width: 767px) {
        #bodyFiltros {
            display: none;
        }

        #div-cars-container {
            display: none;
        }

        #bodyFiltros {
            width: 100%;
            height: 95%;
            z-index: 9999999;
            top: 3%;
            left: 0;
            position: fixed;
            background: black;
            padding: 10px;
        }

        .filter-sidebar{
            padding: 0px !important;
            border: none !important;
        }
    }


    .filter-item-categoria{
        display: inline-flex;
        align-items: center;
        gap: 8px;
        pointer-events: none;
    }

    .filter-item-categoria::after{
        content: "▾";
        font-size: 1.7rem;
        opacity: .6;
        line-height: 1;
    }


 /*****************************************CARDS**********************************************************************************************************************/
 /*  CARD DE PRODUCTO  */

    .long-find {
        margin: 0px 10px;
        width: 35%;
        justify-content: space-between;
    }

    .img-container {
        display: grid;
        grid-template-columns: repeat(5, 1fr); /* inicia con 5 columnas */
        justify-items: center;
        transition: all 0.3s ease-in-out;
        gap: 15px;
        width: 100%;
    }

    /* Cuando se quite cols5, muestra 7 columnas */
    .img-container:not(.cols5) {
        grid-template-columns: repeat(7, 1fr);
    }

    /*  CARD ITEM  */
    .card-item {
        border-radius: 12px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        background-color: #111111;
        border: 1px solid rgba(212,175,55,.15);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        transition: all 0.3s ease-in-out;
    }

    /* Estilo base: modo 5 columnas */
    .img-container.cols5 .card-item {
        width: 90%;
        margin: 10px;
        height: auto;
    }

    /* Modo 7 columnas */
    .img-container:not(.cols5) .card-item {
        width: 90%;
        height: auto;
        margin: 5px;
    }

    .card-item:hover {
        transform: scale(1.03);
    }

    /*  IMAGEN  */
    .card-item .card-img {
        height: 200px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #111111;
    }

    .card-item .card-img img {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
        transition: transform 0.3s ease;
    }

    /* 5 columnas */
    .img-container.cols5 .card-item .card-img {
        height: 150px;
    }
    .img-container.cols5 .card-item .card-img .mini-carousel {
        height: 180px;
    }

    /* 7 columnas */
    .img-container:not(.cols5) .card-item .card-img {
        height: 90px;
    }

    /* 5 columnas */
    .img-container.cols5 .card-item .card-img img {
        height: 100%;
    }

    /* 7 columnas */
    .img-container:not(.cols5) .card-item .card-img img {
        height: 100%;
    }

    /*  INFO  */
    .card-item .card-body {
        flex-grow: 1;
        transition: all 0.3s ease;
        background:#111111 !important;
    }

    /* 5 columnas */
    .img-container.cols5 .card-item .card-body {
        padding: 10px 12px;
        z-index: 1;
    }

    /* 7 columnas */
    .img-container:not(.cols5) .card-item .card-body {
        padding: 5px 12px;
        z-index: 1;
    }

    .card-item .clave {
        /*font-weight: bold;*/
        color: #9ca3af;
        transition: font-size 0.3s ease;
        justify-content: space-between;
    }

    /* 5 columnas */
    .img-container.cols5 .card-item .clave {
        font-size: 0.9rem;
    }

    /* 7 columnas */
    .img-container:not(.cols5) .card-item .clave {
        font-size: 0.7rem;
    }

    .card-item .descri a{
        margin-top: 6px;
        color: #ffffff;
        line-height: 1.2em;
        font-weight: bold;
        /*max-height: 2.4em;*/
        overflow: hidden;
        text-overflow: ellipsis;
        transition: font-size 0.3s ease;
        font-size: 0.95rem !important;
    }

    .card-item .descri a:hover{
        color: var(--gold-primary);
    }

    /* 5 columnas */
    .img-container.cols5 .card-item .descri {
        font-size: 0.95rem;
    }

    /* 7 columnas */
    .img-container:not(.cols5) .card-item .descri {
        font-size: 0.8rem;
    }

    /* Precio */
    .card-item .precio {
        margin-top: 8px;
        font-size: 1rem;
        color:#fff;
        font-weight: bold;
    }

    /* Tag */
    .card-item .tag {
        display: inline-block;
        margin-top: 6px;
        padding: 3px 10px;
        font-size: 0.70rem;
        font-weight: 600;
        border-radius: 999px;
        background: rgba(212,175,55,.12);
        color: #d4af37;
        border: 1px solid rgba(212,175,55,.2);
        letter-spacing: 1px;
        text-transform: uppercase;
        width: fit-content;
    }


/*  CONTROLES  */
    .card-controls {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px 18px;
        border-top: 1px solid rgba(255,255,255,.08);
        justify-content: space-between;
    }

    .qty-wrapper {
        display: flex;
        align-items: center;
        width: 70%;
        border-radius: 12px;
        overflow: hidden;
        background: #1a1a1a;
        border: 1px solid rgba(212,175,55,.15);
        height: 46px;
    }

    /* 5 columnas */
    .img-container.cols5 .card-controls {
        padding: 10px;
    }

    /* 7 columnas */
    .img-container:not(.cols5) .card-controls {
        padding: 5px;
    }

/*  BOTONES  */
    .btn-cant {
        width: 25%;
        height: 46px;
        background:#151515;
        color:var(--gold-primary);
        border:1px solid rgba(212,175,55,.15);
        font-size: 22px;
        font-weight: 600;
        cursor: pointer;
        transition: .2s ease;
        flex-shrink: 0;
    }

    .btn-cant:hover {
        background:rgba(212,175,55,.12);
        border-color:rgba(212,175,55,.35);
        color:#f0d38a;
    }

    .input-cant {
        width: 50%;
        height: 46px;
        text-align: center;
        font-size: 18px;
        font-weight: 600;
        outline: none;
        background:#111;
        color:white;
        border:none;
    }


    /* 5 columnas */
    .img-container.cols5 .input-cant {
        width: 40px;
    }

    /* 7 columnas */
    .img-container:not(.cols5) .input-cant {
        width: 35px;
    }

    /* Boton agregar al carrito */
        .btn-cart {
            height: 46px;
            width: 30%;
            border: none;
            border-radius: 12px;
            background: var(--gold-primary);
            color:#111;
            font-size: 16px;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            cursor: pointer;
            transition: .25s ease;
            padding: 0 18px;
        }

        .btn-cart i {
            font-size: 18px;
        }

        .btn-cart:hover {
            background:#e3c07a;
            transform: translateY(-1px);
        }

        .img-container:not(.cols5) .btn-cart {
            font-size:  1rem;
        }


/*  Mini carrucel  */
    .mini-carousel {
        position: relative;
        width: 100%;
        overflow: hidden;
        height: 100%;
    }

    .mini-carousel img {
        width: 100%;
        display: none;
        border-radius: 10px;
        transition: opacity 0.5s ease-in-out;
        opacity: 0;
    }

    .mini-carousel img.active {
        display: block;
        opacity: 1;
    }

    /*  FLECHAS  */
    .mini-carousel .nav-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(0,0,0,0.4);
        color: white;
        border: none;
        padding: 6px 10px;
        cursor: pointer;
        border-radius: 50%;
        font-size: 18px;
        z-index: 15;
        transition: background 0.2s;
    }

    .mini-carousel .nav-arrow:hover {
        background: rgba(0,0,0,0.7);
    }

    .mini-carousel .prev {
        left: 6px;
    }
    .mini-carousel .next {
        right: 6px;
    }


    /*Tamaño de flechas de carrucel cuando se muestran 7 columnas*/
    .img-container:not(.cols5) .mini-carousel .nav-arrow {
        font-size: 15px;
    }


/*  RESPONSIVE  CONTENIDO */
    @media (max-width: 1200px) {
        #divShowColums {
            display: none !important;
        }
        .menu{
            display: flex;
            overflow-x: auto;
        }
    }

    /* Reduce a 3 columnas */
    @media (max-width: 1024px) {
        .img-container {
            grid-template-columns: repeat(3, 1fr) !important;
        }

        .card-item .card-img {
            height: 150px !important;
        }

        .card-item .descri {
            font-size: 0.85rem !important;
        }
    }

    /* 2 columnas */
    @media (max-width: 768px) {
        .img-container {
            grid-template-columns: repeat(2, 1fr) !important;
            /*padding: 20px;*/
            /*max-height: 60vh !important;*/
            overflow-x: hidden !important;
        }
    }

    /* 1 columna */
    @media (max-width: 370px) {
        .img-container {
            grid-template-columns: repeat(1, 1fr) !important;
        }

        .card-item {
            margin: 0 auto 10px !important;
        }

        .card-item .card-img {
            height: 130px !important;
        }

        .card-item .descri {
            font-size: 0.8rem !important;
        }
    }

/* Marcar cards */
    .mark-card{
        border-left: solid 10px;
        border-left-color: #1d51a7;
    }


/* Sello de oferta */
    .promo-tag {
        position: relative;
        top: 0;
        left: 0;
        background: linear-gradient(90deg,rgba(212,175,55,.95),rgba(240,210,120,.95));
        color: rgb(107, 66, 0);
        font-weight: bold;
        font-size: 12px;
        padding: 8px 12px;
        border-radius: 12px 12px 24px 0;
        z-index: 5;
        width: 100%;
        min-height: 38px;
        display: flex;
        align-items: center;
        visibility: visible;
    }

    .promo-tag.hidden-promo {
        visibility: hidden;
    }

    .precio-descuento {
        text-decoration: line-through;
        color: #999;
    }

    .precio-promo {
        color: red;
        font-weight: bold;
        margin-left: 6px;
    }

    .hidden {
        display: none;
    }

/* Modal para mostrar imagenes */
    .img-modal{
        display:none;
        position:fixed;
        z-index:9999;
        inset:0;
        background:rgba(0,0,0,.85);
        justify-content:center;
        align-items:center;
    }

    .img-modal img{
        max-width:90%;
        max-height:90%;
        object-fit:contain;
        border-radius:10px;
    }

    .close-modal{
        position:absolute;
        top:20px;
        right:30px;
        color:#fff;
        font-size:40px;
        cursor:pointer;
    }

    .modal-arrow{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(0,0,0,0.5);
        color: #fff;
        border:none;
        font-size: 40px;
        padding: 10px 15px;
        cursor:pointer;
        border-radius:8px;
    }

    .modal-prev{ left: 20px; }
    .modal-next{ right: 20px; }

    .modal-arrow:hover{
        background: rgba(0,0,0,0.8);
    }


.btn_consultar {
    margin: 0px 10px;
}

.btn-disabled {
    opacity: .6;
    pointer-events: none;
    filter: grayscale(40%);
}

.stock{
    background:rgba(212,175,55,.1);
    color:#d4af37;
    border:1px solid rgba(212,175,55,.15);
    font-weight:600;
    font-size: 12px;
}

#chart {
    width: 100%;
    height: 100%;
}

.cart-row-desc p{
    font-size: 12px;
    color: #000000;
}

.ag-row.row-marcada {
    background-color: #b6d7a866 !important;
}

.btn-agregar i{
    color: #FFFFFF !important;
}

.ag-details-grid .ag-root-wrapper-body .ag-row{
    background-color: transparent;
}

.variant-select {
    width: 100%;
    height: 42px;
    border-radius: 12px;
    padding: 0 14px;
    background: #1a1a1a;
    color: #fff;
    border: 1px solid rgba(212,175,55,.2);
    font-size: 15px;
    font-weight: 600;
    outline: none;
    cursor: pointer;
    transition: .2s ease;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23d4af37' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 5.646a.5.5 0 0 1 .708 0L8 11.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");

    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;

    padding-right: 42px;
}

.variant-select:hover {
    border-color: var(--gold-primary);
}

.variant-select:focus {
    border-color: var(--gold-primary);
    box-shadow: 0 0 0 4px rgba(115, 137, 19, 0.12);
}


/************************************************************************************************************************************************************/
.fondo{
    background-color: #fff
}

/* --- GRID DE PRODUCTOS --- */
.search-bar-top {
    width: 100%;
    padding: 15px;
    border: 3px solid #000;
    font-weight: 900;
    margin-bottom: 20px;
    font-size: 1.1rem;
    outline: none;
    box-shadow: 6px 6px 0px #ffcc00;
}