:root {
  color-scheme: light;
  /* U-DOT tone: pure white canvas, neutral controls, decisive black states. */
  --background: #ffffff;
  --foreground: #111111;
  --card: #ffffff;
  --stage: #ffffff;
  --surface: #f4f4f4;
  --surface-hover: #ececec;
  --surface-selected: #eeeeee;
  --muted: #686868;
  --muted-soft: #f4f4f4;
  --border: rgba(17, 17, 17, 0.09);
  --border-strong: rgba(17, 17, 17, 0.14);
  --primary: #111111;
  --primary-foreground: #ffffff;
  --accent: #001f3f;
  --ring: rgba(17, 17, 17, 0.12);
  --radius: 10px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  background: var(--background);
  color: var(--foreground);
  font-family:
    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Desktop fits the viewport exactly — only the parts list scrolls, never the page. */
@media (min-width: 1081px) {
  html,
  body {
    overflow: hidden;
  }
}

button {
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

button:disabled {
  cursor: not-allowed;
}

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

h1,
h2,
h3 {
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------- shell ---------- */
.storefront-shell {
  height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(384px, 452px);
}

/* ---------- preview (left, fixed) ---------- */
.preview-pane {
  min-width: 0;
  height: 100vh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 18px;
  padding: 32px 32px 24px;
  background: var(--background);
}

.topbar {
  position: relative;
  min-height: 48px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}

.store-link,
.brand-link {
  color: var(--foreground);
  text-decoration: none;
}

.store-link {
  min-width: 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 5px;
  padding-right: 8px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.12em;
}

.store-link svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.brand-link {
  min-height: 44px;
  display: grid;
  place-items: center;
  justify-self: center;
}

.brand-link img {
  display: block;
  width: 88px;
  height: auto;
}

.top-actions {
  display: flex;
  justify-self: end;
  gap: 8px;
}

.share-feedback {
  position: fixed;
  z-index: 40;
  top: 72px;
  left: 50%;
  width: max-content;
  max-width: min(420px, calc(100vw - 32px));
  margin: 0;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(23, 23, 23, 0.94);
  padding: 11px 18px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}

.share-feedback[data-state="error"] {
  width: min(420px, calc(100vw - 32px));
  background: #8e211b;
  white-space: normal;
}

.share-feedback[hidden] {
  display: none;
}

.ghost-button,
.icon-button,
.header-icon-button {
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--foreground);
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease;
}

.ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  text-decoration: none;
  font-weight: 620;
}

#shareButton {
  width: 44px;
  min-width: 44px;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

#shareButton[data-state="copied"] {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-foreground);
}

.icon-button {
  width: 42px;
  font-size: 18px;
}

.header-icon-button {
  position: relative;
  width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 999px;
  background: transparent;
}

.button-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.button-icon--check {
  display: none;
}

#shareButton[data-state="copied"] .button-icon--share {
  display: none;
}

#shareButton[data-state="copied"] .button-icon--check {
  display: block;
}

.ghost-button:hover,
.icon-button:hover,
.header-icon-button:hover,
.ghost-button:focus-visible,
.icon-button:focus-visible,
.header-icon-button:focus-visible {
  background: var(--surface-hover);
  outline: 0;
}

.preview-stage {
  position: relative;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#sneakerCanvas {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  cursor: zoom-in;
}

#sneakerCanvas:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
}

.preview-zoom-hint {
  position: absolute;
  right: var(--preview-action-right, 12px);
  bottom: var(--preview-action-bottom, 12px);
  z-index: 2;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  padding: 8px 13px;
  color: var(--foreground);
  font-size: 12px;
  font-weight: 620;
  letter-spacing: 0;
  line-height: 1;
  box-shadow: none;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  cursor: zoom-in;
  transition: opacity 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.preview-zoom-hint svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.preview-stage:hover .preview-zoom-hint,
.preview-stage:focus-within .preview-zoom-hint {
  border-color: rgba(17, 17, 17, 0.2);
  background: #ffffff;
}

.preview-stage[data-loading="true"] .preview-zoom-hint {
  opacity: 0;
  pointer-events: none;
}

.preview-stage[data-loading="true"] #sneakerCanvas {
  opacity: 0.2;
}

.preview-loading {
  position: absolute;
  inset: auto auto 6px 6px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.94);
  padding: 9px 12px;
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
}

.preview-loading[hidden] {
  display: none;
}

.preview-loading[data-state="error"] {
  max-width: min(430px, calc(100% - 12px));
  color: #8c3d3d;
  line-height: 1.45;
}

.preview-loading[data-state="error"] .spinner {
  display: none;
}

