/* ═══════════════════════════════════════════════════════════
   Shop PDP — Standalone Full-Screen Item Detail Page
   Light-first, matches app-page container pattern.
   All values pull from --pdp-* tokens in tokens.css.
   BEM: .pdp-page, .pdp-page__*
   ═══════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

.pdp-body {
    font-family: var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
    background: var(--pdp-bg);
    color: var(--pdp-text-primary);
    min-height: 100vh;
    overflow-x: hidden;
}

/* ── Top bar (back + brand + close) ── */
.pdp-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: var(--pdp-topbar-height);
    background: var(--pdp-topbar-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--pdp-topbar-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
}
.pdp-topbar__back,
.pdp-topbar__close {
    width: var(--pdp-nav-size);
    height: var(--pdp-nav-size);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pdp-nav-color);
    text-decoration: none;
    transition: background 0.2s;
}
.pdp-topbar__back:hover,
.pdp-topbar__close:hover {
    background: rgba(0, 0, 0, 0.05);
}
.pdp-topbar__brand {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--pdp-text-primary);
}
.pdp-topbar__logo {
    width: var(--pdp-topbar-logo-size);
    height: var(--pdp-topbar-logo-size);
}
.pdp-topbar__wordmark {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: var(--pdp-topbar-wordmark-size);
    font-weight: var(--font-bold);
    letter-spacing: var(--pdp-topbar-wordmark-spacing);
    color: var(--pdp-text-secondary);
}
/* Toll Bench Shop (Steven 2026-10-02): the shop's product pages wear the
   same mark as the /shop masthead, the Toll Bench wordmark then "Shop", with
   no Book of Houses glyph (the site hides that name). Same type as
   .toll-bench-header__title (layout.css), which these standalone pages do not
   load; only the ink differs, because this bar is light and the masthead's is
   dark. The run is inline-flex like the masthead, so the space before "Shop"
   is   in the markup, and the run sits in the masthead's 40px slot so
   the descender of "Shop" is not clipped. The wordmark's disc comes from
   components/toll-wordmark.css, linked by each page. */
.pdp-topbar__wordmark--toll {
    display: inline-flex;
    align-items: center;
    height: var(--size-10);
    overflow: hidden;
    color: var(--pdp-text-primary);
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: var(--font-extrabold, 800);
    letter-spacing: 0;
    line-height: 1;
    text-transform: none;
    white-space: nowrap;
}
@media (max-width: 520px) {
    .pdp-topbar__wordmark--toll { font-size: var(--text-2xl); }
}
@media (max-width: 390px) {
    .pdp-topbar__wordmark--toll { font-size: var(--text-xl); }
}

/* ── Main two-column grid ── */
.pdp-page {
    max-width: var(--pdp-page-max-width);
    margin: 0 auto;
    padding: var(--pdp-page-padding);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--pdp-page-gap);
    min-height: 100vh;
    align-content: start;
}

/* ── Photo column ── */
.pdp-page__photo {
    position: sticky;
    top: 80px;
    align-self: start;
}

.pdp-zine-read-sticker {
    display: block;
    margin-top: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    background: var(--color-white);
    color: var(--pdp-text-primary);
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.pdp-zine-read-sticker strong,
.pdp-zine-read-sticker span {
    display: block;
}

.pdp-zine-read-sticker strong {
    font-family: var(--font-heading, var(--font-sans));
    font-size: var(--text-sm);
    line-height: 1.25;
}

.pdp-zine-read-sticker span {
    margin-top: var(--space-1);
    color: var(--pdp-text-secondary);
    font-size: var(--text-xs);
    line-height: 1.35;
}
.pdp-page__photo-img {
    width: 100%;
    aspect-ratio: var(--pdp-photo-aspect);
    object-fit: cover;
    border-radius: var(--pdp-photo-radius);
    background: var(--pdp-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.pdp-page__photo-img--book {
    object-fit: contain;
    background: var(--pdp-book-photo-bg);
    box-shadow: none;
}

/* ── Book variant ── */
.pdp-page__hint {
    font-size: var(--pdp-hint-size);
    color: var(--pdp-text-muted);
    line-height: 1.6;
}
.pdp-page__icon-fallback-inline {
    font-size: var(--text-4xl);
    color: var(--pdp-text-muted);
    flex-shrink: 0;
}
.pdp-page__receipt-icon-ph {
    font-size: var(--text-sm);
    color: var(--pdp-text-muted);
}
.pdp-page__photo-fallback {
    width: 100%;
    aspect-ratio: var(--pdp-photo-aspect);
    border-radius: var(--pdp-photo-radius);
    background: var(--pdp-surface);
    border: 1px solid var(--pdp-border);
    display: flex;
    align-items: center;
    justify-content: center;
}
.pdp-page__photo-fallback iconify-icon {
    font-size: var(--text-5xl);
    color: var(--pdp-text-muted);
    opacity: 0.3;
}

/* ── Info column ── */
.pdp-page__info {
    display: flex;
    flex-direction: column;
    gap: var(--pdp-info-gap);
    padding-top: 20px;
}

/* Badge */
.pdp-page__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}
.pdp-page__kind-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: var(--size-6);
    box-sizing: border-box;
    padding: var(--space-1) var(--space-2);
    background: var(--color-yellow-400);
    color: var(--accent-dark);
    border-radius: var(--radius-full);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    line-height: 1;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.pdp-page__kind-pill iconify-icon {
    display: block;
    width: var(--size-4);
    height: var(--size-4);
    flex: none;
    font-size: var(--text-base);
}
.pdp-page__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--pdp-badge-bg);
    color: var(--pdp-badge-color);
    font-size: var(--pdp-badge-size);
    font-weight: var(--font-semibold);
    padding: 4px 12px;
    border-radius: var(--pdp-badge-radius);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    width: fit-content;
}

