/* Anjani Prakashan — site styles (design system 2.0, see docs/DESIGN.md). Fonts: SIL OFL (see /assets/fonts). */
@font-face { font-family: 'Noto Sans Fallback'; src: local('Arial'), local('Helvetica'), local('Liberation Sans'), local('Roboto'); size-adjust: 104.5%; ascent-override: 102%; descent-override: 28%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: 'Noto Sans Devanagari'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/noto-sans-devanagari-var-devanagari.woff2') format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09; }
@font-face { font-family: 'Noto Sans Devanagari'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/noto-sans-devanagari-var-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Tiro Devanagari Hindi'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/tiro-devanagari-hindi-400-devanagari.woff2') format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09; }
@font-face { font-family: 'Tiro Devanagari Hindi'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/tiro-devanagari-hindi-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face { font-family: 'Kalam'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/kalam-400-devanagari.woff2') format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09; }
@font-face { font-family: 'Kalam'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/kalam-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Martel'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/martel-400-devanagari.woff2') format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09; }
@font-face { font-family: 'Martel'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/martel-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Martel'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/martel-700-devanagari.woff2') format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09; }
@font-face { font-family: 'Martel'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/martel-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Rozha One'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/rozha-one-400-devanagari.woff2') format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09; }
@font-face { font-family: 'Rozha One'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/rozha-one-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Noto Sans Bengali'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/noto-sans-bengali-var-bengali.woff2') format('woff2'); unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1; }

/* ============================================================
   1. Tokens
   ============================================================ */
:root {
  /* paper & surfaces */
  --paper: #FBF9F4;
  --surface: #FFFFFF;
  --band-blue: #EEF5FB;
  --band-cream: #F8F2E6;
  /* ink */
  --ink: #14212E;
  --ink-soft: #3A4756;
  --muted: #5F6B78; /* 5.4:1 on white, 4.76:1 on brand-100 (a11y review) */
  --line: #E7E3DA;
  --line-strong: #D3CEC3;
  --line-input: #7F8A96;  /* text-field borders: 3.5:1 on white, 3.3:1 on paper, 3.07:1 on brand-100 (WCAG 1.4.11) */
  /* brand blue scale */
  --brand-50: #F2F7FC;
  --brand-100: #E7F1FA;
  --brand-200: #CDE4F7;
  --brand: #0A64A8;
  --brand-600: #0B4F86;
  --brand-700: #0A3D6B;
  --brand-900: #0A2F52;
  /* secondary */
  --accent: #CC4B14;        /* white on it 4.57:1 — Publish CTA, count badges */
  --accent-strong: #B5420E; /* eyebrows: 5.6:1 on white, 4.9:1 on brand-100 */
  --accent-soft: #FDEEE4;
  --sale: #B21F32;
  --wa: #0E7A40;            /* white on it 5.4:1 */
  --wa-strong: #0B6A37;
  --wa-soft: #E3F5EA;
  --green: #1F7A3D;
  --success-soft: #E6F4EA;
  --warn: #9A4D00;
  --warn-soft: #FFF4E5;
  --error: #B42318;
  --error-soft: #FDECEA;
  --rainbow: linear-gradient(90deg, #a21c30 0 14.28%, #0e8a8a 0 28.56%, #f4a51c 0 42.84%, #e5689a 0 57.12%, #5d4d9a 0 71.4%, #ef6a25 0 85.68%, #4a7a2c 0);
  /* legacy aliases (admin.css and older rules) */
  --brand-dark: var(--brand-600);
  --brand-deep: var(--brand-900);
  --brand-soft: var(--brand-100);
  --paper-deep: var(--band-cream);
  --rose: var(--sale);
  --radius: var(--r);
  --radius-lg: var(--r-lg);
  /* type */
  --font-body: "Noto Sans Devanagari", "Noto Sans Fallback", "Nirmala UI", "Mangal", "Segoe UI", system-ui, sans-serif;
  --font-display: "Tiro Devanagari Hindi", "Noto Serif Devanagari", Georgia, serif;
  --font-bn: "Noto Sans Bengali", "Nirmala UI", "Kohinoor Bangla", "Vrinda", sans-serif;
  --font-hero: "Rozha One", "Tiro Devanagari Hindi", Georgia, serif;
  --font-read: "Martel", "Noto Serif Devanagari", Georgia, serif;
  --font-hand: "Kalam", "Tiro Devanagari Hindi", cursive;
  --fs-hero: clamp(2.375rem, 1.7rem + 2.4vw, 3.5rem);   /* 38 → 56 */
  --fs-h1: clamp(1.875rem, 1.5rem + 1.3vw, 2.5rem);     /* 30 → 40 */
  --fs-h2: clamp(1.5rem, 1.3rem + .8vw, 1.875rem);      /* 24 → 30 */
  --fs-h3: clamp(1.125rem, 1.05rem + .3vw, 1.25rem);    /* 18 → 20 */
  --fs-body: 16.5px;
  --fs-small: .875rem;
  --fs-micro: .78rem;
  /* space, shape, depth */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(20, 33, 46, .05), 0 1px 3px rgba(20, 33, 46, .07);
  --shadow: 0 10px 28px -12px rgba(20, 33, 46, .22), 0 2px 6px -2px rgba(20, 33, 46, .08);
  --shadow-lg: 0 24px 60px -24px rgba(10, 47, 82, .4), 0 8px 20px -10px rgba(20, 33, 46, .12);
  --cover-shadow: inset 4px 0 6px -4px rgba(0,0,0,.28), 0 1px 0 rgba(0,0,0,.04), 6px 10px 22px -10px rgba(10, 30, 50, .45);
  --cover-bg: #F4F2EE; /* very light neutral behind book covers (card cover box, Rajkamal-style true-ratio covers) */
  --container: 1200px;
  --header-h: 72px;
  --sticky-top: calc(var(--header-h) + 24px);
  --dur: .18s;
}
@media (max-width: 720px) { :root { --header-h: 60px; } }

/* ============================================================
   2. Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body { margin: 0; font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.65; color: var(--ink); background: var(--paper); text-rendering: optimizeLegibility; }
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand-700); }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.2; color: var(--ink); font-weight: 600; }
h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.2em; }
small { font-size: var(--fs-small); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
/* On blue, orange and green controls the ring is the darkest blue so it does not read as the control's own colour */
.btn:focus-visible, .btn--accent:focus-visible, .btn--wa:focus-visible, .icon-btn--cart:focus-visible, .icon-btn--wa:focus-visible, .wa-fab:focus-visible { outline-color: var(--brand-900); outline-offset: 3px; }
::placeholder { color: var(--muted); opacity: 1; }
[lang="bn"] { font-family: var(--font-bn); }
main:focus { outline: none; }
code { font-size: .92em; background: var(--brand-50); padding: 1px 5px; border-radius: 4px; }

/* ============================================================
   3. Utilities
   ============================================================ */
.container { width: min(100% - 32px, var(--container)); margin-inline: auto; }
.narrow-wrap { max-width: 860px; }
.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; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--brand-900); color: #fff; padding: 10px 16px; border-radius: var(--r-sm); }
.skip-link:focus { top: 12px; color: #fff; }
.rainbow { height: 4px; background: var(--rainbow); }
.muted { color: var(--muted); }
.hide, [hidden] { display: none !important; }
.icon { width: 20px; height: 20px; flex: none; }
.icon--sm { width: 16px; height: 16px; }
.icon--xs { width: 13px; height: 13px; display: inline-block; vertical-align: -1px; }
.icon--lg { width: 28px; height: 28px; }

/* ============================================================
   4. Components
   ============================================================ */
/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 20px; border-radius: var(--r-pill); border: 1.5px solid transparent; background: var(--brand); color: #fff; font-weight: 600; font-size: 1rem; line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background var(--dur), color var(--dur), border-color var(--dur), transform var(--dur), box-shadow var(--dur); }
.btn:hover { background: var(--brand-600); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:active { transform: none; box-shadow: none; }
.btn--soft { background: var(--brand-200); color: var(--brand-700); }
.btn--soft:hover { background: var(--brand-100); color: var(--brand-700); box-shadow: none; }
.btn--outline, .btn--ghost { background: transparent; color: var(--brand-600); border-color: var(--brand); }
.btn--outline:hover, .btn--ghost:hover { background: var(--brand-50); color: var(--brand-700); box-shadow: none; }
.btn--accent { background: var(--accent); }
.btn--accent:hover { background: var(--accent-strong); }
.btn--wa { background: var(--wa); }
.btn--wa:hover { background: var(--wa-strong); }
.btn--light { background: var(--surface); color: var(--brand-700); border-color: var(--line-strong); }
.btn--light:hover { background: var(--brand-50); color: var(--brand-700); box-shadow: none; }
.btn--sm { min-height: 38px; padding: 6px 14px; font-size: .92rem; }
.btn--lg { min-height: 54px; padding: 12px 28px; font-size: 1.06rem; }
.btn--block { width: 100%; }
.btn--icon { position: relative; min-height: 42px; width: 42px; padding: 0; border-radius: 50%; }
.btn__plus { position: absolute; top: -2px; right: -2px; width: 17px; height: 17px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 13px; line-height: 17px; text-align: center; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; color: var(--brand-600); }
.link-arrow:hover { color: var(--brand-700); }
.link-arrow .icon { transition: transform var(--dur); }
.link-arrow:hover .icon { transform: translateX(3px); }

/* Round icon buttons (header, shelf arrows, social) */
.icon-btn { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; border: 1px solid var(--brand-200); background: var(--brand-100); color: var(--brand-700); text-decoration: none; cursor: pointer; transition: background var(--dur), color var(--dur), border-color var(--dur), transform var(--dur); }
.icon-btn:hover { background: var(--brand-200); color: var(--brand-700); transform: translateY(-1px); }
.icon-btn .icon { width: 20px; height: 20px; }
.icon-btn--wa { background: var(--wa); border-color: var(--wa); color: #fff; }
.icon-btn--wa:hover { background: var(--wa-strong); color: #fff; }
.icon-btn--cart { background: var(--brand); border-color: var(--brand); color: #fff; }
.icon-btn--cart:hover { background: var(--brand-600); color: #fff; }
.icon-btn__count { position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--r-pill); background: var(--accent); color: #fff; font-size: .72rem; font-weight: 700; line-height: 20px; text-align: center; border: 2px solid var(--surface); box-sizing: content-box; }
.icon-btn__count.is-zero { display: none; }

/* Chips, pills, badges, eyebrow */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-soft); font-size: .9rem; text-decoration: none; line-height: 1.5; white-space: nowrap; }
.chip:is(a, button):hover { border-color: var(--brand); color: var(--brand-700); background: var(--brand-50); }
.chip.is-active { border-color: var(--brand); color: #fff; background: var(--brand); }
.chip.is-active:hover { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.chip.is-active small { color: var(--brand-100); }
.chip--soft { background: var(--brand-100); border-color: transparent; color: var(--brand-700); font-size: .8rem; padding: 2px 10px; }
.chip small { color: var(--muted); font-size: .8rem; }
.pill { display: inline-block; padding: 2px 10px; border-radius: var(--r-pill); background: var(--brand-700); color: #fff; font-size: .74rem; font-weight: 700; letter-spacing: .02em; line-height: 1.6; }
.badge { position: absolute; top: 10px; left: 10px; z-index: 1; padding: 2px 9px; border-radius: 6px; font-size: .76rem; font-weight: 700; color: #fff; background: var(--sale); letter-spacing: .01em; }
.badge--sale { background: var(--sale); }
.badge--muted { background: rgba(20, 33, 46, .78); left: auto; right: 10px; }
.eyebrow { margin: 0 0 .4em; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-strong); }

/* Cards */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(20px, 3vw, 32px); box-shadow: var(--shadow-sm); }
.card--soft { background: var(--brand-50); border-color: var(--brand-100); box-shadow: none; }
.card h3 { margin-bottom: .4em; }

/* Search box (page-level pill with round submit) */
.search-box, .author-search { display: flex; gap: 8px; align-items: center; max-width: 560px; margin-top: 22px; }
.search-box .input, .author-search .input { flex: 1; min-width: 0; border-radius: var(--r-pill); padding-inline: 20px; }
.search-box .btn, .author-search .btn { flex: none; }

/* Forms */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.form-grid .span-2 { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label, .field .label { font-weight: 600; font-size: .95rem; }
.field label small, .field .label small { font-weight: 400; color: var(--muted); }
.field .hint, .hint { margin: 0; font-size: .82rem; color: var(--muted); line-height: 1.5; }
.field input, .field select, .field textarea, .input { width: 100%; min-height: 48px; padding: 10px 14px; border: 1.5px solid var(--line-input); border-radius: var(--r); background: var(--surface); color: var(--ink); transition: border-color var(--dur), box-shadow var(--dur); }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus, .input:focus { border-color: var(--brand); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible, .input:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; box-shadow: none; border-radius: var(--r); }
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--error); }
.field input[type="file"] { padding: 9px 12px; }
.field-error { margin: 0; color: var(--error); font-size: .88rem; }
.field-hint { margin: 0; color: var(--muted); font-size: .86rem; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.choice, .field .choice { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1.5px solid var(--line-strong); border-radius: var(--r); background: var(--surface); cursor: pointer; font-weight: 400; transition: border-color var(--dur), background var(--dur); }
.choice:hover { border-color: var(--brand-200); }
.choice:has(input:checked) { border-color: var(--brand); background: var(--brand-50); }
/* the generic .field input rule (min-height 48px, padding, border) must not reach radios/checkboxes */
.choice input, .field .choice input { width: 18px; height: 18px; min-height: 0; margin: 4px 0 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; accent-color: var(--brand); flex: none; }
.choice input:focus-visible, .field .choice input:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 3px; }
.hp-field { position: absolute !important; left: -9999px !important; }
.error-summary { padding: 14px 18px; margin-bottom: 18px; border-radius: var(--r); background: var(--error-soft); border: 1px solid #F2C4BF; color: #7A1A12; }
.error-summary ul { margin: 6px 0 0; }
.notice { padding: 12px 16px; border-radius: var(--r); background: var(--warn-soft); color: var(--warn); border: 1px solid #F6D7A7; margin-bottom: 16px; }

/* Sections & bands */
.section { padding: clamp(40px, 5vw, 72px) 0; }
.section--tight { padding: 32px 0; }
.section--white, .band--white { background: var(--surface); }
.band--blue { background: var(--band-blue); }
.band--cream { background: var(--band-cream); }
.band--brand { background: var(--brand-100); }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 28px; }
.section-head--center { justify-content: center; text-align: center; }
.section-head--center .bi-heading { align-items: center; }
.section-head__text { margin: 10px 0 0; max-width: 40rem; color: var(--muted); }
.section-head--center .section-head__text { margin-inline: auto; }
.section-head__actions { display: flex; align-items: center; gap: 12px; }
.bi-heading { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.bi-heading__hi { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h2); line-height: 1.25; color: var(--ink); }
.bi-heading__en { font-size: .9rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
.bi-heading--sm .bi-heading__hi { font-size: 1.3rem; }

/* Breadcrumbs, pagination, flash */
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0; font-size: .88rem; color: var(--muted); }
.breadcrumbs li:not(:last-child)::after { content: "›"; content: "›" / ""; margin-left: 6px; color: var(--line-strong); } /* alt text "" keeps the chevron out of the accessibility tree */
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--brand); }
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 40px; }
.pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 44px; height: 44px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--surface); text-decoration: none; color: var(--ink); }
.pagination a:hover { border-color: var(--brand); color: var(--brand); }
.pagination [aria-current] { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 700; }
.pagination .pagination__gap { border: 0; background: none; min-width: 20px; padding: 0; }
.flash-stack { margin-top: 18px; display: grid; gap: 8px; }
.flash { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: var(--r); background: var(--brand-100); color: var(--brand-900); border: 1px solid var(--brand-200); }
.flash--success { background: var(--success-soft); color: #14532D; border-color: #B9DFC3; }
.flash--error { background: var(--error-soft); color: #7A1A12; border-color: #F2C4BF; }
.flash .icon { margin-top: 3px; }

/* Shelf (horizontal scroll-snap row) */
.shelf { position: relative; }
.shelf__track { display: grid; grid-auto-flow: column; grid-auto-columns: 196px; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 2px 16px; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.shelf__track > * { scroll-snap-align: start; }
.shelf__plank { display: none; }
.shelf__nav { display: flex; gap: 8px; flex: none; }
.shelf__nav button, .shelf__nav .icon-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.shelf__nav button:hover, .shelf__nav .icon-btn:hover { border-color: var(--brand); background: var(--brand-50); color: var(--brand); transform: none; }
.section-head__actions .link-arrow { white-space: nowrap; }
/* Toast (site.js wishToast): fixed above the mobile bar, fades in/out */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 90; transform: translate(-50%, 12px); max-width: calc(100% - 32px); padding: 10px 18px; border-radius: var(--r-pill); background: var(--ink); color: #fff; font-size: .95rem; font-weight: 600; box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* Tabs (link tabs) and tabset (CSS radio tabs) */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.tabs a { padding: 8px 16px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 600; font-size: .94rem; }
.tabs a small { color: var(--muted); font-weight: 400; }
.tabs a:hover { border-color: var(--brand); color: var(--brand-700); }
.tabs a[aria-current] { background: var(--brand); border-color: var(--brand); color: #fff; }
.tabs a[aria-current] small { color: var(--brand-100); }
.tabset { display: grid; }
.tabset > input[type="radio"] { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; opacity: 0; } /* sr-only pattern: 0×0 radios are skipped by some mobile screen readers */
.tabset__tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; }
.tabset__tabs label { padding: 8px 16px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--surface); font-weight: 600; font-size: .94rem; cursor: pointer; }
.tabset__panel { display: none; }
.tabset > input:nth-of-type(1):checked ~ .tabset__tabs label:nth-of-type(1), .tabset > input:nth-of-type(2):checked ~ .tabset__tabs label:nth-of-type(2), .tabset > input:nth-of-type(3):checked ~ .tabset__tabs label:nth-of-type(3), .tabset > input:nth-of-type(4):checked ~ .tabset__tabs label:nth-of-type(4) { background: var(--brand); border-color: var(--brand); color: #fff; }
.tabset > input:nth-of-type(1):checked ~ .tabset__panel:nth-of-type(1), .tabset > input:nth-of-type(2):checked ~ .tabset__panel:nth-of-type(2), .tabset > input:nth-of-type(3):checked ~ .tabset__panel:nth-of-type(3), .tabset > input:nth-of-type(4):checked ~ .tabset__panel:nth-of-type(4) { display: block; }

/* Trust strip */
.trust-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; list-style: none; margin: 0; padding: 0; }
.trust-strip li { min-width: 0; }
/* icons align to the top of each item so the six discs sit on one line whatever the text wraps to */
.trust-strip__item { display: flex; align-items: flex-start; gap: 12px; min-width: 0; color: var(--ink); text-decoration: none; }
.trust-strip__icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); color: var(--brand); }
.trust-strip__icon .icon { width: 22px; height: 22px; }
.trust-strip__text { display: flex; flex-direction: column; min-width: 0; padding-top: 2px; }
.trust-strip strong { font-size: .88rem; line-height: 1.3; color: var(--ink); text-wrap: balance; }
.trust-strip small { font-size: .78rem; color: var(--muted); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
a.trust-strip__item:hover { text-decoration: none; }
a.trust-strip__item:hover strong { color: var(--brand); }

/* Price row, wishlist button, social links, share row */
.price { margin: 0; font-size: 1.05rem; }
.price strong { color: var(--ink); }
.price s { color: var(--muted); font-size: .86rem; margin-left: 4px; }
.price-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0; }
.price-row .price { font-size: 1.15rem; font-weight: 700; color: var(--ink); }
.price__mrp { color: var(--muted); text-decoration: line-through; font-size: .88rem; }
.price__off { padding: 1px 8px; border-radius: 6px; background: var(--success-soft); color: var(--green); font-size: .78rem; font-weight: 700; }
.wish-btn { position: relative; display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,.92); color: var(--ink-soft); cursor: pointer; transition: color var(--dur), border-color var(--dur), transform var(--dur); }
.book-card__cover .wish-btn { position: absolute; top: 8px; right: 8px; z-index: 2; }
.wish-btn:hover, .wish-btn.is-active, .wish-btn.is-on, .wish-btn[aria-pressed="true"] { color: var(--sale); border-color: var(--sale); transform: scale(1.06); }
.wish-btn .icon { width: 18px; height: 18px; }
.social-links { display: flex; flex-wrap: wrap; gap: 8px; }
.social-links a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line-strong); color: var(--brand-700); text-decoration: none; transition: background var(--dur), color var(--dur), border-color var(--dur), transform var(--dur); }
.social-links a:hover { background: var(--brand); border-color: var(--brand); color: #fff; transform: translateY(-2px); text-decoration: none; }
.share-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.share-row > span { font-size: .88rem; color: var(--muted); margin-right: 4px; }

/* Filter sheet (<details>: dropdown panel on desktop, bottom sheet on phones) — see section 10 and the R2 responsive block */

/* Empty state, prose */
.empty { padding: 48px 24px; text-align: center; border: 2px dashed var(--line-strong); border-radius: var(--r-lg); color: var(--muted); background: var(--surface); }
.empty .icon { width: 40px; height: 40px; margin: 0 auto 12px; color: var(--line-strong); }
.prose { max-width: 45rem; font-family: var(--font-read); font-size: 1rem; line-height: 1.95; color: #23303D; }
.prose strong, .prose b { font-weight: 700; }
.prose h2 { margin-top: 1.6em; font-size: 1.45rem; }
.prose h3 { margin-top: 1.4em; }
.prose img { border-radius: var(--r); margin: 1.2em 0; }
.prose blockquote { margin: 1.4em 0; padding: 8px 0 8px 20px; border-left: 4px solid var(--accent); color: var(--ink-soft); font-family: var(--font-hand); font-size: 1.2rem; line-height: 1.7; }
.prose table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: .96rem; }
.prose th, .prose td { padding: 8px 12px; border: 1px solid var(--line); text-align: left; }
.prose th { background: var(--band-cream); }
.prose--facts p:last-child { color: var(--muted); font-size: .95rem; }
.policy h2 { font-family: var(--font-body); }

/* Feature / step / FAQ / stat / check-list blocks */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.feature-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feature { padding: 24px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.feature__icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 14px; border-radius: 14px; background: var(--brand-100); color: var(--brand); }
.feature__icon .icon { width: 26px; height: 26px; }
.feature h3 { margin: 0 0 4px; font-size: 1.1rem; }
.feature h3 a { color: var(--ink); text-decoration: none; }
.feature h3 a:hover { color: var(--brand); }
.feature h3 small { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1rem; color: var(--brand-600); }
.feature p { margin: 0; color: var(--muted); font-size: .95rem; }
.feature--link { text-decoration: none; color: var(--ink); transition: border-color var(--dur), transform var(--dur), box-shadow var(--dur); }
.feature--link:hover { border-color: var(--brand-200); transform: translateY(-3px); box-shadow: var(--shadow); color: var(--ink); }
.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.check-list li { display: flex; gap: 10px; align-items: flex-start; }
.check-list li::before { content: ""; flex: none; width: 22px; height: 22px; margin-top: 3px; border-radius: 50%; background: var(--success-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f7a3d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat; }
.check-list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 18px; counter-reset: step; }
.steps--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.step { position: relative; padding: 22px 20px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); counter-increment: step; }
.step::before { content: counter(step); display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 12px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 700; }
.step h3 { margin: 0; font-size: 1.05rem; }
.step h3 small { display: block; font-family: var(--font-display); font-weight: 400; font-size: .98rem; color: var(--brand-600); }
.step p { margin: 8px 0 0; color: var(--muted); font-size: .94rem; }
.step__time { position: absolute; top: 22px; right: 18px; font-size: .76rem; font-weight: 700; color: var(--accent-strong); background: var(--accent-soft); padding: 2px 8px; border-radius: var(--r-pill); }
.faq { display: grid; gap: 10px; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.faq summary { display: flex; justify-content: space-between; gap: 12px; padding: 16px 20px; font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--brand); transition: transform var(--dur); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 20px 18px; color: var(--ink-soft); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.stat { padding: 14px 16px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.stat strong { display: block; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.1; color: var(--brand); font-weight: 700; }
.stat span { display: block; font-size: .8rem; color: var(--muted); line-height: 1.35; margin-top: 2px; }

/* ============================================================
   5. Shells — header
   ============================================================ */
.announce { background: var(--brand-900); color: #fff; font-size: .9rem; text-align: center; padding: 6px 0; }
/* No backdrop-filter/transform here: either would make the header the containing block of the fixed drawer (.site-nav). */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--surface); box-shadow: inset 0 -1px 0 var(--line); } /* hairline inside --header-h, so the sticky row is exactly 72/60px */
.header__row { position: relative; display: flex; align-items: center; gap: 10px; min-height: var(--header-h); width: min(100% - 32px, 1400px); }
.nav-toggle, .nav-close { display: none; width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; background: transparent; padding: 0; cursor: pointer; color: var(--ink); place-items: center; }
.nav-toggle:hover, .nav-close:hover { background: var(--brand-50); color: var(--brand); }
.brand { display: flex; align-items: center; gap: 10px; flex: none; text-decoration: none; color: var(--ink); }
.brand__logo { width: 44px; height: 44px; }
.brand__wordmark { width: 180px; height: auto; }
.brand__text { display: flex; flex-direction: column; gap: 3px; }
.brand__tag { font-size: .74rem; letter-spacing: .06em; color: var(--muted); text-transform: uppercase; }
.site-nav { flex: none; min-width: 0; }
.site-nav__inner { display: flex; align-items: center; }
.site-nav__head, .site-nav__cta, .site-nav__social { display: none; }
.nav-list { display: flex; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; }
.nav-list > li > a, .nav-list summary { display: flex; align-items: center; gap: 2px; padding: 8px 8px; border-radius: var(--r-pill); font-weight: 600; font-size: .88rem; color: var(--ink); text-decoration: none; cursor: pointer; list-style: none; white-space: nowrap; }
.nav-list summary::-webkit-details-marker { display: none; }
.nav-list summary .icon { width: 14px; height: 14px; color: var(--muted); transition: transform var(--dur); }
.nav-list > li > a:hover, .nav-list summary:hover, .nav-list details[open] > summary { color: var(--brand); background: var(--brand-50); }
.nav-list [aria-current="page"] { color: var(--brand-700); background: var(--brand-100); }
.nav-list details { position: relative; }
.nav-list details[open] summary .icon { transform: rotate(180deg); color: var(--brand); }
.mega { position: absolute; top: calc(100% + 10px); left: 0; z-index: 60; display: flex; gap: 32px; width: max-content; min-width: 560px; max-width: 920px; padding: 26px 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.mega--narrow { min-width: 340px; display: block; }
.mega--right { left: auto; right: 0; }
.mega__col { min-width: 170px; }
.mega__col--feature { padding-left: 24px; border-left: 1px solid var(--line); }
.mega__title { margin: 0 0 10px; font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.mega__title span { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--accent-strong); margin-left: 4px; }
.mega__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mega__list a { display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin-left: -8px; border-radius: var(--r-sm); color: var(--ink); text-decoration: none; font-size: .95rem; }
.mega__list a:hover { background: var(--brand-50); color: var(--brand-700); }
.mega__list small { color: var(--muted); font-size: .8rem; }
.mega__list--cards a { align-items: flex-start; gap: 12px; padding: 10px; }
.mega__list--cards a .icon { color: var(--brand); margin-top: 3px; }
.mega__list--cards span { display: flex; flex-direction: column; }
.mega__list a.mega__more { color: var(--brand); font-weight: 600; }
.mega__promo { display: flex; align-items: center; gap: 14px; margin-left: auto; padding: 12px; max-width: 250px; border-radius: var(--r); background: var(--brand-50); text-decoration: none; color: var(--ink); align-self: flex-start; }
.mega__promo img { width: 72px; border-radius: 4px; box-shadow: var(--shadow); }
.mega__promo span { display: flex; flex-direction: column; font-size: .9rem; }
.header-search { display: flex; flex: 0 1 240px; min-width: 180px; max-width: 240px; margin-left: auto; border: 1.5px solid var(--line-strong); border-radius: var(--r-pill); background: var(--paper); overflow: hidden; transition: border-color var(--dur), box-shadow var(--dur), max-width .25s ease; }
.header-search:focus-within { max-width: 420px; border-color: var(--brand); outline: 3px solid var(--brand); outline-offset: 2px; background: var(--surface); }
.header-search input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 9px 4px 9px 18px; outline: none; font-size: .95rem; text-overflow: ellipsis; }
.header-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.header-search button { border: 0; background: transparent; padding: 0 14px 0 8px; color: var(--brand-600); cursor: pointer; display: grid; place-items: center; }
.header-search button:hover { color: var(--brand); }
.header-search button:focus-visible { outline-offset: -4px; border-radius: 50%; }
/* In the header row the pill has no free space to grow at 1181–1500px (nav + icons + CTA fill the row), so on focus it
   lifts out of the flow and widens over the icons/CTA, which fade out meanwhile. Opacity, not visibility: they must stay in
   the tab order, or Tab from the search button would skip Wishlist/Account/WhatsApp/Cart/Publish (the pill collapses as
   soon as focus reaches the first icon, which brings them back). */
.header__row > .header-search:focus-within { position: absolute; right: 0; top: 50%; transform: translateY(-50%); z-index: 3; width: 420px; max-width: 420px; box-shadow: 0 0 0 10px var(--surface); }
@media (min-width: 1181px) {
  .header__row:has(.header-search:focus-within) .header__icons, .header__row:has(.header-search:focus-within) .header__cta { opacity: 0; pointer-events: none; }
}
.header-search-row { display: none; background: var(--surface); border-bottom: 1px solid var(--line); padding: 6px 0 8px; }
.header-search-row .header-search { max-width: none; margin: 0 auto; }
.header-search-row .header-search input { padding-block: 8px; }
.header__icons { display: flex; align-items: center; gap: 6px; flex: none; }
.header__cta { flex: none; font-size: .88rem; padding: 6px 14px; }
.nav-backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(10, 30, 50, .45); }

