/* ============================================================================
   CHALLOTTE & SON'S MARKETING — COMPLETE CSS CLASS SPECIFICATION
   challotteandsons.com  ·  Version 1.0  ·  May 2026
   ============================================================================

   HANDOFF DOCUMENT FOR CLAUDE CODE
   This file is the authoritative CSS specification for the Challotte & Sons
   WoodMart/WordPress build. Every reusable component is defined here with:
     - Class name
     - Purpose (comment block)
     - All key CSS properties
     - Hover/focus/active states
     - Mobile-first responsive rules

   NAMING CONVENTION
   Prefix:    cs-      (Challotte Sons)
   Elements:  cs-component__element
   Modifiers: cs-component--variant
   States:    is-active, is-open, is-loading  (JS-toggled state classes)

   METHODOLOGY
   Mobile-first. Base styles target mobile (< 640px). Media queries add
   tablet (≥ 640px), desktop (≥ 1024px), and wide (≥ 1280px) overrides.

   BREAKPOINTS
   --bp-sm:  640px   (tablet portrait)
   --bp-md:  1024px  (desktop)
   --bp-lg:  1280px  (wide desktop)
   --bp-xl:  1440px  (max-width container)

   FONT LOADING
   Both fonts are self-hosted via the Fonts Plugin (WordPress plugin).
   Do NOT use Google Fonts CDN — GDPR compliance requirement.
   @font-face declarations are managed by the Fonts Plugin; do not add here.

   ============================================================================ */


/* ============================================================================
   SECTION 01 — DESIGN TOKENS (CSS CUSTOM PROPERTIES)
   ============================================================================ */

:root {

  /* ── Brand Colours ─────────────────────────────────────────────────────── */
  --cs-navy:        #1A2B4E;   /* Estate Navy — primary: headings, header, footer, shield */
  --cs-gold:        #C4972A;   /* Heritage Gold — accent: CTAs, borders, dividers, badges */
  --cs-gold-lt:     #D4AA4A;   /* Champagne Gold — secondary: hover states, secondary CTAs */
  --cs-gold-pale:   #F0E6C8;   /* Pale Gold — subtle backgrounds, card accents */
  --cs-white:       #FFFFFF;   /* Clean White — backgrounds, logo field */
  --cs-cream:       #FAF7F2;   /* Warm Cream — page background, section alternates */
  --cs-ivory:       #F2EDE4;   /* Ivory — card backgrounds, input fills */

  /* ── Text Colours ──────────────────────────────────────────────────────── */
  --cs-text-dark:   #1E1E1E;   /* Near-black — primary body text */
  --cs-text-mid:    #444444;   /* Dark charcoal — secondary text, subheadings */
  --cs-text-muted:  #777777;   /* Mid-grey — captions, metadata, placeholder */
  --cs-text-light:  #AAAAAA;   /* Light grey — disabled states, decorative */

  /* ── Semantic Colours ──────────────────────────────────────────────────── */
  --cs-success:     #1A5C3A;   /* Success green — verified badges, free shipping */
  --cs-success-bg:  #EAF5EE;   /* Success background */
  --cs-error:       #8B1A1A;   /* Error/warning red */
  --cs-error-bg:    #FFF0F0;   /* Error background */
  --cs-new:         #1A3A7E;   /* 'New' badge blue */
  --cs-new-bg:      #EAF0FB;   /* 'New' badge background */
  --cs-hot:         #8B3A00;   /* 'Hot' badge amber */
  --cs-hot-bg:      #FFF3E0;   /* 'Hot' badge background */
  --cs-sale:        #8B1A1A;   /* Sale badge red */
  --cs-sale-bg:     #FFF0F0;   /* Sale badge background */

  /* ── Border Colours ────────────────────────────────────────────────────── */
  --cs-border:      #D9C9A8;   /* Default border — warm gold-toned */
  --cs-border-mid:  #CCCCCC;   /* Mid border — form elements */
  --cs-border-dark: #A08050;   /* Dark border — emphasis, active states */

  /* ── Typography ────────────────────────────────────────────────────────── */
  --cs-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --cs-font-body:    'EB Garamond', Georgia, 'Times New Roman', serif;
  --cs-font-mono:    'Courier New', Courier, monospace;

  /* ── Font Sizes (mobile base) ──────────────────────────────────────────── */
  --cs-text-xs:     0.75rem;   /*  12px */
  --cs-text-sm:     0.875rem;  /*  14px */
  --cs-text-base:   1rem;      /*  16px */
  --cs-text-md:     1.125rem;  /*  18px */
  --cs-text-lg:     1.25rem;   /*  20px */
  --cs-text-xl:     1.5rem;    /*  24px */
  --cs-text-2xl:    1.875rem;  /*  30px */
  --cs-text-3xl:    2.25rem;   /*  36px */
  --cs-text-4xl:    3rem;      /*  48px */
  --cs-text-5xl:    3.75rem;   /*  60px */

  /* ── Line Heights ──────────────────────────────────────────────────────── */
  --cs-leading-tight:  1.2;
  --cs-leading-snug:   1.35;
  --cs-leading-normal: 1.6;
  --cs-leading-loose:  1.8;

  /* ── Letter Spacing ────────────────────────────────────────────────────── */
  --cs-tracking-tight:  -0.02em;
  --cs-tracking-normal:  0;
  --cs-tracking-wide:    0.05em;
  --cs-tracking-wider:   0.1em;
  --cs-tracking-widest:  0.2em;

  /* ── Spacing Scale ──────────────────────────────────────────────────────── */
  --cs-space-1:   0.25rem;   /*  4px */
  --cs-space-2:   0.5rem;    /*  8px */
  --cs-space-3:   0.75rem;   /* 12px */
  --cs-space-4:   1rem;      /* 16px */
  --cs-space-5:   1.25rem;   /* 20px */
  --cs-space-6:   1.5rem;    /* 24px */
  --cs-space-8:   2rem;      /* 32px */
  --cs-space-10:  2.5rem;    /* 40px */
  --cs-space-12:  3rem;      /* 48px */
  --cs-space-16:  4rem;      /* 64px */
  --cs-space-20:  5rem;      /* 80px */
  --cs-space-24:  6rem;      /* 96px */

  /* ── Layout ─────────────────────────────────────────────────────────────── */
  --cs-container-max:  1380px;
  --cs-container-pad:  var(--cs-space-4);   /* 16px mobile gutter */
  --cs-grid-gap:       var(--cs-space-6);   /* 24px default grid gap */

  /* ── Radius ─────────────────────────────────────────────────────────────── */
  --cs-radius-sm:   2px;
  --cs-radius:      4px;
  --cs-radius-md:   6px;
  --cs-radius-lg:   12px;
  --cs-radius-full: 9999px;

  /* ── Shadows ─────────────────────────────────────────────────────────────── */
  --cs-shadow-sm:  0 1px 3px rgba(26,43,78,0.08);
  --cs-shadow:     0 4px 16px rgba(26,43,78,0.10);
  --cs-shadow-md:  0 8px 32px rgba(26,43,78,0.14);
  --cs-shadow-lg:  0 16px 48px rgba(26,43,78,0.18);
  --cs-shadow-gold:0 4px 20px rgba(196,151,42,0.25);

  /* ── Transitions ─────────────────────────────────────────────────────────── */
  --cs-ease:        cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --cs-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --cs-duration-fast:   150ms;
  --cs-duration:        250ms;
  --cs-duration-slow:   400ms;

  /* ── Z-Index Scale ───────────────────────────────────────────────────────── */
  --cs-z-base:    1;
  --cs-z-card:    10;
  --cs-z-sticky:  100;
  --cs-z-header:  200;
  --cs-z-mega:    300;
  --cs-z-modal:   400;
  --cs-z-toast:   500;
}


/* ============================================================================
   SECTION 02 — RESET & BASE
   ============================================================================ */

/*
   Purpose: Normalise browser defaults. Scoped to .cs- elements to avoid
   conflicting with WoodMart's base reset.
*/

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

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

