/* ARC Cards and Collectibles — components */

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  --h: 48px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: var(--h);
  padding: .75rem 1.5rem;
  border-radius: 2px;
  border: 1px solid transparent;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: .75rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: transform .25s var(--ease), box-shadow .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 380px) {
  .sell-offer.btn { width: 100%; max-width: 100%; height: auto; white-space: normal; }
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn[disabled], .btn[aria-disabled="true"] { cursor: not-allowed; opacity: .45; }

/* Primary: matte gold fill, dark text */
.btn--primary, .btn--green {
  border-color: var(--btn-gold);
  color: #07090A;
  background: var(--btn-gold);
  box-shadow: 0 0 24px -6px var(--btn-gold-glow);
}
.btn--primary::after, .btn--green::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(235, 242, 248, .14) 50%, transparent 70%);
  transform: translateX(-120%);
}
.btn--primary:hover::after, .btn--green:hover::after { transform: translateX(120%); transition: transform .8s var(--ease); }
.btn--primary:hover, .btn--green:hover { background: var(--btn-gold-hi); border-color: var(--btn-gold-hi); color: #07090A; box-shadow: 0 0 0 4px var(--btn-gold-fill), 0 0 40px -4px var(--btn-gold-glow); }
.btn--primary:active, .btn--green:active { background: var(--btn-gold-deep); border-color: var(--btn-gold-deep); color: #07090A; }
.btn--primary:focus-visible, .btn--green:focus-visible { outline-color: var(--btn-gold-hi); }

/* Secondary: silver outline, white text */
.btn--secondary {
  border-color: var(--gold);
  color: var(--gold-hi);
  background: transparent;
}
.btn--secondary:hover { background: rgba(221, 225, 228, .08); border-color: var(--gold-hi); box-shadow: 0 0 28px -8px rgba(235, 242, 248, .35); }

.btn--ghost { color: var(--ivory); border-color: rgba(243, 239, 228, .18); }
.btn--ghost:hover { border-color: var(--gold-line); color: var(--gold-hi); }

.btn--block { width: 100%; }
.btn--sm { --h: 40px; padding: .5rem 1rem; font-size: .7rem; letter-spacing: .16em; }
.btn--lg { --h: 54px; padding: 1rem 1.75rem; font-size: .75rem; }

.btn.is-loading { pointer-events: none; color: transparent !important; }
.btn.is-loading::before {
  content: "";
  position: absolute;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(243, 239, 228, .3);
  border-top-color: var(--ivory);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 48px;
  color: var(--gold);
  font-weight: 600;
  border-bottom: 1px solid transparent;
}
.link-arrow:hover { color: var(--gold-hi); }
.link-arrow span { transition: transform .25s var(--ease); }
.link-arrow:hover span { transform: translateX(4px); }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  color: var(--ivory);
  transition: color .2s, background-color .2s;
  position: relative;
}
.icon-btn:hover { color: var(--gold-hi); background: rgba(243, 239, 228, .06); }
.icon-btn svg { width: 22px; height: 22px; }

/* =========================================================
   Announcement bar + header
   ========================================================= */
#site-header-slot { min-height: calc(var(--bar-h) + var(--header-h)); }
.has-hero #site-header-slot { min-height: var(--bar-h); }

.announce {
  position: relative;
  z-index: 60;
  height: var(--bar-h);
  display: grid;
  place-items: center;
  background: var(--obsidian);
  border-bottom: 1px solid rgba(221, 225, 228, .16);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ivory-dim);
  overflow: hidden;
}
.announce__msg {
  grid-area: 1 / 1;
  padding-inline: 1rem;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.announce__msg.is-active { opacity: 1; transform: none; }
.announce__msg b { color: var(--gold); font-weight: 500; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  transition: background-color .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s;
  border-bottom: 1px solid transparent;
  background: rgba(7, 9, 10, .92);
}
.has-hero .site-header { margin-bottom: calc(var(--header-h) * -1); background: transparent; }
.site-header.is-scrolled,
.has-hero .site-header.is-scrolled {
  background: rgba(15, 19, 17, .82);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: rgba(221, 225, 228, .18);
}
.site-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.site-logo { display: flex; align-items: center; flex: none; min-height: 48px; }
.site-logo img { height: 36px; width: auto; }
@media (min-width: 900px) { .site-logo img { height: 44px; } }

.site-nav { display: none; margin-inline: auto; }
.site-nav ul { display: flex; gap: .25rem; list-style: none; padding: 0; }
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 .7rem;
  font-size: .92rem;
  font-weight: 500;
  color: var(--ivory);
  position: relative;
  transition: color .2s;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: .7rem; right: .7rem; bottom: 8px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--gold-hi); }
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); }
@media (min-width: 1140px) { .site-nav { display: block; } }
@media (min-width: 1140px) and (max-width: 1320px) {
  .site-nav.has-about a { padding: 0 .42rem; font-size: .84rem; }
}

.site-actions { display: flex; align-items: center; gap: .1rem; margin-left: auto; }
@media (min-width: 1140px) { .site-actions { margin-left: 0; } .menu-toggle { display: none !important; } }

.cart-badge {
  position: absolute;
  top: 4px; right: 2px;
  min-width: 20px; height: 20px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--gold);
  color: var(--void);
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 700;
  line-height: 1;
}
.cart-badge[data-count="0"] { display: none; }
.cart-badge.is-bump { animation: bump .5s var(--ease); }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.45); } 100% { transform: scale(1); } }

/* Mobile menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  padding: calc(var(--bar-h) + 1rem) var(--gutter) 2rem;
  background:
    radial-gradient(80% 50% at 100% 0%, rgba(18, 162, 106, .16), transparent 60%),
    var(--void);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s .35s;
}
.mobile-menu.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mobile-menu__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.mobile-menu nav ul { list-style: none; padding: 0; display: grid; gap: .1rem; }
.mobile-menu nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 7vw, 2.1rem);
  letter-spacing: -.02em;
  border-bottom: 1px solid rgba(221, 225, 228, .12);
}
.mobile-menu nav a::after { content: "→"; font-family: var(--font-body); font-size: 1rem; color: var(--gold); }
.mobile-menu nav a[aria-current="page"] { color: var(--gold-hi); }
.mobile-menu__foot { margin-top: auto; padding-top: 2rem; display: grid; gap: 1rem; }
.mobile-menu__foot p { font-family: var(--font-mono); font-size: .8rem; color: var(--ivory-dim); }

body.is-locked { overflow: hidden; }

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
  position: relative;
  margin-top: var(--section-y);
  padding-top: clamp(3rem, 7vw, 5rem);
  background: linear-gradient(180deg, var(--obsidian) 0%, var(--void) 100%);
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: .7;
}
.footer-top {
  display: grid;
  gap: 2.5rem;
  padding-bottom: 3rem;
}
@media (min-width: 900px) { .footer-top { grid-template-columns: 1.1fr 2fr; gap: 4rem; } }
.footer-brand { display: grid; gap: 1.25rem; align-content: start; }
.footer-brand img { max-height: 120px; width: auto; }
.footer-cols {
  display: grid;
  gap: 2rem 1.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 720px) { .footer-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.footer-col h3 {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .75rem;
}
.footer-col ul { list-style: none; padding: 0; display: grid; gap: .1rem; }
.footer-col a, .footer-col li > span {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: var(--ivory-dim);
  font-size: .94rem;
  transition: color .2s;
}
.footer-col a:hover { color: var(--gold-hi); }
.footer-col address { font-style: normal; color: var(--ivory-dim); font-size: .94rem; display: grid; gap: .5rem; }
.footer-hours { font-family: var(--font-mono); font-size: .78rem; color: var(--ivory-dim); display: grid; gap: .15rem; margin-top: .5rem; }
.footer-hours div { display: flex; justify-content: space-between; gap: .75rem; }
.footer-hours div.is-today { color: var(--gold-hi); }
.footer-signup { display: grid; gap: .75rem; }
.footer-bottom {
  border-top: 1px solid rgba(221, 225, 228, .12);
  padding-block: 1.5rem 2rem;
  display: grid;
  gap: .75rem;
  font-size: .8rem;
  color: var(--ivory-dim);
}
@media (min-width: 900px) { .footer-bottom { grid-template-columns: 1fr auto; align-items: center; } }
.footer-bottom a { color: var(--ivory-dim); text-decoration: underline; text-decoration-color: var(--gold-line); text-underline-offset: 3px; }
.footer-bottom a:hover { color: var(--gold-hi); }
.footer-bottom .site-credit {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
}
.footer-bottom .site-credit:hover { color: var(--gold-hi); }
.site-credit__mark {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  background: radial-gradient(circle, currentColor 0 2px, transparent 2.5px);
}

/* =========================================================
   Chips / badges / stock
   ========================================================= */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 24px;
  padding: .15rem .55rem;
  border-radius: 6px;
  border: 1px solid rgba(243, 239, 228, .16);
  background: rgba(243, 239, 228, .04);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--silver);
  white-space: nowrap;
}
.chip--gold { border-color: var(--gold-line); color: var(--gold-hi); background: rgba(221, 225, 228, .07); }
.chip--grade { border-color: var(--gold); color: var(--void); background: linear-gradient(135deg, var(--gold), var(--gold-hi)); font-weight: 700; }
.chip--muted { color: var(--ivory-dim); }
.chip--sold { border-color: rgba(229, 103, 90, .4); color: #F2A79E; background: rgba(229, 103, 90, .08); }

.badge {
  position: absolute;
  z-index: 3;
  top: 10px; left: 10px;
  padding: .25rem .55rem;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.badge--new { background: var(--arc); color: var(--void); box-shadow: 0 0 0 0 var(--arc-glow); animation: pulse 2.4s var(--ease) infinite; }
.badge--preorder { background: rgba(7, 9, 10, .75); color: var(--gold-hi); border: 1px solid var(--gold); }
.badge--instock { background: rgba(7, 9, 10, .75); color: var(--arc-text); border: 1px solid var(--arc); }
.chip--instock { border-color: rgba(18, 162, 106, .6); color: var(--arc-text); background: rgba(18, 162, 106, .08); }
.badge + .badge { top: 40px; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 var(--arc-glow); }
  70% { box-shadow: 0 0 0 10px rgba(18, 162, 106, 0); }
  100% { box-shadow: 0 0 0 0 rgba(18, 162, 106, 0); }
}

.stock { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--ivory-dim); }
.stock::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--arc); box-shadow: 0 0 10px var(--arc-glow); }
.stock--low { color: var(--gold-hi); }
.stock--low::before { background: var(--gold); box-shadow: 0 0 10px rgba(221, 225, 228, .5); }
.stock--out::before { background: var(--ivory-dim); box-shadow: none; opacity: .5; }

/* =========================================================
   Product tile
   ========================================================= */
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  min-width: 0;
}
.tile__media {
  position: relative;
  display: block;
  aspect-ratio: 5 / 7;
  border-radius: var(--radius);
  border: 1px solid var(--gold-line);
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(243, 239, 228, .05), transparent 70%),
    var(--obsidian-2);
  overflow: hidden;
  transform-style: preserve-3d;
  transition: border-color .3s var(--ease), box-shadow .4s var(--ease), transform .5s var(--ease);
  will-change: transform;
}
.tile__media:hover { border-color: rgba(255, 255, 255, .7); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .9), 0 0 36px -14px rgba(221, 225, 228, .45); }
.tile__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tile--contain .tile__media img { object-fit: contain; padding: 8%; }
.tile--photo .tile__media { background: #fff; }
.tile--photo .tile__media img { padding: 7%; }
.tile__price { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .5rem; }
.price-was { font-family: var(--font-mono); font-size: .82em; opacity: .6; text-decoration-thickness: 1px; }
.tile__ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ivory-dim);
  background: repeating-linear-gradient(135deg, rgba(221, 225, 228, .04) 0 1px, transparent 1px 14px), var(--obsidian-2);
}

