/* SST QO Polish · small fixes for the Quick Order shell (2026-10-13 design sweep). CSS here, two DOM helpers in polish.js.
   Printed in wp_footer at priority 9, after the theme's quick-order CSS and the other QO modules. */

/* 1) "In stock only" toggle on desktop: the theme paints the toggle white with !important at >=750px, which beats its own
      :has(input:checked) accent background, so the white "In stock only: On" label vanished. Restore the checked look. */
@media (min-width: 750px) {
  html:not([data-sst-theme="dark"]) .sst-qo .sst-qo__stock-toggle:has(input:checked) {
    background: #9e2c5f !important;
    border-color: #9e2c5f !important;
    color: #fff !important;
  }
  html[data-sst-theme="dark"] .sst-qo .sst-qo__stock-toggle:has(input:checked) {
    background: var(--sst-accent) !important;
    border-color: var(--sst-accent) !important;
    color: var(--sst-btn-label, #fff) !important;
  }
  .sst-qo .sst-qo__stock-toggle:has(input:checked) .sst-qo__stock-toggle-text { color: inherit !important; }
}

/* 2) "PRE-ORDER · SHIPS ON/AFTER <date>" badge in card view: the theme forces one line (nowrap, max-content) inside a
      ~125px column and the card clips it ("PRE-ORDER ·" on desktop, "SHIPS ON/AFTER (" on phones). Let that one badge wrap. */
.sst-qo:not(.sst-qo--list) tr[data-handle] .sst-qo__badges:has(.sst-qo__badge--pre),
html body .sst-qo:not(.sst-qo--list) tr[data-handle] .sst-qo__badges:has(.sst-qo__badge--pre) {
  width: 100% !important;
  max-width: 100% !important;
  flex-wrap: wrap !important;
  overflow: visible !important;
}
.sst-qo:not(.sst-qo--list) tr[data-handle] .sst-qo__badge--pre,
html body .sst-qo:not(.sst-qo--list) tr[data-handle] .sst-qo__badge--pre {
  white-space: normal !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  line-height: 1.15 !important;
  letter-spacing: .02em !important;
  padding: 2px 4px 1px !important;
  text-align: left;
}
@media (min-width: 750px) {
  /* desktop card column is ~70px wide: slightly smaller type keeps the wrapped badge to three lines */
  .sst-qo:not(.sst-qo--list) tr[data-handle] .sst-qo__badge--pre,
  html body .sst-qo:not(.sst-qo--list) tr[data-handle] .sst-qo__badge--pre { font-size: 8.5px !important; }
}

/* 3) Phone: the "Quick Order / How to Order / What is NO SHRINK? / FAQ" row wrapped and left FAQ alone on a second line.
      Keep it on one line that scrolls sideways, like the family tab strip under it. */
@media (max-width: 749px) {
  .sst-qo .sst-qo__mode-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 1px;
  }
  .sst-qo .sst-qo__mode-tabs::-webkit-scrollbar { display: none; }
  .sst-qo .sst-qo__mode-tabs > * { flex: 0 0 auto; }
}

/* 4) Phone, TOP tab: the "01 — FEATURED  FROM TODAY'S STOCK" eyebrow is a flex row whose two text parts each wrapped into
      a narrow column. Flow it as one line of text that wraps naturally. */
@media (max-width: 749px) {
  .sst-qo .sstt-eyebrow {
    display: block;
    letter-spacing: .2em;
    line-height: 1.6;
  }
  .sst-qo .sstt-eyebrow .sstt-ebar { display: inline-block; vertical-align: middle; margin-right: 10px; }
  .sst-qo .sstt-eyebrow b { display: inline; margin-left: 8px; }
}

/* 5) Empty filter results (classes set by polish.js): one message instead of one box per group */
/* (scoped to :not(.sst-qopl-measuring): polish.js lifts these rules for a moment while it reads the native state) */
.sst-qo:not(.sst-qopl-measuring) .sst-qo__group.sst-qopl-empty > .sst-qo__label,
.sst-qo:not(.sst-qopl-measuring) .sst-qo__group.sst-qopl-empty > .sst-qo__psa-notice,
.sst-qo:not(.sst-qopl-measuring) .sst-qo__group.sst-qopl-empty:not(.sst-qopl-empty-keep) > .sst-psa-sets,
.sst-qo:not(.sst-qopl-measuring) .sst-qo__group.sst-qopl-empty:not(.sst-qopl-empty-keep) > .sst-qo__filter-empty,
.sst-qo:not(.sst-qopl-measuring) .sst-qo__group.sst-qopl-empty:not(.sst-qopl-empty-keep) > [data-qo-filter-empty] { display: none !important; }
.sst-qo:not(.sst-qopl-measuring) .sst-qo__group.sst-qopl-empty:not(.sst-qopl-empty-keep) { margin: 0 !important; padding: 0 !important; }

/* 6) Items the shop does not sell ("This item is currently not sold on this site") go to the end of their card grid.
      Card grids are CSS grids, so `order` moves them without touching the list's own sorting or counts. */
.sst-qo:not(.sst-qo--list) tbody tr[data-qo-row-key]:has(.sst-qo__not-sold):not(:has(td.sst-qo__offer[data-qo-action-state="quantity"])) { order: 50; }

/* 7) Small things */
/* COUPONS tab reserved 42px on the right for its count badge even while the badge is hidden */
.sst-qo button.sst-qct-tab:has(> .sst-qcw-notification[hidden]) { padding-right: 18px !important; }
/* "N / M products" floating top-right of the block: the toolbar already shows the count */
.sst-qo .sst-qo__count-top { display: none !important; }
/* search suggestions: an open dropdown whose only content is "No matches" just covers the filter row */
.sst-qo .sst-qo__suggest[data-open="1"]:has(> .sst-qo__suggest-empty:first-child:last-child) { display: none !important; }