/* ============================================================
   LATE RECORDS — App Stylesheet
   All view-specific styles extracted from index.html <style> block.
   Load order: style.css → app.css
   ============================================================ */

/* ── Typography tokens ───────────────────────────────────── */
:root {
  --artist-size:      8px;
  --artist-tracking:  -0.02em;
  --artist-transform: uppercase;
  --title-size:       9px;
  --title-transform:  none;
  --meta-size:        7px;
  --meta-color:       var(--ink45);
  --ui-gap:           8px;
}

/* ── Page loader ─────────────────────────────────────────── */
#lr-loader {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  opacity: 0; pointer-events: none;
  transition: opacity 0.08s;
}
#lr-loader.active { opacity: 1; pointer-events: all; touch-action: none; }
#lr-loader:not(.active) { pointer-events: none !important; touch-action: auto; }
.lr-loader-grid {
  display: grid;
  grid-template-columns: repeat(3, 16px);
  gap: 5px;
}
.lr-loader-cell {
  width: 16px; height: 16px;
  background: var(--ink);
  opacity: 0.1;
}
.lr-loader-cell.s { animation: lr-sweep 1.6s ease-in-out infinite; }

/* Clockwise delays: top-left → top-mid → top-right → mid-right
                   → bot-right → bot-mid → bot-left → mid-left  */
.lr-loader-cell:nth-child(1) { animation-delay:  0s;    }
.lr-loader-cell:nth-child(2) { animation-delay: -1.4s;  }
.lr-loader-cell:nth-child(3) { animation-delay: -1.2s;  }
.lr-loader-cell:nth-child(6) { animation-delay: -1.0s;  }
.lr-loader-cell:nth-child(9) { animation-delay: -0.8s;  }
.lr-loader-cell:nth-child(8) { animation-delay: -0.6s;  }
.lr-loader-cell:nth-child(7) { animation-delay: -0.4s;  }
.lr-loader-cell:nth-child(4) { animation-delay: -0.2s;  }

@keyframes lr-sweep {
  0%   { opacity: 0.1; }
  12%  { opacity: 1;   }
  25%  { opacity: 0.1; }
  100% { opacity: 0.1; }
}

/* ── Fonts (inlined — removes one render-blocking request) ── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Dot background ─────────────────────────────────────── */
body { display: flex; flex-direction: column; min-height: 100vh; overflow-x: hidden; }

/* ── Search btn — hidden ─────────────────────────────────── */
.search-btn {
  background: none; border: none; padding: 4px; color: var(--ink);
  cursor: pointer; display: none;
  align-items: center; justify-content: center;
  transition: opacity .15s; flex-shrink: 0;
}
.search-btn svg { width: 17px; height: 17px; }
.search-btn:hover { opacity: .6; }
/* body.view-catalog .search-btn { display: flex; } — search hidden */

/* ── Search bar ─────────────────────────────────────────── */
.search-bar {
  position: fixed; top: 74px; left: 0; right: 0; z-index: 998;
  background-color: var(--bg);
  border-bottom: 1px solid var(--border);
  height: 0; overflow: hidden; transition: height .18s ease;
}
.search-bar.open { height: 46px; }
.search-bar-inner {
  max-width: 780px; margin: 0 auto; padding: 0 30px;
  height: 46px; display: flex; align-items: center;
}
.search-input {
  flex: 1; border: none; background: transparent;
  font-family: var(--fn-title);
  font-size: 13px; font-weight: 400; color: var(--ink);
  padding: 5px 0; outline: none; letter-spacing: .01em;
}
.search-input::placeholder { color: var(--ink30); }
.search-clear {
  border: none; background: none; padding: 0 0 0 8px;
  font-size: 16px; color: var(--ink30); cursor: pointer;
  line-height: 1; display: none; transition: color .1s;
}
.search-clear:hover { color: var(--ink); }
.search-count {
  font-size: 10px; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink30);
  padding-left: 14px; white-space: nowrap; flex-shrink: 0;
  font-family: var(--fn-meta);
}
.avail-toggle {
  display: none; width: 14px; height: 14px;
  border: 1.5px solid var(--ink30); background: transparent;
  cursor: pointer; flex-shrink: 0; margin-left: 12px; padding: 0;
  transition: background .12s, border-color .12s;
}
.avail-toggle.active { background: var(--btn-bg); border-color: var(--btn-bg); }

/* ── AUDIT: search-active rules scoped to catalog view. ── */
body.search-open.view-catalog  .tbl thead th,
body.search-active.view-catalog .tbl thead th   { top: 120px; }
body.search-open.view-catalog  .suggestions-header { padding-top: 56px; }
body.search-active.view-catalog #catalogTable tbody tr:first-child td { border-top: none; }
body.search-open.view-catalog   #catalogTable tbody tr:first-child td { padding-top: 46px; }
body.search-open.view-catalog  .no-results-empty { padding-top: 134px; }
body.search-active.view-catalog .carousel-section,
body.search-active.view-catalog .section-divider,
body.search-active.view-catalog .az-nav,
body.search-active.view-catalog .info-rotator,
body.search-active.view-catalog .tag-cloud,
body.search-active.view-catalog .sold-log { display: none; }

/* ── Persistent audio player ────────────────────────────── */
#audio-player {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 99;
  background-color: var(--bg);
  display: none;
  flex-direction: column;
}
#player-waveform-wrap {
  position: relative;
  width: 100%; max-width: 780px; margin: 0 auto;
  padding: 8px var(--pad-h) 0; box-sizing: border-box;
  display: flex; align-items: center; gap: 8px;
}
#player-waveform-wrap::before {
  /* Divider — full content width, flush with right edge of Next button */
  content: ''; position: absolute;
  top: 0; left: var(--pad-h); right: var(--pad-h);
  height: 1px; background: var(--border-mid);
}
#player-waveform {
  display: block; flex: 1; height: 12px;
  cursor: crosshair;
}
#player-close {
  flex-shrink: 0;
  width: 14px; height: 14px;
  background: var(--ink); color: var(--btn-fg);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .15s;
}
#player-close:hover { opacity: .7; }
#player-inner {
  max-width: 780px; margin: 0 auto; height: 44px; width: 100%;
  padding: 0 var(--pad-h);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
#player-left {
  display: flex; align-items: center; gap: 0;
  min-width: 0; overflow: hidden;
}
#player-play {
  flex-shrink: 0; background: none; border: none;
  cursor: pointer; color: var(--ink);
  padding: 12px 11px;
  display: flex; align-items: center;
  transition: opacity .1s;
}
#player-play:hover { opacity: .6; }
#player-meta {
  font-size: 12px; color: var(--ink55); min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1; cursor: pointer; max-width: 50vw;
  padding-bottom: 3px;
  text-decoration: underline; text-decoration-thickness: 0.5px; text-underline-offset: 2px;
}
#player-meta:hover #player-title { opacity: .7; }
#player-title { font-weight: 500; color: var(--ink); font-size: 12px; }
#player-by    { color: var(--ink30); }
#player-artist-name { color: var(--ink55); }
#player-right { display: flex; align-items: center; gap: 3px; justify-content: flex-end; }
#player-next { padding-right: 0; }
#player-prev, #player-next {
  pointer-events: auto;
  -webkit-touch-callout: none;
  user-select: none;
}
#player-time-remaining {
  font-size: 11px; color: var(--ink30); letter-spacing: .03em;
  white-space: nowrap; margin-right: -2px; font-variant-numeric: tabular-nums;
  font-family: var(--fn-price);
}
.player-ctrl {
  background: none; border: none; cursor: pointer; color: var(--ink30);
  padding: 10px 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1; transition: color .1s; font-family: inherit;
}
.player-ctrl:hover { color: var(--ink); }
#player-prev, #player-next { line-height: 0; }
/* ── Player active — 22px waveform row (8px pad-top + 14px btn) + 44px controls = 66px total */
body.player-active #app-root { padding-bottom: 66px; }
body.player-active #app-root .container { padding-bottom: calc(66px + 40px) !important; }

