/* =============================================================================
   E&G FITNESS SPORT — store.css
   ============================================================================= */

/* ── Filtros Custom ── */
.filter-input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }

.filter-label {
  display: flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer;
  color: #525252; font-family: 'Inter', sans-serif; font-size: 13px;
  letter-spacing: 0.03em; transition: color 0.2s; user-select: none; position: relative;
}
.filter-label:hover { color: #171717; }
.dark .filter-label { color: #b7b4b4; }
.dark .filter-label:hover { color: #e5e2e1; }

.filter-indicator {
  width: 16px; height: 16px; border: 1.5px solid #d4d4d4;
  flex-shrink: 0; position: relative; transition: all 0.18s; background: transparent;
}
.dark .filter-indicator { border-color: #484831; }

.filter-indicator::after {
  content: ''; position: absolute; left: 4px; top: 1px; width: 6px; height: 10px;
  border: 2px solid #131313; border-top: none; border-left: none;
  transform: rotate(45deg) scale(0); transition: transform 0.15s;
}

.filter-indicator.radio { border-radius: 50%; }
.filter-indicator.radio::after {
  left: 3px; top: 3px; width: 8px; height: 8px; border: none;
  border-radius: 50%; background: #131313; transform: scale(0);
}

.filter-label.is-checked { color: #cdcd00; }
.dark .filter-label.is-checked { color: #eaea00; }
.filter-label.is-checked .filter-indicator { background: #eaea00; border-color: #eaea00; }
.filter-label.is-checked .filter-indicator::after { transform: rotate(45deg) scale(1); }
.filter-label.is-checked .filter-indicator.radio::after { transform: scale(1); }

.filter-count { margin-left: auto; color: #a3a3a3; font-size: 11px; }
.dark .filter-count { color: #484831; }
.filter-label.is-checked .filter-count { color: #737373; }
.dark .filter-label.is-checked .filter-count { color: #939277; }

/* ── Price Slider ── */
.price-slider { -webkit-appearance: none; appearance: none; background: transparent; width: 100%; height: 2px; cursor: pointer; }
.price-slider::-webkit-slider-runnable-track { height: 2px; background: #e5e5e5; border-radius: 2px; }
.dark .price-slider::-webkit-slider-runnable-track { background: #353534; }
.price-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: #eaea00; margin-top: -7px; cursor: pointer; transition: transform 0.15s;
}
.price-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }
.price-slider::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%; background: #eaea00; border: none; cursor: pointer;
}

/* ── Filtros Colapsables ── */
.filter-section-content { overflow: hidden; transition: max-height 0.3s ease; }
.filter-section-content.collapsed { max-height: 0 !important; }
.filter-section-toggle .section-icon { transition: transform 0.25s; }
.filter-section-toggle.collapsed .section-icon { transform: rotate(180deg); }

/* ── Cards ── */
.product-card { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s; }
.product-card:hover { transform: translateY(-4px); }
.card-img { transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1), filter 0.5s; filter: grayscale(1); }
.product-card:hover .card-img { transform: scale(1.05); filter: grayscale(0); }
.card-add-btn { transition: opacity 0.3s, transform 0.3s; opacity: 0; transform: translateY(8px); }
.product-card:hover .card-add-btn { opacity: 1; transform: translateY(0); }

/* ── Category Tabs ── */
.cat-tab {
  padding: 8px 20px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 600; font-family: 'Inter', sans-serif; color: #737373; border-bottom: 2px solid transparent;
  cursor: pointer; white-space: nowrap; transition: color 0.2s, border-color 0.2s; background: none; border-top: none; border-left: none; border-right: none;
}
.dark .cat-tab { color: #939277; }
.cat-tab:hover { color: #171717; }
.dark .cat-tab:hover { color: #e5e2e1; }
.cat-tab.active { color: #cdcd00; border-bottom-color: #cdcd00; }
.dark .cat-tab.active { color: #eaea00; border-bottom-color: #eaea00; }

/* ── Sort Select ── */
.sort-select {
  background: #fdfdfd; border: 1px solid #e5e5e5; color: #171717;
  padding: 8px 32px 8px 12px; font-size: 12px; letter-spacing: 0.05em;
  font-family: 'Inter', sans-serif; appearance: none; -webkit-appearance: none;
  cursor: pointer; outline: none; transition: border-color 0.2s;
}
.sort-select:focus { border-color: #cdcd00; }
.dark .sort-select { background: #1c1b1b; border-color: #353534; color: #e5e2e1; }
.dark .sort-select:focus { border-color: #eaea00; }

/* ── View Toggle ── */
.view-btn { padding: 8px; color: #a3a3a3; transition: color 0.2s; cursor: pointer; background: none; border: none; }
.dark .view-btn { color: #939277; }
.view-btn:hover { color: #525252; }
.dark .view-btn:hover { color: #c8c6c5; }
.view-btn.active { color: #cdcd00; }
.dark .view-btn.active { color: #eaea00; }

/* ── Drawer ── */
.filter-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 40; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.dark .filter-overlay { background: rgba(0,0,0,0.7); }
.filter-overlay.active { opacity: 1; pointer-events: all; }

.filter-drawer {
  position: fixed; top: 0; left: 0; bottom: 0; width: min(320px, 90vw);
  background: #ffffff; border-right: 1px solid #e5e5e5; z-index: 50;
  overflow-y: auto; transform: translateX(-100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.dark .filter-drawer { background: #131313; border-right-color: rgba(255,255,255,0.05); }
.filter-drawer.open { transform: translateX(0); }

/* ── Price Inputs ── */
.price-input {
  width: 100%; background: #fdfdfd; border: 1px solid #e5e5e5; color: #171717;
  font-size: 13px; font-family: 'Inter', sans-serif; padding: 8px 10px;
  outline: none; transition: border-color 0.2s; -moz-appearance: textfield;
}
.price-input:focus { border-color: #cdcd00; }
.dark .price-input { background: #1c1b1b; border-color: rgba(72,72,49,0.4); color: #e5e2e1; }
.dark .price-input:focus { border-color: #eaea00; }
.price-input::-webkit-outer-spin-button, .price-input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* ── Active Chips ── */
.filter-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px;
  background: #f5f5f5; color: #171717; font-size: 11px; font-family: 'Inter', sans-serif;
  letter-spacing: 0.03em; transition: background 0.2s;
}
.filter-chip:hover { background: #e5e5e5; }
.dark .filter-chip { background: #2a2a2a; color: #e5e2e1; }
.dark .filter-chip:hover { background: #353534; }

.filter-chip-close {
  color: #a3a3a3; cursor: pointer; display: flex; align-items: center;
  transition: color 0.15s; background: none; border: none; padding: 0;
}
.filter-chip-close:hover { color: #171717; }
.dark .filter-chip-close { color: #939277; }
.dark .filter-chip-close:hover { color: #fff; }

#no-results { display: none; }
#no-results.show { display: flex; }