/**
 * Pulseheaven Offers — "How offers work" guide.
 *
 * Linear-scroll walkthrough rendered by the [ph_offers_guide] shortcode.
 * Mirrors the V2 walkthrough direction from the offers system redesign:
 *
 *   .ph-offers-guide                 root, theme-aware via data-ph-guide-active-role
 *   .ph-offers-guide__hero           top white card with eyebrow, title, role toggle
 *   .ph-offers-guide__steps          ordered list of step cards (one per pane)
 *   .ph-offers-guide__step           card grid: prose left, mock right
 *   .ph-offers-guide__footer         deep aubergine trust + notifications strip
 *
 * Mocks live under the `.phg-` prefix so they don't collide with the live
 * production class names (`.om-studio`, `.rv-classic`, `.ph-offer-row`,
 * `.ph-likers-modal`, etc.). The visual goal is recognition, not pixel
 * cloning: a user should look at a mock and instantly map it to the
 * surface it represents in-app.
 *
 * Pulseheaven mobile breakpoint: 61.24em (tablet/desktop boundary).
 */

/* ─────────────────────────────────────────────────────────────
 * Root + role theming
 * ───────────────────────────────────────────────────────────── */
.ph-offers-guide {
    --phg-card-bg:      #fff;
    --phg-card-border:  #ececec;
    --phg-mock-bg:      #fafafa;
    --phg-mock-border:  #ececec;
    --phg-fg:           #111;
    --phg-fg-muted:     #6b6b6b;
    --phg-fg-mid:       #888;

    --phg-lilac:        #cb7cfb;
    --phg-lilac-deep:   #7c3aed;
    --phg-mint:         #16a34a;
    --phg-mint-deep:    #0a6b3a;
    --phg-gold:         #d99c1f;
    --phg-gold-deep:    #8a5a00;
    --phg-danger:       #d0021b;

    --phg-aubergine:        #241a3d;
    --phg-aubergine-soft:   #2f2350;

    --phg-radius-card:  24px;
    --phg-radius-mock:  16px;

    /* Buyer is the default active accent on first render; the
       [data-ph-guide-active-role="seller"] selector below swaps in green
       so the hero glow / title accent follows the toggle. */
    --phg-accent:       var(--phg-lilac);
    --phg-accent-deep:  var(--phg-lilac-deep);

    font-family: 'PP Neue Montreal', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--phg-fg);
    /* No surface color of our own. The guide inherits whatever the WP
       page template uses as its background and just stacks its sections
       (hero, steps, footer) inside that. */
    background: transparent;
    /* Match the site-wide page-wrapper convention (e.g. .ph-about-us)
       of a small bottom gap before the page footer. */
    padding: 0 0 20px;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
}
.ph-offers-guide[data-ph-guide-active-role="seller"] {
    --phg-accent:       var(--phg-mint);
    --phg-accent-deep:  var(--phg-mint-deep);
}

.ph-offers-guide *,
.ph-offers-guide *::before,
.ph-offers-guide *::after {
    box-sizing: border-box;
}

.ph-offers-guide__inner {
    /* Full-width layout to match the rest of the site (see about-us
       pattern: sections span full width with their own internal
       padding, no central container constraint). */
    max-width: none;
    margin: 0;
}


/* ─────────────────────────────────────────────────────────────
 * Hero
 * ───────────────────────────────────────────────────────────── */
.ph-offers-guide__hero {
    position: relative;
    overflow: hidden;
    background: var(--phg-card-bg);
    border: 1px solid var(--phg-card-border);
    border-radius: var(--phg-radius-card);
    padding: 40px 44px;
}
.ph-offers-guide__hero-glow {
    position: absolute;
    top: -60px;
    right: -40px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--phg-accent) 30%, transparent) 0%, transparent 70%);
    transition: background .4s ease;
    pointer-events: none;
}
/* Fallback for browsers without color-mix (Safari <16.4 etc.) */
@supports not (background: color-mix(in srgb, red 30%, blue)) {
    .ph-offers-guide__hero-glow { background: radial-gradient(circle, rgba(203, 124, 251, .30) 0%, transparent 70%); }
    .ph-offers-guide[data-ph-guide-active-role="seller"] .ph-offers-guide__hero-glow { background: radial-gradient(circle, rgba(22, 163, 74, .30) 0%, transparent 70%); }
}
.ph-offers-guide__hero-inner {
    position: relative;
    z-index: 1;
}

