/* ==========================================================================
   product.css : the book page, Change 7 «הספר שהורד מהמדף» (.site/shop/concept-c7-book.md, ported from the creative
   director's comp cd-book/book.css with the binding amendments of the ai-detector review A1-A8), rescaled in Change 9
   (the author: «הטקסט והכותרת ענקיים. להקטין הכל»): the title 57 -> 36px (28 on a phone), reading text 18 -> 17, the hook
   22 -> 18, the cover 500 -> 360px tall, the passages 88 -> 56px apart; the shop's board and age tag unchanged, so the book
   still stands on the same shelf as in the shop.
   Loaded after shop.css on single products only; reads base.css tokens and shop.css's shared block (.btn-buy, .age-n,
   .book, .buy-row, .qty, .price, .sample-plate).
   The rule of the page (decisions 2026-10-17: the site is not full width on desktop, so the book page cannot be):
   everything coloured or pictorial lives inside .wrap. The book's colour is spent in contained objects only: the deep
   bay the cover rises out of (--book-back), one «page of the book» panel (--book-ground), the small bays of the other
   books; its own words (hook, excerpt) speak in --book-ink. Titles, labels, buttons and rules are the site's.
   The guiding line with the shop (shop-table.css, concept-c7-shop §4): the same board at the same thickness (30, phone
   26), the same paper age tag, books bottom-aligned on it rising 40% out of their bays.
   The board and tag values are COPIED from shop-table.css (.tt --ledge-h, --tag-h, --tag-lift, --board, .age-tag),
   because the book page does not load it: edit both together until the duplicates are folded into shop.css.
   Per book (printed by inc/book.php on .pp-page and on each other book): --book-ground --book-back --book-deep
   --book-ink --r (the cover's width / height).
   RTL: logical properties only; physical values appear only in shadows, which follow the light (upper right).
   ========================================================================== */

.pp-page {
  --stage-w: 420px;            /* the cover's stage, at the reading end (left) */
  --fit-h: 360px;              /* the cover's fit box */
  --fit-w: 270px;
  --ch: min(var(--fit-h), calc(var(--fit-w) / var(--r)));   /* the cover's height, from its own ratio */
  --cw: calc(var(--ch) * var(--r));
  --bay-rise: .40;             /* the part of the cover that rises out of its bay into the paper (the shop's 40%) */
  --bay-room: 112px;           /* the bay is the book's own niche: the cover plus 56px each side (A1) */
  --ledge-h: 30px;             /* the shop's board (shop-table.css .tt --ledge-h) */
  --tag-h: 24px;               /* the shop's age tag (creative-director-c7-shop-verdict.md: 24 tall, 3px above the board's foot) */
  --tag-lift: 3px;
  --board: linear-gradient(var(--ledge-top) 0 4px, var(--ledge) 4px calc(100% - 2px), var(--rule) calc(100% - 2px));
  --board-shadow: 0 2px 0 var(--rule), 0 3px 4px rgb(0 0 0 / .08);   /* a foot line and a close shadow: no halo onto what follows */
  --sec: 56px;                 /* the space between the page's passages: no bands, no section grounds */
  --row-h: 280px;              /* «טעימה קטנה...»: the height the pages of the book stand at (inc/book.php sizes) */
}
.pp-js { scroll-padding-bottom: 84px; }   /* a control brought into view by Tab is never left under the bar */

/* ---------- top: the way back, in the shop's label voice (concept-c8 note 6) ----------
   «→ חנות הספרים • <title>»: the shop link in plum Alef with an arrow pointing the way back (right, in Hebrew), a small plum dot (the
   dots between the shop's tables), the title in ink. One row at the content's start edge; the title is never cut. */
.pp-top { display: flex; align-items: center; flex-wrap: wrap; gap: 0 24px; padding-block: 8px 4px; }
.pp-crumbs { flex: 1 1 auto; min-width: 0; }
.pp-crumbs ol { display: flex; flex-wrap: nowrap; align-items: center; gap: 0 10px; margin: 0; padding: 0; list-style: none; }
.pp-crumbs li { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pp-crumbs a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  color: var(--plum); font: 700 16px/1 var(--font-display); text-decoration: none;
}
.pp-crumbs a:hover .pp-shop, .pp-crumbs a:focus-visible .pp-shop { text-decoration: underline 1.5px; text-underline-offset: 5px; }
.pp-crumbs a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
.pp-arrow { flex: none; width: 16px; height: 16px; }
.pp-crumbs [aria-current] { color: var(--ink); font: 400 16px/1.3 var(--font-display); }
.pp-sep { flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--plum); opacity: .6; }
.pp-back-link {                /* the way back to the shop: a link, in the shop's «לעמוד הספר» voice */
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--link); font: 600 15px/1.4 var(--font-body);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  transition: text-decoration-thickness var(--dur-state) var(--ease-standard);
}
.pp-back-link:hover, .pp-back-link:focus-visible { text-decoration-thickness: 2px; }
/* every plain link and the quantity field answer hover and focus at the state pace (buttons keep their own transition) */
:where(.pp-page) a:not(.btn), .pp-buy .qty-input {
  transition: color var(--dur-state) var(--ease-standard), text-decoration-thickness var(--dur-state) var(--ease-standard), background-color var(--dur-state) var(--ease-standard);
}

