/* wishbook.css: the catalog tier of the Solution Store.
   Loaded by the cover (ToC) and department spreads only. Magazine register:
   hero scenes, editorial headlines, copy paragraphs, keyed items, page
   furniture, page-turn controls. All values from theme.css tokens; the one
   scoped addition is the catalog serif (system stack, nothing downloads). */

.wb-page {
  --wb-serif: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Times New Roman', serif;
  background: var(--surface);
}
.wb-wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--space-5); }

/* ---- Page furniture: the running folio ---- */
.wb-folio { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid var(--text-heading); padding: var(--space-4) 0 var(--space-2); font-size: var(--size-tiny); color: var(--text-muted); }
.wb-folio strong { font-family: var(--wb-serif); font-style: italic; font-size: var(--size-small); color: var(--text-heading); font-weight: var(--weight-body); }
.wb-folio .tnum { color: var(--text-heading); }

/* ---- Cover / masthead ---- */
.wb-masthead { text-align: center; padding: var(--space-8) 0 var(--space-6); }
.wb-masthead h1 { font-family: var(--wb-serif); font-style: italic; font-weight: var(--weight-body); font-size: clamp(2.6rem, 5.5vw, 4rem); line-height: 1.05; color: var(--text-heading); margin: 0 0 var(--space-3); }
.wb-masthead .wb-kicker { font-size: var(--size-eyebrow); font-weight: var(--weight-bold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-blue-deep); margin-bottom: var(--space-3); }
.wb-masthead p { max-width: 56ch; margin: 0 auto; font-size: var(--size-lead); line-height: 1.45; color: var(--text-body); font-family: var(--wb-serif); }

