/* sst-site-extras-20261023: preview additions on top of the live box-toolbar.css (sst-qo-extras) */

/* sst-qo-list-offer-row-20261021: List view (desktop, >=750px): the offer cell's label / stock / price sit on ONE line and
   are bigger (theme stacks them in 8 / 9 / 11px). The price wraps onto a second line only when the column is too narrow.
   Colours stay the theme's (light + dark). Mobile (<750px) keeps the theme's own list layout. */
@media (min-width:750px){
  html body .sst-qo.sst-qo--list .sst-qo__offer-cell .sst-qo__offer-info,
  html body .sst-qo.sst-qo--list tr[data-handle] .sst-qo__offer-cell .sst-qo__offer-info{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;align-items:baseline!important;justify-content:flex-start!important;gap:2px 9px!important;width:100%!important;min-width:0!important;line-height:1.15!important}
  html body .sst-qo.sst-qo--list .sst-qo__offer-cell .sst-qo__offer-label{font-size:11px!important;font-weight:850!important;letter-spacing:.06em!important;line-height:1.15!important;white-space:nowrap!important}
  /* user 2026-10-21: "N in stock" / "Out of stock" the same size as the price */
  html body .sst-qo.sst-qo--list .sst-qo__offer-cell .sst-qo__offer-stock{font-size:15px!important;font-weight:700!important;line-height:1.15!important;white-space:nowrap!important}
  html body .sst-qo.sst-qo--list .sst-qo__offer-cell .sst-qo__offer-price{font-size:15px!important;font-weight:850!important;line-height:1.15!important;white-space:nowrap!important;font-variant-numeric:tabular-nums!important}
  /* review 2026-10-21 (states not in today's data, but produced by the theme at runtime):
     - no price (priceState != priced): the theme keeps an &nbsp; placeholder -> would be a blank 15px line; hide it
     - campaign sale: inc/quick-order-sale.php renders <span.sst-qo__sale-prices><del.sst-qo__sale-regular>..</del> price</span>,
       critical.css stacks + centres them -> lay them out as one row, struck regular price smaller
     - live standing feature (sst-psa-standing) inserts <a.sst-qo__offer-standing> after the stock text -> keep it last
     - quote ("not sold") / coming-soon (release gate) cells carry a text block instead of the 76px stepper: put that
       block under the info row so the nowrap label / stock are never squeezed against it */
  html body .sst-qo.sst-qo--list .sst-qo__offer-cell .sst-qo__offer-price.sst-qo__offer-price--empty{display:none!important}
  html body .sst-qo.sst-qo--list .sst-qo__offer-cell .sst-qo__offer-price .sst-qo__sale-prices{display:inline-flex!important;flex-direction:row!important;flex-wrap:wrap!important;align-items:baseline!important;justify-content:flex-start!important;gap:2px 7px!important;white-space:nowrap!important}
  html body .sst-qo.sst-qo--list .sst-qo__offer-cell .sst-qo__offer-price .sst-qo__sale-regular{font-size:12px!important;font-weight:600!important;line-height:1.15!important}
  html body .sst-qo.sst-qo--list .sst-qo__offer-cell .sst-qo__offer-info > .sst-qo__offer-standing{order:9!important;flex:0 0 auto!important;align-self:center!important;margin:0!important}
  html body .sst-qo.sst-qo--list td.sst-qo__offer[data-qo-action-state="quote"] .sst-qo__offer-cell,
  html body .sst-qo.sst-qo--list td.sst-qo__offer[data-qo-action-state="coming-soon"] .sst-qo__offer-cell,
  html body .sst-qo.sst-qo--list td.sst-qo__offer .sst-qo__offer-cell[data-qo-action-state="quote"],
  html body .sst-qo.sst-qo--list td.sst-qo__offer .sst-qo__offer-cell[data-qo-action-state="coming-soon"]{grid-template-columns:minmax(0,1fr)!important;grid-template-areas:none!important;row-gap:4px!important}
}
/* laptop viewports (<= 1535px: the two offer columns are too narrow for the one-line offer, which needs ~255px + the
   76px stepper + 6px gap): the price takes its own second line in EVERY two-column cell, instead of wrapping only in
   the rows whose stock text happens to be longer. Single-offer rows (colspan 2, "ITEM") always have room for one line. */