body {
  font-family: var(--cs-font-body);
  font-size: var(--cs-text-base);
  line-height: var(--cs-leading-normal);
  color: var(--cs-text-dark);
  background-color: var(--cs-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

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

button {
  cursor: pointer;
  font-family: inherit;
  border: none;
  background: none;
  padding: 0;
}

ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
}


/* ============================================================================
   SECTION 03 — TYPOGRAPHY
   ============================================================================ */

/* ── Headings
   Purpose: All heading levels use Playfair Display. Heritage-appropriate
   serif that distinguishes this brand from generic ecommerce.
   Usage:   Apply to h1–h6 elements or any element requiring heading treatment.
   ─────────────────────────────────────────────────────────────────────────── */

.cs-h1 {
  font-family: var(--cs-font-display);
  font-size: var(--cs-text-2xl);          /* 30px mobile */
  font-weight: 700;
  line-height: var(--cs-leading-tight);
  color: var(--cs-navy);
  letter-spacing: var(--cs-tracking-tight);
}
@media (min-width: 640px)  { .cs-h1 { font-size: var(--cs-text-3xl); } }   /* 36px */
@media (min-width: 1024px) { .cs-h1 { font-size: var(--cs-text-4xl); } }   /* 48px */

.cs-h2 {
  font-family: var(--cs-font-display);
  font-size: var(--cs-text-xl);           /* 24px mobile */
  font-weight: 700;
  line-height: var(--cs-leading-snug);
  color: var(--cs-navy);
  letter-spacing: var(--cs-tracking-tight);
}
@media (min-width: 640px)  { .cs-h2 { font-size: var(--cs-text-2xl); } }   /* 30px */
@media (min-width: 1024px) { .cs-h2 { font-size: var(--cs-text-3xl); } }   /* 36px */

.cs-h3 {
  font-family: var(--cs-font-display);
  font-size: var(--cs-text-lg);           /* 20px mobile */
  font-weight: 600;
  line-height: var(--cs-leading-snug);
  color: var(--cs-navy);
}
@media (min-width: 1024px) { .cs-h3 { font-size: var(--cs-text-xl); } }    /* 24px */

.cs-h4 {
  font-family: var(--cs-font-display);
  font-size: var(--cs-text-md);           /* 18px mobile */
  font-weight: 600;
  line-height: var(--cs-leading-snug);
  color: var(--cs-navy);
}
@media (min-width: 1024px) { .cs-h4 { font-size: var(--cs-text-lg); } }    /* 20px */

.cs-h5,
.cs-h6 {
  font-family: var(--cs-font-display);
  font-size: var(--cs-text-base);
  font-weight: 600;
  line-height: var(--cs-leading-snug);
  color: var(--cs-navy);
}

/* ── Hero Display
   Purpose: Maximum-scale headline for hero slides and major page banners.
   Usage:   .cs-hero-content h1 or apply directly to hero headline elements.
   ─────────────────────────────────────────────────────────────────────────── */

.cs-display {
  font-family: var(--cs-font-display);
  font-size: var(--cs-text-3xl);          /* 36px mobile */
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: var(--cs-tracking-tight);
  color: var(--cs-white);
}
@media (min-width: 640px)  { .cs-display { font-size: var(--cs-text-4xl); } }   /* 48px */
@media (min-width: 1024px) { .cs-display { font-size: var(--cs-text-5xl); } }   /* 60px */

/* ── Section Label
   Purpose: All-caps spaced label above section headings. Heritage editorial
   device used to divide content zones without visual weight.
   Usage:   <span class="cs-section-label">OUR COLLECTION</span>
   Key:     Gold underline rule rendered via border-bottom.
   ─────────────────────────────────────────────────────────────────────────── */

.cs-section-label {
  display: inline-block;
  font-family: var(--cs-font-body);
  font-size: var(--cs-text-xs);
  font-weight: 500;
  letter-spacing: var(--cs-tracking-widest);
  text-transform: uppercase;
  color: var(--cs-gold);
  padding-bottom: var(--cs-space-2);
  border-bottom: 1px solid var(--cs-gold);
  margin-bottom: var(--cs-space-4);
}

/* ── Eyebrow Text
   Purpose: Small label that sits above a headline. Lighter than section-label.
   Usage:   Above hero headlines, card category labels, navigation sub-labels.
   ─────────────────────────────────────────────────────────────────────────── */

.cs-eyebrow {
  font-family: var(--cs-font-body);
  font-size: var(--cs-text-xs);
  font-weight: 400;
  letter-spacing: var(--cs-tracking-wider);
  text-transform: uppercase;
  color: var(--cs-gold-lt);
}

/* ── Body Text
   Purpose: Default paragraph text using EB Garamond for heritage readability.
   ─────────────────────────────────────────────────────────────────────────── */

.cs-body {
  font-family: var(--cs-font-body);
  font-size: var(--cs-text-base);
  line-height: var(--cs-leading-normal);
  color: var(--cs-text-dark);
}

.cs-body--large {
  font-size: var(--cs-text-md);
  line-height: var(--cs-leading-loose);
}

.cs-body--small {
  font-size: var(--cs-text-sm);
  color: var(--cs-text-mid);
}

/* ── Caption / Meta
   Purpose: Photo captions, post metadata, timestamps, provenance notes.
   ─────────────────────────────────────────────────────────────────────────── */

.cs-caption {
  font-family: var(--cs-font-body);
  font-size: var(--cs-text-xs);
  font-style: italic;
  color: var(--cs-text-muted);
  line-height: var(--cs-leading-normal);
}

/* ── Price Text
   Purpose: Product price display. Larger than body, Heritage Gold colour.
   Modifiers: --original (struck through), --sale (red).
   ─────────────────────────────────────────────────────────────────────────── */

.cs-price {
  font-family: var(--cs-font-display);
  font-size: var(--cs-text-lg);
  font-weight: 600;
  color: var(--cs-navy);
  letter-spacing: var(--cs-tracking-tight);
}

.cs-price--gold {
  color: var(--cs-gold);
}

.cs-price--original {
  font-size: var(--cs-text-base);
  font-weight: 400;
  color: var(--cs-text-muted);
  text-decoration: line-through;
}

.cs-price--sale {
  color: var(--cs-sale);
}

/* ── Link Text
   Purpose: Inline text links. Gold underline on hover.
   ─────────────────────────────────────────────────────────────────────────── */

.cs-link {
  color: var(--cs-navy);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: color var(--cs-duration-fast) var(--cs-ease),
              text-decoration-color var(--cs-duration-fast) var(--cs-ease);
}
.cs-link:hover,
.cs-link:focus-visible {
  color: var(--cs-gold);
  text-decoration-color: var(--cs-gold);
}


/* ============================================================================
   SECTION 04 — LAYOUT & GRID
   ============================================================================ */

/* ── Container
   Purpose: Max-width centred wrapper for all page content.
   Usage:   Wraps every section's inner content.
   ─────────────────────────────────────────────────────────────────────────── */

.cs-container {
  width: 100%;
  max-width: var(--cs-container-max);
  margin-inline: auto;
  padding-inline: var(--cs-space-4);       /* 16px mobile */
}
@media (min-width: 640px)  { .cs-container { padding-inline: var(--cs-space-6); } }   /* 24px */
@media (min-width: 1024px) { .cs-container { padding-inline: var(--cs-space-10); } }  /* 40px */

/* ── Section Wrapper
   Purpose: Full-width page section with consistent vertical rhythm.
   Modifiers: --cream (warm background), --navy (dark background), --ivory.
   ─────────────────────────────────────────────────────────────────────────── */

.cs-section {
  padding-block: var(--cs-space-10);      /* 40px mobile */
}
@media (min-width: 640px)  { .cs-section { padding-block: var(--cs-space-12); } }   /* 48px */
@media (min-width: 1024px) { .cs-section { padding-block: var(--cs-space-20); } }   /* 80px */

.cs-section--cream  { background-color: var(--cs-cream); }
.cs-section--white  { background-color: var(--cs-white); }
.cs-section--ivory  { background-color: var(--cs-ivory); }
.cs-section--navy   { background-color: var(--cs-navy);  color: var(--cs-white); }
.cs-section--tight  { padding-block: var(--cs-space-6); }

/* ── Grid System
   Purpose: Responsive column grid. Mobile: 1 col. Tablet: 2 col.
   Desktop: 3 or 4 col depending on modifier.
   Usage:   <div class="cs-grid cs-grid--3"> <div class="cs-col"> ... </div> </div>
   ─────────────────────────────────────────────────────────────────────────── */

.cs-grid {
  display: grid;
  gap: var(--cs-grid-gap);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .cs-grid--2,
  .cs-grid--3,
  .cs-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .cs-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .cs-grid--4 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1280px) {
  .cs-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ── Two-Column Split
   Purpose: Editorial two-column layout. Often image + text.
   Mobile: stacked. Desktop: 50/50 or 60/40.
   ─────────────────────────────────────────────────────────────────────────── */

.cs-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cs-space-8);
  align-items: center;
}
@media (min-width: 1024px) {
  .cs-split          { grid-template-columns: 1fr 1fr; }
  .cs-split--60-40   { grid-template-columns: 3fr 2fr; }
  .cs-split--40-60   { grid-template-columns: 2fr 3fr; }
  .cs-split--reverse > *:first-child { order: 2; }
  .cs-split--reverse > *:last-child  { order: 1; }
}

/* ── Decorative Rule
   Purpose: Heritage ornamental horizontal rule. Gold, with optional diamond.
   Usage:   <div class="cs-rule"></div>  or  <div class="cs-rule cs-rule--diamond"></div>
   ─────────────────────────────────────────────────────────────────────────── */

.cs-rule {
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--cs-gold), transparent);
  border: none;
  margin-block: var(--cs-space-6);
}

.cs-rule--bold {
  height: 2px;
  background: var(--cs-gold);
}

.cs-rule--navy {
  background: linear-gradient(to right, transparent, var(--cs-navy), transparent);
}

.cs-rule--diamond {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--cs-space-3);
}
.cs-rule--diamond::before,
.cs-rule--diamond::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--cs-gold);
}
.cs-rule--diamond__gem {
  width: 6px;
  height: 6px;
  background: var(--cs-gold);
  transform: rotate(45deg);
  flex-shrink: 0;
}


/* ============================================================================
   SECTION 05 — NAVIGATION
   ============================================================================ */

/* ── Utility Bar
   Purpose: Topmost thin bar. Rotating announcements (free shipping etc.).
   Background: Estate Navy. Text: Champagne Gold.
   Height: 36px. Hidden on mobile < 640px.
   ─────────────────────────────────────────────────────────────────────────── */

.cs-utility-bar {
  display: none;                           /* hidden mobile */
  background-color: var(--cs-navy);
  height: 36px;
  align-items: center;
  justify-content: center;
}
@media (min-width: 640px) { .cs-utility-bar { display: flex; } }

.cs-utility-bar__text {
  font-family: var(--cs-font-body);
  font-size: var(--cs-text-xs);
  letter-spacing: var(--cs-tracking-wide);
  color: var(--cs-gold-lt);
  text-align: center;
}

