/* ==========================================================================
   BringBackTheiPod — Master Stylesheet
   Auria Modern Amenities LLC
   Brand: pink #ff2d9b / blue #2980B9 / white / dark #1a1a2e
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand colors */
  --pink: #ff2d9b;
  --pink-dark: #d81b7e;
  --pink-light: #ff6bb8;
  --pink-wash: #fff0f8;
  --blue: #2980b9;
  --blue-dark: #1f6592;
  --blue-wash: #eef6fb;

  /* Neutrals */
  --dark: #1a1a2e;
  --dark-soft: #2c2c47;
  --gray-900: #1a1a2e;
  --gray-700: #4a4a63;
  --gray-500: #767690;
  --gray-300: #d5d5e0;
  --gray-200: #e6e6ef;
  --gray-100: #f4f4f9;
  --white: #ffffff;

  /* Semantic */
  --bg: var(--white);
  --bg-alt: var(--gray-100);
  --text: var(--dark);
  --text-muted: var(--gray-500);
  --border: var(--gray-200);

  /* Type */
  --font-display: "Orbitron", "Arial Black", sans-serif;
  --font-body: "Rajdhani", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Share Tech Mono", ui-monospace, "Courier New", monospace;

  /* Spacing scale */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4rem;
  --s9: 6rem;

  /* Radii */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 3px rgba(26, 26, 46, 0.08), 0 1px 2px rgba(26, 26, 46, 0.04);
  --shadow-md: 0 6px 20px rgba(26, 26, 46, 0.08), 0 2px 6px rgba(26, 26, 46, 0.04);
  --shadow-lg: 0 18px 48px rgba(26, 26, 46, 0.12), 0 4px 12px rgba(26, 26, 46, 0.06);
  --glow-pink: 0 0 0 1px rgba(255, 45, 155, 0.25), 0 8px 30px rgba(255, 45, 155, 0.28);
  --glow-pink-strong: 0 0 0 1px rgba(255, 45, 155, 0.4), 0 10px 44px rgba(255, 45, 155, 0.45);

  /* Layout */
  --wrap: 1180px;
  --wrap-narrow: 780px;
  --header-h: 74px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 0.16s var(--ease);
  --t-med: 0.28s var(--ease);
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--pink); text-decoration: none; }
a:hover { color: var(--pink-dark); }
ul, ol { margin: 0; padding: 0; }
figure { margin: 0; }

:focus-visible {
  outline: 3px solid var(--pink);
  outline-offset: 3px;
  border-radius: 4px;
}

@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;
  }
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 var(--s4);
  color: var(--dark);
}

h1 { font-size: clamp(2.1rem, 5.2vw, 3.75rem); letter-spacing: -0.025em; }
h2 { font-size: clamp(1.65rem, 3.6vw, 2.5rem); letter-spacing: -0.02em; }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); }
h4 { font-size: 1.0625rem; letter-spacing: 0; }

p { margin: 0 0 var(--s4); }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  line-height: 1.6;
  color: var(--gray-700);
  font-weight: 500;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pink);
  margin: 0 0 var(--s3);
  display: block;
}

.eyebrow--light { color: var(--pink-light); }

.pink { color: var(--pink); }
.text-center { text-align: center; }
.muted { color: var(--text-muted); }

/* Glow text used for hero accents */
.glow {
  color: var(--pink);
  text-shadow: 0 0 22px rgba(255, 45, 155, 0.55), 0 0 48px rgba(255, 45, 155, 0.28);
}

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--s5);
}

.wrap--narrow { max-width: var(--wrap-narrow); }
/* Configurator pages need the extra room: preview on the left, options on
   the right, and neither should be squeezed. Shared so every build page
   gets it, not just the repair picker. */
.wrap--wide{max-width:1340px}

.section { padding-block: clamp(3.5rem, 8vw, 6rem); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 3.75rem); }
.section--alt { background: var(--bg-alt); }

.section--dark {
  background: var(--dark);
  color: #e9e9f5;
}
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 { color: var(--white); }
.section--dark .lede,
.section--dark p { color: #b9b9d0; }

.section-head {
  max-width: 660px;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  text-align: center;
}
.section-head p { color: var(--gray-700); font-size: 1.125rem; }

.grid { display: grid; gap: var(--s5); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--pink);
  color: var(--white);
  padding: var(--s3) var(--s5);
  font-family: var(--font-mono);
  border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; color: var(--white); }

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: 0.85rem 1.75rem;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-med),
              background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  white-space: nowrap;
  text-align: center;
}

.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--pink);
  color: var(--white);
  box-shadow: var(--glow-pink);
}
.btn--primary:hover {
  background: var(--pink-dark);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--glow-pink-strong);
}

.btn--ghost {
  background: transparent;
  color: var(--dark);
  border-color: var(--gray-300);
}
.btn--ghost:hover {
  color: var(--pink);
  border-color: var(--pink);
  background: var(--pink-wash);
  transform: translateY(-2px);
}

.btn--onDark {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.35);
}
.btn--onDark:hover {
  background: var(--white);
  color: var(--dark);
  border-color: var(--white);
  transform: translateY(-2px);
}

.btn--blue {
  background: var(--blue);
  color: var(--white);
  box-shadow: 0 6px 22px rgba(41, 128, 185, 0.3);
}
.btn--blue:hover { background: var(--blue-dark); color: var(--white); transform: translateY(-2px); }

.btn--block { width: 100%; }
.btn--sm { padding: 0.6rem 1.2rem; font-size: 0.75rem; }
.btn--lg { padding: 1.05rem 2.4rem; font-size: 0.9375rem; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}
.btn-row--center { justify-content: center; }

/* --------------------------------------------------------------------------
   6. HEADER / NAV
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--t-med);
}
.site-header.is-scrolled { box-shadow: var(--shadow-md); }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--dark);
  flex-shrink: 0;
}
.brand:hover { color: var(--dark); }
.brand svg { width: 26px; height: 40px; flex-shrink: 0; }
.brand-mark { filter: drop-shadow(0 0 8px rgba(255, 45, 155, 0.55)); }
.brand-text .ip { color: var(--pink); }

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--s2);
  list-style: none;
}
.nav-links a {
  display: block;
  padding: 0.5rem 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-700);
  border-radius: var(--r-sm);
  transition: color var(--t-fast), background var(--t-fast);
}
.nav-links a:hover { color: var(--pink); background: var(--pink-wash); }
.nav-links a[aria-current="page"] {
  color: var(--pink);
  background: var(--pink-wash);
  font-weight: 700;
}

.nav-cta { flex-shrink: 0; }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav-toggle span {
  position: relative;
  display: block;
  width: 20px;
  height: 2px;
  background: var(--dark);
  border-radius: 2px;
  transition: background var(--t-fast);
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: var(--dark);
  border-radius: 2px;
  transition: transform var(--t-med), top var(--t-med);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 1080px) {
  .nav-toggle { display: inline-flex; }
  .nav-cta { display: none; }
  .nav-links {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    padding: var(--s3) var(--s5) var(--s5);
    transform: translateY(-140%);
    transition: transform var(--t-med);
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }
  .nav-links.is-open { transform: translateY(0); }
  .nav-links a {
    padding: 0.9rem 0.5rem;
    font-size: 0.9375rem;
    border-bottom: 1px solid var(--gray-100);
    border-radius: 0;
  }
  .nav-links .nav-mobile-cta { margin-top: var(--s4); }
  .nav-links .nav-mobile-cta a {
    border: none;
    background: var(--pink);
    color: var(--white);
    text-align: center;
    border-radius: var(--r-pill);
    font-family: var(--font-display);
    font-weight: 700;
  }
  .nav-links .nav-mobile-cta a:hover { background: var(--pink-dark); color: var(--white); }
}

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3.5rem, 8vw, 6rem);
  background:
    radial-gradient(900px 520px at 78% 18%, rgba(255, 45, 155, 0.13), transparent 62%),
    radial-gradient(760px 460px at 12% 88%, rgba(41, 128, 185, 0.11), transparent 62%),
    var(--white);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(26, 26, 46, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26, 26, 46, 0.028) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 30%, transparent 78%);
  pointer-events: none;
  z-index: 0;
}

.hero .wrap { position: relative; z-index: 1; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.hero h1 { margin-bottom: var(--s5); }
.hero .lede { max-width: 52ch; margin-bottom: var(--s6); }

.hero-art {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.hero-art::before {
  content: "";
  position: absolute;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 45, 155, 0.22), transparent 66%);
  filter: blur(26px);
  animation: pulse 5s ease-in-out infinite;
}
.hero-art svg { position: relative; width: 100%; max-width: 320px; }

@keyframes pulse {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.06); }
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero .lede { margin-inline: auto; }
  .hero .btn-row { justify-content: center; }
  .hero-art { order: -1; }
  .hero-art svg { max-width: 210px; }
}

/* Page hero (interior pages) */
.page-hero {
  position: relative;
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
  background:
    radial-gradient(700px 380px at 82% 12%, rgba(255, 45, 155, 0.12), transparent 62%),
    var(--gray-100);
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.page-hero h1 { margin-bottom: var(--s4); }
.page-hero .lede { max-width: 60ch; margin-inline: auto; }

/* Breadcrumb */
.crumbs {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-bottom: var(--s4);
}
.crumbs a { color: var(--gray-500); }
.crumbs a:hover { color: var(--pink); }
.crumbs span { margin-inline: var(--s2); opacity: 0.5; }

/* --------------------------------------------------------------------------
   8. TRUST BAR
   -------------------------------------------------------------------------- */
.trustbar {
  background: var(--dark);
  color: var(--white);
  padding-block: var(--s5);
}
.trustbar-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s4) var(--s5);
  text-align: center;
}
.trust-item {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}
.trust-item strong {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--pink-light);
  text-shadow: 0 0 16px rgba(255, 45, 155, 0.4);
}
.trust-item span {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #a5a5c2;
}

