/* Books Product Page v2 ยท desktop layout (tone green / rose). Scope: .prb2d โ the phone stylesheet (pdp-v2.css) is not loaded here.
Shared rules (desktop research note R8 and its verification, 2026-09-30):
- content width 1200px with 40px side padding: the same left and right edges as the site footer
(the page grows with the window up to 1400px)
- six type sizes only: 12/16, 14/20, 16/24, 18/24, 24/32, 28/36; body 16/24
- a content column is at most 560px wide (about 80 characters at 16px) and every block in it shares that width
- spacing only from 4, 8, 12, 16, 24, 32, 48, 64
- one action colour inside the product area (the tone); green text only for status; visible focus ring; 150ms hover feedback
- blocks are separated by 64px of space and a hairline; only the buy card, the look-inside band and tables carry borders */
body.prb-v2-desk .summary.entry-summary { display: none !important; }
body.prb-v2-desk div.product { display: block !important; }
body.prb-v2-desk .entry-content.is-layout-constrained > *, body.prb-v2-desk .is-layout-constrained > .product { max-width: 100% !important; width: 100% !important; }
.prb2d {
--ink: #16181d; --ink2: #454b55; --ink3: #6b7280; --line: #d5d9d9; --hair: #eceef0; --soft: #f5f6f7;
--green: #0b7a4d; --green-soft: #e8f4ee;
--accent: #0b7a4d; --accent-hover: #0a6a43; --accent-soft: #e8f4ee; --accent-ink: #0b7a4d;
--link: #0b7a4d; --link-line: rgba(11, 122, 77, .45); --date: #0b7a4d; --me: #e8f4ee;
--measure: 560px; --btn-radius: 8px;
--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-head: var(--font-body);
max-width: 1280px; margin: 0 auto; padding: 16px 40px 64px; box-sizing: border-box;
font-family: var(--font-body); font-size: 16px; line-height: 24px; color: var(--ink); text-align: left;
}
/* tone: the action colour. Rose is the pink of the site navigation (#0f9d8f), used for fills, borders and icons only:
text on white stays dark (white on this pink is 3.2:1, pink on white is too weak for labels). Links and the delivery date turn neutral,
so pink is the only colour besides the status green. */
.prb2d[data-tone="rose"] { --accent: #0f9d8f; --accent-hover: #0b7a70; --accent-soft: #fdf1f4; --accent-ink: #16181d; --link: #16181d; --link-line: #9aa1ab; --date: #16181d; --me: #f5f6f7; }
.prb2d[data-tone="rose"] .prb2-btn--primary { font-weight: 700; }
.prb2d *, .prb2d *::before, .prb2d *::after { box-sizing: border-box; }
.prb2d p, .prb2d dl, .prb2d dd, .prb2d ul, .prb2d ol, .prb2d h1, .prb2d h2, .prb2d h3, .prb2d figure { margin: 0; padding: 0; }
.prb2d button, .prb2d select, .prb2d input { font-family: var(--font-body); color: var(--ink); }
.prb2d a { color: var(--link); text-decoration: underline; text-decoration-color: var(--link-line); text-underline-offset: 3px; transition: color .15s ease, text-decoration-color .15s ease; }
.prb2d a:hover { text-decoration-color: currentColor; }
.prb2d :focus-visible { outline: 2px solid #0b7a70; outline-offset: 2px; border-radius: 4px; }
.prb2d img { max-width: 100%; height: auto; display: block; }
.prb2d .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* ---------- breadcrumb ---------- */
.prb2d-crumb { font-size: 14px; line-height: 20px; color: var(--ink3); margin-bottom: 16px; }
.prb2d-crumb a { color: var(--ink3); text-decoration: none; }
.prb2d-crumb a:hover { color: var(--ink); text-decoration: underline; }
.prb2d-crumb span { margin: 0 4px; }
/* ---------- hero parts ---------- */
.prb2d-hero { display: grid; align-items: start; }
.prb2d-gallery { grid-area: gallery; display: grid; gap: 12px; justify-items: start; align-content: start; min-width: 0; }
.prb2d-head { grid-area: head; min-width: 0; }
.prb2d-about { grid-area: about; min-width: 0; }
.prb2d-buy { grid-area: buy; min-width: 0; }
/* gallery: the cover never grows past the first screen; thumbnails sit under it (a, b) or beside it (c) */
.prb2d-main { position: relative; display: block; border-radius: 4px; overflow: hidden; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .16); cursor: zoom-in; max-width: 100%; }
.prb2d-main img { display: block; width: auto; max-width: 100%; height: auto; max-height: max(360px, calc(100vh - 300px)); }
.prb2d .prb2-count { position: absolute; left: 8px; bottom: 8px; background: rgba(0, 0, 0, .62); color: #fff; font-size: 12px; line-height: 20px; padding: 0 8px; border-radius: 10px; }
.prb2d-thumbs { order: 2; display: flex; flex-wrap: wrap; gap: 8px; }
.prb2d .prb2-thumb { position: relative; flex: 0 0 auto; width: 60px; height: 60px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: #fff; overflow: hidden; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color .15s ease; }
.prb2d .prb2-thumb:hover { border-color: #9aa1ab; }
.prb2d .prb2-thumb.is-active { outline: 2px solid var(--ink); outline-offset: 0; }
.prb2d .prb2-thumb img { width: 100%; height: 100%; object-fit: cover; }
.prb2d .prb2-thumb--video { flex-direction: column; background: #1d2127; color: #fff; font-size: 16px; line-height: 1; }
.prb2d .prb2-thumb--video small { font-size: 12px; margin-top: 4px; }
/* head */
.prb2d-kicker { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink2); margin-bottom: 4px !important; }
.prb2d-title { font-family: var(--font-head); font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); } /* plain wrapping: the first line fills up before the text wraps (owner, 2026-10-01). No text-wrap here: "balance" left the first line half empty, and "pretty" counts the pair "4th Edition" (kept together by a no-break space in the markup) as one word and pulls a second word down with it */
.prb2d-by { margin-top: 8px !important; font-size: 16px; line-height: 24px; color: var(--ink2); }
/* about: key facts table and bullets (a), short description (b, c) */
.prb2d-keyfacts { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 4px 16px; font-size: 14px; line-height: 20px; }
.prb2d-keyfacts dt { color: var(--ink3); }
.prb2d-keyfacts dd { color: var(--ink); }
.prb2d-copy { background: none; border: 0; padding: 0; font-size: 14px; line-height: 20px; color: var(--ink); cursor: pointer; border-bottom: 1px dotted #9aa1ab; }
.prb2d-copy:hover { border-bottom-style: solid; }
.prb2d-lede { font-size: 16px; line-height: 24px; color: var(--ink2); max-width: var(--measure); }
.prb2d-facts { list-style: none; font-size: 16px; line-height: 24px; }
.prb2d-facts li { position: relative; padding-left: 20px; }
.prb2d-facts li + li { margin-top: 8px; }
.prb2d-facts li::before { content: ""; position: absolute; left: 4px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--ink3); }
.prb2d-jumps { order: 3; font-size: 14px; line-height: 20px; }
/* buy area */
.prb2d-price { font-size: 28px; line-height: 36px; font-weight: 700; letter-spacing: -.01em; }
.prb2d-price__cur { font-size: 16px; vertical-align: 9px; margin-right: 1px; }
.prb2d-fmt { font-size: 14px; line-height: 20px; color: var(--ink2); }
.prb2d .prb2-dl { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hair); }
.prb2d .prb2-dl__l1 { font-size: 16px; line-height: 24px; }
.prb2d .prb2-dl__l1 b { color: var(--date); font-weight: 700; white-space: nowrap; } /* the date range never breaks in the middle */
.prb2d .prb2-dl__muted { color: var(--ink3); font-weight: 400; }
.prb2d .prb2-dl__l2 { margin-top: 4px !important; font-size: 14px; line-height: 20px; color: var(--ink2); }
.prb2d .prb2-dl__loc b { color: var(--ink); font-weight: 700; }
.prb2d .prb2-ico { width: 14px; height: 14px; vertical-align: -2px; margin: 0 2px; color: var(--ink2); display: inline-block; }
.prb2d .prb2-link { background: none; border: 0; padding: 0 2px; color: var(--link); font-size: 14px; line-height: 20px; cursor: pointer; display: inline-flex; align-items: center; gap: 2px; text-decoration: underline; text-decoration-color: var(--link-line); text-underline-offset: 3px; }
.prb2d .prb2-link .prb2-ico { color: var(--link); margin: 0; }
.prb2d .prb2-link:hover { text-decoration-color: currentColor; }
.prb2d .prb2-zip { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.prb2d .prb2-zip[hidden] { display: none !important; }
.prb2d .prb2-zip input { width: 64px; height: 32px; border: 1px solid #9aa1ab; border-radius: 6px; padding: 0 8px; font-size: 14px; background: #fff; }
.prb2d .prb2-zip .prb2-btn--small { height: 32px; padding: 0 12px; border-radius: 6px; font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; background: var(--ink); color: #fff; }
.prb2d .prb2-zip__err { width: 100%; font-size: 14px; line-height: 20px; color: #b3261e; }
.prb2d .prb2-dl__l3 { margin-top: 4px !important; font-size: 14px; line-height: 20px; color: var(--ink3); }
.prb2d .prb2-stock { margin-top: 8px !important; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--green); }
.prb2d .prb2-stock.is-out { color: #b3261e; }
.prb2d-cta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 16px; }
.prb2d .prb2d-qtywrap { position: relative; width: 112px; }
.prb2d .prb2-qty { display: flex; align-items: center; gap: 8px; width: 100%; height: 40px; border: 1px solid #9aa1ab; border-radius: 8px; padding: 0 12px; background: #fff; font-size: 14px; line-height: 20px; color: var(--ink2); text-align: left; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.prb2d .prb2-qty:hover:not(:disabled), .prb2d .prb2-qty[aria-expanded="true"] { border-color: var(--ink2); }
.prb2d .prb2-qty[aria-expanded="true"] { box-shadow: 0 0 0 3px rgba(22, 24, 29, .08); }
.prb2d .prb2-qty:disabled { cursor: default; }
.prb2d .prb2d-qty__val { flex: 1 1 auto; font-size: 16px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.prb2d .prb2d-qty__chev { flex: 0 0 auto; width: 10px; height: 6px; background: url("data:image/svg+xml;utf8,") no-repeat center; transition: transform .15s ease; }
.prb2d .prb2-qty[aria-expanded="true"] .prb2d-qty__chev { transform: rotate(180deg); }
.prb2d .prb2-qty:disabled .prb2d-qty__chev { display: none; }
/* the list: same width and left edge as the button, 4px below it (or above when there is no room) */
.prb2d .prb2d-qty__list { position: absolute; left: 0; top: calc(100% + 4px); z-index: 40; min-width: 100%; margin: 0; padding: 4px; list-style: none; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .14); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.prb2d .prb2d-qty__list[hidden] { display: none; }
.prb2d .prb2d-qty__list.is-up { top: auto; bottom: calc(100% + 4px); }
.prb2d .prb2d-qty__list:focus-visible { outline: 0; }
.prb2d .prb2d-qty__opt { display: flex; align-items: center; justify-content: space-between; height: 32px; padding: 0 8px; border-radius: 6px; font-size: 14px; line-height: 20px; color: var(--ink); cursor: pointer; font-variant-numeric: tabular-nums; }
.prb2d .prb2d-qty__opt.is-active { background: var(--soft); }
.prb2d .prb2d-qty__opt[aria-selected="true"] { font-weight: 700; color: var(--accent-ink); }
.prb2d .prb2d-qty__opt[aria-selected="true"]::after { content: ""; width: 12px; height: 12px; background: var(--accent); -webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,") no-repeat center / contain; }
.prb2d .prb2-qty__select[hidden] { display: none; }
.prb2d .prb2-btn { height: 48px; border: 1px solid transparent; border-radius: var(--btn-radius); padding: 0 16px; font-size: 16px; font-weight: 600; display: flex; align-items: center; justify-content: center; white-space: nowrap; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.prb2d .prb2-btn--primary { background: var(--accent); color: #fff; }
.prb2d .prb2-btn--primary:hover { background: var(--accent-hover); }
.prb2d .prb2-btn--secondary { background: #fff; color: var(--accent-ink); border-color: var(--accent); }
.prb2d .prb2-btn--secondary:hover { background: var(--accent-soft); }
.prb2d .prb2-btn:disabled { opacity: .7; cursor: default; }
.prb2d .prb2-oos { font-size: 16px; line-height: 24px; color: #b3261e; }
.prb2d-pay { display: none; } /* payment is a labelled row with the other trust rows */
.prb2d-trust { margin-top: 16px !important; padding-top: 16px; border-top: 1px solid var(--hair); display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 4px 8px; font-size: 14px; line-height: 20px; }
.prb2d-trust dt { color: var(--ink3); }
.prb2d-trust dd { color: var(--ink); }
.prb2d-trust a { color: var(--ink); text-decoration: none; border-bottom: 1px dotted #9aa1ab; }
.prb2d-trust a:hover { border-bottom-style: solid; }
.prb2d-bulk { margin-top: 16px !important; font-size: 14px; line-height: 20px; color: var(--ink2); }
/* ---------- look inside: one framed band with a centred heading (the reviews-block look) ---------- */
.prb2d-look { margin-top: 48px; scroll-margin-top: 64px; }
.prb2d-look__title { font-family: var(--font-head); font-size: 24px; line-height: 32px; font-weight: 600; text-align: center; margin-bottom: 16px !important; }
.prb2d-look__card { display: flex; gap: 24px; align-items: flex-start; padding: 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); overflow-x: auto; }
.prb2d-look__card > :first-child { margin-left: auto; }
.prb2d-look__card > :last-child { margin-right: auto; }
.prb2d-look__video { flex: 0 1 560px; min-width: 320px; }
.prb2d-look__pages { display: flex; gap: 16px; flex: 0 0 auto; }
.prb2d-look__page { flex: 0 0 200px; }
.prb2d-look__page a { display: block; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; aspect-ratio: 3 / 4; cursor: zoom-in; transition: box-shadow .15s ease, border-color .15s ease; }
.prb2d-look__page a:hover { border-color: #9aa1ab; box-shadow: 0 2px 10px rgba(0, 0, 0, .10); }
.prb2d-look__page img { width: 100%; height: 100%; object-fit: cover; }
.prb2d-look__cap { margin-top: 8px !important; font-size: 14px; line-height: 20px; color: var(--ink2); text-align: center; }
.prb2d .prb2-video { position: relative; aspect-ratio: 16 / 9; background: #0f1114; border-radius: 8px; overflow: hidden; }
.prb2d .prb2-video__play { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.prb2d .prb2-video__play img { width: 100%; height: 100%; object-fit: cover; }
.prb2d .prb2-video__icon { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(0, 0, 0, .55); border: 2px solid #fff; transition: background-color .15s ease, transform .15s ease; }
.prb2d .prb2-video__icon::after { content: ""; position: absolute; left: 25px; top: 19px; border-style: solid; border-width: 12px 0 12px 19px; border-color: transparent transparent transparent #fff; }
.prb2d .prb2-video__play:hover .prb2-video__icon { background: rgba(0, 0, 0, .75); transform: scale(1.04); }
.prb2d .prb2-video__len { position: absolute; left: 12px; bottom: 12px; background: rgba(0, 0, 0, .62); color: #fff; font-size: 12px; line-height: 20px; padding: 0 8px; border-radius: 10px; }
.prb2d .prb2-video__el { width: 100%; height: 100%; display: block; background: #000; }
/* ---------- in-page navigation ---------- */
.prb2d-anchors { position: sticky; top: 0; z-index: 20; display: flex; gap: 24px; margin-top: 32px; height: 48px; align-items: center; background: #fff; border-bottom: 1px solid var(--line); }
.prb2d-anchors a { font-size: 14px; line-height: 46px; font-weight: 600; color: var(--ink2); text-decoration: none; border-bottom: 2px solid transparent; height: 48px; white-space: nowrap; }
.prb2d-anchors a:hover { color: var(--ink); }
.prb2d-anchors a.is-active { color: var(--ink); border-bottom-color: var(--accent); }
/* ---------- sections: every block inside a section shares one width ---------- */
.prb2d .prb2-sec { padding: 32px 0; border-top: 1px solid var(--line); scroll-margin-top: 56px; }
.prb2d-sections .prb2-sec:first-child { border-top: 0; }
.prb2d .prb2-sec > :not(.prb2-h2) { max-width: var(--measure); }
.prb2d .prb2-h2 { font-family: var(--font-head); font-size: 24px; line-height: 32px; font-weight: 600; margin-bottom: 16px !important; }
.prb2d .prb2-facts { list-style: none; }
.prb2d .prb2-facts li { position: relative; padding-left: 20px; font-size: 16px; line-height: 24px; }
.prb2d .prb2-facts li + li { margin-top: 8px; }
.prb2d .prb2-facts li::before { content: ""; position: absolute; left: 4px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--ink3); }
.prb2d .prb2-toc { list-style: none; font-size: 14px; line-height: 20px; border-top: 1px solid var(--hair); }
.prb2d .prb2-toc__row { display: flex; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--hair); }
.prb2d .prb2-toc__n { width: 24px; text-align: right; color: var(--ink3); flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.prb2d .prb2-toc__t { flex: 1 1 auto; }
.prb2d .prb2-toc__p { color: var(--ink3); flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.prb2d .prb2-toc__row.is-bold .prb2-toc__t { font-weight: 700; }
.prb2d .prb2-toc__row.is-back .prb2-toc__t { color: var(--ink2); font-style: italic; }
.prb2d .prb2-note { margin-top: 12px !important; font-size: 12px; line-height: 16px; color: var(--ink3); }
.prb2d .prb2-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.prb2d .prb2-stat { background: var(--soft); border-radius: 8px; padding: 12px 8px; text-align: center; }
.prb2d .prb2-stat b { display: block; font-size: 24px; line-height: 32px; font-weight: 600; }
.prb2d .prb2-stat span { display: block; font-size: 12px; line-height: 16px; color: var(--ink2); }
.prb2d .prb2-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 24px; }
.prb2d .prb2-table th { width: 36%; text-align: left; font-weight: 400; color: var(--ink3); padding: 10px 16px 9px 0; vertical-align: top; border-bottom: 1px solid var(--hair); }
.prb2d .prb2-table td { padding: 10px 0 9px; vertical-align: top; border-bottom: 1px solid var(--hair); }
.prb2d .prb2-table--map th { width: 62%; color: var(--ink); }
.prb2d .prb2-table__head th, .prb2d .prb2-table__head td { font-size: 12px; line-height: 16px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink3); }
.prb2d .prb2-muted { color: var(--ink3); font-weight: 400; }
.prb2d .prb2-right { text-align: right; white-space: nowrap; }
.prb2d .prb2-details summary { font-size: 18px; line-height: 24px; font-weight: 600; list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.prb2d .prb2-details summary::-webkit-details-marker, .prb2d .prb2-faq summary::-webkit-details-marker, .prb2d .prb2-zones summary::-webkit-details-marker { display: none; }
.prb2d .prb2-details summary::after, .prb2d .prb2-faq summary::after, .prb2d .prb2-zones summary::after { content: "+"; color: var(--ink3); font-weight: 400; flex: 0 0 auto; }
.prb2d .prb2-details[open] summary::after, .prb2d .prb2-faq[open] summary::after, .prb2d .prb2-zones[open] summary::after { content: "โ"; }
.prb2d .prb2-details .prb2-table { margin-top: 8px; }
.prb2d .prb2-para { font-size: 16px; line-height: 24px; }
.prb2d .prb2-para + .prb2-para, .prb2d .prb2-details + .prb2-para { margin-top: 12px !important; }
.prb2d .prb2-src { margin-top: 12px !important; font-size: 12px; line-height: 16px; color: var(--ink3); }
.prb2d .prb2-crumb { font-size: 14px; line-height: 20px; margin-bottom: 8px !important; }
.prb2d-delivery { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.prb2d .prb2-zones { border: 1px solid var(--line); border-radius: 8px; }
.prb2d .prb2-zones summary { position: relative; display: block; padding: 12px 40px 12px 16px; font-size: 16px; line-height: 24px; font-weight: 600; list-style: none; cursor: pointer; }
.prb2d .prb2-zones summary::after { position: absolute; right: 16px; top: 12px; }
.prb2d .prb2-zones__me { font-weight: 400; color: var(--ink2); }
.prb2d .prb2-table--zones { border-top: 1px solid var(--line); font-size: 14px; line-height: 20px; }
.prb2d .prb2-table--zones th, .prb2d .prb2-table--zones td { padding: 8px 16px; width: auto; }
.prb2d .prb2-table--zones tr:last-child td { border-bottom: 0; }
.prb2d .prb2-table--zones tr.is-me td { background: var(--me); font-weight: 600; }
.prb2d .prb2-rules { padding-left: 20px; font-size: 16px; line-height: 24px; }
.prb2d .prb2-rules li + li { margin-top: 8px; }
.prb2d .prb2-faq { border-bottom: 1px solid var(--hair); padding: 12px 0; }
.prb2d .prb2-faq summary { font-size: 16px; line-height: 24px; font-weight: 600; list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 12px; }
.prb2d .prb2-faq summary:hover, .prb2d .prb2-details summary:hover, .prb2d .prb2-zones summary:hover { color: #000; }
.prb2d .prb2-faq p { margin-top: 8px !important; font-size: 16px; line-height: 24px; color: var(--ink2); }
.prb2d .prb2-review { padding: 12px 0; border-bottom: 1px solid var(--hair); }
.prb2d .prb2-review__meta { font-size: 14px; line-height: 20px; color: var(--ink2); }
.prb2d .prb2-stars { color: #92400e; letter-spacing: 1px; }
.prb2d .prb2-review__text { margin-top: 4px; font-size: 16px; line-height: 24px; }
.prb2d .prb2-review__text p { margin: 0 0 8px !important; }
.prb2d .prb2-orders { margin-top: 12px !important; font-size: 14px; line-height: 20px; color: var(--ink2); }
/* commitments: only the tidied previous layout shows them */
/* related books: one row at the very bottom */
.prb2d-related { padding: 32px 0 0; border-top: 1px solid var(--line); }
.prb2d-related__title { font-family: var(--font-head); font-size: 24px; line-height: 32px; font-weight: 600; margin-bottom: 16px !important; }
.prb2d-related__row { display: grid; grid-template-columns: repeat(4, 180px); gap: 32px; }
.prb2d-related__card { display: block; color: var(--ink) !important; text-decoration: none !important; }
.prb2d-related__img { display: block; aspect-ratio: 3 / 4; background: var(--soft); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; transition: box-shadow .15s ease; }
.prb2d-related__card:hover .prb2d-related__img { box-shadow: 0 2px 10px rgba(0, 0, 0, .12); }
.prb2d-related__img img { width: 100%; height: 100%; object-fit: cover; }
.prb2d-related__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 8px; font-size: 14px; line-height: 20px; }
.prb2d-related__price { display: block; margin-top: 4px; font-size: 14px; line-height: 20px; font-weight: 700; }
/* ---------- sections as label | content ----------
Left: the heading and the short notes that belong with it (stat tiles, source line, category). Right: the blocks.
The fourth row is flexible, so a block that spans every row never pushes the notes away from the heading. */
.prb2d--a .prb2-sec { display: grid; grid-template-rows: auto auto auto 1fr; column-gap: 32px; align-items: start; }
.prb2d--a .prb2-sec > * { grid-column: 2; min-width: 0; }
.prb2d--a .prb2-sec > .prb2-h2 { grid-column: 1; grid-row: 1; margin-bottom: 0 !important; }
.prb2d--a .prb2-sec > :is(.prb2-stats, .prb2-note, .prb2-src, .prb2-crumb) { grid-column: 1; }
.prb2d--a .prb2-sec > .prb2-stats { margin: 16px 0 0; }
.prb2d--a .prb2-sec > :is(.prb2-note, .prb2-src, .prb2-crumb) { margin: 12px 0 0 !important; }
.prb2d--a .prb2-sec > :is(.prb2-toc, .prb2-details, .prb2-table) { grid-row: 1 / -1; }
/* the first line of the right column sits on the baseline of the heading */
.prb2d--a .prb2-sec > .prb2-h2 + :is(.prb2-facts, .prb2-para, .prb2-faq, .prb2-review) { margin-top: 6px !important; }
.prb2d--a .prb2-sec > .prb2-h2 + :is(.prb2-faq, .prb2-review) { padding-top: 0; }
.prb2d--a .prb2-sec > .prb2-table { margin-top: -3px; }
/* =====================================================================================
Variant a โ three zones: cover 368 or 440, text up to 560, buy card 320. The page is a two-column grid (content | buy card),
so the card follows the reader down the page; the hero and every section split the content
column on the same line: cover and headings on the left, title and blocks on the right.
===================================================================================== */
.prb2d--a { max-width: 1480px; display: grid; grid-template-columns: minmax(0, 1fr) 320px; column-gap: 32px; align-items: start; }
.prb2d--a > * { grid-column: 1 / -1; min-width: 0; }
.prb2d--a > .prb2d-crumb { grid-row: 1; }
.prb2d--a > .prb2d-hero { grid-column: 1; grid-row: 2; grid-template-columns: 368px minmax(0, 560px); column-gap: 32px; grid-template-areas: "gallery head" "gallery about"; grid-template-rows: auto 1fr; }
.prb2d--a .prb2d-gallery { position: sticky; top: 24px; }
.prb2d--a .prb2d-main img { max-height: max(360px, calc(100vh - 332px)); } /* leaves room for the links under the thumbnails on a 768px-high window */
.prb2d--a .prb2d-about { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hair); display: grid; gap: 16px; align-content: start; }
.prb2d--a > .prb2d-buy { grid-area: auto; grid-column: 2; grid-row: 2 / span 4; position: sticky; top: 24px; border: 1px solid var(--line); border-radius: 8px; padding: 24px; background: #fff; }
.prb2d--a > .prb2d-look { grid-column: 1; grid-row: 3; }
.prb2d--a > .prb2d-anchors { grid-column: 1; grid-row: 4; }
.prb2d--a > .prb2d-sections { grid-column: 1; grid-row: 5; }
.prb2d--a .prb2-sec { grid-template-columns: 368px minmax(0, 560px); }
.prb2d--a .prb2-sec > .prb2-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* The page grows with the window up to 1400px of content; the text column takes the extra width up to 560px (about 80 characters a line).
From 1500px the cover column grows to 440 and the gutters to 48: cover 440, text 544, buy card 320. */
@media (min-width: 1500px) {
.prb2d--a { column-gap: 48px; }
.prb2d--a > .prb2d-hero { grid-template-columns: 440px minmax(0, 560px); column-gap: 48px; }
.prb2d--a .prb2-sec { grid-template-columns: 440px minmax(0, 560px); column-gap: 48px; }
}
/* ---------- narrower desktop windows and tablets ---------- */
@media (max-width: 1199px) {
/* a: two columns, cover 40% and everything else beside it; the buy card moves under the head, before the facts, and stops being sticky */
.prb2d--a { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.prb2d--a > .prb2d-hero { display: contents; }
.prb2d--a .prb2d-gallery { grid-area: auto; grid-column: 1; grid-row: 2 / span 3; position: static; }
.prb2d--a .prb2d-head { grid-area: auto; grid-column: 2; grid-row: 2; }
.prb2d--a > .prb2d-buy { grid-column: 2; grid-row: 3; position: static; margin-top: 16px; }
.prb2d--a .prb2d-about { grid-area: auto; grid-column: 2; grid-row: 4; margin-top: 24px; padding-top: 0; border-top: 0; }
.prb2d--a .prb2d-cta { grid-template-columns: 112px minmax(0, 1.2fr) minmax(0, 1fr); }
.prb2d--a .prb2d-qtywrap { width: auto; }
.prb2d--a .prb2-qty { height: 48px; }
.prb2d--a > .prb2d-look, .prb2d--a > .prb2d-anchors, .prb2d--a > .prb2d-sections { grid-column: 1 / -1; grid-row: auto; }
.prb2d--a .prb2-sec { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.prb2d-related__row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 1023px) {
.prb2d { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 959px) {
.prb2d--a .prb2-sec { display: block; }
.prb2d--a .prb2-sec > .prb2-h2 { margin-bottom: 16px !important; }
.prb2d--a .prb2-sec > .prb2-h2 + * { margin-top: 0 !important; }
.prb2d--a .prb2-sec > .prb2-stats { margin: 0 0 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.prb2d--a .prb2-sec > .prb2-table { margin-top: 0; }
.prb2d-anchors { overflow-x: auto; }
}
@media (max-width: 639px) {
.prb2d { padding: 12px 16px 48px; }
.prb2d--a { display: block; }
.prb2d--a > .prb2d-hero { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "gallery" "about"; grid-template-rows: none; row-gap: 16px; }
.prb2d--a .prb2d-gallery { grid-area: gallery; grid-column: auto; grid-row: auto; }
.prb2d--a .prb2d-head { grid-area: head; grid-column: auto; grid-row: auto; }
.prb2d--a .prb2d-about { grid-area: about; grid-column: auto; grid-row: auto; }
.prb2d--a > .prb2d-buy { margin-top: 16px; }
.prb2d--a .prb2d-cta { grid-template-columns: minmax(0, 1fr); }
.prb2d .prb2d-qtywrap { width: 112px; }
.prb2d-related__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
.prb2d *, .prb2d *::before, .prb2d *::after { transition: none !important; scroll-behavior: auto !important; }
}
/* ---------- chat widget ----------
Its box stays as small as its bubble. After a visitor has dragged the bubble the theme writes left/top inline, and the
legacy product-page rules (windows up to 768px wide) keep right/bottom with !important; without a size the invisible box
stretched over the page and took the clicks. Same rule as in pdp-v2.css for the phone layout. */
body.prb-v2-desk .books-chat-widget { width: max-content !important; height: max-content !important; }
/* ---------- base version (2026-10-02): what a product without the extra fields shows ----------
Subtitle of a long title, the short description as one paragraph beside the cover, "About this book" (the existing
description, cleaned) as the first section. None of these elements exist on a product that has its own bullets. */
.prb2d-title__sub { display: block; margin-top: 4px; font-family: var(--font-body); font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: 0; color: var(--ink2); } /* 2026-10-06 owner: subtitle bold */
.prb2d--a .prb2d-lede--base { display: block; color: var(--ink); }
.prb2d .prb2-about p { font-size: 16px; line-height: 24px; }
.prb2d .prb2-about p + p, .prb2d .prb2-about ul + p, .prb2d .prb2-about p + ul { margin-top: 12px !important; }
.prb2d .prb2-about ul, .prb2d .prb2-about ol { padding-left: 20px; font-size: 16px; line-height: 24px; }
.prb2d .prb2-h3 { margin: 24px 0 8px !important; font-family: var(--font-head); font-size: 18px; line-height: 24px; font-weight: 600; }
.prb2d .prb2-about > .prb2-h3:first-child { margin-top: 0 !important; }
.prb2d .prb2-more > summary { display: none; } /* the whole text is open on the desktop layout */
.prb2d .prb2-more { margin-top: 24px; }
/* contents: heading of a part of the book (a line that starts with # in the contents field) */
.prb2d .prb2-toc__row.is-part { padding: 16px 0 4px; border-bottom: 1px solid var(--line); }
.prb2d .prb2-toc__row.is-part:first-child { padding-top: 8px; }
.prb2d .prb2-toc__row.is-part .prb2-toc__t { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink3); }
/* pictures far from a cover shape (box sets, kits, landscape formats, open spreads) are shown whole instead of cropped */
.prb2d-related__img.is-contain, .prb2d-look__page a.is-contain { background: #fff; }
.prb2d-related__img.is-contain img, .prb2d-look__page a.is-contain img { object-fit: contain; }
/* one picture and no video: the thumbnail row would only repeat the cover (the element stays for the lightbox) */
.prb2d-thumbs.is-single { display: none; }