/* ═══════════════════════════════════════════
   DITTO UPSCALE RESALE — Main Stylesheet
   Static site stylesheet
   ═══════════════════════════════════════════ */

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

:root {
  --red: #d41f2e;
  --ink: #1a1a1a;
  --muted: #6b6b6b;
  --border: #e2e2e2;
  --warm: #faf9f7;
  --footer-bg: #2a2a2a;
  --process-bg: #faf9f7; /* light mode */
  --serif: Georgia, "Times New Roman", serif;
  --sans: Arial, Helvetica, sans-serif;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  background: white;
}

a { color: inherit; text-decoration: none; }

img { display: block; max-width: 100%; }


/* ── ANNOUNCEMENT BANNER ────────────────── */

.site-announcement {
  background: var(--red);
  color: #fff;
  text-align: center;
}

.site-announcement[hidden] {
  display: none !important;
}

.site-announcement-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 48px;
}

.site-announcement-text {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.02em;
}

.site-announcement-text a,
.site-announcement-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-announcement-text a:hover,
.site-announcement-link:hover {
  opacity: 0.9;
}


/* ── HEADER ─────────────────────────────── */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 48px;
  border-bottom: 1px solid var(--border);
}

.brand {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  color: #111;
}

.brand-logo {
  width: clamp(150px, 18vw, 235px);
  height: auto;
}

.brand-word {
  font-size: 54px;
  font-weight: 900;
  letter-spacing: -4px;
  position: relative;
}

.brand-word::after {
  content: "";
  display: block;
  width: 136px;
  height: 1px;
  background: #aaa;
  margin-top: 3px;
}

.quote {
  color: var(--red);
  font-size: 30px;
  position: relative;
  top: -14px;
  display: inline-block;
  letter-spacing: -10px;
  transform: rotate(8deg);
}

.brand-subtitle {
  font-size: 11px;
  letter-spacing: 5px;
  color: #888;
  padding-left: 5px;
  margin-top: 5px;
}

.primary-nav {
  display: flex;
  gap: 26px;
  align-items: center;
  font-size: 14px;
  font-weight: 800;
  text-transform: lowercase;
}

.primary-nav a { color: #111; }
.primary-nav a:hover { color: var(--red); }

.lamp {
  position: relative;
  height: 140px;
  justify-self: center;
}

.lamp .cord {
  position: absolute;
  top: -28px;
  left: 50%;
  width: 1px;
  height: 72px;
  background: #bbb;
}

.lamp .shade {
  position: absolute;
  top: 48px;
  left: 50%;
  width: 96px;
  height: 72px;
  border: 2px solid #666;
  border-top: 0;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  transform: translateX(-50%);
}

.lamp .bulb {
  position: absolute;
  top: 64px;
  left: 50%;
  width: 14px;
  height: 20px;
  background: #333;
  transform: translateX(-50%);
}

.secondary-nav {
  display: flex;
  gap: 14px;
  align-items: center;
  font-size: 13px;
  font-weight: 800;
}

.social {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
}

.social img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.social:hover { opacity: 0.7; }


/* ── MISSION ─────────────────────────────── */

.mission {
  max-width: 680px;
  margin: 72px auto 40px;
  padding: 0 48px;
  text-align: center;
}

.mission-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 18px;
}

.mission h1 {
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: var(--ink);
  margin-bottom: 24px;
}

.mission-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 28px;
}

.mission-nav a {
  display: inline-block;
  padding: 8px 22px;
  border: 2px solid var(--red);
  color: var(--red);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: background 0.18s, color 0.18s;
}

.mission-nav a:hover {
  background: var(--red);
  color: white;
}

.mission p {
  font-size: 14px;
  color: #555;
  line-height: 1.8;
  max-width: 540px;
  margin: 0 auto;
}

.mission a {
  color: var(--red);
  text-decoration: underline;
}


/* ── VALUE CARDS ─────────────────────────── */

.values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  background: var(--warm);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 56px max(32px, calc((100% - 940px) / 2));
  max-width: 100%;
}

.values-inner-wrap {
  display: contents;
}

.value-card {
  background: white;
  border: 1px solid var(--border);
  padding: 40px 32px;
  text-align: center;
  transition: box-shadow 0.2s;
}

.value-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.07);
  position: relative;
  z-index: 1;
}

.card-icon {
  position: relative;
  width: 80px;
  height: 72px;
  margin: 0 auto 18px;
}

/* Heart icon */
.heart::before, .heart::after {
  content: "";
  position: absolute;
  top: 8px;
  width: 42px;
  height: 58px;
  background: #f7a23b;
  border-radius: 40px 40px 10px 10px;
}
.heart::before { left: 14px; transform: rotate(-45deg); }
.heart::after  { right: 14px; transform: rotate(45deg); }

/* Home icon */
.home::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 14px;
  width: 54px;
  height: 46px;
  background: var(--red);
  background: #e96030;
  clip-path: polygon(0 33%, 50% 0, 100% 33%, 100% 100%, 0 100%);
}
.home::after {
  content: "";
  position: absolute;
  top: 32px;
  left: 30px;
  width: 30px;
  height: 24px;
  border: 7px solid white;
  border-left-width: 10px;
}

/* Book icon */
.book::before, .book::after {
  content: "";
  position: absolute;
  top: 8px;
  width: 32px;
  height: 56px;
  background: #4cb4d4;
  border-radius: 5px 0 0 5px;
}
.book::before { left: 8px; }
.book::after  { right: 8px; border-radius: 0 5px 5px 0; }

.value-card h2 {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--ink);
}

.value-card p {
  font-size: 13.5px;
  color: #666;
  line-height: 1.65;
}


/* ── SHOP ONLINE + WEEKLY SPECIALS ───────── */

.shop-online {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px 72px;
  max-width: 820px;
  margin: 0 auto;
  padding: 68px 32px 60px;
}

.shop-online-col h2 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  margin-bottom: 14px;
  color: var(--ink);
}

.shop-online-col p {
  font-size: 14px;
  color: #555;
  line-height: 1.75;
}

.shop-online-col a {
  color: var(--red);
  text-decoration: underline;
}

.specials-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.specials-list li {
  font-size: 14px;
  color: #444;
  line-height: 1.55;
  padding-left: 20px;
  position: relative;
}

.specials-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--red);
  font-weight: 700;
}


/* ── PROCESS ─────────────────────────────── */

.process {
  background: #faf9f7;
  border-top: 1px solid var(--border);
  padding: 80px 32px 72px;
  text-align: center;
}

.process h2 {
  font-family: var(--serif);
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 400;
  letter-spacing: -0.5px;
  color: var(--ink);
  margin-bottom: 56px;
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  max-width: 860px;
  margin: 0 auto 56px;
  padding: 0 16px;
}

.step-num {
  width: 48px;
  height: 48px;
  border: 2px solid var(--red);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  font-family: var(--serif);
  font-size: 19px;
  color: var(--red);
}

