/* === MENÚ PRODUCTES - REFINAT I RESPONSIVE (MÒBIL: NOMÉS 1r NIVELL) === */

#menuh{background:#eaeaea;height:38px;padding-top:1px}

nav.menu{
  background:#fff;
  font-family:Arial,sans-serif;
  border-bottom:1px solid #ccc;
  position:relative;
  z-index:1000;
}

nav.menu ul{
  list-style:none;
  margin:0 auto;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:0;
}

nav.menu>ul>li{position:relative}

nav.menu>ul>li>a{
  display:block;
  padding:10px;
  font-size:14px;
  font-weight:500;
  color:#444;
  text-decoration:none;
  transition:color .3s,background .3s;
}
nav.menu>ul>li>a:hover{background:red;color:#fff}

/* Submenús (desktop) */
nav.menu ul ul{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  background:#fff;
  min-width:230px;
  border:1px solid #ddd;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
  z-index:1000;
  flex-direction:column;
}
nav.menu>ul>li:hover>ul{display:flex}

/* 2n nivell (desktop) */
nav.menu ul ul li{position:relative}
nav.menu ul ul ul{
  top:0;
  left:100%;
  min-width:210px;
}
nav.menu ul ul li:hover>ul{display:flex}

/* Enllaços submenú (desktop) */
nav.menu ul ul li>a{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:50px;
  padding:8px 16px;
  font-size:15px;
  color:#555;
  text-decoration:none;
  transition:background .3s,color .3s;
}
nav.menu ul ul li>a:hover{background:#f2f2f2;color:#c00000}

/* submenu-2cols (desktop) */
nav.menu ul.submenu-2cols{
  display:none;
  width:560px;
  max-width:100vw;
  padding:10px;
  gap:6px 10px;
  grid-template-columns:1fr 1fr;
  background:#fff;
  border:1px solid #ddd;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}
nav.menu ul li:hover>ul.submenu-2cols{display:grid}

nav.menu ul.submenu-2cols a{
  gap:10px;
  padding:6px 8px;
  font-size:14px;
  line-height:1.2;
  overflow-wrap:anywhere;
}
nav.menu ul.submenu-2cols a:hover{background:#f5f5f5;color:#c00000}

/* imatges */
nav.menu img.menu-img{
  width:34px;
  height:34px;
  object-fit:contain;
  flex-shrink:0;
  display:block;
}

/* Desktop: amaga toggle */
.menu-icon,#menu-toggle{display:none}

/* FIX: iguala la mida de TOTES les imatges dins submenús (tinguin o no class) */
nav.menu ul ul a img{
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex: 0 0 34px;
  display: block;
}

/* opcional: si al primer nivell vols una mica més grans */
nav.menu > ul > li > a > img{
  width: 50px;
  height: 50px;
  object-fit: contain;
  flex: 0 0 50px;
  display: block;
}

/* si també fas servir .meim en algun lloc */
nav.menu img.menu-img,
nav.menu img.meim{
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}


/* === MÒBIL: només menú principal === */
@media (max-width:768px){
  nav.menu{margin-top:4px}

  nav.menu ul{
    display:none;
    flex-direction:column;
    width:100%;
    background:#fff;
  }

  /* Recomanat: ~ en lloc de + (menys fràgil) */
  #menu-toggle:checked ~ ul{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0;
  }

  /* Oculta submenús sempre */
  nav.menu ul ul{display:none!important}

  nav.menu>ul>li>a{padding:16px;width:100%}

  .menu-icon{
    display:block;
    position:absolute;
    top:0;
    right:20px;
    font-size:28px;
    z-index:999;
    cursor:pointer;
  }
}