/* --------------------------------------------------------------------------
   9. CARDS
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
}
.card:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 45, 155, 0.35);
  box-shadow: var(--shadow-lg);
}

.card-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  background: linear-gradient(160deg, var(--gray-100), #fdf4fa);
  padding: var(--s5);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.card-media svg { max-height: 100%; width: auto; transition: transform var(--t-med); }
.card:hover .card-media svg { transform: scale(1.06) rotate(-1.5deg); }
.card-media img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }

.card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--s5);
  gap: var(--s3);
}
.card-body h3 { margin: 0; font-size: 1.1875rem; }
.card-body p { color: var(--gray-700); font-size: 0.9875rem; margin: 0; }
.card-body .btn { margin-top: auto; }

.badge {
  position: absolute;
  top: var(--s4);
  left: var(--s4);
  z-index: 2;
  padding: 0.3rem 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--pink);
  color: var(--white);
  border-radius: var(--r-pill);
  box-shadow: 0 4px 14px rgba(255, 45, 155, 0.4);
}
.badge--blue { background: var(--blue); box-shadow: 0 4px 14px rgba(41, 128, 185, 0.35); }
.badge--dark { background: var(--dark); box-shadow: none; }

.price {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--dark);
}
.price s {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gray-500);
  text-decoration-color: var(--pink);
}
.price small {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-500);
}

.spec-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  font-size: 0.9375rem;
  color: var(--gray-700);
}
.spec-list li {
  position: relative;
  padding-left: 1.5rem;
}
.spec-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 8px rgba(255, 45, 155, 0.6);
}

/* Feature (icon) cards */
.feature {
  padding: var(--s6) var(--s5);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
}
.feature:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 45, 155, 0.3);
  box-shadow: var(--shadow-md);
}
.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--s4);
  border-radius: var(--r-md);
  background: var(--pink-wash);
  color: var(--pink);
}
.feature-icon svg { width: 26px; height: 26px; }
.feature h3 { font-size: 1.0625rem; margin-bottom: var(--s2); }
.feature p { font-size: 0.9375rem; color: var(--gray-700); margin: 0; }

.section--dark .feature {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}
.section--dark .feature:hover { border-color: rgba(255, 45, 155, 0.5); }
.section--dark .feature-icon { background: rgba(255, 45, 155, 0.15); color: var(--pink-light); }
.section--dark .feature p { color: #b9b9d0; }

/* --------------------------------------------------------------------------
   10. PRODUCT DETAIL
   -------------------------------------------------------------------------- */
.product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 880px) { .product { grid-template-columns: 1fr; } }

.product-gallery {
  position: sticky;
  top: calc(var(--header-h) + var(--s5));
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  background: linear-gradient(160deg, var(--gray-100), #fdf4fa);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: clamp(2rem, 6vw, 4rem);
}
.product-gallery svg { max-height: 100%; width: auto; }
@media (max-width: 880px) { .product-gallery { position: static; aspect-ratio: 4 / 3; } }

.product-info h1 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
.product-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-bottom: var(--s5);
  padding-bottom: var(--s5);
  border-bottom: 1px solid var(--border);
}
.product-price .now {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  color: var(--pink);
}
.product-price s { font-size: 1.125rem; color: var(--gray-500); }
.product-price .save {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.25rem 0.65rem;
  background: var(--pink-wash);
  color: var(--pink-dark);
  border-radius: var(--r-pill);
}

/* Variant selector */
.variants { margin-bottom: var(--s5); }
.variants > .label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-bottom: var(--s3);
}
.variant-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}
.variant {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 88px;
  padding: 0.6rem 0.9rem;
  background: var(--white);
  border: 2px solid var(--gray-300);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
  font-family: var(--font-body);
  font-weight: 700;
}
.variant:hover { border-color: var(--pink-light); transform: translateY(-2px); }
.variant.is-active {
  border-color: var(--pink);
  background: var(--pink-wash);
  box-shadow: 0 0 0 3px rgba(255, 45, 155, 0.12);
}
.variant .v-name { font-size: 0.9375rem; }
.variant .v-price {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--gray-500);
}
.variant.is-active .v-price { color: var(--pink-dark); }

/* Color swatches */
.swatch-row { display: flex; flex-wrap: wrap; gap: var(--s3); }
.swatch {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--gray-300);
  cursor: pointer;
  transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.swatch:hover { transform: scale(1.1); }
.swatch.is-active {
  border-color: var(--pink);
  box-shadow: 0 0 0 4px rgba(255, 45, 155, 0.18);
  transform: scale(1.1);
}

.buy-box {
  padding: var(--s5);
  background: var(--gray-100);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-bottom: var(--s5);
}
.buy-box .btn { margin-bottom: var(--s3); }
.buy-box .btn:last-of-type { margin-bottom: 0; }
.buy-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  margin-top: var(--s4);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-500);
  text-align: center;
}
.buy-note svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Spec table */
.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.spec-table th,
.spec-table td {
  padding: 0.75rem 0;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.spec-table th {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-500);
  font-weight: 400;
  width: 40%;
  padding-right: var(--s4);
}
.spec-table td { color: var(--dark); font-weight: 600; }

/* --------------------------------------------------------------------------
   11. STEPS / PROCESS
   -------------------------------------------------------------------------- */
.steps {
  counter-reset: step;
  display: grid;
  gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.step {
  counter-increment: step;
  position: relative;
  padding: var(--s6) var(--s5) var(--s5);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: -18px;
  left: var(--s5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--white);
  background: var(--pink);
  border-radius: 50%;
  box-shadow: var(--glow-pink);
}
.step h3 { font-size: 1.0625rem; margin-bottom: var(--s2); }
.step p { font-size: 0.9375rem; color: var(--gray-700); margin: 0; }

/* --------------------------------------------------------------------------
   12. FAQ ACCORDION
   -------------------------------------------------------------------------- */
.faq { display: flex; flex-direction: column; gap: var(--s3); }
.faq-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.faq-item:has(.faq-q[aria-expanded="true"]) {
  border-color: rgba(255, 45, 155, 0.4);
  box-shadow: var(--shadow-sm);
}
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  width: 100%;
  padding: var(--s4) var(--s5);
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--dark);
  transition: color var(--t-fast);
}
.faq-q:hover { color: var(--pink); }
.faq-q .chev {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-right: 2.5px solid var(--pink);
  border-bottom: 2.5px solid var(--pink);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--t-med);
}
.faq-q[aria-expanded="true"] .chev { transform: rotate(-135deg) translate(-2px, -2px); }
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-med);
}
.faq-a > div { overflow: hidden; }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a p {
  padding: 0 var(--s5) var(--s5);
  margin: 0;
  color: var(--gray-700);
  font-size: 0.9875rem;
}

/* --------------------------------------------------------------------------
   13. FORMS
   -------------------------------------------------------------------------- */
.form { display: grid; gap: var(--s4); }
.field { display: flex; flex-direction: column; gap: var(--s2); }
.field label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-500);
}
.field input,
.field select,
.field textarea {
  padding: 0.8rem 1rem;
  background: var(--white);
  border: 2px solid var(--gray-300);
  border-radius: var(--r-md);
  font-size: 1rem;
  font-weight: 600;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--pink);
  box-shadow: 0 0 0 4px rgba(255, 45, 155, 0.12);
}
.field textarea { resize: vertical; min-height: 140px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }

.form-note {
  font-size: 0.8125rem;
  color: var(--gray-500);
}

/* --------------------------------------------------------------------------
   14. CALLOUT / CTA BAND
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--dark);
  color: var(--white);
  border-radius: var(--r-lg);
  padding: clamp(2.25rem, 5vw, 3.5rem);
  text-align: center;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at 50% 40%, rgba(255, 45, 155, 0.28), transparent 58%);
  pointer-events: none;
}
.cta-band > * { position: relative; }
.cta-band h2 { color: var(--white); }
.cta-band p { color: #c4c4dc; max-width: 54ch; margin-inline: auto; }

.callout {
  padding: var(--s5);
  background: var(--pink-wash);
  border-left: 4px solid var(--pink);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.callout--blue { background: var(--blue-wash); border-left-color: var(--blue); }
.callout p:last-child { margin-bottom: 0; }

/* Quote / feedback */
.quote {
  padding: var(--s6);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  position: relative;
}
.quote::before {
  content: "\201C";
  position: absolute;
  top: 0.1em;
  left: 0.3em;
  font-family: var(--font-display);
  font-size: 5rem;
  line-height: 1;
  color: rgba(255, 45, 155, 0.14);
}
.quote p {
  position: relative;
  font-size: 1.0625rem;
  color: var(--gray-700);
  font-style: italic;
}
.quote cite {
  display: block;
  margin-top: var(--s3);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pink);
  font-style: normal;
}
.stars { color: var(--pink); letter-spacing: 3px; font-size: 0.95rem; margin-bottom: var(--s2); }

/* Filter pills (shop) */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  justify-content: center;
  margin-bottom: var(--s6);
}
.filter {
  padding: 0.5rem 1.1rem;
  background: var(--white);
  border: 2px solid var(--gray-300);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-700);
  cursor: pointer;
  transition: all var(--t-fast);
}
.filter:hover { border-color: var(--pink-light); color: var(--pink); }
.filter.is-active {
  background: var(--pink);
  border-color: var(--pink);
  color: var(--white);
  box-shadow: 0 4px 16px rgba(255, 45, 155, 0.32);
}

.is-hidden { display: none !important; }

/* --------------------------------------------------------------------------
   15. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--dark);
  color: #a5a5c2;
  padding-block: var(--s8) var(--s5);
  font-size: 0.9375rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--s6) var(--s5);
  margin-bottom: var(--s7);
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-brand .brand { color: var(--white); margin-bottom: var(--s4); }
.footer-brand .brand:hover { color: var(--white); }
.footer-brand p { max-width: 34ch; color: #a5a5c2; font-size: 0.9375rem; }

.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pink-light);
  margin-bottom: var(--s4);
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: var(--s3); }
.footer-col a { color: #a5a5c2; transition: color var(--t-fast); }
.footer-col a:hover { color: var(--white); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding-top: var(--s5);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: #7a7a99;
}
.footer-bottom a { color: #7a7a99; }
.footer-bottom a:hover { color: var(--pink-light); }

/* --------------------------------------------------------------------------
   16. SCROLL REVEAL
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   17. UTILITIES
   -------------------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-5 { margin-top: var(--s5); }
.mt-6 { margin-top: var(--s6); }
.mb-5 { margin-bottom: var(--s5); }
.mb-6 { margin-bottom: var(--s6); }
.stack { display: flex; flex-direction: column; gap: var(--s5); }

@media print {
  .site-header, .site-footer, .nav-toggle, .btn { display: none !important; }
  body { font-size: 12pt; }
}

/* --------------------------------------------------------------------------
   18. CONFIGURATOR
   -------------------------------------------------------------------------- */
