/* The product pages of the minimalist Bible books (minimalist-bible-books.html, new-testament.html), 2026-10-19:
   the gallery of product models (the chosen binding's Blender render in three views, the eBook on a tablet), the price with
   the free-shipping stamp beside "Buy", and the buy bar on a phone. Builds on minimalist-bible-books-20261014.css.
   The stamp itself is the shared css/free-shipping-20261019.css; only its spacing here. */

/* ---------- the ground: white edge to edge (owner, 2026-10-19), with no dark site background or blurred wood photograph
   behind it (style.css body.solid-black), so neither shows on overscroll and neither is downloaded ---------- */
html,body.product-page.solid-black{background:#fff!important;background-image:none!important}
body.product-page.solid-black::before,body.product-page.solid-black::after{content:none;background:none!important;filter:none}

/* ---------- the gallery ---------- */
.tb-stage{position:sticky;top:20px;display:block;padding:0;min-width:0}
.tb-header+.tb-hero{margin-top:-12px}
.pg{--pg-w:min(100%,440px);width:var(--pg-w);margin:0 auto;display:grid;gap:12px}
.pg-track{list-style:none;margin:0;padding:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;border-radius:4px}
.pg-track::-webkit-scrollbar{display:none}
.pg-track:focus-visible{outline:2px solid var(--tb-accent);outline-offset:4px}
.pg-slide{flex:0 0 100%;margin:0;padding:0;scroll-snap-align:center;scroll-snap-stop:always;aspect-ratio:2/3;position:relative}
.pg-zoom{all:unset;box-sizing:border-box;display:block;width:100%;height:100%;cursor:zoom-in;position:relative}
.pg-zoom:focus-visible{outline:2px solid var(--tb-accent);outline-offset:-2px}
.pg-zoom>img{display:block;width:100%;height:100%;object-fit:contain}
/* a printed book without its render shows its own flat cover, at the size of the books in the renders */
.pg-cover .pg-zoom{display:grid;place-items:center}
.pg-cover .pg-zoom>img{width:66%;height:auto;aspect-ratio:2/3;box-shadow:0 2px 3px rgba(0,0,0,.14),0 22px 36px -14px rgba(0,0,0,.32)}
/* the eBook: its cover on a tablet screen, drawn in CSS in the same 2:3 box as the renders (no layout shift on a format change) */
.pg-tablet .pg-zoom{display:grid;place-items:center}
.pg-device{position:relative;display:block;width:80%;padding:3.4%;border-radius:22px/15px;background:linear-gradient(160deg,#3a3b3d,#141516 55%,#0b0b0c);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px #050505,0 2px 3px rgba(0,0,0,.18),0 30px 46px -18px rgba(0,0,0,.42)}
.pg-device::before{content:"";position:absolute;top:1%;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:#2c2d2f;box-shadow:0 0 0 1px #000}
.pg-screen{display:block;overflow:hidden;border-radius:4px;background:#fff;aspect-ratio:2/3}
.pg-screen>img{display:block;width:100%;height:100%;object-fit:cover}
/* three views to choose from (front, spine, back), one row; kept in place for a single picture so nothing moves */
.pg-thumbs{display:flex;justify-content:center;gap:10px;min-height:78px}
.pg.is-single .pg-thumbs{visibility:hidden}
.pg-thumb{all:unset;box-sizing:border-box;cursor:pointer;width:52px;height:78px;border:1px solid var(--tb-line);border-radius:6px;background:#fff;display:grid;place-items:center;overflow:hidden}
.pg-thumb img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.35);transform-origin:50% 55%}
.pg-thumb:hover{border-color:var(--tb-fg)}
.pg-thumb[aria-pressed="true"]{border:2px solid var(--tb-fg)}
.pg-thumb:focus-visible{outline:2px solid var(--tb-accent);outline-offset:2px}

/* ---------- the book's name, the buy box ---------- */
.tb-name{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.tb-name span{font:600 12px var(--tb-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--tb-muted)}
.tb-name strong{font:400 30px/1.1 var(--tb-display)}
.tb-purchase{display:grid;gap:14px;padding:16px 0 2px;border-top:1px solid var(--tb-line)}
.tb-price-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 18px}
.tb .tb-price{display:grid;gap:6px;align-items:baseline}
.tb .tb-price strong{font:400 40px/1 var(--tb-display)}
.tb .tb-price span{font:600 12px/1.4 var(--tb-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--tb-muted)}
.tb .tb-price-row .ship-note{margin:-6px 0 0;flex-basis:100%}
.tb .ship-note[hidden],.tb-buybar .ship-note[hidden]{display:none}
.tb-actions .tb-buy-btn{flex:1 1 200px;min-height:54px;font-size:16px;letter-spacing:.02em}
.tb-actions .tb-btn.ghost{min-height:54px}
.tb-more{font:600 13px var(--tb-ui)}
.tb-more a{display:inline-flex;align-items:center;min-height:44px;text-underline-offset:3px}
.tb-end-price{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:8px}
.tb-end-price strong{font:400 30px/1 var(--tb-display)}
.tb-end-price span{font:600 12px var(--tb-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--tb-muted)}
.tb-lede{max-width:66ch}
.tb-opt{align-items:flex-start}
.tb-opt legend{padding-top:15px}
.ntp .nt-pick select{min-height:44px}
.nt-unit img[data-kind="model"]{box-shadow:none;border-radius:0;outline:none}
.ntp .nt-unit{border-radius:8px;padding:6px 4px 10px}
.nt-unit[aria-current="true"]{background:#f3f3f3}
.nt-edition{background:#fff}
.nt-edition-copy .ship-note{justify-self:start;margin:4px 0 0}
.nt-edition:hover{background:#f6f6f6}

/* ---------- the buy bar on a phone, while the buy box is out of view ---------- */
.tb-buybar{display:none}
@media (max-width:760px){
  .tb-buybar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;align-items:center;gap:10px;
    padding:10px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
    background:#fff;border-top:1px solid var(--tb-line);box-shadow:0 -8px 24px rgba(0,0,0,.08);font-family:var(--tb-ui);color:var(--tb-fg);
    transform:translateY(110%);transition:transform .25s cubic-bezier(.2,.7,.2,1);visibility:hidden}
  .tb-buybar.is-on{transform:none;visibility:visible}
  .tb-buybar[hidden]{display:none}
  .tb-buybar-info{flex:1 1 auto;min-width:0;display:grid;gap:2px}
  .tb-buybar-name{font:600 11px/1.3 var(--tb-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--tb-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tb-buybar-price{font:400 26px/1 var(--tb-display)}
  .tb-buybar .ship-note{margin:2px 0 0;font-size:11px;line-height:1.3}
  .tb-buybar .tb-btn{flex:none;min-height:48px;min-width:88px;padding:10px 22px;font-size:15px}
  html.tb-bar-on #cookie-settings{bottom:calc(84px + env(safe-area-inset-bottom,0px))!important}
  .tb-wrap{padding-bottom:110px}
}

@media (prefers-reduced-motion:reduce){.tb-buybar{transition:none}.pg-track{scroll-behavior:auto}}

/* ---------- phones: the book first, then its name, the choice and Buy ---------- */
@media (max-width:760px){
  .tb-wrap{gap:28px}
  .tb h1{font-size:clamp(36px,10vw,48px)}
  .tb-stage{position:static}
  .pg{--pg-w:min(100%,400px)}
  .tb-hero{gap:14px}
  .tb-side{gap:14px}
  .tb-side>.tb-name{order:1}
  .tb-side>.nt-members-line{order:2}
  .tb-side>.tb-verse{order:3;font-size:24px}
  .tb-side>.tb-note{order:4}
  .tb-side>.tb-picker,.tb-side>.nt-pick{order:5}
  .tb-side>.tb-buy{order:6}
  .tb .tb-price strong{font-size:36px}
  .tb-actions{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:10px}
  .tb-actions .tb-btn{width:100%;padding-left:12px;padding-right:12px}
  .tb-actions .tb-btn[hidden]{display:none}
  .tb-actions:has(.tb-btn.ghost[hidden]){grid-template-columns:1fr}
  .tb-picker{gap:8px}
  /* the legend above its pills, so three formats or four texts fit a phone row */
  .tb-opt{flex-direction:column;align-items:stretch;gap:6px}
  .tb-opt legend{float:none;min-width:0;margin:0 0 6px;padding-top:0}
  .ntp .nt-pick select{flex:1 1 220px}
}