/* ==========================================================
   BURMANS VINYL — MAIN STYLESHEET
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600&display=swap');

/* Playfair Display — self-hosted (not Google Fonts CDN) since the
   client supplied the font files directly. Used for every heading and
   sub-header site-wide via --font-display below; body text and labels
   keep Work Sans / Oswald. */
@font-face {
  font-family: 'Playfair Display';
  src: url('assets/fonts/PlayfairDisplay-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('assets/fonts/PlayfairDisplay-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('assets/fonts/PlayfairDisplay-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('assets/fonts/PlayfairDisplay-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('assets/fonts/PlayfairDisplay-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Quicksand';
  src: url('assets/fonts/Quicksand-Variable.ttf') format('truetype-variations');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/*
  Typography note: the brief specifies "DIN Condensed" for labels/badges.
  DIN Condensed (FF DIN) is a commercial typeface without a free web-embed
  license, so it cannot be loaded from Google Fonts or bundled here without
  a purchased license. Oswald is used as the practical substitute — it is
  free, well-licensed, and shares DIN's condensed-grotesk proportions and
  era-appropriate feel. If you purchase a DIN Condensed web license, add
  an @font-face rule below and change --font-label to "DIN Condensed".
*/

:root {
  /* ---- Color system ----
     Palette direction: warm ivory dominant (~60-65%), charcoal used
     strategically for contrast/drama (~20-25%), deep burgundy as the
     primary accent (~10-15%), with the original vintage supporting
     tones (mustard, teal, purple, brown) kept for restrained accents. */
  --vinyl-black: #56234F;   /* primary purple — used in full-width blocks only (Hero, Sell Your Vinyl, Footer, Collection toolbar) per client's final palette direction */
  --warm-cream: #F6F1E7;    /* cream — page background, stays genuinely cream, never purple-tinted */
  --burnt-orange: #C8A369;  /* luxury gold accent — primary buttons, prices, highlights (variable name kept for compatibility with existing rules) */
  --mustard-gold: #C8A369;  /* same gold accent — kept as a separate variable for compatibility, intentionally matching */
  --deep-purple: #4B285C;
  --dusty-teal: #285C59;
  --faded-brown: #6B4935;
  --bright-orange: #E8631C;  /* vivid, attention-grabbing accent — distinct from the burgundy brand accent, used sparingly for emphasis like "soul" in the hero */
  --ink-plum: 43,31,44;      /* dark plum-black — replaces neutral near-black for text/borders/overlays so no pure black remains anywhere on the site */

  /* Explicit aliases matching the approved palette language */
  --ivory: var(--warm-cream);
  --charcoal: var(--vinyl-black);
  --burgundy: var(--burnt-orange);

  --ink: var(--vinyl-black);
  --paper: var(--warm-cream);
  --accent: var(--burnt-orange);

  /* ---- Typography ---- */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Quicksand', -apple-system, sans-serif;
  --font-label: 'Oswald', 'Arial Narrow', sans-serif;

  /* ---- Layout ---- */
  --container-max: 1360px;
  --edge: clamp(20px, 5vw, 80px);
  --radius-card: 2px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  margin: 0;
  line-height: 1.15;
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--edge);
  padding-right: var(--edge);
}

.label {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  font-weight: 500;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid currentColor;
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.65rem;
}

/* Skip link for keyboard/screen-reader users */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--warm-cream);
  color: var(--vinyl-black);
  padding: 12px 20px;
  z-index: 9999;
}
.skip-link:focus {
  left: var(--edge);
  top: 12px;
}

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

/* ==========================================================
   TEXTURE — subtle grain overlay used across dark sections
   ========================================================== */
.grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%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");
}

/* ==========================================================
   NAVIGATION
   ========================================================== */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  padding: 26px var(--edge);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  color: var(--warm-cream);
  border-bottom: 1px solid transparent;
  transition: background 0.4s var(--ease-smooth), border-color 0.4s var(--ease-smooth), padding 0.4s var(--ease-smooth), backdrop-filter 0.4s var(--ease-smooth);
}

.site-nav.is-scrolled {
  padding: 16px var(--edge);
  background: var(--charcoal);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: rgba(241, 230, 204, 0.14);
}

.site-nav__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.site-nav__logo {
  height: 81px;
  width: auto;
  transition: height 0.4s var(--ease-smooth);
}
.site-nav.is-scrolled .site-nav__logo { height: 63px; }

.site-nav__wordmark {
  font-family: var(--font-label);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.95rem;
  color: var(--warm-cream);
}

.site-nav__links {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 40px);
  list-style: none;
  margin: 0; padding: 0;
}

.site-nav__links a {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.94rem;
  letter-spacing: 0.03em;
  color: rgba(241, 230, 204, 0.82);
  position: relative;
  padding-bottom: 4px;
}
.site-nav__links a::after {
  content: '';
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 1px;
  background: var(--burnt-orange);
  transition: right 0.35s var(--ease-out);
}
.site-nav__links a:hover::after,
.site-nav__links a.is-active::after { right: 0; }
.site-nav__links a:hover,
.site-nav__links a.is-active { color: var(--warm-cream); }

.site-nav__actions {
  display: flex;
  align-items: center;
  gap: 22px;
}

.site-nav__social {
  display: flex;
  align-items: center;
  gap: 14px;
}
.site-nav__social a {
  color: rgba(241,230,204,0.7);
  display: flex;
  transition: color 0.25s var(--ease-smooth), transform 0.25s var(--ease-smooth);
}
.site-nav__social a:hover { color: var(--warm-cream); transform: translateY(-1px); }
.site-nav__social svg { width: 17px; height: 17px; }