/* ── Cart icon (nav) ──────────────────────────────────── */
.cart-link {
  position: relative; display: inline-flex; align-items: center;
  justify-content: center; color: var(--ink); text-decoration: none;
  padding: 8px; margin: -8px; line-height: 1; transition: opacity .15s;
}
.cart-link:hover { opacity: .5; }
.cart-link svg   { display: block; width: 16px; height: 16px; }
.cart-badge {
  position: absolute; top: 1px; right: 1px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--ink); color: var(--bg);
  font-size: 7px; font-weight: 700; line-height: 1;
  display: none; align-items: center; justify-content: center;
  pointer-events: none;
}

/* ── Catalog view ───────────────────────────────────────── */
#app-root.view-catalog { display: flex; flex-direction: column; min-height: 100vh; gap: 28px; }
#app-root.view-catalog .container {
  max-width: 780px; margin: 0 auto; padding: 0 30px 20px; width: 100%;
  display: flex; flex-direction: column; justify-content: flex-start;
}
.tbl thead { display: none; }
body.search-active.view-catalog #app-root .container { padding-top: calc(74px + 46px + 24px); }
#app-root.view-catalog .bottom-section {
  max-width: 780px; margin: 0 auto; padding: 0 30px 32px; width: 100%;
  display: flex; flex-direction: column;
}

/* ── Carousel ───────────────────────────────────────────── */
.carousel-section { max-width: 780px; width: 100%; margin: calc(74px + 12px) auto 0; position: relative; }
.carousel-viewport { height: 130px; overflow: hidden; position: relative; }
.carousel-track    { display: flex; height: 100%; }
.carousel-card     { min-width: 100%; height: 100%; display: flex; flex-direction: column; position: relative; cursor: pointer; }
.card-inner        { width: 100%; padding: 22px 30px 14px; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; box-sizing: border-box; }
.card-top          { min-height: 0; }
.carousel-section::after { content: '→'; position: absolute; top: 22px; right: 30px; font-size: 24px; line-height: 1.25; color: var(--ink45); pointer-events: none; }
.card-artist       { font-size: var(--artist-size) !important; font-weight: 600; letter-spacing: var(--artist-tracking) !important; text-transform: var(--artist-transform) !important; color: var(--ink45); margin-bottom: 3px; line-height: 1.3; }
.card-title        { font-size: var(--title-size); font-weight: 400; line-height: 1.2; letter-spacing: .02em; text-transform: uppercase; margin-bottom: 5px; color: var(--ink); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.card-meta         { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.card-tags         { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; width: 100%; margin-top: 4px; margin-bottom: 4px; }
.card-format       { font-size: var(--meta-size); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--meta-color); font-family: var(--fn-meta); }
.card-meta-divider { width: 1px; height: 10px; background: var(--ink30); flex-shrink: 0; }
.card-tag          { font-size: 8px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; border: 1px solid var(--border-tag); padding: 2px 6px; line-height: 1.4; color: var(--meta-color); cursor: default; pointer-events: none; }
.carousel-card:hover .card-artist,
.carousel-card:hover .card-title { color: var(--ink); }
.carousel-nav      { position: absolute; bottom: 14px; right: 30px; display: flex; align-items: center; gap: 4px; z-index: 10; }
.carousel-counter  { position: relative; font-size: 10px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--ink45); border: none; padding: 0; line-height: 1.4; background: transparent; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; transition: color .15s; font-family: inherit; }
.carousel-counter::before { content: ''; position: absolute; inset: -14px -18px; }
.carousel-counter:hover { color: var(--ink); }
.carousel-seg-bar  { display: flex; width: 100%; height: 1px; padding: 0 30px; box-sizing: border-box; margin-top: 4px; }
.carousel-seg      { flex: 1; height: 1px; background: var(--ink30); cursor: pointer; transition: background .15s; }
.carousel-seg.is-active { background: var(--ink); }
.section-divider   { display: none; }

