/* One light brand palette at every screen size. The site used to switch to a
   blue dark theme on desktop and a beige theme on phones, so the brand looked
   different depending on the device. */
:root{
  /* "only light" also stops phone browsers (Chrome auto-dark, etc.) from
     force-darkening the page, which inverted text and muddied the covers. */
  color-scheme:only light;
  /* Cheerful theme from the three PTS Junior logo colours: cyan (main, for
     text and buttons), with purple and pink as accents (gradients, highlights).
     --grad is the full logo rainbow for decoration; --grad-btn stays dark
     enough for white button text. */
  --bg:#F7FCFD; --surface:#FFFFFF; --surface-2:#EAF7FA; --line:#DCEFF3; --line-strong:#BCE0E8;
  --text:#14303A; --muted:#4F6670; --primary:#0E7490; --primary-hover:#0B5F76; --on-primary:#FFFFFF; --focus:#F59E0B;
  --primary-soft:#D9F4F9;
  --purple:#7A3E8F; --purple-soft:#F1E2F7;
  --pink:#EE3C96; --pink-deep:#C8237A; --pink-soft:#FDE3F0; --pink-ink:#A5195E;
  --cyan:#06B6D4; --cyan-bright:#22D3EE; --cyan-soft:#D7F6FB; --cyan-ink:#0E6B80;
  --teal:#3EC0C9; --teal-soft:#D6F3F5; --teal-ink:#0E6770;
  --deep:#0A3442;
  --grad:linear-gradient(100deg,#0891B2 0%,#7A3E8F 55%,#EE3C96 100%);
  --grad-btn:linear-gradient(110deg,#0891B2 0%,#0E7490 100%);
  --shadow:0 1px 2px rgba(10,52,66,.06),0 8px 22px -10px rgba(10,52,66,.18);
  --shadow-lift:0 2px 4px rgba(10,52,66,.06),0 18px 34px -14px rgba(10,52,66,.30);
  --radius:10px;
  --best-bg:var(--pink-soft); --best-ink:var(--pink-ink); --new-bg:var(--teal-soft); --new-ink:var(--teal-ink);
  --sci-bg:#D9E7F4; --sci-ink:#264C72;
  --story-bg:#F8DFD3; --story-ink:#7A3B25;
  --money-bg:#FAEDC4; --money-ink:#6A500C;
  --nature-bg:#D8ECDF; --nature-ink:#245A3F;
  --life-bg:#E5DFF3; --life-ink:#493C78;
  --tech-bg:#ECE4D6; --tech-ink:#5B4A2B;
  --math-bg:#F6DDE8; --math-ink:#7C2C5C;
  --font-d:"Bricolage Grotesque","Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-b:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --maxw:1160px;
  --navh:64px;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
html{-webkit-text-size-adjust:100%;max-width:100%;overflow-x:hidden;overflow-x:clip}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;width:100%;max-width:100%;overflow-x:hidden;overflow-x:clip;background:var(--bg);color:var(--text);font:400 16px/1.6 var(--font-b);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:var(--primary)}
h1,h2,h3{font-family:var(--font-d);line-height:1.15;margin:0;letter-spacing:-.01em}
p{margin:0}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Titles that hold hidden .sr text (the series name) anchor it, so inside a
   sideways-scrolling row it can't stretch the page past the screen edge */
.card-title{position:relative}
.skip{position:absolute;left:12px;top:-60px;background:var(--primary);color:var(--on-primary);padding:10px 16px;border-radius:10px;z-index:100;text-decoration:none}
.skip:focus{top:12px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* Cover placeholder shapes, one per category tint */

/* Header */
.hdr {
  background: var(--surface);
  padding: 16px 0 12px;
}
.navbar {
  position: relative;
  border: none;
  padding: 8px 0 0;
  background: transparent;
}
.hdr-top {
  justify-content: space-between;
  width: 100%;
  padding-bottom: 12px;
}
.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--text);
}
.logo .wordmark{display:none;font:700 24px/1 var(--font-d);letter-spacing:-.02em;color:var(--primary)}
.logo.nologo .wordmark{display:block}
.search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  max-width: 380px;
  height: 44px;
  margin: 0;
  padding: 0 4px 0 16px;
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  box-sizing: border-box;
}
.search input {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: 500 15px var(--font-b);
  box-sizing: border-box;
}
.search input::placeholder {
  color: var(--muted);
  font-size: 14px;
}
.search input:focus {
  outline: none;
}
.search:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent);
}
.search .ico {
  flex: 0 0 auto;
  pointer-events: none;
  display: flex;
  align-items: center;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap; /* Ensures all items stay on one single horizontal row */
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
}
.nav::-webkit-scrollbar {
  display: none;
}
.nav a {
  flex: none;
  border-radius: 999px;
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
  transition: all 0.2s ease;
}
.nav a:hover {
  color: var(--primary);
  background: var(--surface-2);
}
.nav a[aria-current="page"] {
  color: var(--on-primary);
}

/* Buttons & chips */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 22px;border-radius:999px;border:1.5px solid transparent;background:var(--primary);color:var(--on-primary);font:600 15px var(--font-b);text-decoration:none;cursor:pointer;text-align:center}
.btn:hover{background:var(--primary-hover)}
.btn.ghost{background:transparent;color:var(--primary);border-color:var(--line-strong)}
.btn.sm{min-height:38px;padding:0 16px;font-size:14px}
.chip{display:inline-flex;align-items:center;padding:0 16px;border-radius:999px;border:1.5px solid var(--line-strong);background:var(--surface);color:var(--text);font:600 14px var(--font-b);cursor:pointer}
.chip[aria-pressed="true"]{color:var(--on-primary)}

/* Covers */
.cover{position:relative;aspect-ratio:11/16;border-radius:8px;background:var(--tint, var(--surface-2));color:var(--ink);overflow:hidden;container-type:inline-size;box-shadow:0 1px 2px rgba(0,0,0,.1),0 10px 20px -10px rgba(0,0,0,.3)}
.cover .motif{position:absolute;left:0;right:0;bottom:0;width:100%;height:42%}
.cv-txt{position:absolute;inset:0;padding:9cqw 9cqw 0;display:flex;flex-direction:column;gap:4cqw}
.cv-series{font-size:5.6cqw;font-weight:700;line-height:1.25;opacity:.8}
.cv-title{font-family:var(--font-d);font-weight:700;font-size:11cqw;line-height:1.08;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--tint)}

/* Cards */
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.card{position:relative;display:flex;flex-direction:column;min-width:0}
.card-link{display:flex;flex-direction:column;flex:1;text-decoration:none;color:inherit}
.card-cover{position:relative}
.card-body{display:flex;flex-direction:column;flex:1}
.card-title{font-size:17px;line-height:1.25;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}

.price{font:700 16px var(--font-d)}

/* Page structure */
main{display:block;outline:none}
.sec{padding:64px 0 0}
.sec-head{display:flex;justify-content:space-between;gap:16px;margin-bottom:22px}
.sec-head h2{font-size:clamp(24px,3vw,30px)}
.sec-head a{white-space:nowrap}

.page-head{padding:40px 0 22px}
.page-head h1{font-size:clamp(28px,4vw,38px)}
.page-head p{color:var(--muted);margin-top:8px;max-width:60ch}
/* Series and category pages: more room between the title and the books below */
.page-head.page-head--spaced{padding-bottom:36px}
@media (max-width:600px){.page-head.page-head--spaced{padding-bottom:28px}}
/* Category page: title centred; book count on the line below, at the right */
.page-head--center h1{text-align:center}
.page-head--center .page-head__count{max-width:none;margin-top:14px;text-align:right;font-size:15px}
.page-head--center .page-head__count:empty{display:none}
@media (max-width:600px){
  .page-head--center .page-head__count{margin-top:10px;font-size:13px}
}

/* Hero Section Layout */
.hero {
  background: var(--surface-2);
  padding: 80px 0 100px;
  width: 100%;
}

