/*
Theme Name: The Freed Speech
Theme URI: https://thefreedspeech.com
Author: The Freed Speech
Description: Merch store + civic voting resource site for theFreedSpeech. Built for WooCommerce.
Version: 1.0.1
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: freedspeech
Tags: e-commerce, custom-menu, featured-images, translation-ready
*/

/* ==========================================================================
   Design tokens
   ========================================================================== */

:root {
  /* Color: navy */
  --navy-950: #0a1a3d;
  --navy-900: #0f2251;
  --navy-800: #18254f;
  --navy-700: #233571;
  --navy-600: #324890;
  --navy-500: #4c62ac;
  --navy-100: #e6e9f4;
  --navy-50: #f3f4fa;

  /* Color: red */
  --red-800: #7a1e28;
  --red-700: #96222c;
  --red-600: #c23541;
  --red-500: #d45663;
  --red-400: #e18a92;
  --red-100: #f9e3e5;
  --red-50: #fdf1f2;

  /* Color: neutrals */
  --white: #ffffff;
  --paper: #fdfdfd;
  --gray-900: #1c2130;
  --gray-700: #454b5e;
  --gray-500: #767c8f;
  --gray-300: #c3c7d2;
  --gray-200: #dee0e7;
  --gray-100: #eef0f4;
  --gray-50: #f7f8fa;
  --gold: #c8952e;

  /* Semantic */
  --text-primary: var(--navy-900);
  --text-secondary: var(--gray-700);
  --text-muted: var(--gray-500);
  --text-link: var(--red-600);
  --text-link-hover: var(--red-700);
  --border-default: var(--gray-200);
  --border-strong: var(--gray-300);
  --accent-primary: var(--red-600);
  --accent-primary-hover: var(--red-700);
  --accent-primary-active: var(--red-800);
  --accent-primary-tint: var(--red-100);
  --accent-secondary: var(--navy-800);
  --accent-secondary-hover: var(--navy-700);
  --success: #2f7d4f;
  --danger: var(--red-600);
  --info: var(--navy-600);
  --surface-page: var(--paper);
  --surface-card: var(--white);
  --surface-sunken: var(--gray-50);
  --surface-navy-deep: var(--navy-950);

  /* Typography */
  --font-body: 'Folio Light', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --text-display-xl: 700 4rem/1.02 var(--font-display);
  --text-display-lg: 700 2.75rem/1.05 var(--font-display);
  --text-display-md: 600 2.25rem/1.1 var(--font-display);
  --text-display-sm: 600 1.625rem/1.2 var(--font-display);
  --text-eyebrow: 600 0.8125rem/1 var(--font-body);
  --text-body-lg: 400 1.1875rem/1.55 var(--font-body);
  --text-body: 400 1rem/1.6 var(--font-body);
  --text-body-sm: 400 0.875rem/1.5 var(--font-body);
  --text-caption: 400 0.75rem/1.4 var(--font-body);
  --text-button: 600 0.9375rem/1 var(--font-body);
  --tracking-eyebrow: 0.14em;
  --tracking-display: 0.01em;

  /* Spacing */
  --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px;
  --space-20: 20px; --space-24: 24px; --space-32: 32px; --space-40: 40px;
  --space-48: 48px; --space-64: 64px; --space-80: 80px; --space-96: 96px;
  --space-128: 128px;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* Shadows (navy-tinted) */
  --shadow-sm: 0 1px 2px rgba(15, 34, 81, .08);
  --shadow-md: 0 4px 12px rgba(15, 34, 81, .10);
  --shadow-lg: 0 12px 32px rgba(15, 34, 81, .14);
  --focus-ring: 0 0 0 3px rgba(50, 72, 144, .35);

  /* Motion */
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(0, 0, .2, 1);
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --reveal-distance: 22px;
  --reveal-duration: 0.6s;
  --marquee-duration: 32s;
  --carousel-duration: 0.6s;

  --border-width: 1.5px;
  --container-max: 1200px;
}

[data-motion="calm"] {
  --reveal-distance: 14px;
  --reveal-duration: 1.0s;
  --marquee-duration: 65s;
  --carousel-duration: 1.1s;
}

