.of-title {
      margin: 4px 0 18px;
      font-family: var(--font-display);
      font-size: 28px;
      font-weight: 700;
      letter-spacing: -0.02em;
      line-height: 1.1;
      color: var(--ink);
    }
    .of-tabs {
      display: flex;
      gap: 32px;
      margin: 0 0 18px;
      border-bottom: 1px solid color-mix(in srgb, var(--palette-ink) 8%, transparent);
    }
    .of-tabs button {
      appearance: none;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin: 0;
      padding: 0 4px 12px;
      border: 0;
      border-bottom: 2px solid transparent;
      background: transparent;
      font-family: var(--font-body);
      font-size: 15px;
      font-weight: 600;
      color: var(--palette-body);
      cursor: pointer;
    }
    .of-count {
      display: inline-grid;
      place-items: center;
      width: 20px;
      height: 20px;
      padding: 0;
      border-radius: var(--radius-surface, 14px);
      background: color-mix(in srgb, var(--palette-ink) 8%, transparent);
      color: var(--palette-body);
      font-size: 12px;
      font-weight: 700;
      line-height: 1;
    }
    .of-tabs button.is-on {
      color: var(--ink);
      border-bottom-color: var(--ink);
    }
    .of-tabs button.is-on .of-count {
      background: var(--kelly-2);
      color: var(--palette-white);
    }
    .of-card {
      padding: 8px 22px;
      border: 1px solid color-mix(in srgb, var(--palette-ink) 8%, transparent);
      border-radius: var(--radius-surface, 14px);
      background: var(--palette-sand);
      box-shadow: 0 14px 44px color-mix(in srgb, var(--palette-shadow) 8%, transparent);
    }
    .of-card[hidden] { display: none; }
    .of-row {
      display: grid;
      grid-template-columns: 56px minmax(0, 1.8fr) minmax(170px, 0.85fr) 280px;
      align-items: center;
      gap: 18px;
      margin: 0 -18px;
      padding: 16px 22px;
      border-bottom: 1px solid color-mix(in srgb, var(--palette-ink) 8%, transparent);
      border-radius: var(--radius-surface, 14px);
    }
    .of-row:last-child { border-bottom: 0; }
    .of-row > * { min-width: 0; }
    .of-shot {
      width: 56px;
      height: 56px;
      object-fit: contain;
      border-radius: var(--radius-surface, 14px);
      background: var(--palette-white);
      border: 1px solid color-mix(in srgb, var(--palette-ink) 6%, transparent);
    }
    .of-name {
      margin: 0;
      overflow: hidden;
      font-size: 15px;
      font-weight: 600;
      line-height: 1.35;
      color: var(--ink);
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .of-list {
      margin: 4px 0 0;
      font-size: 13px;
      color: var(--palette-body);
    }
    .of-amt {
      margin: 0;
      font-size: 15px;
      color: var(--ink);
    }
    .of-amt b { font-weight: 700; }
    .of-wait,
    .of-exp {
      margin: 4px 0 0;
      font-size: 13px;
      color: var(--palette-body);
    }
    .of-exp.is-soon { color: var(--palette-body); }
    .of-side {
      position: relative;
      padding-right: 40px;
      text-align: right;
    }
    .of-status {
      margin: 0 0 4px;
      font-size: 13px;
      color: var(--palette-body);
    }
    .of-details {
      appearance: none;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 0;
      border: 0;
      background: transparent;
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 600;
      color: var(--kelly-2);
      cursor: pointer;
    }
    .of-chev {
      position: absolute;
      right: 0;
      top: 50%;
      display: grid;
      place-items: center;
      width: 32px;
      height: 32px;
      border: 1px solid var(--palette-line);
      border-radius: var(--radius-surface, 14px);
      background: var(--palette-white);
      color: var(--palette-body);
      box-sizing: border-box;
      transform: translateY(-50%);
    }
    .of-chev svg {
      display: block;
      width: 14px;
      height: 14px;
      transition: transform 0.15s ease;
    }
    .of-details:hover .of-chev {
      background: var(--palette-sand);
      border-color: var(--palette-card-rule);
    }
    .of-details.is-open .of-chev svg { transform: rotate(180deg); }
    .of-more {
      grid-column: 1 / -1;
      margin: 4px 0 0;
      padding: 12px 16px;
      border-radius: var(--radius-surface, 14px);
      background: var(--tone-kelly);
      font-size: 14px;
      font-weight: 600;
      line-height: 1.45;
      text-align: center;
      color: var(--ink);
    }
    .of-more[hidden] { display: none; }
    .of-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
    }
    .of-btn {
      appearance: none;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      height: 36px;
      margin: 0;
      padding: 0 14px;
      border: 1px solid transparent;
      border-radius: var(--radius-surface, 14px);
      background: var(--kelly-2);
      color: var(--palette-white);
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 600;
      line-height: 1;
      white-space: nowrap;
      cursor: pointer;
    }
    .of-btn svg { width: 16px; height: 16px; display: block; flex: 0 0 auto; }
    .of-btn:hover { background: var(--palette-kelly); }
    .of-btn.is-stop {
      background: var(--palette-white);
      border-color: var(--palette-unicorn);
      color: var(--palette-body);
    }
    .of-btn.is-stop:hover { background: var(--tone-unicorn); }
    @media (max-width: 800px) {
      .of-tabs { gap: 10px; }
      .of-tabs button { white-space: nowrap; padding-left: 0; padding-right: 0; }
      .of-row {
        grid-template-columns: 56px minmax(0, 1fr);
        gap: 6px 14px;
        align-items: start;
      }
      .of-shot { grid-row: span 4; }
      .of-row > :not(.of-shot):not(.of-more) { grid-column: 2; }
      .of-actions { justify-content: flex-start; flex-wrap: wrap; }
      .of-more { grid-column: 1 / -1; }
    }
  
