/* Product page — phone layout, white mode.
 * White page, black content: the card keeps its black silk, buttons/chips/circles are black with
 * white text, surfaces are white. */
@media (max-width: 767px) {
    html[data-theme="light"] .pm {
        --pm-ink: var(--theme-ink);
        --pm-ink-bg: var(--mono-ink-bg, var(--theme-ink));
        --pm-line: var(--theme-line);
        --pm-line-soft: var(--theme-line);
        --pm-text-2: var(--theme-muted);
        --pm-surface: var(--theme-surface);
        color: var(--pm-ink);
    }

    /* ── Top bar: black circles, white icons ── */
    html[data-theme="light"] .pm-circle {
        background: var(--pm-ink-bg);
        border-color: var(--pm-ink);
        color: #fff;
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
    }

    html[data-theme="light"] .pm-circle.is-on { box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.16), 0 6px 14px rgba(0, 0, 0, 0.18); }
    html[data-theme="light"] .pm-crumb__cur { color: var(--pm-ink); }

    /* ── Card: keeps its black silk; only the shadow is softened for the white page ── */
    html[data-theme="light"] .pm-stage__shadow {
        background: radial-gradient(ellipse, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 70%);
    }

    html[data-theme="light"] .pm-card { box-shadow: 0 24px 48px rgba(0, 0, 0, 0.3); }
    /* theme-light.css darkens text globally; the card is black, so its text stays white */
    html[data-theme="light"] .pm-card__body,
    html[data-theme="light"] .pm-card__body * { color: #fff !important; }
    html[data-theme="light"] .pm-card__id { color: rgba(255, 255, 255, 0.75) !important; }

    /* ── Options: selected price chip is black ── */
    html[data-theme="light"] .pm-opt {
        background: var(--pm-surface);
        border-color: var(--pm-line);
        color: var(--pm-ink);
    }

    html[data-theme="light"] .pm-opt.is-selected {
        border-color: var(--pm-ink);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
    }

    html[data-theme="light"] .pm-opt__price {
        background: var(--theme-surface-2);
        border-inline-end-color: var(--pm-line);
        color: var(--theme-muted);
    }

    html[data-theme="light"] .pm-opt.is-selected .pm-opt__price {
        background: var(--pm-ink-bg);
        color: #fff;
        border-inline-end-color: var(--pm-ink);
    }

    /* ── Pay with ── */
    html[data-theme="light"] .pm-pay {
        --pm-pay-ring: var(--pm-surface);
        background: var(--pm-surface);
    }

    html[data-theme="light"] .pm-pay__label { color: var(--theme-muted); }
    html[data-theme="light"] .pm-pay__picked { color: var(--pm-ink); }

    html[data-theme="light"] .pm-pay__tile {
        background: var(--theme-surface-2);
        border-color: var(--pm-line);
        color: var(--pm-ink);
    }

    html[data-theme="light"] .pm-pay__tile.is-active {
        background: var(--pm-surface);
        border-color: var(--pm-ink);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    }

    html[data-theme="light"] .pm-pay__tick { background: var(--pm-ink-bg); color: #fff; }
    html[data-theme="light"] .pm-pay__visa { color: #1a1f71; }
    html[data-theme="light"] .pm-pay__paypal { color: #003087; }
    html[data-theme="light"] .pm-pay__paypal b { color: #009cde; }

    /* ── Buy: black pill ── */
    html[data-theme="light"] .pm-dock {
        background: var(--pm-surface);
        border-color: var(--pm-line);
    }

    html[data-theme="light"] .pm-buy {
        background: var(--pm-ink-bg);
        color: #fff;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }

    html[data-theme="light"] .pm-secure { color: var(--theme-muted); }
    /* The checkout card below takes black accents from product-v5-checkout.css. */
}