.step h3 {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 10px;
  line-height: 1.45;
  min-height: auto;
}

.step p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.7;
}

.thanks {
  font-size: 14px;
  color: #888;
  line-height: 1.85;
  max-width: 480px;
  margin: 0 auto;
  padding-top: 40px;
  border-top: 1px solid var(--border);
}

.thanks span:last-child {
  display: block;
  color: var(--red);
  font-style: italic;
  margin-top: 4px;
}


/* ── REVIEWS ─────────────────────────────── */

.reviews {
  padding: 72px 0;
  background: #fff;
  border-top: 1px solid var(--border);
  overflow: hidden;
}

.reviews-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 44px;
  padding: 0 32px;
}

.reviews-header h2 {
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 400;
  letter-spacing: -0.5px;
  color: var(--ink);
  margin-top: 10px;
}

.reviews-marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.reviews-track {
  display: flex;
  gap: 22px;
  width: max-content;
  animation: reviews-scroll 70s linear infinite;
}

.reviews-marquee:hover .reviews-track {
  animation-play-state: paused;
}

.review-card {
  flex: 0 0 320px;
  background: var(--warm);
  border: 1px solid var(--border);
  padding: 30px 30px;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.review-card blockquote {
  margin: 0;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
}

.review-card blockquote::before { content: "\201C"; }
.review-card blockquote::after  { content: "\201D"; }

@keyframes reviews-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .reviews-track {
    animation: none;
    overflow-x: auto;
    padding-bottom: 8px;
  }
}


/* ── FOOTER ──────────────────────────────── */

.site-footer {
  background: var(--footer-bg);
  color: white;
}

.footer-nav {
  display: flex;
  justify-content: center;
  gap: 32px;
  padding: 18px 32px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.footer-nav a {
  color: rgba(255,255,255,0.4);
  transition: color 0.2s;
}

.footer-nav a:hover { color: white; }

.footer-body {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  max-width: 960px;
  margin: 0 auto;
  padding: 52px 32px 48px;
}

.footer-col h3 {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.32);
  margin-bottom: 18px;
  font-family: var(--sans);
}

.footer-col p,
.footer-col address {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  line-height: 1.75;
  font-style: normal;
  margin-bottom: 4px;
}

.footer-col p strong {
  color: rgba(255,255,255,0.85);
  display: inline;
}

.footer-signup-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.footer-signup-form input {
  width: 100%;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.13);
  color: white;
  padding: 10px 12px;
  font-size: 13px;
  font-family: var(--sans);
  outline: none;
  transition: border-color 0.2s;
}

.footer-signup-form input::placeholder { color: rgba(255,255,255,0.28); }
.footer-signup-form input:focus { border-color: var(--red); }

.footer-signup-form select {
  width: 100%;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.13);
  color: rgba(255,255,255,0.7);
  padding: 10px 12px;
  font-size: 13px;
  font-family: var(--sans);
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path fill='rgba(255,255,255,0.45)' d='M6 8L2 4h8z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 30px;
}

.footer-signup-form select:focus { border-color: var(--red); }
.footer-signup-form select option { color: #1a1a1a; }

/* Honeypot — hidden from real users, catches bots */
.footer-signup-form .hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.footer-signup-form .form-status {
  font-size: 12px;
  line-height: 1.4;
  margin-top: 2px;
  min-height: 1px;
}
.footer-signup-form .form-status.sending { color: rgba(255,255,255,0.55); }
.footer-signup-form .form-status.success { color: #6fcf97; }
.footer-signup-form .form-status.error   { color: #f0837a; }

.footer-signup-form button {
  background: var(--red);
  color: white;
  border: none;
  padding: 11px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  font-family: var(--sans);
  transition: opacity 0.2s;
  width: 100%;
}

.footer-signup-form button:hover { opacity: 0.88; }

.footer-text-signup {
  font-size: 12px;
  color: rgba(255,255,255,0.38);
  line-height: 1.7;
}

.footer-text-signup strong {
  display: block;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.25);
  margin-bottom: 4px;
}

.footer-text-signup b { color: rgba(255,255,255,0.6); }

.social-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.social-badge {
  width: 60px;
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: opacity 0.2s;
}

.social-badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.social-badge:hover { opacity: 0.75; }

.hashtag {
  font-size: 12px;
  color: rgba(255,255,255,0.28);
}

.copyright {
  display: block;
  text-align: center;
  padding: 0 32px 18px;
  font-size: 11px;
  color: rgba(255,255,255,0.2);
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-top: 14px;
  text-align: center;
}

.footer-cms-link {
  display: inline-block;
  margin-bottom: 10px;
  padding: 5px 14px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s;
}

.footer-cms-link:hover {
  color: rgba(255,255,255,0.75);
  border-color: rgba(255,255,255,0.35);
}


/* ═══════════════════════════════════════════
   DONATE PAGE
   ═══════════════════════════════════════════ */

.donate-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 0;
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 40px 72px;
  align-items: start;
}

.donate-faq-col {
  padding-right: 56px;
  border-right: 1px solid var(--border);
}

.donate-q {
  padding: 32px 0;
  border-bottom: 1px solid var(--border);
}

.donate-q:first-child { padding-top: 40px; }
.donate-q:last-child  { border-bottom: 0; }

.donate-q h2 {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 12px;
}

.donate-q p {
  font-size: 14px;
  color: #444;
  line-height: 1.75;
  margin-bottom: 8px;
}

.donate-q p:last-child { margin-bottom: 0; }

.donate-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.donate-list li {
  font-size: 14px;
  color: #444;
  line-height: 1.55;
  padding-left: 20px;
  position: relative;
}

.donate-list li::before {
  content: "›";
  position: absolute;
  left: 0;
  color: var(--red);
  font-weight: 700;
}

.donate-list--no li::before { content: "×"; font-size: 13px; }

.donate-q a { color: var(--red); text-decoration: underline; }

.donate-q-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 20px;
}

.donate-q-images figure { margin: 0; }

.donate-q-images img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid var(--border);
  display: block;
}

.donate-q-images figcaption {
  font-size: 12px;
  color: #777;
  margin-top: 7px;
  line-height: 1.4;
}

@media (max-width: 560px) {
  .donate-q-images { grid-template-columns: 1fr; }
}

.donate-phone {
  font-size: 18px !important;
  font-weight: 700;
  color: var(--ink) !important;
  text-decoration: none !important;
}

.donate-sidebar {
  padding: 24px 0 0 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  scrollbar-width: none;
}

.donate-sidebar::-webkit-scrollbar { display: none; }

.donate-info-card {
  background: var(--warm);
  border: 1px solid var(--border);
  padding: 18px 22px;
}

.donate-info-card--highlight {
  background: var(--red);
  border-color: var(--red);
}

.donate-info-card--highlight h3 {
  color: rgba(255,255,255,0.7) !important;
}

.donate-info-card--highlight p {
  color: white !important;
}