/* Title row — icon + name + buy button inline */
.pdp-page__title-row {
    display: flex;
    align-items: center;
    gap: 16px;
}
.pdp-page__title-row .pdp-page__name {
    flex: 1;
    min-width: 0;
}
.pdp-page__icon {
    width: var(--pdp-icon-size);
    height: var(--pdp-icon-size);
    border-radius: var(--radius-md);
    object-fit: cover;
    flex-shrink: 0;
    background: var(--pdp-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.pdp-page__icon-fallback {
    width: var(--pdp-icon-size);
    height: var(--pdp-icon-size);
    border-radius: var(--radius-md);
    background: var(--pdp-surface);
    border: 1px solid var(--pdp-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pdp-page__icon-fallback iconify-icon {
    font-size: var(--text-3xl);
    color: var(--pdp-text-muted);
}
.pdp-page__name {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: var(--pdp-title-size);
    font-weight: var(--font-bold);
    color: var(--pdp-text-primary);
    line-height: 1.2;
}

/* Description */
.pdp-page__desc {
    font-size: var(--pdp-desc-size);
    color: var(--pdp-text-secondary);
    line-height: 1.7;
    max-width: 48ch;
    white-space: pre-line;
}

.pdp-book-buy {
    display: grid;
    gap: 10px;
    max-width: 560px;
}

.pdp-book-buy__primary,
.pdp-book-buy__secondary {
    text-decoration: none;
    border-radius: 18px;
    transition: transform 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease;
}

.pdp-book-buy__primary {
    display: grid;
    gap: 5px;
    padding: 18px 20px;
    background: #111827;
    color: #fff;
    box-shadow: 0 14px 30px rgba(17, 24, 39, 0.16);
}

.pdp-book-buy__primary:hover,
.pdp-book-buy__secondary:hover {
    transform: translateY(-1px);
}

.pdp-book-buy__eyebrow {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #86efac;
}

.pdp-book-buy__title {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
}

.pdp-book-buy__price {
    font-size: 15px;
    font-weight: 700;
}

.pdp-book-buy__price small {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.72);
}

.pdp-book-buy__meta {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.72);
}

.pdp-book-buy__secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 18px;
    border: 1px solid rgba(17, 24, 39, 0.12);
    color: #111827;
    background: #fff;
    font-weight: 800;
}

.pdp-book-buy__secondary iconify-icon {
    font-size: 17px;
}

.pdp-book-buy__digital {
    color: var(--pdp-text-muted);
    font-size: 13px;
    line-height: 1.45;
}

.pdp-book-copy {
    display: grid;
    gap: 16px;
    max-width: 66ch;
    color: var(--pdp-text-secondary);
    font-size: 16px;
    line-height: 1.68;
}

.pdp-book-copy h2 {
    margin: 0;
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: clamp(28px, 5vw, 46px);
    line-height: 0.98;
    color: var(--pdp-text-primary);
    letter-spacing: 0;
}

.pdp-book-copy__intro {
    font-size: 18px;
    line-height: 1.55;
    color: #2d3340;
}

.pdp-book-copy__callout {
    padding: 16px 18px;
    border-left: 4px solid #22c55e;
    background: rgba(34, 197, 94, 0.07);
    border-radius: 0 14px 14px 0;
}

.pdp-book-copy__callout--story {
    border-left-color: #111827;
    background: rgba(17, 24, 39, 0.055);
}

.pdp-book-copy__callout span {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #111827;
}

.pdp-book-copy__callout p,
.pdp-book-copy p {
    margin: 0;
}

.pdp-book-copy__turn {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: 22px;
    line-height: 1.25;
    font-weight: 800;
    color: var(--pdp-text-primary);
}

.pdp-book-copy__closing {
    padding-top: 14px;
    border-top: 1px solid rgba(17, 24, 39, 0.12);
    font-weight: 700;
    color: #2d3340;
}

/* ── Buy button (inline in title row) ── */
.pdp-page__buy {
    flex-shrink: 0;
    padding: 12px 28px;
    border: none;
    border-radius: var(--pdp-buy-radius);
    background: var(--pdp-buy-bg);
    color: var(--pdp-buy-color);
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}
.pdp-page__buy:hover {
    opacity: 0.88;
    transform: translateY(-1px);
}
.pdp-page__buy:active { transform: translateY(0); }

/* ── Receipt (total + revenue breakdown) ── */
.pdp-page__receipt {
    background: var(--pdp-surface);
    border: 1px solid var(--pdp-border);
    border-radius: var(--radius-md);
    padding: 16px 20px;
}
.pdp-page__receipt-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--pdp-text-primary);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--pdp-border);
    margin-bottom: 10px;
}
.pdp-page__receipt-amount {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: var(--text-base);
    font-weight: var(--font-bold);
}
.pdp-page__receipt-splits {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pdp-page__receipt-line {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-xs);
    color: var(--pdp-text-secondary);
}
.pdp-page__receipt-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.pdp-page__receipt-pct {
    font-weight: var(--font-medium);
    color: var(--pdp-text-muted);
    font-size: var(--text-xs);
    margin-left: 4px;
}
.pdp-page__receipt-val {
    margin-left: auto;
    font-weight: var(--font-semibold);
    color: var(--pdp-text-primary);
    font-size: var(--text-xs);
}

.pdp-page__xp-gate {
    font-size: var(--text-xs);
    color: var(--pdp-text-muted);
}

/* ── Zine variant — natural cover, no cropping ── */
.pdp-page__photo-img--zine,
.pdp-body--zine .pdp-page__photo-img {
    aspect-ratio: auto;
    object-fit: contain;
    object-position: var(--pdp-zine-cover-position);
}
.pdp-body--zine .pdp-page__photo-link {
    display: block;
    text-decoration: none;
}

/* Subscribe hint */
.pdp-page__subscribe-hint {
    font-size: var(--pdp-hint-size);
    color: var(--pdp-text-muted);
    line-height: 1.6;
}

/* ── Editions list — past editions preview ── */
.pdp-editions {
    display: flex;
    flex-direction: column;
    gap: var(--pdp-zine-editions-gap);
}
.pdp-editions__title {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--pdp-text-primary);
}
.pdp-editions__list {
    display: flex;
    flex-direction: column;
    gap: var(--pdp-zine-editions-gap);
}
.pdp-edition {
    display: flex;
    align-items: center;
    gap: 12px;
    height: var(--pdp-zine-edition-height);
    padding: 8px 12px;
    background: var(--pdp-zine-edition-bg);
    border: var(--pdp-zine-edition-border);
    border-radius: var(--pdp-zine-edition-radius);
}
.pdp-edition__cover {
    width: var(--pdp-zine-edition-cover-width);
    aspect-ratio: var(--pdp-zine-cover-aspect);
    object-fit: cover;
    object-position: top;
    border-radius: var(--pdp-zine-edition-cover-radius);
    flex-shrink: 0;
}
.pdp-edition__name {
    font-size: var(--pdp-zine-edition-name-size);
    font-weight: var(--pdp-zine-edition-name-weight);
    color: var(--pdp-text-primary);
    line-height: 1.3;
}

/* ── Slide-up modal ── */
.slideup-modal {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s;
}
.slideup-modal--open {
    pointer-events: auto;
    opacity: 1;
}
.slideup-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(4px);
}
.slideup-modal__panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 480px;
    max-height: 85vh;
    overflow-y: auto;
    background: var(--pdp-modal-bg, #fff);
    border: 1px solid var(--pdp-modal-border, rgba(0,0,0,0.06));
    border-radius: 20px 20px 0 0;
    padding: 0 24px 32px;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.slideup-modal--open .slideup-modal__panel { transform: translateY(0); }
.slideup-modal__handle {
    width: 36px;
    height: 4px;
    border-radius: var(--radius-xs);
    background: var(--pdp-border, rgba(0,0,0,0.1));
    margin: 12px auto 0;
}
.slideup-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0 12px;
}
.slideup-modal__title {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--pdp-text-primary);
}
.slideup-modal__close {
    background: none;
    border: none;
    color: var(--pdp-text-muted);
    cursor: pointer;
    padding: 4px;
    display: flex;
}
.slideup-modal__close:hover { color: var(--pdp-text-primary); }

