/* ==========================================================================
   enw-bd-v2.css — book detail page refresh
   ==========================================================================

   Linked by book_detail.php only. Nothing here is a site-wide change: the
   shared shell (h1/h2/nav) and enw-bundle.css are untouched.

   Every colour resolves from an --enw-* token, so the nine palettes and both
   colour schemes keep working without a second set of rules. Where a token is
   missing the fallback is the light-palette value the bundle already ships.

   Browser floor, deliberately: custom properties, flex, grid, clamp() and
   :not() only. No color-mix(), no :has(), no container queries, no
   aspect-ratio. The two cosmetic refinements that are safe to skip are behind
   @supports so older engines get the plain version instead of nothing.

   This file is printed AFTER the page's inline <style id="bd-pro-css">, which
   matters: several rules below deliberately restate selectors the inline block
   also sets (.bd-price-box .bd-btn-buy, for one) and rely on source order to
   win at equal specificity. Move the <link> above that block and those
   declarations stop applying.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Layout rhythm
   The bundle's 56px gutter was sized for a narrower content column; at the
   current container width it reads as two unrelated halves. 44px plus a
   slightly wider cover column keeps the pair together and gives the title
   room to break at a sensible measure.
   -------------------------------------------------------------------------- */
.bd-container {
  padding-block-start: 26px;
  padding-block-end: 64px;
}

.bd-layout {
  gap: 44px;
}

.bd-cover-col {
  width: 296px;
  top: 92px;
}

.bd-cover-img {
  border-radius: 12px;
  box-shadow: 0 20px 44px -22px rgba(15, 23, 42, .55);
}

.bd-cover-link {
  display: block;
  border-radius: 12px;
}

/* --------------------------------------------------------------------------
   2. Title and meta
   -------------------------------------------------------------------------- */
.bd-title {
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.22;
  letter-spacing: -.015em;
  margin-block-end: 16px;
}

/* ── 2a. Long titles get smaller type ───────────────────────────────────────

   A long title must not turn into a tall wall. book_detail.php counts the
   characters (median here is 60, one title in ten passes 134) and puts the
   heading in one of three bands; each band starts lower and caps lower than the
   one above it, while keeping the fluid clamp so it still tracks the viewport
   inside its own range. A title of 48 characters or fewer — an ordinary title
   with no subtitle — is not in a band at all and keeps the shared size.

   The doubled class is load-bearing: enw-site-v2.css sets the whole page-title
   family with `body .bd-title` (an element and a class), so a single-class
   override here would lose to it no matter which file loads last. Two classes
   outrank it, and no selector below ever needs `!important`.

   Wrapping is untouched. A title still breaks at its spaces; this only decides
   how big the type is before it breaks. */
.bd-title.bd-title--medium {
  font-size: clamp(26px, 2.3vw, 33px);
}

.bd-title.bd-title--long {
  font-size: clamp(23px, 2vw, 29px);
}

.bd-title.bd-title--xlong {
  font-size: clamp(20px, 1.7vw, 25px);
}

/* Balanced wrapping is a real improvement on a two- or three-line heading and
   an unknown property everywhere older, so it is additive rather than load-
   bearing. */
@supports (text-wrap: balance) {
  .bd-title { text-wrap: balance; }
}