/* foil glare overlay (fx.js drives --mx/--my/--fo) */
.foil {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: var(--fo, 0);
  mix-blend-mode: color-dodge;
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .12) 22%, transparent 48%),
    linear-gradient(115deg,
      transparent 20%,
      rgba(255, 94, 160, .35) 32%,
      rgba(255, 255, 255, .35) 40%,
      rgba(94, 255, 186, .35) 48%,
      rgba(90, 170, 255, .35) 56%,
      rgba(190, 120, 255, .3) 64%,
      transparent 78%);
  background-size: 100% 100%, 250% 250%;
  background-position: center, var(--bx, 50%) var(--by, 50%);
  transition: opacity .35s var(--ease);
}
.foil--strong { --fo-max: .75; }
.tile.is-shimmer .foil { animation: shimmer 1.6s var(--ease) 1; }
@keyframes shimmer {
  0% { opacity: 0; background-position: center, 0% 0%; }
  40% { opacity: .45; }
  100% { opacity: 0; background-position: center, 100% 100%; }
}

.tile__body { display: flex; flex-direction: column; gap: .4rem; min-width: 0; flex: 1; }
.tile__name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .98rem;
  line-height: 1.3;
  letter-spacing: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tile__name a:hover { color: var(--gold-hi); }
.tile__name a::before { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: var(--radius); }
.tile__name a { position: static; }
.tile__meta {
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--ivory-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tile__chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.tile__row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.price {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--gold);
  font-size: 1.02rem;
  letter-spacing: -.01em;
}
.tile__left { font-family: var(--font-mono); font-size: .7rem; color: var(--gold-hi); letter-spacing: .08em; text-transform: uppercase; }
.tile__cta { position: relative; z-index: 5; margin-top: auto; padding-top: .15rem; }
.tile__cta .btn { width: 100%; --h: 44px; font-size: .9rem; padding-inline: .75rem; }
@media (max-width: 480px) { .tile__cta .btn { --h: 44px; } }

.tile.is-sold .tile__media img { filter: grayscale(1) brightness(.55); }
.tile.is-sold .price { color: var(--ivory-dim); text-decoration: line-through; text-decoration-color: rgba(185, 180, 166, .5); }

.tile--vault .tile__media { border-color: rgba(221, 225, 228, .55); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 1), 0 0 0 1px rgba(221, 225, 228, .08); }
.tile--vault .tile__name { font-size: 1.08rem; }
.tile--vault .price { font-size: 1.2rem; }

/* skeleton */
.skel .tile__media { border-color: rgba(243, 239, 228, .06); }
.skel-line { height: 12px; border-radius: 4px; background: var(--obsidian-3); }
.skel-line--short { width: 55%; }
.gallery__main .tile__ph.skel-line { position: absolute; height: auto; border-radius: 0; }
.skel .tile__media, .skel-line { position: relative; overflow: hidden; }
.skel .tile__media::after, .skel-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(243, 239, 228, .05), transparent);
  transform: translateX(-100%);
  animation: skel 1.4s infinite;
}
@keyframes skel { to { transform: translateX(100%); } }

/* =========================================================
   Rails / horizontal snap scroll
   ========================================================= */
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(170px, 46%);
  gap: clamp(.75rem, 2vw, 1.25rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding: .5rem var(--gutter) 1.25rem;
  margin-inline: calc(var(--gutter) * -1);
  scrollbar-width: thin;
  scrollbar-color: var(--gold-line) transparent;
  overscroll-behavior-x: contain;
}
.rail > * { scroll-snap-align: start; }
@media (min-width: 720px) { .rail { grid-auto-columns: minmax(200px, 30%); } }
@media (min-width: 1080px) { .rail { grid-auto-columns: minmax(220px, calc((100% - 4 * 1.25rem) / 5)); } }
.rail-nav { display: none; gap: .5rem; }
@media (min-width: 900px) { .rail-nav { display: flex; } }
.rail-nav button {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--gold-line);
  color: var(--gold);
  transition: background-color .2s, border-color .2s;
}
.rail-nav button:hover { background: rgba(221, 225, 228, .1); border-color: var(--gold); }


/* =========================================================
   Trust strip
   ========================================================= */
.trust-strip { border-bottom: 1px solid rgba(221, 225, 228, .12); background: var(--obsidian); }
.trust-strip ul {
  list-style: none;
  padding: 1.5rem 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 1rem;
}
@media (min-width: 900px) { .trust-strip ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.trust-strip li { display: flex; align-items: center; gap: .75rem; font-size: .9rem; color: var(--silver); line-height: 1.35; }
.trust-strip svg { width: 28px; height: 28px; flex: none; color: var(--gold); }

/* =========================================================
   Category tiles
   ========================================================= */
.cat-grid {
  display: grid;
  gap: clamp(.75rem, 2vw, 1.25rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 900px) { .cat-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.cat-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 3 / 4.2;
  padding: 1.1rem;
  border-radius: var(--radius);
  border: 1px solid rgba(221, 225, 228, .2);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(100% 70% at 50% 0%, rgba(18, 162, 106, .14), transparent 70%),
    repeating-linear-gradient(135deg, rgba(221, 225, 228, .045) 0 1px, transparent 1px 18px),
    var(--obsidian-2);
  transition: border-color .35s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease);
}
.cat-tile:last-child:nth-child(odd) { grid-column: 1 / -1; aspect-ratio: 16 / 7; }
@media (min-width: 900px) { .cat-tile:last-child:nth-child(odd) { grid-column: auto; aspect-ratio: 3 / 4.2; } }
.cat-tile img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease), filter .4s;
  filter: saturate(.9) brightness(.8);
}
.cat-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, transparent 35%, rgba(7, 9, 10, .92) 100%);
}
.cat-tile__label { font-family: var(--font-display); font-weight: 600; font-size: clamp(1rem, 2.2vw, 1.3rem); line-height: 1.15; }
.cat-tile__sub { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-top: .35rem; }
.cat-tile:hover { border-color: var(--gold-hi); box-shadow: 0 0 0 1px var(--gold), 0 0 40px -10px rgba(221, 225, 228, .55), inset 0 0 40px -20px rgba(255, 255, 255, .5); }
.cat-tile:hover img { transform: scale(1.05); filter: saturate(1) brightness(.95); }

/* =========================================================
   Vault
   ========================================================= */
.vault {
  position: relative;
  background: #040506;
  overflow: hidden;
  isolation: isolate;
  border-block: 1px solid rgba(221, 225, 228, .16);
}
.vault::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(520px circle at var(--sx, 50%) var(--sy, 30%), rgba(235, 242, 248, .11), rgba(18, 162, 106, .06) 40%, transparent 70%);
  transition: background-position .2s;
}
.vault .section-head { justify-content: center; text-align: center; }
.vault .section-head > div { justify-items: center; }
.vault h2 {
  font-size: clamp(2.64rem, 7.2vw, 5rem);
  background: linear-gradient(180deg, var(--ivory) 30%, var(--gold) 120%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.vault-grid {
  display: grid;
  gap: clamp(1rem, 3vw, 2rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 900px) { .vault-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* =========================================================
   Sell split / feature panels
   ========================================================= */
.panel {
  position: relative;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-radius: calc(var(--radius) + 6px);
  border: 1px solid rgba(221, 225, 228, .2);
  background: linear-gradient(160deg, var(--obsidian-2), var(--obsidian));
}
.panel--glow { box-shadow: inset 0 1px 0 rgba(243, 239, 228, .05), 0 40px 80px -40px rgba(0, 0, 0, .8); }
.check-list { list-style: none; padding: 0; display: grid; gap: .9rem; }
.check-list li { position: relative; padding-left: 34px; color: var(--silver); }
.check-list li::before {
  content: "";
  position: absolute;
  left: 4px; top: 6px;
  width: 14px; height: 7px;
  border-left: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg);
}

.steps { list-style: none; padding: 0; display: grid; gap: 1rem; counter-reset: step; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li {
  counter-increment: step;
  position: relative;
  padding: 1.5rem;
  border-radius: var(--radius);
  border: 1px solid rgba(221, 225, 228, .2);
  background: var(--obsidian);
  display: grid;
  gap: .5rem;
}
.steps li::before {
  content: "0" counter(step);
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--gold);
  font-size: .8rem;
  letter-spacing: .16em;
}
.steps p { color: var(--ivory-dim); font-size: .95rem; }

/* =========================================================
   Events
   ========================================================= */
.event-grid { display: grid; gap: 1rem; }
@media (min-width: 720px) { .event-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .event-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.event-card {
  position: relative;
  display: grid;
  gap: .75rem;
  align-content: start;
  padding: 1.5rem;
  border-radius: var(--radius);
  border: 1px solid rgba(221, 225, 228, .2);
  background: linear-gradient(170deg, var(--obsidian-2), var(--obsidian));
  transition: border-color .3s var(--ease), transform .4s var(--ease);
}
.event-card:hover { border-color: var(--gold-line); }
.event-card__when { display: flex; flex-wrap: wrap; gap: .5rem; font-family: var(--font-mono); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }
.event-card__when .day { color: var(--gold-hi); }
.event-card__when .time { color: var(--ivory-dim); }
.event-card__when .day { display: inline-flex; align-items: center; gap: .4rem; }
.event-card__repeat { flex: none; color: var(--arc-text); }
.event-card p.event-card__next { margin-top: -.35rem; font-family: var(--font-mono); font-size: .74rem; letter-spacing: .08em; color: var(--ivory-dim); }
.event-card p { color: var(--ivory-dim); font-size: .95rem; }
.event-card__fee { font-family: var(--font-mono); font-size: .8rem; color: var(--silver); }
.event-card::before {
  content: "";
  position: absolute;
  top: 0; left: 1.5rem;
  width: 40px; height: 2px;
  background: var(--arc);
  box-shadow: 0 0 12px var(--arc-glow);
}

/* =========================================================
   Reviews
   ========================================================= */
.reviews-head { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }
.rating { font-family: var(--font-mono); font-size: .95rem; color: var(--silver); }
.rating b { color: var(--gold-hi); font-weight: 500; }
.rating__link { color: inherit; text-decoration: none; }
.rating__link:hover, .rating__link:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.review-grid { display: grid; gap: 1rem; }
@media (min-width: 900px) { .review-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } }
.review {
  padding: 1.5rem;
  border-radius: var(--radius);
  border: 1px solid rgba(243, 239, 228, .1);
  background: var(--obsidian);
  display: grid;
  gap: .75rem;
  align-content: start;
}
.review__stars { color: var(--gold); letter-spacing: .15em; font-size: .9rem; }
.review blockquote { color: var(--silver); font-size: .98rem; }
.review figcaption { font-family: var(--font-mono); font-size: .76rem; color: var(--ivory-dim); letter-spacing: .06em; }

/* =========================================================
   Visit / hours
   ========================================================= */
.visit-grid { display: grid; gap: 2rem; }
@media (min-width: 900px) {
  .visit-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; gap: 1.5rem 3rem; align-items: start; }
  .visit-side { display: contents; }
  .visit-info { grid-column: 1; grid-row: 1; }
  .visit-hours { grid-column: 2; grid-row: 1 / span 2; }
  .visit-side > .visit-pickup { grid-column: 1; grid-row: 2; margin-top: 0; }
}
.visit-map { display: grid; gap: 1rem; justify-items: start; }
.visit-map[hidden] { display: none; }
.visit-map__frame { width: 100%; height: 280px; overflow: hidden; border: 1px solid rgba(243, 239, 228, .12); border-radius: calc(var(--radius) + 6px); background: #07090A; }
.visit-map__fx { height: 100%; filter: grayscale(1) invert(.92) contrast(.9); transition: filter .4s var(--ease); }
.visit-map__frame:hover .visit-map__fx { filter: none; }
.visit-map__fx iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (min-width: 768px) { .visit-map__frame { height: 360px; } }
@media (prefers-reduced-motion: reduce) { .visit-map__fx { transition: none; } }
.status {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .35rem .8rem;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid rgba(243, 239, 228, .16);
  color: var(--ivory-dim);
}
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ivory-dim); }
.status.is-open { color: var(--arc-text); border-color: rgba(18, 162, 106, .5); }
.status.is-open::before { background: var(--arc); box-shadow: 0 0 10px var(--arc-glow); }
.hours-table { width: 100%; font-size: .95rem; }
.hours-table th, .hours-table td { padding: .6rem 0; border-bottom: 1px solid rgba(243, 239, 228, .07); text-align: left; }
.hours-table th { font-weight: 500; color: var(--silver); }
.hours-table td { font-family: var(--font-mono); font-size: .85rem; color: var(--ivory-dim); text-align: right; }
.hours-table tr.is-today th, .hours-table tr.is-today td { color: var(--gold-hi); }
.contact-lines { display: grid; gap: .75rem; font-style: normal; }
.contact-lines a { color: var(--ivory); border-bottom: 1px solid var(--gold-line); }
.contact-lines a:hover { color: var(--gold-hi); }
.visit-photo {
  border-radius: calc(var(--radius) + 6px);
  border: 1px solid rgba(221, 225, 228, .2);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: repeating-linear-gradient(135deg, rgba(221, 225, 228, .04) 0 1px, transparent 1px 16px), var(--obsidian-2);
}
.visit-photo img { width: 100%; height: 100%; object-fit: cover; }

/* =========================================================
   Forms
   ========================================================= */
.field { display: grid; gap: .4rem; }
.field label, .field legend, .field .field__label {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ivory-dim);
}
.input, .select, .textarea {
  width: 100%;
  min-height: 48px;
  padding: .75rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(243, 239, 228, .16);
  background: var(--obsidian);
  color: var(--ivory);
  font-size: 1rem;
  transition: border-color .2s, box-shadow .2s;
}
.textarea { min-height: 120px; resize: vertical; }
.select {
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23DDE1E4' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}
.input::placeholder, .textarea::placeholder { color: rgba(185, 180, 166, .6); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(221, 225, 228, .18); outline: none; }
.input:user-invalid, .textarea:user-invalid { border-color: var(--danger); }
fieldset { border: 0; padding: 0; min-width: 0; }

.check {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  min-height: 44px;
  padding-block: .55rem;
  cursor: pointer;
  color: var(--silver);
  font-size: .95rem;
  line-height: 1.4;
}
.check input {
  flex: none;
  appearance: none;
  width: 20px; height: 20px;
  margin: 0;
  border-radius: 5px;
  border: 1px solid rgba(243, 239, 228, .3);
  background: var(--obsidian);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.check input[type="radio"] { border-radius: 50%; }
.check input:checked { border-color: var(--gold); background: var(--gold); }
.check input:checked::after { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--void); clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); }
.check input[type="radio"]:checked::after { border-radius: 50%; clip-path: none; width: 8px; height: 8px; }
.check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }

.form-grid { display: grid; gap: 1.1rem; }
@media (min-width: 720px) { .form-grid--2 { grid-template-columns: 1fr 1fr; } .form-grid .span-2 { grid-column: 1 / -1; } }

.inline-form { display: flex; gap: .5rem; flex-wrap: wrap; }
.inline-form .input { flex: 1 1 200px; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.notice {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: .9rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(18, 162, 106, .5);
  background: rgba(10, 59, 41, .4);
  color: var(--ivory);
  font-size: .95rem;
}
.notice--error { border-color: rgba(229, 103, 90, .55); background: rgba(229, 103, 90, .1); }
.notice--gold { border-color: var(--gold-line); background: rgba(221, 225, 228, .06); }

.form-success { display: grid; gap: .5rem; padding: 1.5rem; border-radius: var(--radius); border: 1px solid rgba(18, 162, 106, .5); background: rgba(10, 59, 41, .35); }
.form-success h3 { color: var(--ivory); }

/* =========================================================
   Drop alerts band
   ========================================================= */
.drop-band {
  position: relative;
  padding: clamp(2rem, 5vw, 3.5rem);
  border-radius: calc(var(--radius) + 8px);
  border: 1px solid rgba(221, 225, 228, .25);
  background:
    radial-gradient(70% 120% at 100% 0%, rgba(18, 162, 106, .22), transparent 60%),
    radial-gradient(60% 100% at 0% 100%, rgba(221, 225, 228, .08), transparent 60%),
    var(--obsidian);
  display: grid;
  gap: 1.5rem;
  overflow: hidden;
}
@media (min-width: 900px) { .drop-band { grid-template-columns: 1.1fr 1fr; align-items: center; gap: 3rem; } }
.drop-band h2 { font-size: clamp(1.6rem, 3.6vw, 2.5rem); }

/* =========================================================
   Shop page: toolbar, pills, filters
   ========================================================= */
.shop-toolbar {
  display: grid;
  gap: .75rem;
  margin-bottom: 1.25rem;
}
@media (min-width: 900px) { .shop-toolbar { grid-template-columns: 1fr auto auto; align-items: center; } }
.search-box { position: relative; }
.search-box svg { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--gold); pointer-events: none; }
.search-box .input { padding-left: 2.75rem; border-radius: 999px; }
.pills {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  min-height: 52px;
  padding-bottom: .5rem;
  margin-bottom: 1rem;
  scrollbar-width: none;
}
.pills::-webkit-scrollbar { display: none; }
.pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1.1rem;
  border-radius: 999px;
  border: 1px solid rgba(243, 239, 228, .14);
  color: var(--silver);
  font-size: .9rem;
  font-weight: 500;
  transition: border-color .2s, color .2s, background-color .2s;
}
.pill:hover { border-color: var(--gold-line); color: var(--gold-hi); }
.pill[aria-current="true"] { border-color: var(--gold); color: var(--void); background: var(--gold); }

.shop-layout { display: grid; gap: 1.5rem; }
#shop-grid { min-height: 70vh; }
@media (min-width: 1080px) { .shop-layout { grid-template-columns: 250px 1fr; gap: 2.5rem; } }
.filters {
  display: grid;
  gap: 1.5rem;
  align-content: start;
}
.filters h3 { font-family: var(--font-mono); font-size: .72rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: .25rem; }
.filters .check { min-height: 40px; padding-block: .4rem; }
.price-range { display: grid; grid-template-columns: 1fr auto 1fr; gap: .5rem; align-items: center; }
.price-range .input { min-height: 44px; padding: .5rem .75rem; }

@media (max-width: 1079px) {
  .filters-panel {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 95;
    width: min(92vw, 380px);
    padding: 1.25rem var(--gutter) 6rem;
    background: var(--obsidian);
    border-left: 1px solid var(--gold-line);
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .4s var(--ease), visibility 0s .4s;
  }
  .filters-panel.is-open { transform: none; visibility: visible; transition-delay: 0s; }
  .filters-panel__foot {
    position: fixed;
    bottom: 0; right: 0;
    width: min(92vw, 380px);
    padding: 1rem var(--gutter);
    background: var(--obsidian);
    border-top: 1px solid rgba(221, 225, 228, .15);
    display: flex;
    gap: .5rem;
  }
  .filters-panel__foot .btn { flex: 1; }
}
@media (min-width: 1080px) {
  .filters-toggle, .filters-panel__head, .filters-panel__foot { display: none !important; }
  .filters-panel { position: sticky; top: calc(var(--header-h) + 1.5rem); align-self: start; }
}
.filters-panel__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.result-count { font-family: var(--font-mono); font-size: .78rem; color: var(--ivory-dim); letter-spacing: .06em; }
.empty {
  display: grid;
  gap: 1rem;
  justify-items: center;
  text-align: center;
  padding: clamp(2.5rem, 7vw, 5rem) 1rem;
  border: 1px dashed rgba(221, 225, 228, .25);
  border-radius: var(--radius);
}
.empty p { color: var(--ivory-dim); max-width: 44ch; }
.empty form { width: min(100%, 420px); }

.scrim {
  position: fixed;
  inset: 0;
  z-index: 85;
  background: rgba(4, 5, 6, .7);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s var(--ease), visibility 0s .35s;
}
.scrim.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }

/* =========================================================
   Cart drawer
   ========================================================= */
.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 100;
  width: min(100vw, 440px);
  display: flex;
  flex-direction: column;
  background: var(--obsidian);
  border-left: 1px solid var(--gold-line);
  box-shadow: -30px 0 80px -20px rgba(0, 0, 0, .8);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .45s var(--ease), visibility 0s .45s;
}
.drawer.is-open { transform: none; visibility: visible; transition-delay: 0s; }
.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem .75rem 1.25rem;
  border-bottom: 1px solid rgba(221, 225, 228, .14);
}
.drawer__head h2 { font-size: 1.15rem; }
.drawer__body { flex: 1; overflow-y: auto; padding: 1rem 1.25rem; overscroll-behavior: contain; }
.drawer__foot { padding: 1rem 1.25rem 1.25rem; border-top: 1px solid rgba(221, 225, 228, .14); display: grid; gap: .85rem; background: var(--obsidian); }
.drawer__empty { display: grid; gap: 1rem; justify-items: start; padding-block: 1rem; color: var(--ivory-dim); }
.drawer__empty-art { position: relative; display: block; width: 112px; aspect-ratio: 5 / 7; border-radius: 8px; overflow: hidden; border: 1px solid var(--gold-line); background: var(--obsidian-2); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .9), 0 0 30px -12px rgba(255, 255, 255, .35); }
.drawer__empty-art:not(:has(img)) { display: none; }
.empty .drawer__empty-art { justify-self: center; margin-bottom: .25rem; }
.line__img, .upsell-item__img { position: relative; }

.ship-progress { display: grid; gap: .45rem; font-size: .85rem; color: var(--silver); }
.ship-progress b { color: var(--gold-hi); font-weight: 600; }

.line-items { list-style: none; padding: 0; display: grid; gap: 1rem; }
.line {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: .9rem;
  align-items: start;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(243, 239, 228, .07);
}
.line__img { width: 64px; aspect-ratio: 5 / 7; border-radius: 6px; border: 1px solid var(--gold-line); background: var(--obsidian-2); overflow: hidden; }
.line__img img { width: 100%; height: 100%; object-fit: cover; }
.line__name { font-weight: 600; font-size: .95rem; line-height: 1.3; }
.line__name a:hover { color: var(--gold-hi); }
.line__price { font-family: var(--font-mono); color: var(--gold); font-size: .9rem; text-align: right; }
.line__actions { display: flex; align-items: center; gap: .75rem; margin-top: .5rem; flex-wrap: wrap; }
.line__remove { font-size: .8rem; color: var(--ivory-dim); text-decoration: underline; text-underline-offset: 3px; min-height: 40px; padding-inline: .25rem; }
.line__remove:hover { color: var(--danger); }
.line__note { font-family: var(--font-mono); font-size: .7rem; color: var(--gold-hi); margin-top: .25rem; }

.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(243, 239, 228, .16);
  border-radius: 999px;
  height: 40px;
}
.qty button { width: 40px; height: 100%; display: grid; place-items: center; color: var(--gold); font-size: 1.1rem; border-radius: 999px; }
.qty button:hover:not([disabled]) { background: rgba(221, 225, 228, .1); }
.qty button[disabled] { color: rgba(185, 180, 166, .35); cursor: not-allowed; }
.qty output, .qty input { min-width: 32px; text-align: center; font-family: var(--font-mono); font-size: .9rem; background: transparent; border: 0; width: 36px; }
.qty--lg { height: 48px; }
.qty--lg button { width: 48px; }

.subtotal-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 1rem; }
.subtotal-row strong { font-family: var(--font-mono); color: var(--gold-hi); font-size: 1.15rem; font-weight: 500; }

.upsell { margin-top: 1.5rem; display: grid; gap: .75rem; }
.upsell__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.upsell-item { display: grid; gap: .35rem; font-size: .76rem; line-height: 1.3; }
.upsell-item__img { aspect-ratio: 1; border-radius: 8px; border: 1px solid var(--gold-line); background: var(--obsidian-2); overflow: hidden; }
.upsell-item__img img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.upsell-item__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.upsell-item .price { font-size: .8rem; }
.upsell-item button { min-height: 36px; border: 1px solid var(--gold-line); border-radius: 999px; color: var(--gold); font-size: .75rem; font-weight: 600; }
.upsell-item button:hover:not([disabled]) { background: rgba(221, 225, 228, .1); }

/* =========================================================
   Cart page
   ========================================================= */