/* ── Catalog table ──────────────────────────────────────── */
.tbl { width: 100%; border-collapse: collapse; table-layout: fixed; }
col.c-art    { width: 38px; } col.c-title { width: auto; } col.c-genre { width: 18%; } col.c-format { width: 10%; } col.c-stock { width: 8%; }
.tbl thead th {
  position: sticky; top: 74px; z-index: 30;
  background-color: var(--bg);
  box-shadow: 0 -1px 0 var(--border), 0 1px 0 rgba(26,26,20,.26);
  padding: 10px 12px 10px 0; font-size: 11px; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink55);
  text-align: left; vertical-align: middle;
}
.tbl thead th:first-child { padding-left: 0; }
.tbl thead th.c-art   { padding-right: 0; }
.tbl thead th.c-stock { text-align: right; padding-right: 0; }
.tbl thead th.c-title, .tbl tbody td.c-title { padding-left: 10px; }
.art-icon { width: 20px; height: 20px; opacity: .4; display: block; margin: 0 auto; }
.tbl tbody tr { cursor: pointer; transition: color 0.1s linear; background: transparent; }
.tbl tbody td { padding: 7px 12px 7px 0; border-bottom: 1px solid var(--border-mid); vertical-align: middle; background: transparent; }
.tbl tbody td:first-child { padding-left: 0; } .tbl tbody td:last-child { padding-right: 0; }
.tbl tbody td.c-art   { padding-right: 0; }
.tbl tbody td.c-stock { padding-top: 8px; padding-bottom: 8px; padding-right: 0; }
.tbl tbody tr:first-child td { border-top: 1px solid var(--border-mid); }
.tbl tbody tr:hover .rec-title, .tbl tbody tr:hover .rec-artist, .tbl tbody tr:hover .rec-stock { color: var(--ink); }
.rec-art-wrap { width: 38px; height: 38px; overflow: hidden; flex-shrink: 0; background-color: var(--art-bg); background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MCA0MCI+PGNpcmNsZSBjeD0iMjAiIGN5PSIyMCIgcj0iMTkiIGZpbGw9InJnYmEoMjYsMjYsMjAsLjEpIi8+PGNpcmNsZSBjeD0iMjAiIGN5PSIyMCIgcj0iMTYiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNiwyNiwyMCwuMTIpIiBzdHJva2Utd2lkdGg9IjEiLz48Y2lyY2xlIGN4PSIyMCIgY3k9IjIwIiByPSIxMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2JhKDI2LDI2LDIwLC4xMCkiIHN0cm9rZS13aWR0aD0iMSIvPjxjaXJjbGUgY3g9IjIwIiBjeT0iMjAiIHI9IjgiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNiwyNiwyMCwuMTApIiBzdHJva2Utd2lkdGg9IjEiLz48Y2lyY2xlIGN4PSIyMCIgY3k9IjIwIiByPSI1IiBmaWxsPSJub25lIiBzdHJva2U9InJnYmEoMjYsMjYsMjAsLjE1KSIgc3Ryb2tlLXdpZHRoPSIxIi8+PGNpcmNsZSBjeD0iMjAiIGN5PSIyMCIgcj0iMi41IiBmaWxsPSJyZ2JhKDI2LDI2LDIwLC4yKSIvPjwvc3ZnPg=="); background-size: 80%; background-repeat: no-repeat; background-position: center; }
.rec-art-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; color: transparent; }
.tbl tbody tr.sold .rec-art-wrap { opacity: .35; }
.rec-title  { font-size: var(--title-size); font-weight: 400; line-height: 1.2; letter-spacing: .02em; text-transform: var(--title-transform); transition: color 0.1s linear; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-artist { font-size: var(--artist-size) !important; font-weight: 600; color: var(--ink45); margin-top: 3px; line-height: 1.3; text-transform: var(--artist-transform) !important; letter-spacing: var(--artist-tracking) !important; transition: color 0.1s linear; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.genre-tag  { display: inline-block; font-size: 7px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--meta-color); border: 1px solid var(--border-tag); padding: 2px 6px; line-height: 1.4; white-space: nowrap; cursor: default; pointer-events: none; }
.rec-format { font-size: var(--meta-size); font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--meta-color); }
.rec-stock  { display: flex; align-items: center; justify-content: flex-end; gap: 6px; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.sdot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.sdot.a { background: var(--ink); } .sdot.s { background: var(--ink30); } .sdot.p { background: var(--ink55); }
.tbl tbody tr.sold .rec-title  { color: var(--ink55); }
.tbl tbody tr.sold .rec-artist { color: var(--ink30); }
.tbl tbody tr.sold .genre-tag  { color: var(--ink30); border-color: var(--ink15); }
.tbl tbody tr.sold .rec-format { color: var(--ink30); }
.tbl tbody tr.sold .rec-stock  { color: var(--ink30); }
.tbl tbody tr.sold .sdot       { background: var(--ink30) !important; }

/* ── A-Z nav ────────────────────────────────────────────── */
.az-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; padding: 10px 0; border-bottom: 1px solid var(--border-mid); }
.az-letter { font-size: 12px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; border: none; background: none; color: var(--ink45); cursor: pointer; padding: 7px 13px; min-width: 34px; text-align: center; line-height: 1; transition: color .1s, background .1s; font-family: var(--font-data); }
.az-letter:hover:not(:disabled) { color: var(--ink); background: var(--border-mid); }
.az-letter.active { background: var(--btn-bg); color: var(--btn-fg); }
.az-letter.empty, .az-letter:disabled { color: var(--ink15); cursor: default; }
.suggestions-header { display: none; padding: 28px 0 16px; font-size: 11px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: var(--ink45); }
.no-results-empty   { padding: 40px 0; font-size: 13px; color: var(--ink30); letter-spacing: .01em; display: none; position: relative; z-index: 1; }

/* ── Info rotator ───────────────────────────────────────── */
.info-rotator { display: flex; align-items: center; justify-content: center; padding: 4px 0 14px; margin: 0 auto 20px; gap: 12px; max-width: 420px; width: 100%; }
.info-rotator-btn { width: 28px; height: 28px; flex-shrink: 0; border: 1px solid transparent; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--ink45); transition: color 0.1s, border-color 0.1s; }
.info-rotator-btn:active { border-color: var(--ink30); color: var(--ink); }
.info-rotator-content { flex: 1; min-width: 0; text-align: center; }
.info-rotator-title { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink45); margin-bottom: 4px; }
.info-rotator-text  { font-size: 11px; font-weight: 200; color: var(--ink30); letter-spacing: .01em; line-height: 1.5; }