.ph-offers-guide__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .16em;
    color: var(--phg-accent-deep);
    transition: color .2s ease;
}
.ph-offers-guide__eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--phg-accent);
    transition: background .2s ease;
}

.ph-offers-guide__title {
    margin: 0;
    font-size: 56px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: -0.03em;
    max-width: 640px;
    color: var(--phg-fg);
}
.ph-offers-guide__title-accent {
    color: var(--phg-accent);
    font-style: italic;
    font-weight: 500;
    transition: color .2s ease;
}

.ph-offers-guide__lede {
    margin: 18px 0 28px;
    max-width: 560px;
    font-size: 16px;
    line-height: 1.55;
    color: #555;
}

.ph-offers-guide__toggle {
    display: inline-flex;
    padding: 4px;
    border-radius: 999px;
    background: #f3f3f3;
    gap: 0;
}
.ph-offers-guide__role-btn {
    font-family: inherit;
    cursor: pointer;
    padding: 8px 18px;
    border-radius: 999px;
    border: 0;
    background: transparent;
    color: #666;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    transition: background .2s ease, color .2s ease;
}
.ph-offers-guide__role-btn:hover { color: #111; }
/* Active pill follows the active-role accent (lilac on buyer, mint on
   seller) — --phg-accent is swapped by the [data-ph-guide-active-role]
   selector on the root, so the pill stays in sync with the pane. */
.ph-offers-guide__role-btn.is-active {
    background: var(--phg-accent);
    color: #fff;
}
.ph-offers-guide__role-btn:focus-visible {
    outline: 2px solid var(--phg-accent-deep);
    outline-offset: 2px;
}


/* ─────────────────────────────────────────────────────────────
 * Step list
 *
 * The selector is `.ph-offers-guide ol.ph-offers-guide__steps` (and
 * not just the class) to beat the theme's generic `ol,ul{margin: 0 0
 * 1.5em 3em}` rule. Without that specificity bump, the steps inherit
 * a ~3em left margin and visibly inset on the left, making the cards
 * narrower than the hero + footer rows.
 * ───────────────────────────────────────────────────────────── */
.ph-offers-guide ol.ph-offers-guide__steps {
    list-style: none;
    padding: 0;
    margin: 20px 0 0;
    display: grid;
    gap: 14px;
}
.ph-offers-guide ol.ph-offers-guide__steps[hidden] { display: none; }

.ph-offers-guide__steps > .ph-offers-guide__step {
    margin: 0;
    background: var(--phg-card-bg);
    border: 1px solid var(--phg-card-border);
    border-radius: var(--phg-radius-card);
    padding: 32px 36px;
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 32px;
    align-items: stretch;
    min-height: 240px;
}
.ph-offers-guide__step--buyer  { --phg-step-accent: var(--phg-lilac); --phg-step-accent-deep: var(--phg-lilac-deep); }
.ph-offers-guide__step--seller { --phg-step-accent: var(--phg-mint);  --phg-step-accent-deep: var(--phg-mint-deep);  }

.ph-offers-guide__step-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.ph-offers-guide__step-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.ph-offers-guide__step-index {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--phg-step-accent) 18%, transparent);
    color: var(--phg-step-accent-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
}
.ph-offers-guide__step-counter {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    letter-spacing: .14em;
    color: #999;
    line-height: 1;
}
.ph-offers-guide__step-kicker {
    font-size: 11px;
    color: var(--phg-step-accent-deep);
    font-weight: 600;
    padding: 3px 9px;
    background: color-mix(in srgb, var(--phg-step-accent) 18%, transparent);
    border-radius: 999px;
    letter-spacing: .04em;
    line-height: 1.4;
}

.ph-offers-guide__step-title {
    font-size: 28px;
    margin: 0 0 10px;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--phg-fg);
}
.ph-offers-guide__step-prose {
    color: #555;
    font-size: 15px;
    margin: 0;
    line-height: 1.55;
    max-width: 480px;
}

