/**
 * HER HEALTH THEME - FOUNDATION STYLES
 * Phase 1: CSS Variables and Base Setup
 * This file loads alongside existing theme CSS for compatibility
 */

/* ==========================================
   CSS VARIABLES - Design System
   ========================================== */

:root {
  /* Primary Colors */
  --color-primary-navy: #31302F;
  --color-primary-charcoal: #2a2a2a;

  /* Accent Colors */
  --color-accent-blue: #4d65ff;
  --color-accent-blue-hover: #3a50e6;

  /* Background Colors */
  --color-bg-cream: #fbfaf9;
  --color-bg-light-gray: #e2e2e1;
  --color-bg-white: #ffffff;

  /* Text Colors */
  --color-text-primary: #31302F;
  --color-text-secondary: #666666;
  --color-text-inverse: #ffffff;

  /* Border Colors */
  --color-border-light: #e2e2e1;
  --color-border-medium: #cccccc;

  /* State Colors */
  --color-success: #00c851;
  --color-warning: #ffbb33;
  --color-error: #ff4444;

  /* Legacy Support */
  --hovercolor: #4d65ff;
  --main-color: #31302F;

  /* Typography */
  --font-family-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-size-base: 1rem;
  --font-size-sm: 0.875rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  --font-size-6xl: 3.75rem;

  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* Layout */
  --container-max-width: 1400px;
  --container-padding: 2rem;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

  /* Z-index */
  --z-sticky: 100;
  --z-modal: 1000;
}

/* ==========================================
   BASE IMPROVEMENTS
   ========================================== */

/* Smooth font rendering */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* ==========================================
   CONTAINER ENHANCEMENTS
   ========================================== */

.container-new {
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

@media (max-width: 479px) {
  .container-new {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* ==========================================
   BENTO GRID (NEW LAYOUT SYSTEM)
   ========================================== */

.bento-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
  width: 100%;
}

.bento-item-large {
  grid-column: span 2;
  grid-row: span 2;
}

.bento-item-wide {
  grid-column: span 3;
}

.bento-item-regular {
  grid-column: span 2;
}

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

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

@media (max-width: 479px) {
  .bento-grid {
    grid-template-columns: 1fr;
  }
  .bento-item-large,
  .bento-item-wide {
    grid-column: span 1;
  }
}

/* ==========================================
   UTILITY CLASSES
   ========================================== */

/* Display */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }

/* Flex */
.justify-center { justify-content: center !important; }
.align-center { align-items: center !important; }
.gap-md { gap: var(--space-md) !important; }

/* Text alignment */
.text-center { text-align: center !important; }

/* Spacing - Quick utilities */
.mt-md { margin-top: var(--space-md) !important; }
.mb-md { margin-bottom: var(--space-md) !important; }
.pt-xl { padding-top: var(--space-xl) !important; }
.pb-xl { padding-bottom: var(--space-xl) !important; }

/* ==========================================
   PHASE 1 COMPLETE - FOUNDATION READY
   ========================================== */

/* FULL-WIDTH ALIGNMENT FIX - Match header width */
.hero-section,
.treatments-section {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  max-width: 100vw !important;
}

/* Inner container with responsive widths */
.hero-section > div,
.treatments-section > div {
  margin: 0 auto !important;
  padding: 0 15px !important;
}

@media (min-width: 576px) {
  .hero-section > div,
  .treatments-section > div {
    max-width: 540px !important;
  }
}

@media (min-width: 768px) {
  .hero-section > div,
  .treatments-section > div {
    max-width: 720px !important;
  }
}

@media (min-width: 992px) {
  .hero-section > div,
  .treatments-section > div {
    max-width: 960px !important;
  }
}

@media (min-width: 1200px) {
  .hero-section > div,
  .treatments-section > div {
    max-width: 1140px !important;
  }
}

@media (min-width: 1400px) {
  .hero-section > div,
  .treatments-section > div {
    max-width: 1320px !important;
  }
}

/* Override parent container constraints */
.page-index #content-wrapper {
  max-width: none !important;
  width: auto !important;
  padding: 0 !important;
}

.page-index #main {
  overflow: hidden;
}
:root {
  --color-primary-navy: #31302F;
  --color-primary-charcoal: #2a2a2a;
  --color-accent-blue: #4d65ff;
  --color-accent-blue-hover: #3a50e6;
  --color-bg-cream: #fbfaf9;
  --color-bg-light-gray: #e2e2e1;
  --color-bg-white: #ffffff;
  --color-text-primary: #31302F;
  --color-text-secondary: #666666;
  --color-text-inverse: #ffffff;
  --color-border-light: #e2e2e1;
  --color-border-medium: #cccccc;
  --color-success: #00c851;
  --color-warning: #ffbb33;
  --color-error: #ff4444;
  --hovercolor: var(--color-accent-blue);
  --main-color: var(--color-primary-navy);
  --font-family-primary: -apple-system, BlinkMacSystemFont, "Segoe UI",
                         Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-mono: "SF Mono", Monaco, "Cascadia Code", "Courier New", monospace;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  --font-size-6xl: 3.75rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  --container-max-width: 1200px;
  --container-padding: 2rem;
  --container-padding-mobile: 1rem;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --breakpoint-xs: 479px;
  --breakpoint-sm: 767px;
  --breakpoint-md: 991px;
  --breakpoint-lg: 1199px;
  --breakpoint-xl: 1400px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 50%;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.15);
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
  --z-base: 1;
  --z-dropdown: 50;
  --z-sticky: 100;
  --z-modal-backdrop: 900;
  --z-modal: 1000;
  --z-notification: 1100; }

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

body,
h1, h2, h3, h4, h5, h6,
p, blockquote, figure,
dl, dd {
  margin: 0; }

ul[class],
ol[class] {
  padding: 0;
  list-style: none; }

body {
  min-height: 100vh;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: var(--line-height-normal); }

ul[class],
ol[class] {
  list-style: none; }

img,
picture {
  max-width: 100%;
  display: block; }

input,
button,
textarea,
select {
  font: inherit; }

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important; } }

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

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  margin-bottom: var(--space-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-primary-navy); }

h1, .h1 {
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em; }

h2, .h2 {
  font-size: var(--font-size-4xl); }

h3, .h3 {
  font-size: var(--font-size-3xl); }

h4, .h4 {
  font-size: var(--font-size-2xl); }

h5, .h5 {
  font-size: var(--font-size-xl); }

h6, .h6 {
  font-size: var(--font-size-lg); }

@media (max-width: 767px) {
  h1, .h1 {
    font-size: var(--font-size-4xl); }
  h2, .h2 {
    font-size: var(--font-size-3xl); }
  h3, .h3 {
    font-size: var(--font-size-2xl); } }

p {
  margin-bottom: var(--space-md); }

.lead-text {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary); }

small, .text-sm {
  font-size: var(--font-size-sm); }

.text-xs {
  font-size: var(--font-size-xs); }

a {
  color: var(--color-accent-blue);
  text-decoration: none;
  transition: color var(--transition-base); }
  a:hover {
    color: var(--color-accent-blue-hover); }
  a:focus {
    outline: 2px solid var(--color-accent-blue);
    outline-offset: 2px; }

.text-center {
  text-align: center; }

.text-right {
  text-align: right; }

.text-left {
  text-align: left; }

.text-bold {
  font-weight: var(--font-weight-bold); }

.text-semibold {
  font-weight: var(--font-weight-semibold); }

.text-medium {
  font-weight: var(--font-weight-medium); }

.text-normal {
  font-weight: var(--font-weight-normal); }

.text-primary {
  color: var(--color-text-primary); }

.text-secondary {
  color: var(--color-text-secondary); }

.text-inverse {
  color: var(--color-text-inverse); }

.container {
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
  width: 100%; }

@media (max-width: 479px) {
  .container {
    padding-left: var(--container-padding-mobile);
    padding-right: var(--container-padding-mobile); } }

.bento-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-md);
  width: 100%; }

.bento-item-large {
  grid-column: span 2;
  grid-row: span 2; }

.bento-item-wide {
  grid-column: span 3;
  grid-row: span 1; }

.bento-item-tall {
  grid-column: span 2;
  grid-row: span 2; }

.bento-item-regular {
  grid-column: span 2;
  grid-row: span 1; }

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

@media (max-width: 767px) {
  .bento-grid {
    grid-template-columns: repeat(2, 1fr); }
  .bento-item-large,
  .bento-item-wide,
  .bento-item-tall {
    grid-column: span 2; } }

@media (max-width: 479px) {
  .bento-grid {
    grid-template-columns: 1fr; }
  .bento-item-large,
  .bento-item-wide,
  .bento-item-tall,
  .bento-item-regular {
    grid-column: span 1; } }

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(var(--space-md) * -0.5);
  margin-right: calc(var(--space-md) * -0.5); }

.col,
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
.col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
  padding-left: calc(var(--space-md) * 0.5);
  padding-right: calc(var(--space-md) * 0.5); }

.col {
  flex: 1 0 0%; }

.col-1 {
  flex: 0 0 8.33333%;
  max-width: 8.33333%; }

.col-2 {
  flex: 0 0 16.66667%;
  max-width: 16.66667%; }

.col-3 {
  flex: 0 0 25%;
  max-width: 25%; }

.col-4 {
  flex: 0 0 33.33333%;
  max-width: 33.33333%; }

.col-5 {
  flex: 0 0 41.66667%;
  max-width: 41.66667%; }

.col-6 {
  flex: 0 0 50%;
  max-width: 50%; }

.col-7 {
  flex: 0 0 58.33333%;
  max-width: 58.33333%; }

.col-8 {
  flex: 0 0 66.66667%;
  max-width: 66.66667%; }

.col-9 {
  flex: 0 0 75%;
  max-width: 75%; }

.col-10 {
  flex: 0 0 83.33333%;
  max-width: 83.33333%; }

.col-11 {
  flex: 0 0 91.66667%;
  max-width: 91.66667%; }

.col-12 {
  flex: 0 0 100%;
  max-width: 100%; }

@media (min-width: 768px) {
  .col-md-1 {
    flex: 0 0 8.33333%;
    max-width: 8.33333%; }
  .col-md-2 {
    flex: 0 0 16.66667%;
    max-width: 16.66667%; }
  .col-md-3 {
    flex: 0 0 25%;
    max-width: 25%; }
  .col-md-4 {
    flex: 0 0 33.33333%;
    max-width: 33.33333%; }
  .col-md-5 {
    flex: 0 0 41.66667%;
    max-width: 41.66667%; }
  .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%; }
  .col-md-7 {
    flex: 0 0 58.33333%;
    max-width: 58.33333%; }
  .col-md-8 {
    flex: 0 0 66.66667%;
    max-width: 66.66667%; }
  .col-md-9 {
    flex: 0 0 75%;
    max-width: 75%; }
  .col-md-10 {
    flex: 0 0 83.33333%;
    max-width: 83.33333%; }
  .col-md-11 {
    flex: 0 0 91.66667%;
    max-width: 91.66667%; }
  .col-md-12 {
    flex: 0 0 100%;
    max-width: 100%; } }

@media (min-width: 992px) {
  .col-lg-1 {
    flex: 0 0 8.33333%;
    max-width: 8.33333%; }
  .col-lg-2 {
    flex: 0 0 16.66667%;
    max-width: 16.66667%; }
  .col-lg-3 {
    flex: 0 0 25%;
    max-width: 25%; }
  .col-lg-4 {
    flex: 0 0 33.33333%;
    max-width: 33.33333%; }
  .col-lg-5 {
    flex: 0 0 41.66667%;
    max-width: 41.66667%; }
  .col-lg-6 {
    flex: 0 0 50%;
    max-width: 50%; }
  .col-lg-7 {
    flex: 0 0 58.33333%;
    max-width: 58.33333%; }
  .col-lg-8 {
    flex: 0 0 66.66667%;
    max-width: 66.66667%; }
  .col-lg-9 {
    flex: 0 0 75%;
    max-width: 75%; }
  .col-lg-10 {
    flex: 0 0 83.33333%;
    max-width: 83.33333%; }
  .col-lg-11 {
    flex: 0 0 91.66667%;
    max-width: 91.66667%; }
  .col-lg-12 {
    flex: 0 0 100%;
    max-width: 100%; } }

#wrapper {
  min-height: calc(100vh - 200px);
  background: var(--color-bg-cream); }

section {
  padding: 0; }
  @media (max-width: 767px) {
    section {
      padding: 0; } }
.hero-section {
  background: var(--color-bg-cream);
  padding: var(--space-4xl) 0;
  text-align: center; }
  @media (max-width: 767px) {
    .hero-section {
      padding: var(--space-3xl) 0; } }
.hero-title {
  font-size: var(--font-size-6xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-navy);
  margin-bottom: var(--space-lg);
  letter-spacing: -0.02em; }
  @media (max-width: 767px) {
    .hero-title {
      font-size: var(--font-size-4xl); } }
.hero-subtitle {
  font-size: var(--font-size-xl);
  color: var(--color-text-secondary);
  max-width: 600px;
  margin: 0 auto var(--space-2xl);
  line-height: var(--line-height-relaxed); }
  @media (max-width: 767px) {
    .hero-subtitle {
      font-size: var(--font-size-base); } }
.hero-tabs {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap; }

.tab-btn {
  background: var(--color-accent-blue);
  color: var(--color-text-inverse);
  border: none;
  padding: 0.875rem 2rem;
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: all var(--transition-slow); }
  .tab-btn:hover {
    background: var(--color-accent-blue-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(77, 101, 255, 0.3); }
  .tab-btn:not(.active) {
    background: var(--color-bg-white);
    color: var(--color-primary-navy);
    border: 2px solid var(--color-border-medium); }
    .tab-btn:not(.active):hover {
      border-color: var(--color-accent-blue);
      color: var(--color-accent-blue);
      background: var(--color-bg-white);
      transform: translateY(-2px);
      box-shadow: none; }
  @media (max-width: 767px) {
    .tab-btn {
      width: 100%; } }
.treatments-section {
  padding: var(--space-4xl) 0;
  background: var(--color-bg-white); }

.features-section {
  padding: var(--space-4xl) 0;
  background: var(--color-bg-cream); }

:root {
  --primary-color: #AD8B95;
  --primary-hover: #9A7A84;
  --bg-color: #FBFAF9;
  --text-dark: #31302F;
  --text-gray: #666666;
  --border-color: rgba(0, 0, 0, 0.08); }

.use-sticky .sticky-inner {
  background: white !important;
  transition: all 0.3s ease !important; }

.use-sticky .sticky-inner.scroll-menu {
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1) !important; }

.header-top-banner {
  background: var(--primary-color) !important;
  color: white !important;
  text-align: center !important;
  padding: 8px 0 !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important; }

@media (min-width: 768px) {
  .header-top-banner {
    font-size: 12px !important;
    padding: 10px 0 !important; } }

.site-header-modern {
  border-bottom: 1px solid var(--border-color) !important; }

.header-container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 20px !important; }

.header-main {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  padding: 15px 0 !important; }

.mobile-menu-toggle {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 8px !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  border-radius: 8px !important;
  transition: background 0.2s !important;
  z-index: 1003 !important;
  position: relative !important; }

.mobile-menu-toggle:hover {
  background: #f5f5f5 !important; }

.mobile-menu-toggle span {
  width: 24px !important;
  height: 2px !important;
  background: var(--text-dark) !important;
  transition: all 0.3s !important; }

.mobile-menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px) !important; }

