/* =============================================
   INDARGREEN — CSS PERSONALIZADO
   Optimizado para profesionales en obra (móvil)
   ============================================= */

:root {
  --ig-green: #2e7d32;
  --ig-green-light: #4caf50;
  --ig-green-dark: #1b5e20;
  --ig-gray: #37474f;
}

/* =====================
   GLOBAL
   ===================== */
a { color: var(--ig-green); }
a:hover { color: var(--ig-green-dark); }

.btn-primary, .btn-primary:focus,
.add-to-cart {
  background-color: var(--ig-green) !important;
  border-color: var(--ig-green-dark) !important;
}
.btn-primary:hover, .add-to-cart:hover {
  background-color: var(--ig-green-dark) !important;
}

.price {
  color: var(--ig-green-dark) !important;
  font-weight: 700;
}

/* =====================
   HEADER
   ===================== */
#header {
  background: #fff;
  border-bottom: 3px solid var(--ig-green);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

#header .logo img { max-height: 60px; }

.header-nav {
  background: var(--ig-green-dark);
  color: #fff;
}
.header-nav a { color: #fff !important; }

/* =====================
   MENÚ DESKTOP (≥992px)
   4+4 en dos filas, dropdown por hover
   ===================== */

#header #_desktop_top_menu {
  background-color: var(--ig-green-dark);
}

#_desktop_top_menu ul.top-menu[data-depth="0"] {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
  margin: 0; padding: 0;
  background-color: var(--ig-green-dark);
}

#_desktop_top_menu ul.top-menu[data-depth="0"] > li {
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

#_desktop_top_menu ul.top-menu[data-depth="0"] > li > a {
  display: block;
  padding: 11px 10px !important;
  color: #fff !important;
  font-weight: 600;
  font-size: 0.77rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,0.1);
}

#_desktop_top_menu ul.top-menu[data-depth="0"] > li:hover > a {
  background-color: var(--ig-green) !important;
}

/* Nivel 2: subfamilias */
#_desktop_top_menu ul.top-menu[data-depth="0"] > li > .sub-menu {
  display: none !important;
  position: absolute !important;
  top: 100%; left: 0;
  z-index: 9000;
  width: 220px;
  background: var(--ig-gray);
  border-top: 3px solid var(--ig-green);
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
  padding: 4px 0;
}

#_desktop_top_menu ul.top-menu[data-depth="0"] > li:nth-child(4n) > .sub-menu,
#_desktop_top_menu ul.top-menu[data-depth="0"] > li:nth-child(4n-1) > .sub-menu {
  left: auto; right: 0;
}

#_desktop_top_menu ul.top-menu[data-depth="0"] > li:hover > .sub-menu {
  display: block !important;
}

#_desktop_top_menu .sub-menu > ul[data-depth="1"] > li {
  position: relative;
}

#_desktop_top_menu .sub-menu > ul[data-depth="1"] > li > a {
  display: block;
  padding: 9px 16px !important;
  color: #ddd !important;
  font-size: 0.83rem;
  font-weight: 500;
  text-transform: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#_desktop_top_menu .sub-menu > ul[data-depth="1"] > li:hover > a {
  background-color: var(--ig-green) !important;
  color: #fff !important;
}

/* Nivel 3: subcategorías reales */
#_desktop_top_menu .sub-menu > ul[data-depth="1"] > li > .sub-menu {
  display: none !important;
  position: absolute !important;
  top: 0; left: 100%;
  z-index: 9001;
  width: 250px;
  max-height: 380px;
  overflow-y: auto;
  background: #fff;
  border-top: 3px solid var(--ig-green);
  box-shadow: 6px 6px 20px rgba(0,0,0,0.15);
  padding: 4px 0;
}

/* Si el nivel 2 está en la derecha, el nivel 3 abre a la izquierda */
#_desktop_top_menu ul.top-menu[data-depth="0"] > li:nth-child(4n) .sub-menu > ul[data-depth="1"] > li > .sub-menu,
#_desktop_top_menu ul.top-menu[data-depth="0"] > li:nth-child(4n-1) .sub-menu > ul[data-depth="1"] > li > .sub-menu {
  left: auto; right: 100%;
}

#_desktop_top_menu .sub-menu > ul[data-depth="1"] > li:hover > .sub-menu {
  display: block !important;
}

#_desktop_top_menu .sub-menu > ul[data-depth="1"] > li > .sub-menu a {
  display: block;
  padding: 8px 16px !important;
  color: var(--ig-gray) !important;
  font-size: 0.82rem;
  border-bottom: 1px solid #f0f0f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: none !important;
}

#_desktop_top_menu .sub-menu > ul[data-depth="1"] > li > .sub-menu a:hover {
  background: #f1f8f1;
  color: var(--ig-green) !important;
}

#_desktop_top_menu .sub-menu::-webkit-scrollbar { width: 4px; }
#_desktop_top_menu .sub-menu::-webkit-scrollbar-thumb { background: var(--ig-green-light); border-radius: 2px; }

