/* sst-home-boost-20261022: homepage sales ideas (PREVIEW). Each block only applies while html has sst-hb-<key>. */

/* ---------- hero: smaller heading, products on the first screen ---------- */
html.sst-hb-hero .sst-top .sstt-hero-head{padding-top:18px !important; padding-bottom:6px !important; min-height:0 !important}
html.sst-hb-hero .sst-top .sstt-display{font-size:clamp(26px,2.6vw,40px) !important; line-height:1.05 !important; letter-spacing:-.01em !important; margin:6px 0 4px !important}
html.sst-hb-hero .sst-top .sstt-display span{display:inline !important}
html.sst-hb-hero .sst-top .sstt-lede{margin:4px 0 10px !important; font-size:14px !important}
html.sst-hb-hero .sst-top .sstt-btn-xl{padding:10px 18px !important; font-size:12px !important; min-height:0 !important}
html.sst-hb-hero .sst-top .sstt-hero-idx{display:none !important}
html.sst-hb-hero .sst-top .sstt-hero-grid{padding-top:8px !important}
html.sst-hb-hero .sst-top .sstt-hero{padding-top:0 !important}
html.sst-hb-hero .sst-top .sstt-hero .hb-rows{position:relative; z-index:2; padding-top:12px}

/* ---------- rows replace "02 — Box picks" ---------- */
html.sst-hb-rows .sst-top .sst-top__boxsec{display:none !important}
/* 10/22 17:50 owner "cut the space": with Box picks gone, "03 — PSA recommended" moves up under the hero cue (was 46px + 16px) */
html.sst-hb-rows .sst-top .sst-top__psasec > .sstt-wrap > .sstt-vault:first-child{margin-top:8px !important}
html.sst-hb-rows .sst-top .sstt-hero{padding-bottom:0 !important}

/* ---------- sold-out offers off the TOP cards ---------- */
html.sst-hb-soldout .sst-top .sstt-offer[data-offer-state="unavailable"]{display:none !important}