.mobile-menu-toggle.active span:nth-child(2) {
  opacity: 0 !important; }

.mobile-menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -6px) !important; }

@media (min-width: 992px) {
  .mobile-menu-toggle {
    display: none !important; } }

.mobile-menu-panel {
  position: fixed !important;
  top: 0 !important;
  left: -100% !important;
  width: 280px !important;
  height: 100vh !important;
  background: white !important;
  box-shadow: 2px 0 20px rgba(0, 0, 0, 0.1) !important;
  z-index: 1002 !important;
  transition: left 0.3s ease !important;
  overflow-y: auto !important;
  padding-top: 70px !important; }

.mobile-menu-panel.active {
  left: 0 !important; }

.mobile-menu-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0, 0, 0, 0.5) !important;
  z-index: 1001 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: all 0.3s !important; }

.mobile-menu-overlay.active {
  opacity: 1 !important;
  visibility: visible !important; }

.mobile-menu-header {
  padding: 20px !important;
  border-bottom: 1px solid #f0f0f0 !important; }

.mobile-menu-header h3 {
  margin: 0 !important;
  font-size: 18px !important;
  color: var(--primary-color) !important;
  font-weight: 700 !important; }

.mobile-menu-nav {
  padding: 20px 0 !important; }

.mobile-menu-nav ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important; }

.mobile-menu-nav li {
  border-bottom: 1px solid #f0f0f0 !important; }

.mobile-menu-nav a {
  display: flex !important;
  align-items: center !important;
  padding: 15px 20px !important;
  color: var(--text-dark) !important;
  text-decoration: none !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  transition: all 0.2s !important; }

.mobile-menu-nav a:hover {
  background: var(--bg-color) !important;
  color: var(--primary-color) !important;
  padding-left: 25px !important; }

.mobile-menu-nav svg {
  width: 20px !important;
  height: 20px !important;
  margin-right: 12px !important;
  flex-shrink: 0 !important; }

@media (min-width: 992px) {
  .mobile-menu-panel,
  .mobile-menu-overlay {
    display: none !important; } }

.header-logo-modern {
  flex-shrink: 0 !important; }

.header-logo-modern img {
  max-height: 45px !important;
  width: auto !important;
  display: block !important; }

@media (max-width: 767px) {
  .header-logo-modern img {
    max-height: 35px !important; } }

.header-search-modern {
  flex-grow: 1 !important;
  max-width: 500px !important;
  display: none !important; }

@media (min-width: 768px) {
  .header-search-modern {
    display: block !important; } }

.search-form-modern {
  position: relative !important;
  width: 100% !important; }

.search-input-modern {
  width: 100% !important;
  padding: 10px 45px 10px 45px !important;
  border: none !important;
  background: var(--bg-color) !important;
  border-radius: 50px !important;
  font-size: 14px !important;
  outline: none !important;
  transition: all 0.2s !important; }

.search-input-modern:focus {
  background: #f0f0f0 !important;
  box-shadow: 0 0 0 3px rgba(173, 139, 149, 0.1) !important; }

.search-input-modern::placeholder {
  color: #999 !important; }

.search-icon {
  position: absolute !important;
  left: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--text-gray) !important;
  pointer-events: none !important; }

.search-button {
  position: absolute !important;
  right: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: var(--primary-color) !important;
  color: white !important;
  border: none !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background 0.2s !important; }

.search-button:hover {
  background: var(--primary-hover) !important; }

.header-icons-modern {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important; }

@media (min-width: 768px) {
  .header-icons-modern {
    gap: 12px !important; } }

.header-icon-btn {
  position: relative !important;
  padding: 10px !important;
  background: none !important;
  border: none !important;
  color: var(--text-dark) !important;
  cursor: pointer !important;
  border-radius: 50% !important;
  transition: all 0.2s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important; }

.header-icon-btn:hover {
  background: var(--bg-color) !important;
  color: var(--primary-color) !important; }

.header-icon-btn svg {
  width: 22px !important;
  height: 22px !important; }

@media (min-width: 768px) {
  .header-icon-btn svg {
    width: 24px !important;
    height: 24px !important; } }

.icon-badge {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  background: var(--primary-color) !important;
  color: white !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  min-width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 4px !important; }

.account-dropdown {
  position: relative !important; }

.dropdown-menu-modern {
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  margin-top: 8px !important;
  background: white !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
  min-width: 200px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-10px) !important;
  transition: all 0.3s !important;
  z-index: 1001 !important; }

.account-dropdown:hover .dropdown-menu-modern,
.dropdown-menu-modern:hover {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important; }

.dropdown-menu-modern a {
  display: block !important;
  padding: 12px 20px !important;
  color: var(--text-dark) !important;
  text-decoration: none !important;
  font-size: 14px !important;
  transition: background 0.2s !important; }

.dropdown-menu-modern a:first-child {
  border-radius: 12px 12px 0 0 !important; }

.dropdown-menu-modern a:last-child {
  border-radius: 0 0 12px 12px !important;
  border-top: 1px solid #f0f0f0 !important; }

.dropdown-menu-modern a:hover {
  background: var(--bg-color) !important;
  color: var(--primary-color) !important; }

.language-selector-modern {
  position: relative !important; }

.language-dropdown {
  position: relative !important; }

.language-dropdown .language-menu {
  display: none;
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  margin-top: 8px !important;
  background: white !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
  min-width: 180px !important;
  z-index: 1001 !important;
  border: 1px solid #f5f5f4 !important;
  padding: 0.5rem 0 !important; }

.language-dropdown:hover .language-menu,
.language-dropdown:focus-within .language-menu {
  display: block !important; }

.language-dropdown .language-menu a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 16px !important;
  color: #44403c !important;
  text-decoration: none !important;
  font-size: 13px !important;
  transition: background 0.2s !important; }

.language-dropdown .language-menu a:first-child {
  border-radius: 12px 12px 0 0 !important; }

.language-dropdown .language-menu a:last-child {
  border-radius: 0 0 12px 12px !important; }

.language-dropdown .language-menu a:hover {
  background: #fff1f2 !important;
  color: #9f1239 !important; }

.language-dropdown .language-menu a.active {
  font-weight: 600 !important;
  color: #9f1239 !important; }

.language-dropdown .language-menu img {
  width: 20px !important;
  height: 15px !important;
  border-radius: 2px !important; }

.mobile-search {
  display: block !important;
  padding: 0 20px 15px !important; }

@media (min-width: 768px) {
  .mobile-search {
    display: none !important; } }

.promo-banner {
  background: var(--color-primary-navy);
  color: var(--color-text-inverse);
  padding: 0.75rem 0;
  text-align: center;
  position: relative;
  font-size: var(--font-size-sm); }
  .promo-banner__close {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--color-text-inverse);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    line-height: 1; }
    .promo-banner__close:hover {
      opacity: 0.8; }

.site-header {
  background: var(--color-bg-white);
  border-bottom: 1px solid var(--color-border-light);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  transition: box-shadow var(--transition-slow); }
  .site-header.scrolled {
    box-shadow: var(--shadow-md); }

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  gap: 2rem; }

.header-logo img {
  height: 32px;
  width: auto;
  display: block; }

.header-nav {
  flex: 1;
  display: none; }
  @media (min-width: 992px) {
    .header-nav {
      display: block; } }
.nav-menu {
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center; }
  .nav-menu a {
    color: var(--color-text-primary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-base);
    transition: color var(--transition-base); }
    .nav-menu a:hover {
      color: var(--color-accent-blue); }

.header-utils {
  display: flex;
  align-items: center;
  gap: 1.5rem; }
  .header-utils a, .header-utils button {
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    transition: color var(--transition-base); }
    .header-utils a:hover, .header-utils button:hover {
      color: var(--color-accent-blue); }

.cart-icon {
  position: relative;
  display: flex;
  align-items: center; }

.cart-count {
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--color-accent-blue);
  color: var(--color-text-inverse);
  border-radius: var(--radius-full);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold); }

.site-footer {
  background: var(--color-primary-navy);
  color: var(--color-text-inverse);
  padding: var(--space-4xl) 0 var(--space-2xl);
  margin-top: var(--space-4xl); }

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-3xl);
  margin-bottom: var(--space-3xl); }
  @media (max-width: 991px) {
    .footer-grid {
      grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 479px) {
    .footer-grid {
      grid-template-columns: 1fr; } }
.footer-col.footer-brand .footer-logo {
  height: 32px;
  width: auto;
  margin-bottom: var(--space-md);
  filter: brightness(0) invert(1); }

.footer-col.footer-brand .footer-tagline {
  font-size: var(--font-size-sm);
  opacity: 0.8; }

.footer-heading {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-lg);
  color: var(--color-text-inverse); }

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0; }
  .footer-links li {
    margin-bottom: var(--space-md); }
  .footer-links a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: var(--font-size-sm);
    transition: color var(--transition-base); }
    .footer-links a:hover {
      color: var(--color-text-inverse); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-xl);
  border-top: 1px solid rgba(255, 255, 255, 0.1); }
  @media (max-width: 479px) {
    .footer-bottom {
      flex-direction: column;
      gap: var(--space-lg);
      text-align: center; } }
.copyright {
  font-size: var(--font-size-sm);
  opacity: 0.7; }

.social-links {
  display: flex;
  gap: var(--space-lg); }
  .social-links a {
    color: var(--color-text-inverse);
    text-decoration: none;
    opacity: 0.8;
    transition: opacity var(--transition-base); }
    .social-links a:hover {
      opacity: 1; }

/* Modern Footer Styles - Force Override */
.footer-modern {
  background: white !important;
  border-top: 1px solid #E5E5E5 !important;
  padding-top: 60px !important;
  padding-bottom: 30px !important;
  border-bottom: none !important;
  box-shadow: none !important; }

/* Remove borders from any child sections/divs */
.footer-modern section,
.footer-modern .elementor-section,
.footer-modern .elementor-container,
.footer-modern .elementor-row,
.footer-modern .elementor-column {
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important; }

/* Remove all unwanted borders from footer elements */
/* AGGRESSIVE: Remove ALL borders from page-footer and all footers */
.page-footer,
.page-footer *,
footer,
footer * {
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  outline: none !important; }

/* Override: ONLY allow specific borders */
.footer-modern {
  border-top: 1px solid #E5E5E5 !important; }

.certification-badges {
  width: 100% !important;
  max-width: 100% !important;
  border-top: 1px solid #E5E5E5 !important;
  border-bottom: 1px solid #E5E5E5 !important; }

.footer-bottom {
  border-top: 1px solid #E5E5E5 !important; }

.footer-modern *:not(.newsletter-section):not(.certification-badges):not(.footer-bottom) {
  border-top: none !important;
  border-bottom: none !important; }

.footer-modern > *:not(.footer-container) {
  border: none !important; }

.footer-modern div:not(.newsletter-section):not(.certification-badges):not(.footer-bottom) {
  border-top: none !important;
  border-bottom: none !important; }

.footer-container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 20px !important; }

/* Newsletter Section */
.social-link svg,
.social-link svg path {
  fill: #666666 !important; }

.social-links {
  display: none !important;
  gap: 12px !important;
  align-items: center !important; }

.social-link {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: #F5F5F5 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  color: #666666 !important;
  transition: all 0.2s !important;
  text-decoration: none !important; }

.social-link svg {
  width: 18px !important;
  height: 18px !important; }

/* Certification Badges - GREY BORDERS */
.certification-badges {
  width: calc(100vw) !important;
  max-width: calc(100vw) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 30px !important;
  padding: 20px 20px !important;
  border-top: 1px solid #E5E5E5 !important;
  border-bottom: 1px solid #E5E5E5 !important;
  border-left: none !important;
  border-right: none !important;
  margin-bottom: 15px !important;
  opacity: 0.6 !important; }

@media (min-width: 768px) {
  .certification-badges {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: flex-start !important; } }

.certification-badge {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  filter: grayscale(100%) !important;
  transition: filter 0.2s !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  padding: 0 !important;
  margin: 0 !important; }

.certification-badge:hover {
  filter: grayscale(0%) !important; }

.badge-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: #AD8B95 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: white !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important; }

.badge-icon.badge-hipaa {
  background: #4CAF50 !important; }

.badge-icon.badge-secure {
  background: #2196F3 !important; }

.badge-text {
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: #31302F !important; }

/* Footer Bottom */
.footer-bottom {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  padding-top: 10px !important;
  border-top: none !important; }

@media (min-width: 768px) {
  .footer-bottom {
    flex-direction: row !important; } }

.footer-copyright {
  font-size: 12px !important;
  color: #999999 !important;
  margin: 0 !important; }

.payment-methods {
  display: flex !important;
  gap: 20px !important;
  align-items: center !important; }

.payment-methods img {
  height: 16px !important;
  opacity: 0.4 !important;
  filter: grayscale(100%) !important;
  transition: all 0.2s !important; }

.payment-methods img:hover {
  opacity: 0.8 !important;
  filter: grayscale(0%) !important; }

/* Mobile Sticky Navigation */
.mobile-nav-sticky {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(10px) !important;
  border-top: 1px solid #E5E5E5 !important;
  padding: 12px 0 !important;
  z-index: 999 !important;
  display: flex !important;
  justify-content: space-around !important;
  align-items: center !important; }

@media (min-width: 768px) {
  .mobile-nav-sticky {
    display: none !important; } }

.mobile-nav-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  color: #666666 !important;
  text-decoration: none !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  transition: color 0.2s !important; }

.mobile-nav-item.active {
  color: #AD8B95 !important; }

.mobile-nav-item:hover {
  color: #AD8B95 !important; }

.mobile-nav-item svg {
  width: 24px !important;
  height: 24px !important; }

.mobile-nav-consult {
  position: relative !important;
  top: -20px !important;
  background: #AD8B95 !important;
  color: white !important;
  padding: 14px !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 16px rgba(173, 139, 149, 0.4) !important; }

.mobile-nav-consult svg {
  width: 28px !important;
  height: 28px !important; }

/* OVERRIDE TRUST BADGES SECTION - Remove inline styles visual impact */
section[style*="border"] {
  border-color: #E5E5E5 !important; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 2rem;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: all var(--transition-slow);
  text-decoration: none;
  font-family: var(--font-family-primary);
  line-height: 1; }
  .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed; }

.btn-primary {
  background: var(--color-accent-blue);
  color: var(--color-text-inverse); }
  .btn-primary:hover:not(:disabled) {
    background: var(--color-accent-blue-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(77, 101, 255, 0.3); }
  .btn-primary:focus {
    outline: 2px solid var(--color-accent-blue);
    outline-offset: 2px; }
  .btn-primary:active:not(:disabled) {
    transform: translateY(0); }

.btn-secondary {
  background: var(--color-bg-white);
  color: var(--color-primary-navy);
  border: 2px solid var(--color-border-medium); }
  .btn-secondary:hover:not(:disabled) {
    border-color: var(--color-accent-blue);
    color: var(--color-accent-blue); }
  .btn-secondary:focus {
    outline: 2px solid var(--color-accent-blue);
    outline-offset: 2px; }

.btn-tertiary {
  background: transparent;
  color: var(--color-primary-navy);
  border: none; }
  .btn-tertiary:hover:not(:disabled) {
    background: var(--color-bg-light-gray); }

.btn-large {
  padding: 1.125rem 2.5rem;
  font-size: var(--font-size-lg); }

.btn-small {
  padding: 0.625rem 1.25rem;
  font-size: var(--font-size-sm); }

.btn-block {
  width: 100%;
  display: flex; }

.btn-icon {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm); }

.treatment-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 280px;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  transition: transform var(--transition-slow), box-shadow var(--transition-slow);
  cursor: pointer; }
  .treatment-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl); }
    .treatment-card:hover .card-arrow {
      transform: translateX(4px); }

.card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%); }

.card-content {
  position: relative;
  z-index: 2;
  padding: var(--space-xl);
  color: var(--color-text-inverse);
  width: 100%; }

.card-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-sm);
  color: var(--color-text-inverse); }

