/* ============================================================================
   AmbySound — layout.ambysound.css · SOFT ARCHIVE v2 structural layer
   Loaded THIRD: ds.shadcn.css → tokens.ambysound.css → this.

   Це НЕ борг DS — це бренд-компоновка. Master-motif рішення v2: сторінка має
   рівно ДВІ структури — вільний masthead на полотні і ПАНЕЛЬ (одна плита,
   волосяні лінії всередині) для всього браузинг-контенту. Плаваючих пігулок
   у сітці зі зсувом більше немає: вирівняний список У панелі — це і є
   «архівність» референсу. Пігулка лишається формою КОНТРОЛІВ, не рядків.

     §0  ритм сторінки + бренд-поверхні (E-3: тінь замість границі)
     §1  хром — текстова навігація з крапкою, ghost-іконки, футер-плита
     §2  masthead — двотонний h1 зліва, плаваючий арт-обʼєкт справа, wash-смуга
     §3  panel + panel-head + panel-cell — головний мотив
     §4  shelf — рядки бібліотек усередині панелі; PlayPill; ghost-дії
     §5  cat-index — категорії текстовим індексом у голові панелі
     §6  entry — комірки журналу (CellMeta: два фіксовані мікрорядки)
     §7  дрібні брендові контракти (chip active, ListHeader, MetaChip,
         KeyValueRow, EmptyState-глиф) — споживаються всіма 12 сторінками
   ============================================================================ */

/* ---------------------------------------------------------------------------
   §0 — ритм: дві величини, не одна (slop F-3). Бренд-поверхні: жодна
        елевація не носить границю І тінь разом (E-3).
   --------------------------------------------------------------------------- */
.section { padding-block: var(--space-12); }
.section + .section { padding-top: var(--section-gap-loose); }
.section + .section.-tight { padding-top: var(--section-gap-tight); }
/* full-bleed: --container = 100%, колонку тримають самі гаттери */
@media (min-width: 1280px) { .container { padding-inline: var(--space-12); } }
.section-head { align-items: center; margin-bottom: var(--space-6); }
.section-head h2 { font-size: clamp(1.375rem, 2.5vw, 1.75rem); }
.section-head .btn-link { color: var(--muted-foreground); font-weight: 500; }
.section-head .btn-link:hover { color: var(--foreground); }
@media (max-width: 1023px) {
  .section { padding-block: var(--space-8); }
  .section + .section { padding-top: var(--space-10); }
}

/* тінь — єдина елевація бренду; DS-дефолт «границя + тінь» знімається */
.card, .search-panel, .support-panel, .currency-menu { border-color: transparent; }
.btn-outline { background: var(--card); border-color: transparent; box-shadow: var(--shadow-sm); }
.btn-outline:hover { background: var(--card); box-shadow: var(--shadow-md); }
/* решітки/таблиці — волосяна лінія --line, не border-токен форм */
.table-wrap { border-color: var(--line); }

/* ---------------------------------------------------------------------------
   §1 — ХРОМ. Навігація — текст + крапка (одна система маркера активного
        на весь бренд: nav, cat-index, account-таби).
   --------------------------------------------------------------------------- */
.site-nav { gap: var(--space-1); }
.site-nav a {
  position: relative; border: 0; border-inline: 0; padding-inline: var(--space-4);
  background: transparent; color: var(--muted-foreground); font-weight: 500;
}
.site-nav a:hover { background: transparent; color: var(--foreground); }
.site-nav a[aria-current='page'] { background: transparent; color: var(--foreground); font-weight: 600; }
.site-nav a[aria-current='page']::after {
  content: ''; position: absolute; left: 50%; bottom: 0.25rem; translate: -50% 0;
  width: 4px; height: 4px; border-radius: 999px; background: var(--primary-ink);
}
.site-header .btn-icon { background: transparent; border-color: transparent; color: var(--muted-foreground); }
.site-header .btn-icon:hover { color: var(--foreground); }
.header-pair .cart-btn { color: var(--foreground); }

/* футер закривається найбільшою пігулкою сторінки — та сама мова форм */
.site-footer {
  margin-inline: var(--space-4);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  overflow: hidden;
}
@media (min-width: 1024px) { .site-footer { margin-inline: var(--space-6); } }

