/* SST NEW1000 v2 (sst-new1000-welcome): corner pop-up, details modal, price row.
   Contract: SPEC v2 section 4. Prefix sst-n1k-. Colours are the theme tokens (style.css :root,
   dark-mode.css html[data-sst-theme="dark"]; the site ignores prefers-color-scheme on purpose,
   theme-toggle.js "DESIGN D6"); the literals after each var() are the light values.

   Where the pop-up sits (live theme, 2026-10-30):
   - PC (>1024px): bottom-left. Bottom-right holds Order help (config "position":"bottom-right")
     and the TOP toasts (top-tab.css:683 right/bottom 22px). Google's merchant badge is started
     with position 'LEFT_BOTTOM' (home HTML, merchantwidget.start) = fixed left 20px / bottom
     20px with an iframe-driven size, so new1000.js measures it and writes --sst-n1k-lift
     (its top edge + 12px) on the pop-up; the pop-up stands on top of it.
   - <=1024px: the only things fixed to the bottom edge are the purchase bars
     (.sst-qo__side / .sst-cart-mobile-checkout / .sst-sticky-cart.is-visible / .sst-co-bar).
     purchase-layout.81939980e625.js:214-225 measures the visible one and writes its height,
     safe-area padding included, to --sst-purchase-dock-h on <html> (enqueued on every route:
     functions.php:596-601; default 0px at purchase-layout.9a3b7cf9f54f.css:6). Order help,
     the pre-order pill (purchase-layout.9a3b7cf9f54f.css:114,117) and the Google badge
     (purchase-layout.81939980e625.js:157-172) are moved into page flow, so the bar is all
     there is to clear. The collapsed QO bar is two 44px rows + 8px padding + 6px gap
     (purchase-layout.9a3b7cf9f54f.css:25-37) = about 110px + safe area.
     qo-mobile-dock.{js,css,observed.js} are not enqueued anywhere any more (no PHP reference;
     functions.php:469 "Mobile purchase geometry is owned by purchase-layout on every route").
   - Flutter app WebView (body.sst-app): purchase-layout does not run (js:8); the QO bar sits
     at bottom: calc(76px + safe area) (quick-order-critical.css:7045); new1000.js measures it
     into --sst-n1k-lift as well.
   - z-index 55: above the sticky header (style.css:204, 20), below the header popovers
     (style.css:448, 60), the sticky cart (:3754, 70), the cart drawer (:4597, 80) and the
     QO bar (quick-order-critical.css:6914, 1000), which the pop-up never overlaps. */

.sst-n1k-pop,
.sst-n1k-pop *,
.sst-n1k-pop *::before,
.sst-n1k-pop *::after,
.sst-n1k-modal,
.sst-n1k-modal *,
.sst-n1k-modal *::before,
.sst-n1k-modal *::after {
  box-sizing: border-box;
}

.sst-n1k-pop [hidden],
.sst-n1k-modal[hidden],
.sst-n1k-modal [hidden] {
  display: none !important;
}

