/* AZRION BRAND EC — storefront styles.
   Design master: the Muse artifact EC (theme.css). Monochrome, cool
   only: white / off-white, ink black, cool grays. No blue, no warm
   beige, no colorful blocks. The only color on the page is the
   products' own. Dark scheme mirrors in cool charcoal. */

:root {
  color-scheme: light;
  --bg: #f4f4f5;
  --surface: #ffffff;
  --surface-2: #e7e7ea;
  --text: #111113;
  --dim: #3f3f46;
  --faint: #68696f;
  --border: #c6c6cc;
  --border-soft: #dedee2;
  --ink: #111113;
  --on-accent: #ffffff;
  --accent: #111113;
  --danger: #b42318;
  --header-bg: #111113;
  --header-text: #f4f4f5;
  --header-dim: #b9babe;
  --header-faint: #8e8f96;
  --stage: #1a1a1c;
  --stage-2: #121214;
  --stage-line: rgb(235 235 240 / 0.14);
  --stage-text: #f4f4f5;
  --stage-dim: #a1a1aa;
  --radius: 14px;
  --font-display: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", "YuMincho", serif;
  --font-sans: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", system-ui, -apple-system, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #0e0e10;
    --surface: #17171a;
    --surface-2: #222226;
    --text: #f4f4f5;
    --dim: #cfd0d4;
    --faint: #a7a8ae;
    --border: #4a4a52;
    --border-soft: #2e2e34;
    --ink: #f4f4f5;
    --on-accent: #111113;
    --accent: #e8e8ea;
    --danger: #f08a7d;
    --header-bg: #0a0a0b;
    --header-text: #f4f4f5;
    --header-dim: #b9babe;
    --header-faint: #8e8f96;
    --stage: #131315;
    --stage-2: #0c0c0e;
    --stage-line: rgb(235 235 240 / 0.12);
    --stage-text: #f4f4f5;
    --stage-dim: #a1a1aa;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; overflow-anchor: none; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-anchor: none;
}
img { max-width: 100%; }
a { color: inherit; }
button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; padding: 0; }
input, select { font-family: inherit; }
.font-display { font-family: var(--font-display); }
.wrap { max-width: 1152px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
@media (min-width: 640px) { .wrap { padding-left: 32px; padding-right: 32px; } }
[hidden] { display: none !important; }

/* ---------- Motion system (from the master theme.css) ---------- */
@keyframes riseIn { from { opacity: 0.85; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes viewIn { from { opacity: 0.85; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0.85; } to { opacity: 1; } }
@keyframes panelIn { from { opacity: 0.85; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes welcomeLogoIn { from { opacity: 0.85; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } }
@keyframes logoWriteIn { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

.btn-primary { transition: opacity 0.25s ease, transform 0.25s ease; }
.btn-primary:hover { opacity: 0.88; }
.btn-primary:active { transform: scale(0.99); }
.tap-soft { transition: transform 0.2s ease, opacity 0.2s ease; }
.tap-soft:active { transform: scale(0.97); }

@media (prefers-reduced-motion: no-preference) {
  .header-logo-img { animation: logoWriteIn 1.25s cubic-bezier(0.65, 0, 0.35, 1) both; }
  .rise { animation: riseIn 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
  .view-enter { animation: viewIn 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
  .fade-enter { animation: fadeIn 0.5s ease both; }
  .panel-enter { animation: panelIn 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
  .welcome-overlay { animation: fadeIn 0.5s ease both; }
  .welcome-logo { animation: welcomeLogoIn 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
  .welcome-line { animation: riseIn 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
  .reveal.is-visible { animation: riseIn 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Header (black band, white script logo) ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--header-bg); color: var(--header-text);
  border-bottom: 1px solid rgb(0 0 0 / 0.6);
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.35);
}
.header-inner {
  max-width: 1152px; margin: 0 auto;
  display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between;
  gap: 8px; padding: 8px 16px;
}
@media (min-width: 640px) { .header-inner { padding-left: 32px; padding-right: 32px; } }
.brand { display: block; min-width: 0; flex-shrink: 1; text-align: left; white-space: nowrap; text-decoration: none; }
.header-logo-img { display: block; height: 20px; width: auto; max-width: 38vw; object-fit: contain; object-position: left center; }
@media (min-width: 640px) { .header-logo-img { height: 26px; max-width: 160px; } }
.header-nav { display: flex; flex-wrap: nowrap; align-items: center; gap: 2px; flex-shrink: 0; }
@media (min-width: 640px) { .header-nav { gap: 6px; } }
.hnav-btn {
  position: relative; display: flex; align-items: center; gap: 6px;
  padding: 8px 6px; color: var(--header-text); font-size: 12px; white-space: nowrap;
  text-decoration: none;
}
@media (min-width: 640px) { .hnav-btn { padding-left: 8px; padding-right: 8px; font-size: 13px; } }
.hnav-btn.dim { color: var(--header-dim); }
.hnav-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.hnav-btn .hnav-label { display: none; }
@media (min-width: 640px) { .hnav-btn .hnav-label { display: inline; } }
.hnav-btn.bag svg { width: 22px; height: 22px; }
.hnav-badge {
  position: absolute; top: 0; right: 0;
  display: flex; align-items: center; justify-content: center;
  height: 18px; min-width: 18px; padding: 0 4px;
  border-radius: 999px; background: var(--header-text); color: var(--header-bg);
  font-size: 10px; font-weight: 700;
}
.hnav-register {
  margin-left: 4px; border-radius: 999px; background: var(--header-text); color: var(--header-bg);
  padding: 8px 14px; font-size: 12px; font-weight: 600; white-space: nowrap; text-decoration: none;
}
@media (min-width: 640px) { .hnav-register { padding-left: 16px; padding-right: 16px; font-size: 13px; } }

/* ---------- Welcome overlay (full-screen film, tap to enter) ---------- */
.welcome-overlay {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #111113; color: #fff; padding: 0; overflow: hidden; cursor: pointer;
}
.welcome-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 24%; background: #111113; }
/* Both films autoplay muted on a loop — never show a play button. */
.welcome-video::-webkit-media-controls-start-playback-button,
.hero-media::-webkit-media-controls-start-playback-button,
.welcome-video::-webkit-media-controls-overlay-play-button,
.hero-media::-webkit-media-controls-overlay-play-button {
  display: none !important;
  -webkit-appearance: none;
  appearance: none;
}
/* Hide every native control surface too: iOS paints its start-playback
   glyph through the media-controls shadow DOM while a film has not
   started yet. */
.welcome-video::-webkit-media-controls,
.hero-media::-webkit-media-controls,
.welcome-video::-webkit-media-controls-enclosure,
.hero-media::-webkit-media-controls-enclosure,
.welcome-video::-webkit-media-controls-panel,
.hero-media::-webkit-media-controls-panel {
  display: none !important;
  -webkit-appearance: none;
  appearance: none;
}
/* Returning visitors skip the welcome film. The .is-welcomed class is
   set on <html> by an inline script in <head> before first paint, so a
   first visit never starts the overlay inside display:none — iOS
   refuses to autoplay media born in a display:none subtree and shows
   its native play glyph instead. */
html.is-welcomed .welcome-overlay { display: none; }
.welcome-shade {
  pointer-events: none; position: absolute; inset: 0;
  /* A uniform dark scrim under the gradient: the scene photos are
     bright (salon / cafe), and the centered logo text sits in the
     middle band where a bottom-only gradient leaves white on white.
     The scrim keeps the whole frame readable (owner feedback:
     "ウェルカムページが白すぎて見にくい"). */
  background:
    linear-gradient(to top, rgb(0 0 0 / 0.68), rgb(0 0 0 / 0.30) 46%, rgb(0 0 0 / 0.42)),
    linear-gradient(rgb(8 8 12 / 0.36), rgb(8 8 12 / 0.36));
}
/* The welcome's photographs themselves sit a step darker, so the
   white wordmark keeps its contrast on every frame of the cycle. */
.welcome-slideshow img { filter: brightness(0.76) saturate(1.05); }
.welcome-logo { position: relative; width: min(84vw, 380px); }
.welcome-logo img { width: 100%; height: auto; display: block; }
@keyframes welcomePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.welcome-tap {
  position: absolute; left: 0; right: 0; bottom: max(52px, env(safe-area-inset-bottom));
  margin: 0; text-align: center; color: #fff;
  font-size: 14px; font-weight: 600; letter-spacing: 0.3em; text-indent: 0.3em;
  text-shadow: 0 1px 4px rgb(0 0 0 / 0.6), 0 2px 20px rgb(0 0 0 / 0.45);
  animation: welcomePulse 2.2s ease-in-out infinite;
}
.welcome-tap-sub {
  display: block; margin-top: 8px;
  font-size: 10px; font-weight: 500; letter-spacing: 0.42em; text-indent: 0.42em;
  color: rgb(255 255 255 / 0.85);
  text-shadow: 0 1px 4px rgb(0 0 0 / 0.6);
}

/* ---------- Hero film ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  height: 92svh; max-height: 920px; min-height: 540px;
  background: #111113; color: #f4f4f5;
}
.hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 24%; background: #111113; }
.hero-shade { pointer-events: none; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0) 45%, rgb(0 0 0 / 0.15)); }
.hero-bottom {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 0 20px 44px;
}
@media (min-width: 640px) { .hero-bottom { padding-bottom: 56px; } }
.hero-name { margin: 0; padding-left: 0.42em; font-size: 13px; font-weight: 600; letter-spacing: 0.42em; }
@media (min-width: 640px) { .hero-name { font-size: 14px; } }
.hero-cta {
  margin-top: 28px; display: inline-flex; align-items: center; gap: 10px;
  border-radius: 999px; background: #fff; color: #111113;
  padding: 14px 36px; font-size: 13px; font-weight: 600; letter-spacing: 0.18em; text-decoration: none;
}
.hero-cta svg { width: 16px; height: 16px; }
.hero-note { position: absolute; bottom: 12px; left: 20px; margin: 0; font-size: 11px; font-weight: 300; letter-spacing: 0.04em; color: rgb(255 255 255 / 0.55); }

/* ---------- Welcome strip ---------- */
.welcome-strip { border-bottom: 1px solid var(--border-soft); }
.welcome-strip .wrap { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 32px; row-gap: 8px; padding-top: 24px; padding-bottom: 24px; }
.strip-eyebrow { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.28em; color: var(--dim); }
.strip-main { margin: 0; font-size: 16px; font-weight: 500; }
.strip-sub { margin: 0; font-size: 13px; line-height: 1.7; color: var(--dim); }

/* ---------- Section heads ---------- */
.sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.sec-title { margin: 0; font-family: var(--font-display); font-size: 30px; font-weight: 500; line-height: 1.2; }
@media (min-width: 640px) { .sec-title { font-size: 36px; } }
.sec-sub { margin: 0; font-size: 13px; font-weight: 300; color: var(--dim); }
.sec-note { margin: 12px 0 0; max-width: 36em; font-size: 12px; line-height: 1.7; font-weight: 300; color: var(--faint); }

/* ---------- Shop toolbar + grid ---------- */
.shop-section { padding-top: 64px; padding-bottom: 24px; scroll-margin-top: 80px; }
@media (min-width: 640px) { .shop-section { padding-top: 80px; } }
.shop-toolbar { margin-top: 32px; }
.shop-search-wrap { position: relative; }
.shop-search-wrap > svg { position: absolute; top: 50%; left: 16px; transform: translateY(-50%); width: 20px; height: 20px; color: var(--faint); pointer-events: none; }
.shop-search {
  width: 100%; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text);
  padding: 14px 16px 14px 48px; font-size: 15px;
}
.shop-search::placeholder { color: var(--faint); }
.shop-chips { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px; border: 1px solid var(--border); color: var(--dim);
  padding: 8px 16px; font-size: 13px; text-decoration: none; background: transparent;
}
.chip svg { width: 16px; height: 16px; }
.chip.is-on { border-color: var(--ink); background: var(--ink); color: var(--bg); font-weight: 600; }
.sort-label { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--dim); }
.sort-select { border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); padding: 8px 14px; font-size: 13px; }
.shop-count { margin: 12px 0 0; font-size: 12px; color: var(--faint); }
.shop-count button { text-decoration: underline; text-underline-offset: 4px; margin-left: 12px; font-size: 12px; color: var(--faint); }
.shop-grid { margin-top: 32px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; row-gap: 40px; }
@media (min-width: 640px) { .shop-grid { column-gap: 24px; row-gap: 48px; } }
@media (min-width: 1024px) {
  .shop-grid { grid-template-columns: repeat(3, 1fr); }
  .shop-grid > *:nth-child(3n + 2) { margin-top: 40px; }
}
.shop-empty { padding: 56px 0; text-align: center; color: var(--dim); }
.shop-empty .btn-ghost { margin-top: 20px; }

/* ---------- Product card (ShopCard) ---------- */
.look-card { transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1); }
.look-card:hover { transform: translateY(-4px); }
.look-card:active { transform: scale(0.99); }
.collection-card { transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1); }
.collection-card:hover { transform: translateY(-4px); }
.card-media { position: relative; }
.card-img-link { display: block; width: 100%; text-align: left; text-decoration: none; }
.card-img-wrap { position: relative; display: block; overflow: hidden; border-radius: var(--radius); background: var(--surface-2); }
.card-img-wrap img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 20%; }
.badge-worn {
  position: absolute; top: 10px; left: 10px;
  border-radius: 999px; background: rgb(0 0 0 / 0.55); color: #fff;
  padding: 4px 10px; font-size: 10px; font-weight: 500; letter-spacing: 0.14em;
  backdrop-filter: blur(4px);
}
.fav-btn {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 999px;
  background: rgb(255 255 255 / 0.75); color: #111113; backdrop-filter: blur(4px);
}
.fav-btn.is-fav { background: var(--ink); color: var(--bg); }
.fav-btn svg { width: 20px; height: 20px; }
.card-body-link { display: block; margin-top: 14px; width: 100%; text-align: left; text-decoration: none; }
.card-cat { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; color: var(--dim); }
.card-name { display: block; margin-top: 4px; font-size: 17px; line-height: 1.45; font-weight: 500; }
@media (min-width: 640px) { .card-name { font-size: 18px; } }
.card-price { display: block; margin-top: 4px; font-size: 18px; font-weight: 700; }
.card-price .tax { margin-left: 4px; font-size: 12px; font-weight: 400; color: var(--dim); }
.card-material { display: block; margin-top: 2px; font-size: 12px; font-weight: 300; color: var(--faint); }

/* ---------- Recently viewed ---------- */
.recent-section { padding-top: 40px; padding-bottom: 8px; }
.recent-rail { margin-top: 24px; display: flex; gap: 16px; overflow-x: auto; padding-bottom: 12px; -ms-overflow-style: none; scrollbar-width: none; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.recent-rail::-webkit-scrollbar { display: none; }
.recent-rail > * { scroll-snap-align: center; }
.recent-item { width: 168px; flex-shrink: 0; }
@media (min-width: 640px) { .recent-item { width: 200px; } }

/* ---------- Locker-room rack stage (from the master theme.css) ---------- */
.rack-stage {
  background:
    repeating-linear-gradient(to right, transparent 0, transparent calc(25% - 1px), var(--stage-line) calc(25% - 1px), var(--stage-line) 25%),
    repeating-linear-gradient(to bottom, transparent 0, transparent 3px, rgb(255 255 255 / 0.012) 3px, rgb(255 255 255 / 0.012) 4px),
    linear-gradient(to bottom, var(--stage) 0%, var(--stage-2) 100%);
  color: var(--stage-text);
  position: relative;
}
.rack-rod { height: 5px; border-radius: 999px; background: linear-gradient(to bottom, #d6d6da, #71717a 55%, #3f3f46); box-shadow: 0 2px 6px rgb(0 0 0 / 0.55); }
.rail-scroll { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.rail-scroll > * { scroll-snap-align: center; }
.rack-item { transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.4s ease; }
.rack-item[data-active="true"] { transform: translateY(-8px) scale(1.06); opacity: 1; }
.rack-item[data-active="false"] { transform: translateY(8px) scale(0.93); opacity: 0.55; }
.rack-item .rack-card { transition: box-shadow 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); box-shadow: 0 10px 24px -12px rgb(0 0 0 / 0.55); }
.rack-item[data-active="true"] .rack-card { box-shadow: 0 28px 44px -16px rgb(0 0 0 / 0.65); }
.rack-zoom-img { transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1); will-change: transform; }
.rack-hanger { display: block; width: 1px; height: 26px; margin: 0 auto; background: var(--stage-dim); opacity: 0.7; }
.rack-section-inner { padding-top: 48px; padding-bottom: 56px; }
.rack-title { margin: 0; font-family: var(--font-display); font-size: 26px; font-weight: 500; }
@media (min-width: 640px) { .rack-title { font-size: 30px; } }
.rack-head-sub { margin: 4px 0 0; font-size: 12px; font-weight: 300; color: var(--stage-dim); }
.rack-nav { display: flex; align-items: center; gap: 12px; }
.rack-nav-hint { font-size: 13px; font-weight: 300; color: var(--stage-dim); }
@media (max-width: 639px) { .rack-nav-hint { display: none; } }
.rack-arrow {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid var(--stage-line); color: var(--stage-text);
  transition: opacity 0.3s ease;
}
.rack-arrow:disabled { opacity: 0.35; }
.rack-arrow svg { width: 20px; height: 20px; }
.rack-rail {
  display: flex; overflow-x: auto;
  padding: 4px calc(50% - 104px) 16px; -ms-overflow-style: none; scrollbar-width: none;
}
@media (min-width: 640px) { .rack-rail { padding-left: calc(50% - 124px); padding-right: calc(50% - 124px); } }
.rack-rail::-webkit-scrollbar { display: none; }
.rack-unit { margin: 0 10px; width: 188px; flex-shrink: 0; text-align: left; display: block; }
@media (min-width: 640px) { .rack-unit { margin: 0 12px; width: 224px; } }
.rack-card { display: block; overflow: hidden; border-radius: var(--radius); background: var(--surface); padding: 6px; }
.rack-card img { display: block; width: 100%; aspect-ratio: 3 / 4; border-radius: calc(var(--radius) - 6px); background: #fff; object-fit: contain; }
.rack-unit-name { display: block; margin-top: 14px; padding: 0 2px; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--stage-text); }
.rack-unit-price { display: block; margin-top: 2px; padding: 0 2px; font-size: 13px; font-weight: 300; color: var(--stage-dim); }
.rack-unit[data-active="true"] .rack-unit-price { font-weight: 600; color: var(--stage-text); }
.rack-dots { margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.rack-dot { display: flex; align-items: center; height: 24px; padding: 0 2px; }
.rack-dot i { display: block; height: 8px; border-radius: 999px; transition: all 0.3s ease; width: 8px; background: var(--stage-line); }
.rack-dot.is-on i { width: 22px; background: var(--stage-text); }
.rack-panel {
  margin: 32px auto 0; max-width: 896px; overflow: hidden;
  border-radius: var(--radius); background: var(--surface); color: var(--text);
  box-shadow: 0 24px 48px -20px rgb(0 0 0 / 0.6);
}
.rack-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--border-soft); background: var(--surface-2);
  padding: 12px 24px; color: var(--dim);
}
@media (min-width: 640px) { .rack-panel-head { padding-left: 32px; padding-right: 32px; } }
.rack-panel-head span { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; }
.rack-panel-grid { display: grid; gap: 28px; padding: 24px; }
@media (min-width: 640px) { .rack-panel-grid { grid-template-columns: 1.02fr 1fr; gap: 36px; padding: 32px; } }
.rack-stage-box { position: relative; overflow: hidden; border-radius: calc(var(--radius) - 2px); background: var(--surface-2); }
.rack-stage-box img { display: block; width: 100%; aspect-ratio: 3 / 4; }
.rack-stage-box img.worn { object-fit: cover; }
.rack-stage-box img.flat { background: #fff; object-fit: contain; }
.rack-stage-zoom { position: absolute; inset: 0; width: 100%; height: 100%; }
.rack-stage-tag {
  pointer-events: none; position: absolute; top: 12px; left: 12px; z-index: 2;
  border-radius: 999px; background: rgb(0 0 0 / 0.55); color: #fff;
  padding: 4px 10px; font-size: 10px; font-weight: 500; letter-spacing: 0.14em; backdrop-filter: blur(4px);
}
.rack-stage-hint { top: auto; left: auto; bottom: 12px; right: 12px; }
.rack-cut-row { margin-top: 12px; display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.rack-cut {
  flex-shrink: 0; border-radius: 8px; border: 1px solid var(--border); padding: 4px; opacity: 0.7;
  transition: opacity 0.3s ease; background: transparent; color: var(--text);
}
.rack-cut.is-on { border-color: var(--accent); opacity: 1; }
.rack-cut img { display: block; width: 48px; height: 64px; border-radius: 6px; }
@media (min-width: 640px) { .rack-cut img { width: 54px; height: 72px; } }
.rack-cut img.worn { object-fit: cover; }
.rack-cut img.flat { background: #fff; object-fit: contain; }
.rack-cut span { display: block; margin-top: 4px; text-align: center; font-size: 10px; font-weight: 300; }
.rack-cut.is-on span { font-weight: 600; }
.rack-note { margin: 8px 0 0; font-size: 11px; font-weight: 300; color: var(--faint); }
.rack-panel-name { margin: 0; font-family: var(--font-display); font-size: 28px; font-weight: 500; line-height: 1.3; }
@media (min-width: 640px) { .rack-panel-name { font-size: 32px; } }
.rack-panel-desc { margin: 12px 0 0; font-size: 15px; line-height: 1.9; font-weight: 300; color: var(--dim); }
.rack-panel-price { margin: 20px 0 0; font-size: 23px; font-weight: 700; }
.rack-panel-price .tax { margin-left: 6px; font-size: 13px; font-weight: 300; color: var(--dim); }
.rack-detail-btn {
  margin-top: 24px; display: block; width: 100%; text-align: center;
  border-radius: 999px; background: var(--accent); color: var(--on-accent);
  padding: 16px; font-size: 15px; font-weight: 600; text-decoration: none;
  transition: opacity 0.3s ease;
}
.rack-detail-btn:hover { opacity: 0.9; }
.rack-ship-note { margin: 20px 0 0; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 300; color: var(--faint); }
.rack-ship-note svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ---------- Buttons ---------- */
.btn-ink {
  display: block; width: 100%; text-align: center;
  border-radius: 999px; background: var(--accent); color: var(--on-accent);
  padding: 16px; font-size: 15px; font-weight: 600; text-decoration: none; border: none;
}
.btn-ink.inline { display: inline-block; width: auto; padding-left: 32px; padding-right: 32px; }
.btn-ghost {
  display: inline-block; text-align: center;
  border-radius: 999px; border: 1px solid var(--border); color: var(--text);
  padding: 10px 24px; font-size: 13px; text-decoration: none; background: transparent;
}
.btn-ghost.block { display: block; width: 100%; padding-top: 14px; padding-bottom: 14px; font-size: 14px; }

/* ---------- Dress Up ---------- */
.dressup-section { border-bottom: 1px solid var(--border-soft); }
.dressup-inner { padding-top: 48px; padding-bottom: 48px; }
.dress-grid { margin-top: 32px; display: grid; gap: 32px; }
@media (min-width: 768px) { .dress-grid { grid-template-columns: 1fr 1fr; gap: 48px; } }
.dress-stage {
  position: relative; margin: 0 auto; max-width: 420px; overflow: hidden;
  border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface-2);
}
.dress-stage img { display: block; width: 100%; height: auto; }
.dress-stage .badge-worn { top: 12px; left: 12px; }
.dress-stage .badge-model { left: auto; right: 12px; }
.dress-group-label { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.2em; color: var(--dim); }
.dress-group-label.spaced { margin-top: 24px; }
.dress-chips { margin-top: 10px; display: grid; gap: 8px; }
.dress-chip {
  display: flex; align-items: center; gap: 12px; text-align: left;
  border-radius: 12px; border: 1px solid var(--border); background: var(--surface);
  padding: 10px 12px; opacity: 0.7; width: 100%;
}
.dress-chip.is-on { border-color: var(--ink); opacity: 1; }
.dress-chip img { width: 44px; height: 44px; flex-shrink: 0; border-radius: 8px; background: #fff; object-fit: contain; }
.dress-chip .dc-main { min-width: 0; flex: 1; }
.dress-chip .dc-name { display: block; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dress-chip .dc-price { display: block; font-size: 12px; color: var(--dim); }
.dress-chip svg { width: 16px; height: 16px; flex-shrink: 0; }
.dress-size-row { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dress-size-row .ds-label { width: 80px; flex-shrink: 0; font-size: 12px; color: var(--dim); }
.size-pill {
  min-width: 40px; border-radius: 999px; border: 1px solid var(--border); color: var(--dim);
  padding: 6px 12px; font-size: 13px; background: transparent;
}
.size-pill.is-on { border-color: var(--ink); background: var(--ink); color: var(--bg); font-weight: 700; }
.dress-summary {
  margin-top: 24px; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--surface); padding: 20px; font-size: 14px;
}
.dress-summary .ds-title { margin: 0; font-weight: 500; }
.dress-summary ul { margin: 8px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--dim); }
.dress-summary li { display: flex; justify-content: space-between; gap: 12px; margin-top: 4px; }
.dress-total { margin-top: 12px; display: flex; justify-content: space-between; border-top: 1px solid var(--border); padding-top: 12px; font-size: 18px; font-weight: 700; color: var(--text); }
.dress-note { margin: 6px 0 0; font-size: 12px; color: var(--dim); line-height: 1.7; }
.dress-add { margin-top: 16px; }
.dress-add:disabled { opacity: 0.4; }
.dress-added { margin-top: 12px; text-align: center; font-size: 13px; }
.dress-added a { display: inline-block; margin-top: 6px; font-size: 13px; color: var(--dim); text-decoration: underline; text-underline-offset: 4px; }
.dress-fixed { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 12px; font-size: 12px; line-height: 1.7; color: var(--dim); }
.dress-fixed a { text-decoration: underline; text-underline-offset: 4px; color: inherit; }

/* ---------- Scenes ---------- */
.scenes { background: var(--surface-2); }
.scenes-inner { padding-top: 64px; padding-bottom: 80px; }
@media (min-width: 640px) { .scenes-inner { padding-top: 80px; } }
.scene-count { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.22em; }
.scene-row {
  display: grid; align-items: center; gap: 28px;
  border-bottom: 1px solid var(--border); padding: 56px 0;
}
.scene-row:last-child { border-bottom: none; }
@media (min-width: 640px) { .scene-row { padding: 64px 0; } }
@media (min-width: 768px) { .scene-row { grid-template-columns: 1fr 1fr; gap: 48px; } }
.scene-visual {
  overflow: hidden; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--surface); padding: 6px;
  box-shadow: 0 20px 40px -24px rgb(0 0 0 / 0.35);
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.scene-visual img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; border-radius: calc(var(--radius) - 6px); }
@media (min-width: 640px) { .scene-visual img { aspect-ratio: 3 / 4; } }
.scene-visual img.flat { background: #fff; object-fit: contain; }
.scene-body { transition: transform 0.5s ease-out; }
.scene-cat { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: 0.22em; color: var(--dim); }
.scene-name { margin: 12px 0 0; font-family: var(--font-display); font-size: 34px; line-height: 1.25; font-weight: 500; }
@media (min-width: 640px) { .scene-name { font-size: 44px; } }
.scene-desc { margin: 16px 0 0; max-width: 28em; font-size: 15px; line-height: 1.9; color: var(--dim); }
.scene-price { margin: 20px 0 0; font-size: 24px; font-weight: 700; }
.scene-price .tax { margin-left: 6px; font-size: 13px; font-weight: 400; color: var(--dim); }
.scene-btn { margin-top: 24px; }
@media (min-width: 640px) { .scene-btn { display: inline-block; width: auto; padding-left: 48px; padding-right: 48px; } }
.scene-note { margin: 16px 0 0; font-size: 12px; color: var(--dim); }

/* ---------- Product detail ---------- */
.pd { padding-top: 32px; padding-bottom: 48px; }
@media (min-width: 640px) { .pd { padding-top: 48px; } }
.back-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 300; letter-spacing: 0.04em; color: var(--dim); text-decoration: none; transition: color 0.3s ease; }
.back-link:hover { color: var(--text); }
.back-link svg { width: 16px; height: 16px; }
.pd-grid { margin-top: 24px; display: grid; gap: 32px; }
@media (min-width: 768px) { .pd-grid { grid-template-columns: 1fr 1fr; gap: 48px; } }
.pd-main {
  position: relative; overflow: hidden; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface); padding: 6px;
}
.pd-main img { display: block; width: 100%; aspect-ratio: 3 / 4; border-radius: calc(var(--radius) - 6px); }
.pd-main img.worn { object-fit: cover; object-position: center 20%; }
.pd-main img.flat { background: #fff; object-fit: contain; }
.pd-main .badge-worn { top: 16px; left: 16px; }
.pd-cut-label { margin: 12px 0 0; font-size: 12px; font-weight: 300; color: var(--dim); }
.pd-cut-label .pd-cut-count { margin-left: 8px; color: var(--faint); }
.pd-thumbs { margin-top: 12px; display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.pd-thumb {
  width: 68px; flex-shrink: 0; overflow: hidden; border-radius: 8px;
  border: 2px solid transparent; opacity: 0.55; padding: 0; transition: opacity 0.3s ease;
}
.pd-thumb:hover { opacity: 0.9; }
.pd-thumb.is-on { border-color: var(--ink); opacity: 1; }
.pd-thumb img { display: block; width: 100%; aspect-ratio: 3 / 4; }
.pd-thumb img.worn { object-fit: cover; object-position: center 20%; }
.pd-thumb img.flat { background: #fff; object-fit: contain; }
.pd-note { margin: 12px 0 0; font-size: 11px; line-height: 1.7; font-weight: 300; color: var(--faint); }
.pd-cat { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.2em; color: var(--dim); }
.pd-name { margin: 10px 0 0; font-family: var(--font-display); font-size: 38px; line-height: 1.3; font-weight: 500; }
.pd-price { margin: 14px 0 0; font-size: 28px; font-weight: 600; }
.pd-price .tax { margin-left: 6px; font-size: 13px; font-weight: 400; color: var(--dim); }
.pd-material { margin: 6px 0 0; font-size: 13px; font-weight: 300; color: var(--faint); }
.breakdown {
  margin-top: 20px; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--surface); padding: 16px; font-size: 14px;
}
.breakdown .bd-title { margin: 0; font-weight: 500; }
.breakdown ul { margin: 8px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--dim); }
.breakdown li { display: flex; justify-content: space-between; gap: 12px; margin-top: 4px; }
.breakdown .bd-total { margin-top: 10px; display: flex; justify-content: space-between; border-top: 1px solid var(--border); padding-top: 10px; font-weight: 600; }
.breakdown .bd-note { margin: 6px 0 0; font-size: 12px; color: var(--dim); }
.pd-desc { margin: 20px 0 0; font-size: 16px; line-height: 1.9; }
.pd-detail { margin: 12px 0 0; font-size: 14px; line-height: 1.9; color: var(--dim); }
.pd-fieldset { margin: 24px 0 0; border: none; padding: 0; }
.pd-fieldset legend { font-size: 13px; font-weight: 500; padding: 0; }
.size-row { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.size-btn {
  min-width: 48px; border-radius: 999px; border: 1px solid var(--border); color: var(--dim);
  padding: 10px 16px; font-size: 14px; background: transparent;
}
.size-btn.is-on { border-color: var(--ink); background: var(--ink); color: var(--bg); font-weight: 700; }
.fit-note { margin-top: 16px; border-radius: 12px; background: var(--surface-2); padding: 12px 16px; }
.fit-note summary { cursor: pointer; font-size: 13px; font-weight: 500; }
.fit-note p { margin: 8px 0 0; font-size: 13px; line-height: 1.7; color: var(--dim); }
.fit-note .fit-sub { font-size: 12px; color: var(--faint); }
.pd-buy-row { margin-top: 20px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pd-buy-row .qty-label { font-size: 13px; font-weight: 500; }
.qty-stepper { display: flex; align-items: center; border-radius: 999px; border: 1px solid var(--border); }
.qty-stepper button { padding: 8px 16px; font-size: 18px; line-height: 1; }
.qty-stepper .qty-val { width: 32px; text-align: center; font-size: 15px; background: transparent; border: none; color: var(--text); }
.pd-line-total { margin: 0 0 0 8px; font-size: 14px; }
.pd-line-total b { margin-left: 8px; font-weight: 600; }
.pd-ship-note { margin: 6px 0 0; font-size: 12px; color: var(--dim); }
.form-error { margin: 12px 0 0; font-size: 13px; color: var(--danger); }
.pd-actions { margin-top: 20px; display: flex; gap: 10px; }
.pd-add { flex: 1; border-radius: 999px; background: var(--accent); color: var(--on-accent); padding: 16px; font-size: 16px; font-weight: 600; }
.pd-fav {
  display: flex; align-items: center; justify-content: center; width: 52px; flex-shrink: 0;
  border-radius: 999px; border: 1px solid var(--border); color: var(--dim); background: transparent;
}
.pd-fav.is-fav { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.pd-fav svg { width: 20px; height: 20px; }
.pd-points { margin: 20px 0 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.8; color: var(--dim); }
.related { margin-top: 64px; border-top: 1px solid var(--border-soft); padding-top: 40px; }
.related-title { margin: 0; font-family: var(--font-display); font-size: 24px; font-weight: 500; }
@media (min-width: 640px) { .related-title { font-size: 28px; } }

/* ---------- Ship progress ---------- */
.ship-progress-text { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; }
.ship-progress-text svg { width: 16px; height: 16px; flex-shrink: 0; }
.ship-progress-text b { font-weight: 600; }
.ship-progress-text .sp-dim { color: var(--dim); }
.ship-progress-note { margin: 6px 0 0; font-size: 12px; line-height: 1.7; color: var(--dim); }
.ship-bar { margin-top: 8px; height: 6px; overflow: hidden; border-radius: 999px; background: var(--surface-2); }
.ship-progress-fill { height: 100%; border-radius: 999px; background: var(--ink); transition: width 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); }

/* ---------- Cart ---------- */
.cart-wrap { max-width: 768px; margin: 0 auto; padding: 32px 16px 48px; }
@media (min-width: 640px) { .cart-wrap { padding-left: 24px; padding-right: 24px; } }
.page-title { margin: 0; font-family: var(--font-display); font-size: 28px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.page-title svg { width: 24px; height: 24px; }
.page-sub { margin: 8px 0 0; font-size: 13px; font-weight: 300; color: var(--dim); }
.cart-empty-box { margin-top: 40px; text-align: center; color: var(--dim); }
.cart-empty-box .btn-ink { margin: 20px auto 0; width: auto; display: inline-block; padding-left: 32px; padding-right: 32px; font-size: 14px; }
.cart-lines { margin: 24px 0 0; padding: 0; list-style: none; }
.cart-line { display: flex; flex-wrap: wrap; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.cart-line:first-child { border-top: 1px solid var(--border); }
.cart-line-img { flex-shrink: 0; display: block; }
.cart-line-img img { width: 72px; height: 96px; border-radius: 8px; object-fit: cover; object-position: center 20%; display: block; }
.cart-line-main { min-width: 0; flex: 1; }
.cart-line-name { margin: 0; font-weight: 500; font-size: 15px; }
.set-chip {
  margin-left: 8px; border-radius: 999px; background: var(--surface-2);
  padding: 2px 8px; vertical-align: middle; font-size: 11px; font-weight: 500; color: var(--dim);
  white-space: nowrap;
}
.cart-line-meta { margin: 2px 0 0; font-size: 13px; color: var(--dim); }
.cart-line-controls { margin-top: 8px; display: flex; align-items: center; gap: 12px; }
.qty-stepper.sm button { padding: 6px 12px; font-size: 16px; }
.qty-stepper.sm .qty-val { width: 24px; font-size: 14px; }
.remove-btn { font-size: 13px; color: var(--dim); text-decoration: underline; text-underline-offset: 4px; }
.cart-line-total { font-weight: 700; white-space: nowrap; font-size: 16px; }

/* Design route inside a cart line （入稿 / お任せ + file intake).
   Metrics match the configurator's .sim-design-mode exactly, so the
   same choice looks the same on the product page and in the cart. */
/* The design block is a direct child of the (wrapping) cart line, so
   it spans the line's full width on its own row instead of being
   squeezed into the narrow main column next to the thumbnail. */
.cart-design { flex: 0 0 100%; min-width: 0; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.cart-design-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--dim); }
.cart-design-modes { margin-top: 8px; display: grid; gap: 8px; }
@media (min-width: 640px) { .cart-design-modes { grid-template-columns: 1fr 1fr; } }
.cart-design-mode {
  display: flex; gap: 8px; align-items: flex-start; cursor: pointer;
  padding: 12px 14px; min-height: 48px;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
@media (hover: hover) { .cart-design-mode:hover { border-color: var(--faint); } }
.cart-design-mode input { margin-top: 3px; flex: none; accent-color: var(--accent); }
.cart-design-mode:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: var(--surface-2); }
.cart-design-mode .cdm-body { flex: 1; min-width: 0; }
.cart-design-mode .cdm-title { display: block; font-size: 14px; font-weight: 700; line-height: 1.45; white-space: nowrap; }
.cart-design-mode .cdm-note { display: block; margin-top: 3px; font-size: 12px; line-height: 1.6; color: var(--dim); }
.cart-design-upload { margin-top: 12px; }
.cart-design-upload[hidden] { display: none; }
.cart-design-upload .sim-upload { max-width: 100%; }
.cart-design-note { margin: 10px 0 0; font-size: 12px; line-height: 1.7; color: var(--dim); }
.set-subtotal-row {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface-2); padding: 10px 16px; font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.set-subtotal-row b { font-weight: 600; }
.cart-summary-box {
  margin-top: 24px; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--surface); padding: 20px; font-size: 14px;
}
.cart-summary-box .sum-row { display: flex; justify-content: space-between; margin-top: 12px; }
.cart-summary-box .sum-row .k { color: var(--dim); }
.cart-summary-box .sum-row.total { border-top: 1px solid var(--border); padding-top: 12px; font-size: 19px; font-weight: 700; }
.checkout-box { margin-top: 20px; }
.checkout-box label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 8px; }
.checkout-box input:not([type="radio"]):not([type="checkbox"]) {
  width: 100%; border-radius: 12px; border: 1px solid var(--border);
  background: var(--bg); color: var(--text); padding: 14px 16px; font-size: 16px; margin-bottom: 12px;
}
.checkout-box .addr-grid input, .checkout-box .addr-grid select { margin-bottom: 0; }
.checkout-title { margin: 0 0 12px; font-family: var(--font-display); font-size: 20px; font-weight: 600; }
.co-member-note { margin: 0 0 12px; font-size: 13px; line-height: 1.7; color: var(--dim); }
.co-addr-list { display: grid; gap: 10px; margin-bottom: 14px; }
.co-addr-list .co-addr-card {
  display: flex; gap: 10px; align-items: flex-start; margin-bottom: 0;
  border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px;
  background: var(--surface); cursor: pointer; font-weight: 400;
}
.co-addr-card:has(input:checked) { border-color: var(--ink); }
.co-addr-card input[type="radio"] { width: 16px; height: 16px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--ink); }
.co-addr-main { display: block; min-width: 0; }
.co-addr-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 4px; }
.co-addr-body { display: block; font-size: 13px; line-height: 1.7; color: var(--dim); }
.checkout-box .co-save-row {
  display: flex; align-items: center; gap: 8px; margin: 4px 0 12px;
  font-size: 13px; font-weight: 400; cursor: pointer;
}
.co-save-row input[type="checkbox"] { width: 16px; height: 16px; margin: 0; flex-shrink: 0; accent-color: var(--ink); }
#checkout-btn { margin-top: 16px; }
.checkout-note { margin: 10px 0 0; font-size: 12px; line-height: 1.7; color: var(--dim); text-align: center; }
.checkout-error { margin: 10px 0 0; font-size: 13px; color: var(--danger); text-align: center; }
.continue-link { display: block; margin-top: 12px; width: 100%; padding: 8px; text-align: center; font-size: 13px; color: var(--dim); text-decoration: none; }
.more-section { margin-top: 48px; }
.more-title { margin: 0; font-family: var(--font-display); font-size: 22px; font-weight: 500; }

/* ---------- Favorites / simple pages ---------- */
.page-wrap { padding-top: 40px; padding-bottom: 48px; }

/* ---------- Auth / My page ---------- */
.auth-wrap { max-width: 448px; margin: 0 auto; padding: 40px 20px 56px; }
.auth-eyebrow { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.3em; color: var(--dim); }
.auth-title { margin: 10px 0 0; font-family: var(--font-display); font-size: 28px; font-weight: 600; }
.logo-on-dark {
  display: inline-flex; align-items: center; background: var(--header-bg);
  border-radius: 10px; padding: 8px 14px; margin-top: 20px;
}
.logo-on-dark img { height: 16px; width: auto; display: block; }
.auth-form { margin-top: 28px; display: grid; gap: 16px; }
.auth-field label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; }
.auth-input {
  width: 100%; border-radius: 12px; border: 1px solid var(--border);
  background: var(--bg); color: var(--text); padding: 14px 16px; font-size: 16px;
}
.auth-input::placeholder { color: var(--faint); }
.auth-alt { margin-top: 20px; text-align: center; font-size: 13px; color: var(--dim); line-height: 2; }
.auth-alt a, .auth-alt button { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }
.auth-forgot { margin: 16px 0 0; text-align: center; font-size: 13px; }
.auth-forgot a { color: var(--accent, #0071e3); text-decoration: none; }
.auth-forgot a:hover { text-decoration: underline; text-underline-offset: 4px; }
.auth-note { margin: 20px 0 0; font-size: 13px; line-height: 1.9; color: var(--dim); }
.auth-note a { color: var(--accent, #0071e3); }
.auth-done { margin: 0; font-size: 13px; line-height: 1.9; color: #14713c; background: rgba(20, 113, 60, .06); border: 1px solid rgba(20, 113, 60, .18); border-radius: 12px; padding: 12px 14px; }
.auth-done a { color: var(--accent, #0071e3); font-weight: 600; }
.reset-code-input { letter-spacing: .28em; font-variant-numeric: tabular-nums; }
.terms-agree { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.7; color: var(--dim); cursor: pointer; }
.terms-agree input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: #0071e3; cursor: pointer; }
.terms-agree a { color: var(--accent, #0071e3); text-decoration: underline; text-underline-offset: 3px; }
.auth-form .btn-blue:disabled, .auth-form .btn-primary:disabled { opacity: .45; cursor: not-allowed; }
.mypage-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.mypage-sec { margin-top: 40px; }
.mypage-sec-title { margin: 0; font-family: var(--font-display); font-size: 22px; font-weight: 500; }

/* ---------- Password field UI (strength meter + eye toggle) ---------- */
.pw-wrap { position: relative; }
.pw-wrap .auth-input { padding-right: 52px; }
.pw-eye {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 999px; color: var(--faint);
}
.pw-eye svg { width: 20px; height: 20px; }
.pw-meter { margin-top: 8px; }
.pw-meter-bar { height: 6px; overflow: hidden; border-radius: 999px; background: var(--surface-2); }
.pw-meter-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--border); transition: width 0.3s ease, background-color 0.3s ease; }
.pw-meter-fill.pw-weak { background: #d92d20; }
.pw-meter-fill.pw-mid { background: #e6a817; }
.pw-meter-fill.pw-strong { background: #1f9d55; }
.pw-meter-label { margin: 6px 0 0; font-size: 12px; font-weight: 600; }
.pw-meter-label.pw-weak { color: var(--danger); }
.pw-meter-label.pw-mid { color: #8a6108; }
.pw-meter-label.pw-strong { color: #14713c; }
.pw-guide { margin: 4px 0 0; font-size: 11px; line-height: 1.6; color: var(--faint); }

/* ---------- Address forms + address book ---------- */
.addr-grid { display: grid; gap: 12px; }
.addr-autofill-note { margin: -2px 0 0; font-size: 12px; line-height: 1.7; color: var(--faint); }
.addr-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
select.auth-input { appearance: auto; }
.addr-fieldset {
  margin: 0; padding: 16px; display: grid; gap: 12px;
  border: 1px solid var(--border); border-radius: var(--radius);
}
.addr-fieldset legend { padding: 0 6px; font-size: 13px; font-weight: 600; }
.addr-note { margin: 0; font-size: 12px; line-height: 1.7; color: var(--dim); }
.addr-label { font-size: 12px; font-weight: 600; color: var(--text); }
.addr-default-badge {
  border-radius: 999px; background: var(--ink); color: var(--bg);
  padding: 2px 8px; font-size: 10px; font-weight: 700; white-space: nowrap;
}
.addr-card {
  margin-top: 12px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); padding: 16px;
}
.addr-card-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.addr-card-body { margin: 8px 0 0; font-size: 14px; line-height: 1.8; color: var(--dim); }
.addr-card-actions { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.addr-edit-slot { display: grid; gap: 12px; }
.addr-edit-slot:not(:empty) { margin-top: 16px; border-top: 1px solid var(--border-soft); padding-top: 16px; }
.addr-edit-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.addr-add-box {
  margin-top: 20px; padding: 16px; display: grid; gap: 12px;
  border: 1px dashed var(--border); border-radius: var(--radius);
}
.addr-add-title { margin: 0; font-size: 14px; font-weight: 600; }

/* ---------- Legal ---------- */
.legal-wrap { max-width: 768px; margin: 0 auto; padding: 32px 16px 56px; }
@media (min-width: 640px) { .legal-wrap { padding-left: 24px; padding-right: 24px; } }
.legal-horse-box { margin-top: 24px; }
.legal-horse-clip { display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.legal-horse { width: 132px; margin-top: -26px; margin-bottom: -26px; display: block; }
@media (min-width: 640px) { .legal-horse { width: 152px; margin-top: -30px; margin-bottom: -30px; } }
.legal-hq { margin: 8px 0 0; font-size: 11px; font-weight: 500; letter-spacing: 0.22em; color: var(--dim); }
.legal-title { margin: 20px 0 0; font-family: var(--font-display); font-size: 28px; font-weight: 600; line-height: 1.4; }
.legal-intro { margin: 12px 0 0; font-size: 14px; line-height: 1.8; color: var(--dim); }
.legal-table { margin-top: 32px; }
.legal-table > div { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--border-soft); }
.legal-table > div:first-child { border-top: 1px solid var(--border-soft); }
@media (min-width: 640px) { .legal-table > div { grid-template-columns: 180px 1fr; gap: 16px; } }
.legal-table dt { font-size: 13px; font-weight: 500; color: var(--dim); margin: 0; }
.legal-table dd { font-size: 14px; margin: 0; line-height: 1.8; }

/* ---------- Result pages ---------- */
.result-wrap { max-width: 640px; margin: 0 auto; padding: 64px 20px 80px; text-align: center; }
.result-wrap h1 { font-family: var(--font-display); font-size: 28px; font-weight: 600; margin: 0; }
.result-wrap p { color: var(--dim); line-height: 1.9; font-size: 15px; }
.result-wrap .btn-ink { margin-top: 24px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--stage-2); color: var(--stage-text); }
.footer-inner { padding-top: 48px; padding-bottom: 48px; }
.footer-brand { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.18em; }
.footer-links { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--stage-dim); }
.footer-links a { color: inherit; text-decoration: none; }
.footer-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-note { margin: 24px 0 0; font-size: 13px; color: var(--stage-dim); }

/* ---------- Admin (kept compatible with the existing admin page) ---------- */
.admin-page { max-width: 1080px; margin: 0 auto; padding: 32px 20px 64px; font-family: var(--font-sans); }
.admin-page h1 { font-size: 24px; margin: 0 0 20px; }
.admin-page #admin-passcode {
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
  color: var(--text); padding: 10px 44px 10px 14px; font-size: 15px; width: 100%;
}
.admin-page .pw-wrap { max-width: 340px; margin-bottom: 8px; }
.admin-page .pw-meter { max-width: 340px; margin-bottom: 12px; }
.btn-secondary {
  border: 1px solid var(--border); border-radius: 999px; background: transparent;
  color: var(--text); padding: 10px 20px; font-size: 14px;
}
.btn-inline { display: inline-block; width: auto; padding: 10px 22px; font-size: 14px; }
.admin-page .btn-primary {
  border-radius: 999px; background: var(--accent); color: var(--on-accent);
  padding: 10px 22px; font-size: 14px; font-weight: 600; border: none;
}
.orders-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 16px; }
.orders-table th, .orders-table td { border-bottom: 1px solid var(--border-soft); padding: 8px; text-align: left; vertical-align: top; }
.orders-table select { border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); padding: 4px 8px; }
.admin-page .checkout-error { text-align: left; }
.admin-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 8px; font-size: 13px; }
.admin-toolbar input[type="date"] { border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); padding: 5px 8px; }
.orders-table tr.order-detail > td { background: #f5f5f7; padding: 12px; }
.detail-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.detail-table th { text-align: left; width: 130px; padding: 5px 8px; background: rgba(0, 0, 0, 0.03); border: 1px solid var(--border-soft); white-space: nowrap; vertical-align: top; }
.detail-table td { padding: 5px 8px; border: 1px solid var(--border-soft); word-break: break-all; }
.detail-table ul { margin: 0; padding-left: 18px; }
.detail-note-link { margin: 10px 0 2px; font-size: 13px; }

/* ================================================================
   NFC TAG JAPAN overrides — Apple-like light theme (the artifact
   EC's final look): white / #f5f5f7 base, ink text, ONE blue accent
   (#0071e3) for primary actions and links. Dark-scheme flipping is
   disabled: the shop stays light, as in the artifact EC.
   ================================================================ */
:root {
  --bg: #f5f5f7;
  --accent: #0071e3;
  --header-bg: #ffffff;
  --header-text: #111113;
  --header-dim: #55565c;
  --header-faint: #86868b;
  --font-display: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", system-ui, -apple-system, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: light;
    --bg: #f5f5f7;
    --surface: #ffffff;
    --surface-2: #e7e7ea;
    --text: #111113;
    --dim: #3f3f46;
    --faint: #68696f;
    --border: #c6c6cc;
    --border-soft: #dedee2;
    --ink: #111113;
    --on-accent: #ffffff;
    --accent: #0071e3;
    --header-bg: #ffffff;
    --header-text: #111113;
    --header-dim: #55565c;
    --header-faint: #86868b;
  }
}
.site-header {
  border-bottom: 1px solid #e8e8ec;
  box-shadow: none;
}
.brand { display: flex; flex-direction: column; line-height: 1.15; }
.header-logo-text { font-size: 17px; font-weight: 700; letter-spacing: 0.12em; color: var(--header-text); }
@media (min-width: 640px) { .header-logo-text { font-size: 19px; } }
.header-logo-sub { font-size: 9px; font-weight: 500; letter-spacing: 0.3em; color: var(--header-faint); }
.bag-wrap { position: relative; display: inline-flex; }
.hnav-badge { background: var(--accent); color: #fff; }
.hnav-register { background: var(--ink); color: #fff; }

/* Welcome / hero */
.welcome-logo-text {
  position: relative; margin: 0; color: #fff;
  font-size: clamp(26px, 7vw, 44px); font-weight: 700; letter-spacing: 0.14em;
  text-shadow: 0 2px 28px rgb(0 0 0 / 0.55), 0 1px 4px rgb(0 0 0 / 0.55);
  animation: welcomeLogoIn 0.8s ease both;
}
.welcome-by { position: relative; margin: 10px 0 0; color: rgb(255 255 255 / 0.92); font-size: 12px; font-weight: 500; letter-spacing: 0.34em; text-shadow: 0 1px 4px rgb(0 0 0 / 0.6), 0 2px 18px rgb(0 0 0 / 0.45); }
.hero-title { margin: 18px 0 0; font-size: clamp(34px, 6.4vw, 54px); line-height: 1.28; font-weight: 700; letter-spacing: 0.02em; }
.hero-sub { margin: 14px 0 0; font-size: 14px; line-height: 1.8; color: rgb(255 255 255 / 0.88); }

/* Product / scene imagery is landscape — cards keep the whole scene */
.card-img-wrap img { aspect-ratio: 4 / 3; object-position: center; }
.pd-main img { aspect-ratio: 4 / 3; }
.pd-main img.worn { object-position: center; }
.pd-thumb img { aspect-ratio: 4 / 3; }
.pd-thumb img.worn { object-position: center; }
.cart-line-img img { width: 84px; height: 72px; object-position: center; }

/* Scenes */
.scenes-section { padding-top: 40px; padding-bottom: 8px; }
.scene-grid { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (min-width: 768px) { .scene-grid { gap: 24px; } }
.scene-card { margin: 0; }
.scene-img-wrap { display: block; overflow: hidden; border-radius: var(--radius); background: var(--surface-2); }
.scene-img-wrap img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.scene-card figcaption { margin-top: 10px; }
.scene-card figcaption b { display: block; font-size: 16px; font-weight: 600; }
.scene-card figcaption span { display: block; margin-top: 2px; font-size: 12px; font-weight: 300; color: var(--faint); }

/* How / shipping */
.how-section { padding-top: 40px; padding-bottom: 56px; }
.chips-row { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.chip.static { cursor: default; }
.ship-band {
  margin-top: 28px; border-radius: var(--radius); background: var(--surface);
  border: 1px solid var(--border-soft); padding: 22px 24px;
}
.ship-band-main { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.7; }
.ship-band-main b { color: var(--accent); }
.ship-band-sub { margin: 6px 0 0; font-size: 13px; line-height: 1.8; color: var(--dim); }

/* Buttons / accents */
.btn-blue {
  display: block; width: 100%; text-align: center;
  border-radius: 999px; background: var(--accent); color: var(--on-accent);
  padding: 16px; font-size: 15px; font-weight: 600; text-decoration: none; border: none;
}
.btn-blue.inline { display: inline-block; width: auto; padding-left: 32px; padding-right: 32px; }
.ship-progress-fill { background: var(--accent); }
.cart-summary-box .sum-row.discount span:last-child { color: var(--accent); font-weight: 700; }
.co-addr-card input[type="radio"] { accent-color: var(--accent); }
.co-save-row input[type="checkbox"] { accent-color: var(--accent); }

/* Product page extras */
.size-btn small { display: block; margin-top: 2px; font-size: 11px; font-weight: 400; opacity: 0.75; }
.pd-variant-spec { margin: 10px 0 0; font-size: 13px; color: var(--dim); }
.link-select { width: 100%; margin-top: 4px; }
.link-url { width: 100%; margin-top: 10px; }
.pd-link-note { margin: 8px 0 0; font-size: 12px; line-height: 1.7; color: var(--faint); }
.pd-perk-note { margin: 8px 0 0; font-size: 12px; line-height: 1.7; color: var(--dim); }
.pd-added { margin: 12px 0 0; font-size: 14px; }
.pd-added a { color: var(--accent); font-weight: 600; }

/* Auth / legal brand text */
.auth-brand-text { margin: 18px 0 0; font-size: 20px; font-weight: 700; letter-spacing: 0.12em; }
.legal-brand-text { margin: 24px 0 0; font-size: 22px; font-weight: 700; letter-spacing: 0.1em; }
.legal-brand-text span { font-size: 12px; font-weight: 500; letter-spacing: 0.28em; color: var(--dim); }

/* Footer */
.site-footer .wrap { padding-top: 48px; padding-bottom: 48px; }
.footer-brand-text { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: 0.16em; }
.footer-by { margin: 4px 0 0; font-size: 10px; font-weight: 500; letter-spacing: 0.3em; color: var(--stage-dim); }
.footer-nav { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--stage-dim); }
.footer-nav a { color: inherit; text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ================================================================
   Owner feedback fixes (2026-10-27):
   1) Header rebuilt — logo (NFC mark + wordmark) on its own row
      with the icon shortcuts; text navigation on a second row.
      Nothing overlaps at any width.
   2) The AI tap film is gone: hero and welcome use a still-image
      slideshow (installed scenes) with a slow crossfade + zoom.
   3) One button system across the whole site.
   4) How-to moved to a banner popup (after the welcome) and a
      dedicated /how-to page linked from the navigation.
   ================================================================ */

/* ---------- 1) Header ---------- */
.header-inner {
  flex-direction: column; align-items: stretch; justify-content: flex-start;
  gap: 0; padding: 10px 16px 0;
}
@media (min-width: 640px) { .header-inner { padding-left: 32px; padding-right: 32px; } }
.header-main { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand {
  display: flex; flex-direction: row; align-items: center; gap: 9px;
  flex: none; min-width: 0;
}
.brand-mark {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none;
  border-radius: 10px; background: #111113; color: #fff;
}
@media (min-width: 640px) { .brand-mark { width: 38px; height: 38px; border-radius: 11px; } }
.brand-mark svg { width: 20px; height: 20px; }
@media (min-width: 640px) { .brand-mark svg { width: 22px; height: 22px; } }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.header-logo-text { font-size: 15.5px; letter-spacing: 0.1em; }
@media (min-width: 640px) { .header-logo-text { font-size: 19px; letter-spacing: 0.12em; } }
.header-icons { display: flex; align-items: center; gap: 2px; flex: none; }
/* Fixed menu (owner feedback round): no horizontal scrolling — the
   items are few enough to fit, and anything that cannot fit on a
   very narrow screen wraps onto a second line instead. */
.header-subnav {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
  margin-top: 8px; padding-top: 4px; padding-bottom: 10px;
  border-top: 1px solid #ececf0;
}
.subnav-link {
  display: inline-flex; align-items: center;
  padding: 8px 8px; border-radius: 999px;
  font-size: 13.5px; color: var(--dim); text-decoration: none; white-space: nowrap;
}
button.subnav-link { background: none; border: none; font-family: inherit; cursor: pointer; }
.subnav-member { margin-left: auto; display: flex; align-items: center; gap: 2px; padding-left: 10px; }
.subnav-member[hidden] { display: none !important; }

/* ---------- 2) Still-image slideshow (hero / welcome) ---------- */
.slideshow { position: absolute; inset: 0; overflow: hidden; background: #111113; }
.slideshow img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  opacity: 0; animation: ntjSlide 28s linear infinite;
}
.slideshow img:nth-child(2) { animation-delay: 7s; }
.slideshow img:nth-child(3) { animation-delay: 14s; }
.slideshow img:nth-child(4) { animation-delay: 21s; }
@keyframes ntjSlide {
  0% { opacity: 0; transform: scale(1.02); }
  3.5% { opacity: 1; }
  25% { opacity: 1; }
  28.5% { opacity: 0; transform: scale(1.09); }
  100% { opacity: 0; transform: scale(1.09); }
}
@media (prefers-reduced-motion: reduce) {
  .slideshow img { animation: none; transform: none; }
  .slideshow img:first-child { opacity: 1; }
}

/* ---------- 3) Unified button system ---------- */
/* Primary (filled): 52px tall, 15px semibold, pill. */
.btn-blue, .btn-ink, .rack-detail-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 8px 28px;
  font-size: 15px; font-weight: 600; line-height: 1.3; border-radius: 999px;
}
.btn-blue, .btn-ink { width: 100%; }
.btn-blue.inline, .btn-ink.inline { display: inline-flex; width: auto; }
.pd-add {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 8px 24px; font-size: 15px;
}
.hero-cta { min-height: 52px; padding: 8px 32px; font-size: 14px; }
/* Secondary (outline): 44px tall, 14px, pill. */
.btn-ghost, .btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 8px 22px;
  font-size: 14px; font-weight: 500; border-radius: 999px;
}
.btn-ghost.block { display: flex; width: 100%; }
.admin-page .btn-primary, .admin-page .btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 8px 22px; font-size: 14px; border-radius: 999px;
}
/* Chips and choice buttons. */
.chip { min-height: 40px; padding: 6px 16px; font-size: 13px; }
.size-btn { min-height: 48px; padding: 8px 18px; font-size: 14px; }
.size-pill { min-height: 36px; padding: 6px 14px; font-size: 13px; }
.sort-select { min-height: 40px; padding: 6px 14px; }
/* Header controls. */
.hnav-btn { height: 44px; padding: 0 10px; }
.hnav-register {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 38px; padding: 6px 18px; font-size: 13px;
}
/* Icon buttons. */
.fav-btn { width: 44px; height: 44px; }
.pd-fav { width: 52px; }
.pw-eye { width: 40px; height: 40px; }
/* Quantity steppers: 44px targets (36px for the small cart variant). */
.qty-stepper button {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 6px 10px;
}
.qty-stepper.sm button { min-width: 36px; min-height: 36px; }

/* ---------- 4) Guide popup + how-to page ---------- */
.guide-popup {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 16px;
}
.guide-popup[hidden] { display: none !important; }
@media (min-width: 640px) { .guide-popup { align-items: center; } }
.guide-popup-backdrop { position: absolute; inset: 0; background: rgb(17 17 19 / 0.48); }
.guide-card {
  position: relative; width: 100%; max-width: 400px;
  overflow: hidden; border-radius: 20px; background: var(--surface);
  box-shadow: 0 24px 64px rgb(0 0 0 / 0.35);
}
.guide-card-img { display: block; width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }
.guide-close {
  position: absolute; top: 10px; right: 10px;
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 999px;
  background: rgb(17 17 19 / 0.55); color: #fff; backdrop-filter: blur(4px);
}
.guide-close svg { width: 18px; height: 18px; }
.guide-card-body { padding: 20px 24px 24px; text-align: center; }
.guide-eyebrow { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.28em; color: var(--accent); }
.guide-title { margin: 8px 0 0; font-size: 24px; font-weight: 700; }
.guide-text { margin: 10px 0 0; font-size: 13.5px; line-height: 1.8; color: var(--dim); }
.guide-cta { margin-top: 18px; }
.guide-cta:disabled { opacity: 0.4; pointer-events: none; }
.guide-later {
  margin-top: 10px; padding: 8px 16px;
  font-size: 13px; color: var(--dim);
  text-decoration: underline; text-underline-offset: 4px;
}
@keyframes popupIn {
  from { opacity: 0; transform: translateY(26px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: no-preference) {
  .guide-popup-backdrop { animation: fadeIn 0.3s ease both; }
  .guide-card { animation: popupIn 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
}

/* ----- Final confirmation (cart → confirm → Stripe handoff) ------ */
/* The order-time usage modal is gone (owner's production-flow
   decision); in its place the cart's checkout shows ONE final
   confirmation listing variant / design / touch destination / shop
   name / quantity / total, gated by a checkbox. */
.guide-card--confirm { max-width: 480px; }
.guide-card--confirm .guide-close {
  background: rgb(17 17 19 / 0.08); color: var(--text);
  backdrop-filter: none;
}
.guide-card--confirm .guide-text { text-align: left; }
.confirm-popup .guide-card { max-height: 88dvh; overflow-y: auto; }
.confirm-summary { margin-top: 18px; text-align: left; }
.confirm-line { padding: 12px 0; border-top: 1px solid var(--border-soft); }
.confirm-line-head {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 14.5px; font-weight: 600;
}
.confirm-meta-row { display: flex; gap: 12px; margin-top: 6px; font-size: 13px; line-height: 1.7; }
.confirm-line .confirm-meta-row:first-of-type { margin-top: 10px; }
.confirm-meta-row .k { flex: 0 0 4.2em; color: var(--dim); }
.confirm-meta-row .v { min-width: 0; overflow-wrap: anywhere; }
.confirm-summary .sum-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 14px; }
.confirm-summary .sum-row .k { color: var(--dim); flex: none; }
.confirm-summary .sum-row.total { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 12px; font-weight: 700; font-size: 16px; }
.confirm-addr { text-align: right; overflow-wrap: anywhere; }
.confirm-check {
  margin-top: 18px; display: flex; gap: 10px; align-items: flex-start;
  font-size: 14px; font-weight: 600; line-height: 1.6; cursor: pointer;
  text-align: left;
}
.confirm-check input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--accent); }

.ship-section { padding-top: 32px; padding-bottom: 56px; }
.how-link { color: var(--accent); font-weight: 600; text-decoration: none; }

.how-steps { margin-top: 28px; display: grid; gap: 14px; }
@media (min-width: 768px) { .how-steps { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.how-step {
  border: 1px solid var(--border-soft); border-radius: var(--radius);
  background: var(--surface); padding: 24px;
}
.how-num { display: block; font-size: 46px; line-height: 1; font-weight: 700; }
.how-img {
  display: block; width: 100%; margin-top: 16px;
  border: 1px solid var(--border-soft); border-radius: 12px;
  background: #ffffff;
}
.how-step h2 { margin: 14px 0 0; font-size: 19px; font-weight: 700; }
.how-step p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.85; color: var(--dim); }
.how-customer { margin-top: 44px; }
.how-h2 { margin: 0; font-size: 24px; font-weight: 700; }
.how-lead { margin: 12px 0 0; max-width: 38em; font-size: 14.5px; line-height: 1.9; color: var(--dim); }
.how-label { margin: 22px 0 0; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; color: var(--dim); }
.howto .ship-band { margin-top: 36px; }
.how-cta { margin-top: 28px; max-width: 420px; }

/* ================================================================
   Plate simulator / configurator — embedded where the shopping
   happens: as the home page's primary flow and inside each product
   page (fixed to that product); /try keeps the same component for
   direct visits only. The preview is photo-first (owner feedback
   round): installed PHOTOS per variant/scene crossfade on the
   stage, and the shop name / destination ride in a caption strip
   under the photo instead of being pasted onto it. In own-photo
   mode the buyer compares their own shop photo instead, with the
   plate composited over it as a movable overlay.
   ================================================================ */

/* ---------- Home placement (under the product list) ---------- */
.sim-section { padding-top: 16px; padding-bottom: 8px; }

/* ---------- Simulator layout ---------- */
/* Flow placement (owner feedback round 2, 2026-10-27): the preview
   is never fixed. In the purchase flow it is met in the stream —
   steps → preview → summary — and rises in as it scrolls into view
   (the site's .reveal motion). On wide screens the same blocks take
   two columns (preview left, steps + summary right) as one static
   block. Only the order bar sticks. */
.sim { margin-top: 36px; }
.sim-grid { display: flex; flex-direction: column; gap: 22px; }
.sim-main { display: contents; }
.sim-controls { order: 1; }
.sim-preview-col { order: 2; }
.sim-summary { order: 3; }
@media (min-width: 1024px) {
  .sim-grid {
    display: grid; grid-template-columns: 1.05fr 1fr;
    gap: 44px; align-items: start;
  }
  .sim-preview-col { grid-column: 1; grid-row: 1 / span 2; }
  .sim-controls { grid-column: 2; grid-row: 1; }
  .sim-summary { grid-column: 2; grid-row: 2; }
}

/* Product page, phones: the preview joins the flow too — product
   intro, then the installed photo, then the steps, then the
   summary — instead of a detached media block above everything. */
@media (max-width: 767.98px) {
  .pd-grid { display: flex; flex-direction: column; }
  .pd-info { display: contents; }
  .pd-intro { order: 1; }
  .pd-media { order: 2; }
  .pd-info > fieldset { order: 3; }
  .pd-info > .sim-summary { order: 4; }
}

/* ---------- Preview stage ---------- */
.sim-stage {
  position: relative; overflow: hidden;
  border-radius: var(--radius); background: var(--surface-2);
  aspect-ratio: 16 / 10;
  box-shadow: 0 14px 34px rgb(17 17 19 / 0.16);
}
@media (min-width: 1024px) { .sim-stage { aspect-ratio: 4 / 3; } }

/* The installed photo itself fills the stage; variant / product /
   scene changes crossfade between photographs, so the plate always
   sits in the scene with its own perspective, light and shadow —
   nothing is pasted on. */
.sim-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transition: opacity 0.18s ease;
}

/* ---------- Own-photo mode (AR-style placement trial) ---------- */
/* The buyer's own shop photo fills the stage the same way; the
   selected plate rides over it as a draggable, pinch-scalable
   overlay whose look follows the plate type (flat / stand /
   acrylic) and whose starting size follows the real mm width.
   The photo itself never leaves the device (object URL only). */
.sim-user-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.sim-user-photo[hidden],
.sim-ar[hidden],
.sim-own[hidden],
.sim-zoom[hidden],
.sim-scenes[hidden],
.sim-own-empty[hidden],
.sim-face-wrap[hidden],
.sim-design-state[hidden],
.sim-ar-design[hidden] { display: none !important; }
.sim-own-empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; text-align: center;
  color: var(--dim); font-size: 14px; line-height: 1.9;
  background: var(--surface-2);
}
.sim-ar { position: absolute; inset: 0; overflow: hidden; }
.sim-ar-plate {
  position: absolute; left: 50%; top: 62%;
  transform: translate(-50%, -50%);
  container-type: inline-size;
  border-radius: 10px;
  color: #111113;
  touch-action: none;
  cursor: grab;
  user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.sim-ar-plate:active { cursor: grabbing; }
.sim-ar-plate:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sim-ar-inner {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  gap: 6cqw; padding: 5cqw 7cqw;
}
.sim-ar-mark { display: block; flex: none; line-height: 0; }
.sim-ar-mark svg { width: 13cqw; height: 13cqw; }
.sim-ar-texts {
  display: flex; flex-direction: column; gap: 1.5cqw;
  min-width: 0; text-align: left;
}
.sim-ar-name {
  font-size: 11.5cqw; font-weight: 700; line-height: 1.25;
  letter-spacing: 0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sim-ar-name.is-placeholder { color: #9a9aa1; font-weight: 500; }
.sim-ar-dest {
  font-size: 6.2cqw; font-weight: 500; letter-spacing: 0.1em;
  color: #55555c; white-space: nowrap;
}
/* Design image on the overlay's face: while one is set it takes
   over the face entirely, edge to edge like a real print (the
   name / destination texts hide); clearing it restores them. The
   design is validated against the variant's stated size before it
   is ever shown, so cover never has to rescue a wrong ratio. */
.sim-ar-design {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 9px;
  object-fit: cover;
}
.sim-ar-plate.has-design .sim-ar-inner { display: none; }
/* Plate-kind surfaces, shared by the own-photo overlay and the
   plate-face preview (below): flat / stand / acrylic. Only the
   overlay adds its placement transforms on top. */
/* Flat table plate: lying on the surface, slight perspective. */
.sim-ar--flat, .sim-face--flat {
  background: #ffffff;
  border: 1px solid #e2e2e6;
  box-shadow: 0 20px 22px -12px rgb(17 17 19 / 0.45);
}
.sim-ar--flat {
  transform: translate(-50%, -50%) perspective(760px) rotateX(15deg);
}
/* Stand plate: upright, with a foot. */
.sim-ar--stand, .sim-face--stand {
  background: #ffffff;
  border: 1px solid #e2e2e6;
  box-shadow: 0 24px 28px -14px rgb(17 17 19 / 0.5);
}
.sim-ar--stand::after, .sim-face--stand::after {
  content: ""; position: absolute; left: 50%; bottom: -6%;
  transform: translateX(-50%);
  width: 116%; height: 6.5%;
  background: linear-gradient(to bottom, #f4f4f6, #d8d8dd);
  border-radius: 3px;
  box-shadow: 0 8px 12px rgb(17 17 19 / 0.35);
}
/* Acrylic stand: translucent panel, print read through the gloss. */
.sim-ar--acrylic, .sim-face--acrylic {
  background: rgb(255 255 255 / 0.58);
  border: 1px solid rgb(255 255 255 / 0.85);
  box-shadow: inset 0 0 0 1px rgb(17 17 19 / 0.06), 0 24px 28px -14px rgb(17 17 19 / 0.45);
  backdrop-filter: blur(4px) saturate(1.15);
  -webkit-backdrop-filter: blur(4px) saturate(1.15);
}
.sim-ar--acrylic::after, .sim-face--acrylic::after {
  content: ""; position: absolute; left: 50%; bottom: -6%;
  transform: translateX(-50%);
  width: 116%; height: 6.5%;
  background: rgb(255 255 255 / 0.5);
  border: 1px solid rgb(255 255 255 / 0.6);
  border-radius: 3px;
  box-shadow: 0 8px 12px rgb(17 17 19 / 0.3);
}
.sim-ar--acrylic .sim-ar-inner {
  flex-direction: column; text-align: center; gap: 3.5cqw;
}
.sim-ar--acrylic .sim-ar-texts { text-align: center; align-items: center; }

/* ---------- Plate-face preview (design image) ---------- */
/* Shown only while a design image is set: the selected variant's
   face at its real aspect ratio, front-on like a print proof,
   carrying the plate kind's surface (white / foot / translucent).
   The template photographs themselves stay untouched — this face
   sits under the stage, and the design fills it edge to edge. */
.sim-face-wrap { margin-top: 14px; }
.sim-face-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; color: var(--faint);
}
.sim-face {
  position: relative; margin-top: 8px;
  width: min(100%, 440px);
  border-radius: 10px; color: #111113;
}
.sim-face-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 9px;
  object-fit: cover;
}
.sim-face-fit { margin: 8px 0 0; font-size: 12px; line-height: 1.7; color: var(--faint); }

/* Design route selector inside step 3 （入稿 / お任せ). */
/* Cards never go narrower than 260px: side by side where the column
   is wide enough, otherwise one full-width horizontal card per row —
   so the titles never wrap mid-phrase the way the cart cards did. */
.sim-design-modes { margin-top: 16px; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.sim-design-mode {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 12px 14px; min-height: 48px;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); color: var(--text);
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
@media (hover: hover) { .sim-design-mode:hover { border-color: var(--faint); } }
.sim-design-mode .dm-title { display: block; font-size: 14px; font-weight: 700; line-height: 1.45; white-space: nowrap; }
.sim-design-mode .dm-note { display: block; margin-top: 3px; font-size: 12px; line-height: 1.6; color: var(--dim); }
.sim-design-mode.is-on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: var(--surface-2); }

/* Design image field inside step 3. */
.sim-design {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--border-soft);
}
.sim-design-label {
  display: block; margin-bottom: 10px;
  font-size: 13px; font-weight: 600;
}
/* The stated design size for the selected variant, and the
   rejection message shown when an upload does not match it. */
.sim-design-spec {
  margin: 0 0 12px; font-size: 12.5px; line-height: 1.8; color: var(--dim);
}
.sim-design-spec b { color: var(--text); font-size: 13.5px; }
.sim-design-error { margin: 10px 0 0; }
.sim-design-error[hidden] { display: none; }
.sim-design-state {
  margin-top: 12px; display: flex; align-items: center; gap: 12px;
}
.sim-design-thumb {
  flex: none; width: 64px; height: 44px;
  object-fit: contain; background: #ffffff;
  border: 1px solid var(--border-soft); border-radius: 8px;
}
.sim-design-note { font-size: 13px; color: var(--dim); }
.sim-design-remove {
  margin-left: auto; flex: none;
  min-height: 40px; padding: 6px 18px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text);
  font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
}

/* Background switch + upload panel under the stage. */
.sim-mode { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.sim-own {
  margin-top: 12px;
  border: 1px solid var(--border-soft); border-radius: 12px;
  background: var(--surface); padding: 14px;
}
.sim-upload {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 8px 22px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text);
  font-size: 14px; font-weight: 500; cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.sim-upload > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sim-upload.is-picked { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.sim-zoom { margin-top: 12px; display: flex; align-items: center; gap: 10px; }
.sim-zoom-label { font-size: 12.5px; color: var(--dim); white-space: nowrap; }
.sim-zoom button {
  flex: none; width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 50%;
  background: var(--surface); color: var(--text);
  font-family: inherit; font-size: 18px; cursor: pointer;
}
.sim-zoom input[type="range"] { flex: 1; min-width: 0; accent-color: var(--accent); }
.sim-privacy { margin: 10px 0 0; font-size: 12px; line-height: 1.7; color: var(--faint); }
.sim-effect { margin: 14px 0 0; font-size: 14px; line-height: 1.7; }
.sim-effect b { font-weight: 700; }
.sim-scenes { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.sim-note { margin-top: 14px; }

/* ---------- Simulator controls ---------- */
.sim-step legend {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600;
}
.sim-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex: none;
  border-radius: 50%; background: var(--ink); color: var(--bg);
  font-size: 12px; font-weight: 700;
}
.sim-chips { margin-top: 12px; }
.sim-products {
  margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.sim-product {
  border: 1px solid var(--border); background: var(--surface);
  border-radius: 12px; padding: 10px 14px; min-height: 52px;
  text-align: left; color: var(--text);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.sim-product .sp-name { display: block; font-size: 14px; font-weight: 500; line-height: 1.4; }
.sim-product .sp-price { display: block; margin-top: 2px; font-size: 12px; opacity: 0.75; }
.sim-product.is-on { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.sim-product.is-on .sp-name { font-weight: 700; }

/* ================================================================
   Tesla-style order flow (owner feedback round, 2026-10-27):
   the configurator is the purchase flow — steps in decision order
   (plate → destination → shop name → quantity), a summary block
   with the cart page's own rows, and a sticky order bar carrying
   the big total + the single primary action while choosing.
   ================================================================ */

/* ---------- Home placement (primary flow under the hero) ---------- */
#order { scroll-margin-top: 96px; }

/* ---------- Quantity step ---------- */
.sim-qty-row { margin-top: 12px; display: flex; align-items: center; gap: 14px; }
.sim-qty-note { font-size: 12.5px; color: var(--dim); }

/* ---------- Summary block ---------- */
.sim-summary {
  margin-top: 26px;
  border: 1px solid var(--border-soft); border-radius: var(--radius);
  background: var(--surface); padding: 20px;
}
.sim-summary .sum-row {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 10px; font-size: 14px;
}
.sim-summary .sum-row:first-child { margin-top: 0; }
.sim-summary .sum-row .k { color: var(--dim); }
.sim-summary .sum-row.discount span:last-child { color: var(--accent); font-weight: 700; }
.sim-summary .sum-row[hidden] { display: none; }
.sim-total-row {
  border-top: 1px solid var(--border); margin-top: 14px; padding-top: 14px;
  font-size: 15px; font-weight: 600;
}
.sim-total-num { font-size: 34px; font-weight: 700; letter-spacing: -0.01em; line-height: 1; }
.sim-summary .pd-perk-note { margin-top: 12px; }
.sim-summary .pd-ship-note { margin-top: 4px; }
.sim-keep-row { margin-top: 16px; display: flex; align-items: center; gap: 10px; }
.sim-keep {
  padding: 8px 4px; font-size: 13.5px; font-weight: 500; color: var(--dim);
  text-decoration: underline; text-underline-offset: 4px;
  background: none; border: none; font-family: inherit; cursor: pointer;
}
.sim-keep-row .pd-fav { margin-left: auto; flex: none; width: 44px; height: 44px; }

/* ---------- Sticky order bar ---------- */
.sim-orderbar {
  position: sticky; bottom: 12px; z-index: 6;
  margin-top: 20px;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 10px 10px 22px;
  border: 1px solid var(--border-soft); border-radius: 999px;
  background: rgb(255 255 255 / 0.92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px rgb(17 17 19 / 0.18);
}
.ob-total-wrap { display: flex; flex-direction: column; min-width: 0; }
.ob-label { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; color: var(--dim); }
.ob-total-row { display: flex; align-items: baseline; gap: 8px; }
.ob-total { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; }
.ob-note { font-size: 11.5px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.ob-note[hidden] { display: none; }
.ob-btn {
  margin-left: auto; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 8px 30px;
  border: none; border-radius: 999px; cursor: pointer;
  background: var(--accent); color: var(--on-accent);
  font-family: inherit; font-size: 15px; font-weight: 600;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.ob-btn:active { transform: scale(0.98); }
@media (max-width: 480px) {
  .ob-total { font-size: 22px; }
  .ob-btn { padding: 8px 22px; }
}

/* ============================================================
   VERSO — login / register blade switch + AGUANTE hold button
   ============================================================ */
/* First-frame cover for a VERSO arrival (class set by the inline
   head script before paint). The failsafe fade guarantees no page
   can be left covered if the motion script never runs. */
html.verso-cover body::after {
  content: ""; position: fixed; inset: 0; z-index: 200;
  background: #151517; pointer-events: none;
  animation: versoFailsafe .4s ease 1.6s forwards;
}
@keyframes versoFailsafe { to { opacity: 0; visibility: hidden; } }
.verso-blade {
  position: fixed; top: -6vh; bottom: -6vh; left: -22vw; width: 144vw;
  background: #151517; z-index: 210; pointer-events: none;
  transform: translateX(-135%) skewX(-10deg);
  will-change: transform;
}
.verso-blade .verso-seam { position: absolute; top: 0; bottom: 0; }
.verso-blade .verso-seam--lead {
  right: 0; width: 3px; background: var(--accent);
  box-shadow: 0 0 18px rgba(0, 113, 227, .55);
}
.verso-blade .verso-seam--lead-l {
  left: 0; width: 3px; background: var(--accent);
  box-shadow: 0 0 18px rgba(0, 113, 227, .55);
}
.verso-blade .verso-seam--trail {
  right: 14px; width: 1px; background: rgba(255, 255, 255, .16);
}

/* AGUANTE — press-and-hold confirm on the final-check modal. The
   liquid (a deeper shade of the same accent) rises from the bottom
   over ~1s; the % rides at the label's right. Release drains it. */
#confirm-pay-btn {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
  touch-action: none;
}
#confirm-pay-btn .hold-fill {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, #0063c7, #004c99);
  border-top: 1px solid rgba(255, 255, 255, .5);
  transform: scaleY(0); transform-origin: bottom center;
}
#confirm-pay-btn .hold-label { position: relative; z-index: 1; pointer-events: none; }
#confirm-pay-btn .hold-pct {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  z-index: 1; pointer-events: none;
  font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
  opacity: 0; transition: opacity .18s ease;
}
#confirm-pay-btn.is-holding .hold-pct,
#confirm-pay-btn.is-done .hold-pct { opacity: .9; }
.confirm-hold-hint {
  margin: 10px 0 0; text-align: center;
  font-size: 12px; color: var(--muted);
}
.confirm-alt {
  display: block; margin: 6px auto 0; padding: 6px 8px;
  background: none; border: none; cursor: pointer;
  font: inherit; font-size: 12.5px; color: var(--accent);
  text-decoration: underline; text-underline-offset: 3px;
}
.confirm-alt:disabled { color: var(--muted); opacity: .55; cursor: default; text-decoration: none; }

/* ---------- My Page: address done / order history / settings ---------- */
/* Ported from the AZRION BRAND EC (same design tokens), 2026-10-27. */
.addr-done {
  margin-top: 12px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); padding: 16px; display: grid; gap: 12px;
}
.addr-done-text { margin: 0; font-size: 14px; font-weight: 600; }
.addr-done-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.addr-form-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.addr-form-actions .btn-ink { flex: 1 1 180px; width: auto; }

.order-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-top: 16px; -webkit-overflow-scrolling: touch; }
.order-tab {
  flex: 0 0 auto; border: 1px solid var(--border); border-radius: 999px;
  background: transparent; color: var(--dim); padding: 8px 16px; font-size: 13px;
}
.order-tab.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink); font-weight: 600; }
.order-card {
  margin-top: 12px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); padding: 16px;
}
.order-card-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.order-no { font-size: 13px; font-weight: 600; }
.order-status {
  border-radius: 999px; background: var(--ink); color: var(--bg);
  padding: 2px 10px; font-size: 11px; font-weight: 700; white-space: nowrap;
}
.order-date { margin: 6px 0 0; font-size: 12px; color: var(--faint); }
.order-item { margin: 8px 0 0; font-size: 14px; }
.order-sub { margin: 2px 0 0; font-size: 12px; color: var(--dim); }
.order-total { margin: 10px 0 0; font-size: 14px; font-weight: 600; }
.order-ship { font-size: 12px; font-weight: 400; color: var(--dim); }

/* Order progress stepper: current stage stated big, the track fills
   in ink up to where the order actually is, reached stages carry
   their date in small gray type. No other color is introduced. */
.order-progress { margin-top: 12px; border-top: 1px solid var(--border-soft); padding-top: 12px; }
.order-now { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: .01em; }
.order-steps { display: flex; list-style: none; margin: 14px 0 2px; padding: 0; }
.ostep { flex: 1 1 0; min-width: 0; position: relative; padding-top: 16px; }
.ostep::before {
  content: ""; position: absolute; top: 5px; left: -50%; width: 100%;
  height: 2px; background: var(--border-soft);
}
.ostep:first-child::before { display: none; }
.ostep.is-done::before, .ostep.is-current::before { background: var(--ink); }
.ostep-dot {
  position: absolute; top: 0; left: 0; z-index: 1; box-sizing: border-box;
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--border); background: var(--surface);
}
.ostep.is-done .ostep-dot { background: var(--ink); border-color: var(--ink); }
.ostep.is-current .ostep-dot {
  background: var(--ink); border-color: var(--ink);
  box-shadow: 0 0 0 4px var(--surface-2);
}
.ostep-label { display: block; font-size: 12px; font-weight: 600; color: var(--faint); }
.ostep.is-done .ostep-label { color: var(--dim); }
.ostep.is-current .ostep-label { color: var(--text); font-weight: 700; }
.ostep-date { display: block; margin-top: 2px; font-size: 10.5px; line-height: 1.5; color: var(--faint); }

.notice-card {
  margin-top: 12px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); padding: 16px;
}
.notice-card p { margin: 0; font-size: 14px; line-height: 1.8; }
.pm-add-row { margin-top: 16px; }

.settings-list { margin-top: 16px; border-top: 1px solid var(--border-soft); }
.settings-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 15px 2px; border: none; border-bottom: 1px solid var(--border-soft);
  background: transparent; color: var(--text); font-size: 14px;
  text-align: left; text-decoration: none; cursor: pointer;
  font-family: inherit; box-sizing: border-box;
}
.settings-row.is-static { cursor: default; }
.settings-label { flex: 1 1 auto; }
.settings-value { font-size: 13px; color: var(--dim); white-space: nowrap; }
.settings-chev { font-size: 16px; color: var(--faint); line-height: 1; }
.settings-panel {
  display: grid; gap: 12px; padding: 16px 2px 20px;
  border-bottom: 1px solid var(--border-soft);
}
.settings-panel .page-sub { margin: 0; }
.settings-link-row { margin: 0; font-size: 14px; }
.settings-link-row a { color: var(--text); text-underline-offset: 4px; }
.settings-ok { margin: 0; font-size: 13px; color: #14713c; }
.settings-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--dim); cursor: pointer; }
.settings-toggle input { width: 18px; height: 18px; accent-color: var(--ink); }

/* Legal prose (terms / privacy) */
.legal-prose { margin-top: 24px; }
.legal-prose h2 { margin: 28px 0 0; font-size: 15px; font-weight: 600; }
.legal-prose p { margin: 8px 0 0; font-size: 14px; line-height: 1.9; color: var(--dim); }

/* Profile edit form */
.profile-form { display: grid; gap: 12px; margin-top: 16px; max-width: 520px; }

/* ================================================================
   My Page — soft neumorphism-inspired texture (owner request,
   2026-10-27): profile card at the top, sections as softly raised
   cards on a light gray page, quietly recessed inputs / wells /
   panels, ONE accent (#0071e3) for primary buttons and the toggle
   ON state. Contrast first: labels and values keep full ink
   colors, tap targets stay >= 44px. Scoped to the account page
   (.mypage-neu) so the storefront, tab bar and checkout are
   untouched.
   ================================================================ */
body.mypage-neu-bg { background: #e8ebef; }

.mypage-neu .profile-card {
  background: linear-gradient(150deg, #ffffff 0%, #f1f3f6 100%);
  border: 1px solid #ffffff;
  border-radius: 22px;
  padding: 20px;
  box-shadow: 10px 12px 24px rgba(163, 177, 198, 0.35), -8px -8px 18px rgba(255, 255, 255, 0.85);
}
.mypage-neu .profile-card-main { display: flex; align-items: center; gap: 14px; min-width: 0; }
.mypage-neu .profile-avatar {
  flex: 0 0 auto; width: 58px; height: 58px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, #3b93f0, #0071e3);
  color: #ffffff; font-size: 24px; font-weight: 700;
  box-shadow: 0 8px 16px rgba(0, 113, 227, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.mypage-neu .profile-card .auth-eyebrow { color: #5b6572; }
.mypage-neu .profile-card-name { margin-top: 2px; font-size: 21px; font-weight: 700; overflow-wrap: anywhere; }
.mypage-neu .profile-card .page-sub { margin-top: 2px; color: #454e5a; overflow-wrap: anywhere; }
.mypage-neu #account-logout {
  background: #eef1f4; border: 1px solid #d8dee6; color: var(--text);
  box-shadow: 3px 3px 7px rgba(163, 177, 198, 0.30), -3px -3px 7px rgba(255, 255, 255, 0.80);
}

.mypage-neu .mypage-sec {
  margin-top: 20px;
  background: linear-gradient(160deg, #fbfcfd 0%, #f2f4f7 100%);
  border: 1px solid #ffffff;
  border-radius: 20px;
  padding: 20px 18px;
  box-shadow: 8px 10px 20px rgba(163, 177, 198, 0.30), -6px -6px 16px rgba(255, 255, 255, 0.80);
}
.mypage-neu .mypage-sec-title { font-size: 18px; font-weight: 700; }
.mypage-neu .mypage-sec > .page-sub { color: #454e5a; }

/* Quietly recessed inputs (profile / password / address forms) */
.mypage-neu .auth-input {
  background: #e9edf1;
  border: 1px solid #d3dae2;
  border-radius: 14px;
  box-shadow: inset 3px 3px 7px rgba(163, 177, 198, 0.35), inset -3px -3px 7px rgba(255, 255, 255, 0.90);
  color: var(--text);
}
.mypage-neu .auth-input:focus {
  background: #ffffff; border-color: var(--accent);
  outline: 2px solid rgba(0, 113, 227, 0.45); outline-offset: 0;
  box-shadow: none;
}
.mypage-neu .auth-field label { color: var(--text); font-weight: 600; }

/* Primary actions: one accent color, pill shape, soft lift */
.mypage-neu .btn-ink {
  box-shadow: 0 8px 16px rgba(0, 113, 227, 0.26);
}
.mypage-neu .btn-ghost {
  background: #eef1f4; border: 1px solid #d8dee6; color: var(--text);
  box-shadow: 2px 2px 5px rgba(163, 177, 198, 0.25);
}
.mypage-neu #pm-add-btn {
  background: var(--accent); border-color: var(--accent); color: #ffffff;
  font-weight: 700; padding: 12px 24px;
  box-shadow: 0 8px 16px rgba(0, 113, 227, 0.28);
}

/* Order history: pill tabs, active = accent; cards raised on white */
.mypage-neu .order-tab {
  background: #e9edf1; border-color: #d8dee6; color: #39424e; font-weight: 600;
  padding: 9px 16px;
  box-shadow: inset 2px 2px 5px rgba(163, 177, 198, 0.25), inset -2px -2px 5px rgba(255, 255, 255, 0.70);
}
.mypage-neu .order-tab.is-active {
  background: var(--accent); border-color: var(--accent); color: #ffffff;
  box-shadow: 0 6px 12px rgba(0, 113, 227, 0.30);
}
.mypage-neu .order-card {
  border-color: #e2e6ec; border-radius: 16px;
  box-shadow: 4px 5px 12px rgba(163, 177, 198, 0.22);
}
.mypage-neu .order-date { color: #5b6572; }

/* Notices: quietly recessed panel */
.mypage-neu .notice-card {
  background: #e9edf1; border-color: #d8dee6; border-radius: 16px;
  box-shadow: inset 3px 3px 7px rgba(163, 177, 198, 0.28), inset -3px -3px 7px rgba(255, 255, 255, 0.85);
}

/* Address / saved-card cards: soft white raise */
.mypage-neu .addr-card {
  border-color: #e2e6ec; border-radius: 16px;
  box-shadow: 4px 5px 12px rgba(163, 177, 198, 0.22);
}
.mypage-neu .addr-done {
  border-color: #ffffff; border-radius: 16px;
  background: linear-gradient(150deg, #ffffff, #f1f3f6);
  box-shadow: 6px 7px 14px rgba(163, 177, 198, 0.28);
}

/* Settings: rows grouped in a quietly recessed well */
.mypage-neu .settings-list {
  margin-top: 14px; padding: 2px 14px;
  background: #e9edf1; border: 1px solid #d8dee6; border-radius: 16px;
  box-shadow: inset 3px 3px 8px rgba(163, 177, 198, 0.25), inset -3px -3px 8px rgba(255, 255, 255, 0.85);
}
.mypage-neu .settings-row { border-bottom-color: #d3dae2; min-height: 52px; }
.mypage-neu .settings-list .settings-row:last-child { border-bottom: none; }
.mypage-neu .settings-label { font-weight: 600; }
.mypage-neu .settings-value { color: #454e5a; }
.mypage-neu .settings-chev { color: #75808f; }
.mypage-neu .settings-panel {
  background: #ffffff; border: 1px solid #e2e6ec; border-radius: 14px;
  padding: 16px; margin: 4px 0 14px;
  box-shadow: 4px 5px 12px rgba(163, 177, 198, 0.20);
}

/* Notification toggle: a real switch — blue + knob right is ON,
   gray + knob left is OFF, readable at a glance. */
.mypage-neu .settings-toggle { gap: 10px; font-size: 14px; font-weight: 500; color: var(--text); }
.mypage-neu .settings-toggle input {
  appearance: none; -webkit-appearance: none;
  flex: 0 0 auto; width: 52px; height: 30px; margin: 0;
  border-radius: 999px; border: 1px solid #aeb8c4;
  background: #c2cad4; cursor: pointer; position: relative;
  box-shadow: inset 2px 2px 5px rgba(90, 105, 130, 0.30);
  transition: background 0.25s ease, border-color 0.25s ease;
}
.mypage-neu .settings-toggle input::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 24px; height: 24px; border-radius: 50%;
  background: #ffffff; box-shadow: 0 2px 5px rgba(30, 41, 59, 0.35);
  transition: left 0.25s ease;
}
.mypage-neu .settings-toggle input:checked { background: var(--accent); border-color: var(--accent); }
.mypage-neu .settings-toggle input:checked::after { left: 24px; }
.mypage-neu .settings-toggle input:focus-visible { outline: 2px solid rgba(0, 113, 227, 0.60); outline-offset: 2px; }

/* Password meter track reads as a recessed groove */
.mypage-neu .pw-meter-bar {
  background: #d9dfe7;
  box-shadow: inset 1px 1px 3px rgba(163, 177, 198, 0.45);
}

/* 通知設定（初回オンボーディング共通パターン） */
.azpush{margin-top:10px}
.azpush-state{font-size:14px;font-weight:700;margin:0 0 4px}
.azpush-btns{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 4px}
.azpush-btns .btn-primary{padding:10px 18px;font-size:13px}