/* ── Purchase modal content (JS-injected) ── */
.purchase-modal { text-align: center; }
.purchase-modal__item-name {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--pdp-text-primary);
    margin-bottom: 4px;
}
.purchase-modal__item-desc { font-size: var(--text-xs); color: var(--pdp-text-muted); margin-bottom: 20px; }
.purchase-modal__breakdown { border-top: 1px solid var(--pdp-border); padding-top: 16px; margin-bottom: 20px; }
.purchase-modal__row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: var(--text-sm);
    color: var(--pdp-text-secondary);
}
.purchase-modal__row--after {
    font-weight: var(--font-semibold);
    color: var(--pdp-text-primary);
    border-top: 1px solid var(--pdp-border);
    padding-top: 10px;
    margin-top: 4px;
}
.purchase-modal__price {
    font-weight: var(--font-semibold);
    color: var(--pdp-text-primary);
    display: flex;
    align-items: center;
    gap: 4px;
}
.pdp-coiny-inline-icon {
    width: var(--size-4);
    height: var(--size-4);
    vertical-align: text-bottom;
    display: inline-block;
}

.pdp-book-checkout-icon {
    width: var(--size-10);
    height: var(--size-10);
    color: var(--accent-tertiary);
}

.pdp-book-checkout-includes {
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    color: var(--status-success);
}

/* ── Stripe payment form inside PDP slide-up modal ── */
.stripe-payment-form {
    text-align: center;
    display: grid;
    gap: 0;
}

.stripe-payment-form__summary {
    margin-bottom: var(--space-5);
}

.stripe-payment-form__coiny-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-12, 48px);
    height: var(--size-12, 48px);
    margin-bottom: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--surface-secondary);
    color: var(--accent-tertiary);
}

.stripe-payment-form__coiny-icon svg,
.stripe-payment-form__coiny-icon iconify-icon {
    width: var(--size-6, 24px);
    height: var(--size-6, 24px);
}

.stripe-payment-form__amount {
    margin: 0 0 var(--space-1);
    color: var(--pdp-text-primary);
    font-family: var(--font-heading, var(--font-sans));
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
}

.stripe-payment-form__price {
    margin: 0;
    color: var(--pdp-text-secondary);
    font-size: var(--text-sm);
}

.stripe-payment-form__card-wrapper {
    margin-bottom: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--pdp-border);
    border-radius: var(--radius-md);
    background: var(--surface-secondary);
    text-align: left;
}

.stripe-payment-form__card-label {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--pdp-text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0;
}

#stripe-card-element,
#stripe-card-element-book {
    min-height: 32px;
    padding: var(--space-2, 8px) 0;
}

#stripe-card-errors,
#stripe-card-errors-book,
#book-usd-errors {
    min-height: 20px;
    margin-top: var(--space-2);
    color: var(--status-error, var(--color-red-500));
    font-size: var(--text-xs);
    line-height: var(--leading-snug);
    text-align: left;
}

.stripe-payment-form__submit,
.stripe-payment-form__cancel,
.purchase-modal__confirm-btn {
    width: 100%;
    min-height: 44px;
    border-radius: var(--radius-md);
    font: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.stripe-payment-form__submit,
.purchase-modal__confirm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: var(--accent-primary);
    color: var(--text-inverse);
    font-weight: var(--font-bold);
    text-decoration: none;
    transition: transform 0.15s ease, background 0.15s ease;
}

.stripe-payment-form__submit:hover,
.purchase-modal__confirm-btn:hover {
    background: var(--accent-primary-hover);
    transform: translateY(-1px);
}

.stripe-payment-form__submit:disabled {
    background: var(--surface-tertiary);
    color: var(--pdp-text-muted);
    cursor: not-allowed;
    transform: none;
}

.stripe-payment-form__cancel {
    margin-top: var(--space-2);
    border: 0;
    background: transparent;
    color: var(--pdp-text-secondary);
    font-size: var(--text-sm);
}

.stripe-payment-form__cancel:hover {
    color: var(--pdp-text-primary);
}

.stripe-payment-form__secure {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1, 4px);
    margin-top: var(--space-3, 12px);
    color: var(--pdp-text-muted);
    font-size: var(--text-xs);
}

.stripe-payment-form__secure svg {
    display: block;
    width: 14px;
    height: 14px;
    max-width: 14px;
    max-height: 14px;
    flex: 0 0 14px;
}

.stripe-payment-form__success {
    padding: var(--space-4) 0;
}

.stripe-payment-form__success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-12, 48px);
    height: var(--size-12, 48px);
    margin-bottom: var(--space-3);
    border-radius: 50%;
    background: var(--status-success-bg, var(--surface-secondary));
    color: var(--status-success);
    font-size: var(--text-2xl);
}

.stripe-payment-form__success h3 {
    margin: 0 0 var(--space-2);
    color: var(--pdp-text-primary);
    font-family: var(--font-heading, var(--font-sans));
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
}

.stripe-payment-form__success p {
    margin: 0 0 var(--space-4);
    color: var(--pdp-text-secondary);
    font-size: var(--text-sm);
}

.purchase-modal__split {
    border: 1px solid var(--pdp-border);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.02);
    padding: 12px;
    margin-bottom: 20px;
    text-align: left;
}
.purchase-modal__split-title {
    color: var(--pdp-text-muted);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0;
    margin-bottom: 8px;
}
.purchase-modal__split-bar {
    display: flex;
    width: 100%;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--pdp-border);
    margin-bottom: 10px;
}
.purchase-modal__split-seg {
    display: block;
    flex: 0 0 auto;
    min-width: 2px;
}
.purchase-modal__split-seg--creator,
.purchase-modal__split-dot--creator {
    background: var(--color-green-500, #22c55e);
}
.purchase-modal__split-seg--house,
.purchase-modal__split-dot--house {
    background: var(--color-yellow-400, #f4c542);
}
.purchase-modal__split-seg--platform,
.purchase-modal__split-dot--platform {
    background: var(--color-purple-500, #8b5cf6);
}
.purchase-modal__split-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.purchase-modal__split-row,
.purchase-modal__split-left,
.purchase-modal__split-amount {
    display: flex;
    align-items: center;
}
.purchase-modal__split-row {
    justify-content: space-between;
    gap: 10px;
    color: var(--pdp-text-secondary);
    font-size: var(--text-xs);
    min-width: 0;
}
.purchase-modal__split-left {
    gap: 6px;
    min-width: 0;
}
.purchase-modal__split-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
}
.purchase-modal__split-pct {
    color: var(--pdp-text-primary);
    font-weight: var(--font-semibold);
    flex: 0 0 auto;
}
.purchase-modal__split-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.purchase-modal__split-amount {
    color: var(--pdp-text-primary);
    font-weight: var(--font-semibold);
    gap: 4px;
    flex: 0 0 auto;
}
.purchase-modal__confirm-btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: var(--pdp-buy-radius);
    background: var(--pdp-buy-bg);
    color: var(--pdp-buy-color);
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    cursor: pointer;
    transition: opacity 0.2s;
}
.purchase-modal__confirm-btn:hover { opacity: 0.88; }
.purchase-modal__confirm-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.purchase-modal__cancel-btn {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: var(--pdp-buy-radius);
    background: transparent;
    color: var(--pdp-text-muted);
    font-size: var(--text-sm);
    cursor: pointer;
    margin-top: 8px;
}
.purchase-modal__cancel-btn:hover { color: var(--pdp-text-primary); }
.purchase-modal__preview { margin-bottom: 16px; }
.purchase-modal__image img {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-md);
    object-fit: cover;
}

