/* ══════════════════════════════════════════════════════════
   Cartside v2 — app dashboard skeleton (app.html)
   Loads after v2.css: reuses its :root tokens + .btn styles.
═══════════════════════════════════════════════════════════ */

body.appv2 { background: var(--bg); }

/* ── Top bar ─────────────────────────────────────────────── */
.ap-topbar {
  display: flex; align-items: center; gap: 28px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 12px 28px;
  position: sticky; top: 0; z-index: 50;
}
.ap-topbar .brand-word { font-size: 26px; }
/* Instacart-style: the pill is pinned to the true viewport center (the
   brand and right controls have different widths, so flex centering would
   sit left of center). Width is capped so it never collides with either. */
.ap-topbar { min-height: 68px; }
.ap-topbar-search {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(820px, calc(100vw - 760px));
  display: flex; align-items: center; gap: 11px;
  background: var(--surface);
  border: 1.5px solid #d5d2c8;
  border-radius: 999px;
  padding: 0 20px;
  color: var(--ink-2);
  transition: border-color .13s, box-shadow .13s;
}
.ap-topbar-search:focus-within {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(22,163,74,.12);
}
.ap-topbar-search input {
  flex: 1; border: none; background: transparent;
  font: inherit; font-size: 15px; font-weight: 500; color: var(--ink);
  height: 48px; outline: none;
}
.ap-topbar-search input::placeholder { color: var(--ink-2); }
.ap-topbar-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; margin-left: auto; }
.ap-loc, .ap-profile {
  display: flex; align-items: center; gap: 7px;
  background: none; border: none;
  font: inherit; font-size: 14px; font-weight: 700; color: var(--ink);
  cursor: pointer; padding: 8px 10px; border-radius: 10px;
  transition: background .12s;
}
.ap-loc:hover, .ap-profile:hover { background: var(--bg); }
.ap-cart {
  position: relative;
  background: none; border: none; color: var(--ink);
  cursor: pointer; padding: 8px; border-radius: 10px;
  transition: background .12s;
}
.ap-cart:hover { background: var(--bg); }
.ap-cart-badge {
  position: absolute; top: 1px; right: 0;
  background: var(--green); color: #fff;
  font-size: 10px; font-weight: 800;
  border-radius: 999px; padding: 1px 6px;
}
.ap-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--green); color: #fff;
  font-size: 13px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