/* ---- Nav search (collapsed icon that expands to an inline field) ---- */
.nav-search {
  position: relative;
  display: flex;
  align-items: center;
}
.nav-search__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(241, 230, 204, 0.3);
  color: var(--warm-cream);
  cursor: pointer;
  transition: border-color 0.25s var(--ease-smooth), background 0.25s var(--ease-smooth), opacity 0.2s var(--ease-smooth);
}
.nav-search__toggle:hover { border-color: var(--burnt-orange); background: rgba(200, 163, 105, 0.12); }
.nav-search__toggle svg { width: 16px; height: 16px; }
.nav-search.is-open .nav-search__toggle { opacity: 0; pointer-events: none; }

.nav-search__form {
  display: flex;
  align-items: center;
  gap: 8px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(246, 241, 231, 0.08);
  border: 1px solid rgba(200, 163, 105, 0.5);
  border-radius: 20px;
  padding: 0 16px;
  width: 0;
  min-width: 0;
  height: 36px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: width 0.3s var(--ease-smooth), opacity 0.2s var(--ease-smooth), padding 0.3s var(--ease-smooth);
}
.nav-search.is-open .nav-search__form {
  width: 260px;
  opacity: 1;
  padding: 0 14px;
  pointer-events: auto;
}
.nav-search__form svg { width: 15px; height: 15px; color: var(--burnt-orange); flex-shrink: 0; }
.nav-search__form input {
  background: none;
  border: none;
  outline: none;
  color: var(--warm-cream);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9rem;
  flex: 1;
  min-width: 0;
}
.nav-search__form input::placeholder { color: rgba(241, 230, 204, 0.6); font-weight: 700; }
.nav-search__close {
  display: none;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  flex-shrink: 0;
  background: none;
  border: none;
  color: rgba(241, 230, 204, 0.6);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.nav-search.is-open .nav-search__close { display: flex; }

/* The expanded field is positioned relative to the small icon wrapper,
   so it visually pops out over whatever sits to its left — the nav
   links. Fade those out (space stays reserved, just invisible) rather
   than letting the field overlap live text. */
.site-nav.nav-search-is-open .site-nav__links {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--ease-smooth);
}

.crate-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: var(--warm-cream);
}

.crate-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 50%;
  background: var(--burnt-orange);
  color: var(--warm-cream);
  font-size: 0.7rem;
  font-family: var(--font-body);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 6px;
}
.nav-toggle span {
  width: 24px;
  height: 1.5px;
  background: var(--warm-cream);
}

.mobile-menu {
  position: fixed;
  inset: 0;
  color: var(--warm-cream);
  z-index: 600;
  background: var(--vinyl-black);
  display: flex;
  flex-direction: column;
  padding: 26px var(--edge);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 0.5s var(--ease-out), visibility 0s linear 0.5s;
}
.mobile-menu.is-open {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.5s var(--ease-out), visibility 0s linear 0s;
}
.mobile-menu__close {
  align-self: flex-end;
  background: none;
  border: none;
  color: var(--warm-cream);
  font-size: 1.8rem;
  line-height: 1;
  padding: 10px;
}
.mobile-menu__links {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.mobile-menu__links a {
  font-family: var(--font-display);
  font-size: 1.9rem;
}
.mobile-menu__social {
  display: flex;
  gap: 22px;
  margin-top: 36px;
  padding-top: 26px;
  border-top: 1px solid rgba(241,230,204,0.14);
}
.mobile-menu__social a { color: rgba(241,230,204,0.75); }
.mobile-menu__social svg { width: 24px; height: 24px; }

/* ==========================================================
   HERO
   ========================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  color: var(--warm-cream);
  align-items: center;
  overflow: hidden;
  background: radial-gradient(ellipse at 30% 20%, rgba(75,40,92,0.35), transparent 55%),
              radial-gradient(ellipse at 78% 75%, rgba(86,35,79,0.35), transparent 50%),
              var(--vinyl-black);
}

.hero__psych-layer {
  position: absolute;
  inset: -10%;
  z-index: 1;
  opacity: 0.55;
  will-change: transform;
}

.hero__inner {
  position: relative;
  z-index: 5;
  width: 100%;
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  align-items: center;
  gap: 40px;
  padding: 140px var(--edge) 90px;
}

.hero__eyebrow {
  color: var(--mustard-gold);
  margin-bottom: 22px;
  display: block;
  font-size: 0.86rem;
  letter-spacing: 0.16em;
}

.hero__headline {
  font-size: clamp(2.6rem, 5.4vw, 4.6rem);
  color: var(--warm-cream);
  will-change: transform;
}
.hero__headline em {
  font-style: italic;
  color: var(--bright-orange);
}

.hero__copy {
  margin: 26px 0 40px;
  max-width: 46ch;
  color: rgba(241,230,204,0.78);
  font-size: 1.05rem;
}

.hero__ctas {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.btn {
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  padding: 16px 30px;
  border: 1px solid var(--warm-cream);
  color: var(--warm-cream);
  background: transparent;
  transition: background 0.35s var(--ease-smooth), color 0.35s var(--ease-smooth), border-color 0.35s var(--ease-smooth), transform 0.25s var(--ease-smooth);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.btn:hover { transform: translateY(-2px); }

.btn--primary {
  background: var(--burnt-orange);
  border-color: var(--burnt-orange);
  color: var(--warm-cream);
}
.btn--primary:hover { background: #58141f; border-color: #58141f; }

.btn--ghost:hover {
  background: var(--warm-cream);
  color: var(--vinyl-black);
}

/* For use on light/ivory backgrounds where the default cream-outline
   ghost button would be invisible. */
.btn--outline-dark {
  border-color: var(--vinyl-black);
  color: var(--vinyl-black);
}
.btn--outline-dark:hover {
  background: var(--vinyl-black);
  color: var(--warm-cream);
}

.btn--small { padding: 11px 20px; font-size: 0.7rem; }

.hero__vinyl-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}

.vinyl {
  --vinyl-size: min(46vw, 480px);
  width: var(--vinyl-size);
  height: var(--vinyl-size);
  border-radius: 50%;
  position: relative;
  animation: vinyl-spin 9s linear infinite;
  will-change: transform;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.55));
}

