/* ---- category/section/brand/tag intro ----
   Plain white text block — replaces the old full-bleed colored/gradient
   hero banner with centered white text (rejected as "photo + dark
   overlay, outdated"). Centered, no max-width on the paragraph (2026-07-26
   correction) — a category-photo composition was tried in this same
   phase and explicitly rejected; text only. */
.store-category-intro { padding:1.5rem 0 1rem; background:var(--color-background); text-align:center; }
.store-category-intro h1 {
  margin:0 0 .5rem;
  color:var(--color-heading);
  font-size:clamp(1.6rem, 2.6vw, 2.15rem);
  font-weight:700;
  line-height:1.2;
}
.store-category-intro p {
  margin:0 auto;
  color:var(--color-text-muted);
  font-size:1rem;
  line-height:1.6;
}

/* ---- listing layout: sidebar + main, real CSS grid (Phase 12 correction) ----
   Replaces the old .row/.col-lg-3/.col-lg-9 Bootstrap markup — .col-lg-9
   was never actually defined in the Bootstrap-subset extraction, which is
   why the product grid was rendering full-width and wrapping below the
   sidebar instead of beside it. Fixed at the markup level (index.php), not
   papered over with CSS alone. */
.store-listing-layout {
  display:grid;
  grid-template-columns:minmax(250px, 290px) minmax(0, 1fr);
  gap:32px;
  align-items:start;
}
.store-listing-layout.store-listing-layout-full { grid-template-columns:1fr; }
.store-listing-sidebar { min-width:0; }
.store-listing-main { min-width:0; }
@media (max-width:991.98px) {
  .store-listing-layout { grid-template-columns:1fr; gap:0; }
}

.store-badge { font-size:.8rem; background:var(--color-surface-alt); border-radius:999px; padding:.15rem .5rem; }
.store-list-image { width:96px; height:72px; flex:0 0 96px; max-width:96px; object-fit:contain; object-position:center; background:var(--color-surface); border-radius:10px; display:block; }
.list-row .flex-grow-1 { min-width:0; }
.list-row { border-bottom:1px solid var(--color-border); padding:16px 6px; border-radius:var(--radius-small); transition:background-color .15s ease; }
.list-row:hover { background:var(--color-surface-alt); }
.list-row:last-child { border-bottom:0; }
.filter-card { border-radius:var(--radius-medium); border-color:var(--color-border); box-shadow:none; }
.filter-card .form-label { margin-bottom:.3rem; font-size:.875rem; font-weight:500; color:var(--color-text-muted); }
.filter-card .mb-3 { margin-bottom:1rem !important; }
.filter-card .form-control,
.filter-card .form-select { padding-top:.4rem; padding-bottom:.4rem; font-size:.94rem; }
.filter-card hr { margin:.85rem 0; }
.filter-actions { gap:.5rem; }
.filter-actions .btn { flex:1 1 auto; }
@media (max-width:575.98px) { .store-list-image { width:72px; height:60px; flex:0 0 72px; max-width:72px; } }
.category-description { color:var(--color-text-muted); line-height:1.7; }
.category-description :is(h1,h2,h3,h4) { font-size:1rem; }

/* ---- empty state ---- */
.store-empty-state {
  padding:3rem 1.5rem;
  text-align:center;
  color:var(--color-text-muted);
}
.store-empty-state svg { color:var(--color-border-strong); margin-bottom:.75rem; }
.store-empty-state p { margin:0 0 1rem; font-size:1rem; }

