.shop { padding-block: 40px 0; }
.s-state { padding: 80px 0; color: var(--ink-2); font-size: 18px; }
.s-state a { color: var(--accent-ink); font-weight: 600; }
.s-open { font-weight: 600; }
.s-open.on { color: #1f9d55; }
.s-open.off { color: var(--ink-3); }
.s-list { display: flex; flex-direction: column; }
.s-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 20px; align-items: center; padding: 18px 0; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.s-row.th { grid-template-columns: 72px minmax(0, 1fr) auto; }
.s-row:first-child { border-top: 0; }
.s-row:hover .s-tx b { color: var(--accent-ink); }
.s-ph { width: 72px; height: 72px; border-radius: 12px; overflow: hidden; background: var(--surface-3); }
.s-ph img, .s-ph svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.s-tx b { font-size: 16.5px; font-weight: 600; }
.s-tx small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 3px; color: var(--ink-2); font-size: 14px; line-height: 1.45; white-space: normal; }
.s-row .s-pr { text-align: right; font-weight: 600; white-space: nowrap; color: var(--ink); }
.s-row .s-pr span { display: block; color: var(--ink-3); font-weight: 400; font-size: 13px; margin-top: 2px; }
.s-rev { padding: 18px 0; border-top: 1px solid var(--line); }
.s-rev p { margin: 6px 0 0; color: var(--ink-2); line-height: 1.5; }
.s-rev b { font-size: 15.5px; }
.s-stars { color: var(--accent-ink); font-weight: 700; }
.s-btn { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 12px; font-weight: 700; text-decoration: none; text-align: center; }
.s-btn.pri { background: var(--accent); color: var(--on-accent); }
.s-btn.pri:hover { opacity: 0.92; }
.s-btn.sec { border: 1px solid var(--line-2); color: var(--ink); }
.s-btn.sec:hover { border-color: var(--ink-2); }
.s-by { font-size: 13.5px; color: var(--ink-3); padding-inline: 6px; }
.s-by a { color: var(--accent-ink); font-weight: 600; }
.shop section, .shop .s-main section { padding: 0; border: 0; }
.shop figure { margin: 0; }

.shop { padding-block: 0; }
.c-intro { text-align: center; padding: 72px 0 56px; }
.c-intro h1 { margin: 0; font-family: var(--f-display); font-weight: 800; font-size: clamp(44px, 9vw, 120px); line-height: 0.92; letter-spacing: -0.045em; text-wrap: balance; overflow-wrap: anywhere; }
.c-sub { margin: 20px auto 0; font-size: clamp(18px, 2.2vw, 26px); line-height: 1.3; color: var(--ink-2); max-width: 40ch; text-wrap: balance; }
.c-meta { margin: 14px 0 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 16px; font-size: 15.5px; color: var(--ink-2); }
.c-meta b { color: var(--ink); }
.c-act { margin-top: 28px; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.c-act .s-btn { min-width: 170px; padding: 0 26px; border-radius: 999px; }
.c-track { height: calc(var(--n, 1) * 100vh + 30vh); position: relative; }
.c-track.one { height: auto; padding-block: 24px 64px; }
.c-stage { position: sticky; top: calc(var(--hh, 64px) + 16px); height: calc(100vh - var(--hh, 64px) - 16px); min-height: 520px; display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 48px; }
.c-track.one .c-stage { position: static; height: auto; min-height: 0; }
.art { position: relative; aspect-ratio: 4 / 3; width: 100%; max-height: 100%; }
.art .a { position: absolute; inset: 0; border-radius: 28px; overflow: hidden; background: var(--surface-3); opacity: 0; transform: scale(0.97); transition: opacity 0.7s var(--ease), transform 0.9s var(--ease); will-change: transform; }
.art .a.on { opacity: 1; transform: none; }
.art img, .art svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.txt { position: relative; min-height: 360px; display: grid; }
.u { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px; opacity: 0; transform: translateY(24px); pointer-events: none; transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.u.on { opacity: 1; transform: none; pointer-events: auto; }
.u small { font-size: 15px; color: var(--ink-3); }
.u h2 { margin: 0; font-family: var(--f-display); font-weight: 800; font-size: clamp(34px, 4.8vw, 64px); line-height: 0.98; letter-spacing: -0.04em; overflow-wrap: anywhere; }
.u .pr { color: var(--ink); font-family: var(--f-display); font-weight: 600; font-size: clamp(22px, 2.6vw, 32px); }
.u .pr span { color: var(--ink-3); font: 400 16px var(--f-body, inherit); }
.u p { margin: 0; color: var(--ink-2); font-size: 17px; line-height: 1.5; max-width: 36ch; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.u .s-btn { padding: 0 28px; border-radius: 999px; margin-top: 8px; }
.dots { display: flex; gap: 8px; align-self: end; margin-top: 24px; grid-area: 2 / 1; }
.dots i { width: 28px; height: 4px; border-radius: 2px; background: var(--line-2); transition: background 0.4s, width 0.4s; }
.dots i.on { background: var(--ink); width: 44px; }
.c-track.flat { height: auto; }
.c-track.flat .c-stage { position: static; height: auto; display: block; }
.c-track.flat .art { display: none; }
.c-track.flat .txt { display: flex; flex-direction: column; gap: 40px; }
.c-track.flat .u { opacity: 1; transform: none; pointer-events: auto; }
.c-track.flat .dots { display: none; }
.c-cover { aspect-ratio: 21 / 8; border-radius: 28px; overflow: hidden; margin-bottom: 56px; background: var(--surface-3); }
.c-cover svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.c-sec, .c-more { padding-block: 24px 40px; max-width: 860px; margin-inline: auto; }
.c-sec h2, .c-more h2 { margin: 0 0 12px; padding: 0; border: 0; font-family: var(--f-display); font-size: 28px; letter-spacing: -0.02em; }
.c-band { background: var(--surface-2); padding-block: 88px; margin-top: 56px; margin-inline: calc(50% - 50vw); }
.c-g { display: grid; grid-template-columns: repeat(var(--g, 3), minmax(0, 1fr)); gap: 48px; }
.c-g h4 { margin: 0 0 10px; font-family: var(--f-display); font-size: 22px; letter-spacing: -0.015em; }
.c-g p { margin: 0; color: var(--ink-2); line-height: 1.6; white-space: pre-line; }
.c-end { background: #111214; color: #f4f2ee; text-align: center; padding: 96px 24px; border-radius: 32px; margin-block: 64px 24px; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.c-end h2 { margin: 0; max-width: 18ch; font-family: var(--f-display); font-weight: 800; font-size: clamp(32px, 5.4vw, 68px); line-height: 1; letter-spacing: -0.04em; text-wrap: balance; }
.c-end .s-btn { padding: 0 32px; border-radius: 999px; min-height: 52px; }
.c-end p { margin: 0; font-size: 14px; color: #a5a29b; }
.c-end a:not(.s-btn) { color: #ff9a5c; font-weight: 600; }
.s-btn.sec { border: 1px solid var(--line-2); color: var(--ink); }
@media (max-width: 820px) {
  .c-intro { padding-block: 48px 36px; }
  .c-stage { grid-template-columns: 1fr; grid-template-rows: auto auto; gap: 24px; align-content: center; }
  .art { max-height: 38vh; }
  .txt { min-height: 0; }
  .c-g { grid-template-columns: 1fr; gap: 32px; }
  .c-end { padding: 64px 20px; border-radius: 24px; }
  .s-row.th { grid-template-columns: 56px minmax(0, 1fr) auto; }
  .s-ph { width: 56px; height: 56px; }
}