/* ---- The ToC: dotted leaders to page numbers ---- */
.wb-toc { max-width: 760px; margin: 0 auto var(--space-8); }
.wb-toc__label { font-size: var(--size-eyebrow); font-weight: var(--weight-bold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); text-align: center; border-top: 2px solid var(--text-heading); padding-top: var(--space-3); margin-bottom: var(--space-4); }
.wb-toc ol { list-style: none; margin: 0; padding: 0; }
.wb-toc li { margin: 0; }
.wb-toc a, .wb-toc .wb-toc__row { display: flex; align-items: baseline; gap: var(--space-2); padding: var(--space-3) var(--space-2); text-decoration: none; border-radius: var(--radius-sm); }
.wb-toc a:hover { background: var(--blue-50); }
.wb-toc__name { font-family: var(--wb-serif); font-size: var(--size-h4); color: var(--text-heading); white-space: nowrap; }
.wb-toc a .wb-toc__name { color: var(--brand-blue-deep); }
.wb-toc__need { font-size: var(--size-tiny); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-toc__dots { flex: 1; min-width: 24px; border-bottom: 2px dotted var(--neutral-400); transform: translateY(-4px); }
.wb-toc__pg { font-size: var(--size-small); color: var(--text-heading); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wb-toc__row--coming .wb-toc__name, .wb-toc__row--coming .wb-toc__pg { color: var(--text-muted); }
.wb-badge { display: inline-block; font-size: var(--size-eyebrow); font-weight: var(--weight-bold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--green-700); background: var(--green-50); border: 1px solid var(--green-300); border-radius: var(--radius-full); padding: 0 var(--space-2); }
@media (max-width: 640px) { .wb-toc__need { display: none; } }

/* ---- Spread listings ---- */
.wb-spread { padding: var(--space-7) 0; border-bottom: 1px solid var(--border); }
.wb-listing { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-7); align-items: center; }
@media (max-width: 860px) { .wb-listing { grid-template-columns: 1fr; gap: var(--space-5); } }

/* Unboxed: cutouts float directly on the paper (Mark, 2026-07-19).
   White-background photos melt in via multiply; true cutouts carry alpha. */
.wb-scene { position: relative; }
.wb-scene img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.wb-key { position: absolute; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: var(--text-heading); color: var(--surface-raised); font-family: var(--wb-serif); font-size: var(--size-small); border-radius: var(--radius-full); box-shadow: var(--shadow-base); }

.wb-headline { font-family: var(--wb-serif); font-style: italic; font-weight: var(--weight-body); font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.08; color: var(--text-heading); margin: 0 0 var(--space-2); }
.wb-headline .wb-headline__lead { text-transform: uppercase; font-style: normal; font-size: 0.62em; letter-spacing: 0.08em; display: block; margin-bottom: var(--space-1); }
.wb-copy { font-family: var(--wb-serif); font-size: var(--size-body); line-height: 1.55; color: var(--text-body); margin: 0 0 var(--space-3); }
.wb-keylist { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.wb-keylist li { display: flex; gap: var(--space-2); align-items: baseline; font-size: var(--size-small); line-height: 1.5; padding: var(--space-1) 0; }
.wb-keylist .wb-key { position: static; width: 22px; height: 22px; font-size: var(--size-tiny); flex-shrink: 0; transform: translateY(3px); }

/* The closing data line: facts small, price at the settled limit */
.wb-dataline { font-size: var(--size-tiny); color: var(--text-muted); border-top: 1px dotted var(--neutral-400); padding-top: var(--space-2); margin-bottom: var(--space-3); }
.wb-dataline strong { color: var(--text-heading); font-weight: var(--weight-bold); }

/* Coming listings: on the bench, smaller, honest */
.wb-coming { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: var(--space-5); align-items: center; padding: var(--space-5) 0; border-bottom: 1px dotted var(--border-strong); }
.wb-coming:last-child { border-bottom: none; }
.wb-coming__img { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; }
.wb-coming__img img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.wb-coming h3 { font-family: var(--wb-serif); font-style: italic; font-weight: var(--weight-body); font-size: var(--size-h3); margin: 0 0 var(--space-1); color: var(--text-heading); }
.wb-coming p { font-family: var(--wb-serif); font-size: var(--size-small); line-height: 1.5; color: var(--text-body); margin: 0; max-width: 62ch; }

/* Interleave: the did-you-know ribbon */
.wb-interleave { background: var(--blue-50); border-block: 2px solid var(--text-heading); text-align: center; padding: var(--space-5) var(--space-4); margin: var(--space-7) 0; }
.wb-interleave p { font-family: var(--wb-serif); font-style: italic; font-size: var(--size-lead); line-height: 1.4; color: var(--text-heading); margin: 0; }
.wb-interleave a { color: var(--brand-blue-deep); }

/* ---- Page-turn controls (forward AND back, plus arrow keys) ---- */
.wb-turn { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); border-top: 2px solid var(--text-heading); margin-top: var(--space-7); padding: var(--space-4) 0 var(--space-8); }
.wb-turn a, .wb-turn span.wb-turn__off { display: block; max-width: 44%; text-decoration: none; }
.wb-turn__label { display: block; font-size: var(--size-eyebrow); font-weight: var(--weight-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-1); }
.wb-turn__dest { display: block; font-family: var(--wb-serif); font-style: italic; font-size: var(--size-h4); color: var(--brand-blue-deep); }
.wb-turn__off .wb-turn__dest { color: var(--text-muted); }
.wb-turn a:hover .wb-turn__dest { color: var(--blue-800); }
.wb-turn--right { text-align: right; margin-left: auto; }

.wb-toc__label--sub { border-top: none; margin-top: var(--space-4); }
.wb-spread--tail { border-bottom: none; padding-top: 0; }

/* ---- Page-edge flip arrows (the thumb under the page corner) ---- */
.wb-arrow { position: fixed; top: 50%; transform: translateY(-50%); z-index: 40; width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; background: var(--surface-raised); border: 1px solid var(--border-strong); border-radius: var(--radius-full); box-shadow: var(--shadow-md); font-family: var(--wb-serif); font-size: var(--size-h2); line-height: 1; color: var(--brand-blue-deep); text-decoration: none; transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.wb-arrow:hover { background: var(--blue-50); transform: translateY(-50%) scale(1.06); }
.wb-arrow--prev { left: var(--space-4); }
.wb-arrow--next { right: var(--space-4); }
@media (max-width: 1220px) { .wb-arrow { display: none; } }


/* Alternating listing rhythm: image side swaps each listing */
.wb-listing--flip .wb-scene { order: 2; }
@media (max-width: 860px) { .wb-listing--flip .wb-scene { order: 0; } }

/* Quiet listing title: the product name, not a pitch */
.wb-title { font-family: var(--wb-serif); font-weight: var(--weight-body); font-size: var(--size-h3); color: var(--text-heading); margin: 0 0 var(--space-2); }

/* Department masthead: big, blue, centered — the aisle's own sign */
.wb-depthead { text-align: center; padding: var(--space-7) 0 var(--space-4); }
.wb-dept { font-family: var(--wb-serif); font-style: italic; font-weight: var(--weight-body); font-size: var(--size-display-lg); line-height: 1.05; color: var(--brand-blue-mark); margin: 0 0 var(--space-4); }
.wb-dept__intro { font-family: var(--wb-serif); font-size: var(--size-lead); line-height: 1.5; color: var(--text-body); max-width: 62ch; margin: 0; text-align: left; }
.wb-title a { color: var(--brand-blue-deep); text-decoration: underline; text-decoration-thickness: var(--link-underline-thickness); text-underline-offset: 3px; }
.wb-title a:hover { color: var(--blue-800); }

/* Two actions, two jobs: build it, or learn the sensor */
.wb-actions { display: flex; align-items: center; justify-content: center; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-5); }

/* On the Bench: the status wearing the button's clothes, same slot as Build It */

/* The endcap: quiet service strip after the turn bar */
.wb-endcap { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); border-top: 1px dotted var(--neutral-400); padding: var(--space-5) 0 var(--space-8); }
@media (max-width: 860px) { .wb-endcap { grid-template-columns: 1fr; gap: var(--space-4); } }
.wb-endcap h2 { font-family: var(--wb-serif); font-style: italic; font-weight: var(--weight-body); font-size: var(--size-h4); color: var(--text-heading); margin: 0 0 var(--space-2); }
.wb-endcap p, .wb-endcap li { font-size: var(--size-small); line-height: 1.55; color: var(--text-body); margin: 0; }
.wb-endcap ul { list-style: none; margin: 0; padding: 0; }
.wb-endcap li { padding: var(--space-1) 0; }