/* ==========================================================================
   Base
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

#footer-involved { scroll-margin-top: 100px; }

body {
  margin: 0;
  font: var(--text-body);
  background: var(--surface-page);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
}

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

a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--text-link-hover); }

::selection { background: var(--red-100); }

h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-display); }

button { font-family: inherit; }

.screen-reader-text {
  border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
  height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute;
  width: 1px; word-wrap: normal !important;
}

.site-wrap { display: flex; flex-direction: column; min-height: 100vh; }
/* Flex items default to min-width:auto, which lets a grid child's own
   auto-fit/minmax minimum size force this wider than the viewport instead
   of shrinking — this keeps every direct section a normal shrinkable block. */
.site-wrap > * { min-width: 0; }

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

@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes bounce-down { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

/* ==========================================================================
   Buttons, tags, inputs, badges
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: var(--text-button);
  font-weight: 600;
  border-radius: var(--radius-md);
  border: var(--border-width) solid transparent;
  padding: 0 24px;
  height: 48px;
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
  text-align: center;
}
.btn--lg { height: 52px; padding: 0 28px; }
.btn--md { height: 44px; padding: 0 20px; }
.btn--primary { background: var(--accent-primary); color: var(--white); border-color: var(--accent-primary); }
.btn--primary:hover { background: var(--accent-primary-hover); border-color: var(--accent-primary-hover); color: var(--white); }
.btn--danger { background: var(--danger); color: var(--white); border-color: var(--danger); }
.btn--danger:hover { background: var(--accent-primary-hover); border-color: var(--accent-primary-hover); color: var(--white); }
.btn--secondary { background: var(--white); color: var(--text-primary); border-color: var(--white); }
.btn--secondary:hover { background: var(--gray-100); color: var(--text-primary); }
.btn--outline { background: transparent; color: var(--text-primary); border-color: var(--border-strong); }
.btn--outline:hover { background: var(--gray-50); color: var(--text-primary); }
.btn--outline-inverse { background: transparent; color: var(--white); border-color: var(--accent-primary-tint); }
.btn--outline-inverse:hover { background: rgba(255,255,255,0.12); color: var(--white); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

.tag {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  border: var(--border-width) solid var(--border-default);
  background: var(--white);
  font: var(--text-button);
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}
.tag:hover { color: var(--text-primary); border-color: var(--border-strong); }
.tag.is-selected, .tag[aria-pressed="true"] {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  background: var(--red-50);
}

.badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  font: var(--text-caption);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}
.badge--primary { background: var(--red-100); color: var(--accent-primary-active); }

.form-input,
.form-select {
  height: 44px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  border: var(--border-width) solid var(--border-default);
  background: var(--white);
  font: var(--text-body);
  color: var(--text-primary);
  width: 100%;
}
.form-input:focus,
.form-select:focus {
  outline: none;
  border-color: var(--accent-secondary);
  box-shadow: var(--focus-ring);
}
.form-input--lg, .form-select--lg { height: 52px; }

.eyebrow {
  font: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent-primary);
  margin-bottom: 12px;
  display: block;
}

.icon { display: inline-block; vertical-align: middle; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ==========================================================================
   Header / navigation
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface-card);
  border-bottom: var(--border-width) solid var(--border-default);
  transition: box-shadow 0.25s ease;
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }

.site-header__row {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  gap: 16px;
}

.site-header__logo img { height: 34px; width: auto; cursor: pointer; }

.main-nav { display: flex; gap: 32px; }
@media (max-width: 859px) { .main-nav { display: none; } }

.main-nav a,
.mobile-nav a {
  font: var(--text-button);
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  padding-bottom: 4px;
  border-bottom: 2.5px solid transparent;
}
.main-nav a:hover { color: var(--accent-primary); }
.main-nav a.is-active,
.mobile-nav a.is-active {
  color: var(--accent-primary);
  border-bottom-color: var(--accent-primary);
}

.site-header__actions { display: flex; gap: 18px; align-items: center; }
.header-icon-btn {
  background: none; border: none; padding: 8px; margin: -8px;
  cursor: pointer; display: flex; align-items: center; position: relative;
  color: var(--text-primary);
}
.header-icon-btn .icon { width: 20px; height: 20px; }
.cart-count {
  position: absolute; top: -2px; right: -4px;
  background: var(--accent-primary); color: #fff;
  font-size: 10px; font-weight: 700; border-radius: 50%;
  width: 16px; height: 16px; display: flex; align-items: center; justify-content: center;
}

.menu-toggle { display: none; background: none; border: none; padding: 8px; margin: -8px; cursor: pointer; align-items: center; color: var(--text-primary); }
.menu-toggle .icon { width: 26px; height: 26px; }
@media (max-width: 859px) { .menu-toggle { display: flex; } }
.menu-toggle .js-menu-icon-close { display: none; }
.menu-toggle.is-open .js-menu-icon-open { display: none; }
.menu-toggle.is-open .js-menu-icon-close { display: block; }

.mobile-nav {
  display: flex;
  flex-direction: column;
  border-top: var(--border-width) solid var(--border-default);
  padding: 8px 24px 16px;
}
.mobile-nav a { padding-block: 12px; border-bottom: 1px solid var(--border-default); }
.mobile-nav a:last-child { border-bottom: none; }
.mobile-nav[hidden] { display: none; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero { position: relative; display: flex; flex-direction: column; overflow: hidden; }
.hero__media { position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; }
.hero__media-inner { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__media-inner video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__media-inner--bold {
  position: absolute; inset: 0;
  background: linear-gradient(115deg, var(--navy-950) 0%, var(--navy-950) 45%, var(--accent-primary) 45%, var(--accent-primary) 100%);
}
.hero__scrim-bottom {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,26,61,0) 55%, rgba(10,26,61,0.55) 88%, var(--navy-950) 100%);
}
.hero__scrim-top {
  position: absolute; top: 0; left: 0; right: 0; height: 170px; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,20,48,0.65), rgba(8,20,48,0) 100%);
}
.hero__center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 24px; pointer-events: none;
}
.hero__eyebrow-top {
  font-family: var(--font-body); font-weight: 800; font-size: 1.1rem;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--accent-primary-tint); text-align: center; margin: 0 0 12px;
  pointer-events: auto; max-width: 90%;
}
.hero__headline {
  font-family: var(--font-display); font-weight: 700; line-height: 1.02;
  letter-spacing: 0.01em; color: #fff; text-align: center; margin: 0;
  pointer-events: auto; max-width: 90%;
  font-size: clamp(2.2rem, 5.5vw, 4.1rem);
  text-shadow: 0 2px 4px rgba(0,0,0,0.55), 0 8px 32px rgba(0,0,0,0.5);
}
.hero--bold .hero__headline { font-size: clamp(2.8rem, 9vw, 6.5rem); text-shadow: none; }
.hero__scroll-cue {
  position: absolute; bottom: 16px; left: 0; right: 0;
  display: flex; justify-content: center; pointer-events: none;
}
.hero__scroll-cue .icon { width: 24px; height: 24px; color: rgba(255,255,255,0.75); animation: bounce-down 1.8s ease-in-out infinite; }

.hero__panel { flex: 0 0 auto; background: var(--accent-primary); padding: 52px 24px 64px; }
.hero__panel-inner { max-width: var(--container-max); margin: 0 auto; }
.hero__copy { max-width: 620px; }
.hero__eyebrow {
  font: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--accent-primary-tint); margin-bottom: 18px;
}
.hero__title {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(3.2rem, 8vw, 6.2rem);
  line-height: 0.98; letter-spacing: var(--tracking-display); color: #fff; margin: 0 0 20px;
}
.hero__subtitle { font: var(--text-body-lg); color: rgba(255,255,255,0.82); max-width: 480px; margin: 0 0 36px; }
.hero__cta { display: flex; gap: 16px; flex-wrap: wrap; }
.hero__cta .btn { border-width: 2px; }
[data-brand-voice="quiet"] .hero__cta .btn { border-width: 1px; }

/* fade-up entrance (JS toggles .is-visible) */
.js-hero-fade { opacity: 0; transform: translateY(10px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
.js-hero-fade.is-visible { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   Scroll reveal
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition: opacity var(--reveal-duration) var(--ease-out), transform var(--reveal-duration) var(--ease-out);
}
[data-reveal].is-revealed { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   Sections / grids
   ========================================================================== */

.section { max-width: var(--container-max); margin: 0 auto; padding: var(--space-16) 24px; }
.section--top { padding-top: var(--space-24); padding-bottom: var(--space-16); }
.section--tight { padding-top: var(--space-16); padding-bottom: var(--space-20); }

.section__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 28px; flex-wrap: wrap; gap: 12px; }
.section__head h2 { font-weight: 600; font-size: clamp(1.9rem, 3vw, 2.5rem); color: var(--text-primary); }
.section__link { font: var(--text-button); font-weight: 600; color: var(--accent-primary); cursor: pointer; }
.section__link:hover { color: var(--accent-primary-hover); }

.page-intro { max-width: 640px; margin-bottom: var(--space-12); }
.page-intro--wide { max-width: 720px; }
.page-intro h1 { font-weight: 600; font-size: clamp(2.2rem, 4vw, 3rem); color: var(--text-primary); margin: 0 0 12px; }
.page-intro p { font: var(--text-body-lg); color: var(--text-secondary); margin: 0; }
.page-intro__content { font: var(--text-body-lg); color: var(--text-secondary); }
.page-intro__content p { margin: 0 0 12px; }
.page-intro__content p:last-child { margin-bottom: 0; }

.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.civic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }

/* ==========================================================================
   Product card
   ========================================================================== */

.product-card {
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}
.product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.product-card__media { position: relative; aspect-ratio: 1/1; background: var(--surface-sunken); }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; }
.product-card__badge {
  position: absolute; top: 10px; left: 10px; background: var(--accent-primary); color: var(--white);
  font: var(--text-caption); font-weight: 700; padding: 3px 10px; border-radius: var(--radius-pill);
  pointer-events: none; z-index: 2;
}
.product-card__body { padding: var(--space-16); display: flex; flex-direction: column; gap: var(--space-8); }
.product-card__title { font: var(--text-body); font-weight: 600; color: var(--text-primary); }
.product-card__row { display: flex; align-items: center; justify-content: space-between; }
.product-card__price { display: flex; align-items: baseline; gap: 6px; }
.product-card__price-current { font: var(--text-body); font-weight: 700; color: var(--text-primary); }
.product-card__price-compare { font: var(--text-caption); color: var(--text-muted); text-decoration: line-through; }
.product-card__price .price { display: flex; align-items: baseline; gap: 6px; font: var(--text-body); font-weight: 700; color: var(--text-primary); }
.product-card__price .price del { font: var(--text-caption); color: var(--text-muted); text-decoration: line-through; opacity: 1; }
.product-card__price .price ins { text-decoration: none; }
.product-card__add {
  background: none; border: none; color: var(--accent-primary); font: var(--text-button);
  font-weight: 600; cursor: pointer; padding: 0;
}
.product-card__add:hover { color: var(--accent-primary-hover); }

/* ==========================================================================
   Marquee
   ========================================================================== */

.marquee { overflow: hidden; white-space: nowrap; background: var(--navy-950); padding: 16px 0; }
[data-brand-voice="quiet"] .marquee { display: none; }
.marquee__track { display: flex; width: max-content; animation: marquee var(--marquee-duration) linear infinite; }
.marquee__item {
  flex-shrink: 0; padding-right: 48px; font-family: var(--font-display); font-weight: 600;
  font-size: 1.1rem; letter-spacing: 0.04em; color: rgba(255,255,255,0.9);
}

/* ==========================================================================
   Newsletter
   ========================================================================== */

.newsletter { padding: var(--space-16) 24px; background: var(--accent-primary); }
[data-brand-voice="quiet"] .newsletter { background: var(--surface-navy-deep); }
.newsletter__inner {
  max-width: var(--container-max); margin: 0 auto; display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap; gap: 24px;
}
.newsletter__title {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 2.6vw, 2rem);
  color: var(--accent-primary-tint); margin-top: 14px;
}
.newsletter__sub { font: var(--text-body); color: var(--accent-primary-tint); margin-top: 6px; }
.newsletter__form { display: flex; gap: 12px; flex-wrap: wrap; }
.newsletter__form .form-input { width: 260px; }

