/* THE PRODUCT PAGE IS THE ONE CARD (Steven 2026-10-12, 22:40: "a pdp page is
   a want card ... so that you can buy easily"; COO hands 2026-10-12). Page
   sheet for templates/shop/pdp_card.html, behind LAYOUT_CARDS; the card
   itself is static/cards/card.css. Everything is scoped under .pdpc and
   .pdp-card-page.

   The card is the screen under the header, like the /home deck's slide:
   under 900px wide it is 4px from each edge, from 900px it keeps the 9:16
   shape at full height, centred. Always exactly the room under the header
   (--pdpc-top, the header's height; 64px), so the button is in view without
   a scroll; the picture gives up room first, the words are clamped. Under
   the card, the book's Amazon rating, below the buy action. */

.pdp-card-page .main-area { background: var(--surface-secondary); min-height: 0; }
.pdp-card-page .main-area__content { padding: 0; }

/* The header's plus already posts a want; the floating one would sit on the
   card's button. */
.pdp-card-page .global-post-fab,
.pdp-card-page .global-post-fab-surface { display: none !important; }

.pdpc { box-sizing: border-box; width: 100%; color: var(--text-primary); }

.pdpc__slot {
    --pdpc-room: calc(100vh - var(--pdpc-top, var(--size-16)));
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: var(--pdpc-room);
    min-height: 480px;
    padding: var(--space-1);
}
@supports (height: 100svh) {
    .pdpc__slot { --pdpc-room: calc(100svh - var(--pdpc-top, var(--size-16))); }
}
.pdpc__slot > .tb-card {
    flex: 1 1 auto;
    box-sizing: border-box;
    width: 100%;
    min-height: 0;
}
.pdpc__slot > .tb-card--full > .tb-card__inner {
    flex: 1 1 auto;
    min-height: 0;
    grid-template-rows: minmax(0, 1fr);
}
@media (min-width: 900px) {
    .pdpc__slot { padding: var(--space-3); }
    .pdpc__slot > .tb-card { width: auto; max-width: 100%; aspect-ratio: 9 / 16; }
}

/* The product's own picture fills the art, cover-cropped; a tall cover
   (the book) keeps its top in view, where its title is. */
.pdpc .tb-card__front .tb-card__img { object-position: 50% 30%; }

/* The words, clamped so the price and the button stay on the screen. */
.pdpc .tb-card__subtitle,
.pdpc .tb-card__body {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pdpc .tb-card__subtitle { -webkit-line-clamp: 1; line-clamp: 1; }
.pdpc .tb-card__body { -webkit-line-clamp: 3; line-clamp: 3; }

/* The back: who made it on the picture band, then the facts and what you
   get, read as paragraphs. Long copy takes the band's room down to 168px,
   then the back scrolls inside the card. */
.pdpc .tb-card__back .tb-card__art--agent { flex: 1 1 168px; min-height: 168px; }
.pdpc .tb-card__back .tb-card__gives {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-left: 0;
    list-style: none;
}
.pdpc .tb-card__back .tb-card__record dd { font-size: 18px; }

@media (max-width: 600px) {
    .pdpc .tb-card__art { padding: var(--space-4) var(--space-5); }
    .pdpc .tb-card__over { gap: 6px; }
    .pdpc .tb-card__title { margin-top: 2px; font-size: 28px; }
    .pdpc .tb-card__subtitle { font-size: 15px; }
    .pdpc .tb-card__panel { gap: 10px; padding: var(--space-4) var(--space-5) 4px; }
    .pdpc .tb-card__body { font-size: 15px; line-height: 1.4; }
    .pdpc .tb-card__cta { min-height: 52px; font-size: 18px; }
    .pdpc .tb-card__foot { padding: 0 0 4px; font-size: 15px; }
}
/* a short phone (375x667): two lines of the pitch, a smaller button */
@media (max-width: 600px) and (max-height: 760px) {
    .pdpc .tb-card__title { font-size: 26px; }
    .pdpc .tb-card__art { padding: var(--space-3) var(--space-5); }
    .pdpc .tb-card__panel { gap: 8px; padding-top: var(--space-3); }
    .pdpc .tb-card__body { -webkit-line-clamp: 2; line-clamp: 2; }
    .pdpc .tb-card__cta { min-height: 48px; }
}

/* ---- under the card: the book's Amazon rating ------------------------ */
.pdpc-more {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: var(--space-4) var(--space-3) var(--space-16);
}
.pdpc-rating {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4);
    border-radius: var(--radius-xl);
    background: var(--surface-primary);
    box-shadow: var(--shadow-sm);
    color: var(--text-primary);
    text-decoration: none;
}
.pdpc-rating__stars {
    display: inline-flex;
    gap: var(--space-1);
    color: var(--pdp-amazon-review-star-color);
    font-size: var(--text-lg);
}
.pdpc-rating__score { font-family: var(--font-heading); font-size: var(--text-lg); }
.pdpc-rating__count { color: var(--text-secondary); font-size: var(--text-sm); }
.pdpc-rating__meta { margin: 0 var(--space-1); color: var(--text-secondary); font-size: var(--text-sm); }
.pdpc-rating__frame {
    overflow: hidden;
    border: var(--pdp-amazon-review-image-border);
    border-radius: var(--pdp-amazon-review-image-radius);
    background: var(--surface-primary);
}
.pdpc-rating__image { display: block; width: 100%; height: auto; }