.hero h1 {
  font-size: clamp(44px, 4.5vw, 64px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 800;
  margin: 0 0 20px 0;
}

.hero p.lead {
  font-size: 20px;
  line-height: 1.6;
  margin: 0 0 32px 0;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.hero-cta .btn {
  height: 52px;
  padding: 0 28px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* Scroller */

/* Category tiles */
.cat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.cat-tile{position:relative;overflow:hidden;text-decoration:none;display:flex;flex-direction:column}
.cat-tile p{font-size:14px;opacity:.9}
.cat-tile .cnt{font-weight:700;font-size:14px}
.cat-tile svg{position:absolute;right:-8px;bottom:-8px;width:150px;height:90px;opacity:.9}

/* Featured */

.rows{display:flex;flex-direction:column;gap:14px}
.row{display:grid;grid-template-columns:64px 1fr;gap:16px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px;text-decoration:none;color:inherit}
.row:hover{border-color:var(--line-strong)}
.row h3{font-size:16px;font-weight:600;line-height:1.3}
.row span{font-size:14px;color:var(--muted)}

/* About band */
/* Brand tint: soft logo pink fading into soft logo purple */
.band{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;background:linear-gradient(120deg,var(--pink-soft) 0%,var(--primary-soft) 50%,var(--cyan-soft) 100%);color:var(--text);border-radius:var(--radius);padding:36px 40px}
.band h2{font-size:28px;color:var(--primary)}
.band p{margin-top:10px;max-width:60ch}

/* Books page filters */
.filters{display:flex;flex-direction:column;padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:26px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.selects{flex-wrap:wrap}
.selects label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600;color:var(--muted)}
.selects select{background:var(--surface);color:var(--text);font:500 15px var(--font-b)}
.active{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:14px;color:var(--muted)}
.active button{border:none;border-radius:999px;padding:4px 12px;font:600 13px var(--font-b);cursor:pointer}
.more{text-align:center;margin-top:34px}
.empty{background:var(--surface);border:1px dashed var(--line-strong);padding:48px 24px;text-align:center;color:var(--muted)}
.empty h2{color:var(--text);font-size:22px;margin-bottom:8px}
.empty .btn{margin-top:18px}

/* Book details */
.detail{display:grid;grid-template-columns:340px minmax(0,1fr);gap:56px;padding:24px 0 0;align-items:start}

.detail h1{font-size:clamp(28px,3.6vw,40px);margin:6px 0 8px}

.store{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:center;padding:16px 0;border-top:1px solid var(--line)}

.store strong{display:block;font-size:16px}
.store small{display:block;color:var(--muted);font-size:14px;line-height:1.4}

.set{margin-top:6px;padding:16px 18px;border-radius:16px;background:var(--surface-2);display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.set strong{display:block}
.set small{color:var(--muted)}

.copy{border:none;background:none;color:var(--primary);font:600 13px var(--font-b);cursor:pointer;padding:0 0 0 8px}
.buybar{display:none}

/* FAQ / About */
.prose{max-width:720px}
.prose p{margin-top:14px;font-size:17px;line-height:1.7}
/* About page body: same look as the paragraph above it, whether or not the text has <p> tags */
.about-body{margin-top:14px;font-size:17px;line-height:1.7}
.about-body > p:first-child{margin-top:0}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:0 20px;margin-bottom:12px}
.faq summary{cursor:pointer;font-weight:600;font-size:17px;padding:18px 0;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;line-height:1;color:var(--muted)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 18px;color:var(--muted);max-width:64ch}
.socials{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}

/* Footer */
.ftr{margin-top:88px}
.ftr-in{max-width:var(--maxw);margin:0 auto;padding:36px 20px 40px;display:grid;gap:32px;font-size:15px}
.ftr h4{margin:0 0 10px;font:700 15px var(--font-d)}
.ftr a{text-decoration:none;padding:3px 0}
.ftr a:hover{text-decoration:underline}
.ftr p{max-width:40ch}
.ftr .fine{grid-column:1/-1;border-top:1px solid var(--line);padding-top:18px;font-size:13px}

@media (max-width:1000px){
  .cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  
  .detail{grid-template-columns:260px minmax(0,1fr);gap:36px}
}
@media (max-width: 820px) {
  .hdr-top {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .logo{justify-self:start}
.nav {
    justify-content: flex-start;
    padding-bottom: 4px;
    gap: 12px;
  }
  .search{justify-self:stretch;max-width:100%}
  .search .ico{color:var(--muted)}
  .band{grid-template-columns:1fr;padding:28px}
  .hero{padding:32px 0 44px}
  .hero h1{max-width:none}
  .sec{padding-top:52px}
  .ftr-in{grid-template-columns:1fr 1fr}
  .ftr-in > div:first-child{grid-column:1/-1}
  .detail{grid-template-columns:1fr;gap:26px}
  
  
  
  
  .buybar{display:flex;position:fixed;left:0;right:0;bottom:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--line-strong);align-items:center;justify-content:space-between;gap:14px;z-index:40}
  .buybar[hidden]{display:none}
  .buybar small{display:block;color:var(--muted);font-size:12px;line-height:1.2}
  .buybar strong{font:700 18px var(--font-d)}
  body.has-buybar{padding-bottom:84px}
}
@media (max-width:600px){
  .grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:14px}
  .cat-grid{grid-template-columns:1fr}
  .card-cover{padding:12px 12px 2px}
  .card-body{padding:12px}
  .card-title{font-size:15px}
  
  .store{grid-template-columns:44px minmax(0,1fr)}
  .store .btn{grid-column:1/-1;width:100%}
  
  .selects label,.selects select{width:100%}
  .selects{width:100%}
  .selects label{flex:1 1 140px}
  
  .wrap{width:100%;max-width:100%;min-width:0}
  .grid,.cat-grid,.sec,.sec-head,.page-head{min-width:0}
  .card,.cat-tile{min-width:0}
  .sec-head{align-items:flex-start;gap:10px}
  .sec-head h2{flex:1 1 auto;max-width:calc(100% - 112px);font-size:24px;line-height:1.15}
  .sec-head a{flex:0 0 auto;padding-top:5px;font-size:14px}
  
  
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
  
  /* ============ HERO FORCE FIX ============ */

/* Search suggestions dropdown */
.sugg{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:6px;z-index:60;list-style:none;margin:0;min-width:320px;max-height:420px;overflow-y:auto}
.sugg[hidden]{display:none}
.sugg li{list-style:none}
/* Suggestion rows (built by the page script from senarai-buku/data) */
.sugg li > a{display:flex;gap:12px;align-items:center;padding:8px 10px;border-radius:10px;text-decoration:none;color:inherit}
.sugg .sg-cv{width:30px;height:44px;flex:none;display:block;border-radius:4px;overflow:hidden;background:#F4F0EA}
.sugg .sg-cv img{width:30px;height:44px;object-fit:cover;display:block}
.sugg .sg-t{display:block;font-weight:600;font-size:15px;line-height:1.3}
.sugg .sg-c{display:block;font-size:13px;opacity:.7}
.sugg li a:hover,.sugg li[aria-selected="true"] > a{background:var(--surface-2)}
.sugg .all a{display:block;padding:8px 10px;color:var(--primary);font-weight:600;text-decoration:none}
.card[hidden],.empty[hidden]{display:none}

/* =========================================================
   Responsive layout layer
   The desktop rules above are intentionally left intact.
   ========================================================= */
@media (max-width: 1100px) {
  .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .cat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .detail {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 36px;
  }
}

@media (max-width: 900px) {
  .hdr {
    padding-top: 12px;
    padding-bottom: 8px;
  }
  .hdr-top {
    flex-direction: column;
    align-items: stretch;
  }
  .logo {
    align-self: flex-start;
  }
  .logo {
    margin-right: 0 !important;
  }
  .logo img {
    width: auto !important;
    max-width: 48px;
  }
  .search {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .nav {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    justify-content: center;
    flex-wrap: wrap;
    overflow-x: visible;
    overflow-y: visible;
    scroll-snap-type: none;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
  }
  .nav::-webkit-scrollbar {
    display: none;
  }
  .nav a,
  .nav a[aria-current="page"] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    scroll-snap-align: start;
  }
  .sugg {
    left: 0;
    right: 0;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    max-height: min(60vh, 420px);
  }
  main,

  .wrap,

  section,

  article,

  .card,

  .card-body,

  .cat-tile {
    min-width: 0;
    max-width: 100%;
  }
  main {
    overflow-x: hidden;
    overflow-x: clip;
  }
  .hero {
    padding: 48px 0 56px;
  }
  .hero h1 {
    max-width: 100%;
    font-size: clamp(36px, 7vw, 52px);
    overflow-wrap: anywhere;
  }
  .hero p.lead {
    max-width: 65ch;
    font-size: 18px;
  }
  .hero-cta {
    max-width: 100%;
  }
  .hero-cta .btn {
    min-width: 0;
    max-width: 100%;
  }
  
  
  
  .band {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .cat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .sec {
    padding-top: 48px;
  }
  .page-head {
    padding: 30px 0 18px;
  }
  .page-head h1 {
    font-size: clamp(28px, 8vw, 36px);
    overflow-wrap: anywhere;
  }
  .page-head p {
    max-width: 100%;
    font-size: 15px;
  }
  .sec-head {
    gap: 10px;
  }
  .sec-head h2 {
    font-size: clamp(23px, 7vw, 30px);
    overflow-wrap: anywhere;
  }
  .sec-head a {
    padding-top: 5px;
  }
  .cat-tile {
    min-height: 155px;
    padding: 20px;
  }
  .cat-tile h3 {
    max-width: 100%;
    font-size: 19px;
  }
  .cat-tile p {
    max-width: 28ch;
    font-size: 13px;
  }
  .card-cover {
    padding: 12px 12px 2px;
  }
  .card-body {
    padding: 12px;
  }
  .card-title {
    font-size: 15px;
  }
  .card-author {
    font-size: 13px;
  }
  
  
  .price {
    font-size: 15px;
    white-space: nowrap;
  }
  
  .btn, .chip {
    min-height: 44px;
  }
  .chips {
    flex-wrap: wrap;
    max-width: 100%;
    overflow-x: visible;
    overflow-y: visible;
    padding-bottom: 0;
  }
  .chips::-webkit-scrollbar {
    display: none;
  }
  .chip {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .selects {
    width: 100%;
  }
  .selects label,
  .selects select {
    width: 100%;
  }
  .filters {
    margin-bottom: 20px;
    padding-bottom: 16px;
  }
  .empty {
    padding: 36px 18px;
  }
  .empty h2 {
    font-size: 20px;
  }
  .band {
    gap: 20px;
    padding: 24px;
  }
  .band h2 {
    font-size: 24px;
  }
  .ftr-in {
    grid-template-columns: 1fr 1fr;
    gap: 24px 18px;
    padding: 30px 16px 34px;
  }
  .ftr-in > div:first-child {
    grid-column: 1 / -1;
  }
  .ftr .fine {
    grid-column: 1 / -1;
  }
  .socials .btn {
    flex: 1 1 140px;
  }
  .detail {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  
  
  .prose {
    max-width: 100%;
  }
  
  
  .faq summary {
    font-size: 16px;
  }
}

@media (max-width: 479px) {
  .wrap {
    padding-left: 12px;
    padding-right: 12px;
  }
  
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .cat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .hero {
    padding: 32px 0 36px;
  }
  .hero h1 {
    font-size: clamp(30px, 9vw, 40px);
  }
  .hero p.lead {
    font-size: 16px;
    line-height: 1.65;
  }
  .hero-cta {
    gap: 10px;
  }
  .hero-cta .btn {
    flex: 1 1 100%;
    width: 100%;
    min-height: 46px;
  }
  .nav {
    gap: 6px;
  }
  .nav a,
  .nav a[aria-current="page"] {
    padding: 9px 12px;
    font-size: 14px;
  }
  .sec-head h2 {
    max-width: 100%;
    flex: 1 1 100%;
  }
  .sec-head a {
    margin-left: 0;
    padding-top: 0;
  }
  
  .sugg {
    max-height: min(60vh, 360px);
  }
}

@media (max-width: 359px) {
  .grid,
  .cat-grid {
    grid-template-columns: 1fr;
  }
  
  .hero h1 {
    font-size: 32px;
  }
  .hero-cta .btn {
    width: 100%;
  }
  .search {
    padding-left: 12px;
    gap: 4px;
  }
  .search input {
    font-size: 14px;
  }
  .nav a,
  .nav a[aria-current="page"] {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 13px;
  }
}

@media (max-width: 767px) {
  a,
  button,
  input,
  select {
    touch-action: manipulation;
  }
  .card-title, .cat-tile h3, .cat-tile p, .prose, .prose p {
    overflow-wrap: anywhere;
  }
  .prose img, .prose video, .prose iframe {
    max-width: 100%;
  }
  .prose img, .prose video {
    height: auto;
  }
}

/* =========================================================
   Catalogue enhancements: search actions and
   lightweight parent guidance. Kept separate from the layout
   rules above so the existing desktop composition stays intact.
   ========================================================= */
.logo img {
  height: 60px;
  width: auto;
  display: block;
}
.search-submit {
  flex: 0 0 auto;
  min-width: 58px;
  height: 36px;
  margin-left: 2px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  color: var(--on-primary);
  font: 700 13px var(--font-b);
  cursor: pointer;
}
.search-clear {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  margin-right: 2px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font: 400 24px/32px var(--font-b);
  cursor: pointer;
}
.search-clear:hover {
  background: var(--surface-2);
  color: var(--text);
}
.search-clear[hidden] {
  display: none;
}
.price-muted {
  color: var(--muted);
  font: 600 12px/1.3 var(--font-b);
}

@media (max-width: 900px) {
  .logo img {
    height: 44px !important;
  }
}

@media (max-width: 600px) {
  .price-muted {
    font-size: 12px;
    letter-spacing: -.02em;
  }
  
  .buybar strong {
    max-width: 48vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 359px) {
  .search-submit {
    min-width: 52px;
    padding: 0 9px;
  }
}

/* =========================================================
   UI refresh: navigation, browsing and book discovery.
   Loaded last so it settles the layout at every breakpoint.
   ========================================================= */

/* ---- Header ---- */
.hdr-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px) minmax(0, 1fr);
  grid-template-areas: "logo search .";
  align-items: center;
  gap: 24px;
}
.hdr-top .logo { grid-area: logo; justify-self: start; }
.hdr-top .search { grid-area: search; justify-self: stretch; max-width: none; }
/* Browsers add their own clear (x) to search boxes; the header already has one. */
.search input[type="search"]::-webkit-search-cancel-button,
.search input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.search input[type="search"]::-ms-clear { display: none; width: 0; height: 0; }
.search input[type="search"] { -webkit-appearance: none; appearance: none; }
.search:hover { border-color: var(--line-strong); }
.search:focus-within { background: var(--surface); }
.nav { gap: 6px; }
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  font-size: 15.5px;
}
.nav a[aria-current="page"] { padding: 0 20px; }

@media (max-width: 900px) {
  .hdr-top {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "logo search";
    gap: 12px;
    padding-bottom: 8px;
  }
  .nav { gap: 4px 6px; padding: 2px 0 6px; }
  .nav a,
  .nav a[aria-current="page"] { padding: 0 14px; font-size: 14.5px; }
}
@media (max-width: 380px) {
  .nav a,
  .nav a[aria-current="page"] { padding: 0 10px; font-size: 13.5px; }
  .search input::placeholder { font-size: 13px; }
}

/* ---- Homepage hero backdrop ----
   Soft cyan with pink and purple hints (the three logo colours), a glow behind the covers,
   a few playful shapes and a wave that flows into the page. Decoration only:
   it sits behind the text and never takes clicks. */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(45% 70% at 0% 0%, color-mix(in srgb, var(--primary) 30%, transparent) 0%, transparent 70%),
    radial-gradient(40% 60% at 100% 100%, color-mix(in srgb, var(--cyan) 38%, transparent) 0%, transparent 70%),
    radial-gradient(35% 55% at 70% 0%, color-mix(in srgb, var(--pink) 30%, transparent) 0%, transparent 70%),
    linear-gradient(125deg, #D3F4FB 0%, #E9FAFD 45%, #FBE6F2 78%, #EFE0F7 100%);
}
.hero > .wrap { position: relative; z-index: 1; }

/* ---- Homepage motion ----
   Gentle and light: transform/opacity only. Uses the separate `translate` /
   `rotate` / `scale` properties so it never fights the covers' own transforms.
   Everyone who asks their device for reduced motion gets none of it. */
@media (prefers-reduced-motion: no-preference) {

  /* Scroll reveal (the page script adds .reveal, then .is-in when it comes into view) */
  .reveal { opacity: 0; translate: 0 28px; transition: opacity .7s ease, translate .7s cubic-bezier(.22, .61, .36, 1); transition-delay: var(--d, 0s); }
  .reveal.is-in { opacity: 1; translate: 0 0; }
}


/* ---- Hero covers: shown on tablet and desktop, hidden on phones ----
   The markup stays in the page; the grid item is removed on small screens so
   no gap is left behind. */
@media (max-width: 600px) {
  .hero { padding-bottom: 40px; }
}

/* ---- Section headings ---- */
.sec--tight { padding-top: 48px; }
.sec-head > div { min-width: 0; }
.sec-head { align-items: baseline; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.sec-head a {
  color: var(--primary);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.sec-head a:hover { text-decoration: underline; }
@media (max-width: 767px) {
  .sec-head { flex-wrap: nowrap; align-items: baseline; }
  .sec-head h2 { max-width: none; flex: 1 1 auto; }
  .sec-head a { flex: none; padding: 0; font-size: 14px; white-space: nowrap; }
}

/* ---- Book cards ---- */
.card {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover { border-color: var(--line-strong); }

.card-link:focus-visible { outline-offset: 3px; }
.card-title { font-family: var(--font-d); font-weight: 700; }


@media (prefers-reduced-motion: reduce) {
  .card, .card .cover { transition: none; }
  .card:hover, .card:hover .cover { transform: none; }
}

/* Homepage best sellers: always a tidy grid, never a sideways strip */

/* ---- Carousel (Buku Baharu) ---- */

/* ---- Category shortcuts (homepage) ---- */

/* Homepage categories: one row of boxes, each in its category's own colours */
.cat-quick {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 16px;
}
.cat-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 24px 12px 20px;
  border-radius: var(--radius);
  background: var(--tint);
  color: var(--ink);
  text-decoration: none;
  transition: transform .25s cubic-bezier(.22, .61, .36, 1), box-shadow .25s;
}
.cat-circle {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .7);
}
.cat-circle svg { width: 32px; height: 32px; }
.cat-name { font: 700 15px/1.2 var(--font-d); text-align: center; }
/* Small lift on hover */
.cat-pill:hover { transform: translateY(-4px); box-shadow: 0 12px 22px -12px rgba(10, 52, 66, .45); }
.cat-pill:hover .cat-name { text-decoration: underline; }
@media (max-width: 900px) {
  .cat-quick { gap: 10px; }
  .cat-pill { gap: 10px; padding: 18px 8px 16px; }
  .cat-circle { width: 52px; height: 52px; }
  .cat-circle svg { width: 26px; height: 26px; }
  .cat-name { font-size: 14px; }
}
/* Phones: only the first 4 in one row; "Semua kategori" leads to the rest */
@media (max-width: 600px) {
  .cat-pill:nth-child(n + 5) { display: none; }
  .cat-circle { width: min(80px, 100%); }
  .cat-name { font-size: 12.5px; }
}

/* ---- Category tiles (Kategori page) ---- */
.cat-tile {
  background: var(--tint);
  color: var(--ink);
  min-height: 170px;
  padding: 24px;
  gap: 8px;
  border-radius: var(--radius);
  border-left: 4px solid var(--ink);
}
.cat-tile:hover { filter: none; }
.cat-tile:hover h3 { text-decoration: underline; }
.cat-tile h3 { max-width: none; font-size: 21px; }
.cat-tile p { max-width: 36ch; line-height: 1.55; }
.cat-tile .cnt { margin-top: auto; padding-top: 10px; }
/* Decorative corner art: a soft tinted circle with a ring and the category's icon */
.cat-tile > h3,
.cat-tile > p,
.cat-tile > .cnt { position: relative; z-index: 1; }
.cat-tile > h3,
.cat-tile > p { max-width: min(36ch, calc(100% - 56px)); }
.cat-tile__art {
  position: absolute;
  right: -26px;
  bottom: -30px;
  z-index: 0;
  display: grid;
  place-items: center;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 9%, transparent);
  color: var(--ink);
  pointer-events: none;
  transition: transform .3s ease;
}
.cat-tile__art::before {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 2px dashed color-mix(in srgb, var(--ink) 16%, transparent);
}
.cat-tile .cat-tile__art svg {
  position: static;
  width: 68px;
  height: 68px;
  opacity: .6;
  transform: translate(-10px, -12px) rotate(-8deg);
}
.cat-tile:hover .cat-tile__art { transform: scale(1.06) rotate(6deg); }
@media (max-width: 600px) {
  .cat-grid { grid-template-columns: 1fr !important; }
  .cat-tile { min-height: 0; padding: 18px; }
  .cat-tile p { max-width: none; font-size: 14px; }
  .cat-tile > h3,
  .cat-tile > p { max-width: calc(100% - 64px); }
  .cat-tile__art { width: 116px; height: 116px; right: -22px; bottom: -26px; }
  .cat-tile .cat-tile__art svg { width: 52px; height: 52px; transform: translate(-8px, -10px) rotate(-8deg); }
}
@media (prefers-reduced-motion: reduce) {
  .cat-tile__art { transition: none; }
  .cat-tile:hover .cat-tile__art { transform: none; }
}

/* ---- Series tiles ---- */
.series-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 16px;
}
/* Homepage and Siri page: 3 series per row on desktop */
.series-grid--home,
.series-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Cards in a row share one height (grid stretch + flex column), and the
   buttons are pushed to the bottom, so they line up across the row */
.series-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: var(--radius);
  background: var(--tint, var(--surface-2));
  color: var(--ink, var(--text));
  text-decoration: none;
  overflow: hidden;
}
/* The series name link covers the whole tile; "Beli" sits above it */
.series-name { color: inherit; text-decoration: none; }
.series-name::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.series-card:hover .series-name { text-decoration: underline; }
.series-card:has(.series-buy:hover) .series-name { text-decoration: none; }
.series-name:focus-visible { outline: none; }
.series-name:focus-visible::after { outline: 3px solid var(--focus); outline-offset: -3px; }
/* "Lihat Buku" (outline) and "Beli Siri" (filled): same height, side by side */
.series-meta { display: flex; align-items: stretch; gap: 8px; flex: none; margin-top: auto; }
.series-buy {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--on-primary);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .15s, filter .15s;
}
.series-buy svg { width: 15px; height: 15px; flex: none; }
.series-buy:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.series-covers {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 150px;
  padding: 18px 16px 0;
}
.series-covers img {
  height: 90%;
  width: auto;
  max-width: 34%;
  aspect-ratio: 11 / 15;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 10px 20px -10px rgba(0,0,0,.45);
  background: #fff;
  margin: 0 -5%;
}
.series-covers img:nth-child(1) { transform: rotate(-6deg); z-index: 1; }
.series-covers img:nth-child(2) { transform: translateY(-8px); z-index: 2; }
.series-covers img:nth-child(3) { transform: rotate(6deg); z-index: 1; }
.series-covers img:only-child { transform: none; max-width: 50%; }
.series-body {
  flex: 1;
  display: flex;
  padding: 14px 18px 16px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}
.series-name { font: 700 17px/1.25 var(--font-d); min-width: 0; }
/* "Lihat Buku": brand-cyan outline button (the whole tile is the link) */
.series-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  border: 1.5px solid #0E7490;
  border-radius: 999px;
  background: rgba(255, 255, 255, .85);
  color: #0E7490;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  transition: background-color .15s;
}
.series-card:hover .series-more { background: var(--cyan-soft); }
/* Name on its own line, buttons on a row at the bottom, so names never get squeezed */
.series-body { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 10px; }
.series-meta { justify-content: space-between; }
@media (max-width: 900px) {
  .series-grid--home,
  .series-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .series-grid,
  .series-grid--home,
  .series-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .series-covers { height: 116px; padding: 14px 10px 0; }
  .series-body { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 8px; padding: 12px; }
  .series-name { font-size: 15px; overflow-wrap: anywhere; }
  /* Narrow 2-column cards: the two buttons stack, full width */
  .series-meta { flex-direction: column; gap: 6px; }
  .series-more, .series-buy { width: 100%; min-height: 34px; }
}
@media (max-width: 340px) {
  .series-grid,
  .series-grid--home,
  .series-grid--3 { grid-template-columns: 1fr; }
}

/* ---- Buku page: filters ---- */

.filters {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  gap: 12px;
}
.filter-label { font-size: 13px; font-weight: 700; color: var(--muted); }
.chip { min-height: 44px; gap: 6px; text-decoration: none; transition: background .15s, border-color .15s; }
.chip[aria-current="page"] { color: var(--on-primary); }
.selects { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; align-items: end; }
.selects label[hidden] { display: none; }
.selects select {
  width: 100%;
  min-width: 0;
  border-radius: 999px;
  height: 46px;
  padding: 0 42px 0 18px;
  border: 1.5px solid var(--line-strong);
  background-color: var(--surface);
  font-weight: 600;
  font-size: 14.5px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237A3E8F' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
.selects select:hover { background-color: var(--surface-2); }
.selects select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent); }
.active:empty { display: none; }
.active button { min-height: 32px; }
.active [data-clear-all] { background: transparent; color: var(--primary); text-decoration: underline; }
.empty { border-radius: var(--radius); }