/* Insufficient balance */
.insufficient-lumina { text-align: center; padding: 8px 0; }
.insufficient-lumina__icon svg { width: 48px; height: 48px; margin-bottom: 12px; }
.insufficient-lumina__title {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--pdp-text-primary);
    margin-bottom: 8px;
}
.insufficient-lumina__message { font-size: var(--text-sm); color: var(--pdp-text-secondary); line-height: 1.6; margin-bottom: 4px; }
.insufficient-lumina__hint { font-size: var(--text-xs); color: var(--pdp-text-muted); margin-bottom: 20px; }
.insufficient-lumina__dismiss {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: var(--pdp-buy-radius);
    background: var(--pdp-border, rgba(0,0,0,0.04));
    color: var(--pdp-text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
}
.insufficient-lumina__dismiss:hover { background: rgba(0, 0, 0, 0.08); }

/* ── Toast ── */
.pdp-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--pdp-surface, #fff);
    color: var(--pdp-text-primary);
    padding: 12px 24px;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    border: 1px solid var(--pdp-border);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    z-index: 9999;
}
.pdp-toast--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.pdp-toast--error {
    border-color: rgba(239, 68, 68, 0.3);
    color: var(--color-red-600);
}

/* ── Art PDP — Purchase Tiers ── */
.pdp-tiers {
    display: flex;
    flex-direction: column;
    gap: var(--pdp-tier-gap);
}
.pdp-tier {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--pdp-tier-padding);
    background: var(--pdp-tier-bg);
    border: 1px solid var(--pdp-tier-border);
    border-radius: var(--pdp-tier-radius);
    transition: border-color var(--duration-normal) var(--ease-default);
}
.pdp-tier:hover {
    border-color: var(--pdp-tier-border-hover);
}
.pdp-tier__icon {
    width: var(--pdp-tier-icon-size);
    height: var(--pdp-tier-icon-size);
    border-radius: var(--pdp-tier-icon-radius);
    background: var(--pdp-tier-icon-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--pdp-tier-icon-color);
    font-size: var(--pdp-tier-icon-font-size);
}
.pdp-tier__info {
    flex: 1;
    min-width: 0;
}
.pdp-tier__name {
    font-family: var(--font-heading);
    font-size: var(--pdp-tier-name-size);
    font-weight: var(--pdp-tier-name-weight);
    color: var(--pdp-text-primary);
    margin-bottom: 2px;
}
.pdp-tier__detail {
    font-size: var(--pdp-tier-detail-size);
    color: var(--pdp-text-muted);
}
.pdp-tier__price {
    font-family: var(--font-heading);
    font-size: var(--pdp-tier-price-size);
    font-weight: var(--pdp-tier-price-weight);
    color: var(--pdp-text-primary);
    white-space: nowrap;
    flex-shrink: 0;
}
.pdp-tier__action {
    flex-shrink: 0;
}
.pdp-tier__btn {
    padding: var(--pdp-tier-btn-padding);
    border: none;
    border-radius: var(--pdp-tier-btn-radius);
    background: var(--pdp-tier-btn-bg);
    color: var(--pdp-tier-btn-color);
    font-family: var(--font-heading);
    font-size: var(--pdp-tier-btn-size);
    font-weight: var(--pdp-tier-btn-weight);
    cursor: pointer;
    transition: background var(--duration-normal) var(--ease-default);
    white-space: nowrap;
}
.pdp-tier__btn:hover {
    background: var(--accent-primary-hover);
}
.pdp-tier__btn--outline {
    background: transparent;
    color: var(--pdp-text-primary);
    border: 1px solid var(--pdp-tier-border);
}
.pdp-tier__btn--outline:hover {
    background: var(--interactive-hover);
}

/* Art PDP — stereolayer description block */
.pdp-stereo {
    padding: var(--pdp-stereo-padding);
    background: var(--pdp-stereo-bg);
    border: 1px solid var(--pdp-stereo-border);
    border-radius: var(--pdp-stereo-radius);
}
.pdp-stereo__title {
    font-family: var(--font-heading);
    font-size: var(--pdp-stereo-title-size);
    font-weight: var(--pdp-stereo-title-weight);
    color: var(--pdp-text-primary);
    margin-bottom: var(--space-2);
}
.pdp-stereo__text {
    font-size: var(--pdp-stereo-text-size);
    color: var(--pdp-text-secondary);
    line-height: var(--leading-relaxed);
}

/* ── Editions counter ── */
.pdp-page__editions {
    font-size: var(--text-sm);
    color: var(--pdp-text-muted);
    font-weight: var(--font-medium);
}

.pdp-page__edition-owned {
    display: inline-flex;
    width: fit-content;
    padding: 6px 10px;
    border-radius: var(--radius-full);
    background: rgba(34, 197, 94, 0.12);
    color: var(--color-green-600);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
}

.pdp-gift-btn {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid var(--pdp-border);
    border-radius: var(--radius-full);
    background: var(--pdp-surface);
    color: var(--pdp-text-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    cursor: pointer;
}
.pdp-gift-btn:hover {
    border-color: var(--pdp-text-primary);
}

/* ── Purchase success banner ── */
.pdp-purchased-banner {
    position: fixed;
    top: var(--pdp-topbar-height, 56px);
    left: 0;
    right: 0;
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--zine-text-primary);
    color: var(--color-green-400);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    border-bottom: 1px solid rgba(34, 197, 94, 0.2);
}
.pdp-purchased-banner iconify-icon {
    font-size: var(--text-lg);
}