.cs-utility-bar__link {
  color: var(--cs-gold-lt);
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--cs-duration-fast);
}
.cs-utility-bar__link:hover {
  text-decoration-color: var(--cs-gold-lt);
}

/* ── Site Header
   Purpose: Main header bar. Logo + search + icons. Sticky on scroll.
   Background: White. Border-bottom: 1px cs-border.
   Height: 64px mobile / 80px desktop.
   is-sticky class applied by JS on scroll.
   ─────────────────────────────────────────────────────────────────────────── */

.cs-header {
  position: sticky;
  top: 0;
  z-index: var(--cs-z-header);
  background-color: var(--cs-white);
  border-bottom: 1px solid var(--cs-border);
  transition: box-shadow var(--cs-duration) var(--cs-ease);
}
.cs-header.is-sticky {
  box-shadow: var(--cs-shadow-md);
}

.cs-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cs-space-4);
  height: 64px;
}
@media (min-width: 1024px) { .cs-header__inner { height: 80px; } }

/* ── Logo
   Purpose: Brand logo mark. Always on white field per brand guidelines.
   Max-height constrains the logo within the header. Width auto-scales.
   ─────────────────────────────────────────────────────────────────────────── */

.cs-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.cs-logo__img {
  height: 40px;
  width: auto;
  display: block;
}
@media (min-width: 1024px) { .cs-logo__img { height: 52px; } }

/* ── Main Navigation
   Purpose: Primary horizontal category navigation.
   Display: hidden on mobile (replaced by hamburger drawer).
   Background: Estate Navy. Text: White. Active/hover: Heritage Gold underline.
   ─────────────────────────────────────────────────────────────────────────── */

.cs-nav-main {
  display: none;
  background-color: var(--cs-navy);
}
@media (min-width: 1024px) {
  .cs-nav-main {
    display: block;
    border-top: 1px solid rgba(255,255,255,0.08);
  }
}

.cs-nav-main__list {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.cs-nav-item {
  position: relative;
}

.cs-nav-item__link {
  display: flex;
  align-items: center;
  gap: var(--cs-space-1);
  padding: var(--cs-space-3) var(--cs-space-5);
  font-family: var(--cs-font-body);
  font-size: var(--cs-text-sm);
  font-weight: 500;
  letter-spacing: var(--cs-tracking-wide);
  text-transform: uppercase;
  color: rgba(255,255,255,0.88);
  white-space: nowrap;
  transition: color var(--cs-duration-fast) var(--cs-ease),
              background-color var(--cs-duration-fast) var(--cs-ease);
  position: relative;
}

.cs-nav-item__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: var(--cs-space-5);
  right: var(--cs-space-5);
  height: 2px;
  background: var(--cs-gold);
  transform: scaleX(0);
  transition: transform var(--cs-duration) var(--cs-ease-out);
}

.cs-nav-item:hover .cs-nav-item__link,
.cs-nav-item.is-active .cs-nav-item__link {
  color: var(--cs-white);
}

.cs-nav-item:hover .cs-nav-item__link::after,
.cs-nav-item.is-active .cs-nav-item__link::after {
  transform: scaleX(1);
}

/* ── Mega Menu
   Purpose: Full-width dropdown panel revealing subcategory columns.
   Appears on hover of .cs-nav-item. Z-index above header.
   ─────────────────────────────────────────────────────────────────────────── */

.cs-mega-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 680px;
  background-color: var(--cs-white);
  border: 1px solid var(--cs-border);
  border-top: 3px solid var(--cs-gold);
  box-shadow: var(--cs-shadow-lg);
  z-index: var(--cs-z-mega);
  padding: var(--cs-space-6);
}

.cs-nav-item:hover .cs-mega-menu {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--cs-space-6);
  animation: cs-fade-drop var(--cs-duration) var(--cs-ease-out);
}

@keyframes cs-fade-drop {
  from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.cs-mega-col__label {
  font-family: var(--cs-font-body);
  font-size: var(--cs-text-xs);
  font-weight: 600;
  letter-spacing: var(--cs-tracking-wider);
  text-transform: uppercase;
  color: var(--cs-gold);
  padding-bottom: var(--cs-space-2);
  border-bottom: 1px solid var(--cs-border);
  margin-bottom: var(--cs-space-3);
}

.cs-mega-col__link {
  display: block;
  font-family: var(--cs-font-body);
  font-size: var(--cs-text-sm);
  color: var(--cs-text-mid);
  padding-block: var(--cs-space-1);
  transition: color var(--cs-duration-fast) var(--cs-ease),
              padding-left var(--cs-duration-fast) var(--cs-ease);
}
.cs-mega-col__link:hover {
  color: var(--cs-navy);
  padding-left: var(--cs-space-2);
}

.cs-mega-col__link--highlight {
  color: var(--cs-gold);
  font-weight: 500;
}
.cs-mega-col__link--highlight:hover {
  color: var(--cs-navy);
}

/* ── Editorial Navigation
   Purpose: Secondary nav for brand pages: About · Journal · Testimonials · FAQ · Contact.
   Kept visually distinct from the commerce mega menu nav.
   Desktop: inline in header. Mobile: included in drawer.
   ─────────────────────────────────────────────────────────────────────────── */

.cs-nav-editorial {
  display: none;
}
@media (min-width: 1024px) {
  .cs-nav-editorial {
    display: flex;
    align-items: center;
    gap: var(--cs-space-1);
  }
}

.cs-nav-editorial__link {
  font-family: var(--cs-font-body);
  font-size: var(--cs-text-sm);
  color: var(--cs-text-mid);
  padding: var(--cs-space-2) var(--cs-space-3);
  border-radius: var(--cs-radius);
  transition: color var(--cs-duration-fast), background-color var(--cs-duration-fast);
}
.cs-nav-editorial__link:hover {
  color: var(--cs-navy);
  background-color: var(--cs-ivory);
}
.cs-nav-editorial__link.is-active {
  color: var(--cs-gold);
  font-weight: 600;
}

/* ── Header Icons (Search, Wishlist, Compare, Cart)
   Purpose: Utility icon cluster in the header. Always visible.
   ─────────────────────────────────────────────────────────────────────────── */

.cs-header-icons {
  display: flex;
  align-items: center;
  gap: var(--cs-space-1);
}

.cs-header-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--cs-radius);
  color: var(--cs-navy);
  transition: color var(--cs-duration-fast), background-color var(--cs-duration-fast);
}
.cs-header-icon:hover {
  color: var(--cs-gold);
  background-color: var(--cs-ivory);
}

.cs-header-icon__badge {
  /* Cart / wishlist count bubble */
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding-inline: 3px;
  background-color: var(--cs-gold);
  color: var(--cs-white);
  font-family: var(--cs-font-body);
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  border-radius: var(--cs-radius-full);
}

/* ── Hamburger / Mobile Menu Toggle
   Purpose: Three-line menu button visible on mobile only. Triggers drawer.
   ─────────────────────────────────────────────────────────────────────────── */

.cs-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  cursor: pointer;
  padding: 0;
  background: none;
  border: none;
}
@media (min-width: 1024px) { .cs-hamburger { display: none; } }

.cs-hamburger__line {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--cs-navy);
  border-radius: 2px;
  transition: transform var(--cs-duration) var(--cs-ease),
              opacity var(--cs-duration) var(--cs-ease);
}

/* is-open state — morphs to ✕ */
.cs-hamburger.is-open .cs-hamburger__line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.cs-hamburger.is-open .cs-hamburger__line:nth-child(2) {
  opacity: 0;
}
.cs-hamburger.is-open .cs-hamburger__line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ── Mobile Navigation Drawer
   Purpose: Full-height slide-in drawer for mobile navigation.
   Covers from left edge. Overlay darkens page behind it.
   ─────────────────────────────────────────────────────────────────────────── */

.cs-nav-drawer {
  position: fixed;
  inset: 0 auto 0 0;
  width: min(320px, 85vw);
  background-color: var(--cs-white);
  z-index: var(--cs-z-modal);
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform var(--cs-duration-slow) var(--cs-ease-out);
  box-shadow: var(--cs-shadow-lg);
}
.cs-nav-drawer.is-open {
  transform: translateX(0);
}

.cs-nav-drawer__overlay {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(26,43,78,0.5);
  z-index: calc(var(--cs-z-modal) - 1);
  backdrop-filter: blur(2px);
}
.cs-nav-drawer__overlay.is-visible { display: block; }

.cs-nav-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--cs-space-4) var(--cs-space-5);
  border-bottom: 1px solid var(--cs-border);
  background-color: var(--cs-navy);
}

.cs-nav-drawer__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--cs-gold-lt);
  font-size: var(--cs-text-xl);
  cursor: pointer;
}

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

.cs-nav-drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--cs-space-4) var(--cs-space-5);
  font-family: var(--cs-font-body);
  font-size: var(--cs-text-base);
  color: var(--cs-navy);
  transition: background-color var(--cs-duration-fast);
}
.cs-nav-drawer__link:hover {
  background-color: var(--cs-ivory);
  color: var(--cs-gold);
}

/* ── Breadcrumb
   Purpose: Page hierarchy trail below the header on inner pages.
   Separator: › rendered via CSS.
   ─────────────────────────────────────────────────────────────────────────── */

.cs-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cs-space-1);
  padding-block: var(--cs-space-3);
}

.cs-breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--cs-space-1);
  font-family: var(--cs-font-body);
  font-size: var(--cs-text-xs);
  color: var(--cs-text-muted);
}

.cs-breadcrumb__item + .cs-breadcrumb__item::before {
  content: '›';
  color: var(--cs-gold);
}

