/* ===========================================
   JVA Creative Creations - Custom Theme
   Built on Bootstrap 5
   Following Design Rulebook Standards
   =========================================== */

:root {
  /* Brand Colors */
  --champagne: #efdab8;
  --slate: #5b6970;
  --olive: #77693c;
  --sage: #7fa290;

  /* Theme */
  --bg: #fbfaf7;
  --surface: #ffffff;
  --text: #1b1f22;
  --muted: #4c5960;
  --border: rgba(91, 105, 112, 0.18);
  --shadow: 0 10px 28px rgba(27, 31, 34, 0.12);
  --shadow-sm: 0 4px 12px rgba(27, 31, 34, 0.08);

  /* Bootstrap overrides */
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  --bs-border-color: var(--border);
  --bs-primary: var(--sage);
  --bs-primary-rgb: 127, 162, 144;

  /* ===========================================
     DESIGN SYSTEM TOKENS (Rulebook-compliant)
     =========================================== */
  
  /* Spacing Scale (8px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 80px;
  --space-11: 96px;
  --space-12: 128px;

  /* Typography Scale */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 32px;
  --text-4xl: 40px;
  --text-5xl: 48px;
  --text-6xl: 56px;

  /* Line Heights */
  --leading-tight: 1.15;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;

  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* Container */
  --container-max: 1200px;
  --container-wide: 1440px;

  /* Section Padding */
  --section-desktop: var(--space-11);  /* 96px */
  --section-tablet: var(--space-9);    /* 64px */
  --section-mobile: var(--space-8);    /* 48px */

  /* Button Heights */
  --btn-height-sm: 40px;
  --btn-height-md: 48px;
  --btn-height-lg: 56px;

  /* Nav Height */
  --nav-height: 80px;

  /* Focus Ring */
  --focus-ring: 0 0 0 3px rgba(127, 162, 144, 0.4);
}

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

body {
  background: radial-gradient(
      900px 450px at 15% -10%,
      rgba(239, 218, 184, 0.55),
      transparent 60%
    ),
    radial-gradient(
      900px 450px at 85% 0%,
      rgba(127, 162, 144, 0.35),
      transparent 60%
    ),
    var(--bg);
  min-height: 100vh;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

/* Override Bootstrap container max-width (rulebook: 1140-1200px) */
.container {
  max-width: var(--container-max);
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

@media (min-width: 768px) {
  .container {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }
}

@media (min-width: 1024px) {
  .container {
    padding-left: var(--space-7);
    padding-right: var(--space-7);
  }
}

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

a {
  color: inherit;
}

/* ===========================================
   Focus States (Accessibility - Rulebook 2.5)
   =========================================== */

*:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ===========================================
   Skip Link (Accessibility)
   =========================================== */

.skip-link {
  position: absolute;
  left: -999px;
  top: var(--space-2);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  z-index: 9999;
}

.skip-link:focus {
  left: var(--space-3);
}

/* ===========================================
   Topbar / Navigation (Rulebook 12.3: 72-88px)
   =========================================== */

.topbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  backdrop-filter: blur(10px);
  background: rgba(251, 250, 247, 0.85);
  border-bottom: 1px solid var(--border);
  min-height: var(--nav-height);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
}

.brand__mark {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: linear-gradient(140deg, var(--champagne), rgba(127, 162, 144, 0.8));
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.brand__mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand__title {
  display: flex;
  flex-direction: column;
}

.brand__title strong {
  font-size: var(--text-sm);
  letter-spacing: 0.3px;
}

.brand__title span {
  font-size: var(--text-xs);
  color: var(--muted);
}

.nav-custom {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.nav-custom a {
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--muted);
  transition: all 0.15s ease;
}

.nav-custom a:hover {
  color: var(--text);
  background: rgba(239, 218, 184, 0.2);
}

.nav-custom a[aria-current="page"] {
  color: var(--text);
  background: rgba(239, 218, 184, 0.35);
  border: 1px solid var(--border);
}

/* ===========================================
   Buttons (Rulebook Section 2)
   Height: 48px default, Radius: 12px, Hover: -1px lift
   =========================================== */

.btn {
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-5);
  min-height: var(--btn-height-md);
  font-weight: 600;
  transition: all 150ms ease-out;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.btn:focus-visible {
  box-shadow: var(--focus-ring);
}

.btn-sm {
  min-height: var(--btn-height-sm);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}

.btn-lg {
  min-height: var(--btn-height-lg);
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-lg);
}

.btn-primary, .btn--primary {
  background: linear-gradient(140deg, var(--sage), rgba(127, 162, 144, 0.7));
  border-color: rgba(127, 162, 144, 0.55);
  color: white;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

.btn-primary:hover, .btn--primary:hover {
  background: linear-gradient(140deg, var(--olive), rgba(127, 162, 144, 0.9));
  border-color: var(--olive);
  color: white;
}

.btn-outline-secondary, .btn--ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}

.btn-outline-secondary:hover, .btn--ghost:hover {
  background: rgba(239, 218, 184, 0.15);
  border-color: rgba(91, 105, 112, 0.3);
  color: var(--text);
}

/* ===========================================
   Page Banner (for interior pages)
   =========================================== */

.page-banner {
  background: linear-gradient(135deg, var(--champagne) 0%, rgba(239, 218, 184, 0.6) 100%);
  padding: var(--space-8) 0;
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .page-banner {
    padding: var(--space-9) 0;
  }
}

.page-banner h1 {
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
}

.page-banner p {
  color: var(--muted);
}

/* ===========================================
   Homepage Sections (Rulebook 1.2: 80-120px desktop)
   =========================================== */

.home-section {
  padding: var(--section-mobile) 0;
}

@media (min-width: 768px) {
  .home-section {
    padding: var(--section-tablet) 0;
  }
}

@media (min-width: 1024px) {
  .home-section {
    padding: var(--section-desktop) 0;
  }
}

.home-section--hero {
  padding-top: var(--space-5);
  padding-bottom: var(--section-mobile);
}

@media (min-width: 768px) {
  .home-section--hero {
    padding-top: var(--space-6);
    padding-bottom: var(--section-tablet);
  }
}

@media (min-width: 1024px) {
  .home-section--hero {
    padding-top: var(--space-7);
    padding-bottom: var(--section-desktop);
  }
}

.home-section--categories {
  background: linear-gradient(135deg, rgba(239, 218, 184, 0.25) 0%, rgba(127, 162, 144, 0.15) 100%);
}

.home-section--recommended {
  background: var(--surface);
}

.home-section--featured {
  background: linear-gradient(135deg, rgba(127, 162, 144, 0.15) 0%, rgba(239, 218, 184, 0.2) 100%);
}

.home-section--promo {
  background: var(--surface);
}

.home-section--features {
  background: linear-gradient(135deg, rgba(91, 105, 112, 0.08) 0%, rgba(119, 105, 60, 0.1) 100%);
}

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

.hero-banner {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.hero-banner img {
  width: 100%;
  height: auto;
  display: block;
}

.hero-banner__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-5);
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
  color: white;
  text-align: center;
}