.card-description {
  font-size: var(--font-size-base);
  margin-bottom: var(--space-md);
  opacity: 0.9; }

.card-price {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  display: block;
  margin-bottom: var(--space-sm); }

.card-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-full);
  font-size: 1.25rem;
  transition: transform var(--transition-slow); }

.card-link {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3; }

.bento-item-large .card-title {
  font-size: var(--font-size-3xl); }

.bento-item-large {
  min-height: 400px; }

.product-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  transition: transform var(--transition-base), box-shadow var(--transition-base); }
  .product-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md); }

.product-card__image {
  margin-bottom: var(--space-md);
  border-radius: var(--radius-sm);
  overflow: hidden; }

.product-card__title {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-sm);
  color: var(--color-text-primary); }

.product-card__price {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-navy);
  margin-bottom: var(--space-md); }

.product-card__actions {
  display: flex;
  gap: var(--space-sm); }

.form-group {
  margin-bottom: var(--space-lg); }

label {
  display: block;
  margin-bottom: var(--space-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm); }

.form-control-label {
  display: block;
  margin-bottom: var(--space-sm);
  font-weight: var(--font-weight-medium); }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
textarea,
select {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg-white);
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-base), box-shadow var(--transition-base); }
  input[type="text"]:focus,
  input[type="email"]:focus,
  input[type="password"]:focus,
  input[type="tel"]:focus,
  input[type="url"]:focus,
  input[type="search"]:focus,
  input[type="number"]:focus,
  textarea:focus,
  select:focus {
    outline: none;
    border-color: var(--color-accent-blue);
    box-shadow: 0 0 0 3px rgba(77, 101, 255, 0.1); }
  input[type="text"]::placeholder,
  input[type="email"]::placeholder,
  input[type="password"]::placeholder,
  input[type="tel"]::placeholder,
  input[type="url"]::placeholder,
  input[type="search"]::placeholder,
  input[type="number"]::placeholder,
  textarea::placeholder,
  select::placeholder {
    color: var(--color-text-secondary);
    opacity: 0.6; }
  input[type="text"]:disabled,
  input[type="email"]:disabled,
  input[type="password"]:disabled,
  input[type="tel"]:disabled,
  input[type="url"]:disabled,
  input[type="search"]:disabled,
  input[type="number"]:disabled,
  textarea:disabled,
  select:disabled {
    background-color: var(--color-bg-light-gray);
    cursor: not-allowed;
    opacity: 0.6; }

textarea {
  resize: vertical;
  min-height: 100px; }

select {
  appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8"><path fill="none" stroke="%23333" stroke-width="2" d="M1 1l5 5 5-5"/></svg>');
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem; }

input[type="checkbox"],
input[type="radio"] {
  width: auto;
  margin-right: var(--space-sm); }

.form-group.has-error .form-control-label {
  color: var(--color-error); }

.form-group.has-error input,
.form-group.has-error textarea,
.form-group.has-error select {
  border-color: var(--color-error); }
  .form-group.has-error input:focus,
  .form-group.has-error textarea:focus,
  .form-group.has-error select:focus {
    border-color: var(--color-error);
    box-shadow: 0 0 0 3px rgba(255, 68, 68, 0.1); }

.error-message {
  color: var(--color-error);
  font-size: var(--font-size-sm);
  margin-top: var(--space-sm); }

.form-group.has-success input,
.form-group.has-success textarea,
.form-group.has-success select {
  border-color: var(--color-success); }

.required {
  color: var(--color-error);
  margin-left: var(--space-xs); }

.input-group {
  position: relative;
  display: flex;
  align-items: stretch; }
  .input-group input {
    flex: 1; }
  .input-group .input-group-append {
    display: flex;
    margin-left: -1px; }

.m-0 {
  margin: 0 !important; }

.mt-0 {
  margin-top: 0 !important; }

.mb-0 {
  margin-bottom: 0 !important; }

.ml-0 {
  margin-left: 0 !important; }

.mr-0 {
  margin-right: 0 !important; }

.m-sm {
  margin: var(--space-sm) !important; }

.mt-sm {
  margin-top: var(--space-sm) !important; }

.mb-sm {
  margin-bottom: var(--space-sm) !important; }

.ml-sm {
  margin-left: var(--space-sm) !important; }

.mr-sm {
  margin-right: var(--space-sm) !important; }

.m-md {
  margin: var(--space-md) !important; }

.mt-md {
  margin-top: var(--space-md) !important; }

.mb-md {
  margin-bottom: var(--space-md) !important; }

.ml-md {
  margin-left: var(--space-md) !important; }

.mr-md {
  margin-right: var(--space-md) !important; }

.m-lg {
  margin: var(--space-lg) !important; }

.mt-lg {
  margin-top: var(--space-lg) !important; }

.mb-lg {
  margin-bottom: var(--space-lg) !important; }

.ml-lg {
  margin-left: var(--space-lg) !important; }

.mr-lg {
  margin-right: var(--space-lg) !important; }

.m-xl {
  margin: var(--space-xl) !important; }

.mt-xl {
  margin-top: var(--space-xl) !important; }

.mb-xl {
  margin-bottom: var(--space-xl) !important; }

.ml-xl {
  margin-left: var(--space-xl) !important; }

.mr-xl {
  margin-right: var(--space-xl) !important; }

.p-0 {
  padding: 0 !important; }

.pt-0 {
  padding-top: 0 !important; }

.pb-0 {
  padding-bottom: 0 !important; }

.pl-0 {
  padding-left: 0 !important; }

.pr-0 {
  padding-right: 0 !important; }

.p-sm {
  padding: var(--space-sm) !important; }

.pt-sm {
  padding-top: var(--space-sm) !important; }

.pb-sm {
  padding-bottom: var(--space-sm) !important; }

.pl-sm {
  padding-left: var(--space-sm) !important; }

.pr-sm {
  padding-right: var(--space-sm) !important; }

.p-md {
  padding: var(--space-md) !important; }

.pt-md {
  padding-top: var(--space-md) !important; }

.pb-md {
  padding-bottom: var(--space-md) !important; }

.pl-md {
  padding-left: var(--space-md) !important; }

.pr-md {
  padding-right: var(--space-md) !important; }

.p-lg {
  padding: var(--space-lg) !important; }

.pt-lg {
  padding-top: var(--space-lg) !important; }

.pb-lg {
  padding-bottom: var(--space-lg) !important; }

.pl-lg {
  padding-left: var(--space-lg) !important; }

.pr-lg {
  padding-right: var(--space-lg) !important; }

.p-xl {
  padding: var(--space-xl) !important; }

.pt-xl {
  padding-top: var(--space-xl) !important; }

.pb-xl {
  padding-bottom: var(--space-xl) !important; }

.pl-xl {
  padding-left: var(--space-xl) !important; }

.pr-xl {
  padding-right: var(--space-xl) !important; }

.d-none {
  display: none !important; }

.d-block {
  display: block !important; }

.d-inline {
  display: inline !important; }

.d-inline-block {
  display: inline-block !important; }

.d-flex {
  display: flex !important; }

.d-inline-flex {
  display: inline-flex !important; }

@media (max-width: 767px) {
  .d-md-none {
    display: none !important; } }

@media (min-width: 768px) {
  .d-sm-none {
    display: none !important; } }

.flex-row {
  flex-direction: row !important; }

.flex-column {
  flex-direction: column !important; }

.justify-start {
  justify-content: flex-start !important; }

.justify-center {
  justify-content: center !important; }

.justify-end {
  justify-content: flex-end !important; }

.justify-between {
  justify-content: space-between !important; }

.align-start {
  align-items: flex-start !important; }

.align-center {
  align-items: center !important; }

.align-end {
  align-items: flex-end !important; }

.gap-sm {
  gap: var(--space-sm) !important; }

.gap-md {
  gap: var(--space-md) !important; }

.gap-lg {
  gap: var(--space-lg) !important; }

body.mobile-menu-open {
  overflow: hidden; }

.img-responsive {
  max-width: 100%;
  height: auto;
  display: block; }

.clearfix::after {
  content: "";
  display: table;
  clear: both; }

.products {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md); }

.product-miniature {
  flex: 1 0 calc(25% - var(--space-md));
  min-width: 200px; }

@media (max-width: 991px) {
  .product-miniature {
    flex: 1 0 calc(33.333% - var(--space-md)); } }

@media (max-width: 767px) {
  .product-miniature {
    flex: 1 0 calc(50% - var(--space-md)); } }

@media (max-width: 479px) {
  .product-miniature {
    flex: 1 0 100%; } }
/**
 * Responsive Enhancements for Her Health Theme
 * Ensures optimal display on mobile, tablet, and desktop
 */