/* ---------- hero: the shelf. The info on the paper, the cover in its bay, one board under both ---------- */
.pp-shelf {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--stage-w);
  column-gap: 56px;
  align-items: end;
  padding-block-end: var(--ledge-h);
  margin-block-start: 4px;
}
.pp-shelf::after {             /* the shop's board, across the whole wrap and no further */
  content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; height: var(--ledge-h);
  background: var(--board); box-shadow: var(--board-shadow);
  pointer-events: none; z-index: 2;
}
.pp-hero-info { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; align-self: stretch; padding-block: 20px 24px; min-width: 0; }
.pp-title-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.pp-title {
  font: 700 clamp(1.75rem, 1vw + 1.35rem, 2.25rem)/1.2 var(--font-heading);   /* 28 (phone) -> 36 (1440): the page's title, in proportion with the shop's and the pages' (41) */
  color: var(--ink);
  max-inline-size: 12em;
  text-wrap: balance;
}
.pp-page .chip-new {           /* «ספר חדש»: plain words in the label voice, no pill */
  display: inline; min-height: 0; padding: 0; border: 0; border-radius: 0;
  color: var(--plum); font: 700 16px/1.3 var(--font-display);
}
.pp-credits { margin-block-start: 8px; font-size: var(--t-small); color: var(--text-muted); }
.pp-hook {                     /* her «במשפט אחד»: the line a parent reads aloud, in the book's own ink */
  margin-block-start: 14px; max-width: 32em;
  font: 400 1.125rem/1.55 var(--font-display); color: var(--book-ink);
  text-wrap: pretty;
}

/* the buy group: no box. «לרכישה» stands at the start of the row like the shop's row labels, then price | stepper | button */
.pp-buy {
  align-self: stretch; max-width: 520px;
  margin-block-start: 22px; padding-block-start: 18px; border-block-start: 1px solid var(--rule);
  display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 18px; align-items: center;
}
.pp-buy > * { grid-column: 2; }
.pp-buy > .buy-title { grid-column: 1; grid-row: 1; }
.pp-page .buy { background: none; border-radius: 0; box-shadow: none; padding-inline: 0; padding-block-end: 0; }
.pp-buy .buy-title { margin: 0; font: 700 16px/1.3 var(--font-heading); color: var(--plum); }
.pp-buy .buy-row { gap: 10px 14px; }
/* From 600px the price has its line and the stepper and the button share the next, whatever the price says (the owner, Change 15 fix 2, «המבנה נשבר
   ומשתבש עם ההנחה»). Until 1.9.1 price | stepper | button stood on one line when the three happened to fit: a sale price (the regular price struck through
   beside it) needs 442px of the 450 the group has at its widest, so between 900 and 935px the button dropped to a line of its own, and so would a bigger
   price or larger text. The button takes what the stepper leaves of the line. A phone keeps its own arrangement (below). */
@media (min-width: 600px) {
  .pp-buy .buy-row { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; }
  .pp-buy .buy-row > .price, .pp-buy .buy-row > .price-note { grid-column: 1 / -1; }
  .pp-buy > .buy-title { align-self: start; margin-block-start: 8px; }   /* on the price line's baseline, not centred on the two lines */
}
.pp-buy .price { font-size: 1.75rem; margin-inline-end: 4px; }
.pp-buy .qty { background: var(--paper-light); height: 46px; }
.pp-buy .qty-btn { height: 43px; width: 42px; transition: background-color var(--dur-state) var(--ease-standard); }
.pp-buy .qty-input { height: 43px; font: 700 var(--t-body)/1 var(--font-body); color: var(--ink); }   /* an input does not inherit the page face */
.pp-buy .btn-buy { min-height: 46px; min-width: 170px; font-size: 17px; }
.pp-buy > .stock-note { margin-block-start: 2px; }
.pp-buy .price-was, .pp-bar-price .price-was { font: 400 1.125rem/1 var(--font-display); color: var(--muted); text-decoration: line-through 1px; margin-inline-end: 6px; }   /* the regular price beside a sale price */
.pp-buy.is-oos .price { color: var(--muted); }   /* not buyable: the price is information, not an offer (F7) */
.pp-oos-next { margin-block-start: 4px; justify-self: start; }
.pp-paypal { margin-block-start: 12px; max-width: 340px; }

/* the product's extra link («דפי צביעה»): the shop's quiet second button (paper, ink edge; shop-table.css .buy .page-link).
   Leading to the colouring gallery, two of its sheets rise out of the button's start as they rise out of the shop's
   colouring box, and the second slides out on hover and focus: the pages are there to take. */