.ph-offers-guide__keyfact {
    margin-top: 16px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    background: color-mix(in srgb, var(--phg-step-accent) 6%, #fff);
    border: 1px solid color-mix(in srgb, var(--phg-step-accent) 25%, transparent);
    border-radius: 12px;
    max-width: 480px;
}
@supports not (background: color-mix(in srgb, red 6%, white)) {
    .ph-offers-guide__step--buyer  .ph-offers-guide__keyfact { background: #faf7ff; border-color: #ead8ff; }
    .ph-offers-guide__step--seller .ph-offers-guide__keyfact { background: #f1faf3; border-color: #cdebd5; }
}
.ph-offers-guide__keyfact-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--phg-step-accent) 25%, transparent);
    color: var(--phg-step-accent-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ph-offers-guide__keyfact-text { min-width: 0; }
.ph-offers-guide__keyfact-label {
    display: block;
    font-size: 10px;
    color: var(--phg-step-accent-deep);
    font-weight: 600;
    letter-spacing: .1em;
    margin-bottom: 2px;
}
.ph-offers-guide__keyfact-value {
    display: block;
    font-size: 13px;
    color: #333;
    line-height: 1.4;
}

.ph-offers-guide__tips {
    list-style: none;
    padding: 0;
    margin: 14px 0 0;
    display: grid;
    gap: 8px;
    max-width: 480px;
}
/* When tips follow a keyfact, give them more breathing room so the
   two info blocks don't read as a single squished stack. */
.ph-offers-guide__keyfact + .ph-offers-guide__tips {
    margin-top: 22px;
}
.ph-offers-guide__tips li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: #555;
    line-height: 1.45;
}
.ph-offers-guide__tip-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--phg-step-accent) 25%, transparent);
    color: var(--phg-step-accent-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}
.ph-offers-guide__tip-dot svg { width: 10px; height: 10px; }

.ph-offers-guide__footnote {
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--phg-step-accent-deep);
    font-weight: 500;
    padding: 5px 10px;
    background: color-mix(in srgb, var(--phg-step-accent) 18%, transparent);
    border-radius: 999px;
    align-self: flex-start;
}
@supports not (background: color-mix(in srgb, red 18%, white)) {
    .ph-offers-guide__step--buyer  .ph-offers-guide__footnote { background: #f4ecff; }
    .ph-offers-guide__step--seller .ph-offers-guide__footnote { background: #e3f7eb; }
}

.ph-offers-guide__step-mock {
    background: var(--phg-mock-bg);
    border: 1px solid var(--phg-mock-border);
    border-radius: var(--phg-radius-mock);
    padding: 18px;
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ─────────────────────────────────────────────────────────────
 * Footer (trust + notifications)
 * ───────────────────────────────────────────────────────────── */
.ph-offers-guide__footer {
    margin-top: 28px;
    padding: 36px 40px;
    background: var(--phg-aubergine);
    background-image:
        radial-gradient(circle at 0% 0%, rgba(203, 124, 251, .12), transparent 55%),
        radial-gradient(circle at 100% 100%, rgba(124, 58, 237, .18), transparent 55%);
    color: #fff;
    border-radius: var(--phg-radius-card);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}
.ph-offers-guide__footer-eyebrow {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    letter-spacing: .16em;
    color: var(--phg-lilac);
    font-weight: 600;
    margin-bottom: 12px;
}
.ph-offers-guide__footer-title {
    font-size: 22px;
    margin: 0 0 10px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: #fff;
    line-height: 1.2;
}
.ph-offers-guide__footer-prose {
    font-size: 14px;
    color: rgba(255, 255, 255, .7);
    margin: 0;
    line-height: 1.55;
    max-width: 360px;
}

.ph-offers-guide__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}
.ph-offers-guide__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 999px;
    background: var(--phg-aubergine-soft);
    border: 1px solid rgba(255, 255, 255, .08);
    font-size: 12px;
    color: #fff;
    font-weight: 500;
    line-height: 1.2;
}
.ph-offers-guide__chip-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ph-offers-guide__chip-label { font-weight: 500; }
.ph-offers-guide__chip-sub { color: rgba(255, 255, 255, .5); font-weight: 400; }

.ph-offers-guide__notif-list {
    list-style: none;
    padding: 0;
    margin: 14px 0 0;
    display: grid;
    gap: 10px;
}
.ph-offers-guide__notif-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.ph-offers-guide__notif-icon {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--phg-aubergine-soft);
    border: 1px solid rgba(255, 255, 255, .08);
    color: var(--phg-lilac);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}
