/* Group buying (buyer side) — same palette/tokens as store.css, light surfaces */
.x9-group-hero { margin-top: -1px; background: #fff; border-bottom: 1px solid var(--x9-line); overflow: hidden; }
.x9-group-hero__inner { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(360px,.9fr); gap: clamp(28px,5vw,64px); align-items: center; padding-block: clamp(32px,5vw,56px); }
.x9-group-hero h1 { max-width: 16ch; margin: 6px 0 14px; font-size: clamp(1.9rem,4.5vw,3.2rem); line-height: 1.05; letter-spacing: -.02em; text-wrap: balance; }
.x9-group-hero p { max-width: 65ch; color: var(--x9-text-soft); font-size: 1rem; }
.x9-group-hero .x9-kicker { color: var(--x9-brand-deep); }
.x9-group-flow { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.x9-group-flow li { display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--x9-line); }
.x9-group-flow li:last-child { border-bottom: 0; }
.x9-group-flow li > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: var(--x9-brand); color: #fff; font-weight: 600; }
.x9-group-flow strong, .x9-group-flow small { display: block; }
.x9-group-flow small { max-width: 40ch; margin-top: 3px; color: var(--x9-text-soft); }
.x9-group-ledger { border-block: 1px solid var(--x9-line); }
.x9-group-ledger__row { display: grid; grid-template-columns: minmax(0,1fr) 130px; gap: 20px; align-items: center; padding: 18px 4px; border-bottom: 1px solid var(--x9-line); text-decoration: none; }
.x9-group-ledger__row:last-child { border-bottom: 0; }
.x9-group-ledger__row:hover h3 { color: var(--x9-text-soft); }
.x9-group-ledger h3 { margin: 6px 0 3px; font-size: 1.1rem; transition: color 150ms ease; }
.x9-group-ledger p { margin: 0; color: var(--x9-text-soft); }
.x9-group-ledger__count strong, .x9-group-ledger__count span { display: block; }
.x9-group-ledger__count strong { font-size: 1.3rem; }
.x9-group-ledger__count span { color: var(--x9-text-soft); font-size: .82rem; }
.x9-group-campaigns { padding-top: 48px; }
.x9-group-campaign { display: grid; grid-template-columns: minmax(280px,1fr) minmax(260px,.7fr) auto; gap: clamp(22px,4vw,48px); align-items: center; border: 1px solid var(--x9-line); border-radius: var(--x9-radius-lg); padding: clamp(20px,3.5vw,36px); background: #fff; }
.x9-group-campaign h3 { max-width: 22ch; margin: 6px 0; font-size: clamp(1.5rem,3vw,2.4rem); line-height: 1.08; letter-spacing: -.02em; }
.x9-group-campaign p { max-width: 60ch; color: var(--x9-text-soft); }
.x9-group-campaign dl { display: flex; flex-wrap: wrap; gap: 24px; margin: 20px 0 0; }
.x9-group-campaign dl div { display: grid; }
.x9-group-campaign dt { color: var(--x9-text-soft); font-size: .78rem; font-weight: 500; }
.x9-group-campaign dd { margin: 2px 0 0; font-size: 1.15rem; font-weight: 600; }
.x9-group-campaign__products { display: grid; grid-template-columns: repeat(2,110px); gap: 8px; }
.x9-group-campaign__products img { width: 110px; height: 110px; object-fit: contain; border-radius: var(--x9-radius); background: var(--x9-page-bg); }
.x9-group-rate { display: grid; max-width: 180px; text-align: right; }
.x9-group-rate strong { font-size: 2.4rem; letter-spacing: -.02em; color: var(--x9-price); }
.x9-group-rate span { color: var(--x9-text-soft); font-weight: 500; }
.x9-group-order { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(340px,.65fr); gap: clamp(24px,4vw,48px); align-items: start; }
.x9-group-products { display: grid; gap: 10px; }
.x9-group-product { display: grid; grid-template-columns: 82px minmax(0,1fr) auto 82px; gap: 16px; align-items: center; border-bottom: 1px solid var(--x9-line); padding: 13px 4px; }
.x9-group-product img { width: 82px; height: 82px; object-fit: contain; border-radius: var(--x9-radius); background: var(--x9-page-bg); }
.x9-group-product h3 { margin: 0; font-size: 1rem; }
.x9-group-product p { margin: 3px 0; color: var(--x9-text-soft); font-size: .86rem; }
.x9-group-product label { font-size: .78rem; font-weight: 500; }
.x9-group-product .x9-input { width: 76px; }
.x9-group-checkout { position: sticky; top: 110px; display: grid; gap: 18px; border: 1px solid var(--x9-line); border-radius: var(--x9-radius-lg); padding: clamp(18px,2.6vw,28px); background: #fff; }
.x9-group-checkout h2 { margin: 4px 0; }
.x9-group-assurance, .x9-group-address-note { border-top: 1px solid var(--x9-line); padding-top: 14px; }
.x9-group-assurance strong, .x9-group-assurance span { display: block; }
.x9-group-assurance span { margin-top: 3px; color: var(--x9-text-soft); font-size: .84rem; }
.x9-invite-head { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 32px; align-items: end; padding: 24px 0; }
.x9-invite-head h1 { max-width: 18ch; margin: 6px 0; font-size: clamp(1.9rem,4.5vw,3.4rem); line-height: 1.05; letter-spacing: -.02em; }
.x9-invite-head p { max-width: 62ch; color: var(--x9-text-soft); }
.x9-group-clock { display: grid; min-width: 220px; border: 1px solid var(--x9-line); border-radius: var(--x9-radius-lg); padding: 18px 22px; background: var(--x9-brand-tint); color: var(--x9-text); }
.x9-group-clock strong { font-size: clamp(1.4rem,2.6vw,2rem); letter-spacing: -.015em; color: var(--x9-price); font-variant-numeric: tabular-nums; }
.x9-group-clock span { color: var(--x9-text-soft); font-size: .82rem; font-weight: 500; }
.x9-group-progress { display: grid; grid-template-columns: auto minmax(140px,1fr) auto auto; gap: 22px; align-items: center; border-block: 1px solid var(--x9-line); padding: 18px 0; margin-bottom: 32px; }
.x9-group-progress > div:not(.x9-group-progress__track) { display: grid; }
.x9-group-progress strong { font-size: 1.25rem; }
.x9-group-progress span { color: var(--x9-text-soft); font-size: .8rem; }
.x9-group-progress__track { height: 10px; border-radius: var(--x9-radius-pill); background: var(--x9-line); overflow: hidden; }
.x9-group-progress__track span { display: block; height: 100%; border-radius: inherit; background: var(--x9-brand); }
.x9-group-status-board { display: grid; grid-template-columns: repeat(4,1fr); border-block: 1px solid var(--x9-line); margin: 18px 0 30px; }
.x9-group-status-board > div { min-width: 0; padding: 18px 20px; border-right: 1px solid var(--x9-line); }
.x9-group-status-board > div:last-child { border-right: 0; }
.x9-group-status-board span, .x9-group-status-board small, .x9-group-status-board strong { display: block; }
.x9-group-status-board span { color: var(--x9-text-soft); font-size: .78rem; font-weight: 500; }
.x9-group-status-board strong { margin: 4px 0; font-size: clamp(1.2rem,2.4vw,1.7rem); }
.x9-group-status-board small { color: var(--x9-text-soft); }
.x9-group-share { display: grid; grid-template-columns: minmax(0,1fr) minmax(300px,.8fr); gap: 26px; align-items: center; border: 1px solid var(--x9-line); border-radius: var(--x9-radius-lg); padding: clamp(20px,3.5vw,32px); background: #fff; }
.x9-group-share h2 { margin: 5px 0; }
.x9-group-share p { color: var(--x9-text-soft); }
.x9-group-detail-grid { margin-top: 22px; }
.x9-group-members { display: grid; }
.x9-group-members > div { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--x9-line); }
.x9-group-members > div:last-child { border-bottom: 0; }
.x9-group-members strong, .x9-group-members small { display: block; }
.x9-group-members small { color: var(--x9-text-soft); }
.x9-group-avatar { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; background: var(--x9-brand-tint); color: var(--x9-brand-deep); font-weight: 600; }
.x9-group-cancel { display: flex; justify-content: space-between; gap: 24px; align-items: center; margin-top: 28px; border-top: 1px solid var(--x9-line); padding-top: 20px; }
.x9-group-cancel p { margin: 3px 0; color: var(--x9-text-soft); }
@media(max-width:960px){
    .x9-group-hero__inner, .x9-group-order, .x9-group-campaign, .x9-group-share { grid-template-columns: 1fr; }
    .x9-group-checkout { position: static; }
    .x9-group-campaign__products { grid-template-columns: repeat(4,90px); }
    .x9-group-campaign__products img { width: 90px; height: 90px; }
    .x9-group-campaign .x9-button { justify-self: start; }
    .x9-group-status-board { grid-template-columns: repeat(2,1fr); }
    .x9-group-status-board > div:nth-child(2) { border-right: 0; }
    .x9-group-status-board > div:nth-child(-n+2) { border-bottom: 1px solid var(--x9-line); }
}
@media(max-width:620px){
    .x9-group-hero__inner { padding-block: 32px; }
    .x9-group-hero h1 { font-size: 2rem; }
    .x9-group-ledger__row { grid-template-columns: 1fr auto; }
    .x9-group-ledger__count { grid-column: 1; }
    .x9-group-campaign__products { grid-template-columns: repeat(2,90px); }
    .x9-group-product { grid-template-columns: 64px minmax(0,1fr) 70px; }
    .x9-group-product img { width: 64px; height: 64px; }
    .x9-group-product label { display: none; }
    .x9-invite-head { grid-template-columns: 1fr; }
    .x9-group-clock { min-width: 0; }
    .x9-group-progress { grid-template-columns: 1fr 1fr; }
    .x9-group-progress__track { grid-column: 1/-1; grid-row: 2; }
    .x9-group-status-board { grid-template-columns: 1fr; }
    .x9-group-status-board > div { border-right: 0; border-bottom: 1px solid var(--x9-line); }
    .x9-group-status-board > div:last-child { border-bottom: 0; }
    .x9-group-cancel { align-items: stretch; flex-direction: column; }
    .x9-copy-row { align-items: stretch; flex-direction: column; }
}