#_desktop_top_menu .collapse-icons { display: none; }

/* =====================
   MENÚ MÓVIL (≤991px)
   ===================== */
@media (max-width: 991px) {

  /* Ocultar menú desktop */
  #_desktop_top_menu { display: none !important; }

  /* Mostrar menú móvil */
  #mobile_top_menu_wrapper { display: block !important; }

  /* Botón hamburguesa grande para dedos con guantes */
  #menu-icon {
    padding: 12px 16px;
    cursor: pointer;
  }
  #menu-icon .material-icons { font-size: 2rem; color: var(--ig-green-dark); }

  /* Menú móvil desplegable */
  #_mobile_top_menu {
    background: var(--ig-green-dark);
    padding: 0;
  }

  #_mobile_top_menu ul.top-menu {
    list-style: none;
    margin: 0; padding: 0;
  }

  #_mobile_top_menu ul.top-menu a {
    display: block;
    padding: 14px 20px !important;
    color: #fff !important;
    font-size: 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    font-weight: 500;
  }

  #_mobile_top_menu ul.top-menu[data-depth="1"] a {
    padding-left: 36px !important;
    font-size: 0.92rem;
    background: rgba(0,0,0,0.15);
    color: #ddd !important;
  }

  #_mobile_top_menu ul.top-menu[data-depth="2"] a {
    padding-left: 52px !important;
    font-size: 0.85rem;
    background: rgba(0,0,0,0.25);
    color: #ccc !important;
  }

  /* Flechas de expand */
  #_mobile_top_menu .navbar-toggler {
    float: right;
    padding: 14px 16px;
    color: #fff;
  }

  /* Logo en móvil más pequeño */
  #header .logo img { max-height: 45px; }

  /* Header compacto */
  .header-top { padding: 8px 0; }

  /* Barra de búsqueda — prominente en móvil */
  #search_widget {
    width: 100%;
    padding: 10px 16px;
    background: #f5f5f5;
    border-top: 1px solid #ddd;
  }

  #search_widget input[type=text] {
    width: 100%;
    height: 46px;
    font-size: 1rem;
    padding: 0 46px 0 16px;
    border: 2px solid var(--ig-green);
    border-radius: 4px;
  }
}

/* =====================
   COLUMNA IZQUIERDA — ELIMINADA
   ===================== */
#left-column { display: none !important; }

#content-wrapper, .js-content-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

/* =====================
   GRID PRODUCTOS
   ===================== */

/* Desktop: 4 columnas */
@media (min-width: 992px) {
  .products .js-product { flex: 0 0 25%; max-width: 25%; }
}

/* Tablet: 3 columnas */
@media (min-width: 576px) and (max-width: 991px) {
  .products .js-product { flex: 0 0 33.33%; max-width: 33.33%; }
}

/* Móvil: 2 columnas — el instalador puede ver 2 productos a la vez */
@media (max-width: 575px) {
  .products .js-product { flex: 0 0 50%; max-width: 50%; }
}

.product-miniature { margin-bottom: 16px; }

.product-miniature .card {
  border: 1px solid #e0e0e0;
  transition: box-shadow 0.2s;
  height: 100%;
}

.product-miniature .card:hover {
  box-shadow: 0 4px 16px rgba(46,125,50,0.15);
  border-color: var(--ig-green-light);
}

.product-miniature .card-img-top {
  height: 160px;
  object-fit: contain;
  padding: 8px;
  background: #fafafa;
}

.product-miniature .card-body { padding: 10px; }

.product-miniature h2.h3 {
  font-size: 0.80rem;
  line-height: 1.3;
  height: 2.6em;
  overflow: hidden;
  color: #333;
  margin-bottom: 6px;
}

.product-miniature .price {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ig-green-dark) !important;
}

/* Botón añadir al carrito — grande para móvil */
.add-to-cart {
  width: 100%;
  padding: 10px !important;
  font-size: 0.9rem !important;
}

/* =====================
   FICHA DE PRODUCTO — MÓVIL
   ===================== */
@media (max-width: 767px) {
  .product-cover img { width: 100%; }

  .product-prices .current-price {
    font-size: 1.8rem;
  }

  .product-add-to-cart .add-to-cart {
    width: 100%;
    padding: 16px !important;
    font-size: 1.1rem !important;
    margin-top: 12px;
  }

  /* Cantidad — input grande */
  .input-group .js-cart-line-product-quantity,
  .product-quantity input {
    height: 46px;
    font-size: 1.1rem;
    text-align: center;
  }
}

/* =====================
   FOOTER
   ===================== */
#footer {
  background: var(--ig-gray);
  color: #eee;
  border-top: 4px solid var(--ig-green);
}
#footer a { color: #ccc !important; }
#footer a:hover { color: var(--ig-green-light) !important; }
#footer .h3, #footer h3 {
  color: #fff;
  font-size: 1rem;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ig-green);
  padding-bottom: 8px;
}