/* ── Sold log ───────────────────────────────────────────── */
.sold-log { background: transparent; padding: 8px 0; margin: 0; width: 100%; }
.sold-log-grid   { display: grid; grid-template-columns: 1fr 1fr; align-items: start; overflow: hidden; }
.sold-log-col    { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; width: 100%; min-width: 0; overflow: hidden; padding: 0 10px; }
.sold-log-col:first-child { padding: 0 10px 0 0; }
.sold-log-col:last-child  { padding: 0 0 0 10px; }
.sold-log-row    { display: flex; align-items: center; gap: 8px; padding: 4px 0; cursor: pointer; text-decoration: none; width: 100%; box-sizing: border-box; }
.sold-log-tag    { font-size: 10px; color: var(--ink30); flex-shrink: 0; font-family: var(--font-data); }
.sold-log-content{ flex: 1; display: block; min-width: 0; font-size: 11px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sold-log-artist { color: var(--ink45); transition: color .1s; text-transform: uppercase; font-weight: 400; letter-spacing: .07em; font-size: 10px; }
.sold-log-sep    { color: var(--ink30); margin: 0 4px; }
.sold-log-title  { color: var(--ink45); transition: color .1s; text-transform: uppercase; letter-spacing: .02em; font-weight: 400; }
.sold-log-row:hover .sold-log-artist, .sold-log-row:hover .sold-log-title { color: var(--ink); }
.sold-log-toggle { background: var(--ink15); border: 0; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; color: var(--ink); cursor: pointer; flex-shrink: 0; }
.sold-log-toggle:hover { opacity: .6; }

/* ── Tag cloud ──────────────────────────────────────────── */
.tag-cloud       { min-height: 80px; display: flex; flex-direction: column; justify-content: flex-start; padding-top: 12px; padding-bottom: 12px; border-top: 1px solid var(--border-mid); text-align: left; line-height: 1.45; }
.tag-cloud-item  { font-size: 11px; color: var(--ink45); cursor: pointer; text-decoration: none; }
.tag-cloud-item:hover { color: var(--ink); text-decoration: underline; }
.tag-cloud-sep   { font-size: 11px; color: var(--ink30); margin: 0 2px; }
.tag-cloud-more  { font-size: 11px; font-weight: 500; color: var(--ink45); cursor: pointer; text-decoration: none; }
.tag-cloud-more:hover { color: var(--ink); text-decoration: underline; }
.lr-footer { display: block; padding: 0; }

/* ── Album view ─────────────────────────────────────────── */
#app-root.view-album .container { padding-bottom: 80px; padding-top: calc(74px + 36px); }

.album-page        { display: grid; grid-template-columns: 1fr 48%; column-gap: 40px; align-items: start; }
.album-image-wrap  { grid-column: 2; grid-row: 1 / span 10; position: sticky; top: calc(74px + 36px); align-self: start; }
.album-img-gallery { position: relative; }
.album-img-track   { display: flex; flex-direction: column; gap: 6px; }
.album-img-slide   { width: 100%; min-width: 0; }
.album-img-arrow   { display: none; position: absolute; bottom: 6px; right: 6px; font-family: 'Inter', system-ui, sans-serif; font-size: 10px; font-weight: 500; letter-spacing: .04em; color: var(--ink45); background: var(--bg); padding: 2px 6px; line-height: 1.6; pointer-events: none; border: 1px solid var(--border-mid); }
.album-image       { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.album-placeholder { width: 100%; aspect-ratio: 1/1; background: var(--art-bg); display: flex; align-items: center; justify-content: center; }
.album-placeholder-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.placeholder-vinyl { width: 80px; height: 80px; opacity: .4; animation: spin 8s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.placeholder-label { font-size: 9px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink45); }

.album-title-col   { min-width: 0; padding-bottom: 20px; border-bottom: 1px solid var(--border-mid); }
.album-genre-wrap  { display: flex; flex-wrap: wrap; gap: 4px; padding: 14px 0; }
.album-genre-tag   { font-size: 7px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; border: 1px solid var(--border-tag); padding: 2px 6px; line-height: 1.4; color: var(--meta-color); cursor: default; pointer-events: none; display: inline-block; }
.album-title       { font-size: var(--title-size); font-weight: 400; line-height: 1.2; margin: 0 0 3px; color: var(--ink); letter-spacing: .02em; text-transform: uppercase; }
.album-artist      { font-size: var(--artist-size) !important; font-weight: 600; letter-spacing: var(--artist-tracking) !important; text-transform: var(--artist-transform) !important; color: var(--ink45); margin: 0; line-height: 1.3; }

.album-info-strip  { padding: 10px 0; border-bottom: 1px solid var(--border-mid); }
.album-info-spec   { font-size: 7px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--ink45); }

.price-block       { padding: 16px 0; border-bottom: 1px solid var(--border-mid); display: flex; flex-direction: column; gap: 10px; }
.price-label       { display: none; }
.album-price       { font-size: 22px; font-weight: 600; letter-spacing: .02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.add-to-cart-btn   { font-family: var(--fn-title); font-size: 11px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; padding: 14px 32px; border: 1px solid var(--btn-bg); background: var(--btn-bg); color: var(--btn-fg); cursor: pointer; transition: opacity .15s; align-self: flex-start; }
.add-to-cart-btn:hover { opacity: .82; }
.add-to-cart-btn:disabled { opacity: .35; cursor: not-allowed; }
.add-to-cart-btn.is-in-cart { background: transparent; border-color: var(--ink15); color: var(--ink30); opacity: 1; cursor: pointer; }
.add-to-cart-btn.is-in-cart:hover { opacity: 1; }

.description-block { padding: 16px 0; border-bottom: 1px solid var(--border-mid); }
.description       { font-size: 12px; line-height: 1.85; font-weight: 400; margin: 0; color: var(--ink45); }
.description.is-collapsed { display: block !important; -webkit-line-clamp: unset !important; overflow: visible !important; }
.description-toggle{ display: none !important; }

/* Pre-order / Restock notice */
.preorder-dialog        { margin: 10px 0; display: flex; align-items: center; gap: 9px; font-size: 11px; line-height: 1.6; color: var(--ink45); }
.preorder-cursor        { display: inline-block; width: 2px; height: 11px; background: var(--ink45); margin-left: 3px; vertical-align: middle; animation: preorder-blink .8s step-end infinite; }
@keyframes preorder-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.preorder-dialog-icon { background: var(--ink); color: var(--bg); font-family: monospace; font-size: 9px; font-weight: 700; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.preorder-tag { font-family: var(--fn-title); font-size: 11px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.preorder-tag:hover { color: var(--ink55); }
.po-bracket { animation: po-bracket 2s step-end infinite; display: inline-block; }

/* ── Pre-order page ─────────────────────────────────────── */
#app-root.view-preorder .container { padding-top: calc(74px + 22px); padding-bottom: 80px; }
.po-header      { display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px; padding-bottom: 0; }
.po-page-title  { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin: 0; color: var(--ink); }
.po-count       { font-size: 10px; font-weight: 500; letter-spacing: .08em; color: var(--ink45); font-family: var(--font-data); }
.po-table       { width: 100%; border-collapse: collapse; table-layout: fixed; }
.po-row         { border-bottom: 1px solid var(--border-mid); cursor: pointer; }
.po-row:first-child { border-top: 1px solid var(--border-mid); }
.po-art         { width: 58px; padding: 0; vertical-align: middle; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MCA0MCI+PGNpcmNsZSBjeD0iMjAiIGN5PSIyMCIgcj0iMTkiIGZpbGw9InJnYmEoMjYsMjYsMjAsLjEpIi8+PGNpcmNsZSBjeD0iMjAiIGN5PSIyMCIgcj0iMTYiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNiwyNiwyMCwuMTIpIiBzdHJva2Utd2lkdGg9IjEiLz48Y2lyY2xlIGN4PSIyMCIgY3k9IjIwIiByPSIxMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2JhKDI2LDI2LDIwLC4xMCkiIHN0cm9rZS13aWR0aD0iMSIvPjxjaXJjbGUgY3g9IjIwIiBjeT0iMjAiIHI9IjgiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNiwyNiwyMCwuMTApIiBzdHJva2Utd2lkdGg9IjEiLz48Y2lyY2xlIGN4PSIyMCIgY3k9IjIwIiByPSI1IiBmaWxsPSJub25lIiBzdHJva2U9InJnYmEoMjYsMjYsMjAsLjE1KSIgc3Ryb2tlLXdpZHRoPSIxIi8+PGNpcmNsZSBjeD0iMjAiIGN5PSIyMCIgcj0iMi41IiBmaWxsPSJyZ2JhKDI2LDI2LDIwLC4yKSIvPjwvc3ZnPg=="); background-size: 75%; background-repeat: no-repeat; background-position: center; background-color: var(--art-bg); }
.po-art img     { width: 58px; height: 58px; object-fit: cover; display: block; color: transparent; }
.po-info        { vertical-align: top; padding: 12px 0 12px 14px; overflow: hidden; display: flex; flex-direction: column; }
.po-rec-title   { font-size: var(--title-size); font-weight: 400; line-height: 1.2; color: var(--ink); letter-spacing: .02em; text-transform: var(--title-transform); transition: color .1s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; }
.po-rec-artist  { font-size: var(--artist-size) !important; font-weight: 600; line-height: 1.3; color: var(--ink45); letter-spacing: var(--artist-tracking) !important; margin-top: 2px; text-transform: var(--artist-transform) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; }
.po-row:hover .po-rec-title { color: var(--ink55); }
.po-actions     { width: 44px; vertical-align: middle; padding-left: 12px; }
.po-rec-meta    { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.po-rec-format  { font-size: 7px; color: var(--ink45); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.po-preview-btn { font-family: var(--fn-title); font-size: 8px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink45); background: none; border: none; cursor: pointer; padding: 0; display: block; margin-top: 0; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ink30); transition: color .1s; }
.po-preview-btn:hover, .po-preview-btn.is-playing { color: var(--ink); text-decoration-color: var(--ink); }
.po-cart-btn    { width: 26px; height: 26px; border: 1px solid var(--ink30); background: transparent; color: var(--ink); font-size: 17px; font-weight: 300; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .1s, color .1s, border-color .1s; }
.po-cart-btn:hover:not(.is-in-cart):not(.is-checked) { border-color: var(--ink); }
.po-cart-btn.is-in-cart, .po-cart-btn.is-checked { background: var(--ink); color: var(--bg); border-color: var(--ink); }

body.view-checkout .preorder-tag,
body.view-success  .preorder-tag,
body.view-preorder .preorder-tag { display: none; }

@keyframes po-bracket { 0%, 49% { opacity: 1; } 50%, 99% { opacity: 0; } 100% { opacity: 1; } }

/* ── Tracklist ───────────────────────────────────────────── */
.album-tracklist   { display: none; padding-top: 14px; }
.album-tracklist.is-visible { display: block; }
.tl-play-btn       { font-family: var(--fn-title); font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink45); background: none; border: none; cursor: pointer; display: block; padding: 0 0 10px; width: 100%; text-align: left; transition: color .1s; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ink30); }
.tl-play-btn:hover, .tl-play-btn.is-playing { color: var(--ink); text-decoration-color: var(--ink); }
.tl-divider        { display: none; }
#tlTracks          { display: block; }
.tl-unit           { display: block; padding: 4px 0; }
.tl-track-sep      { display: none; }
.tl-track-btn      { font-family: 'Inter', system-ui, sans-serif; font-size: 11px; font-weight: 400; color: var(--ink45); background: none; border: none; cursor: default; padding: 0; text-align: left; pointer-events: none; display: block; width: 100%; line-height: 1.4; }
.tl-track-lbl      { font-family: 'Inter', system-ui, sans-serif; font-size: 11px; font-weight: 400; color: var(--ink45); display: block; line-height: 1.4; }

/* ── Image viewer ───────────────────────────────────────── */
.img-viewer        { display: none; position: fixed; top: 0; bottom: 0; left: max(0px, calc(50vw - 445px)); right: max(0px, calc(50vw - 445px)); z-index: 600; background-color: var(--bg); cursor: pointer; align-items: center; justify-content: center; padding: 30px; }
.img-viewer.is-open { display: flex; }
.img-viewer img    { max-width: 100%; max-height: calc(100vh - 60px); width: 100%; height: auto; display: block; object-fit: contain; }

/* ── Related ────────────────────────────────────────────── */
.related-section   { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border-mid); }
.related-title     { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink45); margin: 0 0 16px; font-weight: 500; }
.related-grid      { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.related-card      { display: block; text-decoration: none; color: var(--ink); }
.related-cover     { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; transition: opacity .2s; }
.related-card:hover .related-cover { opacity: .72; }
.related-placeholder{ width: 100%; aspect-ratio: 1/1; background: var(--art-bg); display: flex; align-items: center; justify-content: center; }
.related-info      { margin-top: 7px; }
.related-name      { font-size: var(--title-size); font-weight: 400; line-height: 1.2; margin: 0; word-break: break-word; text-transform: var(--title-transform); letter-spacing: .02em; }
.related-artist    { font-size: var(--artist-size) !important; font-weight: 600; line-height: 1.3; color: var(--ink45); margin-top: 2px; text-transform: var(--artist-transform) !important; letter-spacing: var(--artist-tracking) !important; }

/* ── Shared: page-title, order items ───────────────────── */
.page-title   { font-size: 26px; font-weight: 600; margin-bottom: 32px; letter-spacing: -.01em; color: var(--ink); }
.section-label{ font-size: 11px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: var(--ink55); margin-bottom: 20px; }
.order-item   { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.order-item-left  { flex: 1; min-width: 0; }
.order-item-title { font-size: var(--title-size); font-weight: 400; line-height: 1.2; color: var(--ink); word-break: break-word; text-transform: none; letter-spacing: .02em; }
.order-item-meta  { font-size: 11px; color: var(--ink55); margin-top: 2px; }
.order-item-price { font-size: 14px; font-weight: 500; white-space: nowrap; flex-shrink: 0; color: var(--ink); }
.order-divider    { border-top: 1px solid var(--border-mid); margin: 14px 0; }
.order-total      { display: flex; justify-content: space-between; font-weight: 600; font-size: 18px; color: var(--ink); }

/* ── Cart view ──────────────────────────────────────────── */
#app-root.view-cart .container,
#app-root.view-checkout .container,
#app-root.view-success  .container { padding-bottom: 80px; max-width: 780px; margin: 0 auto; width: 100%; }
.cart-list        { display: flex; flex-direction: column; }
.cart-item        { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--border-mid); padding: 14px 0; }
.cart-item-details{ flex: 1; min-width: 0; }
.cart-item-title  { font-size: var(--title-size); font-weight: 400; line-height: 1.2; margin: 0; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: var(--title-transform); letter-spacing: .02em; }
.cart-item-artist { font-size: var(--artist-size) !important; font-weight: 600; line-height: 1.3; color: var(--ink45); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: var(--artist-transform) !important; letter-spacing: var(--artist-tracking) !important; }
.cart-item-right  { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.cart-item-price  { font-size: 13px; font-weight: 500; color: var(--ink); min-width: 56px; text-align: right; }
.qty-group        { display: flex; align-items: center; border: 1px solid var(--ink30); }
.qty-btn          { width: 26px; height: 26px; border: 0; background: transparent; cursor: pointer; font-size: 15px; line-height: 1; color: var(--ink); font-family: inherit; transition: background .1s; }
.qty-btn:hover    { background: var(--art-bg); }
.qty-num          { width: 24px; text-align: center; font-size: 12px; color: var(--ink); }
.remove-btn       { background: none; border: 0; padding: 0; font-size: 16px; line-height: 1; color: var(--ink30); cursor: pointer; font-family: inherit; transition: color .15s; flex-shrink: 0; }
.remove-btn:hover { color: var(--ink); }
.stock-label      { font-size: 9px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink30); margin-top: 3px; opacity: 0; transition: opacity .3s; min-height: 12px; }
.cart-summary     { margin-top: 28px; }
.summary-row      { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--border); padding-top: 16px; }
.summary-label    { font-size: 12px; color: var(--ink55); margin: 0; text-transform: uppercase; letter-spacing: .06em; font-weight: 500; }
.shipping-note    { font-size: 10px; color: var(--ink30); margin-top: 3px; }
.summary-price    { font-size: 20px; font-weight: 600; margin: 0; color: var(--ink); }
.checkout-btn     { margin-top: 14px; padding: 13px 18px; border: 1px solid var(--btn-bg); background: var(--btn-bg); color: var(--btn-fg); cursor: pointer; width: 100%; font-size: 11px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; font-family: var(--fn-title); transition: opacity .15s; }
.checkout-btn:hover { opacity: .82; }

/* ── Checkout view ──────────────────────────────────────── */
.checkout-grid    { display: grid; grid-template-columns: 1fr 320px; column-gap: 60px; align-items: start; }
.co-form-col      { grid-column: 1; grid-row: 1; }
.co-summary-col   { grid-column: 2; grid-row: 1; position: sticky; top: 88px; align-self: start; }
.form-group       { margin-bottom: 12px; }
.form-group input { border: 1px solid var(--ink15); background: transparent; color: var(--ink); font-family: var(--fn-title); font-size: 13px; padding: 9px 11px; width: 100%; box-sizing: border-box; outline: none; }
.form-group input::placeholder { color: var(--ink30); }
.form-group input:focus { border-color: var(--ink45); }
.form-row         { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.payment-note     { border-left: 2px solid var(--ink45); padding-left: 14px; margin-top: 20px; font-size: 13px; line-height: 1.7; color: var(--ink55); }
.delivery-boxes   { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 72%; margin: 12px 0 24px; }
.delivery-box     { aspect-ratio: 1/1; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 10px; border: 1px solid var(--ink15); cursor: pointer; box-sizing: border-box; overflow: hidden; min-width: 0; min-height: 0; }
.delivery-box.is-selected { border-color: var(--ink); }
.delivery-box input[type="radio"] { display: none; }
.delivery-box-name { font-size: 10px; font-weight: 600; color: var(--ink); line-height: 1.3; text-transform: uppercase; letter-spacing: .04em; }
.delivery-box-loc  { font-size: 9px; color: var(--ink45); line-height: 1.3; }
.co-items-list .co-item:first-child { border-top: 1px solid var(--ink15); }
.co-item          { display: block; padding: 14px 0; border-bottom: 1px solid var(--ink15); width: 100%; box-sizing: border-box; }
.co-item-left     { flex: 1; min-width: 0; max-width: 50%; }
.co-item-title    { font-size: var(--title-size); font-weight: 500; line-height: 1.2; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; letter-spacing: .06em; }
.co-item-artist   { font-size: var(--artist-size) !important; font-weight: 600; line-height: 1.3; color: var(--ink45); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase !important; letter-spacing: var(--artist-tracking) !important; }
.co-item-right    { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; min-width: 80px; }
.co-item-bottom   { display: flex; align-items: baseline; gap: 16px; }
.co-item-format   { font-size: 7px; font-weight: 500; color: var(--ink45); letter-spacing: .04em; text-transform: uppercase; }
.co-item-price    { font-size: 12px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.co-rm-ctrl       { display: flex; align-items: center; justify-content: flex-end; height: 16px; }
.co-rm-x          { width: 16px; height: 16px; background: var(--btn-bg); color: var(--btn-fg); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; transition: opacity .1s; }
.co-rm-x:hover    { opacity: .72; }
.co-rm-confirm    { height: 16px; padding: 0 7px; background: var(--btn-bg); color: var(--btn-fg); border: none; cursor: pointer; font-family: inherit; font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; transition: opacity .1s; }
.co-rm-confirm:hover { opacity: .72; }
.co-divider       { border: none; border-top: 1px solid var(--ink10); margin: 16px 0; }
.co-summary-row   { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; font-weight: 300; color: var(--ink55); width: 100%; }
.co-total-row     { display: flex; justify-content: space-between; padding: 10px 0 4px; font-size: 13px; font-weight: 500; color: var(--ink); border-top: 1px solid var(--ink15); margin-top: 8px; width: 100%; }
.co-complete-wrap { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--ink10); }
.complete-btn     { padding: 14px 18px; border: 1px solid var(--btn-bg); background: var(--btn-bg); color: var(--btn-fg); cursor: pointer; font-family: var(--fn-title); font-size: 11px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; width: 100%; transition: opacity .15s; }
.complete-btn:hover    { opacity: .82; }
.complete-btn:disabled { opacity: .5; cursor: not-allowed; }
.shipping-mobile  { display: none; }

/* ── Success view ───────────────────────────────────────── */
.success-layout   { display: grid; grid-template-columns: 1fr 380px; column-gap: 60px; align-items: start; }
.order-meta       { border-top: 1px solid var(--border-mid); display: grid; grid-template-columns: 1fr 1fr; }
.meta-cell        { padding: 16px 0; border-bottom: 1px solid var(--border-mid); }
.meta-cell.left   { padding-right: 28px; border-right: 1px solid var(--border-mid); }
.meta-cell.right  { padding-left: 28px; }
.meta-label       { font-size: 9px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink30); margin-bottom: 5px; }
.meta-value       { font-size: 13px; color: var(--ink); line-height: 1.55; }
.meta-value.amount{ font-size: 24px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; font-family: var(--font-data); }
.view-summary-btn { width: 100%; background: var(--art-bg); border: none; border-bottom: 1px solid var(--ink15); padding: 14px 16px; cursor: pointer; font-family: 'Inter', system-ui, sans-serif; text-align: left; margin-top: 20px; transition: background .15s; display: block; }
.view-summary-btn:hover { background: var(--ink15); }
.vsb-inner  { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.vsb-label  { font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink55); }
.vsb-arrow  { font-size: 14px; color: var(--ink30); transition: transform .15s; }
.vsb-arrow.open { transform: rotate(90deg); }
.payment-section { margin-top: 32px; }
.payment-body { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: start; margin-bottom: 28px; }
.payment-left { display: flex; flex-direction: column; width: 40%; min-width: 180px; }
.timer-label  { font-size: 9px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink30); margin-bottom: 8px; }
.countdown    { font-size: 36px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); line-height: 1; margin-bottom: 10px; font-family: var(--font-data); }
.countdown.is-expired { font-size: 16px; color: var(--ink45); }
.timer-note   { font-size: 11px; color: var(--ink45); line-height: 1.65; margin-bottom: 16px; }
.wallet-logos-wrap { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.wallet-logo  { display: block; width: auto; flex-shrink: 0; filter: grayscale(100%) opacity(0.38); }
html.dark .wallet-logo { filter: grayscale(100%) invert(1) opacity(0.6); }
.qr-block     { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.qr-img       { width: 150px; display: block; object-fit: cover; }
.qr-download  { font-size: 9px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink30); cursor: pointer; font-family: inherit; background: none; border: none; padding: 0; text-decoration: underline; transition: color .1s; }
.qr-download:hover { color: var(--ink55); }
.order-note   { font-size: 12px; color: var(--ink45); line-height: 1.8; padding-left: 12px; border-left: 1px solid var(--ink15); }
.summary-panel{ display: none; padding-left: 30px; }
.summary-panel.is-open { display: block; }
.modal-overlay{ display: none; position: fixed; inset: 0; z-index: 300; background: rgba(10,10,8,.82); align-items: center; justify-content: center; padding: 40px 24px; }
.modal-overlay.is-open { display: flex; }
.modal-dialog { width: 100%; max-width: 380px; background-color: var(--bg); border: 2px solid var(--border); max-height: calc(100vh - 80px); overflow-y: auto; }
.modal-close-row { display: flex; align-items: center; justify-content: flex-end; padding: 12px 16px 0; }
.modal-close  { background: var(--ink15); border: 0; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: var(--ink); cursor: pointer; font-family: var(--fn-title); font-weight: 400; line-height: 1; transition: background .1s; }
.modal-close:hover { background: var(--btn-bg); color: var(--btn-fg); }
.modal-body   { padding: 20px 28px 36px; }

/* ── Genre view ─────────────────────────────────────────── */
#app-root.view-genre .container { max-width: 780px; margin: 0 auto; padding: 84px 30px 104px; }
.genre-nav-label { font-size: 11px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: var(--ink45); margin-bottom: 12px; display: block; }
.genre-nav-block { position: relative; margin-bottom: 10px; }
.genre-pills-shell { position: relative; overflow: hidden; transition: max-height .18s ease; padding-right: 26px; }
.genre-pills  { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.genre-pill   { font-size: 7px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; border: 1px solid var(--border-tag); padding: 2px 6px; color: var(--ink55); cursor: pointer; transition: color 0.1s linear, background 0.1s linear, border-color 0.1s linear; text-decoration: none; display: inline-block; line-height: 1.4; background: none; }
.genre-pill:hover { color: var(--ink); border-color: var(--ink); }
.genre-pill.active { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }
.genre-nav-toggle { position: absolute; right: 0; bottom: 0; background: var(--ink15); border: 0; width: 18px; height: 18px; display: none; align-items: center; justify-content: center; font-size: 13px; color: var(--ink); cursor: pointer; font-family: 'Inter', system-ui, sans-serif; font-weight: 400; line-height: 1; z-index: 2; }
.genre-nav-toggle.is-visible { display: inline-flex; }
.empty-state  { padding: 60px 0; font-size: 13px; color: var(--ink30); letter-spacing: .02em; }
.guide-footer { position: fixed; left: 0; right: 0; bottom: 0; height: 34px; background: var(--footer-bg, rgba(226,226,226,.92)); border-top: 1px solid var(--footer-border, rgba(26,26,20,.14)); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: 9998; display: none; }
body.view-genre .guide-footer { display: block; }
body.player-active.view-genre .guide-footer { bottom: 66px; }
.guide-footer-inner { max-width: 780px; height: 100%; margin: 0 auto; padding: 0 30px; display: flex; align-items: center; justify-content: flex-end; }
.guide-btn    { background: transparent; color: var(--ink55); font-family: var(--fn-title); font-size: 9px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; padding: 0; border: none; cursor: pointer; user-select: none; display: inline-flex; align-items: center; opacity: .72; transition: opacity .12s linear, color .12s linear; }
.guide-btn:hover { opacity: 1; color: var(--ink); }
.guide-modal  { position: fixed; inset: 0; background: rgba(0,0,0,.18); backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); display: none; align-items: center; justify-content: center; z-index: 9999; padding: 20px; }
.guide-modal.is-open { display: flex; }
.guide-modal-inner { background: var(--modal-bg, rgba(233,233,233,.97)); border: 1px solid var(--border); width: 100%; max-width: 390px; font-family: var(--fn-title); position: relative; }
.guide-modal-body { padding: 16px 20px; }
.guide-heading-wrap { margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--border-mid); }
.guide-subheading { font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ink30); }
.guide-row    { display: grid; grid-template-columns: 56px 1fr 22px; gap: 12px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--border-mid); }
.guide-row:last-child { border-bottom: none; }
.guide-format { font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--ink); font-family: var(--font-data); }
.guide-desc   { font-size: 12px; font-weight: 400; color: var(--ink55); line-height: 1.45; }
.guide-index  { text-align: right; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink15); }

