/* ============================================================
   KHNEW — Catalog / product-listing page styles.

   PAGE-SPECIFIC ONLY. The site chrome (font, reset, :root tokens, .wrap,
   buttons, topbar, header, nav, search, footer, floating WhatsApp) lives in
   critical.css + chrome.css, which every page already loads. This file used
   to carry a stale copy of all of that, and because it loads *after*
   chrome.css it silently overrode the real header/footer with older values
   (wrong mobile-drawer width, topbar spacing, footer columns). That copy is
   removed — chrome.css is now the single source of truth for chrome.

   Note: this file is also loaded by other pages (faq, legal, …) for the
   shared page furniture below (.page-hero, .breadcrumb, .band-wrap).
   ============================================================ */

/* ---------- Page hero / breadcrumb banner ---------- */
.page-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--cream) 0%,#fdfbf6 100%)}
.page-hero .wrap{position:relative;z-index:2;padding-block:clamp(2.25rem,5vw,3.75rem);text-align:center}
.page-hero .eyebrow{margin-bottom:.45rem}
.page-hero h1{font-size:clamp(1.9rem,4vw,2.9rem);line-height:1.12;color:var(--green-900);
  font-weight:800;letter-spacing:-.01em}
.page-hero h1 b{color:var(--red);font-weight:inherit}
.page-hero p{color:var(--muted);max-width:44rem;margin:.8rem auto 0;font-size:1.02rem}
.breadcrumb{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:.45rem;
  font-size:.85rem;color:var(--muted);margin-top:1.1rem}
.breadcrumb a{color:var(--green-700);font-weight:600}
.breadcrumb a:hover{color:var(--red)}
.breadcrumb svg{width:1em;height:1em;color:var(--line)}
.breadcrumb [aria-current]{color:var(--ink);font-weight:600}
.page-hero .leaf-deco{position:absolute;color:var(--green-600);opacity:.08;z-index:1;pointer-events:none}
.page-hero .leaf-deco.one{width:170px;height:170px;top:-30px;left:-30px;transform:rotate(20deg)}
.page-hero .leaf-deco.two{width:210px;height:210px;bottom:-60px;right:-40px;transform:rotate(-140deg)}

/* ---------- Category quick-filter pills ---------- */
.catbar{background:var(--cream);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.catbar .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.75rem 1.25rem;padding-block:1rem}
.cat-pills{display:flex;flex-wrap:wrap;gap:.5rem}
.cat-pill{display:inline-flex;align-items:center;gap:.4rem;font-size:.85rem;font-weight:600;
  color:var(--green-900);background:#fff;border:1px solid var(--line);border-radius:50px;
  padding:.5rem 1rem;transition:background .18s,color .18s,border-color .18s}
.cat-pill:hover,.cat-pill.is-active{background:var(--green-700);color:#fff;border-color:var(--green-700)}
.result-count{display:inline-block;font-size:.8rem;color:var(--green-900);font-weight:700;
  background:var(--cream);border:1px solid var(--line);border-radius:999px;padding:.32rem .85rem;white-space:nowrap}
.result-count b{color:var(--red)}

/* ---------- Intro (text + tags) ---------- */
.story .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(1.75rem,4vw,3.25rem);align-items:center}
.story-rule{display:block;width:54px;height:3px;border-radius:3px;background:var(--green-600);margin:.55rem 0 1.1rem}
.story h2{font-size:clamp(1.7rem,3vw,2.4rem);color:var(--green-900);line-height:1.18;font-weight:800}
.story h2 b{color:var(--red);font-weight:inherit}
.story-copy p{color:var(--muted);margin-top:1rem;line-height:1.7}
.story-copy p:first-of-type{margin-top:0}
.story-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem}
.story-tags span{font-size:.82rem;font-weight:600;color:var(--green-900);background:var(--cream);
  border:1px solid var(--line);border-radius:50px;padding:.45rem .95rem}