.hero-banner__overlay h1 {
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.hero-banner__overlay p {
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

@media (min-width: 768px) {
  .hero-banner__overlay {
    padding: var(--space-8);
  }
  
  .hero-banner__overlay h1 {
    font-size: var(--text-5xl);
  }
}

.hero-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: linear-gradient(135deg, var(--champagne) 0%, rgba(239, 218, 184, 0.6) 100%);
}

.hero-card__media {
  height: 100%;
  min-height: 300px;
}

.hero-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.hero-card__content {
  padding: var(--space-6);
}

@media (min-width: 768px) {
  .hero-card__content {
    padding: var(--space-8);
  }
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  background: rgba(127, 162, 144, 0.18);
  border: 1px solid var(--border);
  font-size: var(--text-xs);
  color: var(--muted);
}

.stat-card {
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}

.stat-card__value {
  font-weight: 800;
  letter-spacing: 0.2px;
}

.stat-card__label {
  font-size: var(--text-xs);
  color: var(--muted);
}

/* ===========================================
   Category Pills
   =========================================== */

.category-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  transition: all 0.15s ease-out;
}

.category-pill:hover {
  background: rgba(239, 218, 184, 0.22);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}

.category-pill__icon {
  width: var(--space-6);
  height: var(--space-6);
  border-radius: var(--radius-full);
  display: grid;
  place-items: center;
  background: rgba(127, 162, 144, 0.18);
  border: 1px solid var(--border);
  font-weight: 900;
}

.category-pill__text {
  font-weight: 700;
  color: var(--text);
}

/* ===========================================
   Product Cards (Rulebook: 16px radius, subtle hover)
   =========================================== */

.product-card {
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 0.2s ease-out;
  height: 100%;
}

.product-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  border-color: transparent;
}

.product-card__link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.product-card__media {
  aspect-ratio: 1;
  background: rgba(91, 105, 112, 0.05);
  overflow: hidden;
}

.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease-out;
}

.product-card:hover .product-card__media img {
  transform: scale(1.03);
}

.product-card__body {
  padding: var(--space-4);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.product-card__title {
  font-weight: 700;
  font-size: var(--text-base);
  line-height: var(--leading-snug);
}

.product-card__desc {
  font-size: var(--text-sm);
  color: var(--muted);
}

.product-card__price {
  font-weight: 700;
  color: var(--olive);
}

/* ===========================================
   Promo Tiles
   =========================================== */

.promo-tile {
  position: relative;
  min-height: 220px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  border: 1px solid var(--border);
  background:
    linear-gradient(130deg, rgba(27, 31, 34, 0.35), rgba(27, 31, 34, 0.05)),
    var(--promo-bg);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  transition: all 0.2s ease-out;
}

.promo-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  border-color: transparent;
}

.promo-tile__content {
  padding: var(--space-5);
  color: white;
}

.promo-tile__kicker {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.85;
}

.promo-tile__title {
  font-size: var(--text-xl);
  font-weight: 700;
  margin: var(--space-1) 0;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}

.promo-tile__cta {
  display: inline-block;
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.15);
  font-weight: 600;
  font-size: var(--text-sm);
}