.hero__scroll-cue {
  position: absolute;
  bottom: 34px;
  left: var(--edge);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(241,230,204,0.92);
  font-family: var(--font-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.82rem;
  font-weight: 500;
}
.hero__scroll-cue::before {
  content: '';
  width: 26px; height: 1px;
  background: currentColor;
}

/* ==========================================================
   SECTION SCAFFOLDING
   ========================================================== */
.section {
  position: relative;
  padding: 120px var(--edge);
}
.section--cream {
  background: var(--warm-cream);
  color: var(--vinyl-black);
}
.section--tight { padding-top: 40px; padding-bottom: 80px; }
.section--statement {
  position: relative;
  padding-top: 100px;
  padding-bottom: 100px;
  background-color: var(--vinyl-black); /* shows while the photo loads / as a fallback */
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.section--statement::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(20,15,20,0.55);
  z-index: 0;
}
.section--featured { padding-top: 40px; }

.section__eyebrow {
  display: block;
  margin-bottom: 20px;
  color: var(--burnt-orange);
}
.section--cream .section__eyebrow { color: var(--faded-brown); }

.sell-eyebrow--large {
  font-family: var(--font-display);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  color: var(--warm-cream);
  margin-bottom: 30px;
  display: inline-block;
  position: relative;
}
.sell-eyebrow--large mark {
  background: none;
  color: var(--mustard-gold);
  position: relative;
  padding: 0 6px;
}

.section__heading {
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  max-width: 16ch;
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Brand statement ---- */
.statement {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}
.statement__text {
  font-size: clamp(1.8rem, 4vw, 3.1rem);
  line-height: 1.28;
  color: var(--warm-cream);
  font-weight: 700;
}
.statement__text .accent { color: var(--mustard-gold); font-style: italic; }

/* ---- Featured records ---- */
.section__head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 56px;
  flex-wrap: wrap;
}
.section__head-row .section__eyebrow { font-size: 0.86rem; }
.section__head-row .btn { font-weight: 600; font-size: 0.85rem; border-color: var(--vinyl-black); color: var(--vinyl-black); }
.section__head-row .btn:hover { background: var(--vinyl-black); color: var(--warm-cream); }

.featured-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}

.featured-card {
  display: block;
  color: var(--vinyl-black);
  background: #FFFFFF;
  border: 1px solid rgba(var(--ink-plum),0.14);
  border-radius: var(--radius-card);
  padding: 0 0 16px;
  overflow: hidden;
}
.featured-card__art {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #111;
}
.featured-card__art img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s var(--ease-out);
}
.featured-card:hover .featured-card__art img { transform: scale(1.045); }
.featured-card__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin: 14px 14px 4px;
  line-height: 1.3;
}
.featured-card__artist {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.7rem;
  color: var(--faded-brown);
  margin: 0 14px;
}
.featured-card__category {
  font-family: var(--font-body);
  font-size: 0.76rem;
  color: rgba(var(--ink-plum),0.55);
  margin: 3px 14px 0;
}
.featured-card__catalogue {
  font-family: var(--font-body);
  font-size: 0.74rem;
  color: rgba(var(--ink-plum),0.5);
  margin: 8px 14px 0;
}
.featured-card__condition {
  font-family: var(--font-body);
  font-size: 0.76rem;
  color: rgba(var(--ink-plum),0.55);
  margin: 4px 14px 0;
}
.featured-card__description {
  font-family: var(--font-body);
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(var(--ink-plum),0.65);
  margin: 10px 14px 0;
}
.featured-card__price {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--vinyl-black);
  margin: 12px 14px 0;
  padding-top: 10px;
  border-top: 1px solid rgba(var(--ink-plum),0.12);
}

/* ---- Sell Your Vinyl ---- */
.sell-section {
  background: var(--charcoal);
  color: var(--warm-cream);
  position: relative;
  overflow: hidden;
}
.sell-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: start;
  position: relative;
  z-index: 3;
}
.sell-steps {
  list-style: none;
  margin: 40px 0 40px;
  padding: 0;
  counter-reset: step;
}
.sell-steps li {
  counter-increment: step;
  display: flex;
  gap: 20px;
  padding: 20px 0;
  border-top: 1px solid rgba(241,230,204,0.16);
}
.sell-steps li:last-child { border-bottom: 1px solid rgba(241,230,204,0.16); }
.sell-steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-label);
  color: var(--mustard-gold);
  font-size: 0.85rem;
  padding-top: 3px;
}
.sell-steps h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 4px;
}
.sell-steps p { margin: 0; color: rgba(241,230,204,0.7); font-size: 0.92rem; }

.sell-visual {
  position: relative;
  aspect-ratio: 4/5;
  background: linear-gradient(160deg, var(--deep-purple), var(--vinyl-black) 65%);
  overflow: hidden;
}
.sell-visual img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; mix-blend-mode: luminosity; }

.whatsapp-inline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 30px;
  color: #4fbf8c;
  font-family: var(--font-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.75rem;
  border-bottom: 1px solid rgba(79,191,140,0.4);
  padding-bottom: 4px;
}

