/* =====================================================================================
   Homepage theme — SAB Book Retail (site 27, tema `sab-book-retail`)
   Storefront editorial: kertas hangat, tipografi rapat, satu aksen sinyal oranye.

   Kontrak berkas ini:
   - SETIAP selector diawali `body.theme-homepage-sab-book`, dan kelas itu eksklusif milik tema
     ini (dijaga PublicThemeContractTest). Karena tidak ada satu pun selector lepas, berkas ini
     tidak bisa mewarnai tenant lain walau suatu hari ikut tertaut.
   - Tema adalah layer KETIGA dari cascade publik (core -> theme -> global override), sedangkan
     `homepage-produk-square.css` duduk di layer override. Karena itu setiap rule menyertakan
     minimal `body` + kelas tema (0,2,1) supaya tetap menang atas selector (0,2,0) di sana.
   - Markup yang distyle di sini: migration/shell/hero/sab-editorial.blade.php (hero),
     navbar/footer shell, dan section ported (produk, about, marquee, trust badges, cta).
   ===================================================================================== */

/* ------------------------------------------------------------------ 1. Dasar & token */

body.theme-homepage-sab-book {
    --sab-paper: #F7F5F1;
    --sab-surface: #FFFFFF;
    --sab-ink: #161513;
    --sab-ink-soft: #3A342E;
    --sab-muted: #6E6A63;
    --sab-line: #E3DDD4;
    --sab-line-strong: #CFC7BB;
    --sab-signal: #E4572E;
    --sab-signal-soft: #FBE3D9;
    --sab-leaf: #1F7A5C;
    --sab-radius: 22px;
    --sab-radius-sm: 14px;
    --sab-shadow: 0 18px 44px rgba(22, 21, 19, .10);
    --sab-shadow-soft: 0 10px 26px rgba(22, 21, 19, .07);
    --sab-shell: 1240px;
    --sab-gap: clamp(4rem, 7vw, 6.5rem);

    margin: 0;
    background: var(--sab-paper);
    color: var(--sab-ink);
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

body.theme-homepage-sab-book h1,
body.theme-homepage-sab-book h2,
body.theme-homepage-sab-book h3 {
    font-family: var(--font-display, 'Plus Jakarta Sans', system-ui, sans-serif);
    color: var(--sab-ink);
    letter-spacing: -.025em;
    line-height: 1.08;
}

body.theme-homepage-sab-book .section-wrap {
    width: min(var(--sab-shell), calc(100% - 2.5rem));
    margin-inline: auto;
}

body.theme-homepage-sab-book section {
    padding-block: var(--sab-gap);
}

body.theme-homepage-sab-book .section-tag {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
    padding: .42rem .9rem;
    border: 1px solid var(--sab-line-strong);
    border-radius: 999px;
    background: var(--sab-surface);
    color: var(--sab-ink-soft);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

body.theme-homepage-sab-book .section-tag::before {
    content: "";
    width: .42rem;
    height: .42rem;
    border-radius: 999px;
    background: var(--sab-signal);
}

body.theme-homepage-sab-book .section-title {
    margin: .2rem 0 0;
    font-size: clamp(1.75rem, 3.1vw, 2.6rem);
    font-weight: 800;
}

body.theme-homepage-sab-book .section-title strong,
body.theme-homepage-sab-book .section-title em {
    color: var(--sab-signal);
    font-style: normal;
}

body.theme-homepage-sab-book .section-subtitle {
    max-width: 58ch;
    margin-top: .9rem;
    color: var(--sab-muted);
    font-size: 1rem;
    line-height: 1.7;
}

body.theme-homepage-sab-book .featured-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

body.theme-homepage-sab-book .featured-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .72rem 1.3rem;
    border: 1px solid var(--sab-ink);
    border-radius: 999px;
    background: transparent;
    color: var(--sab-ink);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
}

body.theme-homepage-sab-book .featured-link:hover {
    background: var(--sab-ink);
    color: #FFF;
}

/* ------------------------------------------------------------------ 2. Navbar */

body.theme-homepage-sab-book #navbar {
    position: sticky;
    top: 0;
    z-index: 60;
    padding: 0;
    border-bottom: 1px solid var(--sab-line);
    background: rgba(255, 255, 255, .94);
    box-shadow: none;
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    backdrop-filter: saturate(140%) blur(10px);
}

body.theme-homepage-sab-book #navbar::before {
    content: none;
}

body.theme-homepage-sab-book #navbar .nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    width: min(var(--sab-shell), calc(100% - 2.5rem));
    margin-inline: auto;
    padding-block: .9rem;
}

/* Jangan paksa `display` di sini: dasar shell menyembunyikan `.nav-links` di lebar <=768px, dan
   rule tema dengan `display: flex` akan mengalahkannya sehingga menu desktop tetap tampil di
   ponsel (terukur: `.nav-links` 493px di viewport 375px = seluruh halaman melebar). */
body.theme-homepage-sab-book #navbar .nav-links {
    gap: 1.9rem;
}

body.theme-homepage-sab-book #navbar .nav-links a {
    position: relative;
    color: var(--sab-ink);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-decoration: none;
    text-transform: uppercase;
}

body.theme-homepage-sab-book #navbar .nav-links a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -.45rem;
    width: 0;
    height: 2px;
    background: var(--sab-signal);
    transition: width .22s ease;
}

body.theme-homepage-sab-book #navbar .nav-links a:hover::after {
    width: 100%;
}

/* `background`/`color`/`font-weight` tombol ini ditetapkan dasar shell dengan `!important`
   (`--brass` = aksen oranye tema ini), jadi tidak diulang di sini. Yang diatur tinggal bentuknya. */
body.theme-homepage-sab-book #navbar .nav-cta {
    gap: .5rem;
    padding: .68rem 1.35rem;
    border: 1px solid var(--sab-ink);
    border-radius: 999px;
    font-size: .74rem;
    letter-spacing: .1em;
    text-decoration: none;
    text-transform: uppercase;
    transition: background .2s ease, border-color .2s ease;
}

body.theme-homepage-sab-book #navbar .nav-cta:hover {
    border-color: var(--sab-signal);
}

body.theme-homepage-sab-book #navbar .nav-hamburger {
    border: 1px solid var(--sab-line-strong);
    border-radius: 12px;
    background: var(--sab-surface);
    color: var(--sab-ink);
}

body.theme-homepage-sab-book #navbar .nav-logo img {
    height: 40px;
}

body.theme-homepage-sab-book #navbar .nav-logo-tag-modern {
    color: var(--sab-muted);
    font-size: .62rem;
    letter-spacing: .18em;
    text-transform: uppercase;
}

/* ------------------------------------------------------------------ 3. Drawer mobile */

body.theme-homepage-sab-book .mobile-menu {
    background: var(--sab-ink);
}

body.theme-homepage-sab-book .mobile-menu a {
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    color: #F4F1EC;
    font-size: 1rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

body.theme-homepage-sab-book .mobile-close {
    color: #F4F1EC;
}

/* ------------------------------------------------------------------ 4. Hero editorial */

body.theme-homepage-sab-book .sab-hero {
    padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(2.5rem, 5vw, 4rem);
    background: var(--sab-paper);
}

body.theme-homepage-sab-book .sab-hero__shell {
    display: grid;
    gap: 1.15rem;
    width: min(var(--sab-shell), calc(100% - 2.5rem));
    margin-inline: auto;
}

/* Grid item default-nya `min-width: auto`, sehingga track rail yang bisa digeser tetap memaksa
   seluruh shell selebar isinya (10 chip = halaman melebar keluar viewport dan kolom penawaran
   terpotong). Nol-kan min-width pada anak grid supaya `overflow-x: auto` di track benar-benar
   jadi yang membatasi. */
body.theme-homepage-sab-book .sab-hero__shell > *,
body.theme-homepage-sab-book .sab-hero__stage > * {
    min-width: 0;
}

body.theme-homepage-sab-book .sab-hero__issue {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem 1.15rem;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--sab-muted);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
}

body.theme-homepage-sab-book .sab-hero__issue li {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
}

