/* ============================================================
       PDP — App Store / Gumroad style
       ============================================================ */
    .pdp { max-width: 1080px; margin: 0 auto; }

    /* Breadcrumb */
    .pdp-crumb {
        font-family: var(--font-body);
        font-size: 11.5px;
        font-weight: 500;
        letter-spacing: 0.16em;
        color: var(--text-4);
        text-transform: uppercase;
        margin: 4px 0 28px;
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }
    .pdp-crumb a { color: var(--text-4); text-decoration: none; transition: color 180ms ease; }
    .pdp-crumb a:hover { color: var(--text); }
    .pdp-crumb-sep { color: var(--text-5); font-weight: 400; }
    .pdp-crumb-current { color: var(--text-2); font-weight: 600; }

    /* HERO grid: image stretches to match info column height */
    .pdp-hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 36px;
        align-items: stretch;
        margin-bottom: 36px;
    }
    @media (max-width: 900px) {
        .pdp-hero {
            grid-template-columns: 1fr;
            gap: 24px;
            align-items: start;
        }
        .pdp-hero-img {
            aspect-ratio: 16 / 10;
            height: auto !important;
            min-height: 0 !important;
        }
    }

    /* Hero image — fills column height on desktop */
    .pdp-hero-img {
        position: relative;
        min-height: 360px;
        height: 100%;
        border-radius: var(--r-shell);
        overflow: hidden;
        border: 1px solid var(--hairline);
        background:
            radial-gradient(ellipse 80% 60% at 50% 110%, rgba(212, 197, 169, 0.32), transparent 65%),
            linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(245, 243, 236, 0.25) 100%),
            var(--surface);
    }
    body.dark .pdp-hero-img {
        background:
            radial-gradient(ellipse 80% 60% at 50% 110%, rgba(212, 197, 169, 0.18), transparent 65%),
            linear-gradient(180deg, rgba(40, 36, 30, 0.55) 0%, rgba(20, 18, 14, 0.4) 100%),
            var(--surface);
    }
    .pdp-hero-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .pdp-hero-img-fallback {
        position: absolute; inset: 0;
        display: flex; align-items: center; justify-content: center;
        color: var(--text-4); opacity: 0.4;
    }
    .pdp-hot-badge {
        position: absolute; top: 14px; left: 14px; z-index: 5;
        background: var(--surface-strong);
        backdrop-filter: blur(20px);
        border: 1px solid var(--border-glass);
        padding: 6px 12px;
        border-radius: var(--r-pill);
        font-family: var(--font-mono);
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--text);
        display: inline-flex; align-items: center; gap: 6px;
    }

    /* Info column */
    .pdp-hero-info {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }
    .pdp-eyebrow-row {
        display: flex; align-items: center; gap: 10px;
        font-family: var(--font-body);
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--text-4);
        margin-bottom: 12px;
        flex-wrap: wrap;
    }
    .pdp-eyebrow {
        color: var(--accent-warm-2);
        font-weight: 600;
        letter-spacing: 0.2em;
    }
    body.dark .pdp-eyebrow { color: var(--accent-warm); }
    .pdp-dot { color: var(--text-5); font-weight: 400; }
    .pdp-views, .pdp-released { display: inline-flex; align-items: center; gap: 6px; }
    .pdp-views svg { opacity: 0.6; }

    .pdp-title {
        font-family: var(--font-display);
        font-size: clamp(32px, 4vw, 48px);
        font-weight: 500;
        letter-spacing: -0.025em;
        line-height: 1.05;
        color: var(--text);
        margin: 0 0 20px;
    }

    /* Highlight chips — Inter, refined */
    .pdp-highlights {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 26px;
    }
    .pdp-chip {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 6px 14px;
        border-radius: var(--r-pill);
        background: var(--surface);
        border: 1px solid var(--hairline);
        font-family: var(--font-body);
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.01em;
        color: var(--text-2);
        transition: border-color 180ms ease, color 180ms ease;
    }
    .pdp-chip:hover {
        border-color: var(--accent-warm-2);
        color: var(--text);
    }
    .pdp-chip svg { color: var(--success); flex-shrink: 0; opacity: 0.85; }

    /* Buy box — refined editorial */
    .pdp-buy {
        background: var(--surface-strong);
        border: 1px solid var(--hairline);
        border-radius: var(--r-card);
        padding: 22px 24px;
        position: relative;
    }
    /* Subtle gold accent line on top */
    .pdp-buy::before {
        content: '';
        position: absolute;
        top: 0; left: 22px; right: 22px;
        height: 1px;
        background: linear-gradient(90deg,
            transparent,
            rgba(212, 197, 169, 0.45) 30%,
            rgba(154, 136, 112, 0.3) 70%,
            transparent
        );
    }

    .pdp-price-line {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 20px;
        align-items: center;
        padding-bottom: 18px;
        border-bottom: 1px solid var(--hairline);
        margin-bottom: 18px;
    }
    .pdp-price-line.is-single { grid-template-columns: 1fr; }
    .pdp-price-divider {
        width: 1px; height: 44px; background: var(--hairline);
    }
    .pdp-price-label {
        font-family: var(--font-body);
        font-size: 10.5px;
        font-weight: 500;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--text-4);
        display: block;
        margin-bottom: 6px;
    }
    .pdp-price-row {
        display: flex; align-items: baseline; gap: 10px;
    }
    .pdp-price-row del {
        font-family: var(--font-body);
        font-size: 13px;
        color: var(--text-4);
        font-weight: 400;
    }
    /* Editorial luxury: price uses Cormorant for big number */
    .pdp-price-num {
        font-family: var(--font-display);
        font-size: 32px;
        font-weight: 500;
        color: var(--text);
        letter-spacing: -0.02em;
        line-height: 1;
        font-feature-settings: "tnum" 1;
        font-variant-numeric: tabular-nums;
    }

    /* Rent form */
    .pdp-rent-form { margin-bottom: 16px; }
    .pdp-field-label {
        display: block;
        font-family: var(--font-body);
        font-size: 10.5px;
        font-weight: 500;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--text-4);
        margin-bottom: 8px;
    }
    .pdp-rent-input-row {
        display: flex;
        gap: 10px;
        align-items: stretch;
    }
    .pdp-rent-input-row .input-sh {
        flex: 1;
        font-family: var(--font-body);
        font-feature-settings: "tnum" 1;
        font-variant-numeric: tabular-nums;
    }
    .pdp-total-pill {
        font-family: var(--font-body);
        font-size: 12.5px;
        padding: 0 18px;
        display: inline-flex;
        align-items: center;
        border-radius: var(--r-input);
        background: var(--surface);
        border: 1px solid var(--hairline);
        color: var(--text-3);
        white-space: nowrap;
        letter-spacing: 0.02em;
    }
    .pdp-total-pill b {
        color: var(--text);
        font-weight: 600;
        font-family: var(--font-display);
        font-size: 16px;
        margin: 0 4px;
        font-feature-settings: "tnum" 1;
        font-variant-numeric: tabular-nums;
    }

    /* CTA buttons */
    .pdp-cta-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-bottom: 12px;
    }
    .pdp-cta-row .btn-sh { width: 100%; justify-content: center; }
    .pdp-cta-row:has(> .btn-sh:only-child) { grid-template-columns: 1fr; }

    /* Secondary actions: demo, voucher — small inline links */
    .pdp-cta-secondary {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
        padding: 8px 0 12px;
        border-bottom: 1px solid var(--hairline);
    }
    .pdp-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-family: var(--font-body);
        font-size: 12px;
        color: var(--text-3);
        background: transparent;
        border: 0;
        padding: 0;
        cursor: pointer;
        text-decoration: none;
        transition: color 180ms ease;
    }
    .pdp-link:hover { color: var(--text); }
    .pdp-link svg { opacity: 0.7; }

    /* Result message */
    .pdp-result { font-size: 13px; margin-top: 12px; }
    .pdp-result:empty { margin: 0; }

    /* Trust badges */
    .pdp-trust {
        display: flex;
        flex-wrap: wrap;
        gap: 14px 22px;
        padding-top: 14px;
        margin-top: 4px;
    }
    .pdp-trust-item {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-size: 12px;
        font-weight: 500;
        color: var(--text-3);
        font-family: var(--font-body);
        letter-spacing: 0.01em;
    }
    .pdp-trust-item svg {
        color: var(--accent-warm-2);
        flex-shrink: 0;
        opacity: 0.9;
    }
    body.dark .pdp-trust-item svg { color: var(--accent-warm); }

    /* Sections (description, specs, related) — hairline divider only */
    .pdp-section {
        padding-top: 40px;
        margin-top: 16px;
        border-top: 1px solid var(--hairline);
    }
    .pdp-section-head { margin-bottom: 22px; }
    .pdp-section-eyebrow {
        display: block;
        font-family: var(--font-body);
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--accent-warm-2);
        margin-bottom: 6px;
    }
    body.dark .pdp-section-eyebrow { color: var(--accent-warm); }
    .pdp-section-title {
        font-family: var(--font-display);
        font-size: 28px;
        font-weight: 500;
        letter-spacing: -0.02em;
        line-height: 1.15;
        color: var(--text);
        margin: 0;
    }
    .pdp-section-title em {
        font-style: italic;
        color: var(--accent-warm-2);
    }
    body.dark .pdp-section-title em { color: var(--accent-warm); }

    .pdp-prose {
        font-family: var(--font-body);
        font-size: 15px;
        color: var(--text-2);
        line-height: 1.75;
        max-width: none;
        letter-spacing: -0.005em;
    }
    /* Force LTR + justify for clean two-edge paragraphs (article-style read) */
    .pdp-prose p,
    .pdp-prose ul,
    .pdp-prose ol,
    .pdp-prose blockquote {
        text-align: left;
    }
    .pdp-prose p { margin: 0 0 14px; }
    .pdp-prose p:last-child { margin: 0; }
    .pdp-prose strong { color: var(--text); font-weight: 600; }
    .pdp-prose em {
        font-family: var(--font-display);
        font-style: italic;
        color: var(--accent-warm-2);
    }
    .pdp-prose a {
        color: var(--text);
        border-bottom: 1px solid var(--hairline);
        text-decoration: none;
        transition: border-color 180ms ease;
    }
    .pdp-prose a:hover { border-color: var(--text); }
    .pdp-prose img { max-width: 100%; border-radius: var(--r-input); margin: 12px 0; }
    .pdp-prose ul, .pdp-prose ol { padding-left: 20px; margin: 0 0 14px; }
    .pdp-prose li { margin-bottom: 6px; }
    /* Headings inside admin-authored description — rich-text editor lets user
       nest H1-H6 freely. Override browser default (huge + dim) with editorial
       sizes that work on both light/dark theme. */
    .pdp-prose h1, .pdp-prose h2, .pdp-prose h3,
    .pdp-prose h4, .pdp-prose h5, .pdp-prose h6 {
        color: var(--text);
        font-family: var(--font-body);
        font-weight: 700;
        line-height: 1.35;
        margin: 22px 0 10px;
        letter-spacing: -0.01em;
    }
    .pdp-prose h1 { font-size: 22px; }
    .pdp-prose h2 { font-size: 19px; }
    .pdp-prose h3 { font-size: 17px; }
    .pdp-prose h4 { font-size: 15px; }
    .pdp-prose h5, .pdp-prose h6 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-2); }
    .pdp-prose h1:first-child, .pdp-prose h2:first-child, .pdp-prose h3:first-child { margin-top: 0; }
    .pdp-prose blockquote {
        margin: 14px 0;
        padding: 4px 0 4px 16px;
        border-left: 3px solid var(--accent-warm-2);
        color: var(--text-2);
        font-style: italic;
    }

    /* Specs — clean grid, no row dividers (causes visual noise across columns) */
    .pdp-specs {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 22px 48px;
        margin: 0;
        max-width: 760px;
    }
    .pdp-spec {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin: 0;
    }
    .pdp-spec dt {
        font-family: var(--font-body);
        font-size: 10.5px;
        font-weight: 500;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--text-4);
        margin: 0;
    }
    .pdp-spec dd {
        font-family: var(--font-body);
        font-size: 15px;
        font-weight: 600;
        color: var(--text);
        margin: 0;
        letter-spacing: -0.01em;
    }
    /* Mono only for code-like values (versions, dates, numbers) */
    .pdp-spec dd.is-mono {
        font-family: var(--font-mono);
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0;
    }

    /* ============================================================
       VOUCHER UX — active pill (gold) / warn pill (red) / inline form
       ============================================================ */
    .pdp-voucher {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 14px;
        margin-top: 12px;
        border-radius: 14px;
        position: relative;
        overflow: hidden;
    }
    .pdp-voucher-active {
        background: linear-gradient(135deg, rgba(212, 175, 55, 0.10), rgba(154, 136, 112, 0.06));
        border: 1px solid rgba(212, 175, 55, 0.4);
        box-shadow: 0 4px 14px -8px rgba(212, 175, 55, 0.32);
    }
    body.dark .pdp-voucher-active {
        background: linear-gradient(135deg, rgba(212, 175, 55, 0.16), rgba(154, 136, 112, 0.08));
        border-color: rgba(220, 188, 140, 0.45);
    }
    .pdp-voucher-active::before {
        content: '';
        position: absolute;
        top: 0; left: 14px; right: 14px;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.6), transparent);
    }
    .pdp-voucher-warn {
        background: rgba(220, 38, 38, 0.05);
        border: 1px dashed rgba(220, 38, 38, 0.4);
    }
    body.dark .pdp-voucher-warn {
        background: rgba(220, 38, 38, 0.08);
        border-color: rgba(248, 113, 113, 0.4);
    }

    .pdp-voucher-icon {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        background: linear-gradient(135deg, var(--accent-warm), var(--accent-warm-2));
        color: #1a1a1a;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    .pdp-voucher-warn .pdp-voucher-icon {
        background: rgba(220, 38, 38, 0.15);
        color: var(--danger);
    }
    .pdp-voucher-body { flex: 1; min-width: 0; }
    .pdp-voucher-line {
        display: flex;
        align-items: center;
        gap: 10px;
        font-family: var(--font-body);
        font-size: 13px;
        color: var(--text);
        flex-wrap: wrap;
    }
    .pdp-voucher-code {
        font-family: var(--font-mono);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        padding: 3px 8px;
        border-radius: 6px;
        background: rgba(10, 10, 10, 0.06);
        color: var(--text);
        border: 1px dashed rgba(10, 10, 10, 0.16);
    }
    body.dark .pdp-voucher-code {
        background: rgba(245, 243, 236, 0.08);
        color: var(--accent-warm);
        border-color: rgba(212, 197, 169, 0.3);
    }
    .pdp-voucher-percent {
        font-family: var(--font-display);
        font-style: italic;
        font-size: 18px;
        font-weight: 600;
        color: var(--accent-warm-2);
    }
    body.dark .pdp-voucher-percent { color: var(--accent-warm); }
    .pdp-voucher-meta {
        font-family: var(--font-mono);
        font-size: 10.5px;
        letter-spacing: 0.04em;
        color: var(--text-4);
        margin-top: 3px;
    }
    .pdp-voucher-meta strong {
        color: var(--success);
        font-weight: 700;
    }
    .pdp-voucher-clear {
        flex-shrink: 0;
        width: 28px;
        height: 28px;
        border-radius: 8px;
        background: transparent;
        border: 1px solid var(--hairline);
        color: var(--text-4);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: all 180ms var(--ease);
    }
    .pdp-voucher-clear:hover {
        background: rgba(220, 38, 38, 0.1);
        color: var(--danger);
        border-color: rgba(220, 38, 38, 0.3);
    }

    /* Inline form — collapsed by default, expand on click */
    .pdp-voucher-form {
        margin-top: 12px;
        border-radius: 12px;
        border: 1px dashed var(--hairline);
        background: var(--surface);
        overflow: hidden;
        transition: border-color var(--d-state) var(--ease);
    }
    .pdp-voucher-form[open] {
        border-color: rgba(212, 197, 169, 0.5);
        border-style: solid;
    }
    .pdp-voucher-form > summary {
        list-style: none;
        cursor: pointer;
        padding: 12px 14px;
        display: flex;
        align-items: center;
        gap: 10px;
        font-family: var(--font-body);
        font-size: 13px;
        color: var(--text-3);
        transition: color var(--d-state) var(--ease);
    }
    .pdp-voucher-form > summary:hover { color: var(--text); }
    .pdp-voucher-form > summary::-webkit-details-marker { display: none; }
    .pdp-voucher-form > summary > svg:first-child { color: var(--accent-warm-2); flex-shrink: 0; }
    .pdp-voucher-form > summary > span { flex: 1; }
    .pdp-voucher-form > summary > .chev {
        transition: transform 220ms var(--ease);
    }
    .pdp-voucher-form[open] > summary > .chev { transform: rotate(180deg); }

    .pdp-voucher-input-row {
        display: flex;
        gap: 8px;
        padding: 0 12px 12px;
    }
    .pdp-voucher-input {
        flex: 1;
        padding: 10px 14px;
        border-radius: 10px;
        background: var(--bg-paper);
        border: 1px solid var(--hairline);
        font-family: var(--font-mono);
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--text);
        outline: none;
        transition: border-color 200ms var(--ease);
    }
    body.dark .pdp-voucher-input { background: rgba(20, 18, 14, 0.5); }
    .pdp-voucher-input:focus { border-color: var(--accent-warm-2); }
    .pdp-voucher-input::placeholder {
        color: var(--text-5);
        font-weight: 400;
        letter-spacing: 0;
        text-transform: none;
    }
    .pdp-voucher-input:disabled { opacity: 0.55; cursor: not-allowed; }

    .pdp-voucher-apply {
        padding: 0 18px;
        border-radius: 10px;
        border: none;
        background: linear-gradient(135deg, var(--accent-warm), var(--accent-warm-2));
        color: #1a1a1a;
        font-family: var(--font-mono);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        cursor: pointer;
        transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
        white-space: nowrap;
    }
    .pdp-voucher-apply:hover:not(:disabled) {
        transform: translateY(-1px);
        box-shadow: 0 8px 18px -8px rgba(212, 175, 55, 0.5);
    }
    .pdp-voucher-apply:disabled { opacity: 0.55; cursor: not-allowed; }

    /* Toast-style feedback inside the form — luxe pill with icon, bg tint,
       slide-fade-in animation. */
    /* ── Voucher feedback — compact pill matching the form card scale ── */
    .pdp-voucher-feedback {
        padding: 0 12px 12px;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: max-height 280ms var(--ease), opacity 200ms var(--ease), padding 280ms var(--ease);
    }
    .pdp-voucher-feedback:not(:empty) {
        max-height: 80px;
        opacity: 1;
        padding: 0 12px 12px;
    }
    /* Display block container; .fb-inner is the actual full-width pill that aligns with input row */
    .pdp-voucher-feedback > .fb-inner {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 8px 12px;
        border-radius: 10px;
        font-family: var(--font-body);
        font-size: 12.5px;
        font-weight: 500;
        line-height: 1.35;
        letter-spacing: -0.005em;
        animation: voucherFb 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    @keyframes voucherFb {
        0%   { transform: translateY(-6px); opacity: 0; }
        100% { transform: translateY(0);    opacity: 1; }
    }
    .pdp-voucher-feedback .fb-icon {
        display: inline-flex;
        width: 22px; height: 22px;
        border-radius: 7px;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    .pdp-voucher-feedback .fb-icon svg { width: 12px; height: 12px; }

    /* ── SUCCESS — gold luxe ── */
    .pdp-voucher-feedback.is-success > .fb-inner {
        background: linear-gradient(135deg, rgba(245, 217, 127, 0.18), rgba(212, 175, 55, 0.08));
        border: 1px solid rgba(212, 175, 55, 0.38);
        color: #5b3f05;
    }
    body.dark .pdp-voucher-feedback.is-success > .fb-inner { color: var(--accent-warm); }
    .pdp-voucher-feedback.is-success .fb-icon {
        background: linear-gradient(135deg, #f5d97f, #d4af37);
        color: #1a1a1a;
    }

    /* ── ERROR — soft red, contained, no heavy shadow ── */
    .pdp-voucher-feedback.is-error > .fb-inner {
        background: linear-gradient(135deg, rgba(254, 226, 226, 0.55), rgba(254, 226, 226, 0.2));
        border: 1px solid rgba(239, 68, 68, 0.28);
        color: #b91c1c;
    }
    body.dark .pdp-voucher-feedback.is-error > .fb-inner {
        background: linear-gradient(135deg, rgba(60, 18, 18, 0.5), rgba(239, 68, 68, 0.08));
        color: #fca5a5;
    }
    .pdp-voucher-feedback.is-error .fb-icon {
        background: linear-gradient(135deg, #ef4444, #dc2626);
        color: #fff;
        animation: fbShake 420ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
    }
    @keyframes fbShake {
        0%, 100% { transform: translateX(0); }
        25%      { transform: translateX(-2px); }
        75%      { transform: translateX(2px); }
    }

    /* ── INFO / loading ── */
    .pdp-voucher-feedback.is-info > .fb-inner {
        background: rgba(10, 10, 10, 0.04);
        border: 1px solid var(--hairline);
        color: var(--text-3);
    }
    body.dark .pdp-voucher-feedback.is-info > .fb-inner { background: rgba(255, 255, 255, 0.05); }
    .pdp-voucher-feedback.is-info .fb-icon {
        background: linear-gradient(135deg, #94a3b8, #64748b);
        color: #fff;
        animation: fbSpin 0.85s linear infinite;
    }
    @keyframes fbSpin { to { transform: rotate(360deg); } }

    @media (prefers-reduced-motion: reduce) {
        .pdp-voucher-feedback > .fb-inner,
        .pdp-voucher-feedback .fb-icon { animation: none !important; }
    }

    /* ============================================================
       REVIEWS — editorial luxe rating block + dist bars + cards.
       ============================================================ */
    .pdp-reviews { margin-top: 8px; }

    .pdp-stars {
        display: inline-flex;
        align-items: center;
        gap: 2px;
        line-height: 1;
    }
    .pdp-star {
        display: inline-block;
        fill: var(--text-5);
        transition: fill 200ms var(--ease);
    }
    .pdp-star.is-on { fill: var(--accent-warm-2); }
    body.dark .pdp-star.is-on { fill: var(--accent-warm); }

    /* Summary block — big rating + distribution */
    .rev-summary {
        display: grid;
        grid-template-columns: 240px 1fr;
        gap: 32px;
        padding: 28px;
        border-radius: var(--r-card);
        background: var(--surface);
        border: 1px solid var(--hairline);
        margin-bottom: 28px;
        align-items: center;
    }
    @media (max-width: 720px) {
        .rev-summary { grid-template-columns: 1fr; gap: 20px; }
    }
    .rev-summary-score {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        text-align: center;
        padding-right: 28px;
        border-right: 1px solid var(--hairline);
    }
    @media (max-width: 720px) {
        .rev-summary-score { padding-right: 0; padding-bottom: 20px; border-right: none; border-bottom: 1px solid var(--hairline); }
    }
    .rev-score-num {
        font-family: var(--font-display);
        font-style: italic;
        font-weight: 500;
        font-size: 64px;
        line-height: 1;
        letter-spacing: -0.03em;
        color: var(--text);
        background: linear-gradient(135deg, var(--text), var(--accent-warm-2));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .rev-score-count {
        font-family: var(--font-mono);
        font-size: 11px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--text-4);
    }
    .rev-score-count strong {
        color: var(--text);
        font-weight: 700;
        margin: 0 2px;
    }

    /* Distribution bars */
    .rev-summary-dist {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .rev-dist-row {
        display: grid;
        grid-template-columns: 32px 1fr 32px;
        align-items: center;
        gap: 12px;
    }
    .rev-dist-label {
        font-family: var(--font-mono);
        font-size: 11px;
        font-weight: 600;
        color: var(--text-3);
        letter-spacing: 0.04em;
    }
    .rev-dist-bar {
        position: relative;
        height: 6px;
        background: var(--hairline);
        border-radius: 3px;
        overflow: hidden;
    }
    .rev-dist-bar > span {
        display: block;
        height: 100%;
        background: linear-gradient(90deg, var(--accent-warm), var(--accent-warm-2));
        border-radius: 3px;
        transition: width 600ms cubic-bezier(0.65, 0, 0.35, 1);
    }
    .rev-dist-num {
        font-family: var(--font-mono);
        font-size: 11px;
        color: var(--text-4);
        text-align: right;
        letter-spacing: 0.04em;
    }

    /* Compose form */
    .rev-compose {
        padding: 22px;
        border-radius: var(--r-card);
        background: var(--surface);
        border: 1px solid var(--hairline);
        margin-bottom: 28px;
    }
    .rev-compose-head {
        display: flex;
        flex-direction: column;
        gap: 4px;
        margin-bottom: 14px;
    }
    .rev-compose-title {
        font-family: var(--font-display);
        font-style: italic;
        font-size: 22px;
        color: var(--text);
        letter-spacing: -0.01em;
    }
    .rev-compose-hint {
        font-family: var(--font-body);
        font-size: 12px;
        color: var(--text-4);
    }
    .rev-compose-stars {
        display: inline-flex;
        gap: 4px;
        margin-bottom: 12px;
    }
    .rev-star-btn {
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 2px;
        transition: transform 200ms var(--ease);
    }
    .rev-star-btn svg {
        fill: var(--text-5);
        transition: fill 180ms var(--ease), transform 200ms var(--ease);
    }
    .rev-star-btn:hover { transform: translateY(-2px); }
    .rev-star-btn.is-on svg { fill: var(--accent-warm-2); }
    .rev-star-btn.is-on:hover svg { fill: var(--accent-warm); }
    body.dark .rev-star-btn.is-on svg { fill: var(--accent-warm); }
    .rev-compose-text {
        width: 100%;
        padding: 14px 16px;
        border-radius: var(--r-input);
        background: var(--bg-paper);
        border: 1px solid var(--hairline);
        font-family: var(--font-body);
        font-size: 14px;
        color: var(--text);
        outline: none;
        resize: vertical;
        min-height: 80px;
        transition: border-color 200ms var(--ease);
    }
    body.dark .rev-compose-text { background: rgba(20, 18, 14, 0.6); }
    .rev-compose-text:focus { border-color: var(--accent-warm-2); }
    .rev-compose-foot {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 12px;
    }
    .rev-char-count {
        font-family: var(--font-mono);
        font-size: 11px;
        letter-spacing: 0.04em;
        color: var(--text-4);
    }

    .rev-compose-locked {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px 22px;
        border-radius: var(--r-card);
        background: var(--surface);
        border: 1px dashed var(--hairline);
        color: var(--text-3);
        font-family: var(--font-body);
        font-size: 13px;
        margin-bottom: 28px;
    }
    .rev-compose-locked svg { color: var(--text-4); flex-shrink: 0; }

    /* Reviews list */
    .rev-list {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    .rev-item {
        display: grid;
        grid-template-columns: 44px 1fr;
        gap: 16px;
        padding: 18px 20px;
        border-radius: var(--r-card);
        background: var(--surface);
        border: 1px solid var(--hairline);
        transition: border-color 200ms var(--ease), transform 200ms var(--ease);
    }
    .rev-item:hover {
        border-color: rgba(212, 197, 169, 0.4);
        transform: translateY(-1px);
    }
    .rev-item-avatar {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--accent-warm), var(--accent-warm-2));
        color: #1a1a1a;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-display);
        font-style: italic;
        font-weight: 500;
        font-size: 18px;
    }
    .rev-item-body { min-width: 0; }
    .rev-item-head {
        display: flex;
        align-items: baseline;
        gap: 12px;
        margin-bottom: 6px;
        flex-wrap: wrap;
    }
    .rev-item-name {
        font-family: var(--font-display);
        font-style: italic;
        font-weight: 500;
        font-size: 16px;
        color: var(--text);
        letter-spacing: -0.01em;
    }
    .rev-item-time {
        font-family: var(--font-mono);
        font-size: 10px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--text-4);
    }
    .rev-item-comment {
        margin: 8px 0 0;
        font-family: var(--font-body);
        font-size: 13.5px;
        line-height: 1.6;
        color: var(--text-2);
    }

    /* Empty state */
    .rev-empty {
        text-align: center;
        padding: 48px 24px;
        border-radius: var(--r-card);
        border: 1px dashed var(--hairline);
        position: relative;
    }
    .rev-empty-mark {
        font-family: var(--font-display);
        font-style: italic;
        font-size: 80px;
        line-height: 0.6;
        color: var(--accent-warm);
        opacity: 0.5;
        display: block;
        margin-bottom: 8px;
    }
    .rev-empty p {
        margin: 0;
        font-family: var(--font-body);
        font-size: 14px;
        color: var(--text-3);
    }

    /* Related products grid */
    .pdp-related {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 14px;
    }