/* ============================================================
   6. Shells — footer, mobile bar, WhatsApp FAB, reader dialog
   ============================================================ */
.site-footer { background: var(--band-cream); color: var(--ink-soft); font-size: .95rem; border-top: 1px solid var(--line); }
.site-footer a { color: var(--brand-700); text-decoration: none; }
.site-footer a:hover { color: var(--brand); text-decoration: underline; }
.footer__follow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding: 26px 0 22px; border-bottom: 1px solid var(--line); }
.footer__follow-title { margin: 0; font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.footer__follow-title span { font-family: var(--font-display); font-weight: 400; color: var(--brand-700); }
.footer__follow-text { margin: 2px 0 0; color: var(--muted); font-size: .9rem; }
.footer__trust { padding: 24px 0; border-bottom: 1px solid var(--line); }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1.1fr .9fr; gap: 40px; padding: 44px 0 36px; }
.footer__logo { display: inline-block; border-radius: 50%; }
.footer__logo img { width: 64px; height: 64px; }
.footer__about { margin: 14px 0; color: var(--ink-soft); }
.footer__about strong { color: var(--ink); }
.footer__contact { font-style: normal; display: grid; gap: 8px; }
.footer__contact p { display: flex; gap: 10px; margin: 0; }
.footer__contact .icon { width: 17px; height: 17px; margin-top: 4px; color: var(--brand); flex: none; }
.footer__title { margin: 0 0 14px; color: var(--ink); font-weight: 700; font-size: 1rem; }
.footer__title span { display: block; font-family: var(--font-display); font-weight: 400; color: var(--brand-700); font-size: .98rem; }
.footer__links { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.footer__social { display: flex; gap: 10px; margin-top: 18px; }
.footer__bottom { border-top: 1px solid var(--line); padding: 18px 0 22px; font-size: .86rem; background: var(--surface); }
.footer__bottom-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.footer__policies { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer__pay, .footer__copy { margin: 0; display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.mobile-bar { display: none; }
.wa-fab { position: fixed; right: 22px; bottom: 22px; z-index: 40; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--wa); color: #fff; box-shadow: 0 12px 26px -8px rgba(18, 140, 75, .7); transition: transform var(--dur); }
.wa-fab:hover { color: #fff; transform: scale(1.06); }
.wa-fab .icon { width: 28px; height: 28px; }
.reader { width: min(1200px, 96vw); height: min(92vh, 900px); max-width: none; max-height: none; padding: 0; border: 0; border-radius: var(--r-lg); background: var(--ink); color: #fff; overflow: hidden; }
.reader::backdrop { background: rgba(6, 15, 25, .78); }
.reader[open] { display: flex; flex-direction: column; }
.reader__bar { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 20px; background: var(--brand-900); }
.reader__title { flex: 1; margin: 0; font-family: var(--font-display); font-size: 1.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reader__bar .btn--ghost { color: #fff; border-color: rgba(255,255,255,.4); }
.reader__bar .btn--ghost:hover { background: rgba(255,255,255,.1); color: #fff; }
.reader__close { border: 0; background: rgba(255,255,255,.1); color: #fff; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.reader__frame { flex: 1; }
.reader__frame iframe { width: 100%; height: 100%; border: 0; background: #fff; }

/* ============================================================
   7. Page heroes
   ============================================================ */
.page-hero { position: relative; padding: 32px 0 40px; background: var(--paper); border-bottom: 1px solid var(--line); overflow: hidden; }
.page-hero .breadcrumbs { margin-bottom: 18px; }
.page-hero h1 { margin-bottom: .2em; }
.page-hero__en { font-size: .95rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); margin-bottom: .7em; }
.page-hero__lead { max-width: 42rem; font-size: 1.1rem; color: var(--ink-soft); margin: 0; }
.page-hero--brand { background: linear-gradient(180deg, var(--brand-100), var(--band-blue)); border-bottom-color: var(--brand-200); }
.page-hero--brand::after { content: ""; position: absolute; right: -120px; top: -140px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(10, 100, 168, .14), transparent 68%); pointer-events: none; }
.page-hero--brand h1 { color: var(--brand-900); }
.page-hero--brand .page-hero__en { color: var(--brand-600); }
.page-hero--slim { padding: 26px 0 28px; }
.page-hero--slim h1 { margin: 0; }
.page-hero--slim .page-hero__en { margin: 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* ============================================================
   8. Catalogue — book cards, grids, authors, work, posts
   ============================================================ */
.book-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 22px; } /* 4-up like Rajkamal: a ~258×344 cover box in the 1200 container */
@media (max-width: 1080px) { .book-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 16px; } }
.book-grid > * { min-width: 0; }
.book-grid__item { position: relative; display: flex; }
.book-grid__item > .book-card { flex: 1 1 auto; min-width: 0; } /* the wrapper is stretched by the grid; pass the height on so price rows align */
.wishlist__item { display: flex; flex-direction: column; gap: 8px; }
.wishlist__item > .book-card { flex: 1 1 auto; }
/* Book card (R2, R9 cover box): white card, the whole cover at its real proportions centred in a 3:4 box (262×349 at 4-up in
   the 1200 container, like Rajkamal), body, foot pinned to the bottom so every card in a row is the same height */
.book-card { position: relative; display: flex; flex-direction: column; min-width: 0; height: 100%; padding: 12px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: border-color var(--dur), box-shadow var(--dur); }
.book-card:hover { border-color: var(--brand-200); box-shadow: var(--shadow); }
.book-card__cover { position: relative; aspect-ratio: 3 / 4; border-radius: var(--r-sm); background: var(--cover-bg); overflow: hidden; }
.book-card__cover-link { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 5%; } /* % of the width on all four sides: the inner box is 0.7297 wide at every card size (book-card.php's is-wide threshold) */
/* never cropped: the cover fills the box height (its width follows from the width/height attributes, so the box is right
   before the file arrives — an auto-sized image would be 0×0 until then and shift); covers wider than the box fill its
   width instead (.is-wide, set by book-card.php); object-fit: contain is the safety net. The shadow stays on the cover. */
.book-card__cover img { width: auto; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 2px 5px 5px 2px; box-shadow: var(--cover-shadow); background: #fff; transition: transform .25s ease, box-shadow .25s ease; }
.book-card:hover .book-card__cover img { transform: translateY(-4px) rotate(-.5deg); box-shadow: 0 1px 0 rgba(0,0,0,.04), 10px 18px 30px -12px rgba(10, 30, 50, .5); }
.book-card__cover img.is-wide { width: 100%; height: auto; }
/* a mock-up photographed on a white sheet (CoverTone::isSheet): no cover shadow, the sheet melts into the box */
.book-card__cover img.is-sheet, .book-card:hover .book-card__cover img.is-sheet, .marquee-book__cover img.is-sheet, .marquee-book:hover .marquee-book__cover img.is-sheet { mix-blend-mode: multiply; background: transparent; box-shadow: none; border-radius: 0; }
.book-card.is-out .book-card__cover img { filter: grayscale(.6); opacity: .8; }
.book-card__cover .badge--muted { top: auto; right: auto; left: 10px; bottom: 10px; }
.cover-fallback { display: grid; place-items: center; width: 100%; height: 100%; padding: 16px; border-radius: 4px; background: linear-gradient(160deg, var(--brand-600), var(--brand-900)); color: #fff; font-family: var(--font-display); font-size: 1.2rem; text-align: center; line-height: 1.3; }
.cover-fallback--lg { aspect-ratio: 2 / 3; font-size: 1.8rem; }
.book-card__body { display: flex; flex-direction: column; flex: 1; gap: 2px; padding-top: 12px; }
.book-card__genre { margin: 0 0 2px; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.book-card__genre-en { color: var(--muted); font-weight: 600; }
@media (max-width: 480px) { .book-card__genre-en { display: none; } } /* a ~140px card clips the uppercase English half to "TRAVELOG…" */
.book-card__title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.06rem; line-height: 1.35; min-height: 2.7em; }
.book-card__title a { color: var(--ink); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.book-card__title a:hover { color: var(--brand); }
.book-card__by { margin: 0; font-size: .84rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.book-card__by a { color: var(--ink-soft); font-weight: 600; text-decoration: none; }
.book-card__by a:hover { color: var(--brand); text-decoration: underline; }
.book-card__by--muted { font-style: italic; }
.book-card__more { display: inline-block; padding: 0 6px; border-radius: var(--r-pill); background: var(--brand-100); color: var(--brand-700); font-size: .72rem; font-weight: 700; vertical-align: 1px; }
.book-card__format { margin: 6px 0 0; }
.pill--format { background: var(--brand-100); color: var(--brand-700); font-weight: 600; }
.pill--muted { background: var(--band-cream); color: var(--ink-soft); font-weight: 600; }
.book-card .price-row { margin-top: 8px; gap: 6px; }
.book-card .price-row .price { font-size: 1.12rem; }
.book-card__foot { margin-top: auto; padding-top: 10px; display: grid; gap: 8px; }
.book-card__add { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.book-card__add .btn { min-height: 38px; padding-inline: 8px; font-size: .86rem; gap: 6px; }
.book-card__oos { display: block; text-align: center; padding: 8px 10px; font-size: .8rem; }
.book-card__notify { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 0 12px; font-size: .86rem; font-weight: 600; color: var(--wa); text-decoration: none; border-radius: var(--r-pill); border: 1.5px solid var(--wa); }
.book-card__notify:hover { background: var(--wa-soft); color: var(--wa-strong); }
.role-badge { position: absolute; top: 21px; left: 21px; z-index: 2; padding: 2px 10px; border-radius: var(--r-pill); background: var(--brand-700); color: #fff; font-size: .76rem; font-weight: 600; }
.book-grid__item:has(.role-badge) .badge--sale { top: 40px; }
.author-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.author-grid--lg { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.author-grid--lg .author-card { padding: 20px; }
.author-grid--lg .avatar { width: 76px; height: 76px; }
.author-card { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); text-decoration: none; color: var(--ink); transition: border-color var(--dur), box-shadow var(--dur), transform var(--dur); }
.author-card:hover { border-color: var(--brand-200); box-shadow: var(--shadow); transform: translateY(-2px); color: var(--ink); }
.avatar { display: grid; place-items: center; width: 64px; height: 64px; flex: none; border-radius: 50%; overflow: hidden; background: var(--brand-100); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--initial { background: var(--brand-100); color: var(--brand-700); font-family: var(--font-display); font-size: 1.7rem; }
.author-card__body { display: flex; flex-direction: column; min-width: 0; }
.author-card__name { font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; line-height: 1.3; }
.author-card__alt { font-size: .85rem; color: var(--muted); }
.author-card__meta { font-size: .85rem; color: var(--brand-600); margin-top: 2px; }
.work-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 30px 22px; }
.work-card { display: flex; flex-direction: column; min-width: 0; }
.work-card__cover { position: relative; display: block; aspect-ratio: 1 / 1.414; border-radius: 6px; overflow: hidden; background: var(--surface); box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 14px 28px -14px rgba(10, 30, 50, .45); transition: transform .25s, box-shadow .25s; }
.work-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.work-card__cover:hover { transform: translateY(-5px); box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 24px 40px -18px rgba(10, 30, 50, .55); }
.work-card__read { position: absolute; inset: auto 10px 10px auto; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill); background: rgba(10, 47, 82, .88); color: #fff; font-size: .85rem; font-weight: 600; opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; }
.work-card__cover:hover .work-card__read, .work-card__cover:focus-visible .work-card__read { opacity: 1; transform: none; }
.work-card__body { padding-top: 12px; }
.work-card__title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.08rem; line-height: 1.35; }
.work-card__meta { margin: 2px 0 0; font-size: .86rem; color: var(--muted); }
.work-card__client { margin: 4px 0 0; font-size: .82rem; color: var(--brand-600); }
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
.post-card { display: flex; flex-direction: column; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); overflow: hidden; transition: box-shadow var(--dur), transform var(--dur); }
.post-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.post-card__img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.post-card__body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.post-card__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 8px; font-size: .85rem; color: var(--muted); }
.post-card__title { font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; line-height: 1.35; }
.post-card__title a { color: var(--ink); text-decoration: none; }
.post-card__title a:hover { color: var(--brand); }
.post-card__excerpt { color: var(--ink-soft); font-size: .95rem; }
.post-card .link-arrow { margin-top: auto; }

/* ============================================================
   9. Home
   ============================================================ */
.hero { position: relative; overflow: hidden; background: var(--paper); border-bottom: 1px solid var(--line); }
.hero__glow { position: absolute; right: -10%; top: -30%; width: 58%; height: 160%; border-radius: 50%; background: radial-gradient(closest-side, var(--brand-100), rgba(231, 241, 250, .4) 60%, transparent); pointer-events: none; }
.hero__grid { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; padding: clamp(40px, 5vw, 72px) 0 clamp(44px, 5.5vw, 80px); }
.hero__title { color: var(--ink); font-family: var(--font-hero); font-size: var(--fs-hero); margin-bottom: .25em; line-height: 1.15; }
.hero__kicker { display: block; margin-bottom: .7em; font-family: var(--font-body); font-size: clamp(.86rem, .8rem + .25vw, .98rem); font-weight: 700; line-height: 1.5; color: var(--accent-strong); letter-spacing: .02em; }
.hero__title em { font-style: normal; color: var(--brand); position: relative; }
.hero__title em::after { content: ""; position: absolute; left: 0; right: 0; bottom: .06em; height: .12em; background: var(--rainbow); border-radius: 4px; opacity: .9; }
.hero__sub { font-size: clamp(1.05rem, .95rem + .4vw, 1.25rem); color: var(--ink-soft); max-width: 28rem; margin-bottom: .6em; font-weight: 500; }
.hero__lead { max-width: 30rem; color: var(--muted); }
.hero__stats { margin-top: 32px; }
.hero__stats dd { margin: 0; }
.hero__art { position: relative; display: flex; flex-direction: column; align-items: center; }
.cover-fan { position: relative; width: min(100%, 470px); aspect-ratio: 1 / .92; }
.cover-fan::before { content: ""; position: absolute; left: 8%; right: 4%; top: 10%; bottom: 2%; border-radius: 48% 52% 46% 54% / 55% 45% 55% 45%; background: var(--brand-50); border: 1px solid var(--brand-100); }
.cover-fan img { position: absolute; bottom: 0; width: 40%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 3px 6px 6px 3px; box-shadow: 0 28px 44px -20px rgba(10, 47, 82, .45), 0 2px 0 rgba(255,255,255,.4); background: #fff; transition: transform .4s ease; }
.cover-fan__item--1 { left: 0; transform: rotate(-12deg) translateY(-4%); z-index: 1; }
.cover-fan__item--2 { left: 15%; transform: rotate(-6deg) translateY(-10%); z-index: 2; }
.cover-fan img.cover-fan__item--3 { left: 30%; transform: translateY(-14%); z-index: 4; width: 42%; }
.cover-fan__item--4 { left: 46%; transform: rotate(6deg) translateY(-10%); z-index: 3; }
.cover-fan__item--5 { left: 60%; transform: rotate(12deg) translateY(-4%); z-index: 2; }
.cover-fan img.cover-fan__mag { left: auto; right: -4%; bottom: auto; top: -2%; width: 30%; aspect-ratio: 1 / 1.414; transform: rotate(9deg); z-index: 0; opacity: .95; }
.cover-fan:hover .cover-fan__item--1 { transform: rotate(-15deg) translate(-6%, -6%); }
.cover-fan:hover .cover-fan__item--5 { transform: rotate(15deg) translate(6%, -6%); }
.hero__art-note { font-family: var(--font-body); display: inline-flex; align-items: center; gap: 6px; margin: 18px 0 0; padding: 6px 14px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); color: var(--ink-soft); font-size: .9rem; }
.hero__art-note .icon { color: var(--accent); }
.trusted { background: var(--surface); border-bottom: 1px solid var(--line); }
.trusted__inner { display: flex; align-items: center; gap: 22px; padding: 14px 0; overflow: hidden; }
.trusted__title { margin: 0; flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.trusted__title span { text-transform: none; letter-spacing: 0; color: var(--accent-strong); }
.trusted__list { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; mask-image: linear-gradient(90deg, #000 85%, transparent); }
.trusted__list a { display: block; white-space: nowrap; padding: 6px 14px; border-radius: var(--r-pill); background: var(--paper); border: 1px solid var(--line); color: var(--ink-soft); font-weight: 600; font-size: .9rem; text-decoration: none; }
.trusted__list a:hover { border-color: var(--brand); color: var(--brand-700); }
.pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.pillar { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 26px 24px 22px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); text-decoration: none; color: var(--ink); transition: transform .2s, box-shadow .2s, border-color .2s; overflow: hidden; }
.pillar::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--rainbow); opacity: 0; transition: opacity .2s; }
.pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--brand-200); color: var(--ink); }
.pillar:hover::after { opacity: 1; }
.pillar__icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 10px; border-radius: 14px; background: var(--brand-100); color: var(--brand-700); }
.pillar__icon .icon { width: 26px; height: 26px; }
.pillar__hi { font-family: var(--font-display); font-size: 1.4rem; line-height: 1.3; }
.pillar__en { font-size: .86rem; letter-spacing: .04em; color: var(--brand); text-transform: uppercase; }
.pillar__text { color: var(--muted); font-size: .95rem; margin: 6px 0 12px; }
.pillar .link-arrow { margin-top: auto; font-size: .95rem; }
.journey { background: var(--band-blue); }
.journey__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.journey__steps { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 10px; counter-reset: j; }
.journey__steps li { position: relative; display: flex; align-items: baseline; gap: 12px; padding: 12px 16px 12px 58px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); counter-increment: j; }
.journey__steps li::before { content: counter(j); position: absolute; left: 14px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 700; font-size: .9rem; }
.journey__steps strong { font-size: 1rem; white-space: nowrap; }
.journey__steps span { color: var(--brand-700); font-family: var(--font-display); }
.mini-calc { box-shadow: var(--shadow-lg); border: 0; }
.mini-calc__title { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; }
.mini-calc__title .icon { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-strong); }
.mini-calc__title span { display: flex; flex-direction: column; line-height: 1.3; }
.mini-calc__title small { color: var(--muted); font-family: var(--font-display); font-size: 1rem; }
.mini-calc .btn { margin-top: 18px; }
.mini-calc .field-hint { margin-top: 10px; text-align: center; }
.rack__track { display: grid; grid-auto-flow: column; grid-auto-columns: 200px; gap: 24px; overflow-x: auto; padding: 6px 2px 22px; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.rack__track > * { scroll-snap-align: start; }
.rack__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.genre-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.genre-tile { position: relative; display: flex; flex-direction: column; gap: 2px; min-height: 128px; padding: 20px 44px 20px 20px; border-radius: var(--r-lg); color: var(--ink); background: var(--surface); border: 1px solid var(--line); text-decoration: none; overflow: hidden; transition: transform .2s, box-shadow .2s; --tile: var(--brand); --tile-soft: var(--brand-100); }
.genre-tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--tile); }
/* decorative disc stays under the labels (z-index 0 vs 1) and is translucent so a long label never looks clipped */
.genre-tile::after { content: ""; position: absolute; right: -28px; bottom: -28px; z-index: 0; width: 110px; height: 110px; border-radius: 50%; background: var(--tile-soft); background: color-mix(in srgb, var(--tile-soft) 72%, transparent); }
.genre-tile > span { position: relative; z-index: 1; }
.genre-tile:hover { color: var(--ink); transform: translateY(-3px); box-shadow: var(--shadow); }
.genre-tile--0 { --tile: #0A64A8; --tile-soft: #E7F1FA; }
.genre-tile--1 { --tile: #A21C30; --tile-soft: #FBE9EC; }
.genre-tile--2 { --tile: #0E8A8A; --tile-ink: #0C7A7A; --tile-soft: #E4F4F4; }
.genre-tile--3 { --tile: #5D4D9A; --tile-soft: #ECE9F5; }
.genre-tile--4 { --tile: #B8800F; --tile-ink: #8F6300; --tile-soft: #FBF1DA; }
.genre-tile--5 { --tile: #C2437A; --tile-soft: #FBE8F0; }
.genre-tile--6 { --tile: #4A7A2C; --tile-soft: #E9F2E2; }
.genre-tile__hi { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.25; color: var(--ink); }
.genre-tile__en { font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tile-ink, var(--tile)); font-weight: 700; overflow-wrap: anywhere; }
.genre-tile__count { margin-top: auto; font-size: .85rem; font-weight: 600; color: var(--muted); }
.spotlight__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 48px; align-items: center; }
.spotlight__name { font-family: var(--font-hero); font-weight: 400; font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem); margin-bottom: .1em; color: var(--brand-900); }
.spotlight__tag { color: var(--brand); font-weight: 600; }
.spotlight__count { color: var(--muted); }
.spotlight__count strong { font-size: 1.6rem; color: var(--accent-strong); }
.spotlight__books { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.spotlight__books > :nth-child(4), .spotlight .book-card__format { display: none; } /* three roomy mini cards beat four cramped ones (R2/R3 review) */
.service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.service-card { display: flex; flex-direction: column; gap: 2px; padding: 22px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); text-decoration: none; color: var(--ink); transition: border-color .2s, box-shadow .2s, transform .2s; }
.service-card:hover { border-color: var(--brand-200); box-shadow: var(--shadow); transform: translateY(-3px); color: var(--ink); }
.service-card__icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 12px; border-radius: 12px; background: var(--brand-100); color: var(--brand); flex: none; }
.service-card__hi { font-family: var(--font-display); color: var(--brand-700); font-size: 1.05rem; }
.service-card__text { margin-top: 8px; font-size: .93rem; color: var(--muted); }
.service-card .link-arrow { margin-top: 12px; font-size: .92rem; }
.service-card--feature { background: linear-gradient(135deg, var(--brand-100), var(--brand-50)); border-color: var(--brand-200); }
.service-card--feature:hover { border-color: var(--brand); }
.service-card--feature .service-card__icon { background: var(--brand); color: #fff; }
.contact-band { background: var(--band-blue); border-top: 1px solid var(--line); }
.contact-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: 44px 0; }
.contact-band__title { color: var(--brand-900); font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem); margin-bottom: .3em; }
.contact-band p { margin: 0; color: var(--ink-soft); }
.contact-band__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cta-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: 48px; padding: 28px 32px; border-radius: var(--r-lg); background: linear-gradient(120deg, var(--brand-100), var(--surface)); border: 1px solid var(--brand-200); color: var(--ink-soft); }
.cta-strip__title { margin: 0 0 4px; font-family: var(--font-display); font-size: 1.6rem; color: var(--brand-900); }
.cta-strip p { margin: 0; }

/* ============================================================
   10. Book shop & book detail
   ============================================================ */
.genre-chips, .active-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.active-chips { margin: 0 0 18px; }
/* Shop toolbar: count · sort · Filters (details.filter-sheet) — no sidebar (R2) */
.shop { display: block; }
.shop__toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin-bottom: 18px; }
.shop__count { margin: 0; color: var(--muted); }
.shop__count strong { color: var(--ink); font-size: 1.15rem; }
.shop__page { white-space: nowrap; }
.shop__tools { display: flex; align-items: center; gap: 10px; }
.shop__sort { display: flex; align-items: center; gap: 8px; }
.shop__sort-label { font-size: .88rem; color: var(--muted); white-space: nowrap; }
.shop__sort select { min-height: 44px; padding: 6px 38px 6px 16px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A64A8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 14px; appearance: none; -webkit-appearance: none; font-weight: 600; font-size: .92rem; color: var(--ink); cursor: pointer; transition: border-color var(--dur); }
.shop__sort select:hover { border-color: var(--brand); }
.filter-form { display: grid; gap: 16px; }
.filter-form .field { gap: 6px; }
.filter-form__group { border: 0; padding: 0; margin: 0; min-width: 0; }
.filter-form__group legend { padding: 0; margin-bottom: 6px; font-weight: 600; font-size: .95rem; }
.filter-form__group legend small { font-weight: 400; color: var(--muted); }
.filter-form__choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.filter-form .choice { padding: 7px 10px; border-width: 1px; font-size: .92rem; align-items: center; }
.filter-form .choice input { margin-top: 0; }
/* the Apply/Clear row sticks to the bottom of the scrolling panel so the primary action is always in view */
.filter-form__actions { position: sticky; bottom: 0; z-index: 1; display: flex; gap: 8px; margin: 4px -18px 0; padding: 12px 18px 18px; background: var(--surface); border-top: 1px solid var(--line); }
.filter-form__actions .btn { flex: 1; }
.filter-sheet { position: relative; }
.filter-sheet__summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--surface); font-weight: 600; font-size: .92rem; cursor: pointer; list-style: none; white-space: nowrap; transition: border-color var(--dur), background var(--dur), color var(--dur); }
.filter-sheet__summary::-webkit-details-marker { display: none; }
.filter-sheet__summary:hover, .filter-sheet[open] > .filter-sheet__summary { border-color: var(--brand); color: var(--brand-700); background: var(--brand-50); }
.filter-sheet__summary .icon { color: var(--brand); }
.filter-sheet__count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-pill); background: var(--accent); color: #fff; font-size: .74rem; font-weight: 700; }
/* desktop/tablet: a panel pinned to the viewport under the header (never taller than the screen), aligned with the container's right edge */
.filter-sheet__panel { position: fixed; right: max(16px, calc((100% - var(--container)) / 2)); top: calc(var(--header-h) + 12px); z-index: 60; width: 340px; max-height: calc(100dvh - var(--header-h) - 28px); overflow-y: auto; padding: 18px 18px 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); animation: panel-in .2s ease; }
.filter-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; font-weight: 700; }
.filter-sheet__head > span { display: inline-flex; align-items: center; gap: 8px; }
.filter-sheet__head .icon { color: var(--brand); }
.filter-sheet__handle { display: none; }
.sheet-backdrop { position: fixed; inset: 0; z-index: 82; background: rgba(10, 30, 50, .45); }
.cta-strip--slim { margin-top: 36px; padding: 20px 24px; }
.cta-strip--slim .cta-strip__title { font-size: 1.3rem; }
.cta-strip--slim p { font-size: .95rem; }
/* Book detail (R2): gallery · title · price row · buy row · offers · trust row, then anchor tabs and sections */
.book-crumbs { padding-top: 20px; }
.book-detail { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); padding: 24px 0 48px; align-items: start; }
.book-detail__media { position: sticky; top: var(--sticky-top); }
.book-detail__cover { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-lg); background: var(--band-blue); border: 1px solid var(--brand-100); overflow: hidden; }
.book-detail__cover img { position: absolute; inset: 0; margin: auto; width: auto; height: auto; max-width: calc(100% - 56px); max-height: calc(100% - 56px); border-radius: 3px 6px 6px 3px; box-shadow: inset 6px 0 8px -6px rgba(0,0,0,.3), 14px 22px 40px -18px rgba(10, 30, 50, .5); }
.book-detail__cover .cover-fallback--lg { position: absolute; inset: 0; margin: auto; width: 62%; height: auto; }
.book-detail__thumbs { display: flex; gap: 10px; margin-top: 14px; justify-content: center; min-height: 94px; }
.book-detail__thumbs button { padding: 3px; border: 2px solid transparent; border-radius: 8px; background: var(--surface); cursor: pointer; }
.book-detail__thumbs button[aria-pressed="true"] { border-color: var(--brand); }
.book-detail__thumbs img { width: 60px; height: 84px; object-fit: cover; border-radius: 4px; }
.book-detail__genre { margin-bottom: 4px; }
.book-detail__title { margin: 10px 0 4px; font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.5rem); line-height: 1.2; }
.book-detail__subtitle { font-size: 1.1rem; color: var(--ink-soft); margin-bottom: 6px; }
.book-detail__by { font-size: 1rem; margin: 0 0 18px; }
.book-detail__by a { font-weight: 600; }
.price-row--lg { align-items: center; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line); }
.price-row--lg .price { font-size: 1.75rem; font-weight: 700; letter-spacing: -.01em; }
.price-row--lg .price__mrp { font-size: 1rem; }
.price-row--lg .price__off { font-size: .86rem; padding: 3px 10px; border-radius: var(--r-pill); }
.price-row--lg .pill--format { font-size: .8rem; padding: 4px 12px; }
.stock-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--r-pill); font-size: .86rem; font-weight: 700; }
.stock-chip.is-in { background: var(--success-soft); color: var(--green); }
.stock-chip.is-out { background: var(--error-soft); color: var(--error); }
.book-detail__tax { margin: 6px 0 16px; font-size: .84rem; color: var(--muted); }
.buy-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; }
.buy-row .btn--lg { flex: 1 1 180px; }
.buy-row__notice { flex: 1 1 240px; margin: 0; display: flex; align-items: center; gap: 8px; }
.wish-btn--lg { width: 54px; height: 54px; border-color: var(--line-strong); background: var(--surface); }
.wish-btn--lg .icon { width: 22px; height: 22px; }
.buy-box__wa { margin-bottom: 20px; }
.buy-box__wa .icon { color: var(--wa); }
.qty { display: inline-flex; align-items: center; flex: none; border: 1.5px solid var(--line-input); border-radius: var(--r-pill); background: var(--surface); }
.qty button { width: 42px; height: 50px; border: 0; background: none; cursor: pointer; display: grid; place-items: center; color: var(--ink); border-radius: var(--r-pill); }
.qty button:hover { color: var(--brand); background: var(--brand-50); }
.qty input { width: 44px; height: 50px; border: 0; text-align: center; font-weight: 700; -moz-appearance: textfield; background: transparent; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.offer-chips { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.offer-chips li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-strong); font-size: .84rem; font-weight: 600; border: 1px solid #F6D3BE; }
.offer-chips .icon { color: var(--accent); }
.trust-row { list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px dashed var(--line-strong); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.trust-row li, .trust-row a { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; text-align: center; color: var(--ink); text-decoration: none; }
.trust-row a:hover strong { color: var(--brand); }
.trust-row__icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--brand-100); color: var(--brand); }
.trust-row__icon .icon { width: 22px; height: 22px; }
.trust-row__text { display: flex; flex-direction: column; min-width: 0; }
.trust-row strong { font-size: .84rem; line-height: 1.3; }
.trust-row small { font-size: .76rem; color: var(--muted); line-height: 1.3; }
.book-detail__note { margin: 14px 0 0; font-size: .84rem; color: var(--muted); }
.subnav { position: sticky; top: var(--header-h); z-index: 30; background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.subnav__list { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; }
.subnav__list::-webkit-scrollbar { display: none; }
.subnav__list a { display: inline-flex; align-items: center; gap: .3em; min-height: 50px; padding: 0 16px; font-weight: 600; font-size: .94rem; color: var(--ink-soft); text-decoration: none; border-bottom: 3px solid transparent; white-space: nowrap; transition: color var(--dur), border-color var(--dur); }
.subnav__list a:hover { color: var(--brand); border-bottom-color: var(--brand-200); }
.subnav__list a:focus-visible { outline-offset: -3px; }
.subnav__list a[aria-current] { color: var(--brand-700); border-bottom-color: var(--brand); font-weight: 700; }
.book-sections { padding-top: 0; }
.book-section { padding: 36px 0; border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 66px); }
.book-section .bi-heading { margin-bottom: 18px; }
.book-section__lead { max-width: 45rem; font-size: 1.1rem; color: var(--ink-soft); margin-bottom: 1.2em; }
.specs { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.specs div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 11px 16px; border-bottom: 1px solid var(--line); }
.specs div:nth-child(odd) { border-right: 1px solid var(--line); }
.specs div:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; } /* an odd last cell spans the row instead of leaving an empty box */
.specs div:nth-last-child(-n+2):nth-child(odd), .specs div:last-child { border-bottom: 0; }
.specs dt { font-size: .84rem; color: var(--muted); }
.specs dd { margin: 0; font-weight: 600; word-break: break-word; }
.author-box { display: grid; gap: 12px; max-width: 45rem; padding: 22px; border-radius: var(--r-lg); background: var(--brand-50); border: 1px solid var(--brand-100); }
.author-box .author-card { border: 0; padding: 0; background: none; box-shadow: none; }
.author-box .author-card:hover { box-shadow: none; transform: none; }
.author-box__bio { margin: 0; color: var(--ink-soft); }
.review-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-width: 45rem; }
.review-list a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--r); background: var(--paper); border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-weight: 600; }
.review-list a:hover { border-color: var(--brand); color: var(--brand-700); }
.review-list .icon { color: var(--brand); }
.foreword { margin-top: 18px; max-width: 45rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); }
.foreword summary { padding: 14px 18px; cursor: pointer; font-family: var(--font-hand); font-size: 1.15rem; color: var(--brand-700); }
.foreword .prose { padding: 0 18px 18px; }
.book-detail__share { padding-top: 28px; }
.book-neighbours { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--line); }
.book-neighbours a { display: inline-flex; align-items: center; gap: 8px; max-width: 48%; color: var(--ink-soft); text-decoration: none; font-size: .9rem; }
.book-neighbours a:hover { color: var(--brand); }
.book-neighbours small { display: block; color: var(--muted); font-size: .75rem; }
.book-neighbours a[rel="next"] { margin-left: auto; text-align: right; }