/* ── Layout ──────────────────────────────────────────────── */
.ap-body { display: flex; align-items: flex-start; }
.ap-sidebar {
  width: 224px; flex-shrink: 0;
  padding: 18px 14px 28px;
  border-right: 1px solid var(--border);
  background: var(--surface);
  min-height: calc(100vh - 67px);
  position: sticky; top: 67px;
  display: flex; flex-direction: column; gap: 20px;
}
.ap-nav { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.ap-nav-item {
  display: flex; align-items: center; gap: 12px;
  font-size: 14px; font-weight: 600; color: var(--ink-2);
  padding: 10px 12px; border-radius: 10px;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.ap-nav-item:hover { background: var(--bg); color: var(--ink); }
.ap-nav-item.active {
  background: var(--green-tint);
  color: var(--green);
  border: 1px solid #cde7cd;
}
.ap-promo {
  background: var(--green-tint);
  border-radius: 14px;
  padding: 18px 16px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
}
.ap-promo-icon { font-size: 26px; }
.ap-promo-title { font-size: 15px; font-weight: 800; color: var(--ink); }
.ap-promo p { font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.ap-promo-btn { padding: 9px 16px; font-size: 13.5px; margin-top: 4px; }

.ap-main {
  flex: 1; min-width: 0;
  padding: 30px 34px 60px;
  max-width: 1200px;
}
/* ── Sections ────────────────────────────────────────────── */
.ap-section { margin-top: 30px; }
.ap-section--first { margin-top: 0; }
.ap-section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.ap-section-head h2 { font-size: 18px; font-weight: 800; letter-spacing: -.2px; }
.ap-link {
  background: none; border: none;
  font: inherit; font-size: 13px; font-weight: 700; color: var(--green);
  cursor: pointer; padding: 4px 6px; border-radius: 6px;
}
.ap-link:hover { text-decoration: underline; }

/* ── Store cards ─────────────────────────────────────────── */
.ap-store-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
}
.ap-store-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 10px 14px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-align: center;
  cursor: pointer;
  transition: box-shadow .13s, border-color .13s;
}
.ap-store-card:hover { box-shadow: var(--shadow); }
.ap-store-card.selected { border-color: #b8dfb8; }
.ap-store-card strong { font-size: 13.5px; }
.ap-store-card small { font-size: 11.5px; color: var(--muted); }
.ap-store-check {
  position: absolute; top: 8px; right: 8px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--green); color: #fff;
  font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.ap-store-logo {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 19px; font-weight: 800;
  margin-bottom: 4px;
}
.lg-walmart { background: var(--walmart); color: #ffc220; }
.lg-kroger  { background: var(--kroger); font-style: italic; }
.lg-aldi    { background: var(--aldi); }
.lg-soon    { background: var(--bg); color: var(--muted); border: 1.5px dashed #cbc8bd; }
.ap-store-card--more {
  justify-content: center;
  color: var(--muted);
  border-style: dashed;
  cursor: default;
}
.ap-store-card--more:hover { box-shadow: none; }
.ap-store-grid { grid-template-columns: repeat(4, 1fr); max-width: 760px; }

/* ── Category tiles ──────────────────────────────────────── */
.ap-cat-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 12px;
}
.ap-cat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 8px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--ink-2);
  cursor: pointer;
  transition: box-shadow .13s;
}
.ap-cat-card:hover { box-shadow: var(--shadow); }
.ap-cat-card span { font-size: 34px; line-height: 1; }

/* ── Meals + Community lists panels ──────────────────────── */
.ap-two-col {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 20px;
  margin-top: 30px;
}
.ap-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
}
.ap-meal-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
/* Full-width "Meals for you" panel (home) — spread available meals across the row */
.ap-panel--full { margin-top: 30px; }
.home-meal-row { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.ap-meal-card {
  display: flex; flex-direction: column; gap: 3px;
  cursor: pointer;
}
.ap-meal-img {
  aspect-ratio: 1;
  background: var(--orange-tint);
  border-radius: 12px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 42px;
  margin-bottom: 6px;
}
.ap-meal-img.has-photo { background: none; }
.ap-meal-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.ap-meal-card strong { font-size: 13px; line-height: 1.25; }
.ap-meal-card small { font-size: 11.5px; color: var(--muted); }
.ap-meal-price { font-size: 14px; font-weight: 800; margin-top: 3px; }
.ap-meal-price em { font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--muted); display: block; }