.promo-tile--soft {
  background:
    linear-gradient(130deg, rgba(127, 162, 144, 0.5), rgba(239, 218, 184, 0.3)),
    var(--promo-bg);
  background-size: cover;
  background-position: center;
}

/* ===========================================
   Feature Bar
   =========================================== */

.feature-card {
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.8);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  height: 100%;
}

.feature-card__title {
  font-weight: 800;
}

.feature-card__desc {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--muted);
}

/* ===========================================
   Product Detail Page
   =========================================== */

.gallery-main {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.9);
}

.gallery-main img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.product-info-card {
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-lg);
  height: 100%;
}

/* ===========================================
   Forms (Rulebook: 44-48px input height, 8-12px radius)
   =========================================== */

.form-select, .form-control {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  min-height: 48px;
}

.form-select:focus, .form-control:focus {
  border-color: var(--sage);
  box-shadow: var(--focus-ring);
  outline: none;
}

/* ===========================================
   Badges
   =========================================== */

.badge {
  font-weight: 600;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
}

.badge-category {
  background: rgba(127, 162, 144, 0.15);
  color: var(--slate);
  border: 1px solid var(--border);
}

/* ===========================================
   Banners
   =========================================== */

.banner {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: rgba(239, 218, 184, 0.25);
  border: 1px solid var(--border);
  font-size: var(--text-sm);
  color: var(--muted);
}

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

.footer {
  margin-top: auto;
  border-top: 1px solid var(--border);
  background: rgba(251, 250, 247, 0.7);
}

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

.toolbar {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

/* ===========================================
   Kicker / Section Titles
   =========================================== */

.kicker {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-decoration: none;
}

.kicker:hover {
  color: var(--text);
}

.section-title {
  font-weight: 700;
  letter-spacing: -0.2px;
}

/* ===========================================
   Utilities
   =========================================== */

.text-muted {
  color: var(--muted) !important;
}

.bg-section-alt {
  background: linear-gradient(135deg, rgba(239, 218, 184, 0.2) 0%, rgba(127, 162, 144, 0.1) 100%);
}

/* ===========================================
   Policy Pages (Rulebook §1.2 section spacing)
   =========================================== */

.page-section {
  padding-top: var(--section-mobile);     /* 48px */
  padding-bottom: var(--section-mobile);
}

@media (min-width: 768px) {
  .page-section {
    padding-top: var(--section-tablet);   /* 64px */
    padding-bottom: var(--section-tablet);
  }
}

@media (min-width: 1024px) {
  .page-section {
    padding-top: var(--section-desktop);  /* 96px */
    padding-bottom: var(--section-desktop);
  }
}

.policy-content {
  max-width: 780px;                       /* ~70 chars/line at 16px (Rulebook §1.2) */
  line-height: var(--leading-relaxed);    /* 1.6 */
  color: var(--text);
}

.policy-content h2 {
  font-size: var(--text-3xl);             /* 32px */
  font-weight: 700;
  margin: var(--space-8) 0 var(--space-4); /* 48 0 16 */
  line-height: var(--leading-snug);
}

.policy-content h3 {
  font-size: var(--text-2xl);             /* 24px */
  font-weight: 600;
  margin: var(--space-7) 0 var(--space-3); /* 40 0 12 */
  line-height: var(--leading-snug);
}

.policy-content p {
  margin-bottom: var(--space-5);          /* 24px */
}

.policy-content ul,
.policy-content ol {
  margin-bottom: var(--space-5);
  padding-left: var(--space-6);           /* 32px */
}

.policy-content li {
  margin-bottom: var(--space-2);          /* 8px */
}

.policy-content a {
  color: var(--sage);
  text-decoration: underline;
}

.policy-content a:hover {
  color: var(--olive);
}

/* ===========================================
   CUSTOM APPAREL — Section, Cards, Grid
   (Rulebook: 12-16px radius, 8px spacing,
    responsive 1/2/3-col grid, soft shadows)
   =========================================== */

/* --- Scroll offset for sticky nav --- */
#custom-apparel {
  scroll-margin-top: calc(var(--nav-height) + var(--space-4));
}

/* --- Home section background --- */
.home-section--custom-apparel {
  background: linear-gradient(135deg, rgba(127, 162, 144, 0.12) 0%, rgba(239, 218, 184, 0.18) 100%);
}

/* --- Section Header --- */
.ca-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-9);
}

.ca-header__title {
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  margin: var(--space-2) 0 var(--space-4);
}

.ca-header__sub {
  font-size: var(--text-lg);
  color: var(--muted);
  line-height: var(--leading-normal);
  max-width: 600px;
  margin: 0 auto;
}

@media (max-width: 639px) {
  .ca-header {
    margin-bottom: var(--space-7);
  }
  .ca-header__title {
    font-size: var(--text-3xl);
  }
  .ca-header__sub {
    font-size: var(--text-base);
  }
}

/* --- Category Card Grid (centered, 1-col → 2-col → 3-col) --- */
.ca-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  justify-content: center;
}

.ca-grid__col {
  flex: 0 0 100%;
  min-width: 0;
}

/* 2-col: each card = (100% - 1 gap) / 2 */
@media (min-width: 640px) {
  .ca-grid__col {
    flex: 0 0 calc(50% - var(--space-5) / 2);
  }
}

