/* SST QO coupon promo tile (sst-qo-coupon-promo-tile). Mirrors the native
   card frame (.sst-qo__table tbody tr) so the tile sits in the grid as card #1. */
.sst-qcp-tile{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;align-self:stretch;min-width:0;margin:0;padding:10px;background:#fff;border:1px solid #ececec;border-radius:0;box-sizing:border-box;font:inherit;color:inherit;text-align:center;cursor:pointer;-webkit-appearance:none;appearance:none;transition:border-color .15s,box-shadow .15s}
.sst-qcp-tile:hover{background:#fff;border-color:#d8d8d8;box-shadow:0 4px 14px rgba(0,0,0,.05)}
.sst-qcp-tile:focus-visible{outline:2px solid var(--sst-focus,#6ea8ff);outline-offset:2px}
/* The picture is absolutely positioned so the tile's own height is only CTA + frame; the
   product cards decide the row height and the tile stretches to it (align-self). */
.sst-qcp-tile__pic{position:relative;display:block;flex:1 1 auto;min-height:72px;min-width:0;overflow:hidden}
.sst-qcp-tile__img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;border-radius:4px}
/* CTA bar: text may wrap to two lines (localized labels), never clipped sideways. */
.sst-qcp-tile__cta{display:flex;flex:0 0 auto;align-items:center;justify-content:center;gap:4px;min-height:32px;margin-top:8px;padding:5px 8px;background:var(--sst-accent,#9e2c5f);color:var(--sst-btn-label,#fff);font-size:12px;font-weight:700;letter-spacing:.06em;line-height:1.15;text-transform:uppercase;border-radius:3px;box-sizing:border-box}
.sst-qcp-tile__cta-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;min-width:0;overflow:hidden;overflow-wrap:anywhere;white-space:normal}
.sst-qcp-tile__cta::after{content:"\203A";flex:0 0 auto;font-size:16px;line-height:1}
.sst-qcp-tile:hover .sst-qcp-tile__cta{background:var(--sst-accent-dark,#8a2653)}
/* List view keeps its native table rows only. */
.sst-qo.sst-qo--list .sst-qcp-tile{display:none}
@media(max-width:749px){
  /* Native phone cards carry margin-bottom:12px (measured 2026-10-09); mirror it so the row heights match. */
  .sst-qcp-tile{padding:8px;margin:0 0 12px;border-radius:7px;border-color:#e7eaf0}
  .sst-qcp-tile__cta{min-height:30px;margin-top:6px;padding:4px 6px;font-size:11px}
}
html[data-sst-theme="dark"] .sst-qcp-tile{background:var(--sst-surface,#1a1a1c);border-color:var(--sst-line,#2e2e32)}
html[data-sst-theme="dark"] .sst-qcp-tile:hover{background:var(--sst-surface,#1a1a1c);border-color:#45454d}
/* 2026.10.30.2: NEW1000 welcome card = div[role=group] holding a button (banner + "regular -> discounted"
   price line, reusing the native sale classes and their red slash) and a "- 0 +" stepper (native
   .sst-qo__qty look; pinned here because the theme sizes .sst-qo__qty per layout with !important). */
.sst-qcp-tile--welcome{justify-content:flex-start;gap:6px;cursor:default}
.sst-qcp-tile--welcome [hidden]{display:none!important}
.sst-qcp-tile__hit{display:flex;flex:1 1 auto;flex-direction:column;align-items:stretch;gap:6px;min-width:0;min-height:0;width:100%;margin:0;padding:0;background:none;border:0;border-radius:4px;box-sizing:border-box;font:inherit;color:inherit;text-align:center;cursor:pointer;-webkit-appearance:none;appearance:none}
.sst-qcp-tile__hit:focus-visible{outline:2px solid var(--sst-focus,#6ea8ff);outline-offset:2px}
.sst-qcp-tile--welcome .sst-qcp-tile__pic{min-height:56px}
.sst-qo .sst-qcp-tile--welcome .sst-qcp-tile__prices{display:flex;flex-direction:row;flex:0 0 auto;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:30px;margin:0;padding:3px 8px;background:#fefbd9;border:1px solid #f7df8b;border-left:2px solid #f0c83e;border-right:2px solid #f0c83e;border-radius:3px;box-sizing:border-box;line-height:1.15;white-space:nowrap;flex-wrap:wrap;row-gap:0}
.sst-qo .sst-qcp-tile--welcome .sst-qo__sale-regular{font-size:13px;font-weight:650;color:#6b7280}
.sst-qo .sst-qcp-tile--welcome .sst-qo__sale-current{font-size:18px;font-weight:900;color:#e00000;letter-spacing:.01em}
.sst-qcp-tile__arrow{flex:0 0 auto;color:#e00000;font-size:16px;font-weight:900;line-height:1}
.sst-qo .sst-qcp-tile.sst-qcp-tile--welcome .sst-qo__qty.sst-qcp-tile__qty{display:flex!important;flex:0 0 auto;align-items:center!important;justify-content:space-between!important;width:100%!important;max-width:100%!important;min-width:0!important;height:32px!important;min-height:32px!important;margin:0!important;padding:0!important;border:1px solid #cfd6df!important;border-radius:0;background:#fff!important;box-sizing:border-box!important;overflow:hidden!important}
.sst-qo .sst-qcp-tile.sst-qcp-tile--welcome .sst-qo__qty.sst-qcp-tile__qty[hidden]{display:none!important}
.sst-qo .sst-qcp-tile.sst-qcp-tile--welcome .sst-qo__qty.sst-qcp-tile__qty button{display:inline-flex!important;flex:0 0 32px!important;align-items:center!important;justify-content:center!important;width:32px!important;min-width:0!important;height:30px!important;margin:0!important;padding:0!important;border:0!important;background:#fff!important;color:#374151!important;font-size:15px!important;font-weight:800!important;line-height:1!important;cursor:pointer}
.sst-qo .sst-qcp-tile.sst-qcp-tile--welcome .sst-qo__qty.sst-qcp-tile__qty button:hover:not(:disabled):not([aria-disabled="true"]){background:#fafafa!important}
.sst-qo .sst-qcp-tile.sst-qcp-tile--welcome .sst-qo__qty.sst-qcp-tile__qty button:disabled,.sst-qo .sst-qcp-tile.sst-qcp-tile--welcome .sst-qo__qty.sst-qcp-tile__qty button[aria-disabled="true"]{opacity:.3;cursor:not-allowed}
.sst-qo .sst-qcp-tile.sst-qcp-tile--welcome .sst-qo__qty.sst-qcp-tile__qty input{flex:1 1 auto!important;width:auto!important;min-width:0!important;height:30px!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;color:#111!important;font-size:14px!important;font-weight:800!important;line-height:30px!important;text-align:center!important;cursor:default;-moz-appearance:textfield;appearance:textfield}
.sst-qo .sst-qcp-tile.sst-qcp-tile--welcome .sst-qo__qty.sst-qcp-tile__qty input::-webkit-outer-spin-button,
.sst-qo .sst-qcp-tile.sst-qcp-tile--welcome .sst-qo__qty.sst-qcp-tile__qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.sst-qcp-tile__soldout{display:flex;flex:0 0 auto;align-items:center;justify-content:center;min-height:32px;padding:4px 8px;background:#f3f4f6;border:1px solid #e5e7eb;box-sizing:border-box;color:#9e2c5f;font-size:12px;font-weight:800;letter-spacing:.06em;line-height:1.15;text-transform:uppercase;overflow-wrap:anywhere}
@media(max-width:749px){
  .sst-qcp-tile--welcome,.sst-qcp-tile__hit{gap:5px}
  .sst-qcp-tile--welcome .sst-qcp-tile__pic{min-height:48px}
  .sst-qo .sst-qcp-tile--welcome .sst-qcp-tile__prices{gap:5px;min-height:26px;padding:2px 4px}
  .sst-qo .sst-qcp-tile--welcome .sst-qo__sale-regular{font-size:11px}
  .sst-qo .sst-qcp-tile--welcome .sst-qo__sale-current{font-size:16px}
  .sst-qcp-tile__arrow{font-size:13px}
  /* Phones: buttons look like the native offer stepper (34x38) and take taps over 44x44 (the ::after
     reaches past the button, so the stepper does not clip here). */
  .sst-qo .sst-qcp-tile.sst-qcp-tile--welcome .sst-qo__qty.sst-qcp-tile__qty{height:40px!important;min-height:40px!important;border-color:#cfcfcf!important;overflow:visible!important}
  .sst-qo .sst-qcp-tile.sst-qcp-tile--welcome .sst-qo__qty.sst-qcp-tile__qty button{position:relative!important;flex-basis:34px!important;width:34px!important;height:38px!important;font-size:18px!important}
  .sst-qo .sst-qcp-tile.sst-qcp-tile--welcome .sst-qo__qty.sst-qcp-tile__qty button::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
  .sst-qo .sst-qcp-tile.sst-qcp-tile--welcome .sst-qo__qty.sst-qcp-tile__qty input{height:38px!important;line-height:38px!important;font-size:15px!important}
  .sst-qcp-tile__soldout{min-height:40px;font-size:11px}
}
@media(max-width:360px){
  .sst-qo .sst-qcp-tile--welcome .sst-qcp-tile__prices{gap:4px;padding:2px 3px}
  .sst-qo .sst-qcp-tile--welcome .sst-qo__sale-regular{font-size:10px}
  .sst-qo .sst-qcp-tile--welcome .sst-qo__sale-current{font-size:14px}
  .sst-qcp-tile__arrow{font-size:12px}
}
html[data-sst-theme="dark"] .sst-qo .sst-qcp-tile--welcome .sst-qcp-tile__prices{background:#2b2410;border-color:#5c4a12;border-left-color:#a07c16;border-right-color:#a07c16}
html[data-sst-theme="dark"] .sst-qo .sst-qcp-tile--welcome .sst-qo__sale-regular{color:var(--sst-muted,#a3a3a8)}
html[data-sst-theme="dark"] .sst-qo .sst-qcp-tile--welcome .sst-qo__sale-current,html[data-sst-theme="dark"] .sst-qcp-tile__arrow{color:var(--sst-sale,#f87171)}
html[data-sst-theme="dark"] .sst-qo .sst-qcp-tile.sst-qcp-tile--welcome .sst-qo__qty.sst-qcp-tile__qty{border-color:#3d3d42!important;background:var(--sst-surface,#1a1a1c)!important}
html[data-sst-theme="dark"] .sst-qo .sst-qcp-tile.sst-qcp-tile--welcome .sst-qo__qty.sst-qcp-tile__qty button{background:var(--sst-surface,#1a1a1c)!important;color:#c2c2c8!important}
html[data-sst-theme="dark"] .sst-qo .sst-qcp-tile.sst-qcp-tile--welcome .sst-qo__qty.sst-qcp-tile__qty button:hover:not(:disabled):not([aria-disabled="true"]){background:var(--sst-gray,#232326)!important}
html[data-sst-theme="dark"] .sst-qo .sst-qcp-tile.sst-qcp-tile--welcome .sst-qo__qty.sst-qcp-tile__qty input{color:var(--sst-ink,#e8e8e8)!important}
html[data-sst-theme="dark"] .sst-qcp-tile__soldout{background:var(--sst-gray,#232326);border-color:var(--sst-line,#2e2e32);color:var(--sst-accent-text,#e58bb5)}
/* 11-02: the cart refuses typed coupons (sst-new1000-welcome state.cartBlocked) -> the regular price alone as
   plain text, without the offer frame (the line keeps its height, so the card does not jump). */
.sst-qo .sst-qcp-tile--welcome .sst-qcp-tile__prices[data-sst-qcp-plain]{background:none;border-color:transparent}
.sst-qo .sst-qcp-tile--welcome .sst-qcp-tile__plain{font-size:16px;font-weight:800;color:#111827;letter-spacing:.01em}
@media(max-width:749px){.sst-qo .sst-qcp-tile--welcome .sst-qcp-tile__plain{font-size:15px}}
@media(max-width:360px){.sst-qo .sst-qcp-tile--welcome .sst-qcp-tile__plain{font-size:14px}}
html[data-sst-theme="dark"] .sst-qo .sst-qcp-tile--welcome .sst-qcp-tile__prices[data-sst-qcp-plain]{background:none;border-color:transparent}
html[data-sst-theme="dark"] .sst-qo .sst-qcp-tile--welcome .sst-qcp-tile__plain{color:var(--sst-ink,#e8e8e8)}