.wb-endcap .wb-endcap__act { margin-top: var(--space-6); text-align: center; }

/* On the Bench: bench-green button state, full color despite aria-disabled */
.btn.wb-btn--bench, .btn.wb-btn--bench[aria-disabled="true"] { background: var(--green-50); border-color: var(--green-300); color: var(--green-700); opacity: 1; cursor: default; }

/* Arriving at a ToC row via a page-turn: light the row you landed on */
.wb-toc a:target, .wb-toc .wb-toc__row:target { background: var(--blue-50); outline: 2px solid var(--blue-300); outline-offset: 2px; border-radius: var(--radius-sm); }

/* Page-scale sign (build pages): smaller than the aisle sign */
.wb-dept--page { font-size: var(--size-h1); }

/* ---- Solution & build pages: sections, prose, part rows ---- */
.wb-sec { padding: var(--space-6) 0; border-bottom: 1px solid var(--border); }
.wb-sec:last-of-type { border-bottom: none; }
.wb-prose { font-family: var(--wb-serif); font-size: var(--size-body); line-height: 1.6; color: var(--text-body); max-width: 70ch; margin: 0 0 var(--space-3); }
.wb-prose--fine { font-size: var(--size-small); color: var(--text-muted); }
.wb-part { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--space-5); align-items: center; padding: var(--space-4) 0; border-bottom: 1px dotted var(--border-strong); }
.wb-part:last-of-type { border-bottom: none; }
.wb-part__img { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; }
.wb-part__img img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.wb-part__none { font-size: var(--size-eyebrow); color: var(--neutral-400); text-align: center; }
.wb-part h3 { font-family: var(--wb-serif); font-weight: var(--weight-body); font-size: var(--size-h4); color: var(--text-heading); margin: 0 0 var(--space-1); }
.wb-part p { font-size: var(--size-small); line-height: 1.5; color: var(--text-body); margin: 0; max-width: 62ch; }
.wb-part__act { margin-top: var(--space-2); }
.wb-sec .store-specs { max-width: 70ch; margin-top: var(--space-4); }
.wb-sec .faq { max-width: 70ch; }

/* Supporting-pages list: references, in the reading register */
.wb-supporting { list-style: none; margin: 0; padding: 0; max-width: 70ch; }
.wb-supporting li { padding: var(--space-2) 0; border-bottom: 1px dotted var(--border-strong); font-size: var(--size-small); }
.wb-supporting li:last-child { border-bottom: none; }

/* Build pages: the line beneath the flash boxes sits centered */
.wb-page .flash-cta .wb-prose--fine { text-align: center; margin-left: auto; margin-right: auto; }