/* ── The shelf of books ────────────────────────────────────────────────────
   Its own block, not the .grid from the course: there a tile is a line of text
   and the grid is built for three or more of them, so two books hung on the
   left edge of a wide screen. Here the cards are centred whatever their number,
   and the cover carries the card.
   ⛔ Do not tune style.css for this — that file is a copy of the course cabinet
      and is replaced wholesale whenever the course changes. */
.shelf{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;   /* two books stand in the middle, not at the edge */
  align-items:flex-start;
  gap:18px;
}
.shelf-item{
  display:block;
  width:min(46%,190px);     /* two side by side on a phone, never wider than the cover */
  text-decoration:none;
  color:inherit;
  text-align:center;
  transition:transform .18s;
}
.shelf-item:hover{transform:translateY(-3px)}
.shelf-item img{
  display:block;
  width:100%;
  height:auto;
  border-radius:11px;
  border:1px solid var(--blk-ln);
  box-shadow:0 8px 22px rgba(53,92,44,.18);
  transition:border-color .15s,box-shadow .18s;
}
.shelf-item:hover img{border-color:var(--green-md);box-shadow:0 12px 26px rgba(53,92,44,.26)}
.shelf-name{
  display:block;
  margin-top:11px;
  font-size:14.5px;
  font-weight:700;
  line-height:1.3;
}
.shelf-sub{
  display:block;
  margin-top:3px;
  font-size:12.5px;
  font-weight:500;
  line-height:1.45;
  color:var(--ink-soft);
}
/* A book that is not part of the purchase: shown, but quiet and not clickable.
   Hiding it in silence makes a person think his access is broken. */
.shelf-item.off{opacity:.5;pointer-events:none}
.shelf-item.off img{filter:grayscale(.55)}

/* The current book in the switcher inside the reader */
.shelf-item.on img{border-color:var(--green-md);box-shadow:0 10px 24px rgba(53,92,44,.30)}
.shelf-item.on .shelf-name{color:var(--green-md)}

/* The switcher above the reader is smaller: it is navigation, not the shelf */
.shelf.mini .shelf-item{width:min(34%,120px)}
.shelf.mini .shelf-name{font-size:13px;margin-top:8px}
.shelf.mini .shelf-sub{font-size:11.5px}

/* ── The gift under the books ──────────────────────────────────────────────
   “9 Morning Signs of the Body” has no cover of its own, so it is a wide strip
   under the shelf, as wide as the two covers together — a line of text, not a
   card pretending to be a third book. */
.gift-row{
  display:block;
  width:min(100%,398px);      /* two covers of 190px plus the 18px gap */
  margin:22px auto 0;
  padding:17px 16px;
  /* Reads as a button, not as a note: the shelf above it is all covers, and a
     pale strip under them goes unnoticed. */
  background:linear-gradient(160deg,#ffffff,#f2f8ea);
  border:1.5px solid rgba(74,124,63,.45);
  border-radius:14px;
  box-shadow:0 6px 18px rgba(53,92,44,.14);
  text-align:center;
  text-decoration:none;
  color:inherit;
  transition:border-color .15s,box-shadow .18s,transform .18s;
}
.gift-row:hover{
  border-color:var(--green-md);
  box-shadow:0 10px 24px rgba(53,92,44,.22);
  transform:translateY(-2px);
}
.gift-row .gift-tag{
  display:block;
  font-size:11px;
  font-weight:800;
  letter-spacing:.7px;
  text-transform:uppercase;
  color:var(--green-md);
  margin-bottom:5px;
}
.gift-row b{display:block;font-size:14.5px;font-weight:700;line-height:1.3}
.gift-row span.gift-sub{
  display:block;
  margin-top:4px;
  font-size:12.5px;
  font-weight:500;
  line-height:1.45;
  color:var(--ink-soft);
}
/* Not ready yet: quiet, and there is nothing to click */
.gift-row.soon{opacity:.72;pointer-events:none}

/* ── Upsells ───────────────────────────────────────────────────────────────
   A book that is not in the purchase, and the voice on top of the books owned.
   Quiet by design: this is a library, not a sales page — the offer stands where
   a person runs into the closed thing, and nowhere else. */
.shelf-item.buy{opacity:1;pointer-events:auto}
.shelf-item.buy img{filter:grayscale(.5);opacity:.85}
.shelf-item.buy:hover img{filter:none;opacity:1}
.shelf-price{
  display:inline-block;
  margin-top:7px;
  padding:5px 12px;
  border-radius:50px;
  background:linear-gradient(135deg,#3f6a34,#557f32);
  color:#fff;
  font-size:12.5px;
  font-weight:700;
  line-height:1.2;
}

.upsell{
  border:1px solid var(--blk-ln);
  background:var(--blk-bg);
  border-radius:14px;
  padding:20px 16px;
  text-align:center;
}
.upsell .u-ic{font-size:30px;line-height:1;margin-bottom:10px}
.upsell b{display:block;font-size:15.5px;font-weight:700;line-height:1.35}
.upsell p{margin-top:9px;font-size:13.5px;line-height:1.6;color:var(--ink-soft);font-weight:500}
.upsell .u-btn{
  display:inline-block;
  margin-top:15px;
  padding:12px 22px;
  border-radius:50px;
  background:linear-gradient(135deg,#3f6a34,#557f32);
  color:#fff;
  font-size:14.5px;
  font-weight:700;
  text-decoration:none;
}
.upsell .u-note{margin-top:10px;font-size:12px;color:var(--ink-faint)}


@media(min-width:768px){
  .shelf{gap:26px}
  .shelf-item{width:210px}
  .shelf.mini .shelf-item{width:132px}
  .gift-row{width:min(100%,446px)}   /* 210 + 210 + the 26px gap */
}