/* Mobile optimizations (< 768px) */
@media (max-width: 767px) {
  .hero-section {
    padding: 3rem 0 3.5rem !important;
  }
  
  .hero-section h1 {
    font-size: 2rem !important;
    margin-bottom: 1rem !important;
  }
  
  .hero-section p {
    font-size: 1rem !important;
    margin-bottom: 2rem !important;
  }
  
  .treatments-section {
    padding: 0 0 3rem !important;
  }
  
  /* Stack cards on mobile */
  .treatments-section > div > div:last-of-type {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  /* Reduce card padding on mobile */
  .treatments-section a {
    padding: 1.5rem !important;
    min-height: 160px !important;
  }
}

/* Tablet optimizations (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-section {
    padding: 3.5rem 0 4rem !important;
  }
  
  /* 2 columns on tablet */
  .treatments-section > div > div:last-of-type {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Desktop optimizations (>= 1024px) */
@media (min-width: 1024px) {
  /* 4 columns on desktop */
  .treatments-section > div > div:last-of-type {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* Extra large screens (>= 1400px) */
@media (min-width: 1400px) {
  .hero-section h1 {
    font-size: 3.75rem !important;
  }
}

/* Ensure smooth transitions on all interactive elements */
.btn,
.treatments-section a {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

/* Improve touch targets on mobile */
@media (max-width: 767px) {
  .btn {
    padding: 1rem 2rem !important;
    font-size: 1rem !important;
  }
}

/* Full-width sections to match header width */
.hero-section,
.treatments-section {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  max-width: 100vw !important;
}

/* Inner container with responsive widths to match header */
.hero-section > div,
.treatments-section > div {
  margin: 0 auto;
  padding: 0 15px;
}

/* Responsive container widths */
@media (min-width: 576px) {
  .hero-section > div,
  .treatments-section > div {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .hero-section > div,
  .treatments-section > div {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .hero-section > div,
  .treatments-section > div {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .hero-section > div,
  .treatments-section > div {
    max-width: 1140px;
  }
}

@media (min-width: 1400px) {
  .hero-section > div,
  .treatments-section > div {
    max-width: 1320px;
  }
}

/* Override any parent container constraints for homepage */
.page-index #content-wrapper {
  max-width: none !important;
  width: auto !important;
  padding: 0 !important;
}

/* Ensure homepage main section can contain full-width children */
.page-index #main {
  overflow: hidden;
}
@font-face {
  font-family: 'roadthemes-icon';
  src: url("../css/fonts/roadthemes-icon.eot?txsi0l");
  src: url("../css/fonts/roadthemes-icon.eot?txsi0l#iefix") format("embedded-opentype"), url("../css/fonts/roadthemes-icon.ttf?txsi0l") format("truetype"), url("../css/fonts/roadthemes-icon.woff?txsi0l") format("woff"), url("../css/fonts/roadthemes-icon.svg?txsi0l#roadthemes-icon") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block; }
[class^="icon-rt-"], [class*=" icon-rt-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'roadthemes-icon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.icon-rt-bag-outline:before {
  content: "\e900"; }

.icon-rt-cart-outline:before {
  content: "\e901"; }

.icon-rt-bag:before {
  content: "\e902"; }

.icon-rt-handbag:before {
  content: "\e903"; }

.icon-rt-shopping-cart:before {
  content: "\e904"; }

.icon-rt-bag2:before {
  content: "\e905"; }

.icon-rt-shopping-cart-solid:before {
  content: "\e906"; }

.icon-rt-basket-outline:before {
  content: "\e907"; }

.icon-rt-shopping-basket-solid:before {
  content: "\e908"; }

.icon-rt-heart:before {
  content: "\e909"; }

.icon-rt-heart2:before {
  content: "\e90a"; }

.icon-rt-heart-solid:before {
  content: "\e90b"; }

.icon-rt-heart-outline:before {
  content: "\e90c"; }

.icon-rt-ios-heart-outline:before {
  content: "\e90d"; }

.icon-rt-shuffle:before {
  content: "\e90e"; }

.icon-rt-refresh:before {
  content: "\e90f"; }

.icon-rt-ios-shuffle:before {
  content: "\e910"; }

.icon-rt-ios-shuffle-strong:before {
  content: "\e911"; }

.icon-rt-repeat-outline:before {
  content: "\e912"; }

.icon-rt-sync-alt-solid:before {
  content: "\e913"; }

.icon-rt-star2:before {
  content: "\e914"; }

.icon-rt-star-solid:before {
  content: "\e915"; }

.icon-rt-star-half-alt-solid:before {
  content: "\e916"; }

.icon-rt-search:before {
  content: "\e917"; }

.icon-rt-magnifier:before {
  content: "\e918"; }

.icon-rt-search2:before {
  content: "\e919"; }

.icon-rt-loupe:before {
  content: "\e91a"; }

.icon-rt-search1:before {
  content: "\e91b"; }

.icon-rt-eye-outline:before {
  content: "\e91c"; }

.icon-rt-eye:before {
  content: "\e91d"; }

.icon-rt-look:before {
  content: "\e91e"; }

.icon-rt-eye2:before {
  content: "\e91f"; }

.icon-rt-bars-solid:before {
  content: "\e920"; }

.icon-rt-menu-outline:before {
  content: "\e921"; }

.icon-rt-navicon-round:before {
  content: "\e922"; }

.icon-rt-grid-outline:before {
  content: "\e923"; }

.icon-rt-grid:before {
  content: "\e924"; }

.icon-rt-grid2:before {
  content: "\e925"; }

.icon-rt-apps-outline:before {
  content: "\e926"; }

.icon-rt-apps-sharp:before {
  content: "\e927"; }

.icon-rt-list:before {
  content: "\e928"; }

.icon-rt-list-outline:before {
  content: "\e929"; }

.icon-rt-list-solid:before {
  content: "\e92a"; }

.icon-rt-arrow-down:before {
  content: "\e92b"; }

.icon-rt-arrow-left:before {
  content: "\e92c"; }

.icon-rt-arrow-right:before {
  content: "\e92d"; }

.icon-rt-arrow-up:before {
  content: "\e92e"; }

.icon-rt-logo-facebook:before {
  content: "\e92f"; }

.icon-rt-logo-google:before {
  content: "\e930"; }

.icon-rt-logo-pinterest:before {
  content: "\e931"; }

.icon-rt-logo-twitter:before {
  content: "\e932"; }

.icon-rt-logo-youtube:before {
  content: "\e933"; }

.icon-rt-logo-instagram:before {
  content: "\e934"; }

.icon-rt-logo-linkedin:before {
  content: "\e935"; }

.icon-rt-logo-rss:before {
  content: "\e936"; }

.icon-rt-logo-twitch:before {
  content: "\e937"; }

.icon-rt-0-facebook2:before {
  content: "\e938"; }

.icon-rt-1-twitter2:before {
  content: "\e939"; }

.icon-rt-2-youtube2:before {
  content: "\e93a"; }

.icon-rt-3-dribbble:before {
  content: "\e93b"; }

.icon-rt-4-facebook-f:before {
  content: "\e93c"; }

.icon-rt-5-google-plus-g:before {
  content: "\e93d"; }

.icon-rt-6-pinterest-p:before {
  content: "\e93e"; }

.icon-rt-close-outline:before {
  content: "\e93f"; }

.icon-rt-close-circle:before {
  content: "\e940"; }

.icon-rt-close-circle-outline:before {
  content: "\e941"; }

.icon-rt-person-outline:before {
  content: "\e942"; }

.icon-rt-person-circle-outline:before {
  content: "\e943"; }

.icon-rt-user:before {
  content: "\e944"; }

.icon-rt-user-circle:before {
  content: "\e945"; }

.icon-rt-call-outline:before {
  content: "\e946"; }

.icon-rt-call-sharp:before {
  content: "\e947"; }

.icon-rt-headphones:before {
  content: "\e948"; }

.icon-rt-headphones-mic:before {
  content: "\e949"; }

.icon-rt-headphones2:before {
  content: "\e94a"; }

.icon-rt-phone-volume-solid:before {
  content: "\e94b"; }

.icon-rt-phone-call:before {
  content: "\e94c"; }

.icon-rt-headset-outline:before {
  content: "\e94d"; }

.icon-rt-settings-outline:before {
  content: "\e94e"; }

.icon-rt-settings:before {
  content: "\e94f"; }

.icon-rt-shipping-fast-solid:before {
  content: "\e950"; }

.icon-rt-truck-solid:before {
  content: "\e951"; }

.icon-rt-ship-solid:before {
  content: "\e952"; }

.icon-rt-boat-outline:before {
  content: "\e953"; }

.icon-rt-rocket:before {
  content: "\e954"; }

.icon-rt-rocket-outline:before {
  content: "\e955"; }

.icon-rt-location-pin:before {
  content: "\e956"; }

.icon-rt-map-marked-alt-solid:before {
  content: "\e957"; }

.icon-rt-location-outline:before {
  content: "\e958"; }

.icon-rt-mail-outline:before {
  content: "\e959"; }

.icon-rt-mail-open-outline:before {
  content: "\e95a"; }

.icon-rt-globe-solid:before {
  content: "\e95b"; }

.icon-rt-globe-alt:before {
  content: "\e95c"; }

.icon-rt-scan-outline:before {
  content: "\e95d"; }

.icon-rt-expand-outline:before {
  content: "\e95e"; }

.icon-rt-checkmark:before {
  content: "\e95f"; }

.icon-rt-card-outline:before {
  content: "\e960"; }

.icon-rt-credit-card-solid:before {
  content: "\e961"; }

.icon-rt-money-bill-wave-solid:before {
  content: "\e962"; }

.icon-rt-cash-outline:before {
  content: "\e963"; }

.icon-rt-gift-outline:before {
  content: "\e964"; }

.icon-rt-gift-solid:before {
  content: "\e965"; }

.icon-rt-gifts-solid:before {
  content: "\e966"; }

.icon-rt-ribbon-outline:before {
  content: "\e967"; }

.icon-rt-time-outline:before {
  content: "\e968"; }

.icon-rt-help-buoy-outline:before {
  content: "\e969"; }

.icon-rt-exchange-1:before {
  content: "\e96a"; }

.icon-rt-call-center-24-7:before {
  content: "\e96b"; }

.icon-rt-headphone-24-7:before {
  content: "\e96c"; }

.icon-rt-credit-card-secure1:before {
  content: "\e96d"; }

.icon-rt-payment-security:before {
  content: "\e96e"; }

.icon-rt-logo-vk:before {
  content: "\e96f"; }

.icon-rt-logo-whatsapp:before {
  content: "\e970"; }

.icon-rt-logo-telegram:before {
  content: "\e971"; }

.icon-rt-play-outline:before {
  content: "\e972"; }

.icon-rt-videocam-outline:before {
  content: "\e973"; }

.icon-rt-play-circle:before {
  content: "\e974"; }

.icon-rt-home-outline:before {
  content: "\e975"; }

.icon-rt-diamond-outline:before {
  content: "\e976"; }

.icon-rt-camera-outline:before {
  content: "\e977"; }

.icon-rt-fitness-outline:before {
  content: "\e978"; }

.icon-rt-medkit-outline:before {
  content: "\e979"; }

.icon-rt-nuclear-outline:before {
  content: "\e97a"; }

.icon-rt-shirt-outline:before {
  content: "\e97b"; }

.icon-rt-watch-outline:before {
  content: "\e97c"; }

.icon-rt-couch-solid:before {
  content: "\e97d"; }

.icon-rt-filter-outline:before {
  content: "\e97e"; }

.icon-rt-options-outline:before {
  content: "\e97f"; }

.icon-rt-chatbox-outline:before {
  content: "\e980"; }

.icon-rt-chatbubble-outline:before {
  content: "\e981"; }

.icon-rt-logo-behance:before {
  content: "\e982"; }

.icon-rt-logo-flickr:before {
  content: "\e983"; }

.icon-rt-logo-foursquare:before {
  content: "\e984"; }

.icon-rt-logo-github:before {
  content: "\e985"; }

.icon-rt-logo-skype:before {
  content: "\e986"; }

.icon-rt-logo-snapchat:before {
  content: "\e987"; }

.icon-rt-logo-soundcloud:before {
  content: "\e988"; }

.icon-rt-logo-tumblr:before {
  content: "\e989"; }

.icon-rt-logo-vimeo:before {
  content: "\e98a"; }

.icon-rt-logo-wechat:before {
  content: "\e98b"; }

.icon-rt-logo-weibo:before {
  content: "\e98c"; }

.icon-rt-add-outline:before {
  content: "\e98d"; }

.icon-rt-remove-outline:before {
  content: "\e98e"; }

.icon-rt-left-quotes-sign:before {
  content: "\e98f"; }

.icon-rt-right-quotes-symbol:before {
  content: "\e990"; }

.icon-rt-arrow-left-solid:before {
  content: "\e991"; }

.icon-rt-arrow-right-solid:before {
  content: "\e992"; }

.icon-rt-cauliflower:before {
  content: "\e993"; }

.icon-rt-bread:before {
  content: "\e994"; }

.icon-rt-meat:before {
  content: "\e995"; }

.icon-rt-anise-candy:before {
  content: "\e996"; }

.icon-rt-snowflake:before {
  content: "\e997"; }

.icon-rt-coffee-cup:before {
  content: "\e998"; }

.icon-rt-almond:before {
  content: "\e999"; }

.icon-rt-egg:before {
  content: "\e99a"; }

.icon-rt-Search:before {
  content: "\e99b"; }

.icon-rt-FullShoppingCart:before {
  content: "\e99c"; }

.icon-rt-ShoppingCart:before {
  content: "\e99d"; }

.icon-rt-Heart:before {
  content: "\e99e"; }

.icon-rt-MusicMixer:before {
  content: "\e99f"; }

.icon-rt-Eye:before {
  content: "\e9a0"; }

.icon-rt-Blog:before {
  content: "\e9a1"; }

.icon-rt-Agenda:before {
  content: "\e9a2"; }

.icon-rt-Edit:before {
  content: "\e9a3"; }

.icon-rt-Settings:before {
  content: "\e9a4"; }

.icon-rt-Mouse:before {
  content: "\e9a5"; }

.icon-rt-android-arrow-dropleft-circle:before {
  content: "\e9a6"; }

.icon-rt-android-arrow-dropright-circle:before {
  content: "\e9a7"; }

.icon-rt-logo-tiktok:before {
  content: "\e9a8"; }

/*# sourceMappingURL=roadthemes-icon.css.map */
:root {
  --color-primary-navy: #31302F;
  --color-primary-charcoal: #2a2a2a;
  --color-accent-blue: #4d65ff;
  --color-accent-blue-hover: #3a50e6;
  --color-bg-cream: #fbfaf9;
  --color-bg-light-gray: #e2e2e1;
  --color-bg-white: #ffffff;
  --color-text-primary: #31302F;
  --color-text-secondary: #666666;
  --color-text-inverse: #ffffff;
  --color-border-light: #e2e2e1;
  --color-border-medium: #cccccc;
  --color-success: #00c851;
  --color-warning: #ffbb33;
  --color-error: #ff4444;
  --hovercolor: var(--color-accent-blue);
  --main-color: var(--color-primary-navy);
  --font-family-primary: -apple-system, BlinkMacSystemFont, "Segoe UI",
                         Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-mono: "SF Mono", Monaco, "Cascadia Code", "Courier New", monospace;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  --font-size-6xl: 3.75rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  --container-max-width: 1200px;
  --container-padding: 2rem;
  --container-padding-mobile: 1rem;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --breakpoint-xs: 479px;
  --breakpoint-sm: 767px;
  --breakpoint-md: 991px;
  --breakpoint-lg: 1199px;
  --breakpoint-xl: 1400px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 50%;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.15);
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
  --z-base: 1;
  --z-dropdown: 50;
  --z-sticky: 100;
  --z-modal-backdrop: 900;
  --z-modal: 1000;
  --z-notification: 1100; }

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

body,
h1, h2, h3, h4, h5, h6,
p, blockquote, figure,
dl, dd {
  margin: 0; }

ul[class],
ol[class] {
  padding: 0;
  list-style: none; }

body {
  min-height: 100vh;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: var(--line-height-normal); }

ul[class],
ol[class] {
  list-style: none; }

img,
picture {
  max-width: 100%;
  display: block; }

input,
button,
textarea,
select {
  font: inherit; }

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important; } }

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

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  margin-bottom: var(--space-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-primary-navy); }

h1, .h1 {
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em; }

h2, .h2 {
  font-size: var(--font-size-4xl); }

h3, .h3 {
  font-size: var(--font-size-3xl); }

h4, .h4 {
  font-size: var(--font-size-2xl); }

h5, .h5 {
  font-size: var(--font-size-xl); }

h6, .h6 {
  font-size: var(--font-size-lg); }

@media (max-width: 767px) {
  h1, .h1 {
    font-size: var(--font-size-4xl); }
  h2, .h2 {
    font-size: var(--font-size-3xl); }
  h3, .h3 {
    font-size: var(--font-size-2xl); } }

p {
  margin-bottom: var(--space-md); }

.lead-text {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary); }

small, .text-sm {
  font-size: var(--font-size-sm); }

.text-xs {
  font-size: var(--font-size-xs); }

a {
  color: var(--color-accent-blue);
  text-decoration: none;
  transition: color var(--transition-base); }
  a:hover {
    color: var(--color-accent-blue-hover); }
  a:focus {
    outline: 2px solid var(--color-accent-blue);
    outline-offset: 2px; }

.text-center {
  text-align: center; }

.text-right {
  text-align: right; }

.text-left {
  text-align: left; }

.text-bold {
  font-weight: var(--font-weight-bold); }

.text-semibold {
  font-weight: var(--font-weight-semibold); }

.text-medium {
  font-weight: var(--font-weight-medium); }

.text-normal {
  font-weight: var(--font-weight-normal); }

.text-primary {
  color: var(--color-text-primary); }

.text-secondary {
  color: var(--color-text-secondary); }

.text-inverse {
  color: var(--color-text-inverse); }

.container {
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
  width: 100%; }

@media (max-width: 479px) {
  .container {
    padding-left: var(--container-padding-mobile);
    padding-right: var(--container-padding-mobile); } }

.bento-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-md);
  width: 100%; }

.bento-item-large {
  grid-column: span 2;
  grid-row: span 2; }

.bento-item-wide {
  grid-column: span 3;
  grid-row: span 1; }

.bento-item-tall {
  grid-column: span 2;
  grid-row: span 2; }

.bento-item-regular {
  grid-column: span 2;
  grid-row: span 1; }

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

@media (max-width: 767px) {
  .bento-grid {
    grid-template-columns: repeat(2, 1fr); }
  .bento-item-large,
  .bento-item-wide,
  .bento-item-tall {
    grid-column: span 2; } }

@media (max-width: 479px) {
  .bento-grid {
    grid-template-columns: 1fr; }
  .bento-item-large,
  .bento-item-wide,
  .bento-item-tall,
  .bento-item-regular {
    grid-column: span 1; } }

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(var(--space-md) * -0.5);
  margin-right: calc(var(--space-md) * -0.5); }

.col,
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
.col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
  padding-left: calc(var(--space-md) * 0.5);
  padding-right: calc(var(--space-md) * 0.5); }

.col {
  flex: 1 0 0%; }

.col-1 {
  flex: 0 0 8.33333%;
  max-width: 8.33333%; }

.col-2 {
  flex: 0 0 16.66667%;
  max-width: 16.66667%; }

.col-3 {
  flex: 0 0 25%;
  max-width: 25%; }

.col-4 {
  flex: 0 0 33.33333%;
  max-width: 33.33333%; }

.col-5 {
  flex: 0 0 41.66667%;
  max-width: 41.66667%; }

.col-6 {
  flex: 0 0 50%;
  max-width: 50%; }

.col-7 {
  flex: 0 0 58.33333%;
  max-width: 58.33333%; }

.col-8 {
  flex: 0 0 66.66667%;
  max-width: 66.66667%; }

.col-9 {
  flex: 0 0 75%;
  max-width: 75%; }

.col-10 {
  flex: 0 0 83.33333%;
  max-width: 83.33333%; }

.col-11 {
  flex: 0 0 91.66667%;
  max-width: 91.66667%; }

.col-12 {
  flex: 0 0 100%;
  max-width: 100%; }

@media (min-width: 768px) {
  .col-md-1 {
    flex: 0 0 8.33333%;
    max-width: 8.33333%; }
  .col-md-2 {
    flex: 0 0 16.66667%;
    max-width: 16.66667%; }
  .col-md-3 {
    flex: 0 0 25%;
    max-width: 25%; }
  .col-md-4 {
    flex: 0 0 33.33333%;
    max-width: 33.33333%; }
  .col-md-5 {
    flex: 0 0 41.66667%;
    max-width: 41.66667%; }
  .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%; }
  .col-md-7 {
    flex: 0 0 58.33333%;
    max-width: 58.33333%; }
  .col-md-8 {
    flex: 0 0 66.66667%;
    max-width: 66.66667%; }
  .col-md-9 {
    flex: 0 0 75%;
    max-width: 75%; }
  .col-md-10 {
    flex: 0 0 83.33333%;
    max-width: 83.33333%; }
  .col-md-11 {
    flex: 0 0 91.66667%;
    max-width: 91.66667%; }
  .col-md-12 {
    flex: 0 0 100%;
    max-width: 100%; } }