/* ── Buy button disabled state ── */
.pdp-tier__btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Mobile ── */
@media (max-width: 768px) {
    .pdp-page {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 72px 20px 40px;
    }
    .pdp-page__photo { position: static; }
    .pdp-page__photo-img,
    .pdp-page__photo-fallback {
        aspect-ratio: 4 / 3;
        max-height: 360px;
    }
    /* Zine cover stays natural on mobile */
    .pdp-body--zine .pdp-page__photo-img {
        aspect-ratio: auto;
        max-height: none;
    }
    .pdp-page__title-row {
        flex-wrap: wrap;
    }
    .pdp-page__name { font-size: var(--text-xl); }
    .pdp-page__buy { width: 100%; }
}

/* ─────────────────────────────────────────────────────────────
   PDP Pricing Card — prominent price + visible revenue split bar
   ───────────────────────────────────────────────────────────── */
.pdp-pricing-card {
    background: var(--surface-card, var(--color-white));
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    padding: var(--space-4) var(--space-5);
    margin: var(--space-4) 0;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.pdp-pricing-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.pdp-pricing-card__price {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

.pdp-pricing-card__price svg {
    align-self: center;
}

.pdp-pricing-card__amount {
    font-family: var(--font-display, var(--font-sans));
    font-size: var(--text-3xl);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--color-dark-900);
    line-height: 1;
}

.pdp-pricing-card__cadence {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--color-gray-500);
    text-transform: uppercase;
}

.pdp-pricing-card__buy-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.pdp-pricing-card__buy-row--subscription {
    min-width: min(280px, 100%);
}

.pdp-pricing-card__buy-row--subscription .pdp-pricing-card__buy {
    width: 100%;
}

.pdp-pricing-card__qty {
    width: 56px;
    height: 40px;
    padding: 0 var(--space-2);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    background: var(--color-white);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-dark-900);
    text-align: center;
}

.pdp-pricing-card__qty:focus {
    outline: 2px solid var(--color-cyan-500);
    outline-offset: 1px;
    border-color: var(--color-cyan-500);
}

.pdp-pricing-card__buy {
    height: 40px;
    padding: 0 var(--space-4);
    border: 0;
    border-radius: var(--radius-full);
    background: var(--color-dark-900);
    color: var(--color-white);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: transform 120ms ease, background 120ms ease;
}

.pdp-pricing-card__buy:hover {
    background: var(--color-dark-800);
    transform: translateY(-1px);
}

.pdp-pricing-card__buy:active {
    transform: translateY(0);
}

.pdp-pricing-card__delivery {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-dark-800);
}

.pdp-pricing-card__delivery-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.pdp-pricing-card__delivery-item::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-primary, var(--color-green-500));
    flex-shrink: 0;
}

.pdp-pricing-card__delivery-sep {
    width: 1px;
    height: 14px;
    background: var(--color-gray-300);
    flex-shrink: 0;
}

/* Visual horizontal split bar */
.pdp-pricing-card__bar {
    display: flex;
    width: 100%;
    height: 12px;
    border-radius: var(--radius-full);
    overflow: hidden;
    background: var(--color-gray-200);
}

.pdp-pricing-card__bar-seg {
    height: 100%;
    transition: width 200ms ease;
}

.pdp-pricing-card__bar-seg--creator {
    background: var(--accent-primary, var(--color-green-500));
}

.pdp-pricing-card__bar-seg--house {
    background: var(--color-yellow-400, #f4c542);
}

.pdp-pricing-card__bar-seg--platform {
    background: var(--color-purple-500, #8b5cf6);
}

/* Split rows */
.pdp-pricing-card__splits {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.pdp-pricing-card__split {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    color: var(--color-dark-700);
}

.pdp-pricing-card__split-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pdp-pricing-card__split-dot--creator {
    background: var(--accent-primary, var(--color-green-500));
}

.pdp-pricing-card__split-dot--house {
    background: var(--color-yellow-400, #f4c542);
}

.pdp-pricing-card__split-dot--platform {
    background: var(--color-purple-500, #8b5cf6);
}

.pdp-pricing-card__split-pct {
    font-weight: 700;
    color: var(--color-dark-900);
    min-width: 36px;
}

.pdp-pricing-card__split-name {
    font-weight: 600;
    color: var(--color-dark-900);
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pdp-pricing-card__split-val {
    font-weight: 600;
    color: var(--color-dark-700);
    white-space: nowrap;
}

.pdp-pricing-card__hint {
    font-family: var(--font-mono);
    font-size: var(--text-2xs, 10px);
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--color-gray-500);
    text-transform: uppercase;
    text-align: center;
    padding-top: var(--space-2);
    border-top: 1px dashed var(--color-gray-200);
}

.pdp-pricing-card--simple {
    gap: var(--space-2);
}

.pdp-pricing-card--book-total {
    margin-top: 0;
}

/* Paper reader: the document itself, on the page. */
.pdp-paper-reader {
    border: var(--pdp-book-buy-border);
    border-radius: var(--pdp-book-buy-radius);
    background: var(--pdp-book-buy-bg);
    box-shadow: var(--pdp-book-buy-shadow);
    overflow: hidden;
}

.pdp-paper-reader__pages {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-2);
    background: var(--surface-secondary);
    max-height: calc(var(--size-24) * 9);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.pdp-paper-reader__page {
    display: block;
    width: 100%;
    height: auto;
    border: var(--pdp-amazon-review-image-border);
    border-radius: var(--pdp-amazon-review-image-radius);
    background: var(--color-white);
}

.pdp-paper-reader__open {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-top: var(--pdp-amazon-review-divider);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--pdp-text-primary);
    text-decoration: none;
}

/* Phones get a shorter window on the same pages. */
@media (max-width: 900px) {
    .pdp-paper-reader__pages {
        max-height: calc(var(--size-24) * 6);
    }
}

/* Name + stars sit right under the title, the way a book listing reads. */
.pdp-page__rating {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--pdp-text-primary);
    text-decoration: none;
}

.pdp-page__rating-score {
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
}

.pdp-page__rating-stars {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--pdp-amazon-review-star-color);
    font-size: var(--text-sm);
}

.pdp-page__rating-count {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* Review card carries its own frame, so drop the inner divider. */
.pdp-book-buy--reviews .pdp-amazon-review {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.pdp-book-buy {
    border: var(--pdp-book-buy-border);
    border-radius: var(--pdp-book-buy-radius);
    background: var(--pdp-book-buy-bg);
    padding: var(--pdp-book-buy-padding);
    box-shadow: var(--pdp-book-buy-shadow);
}

.pdp-book-buy__header {
    display: flex;
    flex-direction: column;
    gap: var(--pdp-book-buy-header-gap);
    margin-bottom: var(--pdp-book-buy-header-margin);
}

.pdp-book-buy__eyebrow {
    font-family: var(--font-mono);
    font-size: var(--pdp-book-buy-eyebrow-size);
    font-weight: var(--pdp-book-buy-eyebrow-weight);
    letter-spacing: var(--pdp-book-buy-eyebrow-tracking);
    color: var(--pdp-book-buy-eyebrow-color);
    text-transform: uppercase;
}

.pdp-book-buy__title {
    font-family: var(--font-heading, var(--font-sans));
    font-size: var(--pdp-book-buy-title-size);
    line-height: var(--leading-tight);
    color: var(--pdp-book-buy-title-color);
}

.pdp-book-buy__options {
    display: grid;
    gap: var(--pdp-book-buy-options-gap);
}

.pdp-book-option {
    width: 100%;
    min-height: var(--pdp-book-option-min-height);
    display: grid;
    grid-template-columns: var(--pdp-book-option-icon-size) minmax(0, 1fr);
    align-items: center;
    gap: var(--pdp-book-option-gap);
    padding: var(--pdp-book-option-padding);
    border: var(--pdp-book-option-border);
    border-radius: var(--pdp-book-option-radius);
    background: var(--pdp-book-option-bg);
    color: var(--pdp-book-option-color);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: var(--pdp-book-option-transition);
}

.pdp-book-option:hover {
    border-color: var(--pdp-book-option-hover-border);
    box-shadow: var(--pdp-book-option-hover-shadow);
    transform: translateY(var(--pdp-book-option-hover-shift));
}

.pdp-book-option__icon {
    width: var(--pdp-book-option-icon-size);
    height: var(--pdp-book-option-icon-size);
    border-radius: var(--pdp-book-option-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--pdp-book-option-icon-bg);
    color: var(--pdp-book-option-color);
}

.pdp-book-option__icon svg,
.pdp-book-option__icon iconify-icon {
    width: var(--size-6);
    height: var(--size-6);
}

.pdp-book-option__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--pdp-book-option-body-gap);
}

.pdp-book-option__body strong {
    font-size: var(--pdp-book-option-title-size);
    font-weight: var(--pdp-book-option-title-weight);
    line-height: var(--leading-tight);
    color: var(--pdp-book-option-title-color);
}

.pdp-book-option__body small {
    font-size: var(--pdp-book-option-detail-size);
    line-height: var(--leading-snug);
    color: var(--pdp-book-option-detail-color);
}

.pdp-book-option--coiny .pdp-book-option__icon {
    background: var(--pdp-book-option-coiny-icon-bg);
}

.pdp-book-option--stripe .pdp-book-option__icon {
    background: var(--pdp-book-option-stripe-icon-bg);
}

.pdp-book-option--amazon {
    border-color: var(--pdp-book-option-amazon-border);
}

.pdp-book-option--amazon .pdp-book-option__icon {
    background: var(--pdp-book-option-amazon-icon-bg);
    color: var(--pdp-book-option-amazon-icon-color);
}

/* Format picker: every tile fits the card, no sideways scrolling.
   (Steven 2026-08-13: no horizontal scrollbar on the PDP. The old
   scroll-with-a-peek slider also let iOS chain the swipe into a
   page-level pan.) Tiles share one row while each keeps at least
   --size-24, then wrap. */
.pdp-book-buy__options--slider {
    grid-template-columns: repeat(auto-fit, minmax(min(var(--size-24), 100%), 1fr));
}

.pdp-book-option--tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-1);
}