.bd-meta-chips {
  gap: 16px 28px;
  padding-block-end: 20px;
  margin-block-end: 22px;
  border-bottom: 1px solid var(--enw-border, #e7ebf0);
}

.bd-meta-chip {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bd-meta-chip-label {
  font-family: inherit;
  font-size: 10.5px;
  letter-spacing: .09em;
  font-weight: 700;
  margin-block-end: 0;
}

.bd-meta-chip-value {
  border-width: 1px;
  border-radius: 9px;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   3. Country switcher
   Promoted from a loose row of pills to a small panel: it is a control, and on
   the old layout it read as decoration between two borders.
   -------------------------------------------------------------------------- */
.bd-country-switcher {
  margin-block-end: 22px;
  padding: 16px 18px;
  background: var(--enw-surface, #fff);
  border: 1px solid var(--enw-border, #e7ebf0);
  border-radius: 14px;
}

.bd-country-label {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 800;
  margin-block-end: 12px;
}

.bd-country-pills {
  gap: 8px;
}

.bd-pill {
  border-radius: 9px;
  padding: 7px 13px;
  font-size: 12.5px;
}

.bd-pill--active {
  box-shadow: 0 8px 18px -12px var(--enw-primary, #2F6FED);
}

/* --------------------------------------------------------------------------
   4. Cards — one surface treatment for the whole page
   The bundle drew every block as its own invention: the price box had a
   radius of 18 and no shadow, specs 16, reviews something else. One radius,
   one hairline, one shadow, so the page reads as a set.
   -------------------------------------------------------------------------- */
.bd-price-box,
.bd-specs,
.bd-desc,
.bd-similar,
.bd-reviews,
.bd-markets {
  background: var(--enw-surface, #fff);
  border: 1px solid var(--enw-border, #e7ebf0);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04),
              0 14px 30px -24px rgba(15, 23, 42, .35);
}

/* Section headers were solid --enw-header bars with an emoji. The emoji goes
   (they are aria-hidden decoration, and three of them in a column is what made
   the page feel assembled rather than designed); the bar becomes a quiet
   header rule, which lets the content carry the hierarchy. */
.bd-specs-header,
.bd-desc-header,
.bd-similar-header,
.bd-reviews-header {
  background: transparent;
  color: var(--enw-text, #0f172a);
  border-bottom: 1px solid var(--enw-border, #e7ebf0);
  padding: 15px 22px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.bd-specs-header .ico-uni,
.bd-desc-header .ico-uni,
.bd-similar-header .ico-uni,
.bd-reviews-header > .ico-uni {
  display: none;
}

/* The reviews header carries a status chip inside it; uppercase tracking is
   right for the title and wrong for a sentence, so the chip is reset. */
.bd-reviews-header .bd-reviews-avg {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  border-radius: 999px;
  padding: 3px 10px;
  margin-inline-start: 4px;
}

/* --------------------------------------------------------------------------
   5. Book specs — a definition grid, not a striped table
   -------------------------------------------------------------------------- */
.bd-specs {
  overflow: hidden;
  margin-block-end: 22px;
}

.bd-specs .bd-spec-row {
  background: transparent;
  display: grid;
  grid-template-columns: 168px 1fr;
  align-items: baseline;
  gap: 18px;
  padding: 13px 22px;
  border-top: 1px solid var(--enw-border, #eef1f5);
}

.bd-specs .bd-spec-row:first-child {
  border-top: 0;
}

.bd-spec-label {
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--enw-text-muted, #8a93a3);
}

.bd-spec-value {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--enw-text, #0f172a);
  overflow-wrap: anywhere;
}

.bd-spec-value a {
  color: var(--enw-primary, #2F6FED);
  text-decoration: none;
}

/* The bundle paints spec values as pills — tinted backgrounds on the author
   and publisher links, a lavender bar behind every monospace value. In a
   definition grid that turns three rows into three unrelated badges and pushes
   the ISBN bar past the card edge. Plain text, accent-coloured links instead. */
.bd-specs .bd-spec-value a,
.bd-specs .bd-spec-mono {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.bd-spec-value a:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   6. Price box — the one block on the page that has to be acted on
   -------------------------------------------------------------------------- */
.bd-price-box {
  margin-block-end: 22px;
  overflow: hidden;
}

.bd-price-box-body {
  padding: 26px 28px;
}

.bd-price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  margin-block-end: 20px;
}

.bd-price-offer {
  font-size: clamp(34px, 3.6vw, 46px);
  line-height: 1;
  letter-spacing: -.03em;
  font-weight: 800;
}

.bd-price-list {
  font-size: 15px;
  font-weight: 600;
}

.bd-discount {
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
}

.bd-buy-btns {
  gap: 12px;
}

/* Restated from the inline block on purpose — see the header note. The shadow
   uses the palette's own primary, so it follows every palette instead of
   assuming the blue. */
.bd-price-box .bd-btn-buy {
  border-radius: 12px;
  padding: 17px 26px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .01em;
  /* Neutral rather than a coloured glow: across a button this wide a saturated
     shadow reads as a halo around the whole row. */
  box-shadow: 0 8px 18px -10px rgba(15, 23, 42, .45);
}

.bd-price-box .bd-btn-buy:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -12px rgba(15, 23, 42, .5);
}

.bd-price-box .bd-btn-used {
  border-radius: 12px;
}

/* Shown when the selected market holds no price for this book: instead of a
   price row the reader gets the stores that do hold it. It arrived as a flat
   mint panel — a fourth surface colour that matched nothing else on the page —
   so it becomes an inset notice with the markets as tappable chips. */
.bd-no-price-notice {
  margin-block-start: 16px;
  padding: 14px 16px;
  background: var(--enw-surface-2, #f4f7fb);
  border: 1px solid var(--enw-border, #e7ebf0);
  border-radius: 12px;
}

.bd-no-price-notice p {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--enw-text-muted, #8a93a3);
}

.bd-alt-countries {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bd-alt-countries a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--enw-border, #e7ebf0);
  border-radius: 9px;
  background: var(--enw-surface, #fff);
  color: var(--enw-text, #0f172a);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.bd-alt-countries a:hover {
  border-color: var(--enw-primary, #2F6FED);
  color: var(--enw-primary, #2F6FED);
}

/* --------------------------------------------------------------------------
   6b. Reviews
   The widget prints its own controls from includes/reviews_widget.php and its
   JavaScript owns the behaviour, so only the surfaces are touched here: the
   block sits inside the same card language as everything above it instead of
   arriving as a full-bleed lavender band under a white header.
   -------------------------------------------------------------------------- */
.bd-reviews {
  margin-block-end: 22px;
  overflow: hidden;
}

.bd-reviews-header {
  gap: 10px;
}

/* The status chip was solid primary with white text, which put the strongest
   colour on the page inside a secondary card. Tinted instead, so the primary
   stays on Buy Now. */
.bd-reviews .bd-reviews-avg {
  background: var(--enw-primary-tint, #e8f0ff);
  color: var(--enw-primary, #1f52c4);
}

.bd-login-box {
  background: var(--enw-surface-2, #f4f7fb);
  border-radius: 12px;
  margin: 16px 22px;
}

.bd-login-toggle-btn {
  border-radius: 10px;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   7. Description
   Amazon blurb HTML arrives with its own <p>, <ul> and headings, so the
   leading and measure are set here rather than on the block.
   -------------------------------------------------------------------------- */
.bd-desc {
  margin-block-end: 22px;
  overflow: hidden;
}

.bd-desc-body {
  padding: 20px 22px 22px;
  font-size: 15px;
  line-height: 1.75;
  max-width: 74ch;
}

.bd-desc-body p {
  margin-block: 0 12px;
}

.bd-desc-body p:last-child {
  margin-block-end: 0;
}

.bd-desc-body ul,
.bd-desc-body ol {
  padding-inline-start: 20px;
  margin-block: 0 12px;
}

/* --------------------------------------------------------------------------
   8. Similar products and the related shelves
   Gradients become flat token colours: at this size a gradient header reads as
   a different design language from the flat chrome around it.
   -------------------------------------------------------------------------- */
.bd-similar {
  margin-block-end: 22px;
  overflow: hidden;
}

.bd-sim-card {
  border-radius: 12px;
}

.bd-related {
  margin-block-start: 44px;
}

/* The two related shelves print `background:#fff;border:1px solid #e2e8f0` in
   the page's inline block. Under any dark palette that puts a white slab behind
   dark cards — visible the moment you scroll to the foot of the page in dark
   mode. Driven by the surface token, it follows the palette like the cards. */
.bd-shelf.enw-carousel {
  background: var(--enw-surface, #fff);
  border-color: var(--enw-border, #e2e8f0);
}

.bd-related-header {
  border-radius: 14px 14px 0 0;
  padding: 15px 20px;
}

.bd-related-header--cat {
  background: var(--enw-accent-ink, #b45309);
}

.bd-related-header--author {
  background: var(--enw-primary, #2F6FED);
}

/* --------------------------------------------------------------------------
   9. Responsive
   Below 960 the two columns stop being a decision and start being a phone:
   the cover moves beside the title instead of occupying a screen of its own.
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .bd-layout {
    flex-direction: column;
    gap: 26px;
  }

  .bd-cover-col {
    position: static;
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 18px;
  }

  /* The series strip is a horizontal scroller of ~32 fixed-width thumbs, so its
     min-content width is the whole shelf (2 678px on this page). With
     .bd-layout a column and align-items:flex-start, .bd-info-col is shrink-to-
     fit on the cross axis, so that min-content width became the column's own:
     title, meta, specs, price box and shelves were all laid out 2 720px wide
     and then cut off by the body's overflow-x:clip — no scrollbar, just a page
     wider than the phone. A definite width is what defeats shrink-to-fit; the
     strip keeps its own overflow-x:auto and still scrolls. */
  .bd-info-col {
    width: 100%;
  }

  .bd-cover-link {
    flex: 0 0 148px;
    width: 148px;
  }

  .bd-social {
    flex-wrap: wrap;
  }
}

@media (max-width: 640px) {
  .bd-container {
    /* .enw-tabbar is 61px and .bd-mob-nav sits 74px above it; without this the
       last shelf is unreachable behind both. */
    padding-block-end: 158px;
  }

  .bd-specs .bd-spec-row {
    grid-template-columns: 1fr;
    gap: 3px;
    padding: 12px 18px;
  }

  .bd-price-box-body {
    padding: 20px 18px;
  }

  .bd-desc-body {
    padding: 18px;
  }
}

/* --------------------------------------------------------------------------
   10. Motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .bd-price-box .bd-btn-buy:hover {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   11. The phone's prev/next bar has to fit the phone

   Measured on a 360px viewport: the bar is 351px wide and its two buttons came
   out 193 and 167 — 361 together — so the right-hand one ended at 361 and its
   title was cut mid-word. The bar's own box is `left: 0; right: 0`, so the
   width was never the bar's: each .bd-mob-btn is `flex: 1`, and a flex item's
   automatic minimum is its content, so the longer book title set a floor the
   pair could not fit. min-inline-size: 0 lets them share the row, and the title
   already ellipsizes (overflow: hidden on .bd-mob-title), so a long name now
   ends in "..." inside its own half instead of pushing the button off screen.
   -------------------------------------------------------------------------- */
.bd-mob-btn {
  min-inline-size: 0;
}

.bd-mob-title {
  max-inline-size: 100%;
}
/* ==========================================================================
   The phone's prev/next bar — appended 2026-10-25
   --------------------------------------------------------------------------
   Measured on a Galaxy Z Fold5 cover screen, 344x746 CSS px:

     .bd-mob-nav   90px tall, fixed, sitting on top of the 61px tab bar
     .bd-mob-title 90px wide box holding 107px of text  -> "Trading from …"
     reserved      158px of .bd-container padding (90 + 61 + 7)

   The 90px came from `.bd-mob-tag` — "PREVIOUS · BUSINESS & ECONOMICS" — which
   wraps to two lines at this width and is the tallest thing in the bar. On a
   phone that line is the least useful thing there: the arrow already points
   the way, and the book title is what tells you where it goes. Dropping it
   below 640px takes the bar to ~54px, which

     - returns 36px of screen to the page (both bars together now cover 115px
       instead of 151px, so the price box and Buy Now clear them sooner),
     - lets the title use the full half-width and wrap to two lines instead of
       being cut at 90px, and
     - keeps the bar's height a constant instead of tracking whatever length
       the category name happens to be.

   The reserved padding is restated in tokens rather than as 158px so it can
   never drift from the two bars it is clearing.
   ========================================================================== */

@media (max-width: 640px) {
  .bd-mob-nav .bd-mob-tag {
    display: none;
  }

  .bd-mob-btn {
    padding: 8px 10px;
    gap: 8px;
  }

  .bd-mob-arrow {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    font-size: 20px;
  }

  .bd-mob-title {
    font-size: 13px;
    line-height: 1.3;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
  }

  .bd-container {
    padding-block-end: calc(
      var(--enw-tabbar-h, 61px) + var(--enw-safe-bottom, 0px) + 76px
    );
  }
}

/* This file loads after enw-site-v2.css, so the label sizes that file raises
   to 12px have to be repeated here or they lose the cascade. Measured after
   the first attempt: .bd-meta-chip-label was still 10.5px and .bd-spec-label
   still 11px on the phone. */
@media (max-width: 640px) {
  .bd-spec-label,
  .bd-book-card-btn,
  .bd-meta-chip-label,
  .bd-country-label {
    font-size: 12px;
  }
}