.spinner {
  width: 15px;
  height: 15px;
  border: 2px solid var(--muted-soft);
  border-top-color: var(--primary);
  border-radius: 999px;
  animation: spin 820ms linear infinite;
}

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

.preview-hint {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  text-align: center;
}

.preview-footer {
  display: grid;
  gap: 7px;
}

.configuration-summary {
  margin: 0;
  color: var(--foreground);
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
}

.part-tabs {
  display: none;
}

/* ---------- customizer (right, scrolls) ---------- */
.customizer-pane {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border);
  background: var(--card);
}

.pane-head {
  flex: 0 0 auto;
  padding: 26px 26px 16px;
}

.pane-head h2 {
  font-size: 24px;
  letter-spacing: 0.01em;
}

.pane-sub {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.parts-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 22px 10px;
}

.parts-list[data-more="true"] {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
}

.part-card {
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  overflow: hidden;
  scroll-margin-top: 8px;
  transition: border-color 140ms ease, background-color 140ms ease;
}

.part-card[data-active="true"] {
  border-color: rgba(17, 17, 17, 0.32);
  box-shadow: none;
}

.part-card__head {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 13px 15px;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.part-card__name {
  font-size: 15px;
  font-weight: 620;
  white-space: nowrap;
}

.part-card__current {
  min-width: 0;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 560;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.part-card[data-open="true"] .part-card__current {
  color: var(--primary);
}

.part-card__chevron {
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  transition: transform 160ms ease;
}

.part-card[data-open="true"] .part-card__chevron {
  transform: rotate(180deg);
}

.part-card__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 2px 15px 16px;
}

.part-card[data-open="false"] .part-card__body {
  display: none;
}

.q-group[data-disabled="true"] {
  display: none;
}

.q-label {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 620;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.material-advisory {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-left: 2px solid var(--primary);
  background: var(--surface);
  color: var(--foreground);
  font-size: 12px;
  line-height: 1.65;
}

.material-advisory[hidden] {
  display: none;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
  gap: 7px;
}

.choice-button,
.color-choice {
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--surface);
  color: var(--foreground);
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.choice-button {
  min-height: 40px;
  padding: 8px 13px;
  font-size: 12.5px;
}

.color-choice {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-height: 42px;
  padding: 7px 9px;
}

.color-choice[hidden],
.apply-all-button[hidden] {
  display: none;
}

.choice-button:hover,
.color-choice:hover,
.choice-button:focus-visible,
.color-choice:focus-visible {
  background: var(--surface-hover);
  outline: 0;
}

.choice-button[data-selected="true"] {
  border-color: transparent;
  box-shadow: none;
  background: var(--primary);
  color: var(--primary-foreground);
}

.color-choice[data-selected="true"] {
  border-color: transparent;
  background: var(--surface-selected);
  box-shadow: inset 0 0 0 1px var(--primary);
}

.swatch {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 999px;
  box-shadow: none;
}

.color-name {
  min-width: 0;
  font-size: 10.5px;
  font-weight: 650;
  line-height: 1.2;
  text-align: left;
}

.swatch-check {
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 110ms ease, transform 110ms ease;
}

.swatch[data-dark="false"] .swatch-check {
  color: #171717;
}

.color-choice[data-selected="true"] .swatch-check {
  opacity: 1;
  transform: scale(1);
}

/* grouped leather types */
.family-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.family-caret {
  color: var(--muted);
  font-size: 10px;
}

.family-chip[data-active="true"] {
  border-color: transparent;
  box-shadow: none;
  background: var(--primary);
  color: var(--primary-foreground);
}

.family-chip[data-active="true"] .family-caret {
  color: var(--primary-foreground);
}

.variant-row {
  margin-top: -1px;
  padding: 9px 0 2px 10px;
  border-left: 1px solid var(--border);
}

.variant-row[data-open="false"] {
  display: none;
}

.variant-chip {
  min-height: 34px;
  padding: 6px 11px;
  font-size: 12px;
}

.apply-all-button {
  align-self: center;
  justify-self: start;
  min-width: 68px;
  min-height: 44px;
  border: 1px solid #c9c0b4;
  border-radius: 999px;
  background: #eee8df;
  padding: 5px 13px;
  color: #51483f;
  font-size: 10px;
  font-weight: 760;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.apply-all-button:hover,
.apply-all-button:focus-visible {
  border-color: #8f8172;
  background: #ddd2c5;
  color: #2f2924;
  outline: 0;
}

/* ---------- checkout (sticky bottom) ---------- */
.checkout-bar {
  flex: 0 0 auto;
  padding: 14px 22px calc(14px + env(safe-area-inset-bottom, 0px));
  background: var(--card);
  border-top: 1px solid var(--border);
}

.preorder-guide-link {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -3px 0 12px;
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--foreground);
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
}

.preorder-guide-link:hover,
.preorder-guide-link:focus-visible {
  border-color: rgba(17, 17, 17, 0.35);
  background: var(--surface);
  outline: 0;
}

.size-row {
  margin-bottom: 12px;
}

.size-row__label {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.size-row__label em {
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(140, 61, 61, 0.1);
  color: var(--destructive, #8c3d3d);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  vertical-align: 1px;
}

.size-display-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.size-display-row__label {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
}

.size-systems {
  min-width: 0;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.size-systems::-webkit-scrollbar {
  display: none;
}

.size-system-button {
  flex: 0 0 auto;
  min-height: 44px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: #ffffff;
  padding: 3px 9px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.size-system-button:hover,
.size-system-button:focus-visible {
  border-color: rgba(17, 17, 17, 0.35);
  color: var(--foreground);
  outline: 0;
}

.size-system-button[data-selected="true"] {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-foreground);
}

.size-options {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 6px;
}

.size-note {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 9.5px;
  line-height: 1.35;
}

.size-chip {
  min-height: 44px;
  padding: 0 2px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: var(--surface);
  color: var(--foreground);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.size-chip:hover,
.size-chip:focus-visible {
  background: var(--surface-hover);
  outline: 0;
}

.size-chip[data-selected="true"] {
  border-color: transparent;
  box-shadow: none;
  background: var(--primary);
  color: var(--primary-foreground);
  font-weight: 650;
}

.checkout-bar__price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.price-output {
  color: var(--foreground);
  font-size: 19px;
  font-weight: 650;
}

.checkout-button {
  width: 100%;
  min-height: 56px;
  border: 0;
  border-radius: var(--radius);
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 15px;
  font-weight: 620;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: opacity 140ms ease;
}

.checkout-button:hover:not(:disabled) {
  opacity: 0.9;
}

.checkout-button:disabled {
  background: #d9d9d9;
  color: #ffffff;
  opacity: 1;
}

.cart-status {
  min-height: 16px;
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.cart-status[data-state="success"] {
  color: var(--primary);
}

.cart-status[data-state="error"] {
  color: #8c3d3d;
}

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .storefront-shell {
    height: auto;
    grid-template-columns: 1fr;
  }

  /* Compact preview pinned to the top so the design stays visible while the
     options scroll beneath it. Only ONE sticky element on mobile — the old
     layout also pinned the checkout bar, sandwiching the parts list to ~0px. */
  .preview-pane {
    position: sticky;
    top: 0;
    z-index: 3;
    height: auto;
    /* Preview height budget.
       Fixed pane chrome = 10 (padding-top) + 48 (.topbar min-height)
       + 8 + 8 (row gaps) + 61 (.part-tabs: 44px tab + 7 + 10 padding)
       + 1 (border-bottom) = 136px.
       The fluid branch reserves 160px of the viewport for the controls below.
       On very short landscape screens the 120px stage floor takes precedence,
       but still leaves at least 100px on the supported viewport matrix. Before
       this, landscape hit the old 280px floor and produced a
       416px pane inside a ~390px viewport, leaving nothing reachable.
       Budget therefore = 100svh - 160 - 136 = 100svh - 296px.
       Tall portrait is unchanged: at 390x844 the 52svh term still wins
       (439px, exactly as approved). First line is the pre-svh fallback. */
    grid-template-rows: auto max(120px, min(52vh, 100vh - 296px, 480px)) auto;
    grid-template-rows: auto max(120px, min(52svh, 100svh - 296px, 480px)) auto;
    gap: 8px;
    padding: 10px 12px 0;
    border-bottom: 1px solid var(--border);
  }

  .topbar {
    align-items: center;
  }

  .preview-zoom-hint {
    min-height: 44px;
    padding: 8px 12px;
    font-size: 11px;
  }

  .preview-footer {
    display: none;
  }

  .part-tabs {
    display: flex;
    gap: 6px;
    margin: 0 -12px;
    padding: 7px 12px 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .part-tabs::-webkit-scrollbar,
  .chip-row::-webkit-scrollbar {
    display: none;
  }

  .part-tab {
    flex: 0 0 auto;
    min-width: 52px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--foreground);
    font-size: 12px;
    font-weight: 620;
    white-space: nowrap;
    scroll-snap-align: center;
  }

  .part-tab[data-active="true"] {
    border-color: transparent;
    background: var(--primary);
    color: var(--primary-foreground);
  }

  .part-tab__swatch {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    border: 1px solid rgba(0, 0, 0, 0.16);
    border-radius: 999px;
    box-shadow: none;
  }

  .customizer-pane {
    min-width: 0;
    height: auto;
    overflow: visible;
    border-left: 0;
  }

  .pane-head {
    display: none;
  }

  .parts-list {
    min-width: 0;
    width: 100%;
    overflow-y: visible;
    gap: 0;
    padding: 12px 16px 20px;
  }

  .part-card {
    min-width: 0;
    width: 100%;
    display: none;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }

  .part-card[data-active="true"] {
    display: block;
    border: 0;
    box-shadow: none;
  }

  .part-card__head {
    display: none;
  }

  .part-card__body {
    min-width: 0;
    gap: 18px;
    padding: 4px 0 8px;
  }

  .chip-row {
    max-width: 100%;
    flex-wrap: nowrap;
    padding: 3px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .choice-button {
    flex: 0 0 auto;
    min-height: 44px;
  }

  .variant-row {
    padding-left: 10px;
  }

  .color-grid {
    min-width: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  .color-choice {
    min-width: 0;
    min-height: 66px;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 6px 3px;
  }

  .swatch {
    width: 27px;
    height: 27px;
  }

  .color-name {
    width: 100%;
    font-size: 9px;
    line-height: 1.15;
    text-align: center;
    overflow-wrap: anywhere;
  }

  .apply-all-button {
    min-width: 58px;
    min-height: 44px;
    padding-inline: 10px;
  }

  /* The order section flows at the end of the page (no second sticky bar). */
  .checkout-bar {
    position: static;
  }

  .preview-hint {
    display: none;
  }

  .configuration-summary {
    display: none;
  }
}


/* ---------- accessibility ---------- */
/* Visible keyboard focus (overrides the mouse-only outline:0 rules above). */
button:focus-visible,
.choice-button:focus-visible,
.color-choice:focus-visible,
.size-chip:focus-visible,
.part-card__head:focus-visible,
.ghost-button:focus-visible,
.icon-button:focus-visible,
.header-icon-button:focus-visible,
.store-link:focus-visible,
.brand-link:focus-visible,
.checkout-button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* colour tuning tool (?tune only) */
.tuner {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 50;
  width: 280px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: rgba(20, 20, 20, 0.92);
  color: #f5f5f5;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  font-size: 13px;
  backdrop-filter: blur(6px);
}

.tuner__title {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: baseline;
  font-weight: 600;
}

.tuner__title [data-target] {
  font-weight: 400;
  font-size: 11px;
  color: #b5b5b5;
}

.tuner__field {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tuner__field input[type='range'] {
  flex: 1;
}

.tuner__field input[type='color'] {
  width: 42px;
  height: 26px;
  padding: 0;
  border: 1px solid #555;
  border-radius: 6px;
  background: none;
}

.tuner__field b {
  min-width: 34px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.tuner__row {
  display: flex;
  gap: 8px;
}

.tuner__row button {
  flex: 1;
  padding: 8px;
  border: 1px solid #555;
  border-radius: 8px;
  background: #2c2c2c;
  color: #f5f5f5;
  font-size: 12px;
  cursor: pointer;
}

.tuner__out {
  width: 100%;
  height: 120px;
  padding: 8px;
  border: 1px solid #555;
  border-radius: 8px;
  background: #111;
  color: #d4d4d4;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
}

.tuner__hint {
  margin: 0;
  font-size: 11px;
  color: #999;
}

.tuner[data-empty='true'] .tuner__field,
.tuner[data-empty='true'] .tuner__row {
  opacity: 0.4;
  pointer-events: none;
}

/* order review modal (ephemeral confirm step, not a persisted cart) */
body.modal-open {
  overflow: hidden;
}

.preview-modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: start center;
  width: 100%;
  height: 100dvh;
  padding:
    max(64px, calc(env(safe-area-inset-top) + 52px))
    max(12px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left));
  background: #080808;
  overflow: auto;
  overscroll-behavior: contain;
  cursor: zoom-out;
}

.preview-modal[hidden] {
  display: none;
}

.preview-modal__image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: none;
  margin: 0 auto;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  cursor: default;
}

.preview-modal__close {
  position: fixed;
  z-index: 1;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.54);
  color: #fff;
  font-size: 30px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
}

.preview-modal__close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.review-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  /* `inset: 0` resolves against the large viewport on iOS, so a vh-sized panel
     centred here can sit under the browser toolbar / home indicator. Match the
     preview modal: dynamic viewport height plus safe-area padding. */
  height: 100dvh;
  padding:
    max(20px, env(safe-area-inset-top))
    max(20px, env(safe-area-inset-right))
    max(20px, env(safe-area-inset-bottom))
    max(20px, env(safe-area-inset-left));
}

.review-modal[hidden] {
  display: none;
}

.review-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.5);
}

.review-modal__panel {
  position: relative;
  width: min(560px, 100%);
  /* Bound by the padded (safe-area aware) grid area rather than 90vh, so the
     purchase / return actions stay reachable inside the visible viewport. */
  max-height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  background: var(--card);
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3);
}

.review-modal__title {
  font-size: 18px;
  font-weight: 600;
}

.review-modal__body {
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: 18px;
  align-items: start;
}

.review-modal__image {
  width: 100%;
  aspect-ratio: 1200 / 857;
  object-fit: contain;
  border-radius: 12px;
  background: var(--stage);
  border: 1px solid var(--border);
}

.review-spec {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.review-spec__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}

.review-spec__row dt {
  color: var(--muted);
}

.review-spec__row dd {
  margin: 0;
  text-align: right;
  font-weight: 500;
}

.review-modal__price {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.review-modal__price strong {
  font-size: 20px;
  font-weight: 600;
}

.review-modal__note {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.review-modal__note.is-error {
  color: #b3261e;
}

.review-modal__actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.review-modal__actions .checkout-button {
  min-height: 50px;
}

.review-back-button {
  align-self: center;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.review-back-button:hover {
  color: var(--foreground);
}

@media (max-width: 560px) {
  .review-modal__body {
    grid-template-columns: 1fr;
  }

  .review-modal__image {
    max-width: 220px;
    margin: 0 auto;
  }

}

/* ---------- operation guide ---------- */
html.guide-document,
body.guide-page {
  min-height: 100%;
  height: auto;
  overflow: auto;
}

.guide-page {
  background: var(--stage);
}

.guide-shell {
  width: min(820px, calc(100% - 32px));
  margin: 0 auto;
  padding: 40px 0 64px;
}

.guide-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.guide-header h1 {
  font-size: clamp(28px, 5vw, 42px);
}

.guide-intro {
  max-width: 560px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.guide-card {
  margin-top: 16px;
  padding: clamp(20px, 4vw, 32px);
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
}

.guide-card h2 {
  margin-bottom: 22px;
  font-size: 20px;
  font-weight: 600;
}

.guide-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: guide-step;
}

.guide-steps li {
  counter-increment: guide-step;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 3px 12px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
}

.guide-steps li:first-child {
  padding-top: 0;
  border-top: 0;
}

.guide-steps li::before {
  content: counter(guide-step);
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 13px;
  font-weight: 750;
}

.guide-steps strong {
  font-size: 15px;
}

.guide-steps span,
.guide-actions dd {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.guide-actions {
  margin: 0;
}

.guide-actions div {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
}

.guide-actions div:first-child {
  padding-top: 0;
  border-top: 0;
}

.guide-actions dt {
  font-size: 14px;
  font-weight: 700;
}

.guide-actions dd {
  margin: 0;
}

.guide-notices {
  display: grid;
}

.guide-notice {
  padding: 20px 0;
  border-top: 1px solid var(--border);
}

.guide-notice:first-child {
  padding-top: 0;
  border-top: 0;
}

.guide-notice:last-child {
  padding-bottom: 0;
}

.guide-notice h3 {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 650;
}

.guide-notice p,
.guide-notice li {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.75;
}

.guide-notice p {
  margin: 7px 0 0;
}

.guide-notice ul {
  margin: 12px 0 0;
  padding-left: 20px;
}

.guide-notice strong {
  color: var(--foreground);
  font-weight: 650;
}

.guide-notice a {
  color: var(--foreground);
  font-weight: 650;
  text-underline-offset: 3px;
}

@media (max-width: 560px) {
  .guide-shell {
    width: min(100% - 24px, 820px);
    padding: 22px 0 40px;
  }

  .guide-header {
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
  }

  .guide-header .ghost-button {
    align-self: flex-start;
    min-height: 44px;
    padding: 0 14px;
    font-size: 12px;
  }
}

/* admin tool extra sections */
.tuner__sec {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.tuner__sub {
  font-size: 11px;
  font-weight: 600;
  color: #b5b5b5;
}

.tuner__upload {
  flex: 1;
  padding: 8px;
  border: 1px solid #555;
  border-radius: 8px;
  background: #2c2c2c;
  color: #f5f5f5;
  font-size: 12px;
  text-align: center;
  cursor: pointer;
}