.sst-n1k-pop,
.sst-n1k-modal {
  --n1k-ink: var(--sst-ink, #121212);
  --n1k-muted: var(--sst-muted, #5f5f5f);
  --n1k-line: var(--sst-line, #ececec);
  --n1k-surface: var(--sst-surface, #ffffff);
  --n1k-soft: var(--sst-gray, #f7f7f7);
  --n1k-focus: var(--sst-focus, #1f6feb);
  --n1k-accent: var(--sst-accent, #9e2c5f);
  --n1k-accent-dark: var(--sst-accent-dark, #7a2149);
  --n1k-on-accent: var(--sst-btn-label, #ffffff);
  --n1k-ok: var(--sst-ok-text, #157f3c);
  --n1k-err: var(--sst-err-text, #b42318);
  /* Notice "Cannot be used with sale or pre-order items in the same cart." (state.cartBlocked). The
     theme defines --sst-err-* only in dark-mode.css; the literals are the light values. */
  --n1k-err-bg: var(--sst-err-bg, #fef3f2);
  --n1k-err-line: #f6c9c4;
  --n1k-on-err: #ffffff;
  /* Price row: the QO SALE look (quick-order-critical.css:9356-9383, sale-pricing.css). */
  --n1k-was: #6b7280;
  --n1k-slash: #dc2626;
  --n1k-now: #b91c1c;
  /* Pale band behind the price row, as in the owner's tile mock-up. */
  --n1k-band: #fff7d6;
  --n1k-band-line: #f3d77a;
  font-family: var(--sst-font, "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
  text-align: left;
}

/* ---------- price row: ¥24,211 (red strike) → ¥23,211 ----------
   The elements also carry .sst-qo__sale-prices / -regular / -current (QO's own SALE classes);
   these rules give the same look where the QO stylesheets are not on the page, and the doubled
   class outranks QO's single-class layout rules in any load order: the live
   quick-order-critical.min.css sets .sst-qo__sale-prices{flex-direction:column;align-items:center;
   gap:1px} (review R2-01: without flex-direction here the row stacked into three lines). */
.sst-qo__sale-prices.sst-n1k-price,
.sst-n1k-price {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: .42em;
  margin: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.sst-n1k-price .sst-n1k-price__regular {
  position: relative;
  display: inline-flex;
  color: var(--n1k-was, #6b7280);
  background: none;
  font-size: .8em;
  font-weight: 650;
  text-decoration: none !important;
  opacity: .92;
}

.sst-n1k-price .sst-n1k-price__regular::after {
  content: "";
  position: absolute;
  left: -4%;
  top: 49%;
  width: 108%;
  border-top: 2px solid var(--n1k-slash, #dc2626);
  transform: rotate(-10deg);
  transform-origin: center;
  pointer-events: none;
}

.sst-n1k-price .sst-n1k-price__arrow {
  color: var(--n1k-slash, #dc2626);
  font-size: .9em;
  font-weight: 800;
  line-height: 1;
}

.sst-n1k-price .sst-n1k-price__current {
  color: var(--n1k-now, #b91c1c);
  background: none;
  font-size: 1.12em;
  font-weight: 900;
  text-decoration: none;
}

/* ---------- cart refuses coupons (state.cartBlocked): regular price alone + notice ----------
   The plain row carries no QO SALE class, so no strike and no column layout can reach it. */
.sst-n1k-price--plain .sst-n1k-price__plain {
  color: var(--n1k-ink);
  font-size: .92em;
  font-weight: 800;
}

/* Wraps instead of being cut off: the English line is about 330px wide at 12px, more than any
   pop-up body (the pop-up widths are the owner's call, review R2-15). */
.sst-n1k-notice {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  color: var(--n1k-err);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
}

.sst-n1k-notice::before {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 1.25em;
  height: 1.25em;
  margin-top: .05em;
  border-radius: 50%;
  color: var(--n1k-on-err);
  background: var(--n1k-err);
  font-size: .9em;
  font-weight: 900;
  line-height: 1;
  content: "!";
  content: "!" / "";
}

/* ---------- pop-up ---------- */
.sst-n1k-pop {
  position: fixed;
  left: max(16px, env(safe-area-inset-left, 0px));
  bottom: max(16px, var(--sst-n1k-lift, 0px));
  z-index: 55;
  width: 220px;
  max-width: calc(100vw - 32px);
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: var(--n1k-ink);
  background: var(--n1k-surface);
  border: 1px solid var(--n1k-line);
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .08);
  font-size: 13px;
  line-height: 1.35;
  animation: sst-n1k-pop-in .2s ease-out both;
  transition: bottom .2s ease;
}

@keyframes sst-n1k-pop-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.sst-n1k-pop__main {
  display: block;
}

/* Artwork + price + countdown are one button that opens the details. The theme styles every
   <button> as a pink pill (style.css:692-714), so each state is reset here. */
.sst-n1k-pop .sst-n1k-pop__open,
.sst-n1k-pop .sst-n1k-pop__open:hover,
.sst-n1k-pop .sst-n1k-pop__open:focus {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-align: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.sst-n1k-pop .sst-n1k-pop__open:focus-visible {
  outline: 2px solid var(--n1k-focus);
  outline-offset: -3px;
}

.sst-n1k-pop__media {
  display: block;
  background: #b91c1c;
}

.sst-n1k-pop__img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.sst-n1k-pop__body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  min-width: 0;
  padding: 8px 10px 9px;
}

.sst-n1k-pop__eyebrow {
  display: block;
  color: var(--n1k-muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.sst-n1k-pop .sst-n1k-price--pop {
  display: flex;
  justify-content: center;
  padding: 5px 8px;
  border: 1px solid var(--n1k-band-line);
  border-radius: 6px;
  background: var(--n1k-band);
  font-size: 17px;
}

/* Same place and shape as the price band, red instead of yellow. No badge here: the band says it,
   and the badge's width costs a third line in the narrow pop-up body. */
.sst-n1k-pop .sst-n1k-notice--pop {
  padding: 5px 8px;
  border: 1px solid var(--n1k-err-line);
  border-radius: 6px;
  background: var(--n1k-err-bg);
  font-size: 11.5px;
}

.sst-n1k-pop .sst-n1k-notice--pop::before {
  display: none;
}

.sst-n1k-pop__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2px 8px;
}

.sst-n1k-pop__left {
  min-width: 0;
  color: var(--n1k-ink);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.sst-n1k-pop__more {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
  color: var(--n1k-muted);
  font-weight: 650;
  white-space: nowrap;
}

.sst-n1k-pop__chev {
  font-size: 15px;
  line-height: 1;
}

.sst-n1k-pop .sst-n1k-pop__open:hover .sst-n1k-pop__more {
  color: var(--n1k-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* x: 36x36 hit area, a smaller solid disc so it reads on top of the busy artwork. */
.sst-n1k-pop .sst-n1k-pop__close,
.sst-n1k-pop .sst-n1k-pop__close:hover,
.sst-n1k-pop .sst-n1k-pop__close:focus {
  position: absolute;
  top: 2px;
  right: 2px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #121212;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.sst-n1k-pop .sst-n1k-pop__close::before {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .28);
  content: "";
}

.sst-n1k-pop .sst-n1k-pop__close:hover::before {
  background: #ffffff;
}

.sst-n1k-pop .sst-n1k-pop__close:focus-visible {
  outline: 2px solid var(--n1k-focus);
  outline-offset: -2px;
}

.sst-n1k-pop__close svg,
.sst-n1k-modal__close svg {
  position: relative;
  display: block;
  width: 12px;
  height: 12px;
}

/* Confirmation that replaces the pop-up content in place. */
.sst-n1k-pop__confirm {
  padding: 14px 12px 12px;
}

.sst-n1k-pop .sst-n1k-pop__ask {
  margin: 0 0 12px;
  color: var(--n1k-ink);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
}

.sst-n1k-pop__choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sst-n1k-pop .sst-n1k-pop__choice {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 40px;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--n1k-ink);
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.sst-n1k-pop .sst-n1k-pop__choice--hide,
.sst-n1k-pop .sst-n1k-pop__choice--hide:hover,
.sst-n1k-pop .sst-n1k-pop__choice--hide:focus {
  color: var(--n1k-surface);
  background: var(--n1k-ink);
}

.sst-n1k-pop .sst-n1k-pop__choice--hide:hover {
  opacity: .86;
}

.sst-n1k-pop .sst-n1k-pop__choice--keep,
.sst-n1k-pop .sst-n1k-pop__choice--keep:focus {
  color: var(--n1k-ink);
  background: transparent;
}

.sst-n1k-pop .sst-n1k-pop__choice--keep:hover {
  color: var(--n1k-ink);
  background: var(--n1k-soft);
}

.sst-n1k-pop .sst-n1k-pop__choice:focus-visible {
  outline: 2px solid var(--n1k-focus);
  outline-offset: 2px;
}

/* No artwork configured: the text block alone, room for the x. */
.sst-n1k-pop--text .sst-n1k-pop__body {
  padding-right: 40px;
}

/* Compact: artwork as a thumbnail beside the text. Tablets, phones and short PC windows. */
@media (max-width: 1024px), (max-height: 720px) {
  .sst-n1k-pop {
    width: 312px;
    max-width: calc(100vw - 24px);
  }

  .sst-n1k-pop .sst-n1k-pop__open,
  .sst-n1k-pop .sst-n1k-pop__open:hover,
  .sst-n1k-pop .sst-n1k-pop__open:focus {
    display: flex;
    align-items: stretch;
  }

  .sst-n1k-pop__media {
    flex: 0 0 96px;
    width: 96px;
  }

  .sst-n1k-pop__img {
    width: 96px;
    height: 100%;
    min-height: 96px;
  }

  .sst-n1k-pop__body {
    flex: 1 1 auto;
    justify-content: center;
    gap: 4px;
    padding: 7px 38px 7px 10px;
  }

  .sst-n1k-pop .sst-n1k-price--pop {
    align-self: flex-start;
    justify-content: flex-start;
    padding: 3px 7px;
    font-size: 15px;
  }

  .sst-n1k-pop .sst-n1k-notice--pop {
    gap: 5px;
    padding: 3px 7px;
    font-size: 11px;
  }

  .sst-n1k-pop__more {
    margin-left: 0;
  }

  .sst-n1k-pop__bar {
    justify-content: flex-start;
    gap: 1px 10px;
  }
}

/* Tablets and phones: stand on top of whichever purchase bar is fixed to the bottom. The
   measured height already contains the bar's safe-area padding, so the safe area is a floor
   (no bar) rather than an addition. */
@media (max-width: 1024px) {
  .sst-n1k-pop {
    left: max(12px, env(safe-area-inset-left, 0px));
    bottom: max(calc(max(var(--sst-purchase-dock-h, 0px), env(safe-area-inset-bottom, 0px)) + 12px), var(--sst-n1k-lift, 0px));
  }
}

@media (max-width: 749px) {
  .sst-n1k-pop {
    width: 260px;
    border-radius: 9px;
    font-size: 12px;
  }

  .sst-n1k-pop__media {
    flex-basis: 72px;
    width: 72px;
  }

  .sst-n1k-pop__img {
    width: 72px;
    min-height: 72px;
  }

  .sst-n1k-pop__body {
    gap: 3px;
    padding: 6px 8px 7px;
  }

  /* Only the first line shares its height with the x. */
  .sst-n1k-pop__eyebrow {
    padding-right: 26px;
    font-size: 10.5px;
  }

  .sst-n1k-pop .sst-n1k-price--pop {
    padding: 2px 6px;
    font-size: 13.5px;
  }

  /* The body has no right padding here and the notice runs full width: start it below the x disc
     (button 32px at the corner, disc inset 6px). */
  .sst-n1k-pop .sst-n1k-notice--pop {
    gap: 4px;
    margin-top: 5px;
    padding: 3px 6px;
    font-size: 10.5px;
    line-height: 1.3;
  }

  .sst-n1k-pop__bar {
    gap: 0 8px;
  }

  .sst-n1k-pop .sst-n1k-pop__close,
  .sst-n1k-pop .sst-n1k-pop__close:hover,
  .sst-n1k-pop .sst-n1k-pop__close:focus {
    top: 0;
    right: 0;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
  }

  .sst-n1k-pop .sst-n1k-pop__close::before {
    inset: 6px;
  }

  .sst-n1k-pop__close svg {
    width: 10px;
    height: 10px;
  }

  .sst-n1k-pop__confirm {
    padding: 12px 10px 10px;
  }

  .sst-n1k-pop .sst-n1k-pop__ask {
    font-size: 12.5px;
  }
}

/* Step aside while another layer owns the screen: the mobile menu (its overlay is z 55 too,
   style.css:286), the QO review panel / cart drawer / purchase gates and the on-screen
   keyboard (purchase-layout.9a3b7cf9f54f.css:119-123 hides its own floaters on the same
   classes), and the modals the pre-order pill steps aside for (functions.php:21688-21692). */
body.sst-nav-open .sst-n1k-pop,
body.sst-cart-open .sst-n1k-pop,
body.sst-qo-panel-open .sst-n1k-pop,
body.sst-qo-mobile-cart-open .sst-n1k-pop,
body.sst-purchase-gate-open .sst-n1k-pop,
body.sst-purchase-keyboard .sst-n1k-pop,
body.sst-qo-details-gate-open .sst-n1k-pop,
body.sst-cdmodal-open .sst-n1k-pop,
body.sst-cdpromo2-open .sst-n1k-pop,
body.sst-preorder-mixed-open .sst-n1k-pop {
  visibility: hidden;
  pointer-events: none;
}

/* ---------- modal ---------- */
html.sst-n1k-lock,
html.sst-n1k-lock body {
  overflow: hidden !important;
}

html.sst-n1k-lock {
  scrollbar-gutter: stable;
}

/* Google's badge wrapper is z 2147483647 (merchantwidget.js); purchase-layout hides it the
   same way under its own modal states. */
html.sst-n1k-lock #google-merchantwidget-iframe-wrapper {
  visibility: hidden !important;
}

.sst-n1k-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483600; /* over the QO review panel and the mobile drawer (2147483001) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: rgba(0, 0, 0, .56);
  overscroll-behavior: contain;
  touch-action: pinch-zoom;
  animation: sst-n1k-fade .2s ease-out both;
}

@keyframes sst-n1k-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes sst-n1k-rise {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to { opacity: 1; transform: none; }
}

.sst-n1k-modal__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(560px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  overflow: hidden;
  color: var(--n1k-ink);
  background: var(--n1k-surface);
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .32);
  outline: none;
  animation: sst-n1k-rise .2s ease-out both;
}

.sst-n1k-modal__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y pinch-zoom;
  -webkit-overflow-scrolling: touch;
}

.sst-n1k-modal__pic {
  display: block;
}

.sst-n1k-modal__img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: 1672 / 940;
  object-fit: cover;
  background: #b91c1c;
}

.sst-n1k-modal .sst-n1k-modal__close,
.sst-n1k-modal .sst-n1k-modal__close:hover,
.sst-n1k-modal .sst-n1k-modal__close:focus {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #121212;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.sst-n1k-modal .sst-n1k-modal__close::before {
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 1px 5px rgba(0, 0, 0, .3);
  content: "";
}

.sst-n1k-modal .sst-n1k-modal__close:hover::before {
  background: #ffffff;
}

.sst-n1k-modal .sst-n1k-modal__close:focus-visible {
  outline: 2px solid var(--n1k-focus);
  outline-offset: -2px;
}

.sst-n1k-modal__close svg {
  width: 14px;
  height: 14px;
}

.sst-n1k-modal__body {
  padding: 18px 24px 22px;
  font-size: 15px;
  line-height: 1.6;
}

.sst-n1k-modal .sst-n1k-modal__title {
  margin: 0 0 14px;
  color: var(--n1k-ink);
  font-family: inherit;
  font-size: 21px;
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: 0;
}

.sst-n1k-modal__product {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--n1k-band-line);
  border-radius: 8px;
  background: var(--n1k-band);
}

.sst-n1k-modal__thumb {
  flex: 0 0 72px;
  width: 72px;
  height: 54px;
  border-radius: 4px;
  object-fit: cover;
  background: var(--n1k-surface);
}

.sst-n1k-modal__product-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.sst-n1k-modal .sst-n1k-modal__pname {
  margin: 0;
  color: var(--n1k-ink);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.sst-n1k-modal .sst-n1k-price--modal {
  font-size: 22px;
}

.sst-n1k-modal .sst-n1k-notice--modal {
  font-size: 13px;
  line-height: 1.4;
}

.sst-n1k-modal .sst-n1k-modal__text {
  margin: 0 0 6px;
  color: var(--n1k-ink);
}

.sst-n1k-modal .sst-n1k-modal__expires {
  margin: 0 0 16px;
  color: var(--n1k-ink);
  font-variant-numeric: tabular-nums;
}

.sst-n1k-modal__expires strong {
  font-weight: 750;
}

.sst-n1k-modal .sst-n1k-modal__expires.is-expired {
  color: var(--n1k-err);
  font-weight: 700;
}

.sst-n1k-modal__code {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 0;
  padding: 10px 12px 12px;
  border: 1px dashed var(--n1k-muted);
  border-radius: 8px;
  background: var(--n1k-soft);
}

.sst-n1k-modal__code-label {
  flex: 1 0 100%;
  color: var(--n1k-muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.3;
}

.sst-n1k-modal__code-value {
  color: var(--n1k-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: .1em;
  -webkit-user-select: all;
  user-select: all;
}

.sst-n1k-modal .sst-n1k-modal__copy,
.sst-n1k-modal .sst-n1k-modal__copy:focus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 40px;
  margin: 0 0 0 auto;
  padding: 8px 14px;
  border: 1px solid var(--n1k-ink);
  border-radius: 6px;
  color: var(--n1k-ink);
  background: var(--n1k-surface);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.sst-n1k-modal .sst-n1k-modal__copy:hover,
.sst-n1k-modal .sst-n1k-modal__copy.is-copied {
  color: var(--n1k-surface);
  background: var(--n1k-ink);
}

.sst-n1k-modal__code-note {
  flex: 1 0 100%;
  color: var(--n1k-muted);
  font-size: 13px;
  line-height: 1.45;
}

.sst-n1k-modal .sst-n1k-modal__h {
  margin: 18px 0 4px;
  color: var(--n1k-ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 750;
  line-height: 1.35;
  letter-spacing: 0;
}

.sst-n1k-modal .sst-n1k-modal__conditions {
  margin: 0;
  color: var(--n1k-muted);
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* After the deadline the discount and the code are history; the links stay. */
.sst-n1k-modal.is-expired .sst-n1k-price,
.sst-n1k-modal.is-expired .sst-n1k-notice,
.sst-n1k-modal.is-expired .sst-n1k-modal__code {
  display: none;
}

/* Footer: always visible under the scrolling details. */
.sst-n1k-modal__foot {
  flex: 0 0 auto;
  padding: 12px 24px 16px;
  border-top: 1px solid var(--n1k-line);
  background: var(--n1k-surface);
}

.sst-n1k-modal .sst-n1k-modal__status {
  margin: 0 0 8px;
  color: var(--n1k-ok);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}

.sst-n1k-modal .sst-n1k-modal__status.is-error {
  color: var(--n1k-err);
}

.sst-n1k-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sst-n1k-modal .sst-n1k-btn {
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid var(--n1k-ink);
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* The primary action takes the whole first row; the two links share the second. */
.sst-n1k-modal .sst-n1k-btn--primary,
.sst-n1k-modal .sst-n1k-btn--primary:visited,
.sst-n1k-modal .sst-n1k-btn--primary:focus {
  flex: 1 1 100%;
  min-height: 48px;
  border-color: var(--n1k-accent);
  color: var(--n1k-on-accent);
  background: var(--n1k-accent);
  font-size: 15px;
}

.sst-n1k-modal .sst-n1k-btn--primary:hover {
  border-color: var(--n1k-accent-dark);
  color: var(--n1k-on-accent);
  background: var(--n1k-accent-dark);
}

.sst-n1k-modal .sst-n1k-btn--primary[aria-busy="true"] {
  cursor: progress;
  opacity: .78;
}

.sst-n1k-modal .sst-n1k-btn--primary[aria-busy="true"]::after {
  width: 14px;
  height: 14px;
  margin-left: 10px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: sst-n1k-spin .8s linear infinite;
  content: "";
}

@keyframes sst-n1k-spin {
  to { transform: rotate(360deg); }
}

.sst-n1k-modal .sst-n1k-btn--primary:disabled,
.sst-n1k-modal .sst-n1k-btn--primary:disabled:hover {
  border-color: var(--n1k-line);
  color: var(--n1k-muted);
  background: var(--n1k-soft);
  cursor: not-allowed;
  opacity: 1;
}

.sst-n1k-modal .sst-n1k-btn--secondary,
.sst-n1k-modal .sst-n1k-btn--secondary:visited,
.sst-n1k-modal .sst-n1k-btn--secondary:focus {
  color: var(--n1k-ink);
  background: transparent;
}

.sst-n1k-modal .sst-n1k-btn--secondary:hover {
  color: var(--n1k-ink);
  background: var(--n1k-soft);
}

.sst-n1k-modal .sst-n1k-modal__copy:focus-visible,
.sst-n1k-modal .sst-n1k-btn:focus-visible {
  outline: 2px solid var(--n1k-focus);
  outline-offset: 2px;
}

.sst-n1k-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 749px) {
  .sst-n1k-modal {
    padding: 8px;
  }

  .sst-n1k-modal__dialog {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
  }

  .sst-n1k-modal__body {
    padding: 14px 16px 18px;
    font-size: 14.5px;
  }

  .sst-n1k-modal .sst-n1k-modal__title {
    margin-bottom: 12px;
    font-size: 19px;
  }

  .sst-n1k-modal__thumb {
    flex-basis: 60px;
    width: 60px;
    height: 45px;
  }

  .sst-n1k-modal .sst-n1k-price--modal {
    font-size: 20px;
  }

  .sst-n1k-modal__code-value {
    font-size: 20px;
  }

  .sst-n1k-modal__foot {
    padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  }
}

/* ---------- dark mode (html[data-sst-theme="dark"]; the --sst-* tokens flip, these are the rest) ---------- */
html[data-sst-theme="dark"] .sst-n1k-pop,
html[data-sst-theme="dark"] .sst-n1k-modal {
  --n1k-was: var(--sst-muted, #a3a3a8);
  --n1k-slash: var(--sst-sale, #f87171);
  --n1k-now: var(--sst-sale, #f87171);
  --n1k-band: #2a2412;
  --n1k-band-line: #5a4a1a;
  /* dark-mode.css: --sst-err-text #f87171, --sst-err-bg #3f1616 */
  --n1k-err: var(--sst-err-text, #f87171);
  --n1k-err-bg: var(--sst-err-bg, #3f1616);
  --n1k-err-line: #6b2a2a;
  --n1k-on-err: #1a1a1c;
}

html[data-sst-theme="dark"] .sst-n1k-pop {
  box-shadow: 0 14px 34px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .4);
}

html[data-sst-theme="dark"] .sst-n1k-pop .sst-n1k-pop__close,
html[data-sst-theme="dark"] .sst-n1k-pop .sst-n1k-pop__close:focus,
html[data-sst-theme="dark"] .sst-n1k-modal .sst-n1k-modal__close,
html[data-sst-theme="dark"] .sst-n1k-modal .sst-n1k-modal__close:focus {
  color: #e8e8e8;
}

html[data-sst-theme="dark"] .sst-n1k-pop .sst-n1k-pop__close::before,
html[data-sst-theme="dark"] .sst-n1k-modal .sst-n1k-modal__close::before {
  background: rgba(26, 26, 28, .92);
  box-shadow: 0 1px 5px rgba(0, 0, 0, .6);
}

html[data-sst-theme="dark"] .sst-n1k-pop .sst-n1k-pop__close:hover,
html[data-sst-theme="dark"] .sst-n1k-modal .sst-n1k-modal__close:hover {
  color: #ffffff;
}

html[data-sst-theme="dark"] .sst-n1k-pop .sst-n1k-pop__close:hover::before,
html[data-sst-theme="dark"] .sst-n1k-modal .sst-n1k-modal__close:hover::before {
  background: #232326;
}

html[data-sst-theme="dark"] .sst-n1k-modal {
  background: rgba(0, 0, 0, .72);
}

html[data-sst-theme="dark"] .sst-n1k-modal__dialog {
  box-shadow: 0 24px 64px rgba(0, 0, 0, .7), 0 0 0 1px var(--n1k-line);
}

html[data-sst-theme="dark"] .sst-n1k-modal__code {
  background: var(--sst-paper, #0f0f10);
}

/* ---------- forced colours, motion, print ---------- */
@media (forced-colors: active) {
  .sst-n1k-price .sst-n1k-price__regular::after {
    border-color: CanvasText;
  }

  .sst-n1k-notice::before,
  .sst-n1k-pop .sst-n1k-notice--pop {
    border: 1px solid CanvasText;
  }

  .sst-n1k-pop,
  .sst-n1k-modal__dialog {
    border: 1px solid CanvasText;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sst-n1k-pop,
  .sst-n1k-modal,
  .sst-n1k-modal__dialog {
    animation: none;
    transition: none;
  }

  .sst-n1k-modal .sst-n1k-btn--primary[aria-busy="true"]::after {
    animation: none;
    border-right-color: currentColor;
    opacity: .5;
  }
}

@media print {
  .sst-n1k-pop,
  .sst-n1k-modal {
    display: none !important;
  }
}