/* 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)}
/* sst-home-save-marquee-20261027: "SAVE ¥… · N% below US" on the home price-check cards scrolls in a loop when it is
   wider than the card (phones); it stays still when it fits. Two copies of the text slide by their own width = seamless. */
.hb-save__t{display:inline-block; flex:none}
.hb-save--run{display:flex; max-width:100%; box-sizing:border-box; overflow:hidden}
.hb-save--run .hb-save__t{padding-right:24px; animation:hb-save-marquee var(--hb-save-s, 8s) linear infinite}
.hb-save--run:hover .hb-save__t{animation-play-state:paused}
@keyframes hb-save-marquee{from{transform:translateX(0)} to{transform:translateX(-100%)}}
@media (prefers-reduced-motion: reduce){
  .hb-save--run .hb-save__t{animation:none; padding-right:0; overflow:hidden; text-overflow:ellipsis; flex:1 1 auto; min-width:0}
  .hb-save--run .hb-save__t + .hb-save__t{display:none}
}
/* sst-home-deals-addbtn-20261112: owner 11/12 — the "Cheaper than USA" cards add to the cart by the Flash Sale cards'
   rule: "− 1 +" picks how many, the ADD TO CART button under it adds them (before: − / + changed the cart quantity).
   Only cards with .hb-card--add (this row); the best-sellers row keeps its own − n + stepper. */