/* ── Skeleton ───────────────────────────────────────────── */
.sk { background: linear-gradient(90deg, rgba(0,0,0,.07) 25%, rgba(0,0,0,.13) 50%, rgba(0,0,0,.07) 75%); background-size: 200% 100%; animation: sh 1.4s infinite; display: inline-block; }
html.dark .sk { background: linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.10) 50%, rgba(255,255,255,.05) 75%); background-size: 200% 100%; }
@keyframes sh { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }


/* ── Responsive ─────────────────────────────────────────── */
@media (min-width: 601px) {
  body { zoom: 1.30; }
}
@media (max-width: 900px) {
  col.c-format, col.c-stock { display: none; }
  .tbl thead th.c-format, .tbl thead th.c-stock,
  .tbl tbody td.c-format, .tbl tbody td.c-stock { display: none; }
  col.c-art    { width: 32px; }
  col.c-genre  { width: 100px; }
  .tbl thead th.c-genre, .tbl tbody td.c-genre { text-align: right; padding-right: 0; }
  .rec-art-wrap { width: 32px; height: 32px; }
  .album-page      { display: flex; flex-direction: column; }
  .album-image-wrap { width: 100%; position: static; grid-column: unset; grid-row: unset; }
  #app-root.view-album .container { padding-top: calc(74px + 22px); }
  .album-title-col { padding-bottom: 16px; }
  .album-img-track { flex-direction: row; gap: 4px; }
  .album-img-slide { flex: 1; min-width: 0; }
  .related-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .checkout-grid    { grid-template-columns: 1fr; gap: 0; }
  .co-form-col      { grid-column: 1; grid-row: 2; margin-top: 40px; }
  .co-summary-col   { grid-column: 1; grid-row: 1; position: static; }
  .shipping-mobile  { display: block; }
  .shipping-desktop { display: none; }
  .delivery-boxes   { width: 75%; }
  .delivery-box     { padding: 8px; }
  .delivery-box-name { font-size: 8px; letter-spacing: 0; }
  .delivery-box-loc  { font-size: 7px; }
  .success-layout { grid-template-columns: 1fr; }
  .summary-panel  { padding-left: 0; }
  #player-progress-wrap { display: none; }
}
@media (max-width: 600px) {
  body { zoom: 1.30; }
  .sold-log-grid { grid-template-columns: 1fr; }
  .sold-log-col:first-child,
  .sold-log-col:last-child { padding: 0; }
  #app-root.view-catalog .bottom-section { padding-left: 20px; padding-right: 20px; }
  #app-root.view-catalog { gap: 16px; }
  .carousel-section { margin-top: calc(74px + 10px); }
  .card-arrow { font-size: 20px; }
  .carousel-viewport { height: 150px; }
  .card-inner { padding: 16px 20px 10px; }
  .card-top   { padding-right: 20px; }
  .carousel-nav { bottom: 10px; right: 20px; }
  .carousel-seg-bar { padding: 0 20px; }
  #app-root.view-catalog .container { margin-left: 20px; margin-right: 20px; width: auto; padding: 4px 0 16px; }
  .tag-cloud { margin-top: 0; }
  .az-nav { padding: 6px 0; display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px 0; }
  .az-letter { padding: 5px 0; min-width: unset; text-align: center; }
  .search-bar-inner { padding: 0 20px; }
  .search-count { display: none; }
  .price-block  { margin-top: 16px; padding-top: 16px; }
  .description-block { margin-top: 16px; }
  .album-tracklist { margin-top: 16px; padding-top: 12px; }
  .page-title  { font-size: 22px; }
  .countdown   { font-size: 26px; }
  #player-track { display: none; }
  body.view-genre .tbl thead { display: none; }
  body.view-genre .tbl td.c-format,
  body.view-genre .tbl td.c-stock { display: none; }
  .po-art           { width: 40px; }
  .po-art img       { width: 40px; height: 40px; }
  .po-rec-title     { max-width: 100%; }
  .po-rec-artist    { max-width: 100%; }
}

