/* The guides marketplace, PROTOTYPE 2026-11-02, polish 2. Amazon's anatomy, the Studio's palette made to sell: white page,
   warm-grey bands, one typeface (Geist) at readable weights. One colour, one meaning: amber is time, the deal, the stars
   and Buy now; green is money kept; navy is links, the pass and Add to cart; ink is curation. */
:root{
  --bg:#FFFFFF; --band:#F4F2ED; --card:#FFFFFF; --ink:#141517; --ink-2:#3B3D42; --muted:#6A6D74; --line:#E3E1DC; --line-2:#CFCCC5;
  --amber:#B14F25; --amber-2:#953F1A; --amber-wash:#FBEFE8; --green:#1B7A44; --green-wash:#E6F4EB; --navy:#1F3A6E; --navy-2:#162B53; --navy-wash:#E9EEF8;
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sh-1:0 1px 2px rgba(20,21,23,.06),0 1px 1px rgba(20,21,23,.04);
  --sh-2:0 2px 6px rgba(20,21,23,.06),0 14px 32px -18px rgba(20,21,23,.28);
  --ease:cubic-bezier(.19,1,.22,1); --r:10px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font:400 15px/1.5 var(--sans);-webkit-font-smoothing:antialiased;padding-bottom:132px;overflow-x:hidden}
