/** Shopify CDN: Minification failed

Line 117:1 Unexpected "{"
Line 488:16 Expected identifier but found "!"

**/
.product-item-v8 .add-to-cart,
.product-item-v8 .variant-product,
.product-item-v8 .info_bottom {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}


@media (min-width: 576px) and (max-width: 768px) {
    .product-item-v8 .add-to-cart,
    .product-item-v8 .variant-product,
    .product-item-v8 .info_bottom {
        display: block !important;
    }
}

/* Ocultar el login del header móvil */
a.tab_navar_right[href="#tab_account_mobile"] {
  display: none !important;
}




/* Ocultar ícono de cuenta del menú móvil */
.btn_account {
  display: none !important;
}


/* Ocultar botón de filtro */
a.filter {
  display: none !important;
}



/* ================================
   Estilos para la grilla de productos
   ================================ */

.product-item-v8 {
  text-align: center;
}

.product-item-v8 img {
  width: 100%;
  height: auto;
  max-width: 340px; /* tamaño base de escritorio */
  margin: 0 auto;
  display: block;
  transition: all 0.3s ease;
  object-fit: contain;
}

/* Ajuste para mantener alineación */
.collection_prod .col-md-4,
.collection_prod .col-lg-3,
.collection_prod .col-6 {
  display: flex;
  justify-content: center;
}






/* ===================================
   AJUSTE GENERAL DE PRODUCTOS
   =================================== */

.collection_prod img,
.product-item img,
.product-item-v8 img,
.grid__item img,
.card__media img {
  width: 100% !important;
  height: auto !important;
  max-width: 380px !important; /* tamaño en escritorio */
  margin: 0 auto !important;
  display: block !important;
  object-fit: contain !important;
  transition: all 0.3s ease;
}

/* centrado del contenedor */
.collection_prod .col-md-4,
.collection_prod .col-lg-3,
.collection_prod .col-6 {
  display: flex;
  justify-content: center;
}









/* FORZAR OVERRIDE final (coloca esto AL FINAL de custom-styles.css) */
body .collection_prod img,
body .product-item img,
body .product-item-v8 img,
body .grid__item img,
body .card__media img,
body a.engoj_find_img img,
 {
  max-width: none !important;
  width: 100% !important;
  height: 500px !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  margin: 0 auto !important;
  border-radius: 8px !important;
  transition: transform .25s ease !important;
}



.product-title .product-icon,
.title-product .product-icon {
  width: 28px !important;
  height: 28px !important;
  display: inline-block !important;
  vertical-align: middle !important;
  margin-left: 6px !important;
  object-fit: contain !important;
  position: relative !important;
  top: -2px !important; /* levanta un poco el icono para que no se corte */
}

/* Asegura que el contenedor no recorte el icono */
.title-product,
.product-title {
  overflow: visible !important;
  line-height: 1.4em !important;
  display: inline-flex !important;
  align-items: center !important;
}

@media (max-width: 768px) {
  .product-title .product-icon,
  .title-product .product-icon {
    width: 22px !important;
    height: 22px !important;
    top: -1px !important;
  }
}

@media (max-width: 768px){

/* Aumentar tamaño de imágenes en colección */
.collection-page-fullwidth .col-md-4 {
  flex: 0 0 100% !important; /* Hace las imágenes más anchas (2 por fila) */
  max-width: 100% !important;
}

.collection-page-fullwidth .img-product.relative img {
  width: 100% !important;
  height: 190px !important; /* ajusta a gusto: 500-700px */
  object-fit: cover !important;
  display: block !important;
  border-radius: 10px !important;
  margin: 0 auto !important;
}
}
















/* === Centrar botón SELECT OPTION === */
.info_bottom {
  text-align: center !important; /* centra el contenido dentro del li */
}

.info_bottom a.inline-block.icon-addcart.box-shadow {
  display: inline-block !important; /* se centra correctamente dentro del li */
  margin: 10px auto 0 auto !important; /* espacio arriba y centrado */
  background-color: #252A33 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 5px !important;
  padding: 10px 25px !important;
  text-align: center !important;
  box-shadow: none !important;
  transition: background-color 0.3s ease;
}

.info_bottom a.inline-block.icon-addcart.box-shadow:hover {
  background-color: #3a3f49 !important;
}