@media (min-width: 992px) {
  .col-lg-1 {
    flex: 0 0 8.33333%;
    max-width: 8.33333%; }
  .col-lg-2 {
    flex: 0 0 16.66667%;
    max-width: 16.66667%; }
  .col-lg-3 {
    flex: 0 0 25%;
    max-width: 25%; }
  .col-lg-4 {
    flex: 0 0 33.33333%;
    max-width: 33.33333%; }
  .col-lg-5 {
    flex: 0 0 41.66667%;
    max-width: 41.66667%; }
  .col-lg-6 {
    flex: 0 0 50%;
    max-width: 50%; }
  .col-lg-7 {
    flex: 0 0 58.33333%;
    max-width: 58.33333%; }
  .col-lg-8 {
    flex: 0 0 66.66667%;
    max-width: 66.66667%; }
  .col-lg-9 {
    flex: 0 0 75%;
    max-width: 75%; }
  .col-lg-10 {
    flex: 0 0 83.33333%;
    max-width: 83.33333%; }
  .col-lg-11 {
    flex: 0 0 91.66667%;
    max-width: 91.66667%; }
  .col-lg-12 {
    flex: 0 0 100%;
    max-width: 100%; } }

#wrapper {
  min-height: calc(100vh - 200px);
  background: var(--color-bg-cream); }

section {
  padding: var(--space-3xl) 0; }
  @media (max-width: 767px) {
    section {
      padding: var(--space-2xl) 0; } }
.hero-section {
  background: var(--color-bg-cream);
  padding: var(--space-4xl) 0;
  text-align: center; }
  @media (max-width: 767px) {
    .hero-section {
      padding: var(--space-3xl) 0; } }
.hero-title {
  font-size: var(--font-size-6xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-navy);
  margin-bottom: var(--space-lg);
  letter-spacing: -0.02em; }
  @media (max-width: 767px) {
    .hero-title {
      font-size: var(--font-size-4xl); } }
.hero-subtitle {
  font-size: var(--font-size-xl);
  color: var(--color-text-secondary);
  max-width: 600px;
  margin: 0 auto var(--space-2xl);
  line-height: var(--line-height-relaxed); }
  @media (max-width: 767px) {
    .hero-subtitle {
      font-size: var(--font-size-base); } }
.hero-tabs {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap; }

.tab-btn {
  background: var(--color-accent-blue);
  color: var(--color-text-inverse);
  border: none;
  padding: 0.875rem 2rem;
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: all var(--transition-slow); }
  .tab-btn:hover {
    background: var(--color-accent-blue-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(77, 101, 255, 0.3); }
  .tab-btn:not(.active) {
    background: var(--color-bg-white);
    color: var(--color-primary-navy);
    border: 2px solid var(--color-border-medium); }
    .tab-btn:not(.active):hover {
      border-color: var(--color-accent-blue);
      color: var(--color-accent-blue);
      background: var(--color-bg-white);
      transform: translateY(-2px);
      box-shadow: none; }
  @media (max-width: 767px) {
    .tab-btn {
      width: 100%; } }
.treatments-section {
  padding: var(--space-4xl) 0;
  background: var(--color-bg-white); }

.features-section {
  padding: var(--space-4xl) 0;
  background: var(--color-bg-cream); }

:root {
  --primary-color: #AD8B95;
  --primary-hover: #9A7A84;
  --bg-color: #FBFAF9;
  --text-dark: #31302F;
  --text-gray: #666666;
  --border-color: rgba(0, 0, 0, 0.08); }

.use-sticky .sticky-inner {
  background: white !important;
  transition: all 0.3s ease !important; }

.use-sticky .sticky-inner.scroll-menu {
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1) !important; }

.header-top-banner {
  background: var(--primary-color) !important;
  color: white !important;
  text-align: center !important;
  padding: 8px 0 !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important; }

@media (min-width: 768px) {
  .header-top-banner {
    font-size: 12px !important;
    padding: 10px 0 !important; } }

.site-header-modern {
  border-bottom: 1px solid var(--border-color) !important; }

.header-container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 20px !important; }

.header-main {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  padding: 15px 0 !important; }

.mobile-menu-toggle {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 8px !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  border-radius: 8px !important;
  transition: background 0.2s !important;
  z-index: 1003 !important;
  position: relative !important; }

.mobile-menu-toggle:hover {
  background: #f5f5f5 !important; }

.mobile-menu-toggle span {
  width: 24px !important;
  height: 2px !important;
  background: var(--text-dark) !important;
  transition: all 0.3s !important; }

.mobile-menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px) !important; }

.mobile-menu-toggle.active span:nth-child(2) {
  opacity: 0 !important; }

.mobile-menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -6px) !important; }

@media (min-width: 992px) {
  .mobile-menu-toggle {
    display: none !important; } }

.mobile-menu-panel {
  position: fixed !important;
  top: 0 !important;
  left: -100% !important;
  width: 280px !important;
  height: 100vh !important;
  background: white !important;
  box-shadow: 2px 0 20px rgba(0, 0, 0, 0.1) !important;
  z-index: 1002 !important;
  transition: left 0.3s ease !important;
  overflow-y: auto !important;
  padding-top: 70px !important; }

.mobile-menu-panel.active {
  left: 0 !important; }

.mobile-menu-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0, 0, 0, 0.5) !important;
  z-index: 1001 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: all 0.3s !important; }

.mobile-menu-overlay.active {
  opacity: 1 !important;
  visibility: visible !important; }

.mobile-menu-header {
  padding: 20px !important;
  border-bottom: 1px solid #f0f0f0 !important; }

.mobile-menu-header h3 {
  margin: 0 !important;
  font-size: 18px !important;
  color: var(--primary-color) !important;
  font-weight: 700 !important; }

.mobile-menu-nav {
  padding: 20px 0 !important; }

.mobile-menu-nav ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important; }

.mobile-menu-nav li {
  border-bottom: 1px solid #f0f0f0 !important; }

.mobile-menu-nav a {
  display: flex !important;
  align-items: center !important;
  padding: 15px 20px !important;
  color: var(--text-dark) !important;
  text-decoration: none !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  transition: all 0.2s !important; }

.mobile-menu-nav a:hover {
  background: var(--bg-color) !important;
  color: var(--primary-color) !important;
  padding-left: 25px !important; }

.mobile-menu-nav svg {
  width: 20px !important;
  height: 20px !important;
  margin-right: 12px !important;
  flex-shrink: 0 !important; }

@media (min-width: 992px) {
  .mobile-menu-panel,
  .mobile-menu-overlay {
    display: none !important; } }

.header-logo-modern {
  flex-shrink: 0 !important; }

.header-logo-modern img {
  max-height: 45px !important;
  width: auto !important;
  display: block !important; }

@media (max-width: 767px) {
  .header-logo-modern img {
    max-height: 35px !important; } }

.header-search-modern {
  flex-grow: 1 !important;
  max-width: 500px !important;
  display: none !important; }

@media (min-width: 768px) {
  .header-search-modern {
    display: block !important; } }

.search-form-modern {
  position: relative !important;
  width: 100% !important; }

.search-input-modern {
  width: 100% !important;
  padding: 10px 45px 10px 45px !important;
  border: none !important;
  background: var(--bg-color) !important;
  border-radius: 50px !important;
  font-size: 14px !important;
  outline: none !important;
  transition: all 0.2s !important; }

.search-input-modern:focus {
  background: #f0f0f0 !important;
  box-shadow: 0 0 0 3px rgba(173, 139, 149, 0.1) !important; }

.search-input-modern::placeholder {
  color: #999 !important; }

.search-icon {
  position: absolute !important;
  left: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--text-gray) !important;
  pointer-events: none !important; }

.search-button {
  position: absolute !important;
  right: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: var(--primary-color) !important;
  color: white !important;
  border: none !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background 0.2s !important; }

.search-button:hover {
  background: var(--primary-hover) !important; }

.header-icons-modern {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important; }

@media (min-width: 768px) {
  .header-icons-modern {
    gap: 12px !important; } }

.header-icon-btn {
  position: relative !important;
  padding: 10px !important;
  background: none !important;
  border: none !important;
  color: var(--text-dark) !important;
  cursor: pointer !important;
  border-radius: 50% !important;
  transition: all 0.2s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important; }

.header-icon-btn:hover {
  background: var(--bg-color) !important;
  color: var(--primary-color) !important; }

.header-icon-btn svg {
  width: 22px !important;
  height: 22px !important; }

@media (min-width: 768px) {
  .header-icon-btn svg {
    width: 24px !important;
    height: 24px !important; } }

.icon-badge {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  background: var(--primary-color) !important;
  color: white !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  min-width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 4px !important; }

.account-dropdown {
  position: relative !important; }

.dropdown-menu-modern {
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  margin-top: 8px !important;
  background: white !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
  min-width: 200px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-10px) !important;
  transition: all 0.3s !important;
  z-index: 1001 !important; }

.account-dropdown:hover .dropdown-menu-modern,
.dropdown-menu-modern:hover {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important; }

.dropdown-menu-modern a {
  display: block !important;
  padding: 12px 20px !important;
  color: var(--text-dark) !important;
  text-decoration: none !important;
  font-size: 14px !important;
  transition: background 0.2s !important; }

.dropdown-menu-modern a:first-child {
  border-radius: 12px 12px 0 0 !important; }

.dropdown-menu-modern a:last-child {
  border-radius: 0 0 12px 12px !important;
  border-top: 1px solid #f0f0f0 !important; }

.dropdown-menu-modern a:hover {
  background: var(--bg-color) !important;
  color: var(--primary-color) !important; }

.language-selector-modern {
  position: relative !important; }

.language-dropdown {
  position: relative !important; }

.language-dropdown .language-menu {
  display: none;
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  margin-top: 8px !important;
  background: white !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
  min-width: 180px !important;
  z-index: 1001 !important;
  border: 1px solid #f5f5f4 !important;
  padding: 0.5rem 0 !important; }

.language-dropdown:hover .language-menu,
.language-dropdown:focus-within .language-menu {
  display: block !important; }

.language-dropdown .language-menu a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 16px !important;
  color: #44403c !important;
  text-decoration: none !important;
  font-size: 13px !important;
  transition: background 0.2s !important; }

.language-dropdown .language-menu a:first-child {
  border-radius: 12px 12px 0 0 !important; }

.language-dropdown .language-menu a:last-child {
  border-radius: 0 0 12px 12px !important; }

.language-dropdown .language-menu a:hover {
  background: #fff1f2 !important;
  color: #9f1239 !important; }

.language-dropdown .language-menu a.active {
  font-weight: 600 !important;
  color: #9f1239 !important; }

.language-dropdown .language-menu img {
  width: 20px !important;
  height: 15px !important;
  border-radius: 2px !important; }

.mobile-search {
  display: block !important;
  padding: 0 20px 15px !important; }

@media (min-width: 768px) {
  .mobile-search {
    display: none !important; } }

.promo-banner {
  background: var(--color-primary-navy);
  color: var(--color-text-inverse);
  padding: 0.75rem 0;
  text-align: center;
  position: relative;
  font-size: var(--font-size-sm); }
  .promo-banner__close {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--color-text-inverse);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    line-height: 1; }
    .promo-banner__close:hover {
      opacity: 0.8; }

.site-header {
  background: var(--color-bg-white);
  border-bottom: 1px solid var(--color-border-light);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  transition: box-shadow var(--transition-slow); }
  .site-header.scrolled {
    box-shadow: var(--shadow-md); }

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  gap: 2rem; }

.header-logo img {
  height: 32px;
  width: auto;
  display: block; }

.header-nav {
  flex: 1;
  display: none; }
  @media (min-width: 992px) {
    .header-nav {
      display: block; } }
.nav-menu {
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center; }
  .nav-menu a {
    color: var(--color-text-primary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-base);
    transition: color var(--transition-base); }
    .nav-menu a:hover {
      color: var(--color-accent-blue); }

.header-utils {
  display: flex;
  align-items: center;
  gap: 1.5rem; }
  .header-utils a, .header-utils button {
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    transition: color var(--transition-base); }
    .header-utils a:hover, .header-utils button:hover {
      color: var(--color-accent-blue); }

.cart-icon {
  position: relative;
  display: flex;
  align-items: center; }

.cart-count {
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--color-accent-blue);
  color: var(--color-text-inverse);
  border-radius: var(--radius-full);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold); }

.site-footer {
  background: var(--color-primary-navy);
  color: var(--color-text-inverse);
  padding: var(--space-4xl) 0 var(--space-2xl);
  margin-top: var(--space-4xl); }

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-3xl);
  margin-bottom: var(--space-3xl); }
  @media (max-width: 991px) {
    .footer-grid {
      grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 479px) {
    .footer-grid {
      grid-template-columns: 1fr; } }
.footer-col.footer-brand .footer-logo {
  height: 32px;
  width: auto;
  margin-bottom: var(--space-md);
  filter: brightness(0) invert(1); }

.footer-col.footer-brand .footer-tagline {
  font-size: var(--font-size-sm);
  opacity: 0.8; }

.footer-heading {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-lg);
  color: var(--color-text-inverse); }

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0; }
  .footer-links li {
    margin-bottom: var(--space-md); }
  .footer-links a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: var(--font-size-sm);
    transition: color var(--transition-base); }
    .footer-links a:hover {
      color: var(--color-text-inverse); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-xl);
  border-top: 1px solid rgba(255, 255, 255, 0.1); }
  @media (max-width: 479px) {
    .footer-bottom {
      flex-direction: column;
      gap: var(--space-lg);
      text-align: center; } }
.copyright {
  font-size: var(--font-size-sm);
  opacity: 0.7; }

.social-links {
  display: flex;
  gap: var(--space-lg); }
  .social-links a {
    color: var(--color-text-inverse);
    text-decoration: none;
    opacity: 0.8;
    transition: opacity var(--transition-base); }
    .social-links a:hover {
      opacity: 1; }

/* Modern Footer Styles - Force Override */
.footer-modern {
  background: white !important;
  border-top: 1px solid #E5E5E5 !important;
  padding-top: 60px !important;
  padding-bottom: 30px !important;
  border-bottom: none !important;
  box-shadow: none !important; }

/* Remove borders from any child sections/divs */
.footer-modern section,
.footer-modern .elementor-section,
.footer-modern .elementor-container,
.footer-modern .elementor-row,
.footer-modern .elementor-column {
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important; }

/* Remove all unwanted borders from footer elements */
/* AGGRESSIVE: Remove ALL borders from page-footer and all footers */
.page-footer,
.page-footer *,
footer,
footer * {
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  outline: none !important; }

