/* =========================================================================
   MALICE CARTEL RECORDS — core stylesheet
   Plain CSS, no preprocessor, no framework. Organised top-to-bottom:
   tokens -> reset -> layout -> type -> components -> pages -> utilities
   ========================================================================= */

/* ---------- tokens ------------------------------------------------------ */
:root{
  /* colour */
  --bg:        #0b0b0a;
  --bg-raised: #151412;
  --bg-card:   #1b1a17;
  --ink:       #ece7da;
  --ink-dim:   #a39c8c;
  --ink-faint: #6f6a5e;
  --rust:      #c1401f;
  --rust-dim:  #8f2f16;
  --gold:      #d9a441;
  --line:      rgba(236,231,218,.14);
  --line-soft: rgba(236,231,218,.08);

  /* type */
  --f-display: 'Anton', Impact, 'Arial Narrow Bold', sans-serif;
  --f-label:   'Barlow Condensed', 'Arial Narrow', sans-serif;
  --f-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* layout */
  --wrap: 1240px;
  --gap:  1.5rem;
  --radius: 2px;

  color-scheme: dark;
}

/* ---------- reset --------------------------------------------------------*/
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,p,figure{ margin: 0; }
input, select{ font: inherit; color: inherit; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- grain signature ---------------------------------------------
   Fixed full-viewport noise layer, mixed on top of everything. This is the
   one deliberate "risk" element: it gives every flat colour block the
   texture of a xeroxed show flyer instead of a clean digital surface.     */
.grain{
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- layout shell -------------------------------------------------*/
.wrap{ max-width: var(--wrap); margin-inline: auto; padding-inline: 1.5rem; }
main{ display: block; }
.section{ padding-block: clamp(3rem, 7vw, 6.5rem); }
.section-tight{ padding-block: clamp(2rem, 4vw, 3.5rem); }
.section-head{
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--line);
  padding-bottom: 1rem;
}
.section-head h2{ margin: 0; }
.section-head .see-all{ font-family: var(--f-label); text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; color: var(--ink-dim); white-space: nowrap; }
.section-head .see-all:hover{ color: var(--gold); }

/* ---------- type ---------------------------------------------------------*/
.eyebrow{
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--f-label); text-transform: uppercase;
  letter-spacing: .2em; font-size: .8rem; font-weight: 600;
  color: var(--gold);
}
.eyebrow::before{ content: ''; width: 1.4em; height: 1px; background: var(--gold); display: inline-block; }

h1, .h1{ font-family: var(--f-display); font-weight: 400; text-transform: uppercase; line-height: .92; letter-spacing: .01em; font-size: clamp(2.8rem, 8vw, 6.4rem); }
h2, .h2{ font-family: var(--f-display); font-weight: 400; text-transform: uppercase; line-height: .96; font-size: clamp(1.9rem, 4vw, 3rem); }
h3, .h3{ font-family: var(--f-display); font-weight: 400; text-transform: uppercase; line-height: 1; font-size: clamp(1.25rem, 2.4vw, 1.7rem); }
.lede{ font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--ink-dim); max-width: 54ch; }
.prose p + p{ margin-top: 1em; }
.prose{ color: var(--ink-dim); max-width: 62ch; }
.mono{ font-family: var(--f-mono); letter-spacing: .01em; }
.label{ font-family: var(--f-label); text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; font-weight: 600; color: var(--ink-dim); }

