/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */


/* =========================================================
   1) ANCHO COMPLETO (sin reventar tanto los containers)
   ========================================================= */

/* Full width SOLO para la zona de contenido principal */
body #wrapper .container,
body #main .container {
  max-width: 100% !important;
  width: 100% !important;
}

/* Quitar padding lateral de wrappers (si quieres “edge to edge”) */
#content,
#wrapper {
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* =========================================================
   2) HOME blanca igual que el header
   ========================================================= */

.page-index,
.page-index body,
.page-index #wrapper,
.page-index main,
.page-index .container {
  background-color: #ffffff !important;
}


/* =========================================================
   3) HOMEIMAGEBLOCK → GRID CENTRADO
   ========================================================= */

.page-index ul#homeimageblock {
  /* romper Masonry si lo hubiese */
  position: relative !important;
  width: 100% !important;
  max-width: none !important;     /* <<< CORREGIDO (antes tenías "auto", que es inválido) */
  height: auto !important;

  margin-left: auto !important;
  margin-right: auto !important;

  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;

  list-style: none;
  padding: 0;
}

/* Items */
.page-index ul#homeimageblock > li.item {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  left: auto !important;
  top: auto !important;
}

/* Imágenes */
.page-index ul#homeimageblock img {
  width: 100% !important;
  height: auto !important;
  display: block;
}

/* ===== TABLET ===== */
@media (max-width: 991px) {
  .page-index ul#homeimageblock {
    grid-template-columns: repeat(2, 1fr);
    max-width: 100% !important;
    padding: 0 16px;
  }
}

/* ===== MÓVIL ===== */
@media (max-width: 575px) {
  .page-index ul#homeimageblock {
    grid-template-columns: 1fr;
    padding: 0 12px;
  }
}


/* =========================================================
   4) MENÚ STICKY + DROPDOWN
   ========================================================= */

/* Sticky */
#header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #ffffff;
}

/* Menú principal */
#top-menu > li > a {
  padding: 14px 18px;
  font-weight: 600;
}

/* Dropdown */
#top-menu .dropdown-menu {
  border: none;
  border-radius: 6px;
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
  padding: 8px 0;
}

/* Items dropdown */
#top-menu .dropdown-item {
  padding: 10px 16px;
  font-size: 14px;
}

/* Hover */
#top-menu .dropdown-item:hover {
  background: #B3262E;
}

/* Submenús cerrados NO deben ocupar espacio. solucion al scroll blanco  */
#_desktop_top_menu .js-sub-menu.collapse:not(.show),
#_desktop_top_menu .popover.sub-menu.collapse:not(.show) {
  display: none !important;
}

/* Submenú debe flotar (no empuja el layout) */
#_desktop_top_menu .js-sub-menu,
#_desktop_top_menu .popover.sub-menu {
  position: absolute !important;
  top: 100%;
  left: 0;
  z-index: 9999;
}





/* =========================================================
   5) FICHA PRODUCTO: precio grande, colores, etc.
   ========================================================= */

/* Precio final */
#product .current-price .price,
#product .current-price span[content] {
  font-size: 2.3rem;
  font-weight: 800;
  color: #B3262E;
}

/* Badge descuento (texto visible) */
#product .discount-percentage,
#product .discount-amount {
  color: #fff;
  font-size: 1.5rem;
background: #B3262E;
}

/* Precio antiguo */
#product .regular-price {
  font-size: 2rem;
  opacity: .7;
}


/* =========================================================
   6) Fabricante antes del logo + logo más grande
   ========================================================= */

/* poner texto antes del logo en ficha producto */
.product-manufacturer::before {
  content: "Más productos de este fabricante o distribuidor:";
  font-weight: 400;
  margin-right: .2rem;
}

#product-details .product-manufacturer a {
  display: inline-block;
}

#product-details img.manufacturer-logo {
  transform: scale(1.6) !important;
  transform-origin: left center;
}

/* Dar espacio real para que el logo no se coma otros elementos */
#product-details .product-manufacturer {
  padding-left: 1.3rem;
  min-height: 70px;
  align-items: center;
}


/* =========================================================
   7) PRODUCTO: volver a contenedor tipo Classic
   (solo si lo quieres así; si no, puedes borrar este bloque)
   ========================================================= */

/* Evita desbordes raros (sobre todo con 100vw) */
html, body { overflow-x: clip; }

/* En la página de producto, vuelve a ancho tipo Classic */
body#product #wrapper .container,
body#product #main .container,
body#product #content-wrapper .container,
body#product .page-content > .container,
body#product .product-container > .container,
body#product section#main > .container {
  max-width: 1140px !important;  /* cambia a 1200/1320 si lo prefieres */
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
}

/* Por si tu regla global convirtió container en “fluid” */
body#product .container-fluid {
  max-width: 1140px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}