/* Miami Guns — /gun-store/catalog/ archive styles. Reuses .mg-pill/.mg-pill-row/.mg-card-hidden
   from product.css (enqueued alongside) so the filter chips match the product page exactly. */

.mg-catalog{
  background:var(--bg);color:var(--ink);font-family:var(--font-body);
  padding-bottom:var(--space-xl);
}
.mg-catalog h1,.mg-catalog h2,.mg-catalog h3{
  font-family:var(--font-heading);font-weight:700;line-height:1.05;color:var(--ink);letter-spacing:.01em;
}
.mg-catalog a{color:inherit;}
.mg-catalog-wrap{max-width:1280px;margin:0 auto;padding:0 var(--space-md);}

.mg-catalog-header{padding-top:var(--space-lg);padding-bottom:var(--space-md);}
.mg-catalog-h1{font-size:clamp(26px,4vw,40px);margin-bottom:6px;}
.mg-catalog-sub{font-size:15px;color:var(--ink-soft);max-width:60ch;margin:0;}

/* ===== Guns / Ammo mode toggle -- its own row, above everything else ===== */
.mg-mode-row{display:flex;gap:10px;margin:var(--space-md) 0 var(--space-lg);}
.mg-mode-pill{
  flex:1;max-width:220px;border:1px solid var(--ink);border-radius:var(--radius-sm);
  background:transparent;color:var(--ink);padding:14px 18px;font-family:var(--font-heading);
  font-weight:700;font-size:15px;letter-spacing:.02em;cursor:pointer;text-align:center;
}
.mg-mode-pill.active{background:var(--accent);border-color:var(--accent);color:#fff;}
.mg-mode-pill:hover:not(.active){border-color:var(--accent);}

/* ===== layout: mobile filters on top, desktop sidebar ===== */
.mg-catalog-layout{display:flex;flex-direction:column;gap:var(--space-lg);}
@media(min-width:960px){
  .mg-catalog-layout{flex-direction:row;align-items:flex-start;gap:40px;}
  .mg-catalog-filters{width:250px;flex-shrink:0;position:sticky;top:70px;}
  .mg-catalog-results{flex:1;min-width:0;}
}

/* ===== filter groups ===== */
.mg-filter-group{margin-bottom:var(--space-lg);}
.mg-filter-group:last-child{margin-bottom:0;}
.mg-filter-label{
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);
  font-weight:700;margin-bottom:var(--space-sm);
}

/* Mobile: each pill group scrolls horizontally in one row instead of wrapping tall. */
@media(max-width:959px){
  .mg-pill-row{
    display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;
    padding-bottom:4px;scrollbar-width:none;margin:0;
  }
  .mg-pill-row::-webkit-scrollbar{display:none;}
  .mg-pill-row .mg-pill{flex-shrink:0;white-space:nowrap;}
}
/* Desktop: pills wrap normally in the sidebar's fixed width. */
@media(min-width:960px){
  .mg-pill-row{display:flex;flex-wrap:wrap;gap:8px;margin:0;}
}

.mg-caliber-group{display:none;}
.mg-caliber-group.active{display:block;}

/* ===== results count + grid ===== */
.mg-results-count{font-size:13px;color:var(--ink-soft);margin-bottom:var(--space-md);}
.mg-catalog-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-md);
}
@media(min-width:640px){.mg-catalog-grid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:960px){.mg-catalog-grid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:1180px){.mg-catalog-grid{grid-template-columns:repeat(4,1fr);}}

.mg-product-card{
  display:flex;flex-direction:column;text-decoration:none;color:var(--ink);
  background:var(--surface);border-radius:var(--radius-md);overflow:hidden;
}
.mg-product-card-img{aspect-ratio:1/1;background:var(--card-white);}
.mg-product-card-img img{width:100%;height:100%;object-fit:contain;display:block;}
.mg-product-card-body{padding:var(--space-sm) var(--space-md) var(--space-md);}
.mg-product-card-brand{font-size:11px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em;font-weight:600;}
.mg-product-card-title{
  font-family:var(--font-body);font-weight:700;font-size:14px;line-height:1.3;
  margin-top:2px;color:var(--ink);
}

.mg-empty-state{padding:var(--space-xl) 0;text-align:center;color:var(--ink-soft);font-size:15px;}
.mg-empty-state.active{display:block;}
.mg-empty-state:not(.active){display:none;}

/* Reveal-on-scroll pagination: filter-matched cards beyond the current page size stay in
   the DOM (crawlable) but are hidden until the sentinel below the grid scrolls into view. */
.mg-page-hidden{display:none;}
.mg-catalog-sentinel{height:1px;}

/* Prevents the results column collapsing to a short height when a filter combination only
   matches a few cards -- keeps the page from visually "jumping" when the filter changes.
   Applies at every width -- the jump happens on mobile's stacked layout too, not just desktop. */
.mg-catalog-results{min-height:100vh;}

.mg-catalog-store-cta{
  display:block;margin-top:var(--space-md);text-align:center;text-decoration:none;
  background:var(--bg);color:var(--ink);border:1px solid var(--ink);border-radius:var(--radius-sm);
  padding:14px 16px;font-family:var(--font-body);font-weight:700;
  font-size:13px;letter-spacing:.02em;line-height:1.3;
}
.mg-catalog-store-cta:hover{border-color:var(--accent);}
.mg-catalog-store-cta:hover,.mg-catalog-store-cta:focus{color:var(--ink);}
.mg-catalog-store-cta-link{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:3px;}