/* ============================================================
   PRAISENJOY - MAIN STYLESHEET
   Mobile-First | CSS Variables | Pure CSS3 | No Frameworks
   ============================================================ */

/* ── Google Font Import ─────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ── CSS Variables (fallbacks — overridden by PHP inline) ───── */
:root {
  --color-bg-primary:     #121212;
  --color-bg-secondary:   #1E1E1E;
  --color-accent:         #FFD700;
  --color-accent-hover:   #e6c200;
  --color-text-primary:   #FFFFFF;
  --color-text-secondary: #AAAAAA;
  --color-slate:          #708090;
  --color-border:         #2A2A2A;
  --font-family:          'Inter', sans-serif;
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-full: 9999px;
  --shadow-sm:  0 1px 3px rgba(0,0,0,.4);
  --shadow-md:  0 4px 16px rgba(0,0,0,.5);
  --shadow-lg:  0 8px 32px rgba(0,0,0,.6);
  --shadow-glow:0 0 20px rgba(255,215,0,.25);
  --transition: 0.25s ease;
  --header-h:   70px;
  --player-h:   80px;
}

/* ── Reset ──────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; margin:0; padding:0; }
html { font-size:16px; scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family: var(--font-family);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}
img { max-width:100%; height:auto; display:block; }
a { color: inherit; text-decoration:none; }
ul,ol { list-style:none; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }
input,textarea,select { font-family:inherit; }
::selection { background:var(--color-accent); color:#000; }

/* ── Skip Link ──────────────────────────────────────────────── */
.skip-link {
  position:absolute; top:-100px; left:16px; z-index:9999;
  background:var(--color-accent); color:#000;
  padding:8px 16px; border-radius:0 0 var(--radius-sm) var(--radius-sm);
  font-weight:700; transition: top .2s;
}
.skip-link:focus { top:0; }

/* ── Container ──────────────────────────────────────────────── */
.container { width:100%; max-width:1200px; margin:0 auto; padding:0 16px; }
@media(min-width:768px) { .container { padding:0 24px; } }
@media(min-width:1024px){ .container { padding:0 32px; } }

/* ── Section ────────────────────────────────────────────────── */
.section { padding:64px 0; }
.section--sm { padding:40px 0; }
.section--lg { padding:96px 0; }
.section--dark { background:var(--color-bg-primary); }
.section--card { background:var(--color-bg-secondary); }
.section-header { text-align:center; margin-bottom:48px; }
.section-header h2 { font-size:clamp(1.75rem,4vw,2.5rem); font-weight:800; margin-bottom:12px; }
.section-header p { color:var(--color-text-secondary); font-size:1.05rem; max-width:560px; margin:0 auto; }
.section-header__line {
  width:60px; height:4px; background:var(--color-accent);
  margin:16px auto 0; border-radius:var(--radius-full);
}

