:root{
    --bg:#f7f7f8; --surface:#fff; --ink:#0f172a; --muted:#475569;
    --line:#e5e7eb; --chip:#eef2f7; --ring:#3b82f6; --accent:#0ea5e9;
    --radius:14px; --shadow:0 10px 30px rgba(0,0,0,.08);
  }
  
  html { color-scheme: light; }
  body {
    margin:0;
    font-family: system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
    background:var(--bg);
    color:var(--ink);
  }
  
  .page-wrap{ max-width:85vw; margin:2rem auto; padding:0 1rem; }
  
  /* ---------------- Header ---------------- */
  .header{
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:linear-gradient(180deg,#0f172a 0%,#1f2937 100%);
    color:#fff;
    padding:1.25rem 1.25rem 1rem;
    margin-bottom:1rem;
    box-shadow:var(--shadow);
  }
  .header h1{ margin:0 0 .25rem; font-size:1.75rem; }
  .header p{ margin:.25rem 0 0; opacity:.9; }
  
  /* ---------------- Toolbar ---------------- */
  .toolbar{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:.75rem;
    margin:1rem 0 1.25rem;
  }
  
  /* Select & input share style */
  .select,.input{
    background:var(--surface);
    border:1px solid var(--line);
    color:var(--ink);
    border-radius:10px;
    padding:.55rem .7rem;
    font-size:.95rem;
    outline:none;
    transition:border-color .15s ease, box-shadow .15s ease;
  }
  
  /* Search grows to fill remaining space */
  .toolbar .input{
    flex:1 1 250px;
    min-width:200px;
  }
  
  .select:focus,.input:focus{
    border-color:var(--ring);
    box-shadow:0 0 0 3px rgba(59,130,246,.15);
  }
  
  /* Buttons */
  .btn{
    display:inline-block;
    border-radius:10px;
    padding:.55rem .85rem;
    font-weight:600;
    border:1px solid #111;
    background:#fff;
    color:#111;
    text-decoration:none;
    transition:
      background-color .15s ease,
      color .15s ease,
      border-color .15s ease,
      box-shadow .15s ease,
      transform .02s;
  }
  
  /* Push last button to the end of the row when space allows */
  .toolbar .btn:last-of-type{ margin-left:auto; }
  
  .btn:hover{ background:#111; color:#fff; text-decoration:underline; }
  .btn:active{ transform:translateY(1px); }
  .btn:focus-visible{ outline:2px solid #111; outline-offset:2px; }
  
  /* Optional spacer (kept minimal) */
  .spacer{ flex:0 0 auto; }
  
  /* Results count */
  .muted{ color:#64748b; font-size:.9rem; }
  
  /* Responsive toolbar */
  @media (max-width:640px){
    .toolbar{ flex-direction:column; align-items:stretch; }
    .toolbar .select, .toolbar .input{ flex:1 1 100%; }
    .toolbar .btn, .toolbar .muted{ align-self:flex-end; }
    .toolbar .btn:last-of-type{ margin-left:0; }
  }
  
  /* ---------------- Section heading ---------------- */
  .cat-block{ margin:2rem 0 2.5rem; border-radius: 25px; background: white;}
  .cat-head { display:flex; gap:.75rem; margin:.25rem 0 .75rem; padding: 15px}
  .cat-muted { display:flex; gap:.75rem; margin:.25rem 0 .75rem; padding: 15px}
  .cat-title { margin:0; font-size:1.35rem; }
  
  /* ---------------- Cards ---------------- */
  .cards{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
    gap:14px;
    list-style:none;
    padding:15px;
    margin:0;
  }
  
  .card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:16px;
    position:relative;
    transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    will-change:transform;
    cursor:pointer; /* cards are clickable via data-href */
  }
  
  @media (hover:hover){
    .card:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
  }
  
  /* Focus style for keyboard navigation when card is focusable (tabindex) */
  .card:focus-visible{
    outline:3px solid rgba(59,130,246,.4);
    outline-offset:2px;
    border-color:var(--ring);
  }
  
  .card h3{ margin:0 0 .35rem; font-size:1.05rem; color:var(--ink); }
  .card p.desc{ margin:0 0 .75rem; color:var(--muted); min-height:2.6em; }
  
  /* Media */
  .card-media{
    margin:-16px -16px 12px;
    border-radius:calc(var(--radius) - 2px) calc(var(--radius) - 2px) 8px 8px;
    overflow:hidden;
    position:relative;
    aspect-ratio:16/9;
    background:#eef2f7;
  }
  
  .card-img{
    width:100%; height:100%;
    object-fit:cover; display:block;
    transition:transform .35s ease, filter .25s ease;
  }
  
  @media (hover:hover){
    .card:hover .card-img{ transform:scale(1.03); }
  }
  
  /* Price badge */
  .price-badge{
    position:absolute; top:10px; right:10px; z-index:2;
    background:rgba(0,0,0,.65);
    color:#fff;
    backdrop-filter:blur(4px);
    padding:.25rem .5rem;
    border-radius:10px;
    font-size:.85rem;
  }
  
  /* Placeholder image */
  .card-img.placeholder{
    display:grid; place-items:center;
    color:#334155; font-weight:800; font-size:1.8rem;
    text-shadow:0 1px 2px rgba(255,255,255,.35);
    background:#f1f5f9;
  }
  
  /* If you still want distinct placeholder variants, keep the hooks */
  .ph-0,.ph-1,.ph-2,.ph-3,.ph-4,.ph-5{ background:#f1f5f9; }
  
  /* Meta row */
  .meta-row{
    display:flex; align-items:center; gap:.5rem;
    margin-bottom:.75rem; position:relative; z-index:2;
  }
  
  .badge{
    display:inline-flex; align-items:center; gap:.4rem;
    background:var(--chip);
    border:1px solid var(--line);
    border-radius:999px;
    padding:.2rem .55rem;
    font-size:.85rem;
    color:var(--ink);
  }
  .badge .icon{ width:14px; height:14px; display:inline-block; vertical-align:middle; }
  
  /* Empty state & a11y helpers */
  .empty{ color:#64748b; text-align:center; margin:2rem 0; }
  .sr-only{
    position:absolute !important;
    width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
  
  /* Reduced motion */
  @media (prefers-reduced-motion:reduce){
    *{ transition:none !important; animation:none !important; }
  }

  /* ===========================
   Mobile (<= 480px)
   =========================== */
@media (max-width: 480px) {
    .page-wrap {
      max-width: 100vw;
      margin: 1rem auto;
      padding: 0 .75rem;
    }
  
    .header {
      padding: 1rem;
      margin-bottom: .75rem;
      border-radius: 12px;
    }
    .header h1 { font-size: 1.35rem; }
    .header p  { font-size: .95rem; }
  
    /* Toolbar: stack nicely, full-width controls, bigger tap targets */
    .toolbar {
      flex-direction: column;
      align-items: stretch;
      gap: .6rem;
      margin: .75rem 0 1rem;
    }
    .toolbar .select,
    .toolbar .input {
      flex: 1 1 100%;
      width: 100%;
      padding: .65rem .8rem;         /* larger touch area */
      font-size: 1rem;
    }
    .toolbar .btn {
      width: 100%;                   /* full width buttons on mobile */
      text-align: center;
      padding: .7rem .9rem;
      border-radius: 12px;
    }
    .toolbar .btn:last-of-type { margin-left: 0; }
    .toolbar .muted { align-self: flex-start; }
  
    /* Section headings */
    .cat-head {
      flex-wrap: wrap;
      gap: .5rem;
      margin: .25rem 0 .5rem;
    }
    .cat-title { font-size: 1.15rem; }
    .cat-count { font-size: .9rem; }
  
    /* Cards: single-column, tighter spacing, larger tap targets */
    .cards {
      grid-template-columns: 1fr;             /* stack */
      gap: 12px;
    }
    .card {
      padding: 14px;
      border-radius: 12px;
    }
    .card-media {
      margin: -14px -14px 10px;
      border-radius: 10px 10px 8px 8px;
      aspect-ratio: 16 / 10;                  /* a bit taller on mobile */
    }
    .price-badge {
      top: 8px; right: 8px;
      font-size: .8rem; padding: .2rem .45rem;
      border-radius: 8px;
    }
    .card h3 { font-size: 1rem; }
    .card p.desc { min-height: 2.2em; }
  
    .meta-row {
      flex-wrap: wrap;
      gap: .4rem .5rem;
      margin-bottom: .6rem;
    }
    .badge {
      font-size: .8rem;
      padding: .2rem .5rem;
    }
    .badge .icon { width: 13px; height: 13px; }
  }
  
  /* ===========================
     Small-to-Mid (481–768px)
     =========================== */
  @media (min-width: 481px) and (max-width: 768px) {
    .page-wrap { max-width: 95vw; }
  
    /* 2-up grid when space allows */
    .cards {
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    }
  
    .toolbar .input { flex: 1 1 300px; }
    .toolbar .btn:last-of-type { margin-left: auto; } /* right-align last btn when room */
  }
  
  /* ===========================
     Tablet (769–1024px)
     =========================== */
  @media (min-width: 769px) and (max-width: 1024px) {
    .page-wrap { max-width: 90vw; }
    .cards { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  }
  
  /* ===========================
     High-density touch tweaks
     =========================== */
  @media (pointer: coarse) {
    .btn { padding: .7rem 1rem; }
    .select, .input { padding: .65rem .85rem; }
  }
  
  /* ===========================
     Safe-area support (iOS)
     =========================== */
  @supports (padding: max(0px)) {
    .page-wrap {
      padding-left: max(1rem, env(safe-area-inset-left));
      padding-right: max(1rem, env(safe-area-inset-right));
    }
  }