.cs-breadcrumb__link {
  color: var(--cs-text-muted);
  transition: color var(--cs-duration-fast);
}
.cs-breadcrumb__link:hover { color: var(--cs-gold); }

.cs-breadcrumb__current {
  color: var(--cs-navy);
  font-weight: 500;
}


/* ============================================================================
   SECTION 06 — HERO & BANNER COMPONENTS
   ============================================================================ */

/* ── Hero Carousel
   Purpose: Full-width rotating hero. Three slides per audit spec.
   Each slide: full-bleed image with overlay, headline, subtext, dual CTAs.
   Managed by WoodMart native slider — these classes style the content layer.
   ─────────────────────────────────────────────────────────────────────────── */

.cs-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: var(--cs-navy);
}

.cs-hero__slide {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 480px;
  padding-block: var(--cs-space-16);
}
@media (min-width: 640px)  { .cs-hero__slide { min-height: 560px; } }
@media (min-width: 1024px) { .cs-hero__slide { min-height: 680px; } }

.cs-hero__bg {
  /* Background image layer — set via inline style or WoodMart slide settings */
  position: absolute;
  inset: 0;
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}

.cs-hero__overlay {
  /* Dark gradient scrim ensuring text legibility over imagery */
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    rgba(26,43,78,0.80) 0%,
    rgba(26,43,78,0.40) 55%,
    rgba(26,43,78,0.10) 100%
  );
}

.cs-hero__content {
  position: relative;
  z-index: var(--cs-z-base);
  max-width: 580px;
}

.cs-hero__eyebrow {
  font-family: var(--cs-font-body);
  font-size: var(--cs-text-xs);
  font-weight: 400;
  letter-spacing: var(--cs-tracking-widest);
  text-transform: uppercase;
  color: var(--cs-gold-lt);
  margin-bottom: var(--cs-space-3);
}

.cs-hero__heading {
  font-family: var(--cs-font-display);
  font-size: var(--cs-text-2xl);
  font-weight: 700;
  line-height: 1.1;
  color: var(--cs-white);
  margin-bottom: var(--cs-space-4);
}
@media (min-width: 640px)  { .cs-hero__heading { font-size: var(--cs-text-3xl); } }
@media (min-width: 1024px) { .cs-hero__heading { font-size: var(--cs-text-4xl); } }

.cs-hero__subtext {
  font-family: var(--cs-font-body);
  font-size: var(--cs-text-base);
  line-height: var(--cs-leading-loose);
  color: rgba(255,255,255,0.80);
  margin-bottom: var(--cs-space-8);
}
@media (min-width: 640px) { .cs-hero__subtext { font-size: var(--cs-text-md); } }

.cs-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cs-space-3);
}

/* ── Promo Banner (Two-Column Editorial)
   Purpose: Mid-page promotional content blocks. Often image left + offer right.
   Usage: <div class="cs-promo-banner"> ... </div>
   ─────────────────────────────────────────────────────────────────────────── */

.cs-promo-banner {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 320px;
  overflow: hidden;
  border-radius: var(--cs-radius-md);
  border: 1px solid var(--cs-border);
}
@media (min-width: 640px) {
  .cs-promo-banner { grid-template-columns: 1fr 1fr; }
}

.cs-promo-banner__img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  min-height: 220px;
}

.cs-promo-banner__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--cs-space-8) var(--cs-space-6);
  background-color: var(--cs-ivory);
}
@media (min-width: 1024px) {
  .cs-promo-banner__content { padding: var(--cs-space-12) var(--cs-space-10); }
}

.cs-promo-banner--navy .cs-promo-banner__content {
  background-color: var(--cs-navy);
}


/* ============================================================================
   SECTION 07 — BUTTONS & CTAs
   ============================================================================ */

/* ── Base Button
   Purpose: Shared baseline for all button variants. Never use alone.
   ─────────────────────────────────────────────────────────────────────────── */

.cs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cs-space-2);
  padding: var(--cs-space-3) var(--cs-space-6);
  font-family: var(--cs-font-body);
  font-size: var(--cs-text-sm);
  font-weight: 500;
  letter-spacing: var(--cs-tracking-wide);
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  border-radius: var(--cs-radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition:
    background-color var(--cs-duration) var(--cs-ease),
    color var(--cs-duration) var(--cs-ease),
    border-color var(--cs-duration) var(--cs-ease),
    box-shadow var(--cs-duration) var(--cs-ease),
    transform var(--cs-duration-fast) var(--cs-ease);
  text-decoration: none;
}
.cs-btn:active { transform: translateY(1px); }
.cs-btn:focus-visible {
  outline: 2px solid var(--cs-gold);
  outline-offset: 3px;
}

/* ── Primary Button
   Purpose: Main commerce CTA. Heritage Gold background, Navy text on hover.
   Usage: "Shop the Collection", "Acquire This Piece", "Book a Consultation"
   ─────────────────────────────────────────────────────────────────────────── */

.cs-btn--primary {
  background-color: var(--cs-gold);
  color: var(--cs-navy);
  border-color: var(--cs-gold);
}
.cs-btn--primary:hover {
  background-color: var(--cs-navy);
  color: var(--cs-white);
  border-color: var(--cs-navy);
  box-shadow: var(--cs-shadow-gold);
}

/* ── Secondary Button (Navy)
   Purpose: Strong secondary CTA on light backgrounds.
   Usage: Second CTA in hero slides, prominent page CTAs.
   ─────────────────────────────────────────────────────────────────────────── */

.cs-btn--secondary {
  background-color: var(--cs-navy);
  color: var(--cs-white);
  border-color: var(--cs-navy);
}
.cs-btn--secondary:hover {
  background-color: transparent;
  color: var(--cs-navy);
  border-color: var(--cs-navy);
}

/* ── Ghost Button (on dark backgrounds)
   Purpose: Outlined button for use on navy/dark hero backgrounds.
   Usage: Secondary CTA on hero slides.
   ─────────────────────────────────────────────────────────────────────────── */

.cs-btn--ghost {
  background-color: transparent;
  color: var(--cs-white);
  border-color: rgba(255,255,255,0.60);
}
.cs-btn--ghost:hover {
  background-color: var(--cs-white);
  color: var(--cs-navy);
  border-color: var(--cs-white);
}

/* ── Ghost Gold (on cream/light backgrounds)
   Purpose: Outlined button for heritage editorial sections.
   ─────────────────────────────────────────────────────────────────────────── */

.cs-btn--ghost-gold {
  background-color: transparent;
  color: var(--cs-gold);
  border-color: var(--cs-gold);
}
.cs-btn--ghost-gold:hover {
  background-color: var(--cs-gold);
  color: var(--cs-navy);
}

/* ── Text Button (Link-style)
   Purpose: Minimal CTA. Gold text with animated underline.
   Usage: "Read More", "View All", "Explore the Range"
   ─────────────────────────────────────────────────────────────────────────── */

.cs-btn--text {
  background-color: transparent;
  color: var(--cs-gold);
  border-color: transparent;
  padding-inline: 0;
  position: relative;
}
.cs-btn--text::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--cs-gold);
  transform: scaleX(0.3);
  transform-origin: left;
  transition: transform var(--cs-duration) var(--cs-ease-out);
}
.cs-btn--text:hover::after { transform: scaleX(1); }
.cs-btn--text:hover { color: var(--cs-navy); }
.cs-btn--text:hover::after { background: var(--cs-navy); }

/* ── Size Modifiers ── */
.cs-btn--sm {
  padding: var(--cs-space-2) var(--cs-space-4);
  font-size: var(--cs-text-xs);
}
.cs-btn--lg {
  padding: var(--cs-space-4) var(--cs-space-8);
  font-size: var(--cs-text-base);
}
.cs-btn--full { width: 100%; }


/* ============================================================================
   SECTION 08 — PRODUCT COMPONENTS
   ============================================================================ */

/* ── Product Card
   Purpose: Core commerce unit. Reusable across all product grids.
   Dual image: primary shows by default, secondary (hover) on mouse enter.
   Includes: badge, image, wishlist button, quick view, title, price, add-to-cart.
   ─────────────────────────────────────────────────────────────────────────── */

.cs-product-card {
  position: relative;
  background-color: var(--cs-white);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--cs-duration) var(--cs-ease),
              transform var(--cs-duration) var(--cs-ease);
}
.cs-product-card:hover {
  box-shadow: var(--cs-shadow-md);
  transform: translateY(-3px);
}

/* Image wrapper — fixed aspect ratio */
.cs-product-card__img-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3;
  background-color: var(--cs-ivory);
}

.cs-product-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--cs-duration) var(--cs-ease),
              transform var(--cs-duration-slow) var(--cs-ease);
}

.cs-product-card__img--hover {
  opacity: 0;
}
.cs-product-card:hover .cs-product-card__img--primary {
  opacity: 0;
}
.cs-product-card:hover .cs-product-card__img--hover {
  opacity: 1;
  transform: scale(1.04);
}

/* Floating action buttons — appear on hover */
.cs-product-card__actions {
  position: absolute;
  top: var(--cs-space-3);
  right: var(--cs-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--cs-space-2);
  opacity: 0;
  transform: translateX(8px);
  transition: opacity var(--cs-duration) var(--cs-ease),
              transform var(--cs-duration) var(--cs-ease);
}
.cs-product-card:hover .cs-product-card__actions {
  opacity: 1;
  transform: translateX(0);
}