.swatch-dot {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.18);
  margin-right: 0.5rem;
  vertical-align: -2px;
}
[data-option-host] .variants { margin-bottom: var(--s5); }

/* --------------------------------------------------------------------------
   19. CONFIGURATOR — "+$25" tag on an option
   -------------------------------------------------------------------------- */
.v-add {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--pink);
}
.variant.is-active .v-add { color: var(--pink-dark); }


/* --------------------------------------------------------------------------
   20. CONFIGURATOR — color preset name under the swatches
   -------------------------------------------------------------------------- */
.swatch-caption {
  margin-top: var(--s2);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-600, #55555f);
}
.swatch[hidden], .variant[hidden] { display: none !important; }

/* Two-tone swatches carry a gradient background, so keep the border neutral */
.swatch { background-repeat: no-repeat; background-size: cover; }

/* --------------------------------------------------------------------------
   21. REAL PART PHOTO IN THE PRODUCT GALLERY
   -------------------------------------------------------------------------- */
.product-gallery { flex-wrap: wrap; }

.plate-photo {
  flex: 0 0 100%;
  display: block;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  border-radius: 14px;
  background: #fff;
}
.plate-photo[hidden] { display: none; }

.plate-note {
  flex: 0 0 100%;
  width: 100%;
  text-align: center;
  margin-top: var(--s2);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b6b76;
}
.plate-note[hidden] { display: none; }

/* --------------------------------------------------------------------------
   22. NAV TIGHTENING
   -------------------------------------------------------------------------- */
@media (min-width: 1081px) {
  .nav-links .nav-mobile-cta { display: none; }
  .nav-links { gap: var(--s3); }
  .nav-links a { white-space: nowrap; }
}

/* --------------------------------------------------------------------------
   23. PART CARD IMAGE
   -------------------------------------------------------------------------- */
.part-media {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #fff;
  border-bottom: 1px solid #eceef2;
  padding: var(--s3);
}


/* ==========================================================================
   24. Announcement ticker
   ========================================================================== */
