/* M6-A product-page template (PDP top + utility body).
Extracted from the hardback rebuild 12 Aug 2026 — shared by all
product pages adopting the M6-A design. Page-scoped under .m6. */
/* M6-A: calculator-card configurator + spec sheet. Page-scoped. */
/* .nav is position:fixed at 68px tall (base.css) — clear it. */
.m6{font-family:var(--fb);color:var(--ink);padding-top:68px}
.m6 .wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.m6-topbar{border-bottom:1px solid rgba(0,0,0,.08);font-size:12px;color:var(--mute);padding:9px 0}
.m6-topbar .wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.m6-topbar b{color:var(--ink);font-weight:600}
.m6-topbar a{color:inherit;text-decoration:none}
.m6-topbar a:hover{color:var(--red)}
.m6-gchip{color:var(--red)!important;font-weight:700}
.m6-gchip:hover{text-decoration:underline}
/* PDP top */
.pdp{display:grid;grid-template-columns:1fr 1.1fr;gap:44px;padding:22px 0 40px}
.gal-main{border-radius:10px;overflow:hidden;margin-bottom:10px;background:#f0ede6}
.gal-main img{width:100%;height:340px;object-fit:cover;display:block}
.thumbs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px;margin-bottom:18px}
.thumbs img{width:100%;height:62px;object-fit:cover;border-radius:6px;display:block;cursor:pointer;opacity:.8;border:2px solid transparent;transition:opacity .12s}
.thumbs img.on{opacity:1;border-color:var(--red)}
/* spec sheet fills the gallery column so both columns end together */
.spec-sheet{border:1px solid #e2ddd2;border-radius:10px;overflow:hidden}
.spec-sheet-hd{padding:11px 18px;background:#faf8f3;border-bottom:1px solid #eee;font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#555}
.spec-row{display:flex;justify-content:space-between;gap:16px;padding:9px 18px;border-bottom:1px solid #f3f1ea;font-size:12.5px}
.spec-row:last-child{border-bottom:none}
.spec-row .k{color:var(--mute)}
.spec-row .v{font-weight:600;text-align:right}
.spec-row .v a{color:var(--red);text-decoration:none}
.spec-row .v a:hover{text-decoration:underline}
.badges{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.badge{font-size:11px;color:#555;background:#faf8f3;border:1px solid #e8e4d8;border-radius:20px;padding:6px 12px;text-decoration:none}
a.badge:hover{border-color:rgba(167,1,42,.4);color:var(--red)}
.gal-note{font-size:11.5px;color:var(--mute);margin-top:10px;line-height:1.55}
/* ---- "From file to finished book" + trust marks (includes/m6-file-journey.php)
Fills the dead space under the left column, which measured 140px at worst
and 439px at best across the 19 M6 pages; this block is ~202px. Named ffb-
and gtrust- rather than pf-, which already belongs to step 3 (.pf-sum,
.pf-files, .pf-extra) and would have read as the same component. ---- */
.ffb{border:1px solid #e2ddd2;border-radius:10px;margin-top:14px;overflow:hidden;
background:#fff;font-family:var(--fb)}
.ffb-hd{padding:11px 18px;background:#faf8f3;border-bottom:1px solid #eee;
font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#555}
.ffb-steps{display:flex;align-items:center;justify-content:space-between;
list-style:none;margin:0;padding:15px 18px}
/* each step is a column so the numeral and its label stay centred on each
other; the connector is drawn behind, hence the z-index pair */
.ffb-steps li{display:flex;flex-direction:column;align-items:center;gap:7px;position:relative;flex:1}
.ffb-steps li+li::before{content:"";position:absolute;left:-50%;top:12px;width:100%;
border-top:1px dashed #ddd8cc;z-index:0}
.ffb-steps .n{position:relative;z-index:1;width:25px;height:25px;border-radius:50%;
background:var(--red);color:#fff;font-size:11.5px;font-weight:700;
display:flex;align-items:center;justify-content:center}
.ffb-steps .t{font-size:11.5px;color:#555;font-weight:600;text-align:center}
.gtrust{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.gtrust .gt{display:flex;gap:9px;align-items:center;border:1px solid #e8e4d8;
border-radius:9px;padding:11px 12px;background:#faf8f3}
.gtrust .ic{flex:0 0 19px;height:19px;color:var(--red)}
.gtrust .ic svg{width:100%;height:100%;display:block}
.gtrust b{display:block;font-size:11.5px;font-weight:700;color:var(--ink);line-height:1.3}
.gtrust i{font-style:normal;font-size:10.5px;color:var(--mute)}
/* Under ~560px the three trust cards squeeze their labels onto three lines
each. One column reads better than three cramped ones, and the block is
below the fold on a phone anyway. */
@media(max-width:560px){
.gtrust{grid-template-columns:1fr;gap:8px}
.ffb-steps{padding:14px 10px}
.ffb-steps .t{font-size:10.5px}
}
.gal-note a{color:var(--red);font-weight:600;text-decoration:none}
/* buy column */
.buy h1{font-family:var(--fd);font-size:38px;font-weight:500;letter-spacing:-.8px;line-height:1.05;margin:0 0 6px}
.rating{font-size:13px;color:var(--mute);margin-bottom:10px}
.rating b{color:var(--red);letter-spacing:1.5px}
.rating a{color:var(--ink)}
/* The from-line under the rating: the table's two end figures, server
rendered, so the page carries a price in its first screen on every
width. Bold figures, tabular so "£25.18" and "£3.49" align if wrapped. */
.fromline{font-size:13px;line-height:1.55;color:var(--mute);margin:0 0 16px}
.fromline b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.from{font-size:14px;margin-bottom:14px}
.from b{font-size:24px;font-weight:700;letter-spacing:-.5px}
.opt{margin-bottom:14px}
.opt-hd{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#555;margin-bottom:8px;display:flex;justify-content:space-between}
.opt-hd small{font-weight:400;text-transform:none;letter-spacing:0;color:var(--mute)}
/* rich option cards, full-calculator style */
.cards{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.cards.c6{grid-template-columns:repeat(6,1fr)} /* five named sizes + Custom */
.cards.c4{grid-template-columns:repeat(4,1fr)}
.cards.c2{grid-template-columns:repeat(2,1fr)}
.cards.c1{grid-template-columns:1fr}
.ocard{border:1px solid #d5d2ca;border-radius:8px;background:#fff;padding:10px 11px;cursor:pointer;position:relative;text-align:left;font-family:var(--fb);color:var(--ink)}
.ocard.on{border:1.5px solid var(--red);background:rgba(167,1,42,.04)}
.ocard.lock{border-style:dashed;cursor:default}
.ocard .nm{font-size:12.5px;font-weight:700}
.ocard .mm{font-size:10.5px;color:var(--mute);margin-top:1px}
.ocard .use{font-size:10px;color:#777;margin-top:4px;line-height:1.4}
.ocard .pop{font-size:9.5px;color:#2a7a4a;font-weight:700;margin-top:4px}
.ocard .oprice{font-size:10px;font-weight:700;color:var(--ink);margin-top:4px}
/* paper cards with shade dots */
/* Swatch tab (docs/60 §3.8). The dot became a full-height block down the
left edge: a 22px near-white circle inside a grey ring showed no paper
at all. Card padding moves onto the body so the tab can reach the edges. */
.pcard{display:flex;gap:0;align-items:stretch;padding:0;overflow:hidden}
.pcard .dot{flex:0 0 58px;width:auto;height:auto;border-radius:0;border:none;
border-right:1px solid rgba(0,0,0,.10);margin:0;position:relative}
/* a soft rake across the tab so it reads as a sheet, not a flat fill */
.pcard .dot::before{content:"";position:absolute;inset:0;
background:linear-gradient(105deg,rgba(0,0,0,.055),transparent 62%)}
/* shade named under the tab. Redundant beside "Bookwove cream", but it is
the only place Enso and Recycled say what colour they actually are. */
.pcard .dot::after{position:absolute;left:0;right:0;bottom:5px;text-align:center;
font-size:8.5px;letter-spacing:1.1px;text-transform:uppercase;font-weight:700;
color:rgba(26,23,18,.42);content:""}
.pcard[data-v="70enso"] .dot::after,
.pcard[data-v="80bwcream"] .dot::after,
.pcard[data-v="100bwcream"] .dot::after,
.pcard[data-v="120bwcream"] .dot::after{content:"Cream"}
.pcard[data-v="80opaque"] .dot::after,
.pcard[data-v="100opaque"] .dot::after,
.pcard[data-v="80bwwhite"] .dot::after,
.pcard[data-v="100bwwhite"] .dot::after,
.pcard[data-v="120bwwhite"] .dot::after,
.pcard[data-v="80bwpremium"] .dot::after{content:"White"}
.pcard[data-v="100recycled"] .dot::after{content:"Natural"}
/* every coated stock is a white sheet; the finish is in the card name */
.pcard .dot.matt::after{content:"Coated"}
.pcard > span + span{flex:1;padding:10px 11px 11px;min-width:0}
/* Two columns so each paper family sits as a row: the same sheet in two
weights belongs side by side. No tray; every other option group on the
panel sits on white and a boxed paper grid read as a mistake. */
.cards.c3.pgrid{grid-template-columns:repeat(2,1fr)}
/* At two columns on a phone a 58px tab eats 40% of the card and squeezes the
description into 83px. Narrow it and drop the word; the card name already
carries the shade for every stock except Enso. */
@media(max-width:560px){
.pcard .dot{flex-basis:38px}
.pcard .dot::after{content:""!important}
}
/* Shade values match the flagship paper section (docs/60 §3.6), which sets
them from each stock's published brightness/whiteness rather than by eye.
The generic classes below are fallbacks; the per-stock rules that follow
are what actually render, because eight uncoated papers share four classes
and Soporset (CIE 161) is nothing like Munken Premium White (CIE 116). */
.dot.white{background:#fbfbf6}
.dot.cream{background:#faf5e6}
.dot.opq{background:#fcfdff}
.dot.matt{background:linear-gradient(135deg,#fdfdfe 52%,#eef1f6)}
/* per-stock, keyed off the card's data-v */
.pcard[data-v="70enso"] .dot{background:#f2ecd8}
.pcard[data-v="80bwcream"] .dot,
.pcard[data-v="100bwcream"] .dot,
.pcard[data-v="120bwcream"] .dot{background:#faf5e6}
.pcard[data-v="80bwwhite"] .dot,
.pcard[data-v="100bwwhite"] .dot,
.pcard[data-v="120bwwhite"] .dot,
.pcard[data-v="80bwpremium"] .dot{background:#fbfbf6}
.pcard[data-v="80opaque"] .dot,
.pcard[data-v="100opaque"] .dot{background:#fcfdff}
/* recycled is visibly greyer than the bright Soporset white it used to
share a class with. Value not taken from a spec sheet, see docs/60. */
.pcard[data-v="100recycled"] .dot{background:#f6f4ee}
.pcard .gsm{font-size:15px;font-weight:700;line-height:1}
.pcard .gsm small{font-size:9px;font-weight:600;color:var(--mute)}
.pcard .pnm{font-size:11px;font-weight:600;margin-top:1px}
.pcard .pspec{font-size:9.5px;color:var(--mute)}
.pcard .pdesc{font-size:10px;color:#777;margin-top:3px;line-height:1.4}
.qtyrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.stepper{display:inline-flex;border:1px solid #d5d2ca;border-radius:6px;overflow:hidden}
.stepper button{width:34px;height:36px;border:none;background:#fafaf8;font-size:16px;cursor:pointer;font-family:var(--fb);color:var(--ink)}
.stepper button:hover{background:#f0ede6}
.stepper input{width:64px;height:36px;border:none;border-left:1px solid #eee;border-right:1px solid #eee;text-align:center;font-size:13.5px;font-family:var(--fb);font-variant-numeric:tabular-nums}
.stepper input:focus{outline:2px solid rgba(167,1,42,.3);outline-offset:-2px}
.qtylbl{font-size:12px;color:var(--mute)}
.pricebox{background:#fafaf8;border:1px solid #e8e5de;border-radius:10px;padding:14px 16px;margin:14px 0}
.pricebox .line{display:flex;justify-content:space-between;gap:14px;font-size:12.5px;color:#444;padding:2px 0}
.pricebox .line.big{font-size:14px;font-weight:700;color:var(--ink);border-top:1px solid #e8e5de;margin-top:7px;padding-top:9px}
.pricebox .line.big span:last-child{font-size:21px;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.pricebox .inc{font-size:10.5px;color:var(--mute);text-align:right;margin-top:3px}
/* Books first, carriage under it (Jamie, 17 Aug). The .big line used to
carry the WHOLE job with "includes UK delivery" in 10px underneath,
so the per-copy figure and the headline never reconciled: 100 copies
at £5.19 read as a £578.54 job because £60 of carriage was hidden
inside it. Books are the hero now, and anything added on top gets its
own row in the tinted block so it cannot hide again.
.line.big is kept: other surfaces still use it. */
.pricebox .hero{border-top:1px solid #e8e5de;margin-top:8px;padding-top:11px}
.pricebox .hero-lbl{font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--mute);font-weight:600}
.pricebox .hero-fig{font-size:30px;font-weight:700;color:var(--ink);letter-spacing:-1px;line-height:1.05;margin-top:4px;font-variant-numeric:tabular-nums}
.pricebox .hero-per{font-size:13px;color:#555;margin-top:3px;font-variant-numeric:tabular-nums}
.pricebox .addons{background:#f2f0ea;border-radius:7px;padding:9px 11px;margin-top:12px;display:flex;flex-direction:column;gap:7px}
.pricebox .addon{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
/* An author-level display beats the UA sheet's [hidden], so without this
the proof row keeps an empty 32px strip in the block when no printed
proof is selected, which is every default page load. */
.pricebox .addon[hidden]{display:none}
.pricebox .addon .lft{font-size:12px;color:#444;line-height:1.4}
.pricebox .addon .sub{display:block;font-size:10.5px;color:var(--mute);margin-top:1px}
.pricebox .addon .amt{font-size:13.5px;font-weight:600;color:#333;font-variant-numeric:tabular-nums;white-space:nowrap}
.pricebox .line.total{font-size:12.5px;font-weight:700;color:var(--ink);border-top:1px solid #e8e5de;margin-top:11px;padding-top:9px}
.pricebox .line.total span:last-child{font-size:16px;font-variant-numeric:tabular-nums}
/* Why a price cannot be shown, in the space the price would have used.
It used to be crammed into the total slot, so "minimum 10 copies"
rendered at 21px in the position a price had just been. */
.pricebox .pb-msg{font-size:13px;color:#555;border-top:1px solid #e8e5de;margin-top:8px;padding-top:10px}
.m6-btn{display:block;background:var(--red);color:#fff;text-align:center;font-weight:600;font-size:14px;padding:13px;border-radius:7px;text-decoration:none;margin-bottom:8px}
.m6-btn:hover{background:#8d0124}
.m6-btn.ghost{background:#fff;color:var(--red);border:1.5px solid var(--red)}
.m6-btn.ghost:hover{background:rgba(167,1,42,.04)}
.m6-btn.quiet{background:#fff;color:var(--ink);border:1px solid #d5d2ca;font-size:13px;padding:11px}
.m6-btn.quiet:hover{background:#faf9f6;border-color:#b9b4a8}
.assure{font-size:11px;color:var(--mute);text-align:center}
.assure a{color:var(--red);font-weight:600;text-decoration:none}
/* prices-from band */
.pband{background:var(--paper);padding:34px 0}
.pband-in{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.pband-copy{font-size:13.5px;color:#3a3a3a;line-height:1.7}
.pband-copy h2{font-size:22px;font-weight:700;margin:0 0 10px;font-family:var(--fb)}
.pband-copy p{margin:0 0 10px}
.pband-copy a{color:var(--red);font-weight:600;text-decoration:none}
.m6-card{border:1px solid #ddd;border-radius:8px;background:#fff;overflow:hidden;box-shadow:0 1px 5px rgba(0,0,0,.04)}
.m6-card-hd{padding:13px 20px;border-bottom:1px solid #eee;background:#fafafa;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#555}
.ptable{width:100%;border-collapse:collapse;font-size:13.5px}
.ptable td{padding:9px 20px;border-bottom:1px solid #f1f1f1}
.ptable td:last-child{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.ptable tr.hl td{background:rgba(167,1,42,.04);color:var(--red)}
/* Two price columns (hardback: sewn beside glued). Both numeric cells right
aligned and tabular; the last-child rule above would otherwise bold only
the glued column. The header row is the only th in a .ptable. */
.ptable td.num{text-align:right;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.ptable.ptable-2 td.num:last-child{color:#555;font-weight:500}
.ptable-hd th{padding:8px 20px 7px;font-size:10.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#777;text-align:right;background:#fafafa;border-bottom:1px solid #eee;vertical-align:bottom}
.ptable-hd th:first-child{text-align:left}
.ptable-hd th small{display:block;font-size:9.5px;font-weight:500;letter-spacing:.2px;text-transform:none;color:#999;margin-top:1px}
@media(max-width:560px){.ptable td,.ptable-hd th{padding-left:12px;padding-right:12px}}
.m6-card-note{font-size:11.5px;color:var(--mute);padding:10px 20px;line-height:1.5}
/* utility body */
.body-secs{padding:34px 0 6px}
.secs{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:34px}
.sec{border:1px solid #e5e5e5;border-radius:8px;overflow:hidden;text-decoration:none;color:inherit;display:block;transition:border-color .15s}
.sec:hover{border-color:rgba(167,1,42,.4)}
.sec img{width:100%;height:110px;object-fit:cover;display:block}
.sec > div{padding:13px 15px}
.sec h3{font-size:14.5px;margin:0 0 5px;font-family:var(--fb)}
.sec p{font-size:12px;color:var(--mute);line-height:1.55;margin:0}
/* Spec lists inside a .sec card (the M6 vertical pages use .sec for the
specification columns; hardback/paperback only ever put a in one).
base.css resets ul padding to 0, so with list-style-position:outside the
markers hang into the card's 15px padding and sit on the border. Indent
past it, and match .sec p's scale — the list was otherwise inheriting
16px/25.6px body text next to 12px sibling copy. */
/* Branded constraint prompt, sits under the page steppers. Used where a
binding physically cannot take the spec — saddle-stitch needing a
multiple of 4 pages. Deliberately inline and non-modal: it corrects
while you type instead of interrupting the configurator. */
.m6-pop{
margin-top:10px;padding:9px 12px;border-radius:6px;
background:rgba(167,1,42,.06);border:1px solid rgba(167,1,42,.28);
border-left:3px solid var(--red);
font-family:var(--fb);font-size:12px;line-height:1.5;color:var(--ink);
display:flex;gap:8px;align-items:flex-start;
animation:m6PopIn .18s ease-out
}
.m6-pop[hidden]{display:none}
.m6-pop .m6-pop-i{color:var(--red);font-weight:700;flex:0 0 auto;line-height:1.35}
.m6-pop b{color:var(--red)}
.m6-pop button{
background:var(--red);color:#fff;border:0;border-radius:4px;
padding:3px 9px;font-family:var(--fb);font-size:11.5px;font-weight:600;
cursor:pointer;margin-left:auto;flex:0 0 auto;white-space:nowrap
}
.m6-pop button:hover{background:#8a0122}
@keyframes m6PopIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.sec ul{margin:0;padding-left:15px;font-size:12px;color:var(--mute);line-height:1.55}
.sec li{margin:0 0 6px;padding-left:2px}
.sec li:last-child{margin-bottom:0}
.sec li strong,.sec li b{color:var(--ink);font-weight:600}
.sec li a{color:var(--red);text-decoration:none;font-weight:600}
.sec .go{font-size:11px;color:var(--red);font-weight:600;margin-top:6px;display:block}
.strip{background:var(--paper);border-radius:8px;padding:20px 24px;display:flex;gap:26px;justify-content:space-between;margin-bottom:34px;flex-wrap:wrap}
.step{flex:1;min-width:150px;font-size:12.5px;color:#3a3a3a;line-height:1.55}
.step b{display:block;color:var(--red);font-size:11px;letter-spacing:1px;margin-bottom:4px}
.step a{color:var(--red);font-weight:600;text-decoration:none}
h2.rule{font-size:19px;font-weight:700;margin:0 0 14px;font-family:var(--fb)}
.rev{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:34px}
.rev > div{border:1px solid #e5e5e5;border-radius:8px;padding:15px 17px;font-size:12.5px;color:#3a3a3a;line-height:1.6}
.rev b{display:block;margin-top:8px;color:var(--ink)}
.faq-cols{columns:2;gap:22px;margin-bottom:34px;font-size:13px}
.faq-cols > div{break-inside:avoid;border-bottom:1px solid #eee;padding:10px 2px}
.faq-cols b{display:block;margin-bottom:3px}
.faq-cols span{color:var(--mute);line-height:1.5;font-size:12.5px;display:block}
.prods{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:44px}
.prodc{border:1px solid #e5e5e5;border-radius:8px;overflow:hidden;text-decoration:none;color:inherit;transition:border-color .15s;display:block}
.prodc:hover{border-color:rgba(167,1,42,.4)}
.prodc img{width:100%;height:105px;object-fit:cover;display:block}
.prodc > div{padding:11px 14px;font-size:13.5px;font-weight:600}
.prodc span{display:block;font-size:11.5px;color:var(--mute);font-weight:400;margin-top:3px}
@media(max-width:1024px){.prods{grid-template-columns:repeat(3,1fr)}}
@media(max-width:920px){
/* Phone order (docs/62 §4 and P1-2). Measured 19 Aug at 375x812: the H1
sat 1,236px down behind the gallery and a 490px spec sheet of defaults,
and Add to cart 4,561px down. Wanted: H1 + rating + from-line, then the
gallery, then steps 1 to 3 with nothing between them, then the spec
sheet, guide note, file journey and trust marks, which are reference
rather than decision.
Mechanism: display:contents on .pdp, .gal and .buy promotes every leaf
block to a grid item of .wrap.wide, so `order` can cross the old column
boundaries AND reach .pdp-foot, which sits outside .pdp in the markup.
Desktop (>920px) is untouched: none of these rules apply there.
.gal-note is scoped with the child combinator because .pf-extra inside
.pdp-foot carries its own gal-note ("Also available"), which must stay
where its flex row puts it. */
.m6 .wrap.wide{display:grid;grid-template-columns:minmax(0,1fr)}
.pdp,.gal,.buy{display:contents}
.buy-hd{order:1;padding-top:18px}
.gal > .gal-main{order:2}
.gal > .thumbs{order:3}
.buy > .grp{order:4}
.buy > .grp.first{margin-top:2px}
.pdp-foot{order:5}
.gal > .spec-sheet{order:6;margin-top:26px}
.gal > .gal-note{order:7}
.gal > .ffb{order:8}
.gal > .gtrust{order:9}
.cards,.cards.c4,.cards.c6{grid-template-columns:repeat(2,1fr)}
.pband-in{grid-template-columns:1fr}
.secs,.rev,.prods{grid-template-columns:1fr 1fr}
.faq-cols{columns:1}
}
@media(max-width:600px){.secs,.rev,.prods{grid-template-columns:1fr}}
/* ---- Closing suite: how-it-works, trade badges, more-from, CTA band ---- */
.m6-hiw{padding:44px 0 40px;border-top:1px solid #eee}
.m6-hiw .eyebrow{text-align:center;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--red);margin-bottom:10px}
.m6-hiw h2{font-family:var(--fd);font-size:34px;font-weight:400;letter-spacing:-.6px;text-align:center;margin:0 0 34px}
.m6-hiw h2 em{font-style:italic;color:var(--red-lt)}
.m6-hiw-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:0;position:relative}
.m6-hiw-strip::before{content:'';position:absolute;top:22px;left:8%;right:8%;height:1px;background:rgba(167,1,42,.25)}
.m6-hiw-step{position:relative;text-align:center;padding:0 12px}
.m6-hiw-num{width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid rgba(167,1,42,.45);color:var(--red);font-family:var(--fd);font-size:17px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;position:relative}
.m6-hiw-step h3{font-family:var(--fb);font-size:13.5px;font-weight:700;margin:0 0 7px}
.m6-hiw-step p{font-family:var(--fb);font-size:12px;color:var(--mute);line-height:1.6;margin:0}
.m6-trust{background:var(--paper);padding:30px 0;text-align:center}
.m6-trust-lbl{font-size:11px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:var(--mute);margin-bottom:20px}
.m6-trust-badges{display:flex;gap:44px;justify-content:center;align-items:center;flex-wrap:wrap}
.m6-trust-badges img{height:56px;width:auto;opacity:.8;filter:grayscale(100%)}
.m6-trust-badges a:hover img{opacity:1;filter:none}
.m6-more{padding:38px 0 44px}
.m6-more-lbl{text-align:center;font-size:11px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--red);margin-bottom:22px}
.m6-more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.m6-more-card{background:#fff;border:1px solid #e5e5e5;border-radius:8px;padding:22px 24px;text-decoration:none;color:inherit;transition:border-color .15s;display:block}
.m6-more-card:hover{border-color:rgba(167,1,42,.4)}
.m6-more-card h3{font-family:var(--fd);font-size:20px;font-weight:500;letter-spacing:-.2px;margin:0 0 8px}
.m6-more-card p{font-family:var(--fb);font-size:13px;color:var(--mute);line-height:1.6;margin:0}
.m6-cta{background:var(--ink);color:#fff;padding:56px 0;text-align:center}
.m6-cta h2{font-family:var(--fd);font-size:40px;font-weight:400;letter-spacing:-.8px;margin:0 0 12px}
.m6-cta h2 em{font-style:italic;color:var(--red-lt)}
.m6-cta p{font-family:var(--fb);font-size:14.5px;color:rgba(255,255,255,.55);line-height:1.7;max-width:520px;margin:0 auto 26px}
.m6-cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.m6-cta-actions .m6-btn{display:inline-block;margin:0;padding:13px 26px}
.m6-cta-actions .m6-btn.ghost{background:none;color:#fff;border:1.5px solid rgba(255,255,255,.6)}
.m6-cta-actions .m6-btn.ghost:hover{border-color:#fff;background:rgba(255,255,255,.06)}
@media(max-width:920px){.m6-hiw-strip{grid-template-columns:repeat(2,1fr);gap:22px 0}.m6-hiw-strip::before{display:none}.m6-more-grid{grid-template-columns:1fr}}
/* ---- Rotating 5-star review banner (under the topbar) ---- */
.m6-ticker{background:var(--paper);border-bottom:1px solid rgba(0,0,0,.06);overflow:hidden}
.m6-ticker .wrap{position:relative;height:44px}
.m6-ticker-slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;font-family:var(--fb);font-size:12.5px;color:#3a3a3a;opacity:0;transition:opacity .6s ease;pointer-events:none;text-align:center;padding:0 10px}
.m6-ticker-slide.on{opacity:1;pointer-events:auto}
.m6-ticker-slide .stars{color:var(--red);letter-spacing:2px;font-size:11px;flex-shrink:0}
.m6-ticker-slide .quote{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:640px}
.m6-ticker-slide .who{color:var(--mute);font-size:11.5px;flex-shrink:0;white-space:nowrap}
.m6-ticker-slide a{color:inherit;text-decoration:none}
@media(max-width:640px){.m6-ticker-slide .who{display:none}}
/* gallery crossfade for the slideshow */
.gal-main img,.gal-main video{transition:opacity .45s ease}
.gal-main.fading img,.gal-main.fading video{opacity:0}
.gal-main video{width:100%;height:470px;object-fit:cover;display:block;background:#111}
.thumb-v{position:relative;padding:0;border:none;background:none;cursor:pointer;display:block}
.thumb-v .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:17px;text-shadow:0 1px 6px rgba(0,0,0,.65);pointer-events:none}
/* ---- Free tools band (the setup-tools moat) ---- */
.m6-tools{background:var(--ink);padding:40px 0}
.m6-tools-hd{text-align:center;margin-bottom:20px}
.m6-tools-hd h2{font-size:20px;font-weight:700;margin:0 0 6px;font-family:var(--fb);color:#fff}
.m6-tools-hd p{font-size:13px;color:rgba(255,255,255,.55);margin:0}
.m6-tools-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.m6-tool{background:#fff;border:1px solid #e5e5e5;border-radius:8px;padding:18px 20px;text-decoration:none;color:inherit;transition:border-color .15s;display:block}
.m6-tool:hover{border-color:rgba(167,1,42,.4)}
.m6-tool .tag{font-size:9.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--red);margin-bottom:7px}
.m6-tool h3{font-family:var(--fb);font-size:14.5px;font-weight:700;margin:0 0 6px}
.m6-tool p{font-family:var(--fb);font-size:12px;color:var(--mute);line-height:1.6;margin:0}
.m6-tools-foot{text-align:center;font-size:12.5px;color:rgba(255,255,255,.55);margin-top:18px}
.m6-tools-foot a{color:#fff;font-weight:600;text-decoration:none}
.m6-tools-foot a:hover{text-decoration:underline}
@media(max-width:920px){.m6-tools-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.m6-tools-grid{grid-template-columns:1fr}}
/* ---- Customer showcase band (includes/m6-showcase.php) ----
Mockup D, 19 Aug 2026: the wall (6-col mosaic, two 2x2 feature tiles),
a row of author portraits, four Google review cards. White surface so
the photographs sit on the white they were shot on; red stays accent.
Namespace shw-. */
.shw{background:#fff;padding:52px 0 48px;border-top:1px solid rgba(0,0,0,.05)}
.shw-hd{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;margin-bottom:26px}
.shw-hd h2{font-family:var(--fd);font-size:42px;font-weight:400;letter-spacing:-.9px;line-height:1.04;margin:0 0 10px;color:var(--ink)}
.shw-hd h2 em{font-style:italic;color:var(--red-lt)}
.shw-hd p{font-family:var(--fb);font-size:14px;color:#555;line-height:1.65;margin:0;max-width:640px}
.shw-hd p b{color:var(--ink);font-weight:600}
.shw .band-eyebrow{margin-bottom:8px}
.shw-lock{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-family:var(--fb);
border:1px solid #e5e5e5;border-radius:10px;padding:12px 16px;background:#fff;white-space:nowrap;flex-shrink:0}
.shw-lock:hover{border-color:rgba(167,1,42,.4)}
.shw-lock .shw-g{width:26px;height:26px;flex-shrink:0}
.shw-lock .n{font-size:30px;font-weight:700;letter-spacing:-1px;line-height:1}
.shw-lock .st{color:var(--red);letter-spacing:2px;font-size:13px}
.shw-lock .c{display:flex;flex-direction:column;line-height:1.25;margin-left:2px}
.shw-lock .c b{font-size:13px;font-weight:700}
.shw-lock .c i{font-style:normal;font-size:11px;color:var(--mute)}
.shw-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:6px}
.shw-bk{margin:0;display:flex;flex-direction:column;gap:7px;min-width:0}
.shw-bk picture{display:block;aspect-ratio:1/1;background:#f7f7f7;border-radius:8px;overflow:hidden;border:1px solid #ececec}
.shw-bk img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.shw-bk:hover img{transform:scale(1.03)}
.shw-bk figcaption{font-family:var(--fb);font-size:11.5px;line-height:1.35;color:var(--mute)}
.shw-bk figcaption b{display:block;color:var(--ink);font-weight:600;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shw-bk figcaption span{display:block;font-size:11px;color:#666}
.shw-bk figcaption i{font-style:normal;display:block;font-size:11px}
.shw-grid .shw-bk.big{grid-column:span 2;grid-row:span 2;display:grid;grid-template-rows:1fr auto}
.shw-grid .shw-bk.big picture{aspect-ratio:auto;height:100%;min-height:0}
.shw-grid .shw-bk.big figcaption{min-height:50px}
.shw-rowhd{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-top:30px;margin-bottom:12px;font-family:var(--fb)}
.shw-rowhd h3{font-size:15px;font-weight:700;margin:0;color:var(--ink)}
.shw-rowhd a{font-size:12.5px;color:var(--red);font-weight:600;text-decoration:none}
.shw-rowhd a:hover{text-decoration:underline}
.shw-people{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.shw-ps{margin:0;display:flex;flex-direction:column;gap:8px;min-width:0}
.shw-ps picture{display:block;aspect-ratio:1/1;border-radius:8px;overflow:hidden;background:#f1f1f1;border:1px solid #ececec}
.shw-ps img{width:100%;height:100%;object-fit:cover;display:block}
.shw-ps figcaption b{display:block;font-family:var(--fd);font-size:17px;font-weight:500;letter-spacing:-.2px;color:var(--ink);line-height:1.2}
.shw-ps figcaption i{display:block;font-family:var(--fb);font-size:12px;color:#666;font-style:italic;margin-top:2px}
/* the faces rotation: spares render hidden, one tile crossfades at a time;
min-height on the caption keeps the row from reflowing when a one-line
title swaps with a two-line one */
.shw-ps{transition:opacity .45s ease}
.shw-ps.off{display:none}
.shw-ps.fading{opacity:0}
.shw-people .shw-ps figcaption{min-height:46px}
.shw-revs{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.shw-rv{border:1px solid #e5e5e5;border-radius:8px;padding:16px 18px 15px;background:#fff;font-family:var(--fb);display:flex;flex-direction:column;gap:8px;min-width:0}
.shw-rv header{display:flex;align-items:center;gap:10px}
.shw-rv header div{display:flex;flex-direction:column;line-height:1.2;min-width:0;flex:1}
.shw-rv header b{font-size:13px;font-weight:700;color:var(--ink)}
.shw-rv header span{font-size:11px;color:var(--mute);margin-top:2px}
.shw-rv header .shw-g{width:16px;height:16px;flex-shrink:0;opacity:.9}
.shw-av{position:relative;width:34px;height:34px;border-radius:50%;flex-shrink:0;background:#6b6b6b;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;overflow:hidden}
.shw-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.shw-stars{color:var(--red);letter-spacing:2px;font-size:12px}
.shw-rv p{font-size:12.5px;line-height:1.6;color:#3a3a3a;margin:0}
.shw-rv p.clamp{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.shw-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:22px;padding-top:18px;border-top:1px solid #eee;font-family:var(--fb);font-size:12.5px;color:var(--mute);flex-wrap:wrap}
.shw-foot a{color:var(--red);font-weight:600;text-decoration:none}
.shw-foot a:hover{text-decoration:underline}
.shw-btn{display:inline-block;border:1.5px solid var(--red);border-radius:7px;padding:9px 16px;color:var(--red);font-weight:600;font-family:var(--fb);font-size:13px;text-decoration:none}
.shw-btn:hover{background:var(--red);color:#fff;text-decoration:none}
@media(max-width:920px){
.shw{padding:40px 0 36px}
.shw-hd{flex-direction:column;align-items:flex-start}
.shw-hd h2{font-size:32px}
.shw-lock{white-space:normal;flex-wrap:wrap;max-width:100%}
.shw-lock .c{flex-basis:100%;margin-left:0}
.shw-grid{grid-template-columns:repeat(3,1fr);gap:10px}
.shw-people{grid-template-columns:repeat(3,1fr);gap:10px}
.shw-revs{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
.shw-grid{grid-template-columns:repeat(2,1fr)}
.shw-people{grid-template-columns:repeat(2,1fr)}
.shw-revs{grid-template-columns:1fr}
}
/* ---- Turnaround selling point under the pricebox ---- */
.speednote{font-family:var(--fb);font-size:12px;line-height:1.6;color:#3a3a3a;background:#f7f7f7;border:1px solid #e4e4e4;border-radius:7px;padding:9px 13px;margin:-6px 0 12px}
.speednote b{color:#2a7a4a}
/* ---- Section bands + eyebrow kickers (colour separation) ---- */
.band{padding:34px 0}
.band.tint{background:var(--paper)}
.band.grey{background:var(--paper)}
.band .secs,.band .rev,.band .faq-cols,.band .prods{margin-bottom:0}
.band-eyebrow{display:block;font-size:10.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--red);margin-bottom:6px}
.m6-hiw{background:#fff;border-top:none;padding:40px 0}
.m6-tools-hd .band-eyebrow{text-align:center;color:var(--red-lt)}
/* ---- Configurator v2: groups, extras chips, qty pills ---- */
.grp{border-top:2px solid #f0f0f0;margin-top:20px;padding-top:16px}
.grp.first{border-top:none;margin-top:0;padding-top:0}
.grp-hd{display:flex;align-items:center;gap:9px;font-size:11.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--ink);margin-bottom:13px;font-family:var(--fb)}
.grp-hd .n{width:21px;height:21px;border-radius:50%;background:var(--red);color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;letter-spacing:0;flex-shrink:0}
.cards.c3{grid-template-columns:repeat(3,1fr)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
/* ── The size control (assets/js/m6-product.js builds it) ───────────
One row under the named-size cards: orientation, the two labelled
measurements, and the book drawn to scale. The row is 31px because
the inputs are, so the drawing is free — an earlier 44px version
charged 18px of page height for the same information.
Decided 20 Aug 2026 over four mockup rounds; docs plan of that date. */
.m6-size{display:flex;align-items:flex-end;gap:9px;flex-wrap:wrap;margin-top:10px}
.m6-orient{display:inline-flex;border:1px solid #d5d2ca;border-radius:7px;overflow:hidden}
.m6-orient button{
border:0;background:#fff;cursor:pointer;font-family:var(--fb);font-size:12px;font-weight:600;
color:var(--ink);padding:7px 10px;display:inline-flex;align-items:center;gap:6px;
border-right:1px solid #d5d2ca;line-height:1;height:31px
}
.m6-orient button:last-child{border-right:0}
.m6-orient button:hover{background:#faf9f7}
.m6-orient button.on{background:rgba(167,1,42,.06);color:var(--red)}
.m6-orient svg{display:block;flex:0 0 auto}
/* Stacked labels: Jamie's pick, 20 Aug. This is the one place on the
page where being wrong is expensive — 234 in the width box is a
landscape book — so the words are spelled out, not abbreviated. */
.m6-dim{display:inline-flex;flex-direction:column;gap:2px}
.m6-dim .lbl{
font-size:9.5px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;
color:#7a7570;line-height:1
}
.m6-dim input{
width:70px;padding:7px 9px;border:1px solid #d5d2ca;border-radius:6px;
font-family:var(--fb);font-size:13px;color:var(--ink);background:#fff;
font-variant-numeric:tabular-nums;height:31px
}
.m6-dim input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 2px rgba(167,1,42,.12)}
.m6-size .m6-x{color:var(--mute);font-size:13px;padding-bottom:8px}
.m6-size .m6-unit{font-size:11.5px;color:var(--mute);padding-bottom:9px}
.m6-lane{flex:0 0 auto;margin-left:auto;display:flex;align-items:flex-end;height:31px}
.m6-lane svg{display:block}
/* The answer: the exact trim, the sheet it prices on, and the headroom
— or the cliff, which is the same move as the run-size nudge under
the quantity chart. */
.m6-sizeline{
margin-top:10px;padding:9px 11px;background:var(--paper);
border-left:3px solid var(--red);font-size:12.5px;line-height:1.6;color:var(--ink)
}
.m6-sizeline.bad{border-left-color:#8a5a00}
.m6-sizeline b{font-weight:700}
.m6-sizeline .sub{display:block;margin-top:2px;color:#6b6660;font-size:12px}
.m6-sizeline .sub.win{color:#2a7a4a;font-weight:600}
.m6-sizeline .sub.cliff{color:#8a5a00;font-weight:600}
@media(max-width:520px){
.m6-lane{margin-left:0}
}
/* Companion fields: the forms that open once an extras chip is on (band
and ribbon colour, foil colour, flap width, plate pages).
They used to be full-width bars stacked one per row, so four selected
extras made four near-empty stripes down the page. They now share a
grid and size to their content, which keeps the block compact and puts
related answers side by side where they fit.
A colour is shown AS the colour: "Old Gold" means nothing as a word in
a dropdown, and the Wibalin catalogue is 31 shades deep. */
.m6-xfields{
display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
gap:8px;margin-top:10px;align-items:start
}
.m6-xfield{
padding:9px 11px;border-radius:8px;
background:#faf9f7;border:1px solid #e6e2da;border-left:3px solid var(--red);
display:flex;flex-wrap:wrap;align-items:center;gap:6px 9px;
font-family:var(--fb);font-size:12.5px;color:var(--ink);
animation:m6PopIn .18s ease-out
}
/* A long swatch list (cloth) earns the full width rather than being
squeezed into one grid track. */
.m6-xfield.wide{grid-column:1/-1}
.m6-xfield .xf-lbl{font-weight:600;flex:0 0 auto;color:#4a4640}
.m6-xfield .xf-lbl label{cursor:pointer}
.m6-xfield .xf-note{color:#6b6660;font-style:italic}
.xf-sw{display:flex;flex-wrap:wrap;gap:5px}
.xf-chip{
display:inline-flex;align-items:center;gap:5px;
border:1px solid #d5d2ca;border-radius:14px;padding:3px 9px 3px 4px;
background:#fff;cursor:pointer;font-family:var(--fb);font-size:11.5px;color:var(--ink);
line-height:1.5
}
.xf-chip i{
width:13px;height:13px;border-radius:50%;flex:0 0 auto;
border:1px solid rgba(0,0,0,.22);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)
}
.xf-chip:hover{border-color:rgba(167,1,42,.45)}
.xf-chip.on{border:1.5px solid var(--red);background:rgba(167,1,42,.05);padding:2.5px 8.5px 2.5px 3.5px;font-weight:600}
/* A word-only chip (the mono/colour choice). The swatch padding is
left-light to seat the colour dot; without one the label sits off
centre, so square it up. */
.xf-chip.txt{padding:3px 10px}
.xf-chip.txt.on{padding:2.5px 9.5px}
.xf-num{display:inline-flex;align-items:center;gap:6px}
.xf-num input{
width:68px;padding:5px 8px;border:1px solid #d5d2ca;border-radius:6px;
font-family:var(--fb);font-size:12.5px;color:var(--ink);background:#fff
}
.xf-num input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 2px rgba(167,1,42,.12)}
.xf-num em{font-style:normal;color:#6b6660}
@media(max-width:520px){
.m6-xfields{grid-template-columns:1fr}
}
/* Extras toggles. Built to match .ocard, the option card used by every
other group on the form: same 8px radius, same border colour, same
selected treatment. They were pills, which read as a different kind of
control from the cards sitting directly above them.
The plus/tick lives in its own fixed box so the label does not shift by
a character width when the state changes. */
.chipx{
display:inline-flex;align-items:center;gap:7px;
border:1px solid #d5d2ca;border-radius:8px;padding:9px 12px;
font-size:12.5px;font-weight:600;background:#fff;cursor:pointer;
font-family:var(--fb);color:var(--ink);line-height:1.2;
transition:border-color .12s ease,background .12s ease
}
.chipx::before{
content:'+';color:var(--red);font-weight:700;font-size:13px;
width:15px;height:15px;flex:0 0 auto;border-radius:50%;
border:1px solid rgba(167,1,42,.35);
display:inline-flex;align-items:center;justify-content:center;line-height:1
}
.chipx:hover{border-color:rgba(167,1,42,.45)}
.chipx.on{border:1.5px solid var(--red);background:rgba(167,1,42,.04);padding:8.5px 11.5px}
.chipx.on::before{content:'\2713';color:#fff;background:#2a7a4a;border-color:#2a7a4a;font-size:10px}
/* Keyboard focus in the brand colour. The browser default was a black
rectangle, which is what made a clicked chip look broken. */
.chipx:focus{outline:none}
.chipx:focus-visible{outline:2px solid rgba(167,1,42,.45);outline-offset:2px}
.chipx[hidden]{display:none}
.qtyquick{display:inline-flex;gap:6px;flex-wrap:wrap;vertical-align:middle}
.qp{border:1px solid #d5d2ca;border-radius:6px;padding:8px 13px;font-size:12.5px;background:#fff;cursor:pointer;font-family:var(--fb);color:var(--ink)}
.qp.on{border:1.5px solid var(--red);background:rgba(167,1,42,.05);font-weight:600;padding:7.5px 12.5px}
@media(max-width:920px){.cards.c3{grid-template-columns:repeat(2,1fr)}}
/* ---- Wide PDP container + full-width checkout bar + paper tabs ---- */
.m6 .wrap.wide{max-width:1340px}
/* Step 3, design C (docs/60 §3.10): the ladder IS the price. Copies leads
the left column rather than sitting under the quote as an afterthought;
proof follows it because it is the other thing that moves the number; the
rail carries totals and CTAs.
Files used to be a full-width strip below the whole of step 3. The left
column runs ~673px tall (ladder, proof, second edition) against a ~383px
rail, so that left ~290px of empty white beside the proof cards while the
strip queued below the fold. Files now shares the right column with the
rail, which fills the gap and puts the file rules next to the button they
apply to. .pb-side is that column; it is the grid child, not .pb-rail. */
.pdp-foot{display:block;border-top:2px solid #f0f0f0;padding:18px 0 40px}
.pf-sum{display:grid;grid-template-columns:minmax(0,1fr) 292px;gap:0 26px;align-items:start;
background:#fff;border:1px solid #e8e5de;border-radius:10px;padding:16px 18px}
.pb-main{min-width:0}
.pb-top{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.pb-spec{font-size:12.5px;color:#555;line-height:1.5}
.pb-dot{color:#c9c6bd;margin:0 3px}
/* the quantity field is the primary control on this design, so it is big */
.pb-top .stepper{border:1px solid #cfccc3;border-radius:8px}
.pb-top .stepper button{width:42px;height:48px;font-size:19px}
.pb-top .stepper input{width:78px;height:48px;font-size:20px;font-weight:700}
/* the ladder is a table now, not bars: height is auto and the old flex
bar layout is neutralised for this container */
.pb-main .qchart{margin-top:14px;margin-bottom:0;height:auto;display:block}
.qladder{width:100%;border-collapse:collapse;font-size:13px}
.qladder th{font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--mute);font-weight:700;text-align:right;padding:0 10px 7px;border-bottom:1px solid #e8e5de}
.qladder th:first-child{text-align:left}
.qladder td{padding:9px 10px;border-bottom:1px solid #f2f0ec;text-align:right;font-variant-numeric:tabular-nums}
.qladder td:first-child{text-align:left;font-weight:700}
.qladder tr.qrow{cursor:pointer}
.qladder tr.qrow:hover td{background:#fafaf8}
.qladder tr.qrow.on td{background:rgba(167,1,42,.045);color:var(--red);font-weight:700}
.qladder .qs{color:#1f7a44;font-weight:600}
.qladder tr.qrow.on .qs{color:#1f7a44}
.qladder .qpop{font-size:9px;color:#1f7a44;font-weight:700;letter-spacing:.4px;margin-left:7px;text-transform:uppercase}
@media(max-width:560px){.qladder th:nth-child(3),.qladder td:nth-child(3){display:none}}
.qchart-cap{text-align:center;margin-top:11px}
.pb-main .qnudge{text-align:center;margin-top:9px}
.pb-proof{margin-top:16px;padding-top:15px;border-top:1px solid #e8e5de}
/* Second edition: the same book in the other binding. Hidden until the
engine has priced it, so an unpriceable spec simply shows nothing. */
.secondEd{margin-top:14px;border:1px solid #cfe0d4;background:#f5faf6;border-radius:9px;padding:13px 15px}
.secondEd[hidden]{display:none}
.se-k{font-size:9.5px;letter-spacing:1.5px;text-transform:uppercase;color:#1f7a44;font-weight:700}
.se-t{font-size:14.5px;font-weight:700;margin-top:5px;line-height:1.3}
.se-m{font-size:12px;color:#4a5c50;margin-top:5px;line-height:1.55}
.se-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px solid rgba(31,122,68,.16)}
.se-p{font-size:17px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.se-add{margin-left:auto;border:1px solid #1f7a44;color:#1f7a44;background:#fff;border-radius:7px;padding:9px 16px;font-family:var(--fb);font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap}
.se-add:hover{background:#1f7a44;color:#fff}
.se-fine{font-size:11px;color:#6b7a70;margin-top:9px;line-height:1.5}
@media(max-width:560px){.se-add{margin-left:0;width:100%}}
/* rail */
.pb-rail{background:#fafaf8;border:1px solid #e8e5de;border-radius:9px;padding:14px 16px}
.rail-lbl{font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--mute);font-weight:700}
.rail-fig{font-size:31px;font-weight:700;letter-spacing:-1.1px;line-height:1.05;margin-top:3px;font-variant-numeric:tabular-nums}
.rail-per{font-size:12.5px;color:#555;margin-top:3px;font-variant-numeric:tabular-nums}
.rail-add{margin-top:10px;padding-top:10px;border-top:1px solid #e8e5de;font-size:12px;color:#555}
.rail-add .ra{margin-top:3px}
.rail-add .ra[hidden]{display:none}
.rail-total{display:flex;justify-content:space-between;gap:12px;margin-top:8px;font-size:13px;font-weight:700;color:var(--ink)}
.rail-total span:last-child{font-size:16px;font-variant-numeric:tabular-nums}
.pb-rail #addCartBtn{margin-top:13px}
.pb-rail .m6-btn.quiet{margin-top:8px}
.pb-rail .pdfgate{margin-top:8px;border:1px solid #d5d2ca;border-radius:8px;padding:0;background:#fff}
.pb-rail .pdfgate > summary{list-style:none;cursor:pointer;text-align:center;padding:11px 12px;font-size:13px;font-weight:600;color:var(--ink)}
.pb-rail .pdfgate > summary::-webkit-details-marker{display:none}
.pb-rail .pdfgate[open] > summary{border-bottom:1px solid #eeece6}
.pb-rail .pdfgate form{padding:11px 12px 0}
.pb-rail .pdfgate .pdfgate-msg{padding:0 12px 11px}
.rail-foot{font-size:11px;color:var(--mute);margin-top:10px;line-height:1.6}
.pb-rail .pb-msg{font-size:12px;color:#555;margin-top:8px}
/* Files panel: stacked, because it now lives in the 292px right column
under the rail rather than running the full width of the page. The
ticks were doing the work of bullets in the old one-line strip, so
they stay as the list marker. */
.pb-side{min-width:0}
.pf-files{margin-top:12px}
.pf-files .files-note{margin:0;background:#fafaf8;border:1px solid #e8e5de;
border-radius:9px;padding:12px 14px}
.pf-files .files-note .fh{margin:0;font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#555}
.pf-files .files-note ul{margin:7px 0 0;padding:0;list-style:none;font-size:11.5px;color:#555;line-height:1.55}
/* The base .files-note tick (line ~600) is inline, which was right for a
one-line strip. In a 292px column every item wraps, and an inline tick
leaves the second line sitting under it. Same green, hung in the margin
so wrapped lines align to the text. */
.pf-files .files-note li{position:relative;padding-left:15px;margin-top:5px}
.pf-files .files-note li::before{content:"\2713";position:absolute;left:0;top:0;
color:#2a7a4a;font-weight:700;font-size:10.5px}
.pf-files .files-note p{margin:9px 0 0;padding-top:9px;border-top:1px solid #e8e5de;
font-size:11.5px;color:var(--mute);line-height:1.55}
.pf-extra{border-top:1px solid #f0f0f0;margin-top:18px;padding-top:16px;display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center}
@media(max-width:1080px){
.pf-sum{grid-template-columns:minmax(0,1fr);gap:18px 0}
/* .pb-side is the grid child now, not .pb-rail — targeting the rail here
left the column in row 1 and the ladder underneath it. */
.pb-side{grid-row:2}
/* No height clamp here. This used to read .pb-main .qchart{height:112px},
from when the box held a bar chart. Design C put a
in it, which renders ~263px, so the clamp cut it to 112px and the last
two run-size rows printed straight through the caption and the proof
cards. Pre-dates the files move, visible at any width from 561 to 1080.
The desktop rule already sets height:auto; it just needs leaving alone. */
}
@media(max-width:560px){
.pb-top{gap:12px}
.pb-top .stepper input{width:66px}
}
.pf-sum #addCartBtn{margin-top:0}
/* hero left, addons and total stacked to its right */
.pf-sum #cfgFig{display:grid;grid-template-columns:minmax(0,1fr) 250px;grid-template-areas:"hero addons" "hero total";gap:0 22px;align-items:start}
.pf-sum #cfgFig .hero{grid-area:hero;border-top:0;margin-top:10px;padding-top:0}
.pf-sum #cfgFig .hero-fig{font-size:38px}
.pf-sum #cfgFig .addons{grid-area:addons;margin-top:10px}
.pf-sum #cfgFig .line.total{grid-area:total}
.pf-sum .qnudge{margin-top:12px}
/* CTA stack keeps its own column so the button never stretches full width */
.pf-sum .m6-btn{margin-top:0}
.pf-sum .m6-btn.quiet{margin-top:8px}
.pf-sum .pdfgate{margin-top:10px}
.pf-sum .assure{margin-top:9px}
.pdp-foot .grp-hd{grid-column:1/-1;margin-bottom:0}
.pf-sum .pricebox{margin-top:0}
.pf-extra{grid-column:1/-1;border-top:1px solid #f0f0f0;padding-top:16px;display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center}
.pf-extra .gal-note{margin:0}
.pf-extra .badges{margin:0}
.ptabs{display:inline-flex;border:1px solid #d5d2ca;border-radius:7px;overflow:hidden;margin-bottom:10px}
.ptab{padding:8px 18px;font-size:12.5px;background:#fff;border:none;cursor:pointer;font-weight:600;color:var(--mute);font-family:var(--fb)}
.ptab.on{background:var(--ink);color:#fff}
@media(max-width:920px){.pdp-foot{grid-template-columns:1fr}}
/* ---- Paper tab visibility fix (attribute must beat .cards display) ---- */
.pgrid[hidden]{display:none!important}
/* ---- Sticky price bar, phones only (docs/62 P1-2; the "ink bar" chosen from
the 19 Aug mockups). Built by m6-product.js, which mirrors the rail into
it. Hidden above 920px, where the rail is never far away. Sits under the
tooltip bottom sheet (.tp z 700, backdrop 690) on purpose. The body class
keeps the footer's last line clear of the bar while it is showing. ---- */
.m6-sticky{display:none}
@media(max-width:920px){
.m6-sticky{display:flex;align-items:center;gap:12px;position:fixed;left:0;right:0;bottom:0;z-index:600;
padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:var(--ink);color:#fff;
box-shadow:0 -6px 18px rgba(0,0,0,.18);transform:translateY(110%);transition:transform .18s ease;font-family:var(--fb)}
.m6-sticky.on{transform:none}
.m6-sticky .ms-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.m6-sticky .ms-qty{font-size:11px;color:rgba(255,255,255,.62);text-transform:uppercase;letter-spacing:.6px}
.m6-sticky .ms-total{font-size:16px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m6-sticky .ms-total small{font-size:12px;font-weight:500;color:rgba(255,255,255,.72);margin-left:6px}
.m6-sticky .ms-btn{flex:0 0 auto;background:var(--red);color:#fff;border:0;border-radius:7px;padding:12px 16px;font-size:13.5px;font-weight:600;font-family:var(--fb);cursor:pointer;white-space:nowrap}
.m6-sticky .ms-btn:hover{background:#8d0124}
body.m6-sticky-on .m6{padding-bottom:64px}
}
@media(prefers-reduced-motion:reduce){.m6-sticky{transition:none}}
/* ---- Quantity scaling chart (clickable, like the main calculator) ---- */
.qchart{display:flex;gap:8px;align-items:flex-end;margin-top:14px;height:110px;margin-bottom:14px}
.qbar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;background:none;border:none;cursor:pointer;padding:0;font-family:var(--fb);height:100%;position:relative}
.qbar .qpop{position:absolute;bottom:-15px;left:50%;transform:translateX(-50%);font-size:8.5px;color:#2a7a4a;font-weight:700;white-space:nowrap;letter-spacing:.2px}
.qbar i{display:block;width:100%;background:#e9e6df;border-radius:4px 4px 0 0;transition:height .25s ease,background .15s;min-height:8px}
.qbar.on i{background:var(--red)}
.qbar:hover i{background:#d8d3c8}
.qbar.on:hover i{background:var(--red)}
.qbar .qv{font-size:10.5px;color:var(--mute);font-variant-numeric:tabular-nums;white-space:nowrap}
.qbar.on .qv{color:var(--red);font-weight:700}
.qbar .ql{font-size:11px;color:var(--ink);font-weight:600}
.qchart-cap{font-size:11px;color:var(--mute);margin-top:8px;font-family:var(--fb)}
.qnudge{font-size:11.5px;color:#2a7a4a;font-weight:600;margin-top:6px;font-family:var(--fb);min-height:15px}
/* ---- Owner-only margin card (includes/m6-margin-card.php) ----------
Sits in the dead space under the quantity chart. Deliberately INK,
not cream: every customer surface on this page is white-on-warm, so
a dark panel cannot be mistaken for one at a glance, in a
screenshot, or over somebody's shoulder. Hidden until
api/pricing/margin.php answers, which it only does for the owner. */
.mgn{margin-top:18px;background:var(--ink);color:#fff;border-radius:8px;padding:13px 15px 11px;font-family:var(--fb)}
.mgn[hidden]{display:none}
.mgn-hd{font-size:10.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:10px}
.mgn-tag{font-size:9px;letter-spacing:.8px;font-weight:700;color:#ffd7e0;background:var(--red);border-radius:3px;padding:2px 6px}
.mgn-figs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:11px}
.mgn-fig{display:flex;flex-direction:column;gap:2px;min-width:0}
.mgn-fig .k{font-size:9.5px;letter-spacing:.7px;text-transform:uppercase;color:#8f8f8f;font-weight:600}
.mgn-fig .v{font-size:19px;font-weight:700;letter-spacing:-.6px;font-variant-numeric:tabular-nums;line-height:1.15}
/* The headline only. The other two are supporting figures and should
not compete with it for the eye. */
.mgn-fig:first-child .v{color:#5fd08a}
.mgn.low .mgn-fig:first-child .v{color:#ff8a9c}
.mgn-rows{margin-top:11px;border-top:1px solid #333;padding-top:9px;display:flex;flex-direction:column;gap:5px}
.mgn-row{display:flex;justify-content:space-between;gap:12px;font-size:11px;color:#9a9a9a;line-height:1.4}
.mgn-row[hidden]{display:none}
.mgn-row b{color:#e8e8e8;font-weight:600;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.mgn-note{margin-top:9px;font-size:10.5px;line-height:1.5;color:#ffc9d3;border-top:1px solid #333;padding-top:8px}
.mgn-note[hidden]{display:none}
.mgn-foot{margin-top:8px;font-size:9.5px;color:#6e6e6e;letter-spacing:.3px}
/* ---- "Your files" teaser panel ---- */
.files-note{margin-top:18px;border:1px solid #e5e5e5;border-radius:8px;padding:14px 16px;font-family:var(--fb)}
.files-note .fh{font-size:10.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#555;margin-bottom:8px}
.files-note ul{list-style:none;margin:0 0 10px;padding:0;font-size:12px;color:#555;line-height:1.7}
.files-note li::before{content:'\2713 ';color:#2a7a4a;font-weight:700}
.files-note p{font-size:11.5px;color:var(--mute);line-height:1.6;margin:0}
.files-note a{color:var(--red);font-weight:600;text-decoration:none}
/* stacked compact cards inside the foot's speed column */
.pdp-foot .cards.c1v{grid-template-columns:1fr}
.pdp-foot .cards.c1v .ocard{padding:8px 12px}
/* ---- Email-gated PDF estimate ---- */
.pdfgate{border:1px solid #e5e5e5;border-radius:8px;padding:12px 14px;margin-bottom:10px;font-family:var(--fb)}
.pdfgate .fh{font-size:10.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#555;margin-bottom:8px}
.pdfgate form{display:flex;gap:8px}
.pdfgate input{flex:1;border:1px solid #ccc;border-radius:6px;padding:9px 11px;font-family:var(--fb);font-size:13px;min-width:0}
.pdfgate input:focus{outline:2px solid rgba(167,1,42,.3);border-color:var(--red)}
.pdfgate button{border:1.5px solid var(--red);background:#fff;color:var(--red);font-weight:600;font-size:12.5px;padding:9px 14px;border-radius:6px;cursor:pointer;font-family:var(--fb);white-space:nowrap}
.pdfgate button:hover{background:rgba(167,1,42,.05)}
.pdfgate button:disabled{opacity:.6;cursor:default}
.pdfgate-msg{font-size:11.5px;color:var(--mute);margin-top:7px;line-height:1.5}
.pdfgate-msg.ok{color:#2a7a4a;font-weight:600}
/* ═══ The ⓘ tooltips (assets/js/m6-tips.js, content from guide-content.php)
Mockup C of docs/tooltip-mockups/, 19 Aug 2026: a popover beside the
heading, a bottom sheet on phones, and on screens of 1440px and up a
"Keep open" pin that docks the same content into a right-hand drawer.
Three pieces: .m6-tip (the button), .tp (the popover), .dw (the drawer).
Shared body classes .tp-* are used inside both shells. ═══ */
/* the button, on the group heading before the hint */
.m6-tiphd{display:inline-flex;align-items:center;gap:6px}
.m6-tip{width:17px;height:17px;border-radius:50%;border:1px solid #d5d2ca;background:#fff;color:#8a8578;
padding:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;vertical-align:-3px;
transition:border-color .15s,color .15s,background .15s;margin-left:2px;flex:0 0 auto}
.m6-tip svg{width:11px;height:11px;display:block}
.m6-tip:hover,.m6-tip.on,.m6-tip:focus-visible{border-color:var(--red);color:var(--red);background:rgba(167,1,42,.05);outline:none}
.qchart-cap .m6-tip{vertical-align:-4px}
.rail-add .ra .m6-tip{margin-left:5px}
.m6-tiprow{margin-bottom:8px}
/* the group the drawer is describing */
.opt.tp-focus,.pb-proof.tp-focus{outline:1px solid rgba(167,1,42,.35);outline-offset:8px;border-radius:4px}
/* the popover. Never taller than the viewport: long tips (extras, size)
scroll inside the card rather than running off the bottom of the screen */
.tp{position:absolute;z-index:700;width:440px;max-width:calc(100vw - 24px);max-height:calc(100vh - 96px);overflow:auto;
background:#fff;border:1px solid #e2ddd2;border-radius:12px;
box-shadow:0 18px 60px rgba(20,17,12,.18),0 2px 6px rgba(0,0,0,.06);font-family:var(--fb);
opacity:0;transform:translateY(6px);transition:opacity .18s ease,transform .18s ease;pointer-events:none}
.tp.on{opacity:1;transform:none;pointer-events:auto}
.tp-arrow{position:absolute;top:-7px;left:28px;width:12px;height:12px;background:#fff;border-left:1px solid #e2ddd2;border-top:1px solid #e2ddd2;transform:rotate(45deg)}
.tp .tp-x{position:sticky;float:right;top:10px;margin:10px 10px -38px 0;width:28px;height:28px;border-radius:50%;border:0;
background:rgba(0,0,0,.38);color:#fff;font-size:15px;line-height:1;cursor:pointer;z-index:2}
.tp .tp-pin{position:sticky;float:right;top:12px;margin:12px 6px -40px 0;z-index:2;border:1px solid rgba(255,255,255,.55);background:rgba(0,0,0,.38);color:#fff;
border-radius:20px;padding:5px 10px 5px 8px;font:600 11px/1 var(--fb);cursor:pointer;display:inline-flex;align-items:center;gap:5px;backdrop-filter:blur(2px)}
.tp .tp-pin svg{width:11px;height:11px}
.tp .tp-pin:hover{background:rgba(0,0,0,.6)}
/* over the size diagram (light ground) the controls go dark-on-light */
.tp-media-d ~ .tp-x{background:rgba(0,0,0,.55)}
.tp-backdrop{position:fixed;inset:0;z-index:690;background:rgba(17,17,17,.18);opacity:0;pointer-events:none;transition:opacity .18s}
.tp-backdrop.on{opacity:1;pointer-events:auto}
/* the body, shared by popover and drawer */
.tp-media img{display:block;width:100%;height:150px;object-fit:cover;filter:saturate(.9)}
.tp-media-d{padding:16px 18px 6px;background:#faf8f3;border-bottom:1px solid #eee}
.tp-diagram{display:block;width:100%;height:auto}
.tp-diagram rect{fill:#fff;stroke:#b9b3a5;stroke-width:1}
.tp-diagram text{font-family:var(--fb)}
.tp-diagram .l{font-size:9.5px;font-weight:700;fill:#444}
.tp-diagram .m{font-size:8.5px;fill:#888}
.tp-diagram .sel rect{fill:rgba(167,1,42,.08);stroke:var(--red);stroke-width:1.6}
.tp-diagram .sel .l{fill:var(--red)}
.tp-body{padding:16px 20px 18px}
.tp-title{font-family:var(--fd);font-size:24px;font-weight:400;letter-spacing:-.3px;color:var(--ink);line-height:1.1;margin-bottom:6px}
.tp-one{font-size:13.5px;color:#333;line-height:1.55;margin:0 0 12px}
.tp-k{font-size:10.5px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:#555;margin:12px 0 6px}
.tp-choose{margin:0;display:grid;gap:6px}
.tp-choose > div{display:grid;grid-template-columns:118px 1fr;gap:10px;font-size:12.5px;line-height:1.5;padding:6px 0;border-top:1px solid #f1efe8}
.tp-choose > div:first-child{border-top:0;padding-top:0}
.tp-choose dt{font-weight:700;color:var(--ink);margin:0}
.tp-choose dd{margin:0;color:#555}
.tp-note{font-size:12px;color:#666;line-height:1.5;margin:10px 0 0;padding:9px 11px;background:#faf8f3;border-radius:7px}
.tp-live{margin-top:12px;padding:10px 12px;border-radius:8px;background:rgba(167,1,42,.05);border:1px solid rgba(167,1,42,.22);
display:grid;grid-template-columns:auto 1fr;gap:2px 10px;font-size:12.5px;line-height:1.5}
.tp-live-k{grid-row:1/3;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--red);padding-top:3px;white-space:nowrap}
.tp-live b{color:var(--ink)}
.tp-live span:last-child{color:#555}
.tp-rel details{border-top:1px solid #f1efe8;padding:7px 0;font-size:12.5px}
.tp-rel summary{cursor:pointer;font-weight:600;color:var(--ink);list-style:none}
.tp-rel summary::-webkit-details-marker{display:none}
.tp-rel summary::before{content:"+";display:inline-block;width:14px;color:var(--red);font-weight:700}
.tp-rel details[open] summary::before{content:"\2212"}
.tp-rel p{margin:6px 0 0 14px;color:#555;line-height:1.55}
.tp-foot{display:flex;gap:6px 16px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid #eee;font-size:12px}
.tp-foot a{color:var(--red);font-weight:600;text-decoration:none}
.tp-foot a:hover{text-decoration:underline}
.tp-foot .tp-ask{margin-left:auto;color:var(--ink)}
/* the drawer: docked right, pushes the page rather than covering it */
.dw{position:fixed;top:68px;right:0;bottom:0;width:380px;max-width:100vw;z-index:700;background:#fff;border-left:1px solid #e2ddd2;
box-shadow:-16px 0 48px rgba(20,17,12,.12);transform:translateX(100%);transition:transform .22s ease;display:flex;flex-direction:column;font-family:var(--fb)}
.dw.on{transform:none}
.dw-hd{display:flex;align-items:center;gap:8px;padding:12px 14px 12px 16px;border-bottom:1px solid #eee;background:#faf8f3}
.dw-hd .k{font-size:10.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#555;flex:1}
.dw-unpin{border:1px solid #d5d2ca;background:#fff;border-radius:20px;padding:5px 10px;font:600 11px/1 var(--fb);cursor:pointer;color:#444;display:inline-flex;align-items:center;gap:5px}
.dw-unpin svg{width:11px;height:11px}
.dw-unpin:hover{border-color:var(--red);color:var(--red)}
.dw-x{width:28px;height:28px;border-radius:50%;border:1px solid #d5d2ca;background:#fff;cursor:pointer;font-size:14px;line-height:1;color:#444}
.dw-nav{display:flex;gap:4px;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid #eee}
.dw-nav button{border:1px solid #e2ddd2;background:#fff;border-radius:20px;padding:4px 10px;font-size:11px;font-weight:600;color:#555;cursor:pointer;font-family:var(--fb)}
.dw-nav button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.dw-body{overflow:auto;flex:1}
.dw .tp-media img{height:160px}
.dw .tp-body{padding:16px 18px 22px}
.dw .tp-title{font-size:26px}
.dw .tp-choose > div{grid-template-columns:112px 1fr;padding:7px 0}
.dw .tp-rel p{line-height:1.6}
@media(min-width:1440px){ body.dw-on{padding-right:380px;transition:padding-right .22s ease} }
/* phone: the popover is a bottom sheet; the drawer is never offered */
@media(max-width:720px){
.tp{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;max-width:none;border-radius:14px 14px 0 0;max-height:86vh;transform:translateY(24px)}
.tp.on{transform:none}
.tp-arrow{display:none}
.tp-choose > div{grid-template-columns:96px 1fr}
.tp-backdrop{background:rgba(17,17,17,.4)}
}