.story-media{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow)}
.story-media img{width:100%;height:100%;aspect-ratio:4/3.2;object-fit:cover}
.story-media .badge-since{position:absolute;left:1.1rem;bottom:1.1rem;background:rgba(31,91,42,.94);
  color:#fff;border-radius:var(--radius);padding:.7rem 1.1rem;line-height:1.15;box-shadow:var(--shadow)}
.story-media .badge-since b{display:block;font-size:1.35rem}
.story-media .badge-since span{font-size:.74rem;color:#d6ead6;letter-spacing:.04em;text-transform:uppercase}

/* ---------- Product grid (cards) ----------
   Distinct from the home page's carousel card in critical.css: here the cards
   sit in a responsive grid rather than a horizontal scroll-snap rail. */
.cat-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:.75rem;
  margin-bottom:clamp(1.25rem,2.5vw,1.85rem)}
.cat-head h2{font-size:clamp(1.45rem,2.6vw,2rem);color:var(--green-900);font-weight:800;line-height:1.2}
.cat-head h2 b{color:var(--red);font-weight:inherit}
.cat-head .eyebrow{margin-bottom:.3rem}
.cat-head p{color:var(--muted);font-size:.92rem;margin-top:.3rem;max-width:40rem}
.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(190px,100%),1fr));gap:var(--gap)}
.pcard{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:6px;
  overflow:hidden;background:#fff;flex:none;transition:transform .25s,box-shadow .25s,border-color .25s}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--green-600)}

/* ---------- CTA band ---------- */
.band-wrap{padding-block:clamp(2rem,4vw,3.25rem)}

/* ---------- Responsive (page-specific only) ---------- */
@media (max-width:860px){
  .catbar{position:static}
  .story .wrap{grid-template-columns:1fr}
  .story-media{order:-1}
}

/* On a phone the page hero was pushing the first product 786px down — past a
   whole screen — with a 3-line headline and a 6-line paragraph. Tighten the type
   and padding so visitors land on products, not on a wall of copy. */
@media (max-width:640px){
  .page-hero .wrap{padding-block:1.4rem}
  .page-hero h1{font-size:1.5rem;line-height:1.25}
  .page-hero p{font-size:.9rem;line-height:1.55;margin-top:.55rem}
  .page-hero .eyebrow{font-size:.72rem;margin-bottom:.3rem}
  .page-hero .leaf-deco{display:none}   /* decorative only; they crowd a small screen */
  .breadcrumb{margin-top:.8rem;font-size:.8rem}

  /* Section heads: the blurb under each category title ("Freshly milled masalas…",
     "Premium whole spices…") is desktop copy — on a phone it just pushes the products
     further down, and the same story is already told in the hero. Drop it, and keep the
     product count on the heading's row, pinned right. */
  .cat-head{margin-bottom:1rem;flex-wrap:nowrap;align-items:center;gap:.6rem}
  /* Title and count both step down a size so the longest heading ("Whole Spices & Seeds")
     and its pill share a single line at 390px instead of the title wrapping to two. */
  .cat-head h2{font-size:1.02rem;white-space:nowrap}
  .cat-head .eyebrow{font-size:.68rem}
  .cat-head > div{min-width:0}             /* let the title shrink rather than shove the count off */
  .cat-head > div > p{display:none}        /* not `.cat-head p` — that would hit .result-count too */
  .cat-head .result-count{flex:none;font-size:.7rem;padding:.28rem .6rem}

  /* Two products per row on phones. chrome.css already asks for this, but the unconditional
     .prod-grid above (auto-fill, min 190px) loads later and wins — inside a 342px column
     190px only fits once, so the catalog dropped to a single card per row. Restate it here.
     minmax(0,…), not 1fr: a bare 1fr can't shrink below the card's content width and would
     push the grid past the viewport. */
  .prod-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem}

  /* Pack sizes (1 Kg / 5 Kgs / 25 Kgs) on one line. In a 2-up grid the card is only ~133px
     wide but the chips need ~152px at their default size, so "25 Kgs" wrapped to a second
     row. Tighten the type, padding and gap so all three fit across. */
  .pack-sizes{flex-wrap:nowrap;gap:.22rem}
  .pack-sizes span{font-size:.6rem;padding:.18rem .34rem;white-space:nowrap}
}

/* Small phones (iPhone SE, 320px): at the sizes above, "Whole Spices & Seeds" + its pill
   need more room than the 272px of content width, and because the title is nowrap that
   spilled off-screen. Step both down once more so the row still fits on one line. */
@media (max-width:380px){
  .cat-head{gap:.45rem}
  .cat-head h2{font-size:.88rem}
  .cat-head .result-count{font-size:.64rem;padding:.24rem .5rem}
  /* The chip row only has ~98px here and the three chips wanted ~101px. Trim the gap and
     side padding rather than the text — 8.6px type is already as small as it should go. */
  .pack-sizes{gap:.1rem}
  .pack-sizes span{font-size:.54rem;padding:.16rem .2rem}
}