/* ═══════════════════════════════════════════════════════════════════
   PDP PRO — editorial redesign of the product detail page.
   Same visual language as the storefront brand + POS entry screens:
   ink on paper, hairline rules, Playfair Display headlines, spaced-caps
   micro-labels, rectangular ink CTAs. Pure restyle layer over existing
   markup (pdp-* desktop, mob-pd-* mobile) — no DOM/JS dependencies.
   Loads after storefront.css/mobile-app.css, before ui-polish.css.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    --pdp-ink: #121212;
    --pdp-muted: #8B8A85;
    --pdp-line: #E6E4DF;
    --pdp-paper: #FAF9F7;
}

/* ════════════════ DESKTOP (≥901px) ════════════════ */
@media (min-width: 901px) {

    /* ── Breadcrumbs: whisper-quiet wayfinding ── */
    .pdp-crumbs, .pdp-crumbs a, .pdp-crumb-current {
        font-size: 10px; font-weight: 600;
        letter-spacing: .18em; text-transform: uppercase;
        color: var(--pdp-muted);
    }
    .pdp-crumbs a:hover { color: var(--pdp-ink); }
    .pdp-crumb-current { color: var(--pdp-ink); }

    /* ── Gallery: framed plates ── */
    .pdp-main-image { border: 1px solid var(--pdp-line); border-radius: 0; background: var(--pdp-paper); }
    .pdp-thumb {
        border: 1px solid var(--pdp-line); border-radius: 0;
        transition: border-color .2s ease;
    }
    .pdp-thumb.is-active, .pdp-thumb:hover { border-color: var(--pdp-ink); }
    .pdp-arrow {
        border-radius: 0; border: 1px solid var(--pdp-line);
        background: rgba(250,249,247,.94); color: var(--pdp-ink);
    }
    .pdp-arrow:hover { background: var(--pdp-ink); color: #fff; border-color: var(--pdp-ink); }
    .pdp-badge {
        border-radius: 0; font-size: 10px; font-weight: 600;
        letter-spacing: .16em; text-transform: uppercase; padding: 7px 12px;
    }
    .pdp-badge-sale { background: var(--pdp-ink); color: #fff; }
    .pdp-badge-new { background: var(--pdp-paper); color: var(--pdp-ink); border: 1px solid var(--pdp-ink); }

    /* ── Identity: editorial headline block ── */
    .pdp-brand {
        font-size: 11px; font-weight: 600;
        letter-spacing: .24em; text-transform: uppercase;
        color: var(--pdp-muted);
    }
    .pdp-title {
        font-family: 'Playfair Display', Georgia, serif;
        font-size: clamp(34px, 3.4vw, 48px);
        font-weight: 500; line-height: 1.1; letter-spacing: -.01em;
        color: var(--pdp-ink);
    }
    .pdp-rating-summary { color: var(--pdp-muted); }
    .pdp-stars { color: var(--pdp-ink); }

    /* ── Price: quiet confidence ── */
    .pdp-price-main { font-size: 24px; font-weight: 500; letter-spacing: .01em; color: var(--pdp-ink); }
    .pdp-price-compare { color: var(--pdp-muted); }
    .pdp-price-save {
        border-radius: 0; background: transparent;
        border: 1px solid var(--pdp-ink); color: var(--pdp-ink);
        font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
        padding: 5px 10px;
    }

    /* ── Stock line ── */
    .pdp-stock {
        font-size: 10.5px; font-weight: 600;
        letter-spacing: .14em; text-transform: uppercase;
    }
    .pdp-stock-dot { border-radius: 0; width: 7px; height: 7px; }

    /* ── Options: label rows + cell selectors ── */
    .pdp-option-label {
        font-size: 10.5px; font-weight: 600;
        letter-spacing: .2em; text-transform: uppercase; color: var(--pdp-ink);
    }
    .pdp-option-value { color: var(--pdp-muted); font-size: 12px; }
    .pdp-size-guide {
        font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
        color: var(--pdp-muted); text-decoration: none;
        border-bottom: 1px solid var(--pdp-line); padding-bottom: 2px;
    }
    .pdp-size-guide:hover { color: var(--pdp-ink); border-color: var(--pdp-ink); }
    .pdp-size {
        border: 1px solid var(--pdp-line); border-radius: 0;
        min-width: 46px; height: 46px;
        font-size: 12px; font-weight: 500; letter-spacing: .06em;
        background: #fff; color: var(--pdp-ink);
        transition: border-color .18s ease, background-color .18s ease, color .18s ease;
    }
    .pdp-size:hover { border-color: var(--pdp-ink); }
    .pdp-size.is-active { background: var(--pdp-ink); border-color: var(--pdp-ink); color: #fff; }
    .pdp-color { border-radius: 50%; }
    .pdp-color.is-active { box-shadow: 0 0 0 1px #fff, 0 0 0 2.5px var(--pdp-ink); }

    /* ── Purchase actions: rectangular ink editorial ── */
    .pdp-qty { border: 1px solid var(--pdp-line); border-radius: 0; }
    .pdp-qty button { color: var(--pdp-ink); }
    .pdp-cta {
        border-radius: 0;
        font-size: 11px; font-weight: 600;
        letter-spacing: .24em; text-transform: uppercase;
    }
    .pdp-cta-primary {
        background: var(--pdp-ink); color: #fff; border: 1px solid var(--pdp-ink);
        transition: background-color .25s ease, color .25s ease;
    }
    .pdp-cta-primary:hover { background: transparent; color: var(--pdp-ink); }
    .pdp-cta-buy {
        background: transparent; color: var(--pdp-ink);
        border: 1px solid var(--pdp-ink);
        transition: background-color .25s ease, color .25s ease;
    }
    .pdp-cta-buy:hover { background: var(--pdp-ink); color: #fff; }
    .pdp-wishlist {
        border-radius: 0; border: 1px solid var(--pdp-line);
        font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
    }
    .pdp-wishlist:hover { border-color: var(--pdp-ink); }

    /* Share row (added earlier) joins the hairline system */
    .pdp-share-btn { border-radius: 0; }

    /* ── Trust: ledger lines ── */
    .pdp-trust {
        border-top: 1px solid var(--pdp-line);
        border-bottom: 1px solid var(--pdp-line);
        border-radius: 0; background: transparent; padding: 18px 0;
    }
    .pdp-trust li { font-size: 12.5px; color: var(--pdp-muted); }
    .pdp-trust li strong { color: var(--pdp-ink); font-weight: 600; }
    .pdp-trust li i { color: var(--pdp-ink); }

    /* ── Accordion: hairline ledger with +/− ── */
    .pdp-accordion { border-top: 1px solid var(--pdp-line); }
    .pdp-acc { border-bottom: 1px solid var(--pdp-line); border-radius: 0; background: transparent; }
    .pdp-acc summary {
        font-size: 11px; font-weight: 600;
        letter-spacing: .2em; text-transform: uppercase; color: var(--pdp-ink);
        padding: 18px 0; list-style: none; position: relative;
    }
    .pdp-acc summary::-webkit-details-marker { display: none; }
    .pdp-acc summary::after {
        content: "+"; position: absolute; right: 2px; top: 50%;
        transform: translateY(-50%);
        font-size: 16px; font-weight: 400; color: var(--pdp-muted);
        transition: transform .2s ease;
    }
    .pdp-acc[open] summary::after { content: "−"; }
    .pdp-acc-body { font-size: 13.5px; line-height: 1.75; color: #4a4a46; padding-bottom: 20px; }
    .pdp-specs dt { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--pdp-muted); }
    .pdp-specs dd { color: var(--pdp-ink); }

    /* ── Section headers: eyebrow + serif title ── */
    .pdp-eyebrow {
        font-size: 10.5px; font-weight: 600;
        letter-spacing: .24em; text-transform: uppercase; color: var(--pdp-muted);
    }
    .pdp-section-title {
        font-family: 'Playfair Display', Georgia, serif;
        font-size: clamp(28px, 2.6vw, 38px);
        font-weight: 500; letter-spacing: -.01em; color: var(--pdp-ink);
    }
    .pdp-section { border-top: 1px solid var(--pdp-line); }

    /* ── Highlights: numbered ledger columns ── */
    .pdp-highlight {
        border: 0; border-top: 1px solid var(--pdp-ink); border-radius: 0;
        background: transparent; box-shadow: none; padding: 20px 0 0; text-align: left;
    }
    .pdp-highlight i { font-size: 16px; color: var(--pdp-muted); }
    .pdp-highlight h3 {
        font-size: 12px; font-weight: 600;
        letter-spacing: .14em; text-transform: uppercase; color: var(--pdp-ink);
    }
    .pdp-highlight p { font-size: 13px; line-height: 1.65; color: var(--pdp-muted); }

    /* ── Frequently bought together ── */
    .pdp-fbt-card { border: 1px solid var(--pdp-line); border-radius: 0; box-shadow: none; }
    .pdp-fbt-card:hover { border-color: var(--pdp-ink); }
    .pdp-fbt-label { font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--pdp-muted); }
    .pdp-fbt-summary { border: 1px solid var(--pdp-line); border-radius: 0; background: var(--pdp-paper); box-shadow: none; }
    .pdp-fbt-total { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; }
    .pdp-fbt-total-label { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--pdp-muted); }

    /* ── Reviews: gallery-label restraint ── */
    .pdp-reviews-summary { border: 1px solid var(--pdp-line); border-radius: 0; background: var(--pdp-paper); box-shadow: none; }
    .pdp-reviews-avg {
        font-family: 'Playfair Display', Georgia, serif;
        font-size: 58px; font-weight: 500; color: var(--pdp-ink);
    }
    .pdp-reviews-total { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--pdp-muted); }
    .pdp-bar { border-radius: 0; background: var(--pdp-line); }
    .pdp-bar-fill { border-radius: 0; background: var(--pdp-ink); }
    .pdp-recommend-pct { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; }
    .pdp-review-filter {
        border-radius: 0; border: 1px solid var(--pdp-line);
        font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
        background: #fff; color: var(--pdp-muted);
    }
    .pdp-review-filter:hover { border-color: var(--pdp-ink); color: var(--pdp-ink); }
    .pdp-review-filter.is-active { background: var(--pdp-ink); border-color: var(--pdp-ink); color: #fff; }
    .pdp-review-write {
        border-radius: 0; background: var(--pdp-ink); color: #fff; border: 1px solid var(--pdp-ink);
        font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
    }
    .pdp-review-write:hover { background: transparent; color: var(--pdp-ink); }
    .pdp-review {
        border: 0; border-top: 1px solid var(--pdp-line); border-radius: 0;
        background: transparent; box-shadow: none; padding: 22px 0;
    }
    .pdp-review-avatar {
        border-radius: 50%; background: transparent;
        border: 1px solid var(--pdp-ink); color: var(--pdp-ink);
        font-family: 'Playfair Display', Georgia, serif;
    }
    .pdp-review-title { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; }
    .pdp-verified, .pdp-featured-chip { border-radius: 0; }
    .pdp-review-reply { border-radius: 0; background: var(--pdp-paper); }
    .pdp-review-photos img { border-radius: 0; border: 1px solid var(--pdp-line); }

    /* ── Sticky purchase bar: paper ledger ── */
    .pdp-sticky-cta {
        background: rgba(250,249,247,.96);
        border-top: 1px solid var(--pdp-line);
        box-shadow: 0 -6px 24px rgba(18,18,18,.05);
    }
    .pdp-sticky-thumb { border-radius: 0; }
    .pdp-sticky-name { font-family: 'Playfair Display', Georgia, serif; font-size: 15px; font-weight: 500; }
}

/* ════════════════ MOBILE / PWA (≤900px) ════════════════ */
@media (max-width: 900px) {

    /* ── Identity ── */
    .mob-pd-brand {
        font-size: 10px !important; font-weight: 600 !important;
        letter-spacing: .22em !important; text-transform: uppercase !important;
        color: var(--pdp-muted) !important;
    }
    .mob-pd-name {
        font-family: 'Playfair Display', Georgia, serif !important;
        font-size: 26px !important; font-weight: 500 !important;
        line-height: 1.15 !important; letter-spacing: -.01em !important;
    }
    .mob-pd-price { font-size: 20px !important; font-weight: 500 !important; }
    .mob-pd-price-was { color: var(--pdp-muted) !important; }
    .mob-pd-badge-sale {
        border-radius: 0 !important;
        font-size: 9.5px !important; font-weight: 600 !important;
        letter-spacing: .14em !important; text-transform: uppercase !important;
        background: var(--pdp-ink) !important; color: #fff !important;
    }
    .mob-pd-stock-label { letter-spacing: .12em; text-transform: uppercase; font-size: 10px !important; }

    /* ── Options ── */
    .mob-pd-option-label {
        font-size: 10px !important; font-weight: 600 !important;
        letter-spacing: .18em !important; text-transform: uppercase !important;
    }
    .mob-pd-size-btn {
        border-radius: 0 !important; border: 1px solid var(--pdp-line) !important;
        font-weight: 500 !important;
    }
    .mob-pd-size-btn.is-active, .mob-pd-size-btn.active {
        background: var(--pdp-ink) !important; border-color: var(--pdp-ink) !important; color: #fff !important;
    }
    .mob-pd-color.is-active, .mob-pd-color.active {
        box-shadow: 0 0 0 1px #fff, 0 0 0 2.5px var(--pdp-ink) !important;
    }

    /* ── Accordion ── */
    .mob-pd-acc-trigger {
        font-size: 10.5px !important; font-weight: 600 !important;
        letter-spacing: .18em !important; text-transform: uppercase !important;
    }
    .mob-pd-acc-item { border-color: var(--pdp-line) !important; }

    /* ── Buy bar: ink editorial ── */
    .mob-pd-cta-wrap {
        background: rgba(250,249,247,.95) !important;
        border-top: 1px solid var(--pdp-line) !important;
    }
    .mob-pd-cta {
        border-radius: 0 !important;
        font-size: 11px !important; font-weight: 600 !important;
        letter-spacing: .2em !important; text-transform: uppercase !important;
        background: var(--pdp-ink) !important; color: #fff !important;
        border: 1px solid var(--pdp-ink) !important;
    }
    .mob-pd-gallery-img { background: var(--pdp-paper); }
    .mob-pd-dot { border-radius: 0 !important; width: 14px !important; height: 2px !important; }
}