/* ── Gender dropdown: clean two-column panel with grid submenus ── */
@media (min-width: 769px){
  /* Wide panel */
  .professional-filter-navbar .gender-dropdown .dropdown-menu.gender-menu{
    width: clamp(640px, 60vw, 860px);
    padding: 14px 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  /* Column cards */
  .professional-filter-navbar .gender-dropdown .gender-section{
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(168,85,247,.18);
    border-radius: 12px;
    padding: 10px 12px;
    min-width: 280px;
  }

  /* Men/Women headers (clickable on desktop to toggle their grid) */
  .professional-filter-navbar .gender-dropdown .gender-submenu-toggle{
    display:flex; align-items:center; justify-content:space-between;
    padding: 10px 12px;
    border-radius: 10px;
    color: hsl(var(--text-color));
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(168,85,247,.18);
    cursor: pointer;
    text-decoration:none;
    font-weight:600; font-size:.9rem;
  }
  .professional-filter-navbar .gender-dropdown .gender-submenu-toggle i{ opacity:.75; }

  /* IMPORTANT: reset the old always-open rule */
  .professional-filter-navbar .gender-dropdown .gender-submenu{
    display: none !important;           /* closed by default */
    margin-top: 8px;
    max-height: 42vh;                   /* viewport safe */
    overflow: auto;
    padding: 6px 0;
    scrollbar-width: none;              /* hide scrollbars (Firefox) */
  }
  .professional-filter-navbar .gender-dropdown .gender-submenu::-webkit-scrollbar{
    width:0;height:0;                   /* hide scrollbars (WebKit) */
  }

  /* Open state = responsive grid (no long vertical list) */
  .professional-filter-navbar .gender-dropdown .gender-submenu.open{
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 8px 12px;
    padding: 8px 4px;
  }

  /* Item “chips” */
  .professional-filter-navbar .gender-dropdown .gender-submenu .dropdown-item{
    display:block;
    padding:10px 12px;
    border-radius:10px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
    white-space: nowrap;
    font-size:.85rem;
    transition: transform .12s ease, background-color .12s ease, color .12s ease;
  }
  .professional-filter-navbar .gender-dropdown .gender-submenu .dropdown-item:hover{
    background: rgba(168,85,247,.16);
    color: hsl(var(--primary-color));
    transform: translateY(-1px);
  }
}

/* Keep big dropdown open while interacting (not just :hover) */
.professional-filter-navbar .nav-dropdown:focus-within .dropdown-menu{
  opacity:1; visibility:visible; transform:translateY(0);
}

/* ── Product Card Color Variant Selector ── */
.card-color-selector {
  margin: 0.75rem 0 0.5rem 0;
  padding: 0.5rem 0;
  border-top: 1px solid rgba(168, 85, 247, 0.1);
  border-bottom: 1px solid rgba(168, 85, 247, 0.1);
}

.card-colors-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: hsl(var(--muted-color));
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.4rem;
  display: block;
}

.card-color-options {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.card-color-option {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.card-color-option:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.card-color-option.active {
  border-color: hsl(var(--primary-color));
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.2), 0 2px 8px rgba(0, 0, 0, 0.15);
}

.card-color-option.active::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 0.7rem;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

@media (max-width: 640px) {
  .card-color-options {
    gap: 0.4rem;
  }

  .card-color-option {
    width: 24px;
    height: 24px;
  }

  .card-color-option.active::after {
    font-size: 0.6rem;
  }
}