.whatsapp-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 30px;
  padding: 15px 26px;
  background: #25D366;
  color: #2B1F2C;
  font-family: var(--font-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.76rem;
  font-weight: 600;
  border: 1px solid #25D366;
  transition: background 0.3s var(--ease-smooth), transform 0.25s var(--ease-smooth);
}
.whatsapp-btn:hover { background: #1fb257; transform: translateY(-2px); }
.whatsapp-btn svg { width: 18px; height: 18px; }

/* ---- Why Burman's ---- */
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(var(--ink-plum),0.12);
  margin-top: 60px;
}
.why-item {
  background: var(--warm-cream);
  padding: 42px 30px;
}
.why-item .label { color: var(--burnt-orange); }
.why-item h3 { font-size: 1.42rem; margin: 16px 0 12px; }
.why-item p { margin: 0; font-size: 0.98rem; color: rgba(var(--ink-plum),0.72); }
.why-item--feature {
  grid-column: 1 / -1;
  background: var(--vinyl-black);
  color: var(--warm-cream);
  padding: 0;
  display: grid;
  grid-template-columns: 0.9fr 1.4fr;
  align-items: stretch;
  overflow: hidden;
}
.why-item--feature__media { position: relative; min-height: 220px; overflow: hidden; }
.why-item--feature__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: sepia(0.35) contrast(1.05);
  transition: transform 0.6s var(--ease-out);
}
.why-item--feature__video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: sepia(0.55) contrast(1.05) brightness(0.9);
  opacity: 0;
  transition: opacity 0.6s var(--ease-smooth);
}
.why-item--feature__video.is-ready { opacity: 1; }
.why-item--feature:hover .why-item--feature__media img { transform: scale(1.05); }
.why-item--feature__copy { padding: 46px 40px; display: flex; flex-direction: column; justify-content: center; }
.why-item--feature .label { color: var(--mustard-gold); }
.why-item--feature p { color: rgba(241,230,204,0.75); max-width: 60ch; }

/* ---- Deep Cuts ---- */
.deepcuts {
  background: var(--charcoal);
  color: var(--warm-cream);
}
.deepcuts__layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 60px;
  align-items: center;
}
.deepcuts__media {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
}
.deepcuts__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: sepia(0.25) contrast(1.05);
}
.deepcuts__copy p {
  color: rgba(241,230,204,0.75);
  font-size: 1.02rem;
  max-width: 52ch;
}
.deepcuts__copy .section__heading { margin-bottom: 24px; }

/* ---- About ---- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.about-copy p { font-size: 1.02rem; color: rgba(var(--ink-plum),0.78); max-width: 50ch; }

/* ---- Contact ("Say Hello") — a deliberately prominent section, not a
   quiet afterthought at the bottom of the page. ---- */
.contact-section {
	scroll-margin-top: 120px;
  position: relative;
  overflow: hidden;
}
.contact-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 70px;
  position: relative;
  z-index: 2;
}
.contact-info p { color: rgba(var(--ink-plum),0.68); max-width: 34ch; }
.contact-info__item {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid rgba(var(--ink-plum),0.14);
}
.contact-info__item .label { color: var(--burnt-orange); display: block; margin-bottom: 6px; }

.contact-form-panel {
  background: #FBF6E8;
  border: 1px solid rgba(var(--ink-plum),0.14);
  box-shadow: 0 30px 60px rgba(var(--ink-plum),0.1);
  padding: clamp(28px, 4vw, 48px);
  position: relative;
}
.contact-form-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 4px;
  background: linear-gradient(90deg, var(--burnt-orange), var(--mustard-gold));
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
/* Staggered entrance animation — scoped ONLY to the Contact form panel
   (which sits inside a .reveal-triggered container) so it never
   accidentally hides fields in other forms (e.g. checkout) that don't
   have a .reveal ancestor to trigger it. */
.contact-form-panel .field { opacity: 0; transform: translateY(14px); }
.contact-form-panel.is-visible .field {
  animation: fade-up 0.6s var(--ease-out) forwards;
}
.contact-form-panel.is-visible .field:nth-child(1) { animation-delay: 0.05s; }
.contact-form-panel.is-visible .field:nth-child(2) { animation-delay: 0.12s; }
.contact-form-panel.is-visible .field:nth-child(3) { animation-delay: 0.19s; }
.contact-form-panel.is-visible .field:nth-child(4) { animation-delay: 0.26s; }
.contact-form-panel.is-visible .field:nth-child(5) { animation-delay: 0.33s; }
@media (prefers-reduced-motion: reduce) {
  .contact-form-panel .field { opacity: 1; transform: none; animation: none !important; }
}
.field label {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.68rem;
  color: rgba(241,230,204,0.65);
}
.field input, .field textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(241,230,204,0.3);
  color: var(--warm-cream);
  padding: 10px 2px;
  font-size: 0.98rem;
  transition: border-color 0.3s var(--ease-smooth);
}
.field input:focus, .field textarea:focus {
  border-color: var(--burnt-orange);
  outline: none;
}

/* The Contact form panel sits on the light ivory page background, so it
   needs the opposite (dark) contrast from every other form on the site
   (checkout, etc.), which sit on dark charcoal sections. Scoped here so
   fixing one never breaks the other. */