/* ---------- buttons -------------------------------------------------------*/
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--f-label); text-transform: uppercase; letter-spacing: .1em; font-weight: 600;
  font-size: .95rem;
  padding: .95em 1.7em;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.btn-solid{ background: var(--rust); border-color: var(--rust); color: #fff; }
.btn-solid:hover{ background: #d84a26; border-color: #d84a26; }
.btn-ghost{ background: transparent; color: var(--ink); }
.btn-ghost:hover{ border-color: var(--gold); color: var(--gold); }
.btn-block{ width: 100%; }
.btn[disabled]{ opacity: .45; cursor: not-allowed; transform: none; }
.btn-sm{ padding: .55em 1em; font-size: .8rem; }

/* ---------- header --------------------------------------------------------*/
.site-header{
  position: sticky; top: 0; z-index: 60;
  background: rgba(11,11,10,.88);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line-soft);
}
.site-header .wrap{ display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 76px; }
.site-header .logo img{ height: 70px; width: auto; }
.primary-nav{ display: none; }
.primary-nav ul{ display: flex; align-items: center; gap: 1.9rem; }
.primary-nav a{
  font-family: var(--f-label); text-transform: uppercase; letter-spacing: .12em; font-size: 1.3rem; font-weight: 600;
  color: var(--ink-dim); padding-block: .3rem; border-bottom: 2px solid transparent;
}
.primary-nav a:hover, .primary-nav a.is-active{ color: var(--ink); border-color: var(--rust); }
@media (min-width: 900px){ .primary-nav{ display: block; } }

.header-actions{ display: flex; align-items: center; gap: .35rem; }
.icon-btn{ position: relative; padding: .55rem; border-radius: var(--radius); }
.icon-btn:hover{ color: var(--gold); }
.icon-btn svg{ width: 22px; height: 22px; }
.cart-count{
  position: absolute; top: 2px; right: 2px;
  background: var(--rust); color: #fff; font-family: var(--f-mono);
  font-size: .62rem; line-height: 1; min-width: 16px; height: 16px;
  border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 3px;
}
.nav-toggle{ display: inline-flex; }
@media (min-width: 900px){ .nav-toggle{ display: none; } }

.mobile-nav{
  display: none;
  border-top: 1px solid var(--line-soft);
  background: var(--bg);
}
.mobile-nav.is-open{ display: block; }
.mobile-nav ul{ display: flex; flex-direction: column; padding: .5rem 1.5rem 1.25rem; }
.mobile-nav a{ display: block; padding: .7rem 0; font-family: var(--f-label); text-transform: uppercase; letter-spacing: .1em; font-size: 1rem; border-bottom: 1px solid var(--line-soft); color: var(--ink-dim); }
.mobile-nav a.is-active{ color: var(--gold); }
@media (min-width: 900px){ .mobile-nav{ display: none !important; } }

/* ---------- ticker ---------------------------------------------------------*/
.ticker{ background: var(--rust); color: #fff; overflow: hidden; border-block: 1px solid rgba(0,0,0,.25); }
.ticker__track{ display: flex; width: max-content; animation: ticker 26s linear infinite; }
.ticker__item{
  font-family: var(--f-label); text-transform: uppercase; letter-spacing: .14em; font-weight: 700; font-size: .82rem;
  padding: .6rem 1.4rem; white-space: nowrap; display: flex; align-items: center; gap: 1.4rem;
}
.ticker__item::after{ content: '\2726'; opacity: .7; font-size: .7rem; }
@keyframes ticker{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* ---------- hero ------------------------------------------------------------*/
.hero{ position: relative; min-height: min(92vh, 880px); display: flex; align-items: flex-end; overflow: hidden; }
.hero__media{ position: absolute; inset: 0; z-index: 0; }
.hero__media img{ width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; filter: grayscale(.15) contrast(1.08); }
.hero__media::after{
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(11,11,10,.97) 4%, rgba(11,11,10,.55) 46%, rgba(11,11,10,.35) 100%);
}
.hero__body{ position: relative; z-index: 1; width: 100%; padding-block: clamp(2.5rem, 8vw, 5rem); }
.hero__title{ margin-block: .5rem 1rem; }
.hero__title .line{ display: block; }
.hero__title .line--accent{ color: var(--rust); -webkit-text-stroke: 1px var(--rust); }
.hero__actions{ display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.75rem; }
.hero__meta{ display: flex; gap: 1.75rem; margin-top: 2.5rem; flex-wrap: wrap; }
.hero__meta div{ font-family: var(--f-mono); font-size: .78rem; color: var(--ink-dim); }
.hero__meta strong{ display: block; color: var(--ink); font-family: var(--f-label); text-transform: uppercase; letter-spacing: .08em; font-size: .95rem; font-weight: 700; margin-bottom: .15rem; }

/* ---------- flyer card (product / news / band) ------------------------------*/
.flyer{
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--line);
  padding: .85rem .85rem 1.1rem;
}
.flyer::before{ /* gaffer-tape corner */
  content: '';
  position: absolute; top: -10px; left: 18px;
  width: 64px; height: 22px;
  background: rgba(236,231,218,.16);
  border: 1px solid rgba(236,231,218,.1);
  transform: rotate(-3deg);
  box-shadow: 0 2px 4px rgba(0,0,0,.35);
}
.flyer__media{ position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #0f0e0c; margin-bottom: 1rem; }
.flyer__media img{ width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.flyer:hover .flyer__media img{ transform: scale(1.045); }
.flyer__tag{
  position: absolute; top: .6rem; left: .6rem; z-index: 2;
  background: var(--gold); color: #191204; font-family: var(--f-mono); font-size: .68rem; font-weight: 700;
  padding: .25em .55em; text-transform: uppercase; letter-spacing: .05em;
}
.flyer__band{ font-family: var(--f-mono); font-size: .7rem; color: var(--rust); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .3rem; }
.flyer__title{ font-family: var(--f-label); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: 1.05rem; line-height: 1.15; }
.flyer__row{ display: flex; align-items: center; justify-content: space-between; margin-top: .6rem; gap: .75rem; }
.flyer__price{ font-family: var(--f-mono); font-size: .95rem; color: var(--ink); }

/* product grid */
.grid{ display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.grid-2{ display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 720px){ .grid-2{ grid-template-columns: 1fr 1fr; } }

/* ---------- band spotlight ----------------------------------------------------*/
.spotlight{ display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px){ .spotlight{ grid-template-columns: 1fr 1fr; gap: 3.5rem; } .spotlight--reverse{ direction: rtl; } .spotlight--reverse > *{ direction: ltr; } }
.spotlight__media{ position: relative; }
.spotlight__media img{ width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.spotlight__media::after{ content:''; position:absolute; inset: -10px auto auto -10px; width: 100%; height: 100%; border: 1px solid var(--line); z-index: -1; }
.tape{ position: absolute; width: 80px; height: 26px; background: rgba(236,231,218,.14); border: 1px solid rgba(236,231,218,.08); box-shadow: 0 3px 6px rgba(0,0,0,.4); }
.tape--tl{ top: -12px; left: -14px; transform: rotate(-8deg); }
.tape--br{ bottom: -12px; right: -14px; transform: rotate(6deg); }

/* ---------- band jump nav (bands.php, only rendered for 2+ bands) -------------*/
.band-jump{
  position: sticky; top: 76px; z-index: 40;
  background: rgba(11,11,10,.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line-soft);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.band-jump__inner{ display: flex; gap: .6rem; padding-block: .85rem; }
.band-jump a{
  font-family: var(--f-label); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; font-size: .85rem;
  padding: .5em 1.1em; border: 1px solid var(--line); border-radius: 999px; white-space: nowrap; color: var(--ink-dim);
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.band-jump a:hover{ color: var(--ink); border-color: var(--ink-dim); }
.band-jump a.is-active{ color: #191204; background: var(--gold); border-color: var(--gold); }

/* ---------- band section (one per roster entry) --------------------------------*/
.band-block{
  padding-block: clamp(3rem, 6vw, 5rem);
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 132px;
}
.band-block:last-of-type{ border-bottom: 0; }
.band-block__media{ margin-top: clamp(2.5rem, 5vw, 4rem); }

/* ---------- mixed media grid (photos, self-hosted video, embeds) ---------------- */
.media-grid{ display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.media-card{
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 75%; /* 4:3 box via the padding-percentage trick -- gives every
                        browser an unambiguous, definite pixel height */
  overflow: hidden;
  background: #0f0e0c;
  border: 1px solid var(--line);
}
.media-card img{
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease;
}
.media-card:hover img{ transform: scale(1.045); }
/* Self-hosted video: we show our own poster <img> by default (same
   proven object-fit:cover treatment as photos), with a play button on
   top. The <video> underneath uses preload="none" -- nothing is
   downloaded until someone actually clicks play. */
.media-card__link{ position: absolute; inset: 0; display: block; }
.media-card__play{
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 54px; height: 54px; border-radius: 50%; z-index: 1;
  background: rgba(11,11,10,.72); border: 2px solid var(--ink); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
  pointer-events: none;
}
.media-card__play svg{ margin-left: 2px; }
.media-card__link:hover .media-card__play{ background: var(--rust); border-color: var(--rust); transform: translate(-50%, -50%) scale(1.08); }

.media-card__embed{ position: absolute; inset: 0; overflow: hidden; }
.media-card__embed iframe{
  position: absolute; top: 50%; left: 50%;
  width: 178%; height: 100%;
  transform: translate(-50%, -50%);
  border: 0;
}
.media-card__tag{
  position: absolute; top: .6rem; left: .6rem; z-index: 2;
  background: var(--gold); color: #191204; font-family: var(--f-mono); font-size: .68rem; font-weight: 700;
  padding: .25em .55em; text-transform: uppercase; letter-spacing: .05em;
  pointer-events: none;
}
.media-card--video .media-card__tag,
.media-card--embed .media-card__tag{ background: var(--rust); color: #fff; }
.media-card figcaption{
  position: absolute; left: 0; right: 0; bottom: 0; padding: .8rem .9rem;
  background: linear-gradient(0deg, rgba(0,0,0,.88), transparent);
  font-family: var(--f-label); text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; color: var(--ink);
  pointer-events: none;
}

/* ---------- pit strip ----------------------------------------------------------*/
.pit-strip{ display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 720px){ .pit-strip{ grid-template-columns: 1.3fr 1fr; } }
.pit-strip figure{ position: relative; overflow: hidden; background: #0f0e0c; }
.pit-strip img{ width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.12); min-height: 260px; }
.pit-strip figcaption{
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.1rem 1.2rem;
  background: linear-gradient(0deg, rgba(0,0,0,.85), transparent);
  font-family: var(--f-label); text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; color: var(--ink);
}

/* ---------- CTA band -------------------------------------------------------------*/
.cta-band{ border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-raised); }
.cta-band .wrap{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 2.5rem; }
.cta-band form{ display: flex; gap: .6rem; flex-wrap: wrap; }
.cta-band input[type="email"]{
  background: var(--bg); border: 1px solid var(--line); color: var(--ink); padding: .85em 1em; min-width: 260px; border-radius: var(--radius);
}
.cta-band input[type="email"]:focus{ border-color: var(--gold); }

/* ---------- footer ------------------------------------------------------------------*/
.site-footer{ border-top: 1px solid var(--line); padding-block: 3.5rem 2rem; }
.footer-grid{ display: grid; gap: 2.5rem; grid-template-columns: 1fr; margin-bottom: 2.5rem; }
@media (min-width: 800px){ .footer-grid{ grid-template-columns: 1.3fr 1fr 1fr; } }
.footer-grid img{ height: 150px; margin-bottom: .9rem; }
.footer-grid p{ color: var(--ink-dim); max-width: 34ch; font-size: .92rem; }
.footer-col h4{ font-family: var(--f-label); text-transform: uppercase; letter-spacing: .1em; font-size: .82rem; color: var(--ink-dim); margin-bottom: .9rem; }
.footer-col ul{ display: flex; flex-direction: column; gap: .55rem; }
.footer-col a:hover{ color: var(--gold); }
.footer-bottom{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 1.75rem; border-top: 1px solid var(--line-soft); font-family: var(--f-mono); font-size: .75rem; color: var(--ink-faint); }

/* ---------- page header (interior pages) ---------------------------------------------*/
.page-head{ padding-block: clamp(2.5rem, 6vw, 4.5rem) 2rem; border-bottom: 1px solid var(--line); }
.breadcrumb{ font-family: var(--f-mono); font-size: .75rem; color: var(--ink-faint); margin-bottom: 1rem; }
.breadcrumb a:hover{ color: var(--gold); }

/* ---------- store toolbar ----------------------------------------------------------*/
.store-toolbar{ display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.count-pill{ font-family: var(--f-mono); font-size: .78rem; color: var(--ink-dim); }

/* ---------- product detail ----------------------------------------------------------*/
.product{ display: grid; gap: 3rem; grid-template-columns: 1fr; }
@media (min-width: 900px){ .product{ grid-template-columns: 1.05fr 1fr; gap: 4rem; } }
.product__gallery{ position: relative; background: #0f0e0c; border: 1px solid var(--line); }
.product__gallery img{ width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.product__title{ margin-bottom: .35rem; }
.product__band{ color: var(--rust); }
.product__price{ font-family: var(--f-mono); font-size: 1.4rem; margin-block: 1rem 1.5rem; }
.size-grid{ display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: .5rem; }
.size-opt{
  min-width: 3rem; text-align: center;
  border: 1px solid var(--line); padding: .6em .3em; font-family: var(--f-mono); font-size: .85rem;
  border-radius: var(--radius); background: transparent;
}
.size-opt:hover{ border-color: var(--ink-dim); }
.size-opt.is-selected{ border-color: var(--gold); color: var(--gold); background: rgba(217,164,65,.08); }
.qty-row{ display: flex; align-items: center; gap: .75rem; margin-block: 1.5rem; }
.qty-stepper{ display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); }
.qty-stepper button{ padding: .6em .95em; font-family: var(--f-mono); }
.qty-stepper button:hover{ color: var(--gold); }
.qty-stepper span{ min-width: 2.4em; text-align: center; font-family: var(--f-mono); }
.product__actions{ display: flex; gap: .8rem; flex-wrap: wrap; margin-top: .5rem; }
.product__note{ margin-top: .6rem; font-size: .82rem; color: var(--ink-faint); min-height: 1.2em; }
.accordion{ margin-top: 2.25rem; border-top: 1px solid var(--line); }
.accordion__item{ border-bottom: 1px solid var(--line); }
.accordion__trigger{ width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; font-family: var(--f-label); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; font-size: .9rem; }
.accordion__trigger .plus{ transition: transform .2s ease; }
.accordion__item.is-open .plus{ transform: rotate(45deg); }
.accordion__panel{ display: none; padding-bottom: 1.1rem; color: var(--ink-dim); font-size: .92rem; }
.accordion__item.is-open .accordion__panel{ display: block; }

/* ---------- cart drawer ----------------------------------------------------------------*/
.overlay{ position: fixed; inset: 0; background: rgba(0,0,0,.6); opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 80; }
.overlay.is-open{ opacity: 1; pointer-events: auto; }
.cart-drawer{
  position: fixed; top: 0; right: 0; height: 100%; width: min(420px, 100%);
  background: var(--bg-raised); border-left: 1px solid var(--line);
  transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1);
  z-index: 90; display: flex; flex-direction: column;
}
.cart-drawer.is-open{ transform: translateX(0); }
.cart-drawer__head{ display: flex; align-items: center; justify-content: space-between; padding: 1.35rem 1.5rem; border-bottom: 1px solid var(--line); }
.cart-drawer__head h2{ font-size: 1.3rem; }
.cart-drawer__items{ flex: 1; overflow-y: auto; padding: 1rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.cart-empty{ display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--ink-faint); gap: .75rem; text-align: center; }
.cart-line{ display: flex; gap: .85rem; border: 1px solid var(--line); padding: .7rem; background: var(--bg-card); }
.cart-line img{ width: 64px; height: 64px; object-fit: cover; border: 1px solid var(--line); }
.cart-line__info{ flex: 1; min-width: 0; }
.cart-line__title{ font-family: var(--f-label); text-transform: uppercase; font-weight: 700; font-size: .9rem; letter-spacing: .02em; }
.cart-line__meta{ font-family: var(--f-mono); font-size: .75rem; color: var(--ink-dim); margin-top: .2rem; }
.cart-line__foot{ display: flex; align-items: center; justify-content: space-between; margin-top: .5rem; }
.cart-line__remove{ font-family: var(--f-mono); font-size: .72rem; color: var(--ink-faint); text-decoration: underline; }
.cart-line__remove:hover{ color: var(--rust); }
.cart-drawer__foot{ border-top: 1px solid var(--line); padding: 1.35rem 1.5rem 1.6rem; }
.cart-total-row{ display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1rem; }
.cart-total-row .amount{ font-family: var(--f-mono); font-size: 1.3rem; }
.cart-drawer__foot .hint{ font-size: .74rem; color: var(--ink-faint); margin-top: .7rem; text-align: center; }

/* ---------- toast --------------------------------------------------------------------------*/
.toast{
  position: fixed; left: 50%; bottom: 1.5rem; transform: translate(-50%, 10px);
  background: var(--bg-card); border: 1px solid var(--line); color: var(--ink);
  padding: .8em 1.2em; font-family: var(--f-label); text-transform: uppercase; letter-spacing: .06em; font-size: .82rem;
  z-index: 120; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
  border-left: 3px solid var(--gold);
}
.toast.is-visible{ opacity: 1; transform: translate(-50%, 0); }
.toast.is-error{ border-left-color: var(--rust); }

/* ---------- listing pages (news / blog) -----------------------------------------------------*/
.post-row{ display: grid; gap: 1.5rem; grid-template-columns: 1fr; padding-block: 2rem; border-bottom: 1px solid var(--line); }
@media (min-width: 720px){ .post-row{ grid-template-columns: 220px 1fr; align-items: start; } }
.post-row img{ width: 100%; aspect-ratio: 4/3; object-fit: cover; filter: grayscale(.3); }
.post-row .flyer__tag{ position: static; display: inline-block; margin-bottom: .6rem; }
.post-row time{ display: block; font-family: var(--f-mono); font-size: .75rem; color: var(--ink-faint); margin-bottom: .3rem; }

/* ---------- fansite gallery ------------------------------------------------------------------*/
.wall{ columns: 1; gap: var(--gap); }
@media (min-width: 640px){ .wall{ columns: 2; } }
@media (min-width: 980px){ .wall{ columns: 3; } }
.wall figure{ break-inside: avoid; margin-bottom: var(--gap); border: 1px solid var(--line); background: var(--bg-card); padding: .6rem .6rem .9rem; }
.wall img{ width: 100%; filter: grayscale(1) contrast(1.1); }
.wall figcaption{ font-family: var(--f-mono); font-size: .72rem; color: var(--ink-faint); padding-top: .5rem; }

/* ---------- misc pages (success/cancel) --------------------------------------------------------*/
.status-page{ min-height: 60vh; display: flex; align-items: center; justify-content: center; text-align: center; padding-block: 4rem; }
.status-page .icon{ width: 56px; height: 56px; margin-inline: auto 1.25rem; }
.order-box{ margin-top: 2rem; border: 1px solid var(--line); background: var(--bg-card); padding: 1.5rem; text-align: left; max-width: 420px; margin-inline: auto; font-family: var(--f-mono); font-size: .85rem; color: var(--ink-dim); }
.order-box dt{ color: var(--ink-faint); }
.order-box dd{ margin: 0 0 .8rem; color: var(--ink); }

/* ---------- utilities -----------------------------------------------------------------------------*/
.center{ text-align: center; }
.mt-lg{ margin-top: 2.5rem; }
.hidden{ display: none !important; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }