/* ═══════════════════════════════════════════════════════════════════
   Saanjhi Books — category browse + search results
   Source: the design project's books-category.css ("Saanjhi - Childrens
   Category"). Component rules are that file's, kept verbatim so the page
   matches the direction; only the CANVAS scaffolding has been removed
   (body backdrop, .col, .chead, .cnum, .why, .frame, and the .map diagram),
   plus responsive rules the fixed-width comp did not need.

   Loaded IN ADDITION to books-theme.css + books-components.css, which
   already supply the tokens, chrome, .f-pager, .f-chip and .f-mega. This
   file deliberately does NOT redefine those.

   Class names here stay unprefixed and scoped under `.f`, exactly as the
   design file has them. That is safe on these pages because the books
   chrome does not load Bootstrap — unlike the f- prefixed component library,
   which must survive alongside it on unconverted pages.
   ═══════════════════════════════════════════════════════════════════ */

/* ── category header ── */
.f .chead2{background:var(--surf);border-bottom:1px solid var(--line);padding:30px 0 34px}
.f .ct{display:flex;align-items:flex-end;justify-content:space-between;gap:50px;flex-wrap:wrap}
.f .ct h1{font-family:"Newsreader",serif;font-size:46px;font-weight:500;letter-spacing:-.03em;line-height:1.04;margin-bottom:10px}
.f .ct p{font-size:15.5px;line-height:1.6;color:var(--mut);max-width:580px}
.f .ct .cnt{font-family:"JetBrains Mono",monospace;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--acc);margin-bottom:12px}
.f .ages{display:flex;gap:9px;margin-top:22px;flex-wrap:wrap}
.f .ages a{border:1.5px solid var(--line);background:#fff;border-radius:100px;padding:10px 17px;font-size:13.5px;font-weight:700}
.f .ages a.on{background:var(--ink);border-color:var(--ink);color:#fff}
.f .ages a b{color:#a9a49c;font-weight:700;font-size:11.5px;margin-left:6px}
.f .ages a.on b{color:rgba(255,255,255,.55)}

/* ── two-column body ── */
.f .cbody{display:grid;grid-template-columns:252px minmax(0,1fr);gap:44px;padding:34px 0 60px;align-items:start}
.f .side{position:sticky;top:20px}
.f .grp{border-bottom:1px solid var(--line);padding:0 0 20px;margin-bottom:20px}
.f .grp:last-child{border-bottom:none}
.f .grp h4{font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;margin-bottom:14px;display:flex;justify-content:space-between;align-items:center}
.f .grp h4 span{color:var(--mut);font-weight:700;font-size:15px;line-height:1}

/* category tree */
.f .tree{list-style:none;font-size:13.5px;margin:0;padding:0}
.f .tree li{margin-bottom:9px}
.f .tree a{display:flex;justify-content:space-between;gap:12px;font-weight:600}
.f .tree a b{color:#a9a49c;font-weight:700;font-size:11.5px;flex:none}
.f .tree .par>a{font-weight:800}
.f .tree .par.on>a{color:var(--acc)}
.f .kid{list-style:none;margin:10px 0 4px;padding-left:13px;border-left:1.5px solid var(--line)}
.f .kid li{margin-bottom:8px}
.f .kid a{font-size:13px;font-weight:600;color:#4c5157}
.f .kid li.on a{color:var(--acc);font-weight:800}
.f .kid li.on{border-left:1.5px solid var(--acc);margin-left:-14.5px;padding-left:13px}

/* ── results toolbar ── */
.f .lbar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:18px;flex-wrap:wrap}
.f .lbar .n{font-size:13.5px;color:var(--mut);font-weight:600}
.f .lbar .n b{color:var(--ink);font-weight:800}
.f .sortg{display:flex;align-items:center;gap:10px}
.f .sortg label{font-size:13px;color:var(--mut);font-weight:600}
.f .sel{display:flex;align-items:center;gap:9px;border:1.5px solid var(--line);border-radius:100px;padding:0 6px 0 15px;font-size:13px;font-weight:700;background:#fff}
.f .sel select{border:0;background:none;font:inherit;font-size:13px;font-weight:700;color:var(--ink);padding:9px 6px;outline:none;cursor:pointer}

/* ── results grid ── */
.f .g4{display:grid;grid-template-columns:repeat(4,1fr);gap:26px 22px}
.f .g4 .bc .bk{margin-bottom:12px}
.f .g4 .bc .bt{font-size:14.5px;font-weight:700;line-height:1.32;margin-bottom:3px}
.f .g4 .bc .ba{font-size:12.5px;color:var(--mut);margin-bottom:5px}
.f .g4 .bc .bm{font-size:11.5px;color:#8d8880;font-weight:600;margin-bottom:9px}
.f .g4 .bc .bp{display:flex;align-items:baseline;gap:7px;margin-bottom:6px;flex-wrap:wrap}
.f .g4 .bc .bp b{font-size:15.5px;font-weight:800}
.f .g4 .bc .bp s{font-size:12.5px;color:var(--mut);font-weight:600}
.f .g4 .bc .bp .sv{font-size:11.5px;font-weight:800;color:var(--acc)}
.f .flag.g{background:var(--acc);color:#fff}

/* interstitial promo row */
.f .inter{grid-column:1/-1;background:var(--surf);border-radius:4px;padding:26px 30px;display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.f .inter h4{font-family:"Newsreader",serif;font-size:24px;font-weight:500;margin-bottom:5px}
.f .inter p{font-size:13.5px;color:var(--mut);line-height:1.55;max-width:560px}
.f .inter .b{margin-left:auto;background:var(--ink);color:#fff;padding:12px 22px;border-radius:100px;font-size:13px;font-weight:800;white-space:nowrap}

/* ── SEO tail ── */
.f .seo{border-top:1px solid var(--line);padding:40px 0 0;margin-top:24px}
.f .seo h3{font-family:"Newsreader",serif;font-size:26px;font-weight:500;letter-spacing:-.02em;margin-bottom:12px}
.f .seo p{font-size:14.5px;line-height:1.7;color:#4c5157;max-width:820px;margin-bottom:12px}
.f .rel{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.f .rel a{border:1px solid var(--line);border-radius:100px;padding:9px 16px;font-size:13px;font-weight:600;background:var(--surf)}

/* ── responsive (the comp is a fixed 1280 canvas and has none) ── */
@media(max-width:1080px){
  .f .g4{grid-template-columns:repeat(3,1fr)}
  .f .ct h1{font-size:36px}
}
@media(max-width:900px){
  .f .cbody{grid-template-columns:minmax(0,1fr);gap:26px}
  .f .side{position:static}
  .f .g4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .f .g4{grid-template-columns:repeat(2,1fr);gap:20px 14px}
  .f .ct h1{font-size:28px}
  .f .lbar{gap:12px}
  .f .inter{padding:20px}
  .f .inter .b{margin-left:0}
}

/* ── card actions, availability and lifecycle ──────────────────────────
   Added when ProductSummary.ftl's behaviour was ported into the books cards
   (audit findings H2, H6, M18). .bc is now a div wrapping .bcl (the link) plus
   the price, availability and action rows, because a <form> cannot be nested
   inside an <a>. The pre-existing `.f .g4 .bc <child>` rules are unaffected —
   they are descendant selectors, so they still match through .bcl. */
.f .bcl{display:block;color:inherit;text-decoration:none}
.f .bav{font-size:11.5px;font-weight:700;margin-bottom:2px}
.f .bav.ok{color:var(--acc)}
.f .bav.warn{color:var(--gold)}
.f .beta{font-size:11.5px;color:var(--mut);margin-bottom:9px}
.f .bact{margin-top:2px}
.f .baddform{margin:0}
.f .bbtn{display:block;width:100%;text-align:center;background:var(--ink);color:#fff;border:0;padding:9px 14px;border-radius:100px;font:inherit;font-size:12.5px;font-weight:800;cursor:pointer;text-decoration:none}
.f .bbtn:hover{background:#000}
.f .bbtn.alt{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.f .bbtn:disabled{background:var(--surf);color:var(--mut);border:1.5px solid var(--line);cursor:not-allowed}
.f .bstate{font-size:12px;font-weight:700;color:var(--sale);padding:8px 0}