/* ============================================================
   AXONIC — Professional Horizontal Filter Layout
   ============================================================ */

/* 1. Hide the heavy repetitive text completely */
.shop-sidebar-header h3,
.shop-meta p,
.shop-sidebar-header > *:first-child,
.shop-sidebar-header {
  display: none !important;
}

/* Ensure Shop page uses full width (override old grid) */
.shop-page {
  display: block !important;
}

/* Hero section compact */
.shop-hero-panel {
  display: block !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid #e8e8e8 !important;
  border-radius: 0 !important;
  padding: 28px 0 20px !important;
  margin-bottom: 24px !important;
}

.shop-hero-panel h1 {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: clamp(1.8rem, 3vw, 2.5rem) !important;
  letter-spacing: -.02em !important;
  margin-bottom: 12px !important;
  line-height: 1.1 !important;
}

/* Base shell overrides */
.shop-filters-shell {
  background: transparent !important;
  border: none !important;
  padding: 0 0 24px 0 !important;
  margin-bottom: 24px !important;
  border-bottom: 1px solid #f0f0f0 !important;
  box-shadow: none !important;
}

/* Always force filter panel open and horizontal */
.filter-panel, .filter-panel.is-open {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  gap: 16px 24px !important;
  flex-wrap: wrap !important;
  border: none !important;
  padding: 0 !important;
}

/* Clean groups - Hidden per user request */
.filter-group {
  display: none !important;
}

.filter-field {
  flex: 0 0 auto !important;
  padding: 0 !important;
  border: none !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

/* Input rows */
.filter-search-row {
  margin-bottom: 0 !important;
  display: flex !important;
  gap: 8px !important;
}

/* Modern inputs and buttons */
.filter-search-row input,
.filter-field select,
.filter-option-list button,
.filter-chip {
  padding: 8px 14px !important;
  border-radius: 6px !important;
  border: 1px solid #e0e0e0 !important;
  background: #ffffff !important;
  color: #444 !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.03em !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  height: 38px !important; 
  box-shadow: none !important;
  box-sizing: border-box !important;
}

/* Search input specific */
.filter-search-row input {
  min-width: 220px !important;
  cursor: text !important;
}

.filter-search-row button {
  height: 38px !important;
  padding: 0 16px !important;
  border-radius: 6px !important;
}

/* Horizontal list options */
.filter-option-list {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
}

/* Sub-labels */
.filter-group > span,
.filter-field > span {
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #888 !important;
  display: block !important;
}

/* Hover and active states */
.filter-search-row input:focus,
.filter-field select:focus,
.filter-option-list button:hover,
.filter-chip:hover {
  border-color: #0a0a0a !important;
  color: #0a0a0a !important;
}

.filter-option-list button.active,
.filter-chip.active {
  background: #0a0a0a !important;
  border-color: #0a0a0a !important;
  color: #ffffff !important;
}

/* Hide clutter */
.filter-toggle-button,
.shop-sidebar-actions,
.shop-count-banner {
  display: none !important;
}

/* Results section overrides */
.shop-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 0 16px 0 !important;
  border: none !important;
  margin-bottom: 24px !important;
}

.shop-meta-count {
  display: flex !important;
  align-items: baseline !important;
}

.shop-meta-count strong {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 1.25rem !important;
  color: #0a0a0a !important;
}

.shop-meta-count span.shop-count-label { 
  font-size: 0.7rem !important; 
  color: #888 !important; 
  letter-spacing: 0.1em !important; 
  text-transform: uppercase !important; 
  margin-right: 8px !important;
}

/* Layout product grid clean 4 column or 3 */
.shop-product-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 32px 20px !important;
}

/* Active chips */
.active-filter-strip {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 24px !important;
}

.active-filter-strip span {
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  background: #f4f4f4 !important;
  color: #444 !important;
  border: 1px solid #e0e0e0 !important;
}

/* Responsive */
@media (max-width: 899px) {
  .shop-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px 12px !important;
  }
  .filter-panel {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 20px !important;
  }
  .filter-option-list {
    flex-wrap: wrap !important;
  }
  .filter-search-row input {
    min-width: 0 !important;
    flex: 1 !important;
  }
}