/* ════════════════════════════════════════════════════════════════════════
   GH · Menú catálogo por producto — diseño LIMPIO (gemelo de ghbrandsmenu)
   Las marcas (nivel 0) son bloques verdes rellenos (esquinas cuadradas, texto
   blanco en mayúsculas + tracking). Las subcategorías, enlaces limpios; acento
   verde solo en hover y en la categoría activa (barra lateral). Acordeón
   heredado de la 1.6.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  --ghb-green-900: #0F3D2E;
  --ghb-green-800: #145A3F;
  --ghb-green-700: #1F6F4A;
  --ghb-green-600: #258759;
  --ghb-green-500: #2EA76F;
  --ghb-green-200: #C4E6D3;
  --ghb-green-100: #E8F5EE;
  --ghb-green-50:  #F4FAF7;
  --ghb-ink:    var(--gh-grey-900, #1a1a1a);
  --ghb-muted:  var(--gh-grey-600, #525252);
  --ghb-line:   #ECECEC;
}

.gh-pmenu,
.gh-pmenu * { box-sizing: border-box; }
.gh-pmenu a { color: inherit; text-decoration: none; }

/* ───────── Contenedor · vidrio esmerilado verde ─────────────────── */
.gh-pmenu {
  position: relative;
  /* Glass neutro: deja ver la aurora IA de la página de categoría a través del
     vidrio (en vez de un tinte propio), para que todo el sidebar respire igual. */
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
          backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(15, 61, 46, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  /* Sin padding vertical: el primer y el último bloque van a ras de los bordes y
     las esquinas redondeadas recortan el verde directamente (sin strip glass). */
  padding: 0;
  margin-bottom: 16px;
  overflow: hidden;          /* recorta los bloques verdes a las esquinas redondeadas */
  font-family: 'Roboto', system-ui, sans-serif;
}

.gh-pmenu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.gh-pmenu__item { margin: 0; padding: 0; }
.gh-pmenu__item--lvl0 { display: flex; flex-direction: column; }

/* ───────── Fila base (link + toggle) ───────────────────────────── */
.gh-pmenu__row {
  display: flex;
  align-items: center;
  min-height: 34px;
  transition: background 0.15s ease;
}
.gh-pmenu__link {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 7px 14px;
  color: inherit;
  font-family: inherit;
  line-height: 1.3;
  transition: color 0.15s ease;
}
.gh-pmenu__name { flex: 1; }

/* ───────── Toggle (+/−) · sutil, sin chip ──────────────────────── */
.gh-pmenu__toggle {
  flex: 0 0 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  color: var(--ghb-muted);
  cursor: pointer;
  transition: color 0.15s ease;
}
.gh-pmenu__toggle:hover,
.gh-pmenu__toggle:focus { color: var(--ghb-green-700); outline: none; }

.gh-pmenu__toggle-icon {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 14px;
}
.gh-pmenu__toggle-icon::before,
.gh-pmenu__toggle-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.15s ease;
}
.gh-pmenu__toggle-icon::before { width: 11px; height: 1.5px; transform: translate(-50%, -50%); }
.gh-pmenu__toggle-icon::after  { width: 1.5px; height: 11px; transform: translate(-50%, -50%); }
.gh-pmenu__toggle[aria-expanded="true"] .gh-pmenu__toggle-icon::after {
  transform: translate(-50%, -50%) scaleY(0);
  opacity: 0;
}

/* ════════════════════════════════════════════════════════════════
   NIVEL 0 · Cabecera de marca · bloque verde relleno, esquinas
   cuadradas y texto blanco.
   ════════════════════════════════════════════════════════════════ */