body.theme-homepage-sab-book .sab-hero__issue li + li::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: var(--sab-signal);
}

/* 4a. Rail kategori */

body.theme-homepage-sab-book .sab-rail {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .55rem .65rem .55rem .85rem;
    border: 1px solid var(--sab-line);
    border-radius: 999px;
    background: var(--sab-surface);
    box-shadow: var(--sab-shadow-soft);
}

body.theme-homepage-sab-book .sab-rail__all {
    flex: 0 0 auto;
    padding: .5rem 1.05rem;
    border-radius: 999px;
    background: var(--sab-ink);
    color: #FFF;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-decoration: none;
    text-transform: uppercase;
}

body.theme-homepage-sab-book .sab-rail__track {
    display: flex;
    flex: 1 1 auto;
    gap: .4rem;
    min-width: 0;
    padding: .15rem .1rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

body.theme-homepage-sab-book .sab-rail__track::-webkit-scrollbar {
    display: none;
}

body.theme-homepage-sab-book .sab-rail__track:focus-visible {
    border-radius: 999px;
    outline: 2px solid var(--sab-signal);
    outline-offset: 2px;
}

body.theme-homepage-sab-book .sab-rail__item {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .45rem;
    padding: .46rem .95rem;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--sab-ink-soft);
    font-size: .78rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    scroll-snap-align: start;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}

body.theme-homepage-sab-book .sab-rail__item:hover {
    border-color: var(--sab-line-strong);
    background: var(--sab-paper);
    color: var(--sab-ink);
}

body.theme-homepage-sab-book .sab-rail__item small {
    color: var(--sab-muted);
    font-size: .68rem;
    font-weight: 700;
}

body.theme-homepage-sab-book .sab-rail__nav {
    display: flex;
    flex: 0 0 auto;
    gap: .35rem;
}

body.theme-homepage-sab-book .sab-rail__nav button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--sab-line-strong);
    border-radius: 999px;
    background: var(--sab-surface);
    color: var(--sab-ink);
    cursor: pointer;
    transition: background .18s ease, color .18s ease, opacity .18s ease;
}

body.theme-homepage-sab-book .sab-rail__nav button svg {
    width: 15px;
    height: 15px;
}

body.theme-homepage-sab-book .sab-rail__nav button:hover:not(:disabled) {
    background: var(--sab-ink);
    color: #FFF;
}

body.theme-homepage-sab-book .sab-rail__nav button:disabled {
    cursor: default;
    opacity: .35;
}

body.theme-homepage-sab-book .sab-rail__nav button.is-hidden {
    display: none;
}

/* Penanda tepi: rail yang masih menyimpan kategori di luar layar diberi gradasi halus. */
body.theme-homepage-sab-book .sab-rail.is-edge-start .sab-rail__track {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26px);
    mask-image: linear-gradient(90deg, transparent 0, #000 26px);
}

body.theme-homepage-sab-book .sab-rail.is-edge-end .sab-rail__track {
    -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 26px);
    mask-image: linear-gradient(270deg, transparent 0, #000 26px);
}

body.theme-homepage-sab-book .sab-rail.is-edge-start.is-edge-end .sab-rail__track {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
}

/* 4b. Panggung: panel utama + tumpukan penawaran */

body.theme-homepage-sab-book .sab-hero__stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 1.15rem;
    align-items: stretch;
}

body.theme-homepage-sab-book .sab-hero__lead {
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    gap: clamp(1.5rem, 3vw, 2.75rem);
    align-items: center;
    padding: clamp(1.5rem, 2.6vw, 2.5rem);
    border: 1px solid var(--sab-line);
    border-radius: var(--sab-radius);
    background: var(--sab-surface);
    box-shadow: var(--sab-shadow);
}

body.theme-homepage-sab-book .sab-hero__visual {
    position: relative;
    min-height: 380px;
    border-radius: var(--sab-radius-sm);
    background: linear-gradient(150deg, var(--sab-paper) 0%, #EFE9E0 100%);
    overflow: hidden;
}

body.theme-homepage-sab-book .sab-hero__visual img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 380px;
    object-fit: cover;
}

body.theme-homepage-sab-book .sab-hero__visual-tag {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    max-width: calc(100% - 2rem);
    padding: .42rem .85rem;
    border-radius: 999px;
    background: rgba(22, 21, 19, .88);
    color: #FFF;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* Dinding sampul: dipakai HANYA saat tenant belum mengunggah foto hero sendiri. */
body.theme-homepage-sab-book .sab-wall {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .5rem;
    align-items: end;
    height: 100%;
    min-height: 380px;
    padding: 1.15rem 1.15rem 0;
}

body.theme-homepage-sab-book .sab-wall__spine {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    height: 78%;
    padding: .9rem .35rem 1rem;
    border-radius: 8px 8px 4px 4px;
    background: var(--sab-paper);
    box-shadow: inset 0 0 0 1px rgba(22, 21, 19, .08);
    overflow: hidden;
    transition: transform .35s ease;
}

body.theme-homepage-sab-book .sab-wall__spine em {
    color: var(--sab-ink);
    font-size: .62rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
    writing-mode: vertical-rl;
}

body.theme-homepage-sab-book .sab-wall__spine:nth-child(1) {
    height: 62%;
    background: var(--sab-ink);
}

body.theme-homepage-sab-book .sab-wall__spine:nth-child(1) em {
    color: #F4F1EC;
}

body.theme-homepage-sab-book .sab-wall__spine:nth-child(2) {
    height: 84%;
    background: var(--sab-signal);
}

body.theme-homepage-sab-book .sab-wall__spine:nth-child(2) em {
    color: #FFF;
}

body.theme-homepage-sab-book .sab-wall__spine:nth-child(3) {
    height: 70%;
    background: #F2C230;
}

body.theme-homepage-sab-book .sab-wall__spine:nth-child(4) {
    height: 90%;
    background: var(--sab-leaf);
}

body.theme-homepage-sab-book .sab-wall__spine:nth-child(4) em {
    color: #FFF;
}

body.theme-homepage-sab-book .sab-wall__spine:nth-child(5) {
    height: 66%;
    background: var(--sab-signal-soft);
}

body.theme-homepage-sab-book .sab-wall__spine:nth-child(6) {
    height: 80%;
    background: var(--sab-ink-soft);
}

body.theme-homepage-sab-book .sab-wall__spine:nth-child(6) em {
    color: #F4F1EC;
}

body.theme-homepage-sab-book .sab-hero__visual:hover .sab-wall__spine {
    transform: translateY(-6px);
}

body.theme-homepage-sab-book .sab-hero__visual:hover .sab-wall__spine:nth-child(2n) {
    transform: translateY(-14px);
}

/* 4c. Salinan */

body.theme-homepage-sab-book .sab-hero__kicker {
    margin: 0 0 .85rem;
    color: var(--sab-signal);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}

body.theme-homepage-sab-book .sab-hero__title {
    margin: 0;
    font-size: clamp(2rem, 4.2vw, 3.35rem);
    font-weight: 800;
    line-height: .98;
    letter-spacing: -.035em;
}

body.theme-homepage-sab-book .sab-hero__title strong {
    color: var(--sab-signal);
    font-weight: 800;
}

body.theme-homepage-sab-book .sab-hero__desc {
    max-width: 46ch;
    margin: 1.15rem 0 0;
    color: var(--sab-muted);
    font-size: 1rem;
    line-height: 1.72;
}

body.theme-homepage-sab-book .sab-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    margin-top: 1.7rem;
}

body.theme-homepage-sab-book .sab-hero__cta,
body.theme-homepage-sab-book .sab-hero__ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .92rem 1.7rem;
    border-radius: 999px;
    font-size: .84rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

body.theme-homepage-sab-book .sab-hero__cta {
    border: 1px solid var(--sab-ink);
    background: var(--sab-ink);
    color: #FFF;
}

body.theme-homepage-sab-book .sab-hero__cta:hover {
    border-color: var(--sab-signal);
    background: var(--sab-signal);
    transform: translateY(-1px);
}

body.theme-homepage-sab-book .sab-hero__ghost {
    border: 1px solid var(--sab-line-strong);
    background: transparent;
    color: var(--sab-ink);
}