/* ── Typography ─────────────────────────────────────────────── */
h1 { font-size:clamp(2rem,6vw,3.5rem); font-weight:900; line-height:1.15; }
h2 { font-size:clamp(1.5rem,4vw,2.25rem); font-weight:800; line-height:1.25; }
h3 { font-size:clamp(1.2rem,3vw,1.6rem); font-weight:700; line-height:1.3; }
h4 { font-size:1.1rem; font-weight:600; }
h5 { font-size:1rem; font-weight:600; }
p  { line-height:1.75; color:var(--color-text-secondary); }
.text-accent { color:var(--color-accent); }
.text-muted  { color:var(--color-text-secondary); }
.text-center { text-align:center; }
.text-sm     { font-size:.875rem; }
.text-xs     { font-size:.75rem; }
.text-lg     { font-size:1.125rem; }
.text-xl     { font-size:1.25rem; }

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:12px 28px; border-radius:var(--radius-full);
  font-weight:600; font-size:.95rem; font-family:inherit;
  transition: all var(--transition); white-space:nowrap;
  cursor:pointer; border:2px solid transparent; text-decoration:none;
  letter-spacing:.01em;
}
.btn--accent {
  background:var(--color-accent); color:#000; border-color:var(--color-accent);
}
.btn--accent:hover,
.btn--accent:focus-visible {
  background:var(--color-accent-hover); border-color:var(--color-accent-hover);
  box-shadow:var(--shadow-glow); transform:translateY(-1px);
}
.btn--outline {
  background:transparent; color:var(--color-text-primary);
  border-color:var(--color-text-primary);
}
.btn--outline:hover { background:var(--color-text-primary); color:#000; }
.btn--outline--accent {
  background:transparent; color:var(--color-accent);
  border-color:var(--color-accent);
}
.btn--outline--accent:hover { background:var(--color-accent); color:#000; }
.btn--ghost { background:transparent; color:var(--color-text-secondary); border-color:var(--color-border); }
.btn--ghost:hover { border-color:var(--color-text-secondary); color:var(--color-text-primary); }
.btn--danger { background:#dc3545; color:#fff; border-color:#dc3545; }
.btn--danger:hover { background:#c82333; }
.btn--sm  { padding:8px 18px; font-size:.85rem; }
.btn--lg  { padding:16px 40px; font-size:1.05rem; }
.btn--icon{ padding:10px; border-radius:var(--radius-full); }
.btn--block { width:100%; }
.btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.btn--loading { position:relative; color:transparent !important; pointer-events:none; }
.btn--loading::after {
  content:''; position:absolute; inset:0; margin:auto;
  width:18px; height:18px; border-radius:50%;
  border:2px solid rgba(0,0,0,.2); border-top-color:#000;
  animation:spin .7s linear infinite;
}

/* ── Badges ─────────────────────────────────────────────────── */
.badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 10px; border-radius:var(--radius-full);
  font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
}
.badge--accent  { background:var(--color-accent); color:#000; }
.badge--free    { background:#22c55e; color:#fff; }
.badge--sale    { background:#ef4444; color:#fff; }
.badge--new     { background:#3b82f6; color:#fff; }
.badge--preview { background:#8b5cf6; color:#fff; }
.badge--slate   { background:var(--color-slate); color:#fff; }
.badge--outline { background:transparent; border:1px solid currentColor; }

/* ── Forms ──────────────────────────────────────────────────── */
.form-group { margin-bottom:20px; }
.form-label { display:block; margin-bottom:6px; font-weight:500; font-size:.9rem; }
.form-label span.req { color:var(--color-accent); margin-left:2px; }
.form-control {
  width:100%; background:var(--color-bg-secondary);
  border:1px solid var(--color-border); border-radius:var(--radius-md);
  color:var(--color-text-primary); padding:12px 16px;
  font-size:.95rem; font-family:inherit;
  transition: border-color var(--transition), box-shadow var(--transition);
  appearance:none;
}
.form-control::placeholder { color:var(--color-text-secondary); opacity:.7; }
.form-control:focus {
  outline:none; border-color:var(--color-accent);
  box-shadow:0 0 0 3px rgba(255,215,0,.15);
}
.form-control.is-invalid { border-color:#ef4444; }
.form-control.is-invalid:focus { box-shadow:0 0 0 3px rgba(239,68,68,.15); }
textarea.form-control { resize:vertical; min-height:120px; }
select.form-control { cursor:pointer; }
.form-error { color:#ef4444; font-size:.8rem; margin-top:4px; }
.form-hint  { color:var(--color-text-secondary); font-size:.8rem; margin-top:4px; }
.form-row { display:grid; gap:16px; }
@media(min-width:640px) { .form-row--2 { grid-template-columns:1fr 1fr; } }
@media(min-width:640px) { .form-row--3 { grid-template-columns:1fr 1fr 1fr; } }
.checkbox-group, .radio-group { display:flex; align-items:center; gap:8px; cursor:pointer; }
.checkbox-group input, .radio-group input { accent-color:var(--color-accent); width:16px; height:16px; cursor:pointer; }

/* ── Alerts ─────────────────────────────────────────────────── */
.alert {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:14px 18px; border-radius:var(--radius-md);
  margin-bottom:16px; border:1px solid transparent;
}
.alert--success { background:rgba(34,197,94,.1); border-color:rgba(34,197,94,.3); color:#4ade80; }
.alert--error   { background:rgba(239,68,68,.1);  border-color:rgba(239,68,68,.3);  color:#f87171; }
.alert--warning { background:rgba(245,158,11,.1); border-color:rgba(245,158,11,.3); color:#fbbf24; }
.alert--info    { background:rgba(59,130,246,.1); border-color:rgba(59,130,246,.3); color:#60a5fa; }
.alert__close { background:none; border:none; cursor:pointer; font-size:1.2rem; color:inherit; opacity:.7; padding:0 4px; }
.alert__close:hover { opacity:1; }
.flash-container { position:fixed; top:80px; right:16px; z-index:9000; min-width:280px; max-width:400px; }

/* ── ─────────────────── SITE HEADER ─────────────────────────── */
.site-header {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:var(--header-h); background:rgba(18,18,18,.92);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.site-header.scrolled {
  background:rgba(18,18,18,.98);
  border-bottom-color:var(--color-border);
  box-shadow:var(--shadow-md);
}
.header-inner {
  display:flex; align-items:center; justify-content:space-between;
  height:var(--header-h); gap:24px;
}
.site-logo img { height:42px; width:auto; }
.site-nav { display:none; }
@media(min-width:1024px) {
  .site-nav { display:flex; }
  .nav-list { display:flex; align-items:center; gap:4px; }
}
.nav-link {
  display:flex; align-items:center; gap:4px;
  padding:8px 14px; border-radius:var(--radius-sm);
  font-weight:500; font-size:.92rem;
  color:var(--color-text-secondary); transition: color var(--transition), background var(--transition);
  position:relative;
}
.nav-link:hover, .nav-link.active { color:var(--color-text-primary); background:rgba(255,255,255,.06); }
.nav-link.active::after {
  content:''; position:absolute; bottom:-2px; left:50%; transform:translateX(-50%);
  width:20px; height:2px; background:var(--color-accent); border-radius:2px;
}
.nav-item--dropdown { position:relative; }
.dropdown-arrow { font-size:.7rem; transition:transform var(--transition); }
.nav-item--dropdown:hover .dropdown-arrow { transform:rotate(180deg); }
.dropdown-menu {
  position:absolute; top:calc(100% + 8px); left:0; min-width:200px;
  background:var(--color-bg-secondary); border:1px solid var(--color-border);
  border-radius:var(--radius-md); box-shadow:var(--shadow-lg);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition: all var(--transition); z-index:100;
}
.nav-item--dropdown:hover .dropdown-menu {
  opacity:1; visibility:visible; transform:translateY(0);
}
.dropdown-link {
  display:block; padding:10px 16px; font-size:.9rem; color:var(--color-text-secondary);
  transition:color var(--transition), background var(--transition);
  border-radius:var(--radius-sm); margin:4px;
}
.dropdown-link:hover { color:var(--color-text-primary); background:rgba(255,255,255,.06); }
.header-actions { display:flex; align-items:center; gap:10px; }
.header-cart {
  position:relative; display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:var(--radius-full);
  color:var(--color-text-secondary); transition:all var(--transition);
}
.header-cart:hover { color:var(--color-text-primary); background:rgba(255,255,255,.06); }
.cart-badge {
  position:absolute; top:2px; right:2px;
  background:var(--color-accent); color:#000;
  font-size:.65rem; font-weight:700; min-width:16px; height:16px;
  border-radius:var(--radius-full); display:flex; align-items:center; justify-content:center;
  padding:0 4px;
}
.cart-badge--hidden { display:none; }
.nav-book-btn { display:none; }
@media(min-width:1024px) { .nav-book-btn { display:inline-flex; } }

/* ── Hamburger ──────────────────────────────────────────────── */
.hamburger {
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:40px; border-radius:var(--radius-sm); padding:8px;
}
@media(min-width:1024px) { .hamburger { display:none; } }
.hamburger__line {
  width:100%; height:2px; background:var(--color-text-primary);
  border-radius:2px; transition:all var(--transition);
}
.hamburger.is-active .hamburger__line:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.is-active .hamburger__line:nth-child(2) { opacity:0; transform:scaleX(0); }
.hamburger.is-active .hamburger__line:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
body.nav-open { overflow:hidden; }

/* ── Mobile Nav Overlay ─────────────────────────────────────── */
.mobile-nav-overlay {
  position:fixed; inset:0; z-index:999;
  background:rgba(0,0,0,.6); backdrop-filter:blur(4px);
  opacity:0; visibility:hidden; transition:all var(--transition);
}
.mobile-nav-overlay.open { opacity:1; visibility:visible; }
.mobile-nav {
  position:absolute; right:0; top:0; bottom:0; width:min(85vw, 320px);
  background:var(--color-bg-secondary); padding:24px;
  transform:translateX(100%); transition:transform var(--transition);
  overflow-y:auto;
}
.mobile-nav-overlay.open .mobile-nav { transform:translateX(0); }
.mobile-nav__header {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:32px;
}
.mobile-nav__close {
  width:36px; height:36px; border-radius:var(--radius-full);
  background:rgba(255,255,255,.08); color:var(--color-text-primary);
  font-size:1.4rem; display:flex; align-items:center; justify-content:center;
}
.mobile-nav__list { display:flex; flex-direction:column; gap:4px; }
.mobile-nav__list a {
  display:block; padding:12px 16px; border-radius:var(--radius-sm);
  color:var(--color-text-secondary); font-weight:500;
  transition:all var(--transition);
}
.mobile-nav__list a:hover { color:var(--color-text-primary); background:rgba(255,255,255,.06); }
.mobile-nav__cta {
  margin-top:8px; text-align:center; display:block !important;
  background:var(--color-accent) !important; color:#000 !important;
  border-radius:var(--radius-full) !important; font-weight:700 !important;
}
.mobile-nav__cta--outline {
  background:transparent !important; color:var(--color-accent) !important;
  border:2px solid var(--color-accent) !important;
}

/* ── Page Hero ──────────────────────────────────────────────── */
.page-hero {
  padding:calc(var(--header-h) + 40px) 0 48px;
  background:linear-gradient(180deg, var(--color-bg-secondary) 0%, var(--color-bg-primary) 100%);
  text-align:center;
}
.page-hero__title { font-size:clamp(1.75rem,5vw,3rem); font-weight:900; margin-bottom:12px; }
.page-hero__subtitle { color:var(--color-text-secondary); font-size:1.05rem; }
.page-hero--image {
  background-size:cover; background-position:center; position:relative; overflow:hidden;
}
.page-hero--image::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(18,18,18,.92) 0%,rgba(18,18,18,.7) 100%);
}
.page-hero--image .container { position:relative; z-index:1; }

/* ── Breadcrumb ─────────────────────────────────────────────── */
.breadcrumb,
.breadcrumb__list {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  list-style:none; padding:0; margin:0 0 16px;
  font-size:.85rem; justify-content:flex-start !important; text-align:left !important;
}
/* Override any centering from parent hero sections */
.page-hero .breadcrumb,
.page-hero .breadcrumb__list,
[class*="hero"] .breadcrumb,
[class*="hero"] .breadcrumb__list { justify-content:flex-start !important; text-align:left !important; }
.breadcrumb__item,
.breadcrumb__item a,
.breadcrumb__link { color:var(--color-text-secondary); transition:color var(--transition); }
.breadcrumb__item a:hover,
.breadcrumb__link:hover { color:var(--color-accent); }
.breadcrumb__sep,
.breadcrumb__item--separator { color:var(--color-slate); list-style:none; }
.breadcrumb__item--active,
.breadcrumb__current { color:var(--color-text-primary); }
/* Separator via CSS ::before for <ol>/<li> breadcrumbs */
.breadcrumb__list .breadcrumb__item + .breadcrumb__item:not(.breadcrumb__item--separator)::before {
  content:'›'; color:var(--color-slate); margin-right:4px;
}

/* ── ─────────────────── HOMEPAGE HERO ───────────────────────── */
.hero {
  position:relative; min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:calc(var(--header-h) + 40px) 0 80px;
  overflow:hidden; text-align:center;
}
.hero__bg {
  position:absolute; inset:0; z-index:0;
  background:radial-gradient(ellipse at 30% 50%, rgba(255,215,0,.08) 0%, transparent 60%),
             radial-gradient(ellipse at 70% 50%, rgba(255,215,0,.05) 0%, transparent 60%),
             linear-gradient(180deg, #0a0a0a 0%, var(--color-bg-primary) 100%);
}
.hero__particles {
  position:absolute; inset:0; z-index:0;
  background-image: radial-gradient(circle, rgba(255,215,0,.15) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  animation: particlesDrift 20s linear infinite;
}
@keyframes particlesDrift { from{transform:translateY(0)} to{transform:translateY(-40px)} }
.hero__content { position:relative; z-index:1; max-width:800px; margin:0 auto; }
.hero__eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,215,0,.1); border:1px solid rgba(255,215,0,.25);
  color:var(--color-accent); padding:6px 16px; border-radius:var(--radius-full);
  font-size:.8rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em;
  margin-bottom:24px;
}
.hero__title {
  font-size:clamp(2.5rem,8vw,5rem); font-weight:900; line-height:1.1;
  margin-bottom:20px; letter-spacing:-.02em;
}
.hero__title span { color:var(--color-accent); }
.hero__subtitle {
  font-size:clamp(1rem,2.5vw,1.25rem); color:var(--color-text-secondary);
  margin-bottom:40px; line-height:1.7; max-width:600px; margin-left:auto; margin-right:auto;
}
.hero__actions { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-bottom:48px; }
.hero__scroll {
  position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:var(--color-text-secondary); font-size:.75rem; text-transform:uppercase;
  letter-spacing:.08em; animation:bounce 2s infinite;
}
.hero__scroll svg { animation:arrowPulse 2s ease-in-out infinite; }
@keyframes bounce { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(6px)} }
@keyframes arrowPulse { 0%,100%{opacity:.4} 50%{opacity:1} }

/* ── Music Cards ────────────────────────────────────────────── */
.music-grid {
  display:grid; gap:20px; grid-template-columns:repeat(2, 1fr);
}
@media(min-width:640px)  { .music-grid { grid-template-columns:repeat(2,1fr); } }
@media(min-width:900px)  { .music-grid { grid-template-columns:repeat(3,1fr); } }
@media(min-width:1100px) { .music-grid { grid-template-columns:repeat(4,1fr); } }

.music-card {
  background:var(--color-bg-secondary); border:1px solid var(--color-border);
  border-radius:var(--radius-md); overflow:hidden;
  transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.music-card:hover {
  transform:translateY(-4px); box-shadow:var(--shadow-lg);
  border-color:rgba(255,215,0,.3);
}
.music-card__cover {
  position:relative; aspect-ratio:1/1; overflow:hidden;
}
.music-card__cover img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .4s ease;
}
.music-card:hover .music-card__cover img { transform:scale(1.06); }
.music-card__overlay {
  position:absolute; inset:0; background:rgba(0,0,0,.6);
  display:flex; align-items:center; justify-content:center; gap:12px;
  opacity:0; transition:opacity var(--transition);
}
.music-card:hover .music-card__overlay { opacity:1; }
.music-card__play {
  width:52px; height:52px; border-radius:50%;
  background:var(--color-accent); color:#000;
  display:flex; align-items:center; justify-content:center;
  transition:transform var(--transition); flex-shrink:0;
}
.music-card__play:hover { transform:scale(1.1); }
.music-card__badges { position:absolute; top:10px; left:10px; display:flex; flex-wrap:wrap; gap:4px; }
.music-card__body { padding:14px; }
.music-card__title { font-weight:700; font-size:.95rem; margin-bottom:4px; line-height:1.3; }
.music-card__title a:hover { color:var(--color-accent); }
.music-card__meta { font-size:.8rem; color:var(--color-text-secondary); margin-bottom:10px; }
.music-card__footer { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.music-card__price { font-weight:700; font-size:.95rem; color:var(--color-accent); }
.music-card__price--free { color:#22c55e; }

/* ── Track List ─────────────────────────────────────────────── */
.track-list { display:flex; flex-direction:column; gap:2px; }
.track-item {
  display:grid; align-items:center; gap:12px;
  grid-template-columns:auto 1fr auto auto;
  padding:12px 16px; border-radius:var(--radius-sm);
  background:transparent; border:1px solid transparent;
  transition:all var(--transition);
}
@media(min-width:640px) {
  .track-item { grid-template-columns:40px auto 1fr auto auto auto; }
}
.track-item:hover { background:var(--color-bg-secondary); border-color:var(--color-border); }
.track-item__num { color:var(--color-text-secondary); font-size:.85rem; min-width:24px; text-align:center; }
.track-item__play {
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center;
  color:var(--color-text-primary); flex-shrink:0; transition:all var(--transition);
}
.track-item__play:hover { background:var(--color-accent); color:#000; }
.track-item__cover { width:40px; height:40px; border-radius:var(--radius-sm); overflow:hidden; flex-shrink:0; }
.track-item__cover img { width:100%; height:100%; object-fit:cover; }
.track-item__info { min-width:0; }
.track-item__title { font-weight:600; font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.track-item__artist { font-size:.78rem; color:var(--color-text-secondary); }
.track-item__duration { font-size:.8rem; color:var(--color-text-secondary); }
.track-item__price { font-weight:700; font-size:.88rem; color:var(--color-accent); }
.track-item__actions { display:flex; gap:6px; }

/* ── Album Detail ───────────────────────────────────────────── */
.album-hero { padding:calc(var(--header-h) + 40px) 0 48px; }
.album-hero__inner { display:grid; gap:32px; }
@media(min-width:768px) { .album-hero__inner { grid-template-columns:280px 1fr; align-items:start; } }
@media(min-width:1024px){ .album-hero__inner { grid-template-columns:320px 1fr; } }
.album-cover {
  border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:1/1;
  box-shadow:var(--shadow-lg), 0 0 60px rgba(255,215,0,.1);
  max-width:320px; margin:0 auto;
}
@media(min-width:768px) { .album-cover { max-width:none; margin:0; } }
.album-cover img { width:100%; height:100%; object-fit:cover; }
.album-info { padding-top:8px; }
.album-info__label { color:var(--color-accent); font-size:.8rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px; }
.album-info__title { font-size:clamp(1.75rem,5vw,3rem); font-weight:900; margin-bottom:12px; line-height:1.1; }
.album-info__meta { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:16px; }
.album-info__meta-item { display:flex; align-items:center; gap:6px; font-size:.85rem; color:var(--color-text-secondary); }
.album-info__desc { color:var(--color-text-secondary); margin-bottom:24px; line-height:1.75; }
.album-info__actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.album-price { font-size:1.5rem; font-weight:800; color:var(--color-accent); }

/* ── Blog Cards ─────────────────────────────────────────────── */
.blog-grid { display:grid; gap:24px; }
@media(min-width:640px)  { .blog-grid { grid-template-columns:repeat(2,1fr); } }
@media(min-width:1024px) { .blog-grid { grid-template-columns:repeat(3,1fr); } }

.blog-card {
  background:var(--color-bg-secondary); border:1px solid var(--color-border);
  border-radius:var(--radius-md); overflow:hidden;
  transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  display:flex; flex-direction:column;
}
.blog-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:rgba(255,215,0,.25); }
.blog-card--featured { border-color:rgba(255,215,0,.4); }
.blog-card__thumbnail { aspect-ratio:16/9; overflow:hidden; }
.blog-card__thumbnail img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.blog-card:hover .blog-card__thumbnail img { transform:scale(1.05); }
.blog-card__body { padding:20px; flex:1; display:flex; flex-direction:column; }
.blog-card__category {
  display:inline-block; font-size:.7rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em;
  color:var(--color-accent); margin-bottom:10px;
}
.blog-card__title { font-size:1rem; font-weight:700; margin-bottom:10px; line-height:1.4; }
.blog-card__title a:hover { color:var(--color-accent); }
.blog-card__excerpt { font-size:.875rem; color:var(--color-text-secondary); margin-bottom:16px; flex:1; line-height:1.65; }
.blog-card__footer { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; padding-top:14px; border-top:1px solid var(--color-border); }
.blog-card__date { font-size:.78rem; color:var(--color-text-secondary); }
.blog-card__read-more { font-size:.82rem; font-weight:600; color:var(--color-accent); display:flex; align-items:center; gap:4px; }
.blog-card__read-more:hover { text-decoration:underline; }

/* ── Events ─────────────────────────────────────────────────── */
.events-grid { display:grid; gap:20px; }
@media(min-width:640px)  { .events-grid { grid-template-columns:repeat(2,1fr); } }
@media(min-width:1024px) { .events-grid { grid-template-columns:repeat(3,1fr); } }

.event-card {
  background:var(--color-bg-secondary); border:1px solid var(--color-border);
  border-radius:var(--radius-md); overflow:hidden;
  transition:transform var(--transition), box-shadow var(--transition);
  display:flex; flex-direction:column;
}
.event-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.event-card__image { aspect-ratio:16/9; overflow:hidden; position:relative; }
.event-card__image img { width:100%; height:100%; object-fit:cover; }
.event-card__date-badge {
  position:absolute; top:12px; left:12px;
  background:var(--color-accent); color:#000;
  border-radius:var(--radius-sm); padding:6px 12px;
  text-align:center; font-weight:800; line-height:1.2;
}
.event-card__date-badge .day { font-size:1.4rem; display:block; }
.event-card__date-badge .month { font-size:.7rem; text-transform:uppercase; }
.event-card__body { padding:18px; flex:1; display:flex; flex-direction:column; }
.event-card__title { font-weight:700; font-size:1rem; margin-bottom:8px; }
.event-card__venue { display:flex; align-items:center; gap:6px; font-size:.83rem; color:var(--color-text-secondary); margin-bottom:12px; }
.event-card__footer { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.event-card__price { font-weight:700; color:var(--color-accent); font-size:.9rem; }
.event-card__price--free { color:#22c55e; }

/* ── Gallery ────────────────────────────────────────────────── */
.page-hero--gallery {
  background:linear-gradient(135deg,var(--color-bg-secondary) 0%,var(--color-bg-primary) 100%);
  padding:3rem 0 2.5rem; border-bottom:1px solid var(--color-border);
}
.gallery-section { padding:3rem 0 5rem; }
.filter-pills { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2rem; }
.filter-pill {
  display:inline-block; padding:.4rem 1.1rem; border-radius:999px;
  border:1px solid var(--color-border); color:var(--color-text-secondary);
  text-decoration:none; font-size:.875rem; font-weight:500;
  transition:background .2s,color .2s,border-color .2s;
}
.filter-pill:hover { border-color:var(--color-accent); color:var(--color-accent); }
.filter-pill--active { background:var(--color-accent); border-color:var(--color-accent); color:#000; }
.gallery-results-summary { font-size:.875rem; color:var(--color-text-secondary); margin-bottom:1.5rem; }
.gallery-grid {
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
}
.gallery-item {
  margin:0; position:relative; cursor:pointer;
  border-radius:.5rem; overflow:hidden;
  background:var(--color-bg-secondary); border:2px solid transparent;
  transition:transform .25s,border-color .25s,box-shadow .25s; outline:none;
}
.gallery-item:focus-visible { outline:3px solid var(--color-accent); outline-offset:2px; }
.gallery-item:hover,.gallery-item:focus-visible { transform:translateY(-3px); box-shadow:0 12px 30px rgba(0,0,0,.4); }
.gallery-item--featured { border-color:var(--color-accent); box-shadow:0 0 0 1px rgba(255,215,0,.25); }
.gallery-item__img-wrap { position:relative; overflow:hidden; aspect-ratio:4/3; background:var(--color-bg-secondary); }
.gallery-item__img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.gallery-item:hover .gallery-item__img { transform:scale(1.06); }
.gallery-item__overlay {
  position:absolute; inset:0; background:rgba(0,0,0,.55);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.5rem; opacity:0; transition:opacity .25s; padding:1rem;
}
.gallery-item:hover .gallery-item__overlay,.gallery-item:focus-visible .gallery-item__overlay { opacity:1; }
.gallery-item__overlay-icon {
  color:#fff; background:rgba(255,255,255,.15); border:1.5px solid rgba(255,255,255,.5);
  border-radius:50%; width:52px; height:52px;
  display:flex; align-items:center; justify-content:center;
}
.gallery-item__overlay-caption {
  color:#fff; font-size:.8125rem; text-align:center; line-height:1.4; margin:0;
  max-width:100%; overflow:hidden; text-overflow:ellipsis;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.gallery-item__caption {
  padding:.5rem .75rem; font-size:.8125rem; color:var(--color-text-secondary);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
@media(max-width:768px) { .gallery-grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:.625rem; } }
@media(max-width:480px) { .gallery-grid { grid-template-columns:repeat(2,1fr); gap:.5rem; } }

/* ── Video Cards ────────────────────────────────────────────── */
.videos-grid { display:grid; gap:20px; }
@media(min-width:640px)  { .videos-grid { grid-template-columns:repeat(2,1fr); } }
@media(min-width:1024px) { .videos-grid { grid-template-columns:repeat(3,1fr); } }

.video-card {
  background:var(--color-bg-secondary); border:1px solid var(--color-border);
  border-radius:var(--radius-md); overflow:hidden; cursor:pointer;
  transition:transform var(--transition), box-shadow var(--transition);
}
.video-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.video-card__thumb { position:relative; aspect-ratio:16/9; overflow:hidden; }
.video-card__thumb img { width:100%; height:100%; object-fit:cover; transition:transform .4s; display:block; }
.video-card:hover .video-card__thumb img { transform:scale(1.05); }
.video-card__play-btn {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.3); transition:background var(--transition);
}
.video-card:hover .video-card__play-btn { background:rgba(0,0,0,.5); }
.video-card__play-circle {
  width:60px; height:60px; border-radius:50%;
  background:rgba(255,255,255,.9); display:flex; align-items:center; justify-content:center;
  transition:transform var(--transition), background var(--transition);
}
.video-card:hover .video-card__play-circle { background:#fff; transform:scale(1.1); }
.video-card__play-circle svg { color:#000; margin-left:3px; }
.video-card__body { padding:14px; }
.video-card__title { font-weight:600; font-size:.92rem; margin-bottom:6px; line-height:1.3; }
.video-card__meta { font-size:.78rem; color:var(--color-text-secondary); display:flex; justify-content:space-between; }

/* ── Lyrics Page ────────────────────────────────────────────── */
.lyrics-layout { display:grid; gap:32px; }
@media(min-width:900px) { .lyrics-layout { grid-template-columns:2fr 1fr; } }
.lyrics-card {
  background:var(--color-bg-secondary); border:1px solid var(--color-border);
  border-radius:var(--radius-md); padding:20px; margin-bottom:12px;
  display:flex; align-items:center; gap:16px;
  transition:border-color var(--transition), box-shadow var(--transition);
}
.lyrics-card:hover { border-color:rgba(255,215,0,.3); box-shadow:var(--shadow-sm); }
.lyrics-card__info { flex:1; min-width:0; }
.lyrics-card__title { font-weight:700; font-size:.95rem; margin-bottom:4px; }
.lyrics-card__meta  { font-size:.78rem; color:var(--color-text-secondary); }
.lyrics-card__actions { display:flex; gap:8px; flex-shrink:0; }
.lyrics-content { background:var(--color-bg-secondary); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:32px; }
.lyrics-content pre, .lyrics-text {
  font-family:var(--font-family); line-height:2; color:var(--color-text-primary);
  white-space:pre-wrap; word-wrap:break-word;
}
.chords-text { font-family:'Courier New', monospace; line-height:2; color:var(--color-text-primary); white-space:pre-wrap; }
.tab-btns { display:flex; gap:4px; margin-bottom:24px; border-bottom:1px solid var(--color-border); }
.tab-btn {
  padding:10px 20px; font-weight:600; font-size:.88rem;
  border:none; background:none; color:var(--color-text-secondary);
  cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color var(--transition), border-color var(--transition);
}
.tab-btn.active { color:var(--color-accent); border-bottom-color:var(--color-accent); }
.tab-panel { display:none; }
.tab-panel.active { display:block; }

/* ── Prayer Wall ────────────────────────────────────────────── */
.prayer-layout { display:grid; gap:32px; }
@media(min-width:900px) { .prayer-layout { grid-template-columns:2fr 3fr; } }
.prayer-card {
  background:var(--color-bg-secondary); border:1px solid var(--color-border);
  border-radius:var(--radius-md); padding:20px; margin-bottom:12px;
  position:relative;
}
.prayer-card__name { font-weight:700; font-size:.9rem; margin-bottom:4px; }
.prayer-card__time { font-size:.75rem; color:var(--color-text-secondary); margin-bottom:12px; }
.prayer-card__text { font-size:.9rem; color:var(--color-text-secondary); line-height:1.7; }
.prayer-card__footer { display:flex; align-items:center; justify-content:space-between; margin-top:16px; padding-top:12px; border-top:1px solid var(--color-border); }
.pray-btn {
  display:inline-flex; align-items:center; gap:8px; padding:7px 14px;
  border-radius:var(--radius-full); border:1px solid var(--color-border);
  background:transparent; color:var(--color-text-secondary);
  font-size:.8rem; font-weight:600; cursor:pointer;
  transition:all var(--transition);
}
.pray-btn:hover:not(:disabled) { border-color:var(--color-accent); color:var(--color-accent); background:rgba(255,215,0,.08); }
.pray-btn.prayed { border-color:var(--color-accent); color:var(--color-accent); background:rgba(255,215,0,.1); }
.pray-btn:disabled { opacity:.6; cursor:default; }
.prayer-count { font-size:.75rem; font-weight:700; }

/* ── Donation Page ───────────────────────────────────────────── */
.donate-hero {
  padding:calc(var(--header-h) + 60px) 0 60px;
  background:linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg-primary) 100%);
  text-align:center;
}
.amount-grid { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:24px; }
.amount-btn {
  flex:1; min-width:80px; padding:12px 16px; border-radius:var(--radius-md);
  background:var(--color-bg-secondary); border:2px solid var(--color-border);
  color:var(--color-text-primary); font-weight:700; font-size:.95rem; cursor:pointer;
  transition:all var(--transition); text-align:center;
}
.amount-btn:hover, .amount-btn.selected {
  background:rgba(255,215,0,.1); border-color:var(--color-accent); color:var(--color-accent);
}
.donation-form { background:var(--color-bg-secondary); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:32px; }
.donation-type-toggle { display:flex; gap:4px; margin-bottom:24px; background:var(--color-bg-primary); padding:4px; border-radius:var(--radius-md); }
.type-toggle-btn {
  flex:1; padding:10px; border-radius:var(--radius-sm); font-weight:600; font-size:.88rem;
  background:transparent; border:none; color:var(--color-text-secondary); cursor:pointer; transition:all var(--transition);
}
.type-toggle-btn.active { background:var(--color-accent); color:#000; }

/* ── About Page ─────────────────────────────────────────────── */
.about-story { display:grid; gap:40px; align-items:center; }
@media(min-width:900px) { .about-story { grid-template-columns:1fr 1fr; } }
.about-story__img { border-radius:var(--radius-lg); overflow:hidden; }
.about-story__img img { width:100%; height:100%; object-fit:cover; }
.about-story__text h2 { margin-bottom:16px; }
.about-story__text p  { margin-bottom:16px; }
.team-grid { display:grid; gap:24px; grid-template-columns:repeat(2,1fr); }
@media(min-width:640px)  { .team-grid { grid-template-columns:repeat(3,1fr); } }
@media(min-width:1024px) { .team-grid { grid-template-columns:repeat(4,1fr); } }
.team-card { text-align:center; }
.team-card__photo { width:120px; height:120px; border-radius:50%; overflow:hidden; margin:0 auto 14px; border:3px solid var(--color-border); }
.team-card__photo img { width:100%; height:100%; object-fit:cover; }
.team-card__name { font-weight:700; font-size:.95rem; margin-bottom:4px; }
.team-card__role { font-size:.78rem; color:var(--color-accent); font-weight:600; margin-bottom:8px; }
.team-card__bio { font-size:.82rem; color:var(--color-text-secondary); line-height:1.6; }
.team-card__socials { display:flex; justify-content:center; gap:8px; margin-top:10px; }
.team-card__socials a { color:var(--color-text-secondary); transition:color var(--transition); }
.team-card__socials a:hover { color:var(--color-accent); }

/* ── Contact ────────────────────────────────────────────────── */
.contact-layout { display:grid; gap:40px; }
@media(min-width:900px) { .contact-layout { grid-template-columns:3fr 2fr; } }
.contact-info__item { display:flex; align-items:flex-start; gap:14px; margin-bottom:20px; }
.contact-info__icon { width:42px; height:42px; background:rgba(255,215,0,.1); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--color-accent); }
.contact-info__label { font-size:.75rem; color:var(--color-text-secondary); text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px; }
.contact-info__value { font-weight:500; }

/* ── Checkout ───────────────────────────────────────────────── */
.checkout-layout { display:grid; gap:32px; }
@media(min-width:900px) { .checkout-layout { grid-template-columns:1fr 380px; } }
.cart-summary { background:var(--color-bg-secondary); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:24px; }
.cart-item { display:flex; gap:14px; align-items:center; padding:14px 0; border-bottom:1px solid var(--color-border); }
.cart-item:last-child { border-bottom:none; }
.cart-item__cover { width:48px; height:48px; border-radius:var(--radius-sm); overflow:hidden; flex-shrink:0; }
.cart-item__cover img { width:100%; height:100%; object-fit:cover; }
.cart-item__info { flex:1; min-width:0; }
.cart-item__title  { font-weight:600; font-size:.9rem; }
.cart-item__type   { font-size:.75rem; color:var(--color-text-secondary); }
.cart-item__price  { font-weight:700; color:var(--color-accent); white-space:nowrap; }
.cart-item__remove { color:var(--color-text-secondary); cursor:pointer; transition:color var(--transition); }
.cart-item__remove:hover { color:#ef4444; }
.order-total { margin-top:20px; padding-top:16px; border-top:2px solid var(--color-border); display:flex; justify-content:space-between; font-weight:800; font-size:1.1rem; }
.order-total span:last-child { color:var(--color-accent); }
.payment-card { background:var(--color-bg-secondary); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:24px; }
.payment-card h3 { margin-bottom:20px; }
.secure-badge { display:flex; align-items:center; gap:8px; margin-top:16px; font-size:.78rem; color:var(--color-text-secondary); justify-content:center; }

/* ── Footer ─────────────────────────────────────────────────── */
.site-footer { background:var(--color-bg-secondary); border-top:1px solid var(--color-border); margin-bottom:var(--player-h); }
.newsletter-strip { background:linear-gradient(135deg, rgba(255,215,0,.08), rgba(255,215,0,.03)); border-bottom:1px solid var(--color-border); padding:48px 0; }
.newsletter-strip__inner { display:grid; gap:24px; align-items:center; }
@media(min-width:768px) { .newsletter-strip__inner { grid-template-columns:1fr 1fr; } }
.newsletter-strip__text h3 { font-size:1.25rem; margin-bottom:6px; }
.newsletter-strip__text p { font-size:.9rem; color:var(--color-text-secondary); }
.newsletter-form__group { display:flex; gap:8px; }
.newsletter-form__input {
  flex:1; background:var(--color-bg-primary); border:1px solid var(--color-border);
  border-radius:var(--radius-full); color:var(--color-text-primary);
  padding:12px 20px; font-size:.9rem; font-family:inherit;
}
.newsletter-form__input:focus { outline:none; border-color:var(--color-accent); }
.newsletter-form__btn { flex-shrink:0; }
.newsletter-form__msg { margin-top:8px; font-size:.82rem; min-height:18px; }
.footer-body { padding:56px 0; }
.footer-grid { display:grid; gap:40px; grid-template-columns:1fr; }
@media(min-width:640px)  { .footer-grid { grid-template-columns:1fr 1fr; } }
@media(min-width:1024px) { .footer-grid { grid-template-columns:2fr 1fr 1fr 1.5fr; gap:48px; } }
.footer-col--brand .footer-tagline { color:var(--color-text-secondary); font-size:.88rem; margin:12px 0 20px; line-height:1.6; }
.footer-social { display:flex; gap:10px; flex-wrap:wrap; }
.social-icon {
  width:38px; height:38px; border-radius:var(--radius-full);
  background:rgba(255,255,255,.06); border:1px solid var(--color-border);
  display:flex; align-items:center; justify-content:center;
  color:var(--color-text-secondary); transition:all var(--transition);
}
.social-icon:hover { background:var(--color-accent); color:#000; border-color:var(--color-accent); }
.footer-col__title { font-weight:700; font-size:.88rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:16px; color:var(--color-text-primary); }
.footer-links { display:flex; flex-direction:column; gap:8px; }
.footer-links a { color:var(--color-text-secondary); font-size:.88rem; transition:color var(--transition); }
.footer-links a:hover { color:var(--color-accent); }
.footer-contact { display:flex; flex-direction:column; gap:12px; font-style:normal; }
.footer-contact__item { display:flex; align-items:flex-start; gap:10px; font-size:.85rem; color:var(--color-text-secondary); }
.footer-contact__item svg { flex-shrink:0; margin-top:2px; color:var(--color-accent); }
.footer-contact__item a:hover { color:var(--color-accent); }
.footer-bottom { padding:20px 0; border-top:1px solid var(--color-border); }
.footer-bottom__inner { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.footer-copyright { font-size:.82rem; color:var(--color-text-secondary); }
.footer-legal { display:flex; gap:16px; }
.footer-legal a { font-size:.82rem; color:var(--color-text-secondary); transition:color var(--transition); }
.footer-legal a:hover { color:var(--color-accent); }

/* ── Lightbox ───────────────────────────────────────────────── */
.lightbox {
  position:fixed; inset:0; z-index:9500;
  opacity:0; visibility:hidden; transition:all var(--transition);
}
.lightbox.open { opacity:1; visibility:visible; }
.lightbox__overlay { position:absolute; inset:0; background:rgba(0,0,0,.92); cursor:pointer; }
.lightbox__container { position:relative; z-index:1; height:100%; display:flex; align-items:center; justify-content:center; padding:60px 40px; }
.lightbox__content { position:relative; max-width:90vw; max-height:90vh; }
.lightbox__image { max-width:90vw; max-height:80vh; object-fit:contain; border-radius:var(--radius-sm); }
.lightbox__caption { text-align:center; color:rgba(255,255,255,.8); font-size:.85rem; margin-top:12px; }
.lightbox__close {
  position:fixed; top:20px; right:20px; z-index:2;
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.15); color:#fff; font-size:1.4rem;
  display:flex; align-items:center; justify-content:center;
  transition:background var(--transition); cursor:pointer;
}
.lightbox__close:hover { background:rgba(255,255,255,.3); }
.lightbox__nav {
  position:fixed; top:50%; z-index:2; transform:translateY(-50%);
  width:48px; height:48px; border-radius:50%;
  background:rgba(255,255,255,.15); color:#fff; font-size:1.5rem;
  display:flex; align-items:center; justify-content:center;
  transition:background var(--transition); cursor:pointer;
}
.lightbox__nav:hover { background:rgba(255,255,255,.3); }
.lightbox__nav--prev { left:16px; }
.lightbox__nav--next { right:16px; }
.lightbox__counter { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.7); font-size:.82rem; background:rgba(0,0,0,.6); padding:4px 12px; border-radius:var(--radius-full); }

/* ── Video Lightbox ─────────────────────────────────────────── */
.video-lightbox { position:fixed; inset:0; z-index:9500; opacity:0; visibility:hidden; transition:all var(--transition); }
.video-lightbox.open { opacity:1; visibility:visible; }
.video-lightbox__overlay { position:absolute; inset:0; background:rgba(0,0,0,.95); cursor:pointer; }
.video-lightbox__container { position:relative; z-index:1; height:100%; display:flex; align-items:center; justify-content:center; padding:60px 20px; }
.video-lightbox__close { position:fixed; top:20px; right:20px; z-index:2; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.15); color:#fff; font-size:1.4rem; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background var(--transition); }
.video-lightbox__close:hover { background:rgba(255,255,255,.3); }
.video-lightbox__iframe-wrap { width:min(900px, 95vw); aspect-ratio:16/9; border-radius:var(--radius-md); overflow:hidden; }
.video-lightbox__iframe-wrap iframe { width:100%; height:100%; border:0; }

/* ── Modal ──────────────────────────────────────────────────── */
.modal-overlay {
  position:fixed; inset:0; z-index:9800; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.85); backdrop-filter:blur(6px);
  opacity:0; visibility:hidden; transition:all var(--transition); padding:20px;
}
.modal-overlay.open { opacity:1; visibility:visible; }
.modal {
  background:var(--color-bg-secondary); border:1px solid var(--color-border);
  border-radius:var(--radius-lg); padding:40px 32px; max-width:460px; width:100%;
  text-align:center; position:relative;
  transform:scale(.95); transition:transform var(--transition);
  box-shadow:var(--shadow-lg);
}
.modal-overlay.open .modal { transform:scale(1); }
.modal__close { position:absolute; top:16px; right:16px; width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.08); color:var(--color-text-secondary); font-size:1.2rem; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.modal__icon { font-size:3rem; margin-bottom:12px; }
.modal__title { font-size:1.4rem; font-weight:800; margin-bottom:6px; }
.modal__subtitle { color:var(--color-accent); font-weight:600; margin-bottom:12px; }
.modal__body { color:var(--color-text-secondary); font-size:.9rem; line-height:1.7; margin-bottom:20px; }
.modal__price { font-size:2rem; font-weight:900; color:var(--color-accent); margin-bottom:24px; }
.modal__actions { display:flex; flex-direction:column; gap:10px; }

/* ── Pagination ─────────────────────────────────────────────── */
.pagination { display:flex; justify-content:center; margin-top:40px; }
.pagination__list { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; align-items:center; }
.pagination__btn {
  display:flex; align-items:center; justify-content:center;
  min-width:38px; height:38px; padding:0 10px; border-radius:var(--radius-sm);
  background:var(--color-bg-secondary); border:1px solid var(--color-border);
  color:var(--color-text-secondary); font-size:.85rem; font-weight:500;
  transition:all var(--transition);
}
.pagination__btn:hover { border-color:var(--color-accent); color:var(--color-accent); }
.pagination__btn--active { background:var(--color-accent); border-color:var(--color-accent); color:#000; font-weight:700; }
.pagination__ellipsis { color:var(--color-text-secondary); padding:0 6px; }

/* ── Search Bar ─────────────────────────────────────────────── */
.search-form { position:relative; }
.search-form__input {
  width:100%; background:var(--color-bg-secondary); border:1px solid var(--color-border);
  border-radius:var(--radius-full); color:var(--color-text-primary);
  padding:12px 50px 12px 20px; font-size:.9rem; font-family:inherit;
  transition:border-color var(--transition);
}
.search-form__input:focus { outline:none; border-color:var(--color-accent); }
.search-form__btn { position:absolute; right:6px; top:50%; transform:translateY(-50%); width:36px; height:36px; border-radius:50%; background:var(--color-accent); color:#000; display:flex; align-items:center; justify-content:center; cursor:pointer; border:none; }

/* ── Filter Tabs ────────────────────────────────────────────── */
.filter-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:24px; }
.filter-tab {
  padding:8px 18px; border-radius:var(--radius-full);
  background:var(--color-bg-secondary); border:1px solid var(--color-border);
  color:var(--color-text-secondary); font-size:.85rem; font-weight:500;
  cursor:pointer; transition:all var(--transition); text-decoration:none;
}
.filter-tab:hover, .filter-tab.active {
  background:rgba(255,215,0,.1); border-color:var(--color-accent); color:var(--color-accent);
}

/* ── Stats Section ──────────────────────────────────────────── */
.stats-grid { display:grid; gap:20px; grid-template-columns:repeat(2,1fr); }
@media(min-width:640px)  { .stats-grid { grid-template-columns:repeat(2,1fr); } }
@media(min-width:900px)  { .stats-grid { grid-template-columns:repeat(4,1fr); } }
.stat-card { text-align:center; padding:32px 16px; }
.stat-card__number { font-size:clamp(2rem,6vw,3.5rem); font-weight:900; color:var(--color-accent); line-height:1; margin-bottom:8px; }
.stat-card__label { color:var(--color-text-secondary); font-size:.88rem; text-transform:uppercase; letter-spacing:.06em; }

/* ── Sidebar ────────────────────────────────────────────────── */
.sidebar { display:flex; flex-direction:column; gap:24px; }
.sidebar-card { background:var(--color-bg-secondary); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:20px; }
.sidebar-card__title { font-weight:700; font-size:.88rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:16px; padding-bottom:10px; border-bottom:1px solid var(--color-border); }

/* ── Two-Column Layout ──────────────────────────────────────── */
.two-col { display:grid; gap:32px; }
@media(min-width:900px) { .two-col { grid-template-columns:1fr 320px; } }
@media(min-width:1024px){ .two-col { grid-template-columns:1fr 360px; } }

/* ── Empty State ────────────────────────────────────────────── */
.empty-state { text-align:center; padding:80px 20px; }
.empty-state__icon { font-size:3.5rem; margin-bottom:16px; opacity:.4; }
.empty-state h3 { font-size:1.25rem; font-weight:700; margin-bottom:8px; }
.empty-state p  { color:var(--color-text-secondary); font-size:.9rem; margin-bottom:24px; }

/* ── Loading Spinner ────────────────────────────────────────── */
.spinner {
  display:inline-block; width:24px; height:24px; border-radius:50%;
  border:2px solid rgba(255,255,255,.2); border-top-color:var(--color-accent);
  animation:spin .7s linear infinite;
}
@keyframes spin { to{ transform:rotate(360deg); } }

/* ── Shimmer Loading ────────────────────────────────────────── */
.shimmer {
  background:linear-gradient(90deg, var(--color-bg-secondary) 25%, rgba(255,255,255,.04) 50%, var(--color-bg-secondary) 75%);
  background-size:200% 100%; animation:shimmer 1.5s infinite;
  border-radius:var(--radius-sm);
}
@keyframes shimmer { from{background-position:200% 0} to{background-position:-200% 0} }

/* ── Back To Top ────────────────────────────────────────────── */
.back-to-top {
  position:fixed; bottom:calc(var(--player-h) + 20px); right:20px; z-index:900;
  width:44px; height:44px; border-radius:50%;
  background:var(--color-accent); color:#000;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-md); transition:all var(--transition);
  opacity:0; pointer-events:none; transform:translateY(10px);
}
.back-to-top.visible { opacity:1; pointer-events:auto; transform:translateY(0); }
.back-to-top:hover { transform:translateY(-2px); box-shadow:var(--shadow-glow); }

/* ── Scroll Reveal ──────────────────────────────────────────── */
[data-reveal] { opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
[data-reveal].visible { opacity:1; transform:none; }
[data-reveal="left"]  { transform:translateX(-24px); }
[data-reveal="right"] { transform:translateX(24px); }
[data-reveal="left"].visible, [data-reveal="right"].visible { transform:none; }

/* ── Booking Form ───────────────────────────────────────────── */
.booking-layout { display:grid; gap:40px; }
@media(min-width:900px) { .booking-layout { grid-template-columns:3fr 2fr; } }
.form-section { margin-bottom:32px; }
.form-section__title { font-weight:700; font-size:1rem; margin-bottom:16px; padding-bottom:10px; border-bottom:1px solid var(--color-border); color:var(--color-accent); }
.booking-info-card { background:var(--color-bg-secondary); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:24px; margin-bottom:20px; }
.booking-checklist { list-style:none; display:flex; flex-direction:column; gap:10px; }
.booking-checklist li { display:flex; align-items:flex-start; gap:10px; font-size:.88rem; color:var(--color-text-secondary); }
.booking-checklist li::before { content:"✓"; color:var(--color-accent); font-weight:700; flex-shrink:0; margin-top:1px; }

/* ── Article Content ────────────────────────────────────────── */
.article-content { max-width:760px; }
.article-content h2, .article-content h3 { margin:32px 0 14px; }
.article-content p  { margin-bottom:18px; color:var(--color-text-secondary); line-height:1.8; }
.article-content ul, .article-content ol { margin:0 0 18px 24px; }
.article-content li { margin-bottom:8px; color:var(--color-text-secondary); }
.article-content blockquote { border-left:4px solid var(--color-accent); padding:12px 24px; margin:24px 0; background:rgba(255,215,0,.05); border-radius:0 var(--radius-sm) var(--radius-sm) 0; }
.article-content blockquote p { color:var(--color-text-primary); font-style:italic; }
.article-content a { color:var(--color-accent); text-decoration:underline; }
.article-content img { border-radius:var(--radius-md); margin:24px 0; }
.article-header { margin-bottom:32px; padding-bottom:24px; border-bottom:1px solid var(--color-border); }
.article-header__title { font-size:clamp(1.5rem,4vw,2.25rem); font-weight:900; margin-bottom:14px; }
.article-header__meta { display:flex; flex-wrap:wrap; gap:16px; color:var(--color-text-secondary); font-size:.85rem; }
.article-header__meta span { display:flex; align-items:center; gap:6px; }

/* ── Share Buttons ──────────────────────────────────────────── */
.share-btns { display:flex; gap:8px; flex-wrap:wrap; }
.share-btn { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:var(--radius-full); font-size:.78rem; font-weight:600; cursor:pointer; transition:all var(--transition); border:1px solid var(--color-border); background:transparent; color:var(--color-text-secondary); }
.share-btn--facebook:hover { background:#1877f2; border-color:#1877f2; color:#fff; }
.share-btn--twitter:hover { background:#000; border-color:#000; color:#fff; }
.share-btn--copy:hover { background:var(--color-accent); border-color:var(--color-accent); color:#000; }

/* ── Card Panel ─────────────────────────────────────────────── */
.panel { background:var(--color-bg-secondary); border:1px solid var(--color-border); border-radius:var(--radius-md); }
.panel__header { padding:20px 24px; border-bottom:1px solid var(--color-border); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.panel__title { font-weight:700; font-size:1rem; display:flex; align-items:center; gap:8px; }
.panel__body { padding:24px; }
.panel__footer { padding:16px 24px; border-top:1px solid var(--color-border); }
.panel--hint { background:rgba(255,215,0,.04); border-color:rgba(255,215,0,.2); }

/* ── Quote / Scripture Section ──────────────────────────────── */
.scripture-section { padding:80px 0; background:linear-gradient(135deg, rgba(255,215,0,.05), transparent); }
.scripture-quote { max-width:680px; margin:0 auto; text-align:center; position:relative; }
.scripture-quote::before { content:'"'; font-size:8rem; color:rgba(255,215,0,.15); line-height:.5; position:absolute; top:0; left:-20px; font-family:Georgia,serif; }
.scripture-quote__text { font-size:clamp(1.1rem,3vw,1.5rem); font-style:italic; line-height:1.8; color:var(--color-text-primary); margin-bottom:16px; position:relative; z-index:1; }
.scripture-quote__reference { color:var(--color-accent); font-weight:700; font-size:.9rem; }

/* ── Impact CTA Section ─────────────────────────────────────── */
.impact-cta {
  padding:80px 0; text-align:center;
  background:linear-gradient(135deg, rgba(255,215,0,.08) 0%, transparent 100%);
}
.impact-cta h2 { margin-bottom:16px; }
.impact-cta p  { color:var(--color-text-secondary); max-width:560px; margin:0 auto 32px; font-size:1.05rem; }

/* ── Cookie / Notification Toast ───────────────────────────── */
.toast {
  position:fixed; bottom:calc(var(--player-h) + 16px); left:50%;
  transform:translateX(-50%) translateY(20px);
  background:var(--color-bg-secondary); border:1px solid var(--color-border);
  border-radius:var(--radius-md); padding:12px 20px;
  font-size:.85rem; color:var(--color-text-primary); z-index:8000;
  box-shadow:var(--shadow-lg); opacity:0; transition:all .3s ease;
  white-space:nowrap;
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ── Utilities ──────────────────────────────────────────────── */
.d-none   { display:none !important; }
.d-inline { display:inline; }
.d-flex   { display:flex; }
.d-grid   { display:grid; }
.gap-8    { gap:8px; }
.gap-12   { gap:12px; }
.gap-16   { gap:16px; }
.gap-24   { gap:24px; }
.mt-8     { margin-top:8px; }
.mt-16    { margin-top:16px; }
.mt-24    { margin-top:24px; }
.mt-32    { margin-top:32px; }
.mt-48    { margin-top:48px; }
.mb-8     { margin-bottom:8px; }
.mb-16    { margin-bottom:16px; }
.mb-24    { margin-bottom:24px; }
.mb-32    { margin-bottom:32px; }
.mb-48    { margin-bottom:48px; }
.p-16     { padding:16px; }
.p-24     { padding:24px; }
.p-32     { padding:32px; }
.rounded  { border-radius:var(--radius-md); }
.rounded-full { border-radius:var(--radius-full); }
.border   { border:1px solid var(--color-border); }
.w-full   { width:100%; }
.justify-between { justify-content:space-between; }
.items-center    { align-items:center; }
.flex-wrap       { flex-wrap:wrap; }
.flex-2          { flex:2; }
.fw-600          { font-weight:600; }
.fw-700          { font-weight:700; }
.fw-800          { font-weight:800; }
.display-contents{ display:contents; }
.text-italic     { font-style:italic; }
.text-overline   { text-transform:uppercase; letter-spacing:.06em; }
.text-center     { text-align:center; }
.text-right      { text-align:right; }
.text-left       { text-align:left; }
.sr-only         { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.emoji-xl        { font-size:2.5rem; margin-bottom:16px; }
.intro-text      { max-width:540px; margin:12px auto 32px; }
.text-body-max   { max-width:600px; }
.price-label     { font-size:1.2rem; font-weight:800; color:var(--color-accent); }
.td-icon         { width:50px; }
.text-stock-ok   { color:#22c55e; font-size:.8rem; font-weight:600; }
.section-top-offset { padding-top:calc(var(--header-h) + 24px); }
.badge--lg       { font-size:.85rem; padding:6px 14px; }

/* ── Page Hero Additions ─────────────────────────────────── */
.page-hero__inner { text-align:left; }

/* ── Track / Album Cover Art ─────────────────────────────── */
.track-cover { position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.cover-badge { position:absolute; top:12px; right:12px; }
.track-detail h1 { font-size:clamp(1.5rem,4vw,2.2rem); font-weight:800; margin-bottom:8px; }

/* ── Events Featured Banner ──────────────────────────────── */
.event-featured-inner { display:grid; }
.event-featured-inner .event-card__image { max-height:320px; }
.event-featured-inner .event-card__image img { width:100%; height:320px; object-fit:cover; }

/* ── Panel Variants ──────────────────────────────────────── */
.panel--success  { border-color:rgba(34,197,94,.4); background:rgba(34,197,94,.05); }
.panel--danger   { border-color:rgba(239,68,68,.4); }
.panel--padded   { padding:40px; }

/* ── Lyric Download Icon ─────────────────────────────────── */
.lyric-dl-icon {
  width:50px; height:50px; flex-shrink:0;
  border-radius:var(--radius-sm); background:rgba(255,215,0,.1);
  display:flex; align-items:center; justify-content:center;
  color:var(--color-accent); font-size:1.3rem;
}

/* ── Blog Listing Layout ─────────────────────────────────── */
.blog-listing { padding:48px 0 80px; }
.blog-layout { display:grid; gap:3rem; align-items:start; }
@media(min-width:900px) { .blog-layout { grid-template-columns:1fr 320px; } }
@media(max-width:1100px) { .blog-layout { grid-template-columns:1fr 280px; } }
@media(max-width:900px) { .blog-layout { grid-template-columns:1fr; } .blog-layout__sidebar { order:-1; } }

/* ── Blog Filter Bar ─────────────────────────────────────── */
.blog-filter-bar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; margin-bottom:2rem; padding-bottom:1.5rem; border-bottom:1px solid var(--color-border); }
.blog-filter-bar__info { color:var(--color-text-secondary); margin:0; font-size:.9rem; }
.blog-filter-bar__info strong { color:var(--color-text-primary); }
.blog-filter-bar__clear { display:inline-block; margin-left:.75rem; color:var(--color-accent); font-size:.8rem; text-decoration:none; }
.blog-filter-bar__clear:hover { text-decoration:underline; }
.blog-filter-bar__right { display:flex; align-items:center; gap:.5rem; }
.blog-filter-bar__label { font-size:.875rem; color:var(--color-text-secondary); }
.blog-filter-bar__select { background:var(--color-bg-secondary); border:1px solid var(--color-border); color:var(--color-text-primary); padding:.4rem .75rem; border-radius:6px; font-size:.875rem; cursor:pointer; }

/* ── Blog Card Additions ─────────────────────────────────── */
.blog-card { position:relative; }
.blog-card__featured-badge { position:absolute; top:.75rem; left:.75rem; background:var(--color-accent); color:#121212; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; padding:.2rem .6rem; border-radius:4px; z-index:2; }
.blog-card__image-link { display:block; }
.blog-card__image-wrap { aspect-ratio:16/10; overflow:hidden; background:var(--color-bg-primary); }
.blog-card__image { width:100%; height:100%; object-fit:cover; transition:transform .35s ease; display:block; }
.blog-card:hover .blog-card__image { transform:scale(1.05); }
.blog-card__meta { display:flex; flex-wrap:wrap; gap:.6rem 1rem; font-size:.78rem; color:var(--color-text-secondary); }
.blog-card__meta > span { display:flex; align-items:center; gap:.3rem; }
@media(max-width:600px) { .blog-filter-bar { flex-direction:column; align-items:flex-start; } }

/* ── Empty State Sub-classes ─────────────────────────────── */
.empty-state__icon  { color:var(--color-border); margin-bottom:1.5rem; }
.empty-state__title { font-size:1.5rem; font-weight:700; color:var(--color-text-primary); margin-bottom:.75rem; }
.empty-state__text  { margin-bottom:2rem; color:var(--color-text-secondary); }

/* ── Sidebar Blog Widgets ─────────────────────────────────── */
.sidebar-widget { background:var(--color-bg-secondary); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:1.5rem; margin-bottom:1.75rem; }
.sidebar-widget__title { font-size:1rem; font-weight:700; color:var(--color-text-primary); margin:0 0 1.25rem; padding-bottom:.75rem; border-bottom:2px solid var(--color-accent); display:inline-block; }
.sidebar-widget__text  { color:var(--color-text-secondary); font-size:.875rem; margin:0 0 1rem; }
.sidebar-widget--newsletter { background:linear-gradient(135deg,var(--color-bg-secondary),rgba(255,215,0,.06)); border-color:rgba(255,215,0,.25); }
.sidebar-search-form__group { display:flex; }
.sidebar-search-form__input { flex:1; background:var(--color-bg-primary); border:1px solid var(--color-border); border-right:none; color:var(--color-text-primary); padding:.6rem .9rem; border-radius:6px 0 0 6px; font-size:.9rem; }
.sidebar-search-form__input:focus { outline:none; border-color:var(--color-accent); }
.sidebar-search-form__btn { background:var(--color-accent); border:none; color:#121212; padding:.6rem 1rem; border-radius:0 6px 6px 0; cursor:pointer; display:flex; align-items:center; }
.sidebar-search-form__btn:hover { opacity:.85; }
.sidebar-categories { list-style:none; margin:0; padding:0; }
.sidebar-categories__item + .sidebar-categories__item { border-top:1px solid var(--color-border); }
.sidebar-categories__link { display:flex; justify-content:space-between; align-items:center; padding:.6rem 0; color:var(--color-text-secondary); text-decoration:none; font-size:.9rem; transition:color .2s; }
.sidebar-categories__link:hover, .sidebar-categories__link--active { color:var(--color-accent); font-weight:600; }
.sidebar-categories__count { background:var(--color-bg-primary); border-radius:12px; padding:.1rem .55rem; font-size:.75rem; color:var(--color-text-secondary); }
.sidebar-recent { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1rem; }
.sidebar-recent__link { display:flex; gap:.85rem; text-decoration:none; }
.sidebar-recent__thumb { flex-shrink:0; width:70px; height:55px; border-radius:6px; overflow:hidden; background:var(--color-bg-primary); }
.sidebar-recent__thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.sidebar-recent__info { display:flex; flex-direction:column; gap:.3rem; }
.sidebar-recent__title { color:var(--color-text-primary); font-size:.85rem; font-weight:600; line-height:1.4; }
.sidebar-recent__link:hover .sidebar-recent__title { color:var(--color-accent); }
.sidebar-recent__date { color:var(--color-text-secondary); font-size:.75rem; }

/* ── My Orders / Purchase Dashboard ────────────────────────── */

/* Narrow page layout */
.container--narrow { max-width:760px; margin:0 auto; }

/* Status badges */
.badge--paid    { display:inline-block; background:rgba(34,197,94,.15); color:#22c55e; padding:3px 10px; border-radius:var(--radius-full); font-size:.8rem; font-weight:700; }
.badge--pending { display:inline-block; background:rgba(245,158,11,.15); color:#f59e0b; padding:3px 10px; border-radius:var(--radius-full); font-size:.8rem; font-weight:700; }
.badge--failed  { display:inline-block; background:rgba(239,68,68,.15);  color:#ef4444; padding:3px 10px; border-radius:var(--radius-full); font-size:.8rem; font-weight:700; }

/* Order metadata summary grid */
.order-meta-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr));
  gap:16px; margin-bottom:28px; padding:20px;
  background:rgba(255,255,255,.03); border-radius:var(--radius-md);
  border:1px solid rgba(255,255,255,.06);
}
.order-meta-label {
  font-size:.75rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--color-text-secondary); margin-bottom:4px;
}
.order-meta-value { font-weight:600; }
.order-meta-value--accent { font-weight:800; color:var(--color-accent); font-size:1.1rem; }

/* Invoice action buttons row */
.invoice-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* Items table inside invoice */
.order-items-table { width:100%; border-collapse:collapse; }
.order-items-table thead tr { border-bottom:2px solid rgba(255,255,255,.1); }
.order-items-table th {
  padding:10px 12px; text-align:left;
  font-size:.75rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--color-text-secondary); font-weight:600;
}
.order-items-table th:last-child,
.order-items-table td:last-child { text-align:right; }
.order-items-table td { padding:12px; border-bottom:1px solid rgba(255,255,255,.05); }
.order-items-table tbody tr:last-child td { border-bottom:none; }
.order-items-table tfoot td {
  padding:14px 12px; font-weight:700; font-size:1rem;
  border-top:2px solid rgba(255,255,255,.12);
}
.order-items-table tfoot td:last-child { font-weight:800; color:var(--color-accent); font-size:1.1rem; }
.item-type-badge { background:rgba(255,255,255,.06); padding:3px 8px; border-radius:var(--radius-sm); font-size:.8rem; }

/* Download cards */
.dl-list { display:flex; flex-direction:column; gap:12px; }
.dl-card {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:16px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-sm); flex-wrap:wrap;
}
.dl-card__info { display:flex; align-items:center; gap:12px; min-width:0; flex:1; }
.dl-card__icon {
  width:40px; height:40px; flex-shrink:0;
  background:var(--color-accent); border-radius:10px;
  display:flex; align-items:center; justify-content:center;
}
.dl-card__title { font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dl-card__meta  { font-size:.8rem; color:var(--color-text-secondary); margin-top:2px; }

/* Help / tips list */
.help-list { display:grid; gap:20px; }
.help-item { display:flex; gap:12px; align-items:flex-start; }
.help-item__icon {
  width:36px; height:36px; flex-shrink:0;
  background:rgba(255,215,0,.12); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.help-item__title { font-weight:600; margin-bottom:4px; }
.help-item__desc  { font-size:.875rem; color:var(--color-text-secondary); }

/* Full-width button modifier */
.btn--block { width:100%; justify-content:center; }

/* SVG icons inline in buttons */
.btn svg { vertical-align:middle; }

/* Download panel tint */
.panel--dl { border-color:rgba(34,197,94,.25); background:rgba(34,197,94,.03); }

/* Required field asterisk */
.form-required { color:var(--color-accent); margin-left:2px; }

/* Accent link */
.link--accent { color:var(--color-accent); text-decoration:underline; }

/* Table responsive wrapper */
.table-responsive { overflow-x:auto; }

/* Utility text sizes */
.text-xs  { font-size:.75rem; }
.text-sm  { font-size:.875rem; }
.text-lg  { font-size:1.1rem; }
.mt-4     { margin-top:4px; }
.justify-center { justify-content:center; }

/* ── Responsive Adjustments ─────────────────────────────────── */
@media(max-width:640px) {
  .section { padding:48px 0; }
  .hero__actions .btn { flex:1; min-width:130px; }
  .two-col { grid-template-columns:1fr; }
  .blog-grid { grid-template-columns:1fr; }
  .music-grid { grid-template-columns:1fr 1fr; }
  .events-grid { grid-template-columns:1fr; }
  .album-info__actions .btn { width:100%; }
  .checkout-layout { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; }
  .newsletter-form__group { flex-direction:column; }
  .newsletter-form__input { width:100%; }
  .donation-form { padding:20px; }
}

/* ── Print ──────────────────────────────────────────────────── */
@media print {
  .site-header,.site-footer,.audio-player,.back-to-top,.modal-overlay { display:none !important; }
  body { background:#fff; color:#000; }
  a { color:#000; }
}

/* ── Reduced Motion ─────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ── Badge FREE variant ──────────────────────────────────────── */
.badge--free { background:rgba(34,197,94,.15); color:#22c55e; }

/* ── Panel Variants ──────────────────────────────────────────── */
.panel--accent-border { border-left:3px solid var(--color-accent); }
.panel--gradient-accent { background:linear-gradient(135deg,rgba(255,215,0,.08),transparent); border-color:rgba(255,215,0,.2); }

/* ── Blog Post Page ──────────────────────────────────────────── */
.blog-post-top { padding:calc(var(--header-h) + 32px) 0 0; }
.article-featured-figure { margin-bottom:32px; }
.article-featured-img { width:100%; border-radius:var(--radius-md); max-height:460px; object-fit:cover; }
.author-avatar { width:60px; height:60px; border-radius:50%; overflow:hidden; background:var(--color-accent); display:flex; align-items:center; justify-content:center; font-weight:700; color:#000; font-size:1.2rem; flex-shrink:0; }
.author-avatar img { width:100%; height:100%; object-fit:cover; }
.author-name { font-weight:700; }
.sidebar-post-thumb { width:60px; height:60px; border-radius:var(--radius-sm); overflow:hidden; flex-shrink:0; }
.sidebar-post-thumb img { width:100%; height:100%; object-fit:cover; }
.sidebar-post-link { font-size:.85rem; font-weight:600; line-height:1.3; display:block; margin-bottom:4px; }

/* ── About Page ──────────────────────────────────────────────── */
.page-hero__inner--center { padding-top:calc(var(--header-h) + 60px); padding-bottom:60px; text-align:center; }
.about-section-icon { width:48px; height:48px; background:rgba(255,215,0,.1); border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:16px; }

/* ── Donate Page ─────────────────────────────────────────────── */
.donate-hero__icon { font-size:2.5rem; margin-bottom:16px; }
.donate-hero__subtitle { max-width:580px; margin:12px auto 0; }
.form-group--hidden { display:none; }
.frequency-options { display:flex; gap:8px; flex-wrap:wrap; }
.frequency-label { cursor:pointer; }
.frequency-label input[type="radio"] { accent-color:var(--color-accent); }
.amount-btn--full { flex-basis:100%; }
.amount-input-wrap { position:relative; }
.amount-input-prefix { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--color-accent); font-weight:700; pointer-events:none; }
.form-control--amount { padding-left:32px; }
.impact-item__icon { font-size:1.5rem; flex-shrink:0; }
.impact-item__title { font-weight:700; font-size:.9rem; }
.donate-thanks__icon { font-size:2rem; margin-bottom:8px; }

/* ── Contact Page ────────────────────────────────────────────── */
.breadcrumb--center { justify-content:center; }
.quick-links { flex-direction:column; }
.btn--left { justify-content:flex-start !important; }
.maps-embed { border-radius:var(--radius-md); overflow:hidden; height:350px; }

/* ── Search Page ─────────────────────────────────────────────── */
.search-hero-form { max-width:560px; margin:20px auto 0; }
.search-hero-form__inner { display:flex; gap:12px; }
.search-hero-form__input { flex:1; font-size:1.1rem; }
.music-grid--compact { grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); }
.search-results-grid { display:grid; gap:20px; margin-bottom:40px; }
.search-results-grid--sm { display:grid; gap:12px; margin-bottom:40px; }
.search-blog-result { text-decoration:none; display:flex; gap:16px; padding:16px; background:var(--color-bg-secondary); border-radius:var(--radius-md); border:1px solid var(--color-border); }
.search-blog-result__img { width:80px; height:80px; object-fit:cover; border-radius:var(--radius-sm); flex-shrink:0; }
.search-result__title { font-weight:600; color:var(--color-text-primary); margin-bottom:4px; }
.search-event-result { text-decoration:none; display:flex; gap:16px; padding:16px; background:var(--color-bg-secondary); border-radius:var(--radius-md); border:1px solid var(--color-border); }
.search-event-date { text-align:center; min-width:56px; padding:8px; background:rgba(255,215,0,.1); border-radius:var(--radius-sm); }
.search-event-date__day { font-size:1.3rem; font-weight:800; color:var(--color-accent); }
.search-event-date__month { font-size:.7rem; text-transform:uppercase; color:var(--color-text-secondary); }
.search-lyric-result { text-decoration:none; padding:14px 20px; background:var(--color-bg-secondary); border-radius:var(--radius-md); border:1px solid var(--color-border); display:flex; justify-content:space-between; align-items:center; }
.search-lyric-result__title { font-weight:600; color:var(--color-text-primary); }

/* ── Gap utilities ───────────────────────────────────────────── */
.gap-32 { gap:32px; }