/* Phones: categories become one swipeable row so the books appear sooner */
@media (max-width: 767px) {
  .filters { padding: 14px; border-radius: 18px; }
  .selects { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .selects label { width: auto; font-size: 12px; }
  .selects select { font-size: 14px; padding: 0 34px 0 14px; background-position: right 12px center; }
}
@media (max-width: 340px) {
  .selects { grid-template-columns: 1fr; }
}

/* ---- Footer ---- */
.ftr { background: var(--surface-2); border-top: 0; }
.ftr a { min-height: 32px; display: flex; align-items: center; }
.ftr-in { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
.ftr .ftr-social a { gap: 8px; }
.ftr .ftr-social svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 900px) {
  .ftr-in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ftr-in > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 479px) {
  .ftr-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ftr-in > div:first-child { grid-column: 1 / -1; }
}

/* ---- Category and series page header ---- */

/* ---- Contact block (About page) ---- */
.contact-box { margin-top: 36px; padding: 22px 24px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); }
.contact-box h2 { font-size: 22px; }
.contact-box p { margin-top: 6px !important; font-size: 16px !important; color: var(--muted); }
.contact-box .socials { margin-top: 16px; }
.contact-box .socials .btn { gap: 8px; }
.contact-box .socials svg { width: 18px; height: 18px; }

/* =========================================================
   Navigation while scrolling
   - The header sticks to the top. Scrolling down tucks it away to give the
     page room; scrolling up brings it straight back.
   - "Kembali ke atas" button after the reader has scrolled a long way.
   - Buku page: a "Tapis" button that returns to the filters.
   ========================================================= */
.hdr {
  position: sticky;
  top: 0;
  z-index: 50;
  transition: transform .25s ease, box-shadow .2s ease;
}
.hdr.is-stuck { box-shadow: 0 8px 20px -16px rgba(40, 20, 50, .45); }
.hdr.is-hidden { transform: translateY(-100%); }
/* --hdr-h is set by the header script so anchor jumps land below the header */
html { scroll-padding-top: calc(var(--hdr-h, 0px) + 12px); }
.filters { scroll-margin-top: calc(var(--hdr-h, 0px) + 12px); }
#where-to-buy { scroll-margin-top: 16px; }