body.theme-homepage-sab-book .sab-hero__ghost:hover {
    border-color: var(--sab-ink);
    background: var(--sab-paper);
}

body.theme-homepage-sab-book .sab-hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1.6rem 0 0;
    padding: 0;
    list-style: none;
}

body.theme-homepage-sab-book .sab-hero__chips li {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .46rem .9rem .46rem .7rem;
    border: 1px solid var(--sab-line);
    border-radius: 999px;
    background: var(--sab-paper);
    color: var(--sab-ink-soft);
    font-size: .76rem;
    font-weight: 600;
}

body.theme-homepage-sab-book .sab-hero__chips li::before {
    content: "";
    width: .5rem;
    height: .5rem;
    border-radius: 999px;
    background: var(--sab-leaf);
}

/* 4d. Kartu penawaran */

body.theme-homepage-sab-book .sab-offers {
    display: grid;
    grid-auto-rows: 1fr;
    gap: 1.15rem;
}

body.theme-homepage-sab-book .sab-offer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: .85rem;
    padding: 1.35rem 1.4rem;
    border: 1px solid var(--sab-line);
    border-radius: var(--sab-radius);
    background: var(--sab-surface);
    color: var(--sab-ink);
    text-decoration: none;
    box-shadow: var(--sab-shadow-soft);
    transition: transform .22s ease, box-shadow .22s ease;
}

body.theme-homepage-sab-book .sab-offer:hover {
    transform: translateY(-3px);
    box-shadow: var(--sab-shadow);
}

body.theme-homepage-sab-book .sab-offer__tag {
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

body.theme-homepage-sab-book .sab-offer strong {
    font-family: var(--font-display, 'Plus Jakarta Sans', system-ui, sans-serif);
    font-size: 1.22rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.02em;
}

body.theme-homepage-sab-book .sab-offer small {
    color: var(--sab-muted);
    font-size: .78rem;
    line-height: 1.5;
}

body.theme-homepage-sab-book .sab-offer--accent {
    border-color: var(--sab-signal);
    background: var(--sab-signal);
    color: #FFF;
}

body.theme-homepage-sab-book .sab-offer--accent .sab-offer__tag,
body.theme-homepage-sab-book .sab-offer--accent small {
    color: rgba(255, 255, 255, .86);
}

body.theme-homepage-sab-book .sab-offer--dark {
    border-color: var(--sab-ink);
    background: var(--sab-ink);
    color: #FFF;
}

body.theme-homepage-sab-book .sab-offer--dark .sab-offer__tag,
body.theme-homepage-sab-book .sab-offer--dark small {
    color: rgba(255, 255, 255, .78);
}

body.theme-homepage-sab-book .sab-offer--plain .sab-offer__tag {
    color: var(--sab-leaf);
}

/* ------------------------------------------------------------------ 5. Marquee */

body.theme-homepage-sab-book .marquee-strip {
    border-block: 1px solid var(--sab-ink);
    background: var(--sab-ink);
    color: #F4F1EC;
}

body.theme-homepage-sab-book .marquee-label {
    background: var(--sab-signal);
    color: #FFF;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

/* Warna item di-set eksplisit: dasar marquee mewarisi warna teks tema terang, sehingga item
   tampil gelap di atas strip gelap dan praktis tak terlihat. */
body.theme-homepage-sab-book .marquee-item {
    color: #F4F1EC;
    font-family: var(--font-display, 'Plus Jakarta Sans', system-ui, sans-serif);
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .04em;
}

body.theme-homepage-sab-book .marquee-dot {
    color: var(--sab-signal);
}

/* ------------------------------------------------------------------ 6. Section produk */

/* Section yang datanya masih kosong hanya mencetak judulnya, dan itu meninggalkan celah setinggi
   satu layar di storefront baru. `:has()` dipakai supaya section-nya otomatis kembali begitu
   tenant menambah produk/galeri/layanan; browser tanpa `:has()` cuma menampilkan section kosong
   seperti sebelumnya, jadi tidak ada bagian yang hilang permanen. */
body.theme-homepage-sab-book #produk:not(:has(.prod-card)),
body.theme-homepage-sab-book #galeri:not(:has(.gallery-grid > *)),
body.theme-homepage-sab-book #layanan:not(:has(.services-grid > *)) {
    display: none;
}

body.theme-homepage-sab-book #produk {
    border-block: 1px solid var(--sab-line);
    background: var(--sab-surface);
}

body.theme-homepage-sab-book #produk .prod-card {
    border: 1px solid var(--sab-line);
    border-radius: var(--sab-radius-sm);
    background: var(--sab-surface);
    overflow: hidden;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

body.theme-homepage-sab-book #produk .prod-card:hover {
    border-color: var(--sab-line-strong);
    transform: translateY(-4px);
    box-shadow: var(--sab-shadow);
}

body.theme-homepage-sab-book #produk .prod-img {
    border-bottom: 1px solid var(--sab-line);
    background: var(--sab-paper);
}

body.theme-homepage-sab-book #produk .prod-body {
    padding: 1.05rem 1.15rem 1.25rem;
}

body.theme-homepage-sab-book #produk .prod-cat {
    color: var(--sab-signal);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

body.theme-homepage-sab-book #produk .prod-name {
    margin-top: .45rem;
    color: var(--sab-ink);
    font-family: var(--font-display, 'Plus Jakarta Sans', system-ui, sans-serif);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.015em;
    text-decoration: none;
}

body.theme-homepage-sab-book #produk .prod-price {
    color: var(--sab-ink);
    font-family: var(--font-display, 'Plus Jakarta Sans', system-ui, sans-serif);
    font-size: 1.1rem;
    font-weight: 800;
    text-decoration: none;
}

body.theme-homepage-sab-book #produk .prod-price small {
    color: var(--sab-muted);
    font-size: .72rem;
    font-weight: 600;
}

body.theme-homepage-sab-book #produk .prod-price-coret {
    color: var(--sab-muted);
    font-size: .8rem;
    font-weight: 500;
}

body.theme-homepage-sab-book #produk .prod-price-usd {
    color: var(--sab-muted);
    font-size: .72rem;
    font-weight: 600;
}

body.theme-homepage-sab-book #produk .prod-badge {
    border-radius: 999px;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

body.theme-homepage-sab-book #produk .prod-inquiry-link {
    display: inline-flex;
    align-items: center;
    padding: .5rem .95rem;
    border: 1px solid var(--sab-line-strong);
    border-radius: 999px;
    color: var(--sab-ink);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-decoration: none;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}

body.theme-homepage-sab-book #produk .prod-inquiry-link:hover {
    border-color: var(--sab-signal);
    background: var(--sab-signal);
    color: #FFF;
}

body.theme-homepage-sab-book #produk .prod-cart-add-btn {
    border-radius: 999px;
    background: var(--sab-ink);
    color: #FFF;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
}

body.theme-homepage-sab-book #produk .prod-cart-add-btn:hover {
    background: var(--sab-signal);
}

/* ------------------------------------------------------------------ 7. About */

body.theme-homepage-sab-book .about-bg {
    background: var(--sab-paper);
}

body.theme-homepage-sab-book .about-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
    margin-top: 2.75rem;
}