/* 3-col: each card = (100% - 2 gaps) / 3 */
@media (min-width: 1025px) {
  .ca-grid__col {
    flex: 0 0 calc(33.333% - var(--space-5) * 2 / 3);
  }
}

/* --- Category Card --- */
.ca-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  color: inherit;
  transition: transform 0.22s ease-out, box-shadow 0.22s ease-out, border-color 0.22s ease-out;
  height: 100%;
}

.ca-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(27, 31, 34, 0.12);
  border-color: transparent;
  text-decoration: none;
  color: inherit;
}

.ca-card:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

/* Card media */
.ca-card__media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: rgba(91, 105, 112, 0.06);
}

.ca-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease-out;
}

.ca-card:hover .ca-card__media img {
  transform: scale(1.04);
}

/* Overlay gradient for label readability */
.ca-card__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-5) var(--space-4) var(--space-3);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, transparent 100%);
  pointer-events: none;
}

.ca-card__cat-label {
  font-size: var(--text-sm);
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* Card body */
.ca-card__body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.ca-card__title {
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: var(--leading-snug);
  margin: 0;
}

.ca-card__desc {
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: var(--leading-normal);
  margin: 0;
  flex: 1;
}

.ca-card__btn {
  align-self: flex-start;
  margin-top: var(--space-2);
  pointer-events: none; /* parent <a> handles click */
}

.ca-card:hover .ca-card__btn {
  border-color: rgba(91, 105, 112, 0.35);
  background: rgba(239, 218, 184, 0.12);
}

/* --- Section-level CTA --- */
.ca-section-cta {
  text-align: center;
  padding-top: var(--space-9);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.ca-section-cta__text {
  font-size: var(--text-lg);
  color: var(--muted);
  margin: 0;
}

/* ===========================================
   CUSTOM APPAREL — Category Listing Page
   =========================================== */

/* Breadcrumb */
.ca-breadcrumb ol {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
}

.ca-breadcrumb li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--muted);
}

.ca-breadcrumb li:not(:last-child)::after {
  content: "›";
  color: var(--muted);
  opacity: 0.5;
}

.ca-breadcrumb a {
  text-decoration: none;
  color: var(--muted);
  transition: color 0.15s;
}

.ca-breadcrumb a:hover {
  color: var(--text);
}

.ca-breadcrumb li[aria-current="page"] {
  color: var(--text);
  font-weight: 600;
}

/* Filters toolbar */
.ca-filters {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
  align-items: flex-end;
}

.ca-filters__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.ca-filters__label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 600;
}

.ca-filters__select {
  min-width: 160px;
}

/* Listing grid (centered, matches homepage grid breakpoints) */
.ca-listing-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  justify-content: center;
}

.ca-listing-col {
  flex: 0 0 100%;
  min-width: 0;
}

/* 2-col: each card = (100% - 1 gap) / 2 */
@media (min-width: 640px) {
  .ca-listing-col {
    flex: 0 0 calc(50% - var(--space-5) / 2);
  }
}

/* 3-col: each card = (100% - 2 gaps) / 3 */
@media (min-width: 1025px) {
  .ca-listing-col {
    flex: 0 0 calc(33.333% - var(--space-5) * 2 / 3);
  }
}

/* Item card (used in listings + case study index) */
.ca-item-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  color: inherit;
  transition: transform 0.22s ease-out, box-shadow 0.22s ease-out, border-color 0.22s ease-out;
  height: 100%;
}

.ca-item-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(27, 31, 34, 0.12);
  border-color: transparent;
  text-decoration: none;
  color: inherit;
}

.ca-item-card:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

.ca-item-card__media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: rgba(91, 105, 112, 0.06);
}

.ca-item-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease-out;
}

.ca-item-card:hover .ca-item-card__media img {
  transform: scale(1.04);
}

.ca-item-card__badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
}

.ca-item-card__body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.ca-item-card__title {
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: var(--leading-snug);
  margin: 0;
}

.ca-item-card__meta {
  font-size: var(--text-xs);
  color: var(--olive);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}

.ca-item-card__desc {
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: var(--leading-normal);
  margin: 0;
  flex: 1;
}

.ca-item-card__btn {
  align-self: flex-start;
  margin-top: var(--space-2);
  pointer-events: none;
}

.ca-item-card:hover .ca-item-card__btn {
  border-color: rgba(91, 105, 112, 0.35);
  background: rgba(239, 218, 184, 0.12);
}

/* ===========================================
   CASE STUDY — Index Page Hero
   =========================================== */

.cs-idx__hero {
  padding: var(--space-10) 0 var(--space-7);
  text-align: center;
}

.cs-idx__headline {
  font-size: var(--text-4xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 var(--space-3);
}

.cs-idx__sub {
  font-size: var(--text-lg);
  color: var(--muted);
  max-width: 580px;
  margin: 0 auto var(--space-5);
  line-height: var(--leading-relaxed);
}

.cs-idx__trust {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-6);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4) var(--space-6);
  font-size: var(--text-sm);
  color: var(--muted);
}

.cs-idx__trust li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Filter chips */
.cs-idx__filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

.cs-idx__chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s ease;
}

