/** Shopify CDN: Minification failed

Line 306:0 Unexpected "}"
Line 790:0 Expected "}" to go with "{"

**/
/** 
 * Critical CSS for AVA Health theme
 * This file contains all global styles, variables, and reusable components
 */

/* ============================================
   CSS VARIABLES (Design Tokens)
   ============================================ */
:root {
  /* Colors */
  --color-main: #2d1b2e;
  --color-main-hover: #3d2b3e;
  --color-background: #ffffff;
  --color-background-alt: #f5f5f5;
  --color-text-primary: #150d15;
  --color-text-secondary: #3d2b3e;
  --color-text-light: #999999;
  --color-accent: #e8f5ee;
  --color-accent-dark: #0b2510;
  --color-border: #e5e5e5;
  --color-success: #10b981;
  --color-error: #ef4444;
  
  /* Typography - Font variables are defined in snippets/css-variables.liquid from theme settings */
  /* DO NOT define --font-heading--family or --font-heading--weight here - they come from Shopify theme settings */
  
  /* Section spacing - ONE PLACE TO CONTROL ALL SECTIONS */
  --section-padding-desktop: 40px;
  --section-padding-mobile: 20px;
  --container-max-width: 1200px;
  --container-padding-desktop: 20px;
  --container-padding-mobile: 10px;
  
  /* Vertical spacing between elements inside sections */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 40px;
  --spacing-xl: 60px;
  
  /* Component sizing */
  --button-padding: 16px 32px;
  --button-border-radius: 8px;
  --card-border-radius: 12px;
  --input-border-radius: 8px;
  
  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-medium: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* Z-index scale */
  --z-index-dropdown: 100;
  --z-index-modal: 200;
  --z-index-header: 300;
  
  /* Mobile breakpoints */
  --breakpoint-mobile: 768px;
  --breakpoint-tablet: 1024px;
  
  /* Legacy support */
  --page-width: 1400px;
  --page-margin: 20px;
  --style-border-radius: 8px;
  --style-border-radius-inputs: 8px;
  --color-foreground: var(--color-text-primary);
  --scroll-padding-top: 80px;
}

/* Reset styles inspired by https://www.joshwcomeau.com/css/custom-css-reset/ */
* {
  box-sizing: border-box;
  margin: 0;
}

html {
  overflow-x: hidden;
  max-width: 100vw;
  scroll-padding-top: var(--scroll-padding-top, 80px);
}

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 100svh;
  position: relative;
  width: 100%;
  max-width: 100vw;
}

html:has(dialog[scroll-lock][open], details[scroll-lock][open]) {
  overflow: hidden;
}

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

input,
textarea,
select {
  font: inherit;
  border-radius: var(--style-border-radius-inputs);
}

select {
  background-color: var(--color-background);
  color: currentcolor;
}

dialog {
  background-color: var(--color-background);
  color: var(--color-foreground);
}

p {
  text-wrap: pretty;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

p:empty {
  display: none;
}

:is(p, h1, h2, h3, h4, h5, h6):first-child,
:empty:first-child + :where(p, h1, h2, h3, h4, h5, h6) {
  margin-block-start: 0;
}

:is(p, h1, h2, h3, h4, h5, h6):last-child,
:where(p, h1, h2, h3, h4, h5, h6) + :has(+ :empty:last-child) {
  margin-block-end: 0;
}

/** Theme styles below */
body {
  font-family: var(--font-body--family);
  background-color: var(--color-background);
  color: var(--color-foreground);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}

/* AVA Health – grainy overlay (soft film-grain effect) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  mix-blend-mode: overlay;
}

/* Ensure main content stacks above grain */
#page-transition-content,
.shopify-section {
  position: relative;
  z-index: 1;
}

/* AVA Health – glass effect utility (blur + soft border) */
.glass,
.ava-glass {
  background: var(--glass-bg, rgba(255, 255, 255, 0.65));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border, rgba(232, 196, 204, 0.35));
  border-radius: var(--style-border-radius, 4px);
}

/* ============================================
   GLOBAL TYPOGRAPHY
   ============================================ */

/* Headings – Poppins Semi-bold (600) with tight letter-spacing */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading--family);
  font-weight: var(--font-heading--weight);
  line-height: 1.2;
  letter-spacing: var(--font-heading--letter-spacing);
  color: var(--color-text-primary);
  margin: 0;
}

/* H1 - Page titles */
h1 {
  font-size: 48px;
  margin-bottom: 20px;
}

/* H2 - Section titles (THIS IS THE MAIN ONE) */
h2 {
  font-size: 36px;
  margin-bottom: 20px !important;
}

/* H3 - Subsection titles */
h3 {
  font-size: 18px;
  margin-bottom: 10px;
}

/* H4, H5, H6 - Smaller headings */
h4 {
  font-size: 20px;
  margin-bottom: 10px;
}