.cs-product-card__action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background-color: var(--cs-white);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  color: var(--cs-navy);
  box-shadow: var(--cs-shadow-sm);
  transition: background-color var(--cs-duration-fast),
              color var(--cs-duration-fast),
              border-color var(--cs-duration-fast);
}
.cs-product-card__action-btn:hover {
  background-color: var(--cs-navy);
  color: var(--cs-white);
  border-color: var(--cs-navy);
}
.cs-product-card__action-btn.is-active {
  background-color: var(--cs-gold);
  color: var(--cs-navy);
  border-color: var(--cs-gold);
}

/* Quick view button — appears mid-image on hover */
.cs-product-card__quick-view {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--cs-space-2) var(--cs-space-3);
  background-color: rgba(26,43,78,0.88);
  color: var(--cs-white);
  font-family: var(--cs-font-body);
  font-size: var(--cs-text-xs);
  letter-spacing: var(--cs-tracking-wide);
  text-transform: uppercase;
  text-align: center;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--cs-duration) var(--cs-ease),
              transform var(--cs-duration) var(--cs-ease);
}
.cs-product-card:hover .cs-product-card__quick-view {
  opacity: 1;
  transform: translateY(0);
}

/* Product info area */
.cs-product-card__body {
  padding: var(--cs-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--cs-space-2);
  flex: 1;
}

.cs-product-card__category {
  font-family: var(--cs-font-body);
  font-size: var(--cs-text-xs);
  letter-spacing: var(--cs-tracking-wider);
  text-transform: uppercase;
  color: var(--cs-gold);
}

.cs-product-card__title {
  font-family: var(--cs-font-display);
  font-size: var(--cs-text-base);
  font-weight: 600;
  color: var(--cs-navy);
  line-height: var(--cs-leading-snug);
  transition: color var(--cs-duration-fast);
}
.cs-product-card:hover .cs-product-card__title {
  color: var(--cs-gold);
}

.cs-product-card__price-row {
  display: flex;
  align-items: center;
  gap: var(--cs-space-3);
  margin-top: auto;
}

.cs-product-card__rating {
  display: flex;
  align-items: center;
  gap: var(--cs-space-1);
}

.cs-product-card__footer {
  padding: var(--cs-space-3) var(--cs-space-4);
  border-top: 1px solid var(--cs-border);
}

/* ── Product Badges
   Purpose: Corner tags on product cards indicating status.
   Each badge has its own colour per the semantic palette.
   ─────────────────────────────────────────────────────────────────────────── */

.cs-product-badges {
  position: absolute;
  top: var(--cs-space-3);
  left: var(--cs-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--cs-space-1);
  z-index: var(--cs-z-card);
}

.cs-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--cs-space-1) var(--cs-space-2);
  font-family: var(--cs-font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--cs-tracking-wide);
  text-transform: uppercase;
  border-radius: var(--cs-radius-sm);
  line-height: 1;
}

.cs-badge--new {
  background-color: var(--cs-new-bg);
  color: var(--cs-new);
  border: 1px solid currentColor;
}
.cs-badge--hot {
  background-color: var(--cs-hot-bg);
  color: var(--cs-hot);
  border: 1px solid currentColor;
}
.cs-badge--sale {
  background-color: var(--cs-sale-bg);
  color: var(--cs-sale);
  border: 1px solid currentColor;
}
.cs-badge--verified {
  background-color: var(--cs-success-bg);
  color: var(--cs-success);
  border: 1px solid currentColor;
}
.cs-badge--provenance {
  background-color: var(--cs-gold-pale);
  color: var(--cs-navy);
  border: 1px solid var(--cs-gold);
}

/* ── Category Tile
   Purpose: Homepage category grid. Image with title overlay on hover.
   Six tiles per the audit specification.
   ─────────────────────────────────────────────────────────────────────────── */

.cs-category-tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--cs-radius-md);
  aspect-ratio: 3/4;
  background-color: var(--cs-ivory);
  cursor: pointer;
}
@media (min-width: 640px) {
  .cs-category-tile { aspect-ratio: 1/1; }
}

.cs-category-tile__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--cs-duration-slow) var(--cs-ease);
}
.cs-category-tile:hover .cs-category-tile__img {
  transform: scale(1.06);
}

.cs-category-tile__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(26,43,78,0.75) 0%, rgba(26,43,78,0.10) 60%);
  transition: background var(--cs-duration) var(--cs-ease);
}
.cs-category-tile:hover .cs-category-tile__overlay {
  background: linear-gradient(to top, rgba(26,43,78,0.85) 0%, rgba(26,43,78,0.25) 60%);
}

.cs-category-tile__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--cs-space-5) var(--cs-space-4);
}

.cs-category-tile__title {
  font-family: var(--cs-font-display);
  font-size: var(--cs-text-lg);
  font-weight: 700;
  color: var(--cs-white);
  line-height: var(--cs-leading-snug);
  margin-bottom: var(--cs-space-1);
}

.cs-category-tile__count {
  font-family: var(--cs-font-body);
  font-size: var(--cs-text-xs);
  color: var(--cs-gold-lt);
  letter-spacing: var(--cs-tracking-wide);
}

/* ── Product Grid (with Tab Switcher)
   Purpose: Tabbed product display: New / Featured / Bestsellers.
   Tab switching is JS-driven; only active panel is visible.
   ─────────────────────────────────────────────────────────────────────────── */

.cs-product-tabs {
  width: 100%;
}

.cs-product-tabs__nav {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--cs-border);
  margin-bottom: var(--cs-space-6);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cs-tab-btn {
  flex-shrink: 0;
  padding: var(--cs-space-3) var(--cs-space-5);
  font-family: var(--cs-font-body);
  font-size: var(--cs-text-sm);
  font-weight: 500;
  letter-spacing: var(--cs-tracking-wide);
  text-transform: uppercase;
  color: var(--cs-text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color var(--cs-duration-fast), border-color var(--cs-duration-fast);
  white-space: nowrap;
}
.cs-tab-btn:hover {
  color: var(--cs-navy);
}
.cs-tab-btn.is-active {
  color: var(--cs-gold);
  border-bottom-color: var(--cs-gold);
  font-weight: 600;
}

.cs-tab-panel {
  display: none;
}
.cs-tab-panel.is-active {
  display: block;
}


/* ============================================================================
   SECTION 09 — TRUST & SOCIAL PROOF COMPONENTS
   ============================================================================ */

/* ── Trust Strip
   Purpose: 6-pillar trust bar. Appears mid-page and again in footer.
   Mobile: 2 col grid. Desktop: 6 col row.
   ─────────────────────────────────────────────────────────────────────────── */

.cs-trust-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--cs-space-4);
  padding-block: var(--cs-space-6);
}
@media (min-width: 640px)  { .cs-trust-strip { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .cs-trust-strip { grid-template-columns: repeat(6, 1fr); gap: 0; } }

.cs-trust-pillar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cs-space-2);
  padding: var(--cs-space-4) var(--cs-space-3);
  text-align: center;
  border-right: 1px solid var(--cs-border);
}
.cs-trust-pillar:last-child { border-right: none; }

.cs-trust-pillar__icon {
  width: 32px;
  height: 32px;
  color: var(--cs-gold);
  flex-shrink: 0;
}

.cs-trust-pillar__title {
  font-family: var(--cs-font-body);
  font-size: var(--cs-text-sm);
  font-weight: 600;
  color: var(--cs-navy);
  letter-spacing: var(--cs-tracking-wide);
}

.cs-trust-pillar__sub {
  font-family: var(--cs-font-body);
  font-size: var(--cs-text-xs);
  color: var(--cs-text-muted);
  line-height: var(--cs-leading-snug);
}

/* ── Star Rating
   Purpose: Five-star display for product cards and testimonials.
   Filled: gold. Empty: ivory/border.
   ─────────────────────────────────────────────────────────────────────────── */

.cs-rating {
  display: flex;
  align-items: center;
  gap: 2px;
}

.cs-rating__star {
  width: 14px;
  height: 14px;
  color: var(--cs-gold);
}
.cs-rating__star--empty {
  color: var(--cs-border);
}

.cs-rating__count {
  font-family: var(--cs-font-body);
  font-size: var(--cs-text-xs);
  color: var(--cs-text-muted);
  margin-left: var(--cs-space-1);
}

/* ── Payment Icons Strip
   Purpose: Row of payment method logos. Footer and checkout.
   ─────────────────────────────────────────────────────────────────────────── */

.cs-payment-icons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cs-space-2);
}

.cs-payment-icon {
  height: 24px;
  width: auto;
  filter: grayscale(0.3) opacity(0.8);
  transition: filter var(--cs-duration-fast);
}
.cs-payment-icon:hover { filter: grayscale(0) opacity(1); }


/* ============================================================================
   SECTION 10 — CONTENT CARDS
   ============================================================================ */

/* ── Journal Card (Blog Post)
   Purpose: Blog post card for homepage grid and /journal index.
   Image top, then category, title, excerpt, date, CTA link.
   ─────────────────────────────────────────────────────────────────────────── */

.cs-journal-card {
  background-color: var(--cs-white);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--cs-duration) var(--cs-ease),
              transform var(--cs-duration) var(--cs-ease);
}
.cs-journal-card:hover {
  box-shadow: var(--cs-shadow-md);
  transform: translateY(-2px);
}

.cs-journal-card__img-wrap {
  overflow: hidden;
  aspect-ratio: 16/9;
}

.cs-journal-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--cs-duration-slow) var(--cs-ease);
}
.cs-journal-card:hover .cs-journal-card__img {
  transform: scale(1.04);
}

.cs-journal-card__body {
  padding: var(--cs-space-5) var(--cs-space-5) var(--cs-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--cs-space-3);
  flex: 1;
}

.cs-journal-card__category {
  font-family: var(--cs-font-body);
  font-size: var(--cs-text-xs);
  font-weight: 600;
  letter-spacing: var(--cs-tracking-wider);
  text-transform: uppercase;
  color: var(--cs-gold);
}

