/* static/css/category-filters.css
 *
 * These two rules were previously pasted inline, verbatim, inside
 * every one of the 13 category filter blocks in index.html. Same
 * duplication problem as the JS — just in CSS form. One definition
 * now; every category page uses it.
 */

.cat-filter-row {
  padding: 12px 8px;
  background: transparent;
  border-bottom: 1px solid #e8e8e8;
  display: flex;
  gap: 8px;
  overflow-x: auto;
}

.cat-filter-row.cat-filter-row--surface {
  /* A few categories (Stationery, Personal Care, Beauty) had this row on
     var(--md-surface) with 16px padding instead of transparent/8px in the
     original markup. Preserved as a modifier rather than silently
     "fixed" — flag to Jay: was this intentional or drift? If it should
     be consistent, drop this modifier everywhere. */
  padding: 12px 16px;
  background: var(--md-surface);
}

.cat-filter-row--l2 {
  padding: 12px 16px;
  background: var(--md-surface);
  border-bottom: 1px solid #e8e8e8;
  display: none;
  gap: 8px;
  overflow-x: auto;
  flex-wrap: nowrap;
}

.cat-filter-row--l2.active {
  display: flex;
}

/* Only the category the user opened gets its filter block shown.
   Every #{catKey}-filters container starts hidden; openCat() adds
   .filter-visible to the matching one (and openCategoryFilterBlock
   toggles style.display to the same effect). Without these rules all
   14 category filter rows rendered stacked at once. */
#sc-catpage [id$="-filters"] {
  display: none;
}

#sc-catpage [id$="-filters"].filter-visible {
  display: block;
}

/* Category filter buttons (level 1 + level 2). */
.subcategory-btn {
  flex-shrink: 0;
  height: 38px;
  padding: 0 14px;
  background: #fff;
  border: 1px solid rgba(232, 117, 34, 0.15);
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  color: #5e4637;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(24, 13, 5, 0.04);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.subcategory-btn.active {
  background: linear-gradient(135deg, var(--md-primary) 0%, #ff8e2b 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 20px rgba(232, 117, 34, 0.2);
}

.subcategory-btn:active {
  transform: scale(0.95);
}

.subcategory-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(24, 13, 5, 0.08);
}

/* Search toggle on the category page: the per-category
   ".search-active .category-search-sort" show-rules live in main.css
   inside the dead brace-swallowed region (only #beauty-filters was
   covered, in main-product.css), so pressing the search button did
   nothing for every other category. One generic rule covers all. */
#sc-catpage .category-search-sort {
  display: none !important;
}

#sc-catpage [id$="-filters"].filter-visible.search-active .category-search-sort {
  display: flex !important;
}

/* Category heading icon (always English, permanently — the whole
   #sc-catpage screen carries data-no-i18n). */
.cat-top-title-wrap {
  display: flex;
  align-items: center;
  min-width: 0;
}

.cat-top-text {
  min-width: 0;
}

.cat-top-text .cat-top-kicker {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--md-primary, #e8500a);
}

.cat-top-text .cat-top-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}