h5, h6 {
  font-size: 16px;
  margin-bottom: 10px;
}

/* Mobile typography - ONE PLACE TO CONTROL ALL HEADLINES */
@media (max-width: 768px) {
  h1 {
    font-size: 28px !important;
    margin-bottom: 10px;
  }
  
  h2 {
    font-size: 26px !important;
    margin-bottom: 10px;
  }
  
  h3 {
    font-size: 18px !important;
    margin-bottom: 10px;
  }
  
  h4, h5, h6 {
    font-size: 16px !important;
    margin-bottom: 10px;
  }
}

/* Paragraphs - Base body text */
p {
  font-family: var(--font-body--family);
  font-size: 16px !important;
  line-height: 1.5 !important;
  margin: 0 0 1em !important;
  color: var(--color-text-primary);
}

p:last-child {
  margin-bottom: 0 !important;
}

/* Mobile paragraphs */
@media (max-width: 768px) {
  p {
    font-size: 14px !important;
  }
}

/* Subtitle/Lead text - Larger than body, used for section descriptions */
.text-subtitle,
.text-lead,
p.subtitle,
div.subtitle,
p[class*="subtitle"],
div[class*="subtitle"] {
  font-size: 18px !important;
  line-height: 1.4 !important;
  color: var(--color-text-secondary) !important;
  margin-bottom: 20px !important;
  font-weight: 500 !important;
}

/* Subtitle divs should also control their paragraph children */
div.subtitle p,
div[class*="subtitle"] p {
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: var(--color-text-secondary) !important;
}
}

/* Small text - For fine print, captions, helper text */
.text-small,
small,
p.small,
p[class*="small"] {
  font-size: 12px !important;
  line-height: 1.5 !important;
  color: var(--color-text-secondary) !important;
}

/* Tiny text - For legal, footnotes, very small labels */
.text-tiny,
p.tiny {
  font-size: 10px !important;
  line-height: 1.4 !important;
  color: var(--color-text-secondary);
}

/* Mobile typography */
@media (max-width: 768px) {
  .text-subtitle,
  .text-lead,
  p.subtitle,
  div.subtitle,
  p[class*="subtitle"],
  div[class*="subtitle"],
  div.subtitle p,
  div[class*="subtitle"] p {
    font-size: 16px !important;
  }
  
  .text-small,
  small,
  p.small,
  p[class*="small"] {
    font-size: 11px !important;
  }
}

/* Links */
a {
  color: var(--color-text-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: opacity 0.2s ease;
}

a:hover {
  opacity: 0.7;
}

/* Strong/Bold */
strong,
b {
  font-weight: 700;
  color: var(--color-text-primary);
}

/* Emphasis */
em,
i {
  font-style: italic;
}

/* Prices – use main color for all price display */
.price,
[class*="price"] {
  color: var(--color-text-primary);
  font-family: var(--font-heading--family);
  font-weight: var(--font-heading--weight);
  font-size: 0.875rem;
  letter-spacing: var(--font-heading--letter-spacing);
}

/* Buttons - Global styling */
button,
.button,
[type="submit"] {
  font-family: var(--font-heading--family);
  font-size: 0.75rem;
  font-weight: var(--font-heading--weight);
}

/* Input fields */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea,
select {
  font-family: var(--font-body--family);
  font-size: 0.875rem;
}

/* Small text */
small,
.text-small {
  font-size: 0.75rem;
}

/* Uppercase utility */
.text-uppercase {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ============================================
   GLOBAL UTILITIES
   ============================================ */

/* Max-width container */
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
}

@media (max-width: 768px) {
  .container {
    padding: 0 1rem;
  }
}

/* Spacing utilities */
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 2rem; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 2rem; }

/** Section layout utilities */

/**
 * Setup a grid that enables both full-width and constrained layouts
 * depending on the class of the child elements.
 *
 * By default, a minimum content margin is set on the left and right
 * sides of the section and the content is centered in the viewport to
 * not exceed the maximum page width.
 *
 * When a child element is given the `full-width` class, it will span
 * the entire viewport.
 */
.shopify-section {
  --content-width: min(
    calc(var(--page-width) - var(--page-margin) * 2),
    calc(100% - var(--page-margin) * 2)
  );
  --content-margin: minmax(var(--page-margin), 1fr);
  --content-grid: var(--content-margin) var(--content-width) var(--content-margin);

  /* This is required to make <img> elements work as background images */
  position: relative;
  grid-template-columns: var(--content-grid);
  display: grid;
  width: 100%;
  
  /* Ensure no extra padding/margin from Shopify wrapper */
  margin: 0;
  padding: 0;
}

/* Child elements, by default, are constrained to the central column of the grid. */
.shopify-section > * {
  grid-column: 2;
}