.pdp-book-option__label {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--pdp-book-option-title-color);
}

.pdp-book-option__price {
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--pdp-book-option-title-color);
}

.pdp-book-option__note {
    font-size: var(--pdp-book-option-detail-size);
    line-height: var(--leading-snug);
    color: var(--pdp-book-option-detail-color);
}

.pdp-book-option--tile.pdp-book-option--amazon {
    border: var(--pdp-book-option-border);
}

.pdp-book-option--picked {
    border-color: var(--pdp-book-option-hover-border);
    background: var(--surface-secondary);
}

.pdp-book-buy__all-formats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-top: var(--pdp-book-buy-options-gap);
    padding-top: var(--space-2);
    border-top: var(--pdp-amazon-review-divider);
    font-size: var(--text-sm);
    color: var(--pdp-text-secondary);
    text-decoration: none;
}

.pdp-amazon-review {
    margin-top: var(--pdp-amazon-review-margin);
    padding-top: var(--pdp-amazon-review-padding);
    border-top: var(--pdp-amazon-review-divider);
}

.pdp-amazon-review__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pdp-amazon-review-meta-gap);
    margin-bottom: var(--pdp-amazon-review-meta-margin);
    color: var(--text-primary);
    text-decoration: none;
}

.pdp-amazon-review__stars {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--pdp-amazon-review-star-color);
    font-size: var(--text-sm);
}

.pdp-amazon-review__score {
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
}

.pdp-amazon-review__count {
    font-size: var(--pdp-amazon-review-meta-size);
    color: var(--pdp-amazon-review-meta-color);
}

.pdp-amazon-review__image-frame + .pdp-amazon-review__image-frame {
    margin-top: var(--pdp-amazon-review-margin);
}

.pdp-amazon-review__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pdp-amazon-review-meta-gap);
    margin-bottom: var(--pdp-amazon-review-meta-margin);
    font-family: var(--font-mono);
    font-size: var(--pdp-amazon-review-meta-size);
    font-weight: var(--pdp-amazon-review-meta-weight);
    letter-spacing: var(--pdp-amazon-review-meta-tracking);
    color: var(--pdp-amazon-review-meta-color);
    text-transform: uppercase;
}

.pdp-amazon-review__meta strong {
    color: var(--pdp-amazon-review-star-color);
}

.pdp-amazon-review__image-frame {
    width: 100%;
    overflow: hidden;
    border: var(--pdp-amazon-review-image-border);
    border-radius: var(--pdp-amazon-review-image-radius);
    background: var(--pdp-amazon-review-image-bg);
}

.pdp-amazon-review__image {
    display: block;
    width: 100%;
    height: auto;
}

.pdp-book-buy__note {
    margin-top: var(--pdp-book-buy-note-margin);
    padding-top: var(--pdp-book-buy-note-padding);
    border-top: var(--pdp-book-buy-note-divider);
    color: var(--pdp-book-buy-note-color);
    font-size: var(--pdp-book-buy-note-size);
    line-height: var(--leading-normal);
}

