/** Shopify CDN: Minification failed

Line 1375: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(42, 37, 48, 0.16);
  /* Two-face system (v8-7-22), mirroring Realm's one-workhorse-plus-one-accent model.
     WORKHORSE  - UI, body, buttons, commerce headings, labels, page banner headings.
     ACCENT     - editorial headings only: statement blocks, About section headings,
                  article titles and their section headings. Never body, never nav.
     Change the typeface here and nowhere else. */
  --cs-font-work: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --cs-font-accent: 'Newsreader', Georgia, serif;

  --font-sans: var(--cs-font-work);
  --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: 6px;
  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(242, 238, 231, 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: #F2EEE7;
}

.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: #302b25;
}

.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(242, 238, 231, 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(242,238,231,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: #F2EEE7
}

.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(42, 37, 48, 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: #F2EEE7;
}

.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: #F2EEE7;
}

.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(42, 37, 48, 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 #F2EEE7;
  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(42, 37, 48, 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(42, 37, 48, 0.72);
  margin-bottom: 24px;
  font-weight: 300;
}

.footer-social {
  display: flex;
  gap: 16px;
}
.footer-social a {
  color: rgba(42, 37, 48, 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(42, 37, 48, 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(42, 37, 48, 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(42, 37, 48, 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,#D8D0C3);padding:80px 32px 60px;text-align:center;border-bottom:1px solid var(--border-color,rgba(42, 37, 48,0.16))}
.collection-banner-eyebrow{font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:var(--text-muted,#5A5360);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,#2A2530);margin-bottom:12px}
.collection-banner-desc{font-size:15px;color:var(--text-muted,#5A5360);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(42, 37, 48,0.16));gap:16px;flex-wrap:wrap}
.collection-count{font-size:12px;letter-spacing:.08em;color:var(--text-muted,#5A5360);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,#2A2530);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,#5A5360)}
.sort-select{font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--warm-dark,#2A2530);background:none;border:none;border-bottom:1px solid var(--border-color,rgba(42, 37, 48,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(42, 37, 48,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,#2A2530)}
.filter-group-icon{color:var(--text-muted,#5A5360);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,#5A5360);font-weight:300;transition:color .3s ease}
.filter-option:hover .filter-option-label{color:var(--warm-dark,#2A2530)}
.filter-option-count{font-size:11px;color:var(--text-muted,#5A5360);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,#5A5360);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,#2A2530);color:var(--warm-dark,#2A2530)}
.page-btn.active{background-color:var(--anchor-sand,#5F5266);color:var(--warm-dark,#2A2530)}

/* ============================================================
   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,#5A5360);font-weight:400}
.cs-breadcrumb a:hover{color:var(--terracotta,#5A5360)}
.cs-breadcrumb .sep{color:var(--border-color,rgba(42, 37, 48,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,#2A2530)}
.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,#5A5360);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,#2A2530);line-height:1.1;margin-bottom:16px}
.cs-product-price-main{font-size:20px;font-weight:500;color:var(--terracotta,#5A5360);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(42, 37, 48,0.16));font-size:12px;font-weight:500;letter-spacing:.08em;color:var(--warm-dark,#2A2530);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,#2A2530)}
.cs-size-btn.active{background-color:var(--anchor-sand,#5F5266);color:var(--warm-dark,#2A2530);border-color:var(--warm-dark,#2A2530)}
.cs-size-btn.sold-out{color:var(--border-color,rgba(42, 37, 48,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(42, 37, 48,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,#2A2530);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,#5A5360)}
.cs-qty-input{width:48px;text-align:center;border:none;border-left:1px solid var(--border-color,rgba(42, 37, 48,0.16));border-right:1px solid var(--border-color,rgba(42, 37, 48,0.16));font-size:14px;font-weight:500;color:var(--warm-dark,#2A2530);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,#5F5266);color:var(--warm-dark,#2A2530);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,#4A3F50)}
.cs-btn-buy-now{width:100%;height:52px;background:transparent;color:var(--warm-dark,#2A2530);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,#2A2530);cursor:pointer;margin-bottom:28px;transition:all .3s ease}
.cs-btn-buy-now:hover{background-color:var(--anchor-sand,#5F5266);color:var(--warm-dark,#2A2530)}
.cs-product-trust-mini{display:flex;flex-direction:column;gap:10px;padding:20px 0;border-top:1px solid var(--border-color,rgba(42, 37, 48,0.16));border-bottom:1px solid var(--border-color,rgba(42, 37, 48,0.16));margin-bottom:28px}
.cs-trust-mini-item{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--text-muted,#5A5360);font-weight:300}
.cs-product-tab{border-bottom:1px solid var(--border-color,rgba(42, 37, 48,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,#2A2530);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,#5A5360)}
.cs-product-tab-icon{font-size:18px;line-height:1;transition:transform .3s ease;color:var(--text-muted,#5A5360)}
.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,#5A5360);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(42, 37, 48,0.16))}

/* ============================================================
   CART PAGE
   ============================================================ */
.cs-cart-page-header{text-align:center;padding:64px 32px 40px;border-bottom:1px solid var(--border-color,rgba(42, 37, 48,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,#2A2530)}
.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(42, 37, 48,0.16))}
.cs-cart-col-label{font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted,#5A5360)}
.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(42, 37, 48,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,#D8D0C3)}
.cs-cart-item-name{font-size:14px;font-weight:500;color:var(--warm-dark,#2A2530);letter-spacing:.02em;margin-bottom:6px}
.cs-cart-item-variant{font-size:12px;color:var(--text-muted,#5A5360);font-weight:300;margin-bottom:12px}
.cs-cart-item-remove{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted,#5A5360);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,#5A5360)}
.cs-cart-summary-col{position:sticky;top:90px;background-color:var(--dust,#D8D0C3);padding:36px 32px}
.cs-cart-summary-title{font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--warm-dark,#2A2530);margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid rgba(42, 37, 48,.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,#5A5360);font-weight:300}
.cs-cart-summary-value{font-size:13px;color:var(--warm-dark,#2A2530);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,#2A2530)}
.cs-cart-summary-total-value{font-size:18px;font-weight:600;color:var(--warm-dark,#2A2530)}
.cs-btn-checkout{width:100%;height:52px;background-color:var(--anchor-sand,#5F5266);color:var(--warm-dark,#2A2530);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,#4A3F50)}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.cs-contact-hero{background-color:var(--dust,#D8D0C3);padding:80px 32px 64px;text-align:center;border-bottom:1px solid var(--border-color,rgba(42, 37, 48,0.16))}
.cs-contact-hero-eyebrow{font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:var(--text-muted,#5A5360);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,#2A2530);margin-bottom:16px}
.cs-contact-hero-sub{font-size:15px;color:var(--text-muted,#5A5360);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,#5A5360);margin-bottom:12px}
.cs-contact-info-title{font-size:18px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--warm-dark,#2A2530);margin-bottom:10px}
.cs-contact-info-body{font-size:14px;line-height:1.8;color:var(--text-muted,#5A5360);font-weight:300}
.cs-form-label{display:block;font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--warm-dark,#2A2530);margin-bottom:8px}
.cs-form-input,.cs-form-textarea,.cs-form-select{width:100%;padding:14px 16px;border:1px solid var(--border-color,rgba(42, 37, 48,0.16));background:transparent;font-size:13px;font-family:var(--font-sans,'Inter',sans-serif);color:var(--warm-dark,#2A2530);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,#2A2530)}
.cs-form-textarea{height:140px;resize:vertical}
.cs-form-submit{width:100%;height:52px;background-color:var(--anchor-sand,#5F5266);color:var(--warm-dark,#2A2530);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,#4A3F50)}

/* ============================================================
   SEARCH PAGE
   ============================================================ */
.cs-search-hero{padding:64px 32px 48px;text-align:center;border-bottom:1px solid var(--border-color,rgba(42, 37, 48,0.16))}
.cs-search-bar-wrap{max-width:600px;margin:0 auto;display:flex;border:1px solid var(--warm-dark,#2A2530)}
.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,#2A2530);letter-spacing:.04em}
.cs-search-input:focus{outline:none}
.cs-search-submit{width:52px;height:52px;background-color:var(--anchor-sand,#5F5266);color:var(--warm-dark,#2A2530);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,#4A3F50)}

/* ============================================================
   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,#D8D0C3)}
.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,#988775);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,#2A2530);margin-bottom:16px}
.cs-error-body{font-size:15px;line-height:1.7;color:var(--text-muted,#5A5360);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,#988775);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(42, 37, 48, 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(242, 238, 231, 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(42, 37, 48, 0.66) 0%,
      rgba(42, 37, 48, 0.34) 58%,
      rgba(42, 37, 48, 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: #F2EEE7;
  }

  .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(42, 37, 48, 0.72) 0%,
      rgba(42, 37, 48, 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: #F2EEE7;
  --cs-color-page-white: #F2EEE7;
  /* --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: #D8D0C3;
  --cs-color-sand-wash: #DAD4B8;
  --cs-color-anchor-sand: #988775;
  --cs-color-highlight-sand: #988775;
  --cs-color-text-primary: #2A2530;
  --cs-color-text-muted: #5A5360;
  --cs-color-text-eyebrow: #5A5360;
  --cs-color-border-soft: rgba(42, 37, 48, 0.16);
  --cs-color-border-medium: rgba(42, 37, 48, 0.32);

  /* Stratum palette  <- v8-9-6 . 16 Sep 2026
     Paper #E8E2D7 page, taupe #988775 and olive #B8AF85 as fields, plum
     #5F5266 as the ONE accent (CTAs, announcement bar, selected states).
     The names below are kept so no consumer has to change, but two ROLES
     changed with the values:
       --cs-color-sage      is now the LIGHT olive field. Ink text on it
                            (6.8:1); never light text. It is no longer an
                            accent - anything that used it as a solid
                            accent fill now reads --cs-color-plum.
       --cs-color-sage-dark is now plum: small accent text and hovers
                            (5.65:1 on paper). */
  --cs-color-sage: #B8AF85;
  --cs-color-sage-dark: #5F5266;
  --cs-color-sage-soft: #DAD4B8;
  --cs-color-plum: #5F5266;
  /* v8-9-13: ground for the material-story band only. The three paper tiles
     lighten what sits under them; this base composites to #5F5266. */
  --cs-color-plum-band: #5B4D63;
  --cs-color-plum-dark: #4A3F50;

  /* Functional states. --cs-color-error doubles as the sale colour: the
     old sale colour was #7E6A5A, the same warm brown as body copy, so a
     discount did not read as a discount. */
  --cs-color-success: #4F6B52;
  --cs-color-error: #8F3B32;
  --cs-color-warning: #7B5E2E;

  /* Typography and spacing tokens */
  /* v8-7-22: heading token now resolves to the ACCENT face, body to the WORKHORSE. */
  --cs-font-heading: var(--cs-font-accent, Georgia, serif);
  --cs-font-body: var(--cs-font-work, '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(42, 37, 48, 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(242, 238, 231, 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(242, 238, 231, 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(42, 37, 48, 0.36);
  --cs-button-editorial-hover-bg: rgba(42, 37, 48, 0.06);
  --cs-button-editorial-hover-text: var(--cs-section-light-heading);
  --cs-button-editorial-hover-border: rgba(42, 37, 48, 0.48);

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

  /* C. Soft utility / product-card quick-action button */
  --cs-button-soft-bg: rgba(242, 238, 231, 0.82);
  --cs-button-soft-text: var(--cs-color-text-primary);
  --cs-button-soft-border: rgba(42, 37, 48, 0.16);
  --cs-button-soft-hover-bg: rgba(152, 135, 117, 0.18);
  --cs-button-soft-hover-text: var(--cs-color-text-primary);
  --cs-button-soft-hover-border: rgba(42, 37, 48, 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-color-sage-dark);
  --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-sage-dark);
  --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: #E8E2D7;
  --cs-color-header-bg: #E8E2D7;
  /* --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: #F2EEE7;
  --cs-color-header-solid-text: #2A2530;
  --cs-color-header-border: rgba(42, 37, 48, 0.10);
  --cs-color-announcement-bg: #5F5266;
  --cs-color-announcement-text: #F2EEE7;
  --cs-color-footer-bg: #D8D0C3;
  --cs-color-footer-border: rgba(42, 37, 48, 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;
}

/* Homepage hero only: content tucks under the transparent header,
   offset by the announcement bar height alone. Interior pages must NOT
   use this — they have no hero, so they fall back to the theme's own
   full-header offset and the fixed header no longer covers the page title. */
body.lx-template--index: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, #E8E2D7) !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, #F2EEE7) !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, #F2EEE7) !important;
}

body.lx-template--index.cs-header-at-top #SiteHeader.cs-realm-header .menu-line {
  border-top-color: var(--cs-color-header-transparent-text, #F2EEE7) !important;
  background: var(--cs-color-header-transparent-text, #F2EEE7) !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, #E8E2D7) !important;
  background-color: var(--cs-color-header-bg, #E8E2D7) !important;
  color: var(--cs-color-header-solid-text, #2A2530) !important;
  border-bottom-color: var(--cs-color-header-border, rgba(42, 37, 48, 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, #2A2530) !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, #2A2530) !important;
  background: var(--cs-color-header-solid-text, #2A2530) !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, #E8E2D7) !important;
  background-color: var(--cs-color-header-bg, #E8E2D7) !important;
  color: var(--cs-color-header-solid-text, #2A2530) !important;
  border-bottom-color: var(--cs-color-header-border, rgba(42, 37, 48, 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, #E8E2D7) !important;
  background-color: var(--cs-color-page-base, #E8E2D7) !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, #E8E2D7) !important;
  background-color: var(--cs-color-page-base, #E8E2D7) !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, #E8E2D7) !important;
  background-color: var(--cs-color-page-base, #E8E2D7) !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, #E8E2D7) !important;
  background-color: var(--cs-color-page-base, #E8E2D7) !important;
}

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

.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, #5A5360);
  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, #2A2530);
  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, #5A5360);
}

.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, #E8E2D7) !important;
  background-color: var(--cs-color-page-base, #E8E2D7) !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, #2A2530) !important;
}

.cs-our-picks__top-link {
  flex: 0 0 auto;
  font-size: 13px;
  line-height: 1;
  color: var(--cs-color-text-muted, #5A5360);
  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, #2A2530);
  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, #F2EEE7) !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, #2A2530) !important;
}

.cs-picks-card__price {
  font-size: 13px !important;
  line-height: 1.3 !important;
  color: var(--cs-color-text-muted, #5A5360) !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: #E8E2D7;
  --cs-realm-text: #2A2530;
  --cs-realm-muted: rgba(42, 37, 48, 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: #302b25 !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: #302b25 !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: #F2EEE7 !important;
  z-index: 2 !important;
}

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

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

.hero-title {
  margin: 0 !important;
  color: #F2EEE7 !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: #F2EEE7 !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;
  /* Sand wash — v8-7-31 · 2 Aug 2026. TWO LAYERS, and both are required.

     Layer 2 (bottom of the list) is the tone: a real 135deg diagonal with the warmth
     anchored TOP-LEFT, lightening toward the bottom-right.
     Layer 1 (top of the list) is a purely VERTICAL fade to the page colour over the
     lower 60%. It is what makes the bottom edge resolve evenly at every horizontal
     position, which a diagonal cannot do on its own.

     Why the split, in one sentence: THIS BAND IS 2032 x 470, a 4.3:1 box, and on a box
     that flat any angled linear ramp compresses its end stops into a corner — v8-7-29
     used 160deg (only 20 degrees off vertical) and its 92%/100% stops still collapsed
     into a bottom-right wedge while the rest stayed flat. Separating "tone" from
     "resolve" removes that failure mode: the diagonal never has to reach the page
     colour, so it never needs an end stop near an edge.

     Do not merge these into a single gradient. Do not add an angle to layer 1.
     Peak #DBC9AB = 1.45:1 against the page base #F5F2EC; seam 1.00:1. To retune depth,
     rescale every stop toward #F5F2EC by one shared factor rather than re-picking
     individual stops, or the hue relationships drift.
     (v8-7-30 tried a radial bloom instead — rejected, read as too diffuse.) */
  background:
    linear-gradient(to bottom, rgba(232, 226, 215, 0) 40%, #E8E2D7 100%),
    linear-gradient(135deg, #C9C0B1 0%, #D0C8BA 22%, #DED8CC 55%, #E4DED3 100%) !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: 80px 48px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  gap: 32px !important;
}

.cs-about-info__eyebrow {
  max-width: 360px !important;
  margin: 0 !important;
  color: var(--cs-realm-muted, rgba(42, 37, 48,0.62)) !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
}

.cs-about-info__heading {
  max-width: min(640px, 48vw) !important;
  margin: 0 !important;
  color: var(--cs-realm-text) !important;
  font-family: var(--cs-font-heading, Georgia, serif) !important;
  font-size: clamp(34px, 3.6vw, 52px) !important;
  line-height: 1.12 !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: #D8D0C3 !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: #F2EEE7 !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(242, 238, 231, 0.82)) !important;
  color: var(--cs-button-soft-text, var(--cs-color-text-primary, #2A2530)) !important;
  border: 1px solid var(--cs-button-soft-border, rgba(42, 37, 48, 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: 64px !important;
    padding-bottom: 64px !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-wrapper,
  .cs-about-info-section {
    /* Mobile is a TALL box, so both layers are re-aimed: the diagonal is steepened to
       150deg (a 135deg diagonal on a narrow column crosses the width almost immediately),
       and the vertical fade starts later at 55% so it does not wash out most of the band.
       Same peak (#DBC9AB, 1.45:1), same resolve to #F5F2EC. */
    background:
      linear-gradient(to bottom, rgba(232, 226, 215, 0) 55%, #E8E2D7 100%),
      linear-gradient(150deg, #C9C0B1 0%, #D0C8BA 20%, #DED8CC 52%, #E4DED3 100%) !important;
  }

  .cs-about-info__inner {
    padding: 96px 20px 88px !important;
    gap: 20px !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

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

  .cs-about-info__heading {
    font-size: 30px !important;
    line-height: 1.16 !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: #302b25` 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: #302b25;
  --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 !important; /* was 0 0 50px 0 - gap to next section removed 25 Jul 2026 */
  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: 0 !important; /* was 40px - gap to next section removed */
  }

  .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: 0 !important; /* was 36px - gap to next section removed */
  }

  .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(42, 37, 48, 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, #2A2530) !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(42, 37, 48, 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, #2A2530) !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;
}

/* Desktop nav dropdown: pin it to the header's real bottom edge in BOTH states.

   Measured on the live site, 20 Aug 2026, Chrome, 2048px viewport:

     state                      announcement   header bottom   panel top   gap
     at top                         30px            110           115       5px
     scrolled (bar collapsed)        0px             80           115      35px

   component-header.css:3024 pins the panel with
     top: calc(35px + var(--site-header-height-desktop))
   and that 35px is wrong twice over. The announcement bar is really 30px
   (--cs-announcement-height, measured 30px), so the panel sat 5px low even at rest.
   On scroll component-header.js:296 sets body.cs-announcement-hidden, cs-brand.css
   collapses the bar to 0 and lifts the header group to top:0 - the 35px stays
   behind, so the gap grew to 35px. Both showed as a strip of page content between
   the header and the open panel.

   Fixed by deriving the offset from the same tokens the header itself uses, so the
   two can no longer drift apart. Verified live by injecting these rules and toggling
   them at a fixed scroll position: 5 -> 0 at top, 35 -> 0 scrolled.

   Specificity 0,3,1 against the vendor rule's 0,2,1, so these win with no importance
   flag even though component-header.css loads later (Notes section 2). Scoped to
   >=1025px, the only breakpoint where this panel is positioned; the mobile drawer
   (.header-nav-drawer) is anchored to --drawer-margin and is unaffected. */
@media only screen and (min-width: 1025px) {
  body:not(.cs-announcement-hidden):has(.full-width-announcement-bar) .header-nav-desktop-dd-panel {
    top: calc(var(--cs-announcement-height) + var(--site-header-height-desktop));
  }

  body.cs-announcement-hidden:has(.full-width-announcement-bar) .header-nav-desktop-dd-panel {
    top: var(--site-header-height-desktop);
  }

  body:not(.cs-announcement-hidden):has(.full-width-announcement-bar) .header-nav-desktop-dd-panel.dd-panel-drawer {
    top: calc(var(--cs-announcement-height) + var(--site-header-height-desktop));
    height: calc(100vh - var(--cs-announcement-height) - var(--site-header-height-desktop));
  }

  body.cs-announcement-hidden:has(.full-width-announcement-bar) .header-nav-desktop-dd-panel.dd-panel-drawer {
    top: var(--site-header-height-desktop);
    height: calc(100vh - var(--site-header-height-desktop));
  }
}

@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: #2A2530;
  --cs-accordion-divider: rgba(42, 37, 48, 0.16);

  /* FAQ / content disclosure chevron */
  --cs-disclosure-icon-size: 16px;
  --cs-disclosure-icon-stroke: 1.5px;
  --cs-disclosure-icon-color: #2A2530;
  --cs-disclosure-icon-color-muted: rgba(42, 37, 48, 0.72);
  --cs-disclosure-icon-transition: transform 180ms ease, opacity 180ms ease;
  --cs-faq-accordion-border: rgba(42, 37, 48, 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(242, 238, 231, 0.82)) !important;
  background: var(--cs-button-soft-bg, rgba(242, 238, 231, 0.82)) !important;
  color: var(--cs-button-soft-text, var(--cs-color-text-primary, #2A2530)) !important;
  border: 1px solid var(--cs-button-soft-border, rgba(42, 37, 48, 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(152, 135, 117, 0.18)) !important;
  background: var(--cs-button-soft-hover-bg, rgba(152, 135, 117, 0.18)) !important;
  color: var(--cs-button-soft-hover-text, var(--cs-color-text-primary, #2A2530)) !important;
  border-color: var(--cs-button-soft-hover-border, rgba(42, 37, 48, 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(242, 238, 231, 0.82)) !important;
  border: 1px solid var(--cs-button-soft-border, rgba(42, 37, 48, 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(152, 135, 117, 0.18)) !important;
  border-color: var(--cs-button-soft-hover-border, rgba(42, 37, 48, 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, #2A2530)) !important;
  color: var(--cs-button-primary-text, var(--cs-color-cotton-white, #F2EEE7)) !important;
  border: 1px solid var(--cs-button-primary-border, var(--cs-color-text-primary, #2A2530)) !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-plum-dark, #4A3F50)) !important;
  color: var(--cs-button-primary-hover-text, var(--cs-color-cotton-white, #F2EEE7)) !important;
  border-color: var(--cs-button-primary-hover-border, var(--cs-color-plum-dark, #4A3F50)) !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__eyebrow,
  .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__eyebrow,
  .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;
  }

  /* Story: block stays centred on the page, text reads left-aligned.
     Changed from center in v8-7-20 (About text hierarchy). */
  .cs-about-story__content,
  .cs-about-story__eyebrow,
  .cs-about-story__heading,
  .cs-about-story__description,
  .cs-about-story__description p {
    text-align: left !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;
  }
}


/* =========================================================
   COTTON & SAND — Realm rhythm: Material Story band
   ---------------------------------------------------------
   v8-7-21 · 1 Aug 2026

   Realm does not put its 160px section rhythm on full-bleed
   image bands. Bands get a small top pad, a constant row
   height, and the vertical air moved INSIDE the text column
   (Realm's About `image_with_text`: 36 / 0, media 640,
   text column 96 / 112 / 112).

   `min-height`, not `height`, is deliberate: the row is a
   constant while the copy fits, and grows rather than clips
   if it ever does not. The media is a grid item and stretches
   to the row, so the two columns cannot fall out of alignment
   — the failure mode that a fixed media height would create.

   Row/heading pairs measured 1 Aug 2026 against the live copy
   (off-screen clone at each column width):
     >=1280  side 112, heading 36  -> panel needs 858-884
     990-1279 side 64, heading 32  -> panel needs 900-927
   Re-measure both together if the typeface or the copy changes.
   ========================================================= */
@media screen and (min-width: 990px) {
  .material-story {
    padding-top: 36px !important;
    padding-bottom: 0 !important;
  }

  .material-text {
    min-height: 940px;
    padding: 96px 64px 112px !important;
  }

  .material-title {
    font-size: 32px !important;
  }

  .material-image {
    height: 100% !important;
  }
}

@media screen and (min-width: 1280px) {
  .material-text {
    min-height: 900px;
    padding: 96px 112px 112px !important;
  }

  .material-title {
    font-size: 36px !important;
  }
}


/* =========================================================
   COTTON & SAND — Realm two-face type system
   ---------------------------------------------------------
   v8-7-22 · 1 Aug 2026

   WORKHORSE (Montserrat) carries UI, body, buttons, commerce
   headings, labels and page-banner headings.
   ACCENT (Newsreader) is used ONLY for editorial headings.
   Both faces come from --cs-font-work / --cs-font-accent at
   the top of this file; change them there, not here.

   Realm sets every heading at weight 400, sentence case and
   zero tracking. The uppercase + 600 + positive tracking that
   Material Story carried is removed here, which is also what
   lets the band come back down from min-height 900 to 700:
   measured 1 Aug 2026, the panel needs 664px at 46/52 and
   632px at 40/44 in Montserrat 400 sentence case, against
   1178px in the old treatment.
   ========================================================= */

/* ---- homepage statement (editorial → accent) ---- */
.cs-about-info__heading {
  font-family: var(--cs-font-accent, Georgia, serif) !important;
  font-weight: 400 !important;
  font-size: 46px !important;
  line-height: 52px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.cs-about-info__eyebrow {
  font-family: var(--cs-font-work, sans-serif) !important;
}

@media screen and (max-width: 1279px) {
  .cs-about-info__heading {
    font-size: 36px !important;
    line-height: 40px !important;
  }
}

@media screen and (max-width: 749px) {
  .cs-about-info__heading {
    font-size: 30px !important;
    line-height: 35px !important;
  }
}

/* ---- commerce heading stays on the workhorse ---- */
.cs-our-picks__title,
.cs-our-picks__heading {
  font-family: var(--cs-font-work, sans-serif) !important;
  font-weight: 400 !important;
  font-size: 32px !important;
  line-height: 38px !important;
  letter-spacing: 0 !important;
}

@media screen and (max-width: 989px) {
  .cs-our-picks__title,
  .cs-our-picks__heading {
    font-size: 28px !important;
    line-height: 32px !important;
  }
}

/* ---- Material Story band ---- */
.material-title {
  font-family: var(--cs-font-accent, Georgia, serif) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.material-body {
  font-family: var(--cs-font-work, sans-serif) !important;
  font-size: 18px !important;
  line-height: 24px !important;
  max-width: 520px !important;
}

@media screen and (min-width: 990px) {
  .material-text {
    min-height: 700px;
  }

  .material-title {
    font-size: 36px !important;
    line-height: 40px !important;
  }
}

@media screen and (min-width: 1280px) {
  .material-text {
    min-height: 700px;
  }

  .material-title {
    font-size: 46px !important;
    line-height: 52px !important;
  }
}

@media screen and (max-width: 989px) {
  .material-body {
    font-size: 16px !important;
    line-height: 20px !important;
  }
}

/* =========================================================
   Hero type scale — anchored at 1440px, scales proportionally  ← v8-7-50 · 12 Aug 2026

   Owner-selected 12 Aug 2026 from mockups/mock-v8-7-50-hero-type-scale.html:
     1440px : title 55px · eyebrow 11px · subtitle 18.5px, sentence case
     mobile : title 30px · eyebrow  9px · subtitle 13.5px

   The ratios are taken from the 1440 anchor (55/1440 = 3.819vw, 11/1440 = 0.764vw,
   18.5/1440 = 1.285vw) and the mobile values are used as the clamp() FLOORS. One
   continuous curve from 375px to 1920px+, no breakpoint jump, and no mobile media
   query is needed — the floor takes over below ~768px on its own.

   Above 1440 all three lock. Deliberate: the wider the viewport the more of the
   composition is image, and letting the title keep growing (3.819vw = 147px at 3840)
   would break its ratio to the eyebrow and subtitle, which cap at 1440 regardless.

   POSITION IS LOAD-BEARING. Three earlier rules set .hero-title font-size with
   !important — @media (max-width:767px) ~L2997, (max-width:749px) ~L4202 and
   (max-width:374px) ~L3089. Media queries carry no specificity, so this block only
   wins by being LAST IN THE FILE. Do not move it, and do not append hero font-size
   rules after it.

   Scope: .hero-* only. No other section is touched.
   ========================================================= */

.hero-title {
  font-size: clamp(30px, 3.819vw, 55px) !important;
  text-transform: none !important;
}

.hero-eyebrow {
  font-size: clamp(9px, 0.764vw, 11px) !important;
}

.hero-subtitle {
  font-size: clamp(13.5px, 1.285vw, 18.5px) !important;
}

/* =========================================================
   Desktop nav dropdown panel owns its own foreground  ← v8-7-62 · 17 Aug 2026
   (dd-panel foreground)

   `.header-nav-desktop-dd-panel` renders inside `.hdr-nav-desktop`, so the
   homepage transparent-header state painted its links #FDFCF9 while the panel's
   own background stays #F5F2EC (settings.dd_bg_col) — near-white text on cream,
   measured at about 1.03:1. Same failure shape as the country selector panel in
   Notes 29: a panel that does not declare its own colour inherits the header's
   state colour, which is only valid over the hero image.

   The first three selectors below repeat the at-top chain exactly so they match
   its specificity (142) and win on source order; the short ones cover the solid
   and interior-page states.

   Scope: the desktop dropdown panel only. The mobile drawer already gets the
   solid colour from the max-width:989px block.
   ========================================================= */

body.lx-template--index.cs-header-at-top #SiteHeader.cs-realm-header .header-nav-desktop-dd-panel a,
body.lx-template--index.cs-header-at-top #SiteHeader.cs-realm-header .header-nav-desktop-dd-panel a:visited,
body.lx-template--index.cs-header-at-top #SiteHeader.cs-realm-header .header-nav-desktop-dd-panel a:hover,
#SiteHeader .header-nav-desktop-dd-panel,
#SiteHeader .header-nav-desktop-dd-panel a,
#SiteHeader .header-nav-desktop-dd-panel a:visited,
#SiteHeader .header-nav-desktop-dd-panel a:hover {
  color: var(--color-menu-dropdown-text, var(--cs-color-header-solid-text, #2A2530)) !important;
}


/* =========================================================
   Stratum section grounds  <- v8-9-6 . 16 Sep 2026

   The homepage carries two cs-material-story instances (Notes 33). They are
   told apart by their template KEY, which is the stable suffix of the section
   wrapper id (shopify-section-template--<theme-number>__<key>); the number
   changes per theme upload, the key does not. Renaming either key in
   templates/index.json silently returns that band to the page ground.

     cs_womens_underwear -> olive field, ink text   (ink 6.8:1)
     cs_material_story   -> plum field, paper text  (paper 6.3:1)

   Every material-* colour rule above carries !important, so these must too;
   they win on specificity (attribute + class chain), not on source order.
   Image columns are not touched - images are a separate, later release.
   ========================================================= */

[id$="__cs_womens_underwear"] .material-story,
[id$="__cs_womens_underwear"] .material-story .material-text {
  background: var(--cs-color-sage) !important;
  background-color: var(--cs-color-sage) !important;
}
[id$="__cs_womens_underwear"] .material-story .material-text .section-eyebrow,
[id$="__cs_womens_underwear"] .material-story .material-text p,
[id$="__cs_womens_underwear"] .material-story .material-text .material-body {
  color: var(--cs-color-text-primary) !important;
}

[id$="__cs_material_story"] .material-story,
[id$="__cs_material_story"] .material-story .material-text {
  background: var(--cs-color-plum) !important;
  background-color: var(--cs-color-plum) !important;
}
[id$="__cs_material_story"] .material-story .material-text h2,
[id$="__cs_material_story"] .material-story .material-text .material-title {
  color: var(--cs-color-cotton-white) !important;
}
[id$="__cs_material_story"] .material-story .material-text p,
[id$="__cs_material_story"] .material-story .material-text .material-body,
[id$="__cs_material_story"] .material-story .material-text .section-eyebrow {
  color: rgba(242, 238, 231, 0.86) !important;
}
[id$="__cs_material_story"] .material-story .material-text a.btn.btn-primary {
  background-color: transparent !important;
  color: var(--cs-color-cotton-white) !important;
  border-color: rgba(242, 238, 231, 0.72) !important;
}
[id$="__cs_material_story"] .material-story .material-text a.btn.btn-primary:hover,
[id$="__cs_material_story"] .material-story .material-text a.btn.btn-primary:focus-visible {
  background-color: var(--cs-color-cotton-white) !important;
  color: var(--cs-color-plum) !important;
  border-color: var(--cs-color-cotton-white) !important;
}
[id$="__cs_material_story"] .material-story .material-text a.btn.btn-primary * {
  color: inherit !important;
}


/* =========================================================
   Stratum paper surfaces  <- v8-9-7 . 16 Sep 2026

   Three seamless transparent WebP tiles are laid over each surface's OWN
   background colour, so every token and every Theme Editor bg_color setting
   keeps working - the texture never supplies colour, only grain:
     cs-paper-fibre.webp   509px  sparse long fibres + a few flecks
     cs-paper-tooth.webp   640px  surface tooth, short fibres, flecks
   v8-9-10: flecks are now limited to the announcement bar, the header (clear
   of the wordmark) and the footer. Every other surface uses the -clean
   tiles, generated from the same seeds with the fleck layer omitted, so the
   fibres, tooth and mottle are unchanged; cs-paper-flecks.webp is that
   fleck layer on its own (header only).
     cs-paper-mottle.webp  300px source shown at 1200px, soft mottling
   509 / 640 / 1200 share no common tile, so no repeat is visible, and each
   surface group gets its own background-position so adjacent sheets differ.

   Why background-IMAGE longhand with importance: most of these surfaces are
   painted by `background:` SHORTHAND rules carrying !important (material-*,
   header, about-info, footer), and a shorthand resets background-image to
   none. Where the competing rule is more specific (header states, the
   v8-9-6 band rules, the footer's own <style> in <body>) the selector below
   repeats or out-scores it; do not shorten these selectors.

   Deliberately NOT textured: drawers, popups, dropdown panels, the country
   selector, product cards and their image wraps, inputs, buttons, variant
   pills, badges - interactive or content surfaces where grain reads as dirt.
   The homepage header in its transparent at-top state is also excluded: a
   texture there would sit on top of the hero photograph.
   ========================================================= */

html body,
html body #MainContent,
html body .material-story,
html body .material-text,
html body .cs-our-picks-section,
html body .cs-our-picks,
html body .multicolumn-section,
html body .related-products,
html body .section-rich-text,
html body .faq-hero,
html body .faq-contact-cta {
  background-image: url("cs-paper-fibre-clean.webp"), url("cs-paper-tooth-clean.webp"), url("cs-paper-mottle.webp") !important;
  background-size: 509px 509px, 640px 640px, 1200px 1200px !important;
  background-repeat: repeat !important;
  background-position: 0px 0px, 0px 0px, 0px 0px !important;
}

html body .cs-our-picks-section,
html body .cs-our-picks,
html body .related-products {
  background-position: 211px 97px, 388px 143px, 560px 420px !important;
}

html body .cs-about-statement,
html body .cs-about-founder,
html body .cs-about-story,
html body .cs-about-principles,
html body .cs-about-certifications,
html body .cs-shipping,
html body .cs-design-notes,
html body .cs-dn-hero,
html body .cs-dn-note--b,
html body .cs-dn-faq,
html body .cs-dn-disc,
html body .cs-dn-cta-wrap {
  background-image: url("cs-paper-fibre-clean.webp"), url("cs-paper-tooth-clean.webp"), url("cs-paper-mottle.webp") !important;
  background-size: 509px 509px, 640px 640px, 1200px 1200px !important;
  background-repeat: repeat !important;
  background-position: 131px 302px, 57px 471px, 880px 160px !important;
}
html body .cs-about-founder,
html body .cs-about-principles,
html body .cs-dn-note--b,
html body .cs-dn-disc {
  background-position: 402px 18px, 290px 66px, 240px 905px !important;
}

/* Header: solid states only (interior pages, and the homepage after scroll). */
body.cs-header-is-scrolled #SiteHeader.cs-realm-header .header-bar-inner,
body:not(.lx-template--index) #SiteHeader.cs-realm-header .header-bar-inner {
  /* v8-9-10: flecks are a separate tile here, and a band of the header's own
     colour sits between them and the clean paper layers across the middle
     30-70% of the bar, so no fleck can land beside the centred wordmark.
     Layers top to bottom: clean fibres, clean tooth, logo clear-zone,
     flecks, mottle. The clear-zone also hides the mottle there; tooth and
     fibres stay continuous across the whole bar. */
  background-image:
    url("cs-paper-fibre-clean.webp"), url("cs-paper-tooth-clean.webp"),
    linear-gradient(90deg, rgba(232, 226, 215, 0) 30%, var(--cs-color-header-bg, #E8E2D7) 37%, var(--cs-color-header-bg, #E8E2D7) 63%, rgba(232, 226, 215, 0) 70%),
    url("cs-paper-flecks.webp"), url("cs-paper-mottle.webp") !important;
  background-size: 509px 509px, 640px 640px, 100% 100%, 640px 640px, 1200px 1200px !important;
  background-repeat: repeat, repeat, no-repeat, repeat, repeat !important;
  background-position: 77px 211px, 515px 33px, 0 0, 515px 33px, 64px 700px !important;
}
html body .header-announcement-bar {
  background-image: url("cs-paper-fibre.webp"), url("cs-paper-tooth.webp") !important;
  background-size: 509px 509px, 640px 640px !important;
  background-position: 300px 12px, 90px 400px !important;
}

/* Homepage statement band: tiles ABOVE the two-layer gradient of Notes 4h-bis,
   whose stops and angles are restated unchanged. */
html body .cs-about-info-wrapper,
html body .cs-about-info-section {
  background-image:
    url("cs-paper-fibre-clean.webp"), url("cs-paper-tooth-clean.webp"), url("cs-paper-mottle.webp"),
    linear-gradient(to bottom, rgba(232, 226, 215, 0) 40%, #E8E2D7 100%),
    linear-gradient(135deg, #C9C0B1 0%, #D0C8BA 22%, #DED8CC 55%, #E4DED3 100%) !important;
  background-size: 509px 509px, 640px 640px, 1200px 1200px, 100% 100%, 100% 100% !important;
  background-repeat: repeat, repeat, repeat, no-repeat, no-repeat !important;
  background-position: 40px 330px, 610px 95px, 300px 300px, 0 0, 0 0 !important;
}
@media screen and (max-width: 749px) {
  html body .cs-about-info-wrapper,
  html body .cs-about-info-section {
    background-image:
      url("cs-paper-fibre-clean.webp"), url("cs-paper-tooth-clean.webp"), url("cs-paper-mottle.webp"),
      linear-gradient(to bottom, rgba(232, 226, 215, 0) 55%, #E8E2D7 100%),
      linear-gradient(150deg, #C9C0B1 0%, #D0C8BA 20%, #DED8CC 52%, #E4DED3 100%) !important;
  }
}

/* Footer: tiles above the radial bloom that footer.liquid paints in its own
   <style> (which loads after this file - hence the html body prefix). */
html body .cs-footer {
  background-image:
    url("cs-paper-fibre.webp"), url("cs-paper-tooth.webp"), url("cs-paper-mottle.webp"),
    radial-gradient(90% 120% at 50% 0%, #C9C0B1 0%, rgba(201, 192, 178, 0) 60%) !important;
  background-size: 509px 509px, 640px 640px, 1200px 1200px, 100% 100% !important;
  background-repeat: repeat, repeat, repeat, no-repeat !important;
  background-position: 260px 140px, 150px 520px, 720px 40px, 0 0 !important;
}

/* The two homepage colour bands (v8-9-6) are separate sheets: own offsets,
   and a hand-cut bottom edge with a 1-2px contact shadow falling on the paper
   below. clip-path only removes up to 10px of the band's own bottom edge -
   no margin changes, so the Notes 4h/4i rhythm and row heights are untouched.
   The shadow is a filter on the section WRAPPER, because a drop-shadow on the
   clipped element itself would be clipped away with it. */
html body [id$="__cs_womens_underwear"] .material-story,
html body [id$="__cs_womens_underwear"] .material-story .material-text {
  background-image: url("cs-paper-fibre-clean.webp"), url("cs-paper-tooth-clean.webp"), url("cs-paper-mottle.webp") !important;
  background-size: 509px 509px, 640px 640px, 1200px 1200px !important;
  background-repeat: repeat !important;
  background-position: 350px 60px, 120px 240px, 900px 500px !important;
}
html body [id$="__cs_material_story"] .material-story,
html body [id$="__cs_material_story"] .material-story .material-text {
  background-image: url("cs-paper-fibre-clean.webp"), url("cs-paper-tooth-clean.webp"), url("cs-paper-mottle.webp") !important;
  background-size: 509px 509px, 640px 640px, 1200px 1200px !important;
  background-repeat: repeat !important;
  background-position: 170px 420px, 470px 300px, 100px 1000px !important;
}
html body [id$="__cs_womens_underwear"],
html body [id$="__cs_material_story"] {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0.6px 1.6px 1px rgba(38, 28, 20, 0.24)) drop-shadow(2px 6px 8px rgba(38, 28, 20, 0.07));
}
html body [id$="__cs_womens_underwear"] .material-story {
  clip-path: polygon(0 0, 100% 0, 100.00% calc(100% - 7.8px), 97.87% calc(100% - 8.4px), 95.74% calc(100% - 8.3px), 93.62% calc(100% - 8.0px), 91.49% calc(100% - 7.5px), 89.36% calc(100% - 7.2px), 87.23% calc(100% - 7.0px), 85.11% calc(100% - 6.4px), 82.98% calc(100% - 6.9px), 80.85% calc(100% - 6.3px), 78.72% calc(100% - 6.8px), 76.60% calc(100% - 6.6px), 74.47% calc(100% - 6.3px), 72.34% calc(100% - 5.6px), 70.21% calc(100% - 5.8px), 68.09% calc(100% - 6.2px), 65.96% calc(100% - 6.3px), 63.83% calc(100% - 6.3px), 61.70% calc(100% - 6.3px), 59.57% calc(100% - 6.4px), 57.45% calc(100% - 6.2px), 55.32% calc(100% - 6.5px), 53.19% calc(100% - 7.1px), 51.06% calc(100% - 7.5px), 48.94% calc(100% - 6.5px), 46.81% calc(100% - 6.1px), 44.68% calc(100% - 5.7px), 42.55% calc(100% - 5.8px), 40.43% calc(100% - 4.9px), 38.30% calc(100% - 4.4px), 36.17% calc(100% - 4.4px), 34.04% calc(100% - 3.5px), 31.91% calc(100% - 4.2px), 29.79% calc(100% - 4.6px), 27.66% calc(100% - 4.2px), 25.53% calc(100% - 4.1px), 23.40% calc(100% - 4.0px), 21.28% calc(100% - 3.8px), 19.15% calc(100% - 3.2px), 17.02% calc(100% - 4.0px), 14.89% calc(100% - 4.1px), 12.77% calc(100% - 3.4px), 10.64% calc(100% - 2.8px), 8.51% calc(100% - 3.4px), 6.38% calc(100% - 2.8px), 4.26% calc(100% - 2.1px), 2.13% calc(100% - 1.5px), 0.00% calc(100% - 2.1px));
}
html body [id$="__cs_material_story"] .material-story {
  clip-path: polygon(0 0, 100% 0, 100.00% calc(100% - 5.9px), 97.87% calc(100% - 6.2px), 95.74% calc(100% - 6.1px), 93.62% calc(100% - 5.6px), 91.49% calc(100% - 7.0px), 89.36% calc(100% - 6.2px), 87.23% calc(100% - 5.8px), 85.11% calc(100% - 6.5px), 82.98% calc(100% - 5.8px), 80.85% calc(100% - 6.5px), 78.72% calc(100% - 7.4px), 76.60% calc(100% - 8.4px), 74.47% calc(100% - 8.6px), 72.34% calc(100% - 8.4px), 70.21% calc(100% - 8.8px), 68.09% calc(100% - 8.6px), 65.96% calc(100% - 9.3px), 63.83% calc(100% - 9.7px), 61.70% calc(100% - 8.8px), 59.57% calc(100% - 9.4px), 57.45% calc(100% - 9.7px), 55.32% calc(100% - 8.6px), 53.19% calc(100% - 6.1px), 51.06% calc(100% - 6.6px), 48.94% calc(100% - 6.3px), 46.81% calc(100% - 5.8px), 44.68% calc(100% - 5.3px), 42.55% calc(100% - 3.5px), 40.43% calc(100% - 3.5px), 38.30% calc(100% - 3.2px), 36.17% calc(100% - 2.9px), 34.04% calc(100% - 4.4px), 31.91% calc(100% - 3.9px), 29.79% calc(100% - 4.5px), 27.66% calc(100% - 3.2px), 25.53% calc(100% - 2.6px), 23.40% calc(100% - 3.7px), 21.28% calc(100% - 3.6px), 19.15% calc(100% - 3.4px), 17.02% calc(100% - 3.2px), 14.89% calc(100% - 3.2px), 12.77% calc(100% - 3.2px), 10.64% calc(100% - 3.4px), 8.51% calc(100% - 2.3px), 6.38% calc(100% - 2.8px), 4.26% calc(100% - 2.8px), 2.13% calc(100% - 3.2px), 0.00% calc(100% - 3.1px));
}

@media (prefers-reduced-transparency: reduce) {
  html body [id$="__cs_womens_underwear"],
  html body [id$="__cs_material_story"] { filter: none; }
}


/* =========================================================
   One sheet of paper  <- v8-9-11 . 17 Sep 2026

   Every surface that is the PAGE colour is now transparent with no texture of
   its own, so the single texture on <body> shows through continuously.
   Before this, each of these surfaces restarted the tiles at its own top-left
   corner, and the 1200px mottling changed tone abruptly at the edge - a
   visible horizontal seam (measured on the live PDP: the empty related-products
   section, 2852-2972px, drew two lines).

   #MainContent is included: it had its own texture too, and its origin sits
   below the header, so it did not line up with <body> either.

   What is still a separate sheet, on purpose: the announcement bar, header,
   footer, the homepage olive/plum bands and statement band, the PDP olive
   bullets sheet and TRYON box, the FAQ contact panel - all a different colour,
   so their edges are meant to read as edges.

   COST, accepted by the owner: the Theme Editor background-colour settings of
   the sections below (cs-about-statement/-founder/-story/-principles/
   -certifications bg_color, cs-shipping, cs-design-notes bg_color /
   hero_bg_color / alt_bg_color / disclaimer_bg_color, and any section using
   the bg-body colour scheme) no longer change anything on the page. To give
   one of them a different ground, remove it from this list and give it its
   own colour and tiles.

   Importance is required: v8-9-7 textured most of these with !important, and
   the About / Shipping / Design Notes grounds come from their own <style>
   blocks in <body>, which load after this file.
   ========================================================= */
html body #MainContent,
html body .cs-our-picks-section,
html body .cs-our-picks,
html body .multicolumn-section,
html body .section-container.color-scheme-bg-body,
html body .related-products,
html body .section-rich-text,
html body .faq-hero,
html body .cs-about-statement,
html body .cs-about-founder,
html body .cs-about-story,
html body .cs-about-principles,
html body [id$="__cs_about_principles"],
html body .cs-about-certifications,
html body .cs-dn-about,
html body .cs-shipping,
html body #MainContent > .shopify-section:has(> .cs-shipping),
html body .cs-design-notes,
html body .cs-dn-hero,
html body .cs-dn-note,
html body .cs-dn-note--b,
html body .cs-dn-facts,
html body .cs-dn-faq,
html body .cs-dn-disc,
html body .cs-dn-cta-wrap {
  background-color: transparent !important;
  background-image: none !important;
}

/* The sheet itself  <- v8-9-12 . 17 Sep 2026
   v8-9-11 moved the page texture onto <body> alone, but <body> never had it:
   `body.cs-realm-header-enabled { background: … !important }` (0,1,1, earlier in
   this file) is a SHORTHAND with importance and out-scores the v8-9-7
   `html body` rule (0,0,2), so background-image was reset to none. Until
   v8-9-11 that was invisible because #MainContent carried its own texture.
   Measured on the live PDP 17 Sep 2026: body and every ancestor above the buy
   column computed `background-image: none`. This selector scores 0,1,2 and
   comes later, so it wins. Layers and offsets are the v8-9-10 clean set. */
html body.cs-realm-header-enabled,
html body {
  background-color: var(--cs-color-page-base, #E8E2D7) !important;
  background-image: url("cs-paper-fibre-clean.webp"), url("cs-paper-tooth-clean.webp"), url("cs-paper-mottle.webp") !important;
  background-size: 509px 509px, 640px 640px, 1200px 1200px !important;
  background-repeat: repeat !important;
  background-position: 0 0, 0 0, 0 0 !important;
}


/* =========================================================
   Material Story band ground  <- v8-9-13 . 18 Sep 2026

   Approved mock: the homepage "Less on you, more you" band reads #5F5266
   AS RENDERED. Since v8-9-7 the band carries three paper tiles above its
   colour and their combined alpha lightens it: measured in Chromium on the
   packaged tiles at this band's own offsets, a #5F5266 ground composites to
   rgb(99,85,104). A #5B4D63 ground composites to rgb(95,81,101) = #5F5266,
   the mock. Texture layers, offsets, clip-path and shadow are untouched.

   Only this band's ground moves; --cs-color-plum still drives the buttons,
   the button hover text and every other plum surface.

   Specificity 0,3,2 plus later source order beats the v8-9-6 ground (0,3,0);
   it sets background-color only, so the v8-9-7 background-image layers stand.
   ========================================================= */

html body [id$="__cs_material_story"] .material-story,
html body [id$="__cs_material_story"] .material-story .material-text {
  background-color: var(--cs-color-plum-band, #5B4D63) !important;
}