.account-offers .of-row{grid-template-columns:60px minmax(0,1fr) minmax(140px,1fr) auto}.account-offers .of-card{min-width:0}.account-offers .of-name{overflow-wrap:anywhere}.account-offers .of-actions{flex-wrap:wrap}.account-offers .offer-feedback{font-size:14px;line-height:1.6;padding:16px;background:var(--tone-kelly);border-radius:var(--radius-surface, 14px)}.account-offers .offer-feedback:empty{display:none}@media(max-width:800px){.account-offers .of-row{grid-template-columns:48px minmax(0,1fr)}.account-offers .of-actions{grid-column:2}.account-offers .of-row>div:nth-of-type(2){grid-column:2}.account-offers .of-shot{width:40px}}
.intake-band{padding:24px;background:var(--tone-kelly);border-radius:var(--radius-surface, 14px);margin:24px 0}.intake-band h2,.intake-panel h2{font-size:23px;margin-top:0}.intake-band p,.intake-detail p{line-height:1.6}.intake-panel{margin:28px 0}.intake-open{font:inherit;font-weight:700;color:var(--palette-body);background:none;border:0;padding:4px;cursor:pointer;text-decoration:underline;text-underline-offset:4px}.intake-detail{padding:24px;border:1px solid var(--palette-line);border-radius:var(--radius-surface, 14px);background:var(--palette-sand)}.intake-steps{display:grid;grid-template-columns:repeat(4,1fr);list-style:none;padding:0;gap:12px;margin:24px 0}.intake-steps li{padding:12px 0;border-top:3px solid var(--palette-line);font-size:13px;line-height:1.5}.intake-steps li.is-current{border-color:var(--palette-kelly);font-weight:700}.intake-counts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.intake-counts>div{background:var(--palette-sand);padding:18px;border-radius:var(--radius-surface, 14px)}.intake-counts span,.intake-counts strong{display:block}.intake-counts strong{font-size:30px;margin-top:12px}@media(max-width:700px){.intake-steps{grid-template-columns:1fr 1fr}.intake-counts{gap:6px}.intake-counts>div{padding:12px}.intake-counts span{font-size:12px}}

.offer-group{margin-top:32px}.offer-group>h2{font-size:22px;margin:0 0 16px}.account-offers [hidden]{display:none!important}

/* Only the bottle image and name are interactive; the offer row stays still. */
.account-offers .of-open {
  display:inline;max-width:100%;padding:0;border:0;background:none;color:inherit;
  font:inherit;line-height:inherit;text-align:left;cursor:pointer;white-space:inherit;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;
  text-decoration-color:color-mix(in srgb,var(--palette-ink) 35%,transparent);
}
.account-offers .of-open:is(:hover,:focus-visible) { color:var(--palette-slate);text-decoration-color:currentColor; }
.account-offers .of-image-link { display:block;width:fit-content;line-height:0;border-radius:var(--radius-surface); }
.account-offers .of-image-link .of-shot { display:block; }
.account-offers .of-image-link:is(:hover,:focus-visible) .of-shot { border-color:var(--palette-slate); }
.account-offers :is(.of-open,.of-image-link):focus-visible { outline:2px solid var(--palette-ink);outline-offset:4px;border-radius:var(--radius-surface); }
@media(max-width:800px) { .account-offers .of-row>.of-image-link { grid-column:1;grid-row:span 3; } }

/* Update stays dark and stationary through hover, focus and press. */
.account-offers .of-btn[data-offer-action='Update'] {
  background:var(--palette-inverse);color:var(--palette-brand-white);border-color:var(--palette-inverse);
  transition:background-color 140ms ease,border-color 140ms ease;
}
.account-offers .of-btn[data-offer-action='Update']:not(:disabled):hover {
  background:color-mix(in srgb,var(--palette-inverse) 85%,var(--palette-brand-white));
  border-color:color-mix(in srgb,var(--palette-inverse) 85%,var(--palette-brand-white));
}
.account-offers .of-btn[data-offer-action='Update']:focus-visible { outline:2px solid var(--palette-ink);outline-offset:3px; }
.account-offers .of-btn[data-offer-action='Update']:not(:disabled):active { background:var(--palette-inverse);border-color:var(--palette-inverse); }
@media(prefers-reduced-motion:reduce) { .account-offers .of-btn[data-offer-action='Update'] { transition:none; } }