/* Existing VG shell/product layout, with image-led collection tiles and controls. */
.collections-chooser { padding: 24px 40px 64px; }
.collections-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.collections-heading { margin-bottom: 24px; }
.collections-heading h1 { font-family: 'Cormorant Garamond', serif; font-size: 2rem; }
.collections-intro { margin: 8px 0 0; font-size: .875rem; line-height: 1.5; color: var(--text-muted); }
.collections-close { display: flex; align-items: center; justify-content: center; flex: 0 0 48px; height: 48px; border: 1px solid var(--wire); border-radius: 50%; font-size: 2rem; color: var(--text); text-decoration: none; }
.collections-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.collection-tile { position: relative; display: block; aspect-ratio: 4/5; overflow: hidden; border: 1px solid var(--wire); border-radius: 8px; background: var(--surface-dim); color: #e5e5e5; text-decoration: none; box-shadow: 0 1px 4px var(--shadow); transition: box-shadow .15s; }
.collection-tile:hover { box-shadow: 0 4px 16px rgba(0,0,0,.2); }
.collection-cover { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
.collection-cover img { display: block; width: 100%; height: 100%; object-fit: contain; }
.collection-details { position: absolute; bottom: 0; left: 0; right: 0; padding: 14px 16px 18px; background: rgba(26,26,26,.74); }
.collection-title { margin: 0 0 6px; font: 600 1rem/1.3 'DM Sans', sans-serif; color: #fff; }
.collection-summary { padding-right: 36px; }
.collection-count { margin: 0 0 6px; font-size: .75rem; line-height: 1.35; color: #ccc; }
.collection-price { margin: 0; font-size: .95rem; line-height: 1.35; font-weight: 600; color: #e5e5e5; }
.collection-playlist-icon { position: absolute; right: 16px; bottom: 18px; width: 24px; height: 24px; color: #e5e5e5; }
.collection-navigation { --text: #e4e0d5; --text-muted: #aaa69c; --claret: #e8c56a; display: grid; grid-template-columns: minmax(145px, 1fr) minmax(0, 3fr) minmax(145px, 1fr); align-items: center; gap: 16px; min-height: 72px; box-sizing: border-box; margin: 8px 40px; padding: 8px 18px; background: linear-gradient(rgba(36,37,34,.4), rgba(36,37,34,.4)), #242522 url("collection-grille.svg") repeat; border: 1px solid #46463e; border-radius: 6px; box-shadow: inset 0 1px 3px rgba(0,0,0,.3); }
.collection-heading { min-width: 0; text-align: center; }
.collection-name { display: block; font-family: 'DM Sans', sans-serif; font-size: 1.125rem; font-weight: 600; line-height: 1.4; text-transform: uppercase; letter-spacing: .07em; color: var(--gold); text-decoration: none; }
.collection-forward { display: flex; align-items: center; justify-content: flex-end; gap: 18px; white-space: nowrap; }
.collection-position { font-size: .75rem; color: var(--text-muted); white-space: nowrap; }
.collection-step { display: inline-flex; align-items: center; justify-self: start; min-height: 44px; color: var(--text); font-size: .85rem; text-decoration: none; }
.collection-navigation > .collection-step:last-child { justify-self: end; text-align: right; }
a.collection-step:hover { color: var(--claret); }
a.collection-name:hover { color: var(--gold); text-decoration: underline; }
.collection-disabled { color: var(--text-muted); }
.collections-chooser a:focus-visible, .collection-navigation a:focus-visible { outline: 2px solid var(--claret); outline-offset: 3px; }
@media (max-width: 1100px) { .collections-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px) {
  .collections-chooser { padding: 20px 16px 40px; }
  .collections-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .collection-details { padding: 10px 12px 12px; }
  .collection-title { font-size: .875rem; }
  .collection-price { font-size: .8rem; }
  .collection-summary { padding-right: 28px; }
  .collection-playlist-icon { right: 12px; bottom: 12px; width: 22px; height: 22px; }
  .collection-navigation { margin: 8px 16px; padding: 8px 10px; grid-template-columns: 66px minmax(0, 1fr) 96px; gap: 8px; }
  .collection-name { font-size: .875rem; letter-spacing: .03em; }
  .collection-forward { gap: 10px; }
  .collection-position { font-size: .68rem; }
  .collection-step { font-size: .75rem; }
}
@media (max-width: 380px) { .collections-grid { grid-template-columns: minmax(0, 1fr); } }
/* Balance the header gap with the breadcrumb's existing top padding below the strip. */
.site-header + .collection-navigation { margin-top: 24px; }