.pp-colouring {
  position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 46px;
  margin-block-start: 20px; padding: 0 16px; border-radius: 3px;
  background: var(--paper-light); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink);
  font: 700 16px/1.15 var(--font-body); text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-state) var(--ease-standard), box-shadow var(--dur-state) var(--ease-standard);
}
.pp-colouring:hover, .pp-colouring:focus-visible { background: #DCE6E3; color: var(--ink); box-shadow: inset 0 0 0 2.5px var(--ink); }   /* the paper stays and the edge deepens, as the shop's «לעמוד הספר» */
.pp-colouring:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.pp-colouring-arrow { flex: none; width: 16px; height: 16px; transition: transform var(--dur-state) var(--ease-standard); }
.pp-colouring:hover .pp-colouring-arrow, .pp-colouring:focus-visible .pp-colouring-arrow { transform: translateX(-3px); }   /* forward, in Hebrew */
.pp-colouring.has-sheets { margin-block-start: 20px; min-height: 56px; padding-inline-start: 76px; }   /* the sheets stand inside the button: its picture of the pages */
.pp-sheets { position: absolute; inset-inline-start: 12px; inset-block: 6px; width: 56px; height: auto; pointer-events: none; }
.pp-sheet {
  position: absolute; inset-block-end: 0; width: 34px; height: auto; max-width: none;
  background: #fff; border: 1px solid #DDD8CC; box-shadow: 0 6px 14px -8px rgba(40, 32, 20, .45);
  transition: transform var(--dur-layout) var(--ease-standard);
}
.pp-sheet-1 { inset-inline-start: 0; z-index: 2; }
.pp-sheet-2 { inset-inline-start: 18px; z-index: 1; }
.pp-colouring:hover .pp-sheet-2, .pp-colouring:focus-visible .pp-sheet-2 { transform: translateX(-6px); }

/* the stage: the book's bay, cut to the book. The cover stands on the board and rises out of the bay */
.pp-stage {
  position: relative; margin: 0; margin-block-end: calc(-1 * var(--ledge-h)); padding-block-end: var(--ledge-h);
  display: flex; justify-content: center; align-items: flex-end;
  min-height: calc(var(--ch) + 20px + var(--ledge-h));
}
.pp-stage::before {            /* the bay: --book-back, the cover's width plus its niche, from 40% down the cover to the board */
  content: ""; position: absolute; z-index: 0; inset-block-end: var(--ledge-h);
  inset-inline: 0; margin-inline: auto; width: min(100%, var(--cw) + var(--bay-room));
  height: calc(var(--ch) * (1 - var(--bay-rise)));
  background: var(--book-back);
}
.pp-stage .book { position: relative; z-index: 1; }
.pp-stage .pp-cover-img { display: block; width: var(--cw); height: var(--ch); max-width: none; object-fit: cover; }   /* two classes: WooCommerce's `.woocommerce img` must not resize it */

/* the age tag: the shop's paper label on the board's front, centred under the cover */
.pp-page .age-tag {
  position: absolute; z-index: 3; inset-block-end: var(--tag-lift);
  box-sizing: border-box; display: flex; align-items: center; min-height: var(--tag-h);
  margin: 0; padding: 2px 8px; border-radius: 2px; background: var(--paper-light); white-space: nowrap;
}
.pp-stage .age-tag { left: 50%; transform: translateX(-50%); width: max-content; max-width: 100%; }   /* on the cover's axis, as in the shop (centring has no direction) */
.pp-page .age-vis { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.pp-page .age-tag .age-n { display: inline; font: 700 20px/1 var(--font-display); text-align: start; }
.pp-page .age-tag .age-words { display: inline; font: 400 15px/1 var(--font-body); color: var(--text); }
.pp-page .age-tag .age-whole { color: var(--muted); }   /* a tag of words only (no numeral) stays quiet */

/* the book object, the shelf's language scaled (shop-table .front / .face / .contact): binding shade on the spine
   (inline start), cast shadow to the lower left, contact shadow sunk into the board's top */
.pp-page .book::before { width: 10px; background: linear-gradient(to left, rgba(0, 0, 0, .22), rgba(0, 0, 0, 0) 60%, rgba(255, 255, 255, .18) 75%, rgba(255, 255, 255, 0)); }
.pp-page .book > img, .pp-page .book > .sample-plate { border-radius: 0 2px 2px 0; box-shadow: -18px 13px 28px -18px rgba(40, 32, 20, .42); }
.pp-stage .book::after {
  content: ""; position: absolute; z-index: -1; inset: auto -20px -8px; width: auto; height: 18px;
  background: radial-gradient(closest-side, rgba(40, 32, 20, .45), rgba(40, 32, 20, 0)); border-radius: 0;
}

/* no cover image: the cloth plate in the book's ink, its title in light paper */
.pp-page .sample-plate { width: var(--cw); height: var(--ch); max-width: none; aspect-ratio: auto; background: var(--book-ink); color: var(--paper-light); }
/* the hero's plate is the shop's «ספר חדש בדרך» book, darker (F6): the logo's leaf (the shop's own mask, .blank-branch in
   shop-table.css) at the optical centre, and the shop's two short rules under the title. Decorative: the plate itself is
   the role=img with its name. */
.pp-stage .sample-plate { position: relative; padding-inline: 20px; }
.pp-stage .sample-plate::before {
  content: ""; position: absolute; inset-inline: 0; margin-inline: auto; inset-block-start: 45%; transform: translateY(-50%);
  width: 72px; aspect-ratio: 99 / 166; background: var(--paper-light); opacity: .35; pointer-events: none;
  -webkit-mask: url(../img/logo-branch-mask.png) center / contain no-repeat;
  mask: url(../img/logo-branch-mask.png) center / contain no-repeat;
}
.pp-stage .sample-plate-title { position: relative; font-size: 20px; }
.pp-stage .sample-plate-title::after, .pp-stage .sample-plate-title::before {   /* two rules 10px apart, 56 and 36 long, on the title's start line */
  content: ""; position: relative; display: block; opacity: .5; pointer-events: none;
}
.pp-stage .sample-plate-title::after { box-sizing: content-box; width: 56px; height: 11px; margin-block-start: 10px; border-block-start: 1px solid var(--paper-light); }
.pp-stage .sample-plate-title::before { position: absolute; inset-inline-start: 0; inset-block-end: 0; width: 36px; height: 1px; background: var(--paper-light); }

/* ---------- about: the description beside a page of the book ---------- */
.pp-about { padding-block: var(--sec) 0; }
.pp-about-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); column-gap: 56px; align-items: start; }
.pp-about-nopanel { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {    /* a short description sits at the middle of the page of the book beside it, never abandoned at the top of a tall column (F2) */
  .pp-desc { align-self: center; }
  .pp-page-of { align-self: start; }
}
.pp-h2 { font: 700 1.375rem/1.3 var(--font-heading); color: var(--plum); margin-block-end: 12px; text-wrap: balance; }   /* 22: the shop's own h2 */
.pp-desc { max-width: 62ch; }
.pp-desc-text { font-size: var(--t-body); line-height: var(--lh-read); }
.pp-desc-text p + p { margin-block-start: .8em; }
.pp-desc-text .pp-lead, .pp-desc-text .pp-lead-in { font: 700 1.1875rem/1.5 var(--font-display); color: var(--ink); }   /* her short first paragraph, or her first sentence when the paragraph is long (F3): one rule, so they cannot drift */
.pp-desc-text .pp-lead { margin-block-end: .4em; }
.pp-desc-text .pp-lead-in { display: block; margin-block-end: 8px; }
/* only on a book with no description (template-parts/book-about.php): her values under the summary, in the label voice */
.pp-values { margin: 18px 0 0; padding-block-start: 14px; border-block-start: 1px solid var(--rule); }
.pp-values dt { font: 700 15px/1.3 var(--font-heading); color: var(--plum); }
.pp-values dd { margin: 4px 0 0; font-size: var(--t-small); line-height: 1.7; color: var(--text-muted); }

/* the page of the book: one panel in the book's ground, printed like a picture book's page. The art runs to the panel's
   top and side edges (A6), the excerpt sits in the page's margins. Change 22 (the owner: «להוריד את המאייר מסקשן מתוך הספר»): the
   illustrator's plate caption is gone, and with it the bottom room it needed (48px, 44px on a phone): the page ends 28px under the excerpt. */
.pp-page-of { position: relative; margin: 0; background: var(--book-ground); padding-block-end: 28px; }
.pp-art img { display: block; width: 100%; height: auto; }
.pp-excerpt { margin: 22px 28px 0; }
.pp-excerpt-cap { font: 700 15px/1.3 var(--font-heading); color: var(--plum); margin-block-end: 8px; }
.pp-excerpt-text { font: 400 1.125rem/1.8 var(--font-display); color: var(--book-ink); }
/* an excerpt with no art and no strip: the words alone on the page */
.pp-page-of.is-text { padding: 22px 28px 24px; }
.pp-page-of.is-text .pp-excerpt { margin: 0; }
/* without interior art: the strip (a slice of the book's own picture) at the reading end of the panel */
.pp-page-of.is-strip { display: grid; grid-template-columns: minmax(0, 1fr) 112px; padding: 0; }
.pp-page-of.is-strip .pp-excerpt { margin: 22px 24px 24px; }
.pp-page-of.is-strip .pp-strip { margin: 0; position: relative; overflow: hidden; }
.pp-page-of.is-strip .pp-strip img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 58%; }
.pp-page-of.is-strip .pp-excerpt-text { font-size: 1.0625rem; }
.pp-about-solo .pp-page-of { grid-column: 1; max-width: 460px; }