body.theme-homepage-sab-book .about-img {
    position: relative;
    border-radius: var(--sab-radius);
    background: linear-gradient(150deg, #EFE9E0 0%, var(--sab-paper) 100%);
    overflow: hidden;
}

body.theme-homepage-sab-book .about-img-main {
    display: block;
    width: 100%;
    height: auto;
    min-height: 320px;
    border-radius: var(--sab-radius);
    object-fit: cover;
}

body.theme-homepage-sab-book .about-accent {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 96px;
    height: 6px;
    background: var(--sab-signal);
}

body.theme-homepage-sab-book .about-content .about-text {
    color: var(--sab-muted);
    font-size: .98rem;
    line-height: 1.8;
}

body.theme-homepage-sab-book .about-content .about-text strong {
    color: var(--sab-ink);
}

body.theme-homepage-sab-book .about-stat {
    border-left: 2px solid var(--sab-signal);
    padding-left: 1rem;
}

body.theme-homepage-sab-book .about-stat-label {
    color: var(--sab-muted);
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* ------------------------------------------------------------------ 8. Section pelengkap */

/* Baris jaminan belanja — partial BERSAMA `migration/shell/sections/homepage-trust-badges.blade.php`,
   yang tidak punya skeleton global: `.tb-*` hanya distyle di sheet per tema. `width`/`height` pada
   `.tb-icon svg` karena itu WAJIB ada di sini. Tanpa itu `<svg viewBox>` tanpa atribut ukuran memakai
   default SVG2 (100% lebar kontainer) dan ikonnya melebar 1:1 dengan section — terukur 1412x1412 px
   di sab.local, sehingga satu baris jaminan setinggi 4.519 px. */
body.theme-homepage-sab-book .tb-section {
    /* Band ramping, bukan section konten: jangan ikut `section { padding-block: var(--sab-gap) }`. */
    padding-block: clamp(2rem, 3vw, 2.75rem);
    border-block: 1px solid var(--sab-line);
    background: var(--sab-surface);
}

body.theme-homepage-sab-book .tb-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.25rem 2.5rem;
    width: min(var(--sab-shell), calc(100% - 2.5rem));
    margin-inline: auto;
}

body.theme-homepage-sab-book .tb-item {
    display: flex;
    align-items: center;
    gap: .8rem;
    color: var(--sab-ink);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .02em;
}

body.theme-homepage-sab-book .tb-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--sab-signal-soft);
    color: var(--sab-signal);
}

body.theme-homepage-sab-book .tb-icon svg {
    width: 21px;
    height: 21px;
}

body.theme-homepage-sab-book .tb-text {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}

body.theme-homepage-sab-book .tb-text strong {
    color: var(--sab-ink);
    font-family: var(--font-display, 'Plus Jakarta Sans', system-ui, sans-serif);
    font-size: .86rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

body.theme-homepage-sab-book .tb-text small {
    color: var(--sab-muted);
    font-size: .76rem;
    font-weight: 500;
}

body.theme-homepage-sab-book .homepage-cta {
    background: var(--sab-ink);
}

body.theme-homepage-sab-book .homepage-cta p {
    color: rgba(255, 255, 255, .74);
}

body.theme-homepage-sab-book .cta-title {
    color: #FFF;
}

body.theme-homepage-sab-book .cta-btn-primary,
body.theme-homepage-sab-book .btn-dark {
    border-radius: 999px;
    background: var(--sab-signal);
    color: #FFF;
    font-weight: 700;
    letter-spacing: .06em;
}

body.theme-homepage-sab-book .cta-info-card {
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--sab-radius-sm);
    background: rgba(255, 255, 255, .04);
}

body.theme-homepage-sab-book .cta-info-label {
    color: rgba(255, 255, 255, .6);
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
}

body.theme-homepage-sab-book .cta-info-val {
    color: #FFF;
}

body.theme-homepage-sab-book .article-card {
    border: 1px solid var(--sab-line);
    border-radius: var(--sab-radius-sm);
    background: var(--sab-surface);
}

/* ------------------------------------------------------------------ 9. Footer */

body.theme-homepage-sab-book .footer {
    background: var(--sab-ink);
    color: rgba(255, 255, 255, .7);
}

body.theme-homepage-sab-book .footer a {
    color: rgba(255, 255, 255, .7);
    text-decoration: none;
}

body.theme-homepage-sab-book .footer a:hover {
    color: #FFF;
}

body.theme-homepage-sab-book .footer-col-title {
    color: #FFF;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

body.theme-homepage-sab-book .footer-brand-name {
    color: #FFF;
    font-family: var(--font-display, 'Plus Jakarta Sans', system-ui, sans-serif);
    font-weight: 800;
    letter-spacing: -.02em;
}

body.theme-homepage-sab-book .footer-tagline {
    color: rgba(255, 255, 255, .6);
}

body.theme-homepage-sab-book .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .12);
}

body.theme-homepage-sab-book .social-btn {
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    color: rgba(255, 255, 255, .8);
}

body.theme-homepage-sab-book .social-btn:hover {
    border-color: var(--sab-signal);
    background: var(--sab-signal);
    color: #FFF;
}

body.theme-homepage-sab-book .footer-impact-chips span {
    border-color: rgba(255, 255, 255, .16);
    color: rgba(255, 255, 255, .74);
}

/* ------------------------------------------------------------------ 10. Responsif */

@media (max-width: 1080px) {
    body.theme-homepage-sab-book .sab-hero__stage {
        grid-template-columns: minmax(0, 1fr);
    }

    body.theme-homepage-sab-book .sab-offers {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-auto-rows: auto;
    }

    body.theme-homepage-sab-book .sab-offer {
        padding: 1.1rem 1.15rem;
    }
}

@media (max-width: 900px) {
    body.theme-homepage-sab-book .sab-hero__lead {
        grid-template-columns: minmax(0, 1fr);
    }

    body.theme-homepage-sab-book .sab-hero__visual,
    body.theme-homepage-sab-book .sab-hero__visual img,
    body.theme-homepage-sab-book .sab-wall {
        min-height: 300px;
    }

    body.theme-homepage-sab-book .sab-hero__title {
        font-size: clamp(1.85rem, 7vw, 2.5rem);
    }

    body.theme-homepage-sab-book .about-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    body.theme-homepage-sab-book .sab-wall__spine em {
        font-size: .56rem;
    }
}

@media (max-width: 768px) {
    /* Cermin eksplisit dari perilaku shell dasar (wastra.css:1926). Tanpa ini, rule tema apa pun
       yang menyentuh `.nav-links` bisa menang dan mengembalikan menu desktop di ponsel. */
    body.theme-homepage-sab-book #navbar .nav-links {
        display: none;
    }
}

@media (max-width: 720px) {
    body.theme-homepage-sab-book .sab-hero__shell,
    body.theme-homepage-sab-book .section-wrap,
    body.theme-homepage-sab-book #navbar .nav-inner {
        width: calc(100% - 1.6rem);
    }

    body.theme-homepage-sab-book .sab-rail {
        flex-wrap: wrap;
        border-radius: 20px;
        padding: .6rem;
    }

    body.theme-homepage-sab-book .sab-rail__nav {
        display: none;
    }

    body.theme-homepage-sab-book .sab-rail__track {
        flex: 1 1 100%;
        order: 3;
        margin-top: .35rem;
    }

    body.theme-homepage-sab-book .sab-offers {
        grid-template-columns: minmax(0, 1fr);
    }

    body.theme-homepage-sab-book .sab-hero__issue {
        font-size: .66rem;
        letter-spacing: .12em;
    }

    body.theme-homepage-sab-book .sab-hero__actions {
        flex-direction: column;
    }

    body.theme-homepage-sab-book .sab-hero__cta,
    body.theme-homepage-sab-book .sab-hero__ghost {
        width: 100%;
    }

    body.theme-homepage-sab-book .featured-header {
        align-items: flex-start;
    }

    body.theme-homepage-sab-book .tb-wrap {
        align-items: flex-start;
        gap: 1rem;
        width: calc(100% - 1.6rem);
    }

    body.theme-homepage-sab-book .tb-item {
        flex: 1 1 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.theme-homepage-sab-book .sab-hero__visual:hover .sab-wall__spine,
    body.theme-homepage-sab-book .sab-hero__visual:hover .sab-wall__spine:nth-child(2n),
    body.theme-homepage-sab-book .sab-offer:hover,
    body.theme-homepage-sab-book #produk .prod-card:hover {
        transform: none;
    }
}

/* ==========================================================================
   task-52 — Katalog /produk SAB, layout referensi Superego.
   SEMUA selector ber-scope `body.theme-homepage-sab-book`; kelas `sab-*` hanya dipakai
   halaman katalog ini sehingga tema/halaman lain tidak terpengaruh. Token warna mengikuti
   referensi (primary #E65516, text #2f2f2f, muted #787878, faint #9a9a9a, line #ededed,
   line-2 #e3e3e3, bg #f5f5f5). Geometri: grid 2 kolom gap 12 -> 3 (>=560) -> 4 gap 16
   (>=860) -> 5 (>=1100); kontainer max 1280px padding 16; kartu media aspect 1/1 margin 10.
   ========================================================================== */
