/* =============================================================================
 * sst top-tab — FLASH SALE block v2 (ec-flash-sale-20261028 / W3, SPEC §3.5 + D18 10-29)
 *
 * Enqueued as assets/top-tab.flash.<sha256[:12]>.css right after top-tab.css, only while the
 * flash switch (option sst_home_flash_sale_enabled=yes) or the admin preview is on. The block
 * lives inside the TOP tab stage (div.sst-top-pre, before section.sstt-ann), so it inherits the
 * stage tokens (--sstt-*) and the site-font rule `.sst-top,.sst-top *{font-family:var(--sst-font)!important}`.
 *
 * D18 (owner, after launch): one red FRAME holds the band and the cards; the band is loud
 * (big two-tone FLASH SALE, big campaign line, countdown in a red box on a black->red field);
 * five small cards across on desktop (own .sstt-card--flash geometry, not the announcement card);
 * the price block under the picture is the loudest thing on the card (FLASH SALE pill + -NN%,
 * "Was ¥x" with the red rotated line, the sale price biggest and red, red bar + tint).
 * Behaviour (countdown, Available at, SOLD OUT, Add, state refresh, D08) is unchanged.
 * ========================================================================== */
.sstt-flash{position:relative;margin-top:clamp(18px,2.4vw,32px)}
.sstt-flash[hidden]{display:none}
.sstt-flash + .sstt-ann{margin-top:clamp(44px,6vw,84px)}
.sstt-flash + .sstt-flash{margin-top:clamp(24px,3vw,40px)}

/* ---------- the frame (D18-2): band + cards in one red box ---------- */
.sstt-flash > .sstt-wrap{border:3px solid #dc2626;border-radius:14px;background:#fff4f4;overflow:hidden;
  box-shadow:0 22px 40px -28px rgba(185,28,28,.55)}
