/* Read-and-write e-books (Letters, Numbers): shop shelf row and their product pages. Sits on top of fresh.css. */

/* Shop shelf: the new pair under the original three */
.pick-new { max-width: 1240px; margin: clamp(18px, 2.4vw, 32px) auto 0; }
.pick-new-head { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 clamp(24px, 3vw, 36px); text-align: center; flex-wrap: wrap; }
.pick-new-head h3 { font-family: var(--f-disp); font-weight: 700; font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -.03em; margin: 0; }
.new-pill { display: inline-flex; align-items: center; vertical-align: 1px; margin-left: 6px; padding: 4px 9px; border-radius: 999px; background: #2B1500; color: #FFD45E; font-family: var(--f-mono); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
/* Same card width as the three above: two of the three columns, centred */
.tiles-2 { grid-template-columns: repeat(2, 1fr); max-width: calc((100% - 2 * clamp(18px, 2.4vw, 32px)) * 2 / 3 + clamp(18px, 2.4vw, 32px)); }
.pick .tile-l .tile-art { background: radial-gradient(ellipse at 50% 35%, #EAF3FF, #B4D2F3 74%, #94BCE9); }
.pick .tile-n .tile-art { background: radial-gradient(ellipse at 50% 35%, #FFF0E3, #F7C6A0 74%, #EEAB7E); }
.tile-l .tile-kicker { color: #1F5FA8; } .tile-n .tile-kicker { color: #C2551C; }

/* Product pages */
.pdp.bl { background: linear-gradient(180deg, #EEF5FF 0%, #C8DDF6 100%); }
.pdp.bn { background: linear-gradient(180deg, #FFF2E6 0%, #FAD3B4 100%); }
.bl .pdp-kicker { color: #1F5FA8; } .bn .pdp-kicker { color: #C2551C; }
.bl-list li::before { background: #CFE0F7; } .bn-list li::before { background: #FBD9C0; }

/* Letters: 28 letter chips */
.letter-grid { list-style: none; max-width: 1000px; margin: 40px auto 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; }
.letter-grid li { display: grid; justify-items: center; gap: 4px; padding: 16px 6px 14px; border-radius: 20px; background: var(--white); box-shadow: var(--soft); transition: transform .35s var(--spring); }
.letter-grid li:hover { transform: translateY(-4px); }
.letter-grid .ar { font-size: clamp(30px, 3vw, 40px); line-height: 1.25; color: #0E7A63; }
.letter-grid small { direction: ltr; text-align: center; line-height: 1.25; font-family: var(--f-mono); font-weight: 700; font-size: 11px; letter-spacing: .06em; color: var(--ink-soft); }

/* Inside the book: three chapter openers */
.peek { max-width: 1100px; margin: 40px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 26px); }
.peek figure { margin: 0; }
.peek img { display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: 0 30px 50px -28px rgba(43, 21, 0, .55); }
.peek figcaption { margin-top: 12px; text-align: center; font-family: var(--f-mono); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }

/* Course upsell on the new book pages */
.upsell-course { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: linear-gradient(135deg, #0B3B5C 0%, #0E5E7A 100%); color: #fff; }
.upsell-course::before { background: radial-gradient(circle, rgba(255, 201, 60, .22), transparent 70%); }
.upsell-course .best-tag { background: #FFC93C; color: #2B1500; }
.upsell-course p { color: rgba(255, 255, 255, .82); }
.upsell-course .laptop { width: min(440px, 100%); justify-self: center; }

@media (max-width: 760px) {
  .tiles-2 { grid-template-columns: 1fr; max-width: 460px; }
  .upsell-course { grid-template-columns: 1fr; }
  .letter-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .letter-grid small { font-size: 10px; letter-spacing: .02em; }
  .peek { grid-template-columns: 1fr 1fr; }
  .peek figure:nth-child(3) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .letter-grid li, .letter-grid li:hover { transition: none; transform: none; }
}
@media (max-width: 760px) {
  .bn-list { grid-template-columns: 1fr; }
  .bn-list li { min-width: 0; }
}

/* Numbers cover is a shorter shape (720x1152): match the height of the other covers so every panel lines up */
.pick .tile-n .tile-art { container-type: inline-size; }
.pick .tile-n .tile-art img { width: auto; height: calc(52cqw * 1303 / 720); }

/* Book 06, Emirati Arabic Grammar (owner, 2026-10-05). Same cover shape as Numbers. */
.pick .tile-g .tile-art { background: radial-gradient(ellipse at 50% 35%, #FFF6DC, #FFD98A 74%, #F5C04F); container-type: inline-size; }
.pick .tile-g .tile-art img { width: auto; height: calc(52cqw * 1303 / 720); }
.tile-g .tile-kicker { color: #A86A00; }