.cart-layout { display: grid; gap: 2rem; }
@media (min-width: 960px) { .cart-layout { grid-template-columns: 1.4fr 1fr; gap: 3rem; align-items: start; } }
.cart-summary { position: sticky; top: calc(var(--header-h) + 1.5rem); display: grid; gap: 1.25rem; }
.cart-page .line { grid-template-columns: 84px 1fr auto; }
.cart-page .line__img { width: 84px; }
.radio-cards { display: grid; gap: .75rem; }
.radio-card {
  position: relative;
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: .85rem;
  align-items: center;
  min-height: 64px;
  padding: 1rem 1.1rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(243, 239, 228, .16);
  background: var(--obsidian);
  cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.radio-card:hover { border-color: var(--gold-line); }
.radio-card:has(input:checked) { border-color: var(--gold); background: rgba(221, 225, 228, .06); }
.radio-card input { appearance: none; width: 20px; height: 20px; margin: 0; border-radius: 50%; border: 1px solid rgba(243, 239, 228, .35); display: grid; place-items: center; }
.radio-card input:checked { border-color: var(--gold); }
.radio-card input:checked::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); }
.radio-card__title { font-weight: 600; }
.radio-card__sub { font-size: .84rem; color: var(--ivory-dim); }
.radio-card__price { font-family: var(--font-mono); color: var(--gold); font-size: .9rem; }
.totals { display: grid; gap: .5rem; font-size: .95rem; }
.totals div { display: flex; justify-content: space-between; gap: 1rem; }
.totals dd { font-family: var(--font-mono); margin: 0; }
.totals dt { color: var(--ivory-dim); }
.totals .total { padding-top: .75rem; border-top: 1px solid rgba(221, 225, 228, .2); font-size: 1.05rem; }
.totals .total dt { color: var(--ivory); font-weight: 600; }
.totals .total dd { color: var(--gold-hi); font-size: 1.2rem; }
.secure-line { display: flex; align-items: center; justify-content: center; gap: .5rem; font-size: .82rem; color: var(--ivory-dim); }
.secure-line svg { width: 16px; height: 16px; color: var(--gold); }

/* =========================================================
   Product page
   ========================================================= */
.pdp { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); padding-top: clamp(1.25rem, 3vw, 2.5rem); }
@media (min-width: 960px) { .pdp { grid-template-columns: 1fr 1fr; align-items: start; } }
.crumbs { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; color: var(--ivory-dim); display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; min-height: 44px; }
.crumbs a { color: var(--ivory-dim); min-height: 44px; display: inline-flex; align-items: center; }
.crumbs a:hover { color: var(--gold-hi); }
.gallery { display: grid; gap: .85rem; }
@media (min-width: 960px) { .gallery { position: sticky; top: calc(var(--header-h) + 1.5rem); } }
.gallery__main {
  position: relative;
  width: min(100%, 520px);
  margin-inline: auto;
  aspect-ratio: 5 / 7;
  border-radius: calc(var(--radius) + 4px);
  border: 1px solid var(--gold-line);
  background: radial-gradient(90% 60% at 50% 0%, rgba(18, 162, 106, .12), transparent 70%), var(--obsidian-2);
  overflow: hidden;
  cursor: zoom-in;
  transform-style: preserve-3d;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9);
}
.gallery__main img { width: 100%; height: 100%; object-fit: contain; }
.gallery__main--photo { background: #fff; }
.gallery__main--photo img { padding: 6%; }
.pdp__price .price-was { font-size: .5em; }
.pdp__po-note { font-size: .9rem; color: var(--gold-hi); }
.gallery__thumbs { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
.gallery__thumbs button {
  width: 64px;
  aspect-ratio: 5 / 7;
  border-radius: 8px;
  border: 1px solid rgba(243, 239, 228, .14);
  overflow: hidden;
  background: var(--obsidian-2);
  opacity: .65;
  transition: opacity .2s, border-color .2s;
}
.gallery__thumbs button[aria-current="true"], .gallery__thumbs button:hover { opacity: 1; border-color: var(--gold); }
.gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }

.pdp__info { display: grid; gap: 1.1rem; align-content: start; }
.pdp__info h1 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); line-height: 1.1; }
.pdp__set { font-family: var(--font-mono); font-size: .85rem; color: var(--ivory-dim); }
.pdp__chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.pdp__chips .chip { font-size: .74rem; min-height: 30px; padding-inline: .7rem; }
.pdp__price { font-family: var(--font-mono); font-weight: 500; font-size: clamp(1.9rem, 4vw, 2.5rem); color: var(--gold); line-height: 1; }
.pdp__buy { display: grid; gap: .75rem; padding: 1.25rem; border-radius: var(--radius); border: 1px solid rgba(221, 225, 228, .2); background: var(--obsidian); }
.pdp__buyrow { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
.pdp__buyrow .btn { flex: 1 1 160px; }
.pdp__pickup { font-size: .9rem; color: var(--silver); display: flex; gap: .5rem; align-items: center; }
.pdp__pickup svg { width: 18px; height: 18px; color: var(--arc); flex: none; }
.trust-box { list-style: none; padding: 1.1rem 1.25rem; display: grid; gap: .6rem; border-radius: var(--radius); border: 1px solid rgba(243, 239, 228, .1); background: rgba(22, 28, 25, .6); font-size: .92rem; color: var(--silver); }
.trust-box li { display: flex; gap: .65rem; align-items: center; }
.trust-box svg { width: 18px; height: 18px; color: var(--gold); flex: none; }
.trust-box a { color: var(--gold-hi); text-decoration: underline; text-underline-offset: 3px; }
.pdp__desc { color: var(--silver); }
.pdp__desc p + p { margin-top: .75rem; }

.accordion { border-top: 1px solid rgba(221, 225, 228, .16); }
.accordion details { border-bottom: 1px solid rgba(221, 225, 228, .16); }
.accordion summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: 56px;
  padding-block: .75rem;
  cursor: pointer;
  font-weight: 600;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; font-family: var(--font-mono); color: var(--gold); font-size: 1.2rem; transition: transform .3s var(--ease); }
.accordion details[open] summary::after { transform: rotate(45deg); }
.accordion .acc-body { padding-bottom: 1.25rem; color: var(--ivory-dim); font-size: .95rem; display: grid; gap: .6rem; }
.accordion dl { display: grid; gap: .6rem; }
.accordion dt { font-family: var(--font-mono); color: var(--gold-hi); font-size: .8rem; letter-spacing: .08em; }
.accordion dd { margin: 0; }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 3.5rem 1rem 1rem;
  background: rgba(4, 5, 6, .94);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), visibility 0s .3s;
}
.lightbox.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.lightbox img { max-width: 100%; max-height: calc(100svh - 5rem); object-fit: contain; border-radius: var(--radius-sm); }
.lightbox__close { position: absolute; top: .5rem; right: .5rem; }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); border: 1px solid var(--gold-line); background: rgba(7, 9, 10, .6); }
.lightbox__nav--prev { left: .5rem; }
.lightbox__nav--next { right: .5rem; }

/* FAQ */
.faq { max-width: 820px; }

/* 404 / thank you */
.center-stage {
  min-height: 70vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: 4rem;
  background: radial-gradient(50% 50% at 50% 40%, rgba(10, 59, 41, .5), transparent 70%);
}
.center-stage .wrap { display: grid; gap: 1.25rem; justify-items: center; max-width: 720px; }
.center-stage p { color: var(--ivory-dim); }
.review-cta { min-width: min(100%, 340px); }
.review-qr { display: grid; gap: .75rem; justify-items: center; margin: .5rem 0; }
.review-qr__code { width: clamp(180px, 46vw, 240px); padding: .75rem; background: #fff; border-radius: 14px; border: 1px solid var(--gold); box-shadow: 0 0 40px -14px rgba(221, 225, 228, .55); }
.review-qr__code svg { display: block; width: 100%; height: auto; }
.review-qr figcaption { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ivory-dim); }
.review-stage { min-height: 0; padding-block: clamp(2.5rem, 7vw, 4.5rem); }
.review-feedback { padding: 0 0 4.5rem; scroll-margin-top: 5.5rem; }
.review-feedback .wrap { max-width: 36rem; display: grid; gap: 1rem; text-align: left; }
.review-feedback h2 { font-size: clamp(1.45rem, 2.4vw, 2rem); }
.review-form { display: grid; gap: .9rem; }
.review-form .btn { justify-self: start; }
.review-note { min-height: 1.4em; margin: 0; }
.empty-slot {
  width: 140px;
  aspect-ratio: 5 / 7;
  border-radius: var(--radius);
  border: 1px dashed var(--gold-line);
  background: repeating-linear-gradient(135deg, rgba(221, 225, 228, .05) 0 1px, transparent 1px 14px);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  color: var(--gold);
  font-size: .8rem;
  letter-spacing: .14em;
}
.next-steps { list-style: none; padding: 0; display: grid; gap: .75rem; text-align: left; width: 100%; }
.next-steps li { display: grid; grid-template-columns: auto 1fr; gap: .9rem; padding: 1rem 1.25rem; border-radius: var(--radius-sm); border: 1px solid rgba(221, 225, 228, .18); background: var(--obsidian); color: var(--silver); }
.next-steps b { font-family: var(--font-mono); color: var(--gold); font-weight: 500; }

.small { font-size: .85rem; }

/* =========================================================
   Next release + countdown
   ========================================================= */
.nr-panel {
  position: relative;
  display: grid;
  gap: 1.75rem;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  border-radius: calc(var(--radius) + 6px);
  border: 1px solid rgba(221, 225, 228, .3);
  background:
    radial-gradient(60% 120% at 100% 50%, rgba(221, 225, 228, .1), transparent 60%),
    radial-gradient(50% 100% at 0% 0%, rgba(18, 162, 106, .14), transparent 60%),
    var(--obsidian);
  overflow: hidden;
}
@media (min-width: 900px) { .nr-panel { grid-template-columns: 1.2fr 1fr; align-items: center; gap: 3rem; } }
.nr-copy { display: grid; gap: .8rem; justify-items: start; }
.nr-copy h2 { font-size: clamp(2.04rem, 4.8vw, 3.36rem); }
.nr-date { color: var(--gold-hi); font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; }
.nr-ctas { margin-top: .5rem; }
.countdown {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.5rem, 1.5vw, .9rem);
}
.countdown__unit {
  display: grid;
  justify-items: center;
  gap: .35rem;
  padding: clamp(.85rem, 2vw, 1.25rem) .25rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gold-line);
  background: linear-gradient(180deg, rgba(243, 239, 228, .04), transparent), var(--void);
}
.countdown__unit b {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  line-height: 1;
  color: var(--gold-hi);
  font-variant-numeric: tabular-nums;
}
.countdown__unit span { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ivory-dim); }
.nr-reserve {
  margin-top: 1rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: calc(var(--radius) + 6px);
  border: 1px solid rgba(221, 225, 228, .2);
  background: var(--obsidian);
}
.nr-reserve__title { margin-bottom: 1rem; }

/* Prerelease events */
.pr-card { display: grid; gap: .6rem; }
.pr-card__meta { display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-family: var(--font-mono); font-size: .76rem; letter-spacing: .06em; color: var(--silver); }
.pr-card__meta span::before { content: "· "; color: var(--gold); }
.pr-card__meta span:first-child::before { content: ""; }

/* =========================================================
   Store realignment: new drops grid, category placeholders,
   card back, modal, ordering note, story, Instagram, rating
   ========================================================= */
@media (min-width: 900px) {
  .rail--grid4 { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; margin-inline: 0; padding-inline: 0; scroll-snap-type: none; }
}