.cs-journal-card__title {
  font-family: var(--cs-font-display);
  font-size: var(--cs-text-lg);
  font-weight: 700;
  color: var(--cs-navy);
  line-height: var(--cs-leading-snug);
  transition: color var(--cs-duration-fast);
}
.cs-journal-card:hover .cs-journal-card__title {
  color: var(--cs-gold);
}

.cs-journal-card__excerpt {
  font-family: var(--cs-font-body);
  font-size: var(--cs-text-sm);
  color: var(--cs-text-mid);
  line-height: var(--cs-leading-normal);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cs-journal-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: var(--cs-space-3);
  border-top: 1px solid var(--cs-border);
}

.cs-journal-card__date {
  font-family: var(--cs-font-body);
  font-size: var(--cs-text-xs);
  color: var(--cs-text-muted);
}

/* ── Testimonial Card
   Purpose: Client review card for /testimonials and homepage section.
   Includes: star rating, quote, reviewer name, provenance detail.
   ─────────────────────────────────────────────────────────────────────────── */

.cs-testimonial-card {
  background-color: var(--cs-white);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-md);
  padding: var(--cs-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--cs-space-4);
  position: relative;
}

.cs-testimonial-card::before {
  /* Decorative opening quote mark */
  content: '\201C';
  position: absolute;
  top: var(--cs-space-4);
  right: var(--cs-space-5);
  font-family: var(--cs-font-display);
  font-size: 4rem;
  line-height: 1;
  color: var(--cs-gold-pale);
  pointer-events: none;
  user-select: none;
}

.cs-testimonial-card__quote {
  font-family: var(--cs-font-body);
  font-size: var(--cs-text-md);
  font-style: italic;
  color: var(--cs-text-dark);
  line-height: var(--cs-leading-loose);
  position: relative;
  z-index: 1;
}

.cs-testimonial-card__reviewer {
  display: flex;
  align-items: center;
  gap: var(--cs-space-3);
  margin-top: auto;
  padding-top: var(--cs-space-4);
  border-top: 1px solid var(--cs-border);
}

.cs-testimonial-card__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--cs-gold-pale);
  flex-shrink: 0;
}

.cs-testimonial-card__name {
  font-family: var(--cs-font-display);
  font-size: var(--cs-text-base);
  font-weight: 600;
  color: var(--cs-navy);
}

.cs-testimonial-card__detail {
  font-family: var(--cs-font-body);
  font-size: var(--cs-text-xs);
  color: var(--cs-text-muted);
}

/* ── Shoppable Image Map
   Purpose: Lifestyle image with clickable product hotspots.
   Replicates the reference site's "shoppable image" section.
   ─────────────────────────────────────────────────────────────────────────── */

.cs-shoppable-map {
  position: relative;
  overflow: hidden;
  border-radius: var(--cs-radius-md);
}

.cs-shoppable-map__img {
  width: 100%;
  height: auto;
  display: block;
}

.cs-hotspot {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: var(--cs-z-card);
}

.cs-hotspot__trigger {
  width: 28px;
  height: 28px;
  background-color: var(--cs-white);
  border: 2px solid var(--cs-gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--cs-shadow);
  transition: background-color var(--cs-duration-fast),
              transform var(--cs-duration-fast);
}
.cs-hotspot__trigger:hover {
  background-color: var(--cs-gold);
  transform: scale(1.15);
}

.cs-hotspot__trigger::before {
  /* Pulsing ring animation */
  content: '';
  position: absolute;
  inset: -6px;
  border: 2px solid var(--cs-gold);
  border-radius: 50%;
  opacity: 0;
  animation: cs-pulse 2s ease-out infinite;
}
@keyframes cs-pulse {
  0%   { opacity: 0.6; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.6); }
}

.cs-hotspot__popover {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  background-color: var(--cs-white);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-md);
  padding: var(--cs-space-3);
  box-shadow: var(--cs-shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--cs-duration) var(--cs-ease);
}
.cs-hotspot.is-active .cs-hotspot__popover,
.cs-hotspot:hover .cs-hotspot__popover {
  opacity: 1;
  pointer-events: auto;
}


/* ============================================================================
   SECTION 11 — SECTION HEADERS
   ============================================================================ */

/* ── Section Header Block
   Purpose: Centred or left-aligned section intro. Label → Heading → Sub → Rule.
   Usage: Above every major homepage section and inner page sections.
   ─────────────────────────────────────────────────────────────────────────── */

.cs-section-header {
  text-align: left;
  max-width: 640px;
  margin-bottom: var(--cs-space-10);
}
.cs-section-header--centre {
  text-align: center;
  margin-inline: auto;
}

.cs-section-header__heading {
  margin-top: var(--cs-space-3);
  margin-bottom: var(--cs-space-4);
}

.cs-section-header__sub {
  font-family: var(--cs-font-body);
  font-size: var(--cs-text-base);
  color: var(--cs-text-mid);
  line-height: var(--cs-leading-loose);
  margin-bottom: var(--cs-space-5);
}


/* ============================================================================
   SECTION 12 — FORMS
   ============================================================================ */

/* ── Form Group
   Purpose: Label + input wrapper with spacing.
   ─────────────────────────────────────────────────────────────────────────── */

.cs-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--cs-space-2);
}

.cs-form-label {
  font-family: var(--cs-font-body);
  font-size: var(--cs-text-sm);
  font-weight: 500;
  color: var(--cs-navy);
  letter-spacing: var(--cs-tracking-wide);
}

.cs-form-label--required::after {
  content: ' *';
  color: var(--cs-sale);
}

/* ── Input / Select / Textarea
   Purpose: All text inputs share a base class. Ivory fill, gold focus ring.
   ─────────────────────────────────────────────────────────────────────────── */

.cs-input,
.cs-select,
.cs-textarea {
  width: 100%;
  padding: var(--cs-space-3) var(--cs-space-4);
  font-family: var(--cs-font-body);
  font-size: var(--cs-text-base);
  color: var(--cs-text-dark);
  background-color: var(--cs-ivory);
  border: 1px solid var(--cs-border-mid);
  border-radius: var(--cs-radius);
  line-height: var(--cs-leading-normal);
  transition: border-color var(--cs-duration-fast),
              box-shadow var(--cs-duration-fast);
  appearance: none;
}

.cs-input::placeholder,
.cs-textarea::placeholder {
  color: var(--cs-text-muted);
  font-style: italic;
}

.cs-input:focus,
.cs-select:focus,
.cs-textarea:focus {
  outline: none;
  border-color: var(--cs-gold);
  box-shadow: 0 0 0 3px rgba(196,151,42,0.15);
  background-color: var(--cs-white);
}

.cs-input.is-error,
.cs-select.is-error,
.cs-textarea.is-error {
  border-color: var(--cs-error);
  box-shadow: 0 0 0 3px rgba(139,26,26,0.10);
}

.cs-textarea {
  resize: vertical;
  min-height: 140px;
}

.cs-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23C4972A' d='M8 10.5L3 5.5h10L8 10.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--cs-space-3) center;
  background-size: 14px;
  padding-right: var(--cs-space-10);
  cursor: pointer;
}

/* ── Form Feedback Messages ── */
.cs-form-error {
  font-family: var(--cs-font-body);
  font-size: var(--cs-text-xs);
  color: var(--cs-error);
  display: flex;
  align-items: center;
  gap: var(--cs-space-1);
}
.cs-form-success {
  font-family: var(--cs-font-body);
  font-size: var(--cs-text-xs);
  color: var(--cs-success);
}

/* ── Newsletter Block
   Purpose: Email capture block used on homepage and footer.
   Inline layout: input + button side by side.
   ─────────────────────────────────────────────────────────────────────────── */

.cs-newsletter {
  background-color: var(--cs-navy);
  padding: var(--cs-space-10) var(--cs-space-6);
  border-radius: var(--cs-radius-md);
  text-align: center;
}
@media (min-width: 1024px) {
  .cs-newsletter { padding: var(--cs-space-12) var(--cs-space-16); }
}

.cs-newsletter__heading {
  font-family: var(--cs-font-display);
  font-size: var(--cs-text-xl);
  font-weight: 700;
  color: var(--cs-white);
  margin-bottom: var(--cs-space-3);
}
@media (min-width: 640px) {
  .cs-newsletter__heading { font-size: var(--cs-text-2xl); }
}

.cs-newsletter__sub {
  font-family: var(--cs-font-body);
  font-size: var(--cs-text-base);
  color: rgba(255,255,255,0.70);
  margin-bottom: var(--cs-space-6);
}

.cs-newsletter__form {
  display: flex;
  flex-direction: column;
  gap: var(--cs-space-3);
  max-width: 480px;
  margin-inline: auto;
}
@media (min-width: 640px) {
  .cs-newsletter__form { flex-direction: row; }
}

.cs-newsletter__input {
  flex: 1;
  padding: var(--cs-space-3) var(--cs-space-4);
  font-family: var(--cs-font-body);
  font-size: var(--cs-text-base);
  color: var(--cs-text-dark);
  background-color: var(--cs-white);
  border: none;
  border-radius: var(--cs-radius-sm);
}
.cs-newsletter__input::placeholder { color: var(--cs-text-muted); font-style: italic; }
.cs-newsletter__input:focus {
  outline: 2px solid var(--cs-gold);
  outline-offset: 1px;
}

.cs-newsletter__privacy {
  font-family: var(--cs-font-body);
  font-size: var(--cs-text-xs);
  color: rgba(255,255,255,0.45);
  margin-top: var(--cs-space-3);
}