/* Solo aplicar en pantallas de escritorio */
@media screen and (min-width: 1025px) {
  /* Aumentar el tamaño de las imágenes de producto en la colección */
  .product-item-v8 .img-product img {
    max-width: none !important;
    width: 100% !important;  /* aumenta el tamaño relativo */
    transform: scale(1.15);
    object-fit: contain !important;
    transition: transform 0.3s ease;
  }
}








/* Oculta los botones que aparecen al hacer hover en los productos */
.product-icon-action {
  display: none !important;
}

/* Asegura que no se active ningún fondo o overlay negro al pasar el mouse */
.img-product::after,
.img-product .overlay,
.img-product:hover::after {
  background: none !important;
  opacity: 0 !important;
}

/* Evita que el hover cambie la imagen o genere efectos oscuros */
.img-product:hover img.img-product-hover {
  opacity: 0 !important;
  visibility: hidden !important;
}










/* ===== CENTRADO DEFINITIVO DE NOMBRE DE PRODUCTO - Pega al final del CSS ===== */

/* Contenedores de producto comunes: los hacemos columna y centrados */
[class*="product-item-"] .info-product,
[class*="product-item-"] .product-info,
.product-item .info-product,
.product-card__inner,
.grid-item,
.product-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;       /* centro horizontal */
  justify-content: flex-start !important;
  text-align: center !important;
  position: relative !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Neutralizar cualquier float o alineación que cause que el título se vaya a la izquierda */
[class*="product-item-"] .title-product,
.product-card__title,
.product-item__title,
.product-card__heading,
.grid-item .title,
.grid-item h2,
.grid-item h3 {
  float: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
  text-align: center !important;
  width: auto !important;
  max-width: 100% !important;
  
  box-sizing: border-box !important;
}

/* Si el título contiene el ícono (ej: <span class="icon">), lo mantenemos inline pero centrado */
[class*="product-item-"] .title-product > * ,
.product-card__title > * {
  display: inline-block !important;
  vertical-align: middle !important;
  text-align: center !important;
}

/* Forzar que el icono no empuje el texto: si está dentro del mismo contenedor lo separamos visualmente */
[class*="product-item-"] .title-product .icon,
.product-card__title .icon,
.product-card__badge,
.product-item .badge,
.icon-float {
  float: none !important;
  position: static !important;
  margin: 0 0 0 6px !important; /* separa el icono del texto sin desplazarlo */
}

/* Si el icono está fuera y flota a la derecha, lo sacamos del flujo */
[class*="product-item-"] .product-badge,
.product-item .badge,
.product-card__badge,
.quick-view,
.icon-float-right {
  position: absolute !important;
  right: 8px !important;
  top: 8px !important;
  transform: none !important;
  float: none !important;
}

/* Forzar el precio debajo y centrado */
[class*="product-item-"] .price-product,
.product-card__price,
.grid-item .price {
  display: block !important;
  text-align: center !important;
  margin: 6px 0 0 0 !important;
}





/* === AJUSTE MANUAL DE POSICIÓN DEL TÍTULO DE PRODUCTO === */
/* Aplica globalmente y también en el carrusel del home */
/* Ajusta el valor de margin-left si deseas más o menos desplazamiento */

[class*="product-item-"] .title-product,
.product-card__title,
.product-item__title,
.carrusel-productos .product-title {
  margin-left: 38px !important; /* ← AJUSTA AQUÍ el desplazamiento horizontal (por defecto: 20px a la derecha) */
}

/* --- Notas ---
   Si solo quieres aplicar el desplazamiento al carrusel del inicio, 
   puedes comentar las primeras tres líneas y dejar solo:
   .carrusel-productos .product-title { margin-left: 20px !important; }
*/







/* === ESTILO UNIFICADO Y BALANCEADO SOLO PARA PRODUCTOS RELACIONADOS === */
.related-product,
.related-products,
#shopify-section-product-template .related-product {
  text-align: center !important;
}

/* Solo afecta títulos dentro del carrusel de productos relacionados */
.related-product .product-title,
.related-products .product-title,
#shopify-section-product-template .related-product .product-title {
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
  text-align: center !important;
  float: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 8px !important;

  /* desplazamiento visual igual al resto de títulos */
  position: relative !important;
  left: 18px !important;
}