.gh-pmenu__item--lvl0 > .gh-pmenu__row {
  background: linear-gradient(180deg, rgba(37, 135, 89, 0.94) 0%, rgba(20, 90, 63, 0.94) 100%);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  border-bottom: 0;
  border-radius: 0;                /* esquinas cuadradas (identidad de marca) */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.gh-pmenu__item--lvl0 > .gh-pmenu__row .gh-pmenu__link {
  padding: 12px 14px;
  color: #ffffff;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
/* Marcas pegadas (sin hueco glass entre ellas); el sheen superior de cada
   bloque verde hace de separador sutil. */
.gh-pmenu__list > .gh-pmenu__item--lvl0 + .gh-pmenu__item--lvl0 { margin-top: 0; }
/* hover / categoría actual: el texto se mantiene blanco sobre el verde */
.gh-pmenu__item--lvl0 > .gh-pmenu__row:hover { background: linear-gradient(180deg, rgba(20, 90, 63, 0.96) 0%, rgba(15, 61, 46, 0.96) 100%); }
.gh-pmenu__item--lvl0 > .gh-pmenu__row:hover .gh-pmenu__link,
.gh-pmenu__item--lvl0.is-current > .gh-pmenu__row .gh-pmenu__link,
.gh-pmenu__item--lvl0.is-ancestor > .gh-pmenu__row .gh-pmenu__link { color: #ffffff; }
/* El +/- del nivel 0 (marca) va en blanco sobre el bloque verde. */
.gh-pmenu__item--lvl0 > .gh-pmenu__row .gh-pmenu__toggle,
.gh-pmenu__item--lvl0 > .gh-pmenu__row .gh-pmenu__toggle:hover,
.gh-pmenu__item--lvl0 > .gh-pmenu__row .gh-pmenu__toggle:focus { color: #ffffff; }

/* ════════════════════════════════════════════════════════════════
   SUBNIVELES · enlaces sobrios (sin guion, sin fondos tintados)
   ════════════════════════════════════════════════════════════════ */
.gh-pmenu__sub {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.gh-pmenu__sub[hidden] { display: none; }

.gh-pmenu__item:not(.gh-pmenu__item--lvl0) > .gh-pmenu__row {
  background: transparent;
  color: var(--ghb-ink);
}
.gh-pmenu__item:not(.gh-pmenu__item--lvl0) .gh-pmenu__name::before { content: none; }

.gh-pmenu__item--lvl1 > .gh-pmenu__row .gh-pmenu__link {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ghb-ink);
  padding-left: 18px;
}
.gh-pmenu__item--lvl2 > .gh-pmenu__row .gh-pmenu__link {
  font-size: 13px;
  font-weight: 500;
  color: var(--ghb-muted);
  padding-left: 32px;
}
.gh-pmenu__item--lvl3 > .gh-pmenu__row .gh-pmenu__link,
.gh-pmenu__item--lvl4 > .gh-pmenu__row .gh-pmenu__link {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ghb-muted);
  padding-left: 46px;
}

/* Hover · velo verde translúcido + texto verde */
.gh-pmenu__item:not(.gh-pmenu__item--lvl0) > .gh-pmenu__row:hover { background: rgba(46, 167, 111, 0.12); }
.gh-pmenu__item:not(.gh-pmenu__item--lvl0) > .gh-pmenu__row:hover .gh-pmenu__link { color: var(--ghb-green-700); }

/* Activo (categoría actual) · velo verde + barra de acento verde a la izquierda */
.gh-pmenu__item:not(.gh-pmenu__item--lvl0).is-current > .gh-pmenu__row {
  background: rgba(46, 167, 111, 0.16);
  box-shadow: inset 3px 0 0 var(--ghb-green-700);
}
.gh-pmenu__item:not(.gh-pmenu__item--lvl0).is-current > .gh-pmenu__row .gh-pmenu__link {
  color: var(--ghb-green-800);
  font-weight: 700;
}
.gh-pmenu__item:not(.gh-pmenu__item--lvl0).is-ancestor > .gh-pmenu__row .gh-pmenu__link {
  font-weight: 600;
}

/* ───────── Fallback · sin backdrop-filter (vidrio → claro opaco) ──── */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .gh-pmenu { background: #f4faf7; }
  .gh-pmenu__item--lvl0 > .gh-pmenu__row { background: var(--ghb-green-700); }
  .gh-pmenu__item--lvl0 > .gh-pmenu__row:hover { background: var(--ghb-green-800); }
}