/* ─── Cap Designer Overrides & Extensions ─── */
/* Hereda todo de ../css/style.css — aquí solo lo específico de gorras */

/* Product switcher en header */
.product-switcher {
  display: flex; align-items: center; gap: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 100px; padding: 4px;
}
.product-tab {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 100px;
  font-size: 12px; font-weight: 600;
  text-decoration: none; color: var(--muted);
  transition: var(--tr); letter-spacing: .02em;
}
.product-tab:hover { color: var(--text); }
.product-tab.active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 12px var(--accent-gl);
}
.product-tab svg { flex-shrink: 0; }

/* Cap tabs — 4 columnas igual que shirt tabs */
.cap-tabs { grid-template-columns: repeat(4, 1fr) !important; }

/* Ajuste para el canvas de gorra — ligeramente más cuadrado */
@media (min-width: 701px) {
  .canvas-area {
    padding-top: 20px;
  }
}