.gender-row {
  position: sticky;
  top: 104px;
  z-index: 18;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 9px clamp(16px, 4vw, 48px) 12px;
  background: color-mix(in srgb, var(--background, #f4f3ed) 94%, transparent);
  border-bottom: 1px solid rgba(22, 30, 32, 0.08);
  backdrop-filter: blur(14px);
  scrollbar-width: none;
}

.gender-row::-webkit-scrollbar { display: none; }

.gender-row button,
.gender-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  border: 1px solid rgba(22, 30, 32, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.46);
  color: inherit;
}

.gender-row button {
  min-height: 38px;
  padding: 8px 13px;
  font: 600 12px/1 "Manrope", sans-serif;
  letter-spacing: 0.01em;
  border-color: var(--line);
  background: var(--surface-soft);
  color: var(--text);
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.gender-row button:hover:not(.active) {
  border-color: var(--accent);
  background: var(--surface-solid);
  transform: translateY(-1px);
}

.gender-row button:active { transform: translateY(0) scale(0.98); }
.gender-row button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gender-row button.active {
  border-color: var(--control);
  background: var(--control);
  color: var(--on-control);
  box-shadow: 0 8px 22px rgba(18, 48, 76, 0.18);
}

.gender-icon {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  font: 700 14px/1 Georgia, serif;
}

.product-taxonomy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.gender-badge {
  padding: 4px 7px;
  font: 600 9px/1 "Manrope", sans-serif;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  opacity: 0.72;
}

.gender-badge .gender-icon { width: 12px; height: 12px; font-size: 11px; }

.mandatory-bottle {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 15px;
  border: 1px solid rgba(178, 138, 74, 0.34);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(208, 170, 103, 0.14), rgba(255, 255, 255, 0.44));
}

.mandatory-bottle__mark {
  display: grid;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background: #18352e;
  color: #fffaf0;
  font-weight: 800;
}

.mandatory-bottle > span:last-child { display: grid; gap: 3px; }
.mandatory-bottle strong { font: 700 13px/1.25 "Manrope", sans-serif; }
.mandatory-bottle small { color: inherit; font: 500 11px/1.4 "Manrope", sans-serif; opacity: 0.64; }

.theme-sealed .gender-row {
  border-bottom-color: var(--line);
  background: rgba(8, 17, 26, 0.92);
  background: color-mix(in srgb, var(--page) 92%, transparent);
}

.theme-sealed .gender-row button:not(.active) {
  border-color: rgba(204, 177, 143, 0.36);
  background: transparent;
  color: var(--text);
}

.theme-sealed .gender-row button:hover:not(.active) {
  border-color: var(--accent);
  background: var(--surface-soft);
  color: var(--text);
}

.theme-sealed .gender-row button.active {
  border-color: var(--control);
  background: var(--control);
  color: var(--on-control);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
}

@media (max-width: 720px) {
  .gender-row { top: 96px; padding-inline: 14px; }
  .gender-badge { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .gender-row button { transition: none; }
}