.cat-tile__ph { display: none; }
.cat-tile.is-ph .cat-tile__ph {
  flex: 1;
  min-height: 0;
  margin: -.35rem -.35rem .85rem;
  display: grid;
  place-items: center;
  padding: .75rem;
  text-align: center;
  position: relative;
  border: 1px solid var(--gold-line);
  border-radius: calc(var(--radius) - 6px);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(.68rem, 2.1vw, 1rem);
  letter-spacing: .08em;
  overflow-wrap: anywhere;
  text-transform: uppercase;
  color: var(--gold);
  background:
    repeating-linear-gradient(135deg, rgba(221, 225, 228, .08) 0 1px, transparent 1px 12px),
    radial-gradient(80% 60% at 50% 40%, rgba(18, 162, 106, .2), transparent 70%),
    linear-gradient(160deg, var(--obsidian-2), var(--void));
  box-shadow: inset 0 0 0 6px var(--obsidian-2), inset 0 0 0 7px var(--gold-line);
}
.card-back {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .35rem;
  text-align: center;
  background:
    linear-gradient(var(--obsidian-2), var(--obsidian-2)) padding-box,
    repeating-linear-gradient(135deg, rgba(221, 225, 228, .07) 0 1px, transparent 1px 12px);
  box-shadow: inset 0 0 0 8px var(--obsidian-2), inset 0 0 0 9px var(--gold-line);
}
.card-back::before {
  content: "";
  position: absolute;
  inset: 16px;
  border-radius: 6px;
  background: repeating-linear-gradient(45deg, rgba(221, 225, 228, .05) 0 1px, transparent 1px 10px), radial-gradient(80% 60% at 50% 40%, rgba(18, 162, 106, .18), transparent 70%);
  z-index: 0;
}
.card-back__word { position: relative; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 5vw, 2rem); letter-spacing: .12em; color: var(--gold); }
.card-back__sub { position: relative; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ivory-dim); }
.gallery__main .card-back { border-radius: inherit; }
.card-back__img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: center; image-rendering: -webkit-optimize-contrast; }

/* Card-back stand-in art on tiles: per-product tone + crop, framed by product type */
.cb { position: absolute; inset: 0; display: block; }
.cb__win { position: absolute; inset: 0; overflow: hidden; display: block; }
.tile .tile__media .cb__img {
  position: absolute; inset: 0; width: 100%; height: 100%; padding: 0;
  object-fit: cover; object-position: var(--cb-pos, 50% 50%);
  transform: scale(var(--cb-scale, 1)); transform-origin: var(--cb-pos, 50% 50%);
  image-rendering: -webkit-optimize-contrast;
}
.cb--emerald .cb__win { filter: none; }
.cb--sapphire .cb__win { filter: hue-rotate(62deg) saturate(1.15); }
.cb--ruby .cb__win { filter: hue-rotate(-138deg) saturate(1.3) brightness(.95); }
.cb--amethyst .cb__win { filter: hue-rotate(122deg) saturate(1.1); }
.cb--silver .cb__win { filter: grayscale(1) brightness(1.18) contrast(1.06); }
.cb--gold .cb__win { filter: sepia(.85) saturate(1.7) hue-rotate(-12deg) brightness(1.05); }

/* Graded slab: clear acrylic case, light border, grade label strip on top */
.cb--slab::before {
  content: ""; position: absolute; inset: 4% 7%; border-radius: 10px;
  border: 1px solid rgba(232, 238, 242, .6);
  background: linear-gradient(165deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04) 38%, rgba(255, 255, 255, .1));
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .05), 0 14px 30px -16px rgba(0, 0, 0, .9);
}
.cb--slab .cb__label {
  position: absolute; left: 11%; right: 11%; top: 7.5%; height: 11%;
  display: flex; align-items: center; justify-content: space-between; gap: .4rem; padding-inline: 7%;
  border-radius: 4px; background: linear-gradient(180deg, #F1F3F4, #D9DDE0); color: #0B0F0D;
  font-family: var(--font-mono); font-size: clamp(.52rem, 1.6vw, .7rem); letter-spacing: .1em; text-transform: uppercase;
}
.cb--slab .cb__label b { font-weight: 500; }
.cb--slab .cb__label i { font-style: normal; color: #4A514D; }
.cb--slab .cb__win { inset: 21.5% 13% 8%; border-radius: 3px; outline: 1px solid rgba(255, 255, 255, .22); }
.cb--slab::after { content: ""; position: absolute; inset: 4% 7%; border-radius: 10px; pointer-events: none; background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .12) 45%, transparent 58%); }

/* Booster box / sealed: taller portrait frame with a gold top band */
.cb--box .cb__win { inset: 6% 15% 7%; border-radius: 6px; border: 1px solid var(--gold-line); box-shadow: 8px 10px 0 -2px rgba(0, 0, 0, .45), 0 18px 34px -18px rgba(0, 0, 0, .9); }
.cb--box::after {
  content: ""; position: absolute; left: 15%; right: 15%; top: 6%; height: 12%; border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, #FFFFFF, #9AA3AB); box-shadow: 0 1px 0 rgba(7, 9, 10, .5);
}

/* Toploader / sleeve: thin transparent sleeve with a thicker top lip */
.cb--sleeve .cb__win { inset: 9% 13% 8%; border-radius: 3px; }
.cb--sleeve::after {
  content: ""; position: absolute; inset: 5% 9% 5%; border-radius: 6px; pointer-events: none;
  border: 1px solid rgba(232, 238, 242, .42); border-top-width: 4px;
  background: linear-gradient(115deg, rgba(255, 255, 255, .14), transparent 32%, transparent 66%, rgba(255, 255, 255, .08));
}

.tile__release { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; color: var(--gold-hi); }

.modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: end center;
  padding: 0;
  background: rgba(4, 5, 6, .72);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.modal.is-open { opacity: 1; }
.modal__card {
  width: min(100%, 560px);
  max-height: 92vh;
  overflow: auto;
  padding: 1.25rem 1.25rem 1.5rem;
  border-radius: calc(var(--radius) + 6px) calc(var(--radius) + 6px) 0 0;
  border: 1px solid var(--gold-line);
  background: linear-gradient(160deg, var(--obsidian-2), var(--obsidian));
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9);
  transform: translateY(24px);
  transition: transform .35s var(--ease);
}
.modal.is-open .modal__card { transform: none; }
.modal__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.modal__head h2 { font-size: 1.25rem; }
@media (min-width: 640px) {
  .modal { place-items: center; padding: 1.5rem; }
  .modal__card { border-radius: calc(var(--radius) + 6px); padding: 1.75rem; }
}

.order-closed {
  margin: .6rem 0 0;
  font-family: var(--font-mono);
  font-size: .75rem;
  line-height: 1.5;
  color: #B9B4A6;
}
.order-closed a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.tile__call {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: .75rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ivory-dim);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.slot .tile__call { min-height: 42px; font-size: .68rem; letter-spacing: .18em; }