.cs-idx__chip:hover {
  border-color: var(--sage);
  color: var(--text);
}

.cs-idx__chip--active {
  background: var(--sage);
  color: #fff;
  border-color: var(--sage);
}

/* ===========================================
   CASE STUDY — Index Cards Grid
   =========================================== */

.cs-idx__grid-section {
  padding: 0 0 var(--section-desktop);
}

.cs-idx__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

@media (max-width: 991px) {
  .cs-idx__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 639px) {
  .cs-idx__grid { grid-template-columns: 1fr; }
  .cs-idx__headline { font-size: var(--text-3xl); }
}

/* Index card */
.cs-idx-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.cs-idx-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.cs-idx-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.cs-idx-card__media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.cs-idx-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.cs-idx-card:hover .cs-idx-card__media img {
  transform: scale(1.04);
}

.cs-idx-card__badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  padding: var(--space-1) var(--space-3);
  background: rgba(255, 255, 255, 0.92);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--olive);
  backdrop-filter: blur(6px);
}

.cs-idx-card__body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.cs-idx-card__title {
  font-size: var(--text-lg);
  font-weight: 700;
  margin: 0 0 var(--space-1);
}

.cs-idx-card__client {
  font-size: var(--text-sm);
  color: var(--muted);
  margin: 0 0 var(--space-3);
}

.cs-idx-card__headline {
  font-size: var(--text-sm);
  color: var(--text);
  line-height: var(--leading-normal);
  margin: 0 0 var(--space-4);
  flex: 1;
}

.cs-idx-card__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

.cs-idx-card__stat {
  font-size: var(--text-xs);
  color: var(--muted);
}

.cs-idx-card__stat strong {
  color: var(--text);
  font-weight: 700;
}

.cs-idx-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--sage);
  transition: gap 0.2s ease;
}

.cs-idx-card:hover .cs-idx-card__cta {
  gap: var(--space-3);
}

/* ===========================================
   CASE STUDY DETAIL — Shared Section Tokens
   =========================================== */

.cs-section-eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--sage);
  margin-bottom: var(--space-3);
}

.cs-section-heading {
  font-size: var(--text-3xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 var(--space-5);
}

.cs-section-heading--center {
  text-align: center;
}

/* ===========================================
   CASE STUDY DETAIL — 1. Hero (split layout)
   =========================================== */

.cs-hero {
  padding: var(--space-8) 0 var(--space-10);
  overflow: hidden;
}

.cs-hero .ca-breadcrumb {
  margin-bottom: var(--space-6);
}

.cs-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-9);
  align-items: center;
}

.cs-hero__badge {
  display: inline-block;
  padding: var(--space-1) var(--space-4);
  background: rgba(127, 162, 144, 0.12);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sage);
  margin-bottom: var(--space-4);
}

.cs-hero__headline {
  font-size: var(--text-4xl);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: var(--leading-tight);
  color: var(--text);
  margin: 0 0 var(--space-4);
}

.cs-hero__subheadline {
  font-size: var(--text-lg);
  color: var(--muted);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-6);
}

.cs-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.cs-hero__trust {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cs-hero__trust li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--muted);
}

.cs-hero__visual {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

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

@media (max-width: 991px) {
  .cs-hero__grid {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }
  .cs-hero__visual { order: -1; }
  .cs-hero__headline { font-size: var(--text-3xl); }
}

@media (max-width: 639px) {
  .cs-hero { padding: var(--space-6) 0 var(--space-7); }
  .cs-hero__headline { font-size: var(--text-2xl); }
  .cs-hero__actions { flex-direction: column; }
}

/* ===========================================
   CASE STUDY DETAIL — 2. Client Snapshot Bar
   =========================================== */

.cs-snap {
  padding: var(--space-7) 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.cs-snap__bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-5) var(--space-8);
}

.cs-snap__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 120px;
}

.cs-snap__value {
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--text);
  line-height: 1;
  margin-bottom: var(--space-1);
}

.cs-snap__label {
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

@media (max-width: 639px) {
  .cs-snap__bar {
    gap: var(--space-4);
  }
  .cs-snap__item {
    min-width: 100px;
    flex: 1 0 calc(50% - var(--space-4));
  }
}

/* ===========================================
   CASE STUDY DETAIL — 3. The Challenge
   =========================================== */

.cs-challenge {
  padding: var(--section-desktop) 0;
}

.cs-challenge__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-9);
  align-items: center;
}

.cs-challenge__text {
  font-size: var(--text-base);
  color: var(--text);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-5);
}

.cs-challenge__bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cs-challenge__bullets li {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: var(--leading-normal);
}

.cs-challenge__bullets li::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sage);
  margin-top: 7px;
}

.cs-challenge__visual {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

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

@media (max-width: 991px) {
  .cs-challenge__grid {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }
  .cs-challenge__visual { order: -1; }
}

@media (max-width: 639px) {
  .cs-challenge { padding: var(--section-mobile) 0; }
}

/* ===========================================
   CASE STUDY DETAIL — 4. Our Approach (stepper)
   =========================================== */

.cs-process {
  padding: var(--section-desktop) 0;
  background: linear-gradient(180deg, rgba(239, 218, 184, 0.08) 0%, rgba(127, 162, 144, 0.06) 100%);
}

.cs-process .cs-section-heading {
  margin-bottom: var(--space-8);
}

.cs-process__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  position: relative;
}