@media (max-width: 640px) {
    .pdp-pricing-card {
        padding: var(--space-3) var(--space-4);
    }
    .pdp-pricing-card__amount {
        font-size: var(--text-2xl);
    }
    .pdp-pricing-card__top {
        flex-direction: column;
        align-items: flex-start;
    }
    .pdp-pricing-card__buy-row {
        width: 100%;
    }
    .pdp-pricing-card__buy {
        flex: 1;
    }
    .pdp-pricing-card__delivery {
        flex-direction: column;
        align-items: flex-start;
    }
    .pdp-pricing-card__delivery-sep {
        display: none;
    }
    .pdp-amazon-review__image-frame {
        overflow: hidden;
    }
    .pdp-amazon-review__image {
        min-width: 0;
        max-width: 100%;
    }
    .pdp-book-buy__primary {
        padding: 16px;
        border-radius: 16px;
    }
    .pdp-book-buy__title {
        font-size: 18px;
    }
    .pdp-book-copy {
        gap: 14px;
        max-width: 100%;
        font-size: 15px;
        line-height: 1.6;
    }
    .pdp-book-copy h2 {
        font-size: 30px;
        line-height: 1.05;
    }
    .pdp-book-copy__intro {
        font-size: 16px;
    }
    .pdp-book-copy__turn {
        font-size: 19px;
    }
}

/* ─────────────────────────────────────────────────────────────
   PDP Stats Grid — ISSUE / MAKER / PAGES / SHIPS (zine)
   ───────────────────────────────────────────────────────────── */
.pdp-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-2);
    margin: var(--space-4) 0;
}

.pdp-stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3);
    background: var(--color-gray-50, var(--color-white));
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
}

.pdp-stat__label {
    font-family: var(--font-mono);
    font-size: var(--text-2xs, 10px);
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--color-gray-500);
    text-transform: uppercase;
}

.pdp-stat__value {
    font-family: var(--font-display, var(--font-sans));
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-dark-900);
    line-height: 1.2;
}

@media (max-width: 640px) {
    .pdp-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ─────────────────────────────────────────────────────────────
   PDP What's Included — bullet list (zine)
   ───────────────────────────────────────────────────────────── */
.pdp-included {
    margin: var(--space-4) 0;
}

.pdp-included__title {
    font-family: var(--font-display, var(--font-sans));
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--color-dark-900);
    text-transform: uppercase;
    margin: 0 0 var(--space-2) 0;
}

.pdp-included__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.pdp-included__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--color-dark-800);
}

.pdp-included__check {
    color: var(--accent-primary, var(--color-green-500));
    flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────
   PDP About the Maker — creator card
   ───────────────────────────────────────────────────────────── */
.pdp-maker {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-gray-50, var(--color-white));
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    margin: var(--space-4) 0;
}

.pdp-maker__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--color-gray-200);
    flex-shrink: 0;
}

.pdp-maker__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pdp-maker__eyebrow {
    font-family: var(--font-mono);
    font-size: var(--text-2xs, 10px);
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--color-gray-500);
    text-transform: uppercase;
}

.pdp-maker__name {
    font-family: var(--font-display, var(--font-sans));
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-dark-900);
    line-height: 1.2;
    margin: 0;
}

.pdp-maker__caption {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    color: var(--color-gray-600);
}

.pdp-maker__visit {
    height: 32px;
    padding: 0 var(--space-3);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-full);
    background: var(--color-white);
    color: var(--color-dark-900);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    transition: background 120ms ease;
    flex-shrink: 0;
}

.pdp-maker__visit:hover {
    background: var(--color-gray-100);
}


/* ═══════════════════════════════════════════════════════════
   EMBED MODE — when shop_item.html is loaded inside an iframe
   from the shop container. Topbar is hidden (host shop chrome
   already provides close), so remove its 56px offset.
   ═══════════════════════════════════════════════════════════ */
.pdp-body--embed { min-height: auto; }
.pdp-body--embed .pdp-page { padding-top: 24px; min-height: auto; }
@media (max-width: 768px) {
    .pdp-body--embed .pdp-page { padding-top: 16px; }
}
.pdp-body--embed .pdp-purchased-banner { top: 0; }

/* ─────────────────────────────────────────────────────────────
   App PDP evolution treatment
   ───────────────────────────────────────────────────────────── */
.pdp-purchase-pill {
    display: none;
}

.pdp-evolution-card {
    --pdp-evolution-ink: #6651ef;
    --pdp-evolution-wash: #e9edfb;
    --pdp-evolution-line: #cbc8f8;
    border: 1px solid var(--pdp-evolution-line);
    border-radius: 24px;
    background: var(--pdp-evolution-wash);
    color: #273142;
    padding: 24px;
}

.pdp-evolution-card__top,
.pdp-evolution-card__main,
.pdp-evolution-card__actions {
    display: flex;
    align-items: center;
}