/* ícono dentro del título */
.related-product .product-title .icon,
.related-products .product-title .icon,
#shopify-section-product-template .related-product .product-title .icon {
  position: static !important;
  margin-left: 6px !important;
  float: none !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

/* centrar "VER ESTE PRODUCTO" */
.related-product a[href*="/products/"],
.related-products a[href*="/products/"],
#shopify-section-product-template .related-product a[href*="/products/"] {
  display: block !important;
  text-align: center !important;
  margin: 6px auto 0 !important;
  position: static !important;
  transform: none !important;
}













.thumbnail-gallery{
  display:flex;
  flex-direction: row;
  flex-wrap:wrap;
  gap:-10px; /* espaciado entre thumbs */
  
}
.thumbnail-item img{
  height: 60px;      /* ESTE es el tamaño – súbelo o bájalo */
 }






/* --- MOBILE --- */
@media (max-width: 768px){

 

  img#main-product-image{
    transform:scale(1.10) !important;  /* baja un poco la escala en mobile */
  }

  .thumbnail-item img{
    height: 45px !important;    /* miniaturas más pequeñas en movil */
  }

}




/* ---- Aumentar tamaño y peso del nombre y precio en listado de colección ---- */
.product-item-v8 .title-product,
.js_size_prod .title-product,
.product-item-v8 .title-product a,
.js_size_prod .title-product a {
  font-size: 28px !important;        /* tamaño del nombre: ajustar a gusto */
  font-weight: 300 !important;       /* más negrita */

}

/* Si tus títulos usan .des-font (lo que se ve en la captura) */
.product-item-v8 .des-font.title-product,
.js_size_prod .des-font.title-product {
  font-size: 20px !important;
}

/* ---- FORZAR tamaño del precio ---- */
.product-item-v8 .price-product.mb-0 .price,
.js_size_prod .price-product.mb-0 .price {
  font-family: neue-haas-grotesk-text, Neue Haas Grotesk, Arial, sans-serif !important;  
  font-size: 16px !important;   /* aumenta tamaño */
  font-weight: 400 !important;  /* más negrita */
  color: #777;  !important;    /* color negro o el que quieras */
  line-height: 1.2 !important;
  display: inline-block !important;
  text-align: center !important;
  margin-top: 5px !important;
}

/* por si hay spans internos adicionales */
.product-item-v8 .price-product.mb-0,
.js_size_prod .price-product.mb-0 {
  font-size: 18px !important;
  font-weight: 700 !important;
  text-align: center !important;
}





.prod_extended .arrows-product, .product_sidebar .arrows-product {
    position: relative;
    display: flex;
    padding: 20px 0 30px;
    display: none;
}




.prod_extended .content-page-detail .detail-info .btn-addwhlist, .product_sidebar .content-page-detail .detail-info .btn-addwhlist {
    transition: .3s;
    height: 40px;
    width: 40px;
    border: 1px solid #e9e9e9;
    border-radius: 50%;
    line-height: 40px;
    text-align: center;
    position: absolute;
    top: 0;
    right: 0;
    display: none;
    

}








.collection-sorting .dropdown .dropdown-toggle {
    border: 1px solid #252a33;
    color: #252a33;
    font-family: neue-haas-grotesk-text, Neue Haas Grotesk, Arial, sans-serif !important;  
    font-size: 15px;
    font-weight: 500;
    min-width: 5px;
    padding: 1px 1px;
    margin-left: 230px;
}





.breadcrumb_collection2 .bg-breadcrumb {
    background-size: cover;
    background-position: center;
    padding: 150px 0 130px;
    display: none;
}








/* 🔹 Reducir espacio entre los ítems del menú */
#header .menu ul {
  display: flex;
  flex-wrap: nowrap !important;
  justify-content: center; /* o space-between si prefieres que se distribuyan */
  align-items: center;
  gap: 12px; /* 🔸 antes estaba 25px — prueba 10px, 12px o el valor que prefieras */
  white-space: nowrap;
}

/* 🔹 Asegurar que los enlaces no tengan márgenes extra */
#header .menu ul li {
  margin: 0 !important;
  padding: 0 !important;
}






.tab-pd-details .tab_prod {
    border-bottom: none;
    padding: 25px 0;
    display: flex;
    display: none;
}