/* ---------------------------------------------------------------------------
   §2 — MASTHEAD. Двотонний h1 (той самий шрифт, колір половини рядка),
        ЄДИНА wash-смуга сторінки, справа — реальний обʼєкт: безкоштовна
        бібліотека місяця як плаваючий арт із -filled PlayPill.
        Привид-слово і eyebrow видалені (slop C-3/C-5/C-6).
   --------------------------------------------------------------------------- */
.masthead {
  display: grid; gap: var(--space-8); align-items: center;
  padding: var(--space-10) var(--space-6);
  background: var(--wash-accent); border-radius: var(--radius-2xl);
  text-align: left; overflow: visible;
}
.masthead h1 {
  max-width: 15ch;
  font-size: clamp(2.25rem, 5.5vw, 3.75rem); line-height: 1.05; letter-spacing: -0.03em;
}
.masthead h1 .dim { color: var(--muted-foreground); }
.masthead p { margin-top: var(--space-4); max-width: 44ch; font-size: var(--text-lg); color: var(--muted-foreground); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.hero-actions .btn { height: 3rem; padding-inline: var(--space-8); }
@media (min-width: 1024px) {
  .masthead { grid-template-columns: 1.15fr 0.85fr; padding: var(--space-12) var(--space-10); }
}
@media (max-width: 640px) {
  .masthead { padding: var(--space-8) var(--space-5); }
  .masthead p { font-size: var(--text-base); }
  .hero-actions .btn { height: 2.75rem; padding-inline: var(--space-6); }
}

/* арт-обʼєкт masthead-а: hue-панель з вейвформою, лежить над wash-смугою */
.masthead-art { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.masthead-art .post-cover { aspect-ratio: 16 / 10; border-radius: var(--radius-lg); box-shadow: var(--shadow-float); }
.masthead-art-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.masthead-art-name { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.masthead-art-name .row-title { font-weight: 600; }
.masthead-art-name .muted { font-size: var(--text-sm); }

/* ---------------------------------------------------------------------------
   §3 — PANEL: головний мотив. Одна плита, всередині — волосяні лінії.
   --------------------------------------------------------------------------- */
.panel {
  background: var(--panel); border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.panel.-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .panel.-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .panel.-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* лінії решітки — inset-тінями, не border: не подвоюються на стику,
   а крайні зрізає overflow контейнера */
.panel-cell {
  padding: var(--space-5);
  box-shadow: inset -1px 0 0 var(--line), inset 0 -1px 0 var(--line);
}
@media (min-width: 1024px) { .panel-cell { padding: var(--space-6); } }

/* голова панелі — зона індексу/заголовків списку */
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
  padding: var(--space-4) var(--space-5);
  box-shadow: inset 0 -1px 0 var(--line);
}

/* ---------------------------------------------------------------------------
   §4 — SHELF: картки товару = плаваючі pill-картки у 2 колонки (референс
        voice-library). Анатомія: [кругла play/pause] [назва+саб]
        [вейвформа — лише коли грає] [buy-pair: $price | +].
        `.shelf.-list` — однcolonкова версія для леджерів (кошик).
   --------------------------------------------------------------------------- */
.shelf { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
@media (min-width: 900px) { .shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); } }
.shelf.-list { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }

.shelf-item {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-2); padding-left: var(--space-2);
  background: var(--card); border-radius: var(--radius-pill);
  box-shadow: var(--shadow-float);
  transition: background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.shelf-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-float-hover); }
/* стан «грає» (референс): плита темнішає, текст поступається вейвформі,
   висота картки НЕ змінюється — її тримає кругла кнопка */
.shelf-item:has([aria-pressed='true']) { background: var(--muted); box-shadow: var(--shadow-sm); }
.shelf-item:has([aria-pressed='true']):hover { transform: none; }
.shelf-item:has([aria-pressed='true']) .shelf-body { display: none; }
.shelf-item:has([aria-pressed='true']) .shelf-wave { display: flex; }
.shelf-item:has([aria-pressed='true']) .shelf-time { display: inline; }

/* кругла play/pause — замість аватарки з референсу */
.shelf-play {
  width: 3.5rem; height: 3.5rem; flex: none; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--primary-soft); color: var(--primary-ink);
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.shelf-play:hover { background: var(--primary); color: var(--primary-foreground); }
.shelf-play svg { width: 1.25rem; height: 1.25rem; margin-left: 2px; }
.shelf-play[aria-pressed='true'] { background: var(--primary); color: var(--primary-foreground); }
.shelf-play[aria-pressed='true'] svg { margin-left: 0; }
@media (pointer: coarse) { .shelf-play { min-width: 2.75rem; min-height: 2.75rem; } }