.ap-list-rows { display: flex; flex-direction: column; gap: 10px; }
.ap-list-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg);
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  transition: box-shadow .13s;
}
.ap-list-row:hover { box-shadow: var(--shadow); }
.ap-list-row > div { flex: 1; min-width: 0; }
.ap-list-row strong { font-size: 14px; display: block; }
.ap-list-row small { font-size: 12px; color: var(--muted); line-height: 1.45; }
.ap-list-row svg { color: var(--muted); flex-shrink: 0; }
.ap-list-icon {
  width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; flex-shrink: 0;
}
.li-green  { background: #e3f4e3; }
.li-pink   { background: #fde7ef; }
.li-purple { background: #efe7fd; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1180px) {
  .ap-store-grid { grid-template-columns: repeat(4, 1fr); }
  .ap-cat-grid { grid-template-columns: repeat(4, 1fr); }
  .ap-two-col { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .ap-sidebar { display: none; }          /* hook: mobile nav drawer */
  .ap-main { padding: 22px 16px 50px; }
  .ap-topbar { padding: 10px 14px; gap: 12px; }
  .ap-topbar-search { display: none; }    /* hook: mobile search */
  .ap-store-grid, .ap-cat-grid { grid-template-columns: repeat(3, 1fr); }
  .ap-meal-row { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════════════════════
   Meals page (meals.html)
═══════════════════════════════════════════════════════════ */
.ml-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; margin-bottom: 18px;
}
.ml-title { font-size: 30px; font-weight: 800; letter-spacing: -.5px; }
.ml-sub { font-size: 14px; color: var(--ink-2); margin-top: 4px; }
.ml-plan-btn {
  display: flex; align-items: center; gap: 9px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 11px;
  font: inherit; font-size: 14px; font-weight: 700; color: var(--ink);
  padding: 11px 18px; cursor: pointer; flex-shrink: 0;
  transition: box-shadow .13s;
}
.ml-plan-btn:hover { box-shadow: var(--shadow); }

/* Search + filters */
.ml-search-row { display: flex; gap: 10px; }
.ml-search-box {
  flex: 1;
  display: flex; align-items: center; gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0 16px;
  color: var(--muted);
}
.ml-search-box input {
  flex: 1; border: none; background: transparent;
  font: inherit; font-size: 14.5px; color: var(--ink);
  height: 46px; outline: none;
}
.ml-filters-btn {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-2);
  padding: 0 18px; cursor: pointer;
}
.ml-filters-btn:hover { box-shadow: var(--shadow); }

/* Filter chips */
.ml-chips {
  display: flex; gap: 9px; margin-top: 14px;
  overflow-x: auto; padding-bottom: 4px;
}
.ml-chip {
  display: flex; align-items: center; gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 11px;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink-2);
  padding: 10px 16px; cursor: pointer; white-space: nowrap;
  transition: border-color .12s, background .12s;
}
.ml-chip:hover { border-color: #cfccc2; }
.ml-chip.active {
  background: var(--green-tint);
  border-color: #b8dfb8;
  color: var(--green);
}
.ml-chip--arrow { padding: 10px 13px; font-weight: 800; }

/* Popular meal cards */
.ml-card-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
.ml-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow .13s;
}
.ml-card:hover { box-shadow: var(--shadow); }
.ml-card-img {
  position: relative;
  aspect-ratio: 1.5;
  background: var(--orange-tint);
  display: flex; align-items: center; justify-content: center;
  font-size: 46px;
}
.ml-bookmark {
  position: absolute; top: 8px; right: 8px;
  width: 30px; height: 30px; border-radius: 9px;
  background: rgba(255,255,255,.92);
  border: none; cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.ml-card-body {
  padding: 12px 13px 13px;
  display: flex; flex-direction: column; gap: 2px;
  flex: 1;
}
.ml-card-body strong { font-size: 14px; line-height: 1.25; }
.ml-card-body small { font-size: 11.5px; color: var(--muted); }
.ml-est { font-size: 10.5px; color: var(--muted); margin-top: 7px; }
.ml-price { font-size: 17px; font-weight: 800; }
.ml-save {
  align-self: flex-start;
  background: var(--green-tint);
  color: var(--green);
  font-size: 10.5px; font-weight: 700;
  border-radius: 6px;
  padding: 2px 7px; margin-top: 3px;
}
.ml-add-btn {
  margin-top: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 9px;
  font: inherit; font-size: 12px; font-weight: 700; color: var(--ink-2);
  padding: 8px 6px; cursor: pointer;
  transition: border-color .12s, color .12s;
}
.ml-add-btn:hover { border-color: var(--green); color: var(--green); }

/* Three curated panels */
.ml-three-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 30px;
}
.ml-panel-title { font-size: 15.5px !important; }
.ml-panel-title em { font-style: normal; font-weight: 600; font-size: 12.5px; color: var(--muted); }
.ml-rows { display: flex; flex-direction: column; }
.ml-row {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 2px;
  border-bottom: 1px solid #f1efe9;
}
.ml-rows .ml-row:last-child { border-bottom: none; }
.ml-row-thumb {
  width: 44px; height: 44px; border-radius: 10px;
  background: var(--orange-tint);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0;
}
.ml-row-info { flex: 1; min-width: 0; }
.ml-row-info strong { font-size: 13px; display: block; line-height: 1.25; }
.ml-row-info small { font-size: 11.5px; color: var(--muted); }
.ml-row-price { text-align: right; font-size: 14px; font-weight: 800; flex-shrink: 0; }
.ml-row-price em { display: block; font-style: normal; font-size: 10px; font-weight: 600; color: var(--muted); }
.ml-bookmark-sm {
  background: none; border: 1px solid var(--border);
  border-radius: 8px; width: 30px; height: 30px;
  cursor: pointer; font-size: 13px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.ml-panel-footer {
  width: 100%;
  margin-top: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  font: inherit; font-size: 13px; font-weight: 700; color: var(--ink-2);
  padding: 10px; cursor: pointer;
  transition: border-color .12s;
}
.ml-panel-footer:hover { border-color: #cfccc2; }

/* Bottom banner */
.ml-banner {
  display: flex; align-items: center; gap: 16px;
  background: var(--green-tint);
  border-radius: 16px;
  padding: 20px 24px;
  margin-top: 30px;
}
.ml-banner-icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; flex-shrink: 0;
}
.ml-banner-text { flex: 1; }
.ml-banner-text strong { font-size: 16px; display: block; }
.ml-banner-text small { font-size: 13px; color: var(--ink-2); }
.ml-banner-btn { flex-shrink: 0; }

@media (max-width: 1180px) {
  .ml-card-row { grid-template-columns: repeat(3, 1fr); }
  .ml-three-col { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .ml-card-row { grid-template-columns: repeat(2, 1fr); }
  .ml-head { flex-direction: column; }
}

/* ══════════════════════════════════════════════════════════
   Community Lists page (community.html)
═══════════════════════════════════════════════════════════ */
.cl-headline { display: flex; align-items: flex-start; gap: 14px; }
.cl-head-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: #efe7fd; color: #7c4dcc;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 3px;
}
.cl-create-btn {
  display: flex; align-items: center; gap: 9px;
  background: var(--surface);
  border: 1.5px solid var(--green);
  border-radius: 11px;
  font: inherit; font-size: 14px; font-weight: 700; color: var(--green);
  padding: 11px 18px; cursor: pointer; flex-shrink: 0;
  transition: background .12s;
}
.cl-create-btn:hover { background: var(--green-tint); }

.cl-filter-row { display: flex; align-items: flex-start; gap: 12px; }
.cl-filter-row .ml-chips { flex: 1; margin-top: 0; }
.cl-sort {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 11px;
  font: inherit; font-size: 13.5px; color: var(--ink-2);
  padding: 10px 16px; cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.cl-sort strong { color: var(--ink); }

/* Featured list cards */
.cl-card-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
.cl-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow .13s;
}
.cl-card:hover { box-shadow: var(--shadow); }
.cl-card-img {
  position: relative;
  aspect-ratio: 1.6;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; letter-spacing: 2px;
}
.img-tint-a { background: #fdf3dd; }
.img-tint-b { background: #e9f0fb; }
.img-tint-c { background: #e6f4e6; }
.img-tint-d { background: #fdeee4; }
.img-tint-e { background: #fbeaea; }
.cl-badge {
  position: absolute; top: 8px; left: 8px;
  font-style: normal; font-size: 10.5px; font-weight: 800;
  border-radius: 7px; padding: 4px 9px;
}
.bd-yellow { background: #fdf0c2; color: #92600a; }
.bd-purple { background: #e9def9; color: #6b3fb5; }
.bd-green  { background: #d9efd9; color: #1d7a34; }
.bd-blue   { background: #dbe7fb; color: #2456b3; }
.bd-pink   { background: #fbdeea; color: #b1336d; }
.cl-card-body {
  padding: 12px 13px 13px;
  display: flex; flex-direction: column; gap: 5px; flex: 1;
}
.cl-card-body strong { font-size: 14.5px; line-height: 1.2; }
.cl-card-body p { font-size: 12px; line-height: 1.4; color: var(--ink-2); flex: 1; }
.cl-author {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; color: var(--ink-2);
}
.cl-author-dot {
  width: 18px; height: 18px; border-radius: 50%;
  background: #e8e4d9; color: var(--ink-2);
  font-style: normal; font-size: 10px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
.cl-author em, .cl-check { font-style: normal; color: var(--green); font-weight: 800; }
.cl-meta {
  display: flex; gap: 12px;
  font-size: 11px; font-weight: 600; color: var(--muted);
}
.cl-actions { display: flex; gap: 7px; margin-top: 8px; }
.cl-add-btn {
  flex: 1;
  background: var(--green);
  border: none; border-radius: 9px;
  font: inherit; font-size: 12px; font-weight: 700; color: #fff;
  padding: 9px 4px; cursor: pointer;
  transition: background .12s;
}
.cl-add-btn:hover { background: var(--green-hover); }

/* Lower area: categories + recent | impact */
.cl-lower {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px;
  align-items: start;
}
.cl-cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.cl-cat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 8px 13px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  text-align: center; cursor: pointer;
  transition: box-shadow .13s;
}
.cl-cat-card:hover { box-shadow: var(--shadow); }
.cl-cat-card strong { font-size: 13px; }
.cl-cat-card small { font-size: 11.5px; color: var(--muted); }
.cl-cat-icon {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; margin-bottom: 5px; flex-shrink: 0;
}
.ci-purple { background: #efe7fd; }
.ci-green  { background: #e3f4e3; }
.ci-pink   { background: #fde7ef; }
.ci-orange { background: #fdeede; }
.ci-yellow { background: #fdf3d5; }
.ci-blue   { background: #e2ebfc; }
.ci-gray   { background: var(--bg); color: var(--muted); font-weight: 800; }

.cl-recent-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.cl-recent-row {
  display: flex; align-items: center; gap: 11px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 11px 13px;
  transition: box-shadow .13s;
}
.cl-recent-row:hover { box-shadow: var(--shadow); }

/* Impact panel */
.cl-impact {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px;
  margin-top: 30px;
  display: flex; flex-direction: column; gap: 10px;
}
.cl-impact-title { font-size: 15px; font-weight: 800; margin-bottom: 4px; }
.cl-impact-row {
  display: flex; align-items: center; gap: 11px;
  background: var(--bg);
  border-radius: 12px;
  padding: 11px 13px;
}
.cl-impact-row > div { flex: 1; min-width: 0; }
.cl-impact-row strong { font-size: 16px; display: block; }
.cl-impact-row small { font-size: 11.5px; color: var(--muted); }
.cl-impact-note {
  font-size: 10.5px; font-weight: 600; color: var(--muted);
  text-align: right; max-width: 84px;
}
.cl-impact-btn {
  background: none; border: none;
  font: inherit; font-size: 13.5px; font-weight: 700; color: var(--green);
  cursor: pointer; padding: 8px;
}
.cl-impact-btn:hover { text-decoration: underline; }

.cl-footnote {
  text-align: center;
  font-size: 12px; color: var(--muted);
  margin-top: 28px;
}

@media (max-width: 1180px) {
  .cl-card-row { grid-template-columns: repeat(3, 1fr); }
  .cl-lower { grid-template-columns: 1fr; }
  .cl-impact { margin-top: 0; }
}
@media (max-width: 820px) {
  .cl-card-row { grid-template-columns: repeat(2, 1fr); }
  .cl-cat-grid { grid-template-columns: repeat(3, 1fr); }
  .cl-recent-grid { grid-template-columns: 1fr; }
  .cl-filter-row { flex-direction: column; }
}