/* ── Search Bar
   Purpose: Header search. Expands on focus. Icon left, clear right.
   ─────────────────────────────────────────────────────────────────────────── */

.cs-search-bar {
  position: relative;
  display: flex;
  align-items: center;
}

.cs-search-bar__input {
  width: 0;
  padding: var(--cs-space-2) var(--cs-space-10);
  font-family: var(--cs-font-body);
  font-size: var(--cs-text-sm);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-full);
  background-color: var(--cs-ivory);
  transition: width var(--cs-duration) var(--cs-ease),
              padding var(--cs-duration) var(--cs-ease);
  overflow: hidden;
}
.cs-search-bar__input.is-open {
  width: 240px;
  padding: var(--cs-space-2) var(--cs-space-10);
}

.cs-search-bar__icon {
  position: absolute;
  left: var(--cs-space-3);
  color: var(--cs-navy);
  pointer-events: none;
  width: 16px;
  height: 16px;
}


/* ============================================================================
   SECTION 13 — COMMERCE UTILITIES
   ============================================================================ */

/* ── Add to Cart Button
   Purpose: Primary commerce action on product pages.
   Full-width on mobile, inline on desktop.
   Loading state via .is-loading class (JS-toggled).
   ─────────────────────────────────────────────────────────────────────────── */

.cs-add-to-cart {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--cs-space-3);
  width: 100%;
  padding: var(--cs-space-4) var(--cs-space-6);
  font-family: var(--cs-font-body);
  font-size: var(--cs-text-sm);
  font-weight: 600;
  letter-spacing: var(--cs-tracking-wider);
  text-transform: uppercase;
  background-color: var(--cs-navy);
  color: var(--cs-white);
  border: 2px solid var(--cs-navy);
  border-radius: var(--cs-radius-sm);
  cursor: pointer;
  transition: background-color var(--cs-duration) var(--cs-ease),
              border-color var(--cs-duration) var(--cs-ease),
              color var(--cs-duration) var(--cs-ease);
}
.cs-add-to-cart:hover {
  background-color: var(--cs-gold);
  border-color: var(--cs-gold);
  color: var(--cs-navy);
}
.cs-add-to-cart.is-loading {
  opacity: 0.7;
  pointer-events: none;
}
.cs-add-to-cart.is-added {
  background-color: var(--cs-success);
  border-color: var(--cs-success);
}

/* ── Quantity Selector
   Purpose: Stepper control for product quantity. Minus / value / Plus.
   ─────────────────────────────────────────────────────────────────────────── */

.cs-qty-selector {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--cs-border-mid);
  border-radius: var(--cs-radius);
  overflow: hidden;
  height: 44px;
}

.cs-qty-selector__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  background-color: var(--cs-ivory);
  color: var(--cs-navy);
  font-size: var(--cs-text-lg);
  border: none;
  cursor: pointer;
  transition: background-color var(--cs-duration-fast),
              color var(--cs-duration-fast);
}
.cs-qty-selector__btn:hover {
  background-color: var(--cs-gold);
  color: var(--cs-navy);
}

.cs-qty-selector__value {
  width: 48px;
  text-align: center;
  font-family: var(--cs-font-display);
  font-size: var(--cs-text-base);
  font-weight: 600;
  color: var(--cs-navy);
  border: none;
  border-left: 1px solid var(--cs-border-mid);
  border-right: 1px solid var(--cs-border-mid);
  background-color: var(--cs-white);
  -moz-appearance: textfield;
}
.cs-qty-selector__value::-webkit-outer-spin-button,
.cs-qty-selector__value::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

/* ── Stock Counter / Urgency
   Purpose: "Only X left in stock" urgency signal on product pages.
   ─────────────────────────────────────────────────────────────────────────── */

.cs-stock-counter {
  display: flex;
  flex-direction: column;
  gap: var(--cs-space-1);
}

.cs-stock-counter__label {
  font-family: var(--cs-font-body);
  font-size: var(--cs-text-xs);
  color: var(--cs-hot);
  font-weight: 600;
  letter-spacing: var(--cs-tracking-wide);
}

.cs-stock-counter__bar {
  height: 4px;
  background-color: var(--cs-border);
  border-radius: var(--cs-radius-full);
  overflow: hidden;
}

.cs-stock-counter__fill {
  height: 100%;
  background-color: var(--cs-gold);
  border-radius: var(--cs-radius-full);
  /* width set via inline style: style="width: 65%" */
}

/* ── Shipping Info Block
   Purpose: Free shipping threshold notice on product and cart pages.
   ─────────────────────────────────────────────────────────────────────────── */

.cs-shipping-info {
  display: flex;
  align-items: flex-start;
  gap: var(--cs-space-3);
  padding: var(--cs-space-3) var(--cs-space-4);
  background-color: var(--cs-success-bg);
  border: 1px solid #A8D5B8;
  border-radius: var(--cs-radius);
}

.cs-shipping-info__icon {
  color: var(--cs-success);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

.cs-shipping-info__text {
  font-family: var(--cs-font-body);
  font-size: var(--cs-text-sm);
  color: var(--cs-success);
  line-height: var(--cs-leading-snug);
}
.cs-shipping-info__text strong { font-weight: 700; }


/* ============================================================================
   SECTION 14 — ACCORDION (FAQ)
   ============================================================================ */

/* ── Accordion
   Purpose: FAQ accordion. JS toggles .is-open on .cs-accordion-item.
   Smooth height transition via max-height.
   ─────────────────────────────────────────────────────────────────────────── */

.cs-accordion {
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-md);
  overflow: hidden;
}

.cs-accordion-item {
  border-bottom: 1px solid var(--cs-border);
}
.cs-accordion-item:last-child { border-bottom: none; }

.cs-accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cs-space-4);
  width: 100%;
  padding: var(--cs-space-5) var(--cs-space-5);
  text-align: left;
  cursor: pointer;
  background-color: var(--cs-white);
  border: none;
  transition: background-color var(--cs-duration-fast);
}
.cs-accordion-trigger:hover {
  background-color: var(--cs-cream);
}
.cs-accordion-item.is-open .cs-accordion-trigger {
  background-color: var(--cs-ivory);
}

.cs-accordion-trigger__question {
  font-family: var(--cs-font-display);
  font-size: var(--cs-text-base);
  font-weight: 600;
  color: var(--cs-navy);
  line-height: var(--cs-leading-snug);
}
@media (min-width: 640px) {
  .cs-accordion-trigger__question { font-size: var(--cs-text-md); }
}

.cs-accordion-trigger__icon {
  width: 20px;
  height: 20px;
  color: var(--cs-gold);
  flex-shrink: 0;
  transition: transform var(--cs-duration) var(--cs-ease);
}
.cs-accordion-item.is-open .cs-accordion-trigger__icon {
  transform: rotate(180deg);
}

.cs-accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--cs-duration-slow) var(--cs-ease);
}
.cs-accordion-item.is-open .cs-accordion-panel {
  max-height: 600px;  /* Generous ceiling. Adjust for long answers. */
}

.cs-accordion-panel__inner {
  padding: var(--cs-space-1) var(--cs-space-5) var(--cs-space-5);
  font-family: var(--cs-font-body);
  font-size: var(--cs-text-base);
  color: var(--cs-text-mid);
  line-height: var(--cs-leading-loose);
  border-top: 1px solid var(--cs-border);
}


/* ============================================================================
   SECTION 15 — FOOTER
   ============================================================================ */

/* ── Site Footer
   Purpose: Full-width footer. Navy background.
   Four-column layout desktop. Stacked mobile.
   Includes: logo, about blurb, nav columns, newsletter, legal line.
   ─────────────────────────────────────────────────────────────────────────── */

.cs-footer {
  background-color: var(--cs-navy);
  color: rgba(255,255,255,0.75);
  padding-top: var(--cs-space-12);
}
@media (min-width: 1024px) { .cs-footer { padding-top: var(--cs-space-20); } }

.cs-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cs-space-8);
  padding-bottom: var(--cs-space-10);
}
@media (min-width: 640px) {
  .cs-footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .cs-footer__grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--cs-space-10);
  }
}

/* ── Footer Columns ── */
.cs-footer-col {}

.cs-footer-col__heading {
  font-family: var(--cs-font-body);
  font-size: var(--cs-text-xs);
  font-weight: 600;
  letter-spacing: var(--cs-tracking-widest);
  text-transform: uppercase;
  color: var(--cs-gold-lt);
  margin-bottom: var(--cs-space-4);
  padding-bottom: var(--cs-space-2);
  border-bottom: 1px solid rgba(196,151,42,0.3);
}

.cs-footer-col__about {
  font-family: var(--cs-font-body);
  font-size: var(--cs-text-sm);
  color: rgba(255,255,255,0.60);
  line-height: var(--cs-leading-loose);
  margin-bottom: var(--cs-space-5);
}

.cs-footer-col__address {
  font-family: var(--cs-font-body);
  font-size: var(--cs-text-sm);
  font-style: normal;
  color: rgba(255,255,255,0.55);
  line-height: var(--cs-leading-loose);
}

.cs-footer-nav {
  display: flex;
  flex-direction: column;
  gap: var(--cs-space-2);
}

.cs-footer-nav__link {
  font-family: var(--cs-font-body);
  font-size: var(--cs-text-sm);
  color: rgba(255,255,255,0.65);
  transition: color var(--cs-duration-fast), padding-left var(--cs-duration-fast);
}
.cs-footer-nav__link:hover {
  color: var(--cs-gold-lt);
  padding-left: var(--cs-space-2);
}