/* ==========================================================================
   Carousel
   ========================================================================== */

.carousel {
  position: relative; width: 100%; aspect-ratio: 16/9; max-height: 520px; overflow: hidden;
  border-radius: var(--radius-lg); background: var(--surface-sunken);
}
.carousel__track { display: flex; height: 100%; transition: transform var(--carousel-duration) var(--ease-standard); }
.carousel__slide { flex: 0 0 100%; width: 100%; height: 100%; }
.carousel__slide img { width: 100%; height: 100%; object-fit: cover; }
.carousel__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px;
  border-radius: 50%; background: rgba(10,26,61,0.55); border: none; color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.carousel__arrow:hover { background: rgba(10,26,61,0.75); }
.carousel__arrow--prev { left: 16px; }
.carousel__arrow--next { right: 16px; }
.carousel__arrow .icon { width: 22px; height: 22px; }
.carousel__dots { position: absolute; bottom: 16px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; }
.carousel__dot {
  width: 9px; height: 9px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
  background: rgba(255,255,255,0.45);
}
.carousel__dot.is-active { background: #fff; }

/* ==========================================================================
   Civic / voting resource cards
   ========================================================================== */

.civic-card, .resource-card {
  display: flex; flex-direction: column; gap: 14px;
  border: var(--border-width) solid var(--border-default); border-radius: var(--radius-md); padding: 24px;
}
.civic-card__icon, .resource-card__icon {
  width: 52px; height: 52px; border-radius: 50%; background: var(--navy-50);
  display: flex; align-items: center; justify-content: center;
}
.civic-card__icon .icon { width: 32px; height: 32px; color: var(--accent-primary); }
.resource-card__icon .icon { width: 28px; height: 28px; color: var(--accent-primary); }
.civic-card__title, .resource-card__title { font: var(--text-body); font-weight: 600; color: var(--text-primary); }
.civic-card__desc, .resource-card__desc { font: var(--text-body-sm); color: var(--text-muted); }
.civic-card__link { font: var(--text-button); font-weight: 600; color: var(--accent-primary); }
.civic-card__link:hover { color: var(--accent-primary-hover); }

/* ==========================================================================
   Article cards / blog
   ========================================================================== */

.article-card { display: flex; flex-direction: column; gap: 14px; cursor: pointer; color: inherit; }
.article-card__thumb { aspect-ratio: 16/10; border-radius: var(--radius-md); overflow: hidden; background: var(--surface-sunken); }
.article-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.article-card__cat { font: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--accent-primary); }
.article-card__title { font: var(--text-body); font-weight: 600; color: var(--text-primary); }
.article-card__excerpt { font: var(--text-body-sm); color: var(--text-muted); }
.article-card__cta { font: var(--text-button); font-weight: 600; color: var(--accent-primary); }
.article-card:hover .article-card__cta { color: var(--accent-primary-hover); }

