/* ============================================================
   COBRAND - book card component (styles)

   Moved out of books.html so the store landing page, the book
   detail page and the collection pages all draw the SAME card
   from one definition. Markup for it lives in cobrand-bookcard.js.

   Load this BEFORE a page's own <style> block, so page-level
   rules can still override it.
   ============================================================ */
/* Book Grid (Reusable) */
.books-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));gap:24px}
.book-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  display:flex;flex-direction:column;transition:all .25s ease;position:relative;
}
.book-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift);border-color:var(--royal-soft)}
.book-cover{
  aspect-ratio:3/4;background:var(--soft-white);position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.book-cover img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.book-card:hover .book-cover img{transform:scale(1.04)}
.book-badge{
  position:absolute;top:12px;left:12px;background:var(--accent);color:#fff;
  font:700 .68rem var(--body);padding:4px 10px;border-radius:99px;text-transform:uppercase;
}
/* Wishlist heart, beside "+ Cart". It lives inside .book-actions, which
   sits above the card's full-size link (z-index 2 over 1), so tapping it
   saves the book instead of opening it. The row stretches both buttons to
   the same height; same rose colour as the heart on the book detail page. */
.book-wish{
  width:38px;border:1.5px solid var(--line);border-radius:8px;display:grid;place-items:center;
  background:#fff;color:var(--cobalt);cursor:pointer;transition:color .15s ease,border-color .15s ease;
}
.book-wish:hover{color:#E11D48;border-color:#E11D48}
:root[data-theme="dark"] .book-wish{background:transparent;color:#E6EBF5;border-color:#28324A}
.book-wish[aria-pressed="true"]{color:#E11D48}
.book-wish[aria-pressed="true"] svg{fill:currentColor}
.book-wish:focus-visible{outline:3px solid var(--royal);outline-offset:2px}
.book-body{padding:18px;display:flex;flex-direction:column;flex:1}
.book-cat{font-size:.72rem;font-weight:700;color:var(--royal);text-transform:uppercase;margin-bottom:6px}
.book-title{font-size:1.05rem;font-weight:800;color:var(--cobalt);line-height:1.3;margin-bottom:4px}

/* ------------------------------------------------------------
   Card metadata.

   Everything below the title carries different weight, so the eye
   can rank it: the author reads as a name, the rating leads with
   orange stars, format prices sit forward of their format names,
   and the sales rank recedes. All of it stays on one type scale so
   the card still reads as a single block rather than a ransom note.
   ------------------------------------------------------------ */
.book-author{
  font-family:var(--body);
  font-size:.84rem;
  font-weight:500;
  color:var(--charcoal);
  line-height:1.5;
  margin-bottom:11px;
}
.book-author .by{ color:var(--muted); font-weight:400; }

.book-meta{display:flex;flex-direction:column;gap:7px;margin-bottom:13px;font-family:var(--body)}

/* published date — quiet, with a label that recedes further */
.bm-pub{font-size:.76rem;color:var(--muted);font-weight:400;line-height:1.4}
.bm-pub b{font-weight:600;color:var(--charcoal)}

/* rating — orange stars carry the line */
.bm-rate{display:flex;align-items:center;gap:7px;flex-wrap:wrap;line-height:1}
.bm-stars{
  color:var(--accent);
  font-size:.92rem;
  letter-spacing:1.5px;
  white-space:nowrap;
  text-shadow:0 1px 0 rgba(255,138,0,.18);
}
.bm-score{font:800 .86rem var(--display);color:var(--charcoal);letter-spacing:.01em}
.bm-revs{font-size:.75rem;color:var(--muted);font-weight:400}

/* formats — the price is the thing being scanned, not the label */
.bm-formats{display:flex;flex-direction:column;gap:3px}
.bm-fmt{display:flex;align-items:baseline;gap:6px;font-size:.78rem;line-height:1.45}
.bm-fmt .fmt-name{
  color:var(--muted);font-weight:500;white-space:nowrap;
  min-width:64px;
}
.bm-fmt .fmt-price{color:var(--cobalt);font-weight:700;font-variant-numeric:tabular-nums}

/* sales rank — the numbers lift, the prose recedes */
/* Three stacked lines, not one wrapping sentence. */
.bm-rank{
  display:flex;flex-direction:column;gap:1px;
  font-size:.73rem;color:var(--muted);line-height:1.5;font-weight:400;
  /* token, not a literal, so the rule inverts correctly in dark mode */
  padding-top:6px;border-top:1px dashed var(--line);
}
.bm-rank .rank-line{display:block}
.bm-rank .rank-label{font-weight:600;color:var(--charcoal)}
.bm-rank b{color:var(--royal);font-weight:700;font-variant-numeric:tabular-nums}
/* dimmed from the inherited muted colour, so it stays a faint mark
   in both light and dark themes rather than a fixed grey */
.bm-rank .rank-sep{opacity:.45;padding:0 3px}

.book-footer{margin-top:auto;padding-top:13px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:8px}
.book-price{font:800 1.16rem var(--display);color:var(--cobalt);line-height:1.15;
  display:flex;flex-direction:column;font-variant-numeric:tabular-nums}
/* "From" only appears when the card lists more than one format, so
   the headline figure is not mistaken for the only price. */
.book-price small{font:600 .62rem var(--body);letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:1px}
.book-actions{display:flex;gap:6px}

/* ------------------------------------------------------------
   Whole-card routing to the PDP.
   The card is an <a> so the entire surface is a real link — it
   keeps keyboard focus, middle-click and "open in new tab", which
   a click handler on a <div> would silently break. The Add-to-cart
   button sits above it and stops the click from navigating.
   ------------------------------------------------------------ */
.book-card{position:relative}
.book-cardlink{position:absolute;inset:0;z-index:1;border-radius:var(--r-md)}
.book-cardlink:focus-visible{outline:3px solid var(--royal);outline-offset:2px}
.book-card .book-actions{position:relative;z-index:2}
.book-card .book-cover svg.cbcover{width:100%;height:100%;display:block;transition:transform .3s ease}
.book-card:hover .book-cover svg.cbcover{transform:scale(1.04)}
.btn-cart{
  background:var(--cobalt);color:#fff;border:0;padding:8px 14px;border-radius:8px;
  font:600 .82rem var(--body);transition:background .2s;
}
.btn-cart:hover{background:var(--accent)}

/* ============================================================
   DISCOVERY ROW - one titled strip of book cards
   Used by: You may also like, topic collections, You recently
   viewed, Most Read This Week, Trending Now, and Readers who
   bought this also read.

   Mobile first: the cards sit in a row you swipe sideways, so a
   shelf costs one screen height instead of six. From 900px up the
   same markup becomes a normal grid.
   ============================================================ */
.book-row{margin:0 0 40px}
.book-row__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.book-row__head h2{
  font:800 1.35rem var(--display);color:var(--cobalt);margin:0;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
/* "Sample data" marker - only while DEMO_MODE is on, and it is for
   the review team, not for buyers */
.book-row__pill{
  font:600 .62rem var(--body);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);background:var(--soft-white);border:1px solid var(--line);
  border-radius:99px;padding:4px 10px;
}
.book-row__more{font:700 .84rem var(--body);color:var(--royal);white-space:nowrap}
.book-row__blurb{color:var(--muted);font-size:.9rem;margin:0 0 14px;max-width:60ch}

.book-row__strip{
  display:flex;gap:16px;overflow-x:auto;padding:4px 0 12px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.book-row__strip::-webkit-scrollbar{height:6px}
.book-row__strip::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
/* each card keeps a readable width on a phone and snaps into place */
.book-row__strip > .book-card{flex:0 0 clamp(210px,74vw,248px);scroll-snap-align:start}

@media (min-width:900px){
  .book-row__strip{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
    overflow:visible;padding-bottom:0;
  }
  .book-row__strip > .book-card{flex:none}
}

/* Share button, in the row with the wishlist heart and "+ Cart". It
   copies the heart's shape so the two icon buttons read as a pair. */
.book-card .book-share{
  width:38px;min-width:38px;height:auto;border:1.5px solid var(--line);
  border-radius:8px;background:#fff;color:var(--cobalt);
}
.book-card .book-share:hover{color:var(--royal);border-color:var(--royal);background:#fff}
.book-card .book-share svg{width:16px;height:16px}
:root[data-theme="dark"] .book-card .book-share{background:transparent;color:#E6EBF5;border-color:#28324A}

/* Three buttons on a phone-width card: the two icon buttons keep their
   size, and "+ Cart" takes whatever width is left. Before, the cart was
   told to be 100% wide and squeezed the heart into a sliver. */
.book-actions .book-share,
.book-actions .book-wish{flex:none}
.book-actions .btn-cart{flex:1 1 0;min-width:0;width:auto;white-space:nowrap}

/* Two-column cards on a phone are ~135px inside. At full size the two
   icon buttons left "+ Cart" too narrow to show its label, so on narrow
   phones the icons trim to 32px and the cart's side padding to 6px. */
@media (max-width:420px){
  .book-actions{gap:5px}
  .book-actions .book-share,
  .book-actions .book-wish{width:32px;min-width:32px}
  .book-actions .btn-cart{padding-left:6px;padding-right:6px;font-size:.8rem}
}