/* Bundle Kit — storefront block styles. Mirrors the admin preview so the
   merchant sees the same thing the buyer sees. CSS vars expose colors
   that the theme block JS sets from bundle.style.colors. */

.sb-root {
  font-family: var(--sb-font, inherit);
  box-sizing: border-box;
  --sb-primary: #1A1A1A;
  --sb-cards-bg: #FFFFFF;
  --sb-selected-bg: #F5F5F5;
  --sb-border: #E0E0E0;
  --sb-block-title: #1A1A1A;
  --sb-title: #1A1A1A;
  --sb-subtitle: #5F5F5F;
  --sb-price: #1A1A1A;
  --sb-full-price: #9B9B9B;
  --sb-label-bg: #F5F5F5;
  --sb-label-text: #1A1A1A;
  --sb-badge-bg: #EFEFEF;
  --sb-badge-text: #1A1A1A;
  --sb-free-gift-bg: #F5F5F5;
  --sb-free-gift-text: #1A1A1A;
  --sb-free-gift-selected-bg: #1A1A1A;
  --sb-free-gift-selected-text: #FFFFFF;
  --sb-upsell-bg: #FFFFFF;
  --sb-upsell-text: #1A1A1A;
  --sb-upsell-selected-bg: #1A1A1A;
  --sb-upsell-selected-text: #FFFFFF;
  --sb-sub-bg: #FFFFFF;
  --sb-sub-selected-bg: #F5F5F5;
  --sb-sub-border: #E0E0E0;
  --sb-sub-accent: #1A1A1A;
  --sb-sub-text: #1A1A1A;
  --sb-sub-price: #1A1A1A;
  --sb-sub-badge-bg: #1A1A1A;
  --sb-sub-badge-text: #FFFFFF;
  --sb-onetime-bg: #FFFFFF;
  --sb-onetime-text: #5F5F5F;
  --sb-radius: 8px;
  --sb-spacing: 12px;
  /* Typography (neutral defaults — fully overridable by the merchant).
     title 20/medium · block title 14/bold · subtitle 14/regular ·
     label 12/regular · free gift 13/bold · upsell 13/bold · unit 14/regular */
  --sb-font: inherit;
  --sb-block-title-size: 14px;
  --sb-block-title-weight: 800;
  --sb-title-size: 20px;
  --sb-title-weight: 600;
  --sb-subtitle-size: 14px;
  --sb-subtitle-weight: 500;
  --sb-label-size: 12px;
  --sb-label-weight: 500;
  --sb-free-gift-size: 13px;
  --sb-free-gift-weight: 800;
  --sb-upsell-size: 13px;
  --sb-upsell-weight: 800;
  --sb-unit-label-size: 14px;
  --sb-unit-label-weight: 500;
}
.sb-root *, .sb-root *::before, .sb-root *::after { box-sizing: border-box; }
.sb-loading { padding: 16px; text-align: center; color: #888; font-size: 14px; }
.sb-card { position: relative; border: var(--sb-border-width, 1.5px) var(--sb-card-border-style, var(--sb-border-style, solid)) var(--sb-border); border-radius: var(--sb-radius); padding: 16px; background: var(--sb-cards-bg); max-width: 560px; margin: 0 auto; }
/* Whole-bundle scratch: the cover overlays only the offers/pricing region (not the
   product title above or the ATC button below). A min-height keeps it scratchable
   even if the region is short. */
.sb-scratch-region { position: relative; }
.sb-scratch-cover--all { z-index: 6; min-height: 140px; }

.sb-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.sb-line { flex: 1; height: 1px; background: #E0E0E0; }
.sb-heading-text { font-size: var(--sb-block-title-size, 14px); font-weight: var(--sb-block-title-weight, 800); letter-spacing: .1em; text-transform: uppercase; color: var(--sb-block-title, #666); }

/* Tier picker */
.sb-tiers { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: var(--sb-spacing); }
.sb-tier { position: relative; padding: 14px 12px; border: var(--sb-border-width, 1.5px) var(--sb-border-style, solid) var(--sb-border); border-radius: var(--sb-radius); background: var(--sb-cards-bg); cursor: pointer; transition: all .15s; }
/* Content alignment (merchant-controlled; falls back to each layout's default). */
.sb-tier-body { text-align: var(--sb-content-align, inherit); }
.sb-tier-title, .sb-tier-sub, .sb-tier-label, .sb-tier-price, .sb-per-item { text-align: var(--sb-content-align, inherit); }
.sb-tiers[data-layout="radio"] .sb-tier-body { align-items: var(--sb-content-items, center); }
.sb-tier:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, .06); }
/* Inventory badges */
/* Inline per-tier upsell ("+ Add at X% discount" attached to the bundle bar) */
.sb-tier-gifts { margin-top: 10px; flex-basis: 100%; width: 100%; box-sizing: border-box; }
.sb-tier-gifts .sb-gifts-list { gap: 6px; }
/* Gift "banner": a filled strip welded to the bottom of the WHOLE bundle card,
   mirroring the upsell banner. Tinted with the free-gift colour (soft pink). */
.sb-gifts-list[data-gift-layout="banner"] { gap: 0; }
.sb-gifts-list[data-gift-layout="banner"] .sb-gift { background: var(--sb-free-gift-bg, #FCE7EC); color: var(--sb-free-gift-text, var(--sb-gift-text, #1A1A1A)); border: 0; border-radius: 10px; padding: 10px 14px; }
.sb-tiers[data-layout="radio"] .sb-gifts-list[data-gift-layout="banner"] .sb-gift { margin: 0 -16px; border-radius: 0; }
.sb-tiers[data-layout="radio"] .sb-tier-gifts:last-child .sb-gifts-list[data-gift-layout="banner"] .sb-gift:last-child { margin-bottom: -14px; border-radius: 0 0 var(--sb-radius) var(--sb-radius); }
.sb-tier-upsells { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; flex-basis: 100%; width: 100%; box-sizing: border-box; }
/* Radio rows are a flex row (radio | img | body | price); let the upsell footer
   wrap to its own full-width line under the whole card. */
.sb-tiers[data-layout="radio"] .sb-tier { flex-wrap: wrap; }
.sb-tup-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--sb-border); border-radius: 8px; background: var(--sb-upsell-bg, #fff); cursor: pointer; }
.sb-tup-cb { width: 16px; height: 16px; flex-shrink: 0; }
.sb-tup-img { object-fit: cover; border-radius: 6px; flex-shrink: 0; background: #f3f3f5; }
.sb-tup-img--ph { display: inline-block; }
.sb-tup-text { flex: 1; min-width: 0; font-size: 12px; font-weight: 700; color: var(--sb-upsell-text, #1A1A1A); display: flex; flex-direction: column; gap: 1px; }
.sb-tup-sub { font-size: 11px; font-weight: 500; color: #666; }
.sb-tup-pricing { flex-shrink: 0; font-size: 12px; font-weight: 800; }
.sb-tup-compare { text-decoration: line-through; color: #999; font-weight: 500; margin-left: 2px; }
/* Inline upsell layout variations (data-tup-layout) */
/* Banner: a filled, prominent full-width strip welded to the bottom of the WHOLE
   bundle card (the default). Tinted with the upsell selected colour. */
.sb-tup-row[data-tup-layout="banner"] { border: 0; border-radius: 10px; padding: 11px 14px; background: var(--sb-upsell-selected-bg, #FCE7EC); }
/* Radio rows: bleed past the card padding so the band touches the card edges and
   bottom, rounding only its bottom corners to match the card. */
.sb-tiers[data-layout="radio"] .sb-tup-row[data-tup-layout="banner"] { margin: 0 -16px; border-radius: 0; }
/* Bottom weld only when the upsell footer is the LAST element of the card, so a
   gift banner above it stays contiguous instead of overlapping. */
.sb-tiers[data-layout="radio"] .sb-tier-upsells:last-child .sb-tup-row[data-tup-layout="banner"]:last-child { margin-bottom: -14px; border-radius: 0 0 var(--sb-radius) var(--sb-radius); }
/* Gift footer sitting right above the upsell footer: no gap → one continuous strip. */
.sb-tier-gifts + .sb-tier-upsells { margin-top: 0; }
.sb-tup-row[data-tup-layout="banner"] .sb-tup-text { font-size: 13px; font-weight: 800; color: var(--sb-upsell-selected-text, var(--sb-upsell-text, #1A1A1A)); }
.sb-tup-row[data-tup-layout="banner"] .sb-tup-pricing { font-size: 13px; color: var(--sb-upsell-selected-text, var(--sb-upsell-text, #1A1A1A)); }
.sb-tup-row[data-tup-layout="banner"] .sb-tup-img { width: 30px !important; height: 30px !important; }
.sb-tup-row[data-tup-layout="bar"] { border-radius: 999px; padding: 6px 14px; border: 1.5px solid var(--sb-price, #1A1A1A); }
.sb-tup-row[data-tup-layout="compact"] { border: 0; border-bottom: 1px solid var(--sb-border, #ececf0); border-radius: 0; padding: 5px 4px; background: transparent; }
.sb-tup-row[data-tup-layout="compact"] .sb-tup-img { width: 0 !important; height: 0 !important; display: none; }
.sb-tup-row[data-tup-layout="card"] { flex-direction: column; align-items: flex-start; text-align: left; gap: 4px; position: relative; padding: 10px; }
/* Card: image on top at the merchant's chosen size (the inline imageSize), centered
   and capped — instead of forcing 100% which blew the image up full-width. */
.sb-tup-row[data-tup-layout="card"] .sb-tup-img { align-self: center; max-width: 100%; object-fit: cover; }
.sb-tup-row[data-tup-layout="card"] .sb-tup-cb { position: absolute; top: 8px; right: 8px; }
.sb-tup-row[data-tup-layout="card"] .sb-tup-pricing { align-self: flex-end; }
/* Editor "point at the preview": the element a hovered styling control changes.
   NOTE: must NOT be ".sb-hl" — that's the widget's own tier-highlights list class. */
.sb-point-hl { border-radius: 4px; box-shadow: 0 0 0 2.5px #1F6FEB, 0 0 0 7px rgba(31,111,235,.18) !important; transition: box-shadow .18s ease; position: relative; z-index: 2; }
/* Mix & Match (build-a-box) */
.sb-mm-section { margin-bottom: 16px; }
.sb-mm-sec-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.sb-mm-sec-title { font-weight: 800; font-size: 15px; color: var(--sb-block-title, #1A1A1A); }
.sb-mm-sec-rule { font-size: 12px; font-weight: 700; color: #888; }
.sb-mm-sec-rule--ok { color: #1a7f37; }
.sb-mm-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.sb-mm-grid--2 { grid-template-columns: repeat(2, 1fr); }
.sb-mm-grid--3 { grid-template-columns: repeat(3, 1fr); }
.sb-mm-grid--auto { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.sb-mm-loading { grid-column: 1 / -1; padding: 20px; text-align: center; color: var(--sb-subtitle, #888); font-size: 13px; }
.sb-mm-card { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1.5px solid var(--sb-border); border-radius: var(--sb-radius, 10px); background: var(--sb-cards-bg, #fff); position: relative; }
.sb-mm-card--sel { border-color: var(--sb-price); box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.sb-mm-img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 8px; background: #f3f3f5; }
.sb-mm-img--ph { display: block; }
.sb-mm-card-body { flex: 1; }
.sb-mm-name { font-size: 13px; font-weight: 700; line-height: 1.2; }
.sb-mm-variant { width: 100%; margin: 4px 0; font-size: 12px; padding: 3px 6px; border: 1px solid var(--sb-border); border-radius: 6px; }
.sb-mm-price { font-size: 13px; font-weight: 800; color: var(--sb-price); }
.sb-mm-add-btn { width: 100%; padding: 7px; border: 1.5px solid var(--sb-price); border-radius: 8px; background: transparent; color: var(--sb-price); font-weight: 800; font-size: 12px; cursor: pointer; }
.sb-mm-add-btn:disabled { opacity: .4; cursor: not-allowed; }
.sb-mm-stepper { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--sb-price); border-radius: 7px; overflow: hidden; }
.sb-mm-btn { width: 26px; height: 24px; border: none; background: var(--sb-price); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; line-height: 1; }
.sb-mm-btn:disabled { opacity: .4; cursor: not-allowed; }
.sb-mm-q { font-weight: 800; font-size: 12px; }
.sb-mm-summary { display: flex; align-items: baseline; justify-content: space-between; margin: 12px 0 8px; }
.sb-mm-prices .sb-price { font-size: 20px; font-weight: 800; }
.sb-mm-savings { font-size: 12px; font-weight: 700; color: #1a7f37; }
.sb-mm-err { margin-top: 8px; font-size: 12px; color: #b42318; text-align: center; }
.sb-mm-empty { padding: 24px; text-align: center; color: #888; font-size: 13px; }
@media (max-width: 600px) { .sb-mm-grid { grid-template-columns: repeat(2, 1fr); } }
/* Swatches variant style — round color/image chips instead of labelled pills. */
.sb-slots--swatches .sb-slot-pills { gap: 8px; }
.sb-slots--swatches .sb-slot-pill { flex-direction: column; width: auto; padding: 0; border: none; background: transparent; gap: 3px; }
.sb-slots--swatches .sb-slot-pill-img, .sb-slots--swatches .sb-slot-pill-dot { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--sb-flavor-pill-border, #E0E0E0); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.sb-slots--swatches .sb-slot-pill:hover .sb-slot-pill-img, .sb-slots--swatches .sb-slot-pill:hover .sb-slot-pill-dot { border-color: var(--sb-flavor-accent, var(--sb-price)); }
.sb-slots--swatches .sb-slot-pill-title { font-size: 10px; max-width: 52px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.sb-slots--swatches .sb-slot-pill-plus { display: none; }
.sb-slots--swatches .sb-slot-pill--disabled .sb-slot-pill-dot, .sb-slots--swatches .sb-slot-pill--disabled .sb-slot-pill-img { opacity: .4; }
.sb-tier-stock { display: inline-block; margin-top: 4px; font-size: 11px; font-weight: 700; color: #555; }
.sb-tier-stock--low { color: #b42318; }
.sb-tier-stock--low::before { content: "●"; font-size: 8px; vertical-align: middle; margin-right: 4px; }
.sb-tier--active { background: var(--sb-selected-bg); border: 2px solid var(--sb-tier-border-active, var(--sb-price)); box-shadow: 0 6px 18px rgba(0, 0, 0, .07); }
.sb-tier-img { width: 100%; height: 48px; object-fit: cover; border-radius: 8px; margin-bottom: 6px; }
.sb-tier-body { flex: 1; }
.sb-tier-title { font-size: var(--sb-title-size, 20px); font-weight: var(--sb-title-weight, 600); color: var(--sb-title); line-height: 1.2; }
.sb-tier-sub { font-size: var(--sb-subtitle-size, 14px); font-weight: var(--sb-subtitle-weight, 500); color: var(--sb-subtitle); margin-top: 2px; }
.sb-tier-label { display: inline-block; margin-top: 4px; background: var(--sb-label-bg); color: var(--sb-label-text); border: 1px solid #E0E0E0; font-size: var(--sb-label-size, 12px); font-weight: var(--sb-label-weight, 500); padding: 3px 6px; border-radius: 6px; }
/* Promotional-label style variations (data-label-style) */
.sb-tier-label[data-label-style="pill"] { border-radius: 999px; padding: 3px 10px; }
.sb-tier-label[data-label-style="plain"] { background: transparent; border: 0; padding: 0; }
.sb-tier-label[data-label-style="underline"] { background: transparent; border: 0; padding: 0 0 1px; border-bottom: 2px solid var(--sb-label-bg); border-radius: 0; color: var(--sb-label-bg); }
.sb-tier-label[data-label-style="tag"] { border: 0; padding: 3px 8px 3px 12px; border-radius: 0; clip-path: polygon(10% 0, 100% 0, 100% 100%, 10% 100%, 0 50%); }
.sb-hl { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 3px; }
.sb-hl li { font-size: 11px; color: var(--sb-subtitle); display: flex; gap: 5px; align-items: center; }
.sb-hl-icon { color: var(--sb-price, currentColor); font-weight: 800; }
.sb-personal { margin-top: 8px; display: flex; flex-direction: column; gap: 3px; }
.sb-personal label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #888; }
.sb-personal-input { padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 12px; }
.sb-tier-price { margin-top: 4px; }
.sb-price { display: block; font-size: var(--sb-price-size, 18px); font-weight: var(--sb-price-weight, 800); color: var(--sb-price); }
.sb-compare { display: block; font-size: var(--sb-compare-size, 11px); font-weight: var(--sb-compare-weight, 400); color: var(--sb-full-price); text-decoration: line-through; margin-top: 2px; }
.sb-per-item { font-size: var(--sb-unit-label-size, 14px); font-weight: var(--sb-unit-label-weight, 500); color: var(--sb-subtitle); margin-top: 2px; }
.sb-tier-badge { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); z-index: 4; font-size: var(--sb-badge-size, 9px); font-weight: var(--sb-badge-weight, 800); padding: 3px 7px; border-radius: 6px; white-space: nowrap; color: var(--sb-badge-text); background: var(--sb-badge-bg); text-transform: uppercase; letter-spacing: .05em; }
/* Badges sit -10px ABOVE their tier. Reserve top room (via the JS-added
   .sb-has-badge class — reliable across browsers, unlike :has()) so the badge is
   never cramped/clipped at the top edge, in every layout. */
.sb-tiers.sb-has-badge { padding-top: 14px; }
/* Ribbon badges are pulled even higher → a touch more room. */
.sb-tiers.sb-has-badge:has(.sb-tier-badge--ribbon) { padding-top: 20px; }
/* Color-driven badge styles: use the customizable badge colors; the style only
   changes the shape/treatment so palette + Customize colors always apply. */
.sb-tier-badge--simple { background: var(--sb-badge-simple-bg, #1A1A1A); color: var(--sb-badge-simple-text, #fff); border-radius: 5px; }
.sb-tier-badge--popular { background: var(--sb-badge-popular-bg, #1A1A1A); color: var(--sb-badge-popular-text, #fff); border-radius: 6px; box-shadow: 0 3px 8px rgba(0,0,0,.22); }
.sb-tier-badge--value { background: var(--sb-badge-value-bg, #1A1A1A); color: var(--sb-badge-value-text, #fff); border-radius: 999px; padding: 3px 11px; }
.sb-tier-badge--starter { background: #fff; color: var(--sb-badge-starter-bg, #5F5F5F); border: 1.5px solid var(--sb-badge-starter-bg, #C9C9CF); border-radius: 5px; }
/* Ribbon BEHIND the card (Kaching "MOST POPULAR"): the card surface (bg+border)
   is lifted onto a ::before layer; the ribbon sits one layer below it, pinned to
   the top-right and pulled UP so its readable top peeks above the card while its
   lower edge tucks behind the card's top border. isolation:isolate scopes the
   negative z-indexes to this card (so they don't fall behind the whole page). */
.sb-tier-badge--ribbon {
  background: none; border: 0; padding: 0; border-radius: 0; clip-path: none;
  position: absolute;
  top: 0;                              /* anchored to the card's top edge */
  left: 50%; right: auto; bottom: auto;
  transform: translate(-50%, -50%);    /* mounted ON the border, centred (cards) */
  z-index: 3;
  display: block; height: auto; line-height: 0;
  /* Never wider than the card — the SVG scales down to fit narrow layouts
     (cards-grid / horizontal / vertical) instead of overflowing. */
  max-width: calc(100% - 28px);
  pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .22));
}
.sb-tier-badge--ribbon::before,
.sb-tier-badge--ribbon::after { content: none; }
/* Radio = full-width bars → ribbon sits top-RIGHT (the convention). */
.sb-tiers[data-layout="radio"] .sb-tier-badge.sb-tier-badge--ribbon {
  top: 0; right: 18px; left: auto; bottom: auto; transform: translateY(-50%);
}
/* Headroom so the half sticking above doesn't collide with the row above. */
.sb-tier:has(.sb-tier-badge--ribbon) { margin-top: 12px; }
/* Solid filled bar (e.g. "MOST POPULAR") — flat, high-contrast. */
.sb-tier-badge--solid { background: var(--sb-badge-popular-bg, #1A1A1A); color: var(--sb-badge-popular-text, #fff); border-radius: 4px; padding: 4px 12px; letter-spacing: .06em; }
/* Starburst seal (e.g. "Most Popular") — 12-point sunburst with centred text.
   Sits in the tier's top-right corner so it never overlaps the title/price. */
/* Custom uploaded badge image — no background, just the artwork. */
.sb-tier-badge--custom { background: none; color: inherit; padding: 0; border-radius: 0; max-width: 130px; max-height: 44px; height: auto; width: auto; object-fit: contain; }

/* Radio circle (shown only in the "radio" layout) */
.sb-tier-radio { display: none; }

/* Layouts */
/* "radio" — full-width stacked pill rows: radio circle · title+label · price/compare,
   floating badge top-right, accent border on the selected row, tinted unselected bg. */
.sb-tiers[data-layout="radio"] { flex-direction: column; gap: var(--sb-spacing); }
.sb-tiers[data-layout="radio"] .sb-tier {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: var(--sb-radius);
  border: var(--sb-border-width, 1.5px) var(--sb-border-style, solid) var(--sb-border);
  background: var(--sb-cards-bg);
  filter: none;
}
/* Selected row gets the emphasis (selected-bg); unselected stay on the card bg. */
.sb-tiers[data-layout="radio"] .sb-tier:not(.sb-tier--active) { background: var(--sb-cards-bg); }
.sb-tiers[data-layout="radio"] .sb-tier--active {
  border: 2px solid var(--sb-tier-border-active, var(--sb-price));
  background: var(--sb-selected-bg);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
}
.sb-tiers[data-layout="radio"] .sb-tier-radio {
  display: inline-block; flex-shrink: 0; box-sizing: border-box;
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--sb-border); background: #fff; position: relative;
}
.sb-tiers[data-layout="radio"] .sb-tier--active .sb-tier-radio { border-color: var(--sb-price); }
.sb-tiers[data-layout="radio"] .sb-tier--active .sb-tier-radio::after {
  content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 10px; height: 10px; border-radius: 50%; background: var(--sb-price);
}
.sb-tiers[data-layout="radio"] .sb-tier-body {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; flex: 1; min-width: 0;
}
.sb-tiers[data-layout="radio"] .sb-tier-title { font-size: var(--sb-title-size, 16px); }
.sb-tiers[data-layout="radio"] .sb-tier-sub { flex-basis: 100%; width: 100%; margin: 0; }
.sb-tiers[data-layout="radio"] .sb-tier-label { margin-top: 0; }
.sb-tiers[data-layout="radio"] .sb-tier-price { margin-top: 0; flex-shrink: 0; text-align: right; }
.sb-tiers[data-layout="radio"] .sb-tier-img { width: 40px; height: 40px; margin-bottom: 0; border-radius: 8px; flex-shrink: 0; }
/* Floating badge sits on the row's top-right corner. */
.sb-tiers[data-layout="radio"] .sb-tier-badge { top: -9px; left: auto; right: 12px; transform: none; }
/* Rich bars (Kit / Mix & Match / FBT) embed a tall product list, so the radio and
   price must sit at the TOP aligned with the title — not float in the vertical
   centre of the whole card (which looked off). The product list flows full-width
   under the title inside the body. */
.sb-tiers[data-layout="radio"] .sb-tier--rich { align-items: flex-start; }
.sb-tiers[data-layout="radio"] .sb-tier--rich .sb-tier-radio { margin-top: 3px; }
.sb-tiers[data-layout="radio"] .sb-tier--rich .sb-tier-price { align-self: flex-start; }
.sb-tier--rich .sb-tier-body { width: 100%; }

.sb-tiers[data-layout="vertical"] { flex-direction: row; flex-wrap: wrap; gap: var(--sb-spacing); }
.sb-tiers[data-layout="vertical"] .sb-tier { flex: 1; min-width: 0; text-align: center; }
.sb-tiers[data-layout="horizontal"] { flex-direction: row; flex-wrap: wrap; gap: var(--sb-spacing); }
.sb-tiers[data-layout="horizontal"] .sb-tier { flex: 1; min-width: 0; text-align: center; }
.sb-tiers[data-layout="cards-grid"] { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sb-spacing); }
.sb-tiers[data-layout="cards-grid"] .sb-tier { text-align: center; }
.sb-tiers[data-layout="compact-list"] .sb-tier { padding: 10px 14px; border-width: 0 0 1px 0; border-radius: 0; }
/* Selected row "envelops": full rounded border + tint + lift, so the active
   option reads as a contained card instead of a flat dense row. */
.sb-tiers[data-layout="compact-list"] .sb-tier--active {
  border-width: 2px; border-style: solid; border-radius: var(--sb-radius);
  border-color: var(--sb-tier-border-active, var(--sb-price));
  background: var(--sb-selected-bg); box-shadow: 0 6px 20px rgba(0,0,0,.10);
  position: relative; z-index: 1;
}
/* A floating badge hangs above the card top — reserve top room on badged tiers
   so it never overlaps the title (robust class set by the widget; no :has()).
   Centered layouts (badge top-center) need the most; radio's badge is top-right. */
.sb-tier--badged { padding-top: 24px; }
.sb-tiers[data-layout="radio"] .sb-tier--badged { padding-top: 14px; }
.sb-tiers[data-layout="comparison"] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--sb-border); border-radius: var(--sb-radius); overflow: hidden; }
.sb-tiers[data-layout="comparison"] .sb-tier { border: 0; border-right: 1px solid #f0e6ef; border-radius: 0; text-align: center; }
.sb-tiers[data-layout="hero-featured"] { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: var(--sb-spacing); }
/* "Hero" = the bar the shopper has SELECTED stands out (not a fixed middle one),
   so the highlight follows the real choice / the merchant's default-selected bar. */
.sb-tiers[data-layout="hero-featured"] .sb-tier--active:not(.sb-tier--rich) { transform: scale(1.04); z-index: 1; }

/* Bars with embedded content (kit / build-a-box / FBT) never get squeezed into a
   narrow column — they span the full width as their own row in EVERY multi-column
   layout, and read left-aligned like a normal row. Simple title+price bars keep
   sitting side by side. This is what keeps mixed bundles from looking broken. */
.sb-tiers[data-layout="horizontal"] .sb-tier--rich,
.sb-tiers[data-layout="vertical"] .sb-tier--rich { flex: 1 1 100%; text-align: left; }
.sb-tiers[data-layout="hero-featured"] .sb-tier--rich,
.sb-tiers[data-layout="cards-grid"] .sb-tier--rich,
.sb-tiers[data-layout="comparison"] .sb-tier--rich { grid-column: 1 / -1; transform: none; text-align: left; }
/* Mobile: multi-column layouts collapse to a single full-width column on phones
   (<=600px, the common mobile width). 3-up layouts (horizontal / hero / grids)
   are unreadable below this, so they stack. Desktop product columns are wider
   and keep the side-by-side layout. */
@media (max-width: 600px) {
  /* "vertical" stacks on phones — its name implies one-per-row. */
  .sb-tiers[data-layout="vertical"] { flex-direction: column; }
  /* Dense, text-heavy grids collapse — unreadable as 3-up on a phone. */
  .sb-tiers[data-layout="cards-grid"],
  .sb-tiers[data-layout="comparison"] { grid-template-columns: 1fr; }
  .sb-tiers[data-layout="comparison"] .sb-tier { border-right: 0; border-bottom: 1px solid #f0e6ef; }
  /* "horizontal" and "hero-featured" are explicitly side-by-side choices —
     keep their columns even on narrow widths (and in the 375px preview).
     Just tighten padding and drop the hero scale so nothing overflows. */
  .sb-tiers[data-layout="horizontal"] .sb-tier { padding-left: 6px; padding-right: 6px; }
  .sb-tiers[data-layout="hero-featured"] { gap: 6px; }
  .sb-tiers[data-layout="hero-featured"] .sb-tier--active { transform: none; }
}

/* Shipping bar */
.sb-shipping { display: flex; flex-direction: column; gap: 8px; padding: 10px 14px; border: 1px dashed #E0E0E0; border-radius: 10px; background: var(--sb-ship-bg, #F5F5F5); font-size: 12px; color: var(--sb-ship-text, #1a1a1a); margin: 10px 0; }
.sb-shipping--unlocked { border-color: var(--sb-ship-fill, #1A1A1A); background: var(--sb-ship-unlocked-bg, #EAF3EB); color: var(--sb-ship-unlocked-text, #1a1a1a); font-weight: 700; }
.sb-shipping-label { display: flex; align-items: center; gap: 8px; }
.sb-shipping-track { width: 100%; height: 6px; border-radius: 999px; background: #E0E0E0; overflow: hidden; }
.sb-shipping-fill { height: 100%; border-radius: 999px; background: var(--sb-ship-fill, #1A1A1A); transition: width .25s ease; }
/* Free-shipping style variations (data-ship-style) */
.sb-shipping[data-ship-style="minimal"] { border: 0; background: transparent; padding: 6px 0; gap: 0; }
.sb-shipping[data-ship-style="badge"] { border: 0; align-items: center; padding: 0; background: transparent; }
.sb-shipping[data-ship-style="badge"] .sb-shipping-label { background: var(--sb-ship-bg, #F5F5F5); color: var(--sb-ship-text, #1a1a1a); padding: 6px 14px; border-radius: 999px; font-weight: 700; }
.sb-shipping[data-ship-style="stripe"] { border: 0; border-radius: 0; align-items: center; background: var(--sb-ship-fill, #1A1A1A); color: #fff; padding: 8px 14px; margin: 10px -14px; }
.sb-shipping[data-ship-style="stripe"] .sb-shipping-label { justify-content: center; font-weight: 700; }

/* Subscribe block layouts */
.sb-sub-block-title { font-weight: 700; font-size: 14px; margin: 14px 0 6px; color: var(--sb-sub-text, #1A1A1A); }
.sb-sub-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 10px; max-width: 100%; box-sizing: border-box; }
.sb-sub-tab { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1.5px solid var(--sb-sub-border, #e1e1e3); border-radius: var(--sb-radius, 12px); background: var(--sb-sub-bg, #fff); cursor: pointer; flex: 1 1 200px; min-width: 0; max-width: 100%; box-sizing: border-box; overflow: hidden; }
.sb-sub-tab--active { border: 2px solid var(--sb-sub-accent, #1A1A1A); background: var(--sb-sub-selected-bg, #F5F5F5); }
.sb-sub-tab-body { flex: 1; min-width: 0; }
.sb-sub-tab .sb-sub-title { color: var(--sb-sub-text, #1A1A1A); }
.sb-sub-tab .sb-sub-radio { border-color: var(--sb-sub-accent, #1A1A1A); }
.sb-sub-tab--active .sb-sub-radio::after { content: ''; position: absolute; width: 10px; height: 10px; background: var(--sb-sub-accent, #1A1A1A); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.sb-sub-tab .sb-sub-price .sb-price { color: var(--sb-sub-price, #1A1A1A); }
.sb-sub-inline { display: flex; align-items: center; gap: 8px; margin: 14px 0; flex-wrap: wrap; max-width: 100%; box-sizing: border-box; }
.sb-sub-pill { padding: 8px 14px; border: 1.5px solid var(--sb-sub-border, #e1e1e3); border-radius: 100px; background: var(--sb-sub-bg, #fff); color: var(--sb-sub-text, #1A1A1A); cursor: pointer; font-weight: 600; font-size: 13px; min-width: 0; max-width: 100%; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-sub-pill--active { background: var(--sb-sub-accent, #1A1A1A); color: var(--sb-sub-badge-text, #fff); border-color: var(--sb-sub-accent, #1A1A1A); }
.sb-onetime { text-align: center; padding: 10px; color: var(--sb-onetime-text, #555); background: var(--sb-onetime-bg, transparent); font-size: 13px; text-decoration: underline; cursor: pointer; border-radius: var(--sb-radius); transition: background .15s, color .15s; }
/* Selected one-time in the "card" layout: stays a compact link (never morphs
   into a full radio card), just gets a clear active tint + accent. */
.sb-onetime--active { text-decoration: none; font-weight: 700; color: var(--sb-sub-accent, #1A1A1A); background: var(--sb-sub-selected-bg, #F5F5F5); box-shadow: inset 0 0 0 1.5px var(--sb-sub-accent, #1A1A1A); }

/* Subscribe selector rendered as matching radio rows (tier layout "radio"). */
.sb-sub-perunit { font-size: 11px; font-weight: 600; color: var(--sb-full-price, #6b6b6b); margin-top: 1px; line-height: 1.1; }
.sb-sub-radios { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 10px; }
.sb-sub-radios .sb-sub-card { margin: 0; border-width: 1.5px; border-color: var(--sb-sub-border, #E0E0E0); }
/* Unselected = base bg; selected = the (darker/tinted) selected bg. Was inverted. */
.sb-sub-radios .sb-sub-card:not(.sb-sub-card--active) { background: var(--sb-sub-bg, #FFFFFF); }
.sb-sub-radios .sb-sub-card--active { border-width: 2px; border-color: var(--sb-sub-accent, #1A1A1A); background: var(--sb-sub-selected-bg, #F5F5F5); }

/* Tabs layout extras: small inline % badge + the frequency row under the tabs. */
.sb-sub-badge { display: inline-block; font-size: 11px; font-weight: 800; padding: 1px 6px; border-radius: 100px; background: var(--sb-sub-accent, #1A1A1A); color: var(--sb-sub-badge-text, #fff); vertical-align: middle; margin-left: 4px; }
.sb-sub-tabs-freq { display: flex; align-items: center; gap: 6px; margin: 4px 0 10px; font-size: 13px; color: var(--sb-sub-text, #1A1A1A); }

/* Highlight layout: bold subscribe card with a corner ribbon, compact one-time. */
.sb-sub-radios--hl { gap: 8px; }
.sb-sub-card--hl { position: relative; border-width: 2.5px; border-color: var(--sb-sub-accent, #1A1A1A); background: var(--sb-sub-selected-bg, #F5F5F5); box-shadow: 0 2px 10px rgba(0,0,0,.06); overflow: visible; padding-top: 18px; }
.sb-sub-hl-badge { position: absolute; top: -10px; right: 12px; font-size: 11px; font-weight: 800; letter-spacing: .02em; padding: 3px 10px; border-radius: 100px; background: var(--sb-sub-accent, #1A1A1A); color: var(--sb-sub-badge-text, #fff); box-shadow: 0 2px 6px rgba(0,0,0,.18); white-space: nowrap; }
.sb-sub-radios--hl .sb-sub-card--sm { padding-top: 12px; padding-bottom: 12px; border-width: 1.5px; }
.sb-sub-radios--hl .sb-sub-card--sm .sb-sub-title { font-size: 14px; }

/* Variant picker */
.sb-variant { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.sb-variant-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--sb-subtitle, #666); }
.sb-swatches { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.sb-sw { display: inline-block; width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: border-color .15s; }
.sb-sw--active { border-color: #1a1a1a; box-shadow: 0 0 0 2px rgba(0, 0, 0, .05); }
.sb-sw:hover { transform: scale(1.08); }
.sb-sw--disabled { opacity: .35; cursor: not-allowed; position: relative; }
.sb-sw--disabled:hover { transform: none; }
.sb-sw--disabled::after { content: ''; position: absolute; left: 50%; top: 0; width: 2px; height: 100%; background: #c00; transform: translateX(-50%) rotate(45deg); }
.sb-variant-select { padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 12px; }
.sb-variant-dropdowns { background: #fff; border: 1.5px solid var(--sb-border, #e7d9e6); border-radius: 14px; padding: 14px 16px; }
.sb-variant-drops { display: flex; flex-direction: column; gap: 8px; }
.sb-variant-drop { display: flex; flex-direction: column; gap: 3px; }
.sb-variant-drop-label { font-size: 12px; font-weight: 700; color: var(--sb-title, #222); }
.sb-variant-drop-select { padding: 9px 10px; border: 1.5px solid #d1d5db; border-radius: 8px; font-size: 13px; background: #fff; width: 100%; cursor: pointer; }
.sb-radios { display: flex; flex-direction: column; gap: 4px; }
.sb-radio-row { display: flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; }
.sb-radio-row--disabled { opacity: .45; cursor: not-allowed; }

/* Slots ("flavor slots", Voom style) picker */
.sb-slots { gap: 8px; align-items: stretch; }
.sb-slots-label { font-weight: 800; }
.sb-slot-pills { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.sb-slot-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 8px; border: 1.5px solid var(--sb-flavor-pill-border, var(--sb-border, #E0E0E0)); border-radius: 100px; background: var(--sb-flavor-pill-bg, var(--sb-cards-bg, #fff)); font-size: var(--sb-flavor-size, 12px); font-weight: var(--sb-flavor-weight, 600); color: var(--sb-flavor-pill-text, var(--sb-title, #1A1A1A)); cursor: pointer; transition: border-color .15s, transform .1s; }
.sb-slot-pill:hover:not(.sb-slot-pill--disabled) { border-color: var(--sb-price, #1A1A1A); }
.sb-slot-pill:active:not(.sb-slot-pill--disabled) { transform: scale(.97); }
.sb-slot-pill--disabled { opacity: .4; cursor: not-allowed; }
.sb-slot-pill-img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.sb-slot-pill-dot { width: 16px; height: 16px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.sb-slot-pill-plus { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--sb-flavor-accent, var(--sb-price, #1A1A1A)); color: #fff; font-weight: 800; line-height: 1; flex-shrink: 0; }
.sb-slot-counter { font-size: 11px; font-weight: 700; color: var(--sb-subtitle, #666); text-align: center; }
.sb-slot-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.sb-slot-chip { width: var(--sb-slot-size, 32px); height: var(--sb-slot-size, 32px); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; position: relative; background: transparent; padding: 0; }
.sb-slot-chip--empty { border: 2px dashed #C7C7C7; }
/* No overflow:hidden here — it would clip the floating × remove button. The
   inner img/dot keep border-radius:50% so the chip still looks round. */
.sb-slot-chip--filled { border: 2px solid var(--sb-flavor-slot-border, var(--sb-flavor-accent, var(--sb-price, #1A1A1A))); cursor: pointer; }
.sb-slot-chip-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.sb-slot-chip-dot { width: 100%; height: 100%; border-radius: 50%; }
.sb-slot-chip-x { position: absolute; top: -5px; right: -5px; width: 16px; height: 16px; border-radius: 50%; background: #1a1a1a; color: #fff; font-size: 11px; line-height: 16px; text-align: center; display: flex; align-items: center; justify-content: center; }
.sb-slot-hint { font-size: 11px; color: #999; font-style: italic; text-align: center; }
.sb-slots--locked .sb-slot-chip--filled { cursor: default; }
.sb-slots--locked .sb-slot-counter { color: var(--sb-price, #1A1A1A); font-weight: 700; }
.sb-variant--empty { margin: 8px 0; }
.sb-variant-note { font-size: 12px; color: #999; font-style: italic; }

/* Subscribe & save card */
/* No overflow:hidden so a floating badge can render outside the card; top
   margin reserves space so it isn't clipped by the element above. */
.sb-sub-card { position: relative; display: flex; align-items: center; gap: 10px; padding: 16px 12px 14px; border: 2px solid var(--sb-sub-accent, #1A1A1A); background: var(--sb-sub-bg, #FFFFFF); border-radius: var(--sb-radius); margin: 22px 0 10px; box-sizing: border-box; max-width: 100%; }
.sb-sub-card--active { background: var(--sb-sub-selected-bg, #F5F5F5); }
.sb-sub-radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--sb-sub-accent, #1A1A1A); flex-shrink: 0; position: relative; box-sizing: border-box; align-self: center; }
.sb-sub-card--active .sb-sub-radio::after { content: ''; position: absolute; width: 10px; height: 10px; background: var(--sb-sub-accent, #1A1A1A); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.sb-sub-body { flex: 1; min-width: 0; overflow: hidden; }
.sb-sub-title { font-size: var(--sb-sub-title-size, 14px); font-weight: var(--sb-sub-title-weight, 700); color: var(--sb-sub-text, #1A1A1A); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-sub-sub { font-size: 12px; color: #666; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-sub-card--has-bullets { flex-direction: column; align-items: stretch; gap: 0; }
.sb-sub-card-main { display: flex; align-items: center; gap: 10px; width: 100%; }
.sb-sub-bullets { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 4px; padding-top: 10px; border-top: 1px solid var(--sb-sub-border, #E0E0E0); }
.sb-sub-bullets li { font-size: 12px; color: var(--sb-sub-text, #444); line-height: 1.35; padding-left: 18px; position: relative; white-space: normal; }
.sb-sub-bullets li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--sb-sub-accent, #1A1A1A); font-weight: 800; font-size: 11px; }
.sb-sub-inline-bullets .sb-sub-bullets { border-top: none; padding-top: 0; margin-top: 6px; }
.sb-sub-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 11px; color: #444; margin-top: 6px; max-width: 100%; box-sizing: border-box; }
.sb-sub-meta > :first-child { flex-shrink: 0; }
.sb-sub-freq { font-size: 11px; padding: 3px 4px; border: 1px solid #cad3df; border-radius: 5px; background: #fff; color: #1a1a1a; font-weight: 600; cursor: pointer; min-width: 0; flex: 1 1 auto; max-width: 100%; box-sizing: border-box; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.sb-sub-freq:disabled { background: #f4f4f5; color: #aaa; cursor: not-allowed; }
.sb-sub-price { text-align: right; flex-shrink: 0; min-width: 70px; }
.sb-sub-price .sb-price { font-size: 16px; color: var(--sb-sub-price, #1A1A1A); }
.sb-sub-price .sb-compare { font-size: 11px; }

/* Countdown banner */
.sb-countdown { padding: 10px 14px; border-radius: 8px; margin: 0 auto 12px; max-width: 560px; }

/* Scratch banner */
.sb-scratch { padding: 14px; border-radius: 10px; margin: 0 auto 12px; max-width: 560px; text-align: center; font-weight: 800; }

/* Scratch-off per-bar cover (Module 7) — hides a tier until click-to-reveal */
/* The scratch COVER (.sb-scratch-cover) already clips its own canvas to the
   rounded rect, so the tier itself doesn't need overflow:hidden — keeping it
   visible lets a badge (top:-10px) on a scratch tier show after the reveal. */
.sb-tier--scratch { overflow: visible; }
.sb-scratch-cover { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; border: 0; border-radius: inherit; cursor: grab; overflow: hidden; background: transparent; transition: opacity .35s ease; touch-action: none; }
.sb-scratch-cover:active { cursor: grabbing; }
.sb-scratch-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sb-scratch-cover--revealed { opacity: 0; pointer-events: none; }

/* Sold-out tier: blur + dim content, overlay centered label, block selection. */
.sb-tier--soldout { cursor: not-allowed; pointer-events: none; }
.sb-tier--soldout > *:not(.sb-soldout-overlay) { filter: blur(2px); opacity: var(--sb-soldout-opacity, .5); transition: filter .2s ease, opacity .2s ease; }
.sb-soldout-overlay { position: absolute; inset: 0; z-index: 6; pointer-events: none; display: flex; align-items: center; justify-content: center; text-align: center; border-radius: inherit; }
.sb-soldout-label { font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: rgba(20,20,20,.78); padding: 6px 14px; border-radius: 999px; font-size: 14px; line-height: 1.2; }
.sb-soldout-anim--pulse .sb-soldout-label { animation: sb-soldout-pulse 1.4s ease-in-out infinite; }
.sb-soldout-anim--fade .sb-soldout-label { animation: sb-soldout-fade 2s ease-in-out infinite; }
@keyframes sb-soldout-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes sb-soldout-fade { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* Upsells */
.sb-upsells { margin: 14px 0; padding: 12px; border: 1px solid var(--sb-border); border-radius: var(--sb-radius); }
.sb-upsells-title { font-weight: 700; font-size: 13px; margin-bottom: 8px; }
.sb-upsells-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.sb-upsell-row { display: flex; align-items: center; gap: 10px; padding: 8px; background: var(--sb-upsell-bg, #f9f9fb); color: var(--sb-upsell-text, #1A1A1A); border-radius: 8px; }
.sb-upsell-cb { width: 18px; height: 18px; flex-shrink: 0; }
.sb-upsell-img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; flex-shrink: 0; background: #f3f3f5; }
.sb-upsell-body { flex: 1; min-width: 0; }
.sb-upsell-title { font-weight: var(--sb-upsell-weight, 800); font-size: var(--sb-upsell-size, 13px); color: var(--sb-upsell-text, #1A1A1A); }
.sb-upsell-variant { font-size: 11px; color: #888; margin-top: 1px; }
.sb-upsell-sub { font-size: 11px; color: #666; margin-top: 2px; }
.sb-upsell-badge { font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 4px; background: #1a1a1a; color: #fff; }
.sb-upsell-pricing { display: flex; align-items: baseline; gap: 6px; margin-top: 2px; }
.sb-upsell-price { font-weight: 800; color: var(--sb-price, #1A1A1A); }
.sb-upsell-compare { text-decoration: line-through; color: #999; font-weight: 500; font-size: .9em; }

/* Reward ladder (cart goals, by value) */
.sb-ladder { margin: 14px 0; padding: 14px 16px; border: 1px solid var(--sb-border, #e0e0e0); border-radius: var(--sb-radius, 12px); background: var(--sb-gift-bg, #F7F9F7); }
.sb-ladder-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.sb-ladder-title { font-weight: 800; font-size: 14px; color: var(--sb-gift-text, #1a1a1a); }
.sb-ladder-count { font-weight: 700; font-size: 13px; color: var(--sb-gift-unlocked-accent, #2E7D32); }
.sb-ladder-track { position: relative; height: 8px; border-radius: 999px; background: #e3e6e3; overflow: hidden; }
.sb-ladder-fill { height: 100%; border-radius: 999px; background: var(--sb-gift-unlocked-accent, #2E7D32); transition: width .35s ease; }
.sb-ladder-miles { display: flex; justify-content: space-between; margin-top: 10px; gap: 6px; }
.sb-ladder-mile { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1; text-align: center; min-width: 0; }
.sb-ladder-dot { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #e3e6e3; color: #9a9a9a; font-size: 15px; border: 2px solid #e3e6e3; overflow: hidden; }
.sb-ladder-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.sb-ladder-mile:not(.sb-ladder-mile--on) .sb-ladder-img { filter: grayscale(1); opacity: .55; }
.sb-ladder-mile--on .sb-ladder-dot { background: var(--sb-gift-unlocked-accent, #2E7D32); color: #fff; border-color: var(--sb-gift-unlocked-accent, #2E7D32); }
.sb-ladder-label { font-size: 12px; font-weight: 700; color: var(--sb-gift-text, #1a1a1a); line-height: 1.2; }
.sb-ladder-mile:not(.sb-ladder-mile--on) .sb-ladder-label { color: #9a9a9a; }
.sb-ladder-amt { font-size: 11px; color: #9a9a9a; }

/* Progressive gifts */
.sb-gift-choice { width: 100%; max-width: 200px; margin-top: 4px; font-size: 12px; padding: 4px 6px; border: 1px solid var(--sb-border, #e0e0e0); border-radius: 6px; background: #fff; }
.sb-gifts { margin: 14px 0; padding: 12px; background: var(--sb-gift-bg, #F5F5F5); color: var(--sb-gift-text, #1A1A1A); border: 1px dashed #E0E0E0; border-radius: var(--sb-radius); }
.sb-gifts-title { font-weight: var(--sb-free-gift-weight, 800); font-size: var(--sb-free-gift-size, 13px); color: var(--sb-gift-text, #1A1A1A); }
.sb-gifts-sub { font-size: 11px; color: #666; margin: 2px 0 8px; }
.sb-gifts-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.sb-gifts-list[data-gift-layout="grid"] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.sb-gifts-list[data-gift-layout="grid"] .sb-gift { flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; }
.sb-gifts-list[data-gift-layout="compact"] { gap: 0; }
.sb-gifts-list[data-gift-layout="compact"] .sb-gift { border-radius: 0; border-width: 0 0 1px 0; padding: 5px 4px; background: transparent; }
.sb-gifts-list[data-gift-layout="compact"] .sb-gift:last-child { border-bottom: 0; }
/* gift cards: image on top, vertical */
.sb-gifts-list[data-gift-layout="cards"] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.sb-gifts-list[data-gift-layout="cards"] .sb-gift { flex-direction: column; align-items: flex-start; text-align: left; gap: 4px; padding: 8px; }
.sb-gifts-list[data-gift-layout="cards"] .sb-gift-img { width: 100%; height: auto; aspect-ratio: 1 / 1; }
/* ── Upsell layout variations (data-upsell-layout) ── */
.sb-upsells-list[data-upsell-layout="compact"] { gap: 0; }
.sb-upsells-list[data-upsell-layout="compact"] .sb-upsell-row { padding: 6px 6px; gap: 8px; background: transparent; border-radius: 0; border-bottom: 1px solid var(--sb-border, #ececf0); }
.sb-upsells-list[data-upsell-layout="compact"] .sb-upsell-row:last-child { border-bottom: 0; }
.sb-upsells-list[data-upsell-layout="compact"] .sb-upsell-img { width: 30px; height: 30px; }
.sb-upsells-list[data-upsell-layout="compact"] .sb-upsell-sub { display: none; }
.sb-upsells-list[data-upsell-layout="cards"] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.sb-upsells-list[data-upsell-layout="cards"] .sb-upsell-row { position: relative; flex-direction: column; align-items: flex-start; text-align: left; gap: 4px; }
.sb-upsells-list[data-upsell-layout="cards"] .sb-upsell-img { width: 100%; height: auto; aspect-ratio: 1 / 1; }
.sb-upsells-list[data-upsell-layout="cards"] .sb-upsell-cb { position: absolute; top: 8px; right: 8px; margin: 0; }
.sb-upsells-list[data-upsell-layout="bar"] { gap: 8px; }
.sb-upsells-list[data-upsell-layout="bar"] .sb-upsell-row { border-radius: 999px; padding: 8px 14px; border: 1.5px solid var(--sb-price, #1A1A1A); background: transparent; }
.sb-upsells-list[data-upsell-layout="bar"] .sb-upsell-img { width: 32px; height: 32px; }
.sb-gift { display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 6px 10px; background: var(--sb-gift-card-bg, #fff); color: var(--sb-gift-text, #1A1A1A); border-radius: 6px; border: 1px solid #E0E0E0; }
.sb-gift-img { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; flex-shrink: 0; background: #f3f3f5; }
.sb-gift-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sb-gift-product { font-size: 12px; font-weight: 600; color: var(--sb-gift-text, #1A1A1A); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-gift-variant { margin-top: 4px; max-width: 180px; font-size: 12px; padding: 3px 6px; border: 1px solid var(--sb-border, #d2d2d7); border-radius: 6px; background: #fff; }
.sb-gift-label { font-size: var(--sb-free-gift-size, 13px); font-weight: var(--sb-free-gift-weight, 800); }
.sb-gift-strike { text-decoration: line-through; color: #aaa; font-weight: 400; }
.sb-gift-meta { font-size: 10px; color: #888; }
.sb-gift--locked { opacity: .55; }
.sb-gift--unlocked { border-color: var(--sb-gift-unlocked, #1A1A1A); box-shadow: 0 0 0 1px var(--sb-gift-unlocked, rgba(46,125,50,.15)); }
.sb-gift--unlocked .sb-gift-meta { color: var(--sb-gift-unlocked, #1A1A1A); font-weight: 700; }
.sb-sub-gifts { margin-top: 8px; }
.sb-sub-card .sb-sub-gifts { width: 100%; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--sb-sub-border, #E0E0E0); }
.sb-sub-card .sb-sub-gifts .sb-gifts { margin: 0; padding: 0; background: transparent; border: 0; }

/* Volume discount */
.sb-volume { margin: 14px 0; text-align: center; }
.sb-volume-btn { color: #fff; font-weight: 700; padding: 10px 20px; border: 0; border-radius: 8px; cursor: pointer; }
.sb-volume-choose-wrap { text-align: center; margin-top: 6px; }
/* Volume-discount "Choose product" catalog modal. */
.sb-vol-modal-overlay { position: fixed; inset: 0; z-index: 99999; background: var(--sb-vol-overlay, rgba(0,0,0,.45)); display: flex; align-items: center; justify-content: center; padding: 16px; }
.sb-vol-modal { background: #fff; border-radius: 12px; width: min(680px, 100%); max-height: 86vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.sb-vol-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #ececf0; }
.sb-vol-modal-title { font-weight: 800; }
.sb-vol-modal-close { all: unset; cursor: pointer; font-size: 24px; line-height: 1; color: #888; padding: 0 4px; }
.sb-vol-modal-sub { padding: 8px 18px 0; font-size: 13px; color: #666; }
.sb-vol-modal-search { margin: 12px 18px 0; padding: 9px 12px; border: 1px solid #d2d2d7; border-radius: 8px; font-size: 14px; }
.sb-vol-modal-grid { padding: 16px 18px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.sb-vol-modal-loading, .sb-vol-modal-empty { grid-column: 1 / -1; text-align: center; color: #888; font-size: 14px; padding: 28px 0; }
.sb-vol-card { border: 1px solid #ececf0; border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.sb-vol-card-img { width: 100%; object-fit: cover; border-radius: 6px; background: #f3f3f5; }
.sb-vol-card-img--ph { background: #ececf0; }
.sb-vol-card-title { font-weight: 600; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sb-vol-card-price { font-size: 13px; font-weight: 700; }
.sb-vol-card-old { text-decoration: line-through; font-weight: 500; margin-left: 4px; }
.sb-vol-card-btn { margin-top: auto; border: 0; border-radius: 8px; padding: 8px 12px; font-weight: 700; cursor: pointer; }

/* Main CTA */
/* CTA inherits the theme accent by default (--sb-primary, neutral when unset)
   and the merchant's explicit colour wins via --sb-cta-bg / --sb-cta-text set
   inline by the block JS. No hard-coded brand green leaking onto the theme. */
.sb-cta { width: 100%; padding: 14px 20px; border: 0; border-radius: var(--sb-radius, 12px); background: var(--sb-cta-bg, var(--sb-primary, #1a1a1a)); color: var(--sb-cta-text, #FFFFFF); font-size: var(--sb-cta-size, 16px); font-weight: var(--sb-cta-weight, 800); cursor: pointer; transition: opacity .15s, transform .15s; margin-top: 6px; white-space: normal; line-height: 1.25; display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
/* Price-highlight pill on the button. */
.sb-cta-price { display: inline-flex; align-items: baseline; gap: 6px; padding: 2px 10px; border-radius: 999px; font-weight: 800; }
/* Inline {{variable}} pill inside the CTA button (price/savings highlight). */
.sb-cta-var { display: inline-block; padding: 1px 9px; border-radius: 999px; font-weight: 800; }
/* Compare-at token inside the button: crossed-out "before" price, no pill bg. */
.sb-cta-var--compare { background: none !important; padding: 0 2px; border-radius: 0; font-weight: 600; text-decoration: line-through; opacity: .7; }
.sb-cta-price-old { text-decoration: line-through; opacity: .6; font-weight: 600; font-size: .85em; }
.sb-cta:disabled { opacity: .6; cursor: not-allowed; }
.sb-trust-row { display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 11px; color: #666; margin-top: 10px; }
.sb-pay-icons { display: flex; gap: 4px; justify-content: center; margin-top: 10px; opacity: .8; font-size: 18px; }
.sb-pay-icons--brands { gap: 5px; opacity: 1; flex-wrap: wrap; }
.sb-pay-brand { width: 36px; height: 23px; border-radius: 3px; display: block; }
.sb-footer-text { text-align: center; font-size: 11px; color: #777; margin-top: 10px; }
.sb-cta:hover { opacity: .92; }
.sb-cta:active { transform: scale(.98); }
.sb-cta:disabled { opacity: .6; cursor: not-allowed; }
.sb-cta--oos { filter: grayscale(.45); }

/* Sticky ATC bar */
.sb-sticky { position: fixed; bottom: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; box-shadow: 0 -4px 20px rgba(0,0,0,.1); z-index: 999; }
.sb-sticky-title { font-weight: 600; font-size: 13px; }
.sb-sticky-btn { border: 0; border-radius: 8px; padding: 10px 16px; font-weight: 800; cursor: pointer; }

/* Quantity selector (per-tier stepper) */
.sb-qty { display: inline-flex; align-items: center; gap: 0; margin-top: 8px; border: 1.5px solid var(--sb-border, #E0E0E0); border-radius: 8px; overflow: hidden; width: fit-content; background: #fff; }
.sb-qty-btn { width: 30px; height: 30px; border: 0; background: #fff; color: #1a1a1a; font-size: 16px; font-weight: 700; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.sb-qty-btn:hover { background: #f3f3f5; }
.sb-qty-value { min-width: 34px; text-align: center; font-size: 14px; font-weight: 800; color: #1a1a1a; user-select: none; }

/* ── Separated-options picker (Color swatches + Size pills, native style) ── */
.sb-options { display: flex; flex-direction: column; gap: 12px; }
.sb-opt-row { display: flex; flex-direction: column; gap: 6px; }
.sb-opt-name { font-size: 12px; color: var(--sb-subtitle, #666); }
.sb-opt-name strong { color: var(--sb-title, #1a1a1a); font-weight: 700; }
.sb-opt-values { display: flex; flex-wrap: wrap; gap: 8px; }
.sb-opt-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 7px 12px; border: 1.5px solid var(--sb-border, #e0e0e0); border-radius: 8px; background: var(--sb-cards-bg, #fff); font-size: 13px; font-weight: 600; color: var(--sb-title, #1a1a1a); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.sb-opt-btn:hover { border-color: var(--sb-price, #1a1a1a); }
.sb-opt-btn--active { border-color: var(--sb-price, #1a1a1a); box-shadow: 0 0 0 1.5px var(--sb-price, #1a1a1a) inset; }
.sb-opt-btn--soldout { opacity: .4; text-decoration: line-through; }
.sb-opt-btn--swatch { padding: 5px 12px 5px 6px; border-radius: 100px; }
.sb-opt-btn--swatch.sb-opt-btn--active { box-shadow: none; border-width: 2px; }
.sb-opt-swatch { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); flex-shrink: 0; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.sb-opt-swatch-label { white-space: nowrap; }

/* ── Per-unit "rows" picker (build-a-box: #N + option pill + color swatches) ── */
.sb-rows-list { display: flex; flex-direction: column; gap: 10px; }
.sb-row { display: flex; align-items: center; gap: 12px; }
.sb-row-idx { font-size: 13px; font-weight: 700; color: var(--sb-subtitle, #6E6862); flex-shrink: 0; min-width: 20px; }
.sb-row-opts { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.sb-row-pill { display: inline-flex; align-items: center; gap: 5px; padding: 7px 13px; border: 1.5px solid var(--sb-flavor-pill-border, var(--sb-border, #E9E4DF)); border-radius: 10px; background: var(--sb-flavor-pill-bg, var(--sb-cards-bg, #fff)); font-size: 13px; color: var(--sb-flavor-pill-text, var(--sb-title, #1A1714)); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.sb-row-pill:hover { border-color: var(--sb-flavor-accent, var(--sb-price, #1A1714)); }
.sb-row-pill[disabled] { cursor: default; opacity: 1; }
.sb-row-pill[disabled]:hover { border-color: var(--sb-flavor-pill-border, var(--sb-border, #E9E4DF)); }
.sb-row-pill-name { color: var(--sb-subtitle, #6E6862); font-weight: 600; }
.sb-row-pill-val { font-weight: 700; }
.sb-row-swatches { display: inline-flex; align-items: center; gap: 8px; }
.sb-row-swatch { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); box-shadow: 0 1px 2px rgba(0,0,0,.12); cursor: pointer; padding: 0; flex-shrink: 0; transition: outline-color .12s; outline: 2px solid transparent; outline-offset: 2px; }
.sb-row-swatch:hover { outline-color: var(--sb-flavor-pill-border, rgba(0,0,0,.2)); }
.sb-row-swatch--active { outline-color: var(--sb-flavor-accent, var(--sb-price, #1A1714)); }
.sb-row-swatch--soldout { opacity: .35; cursor: not-allowed; }

/* ── Bundle & Save (fixed kit) — component list ── */
.sb-kit { margin-bottom: 12px; }
.sb-kit-list { display: flex; align-items: stretch; gap: 6px; }
.sb-kit-list--inline { flex-wrap: wrap; }
.sb-kit-list--stacked { flex-direction: column; }
.sb-kit-list--stacked .sb-kit-plus { align-self: center; }
.sb-kit-item { display: flex; align-items: center; gap: 8px; flex: 1 1 0; min-width: 0; padding: 8px; border: 1px solid var(--sb-border, #e0e0e0); border-radius: 10px; background: var(--sb-cards-bg, #fff); }
.sb-kit-img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex-shrink: 0; border: 1px solid rgba(0,0,0,.06); }
.sb-kit-img--ph { background: #ececf0; }
.sb-kit-meta { display: flex; flex-direction: column; min-width: 0; }
.sb-kit-title { font-size: 13px; font-weight: 600; color: var(--sb-title, #1a1a1a); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-kit-variant { font-size: 12px; color: var(--sb-subtitle, #666); }
.sb-kit-qty { font-size: 12px; color: var(--sb-subtitle, #666); }
.sb-kit-plus { display: flex; align-items: center; font-size: 18px; font-weight: 700; color: var(--sb-subtitle, #888); flex: 0 0 auto; }
.sb-kit-variant-select { margin-top: 4px; width: 100%; max-width: 180px; font-size: 12px; padding: 4px 6px; border: 1px solid var(--sb-border, #e0e0e0); border-radius: 6px; background: #fff; }
.sb-kit-opts .sb-opt-row, .sb-mm-opts .sb-opt-row { margin: 6px 0 0; }
.sb-kit-opts .sb-variant, .sb-mm-opts .sb-variant { padding: 0; }
.sb-kit-opts .sb-opt-values, .sb-mm-opts .sb-opt-values { flex-wrap: wrap; gap: 6px; }
.sb-mm-opts .sb-opt-btn { font-size: 12px; }
/* ── Frequently bought together row ── */
.sb-fbt { margin: 10px 0 2px; }
.sb-fbt-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sb-fbt-item { display: flex; align-items: center; gap: 8px; flex: 1 1 0; min-width: 0; padding: 8px; border: 1px solid var(--sb-border, #e0e0e0); border-radius: 10px; background: var(--sb-cards-bg, #fff); cursor: pointer; transition: border-color .15s, opacity .15s; }
.sb-fbt-item--on { border-color: var(--sb-primary, #1a1a1a); }
.sb-fbt-item:not(.sb-fbt-item--on) { opacity: .55; }
.sb-fbt-check { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--sb-primary, #1a1a1a); }
.sb-fbt-img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex-shrink: 0; border: 1px solid rgba(0,0,0,.06); }
.sb-fbt-img--ph { background: #ececf0; }
.sb-fbt-meta { display: flex; flex-direction: column; min-width: 0; }
.sb-fbt-name { font-size: 13px; font-weight: 600; color: var(--sb-title, #1a1a1a); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-fbt-price { font-size: 12px; color: var(--sb-subtitle, #666); }
.sb-fbt-plus { display: flex; align-items: center; font-size: 18px; font-weight: 700; color: var(--sb-subtitle, #888); flex: 0 0 auto; }
.sb-tier .sb-fbt { margin: 10px 0 2px; }

/* ── Embedded offers inside a selectable bar (kit / build-a-box / alternative) ── */
.sb-tier .sb-kit { margin: 10px 0 2px; }
.sb-tier .sb-mmbar { margin-top: 12px; }
.sb-kit-list--inline { align-items: center; }
.sb-kit-item { align-items: center; gap: 10px; padding: 10px; }
.sb-kit-meta { gap: 3px; flex: 1; }
/* Per-item price on the right of each kit product (fills the row). */
.sb-kit-item-price { flex-shrink: 0; font-size: 13px; font-weight: 700; color: var(--sb-price, #1a1a1a); white-space: nowrap; }
.sb-kit-opts { width: 100%; margin-top: 2px; }
.sb-kit-opts .sb-opt-name { font-size: 11px; font-weight: 700; color: var(--sb-subtitle, #888); }
.sb-kit-opts .sb-opt-swatch { width: 24px; height: 24px; }
.sb-kit-opts .sb-opt-btn, .sb-kit-variant-select { font-size: 12px; }
.sb-kit-img { width: 52px; height: 52px; }
/* Build-a-box builder inside a bar: tighten the section header + grid. */
.sb-mmbar .sb-mm-section { margin-bottom: 12px; }
.sb-mmbar .sb-mm-sec-head { margin-bottom: 8px; }
.sb-mmbar .sb-mm-card { padding: 8px; }
.sb-kit-price { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 12px; }
.sb-kit-price-val { font-size: 22px; font-weight: 800; color: var(--sb-price, #1a1a1a); }
.sb-kit-price-was { font-size: 14px; font-weight: 500; color: var(--sb-subtitle, #888); }
.sb-kit-save { font-size: 12px; font-weight: 700; color: #fff; background: var(--sb-accent, #FF4000); border-radius: 999px; padding: 2px 8px; }