/* ── Prototype (/prototype) ─────────────────────────── */
.view-proto { background: var(--bg); }

.proto-wrap { display: flex; flex-direction: column; margin-top: calc(74px + 0px); max-width: var(--max-w); margin-left: auto; margin-right: auto; }

/* Hero — static featured (1 mobile, 2 desktop) */
.proto-hero        { padding: 24px var(--pad-h) 10px; }
.proto-featured    { display: flex; gap: 0; }
.proto-feat-item   { display: flex; flex: 1; gap: 16px; align-items: flex-start; cursor: pointer; min-width: 0; }
.proto-feat-item + .proto-feat-item { display: none; border-left: 1px solid var(--border-mid); margin-left: 24px; padding-left: 24px; }
.proto-feat-thumb  { flex-shrink: 0; width: 160px; height: 160px; background: var(--ink15); overflow: hidden; }
.proto-feat-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.proto-feat-info   { flex: 1; min-width: 0; padding-top: 2px; }
.proto-feat-title  { font-size: var(--title-size); font-weight: 400; letter-spacing: .02em; text-transform: uppercase; line-height: 1.2; margin-bottom: 2px; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.proto-feat-artist { font-size: var(--artist-size); font-weight: 600; letter-spacing: var(--artist-tracking); text-transform: var(--artist-transform); color: var(--ink55); margin-bottom: 10px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.proto-feat-tags   { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 10px; }
.proto-feat-tag    { font-size: 7px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; border: 1px solid var(--border-tag); padding: 2px 6px; color: var(--meta-color); }
.proto-feat-meta   { font-size: 7px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--ink30); }

/* Sticky A-Z bar */
.proto-bar          { position: sticky; top: 74px; z-index: 90; background: var(--bg); display: flex; align-items: center; gap: 12px; padding: 0 30px; margin-top: 8px; }
/* Divider aligned to content — not the raw element edge */
.proto-bar::after   { content: ''; position: absolute; bottom: 0; left: var(--pad-h); right: var(--pad-h); height: 1px; background: var(--border-mid); }
/* Pre-order header bar — suppress bottom divider (it's a title row, not a list separator) */
.po-header-bar::after { display: none; }
/* Match vertical breathing room of home A-Z bar */
.po-header-bar { padding-top: 9px; padding-bottom: 9px; }
.proto-az           { display: flex; overflow-x: auto; scrollbar-width: none; flex: 1; padding: 9px 0; gap: 6px; }
.proto-az::-webkit-scrollbar { display: none; }
.proto-az-l         { font-size: 13px; font-weight: 400; letter-spacing: .04em; color: var(--ink15); padding: 3px 5px; cursor: default; flex-shrink: 0; line-height: 1; transition: color .12s, background .12s; border-radius: 3px; }
.proto-az-l.live    { color: var(--ink30); cursor: pointer; }
.proto-az-l.live:hover { color: var(--ink45); }
.proto-az-l.cur     { color: var(--ink45); background: var(--ink15); }
.proto-toggle       { display: flex; flex-shrink: 0; border: 1px solid var(--border-mid); }
.proto-toggle-btn   { font-size: 9px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; padding: 5px 11px; background: none; border: none; color: var(--ink45); cursor: pointer; font-family: inherit; line-height: 1; }
.proto-toggle-btn.on { background: var(--ink); color: var(--bg); }

/* Section letter divider */
.proto-letter-head  { position: relative; padding: 14px 30px 5px; font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink20); }
.proto-letter-head::before { content: ''; position: absolute; top: 0; left: var(--pad-h); right: var(--pad-h); height: 1px; background: var(--border-mid); }
.proto-letter-head:first-child::before { display: none; }