.contact-form-panel .field label { color: rgba(var(--ink-plum),0.6); }
.contact-form-panel .field input,
.contact-form-panel .field textarea {
  border-bottom-color: rgba(var(--ink-plum),0.25);
  color: var(--vinyl-black);
}
.field textarea { resize: vertical; min-height: 110px; }
.field-error {
  color: #b23c3c;
  font-size: 0.75rem;
  min-height: 1em;
}
.field.has-error input, .field.has-error textarea { border-color: #b23c3c; }

.form-status {
  margin-top: 20px;
  padding: 16px 18px;
  border: 1px solid rgba(var(--ink-plum),0.2);
  font-size: 0.92rem;
  display: none;
}
.form-status.is-visible { display: block; }
.form-status.is-success { border-color: var(--dusty-teal); color: #1d5a52; background: rgba(40,92,89,0.08); }
.form-status.is-error { border-color: #b23c3c; color: #8a2c2c; background: rgba(178,60,60,0.08); }

.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==========================================================
   FOOTER
   ========================================================== */
.site-footer {
  background: var(--charcoal);
  color: var(--warm-cream);
  border-top: 1px solid rgba(241,230,204,0.14);
  padding: 70px var(--edge) 34px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 50px;
}
.footer-brand__logo { height: 120px; margin-bottom: 18px; }
.footer-brand p { color: rgba(241,230,204,0.6); max-width: 32ch; font-size: 0.92rem; }
.footer-col h5 {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
  color: var(--mustard-gold);
  margin-bottom: 18px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-col a { color: rgba(241,230,204,0.72); font-size: 0.9rem; }
.footer-col a:hover { color: var(--warm-cream); }
.footer-whatsapp-link, .contact-whatsapp-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.footer-whatsapp-link svg, .contact-whatsapp-link svg {
  width: 15px; height: 15px;
  color: #4fbf8c;
  flex-shrink: 0;
}
.footer-social {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-bottom: 34px;
  margin-bottom: 34px;
  border-bottom: 1px solid rgba(241,230,204,0.14);
}
.footer-social__label {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--warm-cream);
}
.footer-social a {
  color: var(--warm-cream);
  display: flex;
  transition: color 0.25s var(--ease-smooth), transform 0.25s var(--ease-smooth);
}
.footer-social a:hover { color: var(--mustard-gold); transform: translateY(-2px) scale(1.08); }
.footer-social svg { width: 26px; height: 26px; }
.footer-bottom {
  border-top: 1px solid rgba(241,230,204,0.1);
  padding-top: 26px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  color: rgba(241,230,204,0.45);
  font-size: 0.78rem;
}

/* ==========================================================
   WHATSAPP FLOATING BUTTON
   ========================================================== */
.whatsapp-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 400;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--vinyl-black);
  border: 1px solid rgba(241,230,204,0.25);
  color: var(--warm-cream);
  padding: 13px 16px;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  transition: padding 0.35s var(--ease-out), background 0.35s var(--ease-smooth), border-color 0.35s;
  padding-bottom: env(safe-area-inset-bottom, 13px);
}
.whatsapp-fab svg { width: 22px; height: 22px; flex-shrink: 0; color: #4fbf8c; }
.whatsapp-fab__label {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--font-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.72rem;
  transition: max-width 0.35s var(--ease-out);
}
.whatsapp-fab:hover { border-color: #4fbf8c; }
.whatsapp-fab:hover .whatsapp-fab__label,
.whatsapp-fab:focus-visible .whatsapp-fab__label { max-width: 160px; margin-left: 2px; }

/* ==========================================================
   LOADING INDICATOR (spinning vinyl, shown near the pointer only
   during genuine async work — the native cursor is used at all
   other times, per client feedback on the old custom cursor)
   ========================================================== */
.bv-loading-indicator {
  position: fixed;
  top: 0; left: 0;
  width: 30px; height: 30px;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.2s var(--ease-out);
  filter: drop-shadow(0 3px 5px rgba(0,0,0,0.35));
}
.bv-loading-indicator svg { width: 100%; height: 100%; }

/* ==========================================================
   COLLECTION PAGE
   ========================================================== */
.collection-hero {
  padding: 200px var(--edge) 50px;
  background: var(--charcoal);
  color: var(--warm-cream);
  border-bottom: 1px solid rgba(241,230,204,0.12);
}
.collection-hero--shelf {
  position: relative;
  min-height: 620px;
  overflow: hidden;
}
.collection-hero__shelf-img {
  position: absolute;
  right: 90px;
  bottom: 0;
  height: calc(100% - 186px); /* leaves the section's own 150px top padding, plus a small extra gap, clear below the nav */
  width: auto;
  max-width: 40%;
  object-fit: contain;
  /* Shadow cast toward the left, as if lit from the right — matches
     the approved mockup direction. */
  filter: drop-shadow(-45px 30px 26px rgba(0,0,0,0.45));
}
@media (max-width: 900px) {
  .collection-hero__shelf-img { display: none; } /* avoid overlapping the heading on narrow screens until a dedicated mobile layout is designed */
}
.collection-hero--photo {
  position: relative;
  background-color: var(--vinyl-black); /* fallback while the photo loads */
  background-size: cover;
  background-position: center;
}
.collection-hero--photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(20,15,20,0.55);
  z-index: 0;
}
.collection-hero--photo > * { position: relative; z-index: 1; }
.collection-hero__heading { font-size: clamp(3.6rem, 6.3vw, 5.4rem); max-width: 18ch; color: var(--warm-cream); }
.highlight-me {
  font-style: normal;
  font-weight: 700;
  font-size: 1.25em;
  color: var(--mustard-gold);
}
.collection-hero .section__eyebrow { color: var(--mustard-gold); font-size: 0.92rem; letter-spacing: 0.16em; }
.collection-hero__sub { color: rgba(241,230,204,0.65); max-width: 50ch; margin-top: 18px; font-size: 1.5rem; }

.collection-toolbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(69,26,63,0.94);
  color: var(--warm-cream);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(241,230,204,0.12);
  padding: 20px var(--edge);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.toolbar-search {
  position: relative;
  flex: 1 1 220px;
  min-width: 180px;
}
.toolbar-search input {
  width: 100%;
  background: var(--warm-cream);
  border: 1.5px solid var(--burnt-orange);
  border-radius: 24px;
  color: var(--ink);
  font-weight: 700;
  padding: 11px 14px 11px 40px;
  font-size: 0.9rem;
}
.toolbar-search input::placeholder {
  color: rgba(var(--ink-plum), 0.6);
  font-weight: 700;
  opacity: 1;
}
.toolbar-search input:focus { border-color: var(--burnt-orange); outline: none; box-shadow: 0 0 0 3px rgba(200,163,105,0.25); }
.toolbar-search svg {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; opacity: 0.6; color: rgba(var(--ink-plum), 0.6);
}

.toolbar-select {
  background: transparent;
  border: 1px solid rgba(241,230,204,0.25);
  color: var(--warm-cream);
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 0.85rem;
}
.toolbar-select option { background: var(--vinyl-black); }

.toolbar-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.65rem;
  padding: 8px 14px;
  border: 1px solid rgba(var(--ink-plum),0.3);
  background: transparent;
  color: rgba(var(--ink-plum),0.7);
  transition: all 0.25s var(--ease-smooth);
}
.chip:hover { border-color: var(--vinyl-black); color: var(--vinyl-black); }
.chip.is-active { background: var(--burnt-orange); border-color: var(--burnt-orange); color: var(--warm-cream); }

.toolbar-result-count {
  margin-left: auto;
  font-family: var(--font-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.68rem;
  color: rgba(241,230,204,0.5);
}

.collection-grid-wrap { background: var(--ivory); padding: 50px var(--edge) 130px; min-height: 60vh; }
.collection-pagination-wrap {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 44px;
}
.collection-page-btn {
  min-width: 42px;
  height: 42px;
  padding: 0 8px;
  border-radius: 4px;
  border: 1px solid rgba(var(--ink-plum),0.25);
  background: transparent;
  color: var(--vinyl-black);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.25s var(--ease-smooth), color 0.25s var(--ease-smooth), border-color 0.25s var(--ease-smooth);
}
.collection-page-btn:hover { border-color: var(--vinyl-black); }
.collection-page-btn.is-active {
  background: var(--vinyl-black);
  border-color: var(--vinyl-black);
  color: var(--warm-cream);
}
.collection-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.state-message {
  text-align: center;
  padding: 90px 20px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: rgba(241,230,204,0.55);
  grid-column: 1 / -1;
}

/* ---- Record card (Option 2) ---- */
.record-card {
  background: #FFFFFF;
  color: var(--vinyl-black);
  border: 1px solid rgba(var(--ink-plum),0.16);
  border-radius: var(--radius-card);
  position: relative;
  overflow: hidden;
  transition: transform 0.4s var(--ease-out), border-color 0.4s var(--ease-smooth), box-shadow 0.4s var(--ease-smooth);
}
.record-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.record-card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--ink-plum),0.3);
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}