/* ============================================================
   11. Authors
   ============================================================ */
.az { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 18px; }
.az a, .az span { display: grid; place-items: center; min-width: 36px; height: 36px; padding: 0 8px; border-radius: var(--r-sm); font-weight: 600; font-size: .9rem; text-decoration: none; }
.az a { background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
.az a:hover, .az a[aria-current] { background: var(--brand); border-color: var(--brand); color: #fff; }
.az span { color: var(--line-strong); }
.author-hero { padding: 28px 0 40px; background: linear-gradient(180deg, var(--brand-100), var(--paper)); border-bottom: 1px solid var(--line); }
.author-hero__card { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 36px; align-items: start; margin-top: 22px; padding: 32px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.author-hero__photo img, .avatar--xl { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; border: 5px solid #fff; box-shadow: var(--shadow-lg); }
.avatar--xl { font-size: 4.5rem; }
.author-hero__name { font-family: var(--font-display); font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem); /* Tiro (preloaded on inner pages); Rozha is the home tagline only */ margin: 0; color: var(--brand-900); line-height: 1.15; }
.author-hero__alt { font-size: 1.15rem; color: var(--muted); margin: 2px 0 0; }
.author-hero__tag { color: var(--brand); font-weight: 600; margin: 8px 0 0; }
.author-stats { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 20px 0 0; }
.author-stats li { display: flex; flex-direction: column; padding: 10px 16px; border-radius: var(--r); background: var(--brand-50); border: 1px solid var(--brand-100); min-width: 120px; }
.author-stats strong { font-size: 1.3rem; line-height: 1.3; color: var(--brand-700); }
.author-stats span { font-size: .8rem; color: var(--muted); }
.author-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 16px; }
.author-hero .share-row { padding-top: 16px; border-top: 1px dashed var(--line-strong); }
.author-bio .bi-heading { margin-bottom: 14px; }
.author-genres { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 18px 0 0; }
.author-genres__label { margin-right: 4px; font-size: .86rem; font-weight: 700; color: var(--muted); }
.author-finder { display: grid; gap: 16px; padding: 20px 24px; margin-bottom: 20px; }
.author-finder .author-search { margin: 0; max-width: 620px; }
.author-finder .az { margin: 0; }
.author-grid--tiles { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.author-card--tile { flex-direction: column; align-items: center; gap: 12px; padding: 24px 18px 18px; text-align: center; }
.author-card--tile .avatar { width: 96px; height: 96px; font-size: 2.4rem; border: 4px solid var(--brand-50); box-shadow: var(--shadow-sm); }
.author-card--tile .author-card__body { align-items: center; width: 100%; }
.author-card--tile .author-card__name { font-size: 1.2rem; }
.author-card__genres { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; }
.author-card__foot { display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: 100%; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); font-size: .84rem; }
.author-card--tile .author-card__meta { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin: 0; color: var(--muted); white-space: nowrap; }
.author-card__cta { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 36px; padding: 4px 12px; border-radius: var(--r-pill); background: var(--brand-100); color: var(--brand-700); font-weight: 700; white-space: nowrap; transition: background var(--dur), color var(--dur); }
.author-card--tile .author-card__body { flex: 1; }
.author-card--tile:hover .author-card__cta { background: var(--brand); color: #fff; }

/* ============================================================
   12. Our Work, services, publication, calculator, publish form
   ============================================================ */
.work-hero__grid, .service-hero__grid, .pub-hero__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 40px; align-items: center; }
.work-hero__stats { display: flex; flex-wrap: wrap; gap: 10px 26px; list-style: none; padding: 0; margin: 20px 0 0; color: var(--ink-soft); }
.work-hero__stats strong { font-size: 1.6rem; color: var(--brand-700); margin-right: 4px; }
.work-hero__stack { position: relative; height: 320px; }
.work-hero__mag { position: absolute; width: 44%; aspect-ratio: 1 / 1.414; object-fit: cover; border-radius: 4px; box-shadow: 0 30px 50px -20px rgba(10, 47, 82, .45); background: #fff; }
.work-hero__mag--1 { left: 28%; top: 0; z-index: 3; }
.work-hero__mag--2 { left: 4%; top: 30px; transform: rotate(-8deg); z-index: 2; }
.work-hero__mag--3 { left: 52%; top: 30px; transform: rotate(8deg); z-index: 1; }
.work-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 26px; }
.work-filter { display: flex; gap: 8px; }
.work-filter .input { min-height: 44px; width: auto; max-width: 280px; }
.work-filter .btn { min-height: 44px; width: 44px; padding: 0; }
.work-note { display: flex; align-items: center; gap: 6px; margin: -8px 0 20px; color: var(--muted); }
.work-detail__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; }
.work-detail__reader { height: min(80vh, 820px); border-radius: var(--r-lg); overflow: hidden; background: var(--ink); box-shadow: var(--shadow-lg); }
.work-detail__reader iframe { width: 100%; height: 100%; border: 0; }
.work-detail__cover { max-width: 420px; margin: 0 auto; box-shadow: var(--shadow-lg); }
.service-hero-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 22px 26px; margin-bottom: 36px; border-radius: var(--r-lg); background: linear-gradient(120deg, var(--accent-soft), var(--surface) 70%); border: 1px solid #F6D3BE; text-decoration: none; color: var(--ink); }
.service-hero-card > span:nth-child(2) { display: flex; flex-direction: column; }
.service-hero-card strong { font-size: 1.2rem; }
.service-hero-card .service-card__icon { margin: 0; background: var(--accent-soft); color: var(--accent-strong); }
.service-group { margin-bottom: 40px; }
.service-group__title { font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; color: var(--brand); margin-bottom: 14px; }
.service-group__title span { text-transform: none; letter-spacing: 0; font-family: var(--font-display); font-weight: 400; color: var(--accent-strong); font-size: 1.15rem; margin-left: 6px; }
.service-hero__icon { display: inline-grid; place-items: center; width: 60px; height: 60px; margin: 6px 0 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--brand-200); color: var(--brand); box-shadow: var(--shadow-sm); }
.service-hero__en-lead { color: var(--muted); margin: 8px 0 0; }
.service-hero__price { margin-top: 14px; color: var(--ink-soft); }
.service-hero__price strong { color: var(--brand-700); font-size: 1.3rem; }
.service-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; }
.service-intro { font-size: 1.12rem; line-height: 1.85; color: var(--ink-soft); margin-bottom: 32px; }
.service-body .bi-heading { margin-bottom: 18px; }
.service-specs { position: sticky; top: var(--sticky-top); display: grid; gap: 14px; }
.service-specs__title { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; margin: 0; }
.type-samples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 36px; }
.type-sample { padding: 20px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.type-sample__label { display: inline-block; margin-bottom: 8px; padding: 2px 10px; border-radius: var(--r-pill); background: var(--brand-100); color: var(--brand-700); font-size: .82rem; font-weight: 700; }
.type-sample p { margin: 0; font-size: 1.3rem; line-height: 1.5; }
.type-sample p[lang="hi"] { font-family: var(--font-display); }
.enquiry-wrap { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 40px; align-items: start; }
.enquiry-aside .bi-heading { margin-bottom: 12px; }
.enquiry__title { font-size: 1.35rem; margin-bottom: 6px; }
.enquiry__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.enquiry .field-hint { margin-top: 12px; }
.contact-list, .related-services { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; }
.contact-list li, .related-services a { display: flex; align-items: center; gap: 10px; }
.contact-list .icon { color: var(--brand); }
.related-services a { padding: 10px 14px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-weight: 600; }
.related-services a:hover { border-color: var(--brand); color: var(--brand-700); }
.pub-hero__points { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; padding: 0; margin: 24px 0 0; color: var(--ink-soft); font-size: .95rem; }
.pub-hero__points li { display: inline-flex; align-items: center; gap: 6px; }
.pub-hero__points .icon { color: var(--green); }
.pub-hero__covers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; transform: rotate(-4deg); }
.pub-hero__covers img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 3px 6px 6px 3px; box-shadow: 0 20px 34px -16px rgba(10, 47, 82, .5); background: #fff; }
.pub-hero__covers img:nth-child(3n+2) { transform: translateY(26px); }
.packages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.package { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 28px 26px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.package--highlight { border: 2px solid var(--brand); box-shadow: var(--shadow-lg); transform: translateY(-8px); }
.package__badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); padding: 4px 14px; border-radius: var(--r-pill); background: var(--accent); color: #fff; font-size: .8rem; font-weight: 700; white-space: nowrap; }
.package__name { margin: 0; font-size: 1.5rem; }
.package__name span { font-family: var(--font-display); font-weight: 400; color: var(--brand-700); font-size: 1.2rem; }
.package__for { margin: 0; color: var(--muted); font-size: .95rem; }
.package__price { margin: 0; padding: 12px 0; border-block: 1px dashed var(--line-strong); display: flex; flex-direction: column; }
.package__price strong { font-size: 1.5rem; }
.package__price small { color: var(--muted); }
.package .check-list { flex: 1; font-size: .96rem; }
.packages__note { margin-top: 24px; text-align: center; color: var(--muted); }
.calc-teaser { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: center; }
.calc-teaser__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.4rem); }
.calc-teaser__facts { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.calc-teaser__facts li { display: flex; align-items: baseline; gap: 14px; padding: 16px 20px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.calc-teaser__facts strong { font-size: 1.7rem; color: var(--accent-strong); min-width: 80px; }
.genre-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
.publish-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; }
.publish-form fieldset { border: 0; padding: 0; margin: 0 0 28px; }
.publish-form legend { font-size: 1.25rem; font-weight: 700; margin-bottom: 16px; padding: 0; }
.publish-form legend span { font-family: var(--font-display); font-weight: 400; color: var(--brand-700); margin-left: 6px; }
.publish-form.is-enhanced fieldset { margin-bottom: 8px; }
.stepper-dots { display: none; }
.publish-form.is-enhanced .stepper-dots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; list-style: none; padding: 0; margin: 0 0 26px; counter-reset: none; }
.stepper-dots li { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: .82rem; color: var(--muted); text-align: center; position: relative; }
.stepper-dots li span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--band-cream); color: var(--muted); font-weight: 700; border: 2px solid var(--line-strong); z-index: 1; }
.stepper-dots li::before { content: ""; position: absolute; top: 17px; left: -50%; width: 100%; height: 2px; background: var(--line-strong); }
.stepper-dots li:first-child::before { display: none; }
.stepper-dots li.is-active span { background: var(--brand); border-color: var(--brand); color: #fff; }
.stepper-dots li.is-active { color: var(--brand-700); font-weight: 600; }
.stepper-dots li.is-done span { background: var(--success-soft); border-color: var(--green); color: var(--green); }
.stepper-actions { display: flex; justify-content: space-between; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.stepper-actions [data-step-submit] { margin-left: auto; }
.upload-field { padding: 18px; border: 2px dashed var(--line-strong); border-radius: var(--r-lg); background: var(--paper); }
.upload-field label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.publish-aside { position: sticky; top: var(--sticky-top); display: grid; gap: 16px; }
.publish-aside__title { font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; }
.mini-steps { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.publish-aside__calc { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.publish-aside__calc span { display: flex; flex-direction: column; }
.publish-aside__calc .icon { width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-strong); }
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.calc__form { display: grid; gap: 16px; }
.binding-options { display: grid; gap: 8px; }
.binding-options .choice { font-size: .95rem; }
.calc__side { position: sticky; top: var(--sticky-top); display: grid; gap: 18px; }
.calc__result { min-height: 260px; }
.calc-empty { display: grid; place-items: center; text-align: center; min-height: 220px; color: var(--muted); }
.calc-empty .icon { color: var(--line-strong); margin-bottom: 8px; }
.calc-total { padding: 20px; margin: -6px -6px 18px; border-radius: var(--r); background: var(--brand-100); border: 1px solid var(--brand-200); color: var(--brand-900); text-align: center; }
.calc-total__label { margin: 0; color: var(--brand-700); font-size: .92rem; }
.calc-total__value { margin: 2px 0; font-size: clamp(2rem, 1.6rem + 1.6vw, 2.8rem); font-weight: 700; line-height: 1.2; color: var(--brand-700); }
.calc-total__per { margin: 0; color: var(--accent-strong); font-weight: 600; }
.calc-lines { margin: 0; display: grid; }
.calc-lines div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.calc-lines dt { color: var(--ink-soft); }
.calc-lines dd { margin: 0; font-weight: 700; white-space: nowrap; }
.calc-lines div.calc-lines__strong { background: var(--success-soft); margin: 4px -10px; padding: 10px; border-radius: var(--r-sm); border: 0; }
.calc-nudge { display: flex; gap: 8px; align-items: flex-start; margin: 16px 0 6px; padding: 12px 14px; border-radius: var(--r); background: var(--success-soft); color: #14532D; border: 1px solid #B9DFC3; }
.calc-nudge .icon { margin-top: 4px; }
.calc-nudge__hi { display: block; }
.calc__quote-title { display: flex; align-items: center; gap: 8px; font-size: 1.2rem; margin: 0 0 6px; }
.calc__quote .btn { margin-top: 14px; }
.guide__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.guide__grid ul { padding-left: 1.1em; margin: 0; display: grid; gap: 8px; font-size: .95rem; }
.guide__note { margin-top: 22px; color: var(--muted); }

/* ============================================================
   13. Blog, about, contact, search, policy, error, thank-you
   ============================================================ */
.gouranjali { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; margin-top: 40px; background: linear-gradient(120deg, var(--surface), var(--accent-soft)); }
.gouranjali__title { font-family: var(--font-display); font-weight: 400; font-size: 1.7rem; }
.post-hero__title { font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.6rem); max-width: 30ch; }
.post-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 14px; font-size: .9rem; color: var(--muted); }
.post-hero__meta time, .post-hero__meta span { display: inline-flex; align-items: center; gap: 4px; }
.post-hero__read { padding: 2px 10px; border-radius: var(--r-pill); background: var(--band-cream); color: var(--ink-soft); font-weight: 600; font-size: .8rem; }
.post-image { width: 100%; border-radius: var(--r-lg); margin-bottom: 28px; box-shadow: var(--shadow); }
.prose--post { font-size: 1.06rem; }
.post-share { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); }
.about-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: 48px; align-items: center; }
.about-grid .prose { font-family: var(--font-body); font-size: 1.06rem; line-height: 1.85; }
.about-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fact { padding: 20px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.fact strong { display: block; font-size: 2rem; color: var(--brand); line-height: 1.1; }
.fact span { font-size: .88rem; color: var(--muted); }
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; }
.team-card { padding: 26px 22px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); text-align: center; }
.team-card .avatar { margin: 0 auto 14px; width: 76px; height: 76px; font-family: var(--font-body); font-weight: 700; }
.team-card h3 { margin: 0; }
.team-card__role { margin: 2px 0 10px; color: var(--accent-strong); font-weight: 600; font-size: .92rem; }
.team-card__text { margin: 0; color: var(--muted); font-size: .94rem; }
.contact-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 32px; align-items: start; }
.contact-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.contact-card { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--ink-soft); font-size: .95rem; word-break: break-word; }
.contact-card--wide { grid-column: 1 / -1; font-size: .88rem; line-height: 1.6; }
a.contact-card:hover { border-color: var(--brand); color: var(--ink); }
.contact-card > :last-child { display: flex; flex-direction: column; }
.contact-card .social-links { margin-top: 8px; }
.contact-card strong { color: var(--ink); }
.contact-card a { color: var(--brand-700); text-decoration: none; }
.contact-card a:hover { color: var(--brand); text-decoration: underline; }
.contact-card__icon { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--brand-100); color: var(--brand-700); }
.contact-card__icon--wa { background: var(--wa-soft); color: var(--wa); }
.map-section { padding: 0 0 48px; }
.map-section__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; margin-bottom: 14px; color: var(--ink-soft); font-size: .95rem; }
.map-section__head p { margin: 0; display: flex; align-items: center; gap: 8px; }
.map-section__head .icon { color: var(--brand); }
.map-section iframe { width: min(100% - 32px, var(--container)); height: 380px; margin-inline: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--band-blue); display: block; filter: saturate(.9); }
.search-results__title { margin: 36px 0 18px; font-size: 1.3rem; }
.search-results__title:first-child { margin-top: 0; }
.error-page { max-width: 760px; text-align: center; }
.error-page__code { margin: 0; font-family: var(--font-hero); font-size: clamp(4rem, 3rem + 6vw, 8rem); line-height: 1; background: var(--rainbow); -webkit-background-clip: text; background-clip: text; color: transparent; }
.error-page .page-hero__lead { margin: 0 auto 24px; }
.error-page .hero-actions { justify-content: center; }
.error-page__search { margin: 0 auto 8px; max-width: 520px; flex: none; }
.error-page__detail { text-align: left; white-space: pre-wrap; background: var(--surface); padding: 12px; border-radius: var(--r-sm); border: 1px solid var(--line); font-size: .85rem; }
.thanks { max-width: 720px; text-align: center; }
.thanks__icon { display: inline-grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--success-soft); color: var(--green); margin-bottom: 16px; }
.thanks__icon--pending { background: var(--accent-soft); color: var(--accent-strong); }
.thanks .page-hero__lead { margin: 0 auto 10px; }
.thanks__ref { font-size: 1.1rem; }
.thanks .hero-actions { justify-content: center; }