/* ---------- «טעימה קטנה...»: up to three pages of the book, laid on the paper like sheets ----------
   A quiet label (smaller than «על הספר»), then the pages in one row at one height (--row-h), each as wide as its own ratio
   (--ar, printed per page): a portrait page and a double spread stand side by side with no letterboxing. When the row is
   wider than the wrap every page shrinks by the same share (flex-shrink against the basis), so they stay one height.
   No panel and no tint: the page of the book above is the coloured object; these are paper, with the book's ink only on
   the edge that answers hover and focus. */
.pp-samples { padding-block: var(--sec) 0; }
.pp-samples-h { margin-block-end: 14px; font: 700 1.0625rem/1.3 var(--font-heading); color: var(--plum); }
.pp-samples-list { display: flex; align-items: flex-end; gap: 20px; margin: 0; padding: 0; list-style: none; }
.pp-sample { position: relative; flex: 0 1 calc(var(--row-h) * var(--ar, .75)); min-width: 0; }   /* relative: the hidden «(תצוגה מוגדלת)» is placed inside the page, never outside the phone scroller's clip */
.pp-sample-link { display: block; line-height: 0; border-radius: 1px; cursor: zoom-in; }
.pp-sample-img {
  display: block; width: 100%; height: auto; max-width: none; background: var(--paper-light);
  box-shadow: 0 0 0 1px rgba(40, 32, 20, .10), -12px 12px 24px -16px rgba(40, 32, 20, .45);
  transition: box-shadow var(--dur-state) var(--ease-standard);
}
.pp-sample-link:hover .pp-sample-img, .pp-sample-link:focus-visible .pp-sample-img { box-shadow: 0 0 0 2px var(--book-ink), -12px 12px 24px -16px rgba(40, 32, 20, .45); }
.pp-sample-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 5px; }
/* no pages yet: three blank pages hold the room (aria-hidden): light paper, the book's colour on the fore-edge, the spine's shade */
.pp-sample.is-blank {
  position: relative; aspect-ratio: 3 / 4;
  background: linear-gradient(to left, rgba(40, 32, 20, .09), rgba(40, 32, 20, 0) 18px) var(--paper-light);
  box-shadow: inset 3px 0 0 var(--book-back), 0 0 0 1px rgba(40, 32, 20, .08), -12px 12px 24px -16px rgba(40, 32, 20, .35);
}
/* the room, not the final size (real pages keep 280 / 240 / 220), drawn like the shop's «ספר חדש בדרך»: the logo's sprig in pencil,
   so a blank reads as a page still to come and not as an image that failed to load */