.ph-offers-guide__notif-icon svg { width: 11px; height: 11px; }
.ph-offers-guide__notif-title {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    line-height: 1.3;
}
.ph-offers-guide__notif-sub {
    display: block;
    font-size: 12px;
    color: rgba(255, 255, 255, .55);
    line-height: 1.4;
}

.ph-offers-guide__channels {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
.ph-offers-guide__channel-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .12);
    font-size: 11px;
    color: rgba(255, 255, 255, .5);
    font-weight: 500;
    line-height: 1.2;
}
.ph-offers-guide__channel-chip.is-on {
    background: rgba(203, 124, 251, .12);
    border-color: rgba(203, 124, 251, .4);
    color: #fff;
}
.ph-offers-guide__channel-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .3);
}
.ph-offers-guide__channel-chip.is-on .ph-offers-guide__channel-dot {
    background: var(--phg-lilac);
}
.ph-offers-guide__channels-hint {
    font-size: 11px;
    color: rgba(255, 255, 255, .5);
}


/* ─────────────────────────────────────────────────────────────
 * Responsive: tablet/phone collapses the step grid + footer
 * ───────────────────────────────────────────────────────────── */
@media (max-width: 61.24em) {
    .ph-offers-guide__hero { padding: 28px 24px; }
    .ph-offers-guide__title { font-size: 36px; }
    .ph-offers-guide__lede  { font-size: 15px; }

    /* Selector mirrors the desktop rule's specificity (0,2,0) so the
       single-column collapse actually wins on mobile. */
    .ph-offers-guide__steps > .ph-offers-guide__step {
        grid-template-columns: 1fr;
        padding: 24px;
        gap: 20px;
    }
    .ph-offers-guide__step-title { font-size: 22px; }
    .ph-offers-guide__step-mock { min-height: 160px; }

    .ph-offers-guide__footer {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 24px;
    }
}


/* =============================================================
 *  MOCKS — local UI mini-renditions of the actual production
 *  surfaces. Prefixed `.phg-` to avoid colliding with live UI.
 * ============================================================= */

.phg-card {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 14px;
    padding: 14px;
    width: 100%;
    box-sizing: border-box;
}

/* Generic buttons used inside multiple mocks.
 * !important on the visual bits (bg, color, border, padding) so the
 * theme's broad `.entry-content button` / `.entry-content span` /
 * `.entry-content a` rules can't repaint them at full-page render. */