.record-card__art {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #111;
}
.record-card__art img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}
.record-card:hover .record-card__art img { transform: scale(1.045); }

.record-card__badge {
  position: absolute;
  top: 12px; left: 12px;
  background: var(--vinyl-black);
  color: var(--warm-cream);
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.62rem;
  padding: 5px 10px;
}
.record-card__badge--sold {
  background: rgba(var(--ink-plum),0.85);
  color: #e08a6b;
}

.record-card__body { padding: 20px 20px 22px; }
.record-card__artist {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  color: var(--faded-brown);
}
.record-card__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin: 8px 0 6px;
  line-height: 1.3;
}
.record-card__pressing {
  font-size: 0.78rem;
  color: rgba(var(--ink-plum),0.6);
  margin-bottom: 12px;
}
.record-card__meta {
  display: flex;
  gap: 10px;
  font-family: var(--font-label);
  text-transform: uppercase;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  color: rgba(var(--ink-plum),0.55);
  margin-bottom: 16px;
}
.record-card__description {
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(var(--ink-plum),0.68);
  margin: 0 0 16px;
}
.record-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(var(--ink-plum),0.14);
  padding-top: 14px;
}
.record-card__price {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.1rem;
}
.record-card__add {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--vinyl-black);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: background 0.25s var(--ease-smooth), color 0.25s var(--ease-smooth), transform 0.2s;
  flex-shrink: 0;
}
.record-card__add:hover { background: var(--vinyl-black); color: var(--warm-cream); }
.record-card__add:active { transform: scale(0.92); }
.record-card__add[disabled] { opacity: 0.3; cursor: not-allowed; }
.record-card__add.is-added { background: var(--dusty-teal); border-color: var(--dusty-teal); color: var(--warm-cream); }

.record-card__whatsapp {
  margin-top: 10px;
  font-size: 0.72rem;
  color: var(--faded-brown);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.record-card__whatsapp svg { width: 13px; height: 13px; color: #3fa876; flex-shrink: 0; }
.record-card__whatsapp:hover { color: var(--vinyl-black); }

.toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translate(-50%, 20px);
  background: var(--vinyl-black);
  color: var(--warm-cream);
  border: 1px solid var(--burnt-orange);
  padding: 14px 26px;
  font-family: var(--font-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.72rem;
  z-index: 700;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }

/* ---- Single product detail page ---- */
.product-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
.product-detail__art {
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  background: #FBF6E8;
  border: 1px solid rgba(var(--ink-plum),0.14);
}
.product-detail__art img { width: 100%; height: 100%; object-fit: cover; }
.product-detail__info { padding-top: 10px; }

.crate-overlay {
  position: fixed;
  inset: 0;
  background: rgba(var(--ink-plum),0.6);
  z-index: 800;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-smooth);
}
.crate-overlay.is-open { opacity: 1; pointer-events: auto; }

.crate-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  color: var(--warm-cream);
  width: min(440px, 100vw);
  background: var(--vinyl-black);
  border-left: 1px solid rgba(241,230,204,0.15);
  z-index: 801;
  transform: translateX(100%);
  transition: transform 0.5s var(--ease-out);
  display: flex;
  flex-direction: column;
}
.crate-drawer.is-open { transform: translateX(0); }

.crate-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px var(--edge);
  border-bottom: 1px solid rgba(241,230,204,0.14);
}
.crate-drawer__head h3 { font-family: var(--font-label); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.95rem; }
.crate-drawer__close { background: none; border: none; color: var(--warm-cream); font-size: 1.5rem; padding: 6px; }

.crate-items {
  flex: 1;
  overflow-y: auto;
  padding: 10px var(--edge);
}

