/* sst-qo-cards-20261112: Quick Order product cards - offers as one-line rows, the 4 box versions in one card (All
   view), HOT on the photo. One file; each part keeps its own marker; the working copies are the preview's override
   files of the same names. */

/* ===== qo-offer-rows.css ===== */
/* sst-qo-offer-rows-20261109: Quick Order product cards (grid view, every tab except PSA10).
   Owner 11/09 17:47 mock-up: the offer boxes (Sealed / No Shrink) stacked as rows, one line each:
       SEALED      371 in stock   ¥7,800   [ - 0 + ]
       NO SHRINK   500 in stock   ¥7,498   [ - 0 + ]
   Layout per card width (the card <tr> is a size container):
     wide   (desktop, card content >= 264px, e.g. 5 cards on a 1590px screen): label | stock | price | stepper, ONE line
     medium (desktop, card content < 264px, laptops 1280-1440 / tablets): label | price | stepper, stock line under it
     phone  (< 750px screen): untouched, the theme already stacks the offers there (big touch stepper)
   Colours (sale red, FLASH pill, In cart purple, dark mode) are untouched: only the layout changes. */

@media (min-width: 750px) {
/* ---------- card: one column, offers stacked ---------- */
html body .sst-qo:not(.sst-qo--list):not(#sst-never) .sst-qo__group:not([data-qo-subgroup="psa10"]):not([data-qo-subgroup="psabo"]) .sst-qo__table tbody tr:has(> td.sst-qo__offer) {
  container: sst-qo-card / inline-size;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto !important;
  grid-template-areas: "info" "sealed" !important;
  row-gap: 8px !important;
  column-gap: 0 !important;
  padding: 6px !important;
  align-content: start !important;
}
html body .sst-qo:not(.sst-qo--list):not(#sst-never) .sst-qo__group:not([data-qo-subgroup="psa10"]):not([data-qo-subgroup="psabo"]) .sst-qo__table tbody tr:has(> td.sst-qo__offer--noshrink) {
  grid-template-areas: "info" "sealed" "nos" !important;
}
html body .sst-qo:not(.sst-qo--list):not(#sst-never) .sst-qo__group:not([data-qo-subgroup="psa10"]):not([data-qo-subgroup="psabo"]) .sst-qo__table tbody tr:has(> td.sst-qo__offer) > td.sst-qo__offer {
  grid-column: 1 / -1 !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  align-self: start !important;
}
/* sst-qo-offer-order-20261112: each offer sits in its own named row. On tablets (750-1024px) the theme gives the offer of
   a single-offer card (Item / Set ...) the area "offer", which is not one of the rows above, so it dropped to the END of
   the card - under the Unsealed / Damaged lines (seen at 820px before the upload). */
html body .sst-qo:not(.sst-qo--list):not(#sst-never) .sst-qo__group:not([data-qo-subgroup="psa10"]):not([data-qo-subgroup="psabo"]) .sst-qo__table tbody tr:has(> td.sst-qo__offer) > td.sst-qo__offer--sealed {
  grid-row: sealed !important;
}
html body .sst-qo:not(.sst-qo--list):not(#sst-never) .sst-qo__group:not([data-qo-subgroup="psa10"]):not([data-qo-subgroup="psabo"]) .sst-qo__table tbody tr:has(> td.sst-qo__offer) > td.sst-qo__offer--noshrink {
  grid-row: nos !important;
}

/* ---------- offer row: label / stock / price / stepper are grid items of the row ---------- */
html body .sst-qo:not(.sst-qo--list):not(#sst-never) .sst-qo__group:not([data-qo-subgroup="psa10"]):not([data-qo-subgroup="psabo"]) .sst-qo__table tbody tr > :is(td.sst-qo__offer, td.sst-qo-sum) > .sst-qo__offer-cell {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto 64px !important;
  grid-template-rows: auto auto !important;
  grid-template-areas: "label price qty" "stock stock qty" !important;
  align-items: center !important;
  justify-content: stretch !important;
  column-gap: 4px !important; /* sst-qo-offer-bigfont-20261110: was 5px */
  row-gap: 1px !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 5px 4px !important;
  text-align: left !important;
}
html body .sst-qo:not(.sst-qo--list):not(#sst-never) .sst-qo__group:not([data-qo-subgroup="psa10"]):not([data-qo-subgroup="psabo"]) .sst-qo__table tbody tr > :is(td.sst-qo__offer, td.sst-qo-sum) .sst-qo__offer-info {
  display: contents !important;
}
html body .sst-qo:not(.sst-qo--list):not(#sst-never) .sst-qo__group:not([data-qo-subgroup="psa10"]):not([data-qo-subgroup="psabo"]) .sst-qo__table tbody tr > :is(td.sst-qo__offer, td.sst-qo-sum) .sst-qo__offer-label {
  grid-area: label !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  justify-self: start !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  font-size: 11px !important; /* sst-qo-offer-bigfont-20261110: was 9.5px */
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  text-align: left !important;
  /* sst-qo-offer-longlabel-20261112: was nowrap. Ordinary labels (SEALED, NO SHRINK ...) still fit one line; a long one
     ("CARD ONLY (UNGRADED)", "MAGAZINE + PROMO CARD") takes two lines instead of running under the price. */
  white-space: normal !important;
  overflow-wrap: break-word !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
/* sst-qo-offer-gate-20261112: a pre-order that has not opened yet carries a countdown in its box ("Pre-order opens in
   0d 03:15:11"). It is one more item of the row's grid: left to itself it made extra columns, the label column shrank to
   nothing and "BOX" sat on the price (seen on the OP-18 card before the upload). It gets its own line under the row. */
html body .sst-qo:not(.sst-qo--list):not(#sst-never) .sst-qo__group:not([data-qo-subgroup="psa10"]):not([data-qo-subgroup="psabo"]) .sst-qo__table tbody tr > :is(td.sst-qo__offer, td.sst-qo-sum) > .sst-qo__offer-cell .sst-qo__release-gate {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  justify-self: stretch !important;
  min-width: 0 !important;
}
html body .sst-qo:not(.sst-qo--list):not(#sst-never) .sst-qo__group:not([data-qo-subgroup="psa10"]):not([data-qo-subgroup="psabo"]) .sst-qo__table tbody tr > :is(td.sst-qo__offer, td.sst-qo-sum) .sst-qo__offer-stock {
  grid-area: stock !important;
  justify-self: start !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  font-size: 13px !important; /* sst-qo-offer-bigfont-20261110: was 10.5px */
  line-height: 1.2 !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
html body .sst-qo:not(.sst-qo--list):not(#sst-never) .sst-qo__group:not([data-qo-subgroup="psa10"]):not([data-qo-subgroup="psabo"]) .sst-qo__table tbody tr > :is(td.sst-qo__offer, td.sst-qo-sum) .sst-qo__offer-price {
  grid-area: price !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center !important;
  justify-self: end !important;
  min-width: 0 !important;
  margin: 0 !important;
  font-size: 16px !important; /* sst-qo-offer-bigfont-20261110: was 13px */
  line-height: 1.15 !important;
  text-align: right !important;
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums;
}
/* the header currency button's "≈ NT$1,619" guide (currency-switch, sst-cur-approx): small, under the ¥ price */
html body .sst-qo:not(.sst-qo--list):not(#sst-never) .sst-qo__group:not([data-qo-subgroup="psa10"]):not([data-qo-subgroup="psabo"]) .sst-qo__table tbody tr > :is(td.sst-qo__offer, td.sst-qo-sum) .sst-qo__offer-price .sst-cur-approx {
  display: block !important;
  margin: 0 !important;
  font-size: 11px !important; /* sst-qo-offer-bigfont-20261110: was 9.5px */
  font-weight: 600 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}
/* sale: old price small above the new one, both right-aligned */
html body .sst-qo:not(.sst-qo--list):not(#sst-never) .sst-qo__group:not([data-qo-subgroup="psa10"]):not([data-qo-subgroup="psabo"]) .sst-qo__table tbody tr > :is(td.sst-qo__offer, td.sst-qo-sum) .sst-qo__sale-prices {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 0 !important;
}
html body .sst-qo:not(.sst-qo--list):not(#sst-never) .sst-qo__group:not([data-qo-subgroup="psa10"]):not([data-qo-subgroup="psabo"]) .sst-qo__table tbody tr > :is(td.sst-qo__offer, td.sst-qo-sum) .sst-qo__sale-regular {
  font-size: 11px !important; /* sst-qo-offer-bigfont-20261110: was 9.5px */
  line-height: 1.1 !important;
}
/* stepper / restock bell / its placeholder: the right-hand slot */
html body .sst-qo:not(.sst-qo--list):not(#sst-never) .sst-qo__group:not([data-qo-subgroup="psa10"]):not([data-qo-subgroup="psabo"]) .sst-qo__table tbody tr > :is(td.sst-qo__offer, td.sst-qo-sum) .sst-qo__qty,
html body .sst-qo:not(.sst-qo--list):not(#sst-never) .sst-qo__group:not([data-qo-subgroup="psa10"]):not([data-qo-subgroup="psabo"]) .sst-qo__table tbody tr > :is(td.sst-qo__offer, td.sst-qo-sum) .sst-rsn-btn,
html body .sst-qo:not(.sst-qo--list):not(#sst-never) .sst-qo__group:not([data-qo-subgroup="psa10"]):not([data-qo-subgroup="psabo"]) .sst-qo__table tbody tr > :is(td.sst-qo__offer, td.sst-qo-sum) .sst-qo__offer-action-empty {
  grid-area: qty !important;
  justify-self: stretch !important;
  align-self: center !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
}
/* NO SHRINK "i" mark: 2px from the text so "NO SHRINK i" fits the 67px label column (not the FLASH pill, which uses the same ::after) */
html body .sst-qo:not(.sst-qo--list):not(#sst-never) .sst-qo__group:not([data-qo-subgroup="psa10"]):not([data-qo-subgroup="psabo"]) .sst-qo__table tbody tr:not(.sst-qo__row--flash) > td.sst-qo__offer--noshrink .sst-qo__offer-label::after,
html body .sst-qo:not(.sst-qo--list):not(#sst-never) .sst-qo__group:not([data-qo-subgroup="psa10"]):not([data-qo-subgroup="psabo"]) .sst-qo__table tbody tr > td.sst-qo__offer--noshrink:not(.sst-qo__offer--sale) .sst-qo__offer-label::after {
  margin-left: 2px !important;
}
/* FLASH pill (qo-flash-tag.css) stays above the label, left-aligned like the label */
html body .sst-qo:not(.sst-qo--list):not(#sst-never) .sst-qo__group:not([data-qo-subgroup="psa10"]):not([data-qo-subgroup="psabo"]) .sst-qo__table tbody tr.sst-qo__row--sale.sst-qo__row--flash > td.sst-qo__offer--sale .sst-qo__offer-label {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
}
/* "In cart" tag: sits on the top border so it does not cover the + button */
html body .sst-qo:not(.sst-qo--list):not(#sst-never) .sst-qo__group:not([data-qo-subgroup="psa10"]):not([data-qo-subgroup="psabo"]) .sst-qo__table tbody tr > :is(td.sst-qo__offer, td.sst-qo-sum) > .sst-qo__offer-cell.sst-qo-incart::after {
  top: -8px !important;
  right: 6px !important;
  z-index: 2 !important;
  padding: 0 7px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  line-height: 15px !important;
}
/* sst-qo-incart-unclip-20261110: the theme gives td + offer cell overflow:hidden, which cut the top half of
   the tag off (owner screenshot 11/10 10:08). Only while the box is in the cart, the box lets it stick out. */
html body .sst-qo:not(.sst-qo--list):not(#sst-never) .sst-qo__group:not([data-qo-subgroup="psa10"]):not([data-qo-subgroup="psabo"]) .sst-qo__table tbody tr > :is(td.sst-qo__offer, td.sst-qo-sum):has(> .sst-qo__offer-cell.sst-qo-incart),
html body .sst-qo:not(.sst-qo--list):not(#sst-never) .sst-qo__group:not([data-qo-subgroup="psa10"]):not([data-qo-subgroup="psabo"]) .sst-qo__table tbody tr > :is(td.sst-qo__offer, td.sst-qo-sum) > .sst-qo__offer-cell.sst-qo-incart {
  overflow: visible !important;
}

/* ---------- desktop / tablet: compact 68px stepper ---------- */
  html body .sst-qo:not(.sst-qo--list):not(#sst-never) .sst-qo__group:not([data-qo-subgroup="psa10"]):not([data-qo-subgroup="psabo"]) .sst-qo__table tbody tr > :is(td.sst-qo__offer, td.sst-qo-sum) .sst-qo__qty {
    grid-template-columns: 20px minmax(0, 1fr) 20px !important;
    height: 28px !important;
  }
  html body .sst-qo:not(.sst-qo--list):not(#sst-never) .sst-qo__group:not([data-qo-subgroup="psa10"]):not([data-qo-subgroup="psabo"]) .sst-qo__table tbody tr > :is(td.sst-qo__offer, td.sst-qo-sum) .sst-rsn-btn {
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 4px !important;
    font-size: 12px !important; /* sst-qo-offer-bigfont-20261110: Notify, was 11px */
    white-space: nowrap !important;
  }

  /* sst-qo-offer-qty-centre-20261112: owner 11/12 17:59 "the number in the middle of the - + button is too high".
     Measured on the live page: the number was in the middle of the box, the "-" and "+" beside it sat 1.5px LOWER.
     The box is 28px tall WITH its 1px borders (26px inside; 32px / 30px on tablets), but its three cells were as tall
     as the whole box, so they hung 1px out at the bottom (clipped), and the "-" / "+" glyphs took that 1px with them.
     Now the cells are exactly the inside of the box and each line is centred in it: "-" / "+" 1px higher (their
     middle is 0.5px under the box middle; a 3px / 7px tall glyph cannot be nearer in an even box), the number stays
     where it was (1px top padding: a digit sits 0.4px above the middle of its line).
     Three ids: above the look the script copies onto the mirrored Unsealed / Damaged lines (two ids). Phones keep the
     theme's big 44px box (measured: number and "-" / "+" level there). */
  html body .sst-qo:not(.sst-qo--list):not(#sst-never) .sst-qo__group:not([data-qo-subgroup="psa10"]):not([data-qo-subgroup="psabo"]) .sst-qo__table tbody tr > :is(td.sst-qo__offer, td.sst-qo-sum) .sst-qo__qty:not(#sst-n1):not(#sst-n2) {
    grid-template-rows: minmax(0, 1fr) !important;
  }
  html body .sst-qo:not(.sst-qo--list):not(#sst-never) .sst-qo__group:not([data-qo-subgroup="psa10"]):not([data-qo-subgroup="psabo"]) .sst-qo__table tbody tr > :is(td.sst-qo__offer, td.sst-qo-sum) .sst-qo__qty > :is(button, input):not(#sst-n1):not(#sst-n2) {
    align-self: stretch !important;
    height: auto !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  html body .sst-qo:not(.sst-qo--list):not(#sst-never) .sst-qo__group:not([data-qo-subgroup="psa10"]):not([data-qo-subgroup="psabo"]) .sst-qo__table tbody tr > :is(td.sst-qo__offer, td.sst-qo-sum) .sst-qo__qty > button:not(#sst-n1):not(#sst-n2) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 26px !important;
  }
  html body .sst-qo:not(.sst-qo--list):not(#sst-never) .sst-qo__group:not([data-qo-subgroup="psa10"]):not([data-qo-subgroup="psabo"]) .sst-qo__table tbody tr > :is(td.sst-qo__offer, td.sst-qo-sum) .sst-qo__qty > input:not(#sst-n1):not(#sst-n2) {
    padding-top: 1px !important;
    padding-bottom: 0 !important;
    line-height: 25px !important;
  }

  /* sst-qo-offer-notify-fit-20261112: a row whose right-hand slot is the restock bell. In the 64px stepper slot the word
     "Notify" was cut to "Noti..." (seen at 1766px with the cart column: card 302px wide). The slot is as wide as the bell needs. */
  html body .sst-qo:not(.sst-qo--list):not(#sst-never) .sst-qo__group:not([data-qo-subgroup="psa10"]):not([data-qo-subgroup="psabo"]) .sst-qo__table tbody tr > :is(td.sst-qo__offer, td.sst-qo-sum) > .sst-qo__offer-cell:has(.sst-rsn-btn, .sst-qo-sum__notify:not([hidden])) {
    grid-template-columns: minmax(0, 1fr) auto max-content !important;
  }

  /* wide card: everything on one line */
  @container sst-qo-card (min-width: 330px) { /* sst-qo-offer-bigfont-20261110: was 264px; 20261112: 300 -> 330px ("2013 in stock" + a 6-digit price need ~320px) */
    html body .sst-qo:not(.sst-qo--list):not(#sst-never) .sst-qo__group:not([data-qo-subgroup="psa10"]):not([data-qo-subgroup="psabo"]) .sst-qo__table tbody tr > :is(td.sst-qo__offer, td.sst-qo-sum) > .sst-qo__offer-cell {
      grid-template-columns: minmax(78px, max-content) minmax(0, 1fr) auto 64px !important; /* sst-qo-offer-bigfont-20261110: label col was 67px */
      grid-template-rows: auto !important;
      grid-template-areas: "label stock price qty" !important;
      min-height: 42px !important;
    }
    /* single offer (Item / Set / 100-card Set ...): nothing to line up with, the label takes only its own width */
    html body .sst-qo:not(.sst-qo--list):not(#sst-never) .sst-qo__group:not([data-qo-subgroup="psa10"]):not([data-qo-subgroup="psabo"]) .sst-qo__table tbody tr:not(:has(> td.sst-qo__offer--noshrink)) > td.sst-qo__offer > .sst-qo__offer-cell {
      grid-template-columns: max-content minmax(0, 1fr) auto 64px !important;
    }
    /* sst-qo-offer-notify-fit-20261112: the same on the one-line layout */
    html body .sst-qo:not(.sst-qo--list):not(#sst-never) .sst-qo__group:not([data-qo-subgroup="psa10"]):not([data-qo-subgroup="psabo"]) .sst-qo__table tbody tr > :is(td.sst-qo__offer, td.sst-qo-sum) > .sst-qo__offer-cell:has(.sst-rsn-btn, .sst-qo-sum__notify:not([hidden])) {
      grid-template-columns: minmax(78px, max-content) minmax(0, 1fr) auto max-content !important;
    }
  }

  /* sst-qo-offer-narrow-20261112: narrow card (laptops: at 1280px the cards are ~206px wide since the cart column is on
     the right). Label + price + stepper no longer fit one line there - the price ran over the label ("NO SHRINK¥9,500").
     Two rows instead:   LABEL ........ PRICE
                         stock ...... [- 0 +]
     In yen under 224px; with another currency chosen (longer prices) under 264px. */
  @container sst-qo-card (max-width: 223.98px) {
    html body .sst-qo:not(.sst-qo--list):not(#sst-never) .sst-qo__group:not([data-qo-subgroup="psa10"]):not([data-qo-subgroup="psabo"]) .sst-qo__table tbody tr > :is(td.sst-qo__offer, td.sst-qo-sum) > .sst-qo__offer-cell {
      grid-template-areas: "label price price" "stock stock qty" !important;
      row-gap: 4px !important;
    }
  }
  @container sst-qo-card (max-width: 263.98px) {
    html[data-sst-currency]:not([data-sst-currency="JPY"]) body .sst-qo:not(.sst-qo--list):not(#sst-never) .sst-qo__group:not([data-qo-subgroup="psa10"]):not([data-qo-subgroup="psabo"]) .sst-qo__table tbody tr > :is(td.sst-qo__offer, td.sst-qo-sum) > .sst-qo__offer-cell {
      grid-template-areas: "label price price" "stock stock qty" !important;
      row-gap: 4px !important;
    }
  }
  /* middle width with another currency: the two-line price (main, small yen under it) sits beside BOTH text lines, so the
     row keeps its height and label + stock stay together */
  @container sst-qo-card (min-width: 264px) and (max-width: 329.98px) {
    html[data-sst-currency]:not([data-sst-currency="JPY"]) body .sst-qo:not(.sst-qo--list):not(#sst-never) .sst-qo__group:not([data-qo-subgroup="psa10"]):not([data-qo-subgroup="psabo"]) .sst-qo__table tbody tr > :is(td.sst-qo__offer, td.sst-qo-sum) > .sst-qo__offer-cell {
      grid-template-areas: "label price qty" "stock price qty" !important;
    }
  }
  /* sst-qo-offer-cur-under-20261112: another currency chosen in the header - the small yen price goes UNDER the main price
     (as in the cart column and on phones) instead of beside it; side by side "Rp2,236,000 ¥21,099" needs ~150px. */
  html[data-sst-currency]:not([data-sst-currency="JPY"]) body .sst-qo:not(.sst-qo--list):not(#sst-never) .sst-qo__group:not([data-qo-subgroup="psa10"]):not([data-qo-subgroup="psabo"]) .sst-qo__table tbody tr > :is(td.sst-qo__offer, td.sst-qo-sum) .sst-qo__offer-price[data-sst-cur-main][data-sst-cur-yen]:not(#sst-n1):not(#sst-n2):not(#sst-n3):not(#sst-n4)::after,
  html[data-sst-currency]:not([data-sst-currency="JPY"]) body .sst-qo:not(.sst-qo--list):not(#sst-never) .sst-qo__group:not([data-qo-subgroup="psa10"]):not([data-qo-subgroup="psabo"]) .sst-qo__table tbody tr > :is(td.sst-qo__offer, td.sst-qo-sum) .sst-qo__offer-price [data-sst-cur-main][data-sst-cur-yen]:not(#sst-n1):not(#sst-n2):not(#sst-n3):not(#sst-n4)::after {
    display: block !important;
    margin: 1px 0 0 !important;
  }
}

/* ---------- phone (theme layout kept): only the header currency guide "≈ NT$3,863" moves under the ¥ price.
   Side by side it took half the box and squeezed "NO SHRINK" onto three lines (owner had TWD on, 11/09). ---------- */
@media (max-width: 749px) {
  html body .sst-qo:not(.sst-qo--list):not(#sst-never) .sst-qo__group:not([data-qo-subgroup="psa10"]):not([data-qo-subgroup="psabo"]) .sst-qo__table tbody tr > td.sst-qo__offer .sst-qo__offer-price:has(> .sst-cur-approx) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    text-align: right !important;
  }
  html body .sst-qo:not(.sst-qo--list):not(#sst-never) .sst-qo__group:not([data-qo-subgroup="psa10"]):not([data-qo-subgroup="psabo"]) .sst-qo__table tbody tr > td.sst-qo__offer .sst-qo__offer-price > .sst-cur-approx {
    display: block !important;
    margin: 0 !important;
    font-size: 9.5px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }
}


/* ===== qo-hot-photo.css ===== */
/* sst-qo-hot-photo-20261110: Quick Order product cards, the red HOT tag sits on the product photo's top-right corner
   (the ★ watchlist button keeps the top-left corner). Other tags (IN STOCK, SOLD OUT, ...) stay above the title.
   Owner 11/10 ~10:30: "HOT tag show on top" -> picked "HOT 搬上相片頂" from the mock-up.
   Card geometry (theme, live 11/10; the HOT tag's containing block is td.sst-qof-cell, position:relative):
     >= 1025px : photo 97 x 97 px at the cell's top-left           -> HOT right edge at 97 - 4 = 93px
     750-1024px: photo 124 x 124 px centred at the top of the cell -> HOT right edge at 50% + 62 - 4 px
     < 750px   : untouched (photo only 34-58 px; HOT would cover it), HOT stays next to IN STOCK
   Grid view only, not the list view, not the PSA10 / PSA back order groups (their own cards). */
@media (min-width: 750px) {
  html body .sst-qo:not(.sst-qo--list):not(#sst-never) .sst-qo__group:not([data-qo-subgroup="psa10"]):not([data-qo-subgroup="psabo"]) .sst-qo__table tbody tr[data-handle] > td.sst-qof-cell .sst-qo__badge--hot {
    position: absolute !important;
    z-index: 3 !important;
    top: 4px !important;
    left: calc(50% + 58px) !important;
    transform: translateX(-100%) !important;
    margin: 0 !important;
    padding: 3px 6px 2px !important;
    font-size: 10.5px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    pointer-events: none !important;
  }
  /* HOT was the only tag: the now empty tag line takes no room */
  html body .sst-qo:not(.sst-qo--list):not(#sst-never) .sst-qo__group:not([data-qo-subgroup="psa10"]):not([data-qo-subgroup="psabo"]) .sst-qo__table tbody tr[data-handle] > td.sst-qof-cell .sst-qo__badges:not(:has(> :not(.sst-qo__badge--hot))) {
    display: contents !important;
  }
}
@media (min-width: 1025px) {
  html body .sst-qo:not(.sst-qo--list):not(#sst-never) .sst-qo__group:not([data-qo-subgroup="psa10"]):not([data-qo-subgroup="psabo"]) .sst-qo__table tbody tr[data-handle] > td.sst-qof-cell .sst-qo__badge--hot {
    left: 93px !important;
  }
}