body.theme-homepage-sab-book .sab-catalog {
    --sab-primary: #E65516;
    --sab-ink: #222222;
    --sab-text: #2f2f2f;
    --sab-muted: #787878;
    --sab-faint: #9a9a9a;
    --sab-line: #ededed;
    --sab-line-2: #e3e3e3;
    --sab-bg: #f5f5f5;
    background: var(--sab-bg);
    padding: 16px 0 48px;
    color: var(--sab-text);
}
body.theme-homepage-sab-book .sab-catalog__container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px;
}
body.theme-homepage-sab-book .sab-catalog__breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12px;
    color: var(--sab-muted);
    margin: 4px 0 10px;
}
body.theme-homepage-sab-book .sab-catalog__breadcrumb a { color: var(--sab-muted); text-decoration: none; }
body.theme-homepage-sab-book .sab-catalog__breadcrumb a:hover { color: var(--sab-primary); }
body.theme-homepage-sab-book .sab-catalog__breadcrumb [aria-current="page"] { color: var(--sab-text); font-weight: 600; }
body.theme-homepage-sab-book .sab-catalog__sep { color: var(--sab-faint); }
body.theme-homepage-sab-book .sab-catalog__head { margin: 0 0 12px; }
body.theme-homepage-sab-book .sab-catalog__title {
    margin: 0;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.25;
    color: var(--sab-ink);
}
body.theme-homepage-sab-book .sab-catalog__subtitle { margin: 2px 0 0; font-size: 12.5px; color: var(--sab-muted); }
body.theme-homepage-sab-book .sab-catalog__chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 0 12px;
    scrollbar-width: none;
}
body.theme-homepage-sab-book .sab-catalog__chips::-webkit-scrollbar { display: none; }
body.theme-homepage-sab-book .sab-chip {
    flex: 0 0 auto;
    padding: 7px 13px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--sab-line);
    color: var(--sab-text);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: .15s ease;
}
body.theme-homepage-sab-book .sab-chip:hover { border-color: var(--sab-primary); color: var(--sab-primary); }
body.theme-homepage-sab-book .sab-chip.is-active { background: var(--sab-primary); border-color: var(--sab-primary); color: #fff; }
body.theme-homepage-sab-book .sab-catalog__search {
    display: flex;
    gap: 8px;
    margin: 0 0 14px;
    max-width: 460px;
}
body.theme-homepage-sab-book .sab-catalog__search input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 12px;
    border: 1px solid var(--sab-line-2);
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    color: var(--sab-text);
}
body.theme-homepage-sab-book .sab-catalog__search button {
    flex: 0 0 auto;
    padding: 8px 16px;
    border: 0;
    border-radius: 8px;
    background: var(--sab-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
body.theme-homepage-sab-book .sab-catalog__toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 12px;
}
body.theme-homepage-sab-book .sab-catalog__count { margin: 0 auto 0 0; font-size: 13px; color: var(--sab-muted); }
body.theme-homepage-sab-book .sab-catalog__sort { display: flex; align-items: center; gap: 8px; margin: 0; }
body.theme-homepage-sab-book .sab-catalog__sort select {
    border: 1px solid var(--sab-line-2);
    border-radius: 6px;
    padding: 7px 10px;
    background: #fff;
    font-size: 13px;
    color: var(--sab-text);
}
body.theme-homepage-sab-book .sab-catalog__sort-btn {
    padding: 7px 12px;
    border: 1px solid var(--sab-line-2);
    border-radius: 6px;
    background: #fff;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--sab-text);
    cursor: pointer;
}
body.theme-homepage-sab-book .sab-catalog__sort-btn:hover { border-color: var(--sab-primary); color: var(--sab-primary); }
body.theme-homepage-sab-book .sab-products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
body.theme-homepage-sab-book .sab-products__item { margin: 0 !important; padding: 0 !important; width: auto !important; float: none !important; }
body.theme-homepage-sab-book .sab-products__item::before,
body.theme-homepage-sab-book .sab-products__item::after { content: none !important; display: none !important; }
@media (min-width: 560px) {
    body.theme-homepage-sab-book .sab-products { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 860px) {
    body.theme-homepage-sab-book .sab-products { grid-template-columns: repeat(4, 1fr); gap: 16px; }
}
@media (min-width: 1100px) {
    body.theme-homepage-sab-book .sab-products { grid-template-columns: repeat(5, 1fr); }
}
body.theme-homepage-sab-book .sg-product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--sab-line);
    border-radius: 8px;
    overflow: hidden;
    transition: .16s ease;
}
body.theme-homepage-sab-book .sg-product-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.08); border-color: transparent; }
body.theme-homepage-sab-book .sg-product-card__media {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    margin: 10px;
    border-radius: 10px;
    background: #f4f4f4;
    border: 1px solid #ececec;
    overflow: hidden;
}
body.theme-homepage-sab-book .sg-product-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
body.theme-homepage-sab-book .sg-product-card__ph { display: block; width: 100%; height: 100%; background: #f4f4f4; }
body.theme-homepage-sab-book .sg-product-card__badge {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--sab-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.15;
    padding: 3px 6px;
    border-bottom-left-radius: 8px;
    text-align: center;
}
body.theme-homepage-sab-book .sg-product-card__badge small { display: block; font-size: 8px; font-weight: 700; opacity: .95; }
body.theme-homepage-sab-book .sg-product-card__body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 0 10px 10px; }
body.theme-homepage-sab-book .sg-product-card__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--sab-text);
    text-decoration: none;
}
body.theme-homepage-sab-book .sg-product-card__price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-top: auto; }
body.theme-homepage-sab-book .sg-product-card__now { color: var(--sab-primary); font-size: 16px; font-weight: 800; }
body.theme-homepage-sab-book .sg-product-card__cur { font-size: 11px; font-weight: 700; }
body.theme-homepage-sab-book .sg-product-card__old { color: var(--sab-faint); font-size: 11.5px; text-decoration: line-through; }
body.theme-homepage-sab-book .sg-product-card__meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--sab-muted); flex-wrap: wrap; }
body.theme-homepage-sab-book .sg-product-card__flag { font-weight: 700; color: var(--sab-primary); }
body.theme-homepage-sab-book .sg-product-card__flag.is-terlaris { color: #b45309; }
body.theme-homepage-sab-book .sg-product-card__loc { color: var(--sab-faint); font-size: 10.5px; }
body.theme-homepage-sab-book .sg-product-card__add {
    display: block;
    width: 100%;
    margin-top: 2px;
    padding: 8px 10px;
    border: 0;
    border-radius: 6px;
    background: var(--sab-signal);
    color: #fff;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, opacity .15s;
}
body.theme-homepage-sab-book .sg-product-card__add:hover { background: var(--sab-ink-soft); }
body.theme-homepage-sab-book .sg-product-card__add:disabled { opacity: .6; cursor: default; }
/* Cegah double-tap smart zoom iOS pada area kartu yang bisa ditekan. */
body.theme-homepage-sab-book .sg-product-card__media,
body.theme-homepage-sab-book .sg-product-card__title,
body.theme-homepage-sab-book .sg-product-card__add { touch-action: manipulation; }
/* iOS Safari auto-zoom saat kontrol form <16px difokus; 16px hanya di iOS. */
@supports (-webkit-touch-callout: none) {
    body.theme-homepage-sab-book .sab-catalog__sort select { font-size: 16px; }
}
body.theme-homepage-sab-book .sab-catalog__empty {
    background: #fff;
    border: 1px solid var(--sab-line);
    border-radius: 12px;
    padding: 40px 20px;
    text-align: center;
    color: var(--sab-muted);
}
body.theme-homepage-sab-book .sab-catalog__empty-cta {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 16px;
    border-radius: 8px;
    background: var(--sab-primary);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
}
body.theme-homepage-sab-book .sab-catalog__pagination { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 18px 0 0; }
body.theme-homepage-sab-book .sab-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--sab-line-2);
    border-radius: 8px;
    background: #fff;
    color: var(--sab-text);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}