/* Phones: the menu is one swipeable row so the sticky header stays short */
@media (max-width: 600px) {
  .hdr-top { padding-bottom: 6px; }
  .nav {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    gap: 4px !important;
    padding: 0 0 6px !important;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 86%, transparent);
            mask-image: linear-gradient(to right, #000 86%, transparent);
  }
  .nav.at-end { -webkit-mask-image: none; mask-image: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a,
  .nav a[aria-current="page"] { flex: none; min-height: 40px; padding: 0 14px; font-size: 14.5px; }
}

.float-btn {
  position: fixed;
  z-index: 45;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  border: 0;
  color: var(--on-primary);
  font: 700 15px var(--font-b);
  cursor: pointer;
  box-shadow: 0 10px 24px -10px rgba(10, 52, 66, .55);
}
.float-btn[hidden] { display: none; }
.to-top { right: 16px; width: 48px; border-radius: 50%; font-size: 22px; }
.filter-fab { left: 50%; transform: translateX(-50%); padding: 0 20px; border-radius: 999px; }
.filter-fab__n {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--on-primary);
  color: var(--primary);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.filter-fab__n:empty { display: none; }
/* The book page has its own "Beli di kedai" bar at the bottom on phones */
@media (max-width: 820px) {
  body.has-buybar .to-top { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .hdr, .float-btn { transition: none; }
}

/* =========================================================
   Phones: menu collapses behind a hamburger button and opens
   as a vertical dropdown under the header.
   ========================================================= */
.menu-btn { display: none; }

@media (max-width: 767px) {
  .hdr { padding-top: 10px; padding-bottom: 10px; }
  .hdr-top {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "logo search menu";
    gap: 12px;
    padding-bottom: 0;
  }
  .menu-btn {
    grid-area: menu;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
  }
  .menu-btn:hover { background: var(--surface-2); }
  .menu-btn__bars,
  .menu-btn__bars::before,
  .menu-btn__bars::after {
    display: block;
    width: 26px;
    height: 3px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .2s ease, opacity .2s ease;
  }
  .menu-btn__bars { position: relative; }
  .menu-btn__bars::before,
  .menu-btn__bars::after { content: ""; position: absolute; left: 0; }
  .menu-btn__bars::before { top: -8px; }
  .menu-btn__bars::after { top: 8px; }
  .menu-btn[aria-expanded="true"] .menu-btn__bars { background: transparent; }
  .menu-btn[aria-expanded="true"] .menu-btn__bars::before { transform: translateY(8px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] .menu-btn__bars::after { transform: translateY(-8px) rotate(-45deg); }

  .navbar {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    padding: 6px 0 10px;
    background: var(--surface);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line-strong);
    box-shadow: 0 16px 24px -18px rgba(40, 20, 50, .45);
    max-height: calc(100vh - var(--hdr-h, 64px));
    overflow-y: auto;
  }
  .hdr.menu-open .navbar { display: block; }
  .navbar .nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    overflow: visible !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
  }
  .navbar .nav a,
  .navbar .nav a[aria-current="page"] {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0 6px !important;
    border-radius: 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
    color: var(--text);
    font-size: 17px !important;
    font-weight: 600;
    white-space: normal;
  }
  .navbar .nav a:last-child { border-bottom: 0; }
  .navbar .nav a[aria-current="page"] { padding-left: 14px !important; }
}

/* Toast message (made by the site script), above the phone buy bar */
.pts-toast { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 90; max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 12px; background: var(--deep); color: #fff; font: 600 14.5px/1.35 var(--font-b); box-shadow: 0 12px 28px -12px rgba(8, 30, 40, .55); transform: translateX(-50%); }
.pts-toast[hidden] { display: none; }
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .menu-btn__bars, .menu-btn__bars::before, .menu-btn__bars::after { transition: none; }
}

/* ---- Penulis page: names only ---- */
.author-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.author-item {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: 600 16px/1.3 var(--font-d);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.author-item:hover { border-color: var(--primary); color: var(--primary); }
@media (max-width: 900px) {
  .author-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .author-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .author-item { min-height: 52px; padding: 10px 14px; font-size: 15px; }
}
@media (max-width: 359px) {
  .author-list { grid-template-columns: 1fr; }
}

/* ---- Category page ---- */
/* Every book here shares the same category, so the tag on each card is redundant */

@media (max-width: 767px) {
  
  .page-category .wrap > p { margin: 12px 0 14px !important; font-size: 14px; }
}

/* Buku page: topic chips on larger screens, a "Topik" dropdown on phones */
@media (max-width: 767px) {
  .filters .filter-label,
  .filters #catChips { display: none !important; }
}

/* =========================================================
   Phones: one consistent left/right margin between the content
   and the screen edge. Edge-to-edge rows (carousel, category
   chips) keep lining up with it.
   ========================================================= */
@media (max-width: 767px) {
  .wrap { padding-left: 20px; padding-right: 20px; }
  .ftr-in { padding-left: 20px; padding-right: 20px; }
  .navbar .nav { padding: 0 20px !important; }
  .buybar { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 359px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  .ftr-in { padding-left: 16px; padding-right: 16px; }
  .navbar .nav { padding: 0 16px !important; }
  .buybar { padding-left: 16px; padding-right: 16px; }
}

/* Phone "Beli di kedai" bar: long titles end in "…" instead of running off-screen */
.buybar > div { flex: 1 1 auto; min-width: 0; }
.buybar strong { display: block; max-width: none !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buybar .btn { flex: none; }

/* =========================================================
   Book cards (every book list): cover, 2-line title, price
   pill. No card box. Keeps .card-link / .card-cover, which
   the scripts use.
   ========================================================= */
.grid { row-gap: 34px; }
.card,
.card:hover {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.card-link { gap: 12px; border-radius: 12px; }
.card-cover {
  padding: 0;
  background: none;
  border-radius: 0;
}
.card-cover .cover {
  width: 100%;
  margin: 0;
  aspect-ratio: 7 / 10;   /* most PTS covers are 0.66–0.71 wide per 1 tall */
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(8, 30, 40, .08), 0 8px 18px -10px rgba(10, 52, 66, .4);
  transition: transform .2s ease;
}
/* Cover sizes vary a little: keep the top (where the book title is) in view */
.card-cover .cover img { object-position: center top; }
.card:hover .card-cover .cover { transform: translateY(-3px); }
.card-body {
  padding: 0 2px;
  gap: 8px;
}
.card-title {
  font: 600 16px/1.35 var(--font-b);
  letter-spacing: 0;
  color: var(--text);
  -webkit-line-clamp: 2;
}
.card:hover .card-title { color: var(--primary); }
.card .price,
.card .price-muted {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  font: 600 14px/1.4 var(--font-b);
  letter-spacing: 0;
}
.card .price-muted { color: var(--muted); }
/* Book pager under the grid: count, progress and previous/next controls */
.more-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 36px; }
.more-wrap[hidden], .more-wrap [hidden] { display: none; }
.more-wrap .btn { min-width: 200px; }
.more-wrap .btn:disabled { color: var(--muted); border-color: var(--line); background: transparent; cursor: default; }
.more-status { margin: 0; color: var(--muted); font: 500 14px/1.4 var(--font-b); text-align: center; }
.more-progress { width: min(260px, 80vw); height: 4px; border-radius: 999px; background: var(--line); overflow: hidden; }
.more-progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--primary); transition: width .2s ease; }
.pager { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.pager .btn { min-width: 0; min-height: 40px; padding: 0 16px; font-size: 14px; }
.pager-count { color: var(--muted); font: 600 13.5px/1.4 var(--font-b); white-space: nowrap; }
#books-grid, [data-topic-grid] { scroll-margin-top: calc(var(--hdr-h, 72px) + 16px); }
@media (max-width: 600px) {
  .more-status { font-size: 13px; }
  .pager { gap: 8px; }
  .pager .btn { min-height: 38px; padding: 0 12px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .more-progress span { transition: none; }
}
/* Author under the card title */
.card-author {
  margin-top: -4px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 600px) {
  .grid { row-gap: 26px; column-gap: 14px; }
  .card-author { font-size: 12.5px; }
  .card-link { gap: 10px; }
  .card-title { font-size: 14.5px; }
  .card .price,
  .card .price-muted { font-size: 13px; padding: 2px 9px; }
}
/* Smallest phones: still two books per row */
@media (max-width: 359px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
}
/* 3 books per row on desktop: Buku, Kategori, Buku Baharu and
   series detail pages (tablet and phone keep the rules above) */
@media (min-width: 1101px) {
  .grid--3,
  .grid.series-books { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .card:hover .card-cover .cover { transform: none; }
}
/* Phones: the footer only appears on Utama, Tentang Kami and Soalan Lazim
   (the pages people visit for info, contact and social links). Everything
   else in it is already in the phone menu. */
@media (max-width: 767px) {
  .ftr:not(.ftr--mobile) { display: none; }
  /* Without the footer, leave room under the last item for the back-to-top button */
  body:not(.has-buybar):has(.ftr:not(.ftr--mobile)) main { padding-bottom: 88px; }
}
/* Buku Baharu carousel on phones: no arrow buttons. Instead the next book
   peeks in from the right edge, and a short progress bar under the row
   moves as the user swipes. */

/* Snap cards to the page margin (not the screen edge), so the first book lines up with the heading */

/* Homepage "Semua … →" section links: read as links, not labels */
.sec-head a.sec-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 4px;
  border-radius: 6px;
  color: var(--primary);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--primary) 35%, transparent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  cursor: pointer;
  transition: color .15s, text-decoration-color .15s, background-color .15s;
}
.sec-cta-arrow { flex: none; transition: transform .2s cubic-bezier(.22, .61, .36, 1); }
.sec-head a.sec-cta:hover {
  color: var(--primary-hover);
  text-decoration-color: currentColor;
}
.sec-head a.sec-cta:hover .sec-cta-arrow,
.sec-head a.sec-cta:focus-visible .sec-cta-arrow { transform: translateX(4px); }
.sec-head a.sec-cta:active { background: var(--primary-soft); }
.sec-head a.sec-cta:active .sec-cta-arrow { transform: translateX(6px); }
.sec-head a.sec-cta:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .sec-cta-arrow { transition: none; }
}
/* Homepage: Kategori, Buku Baharu and Siri headings are centred;
   the "Semua …" link stays on the right. */
.sec-head--center {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
}
.sec-head--center h2 { grid-column: 2; text-align: center; max-width: none; }
.sec-head--center > a { grid-column: 3; justify-self: end; }
@media (max-width: 767px) {
  /* Phones and small tablets: the "Semua …" text is dropped to save room; the
     heading stays centred and an arrow button sits at the right edge. The text
     stays available to screen readers. */
  .sec-head--center { display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px; align-items: center; gap: 8px; }
  .sec-head--center h2 { grid-column: 2; max-width: none; }
  .sec-head--center > a.sec-cta {
    grid-column: 3;
    justify-self: end;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-height: 0;
    padding: 0;
    border-radius: 50%;
    background: var(--primary-soft);
    text-decoration: none;
  }
  .sec-head--center > a.sec-cta > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .sec-head--center > a.sec-cta .sec-cta-arrow { width: 18px; height: 18px; }
  .sec-head--center > a.sec-cta:hover .sec-cta-arrow,
  .sec-head--center > a.sec-cta:focus-visible .sec-cta-arrow { transform: none; }
  .sec-head--center > a.sec-cta:active { background: var(--primary); color: var(--on-primary); }
  .sec-head--center > a.sec-cta:active .sec-cta-arrow { transform: translateX(2px); }
}

/* =========================================================
   Homepage on phones (600px and below): compact hero, a swipeable
   row of category cards, left-aligned headings with "Lihat semua",
   and swipeable book cards.
   Everything here is phone-only; desktop and tablet are unchanged.
   ========================================================= */
.sec-cta-m,

/* The kicker is hidden on desktop: keep the heading's entrance timing as before */

@media (max-width: 600px) {
  .page-home #main .wrap { padding-left: 16px; padding-right: 16px; }

  /* ---- Hero ---- */
  .page-home .hero { padding: 22px 0 44px; }
  .page-home .hero h1 { font-size: clamp(26px, 7.6vw, 32px); margin-bottom: 10px; }
  .page-home .hero p.lead { font-size: 15px; line-height: 1.55; margin-bottom: 18px; }
  .page-home .hero-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .page-home .hero-cta .btn {
    width: 100%;
    height: 46px;
    min-height: 46px;
    padding: 0 8px;
    font-size: 14px;
    white-space: nowrap;
    justify-content: center;
  }

  /* ---- Section spacing: compact but breathable ---- */
  .page-home .sec { padding-top: 40px; }
  .page-home .sec--tight { padding-top: 28px; }

  /* ---- Headings: title on the left, "Lihat semua →" on the right ---- */
  .page-home .sec-head--center {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    margin-bottom: 14px;
  }
  .page-home .sec-head--center h2 { flex: 1 1 auto; min-width: 0; font-size: 21px; text-align: left; }
  /* The gradient bar follows the heading to the left */
  .page-home .sec-head--center::after { left: 0; transform: none; }
  .page-home .sec-head--center > a.sec-cta {
    flex: none;
    width: auto;
    height: auto;
    min-height: 36px;
    padding: 0 2px;
    gap: 4px;
    border-radius: 6px;
    background: none;
    font-size: 14px;
    text-decoration: none;
  }
  .page-home .sec-cta-m { display: inline; }
  .page-home .sec-head--center > a.sec-cta .sec-cta-arrow { width: 16px; height: 16px; }
  .page-home .sec-head--center > a.sec-cta:active { background: var(--primary-soft); color: var(--primary); }

  /* ---- Kategori: one swipeable row of compact cards; the next card peeks in ---- */
  .page-home .cat-quick {
    display: flex;
    gap: 10px;
    margin: 0 -16px;
    padding: 2px 16px 10px;
    overflow-x: auto;
    /* Sideways only: a vertical nudge mustn't scroll the cards up under the heading */
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .page-home .cat-quick::-webkit-scrollbar { display: none; }
  .page-home .cat-pill,
  .page-home .cat-pill:nth-child(n + 5) {
    display: flex;
    flex: 0 0 max(80px, calc((100% - 30px) / 3.4));
    width: auto;
    gap: 8px;
    padding: 12px 6px 10px;
    border-radius: var(--radius);
    background: var(--tint);
    scroll-snap-align: start;
  }
  .page-home .cat-circle {
    width: 44px;
    height: 44px;
    aspect-ratio: auto;
    background: rgba(255, 255, 255, .7);
  }
  .page-home .cat-circle svg { width: 24px; height: 24px; }
  .page-home .cat-name { font-size: 12.5px; }
  .page-home .cat-pill:hover { transform: none; box-shadow: none; }
  .page-home .cat-pill:active { filter: brightness(.96); }

}
@media (max-width: 359px) {
  .page-home .hero-cta { grid-template-columns: 1fr; }
}

/* ==== Book details page (books/detail) ====
   Moved here from the template so browsers cache it with the rest of the CSS. */
  /* Book details: catalogue layout. Flat surfaces and hairline rules, with the
     same rounded corners as the rest of the site; colour is reserved for links
     and the purchase buttons. */
  .bk { padding-top: 20px; }

  .bk-main { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: start; margin-top: 20px; }

  /* Gallery */
  .bk-gallery { min-width: 0; }
  .bk-stage { background: #EEF8FA; border-radius: var(--radius); padding: 36px 28px; }
  .bk-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; outline: none; overscroll-behavior-x: contain; }
  .bk-track::-webkit-scrollbar { display: none; }
  .bk-track:focus-visible { outline: 3px solid var(--focus); outline-offset: 6px; }
  /* scroll-snap-stop: a fast swipe/fling stops at the next image instead of flying past them all */
  .bk-slide { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; display: flex; justify-content: center; align-items: center; min-height: 300px; }
  .bk-slide img { display: block; max-width: 100%; max-height: 480px; width: auto; height: auto; object-fit: contain; background: #fff; box-shadow: 0 10px 24px -14px rgba(8, 30, 40, .55); }
  /* Thumbnails: one row that scrolls sideways, so many images never push the page down */
  .bk-thumbs-wrap { position: relative; margin-top: 12px; }
  .bk-thumbs { position: relative; display: flex; gap: 8px; overflow-x: auto; padding: 2px; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain; }
  .bk-thumbs::-webkit-scrollbar { display: none; }
  .bk-thumbs a { flex: none; scroll-snap-align: start; display: block; box-sizing: border-box; width: 64px; height: 64px; padding: 4px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; cursor: pointer; }
  .bk-thumbs a img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .bk-thumbs a:hover { border-color: var(--muted); }
  .bk-thumbs a[aria-current="true"] { border: 2px solid var(--primary); padding: 3px; }
  /* Edge fades appear only on the side that has more thumbnails */
  .bk-thumbs-wrap::before, .bk-thumbs-wrap::after { content: ""; position: absolute; top: 0; bottom: 0; width: 44px; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .2s; }
  .bk-thumbs-wrap::before { left: 0; background: linear-gradient(to left, transparent, var(--bg)); }
  .bk-thumbs-wrap::after { right: 0; background: linear-gradient(to right, transparent, var(--bg)); }
  .bk-thumbs-wrap.more-left::before, .bk-thumbs-wrap.more-right::after { opacity: 1; }

  /* Title block */
  .bk-info { min-width: 0; }
  .bk-series { display: inline-block; font: 700 13px/1.3 var(--font-b); letter-spacing: .06em; text-transform: uppercase; color: var(--primary); text-decoration: none; }
  .bk-series:hover { text-decoration: underline; }
  .bk-info h1 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.15; margin: 10px 0 0; letter-spacing: -.015em; }
  .bk-by { margin-top: 12px; font-size: 17px; color: var(--muted); }
  .bk-by strong { color: var(--text); font-weight: 600; }
  .bk-by a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
  .bk-by a:hover { color: var(--primary); text-decoration-color: currentColor; }
  .bk-price { margin-top: 24px; font: 700 28px/1 var(--font-d); color: var(--text); }

  /* Purchase */
  .bk-buy { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line-strong); scroll-margin-top: calc(var(--hdr-h, 72px) + 12px); }
  .bk-label { display: block; font: 700 12px/1.3 var(--font-b); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .bk-stores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
  .bk-store { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: #fff; color: var(--text); text-decoration: none; font-weight: 600; font-size: 15px; transition: border-color .15s, background .15s; }
  .bk-store:hover { border-color: var(--primary); background: var(--surface-2); }
  /* Longer names ("PTS Official Shop") may wrap to two tidy lines in a narrow button */
  /* Share: round icon button in the bottom-right corner of the cover area; its menu opens upwards */
  .bk-stage { position: relative; }
  .bk-share-wrap { position: absolute; right: 14px; bottom: 14px; z-index: 3; }
  .bk-share { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--primary); cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,.10), 0 8px 18px -8px rgba(0,0,0,.35); transition: background-color .15s, color .15s, transform .15s; list-style: none; }
  .bk-share::-webkit-details-marker { display: none; }
  .bk-share::marker { content: ""; }
  .bk-share:hover, .bk-share-wrap[open] > .bk-share { background: var(--primary); color: var(--on-primary); }
  .bk-share:hover { transform: translateY(-2px); }
  .bk-share:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
  .bk-share-menu { position: absolute; right: 0; bottom: calc(100% + 10px); min-width: 190px; padding: 6px; border: 1px solid var(--line-strong); border-radius: 10px; background: #fff; box-shadow: 0 12px 28px -12px rgba(8, 30, 40, .35); }
  .bk-share-menu > * { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 6px; background: none; color: var(--text); font: 600 15px var(--font-b); text-align: left; text-decoration: none; cursor: pointer; }
  .bk-share-menu > [hidden] { display: none; }
  .bk-share-menu > *:hover, .bk-share-menu > *:focus-visible { background: var(--surface-2); }
  @media (max-width: 600px) {
    .bk-share-wrap { right: 10px; bottom: 10px; }
    .bk-share { width: 44px; height: 44px; }
  }
  /* TikTok Shop only opens in the phone app, so hide it on mouse-driven (desktop) screens */
  @media (hover: hover) and (pointer: fine) {
    .bk-store--app { display: none; }
  }
  .bk-ico { width: 26px; height: 26px; flex: none; border-radius: 6px; background: #fff center / contain no-repeat; }

  /* Synopsis + details */
  .bk-body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 56px; margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--line); }
  .bk-body h2 { font-size: 22px; margin-bottom: 16px; }
  .bk-desc { font-size: 17px; line-height: 1.75; max-width: 66ch; }
  .bk-desc p { margin: 0 0 16px; }
  .bk-desc ol, .bk-desc ul { margin: 0 0 16px; padding-left: 24px; }
  .bk-desc li { margin-bottom: 8px; }
  .bk-facts { margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
  .bk-facts div { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
  .bk-facts dt { color: var(--muted); }
  .bk-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
  .bk-facts dd a { color: var(--text); }

  /* Sections under the book, kept flat to match */
  .page-book .sec-head a { background: none; padding: 0; min-height: 0; border-radius: 0; color: var(--primary); font-weight: 600; }
  .page-book .sec-head a:hover { background: none; color: var(--primary-hover); text-decoration: underline; }
  .page-book .sec .card { border-radius: 6px; box-shadow: none; }
  .page-book .sec .card:hover { transform: none; box-shadow: none; border-color: var(--line-strong); }
  .page-book .sec .card-link, .page-book .sec .card-cover { border-radius: 6px 6px 0 0; }
  .page-book .buybar .btn { border-radius: 999px; }

  /* Phones: smaller section headings ("Lagi dalam …") so they don't crowd the "Lihat siri penuh" link */
  @media (max-width: 767px) {
    .page-book .sec-head { gap: 14px; }
    .page-book .sec-head h2 { font-size: 20px; line-height: 1.25; }
    .page-book .sec-head a { font-size: 13px; }
  }
  /* Phones: "Mungkin anda suka" row replaces the two recommendation sections */
  .bk-ml-wrap { display: none; }
  @media (max-width: 767px) {
    .page-book [data-ml] { display: none; }
    .bk-ml-wrap { display: block; }
    .bk-ml-row {
      display: flex; align-items: stretch; gap: 14px;
      overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain;
      margin-inline: calc(50% - 50vw); padding: 2px calc(50vw - 50%) 6px; scroll-padding-inline: 20px;
    }
    .bk-ml-row::-webkit-scrollbar { display: none; }
    .bk-ml-row .card { flex: 0 0 118px; scroll-snap-align: start; }
    .bk-ml-row .card-link { gap: 8px; }
    .bk-ml-row .card-title { font-size: 13.5px; line-height: 1.3; }
    .bk-ml-row .price, .bk-ml-row .price-muted { display: none; }

    .bk-ml-feature {
      position: relative; overflow: hidden; isolation: isolate;
      flex: 0 0 232px; scroll-snap-align: start;
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
      padding: 16px; border-radius: 14px; background: #0D3F4F;
      color: #fff; text-align: center; text-decoration: none;
    }
    .bk-ml-bg {
      position: absolute; inset: -16px; z-index: -1;
      background: center / cover no-repeat;
      filter: blur(8px) brightness(.5) saturate(1.1);
    }
    .bk-ml-avatar {
      width: 76px; height: 76px; border-radius: 50%; overflow: hidden;
      border: 2px solid rgba(255, 255, 255, .92); background: #fff; flex: none;
    }
    .bk-ml-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
    .bk-ml-text { font: 500 14.5px/1.3 var(--font-b); }
    .bk-ml-text strong { display: block; font-weight: 700; }
    .bk-ml-btn {
      padding: 7px 20px; border: 1.5px solid rgba(255, 255, 255, .9); border-radius: 999px;
      font: 600 14px/1.2 var(--font-b);
    }
    .bk-ml-feature:active .bk-ml-btn { background: rgba(255, 255, 255, .15); }
  }
  @media (max-width: 359px) {
    .bk-ml-row { scroll-padding-inline: 16px; }
  }
  @media (max-width: 1000px) {
    .bk-stores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 900px) {
    .bk-main { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .bk-gallery { max-width: 560px; width: 100%; margin: 0 auto; }
    .bk-stores { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .bk-body { grid-template-columns: minmax(0, 1fr); gap: 36px; margin-top: 40px; padding-top: 32px; }
  }
  @media (max-width: 600px) {
    .bk { padding-top: 14px; }
    .bk-main { margin-top: 14px; gap: 22px; }
    .bk-stage { padding: 20px 12px; }
    .bk-slide { min-height: 220px; }
    .bk-slide img { max-height: 360px; }
    .bk-thumbs a { width: 52px; height: 52px; }
    .bk-info h1 { font-size: clamp(25px, 7vw, 32px); overflow-wrap: anywhere; }
    .bk-by { font-size: 16px; }
    .bk-price { font-size: 26px; margin-top: 20px; }
    .bk-stores { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .bk-store { padding: 0 10px; gap: 8px; font-size: 14px; }
    .bk-desc { font-size: 16px; }
    .bk-facts div { font-size: 14px; }
    /* The "Beli di kedai" bar already sits at the bottom; the floating
       back-to-top button would cover the book details */
    .page-book .to-top { display: none !important; }
  }

/* =========================================================
   Ceria theme (purple + pink + cyan from the PTS Junior logo) + STEMesta
   - Rainbow highlight line under the header, deep purple footer
   - Gradient buttons, active menu item and chips
   - Homepage hero: STEM logo, "Jom Terokai Dunia STEMESTA!"
   - Buku page: "Tapis" button + filter drawer
   - Series page banner, Tentang Stemesta page
   ========================================================= */

/* ---- Buttons, menu, chips: gradient fills ---- */
.btn:not(.ghost),

.float-btn {
  background: var(--grad-btn);
  border-color: transparent;
  box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--cyan) 70%, transparent);
  transition: filter .15s ease, transform .15s ease, box-shadow .15s ease;
}
.btn:not(.ghost):hover,

.float-btn:hover {
  background: var(--grad-btn);
  filter: brightness(1.08) saturate(1.1);
  box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--cyan) 85%, transparent);
}
.btn:not(.ghost):active { transform: translateY(1px); }
.btn.ghost { border-color: color-mix(in srgb, var(--primary) 35%, transparent); }
.btn.ghost:hover { background: var(--primary-soft); }
.btn:disabled, .btn[disabled] { filter: grayscale(.6) opacity(.6); }
.chip[aria-pressed="true"], .chip[aria-current="page"] { background: var(--grad-btn); border-color: transparent; }
.chip:hover { border-color: var(--pink); background: var(--pink-soft); }
/* Section headings: a short rainbow underline */
.sec-head { position: relative; }
.sec-head::after {
  content: "";
  position: absolute; left: 0; bottom: -1px;
  width: 72px; height: 4px;
  border-radius: 4px;
  background: var(--grad);
}
.sec-head--center::after { left: 50%; transform: translateX(-50%); }
.page-head h1 { color: var(--primary); }

/* ---- Header & footer ---- */
.hdr { border-bottom: 0; }
.hdr::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px;
  background: #A5EAF5; /* light cyan */
  pointer-events: none;
}

.ftr {
  position: relative;
  background:
    radial-gradient(45% 110% at 100% 0%, color-mix(in srgb, var(--cyan) 30%, transparent) 0%, transparent 70%),
    radial-gradient(40% 100% at 0% 100%, color-mix(in srgb, var(--pink) 28%, transparent) 0%, transparent 70%),
    linear-gradient(135deg, var(--deep) 0%, #0C4A5C 60%, #0E5E73 100%);
  color: #E8F8FB;
}
.ftr::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 2px;
  background: var(--grad);
}
.ftr h4 { color: #FFFFFF; }
.ftr p, .ftr a, .ftr .fine { color: #CDEAF1; }
.ftr a:hover { color: #FFFFFF; }
.ftr .fine { border-top-color: rgba(255, 255, 255, .16); }

/* ---- Homepage hero ---- */
/* Heading sits closer to the menu. Only the text moves: the hero keeps its
   padding so the book covers stay exactly where they were. On desktop the copy
   starts at the top of the row and is pulled up into the padding (the covers
   are taller, so they still set the row height). Phones have no covers, so
   there the hero's top padding is simply smaller. */
@media (min-width: 901px) {
  /* Taller hero: extra space below the covers, so the wave sits lower */
  .page-home .hero { padding-bottom: 170px; }
}
@media (max-width: 600px) {
  .page-home .hero { padding-top: 14px; }
}
.hero h1 { color: var(--primary); }
.hero p.lead { margin-bottom: 0; color: var(--text); max-width: 46ch; }
.page-home .hero-cta { margin-top: 28px; }
.page-home .hero-cta .btn.ghost { background: rgba(255, 255, 255, .75); }
.page-home .hero-cta .btn.ghost:hover { background: #FFFFFF; }

/* ---- Homepage STEMesta band ---- */
.stem-band {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  padding: 40px 44px;
  border-radius: var(--radius);
  background:
    radial-gradient(circle, rgba(255, 255, 255, .35) 1px, transparent 1.6px) 0 0 / 22px 22px,
    linear-gradient(120deg, #0891B2 0%, #0E7490 45%, #7A3E8F 82%, #B92A7C 100%);
  color: #FFFFFF;
}
.stem-band h2 { margin-top: 10px; font-size: clamp(24px, 3vw, 30px); color: #FFFFFF; }
.stem-band p { margin: 10px 0 20px; max-width: 58ch; color: #E9FAFD; }
.stem-band .btn:not(.ghost) { background: #FFFFFF; color: var(--primary); font-weight: 700; }
.stem-band .btn:not(.ghost):hover { background: #FFFFFF; }
.stem-band :focus-visible { outline-color: #FFFFFF; }
/* White card behind the "Dikuasakan dengan STEM" logo (homepage band + Stemesta page) */
.stem-logo-card {
  padding: 18px 22px;
  border-radius: var(--radius);
  background: #FFFFFF;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
}
.stem-logo-card .logo-stem { width: 100%; }
.stem-band__logo { position: relative; width: 300px; }
.stem-eyebrow {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .16);
  color: #FFFFFF;
  font: 700 12px/1.4 var(--font-b);
  letter-spacing: .08em;
  text-transform: uppercase;
}
@media (max-width: 700px) {
  /* Phones: more breathing room between label, heading, text and button */
  .stem-band { grid-template-columns: 1fr; padding: 32px 24px 36px; gap: 22px; }
  .stem-band__logo { display: none; }
  .stem-band h2 { margin-top: 14px; }
  .stem-band p { margin: 12px 0 26px; line-height: 1.65; }
  /* Full-width button, like "Tentang kami" in the band below */
  .stem-band .btn { display: flex; width: 100%; }
}

/* ---- Buku page: "Tapis" button and filter drawer ---- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: calc(var(--hdr-h, 0px) + 12px);
}
.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1.5px solid var(--primary);
  border-radius: 999px;
  background: var(--surface);
  color: var(--primary);
  font: 700 15px var(--font-b);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.filter-btn:hover { background: var(--grad-btn); border-color: transparent; color: var(--on-primary); }
.filter-btn__n {
  min-width: 22px; height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--pink);
  color: #FFFFFF;
  font-size: 12px;
  display: inline-flex; align-items: center; justify-content: center;
}
.filter-btn__n:empty { display: none; }
.filter-bar .active { flex: 1 1 260px; min-width: 0; }
.active button { background: var(--pink-soft); color: var(--pink-ink); }

.filter-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(420px, 100%);
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--surface);
  color: var(--text);
  box-shadow: -20px 0 40px -20px rgba(40, 20, 50, .45);
}
.filter-drawer::backdrop { background: rgba(46, 18, 64, .45); }
.filter-drawer[open] { animation: drawer-in-side .25s cubic-bezier(.22, .61, .36, 1); }
.filter-drawer__in { display: flex; flex-direction: column; height: 100%; }
.filter-drawer__head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  background: linear-gradient(120deg, var(--primary-soft), var(--pink-soft) 60%, var(--cyan-soft));
}
.filter-drawer__head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--grad); }
.filter-drawer__head h2 { font-size: 21px; color: var(--primary); }
.filter-drawer__x {
  width: 40px; height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.filter-drawer__x:hover { background: var(--pink-soft); color: var(--pink-ink); }
.filter-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
}
.filter-body .chips { flex-wrap: wrap; }
.filter-body .chip { min-height: 40px; }
.filter-body .selects { grid-template-columns: 1fr; margin-top: 8px; }
.filter-body .selects label { font-size: 13px; }
.filter-drawer__foot {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
}
html:has(.filter-drawer[open]) { overflow: hidden; }
@keyframes drawer-in-side { from { transform: translateX(100%); } to { transform: none; } }
@keyframes drawer-in-up { from { transform: translateY(100%); } to { transform: none; } }
/* Phones: a bottom sheet instead of a side panel */
@media (max-width: 767px) {
  .filter-drawer {
    inset: auto 0 0 0;
    width: 100%;
    height: auto;
    max-height: 88vh;
    max-height: 88dvh;
    border-radius: 20px 20px 0 0;
  }
  .filter-drawer[open] { animation-name: drawer-in-up; }
  .filter-drawer__in { max-height: inherit; }
  .filter-drawer__head { border-radius: 20px 20px 0 0; }
  .filter-body .selects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .filter-drawer[open] { animation: none; }
}

.stem-hero__deco { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.stem-hero__deco > * { position: absolute; }
.sb-orbit {
  right: -90px; top: -120px;
  width: 360px; height: 360px;
  border-radius: 50%;
  border: 2px dashed color-mix(in srgb, var(--cyan-bright) 50%, transparent);
  transform: rotate(-18deg) scaleY(.55);
}
/* ---- Tentang Stemesta page ---- */
.stem-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 64px 0 72px;
  background:
    radial-gradient(45% 90% at 90% 50%, color-mix(in srgb, var(--cyan) 45%, transparent) 0%, transparent 70%),
    radial-gradient(40% 80% at 10% 100%, color-mix(in srgb, var(--pink) 40%, transparent) 0%, transparent 70%),
    linear-gradient(130deg, var(--deep) 0%, #0E5E73 55%, #5B2A73 100%);
  color: #FFFFFF;
}
/* Space backdrop: scattered white stars, twinkling sparkles, a small planet and a shooting star */
.sh-field {
  inset: 0;
  background:
    radial-gradient(1.2px 1.2px at 22px 34px, #FFFFFF 60%, transparent 100%),
    radial-gradient(1px 1px at 88px 120px, #FFFFFF 60%, transparent 100%),
    radial-gradient(1.6px 1.6px at 150px 60px, #FFFFFF 60%, transparent 100%),
    radial-gradient(1px 1px at 190px 170px, rgba(255, 255, 255, .8) 60%, transparent 100%),
    radial-gradient(1.3px 1.3px at 60px 190px, #FFFFFF 60%, transparent 100%),
    radial-gradient(1px 1px at 120px 12px, rgba(255, 255, 255, .7) 60%, transparent 100%);
  background-size: 210px 210px;
  opacity: .9;
}
.sh-field--far {
  background-size: 330px 330px;
  background-position: 70px 40px;
  opacity: .55;
  animation: sh-twinkle 5s ease-in-out infinite alternate;
}
.sh-spark {
  left: var(--x); top: var(--y);
  width: var(--s); height: var(--s);
  background: #FFFFFF;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  animation: sh-sparkle 3.2s ease-in-out var(--d) infinite;
}
/* Each sparkle's position (--x, --y), size (--s) and animation delay (--d) */
.sh-spark--1 { --x: 8%;  --y: 18%; --s: 14px; --d: 0s; }
.sh-spark--2 { --x: 46%; --y: 10%; --s: 10px; --d: 1.2s; }
.sh-spark--3 { --x: 62%; --y: 78%; --s: 16px; --d: .6s; }
.sh-spark--4 { --x: 28%; --y: 86%; --s: 9px;  --d: 2s; }
.sh-spark--5 { --x: 88%; --y: 14%; --s: 12px; --d: 1.6s; }
.sh-spark--6 { --x: 94%; --y: 82%; --s: 10px; --d: .3s; }
.sh-planet {
  right: 22%; bottom: 14%;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFFFFF 0%, #FFB8DA 35%, #8B3FA6 100%);
  box-shadow: 0 0 22px rgba(255, 184, 218, .45);
  opacity: .85;
}
.sh-planet::after {
  content: "";
  position: absolute;
  left: -14px; right: -14px; top: 50%;
  height: 12px;
  margin-top: -6px;
  border: 2px solid rgba(255, 255, 255, .7);
  border-radius: 50%;
  transform: rotate(-20deg);
}
.sh-shoot {
  left: 30%; top: 22%;
  width: 120px; height: 2px;
  background: linear-gradient(90deg, transparent, #FFFFFF);
  border-radius: 2px;
  transform: rotate(24deg);
  opacity: 0;
  animation: sh-shoot 7s ease-in 2s infinite;
}
@keyframes sh-twinkle { from { opacity: .3; } to { opacity: .75; } }
@keyframes sh-sparkle {
  0%, 100% { opacity: .35; transform: scale(.7) rotate(0deg); }
  50% { opacity: 1; transform: scale(1) rotate(20deg); }
}
@keyframes sh-shoot {
  0% { opacity: 0; translate: 0 0; }
  4% { opacity: 1; }
  12%, 100% { opacity: 0; translate: 220px 98px; }
}
@media (prefers-reduced-motion: reduce) {
  .sh-field--far, .sh-spark, .sh-shoot { animation: none; }
}
@media (max-width: 700px) {
  .sh-planet { right: 8%; bottom: 6%; width: 24px; height: 24px; }
  .sh-shoot { display: none; }
}
.stem-hero__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; }
.stem-hero h1 { margin-top: 14px; font-size: clamp(34px, 5vw, 58px); color: #FFFFFF; font-weight: 800; }
.stem-word {
  background: linear-gradient(100deg, #FF9ACB 0%, #FFFFFF 50%, var(--cyan-bright) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.stem-hero .lead { margin: 16px 0 26px; max-width: 54ch; font-size: 18px; color: #E6F6FA; }
.stem-hero .btn:not(.ghost) { background: #FFFFFF; color: var(--primary); font-weight: 700; }
.stem-hero .btn.ghost { background: transparent; color: #FFFFFF; border-color: rgba(255, 255, 255, .5); }
.stem-hero .btn.ghost:hover { background: rgba(255, 255, 255, .12); }
.stem-hero :focus-visible { outline-color: #FFFFFF; }
.stem-hero__logo { width: 300px; }
.stem-what { margin-top: 48px; text-align: center; }
.stem-what h2 { font-size: clamp(26px, 3.4vw, 34px); color: var(--primary); }
.stem-quote {
  max-width: 760px;
  margin: 18px auto 0;
  padding: 26px 30px;
  border-left: 5px solid var(--pink);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--surface);
  box-shadow: var(--shadow);
  font-size: 18px;
  line-height: 1.7;
  text-align: left;
}
.stem-quote strong { color: var(--pink-deep); }
/* Text comes from the CMS as paragraphs */
.stem-quote > p { margin: 0; }
.stem-quote > p + p { margin-top: 12px; }
/* Label row; the small logo beside it is for phones only */
.stem-hero__top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.stem-hero__mini { display: none; }
@media (max-width: 700px) {
  /* Phones: more breathing room between label, heading, text and buttons */
  .stem-hero { padding: 40px 0 52px; }
  .stem-hero__in { grid-template-columns: 1fr; gap: 26px; }
  /* The big white logo card gives way to the small white-text logo beside the label */
  .stem-hero__logo { display: none; }
  .stem-hero__mini { display: block; width: 104px; }
  .stem-hero h1 { margin-top: 16px; }
  .stem-hero .lead { margin: 14px 0 30px; font-size: 16.5px; line-height: 1.65; }
  .stem-hero .hero-cta { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .stem-quote { padding: 20px; font-size: 16px; }
}

/* =========================================================
   Cyan accents, only for: homepage "Lihat Siri" / "Beli Sekarang",
   the menu bar, the search bar and the "Beli" pill on series tiles.
   Everything else keeps the original purple/pink colours.
   ========================================================= */
:root {
  --cy-grad: linear-gradient(110deg, #06B6D4 0%, #0891B2 100%);
  --cy-ink: #0E7490;
}
/* Homepage hero buttons */
.page-home .hero-cta .btn:not(.ghost),
.page-home .hero-cta .btn:not(.ghost):hover {
  background: var(--cy-grad);
  box-shadow: 0 8px 18px -10px rgba(6, 182, 212, .8);
}
.page-home .hero-cta .btn.ghost { color: var(--cy-ink); border-color: color-mix(in srgb, #06B6D4 60%, transparent); }
/* Menu bar */
.nav a:hover:not([aria-current="page"]) { background: var(--cyan-soft); color: var(--cy-ink); }
.nav a[aria-current="page"] {
  background: var(--cy-grad);
  box-shadow: 0 6px 14px -8px rgba(6, 182, 212, .85);
}
@media (max-width: 767px) {
  .navbar .nav a:hover { background: var(--cyan-soft); color: var(--cy-ink); }
  .navbar .nav a[aria-current="page"] { background: transparent; color: var(--cy-ink); box-shadow: inset 3px 0 0 #06B6D4; }
}
/* Search bar: light cyan box instead of light purple */
.search { background: var(--cyan-soft); }
.search:hover { border-color: color-mix(in srgb, #06B6D4 45%, transparent); }
.search .ico { color: var(--cy-ink); }
.search:focus-within { border-color: #06B6D4; box-shadow: 0 0 0 4px rgba(6, 182, 212, .2); }
.search-submit, .search-submit:hover { background: var(--cy-grad); }
.search-submit:hover { filter: brightness(1.08); }
/* "Beli Siri" button on series tiles: deep cyan, so the white label passes contrast */
.series-buy, .series-buy:hover { background: linear-gradient(110deg, #0E7490 0%, #0B5F76 100%); }
.series-buy:hover { filter: brightness(1.12); }

/* =========================================================
   Homepage featured hero ("new release" banner, streaming-app style)
   One rounded card per book in the middle, the previous and next books
   peeking in at the sides, round arrows on the card edges and dots below.
   Inside the card: the book's own cover, heavily blurred, under a light
   wash of the brand colours (so the hero stays bright like the header and
   dark text reads easily), the book info on the left and the sharp cover on
   the right. Cards share one grid cell, so the hero keeps the height of its
   tallest card; the script sets --o (the card's place: 0 middle, -1 left,
   1 right) and the card slides there.
   The old .hero rules above are no longer used on the homepage.
   ========================================================= */
.fhero {
  --peek: 72px;   /* how much of the neighbouring cards shows */
  --gap: 20px;
  position: relative;
  overflow: hidden;
  padding: 24px 0 6px;
}
.fh-track {
  position: relative;
  display: grid;
  width: min(1120px, calc(100% - 2 * (var(--peek) + var(--gap))));
  margin: 0 auto;
}
.fh-slide {
  --o: 0;
  grid-area: 1 / 1;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 48px;
  min-width: 0;
  min-height: clamp(360px, 32vw, 420px);
  padding: 72px 80px 40px 76px;   /* top: room for the STEM logo */
  border-radius: 22px;
  border: 1px solid rgba(14, 116, 144, .12);
  background: #EAF8FB;
  color: var(--text);
  box-shadow: 0 22px 44px -30px rgba(10, 52, 66, .45);
  transform: translateX(calc(var(--o) * (100% + var(--gap))));
  visibility: hidden;
}
.fh-slide.is-active, .fh-slide.is-peek { visibility: visible; }
/* Neighbouring books: a little smaller and faded, only the artwork shows */
.fh-slide.is-peek {
  transform: translateX(calc(var(--o) * (100% + var(--gap)))) scale(.92);
  opacity: .55;
  cursor: pointer;
}
.fh-slide:not(.is-active) .fh-copy > * { opacity: 0; }

/* Background: the cover, blurred so it gives each book its own colours
   without distracting, under a light cyan / pink wash */
.fh-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.fh-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(40px) saturate(1.5);
  transform: scale(1.3);
}
.fh-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(50% 70% at 0% 0%, rgba(34, 211, 238, .22) 0%, transparent 70%),
    radial-gradient(45% 70% at 55% 100%, rgba(238, 60, 150, .14) 0%, transparent 70%),
    linear-gradient(90deg, rgba(247, 252, 253, .94) 0%, rgba(247, 252, 253, .86) 42%, rgba(247, 252, 253, .45) 72%, rgba(247, 252, 253, .2) 100%);
}

/* ---- Left: book information ---- */
/* The text starts right under the STEM logo on every card (cards share the
   height of the tallest one, so centring it left a big gap above short titles) */
.fh-copy { position: relative; align-self: start; min-width: 0; max-width: 540px; }
.fh-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* White on cyan-to-purple (both dark enough for white text) */
.fh-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 13px;
  border-radius: 999px;
  background: linear-gradient(100deg, #0E7490 0%, #7A3E8F 100%);
  color: #FFFFFF;
  font: 800 12px/1 var(--font-b);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.fh-label svg { width: 12px; height: 12px; fill: #FBCFE8; }
.fh-cat {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--tint);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
}
.fh-cat:hover { text-decoration: underline; }
.fh-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin: 16px 0 0;
  color: var(--deep);
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}
/* Siri X | Penulis */
.fh-sub { margin-top: 10px; color: var(--muted); font-size: 15px; font-weight: 600; }
.fh-sub a { color: var(--purple); text-decoration: none; }
.fh-sub a:hover { text-decoration: underline; }
.fh-sep { margin: 0 10px; color: var(--line-strong); }
.fh-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;   /* safety only: the script already keeps it to whole sentences */
  overflow: hidden;
  margin-top: 14px;
  max-width: 48ch;
  color: var(--text);
  font-size: 15.5px;
  line-height: 1.6;
}
.fh-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.fh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 22px;
  border-radius: 8px;
  font: 800 14px/1 var(--font-b);
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  transition: filter .2s, background-color .2s, border-color .2s;
}
.fh-btn svg { width: 17px; height: 17px; }
/* Deep cyan so the white label passes contrast */
.fh-btn--main { background: linear-gradient(110deg, #0E7490 0%, #0B5F76 100%); color: #FFFFFF; box-shadow: 0 10px 22px -12px rgba(14, 116, 144, .9); }
.fh-btn--main:hover { filter: brightness(1.12); }
.fh-btn--line { border: 1.5px solid #0E7490; color: #0E7490; background: rgba(255, 255, 255, .7); }
.fh-btn--line:hover { background: #FFFFFF; }

/* ---- Right: the cover, sharp ---- */
/* The cover also uses the top strip kept free for the STEM logo (the logo is
   on the left), so it can be larger without making the card taller */
.fh-visual { position: relative; display: block; justify-self: end; margin-top: -40px; }
.fh-cover {
  display: block;
  width: auto;
  height: clamp(320px, 29vw, 410px);
  max-width: 100%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(10, 52, 66, .14), 0 28px 44px -20px rgba(10, 52, 66, .5);
  transition: transform .4s ease;
}
.fh-cover--plain { aspect-ratio: 11 / 15; overflow: hidden; }
.fh-visual:hover .fh-cover { transform: translateY(-6px); }

/* ---- STEM logo in the card's top-left corner ----
   No box behind it (transparent PNG). The cards keep a strip of top padding
   free for it (.fh-slide padding-top), so the text can never run under it. */
.fh-stem {
  position: absolute;
  top: 16px;
  left: 22px;
  z-index: 4;
  display: block;
  transition: opacity .2s;
}
.fh-stem:hover { opacity: .8; }
.fh-stem .logo-stem { width: 92px; }

/* ---- Arrows on the card edges ---- */
.fh-arrow[hidden] { display: none; }
.fh-arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-top: -23px;
  border-radius: 50%;
  border: 1px solid rgba(14, 116, 144, .18);
  background: #FFFFFF;
  color: #0E7490;
  box-shadow: 0 6px 16px -6px rgba(10, 52, 66, .35);
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
}
.fh-arrow:hover { transform: scale(1.07); box-shadow: 0 8px 20px -6px rgba(10, 52, 66, .45); }
.fh-arrow svg { width: 20px; height: 20px; }
.fh-arrow--prev { left: -23px; }
.fh-arrow--next { right: -23px; }

/* ---- Dots below the card ---- */
.fh-dots[hidden] { display: none; }
.fh-dots { display: flex; justify-content: center; align-items: center; gap: 2px; margin-top: 12px; }
.fh-dot {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.fh-dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--line-strong);
  transition: width .3s ease, background-color .3s ease;
}
.fh-dot:hover::before { background: color-mix(in srgb, var(--primary) 55%, transparent); }
.fh-dot.is-active { width: 34px; }
.fh-dot.is-active::before { width: 26px; background: var(--grad); }

/* ---- Movement ---- */
@media (prefers-reduced-motion: no-preference) {
  .fhero.is-ready .fh-slide {
    transition: transform .65s cubic-bezier(.22, .61, .36, 1), opacity .65s ease, visibility 0s linear .65s;
  }
  .fhero.is-ready .fh-slide.is-active,
  .fhero.is-ready .fh-slide.is-peek { transition-delay: 0s; }
  .fhero.is-ready .fh-copy > * { transition: opacity .45s ease, translate .55s cubic-bezier(.22, .61, .36, 1); }
  .fhero.is-ready .fh-slide:not(.is-active) .fh-copy > * { translate: 0 14px; transition-duration: .2s; }
  .fhero.is-ready .fh-slide.is-active .fh-copy > * { transition-delay: .25s; }
  .fhero.is-ready .fh-slide.is-active .fh-copy > :nth-child(2) { transition-delay: .31s; }
  .fhero.is-ready .fh-slide.is-active .fh-copy > :nth-child(3) { transition-delay: .37s; }
}

/* ---- Tablet ---- */
@media (max-width: 900px) {
  .fhero { --peek: 36px; --gap: 14px; padding-top: 18px; }
  /* Extra top padding keeps the text clear of the STEM logo in the corner */
  .fh-slide { gap: 28px; padding: 62px 44px 32px 48px; min-height: 320px; border-radius: 18px; }
  .fh-stem { top: 14px; left: 18px; }
  .fh-stem .logo-stem { width: 80px; }
  .fh-visual { margin-top: -34px; }
  .fh-cover { height: 280px; }
  .fh-title { font-size: clamp(24px, 3.6vw, 32px); }
  .fh-desc { font-size: 15px; }
}

/* ---- Phones: one centred column that fits on one screen.
   Cover at the top centre (kept small), then the title and the series line,
   then the synopsis (whole sentences, about 3 lines) and the two buttons,
   all centred. The "Buku Baharu" badge and the category tag are hidden here
   to save space. .fh-copy steps aside (display: contents) so its parts sit
   in the card's own grid. Cards share one height; any spare space goes
   above the buttons, so the cover and buttons stay put when the book changes. ---- */
@media (max-width: 600px) {
  .fhero { --peek: 12px; --gap: 8px; padding-top: 12px; }
  .fh-slide {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "cover"
      "head"
      "desc"
      "cta";
    /* Spare height (cards share the tallest one's) goes above the buttons, so the
       title always sits right under the cover and the buttons stay at the bottom */
    grid-template-rows: auto auto auto 1fr;
    align-items: start;
    gap: 0;
    padding: 18px 16px 18px;
    min-height: 0;
    border-radius: 16px;
    text-align: center;
  }
  .fh-copy { display: contents; }
  .fh-visual { grid-area: cover; justify-self: center; margin-top: 0; }
  .fh-cover { width: auto; height: 150px; max-width: 100%; border-radius: 6px; }
  .fh-head { grid-area: head; min-width: 0; padding-top: 14px; }
  .fh-tags { display: none; }
  .fh-title { margin-top: 0; font-size: 21px; line-height: 1.2; -webkit-line-clamp: 4; }
  /* One colour for the whole line: "Siri X | Penulis" */
  .fh-sub { margin-top: 8px; color: var(--text); font-size: 13px; font-weight: 700; }
  .fh-sub a { color: inherit; }
  .fh-sep { margin: 0 6px; color: var(--muted); font-weight: 400; }
  .fh-desc { grid-area: desc; margin: 16px auto 0; max-width: 40ch; font-size: 14px; line-height: 1.55; }
  .fh-cta { grid-area: cta; align-self: end; justify-content: center; gap: 10px; margin-top: 20px; }
  /* Sentence case on one line, icon centred beside the text */
  .fh-btn {
    flex: 1 1 0;
    min-width: 0;
    max-width: 180px;
    min-height: 44px;
    padding: 0 10px;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
  }
  .fh-btn svg { width: 16px; height: 16px; flex: none; }
  .fh-bg::after {
    background:
      radial-gradient(60% 50% at 100% 0%, rgba(238, 60, 150, .14) 0%, transparent 70%),
      linear-gradient(180deg, rgba(247, 252, 253, .72) 0%, rgba(247, 252, 253, .88) 38%, rgba(247, 252, 253, .94) 100%);
  }
  /* Small arrows on the card edges, half over the peeking cards, so visitors who
     don't swipe can still change the book */
  .fh-arrow { width: 30px; height: 30px; margin-top: -15px; background: rgba(255, 255, 255, .92); }
  .fh-arrow svg { width: 15px; height: 15px; }
  .fh-arrow--prev { left: -15px; }
  .fh-arrow--next { right: -15px; }
  .fh-stem { top: 12px; left: 14px; }
  .fh-stem .logo-stem { width: 66px; }
  /* No shrink here, or the thin edge of the next book would disappear */
  .fh-slide.is-peek { transform: translateX(calc(var(--o) * (100% + var(--gap)))); }
}
/* ---- Phones: slimmer header, so more of the hero fits on screen ---- */
@media (max-width: 600px) {
  .hdr { padding-top: 6px; padding-bottom: 6px; }
  .menu-btn { width: 40px; height: 40px; }
  .search { height: 40px; }
  .search-submit { height: 32px; }
}

/* =========================================================
   Topic colours: "cat-tone topic-<topic slug>" (topics are listed in main2027/_topics;
   book covers get their class from script.js, by the book's series)
   ========================================================= */
.cat-tone { --tint: #E9E3DA; --ink: #1E2C3A; }
.topic-sains                  { --tint: var(--sci-bg);    --ink: var(--sci-ink); }
.topic-alam-haiwan            { --tint: var(--nature-bg); --ink: var(--nature-ink); }
.topic-teknologi-kejuruteraan { --tint: var(--tech-bg);   --ink: var(--tech-ink); }
.topic-matematik              { --tint: var(--math-bg);   --ink: var(--math-ink); }
.topic-wang-ekonomi           { --tint: var(--money-bg);  --ink: var(--money-ink); }
.topic-kesihatan-kehidupan    { --tint: var(--life-bg);   --ink: var(--life-ink); }
.topic-cerita                 { --tint: var(--story-bg);  --ink: var(--story-ink); }
/* Topic links filled in by script.js stay hidden until then (and if the series has no topic) */
[data-topic-of][hidden] { display: none; }

/* Series cards: 16 colours that repeat down the list */
.series-card:nth-child(16n+1)  { --tint: #D9E7F4; --ink: #264C72; }
.series-card:nth-child(16n+2)  { --tint: #F8DFD3; --ink: #7A3B25; }
.series-card:nth-child(16n+3)  { --tint: #D8ECDF; --ink: #245A3F; }
.series-card:nth-child(16n+4)  { --tint: #E5DFF3; --ink: #493C78; }
.series-card:nth-child(16n+5)  { --tint: #FAEDC4; --ink: #6A500C; }
.series-card:nth-child(16n+6)  { --tint: #D3EEEC; --ink: #1F5C58; }
.series-card:nth-child(16n+7)  { --tint: #FADCEB; --ink: #8A2A5C; }
.series-card:nth-child(16n+8)  { --tint: #E6EFCF; --ink: #4A5A14; }
.series-card:nth-child(16n+9)  { --tint: #FCE3CC; --ink: #8A4510; }
.series-card:nth-child(16n+10) { --tint: #E0E4F7; --ink: #333F85; }
.series-card:nth-child(16n+11) { --tint: #F9DADF; --ink: #8A2436; }
.series-card:nth-child(16n+12) { --tint: #D5F2E3; --ink: #1B6143; }
.series-card:nth-child(16n+13) { --tint: #EFDDF0; --ink: #6A2F6E; }
.series-card:nth-child(16n+14) { --tint: #D6F0FA; --ink: #135B75; }
.series-card:nth-child(16n+15) { --tint: #ECE4D6; --ink: #5B4A2B; }
.series-card:nth-child(16n)    { --tint: #E1E6EA; --ink: #34495A; }

/* =========================================================
   Series page banner: illustrated background per series
   (/images/series-banners), big title, description and book count
   ========================================================= */
.series-banner {
  --sb-bg: #E6EEF2;   /* shown until the image loads */
  --sb-ink: #1E2C3A;  /* title, text and count */
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 210px;
  margin: 24px 0 32px;
  padding: 36px 140px 44px;
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
  background: var(--sb-bg);
  color: var(--sb-ink);
  text-align: center;
}
/* The image is drawn a little larger than the banner, so the thin frame in the artwork falls outside;
   a soft glow in the middle keeps the text clear of the icons */
.series-banner::before {
  content: "";
  position: absolute;
  inset: -5% -3%;
  z-index: -1;
  background:
    radial-gradient(ellipse 42% 60% at 50% 50%, var(--sb-bg) 35%, transparent 80%),
    var(--banner-img) center / cover no-repeat;
}
.series-banner__title {
  max-width: 18ch;
  font-family: "Alfa Slab One", Georgia, serif;
  font-weight: 400;
  font-size: clamp(30px, 4.6vw, 56px);
  line-height: 1.05;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--sb-ink);
}
.series-banner__desc { max-width: 60ch; margin-top: 12px; font-size: 16px; line-height: 1.55; font-weight: 500; }
.series-banner__count {
  position: absolute;
  right: 24px; bottom: 18px;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--sb-ink);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
}
.series-banner__count:empty { display: none; }
@media (max-width: 820px) {
  .series-banner { padding: 32px 48px 52px; }
}
@media (max-width: 600px) {
  .series-banner { min-height: 0; margin: 12px 0 18px; padding: 24px 18px 48px; border-radius: 14px; }
  .series-banner__title { font-size: 26px; }
  .series-banner__desc { margin-top: 8px; font-size: 14px; }
  .series-banner__count { right: 14px; bottom: 12px; padding: 3px 10px; font-size: 12px; }
}

/* Colours per series: .sb-<series URL title> */
.sb-siri-terokai-hidupan-liar { --sb-bg: #D6F2E2; --sb-ink: #2C4C34; }
.sb-siri-kembara-sains        { --sb-bg: #FADADE; --sb-ink: #8C2341; }
.sb-alam-sains                { --sb-bg: #EEE6D6; --sb-ink: #5E4A2F; }
.sb-the-insects-academy       { --sb-bg: #FAEEC2; --sb-ink: #695220; }
.sb-edukomik-ekonomi          { --sb-bg: #DEE6F6; --sb-ink: #2E377E; }
.sb-di-sebalik-nombor         { --sb-bg: #E6DEF2; --sb-ink: #4D3A7A; }
.sb-projek-aspirasi-x         { --sb-bg: #DAEEE2; --sb-ink: #2C5A3D; }
.sb-projek-inovasi-x          { --sb-bg: #D6EEEE; --sb-ink: #1C5C5C; }
.sb-kerjaya-informatif        { --sb-bg: #FAEEC2; --sb-ink: #6C4C1C; }
.sb-kesihatan-dan-kesedaran   { --sb-bg: #D6F2FA; --sb-ink: #1E5C73; }
.sb-siri-sayangi-alam         { --sb-bg: #FEE6CE; --sb-ink: #7A4221; }
.sb-oh-baru-saya-faham        { --sb-bg: #E6EED2; --sb-ink: #4D5F2E; }
.sb-young-aisyah              { --sb-bg: #F6DED2; --sb-ink: #7A3C2D; }
.sb-komik-sains-informatif    { --sb-bg: #DEE6F6; --sb-ink: #2C3C7C; }
.sb-saintis-cilik             { --sb-bg: #FADADE; --sb-ink: #8C2C44; }
.sb-matematik-informatif      { --sb-bg: #FADEEA; --sb-ink: #7C2C5C; }
.sb-kejuruteraan-informatif   { --sb-bg: #E6EED2; --sb-ink: #4C5424; }
.sb-sains-angkasa             { --sb-bg: #D6F2FA; --sb-ink: #1E4C6D; }

/* Book page: several imprints are separated by commas */
.bk-imprint span + span::before { content: ", "; }

/* =========================================================
   Pictures (logos). Kept here so the templates stay short.
   ========================================================= */
/* "Dikuasakan dengan STEM" logo: <span class="logo-stem"> (white text version: logo-stem--light).
   The normal logo is PTS's own file (as used on pts.com.my/stemesta); the white version is stored here */
.logo-stem {
  display: block;
  aspect-ratio: 640 / 262;
  background: url("https://pts.com.my/assets/global/logo_stem_1.webp") center / contain no-repeat;
}
.logo-stem--light { background-image: url("data:image/webp;base64,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"); }

/* Menu: "Tentang Stemesta" is the STEM logo on its own, with no button background.
   The current page gets a cyan line under it instead of the filled pill. */
.nav a.nav-stem,
.nav a.nav-stem:hover,
.nav a.nav-stem[aria-current="page"] { padding: 0 10px; background: none; box-shadow: none; }
.nav a.nav-stem[aria-current="page"] { border-radius: 0; box-shadow: inset 0 -3px 0 #06B6D4; }
.nav-stem .logo-stem { width: 88px; transition: transform .15s ease; }
.nav-stem:hover .logo-stem { transform: scale(1.06); }
@media (max-width: 767px) {
  /* Phone menu list: logo on the left like the other items; current page = cyan bar on the left */
  .navbar .nav a.nav-stem { padding: 0 6px !important; background: none; }
  .navbar .nav a.nav-stem[aria-current="page"] { padding-left: 14px !important; box-shadow: inset 3px 0 0 #06B6D4; }
  .nav-stem .logo-stem { width: 84px; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-stem .logo-stem { transition: none; }
  .nav-stem:hover .logo-stem { transform: none; }
}

/* Store logos on the book page: <span class="bk-ico bk-ico--<store>"> */
.bk-ico--pts         { background-image: url("https://pts.com.my/assets/global/pts_logo_icon2021.png"); }
.bk-ico--mysiswa     { background-image: url("https://mysiswaplace.my/my-assets/img/icon/bazarsiswa_new_iconV2.png"); }
.bk-ico--shopee      { background-image: url("https://pts.com.my/assets/pts2019/icons/shopee_logo.png"); }
.bk-ico--lazada      { background-image: url("https://pts.com.my/assets/pts2019/icons/laz_logo.png"); }
.bk-ico--bookcafe    { background-image: url("https://pts.com.my/assets/global/bc_logo.png"); }
.bk-ico--bookcapital { background-image: url("https://pts.com.my/assets/global/bookcapital_pink.png"); }
.bk-ico--tiktok      { background-image: url("https://pts.com.my/assets/global/tiktok_logo.png"); }

.grid.is-loading { opacity: .45; pointer-events: none; }
/* Buku page: the server-rendered newest books wait, hidden but holding their space,
   until script.js has applied the query string (q, cat, series, price, sort, page). */
html.is-filtering #books-grid { visibility: hidden; }

/* =========================================================
   Desktop: the header is one row (logo, search, menu).
   Below 1100px the two-row / hamburger layouts are unchanged.
   ========================================================= */
@media (min-width: 1100px) {
  .hdr { padding: 12px 0; }
  .hdr > .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
  .hdr-top { display: contents; }
  .hdr .logo { flex: 0 0 auto; }
  .hdr .search { flex: 0 0 300px; width: 300px; max-width: none; min-width: 0; }
  .hdr .navbar { flex: 0 1 auto; width: max-content; min-width: 0; padding: 0; }
  .hdr .nav { gap: 4px; }
  .hdr .nav a { padding: 0 10px; font-size: 15px; }
  .hdr .nav a[aria-current="page"] { padding: 0 12px; }
  .hdr .nav-stem .logo-stem { width: 80px; }
}