.article-back { display: inline-flex; align-items: center; gap: 6px; font: var(--text-button); font-weight: 600; color: var(--accent-primary); cursor: pointer; margin-bottom: var(--space-12); }
.article-meta { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; font: var(--text-body-sm); color: var(--text-muted); margin-bottom: var(--space-12); }
.article-hero { aspect-ratio: 16/9; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-sunken); margin-bottom: var(--space-16); }
.article-hero img { width: 100%; height: 100%; object-fit: cover; }
.article-body { display: flex; flex-direction: column; gap: 20px; font: var(--text-body-lg); color: var(--text-secondary); line-height: 1.7; max-width: 780px; }
.article-body p { margin: 0; }
.article-cta {
  margin-top: var(--space-20); padding: 28px; background: var(--navy-50); border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.article-cta__text { font: var(--text-body); font-weight: 600; color: var(--text-primary); }

/* ==========================================================================
   Voting / About page furniture
   ========================================================================== */

.page-hero { border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-sunken); margin-bottom: var(--space-20); }
.page-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-hero--21x9 { aspect-ratio: 21/9; }
.page-hero--16x9 { aspect-ratio: 16/9; margin-bottom: var(--space-16); }

.back-link-wrap { text-align: center; margin-top: var(--space-20); }
.back-link-wrap a { font: var(--text-button); font-weight: 600; color: var(--accent-primary); cursor: pointer; }