.announce {
  position: relative;
  background: linear-gradient(90deg, #ff2d9b 0%, #ff5fb4 28%, #7b5cd6 62%, #2980B9 100%);
  color: #fff;
  overflow: hidden;
  border-bottom: 2px solid rgba(0,0,0,0.14);
  box-shadow: 0 2px 14px rgba(255,45,155,0.34);
}
.announce::before,
.announce::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 46px;
  z-index: 2;
  pointer-events: none;
}
.announce::before { left: 0;  background: linear-gradient(90deg, #ff2d9b, rgba(255,45,155,0)); }
.announce::after  { right: 0; background: linear-gradient(270deg, #2980B9, rgba(41,128,185,0)); }

.announce-viewport { overflow: hidden; }

.announce-track {
  display: flex;
  width: max-content;
  animation-name: announce-scroll;
  animation-duration: 34s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.announce:hover .announce-track { animation-play-state: paused; }

.announce-run { display: flex; align-items: center; }

.announce-msg {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  white-space: nowrap;
  padding: 0 0.35em;
  font-family: "Rajdhani", "Share Tech Mono", ui-monospace, monospace;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0,0,0,0.28);
}
.announce-dot {
  padding: 0 1.5em;
  font-size: 0.6rem;
  color: rgba(255,255,255,0.65);
}

/* The track holds two identical runs, so shifting by half loops seamlessly.
   Change -50% -> 0 to  0 -> -50%  to reverse the direction. */
@keyframes announce-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.announce-viewport > .announce-track { padding: 9px 0; }

@media (max-width: 640px) {
  .announce-msg { font-size: 0.86rem; letter-spacing: 0.03em; }
  .announce-dot { padding: 0 1em; }
  .announce::before, .announce::after { width: 24px; }
}

/* Reduced motion: freeze it and just show the first run. */
.announce.is-static .announce-track { animation: none; transform: none; }
.announce.is-static .announce-run + .announce-run { display: none; }
@media (prefers-reduced-motion: reduce) {
  .announce-track { animation: none !important; transform: none !important; }
}

/* ==========================================================================
   25. Sold out states (driven by assets/js/stock.js)
   ========================================================================== */
.card.is-soldout .part-media { filter: grayscale(1); opacity: .5; }
.card.is-soldout h3 { color: #8a8fa3; }
.soldout-tag {
  display: inline-block; margin-left: .55em; padding: 2px 9px;
  border-radius: 99px; background: #f1f2f6; color: #8a8fa3;
  font-family: "Share Tech Mono", ui-monospace, monospace;
  font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  vertical-align: middle;
}
.btn.is-disabled {
  pointer-events: none; cursor: default;
  background: #f1f2f6 !important; border-color: #e6e8ef !important;
  color: #a4a9ba !important; box-shadow: none !important;
}
/* Sold out, but still hoverable on purpose: you can see the color and the
   name, and ask us to source it. Only the click is refused. */
.swatch.is-soldout {
  opacity: .45; cursor: not-allowed;
  position: relative; filter: grayscale(.5);
}
.swatch.is-soldout:hover {
  opacity: .8; filter: grayscale(.15);
  transform: none;
}
.swatch.is-soldout::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top left, transparent calc(50% - 1px), #8a8fa3 50%, transparent calc(50% + 1px));
  border-radius: inherit;
}
.variant.is-soldout { opacity: .45; cursor: not-allowed; }
.variant.is-soldout:hover { opacity: .75; }
.variant.is-soldout .v-name::after { content: " — sold out"; font-size: .8em; }

/* ==========================================================================
   26. Cart button and drawer
   ========================================================================== */
.cart-button {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; margin-left: 6px; border: 0; border-radius: 12px;
  background: transparent; color: var(--ink, #1a1a2e); cursor: pointer;
}
.cart-button:hover { background: #f4f5f9; }
.cart-count {
  position: absolute; top: 2px; right: 0; min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 99px; background: var(--pink, #ff2d9b); color: #fff;
  font: 700 11px/19px "Share Tech Mono", monospace; text-align: center;
}

.cart-drawer { position: fixed; inset: 0; z-index: 200; pointer-events: none; }
.cart-drawer.is-open { pointer-events: auto; }
.cart-scrim {
  position: absolute; inset: 0; background: rgba(16,16,32,.5);
  opacity: 0; transition: opacity .28s ease;
}
.cart-drawer.is-open .cart-scrim { opacity: 1; }
.cart-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(430px, 100vw);
  display: flex; flex-direction: column; background: #fff;
  box-shadow: -18px 0 48px rgba(0,0,0,.20);
  transform: translateX(100%); transition: transform .32s cubic-bezier(.4,0,.2,1);
}
.cart-drawer.is-open .cart-panel { transform: none; }
body.cart-locked { overflow: hidden; }

.cart-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid #eceef2;
}
.cart-head h2 { margin: 0; font: 800 1.02rem/1 Orbitron, sans-serif; letter-spacing: .05em; }
.cart-x { border: 0; background: none; font-size: 1.7rem; line-height: 1; cursor: pointer; color: #8a8fa3; }

.cart-body { flex: 1; overflow-y: auto; padding: 6px 20px 18px; }
.cart-empty { color: #8a8fa3; text-align: center; padding: 44px 0; }
.cart-warn {
  margin: 14px 0; padding: 11px 13px; border-radius: 10px;
  background: #fff4f4; border: 1px solid #f4d3d3; color: #c0392b; font-size: .86rem;
}
.cart-line {
  display: grid; grid-template-columns: 46px 1fr auto auto; gap: 12px; align-items: center;
  padding: 15px 0; border-bottom: 1px solid #f0f1f5;
}
.cart-thumb {
  width: 46px; height: 46px; border-radius: 9px; object-fit: contain;
  background: #fff; border: 1px solid #eceef2; padding: 3px; display: block;
}
svg.cart-thumb { padding: 4px 10px; }
.cart-thumb.is-blank { background: #f4f5f9; border-style: dashed; }
@media (max-width: 420px) {
  .cart-line { grid-template-columns: 40px 1fr auto; }
  .cart-thumb { width: 40px; height: 40px; }
  .cart-money { grid-column: 2 / -1; text-align: left; }
}
.cart-name { font-weight: 600; line-height: 1.25; }
.cart-detail { color: #8a8fa3; font-size: .8rem; margin-top: 3px; }
.cart-rm {
  margin-top: 6px; border: 0; background: none; padding: 0; cursor: pointer;
  color: #b0b4c2; font-size: .76rem; text-decoration: underline;
}
.cart-rm:hover { color: #d13b3b; }
.cart-qty { display: flex; align-items: center; gap: 2px; }
.cart-qty button {
  width: 27px; height: 27px; border: 1px solid #e6e8ef; background: #fff;
  border-radius: 7px; cursor: pointer; font-size: .95rem; line-height: 1; color: var(--ink,#1a1a2e);
}
.cart-qty span { min-width: 26px; text-align: center; font-weight: 700; }
.cart-money { font: 700 .96rem/1 Orbitron, sans-serif; min-width: 64px; text-align: right; }

.cart-foot { border-top: 1px solid #eceef2; padding: 16px 20px 20px; background: #fbfbfd; }
.cart-freebar { height: 6px; border-radius: 99px; background: #eceef2; overflow: hidden; }
.cart-freebar-fill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--pink,#ff2d9b), var(--blue,#2980B9));
  transition: width .3s ease;
}
.cart-freenote { margin: 7px 0 14px; font-size: .8rem; color: #8a8fa3; text-align: center; }
.cart-freenote.is-won { color: #1c9c55; font-weight: 700; }
.cart-ship { display: grid; gap: 7px; margin-bottom: 14px; }
.cart-ship label {
  display: flex; align-items: center; gap: 9px; padding: 10px 12px;
  border: 1px solid #e6e8ef; border-radius: 10px; background: #fff;
  font-size: .88rem; cursor: pointer;
}
.cart-ship label:has(input:checked) { border-color: var(--pink,#ff2d9b); background: #fff6fb; }
.cart-totals { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 0 0 15px; }
.cart-totals dt { color: #8a8fa3; font-size: .88rem; }
.cart-totals dd { margin: 0; text-align: right; font-size: .88rem; }
.cart-totals .is-total { font: 800 1.12rem/1 Orbitron, sans-serif; color: var(--ink,#1a1a2e); padding-top: 5px; }
.cart-tax { margin: 9px 0 0; font-size: .74rem; color: #a4a9ba; text-align: center; }

@media (max-width: 900px) { .cart-button { margin-left: auto; margin-right: 8px; } }

/* ==========================================================================
   27. Checkout
   ========================================================================== */
.wrap--narrow { max-width: 1020px; }
.checkout-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--s6, 40px); align-items: start; }
@media (max-width: 860px) { .checkout-grid { grid-template-columns: 1fr; } }

.co-h { margin: 26px 0 14px; font: 800 .96rem/1 Orbitron, sans-serif; letter-spacing: .05em; }
.co-h:first-child { margin-top: 0; }

.checkout-form .field { display: block; margin-bottom: 13px; }
.checkout-form .field > span { display: block; margin-bottom: 5px; font-size: .82rem; font-weight: 600; color: #4a4f63; }
.checkout-form .field > span em { font-style: normal; color: #a4a9ba; font-weight: 500; }
.checkout-form .field input {
  width: 100%; padding: 12px 13px; border: 1px solid #dfe2ea; border-radius: 10px;
  font: inherit; background: #fff;
}
.checkout-form .field input:focus { outline: 0; border-color: var(--pink, #ff2d9b); box-shadow: 0 0 0 3px rgba(255,45,155,.13); }
.checkout-form .field-row { display: grid; grid-template-columns: 1fr 84px 130px; gap: 10px; }
@media (max-width: 560px) { .checkout-form .field-row { grid-template-columns: 1fr; } }

.co-wallets { display: grid; gap: 9px; }
.co-wallets:empty { display: none; }
.co-or { position: relative; text-align: center; margin: 18px 0; }
.co-or::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #e6e8ef; }
.co-or span {
  position: relative; background: #fff; padding: 0 12px;
  font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: #a4a9ba;
}
#card-container { margin-bottom: 15px; min-height: 90px; }
.co-error {
  margin: 0 0 13px; padding: 11px 13px; border-radius: 10px;
  background: #fff4f4; border: 1px solid #f4d3d3; color: #c0392b; font-size: .88rem;
}
.co-secure { text-align: center; margin-top: 11px; }

.checkout-summary {
  position: sticky; top: 104px; padding: 22px;
  border: 1px solid #e6e8ef; border-radius: 16px; background: #fbfbfd;
}
.co-line {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 12px 0; border-bottom: 1px solid #eceef2;
}
.co-line:last-of-type { border-bottom: 0; }
.checkout-summary .cart-totals { margin-top: 14px; padding-top: 14px; border-top: 1px solid #e6e8ef; }

/* Color picker inside a parts card */
.part-color { display: block; margin: 0 0 var(--s3, 14px); }
.part-color > span {
  display: block; margin-bottom: 5px;
  font-family: "Share Tech Mono", ui-monospace, monospace;
  font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: #8a8fa3;
}
.part-color select {
  width: 100%; padding: 9px 11px; border: 1px solid #dfe2ea; border-radius: 9px;
  background: #fff; font: inherit; font-size: .88rem; cursor: pointer;
}
.part-color select:focus { outline: 0; border-color: var(--pink,#ff2d9b); box-shadow: 0 0 0 3px rgba(255,45,155,.13); }

/* Policy pages */
.policy-list { margin: 0 0 var(--s4,20px); padding-left: 1.15em; }
.policy-list li { margin-bottom: .5em; }

/* ==========================================================================
   28. Nav fit with the cart button
   The cart icon added ~48px to a nav that was already close to the edge.
   Rather than juggle breakpoints, the nav now shrinks properly and the
   "Shop iPods" CTA is dropped on desktop - the cart icon and the Shop link
   already cover it. It stays in the mobile menu.
   ========================================================================== */
@media (min-width: 1081px) {
  .nav { gap: var(--s3, 16px); flex-wrap: nowrap; }
  .nav-links { flex: 1 1 auto; min-width: 0; justify-content: center; gap: var(--s2, 10px); }
  .nav-links a { font-size: .77rem; letter-spacing: .05em; padding-left: .55em; padding-right: .55em; white-space: nowrap; }
  .nav .nav-cta { display: none; }
  .cart-button { flex: 0 0 auto; margin-left: 0; }
  .brand { flex: 0 0 auto; }
}

/* ==========================================================================
   29. Build Your Own
   ========================================================================== */
.builder { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--s6, 40px); align-items: start; margin-top: var(--s5, 32px); }
@media (max-width: 900px) { .builder { grid-template-columns: 1fr; } }

.bstep { padding: var(--s4, 22px) 0; border-bottom: 1px solid #eceef2; }
.bstep:last-child { border-bottom: 0; }
.bstep.is-locked { opacity: .38; pointer-events: none; }
.bstep-h { display: flex; align-items: center; gap: 11px; margin: 0 0 var(--s3, 16px); font: 800 1rem/1 Orbitron, sans-serif; }
.bstep-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 99px;
  background: var(--pink, #ff2d9b); color: #fff; font-size: .78rem;
}

.bmodels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
@media (max-width: 620px) { .bmodels { grid-template-columns: 1fr; } }
.bmodel {
  position: relative; text-align: left; cursor: pointer;
  padding: 15px 16px; border: 1px solid #e6e8ef; border-radius: 13px; background: #fff;
}
.bmodel:hover { border-color: #c9ccd8; }
.bmodel.is-active { border-color: var(--pink, #ff2d9b); background: #fff6fb; box-shadow: 0 0 0 3px rgba(255,45,155,.12); }
.bmodel.is-soldout { opacity: .45; cursor: default; }
.bmodel-name { display: block; font-weight: 700; margin-bottom: 4px; }
.bmodel-blurb { display: block; font-size: .8rem; color: #8a8fa3; line-height: 1.35; }
.bmodel-out {
  position: absolute; top: 9px; right: 10px; padding: 2px 8px; border-radius: 99px;
  background: #f1f2f6; color: #8a8fa3;
  font-family: "Share Tech Mono", monospace; font-size: .6rem; letter-spacing: .1em; text-transform: uppercase;
}

.builder-summary {
  position: sticky; top: 104px; padding: 22px;
  border: 1px solid #e6e8ef; border-radius: 16px; background: #fbfbfd;
}
.bpreview { display: flex; justify-content: center; padding: 8px 0 18px; }
.bpreview-empty {
  color: #a4a9ba; font-family: "Share Tech Mono", monospace;
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; padding: 48px 0;
}
.builder-summary .price-now { font: 800 1.9rem/1 Orbitron, sans-serif; margin: 6px 0 4px; }
.build-summary { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.build-summary th {
  text-align: left; font-weight: 500; color: #8a8fa3; font-size: .78rem;
  padding: 6px 0; white-space: nowrap;
}
.build-summary td { text-align: right; padding: 6px 0; font-size: .86rem; font-weight: 600; }

/* ==========================================================================
   30. Color name on hover
   ========================================================================== */
.swatch { position: relative; }
.swatch[data-name]::after {
  content: attr(data-name);
  position: absolute; bottom: calc(100% + 9px); left: 50%;
  transform: translateX(-50%) translateY(3px);
  padding: 5px 10px; border-radius: 7px; white-space: nowrap;
  background: var(--ink, #1a1a2e); color: #fff;
  font-family: "Share Tech Mono", ui-monospace, monospace;
  font-size: .66rem; letter-spacing: .09em; text-transform: uppercase;
  opacity: 0; pointer-events: none; z-index: 6;
  transition: opacity .14s ease, transform .14s ease;
}
.swatch[data-name]::before {
  content: ""; position: absolute; bottom: calc(100% + 4px); left: 50%;
  transform: translateX(-50%) translateY(3px);
  border: 5px solid transparent; border-top-color: var(--ink, #1a1a2e);
  opacity: 0; pointer-events: none; z-index: 6;
  transition: opacity .14s ease, transform .14s ease;
}
.swatch[data-name]:hover::after, .swatch[data-name]:focus-visible::after,
.swatch[data-name]:hover::before, .swatch[data-name]:focus-visible::before {
  opacity: 1; transform: translateX(-50%) translateY(0);
}
/* a sold-out swatch keeps its strike mark, so no tooltip */
.swatch.is-soldout[data-name]::after, .swatch.is-soldout[data-name]::before { content: none; }
@media (hover: none) {
  .swatch[data-name]::after, .swatch[data-name]::before { display: none; }
}

/* ==========================================================================
   31. Storage groups - hard drive vs solid state
   ========================================================================== */
.storage-group { margin-bottom: var(--s4, 20px); }
.storage-group:last-child { margin-bottom: 0; }
.storage-head { margin: 0 0 9px; }
.storage-head-name {
  display: block;
  font-family: "Share Tech Mono", ui-monospace, monospace;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink, #1a1a2e); font-weight: 700;
}
.storage-head-note {
  display: block; margin-top: 2px;
  font-size: .8rem; line-height: 1.35; color: #8a8fa3;
}
/* solid state pairs sit two across so the battery choice reads as a row */
.variant-row--pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 420px) { .variant-row--pair { grid-template-columns: 1fr; } }

.variant .v-add { display: block; margin-top: 3px; font-size: .78rem; color: var(--pink,#ff2d9b); font-weight: 700; }
.variant.is-active .v-add { color: var(--pink,#ff2d9b); }

/* ==========================================================================
   32. Product grid sizing
   The grids used a fixed number of equal columns, so filtering down to one
   product stretched that card across the whole row. auto-fill keeps the empty
   tracks in place, which holds every card at the same width no matter how
   many are showing. Sizes are also brought down a step overall.
   ========================================================================== */
@media (min-width: 640px) {
  .grid.grid-3,
  .grid.grid-4 {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
}
@media (min-width: 640px) and (max-width: 900px) {
  .grid.grid-3,
  .grid.grid-4 {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}

/* ==========================================================================
   33. Product grid, final word
   Section 32 was being overridden further down the sheet. These come last so
   they stick, and the cards come down another step in size.
   ========================================================================== */
@media (min-width: 640px) {
  .grid.grid-3,
  .grid.grid-4 {
    grid-template-columns: repeat(auto-fill, minmax(198px, 1fr)) !important;
    align-items: stretch;
  }
}
/* Buttons on category cards hold one line and shrink the label instead of
   wrapping into a lumpy pill. */
.card .btn--block {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: .78rem;
  padding-left: 10px;
  padding-right: 10px;
}
/* keep every card the same height so the last row lines up */
.grid.grid-3 > .card,
.grid.grid-4 > .card { display: flex; flex-direction: column; }
.grid.grid-3 > .card .card-body,
.grid.grid-4 > .card .card-body { display: flex; flex-direction: column; flex: 1; }
.grid.grid-3 > .card .card-body .btn,
.grid.grid-4 > .card .card-body .btn { margin-top: auto; }

/* ---------------------------------------------------------------------------
   34. Card shape
   The cards had gone narrow and very tall. Wider columns and a capped
   description bring them back to a near-square rectangle.
                                                                              */
@media (min-width: 640px) {
  .grid.grid-3,
  .grid.grid-4 {
    grid-template-columns: repeat(auto-fill, minmax(276px, 1fr)) !important;
    gap: 22px;
  }
}
@media (min-width: 1280px) {
  .grid.grid-3,
  .grid.grid-4 {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  }
}
.grid.grid-3 > .card .card-media,
.grid.grid-4 > .card .card-media { aspect-ratio: 3 / 2; }
.grid.grid-3 > .card .card-body,
.grid.grid-4 > .card .card-body { gap: 8px; padding: 16px 18px 18px; }
.grid.grid-3 > .card .card-body p,
.grid.grid-4 > .card .card-body p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.grid.grid-3 > .card .card-body .btn--block,
.grid.grid-4 > .card .card-body .btn--block { font-size: .84rem; padding-top: 9px; padding-bottom: 9px; }
.grid.grid-3 > .card .card-body h3,
.grid.grid-4 > .card .card-body h3 { font-size: 1.08rem; }
.grid.grid-3 > .card .card-body p,
.grid.grid-4 > .card .card-body p { font-size: .9rem; line-height: 1.4; }

/* ---------------------------------------------------------------------------
   35. Gallery order
   The illustration is the main image. The photographed part sits under it,
   smaller, so the real color is visible without losing the shape.
                                                                              */
.product-gallery {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  aspect-ratio: auto;
  min-height: 460px;
}
.product-gallery > svg {
  order: 1;
  max-height: 440px;
  max-width: 100%;
  width: auto;
  height: auto;
}
.product-gallery .plate-photo {
  order: 2;
  flex: 0 0 auto;
  width: auto;
  height: 150px;
  max-width: 80%;
  object-fit: contain;
  margin: 0;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(20, 20, 45, .12);
}
.product-gallery .plate-note {
  order: 3;
  flex: 0 0 auto;
  margin: 0;
  text-align: center;
}
@media (max-width: 880px) {
  .product-gallery { min-height: 0; }
  .product-gallery .plate-photo { height: 120px; }
  .product-gallery > svg { max-height: 360px; }
}

/* ---------------------------------------------------------------------------
   36. Real part photo strip
   One photograph per piece being replaced, side by side under the drawing,
   large enough to read as an actual photo of the part.
                                                                              */
.plate-strip {
  order: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
}
.plate-strip[hidden] { display: none; }
.plate-shot {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 0 1 auto;
}
.plate-shot[hidden] { display: none; }
.plate-shot img {
  width: 100%;
  max-width: 220px;
  height: 220px;
  object-fit: contain;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(20, 20, 45, .14);
}
.plate-shot figcaption {
  font-family: var(--font-mono, monospace);
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gray-700);
  text-align: center;
}
/* Two or three photos share one row, so each one gets a little smaller. */
/* Let the strip use the padding the gallery reserves for the drawing, so
   the photographs stay big enough to read as photographs. */
.plate-strip {
  margin-inline: -40px;
  width: calc(100% + 80px);
  gap: 12px;
}
.plate-shot { width: 240px; max-width: 100%; }
.plate-shot img { height: 240px; max-width: none; }
.plate-strip[data-count="2"] .plate-shot,
.plate-strip[data-count="2"] .plate-shot img { width: 200px; height: 200px; }
.plate-strip[data-count="2"] .plate-shot { height: auto; }
.plate-strip[data-count="3"] .plate-shot,
.plate-strip[data-count="3"] .plate-shot img { width: 150px; height: 150px; }
.plate-strip[data-count="3"] .plate-shot { height: auto; }
.plate-shot figcaption { overflow-wrap: anywhere; }
.product-gallery { min-height: 0; }
.product-gallery > svg { max-height: 380px; }
@media (max-width: 880px) {
  .plate-shot img { height: 140px; max-width: 140px; }
}

/* ---------------------------------------------------------------------------
   37. Custom build callout
   Deliberately loud. Anyone who wants a color we do not stock should see,
   without hunting for it, that we will order it in and build it.
                                                                              */
.custom-cta {
  margin-top: 26px;
  padding: 20px 22px;
  border-radius: var(--r-lg, 18px);
  border: 2px solid var(--pink, #ff2d9b);
  background: linear-gradient(135deg, rgba(255, 45, 155, .10), rgba(41, 128, 185, .10));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.custom-cta h4 {
  margin: 0;
  font-family: var(--font-display, inherit);
  font-size: 1.06rem;
  color: var(--dark, #1a1a2e);
}
.custom-cta p {
  margin: 0;
  font-size: .93rem;
  line-height: 1.5;
  color: var(--gray-700, #55566a);
}
.custom-cta .btn { margin-top: 2px; }
.custom-cta--wide { margin: 0 0 26px; }
@media (max-width: 600px) {
  .custom-cta { padding: 16px 16px; }
  .custom-cta .btn { width: 100%; text-align: center; }
}

/* ---------------------------------------------------------------------------
   38. Cart lines link back to the product
                                                                              */
.cart-line-link { display: block; flex: 0 0 auto; line-height: 0; }
a.cart-name {
  color: inherit;
  text-decoration: none;
  display: block;
}
a.cart-name:hover,
a.cart-name:focus-visible { color: var(--pink, #ff2d9b); text-decoration: underline; }
.cart-line-link:hover .cart-thumb { transform: scale(1.05); }
.cart-thumb { transition: transform .18s ease; }
/* the card you were sent to from the cart */
.card.is-flagged {
  outline: 3px solid var(--pink, #ff2d9b);
  outline-offset: 3px;
  animation: bbtiFlag 2.4s ease;
}
@keyframes bbtiFlag {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 45, 155, 0); }
  25%      { box-shadow: 0 0 0 10px rgba(255, 45, 155, .22); }
}

/* ---------------------------------------------------------------------------
   39. Card photos fit inside the box
   The photos were being cropped to fill the tile, which zoomed straight into
   the middle of the part. Show the whole thing instead.
                                                                              */
.card-media img,
.part-media {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  padding: 10px;
  background: #fff;
}
.plate-shot img { object-fit: contain !important; padding: 6px; }
.cart-thumb { object-fit: contain !important; background: #fff; }

/* ---------------------------------------------------------------------------
   40. Card art breathing room and pill labels that fit
   The artwork was filling the tile edge to edge, which reads as a zoomed-in
   crop. Cap it and let the tile frame it instead.
                                                                              */
.grid .card .card-media { padding: 18px; }
.grid .card .card-media svg {
  max-height: 80%;
  max-width: 70%;
  width: auto;
  height: auto;
}
.grid .card .card-media img {
  max-height: 90%;
  max-width: 90%;
  width: auto;
  height: auto;
  object-fit: contain;
}
/* Pill labels: shrink to fit rather than spilling past the pill. */
.card .btn--block {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  max-width: 100%;
  font-size: clamp(.68rem, 2.1vw, .84rem);
  padding-left: 12px;
  padding-right: 12px;
  box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
   41. Part product pages
   The generation switch is deliberately heavy. Somebody buying the wrong
   generation is the most expensive mistake this page can cause.
                                                                              */
.seg-bar {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 10px;
  margin-top: 8px;
}
.seg {
  font-family: var(--font-mono, monospace);
  font-size: .84rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 16px 12px;
  border-radius: 14px;
  border: 2px solid var(--border, #e3e3ea);
  background: #fff;
  color: var(--gray-700, #55566a);
  cursor: pointer;
  transition: all .16s ease;
}
.seg:hover { border-color: var(--pink, #ff2d9b); color: var(--dark, #1a1a2e); }
.seg.is-on {
  border-color: var(--pink, #ff2d9b);
  background: var(--pink, #ff2d9b);
  color: #fff;
  box-shadow: 0 4px 14px rgba(255, 45, 155, .3);
}
/* Option lists were one choice per row, which made every configurator page
   run very long. Three across on desktop, two on tablet, one on a phone.
   Shared, so it fixes Mini, Classic 5, Classic 6/7, Build Your Own and the
   repair picker in one place. */
.tier-row{display:grid;gap:10px;margin-top:8px;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
/* Squarer cards, not long thin bars. Content centred so a one-word label
   and a price sit in the middle rather than hugging the top edge. */
.tier{min-height:78px;justify-content:center;align-items:flex-start;text-align:left}
@media (max-width:560px){.tier-row{grid-template-columns:1fr}.tier{min-height:0}}
/* Was hard-coded to two columns, which is why every option list on every
   configurator page ran two-wide and long regardless of available space.
   auto-fit lets it use whatever room the column actually has. */
@media (min-width:620px){.tier-row{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}}
.tier {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  padding: 14px 16px;
  border-radius: 14px;
  border: 2px solid var(--border, #e3e3ea);
  background: #fff;
  cursor: pointer;
}
.tier:hover { border-color: var(--pink, #ff2d9b); }
.tier.is-active { border-color: var(--pink, #ff2d9b); background: rgba(255, 45, 155, .06); }
.tier-name { font-weight: 600; font-size: .95rem; color: var(--dark, #1a1a2e); }
.tier-price { font-family: var(--font-mono, monospace); font-size: .84rem; color: var(--pink, #ff2d9b); }
.tier.is-out, .swatch.is-out { opacity: .45; cursor: not-allowed; }
.swatch.is-out:hover, .variant.is-out:hover { opacity: .8; transform: none; }
.tier.is-out::after { content: " sold out"; font-size: .7rem; color: var(--gray-700, #55566a); }
.swatch.is-out { position: relative; }
.swatch.is-out::after {
  content: "";
  position: absolute;
  inset: 45% -2px auto -2px;
  height: 2px;
  background: var(--gray-700, #55566a);
  transform: rotate(-45deg);
}
/* the photographed part is the main image on these pages */
.part-hero {
  max-width: 100%;
  max-height: 62vh;
  width: auto;
  height: auto;
  border-radius: 18px;
  background: #fff;
  object-fit: contain;
}
.part-hero[hidden] { display: none; }
.part-hero-empty {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 320px;
  border: 2px dashed var(--border, #e3e3ea);
  border-radius: 18px;
  font-family: var(--font-mono, monospace);
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gray-700, #55566a);
}
.part-hero-empty[hidden] { display: none; }
.pill-link {
  display: block;
  padding: 14px 16px;
  border-radius: 999px;
  border: 1px solid var(--border, #e3e3ea);
  background: #fff;
  text-align: center;
  text-decoration: none;
  color: var(--dark, #1a1a2e);
  font-family: var(--font-mono, monospace);
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.pill-link:hover { border-color: var(--pink, #ff2d9b); color: var(--pink, #ff2d9b); }
.buy-box { margin-top: 22px; }

/* ---------------------------------------------------------------------------
   42. Which Classic chooser
   Most people do not know which generation they own. Answering that here is
   cheaper than merging the two product pages into one busy page.
                                                                              */
.chooser {
  margin: 0 0 28px;
  padding: 22px 24px;
  border-radius: var(--r-lg, 18px);
  border: 1px solid var(--border, #e3e3ea);
  background: linear-gradient(160deg, var(--gray-100, #f5f5f8), #fdf4fa);
}
.chooser h3 { margin: 0 0 14px; font-size: 1.06rem; }
.chooser-grid { display: grid; gap: 16px; }
@media (min-width: 700px) { .chooser-grid { grid-template-columns: 1fr 1fr; } }
.chooser-col {
  background: #fff;
  border: 1px solid var(--border, #e3e3ea);
  border-radius: 14px;
  padding: 16px 18px;
}
.chooser-col h4 {
  margin: 0 0 8px;
  font-family: var(--font-mono, monospace);
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pink, #ff2d9b);
}
.chooser-col ul { margin: 0 0 14px; padding-left: 18px; }
.chooser-col li { font-size: .92rem; line-height: 1.5; color: var(--gray-700, #55566a); }
.chooser .form-note { margin: 12px 0 0; }

/* ---------------------------------------------------------------------------
   43. Card photos use the whole pane
   The photos were sitting well inside their tile with padding around them.
   Fill the pane edge to edge, still without cropping into the part.
                                                                              */
.grid .card .card-media {
  padding: 0;
  overflow: hidden;
  position: relative;
}
.grid .card .card-media img,
.card-media .part-media {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  padding: 0;
  display: block;
}
/* the drawn iPods keep a little breathing room, they have no photo border */
.grid .card .card-media svg { max-height: 88%; max-width: 74%; }
/* photos slide in from the right as the card cycles through its colors */
.card-media img.is-sliding { animation: bbtiSlide .42s ease; }
@keyframes bbtiSlide {
  from { opacity: 0; transform: translateX(14%); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ---------------------------------------------------------------------------
   44. Which Classic, compact
   One line under the product blurb that opens only if someone is unsure.
   The full comparison panel was taking the top of the page for a question
   most visitors do not have.
                                                                              */
.which { margin: 4px 0 18px; }
.which > summary {
  cursor: pointer;
  display: inline-block;
  font-family: var(--font-mono, monospace);
  font-size: .74rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--gray-700, #55566a);
  border-bottom: 1px dashed var(--border, #cfd0da);
  padding-bottom: 2px;
  list-style: none;
}
.which > summary::-webkit-details-marker { display: none; }
.which > summary::after { content: " \002B"; margin-left: 6px; color: var(--pink, #ff2d9b); }
.which[open] > summary::after { content: " \2212"; }
.which > summary:hover { color: var(--pink, #ff2d9b); border-bottom-color: var(--pink, #ff2d9b); }
.which-body {
  margin-top: 10px;
  padding: 12px 14px;
  border-left: 3px solid var(--pink, #ff2d9b);
  background: var(--gray-100, #f6f6f9);
  border-radius: 0 10px 10px 0;
}
.which-body p { margin: 0 0 8px; font-size: .9rem; line-height: 1.5; }
.which-body p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   45. Generation note
   Always readable, one line. Says which model this page is and points at the
   other one, without eating the top of the page.
                                                                              */
.gen-note {
  margin: 0 0 20px;
  padding: 10px 14px;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--gray-700, #55566a);
  background: var(--gray-100, #f6f6f9);
  border-left: 3px solid var(--pink, #ff2d9b);
  border-radius: 0 10px 10px 0;
}
.gen-note strong { color: var(--dark, #1a1a2e); }
.gen-note a { color: var(--pink, #ff2d9b); font-weight: 600; }

/* ---------------------------------------------------------------------------
   46. Sold out preview
   A sold-out colour can still be hovered and read. It just cannot be picked.
                                                                              */
.swatch-caption.is-out, .form-note.is-out { color: var(--pink, #ff2d9b); }
.swatch.is-out, .variant.is-out, .tier.is-out { cursor: not-allowed; }
.swatch.is-out:hover, .variant.is-out:hover { opacity: .62; }
.swatch:hover, .variant:hover { outline: 2px solid var(--pink, #ff2d9b); outline-offset: 2px; }


/* ---- 47. The gallery pane fits on the screen --------------------------- */
/* The pane used to grow taller than the window, so the photo strip below the
   drawing was only visible after scrolling the whole page. It now tops out
   at the window height, and the artwork sits nearer the top edge instead of
   floating in the middle of a lot of empty space. */
.product-gallery {
  padding: clamp(1rem, 2.2vw, 1.75rem);
  gap: clamp(0.6rem, 1.4vw, 1rem);
  min-height: 0;
  max-height: calc(100vh - var(--header-h) - 2.5rem);
  overflow: hidden;
}
.product-gallery > svg {
  order: 1;
  flex: 0 1 auto;
  min-height: 0;
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
}
.product-gallery .plate-strip { flex: 0 0 auto; }
.product-gallery .plate-photo { flex: 0 0 auto; }

/* One lone photo used to take 240px of the pane and squeeze the drawing.
   Sized off the window instead, so short screens keep the drawing large. */
.product-gallery .plate-strip[data-count="1"] .plate-shot,
.product-gallery .plate-strip[data-count="1"] .plate-shot img {
  width: clamp(140px, 22vh, 210px);
  height: clamp(140px, 22vh, 210px);
}
.product-gallery .plate-strip[data-count="1"] .plate-shot { height: auto; }



/* Build Your Own uses the very same preview pane as the product pages. */
.builder .product-gallery { align-self: start; }
.builder-steps { padding-bottom: clamp(120px, 20vh, 260px); }
@media (max-width: 900px) { .builder-steps { padding-bottom: 0; } }

/* The build preview draws its iPod at a fixed 150px. Let it fill the pane the
   way the product-page mock-up does. */
.builder .bpreview { display: flex; align-items: center; justify-content: center; width: 100%; }
.builder .bpreview svg { width: auto !important; height: clamp(260px, 40vh, 400px) !important; max-width: 100%; }
/* and give the pane the same share of the row as the product pages */
.builder { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .builder { grid-template-columns: 1fr; } }


/* ---- 49. No dead zone in the header ------------------------------------
   Between roughly 920px and 1010px the nav links used to run into the logo
   on one side and the cart badge on the other: too wide for the menu button,
   too narrow to lay out flat. The two layouts now meet at 1024px, and the
   header is a firm three-column grid so nothing can drift into anything. */
.nav {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: nowrap;
}
.nav .brand { flex: 0 0 auto; min-width: 0; }
.nav-links { min-width: 0; }
.cart-button { flex: 0 0 auto; margin-left: auto; }
@media (max-width: 1080px) {
  .nav-links { margin-left: 0; }
  .nav-toggle { margin-left: auto; order: 3; }
  .cart-button { margin-left: 0; order: 2; }
}

/* very narrow phones: keep the badge inside the frame */
@media (max-width: 360px) {
  .cart-button { transform: scale(.92); transform-origin: right center; }
  .nav { gap: var(--s2, 8px); }
  .brand-text, .nav .brand span { font-size: .95rem; }
}



/* ===========================================================================
   SECTION 50 - one standard preview pane for every iPod listing
   ---------------------------------------------------------------------------
   Before: each pane just grew to fit its contents, so the Classic listing
   settled at 690 tall, the Mini stretched to 1157 (taller than most laptop
   screens - you could not see the bottom of it), and Build Your Own sat at
   591. Three accidents, not three decisions.

   Now: one height everywhere, never taller than the visitor's window.
   The drawing is locked to a fixed height; every pixel left over goes to
   the product photos. */

.product-gallery,
.bpreview-wrap {
  height: min(690px, calc(100vh - 120px)) !important;
  max-height: min(690px, calc(100vh - 120px)) !important;
  min-height: 0 !important;
  padding: 19px !important;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* The drawing: same height on every listing, so the Classic and the Mini are
   finally consistent. Width follows the shape of each drawing. */
.product-gallery > svg {
  flex: 0 0 auto !important;
  height: 400px !important;
  width: auto !important;
  max-height: 63% !important;
  max-width: 100% !important;
}
#b-preview {
  flex: 0 0 auto !important;
  height: 400px !important;
  max-height: 63% !important;   /* scales down with the pane, same as the listings */
  padding: 0 !important;        /* its own padding was eating into the drawing */
  order: -1;                    /* drawing above the photos, same as the listings */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The photos take everything that is left. */
.plate-strip {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  align-items: stretch;
}
.plate-strip .plate-shot {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.plate-strip .plate-shot img {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  object-fit: contain;
}

/* Build Your Own holds its drawing in a wrapper, so the drawing fills the
   wrapper rather than being sized directly. Same finished size either way. */
#b-preview > svg {
  height: 100% !important;
  width: auto !important;
  max-height: none !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
}


/* ===========================================================================
   SECTION 51 - the Build Your Own feature card
   ---------------------------------------------------------------------------
   Build Your Own was missing from the shop grid entirely. It is the one thing
   a marketplace seller cannot offer, so it leads the grid, spans the full
   width and sits side by side rather than stacking like a normal card.
   The base .card rule sets display:flex and a 3:2 media box, so both have to
   be overridden here.
   =========================================================================== */
.card.card--feature {
  grid-column: 1 / -1;
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: stretch;
  min-height: 340px;
  max-height: 420px;
  overflow: hidden;
  border: 2px solid #ff2d9b;
  box-shadow: 0 8px 18px -10px rgba(255, 45, 155, .35);
}
.card.card--feature .card-media {
  aspect-ratio: auto !important;
  height: 100% !important;
  padding: 0 !important;
  border-bottom: 0 !important;
  min-height: 0;
}
.card.card--feature .card-media img {
  height: 100% !important;
  width: 100% !important;
  object-fit: cover !important;
  padding: 0 !important;
}
.card.card--feature .card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--s5, 1.75rem);
}
.feature-tag {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: .55rem;
  padding: .2rem .62rem;
  border-radius: 999px;
  background: #ff2d9b;
  color: #fff;
  font-family: "Share Tech Mono", monospace;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
@media (max-width: 760px) {
  .card.card--feature { grid-template-columns: 1fr; max-height: none; }
  .card.card--feature .card-media { height: 220px !important; }
}


/* ===========================================================================
   SECTION 52 - the quantity stepper
   ---------------------------------------------------------------------------
   Sits beside every Add to Cart button. Quantity used to exist only inside
   the cart, so ordering four batteries meant four trips to the cart.
   =========================================================================== */
.qty-row {
  display: flex;
  align-items: stretch;
  gap: .6rem;
  width: 100%;
}
.qty-row > .btn { flex: 1 1 auto; }
.qty-widget {
  display: inline-flex;
  align-items: stretch;
  flex: 0 0 auto;
  border: 1px solid #d9dade;
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
}
.qty-step {
  width: 38px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  color: #1a1a2e;
}
.qty-step:hover { background: #f3f3f7; }
.qty-step:focus-visible { outline: 2px solid #ff2d9b; outline-offset: -2px; }
.qty-input {
  width: 46px;
  border: 0;
  border-left: 1px solid #ececf1;
  border-right: 1px solid #ececf1;
  text-align: center;
  font-family: "Rajdhani", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #1a1a2e;
  background: transparent;
  -moz-appearance: textfield;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-input:focus-visible { outline: 2px solid #ff2d9b; outline-offset: -2px; }
@media (max-width: 420px) {
  .qty-row { flex-wrap: wrap; }
  .qty-row > .btn { flex: 1 1 100%; }
}


/* ===========================================================================
   SECTION 53 - Build Your Own in the top navigation
   ---------------------------------------------------------------------------
   It is the one thing a marketplace seller cannot offer, so it gets a half-sun
   glow rising from the base of the word and a colour wave running through the
   letters. Home was dropped from the nav (the logo already goes home) so the
   item sits in the middle, and the two side zones each take half the leftover
   space so it lands on the true centre no matter how wide the labels are.
   =========================================================================== */
@media (min-width: 1081px) {
  /* Pin the link row to the true centre of the header. The logo and the CTA
     are different widths, so simply centring "between" them left the middle
     item 81px off. */
  .nav { position: relative; }
  /* Grid, not flex: the two 1fr side columns are equal by definition and are
     also at least max-content wide, so neither can overflow its own box. That
     puts the middle item on the true centre of the row. */
  .nav-links.nav-split {
    display: grid;
    grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
    column-gap: 0;
    align-items: center;
  }
  .nav-links.nav-split > .nav-zone { min-width: 0; list-style: none; }
  .nav-links.nav-split > .nav-zone > ul {
    display: flex; margin: 0; padding: 0; list-style: none; gap: inherit;
  }
  .nav-links.nav-split > .nav-zone--l > ul { justify-content: flex-end; }
  .nav-links.nav-split > .nav-zone--r > ul { justify-content: flex-start; }
}
/* Wide enough for the centred row to clear the logo: pin it to the true page
   centre. Between 1081 and 1179 it would collide, so there it stays in flow. */
/* Wide enough that a fixed-width centred row still clears the logo and the
   cart. The two side columns are a plain 1fr each so they are genuinely equal,
   which is what puts the middle item on the true centre - "max-content" made
   the wider left-hand labels claim more space. */

/* In the mobile drawer the zones collapse and the links simply stack. */
@media (max-width: 1080px) {
  .nav-links.nav-split > .nav-zone,
  .nav-links.nav-split > .nav-zone > ul { display: block; margin: 0; padding: 0; list-style: none; }
}

.nav-flame {
  position: relative;
  isolation: isolate;
  font-weight: 800;
  letter-spacing: .055em;
  padding: .5rem 1.05rem .36rem;
}
.nav-flame .gtext {
  position: relative;
  z-index: 1;
  background: linear-gradient(100deg,
    #ffffff 0%, #ffffff 22%, #a8e4ff 33%, #ffffff 46%,
    #ffd6ec 58%, #ffffff 70%, #d9c2ff 82%, #ffffff 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: bbtiTextWave 3.6s linear infinite;
}
.nav-flame::before, .nav-flame::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; translate: -50% 0; transform-origin: 50% 100%;
}
/* dense soft-edged core - gives the letters something to sit on, no pill edge */
.nav-flame::before {
  bottom: .30rem; width: 112%; height: 104%;
  border-radius: 44% 44% 30% 30%;
  background: linear-gradient(94deg, #ff1f93 0%, #c9228c 46%, #1f6fa8 100%);
  filter: blur(6px);
}
/* the half-sun, with its hot spot travelling sideways rather than scaling */
.nav-flame::after {
  bottom: .30rem; width: 215%; height: 195%;
  background: radial-gradient(ellipse 30% 100% at 50% 100%,
    rgba(255,255,255,.72) 0%, rgba(255,45,155,.90) 16%, rgba(255,45,155,.46) 38%,
    rgba(41,128,185,.34) 62%, rgba(41,128,185,0) 86%);
  background-size: 300% 100%; background-repeat: no-repeat; background-position: 0% bottom;
  filter: blur(5px);
  animation: bbtiTravel 2.3s linear infinite, bbtiGust 1.45s ease-in-out infinite;
}
@keyframes bbtiTravel { from { background-position: 0% bottom } to { background-position: 300% bottom } }
@keyframes bbtiTextWave { from { background-position: 0% 0 } to { background-position: 300% 0 } }
@keyframes bbtiGust {
  0%   { transform: skewX(-4.5deg) }
  35%  { transform: skewX(2.2deg) }
  60%  { transform: skewX(-1.4deg) }
  85%  { transform: skewX(4.5deg) }
  100% { transform: skewX(-4.5deg) }
}
/* Looping motion can trigger nausea, so it turns itself off on request. */
@media (prefers-reduced-motion: reduce) {
  .nav-flame .gtext, .nav-flame::after { animation: none !important; }
}

/* ===== SECTION 54 - checkout marketing consent ===== */
.co-consent{display:flex;gap:.6rem;align-items:flex-start;margin:.9rem 0 1.4rem;
  padding:.85rem 1rem;border:1px solid rgba(255,45,155,.28);border-radius:10px;
  background:rgba(255,45,155,.05);cursor:pointer}
.co-consent input{margin-top:.15rem;width:1.05rem;height:1.05rem;accent-color:#ff2d9b;flex:none;cursor:pointer}
.co-consent span{font-family:Rajdhani,sans-serif;font-size:.95rem;line-height:1.35;opacity:.85}

/* ===== SECTION 55 - breathing room under a grid =====================
   .custom-cta--wide sets "margin: 0 0 26px", which zeroes the 26px top
   margin it inherits from .custom-cta. On the parts page that put the
   "Need a part or color we don't list?" banner flush against the last row
   of category tiles with a 0px gap. Scoped to the grid-adjacent case only,
   so the same banner keeps its existing spacing everywhere else - notably
   on the configurator pages, where its position is a settled decision. */
.grid + .custom-cta--wide,
.grid + .custom-cta {
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* ===== SECTION 56 - repair picker, repair-specific only =====
   Layout comes from the shared .product / .product-gallery / .product-info
   / .tier-row / .swatch-row classes. Only the price panel and the stacked
   gallery live here, because nothing else on the site needs them. */
.product-gallery--stack{
  flex-direction:column;gap:.9rem;justify-content:flex-start;
  /* The shared gallery is a fixed-height pane with overflow hidden, which is
     right when a drawing is the only thing in it. Here it also holds a photo
     strip and the price card, so it must grow to fit them instead of
     clipping (first bug) or letting them spill out the bottom (second bug). */
  /* aspect-ratio:1 forces the pane square, so height was pinned to width
     (603px) while the content needed 720px. That is the real cause. */
  aspect-ratio:auto;height:auto;max-height:none;overflow:visible;
  padding:1.2rem;align-items:stretch}
.rp-art{display:flex;align-items:center;justify-content:center;width:100%}
.rp-art svg{max-width:100%;max-height:250px;height:auto}
.plate-strip{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;width:100%}
.plate-shot{margin:0;text-align:center}
.plate-shot img{width:96px;height:96px;object-fit:contain;border-radius:10px;background:#fff;
  border:1px solid rgba(26,26,46,.10)}
.plate-shot figcaption{font-family:"Share Tech Mono",monospace;font-size:.64rem;
  letter-spacing:.06em;text-transform:uppercase;color:#55566a;margin-top:.3rem}
.rp-total{width:100%;border:2px solid #ff2d9b;border-radius:16px;padding:1rem 1.1rem;background:#fff;text-align:left}
.rp-rows{list-style:none;margin:0 0 .7rem;padding:0}
.rp-rows li{display:flex;justify-content:space-between;gap:1rem;padding:.24rem 0;
  font-family:Rajdhani,sans-serif;font-size:.97rem;color:#3a3b52}
.rp-grand{display:flex;justify-content:space-between;gap:1rem;padding-top:.6rem;
  border-top:1px solid rgba(26,26,46,.16);font-family:Orbitron,sans-serif;font-size:1.25rem;color:#1a1a2e}
.opt-chosen{font-family:Rajdhani,sans-serif;text-transform:none;letter-spacing:0;color:#55566a}

/* ===== SECTION 59 - repair pane must fit one screen ===================
   Requirement: the drawing, the part photos, the FULL price breakdown and
   the Add to Cart button all stay on screen while the customer works
   through the options on the right. So:
     - photos run VERTICALLY beside the drawing instead of below the price,
       which was pushing the button off the bottom
     - the whole pane is capped to the viewport and sticks
     - the drawing gives up height first if space runs short
   The shared .product-gallery is a fixed square pane with overflow hidden;
   this stylesheet has seven .product-gallery rules and one pins an explicit
   height, so !important is required. Re-measure before removing it. */
.product-gallery.product-gallery--stack{
  aspect-ratio:auto !important;
  height:auto !important;
  min-height:0 !important;
  max-height:calc(100vh - 120px) !important;
  overflow:hidden !important;
  padding:1rem !important;
  display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:.7rem}

/* drawing + vertical photo column, side by side */
.rp-stage{display:flex;gap:.7rem;align-items:stretch;min-height:0;flex:0 1 auto}
.rp-art{flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-height:0}
.rp-art svg{max-width:100%;max-height:220px;height:auto;width:auto}
.plate-strip{display:flex;flex-direction:column;gap:.4rem;flex:0 0 auto;
  max-height:220px;overflow-y:auto}
.plate-strip:empty{display:none}
.plate-shot{margin:0;text-align:center}
.plate-shot img{width:64px;height:64px;object-fit:contain;border-radius:8px;background:#fff;
  border:1px solid rgba(26,26,46,.10);display:block}
.plate-shot figcaption{font-family:"Share Tech Mono",monospace;font-size:.55rem;
  letter-spacing:.04em;text-transform:uppercase;color:#55566a;margin-top:.15rem;line-height:1.1}

/* compact price card so the button always survives */
.rp-total{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;
  width:100%;border:2px solid #ff2d9b;border-radius:14px;padding:.8rem .9rem;background:#fff;text-align:left}
.rp-rows{list-style:none;margin:0 0 .5rem;padding:0;flex:1 1 auto;min-height:0;overflow-y:auto}
.rp-rows li{display:flex;justify-content:space-between;gap:.8rem;padding:.16rem 0;
  font-family:Rajdhani,sans-serif;font-size:.92rem;color:#3a3b52}
.rp-grand{display:flex;justify-content:space-between;gap:1rem;padding-top:.45rem;flex:0 0 auto;
  border-top:1px solid rgba(26,26,46,.16);font-family:Orbitron,sans-serif;font-size:1.15rem;color:#1a1a2e}
.rp-total .form-note{font-size:.74rem;line-height:1.3;margin:.4rem 0 0;flex:0 0 auto}
.rp-add{margin-top:.55rem;flex:0 0 auto}
.opt-chosen{font-family:Rajdhani,sans-serif;text-transform:none;letter-spacing:0;color:#55566a}

/* tighter option cards - more choices visible without scrolling */
.product-info .tier{min-height:62px;padding:9px 12px}
.product-info .tier-name{font-size:.9rem}
.product-info .tier-price{font-size:.78rem}
.product-info .opt-label{margin:.7rem 0 .3rem;font-size:.9rem}
.product-info .swatch{width:32px;height:32px}
.product-info .swatch-row{gap:.4rem}

@media (max-width:900px){
  .product-gallery.product-gallery--stack{max-height:none !important;overflow:visible !important}
  .plate-strip{flex-direction:row;max-height:none;overflow:visible}
  .rp-rows{overflow:visible}
}

/* ===== SECTION 60 - repair gallery: drawing hard left, photos right =====
   Drawing sits flush left and uses the height available. Photos get a wider
   lane, sit as a 2x2 block, and are centred vertically WITHIN THEIR OWN
   column rather than pinned to the top. Price spans the full width below. */
.product-gallery.product-gallery--stack{
  aspect-ratio:auto !important;height:auto !important;min-height:0 !important;
  max-height:calc(100vh - 120px) !important;overflow:hidden !important;
  padding:.9rem !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 176px;
  grid-template-rows:auto 1fr;
  grid-template-areas:"art strip" "price price";
  gap:.5rem .7rem;align-items:stretch;justify-items:stretch}

.product-gallery--stack .rp-art{grid-area:art;min-width:0;display:flex;
  align-items:center;justify-content:flex-start;padding:0}
.product-gallery--stack .rp-art svg{width:100%;height:auto;max-width:100%;
  max-height:250px;display:block}

/* photos: 2x2, centred in their own column both ways */
.product-gallery--stack .plate-strip{
  grid-area:strip;display:grid !important;grid-template-columns:1fr 1fr;
  gap:.4rem;align-content:center;justify-content:center;justify-items:center;
  width:176px;box-sizing:border-box;overflow:hidden;align-self:center}
.product-gallery--stack .plate-strip:empty{display:none !important}
.product-gallery--stack .plate-shot{margin:0;width:100%;display:flex;
  flex-direction:column;align-items:center;justify-content:center}
.product-gallery--stack .plate-photo{
  width:78px !important;height:78px !important;max-width:78px !important;
  object-fit:contain;border-radius:9px;background:#fff;box-shadow:none;
  border:1px solid rgba(26,26,46,.12);margin:0;display:block}
.product-gallery--stack .plate-shot figcaption{font-family:"Share Tech Mono",monospace;
  font-size:.5rem;letter-spacing:.02em;text-transform:uppercase;color:#55566a;
  margin-top:.15rem;line-height:1.1;text-align:center}

.product-gallery--stack .rp-total{grid-area:price;width:100%;min-height:0;
  display:flex;flex-direction:column}

/* fewer photos, narrower lane, bigger images */
.product-gallery.product-gallery--stack:has(.plate-strip .plate-shot:only-child){
  grid-template-columns:minmax(0,1fr) 104px}
.product-gallery--stack:has(.plate-strip .plate-shot:only-child) .plate-strip{
  width:104px;grid-template-columns:1fr}
.product-gallery--stack:has(.plate-strip .plate-shot:only-child) .plate-photo{
  width:92px !important;height:92px !important;max-width:92px !important}

@media (max-width:900px){
  .product-gallery.product-gallery--stack{max-height:none !important;overflow:visible !important;
    grid-template-columns:1fr;grid-template-areas:"art" "strip" "price"}
  .product-gallery--stack .plate-strip{width:auto;grid-template-columns:repeat(4,1fr);justify-self:center}
}


/* ============ SECTION 61 - REPAIR PAGE: HERO MERGED INTO PICKER HEAD ============ */
#start-repair{ padding-top:1.6rem; }
#start-repair .crumbs{ margin:0 0 .5rem; }
#start-repair .section-head{ margin-bottom:1.4rem; }
#start-repair .section-head h1{ font-size:clamp(1.9rem,3.4vw,2.9rem); line-height:1.08; margin:.35rem 0 .6rem; }
#start-repair .section-head .lede{ max-width:64ch; margin-left:auto; margin-right:auto; }


/* Repair picker: no colour photos, so drop the photo column and centre the art. */
.product-gallery--stack.is-solo{ grid-template-columns:minmax(0,1fr) !important; grid-template-areas:"art" "price" !important; }
.product-gallery--stack.is-solo .plate-strip{ display:none !important; }
.product-gallery--stack.is-solo .rp-art{ justify-self:center; }


/* ============ SECTION 62 - NAV FLAME CONTAINMENT ============
   The outer glow was 215% of the link width, so on a 94px link it reached about
   54px past each side and sat on top of the links either side of it. Tightened,
   and the item is given its own horizontal room so the halo has somewhere to go
   without touching its neighbours. */
.nav-flame{ margin-inline:.7rem; }
.nav-flame::before{ width:108% !important; }
.nav-flame::after{ width:132% !important; height:172% !important; }


/* ============ SECTION 63 - TRUST BAR ORPHAN ============
   The base rule is repeat(auto-fit, minmax(180px,1fr)) with a 24px gap, so four
   columns need 4x180 + 3x24 = 792px of bar width. The bar is the viewport less
   48px of padding, so below a 840px viewport it silently drops to three columns
   and strands the fourth item alone on the next line. Force an even two-by-two
   from there down. 839 not 820 - at 821-839 it was still orphaning. */
@media (max-width: 839px){
  .trustbar-inner{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}


/* ============ SECTION 64 - CARD PHOTOS FILL THEIR 3:2 FRAME ============
   The frames were already 3:2 but the images were object-fit:contain, so any
   photo that was not 3:2 sat letterboxed with empty bands and every card looked
   a different shape. cover makes them fill and crop instead.
   Source ratios at the time of writing: c5-life-group 1.50 (fills exactly),
   kit-tools 1.10, c67-gold 1.00, mini-life-group 0.75 (portrait).
   c67-gold is a square shot of a whole iPod so it crops hard - it needs a
   landscape re-shoot, logged on the photo task. */
.card-media img{ object-fit:cover; width:100%; height:100%; }


/* ============ SECTION 65 - REPAIR PICKER ORDER ON PHONES ============
   On a phone the two columns stack, and the gallery column comes first in the
   markup - so the drawing, the total and the Add to Cart button all appeared
   ABOVE "1. Which iPod are you sending?". A customer could add the default
   repair without ever seeing the choices. Put the questions first, then the
   drawing and the price, so the phone reads: choose, see it, see the total,
   add. Scoped to the repair picker so the four configurator pages are
   untouched. */
@media (max-width: 880px){
  /* stretch, or the questions column shrinks to its content width */
  .repair-picker .product{ display:flex; flex-direction:column; align-items:stretch; }
  .repair-picker .product-info{ order:1; }
  .repair-picker .product-gallery{ order:2; }
}

/* ---------------------------------------------------------------------------
   SECTION 66 - wallet buttons
   Apple Pay and Google Pay sit side by side and must look like a matched pair.
   Square draws the Google Pay button itself, so we size the container and make
   its inner button fill it; the Apple Pay button is a native Safari control.
   --------------------------------------------------------------------------- */
.co-wallets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
  align-items: stretch;
}
.co-wallets > * {
  width: 100%;
  height: 48px;
  min-height: 48px;
}
.co-wallets > * > div,
.co-wallets > * iframe,
.co-wallets button {
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
}
@media (max-width: 520px) {
  /* Too narrow for a pair - stack them, still identical widths. */
  .co-wallets { grid-template-columns: 1fr; }
}