/* Override: ONLY allow specific borders */
.footer-modern {
  border-top: 1px solid #E5E5E5 !important; }

.certification-badges {
  width: 100% !important;
  max-width: 100% !important;
  border-top: 1px solid #E5E5E5 !important;
  border-bottom: 1px solid #E5E5E5 !important; }

.footer-bottom {
  border-top: 1px solid #E5E5E5 !important; }

.footer-modern *:not(.newsletter-section):not(.certification-badges):not(.footer-bottom) {
  border-top: none !important;
  border-bottom: none !important; }

.footer-modern > *:not(.footer-container) {
  border: none !important; }

.footer-modern div:not(.newsletter-section):not(.certification-badges):not(.footer-bottom) {
  border-top: none !important;
  border-bottom: none !important; }

.footer-container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 20px !important; }

/* Newsletter Section */
.social-link svg,
.social-link svg path {
  fill: #666666 !important; }

.social-links {
  display: none !important;
  gap: 12px !important;
  align-items: center !important; }

.social-link {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: #F5F5F5 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  color: #666666 !important;
  transition: all 0.2s !important;
  text-decoration: none !important; }

.social-link svg {
  width: 18px !important;
  height: 18px !important; }

/* Certification Badges - GREY BORDERS */
.certification-badges {
  width: calc(100vw) !important;
  max-width: calc(100vw) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 30px !important;
  padding: 20px 20px !important;
  border-top: 1px solid #E5E5E5 !important;
  border-bottom: 1px solid #E5E5E5 !important;
  border-left: none !important;
  border-right: none !important;
  margin-bottom: 15px !important;
  opacity: 0.6 !important; }

@media (min-width: 768px) {
  .certification-badges {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: flex-start !important; } }

.certification-badge {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  filter: grayscale(100%) !important;
  transition: filter 0.2s !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  padding: 0 !important;
  margin: 0 !important; }

.certification-badge:hover {
  filter: grayscale(0%) !important; }

.badge-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: #AD8B95 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: white !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important; }

.badge-icon.badge-hipaa {
  background: #4CAF50 !important; }

.badge-icon.badge-secure {
  background: #2196F3 !important; }

.badge-text {
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: #31302F !important; }

/* Footer Bottom */
.footer-bottom {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  padding-top: 10px !important;
  border-top: none !important; }

@media (min-width: 768px) {
  .footer-bottom {
    flex-direction: row !important; } }

.footer-copyright {
  font-size: 12px !important;
  color: #999999 !important;
  margin: 0 !important; }

.payment-methods {
  display: flex !important;
  gap: 20px !important;
  align-items: center !important; }

.payment-methods img {
  height: 16px !important;
  opacity: 0.4 !important;
  filter: grayscale(100%) !important;
  transition: all 0.2s !important; }

.payment-methods img:hover {
  opacity: 0.8 !important;
  filter: grayscale(0%) !important; }

/* Mobile Sticky Navigation */
.mobile-nav-sticky {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(10px) !important;
  border-top: 1px solid #E5E5E5 !important;
  padding: 12px 0 !important;
  z-index: 999 !important;
  display: flex !important;
  justify-content: space-around !important;
  align-items: center !important; }

@media (min-width: 768px) {
  .mobile-nav-sticky {
    display: none !important; } }

.mobile-nav-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  color: #666666 !important;
  text-decoration: none !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  transition: color 0.2s !important; }

.mobile-nav-item.active {
  color: #AD8B95 !important; }

.mobile-nav-item:hover {
  color: #AD8B95 !important; }

.mobile-nav-item svg {
  width: 24px !important;
  height: 24px !important; }

.mobile-nav-consult {
  position: relative !important;
  top: -20px !important;
  background: #AD8B95 !important;
  color: white !important;
  padding: 14px !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 16px rgba(173, 139, 149, 0.4) !important; }

.mobile-nav-consult svg {
  width: 28px !important;
  height: 28px !important; }

/* OVERRIDE TRUST BADGES SECTION - Remove inline styles visual impact */
section[style*="border"] {
  border-color: #E5E5E5 !important; }

/**
 * Breadcrumb Navigation Styles
 * Adds separators and proper spacing between breadcrumb items
 */
.breadcrumb {
  padding: 0.75rem 0;
  margin-bottom: 1rem;
  list-style: none;
  background-color: transparent;
  border-radius: 0; }
  .breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none; }
  .breadcrumb li {
    display: inline-block;
    font-size: 0.875rem;
    color: #666;
    /* Add "/" separator after each item except the last */
    /* Link styling */
    /* Current page (last item) */ }
    .breadcrumb li:not(:last-child)::after {
      content: "›";
      padding: 0 0.5rem;
      color: #999; }
    .breadcrumb li a {
      color: #666;
      text-decoration: none;
      transition: color 0.2s ease; }
      .breadcrumb li a:hover {
        color: var(--maincolor, #4d65ff);
        text-decoration: underline; }
    .breadcrumb li:last-child {
      color: #333;
      font-weight: 500; }
    .breadcrumb li span {
      color: inherit; }

/* Dark background variant */
.breadcrumb-dark {
  background-color: #f5f5f5;
  padding: 0.75rem 1rem;
  border-radius: 4px; }

/* Hide mobile quick menu on desktop */
.quickmenu-mobile {
  display: none !important; }
  @media (max-width: 767px) {
    .quickmenu-mobile {
      display: block !important; } }
/**
 * Product Grid System
 * Responsive grid for product listings
 */
/* Base product container */
.product_content {
  display: flex;
  flex-wrap: wrap;
  margin-right: -10px;
  margin-left: -10px; }

/* Product item base */
.item-product {
  position: relative;
  min-height: 1px;
  padding-right: 10px;
  padding-left: 10px;
  margin-bottom: 20px; }

/* Extra small devices (default - mobile) */
.col-xs-12 {
  flex: 0 0 100%;
  max-width: 100%; }

/* Small devices (>=544px) */
@media (min-width: 544px) {
  .col-sm-6 {
    flex: 0 0 50%;
    max-width: 50%; } }

/* Medium devices (>=768px) */
@media (min-width: 768px) {
  .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%; }
  .col-md-4 {
    flex: 0 0 33.33333%;
    max-width: 33.33333%; } }

/* Large devices (>=992px) */
@media (min-width: 992px) {
  .col-lg-4 {
    flex: 0 0 33.33333%;
    max-width: 33.33333%; }
  .col-lg-3 {
    flex: 0 0 25%;
    max-width: 25%; } }

/* Extra large devices (>=1200px) */
@media (min-width: 1200px) {
  .col-xl-3 {
    flex: 0 0 25%;
    max-width: 25%; }
  .col-xl-4 {
    flex: 0 0 33.33333%;
    max-width: 33.33333%; } }

/* Ensure product miniatures don't exceed their column width */
.product-miniature {
  max-width: 100%;
  width: 100%; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 2rem;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: all var(--transition-slow);
  text-decoration: none;
  font-family: var(--font-family-primary);
  line-height: 1; }
  .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed; }

.btn-primary {
  background: var(--color-accent-blue);
  color: var(--color-text-inverse); }
  .btn-primary:hover:not(:disabled) {
    background: var(--color-accent-blue-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(77, 101, 255, 0.3); }
  .btn-primary:focus {
    outline: 2px solid var(--color-accent-blue);
    outline-offset: 2px; }
  .btn-primary:active:not(:disabled) {
    transform: translateY(0); }

.btn-secondary {
  background: var(--color-bg-white);
  color: var(--color-primary-navy);
  border: 2px solid var(--color-border-medium); }
  .btn-secondary:hover:not(:disabled) {
    border-color: var(--color-accent-blue);
    color: var(--color-accent-blue); }
  .btn-secondary:focus {
    outline: 2px solid var(--color-accent-blue);
    outline-offset: 2px; }

.btn-tertiary {
  background: transparent;
  color: var(--color-primary-navy);
  border: none; }
  .btn-tertiary:hover:not(:disabled) {
    background: var(--color-bg-light-gray); }

.btn-large {
  padding: 1.125rem 2.5rem;
  font-size: var(--font-size-lg); }

.btn-small {
  padding: 0.625rem 1.25rem;
  font-size: var(--font-size-sm); }

.btn-block {
  width: 100%;
  display: flex; }

.btn-icon {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm); }

.treatment-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 280px;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  transition: transform var(--transition-slow), box-shadow var(--transition-slow);
  cursor: pointer; }
  .treatment-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl); }
    .treatment-card:hover .card-arrow {
      transform: translateX(4px); }

.card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%); }

.card-content {
  position: relative;
  z-index: 2;
  padding: var(--space-xl);
  color: var(--color-text-inverse);
  width: 100%; }

.card-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-sm);
  color: var(--color-text-inverse); }

.card-description {
  font-size: var(--font-size-base);
  margin-bottom: var(--space-md);
  opacity: 0.9; }

.card-price {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  display: block;
  margin-bottom: var(--space-sm); }

.card-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-full);
  font-size: 1.25rem;
  transition: transform var(--transition-slow); }

.card-link {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3; }

.bento-item-large .card-title {
  font-size: var(--font-size-3xl); }

.bento-item-large {
  min-height: 400px; }

.product-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  transition: transform var(--transition-base), box-shadow var(--transition-base); }
  .product-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md); }

.product-card__image {
  margin-bottom: var(--space-md);
  border-radius: var(--radius-sm);
  overflow: hidden; }

.product-card__title {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-sm);
  color: var(--color-text-primary); }

.product-card__price {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-navy);
  margin-bottom: var(--space-md); }

.product-card__actions {
  display: flex;
  gap: var(--space-sm); }

.form-group {
  margin-bottom: var(--space-lg); }

label {
  display: block;
  margin-bottom: var(--space-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm); }

.form-control-label {
  display: block;
  margin-bottom: var(--space-sm);
  font-weight: var(--font-weight-medium); }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
textarea,
select {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg-white);
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-base), box-shadow var(--transition-base); }
  input[type="text"]:focus,
  input[type="email"]:focus,
  input[type="password"]:focus,
  input[type="tel"]:focus,
  input[type="url"]:focus,
  input[type="search"]:focus,
  input[type="number"]:focus,
  textarea:focus,
  select:focus {
    outline: none;
    border-color: var(--color-accent-blue);
    box-shadow: 0 0 0 3px rgba(77, 101, 255, 0.1); }
  input[type="text"]::placeholder,
  input[type="email"]::placeholder,
  input[type="password"]::placeholder,
  input[type="tel"]::placeholder,
  input[type="url"]::placeholder,
  input[type="search"]::placeholder,
  input[type="number"]::placeholder,
  textarea::placeholder,
  select::placeholder {
    color: var(--color-text-secondary);
    opacity: 0.6; }
  input[type="text"]:disabled,
  input[type="email"]:disabled,
  input[type="password"]:disabled,
  input[type="tel"]:disabled,
  input[type="url"]:disabled,
  input[type="search"]:disabled,
  input[type="number"]:disabled,
  textarea:disabled,
  select:disabled {
    background-color: var(--color-bg-light-gray);
    cursor: not-allowed;
    opacity: 0.6; }

textarea {
  resize: vertical;
  min-height: 100px; }

select {
  appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8"><path fill="none" stroke="%23333" stroke-width="2" d="M1 1l5 5 5-5"/></svg>');
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem; }

input[type="checkbox"],
input[type="radio"] {
  width: auto;
  margin-right: var(--space-sm); }

.form-group.has-error .form-control-label {
  color: var(--color-error); }

.form-group.has-error input,
.form-group.has-error textarea,
.form-group.has-error select {
  border-color: var(--color-error); }
  .form-group.has-error input:focus,
  .form-group.has-error textarea:focus,
  .form-group.has-error select:focus {
    border-color: var(--color-error);
    box-shadow: 0 0 0 3px rgba(255, 68, 68, 0.1); }

.error-message {
  color: var(--color-error);
  font-size: var(--font-size-sm);
  margin-top: var(--space-sm); }

.form-group.has-success input,
.form-group.has-success textarea,
.form-group.has-success select {
  border-color: var(--color-success); }

.required {
  color: var(--color-error);
  margin-left: var(--space-xs); }

.input-group {
  position: relative;
  display: flex;
  align-items: stretch; }
  .input-group input {
    flex: 1; }
  .input-group .input-group-append {
    display: flex;
    margin-left: -1px; }

/**
 * My Account Page Styles
 * Dashboard cards and links styling
 */
/* Dashboard links container */
.links {
  display: flex;
  flex-wrap: wrap;
  margin-right: -10px;
  margin-left: -10px;
  /* Dashboard link - these have col-* classes directly on the <a> tags */
  /* Grid widths for different breakpoints */ }
  .links > a {
    display: block;
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
    margin-bottom: 1.875rem;
    text-align: center;
    text-decoration: none;
    /* Hover state */
    /* Card container */
    /* Material Icons styling */ }
    .links > a:hover {
      color: var(--maincolor, #4d65ff);
      text-decoration: none; }
      .links > a:hover .link-item {
        box-shadow: rgba(9, 30, 66, 0.35) 0 6px 12px -2px, rgba(9, 30, 66, 0.12) 0 0 0 1px;
        transform: translateY(-2px); }
      .links > a:hover i {
        color: var(--maincolor, #4d65ff); }
    .links > a .link-item {
      display: block;
      height: 100%;
      min-height: 250px;
      padding: 3rem 1rem;
      background: #fff;
      box-shadow: rgba(9, 30, 66, 0.25) 0 4px 8px -2px, rgba(9, 30, 66, 0.08) 0 0 0 1px;
      border-radius: 8px;
      font-size: 1rem;
      font-weight: 700;
      color: #7a7a7a;
      text-transform: none;
      transition: all 0.2s ease-in-out;
      cursor: pointer; }
    .links > a i.material-icons {
      display: block;
      width: 100%;
      margin-bottom: 2rem;
      font-size: 3.5rem;
      color: #323232;
      transition: color 0.2s ease-in-out; }
  .links > a.col-xs-12 {
    width: 100%;
    float: left; }
  @media (min-width: 544px) {
    .links > a.col-sm-6 {
      width: 50%;
      float: left; } }
  @media (min-width: 768px) {
    .links > a.col-md-6 {
      width: 50%;
      float: left; } }
  @media (min-width: 992px) {
    .links > a.col-lg-4 {
      width: 33.33333%;
      float: left; } }
/* My Account page specific styles */
#my-account .page-footer {
  margin-bottom: 2rem; }
  #my-account .page-footer .account-link {
    margin-right: 1rem; }
    #my-account .page-footer .account-link i {
      font-size: 1rem; }
    #my-account .page-footer .account-link span {
      font-size: 0.875rem;
      vertical-align: middle; }

/* Material Icons font face */
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'liga'; }

.m-0 {
  margin: 0 !important; }

.mt-0 {
  margin-top: 0 !important; }

.mb-0 {
  margin-bottom: 0 !important; }

.ml-0 {
  margin-left: 0 !important; }

.mr-0 {
  margin-right: 0 !important; }

.m-sm {
  margin: var(--space-sm) !important; }

.mt-sm {
  margin-top: var(--space-sm) !important; }

.mb-sm {
  margin-bottom: var(--space-sm) !important; }

.ml-sm {
  margin-left: var(--space-sm) !important; }

.mr-sm {
  margin-right: var(--space-sm) !important; }

.m-md {
  margin: var(--space-md) !important; }

.mt-md {
  margin-top: var(--space-md) !important; }

.mb-md {
  margin-bottom: var(--space-md) !important; }

.ml-md {
  margin-left: var(--space-md) !important; }

.mr-md {
  margin-right: var(--space-md) !important; }

.m-lg {
  margin: var(--space-lg) !important; }

.mt-lg {
  margin-top: var(--space-lg) !important; }

.mb-lg {
  margin-bottom: var(--space-lg) !important; }

.ml-lg {
  margin-left: var(--space-lg) !important; }

.mr-lg {
  margin-right: var(--space-lg) !important; }

.m-xl {
  margin: var(--space-xl) !important; }

.mt-xl {
  margin-top: var(--space-xl) !important; }

.mb-xl {
  margin-bottom: var(--space-xl) !important; }

.ml-xl {
  margin-left: var(--space-xl) !important; }

.mr-xl {
  margin-right: var(--space-xl) !important; }

.p-0 {
  padding: 0 !important; }

.pt-0 {
  padding-top: 0 !important; }

.pb-0 {
  padding-bottom: 0 !important; }

.pl-0 {
  padding-left: 0 !important; }