body.theme-homepage-sab-book .sab-page:hover { border-color: var(--sab-primary); color: var(--sab-primary); }
body.theme-homepage-sab-book .sab-page.is-current { background: var(--sab-primary); border-color: var(--sab-primary); color: #fff; }
body.theme-homepage-sab-book .sab-page-gap { padding: 0 4px; color: var(--sab-faint); }
body.theme-homepage-sab-book .sab-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   task-52 lanjutan — sidebar kategori referensi Superego (`aside.sg-catbar`).
   Layout: `.sg-woo__layout` flex 232px + gap 20px HANYA >=768px; <768px sidebar
   disembunyikan dan chip rail kategori yang tampil. Sticky menempel di bawah header
   SAB (navbar sticky terukur 41px di browser; top 57px = 41px + jarak 16px).
   -------------------------------------------------------------------------- */
body.theme-homepage-sab-book .sg-woo__layout { display: block; }
body.theme-homepage-sab-book .sg-woo__content { min-width: 0; }
body.theme-homepage-sab-book .sg-catbar { display: none; }
body.theme-homepage-sab-book .sab-catalog__chips { display: flex; }
@media (min-width: 768px) {
    body.theme-homepage-sab-book .sg-woo__layout { display: flex; gap: 20px; align-items: flex-start; }
    body.theme-homepage-sab-book .sg-woo__content { flex: 1 1 auto; min-width: 0; }
    body.theme-homepage-sab-book .sg-catbar {
        display: block;
        flex: 0 0 232px;
        position: sticky;
        top: 57px;
        background: #fff;
        border: 1px solid var(--sab-line);
        border-radius: 12px;
        /* 22 kategori = 1260px, lebih tinggi dari viewport. Tanpa batas ini sidebar
           "melewati" navbar saat scroll dalam (terukur y=-162,8 pada scroll 400).
           Referensi tidak mengalami karena daftarnya pendek; max-height + scroll
           internal membuat perilaku sticky setara tanpa mengubah geometri. */
        max-height: calc(100vh - 73px);
        overflow-y: auto;
        overflow-x: hidden;
        box-shadow: 0 1px 0 rgba(0, 0, 0, .04);
    }
    body.theme-homepage-sab-book .sab-catalog__chips { display: none; }
}
body.theme-homepage-sab-book .sg-catbar__title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 16px;
    font-size: 14px;
    font-weight: 800;
    color: var(--sab-ink);
    background: var(--sab-bg);
    border-bottom: 1px solid var(--sab-line);
}
body.theme-homepage-sab-book .sg-catbar__title svg { width: 16px; height: 16px; color: var(--sab-primary); }
body.theme-homepage-sab-book .sg-catbar__all {
    display: block;
    padding: 11px 16px;
    font-size: 13px;
    font-weight: 700;
    color: var(--sab-text);
    text-decoration: none;
    border-bottom: 1px solid var(--sab-line);
}
body.theme-homepage-sab-book .sg-catbar__all:hover,
body.theme-homepage-sab-book .sg-catbar__all.is-active { color: var(--sab-primary); background: #fdece4; }
body.theme-homepage-sab-book .sg-catbar__list { list-style: none; margin: 0; padding: 0; }
body.theme-homepage-sab-book .sg-catbar__item { border-bottom: 1px solid var(--sab-line); }
body.theme-homepage-sab-book .sg-catbar__item:last-child { border-bottom: 0; }
body.theme-homepage-sab-book .sg-catbar__parent {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--sab-text);
    text-decoration: none;
}
body.theme-homepage-sab-book .sg-catbar__parent:hover,
body.theme-homepage-sab-book .sg-catbar__parent.is-active { color: var(--sab-primary); background: #fdece4; }
body.theme-homepage-sab-book .sg-catbar__thumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 7px;
    border: 1px solid var(--sab-line);
    background: #f6f7f8;
    overflow: hidden;
}
body.theme-homepage-sab-book .sg-catbar__thumb img { width: 100%; height: 100%; object-fit: cover; }
body.theme-homepage-sab-book .sg-catbar__icon { width: 16px; height: 16px; color: var(--sab-primary); }
body.theme-homepage-sab-book .sg-catbar__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================
   PDP gaya Shopee — KHUSUS SAB (site 27, tema sab-book-retail).
   Semua warna/radius/shadow memakai token tema yang sudah ada;
   tidak ada font-family, warna, atau ukuran baru yang dikarang.
   Semua aturan ter-anchor `body.theme-homepage-sab-book.page-product-detail`
   sehingga tema/tenant lain tidak tersentuh.
   ============================================================ */

body.theme-homepage-sab-book.page-product-detail .product-detail-hero {
    background: var(--sab-paper);
}

/* Kartu putih pembungkus galeri + buy box, seperti kartu atas Shopee. */
body.theme-homepage-sab-book.page-product-detail .product-detail-grid {
    background: var(--sab-surface);
    border: 1px solid var(--sab-line);
    border-radius: var(--sab-radius-sm);
    box-shadow: var(--sab-shadow-soft);
    padding: clamp(1rem, 2vw, 1.5rem);
    gap: clamp(1rem, 2.4vw, 2rem);
}

/* PDP SAB mengikuti pola marketplace: satu kartu utama dengan buy box yang
   ringan, bukan kartu kedua yang membungkus seluruh kolom kanan. */
body.theme-homepage-sab-book.page-product-detail .product-detail-copy {
    align-self: stretch;
    padding: .35rem clamp(.25rem, 1vw, .9rem) .25rem;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
}

body.theme-homepage-sab-book.page-product-detail .product-detail-copy .product-info-stack {
    gap: 1rem;
}

body.theme-homepage-sab-book.page-product-detail .product-detail-kicker {
    color: var(--sab-muted);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

body.theme-homepage-sab-book.page-product-detail .product-detail-copy h1 {
    margin: .35rem 0 1rem;
    color: var(--sab-ink);
    font-size: clamp(1.45rem, 2.5vw, 2rem);
    line-height: 1.18;
    font-weight: 700;
}

body.theme-homepage-sab-book.page-product-detail .product-detail-summary {
    padding: 1rem 1.15rem;
    border: 0;
    border-radius: 0;
    background: var(--sab-paper);
}

body.theme-homepage-sab-book.page-product-detail .product-detail-summary > div:first-child strong {
    color: var(--sab-primary);
    font-size: clamp(1.75rem, 3vw, 2.35rem);
}

body.theme-homepage-sab-book.page-product-detail .sab-cart-actions {
    padding-top: .85rem;
    border-top: 1px solid var(--sab-line);
}

body.theme-homepage-sab-book.page-product-detail .product-detail-share {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--sab-line);
}

body.theme-homepage-sab-book.page-product-detail .product-detail-share-label {
    margin-bottom: .65rem;
    color: var(--sab-muted);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

body.theme-homepage-sab-book.page-product-detail .product-detail-share-actions {
    gap: .5rem;
}

body.theme-homepage-sab-book.page-product-detail .product-detail-share-btn {
    min-height: 36px;
    padding-inline: .8rem;
    border-radius: 999px;
    background: var(--sab-surface);
    border-color: var(--sab-line);
    color: var(--sab-ink-soft);
    font-size: .78rem;
}

body.theme-homepage-sab-book.page-product-detail .product-detail-share-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem;
}

body.theme-homepage-sab-book.page-product-detail .product-detail-share-btn {
    width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0 !important;
    line-height: 1;
    border-radius: 50%;
    transition: transform .2s ease, background-color .2s ease, color .2s ease;
}

body.theme-homepage-sab-book.page-product-detail .product-detail-share-btn:hover {
    transform: translateY(-2px);
}

body.theme-homepage-sab-book.page-product-detail .product-detail-share-btn svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

/* Buy box: harga jadi hierarki utama. Catatan: product-detail.min.css dimuat
   SETELAH CSS tema ini, jadi selektor di bawah sengaja lebih spesifik
   (.sab-cart-actions .sab-cart-buynow) agar menang tanpa !important.
   Radius tombol sengaja TIDAK ditimpa: 10px bawaan sudah paling dekat dengan
   Shopee dan membuat kedua tombol seragam. */