.pdp-evolution-card__top {
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.pdp-evolution-card__pill,
.pdp-evolution-card__version {
    font-family: var(--font-mono);
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.pdp-evolution-card__pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    background: #fff;
    color: var(--pdp-evolution-ink);
    font-size: 12px;
}

.pdp-evolution-card__version {
    color: #747988;
    font-size: 12px;
}

.pdp-evolution-card__main {
    gap: 22px;
    margin-bottom: 24px;
}

.pdp-evolution-card__meter {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: conic-gradient(var(--pdp-evolution-ink) 0 var(--pdp-evolution-deg), #d5d8ee var(--pdp-evolution-deg) 360deg);
    position: relative;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.pdp-evolution-card__meter::before {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: inherit;
    background: var(--pdp-evolution-wash);
}

.pdp-evolution-card__meter span {
    position: relative;
    z-index: 1;
    color: var(--pdp-evolution-ink);
    font-family: var(--font-mono);
    font-size: 20px;
    font-weight: 900;
}

.pdp-evolution-card__copy h2 {
    margin: 0 0 6px;
    font-size: 26px;
    line-height: 1.1;
    color: #273142;
}

.pdp-evolution-card__copy p {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--pdp-evolution-ink);
}

.pdp-evolution-card__facts {
    margin: 0;
}

.pdp-evolution-card__fact {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    gap: 16px;
    padding: 16px 0;
    border-top: 1px solid #cfd3e7;
}

.pdp-evolution-card__fact:first-child {
    border-top: 0;
}

.pdp-evolution-card__fact dt,
.pdp-evolution-card__fact dd {
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
}

.pdp-evolution-card__fact dt {
    color: #565e70;
}

.pdp-evolution-card__fact dd {
    color: #273142;
    font-weight: 800;
    text-align: right;
}

.pdp-evolution-card__actions {
    gap: 16px;
    margin-top: 22px;
}

.pdp-evolution-card__btn {
    min-height: 54px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 20px;
    text-decoration: none;
    font-size: 18px;
    font-weight: 800;
    flex: 1;
}

.pdp-evolution-card__btn--primary {
    background: var(--pdp-evolution-ink);
    color: #fff;
    box-shadow: 0 16px 36px rgba(102, 81, 239, 0.28);
}

.pdp-evolution-card__btn--secondary {
    background: #fff;
    border: 1px solid var(--pdp-evolution-line);
    color: #273142;
}

@media (max-width: 900px) {
    .pdp-body {
        background: #eef3fb;
    }

    /* Mobile stacks the split layout: photo on top, info below.
       Image, type badge, and title row all stay visible — the zines
       pattern. Only the redundant duplicate buy pill is hidden so we
       don't double the CTA above the pricing card. */
    .pdp-page {
        display: block;
        max-width: none;
        width: 100%;
        min-height: auto;
        /* Top pad clears the fixed .pdp-topbar, which otherwise sits on top
           of the cover image. Embed mode keeps its own 24px (higher
           specificity) because the bar is not rendered there. */
        padding: calc(var(--pdp-topbar-height, 56px) + 16px) 16px 32px;
    }

    .pdp-page__info {
        gap: 20px;
        padding: 0;
    }

    /* Title-row buy chip duplicates the prominent .pdp-purchase-pill below;
       hide it on mobile to avoid two stacked CTAs. */
    .pdp-page__title-row .pdp-page__buy { display: none; }

    .pdp-purchase-pill {
        width: 100%;
        min-height: 56px;
        border: 0;
        border-radius: 999px;
        background: #31e85a;
        color: #273142;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        font-family: var(--font-heading, var(--font-sans));
        font-size: 22px;
        font-weight: 900;
        letter-spacing: 0;
        box-shadow: 0 12px 32px rgba(39, 232, 90, 0.22);
        cursor: pointer;
    }

    .pdp-purchase-pill svg {
        width: 22px;
        height: 22px;
    }

    .pdp-pricing-card {
        border: 0;
        border-radius: 20px;
        background: #fff;
        box-shadow: 0 8px 24px rgba(47, 57, 84, 0.08);
        margin: 0;
        padding: 20px 20px 22px;
        gap: 14px;
    }

    .pdp-pricing-card__top {
        display: block;
    }

    .pdp-pricing-card__price {
        align-items: center;
        gap: 10px;
        margin-bottom: 14px;
    }

    .pdp-pricing-card__price svg {
        width: 18px;
        height: 18px;
    }

    .pdp-pricing-card__amount {
        font-size: 28px;
        letter-spacing: 0;
        color: #273142;
    }

    .pdp-pricing-card__cadence {
        font-size: 12px;
        letter-spacing: 0.12em;
        color: #747988;
        transform: none;
    }

    .pdp-pricing-card__buy-row {
        width: 100%;
        display: block;
    }

    .pdp-pricing-card__buy {
        width: 100%;
        height: 48px;
        border-radius: 999px;
        background: #111822;
        color: #fff;
        font-size: 16px;
        letter-spacing: 0;
    }

    .pdp-pricing-card__bar {
        height: 10px;
        border-radius: 999px;
        background: transparent;
        gap: 4px;
    }

    .pdp-pricing-card__bar-seg {
        border-radius: inherit;
    }

    .pdp-pricing-card__bar-seg--creator {
        background: #31e85a;
    }

    .pdp-pricing-card__bar-seg--house {
        background: #f7ad38;
    }

    .pdp-pricing-card__bar-seg--platform {
        background: #8b5cf6;
    }

    .pdp-pricing-card__splits {
        gap: 8px;
    }

    .pdp-pricing-card__split {
        grid-template-columns: 12px auto minmax(0, 1fr) auto;
        gap: 8px;
        font-size: 12px;
        letter-spacing: 0.08em;
    }

    .pdp-pricing-card__split-dot {
        width: 10px;
        height: 10px;
    }

    .pdp-pricing-card__split-pct {
        min-width: 0;
        color: #273142;
    }

    .pdp-pricing-card__split-name,
    .pdp-pricing-card__split-val {
        color: #273142;
    }

    .pdp-pricing-card__hint {
        padding-top: 12px;
        font-size: 11px;
        letter-spacing: 0.08em;
        color: #747988;
        border-top: 1px dashed #e3e6ef;
    }

    .pdp-evolution-card {
        border-radius: 20px;
        padding: 18px 18px;
        background: #e8edfb;
    }

    .pdp-evolution-card__top {
        margin-bottom: 14px;
    }

    .pdp-evolution-card__pill {
        min-height: 30px;
        padding: 0 12px;
        font-size: 12px;
        gap: 6px;
    }

    .pdp-evolution-card__pill iconify-icon {
        font-size: 14px;
    }

    .pdp-evolution-card__version {
        font-size: 12px;
        letter-spacing: 0.08em;
        text-align: right;
    }

    .pdp-evolution-card__main {
        gap: 14px;
        margin-bottom: 12px;
    }

    .pdp-evolution-card__meter {
        width: 72px;
        height: 72px;
    }

    .pdp-evolution-card__meter::before {
        inset: 8px;
    }

    .pdp-evolution-card__meter span {
        font-size: 14px;
    }

    .pdp-evolution-card__copy h2 {
        font-size: 20px;
        margin-bottom: 4px;
    }

    .pdp-evolution-card__copy p {
        font-size: 11px;
        letter-spacing: 0.08em;
    }

    .pdp-evolution-card__fact {
        grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
        gap: 10px;
        padding: 10px 0;
        border-top-color: #cbd1e8;
    }

    .pdp-evolution-card__fact dt,
    .pdp-evolution-card__fact dd {
        font-size: 13px;
        line-height: 1.35;
    }

    .pdp-evolution-card__actions {
        gap: 8px;
        margin-top: 14px;
    }

    .pdp-evolution-card__btn {
        min-height: 44px;
        border-radius: 14px;
        font-size: 14px;
    }

    .pdp-page__desc {
        max-width: min(100%, 760px);
        font-size: 15px;
        line-height: 1.55;
        color: #565e70;
    }

    .pdp-maker {
        border: 0;
        border-radius: 16px;
        background: #fff;
        margin: 0;
        padding: 14px 14px;
        gap: 12px;
        min-height: 0;
    }

    .pdp-maker__avatar {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: #eaf0f8;
        border: 1px solid #d5dce8;
        display: grid;
        place-items: center;
        overflow: hidden;
        flex-shrink: 0;
    }

    .pdp-maker__avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .pdp-maker__avatar img[hidden],
    .pdp-maker__avatar iconify-icon[hidden] {
        display: none;
    }

    .pdp-maker__avatar iconify-icon {
        font-size: 22px;
        color: #273142;
    }

    .pdp-maker__eyebrow {
        font-size: 10px;
        letter-spacing: 0.1em;
        color: #747988;
    }

    .pdp-maker__name {
        font-size: 15px;
        color: #273142;
    }

    .pdp-maker__caption {
        font-size: 13px;
        color: #565e70;
    }

    .pdp-maker__visit {
        height: 34px;
        padding: 0 14px;
        border-radius: 999px;
        border: 1px solid #d1d4dc;
        font-size: 12px;
        letter-spacing: 0.08em;
        background: #fff;
    }
}