@media (min-width:750px) and (max-width:1535px){
  html body .sst-qo.sst-qo--list td.sst-qo__offer:not(.sst-qo__offer--single) .sst-qo__offer-cell .sst-qo__offer-price{flex-basis:100%!important;width:100%!important}
}
/* the product column had spare room (theme 54 / 23 / 23). 901-1535px: 36 / 32 / 32 so label + stock fit on the first
   line (needs ~190px) beside the stepper; 1536-1699px: 34 / 33 / 33 so the whole offer is one line (table width is
   about viewport - 394px cart column); from 1700px: 40 / 30 / 30 (one line with room to spare).
   PSA10 / back order groups are left at the theme's widths: every row there is a single colspan-2 offer that always
   fits one line, their table is already 260px narrower (series sidebar) and the card names need the room. */
@media (min-width:901px){
  html body .sst-qo.sst-qo--list .sst-qo__group:not([data-qo-subgroup="psa10"]):not([data-qo-subgroup="psabo"]) .sst-qo__table thead th:nth-child(1),
  html body .sst-qo.sst-qo--list .sst-qo__group:not([data-qo-subgroup="psa10"]):not([data-qo-subgroup="psabo"]) .sst-qo__table tbody tr > td:nth-child(1){width:36%!important}
  html body .sst-qo.sst-qo--list .sst-qo__group:not([data-qo-subgroup="psa10"]):not([data-qo-subgroup="psabo"]) .sst-qo__table thead th:nth-child(2),
  html body .sst-qo.sst-qo--list .sst-qo__group:not([data-qo-subgroup="psa10"]):not([data-qo-subgroup="psabo"]) .sst-qo__table thead th:nth-child(3),
  html body .sst-qo.sst-qo--list .sst-qo__group:not([data-qo-subgroup="psa10"]):not([data-qo-subgroup="psabo"]) .sst-qo__table tbody tr > td.sst-qo__offer--sealed:not(.sst-qo__offer--single),
  html body .sst-qo.sst-qo--list .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--single){width:32%!important}
}
@media (min-width:1536px) and (max-width:1699px){
  html body .sst-qo.sst-qo--list .sst-qo__group:not([data-qo-subgroup="psa10"]):not([data-qo-subgroup="psabo"]) .sst-qo__table thead th:nth-child(1),
  html body .sst-qo.sst-qo--list .sst-qo__group:not([data-qo-subgroup="psa10"]):not([data-qo-subgroup="psabo"]) .sst-qo__table tbody tr > td:nth-child(1){width:34%!important}
  html body .sst-qo.sst-qo--list .sst-qo__group:not([data-qo-subgroup="psa10"]):not([data-qo-subgroup="psabo"]) .sst-qo__table thead th:nth-child(2),
  html body .sst-qo.sst-qo--list .sst-qo__group:not([data-qo-subgroup="psa10"]):not([data-qo-subgroup="psabo"]) .sst-qo__table thead th:nth-child(3),
  html body .sst-qo.sst-qo--list .sst-qo__group:not([data-qo-subgroup="psa10"]):not([data-qo-subgroup="psabo"]) .sst-qo__table tbody tr > td.sst-qo__offer--sealed:not(.sst-qo__offer--single),
  html body .sst-qo.sst-qo--list .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--single){width:33%!important}
}
@media (min-width:1700px){
  html body .sst-qo.sst-qo--list .sst-qo__group:not([data-qo-subgroup="psa10"]):not([data-qo-subgroup="psabo"]) .sst-qo__table thead th:nth-child(1),
  html body .sst-qo.sst-qo--list .sst-qo__group:not([data-qo-subgroup="psa10"]):not([data-qo-subgroup="psabo"]) .sst-qo__table tbody tr > td:nth-child(1){width:40%!important}
  html body .sst-qo.sst-qo--list .sst-qo__group:not([data-qo-subgroup="psa10"]):not([data-qo-subgroup="psabo"]) .sst-qo__table thead th:nth-child(2),
  html body .sst-qo.sst-qo--list .sst-qo__group:not([data-qo-subgroup="psa10"]):not([data-qo-subgroup="psabo"]) .sst-qo__table thead th:nth-child(3),
  html body .sst-qo.sst-qo--list .sst-qo__group:not([data-qo-subgroup="psa10"]):not([data-qo-subgroup="psabo"]) .sst-qo__table tbody tr > td.sst-qo__offer--sealed:not(.sst-qo__offer--single),
  html body .sst-qo.sst-qo--list .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--single){width:30%!important}
}
/* sst-qo-list-notify-row-20261021: List view (desktop, >=750px), SOLD-OUT offer: the restock "Notify" bell sits beside
   the label / stock / price, right-aligned and vertically centred, exactly where the - 0 + stepper sits in an in-stock
   cell. Why it dropped under the price: the theme's desktop list cell is a 2-column grid with NO named areas
   (quick-order-deferred.css @min-width:750px: minmax(0,1fr) auto), while restock-notify.css places the bell with
   grid-area:qty -> no such area -> implicit column + implicit second row (measured: columns 222 | 0 | 0 | 61.5, bell on
   row 2). Give the sold-out cell the "info qty" areas: the column is at least as wide as the 76px stepper so the bells
   line up with the steppers of the rows around them, and grows for a longer translated label (bell max 120px, the
   plugin's own label ellipsis handles the rest). Mobile (<750px) keeps purchase-layout.css's 44px row. */