/* Connector line between steps */
.cs-process__grid::before {
  content: "";
  position: absolute;
  top: 36px;
  left: calc(12.5% + 24px);
  right: calc(12.5% + 24px);
  height: 2px;
  background: var(--border);
  z-index: 0;
}

.cs-process__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
}

.cs-process__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--sage);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sage);
  margin-bottom: var(--space-4);
  flex-shrink: 0;
}

.cs-process__num {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sage);
  margin-bottom: var(--space-2);
}

.cs-process__title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text);
  margin: 0 0 var(--space-2);
}

.cs-process__desc {
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: var(--leading-normal);
  margin: 0;
}

@media (max-width: 991px) {
  .cs-process__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .cs-process__grid::before { display: none; }
}

@media (max-width: 639px) {
  .cs-process { padding: var(--section-mobile) 0; }
  .cs-process__grid {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }
  .cs-process__step {
    flex-direction: row;
    text-align: left;
    gap: var(--space-4);
  }
  .cs-process__icon { margin-bottom: 0; }
}

/* ===========================================
   CASE STUDY DETAIL — 5. The Result
   =========================================== */

.cs-result {
  padding: var(--section-desktop) 0;
  scroll-margin-top: calc(80px + var(--space-4));
}

.cs-result__metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  margin-bottom: var(--space-9);
}

.cs-result__metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-6) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cs-result__metric:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.cs-result__number {
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--sage);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.cs-result__label {
  font-size: var(--text-sm);
  color: var(--muted);
  font-weight: 500;
}

/* Testimonial inside results */
.cs-result__testimonial {
  max-width: 720px;
  margin: 0 auto;
  background: linear-gradient(135deg, rgba(239, 218, 184, 0.18) 0%, rgba(127, 162, 144, 0.1) 100%);
  border-left: 4px solid var(--sage);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-7) var(--space-7);
}

.cs-result__quote {
  font-size: var(--text-lg);
  font-style: italic;
  line-height: var(--leading-relaxed);
  color: var(--text);
  margin: 0 0 var(--space-4);
}

.cs-result__author {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--text-sm);
}

.cs-result__author strong { color: var(--text); }
.cs-result__author span { color: var(--muted); }

@media (max-width: 991px) {
  .cs-result__metrics { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 639px) {
  .cs-result { padding: var(--section-mobile) 0; }
  .cs-result__metrics { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .cs-result__number { font-size: var(--text-2xl); }
  .cs-result__testimonial { padding: var(--space-5); }
}

/* ===========================================
   CASE STUDY DETAIL — 6. Product Gallery
   =========================================== */

.cs-gallery {
  padding: var(--section-desktop) 0;
  background: linear-gradient(180deg, rgba(239, 218, 184, 0.06) 0%, transparent 100%);
}

.cs-gallery .cs-section-heading {
  margin-bottom: var(--space-8);
}

.cs-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.cs-gallery__item {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  margin: 0;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.cs-gallery__item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

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

.cs-gallery__caption {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--muted);
  text-align: center;
  border-top: 1px solid var(--border);
}

@media (max-width: 991px) {
  .cs-gallery__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 639px) {
  .cs-gallery { padding: var(--section-mobile) 0; }
  .cs-gallery__grid { grid-template-columns: 1fr; }
}

/* ===========================================
   CASE STUDY DETAIL — 7. Specs Table
   =========================================== */

.cs-specs {
  padding: var(--section-desktop) 0;
}

.cs-specs__card {
  max-width: 720px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  box-shadow: var(--shadow-sm);
}

.cs-specs__card .cs-section-heading {
  margin-bottom: var(--space-6);
}

.cs-specs__table {
  width: 100%;
  border-collapse: collapse;
}

.cs-specs__table tr {
  border-bottom: 1px solid var(--border);
}

.cs-specs__table tr:last-child {
  border-bottom: none;
}

.cs-specs__table th,
.cs-specs__table td {
  padding: var(--space-4) 0;
  font-size: var(--text-sm);
  vertical-align: top;
}

.cs-specs__table th {
  font-weight: 600;
  color: var(--text);
  width: 35%;
  text-align: left;
  padding-right: var(--space-4);
}

.cs-specs__table td {
  color: var(--muted);
  line-height: var(--leading-normal);
}

@media (max-width: 639px) {
  .cs-specs { padding: var(--section-mobile) 0; }
  .cs-specs__card { padding: var(--space-5); }
  .cs-specs__table th { width: 40%; }
}

/* ===========================================
   CASE STUDY — CTA Close Section (shared)
   =========================================== */

.cs-cta,
.cs-idx__cta {
  padding: var(--section-desktop) 0;
}

.cs-cta__card {
  text-align: center;
  background: linear-gradient(135deg, rgba(239, 218, 184, 0.2) 0%, rgba(127, 162, 144, 0.12) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-10) var(--space-7);
}

.cs-cta__headline {
  font-size: var(--text-3xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 var(--space-3);
}

.cs-cta__sub {
  font-size: var(--text-lg);
  color: var(--muted);
  max-width: 520px;
  margin: 0 auto var(--space-6);
  line-height: var(--leading-relaxed);
}

.cs-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.cs-cta__micro {
  font-size: var(--text-xs);
  color: var(--muted);
  margin: 0;
}

@media (max-width: 639px) {
  .cs-cta,
  .cs-idx__cta { padding: var(--section-mobile) 0; }
  .cs-cta__card { padding: var(--space-7) var(--space-5); }
  .cs-cta__headline { font-size: var(--text-2xl); }
  .cs-cta__actions { flex-direction: column; align-items: center; }
}

/* ===========================================
   CASE STUDY DETAIL — 9. FAQ Accordion
   =========================================== */

.cs-faq {
  padding: var(--section-desktop) 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.cs-faq__layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-9);
  align-items: start;
}

.cs-faq__intro-text {
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: var(--leading-relaxed);
  margin: 0;
}

.cs-faq__list {
  display: flex;
  flex-direction: column;
}

.cs-faq__item {
  border-bottom: 1px solid var(--border);
}

.cs-faq__item:first-child {
  border-top: 1px solid var(--border);
}

.cs-faq__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--text);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: var(--leading-snug);
  transition: color 0.15s ease;
}

