/* Collections page styles — minimal, leveraging base.css */
:root {
  --am-ivory: #f8f7f3;
  --am-gold: #c9a14a;
  --am-midnight: #0b1b2b;
  --am-graphite: #1f2933;
  --am-amber: #e2c48b;
}

.container { max-width: 1200px; margin: 0 auto; padding: 1.25rem; }
.visually-hidden, .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Hero */
.collections-hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 2rem; align-items: center; padding-top: 2rem; padding-bottom: 1rem; }
.collections-hero .eyebrow { letter-spacing: .08em; text-transform: uppercase; color: var(--am-gold); font-weight: 600; }
.collections-hero h1 { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); line-height: 1.2; color: var(--am-midnight); }
.collections-hero .lede { color: var(--am-graphite); max-width: 56ch; }
.hero-ctas { display: flex; gap: .75rem; margin-top: 1rem; flex-wrap: wrap; }
.hero-media { margin: 0; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 28px rgba(11, 27, 43, .18); }
.hero-media img { width: 100%; height: auto; display: block; }

/* Buttons */
.am-btn { --_bg: transparent; --_fg: var(--am-midnight); --_bd: rgba(11,27,43,.2); appearance: none; border: 1px solid var(--_bd); background: var(--_bg); color: var(--_fg); border-radius: 999px; padding: .65rem 1rem; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; transition: all .25s ease; }
.am-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(11,27,43,.12); }
.am-btn:focus-visible { outline: 3px solid color-mix(in oklab, var(--am-gold) 60%, white); outline-offset: 2px; }
.am-btn--primary { --_bg: var(--am-midnight); --_fg: white; --_bd: var(--am-midnight); }
.am-btn--ghost { --_bg: transparent; --_fg: var(--am-midnight); --_bd: rgba(11,27,43,.25); }
.am-btn--inline { border: none; padding: 0; color: var(--am-midnight); text-decoration: underline; text-underline-offset: 3px; box-shadow: none; }

/* Search & Filters */
.search-filters { margin-top: .5rem; margin-bottom: 1.5rem; }
.filters { display: grid; gap: .75rem; background: var(--am-ivory); border: 1px solid rgba(11,27,43,.06); border-radius: 12px; padding: 1rem; }
.filter-row { display: grid; grid-template-columns: 1fr repeat(3, minmax(140px, 1fr)); gap: .75rem; align-items: end; }
.filters input[type="search"], .filters select { width: 100%; border: 1px solid rgba(11,27,43,.18); border-radius: 10px; padding: .6rem .75rem; background: white; color: var(--am-graphite); }
.filters input[type="range"] { width: 100%; }
.filter-actions { display: flex; gap: .5rem; justify-content: flex-end; }
.results-count { margin: 0; color: var(--am-graphite); font-size: .925rem; }

/* Sections */
.section-head { margin-bottom: .75rem; }
.section-head h2 { font-size: clamp(1.4rem, 1rem + 1vw, 2rem); color: var(--am-midnight); margin: 0 0 .3rem; }
.section-head p { margin: 0; color: var(--am-graphite); }

.collection-section { padding: .75rem 0 1.25rem; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.grid.grid--wide { grid-template-columns: repeat(2, 1fr); }

.collection-card { background: white; border: 1px solid rgba(11,27,43,.08); border-radius: 12px; overflow: hidden; display: grid; grid-template-rows: auto 1fr; transition: transform .25s ease, box-shadow .25s ease; }
.collection-card:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(11,27,43,.12); }
.card-media { position: relative; aspect-ratio: 4/5; overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rating-badge { position: absolute; left: .5rem; top: .5rem; background: color-mix(in oklab, var(--am-gold) 86%, white); color: #2b1f0b; font-weight: 700; padding: .25rem .5rem; border-radius: 999px; font-size: .85rem; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.card-body { padding: .75rem .9rem 1rem; }
.card-body h3 { margin: 0 0 .25rem; font-size: 1.05rem; color: var(--am-midnight); }
.card-body p { margin: 0 0 .5rem; color: var(--am-graphite); }

/* Rarity scale */
.info-slab { background: linear-gradient(180deg, rgba(226,196,139,.12), transparent); border: 1px solid rgba(11,27,43,.06); border-radius: 12px;  }
.rarity-scale { display: grid; gap: .25rem; margin: .5rem 0 0; color: var(--am-graphite); }

/* 360 Viewer */

.viewer-head { margin-bottom: .5rem; }
.viewer-frame { position: relative; background: #0b1b2b; border-radius: 12px; overflow: hidden; display: grid; place-items: center; min-height: 360px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 6px 24px rgba(11,27,43,.25); }
.viewer-frame img { max-width: min(100%, 960px); width: 100%; height: auto; transform: perspective(1200px) rotateY(0deg); will-change: transform; transition: transform .06s linear; }
.viewer-instruction { position: absolute; bottom: .5rem; right: .75rem; background: rgba(248,247,243,.85); color: var(--am-midnight); padding: .35rem .55rem; border-radius: 8px; font-size: .85rem; }

/* Gallery */
.showcase .gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.showcase figure { margin: 0; overflow: hidden; border-radius: 12px; border: 1px solid rgba(11,27,43,.06); background: white; }
.showcase img { width: 100%; height: auto; display: block; }
.showcase figcaption { padding: .5rem .75rem; color: var(--am-graphite); font-size: .95rem; }

/* Benefits & CTA */
.benefits { display: grid; gap: .25rem; padding-left: 1rem; }
.cta-slab { text-align: center; padding: 1.25rem; background: var(--am-ivory); border: 1px solid rgba(11,27,43,.06); border-radius: 12px; }
.cta-slab .am-btn { margin-top: .5rem; }

/* Responsive */
@media (max-width: 960px) {
  .collections-hero { grid-template-columns: 1fr; }
  .filter-row { grid-template-columns: 1fr; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .showcase .gallery-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .grid { grid-template-columns: 1fr; }
}