@media (min-width:750px){
  html body .sst-qo.sst-qo--list tr[data-handle] td.sst-qo__offer[data-qo-action-state="unavailable"] .sst-qo__offer-cell,
  html body .sst-qo.sst-qo--list tr[data-handle] td.sst-qo__offer .sst-qo__offer-cell[data-qo-action-state="unavailable"]{grid-template-columns:minmax(0,1fr) minmax(76px,max-content)!important;grid-template-areas:"info qty"!important;align-items:center!important}
  html body .sst-qo.sst-qo--list tr[data-handle] td.sst-qo__offer[data-qo-action-state="unavailable"] .sst-qo__offer-cell > .sst-qo__offer-info,
  html body .sst-qo.sst-qo--list tr[data-handle] td.sst-qo__offer .sst-qo__offer-cell[data-qo-action-state="unavailable"] > .sst-qo__offer-info{grid-area:info!important}
  html body .sst-qo.sst-qo--list tr[data-handle] td.sst-qo__offer[data-qo-action-state="unavailable"] .sst-qo__offer-cell .sst-rsn-btn[data-source="qo"],
  html body .sst-qo.sst-qo--list tr[data-handle] td.sst-qo__offer .sst-qo__offer-cell[data-qo-action-state="unavailable"] .sst-rsn-btn[data-source="qo"]{grid-area:qty!important;align-self:center!important;justify-self:stretch!important;width:100%!important;min-width:0!important;max-width:120px!important;height:28px!important;min-height:28px!important;margin:0!important;box-sizing:border-box!important}
  /* the empty placeholder the theme renders before the plugin swaps in the bell: same slot, no layout jump */
  html body .sst-qo.sst-qo--list tr[data-handle] td.sst-qo__offer[data-qo-action-state="unavailable"] .sst-qo__offer-cell .sst-qo__offer-action-empty,
  html body .sst-qo.sst-qo--list tr[data-handle] td.sst-qo__offer .sst-qo__offer-cell[data-qo-action-state="unavailable"] .sst-qo__offer-action-empty{grid-area:qty!important;width:100%!important;height:28px!important}
}

/* sst-qo-oos-center-20261022: owner 10/22 — grid cards: a sold-out offer (e.g. "NO SHRINK / Out of stock / ¥14,495") sat
   flush left while the in-stock offer next to it is centred; centre label, stock and price the same way */
html body .sst-qo:not(.sst-qo--list) tr[data-handle] td.sst-qo__offer:not([data-qo-stock-state="in"]) .sst-qo__offer-info{align-items:center !important}

/* sst-qo-damaged-note-20261022: owner 10/22 "make this area look good" (Damaged Box tab condition note, no photos):
   the three lines become three tiles with a line icon each; the last one (sold as-is) in the site maroon as the warning */