.cs-faq__trigger:hover {
  color: var(--sage);
}

.cs-faq__trigger:focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.cs-faq__chevron {
  flex-shrink: 0;
  transition: transform 0.25s ease;
  color: var(--muted);
}

.cs-faq__trigger[aria-expanded="true"] .cs-faq__chevron {
  transform: rotate(180deg);
  color: var(--sage);
}

.cs-faq__panel {
  overflow: hidden;
}

.cs-faq__panel p {
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: var(--leading-relaxed);
  margin: 0;
  padding: 0 0 var(--space-5);
}

@media (max-width: 991px) {
  .cs-faq__layout {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

@media (max-width: 639px) {
  .cs-faq { padding: var(--section-mobile) 0; }
}

/* ===========================================
   CUSTOM APPAREL — Inquiry Modal
   (Accessible: focus trap, ESC, ARIA, scroll lock)
   =========================================== */

.ca-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease-out, visibility 0.25s ease-out;
}

.ca-modal--open {
  opacity: 1;
  visibility: visible;
}

.ca-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(27, 31, 34, 0.5);
  backdrop-filter: blur(4px);
  cursor: pointer;
}

.ca-modal__dialog {
  position: relative;
  z-index: 1;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(27, 31, 34, 0.2);
  width: 90%;
  max-width: 560px;
  max-height: 85vh;
  overflow-y: auto;
  transform: translateY(12px);
  transition: transform 0.25s ease-out;
}

.ca-modal--open .ca-modal__dialog {
  transform: translateY(0);
}

.ca-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border);
}

.ca-modal__title {
  font-size: var(--text-xl);
  font-weight: 700;
  margin: 0;
}

.ca-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  color: var(--muted);
  transition: background 0.15s, color 0.15s;
}

.ca-modal__close:hover {
  background: rgba(239, 218, 184, 0.2);
  color: var(--text);
}

.ca-modal__close:focus-visible {
  box-shadow: var(--focus-ring);
}

.ca-modal__body {
  padding: var(--space-6);
}

/* Body scroll lock when modal is open */
.ca-body-locked {
  overflow: hidden;
}

/* ===========================================
   CUSTOM APPAREL — Inquiry Fallback Page
   =========================================== */

.ca-inquire-container {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
}

.ca-inquire-placeholder {
  text-align: center;
  color: var(--muted);
  line-height: var(--leading-relaxed);
}

.ca-inquire-placeholder a {
  color: var(--sage);
  text-decoration: underline;
}

.ca-inquire-placeholder a:hover {
  color: var(--olive);
}

/* ===========================================
   CUSTOM APPAREL — Placeholder Images
   When images are missing / not yet uploaded,
   show category name on a branded gradient.
   =========================================== */

.ca-card__media img[src=""],
.ca-card__media img:not([src]),
.ca-item-card__media img[src=""],
.ca-item-card__media img:not([src]) {
  display: none;
}

/* If image fails to load, show overlay label as only visual */
.ca-card__media:has(img[src=""]) .ca-card__overlay,
.ca-card__media:has(img:not([src])) .ca-card__overlay {
  background: linear-gradient(135deg, var(--champagne) 0%, rgba(127, 162, 144, 0.6) 100%);
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: var(--space-5);
}

.ca-card__media:has(img[src=""]) .ca-card__cat-label,
.ca-card__media:has(img:not([src])) .ca-card__cat-label {
  font-size: var(--text-lg);
  color: var(--text);
  text-shadow: none;
}

/* ===========================================
   CUSTOM APPAREL — Inquiry Submitted Status Page
   =========================================== */

.inquiry-submitted__body {
  max-width: 640px;
  text-align: center;
}

.inquiry-submitted__lead {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--text);
  margin: 0 0 var(--space-4);
  line-height: var(--leading-snug);
}

.inquiry-submitted__text {
  font-size: var(--text-base);
  color: var(--muted);
  margin: 0 0 var(--space-6);
  line-height: var(--leading-relaxed);
}