/* Harga besar: hierarki utama seperti Shopee. */
body.theme-homepage-sab-book.page-product-detail .product-detail-summary > div:first-child > span {
    display: block;
    font-size: .78rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sab-muted);
    margin-bottom: .2rem;
}

body.theme-homepage-sab-book.page-product-detail .product-detail-summary > div:first-child strong {
    display: block;
    font-size: clamp(1.65rem, 2.6vw, 2.15rem);
    line-height: 1.15;
    font-weight: 800;
    color: var(--sab-ink);
}

body.theme-homepage-sab-book.page-product-detail .product-detail-summary strong small,
body.theme-homepage-sab-book.page-product-detail .product-detail-price-usd {
    font-size: .82rem;
    font-weight: 500;
    color: var(--sab-muted);
}

body.theme-homepage-sab-book.page-product-detail .product-detail-price-coret {
    display: block;
    font-size: .92rem;
    font-weight: 500;
    color: var(--sab-muted);
}

/* Baris aksi: stepper + dua tombol + tautan keranjang. */
body.theme-homepage-sab-book.page-product-detail .sab-cart-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
}

body.theme-homepage-sab-book.page-product-detail .sab-pd-qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--sab-line-strong);
    border-radius: 999px;
    overflow: hidden;
    background: var(--sab-surface);
}

body.theme-homepage-sab-book.page-product-detail .sab-pd-qty__btn {
    width: 38px;
    height: 40px;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 1.15rem;
    line-height: 1;
    color: var(--sab-ink-soft);
}

body.theme-homepage-sab-book.page-product-detail .sab-pd-qty__btn:hover {
    background: var(--sab-paper);
}

body.theme-homepage-sab-book.page-product-detail .sab-pd-qty__input {
    width: 48px;
    height: 40px;
    border: 0;
    background: transparent;
    text-align: center;
    font: inherit;
    color: var(--sab-ink);
}

body.theme-homepage-sab-book.page-product-detail .sab-cart-actions .sab-cart-buynow {
    background: var(--sab-primary, #E65516);
    border-color: var(--sab-primary, #E65516);
    color: #fff;
}

body.theme-homepage-sab-book.page-product-detail .sab-cart-actions .sab-cart-buynow:hover {
    filter: brightness(.95);
}

/* Seksi bawah: Spesifikasi -> Deskripsi -> Penilaian. */
body.theme-homepage-sab-book.page-product-detail .sab-pd-spec,
body.theme-homepage-sab-book.page-product-detail .sab-pd-desc,
body.theme-homepage-sab-book.page-product-detail .sab-pd-reviews {
    background: var(--sab-surface);
    border-top: 1px solid var(--sab-line);
    padding-block: clamp(1.6rem, 3vw, 2.6rem);
}

body.theme-homepage-sab-book.page-product-detail .sab-pd-spec__title,
body.theme-homepage-sab-book.page-product-detail .sab-pd-desc__title,
body.theme-homepage-sab-book.page-product-detail .sab-pd-reviews__title {
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    font-weight: 700;
    color: var(--sab-ink);
    margin-bottom: 1rem;
}

body.theme-homepage-sab-book.page-product-detail .sab-pd-spec__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: clamp(1rem, 2.5vw, 2.5rem);
    align-items: start;
}

@media (max-width: 860px) {
    body.theme-homepage-sab-book.page-product-detail .sab-pd-spec__grid {
        grid-template-columns: 1fr;
    }
}

body.theme-homepage-sab-book.page-product-detail .sab-pd-spec__table {
    width: 100%;
    border-collapse: collapse;
    font-size: .94rem;
}

body.theme-homepage-sab-book.page-product-detail .sab-pd-spec__table th,
body.theme-homepage-sab-book.page-product-detail .sab-pd-spec__table td {
    padding: .6rem .8rem;
    border-bottom: 1px solid var(--sab-line);
    text-align: left;
    vertical-align: top;
    font-weight: 400;
    color: var(--sab-text);
}

body.theme-homepage-sab-book.page-product-detail .sab-pd-spec__table th {
    width: 38%;
    font-weight: 600;
    color: var(--sab-muted);
    background: var(--sab-paper);
}

body.theme-homepage-sab-book.page-product-detail .sab-pd-spec__empty {
    color: var(--sab-muted);
    font-size: .94rem;
}

body.theme-homepage-sab-book.page-product-detail .sab-pd-spec__meta {
    display: grid;
    gap: .55rem;
    padding: .9rem 1rem;
    border: 1px solid var(--sab-line);
    border-radius: var(--sab-radius-sm);
    background: var(--sab-paper);
    font-size: .92rem;
}

body.theme-homepage-sab-book.page-product-detail .sab-pd-spec__meta > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

body.theme-homepage-sab-book.page-product-detail .sab-pd-spec__meta dt {
    color: var(--sab-muted);
}

body.theme-homepage-sab-book.page-product-detail .sab-pd-spec__meta dd {
    margin: 0;
    color: var(--sab-ink-soft);
    text-align: right;
}

body.theme-homepage-sab-book.page-product-detail .sab-pd-desc__body {
    max-width: 78ch;
    font-size: .96rem;
    line-height: 1.75;
    color: var(--sab-text);
}

body.theme-homepage-sab-book.page-product-detail .sab-pd-reviews__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: clamp(1rem, 2.5vw, 2.5rem);
    align-items: center;
    margin-bottom: 1rem;
}

@media (max-width: 860px) {
    body.theme-homepage-sab-book.page-product-detail .sab-pd-reviews__head {
        grid-template-columns: 1fr;
    }
}

body.theme-homepage-sab-book.page-product-detail .sab-pd-reviews__stars {
    display: inline-flex;
    gap: .12rem;
    color: var(--sab-line-strong);
}

body.theme-homepage-sab-book.page-product-detail .sab-pd-reviews__note {
    margin-top: .35rem;
    font-size: .92rem;
    color: var(--sab-muted);
}