.phg-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 8px 14px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
}
.phg-btn--block { display: flex !important; padding: 10px 14px !important; }
.phg-btn--solid   { background: #111 !important;     color: #fff !important; border: 0 !important; }                                  /* Add to cart (dark variant) */
.phg-btn--ghost   { background: #fff !important;     color: #111 !important; border: 1px solid #e0e0e0 !important; }                  /* Make an offer (PDP, ghost) */
.phg-btn--dark    { background: #111 !important;     color: #fff !important; border: 0 !important; }
.phg-btn--neutral { background: #e4e4e4 !important;  color: #111 !important; border: 0 !important; }                                  /* Accept / Pay now (production primary) */
.phg-btn--white   { background: #fff !important;     color: #111 !important; border: 1px solid #e4e4e4 !important; }                  /* Decline / Counter / Withdraw */
.phg-btn--outline { background: #fff !important;     color: #111 !important; border: 1px solid #e0e0e0 !important; }                  /* (legacy alias) */

/* Generic status pill used in multiple mocks */
.phg-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}
.phg-pill__dot { width: 6px !important; height: 6px !important; border-radius: 50% !important; }
.phg-pill--mint   { background: #e3f7eb !important;            color: #0a6b3a !important; }
.phg-pill--gold   { background: #fff5d6 !important;            color: #8a5a00 !important; }
/* "active" pill matches the production review-offer modal — both
 * pending and countered offers with time-remaining fold into one
 * green "active" status there (see pillFor() in review-offer-modal.js
 * and .rv-status--active in review-offer-modal.css). */
.phg-pill--active { background: rgba(70, 220, 120, .16) !important; color: #1f8b4c !important; }

/* Generic reputation chip used inside multiple mocks. Colors arrive
 * as inline styles (with !important) from the PHP renderer so the
 * theme can't override the per-row tint. */
.phg-rep {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 4px 9px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
}
.phg-rep__dot { width: 5px !important; height: 5px !important; border-radius: 50% !important; flex-shrink: 0 !important; }


/* ── Buyer · 1 — PDP eligible listing card ───────────────────
 *
 * Stack order mirrors the live PDP exactly: photo → brand → title
 * → price → social-signal pill → buy-button column. The signal pill
 * matches the real `.ph-pdp-badge[data-signal-type="offers"]` look
 * (light info-blue chip), and the two action buttons stack
 * vertically since the live page renders Add to cart and Make an
 * offer one above the other on the buy-column. */
.phg-pdp__photo {
    height: 120px;
    border-radius: 10px;
    margin-bottom: 12px;
    background: linear-gradient(135deg, #9ec9a6 0%, #7eb38a 100%);
    background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 8px, transparent 8px 16px),
                      linear-gradient(135deg, #9ec9a6 0%, #7eb38a 100%);
}
.phg-pdp__brand { font-size: 11px; color: #999; margin-bottom: 2px; }
.phg-pdp__title { font-size: 13px; font-weight: 500; color: #111; margin-bottom: 2px; }
.phg-pdp__price { font-size: 16px; font-weight: 500; color: #111; margin-bottom: 10px; }
/* Active-offers signal pill — purple to match the seller-side
 * .phg-activity__pill--offers below. (Production .ph-pdp-badge[data-
 * signal-type="offers"] currently uses an info-blue tone; this mock
 * previews the lilac treatment we'll switch the live badge to in a
 * later codebase change.) */
.phg-pdp__signal {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 8px !important;
    padding: 5px 10px !important;
    background: #f4ecff !important;
    color: #7c3aed !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
}
.phg-pdp__signal-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #7c3aed !important;
    box-shadow: 0 0 0 2px rgba(124, 58, 237, .15) !important;
}
.phg-pdp__actions { display: flex; flex-direction: column; gap: 6px; }


/* ── Buyer · 2 / 3 — Studio modal (split editorial) ─────────── */
.phg-studio {
    padding: 0;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .06);
    display: grid;
    /* Give the form panel more horizontal room than the media panel
       so the suggestion box / note textarea / send button don't feel
       crammed against their borders. */
    grid-template-columns: 0.8fr 1.25fr;
}
.phg-studio__media {
    position: relative;
    background: #ebe7e1;
    padding: 18px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
}
.phg-studio__pricetag {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(255, 255, 255, .96);
    color: #000;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .06em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1;
}
.phg-studio__pricetag-dot { width: 5px; height: 5px; border-radius: 50%; background: #46dc78; }
.phg-studio__garment {
    width: 75%;
    aspect-ratio: 1 / 1.05;
    background: #d8d3ca;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(60, 45, 30, .14);
}
.phg-studio__seller {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: rgba(255, 255, 255, .95);
    color: #000;
    padding: 3px 9px 3px 3px;
    border-radius: 999px;
    font-size: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    line-height: 1;
}
.phg-studio__seller-av {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: linear-gradient(135deg, #cb7cfb, #7c3aed);
    color: #fff;
    font-size: 8px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.phg-studio__panel { padding: 18px 16px 16px; }
.phg-studio__title { font-size: 14px; font-weight: 500; color: #000; margin-bottom: 3px; line-height: 1.2; }
.phg-studio__sub   { font-size: 11px; color: #8a8a8a; margin-bottom: 16px; line-height: 1.4; }
.phg-studio__listed { font-size: 11px; color: #8a8a8a; margin-bottom: 6px; }
.phg-studio__listed b { color: #000; font-weight: 500; font-size: 12px; }
.phg-studio__field {
    border: 1px solid #e4e4e4;
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    margin-bottom: 12px;
}
.phg-studio__currency { font-size: 16px; color: #000; line-height: 1; }
.phg-studio__amount   { font-size: 20px; color: #000; font-weight: 400; line-height: 1; }
.phg-studio__badge    {
    margin-left: auto;
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(167, 139, 250, .18);
    color: #7c3aed;
    font-weight: 500;
}
.phg-studio__suggest {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 12px;
    background: rgba(167, 139, 250, .10);
    border: 1px solid rgba(167, 139, 250, .28);
    border-radius: 10px;
    margin-bottom: 14px;
}
.phg-studio__suggest-icon {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: #fff;
    color: #7c3aed;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.phg-studio__suggest-text { flex: 1; min-width: 0; }
.phg-studio__suggest-text b { display: block; font-size: 11px; font-weight: 500; color: #000; line-height: 1.3; }
.phg-studio__suggest-text small { display: block; font-size: 10px; color: #8a8a8a; margin-top: 3px; line-height: 1.4; }
.phg-studio__suggest-cta {
    font-size: 10px;
    font-weight: 500;
    color: #7c3aed;
    letter-spacing: .04em;
    text-transform: uppercase;
    flex-shrink: 0;
}
.phg-studio__note {
    border: 1px solid #e4e4e4;
    border-radius: 10px;
    padding: 10px 12px;
    min-height: 44px;
    background: #fafafa;
    font-size: 11px;
    color: #444;
    line-height: 1.5;
    margin-bottom: 12px;
}
.phg-studio__note--filled { background: #fff; color: #111; }
.phg-studio__note-placeholder { color: #aaa; }
.phg-studio__caret {
    display: inline-block;
    width: 1px;
    height: 11px;
    background: #cb7cfb;
    margin-left: 1px;
    vertical-align: middle;
    animation: phg-blink 1s infinite;
}
@keyframes phg-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.phg-studio__send {
    background: #e4e4e4;
    color: #000;
    border-radius: 10px;
    padding: 9px 12px;
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .02em;
}


/* ── Buyer · 4 — Review modal (timeline + actions) ──────────── */
.phg-review { padding: 16px; }
.phg-review__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}
.phg-review__thumb {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #9ec9a6;
    background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 6px, transparent 6px 12px) !important;
    flex-shrink: 0;
}
.phg-review__title { font-size: 13px; font-weight: 500; color: #111; line-height: 1.3; margin-bottom: 2px; }
.phg-review__meta  { font-size: 11px; color: #888; line-height: 1.3; }
.phg-review__timeline {
    list-style: none;
    padding: 4px 0 4px 14px;
    margin: 0 0 15px !important;
    border-left: 2px dotted #d8d8d8;
    display: grid;
    gap: 14px;
}
.phg-review__timeline li { position: relative; }
.phg-review__node {
    position: absolute;
    left: -20px;
    top: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #d8d8d8;
}
.phg-review__node--current { border-color: #d99c1f; background: #d99c1f; }
.phg-review__row { font-size: 12px; color: #111; line-height: 1.3; }
.phg-review__row b { font-weight: 500; }
.phg-review__row span { color: #666; margin-left: 4px; }
.phg-review__time { font-size: 10px; color: #888; line-height: 1.3; margin-top: 3px; }
.phg-review__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.phg-review__msg-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #e4e4e4;
    color: #111;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}


/* ── Buyer · 5 — Countdown bars ────────────────────────────── */
.phg-countdown { display: grid; gap: 12px; width: 100%; }
.phg-countdown__row {}
.phg-countdown__label {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin-bottom: 5px;
    color: #666;
    line-height: 1.3;
}
.phg-countdown__time { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 600; }
.phg-countdown__track { height: 4px; background: #ececec; border-radius: 999px; overflow: hidden; }
.phg-countdown__fill  { height: 100%; border-radius: 999px; }


/* ── Buyer · 6 — Accepted/checkout card ────────────────────── */
.phg-checkout { display: flex; flex-direction: column; gap: 8px; }
.phg-checkout__label  { font-size: 12px; color: #666; }
.phg-checkout__amount { font-size: 26px; font-weight: 500; color: #111; letter-spacing: -0.02em; line-height: 1; }
.phg-checkout__was    { font-size: 12px; color: #999; margin-left: 8px; }
.phg-checkout__hint   {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #8a5a00;
    justify-content: center;
}


/* ── Buyer · 7 — Health badges stack ───────────────────────── */
.phg-health { display: grid; gap: 8px; width: 100%; }
.phg-health__row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 10px;
    padding: 8px 10px;
}
.phg-health__av { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; }
.phg-health__id { flex: 1; min-width: 0; }
.phg-health__name { font-size: 12px; font-weight: 500; color: #111; line-height: 1.3; }
.phg-health__sub  { font-size: 11px; color: #888; line-height: 1.3; }


/* ── Buyer · 8 — Post-sale order timeline ──────────────────── */
.phg-shiplog { display: grid; gap: 6px; width: 100%; }
.phg-shiplog__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 10px;
}
.phg-shiplog__row.is-future { background: #fafafa; opacity: .65; }
.phg-shiplog__icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.phg-shiplog__text { flex: 1; min-width: 0; }
.phg-shiplog__state { font-size: 12px; font-weight: 500; color: #111; line-height: 1.3; }
.phg-shiplog__track { font-size: 10px; color: #888; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; line-height: 1.3; }
.phg-shiplog__time  { font-size: 11px; color: #888; }


/* ── Seller · 1 — Inbox rows ───────────────────────────────── */
.phg-inbox { display: grid; gap: 6px; width: 100%; }
.phg-inbox__row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 10px;
    padding: 8px 10px;
}
.phg-inbox__thumb {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 6px, transparent 6px 12px);
    flex-shrink: 0;
}
.phg-inbox__main { flex: 1; min-width: 0; }
.phg-inbox__title { font-size: 12px; font-weight: 500; color: #111; line-height: 1.3; }
.phg-inbox__sub   { font-size: 11px; color: #888; line-height: 1.3; }
.phg-inbox__price { font-size: 13px; font-weight: 500; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }


/* ── Seller · 2 — Buyer profile / rep card ─────────────────── */
.phg-profile__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.phg-profile__av { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; }
.phg-profile__id { flex: 1; min-width: 0; }
.phg-profile__name { font-size: 13px; font-weight: 500; color: #111; line-height: 1.3; }
.phg-profile__sub  { font-size: 11px; color: #888; line-height: 1.3; }
.phg-profile__note {
    padding: 8px 10px;
    background: #f1faf3;
    border-radius: 8px;
    font-size: 11px;
    color: #0a6b3a;
    line-height: 1.4;
}
.phg-profile__note strong { font-weight: 600; }


/* ── Seller · 3 — Review modal action row ──────────────────── */
.phg-actions-card__top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.phg-actions-card__thumb {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 6px, transparent 6px 12px);
    flex-shrink: 0;
}
.phg-actions-card__sub    { font-size: 11px; color: #999; line-height: 1.3; }
.phg-actions-card__amount { font-size: 18px; font-weight: 500; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #111; }
.phg-actions-card__amount span { font-size: 11px; color: #999; font-family: inherit; margin-left: 4px; }


/* ── Seller · 4 — Social signal pill (both variants) ───────── */
.phg-activity { display: grid; gap: 8px; width: 100%; }
.phg-activity__pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    width: fit-content;
}
.phg-activity__pill--cart   { background: #fff5d6; color: #8a5a00; }
.phg-activity__pill--offers { background: #f4ecff; color: #7c3aed; }
.phg-activity__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    animation: phg-pulse 1.5s infinite;
}
@keyframes phg-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.phg-activity__legend { font-size: 11px; color: #888; line-height: 1.4; }


/* ── Seller · 5 — Offer-thread messaging ───────────────────── */
.phg-thread { display: grid; gap: 6px; width: 100%; }
.phg-thread__msg { max-width: 80%; }
.phg-thread__msg--in  { align-self: flex-start; justify-self: flex-start; }
.phg-thread__msg--out { align-self: flex-end;   justify-self: flex-end; text-align: right; }
.phg-thread__who { font-size: 10px; color: #999; margin-bottom: 2px; }
.phg-thread__bubble {
    display: inline-block;
    padding: 7px 10px;
    background: #f3f3f3;
    border-radius: 12px 12px 12px 4px;
    font-size: 12px;
    color: #111;
    line-height: 1.4;
    text-align: left;
}
.phg-thread__bubble--out {
    background: #e4e4e4 !important;
    color: #111 !important;
    border-radius: 12px 12px 4px 12px !important;
}

/* Offer card embedded in the thread — mirrors the production
 * "OFFER SENT" / "OFFER RECEIVED" card that the messages page pins
 * when a conversation has an offer attached. Left lilac stripe is
 * the same accent the live UI uses to flag "offer pinned here". */
.phg-thread__offer {
    margin-top: 6px;
    padding: 12px !important;
    background: #fff !important;
    border: 1px solid #ececec !important;
    border-left: 3px solid #cb7cfb !important;
    border-radius: 12px !important;
    display: grid;
    gap: 10px;
    align-self: flex-end;
    justify-self: stretch;
    max-width: 100%;
}
.phg-thread__offer-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.phg-thread__offer-thumb {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    flex-shrink: 0;
    background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 6px, transparent 6px 12px);
}
.phg-thread__offer-body { flex: 1; min-width: 0; }
.phg-thread__offer-label {
    font-size: 9px;
    font-weight: 600;
    color: #8a8a8a;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1.2;
    margin-bottom: 2px;
}
.phg-thread__offer-title {
    font-size: 12px;
    font-weight: 500;
    color: #111;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.phg-thread__offer-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}
.phg-thread__offer-price {
    font-size: 16px;
    font-weight: 600;
    color: #111;
}
.phg-thread__attach {
    margin-top: 6px;
    padding: 6px 8px;
    border: 1px dashed #d0d0d0;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: #777;
}


/* ── Seller · 6 — Likers modal mock ────────────────────────── */
.phg-likers { padding: 14px; }
.phg-likers__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.phg-likers__title { font-size: 14px; font-weight: 500; color: #000; }
.phg-likers__close { font-size: 18px; color: #999; }
.phg-likers__product {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    padding: 6px 0;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 11px;
    color: #111;
    font-weight: 500;
    margin-bottom: 10px;
}
.phg-likers__product span { font-size: 10px; color: #888; font-weight: 400; }
.phg-likers__count {
    font-size: 11px;
    color: #7c3aed;
    font-weight: 600;
    margin-bottom: 10px;
}
.phg-likers__field {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px;
    align-items: center;
    margin-bottom: 8px;
}
.phg-likers__field-label { font-size: 11px; color: #666; }
.phg-likers__field-input {
    grid-column: 2;
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 12px;
    color: #111;
    background: #fff;
    text-align: right;
    min-width: 92px;
}
.phg-likers__field-input--select::after { content: " ▾"; color: #888; }
.phg-likers__savings { font-size: 10px; color: #7c3aed; grid-column: 1 / -1; text-align: right; }

/* Optional message — stacked label above textarea, full-width input
 * so it matches the production .ph-field layout for that one. */
.phg-likers__field--stack {
    display: block !important;
    grid-template-columns: none !important;
}
.phg-likers__field--stack .phg-likers__field-label {
    display: block;
    margin-bottom: 4px;
}
.phg-likers__textarea {
    display: block;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 11px;
    color: #888;
    background: #fff;
    line-height: 1.4;
    min-height: 36px;
}

/* Footer: Cancel link + Send offer grey button, mirroring
 * render_offer_likers_modal()'s footer markup. The Send button
 * is the production .ph-btn--primary (grey #e4e4e4 / #000), not
 * the lilac brand button the mock used to render. */
.phg-likers__foot {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.phg-likers__cancel {
    flex-shrink: 0;
    padding: 9px 12px;
    font-size: 12px;
    color: #666;
    background: transparent;
}
.phg-likers__send {
    flex: 1;
    padding: 9px 12px;
    background: #e4e4e4 !important;
    color: #000 !important;
    border: 1px solid #e4e4e4 !important;
    border-radius: 10px;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
}


/* ── Seller · 7 — Sold-tab "Mark as shipped" card ──────────── */
.phg-sold { display: flex; flex-direction: column; gap: 10px; }
.phg-sold__row { display: flex; align-items: center; gap: 10px; }
.phg-sold__thumb {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 6px, transparent 6px 12px);
    flex-shrink: 0;
}
.phg-sold__title { font-size: 12px; font-weight: 500; color: #111; line-height: 1.3; }
.phg-sold__meta  { font-size: 11px; color: #888; line-height: 1.3; }
.phg-sold__status {
    padding: 6px 10px;
    background: #fafafa;
    border-radius: 8px;
    font-size: 11px;
    color: #444;
}
.phg-sold__hint { font-size: 10px; color: #888; text-align: center; }