.inquiry-submitted__text a {
  color: var(--sage);
  text-decoration: underline;
}

.inquiry-submitted__text a:hover {
  color: var(--olive);
}

.inquiry-submitted__actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

/* ===========================================
   CUSTOM APPAREL — Inquiry Form
   Rulebook-aligned: 8pt scale, 48px inputs,
   12px radius, full focus ring, left-aligned.
   No card treatment — .ca-inquire-container
   and .ca-modal__dialog handle that.
   =========================================== */

/* Form layout */
.ca-inquiry-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5); /* 24px between fields */
}

/* Header block */
.ca-inquiry-form__heading {
  font-size: var(--text-2xl); /* 24px */
  font-weight: 700;
  line-height: var(--leading-snug);
  margin: 0;
  color: var(--text);
}

.ca-inquiry-form__subtext {
  font-size: var(--text-sm);
  color: var(--muted);
  margin: var(--space-2) 0 0;
  line-height: var(--leading-normal);
}

/* Field wrapper: label → control → error */
.ca-inquiry-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2); /* 8px between each child */
}

.ca-inquiry-form__field > label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  line-height: var(--leading-snug);
}

/* Required marker */
.ca-inquiry-form__req {
  color: #c0392b;
  font-weight: 700;
}

/* Text inputs */
.ca-inquiry-form input[type="text"],
.ca-inquiry-form input[type="email"],
.ca-inquiry-form input[type="tel"] {
  height: 48px;
  font-size: var(--text-base);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  padding: 0 var(--space-4);
  background: var(--surface);
  color: var(--text);
  width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
}

/* Textarea */
.ca-inquiry-form textarea {
  font-size: var(--text-base);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  color: var(--text);
  width: 100%;
  min-height: 120px;
  resize: vertical;
  transition: border-color 0.2s, box-shadow 0.2s;
}

/* Focus states — full ring to match site-wide pattern */
.ca-inquiry-form input[type="text"]:focus,
.ca-inquiry-form input[type="email"]:focus,
.ca-inquiry-form input[type="tel"]:focus,
.ca-inquiry-form textarea:focus {
  outline: none;
  border-color: var(--sage);
  box-shadow: var(--focus-ring);
}

/* Segmented radio group (Inquiry Type) */
.ca-inquiry-form__segmented {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

/* Visually hide radio; label is the interactive surface */
.ca-inquiry-form__segmented input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}

.ca-inquiry-form__seg-label {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  line-height: var(--leading-snug);
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.ca-inquiry-form__seg-label:hover {
  border-color: var(--sage);
  color: var(--text);
  background: rgba(127, 162, 144, 0.05);
}

.ca-inquiry-form__segmented input[type="radio"]:checked + .ca-inquiry-form__seg-label {
  border-color: var(--sage);
  color: var(--sage);
  background: rgba(127, 162, 144, 0.08);
  font-weight: 600;
}

.ca-inquiry-form__segmented input[type="radio"]:focus-visible + .ca-inquiry-form__seg-label {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Checkbox product options — chip-style pairs */
.ca-inquiry-form__checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.ca-inquiry-form__check-opt {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  line-height: var(--leading-snug);
  transition: border-color 0.2s, color 0.2s, background 0.2s;
  user-select: none;
}

.ca-inquiry-form__check-opt:hover {
  border-color: var(--sage);
  color: var(--text);
  background: rgba(127, 162, 144, 0.05);
}

.ca-inquiry-form__check-opt input[type="checkbox"] {
  accent-color: var(--sage);
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
  flex-shrink: 0;
}

.ca-inquiry-form__check-opt:has(input:checked) {
  border-color: var(--sage);
  color: var(--sage);
  background: rgba(127, 162, 144, 0.08);
  font-weight: 600;
}

/* Consent row */
.ca-inquiry-form__consent {
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
}

.ca-inquiry-form__consent input[type="checkbox"] {
  accent-color: var(--sage);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  cursor: pointer;
}

.ca-inquiry-form__consent > label {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--muted);
  cursor: pointer;
}

/* Error text */
.ca-inquiry-form__error {
  font-size: var(--text-xs);
  color: #c0392b;
  min-height: 16px;
  line-height: var(--leading-normal);
}

/* Submit */
.ca-inquiry-form__actions {
  margin-top: var(--space-2);
}

.ca-inquiry-form__submit {
  width: 100%;
  height: 48px;
  font-size: var(--text-base);
  font-weight: 700;
  border-radius: var(--radius-md);
  border: none;
  padding: 0 var(--space-6);
  letter-spacing: 0.01em;
}

.ca-inquiry-form__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Success / error banner */
.ca-inquiry-form__banner {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: var(--leading-normal);
  text-align: center;
}

.ca-inquiry-form__banner--success {
  background: rgba(127, 162, 144, 0.12);
  color: var(--sage);
  border: 1px solid var(--sage);
}

.ca-inquiry-form__banner--error {
  background: rgba(192, 57, 43, 0.08);
  color: #c0392b;
  border: 1px solid #c0392b;
}

@media (max-width: 639px) {
  .ca-inquiry-form__segmented {
    flex-direction: column;
  }
}