.crate-item {
  display: grid;
  grid-template-columns: 68px 1fr auto;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(241,230,204,0.1);
  align-items: flex-start;
}
.crate-item__art { width: 68px; height: 68px; object-fit: cover; }
.crate-item__artist { font-family: var(--font-label); text-transform: uppercase; font-size: 0.65rem; letter-spacing: 0.06em; color: var(--mustard-gold); }
.crate-item__title { font-family: var(--font-display); font-size: 0.98rem; margin: 4px 0; }
.crate-item__sub { font-size: 0.75rem; color: rgba(241,230,204,0.55); }
.crate-item__qty {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.qty-btn {
  width: 26px; height: 26px;
  border: 1px solid rgba(241,230,204,0.3);
  background: none;
  color: var(--warm-cream);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
}
.qty-btn:hover { border-color: var(--warm-cream); }
.crate-item__price { text-align: right; font-weight: 600; }
.crate-item__remove {
  background: none; border: none;
  color: rgba(241,230,204,0.5);
  font-size: 0.7rem;
  text-decoration: underline;
  margin-top: 10px;
  padding: 0;
}
.crate-item__remove:hover { color: #e08a6b; }

.crate-empty {
  text-align: center;
  padding: 80px 20px;
  color: rgba(241,230,204,0.5);
  font-family: var(--font-display);
  font-size: 1.2rem;
}

.crate-drawer__foot {
  padding: 22px var(--edge) 28px;
  border-top: 1px solid rgba(241,230,204,0.14);
}
.crate-totals-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  margin-bottom: 10px;
  color: rgba(241,230,204,0.7);
}
.crate-totals-row.is-total { font-size: 1rem; color: var(--warm-cream); font-family: var(--font-body); text-transform: none; letter-spacing: 0; }
.crate-drawer__foot .btn { width: 100%; justify-content: center; margin-top: 14px; }

/* ---- Full crate page ---- */
.crate-page {
  padding: 150px var(--edge) 130px;
  background: var(--charcoal);
  color: var(--warm-cream);
  min-height: 100vh;
}
.crate-page__layout {
  display: grid;
  grid-template-columns: 1.3fr 0.9fr;
  gap: 60px;
  align-items: start;
}
.crate-page__items { border-top: 1px solid rgba(241,230,204,0.14); }
.crate-page .crate-item { grid-template-columns: 90px 1fr auto; padding: 24px 0; }
.crate-page .crate-item__art { width: 90px; height: 90px; }

.summary-card {
  background: rgba(241,230,204,0.04);
  border: 1px solid rgba(241,230,204,0.14);
  padding: 30px;
  position: sticky;
  top: 130px;
}
.summary-card h3 { font-family: var(--font-label); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.85rem; margin-bottom: 22px; }

.checkout-form { margin-top: 34px; display: none; }
.checkout-form.is-visible { display: block; }
.checkout-form .form-grid { margin-top: 20px; }

.payment-note {
  margin-top: 18px;
  font-size: 0.78rem;
  color: rgba(241,230,204,0.55);
  border-left: 2px solid var(--mustard-gold);
  padding-left: 12px;
}

.order-confirmation {
  text-align: center;
  padding: 60px 20px;
}
.order-confirmation h2 { font-size: 2rem; margin-bottom: 16px; }
.order-confirmation p { color: rgba(241,230,204,0.7); max-width: 46ch; margin: 0 auto; }

/* ==========================================================
   ABOUT PAGE — EDITORIAL TYPOGRAPHY
   ========================================================== */
.about-editorial .about-copy p {
  font-size: 1.08rem;
  line-height: 1.85;
  color: rgba(var(--ink-plum),0.76);
  margin-bottom: 26px;
  text-align: justify;
  text-align-last: left;
}
.about-editorial .about-copy__pullquote { text-align: left !important; }

/* Justified text utility — used selectively on wide, long-form
   paragraphs where justify reads cleanly. text-align-last keeps the
   final (often short) line of a paragraph from being stretched to
   fill the width, which is the most common source of ugly, uneven
   word-spacing. Disabled entirely below ~640px, where columns get too
   narrow for justify to ever look clean. */
.justify-text {
  text-align: justify;
  text-align-last: left;
}
@media (max-width: 640px) {
  .justify-text,
  .about-editorial .about-copy p {
    text-align: left;
    text-align-last: left;
  }
}
.about-editorial .about-copy em {
  font-style: italic;
  color: var(--burnt-orange);
}
.about-copy__dropcap::first-letter {
  font-family: var(--font-display);
  font-size: 4.6rem;
  font-style: italic;
  float: left;
  line-height: 0.8;
  padding: 6px 10px 0 0;
  color: var(--burnt-orange);
}
.about-copy__pullquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem) !important;
  line-height: 1.4 !important;
  color: var(--vinyl-black) !important;
  border-left: 3px solid var(--burnt-orange);
  padding: 4px 0 4px 26px;
  margin: 40px 0 !important;
}
.timeline-section {
  background: var(--charcoal);
  color: var(--warm-cream);
  padding: 100px var(--edge) 60px;
  position: relative;
}
.timeline-intro { max-width: 640px; margin: 0 auto 80px; text-align: center; }
.timeline-intro p { color: rgba(241,230,204,0.7); margin-top: 18px; }

.timeline {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(241,230,204,0.16);
  transform: translateX(-50%);
}

.timeline-stage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 70px 0;
  position: relative;
}
.timeline-stage:nth-child(even) .timeline-stage__media { order: 2; }
.timeline-stage:nth-child(even) .timeline-stage__copy { order: 1; text-align: right; }
.timeline-stage:nth-child(even) .timeline-stage__meta { justify-content: flex-end; }

.timeline-stage__marker {
  position: absolute;
  left: 50%;
  top: 78px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--burnt-orange);
  transform: translateX(-50%);
  box-shadow: 0 0 0 6px var(--charcoal);
}

.timeline-stage__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.timeline-stage__number {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at center, var(--mustard-gold) 0 3px, transparent 3px),
              radial-gradient(circle at center, var(--mustard-gold) 0 0, transparent 0);
  border: 2px solid var(--mustard-gold);
  vertical-align: middle;
  margin-right: 4px;
}
.timeline-stage__copy h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: 14px; }
.timeline-stage__copy p { color: rgba(241,230,204,0.72); max-width: 46ch; }
.timeline-stage:nth-child(even) .timeline-stage__copy p { margin-left: auto; }