.prose { display: flex; flex-direction: column; gap: 20px; font: var(--text-body-lg); color: var(--text-secondary); line-height: 1.7; margin-bottom: var(--space-20); }
.prose p { margin: 0; }

.contact-block { border: var(--border-width) solid var(--border-default); border-radius: var(--radius-md); padding: 28px; display: flex; flex-direction: column; gap: 8px; }
.contact-block__label { font: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted); }
.contact-block__email { font: var(--text-body); font-weight: 600; color: var(--accent-primary); }
.contact-block__note { font: var(--text-body-sm); color: var(--text-muted); }

/* ==========================================================================
   Shop
   ========================================================================== */

.shop-banner {
  background: var(--surface-navy-deep); border-radius: var(--radius-lg); padding: 20px 28px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: space-between;
  margin-bottom: var(--space-12);
}
.shop-banner__msg { display: flex; align-items: center; gap: 14px; }
.shop-banner__msg .icon { width: 22px; height: 22px; color: var(--red-400); }
.shop-banner__msg span { font: var(--text-body); color: #fff; }

.shop-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 16px; }
.shop-toolbar__tags { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.shop-toolbar__count { font: var(--text-body-sm); color: var(--text-muted); margin-left: 6px; }
.shop-toolbar__sort { width: 220px; }

.shop-title { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; color: var(--text-primary); margin: 0 0 4px; grid-column: 1 / -1; }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer { background: var(--surface-navy-deep); color: #fff; margin-top: auto; }
.site-footer__grid {
  max-width: var(--container-max); margin: 0 auto; padding: var(--space-20) 24px var(--space-12);
  display: flex; justify-content: space-between; gap: var(--space-12); flex-wrap: wrap;
}
.site-footer__brand { max-width: 320px; }
.site-footer__brand img { height: 44px; margin-bottom: 14px; }
.site-footer__tagline { font: var(--text-body-sm); opacity: 0.75; }
.site-footer__label { font: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; opacity: 0.6; margin-bottom: 14px; }
.site-footer__social { display: flex; gap: 14px; margin-top: 20px; }
.site-footer__social a { color: rgba(255,255,255,0.75); }
.site-footer__social a:hover { color: #fff; }
.site-footer__social svg { width: 20px; height: 20px; fill: currentColor; }
.site-footer__col { display: flex; flex-direction: column; gap: 10px; font: var(--text-body-sm); opacity: 0.85; }
.site-footer__col a, .site-footer__col span { color: inherit; cursor: pointer; }
.site-footer__col a:hover { opacity: 0.75; }
.site-footer__bottom { border-top: 1px solid rgba(255,255,255,0.15); padding: 16px 24px; text-align: center; font: var(--text-caption); opacity: 0.6; }

/* ==========================================================================
   Toast
   ========================================================================== */

.toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 200;
  background: var(--surface-card); border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  padding: 14px 18px; display: flex; align-items: center; gap: 12px; min-width: 220px; max-width: 320px;
  border-left: 3px solid var(--success);
  transform: translateY(12px); opacity: 0; pointer-events: none;
  transition: transform var(--duration-base) var(--ease-standard), opacity var(--duration-base) var(--ease-standard);
}
.toast.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
.toast__title { font: var(--text-body); font-weight: 600; color: var(--text-primary); }
.toast__msg { font: var(--text-body-sm); color: var(--text-muted); }

/* ==========================================================================
   WooCommerce overrides
   ========================================================================== */

.woocommerce ul.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; list-style: none; margin: 0; padding: 0; }
.woocommerce ul.products li.product { width: auto; margin: 0; float: none; }
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border-top-color: var(--accent-primary) !important;
  font: var(--text-body-sm);
}
.woocommerce-message::before, .woocommerce-info::before { color: var(--accent-primary) !important; }
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
  font: var(--text-button); font-weight: 600; border-radius: var(--radius-md);
  background: var(--accent-primary); color: #fff; border: none; padding: 0 24px; height: 48px; line-height: 48px;
}
.woocommerce a.button:hover, .woocommerce button.button:hover { background: var(--accent-primary-hover); color: #fff; }
.woocommerce-checkout .form-row input.input-text, .woocommerce-checkout .form-row select { border-radius: var(--radius-sm); border: var(--border-width) solid var(--border-default); }

.woocommerce a.button.product-card__add,
.woocommerce a.added_to_cart.wc-forward {
  background: none; color: var(--accent-primary); border: none; height: auto; padding: 0; line-height: 1;
  font: var(--text-button); font-weight: 600;
}
.woocommerce a.button.product-card__add:hover { color: var(--accent-primary-hover); background: none; }
.woocommerce a.added_to_cart.wc-forward { margin-left: 8px; font-size: 0.8125rem; }
.product-card__row { position: relative; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 640px) {
  .hero__panel { padding: 40px 20px 48px; }
  .newsletter__form .form-input { width: 100%; }
  .site-footer__grid { flex-direction: column; }
}