/* Child elements that use the full-width utility class span the entire viewport. */
.shopify-section > .full-width {
  grid-column: 1 / -1;
}

/* Mobile: no grid – full width, sections handle their own padding if needed */
@media (max-width: 749px) {
  .shopify-section {
    display: block;
    width: 100%;
  }
  .shopify-section > * {
    max-width: none;
  }
}

/* Policy pages: spacing for Shopify's policy container */
.shopify-policy__container {
  padding-top: 50px;
  padding-bottom: 50px;
}

/* ============================================
   GLOBAL BUTTON STYLES
   ============================================ */

/* Primary button (main CTA) */
.btn,
.button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--button-padding);
  background: var(--color-main);
  color: #ffffff;
  font-family: var(--font-heading--family);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--button-border-radius);
  border: none;
  cursor: pointer;
  transition: all var(--transition-medium);
  white-space: nowrap;
}

.btn:hover,
.button-primary:hover {
  background: var(--color-main-hover);
  transform: translateY(-2px);
  opacity: 1;
}

/* Secondary button */
.button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--button-padding);
  background: transparent;
  color: var(--color-main);
  font-family: var(--font-heading--family);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--button-border-radius);
  border: 2px solid var(--color-main);
  cursor: pointer;
  transition: all var(--transition-medium);
}

.button-secondary:hover {
  background: var(--color-main);
  color: #ffffff;
  transform: translateY(-2px);
  opacity: 1;
}

/* Mobile: full width buttons */
@media (max-width: 768px) {
  .btn,
  .button-primary,
  .button-secondary {
    width: 100%;
    padding: 16px;
  }
}

/* ============================================
   SECTION CONTAINERS
   ============================================ */

/* Global section padding - ONE PLACE TO CONTROL ALL SECTIONS */
section.full-width {
  padding: 40px 0;
  width: 100%;
}

@media (max-width: 768px) {
  section.full-width {
    padding: var(--section-padding-mobile) var(--container-padding-mobile);
  }
}

/* Section inner container (max-width + centered) */
.section-container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding-desktop);
}

@media (max-width: 768px) {
  .section-container {
    padding: 0 var(--container-padding-mobile);
  }
}

/* ============================================
   TYPOGRAPHY UTILITIES
   ============================================ */

/* RTE (Rich Text Editor) content wrapper */
.rte p,
.body-text p {
  font-size: inherit;
  line-height: inherit;
  margin: 0 0 1em;
}

.rte p:last-child,
.body-text p:last-child {
  margin-bottom: 0;
}

.rte strong,
.body-text strong {
  font-weight: 700;
}

/* Text color utilities */
.text-primary {
  color: var(--color-text-primary);
}

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

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

/* ============================================
   SECTION CONTAINERS
   ============================================ */

/* Checkmark item (used in multiple sections) */
.check-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.check-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-main);
  display: flex;
  align-items: center;
  justify-content: center;
}

.check-icon svg {
  width: 14px;
  height: 14px;
}

.check-text {
  font-family: var(--font-body--family);
  font-size: 16px;
  color: var(--color-text-primary);
  line-height: 1.5;
  flex: 1;
}

@media (max-width: 768px) {
  .check-text {
    font-size: 14px;
  }
}

/* Button + guarantee (keep guarantee under button, centered to button) */
.button-with-guarantee {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* Money-back guarantee / subtext (below buttons) – identical everywhere */
.guarantee-text,
.button-subtext {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 10px;
  color: var(--color-text-secondary);
}

.guarantee-text svg,
.button-subtext svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-text-secondary);
}

/* Card component (generic) */
.card {
  background: #ffffff;
  border-radius: var(--card-border-radius);
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

@media (max-width: 768px) {
  .card {
    padding: 16px;
  }
}

/* Two-column grid layout */
.two-col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

@media (max-width: 768px) {
  .two-col-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ============================================
   MOBILE-SPECIFIC OVERRIDES
   ============================================ */

@media (max-width: 768px) {
  /* Buttons full width */

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

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

/* Always centered on desktop and mobile (use when you need center on both) */
.text-centered {
  text-align: center !important;
}

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

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

/* Mobile: force left alignment for all text */
@media (max-width: 768px) {
  .text-center,
  .text-left,
  .text-right {
    text-align: left !important;
  }
  
  /* Exception: keep center alignment on mobile if needed */
  .text-center-mobile {
    text-align: center !important;
  }
}

/* Flex utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-center { align-items: center; justify-content: center; }
.flex-between { justify-content: space-between; }
.gap-1 { gap: 8px; }
.gap-2 { gap: 16px; }
.gap-3 { gap: 24px; }

/* Visibility */
.hide-mobile { display: block; }
.hide-desktop { display: none; }

@media (max-width: 768px) {
  .hide-mobile { display: none; }
  .hide-desktop { display: block; }
}