/* ==========================================================================
   ToolSurf "Build your own plan" + "Add more tools" cross-sell (2026-11-12)
   Loaded by kei/ts-plan-builder.inc.php on /cart and /cart/index/product/id/N/c/ only.
   Colours come from the ts-2026.css tokens (light on body.toolsurf-vertical-nav, dark under
   html.ts-account-dark), so light and dark follow the member's theme switch.
   Every selector starts with .ts-pb, or names a card/page class plus .ts-pb, so nothing here can
   restyle an existing cart control.
   ========================================================================== */

.ts-pb-intro, .ts-pb-dock, .ts-pb-modal-wrap, .ts-pb-toast, .ts-pb-product {
  --pb-surface: var(--ts-surface, #ffffff);
  --pb-surface-2: var(--ts-surface-2, #fbfaf7);
  --pb-bg-alt: var(--ts-bg-alt, #f3f1eb);
  --pb-ink: var(--ts-ink, #171412);
  --pb-ink-2: var(--ts-ink-2, #4a423d);
  --pb-muted: var(--ts-muted, #6f665f);
  --pb-line: var(--ts-border, #e6e1d8);
  --pb-line-strong: var(--ts-border-strong, #d9d2c6);
  --pb-accent: var(--ts-accent, #c6613f);
  --pb-accent-hover: var(--ts-accent-hover, #ad532f);
  --pb-accent-soft: var(--ts-accent-soft, #fbeee6);
  --pb-accent-ink: var(--ts-accent-ink, #9f4f36);
  --pb-plate: var(--ts-logo-plate, #ffffff);
  --pb-danger: var(--ts-danger, #b42318);
  --pb-danger-soft: var(--ts-danger-soft, #fdecea);
  --pb-go: #1f7a45;
  --pb-go-hover: #186338;
  --pb-shadow: var(--ts-shadow-lift, 0 14px 34px rgba(23, 20, 18, .10));
  --pb-sans: var(--ts-sans, "Anthropic Sans", system-ui, -apple-system, "Segoe UI", sans-serif);
  font-family: var(--pb-sans);
}
html.ts-account-dark .ts-pb-intro, html.ts-account-dark .ts-pb-dock, html.ts-account-dark .ts-pb-modal-wrap,
html.ts-account-dark .ts-pb-toast, html.ts-account-dark .ts-pb-product {
  --pb-go: #23874d;
  --pb-go-hover: #2a9a59;
}

/* Shared button reset: the theme styles bare buttons (uppercase, full width, forced colours). */
.ts-pb-intro button, .ts-pb-dock button, .ts-pb-modal-wrap button, .ts-pb-toast button,
.ts-pb-product button, body .ts-card button.ts-pb-toggle {
  font-family: var(--pb-sans, inherit) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  width: auto;
  margin: 0;
  box-shadow: none;
  cursor: pointer;
}
.ts-pb-sr {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important;
  margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; border: 0 !important;
}

/* --------------------------------------------------------------------------
   1. Intro strip on the catalog
   -------------------------------------------------------------------------- */
.ts-pb-intro {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin: 0 0 18px;
  padding: 18px 20px;
  background: var(--pb-surface);
  border: 1px solid var(--pb-line);
  border-left: 4px solid var(--pb-accent);
  border-radius: 14px;
  color: var(--pb-ink);
}
.ts-pb-intro-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--pb-accent-soft); color: var(--pb-accent);
}
.ts-pb-intro-icon svg { width: 24px; height: 24px; display: block; }
.ts-pb-intro .ts-pb-kicker {
  display: inline-block; margin: 0 0 4px; padding: 2px 8px; border-radius: 999px;
  background: var(--pb-accent); color: #fff; font-size: 11px; font-weight: 650; line-height: 1.5; letter-spacing: .02em;
}
.ts-pb-intro h2 {
  margin: 0 0 2px !important; padding: 0 !important; border: 0 !important;
  font-family: var(--pb-sans) !important; font-size: 17px !important; font-weight: 650 !important;
  line-height: 1.3 !important; color: var(--pb-ink) !important; text-transform: none !important; letter-spacing: 0 !important;
}
.ts-pb-intro p.ts-pb-intro-text { margin: 0 !important; font-size: 13.5px; line-height: 1.5; color: var(--pb-muted) !important; }
.ts-pb-steps {
  display: flex; gap: 8px; margin: 0 !important; padding: 0 !important; list-style: none;
}
.ts-pb-steps li {
  display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 12px;
  border-radius: 10px; background: var(--pb-surface-2); border: 1px solid var(--pb-line);
  font-size: 12.5px; line-height: 1.3; color: var(--pb-ink-2); white-space: nowrap;
}
.ts-pb-steps li span {
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--pb-ink); color: var(--pb-surface); font-size: 11px; font-weight: 700;
}
/* Multi-tool discount ladder (the live Bundle Discount rules) */
.ts-pb-ladder { display: flex; gap: 8px; margin: 0 !important; padding: 0 !important; list-style: none; }
.ts-pb-ladder li {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-width: 78px; margin: 0; padding: 8px 10px; border-radius: 10px;
  background: var(--pb-surface-2); border: 1px solid var(--pb-line); text-align: center;
}
.ts-pb-ladder li b { font-size: 12px; font-weight: 600; color: var(--pb-muted); line-height: 1.3; white-space: nowrap; }
.ts-pb-ladder li span { font-size: 16px; font-weight: 700; color: var(--pb-accent-ink); line-height: 1.2; white-space: nowrap; }
html.ts-account-dark .ts-pb-ladder li span { color: var(--ts-accent-ink, #f0a184); }
.ts-pb-ladder li:last-child { background: var(--pb-accent-soft); border-color: var(--ts-accent-soft-2, #f6e0d2); }
@media (max-width: 1180px) {
  .ts-pb-steps { display: none; }
  .ts-pb-intro { grid-template-columns: auto minmax(0, 1fr); }
  .ts-pb-ladder { grid-column: 1 / -1; }
  .ts-pb-ladder li { flex: 1 1 0; min-width: 0; }
}
@media (max-width: 768px) {
  .ts-pb-intro { gap: 12px; padding: 14px; margin-bottom: 14px; }
  .ts-pb-intro-icon { width: 38px; height: 38px; border-radius: 10px; }
  .ts-pb-intro h2 { font-size: 16px !important; }
  .ts-pb-intro p.ts-pb-intro-text { font-size: 13px; }
  .ts-pb-ladder { gap: 6px; }
  .ts-pb-ladder li { padding: 6px 4px; }
  .ts-pb-ladder li b { font-size: 11px; }
  .ts-pb-ladder li span { font-size: 14px; }
}

/* Discount tiers inside the compact catalog header (cart-overhaul.js [data-ts-shop-offer]) */
.ts-shop-offer.ts-pb-offer { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.ts-pb-offer p.ts-shop-sub b { color: var(--ts-ink, #171412); font-weight: 650; }
.ts-pb-tiers { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 !important; padding: 0 !important; list-style: none; }
.ts-pb-tiers li {
  display: inline-flex; align-items: baseline; gap: 5px; margin: 0; padding: 3px 10px; border-radius: 999px;
  background: var(--ts-surface, #fff); border: 1px solid var(--ts-border, #e6e1d8);
  font-size: 12.5px; line-height: 1.5; white-space: nowrap;
}
.ts-pb-tiers li span { color: var(--ts-muted, #6f665f); }
.ts-pb-tiers li b { color: var(--ts-accent-ink, #9f4f36); font-weight: 700; }
html.ts-account-dark .ts-pb-tiers li b { color: var(--ts-accent-ink, #f0a184); }
.ts-pb-tiers li:last-child { background: var(--ts-accent-soft, #fbeee6); border-color: var(--ts-accent-soft-2, #f6e0d2); }
@media (max-width: 768px) {
  .ts-pb-tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
  .ts-pb-tiers li { flex-direction: column; align-items: center; gap: 0; padding: 4px 2px; border-radius: 10px; }
  .ts-pb-tiers li span { font-size: 11px; }
  .ts-pb-tiers li b { font-size: 13px; }
}

/* --------------------------------------------------------------------------
   2. "Add to plan" toggle on every eligible card (and its card state)
   -------------------------------------------------------------------------- */
body .ts-card .ts-pb-toggle-row { margin-top: 10px; }
body .ts-card button.ts-pb-toggle,
body .ts-pb-product button.ts-pb-toggle {
  display: flex !important; align-items: center; justify-content: center; gap: 8px;
  width: 100% !important; min-height: 40px; padding: 0 14px !important;
  border-radius: var(--ts-r-md, 10px) !important;
  border: 1px solid var(--ts-accent, #c6613f) !important;
  background: transparent !important;
  color: var(--ts-accent-ink, #9f4f36) !important;
  font-size: 13.5px !important; font-weight: 650 !important; line-height: 1.2 !important;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
html.ts-account-dark body .ts-card button.ts-pb-toggle,
html.ts-account-dark body .ts-pb-product button.ts-pb-toggle { color: var(--ts-accent-ink, #f0a184) !important; }
body .ts-card button.ts-pb-toggle:hover,
body .ts-pb-product button.ts-pb-toggle:hover { background: var(--ts-accent-soft, #fbeee6) !important; }
body .ts-card button.ts-pb-toggle:focus-visible,
body .ts-pb-product button.ts-pb-toggle:focus-visible,
.ts-pb-dock button:focus-visible, .ts-pb-dock a:focus-visible,
.ts-pb-modal-wrap button:focus-visible, .ts-pb-modal-wrap a:focus-visible, .ts-pb-modal-wrap input:focus-visible + .ts-pb-check-ui {
  outline: 2px solid var(--ts-accent, #c6613f) !important; outline-offset: 2px !important;
}
.ts-pb-toggle .ts-pb-toggle-icon { width: 16px; height: 16px; flex: none; display: block; }
body .ts-card button.ts-pb-toggle[aria-pressed="true"],
body .ts-pb-product button.ts-pb-toggle[aria-pressed="true"] {
  background: var(--ts-accent, #c6613f) !important; border-color: var(--ts-accent, #c6613f) !important; color: #fff !important;
}
body .ts-card button.ts-pb-toggle[aria-pressed="true"]:hover,
body .ts-pb-product button.ts-pb-toggle[aria-pressed="true"]:hover {
  background: var(--ts-accent-hover, #ad532f) !important; border-color: var(--ts-accent-hover, #ad532f) !important;
}
/* Dark theme's accent (#d9754f) is too light under white text: use the deep accent for the pressed state. */
html.ts-account-dark body .ts-card button.ts-pb-toggle[aria-pressed="true"],
html.ts-account-dark body .ts-pb-product button.ts-pb-toggle[aria-pressed="true"] {
  background: var(--ts-accent-deep, #c6613f) !important; border-color: var(--ts-accent-deep, #c6613f) !important; color: #fff !important;
}
html.ts-account-dark body .ts-card button.ts-pb-toggle[aria-pressed="true"]:hover,
html.ts-account-dark body .ts-pb-product button.ts-pb-toggle[aria-pressed="true"]:hover {
  background: #b0553a !important; border-color: #b0553a !important;
}
body .ts-card button.ts-pb-toggle[aria-busy="true"],
body .ts-pb-product button.ts-pb-toggle[aria-busy="true"] { opacity: .65; cursor: progress; }
body .ts-card button.ts-pb-toggle:disabled,
body .ts-pb-product button.ts-pb-toggle:disabled {
  border-color: var(--ts-border, #e6e1d8) !important; background: var(--ts-bg-alt, #f3f1eb) !important;
  color: var(--ts-muted, #6f665f) !important; cursor: not-allowed; opacity: 1;
}
body .ts-card .ts-pb-note {
  margin: 10px 0 0; font-size: 12px; line-height: 1.4; color: var(--ts-muted, #6f665f); text-align: center;
}
/* A card whose tool is in the plan: accent outline and a corner tick. ts-2026.css loads after this sheet and
   sets border/shadow on .ts-card:hover with !important, so these selectors carry one more element to win. */
html body.page-cart .ts-card.ts-pb-in,
html body.page-cart .ts-card.ts-pb-in:hover,
html.ts-account-dark body.page-cart .ts-card.ts-pb-in,
html.ts-account-dark body.page-cart .ts-card.ts-pb-in:hover {
  border-color: var(--ts-accent, #c6613f) !important;
  box-shadow: 0 0 0 1px var(--ts-accent, #c6613f) !important;
}
body .ts-card .ts-pb-tick {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 26px; height: 26px; border-radius: 50%;
  display: none; place-items: center;
  background: var(--ts-accent, #c6613f); color: #fff;
  box-shadow: 0 2px 6px rgba(23, 20, 18, .18);
}
body .ts-card .ts-pb-tick svg { width: 15px; height: 15px; display: block; }
body .ts-card.ts-pb-in .ts-pb-tick { display: grid; }
body .ts-card.ts-pb-in .ts-badge-save { visibility: hidden; }

/* --------------------------------------------------------------------------
   3. Plan dock: the bar pinned to the bottom + the review sheet above it
   -------------------------------------------------------------------------- */
.ts-pb-dock {
  position: fixed; z-index: 1040;
  left: var(--ts-pb-left, 16px); width: var(--ts-pb-width, calc(100vw - 32px)); bottom: 16px;
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;
  transform: translateY(0); transition: transform .22s ease, opacity .22s ease;
}
.ts-pb-dock[hidden] { display: none !important; }
.ts-pb-dock.ts-pb-dock-enter { transform: translateY(16px); opacity: 0; }
.ts-pb-dock > * { pointer-events: auto; }
.ts-pb-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 10px 10px 12px;
  background: var(--pb-surface); color: var(--pb-ink);
  border: 1px solid var(--pb-line-strong); border-radius: 16px;
  box-shadow: var(--pb-shadow);
}
.ts-pb-dock button.ts-pb-summary {
  flex: 1 1 auto; min-width: 0;
  display: flex !important; align-items: center; gap: 12px;
  padding: 4px 6px !important; border: 0 !important; border-radius: 10px !important;
  background: transparent !important; color: var(--pb-ink) !important; text-align: left;
}
.ts-pb-dock button.ts-pb-summary:hover { background: var(--pb-surface-2) !important; }
.ts-pb-logos { display: flex; flex: none; }
.ts-pb-logos img, .ts-pb-logos .ts-pb-more, .ts-pb-logos .ts-pb-noimg {
  width: 48px; height: 32px; border-radius: 8px; object-fit: contain;
  background: var(--pb-plate); border: 2px solid var(--pb-surface);
  box-shadow: 0 0 0 1px var(--pb-line); padding: 3px 4px; box-sizing: border-box;
}
.ts-pb-logos > * + * { margin-left: -8px; }
.ts-pb-logos .ts-pb-more {
  width: 38px; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--pb-ink-2); background: var(--pb-surface-2);
}
.ts-pb-sum-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ts-pb-sum-text b { font-size: 14.5px; font-weight: 650; color: var(--pb-ink); white-space: nowrap; }
.ts-pb-sum-text b em {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; vertical-align: 1px;
  background: var(--pb-go); color: #fff; font-style: normal; font-size: 11.5px; font-weight: 650;
}
.ts-pb-sum-text span { font-size: 13px; color: var(--pb-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-pb-sum-text span strong { color: var(--pb-ink); font-weight: 650; }
.ts-pb-sum-text span s, .ts-pb-modal-total s { color: var(--pb-muted); font-weight: 400; text-decoration-thickness: 1px; }
.ts-pb-nudge {
  flex: 0 1 auto; min-width: 0; padding: 6px 10px; border-radius: 999px;
  background: var(--pb-accent-soft); color: var(--pb-accent-ink);
  font-size: 12.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.ts-account-dark .ts-pb-nudge { color: var(--ts-accent-ink, #f0a184); }
.ts-pb-nudge[hidden], .ts-pb-dock.ts-pb-open .ts-pb-nudge { display: none !important; }
.ts-pb-sheet:focus { outline: none; }
.ts-pb-narrow { display: none; }
@media (max-width: 480px) {
  .ts-pb-wide { display: none; }
  .ts-pb-narrow { display: inline; }
  .ts-pb-dock .ts-pb-logos { display: none; }
  .ts-pb-dock button.ts-pb-summary { padding: 2px 4px !important; }
}
@media (max-width: 1100px) { .ts-pb-nudge { display: none !important; } }
.ts-pb-chev { width: 18px; height: 18px; flex: none; margin-left: auto; color: var(--pb-muted); transition: transform .2s ease; }
.ts-pb-dock.ts-pb-open .ts-pb-chev { transform: rotate(180deg); }

/* Primary "go" control (Checkout / Continue): green like Proceed on the payment step. */
.ts-pb-dock a.ts-pb-go, .ts-pb-dock button.ts-pb-go,
.ts-pb-modal-wrap button.ts-pb-go {
  flex: none;
  display: inline-flex !important; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 22px !important;
  border: 0 !important; border-radius: 12px !important;
  background: var(--pb-go) !important; color: #fff !important;
  font-size: 15px !important; font-weight: 650 !important; line-height: 1 !important;
  text-decoration: none !important; white-space: nowrap;
}
.ts-pb-dock a.ts-pb-go:hover, .ts-pb-dock button.ts-pb-go:hover,
.ts-pb-modal-wrap button.ts-pb-go:hover { background: var(--pb-go-hover) !important; color: #fff !important; }
.ts-pb-go svg { width: 18px; height: 18px; display: block; }
.ts-pb-modal-wrap button.ts-pb-go[aria-busy="true"], .ts-pb-dock .ts-pb-go[aria-busy="true"] { opacity: .7; cursor: progress; }

.ts-pb-sheet {
  align-self: flex-end; width: min(520px, 100%);
  max-height: min(62vh, 560px); overflow: auto; overscroll-behavior: contain;
  background: var(--pb-surface); color: var(--pb-ink);
  border: 1px solid var(--pb-line-strong); border-radius: 16px;
  box-shadow: var(--pb-shadow);
}
.ts-pb-sheet[hidden] { display: none !important; }
.ts-pb-sheet-head {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px 12px; background: var(--pb-surface); border-bottom: 1px solid var(--pb-line);
}
.ts-pb-sheet-head h3 {
  margin: 0 !important; font-family: var(--pb-sans) !important; font-size: 16px !important; font-weight: 650 !important;
  color: var(--pb-ink) !important; text-transform: none !important; letter-spacing: 0 !important;
}
.ts-pb-dock button.ts-pb-x, .ts-pb-modal-wrap button.ts-pb-x {
  display: grid !important; place-items: center; width: 34px; height: 34px; padding: 0 !important; flex: none;
  border: 1px solid var(--pb-line) !important; border-radius: 10px !important;
  background: var(--pb-surface) !important; color: var(--pb-ink-2) !important;
}
.ts-pb-dock button.ts-pb-x:hover, .ts-pb-modal-wrap button.ts-pb-x:hover { background: var(--pb-surface-2) !important; color: var(--pb-ink) !important; }
.ts-pb-x svg { width: 16px; height: 16px; display: block; }
.ts-pb-list { list-style: none; margin: 0 !important; padding: 6px 8px !important; }
.ts-pb-row {
  display: flex; align-items: center; gap: 12px; margin: 0; padding: 8px;
  border-radius: 10px;
}
.ts-pb-row + .ts-pb-row { border-top: 1px solid var(--pb-line); border-radius: 0; }
.ts-pb-row img, .ts-pb-row .ts-pb-noimg {
  width: 52px; height: 32px; flex: none; object-fit: contain; border-radius: 8px;
  background: var(--pb-plate); border: 1px solid var(--pb-line); padding: 3px 5px; box-sizing: border-box;
}
.ts-pb-row-name { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; color: var(--pb-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-pb-row-name small { display: block; font-size: 12px; font-weight: 400; color: var(--pb-muted); }
.ts-pb-row-price { flex: none; font-size: 14px; font-weight: 650; color: var(--pb-ink); font-variant-numeric: tabular-nums; }
.ts-pb-dock button.ts-pb-remove {
  display: grid !important; place-items: center; width: 30px; height: 30px; padding: 0 !important; flex: none;
  border: 0 !important; border-radius: 8px !important; background: transparent !important; color: var(--pb-muted) !important;
}
.ts-pb-dock button.ts-pb-remove:hover { background: var(--pb-danger-soft) !important; color: var(--pb-danger) !important; }
.ts-pb-remove svg { width: 16px; height: 16px; display: block; }
.ts-pb-sheet-foot { padding: 12px 16px 16px; border-top: 1px solid var(--pb-line); background: var(--pb-surface-2); }
.ts-pb-line { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 4px; font-size: 13.5px; color: var(--pb-ink-2); font-variant-numeric: tabular-nums; }
.ts-pb-line-save { color: var(--pb-go); font-weight: 650; }
html.ts-account-dark .ts-pb-line-save { color: var(--ts-success, #6fcf97); }
.ts-pb-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 6px 0 4px; }
.ts-pb-total span { font-size: 14px; font-weight: 600; color: var(--pb-ink); }
.ts-pb-total strong { font-size: 20px; font-weight: 700; color: var(--pb-ink); font-variant-numeric: tabular-nums; }
.ts-pb-nudge-line {
  margin: 8px 0 0 !important; padding: 8px 10px; border-radius: 10px;
  background: var(--pb-accent-soft); color: var(--pb-accent-ink) !important; font-size: 13px; font-weight: 650;
}
html.ts-account-dark .ts-pb-nudge-line { color: var(--ts-accent-ink, #f0a184) !important; }
.ts-pb-fine { margin: 8px 0 0 !important; font-size: 12.5px; line-height: 1.45; color: var(--pb-muted) !important; }
.ts-pb-fine.ts-pb-then { margin: 0 !important; }
.ts-pb-sheet-foot button.ts-pb-quiet { width: 100% !important; margin-top: 12px !important; }
.ts-pb-foot-actions { display: flex; gap: 10px; align-items: center; }
.ts-pb-foot-actions .ts-pb-go { flex: 1 1 auto !important; }
.ts-pb-dock button.ts-pb-quiet, .ts-pb-modal-wrap button.ts-pb-quiet {
  display: inline-flex !important; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 16px !important;
  border: 1px solid var(--pb-line-strong) !important; border-radius: 12px !important;
  background: var(--pb-surface) !important; color: var(--pb-ink) !important;
  font-size: 14px !important; font-weight: 600 !important;
}
.ts-pb-dock button.ts-pb-quiet:hover, .ts-pb-modal-wrap button.ts-pb-quiet:hover { background: var(--pb-surface-2) !important; }

/* Bundle hint (Entertainment / Adobe bundle cheaper than the singles picked) */
.ts-pb-hint {
  margin: 8px 16px 4px; padding: 12px 14px; border-radius: 12px;
  background: var(--pb-accent-soft); border: 1px solid var(--ts-accent-soft-2, #f6e0d2);
  font-size: 13px; line-height: 1.45; color: var(--pb-ink-2);
}
.ts-pb-hint b { color: var(--pb-ink); font-weight: 650; }
.ts-pb-hint-actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.ts-pb-dock button.ts-pb-swap, .ts-pb-modal-wrap button.ts-pb-swap {
  display: inline-flex !important; align-items: center; min-height: 36px; padding: 0 14px !important;
  border: 0 !important; border-radius: 10px !important; background: var(--pb-ink) !important; color: var(--pb-surface) !important;
  font-size: 13px !important; font-weight: 650 !important;
}
.ts-pb-dock button.ts-pb-swap:hover, .ts-pb-modal-wrap button.ts-pb-swap:hover { opacity: .9; }

/* Lift the Support bubble while the plan bar is on screen, hide it while the sheet is open (it would cover
   the sheet), and leave room under the grid so the bar never hides the last row of cards. */
html.ts-pb-bar-on #ts-support-button { bottom: 104px !important; }
html.ts-pb-sheet-open #ts-support-button { visibility: hidden !important; }
html.ts-pb-bar-on .ts-cart-container { padding-bottom: 88px !important; }

@media (max-width: 768px) {
  .ts-pb-dock { left: 0 !important; width: 100% !important; bottom: 0; gap: 0; }
  .ts-pb-bar {
    border-radius: 16px 16px 0 0; border-left: 0; border-right: 0; border-bottom: 0;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .ts-pb-sheet { border-radius: 16px 16px 0 0; max-height: 72vh; border-left: 0; border-right: 0; border-bottom: 0; box-shadow: 0 -10px 30px rgba(0, 0, 0, .18); }
  .ts-pb-dock.ts-pb-open .ts-pb-bar { border-radius: 0; }
  .ts-pb-logos img:nth-child(n+3), .ts-pb-logos .ts-pb-more { display: none; }
  .ts-pb-logos img, .ts-pb-logos .ts-pb-more { width: 30px; height: 30px; }
  .ts-pb-chev { display: none; }
  .ts-pb-dock a.ts-pb-go, .ts-pb-dock button.ts-pb-go { min-height: 44px; padding: 0 16px !important; font-size: 14.5px !important; }
  html.ts-pb-bar-on #ts-support-button { bottom: 92px !important; right: 12px !important; }
  html.ts-pb-bar-on body.page-cart { padding-bottom: 84px !important; }
}

/* --------------------------------------------------------------------------
   4. Toast (errors and confirmations), above the dock
   -------------------------------------------------------------------------- */
.ts-pb-toast {
  position: fixed; z-index: 2147483200; left: 50%; bottom: 96px; transform: translateX(-50%);
  max-width: min(520px, calc(100vw - 32px));
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: 12px;
  background: var(--pb-ink); color: var(--pb-surface);
  box-shadow: var(--pb-shadow); font-size: 13.5px; line-height: 1.45;
}
.ts-pb-toast[hidden] { display: none !important; }
.ts-pb-toast.ts-pb-toast-error { background: var(--pb-danger); color: #fff; }
@media (max-width: 768px) { .ts-pb-toast { bottom: 152px; } }   /* clear of the lifted Support bubble */
.ts-pb-toast a { color: inherit !important; text-decoration: underline !important; font-weight: 650; }

/* --------------------------------------------------------------------------
   5. Cross-sell dialog ("Add more tools to your order?")
   -------------------------------------------------------------------------- */
.ts-pb-modal-wrap {
  position: fixed; inset: 0; z-index: 2147483100;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(20, 17, 16, .55);
  animation: tsPbFade .16s ease-out;
}
.ts-pb-modal-wrap[hidden] { display: none !important; }
@keyframes tsPbFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tsPbRise { from { transform: translateY(14px); opacity: .6; } to { transform: none; opacity: 1; } }
.ts-pb-modal {
  position: relative; width: min(540px, 100%); max-height: calc(100vh - 32px);
  display: flex; flex-direction: column;
  background: var(--pb-surface); color: var(--pb-ink);
  border: 1px solid var(--pb-line); border-radius: 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
  animation: tsPbRise .2s ease-out;
}
.ts-pb-modal-head { padding: 20px 20px 4px; display: flex; gap: 12px; align-items: flex-start; }
.ts-pb-modal-head > div { flex: 1 1 auto; min-width: 0; }
.ts-pb-modal-head .ts-pb-eyebrow { margin: 0 0 4px !important; font-size: 12px; font-weight: 650; color: var(--pb-accent-ink) !important; letter-spacing: .02em; }
html.ts-account-dark .ts-pb-modal-head .ts-pb-eyebrow { color: var(--ts-accent-ink, #f0a184) !important; }
.ts-pb-modal-head h2 {
  margin: 0 0 6px !important; padding: 0 !important; border: 0 !important;
  font-family: var(--pb-sans) !important; font-size: 19px !important; font-weight: 650 !important; line-height: 1.3 !important;
  color: var(--pb-ink) !important; text-transform: none !important; letter-spacing: 0 !important;
}
.ts-pb-modal-head p.ts-pb-sub { margin: 0 !important; font-size: 13.5px; line-height: 1.5; color: var(--pb-muted) !important; }
.ts-pb-modal-body { padding: 12px 20px 4px; overflow: auto; overscroll-behavior: contain; }
.ts-pb-main {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px;
  background: var(--pb-surface-2); border: 1px solid var(--pb-line);
}
.ts-pb-main img, .ts-pb-main .ts-pb-noimg, .ts-pb-opt img, .ts-pb-opt .ts-pb-noimg {
  width: 56px; height: 34px; flex: none; object-fit: contain; border-radius: 8px;
  background: var(--pb-plate); border: 1px solid var(--pb-line); padding: 3px 5px; box-sizing: border-box;
}
.ts-pb-main-name { flex: 1 1 auto; min-width: 0; font-size: 14.5px; font-weight: 650; }
.ts-pb-main-name small { display: block; font-size: 12px; font-weight: 400; color: var(--pb-muted); }
.ts-pb-main-price { flex: none; font-size: 14.5px; font-weight: 650; font-variant-numeric: tabular-nums; }
.ts-pb-already { margin: 8px 2px 0 !important; font-size: 12.5px; line-height: 1.45; color: var(--pb-muted) !important; }
.ts-pb-already b { color: var(--pb-ink-2); font-weight: 600; }
.ts-pb-opts-title { margin: 16px 2px 8px !important; font-size: 12.5px !important; font-weight: 650 !important; color: var(--pb-ink-2) !important; text-transform: none !important; letter-spacing: 0 !important; }
.ts-pb-opts { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; gap: 8px; }
.ts-pb-opts li { margin: 0; padding: 0; }
.ts-pb-opt {
  position: relative; display: flex; align-items: center; gap: 12px; margin: 0 !important; padding: 10px 12px;
  border: 1px solid var(--pb-line); border-radius: 12px; background: var(--pb-surface);
  cursor: pointer; transition: border-color .15s ease, background .15s ease;
  font-weight: 400 !important; color: var(--pb-ink) !important;
}
.ts-pb-opt:hover { border-color: var(--pb-line-strong); background: var(--pb-surface-2); }
.ts-pb-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.ts-pb-check-ui {
  width: 22px; height: 22px; flex: none; border-radius: 7px; display: grid; place-items: center;
  border: 1.5px solid var(--pb-line-strong); background: var(--pb-surface); color: transparent;
  transition: background .15s ease, border-color .15s ease;
}
.ts-pb-check-ui svg { width: 14px; height: 14px; display: block; }
.ts-pb-opt input:checked + .ts-pb-check-ui { background: var(--pb-accent); border-color: var(--pb-accent); color: #fff; }
.ts-pb-opt:has(input:checked) { border-color: var(--pb-accent); background: var(--pb-accent-soft); }
.ts-pb-opt-name { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; color: var(--pb-ink); }
.ts-pb-opt-name small { display: block; font-size: 12px; font-weight: 400; color: var(--pb-muted); }
.ts-pb-opt-price { flex: none; font-size: 14px; font-weight: 650; color: var(--pb-ink); font-variant-numeric: tabular-nums; }
.ts-pb-modal .ts-pb-hint { margin: 14px 0 0; }
.ts-pb-modal-foot { padding: 14px 20px 18px; border-top: 1px solid var(--pb-line); margin-top: 14px; }
.ts-pb-modal-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
.ts-pb-modal-total span { font-size: 13.5px; color: var(--pb-ink-2); }
.ts-pb-modal-total strong { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ts-pb-modal-foot .ts-pb-go { width: 100% !important; }
.ts-pb-modal-error {
  margin: 0 0 10px !important; padding: 10px 12px; border-radius: 10px;
  background: var(--pb-danger-soft); color: var(--pb-danger) !important; font-size: 13px; line-height: 1.45;
}
.ts-pb-modal-error[hidden] { display: none !important; }
.ts-pb-modal-wrap button.ts-pb-text {
  display: block !important; width: 100% !important; margin-top: 8px !important; padding: 8px !important;
  border: 0 !important; background: transparent !important; color: var(--pb-ink-2) !important;
  font-size: 13.5px !important; font-weight: 600 !important; text-decoration: underline; text-underline-offset: 3px;
}
.ts-pb-modal-wrap button.ts-pb-text:hover { color: var(--pb-ink) !important; }
@media (max-width: 600px) {
  .ts-pb-modal-wrap { align-items: flex-end; padding: 0; }
  .ts-pb-modal { width: 100%; max-height: 92vh; border-radius: 18px 18px 0 0; border-bottom: 0; }
  .ts-pb-modal-head { padding: 18px 16px 4px; }
  .ts-pb-modal-body { padding: 10px 16px 4px; }
  .ts-pb-modal-foot { padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); }
  .ts-pb-modal-head h2 { font-size: 17.5px !important; }
}

/* --------------------------------------------------------------------------
   6. Product page: "Add to plan" under Buy now
   -------------------------------------------------------------------------- */
.ts-pb-product { margin-top: 10px; }
.ts-pb-product p { margin: 8px 0 0 !important; font-size: 12.5px; color: var(--pb-muted) !important; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .ts-pb-dock, .ts-pb-modal-wrap, .ts-pb-modal, .ts-pb-chev { transition: none !important; animation: none !important; }
}