/** Shopify CDN: Minification failed

Line 51:0 All "@import" rules must come first

**/
/* Menopause Landing Page - Production Ready with Mobile-First */

:root {
  /* Brand Colors */
  --brand-purple: #A8308E;
  --brand-purple-dark: #8B2575;
  
  /* EXACT PRODUCT COLORS from Project Files */
  --hormonal-balance: #99297B;
  --hormonal-balance-light: #CC6DB3;
  --hormonal-balance-pale: #F5E6F0;
  --hormonal-balance-dark: #7A1F62;
  
  --peripeace: #9B95C9;
  --peripeace-light: #BDB9DC;
  --peripeace-pale: #EFEEF7;
  --peripeace-dark: #7C76A7;
  
  --menopause: #5F4D9F;
  --menopause-light: #9A8BC6;
  --menopause-pale: #E8E5F2;
  --menopause-dark: #4C3E7F;
  
  /* Accent Colors */
  --accent-success: #7B68EE;
  --savings-yellow: #FFD93D;
  
  /* Neutrals */
  --white: #ffffff;
  --black: #000000;
  --gray-100: #F5F5F5;
  --gray-600: #666666;
  --gray-800: #333333;
}

/* Font Setup */
@font-face {
  font-family: 'DK Lemon Yellow Sun';
  src: url('{{ "DKLemonYellowSun-Regular.woff2" | asset_url }}') format('woff2'),
       url('{{ "DKLemonYellowSun-Regular.woff" | asset_url }}') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@import url('https://fonts.googleapis.com/css2?family=Covered+By+Your+Grace&family=Montserrat:wght@400;500;600;700;800&display=swap');

/* Base Typography */
.menopause-page h1,
.menopause-page h2,
.menopause-page h3 {
  font-family: 'DK Lemon Yellow Sun', 'Covered By Your Grace', 'Montserrat', sans-serif;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.menopause-page,
.menopause-page p,
.menopause-page li,
.menopause-page a,
.menopause-page button {
  font-family: 'Montserrat', sans-serif;
}

/* Container */
.menopause-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Text Wrapping for Mobile */
.menopause-page * {
  hyphens: auto;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Smooth Scrolling with Offset for Fixed Header */
html {
  scroll-behavior: smooth;
}

.menopause-product-card {
  scroll-margin-top: 120px;
}

/* Section Spacing */
.menopause-section {
  padding: 50px 16px;
}

/* Buttons */
.menopause-button {
  display: inline-block;
  padding: 16px 40px;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  white-space: nowrap;
}

.menopause-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* Responsive */
@media screen and (min-width: 600px) {
  .menopause-container {
    padding: 0 20px;
  }
  
  .menopause-section {
    padding: 80px 20px;
  }
  
  .menopause-button {
    font-size: 16px;
    padding: 18px 40px;
  }
}

/* Very Small Screens - 320px optimization */
@media screen and (max-width: 374px) {
  .menopause-button {
    font-size: 13px;
    letter-spacing: 0.02em;
    padding: 15px 32px;
  }
}