/* ---- filter tree + accessible mobile off-canvas drawer ---- */
.store-filters-toggle-badge { background:var(--color-primary-dark); color:#fff; font-size:.78rem; }
.store-filters-drawer-header,
.store-filters-backdrop { display:none; }
.store-filters-scroll { min-height:0; }
.store-filter-category-level { margin:0; padding:0; list-style:none; }
.store-filter-category-level .store-filter-category-level { padding-left:.75rem; border-left:1px solid var(--color-border); }
.store-filter-category-item { margin:.15rem 0; }
.store-category-branch > summary,
.store-filter-category-link {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  padding:.5rem .6rem;
  border-radius:var(--radius-small);
  color:var(--color-text);
  font-size:.92rem;
  text-decoration:none;
}
.store-category-branch > summary { cursor:pointer; font-weight:500; }
.store-category-branch > summary:hover,
.store-filter-category-link:hover { background:var(--color-surface-alt); }
.store-filter-category-link.active { background:var(--color-primary-soft); color:var(--color-primary-darkest); font-weight:600; }
.store-filter-category-link .badge,
.store-category-branch .badge { flex:0 0 auto; font-weight:500; }
.store-active-filters { margin:0 0 1rem; padding:.75rem; border-radius:var(--radius-small); background:var(--color-primary-soft); font-size:.875rem; }
.store-active-filters > strong { display:block; margin-bottom:.45rem; }
.store-active-filter-list { display:flex; flex-wrap:wrap; gap:.35rem; }
.store-active-filter-list span { padding:.2rem .45rem; border:1px solid var(--color-border); border-radius:999px; background:var(--color-surface); }

@media (max-width:991.98px) {
  /* No-JS fallback: filters remain inline and fully usable. JS adds the
     enhanced class only after it can provide focus management and closing. */
  .store-filters-toggle { display:none !important; }
  .store-filters-drawer-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
  .store-filters-drawer-header h2 { margin:0; font-size:1.15rem; }
  .store-filters-close { display:none; min-width:44px; min-height:44px; border:0; background:transparent; color:var(--color-primary-darkest); font-weight:600; }
  .store-filters-enhanced .store-filters-toggle { display:inline-flex !important; align-items:center; gap:.35rem; }
  .store-filters-enhanced .store-filters-drawer {
    position:fixed;
    z-index:1061;
    inset:0 auto 0 0;
    display:grid;
    grid-template-rows:auto minmax(0,1fr);
    width:min(92vw, 420px);
    max-width:100%;
    padding:1rem 1rem 0;
    background:var(--color-surface);
    box-shadow:0 0 32px rgba(0,0,0,.2);
    transform:translateX(-105%);
    visibility:hidden;
    transition:transform .22s ease, visibility 0s linear .22s;
  }
  .store-filters-enhanced .store-filters-drawer.is-open { transform:translateX(0); visibility:visible; transition-delay:0s; }
  .store-filters-enhanced .store-filters-close { display:inline-flex; align-items:center; justify-content:center; }
  .store-filters-enhanced .store-filters-backdrop {
    position:fixed;
    z-index:1060;
    inset:0;
    display:block;
    background:rgba(17,24,39,.48);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .22s ease, visibility 0s linear .22s;
  }
  .store-filters-enhanced .store-filters-backdrop.is-open { opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s; }
  .store-filters-enhanced .store-filters-drawer .filter-card { display:grid; grid-template-rows:minmax(0,1fr) auto; min-height:0; margin:0; padding:0; border:0; background:transparent; }
  .store-filters-enhanced .store-filters-scroll { overflow-y:auto; overscroll-behavior:contain; padding:0 .25rem 1rem; }
  .store-filters-enhanced .filter-actions { position:sticky; bottom:0; padding:.75rem 0 max(.75rem, env(safe-area-inset-bottom)); border-top:1px solid var(--color-border); background:var(--color-surface); }
  body.store-filters-scroll-locked { overflow:hidden; }
}
@media (min-width:992px) {
  .store-filters-drawer { display:block; }
}

/* ---- pagination touch targets ----
   Real Lighthouse finding (Phase 11): .pagination-sm's compact padding
   left .page-link under the 44x44px touch-target minimum on mobile.
   Desktop keeps the compact look; mobile gets real tap-friendly sizing. */
@media (max-width:767.98px) {
  .pagination .page-link {
    min-width:44px;
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
}