.donate-info-card h3 {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

.donate-info-card p,
.donate-info-card address {
  font-size: 13.5px;
  color: #444;
  line-height: 1.7;
  font-style: normal;
  margin-bottom: 6px;
}

.donate-info-card p:last-child { margin-bottom: 0; }
.donate-info-card strong { color: var(--ink); }
.donate-info-note { font-size: 12px !important; color: var(--muted) !important; margin-top: 8px !important; }

.donate-paper-section {
  background: var(--ink);
  color: white;
  padding: 64px 40px;
}

.donate-paper-inner {
  display: grid;
  grid-template-columns: 280px 1fr 220px;
  gap: 48px;
  max-width: 1040px;
  margin: 0 auto;
  align-items: start;
}

.donate-paper-photo {
  margin: 0;
}

.donate-paper-photo img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.donate-paper-text .section-label { color: rgba(255,255,255,0.5); }

.donate-paper-text h2 {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  color: white;
  margin: 12px 0 16px;
  line-height: 1.2;
}

.donate-paper-text p {
  font-size: 14px;
  color: rgba(255,255,255,0.65);
  line-height: 1.75;
  margin-bottom: 12px;
}

.donate-paper-text strong { color: rgba(255,255,255,0.85); }

.donate-paper-accepts h3 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 16px;
}

.donate-paper-accepts ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.donate-paper-accepts li {
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  padding-left: 18px;
  position: relative;
  line-height: 1.4;
}

.donate-paper-accepts li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--red);
  font-size: 12px;
}

@media (max-width: 820px) {
  .donate-layout { grid-template-columns: 1fr; padding: 0 24px 48px; }
  .donate-faq-col { padding-right: 0; border-right: 0; }
  .donate-sidebar { padding: 0; position: static; flex-direction: row; flex-wrap: wrap; }
  .donate-info-card { flex: 1 1 200px; }
  .donate-paper-inner { grid-template-columns: 1fr; gap: 32px; }
  .donate-paper-photo { max-width: 380px; }
}

/* ═══════════════════════════════════════════
   VOLUNTEER PAGE
   ═══════════════════════════════════════════ */

.volunteer-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 0;
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 40px 72px;
  align-items: start;
}

.volunteer-copy-col {
  padding-right: 56px;
  border-right: 1px solid var(--border);
}

/* Pull quote */
.vol-quote {
  margin: 40px 0 40px;
  padding: 28px 32px;
  border-left: 4px solid var(--red);
  background: var(--warm);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
  color: #333;
}

.vol-quote p { margin-bottom: 12px; font-style: italic; }
.vol-quote cite { display: block; font-style: normal; font-size: 14px; color: var(--muted); }

/* Content sections */
.vol-section {
  padding: 32px 0;
  border-bottom: 1px solid var(--border);
}

.vol-section--last { border-bottom: 0; padding-bottom: 0; }

.vol-section h2 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 14px;
}

.vol-section p {
  font-size: 14px;
  color: #444;
  line-height: 1.8;
}

.vol-closing {
  font-size: 15px !important;
  color: #555 !important;
  font-style: italic;
}

/* Tags */
.vol-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.vol-tags span {
  display: inline-block;
  padding: 5px 14px;
  background: white;
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.5px;
}

.vol-tags .vol-tag-you {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 12px rgba(212, 31, 46, 0.28);
}

/* Sidebar */
.volunteer-sidebar {
  padding: 40px 0 0 36px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  scrollbar-width: none;
}

.volunteer-sidebar::-webkit-scrollbar { display: none; }

.vol-form-link {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  color: rgba(255,255,255,0.75);
  text-decoration: underline;
}

/* Volunteer photo carousel */
.volunteer-carousel-section {
  background: var(--warm);
  border-bottom: 1px solid var(--border);
  padding: 36px 0 44px;
}

.volunteer-carousel-intro {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 40px 0;
  text-align: center;
}

.volunteer-carousel-eyebrow {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 10px;
}

.volunteer-carousel-title {
  font-family: var(--sans);
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.2px;
  color: var(--ink);
  margin: 0;
}

.volunteer-carousel-sub {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.65;
  max-width: 480px;
  margin: 0 auto;
}

.volunteer-carousel {
  max-width: none;
  margin: 0;
  padding: 0;
}

.vol-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.vol-marquee-track {
  display: flex;
  gap: 16px;
  width: max-content;
  padding: 6px 8px;
  animation: vol-marquee-scroll 68s linear infinite;
  will-change: transform;
}

.vol-marquee:hover .vol-marquee-track {
  animation-play-state: paused;
}

.vol-slide {
  flex: 0 0 auto;
  margin: 0;
  width: clamp(240px, 26vw, 360px);
  height: clamp(190px, 24vw, 300px);
  overflow: hidden;
  border: 1px solid var(--border);
  background: #111;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
}

.vol-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@keyframes vol-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .vol-marquee-track { animation: none; overflow-x: auto; }
}

@media (max-width: 700px) {
  .volunteer-carousel-section { padding: 28px 0 40px; }
  .volunteer-carousel-intro { padding: 20px 24px 0; }
}

/* Photo gallery (legacy) */
.vol-gallery-section {
  background: var(--warm);
  border-top: 1px solid var(--border);
  padding: 60px 40px;
}

.vol-gallery-header {
  max-width: 960px;
  margin: 0 auto 32px;
}

.vol-gallery-header p {
  font-size: 15px;
  color: var(--muted);
  margin-top: 8px;
}

.vol-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 960px;
  margin: 0 auto;
}

@media (max-width: 820px) {
  .volunteer-layout { grid-template-columns: 1fr; padding: 0 24px 48px; }
  .volunteer-copy-col { padding-right: 0; border-right: 0; }
  .volunteer-sidebar { padding: 24px 0 0; position: static; max-height: none; flex-direction: row; flex-wrap: wrap; }
  .donate-info-card { flex: 1 1 200px; }
  .vol-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════
   PARTNER PAGE
   ═══════════════════════════════════════════ */

/* Business partner logos — top */
.partner-top-logos {
  max-width: 860px;
  margin: 0 auto;
  padding: 48px 40px 40px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}

.partner-logos-img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Centered thank you intro */
.partner-intro-section {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
  padding: 52px 80px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}

.partner-intro-section h1 {
  font-family: var(--serif);
  font-size: clamp(24px, 3.5vw, 38px);
  font-weight: 400;
  line-height: 1.15;
  margin-bottom: 20px;
  color: var(--ink);
}

.partner-intro-section p {
  font-size: 14px;
  color: #555;
  line-height: 1.75;
}

.partner-thanks-red {
  color: var(--red);
  font-weight: 700;
}

/* Two-column detail layout — left sidebar, right main */
.partner-detail-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 0;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 40px 72px;
  align-items: start;
}

/* LEFT: ditto also provides */
.partner-provides-sidebar {
  padding: 40px 32px 32px 0;
  border-right: 1px solid var(--border);
}

.partner-provides-sidebar h2 {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 16px;
  line-height: 1.3;
}

.partner-provides-img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 14px;
}

.partner-other-note {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.55;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* RIGHT: schools + text */
.partner-schools-main {
  padding: 40px 0 0 40px;
}

.partner-schools-top {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.partner-schools-img {
  width: 200px;
  height: auto;
  display: block;
  flex-shrink: 0;
}

.partner-body-text p {
  font-size: 14px;
  color: #444;
  line-height: 1.8;
  margin-bottom: 14px;
}

.partner-body-text p:last-child { margin-bottom: 0; }
.partner-body-text strong { color: var(--ink); }

@media (max-width: 700px) {
  .partner-detail-layout { grid-template-columns: 1fr; padding: 0 24px 48px; }
  .partner-provides-sidebar { padding-right: 0; border-right: 0; border-bottom: 1px solid var(--border); padding-bottom: 32px; }
  .partner-schools-main { padding: 32px 0 0; }
  .partner-intro-section { padding: 40px 32px; }
  .partner-top-logos { padding: 36px 24px; }
}


/* ═══════════════════════════════════════════
   SHOP PAGE
   ═══════════════════════════════════════════ */

.shop-page { display: flex; flex-direction: column; padding-bottom: 72px; }

/* Shop hero illustration */
.shop-hero {
  height: 340px;
  margin: -18px auto 60px;
  overflow: hidden;
}

.shop-room {
  position: relative;
  width: 760px;
  height: 340px;
  margin: 0 auto;
}

.shop-room span, .shop-room div { position: absolute; display: block; }

.shop-wall { inset: 0; background: #f5f3ef; }
.shop-shadow {
  right: 50px; bottom: 10px;
  width: 680px; height: 52px;
  background: #e8ebe8;
  border-radius: 50%;
  transform: skewX(-10deg);
}

/* Chair */
.shop-chair { left: 60px; bottom: 30px; width: 190px; height: 210px; }
.chair-back { left: 30px; top: 16px; width: 120px; height: 106px; background: #fb4262; border-radius: 58px 58px 28px 28px; }
.chair-seat { left: 36px; top: 98px; width: 112px; height: 44px; border: 8px solid #d13a4d; background: #ff667a; border-radius: 26px; }
.chair-arm  { top: 66px; width: 48px; height: 86px; background: #ce3f53; border-radius: 30px 18px 26px 26px; }
.chair-arm.left  { left: 6px;  transform: rotate(-5deg); }
.chair-arm.right { right: 6px; transform: rotate(5deg); }
.chair-leg { bottom: 0; width: 12px; height: 66px; background: #282525; }
.chair-leg.left  { left: 42px;  transform: rotate(6deg); }
.chair-leg.right { right: 42px; transform: rotate(-6deg); }
.button { width: 8px; height: 8px; background: #653637; border-radius: 50%; z-index: 2; }
.button.b1 { left: 66px; top: 48px; }
.button.b2 { left: 103px; top: 48px; }
.button.b3 { left: 137px; top: 50px; }
.button.b4 { left: 74px; top: 76px; }
.button.b5 { left: 127px; top: 76px; }

/* Cabinet */
.cabinet { left: 262px; bottom: 48px; width: 420px; height: 126px; border: 6px solid #d5a96f; background: #dbb17e; }
.cabinet-door { left: 0; top: 0; width: 144px; height: 114px; background: #ef4c78; }
.knob { left: 15px; top: 53px; width: 12px; height: 12px; background: #272727; border-radius: 50%; }
.cabinet-drawer { left: 150px; width: 136px; height: 48px; border-right: 8px solid #b68754; border-bottom: 8px solid #b68754; }
.cabinet-drawer.one { top: 0; }
.cabinet-drawer.two { bottom: 0; }
.cabinet-pattern { right: 0; top: 0; width: 136px; height: 114px; background: radial-gradient(ellipse at 52% 0, transparent 0 31px, #1f2521 32px 46px, transparent 47px), radial-gradient(ellipse at 52% 48%, transparent 0 31px, #1f2521 32px 46px, transparent 47px), radial-gradient(ellipse at 52% 96%, transparent 0 31px, #1f2521 32px 46px, transparent 47px), #f6587b; }
.cabinet-leg { bottom: -60px; width: 11px; height: 60px; background: #735638; }
.cabinet-leg.left  { left: 44px; transform: rotate(-4deg); }
.cabinet-leg.right { right: 40px; transform: rotate(4deg); }

/* Art */
.art { background: #f7f7f5; border: 8px solid #202020; }
.art.large { left: 290px; top: 68px; width: 114px; height: 120px; }
.art.large .circle { left: 28px; width: 54px; height: 54px; border-radius: 50%; }
.art.large .top    { top: 14px; background: #ff4264; }
.art.large .bottom { bottom: 12px; background: #232323; }
.art.large .line   { left: 52px; top: 8px; width: 5px; height: 18px; background: #12ad83; }
.art.small { left: 420px; width: 64px; height: 64px; }
.art.triangles { top: 66px; background: conic-gradient(from 45deg, #222 0 25%, transparent 0 100%) 9px 7px / 18px 18px, #fff; }
.art.coral     { top: 132px; background: radial-gradient(circle at 67% 68%, #fff 0 13px, transparent 14px), linear-gradient(45deg, transparent 0 48%, #fff 49% 54%, transparent 55%), #ff4961; }

/* Shop plant */
.shop-plant { right: 68px; top: 78px; width: 164px; height: 152px; }
.shop-plant .pot  { left: 62px; bottom: 0; width: 56px; height: 62px; background: #9c3940; clip-path: polygon(0 0, 100% 0, 84% 100%, 18% 100%); }
.shop-plant .leaf { left: 82px; bottom: 48px; width: 11px; height: 92px; background: #4a8d27; clip-path: polygon(50% 0, 100% 100%, 48% 76%, 0 100%); transform-origin: bottom; }
.shop-plant .l1 { transform: rotate(-70deg); }
.shop-plant .l2 { transform: rotate(-45deg); }
.shop-plant .l3 { transform: rotate(-20deg); }
.shop-plant .l4 { transform: rotate(14deg); }
.shop-plant .l5 { transform: rotate(42deg); }
.shop-plant .l6 { transform: rotate(70deg); }

/* Shop intro + copy */
.shop-intro {
  position: relative;
  max-width: 880px;
  margin: 0 auto 64px;
  padding: 20px 80px;
  text-align: center;
}

.shop-intro h1 {
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 400;
  line-height: 1.12;
  margin-bottom: 20px;
}

.shop-intro p { font-size: 13px; color: #555; }
.shop-intro em { font-style: italic; }
.shop-intro strong { color: var(--red); }

/* Brackets */
.bracket {
  position: absolute;
  top: 8px;
  width: 28px;
  height: calc(100% - 16px);
  border: 2px solid #ddd;
}
.bracket-left  { left: 32px; border-right: 0; }
.bracket-right { right: 32px; border-left: 0; }

.shop-copy {
  max-width: 740px;
  margin: 0 auto;
  padding: 0 32px;
  color: #333;
  font-size: 14px;
}

.shop-copy h2 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  margin: 0 0 16px;
  color: var(--ink);
}

.shop-copy h3 {
  font-family: var(--serif);
  font-size: 16px;
  margin: 22px 0 6px;
}

.shop-copy p { margin: 0 0 18px; line-height: 1.7; }

.shop-copy a { color: var(--red); text-decoration: underline; }

.shop-spotlights {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.shop-spotlights li {
  padding-left: 20px;
  position: relative;
  line-height: 1.6;
}

.shop-spotlights li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--red);
  font-weight: 700;
}


/* ═══════════════════════════════════════════
   DONATE PAGE
   ═══════════════════════════════════════════ */

.donate-page { display: flex; flex-direction: column; padding-bottom: 72px; }

.donate-hero { height: 320px; margin: -18px auto 64px; overflow: hidden; }

.donate-truck-scene {
  position: relative;
  width: 760px;
  height: 320px;
  margin: 0 auto;
}

.donate-truck-scene span,
.donate-truck-scene div { position: absolute; display: block; }

.donate-truck-box {
  left: 40px; top: 32px;
  width: 468px; height: 226px;
  background: #f8f8f8;
  border: 8px solid #cfcfcf;
  box-shadow: inset 0 0 0 3px #9c9c9c;
  overflow: hidden;
}
.truck-stripe { top: -24px; width: 56px; height: 300px; background: #050505; transform: skewX(-10deg); }
.stripe-one { left: 38px; }
.stripe-two { left: 128px; }
.truck-logo  { right: 28px; top: 38px; color: #222; font-size: 56px; font-weight: 900; letter-spacing: -5px; line-height: .85; }
.truck-logo span { position: static; color: var(--red); font-size: 28px; vertical-align: top; }
.truck-subtitle { right: 40px; top: 96px; border-top: 1px solid #777; padding-top: 4px; color: #444; font-size: 18px; letter-spacing: 5px; }
.truck-mini-nav { right: 32px; top: 144px; color: #111; font-size: 10px; font-weight: 900; }
.truck-site { right: 0; bottom: 18px; width: 240px; padding: 3px 10px; color: white; background: var(--red); font-size: 28px; font-weight: 800; line-height: 1.1; }

.donate-truck-cab {
  right: 20px; top: 110px;
  width: 218px; height: 160px;
  background: linear-gradient(#dde6e8, #bfcacf);
  border: 6px solid #879199;
  border-left-width: 10px;
  border-radius: 55px 14px 15px 6px;
  clip-path: polygon(0 0, 66% 0, 100% 48%, 100% 100%, 0 100%);
}
.cab-window { left: 28px; top: 20px; width: 106px; height: 68px; background: linear-gradient(160deg, #375984, #7ea2cf); border: 5px solid #59697a; clip-path: polygon(0 0, 76% 0, 100% 100%, 0 100%); }
.cab-mirror { right: 38px; top: 58px; width: 13px; height: 43px; background: #4b4b4b; border-radius: 4px; }
.cab-light  { right: 8px; bottom: 40px; width: 24px; height: 36px; background: #f2a45e; border: 3px solid #777; }
.cab-handle { left: 16px; top: 96px; width: 10px; height: 25px; background: #565656; border-radius: 3px; }

.donate-truck-bumper { right: 10px; top: 258px; width: 234px; height: 26px; background: #4d555b; border-radius: 6px; }
.donate-wheel { bottom: 46px; width: 74px; height: 74px; background: #3c3c3c; border-radius: 50%; box-shadow: inset 0 0 0 13px #2a2a2a, inset 0 0 0 24px #b8c0c8, inset 0 0 0 34px #5e6870; z-index: 2; }
.wheel-back  { left: 210px; }
.wheel-front { right: 68px; }
.donate-truck-shadow { left: 62px; bottom: 26px; width: 648px; height: 48px; background: #e8ebe9; border-radius: 50%; transform: skewX(8deg); }

.donate-intro {
  position: relative;
  max-width: 900px;
  margin: 0 auto 64px;
  padding: 16px 80px;
  text-align: center;
}

.donate-intro h1 {
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 400;
  line-height: 1.15;
  margin-bottom: 20px;
}

.donate-intro p { font-size: 13px; color: #555; line-height: 1.75; }

.donate-questions {
  width: min(740px, calc(100% - 48px));
  margin: 0 auto 48px;
}

.donate-faq h2 {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 400;
  margin: 28px 0 8px;
  color: var(--ink);
}

.donate-faq h2:first-child { margin-top: 0; }

.donate-faq p  { font-size: 14px; color: #444; line-height: 1.7; margin: 0 0 8px; }
.donate-faq ul { margin: 0 0 8px 24px; padding: 0; font-size: 14px; color: #444; line-height: 1.75; }
.donate-faq a  { color: var(--red); text-decoration: underline; }

.donate-paper {
  width: min(740px, calc(100% - 48px));
  margin: 0 auto;
  font-size: 14px;
  color: #444;
}

.donate-paper h2 {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 10px;
  color: var(--ink);
}

.donate-paper p  { margin: 0 0 12px; line-height: 1.7; }
.donate-paper ul { margin: 0 0 16px 24px; padding: 0; line-height: 1.75; }
.donate-paper-body p { margin-bottom: 16px; }


/* ═══════════════════════════════════════════
   VOLUNTEER PAGE
   ═══════════════════════════════════════════ */

.volunteer-page { display: flex; flex-direction: column; padding-bottom: 72px; }

.volunteer-hero { height: 340px; margin: -18px auto 56px; overflow: hidden; }

.volunteer-team-scene {
  position: relative;
  width: 620px;
  height: 320px;
  margin: 0 auto;
}

.volunteer-person { position: absolute; bottom: 16px; width: 88px; height: 220px; }
.volunteer-person span { position: absolute; display: block; }
.v-head { left: 50%; top: 0; width: 34px; height: 34px; background: #f0c9a8; border-radius: 50%; transform: translateX(-50%); }
.v-body { left: 50%; bottom: 0; width: 72px; height: 168px; background: #1a1a1a; border-radius: 18px 18px 8px 8px; transform: translateX(-50%); }
.v-logo { left: 50%; top: 72px; width: 34px; height: 18px; background: linear-gradient(135deg, var(--red) 0 46%, transparent 46% 54%, var(--red) 54%); transform: translateX(-50%) skewX(-12deg); }
.volunteer-person.p1 { left: 0; }
.volunteer-person.p2 { left: 118px; height: 240px; }
.volunteer-person.p3 { left: 236px; height: 250px; }
.volunteer-person.p4 { left: 354px; height: 235px; }
.volunteer-person.p5 { left: 472px; }

.volunteer-intro {
  position: relative;
  max-width: 880px;
  margin: 0 auto 60px;
  padding: 16px 80px;
  text-align: center;
}

.volunteer-intro h1 {
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 400;
  line-height: 1.15;
  margin-bottom: 18px;
}

.volunteer-intro p { font-size: 13px; color: #555; line-height: 1.75; }
.volunteer-intro a { color: var(--red); }

.volunteer-copy {
  width: min(680px, calc(100% - 48px));
  margin: 0 auto 56px;
  color: #333;
  font-size: 14px;
}

.volunteer-copy-main p  { margin: 0 0 18px; line-height: 1.7; }
.volunteer-copy-main h2 {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 400;
  margin: 24px 0 10px;
  color: var(--ink);
}
.volunteer-copy-main a { color: var(--red); text-decoration: underline; }

.volunteer-quote {
  margin: 0 0 32px;
  padding: 0;
  border: 0;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.45;
  color: #222;
}

.volunteer-quote p    { margin: 0 0 12px; }
.volunteer-quote cite { display: block; font-style: normal; font-size: 15px; color: #666; }


/* ═══════════════════════════════════════════
   PARTNER PAGE
   ═══════════════════════════════════════════ */

.partner-page { display: flex; flex-direction: column; padding-bottom: 72px; }

.partner-intro {
  position: relative;
  max-width: 880px;
  margin: 60px auto 56px;
  padding: 16px 80px;
  text-align: center;
}

.partner-intro h1 {
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 400;
  line-height: 1.15;
  margin-bottom: 20px;
}

.partner-intro p { font-size: 13px; color: #555; line-height: 1.75; }

.partner-detail {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0;
  width: min(900px, calc(100% - 48px));
  margin: 0 auto 56px;
  font-size: 14px;
}

.partner-sidebar {
  padding: 28px 24px 32px;
  background: #444;
  color: white;
}

.partner-sidebar h2 {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 20px;
}

.partner-other { margin-top: 20px; font-size: 12px; color: rgba(255,255,255,0.6); line-height: 1.5; }

.partner-main { padding: 28px 32px 32px; }

.partner-school-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  margin-bottom: 24px;
}

.partner-body p { margin: 0 0 18px; line-height: 1.7; color: #333; }

/* Logo placeholders */
.logo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: #f0f0f0;
  border: 1px solid var(--border);
  border-radius: 4px;
  height: 80px;
  width: 160px;
}

.logo-placeholder-label { color: #999; font-size: 11px; text-align: center; }

.partner-gallery-section {
  width: min(900px, calc(100% - 48px));
  margin: 0 auto 40px;
}

.partner-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: center;
}

.partner-gallery-item { margin: 0; }

.partner-gallery-item img,
.partner-sidebar-logo img,
.partner-school-logo img {
  display: block;
  width: 100%;
  object-fit: contain;
  height: 100px;
}


/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */

@media (max-width: 820px) {
  .site-header {
    grid-template-columns: 1fr;
    justify-items: center;
    min-height: auto;
    padding-bottom: 24px;
    gap: 0;
  }

  .site-announcement-inner {
    padding: 11px 20px;
  }

  .site-announcement-text {
    font-size: 14px;
  }

  .primary-nav, .secondary-nav { padding-top: 16px; justify-content: center; }
  .lamp { order: -1; height: 100px; width: 120px; }

  .values { grid-template-columns: 1fr; padding: 32px 24px; }
  .value-card { border: 1px solid var(--border); margin-bottom: 1px; }

  .shop-online { grid-template-columns: 1fr; gap: 36px; padding: 48px 24px; }

  .steps { grid-template-columns: repeat(2, 1fr); }

  .footer-body { grid-template-columns: 1fr 1fr; gap: 32px; }

  .partner-detail { grid-template-columns: 1fr; }

  .shop-room, .donate-truck-scene, .volunteer-team-scene {
    transform: scale(0.82);
    transform-origin: top center;
  }

  .shop-hero, .donate-hero, .volunteer-hero { height: 280px; }
}

@media (max-width: 560px) {
  .mission { padding: 0 24px; }
  .mission h1 { font-size: 28px; }

  .steps { grid-template-columns: 1fr; }

  .footer-body { grid-template-columns: 1fr; }
  .footer-nav  { flex-wrap: wrap; gap: 14px 24px; }

  .shop-intro, .donate-intro, .volunteer-intro, .partner-intro { padding-inline: 32px; }

  .shop-room, .donate-truck-scene, .volunteer-team-scene {
    transform: scale(0.58);
    transform-origin: top center;
  }

  .shop-hero  { height: 210px; }
  .donate-hero { height: 210px; }
  .volunteer-hero { height: 210px; }
}


/* ═══════════════════════════════════════════
   HOME PAGE REDESIGN
   ═══════════════════════════════════════════ */

/* ── Hero ── */
.home-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(84vh, 780px);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

.home-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.home-hero-bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}

.home-hero-overlay {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: 180px;
  background: linear-gradient(
    to top,
    rgba(18, 16, 15, 0.88) 0%,
    rgba(18, 16, 15, 0.68) 30%,
    rgba(18, 16, 15, 0.3) 60%,
    rgba(18, 16, 15, 0) 100%
  );
}

.home-hero-content {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 40px 62px;
}

.home-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #fff;
  background: var(--red);
  padding: 6px 13px;
  margin-bottom: 22px;
}

.home-headline {
  font-family: var(--serif);
  font-size: clamp(34px, 4.6vw, 58px);
  font-weight: 400;
  line-height: 1.13;
  letter-spacing: -0.5px;
  color: #fff;
  margin-bottom: 22px;
  max-width: none;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
}

.home-headline em {
  font-style: italic;
  color: #ff5c5c;
}

.home-sub {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.7;
  max-width: 600px;
  margin: 0 0 34px;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35);
}

.home-ctas {
  display: flex;
  justify-content: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.home-hero .btn-outline {
  border-color: #fff;
  color: #fff;
}
.home-hero .btn-outline:hover {
  background: #fff;
  color: var(--ink);
}

.home-hero .btn-ghost {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}
.home-hero .btn-ghost:hover {
  border-color: #fff;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.btn-primary {
  display: inline-block;
  padding: 14px 32px;
  background: var(--red);
  color: white;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity 0.2s;
}
.btn-primary:hover { opacity: 0.88; }

.btn-outline {
  display: inline-block;
  padding: 14px 32px;
  border: 2px solid var(--ink);
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.18s, color 0.18s;
}
.btn-outline:hover { background: var(--ink); color: white; }

.btn-ghost {
  display: inline-block;
  padding: 14px 32px;
  border: 2px solid var(--border);
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color 0.18s, color 0.18s;
}
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }

/* ── Video ── */
.home-video {
  max-width: 820px;
  margin: 0 auto 16px;
  padding: 0 40px;
}

.video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  overflow: hidden;
}

.video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: #111;
  color: rgba(255,255,255,0.4);
  font-size: 13px;
  text-align: center;
  padding: 32px;
}

.video-play-icon {
  width: 64px;
  height: 64px;
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: rgba(255,255,255,0.35);
  padding-left: 4px;
}

.video-credit {
  margin-top: 14px;
  font-size: 12px;
  color: #aaa;
  text-align: center;
}

/* ── Pillars (Stewardship / Community / Education) ── */
.home-pillars {
  background: var(--warm);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 36px 40px;
  text-align: center;
}

.pillars-heading {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 40px;
}

.pillars-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  max-width: 900px;
  margin: 0 auto;
  border: 1px solid var(--border);
}

.pillar {
  padding: 52px 40px;
  text-align: center;
  border-right: 1px solid var(--border);
}

.pillar:last-child { border-right: 0; }

.pillar-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 20px;
  position: relative;
}

/* Heart */
.pillar-icon--heart::before,
.pillar-icon--heart::after {
  content: "";
  position: absolute;
  top: 6px;
  width: 34px;
  height: 48px;
  background: #f7a23b;
  border-radius: 34px 34px 8px 8px;
}
.pillar-icon--heart::before { left: 9px;  transform: rotate(-45deg); }
.pillar-icon--heart::after  { right: 9px; transform: rotate(45deg); }

/* Home */
.pillar-icon--home::before {
  content: "";
  position: absolute;
  top: 8px; left: 11px;
  width: 44px; height: 38px;
  background: #e96030;
  clip-path: polygon(0 33%, 50% 0, 100% 33%, 100% 100%, 0 100%);
}
.pillar-icon--home::after {
  content: "";
  position: absolute;
  top: 26px; left: 24px;
  width: 24px; height: 20px;
  border: 6px solid var(--warm);
  border-left-width: 8px;
}

/* Book */
.pillar-icon--book::before,
.pillar-icon--book::after {
  content: "";
  position: absolute;
  top: 6px;
  width: 22px; height: 46px;
  background: #4cb4d4;
  border-radius: 4px 0 0 4px;
}
.pillar-icon--book::before { left: 4px; }
.pillar-icon--book::after  { right: 4px; border-radius: 0 4px 4px 0; }

.pillar h3 {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--ink);
}

.pillar p {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.65;
}

/* ── Shop Online ── */
.section-label {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 10px;
}

.shop-online {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  max-width: 1100px;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-top: none;
}

.shop-online-col {
  padding: 44px 64px;
  border-right: 1px solid var(--border);
}

.shop-online-col:last-child { border-right: 0; }

.shop-online-col h2 {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  margin-bottom: 14px;
  color: var(--ink);
  line-height: 1.2;
}

.shop-online-col p {
  font-size: 14px;
  color: #555;
  line-height: 1.75;
  margin-bottom: 20px;
}

.shop-online-col a { color: var(--red); text-decoration: underline; }

.inline-link {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink) !important;
  text-decoration: none !important;
  border-bottom: 2px solid var(--red);
  padding-bottom: 2px;
  transition: color 0.2s;
}
.inline-link:hover { color: var(--red) !important; }

.specials-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.specials-list li {
  font-size: 14px;
  color: #444;
  line-height: 1.6;
  padding-left: 22px;
  position: relative;
}

.specials-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--red);
  font-weight: 700;
}

/* ── Process ── */
.process {
  background: var(--warm);
  border-top: 1px solid var(--border);
  padding: 56px 40px 52px;
  text-align: center;
}

.process-header {
  margin-bottom: 56px;
}

.process h2 {
  font-family: var(--serif);
  font-size: clamp(32px, 4.5vw, 50px);
  font-weight: 400;
  letter-spacing: -0.5px;
  color: var(--ink);
  margin-bottom: 12px;
}

.process-sub {
  font-size: 15px;
  color: var(--muted);
}

.steps {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  gap: 0 8px;
  align-items: start;
  max-width: 900px;
  margin: 0 auto 56px;
}

.step-arrow {
  color: #ccc;
  font-size: 22px;
  padding-top: 12px;
  align-self: start;
}

.step-num {
  width: 48px;
  height: 48px;
  border: 2px solid var(--red);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-family: var(--serif);
  font-size: 19px;
  color: var(--red);
}

.step h3 {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 10px;
  line-height: 1.45;
}

.step p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.7;
}

.thanks {
  font-size: 14px;
  color: #999;
  line-height: 1.85;
  max-width: 460px;
  margin: 0 auto;
  padding-top: 40px;
  border-top: 1px solid var(--border);
}

.thanks span:last-child {
  display: block;
  color: var(--red);
  font-style: italic;
  margin-top: 6px;
}

/* ── Home responsive ── */
@media (max-width: 900px) {
  .home-hero {
    min-height: min(82vh, 620px);
  }

  .home-hero-overlay {
    padding-top: 140px;
  }

  .home-hero-content {
    padding: 0 28px 48px;
  }
}

@media (max-width: 760px) {
  .home-headline { font-size: 36px; }
  .home-video { padding: 0 24px; }

  .pillars-inner { grid-template-columns: 1fr; }
  .pillar { border-right: 0; border-bottom: 1px solid var(--border); }
  .pillar:last-child { border-bottom: 0; }

  .shop-online { grid-template-columns: 1fr; }
  .shop-online-col { border-right: 0; border-bottom: 1px solid var(--border); padding: 44px 28px; }
  .shop-online-col:last-child { border-bottom: 0; }

  .steps { grid-template-columns: 1fr; gap: 32px; }
  .step-arrow { display: none; }
}

@media (max-width: 480px) {
  .home-ctas { flex-direction: column; align-items: center; }
  .btn-primary, .btn-outline, .btn-ghost { width: 100%; max-width: 260px; text-align: center; }
}


/* ═══════════════════════════════════════════
   SHARED PAGE HERO (shop, donate, volunteer)
   ═══════════════════════════════════════════ */

.page-hero {
  max-width: 720px;
  margin: 0 auto;
  padding: 72px 40px 64px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}

.page-hero-eyebrow {
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 18px;
}

.page-hero-title {
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.5px;
  color: var(--ink);
  margin-bottom: 20px;
}

/* Hero title as an in-page anchor (e.g. volunteer → sign-up card):
   looks like plain text, hints on hover */
.hero-anchor-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.18s;
}

.hero-anchor-link:hover {
  color: var(--red);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

.page-hero-sub {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.7;
  max-width: 520px;
  margin: 0 auto;
}

.page-hero--with-media {
  max-width: 1180px;
  margin: 0 auto;
  padding: 48px 40px 64px;
  text-align: left;
  display: grid;
  grid-template-columns: min(38%, 400px) 1fr;
  column-gap: 44px;
  align-items: center;
}

.page-hero--with-media .page-hero-content {
  min-width: 0;
}

.page-hero--with-media .page-hero-sub {
  margin: 0;
  max-width: none;
}

.page-hero-media {
  margin: 0;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #f0eeea;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.07);
}

.page-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
  pointer-events: none;
}

.page-hero-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.page-hero--donate {
  max-width: 1180px;
  margin: 0 auto;
  padding: 48px 40px 64px;
  text-align: center;
}

.donate-hero-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 48px;
}

.donate-hero-media {
  margin: 0;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #f0eeea;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.07);
}

.donate-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
  pointer-events: none;
}

.donate-hero-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.page-hero--donate .page-hero-content {
  max-width: 720px;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .page-hero--with-media {
    grid-template-columns: 1fr;
    padding: 32px 28px 56px;
    row-gap: 28px;
    text-align: center;
  }

  .page-hero--with-media .page-hero-media {
    max-width: 520px;
    margin: 0 auto;
    width: 100%;
    order: -1;
  }

  .page-hero--with-media .page-hero-sub {
    margin: 0 auto;
  }

  .donate-hero-images {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 36px;
  }

  .page-hero--donate {
    padding: 32px 28px 56px;
  }
}

.section-heading {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 8px;
}

.red-link { color: var(--red); text-decoration: underline; }


/* ═══════════════════════════════════════════
   SHOP PAGE
   ═══════════════════════════════════════════ */

/* Where to shop */
.shop-where {
  max-width: 960px;
  margin: 0 auto;
  padding: 64px 40px;
  border-bottom: 1px solid var(--border);
}

.shop-where > h2 { margin-bottom: 32px; }

.shop-where-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.shop-where-card {
  padding: 36px 32px;
  border: 1px solid var(--border);
  background: white;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: box-shadow 0.2s;
}

.shop-where-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.07); }

.shop-where-card--accent {
  background: var(--warm);
  border-color: #d8d5d0;
}

/* Featured card — the highlighted way to shop (eBay) */
.shop-where-card--featured {
  background: var(--warm);
  border-color: #d8d5d0;
  border-top: 3px solid var(--red);
}

.shop-where-icon {
  font-size: 28px;
  margin-bottom: 4px;
}

.shop-where-card h3 {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}

.shop-where-card p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.65;
  flex: 1;
}

.card-link {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--red);
  padding-bottom: 1px;
  margin-top: 6px;
  align-self: flex-start;
  transition: color 0.2s;
}
.card-link:hover { color: var(--red); }

/* In-store Spotlights Carousel */
.shop-spotlights-section {
  background: var(--warm);
  border-bottom: 1px solid var(--border);
  padding: 64px 0 0;
}

.shop-spotlights-header {
  max-width: 960px;
  margin: 0 auto 32px;
  padding: 0 40px;
}

.shop-spotlights-header p {
  font-size: 15px;
  color: var(--muted);
  margin-top: 8px;
}

/* Carousel wrapper */
.spotlight-carousel {
  max-width: 960px;
  margin: 0 auto;
  border: 1px solid var(--border);
}

/* Carousel tabs */
.carousel-tabs {
  display: flex;
  gap: 0;
  overflow-x: auto;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: white;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.carousel-tabs::-webkit-scrollbar { display: none; }

.carousel-tab {
  flex-shrink: 0;
  padding: 14px 22px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.18s, border-color 0.18s;
}

.carousel-tab:hover { color: var(--ink); }

.carousel-tab.active {
  color: var(--red);
  border-bottom-color: var(--red);
}

/* Carousel slides */
.carousel-track { position: relative; background: white; }

.carousel-slide {
  display: none;
  grid-template-columns: 1fr 360px;
  gap: 0;
  align-items: stretch;
}

.carousel-slide.active { display: grid; }

.carousel-photo {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #f0eeea;
  border: 2px dashed #d0ccc5;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 360px;
  overflow: hidden;
}

.carousel-photo:has(img) {
  border: none;
  background: #111;
}

.photo-carousel {
  position: absolute;
  inset: 0;
}

.photo-carousel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.carousel-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.carousel-photo img + span { display: none; }

.carousel-photo span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #b0a99f;
}

/* Inner photo carousel controls */
.photo-carousel-arrow {
  width: 40px;
  height: 40px;
  border: 2px solid var(--border);
  background: white;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.18s, background 0.18s;
  color: var(--ink);
  flex-shrink: 0;
}

.photo-carousel-arrow--overlay {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.photo-carousel-prev.photo-carousel-arrow--overlay { left: 16px; }
.photo-carousel-next.photo-carousel-arrow--overlay { right: 16px; }

.photo-carousel-arrow:hover {
  border-color: var(--red);
  background: var(--red);
  color: white;
}

.photo-carousel-counter {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.5px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--border);
  white-space: nowrap;
}

.carousel-caption {
  padding: 48px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid var(--border);
}

.carousel-caption h3 {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--red);
  display: inline-block;
  align-self: flex-start;
}

.carousel-caption p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.75;
}

/* Carousel arrow controls */
.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 20px;
  border-top: 1px solid var(--border);
  background: white;
}

.carousel-controls--section {
  gap: 16px;
}

.carousel-controls-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #aaa;
  margin-right: 4px;
}

.carousel-arrow {
  width: 40px;
  height: 40px;
  border: 2px solid var(--border);
  background: white;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.18s, background 0.18s;
  color: var(--ink);
}

.carousel-arrow:hover {
  border-color: var(--red);
  background: var(--red);
  color: white;
}

.carousel-counter {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 1px;
  min-width: 56px;
  text-align: center;
}

/* Disclaimer */
.spotlight-disclaimer {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px 40px;
  font-size: 12px;
  color: #aaa;
  line-height: 1.65;
  font-style: italic;
}

@media (max-width: 700px) {
  .carousel-slide.active { grid-template-columns: 1fr; }
  .carousel-photo { min-height: 220px; }
  .carousel-caption { border-left: 0; border-top: 1px solid var(--border); padding: 28px 24px; }
  .carousel-controls-label { display: none; }
  .photo-carousel-arrow--overlay { width: 36px; height: 36px; font-size: 16px; }
  .photo-carousel-prev.photo-carousel-arrow--overlay { left: 10px; }
  .photo-carousel-next.photo-carousel-arrow--overlay { right: 10px; }
}

/* Social CTA */
.shop-social-cta {
  text-align: center;
  padding: 56px 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
}

.shop-social-cta p {
  font-size: 16px;
  color: var(--muted);
  font-style: italic;
}

.shop-social-links {
  display: flex;
  gap: 12px;
}

.social-cta-btn {
  display: inline-flex;
  width: 80px;
  height: 80px;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: opacity 0.2s;
}

.social-cta-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.social-cta-btn:hover { opacity: 0.7; }

/* Shop page responsive */
@media (max-width: 820px) {
  .shop-where-grid      { grid-template-columns: 1fr; }
  .shop-spotlights-grid { grid-template-columns: repeat(2, 1fr); }
  .shop-gallery-grid    { grid-template-columns: repeat(2, 1fr); }
  .shop-social-cta      { flex-direction: column; gap: 16px; }
}

@media (max-width: 500px) {
  .shop-spotlights-grid { grid-template-columns: 1fr; }
  .shop-gallery-grid    { grid-template-columns: 1fr; }
}