.sst-qo__damaged-note[data-sst-damaged-note]{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:0 !important;margin:0 0 14px !important;border:0 !important;background:none !important;box-shadow:none !important}
.sst-qo__damaged-note[data-sst-damaged-note] > p{position:relative;display:flex;align-items:center;gap:12px;margin:0 !important;padding:14px 16px !important;min-height:64px;box-sizing:border-box;border:1px solid #e6e1dc;border-radius:6px;background:#fff;color:#3a3a3a;font-size:13px;line-height:1.45}
.sst-qo__damaged-note[data-sst-damaged-note] > p::before{content:"";flex:none;width:36px;height:36px;border-radius:50%;background-color:#f4efea;
  background-image:var(--dn-ic);background-repeat:no-repeat;background-position:center;background-size:20px 20px}
.sst-qo__damaged-note[data-sst-damaged-note] > p:nth-child(1){--dn-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b5a4e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.5 12 3l9 4.5v9L12 21l-9-4.5z'/%3E%3Cpath d='M3 7.5 12 12l9-4.5M12 12v9'/%3E%3Cpath d='M15.5 13.5l1.5 1-1 1.5 1.5 1'/%3E%3C/svg%3E")}
.sst-qo__damaged-note[data-sst-damaged-note] > p:nth-child(2){--dn-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b5a4e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E")}
.sst-qo__damaged-note[data-sst-damaged-note] > p:nth-child(3){border-color:#ead3dd;background:#fbf4f7;color:#7a2149;font-weight:600;
  --dn-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239e2c5f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 21.5 20h-19z'/%3E%3Cpath d='M12 10v4.5M12 17.2v.1'/%3E%3C/svg%3E")}
.sst-qo__damaged-note[data-sst-damaged-note] > p:nth-child(3)::before{background-color:#f6e4ec}
html[data-sst-theme="dark"] .sst-qo__damaged-note[data-sst-damaged-note] > p{background:#1c1c1f;border-color:#2e2e32;color:#d6d6d6}
html[data-sst-theme="dark"] .sst-qo__damaged-note[data-sst-damaged-note] > p::before{background-color:#2a2a2e}
html[data-sst-theme="dark"] .sst-qo__damaged-note[data-sst-damaged-note] > p:nth-child(1){--dn-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9bfb7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.5 12 3l9 4.5v9L12 21l-9-4.5z'/%3E%3Cpath d='M3 7.5 12 12l9-4.5M12 12v9'/%3E%3Cpath d='M15.5 13.5l1.5 1-1 1.5 1.5 1'/%3E%3C/svg%3E")}
html[data-sst-theme="dark"] .sst-qo__damaged-note[data-sst-damaged-note] > p:nth-child(2){--dn-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9bfb7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E")}
html[data-sst-theme="dark"] .sst-qo__damaged-note[data-sst-damaged-note] > p:nth-child(3){background:#2a1c23;border-color:#4a2a3a;color:#e58bb5}
html[data-sst-theme="dark"] .sst-qo__damaged-note[data-sst-damaged-note] > p:nth-child(3)::before{background-color:#3a2430}
@media (max-width:749px){
  .sst-qo__damaged-note[data-sst-damaged-note]{grid-template-columns:1fr;gap:6px}
  .sst-qo__damaged-note[data-sst-damaged-note] > p{min-height:0;padding:10px 12px !important;font-size:12.5px}
  .sst-qo__damaged-note[data-sst-damaged-note] > p::before{width:30px;height:30px;background-size:17px 17px}
}

/* sst-qo-watchlist-tab-off-20261022: owner 10/22 18:45 — no "★ Watchlist" tab in the Quick Order tab strip (added by
   mu-plugin sst-qo-favorites, favorites.*.js .sst-qof-tab + its .sst-qof-panel). The ★ on the rows stays; the saved list
   lives on the /watchlist page (header Watchlist link). */
.sst-qo .sst-qof-tab,.sst-qo .sst-qof-panel{display:none !important}

/* calendar additions on top of the live calendar-colors.css */

/* 10/22 owner: every event mark is a round dot like the green release one (coupon / sale / campaign were 11x7 pills) */
.sst-cal__mark{width:7px !important;height:7px !important;min-width:0 !important;border-radius:999px !important;flex:none}

.sst-cal__day:has(.sst-cal__mark[data-type="sale"]:not(.is-ended)) .sst-cal__num,




.sst-cal__day:has(.sst-cal__mark[data-type="release"]:not(.is-ended)) .sst-cal__num{margin-bottom:-3px}

/* sst-cal-span-lines-20261022: owner 10/22 — a multi-day event is one horizontal line across its days, not a dot on
   every day (calendar-legend.js moves the .is-span marks into .sst-cal__lines). Each spanning type has a slot
   (--sst-ln-slot) in its week row; a line reaches the cell edge where the event goes on (.sst-ln-l / .sst-ln-r). */
.sst-cal__lines{display:block;position:relative;width:100%;height:calc(var(--sst-ln-n,1) * 5px);margin-top:2px}
.sst-cal__lines .sst-cal__mark.sst-ln{position:absolute;top:calc(var(--sst-ln-slot,0) * 5px);left:22%;right:22%;
  width:auto !important;height:3px !important;min-width:0 !important;border-radius:2px !important;box-shadow:none !important}
.sst-cal__lines .sst-cal__mark.sst-ln-l{left:0;border-top-left-radius:0 !important;border-bottom-left-radius:0 !important}
.sst-cal__lines .sst-cal__mark.sst-ln-r{right:0;border-top-right-radius:0 !important;border-bottom-right-radius:0 !important}
/* ended: a thin grey line (the hollow ring of a dot does not read on a 3px line) */
.sst-cal__lines .sst-cal__mark.sst-ln.is-ended{background:var(--sst-cal-ended,#b5b5b5) !important;opacity:.7}
.sst-cal__lines{margin-top:3px} .sst-cal__lines + .sst-cal__marks:empty{display:none}

/* sst-damaged-video-right-20261022: damaged-box product pages, "Condition videos (samples)" on the right-hand side.
   Preview copy (injected by proxy.ps1, together with damaged-video-right.js). Edit here + F5; the deploy PHP is
   regenerated from these files before upload. */

/* the tabs area becomes a size container only when it holds the video block */
.woocommerce-tabs:has(.sst-damaged-videos) { container-type: inline-size; }

/* the card */
.sst-damaged-videos {
  background: var(--sst-surface, #fff);
  border: 1px solid var(--sst-line, #ececec);
  border-radius: 12px;
  padding: 14px 14px 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 16px rgba(0, 0, 0, .05);
}
.sst-damaged-videos > p { margin: 0; }
.sst-damaged-videos > p:first-of-type { margin-bottom: 10px; }
.sst-damaged-videos > p:first-of-type strong {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--sst-muted, #5f5f5f);
}
.sst-damaged-videos > p + p { margin-top: 10px; }

/* the video frame: rounded, first frame shown (js), big play icon until it plays */
.sst-damaged-videos .sst-dv-frame,
.sst-damaged-videos > p:has(video) { position: relative; border-radius: 8px; overflow: hidden; background: #111; line-height: 0; }
.sst-damaged-videos video {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important; /* the markup's inline style adds a 12px bottom margin = black strip under the video */
  border-radius: 8px;
}
.sst-damaged-videos .sst-dv-frame::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52px;
  height: 52px;
  margin: -32px 0 0 -26px; /* a little above centre so it never sits on the control bar */
  border-radius: 50%;
  background: rgba(255, 255, 255, .92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l9 5-9 5z' fill='%23111'/%3E%3C/svg%3E") 55% 50% / 26px no-repeat;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
  pointer-events: none; /* the click goes to the video underneath */
  transition: opacity .15s;
}
.sst-damaged-videos .sst-dv-frame.is-playing::after { opacity: 0; }

/* medium (tabs area >= 700px): card floated right inside the description column, text wraps on the left */
@container (min-width: 700px) {
  .sst-damaged-videos { float: right; width: min(400px, 42%); margin: 0 0 16px 32px; }
  .woocommerce-Tabs-panel--description::after { content: ""; display: table; clear: both; }
}

/* wide (tabs area >= 1300px): card in the empty space right of the 980px description column, top aligned with the
   "Description" heading */
@container (min-width: 1300px) {
  .woocommerce-Tabs-panel--description:has(.sst-damaged-videos) { position: relative; }
  .sst-damaged-videos {
    float: none;
    position: absolute;
    top: 0;
    left: calc(100% + 40px);
    width: min(360px, calc(100cqw - 100% - 40px));
    margin: 0;
  }
}

/* sst-pdp-chart-left-20261022: chart moved under the gallery by pdp-chart-left.js */
.woocommerce-product-gallery > .sst-pi-summary-chart--left { margin-top: 20px; }

/* sst-pdp-qocta-band-off-20261022: product page "QUICK ORDER — Browse the full catalog…" band hidden
   (the compact View All / Quick Order buttons beside Add to cart stay) */
.sst-pi-qocta--band { display: none !important; }

/* sst-pdp-cardlist-up-20261022: spacing once the card list link sits above the discounted notice */
.summary .sst-cl-link-wrap--up { margin: 4px 0 16px !important; }

/* sst-watchlist-page-20261022: /watchlist page + header ★ icon (watchlist-page.js) */
.sst-icon-link--watchlist{position:relative}
.sst-icon-link--watchlist svg{stroke-linejoin:round}
.sst-wl-badge{position:absolute; top:-6px; left:12px; min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:#9e2c5f; color:#fff; font:700 10px/16px var(--sst-font, sans-serif); font-style:normal; text-align:center; pointer-events:none}
.sst-wl-badge[hidden]{display:none}
/* owner 10/22: no count tag on the header icon */
.sst-icon-link--watchlist .sst-wl-badge{display:none !important}

.sst-wl{--wl-fg:#1a1a1a; --wl-muted:#5c5c5c; --wl-dim:#8a8a8a; --wl-line:#e6e6e6; --wl-card:#fff; --wl-bg:#f7f7f7; --wl-accent:#9e2c5f; --wl-accent-d:#7a2149; --wl-in:#0e7f4c; --wl-out:#b3261e; --wl-star:#f2b705;
  max-width:1200px; margin:0 auto; padding:28px 16px 64px; color:var(--wl-fg); font-family:var(--sst-font, sans-serif)}
html[data-sst-theme="dark"] .sst-wl{--wl-fg:#e8e8e8; --wl-muted:#b4b4b4; --wl-dim:#8c8c8c; --wl-line:#2e2e33; --wl-card:#17171b; --wl-bg:#111114; --wl-accent:#bd3d76; --wl-accent-d:#a02f62; --wl-in:#3ccf8e; --wl-out:#ff7a70}
html[data-sst-theme="dark"] .sst-wl-badge{background:#bd3d76}

.sst-wl__head{margin-bottom:18px}
.sst-wl__title{display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:0; font-size:26px; font-weight:800; letter-spacing:-.01em}
.sst-wl__title svg{width:26px; height:26px; fill:var(--wl-star); flex:none}
.sst-wl__count{font-size:14px; font-weight:600; color:var(--wl-muted)}
.sst-wl__hint{margin:6px 0 0; font-size:13px; color:var(--wl-muted)}

.sst-wl__bar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 14px; padding:10px 0; border-top:1px solid var(--wl-line); border-bottom:1px solid var(--wl-line)}
.sst-wl__sort{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--wl-muted)}
.sst-wl__sort select{height:34px; padding:0 28px 0 10px; border:1px solid var(--wl-line); border-radius:2px; background:var(--wl-card); color:var(--wl-fg); font:inherit; font-size:13px}
.sst-wl__clear{height:34px; padding:0 14px; border:1px solid var(--wl-line); border-radius:2px; background:transparent; color:var(--wl-muted); font:600 13px/1 var(--sst-font, sans-serif); cursor:pointer}
.sst-wl__clear:hover{border-color:var(--wl-out); color:var(--wl-out)}
.sst-wl__clear.is-armed{border-color:var(--wl-out); background:var(--wl-out); color:#fff}

.sst-wl__grid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:14px}
.sst-wl-card{position:relative; display:flex; flex-direction:column; min-width:0; border:1px solid var(--wl-line); border-radius:6px; background:var(--wl-card); overflow:hidden}
.sst-wl-card.is-gone{opacity:.6}
.sst-wl-card__media{display:flex; align-items:center; justify-content:center; height:190px; padding:12px; background:var(--wl-bg)}
.sst-wl-card__media img{max-width:100%; max-height:100%; object-fit:contain}
.sst-wl-card__remove{position:absolute; top:8px; right:8px; width:32px; height:32px; display:flex; align-items:center; justify-content:center; padding:0; border:1px solid var(--wl-line); border-radius:50%; background:var(--wl-card); color:var(--wl-muted); cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.12)}
.sst-wl-card__remove svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round}
.sst-wl-card__remove:hover{border-color:var(--wl-out); color:var(--wl-out)}
.sst-wl-card__body{display:flex; flex-direction:column; gap:6px; flex:1; padding:12px}
.sst-wl-card__name{font-size:14px; font-weight:700; line-height:1.35; color:var(--wl-fg); text-decoration:none; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.sst-wl-card__name:hover{text-decoration:underline}
.sst-wl-card__price{display:flex; align-items:baseline; justify-content:space-between; gap:8px; flex-wrap:wrap}
.sst-wl-card__price b{font-size:18px; font-weight:800}
.sst-wl-card__price b.is-gone{font-size:13px; color:var(--wl-dim)}
.sst-wl-stock{font-size:12px; font-weight:700}
.sst-wl-stock.is-in{color:var(--wl-in)}
.sst-wl-stock.is-out{color:var(--wl-out)}
.sst-wl-card__note{margin:0; display:flex; flex-direction:column; gap:2px; font-size:12px; color:var(--wl-dim)}
.sst-wl-card__note em{font-style:normal; font-weight:700}
.sst-wl-card__note em.is-down{color:var(--wl-in)}
.sst-wl-card__note em.is-up{color:var(--wl-out)}
.sst-wl-card__open{margin-top:auto; display:flex; align-items:center; justify-content:center; height:36px; border:1px solid var(--wl-accent); border-radius:2px; background:var(--wl-accent); color:#fff; font-size:13px; font-weight:700; text-decoration:none}
.sst-wl-card__open:hover{background:var(--wl-accent-d); border-color:var(--wl-accent-d); color:#fff}

.sst-wl__empty{display:flex; flex-direction:column; align-items:center; gap:6px; padding:56px 16px; border:1px dashed var(--wl-line); border-radius:6px; text-align:center}
.sst-wl__empty svg{width:44px; height:44px; fill:none; stroke:var(--wl-star); stroke-width:1.6; stroke-linejoin:round}
.sst-wl__empty-t{margin:6px 0 0; font-size:17px; font-weight:800}
.sst-wl__empty-h{margin:0; font-size:13px; color:var(--wl-muted)}
.sst-wl__shop{margin-top:12px; display:inline-flex; align-items:center; height:38px; padding:0 18px; border-radius:2px; background:var(--wl-accent); color:#fff; font-size:13px; font-weight:700; text-decoration:none}
.sst-wl__shop:hover{background:var(--wl-accent-d); color:#fff}

.sst-wl-toast{position:fixed; left:50%; bottom:24px; z-index:9999; display:flex; align-items:center; gap:14px; padding:10px 14px; border-radius:6px; background:#1a1a1a; color:#fff; font:600 13px/1.3 var(--sst-font, sans-serif); box-shadow:0 6px 24px rgba(0,0,0,.25); transform:translate(-50%, 20px); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s}
.sst-wl-toast.is-on{opacity:1; transform:translate(-50%, 0); pointer-events:auto}
.sst-wl-toast__undo{padding:4px 8px; border:0; border-radius:2px; background:transparent; color:#f5a3c7; font:700 13px/1 var(--sst-font, sans-serif); cursor:pointer; text-decoration:underline}

@media (max-width:749px){
  .sst-wl{padding:20px 12px 48px}
  .sst-wl__title{font-size:22px}
  .sst-wl__grid{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px}
  .sst-wl-card__media{height:140px; padding:8px}
  .sst-wl-card__body{padding:10px}
  .sst-wl-card__name{font-size:13px}
  .sst-wl-card__price b{font-size:16px}
  .sst-wl__sort span{display:none}
  .sst-icon-link--watchlist > span{display:none}
}
@media (prefers-reduced-motion:reduce){ .sst-wl-toast{transition:none} }

/* sst-watchlist-header-off-20261022: owner 10/22 18:3x "I don't need watchlist in here" -> no ★ Watchlist link in the
   header (the /watchlist page itself and the ★ buttons on the cards stay) */
.sst-header .sst-icon-link--watchlist{display:none !important}