/* ---------- rows ---------- */
.hb-rows{display:flex; flex-direction:column; gap:28px; padding-top:28px; padding-bottom:28px; font-family:var(--sst-font, "Figtree", system-ui, sans-serif)}
.hb-row__head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:12px}
.hb-row__title{margin:0; font-size:22px; line-height:1.15; font-weight:800; color:#1a1a1a; letter-spacing:-.01em}
.hb-row__title em{font-style:normal; font-size:13px; font-weight:700; color:#9e2c5f; vertical-align:middle; margin-left:4px}
.hb-row__trust{display:none; margin:4px 0 0; font-size:12.5px; color:#6b6b6b}
html.sst-hb-trust .hb-row__trust{display:block}
.hb-row__nav{display:flex; align-items:center; gap:6px; flex:none}
.hb-row__nav [data-hb-scroll]{width:34px; height:34px; min-height:0; padding:0; border:1px solid #d9d9d9; border-radius:50%; background:#fff; color:#1a1a1a; font:500 20px/1 var(--sst-font, sans-serif); cursor:pointer}
.hb-row__nav [data-hb-scroll]:hover{border-color:#9e2c5f; color:#9e2c5f}
.hb-row__all{min-height:0; height:34px; padding:0 14px; border:1px solid #9e2c5f; border-radius:2px; background:#fff; color:#9e2c5f; font:700 12px/1 var(--sst-font, sans-serif); cursor:pointer; white-space:nowrap}
.hb-row__all:hover{background:#9e2c5f; color:#fff}
.hb-track{display:grid; grid-auto-flow:column; grid-auto-columns:220px; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding:2px 2px 10px; scrollbar-width:thin}
/* side arrows (Cheaper than US, Pokemon booster boxes): banner-slider style < >, a bit bigger, fade in on hover /
   keyboard focus, fade out at the start / end of the track */
.hb-slide{position:relative}
.hb-side{position:absolute; top:calc(50% - 30px); z-index:3; display:flex; align-items:center; justify-content:center; width:48px; height:48px; min-height:0; padding:0; border:0; border-radius:2px; background:rgba(20,20,20,.5); color:#fff; cursor:pointer; opacity:0; visibility:hidden; transition:opacity .35s ease, visibility 0s linear .35s, background .2s}
.hb-side svg{width:28px; height:28px}
.hb-side--prev{left:0}
.hb-side--next{right:0}
.hb-side--next svg{transform:scaleX(-1)}
.hb-side:hover{background:rgba(20,20,20,.72)}
.hb-slide:hover .hb-side, .hb-slide:focus-within .hb-side{opacity:1; visibility:visible; transition:opacity .35s ease, visibility 0s, background .2s}
.hb-slide.hb-at-start .hb-side--prev, .hb-slide.hb-at-end .hb-side--next{opacity:0; visibility:hidden; transition:opacity .35s ease, visibility 0s linear .35s, background .2s}
@media (hover:none){ .hb-side{display:none} }
@media (prefers-reduced-motion:reduce){ .hb-side{transition:none !important} }
.hb-loading{padding:40px 0; color:#8a8a8a; font-size:13px}

/* card: fixed rows so every button sits at the same height whatever the name / options / price */
.hb-card{scroll-snap-align:start; display:grid; grid-template-rows:150px 38px 30px 24px 38px 18px 34px 18px; row-gap:6px; padding:10px; border:1px solid #e6e6e6; border-radius:8px; background:#fff; box-sizing:border-box}
.hb-card--plain{grid-template-rows:150px 38px 30px 24px 0 18px 34px 18px}
.hb-card__img{display:flex; align-items:center; justify-content:center; background:#fff; border-radius:6px; overflow:hidden}
.hb-card__img img{width:100%; height:100%; object-fit:contain}
.hb-card__name{font-size:13px; line-height:19px; font-weight:700; color:#1a1a1a; text-decoration:none; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.hb-card__name:hover{color:#9e2c5f}
.hb-card__opts{display:flex; gap:4px; overflow:hidden}
.hb-chip{min-height:0; height:28px; padding:0 9px; border:1px solid #d9d9d9; border-radius:2px; background:#fff; color:#1a1a1a; font:600 11.5px/1 var(--sst-font, sans-serif); cursor:pointer; white-space:nowrap}
.hb-chip[aria-pressed="true"]{border-color:#9e2c5f; background:#9e2c5f; color:#fff}
.hb-chip:disabled{cursor:default; opacity:1}
.hb-card__price{display:flex; align-items:baseline; gap:6px; white-space:nowrap; overflow:hidden}
.hb-card__price b{font-size:18px; font-weight:800; color:#1a1a1a; font-variant-numeric:tabular-nums}
.hb-usd{font-size:12px; color:#6b6b6b; font-variant-numeric:tabular-nums}
.hb-usd:empty{display:none}
html:not(.sst-hb-usd) .hb-usd{display:none}
.hb-usd--inline{margin-left:6px; font-size:11.5px; font-weight:500}
.hb-card__extra{display:flex; flex-direction:column; gap:2px; overflow:hidden; font-size:11.5px; line-height:16px}
.hb-us{color:#6b6b6b; white-space:nowrap}
.hb-save{align-self:flex-start; padding:0 6px; border-radius:3px; background:rgba(14,159,95,.12); color:#0e7f4c; font-weight:800; white-space:nowrap}
.hb-card__stock{font-size:12px; line-height:18px; color:#2f855a; white-space:nowrap}
.hb-card__buy{display:flex; gap:6px}
.hb-qty{display:inline-grid; grid-template-columns:28px 28px 28px; height:34px; border:1px solid #d9d9d9; border-radius:2px; overflow:hidden; background:#fff; box-sizing:border-box}
.hb-qty button{min-height:0; height:auto; padding:0; border:0; border-radius:0; background:transparent; color:#1a1a1a; font:500 17px/1 var(--sst-font, sans-serif); cursor:pointer}
.hb-qty button:disabled{color:#c8c8c8; cursor:default}
@media (hover:hover){ .hb-qty button:hover:not(:disabled){background:#fff3f7; color:#9e2c5f} }
.hb-qty output{display:flex; align-items:center; justify-content:center; border-left:1px solid #ececec; border-right:1px solid #ececec; font:700 13px/1 var(--sst-font, sans-serif); font-variant-numeric:tabular-nums}
/* 10/22 owner: no "Add to cart" button — the − n + stepper is the cart quantity and takes the whole row; + in the brand
   colour as the add action */
.hb-card__buy .hb-qty{flex:1; grid-template-columns:1fr 1fr 1fr !important}
.hb-qty button[data-hb-d="1"]{background:#9e2c5f; color:#fff; font-weight:700}
.hb-qty button[data-hb-d="1"]:disabled{background:#e6c9d6; color:#fff}
@media (hover:hover){ .hb-qty button[data-hb-d="1"]:hover:not(:disabled){background:#7a2149; color:#fff} }
.hb-card__cart{font-size:11.5px; line-height:18px; font-weight:700; color:#9e2c5f; white-space:nowrap}
@media (max-width:749px){
  .hb-row__head{align-items:flex-start; flex-direction:column; gap:8px}
  .hb-row__nav [data-hb-scroll], .hb-side{display:none}
  .hb-track{grid-auto-columns:168px}
  .hb-card{grid-template-rows:120px 38px 30px 24px 38px 18px 34px 18px}
  .hb-card--plain{grid-template-rows:120px 38px 30px 24px 0 18px 34px 18px}
  .hb-qty{grid-template-columns:24px 24px 24px}
}

/* ---------- "Your order" progress to the coupon threshold ---------- */
.hb-cartbar{display:none; margin:8px 0; padding:9px 10px; border:1px solid #f0d9e3; border-radius:6px; background:#fff7fa; font-size:12px; line-height:1.35; color:#1a1a1a}
html.sst-hb-cartbar .hb-cartbar{display:block}
.hb-cartbar b{color:#9e2c5f}
.hb-cartbar__track{margin-top:6px; height:6px; border-radius:3px; background:#f0e2e8; overflow:hidden}
.hb-cartbar__track i{display:block; height:100%; width:0; background:#9e2c5f; transition:width .3s}
/* 10/22 owner: no green box once unlocked — it keeps the site pink, the rainbow text + bar mark "unlocked" */
.hb-cartbar--ok b{color:#9e2c5f}

/* ---------- set card lists: box price chip ---------- */
.hb-setchip{display:none}
html.sst-hb-sets .hb-set{display:flex; flex-direction:column}
html.sst-hb-sets .hb-setchip{display:block; margin:4px 0 0; padding:0 12px 8px; font-size:12px; font-weight:700; color:#9e2c5f; text-decoration:none}
html.sst-hb-sets .hb-setchip:hover{text-decoration:underline}

/* ---------- dark ---------- */
html[data-sst-theme="dark"] .hb-row__title{color:var(--sst-ink,#e8e8e8)}
html[data-sst-theme="dark"] .hb-card, html[data-sst-theme="dark"] .hb-row__nav [data-hb-scroll], html[data-sst-theme="dark"] .hb-qty, html[data-sst-theme="dark"] .hb-chip{background:var(--sst-surface,#1a1a1c); border-color:var(--sst-line,#2e2e32); color:var(--sst-ink,#e8e8e8)}
html[data-sst-theme="dark"] .hb-card__img{background:#232326}
html[data-sst-theme="dark"] .hb-card__name, html[data-sst-theme="dark"] .hb-card__price b, html[data-sst-theme="dark"] .hb-qty button, html[data-sst-theme="dark"] .hb-qty output{color:var(--sst-ink,#e8e8e8)}
html[data-sst-theme="dark"] .hb-qty output{border-color:var(--sst-line,#2e2e32)}
html[data-sst-theme="dark"] .hb-chip[aria-pressed="true"], html[data-sst-theme="dark"] .hb-qty button[data-hb-d="1"]:not(:disabled){background:var(--sst-accent,#bd3d76); border-color:var(--sst-accent,#bd3d76); color:#fff}
html[data-sst-theme="dark"] .hb-row__all{background:transparent; border-color:var(--sst-accent,#bd3d76); color:var(--sst-accent-text,#e58bb5)}
html[data-sst-theme="dark"] .hb-cartbar{background:#2a1c23; border-color:#4a2a3a; color:var(--sst-ink,#e8e8e8)}