.timeline-stage__media {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(241,230,204,0.12);
}
.timeline-stage__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s var(--ease-out);
}
.timeline-stage__media:hover img { transform: scale(1.04); }
.timeline-stage__media::after {
  content: '\2197';
  position: absolute;
  right: 14px; bottom: 14px;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(var(--ink-plum),0.55);
  color: var(--warm-cream);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  backdrop-filter: blur(4px);
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(var(--ink-plum),0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-smooth);
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox img { max-width: min(90vw, 900px); max-height: 80vh; object-fit: contain; }
.lightbox__close, .lightbox__prev, .lightbox__next {
  position: absolute;
  background: rgba(241,230,204,0.1);
  border: 1px solid rgba(241,230,204,0.25);
  color: var(--warm-cream);
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.lightbox__close { top: 24px; right: 24px; font-size: 1.3rem; }
.lightbox__prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 24px; top: 50%; transform: translateY(-50%); }
.lightbox__close:hover, .lightbox__prev:hover, .lightbox__next:hover { background: rgba(241,230,204,0.2); }

@media (max-width: 860px) {
  .timeline::before { left: 20px; }
  .timeline-stage,
  .timeline-stage:nth-child(even) {
    grid-template-columns: 1fr;
    padding-left: 46px;
    text-align: left !important;
  }
  .timeline-stage__media, .timeline-stage:nth-child(even) .timeline-stage__media { order: 1; }
  .timeline-stage__copy, .timeline-stage:nth-child(even) .timeline-stage__copy { order: 2; text-align: left !important; }
  .timeline-stage:nth-child(even) .timeline-stage__copy p { margin-left: 0; }
  .timeline-stage:nth-child(even) .timeline-stage__meta { justify-content: flex-start; }
  .timeline-stage__marker { left: 20px; top: 8px; }
}

/* ==========================================================
   RECORD DETAIL POP-UP (medium modal — front/back covers,
   store info, and Discogs-pulled pressing details)
   ========================================================== */
.record-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 850;
  background: rgba(20,15,20,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-smooth);
}
.record-modal-overlay.is-open { opacity: 1; pointer-events: auto; }

.record-modal {
  width: min(760px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  background: #FBF6E8;
  border-radius: 4px;
  position: relative;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  transform: translateY(16px);
  transition: transform 0.3s var(--ease-out);
}
.record-modal-overlay.is-open .record-modal { transform: translateY(0); }

.record-modal__close {
  position: absolute;
  top: 14px; right: 14px;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(32,28,26,0.2);
  background: #FBF6E8;
  color: var(--vinyl-black);
  font-size: 1.2rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.record-modal__close:hover { background: var(--vinyl-black); color: var(--warm-cream); }

.record-modal__media {
  background: #111;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.record-modal__front {
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: 2px;
}
.record-modal__front img { width: 100%; height: 100%; object-fit: cover; }

.record-modal__back-thumb {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.record-modal__back-thumb img {
  width: 56px; height: 56px;
  object-fit: cover;
  border-radius: 2px;
  border: 1px solid rgba(241,230,204,0.25);
  transition: transform 0.2s var(--ease-smooth);
}
.record-modal__back-thumb:hover img { transform: scale(1.06); }
.record-modal__back-label {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.68rem;
  color: rgba(241,230,204,0.6);
}

.record-modal__info {
  padding: 28px 28px 26px;
  overflow-y: auto;
}
.record-modal__info .label { color: var(--burnt-orange); }
.record-modal__artist {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.78rem;
  color: var(--faded-brown);
  margin-top: 10px;
}
.record-modal__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin: 6px 0 10px;
  color: var(--vinyl-black);
}
.record-modal__description {
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(32,28,26,0.72);
  margin: 0 0 16px;
}
.record-modal__meta {
  display: flex;
  gap: 14px;
  font-size: 0.8rem;
  color: rgba(32,28,26,0.6);
  margin-bottom: 16px;
}
.record-modal__price {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--vinyl-black);
  margin-bottom: 20px;
}

.record-modal__pressing {
  background: rgba(32,28,26,0.05);
  border-radius: 4px;
  padding: 14px 16px;
  margin-bottom: 22px;
}
.record-modal__pressing-label {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.66rem;
  color: var(--burnt-orange);
  margin-bottom: 8px;
}
.record-modal__pressing-body { font-size: 0.82rem; color: rgba(32,28,26,0.75); }
.record-modal__pressing-body dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin: 0;
}
.record-modal__pressing-body dt { color: rgba(32,28,26,0.5); }
.record-modal__pressing-body dd { margin: 0; text-align: right; }

.record-modal__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.record-modal__actions .btn { flex: 1; min-width: 160px; justify-content: center; }
.record-modal__actions .whatsapp-btn { flex: 1; min-width: 160px; justify-content: center; margin-top: 0; }

@media (max-width: 640px) {
  .record-modal { grid-template-columns: 1fr; max-height: 92vh; }
  .record-modal__media { padding-bottom: 10px; }
}

/* Every Record, Individually — full-bleed backdrop photo behind the section */
.every-record-section {
  background-image: linear-gradient(rgba(32,28,26,0.93), rgba(32,28,26,0.93)), url('../assets/images/buying-experience/every-record-backdrop.jpg');
  background-size: cover;
  background-position: center;
}

/* ==========================================================
   ABOUT PAGE — IMAGE GALLERY (uniform grid + lightbox)
   ========================================================== */
.about-gallery-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
}
.about-gallery-item {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: 2px;
  background: #111;
  position: relative;
}
.about-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s var(--ease-smooth);
}
.about-gallery-item:hover img { transform: scale(1.06); }
.about-gallery-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(20,15,20,0);
  transition: background 0.3s var(--ease-smooth);
  pointer-events: none;
}
.about-gallery-item:hover::after { background: rgba(20,15,20,0.15); }

@media (max-width: 900px) {
  .about-gallery-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .about-gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}