.product-menu { position: relative; }
.product-menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: var(--t-label);
  font-weight: 560;
  letter-spacing: .01em;
  cursor: pointer;
}
.product-menu__trigger:hover { opacity: .64; }
.product-menu__mark { font-family: var(--font-technical); font-size: .9em; transition: transform var(--d-1) var(--ease); }
.product-menu__trigger[aria-expanded="true"] .product-menu__mark { transform: rotate(45deg); }
.product-menu__panel {
  position: absolute;
  top: calc(100% + var(--s-3));
  left: calc(var(--s-5) * -1);
  width: min(390px, calc(100vw - (var(--gutter) * 2)));
  padding: var(--s-2);
  border: 1px solid var(--color-rule);
  border-radius: var(--r-lg);
  background: var(--pure-white);
  color: var(--color-ink);
}
.product-menu__panel[hidden] { display: none; }
.product-menu__panel a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-4);
  border-radius: calc(var(--r-lg) - var(--s-2));
  color: inherit;
  text-decoration: none;
}
.product-menu__panel a + a { border-top: 1px solid var(--color-rule); }
.product-menu__panel a:hover { background: var(--color-ground); }
.product-menu__icon { width: 48px; height: 48px; object-fit: contain; filter: drop-shadow(0 8px 14px var(--overlay-shadow-soft)); }
.product-menu__copy { min-width: 0; display: grid; gap: var(--s-1); color: inherit; }
.product-menu__panel strong { font-size: .95rem; font-weight: 650; }
.product-menu__panel small { color: var(--color-body-muted); font-size: .8rem; line-height: 1.35; }
.product-menu__arrow { color: var(--color-accent); font-family: var(--font-technical); }

@media (max-width: 1040px) {
  .product-menu { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .product-menu__mark { transition: none; }
}