/* арт-сквіркл — лишається для леджер-рядків (кошик); карткам товару не потрібен */
.shelf-art {
  width: 3.5rem; height: 3.5rem; aspect-ratio: 1; flex: none;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.shelf-body { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; flex: 1; }
.shelf-name { font-size: var(--text-base); font-weight: 600; letter-spacing: -0.015em; }
.shelf-name a:hover { color: var(--primary-ink); }
.shelf-meta {
  font-size: var(--text-sm); color: var(--muted-foreground);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* вейвформа живе лише в стані «грає» — заступає текст (референс) */
.shelf-wave { display: none; flex: 1; height: 1.75rem; align-items: center; gap: 3px; min-width: 0; overflow: hidden; }
.shelf-wave i { flex: 0 0 2px; height: var(--h, 40%); background: var(--wave-fill); border-radius: 999px; }
.shelf-wave i.-on { background: var(--primary-ink); }
.shelf-time { display: none; font-size: var(--text-xs); color: var(--muted-foreground); flex: none; }

/* buy-pair [ $price | + ] — подвійний контрол, той самий ідіом, що cart+currency */
.buy-pair {
  display: inline-flex; align-items: center; flex: none;
  height: 3rem; border-radius: 999px; background: var(--muted); overflow: hidden;
}
.shelf-item:has([aria-pressed='true']) .buy-pair { background: var(--card); }
.buy-pair .price { padding-inline: var(--space-4) var(--space-3); font-size: var(--text-sm); }
.buy-pair .price.-old { display: none; }
.buy-pair button {
  width: 3rem; height: 3rem; display: grid; place-items: center;
  border-left: 1px solid var(--border-strong); color: var(--foreground);
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.buy-pair button:hover { background: var(--primary); color: var(--primary-foreground); border-left-color: transparent; }
.buy-pair button svg { width: 1.125rem; height: 1.125rem; }

/* під 640px картка переносить [ $price | + ] на власний рядок: у гумовому
   рядку підпис бібліотеки обрізався на середині слова («Impulse Respons…»).
   Пігулка на двох рядках дала б капсулу-таблетку, тож форма стає карткою. */
@media (max-width: 639px) {
  .shelf-item {
    flex-wrap: wrap;
    row-gap: var(--space-3);
    border-radius: var(--radius-surface);
    padding: var(--space-4);
  }
  .shelf-body { flex: 1 1 60%; }
  .buy-pair { margin-left: auto; }
}

/* леджер-рядок (кошик): ті самі частини, легша тінь, менший радіус не потрібен */
.shelf.-list .shelf-item { box-shadow: var(--shadow-sm); }
.shelf.-list .shelf-item:hover { transform: none; box-shadow: var(--shadow-sm); }
.shelf-controls-slot { display: inline-flex; align-items: center; gap: var(--space-2); flex: none; }
.shelf-price { font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
.shelf-price .price.-old { display: none; }
.shelf-item .btn-icon[data-add], .shelf-item .btn-icon[data-remove] { color: var(--muted-foreground); }
.shelf-item .btn-icon[data-add]:hover, .shelf-item .btn-icon[data-remove]:hover { color: var(--foreground); background: var(--ghost-hover); }

/* PlayPill (лишається для masthead-арту й сторінки товару) */
.playpill {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: 2.5rem; padding-inline: var(--space-3) var(--space-4);
  border-radius: 999px; flex: none;
  background: var(--primary-soft); color: var(--primary-ink);
  font-weight: 500;
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.playpill:hover { background: var(--primary); color: var(--primary-foreground); }
.playpill.-filled { background: var(--primary); color: var(--primary-foreground); box-shadow: var(--shadow-sm); }
.playpill.-filled:hover { background: var(--primary-hover); }
.playpill svg { width: 1rem; height: 1rem; }
.playpill .playpill-time { font-size: var(--text-xs); }
.playpill[aria-pressed='true'] { background: var(--primary); color: var(--primary-foreground); }
@media (pointer: coarse) { .playpill { min-height: 2.75rem; } }

/* ---------------------------------------------------------------------------
   §5 — CAT-INDEX: категорії текстовим індексом у .panel-head. Колірних
        крапок немає — лічильник у моно, активний маркер той самий 4px.
   --------------------------------------------------------------------------- */
.cat-index { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); min-width: 0; }
.cat-index a {
  position: relative; display: inline-flex; align-items: baseline; gap: var(--space-2);
  font-size: var(--text-sm); font-weight: 500; color: var(--muted-foreground);
  padding-block: var(--space-1);
  transition: color var(--dur-base) var(--ease-out);
}
.cat-index a:hover { color: var(--foreground); }
.cat-index a[aria-current='true'] { color: var(--foreground); font-weight: 600; }
.cat-index a[aria-current='true']::after {
  content: ''; position: absolute; left: 50%; bottom: -0.125rem; translate: -50% 0;
  width: 4px; height: 4px; border-radius: 999px; background: var(--primary-ink);
}
.cat-index .count { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted-foreground); }

/* ---------------------------------------------------------------------------
   §6 — ENTRY: комірка журналу. CellMeta: рядок 1 = назва(клемп 2) + рік-моно,
        арт 4:5 плаває над коміркою, рядок 2 = мета-моно + стрілка.
   --------------------------------------------------------------------------- */
.entry { display: flex; flex-direction: column; gap: var(--space-5); transition: background-color var(--dur-base) var(--ease-out); }
.entry:hover { background: var(--background); }
.entry-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.entry-title {
  font-size: var(--text-base); font-weight: 600; line-height: 1.35; max-width: 24ch;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: calc(2 * 1.35em);
}
.entry-year { flex: none; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted-foreground); padding-top: 0.2rem; }
.entry .post-cover { aspect-ratio: 4 / 5; box-shadow: var(--shadow-float); }
.entry-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  margin-top: auto;
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted-foreground);
}
.entry-go { color: var(--foreground); display: inline-flex; }
.entry-go svg { width: 1rem; height: 1rem; }
.entry:hover .entry-go { color: var(--primary-ink); }

