/*
    CSS DE CUSTOMIZACIÓN PARA https://www.ivsadesign.com

    MANUAL DE REFERENCIA CSS NUBIXSTORE
    https://cdn.nubixstore.ar/ns_css_manual.txt

    PLANTILLA ASIGNADA: CARTZILLA
    https://cartzilla.createx.studio/
    COLORES UTILIZADOS:

    Colores primarios
    Blanco: #
    Gris oscuro: #2d353c
*/


/* SETTINGS GENERALES DE LA TIENDA */

/* Links */
a { color: #484848; }
a:hover { color: #666; }

/* Backgrounds */
.bg-dark {background-color: #2d353c !important;}
.bg-darker {background-color: #101820 !important;}

.bg-custom,
.bg-gray { background-color: #ebebeb!important}

.product-card .fs-sm {font-size: 1rem !important;}
.ns-item-list-brand-name {display: none !important;}
.ns-item-brand-link {display: none !important;}

/* Boton primario */
.btn-primary { background: none; color: #666!important; border-color: #000 }
.btn-primary:hover {border-color: #666; color: #fff!important; background-color: #666;}

.btn-outline-primary { color: #2d353c!important; border-color: #2d353c!important;}
.btn-outline-primary:hover {
    background-color: #7c8186!important;
    border: 1px solid #7c8186!important;
}

.ns-price { color: #111; }
.ns-off-price { color: #000 }

.ns-brand-marquee .border { border: 0 !important; }

/* CARRITO */

.steps-dark .step-item.active .step-count,
.steps-dark .step-item.active .step-progress {background-color:#000}

/* CARRITO Y CHECKOUT */

.steps-dark .step-item.active .step-count,
.steps-dark .step-item.active .step-progress {background-color:#000 }

/* SIDEBAR ( Widgets) */

.widget .widget-filter-item a { color: #333; }

.widget .widget-filter-item a:hover,
.widget .widget-filter-item a.current { color: #000; }

.widget-categories .accordion-header a { color: #9F6000!important; }


/* HEADER */

header { color: #fff }
header .bg-darker { background: #222!important; }
#ns-header .bg-light { background: #222!important; }

header .btn-outline-primary {
    background-color: #7c8186 !important;
    border: 1px solid #7c8186 !important;
}

/* HEADER:topbar */

header .topbar i,
header .topbar a { color: #fff!important; }

header .topbar a:hover { color: #9F6000!important }

.is-mobile .topbar-text { font-size: 10px }

/* HEADER:Logo 
.ns-logo-store{ width: 200px; }
.ns-mobile-logo-store { width: 125px; padding:0;margin:0 }
*/

#ns-cart .navbar-tool-icon { color: #222 }

.is-mobile header .ci-user,
.is-mobile header .ci-search { color: #ededed }

.is-desktop .navbar-tool-icon-box,
.is-desktop .navbar-tool-text { color: #ededed!important }

.is-desktop .navbar-tool-text:hover { color: #9F6000!important; }

/* HEADER:Carrito */
.navbar-tool-label { background: #9F6000!important; }

.widget-product-title:hover a { color: #9F6000!important }

/* HEADER:Search */
#ns-search-mobile-form,
#ns-search-form { width:inherit }

#ns-search-mobile-form button,
#ns-search-form button { border: 0; background: none; }

/* HEADER:Menu */

.is-desktop .navbar-nav > .nav-item > a { color: #fff!important }
.navbar-nav a:hover { color: #9F6000!important }


/* HEADER:Modal Login / Register */

.modal-header .nav-link.active { color: #9F6000!important; }

/************* ALINEACION SUB-MENU *******************/

.ns-cart-select-txt-option {
    font-size: 11px
}

/* HOME > CALECITA DE MARCAS */
.ns-brand-marquee a:hover img { border-color: #444!important }


/*
 PAGE TITLE + BREADCRUMB
 .is-store-item
 */

.breadcrumb-item+.breadcrumb-item::before,
.breadcrumb-item a { color: #666!important; }

.page-title-overlap { background: none; }
.page-title-overlap h1 { color: #222 }


/* REVIEWS */

#ns-reviews-carousel footer { line-height: 1em }

#ns-reviews-carousel .card-body { min-height:360px }
.is-mobile #ns-reviews-carousel .card-body { min-height:285px }

#ns-reviews-carousel .card-body .btn-primary { position: absolute; bottom: 0}
#ns-reviews-carousel img { border: 2px solid #e9e9ea; }

/* CUCARDAS */
.ns-badge-off { font-weight:bold; background: #000; }

/* BANNERS */

.ns-banner { padding: 4px!important; margin: 0 }

.ns-banner-video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio (9/16 = 0.5625) */
    height: 0;
    overflow: hidden;
    margin-bottom: 5px;
}

.ns-banner-video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.ns-item-video-container iframe { height: 500px }
.is-mobile .ns-item-video-container iframe { height: 300px }

#ns-banners-footer i { color:#9F6000!important; }


/* ITEM LIST - LISTADO DE PRODUCTOS */

.ns-item-list-title { line-height: 1.2em; min-height: 2.4em; }

.ns-item-list .star-rating { margin: 0; padding:0}

.ci-star-half,
.ci-star-filled { color: #000!important; }

.ns-free-shipping { background-color: #04a752; color: #fff }
.ns-item-list .ns-free-shipping { font-weight:bold; position: relative; float: right; margin-top:-25px!important; margin-bottom: 10px!important;}


/* ITEM VIEW - FICHA PRODUCTO */

.ns-item-title { font-size: 32px }
.is-mobile .ns-item-title { font-size: 26px }

.ns-item-link { color: #000 }
.ns-item-link:hover { color: #222}

.ns-item-description { width: 90%; margin:0;padding:0 }
.ns-item-description ul { margin-left: 50px }

#ns-add-to-cart-btn { background: #000; border-color:#000; color: #fff!important;}
#ns-add-to-cart-btn:hover { background: #9F6000; border-color:#9F6000; }

/* ITEM VIEW - PREVIEW GALERIA IMAGENES VERITCALES */

.is-desktop .product-gallery-thumblist {
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;

    /* Scroll a la izquierda */
    direction: rtl;

    /* Estética del scroll */
    scrollbar-width: thin;
    scrollbar-color: #bbb transparent;
}

.product-gallery-thumblist-item { border: none }

.is-desktop .product-gallery-thumblist::-webkit-scrollbar {
    width: 4px;
}
.is-desktop .product-gallery-thumblist::-webkit-scrollbar-track {
    background: transparent;
}
.is-desktop .product-gallery-thumblist::-webkit-scrollbar-thumb {
    background-color: #bbb;
    border-radius: 2px;
}
.is-desktop .product-gallery-thumblist::-webkit-scrollbar-thumb:hover {
    background-color: #999;
}

/* Restaura dirección natural a los ítems */
.is-desktop .product-gallery-thumblist > * {
    direction: ltr;
}

/* ITEM VIEW - VIDEO GALLERY */
.ns-item-video-gallery {
    display: flex;
    justify-content: center;  /* Centra horizontalmente */
    align-items: center;      /* Centra verticalmente */
    text-align: center;
}

.ns-item-video-gallery iframe { min-height:500px }

/**********************************************************
  SLIDE Cartzilla v1 - Agosto 2025
  Autor: Martin Carrillo
  Primera versión: 2025-07-29
  Última modificación: 2025-07-29
************************************************************/

.ns-slide {
    padding: 0 !important;
    margin: 0 !important;
}

/* Título del slide */
.ns-slide .ns-slide-item h2 {
    color: #fff !important;
    font-size: 48px !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

/* Bajada del slide */
.ns-slide .ns-slide-item p {
    color: #fff !important;
    font-size: 36px !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.ns-slide .btn {
    margin-right: 1rem;
    font-size: 24px !important;
    padding: 0.75rem 2rem;
    line-height: 1.2;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* Mobile scaling */
@media (max-width: 768px) {
    .ns-slide .ns-slide-item h2 {
        font-size: 28px !important;
    }

    .ns-slide .ns-slide-item p {
        font-size: 20px !important;
    }

    .ns-slide .btn {
        font-size: 18px !important;
        padding: 0.5rem 1.5rem;
    }
}

.ns-slide .ns-slide-front-image {
    padding: 5px;
}

.ns-slide-item {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

/* Contenedor de título, bajada y botones */
.ns-slide-meta {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    pointer-events: none;
}

.ns-slide-meta > div {
    max-width: 42rem;
    pointer-events: all;
}

/* Configuración de colores botón 1 */
.ns-slide .btn.btn-primary {
    background-color: #9F6000!important;
    color: #fff  !important; /* Color principal */
    border: 1px solid #fff !important;
}

.ns-slide .btn.btn-primary:hover {
    background-color: #fff !important;
    color: #9F6000!important;
    border-color: #9F6000!important;
}

/* Configuración de colores botón 2 */
.ns-slide .btn.btn-secondary {
    background-color: #9F6000!important;
    color: #fff  !important; /* Color principal */
    border: 1px solid #fff !important;
}

.ns-slide .btn.btn-secondary:hover {
    background-color: #fff !important;
    color: #9F6000!important;
    border-color: #9F6000!important;
}

/* Zocalo HTML del slide */
.ns-slide-html a,
.ns-slide-html i { color: #9F6000!important; }

/************** FIN SLIDE CSS ************************/

/************** INICIO BANNERS CUSTOM ***************
  Banners custom - Diciembre 2025
  Autor: Martin Carrillo
  Primera versión: 2025-12-02
  Última modificación: 2025-12-02

Ejemplo de uso:

    <div class="ns-banner-custom">
        <a href="https://www.mercadolibre.com.ar" title="Comprar"><img src="http://localhost/garmont/img/banners/2025/11/file_banner_principal_1.webp" /></a>
        <div class="ns-banner-custom-content">
            <div class="ns-banner-custom-title">Texto principal del banner</div>
            <div class="ns-banner-custom-description">Bajada descritiva del banenr</div>
            <a class="ns-banner-custom-btn" href="https://www.mercadolibre.com.ar" title="Comprar">COMPRAR</a>
        </div>
    </div>

************************************************************/

.ns-banner-custom {
    position: relative;
    display: inline-block;      /* o block si querés que ocupe todo el ancho */
    overflow: hidden;
    cursor: pointer;
    border-radius: 35px; /* <<< Ajustá aquí tu radio */
}

/* Imagen base */
.ns-banner-custom img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: inherit; /* respeta el borde */
    transition: opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease;
}

/* Capa de contenido centrado */
.ns-banner-custom-content {
    position: absolute;
    inset: 0; /* top:0; right:0; bottom:0; left:0; */
    border-radius: inherit; /* <<< aplica el borde redondeado */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;

    /* fondo semitransparente encima de la imagen */
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
}

.ns-banner-custom-title {
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.ns-banner-custom-description {
    font-size: 1rem;
    margin-bottom: 15px;
    max-width: 80%;
}

/* Botón CTA */
.ns-banner-custom-btn {
    display: inline-block;
    padding: 10px 24px;
    border-radius: 999px;
    border: none;
    background: #9F6000;          /* cambiá al color de tu marca */
    color: #000;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.05em;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.ns-banner-custom-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.35);
    background: #9F6000;
    color: #fff;
}

/* Efecto hover: oscurecer imagen + mostrar contenido */
.ns-banner-custom:hover img {
    filter: brightness(0.4);
    transform: scale(1.02);
}

.ns-banner-custom:hover .ns-banner-custom-content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s; /* aparece inmediatamente */
}

.is-mobile .ns-banner-custom {
    cursor: default;
}

.is-mobile .ns-banner-custom img {
    filter: brightness(0.65);   /* oscurecido leve para que el texto destaque */
    transform: none !important;
}

.is-mobile .ns-banner-custom-content {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
    background: rgba(0, 0, 0, 0.35); /* un poco menos oscuro en mobile */
}


/************** FIN BANNERS CUSTOM ************************/


/* Elementos invisibles */

.ns-item-cft,
.ns-cyber-badge,
#ns-brand-marquee-c2a-btn,
.is-mobile #ns-contact-btn,
.accordion-button.leaf::after,
.ci-security-check { display:none!important; }