.hb-card.hb-card--add{grid-template-rows:150px 38px 30px 24px 38px 18px 36px 40px 18px}
.hb-card.hb-card--add.hb-card--plain{grid-template-rows:150px 38px 30px 24px 0 18px 36px 40px 18px}
.hb-card--add .hb-card__buy .hb-qty{flex:1; height:36px; grid-template-columns:44px 1fr 44px !important}
.hb-card--add .hb-qty button{font-size:18px}
.hb-card--add .hb-qty input.hb-qty__n{box-sizing:border-box; width:100%; min-width:0; height:100%; min-height:0; margin:0; padding:0; border:0; border-left:1px solid #ececec; border-right:1px solid #ececec; border-radius:0; outline:0; box-shadow:none; background:transparent; color:#1a1a1a; font:700 15px/1 var(--sst-font, sans-serif); font-variant-numeric:tabular-nums; text-align:center; -moz-appearance:textfield; appearance:none}
.hb-card--add .hb-qty input.hb-qty__n:focus-visible{background:#fff7fa; box-shadow:inset 0 0 0 2px #9e2c5f}
.hb-add{position:relative; display:flex; align-items:center; justify-content:center; box-sizing:border-box; width:100%; height:40px; min-height:0; margin:0; padding:0 10px; border:1px solid #9e2c5f; border-radius:2px; background:#9e2c5f; color:#fff; font:700 11px/1 var(--sst-font, sans-serif); letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; cursor:pointer; overflow:visible; touch-action:manipulation; transition:background .2s, border-color .2s}
@media (hover:hover){ .hb-add:hover{background:#7a2149; border-color:#7a2149; color:#fff} }
.hb-add:active{background:#7a2149; border-color:#7a2149}
.hb-add:focus-visible{outline:2px solid #9e2c5f; outline-offset:2px}
.hb-add__l{transition:opacity .2s, transform .2s}
.hb-add__c{position:absolute; left:50%; top:50%; width:20px; height:20px; margin:-10px 0 0 -10px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; opacity:0; transition:opacity .2s}
.hb-add.is-added .hb-add__l{opacity:0; transform:translateY(-6px)}
.hb-add.is-added .hb-add__c{opacity:1}
.hb-card__cart--warn{color:#b3261e}
@media (max-width:749px){
  .hb-card.hb-card--add{grid-template-rows:120px 38px 30px 24px 38px 18px 40px 42px 18px}
  .hb-card.hb-card--add.hb-card--plain{grid-template-rows:120px 38px 30px 24px 0 18px 40px 42px 18px}
  .hb-card--add .hb-card__buy .hb-qty{height:40px; grid-template-columns:42px 1fr 42px !important}
  .hb-add{height:42px; font-size:10.5px; letter-spacing:.1em}
}
/* phones / tablets: a typed-in number field under 16px makes iOS zoom the page */
@media (max-width:1024px) and (pointer:coarse){ .hb-card--add .hb-qty input.hb-qty__n{font-size:16px} }
@media (prefers-reduced-motion:reduce){ .hb-add, .hb-add__l, .hb-add__c{transition:none} }
html[data-sst-theme="dark"] .hb-card--add .hb-qty input.hb-qty__n{color:var(--sst-ink,#e8e8e8); border-color:var(--sst-line,#2e2e32)}
html[data-sst-theme="dark"] .hb-card--add .hb-qty input.hb-qty__n:focus-visible{background:#2a1c23; box-shadow:inset 0 0 0 2px var(--sst-accent,#bd3d76)}
html[data-sst-theme="dark"] .hb-add{background:var(--sst-accent,#bd3d76); border-color:var(--sst-accent,#bd3d76); color:#fff}
html[data-sst-theme="dark"] .hb-card__cart--warn{color:#ff8a80}
/* sst-home-deals-bigger-20261112: owner 11/12 18:21 (screenshot of the row on a ~1700px screen, eight narrow cards in
   view): "make this area become bigger". From tablets up the cards are wider - a whole number of cards fills the row:
   5 on desktops (the same count as the Flash Sale cards right above), 4 on small laptops, 3 on tablets - with a bigger
   photo, bigger words and taller controls; the row title grows too. Every card keeps the same row heights, so all
   photos keep one size and end on one line. Only this row (.hb-row--usdeal); phones (<750px) are unchanged. */
@media (min-width:750px){
  .hb-row--usdeal .hb-row__head{margin-bottom:16px}
  .hb-row--usdeal .hb-row__title{font-size:28px}
  .hb-row--usdeal .hb-track{gap:16px; grid-auto-columns:calc((100% - 2 * 16px) / 3)}
  .hb-row--usdeal .hb-card.hb-card--add{grid-template-rows:200px 44px 32px 36px 46px 20px 42px 46px 18px; row-gap:8px; padding:14px; border-radius:10px}
  .hb-row--usdeal .hb-card.hb-card--add.hb-card--plain{grid-template-rows:200px 44px 32px 36px 0 20px 42px 46px 18px}
  .hb-row--usdeal .hb-card__price{align-items:center}
  .hb-row--usdeal .hb-card__name{font-size:15px; line-height:22px}
  .hb-row--usdeal .hb-chip{height:30px; padding:0 11px; font-size:12.5px}
  .hb-row--usdeal .hb-card__price b{font-size:23px}
  .hb-row--usdeal .hb-usd{font-size:13.5px}
  .hb-row--usdeal .hb-card__extra{font-size:13px; line-height:20px; gap:4px}
  .hb-row--usdeal .hb-card__stock{font-size:13.5px; line-height:20px}
  .hb-row--usdeal .hb-card--add .hb-card__buy .hb-qty{height:42px; grid-template-columns:52px 1fr 52px !important}
  .hb-row--usdeal .hb-card--add .hb-qty button{font-size:20px}
  .hb-row--usdeal .hb-card--add .hb-qty input.hb-qty__n{font-size:16px}
  .hb-row--usdeal .hb-add{height:46px; font-size:12.5px}
  .hb-row--usdeal .hb-card__cart{font-size:12.5px}
  .hb-row--usdeal .hb-side{width:54px; height:54px}
}
@media (min-width:1000px){
  .hb-row--usdeal .hb-track{grid-auto-columns:calc((100% - 3 * 16px) / 4)}
  .hb-row--usdeal .hb-card.hb-card--add{grid-template-rows:220px 44px 32px 36px 46px 20px 42px 46px 18px}
  .hb-row--usdeal .hb-card.hb-card--add.hb-card--plain{grid-template-rows:220px 44px 32px 36px 0 20px 42px 46px 18px}
}
@media (min-width:1400px){
  .hb-row--usdeal .hb-track{grid-auto-columns:calc((100% - 4 * 16px) / 5)}
  .hb-row--usdeal .hb-card.hb-card--add{grid-template-rows:240px 44px 32px 36px 46px 20px 42px 46px 18px}
  .hb-row--usdeal .hb-card.hb-card--add.hb-card--plain{grid-template-rows:240px 44px 32px 36px 0 20px 42px 46px 18px}
}
/* sst-home-deals-savetag-20261112: owner 11/12 18:36 (screenshot of a "Below USA Market Price" card): "Turn SAVE HK$XXX
   XX% below US into a tag and put it on item photo. also add a green frame", then 18:54: "Put XX% below right next to
   TCGplayer market price. And move green tag to right down corner with only SAVE HK$XX".
   - "SAVE HK$578" is a green tag on the photo's bottom-right corner (a card under 3% keeps its one wording,
     "BELOW USA MARKET PRICE", in the same tag)
   - "46% below US" stands right after "TCGplayer market HK$1,266", green and bold; where the card is too narrow for
     both on one line (phones, small laptops) it drops to the next line - the text column keeps its two-line height
   - every card of this row has a green frame (2px; the padding is 1px smaller, so nothing inside moves)
   Only this row (.hb-row--usdeal). The tag is not pressable: a press on it goes to the photo's link under it.
   --hb-ph = the photo row's height, --hb-pad = the card's padding (the tag is placed from the card's corner). */
.hb-row--usdeal .hb-card{--hb-ph:120px; --hb-pad:9px; position:relative; border:2px solid #0e9f5f; padding:9px}
html[data-sst-theme="dark"] .hb-row--usdeal .hb-card{border-color:#19b36e}
.hb-row--usdeal .hb-card__extra{position:static; flex-direction:row; flex-wrap:wrap; align-items:baseline; align-content:center; column-gap:6px; row-gap:2px}
.hb-row--usdeal .hb-pct{color:#0e7f4c; font-weight:800; white-space:nowrap}
html[data-sst-theme="dark"] .hb-row--usdeal .hb-pct{color:#3ccf8e}
.hb-row--usdeal .hb-save,
.hb-row--usdeal .hb-save.hb-save--run{position:absolute; z-index:2; top:calc(var(--hb-pad) + var(--hb-ph) - 5px); right:calc(var(--hb-pad) + 5px); left:auto; transform:translateY(-100%); display:block; box-sizing:border-box; max-width:calc(100% - 2 * var(--hb-pad) - 10px); padding:4px 8px 3px; border-radius:5px; background:#0e7f4c; color:#fff; font-size:12px; font-weight:800; line-height:1.2; letter-spacing:.01em; text-align:right; white-space:normal; overflow:visible; box-shadow:0 2px 6px rgba(0,0,0,.2); pointer-events:none}
html[data-sst-theme="dark"] .hb-row--usdeal .hb-save{background:#12915a; box-shadow:0 2px 6px rgba(0,0,0,.45)}
.hb-row--usdeal .hb-save .hb-save__t,
.hb-row--usdeal .hb-save.hb-save--run .hb-save__t{display:block; padding:0; animation:none; overflow:visible; text-overflow:clip; min-width:0}
.hb-row--usdeal .hb-save .hb-save__t + .hb-save__t{display:none}
.hb-row--usdeal .hb-save__a{display:block; white-space:nowrap}
@media (min-width:750px){
  .hb-row--usdeal .hb-card{--hb-ph:200px; --hb-pad:13px}
  .hb-row--usdeal .hb-card.hb-card--add{padding:13px}
  .hb-row--usdeal .hb-save,
  .hb-row--usdeal .hb-save.hb-save--run{top:calc(var(--hb-pad) + var(--hb-ph) - 7px); right:calc(var(--hb-pad) + 7px); max-width:calc(100% - 2 * var(--hb-pad) - 14px); padding:6px 11px 5px; border-radius:6px; font-size:15px}
}
@media (min-width:1000px){
  .hb-row--usdeal .hb-card{--hb-ph:220px}
}
@media (min-width:1400px){
  .hb-row--usdeal .hb-card{--hb-ph:240px}
  /* five cards per row: a hair tighter, so "TCGplayer market HK$13,999" + "36% below US" still share the line */
  .hb-row--usdeal .hb-card__extra{column-gap:4px}
  .hb-row--usdeal .hb-pct{font-size:12.5px}
}