/* ---------------------------------------------------------------------------
   §7 — дрібні бренд-контракти, спільні для всіх 12 сторінок
   --------------------------------------------------------------------------- */

/* активний фільтр-чип: тонована пігулка, не залита (амбра-заливка = 1/вʼюпорт) */
.chip[aria-pressed='true'] { background: var(--primary-soft); border-color: transparent; color: var(--primary-ink); }
.chip .count { font-family: var(--font-mono); font-size: var(--text-xs); margin-inline-start: var(--space-2); }

/* skeleton-картка полиці — та сама пігулка тих самих пропорцій */
.skeleton.-shelf { height: 4.5rem; border-radius: var(--radius-pill); }
/* порожній стан у 2-колонковій полиці займає всю ширину */
.shelf > .empty { grid-column: 1 / -1; }

/* side-nav (account/static): та сама механіка активного, що й site-nav —
   без плити, крапка 4px зліва */
.side-nav a[aria-current='page'] { position: relative; background: transparent; color: var(--foreground); font-weight: 600; }
.side-nav a[aria-current='page']::before {
  content: ''; position: absolute; left: -0.125rem; top: 50%; translate: 0 -50%;
  width: 4px; height: 4px; border-radius: 999px; background: var(--primary-ink);
}

/* заголовки таблиць-леджерів — та сама мова, що .list-header */
.table th {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.08em; text-transform: uppercase; font-weight: 400;
}

/* широка обкладинка статті плаває, як і решта арт-обʼєктів */
.post-cover.-lg { box-shadow: var(--shadow-float); }

/* ListHeader — моно-капс колонкові підписи над рядками (catalog, account, cart) */
.list-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted-foreground);
}

/* MetaChip — дані (BPM/key/format) як волосяний чип; filled-пігулки = лише контроли */
.metachip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 0.125rem var(--space-2); border-radius: 999px;
  border: 1px solid var(--line); background: transparent;
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted-foreground);
}

/* KeyValueRow — мітка-моно зліва, значення справа (checkout, account, cart summary) */
.kv { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-1); font-size: var(--text-sm); }
.kv dt { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground); }
.kv dd { margin: 0; text-align: right; }

/* EmptyState-глиф: іконка у волосяному колі (catalog/search/cart/account/404) */
.empty { border: 0; background: var(--panel); border-radius: var(--radius-2xl); }
.empty > svg {
  width: 2.75rem; height: 2.75rem; padding: 0.75rem;
  border: 1px solid var(--line); border-radius: 999px; box-sizing: content-box;
}

/* ---------------------------------------------------------------------------
   reduced motion
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .shelf-item, .entry, .playpill, .cat-index a, .btn-outline { transition: none; }
}