/* ============================================================
   14. Google AdSense units (reserved heights — keep)
   ============================================================ */
.ad-slot { margin: 36px auto; text-align: center; max-width: 100%; }
.ad-slot__label { margin: 0 0 6px; font-size: .72rem; color: var(--muted); letter-spacing: .02em; }
.ad-slot ins.adsbygoogle { display: block; min-height: 280px; }
.ad-slot--in-article ins.adsbygoogle { min-height: 250px; }
.ad-slot--in-feed ins.adsbygoogle { min-height: 160px; }
/* Unfilled or blocked units (site.js): removed only when wholly below the screen, so nothing the reader
   sees moves; a unit already on screen keeps its space but turns invisible. */
.ad-slot.is-collapsed { display: none; }
.ad-slot.is-empty { visibility: hidden; }
.book-grid > .ad-slot, .post-grid > .ad-slot { grid-column: 1 / -1; margin: 24px 0; } /* clear of the Add-to-cart buttons above and the cover links below */
.section > .container > .ad-slot:first-child { margin-top: 0; }

/* ============================================================
   15. Cart, checkout, order
   ============================================================ */
.cart { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
.cart__lines { display: grid; gap: 12px; }
.cart-line { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto auto 40px; align-items: center; gap: 16px; padding: 14px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.cart-line__cover img { width: 70px; height: 105px; object-fit: contain; border-radius: 3px; box-shadow: var(--shadow-sm); background: #fff; }
.cart-line__info { display: flex; flex-direction: column; min-width: 0; font-size: .92rem; }
.cart-line__title { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); text-decoration: none; }
.cart-line__unit { color: var(--muted); }
.cart-line__total { font-size: 1.05rem; min-width: 80px; text-align: right; }
.cart-line__remove { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--error); cursor: pointer; display: grid; place-items: center; }
.cart-line__remove:hover { background: var(--error-soft); }
.cart__actions { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.cart__summary, .checkout__side { position: sticky; top: var(--sticky-top); display: grid; gap: 14px; }
.cart__summary-title { font-size: 1.15rem; margin: 0 0 4px; }
.cart__summary-title span { font-family: var(--font-display); font-weight: 400; color: var(--brand-700); }
.totals { margin: 0; display: grid; }
.totals div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.totals dd { margin: 0; font-weight: 600; white-space: nowrap; }
.totals div.totals__grand { border-bottom: 0; font-size: 1.2rem; }
.totals__grand dd { font-weight: 800; }
.free { color: var(--green); font-weight: 800; }
.free-note { display: flex; gap: 8px; align-items: center; margin: 0; padding: 10px 12px; border-radius: var(--r); background: var(--accent-soft); font-size: .92rem; }
.pay-badges { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; font-size: .85rem; color: var(--muted); }
.checkout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; }
.checkout__main { display: grid; gap: 20px; }
.checkout fieldset { margin: 0; }
.checkout legend { font-size: 1.15rem; font-weight: 700; padding: 0 6px; }
.checkout legend span { font-family: var(--font-display); font-weight: 400; color: var(--brand-700); }
.pay-options { display: grid; gap: 10px; }
.pay-option { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border: 2px solid var(--line-strong); border-radius: var(--r-lg); cursor: pointer; background: var(--surface); }
.pay-option:has(input:checked) { border-color: var(--brand); background: var(--brand-50); }
.pay-option input { margin-top: 5px; width: 18px; height: 18px; accent-color: var(--brand); }
.pay-option span { display: flex; flex-direction: column; }
.pay-option strong { display: inline-flex; align-items: center; gap: 6px; }
.pay-option small { color: var(--muted); }
.pay-option .sandbox { color: var(--accent-strong); font-weight: 700; }
.mini-lines { list-style: none; padding: 0; margin: 0 0 6px; display: grid; gap: 10px; }
.mini-lines li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: .95rem; }
.mini-lines img { width: 40px; height: 60px; object-fit: contain; border-radius: 2px; background: #fff; box-shadow: var(--shadow-sm); }
.mini-lines small { color: var(--muted); }
.mini-lines a { color: var(--ink); }
.order-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.order-head h1 { font-family: var(--font-body); font-weight: 700; font-size: 1.9rem; }
.status-pill { padding: 8px 18px; border-radius: var(--r-pill); font-weight: 700; background: var(--warn-soft); color: var(--warn); }
.status-pill--paid, .status-pill--cod_collected { background: var(--success-soft); color: #166534; }
.status-pill--cod_pending { background: var(--brand-100); color: var(--brand-700); }
.status-pill--failed { background: var(--error-soft); color: var(--error); }
.order { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.order__main, .order__side { display: grid; gap: 18px; }
.timeline-steps { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; padding: 0; margin: 0; }
.timeline-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; font-weight: 600; color: var(--muted); font-size: .92rem; }
.timeline-steps li span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line-strong); color: transparent; z-index: 1; }
.timeline-steps li::before { content: ""; position: absolute; top: 18px; left: -50%; width: 100%; height: 3px; background: var(--line-strong); }
.timeline-steps li:first-child::before { display: none; }
.timeline-steps li.is-done { color: var(--green); }
.timeline-steps li.is-done span { background: var(--green); border-color: var(--green); color: #fff; }
.timeline-steps li.is-done::before { background: var(--green); }
.pay-again h2 { display: flex; align-items: center; gap: 8px; font-size: 1.15rem; }
.track-card { display: flex; gap: 14px; align-items: flex-start; }
.track-card p { margin: 4px 0 0; }

/* ============================================================
   16. Responsive
   ============================================================ */
@media (max-width: 1400px) {
  .brand__wordmark { width: 150px; }
  /* search collapses to a round button; on focus it expands over the nav (no layout shift) */
  .header__row > .header-search { flex: none; width: 44px; min-width: 44px; max-width: 44px; }
  .header__row > .header-search:not(:focus-within) input { padding-inline: 0; opacity: 0; width: 0; flex: none; }
  .header__row > .header-search button { padding: 0; width: 42px; height: 42px; }
}
@media (max-width: 1280px) {
  .brand__wordmark { display: none; }
}
@media (max-width: 1180px) {
  .header__cta { display: none; }
  .header__row > .header-search { flex: 1 1 200px; width: auto; min-width: 160px; max-width: 260px; }
  .header__row > .header-search:not(:focus-within) input { padding: 9px 4px 9px 18px; opacity: 1; width: auto; flex: 1; }
  .header__row > .header-search button { padding: 0 14px 0 8px; width: auto; height: auto; }
  .header__row > .header-search:focus-within { position: static; transform: none; width: auto; max-width: 320px; box-shadow: none; }
}
@media (max-width: 1080px) {
  .hide-md { display: none !important; }
  .nav-toggle { display: inline-grid; }
  .brand__wordmark { display: block; }
  .header__row > .header-search { margin-left: auto; max-width: 360px; }
  .header__row > .header-search:focus-within { max-width: 360px; }
  /* closed drawer is also visibility:hidden so its 8 controls are not tab stops / read by screen readers */
  .site-nav { position: fixed; inset: 0 auto 0 0; z-index: 80; width: min(86vw, 360px); background: var(--surface); transform: translateX(-102%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; overflow-y: auto; box-shadow: var(--shadow-lg); }
  body.nav-open .site-nav { transform: none; visibility: visible; transition-delay: 0s; }
  body.nav-open { overflow: hidden; }
  body.nav-open .site-header { z-index: 80; } /* the sticky header is a stacking context: lift it above .nav-backdrop (70) so the drawer gets the clicks */
  .site-nav__inner { flex-direction: column; align-items: stretch; width: 100%; padding: 0 0 24px; }
  .site-nav__head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 16px; border-bottom: 1px solid var(--line); }
  .site-nav__head .nav-close { display: grid; margin-left: auto; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list > li { border-bottom: 1px solid var(--line); }
  .nav-list > li > a, .nav-list summary { padding: 14px 18px; justify-content: space-between; border-radius: 0; font-size: 1rem; }
  .nav-list > li > a:hover, .nav-list summary:hover, .nav-list details[open] > summary { background: var(--brand-50); }
  .nav-list > li > a:focus-visible, .nav-list summary:focus-visible { outline-offset: -3px; } /* rows are as wide as the scrolling drawer: keep the ring inside */
  .nav-list [aria-current="page"] { background: var(--brand-100); box-shadow: inset 4px 0 0 var(--brand); }
  .mega { position: static; width: auto; min-width: 0; max-width: none; flex-direction: column; gap: 16px; padding: 4px 18px 18px; border: 0; border-radius: 0; box-shadow: none; }
  .mega__list a { padding: 9px 8px; } /* ≈43px rows in the drawer */
  .mega__col--feature { padding-left: 0; border-left: 0; }
  .mega__promo { margin-left: 0; }
  .site-nav__cta { display: flex; margin: 18px 16px 0; }
  .site-nav__social { display: block; margin: 18px 16px 0; padding-top: 16px; border-top: 1px solid var(--line); }
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-grid--3, .guide__grid, .steps--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spotlight__books { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .spotlight__books > :nth-child(4) { display: none; }
  .trust-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .book-about, .service-body, .publish-layout, .enquiry-wrap { grid-template-columns: 1fr; }
  .author-box, .service-specs, .publish-aside { position: static; }
}
@media (max-width: 960px) {
  .hero__grid, .journey__grid, .spotlight__grid, .work-hero__grid, .service-hero__grid, .pub-hero__grid, .calc-teaser, .about-grid, .contact-grid, .calc, .book-detail { grid-template-columns: minmax(0, 1fr); }
  .hero__art { order: -1; }
  .cover-fan { width: min(100%, 380px); }
  .hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .book-detail__media, .calc__side, .cart__summary, .checkout__side { position: static; }
  .shop__toolbar { gap: 8px 12px; }
  .packages { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .package--highlight { transform: none; }
  .work-hero__stack { height: 260px; max-width: 420px; }
  .pub-hero__covers { max-width: 420px; }
  .cart, .checkout, .order { grid-template-columns: 1fr; }
  .mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px -12px rgba(0,0,0,.2); padding-bottom: env(safe-area-inset-bottom); }
  .mobile-bar a { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 56px; padding: 8px 4px; font-size: .72rem; font-weight: 600; color: var(--ink-soft); text-decoration: none; }
  .mobile-bar a:hover { color: var(--brand); }
  .mobile-bar .icon { width: 22px; height: 22px; }
  .mobile-bar a.mobile-bar__wa { color: var(--wa); }
  .wa-fab { display: none; }
  body { padding-bottom: 64px; }
  html { scroll-padding-bottom: calc(72px + env(safe-area-inset-bottom)); } /* focused controls are not hidden under the mobile bar */
  .toast { bottom: 84px; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .hide-sm { display: none !important; }
  .header__row { gap: 6px; }
  .brand { gap: 8px; }
  .brand__logo { width: 40px; height: 40px; }
  .header__row > .header-search { display: none; }
  .header-search-row { display: block; }
  .header-search-row .header-search { max-width: none; min-width: 0; flex: none; }
  .header__icons { margin-left: auto; gap: 4px; }
  .icon-btn { width: 44px; height: 44px; border-radius: 50%; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .section-head--center { align-items: center; }
  .shelf__nav { display: none; } /* touch: the shelf scrolls by swipe */
  .chip { min-height: 40px; padding-block: 8px; }
  .az a { min-width: 44px; height: 44px; } /* 27 adjacent letter links: thumb-sized targets (the inert letters keep 36px) */
  .chip--soft { min-height: 40px; padding-block: 6px; }
  .btn--sm, .link-arrow { min-height: 40px; }
  .filter-form .choice { padding: 8px 10px; }
  .book-card__title { line-height: 1.45; }
  .journey__steps li { flex-direction: column; align-items: flex-start; gap: 0; }
  .journey__steps span { font-size: .95rem; }
  .pillars, .service-grid, .feature-grid--3, .guide__grid, .steps--6, .type-samples, .check-list--2, .contact-cards { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; padding: 32px 0 28px; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__links { gap: 2px; }
  .footer__links a, .footer__policies a { display: inline-block; padding-block: 11px; }
  .footer__policies { gap: 0 18px; }
  .form-grid { grid-template-columns: 1fr; }
  .specs { grid-template-columns: 1fr; }
  .specs div:nth-child(odd) { border-right: 0; }
  .specs div:nth-last-child(-n+2):nth-child(odd) { border-bottom: 1px solid var(--line); }
  .specs div:last-child { border-bottom: 0; }
  .book-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
  .genre-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .genre-tile { min-height: 110px; padding: 16px 36px 16px 18px; }
  .genre-tile::after { width: 90px; height: 90px; right: -30px; bottom: -30px; }
  .genre-tile__hi { font-size: 1.3rem; }
  .genre-tile__en { font-size: .72rem; letter-spacing: .04em; }
  .genre-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .genre-chips::-webkit-scrollbar { display: none; }
  .shelf__track, .rack__track { grid-auto-columns: 46%; gap: 12px; }
  .cover-fan { width: min(92%, 320px); }
  .hero__grid { gap: 20px; padding-top: 24px; }
  .hero__stats { gap: 10px; }
  .spotlight__books { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spotlight__books > :nth-child(3) { display: none; }
  .author-hero__card { grid-template-columns: 1fr; gap: 16px; padding: 24px 18px; text-align: center; justify-items: center; }
  .author-hero__photo img, .avatar--xl { width: 128px; height: 128px; font-size: 3.6rem; }
  .author-stats, .author-hero__actions, .author-hero .share-row { justify-content: center; }
  .stepper-dots li { font-size: 0; }
  .service-hero-card { grid-template-columns: 1fr; }
  .trusted__inner { flex-direction: column; align-items: flex-start; gap: 10px; }
  .trusted__list { max-width: 100%; }
  .trust-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .trust-strip__icon { width: 40px; height: 40px; }
  .work-filter { width: 100%; flex-wrap: wrap; }
  .work-filter select.input { flex: 1 1 100%; max-width: none; min-width: 0; }
  .work-filter input.input { flex: 1; min-width: 0; max-width: none; }
  .cta-strip { padding: 22px; margin-top: 32px; }
  .contact-band__inner { padding: 32px 0; }
  .map-section { padding-bottom: 32px; }
  .map-section iframe { height: 300px; }
  .reader { width: 100vw; height: 100vh; max-height: none; border-radius: 0; }
  .search-box, .author-search { flex-direction: column; align-items: stretch; }
  .footer__follow { flex-direction: column; align-items: flex-start; }
  .footer__bottom-inner { flex-direction: column; align-items: flex-start; }
  .cart-line { grid-template-columns: 60px minmax(0, 1fr) auto; gap: 12px; grid-template-areas: "cover info remove" "cover qty total"; }
  .cart-line__remove { justify-self: end; }
  .cart-line__cover { grid-area: cover; }
  .cart-line__info { grid-area: info; }
  .cart-line .qty { grid-area: qty; justify-self: start; }
  .cart-line__total { grid-area: total; }
  .cart-line__remove { grid-area: remove; }
  .timeline-steps li { font-size: .78rem; }
}
@media (max-width: 400px) {
  .brand__wordmark { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .site-header, .header-search-row, .site-footer, .mobile-bar, .wa-fab, .rainbow, .reader, .announce, .nav-backdrop, .wish-btn, .book-card__add, .book-card__notify, .buy-row, .buy-box__wa, .offer-chips, .subnav, .filter-sheet, .sheet-backdrop, .book-detail__share, .share-row, .skip-link, .shelf__nav, .toast { display: none !important; }
  body { background: #fff; padding: 0; }
}

/* ============================================================
   ==== R3 home ====
   Home page rebuild: light hero with the three promo tiles (.bento--hero), genre collection
   shelf (.collection-tile), books tabset, author spotlight card, contact card and the footer
   newsletter band. Everything below only adds classes or scopes overrides to home/footer parts.
   ============================================================ */
/* Hero (light): copy + search left, two CTAs + stat chips below, three promo tiles right */
.hero--light { background: var(--paper); border-bottom: 1px solid var(--line); }
.hero--light .hero__glow { display: none; }
.hero__blob { position: absolute; right: -14%; top: -38%; width: min(64%, 880px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, var(--brand-100) 0%, var(--brand-50) 52%, rgba(242, 247, 252, 0) 74%); pointer-events: none; }
.hero--light .hero__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-rows: auto 1fr; grid-template-areas: "copy bento" "foot bento"; gap: 8px clamp(28px, 3.5vw, 56px); align-items: start; padding: clamp(32px, 4vw, 52px) 0 clamp(36px, 4.5vw, 60px); }
.hero__copy { grid-area: copy; }
.hero__foot { grid-area: foot; align-self: end; padding-top: 8px; }
.bento--hero { grid-area: bento; align-self: center; }
.hero--light .hero__title { margin-bottom: .3em; }
.hero--light .hero__kicker { margin-bottom: 1.1em; font-size: .86rem; letter-spacing: 0; line-height: 1.6; }
.hero--light .hero__kicker [lang="en"] { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; }
.hero--light .hero__sub { max-width: 30rem; font-size: clamp(1.05rem, .95rem + .35vw, 1.2rem); line-height: 1.6; color: var(--ink-soft); margin-bottom: .5em; }
.hero--light .hero__lead { max-width: 32rem; font-size: .98rem; color: var(--muted); margin-bottom: 0; }
.hero__search { margin-top: 22px; max-width: 540px; }
.hero__search .input { min-height: 52px; padding-inline: 22px; background: var(--surface); border-color: var(--line-input); box-shadow: var(--shadow-sm); font-size: 1rem; }
.hero__search .input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-100); }
.hero__search-btn { width: 52px; min-height: 52px; height: 52px; box-shadow: var(--shadow-sm); }
.hero__search-btn .icon { width: 22px; height: 22px; }
.hero__actions { margin-top: 0; }
.hero__chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
.stat-chip { margin: 0; }
.stat-chip dd { display: inline-flex; align-items: baseline; gap: 8px; margin: 0; padding: 7px 16px 7px 14px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.stat-chip strong { font-size: 1.25rem; line-height: 1.1; color: var(--brand); font-weight: 700; }
.stat-chip span { font-size: .82rem; color: var(--muted); line-height: 1.3; }

/* Genre collection shelf: 3:4 cover of the newest book in the genre with a label bar */
.home-genres .section-head { margin-bottom: 22px; }
.shelf--collections .shelf__track { grid-auto-columns: 212px; gap: 18px; padding: 6px 2px 14px; }
.collection-tile { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: var(--r-lg); overflow: hidden; background: var(--band-blue); color: var(--ink); text-decoration: none; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s; --tile: var(--brand); --tile-soft: var(--brand-100); }
.collection-tile:hover, .collection-tile:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow); color: var(--ink); }
.collection-tile__media { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(160deg, var(--tile-soft), var(--surface) 70%); }
.collection-tile__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; transition: transform .45s ease; }
.collection-tile:hover img { transform: scale(1.04); }
.collection-tile__fallback { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 34%; border-radius: 50%; background: var(--tile); color: #fff; }
.collection-tile__label { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 1px; padding: 11px 14px 12px; background: var(--surface); border-top: 3px solid var(--tile); }
.collection-tile__hi { font-family: var(--font-display); font-size: 1.22rem; line-height: 1.25; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.collection-tile__en { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tile-ink, var(--tile)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.collection-tile__count { margin-top: 4px; font-size: .78rem; font-weight: 600; color: var(--muted); }
.collection-tile--0 { --tile: #0A64A8; --tile-soft: #E7F1FA; }
.collection-tile--1 { --tile: #A21C30; --tile-soft: #FBE9EC; }
.collection-tile--2 { --tile: #0E8A8A; --tile-ink: #0A6B6B; --tile-soft: #E4F4F4; }
.collection-tile--3 { --tile: #5D4D9A; --tile-soft: #ECE9F5; }
.collection-tile--4 { --tile: #B8800F; --tile-ink: #7E5700; --tile-soft: #FBF1DA; }
.collection-tile--5 { --tile: #C2437A; --tile-ink: #A8336A; --tile-soft: #FBE8F0; }
.collection-tile--6 { --tile: #4A7A2C; --tile-ink: #3F6A24; --tile-soft: #E9F2E2; } /* --tile-ink: label colours ≥ 4.5:1 on white */

/* Books tabset: New / Featured / biggest genre, 4-up grid per panel */
.tabset--books .tabset__tabs { gap: 8px; margin-bottom: 26px; }
.tabset--books .tabset__tabs label { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 7px 18px; background: var(--surface); border-color: var(--line-strong); color: var(--ink-soft); font-size: .96rem; transition: background var(--dur), color var(--dur), border-color var(--dur); }
.tabset--books .tabset__tabs label:hover { border-color: var(--brand); color: var(--brand-700); }
.tabset--books .tabset__tabs label [lang="en"] { font-size: .76rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; opacity: .9; }
/* keyboard focus on the (visually hidden) radio shows on its label */
.tabset > input:nth-of-type(1):focus-visible ~ .tabset__tabs label:nth-of-type(1), .tabset > input:nth-of-type(2):focus-visible ~ .tabset__tabs label:nth-of-type(2), .tabset > input:nth-of-type(3):focus-visible ~ .tabset__tabs label:nth-of-type(3), .tabset > input:nth-of-type(4):focus-visible ~ .tabset__tabs label:nth-of-type(4) { outline: 3px solid var(--brand-900); outline-offset: 2px; }
.book-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 22px; }
.home-books .section-head__text { max-width: 44rem; }

/* Author spotlight (cream band): photo card left, four covers right */
.spotlight__card { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 26px; align-items: start; padding: clamp(20px, 2.5vw, 30px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.spotlight__photo { width: 150px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--brand-100); border: 5px solid var(--band-cream); box-shadow: var(--shadow); }
.spotlight__photo img { width: 100%; height: 100%; object-fit: cover; }
.spotlight__photo--initial { display: grid; place-items: center; font-family: var(--font-display); font-size: 3.4rem; color: var(--brand-700); }
.spotlight__copy .eyebrow { margin-bottom: .35em; }
.spotlight__copy .spotlight__name { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.8rem); }
.spotlight__bio { color: var(--ink-soft); }
.spotlight__copy .hero-actions { margin-top: 18px; }

/* Publishing band on white (journey steps + mini calculator) */
.journey--white { background: var(--surface); border-block: 1px solid var(--line); }
.journey--white .journey__steps li { background: var(--paper); }
.journey--white .mini-calc { border: 1px solid var(--brand-100); box-shadow: var(--shadow); }

/* Why Anjani on cream: icon tiles */
.home-why .feature { border-color: #EFE6D3; }
.home-why .feature__icon { background: var(--surface); border: 1px solid var(--brand-100); color: var(--brand); }

/* Contact band as a light card */
.contact-band--card { background: var(--paper); border-top: 0; padding: clamp(28px, 4vw, 52px) 0; }
.contact-band__card { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 28px clamp(28px, 4vw, 56px); align-items: center; padding: clamp(22px, 3.5vw, 44px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.contact-band--card .contact-band__title { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); margin-bottom: .35em; }
.contact-band__lead { margin: 0 0 14px; color: var(--ink-soft); }
.contact-band__address { font-style: normal; display: grid; gap: 8px; color: var(--ink-soft); font-size: .95rem; }
.contact-band__address p { display: flex; gap: 10px; align-items: flex-start; margin: 0; }
.contact-band__address .icon { flex: none; margin-top: 5px; color: var(--brand); }
.contact-band__side { display: grid; gap: 18px; justify-items: start; }
.contact-band--card .contact-band__actions { gap: 10px; }
.contact-band__follow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font-size: .9rem; font-weight: 600; color: var(--muted); }
ul.social-links { list-style: none; margin: 0; padding: 0; }
.social-links--sm a { width: 38px; height: 38px; }

/* Newsletter band (footer, blog, book): brand-100 panel, input + button inline on desktop */
.newsletter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "head form" "text note" "privacy note"; column-gap: clamp(24px, 4vw, 56px); row-gap: 6px; align-items: start; padding: clamp(22px, 3vw, 32px) clamp(20px, 3vw, 36px); border-radius: var(--r-lg); background: var(--brand-100); border: 1px solid var(--brand-200); }
.site-footer .newsletter { margin: 28px 0 4px; }
.newsletter > .bi-heading { grid-area: head; }
.newsletter .bi-heading__hi { font-size: 1.5rem; }
.newsletter .bi-heading__en { font-size: .78rem; color: var(--brand-700); }
.newsletter__text { grid-area: text; margin: 0; color: var(--ink-soft); font-size: .95rem; }
.newsletter__form { grid-area: form; display: flex; gap: 10px; align-self: center; margin-top: 4px; }
.newsletter__form .input { flex: 1; min-width: 0; min-height: 50px; border-radius: var(--r-pill); padding-inline: 20px; background: var(--surface); border-color: #78848F; box-shadow: var(--shadow-sm); } /* 3:1 against the brand-100 panel as well as the white fill */
.newsletter__form .input:focus { border-color: var(--brand); }
.newsletter__form .btn { flex: none; min-height: 50px; padding-inline: 24px; }
.newsletter__note { grid-area: note; margin: 0; font-size: .9rem; font-weight: 600; color: var(--green); }
.newsletter__note[data-state="error"] { color: var(--error); }
.newsletter__note:empty { display: none; }
.newsletter__privacy { grid-area: privacy; margin: 2px 0 0; font-size: .82rem; color: var(--muted); }
.newsletter__privacy a { color: var(--brand-700); text-decoration: underline; }

/* Responsive (home + footer newsletter) */
@media (max-width: 1080px) {
  .book-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .book-grid--4 > :nth-child(n+7) { display: none; } /* two full rows of three */
}
@media (max-width: 960px) {
  .hero--light .hero__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "copy" "bento" "foot"; gap: 24px; }
  .hero__foot { padding-top: 0; }
  .hero__blob { right: -30%; top: 10%; width: 90%; }
  .newsletter { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "text" "form" "note" "privacy"; }
  .newsletter__form { margin-top: 10px; }
  .contact-band__card { grid-template-columns: minmax(0, 1fr); }
  .spotlight__card { margin-bottom: 8px; }
}
@media (max-width: 720px) {
  .hero--light .hero__grid { gap: 18px; padding: 22px 0 32px; }
  .hero--light .hero__kicker { margin-bottom: .8em; }
  .hero--light .hero__sub { font-size: 1.02rem; }
  .hero--light .hero__lead { font-size: .94rem; }
  .hero__search { flex-direction: row; align-items: center; margin-top: 16px; }
  .hero__search .input { min-height: 48px; }
  .hero__search-btn { width: 48px; min-height: 48px; height: 48px; }
  .hero__actions .btn { flex: 1 1 100%; }
  .hero__chips { margin-top: 14px; }
  .stat-chip dd { padding: 6px 14px 6px 12px; }
  .stat-chip strong { font-size: 1.1rem; }
  .shelf--collections .shelf__track { grid-auto-columns: 44%; gap: 12px; }
  .collection-tile__label { padding: 9px 11px 10px; }
  .collection-tile__hi { font-size: 1.05rem; }
  .collection-tile__en { font-size: .72rem; letter-spacing: .04em; }
  .collection-tile__count { font-size: .74rem; margin-top: 2px; }
  /* tabs become scrolling chips; panels are 2-up grids */
  .tabset--books .tabset__tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 20px; padding: 2px 16px 6px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  .tabset--books .tabset__tabs::-webkit-scrollbar { display: none; }
  .tabset--books .tabset__tabs label { flex: none; white-space: nowrap; scroll-snap-align: start; min-height: 40px; }
  .book-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
  .book-grid--4 > :nth-child(n+7) { display: flex; }
  .spotlight__card { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 20px 18px; }
  .spotlight__photo { width: 108px; }
  .contact-band__card { padding: 22px 18px; }
  .contact-band--card .contact-band__actions { width: 100%; }
  .contact-band--card .contact-band__actions .btn { flex: 1 1 100%; }
  .newsletter { padding: 22px 18px; }
  .newsletter .bi-heading__hi { font-size: 1.3rem; }
  .newsletter__form { flex-direction: column; align-items: stretch; }
  .social-links--sm a { width: 44px; height: 44px; }
}

/* ============================================================
   ==== R2 catalogue ==== shop filter sheet, book detail, authors, blog, search, account, cart/checkout
   ============================================================ */
/* Post cards: 16:9 picture box, with a tile when a post has no image */
.post-card__img { display: block; position: relative; aspect-ratio: 16 / 9; background: var(--band-blue); overflow: hidden; }
.post-card__img img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
.post-card__img--fallback { background: linear-gradient(135deg, var(--brand-100), var(--band-cream)); }
.post-card__fallback { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--brand-700); font-family: var(--font-display); font-size: 1.25rem; }
.post-card__fallback .icon { color: var(--brand); opacity: .7; }
.post-card__meta { gap: 8px 12px; }
.post-card__meta time { white-space: nowrap; }
.post-card__title { font-size: 1.22rem; margin-bottom: .35em; }
.post-card__title a { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-card__excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gouranjali__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Search results: one soft card per group */
.search-results > .shop__count { margin-bottom: 18px; }
.search-group { padding: 22px; margin-bottom: 20px; border-radius: var(--r-lg); background: var(--brand-50); border: 1px solid var(--brand-100); }
.search-group__title { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; font-size: 1.15rem; }
.search-group__title .icon { color: var(--brand); }
.search-group__count { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 8px; border-radius: var(--r-pill); background: var(--brand); color: #fff; font-size: .8rem; font-weight: 700; }
.search-group__more { margin: 16px 0 0; }

/* Tables (account orders) */
.table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm); -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.table th, .table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.table th { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--paper); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--brand-50); }
.table .num { text-align: right; }
.table a { text-decoration: none; }
.table a:hover { text-decoration: underline; }
.status-pill--sm { padding: 4px 12px; font-size: .84rem; }

/* My Account */
.account-head { display: flex; align-items: center; gap: 18px; }
.account-head h1 { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.account-head .eyebrow { margin-bottom: 2px; }
.account-head .muted { margin: 2px 0 0; font-size: .92rem; }
.account-head__avatar { width: 64px; height: 64px; font-size: 1.6rem; font-family: var(--font-body); font-weight: 700; border: 3px solid #fff; box-shadow: var(--shadow-sm); }
.account-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.account-nav .tabs a { display: inline-flex; align-items: center; gap: 6px; }
.account-nav .tabs a .icon { color: var(--brand); }
.account-nav .tabs a[aria-current] .icon { color: #fff; }
.account-nav__logout { margin-left: auto; }
.account-merge { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; background: var(--brand-50); border-color: var(--brand-200); color: var(--ink-soft); }
.account-merge > span { display: inline-flex; align-items: flex-start; gap: 8px; flex: 1 1 320px; }
.account-merge .icon { color: var(--sale); margin-top: 4px; }
.account-grid .card { display: flex; flex-direction: column; gap: 4px; }
.account-grid .card h2 { display: flex; align-items: center; gap: 8px; font-size: 1.12rem; margin-bottom: 14px; }
.account-grid .card h2 .icon { color: var(--brand); }
.account-grid .card > .btn { align-self: flex-start; margin-top: auto; }
.account-grid .card > p + .btn { margin-top: 12px; }
.account-orders { list-style: none; margin: 0 0 14px; padding: 0; display: grid; }
.account-orders li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--line); font-size: .95rem; }
.account-orders li:last-child { border-bottom: 0; }
.account-orders a { text-decoration: none; }
.account-orders a:hover { text-decoration: underline; }
.account-orders li > strong:last-child { text-align: right; }
.account-addresses { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); gap: 24px; align-items: start; }
.address-card { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 20px; }
.address-card p { margin: 0; }
.address-card p:first-child { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; }
.address-card.is-default { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-100); }
.address-card.is-default .chip--soft { background: var(--success-soft); color: var(--green); }
.address-card__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.form-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.account-login { display: grid; gap: 8px; }
.account-login h2 { font-size: 1.4rem; margin-bottom: .2em; }
.account-login h2.account-login__sub { font-size: 1rem; margin: 22px 0 6px; } /* "What we receive from Google" is an h2 for heading order, styled like the former h3 */
.account-login h3 { font-size: 1rem; margin: 22px 0 6px; }
.account-login .btn--block { margin: 10px 0 6px; }
.account-login__list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.account-login__list li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: var(--r); background: var(--brand-50); font-size: .92rem; }
.account-login__list .icon { color: var(--brand); flex: none; margin-top: 3px; }
.account-hint { margin-top: 16px; }
.account-wishlist .wishlist__item .btn { align-self: center; }

/* Cart & checkout polish (no overflow at 390: fluid main column, fieldsets and inputs may shrink) */
.cart__suggest { margin-top: 40px; }
.cart-line__total { white-space: nowrap; }
.checkout__main { min-width: 0; }
.checkout fieldset { min-width: 0; min-inline-size: 0; }
.checkout__main .form-grid input, .checkout__main .form-grid select, .checkout__main .form-grid textarea { max-width: 100%; min-width: 0; }
.checkout__account { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 14px 16px; background: var(--brand-50); border-color: var(--brand-200); color: var(--ink-soft); }
.checkout__account .icon { flex: none; color: var(--brand); margin-top: 2px; }
.checkout__account a { font-weight: 600; }
.checkout__account--in { background: var(--success-soft); border-color: #B9DFC3; color: #14532D; }
.checkout__account--in .icon { color: var(--green); }
.checkout__terms { margin-top: 14px; }
.pay-option, .pay-option span { min-width: 0; }
.pay-option small { overflow-wrap: anywhere; }

/* R2 responsive */
@media (min-width: 961px) {
  /* author hero: name/actions left, stat tiles stacked right, share row across — the card no longer has an empty right half */
  .author-hero__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, 250px); grid-template-areas: "eyebrow stats" "name stats" "alt stats" "tag stats" "actions stats" "share share"; column-gap: 32px; align-items: start; }
  .author-hero__body > .eyebrow { grid-area: eyebrow; }
  .author-hero__name { grid-area: name; }
  .author-hero__alt { grid-area: alt; }
  .author-hero__tag { grid-area: tag; }
  .author-hero__actions { grid-area: actions; align-self: end; }
  .author-hero .share-row { grid-area: share; }
  .author-stats { grid-area: stats; flex-direction: column; flex-wrap: nowrap; gap: 8px; margin: 0; }
  .author-stats li { min-width: 0; }
  /* controls brought into view by keyboard focus clear the sticky section tabs (header + 50px subnav) */
  :root:has(.subnav) { scroll-padding-top: calc(var(--header-h) + 66px); }
  :root:has(.subnav) .book-section { scroll-margin-top: 0; } /* the padding already clears the subnav; margin + padding would add up */
  :root:has(.subnav) .subnav__list a { scroll-margin-top: -66px; } /* the stuck tabs sit inside that padding: without this, focusing one scrolls the page back to the tabs' resting place */
  .book-sections :is(a, button, input, select, summary, [tabindex]) { scroll-margin-top: calc(var(--header-h) + 66px); }
}
@media (min-width: 961px) and (max-width: 1100px) {
  .buy-row__buy { flex: 1 1 100%; order: 4; } /* row 1: qty · Add to cart · heart, row 2: Buy now */
  .buy-row .wish-btn--lg { order: 3; }
}
@media (max-width: 1080px) {
  .author-hero__card { gap: 24px; padding: 24px; }
}
@media (max-width: 960px) {
  .subnav { position: static; }
  .book-section { scroll-margin-top: calc(var(--header-h) + 16px); }
  .account-addresses { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .book-card { padding: 10px; border-radius: var(--r); }
  .book-card__cover { border-radius: 6px; }
  .book-card__body { padding-top: 10px; }
  .book-card__title { font-size: 1rem; }
  .book-card__add { grid-template-columns: 1fr; }
  .book-card__add .btn, .book-card__notify { min-height: 40px; }
  .shop__toolbar { gap: 10px; }
  .shop__tools { width: 100%; justify-content: space-between; }
  .shop__sort { flex: 1; min-width: 0; }
  .shop__sort-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .shop__sort select { width: 100%; min-width: 0; padding: 6px 30px 6px 14px; font-size: .88rem; background-position: right 10px center; }
  /* Filters open as a bottom sheet (site.js adds body.sheet-open + .sheet-backdrop) */
  .filter-sheet__panel { position: fixed; left: 0; right: 0; top: auto; bottom: 0; z-index: 83; width: auto; max-height: 80vh; padding: 8px 16px 0; border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom: 0; box-shadow: 0 -20px 50px -20px rgba(10, 30, 50, .5); overflow-y: auto; animation: sheet-up .25s ease; }
  .filter-form__actions { margin-inline: -16px; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); }
  .filter-sheet__handle { display: block; width: 44px; height: 5px; margin: 0 auto 10px; border-radius: 3px; background: var(--line-strong); }
  .filter-sheet__head { position: sticky; top: 0; z-index: 1; margin: 0 -16px 12px; padding: 4px 16px 10px; background: var(--surface); border-bottom: 1px solid var(--line); }
  body.sheet-open { overflow: hidden; }
  .filter-form__choices { grid-template-columns: 1fr; }
  .filter-form .choice { min-height: 44px; }
  /* Book detail: compact gallery, stacked buy row */
  .book-detail { gap: 20px; padding: 16px 0 32px; }
  .book-detail__cover { aspect-ratio: auto; height: 320px; }
  .book-detail__cover img { max-width: calc(100% - 32px); max-height: calc(100% - 32px); }
  .book-detail__thumbs { min-height: 0; margin-top: 10px; }
  .book-detail__thumbs img { width: 48px; height: 68px; }
  .book-detail__title { font-size: 1.7rem; }
  .buy-row__add { flex: 1 1 auto; }
  .buy-row__buy { flex: 1 1 60%; }
  .buy-box__wa { width: 100%; }
  .offer-chips li { font-size: .8rem; }
  .trust-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
  .trust-row li, .trust-row a { flex-direction: row; align-items: center; text-align: left; }
  .trust-row__icon { width: 40px; height: 40px; }
  .specs div { grid-template-columns: 8rem minmax(0, 1fr); }
  .book-section { padding: 28px 0; }
  /* Authors */
  .author-finder { padding: 16px; }
  .author-grid--tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .author-card--tile { padding: 18px 12px 14px; gap: 10px; }
  .author-card--tile .avatar { width: 72px; height: 72px; font-size: 1.9rem; }
  .author-card--tile .author-card__name { font-size: 1.05rem; }
  .author-card__foot { flex-direction: column; align-items: stretch; text-align: center; }
  .author-card__cta { justify-content: center; }
  .author-card--tile .author-card__meta { justify-content: center; }
  /* Search, account, blog */
  .search-group { padding: 16px 12px; }
  .account-nav { flex-direction: column; align-items: stretch; }
  .account-nav .tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .account-nav .tabs a { white-space: nowrap; }
  .account-nav__logout { margin-left: 0; }
  .account-orders li { grid-template-columns: minmax(0, 1fr) auto; }
  .account-login__list { grid-template-columns: 1fr; }
  .table th, .table td { padding: 10px 12px; }
  .post-share { flex-direction: column; align-items: flex-start; }
}
@keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes panel-in { from { transform: translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ============================================================
   ==== R9 home (Rajkamal-style top) ====
   Hero tiles that rotate (.hero-tile + .hero-slide + .hs__*), the rotating accent word of the tagline,
   the row of covers sliding right to left (.book-marquee), Rajkamal-like section heads. site.js drives the
   rotation (it advances a tile when its active dot's progress animation ends, so every pause — the button,
   hover, keyboard focus, touch, a hidden tab — is just animation-play-state) and the sliding row.
   ============================================================ */
/* Tagline: the accent word changes (किताब → पत्रिका → पाठकों → पहचान). All words share one grid cell, so the
   line never changes width; only the first is real text, the others are generated (aria-hidden). */
.hero__title .hero__accent { display: inline-grid; justify-items: center; }
.hero__title .hero__accent::after { content: none; }
.hero__word { grid-area: 1 / 1; position: relative; transition: opacity .5s ease, transform .5s ease; }
.hero__word[data-w]::before { content: attr(data-w); }
.hero__word::after { content: ""; position: absolute; left: 0; right: 0; bottom: .06em; height: .12em; background: var(--rainbow); border-radius: 4px; opacity: .9; }
.hero__word:not(.is-active) { opacity: 0; transform: translateY(.35em); }
.hero__word.is-leaving { transform: translateY(-.35em); }

/* Hero tiles: large 3:4 tile left, two square-ish tiles stacked right (desktop); every tile is a carousel */
.bento--hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-self: center; }
.hero-tile { position: relative; min-width: 0; min-height: 0; border-radius: 20px; overflow: hidden; background: var(--brand-100); box-shadow: 0 22px 44px -26px rgba(10, 47, 82, .55), 0 2px 6px -2px rgba(20, 33, 46, .12); container-type: size; isolation: isolate; touch-action: pan-y pinch-zoom; }
.hero-tile--lg { grid-column: 1; grid-row: 1 / span 2; aspect-ratio: 3 / 4; }
.hero-tile--top { grid-column: 2; grid-row: 1; }
.hero-tile--bottom { grid-column: 2; grid-row: 2; }
.hero-tile__slides { position: absolute; inset: 0; }
/* crossfade: the incoming slide fades in on top while the outgoing one stays opaque underneath (.is-leaving) */
/* only opacity is transitioned (it runs off the main thread); .is-leaving keeps the old slide visible under the new one for the
   850 ms site.js holds it, so visibility can switch at once */
.hero-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.hero-slide.is-active { z-index: 2; opacity: 1; visibility: visible; transition: opacity .8s ease; } /* only the fade-in is animated: a hidden slide's fade-out would tick on the main thread for nothing */
.hero-slide.is-leaving { z-index: 1; opacity: 1; visibility: visible; transition: none; }
/* the old words go first and the new ones wait until they are gone, so two titles never sit on top of each other */
.hero-slide.is-leaving .hs__body, .hero-slide.is-leaving .hs__stage, .hero-slide.is-leaving .hs__fan, .hero-slide.is-leaving .hs__icon { opacity: 0; transition: opacity .25s ease; }
.hero-slide.is-entering .hs__body { animation: hs-text-in .4s ease .3s both; }
@keyframes hs-text-in { from { opacity: 0; transform: translateY(6px); } }
/* position dots (top left) with the active one filling up over the interval */
.hero-dots { position: absolute; z-index: 4; top: 12px; left: 12px; display: flex; align-items: center; padding: 3px 5px; border-radius: var(--r-pill); background: rgba(10, 30, 50, .36); pointer-events: none; }
.hero-dot { position: relative; display: block; box-sizing: content-box; width: 6px; height: 6px; padding: 4px 3px; border-radius: 3px; background: rgba(255, 255, 255, .55); background-clip: content-box; }
.hero-dot.is-active { width: 20px; background-color: rgba(255, 255, 255, .38); }
.hero-dot.is-active::after { content: ""; position: absolute; inset: 4px 3px; border-radius: 3px; background: #fff; transform-origin: 0 50%; }
.hero-tile.is-running .hero-dot.is-active::after { transform: scaleX(0); animation: hero-dot var(--dot-dur, 5s) linear forwards; }
@keyframes hero-dot { to { transform: scaleX(1); } }
/* every pause is animation-play-state (site.js advances on animationend) */
.bento--hero.is-paused .hero-dot.is-active::after, .bento--hero.is-hidden-tab .hero-dot.is-active::after, .hero-tile.is-touched .hero-dot.is-active::after, .hero-tile:has(:focus-visible) .hero-dot.is-active::after { animation-play-state: paused; }
@media (hover: hover) {
  .hero-tile:hover .hero-dot.is-active::after { animation-play-state: paused; }
}
/* the dots only show the position (aria-hidden, not clickable: 6 px targets); swipe, ←/→ and the pause button do the work */
/* the one pause / play button for the hero (top right of the large tile) */
.motion-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); cursor: pointer; transition: background var(--dur), border-color var(--dur), color var(--dur); }
.motion-btn:hover { border-color: var(--brand); color: var(--brand-700); background: var(--brand-50); }
.motion-btn .icon { width: 14px; height: 14px; }
.motion-btn.is-paused .motion-btn__pause, .motion-btn:not(.is-paused) .motion-btn__play { display: none; }
.hero-toggle { position: absolute; z-index: 6; grid-column: 1 / 2; grid-row: 1 / 2; top: 10px; right: 10px; width: 34px; height: 34px; padding: 0; border-radius: 50%; border-color: transparent; background: rgba(255, 255, 255, .9); box-shadow: 0 2px 8px rgba(10, 30, 50, .25); }
.hero-toggle:focus-visible { outline-color: #fff; box-shadow: 0 0 0 6px var(--brand-900); }

/* One slide = one link filling the tile: picture area on top, text block at the bottom */
.hs { position: absolute; inset: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; color: #fff; text-decoration: none; }
.hs:hover, .hs:focus-visible { color: #fff; }
.hs:focus-visible { outline: 3px solid #fff; outline-offset: -7px; border-radius: 20px; box-shadow: inset 0 0 0 7px var(--brand-900); }
.hs__body { position: relative; z-index: 2; grid-row: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding: 0 clamp(14px, 7cqw, 26px) clamp(14px, 6.5cqw, 24px); }
.hs__body > * { max-width: 100%; }
.hs__eyebrow { margin-bottom: 6px; padding: 2px 10px; border-radius: var(--r-pill); border: 1px solid rgba(255, 255, 255, .32); background: rgba(255, 255, 255, .14); font-size: .72rem; font-weight: 700; letter-spacing: .03em; line-height: 1.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1rem, 6.2cqw, 1.7rem); line-height: 1.32; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-wrap: balance; }
.hs__title-en { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs__sub { margin-top: 4px; font-size: .86rem; line-height: 1.45; opacity: .92; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hs__by { font-size: .88rem; opacity: .88; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin-top: 12px; }
.hs__price { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.hs__price strong { font-size: 1.2rem; font-weight: 700; }
.hs__price s { font-size: .84rem; opacity: .75; }
.hs__cta { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; margin-left: auto; padding: 6px 12px 6px 15px; border-radius: var(--r-pill); background: #fff; color: var(--ink); font-size: .82rem; font-weight: 600; line-height: 1.3; white-space: nowrap; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .45); transition: background var(--dur), color var(--dur); }
.hs__cta .icon { flex: none; transition: transform var(--dur); }
.hs:hover .hs__cta { background: var(--brand-900); color: #fff; }
.hs:hover .hs__cta .icon { transform: translateX(3px); }
.hs__cta--accent { background: var(--accent); color: #fff; }
.hs:hover .hs__cta--accent { background: var(--accent-strong); }

/* Book slide: the whole cover (never cropped) on a backdrop tinted with the cover's own colour */
.hs--book { background: radial-gradient(120% 78% at 50% 26%, var(--tone-2) 0%, var(--tone) 74%); }
.hs--book::before { content: ""; position: absolute; left: 50%; top: 36%; width: 96cqw; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(255, 255, 255, .2), rgba(255, 255, 255, .06) 62%, rgba(255, 255, 255, 0)); pointer-events: none; }
.hs__stage { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; min-height: 0; padding: clamp(24px, 8cqh, 44px) 12cqw 4cqh; }
.hs__cover { display: block; width: auto; height: 100%; max-width: 100%; object-fit: contain; border-radius: 3px 6px 6px 3px; background: #fff; box-shadow: inset 4px 0 6px -4px rgba(0, 0, 0, .3), 0 26px 40px -18px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .25); transition: transform 1.2s ease; }
.hero-slide.is-active .hs__cover { animation: hs-rise 1s ease both; }
.hs:hover .hs__cover { transform: translateY(-4px) scale(1.02); }
@keyframes hs-rise { from { transform: translateY(10px) scale(.97); } to { transform: none; } }
/* covers photographed on a white sheet: light backdrop, dark text */
.hs--light { color: var(--ink); background: radial-gradient(90% 62% at 50% 34%, #fff 0 46%, var(--tone-2) 70%, var(--tone) 100%); }
.hs--light:hover, .hs--light:focus-visible { color: var(--ink); }
.hs--light::before { display: none; }
.hs--light .hs__cover { background: transparent; box-shadow: none; border-radius: 0; mix-blend-mode: multiply; } /* the white sheet melts into the backdrop */
.hs--light .hs__eyebrow { border-color: var(--brand-200); background: var(--brand-50); color: var(--brand-700); }
.hs--light .hs__cta { background: var(--brand); color: #fff; box-shadow: none; }
.hs--light:hover .hs__cta { background: var(--brand-700); }

/* Banner slide (Admin → Home banners): the picture fills the tile; a landscape picture is shown whole instead */
.hs--banner { background: linear-gradient(150deg, var(--brand) 0%, var(--brand-700) 55%, var(--brand-900) 100%); }
.hs__media { position: absolute; inset: 0; }
.hs__img { width: 100%; height: 100%; object-fit: cover; transition: transform 4.5s ease; } /* the slow zoom ends inside 5 s (WCAG 2.2.2) */
.hero-slide.is-active .hs--banner .hs__img { transform: scale(1.04); }
.hs--banner::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10, 30, 52, 0) 30%, rgba(10, 30, 52, .68) 54%, rgba(10, 30, 52, .92) 100%); } /* ≥ 6.7:1 for the title even over a white picture */
.hs--banner .hs__title, .hs--banner .hs__sub { text-shadow: 0 1px 2px rgba(10, 30, 52, .4); }
.hs--contain .hs__media { bottom: 34%; padding: clamp(34px, 11cqh, 60px) 6cqw 0; }
.hs--contain .hs__img { object-fit: contain; border-radius: 8px; }
.hero-slide.is-active .hs--contain .hs__img { transform: none; }
.hs--plain::after { display: none; }

/* Book Shop promo: three covers fanned out */
.hs--shop { color: var(--ink); background: linear-gradient(150deg, var(--brand-50) 0%, var(--brand-100) 58%, var(--brand-200) 100%); }
.hs--shop:hover, .hs--shop:focus-visible { color: var(--ink); }
.hs__fan { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; min-height: 0; padding: clamp(28px, 12cqh, 56px) 8cqw 2cqh; }
.hs__fan-item { position: relative; display: flex; align-items: flex-end; justify-content: center; height: 100%; width: 34%; margin: 0 -5%; }
.hs__fan-item .hs__cover { height: 92%; }
.hs__fan-item--1 { transform: rotate(-9deg) translateY(4%); }
.hs__fan-item--2 { z-index: 2; transform: translateY(-4%); }
.hs__fan-item--2 .hs__cover { height: 100%; }
.hs__fan-item--3 { transform: rotate(9deg) translateY(4%); }
.hs--shop .hs__title-en { color: var(--brand-700); opacity: 1; }
.hs--shop .hs__sub { color: var(--ink-soft); opacity: 1; }
.hs--shop .hs__cta, .hs--cream .hs__cta, .hs--sky .hs__cta, .hs--paper .hs__cta { background: var(--brand); color: #fff; box-shadow: none; }
.hs--shop:hover .hs__cta, .hs--cream:hover .hs__cta, .hs--sky:hover .hs__cta, .hs--paper:hover .hs__cta { background: var(--brand-700); }

/* Promo slides (Publish, calculator, free delivery, COD, Gouranjali): icon disc top right, copy bottom left */
.hs--promo { grid-template-rows: minmax(0, 1fr) auto; }
.hs--promo::before { content: ""; position: absolute; right: -18cqw; top: -22cqw; width: 78cqw; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.hs__icon { position: relative; z-index: 1; justify-self: end; align-self: start; display: grid; place-items: center; width: clamp(40px, 17cqw, 60px); height: clamp(40px, 17cqw, 60px); margin: clamp(12px, 6cqw, 22px); border-radius: 16px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .26); color: #fff; }
.hs__icon .icon { width: 55%; height: 55%; }
.hs--fanned .hs__fan { grid-row: 1; }
.hs--fanned .hs__title { min-height: 2.64em; } /* two lines kept with the fallback font too: the font swap must not resize the fan (CLS) */
.hs--brand { background: linear-gradient(150deg, var(--brand) 0%, var(--brand-700) 58%, var(--brand-900) 100%); }
.hs--deep { background: linear-gradient(150deg, #13406A 0%, var(--brand-900) 60%, #061B31 100%); }
.hs--deep .hs__icon { color: #FFD9A8; }
.hs--cream, .hs--sky, .hs--paper { color: var(--ink); }
.hs--cream:hover, .hs--cream:focus-visible, .hs--sky:hover, .hs--sky:focus-visible, .hs--paper:hover, .hs--paper:focus-visible { color: var(--ink); }
.hs--cream { background: linear-gradient(150deg, #FFF9EC 0%, var(--band-cream) 55%, #F1E3C6 100%); }
.hs--cream::before { background: rgba(204, 75, 20, .07); }
.hs--cream .hs__icon { background: var(--accent-soft); border-color: #F6D3BE; color: var(--accent-strong); }
.hs--sky { background: linear-gradient(150deg, var(--brand-50) 0%, var(--brand-100) 55%, var(--brand-200) 100%); }
.hs--sky::before { background: rgba(255, 255, 255, .55); }
.hs--sky .hs__icon, .hs--paper .hs__icon { background: var(--surface); border-color: var(--brand-200); color: var(--brand); }
.hs--paper { background: var(--surface); }
.hs--paper::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--rainbow); }
.hs--paper::before { background: var(--band-cream); }
.hs--cream .hs__eyebrow, .hs--sky .hs__eyebrow, .hs--paper .hs__eyebrow, .hs--shop .hs__eyebrow { border-color: transparent; background: rgba(10, 61, 107, .08); color: var(--brand-700); }
.hs--cream .hs__title-en, .hs--sky .hs__title-en, .hs--paper .hs__title-en { color: var(--brand); opacity: 1; }
.hs--cream .hs__sub, .hs--sky .hs__sub, .hs--paper .hs__sub { color: var(--ink-soft); opacity: 1; }

/* Small tiles (container narrower than ~330px): compact copy, the CTA becomes a round arrow beside the title */
@container (max-width: 330px) {
  .hs__eyebrow { display: none; }
  .hs__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: end; }
  .hs__body > *, .hs__price { grid-column: 1; }
  .hs__foot { display: contents; }
  .hs__cta { grid-column: 2; grid-row: 1 / span 6; align-self: end; min-height: 36px; width: 36px; margin: 0; padding: 0; justify-content: center; }
  .hs__cta-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hs__title { font-size: clamp(.98rem, 7.4cqw, 1.24rem); }
  /* book slides: the cover large on the left, title (two lines), price and the round arrow on the right */
  .hs--book { grid-template-columns: 54% minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .hs--book::before { left: 27%; top: 50%; width: 70cqw; }
  .hs--book .hs__stage { grid-row: 1; grid-column: 1; padding: clamp(30px, 14cqh, 38px) 4px clamp(16px, 9cqh, 24px) clamp(10px, 6cqw, 16px); } /* clear of the dots */
  .hs--book .hs__body { grid-row: 1; grid-column: 2; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; padding: 12px clamp(10px, 6cqw, 16px) 12px 8px; }
  .hs--book .hs__title { font-size: clamp(.9rem, 7cqw, 1.12rem); line-height: 1.45; padding-top: .12em; white-space: normal; text-wrap: pretty; } /* two lines; the extra top room keeps the matras of line one whole */
  .hs--book .hs__by { display: none; }
  .hs--book .hs__foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 10px; }
  .hs--book .hs__cta { grid-column: auto; grid-row: auto; flex: none; }
  .hs__title-en { white-space: normal; font-size: .68rem; letter-spacing: .05em; line-height: 1.35; }
  .hs__sub { font-size: .8rem; }
  .hs__price { margin-top: 2px; }
  .hs__price strong { font-size: 1.02rem; }
  .hs__fan { padding: clamp(26px, 13cqh, 40px) 6cqw 3cqh; }
}
@container (max-height: 200px) {
  .hs__sub, .hs--book .hs__by { display: none; }
}
@container (max-width: 210px) {
  .hs__title-en { display: none; }
  /* phone small tiles (~174 px): cover half, title and the round arrow (the price is on the book page) */
  .hs--book { grid-template-columns: 50% minmax(0, 1fr); }
  .hs--book .hs__stage { padding: 12px 2px 12px 10px; } /* the dots are hidden here */
  .hs--book .hs__body { padding: 10px 10px 10px 6px; }
  .hs--book .hs__title { font-size: .86rem; overflow-wrap: anywhere; }
  .hs--book .hs__price { display: none; }
  .hs--book .hs__foot { margin-top: 8px; }
  .hs__body { padding: 0 12px 12px; }
  .hs__icon { margin: 10px; }
}

/* Row of covers sliding right to left under the hero */
.book-marquee { position: relative; padding: 26px 0 30px; background: var(--surface); border-bottom: 1px solid var(--line); }
.book-marquee__head { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 16px; }
.book-marquee__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 0; }
.book-marquee__hi { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.3rem, 1.15rem + .5vw, 1.6rem); line-height: 1.25; color: var(--ink); }
.book-marquee__en { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); }
.book-marquee__tools { display: flex; align-items: center; gap: 8px 18px; min-height: 44px; margin-left: auto; }
.book-marquee__tools .link-arrow { white-space: nowrap; }
.motion-btn.is-pending { visibility: hidden; } /* keeps its place until site.js starts the row (no shift); stays hidden with reduced motion */
.motion-btn--text { min-height: 36px; padding: 4px 14px 4px 12px; border-radius: var(--r-pill); font-size: .86rem; font-weight: 600; white-space: nowrap; }
.book-marquee__frame { position: relative; }
.book-marquee__viewport { --mq-side: max(16px, calc((100% - var(--container)) / 2)); overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; scroll-snap-type: x proximity; } /* --mq-side: the container's margin (the track's side padding) */
.book-marquee__viewport::-webkit-scrollbar { display: none; }
.book-marquee__track { display: flex; width: max-content; margin: 0; padding: 8px max(16px, calc((100% - var(--container)) / 2)) 10px; list-style: none; } /* room above and below for the 3 px focus ring */
.book-marquee__item { flex: none; width: 164px; margin-right: 30px; scroll-snap-align: start; scroll-margin-left: max(16px, calc((100vw - var(--container)) / 2)); }
.book-marquee__item.is-clone { display: none; }
.marquee-book { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--ink); text-decoration: none; }
.marquee-book:hover { color: var(--brand-700); }
.marquee-book:focus-visible { outline-offset: 4px; border-radius: 6px; }
/* fixed box, covers stand on its bottom edge at their real proportions */
.marquee-book__cover { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 236px; }
.marquee-book__cover img { width: auto; height: 100%; max-width: 100%; border-radius: 2px 5px 5px 2px; background: #fff; box-shadow: var(--cover-shadow); transition: transform .25s ease, box-shadow .25s ease; }
.marquee-book__cover img.is-wide { width: 100%; height: auto; }
.marquee-book:hover .marquee-book__cover img { transform: translateY(-5px); box-shadow: 0 1px 0 rgba(0,0,0,.04), 10px 18px 30px -12px rgba(10, 30, 50, .5); }
.marquee-book__title { width: 100%; margin-top: 12px; font-family: var(--font-display); font-size: 1rem; line-height: 1.35; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.marquee-book__by { width: 100%; font-size: .8rem; color: var(--muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.book-marquee__arrow { position: absolute; z-index: 3; top: 124px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, .96); color: var(--ink); box-shadow: 0 6px 18px -8px rgba(10, 30, 50, .45); transform: translateY(-50%); cursor: pointer; transition: background var(--dur), color var(--dur), border-color var(--dur); }
.book-marquee__arrow:hover { border-color: var(--brand); background: var(--brand-50); color: var(--brand); }
.book-marquee__arrow--prev { left: max(8px, calc((100% - var(--container)) / 2 - 22px)); }
.book-marquee__arrow--next { right: max(8px, calc((100% - var(--container)) / 2 - 22px)); }
/* sliding (site.js adds .is-running unless reduced motion is asked for): never scrollable, never wider than the page, and shown
   only inside the container (+ 8 px each side) like Rajkamal's row. The boxes do not move when it starts (no layout shift):
   clip-path and the mask only paint less. Because the first cover starts at the container's edge and the gap between covers
   (30 / 16 px) is wider than those 8 px, the loop's restart is pixel-identical: just before it, the last cover of the first copy
   is already wholly outside the shown band. */
.book-marquee.is-running .book-marquee__viewport { overflow: hidden; overflow: clip; scroll-snap-type: none; touch-action: pan-y pinch-zoom; clip-path: inset(0 calc(var(--mq-side) - 8px)); -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--mq-side) - 8px), #000 calc(var(--mq-side) + 6px), #000 calc(100% - var(--mq-side) - 6px), transparent calc(100% - var(--mq-side) + 8px)); mask-image: linear-gradient(90deg, transparent calc(var(--mq-side) - 8px), #000 calc(var(--mq-side) + 6px), #000 calc(100% - var(--mq-side) - 6px), transparent calc(100% - var(--mq-side) + 8px)); }
.book-marquee.is-running:has(:focus-visible) .book-marquee__viewport { -webkit-mask-image: none; mask-image: none; } /* a focused book is never faded */
.book-marquee.is-running .book-marquee__item.is-clone { display: block; }
.book-marquee.is-running .book-marquee__track { animation: book-marquee var(--marquee-dur, 42s) linear infinite; will-change: transform; }
@keyframes book-marquee { to { transform: translate3d(var(--marquee-shift, -50%), 0, 0); } }
.book-marquee.is-paused .book-marquee__track, .book-marquee.is-touched .book-marquee__track, .book-marquee.is-hidden-tab .book-marquee__track, .book-marquee:has(:focus-visible) .book-marquee__track { animation-play-state: paused; }
@media (hover: hover) {
  .book-marquee__frame:hover .book-marquee__track { animation-play-state: paused; }
}

/* Home sections read like Rajkamal's: title left, "View all →" pill right on the same line */
.home-sec .section-head { align-items: flex-start; }
.home-sec .section-head__actions .link-arrow { min-height: 40px; padding: 6px 14px 6px 16px; border-radius: var(--r-pill); background: var(--brand-100); color: var(--brand-700); transition: background var(--dur), color var(--dur); }
.home-sec .section-head__actions .link-arrow:hover { background: var(--brand); color: #fff; }

/* R9 responsive */
@media (max-width: 960px) {
  .bento--hero { width: 100%; max-width: 640px; margin-inline: auto; }
}
@media (max-width: 720px) {
  /* phone: large tile full width (4:5), the two small tiles side by side (square) */
  .bento--hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 10px; }
  .hero-tile { border-radius: 16px; }
  .hs:focus-visible { border-radius: 16px; }
  .hero-tile--lg { grid-column: 1 / -1; grid-row: 1; aspect-ratio: 4 / 5; }
  .hero-tile--top { grid-column: 1; grid-row: 2; aspect-ratio: 1; }
  .hero-tile--bottom { grid-column: 2; grid-row: 2; aspect-ratio: 1; }
  .hero-toggle { grid-column: 1 / -1; grid-row: 1 / 2; width: 44px; height: 44px; top: 8px; right: 8px; }
  .hero-dots { top: 10px; left: 10px; }
  /* the small square tiles keep their (invisible) dots: the active dot's animation is the tile's clock */
  .hero-tile--top .hero-dots, .hero-tile--bottom .hero-dots { opacity: 0; } /* not visibility: a hidden element's animation cannot run on the compositor */
  .book-marquee { padding: 20px 0 22px; }
  .book-marquee__head { flex-wrap: wrap; margin-bottom: 12px; }
  .book-marquee__tools { width: 100%; justify-content: space-between; margin-left: 0; }
  .book-marquee__tools .link-arrow { min-height: 44px; }
  .motion-btn--text { min-height: 44px; }
  .book-marquee__item { width: 108px; margin-right: 16px; }
  .marquee-book__cover { height: 156px; }
  .marquee-book__title { font-size: .92rem; margin-top: 10px; }
  .marquee-book__by { font-size: .76rem; }
  /* phones: the arrows sit as a pair under the row (their room is kept before site.js shows them), never over a cover */
  .book-marquee__frame { padding-bottom: 54px; }
  .book-marquee__arrow { top: auto; bottom: 0; transform: none; }
  .book-marquee__arrow--prev { left: calc(50% - 50px); }
  .book-marquee__arrow--next { right: calc(50% - 50px); }
  .home-sec .section-head__actions .link-arrow { min-height: 44px; }
}
@media (pointer: coarse) {
  .hero-toggle { width: 44px; height: 44px; }
}