.pr-0 {
  padding-right: 0 !important; }

.p-sm {
  padding: var(--space-sm) !important; }

.pt-sm {
  padding-top: var(--space-sm) !important; }

.pb-sm {
  padding-bottom: var(--space-sm) !important; }

.pl-sm {
  padding-left: var(--space-sm) !important; }

.pr-sm {
  padding-right: var(--space-sm) !important; }

.p-md {
  padding: var(--space-md) !important; }

.pt-md {
  padding-top: var(--space-md) !important; }

.pb-md {
  padding-bottom: var(--space-md) !important; }

.pl-md {
  padding-left: var(--space-md) !important; }

.pr-md {
  padding-right: var(--space-md) !important; }

.p-lg {
  padding: var(--space-lg) !important; }

.pt-lg {
  padding-top: var(--space-lg) !important; }

.pb-lg {
  padding-bottom: var(--space-lg) !important; }

.pl-lg {
  padding-left: var(--space-lg) !important; }

.pr-lg {
  padding-right: var(--space-lg) !important; }

.p-xl {
  padding: var(--space-xl) !important; }

.pt-xl {
  padding-top: var(--space-xl) !important; }

.pb-xl {
  padding-bottom: var(--space-xl) !important; }

.pl-xl {
  padding-left: var(--space-xl) !important; }

.pr-xl {
  padding-right: var(--space-xl) !important; }

.d-none {
  display: none !important; }

.d-block {
  display: block !important; }

.d-inline {
  display: inline !important; }

.d-inline-block {
  display: inline-block !important; }

.d-flex {
  display: flex !important; }

.d-inline-flex {
  display: inline-flex !important; }

@media (max-width: 767px) {
  .d-md-none {
    display: none !important; } }

@media (min-width: 768px) {
  .d-sm-none {
    display: none !important; } }

.flex-row {
  flex-direction: row !important; }

.flex-column {
  flex-direction: column !important; }

.justify-start {
  justify-content: flex-start !important; }

.justify-center {
  justify-content: center !important; }

.justify-end {
  justify-content: flex-end !important; }

.justify-between {
  justify-content: space-between !important; }

.align-start {
  align-items: flex-start !important; }

.align-center {
  align-items: center !important; }

.align-end {
  align-items: flex-end !important; }

.gap-sm {
  gap: var(--space-sm) !important; }

.gap-md {
  gap: var(--space-md) !important; }

.gap-lg {
  gap: var(--space-lg) !important; }

body.mobile-menu-open {
  overflow: hidden; }

.img-responsive {
  max-width: 100%;
  height: auto;
  display: block; }

.clearfix::after {
  content: "";
  display: table;
  clear: both; }

.products {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md); }

.product-miniature {
  flex: 1 0 calc(25% - var(--space-md));
  min-width: 200px; }

@media (max-width: 991px) {
  .product-miniature {
    flex: 1 0 calc(33.333% - var(--space-md)); } }

@media (max-width: 767px) {
  .product-miniature {
    flex: 1 0 calc(50% - var(--space-md)); } }

@media (max-width: 479px) {
  .product-miniature {
    flex: 1 0 100%; } }
/**
 * HerHealth Redesign - Header Component
 * Pixel-perfect implementation of new header design
 */
/**
 * HerHealth Redesign - Color System
 * Based on Rose + Stone palettes from Tailwind CSS
 */
:root {
  --rose-950: #881337;
  --rose-900: #9f1239;
  --rose-800: #be123c;
  --rose-700: #e11d48;
  --rose-600: #f43f5e;
  --rose-500: #fb7185;
  --rose-400: #fda4af;
  --rose-300: #fecdd3;
  --rose-200: #ffe4e6;
  --rose-100: #fff1f2;
  --rose-50: #fff1f2;
  --stone-850: #292524;
  --stone-800: #1c1917;
  --stone-700: #44403c;
  --stone-600: #57534e;
  --stone-500: #78716c;
  --stone-400: #a8a29e;
  --stone-300: #d6d3d1;
  --stone-200: #e7e5e4;
  --stone-100: #f5f5f4;
  --stone-50: #fafaf9; }

/**
 * HerHealth Redesign - Typography System
 * Fonts: Inter (sans-serif) + Playfair Display (serif)
 */
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

/**
 * HerHealth Redesign - Spacing System
 * Based on 4px grid system
 */
/**
 * HerHealth Redesign - Responsive Breakpoints
 * Matches Tailwind CSS breakpoints
 */
.herhealth-top-banner {
  background-color: #881337;
  color: #fff1f2;
  font-size: 0.75rem;
  padding: 0.5rem 1rem; }
  @media (min-width: 640px) {
    .herhealth-top-banner {
      padding: 0.5rem 2rem; } }
  .herhealth-top-banner .banner-container {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem; }
    @media (min-width: 640px) {
      .herhealth-top-banner .banner-container {
        flex-direction: row; } }
  .herhealth-top-banner .banner-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    letter-spacing: 0.025em;
    font-weight: 500; }
    .herhealth-top-banner .banner-item svg {
      width: 14px;
      height: 14px;
      color: #ffe4e6;
      flex-shrink: 0; }
  .herhealth-top-banner .banner-divider {
    display: none;
    color: #be123c;
    margin: 0 0.5rem; }
    @media (min-width: 640px) {
      .herhealth-top-banner .banner-divider {
        display: inline; } }
  .herhealth-top-banner a {
    display: none;
    color: inherit;
    text-decoration: none;
    transition: color 150ms ease; }
    @media (min-width: 640px) {
      .herhealth-top-banner a {
        display: inline; } }
    .herhealth-top-banner a:hover {
      color: white; }

