/** Shopify CDN: Minification failed

Line 1367:71 Unexpected "*"

**/
/* ===================================================
   COTTON AND SAND — Design System CSS

   Colour token layers (top-down precedence):
     1. --cs-color-* (canonical palette) — search "Core brand colour tokens"
     2. --cs-bg-* / --cs-highlight-* / --cs-text-* / --cs-eyebrow
        (legacy aliases, all point to --cs-color-* via var())
     3. --cotton-white / --dust / --sand / --warm-dark / ...
        (theme-wide legacy aliases for templates outside this file)

   All hex values live on layer 1 only. Editing the palette = editing
   one place. Token cleanup pass v1.
   =================================================== */

/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Brand surface and accent tokens are defined further down via the
     --cs-color-* palette and then aliased through var(). The earlier
     hex definitions that lived here were dead code — overridden in the
     same :root scope. Removed in token cleanup pass v1. */

  /* Legacy variable mapping for existing theme code */
  --cotton-white: var(--cs-bg-main);
  --dust: var(--cs-bg-section);
  --sand: var(--cs-highlight);
  --terracotta: var(--cs-eyebrow);
  --anchor-sand: var(--cs-highlight);
  --deeper-sand: var(--cs-highlight-hover);
  --clay-accent: var(--cs-eyebrow);
  --warm-dark: var(--cs-text-main);
  --text-primary: var(--cs-text-main);
  --text-muted: var(--cs-text-muted);
  --border-color: rgba(44, 26, 14, 0.16);
  --font-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 32px;
  --spacing-lg: 64px;
  --spacing-xl: 120px;
  --spacing-xxl: 160px;
  --max-width: 1440px;
  --transition: 0.3s ease;
}

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  background-color: var(--cotton-white);
  color: var(--text-primary);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { display: block; width: 100%; height: 100%; object-fit: cover; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: var(--font-sans); }

/* ===== TYPOGRAPHY ===== */
.section-eyebrow {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
  font-weight: 500;
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-block;
  padding: 14px 32px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-radius: 0;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
  cursor: pointer;
  font-family: var(--font-sans);
}

.btn-primary {
  background-color: var(--cs-highlight-button);
  color: var(--cs-text-main);
  border: 1px solid var(--cs-highlight-button-border);
}
.btn-primary:hover {
  background-color: var(--cs-highlight-hover);
  color: var(--cs-bg-main);
  border-color: var(--cs-highlight-hover);
}

.btn-secondary {
  background-color: transparent;
  color: var(--warm-dark);
  border: 1px solid var(--warm-dark);
}
.btn-secondary:hover {
  background-color: var(--dust);
}

.btn-secondary-light {
  background-color: transparent;
  color: var(--cotton-white);
  border: 1px solid var(--cotton-white);
}
.btn-secondary-light:hover {
  background-color: rgba(253, 252, 249, 0.15);
}

/* ===== ANNOUNCEMENT BAR ===== */
.announcement-bar {
  background-color: var(--anchor-sand);
  color: var(--warm-dark);
  text-align: center;
  padding: 10px var(--spacing-md);
  font-size: 12px;
  letter-spacing: 0.08em;
}

/* ===== NAVIGATION ===== */
.nav-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--cotton-white);
  border-bottom: 1px solid var(--border-color);
}

.nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-md);
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-left, .nav-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex: 1;
}
.nav-right { justify-content: flex-end; }

.nav-link {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-primary);
  position: relative;
  padding-bottom: 2px;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--terracotta);
  transition: width var(--transition);
}
.nav-link:hover::after { width: 100%; }

.nav-center { flex: 0 0 auto; }

.logo-text {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--warm-dark);
}

.nav-icon-btn {
  color: var(--text-primary);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  transition: color var(--transition);
}
.nav-icon-btn:hover { color: var(--terracotta); }

.cart-count {
  position: absolute;
  top: -4px;
  right: -6px;
  background-color: var(--terracotta);
  color: white;
  font-size: 9px;
  font-weight: 600;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== HERO SECTION ===== */
/* Height and object-position are fully controlled by the
   Realm-style full-bleed system at the bottom of this file.
   Only non-overridden structural rules are kept here. */
.hero {
  position: relative;
  overflow: hidden;

  /* Gap between CS Hero and CS Dual Category.
     margin-bottom (not border-bottom + content-box) keeps the hero's
     declared height intact so the image fills the full 800px stage
     instead of being squeezed into 750px of inner box. */
  margin-bottom: 50px;
  background-color: #FDFCF9;
}

.hero-image-wrap {
  position: absolute;
  inset: 0;
}

.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* object-position controlled by --cs-hero-media-position-* variables below */
}

.hero-overlay {
  position: absolute;
  inset: 0;
  /* Realm pattern: flat dark color + uniform opacity, not a gradient.
     Final color and opacity are governed by the full-bleed block below
     via --cs-hero-overlay-color and --cs-hero-overlay-opacity. */
  background: #24150d;
}

.hero-content {
  position: absolute;
  bottom: 80px;
  left: 80px;
  max-width: 520px;
  color: var(--cotton-white);
}

.hero-eyebrow {
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--dust);
  margin-bottom: 16px;
  font-weight: 500;
}

.hero-title {
  font-family: var(--font-sans);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--cotton-white);
  margin-bottom: 20px;
}

.hero-subtitle {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(249, 246, 240, 0.85);
  margin-bottom: 36px;
  max-width: 380px;
  font-weight: 300;
}

.hero-ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.hero-scroll-indicator {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
}
.hero-scroll-indicator span {
  display: block;
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, transparent, rgba(249,246,240,0.6));
  animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; transform: scaleY(0.8); }
  50% { opacity: 1; transform: scaleY(1); }
}

/* ===== DUAL CATEGORY ===== */
.dual-category {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 30px;
  background-color: #FDFCF9
}

.dual-item {
  position: relative;
  height: 70vh;
  min-height: 500px;
  overflow: hidden;
}

.dual-image-wrap {
  position: absolute;
  inset: 0;
  transition: transform 0.6s ease;
}
.dual-item:hover .dual-image-wrap { transform: scale(1.03); }

.dual-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(44, 26, 14, 0.65) 0%, transparent 60%);
}

.dual-label {
  position: absolute;
  bottom: 48px;
  left: 48px;
  color: var(--cotton-white);
}

.dual-eyebrow {
  display: block;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dust);
  margin-bottom: 10px;
}

.dual-title {
  font-size: clamp(24px, 2.5vw, 36px);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: 24px;
}

/* ===== PRODUCT SECTION ===== */
.product-section {
  padding: var(--spacing-xl) var(--spacing-md);
  max-width: var(--max-width);
  margin: 0 auto;
}

.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--spacing-lg);
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.section-title {
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--warm-dark);
}

.section-filters {
  display: flex;
  gap: 0;
}

.filter-tag {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px 20px;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  background: transparent;
  transition: all var(--transition);
  margin-left: -1px;
}
.filter-tag:hover, .filter-tag.active {
  background-color: var(--anchor-sand);
  color: var(--warm-dark);
  border-color: var(--anchor-sand);
  z-index: 1;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.product-card { cursor: pointer; }

.product-image-wrap {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  background-color: var(--dust);
  margin-bottom: 14px;
}

.product-image-wrap img {
  transition: transform 0.5s ease;
  object-position: center top;
}
.product-card:hover .product-image-wrap img { transform: scale(1.04); }

.product-hover {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 16px 16px;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
.product-card:hover .product-hover { transform: translateY(0); }

.btn-quick-add {
  width: 100%;
  padding: 12px;
  background-color: var(--anchor-sand);
  color: var(--warm-dark);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-family: var(--font-sans);
  transition: background-color var(--transition);
}
.btn-quick-add:hover { background-color: var(--deeper-sand); }

.product-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background-color: var(--anchor-sand);
  color: var(--warm-dark);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  padding: 4px 8px;
}

.product-name {
  font-size: 14px;
  font-weight: 400;
  color: var(--warm-dark);
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}

.product-price {
  font-size: 13px;
  color: var(--terracotta);
  font-weight: 500;
}

.section-footer-cta {
  text-align: center;
  margin-top: var(--spacing-lg);
}

/* ===== MATERIAL STORY ===== */
.material-story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 600px;

  /* Top spacing above CS Material Story */
  padding-top: 50px;
  background-color: #FDFCF9;
}

.material-text {
  background-color: var(--dust);
  padding: var(--spacing-xxl) var(--spacing-xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.material-title {
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--warm-dark);
  margin-bottom: 24px;
}

.material-body {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-primary);
  margin-bottom: 40px;
  max-width: 420px;
  font-weight: 300;
}

.material-image {
  overflow: hidden;
}
.material-image img {
  transition: transform 0.8s ease;
}
.material-image:hover img { transform: scale(1.04); }

/* ===== CRAFT SECTION ===== */
.craft-section {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  min-height: 500px;

  /* Top spacing above CS Craft Section */
  padding-top: 50px;
  background-color: #FDFCF9;
}

.craft-image {
  overflow: hidden;
}
.craft-image img { transition: transform 0.8s ease; }
.craft-image:hover img { transform: scale(1.04); }

.craft-text {
  background-color: var(--anchor-sand);
  padding: var(--spacing-xl) var(--spacing-lg);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.craft-text .section-eyebrow { color: var(--sand); }

.craft-title {
  font-size: clamp(22px, 2.5vw, 36px);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--warm-dark);
  margin-bottom: 20px;
}

.craft-body {
  font-size: 14px;
  line-height: 1.8;
  color: rgba(44, 26, 14, 0.72);
  font-weight: 300;
}

/* ===== TRUST BAR ===== */
.trust-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px var(--spacing-md);
  background-color: var(--cotton-white);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  gap: 0;
  flex-wrap: wrap;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 48px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.trust-item svg { color: var(--terracotta); flex-shrink: 0; }

.trust-divider {
  width: 1px;
  height: 32px;
  background-color: var(--border-color);
}

/* ===== NEWSLETTER ===== */
.newsletter-section {
  background-color: var(--dust);
  border-top: 50px solid #FDFCF9;
  padding: var(--spacing-xl) var(--spacing-md);
  text-align: center;
}

.newsletter-inner {
  max-width: 600px;
  margin: 0 auto;
}

.newsletter-title {
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--warm-dark);
  margin-bottom: 16px;
  line-height: 1.15;
}

.newsletter-body {
  font-size: 15px;
  color: var(--text-muted);
  margin-bottom: 36px;
  font-weight: 300;
  line-height: 1.7;
}

.newsletter-form {
  display: flex;
  gap: 0;
  max-width: 480px;
  margin: 0 auto;
}

.newsletter-input {
  flex: 1;
  padding: 14px 20px;
  border: 1px solid var(--warm-dark);
  background: transparent;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--warm-dark);
  font-family: var(--font-sans);
  outline: none;
  border-radius: 0;
}
.newsletter-input::placeholder { color: var(--text-muted); }
.newsletter-input:focus { border-color: var(--terracotta); }

.newsletter-form .btn {
  border-left: none;
}

/* ===== FOOTER ===== */
.site-footer {
  background-color: var(--anchor-sand);
  color: var(--warm-dark);
  padding: var(--spacing-xl) var(--spacing-md) var(--spacing-md);
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--spacing-lg);
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid rgba(44, 26, 14, 0.15);
}

.footer-heading {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--warm-dark);
  margin-bottom: 20px;
}

.footer-tagline {
  font-size: 13px;
  line-height: 1.7;
  color: rgba(44, 26, 14, 0.72);
  margin-bottom: 24px;
  font-weight: 300;
}

.footer-social {
  display: flex;
  gap: 16px;
}
.footer-social a {
  color: rgba(44, 26, 14, 0.62);
  transition: color var(--transition);
}
.footer-social a:hover { color: var(--sand); }

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-links a {
  font-size: 13px;
  color: rgba(44, 26, 14, 0.72);
  transition: color var(--transition);
  font-weight: 300;
}
.footer-links a:hover { color: var(--clay-accent); }

.footer-bottom {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-top: var(--spacing-md);
  font-size: 12px;
  color: rgba(44, 26, 14, 0.48);
  text-align: center;
}

/* ===== ABOUT PAGE STYLES ===== */
.page-hero {
  background-color: var(--dust);
  padding: var(--spacing-xxl) var(--spacing-md);
  text-align: center;
}

.page-hero-eyebrow {
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 20px;
  font-weight: 500;
}

.page-hero-quote {
  font-family: var(--font-serif);
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.3;
  color: var(--warm-dark);
  max-width: 800px;
  margin: 0 auto 24px;
}

.page-hero-attribution {
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.about-intro {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--spacing-xl) var(--spacing-md);
  text-align: center;
}

.about-intro-title {
  font-size: clamp(20px, 2.5vw, 32px);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--warm-dark);
  margin-bottom: 24px;
}

.about-intro-body {
  font-size: 16px;
  line-height: 1.85;
  color: var(--text-primary);
  font-weight: 300;
}

.about-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 600px;
}

.about-split.reverse { direction: rtl; }
.about-split.reverse > * { direction: ltr; }

.about-split-image {
  overflow: hidden;
}
.about-split-image img { transition: transform 0.8s ease; }
.about-split-image:hover img { transform: scale(1.03); }

.about-split-text {
  padding: var(--spacing-xl) var(--spacing-xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--cotton-white);
}

.about-split-title {
  font-size: clamp(22px, 2.5vw, 36px);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--warm-dark);
  margin-bottom: 20px;
  line-height: 1.1;
}

.about-split-body {
  font-size: 15px;
  line-height: 1.85;
  color: var(--text-primary);
  font-weight: 300;
  max-width: 420px;
}

.about-values {
  padding: var(--spacing-xl) var(--spacing-md);
  background-color: var(--dust);
  text-align: center;
}

.about-values-title {
  font-size: clamp(20px, 2.5vw, 32px);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--warm-dark);
  margin-bottom: var(--spacing-lg);
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
  max-width: 960px;
  margin: 0 auto;
}

.value-item { padding: var(--spacing-md); }

.value-icon {
  width: 48px;
  height: 48px;
  border: 1px solid var(--sand);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--spacing-sm);
  color: var(--terracotta);
}

.value-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--warm-dark);
  margin-bottom: 12px;
}

.value-body {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-muted);
  font-weight: 300;
}

.about-cta-section {
  background-color: var(--anchor-sand);
  padding: var(--spacing-xl) var(--spacing-md);
  text-align: center;
}

.about-cta-title {
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--warm-dark);
  margin-bottom: 16px;
}

.about-cta-body {
  font-size: 15px;
  color: rgba(44, 26, 14, 0.72);
  margin-bottom: 36px;
  font-weight: 300;
}

/* ===== FAQ PAGE STYLES ===== */
.faq-hero {
  background-color: var(--cotton-white);
  padding: var(--spacing-xl) var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--border-color);
  text-align: center;
}

.faq-hero-title {
  font-size: clamp(24px, 3vw, 44px);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--warm-dark);
  margin-bottom: 16px;
}

.faq-hero-subtitle {
  font-size: 15px;
  color: var(--text-muted);
  font-weight: 300;
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.7;
}

.faq-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--spacing-xl) var(--spacing-md);
  gap: var(--spacing-xl);
  align-items: start;
}

.faq-sidebar {
  position: sticky;
  top: 100px;
}

.faq-sidebar-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.faq-nav {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.faq-nav-item {
  display: block;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted);
  border-left: 2px solid transparent;
  transition: all var(--transition);
  cursor: pointer;
  letter-spacing: 0.02em;
}
.faq-nav-item:hover, .faq-nav-item.active {
  color: var(--warm-dark);
  border-left-color: var(--terracotta);
  background-color: rgba(149, 66, 26, 0.05);
}

.faq-content { }

.faq-group {
  margin-bottom: var(--spacing-xl);
}

.faq-group-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: var(--spacing-md);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}

.faq-item {
  border-bottom: 1px solid var(--border-color);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--warm-dark);
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  letter-spacing: 0.01em;
  transition: color var(--transition);
}
.faq-question:hover { color: var(--terracotta); }

.faq-icon {
  width: 20px;
  height: 20px;
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition);
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
}
.faq-item.open .faq-icon {
  background-color: var(--anchor-sand);
  border-color: var(--anchor-sand);
  color: var(--warm-dark);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s ease;
}
.faq-item.open .faq-answer {
  max-height: 500px;
  padding-bottom: 24px;
}

.faq-answer p {
  font-size: 14px;
  line-height: 1.85;
  color: var(--text-muted);
  font-weight: 300;
}

.faq-answer ul {
  margin-top: 12px;
  padding-left: 20px;
}
.faq-answer ul li {
  list-style: disc;
  font-size: 14px;
  line-height: 1.85;
  color: var(--text-muted);
  font-weight: 300;
  margin-bottom: 4px;
}

.faq-contact-cta {
  background-color: var(--dust);
  padding: var(--spacing-xl) var(--spacing-md);
  text-align: center;
  margin-top: var(--spacing-xl);
}

.faq-contact-title {
  font-size: clamp(20px, 2.5vw, 32px);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--warm-dark);
  margin-bottom: 12px;
}

.faq-contact-body {
  font-size: 15px;
  color: var(--text-muted);
  margin-bottom: 28px;
  font-weight: 300;
}


/* ============================================================
   COLLECTION PAGE
   ============================================================ */