/* ── Footer Bottom Bar ── */
.cs-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.10);
  padding-block: var(--cs-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--cs-space-4);
  align-items: center;
  text-align: center;
}
@media (min-width: 640px) {
  .cs-footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

.cs-footer__legal {
  font-family: var(--cs-font-body);
  font-size: var(--cs-text-xs);
  color: rgba(255,255,255,0.40);
  line-height: var(--cs-leading-loose);
}

.cs-footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--cs-space-4);
}
@media (min-width: 640px) {
  .cs-footer__legal-links { justify-content: flex-end; }
}

.cs-footer__legal-link {
  font-family: var(--cs-font-body);
  font-size: var(--cs-text-xs);
  color: rgba(255,255,255,0.40);
  transition: color var(--cs-duration-fast);
}
.cs-footer__legal-link:hover { color: var(--cs-gold-lt); }


/* ============================================================================
   SECTION 16 — MODAL & OVERLAY
   ============================================================================ */

/* ── Modal
   Purpose: Quick-view product modal and any full-screen overlays.
   JS toggles .is-open on .cs-modal.
   ─────────────────────────────────────────────────────────────────────────── */

.cs-modal-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(26,43,78,0.55);
  backdrop-filter: blur(4px);
  z-index: calc(var(--cs-z-modal) - 1);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--cs-space-4);
}
.cs-modal-backdrop.is-open {
  display: flex;
}

.cs-modal {
  position: relative;
  background-color: var(--cs-white);
  border-radius: var(--cs-radius-md);
  box-shadow: var(--cs-shadow-lg);
  width: 100%;
  max-width: 860px;
  max-height: 90vh;
  overflow-y: auto;
  animation: cs-modal-in var(--cs-duration-slow) var(--cs-ease-out);
}
@keyframes cs-modal-in {
  from { opacity: 0; transform: scale(0.95) translateY(16px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

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

.cs-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--cs-radius);
  color: var(--cs-navy);
  cursor: pointer;
  transition: background-color var(--cs-duration-fast);
}
.cs-modal__close:hover {
  background-color: var(--cs-ivory);
  color: var(--cs-gold);
}

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


/* ============================================================================
   SECTION 17 — UTILITY CLASSES
   ============================================================================ */

/* ── Visually Hidden (screen-reader only)
   Purpose: Accessible labels not shown visually.
   ─────────────────────────────────────────────────────────────────────────── */

.cs-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

/* ── Text Alignment ── */
.cs-text-left    { text-align: left; }
.cs-text-centre  { text-align: center; }
.cs-text-right   { text-align: right; }

/* ── Display ── */
.cs-hidden   { display: none; }
.cs-block    { display: block; }
.cs-flex     { display: flex; }
.cs-grid-u   { display: grid; }

/* ── Flex Utilities ── */
.cs-flex-centre  { display: flex; align-items: center; justify-content: center; }
.cs-flex-between { display: flex; align-items: center; justify-content: space-between; }
.cs-flex-col     { display: flex; flex-direction: column; }
.cs-flex-wrap    { flex-wrap: wrap; }
.cs-gap-2  { gap: var(--cs-space-2); }
.cs-gap-3  { gap: var(--cs-space-3); }
.cs-gap-4  { gap: var(--cs-space-4); }
.cs-gap-6  { gap: var(--cs-space-6); }

/* ── Colour Utilities ── */
.cs-text-navy    { color: var(--cs-navy); }
.cs-text-gold    { color: var(--cs-gold); }
.cs-text-white   { color: var(--cs-white); }
.cs-text-muted-u { color: var(--cs-text-muted); }
.cs-bg-navy      { background-color: var(--cs-navy); }
.cs-bg-gold      { background-color: var(--cs-gold); }
.cs-bg-cream     { background-color: var(--cs-cream); }
.cs-bg-ivory     { background-color: var(--cs-ivory); }
.cs-bg-white     { background-color: var(--cs-white); }

/* ── Spacing Utilities ── */
.cs-mt-0  { margin-top: 0; }
.cs-mt-4  { margin-top: var(--cs-space-4); }
.cs-mt-6  { margin-top: var(--cs-space-6); }
.cs-mt-8  { margin-top: var(--cs-space-8); }
.cs-mb-4  { margin-bottom: var(--cs-space-4); }
.cs-mb-6  { margin-bottom: var(--cs-space-6); }
.cs-mb-8  { margin-bottom: var(--cs-space-8); }
.cs-pt-0  { padding-top: 0; }
.cs-pb-0  { padding-bottom: 0; }

/* ── Divider ── */
.cs-divider {
  border: none;
  border-top: 1px solid var(--cs-border);
  margin-block: var(--cs-space-6);
}

/* ── Aspect Ratios ── */
.cs-ratio-16-9  { aspect-ratio: 16/9; }
.cs-ratio-4-3   { aspect-ratio: 4/3; }
.cs-ratio-1-1   { aspect-ratio: 1/1; }
.cs-ratio-3-4   { aspect-ratio: 3/4; }

/* ── Focus Management ── */
.cs-focus-ring:focus-visible {
  outline: 2px solid var(--cs-gold);
  outline-offset: 3px;
  border-radius: var(--cs-radius-sm);
}

/* ── Reduced Motion
   Purpose: Respects user preference for reduced motion.
   ─────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ============================================================================
   SECTION 18 — WOODMART OVERRIDES
   ============================================================================
   Purpose: Targeted overrides of WoodMart theme defaults to apply the
   Challotte & Sons brand. These must be loaded AFTER WoodMart's stylesheet.
   Use child theme style.css or WoodMart > Custom CSS field.
   ============================================================================ */

/* Override WoodMart accent colour (default teal) → Heritage Gold */
:root {
  --wd-primary-color: var(--cs-gold);
  --wd-primary-color-hover: var(--cs-navy);
  --wd-top-bar-bg-color: var(--cs-navy);
  --wd-header-bg-color: var(--cs-white);
  --wd-footer-bg-color: var(--cs-navy);
}

/* WoodMart product card hover border → gold */
.product-element-top .hover-img::after {
  border-color: var(--cs-gold) !important;
}

/* WoodMart cart button background → Heritage Gold */
.wd-add-btn .button.add_to_cart_button {
  background-color: var(--cs-gold) !important;
  color: var(--cs-navy) !important;
}
.wd-add-btn .button.add_to_cart_button:hover {
  background-color: var(--cs-navy) !important;
  color: var(--cs-white) !important;
}

/* WoodMart product tab active underline → gold */
.wd-tabs .wd-tab.current {
  border-bottom-color: var(--cs-gold) !important;
  color: var(--cs-gold) !important;
}


/* ============================================================================
   END OF CSS SPECIFICATION
   challotteandsons.com  ·  Version 1.0  ·  May 2026
   ============================================================================

   COMPONENT SUMMARY
   ─────────────────────────────────────────────────────────────────────────────
   Section 01  Design Tokens         —  All CSS custom properties
   Section 02  Reset & Base          —  Body, links, images, lists
   Section 03  Typography            —  cs-h1–h6, cs-display, cs-section-label,
                                        cs-eyebrow, cs-body, cs-caption, cs-price,
                                        cs-link
   Section 04  Layout & Grid         —  cs-container, cs-section, cs-grid, cs-split,
                                        cs-rule
   Section 05  Navigation            —  cs-utility-bar, cs-header, cs-logo,
                                        cs-nav-main, cs-nav-item, cs-mega-menu,
                                        cs-mega-col, cs-nav-editorial, cs-header-icons,
                                        cs-header-icon, cs-hamburger, cs-nav-drawer,
                                        cs-breadcrumb
   Section 06  Hero & Banners        —  cs-hero, cs-hero__slide, cs-hero__content,
                                        cs-hero__overlay, cs-promo-banner
   Section 07  Buttons & CTAs        —  cs-btn, --primary, --secondary, --ghost,
                                        --ghost-gold, --text, --sm, --lg, --full
   Section 08  Product Components    —  cs-product-card, cs-product-card__actions,
                                        cs-product-card__action-btn, cs-badge (new,
                                        hot, sale, verified, provenance),
                                        cs-category-tile, cs-product-tabs, cs-tab-btn,
                                        cs-tab-panel
   Section 09  Trust & Social Proof  —  cs-trust-strip, cs-trust-pillar, cs-rating,
                                        cs-payment-icons
   Section 10  Content Cards         —  cs-journal-card, cs-testimonial-card,
                                        cs-shoppable-map, cs-hotspot
   Section 11  Section Headers       —  cs-section-header
   Section 12  Forms                 —  cs-form-group, cs-form-label, cs-input,
                                        cs-select, cs-textarea, cs-newsletter,
                                        cs-search-bar
   Section 13  Commerce Utilities    —  cs-add-to-cart, cs-qty-selector,
                                        cs-stock-counter, cs-shipping-info
   Section 14  Accordion (FAQ)       —  cs-accordion, cs-accordion-item,
                                        cs-accordion-trigger, cs-accordion-panel
   Section 15  Footer                —  cs-footer, cs-footer__grid, cs-footer-col,
                                        cs-footer-nav, cs-footer__bottom
   Section 16  Modal & Overlay       —  cs-modal-backdrop, cs-modal
   Section 17  Utility Classes       —  cs-sr-only, alignment, flex, colour, spacing,
                                        ratio, reduced-motion
   Section 18  WoodMart Overrides    —  Targeted theme variable overrides

   TOTAL COMPONENTS: 68 named components / modifier variants
   BREAKPOINTS: Mobile base → 640px → 1024px → 1280px
   PREFIX: cs-  (all classes)
   ============================================================================ */