.herhealth-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid #f5f5f4;
  transition: all 300ms ease; }
  .herhealth-header.scrolled {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
  .herhealth-header .header-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem; }
    @media (min-width: 640px) {
      .herhealth-header .header-container {
        padding: 0 2rem; } }
  .herhealth-header .header-main-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
    gap: 1rem; }
    @media (min-width: 640px) {
      .herhealth-header .header-main-row {
        gap: 2rem; } }
  .herhealth-header .mobile-menu-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    margin-left: -0.5rem;
    color: #57534e;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 150ms ease; }
    .herhealth-header .mobile-menu-button:hover {
      color: #9f1239; }
    .herhealth-header .mobile-menu-button svg {
      width: 24px;
      height: 24px; }
    @media (min-width: 1024px) {
      .herhealth-header .mobile-menu-button {
        display: none; } }
  .herhealth-header .header-logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    text-decoration: none; }
    .herhealth-header .header-logo .logo-image {
      height: 32px;
      width: auto; }
  .herhealth-header .header-search {
    display: none;
    flex: 1;
    max-width: 512px;
    margin: 0 auto;
    position: relative; }
    @media (min-width: 640px) {
      .herhealth-header .header-search {
        display: flex; } }
    .herhealth-header .header-search input {
      width: 100%;
      background-color: #fafaf9;
      border: 1px solid #e7e5e4;
      color: #44403c;
      border-radius: 9999px;
      padding: 0.625rem 1.25rem;
      padding-right: 3rem;
      font-weight: 300;
      font-size: 0.875rem;
      transition: all 200ms ease; }
      .herhealth-header .header-search input::placeholder {
        color: #a8a29e; }
      .herhealth-header .header-search input:focus {
        outline: none;
        box-shadow: 0 0 0 2px #ffe4e6;
        border-color: #fecdd3; }
    .herhealth-header .header-search .search-button {
      position: absolute;
      right: 0.5rem;
      top: 0.375rem;
      padding: 0.375rem;
      background-color: #9f1239;
      color: white;
      border: none;
      border-radius: 9999px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background-color 150ms ease; }
      .herhealth-header .header-search .search-button:hover {
        background-color: #be123c; }
      .herhealth-header .header-search .search-button svg {
        width: 16px;
        height: 16px; }
  .herhealth-header .header-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem; }
    @media (min-width: 640px) {
      .herhealth-header .header-actions {
        gap: 1rem; } }
  .herhealth-header .action-button {
    position: relative;
    padding: 0.5rem;
    color: #78716c;
    background: none;
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    transition: all 200ms ease;
    text-decoration: none; }
    .herhealth-header .action-button:hover {
      color: #e11d48;
      background-color: #fff1f2; }
    .herhealth-header .action-button svg {
      width: 22px;
      height: 22px;
      stroke-width: 1.5; }
    .herhealth-header .action-button .action-label {
      display: none;
      font-size: 10px;
      font-weight: 500;
      color: inherit; }
      @media (min-width: 768px) {
        .herhealth-header .action-button .action-label {
          display: block; } }
    .herhealth-header .action-button .cart-badge {
      position: absolute;
      top: 0.25rem;
      right: 0.25rem;
      min-width: 18px;
      height: 18px;
      padding: 0 0.25rem;
      background-color: #fb7185;
      color: white;
      border-radius: 9999px;
      border: 2px solid white;
      font-size: 10px;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1; }
  .herhealth-header .actions-divider {
    display: none;
    width: 1px;
    height: 32px;
    background-color: #e7e5e4;
    margin: 0 0.25rem; }
    @media (min-width: 768px) {
      .herhealth-header .actions-divider {
        display: block; } }
  .herhealth-header .language-button {
    padding: 0.5rem;
    color: #78716c;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    transition: color 150ms ease; }
    .herhealth-header .language-button:hover {
      color: #1c1917; }
    .herhealth-header .language-button svg {
      width: 18px;
      height: 18px;
      stroke-width: 1.5; }
    .herhealth-header .language-button .lang-code {
      font-size: 0.75rem;
      font-weight: 500; }
    .herhealth-header .language-button .chevron {
      width: 12px;
      height: 12px; }
  .herhealth-header .header-nav {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    padding-bottom: 0; }
    @media (min-width: 1024px) {
      .herhealth-header .header-nav {
        display: flex; } }
    .herhealth-header .header-nav a {
      color: #57534e;
      font-weight: 500;
      font-size: 0.875rem;
      text-decoration: none;
      padding: 1rem 0;
      border-bottom: 2px solid transparent;
      transition: all 200ms ease; }
      .herhealth-header .header-nav a:hover {
        color: #9f1239;
        border-bottom-color: #fecdd3; }
  .herhealth-header .mobile-menu-overlay {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: white;
    border-bottom: 1px solid #e7e5e4;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    padding: 1rem 1.5rem; }
    @media (min-width: 1024px) {
      .herhealth-header .mobile-menu-overlay {
        display: none; } }
    .herhealth-header .mobile-menu-overlay.hidden {
      display: none; }
    .herhealth-header .mobile-menu-overlay .mobile-search {
      display: block;
      position: relative;
      margin-bottom: 1rem; }
      @media (min-width: 640px) {
        .herhealth-header .mobile-menu-overlay .mobile-search {
          display: none; } }
      .herhealth-header .mobile-menu-overlay .mobile-search input {
        width: 100%;
        background-color: #fafaf9;
        border: 1px solid #e7e5e4;
        border-radius: 0.75rem;
        padding: 0.5rem 1rem;
        padding-right: 2.5rem;
        font-size: 0.875rem;
        color: #44403c; }
        .herhealth-header .mobile-menu-overlay .mobile-search input:focus {
          outline: none;
          box-shadow: 0 0 0 1px #fecdd3; }
        .herhealth-header .mobile-menu-overlay .mobile-search input::placeholder {
          color: #a8a29e; }
      .herhealth-header .mobile-menu-overlay .mobile-search svg {
        position: absolute;
        right: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        width: 16px;
        height: 16px;
        color: #a8a29e; }
    .herhealth-header .mobile-menu-overlay nav {
      display: flex;
      flex-direction: column;
      gap: 0; }
      .herhealth-header .mobile-menu-overlay nav a {
        color: #44403c;
        font-weight: 500;
        text-decoration: none;
        padding: 0.75rem 0;
        border-bottom: 1px solid #f5f5f4;
        transition: color 150ms ease;
        font-size: 0.875rem; }
        .herhealth-header .mobile-menu-overlay nav a:hover {
          color: #e11d48; }
        .herhealth-header .mobile-menu-overlay nav a:last-child {
          border-bottom: none; }

.account-dropdown {
  position: relative; }
  .account-dropdown:hover .dropdown-menu {
    display: block; }
  .account-dropdown .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    min-width: 200px;
    background-color: white;
    border-radius: 0.75rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border: 1px solid #f5f5f4;
    padding: 0.5rem 0;
    z-index: 100; }
    .account-dropdown .dropdown-menu a {
      display: block;
      padding: 0.75rem 1rem;
      color: #44403c;
      text-decoration: none;
      font-size: 0.875rem;
      font-weight: 500;
      transition: all 150ms ease; }
      .account-dropdown .dropdown-menu a:hover {
        background-color: #fff1f2;
        color: #9f1239; }
      .account-dropdown .dropdown-menu a:first-child {
        border-top-left-radius: 0.75rem;
        border-top-right-radius: 0.75rem; }
      .account-dropdown .dropdown-menu a:last-child {
        border-bottom-left-radius: 0.75rem;
        border-bottom-right-radius: 0.75rem; }

.language-dropdown {
  position: relative; }
  .language-dropdown:hover .language-menu {
    display: block; }
  .language-dropdown .language-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    min-width: 180px;
    background-color: white;
    border-radius: 0.75rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border: 1px solid #f5f5f4;
    padding: 0.5rem 0;
    z-index: 100; }
    .language-dropdown .language-menu a {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.75rem 1rem;
      color: #44403c;
      text-decoration: none;
      font-size: 0.875rem;
      font-weight: 400;
      transition: all 150ms ease; }
      .language-dropdown .language-menu a img {
        width: 20px;
        height: 14px;
        object-fit: cover;
        border-radius: 2px; }
      .language-dropdown .language-menu a:hover {
        background-color: #fff1f2;
        color: #9f1239; }
      .language-dropdown .language-menu a.active {
        font-weight: 600;
        color: #9f1239; }
/**
/**
 */
/**
 * HerHealth Redesign - Footer Component
 * Pixel-perfect implementation matching sample design
 */
/**
 * HerHealth Redesign - Color System
 * Based on Rose + Stone palettes from Tailwind CSS
 */
:root {
  --rose-950: #881337;
  --rose-900: #9f1239;
  --rose-800: #be123c;
  --rose-700: #e11d48;
  --rose-600: #f43f5e;
  --rose-500: #fb7185;
  --rose-400: #fda4af;
  --rose-300: #fecdd3;
  --rose-200: #ffe4e6;
  --rose-100: #fff1f2;
  --rose-50: #fff1f2;
  --stone-850: #292524;
  --stone-800: #1c1917;
  --stone-700: #44403c;
  --stone-600: #57534e;
  --stone-500: #78716c;
  --stone-400: #a8a29e;
  --stone-300: #d6d3d1;
  --stone-200: #e7e5e4;
  --stone-100: #f5f5f4;
  --stone-50: #fafaf9; }

/**
 * HerHealth Redesign - Typography System
 * Fonts: Inter (sans-serif) + Playfair Display (serif)
 */
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

/**
 * HerHealth Redesign - Spacing System
 * Based on 4px grid system
 */
/**
 * HerHealth Redesign - Responsive Breakpoints
 * Matches Tailwind CSS breakpoints
 */
.herhealth-footer {
  background-color: white;
  padding-top: 4rem;
  border-top: 1px solid #f5f5f4; }
  .herhealth-footer .footer-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem; }
    @media (min-width: 640px) {
      .herhealth-footer .footer-container {
        padding: 0 2rem; } }
.newsletter-section {
  background-color: #881337 !important;
  border-radius: 1.5rem !important;
  padding: 2rem !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 20px 25px -5px rgba(136, 19, 55, 0.1), 0 10px 10px -5px rgba(136, 19, 55, 0.04) !important;
  margin-bottom: 4rem !important;
  text-align: center !important; }
  @media (min-width: 640px) {
    .newsletter-section {
      padding: 3rem !important;
      text-align: left !important; } }
  .newsletter-section::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 256px !important;
    height: 256px !important;
    background-color: #be123c !important;
    border-radius: 9999px !important;
    mix-blend-mode: overlay !important;
    filter: blur(48px) !important;
    opacity: 0.2 !important;
    transform: translate(50%, -50%) !important; }
  .newsletter-section::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 256px !important;
    height: 256px !important;
    background-color: #881337 !important;
    border-radius: 9999px !important;
    mix-blend-mode: multiply !important;
    filter: blur(48px) !important;
    opacity: 0.4 !important;
    transform: translate(-50%, 50%) !important; }
  .newsletter-section .newsletter-content {
    position: relative !important;
    z-index: 10 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2rem !important; }
    @media (min-width: 1024px) {
      .newsletter-section .newsletter-content {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 3rem !important; } }
  .newsletter-section .newsletter-text {
    max-width: 576px !important; }
    .newsletter-section .newsletter-text h2 {
      font-family: "Playfair Display", Georgia, serif !important;
      font-size: 1.875rem !important;
      color: #FFFFFF !important;
      margin-bottom: 0.75rem !important;
      font-weight: 400 !important;
      line-height: 1.2 !important; }
      @media (min-width: 640px) {
        .newsletter-section .newsletter-text h2 {
          font-size: 2.25rem !important; } }
      @media (min-width: 1024px) {
        .newsletter-section .newsletter-text h2 {
          font-size: 3rem !important; } }
    .newsletter-section .newsletter-text p {
      color: #ffe4e6 !important;
      font-size: 1.125rem !important;
      font-weight: 300 !important;
      line-height: 1.625 !important; }
  .newsletter-section .newsletter-form-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    width: 100% !important; }
    @media (min-width: 640px) {
      .newsletter-section .newsletter-form-wrapper {
        width: auto !important;
        flex-shrink: 0 !important; } }
  .newsletter-section .newsletter-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important; }
    @media (min-width: 640px) {
      .newsletter-section .newsletter-form {
        flex-direction: row !important;
        gap: 0.75rem !important; } }
    .newsletter-section .newsletter-form .newsletter-input {
      flex: 1 !important;
      padding: 0.875rem 1.5rem !important;
      border-radius: 9999px !important;
      background-color: rgba(136, 19, 55, 0.4) !important;
      border: 1px solid #e11d48 !important;
      color: white !important;
      backdrop-filter: blur(4px) !important;
      transition: all 200ms ease !important;
      font-size: 1rem !important;
      width: 100% !important; }
      @media (min-width: 640px) {
        .newsletter-section .newsletter-form .newsletter-input {
          width: 320px !important; } }
      .newsletter-section .newsletter-form .newsletter-input::placeholder {
        color: rgba(253, 164, 175, 0.7) !important; }
      .newsletter-section .newsletter-form .newsletter-input:focus {
        outline: none !important;
        border-color: #FB7185 !important;
        box-shadow: 0 0 0 2px #FB7185 !important; }
    .newsletter-section .newsletter-form .newsletter-button {
      padding: 0.875rem 2rem !important;
      background-color: white !important;
      color: #912546 !important;
      font-weight: 700 !important;
      letter-spacing: 0.05em !important;
      font-size: 0.875rem !important;
      border-radius: 9999px !important;
      border: none !important;
      cursor: pointer !important;
      transition: all 200ms ease !important;
      white-space: nowrap !important;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important; }
      .newsletter-section .newsletter-form .newsletter-button:hover {
        background-color: #fff1f2 !important;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1) !important;
        transform: translateY(-2px) !important; }
  .newsletter-section .newsletter-privacy {
    color: rgba(253, 164, 175, 0.6) !important;
    font-size: 0.75rem !important;
    line-height: 1rem !important;
    text-align: center !important;
    padding-left: 1rem !important;
    margin-top: 0.75rem !important; }
    @media (min-width: 640px) {
      .newsletter-section .newsletter-privacy {
        text-align: left !important; } }
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem; }
  @media (min-width: 768px) {
    .footer-grid {
      grid-template-columns: repeat(4, 1fr); } }
  @media (min-width: 1024px) {
    .footer-grid {
      grid-template-columns: 2fr 1fr 1fr 1fr; } }
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 1.5rem; }
  .footer-brand .footer-logo {
    display: flex;
    align-items: center; }
    .footer-brand .footer-logo .logo-image {
      height: 28px;
      width: auto; }
  .footer-brand p {
    color: #78716c;
    font-size: 0.875rem;
    line-height: 1.625;
    max-width: 320px; }

.footer-column h3, .footer-column h5 {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1c1917;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em; }

.footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem; }
  .footer-column ul li a {
    color: #57534e;
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 200ms ease; }
    .footer-column ul li a:hover {
      color: #e11d48; }

.footer-bottom-section {
  border-top: 1px solid #f5f5f4;
  padding: 1.5rem 0;
  margin-top: 3rem; }

.trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  margin-bottom: 1.5rem; }
  @media (min-width: 768px) {
    .trust-badges {
      justify-content: flex-start; } }
  .trust-badges .trust-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #57534e;
    font-size: 0.75rem; }
    .trust-badges .trust-badge svg {
      width: 20px;
      height: 20px;
      color: #78716c; }

.footer-copyright {
  text-align: center;
  color: #78716c;
  font-size: 0.75rem; }
  @media (min-width: 768px) {
    .footer-copyright {
      text-align: left; } }
.social-links {
  display: flex;
  gap: 0.25rem; }
  .social-links .social-link {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: #f5f5f4;
    color: #57534e;
    transition: all 200ms ease; }
    .social-links .social-link:hover {
      background-color: #fff1f2;
      color: #e11d48; }
    .social-links .social-link svg {
      width: 16px;
      height: 16px; }
/**
 * HerHealth Redesign - Color System
 * Based on Rose + Stone palettes from Tailwind CSS
 */
:root {
  --rose-950: #881337;
  --rose-900: #9f1239;
  --rose-800: #be123c;
  --rose-700: #e11d48;
  --rose-600: #f43f5e;
  --rose-500: #fb7185;
  --rose-400: #fda4af;
  --rose-300: #fecdd3;
  --rose-200: #ffe4e6;
  --rose-100: #fff1f2;
  --rose-50: #fff1f2;
  --stone-850: #292524;
  --stone-800: #1c1917;
  --stone-700: #44403c;
  --stone-600: #57534e;
  --stone-500: #78716c;
  --stone-400: #a8a29e;
  --stone-300: #d6d3d1;
  --stone-200: #e7e5e4;
  --stone-100: #f5f5f4;
  --stone-50: #fafaf9; }

/**
 * HerHealth Redesign - Typography System
 * Fonts: Inter (sans-serif) + Playfair Display (serif)
 */
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

/**
 * HerHealth Redesign - Spacing System
 * Based on 4px grid system
 */
/**
 * HerHealth Redesign - Responsive Breakpoints
 * Matches Tailwind CSS breakpoints
 */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
  color: #78716c; }
  .breadcrumb a {
    color: #78716c;
    text-decoration: none;
    transition: color 200ms ease; }
    .breadcrumb a:hover {
      color: #e11d48; }
  .breadcrumb .separator,
  .breadcrumb li::after {
    color: #a8a29e;
    margin: 0 0.25rem;
    content: "›"; }
  .breadcrumb .current,
  .breadcrumb li:last-child {
    color: #e11d48; }
  .breadcrumb ol, .breadcrumb ul {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0; }
  .breadcrumb li {
    display: inline-flex;
    align-items: center; }

.page-header {
  margin-bottom: 2rem; }
  .page-header h1 {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 3rem;
    font-weight: 400;
    color: #1c1917;
    margin-bottom: 1rem;
    line-height: 1.2; }
    @media (min-width: 640px) {
      .page-header h1 {
        font-size: 3.5rem; } }
    @media (min-width: 1024px) {
      .page-header h1 {
        font-size: 4rem; } }
.page-title-wrapper {
  background-color: #fafaf9;
  padding: 2rem 0;
  margin-bottom: 0; }
  @media (min-width: 1024px) {
    .page-title-wrapper {
      padding: 3rem 0; } }
  .page-title-wrapper .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem; }
    @media (min-width: 640px) {
      .page-title-wrapper .container {
        padding: 0 2rem; } }
  .page-title-wrapper .breadcrumb {
    margin-bottom: 1.5rem; }
  .page-title-wrapper .page-header {
    margin-bottom: 0; }
    .page-title-wrapper .page-header h1 {
      font-family: "Playfair Display", Georgia, serif;
      font-size: 2.5rem;
      font-weight: 400;
      color: #1c1917;
      margin: 0;
      line-height: 1.2; }
      @media (min-width: 640px) {
        .page-title-wrapper .page-header h1 {
          font-size: 3rem; } }
      @media (min-width: 1024px) {
        .page-title-wrapper .page-header h1 {
          font-size: 3.5rem; } }
@media (max-width: 639px) {
  .page-header h1 {
    font-size: 2.5rem; }
  .page-title-wrapper .page-header h1 {
    font-size: 2rem; } }
/**
 * HerHealth Redesign - My Account Page
 * Pixel-perfect implementation matching sample design
 */
/**
 * HerHealth Redesign - Color System
 * Based on Rose + Stone palettes from Tailwind CSS
 */
:root {
  --rose-950: #881337;
  --rose-900: #9f1239;
  --rose-800: #be123c;
  --rose-700: #e11d48;
  --rose-600: #f43f5e;
  --rose-500: #fb7185;
  --rose-400: #fda4af;
  --rose-300: #fecdd3;
  --rose-200: #ffe4e6;
  --rose-100: #fff1f2;
  --rose-50: #fff1f2;
  --stone-850: #292524;
  --stone-800: #1c1917;
  --stone-700: #44403c;
  --stone-600: #57534e;
  --stone-500: #78716c;
  --stone-400: #a8a29e;
  --stone-300: #d6d3d1;
  --stone-200: #e7e5e4;
  --stone-100: #f5f5f4;
  --stone-50: #fafaf9; }

/**
 * HerHealth Redesign - Typography System
 * Fonts: Inter (sans-serif) + Playfair Display (serif)
 */
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

/**
 * HerHealth Redesign - Spacing System
 * Based on 4px grid system
 */
/**
 * HerHealth Redesign - Responsive Breakpoints
 * Matches Tailwind CSS breakpoints
 */
/**
/**
/**
 * HerHealth Redesign - My Account Page
 * Pixel-perfect implementation matching sample design
 */
/**
 * HerHealth Redesign - Color System
 * Based on Rose + Stone palettes from Tailwind CSS
 */
:root {
  --rose-950: #881337;
  --rose-900: #9f1239;
  --rose-800: #be123c;
  --rose-700: #e11d48;
  --rose-600: #f43f5e;
  --rose-500: #fb7185;
  --rose-400: #fda4af;
  --rose-300: #fecdd3;
  --rose-200: #ffe4e6;
  --rose-100: #fff1f2;
  --rose-50: #fff1f2;
  --stone-850: #292524;
  --stone-800: #1c1917;
  --stone-700: #44403c;
  --stone-600: #57534e;
  --stone-500: #78716c;
  --stone-400: #a8a29e;
  --stone-300: #d6d3d1;
  --stone-200: #e7e5e4;
  --stone-100: #f5f5f4;
  --stone-50: #fafaf9; }

/**
 * HerHealth Redesign - Typography System
 * Fonts: Inter (sans-serif) + Playfair Display (serif)
 */
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

/**
 * HerHealth Redesign - Spacing System
 * Based on 4px grid system
 */
/**
 * HerHealth Redesign - Responsive Breakpoints
 * Matches Tailwind CSS breakpoints
 */
#my-account {
  background-color: #fafaf9;
  min-height: 600px;
  padding-bottom: 4rem; }

.herhealth-my-account {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem; }
  @media (min-width: 640px) {
    .herhealth-my-account {
      padding: 0 2rem; } }
  @media (min-width: 1024px) {
    .herhealth-my-account {
      padding: 0 2rem; } }
.my-account-header {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-bottom: 4rem;
  padding-top: 2rem; }
  @media (min-width: 1024px) {
    .my-account-header {
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
      padding-top: 3rem; } }
.my-account-title-section {
  flex: 1; }
  .my-account-title-section .breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
    color: #78716c; }
    .my-account-title-section .breadcrumb a {
      color: #78716c;
      text-decoration: none;
      transition: color 200ms ease; }
      .my-account-title-section .breadcrumb a:hover {
        color: #e11d48; }
    .my-account-title-section .breadcrumb .separator {
      color: #a8a29e;
      margin: 0 0.25rem; }
    .my-account-title-section .breadcrumb .current {
      color: #e11d48; }
  .my-account-title-section h1 {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 3rem;
    font-weight: 400;
    color: #1c1917;
    margin-bottom: 1rem;
    line-height: 1.2; }
    @media (min-width: 640px) {
      .my-account-title-section h1 {
        font-size: 3.5rem; } }
    @media (min-width: 1024px) {
      .my-account-title-section h1 {
        font-size: 4rem; } }
  .my-account-title-section .subtitle {
    color: #78716c;
    font-size: 1.125rem;
    line-height: 1.625;
    font-weight: 300; }

.my-account-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem; }
  @media (min-width: 640px) {
    .my-account-grid {
      grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) {
    .my-account-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 2.5rem; } }
.account-link-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  background-color: white;
  border: 1px solid #f5f5f4;
  border-radius: 1.5rem;
  text-decoration: none;
  transition: all 200ms ease;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
  min-height: 240px; }
  .account-link-card:hover {
    border-color: #fecdd3;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    transform: translateY(-4px); }
    .account-link-card:hover .icon-circle {
      background-color: #fff1f2;
      border-color: #fecdd3; }
      .account-link-card:hover .icon-circle svg {
        color: #e11d48; }
    .account-link-card:hover .link-text {
      color: #e11d48; }
  .account-link-card .icon-circle {
    width: 96px;
    height: 96px;
    border-radius: 9999px;
    background-color: #fafaf9;
    border: 1px solid #e7e5e4;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    transition: all 200ms ease; }
    .account-link-card .icon-circle svg {
      width: 40px;
      height: 40px;
      color: #78716c;
      stroke-width: 1.5;
      transition: color 200ms ease; }
  .account-link-card .link-text {
    font-size: 1.125rem;
    font-weight: 500;
    color: #44403c;
    text-align: center;
    transition: color 200ms ease;
    line-height: 1.4;
    max-width: 200px; }

@media (max-width: 639px) {
  .my-account-title-section h1 {
    font-size: 2.5rem; }
  .account-link-card {
    min-height: 200px;
    padding: 3rem 1.5rem; } }

#my-account #content-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important; }

#my-account #left-column,
#my-account #right-column {
  display: none !important; }

#my-account .row-wrapper {
  display: block !important; }

#my-account #main,
#my-account .page-content,
#my-account #content {
  padding-top: 0 !important;
  padding-bottom: 0 !important; }