body.theme-homepage-sab-book.page-product-detail .sab-pd-reviews__filters {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

body.theme-homepage-sab-book.page-product-detail .sab-pd-reviews__chip {
    padding: .38rem .85rem;
    border: 1px solid var(--sab-line-strong);
    border-radius: 999px;
    font-size: .86rem;
    color: var(--sab-muted);
    background: var(--sab-surface);
}

body.theme-homepage-sab-book.page-product-detail .sab-pd-reviews__chip.is-active {
    border-color: var(--sab-primary);
    color: var(--sab-primary);
    background: var(--sab-signal-soft);
}

body.theme-homepage-sab-book.page-product-detail .sab-pd-reviews__empty {
    padding: 1.4rem 1rem;
    border: 1px dashed var(--sab-line-strong);
    border-radius: var(--sab-radius-sm);
    background: var(--sab-paper);
    text-align: center;
    color: var(--sab-ink-soft);
}

body.theme-homepage-sab-book.page-product-detail .sab-pd-reviews__empty-hint {
    margin-top: .3rem;
    font-size: .88rem;
    color: var(--sab-muted);
}
/* ============================================================
   Keseragaman font PDP dengan homepage (khusus SAB).

   Tema SAB menulis `font-family: var(--font-display, 'Plus Jakarta Sans')`
   dengan asumsi token itu kosong. Kenyataannya wastra.css:59 menetapkan
   --font-display = 'Playfair Display', sehingga fallback tidak pernah aktif
   dan halaman detail tampil serif sementara homepage sans.

   Token ditimpa DI SCOPE PDP SAJA (bukan di tingkat tema) supaya homepage
   tidak berubah satu piksel pun; tema/tenant lain juga tidak tersentuh.
   ============================================================ */

body.theme-homepage-sab-book.page-product-detail {
    --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
    --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
    --public-font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
}

body.theme-homepage-sab-book.page-product-detail h1,
body.theme-homepage-sab-book.page-product-detail h2,
body.theme-homepage-sab-book.page-product-detail h3,
body.theme-homepage-sab-book.page-product-detail .product-detail-summary strong,
body.theme-homepage-sab-book.page-product-detail .product-detail-kicker,
body.theme-homepage-sab-book.page-product-detail .product-detail-offer-copy h2,
body.theme-homepage-sab-book.page-product-detail .sab-pd-spec__title,
body.theme-homepage-sab-book.page-product-detail .sab-pd-desc__title,
body.theme-homepage-sab-book.page-product-detail .sab-pd-reviews__title,
body.theme-homepage-sab-book.page-product-detail .product-detail-buy-label,
body.theme-homepage-sab-book.page-product-detail .product-detail-secondary {
    font-family: var(--font-display);
}

/* Pelacakan huruf negatif itu disetel untuk Playfair; dengan sans jadi terlalu rapat. */
body.theme-homepage-sab-book.page-product-detail .product-detail-offer-copy h2,
body.theme-homepage-sab-book.page-product-detail .sab-pd-spec__title,
body.theme-homepage-sab-book.page-product-detail .sab-pd-desc__title,
body.theme-homepage-sab-book.page-product-detail .sab-pd-reviews__title {
    letter-spacing: normal;
}
/* Skala teks dasar disamakan dengan homepage: body homepage 15px / 21,75px
   (rasio 1,45). html tetap 16px sehingga ukuran berbasis rem tidak bergeser;
   hanya ukuran berbasis em dan warisan yang ikut menyusut ~6% seperti homepage. */
body.theme-homepage-sab-book.page-product-detail {
    font-size: 15px;
    line-height: 1.45;
}

/* SAB owns its detail-page geometry. These rules intentionally neutralize the
   legacy Wastra detail scaffold instead of trying to restyle it piecemeal. */
body.theme-homepage-sab-book.page-product-detail .product-detail-page {
    min-height: 0 !important;
    background: var(--sab-paper) !important;
}

body.theme-homepage-sab-book.page-product-detail .product-detail-hero {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem;
    background: var(--sab-paper);
}

body.theme-homepage-sab-book.page-product-detail .product-detail-grid {
    grid-template-columns: minmax(0, 1fr) minmax(360px, .92fr) !important;
    gap: clamp(1.25rem, 3vw, 2.5rem) !important;
    align-items: start !important;
}

body.theme-homepage-sab-book.page-product-detail .product-detail-main-image {
    border-radius: var(--sab-radius-sm) !important;
    box-shadow: none !important;
    background: var(--sab-paper) !important;
}

body.theme-homepage-sab-book.page-product-detail .product-detail-info-block,
body.theme-homepage-sab-book.page-product-detail .product-info-block {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.theme-homepage-sab-book.page-product-detail .product-detail-kicker {
    color: var(--sab-signal) !important;
}

body.theme-homepage-sab-book.page-product-detail .product-detail-copy h1 {
    font-size: clamp(1.05rem, 1.55vw, 1.35rem) !important;
    font-weight: 500 !important;
    letter-spacing: -.01em;
}

body.theme-homepage-sab-book.page-product-detail .product-detail-summary > div:first-child strong {
    color: var(--sab-signal) !important;
}

body.theme-homepage-sab-book.page-product-detail .sab-cart-actions .product-detail-buy-cta {
    min-height: 42px;
    padding: .55rem .9rem;
    border-radius: 8px;
    font-size: .78rem;
    box-shadow: 0 6px 14px rgba(230, 85, 22, .16);
}

body.theme-homepage-sab-book.page-product-detail .sab-cart-actions .product-detail-buy-label {
    font-size: .78rem;
    letter-spacing: .03em;
}

body.theme-homepage-sab-book.page-product-detail .sab-cart-actions > button {
    flex: 1 1 0;
    min-width: 0;
    min-height: 42px;
    height: 42px;
}

body.theme-homepage-sab-book.page-product-detail .sab-cart-actions .product-detail-cta-icon {
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 16px;
}

@media (max-width: 860px) {
    body.theme-homepage-sab-book.page-product-detail .product-detail-grid {
        grid-template-columns: 1fr !important;
    }

    body.theme-homepage-sab-book.page-product-detail .product-detail-hero {
        padding-top: .75rem !important;
    }
}

/* Final SAB PDP density: one visual surface, with separators instead of
   nested cards so the purchase flow reads like a marketplace PDP. */
body.theme-homepage-sab-book.page-product-detail .product-detail-grid {
    box-shadow: none;
    background: var(--sab-surface);
}

body.theme-homepage-sab-book.page-product-detail .product-detail-copy,
body.theme-homepage-sab-book.page-product-detail .product-detail-summary {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

body.theme-homepage-sab-book.page-product-detail .product-detail-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    padding: 1rem 0;
    border-top: 1px solid var(--sab-line);
    border-bottom: 1px solid var(--sab-line);
}

body.theme-homepage-sab-book.page-product-detail .product-detail-summary > div {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
}

body.theme-homepage-sab-book.page-product-detail .product-detail-summary > div + div {
    padding-left: 1rem !important;
    border-left: 1px solid var(--sab-line) !important;
}

body.theme-homepage-sab-book.page-product-detail .sab-cart-actions {
    border-top: 0;
    padding-top: 1rem;
}

body.theme-homepage-sab-book.page-product-detail .product-detail-share {
    margin-top: .75rem;
}

body.theme-homepage-sab-book.page-product-detail .product-lightbox[aria-hidden="true"] {
    display: none !important;
}

@media (max-width: 640px) {
    body.theme-homepage-sab-book.page-product-detail .product-detail-summary {
        gap: .75rem;
    }
}

/* Related products use the same compact card rhythm as the SAB homepage rail. */
body.theme-homepage-sab-book.page-product-detail #produk-terkait .featured-scroll {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 14px;
    overflow: visible !important;
    padding: 4px 2px 8px;
    scrollbar-width: none;
}

body.theme-homepage-sab-book.page-product-detail #produk-terkait .featured-scroll::-webkit-scrollbar {
    display: none;
}

body.theme-homepage-sab-book.page-product-detail #produk-terkait .prod-card {
    width: auto !important;
    min-width: 0 !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--sab-line);
    border-radius: 14px;
    background: var(--sab-surface);
    box-shadow: 0 8px 22px rgba(22, 21, 19, .07);
}

body.theme-homepage-sab-book.page-product-detail #produk-terkait .prod-img {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden;
    background: var(--sab-paper);
}

body.theme-homepage-sab-book.page-product-detail #produk-terkait .prod-img img {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
}

body.theme-homepage-sab-book.page-product-detail #produk-terkait.product-related-section--brand-tiles .featured-scroll {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

body.theme-homepage-sab-book.page-product-detail #produk-terkait.product-related-section--brand-tiles .prod-card {
    min-width: 0 !important;
}

@media (max-width: 900px) {
    body.theme-homepage-sab-book.page-product-detail #produk-terkait .featured-scroll,
    body.theme-homepage-sab-book.page-product-detail #produk-terkait.product-related-section--brand-tiles .featured-scroll {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 560px) {
    body.theme-homepage-sab-book .sg-hero-side {
        flex-direction: row !important;
        gap: 10px;
    }
    body.theme-homepage-sab-book .sg-hero-side .sg-voucher {
        flex: 1 1 0 !important;
        min-width: 0;
    }

    body.theme-homepage-sab-book.page-product-detail #produk-terkait .featured-scroll,
    body.theme-homepage-sab-book.page-product-detail #produk-terkait.product-related-section--brand-tiles .featured-scroll {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

body.theme-homepage-sab-book.page-product-detail #produk-terkait .prod-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 6px;
    padding: 10px 11px 13px;
}

body.theme-homepage-sab-book.page-product-detail #produk-terkait .prod-name {
    display: -webkit-box;
    min-height: 34px;
    overflow: hidden;
    color: var(--sab-ink);
    font-size: 12.5px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

body.theme-homepage-sab-book.page-product-detail #produk-terkait .prod-meta {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-top: auto;
}

body.theme-homepage-sab-book.page-product-detail #produk-terkait .prod-price {
    color: var(--sab-signal);
    font-size: 15px;
    font-weight: 800;
}