/* ═══════════════════════════════════════════════════════════════════
   Saanjhi Books — PDP theme
   Source: Claude Design project "Saanjhi - Product Pages" (Direction 01).
   The component rules below are the design's books-pdp.css verbatim.
   Only the CANVAS scaffolding (.col/.chead/.frame absolute comp layout)
   has been replaced with real page scaffolding + responsive rules, and
   the image/rail helpers at the bottom have been added so real product
   photography can sit inside the design's .bk book-block.
   ═══════════════════════════════════════════════════════════════════ */
/* Archivo 700 is the wordmark face and is used by nothing else — the design's
   logo rules call for it to be added to the site import alongside the others. */
@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&family=Archivo:wght@700&display=swap");
*{box-sizing:border-box;margin:0;padding:0}
body{background:#fff;font-family:"Manrope",system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-wrap:pretty}
a{color:inherit;text-decoration:none}
a:hover{opacity:.72}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
/* design comp lays out on a 1168px grid; +48px absorbs the page gutters */
.sh{width:1216px;max-width:100%;margin:0 auto;padding:0 24px}
.stars{display:inline-flex;gap:2px}
.stars svg{width:13px;height:13px}
.bk{position:relative;aspect-ratio:2/3;background:#fff;overflow:hidden;border-radius:2px;box-shadow:0 1px 2px rgba(0,0,0,.14),0 10px 22px rgba(0,0,0,.1)}
.bk::before{content:"";position:absolute;left:0;top:0;bottom:0;width:9px;background:linear-gradient(90deg,rgba(0,0,0,.18),rgba(0,0,0,0));z-index:1;pointer-events:none}
.bk img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff}
/* ── shared chrome from Direction 01 ── */
.f{--ink:#14161a;--mut:#6b7076;--line:#e7e5e1;--surf:#f7f5f2;--acc:#1d5c4f;--sale:#a8352a;color:var(--ink)}
.f .abar{background:var(--ink);color:#fff;font-size:12.5px;font-weight:600;display:flex;justify-content:center;flex-wrap:wrap;gap:32px;padding:11px 24px}
.f .abar i{opacity:.4;font-style:normal}
.f .top{padding:18px 0;border-bottom:1px solid var(--line)}
.f .tv{display:flex;align-items:center;gap:26px}
/* ── logo: cut-paper mark + imprint stamp ──────────────────────────────────
   The design's recommended lockup. Wide tracked caps make an unfamiliar word
   get sounded out letter by letter instead of skimmed, and the rule around
   them is what reads as a publisher's imprint rather than a shop sign.

   Per the design's own rules the rule is NEVER dropped to save space — it is
   the mark. Narrow screens drop the inner Booksellers/est. block instead,
   which is what .logo.compact and the 720px query below do.
   Used by Header.ftl (top bar + drawer), Footer.ftl and CheckoutBar.ftl. */
.f .logo{display:inline-flex;align-items:center;gap:11px;white-space:nowrap}
.f .logo .mk{width:34px;height:34px;flex:none;display:block}
.f .logo .stamp{display:inline-flex;align-items:center;gap:11px;border:2px solid var(--ink);border-radius:3px;padding:8px 13px}
.f .logo .wmt{font-family:"Archivo",sans-serif;font-size:18px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;line-height:1;color:var(--ink)}
.f .logo .bar{display:block;width:1px;height:22px;background:var(--line);flex:none}
.f .logo .sm{font-family:"Manrope",sans-serif;font-size:7px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--mut);line-height:1.5}
/* keep the rule, drop the inner block */
.f .logo.compact .mk{width:26px;height:26px}
.f .logo.compact .stamp{gap:0;padding:7px 11px}
.f .logo.compact .wmt{font-size:15px}
.f .logo.compact .bar,.f .logo.compact .sm{display:none}
@media(max-width:720px){
  .f .logo .mk{width:26px;height:26px}
  .f .logo .stamp{gap:0;padding:7px 11px}
  .f .logo .wmt{font-size:15px}
  .f .logo .bar,.f .logo .sm{display:none}
}
.f .srch{flex:1;display:flex;align-items:center;gap:10px;background:var(--surf);border:1.5px solid var(--line);border-radius:100px;padding:12px 8px 12px 18px;color:var(--mut);font-size:14.5px}
.f .srch input{flex:1;min-width:0;border:0;background:none;font:inherit;color:var(--ink);outline:none}
.f .srch input::placeholder{color:var(--mut)}
.f .srch .go{margin-left:auto;background:var(--ink);color:#fff;border-radius:100px;padding:8px 18px;font-size:13px;font-weight:700}
.f .tic{display:flex;align-items:center;gap:18px;font-size:13px;font-weight:700}
.f .tic a{display:flex;align-items:center;gap:7px}
.f .genres{border-bottom:1px solid var(--line);padding:13px 0}
.f .gv{display:flex;gap:26px;font-size:14px;font-weight:600;overflow-x:auto;scrollbar-width:none}
.f .gv::-webkit-scrollbar{display:none}
.f .gv a{white-space:nowrap}
.f .gv .hot{color:var(--sale);font-weight:800}
.f .gv .on{color:var(--acc);font-weight:800}
.f .crumb{padding:16px 0;font-size:12.5px;color:var(--mut);font-weight:600;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.f .crumb i{opacity:.42;font-style:normal}
.f .crumb b{color:var(--ink);font-weight:700}
/* ── PDP core ── */
.f .pdp{display:grid;grid-template-columns:318px minmax(0,1fr) 330px;gap:40px;padding:8px 0 60px;align-items:start}
.f .gal{position:sticky;top:20px}
.f .gal .main .bk{box-shadow:0 3px 8px rgba(0,0,0,.14),0 26px 50px rgba(0,0,0,.16)}
.f .look{margin-top:14px;display:flex;gap:9px}
.f .look span{flex:1;text-align:center;border:1.5px solid var(--line);border-radius:100px;padding:10px;font-size:12.5px;font-weight:700;color:var(--mut)}
.f .info h1{font-family:"Newsreader",serif;font-size:42px;font-weight:500;line-height:1.06;letter-spacing:-.028em;margin-bottom:10px}
.f .byline{font-size:16px;color:var(--mut);margin-bottom:16px}
.f .byline a{color:var(--acc);font-weight:700;border-bottom:1px solid currentColor}
.f .rrow{display:flex;align-items:center;gap:14px;font-size:13px;font-weight:600;color:var(--mut);padding-bottom:20px;border-bottom:1px solid var(--line);margin-bottom:20px;flex-wrap:wrap}
.f .rrow .stars{color:#c8871f}
.f .rrow b{color:var(--ink)}
.f .rrow .pill{background:var(--surf);border-radius:100px;padding:5px 11px;font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--acc)}
.f .rrow .pill.warn{color:#8a5d10}
.f .blurb{font-family:"Newsreader",serif;font-size:19px;line-height:1.55;margin-bottom:16px}
.f .desc p{font-size:15px;line-height:1.68;color:#3f4348;margin-bottom:13px}
.f .desc ul{list-style:none;margin:0 0 15px}
.f .desc ul li{position:relative;font-size:15px;line-height:1.6;color:#3f4348;padding-left:20px;margin-bottom:9px}
.f .desc ul li::before{content:"";position:absolute;left:2px;top:9px;width:5px;height:5px;border-radius:100px;background:var(--acc)}
.f .desc .stamp{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.04em;color:var(--mut);margin-top:18px}
.f .more{font-size:13.5px;font-weight:700;border-bottom:1.5px solid var(--ink);padding-bottom:2px}
.f .praise{background:var(--surf);border-radius:4px;padding:24px 26px;margin:26px 0}
.f .praise h4{font-size:11.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--acc);margin-bottom:14px}
.f .praise q{display:block;font-family:"Newsreader",serif;font-size:17px;line-height:1.5;font-style:italic;margin-bottom:8px}
.f .praise .src{font-size:12.5px;color:var(--mut);font-weight:700;margin-bottom:16px}
.f .praise div:last-child .src{margin-bottom:0}
.f .specs{display:grid;grid-template-columns:1fr 1fr;gap:0 34px;margin-top:8px}
.f .specs .sr{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.f .specs .sr span{color:var(--mut);font-weight:600}
.f .specs .sr b{font-weight:700;text-align:right}
.f h3.sec{font-family:"Newsreader",serif;font-size:26px;font-weight:500;letter-spacing:-.02em;margin:34px 0 16px}
/* buy box */
.f .buy{border:1.5px solid var(--line);border-radius:5px;padding:24px;position:sticky;top:20px}
.f .price{display:flex;align-items:baseline;gap:10px;margin-bottom:5px;flex-wrap:wrap}
.f .price b{font-size:32px;font-weight:800;letter-spacing:-.02em}
.f .price s{font-size:15px;color:var(--mut);font-weight:600}
.f .price .off{background:var(--sale);color:#fff;font-size:11px;font-weight:800;padding:3px 8px;border-radius:3px}
.f .save{font-size:13px;color:var(--acc);font-weight:700;margin-bottom:18px}
.f .stock{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;margin-bottom:6px}
.f .dot{width:8px;height:8px;border-radius:100px;background:var(--acc);flex:none}
.f .dot.low{background:#c8871f}
.f .dot.out{background:#b9b5ae}
.f .eta{font-size:13px;color:var(--mut);line-height:1.5;margin-bottom:18px}
.f .eta b{color:var(--ink)}
.f .qty{display:flex;align-items:center;justify-content:space-between;border:1.5px solid var(--line);border-radius:100px;padding:9px 16px;font-size:13.5px;font-weight:700;margin-bottom:10px}
.f .qty button{color:var(--mut);font-size:17px;line-height:1;padding:0 6px;background:none;border:0;font-family:inherit;cursor:pointer}
.f .qty button:disabled{opacity:.3;cursor:default}
.f .qty .qval{display:inline-flex;align-items:center;gap:8px}
/* The value sits flush inside the pill: no field chrome, and the native
   spinner is suppressed because the +/- controls replace it. */
.f .qty input{width:46px;padding:0;border:0;background:none;font:inherit;font-weight:800;text-align:center;color:var(--ink);outline:none;-moz-appearance:textfield;appearance:textfield}
.f .qty input::-webkit-outer-spin-button,.f .qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.f .cta{display:block;width:100%;text-align:center;background:var(--acc);color:#fff;padding:15px;border-radius:100px;font-size:15px;font-weight:800;margin-bottom:9px}
.f .cta2{display:block;width:100%;text-align:center;border:1.5px solid var(--line);padding:14px;border-radius:100px;font-size:14px;font-weight:700;margin-bottom:9px}
.f .cta3{display:block;width:100%;text-align:center;background:#111;color:#fff;padding:13px;border-radius:100px;font-size:13.5px;font-weight:800;margin-bottom:8px}
.f .ctanote{font-size:12px;color:var(--mut);text-align:center;line-height:1.45;margin-bottom:16px}
.f .assur{display:flex;flex-direction:column;gap:10px;padding-top:16px;border-top:1px solid var(--line)}
.f .assur div{display:flex;gap:10px;font-size:12.5px;color:var(--mut);font-weight:600;align-items:flex-start;line-height:1.45}
.f .assur svg{width:16px;height:16px;color:var(--acc);flex:none;margin-top:1px}
.f .assur b{color:var(--ink);font-weight:700}
/* bought-together */
.f .fbt{border-top:1px solid var(--line);padding:44px 0}
.f .fbtb .tt{font-size:13.5px;color:var(--mut);font-weight:600;margin-bottom:5px}
.f .fbtb .tp{font-size:26px;font-weight:800;letter-spacing:-.02em;margin-bottom:4px}
.f .fbtb .ts{font-size:13px;color:var(--acc);font-weight:700;margin-bottom:16px}
.f .fbtb .add{display:inline-block;background:var(--ink);color:#fff;padding:13px 24px;border-radius:100px;font-size:13.5px;font-weight:800}
/* rails */
.f .rail{border-top:1px solid var(--line);padding:46px 0}
.f .rh{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px}
.f .rh h3{font-family:"Newsreader",serif;font-size:30px;font-weight:500;letter-spacing:-.022em}
.f .rh h3 em{font-style:italic;color:var(--acc)}
.f .rh .sl{font-size:14px;color:var(--mut);margin-top:5px}
.f .kicker{font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--acc);margin-bottom:8px}
.f .lnk{font-size:13.5px;font-weight:700;display:inline-flex;align-items:center;gap:7px;border-bottom:1.5px solid var(--ink);padding-bottom:3px;white-space:nowrap}
.f .bc .bk{margin-bottom:12px}
.f .bc .bt{font-size:14px;font-weight:700;line-height:1.32;margin-bottom:3px}
.f .bc .ba{font-size:12.5px;color:var(--mut);margin-bottom:8px}
.f .bc .bp{display:flex;align-items:baseline;gap:7px;margin-bottom:6px}
.f .bc .bp b{font-size:15px;font-weight:800}
.f .bc .bp s{font-size:12.5px;color:var(--mut);font-weight:600}
.f .bc .br{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--mut);font-weight:600}
.f .flag{position:absolute;top:9px;left:16px;background:#fff;font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:2px;z-index:2;box-shadow:0 1px 3px rgba(0,0,0,.16)}
.f .flag.s{background:var(--sale);color:#fff}
/* value props */
.f .props{background:var(--surf);padding:34px 0}
.f .pg{display:grid;grid-template-columns:repeat(4,1fr);gap:34px}
.f .pg>div{display:flex;gap:12px;align-items:flex-start}
.f .pg svg{width:22px;height:22px;color:var(--acc);flex:none;margin-top:1px}
.f .pg b{display:block;font-size:14px;font-weight:800;margin-bottom:3px}
.f .pg span{font-size:12.5px;color:var(--mut);font-weight:600;line-height:1.45}
/* footer */
.f .ft{padding:52px 0 26px;border-top:1px solid var(--line)}
.f .fg{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:38px}
.f .fg h5{font-size:11.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;margin-bottom:16px}
.f .fg li{list-style:none;font-size:13.5px;color:var(--mut);margin-bottom:9px}
.f .fg .fb p{font-size:13.5px;color:var(--mut);line-height:1.6;max-width:290px;margin-top:12px}
.f .fg .sub{display:flex;background:var(--surf);border:1px solid var(--line);border-radius:100px;padding:4px 4px 4px 14px;align-items:center;margin-top:16px;max-width:290px}
.f .fg .sub input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:12.5px;color:var(--ink);outline:none}
.f .fg .sub input::placeholder{color:#9b978f}
.f .fg .sub b{background:var(--ink);color:#fff;padding:9px 16px;border-radius:100px;font-size:12px;font-weight:800;white-space:nowrap}
.f .fbot{border-top:1px solid var(--line);padding-top:22px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12px;color:var(--mut)}
.f .pay{display:flex;gap:7px;flex-wrap:wrap}
.f .pay span{border:1px solid var(--line);border-radius:3px;padding:3px 8px;font-size:9.5px;font-weight:800;letter-spacing:.05em}

/* ═══════════ page-level additions (not in the canvas comp) ═══════════ */
/* horizontal rails — the live PDP paginates these with ‹ › controls */
.f .navb{display:flex;gap:8px}
.f .navb button{width:34px;height:34px;border-radius:100px;border:1.5px solid var(--line);display:grid;place-items:center;font-size:16px;color:var(--mut)}
.f .navb button:hover{border-color:var(--ink);color:var(--ink)}
.f .navb button:disabled{opacity:.35;cursor:default;border-color:var(--line);color:var(--mut)}
.f .strip{display:grid;grid-auto-flow:column;grid-auto-columns:172px;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding-bottom:4px}
.f .strip::-webkit-scrollbar{display:none}
.f .strip>*{scroll-snap-align:start}
/* single-recommendation card (only one co-purchase title exists for this ISBN) */
.f .oneup{display:grid;grid-template-columns:118px minmax(0,1fr);gap:26px;align-items:center;border:1.5px solid var(--line);border-radius:5px;padding:22px 26px;max-width:640px}
.f .oneup .bt{font-size:18px;font-weight:700;line-height:1.3;margin-bottom:8px}
.f .oneup .op{font-size:22px;font-weight:800;letter-spacing:-.02em;margin-bottom:8px}
.f .oneup .om{font-size:12.5px;color:var(--mut);font-weight:600;line-height:1.55;margin-bottom:14px}
.f .oneup .om b{color:var(--ink)}
.f .oneup .add{display:inline-block;border:1.5px solid var(--ink);padding:10px 22px;border-radius:100px;font-size:13px;font-weight:800}

@media(max-width:1080px){
  .f .pdp{grid-template-columns:246px minmax(0,1fr);gap:32px}
  .f .gal{position:static}
  .f .buy{grid-column:1/-1;position:static}
  .f .pg{grid-template-columns:repeat(2,1fr);gap:26px}
  .f .fg{grid-template-columns:1fr 1fr;gap:32px}
}
@media(max-width:720px){
  /* keep the <i> separators in the box tree — hiding them merges the three
     labels into one anonymous flex item and the gap collapses */
  .f .abar{gap:10px;font-size:11.5px}
  .f .tv{flex-wrap:wrap;gap:14px}
  .f .srch{order:3;flex-basis:100%}
  .f .tic{margin-left:auto}
  .f .pdp{grid-template-columns:minmax(0,1fr);padding-bottom:40px}
  .f .gal{max-width:280px}
  .f .info h1{font-size:32px}
  .f .specs{grid-template-columns:1fr}
  .f .rh{flex-direction:column;align-items:flex-start;gap:14px}
  .f .rh h3{font-size:24px}
  .f .oneup{grid-template-columns:96px minmax(0,1fr);gap:18px;padding:18px}
  .f .pg,.f .fg{grid-template-columns:1fr}
  .f .fbot{flex-direction:column}
}

/* ── neutralise the legacy theme's blanket <section> padding ────────────
   core.min.css — still loaded as transition scaffolding until every page is
   converted — carries `body:not(.layout-admin) section{padding:100px 0}` (and
   an 80px variant at a smaller breakpoint). That applies to EVERY <section>,
   and the books markup uses <section> for every card, step and rail, so each
   one was rendering with 100px of dead vertical space top and bottom.

   Not fixable with `.f section` (0,1,1) — the legacy selector is 0,1,2 and
   wins. `body.f section` matches its specificity and this sheet loads after
   core.min.css, so it takes precedence.

   Safe as a blanket reset: every books component that wants padding sets it
   via its own class (.searchcard, .botd .body, .step, .comain, ...), all of
   which are 0,2,0 and beat this. The design's .card genuinely has no padding
   of its own — its >header and .body supply it.

   DELETE THIS when core.min.css goes. */
body.f section{padding:0}

/* ── "readers also bought" rail cards ──────────────────────────────────
   books-theme.css already styles .bc's children (.bt/.ba/.bp) but has no
   grid container and no .bk cover box outside the gallery, because the PDP
   never rendered a card row before. */
.f .rail .rg{display:grid;grid-template-columns:repeat(6,1fr);gap:22px}
.f .rail .bc .bk{aspect-ratio:2/3;background:#e7e3dc;overflow:hidden;border-radius:2px;box-shadow:0 1px 2px rgba(0,0,0,.14),0 8px 18px rgba(0,0,0,.09);margin-bottom:12px}
.f .rail .bc .bk img{width:100%;height:100%;object-fit:cover;display:block}
.f .rail .abadd{display:block;width:100%;text-align:center;background:#fff;color:var(--ink);border:1.5px solid var(--line);padding:9px;border-radius:100px;font:inherit;font-size:12.5px;font-weight:800;cursor:pointer;margin-top:4px}
.f .rail .abadd:hover{border-color:var(--ink)}
.f .rail .rh .lnk{font-size:13px;font-weight:700;color:var(--acc);white-space:nowrap}
@media(max-width:1080px){.f .rail .rg{grid-template-columns:repeat(4,1fr)}}
@media(max-width:720px){.f .rail .rg{grid-template-columns:repeat(2,1fr)}}