html[data-sst-theme="dark"] .sstt-flash > .sstt-wrap{background:#1c1113;border-color:#ef4444;box-shadow:0 22px 40px -28px rgba(0,0,0,.8)}

/* ---------- the campaign banner (D19): full width at the very top of the frame, above the band ---------- */
.sstt-flash-banner{display:block;width:100%;height:auto;margin:0;border:0}
/* D22: <picture> wrapper when a portrait phone banner (banner_url_sp, <=767px) exists */
.sstt-flash-banner-pic{display:block;width:100%;margin:0;line-height:0}

/* ---------- the band (D18-1): black -> red field with faint diagonal stripes ---------- */
.sstt-flash-band{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;
  min-height:96px;padding:14px 20px 14px 22px;color:#fff;isolation:isolate;
  background:linear-gradient(100deg,#0d0d10 0%,#1c0a0a 42%,#7f1212 72%,#dc2626 100%)}
.sstt-flash-band::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.14;
  background:repeating-linear-gradient(-55deg,transparent 0 18px,rgba(255,255,255,.9) 18px 22px)}
.sstt-flash-band::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:#dc2626}
html[data-sst-theme="dark"] .sstt-flash-band{background:linear-gradient(100deg,#050506 0%,#1a0707 42%,#7f1212 72%,#dc2626 100%)}
.sstt-flash-head{display:flex;align-items:center;flex-wrap:wrap;gap:6px 18px;flex:1 1 auto;min-width:0}
/* the two-tone FLASH SALE (white / red) = the loud headline of mock v1, Archivo 800 */
.sstt-flash-tag{display:inline-flex;align-items:baseline;gap:.22em;flex:0 0 auto;margin:0;
  font-size:clamp(28px,3vw,38px);font-weight:800;line-height:1;letter-spacing:-.01em;text-transform:uppercase;white-space:nowrap;
  text-shadow:0 2px 0 rgba(0,0,0,.35)}
.sstt-flash-tag-a{color:#fff}
.sstt-flash-tag-b{color:#ff4b4b}
.sstt-flash-h{margin:0;font-size:clamp(17px,1.9vw,24px);font-weight:700;line-height:1.2;letter-spacing:-.01em;text-transform:uppercase;color:#fff;
  overflow-wrap:anywhere;text-shadow:0 1px 0 rgba(0,0,0,.35)}
/* countdown: a red box, label over big tabular digits */
.sstt-flash-clock{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:2px;flex:0 0 auto;
  min-width:150px;padding:8px 14px 9px;border-radius:8px;background:#dc2626;color:#fff;
  box-shadow:0 10px 22px -12px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.18)}
.sstt-flash-ck{font-size:10px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.92)}
.sstt-flash-clock[data-mode="before"]{background:#b45309}
.sstt-flash-ck[hidden]{display:none}
.sstt-flash-cv{font-variant-numeric:tabular-nums;font-size:clamp(26px,2.6vw,32px);font-weight:700;line-height:1;letter-spacing:-.01em;color:#fff;white-space:nowrap}
.sstt-flash-cv.is-text{font-size:12px;letter-spacing:.2em;text-transform:uppercase}
/* the stage's site-font rule is (0,1,0)+!important on every descendant: these need (0,2,0)+!important, as .sstt-ann-ship-v does */
.sst-top .sstt-flash-tag,.sst-top .sstt-flash-h,.sst-top .sstt-flash-so{font-family:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important}
.sst-top .sstt-flash-ck,.sst-top .sstt-flash-cv,.sst-top .sstt-flash-pill,.sst-top .sstt-flash-was-k{font-family:'IBM Plex Mono',ui-monospace,monospace!important}
@media(max-width:749px){
  .sstt-flash-band{min-height:0;padding:12px 14px 12px}
  .sstt-flash-head{flex:1 1 100%}
  .sstt-flash-tag{font-size:30px}
  .sstt-flash-h{font-size:16px}
  .sstt-flash-clock{flex:1 1 100%;flex-direction:row;align-items:center;justify-content:space-between;padding:8px 12px}
  .sstt-flash-cv{font-size:26px}
}

/* ---------- cards grid (D18-3): 5 across >= 1024px, 4 / 3 on tablets, a rail on phones ---------- */
.sstt-boxes.sstt-boxes--flash{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:12px 12px 14px}
.sstt-boxes--flash:empty,.sstt-boxes--flash[hidden]{display:none}
@media(max-width:1023.98px){.sstt-boxes.sstt-boxes--flash{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:767.98px){.sstt-boxes.sstt-boxes--flash{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:559.98px){
  .sstt-boxes.sstt-boxes--flash{display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding:0 0 10px;margin:12px 10px 6px}
  .sstt-boxes--flash::-webkit-scrollbar{display:none}
  /* about 2.4 cards in view at 390px (the frame's inner rail is ~316px there) */
  /* min-width:0 — a flex item's default min-width:auto would widen the card to its content (the gallery dots row) */
  .sstt-boxes--flash > .sstt-card{flex:0 0 clamp(124px,33vw,176px);width:clamp(124px,33vw,176px);min-width:0;scroll-snap-align:start}
  .sstt-card--flash .sstt-card-in,.sstt-card--flash .sstt-card-stage,.sstt-card--flash .sstt-card-body{min-width:0}
  .sstt-card--flash .sstt-card-in{padding:8px 8px 10px}
  .sstt-card--flash .sstt-card-name{font-size:11.5px}
  .sstt-card--flash .sstt-offers.sstt-sm .sstt-oadd{height:34px;padding:0 6px;font-size:8.5px;letter-spacing:.08em;white-space:normal;line-height:1.15}
  /* purchase-layout.css (mobile purchase geometry) forces the stepper to 44px keys + min-width 140px with !important,
     which is wider than this 129px card: same selector prefix + .sstt-card--flash wins, 36px keys, fills the card */
  html body:not(.sst-app) .sst-qo .sstt-card--flash .sstt-offer-act > .sstt-qty:not([hidden]){grid-template-columns:36px minmax(28px,1fr) 36px!important;height:40px!important;min-height:40px!important;flex:1 1 100%!important;width:100%!important;min-width:0!important;max-width:100%!important}
  html body:not(.sst-app) .sst-qo .sstt-card--flash .sstt-qty .sstt-qty-b{width:36px!important;min-width:36px!important;height:38px!important;min-height:38px!important}
  html body:not(.sst-app) .sst-qo .sstt-card--flash .sstt-qty .sstt-qty-v{height:38px!important;min-height:38px!important;line-height:38px!important;font-size:14px!important}
  /* small card: no gallery controls (dots / 01 / 04 / arrows) — the first photo stays, swipe still works */
  .sstt-card--flash .sstt-g-ctl{display:none!important}
}
/* the gallery control bar must never widen a flash card (desktop / tablet: it fits, but never let it push) */
.sstt-card--flash .sstt-g-ctl{max-width:100%;min-width:0;overflow:hidden;box-sizing:border-box}
@media(prefers-reduced-motion:reduce){.sstt-boxes--flash{scroll-behavior:auto}}

/* ---------- the small card ---------- */
.sstt-card--flash[hidden]{display:none}
.sstt-card--flash .sstt-card-in{padding:9px 9px 11px;border-color:rgba(220,38,38,.28);background:#fff}
html[data-sst-theme="dark"] .sstt-card--flash .sstt-card-in{background:#232326;border-color:rgba(239,68,68,.35)}
.sstt-card--flash .sstt-card-stage{aspect-ratio:1/1}
.sstt-card--flash .sstt-card-stage img{max-width:86%;max-height:86%}
.sstt-card--flash .sstt-card-body{padding-top:9px}
.sstt-card--flash .sstt-card-name{font-size:12px;line-height:1.3;min-height:2.6em;letter-spacing:-.01em}
.sstt-flash-so{position:absolute;left:0;right:0;top:50%;z-index:2;transform:translateY(-50%);padding:8px 0;background:rgba(20,21,26,.82);
  color:#fff;text-align:center;font-size:13px;font-weight:800;letter-spacing:.2em;text-transform:uppercase}
.sstt-flash-so[hidden]{display:none}
.sstt-card--flash[data-sold-out="1"] .sstt-card-stage img{opacity:.45;filter:grayscale(.7)}
.sstt-card--flash[data-sold-out="1"] .sstt-flash-price{opacity:.6}

/* offer row: variant label small, "N left" chip red */
.sstt-card--flash .sstt-offers.sstt-sm{padding-top:0}
.sstt-card--flash .sstt-offers.sstt-sm .sstt-offer{padding-top:8px}
.sstt-card--flash .sstt-offer-head{gap:4px 8px}
/* D21: the variant label as a readable chip — SEALED on light grey, NO SHRINK on light yellow / dark brown text */
.sstt-card--flash .sstt-offer-l{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:4px;background:#eeeeee;color:#111;
  font-size:13px;font-weight:700;letter-spacing:.04em;line-height:1;text-transform:uppercase;white-space:nowrap}
.sstt-card--flash .sstt-offer[data-sstt-offer-type="noshrink"] .sstt-offer-l{background:#fff3c4;color:#6b4a00}
html[data-sst-theme="dark"] .sstt-card--flash .sstt-offer-l{background:#3a3a40;color:#fff}
html[data-sst-theme="dark"] .sstt-card--flash .sstt-offer[data-sstt-offer-type="noshrink"] .sstt-offer-l{background:#4d3b05;color:#ffe08a}
.sstt-stock.sstt-low.sstt-flash-left{font-size:9.5px;color:#b91c1c;font-weight:700}
.sstt-stock.sstt-low.sstt-flash-left i{background:#dc2626;box-shadow:0 0 0 3px rgba(220,38,38,.18)}
html[data-sst-theme="dark"] .sstt-stock.sstt-low.sstt-flash-left{color:#ff6b6b}
.sstt-stock.sstt-flash-left[hidden]{display:none}

/* ---------- the price block (D18-4): pill + badge / Was ¥x / ¥sale, red bar + tint ---------- */
.sstt-card--flash .sstt-offers.sstt-sm .sstt-offer-buy{margin-top:6px;gap:8px 10px}
.sstt-card--flash .sstt-offer-money.sstt-flash-price{display:flex;flex-direction:column;align-items:flex-start;gap:3px;flex:1 1 100%;min-width:0;
  padding:7px 8px 8px 9px;border-left:3px solid #dc2626;border-radius:0 7px 7px 0;background:rgba(220,38,38,.08)}
html[data-sst-theme="dark"] .sstt-card--flash .sstt-offer-money.sstt-flash-price{background:rgba(239,68,68,.14);border-left-color:#ef4444}
.sstt-flash-price-tags{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.sstt-flash-pill{display:inline-flex;align-items:center;height:17px;padding:0 6px;border-radius:3px;background:#dc2626;color:#fff;
  font-size:8.5px;font-weight:700;letter-spacing:.14em;line-height:1;text-transform:uppercase;white-space:nowrap}
.sstt-flash-price .sstt-badge.sstt-flash-pct{height:17px;padding:0 6px;border-radius:3px;background:#14151a;color:#fff;font-size:9.5px;font-weight:700;letter-spacing:.06em}
html[data-sst-theme="dark"] .sstt-flash-price .sstt-badge.sstt-flash-pct{background:#fff;color:#14151a}
.sstt-badge.sstt-flash-pct[hidden]{display:none}
.sstt-flash-was{position:relative;display:inline-flex;align-items:baseline;gap:.3em;font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;
  color:#6b7280;text-decoration:none;white-space:nowrap}
.sstt-flash-was-k{font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#8b8f99}
.sstt-flash-was::after{content:"";position:absolute;left:-3%;top:52%;width:106%;border-top:2px solid #dc2626;transform:rotate(-8deg);transform-origin:center;pointer-events:none}
.sstt-flash-was[hidden]{display:none}
html[data-sst-theme="dark"] .sstt-flash-was{color:#b4b6bd}
html[data-sst-theme="dark"] .sstt-flash-was::after{border-top-color:#f87171}
@media(forced-colors:active){.sstt-flash-was::after{border-color:CanvasText}}
/* the sale price: the biggest thing on the card, red (20-22px on desktop) */
.sstt-card--flash .sstt-offers.sstt-sm .sstt-offer-y.sstt-flash-now{font-size:clamp(19px,1.7vw,22px);font-weight:800;letter-spacing:-.02em;line-height:1.05;color:#b91c1c}
html[data-sst-theme="dark"] .sstt-card--flash .sstt-offers.sstt-sm .sstt-offer-y.sstt-flash-now{color:#ff6b6b}
.sstt-card--flash .sstt-offer-w{display:none}

/* stepper + Add: the stepper row, then a full-width red button (keeps the full "Add to cart" label in a 170px card) */
.sstt-card--flash .sstt-offers.sstt-sm .sstt-offer-act{flex-wrap:wrap;gap:6px 8px;justify-content:flex-start}
.sstt-card--flash .sstt-qty .sstt-qty-b{width:28px;height:28px}
.sstt-card--flash .sstt-qty-v{width:34px;height:28px;line-height:28px;font-size:12px}
.sstt-card--flash[data-can-buy="0"] .sstt-qty{display:none}
.sstt-card--flash .sstt-offers.sstt-sm .sstt-oadd{flex:1 1 100%;max-width:none;height:32px;padding:0 10px;font-size:9.5px;letter-spacing:.12em}
.sst-top .sstt-btn.sstt-flash-add{background:#dc2626;border-color:#dc2626;color:#fff}
.sst-top .sstt-btn.sstt-flash-add:hover{background:#b91c1c;border-color:#b91c1c;color:#fff}
.sst-top .sstt-btn.sstt-flash-add:disabled,.sst-top .sstt-btn.sstt-flash-add:disabled:hover{opacity:1;background:transparent;border-color:rgba(220,38,38,.45);color:#b91c1c;transform:none;box-shadow:none;cursor:not-allowed}
html[data-sst-theme="dark"] .sst-top .sstt-btn.sstt-flash-add{background:#dc2626;border-color:#dc2626;color:#fff}
html[data-sst-theme="dark"] .sst-top .sstt-btn.sstt-flash-add:hover{background:#b91c1c;border-color:#b91c1c;color:#fff}
html[data-sst-theme="dark"] .sst-top .sstt-btn.sstt-flash-add:disabled,html[data-sst-theme="dark"] .sst-top .sstt-btn.sstt-flash-add:disabled:hover{background:transparent;border-color:rgba(239,68,68,.5);color:#ff6b6b}
.sst-top .sstt-btn.sstt-flash-add.sstt-added{background:var(--sstt-ink);border-color:var(--sstt-ink);color:var(--sstt-paper)}