/* sst-look-tweaks-20261112: six preview-only changes the owner picked for live on 2026-11-12 (one file, each part
   keeps its own marker; the working copies are the preview's override files of the same names). */

/* ===== flash-qty-big.css ===== */
/* sst-flash-qty-big-20261110: homepage Flash Sale cards, the "− 1 +" quantity box above ADD TO CART is bigger.
   Owner 11/10 10:16 screenshot: "change flash sales - 1 + become bigger".
   Before (desktop, live 11/10): 92 x 42 px box, 28 px buttons, 11 px icons, 12 px digits.
   After: 44 px buttons | 60 px number | 44 px buttons, 44 px tall, 16 px icons, 18 px bold digits.
   Phones (< 750px) are untouched: the theme already gives them a 44 | 1fr | 44 px, 46 px tall touch stepper.
   Only the Flash Sale cards (their act row holds .sstt-flash-add); other TOP-tab steppers keep their size. */
@media (min-width: 750px) {
  html body:not(#sst-never) .sstt-offer-act:has(> .sstt-flash-add) > .sstt-qty:not([hidden]) {
    display: inline-grid !important;
    grid-template-columns: 44px 60px 44px !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
    height: 44px !important;
    min-height: 44px !important;
    width: auto !important;
    flex: 0 0 auto !important;
  }
  html body:not(#sst-never) .sstt-offer-act:has(> .sstt-flash-add) > .sstt-qty:not([hidden]) > .sstt-qty-b {
    display: grid !important;
    place-items: center !important;
    width: 44px !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
  }
  html body:not(#sst-never) .sstt-offer-act:has(> .sstt-flash-add) > .sstt-qty:not([hidden]) > .sstt-qty-b svg {
    width: 16px !important;
    height: 16px !important;
    stroke-width: 2.2 !important;
  }
  html body:not(#sst-never) .sstt-offer-act:has(> .sstt-flash-add) > .sstt-qty:not([hidden]) > .sstt-qty-v {
    box-sizing: border-box !important;
    width: 60px !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 42px !important;
    text-align: center !important;
  }
}

/* ===== pdp-chart-left.css ===== */
/* 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; }

/* ===== pdp-qocta-band-off.css ===== */
/* 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; }

/* ===== preorder-box-right.css ===== */
/* sst-preorder-box-right-20261023: owner 10/23 "For pre order page, move this box to the right hand side". Pre-order
   product pages (WooCommerce tag "pre-order" → div.product.product_tag-pre-order): the purchase box (Ship date select,
   price, Pre-order agreement, Add to cart = form.cart) moves to its own column right of the title / price / description
   instead of sitting under them. Wide screens only (the summary column is ~1300px wide at 1920px but the theme caps the
   summary at 560px, so the right half was empty); below 1600px the page stays as it was.
   20261112: 1500 -> 1600px. Since the right-hand cart column (11/10) the page content is narrower: under 1600px
   the title / price column beside the box would get less than 300px (measured: 298px from 1600px up).
   Rows: the left items take the auto rows, the form spans all of them plus a last 1fr row, so a form taller than the left
   column grows that last row instead of opening gaps between the left items. */
/* owner 10/23 17:40: pre-order pages drop the "View all products" / "Quick Order — instant add to cart" buttons and the
   "View the full card list for this set" link under the buy box (every width) */
.single-product div.product.product_tag-pre-order .summary .sst-pi-qocta,
.single-product div.product.product_tag-pre-order .summary .sst-cl-link-wrap{display:none!important}

@media (min-width:1600px){
  .single-product div.product.product_tag-pre-order .summary.entry-summary{
    display:grid; grid-template-columns:minmax(0,560px) minmax(400px,460px); grid-template-rows:repeat(24,auto) 1fr;
    column-gap:40px; max-width:none; align-items:start
  }
  .single-product div.product.product_tag-pre-order .summary.entry-summary > *{grid-column:1}
  .single-product div.product.product_tag-pre-order .summary.entry-summary > form.cart{
    grid-column:2; grid-row:1 / -1; max-width:none; width:100%; margin-top:0
  }
}

/* ===== box-toolbar.css: the Damaged Box note block only ===== */
/* 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}
}


/* ===== damaged-video-right.css ===== */
/* 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;
  }
}