.pp-samples.is-empty { --row-h: 200px; }
.pp-sample.is-blank { display: grid; place-items: center; }
.pp-sample.is-blank::before {
  content: ""; width: 28%; aspect-ratio: 99 / 166; background: rgba(142, 135, 120, .45);
  -webkit-mask: url(../img/logo-branch-mask.png) center / contain no-repeat;
  mask: url(../img/logo-branch-mask.png) center / contain no-repeat;
}
.pp-samples-hint { margin-block-start: 16px; font-size: var(--t-small); color: var(--text-muted); }
.pp-samples-hint a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- other books: a short shelf in the shop's language. Each book in its own small bay, one board ---------- */
.pp-more { padding-block: var(--sec) 48px; }
@media (min-width: 1100px) { .pp-more { padding-block-start: 40px; } }   /* the covers rise above the board and already make the gap (F5) */
.pp-more-shelf { display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: 24px; align-items: start; }
.pp-more-shelf .pp-h2 { margin: 0; padding-block-start: 176px; }   /* the label sits on the board, as the shop's row labels */
.pp-more-list {
  display: grid; grid-template-columns: repeat(auto-fill, 200px); gap: 56px 10px;
  /* every board piece runs on toward the end of the wrap; the list clips it there, so a row with fewer books still ends
     on the wrap's line (room for the books still coming, A5). The padding keeps the focus rings inside the clip. */
  padding: 8px; margin-block-start: -8px; margin-inline-start: -8px;
  overflow-x: hidden;
}
@supports (overflow-x: clip) {   /* clip keeps the block axis visible (hidden would make the list a scroll box) */
  .pp-more-list { overflow-x: clip; }
}
.pp-more-item { position: relative; display: flex; flex-direction: column; min-width: 0; }
.pp-more-stage { position: relative; display: flex; justify-content: center; align-items: flex-end; height: 184px; }
.pp-more-stage::before {       /* the item's own bay, in its own ground; deeper on hover and focus */
  content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; height: 100px;
  background: var(--book-ground); transition: background-color var(--dur-state) var(--ease-standard);
}
.pp-more-stage::after {        /* this item's piece of the board: over the gap before it, and on to the end of the row */
  content: ""; position: absolute; inset-inline-start: -5px; inset-inline-end: -1200px; inset-block-end: calc(-1 * var(--ledge-h)); height: var(--ledge-h);
  background: var(--board); box-shadow: var(--board-shadow); z-index: 2;
}
.pp-more-stage .age-tag { inset-block-end: calc(var(--tag-lift) - var(--ledge-h)); inset-inline-start: 14px; max-width: calc(100% - 28px); }
.pp-more-stage .book { z-index: 1; background: var(--book-deep); border-radius: 0 2px 2px 0; }   /* a cover that has not loaded yet is the closed book in its own back-cover colour, never an empty frame (F1) */
.pp-more .book > .pp-more-img { display: block; height: min(164px, calc(156px / var(--r))); width: auto; max-width: none; }
.pp-more .book > .sample-plate { height: min(164px, calc(156px / var(--r))); width: calc(min(164px, calc(156px / var(--r))) * var(--r)); padding: 12px 8px; }
.pp-more .sample-plate-title { font-size: 15px; }
.pp-more-stage .book::after { display: none; }
.pp-more .book > img, .pp-more .book > .sample-plate { box-shadow: -10px 8px 16px -10px rgba(40, 32, 20, .42); }
.pp-more .book::before { width: 7px; }
.pp-more-caption { padding: calc(var(--ledge-h) + 12px) 14px 0; }
.pp-more-title { font: 700 17px/1.35 var(--font-heading); text-wrap: balance; }
.pp-more-title a { display: inline-block; padding-block: 11px; margin-block: -11px; color: var(--ink); text-decoration: none; }   /* a 44px box of its own as well, with no change to the layout */
.pp-more-title a::after { content: ""; position: absolute; inset: 0; }   /* the whole item is the title link's target */
.pp-more-item:hover .pp-more-title a, .pp-more-title a:focus-visible { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.pp-more-item:hover .pp-more-stage::before, .pp-more-item:focus-within .pp-more-stage::before { background: var(--book-back); }
@supports selector(:has(a)) {  /* the ring goes round the whole item the link covers; without :has() it stays on the link */
  .pp-more-title a:focus-visible { outline: none; }
  .pp-more-item:has(.pp-more-title a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
}
.pp-more-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 16px; margin-block-start: 4px; }
.pp-more-price { font: 700 17px/1.3 var(--font-display); font-variant-numeric: tabular-nums; }
.pp-more-link {
  position: relative; z-index: 1; display: inline-flex; align-items: center; min-height: 44px;
  font: 600 15px/1.4 var(--font-body); color: var(--link);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.pp-more-link:hover, .pp-more-link:focus-visible { text-decoration-thickness: 2px; }
.pp-back { margin-block-start: 28px; }

/* ---------- the bar: inside the wrap, never wider (A4: the wrap's outer line, the board's and the rules') ---------- */
.pp-bar { position: relative; }
.pp-bar-inner {
  display: flex; align-items: center; gap: 10px 20px; min-height: 64px;
  padding: 8px 20px; background: var(--paper-light);
  border: 1px solid var(--rule); border-block-end: 0;
}
.pp-bar-cover { flex: none; line-height: 0; }
.pp-bar-cover img { height: 44px; width: auto; box-shadow: -5px 4px 8px -5px rgba(40, 32, 20, .45); }
.pp-bar-title { font: 700 18px/1.3 var(--font-heading); color: var(--ink); margin-inline-end: auto; min-width: 0; }
.pp-bar .price { font-size: 22px; margin-inline-end: 0; }
.pp-bar-btn { min-width: 160px; min-height: 44px; font-size: 16px; }
.pp-js .pp-bar {
  position: fixed; inset-block-end: 0; inset-inline: 0; z-index: 40; margin-inline: auto;
  box-shadow: 0 -3px 4px rgb(0 0 0 / .08);   /* the board's own shadow, upwards (F8) */
  transform: translateY(100%); visibility: hidden;
  transition: transform var(--dur-layout) var(--ease-decelerate), visibility 0s linear var(--dur-layout);
}
.pp-js .pp-bar.is-on { transform: none; visibility: visible; transition-delay: 0s; }

/* ---------- 1280 / 1024 / tablet ---------- */
@media (max-width: 1279px) {
  .pp-page { --stage-w: 380px; --fit-h: 340px; --fit-w: 250px; }
  .pp-more-shelf { grid-template-columns: 200px minmax(0, 1fr); }
  .pp-more-list { grid-template-columns: repeat(auto-fill, 190px); }
  .pp-shelf, .pp-about-grid { column-gap: 44px; }
  .pp-about-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); }
}
@media (max-width: 1099px) {
  .pp-page { --stage-w: 340px; --fit-h: 320px; --fit-w: 230px; --sec: 48px; }
  .pp-more-list { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .pp-shelf, .pp-about-grid { column-gap: 36px; }
  .pp-about-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); }
  .pp-more-shelf { grid-template-columns: minmax(0, 1fr); }
  .pp-more-shelf .pp-h2 { padding-block-start: 0; margin-block-end: 14px; }
  /* the list now starts on the wrap's own edge: its clip starts there too, and the focus ring is drawn inside the item */
  .pp-more-list { margin-inline-start: 0; padding-inline-start: 0; }
  @supports selector(:has(a)) {
    .pp-more-item:has(.pp-more-title a:focus-visible) { outline-offset: -3px; }
  }
}
@media (max-width: 899px) {
  .pp-page { --stage-w: 100%; --fit-h: 320px; --fit-w: 240px; --row-h: 240px; }
  .pp-samples.is-empty { --row-h: 176px; }
  .pp-shelf { grid-template-columns: minmax(0, 1fr); padding-block-end: 0; }
  .pp-shelf::after { display: none; }
  .pp-stage { order: -1; margin-block-end: 0; }
  .pp-stage::after {           /* the board moves under the cover, still inside the wrap */
    content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; height: var(--ledge-h);
    background: var(--board); box-shadow: var(--board-shadow); z-index: 2;
  }
  .pp-hero-info { padding-block: 20px 0; }
  .pp-about-grid { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .pp-page-of, .pp-about-solo .pp-page-of { max-width: 520px; }   /* one column: the page of the book keeps a page's size on a tablet, on the text's start line */
}
@media (max-width: 599px) {
  .pp-page { --fit-h: 280px; --fit-w: 210px; --sec: 40px; --ledge-h: 26px; --tag-h: 22px; --tag-lift: 2px; --row-h: 220px; }   /* the shop's phone board and tag */
  .pp-page .age-tag { padding-inline: 6px; }
  .pp-page .age-tag .age-n { font-size: 18px; }
  .pp-top { padding-block: 2px 0; }
  .pp-crumbs a { font-size: 15px; }
  .pp-crumbs [aria-current] { font-size: 15px; }
  .pp-back-link { flex: none; }
  .pp-stage { min-height: calc(var(--ch) + 14px + var(--ledge-h)); }
  .pp-hook { font-size: var(--t-body); margin-block-start: 10px; }
  .pp-buy { margin-block-start: 18px; padding-block-start: 14px; grid-template-columns: minmax(0, 1fr); }   /* the button takes the full row on a phone, so the label goes above it */
  .pp-buy > *, .pp-buy > .buy-title { grid-column: 1; grid-row: auto; }
  .pp-buy .buy-title { margin-block-end: 8px; }
  .pp-buy .buy-row { gap: 10px; }
  .pp-buy .price { font-size: 1.625rem; margin-inline-end: auto; }
  .pp-buy .btn-buy { flex: 1 1 100%; min-height: 48px; }
  .pp-colouring { margin-block-start: 18px; }
  .pp-colouring.has-sheets { margin-block-start: 20px; }
  .pp-excerpt { margin: 18px 16px 0; }
  .pp-page-of { padding-block-end: 22px; }
  .pp-page-of.is-text { padding: 18px 16px 20px; }
  .pp-excerpt-text { font-size: var(--t-body); line-height: 1.8; }
  .pp-page-of.is-strip { grid-template-columns: minmax(0, 1fr) 64px; }
  .pp-page-of.is-strip .pp-excerpt { margin: 18px 16px 20px; }
  .pp-page-of.is-strip .pp-excerpt-text { font-size: var(--t-body); }
  /* the pages become the shop's phone scroller: one row at one height, a peek of the next page, snap. A wide spread is
     held to 300px, so it stands a little lower than the pages beside it */
  .pp-samples-list {
    gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scroll-padding-inline-start: 6px;   /* snap to the wrap's line, not to the padding's edge */
    padding-block: 6px 18px; padding-inline: 6px var(--gutter);   /* room for the focus ring and the sheets' shadow; the peek runs to the screen's edge */
    margin-block: -6px -18px; margin-inline: -6px calc(-1 * var(--gutter));
  }
  .pp-sample { flex: none; width: min(300px, calc(var(--row-h) * var(--ar, .75))); scroll-snap-align: start; }
  .pp-sample-link:focus-visible { outline-offset: 2px; }
  /* the empty room is no scroller: the three pages to come stand side by side (about 107 x 143 at 390) */
  .pp-samples.is-empty .pp-samples-list { overflow: visible; scroll-snap-type: none; margin: 0; padding: 0; gap: 10px; }
  .pp-samples.is-empty .pp-sample { flex: 1 1 0; width: auto; }
  /* the shelf becomes the shop's phone scroller: one row, a peek of the next book, snap */
  .pp-more-list {
    display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding-block: 8px; padding-inline-end: var(--gutter);   /* the peek of the next book runs on to the screen's edge (F9): the start stays on the wrap's line, the end bleeds by the gutter */
    margin-block-start: -8px; margin-inline-end: calc(-1 * var(--gutter));
  }
  .pp-more-item { flex: 0 0 150px; scroll-snap-align: start; }
  .pp-more-stage { height: 152px; }
  .pp-more-stage::before { height: 82px; }
  .pp-more-stage::after { inset-inline-end: -5px; }   /* in a scroller the board is the row: no run-on past the last book */
  .pp-more .book > .pp-more-img { height: min(134px, calc(126px / var(--r))); }
  .pp-more .book > .sample-plate { height: min(134px, calc(126px / var(--r))); width: calc(min(134px, calc(126px / var(--r))) * var(--r)); }
  .pp-more-caption { padding: calc(var(--ledge-h) + 10px) 4px 0; }
  .pp-more-link:focus-visible { outline-offset: 1px; }   /* the link sits 4px in from the scroller's clip: a 3px ring at the base offset lost 2px of its width (a11y, WCAG 2.4.7) */
  .pp-more-stage .age-tag { inset-inline-start: 8px; max-width: calc(100% - 16px); }
  .pp-more-title { font-size: 16px; }
  .pp-more-title a { padding-block: 12px; margin-block: -12px; }
  .pp-more-meta { gap: 0 12px; }
  .pp-bar-title { display: none; }
  .pp-bar-price { transition: opacity var(--dur-state) var(--ease-standard), visibility 0s linear 0s; }
  .pp-bar.is-price-seen .pp-bar-price { opacity: 0; visibility: hidden; transition-delay: 0s, var(--dur-state); }   /* the price is on screen in the buy row: the bar's copy fades and is then hidden, its box stays (F4) */
  .pp-bar-inner { gap: 12px; padding: 8px 16px; min-height: 60px; }
  .pp-js .pp-bar { width: 100%; }
  .js.pp-js .pp-bar { inset-block-end: var(--bar-h); }   /* the buy bar stands on the menu bar (base.css), which is at the bottom of a phone's screen; leaving, it slides down behind it */
  .pp-js .pp-bar .pp-bar-inner { border-inline: 0; }   /* a phone's bottom bar runs edge to edge, like the phone's own chrome */
  .pp-bar .price { margin-inline-end: auto; font-size: 22px; }
  .pp-bar-cover img { height: 40px; }
  .pp-bar-btn { min-width: 0; flex: 1 1 auto; max-width: 200px; }
}

/* ---------- WooCommerce's own forms (variable, grouped, external products), inside the buy group ---------- */
.pp-buy-wc form.cart, .pp-buy-wc .variations_form { margin: 0; }
.pp-buy-wc table.variations { width: 100%; margin-block-end: var(--s-3); border-collapse: collapse; }
.pp-buy-wc table.variations th, .pp-buy-wc table.variations td { display: block; padding: 0; text-align: start; }
.pp-buy-wc table.variations label { font-weight: 700; }
.pp-buy-wc select { min-height: 44px; max-width: 100%; padding: 0 12px; border: 1.5px solid #77715F; border-radius: var(--r-control); background: #fff; font: inherit; }
.pp-buy-wc .reset_variations { margin-inline-start: 12px; font-size: var(--t-small); }
.pp-buy-wc .woocommerce-variation-price .price { font-size: 22px; }
.pp-buy-wc .woocommerce-variation-add-to-cart, .pp-buy-wc form.cart:not(.variations_form), .pp-buy-wc .woocommerce-grouped-product-list-item { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
.pp-buy-wc .quantity input.qty { width: 64px; min-height: 44px; border: 1.5px solid #77715F; border-radius: var(--r-control); text-align: center; font: 700 1rem var(--font-body); }
.pp .pp-buy-wc .single_add_to_cart_button.button, .pp .pp-buy-wc .single_add_to_cart_button.button.alt {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 24px; min-width: 170px;
  border: 0; border-radius: var(--r-control); background: var(--add); color: var(--add-text); cursor: pointer; text-decoration: none;
  font: 700 17px/1.15 var(--font-body);   /* the book page's .btn-buy, for WooCommerce's own form */
  transition: background-color var(--dur-state) var(--ease-standard);
}
.pp .pp-buy-wc .single_add_to_cart_button.button:hover, .pp .pp-buy-wc .single_add_to_cart_button.button:focus-visible { background: var(--add-hover); color: var(--add-text); }
.pp .pp-buy-wc .single_add_to_cart_button.button.disabled, .pp .pp-buy-wc .single_add_to_cart_button.button.wc-variation-selection-needed { opacity: .5; cursor: not-allowed; background: var(--add); }
.pp-buy-wc table.group_table { width: 100%; margin-block-end: var(--s-3); }
.pp-buy-wc .stock { margin-block-start: 8px; font-size: var(--t-small); }

/* ==========================================================================
   The cover glide (book-room): the book page's half of the shelf <-> book transition (the full note is at the end of
   shop-table.css). The hero cover and the other books' covers carry cover-<id> (the --vt the templates print); book.js leaves
   the name on the one cover that is being opened when the visitor leaves.
   ========================================================================== */
/* The glide was filmed on Chromium only. WebKit (Safari and every iOS browser) supports cross-document view transitions too, but
   its look has not been checked on a real device, so it keeps ordinary page loads for now: no names and no at-rule there.
   Chromium has no -webkit-hyphens and WebKit has it, which tells them apart. To switch the glide on in WebKit, delete this
   @supports wrapper (here and at the end of product.css / shop-table.css) once it has been seen on a real Safari. */
@supports not (-webkit-hyphens: none) {
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  @view-transition { navigation: auto; }
  html.js:not(.pil-vt) .pp-stage .book, html.js:not(.pil-vt) .pp-more-stage .book { view-transition-name: var(--vt, none); view-transition-class: cover; }
  html:not(.pil-vt)::view-transition-old(root), html:not(.pil-vt)::view-transition-new(root) { animation-duration: 180ms; }
  ::view-transition-group(*.cover) { animation-duration: var(--dur-glide, 480ms); animation-timing-function: var(--ease-glide, cubic-bezier(.25, .1, .15, 1)); }
  ::view-transition-old(*.cover), ::view-transition-new(*.cover) { height: 100%; object-fit: cover; }
  ::view-transition-old(*.cover):only-child, ::view-transition-new(*.cover):only-child { animation-duration: 180ms; }
}
}