.collection-banner{background-color:var(--dust,#F0E6DA);padding:80px 32px 60px;text-align:center;border-bottom:1px solid var(--border-color,rgba(44,26,14,0.16))}
.collection-banner-eyebrow{font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:var(--text-muted,#6F5B46);margin-bottom:12px;font-weight:500}
.collection-banner-title{font-size:clamp(28px,4vw,52px);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--warm-dark,#2C1A0E);margin-bottom:12px}
.collection-banner-desc{font-size:15px;color:var(--text-muted,#6F5B46);font-weight:300;max-width:480px;margin:0 auto;line-height:1.7}
.collection-toolbar{max-width:1440px;margin:0 auto;padding:24px 32px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border-color,rgba(44,26,14,0.16));gap:16px;flex-wrap:wrap}
.collection-count{font-size:12px;letter-spacing:.08em;color:var(--text-muted,#6F5B46);text-transform:uppercase}
.toolbar-right{display:flex;align-items:center;gap:24px}
.filter-toggle{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--warm-dark,#2C1A0E);cursor:pointer;background:none;border:none;font-family:var(--font-sans,'Inter',sans-serif);padding:0;transition:color .3s ease}
.filter-toggle:hover{color:var(--terracotta,#7E6A5A)}
.sort-select{font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--warm-dark,#2C1A0E);background:none;border:none;border-bottom:1px solid var(--border-color,rgba(44,26,14,0.16));padding:4px 24px 4px 0;cursor:pointer;font-family:var(--font-sans,'Inter',sans-serif);appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232C1A0E' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 4px center}
.collection-layout{max-width:1440px;margin:0 auto;padding:48px 32px 120px;display:grid;grid-template-columns:240px 1fr;gap:64px;align-items:start}
.filter-sidebar{position:sticky;top:90px}
.filter-group{border-bottom:1px solid var(--border-color,rgba(44,26,14,0.16));padding-bottom:24px;margin-bottom:24px}
.filter-group:last-child{border-bottom:none}
.filter-group-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;margin-bottom:16px}
.filter-group-title{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--warm-dark,#2C1A0E)}
.filter-group-icon{color:var(--text-muted,#6F5B46);font-size:18px;line-height:1;transition:transform .3s ease}
.filter-group.open .filter-group-icon{transform:rotate(45deg)}
.filter-options{display:flex;flex-direction:column;gap:10px}
.filter-option{display:flex;align-items:center;gap:10px;cursor:pointer}
.filter-option-label{font-size:13px;color:var(--text-muted,#6F5B46);font-weight:300;transition:color .3s ease}
.filter-option:hover .filter-option-label{color:var(--warm-dark,#2C1A0E)}
.filter-option-count{font-size:11px;color:var(--text-muted,#6F5B46);margin-left:auto}
.collection-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pagination{display:flex;align-items:center;justify-content:center;gap:4px;padding:64px 0}
.page-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:500;color:var(--text-muted,#6F5B46);border:1px solid transparent;transition:all .3s ease;cursor:pointer;background:none;font-family:var(--font-sans,'Inter',sans-serif)}
.page-btn:hover,.page-btn.active{border-color:var(--warm-dark,#2C1A0E);color:var(--warm-dark,#2C1A0E)}
.page-btn.active{background-color:var(--anchor-sand,#B8A38E);color:var(--warm-dark,#2C1A0E)}

/* ============================================================
   PRODUCT DETAIL PAGE
   ============================================================ */
.cs-breadcrumb{max-width:1440px;margin:0 auto;padding:20px 32px 0;display:flex;gap:8px;align-items:center}
.cs-breadcrumb a,.cs-breadcrumb span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted,#6F5B46);font-weight:400}
.cs-breadcrumb a:hover{color:var(--terracotta,#7E6A5A)}
.cs-breadcrumb .sep{color:var(--border-color,rgba(44,26,14,0.16))}
.cs-product-layout{max-width:1440px;margin:0 auto;padding:32px 32px 120px;display:grid;grid-template-columns:1fr 480px;gap:80px;align-items:start}
.cs-product-gallery{display:grid;grid-template-columns:80px 1fr;gap:12px}
.cs-gallery-thumbs{display:flex;flex-direction:column;gap:8px}
.cs-gallery-thumb{aspect-ratio:1;overflow:hidden;cursor:pointer;border:1px solid transparent;transition:border-color .3s ease}
.cs-gallery-thumb.active{border-color:var(--warm-dark,#2C1A0E)}
.cs-gallery-main{aspect-ratio:3/4;overflow:hidden}
.cs-gallery-main img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.cs-gallery-main:hover img{transform:scale(1.03)}
.cs-product-info-col{position:sticky;top:90px}
.cs-product-vendor{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted,#6F5B46);margin-bottom:10px}
.cs-product-title{font-size:clamp(22px,2.5vw,34px);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--warm-dark,#2C1A0E);line-height:1.1;margin-bottom:16px}
.cs-product-price-main{font-size:20px;font-weight:500;color:var(--terracotta,#7E6A5A);margin-bottom:24px;display:block}
.cs-size-options{display:flex;gap:8px;margin-bottom:24px;flex-wrap:wrap}
.cs-size-btn{width:48px;height:48px;border:1px solid var(--border-color,rgba(44,26,14,0.16));font-size:12px;font-weight:500;letter-spacing:.08em;color:var(--warm-dark,#2C1A0E);background:transparent;cursor:pointer;font-family:var(--font-sans,'Inter',sans-serif);transition:all .3s ease}
.cs-size-btn:hover{border-color:var(--warm-dark,#2C1A0E)}
.cs-size-btn.active{background-color:var(--anchor-sand,#B8A38E);color:var(--warm-dark,#2C1A0E);border-color:var(--warm-dark,#2C1A0E)}
.cs-size-btn.sold-out{color:var(--border-color,rgba(44,26,14,0.16));cursor:not-allowed}
.cs-qty-cart-row{display:flex;gap:12px;margin-bottom:16px}
.cs-qty-control{display:flex;align-items:center;border:1px solid var(--border-color,rgba(44,26,14,0.16));flex-shrink:0}
.cs-qty-btn{width:44px;height:52px;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--warm-dark,#2C1A0E);background:none;border:none;cursor:pointer;font-family:var(--font-sans,'Inter',sans-serif);transition:color .3s ease}
.cs-qty-btn:hover{color:var(--terracotta,#7E6A5A)}
.cs-qty-input{width:48px;text-align:center;border:none;border-left:1px solid var(--border-color,rgba(44,26,14,0.16));border-right:1px solid var(--border-color,rgba(44,26,14,0.16));font-size:14px;font-weight:500;color:var(--warm-dark,#2C1A0E);font-family:var(--font-sans,'Inter',sans-serif);background:transparent;height:52px}
.cs-qty-input:focus{outline:none}
.cs-btn-add-cart{flex:1;height:52px;background-color:var(--anchor-sand,#B8A38E);color:var(--warm-dark,#2C1A0E);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;font-family:var(--font-sans,'Inter',sans-serif);border:none;cursor:pointer;transition:background-color .3s ease}
.cs-btn-add-cart:hover{background-color:var(--deeper-sand,#A48D78)}
.cs-btn-buy-now{width:100%;height:52px;background:transparent;color:var(--warm-dark,#2C1A0E);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;font-family:var(--font-sans,'Inter',sans-serif);border:1px solid var(--warm-dark,#2C1A0E);cursor:pointer;margin-bottom:28px;transition:all .3s ease}
.cs-btn-buy-now:hover{background-color:var(--anchor-sand,#B8A38E);color:var(--warm-dark,#2C1A0E)}
.cs-product-trust-mini{display:flex;flex-direction:column;gap:10px;padding:20px 0;border-top:1px solid var(--border-color,rgba(44,26,14,0.16));border-bottom:1px solid var(--border-color,rgba(44,26,14,0.16));margin-bottom:28px}
.cs-trust-mini-item{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--text-muted,#6F5B46);font-weight:300}
.cs-product-tab{border-bottom:1px solid var(--border-color,rgba(44,26,14,0.16))}
.cs-product-tab-header{width:100%;display:flex;align-items:center;justify-content:space-between;padding:18px 0;font-size:12px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--warm-dark,#2C1A0E);background:none;border:none;cursor:pointer;font-family:var(--font-sans,'Inter',sans-serif);text-align:left;transition:color .3s ease}
.cs-product-tab-header:hover{color:var(--terracotta,#7E6A5A)}
.cs-product-tab-icon{font-size:18px;line-height:1;transition:transform .3s ease;color:var(--text-muted,#6F5B46)}
.cs-product-tab.open .cs-product-tab-icon{transform:rotate(45deg)}
.cs-product-tab-body{max-height:0;overflow:hidden;transition:max-height .4s ease,padding .3s ease}
.cs-product-tab.open .cs-product-tab-body{max-height:400px;padding-bottom:20px}
.cs-product-tab-body p,.cs-product-tab-body li{font-size:14px;line-height:1.85;color:var(--text-muted,#6F5B46);font-weight:300}
.cs-product-tab-body ul{padding-left:18px}
.cs-product-tab-body li{list-style:disc;margin-bottom:4px}
.cs-related-section{padding:120px 32px;max-width:1440px;margin:0 auto;border-top:1px solid var(--border-color,rgba(44,26,14,0.16))}

/* ============================================================
   CART PAGE
   ============================================================ */
.cs-cart-page-header{text-align:center;padding:64px 32px 40px;border-bottom:1px solid var(--border-color,rgba(44,26,14,0.16))}
.cs-cart-page-title{font-size:clamp(24px,3vw,40px);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--warm-dark,#2C1A0E)}
.cs-cart-layout{max-width:1100px;margin:0 auto;padding:48px 32px 120px;display:grid;grid-template-columns:1fr 360px;gap:64px;align-items:start}
.cs-cart-items-header{display:grid;grid-template-columns:1fr 120px 120px 80px;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--border-color,rgba(44,26,14,0.16))}
.cs-cart-col-label{font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted,#6F5B46)}
.cs-cart-item{display:grid;grid-template-columns:1fr 120px 120px 80px;gap:16px;padding:28px 0;border-bottom:1px solid var(--border-color,rgba(44,26,14,0.16));align-items:start}
.cs-cart-item-product{display:flex;gap:20px}
.cs-cart-item-img{width:90px;height:110px;object-fit:cover;flex-shrink:0;background-color:var(--dust,#F0E6DA)}
.cs-cart-item-name{font-size:14px;font-weight:500;color:var(--warm-dark,#2C1A0E);letter-spacing:.02em;margin-bottom:6px}
.cs-cart-item-variant{font-size:12px;color:var(--text-muted,#6F5B46);font-weight:300;margin-bottom:12px}
.cs-cart-item-remove{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted,#6F5B46);text-decoration:underline;text-underline-offset:3px;background:none;border:none;cursor:pointer;font-family:var(--font-sans,'Inter',sans-serif);padding:0;transition:color .3s ease}
.cs-cart-item-remove:hover{color:var(--terracotta,#7E6A5A)}
.cs-cart-summary-col{position:sticky;top:90px;background-color:var(--dust,#F0E6DA);padding:36px 32px}
.cs-cart-summary-title{font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--warm-dark,#2C1A0E);margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid rgba(44,26,14,.15)}
.cs-cart-summary-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.cs-cart-summary-label{font-size:13px;color:var(--text-muted,#6F5B46);font-weight:300}
.cs-cart-summary-value{font-size:13px;color:var(--warm-dark,#2C1A0E);font-weight:400}
.cs-cart-summary-total-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.cs-cart-summary-total-label{font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--warm-dark,#2C1A0E)}
.cs-cart-summary-total-value{font-size:18px;font-weight:600;color:var(--warm-dark,#2C1A0E)}
.cs-btn-checkout{width:100%;height:52px;background-color:var(--anchor-sand,#B8A38E);color:var(--warm-dark,#2C1A0E);font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;font-family:var(--font-sans,'Inter',sans-serif);border:none;cursor:pointer;margin-bottom:12px;transition:background-color .3s ease}
.cs-btn-checkout:hover{background-color:var(--deeper-sand,#A48D78)}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.cs-contact-hero{background-color:var(--dust,#F0E6DA);padding:80px 32px 64px;text-align:center;border-bottom:1px solid var(--border-color,rgba(44,26,14,0.16))}
.cs-contact-hero-eyebrow{font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:var(--text-muted,#6F5B46);margin-bottom:16px;font-weight:500}
.cs-contact-hero-title{font-size:clamp(28px,4vw,52px);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--warm-dark,#2C1A0E);margin-bottom:16px}
.cs-contact-hero-sub{font-size:15px;color:var(--text-muted,#6F5B46);font-weight:300;max-width:480px;margin:0 auto;line-height:1.7}
.cs-contact-layout{max-width:1000px;margin:0 auto;padding:64px 32px 120px;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.cs-contact-info-label{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--terracotta,#7E6A5A);margin-bottom:12px}
.cs-contact-info-title{font-size:18px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--warm-dark,#2C1A0E);margin-bottom:10px}
.cs-contact-info-body{font-size:14px;line-height:1.8;color:var(--text-muted,#6F5B46);font-weight:300}
.cs-form-label{display:block;font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--warm-dark,#2C1A0E);margin-bottom:8px}
.cs-form-input,.cs-form-textarea,.cs-form-select{width:100%;padding:14px 16px;border:1px solid var(--border-color,rgba(44,26,14,0.16));background:transparent;font-size:13px;font-family:var(--font-sans,'Inter',sans-serif);color:var(--warm-dark,#2C1A0E);font-weight:300;transition:border-color .3s ease;box-sizing:border-box;border-radius:0;appearance:none}
.cs-form-input:focus,.cs-form-textarea:focus{outline:none;border-color:var(--warm-dark,#2C1A0E)}
.cs-form-textarea{height:140px;resize:vertical}
.cs-form-submit{width:100%;height:52px;background-color:var(--anchor-sand,#B8A38E);color:var(--warm-dark,#2C1A0E);font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;font-family:var(--font-sans,'Inter',sans-serif);border:none;cursor:pointer;transition:background-color .3s ease;margin-top:8px}
.cs-form-submit:hover{background-color:var(--deeper-sand,#A48D78)}

/* ============================================================
   SEARCH PAGE
   ============================================================ */
.cs-search-hero{padding:64px 32px 48px;text-align:center;border-bottom:1px solid var(--border-color,rgba(44,26,14,0.16))}
.cs-search-bar-wrap{max-width:600px;margin:0 auto;display:flex;border:1px solid var(--warm-dark,#2C1A0E)}
.cs-search-input{flex:1;padding:16px 20px;border:none;background:transparent;font-size:14px;font-family:var(--font-sans,'Inter',sans-serif);color:var(--warm-dark,#2C1A0E);letter-spacing:.04em}
.cs-search-input:focus{outline:none}
.cs-search-submit{width:52px;height:52px;background-color:var(--anchor-sand,#B8A38E);color:var(--warm-dark,#2C1A0E);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .3s ease;flex-shrink:0}
.cs-search-submit:hover{background-color:var(--deeper-sand,#A48D78)}

/* ============================================================
   404 PAGE
   ============================================================ */
.cs-error-page{min-height:calc(100vh - 280px);display:flex;align-items:center;justify-content:center;padding:120px 32px;background-color:var(--dust,#F0E6DA)}
.cs-error-inner{text-align:center;max-width:560px}
.cs-error-number{font-family:var(--font-serif,'Cormorant Garamond',Georgia,serif);font-size:clamp(80px,12vw,160px);font-weight:400;color:var(--sand,#B8A38E);line-height:1;opacity:.6;display:block}
.cs-error-title{font-size:clamp(20px,3vw,32px);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--warm-dark,#2C1A0E);margin-bottom:16px}
.cs-error-body{font-size:15px;line-height:1.7;color:var(--text-muted,#6F5B46);font-weight:300;margin-bottom:40px}
.cs-error-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.cs-error-divider{width:48px;height:1px;background-color:var(--sand,#B8A38E);margin:24px auto}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .collection-layout{grid-template-columns:1fr}
  .filter-sidebar{position:static}
  .collection-grid{grid-template-columns:repeat(2,1fr)}
  .cs-product-layout{grid-template-columns:1fr;gap:40px}
  .cs-cart-layout{grid-template-columns:1fr}
  .cs-contact-layout{grid-template-columns:1fr;gap:48px}
}
@media (max-width:768px){
  .collection-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .cs-product-gallery{grid-template-columns:1fr}
  .cs-gallery-thumbs{flex-direction:row}
  .cs-cart-items-header{display:none}
  .cs-cart-item{grid-template-columns:1fr}
}

/* =========================================================
   Cotton & Sand button text color fix
   Aligns button text with the Merz-style outline button system.
   Colour only. Layout, HTML and JS behaviour unchanged.
   ========================================================= */

/* Primary and custom CTA buttons */
a.btn.btn-primary,
a.btn.btn-primary:visited,
a.btn.btn-primary:focus,
a.btn.btn-primary:active,
button.btn.btn-primary,
button.btn.btn-primary:focus,
button.btn.btn-primary:active,
.btn.btn-primary,
.btn.btn-primary:visited,
.btn.btn-primary:focus,
.btn.btn-primary:active,
.cs-our-picks__btn,
.cs-our-picks__btn:visited,
.cs-our-picks__btn:focus,
.cs-our-picks__btn:active,
.cs-btn-add-cart,
.cs-btn-add-cart:visited,
.cs-btn-add-cart:focus,
.cs-btn-add-cart:active,
.cs-btn-checkout,
.cs-btn-checkout:visited,
.cs-btn-checkout:focus,
.cs-btn-checkout:active,
.cs-form-submit,
.cs-form-submit:visited,
.cs-form-submit:focus,
.cs-form-submit:active,
.cs-search-submit,
.cs-search-submit:visited,
.cs-search-submit:focus,
.cs-search-submit:active {
  color: var(--cs-text-main) !important;
}

a.btn.btn-primary:hover,
button.btn.btn-primary:hover,
.btn.btn-primary:hover,
.cs-our-picks__btn:hover,
.cs-btn-add-cart:hover,
.cs-btn-checkout:hover,
.cs-form-submit:hover,
.cs-search-submit:hover {
  color: var(--cs-bg-main) !important;
}

/* Text / icon inside primary and custom CTA buttons */
a.btn.btn-primary *,
button.btn.btn-primary *,
.btn.btn-primary *,
.cs-our-picks__btn *,
.cs-btn-add-cart *,
.cs-btn-checkout *,
.cs-form-submit *,
.cs-search-submit * {
  color: inherit !important;
}

/* Secondary light buttons remain light for image or dark overlays */
.btn-secondary-light,
.btn-secondary-light:visited,
.btn-secondary-light:hover,
.btn-secondary-light:focus,
.btn-secondary-light:active {
  color: var(--cs-bg-main) !important;
}

.btn-secondary-light *,
.btn-secondary-light:visited *,
.btn-secondary-light:hover *,
.btn-secondary-light:focus *,
.btn-secondary-light:active * {
  color: inherit !important;
}

.hero,
.dual-item {
  isolation: isolate;
}

.hero-image-wrap,
.dual-image-wrap {
  z-index: 0 !important;
}

.hero-overlay,
.dual-overlay {
  z-index: 1 !important;
  pointer-events: none !important;
}

.hero-content,
.hero-scroll-indicator,
.dual-label {
  z-index: 2 !important;
}


/* =========================================================
   Cotton & Sand palette refresh — lighter raw cotton system

   The canonical --cs-color-* palette and the --cs-bg-*/--cs-highlight-*/
   --cs-text-* aliases that reference it now live further down (search for
   "Existing variable bridge for legacy theme selectors"). The duplicate
   hex definitions that lived here were dead code — overridden in the same
   :root scope. Removed in token cleanup pass v1.

   Scope: colour only. Layout, spacing, HTML and JS behaviour unchanged.
   ========================================================= */
:root {
  /* Legacy variable mapping for existing theme code */
  --cotton-white: var(--cs-bg-main);
  --dust: var(--cs-bg-section);
  --sand: var(--cs-highlight);
  --anchor-sand: var(--cs-highlight);
  --deeper-sand: var(--cs-highlight-hover);
  --terracotta: var(--cs-eyebrow);
  --clay-accent: var(--cs-eyebrow);
  --warm-dark: var(--cs-text-main);
  --text-primary: var(--cs-text-main);
  --text-muted: var(--cs-text-muted);
  --border-color: rgba(44, 26, 14, 0.16);
}

body,
.nav-header {
  background-color: var(--cotton-white) !important;
  color: var(--text-primary) !important;
}

.announcement-bar,
.announcement-bar-section,
#shopify-section-announcement-bar,
#shopify-section-announcement-bar .announcement-bar {
  background-color: var(--anchor-sand) !important;
  color: var(--warm-dark) !important;
}

.btn-primary,
a.btn.btn-primary,
button.btn.btn-primary,
.cs-our-picks__btn,
.cs-btn-add-cart,
.cs-btn-checkout,
.cs-form-submit,
.cs-search-submit {
  background-color: var(--cs-highlight-button) !important;
  border: 1px solid var(--cs-highlight-button-border) !important;
  color: var(--cs-text-main) !important;
}

.btn-primary:hover,
a.btn.btn-primary:hover,
button.btn.btn-primary:hover,
.cs-our-picks__btn:hover,
.cs-btn-add-cart:hover,
.cs-btn-checkout:hover,
.cs-form-submit:hover,
.cs-search-submit:hover {
  background-color: var(--cs-highlight-hover) !important;
  border-color: var(--cs-highlight-hover) !important;
  color: var(--cs-bg-main) !important;
}

.btn-primary *,
a.btn.btn-primary *,
button.btn.btn-primary *,
.cs-our-picks__btn *,
.cs-btn-add-cart *,
.cs-btn-checkout *,
.cs-form-submit *,
.cs-search-submit * {
  color: inherit !important;
}

.btn-secondary {
  color: var(--warm-dark) !important;
  border-color: var(--anchor-sand) !important;
}
.btn-secondary:hover {
  background-color: var(--dust) !important;
  border-color: var(--deeper-sand) !important;
}

.btn-secondary-light,
a.btn.btn-secondary-light,
button.btn.btn-secondary-light,
.dual-label .btn-secondary-light,
.hero-content .btn-secondary-light {
  color: var(--cotton-white) !important;
  border-color: var(--cotton-white) !important;
  background-color: transparent !important;
}
.btn-secondary-light:hover,
a.btn.btn-secondary-light:hover,
button.btn.btn-secondary-light:hover,
.dual-label .btn-secondary-light:hover,
.hero-content .btn-secondary-light:hover {
  color: var(--cotton-white) !important;
  border-color: var(--cotton-white) !important;
  background-color: rgba(253, 252, 249, 0.15) !important;
}

.section-eyebrow,
.cs-product-price-main,
.cs-contact-info-label,
.faq-category-title,
.faq-answer-inner a {
  color: var(--clay-accent) !important;
}

.nav-link:hover,
.nav-icon-btn:hover {
  color: var(--clay-accent) !important;
}

.nav-link::after,
.cs-error-divider,
.cart-count {
  background-color: var(--clay-accent) !important;
}

.collection-banner,
.cs-contact-hero,
.cs-cart-summary-col,
.cs-error-page,
.faq-contact-cta {
  background-color: var(--dust) !important;
}

/* CS Material Story — lighter Merz-style non-UI-colour treatment */
.material-text {
  background-color: var(--cs-bg-section) !important;
}

.material-text .section-eyebrow {
  color: var(--cs-eyebrow) !important;
}

.material-text .btn-primary,
.material-text a.btn.btn-primary,
.material-text button.btn.btn-primary {
  background-color: var(--cs-highlight-button) !important;
  color: var(--cs-text-main) !important;
  border: 1px solid var(--cs-highlight-button-border) !important;
}

.material-text .btn-primary:hover,
.material-text a.btn.btn-primary:hover,
.material-text button.btn.btn-primary:hover {
  background-color: var(--cs-highlight-hover) !important;
  color: var(--cs-bg-main) !important;
  border-color: var(--cs-highlight-hover) !important;
}

.material-text .btn-primary *,
.material-text a.btn.btn-primary *,
.material-text button.btn.btn-primary * {
  color: inherit !important;
}

/* =========================================================
   Cotton & Sand mobile UX patch
   Scope: Home, About, FAQ only.
   Purpose: avoid desktop two-column layouts and oversized spacing being
   compressed into mobile widths. HTML, schema, SEO text, links and section
   order remain unchanged.
   ========================================================= */

@media screen and (max-width: 989px) {
  .hero {
    margin-bottom: 40px;
  }

  .dual-category {
    column-gap: 0;
  }

  .material-story,
  .about-split {
    grid-template-columns: 1fr;
  }

  .about-split.reverse {
    direction: ltr;
  }

  .material-text,
  .about-split-text {
    padding: 80px 48px;
  }

  .material-image,
  .about-split-image {
    min-height: 420px;
  }
}

@media screen and (max-width: 767px) {
  /* Global section spacing used on the home/about/FAQ pages */
  .hero {
    margin-bottom: 36px;
  }

  .newsletter-section {
    border-bottom-width: 36px;
  }

  .newsletter-section {
    border-top-width: 36px;
  }

  /* Home hero */
  .hero {
    height: auto;
    min-height: 680px;
  }

  .hero-img {
    object-position: center center;
  }

  .hero-overlay {
    background: linear-gradient(
      to top,
      rgba(44, 26, 14, 0.66) 0%,
      rgba(44, 26, 14, 0.34) 58%,
      rgba(44, 26, 14, 0.08) 100%
    );
  }

  .hero-content {
    left: 24px;
    right: 24px;
    bottom: 52px;
    max-width: none;
  }

  .hero-eyebrow {
    font-size: 10px;
    letter-spacing: 0.2em;
    margin-bottom: 12px;
  }

  .hero-title {
    font-size: clamp(38px, 11vw, 54px);
    line-height: 1.06;
    letter-spacing: 0.04em;
    margin-bottom: 16px;
  }

  .hero-subtitle {
    font-size: 14px;
    line-height: 1.65;
    max-width: 320px;
    margin-bottom: 28px;
  }

  .hero-ctas {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .hero-ctas .btn {
    width: 100%;
    max-width: 260px;
    text-align: center;
  }

  .hero-scroll-indicator {
    display: none;
  }

  /* Home dual category: stack cards vertically instead of compressing two desktop columns */
  .dual-category {
    grid-template-columns: 1fr;
    row-gap: 24px;
    column-gap: 0;
    background-color: #FDFCF9;
  }

  .dual-item {
    height: auto;
    min-height: 520px;
    width: 100%;
  }

  .dual-image-wrap,
  .dual-image-wrap img {
    width: 100%;
    height: 100%;
  }

  .dual-item:hover .dual-image-wrap {
    transform: none;
  }

  .dual-overlay {
    background: linear-gradient(
      to top,
      rgba(44, 26, 14, 0.72) 0%,
      rgba(44, 26, 14, 0.34) 52%,
      transparent 100%
    );
  }

  .dual-label {
    left: 28px;
    right: 28px;
    bottom: 44px;
    max-width: 330px;
  }

  .dual-eyebrow {
    font-size: 10px;
    letter-spacing: 0.18em;
  }

  .dual-title {
    font-size: clamp(30px, 8vw, 42px);
    line-height: 1.08;
    letter-spacing: 0.06em;
    word-break: normal;
    overflow-wrap: normal;
  }

  .dual-label .btn {
    min-width: 184px;
    padding: 15px 26px;
    text-align: center;
  }

  /* Home material story */
  .material-story {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-top: 36px;
  }

  .material-text {
    padding: 72px 28px;
  }

  .material-title {
    font-size: clamp(32px, 9vw, 44px);
    line-height: 1.12;
    letter-spacing: 0.06em;
  }

  .material-body {
    font-size: 15px;
    line-height: 1.75;
    max-width: 100%;
  }

  .material-image {
    min-height: 360px;
  }

  .material-image:hover img {
    transform: none;
  }

  /* About page */
  .page-hero {
    padding: 72px 24px 64px;
  }

  .page-hero-eyebrow {
    font-size: 10px;
    letter-spacing: 0.2em;
  }

  .page-hero-quote {
    font-size: clamp(30px, 9vw, 44px);
    line-height: 1.25;
  }

  .about-intro {
    padding: 72px 24px;
  }

  .about-intro-title {
    font-size: clamp(24px, 7vw, 32px);
    line-height: 1.18;
    letter-spacing: 0.055em;
  }

  .about-intro-body {
    font-size: 15px;
    line-height: 1.75;
    text-align: left;
  }

  .about-split {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .about-split.reverse {
    direction: ltr;
  }

  .about-split-image {
    min-height: 360px;
  }

  .about-split-image:hover img {
    transform: none;
  }

  .about-split-text {
    padding: 72px 28px;
  }

  .about-split-title {
    font-size: clamp(30px, 8vw, 42px);
    line-height: 1.12;
    letter-spacing: 0.06em;
  }

  .about-split-body {
    max-width: 100%;
    font-size: 15px;
    line-height: 1.75;
  }

  .about-values {
    padding: 72px 24px;
  }

  .values-grid,
  .about-values-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .value-item {
    padding: 0;
  }

  .about-cta-section {
    padding: 72px 24px;
  }

  .about-cta-title {
    font-size: clamp(30px, 8vw, 42px);
    line-height: 1.12;
  }

  .about-cta-body {
    font-size: 15px;
    line-height: 1.65;
  }

  /* FAQ page */
  .faq-hero {
    padding: 72px 24px 48px;
  }

  .faq-hero-title {
    font-size: clamp(30px, 8vw, 42px);
    line-height: 1.12;
    letter-spacing: 0.06em;
  }

  .faq-hero-subtitle {
    font-size: 15px;
    line-height: 1.65;
  }
}

@media screen and (max-width: 374px) {
  .hero,
  .newsletter-section {
    border-bottom-width: 28px;
  }

  .newsletter-section {
    border-top-width: 28px;
  }

  .hero-content,
  .dual-label {
    left: 22px;
    right: 22px;
  }

  .hero-title {
    font-size: clamp(34px, 10vw, 46px);
  }

  .dual-title,
  .material-title,
  .about-split-title,
  .about-cta-title,
  .faq-hero-title {
    font-size: clamp(28px, 8vw, 38px);
  }
}
/* =========================================================
   Cotton & Sand native theme/app button colour alignment
   Fixes product-page Add to Bag and review-app buttons that
   inherit Theme Settings solid green/dark colours.
   Colour only. HTML, Liquid, JS, layout and functionality unchanged.
   ========================================================= */
.product-form__submit.button,
.product-form__submit.button--primary,
.product-form__submit[type='submit'],
.product-form__buttons .button,
.cart__checkout-button,
.shopify-challenge__button,
.customer button,
button.shopify-payment-button__button--unbranded,
.shopify-payment-button__button--unbranded,
.jdgm-write-rev-link,
.jdgm-write-rev-link:visited,
.jdgm-btn,
.jdgm-btn:visited,
.jdgm-submit-rev,
.jdgm-submit-rev:visited,
.jdgm-form__submit-btn,
.jdgm-form__submit-btn:visited {
  background-color: var(--cs-highlight-button) !important;
  color: var(--cs-text-main) !important;
  border: 1px solid var(--cs-highlight-button-border) !important;
}

.product-form__submit.button:hover,
.product-form__submit.button--primary:hover,
.product-form__submit[type='submit']:hover,
.product-form__buttons .button:hover,
.cart__checkout-button:hover,
.shopify-challenge__button:hover,
.customer button:hover,
button.shopify-payment-button__button--unbranded:hover,
.shopify-payment-button__button--unbranded:hover,
.jdgm-write-rev-link:hover,
.jdgm-btn:hover,
.jdgm-submit-rev:hover,
.jdgm-form__submit-btn:hover {
  background-color: var(--cs-highlight-hover) !important;
  color: var(--cs-bg-main) !important;
  border-color: var(--cs-highlight-hover) !important;
}

.product-form__submit.button *,
.product-form__submit.button--primary *,
.product-form__submit[type='submit'] *,
.product-form__buttons .button *,
.cart__checkout-button *,
.shopify-challenge__button *,
.customer button *,
button.shopify-payment-button__button--unbranded *,
.shopify-payment-button__button--unbranded *,
.jdgm-write-rev-link *,
.jdgm-btn *,
.jdgm-submit-rev *,
.jdgm-form__submit-btn * {
  color: inherit !important;
}

/* Native status colours aligned to the same understated palette. */
.price--on-sale,
.price__sale,
.discount,
.discounts,
.cart-discount,
.color-scheme-fg-sale,
.color-scheme-fg-success,
.inventory-status,
.inventory-status--success,
.product__inventory,
.newsletter-form__message--success,
.form-status.form-status-success-heading {
  color: var(--cs-eyebrow) !important;
}

.jdgm-star,
.jdgm-prev-badge__stars,
.jdgm-rev-widg__summary-stars {
  color: var(--cs-text-main) !important;
}

/* =========================================================
   CS Craft Section mobile fix
   Scope: mobile only. CSS only. No HTML, Liquid schema or JS changes.
   On mobile, hide the two craft images and let the text panel use full width.
   ========================================================= */
@media screen and (max-width: 767px) {
  .craft-section {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }

  .craft-section .craft-image {
    display: none !important;
  }

  .craft-section .craft-text {
    width: 100% !important;
    grid-column: 1 / -1 !important;
    padding: 72px 28px !important;
  }
}

/* =========================================================
   Cotton & Sand hero primary CTA colour refinement
   Scope: desktop hero only
   Keeps hover background change, keeps text colour stable
   ========================================================= */

@media screen and (min-width: 990px) {
  .hero .hero-ctas .btn-primary,
  .hero .hero-ctas .btn-primary:visited,
  .hero .hero-ctas a.btn-primary,
  .hero .hero-ctas a.btn-primary:visited,
  .hero .hero-ctas a.btn.btn-primary,
  .hero .hero-ctas a.btn.btn-primary:visited {
    background-color: var(--cs-button-overlay-bg) !important;
    border-color: var(--cs-button-overlay-border) !important;
    color: var(--cs-button-overlay-text) !important;
  }

  .hero .hero-ctas .btn-primary:hover,
  .hero .hero-ctas .btn-primary:focus,
  .hero .hero-ctas .btn-primary:active,
  .hero .hero-ctas a.btn-primary:hover,
  .hero .hero-ctas a.btn-primary:focus,
  .hero .hero-ctas a.btn-primary:active,
  .hero .hero-ctas a.btn.btn-primary:hover,
  .hero .hero-ctas a.btn.btn-primary:focus,
  .hero .hero-ctas a.btn.btn-primary:active {
    background-color: var(--cs-button-overlay-hover-bg) !important;
    border-color: var(--cs-button-overlay-hover-border) !important;
    color: var(--cs-button-overlay-hover-text) !important;
  }

  .hero .hero-ctas .btn-primary *,
  .hero .hero-ctas .btn-primary:visited *,
  .hero .hero-ctas .btn-primary:hover *,
  .hero .hero-ctas .btn-primary:focus *,
  .hero .hero-ctas .btn-primary:active * {
    color: inherit !important;
  }
}

/* =========================================================
   Cotton & Sand Final Contextual Button Token System
   Principle: button colour follows the section text system and background context.
   Scope: visual CSS only. No HTML, Liquid, schema, JS or functionality changes.
   ========================================================= */
:root {
  /* Core brand colour tokens */
  --cs-color-cotton-white: #F8F3EA;
  --cs-color-page-white: #FDFCF9;
  /* --cs-color-soft-sand was a duplicate of --cs-color-page-base.
     Now aliased to keep downstream selectors working; canonical value
     lives below on --cs-color-page-base. Token cleanup pass v1. */
  --cs-color-soft-sand: var(--cs-color-page-base);
  --cs-color-warm-sand: #F0E6DA;
  --cs-color-sand-wash: #E6DCD1;
  --cs-color-anchor-sand: #A48D78;
  --cs-color-highlight-sand: #B8A38E;
  --cs-color-text-primary: #2C1A0E;
  --cs-color-text-muted: #6F5B46;
  --cs-color-text-eyebrow: #7E6A5A;
  --cs-color-border-soft: rgba(44, 26, 14, 0.16);
  --cs-color-border-medium: rgba(44, 26, 14, 0.32);

  /* Typography and spacing tokens */
  --cs-font-heading: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
  --cs-font-body: var(--font-sans, 'Inter', 'Helvetica Neue', Arial, sans-serif);
  --cs-text-xs: 11px;
  --cs-text-sm: 12px;
  --cs-text-base: 14px;
  --cs-text-md: 16px;
  --cs-text-lg: 20px;
  --cs-text-xl: 28px;
  --cs-text-hero: clamp(36px, 5vw, 72px);
  --cs-letter-spacing-nav: 0.08em;
  --cs-letter-spacing-label: 0.12em;
  --cs-line-height-body: 1.65;
  --cs-line-height-heading: 1.15;
  --cs-space-2xs: 4px;
  --cs-space-xs: 8px;
  --cs-space-sm: 12px;
  --cs-space-md: 20px;
  --cs-space-lg: 32px;
  --cs-space-xl: 48px;
  --cs-space-section-mobile: 48px;
  --cs-space-section-desktop: 72px;
  --cs-space-section-large: 96px;
  --cs-radius-small: 2px;
  --cs-radius-medium: 4px;
  --cs-radius-card: 6px;
  --cs-shadow-subtle: 0 8px 24px rgba(44, 26, 14, 0.06);
  --cs-transition-soft: 0.3s ease;

  /* Section text relationship tokens */
  --cs-section-overlay-heading: var(--cs-color-cotton-white);
  --cs-section-overlay-body: rgba(248, 243, 234, 0.88);
  --cs-section-light-heading: var(--cs-color-text-primary);
  --cs-section-light-body: var(--cs-color-text-muted);

  /* A. Editorial / image overlay button, used on Hero and Dual Category */
  --cs-button-overlay-bg: transparent;
  --cs-button-overlay-text: var(--cs-section-overlay-heading);
  --cs-button-overlay-border: var(--cs-section-overlay-heading);
  --cs-button-overlay-hover-bg: rgba(248, 243, 234, 0.14);
  --cs-button-overlay-hover-text: var(--cs-section-overlay-heading);
  --cs-button-overlay-hover-border: var(--cs-section-overlay-heading);

  /* A2. Editorial button on light or warm solid backgrounds */
  --cs-button-editorial-bg: transparent;
  --cs-button-editorial-text: var(--cs-section-light-heading);
  --cs-button-editorial-border: rgba(44, 26, 14, 0.36);
  --cs-button-editorial-hover-bg: rgba(44, 26, 14, 0.06);
  --cs-button-editorial-hover-text: var(--cs-section-light-heading);
  --cs-button-editorial-hover-border: rgba(44, 26, 14, 0.48);

  /* B. Commerce / transaction primary button */
  --cs-button-primary-bg: var(--cs-color-text-primary);
  --cs-button-primary-text: var(--cs-color-cotton-white);
  --cs-button-primary-border: var(--cs-color-text-primary);
  --cs-button-primary-hover-bg: var(--cs-color-anchor-sand);
  --cs-button-primary-hover-text: var(--cs-color-cotton-white);
  --cs-button-primary-hover-border: var(--cs-color-anchor-sand);

  /* C. Soft utility / product-card quick-action button */
  --cs-button-soft-bg: rgba(248, 243, 234, 0.82);
  --cs-button-soft-text: var(--cs-color-text-primary);
  --cs-button-soft-border: rgba(44, 26, 14, 0.16);
  --cs-button-soft-hover-bg: rgba(175, 142, 111, 0.18);
  --cs-button-soft-hover-text: var(--cs-color-text-primary);
  --cs-button-soft-hover-border: rgba(44, 26, 14, 0.24);

  /* Existing variable bridge for legacy theme selectors.
     Note: --cs-bg-main and --cs-bg-soft both resolve to page-base.
     An earlier revision split them into page-white vs soft-sand; that
     split was later reverted in a downstream :root, leaving the upstream
     defs as dead code. Consolidated here in token cleanup pass v1. */
  --cs-bg-main: var(--cs-color-page-base);
  --cs-bg-soft: var(--cs-color-page-base);
  --cs-bg-section: var(--cs-color-warm-sand);
  --cs-highlight: var(--cs-color-highlight-sand);
  --cs-highlight-soft: var(--cs-color-sand-wash);
  --cs-highlight-line: var(--cs-color-highlight-sand);
  --cs-highlight-button: var(--cs-button-editorial-bg);
  --cs-highlight-button-border: var(--cs-button-editorial-border);
  --cs-highlight-hover: var(--cs-button-editorial-hover-bg);
  --cs-text-main: var(--cs-color-text-primary);
  --cs-text-muted: var(--cs-color-text-muted);
  --cs-eyebrow: var(--cs-color-text-eyebrow);
  --cotton-white: var(--cs-color-page-white);
  --dust: var(--cs-color-warm-sand);
  --sand: var(--cs-color-highlight-sand);
  --anchor-sand: var(--cs-color-highlight-sand);
  --deeper-sand: var(--cs-color-anchor-sand);
  --terracotta: var(--cs-color-text-eyebrow);
  --clay-accent: var(--cs-color-text-eyebrow);
  --warm-dark: var(--cs-color-text-primary);
  --text-primary: var(--cs-color-text-primary);
  --text-muted: var(--cs-color-text-muted);
  --border-color: var(--cs-color-border-soft);
}

/* Shared button base */
.btn,
.cs-our-picks__btn,
.cs-picks-card__quick-add,
.product-form__submit.button,
.cart__checkout-button,
.shopify-challenge__button,
.customer button,
.shopify-payment-button__button--unbranded,
.jdgm-write-rev-link,
.jdgm-btn,
.jdgm-submit-rev,
.jdgm-form__submit-btn {
  transition: background-color var(--cs-transition-soft), color var(--cs-transition-soft), border-color var(--cs-transition-soft), opacity var(--cs-transition-soft) !important;
}

/* Brand/editorial/image mood: Hero and Dual Category follow heading text colour */
.hero .hero-title,
.hero .hero-sub,
.hero .hero-eyebrow,
.dual-label,
.dual-label .dual-eyebrow,
.dual-label .dual-title {
  color: var(--cs-section-overlay-heading) !important;
}

.hero .hero-ctas .btn-primary,
.hero .hero-ctas .btn-primary:visited,
.hero .hero-ctas a.btn-primary,
.hero .hero-ctas a.btn-primary:visited,
.hero .hero-ctas a.btn.btn-primary,
.hero .hero-ctas a.btn.btn-primary:visited,
.dual-label .btn,
.dual-label .btn:visited,
.dual-label .btn-secondary-light,
.dual-label .btn-secondary-light:visited {
  background-color: var(--cs-button-overlay-bg) !important;
  color: var(--cs-button-overlay-text) !important;
  border: 1px solid var(--cs-button-overlay-border) !important;
}

.hero .hero-ctas .btn-primary:hover,
.hero .hero-ctas .btn-primary:focus,
.hero .hero-ctas .btn-primary:active,
.hero .hero-ctas a.btn-primary:hover,
.hero .hero-ctas a.btn-primary:focus,
.hero .hero-ctas a.btn-primary:active,
.hero .hero-ctas a.btn.btn-primary:hover,
.hero .hero-ctas a.btn.btn-primary:focus,
.hero .hero-ctas a.btn.btn-primary:active,
.dual-label .btn:hover,
.dual-label .btn:focus,
.dual-label .btn:active,
.dual-label .btn-secondary-light:hover,
.dual-label .btn-secondary-light:focus,
.dual-label .btn-secondary-light:active {
  background-color: var(--cs-button-overlay-hover-bg) !important;
  color: var(--cs-button-overlay-hover-text) !important;
  border-color: var(--cs-button-overlay-hover-border) !important;
}

.hero .hero-ctas .btn-primary *,
.dual-label .btn *,
.dual-label .btn-secondary-light * {
  color: inherit !important;
}

/* Editorial / light-background CTAs: transparent outline derived from dark text system */
.btn-primary,
a.btn.btn-primary,
button.btn.btn-primary,
.cs-our-picks__btn,
.faq-contact-cta .btn,
.material-text .btn-primary,
.about-cta .btn-primary {
  background-color: var(--cs-button-editorial-bg) !important;
  color: var(--cs-button-editorial-text) !important;
  border: 1px solid var(--cs-button-editorial-border) !important;
}

.btn-primary:hover,
a.btn.btn-primary:hover,
button.btn.btn-primary:hover,
.cs-our-picks__btn:hover,
.faq-contact-cta .btn:hover,
.material-text .btn-primary:hover,
.about-cta .btn-primary:hover {
  background-color: var(--cs-button-editorial-hover-bg) !important;
  color: var(--cs-button-editorial-hover-text) !important;
  border-color: var(--cs-button-editorial-hover-border) !important;
}

.btn-primary *,
a.btn.btn-primary *,
button.btn.btn-primary *,
.cs-our-picks__btn *,
.faq-contact-cta .btn *,
.material-text .btn-primary *,
.about-cta .btn-primary * {
  color: inherit !important;
}

/* Commerce / transaction buttons: strong solid CTA */
.product-form__submit.button,
.product-form__submit.button--primary,
.product-form__submit[type='submit'],
.product-form__buttons .button,
.cart__checkout-button,
.shopify-challenge__button,
.customer button,
button.shopify-payment-button__button--unbranded,
.shopify-payment-button__button--unbranded,
.jdgm-write-rev-link,
.jdgm-write-rev-link:visited,
.jdgm-btn,
.jdgm-btn:visited,
.jdgm-submit-rev,
.jdgm-submit-rev:visited,
.jdgm-form__submit-btn,
.jdgm-form__submit-btn:visited {
  background-color: var(--cs-button-primary-bg) !important;
  color: var(--cs-button-primary-text) !important;
  border: 1px solid var(--cs-button-primary-border) !important;
}

.product-form__submit.button:hover,
.product-form__submit.button--primary:hover,
.product-form__submit[type='submit']:hover,
.product-form__buttons .button:hover,
.cart__checkout-button:hover,
.shopify-challenge__button:hover,
.customer button:hover,
button.shopify-payment-button__button--unbranded:hover,
.shopify-payment-button__button--unbranded:hover,
.jdgm-write-rev-link:hover,
.jdgm-btn:hover,
.jdgm-submit-rev:hover,
.jdgm-form__submit-btn:hover {
  background-color: var(--cs-button-primary-hover-bg) !important;
  color: var(--cs-button-primary-hover-text) !important;
  border-color: var(--cs-button-primary-hover-border) !important;
}

.product-form__submit.button *,
.cart__checkout-button *,
.shopify-challenge__button *,
.customer button *,
.shopify-payment-button__button--unbranded *,
.jdgm-write-rev-link *,
.jdgm-btn *,
.jdgm-submit-rev *,
.jdgm-form__submit-btn * {
  color: inherit !important;
}

/* Product-card / quick-action buttons: soft utility style */
.cs-picks-card__quick-add,
.quick-add__submit,
.quick-add-f-button,
.product-card-quick-add .button,
.product-card-quick-add button {
  background-color: var(--cs-button-soft-bg) !important;
  color: var(--cs-button-soft-text) !important;
  border: 1px solid var(--cs-button-soft-border) !important;
}

.cs-picks-card__quick-add:hover,
.quick-add__submit:hover,
.quick-add-f-button:hover,
.product-card-quick-add .button:hover,
.product-card-quick-add button:hover {
  background-color: var(--cs-button-soft-hover-bg) !important;
  color: var(--cs-button-soft-hover-text) !important;
  border-color: var(--cs-button-soft-hover-border) !important;
}

.cs-picks-card__quick-add *,
.quick-add__submit *,
.quick-add-f-button *,
.product-card-quick-add .button *,
.product-card-quick-add button * {
  color: inherit !important;
}

.quick-add__submit svg,
.quick-add-f-button svg,
.product-card-quick-add svg {
  stroke: currentColor !important;
}

/* Light/warm editorial sections: typography and button should share dark warm text system */
.about-cta-title,
.faq-contact-title,
.cs-our-picks__heading,
.material-text h2 {
  color: var(--cs-section-light-heading) !important;
}

.about-cta-body,
.faq-contact-body,
.cs-our-picks__intro,
.material-text p {
  color: var(--cs-section-light-body) !important;
}

/* No green app/theme accents */
.price--on-sale,
.price__sale,
.discount,
.discounts,
.cart-discount,
.color-scheme-fg-sale,
.color-scheme-fg-success,
.inventory-status,
.inventory-status--success,
.product__inventory,
.newsletter-form__message--success,
.form-status.form-status-success-heading,
.jdgm-star,
.jdgm-prev-badge__stars,
.jdgm-rev-widg__summary-stars {
  color: var(--cs-color-text-eyebrow) !important;
}

/* =========================================================
   Cotton & Sand Mobile Button Token Audit Patch
   Source of truth: Cotton_and_Sand_Final_Button_Design_Tokens.docx
   Scope: CSS-only visual alignment for mobile and responsive states.
   No Liquid, schema, JS or Shopify functionality changes.
   ========================================================= */

/* Custom commerce/form buttons that appear in custom product, cart, contact and search layouts.
   These are transaction/form actions, so they use the solid primary token instead of editorial outline. */
.cs-btn-add-cart,
.cs-btn-add-cart:visited,
.cs-btn-checkout,
.cs-btn-checkout:visited,
.cs-form-submit,
.cs-form-submit:visited,
.cs-search-submit,
.cs-search-submit:visited,
.newsletter-form__button.field__button.newsletter-form__submit-style-solid-button,
.newsletter-form__button.field__button.newsletter-form__submit-style-solid-button:visited,
.popup-newsletter-submit-style--button-solid,
.popup-newsletter-submit-style--button-solid:visited,
.password-page-login-link.button,
.password-page-login-link.button:visited,
.shopify-payment-button [role="button"],
.cart__dynamic-checkout-buttons [role="button"] {
  background-color: var(--cs-button-primary-bg) !important;
  color: var(--cs-button-primary-text) !important;
  border: 1px solid var(--cs-button-primary-border) !important;
}

.cs-btn-add-cart:hover,
.cs-btn-add-cart:focus,
.cs-btn-add-cart:active,
.cs-btn-checkout:hover,
.cs-btn-checkout:focus,
.cs-btn-checkout:active,
.cs-form-submit:hover,
.cs-form-submit:focus,
.cs-form-submit:active,
.cs-search-submit:hover,
.cs-search-submit:focus,
.cs-search-submit:active,
.newsletter-form__button.field__button.newsletter-form__submit-style-solid-button:hover,
.newsletter-form__button.field__button.newsletter-form__submit-style-solid-button:focus,
.newsletter-form__button.field__button.newsletter-form__submit-style-solid-button:active,
.popup-newsletter-submit-style--button-solid:hover,
.popup-newsletter-submit-style--button-solid:focus,
.popup-newsletter-submit-style--button-solid:active,
.password-page-login-link.button:hover,
.password-page-login-link.button:focus,
.password-page-login-link.button:active,
.shopify-payment-button [role="button"]:hover,
.shopify-payment-button [role="button"]:focus,
.shopify-payment-button [role="button"]:active,
.cart__dynamic-checkout-buttons [role="button"]:hover,
.cart__dynamic-checkout-buttons [role="button"]:focus,
.cart__dynamic-checkout-buttons [role="button"]:active {
  background-color: var(--cs-button-primary-hover-bg) !important;
  color: var(--cs-button-primary-hover-text) !important;
  border-color: var(--cs-button-primary-hover-border) !important;
}

.cs-btn-add-cart *,
.cs-btn-checkout *,
.cs-form-submit *,
.cs-search-submit *,
.newsletter-form__button.field__button.newsletter-form__submit-style-solid-button *,
.popup-newsletter-submit-style--button-solid *,
.password-page-login-link.button *,
.shopify-payment-button [role="button"] *,
.cart__dynamic-checkout-buttons [role="button"] * {
  color: inherit !important;
}

/* Newsletter outline buttons are editorial on warm/light backgrounds unless explicitly solid. */
.newsletter-form__button.field__button.newsletter-form__submit-style-outline-button,
.newsletter-form__button.field__button.newsletter-form__submit-style-outline-button:visited,
.popup-newsletter-submit-style--button-outline,
.popup-newsletter-submit-style--button-outline:visited {
  background-color: var(--cs-button-editorial-bg) !important;
  color: var(--cs-button-editorial-text) !important;
  border: 1px solid var(--cs-button-editorial-border) !important;
}

.newsletter-form__button.field__button.newsletter-form__submit-style-outline-button:hover,
.newsletter-form__button.field__button.newsletter-form__submit-style-outline-button:focus,
.newsletter-form__button.field__button.newsletter-form__submit-style-outline-button:active,
.popup-newsletter-submit-style--button-outline:hover,
.popup-newsletter-submit-style--button-outline:focus,
.popup-newsletter-submit-style--button-outline:active {
  background-color: var(--cs-button-editorial-hover-bg) !important;
  color: var(--cs-button-editorial-hover-text) !important;
  border-color: var(--cs-button-editorial-hover-border) !important;
}

/* Product-card and filter quick actions are utility controls, not commerce buttons. */
.btn-quick-add,
.btn-quick-add:visited,
.product-card-quick-add.quick-add-button-mobile-icon .button,
.product-card-quick-add.quick-add-button-mobile-button-solid .button,
.product-card-quick-add.quick-add-button-mobile-button-solid-inverted .button,
.product-card-quick-add.quick-add-button-mobile-button-outline .button,
.product-card-quick-add.quick-add-button-mobile-button-text .button,
.product-card-quick-add.quick-add-button-desktop-button-solid .button,
.product-card-quick-add.quick-add-button-desktop-button-solid-inverted .button,
.product-card-quick-add.quick-add-button-desktop-button-outline .button,
.product-card-quick-add.quick-add-button-desktop-button-text .button,
.filter-tag:hover,
.filter-tag.active {
  background-color: var(--cs-button-soft-bg) !important;
  color: var(--cs-button-soft-text) !important;
  border: 1px solid var(--cs-button-soft-border) !important;
}

.btn-quick-add:hover,
.btn-quick-add:focus,
.btn-quick-add:active,
.product-card-quick-add.quick-add-button-mobile-icon .button:hover,
.product-card-quick-add.quick-add-button-mobile-icon .button:focus,
.product-card-quick-add.quick-add-button-mobile-icon .button:active,
.product-card-quick-add.quick-add-button-mobile-button-solid .button:hover,
.product-card-quick-add.quick-add-button-mobile-button-solid-inverted .button:hover,
.product-card-quick-add.quick-add-button-mobile-button-outline .button:hover,
.product-card-quick-add.quick-add-button-mobile-button-text .button:hover,
.product-card-quick-add.quick-add-button-desktop-button-solid .button:hover,
.product-card-quick-add.quick-add-button-desktop-button-solid-inverted .button:hover,
.product-card-quick-add.quick-add-button-desktop-button-outline .button:hover,
.product-card-quick-add.quick-add-button-desktop-button-text .button:hover,
.filter-tag:hover,
.filter-tag.active:hover {
  background-color: var(--cs-button-soft-hover-bg) !important;
  color: var(--cs-button-soft-hover-text) !important;
  border-color: var(--cs-button-soft-hover-border) !important;
}

.btn-quick-add *,
.product-card-quick-add.quick-add-button-mobile-icon .button *,
.product-card-quick-add.quick-add-button-mobile-button-solid .button *,
.product-card-quick-add.quick-add-button-mobile-button-solid-inverted .button *,
.product-card-quick-add.quick-add-button-mobile-button-outline .button *,
.product-card-quick-add.quick-add-button-mobile-button-text .button *,
.product-card-quick-add.quick-add-button-desktop-button-solid .button *,
.product-card-quick-add.quick-add-button-desktop-button-solid-inverted .button *,
.product-card-quick-add.quick-add-button-desktop-button-outline .button *,
.product-card-quick-add.quick-add-button-desktop-button-text .button * {
  color: inherit !important;
}

.product-card-quick-add.quick-add-button-mobile-icon .button::after {
  background: var(--cs-button-soft-bg) !important;
  border: 1px solid var(--cs-button-soft-border) !important;
}

/* Mobile-specific guardrails: overlay buttons remain tied to white heading text after mobile layout stacking. */
@media screen and (max-width: 989px) {
  .hero .hero-ctas .btn-primary,
  .hero .hero-ctas .btn-primary:visited,
  .hero .hero-ctas a.btn-primary,
  .hero .hero-ctas a.btn-primary:visited,
  .hero .hero-ctas a.btn.btn-primary,
  .hero .hero-ctas a.btn.btn-primary:visited,
  .dual-label .btn,
  .dual-label .btn:visited,
  .dual-label .btn-secondary-light,
  .dual-label .btn-secondary-light:visited {
    background-color: var(--cs-button-overlay-bg) !important;
    color: var(--cs-button-overlay-text) !important;
    border: 1px solid var(--cs-button-overlay-border) !important;
  }

  .hero .hero-ctas .btn-primary:hover,
  .hero .hero-ctas .btn-primary:focus,
  .hero .hero-ctas .btn-primary:active,
  .hero .hero-ctas a.btn-primary:hover,
  .hero .hero-ctas a.btn-primary:focus,
  .hero .hero-ctas a.btn-primary:active,
  .hero .hero-ctas a.btn.btn-primary:hover,
  .hero .hero-ctas a.btn.btn-primary:focus,
  .hero .hero-ctas a.btn.btn-primary:active,
  .dual-label .btn:hover,
  .dual-label .btn:focus,
  .dual-label .btn:active,
  .dual-label .btn-secondary-light:hover,
  .dual-label .btn-secondary-light:focus,
  .dual-label .btn-secondary-light:active {
    background-color: var(--cs-button-overlay-hover-bg) !important;
    color: var(--cs-button-overlay-hover-text) !important;
    border-color: var(--cs-button-overlay-hover-border) !important;
  }

  .hero .hero-subtitle,
  .dual-label .dual-eyebrow,
  .dual-label .dual-title {
    color: var(--cs-section-overlay-heading) !important;
  }
}

/* =========================================================
   Cotton & Sand Spacing + Typography Rhythm Token System
   Added 20 May 2026
   Purpose: turn the final button token system into a complete page rhythm system.
   Scope: visual CSS only. No HTML, Liquid, schema, JavaScript or Shopify functionality changes.

   Notes:
   - Hero title max remains 64px by request.
   - Low-density editorial rhythm is preferred over high-density merchandising.
   - Page white / soft sand should carry most of the site surface area.
   - Warm sand / anchor sand should be used as accents or contained editorial blocks.
   ========================================================= */

:root {
  /* Page width and gutters */
  --cs-page-max: 1440px;
  --cs-content-max-narrow: 520px;
  --cs-content-max-reading: 680px;
  --cs-gutter-mobile: 20px;
  --cs-gutter-tablet: 32px;
  --cs-gutter-desktop: clamp(40px, 5vw, 80px);

  /* Section vertical rhythm */
  --cs-space-section-xs: clamp(40px, 4vw, 64px);
  --cs-space-section-sm: clamp(56px, 5vw, 80px);
  --cs-space-section-md: clamp(72px, 6vw, 104px);
  --cs-space-section-lg: clamp(96px, 8vw, 140px);
  --cs-space-section-xl: clamp(120px, 10vw, 168px);

  /* Inner content rhythm */
  --cs-space-content-2xs: 6px;
  --cs-space-content-xs: 10px;
  --cs-space-content-sm: 16px;
  --cs-space-content-md: 24px;
  --cs-space-content-lg: 36px;
  --cs-space-content-xl: 48px;

  /* Grid rhythm */
  --cs-grid-gap-sm: 16px;
  --cs-grid-gap-md: 24px;
  --cs-grid-gap-lg: 32px;
  --cs-grid-gap-xl: 48px;

  /* Typography rhythm */
  --cs-type-eyebrow: 10px;
  --cs-type-caption: 11px;
  --cs-type-cta: 12px;
  --cs-type-product: 13px;
  --cs-type-body-sm: 14px;
  --cs-type-body: 15px;
  --cs-type-body-lg: 16px;
  --cs-type-section-title: clamp(26px, 3vw, 42px);
  --cs-type-editorial-title: clamp(34px, 4.5vw, 58px);
  --cs-type-display: clamp(44px, 6vw, 76px);
  --cs-type-hero: clamp(36px, 5vw, 72px);

  --cs-line-tight: 1.05;
  --cs-line-heading: 1.12;
  --cs-line-body: 1.65;
  --cs-line-relaxed: 1.75;

  --cs-tracking-eyebrow: 0.22em;
  --cs-tracking-cta: 0.15em;
  --cs-tracking-heading: 0.045em;
  --cs-tracking-display: 0.02em;

  --cs-weight-regular: 400;
  --cs-weight-medium: 500;
  --cs-weight-semibold: 600;

  /* Background surface allocation */
  --cs-surface-primary: var(--cs-color-page-white);
  --cs-surface-soft: var(--cs-color-soft-sand);
  --cs-surface-editorial: var(--cs-color-warm-sand);
  --cs-surface-wash: var(--cs-color-sand-wash);
}

/* Base rhythm */
body {
  background-color: var(--cs-surface-primary) !important;
  color: var(--cs-color-text-primary) !important;
}

.section-eyebrow,
.page-hero-eyebrow,
.hero-eyebrow,
.dual-eyebrow,
.cs-contact-hero-eyebrow,
.faq-hero-eyebrow {
  font-size: var(--cs-type-eyebrow) !important;
  letter-spacing: var(--cs-tracking-eyebrow) !important;
  font-weight: var(--cs-weight-medium) !important;
}

.btn,
button,
.cs-our-picks__btn,
.newsletter-form .btn {
  font-size: var(--cs-type-cta) !important;
  letter-spacing: var(--cs-tracking-cta) !important;
}

/* Hero: keep current title scale and max 64px, but move spacing onto tokens. */
/* Note: the gap to the next section is handled by `margin-bottom` in the
   Realm-style full-bleed block at the bottom of this file, not by a
   border-bottom paired with `box-sizing: content-box`. */
.hero {
  min-height: 620px !important;
}

.hero-content {
  left: var(--cs-gutter-desktop) !important;
  bottom: var(--cs-space-section-sm) !important;
  max-width: var(--cs-content-max-narrow) !important;
}

.hero-title {
  font-size: var(--cs-type-hero) !important;
  line-height: var(--cs-line-tight) !important;
  letter-spacing: var(--cs-tracking-display) !important;
  margin-bottom: var(--cs-space-content-md) !important;
}

.hero-subtitle {
  font-size: var(--cs-type-body) !important;
  line-height: var(--cs-line-body) !important;
  color: var(--cs-section-overlay-body) !important;
  margin-bottom: var(--cs-space-content-lg) !important;
  max-width: 390px !important;
}

.hero-ctas { gap: var(--cs-space-content-sm) !important; }

/* Dual category: still image-led, but slightly less dominant than Hero. */
.dual-category {
  column-gap: var(--cs-grid-gap-lg) !important;
  background-color: var(--cs-color-page-white) !important;
}

.dual-item {
  height: clamp(520px, 68vh, 760px) !important;
  min-height: 520px !important;
}

.dual-label {
  left: var(--cs-space-content-xl) !important;
  bottom: var(--cs-space-content-xl) !important;
  max-width: 420px !important;
}

.dual-title {
  font-size: var(--cs-type-section-title) !important;
  line-height: var(--cs-line-heading) !important;
  letter-spacing: var(--cs-tracking-heading) !important;
  margin-bottom: var(--cs-space-content-md) !important;
}

/* Product / commerce anchor: clean, open, page-white surface. */
.product-section,
.cs-our-picks {
  background-color: var(--cs-color-page-white) !important;
  padding: var(--cs-space-section-lg) var(--cs-gutter-desktop) var(--cs-space-section-xl) !important;
}

.product-section {
  max-width: var(--cs-page-max) !important;
}

.section-header,
.cs-our-picks__header {
  margin-bottom: var(--cs-space-content-xl) !important;
  gap: var(--cs-space-content-md) !important;
}

.section-title,
.cs-our-picks__heading {
  font-size: clamp(18px, 2vw, 26px) !important;
  line-height: var(--cs-line-heading) !important;
  letter-spacing: var(--cs-tracking-heading) !important;
  color: var(--cs-color-text-primary) !important;
}

.product-grid,
.cs-our-picks__grid,
.collection-product-grid {
  gap: var(--cs-grid-gap-lg) !important;
}

.product-image-wrap,
.cs-picks-card__media,
.card__media {
  background-color: var(--cs-color-soft-sand) !important;
}

.product-name,
.card__heading,
.cs-picks-card__title {
  font-size: var(--cs-type-product) !important;
  line-height: 1.45 !important;
  color: var(--cs-color-text-primary) !important;
}

.product-price,
.price,
.cs-picks-card__price {
  font-size: var(--cs-type-product) !important;
  color: var(--cs-color-text-muted) !important;
}

.section-footer-cta,
.cs-our-picks__footer {
  margin-top: var(--cs-space-section-sm) !important;
}

/* Material story: a contained soft-sand editorial block, not a heavy taupe run. */
.material-story {
  background-color: var(--cs-color-page-white) !important;
  padding-top: var(--cs-space-section-md) !important;
  min-height: 0 !important;
}

.material-text {
  background-color: var(--cs-color-soft-sand) !important;
  padding: var(--cs-space-section-md) var(--cs-space-content-xl) !important;
}

.material-title {
  font-size: var(--cs-type-editorial-title) !important;
  line-height: var(--cs-line-heading) !important;
  letter-spacing: var(--cs-tracking-heading) !important;
  margin-bottom: var(--cs-space-content-md) !important;
  color: var(--cs-color-text-primary) !important;
}

.material-body {
  font-size: var(--cs-type-body) !important;
  line-height: var(--cs-line-relaxed) !important;
  color: var(--cs-color-text-muted) !important;
  margin-bottom: var(--cs-space-content-lg) !important;
  max-width: 440px !important;
}

/* Craft: return to page white so it separates from Material Story. */
.craft-section {
  background-color: var(--cs-color-page-white) !important;
  padding-top: var(--cs-space-section-md) !important;
  min-height: 0 !important;
}

.craft-text {
  background-color: transparent !important;
  padding: var(--cs-space-section-md) var(--cs-space-content-xl) !important;
}

.craft-text .section-eyebrow {
  color: var(--cs-color-text-eyebrow) !important;
}

.craft-title {
  font-size: var(--cs-type-section-title) !important;
  line-height: var(--cs-line-heading) !important;
  letter-spacing: var(--cs-tracking-heading) !important;
  margin-bottom: var(--cs-space-content-md) !important;
  color: var(--cs-color-text-primary) !important;
}

.craft-body {
  font-size: var(--cs-type-body-sm) !important;
  line-height: var(--cs-line-relaxed) !important;
  color: var(--cs-color-text-muted) !important;
}

/* Trust and newsletter: light supporting surfaces rather than another heavy brown block. */
.trust-bar {
  background-color: var(--cs-color-page-white) !important;
  padding: var(--cs-space-content-lg) var(--cs-gutter-desktop) !important;
  border-color: var(--cs-color-border-soft) !important;
}

.trust-item {
  font-size: var(--cs-type-caption) !important;
  letter-spacing: 0.1em !important;
  color: var(--cs-color-text-primary) !important;
  padding: var(--cs-space-content-xs) var(--cs-space-content-xl) !important;
}

.newsletter-section {
  background-color: var(--cs-color-soft-sand) !important;
  border-top: var(--cs-space-section-xs) solid var(--cs-color-page-white) !important;
  border-bottom: 0 !important;
  padding: var(--cs-space-section-md) var(--cs-gutter-desktop) !important;
}

.newsletter-title {
  font-size: var(--cs-type-section-title) !important;
  line-height: var(--cs-line-heading) !important;
  letter-spacing: var(--cs-tracking-heading) !important;
  color: var(--cs-color-text-primary) !important;
  margin-bottom: var(--cs-space-content-sm) !important;
}

.newsletter-body {
  font-size: var(--cs-type-body) !important;
  line-height: var(--cs-line-body) !important;
  color: var(--cs-color-text-muted) !important;
  margin-bottom: var(--cs-space-content-lg) !important;
}

.site-footer {
  background-color: var(--cs-color-warm-sand) !important;
  padding: var(--cs-space-section-md) var(--cs-gutter-desktop) var(--cs-space-content-lg) !important;
}

/* About + FAQ pages follow the same low-density rhythm. */
.page-hero {
  background-color: var(--cs-color-soft-sand) !important;
  padding: var(--cs-space-section-lg) var(--cs-gutter-desktop) !important;
}

.page-hero-quote {
  font-size: var(--cs-type-display) !important;
  line-height: 1.18 !important;
  color: var(--cs-color-text-primary) !important;
}

.about-intro {
  padding: var(--cs-space-section-lg) var(--cs-gutter-desktop) !important;
  max-width: var(--cs-content-max-reading) !important;
}

.about-intro-title,
.about-values-title,
.about-cta-title,
.faq-hero-title,
.faq-contact-title {
  font-size: var(--cs-type-section-title) !important;
  line-height: var(--cs-line-heading) !important;
  letter-spacing: var(--cs-tracking-heading) !important;
  color: var(--cs-color-text-primary) !important;
}

.about-intro-body,
.about-split-body,
.value-body,
.about-cta-body,
.faq-hero-subtitle,
.faq-contact-body {
  font-size: var(--cs-type-body) !important;
  line-height: var(--cs-line-relaxed) !important;
  color: var(--cs-color-text-muted) !important;
}

.about-split {
  min-height: 0 !important;
}

.about-split-text {
  background-color: var(--cs-color-page-white) !important;
  padding: var(--cs-space-section-md) var(--cs-space-content-xl) !important;
}

.about-split-title {
  font-size: var(--cs-type-section-title) !important;
  line-height: var(--cs-line-heading) !important;
  letter-spacing: var(--cs-tracking-heading) !important;
  color: var(--cs-color-text-primary) !important;
  margin-bottom: var(--cs-space-content-md) !important;
}

.about-values {
  background-color: var(--cs-color-soft-sand) !important;
  padding: var(--cs-space-section-lg) var(--cs-gutter-desktop) !important;
}

.values-grid,
.about-values-grid {
  gap: var(--cs-grid-gap-xl) !important;
}

.value-item {
  padding: var(--cs-space-content-md) !important;
}

.about-cta-section,
.faq-contact-cta {
  background-color: var(--cs-color-soft-sand) !important;
  padding: var(--cs-space-section-lg) var(--cs-gutter-desktop) !important;
  text-align: center !important;
}

.faq-hero {
  background-color: var(--cs-color-page-white) !important;
  padding: var(--cs-space-section-lg) var(--cs-gutter-desktop) var(--cs-space-section-md) !important;
}

/* Responsive rhythm: same token logic, smaller gutters and stacked layouts. */
@media screen and (max-width: 989px) {
  :root {
    --cs-gutter-desktop: var(--cs-gutter-tablet);
  }

  .hero {
    border-bottom-width: var(--cs-space-section-xs) !important;
  }

  .material-text,
  .about-split-text,
  .craft-text {
    padding: var(--cs-space-section-sm) var(--cs-gutter-tablet) !important;
  }
}

@media screen and (max-width: 767px) {
  :root {
    --cs-gutter-desktop: var(--cs-gutter-mobile);
    --cs-type-display: clamp(32px, 9vw, 44px);
    --cs-type-editorial-title: clamp(28px, 8vw, 38px);
    --cs-type-section-title: clamp(24px, 7vw, 32px);
    --cs-space-section-xs: 36px;
    --cs-space-section-sm: 48px;
    --cs-space-section-md: 64px;
    --cs-space-section-lg: 80px;
    --cs-space-section-xl: 96px;
    --cs-grid-gap-lg: 24px;
    --cs-grid-gap-xl: 32px;
  }

  .hero {
    min-height: 680px !important;
    border-bottom-width: var(--cs-space-section-xs) !important;
  }

  .hero-content {
    left: var(--cs-gutter-mobile) !important;
    right: var(--cs-gutter-mobile) !important;
    bottom: var(--cs-space-section-sm) !important;
  }

  .hero-title {
    font-size: clamp(38px, 11vw, 54px) !important;
    letter-spacing: 0.04em !important;
  }

  .hero-subtitle {
    max-width: 340px !important;
    font-size: var(--cs-type-body-sm) !important;
    margin-bottom: var(--cs-space-content-md) !important;
  }

  .hero-ctas .btn {
    max-width: 260px !important;
  }

  .dual-category {
    grid-template-columns: 1fr !important;
    row-gap: var(--cs-grid-gap-md) !important;
    column-gap: 0 !important;
  }

  .dual-item {
    min-height: 520px !important;
    height: auto !important;
  }

  .dual-label {
    left: var(--cs-gutter-mobile) !important;
    right: var(--cs-gutter-mobile) !important;
    bottom: var(--cs-space-section-xs) !important;
    max-width: 340px !important;
  }

  .dual-title {
    font-size: clamp(30px, 8vw, 42px) !important;
  }

  .product-section,
  .cs-our-picks,
  .about-intro,
  .about-values,
  .about-cta-section,
  .faq-contact-cta,
  .faq-hero,
  .page-hero {
    padding-left: var(--cs-gutter-mobile) !important;
    padding-right: var(--cs-gutter-mobile) !important;
  }

  .product-grid,
  .cs-our-picks__grid,
  .collection-product-grid {
    gap: var(--cs-grid-gap-md) !important;
  }

  .material-story {
    padding-top: var(--cs-space-section-xs) !important;
  }

  .material-text,
  .craft-section .craft-text,
  .about-split-text {
    padding: var(--cs-space-section-md) var(--cs-gutter-mobile) !important;
  }

  .material-title,
  .craft-title,
  .about-split-title,
  .about-cta-title,
  .faq-hero-title {
    line-height: var(--cs-line-heading) !important;
  }

  .newsletter-section {
    padding: var(--cs-space-section-md) var(--cs-gutter-mobile) !important;
    border-top-width: var(--cs-space-section-xs) !important;
  }

  .trust-bar {
    padding: var(--cs-space-content-lg) var(--cs-gutter-mobile) !important;
  }

  .trust-item {
    padding: var(--cs-space-content-xs) var(--cs-space-content-md) !important;
  }
}

@media screen and (max-width: 374px) {
  .hero {
    border-bottom-width: 28px !important;
  }

  .hero-title {
    font-size: clamp(34px, 10vw, 46px) !important;
  }
}


/* =========================================================
   COTTON & SAND - Realm-inspired header and surface system
   Source of truth: base surface, transparent home header,
   light announcement strip, and reduced accent-block usage.
   ========================================================= */
:root {
  /* Realm-inspired surface tokens */
  --cs-color-page-base: #F5F2EC;
  --cs-color-header-bg: #F5F2EC;
  /* --cs-color-panel-cream and --cs-color-light-cream were duplicates
     of --cs-color-page-white. Now aliased; canonical value lives on
     --cs-color-page-white. Token cleanup pass v1. */
  --cs-color-panel-cream: var(--cs-color-page-white);
  --cs-color-light-cream: var(--cs-color-page-white);
  --cs-color-header-transparent-text: #FDFCF9;
  --cs-color-header-solid-text: #2C1A0E;
  --cs-color-header-border: rgba(44, 26, 14, 0.10);
  --cs-color-announcement-bg: #F5F2EC;
  --cs-color-announcement-text: #2C1A0E;
  --cs-color-footer-bg: #F5F2EC;
  --cs-color-footer-border: rgba(44, 26, 14, 0.12);

  /* --cs-bg-main and --cs-bg-soft are now defined upstream in the
     legacy bridge block — both resolve to --cs-color-page-base. */
  --cotton-white: var(--cs-color-panel-cream);
  --color-background: var(--cs-color-page-base);
}

html,
body,
.gradient,
.content-for-layout,
main#MainContent {
  background-color: var(--cs-color-page-base) !important;
}

/* Header should feel like part of the page, not a permanent hard bar. */
.header-group,
.header-bar {
  background: transparent !important;
  box-shadow: none !important;
}

.header-bar-inner {
  background: var(--cs-color-header-bg) !important;
  color: var(--cs-color-header-solid-text) !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--cs-color-header-border) !important;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease !important;
}

/* Homepage top state: transparent over hero, white nav/logos/icons. */
.hdr-trans-hp .header-bar-inner {
  background: transparent !important;
  color: var(--cs-color-header-transparent-text) !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}

.hdr-trans-hp .header-mobile-logo,
.hdr-trans-hp .header-desktop-logo,
.hdr-trans-hp .hdr-toolbar-item,
.hdr-trans-hp .hdr-item-language-selector,
.hdr-trans-hp .hdr-nav-desktop > nav > .hdr-nav-primary-level-ul > li > a,
.hdr-trans-hp .hdr-nav-desktop > nav > .hdr-nav-primary-level-ul > li > a:visited,
.hdr-trans-hp .header-bar--shopping-tools,
.hdr-trans-hp .header-bar--shopping-tools a,
.hdr-trans-hp .header-bar--shopping-tools button,
.hdr-trans-hp .hdr-menu-button,
.hdr-trans-hp .menu-icon {
  color: var(--cs-color-header-transparent-text) !important;
}

.hdr-trans-hp .menu-line {
  border-top-color: var(--cs-color-header-transparent-text) !important;
  background: var(--cs-color-header-transparent-text) !important;
}

/* Solid scrolled and non-home state: same colour as page base. */
.header-bar:not(.hdr-trans-hp) .header-bar-inner,
.header-bar-inner.hovered,
.header-bar-inner:has(.nav-desktop-dd-btn-hover:hover),
.header-bar-inner:has(.nav-desktop-dd-btn-clickable:hover) {
  background: var(--cs-color-header-bg) !important;
  color: var(--cs-color-header-solid-text) !important;
  border-bottom-color: var(--cs-color-header-border) !important;
  box-shadow: none !important;
}

.header-bar:not(.hdr-trans-hp) .header-mobile-logo,
.header-bar:not(.hdr-trans-hp) .header-desktop-logo,
.header-bar:not(.hdr-trans-hp) .hdr-toolbar-item,
.header-bar:not(.hdr-trans-hp) .hdr-item-language-selector,
.header-bar:not(.hdr-trans-hp) .hdr-nav-desktop > nav > .hdr-nav-primary-level-ul > li > a,
.header-bar:not(.hdr-trans-hp) .hdr-nav-desktop > nav > .hdr-nav-primary-level-ul > li > a:visited,
.header-bar:not(.hdr-trans-hp) .header-bar--shopping-tools,
.header-bar:not(.hdr-trans-hp) .header-bar--shopping-tools a,
.header-bar:not(.hdr-trans-hp) .header-bar--shopping-tools button,
.header-bar:not(.hdr-trans-hp) .hdr-menu-button,
.header-bar:not(.hdr-trans-hp) .menu-icon,
.header-bar-inner.hovered .header-mobile-logo,
.header-bar-inner.hovered .header-desktop-logo,
.header-bar-inner.hovered .hdr-toolbar-item,
.header-bar-inner.hovered .hdr-nav-desktop > nav > .hdr-nav-primary-level-ul > li > a {
  color: var(--cs-color-header-solid-text) !important;
}

.header-bar:not(.hdr-trans-hp) .menu-line,
.header-bar-inner.hovered .menu-line {
  border-top-color: var(--cs-color-header-solid-text) !important;
  background: var(--cs-color-header-solid-text) !important;
}

.header-nav-desktop-dd-panel,
.dd-panel-drawer,
.header-nav-drawer,
.drawer-bg-pane,
.localization-dropdown,
.header-search-bar {
  background: var(--cs-color-header-bg) !important;
  color: var(--cs-color-header-solid-text) !important;
  box-shadow: none !important;
}

/* Light announcement strip. It should read as information, not as a brand-colour block. */
.header-announcement-bar,
.announcement-bar {
  background: var(--cs-color-announcement-bg) !important;
  color: var(--cs-color-announcement-text) !important;
  border-bottom: 1px solid var(--cs-color-header-border) !important;
  min-height: 30px !important;
  height: 30px !important;
  padding: 0 var(--cs-gutter-desktop, 40px) !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
}

.header-announcement-bar a,
.announcement-bar a {
  color: var(--cs-color-announcement-text) !important;
}

body:has(.full-width-announcement-bar) .content-for-layout {
  padding-top: 30px !important;
}

/* Ensure major light surfaces share the Realm-like base. Cream is reserved for panels/cards. */
.product-section,
.cs-our-picks,
.craft-section,
.trust-bar,
.page-hero,
.faq-hero,
.about-split-text,
.cs-footer,
.site-footer,
#shopify-section-footer {
  background-color: var(--cs-color-page-base) !important;
}

.material-story,
.newsletter-section,
.about-values,
.about-cta-section,
.faq-contact-cta,
.collection-banner,
.cs-contact-hero,
.cs-error-page {
  background-color: var(--cs-color-panel-cream) !important;
}

.hero,
.dual-category {
  border-color: var(--cs-color-page-base) !important;
}

.newsletter-section {
  border-top-color: var(--cs-color-page-base) !important;
}

.cs-footer,
.site-footer {
  border-top: 1px solid var(--cs-color-footer-border) !important;
}

/* Mobile: same system. Transparent home top state, solid page-base after scroll. */
@media screen and (max-width: 989px) {
  .header-announcement-bar,
  .announcement-bar {
    padding-left: var(--cs-gutter-mobile, 20px) !important;
    padding-right: var(--cs-gutter-mobile, 20px) !important;
  }

  .header-nav-drawer,
  .dd-panel-drawer,
  .drawer-bg-pane {
    background: var(--cs-color-header-bg) !important;
    color: var(--cs-color-header-solid-text) !important;
  }
}


/* =========================================================
   COTTON & SAND - hardened Realm header scroll state
   Purpose: reliably match Realm's top transparent header and
   scrolled solid cream header behaviour on desktop and mobile.
   These selectors are intentionally placed after existing rules.
   ========================================================= */
body.cs-realm-header-enabled {
  background: var(--cs-color-page-base, #F5F2EC) !important;
}

/* Homepage at top: transparent header over the hero, light nav/logo/icons. */
body.lx-template--index.cs-header-at-top #SiteHeader.cs-realm-header,
body.lx-template--index.cs-header-at-top #SiteHeader.cs-realm-header .header-bar-inner {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--cs-color-header-transparent-text, #FDFCF9) !important;
  border-color: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}

body.lx-template--index.cs-header-at-top #SiteHeader.cs-realm-header .header-mobile-logo,
body.lx-template--index.cs-header-at-top #SiteHeader.cs-realm-header .header-desktop-logo,
body.lx-template--index.cs-header-at-top #SiteHeader.cs-realm-header .hdr-toolbar-item,
body.lx-template--index.cs-header-at-top #SiteHeader.cs-realm-header .hdr-item-language-selector,
body.lx-template--index.cs-header-at-top #SiteHeader.cs-realm-header .hdr-nav-desktop a,
body.lx-template--index.cs-header-at-top #SiteHeader.cs-realm-header .hdr-nav-desktop a:visited,
body.lx-template--index.cs-header-at-top #SiteHeader.cs-realm-header .header-bar--shopping-tools,
body.lx-template--index.cs-header-at-top #SiteHeader.cs-realm-header .header-bar--shopping-tools a,
body.lx-template--index.cs-header-at-top #SiteHeader.cs-realm-header .header-bar--shopping-tools button,
body.lx-template--index.cs-header-at-top #SiteHeader.cs-realm-header .hdr-menu-button,
body.lx-template--index.cs-header-at-top #SiteHeader.cs-realm-header .menu-icon {
  color: var(--cs-color-header-transparent-text, #FDFCF9) !important;
}

body.lx-template--index.cs-header-at-top #SiteHeader.cs-realm-header .menu-line {
  border-top-color: var(--cs-color-header-transparent-text, #FDFCF9) !important;
  background: var(--cs-color-header-transparent-text, #FDFCF9) !important;
}

/* Homepage after scroll and all non-home pages: solid cream header, dark nav/logo/icons. */
body.cs-header-is-scrolled #SiteHeader.cs-realm-header,
body.cs-header-is-scrolled #SiteHeader.cs-realm-header .header-bar-inner,
body:not(.lx-template--index) #SiteHeader.cs-realm-header,
body:not(.lx-template--index) #SiteHeader.cs-realm-header .header-bar-inner,
#SiteHeader.cs-realm-header.cs-header-solid-active,
#SiteHeader.cs-realm-header.cs-header-solid-active .header-bar-inner {
  background: var(--cs-color-header-bg, #F5F2EC) !important;
  background-color: var(--cs-color-header-bg, #F5F2EC) !important;
  color: var(--cs-color-header-solid-text, #2C1A0E) !important;
  border-bottom-color: var(--cs-color-header-border, rgba(44, 26, 14, 0.10)) !important;
  box-shadow: none !important;
}

body.cs-header-is-scrolled #SiteHeader.cs-realm-header .header-mobile-logo,
body.cs-header-is-scrolled #SiteHeader.cs-realm-header .header-desktop-logo,
body.cs-header-is-scrolled #SiteHeader.cs-realm-header .hdr-toolbar-item,
body.cs-header-is-scrolled #SiteHeader.cs-realm-header .hdr-item-language-selector,
body.cs-header-is-scrolled #SiteHeader.cs-realm-header .hdr-nav-desktop a,
body.cs-header-is-scrolled #SiteHeader.cs-realm-header .hdr-nav-desktop a:visited,
body.cs-header-is-scrolled #SiteHeader.cs-realm-header .header-bar--shopping-tools,
body.cs-header-is-scrolled #SiteHeader.cs-realm-header .header-bar--shopping-tools a,
body.cs-header-is-scrolled #SiteHeader.cs-realm-header .header-bar--shopping-tools button,
body.cs-header-is-scrolled #SiteHeader.cs-realm-header .hdr-menu-button,
body.cs-header-is-scrolled #SiteHeader.cs-realm-header .menu-icon,
body:not(.lx-template--index) #SiteHeader.cs-realm-header .header-mobile-logo,
body:not(.lx-template--index) #SiteHeader.cs-realm-header .header-desktop-logo,
body:not(.lx-template--index) #SiteHeader.cs-realm-header .hdr-toolbar-item,
body:not(.lx-template--index) #SiteHeader.cs-realm-header .hdr-item-language-selector,
body:not(.lx-template--index) #SiteHeader.cs-realm-header .hdr-nav-desktop a,
body:not(.lx-template--index) #SiteHeader.cs-realm-header .hdr-nav-desktop a:visited,
body:not(.lx-template--index) #SiteHeader.cs-realm-header .header-bar--shopping-tools,
body:not(.lx-template--index) #SiteHeader.cs-realm-header .header-bar--shopping-tools a,
body:not(.lx-template--index) #SiteHeader.cs-realm-header .header-bar--shopping-tools button,
body:not(.lx-template--index) #SiteHeader.cs-realm-header .hdr-menu-button,
body:not(.lx-template--index) #SiteHeader.cs-realm-header .menu-icon {
  color: var(--cs-color-header-solid-text, #2C1A0E) !important;
}

body.cs-header-is-scrolled #SiteHeader.cs-realm-header .menu-line,
body:not(.lx-template--index) #SiteHeader.cs-realm-header .menu-line {
  border-top-color: var(--cs-color-header-solid-text, #2C1A0E) !important;
  background: var(--cs-color-header-solid-text, #2C1A0E) !important;
}

#SiteHeader.cs-realm-header .header-bar-inner {
  transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease !important;
}

/* =========================================================
   COTTON & SAND - header section wrapper transparency fix
   Purpose: allow the home transparent header to reveal the
   Hero image plus .hero-overlay underneath, instead of the
   header Shopify section wrapper showing the page-base colour.
   ========================================================= */

/* The page background should not be painted onto every Shopify
   section wrapper, because the header wrapper must be transparent
   while it sits over the Hero. Specific content sections receive
   their own surface rules above. */

body.lx-template--index.cs-header-at-top .header-group,
body.lx-template--index.cs-header-at-top .cs-realm-header-section,
body.lx-template--index.cs-header-at-top .cs-realm-header-section.gradient,
body.lx-template--index.cs-header-at-top .cs-realm-header-section .gradient,
body.lx-template--index.cs-header-at-top .header-group > .shopify-section:has(#SiteHeader),
body.lx-template--index.cs-header-at-top .header-group > .shopify-section:has(#SiteHeader) .gradient,
body.lx-template--index.cs-header-at-top #SiteHeader.cs-realm-header,
body.lx-template--index.cs-header-at-top #SiteHeader.cs-realm-header .header-bar-inner,
#SiteHeader.cs-realm-header.cs-header-transparent-active,
#SiteHeader.cs-realm-header.cs-header-transparent-active .header-bar-inner {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
  border-bottom-color: transparent !important;
}

body.lx-template--index.cs-header-at-top .cs-realm-header-section::before,
body.lx-template--index.cs-header-at-top .cs-realm-header-section::after,
body.lx-template--index.cs-header-at-top #SiteHeader.cs-realm-header::before,
body.lx-template--index.cs-header-at-top #SiteHeader.cs-realm-header::after,
body.lx-template--index.cs-header-at-top #SiteHeader.cs-realm-header .header-bar-inner::before,
body.lx-template--index.cs-header-at-top #SiteHeader.cs-realm-header .header-bar-inner::after {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

body.cs-header-is-scrolled .cs-realm-header-section,
body:not(.lx-template--index) .cs-realm-header-section,
body.cs-header-is-scrolled .header-group > .shopify-section:has(#SiteHeader),
body:not(.lx-template--index) .header-group > .shopify-section:has(#SiteHeader),
body.cs-header-is-scrolled #SiteHeader.cs-realm-header,
body.cs-header-is-scrolled #SiteHeader.cs-realm-header .header-bar-inner,
body:not(.lx-template--index) #SiteHeader.cs-realm-header,
body:not(.lx-template--index) #SiteHeader.cs-realm-header .header-bar-inner,
#SiteHeader.cs-realm-header.cs-header-solid-active,
#SiteHeader.cs-realm-header.cs-header-solid-active .header-bar-inner {
  background: var(--cs-color-header-bg, #F5F2EC) !important;
  background-color: var(--cs-color-header-bg, #F5F2EC) !important;
  color: var(--cs-color-header-solid-text, #2C1A0E) !important;
  border-bottom-color: var(--cs-color-header-border, rgba(44, 26, 14, 0.10)) !important;
  box-shadow: none !important;
}


/* =========================================================
   COTTON & SAND - Realm-inspired structural line reduction
   Purpose: remove heavy section/header/trust/footer divider
   lines so the page reads as one continuous cream surface.
   Keep button/input borders intact.
   ========================================================= */
:root {
  --cs-structural-line: transparent;
}

/* Header and announcement should blend into the surface when solid. */
.header-announcement-bar,
.announcement-bar,
.header-bar-inner,
#SiteHeader.cs-realm-header,
#SiteHeader.cs-realm-header .header-bar-inner,
.cs-realm-header-section,
body.cs-header-is-scrolled .cs-realm-header-section,
body:not(.lx-template--index) .cs-realm-header-section,
body.cs-header-is-scrolled .header-group > .shopify-section:has(#SiteHeader),
body:not(.lx-template--index) .header-group > .shopify-section:has(#SiteHeader) {
  border-bottom-color: transparent !important;
  border-bottom-width: 0 !important;
  border-bottom-style: none !important;
  box-shadow: none !important;
}

/* Preserve the transparent top state and remove the solid divider after scroll. */
body.cs-header-is-scrolled #SiteHeader.cs-realm-header,
body.cs-header-is-scrolled #SiteHeader.cs-realm-header .header-bar-inner,
body:not(.lx-template--index) #SiteHeader.cs-realm-header,
body:not(.lx-template--index) #SiteHeader.cs-realm-header .header-bar-inner,
#SiteHeader.cs-realm-header.cs-header-solid-active,
#SiteHeader.cs-realm-header.cs-header-solid-active .header-bar-inner {
  border-bottom-color: transparent !important;
  border-bottom-width: 0 !important;
  border-bottom-style: none !important;
  box-shadow: none !important;
}

/* Trust bar: remove horizontal borders and vertical divider strokes. */
.trust-bar {
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.trust-divider,
.trust-bar .trust-divider,
.trust-item::before,
.trust-item::after {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

/* Remove structural lines between supporting sections and footer. */
.newsletter-section,
.cs-footer,
.site-footer,
#shopify-section-footer,
#shopify-section-footer .cs-footer,
.footer-inner,
.cs-footer-grid,
.cs-footer-bottom,
.cs-footer-mobile-panel,
.cs-footer-mobile-summary {
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.site-footer hr,
.cs-footer hr,
#shopify-section-footer hr,
.site-footer .hr-width-margins,
.cs-footer .hr-width-margins {
  display: none !important;
  border: 0 !important;
  background: transparent !important;
}

/* Section wrappers should not create hairline seams on the base surface. */
.material-story,
.craft-section,
.product-section,
.cs-our-picks,
.newsletter-section,
.trust-bar,
#shopify-section-footer {
  box-shadow: none !important;
}

/* =========================================================
   COTTON & SAND - footer information bar keyline removal
   Purpose: remove vertical divider lines between footer
   information bar columns while keeping layout and content.
   ========================================================= */
.footer-shopping-info-section .keyline-grid .multicolumn-grid-item::after,
.footer-shopping-info-section .multicolumn-grid-item::after,
.footer-shopping-info-section .grid-two-col.keyline-grid .multicolumn-grid-item:nth-child(even)::after,
.footer-shopping-info-section .grid-three-col.keyline-grid .multicolumn-grid-item:nth-child(3n - 2)::after,
.footer-shopping-info-section .grid-three-col.keyline-grid .multicolumn-grid-item:nth-child(3n)::after,
.footer-shopping-info-section .grid-four-col.keyline-grid .multicolumn-grid-item::after,
.footer-shopping-info-section .grid-four-col.keyline-grid .multicolumn-grid-item:nth-child(4n)::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

.footer-shopping-info-section .multicolumn-grid-wrapper,
.footer-shopping-info-section .section-inner {
  background-image: none !important;
}

/* =========================================================
   COTTON & SAND - homepage base-surface gap correction
   Purpose: align the remaining homepage structural gaps with
   the Realm-inspired base surface (#F5F2EC). These two gaps are
   not content panels; they are page rhythm / spacing surfaces.
   Keep image overlays, text panels, buttons and product media intact.
   ========================================================= */

/* CS Dual Category: the gutter between the two image cards should
   read as the same page base surface, not the older lighter page white. */
.dual-category {
  background: var(--cs-color-page-base, #F5F2EC) !important;
  background-color: var(--cs-color-page-base, #F5F2EC) !important;
}

/* CS Material Story: the top spacing area belongs to the page surface.
   This prevents the section pause above the material content from
   reverting to #FDFCF9 / panel cream. */
.material-story {
  background: var(--cs-color-page-base, #F5F2EC) !important;
  background-color: var(--cs-color-page-base, #F5F2EC) !important;
}

/* Keep the material text itself as a readable editorial panel only when
   previous rules intentionally assign a panel surface; the surrounding
   spacing remains page-base. */
.material-story::before,
.material-story::after,
.dual-category::before,
.dual-category::after {
  background: var(--cs-color-page-base, #F5F2EC) !important;
  background-color: var(--cs-color-page-base, #F5F2EC) !important;
  box-shadow: none !important;
}

/* =========================================================
   COTTON & SAND - Realm-inspired About Info + Product Picks
   Purpose: migrate Realm's about_info and featured products UI
   into the Cotton & Sand homepage without changing Shopify
   product/cart logic.
   ========================================================= */

/* 1. Replacement for the old Dual Category position.
   This follows Realm's ctm-about-info structure: one centered
   editorial statement, large serif heading, restrained copy,
   and a calm #F5F2EC surface. */
.cs-about-info-wrapper,
.cs-about-info-section {
  background: var(--cs-color-page-base, #F5F2EC) !important;
  background-color: var(--cs-color-page-base, #F5F2EC) !important;
}

.cs-about-info-section {
  position: relative;
  overflow: hidden;
  color: var(--cs-color-text-primary, #2C1A0E);
}

.cs-about-info__inner {
  max-width: min(1280px, calc(100vw - 96px));
  margin: 0 auto;
  min-height: 420px;
  padding: clamp(112px, 10vw, 168px) 0 clamp(84px, 7vw, 120px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.cs-about-info__eyebrow {
  max-width: 360px;
  margin: 0 auto clamp(20px, 2vw, 28px);
  font-size: clamp(14px, 1.05vw, 18px);
  line-height: 1.2;
  font-family: var(--cs-font-body, 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif);
  color: var(--cs-color-text-muted, #6F5B46);
  letter-spacing: 0.01em;
  text-transform: none;
}

.cs-about-info__heading {
  max-width: 1180px;
  margin: 0 auto;
  font-family: var(--cs-font-heading, Georgia, 'Times New Roman', serif);
  font-size: clamp(36px, 5vw, 66px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--cs-color-text-primary, #2C1A0E);
  text-wrap: balance;
}

.cs-about-info__body {
  max-width: 680px;
  margin: clamp(24px, 2.4vw, 34px) auto 0;
  font-size: clamp(14px, 1.1vw, 18px);
  line-height: 1.55;
  color: var(--cs-color-text-muted, #6F5B46);
}

.cs-about-info__body p {
  margin: 0;
}

/* Do not allow the previous image-led Dual Category rules to affect
   the new About Info replacement. */
.cs-about-info-section .dual-category,
.cs-about-info-section .dual-item {
  display: none !important;
}

/* 2. Realm-inspired featured product board.
   Larger product imagery, square media ratio, larger heading placed
   at the section's top-left, and a simple top-right collection link. */
.cs-our-picks-section,
.cs-our-picks {
  background: var(--cs-color-page-base, #F5F2EC) !important;
  background-color: var(--cs-color-page-base, #F5F2EC) !important;
}

.cs-our-picks {
  border-top: 0 !important;
  padding: clamp(112px, 10vw, 160px) clamp(32px, 4vw, 64px) clamp(96px, 8vw, 132px) !important;
  font-family: var(--cs-font-body, 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif) !important;
}

.cs-our-picks__header {
  max-width: 1280px !important;
  margin: 0 auto clamp(36px, 4vw, 56px) !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 24px !important;
  text-align: left !important;
}

.cs-our-picks__title,
.cs-our-picks__heading {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--cs-font-heading, Georgia, 'Times New Roman', serif) !important;
  font-size: clamp(30px, 3.6vw, 48px) !important;
  font-weight: 400 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  color: var(--cs-color-text-primary, #2C1A0E) !important;
}

.cs-our-picks__top-link {
  flex: 0 0 auto;
  font-size: 13px;
  line-height: 1;
  color: var(--cs-color-text-muted, #6F5B46);
  text-decoration: none;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.01em;
}

.cs-our-picks__top-link:hover {
  color: var(--cs-color-text-primary, #2C1A0E);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.cs-our-picks__grid {
  max-width: 1280px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(22px, 2.4vw, 32px) !important;
}

.cs-picks-card__image-wrap {
  aspect-ratio: 1 / 1 !important;
  margin-bottom: 18px !important;
  background-color: var(--cs-color-panel-cream, #FDFCF9) !important;
}

.cs-picks-card__image-wrap img,
.cs-picks-card__image-wrap .placeholder-svg {
  object-fit: cover !important;
}

.cs-picks-card__name {
  font-size: 14px !important;
  line-height: 1.35 !important;
  margin: 0 0 7px 0 !important;
  color: var(--cs-color-text-primary, #2C1A0E) !important;
}

.cs-picks-card__price {
  font-size: 13px !important;
  line-height: 1.3 !important;
  color: var(--cs-color-text-muted, #6F5B46) !important;
}

.cs-our-picks__footer {
  max-width: 1280px !important;
  margin: clamp(56px, 5vw, 72px) auto 0 !important;
  text-align: center !important;
}

@media screen and (max-width: 989px) {
  .cs-about-info__inner {
    max-width: calc(100vw - 48px);
    min-height: 360px;
    padding: 96px 0 72px;
  }

  .cs-about-info__heading {
    font-size: clamp(32px, 7vw, 52px);
  }

  .cs-our-picks {
    padding: 96px 24px 88px !important;
  }

  .cs-our-picks__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px 18px !important;
  }
}

@media screen and (max-width: 749px) {
  .cs-about-info__inner {
    max-width: calc(100vw - 40px);
    min-height: 320px;
    padding: 80px 0 64px;
  }

  .cs-about-info__eyebrow {
    font-size: 14px;
    margin-bottom: 18px;
  }

  .cs-about-info__heading {
    font-size: clamp(30px, 9vw, 42px);
    line-height: 1.12;
  }

  .cs-about-info__body {
    font-size: 14px;
    line-height: 1.55;
  }

  .cs-our-picks {
    padding: 80px 20px 76px !important;
  }

  .cs-our-picks__header {
    align-items: flex-start !important;
    flex-direction: column !important;
    margin-bottom: 32px !important;
  }

  .cs-our-picks__title,
  .cs-our-picks__heading {
    font-size: clamp(28px, 8vw, 38px) !important;
  }

  .cs-our-picks__grid {
    grid-template-columns: 1fr !important;
    gap: 34px !important;
  }

  .cs-picks-card__image-wrap {
    margin-bottom: 14px !important;
  }
}

/* =========================================================
   COTTON & SAND - Realm absolute section UI migration v2
   Scope: CS Hero, CS About Info, CS Our Picks
   Reference: Realm hero_banner, ctm_about_info, ctm_feature_products
   ========================================================= */
:root {
  --cs-realm-page-bg: #F5F2EB;
  --cs-realm-text: #3D3B33;
  --cs-realm-muted: rgba(61, 59, 51, 0.62);
  --cs-realm-container-pad-desktop: 48px;
  --cs-realm-container-pad-mobile: 20px;
  --cs-realm-section-top-desktop: 160px;
  --cs-realm-section-top-mobile: 120px;
  --cs-realm-product-gap-desktop: 20px;
  --cs-realm-product-gap-mobile: 12px;
}

/* ---------- 1. CS Hero: match Realm hero rhythm ---------- */
.hero {
  position: relative !important;
  width: 100% !important;
  height: 800px !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  box-sizing: border-box !important;
  background: #24150d !important;
}

.hero-image-wrap {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.hero-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

.hero-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: #24150d !important;
  opacity: 0.4 !important;
  pointer-events: none !important;
}

.hero-content {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 48px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  text-align: left !important;
  color: #F8F1E8 !important;
  z-index: 2 !important;
}

.hero-content > * {
  max-width: 800px !important;
}

.hero-eyebrow {
  margin: 0 0 18px !important;
  color: #F6EFE7 !important;
}

.hero-title {
  margin: 0 !important;
  color: #F8F1E8 !important;
  font-size: clamp(46px, 5.2vw, 72px) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.012em !important;
  max-width: 800px !important;
}

.hero-subtitle {
  margin: 24px 0 0 !important;
  max-width: 520px !important;
  color: #F6EFE7 !important;
  font-size: 18px !important;
  line-height: 1.45 !important;
}

.hero-ctas {
  margin-top: 28px !important;
  gap: 12px !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

.hero-scroll-indicator {
  display: none !important;
}

/* ---------- 2. CS About Info: match Realm ctm_about_info ---------- */
.cs-about-info-wrapper,
.cs-about-info-section {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--cs-realm-page-bg) !important;
  color: var(--cs-realm-text) !important;
  overflow: hidden !important;
}

.cs-about-info__inner {
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 160px 48px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 32px !important;
}

.cs-about-info__eyebrow {
  max-width: 320px !important;
  margin: 0 !important;
  color: var(--cs-realm-text) !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-weight: 400 !important;
}

.cs-about-info__heading {
  max-width: 1200px !important;
  margin: 0 auto !important;
  color: var(--cs-realm-text) !important;
  font-family: var(--cs-font-heading, Georgia, serif) !important;
  font-size: 66px !important;
  line-height: 1.08 !important;
  letter-spacing: -0.01em !important;
  font-weight: 400 !important;
  text-transform: none !important;
  text-wrap: balance !important;
}

.cs-about-info__body {
  display: none !important;
}

/* ---------- 3. CS Our Picks: match Realm ctm_feature_products ---------- */
.cs-our-picks-section,
.cs-our-picks {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border: 0 !important;
  background: var(--cs-realm-page-bg) !important;
  color: var(--cs-realm-text) !important;
}

.cs-our-picks {
  padding: 160px 48px 0 !important;
  font-family: var(--cs-font-body, Inter, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif) !important;
}

.cs-our-picks__header {
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 24px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

.cs-our-picks__title,
.cs-our-picks__heading {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--cs-realm-text) !important;
  font-family: var(--cs-font-body, Inter, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif) !important;
  font-size: 30px !important;
  line-height: 1.15 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.cs-our-picks__top-link {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--cs-realm-text) !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
  font-weight: 400 !important;
  white-space: nowrap !important;
}

.cs-our-picks__top-link:hover {
  color: var(--cs-realm-text) !important;
  text-decoration: none !important;
}

.cs-our-picks__grid {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: var(--cs-realm-product-gap-desktop) !important;
}

.cs-picks-card {
  width: 100% !important;
  min-width: 0 !important;
  background: transparent !important;
}

.cs-picks-card__image-wrap {
  aspect-ratio: 1 / 1 !important;
  width: 100% !important;
  margin: 0 0 20px !important;
  background: #E9E2D8 !important;
  overflow: hidden !important;
}

.cs-picks-card__image-wrap img,
.cs-picks-card__image-wrap .placeholder-svg {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.cs-picks-card__name {
  margin: 0 0 6px !important;
  color: var(--cs-realm-text) !important;
  font-size: 16px !important;
  line-height: 1.28 !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
}

.cs-picks-card__price {
  margin: 0 !important;
  color: var(--cs-realm-text) !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
}

.cs-picks-card__badge {
  top: 12px !important;
  left: 12px !important;
  background: #F6F1E9 !important;
  color: var(--cs-realm-text) !important;
  border-radius: 3px !important;
  padding: 5px 8px !important;
  font-size: 10px !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
}

.cs-picks-card__quick-add {
  left: 12px !important;
  right: 12px !important;
  bottom: 12px !important;
  min-height: 40px !important;
  padding: 10px 14px !important;
  background: var(--cs-button-soft-bg, rgba(248, 243, 234, 0.82)) !important;
  color: var(--cs-button-soft-text, var(--cs-color-text-primary, #2C1A0E)) !important;
  border: 1px solid var(--cs-button-soft-border, rgba(44, 26, 14, 0.16)) !important;
  opacity: 0 !important;
  transform: translateY(6px) !important;
  font-size: 12px !important;
  line-height: 1 !important;
  letter-spacing: 0.08em !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

.cs-picks-card:hover .cs-picks-card__quick-add {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

@media screen and (min-width: 1200px) {
  .cs-our-picks__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media screen and (max-width: 1199px) {
  .cs-about-info__inner {
    padding-top: 120px !important;
  }

  .cs-our-picks {
    padding-top: 120px !important;
  }

  .cs-about-info__heading {
    font-size: 48px !important;
  }
}

@media screen and (max-width: 749px) {
  .hero {
    height: 70svh !important;
    min-height: 520px !important;
  }

  .hero-content {
    padding: 24px !important;
  }

  .hero-title {
    font-size: 46px !important;
    line-height: 1 !important;
    max-width: 100% !important;
  }

  .hero-subtitle {
    font-size: 16px !important;
    max-width: 100% !important;
  }

  .cs-about-info__inner {
    padding: 120px 20px 0 !important;
    gap: 24px !important;
  }

  .cs-about-info__eyebrow {
    font-size: 16px !important;
  }

  .cs-about-info__heading {
    font-size: 32px !important;
    line-height: 1.14 !important;
    max-width: 100% !important;
  }

  .cs-our-picks {
    padding: 120px 20px 0 !important;
  }

  .cs-our-picks__header {
    margin-bottom: 20px !important;
    padding-right: 0 !important;
  }

  .cs-our-picks__title,
  .cs-our-picks__heading {
    font-size: 30px !important;
  }

  .cs-our-picks__top-link {
    font-size: 15px !important;
  }

  .cs-our-picks__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--cs-realm-product-gap-mobile) !important;
  }

  .cs-picks-card__image-wrap {
    margin-bottom: 12px !important;
  }

  .cs-picks-card__name {
    font-size: 14px !important;
  }

  .cs-picks-card__price {
    font-size: 13px !important;
  }

  .cs-picks-card__quick-add {
    display: none !important;
  }
}

@media screen and (max-width: 480px) {
  .cs-our-picks__grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
}


/* =========================================================
   COTTON & SAND - Realm-style full-bleed hero image system v3
   Scope: CS Hero stage, media, overlay and section gap.
   Reference truth: Realm hero-banner module
   (https://www.breatherealm.co/#MainContent).

   What this revision fixes
   ------------------------
   v2 left three structural conflicts in the legacy `.hero` block at the
   top of this file, which together kept the hero image from filling the
   stage the way Realm's does:

   1. `box-sizing: content-box` + `border-bottom: 50px` made the actual
      box 850px tall while the inner content (the image) stayed at 800px,
      so the image visibly stopped short of the stage edge. Replaced with
      a regular `margin-bottom: 50px` so the declared height equals the
      rendered stage.

   2. `object-position: center 30%` (still the default in v2) cropped the
      bottom of the image. Realm's hero-banner-media-position is
      `center center`, so this version restores that on every breakpoint.

   3. `.hero-overlay` used an asymmetric horizontal gradient
      (rgba left -> transparent right). Realm uses one flat colour at
      uniform opacity, which lets the photo read as a single full-bleed
      image instead of a darkened-left composition. The legacy gradient
      is replaced with `background: #24150d` and the authoritative rule
      in this block sets opacity 0.4, matching Realm.

   Scope discipline: this block does NOT touch hero copy, hero buttons,
   typography, scroll indicator, or any other section. Only stage, image,
   overlay, and the section gap.
   ========================================================= */
:root {
  --cs-hero-height-desktop: 800px;
  --cs-hero-height-tablet: 70svh;
  --cs-hero-height-mobile: 70svh;
  --cs-hero-min-height-desktop: 800px;
  --cs-hero-min-height-tablet: 560px;
  --cs-hero-min-height-mobile: 540px;
  --cs-hero-media-fit: cover;

  /* Aligned with Realm: --hero-banner-media-position: center center on all
     breakpoints. Earlier "center 30%" pulled the image up and cut off the
     bottom 30% of the photo, which was the visible "image not fully shown"
     bug. Adjust per future image only if the subject needs reframing. */
  --cs-hero-media-position-desktop: center center;
  --cs-hero-media-position-tablet: center center;
  --cs-hero-media-position-mobile: center center;

  --cs-hero-overlay-color: #24150d;
  --cs-hero-overlay-opacity: 0.4;
}

.hero {
  position: relative !important;
  width: 100% !important;
  height: var(--cs-hero-height-desktop) !important;
  min-height: var(--cs-hero-min-height-desktop) !important;
  max-height: none !important;
  margin: 0 0 50px 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  box-sizing: border-box !important;
  background: transparent !important;
  isolation: isolate !important;
}

.hero-image-wrap {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  overflow: hidden !important;
  background: transparent !important;
  z-index: 0 !important;
}

.hero-img {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: var(--cs-hero-media-fit) !important;
  object-position: var(--cs-hero-media-position-desktop) !important;
  transform: none !important;
  background: transparent !important;
}

.hero-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: var(--cs-hero-overlay-color) !important;
  opacity: var(--cs-hero-overlay-opacity) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

@media screen and (max-width: 989px) {
  .hero {
    height: var(--cs-hero-height-tablet) !important;
    min-height: var(--cs-hero-min-height-tablet) !important;
    margin-bottom: 40px !important;
  }

  .hero-img {
    object-position: var(--cs-hero-media-position-tablet) !important;
  }
}

@media screen and (max-width: 749px) {
  .hero {
    height: var(--cs-hero-height-mobile) !important;
    min-height: var(--cs-hero-min-height-mobile) !important;
    margin-bottom: 36px !important;
  }

  .hero-img {
    object-position: var(--cs-hero-media-position-mobile) !important;
  }
}

/* =========================================================
   COTTON & SAND - Realm-style nav underline states
   Purpose: keep header colour tied to scroll state, while using
   underline for hover/current-page feedback. Footer links only
   underline on hover and do not hold an active underline.
   ========================================================= */

/* Header top-level navigation links */
.hdr-nav-desktop .hdr-nav-primary-level-ul > li > a.cs-header-nav-link {
  position: relative !important;
  color: inherit !important;
  text-decoration: none !important;
  transition: none !important;
}

.hdr-nav-desktop .hdr-nav-primary-level-ul > li > a.cs-header-nav-link:hover,
.hdr-nav-desktop .hdr-nav-primary-level-ul > li > a.cs-header-nav-link:focus,
.hdr-nav-desktop .hdr-nav-primary-level-ul > li > a.cs-header-nav-link:visited {
  color: inherit !important;
  text-decoration: none !important;
}

.dd-highlight-style-opacity .nav-desktop-li-dd-item:hover > a.cs-header-nav-link,
.dd-highlight-style-opacity .hdr-nav-primary-level-ul > li > a.cs-header-nav-link:hover {
  opacity: 1 !important;
}

/* Footer desktop links: hover underline only, no sticky active state. */
.cs-footer__list a,
.cs-footer__accordion-nav a {
  position: relative !important;
  color: inherit !important;
  text-decoration: none !important;
  transition: none !important;
}

.cs-footer__list a::after,
.cs-footer__accordion-nav a::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: -3px !important;
  width: 100% !important;
  height: 1px !important;
  background: currentColor !important;
  opacity: 0 !important;
  transform: scaleX(0) !important;
  transform-origin: left center !important;
  transition: transform 180ms ease, opacity 180ms ease !important;
  pointer-events: none !important;
}

.cs-footer__list a:hover,
.cs-footer__list a:focus,
.cs-footer__accordion-nav a:hover,
.cs-footer__accordion-nav a:focus {
  color: inherit !important;
  text-decoration: none !important;
}

.cs-footer__list a:hover::after,
.cs-footer__list a:focus-visible::after,
.cs-footer__accordion-nav a:hover::after,
.cs-footer__accordion-nav a:focus-visible::after {
  opacity: 1 !important;
  transform: scaleX(1) !important;
}

/* Mobile drawer: no hover pattern; keep current page indication simple and stable. */
.header-nav-drawer a[aria-current="page"],
.header-nav-drawer .mob-menu-active,
.header-nav-drawer .active {
  text-decoration: underline !important;
  text-underline-offset: 6px !important;
  text-decoration-thickness: 1px !important;
}


/* =========================================================
   COTTON & SAND - nav underline conflict + mobile tap feedback
   Purpose: keep only one desktop header underline visible. When
   another nav item is hovered or keyboard-focused, the current-page
   underline temporarily withdraws. On mobile drawer links, touch/click
   receives a brief darker text feedback instead of hover underline.
   ========================================================= */

/* Mobile drawer: no hover system. Give the user immediate tactile
   feedback on tap by deepening only the text colour for the pressed item. */
.header-nav-drawer-linklist a,
.header-nav-drawer-linklist button,
.header-nav-drawer-linklist .mob-parent-button,
.header-nav-drawer-linklist .mob-parent-accordion-button,
.header-nav-drawer-linklist .mob-accordion-group-heading,
.header-nav-drawer-linklist .nav-secondary-fo-back-button {
  transition: color 120ms ease, opacity 120ms ease !important;
  -webkit-tap-highlight-color: rgba(44, 26, 14, 0.10);
}

.header-nav-drawer-linklist a:active,
.header-nav-drawer-linklist button:active,
.header-nav-drawer-linklist .mob-parent-button:active,
.header-nav-drawer-linklist .mob-parent-accordion-button:active,
.header-nav-drawer-linklist .mob-accordion-group-heading:active,
.header-nav-drawer-linklist .nav-secondary-fo-back-button:active,
.header-nav-drawer-linklist a.cs-mobile-nav-pressed,
.header-nav-drawer-linklist button.cs-mobile-nav-pressed {
  color: var(--cs-color-text-strong, #160D07) !important;
  opacity: 1 !important;
}

/* =========================================================
   COTTON & SAND - nav underline precision + mobile bold tap
   Purpose: align desktop header underline directly under the
   nav text, Realm-style, and make mobile drawer tap feedback
   more visible through momentary font-weight increase.
   ========================================================= */

/* Desktop header: use native text underline instead of an absolute
   pseudo-element. The pseudo-element was positioned relative to the
   full header link box, so the line sat too low and too far from text. */
.hdr-nav-desktop .hdr-nav-primary-level-ul > li > a.cs-header-nav-link::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  transform: none !important;
}

.hdr-nav-desktop .hdr-nav-primary-level-ul > li > a.cs-header-nav-link {
  text-decoration-line: none !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 5px !important;
  text-decoration-color: currentColor !important;
  text-decoration-skip-ink: none !important;
}

/* Mobile drawer: stronger tap/click feedback. Touch devices do not have
   real hover, so the pressed link becomes briefly bolder and deeper. */
.header-nav-drawer-linklist a,
.header-nav-drawer-linklist button,
.header-nav-drawer-linklist .mob-parent-button,
.header-nav-drawer-linklist .mob-parent-accordion-button,
.header-nav-drawer-linklist .mob-accordion-group-heading,
.header-nav-drawer-linklist .nav-secondary-fo-back-button,
.header-nav-drawer .nav-drawer--secondary-menu a {
  transition: color 120ms ease, opacity 120ms ease, font-weight 120ms ease !important;
  -webkit-tap-highlight-color: rgba(44, 26, 14, 0.12) !important;
}

.header-nav-drawer-linklist a:active,
.header-nav-drawer-linklist button:active,
.header-nav-drawer-linklist .mob-parent-button:active,
.header-nav-drawer-linklist .mob-parent-accordion-button:active,
.header-nav-drawer-linklist .mob-accordion-group-heading:active,
.header-nav-drawer-linklist .nav-secondary-fo-back-button:active,
.header-nav-drawer .nav-drawer--secondary-menu a:active,
.header-nav-drawer-linklist a.cs-mobile-nav-pressed,
.header-nav-drawer-linklist button.cs-mobile-nav-pressed {
  color: var(--cs-color-text-strong, #160D07) !important;
  font-weight: 600 !important;
  opacity: 1 !important;
}


/* =========================================================
   COTTON & SAND - Realm-style announcement bar scroll hide
   Purpose: show the announcement at the top of the page, then
   remove it in sync with the header solid state so there is no
   awkward intermediate state. The bar is collapsed through height,
   opacity and transform rather than display:none to avoid jumpy UI.
   ========================================================= */
:root {
  --cs-announcement-height: 30px;
  --cs-announcement-transition: 220ms ease;
}

.cs-realm-announcement-section,
.cs-realm-announcement-bar,
.header-announcement-bar,
.announcement-bar {
  transition:
    height var(--cs-announcement-transition),
    min-height var(--cs-announcement-transition),
    max-height var(--cs-announcement-transition),
    opacity var(--cs-announcement-transition),
    transform var(--cs-announcement-transition),
    border-color var(--cs-announcement-transition),
    padding var(--cs-announcement-transition) !important;
  will-change: height, opacity, transform;
}

body.cs-realm-announcement-enabled:not(.cs-announcement-hidden) .cs-realm-announcement-section,
body.cs-realm-announcement-enabled:not(.cs-announcement-hidden) .cs-realm-announcement-bar {
  max-height: var(--cs-announcement-height) !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
  overflow: hidden !important;
}

body.cs-announcement-hidden .cs-realm-announcement-section,
body.cs-announcement-hidden .cs-realm-announcement-bar,
body.cs-announcement-hidden .header-group > .shopify-section:has(#HdrAnnouncementBar),
body.cs-announcement-hidden #HdrAnnouncementBar {
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  opacity: 0 !important;
  transform: translateY(-100%) !important;
  overflow: hidden !important;
  border-top-width: 0 !important;
  border-bottom-width: 0 !important;
  pointer-events: none !important;
}

body.cs-announcement-hidden .cs-realm-announcement-section .announcement-block,
body.cs-announcement-hidden #HdrAnnouncementBar .announcement-block {
  opacity: 0 !important;
  pointer-events: none !important;
}

body.cs-announcement-hidden .cs-realm-header-group,
body.cs-announcement-hidden .cs-realm-header-section {
  top: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  .cs-realm-announcement-section,
  .cs-realm-announcement-bar,
  .header-announcement-bar,
  .announcement-bar {
    transition: none !important;
  }
}

/* =========================================================
   COTTON & SAND REALM DESIGN TOKENS V1 - IMPLEMENTATION PATCH
   Scope: approved post-cleanup token patch.
   Adds button sizing, footer accordion icon and FAQ disclosure tokens.
   Does not change the Cotton & Sand page-base colour (#F5F2EC).
   ========================================================= */
:root {
  /* Editorial button sizing - shape intentionally remains theme-defined */
  --cs-button-inline-width: fit-content;
  --cs-button-min-width-editorial: 150px;
  --cs-button-max-width-editorial: 260px;
  --cs-button-height-editorial-desktop: 48px;
  --cs-button-height-editorial-mobile: 44px;
  --cs-button-padding-x-editorial: 28px;
  --cs-button-padding-y-editorial: 0;

  /* Footer mobile accordion plus/minus */
  --cs-accordion-icon-size: 14px;
  --cs-accordion-icon-stroke: 1px;
  --cs-accordion-icon-color: #3D3B33;
  --cs-accordion-divider: rgba(61, 59, 51, 0.16);

  /* FAQ / content disclosure chevron */
  --cs-disclosure-icon-size: 16px;
  --cs-disclosure-icon-stroke: 1.5px;
  --cs-disclosure-icon-color: #3D3B33;
  --cs-disclosure-icon-color-muted: rgba(61, 59, 51, 0.72);
  --cs-disclosure-icon-transition: transform 180ms ease, opacity 180ms ease;
  --cs-faq-accordion-border: rgba(61, 59, 51, 0.14);
  --cs-faq-question-size-desktop: 15px;
  --cs-faq-question-size-mobile: 14px;
  --cs-faq-answer-size-desktop: 15px;
  --cs-faq-answer-size-mobile: 14px;
  --cs-faq-row-padding-y-desktop: 22px;
  --cs-faq-row-padding-y-mobile: 20px;
}

/* Material Story: editorial CTA should not stretch across the entire text column on desktop. */
.material-text {
  align-items: flex-start !important;
}

.material-text .btn-primary,
.material-text a.btn.btn-primary,
.material-text button.btn.btn-primary {
  width: auto !important;
  inline-size: var(--cs-button-inline-width) !important;
  min-width: var(--cs-button-min-width-editorial) !important;
  max-width: var(--cs-button-max-width-editorial) !important;
  height: var(--cs-button-height-editorial-desktop) !important;
  min-height: var(--cs-button-height-editorial-desktop) !important;
  padding: var(--cs-button-padding-y-editorial) var(--cs-button-padding-x-editorial) !important;
}

@media screen and (max-width: 749px) {
  .material-text .btn-primary,
  .material-text a.btn.btn-primary,
  .material-text button.btn.btn-primary {
    width: 100% !important;
    inline-size: 100% !important;
    max-width: none !important;
    min-height: var(--cs-button-height-editorial-mobile) !important;
    height: var(--cs-button-height-editorial-mobile) !important;
  }
}

/* FAQ content accordion: Realm-style chevron, no boxed plus/cross control. */
.faq-icon {
  width: var(--cs-disclosure-icon-size) !important;
  height: var(--cs-disclosure-icon-size) !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--cs-disclosure-icon-color) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 var(--cs-disclosure-icon-size) !important;
  padding: 0 !important;
  transform: none !important;
}

.faq-icon svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  stroke: currentColor !important;
  stroke-width: var(--cs-disclosure-icon-stroke) !important;
  fill: none !important;
  transition: var(--cs-disclosure-icon-transition) !important;
}

.faq-item.open .faq-icon {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--cs-disclosure-icon-color) !important;
}

.faq-item.open .faq-icon svg {
  transform: rotate(180deg) !important;
}

.faq-item {
  border-bottom-color: var(--cs-faq-accordion-border) !important;
}

.faq-question {
  padding-top: var(--cs-faq-row-padding-y-desktop) !important;
  padding-bottom: var(--cs-faq-row-padding-y-desktop) !important;
  font-size: var(--cs-faq-question-size-desktop) !important;
}

.faq-answer-inner {
  font-size: var(--cs-faq-answer-size-desktop) !important;
}

@media screen and (max-width: 767px) {
  .faq-question {
    padding-top: var(--cs-faq-row-padding-y-mobile) !important;
    padding-bottom: var(--cs-faq-row-padding-y-mobile) !important;
    font-size: var(--cs-faq-question-size-mobile) !important;
  }

  .faq-answer-inner {
    font-size: var(--cs-faq-answer-size-mobile) !important;
  }
}

/* =========================================================
   COTTON & SAND - button alignment audit fix
   Purpose: centre text inside fixed-height CTA/button controls.
   The previous editorial button sizing token set a fixed height but
   left .btn as inline-block, so text aligned to the top via normal
   line-height instead of the vertical centre.
   ========================================================= */
.btn,
a.btn,
button.btn,
.btn-primary,
.btn-secondary,
.btn-secondary-light,
.cs-our-picks__btn,
.cs-btn-add-cart,
.cs-btn-checkout,
.cs-btn-buy-now,
.product-form__submit.button,
.product-form__submit.button--primary,
.product-form__buttons .button,
.cart__checkout-button,
.shopify-challenge__button,
.customer button,
button.shopify-payment-button__button--unbranded,
.shopify-payment-button__button--unbranded,
.jdgm-btn,
.jdgm-form__submit-btn,
.newsletter-form .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1 !important;
}

.cs-btn-add-cart,
.cs-btn-checkout,
.cs-btn-buy-now,
.product-form__submit.button,
.product-form__submit.button--primary,
.product-form__buttons .button,
.cart__checkout-button,
.shopify-challenge__button,
.customer button,
button.shopify-payment-button__button--unbranded,
.shopify-payment-button__button--unbranded {
  width: 100% !important;
}

.material-text .btn-primary,
.material-text a.btn.btn-primary,
.material-text button.btn.btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1 !important;
}

/* =========================================================
   COTTON & SAND - footer underline audit hardening
   Purpose: footer links must have one underline source only.
   Previous builds had both pseudo-element underlines and native
   text-decoration underlines, causing some links to look thicker.

   Final source of truth:
   - Header nav may use its own underline system.
   - Footer links use native text-decoration only on hover/focus.
   - Footer link ::after pseudo underlines are disabled.
   ========================================================= */
.cs-footer .cs-footer__list a::before,
.cs-footer .cs-footer__list a::after,
.cs-footer .cs-footer__accordion-nav a::before,
.cs-footer .cs-footer__accordion-nav a::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  transform: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.cs-footer .cs-footer__list a,
.cs-footer .cs-footer__list a:link,
.cs-footer .cs-footer__list a:visited,
.cs-footer .cs-footer__list a:active,
.cs-footer .cs-footer__accordion-nav a,
.cs-footer .cs-footer__accordion-nav a:link,
.cs-footer .cs-footer__accordion-nav a:visited,
.cs-footer .cs-footer__accordion-nav a:active {
  text-decoration: none !important;
  text-decoration-line: none !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px !important;
  text-decoration-color: currentColor !important;
  text-decoration-skip-ink: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

.cs-footer .cs-footer__list a:hover,
.cs-footer .cs-footer__list a:focus-visible,
.cs-footer .cs-footer__accordion-nav a:hover,
.cs-footer .cs-footer__accordion-nav a:focus-visible {
  text-decoration: underline !important;
  text-decoration-line: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px !important;
  text-decoration-color: currentColor !important;
  text-decoration-skip-ink: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* =========================================================
   COTTON & SAND - button token audit hardening v1
   Purpose: enforce a single contextual token source for all
   product-card quick actions. Quick Add belongs to the Soft Utility
   button family, not the Commerce / Transaction primary family.
   ========================================================= */

/* Product card and quick-action buttons: low-interruption soft utility. */
.cs-picks-card__quick-add,
.cs-picks-card__quick-add:visited,
.quick-add__submit,
.quick-add__submit:visited,
.quick-add-f-button,
.quick-add-f-button:visited,
.btn-quick-add,
.btn-quick-add:visited,
.product-card-quick-add .button,
.product-card-quick-add .button:visited,
.product-card-quick-add button,
.product-card-quick-add button:visited,
.product-card-quick-add.quick-add-button-mobile-icon .button,
.product-card-quick-add.quick-add-button-mobile-button-solid .button,
.product-card-quick-add.quick-add-button-mobile-button-solid-inverted .button,
.product-card-quick-add.quick-add-button-mobile-button-outline .button,
.product-card-quick-add.quick-add-button-mobile-button-text .button,
.product-card-quick-add.quick-add-button-desktop-button-solid .button,
.product-card-quick-add.quick-add-button-desktop-button-solid-inverted .button,
.product-card-quick-add.quick-add-button-desktop-button-outline .button,
.product-card-quick-add.quick-add-button-desktop-button-text .button {
  background-color: var(--cs-button-soft-bg, rgba(248, 243, 234, 0.82)) !important;
  background: var(--cs-button-soft-bg, rgba(248, 243, 234, 0.82)) !important;
  color: var(--cs-button-soft-text, var(--cs-color-text-primary, #2C1A0E)) !important;
  border: 1px solid var(--cs-button-soft-border, rgba(44, 26, 14, 0.16)) !important;
  box-shadow: none !important;
}

.cs-picks-card__quick-add:hover,
.cs-picks-card__quick-add:focus,
.cs-picks-card__quick-add:focus-visible,
.cs-picks-card__quick-add:active,
.quick-add__submit:hover,
.quick-add__submit:focus,
.quick-add__submit:focus-visible,
.quick-add__submit:active,
.quick-add-f-button:hover,
.quick-add-f-button:focus,
.quick-add-f-button:focus-visible,
.quick-add-f-button:active,
.btn-quick-add:hover,
.btn-quick-add:focus,
.btn-quick-add:focus-visible,
.btn-quick-add:active,
.product-card-quick-add .button:hover,
.product-card-quick-add .button:focus,
.product-card-quick-add .button:focus-visible,
.product-card-quick-add .button:active,
.product-card-quick-add button:hover,
.product-card-quick-add button:focus,
.product-card-quick-add button:focus-visible,
.product-card-quick-add button:active,
.product-card-quick-add.quick-add-button-mobile-icon .button:hover,
.product-card-quick-add.quick-add-button-mobile-button-solid .button:hover,
.product-card-quick-add.quick-add-button-mobile-button-solid-inverted .button:hover,
.product-card-quick-add.quick-add-button-mobile-button-outline .button:hover,
.product-card-quick-add.quick-add-button-mobile-button-text .button:hover,
.product-card-quick-add.quick-add-button-desktop-button-solid .button:hover,
.product-card-quick-add.quick-add-button-desktop-button-solid-inverted .button:hover,
.product-card-quick-add.quick-add-button-desktop-button-outline .button:hover,
.product-card-quick-add.quick-add-button-desktop-button-text .button:hover {
  background-color: var(--cs-button-soft-hover-bg, rgba(175, 142, 111, 0.18)) !important;
  background: var(--cs-button-soft-hover-bg, rgba(175, 142, 111, 0.18)) !important;
  color: var(--cs-button-soft-hover-text, var(--cs-color-text-primary, #2C1A0E)) !important;
  border-color: var(--cs-button-soft-hover-border, rgba(44, 26, 14, 0.24)) !important;
  box-shadow: none !important;
}

.cs-picks-card__quick-add *,
.quick-add__submit *,
.quick-add-f-button *,
.btn-quick-add *,
.product-card-quick-add .button *,
.product-card-quick-add button * {
  color: inherit !important;
}

.quick-add__submit svg,
.quick-add-f-button svg,
.btn-quick-add svg,
.product-card-quick-add svg {
  color: inherit !important;
  stroke: currentColor !important;
}

.product-card-quick-add.quick-add-button-mobile-icon .button::after,
.product-card-quick-add.quick-add-button-desktop-icon .button::after {
  background: var(--cs-button-soft-bg, rgba(248, 243, 234, 0.82)) !important;
  border: 1px solid var(--cs-button-soft-border, rgba(44, 26, 14, 0.16)) !important;
}

.product-card-quick-add.quick-add-button-mobile-icon .button:hover::after,
.product-card-quick-add.quick-add-button-mobile-icon .button:focus::after,
.product-card-quick-add.quick-add-button-mobile-icon .button:active::after,
.product-card-quick-add.quick-add-button-desktop-icon .button:hover::after,
.product-card-quick-add.quick-add-button-desktop-icon .button:focus::after,
.product-card-quick-add.quick-add-button-desktop-icon .button:active::after {
  background: var(--cs-button-soft-hover-bg, rgba(175, 142, 111, 0.18)) !important;
  border-color: var(--cs-button-soft-hover-border, rgba(44, 26, 14, 0.24)) !important;
}

/* Commerce buttons remain the only solid primary action family. */
.product-form__submit.button,
.product-form__submit.button--primary,
.product-form__submit[type='submit'],
.product-form__buttons .button:not(.quick-add__submit),
.cart__checkout-button,
.shopify-challenge__button,
.customer button,
button.shopify-payment-button__button--unbranded,
.shopify-payment-button__button--unbranded,
.jdgm-write-rev-link,
.jdgm-btn,
.jdgm-submit-rev,
.jdgm-form__submit-btn {
  background-color: var(--cs-button-primary-bg, var(--cs-color-text-primary, #2C1A0E)) !important;
  color: var(--cs-button-primary-text, var(--cs-color-cotton-white, #F8F3EA)) !important;
  border: 1px solid var(--cs-button-primary-border, var(--cs-color-text-primary, #2C1A0E)) !important;
}

.product-form__submit.button:hover,
.product-form__submit.button--primary:hover,
.product-form__submit[type='submit']:hover,
.product-form__buttons .button:not(.quick-add__submit):hover,
.cart__checkout-button:hover,
.shopify-challenge__button:hover,
.customer button:hover,
button.shopify-payment-button__button--unbranded:hover,
.shopify-payment-button__button--unbranded:hover,
.jdgm-write-rev-link:hover,
.jdgm-btn:hover,
.jdgm-submit-rev:hover,
.jdgm-form__submit-btn:hover {
  background-color: var(--cs-button-primary-hover-bg, var(--cs-color-anchor-sand, #A48D78)) !important;
  color: var(--cs-button-primary-hover-text, var(--cs-color-cotton-white, #F8F3EA)) !important;
  border-color: var(--cs-button-primary-hover-border, var(--cs-color-anchor-sand, #A48D78)) !important;
}


/* =========================================================
   Cotton & Sand About mobile text width refinement
   ---------------------------------------------------------
   Mobile only. Keeps About page text blocks using the full
   available content width, matching Realm's mobile reading
   rhythm. Does not affect desktop layout or theme logic.
   ========================================================= */
@media screen and (max-width: 749px) {
  .cs-about-founder__content,
  .cs-about-founder__heading,
  .cs-about-founder__body,
  .cs-about-founder__body p,
  .cs-about-statement__inner,
  .cs-about-statement__heading-wrap,
  .cs-about-statement__heading,
  .cs-about-story__content,
  .cs-about-story__heading,
  .cs-about-story__description,
  .cs-about-story__description p,
  .cs-about-info__inner,
  .cs-about-info__heading,
  .cs-about-info__body,
  .cs-about-principles__inner,
  .cs-about-principles__header,
  .cs-about-principles__heading,
  .cs-about-principles__list,
  .cs-about-principles__content {
    width: 100% !important;
    max-width: none !important;
  }

  /* Realm-style mobile reading rhythm:
     keep the Founder Note content container centered,
     but align the heading and body copy to the left inside it. */
  .cs-about-founder__content,
  .cs-about-founder__heading,
  .cs-about-founder__body,
  .cs-about-founder__body p {
    text-align: left !important;
  }

  .cs-about-founder__content {
    width: 100% !important;
    max-width: 680px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .cs-about-story__content,
  .cs-about-story__heading,
  .cs-about-story__description,
  .cs-about-story__description p {
    text-align: center !important;
  }
}

/* =========================================================
   COTTON & SAND - desktop nav underline: grow-from-left (Realm-style)
   Purpose: replace the non-animatable native text-decoration
   underline with an animatable underline drawn on the nav text
   label. On hover the underline grows from the left to the exact
   text width; the current-page link holds its underline (unchanged
   page-based active logic). When another top-level item is hovered,
   the current-page underline withdraws, returning on mouse-leave.
   Desktop only (>=1025px). Thickness stays 1px. No JS / no logic
   change. Easing mirrors Realm: cubic-bezier(0, 0, 0.3, 1).
   ========================================================= */
@media only screen and (min-width: 1025px) {
  /* Turn OFF the native text-decoration underline (cannot animate). */
  .hdr-nav-desktop .hdr-nav-primary-level-ul > li > a.cs-header-nav-link,
  .hdr-nav-desktop .hdr-nav-primary-level-ul > li > a.cs-header-nav-link:hover,
  .hdr-nav-desktop .hdr-nav-primary-level-ul > li > a.cs-header-nav-link:focus-visible,
  .hdr-nav-desktop .hdr-nav-primary-level-ul > li > a.cs-header-nav-link--active,
  .hdr-nav-desktop .hdr-nav-primary-level-ul > li > a.cs-header-nav-link[aria-current="page"] {
    text-decoration-line: none !important;
  }

  /* Underline is drawn on the text label only (exact text width). */
  .hdr-nav-desktop .hdr-nav-primary-level-ul > li > a.cs-header-nav-link .cs-nav-label {
    position: relative !important;
    display: inline-block !important;
  }
  .hdr-nav-desktop .hdr-nav-primary-level-ul > li > a.cs-header-nav-link .cs-nav-label::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -5px !important;
    height: 1px !important;
    background: currentColor !important;
    border: 0 !important;
    transform: scaleX(0) !important;
    transform-origin: left center !important;
    transition: transform 300ms cubic-bezier(0, 0, 0.3, 1) !important;
    pointer-events: none !important;
  }

  /* Hover / keyboard-focus / current page: grow to full text width. */
  .hdr-nav-desktop .hdr-nav-primary-level-ul > li > a.cs-header-nav-link:hover .cs-nav-label::after,
  .hdr-nav-desktop .hdr-nav-primary-level-ul > li > a.cs-header-nav-link:focus-visible .cs-nav-label::after,
  .hdr-nav-desktop .hdr-nav-primary-level-ul > li > a.cs-header-nav-link--active .cs-nav-label::after,
  .hdr-nav-desktop .hdr-nav-primary-level-ul > li > a.cs-header-nav-link[aria-current="page"] .cs-nav-label::after {
    transform: scaleX(1) !important;
  }

  /* When another top-level link is hovered/focused, the current-page
     underline withdraws (slides back to the left), then returns on leave. */
  .hdr-nav-desktop .hdr-nav-primary-level-ul:has(> li > a.cs-header-nav-link:hover) > li > a.cs-header-nav-link--active:not(:hover) .cs-nav-label::after,
  .hdr-nav-desktop .hdr-nav-primary-level-ul:has(> li > a.cs-header-nav-link:hover) > li > a.cs-header-nav-link[aria-current="page"]:not(:hover) .cs-nav-label::after,
  .hdr-nav-desktop .hdr-nav-primary-level-ul:has(> li > a.cs-header-nav-link:focus-visible) > li > a.cs-header-nav-link--active:not(:focus-visible) .cs-nav-label::after,
  .hdr-nav-desktop .hdr-nav-primary-level-ul:has(> li > a.cs-header-nav-link:focus-visible) > li > a.cs-header-nav-link[aria-current="page"]:not(:focus-visible) .cs-nav-label::after {
    transform: scaleX(0) !important;
  }
}