/* Grid view */
.proto-grid-group   { display: grid; grid-template-columns: repeat(4, 1fr); padding: 0 var(--pad-h); gap: 12px; }
.proto-cell         { cursor: pointer; overflow: hidden; }
.proto-cell-img     { aspect-ratio: 1/1; background: var(--ink08); overflow: hidden; }
.proto-cell-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.proto-cell-foot    { padding: 6px 0 8px 0; display: flex; align-items: flex-end; gap: 5px; }
.proto-cell-text    { flex: 1; min-width: 0; }
.proto-cell-icon    { flex-shrink: 0; font-size: 13px; font-weight: 400; color: var(--ink30); line-height: 1; letter-spacing: 0; }
.proto-cell-title   { font-size: var(--title-size); font-weight: 400; letter-spacing: .02em; text-transform: uppercase; color: var(--ink); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proto-cell-artist  { font-size: var(--artist-size); font-weight: 600; letter-spacing: var(--artist-tracking); text-transform: var(--artist-transform); color: var(--ink45); margin-top: 2px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* List view */
.proto-list-row     { position: relative; display: flex; align-items: center; gap: 14px; padding: 9px 30px; cursor: pointer; transition: background .08s; }
.proto-list-row::after  { content: ''; position: absolute; bottom: 0; left: var(--pad-h); right: var(--pad-h); height: 1px; background: var(--border-mid); }
/* First row top border (pre-order list) — aligned to content, not viewport edge */
.proto-list-first::before { content: ''; position: absolute; top: 0; left: var(--pad-h); right: var(--pad-h); height: 1px; background: var(--border-mid); }
.proto-list-row:hover { background: var(--ink05); }
.proto-list-thumb   { width: 44px; height: 44px; object-fit: cover; background: var(--ink10); flex-shrink: 0; display: block; }
.proto-list-info    { flex: 1; min-width: 0; }
.proto-list-title   { font-size: var(--title-size); font-weight: 400; line-height: 1.2; letter-spacing: .02em; text-transform: uppercase; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proto-list-artist  { font-size: var(--artist-size); font-weight: 600; line-height: 1.3; letter-spacing: var(--artist-tracking); text-transform: var(--artist-transform); color: var(--ink45); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proto-list-meta    { font-size: 7px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--ink30); flex-shrink: 0; text-align: right; }

/* Sold strip */
.proto-sold         { padding: 20px 30px 32px; }
.proto-sold-label   { font-size: 9px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink30); margin-bottom: 10px; }
.proto-sold-strip   { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.proto-sold-strip::-webkit-scrollbar { display: none; }
.proto-sold-item    { flex-shrink: 0; width: 82px; height: 82px; overflow: hidden; cursor: pointer; background: var(--ink10); }
.proto-sold-item img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 1; transition: opacity .15s; }
.proto-sold-item:hover img { opacity: .75; }

/* Tag-cloud border inside proto-wrap — inset to match content padding, not viewport edge */
.proto-wrap .tag-cloud { border-top: none; position: relative; }
.proto-wrap .tag-cloud::before { content: ''; position: absolute; top: 0; left: var(--pad-h); right: var(--pad-h); height: 1px; background: var(--border-mid); }

@media (min-width: 601px) {
  .proto-feat-item + .proto-feat-item { display: flex; margin-left: 0; border-left: none; padding-left: 0; }
  .proto-featured { width: 100%; }
  .proto-feat-thumb { width: 171px; height: 171px; }
  .proto-feat-info  { max-width: 45%; overflow: hidden; }
}

@media (max-width: 600px) {
  .proto-hero       { padding: 20px var(--pad-h) 8px; }
  .proto-feat-thumb { width: calc(50% - 6px); height: auto; aspect-ratio: 1/1; }

  .proto-bar        { padding: 0 20px; margin-top: 6px; }
  .proto-az         { gap: 4px; }
  .proto-az-l       { font-size: 11px; }
  .proto-grid-group { grid-template-columns: repeat(2, 1fr); padding: 0 var(--pad-h); }
  .proto-list-row   { padding: 9px 20px; }
  .proto-sold       { padding: 16px 20px 28px; }
}