/* single-column grids never grow past the phone */
.pd,.info,.gal,.buybox,.sec,.cart,.fbt,.rv,.bar,.sumbox,.say,.offer,.vt,.rcard,.gcard .body,.hero,.below,.ci>div{grid-template-columns:minmax(0,1fr)}
a{color:var(--navy);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
h1,h2,h3{margin:0;font-weight:600;line-height:1.2;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:clamp(22px,4.6vw,28px)} h2{font-size:clamp(18px,3.6vw,21px)} h3{font-size:15px}
p{margin:0}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.over{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.n{font-family:var(--mono);font-variant-numeric:tabular-nums}
.note{font-size:12.5px;color:var(--muted);line-height:1.45}
/* the Studio bar and the store bar */
.shop-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0 6px}
.shop-logo{display:flex;align-items:center;gap:9px;color:var(--ink)}
.shop-logo img{width:auto;height:22px;display:block}
.shop-logo span{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2)}
.shop-nav{display:flex;gap:16px;font-size:14px;font-weight:500}
.shop-nav a{color:var(--ink-2)} .shop-nav a[aria-current]{color:var(--navy)}
.shop-nav a{white-space:nowrap}
@media (max-width:520px){.shop-nav a:first-child{display:none}.shop-nav{gap:12px;font-size:13.5px}.shop-logo span{display:none}}
.storebar{position:sticky;top:0;z-index:30;background:var(--bg);border-bottom:1px solid var(--line);padding:8px 0}
.storebar .wrap{display:flex;align-items:center;gap:10px}
.hb{display:none}
@media (min-width:980px){.hb{display:flex;gap:22px;margin-left:auto;padding-left:6px}.hb>*{display:flex;align-items:center;gap:8px;color:var(--ink);white-space:nowrap}.hb svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linejoin:round;color:var(--navy)}.hb span{display:grid;line-height:1.2;font-size:13.5px;font-weight:600}.hb small{font-size:11.5px;font-weight:400;color:var(--muted)}.hb a:hover{text-decoration:none;color:var(--navy)}}
.storebar h1{flex:1;font-size:20px}
.back{width:40px;height:40px;display:grid;place-items:center;border-radius:8px;color:var(--ink);flex:none}
.back svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2}
.search{flex:1;display:flex;align-items:center;gap:8px;height:42px;padding:0 12px 0 14px;border:1px solid var(--line-2);border-radius:8px;background:var(--card);box-shadow:var(--sh-1)}
.search:focus-within{border-color:var(--navy);box-shadow:0 0 0 3px var(--navy-wash)}
.search input{flex:1;border:0;background:none;font:inherit;font-size:15px;color:var(--ink);outline:none;min-width:0}
.search input::placeholder{color:var(--muted)}
.search svg{width:18px;height:18px;flex:none;stroke:var(--ink-2);fill:none;stroke-width:2}
.cartbtn{position:relative;width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:8px;border:1px solid var(--line-2);background:var(--card);box-shadow:var(--sh-1)}
.cartbtn svg{width:20px;height:20px;stroke:var(--ink);fill:none;stroke-width:1.9}
.cartbtn b{position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--amber);color:#fff;font:600 11px/19px var(--sans);text-align:center}
/* the house strip: one line, the clock the only bold thing */
.strip{display:flex;align-items:center;gap:10px;margin:12px 0 0;padding:9px 14px;border-radius:8px;background:var(--ink);color:#fff;font-size:13.5px;line-height:1.3}
.strip .dot{width:8px;height:8px;border-radius:50%;background:var(--amber);flex:none;box-shadow:0 0 0 3px rgba(177,79,37,.3)}
.strip b{font-weight:600;white-space:nowrap}
.strip .n{color:#FFD7C6;white-space:nowrap}
.strip .more{margin-left:auto;color:rgba(255,255,255,.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.strip .till-s{display:none;margin-left:auto;color:rgba(255,255,255,.72);white-space:nowrap}
@media (max-width:640px){.strip .more{display:none}.strip .till-s{display:inline}}
/* category chips under the hero */
.cats{display:flex;gap:8px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
@media (min-width:760px){.cats{flex-wrap:wrap;overflow:visible;-webkit-mask-image:none;mask-image:none}}
.cats a{flex:none;padding:7px 12px;border:1px solid var(--line-2);border-radius:999px;font-size:13px;font-weight:500;color:var(--ink-2);background:var(--card)}
.cats a:hover{text-decoration:none;border-color:var(--navy);color:var(--navy)}
.hero{padding:18px 0 6px;display:grid;gap:6px}
/* the filter rail: a sticky column beside the grid on desktop, a sheet behind the Filters chip on the phone */
body[data-page=shelf] .wrap{max-width:1360px}
.shelfgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:0 28px;align-items:start}
.rail{display:none}
.rail nav{display:grid;gap:14px;margin-top:12px}
.rail .gh{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.rail-head{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:15px}
.rail .done{display:none;font:inherit;font-size:13px;font-weight:600;padding:7px 14px;border:0;border-radius:999px;background:var(--navy);color:#fff}
.rail .ln{display:flex;align-items:center;gap:8px;width:100%;padding:0;border:0;background:none;font:inherit;font-size:13px;font-weight:500;color:var(--ink-2);text-align:left;cursor:pointer;line-height:1.25}
.rail .ln:hover,.rail .ln[aria-current=true]{color:var(--navy);font-weight:600}
.rail .ln[aria-current=true]::before{content:"";width:3px;height:14px;border-radius:2px;background:var(--navy);margin-left:-10px;margin-right:-1px}
.rail .n{margin-left:auto;color:var(--muted);font-size:12px;font-weight:400;font-variant-numeric:tabular-nums;white-space:nowrap}
.rail .grp{display:grid;gap:5px}
.rail ul{list-style:none;margin:0;padding:0 0 0 10px;border-left:2px solid var(--line);display:grid;gap:3px}
.rail li a{display:flex;align-items:baseline;gap:8px;font-size:12.5px;line-height:1.25;color:var(--ink-2)}
.rail li a:hover{color:var(--navy);text-decoration:underline}
.rail .more{font-size:13px}
.fbtn{flex:none;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid var(--ink);border-radius:999px;font:inherit;font-size:13px;font-weight:600;color:var(--ink);background:var(--card);cursor:pointer}
.fbtn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.rhead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0 0;font-size:13px;color:var(--muted);white-space:nowrap}
.rhead .sort{display:flex;align-items:center;gap:6px;color:var(--ink-2);white-space:nowrap}
.rhead select{font:inherit;font-size:13px;padding:6px 8px;border:1px solid var(--line-2);border-radius:8px;background:var(--card);color:var(--ink)}
body.rail-open .rail{display:block;position:fixed;left:0;right:0;bottom:0;max-height:78vh;overflow:auto;z-index:45;background:var(--card);border-top:1px solid var(--line-2);border-radius:16px 16px 0 0;padding:16px max(16px,env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));box-shadow:0 -12px 32px rgba(20,21,23,.18)}
body.rail-open .rail .done{display:inline-block}
.hero p{font-size:15px;color:var(--ink-2);max-width:60ch}
/* badges and prices */
.tag{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:4px;font-size:11.5px;font-weight:600;line-height:1.5;white-space:nowrap;letter-spacing:.01em}
.tag.time{background:var(--amber);color:#fff}
.tag.save{background:var(--green-wash);color:var(--green)}
.tag.pick{background:var(--ink);color:#fff}
.tag.best{background:var(--amber-wash);color:var(--amber-2);border:1px solid rgba(177,79,37,.25)}
.tag.rank{background:var(--amber-wash);color:var(--amber-2)}
.tag.new{background:var(--navy-wash);color:var(--navy)}
.tag.free{background:var(--green);color:#fff}
.tag.bundle{background:var(--ink);color:#fff}
.tags{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.gcard .tag{max-width:100%;overflow:hidden;text-overflow:ellipsis;display:inline-block}
.off{color:var(--amber);font-weight:600}
.mrp{color:var(--muted);text-decoration:line-through;font-size:.9em}
.price{font-weight:600;font-size:20px;letter-spacing:-.01em;color:var(--ink)}
.price sup{font-size:.6em;font-weight:500;vertical-align:top;margin-right:1px}
.save{color:var(--green);font-weight:500}
/* stars */
.stars{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-2)}
.stars i{position:relative;display:inline-block;width:78px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0.8 0.2 14.4 15'%3E%3Cpath d='M8 1.5l1.9 4.1 4.5.5-3.3 3 .9 4.4L8 11.3 4 13.5l.9-4.4-3.3-3 4.5-.5z' fill='none' stroke='%23B14F25' stroke-width='1.3'/%3E%3C/svg%3E") 0 0/15.6px 14px repeat-x}
.stars i::before{content:"";position:absolute;inset:0;width:var(--w);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0.8 0.2 14.4 15'%3E%3Cpath d='M8 1.5l1.9 4.1 4.5.5-3.3 3 .9 4.4L8 11.3 4 13.5l.9-4.4-3.3-3 4.5-.5z' fill='%23B14F25'/%3E%3C/svg%3E") 0 0/15.6px 14px repeat-x}
.stars b{font-weight:600;color:var(--ink)}
.stars .cnt{color:var(--navy)}
/* covers, drawn in CSS: a flat block, a spine, the title set large */
.cover{position:relative;aspect-ratio:3/4;border-radius:4px 8px 8px 4px;background:var(--hue,#1F3A6E);color:#fff;overflow:hidden;display:grid;grid-template-rows:auto 1fr auto;padding:8% 9% 8% 11%;container-type:inline-size;box-shadow:inset 4px 0 0 rgba(255,255,255,.22),inset 6px 0 0 rgba(0,0,0,.12),0 12px 24px -14px rgba(20,21,23,.55)}
.cover .yr{font-size:9px;font-weight:600;letter-spacing:.18em;opacity:.85}
.cover .ct{font-size:clamp(14px,12cqw,30px);font-weight:600;line-height:1.08;align-self:center;letter-spacing:-.01em;text-wrap:balance}
.cover .ln{font-size:8.5px;font-weight:500;opacity:.8;margin-top:6px;letter-spacing:.04em}
@container (max-width:100px){.cover .yr,.cover .ln{display:none}.cover .ct{font-size:13px}}
.cover.free{background:var(--band);color:var(--ink);border:1px solid var(--line)}
.cover.report{background:var(--card);color:var(--ink);border:1px solid var(--line-2)}
/* shelf rows */
.lineblk{padding-top:22px}
.line-head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin:0 0 10px}
.line-head p{font-size:13.5px;color:var(--muted);max-width:60ch;margin-top:2px}
.line-head a{font-size:13px;white-space:nowrap}
.rowwrap{position:relative}
.row{display:grid;grid-auto-flow:column;grid-auto-columns:164px;gap:12px;overflow-x:auto;padding:4px 2px 12px;scroll-snap-type:x proximity;scrollbar-width:none;scroll-behavior:smooth}
.row>*{scroll-snap-align:start}
.row::-webkit-scrollbar{display:none}
.arrow{display:none;position:absolute;top:calc(50% - 28px);width:40px;height:56px;border:1px solid var(--line-2);border-radius:8px;background:rgba(255,255,255,.96);box-shadow:var(--sh-2);z-index:2;place-items:center;color:var(--ink)}
.arrow svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.arrow.prev{left:-14px} .arrow.next{right:-14px}
.arrow:hover{border-color:var(--navy);color:var(--navy)}
@media (min-width:980px){.arrow{display:grid}.rowwrap .row{padding-bottom:14px}}
.gcard{display:grid;grid-template-rows:auto 1fr;gap:9px;padding:10px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);box-shadow:var(--sh-1);color:var(--ink);container-type:inline-size;transition:box-shadow .25s var(--ease),border-color .25s}
.gcard:hover{text-decoration:none;border-color:var(--line-2);box-shadow:var(--sh-2)}
.gcard .body{display:grid;gap:4px;align-content:start}
.gcard .t{font-size:13.5px;font-weight:500;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gcard .pr{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.gcard .pr .price{font-size:18px}
.gcard .meta{font-size:12px;color:var(--muted);line-height:1.35}
.gcard .meta b{color:var(--ink);font-weight:600}
.gcard .meta.save{color:var(--green)}
/* ladder: spend more, save more */
.ladder{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
@media (min-width:760px){body[data-page=check] .ladder{grid-template-columns:repeat(3,minmax(0,1fr))}}
.vt{position:relative;display:grid;gap:3px;padding:12px;border:1.5px solid var(--line);border-radius:8px;background:var(--card);text-align:left;color:var(--ink);transition:border-color .2s}
.vt:hover{text-decoration:none;border-color:var(--line-2)}
.vt[aria-current],.vt.on{border-color:var(--navy);box-shadow:0 0 0 1px var(--navy)}
.vt .vn{font-size:13px;font-weight:600}
.vt .vp{font-size:17px;font-weight:600}
.vt .vs{font-size:12px;color:var(--green);font-weight:500}
.vt .vm{font-size:12px;color:var(--muted)}
.vt .vd{font-size:11.5px;color:var(--ink-2);line-height:1.35}
/* languages */
.langs{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.lt{display:grid;gap:1px;padding:9px 10px;border:1.5px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);text-align:left}
.lt:hover{text-decoration:none;border-color:var(--line-2)}
.lt[aria-current]{border-color:var(--navy);box-shadow:0 0 0 1px var(--navy)}
.lt b{font-size:15px;font-weight:600;line-height:1.25}
.lt span{font-size:11.5px;color:var(--muted)}
.langrow{display:grid;grid-auto-flow:column;grid-auto-columns:118px;gap:10px;overflow-x:auto;padding:2px 2px 10px;scrollbar-width:none}
@media (min-width:760px){.langrow{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));overflow:visible}}
.lcard{display:grid;gap:2px;padding:14px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);color:var(--ink);box-shadow:var(--sh-1)}
.lcard:hover{text-decoration:none;border-color:var(--navy);box-shadow:var(--sh-2)}
.lcard b{font-size:22px;font-weight:600;line-height:1.2}
.lcard span{font-size:13px;font-weight:500;color:var(--ink-2)}
.lcard small{font-size:12px;color:var(--muted)}
.keep.soft{border-color:var(--line-2);background:var(--band)} .keep.soft .ok{color:var(--navy)}
/* the check page: parameter groups */
details>div span.in{color:var(--ink)} details>div span.out{color:var(--muted)} details>div span em{font-style:normal;font-size:12px;color:var(--muted)}
details summary span:first-child{flex:1}
/* the cart's report details */
.sumbox .details{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--band)}
.sumbox .details b,.sumbox .details span{display:block}
.details b{font-size:13.5px;font-weight:600}
.details input{height:40px;padding:0 12px;border:1px solid var(--line-2);border-radius:8px;background:var(--bg);font:inherit;color:var(--ink);min-width:0}
.details input:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px var(--navy-wash)}
/* the gallery stage: a drawn sample page */
.stage{max-width:280px;margin:0 auto;width:100%}
.stage .cover{max-width:none}
.stage .shot{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:top;border:1px solid var(--line-2);border-radius:4px 8px 8px 4px;background:#fff;box-shadow:inset 4px 0 0 var(--band),0 12px 24px -14px rgba(20,21,23,.45)}
.pg{aspect-ratio:3/4;display:grid;align-content:start;gap:8px;padding:11% 10%;border:1px solid var(--line-2);border-radius:4px 8px 8px 4px;background:var(--card);color:var(--ink-2);font-size:12.5px;line-height:1.45;box-shadow:inset 4px 0 0 var(--band),0 12px 24px -14px rgba(20,21,23,.45);overflow:hidden;container-type:inline-size}
.pg .pg-h{font-size:clamp(14px,6.5cqw,17px);font-weight:600;color:var(--ink);line-height:1.25;letter-spacing:-.01em}
.pg p{margin:0}
.pg .pg-n{margin-top:auto;font-size:10px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.pg .pg-row{display:flex;gap:8px;align-items:center;color:var(--ink)}
.pg .pg-row i{width:14px;height:14px;border:1.5px solid var(--line-2);border-radius:3px;flex:none}
.pg.reel{background:var(--ink);color:#C9C1B5;align-content:center;justify-items:center;text-align:center;border-color:var(--ink)}
.pg.reel .pg-h{color:#fff} .pg.reel .play{font-size:34px;color:#fff;width:64px;height:64px;border:2px solid rgba(255,255,255,.6);border-radius:50%;display:grid;place-items:center;padding-left:4px}
.pg.reel .pg-n{color:#A0968A}
.inside{display:grid;gap:8px;padding:14px;border:1px solid var(--line);border-radius:8px;background:var(--band);max-width:280px;margin:0 auto;width:100%}
/* every group opens its own rows in the parameters popup (his 11-11: "they will read these things but to view details nothing is here") */
.in-open{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:3px 0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.in-open .chev{flex:none;width:16px;height:16px;fill:none;stroke:var(--muted);stroke-width:2}
.in-open:hover>span,.in-open:focus-visible>span{text-decoration:underline;text-underline-offset:3px}
.inside .pm-open{justify-self:start;font-size:13.5px}
.inside ol{margin:0;padding-left:20px;display:grid;gap:4px;font-size:13.5px;color:var(--ink)}
@media (min-width:980px){.stage,.inside{max-width:none}}
/* product page */
.pd{display:grid;gap:22px;margin-top:14px}
.gal{display:grid;gap:10px}

.thumbs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.thumbs button{width:44px;height:44px;padding:0;border:1.5px solid var(--line);border-radius:7px;background:var(--card);overflow:hidden;font-size:9px;font-weight:500;color:var(--muted);line-height:1.1;text-align:center;cursor:pointer;display:grid;place-items:center}
.thumbs button img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.thumbs button:has(img) span{display:none}
.thumbs button[aria-pressed="true"]{border-color:var(--navy);box-shadow:0 0 0 1.5px var(--navy);color:var(--navy)}
.info{display:grid;gap:12px;align-content:start}
/* the report page on a phone: the name, rating and what it is come before the cover (his 11-11, #137: the deep report ads lost
   every visitor on a first screen that was all cover); on a wide screen the head stays at the top of the middle column */
.pd-head,.pd-rest{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-content:start}
@media (max-width:979px){body[data-page=check] .info{display:contents}body[data-page=check] .pd-head{order:-1}}
/* the phone's trust row (his 11-11): the buy box's badges, the refund first, in one line under the pitch, where the buy
   box itself is screens away; a wide screen has the buy box in view, so it shows there only */
.icons.trust{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px}
.icons.trust div{padding:8px 3px;font-size:11.5px}
.icons.trust svg{width:18px;height:18px}
@media (min-width:980px){.icons.trust{display:none}}
/* the milestone (his 11-11: "a milestone and a visible asset.. sparkles", "capital letters.. vibrant", then "still bulky..
   it needs a place that will make it seamless and clear premium"): one credential line under the product's name, as a
   shop puts "100+ bought" by the title. No box: an amber sparkle, the figure in the hand, the words in small amber
   capitals. Arriving, the sparkles twinkle three times and rest; still while away and under reduced motion. */
.milestone{display:flex;align-items:center;gap:8px;margin:-4px 0 0;font-size:11px;font-weight:600;line-height:1.35;letter-spacing:.1em;text-transform:uppercase;color:var(--amber-2)}
.milestone b{margin-right:2px;font-family:var(--hand);font-size:20px;font-weight:700;line-height:1;letter-spacing:0;color:var(--amber)}
.milestone>span:last-child{text-wrap:balance}
.ms-spark{position:relative;flex:none;width:18px;height:18px}
.ms-spark svg{position:absolute;fill:var(--amber)}
.ms-spark svg:nth-child(1){width:15px;height:15px;left:0;top:3px}
.ms-spark svg:nth-child(2){width:7px;height:7px;left:12px;top:0;opacity:.7}
@media (prefers-reduced-motion:no-preference){
  .ms-spark svg{animation:ms-twinkle 1.4s ease-in-out .5s 3 both}
  .ms-spark svg:nth-child(2){animation-delay:.8s}
  .away .ms-spark svg{animation-play-state:paused}
}
@keyframes ms-twinkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(.35) rotate(45deg)}}
.byline{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;flex-wrap:wrap}
.title{font-size:clamp(20px,4.4vw,24px);font-weight:600;line-height:1.25;letter-spacing:-.012em}
.attrs{font-size:13px;color:var(--muted);line-height:1.45}
.attrs b{color:var(--ink-2);font-weight:500}
.pm-open{padding:0;border:0;background:none;font:inherit;font-weight:500;color:var(--ink-2);text-decoration:underline dotted;text-underline-offset:3px;cursor:pointer} /* the count opens every parameter compared (his 11-11) */
.sub{font-size:15.5px;color:var(--ink-2);line-height:1.45;padding-left:12px;border-left:3px solid var(--amber)}
.proof{font-size:13px;color:var(--ink-2)}
.proof b{font-weight:600;color:var(--ink)}
.qas{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 4px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);scroll-behavior:smooth}
.qas::-webkit-scrollbar{display:none}
.rowwrap.pills .arrow{width:30px;height:32px;top:calc(50% - 18px);border-radius:6px}
.rowwrap.pills .arrow svg{width:14px;height:14px}
.rowwrap.pills .arrow.prev{left:-12px} .rowwrap.pills .arrow.next{right:-12px}
.qa{flex:none;padding:7px 12px;border-radius:999px;background:var(--navy-wash);color:var(--navy);font-size:13px;font-weight:500;white-space:nowrap}
.qa[aria-expanded="true"]{background:var(--navy);color:#fff}
.answer{padding:10px 14px;border-left:3px solid var(--navy);background:var(--band);border-radius:0 6px 6px 0;font-size:14px;color:var(--ink-2)}
.deal{display:grid;gap:6px;padding-top:10px;border-top:1px solid var(--line)}
.deal .big{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.deal .big .price{font-size:34px;font-weight:600}
.deal .big .off{font-size:24px}
.deal .fine{font-size:13px;color:var(--muted)}
.deal .fine b{color:var(--ink-2);font-weight:500}
.offers{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);gap:10px;overflow-x:auto;padding:2px 2px 8px}
.offer{display:grid;gap:4px;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--card);align-content:start}
.offer b{font-size:14px;font-weight:600}
.offer b .save{font-weight:600}
.offer p{font-size:12.5px;color:var(--ink-2);line-height:1.4}
.offer button,.pill-btn{justify-self:start;padding:5px 12px;border:1px solid var(--navy);border-radius:999px;color:var(--navy);font-size:12.5px;font-weight:500;background:var(--card);transition:background .2s}
.offer button:hover,.pill-btn:hover{background:var(--navy-wash);text-decoration:none}
.bar{display:grid;gap:7px;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:var(--band)}
.bar .track{height:8px;border-radius:999px;background:var(--line-2);overflow:hidden}
.bar .track i{display:block;height:100%;width:var(--w,0%);background:var(--green);transition:width .4s var(--ease)}
.bar p{font-size:13px;color:var(--ink-2)}
.bar b{color:var(--green);font-weight:600}
/* about, in the centre column like Amazon's "About this item" */
.about{display:grid;gap:12px;padding-top:14px;border-top:1px solid var(--line)}
/* the right column: buy box, trust tiles, keep-rate */
.side{display:grid;gap:12px;align-content:start}
.side .icons{grid-template-columns:repeat(auto-fit,minmax(118px,1fr))}
.buybox{display:grid;gap:10px;padding:16px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);box-shadow:var(--sh-2)}
.buybox .total{display:flex;justify-content:space-between;align-items:baseline;font-size:15px}
.buybox .total .price{font-size:26px}
.buybox .sure{display:grid;gap:4px;font-size:13.5px;color:var(--ink-2)}
.buybox .sure b{color:var(--green);font-weight:600}
.buybox .sure em{font-style:normal;color:var(--ink);font-weight:500}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 18px;border-radius:8px;font-size:15px;font-weight:600;background:var(--navy);color:#fff;border:1px solid var(--navy);box-shadow:0 1px 2px rgba(20,21,23,.1);transition:background .2s}
.btn:hover{text-decoration:none;background:var(--navy-2)}
.btn.amber{background:var(--amber);border-color:var(--amber)} .btn.amber:hover{background:var(--amber-2)}
.btn.alt{background:var(--card);color:var(--navy)} .btn.alt:hover{background:var(--navy-wash)}
.prov{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;font-size:12.5px;color:var(--muted);line-height:1.4}
.prov b{color:var(--ink-2);font-weight:500}
.icons{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px}
.icons div{display:grid;gap:5px;justify-items:center;text-align:center;padding:11px 6px;border:1px solid var(--line);border-radius:8px;background:var(--card);font-size:12px;font-weight:500;color:var(--navy);line-height:1.3}
.icons svg{width:22px;height:22px;stroke:var(--ink);fill:none;stroke-width:1.7}
.keep{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid var(--green);border-radius:8px;background:var(--green-wash);font-size:13.5px}
.keep .ok{color:var(--green);font-weight:700}
.keep b{display:block;color:var(--ink);font-weight:600}
.keep p{color:var(--ink-2)}
/* details */
.sec{display:grid;gap:12px;padding-top:22px;border-top:1px solid var(--line)}
.sec .over{margin-bottom:-6px}
.ticks{display:grid;gap:7px;margin:0;padding:0;list-style:none}
.ticks li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.45}
.ticks li::before{content:"✓";color:var(--green);font-weight:700;flex:none}
details{border:1px solid var(--line);border-radius:8px;background:var(--card)}
details summary{cursor:pointer;padding:12px 14px;font-weight:600;font-size:14.5px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
details summary .n{font-family:var(--sans);font-weight:500;font-size:13.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"";flex:none;width:8px;height:8px;border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);transform:translateY(-2px) rotate(45deg);margin:0 4px 0 2px;transition:transform .2s}
details[open] summary::after{transform:translateY(2px) rotate(-135deg)}
details>div{padding:0 14px 14px;display:grid;gap:8px;font-size:14px;color:var(--ink-2)}
details>div b{color:var(--ink);font-weight:600}
.spec{display:grid;grid-template-columns:130px 1fr;gap:7px 12px;font-size:14px;margin:0}
.spec dt{color:var(--muted)} .spec dd{margin:0;color:var(--ink)}
.posters{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);gap:10px;overflow-x:auto;padding-bottom:8px}
.poster{aspect-ratio:4/3;display:grid;align-content:end;padding:16px;border-radius:8px;color:#fff;background:var(--hue,#1F3A6E);font-size:22px;font-weight:600;line-height:1.1;letter-spacing:-.01em}
.poster small{display:block;font-size:12px;font-weight:500;opacity:.85;margin-top:8px;line-height:1.4}
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:8px;background:var(--card)}
/* the compare table's own rules: written bare, they also caught the parameters popup's table (checkout.js), which went
   520 px wide on a 390 px phone and panned every way (his 11-11 screenshots) */
.tbl table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:520px}
.tbl th,.tbl td{padding:10px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.tbl tr:last-child td{border-bottom:0}
.tbl th{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--band)}
.tbl th.this{color:var(--navy)}
.tbl td.c{text-align:center;color:var(--green);font-weight:700}
.tbl td.x{text-align:center;color:var(--line-2)}
.fbt{display:grid;gap:12px;padding:14px;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.fbt .items{display:flex;gap:8px;align-items:flex-start;overflow-x:auto;padding-bottom:4px}
.fbt .items>span{align-self:center;flex:none;font-size:20px;color:var(--muted)}
.fbt .it{flex:0 0 112px;display:grid;gap:5px;font-size:12px;color:var(--ink-2);line-height:1.3}
.fbt .it label{display:flex;gap:6px;align-items:center;font-weight:600;color:var(--ink)}
.fbt .it input{accent-color:var(--navy)}
.fbt .it .nm{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fbt .sum{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.fbt .sum .price{font-size:20px}
/* reviews */
.rv{display:grid;gap:14px}
.rv.amz{gap:22px}
.rv.amz .rvl h2,.rv.amz .rvr h2{font-size:21px;margin-bottom:8px}
.score-line{display:flex;align-items:center;gap:10px;font-size:18px}
.score-line .stars i{width:104px;height:19px;background-size:20.8px 19px}
.score-line .stars i::before{background-size:20.8px 19px}
.rv-form{display:grid;gap:14px;margin-top:18px;padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.rv-head{display:flex;align-items:center;gap:12px}
.rv-head img{width:44px;height:58px;object-fit:cover;object-position:top;border-radius:4px;border:1px solid var(--line)}
.rv-head b{display:block;font-size:17px} .rv-head span{font-size:13.5px;color:var(--muted)}
.rv-stars{display:flex;gap:4px}
.rv-stars label{cursor:pointer;display:block}
.rv-stars input{position:absolute;opacity:0;width:1px;height:1px}
.rv-stars svg{width:38px;height:38px;fill:none;stroke:var(--amber);stroke-width:1.4;stroke-linejoin:round;transition:fill .15s}
.rv-stars label.on svg,.rv-stars label:hover svg,.rv-stars label:has(~ label:hover) svg{fill:var(--amber)}
.rv-stars input:focus-visible+svg{outline:2px solid var(--navy);outline-offset:3px;border-radius:6px}
.rv-f{display:grid;gap:5px;font-size:13.5px;font-weight:600}
.rv-f em{font-style:normal;font-weight:400;color:var(--muted)}
.rv-f input,.rv-f textarea{font:inherit;font-weight:400;font-size:15px;padding:10px 12px;border:1px solid var(--line-2);border-radius:8px;background:var(--card);color:var(--ink);width:100%}
.rv-f textarea{resize:vertical;min-height:96px}
.rv-f input:focus,.rv-f textarea:focus{outline:2px solid var(--navy);outline-offset:1px;border-color:var(--navy)}
.rv-pair{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
@media (min-width:600px){.rv-pair{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.rv-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.rv-act{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.rv-act .btn{height:42px;padding:0 26px;width:auto}
.rv-msg{font-size:14px;color:var(--ink-2);margin:0}
@media (min-width:980px){.rv.amz{grid-template-columns:300px minmax(0,1fr);gap:40px;align-items:start}.rv.amz .rvl{position:sticky;top:110px}}
.rv .score{display:flex;align-items:center;gap:12px}
.rv .score .big{font-size:40px;font-weight:600;line-height:1;letter-spacing:-.02em}
.hist{display:grid;gap:6px;max-width:360px}
.hist div{display:grid;grid-template-columns:44px 1fr 36px;gap:8px;align-items:center;font-size:12.5px;color:var(--navy)}
.hist i{height:10px;border-radius:3px;background:var(--band);border:1px solid var(--line);overflow:hidden;display:block}
.hist i::before{content:"";display:block;height:100%;width:var(--w);background:var(--amber)}
.say{padding:14px;border:1px solid var(--line);border-radius:8px;background:var(--band);display:grid;gap:8px}
.say p{font-size:14px;color:var(--ink-2);line-height:1.5}
.say .aspects{display:flex;gap:8px;flex-wrap:wrap}
.say .aspects span{font-size:12.5px;font-weight:500;color:var(--ink-2);padding:3px 9px;border:1px solid var(--line-2);border-radius:999px;background:var(--card)}
.say .aspects span.up{color:var(--green)}
.rcard{display:grid;gap:5px;padding:14px 0;border-top:1px solid var(--line)}
.rcard .who{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2)}
.rcard .who i{width:28px;height:28px;border-radius:50%;background:var(--navy-wash);display:grid;place-items:center;font-style:normal;font-size:12px;color:var(--navy);font-weight:600}
.rcard .rt{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px;font-weight:600}
.rcard .vb{font-size:11.5px;color:var(--amber-2);font-weight:600}
.rcard .when{font-size:12px;color:var(--muted)}
.rcard p{font-size:14px;color:var(--ink-2);line-height:1.5}
.rcard .help{display:flex;gap:12px;align-items:center;font-size:12.5px;color:var(--muted)}
/* sticky bits */
.subnav{position:sticky;top:58px;z-index:20;display:flex;gap:20px;overflow-x:auto;background:var(--bg);border-bottom:1px solid var(--line);font-size:14px;font-weight:500;scrollbar-width:none}
.subnav a{padding:11px 0;color:var(--ink-2);white-space:nowrap;border-bottom:2px solid transparent}
.subnav a:hover{text-decoration:none;color:var(--ink)}
.subnav a.on{color:var(--amber);border-color:var(--amber)}
.buybar{position:fixed;left:0;right:0;bottom:56px;z-index:25;display:flex;gap:8px;align-items:center;padding:8px max(16px,env(safe-area-inset-right,0px)) 8px max(16px,env(safe-area-inset-left,0px));background:var(--bg);border-top:1px solid var(--line);box-shadow:0 -8px 24px -16px rgba(20,21,23,.25)}
.buybar .btn{flex:1;min-width:0;height:44px;padding:0 8px;font-size:14px;white-space:nowrap}
.buybar .bp{display:grid;line-height:1.15;flex:none;min-width:84px}
.buybar .bp .price{font-size:18px}
.buybar .bp small{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110px}
.botnav{position:fixed;left:0;right:0;bottom:0;z-index:26;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));height:56px;padding-bottom:env(safe-area-inset-bottom,0px);background:var(--card);border-top:1px solid var(--line)}
.botnav a{display:grid;justify-items:center;align-content:center;gap:2px;font-size:10.5px;font-weight:500;color:var(--ink-2);min-width:0}
.botnav a[aria-current]{color:var(--navy)}
.botnav svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7}
/* cart */
.cart{display:grid;gap:14px;margin-top:14px}
.ci{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:12px;align-items:start;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--card)}
.ci .t{font-size:14px;font-weight:600}
.ci .s{font-size:12.5px;color:var(--muted);line-height:1.4}
.ci .rm{font-size:12.5px;color:var(--navy)}
.sumbox{display:grid;gap:8px;padding:16px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);box-shadow:var(--sh-2)}
.sumbox div{display:flex;justify-content:space-between;gap:10px;font-size:14px;color:var(--ink-2)}
.sumbox div.tot{font-size:17px;color:var(--ink);font-weight:600;border-top:1px solid var(--line);padding-top:10px}
.sumbox .save{color:var(--green)}
.coupon{display:flex;gap:8px}
.coupon input{flex:1;min-width:0;height:40px;padding:0 12px;border:1px solid var(--line-2);border-radius:8px;background:var(--bg);font:inherit;color:var(--ink);text-transform:uppercase}
.coupon input:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px var(--navy-wash)}
.coupon button{height:40px;padding:0 14px;border:1px solid var(--navy);border-radius:8px;color:var(--navy);font-size:13px;font-weight:600}
.msg{font-size:13px;color:var(--amber-2)}
.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:rgba(20,21,23,.5);padding:20px}
.modal>div{max-width:420px;width:100%;padding:22px;border-radius:var(--r);background:var(--card);display:grid;gap:10px;box-shadow:var(--sh-2)}
.modal p{font-size:14px;color:var(--ink-2);line-height:1.5}
/* prototype marks */
.proto{position:fixed;top:0;left:0;z-index:40;padding:3px 10px;background:var(--amber);color:#fff;font:600 10px/1.6 var(--sans);letter-spacing:.1em;text-transform:uppercase;border-radius:0 0 6px 0}
.wm{position:fixed;left:0;right:0;bottom:62px;z-index:1;text-align:center;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);opacity:.12;pointer-events:none}
.empty{padding:40px 20px;text-align:center;color:var(--muted);border:1px dashed var(--line-2);border-radius:var(--r)}
/* desktop */
@media (min-width:980px){
  body{padding-bottom:60px}
  .buybar,.botnav{display:none}
  .wm{bottom:14px}
  .pd{grid-template-columns:minmax(200px,.85fr) minmax(0,1.6fr) minmax(280px,300px);gap:28px;align-items:start}
  .gal{position:sticky;top:70px}
  .gal .cover{max-width:100%}
  .side{position:sticky;top:70px}
  .side .icons{grid-template-columns:1fr 1fr}
  .shelfgrid{grid-template-columns:250px minmax(0,1fr)}
  .rail{display:block;position:sticky;top:70px;max-height:calc(100vh - 78px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:16px 16px 16px 10px;border-right:1px solid var(--line)}
  .cats{display:none}
  .results .row{grid-auto-flow:row;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));overflow:visible;scroll-snap-type:none;padding-bottom:4px}
  .results .arrow{display:none}
}
@media (min-width:1240px){
  .pd{grid-template-columns:minmax(260px,1fr) minmax(0,1.5fr) 320px;gap:32px}
  .row{grid-auto-columns:minmax(184px,1fr)} /* a short line stretches to the edge, a long one scrolls */
  .gcard .cover{max-width:220px;width:100%;margin:0 auto}
  .cart{grid-template-columns:minmax(0,1fr) 340px;align-items:start;column-gap:28px}
  .cmain{display:grid;gap:14px;min-width:0}
  .citems{display:grid;gap:12px}
  .cside{position:sticky;top:70px}
  .fbt .it{flex-basis:200px}
  .storebar .search{max-width:720px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}
/* .subnav sticks under .storebar, the guide pages' fixed header. The website check has no such header, so it would hang 58 px down with the page showing above it. */
body[data-page=check] .subnav{position:static}
/* the website check feels like an app (11-07): a tile answers the thumb, cards rise as they arrive, a tile swap crossfades.
   Scroll-driven, so nothing runs while nobody scrolls; a browser without it shows the page still. */
#pd [data-meter]{margin:2px 0 0}
@media (prefers-reduced-motion:no-preference){
  .vt{transition:transform .14s var(--ease),border-color .2s,box-shadow .2s}
  .vt:active{transform:scale(.97)}
  .strip .dot{position:relative}
  .strip .dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--amber);animation:dot-ring 2.6s ease-out infinite}
  .away .strip .dot::after{animation-play-state:paused}
  @supports (animation-timeline:view()){
    body[data-page=check] :is(.vt,#pd [data-meter],.inside,.about,.keep,.sec){animation:rise linear backwards;animation-timeline:view();animation-range:entry 0% entry 28%}
  }
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}
}
@keyframes rise{from{opacity:0;transform:translateY(16px)}}
@keyframes dot-ring{0%{opacity:.7;transform:scale(1)}60%,100%{opacity:0;transform:scale(2.6)}}
/* the books (11-07) */
.books{display:grid;gap:12px;margin:12px 0 0}
@media (min-width:760px){.books{grid-template-columns:repeat(2,minmax(0,1fr))}}
.bookcard{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.bookcard-art{display:block;container-type:inline-size}
.bookcard-text{display:grid;gap:4px;align-content:start;min-width:0}
.bookcard h2{margin:0;font-size:16px;font-weight:600;line-height:1.25}
.bookcard h2 a{color:inherit}
.bookcard p{margin:0;font-size:13.5px;line-height:1.4;color:var(--ink-2)}
.bookcard .bookcard-facts{font-size:12.5px;color:var(--muted)}
.bookcard .bookcard-buy{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px}
.bookcard-buy b{font-size:17px;font-weight:600;color:var(--ink)}
.read-first{margin-top:10px;width:100%}
.book-chapters{display:grid;gap:7px;margin:10px 0 0;padding:0;list-style:none;font-size:14.5px;line-height:1.4;color:var(--ink-2)}
body[data-page=guide] .stage{container-type:inline-size;max-width:280px;margin:0 auto}
body[data-page=shelf] .hero h1{margin:0;font-size:clamp(26px,5vw,38px);line-height:1.12}
body[data-page=shelf] .hero p{margin:0;color:var(--ink-2)}
.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.cover:has(img){aspect-ratio:2/3;background:none}
/* the shelf, 11-08: the 11-02 layout with only what is true. One cover shape in every row, the real covers' 2:3; a guide
   not written yet is not a link and wears the Coming soon band */
.gcard .cover{aspect-ratio:2/3}
.gcard.soon:hover{border-color:var(--line);box-shadow:var(--sh-1)}
.gcard.soon .cover{filter:saturate(.7)}
.cover:has(.soon-band) .ln{visibility:hidden}
.soon-band{position:absolute;left:0;right:0;bottom:7%;padding:5px 4px;background:rgba(31,29,26,.84);color:#fff;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;text-align:center}
.rail li a:not([href]),.rail li a:not([href]):hover{color:var(--muted);text-decoration:none}
.ladder-fine{margin:10px 0 0;font-size:12.5px;line-height:1.45;color:var(--muted)}
.botnav{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
a.strip,a.strip:hover{color:#fff;text-decoration:none}
/* Featured, 11-08: the books on sale, together at the top, on the amber wash */
.lineblk.featured{margin-top:18px;padding:16px 14px;border:1px solid rgba(177,79,37,.18);border-radius:12px;background:var(--amber-wash)}
.lineblk.featured .over{color:var(--amber-2)}
/* the cart, 11-08: the bottom total opens the bill; the shelf's cart button and tab carry the count */
.buybar .bp{padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.buybar .bp small[data-bill-short]{color:var(--navy);font-weight:500;text-decoration:underline;text-underline-offset:2px}
.cartbtn{padding:0;cursor:pointer}
.botnav a{position:relative}
.botnav a b{position:absolute;top:5px;left:calc(50% + 5px);min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--amber);color:#fff;font:600 10.5px/17px var(--sans);text-align:center}
/* the bundle tiles act (his 11-08 "whyt these buttons not working ?") */
button.vt{width:100%;font:inherit;cursor:pointer;align-content:start}
button.vt:active{transform:scale(.98)}
.vt .vgo{margin-top:6px;color:var(--navy);font-size:12.5px;font-weight:600;text-decoration:underline;text-underline-offset:2px}
/* save and share on every book and report (his 11-08), and no text selection on the books' pages */
.gcard{position:relative;grid-template-rows:1fr}
.gcard-go{display:grid;grid-template-rows:auto 1fr;gap:9px;color:inherit;text-decoration:none}
.gcard-go:hover{text-decoration:none}
.acts{display:flex;gap:6px}
.acts.on-cover{position:absolute;top:16px;right:16px;z-index:2;flex-direction:column}
.acts.inline{flex:none;margin-top:4px}
.act{display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid rgba(31,29,26,.12);border-radius:50%;background:rgba(255,255,255,.95);box-shadow:0 2px 6px rgba(20,18,15,.14);color:#3B3D42;cursor:pointer;transition:transform .14s var(--ease)}
.act:active{transform:scale(.88)}
.act svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.act[aria-pressed=true]{color:#C0412F;border-color:rgba(192,65,47,.35)}
.act[aria-pressed=true] svg{fill:currentColor}
.acts.small .act{width:28px;height:28px}
.acts.small .act svg{width:15px;height:15px}
.title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.savedpill{flex:none;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid var(--line-2);border-radius:999px;background:var(--card);color:#C0412F;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.savedpill svg{width:15px;height:15px;fill:currentColor}
.savedpill[aria-pressed=true]{border-color:#C0412F;background:#FBEDEA}
.savedpill[hidden]{display:none}
.toast{position:fixed;left:50%;bottom:calc(88px + env(safe-area-inset-bottom,0px));z-index:200;transform:translateX(-50%);width:max-content;max-width:min(92vw,440px);margin:0;padding:10px 16px;border-radius:10px;background:#1F1D1A;color:#fff;font:500 13.5px/1.35 var(--sans);text-align:center;box-shadow:0 10px 30px -10px rgba(20,18,15,.5)}
body[data-page=shelf],body[data-page=guide],body[data-page=check],.sheet{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none} /* the website check too (his 11-11: "i dont want text to sleectable") */
input,textarea{-webkit-user-select:text;user-select:text}
/* the card: cover and name are the link, then the price row with save and share, then the facts */
.gcard{grid-template-rows:none;align-content:start;gap:6px}
.gcard-go{grid-template-rows:none;gap:9px}
.gcard-foot{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:30px}
.acts.small{gap:4px}
.acts.small .act{width:30px;height:30px;box-shadow:none}
/* the offers, one bar under Featured (his 11-08) */
.offers-row{padding-top:16px}
.offers-row .offer-bar{width:100%}
#checkout-modal{-webkit-user-select:text;user-select:text}