/* Current storefront only. The accepted logo and Halloween palette
   remain in their existing layers; historical logo trials do not load this file. */
.category-section { padding-top: 4px; padding-bottom: 0; display: flex; align-items: center; gap: 20px; }
.category-section .category-tiles { flex: 1 1 auto; min-width: 0; }
.category-section .stores-shortcut { flex: 0 0 auto; min-height: 44px; }
.catalog-section { padding-top: 24px; }
.category-tiles { display: flex; gap: 8px; overflow-x: auto; padding: 0 2px 6px; scroll-snap-type: x proximity; scroll-padding-inline: 2px; overscroll-behavior-x: contain; scrollbar-width: thin; }
.category-tile { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 0; min-width: 44px; min-height: 44px; padding: 8px 10px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: transparent; scroll-snap-align: start; white-space: nowrap; }
.category-tile strong { font-size: 15px; line-height: 1.4; }
body.halloween-theme .category-tile:hover, body.halloween-theme .category-tile[aria-pressed=true] { background: transparent; border-bottom-color: var(--pink-dark); color: var(--pink-dark); }
.search #search-submit, .search #search-submit:hover { flex: 0 0 44px; min-width: 44px; min-height: 48px; padding: 0; border: 0; border-radius: 6px 0 0 6px; background: transparent; color: #000; box-shadow: none; }
.search-field { display: flex; flex: 1 1 auto; min-width: 0; align-items: stretch; }
.search-field input { flex: 1 1 auto; width: 0; padding-left: 2px; border-radius: 0; }
.search .filters-toggle { display: inline-flex; justify-content: center; align-items: center; gap: 2px; flex: 0 0 auto; min-width: 48px; min-height: 48px; padding: 4px; border: 0; border-radius: 0; background: transparent; color: var(--pink-dark); }
.search .filters-toggle:hover, .search .filters-toggle[aria-expanded=true] { background: var(--soft); color: var(--ink); }
.search .filters-toggle svg { display: block; width: 20px; height: 20px; }
.search .filters-toggle circle { fill: var(--cream); }
.filters-count { display: inline-grid; place-items: center; min-width: 20px; min-height: 20px; border-radius: 50%; background: var(--pink-dark); color: white; font-size: 14px; }
.search .menu-toggle { display: none; }
.mobile-menu-ready .search .menu-toggle { display: inline-flex; justify-content: center; align-items: center; flex: 0 0 48px; min-width: 48px; min-height: 48px; padding: 4px; border: 0; border-left: 1px solid var(--line); border-radius: 0 6px 6px 0; background: var(--soft); color: var(--pink-dark); }
.search .menu-toggle > span[aria-hidden] { font-size: 22px; line-height: 1; }
.search .menu-toggle:hover, .search .menu-toggle[aria-expanded=true] { background: var(--line); color: var(--ink); }
/* Keep the keyboard ring inside the clipped horizontal category scroller.
   This changes no header or search dimensions. */
.category-tile:focus-visible { outline-offset: -3px; }
.catalog-filters:not([open]) { display: none; }
.catalog-filters { position: fixed; inset: auto; left: var(--filter-panel-left, 12px); top: var(--filter-panel-top, 12px); margin: 0; border: 1px solid var(--line); border-radius: 12px; padding: 0; width: var(--filter-panel-width, min(360px, calc(100vw - 24px))); max-width: calc(100vw - 24px); height: auto; max-height: var(--filter-panel-max-height, calc(100dvh - 24px)); overflow: hidden; overscroll-behavior: contain; background: var(--cream); color: var(--ink); box-shadow: 0 8px 28px #30272b26; }
.catalog-filters::backdrop { background: #30272b26; }
/* The form inherits the placement height budget minus the dialog borders.
   Only the body scrolls; the close button and result action remain in view. */
.catalog-filters #filters-form { display: flex; flex-direction: column; min-width: 0; min-height: 0; max-height: calc(var(--filter-panel-max-height, calc(100dvh - 24px)) - 2px); margin: 0; }
.catalog-filters .drawer-heading { flex: 0 0 auto; margin: 0; padding: 16px 16px 8px; }
.filters-body { flex: 1 1 auto; min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 8px 16px 16px; scroll-padding-block: 8px; }
.filters-body-content { min-width: 0; }
.catalog-filters .drawer-heading h2 { font-size: 20px; line-height: 1.3; }
.filters-help, .filter-price-help, .filter-price-error { font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.filters-help { color: var(--muted); margin-bottom: 12px; }
/* Auto-fit also handles a narrow visual viewport on a zoomed desktop. */
.filters-options, .filter-price-inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 144px), 1fr)); gap: 12px; }
.catalog-filters .active-filters { margin: 0 0 12px; gap: 6px; }
.catalog-filters .filter-chip { max-width: 100%; min-height: 44px; white-space: normal; text-align: left; overflow-wrap: anywhere; }
.catalog-filters .filter-control { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin-bottom: 0; min-width: 0; max-width: 100%; }
.filter-control label { font-size: 14px; font-weight: 600; }
#catalog-filters .filter-control select { width: 100%; max-width: 100%; min-width: 0; min-height: 44px; padding: 8px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--white); color: var(--ink); font-size: 16px; }
#catalog-filters .filter-control input { width: 100%; max-width: 100%; min-width: 0; min-height: 44px; padding: 8px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--white); color: var(--ink); font-size: 16px; }
/* Match the current select border without modifying the approved palette. */
body.pastel-theme #catalog-filters .filter-control input { border-color: #537f90; }
#catalog-filters .filter-control input[aria-invalid=true] { border-width: 2px; }
.filter-price-range { min-width: 0; margin: 16px 0 0; padding: 0; border: 0; }
.filter-price-range legend { padding: 0; font-size: 14px; font-weight: 600; }
.filter-price-help { margin: 6px 0 12px; color: var(--muted); }
.filter-price-error { margin: 8px 0 0; color: var(--ink); font-weight: 600; }
.filters-actions { display: grid; flex: 0 0 auto; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 12px 16px 16px; border-top: 1px solid var(--line); }
.filters-actions .button { width: 100%; min-width: 0; min-height: 44px; padding: 10px 8px; gap: 0; white-space: normal; overflow-wrap: normal; }
.filters-actions button:disabled { cursor: default; opacity: .65; }
.filters-open { overflow: hidden; overscroll-behavior: none; }
.catalog-filters[data-fallback=true][open] { position: static; width: min(100% - 32px, 640px); height: auto; max-height: none; overflow: visible; margin: 20px auto; border: 1px solid var(--line); border-radius: 10px; box-shadow: none; }
/* Older browsers keep a normal, fully visible inline disclosure. */
.catalog-filters[data-fallback=true] #filters-form { max-height: none; }
.catalog-filters[data-fallback=true] .filters-body { overflow: visible; }
@media (max-width: 480px) {
  .filters-options, .filter-price-inputs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .category-section { padding-top: 0; }
  .category-section .stores-shortcut { display: none; }
  .search #search-submit { min-width: 44px; }
  .search input { padding: 13px 4px 13px 2px; }

}
@media (prefers-reduced-motion: reduce) {
  .catalog-filters, .catalog-filters *, .catalog-filters::backdrop { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

#catalog-filters .department-control { margin-top: 12px; }