.story { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .story { grid-template-columns: 1fr 1.1fr; gap: 3rem; } }
.story__body { font-size: 1.05rem; max-width: 52ch; }
.story__photos { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.story__photos[data-count="1"] { grid-template-columns: 1fr; }
.story__photos[data-count="3"] > :first-child { grid-row: span 2; }
.story__photo { margin: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(221, 225, 228, .2); aspect-ratio: 4 / 5; }
.story__photo img { width: 100%; height: 100%; object-fit: cover; }

.community { display: grid; gap: 1.25rem; }
@media (min-width: 900px) {
  .ig-card { grid-template-columns: 1fr auto; column-gap: 2rem; align-items: center; }
  .ig-card > :not(.btn):not(.ig-grid) { grid-column: 1; }
  .ig-card > .btn { grid-column: 2; grid-row: 1 / span 3; }
  .ig-card > .ig-grid { grid-column: 1 / -1; grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.ig-card {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: .9rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-radius: calc(var(--radius) + 6px);
  border: 1px solid rgba(221, 225, 228, .2);
  background: radial-gradient(80% 80% at 100% 0%, rgba(221, 225, 228, .08), transparent 60%), var(--obsidian);
}
.ig-card__title { font-size: clamp(1.35rem, 3vw, 1.9rem); }
.ig-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; width: 100%; margin-top: .5rem; }
.ig-grid a { display: block; aspect-ratio: 1; border-radius: 8px; overflow: hidden; border: 1px solid rgba(221, 225, 228, .15); }
.ig-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.ig-grid a:hover img { transform: scale(1.05); }

.footer-want { margin-top: 1rem; font-size: .9rem; color: var(--ivory-dim); }
.link-btn { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; font: inherit; padding: 0; min-height: 24px; }
.link-btn:hover { color: var(--gold-hi); }
.shop-want { margin-top: 2rem; text-align: center; font-size: .95rem; color: var(--ivory-dim); }
.want-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem .75rem; color: var(--ivory-dim); }
.prerelease-form .check, .form-grid .check { align-items: flex-start; font-size: .88rem; color: var(--ivory-dim); }

/* Rating: value never changes; it settles into place once */
.rating-wrap [data-rating] { display: inline-block; }
html.js:not(.reduced) .rating-wrap [data-rating] { animation: rating-in .9s var(--ease) .6s both; }
@keyframes rating-in {
  from { opacity: 0; transform: translateY(.45em); filter: blur(3px); }
  to { opacity: 1; transform: none; filter: none; }
}
@media (prefers-reduced-motion: reduce) { .rating-wrap [data-rating] { animation: none !important; } }

/* =========================================================
   Gamer layer: rarity frames, stat line, stock bar, HUD panels,
   energy orbs, XP shipping bar, acquired toast, glitch
   ========================================================= */

/* ---------- Rarity tokens ---------- */
.r-common, [data-rarity="common"] { --r: #AEB5BC; --r-text: #CDD2D7; --r-glow: rgba(205, 210, 215, .2); --rf: linear-gradient(160deg, #80878E, #E6EAED 45%, #80878E); }
.r-uncommon, [data-rarity="uncommon"] { --r: #2FCB7A; --r-text: #5FE09C; --r-glow: rgba(47, 203, 122, .34); --rf: linear-gradient(160deg, #137A47, #5FE09C 50%, #137A47); }
.r-rare, [data-rarity="rare"] { --r: #5B8CFF; --r-text: #8DB0FF; --r-glow: rgba(91, 140, 255, .34); --rf: linear-gradient(135deg, #3D6BFF, #8DB0FF 35%, #DDE1E4 65%, #FFFFFF); }
.r-holo, [data-rarity="holo"] { --r: #C58BFF; --r-text: #E0B8FF; --r-glow: rgba(190, 120, 255, .38); --rf: conic-gradient(from 0deg, #FF5EA0, #FFFFFF, #5EFFBA, #5AAAFF, #BE78FF, #FF5EA0); }
.r-ultra, [data-rarity="ultra"] { --r: #FFFFFF; --r-text: #FFFFFF; --r-glow: rgba(255, 255, 255, .45); --rf: linear-gradient(135deg, #9AA3AB, #FFFFFF 35%, #FFFFFF 50%, #FFFFFF 65%, #9AA3AB); }
.r-secret, [data-rarity="secret"] { --r: #12C27F; --r-text: #5EF0B0; --r-glow: rgba(18, 194, 127, .45); --rf: conic-gradient(from 0deg, #0A3B29, #12A26A 18%, #C8FFE6 25%, #12A26A 32%, #0A3B29 50%, #12A26A 68%, #C8FFE6 75%, #12A26A 82%, #0A3B29); }

/* ---------- Pips + tier label ---------- */
.pips { display: inline-flex; gap: 2px; flex: none; }
.pips i { width: 7px; height: 4px; border-radius: 1px; background: rgba(243, 239, 228, .14); }
.pips i.on { background: var(--r, var(--gold-hi)); box-shadow: 0 0 6px var(--r-glow, transparent); }
.rarity {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: .62rem;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--r-text);
}
.rarity.r-holo .rarity__name {
  background: linear-gradient(90deg, #FF8FC0, #FFFFFF, #7BFFC9, #8DB0FF, #D9B8FF);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Rarity frame on tile media ---------- */
.tile[data-rarity] .tile__media { border-color: color-mix(in srgb, var(--r) 45%, transparent); box-shadow: 0 0 22px -8px var(--r-glow); }
.tile[data-rarity] .tile__media:hover { box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .9), 0 0 38px -8px var(--r-glow); }
.rframe {
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 2px;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.rframe::before { content: ""; position: absolute; inset: 0; background: var(--rf); }
.tile[data-rarity="common"] .rframe { padding: 1.5px; opacity: .85; }
.tile:is([data-rarity="holo"], [data-rarity="secret"]) .rframe::before { inset: -50%; }
.tile[data-rarity="ultra"] .rframe::after { content: ""; position: absolute; inset: 0; background: #FFFFFF; opacity: 0; }
.tile:is([data-rarity="ultra"], [data-rarity="secret"]) .tile__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 24px var(--r-glow);
  opacity: .35;
}
.tile.is-sold .rframe { filter: grayscale(1); opacity: .45; }
@media (prefers-reduced-motion: no-preference) {
  .tile[data-rarity="holo"] .rframe::before { animation: rf-spin 7s linear infinite; }
  .tile[data-rarity="secret"] .rframe::before { animation: rf-spin 4.5s linear infinite; }
  .tile[data-rarity="ultra"] .rframe::after { animation: rf-flash 2.6s ease-in-out infinite; }
  .tile[data-rarity="ultra"] .tile__media::after { animation: rf-glow 2.6s ease-in-out infinite; }
  .tile.is-sold .rframe::before, .tile.is-sold .rframe::after, .tile.is-sold .tile__media::after { animation: none; }
}
@keyframes rf-spin { to { transform: rotate(1turn); } }
@keyframes rf-flash { 0%, 100% { opacity: 0; } 50% { opacity: .65; } }
@keyframes rf-glow { 0%, 100% { opacity: .2; } 50% { opacity: .9; } }

/* ---------- Stat line + stock bar ---------- */
.tile__meta { text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 480px) { .tile__meta { font-size: .66rem; letter-spacing: 0; } }
.sbar { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--font-mono); font-weight: 500; font-size: .7rem; color: var(--silver); }
.sbar__segs { display: inline-flex; gap: 2px; }
.sbar__segs i { width: 6px; height: 9px; border-radius: 1px; background: rgba(243, 239, 228, .14); transform: skewX(-14deg); }
.sbar__segs i.on { background: #2FCB7A; box-shadow: 0 0 6px rgba(47, 203, 122, .45); }
.sbar--low .sbar__segs i.on { background: #FFFFFF; box-shadow: 0 0 6px rgba(255, 255, 255, .45); }
.sbar--low .sbar__n { color: var(--gold-hi); }

/* ---------- HUD panels: chamfered corners + gold brackets ---------- */
.hud {
  --hc: 14px;
  --hl: 22px;
  --hb: var(--gold);
  position: relative;
  border-radius: 0 !important;
  clip-path: polygon(var(--hc) 0, calc(100% - var(--hc)) 0, 100% var(--hc), 100% calc(100% - var(--hc)), calc(100% - var(--hc)) 100%, var(--hc) 100%, 0 calc(100% - var(--hc)), 0 var(--hc));
}
.hud__f {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  --ln: linear-gradient(var(--hb), var(--hb));
  background:
    linear-gradient(to bottom right, transparent 50%, var(--hb) 50%, var(--hb) calc(50% + 1.4px), transparent calc(50% + 1.6px)) left top / var(--hc) var(--hc) no-repeat,
    linear-gradient(to bottom left, transparent 50%, var(--hb) 50%, var(--hb) calc(50% + 1.4px), transparent calc(50% + 1.6px)) right top / var(--hc) var(--hc) no-repeat,
    linear-gradient(to top left, transparent 50%, var(--hb) 50%, var(--hb) calc(50% + 1.4px), transparent calc(50% + 1.6px)) right bottom / var(--hc) var(--hc) no-repeat,
    linear-gradient(to top right, transparent 50%, var(--hb) 50%, var(--hb) calc(50% + 1.4px), transparent calc(50% + 1.6px)) left bottom / var(--hc) var(--hc) no-repeat,
    var(--ln) left var(--hc) top 0 / var(--hl) 1.5px no-repeat,
    var(--ln) left 0 top var(--hc) / 1.5px var(--hl) no-repeat,
    var(--ln) right var(--hc) top 0 / var(--hl) 1.5px no-repeat,
    var(--ln) right 0 top var(--hc) / 1.5px var(--hl) no-repeat,
    var(--ln) right var(--hc) bottom 0 / var(--hl) 1.5px no-repeat,
    var(--ln) right 0 bottom var(--hc) / 1.5px var(--hl) no-repeat,
    var(--ln) left var(--hc) bottom 0 / var(--hl) 1.5px no-repeat,
    var(--ln) left 0 bottom var(--hc) / 1.5px var(--hl) no-repeat;
}
.empty.hud { border-style: solid; border-color: rgba(221, 225, 228, .2); }
.event-card.hud { --hc: 12px; --hl: 18px; }

main > .section:not(.vault) { background-color: #07090A; }
.page-hero {
  background:
    radial-gradient(60% 120% at 85% 0%, rgba(18, 162, 106, .14), transparent 60%),
    radial-gradient(50% 90% at 0% 100%, rgba(221, 225, 228, .07), transparent 60%),
    var(--obsidian);
}

/* ---------- Energy orbs (divider + category icons) ---------- */
.orb, .orbs i {
  --o: #12A26A; --o-hi: #9BFFD6; --o-deep: #06402A; --o-glow: rgba(18, 162, 106, .55);
  position: relative;
  display: block;
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 7%, var(--o-hi) 22%, var(--o) 58%, var(--o-deep) 100%);
  box-shadow: 0 0 8px var(--o-glow);
}
.orb::after, .orbs i::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--o-glow), transparent 68%);
  opacity: .55;
}
.orb--gold, .orbs i:nth-child(2) { --o: #DDE1E4; --o-hi: #FFFFFF; --o-deep: #4A525A; --o-glow: rgba(221, 225, 228, .55); }
.orb--ruby, .orbs i:nth-child(3) { --o: #D2304A; --o-hi: #FFA3B2; --o-deep: #5C0A18; --o-glow: rgba(210, 48, 74, .55); }
.orb--sapphire, .orbs i:nth-child(4) { --o: #2F6BFF; --o-hi: #B3CBFF; --o-deep: #0A2066; --o-glow: rgba(47, 107, 255, .55); }
.orb--amethyst, .orbs i:nth-child(5) { --o: #8E4BDB; --o-hi: #DEC2FF; --o-deep: #33115C; --o-glow: rgba(142, 75, 219, .55); }
.orb--silver, .orbs i:nth-child(6) { --o: #A7AFB6; --o-hi: #FFFFFF; --o-deep: #3E454B; --o-glow: rgba(205, 212, 218, .45); }
.orbs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(.9rem, 3vw, 1.5rem);
  padding: .9rem var(--gutter);
}
.orbs::before, .orbs::after { content: ""; flex: 0 1 140px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-line)); }
.orbs::after { background: linear-gradient(270deg, transparent, var(--gold-line)); }
.cat-tile__orb { display: inline-block; width: 11px; height: 11px; margin-right: .5em; vertical-align: .14em; }
@media (prefers-reduced-motion: no-preference) {
  .orb::after, .orbs i::after { animation: orb-pulse 3.6s ease-in-out infinite; }
  .orbs i:nth-child(2)::after { animation-delay: -.6s; }
  .orbs i:nth-child(3)::after { animation-delay: -1.2s; }
  .orbs i:nth-child(4)::after { animation-delay: -1.8s; }
  .orbs i:nth-child(5)::after { animation-delay: -2.4s; }
  .orbs i:nth-child(6)::after { animation-delay: -3s; }
}
@keyframes orb-pulse { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: .9; transform: scale(1.15); } }

/* ---------- Rarity legend (shop tooltip + vault explainer) ---------- */
.r-legend { display: grid; gap: .65rem 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
.r-legend li { display: grid; grid-template-columns: 12px auto 1fr; align-items: center; column-gap: .55rem; row-gap: .15rem; }
.r-legend__sw { grid-row: span 2; width: 12px; height: 17px; border-radius: 2px; background: var(--rf); box-shadow: 0 0 8px var(--r-glow); }
.r-legend b { font-family: var(--font-mono); font-weight: 500; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--r-text); white-space: nowrap; }
.r-legend li > span:last-child { grid-column: 2 / -1; font-size: .76rem; color: var(--ivory-dim); line-height: 1.35; }

.rguide { position: relative; }
.rguide__btn { gap: .55rem; }
.rguide__btn .pips i.on { background: var(--gold-hi); box-shadow: 0 0 6px rgba(255, 255, 255, .5); }
.rguide__pop {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  left: 0;
  width: min(340px, calc(100vw - 2 * var(--gutter)));
  display: grid;
  gap: .8rem;
  padding: 1.1rem 1.15rem 1.2rem;
  border: 1px solid rgba(221, 225, 228, .3);
  background: linear-gradient(170deg, #121815, #07090A);
}
.rguide__pop .r-legend { grid-template-columns: 1fr; }
.rguide__note { font-size: .78rem; color: var(--ivory-dim); }

.vault-foot { display: grid; justify-items: center; gap: 1.5rem; margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.vault-foot > p.mt-2 { margin-top: 0; }
.rarity-explain {
  width: min(100%, 820px);
  display: grid;
  gap: .8rem;
  padding: 1.25rem 1.4rem 1.4rem;
  border: 1px solid rgba(221, 225, 228, .25);
  background: linear-gradient(160deg, rgba(22, 28, 25, .85), rgba(7, 9, 10, .85));
}
.rarity-explain .label { color: var(--gold-hi); }
.rarity-explain > p { color: var(--ivory-dim); font-size: .92rem; max-width: 70ch; }

/* ---------- XP shipping bar ---------- */
.xp { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .6rem; font-family: var(--font-mono); font-weight: 500; font-size: .66rem; letter-spacing: .14em; }
.xp__lv { padding: .2rem .38rem; border-radius: 3px; background: var(--gold-hi); color: #0B0F0D; line-height: 1; }
.xp__segs { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; }
.xp__segs i { height: 9px; border-radius: 1px; background: var(--obsidian-3); transform: skewX(-16deg); transition: background-color .3s var(--ease); }
.xp__segs i.on { background: linear-gradient(180deg, #FFFFFF, #9AA3AB); box-shadow: 0 0 8px rgba(221, 225, 228, .45); }
.ship-progress.is-max .xp__segs i { background: linear-gradient(180deg, #5EF0B0, #12A26A); box-shadow: 0 0 8px rgba(18, 162, 106, .5); }
.ship-progress.is-max .xp__lv { background: #5EF0B0; }
.xp__pct { color: var(--ivory-dim); min-width: 3.2em; text-align: right; }

/* ---------- "+1 acquired" toast ---------- */
.acq-toast {
  position: fixed;
  z-index: 140;
  top: 80px;
  right: 12px;
  margin: 0;
  padding: .42rem .75rem;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #0B0F0D;
  background: linear-gradient(135deg, #FFFFFF, #DDE1E4);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
.acq-toast:empty { display: none; }
.acq-toast.is-on { visibility: visible; opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .acq-toast.is-on { animation: acq-rise 1.7s var(--ease) forwards; }
}
@keyframes acq-rise {
  0% { opacity: 0; transform: translateY(8px) scale(.9); }
  12% { opacity: 1; transform: none; }
  78% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-10px); }
}

/* ---------- Headline glitch on hover (120ms, once per hover) ---------- */
/* Ring gold for the shake only. Fill-mode stays none, so the letters snap back to ivory. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  main :is(h1, h2):hover { animation: glitch 120ms steps(3, end) 1; }
  /* Unsplit hero title. Beats cinema.css hero-title-glitch (gold shadows). */
  main .hero .hero__inner h1:not(:has(.hero__ln)):hover { animation: glitch 120ms steps(3, end) 1; }
  /* Split hero title: the glyphs carry this same glitch. The h1 does not also translate. */
  main .hero .hero__inner h1:hover:has(.hero__ln) { animation: none; }
  /* Intro mask stays on the glyphs. Glitch is already finished (delay -1s) until hover,
     so changing that delay does not replay the mask. Mask timing matches cinema.css. */
  .cine main .hero.is-play:not(.is-static) .hero__ln > span {
    animation-name: hero-mask, glitch;
    animation-duration: .8s, 120ms;
    animation-timing-function: cubic-bezier(.16, 1, .3, 1), steps(3, end);
    animation-delay: calc(2.32s + var(--i, 0) * .12s), -1s;
    animation-iteration-count: 1, 1;
    animation-direction: normal, normal;
    animation-fill-mode: both, none;
    animation-play-state: running, running;
  }
  .cine main .hero.is-play:not(.is-static) .hero__inner h1:hover .hero__ln > span {
    animation-delay: calc(2.32s + var(--i, 0) * .12s), 0s;
  }
}
@keyframes glitch {
  0% { color: #BEA05F; text-shadow: -2px 0 rgba(255, 40, 90, .8), 2px 0 rgba(0, 220, 255, .8); translate: 1px 0; }
  33% { color: #BEA05F; text-shadow: 2px 0 rgba(255, 40, 90, .8), -2px 0 rgba(0, 220, 255, .8); translate: -1px 0; }
  66% { color: #BEA05F; text-shadow: -1px 0 rgba(255, 40, 90, .6), 1px 0 rgba(0, 220, 255, .6); translate: 0 0; }
  100% { color: #BEA05F; text-shadow: none; translate: 0 0; }
}

/* =========================================================
   Request a quote (sell page): card list plus a trade-in estimate
   ========================================================= */
@media (max-width: 559.98px) { .hero-ctas { display: grid; } }
.panel.quote { background: #07090A; border-color: rgba(243, 239, 228, .12); }
.quote-form { display: grid; gap: 1.25rem; }
.quote :is(.input, .select, .textarea):focus { border-color: var(--btn-gold); box-shadow: 0 0 0 3px var(--btn-gold-glow); }
.quote :is(button, a, input, select, textarea):focus-visible { outline-color: var(--arc-text); }
.quote button:focus-visible,
.quote :is(input, select, textarea):focus-visible,
.quote a.quote-row__tcg:focus-visible { outline-color: var(--btn-gold-hi); }
.quote .check { min-height: 48px; align-items: center; }
.quote .check input:checked { border-color: var(--btn-gold); background: var(--btn-gold); }
.quote [aria-invalid="true"] { border-color: var(--danger); }
.quote-rows { display: grid; gap: .75rem; }
.quote-row { display: grid; gap: .5rem; padding: .9rem 1rem 1rem; border: 1px solid rgba(243, 239, 228, .08); border-radius: var(--radius-sm); background: rgba(255, 255, 255, .015); }
.quote-row__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 48px; }
.quote-row__remove { min-height: 48px; padding: 0 .9rem; margin-right: -.5rem; border: 0; border-radius: var(--radius-sm); background: none; color: var(--ivory-dim); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.quote-row__remove:hover { color: var(--ivory); }
.quote-row__fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; }
.quote .field { align-content: start; }
.quote-row__cond .select { padding-left: .85rem; }
.quote-row__tcg { display: inline-flex; align-items: center; min-height: 48px; color: var(--btn-gold); font-size: .8rem; }
.quote-row__est { display: flex; flex-wrap: wrap; gap: .35rem 1rem; align-items: baseline; margin: 0; color: var(--ivory-dim); font-size: .9rem; }
.quote-row__est[hidden] { display: none; }
.quote-row__est b { color: var(--btn-gold); font-weight: 600; }
.quote-row__est .is-on { color: var(--ivory); }
.quote-row__est-note { flex-basis: 100%; }
@media (min-width: 600.02px) {
  .quote-row__fields { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .9fr) 5.5rem; }
  .quote-row__name { grid-column: 1 / 3; }
  .quote-row__set { grid-column: 3 / -1; }
  .quote-row__cond { grid-column: 1 / 3; }
  .quote-row__qty { grid-column: 3 / 4; }
  .quote-row__price { grid-column: 1 / 3; }
  .quote-row__seal { grid-column: 3 / -1; align-self: end; }
}
@media (min-width: 1280px) {
  .quote-row__name { grid-column: 1 / 2; }
  .quote-row__set { grid-column: 2 / 3; }
  .quote-row__cond { grid-column: 3 / 4; }
  .quote-row__qty { grid-column: 4 / 5; }
  .quote-row__price { grid-column: 1 / 3; }
  .quote-row__seal { grid-column: 3 / -1; }
}
.quote-row.is-new { animation: quote-fade .15s ease-out; }
.quote-row.is-leaving { opacity: 0; transition: opacity .15s; }
@keyframes quote-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .quote-row.is-new { animation: none; }
  .quote-row.is-leaving { transition: none; }
}
.quote-add { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.quote-add .btn { --h: 48px; border-color: var(--btn-gold); color: var(--ivory); background: var(--btn-gold-fill); }
.quote-add .btn:hover:not(:disabled) { background: var(--btn-gold-fill); border-color: var(--btn-gold-hi); }
.quote-add .btn:active:not(:disabled) { border-color: var(--btn-gold-deep); }
.quote-add .btn:focus-visible { outline-color: var(--btn-gold-hi); }
.quote-totals { display: grid; gap: .65rem; padding: .9rem 1rem; border: 1px solid rgba(190, 160, 95, .35); border-radius: var(--radius-sm); background: #0c0e10; }
.quote-totals__pair { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.quote-totals__cell { display: grid; align-content: center; gap: .2rem; min-height: 48px; padding: .65rem .75rem; border: 1px solid rgba(243, 239, 228, .12); border-radius: var(--radius-sm); }
.quote-totals__cell.is-on { border-color: var(--btn-gold); background: var(--btn-gold-fill); }
.quote-totals__cell strong { font-family: var(--font-display); font-weight: 600; font-size: clamp(1rem, 4.2vw, 1.5rem); letter-spacing: -.02em; color: var(--btn-gold); overflow-wrap: anywhere; }
.quote-totals__quoted { grid-column: 1 / -1; margin: 0; color: var(--ivory-dim); font-size: .85rem; }
.quote-totals__quoted:empty { display: none; }
.quote-totals__note { margin: 0; color: var(--ivory-dim); font-size: .8rem; line-height: 1.45; }
@media (max-width: 600px) {
  .quote-totals.is-docked {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    border-radius: 0;
    border-left: 0; border-right: 0; border-bottom: 0;
    padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
    background: #07090A;
  }
  .quote-form.is-docked { padding-bottom: calc(11rem + env(safe-area-inset-bottom)); }
}
.quote-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; color: var(--silver); font-size: .95rem; }
.quote-contact { padding-top: 1.25rem; border-top: 1px solid rgba(243, 239, 228, .08); }
.quote-errors:not(:empty) { padding: .9rem 1rem; border-radius: var(--radius-sm); border: 1px solid rgba(229, 103, 90, .55); background: rgba(229, 103, 90, .1); color: var(--ivory); font-size: .9rem; }
.quote-errors ul { margin: .35rem 0 0; padding-left: 1.1rem; }
.quote-done a { color: var(--arc-text); text-decoration: underline; text-underline-offset: 2px; }
.quote-bulk { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline; color: var(--silver); }

.field__hint { font-size: .8rem; color: var(--ivory-dim); }

/* ---------- Product stage (cutout on a spotlit obsidian floor) ---------- */
.tile.tile--stage .tile__media, .gallery__main.gallery__main--stage {
  background: radial-gradient(130% 80% at 50% 100%, #101613 0%, #07090A 70%);
  isolation: isolate;
  --floor: 75%;
}
.tile.tile--stage .tile__media { border-color: rgba(221, 225, 228, .3); }
.stage__spot {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(66% 50% at 50% 48%, rgba(30, 205, 134, .55) 0%, rgba(14, 120, 78, .28) 40%, rgba(7, 9, 10, 0) 76%),
    radial-gradient(52% 10% at 50% var(--floor), rgba(18, 162, 106, .3), transparent 70%);
  opacity: .8;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0), inset 0 0 30px -8px rgba(221, 225, 228, 0);
  transition: opacity .45s var(--ease), box-shadow .45s var(--ease);
}
.stage__obj, .stage__refl { position: absolute; left: 14%; right: 14%; pointer-events: none; }
.stage__obj {
  z-index: 2; top: 13%; bottom: calc(100% - var(--floor));
  transform-origin: 50% 100%;
  transition: transform .5s var(--ease);
  will-change: transform;
}
.stage__refl {
  z-index: 1; top: var(--floor); height: calc(var(--floor) - 13%);
  opacity: .12;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 42%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 42%);
  transition: transform .5s var(--ease), opacity .5s var(--ease);
}
.tile--stage .tile__media .stage__obj img, .tile--stage .tile__media .stage__refl img,
.gallery__main--stage .stage__obj img, .gallery__main--stage .stage__refl img {
  position: absolute; inset: 0; width: 100%; height: 100%; padding: 0;
  object-fit: contain; object-position: 50% 100%;
}
.stage__refl img { transform: scaleY(-1); }
.stage__shadow {
  position: absolute; z-index: 1; left: 20%; right: 20%; top: calc(var(--floor) - 5%); height: 10%;
  border-radius: 50%; background: #000; opacity: .5; filter: blur(18px); pointer-events: none;
  transition: transform .5s var(--ease), opacity .5s var(--ease);
}
.tile--stage:hover .stage__spot, .gallery__main--stage:hover .stage__spot {
  opacity: 1;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), inset 0 0 30px -8px rgba(221, 225, 228, .55);
}
.tile.tile--stage .tile__media:hover, .gallery__main--stage:hover { border-color: rgba(255, 255, 255, .75); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .9), 0 0 40px -12px rgba(221, 225, 228, .55); }
@media (prefers-reduced-motion: no-preference) {
  .tile--stage:hover .stage__shadow, .gallery__main--stage:hover .stage__shadow { transform: scale(.88); opacity: .36; }
  .tile--stage:hover .stage__refl, .gallery__main--stage:hover .stage__refl { transform: translateY(8px); opacity: .09; }
  .tile--stage:focus-within .stage__obj { transform: translateY(-8px) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) { .stage__obj { transform: none !important; transition: none; } }
.gallery__main.gallery__main--stage { --floor: 76%; }

/* Products without a cutout: original photo on a light rounded panel */
.tile.tile--photo .tile__media { background: radial-gradient(90% 60% at 50% 0%, rgba(18, 162, 106, .1), transparent 70%), #0B0F0D; }
.tile--photo .tile__media img { inset: 7%; width: 86%; height: 86%; padding: 6%; background: #fff; border-radius: 12px; box-shadow: 0 18px 30px -16px rgba(0, 0, 0, .85); }
.gallery__main.gallery__main--photo { background: radial-gradient(90% 60% at 50% 0%, rgba(18, 162, 106, .12), transparent 70%), #0B0F0D; }
.gallery__main--photo img { position: absolute; inset: 6%; width: 88%; height: 88%; padding: 6%; background: #fff; border-radius: 14px; box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .85); }
.tile--stage .foil, .gallery__main--stage .foil { display: none; }

/* =========================================================
   Inventory (home) + slot cards (all product grids except the Vault)
   ========================================================= */
main > .section.inv { padding-block: clamp(80px, 9vw, 130px) clamp(80px, 8vw, 120px); background: linear-gradient(180deg, #0A0D0C, #07090A); }
.inv__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: clamp(32px, 4vw, 54px); }
.inv__eyebrow { margin-bottom: 16px; font-family: var(--font-mono); font-weight: 500; font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase; color: var(--arc-text); }
.inv h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 3.6vw, 54px); line-height: 1.05; letter-spacing: -.035em; color: var(--ivory); }
.inv__head .btn { padding: 16px 28px; font-size: 12px; border-radius: 0; }
.slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 979.98px) { .slots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .slots { gap: 12px; } }

.slot {
  --c: #DDE1E4;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 18px 18px 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01));
  border: 1px solid rgba(255, 255, 255, .08);
  transition: translate .22s ease, box-shadow .22s ease;
}
.slot[data-status="stock"] { --c: #12A26A; }
.slot[data-status="sold"] { --c: rgba(185, 180, 166, .45); }
.slot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--c); }
@media (hover: hover) and (pointer: fine) { .slot:hover { translate: 0 -4px; box-shadow: 0 18px 40px rgba(0, 0, 0, .45); } }
.js .slot.reveal { opacity: 1; transform: none; }
.js .slot.reveal:not(.is-in) { opacity: 0; transform: translateY(24px); }
.js .slot.reveal.is-in { transition: translate .22s ease, box-shadow .22s ease; animation: slot-in .65s var(--ease) var(--d, 0ms) backwards; }
@keyframes slot-in { from { opacity: 0; transform: translateY(24px); } }
.slot__case {
  position: relative;
  height: 312px;
  padding: 36px 12% 48px;
  display: grid;
  place-items: center;
  background: radial-gradient(60% 55% at 50% 38%, rgba(235, 242, 248, .10), transparent 70%);
}
.slot__case::after { content: ""; position: absolute; bottom: 18px; left: 20%; width: 60%; height: 12px; border-radius: 50%; background: radial-gradient(closest-side, rgba(235, 242, 248, .35), transparent); }
.slot__img {
  position: relative; z-index: 1;
  width: auto; height: auto; max-width: 100%; max-height: 228px;
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .65));
  transition: transform .5s var(--ease);
}
.slot__img--photo { width: min(92%, 196px); max-height: 196px; object-fit: contain; padding: 8px; background: #fff; border-radius: 10px; }
.slot__case > .cb, .slot__case > .card-back { position: absolute; inset: 10px 24% 34px; }
.slot.is-sold .slot__img { filter: grayscale(1) brightness(.6) drop-shadow(0 18px 22px rgba(0, 0, 0, .65)); }
.slot__body { display: flex; flex-direction: column; gap: .4rem; flex: 1; min-width: 0; }
.slot .slot__name { margin: 10px 0 14px; min-height: 40px; font-family: var(--font-display); font-weight: 600; font-size: 15px; line-height: 1.3; letter-spacing: -.01em; color: var(--ivory); }
.slot .slot__name a::before { border-radius: 0; }
.slot__pr { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: auto; }
.slot__pr .price { font-family: var(--font-mono); font-weight: 500; font-size: 15px; letter-spacing: .04em; color: var(--ivory); }
.slot__tag { padding: 3px 8px; border: 1px solid var(--c); color: var(--c); font-family: var(--font-mono); font-weight: 500; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; }
.slot[data-status="stock"] .slot__tag { color: var(--arc-text); }
.slot[data-status="pre"] .slot__tag { color: var(--gold-hi); }
.slot .tile__cta { margin-top: 14px; padding-top: 0; }
.slot .tile__cta .btn { --h: 42px; padding-inline: .5rem; font-size: .68rem; letter-spacing: .18em; border-radius: 0; }
.slot.skel .slot__case { background: rgba(255, 255, 255, .025); }
.slot.skel .slot__body { min-height: 150px; padding-top: 14px; }
@media (max-width: 520px) {
  .slot { padding: 12px 12px 16px; }
  .slot__case { height: 204px; padding: 24px 10% 32px; }
  .slot__img { max-height: 148px; }
  .slot__img--photo { width: min(92%, 128px); max-height: 128px; padding: 5px; }
  .slot .slot__name { font-size: 14px; min-height: 36px; margin: 8px 0 10px; }
  .slot__pr .price { font-size: 14px; }
  .slot__tag { font-size: 9px; letter-spacing: .14em; padding: 2px 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .slot, .slot__img { transition: none; }
  .slot:hover { translate: none; }
  .slot:hover .slot__img { transform: none; }
}
.slot .slot__name { -webkit-line-clamp: 3; line-clamp: 3; }

/* Pre-orders: 1 / 2 / 3 columns; a lone last card spans the row and lies horizontal. */
.grid.grid--po { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .grid.grid--po { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 640px) and (max-width: 999.98px) {
  .grid--po > .slot:last-child:nth-child(2n+1) { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: auto 1fr; column-gap: clamp(1rem, 3vw, 2.5rem); align-items: start; }
  .grid--po > .slot:last-child:nth-child(2n+1) > .slot__case { grid-column: 1; grid-row: 1 / span 2; }
  .grid--po > .slot:last-child:nth-child(2n+1) > .slot__body { grid-column: 2; }
}
@media (min-width: 1000px) {
  .grid.grid--po { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--po > .slot:last-child:nth-child(3n+1) { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: auto 1fr; column-gap: clamp(1rem, 3vw, 2.5rem); align-items: start; }
  .grid--po > .slot:last-child:nth-child(3n+1) > .slot__case { grid-column: 1; grid-row: 1 / span 2; }
  .grid--po > .slot:last-child:nth-child(3n+1) > .slot__body { grid-column: 2; }
}

/* Drop alerts section signup (markup shared with the footer form) */
.drop-signup { width: 100%; max-width: 520px; min-height: 84px; }
.drop-signup__form { display: grid; gap: .75rem; }
.drop-signup__form .inline-form { gap: .625rem; flex-wrap: nowrap; }
.drop-signup__form .input {
  min-height: 52px;
  background: rgba(255, 255, 255, .04);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(221, 225, 228, .3);
  border-radius: 2px;
}
.drop-signup__form .input:focus { border-color: var(--arc); box-shadow: 0 0 0 3px rgba(18, 162, 106, .35); }
.drop-signup__form .btn { --h: 52px; flex: none; padding-inline: 1.75rem; }
.drop-signup__form .btn:disabled { opacity: .75; cursor: progress; }
.drop-signup__form .form-msg { min-height: 1.4em; margin: 0; text-align: center; }
@media (max-width: 560px) {
  .drop-signup__form .inline-form { flex-direction: column; }
  .drop-signup__form .input, .drop-signup__form .btn { width: 100%; flex: none; }
}

/* Meet the shop: staggered pair of shop photos (config.shopPhotosApproved) */
.story__pair { display: grid; gap: .75rem; }
.story__shot { position: relative; margin: 0; overflow: hidden; border: 1px solid rgba(221, 225, 228, .3); border-radius: 12px; background: #0E1012; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .65), 0 10px 24px rgba(0, 0, 0, .35); }
.story__shot img { display: block; width: 100%; height: auto; }
@media (min-width: 900px) {
  .story__pair { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0; align-items: start; }
  .story__shot--1 { grid-column: 1 / 8; grid-row: 1; z-index: 1; }
  .story__shot--2 { grid-column: 7 / 13; grid-row: 1; z-index: 2; margin-top: 48px; }
}
@media (prefers-reduced-motion: no-preference) {
  .story__shot { animation: story-float 8s ease-in-out infinite alternate; }
  .story__shot--2 { animation-delay: -4s; }
}
@keyframes story-float { from { translate: 0 -6px; } to { translate: 0 6px; } }
.drop-signup__form .form-msg { font-weight: 500; text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 0 18px rgba(7, 9, 10, .95); }
.drop-signup__form .form-msg.gold { color: var(--arc-text); }
.quote-facts { list-style: none; padding: 0; margin: .25rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---------- Weekly buy list + Friday seat ---------- */
.signup-panel { max-width: 640px; }
.buy-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.buy-list li {
  display: grid;
  gap: .75rem;
  padding: 1rem 1.15rem;
  border: 1px solid rgba(190, 160, 95, .35);
  border-radius: var(--radius);
  background: #0c0e10;
}
.buy-list strong { display: block; font-family: var(--font-display); font-weight: 500; color: var(--ivory); }
.buy-list li > div > span { display: block; margin-top: .2rem; color: var(--ivory-dim); font-size: .95rem; }
.buy-list__pay { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; color: var(--ivory-dim); font-size: .95rem; }
.buy-list__pay b { color: var(--btn-gold); font-family: var(--font-mono); font-weight: 500; }
.buy-list__empty, .buy-list__fine { margin: 0; color: var(--ivory-dim); max-width: 62ch; font-size: .95rem; }
.buy-list__fine { margin-top: .85rem; }
@media (min-width: 700px) {
  .buy-list li { grid-template-columns: 1fr auto; align-items: center; }
}

/* ---------- Our story (config.showAbout). Gold accents only. ---------- */
.about { display: grid; gap: clamp(2rem, 4.5vw, 3.25rem); color: var(--ivory); background: transparent; }
.about__lead { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (min-width: 900px) {
  .about__lead { grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); align-items: end; }
}
.about__copy { display: grid; gap: 1rem; min-width: 0; }
.about .eyebrow { color: #BEA05F; }
.about .eyebrow::before { background: #BEA05F; }
.about__copy h1,
.about__copy h2 { max-width: 12em; font-size: clamp(2.15rem, 5vw, 4.4rem); }
.about__intro,
.about__block p,
.about__close { font-family: var(--font-body); }
.about__intro { margin: 0; max-width: 42ch; color: var(--ivory-dim); font-size: clamp(1.05rem, 1.5vw, 1.2rem); }
.about__frame {
  margin: 0;
  border: 1px solid rgba(190, 160, 95, .45);
  border-radius: 12px;
  overflow: hidden;
  background: #101214;
  box-shadow: 0 24px 50px -28px rgba(0, 0, 0, .8);
}
.about__frame img { display: block; width: 100%; height: auto; }
.about__ph {
  position: relative;
  aspect-ratio: 3 / 2;
  background:
    radial-gradient(120% 80% at 50% 100%, rgba(190, 160, 95, .16), transparent 55%),
    #101214;
}
.about__ph::before,
.about__ph::after {
  content: "";
  position: absolute;
  width: 28px;
  height: 28px;
  border-color: #BEA05F;
  border-style: solid;
}
.about__ph::before { top: 14px; left: 14px; border-width: 1px 0 0 1px; }
.about__ph::after { right: 14px; bottom: 14px; border-width: 0 1px 1px 0; }
@media (min-width: 900px) { .about__ph { aspect-ratio: 4 / 5; } }
.about__blocks { display: grid; gap: 1rem; }
@media (min-width: 800px) { .about__blocks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.about__block {
  display: grid;
  gap: .55rem;
  align-content: start;
  padding: 1.15rem 1.2rem 1.25rem;
  border: 1px solid rgba(190, 160, 95, .35);
  border-radius: var(--radius);
  background: #0c0e10;
}
.about__block h3 { color: var(--ivory); font-size: 1.15rem; }
.about__block p { margin: 0; color: var(--ivory-dim); font-size: .98rem; }
.about__close {
  margin: 0;
  max-width: 36em;
  color: var(--ivory);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  line-height: 1.45;
}
@media (max-width: 520px) {
  .about .cluster { flex-direction: column; align-items: stretch; }
  .about .cluster .btn { width: 100%; }
}

/* ---------- Policy pages ---------- */
.legal { max-width: 68ch; display: grid; gap: .9rem; color: var(--ivory-dim); }
.legal h2 { font-size: clamp(1.15rem, 2.4vw, 1.4rem); color: var(--ivory); margin-top: 1.25rem; }
.legal h2:first-child { margin-top: 0; }
.legal ul { padding-left: 1.2rem; display: grid; gap: .45rem; }
.legal b { color: var(--ivory); font-weight: 600; }
.legal a { color: var(--ivory); text-decoration: underline; text-decoration-color: var(--arc); text-underline-offset: 3px; }
.legal__updated { margin-top: 1.5rem; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }

/* ---------- Footer: policies row ---------- */
.footer-policies { border-top: 1px solid rgba(221, 225, 228, .12); padding-block: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.5rem; }
.footer-policies h3 { font-family: var(--font-mono); font-weight: 500; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.footer-policies ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.footer-policies a { display: inline-flex; align-items: center; min-height: 40px; color: var(--ivory-dim); font-size: .94rem; transition: color .2s; }
.footer-policies a:hover { color: var(--gold-hi); }

/* ---------- Mobile tap targets (40px min) ---------- */
@media (max-width: 899.98px) {
  .rating__link, .contact-lines a[href^="tel:"] { display: inline-block; padding-block: .6rem; margin-block: -.6rem; }
  .contact-lines a[href^="tel:"] { border-bottom: 0; text-decoration: underline; text-decoration-color: var(--gold-line); text-decoration-thickness: 1px; text-underline-offset: 4px; }
  .footer-want .link-btn { min-height: 40px; }
  .footer-bottom .site-credit { min-height: 40px; }
}