/*! viya-design-system v0.6.0 — built 2026-06-12T05:35:57Z. DO NOT EDIT; edit sources and run build.sh */

/* ===== tokens/01-tokens.css ===== */
/* ==========================================================================
   VIYA — Consumer Brand Design Tokens
   "Your Choice. Your Power."
   Source: VIYA Color Guide + Welcome Sheet (Consumer Brand)

   Single source of truth for the whole site family. Primitive tokens first,
   then semantic roles, then on-color pairings. The --semantic-* group is a
   web mapping (not in the brand guide). Contrast pairings are computed
   (WCAG 2.1), not stated in the source.
   ========================================================================== */

:root {
  /* --- Primary brand --------------------------------------------------- */
  --viya-plum:            #45234C; /* PANTONE 519 C — anchor / dark surfaces */
  --viya-lavender:        #C6AEFF; /* PANTONE 264 C — soft surfaces / tints  */

  /* --- Health segment accents ----------------------------------------- */
  --viya-contraception:   #FF88E6; /* PANTONE 231 C  — Contraception & Control     */
  --viya-fertility:       #C40CB3; /* PANTONE 2395 C — Fertility & Pre-Conception  */
  --viya-pregnancy:       #7F6EF9; /* PANTONE 2655 C — Pregnancy & Post-Partum     */
  --viya-midlife:         #005ABC; /* PANTONE 2728 C — Midlife & Menopause         */

  /* --- Expressive palette (consumer brand only) ----------------------- */
  --viya-sky:             #66C5FF; /* PANTONE 298 C      */
  --viya-navy:            #00055B; /* PANTONE 662 C      */
  --viya-deep-purple:     #390047; /* PANTONE 261 C      */
  --viya-berry:           #720065; /* PANTONE 2415 C — only AAA text pink (11.03:1 on white) */
  --viya-coral-tint:      #FFAEAE; /* PANTONE 169 C      */
  --viya-warm-red:        #FF5850; /* PANTONE Warm Red C */
  --viya-gold:            #FFCE00; /* PANTONE 123 C      */
  --viya-pale-yellow:     #FFF292; /* PANTONE 0131 C     */

  /* --- Neutrals -------------------------------------------------------- */
  --viya-white:           #FFFFFF;
  --viya-black:           #000000;

  /* --- Soft on-colors used by the Elementor kit "Text Over …" entries -- */
  --viya-on-plum-soft:    #F6EAFE; /* kit: Text Over Primary Dark Purple  */
  --viya-on-lavender-deep:#491C87; /* kit: Text Over Primary Light Purple */
  --viya-on-midlife-soft: #D6ECFF; /* kit: Text Over Secondary Pure Blue  */

  /* --- Typography ------------------------------------------------------ */
  --viya-font-heading:    'Instrument Serif', Georgia, serif;
  --viya-font-body:       'Pathway Extreme', Arial, Helvetica, Verdana, sans-serif;

  /* --- Radius + aspect ratios ------------------------------------------ */
  --viya-radius-sm:       4px;
  --viya-radius-md:       12px;
  --viya-radius-lg:       20px;
  --viya-radius-pill:     9999px;
  --viya-aspect-card:     4 / 3;
  --viya-aspect-wide:     16 / 9;
  --viya-aspect-square:   1 / 1;

  /* --- Proposed semantic roles (web mapping — validate with brand) ----- */
  --semantic-primary:     var(--viya-plum);
  --semantic-secondary:   var(--viya-lavender);
  --semantic-accent:      var(--viya-fertility);
  --semantic-bg:          var(--viya-white);
  --semantic-surface:     var(--viya-lavender);
  --semantic-surface-dark:var(--viya-plum);
  --semantic-text:        var(--viya-plum);
  --semantic-text-invert: var(--viya-white);
  --semantic-link:        var(--viya-berry);     /* AAA 11.03:1 on white */
  --semantic-error:       var(--viya-warm-red);  /* dark text only       */
  --semantic-warning:     var(--viya-gold);      /* dark text only       */
  --semantic-success:     var(--viya-midlife);   /* no green in palette  */
  --semantic-info:        var(--viya-sky);

  /* --- Recommended on-color (text/icon) per fill — computed WCAG ------- */
  --on-plum:          var(--viya-white);  /* 13.14:1 AAA */
  --on-lavender:      var(--viya-black);  /* 10.90:1 AAA */
  --on-contraception: var(--viya-black);  /*  9.92:1 AAA */
  --on-fertility:     var(--viya-white);  /*  5.18:1 AA  */
  --on-pregnancy:     var(--viya-black);  /*  5.50:1 AA  */
  --on-midlife:       var(--viya-white);  /*  6.59:1 AA  */
  --on-sky:           var(--viya-black);  /* 11.00:1 AAA */
  --on-navy:          var(--viya-white);  /* 17.91:1 AAA */
  --on-deep-purple:   var(--viya-white);  /* 16.60:1 AAA */
  --on-berry:         var(--viya-white);  /* 11.03:1 AAA */
  --on-coral-tint:    var(--viya-black);  /* 11.92:1 AAA */
  --on-warm-red:      var(--viya-black);  /*  6.76:1 AA  */
  --on-gold:          var(--viya-black);  /* 14.08:1 AAA */
  --on-pale-yellow:   var(--viya-black);  /* 18.37:1 AAA */
}

/* ===== tokens/02-fluid.css ===== */
/* ==========================================================================
   Fluid type + section spacing variables.
   Source: Elementor Custom Code snippets "Fluid Typography" (2271) and
   "Fluid Sections" (1841) — variable blocks only. The consuming rules
   (body/h1-h6 clamps, .section-* utilities) migrate here from the snippets
   in the Phase 3 migration; until then these vars harmlessly duplicate the
   snippet-defined values.
   ========================================================================== */

:root {
  /* Base font sizes for body and headings */
  --min-body-font-size: 1rem;
  --max-body-font-size: 1.125rem;
  --min-font-size: 1rem;
  --max-font-size: 1.5rem;
  --scale-factor: 1.25;

  /* Left and right padding, all sections/containers */
  --fluid-side-padding-min: 1.25rem; /* 20px */
  --fluid-side-padding-max: 5rem;    /* 80px */

  /* Top and bottom padding, all containers */
  --section-xxl-padding-min: 9.375rem; /* 150px */
  --section-xxl-padding-max: 10rem;    /* 160px */
  --section-xl-padding-min: 6.875rem;  /* 110px */
  --section-xl-padding-max: 7.5rem;    /* 120px */
  --section-l-padding-min: 5.625rem;   /* 90px */
  --section-l-padding-max: 6.25rem;    /* 100px */
  --section-m-padding-min: 5rem;       /* 80px */
  --section-m-padding-max: 5rem;       /* 80px */
  --section-s-padding-min: 3.75rem;    /* 60px */
  --section-s-padding-max: 3.75rem;    /* 60px */
  --section-xs-padding-min: 2.5rem;    /* 40px */
  --section-xs-padding-max: 2.5rem;    /* 40px */
  --section-xxs-padding-min: 1.5rem;   /* 24px */
  --section-xxs-padding-max: 1.5rem;   /* 24px */
  --section-header-padding-min: 1.25rem; /* 20px */
  --section-header-padding-max: 1.25rem; /* 20px */

  /* Hero section height */
  --section-hero-height: 100vh;

  /* Offset padding for overlay headers */
  --section-offset-header: 80px;

  /* Width for narrow sections */
  --section-narrow: 62.5rem;   /* 1000px */
  --section-narrow-xs: 45rem;  /* 720px */
}

/* Fluid type rules — migrated verbatim from snippet "Fluid Typography" (2271) */

body {
	font-size: clamp(
		var(--min-body-font-size),
		1rem + 0.5vw,
		var(--max-body-font-size)
	);
}

h1, h2, h3, h4, h5, h6 {
	font-size: clamp(
		calc(var(--min-font-size) * var(--scale-factor)),
		1rem + 1vw,
		calc(var(--max-font-size) * var(--scale-factor))	
		);
}

@media (max-width: 2400px) {
		/* Desktop */
	body {
	font-size: clamp(1rem, 1vw + 1rem, 1.125rem);
	}
	h1 {
		font-size: clamp(2rem, 2vw + 1rem, 3rem);
	}
	h2 {
		font-size: clamp(1.75rem, 1.75vw + 1rem, 2.5rem);
	}
	h3 {
		font-size: clamp(1.5rem, 1.5vw + 1rem, 2rem);
	}
	h4 {
		font-size: clamp(1.25rem, 1.25vw + 1rem, 1.75rem);
	}
	h5 {
		font-size: clamp(1rem, 1vw + 1rem, 1.5rem);
	}
	h6 {
		font-size: clamp(0.875rem, 0.875vw + 1rem, 1.25rem);
	}
}

@media (max-width: 1366px) {
	/* Laptop */
	body {
		font-size: clamp(0.95rem, 0.95vw + 0.95rem, 1.05rem);
	}
	h1 {
		font-size: clamp(1.8rem, 1.8vw + 0.95rem, 2.8rem);
	}
	h2 {
		font-size: clamp(1.6rem, 1.6vw + 0.95rem, 2.3rem);
	}
	h3 {
		font-size: clamp(1.4rem, 1.4vw + 0.95rem, 1.8rem);
	}
	h4 {
		font-size: clamp(1.2rem, 1.2vw + 0.95rem, 1.55rem);
	}
	h5 {
		font-size: clamp(1rem, 1vw + 0.95rem, 1.3rem);
	}
	h6 {
		font-size: clamp(0.85rem, 0.85vw + 0.95rem, 1.1rem);
	}
}

@media (max-width: 1200px) {
  /* Tablet Landscape */
  body {
    font-size: clamp(0.9rem, 0.9vw + 0.9rem, 1rem);
  }
  h1 {
    font-size: clamp(1.7rem, 1.7vw + 0.9rem, 2.6rem);
  }
  h2 {
    font-size: clamp(1.5rem, 1.5vw + 0.9rem, 2.1rem);
  }
  h3 {
    font-size: clamp(1.3rem, 1.3vw + 0.9rem, 1.7rem);
  }
  h4 {
    font-size: clamp(1.1rem, 1.1vw + 0.9rem, 1.45rem);
  }
  h5 {
    font-size: clamp(0.95rem, 0.95vw + 0.9rem, 1.2rem);
  }
  h6 {
    font-size: clamp(0.8rem, 0.8vw + 0.9rem, 1rem);
  }
}

@media (max-width: 1024px) {
  /* Tablet Portrait */
  body {
    font-size: clamp(0.85rem, 0.85vw + 0.85rem, 0.95rem);
  }
  h1 {
    font-size: clamp(1.6rem, 1.6vw + 0.85rem, 2.4rem);
  }
  h2 {
    font-size: clamp(1.4rem, 1.4vw + 0.85rem, 1.9rem);
  }
  h3 {
    font-size: clamp(1.2rem, 1.2vw + 0.85rem, 1.6rem);
  }
  h4 {
    font-size: clamp(1rem, 1vw + 0.85rem, 1.35rem);
  }
  h5 {
    font-size: clamp(0.9rem, 0.9vw + 0.85rem, 1.1rem);
  }
  h6 {
    font-size: clamp(0.75rem, 0.75vw + 0.85rem, 0.95rem);
  }
}

@media (max-width: 880px) {
  /* Mobile Landscape */
  body {
    font-size: clamp(0.8rem, 0.8vw + 0.8rem, 0.9rem);
  }
  h1 {
    font-size: clamp(1.5rem, 1.5vw + 0.8rem, 2.2rem);
  }
  h2 {
    font-size: clamp(1.3rem, 1.3vw + 0.8rem, 1.7rem);
  }
  h3 {
    font-size: clamp(1.1rem, 1.1vw + 0.8rem, 1.4rem);
  }
  h4 {
    font-size: clamp(0.95rem, 0.95vw + 0.8rem, 1.25rem);
  }
  h5 {
    font-size: clamp(0.85rem, 0.85vw + 0.8rem, 1rem);
  }
  h6 {
    font-size: clamp(0.7rem, 0.7vw + 0.8rem, 0.85rem);
  }
}

@media (max-width: 767px) {
  /* Mobile Portrait */
  body {
    font-size: clamp(0.75rem, 0.75vw + 0.75rem, 0.85rem);
  }
  h1 {
    font-size: clamp(1.4rem, 1.4vw + 0.75rem, 2rem);
  }
  h2 {
    font-size: clamp(1.2rem, 1.2vw + 0.75rem, 1.5rem);
  }
  h3 {
    font-size: clamp(1rem, 1vw + 0.75rem, 1.3rem);
  }
  h4 {
    font-size: clamp(0.9rem, 0.9vw + 0.75rem, 1.15rem);
  }
  h5 {
    font-size: clamp(0.8rem, 0.8vw + 0.75rem, 0.95rem);
  }
  h6 {
    font-size: clamp(0.65rem, 0.65vw + 0.75rem, 0.8rem);
  }
}

/* ===== bridge/10-bridge-static.css ===== */
/* ==========================================================================
   Elementor bridge — static part.
   Remaps Elementor's four SYSTEM global ids (fixed across all installs)
   onto VIYA tokens. body[class*="elementor-kit-"] is (0,1,1) and therefore
   out-specifies Elementor's own .elementor-kit-{id} (0,1,0) on every site
   without naming a kit id.

   Custom colors/typography have per-site random _ids and are remapped at
   runtime by the platform's Viya_Kit_Bridge class, which matches kit entry
   TITLES against bridge/manifest.json.

   Kit DB values stay reconciled to the same hexes (deploy script step 1
   enforces this) so Elementor's pickers display truth; this remap
   guarantees frontend resolution follows tokens even if the DB drifts.
   ========================================================================== */

body[class*="elementor-kit-"] {
  --e-global-color-primary:   var(--viya-plum);
  --e-global-color-secondary: var(--viya-lavender);
  --e-global-color-text:      var(--viya-plum);
  --e-global-color-accent:    var(--viya-contraception);

  --e-global-typography-primary-font-family:   var(--viya-font-body);
  --e-global-typography-secondary-font-family: var(--viya-font-body);
  --e-global-typography-text-font-family:      var(--viya-font-body);
  --e-global-typography-accent-font-family:    var(--viya-font-body);
}

/* ===== components/20-resets.css ===== */
/* ==========================================================================
   Base element resets
   Migrated verbatim from Elementor Custom Code snippet "Elementor Resets (1843)".
   ========================================================================== */

/* Apply this to ALL body text */
body, 
.elementor-widget-text-editor {
    font-family: 'Pathway Extreme', Arial, Helvetica, Verdana, sans-serif;
}
/* Apply this to specific headings */
h1, h2, h3, h4, h5, h6 {
    /* Primary Font */
    font-family: 'Instrument Serif', 'Times New Roman', Georgia, serif;
}
.p-no-margin p {
	margin-block-end: 0;
}

/* ===== components/21-base.css ===== */
/* ==========================================================================
   Global base styles
   Migrated verbatim from Elementor Custom Code snippet "VIYA Health Custom Styles (1925)".
   ========================================================================== */

/* ==========================================================================
   VIYA Health - Global Stylesheet
   ==========================================================================
   Description: Centralized styles to override Elementor 
                defaults and maintain design consistency site wide.
   
   Required Elementor Custom Classes:
   - .viya-faq-tabs : Must be applied to the Nested Tabs widgets.
   - .viya-ask-form : Must be applied to the "Ask VIYA Health" Form widgets.
   
   Table of Contents:
   1. Core Variables (Colors, Spacing, Transitions)
   2. Main Category Tabs (Nested Tabs)
   3. FAQ Toggles (Questions & Answers)
   4. Nested Accordions ("Still have questions?")
   5. Ask VIYA Form (Inputs & Animated Submit Button)
   ========================================================================== */
/* Base state: 1-second transition ONLY on the Ask VIYA form button */
.viya-ask-form button[type="submit"] {
  transition: box-shadow 1s ease, background-color 0.3s ease, transform 0.3s ease; 
}

/* Hover state: 8px bottom-right drop shadow ONLY on the Ask VIYA form button */
.viya-ask-form button[type="submit"]:hover {
  /* Change 15px to 0px if you want a solid, unblurred shadow */
  box-shadow: 9px 9px 0px 0px var(--dynamic-shadow-color, currentColor);
}
	
.elementor-field-group {
    display: block !important;
}

.elementor-field-label {
    display: block !important;
}
	.elementor-button-content-wrapper {
    white-space: nowrap;
    flex-wrap: nowrap; 
}
	
/* Apply this class to the Button Widget */
.skew-btn .elementor-button {
  transform: skew(-27deg);
}

/* Unskew all internal content (text and icons) in one go */
.skew-btn .elementor-button-text,
.skew-btn .elementor-button-icon {
  display: inline-block; /* Ensures the transform applies correctly */
  transform: skew(27deg);
}

/* Optional: Fix for slight spacing shifts caused by skewing */
.skew-btn .elementor-button-content-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* ----------------------------------------------------------- */
/* Global Utility Classes & Transitions */
/* ----------------------------------------------------------- */

/* Show Hide Sticky Header Speed Control */
#hide-header {
	/* The !important is often needed to override Elementor/Theme sticky settings */
	transition: all 0.4s ease !important;
}

/* Apply the shadow on hover and focus */
.shadow-bg-match .elementor-button {
  transition: box-shadow 0.5s ease-out;
}

.shadow-bg-match .elementor-button:hover,
.shadow-bg-match .elementor-button:focus {
  box-shadow: 9px 9px 0px 0px var(--dynamic-shadow-color, currentColor); 
}
/* Utility class to prevent text wrapping */
.no-wrap {
  white-space: nowrap;
}
/* Unskew text on skewed buttons */
.skew-text .elementor-button-text {
  transform: skew(27deg);
}
/* Unskew icons on skewed buttons */
.skew-icon .elementor-button-icon {
  transform: skew(27deg);
}

/* Use a media query to target screens 768px (Tablet) and up */
@media (min-width: 768px) {
    /* Apply the skew transform to the container with the custom class */
    .skew-minus-27-desktop-only {
        transform: skewX(-27deg);
    }
}	
/* Counter-transform to keep the inner content straight */
@media (min-width: 768px) {
    /* Assumes your inner container has the default .e-con-inner class */
    .skew-minus-27-desktop-only > .e-con-inner {
        transform: skewX(27deg); /* Apply the opposite skew */
    }
}
/* Skew Elementor submit button -27deg to the right */
.elementor-field-group.elementor-field-type-submit .elementor-button {
    transform: skewX(-27deg);
}
.elementor-field-group.elementor-field-type-submit .elementor-button .elementor-button-text {
    transform: skewX(27deg);
}
/* Case Study Video Card Play Button */
.case-study-video-card-play-button .elementor-custom-embed-play svg,
.case-study-video-card-sm-play-button .elementor-custom-embed-play svg {
    opacity: 1;
}
.case-study-video-card-play-button .elementor-custom-embed-play {
    /* Defines the size of the square area */
    width: 96px;
    height: 96px;
    /* Defines the border color and thickness */
    border: 2px solid #fff;
    /* THIS IS THE KEY PROPERTY: Turns the square box into a circle */
    border-radius: 50%;
    /* Other properties for centering content and interaction */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1;
}
.case-study-video-card-sm-play-button .elementor-custom-embed-play {
    /* Defines the size of the square area */
    width: 64px;
    height: 64px;
    /* Defines the border color and thickness */
    border: 2px solid #fff;
    /* THIS IS THE KEY PROPERTY: Turns the square box into a circle */
    border-radius: 50%;
    /* Other properties for centering content and interaction */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1;
}
/* ----------------------------------------------------------- */
/* Underline Link Animations */
/* ----------------------------------------------------------- */

/* Underline Animation 1: ::after Pseudo-element Reveal */
.viya-animated-underline-btn {
	/* Ensure position: relative is set on the Elementor element itself if needed */
	position: relative; /* Assume button container needs this for ::after positioning */
}
.viya-animated-underline-btn::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.4s ease;
}

.viya-animated-underline-btn:hover::after {
	transform: scaleX(1);
}

.viya-animated-underline-btn:not(:hover)::after {
	/* Explicitly define the slide-out origin */
	transform-origin: right;
}

.viya-animated-underline-btn:active::after {
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.3s ease;
}

/* Underline Animation 2: Background Image Reveal for Links (e.g., standard links) */
.underline-hover-link {
	position: relative;
	text-decoration: none;
	color: inherit;
	text-transform: uppercase;
	font-weight: 800;
	text-align: right;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 2px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size 0.3s ease;
	display: block;
	float: right;
}

.underline-hover-link:hover {
	background-size: 100% 2px;
}

/* Underline Animation 3: Background Image Reveal for Elementor Post Titles */
.elementor-post__title a {
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 100%;
	background-repeat: repeat-x;
	background-size: 0% 2px;
	transition: background-size 0.4s ease;
	text-decoration: none;
	color: inherit;
}

.elementor-post__title a:hover {
	background-size: 100% 2px;
}

/* ----------------------------------------------------------- */
/* Form Field Customizations */
/* ----------------------------------------------------------- */

/* Add superscript "(Required)" to the main field label */
.elementor-field-group.elementor-field-required > label::after {
	content: " (Required)";
	color: #a971ff;
	font-family: "Pathway Extreme", Arial, Helvetica, Verdana, Sans-serif;
	font-weight: 600;
	font-size: 10px;
	vertical-align: super;
}

/* Optional: hide browser default tooltip */
.elementor-field-group.elementor-field-required input:required {
	outline: none;
}

/* ----------------------------------------------------------- */
/* Loop Grid Customizations */
/* ----------------------------------------------------------- */

/* Reset counter on the main loop container */
.elementor-widget-loop-grid .elementor-loop-container {
	counter-reset: post-counter;
}

/* Number each loop item */
.elementor-widget-loop-grid .e-loop-item {
	counter-increment: post-counter;
}

/* Display the number */
.elementor-widget-loop-grid .e-loop-item .ranked-posts::before {
	content: counter(post-counter) ". ";
	font-weight: normal;
	font-size: 2rem;
	line-height: 2rem;
	color: pink;
	display: inline-block;
	width: 2em;
	padding-right: 1rem !important;
}

/* ----------------------------------------------------------- */
/* Miscellaneous Element Styles */
/* ----------------------------------------------------------- */

/* Single-purpose ID for specific button behavior */
#large-btn-pink-bg-white-text {
	white-space: nowrap;
}

.contraceptive-icon img {
	background-color: white;
	border-radius: 1rem !important;
	padding: 12px;
	display: block;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Removed conflicting .elementor-post__card:hover transform */
.elementor-post__card:hover {
	/* This rule is now removed to allow the MD3 rules to control the transform */
}
.glassmorphic-card {
    -webkit-backdrop-filter: blur(14.0740737915px);
    backdrop-filter: blur(14.0740737915px);
    color: #fff;
    background-color: hsla(0, 0%, 100%, .322);
}
/* ----------------------------------------------------------- */
/* Material Design 3 Card Component */
/* ----------------------------------------------------------- */

/* Base card styling - Material Design 3 elevated card */
.md3-card {
  background-color: var(--md-sys-color-surface-container-low);
  border-radius: 12px;
  /* MD3 elevation level 1 */
  display: grid;
  grid-template-rows: 1fr auto;
  height: 100%;
  border: none;
  position: relative;
  overflow: hidden;
  /* MD3 state layer setup */
  isolation: isolate;
}

.md3-card:hover::before {
  opacity: 0.08; /* MD3 hover state layer opacity */
}

/* Content container to sit above state layer */
.md3-card > * {
  position: relative;
  z-index: 2;
}
.elementor-post__card:hover	{transform: translateY(-1px)
	!important}


/* Title styling - MD3 typography with Nunito */
.md3-card .card-title {
  font-family: var(--md-sys-typescale-headline-small-font, 'Nunito', system-ui, sans-serif);
  font-size: var(--md-sys-typescale-headline-small-size, 1.5rem);
  font-weight: var(--md-sys-typescale-headline-small-weight, 600);
  line-height: var(--md-sys-typescale-headline-small-line-height, 1.33);
  letter-spacing: var(--md-sys-typescale-headline-small-tracking, 0);
  margin: 0 0 12px;
}

/* Link styling with MD3 colors */
.md3-card .card-title a {
  text-decoration: none;
  color: inherit;
  transition: color 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.md3-card .card-title a:hover {
  color: var(--md-sys-color-primary, #6750a4) !important;
}

/* Card content area */
.md3-card .card-content {
  font-family: var(--md-sys-typescale-body-medium-font, 'Nunito', system-ui, sans-serif);
  font-size: var(--md-sys-typescale-body-medium-size, 1rem);
  font-weight: var(--md-sys-typescale-body-medium-weight, 400);
  line-height: var(--md-sys-typescale-body-medium-line-height, 1.5);
  color: var(--md-sys-color-on-surface-variant, #044B78);
  margin-bottom: 16px;
}

/* Learn More button styling - MD3 text button style */
.md3-card .card-action {
  font-family: var(--md-sys-typescale-label-large-font, 'Nunito', system-ui, sans-serif);
  font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
  font-weight: var(--md-sys-typescale-label-large-weight, 600);
  line-height: var(--md-sys-typescale-label-large-line-height, 1.43);
  letter-spacing: var(--md-sys-typescale-label-large-tracking, 0.1px);
  color: var(--md-sys-color-primary, #6750a4) !important;
  text-decoration: none;
  text-transform: none;
  padding: 10px 12px;
  border-radius: 20px;
  display: inline-block;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
  align-self: flex-start;
  grid-row: 2; /* Force to second row in grid */
}

/* State layer for action button */
.md3-card .card-action::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: currentColor;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
  pointer-events: none;
}

.md3-card .card-action:hover::before {
  opacity: 0.08; /* MD3 hover state layer */
}

.md3-card .card-action:active::before {
  opacity: 0.12; /* MD3 pressed state layer */
}

/* Focus styling with MD3 focus ring */
.md3-card:focus-within {
  outline: 3px solid var(--md-sys-color-primary, #6750a4);
  outline-offset: 2px;
}

.md3-card .card-action:focus-visible {
  outline: 3px solid var(--md-sys-color-primary, #6750a4);
  outline-offset: 2px;
}

/* Elementor Post Widget Integration - Apply to parent widget */
.md3-card .elementor-post__card {
  background-color: var(--md-sys-color-surface-container-low, #ffffff);
  border-radius: 12px;
  /* MD3 elevation level 1 */
  box-shadow: 
    0px 1px 2px 0px rgba(0, 0, 0, 0.3),
    0px 1px 3px 1px rgba(0, 0, 0, 0.15);
  transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
  display: grid;
  grid-template-rows: 1fr auto;
  height: 100%;
  border: none;
  position: relative;
  overflow: hidden;
  /* MD3 state layer setup */
  isolation: isolate;
}

.md3-card .elementor-post__card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--md-sys-color-on-surface, #1c1b1f);
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
  pointer-events: none;
  z-index: 1;
}

.md3-card .elementor-post__card:hover {
  /* MD3 elevation level 2 */
  box-shadow: 
    0px 1px 2px 0px rgba(0, 0, 0, 0.3),
    0px 2px 6px 2px rgba(0, 0, 0, 0.15);
  transform: none;
}

.md3-card .elementor-post__card:hover::before {
  opacity: 0.08; /* MD3 hover state layer opacity */
}

.md3-card .elementor-post__card > * {
  position: relative;
  z-index: 2;
}

.md3-card .elementor-post__title {
  font-family: var(--md-sys-typescale-headline-small-font, 'Nunito', system-ui, sans-serif);
  font-size: var(--md-sys-typescale-headline-small-size, 1.5rem);
  font-weight: var(--md-sys-typescale-headline-small-weight, 600);
  line-height: var(--md-sys-typescale-headline-small-line-height, 1.33);
  letter-spacing: var(--md-sys-typescale-headline-small-tracking, 0);
  color: var(--md-sys-color-on-surface, #1c1b1f);
  margin: 0 0 12px;
}

.md3-card .elementor-post__title a {
  text-decoration: none;
  color: inherit;
  transition: color 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.md3-card .elementor-post__title a:hover {
  color: var(--md-sys-color-primary, #6750a4) !important;
}

.md3-card .elementor-post__read-more {
  font-family: var(--md-sys-typescale-label-large-font, 'Nunito', system-ui, sans-serif);
  font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
  font-weight: var(--md-sys-typescale-label-large-weight, 600);
  line-height: var(--md-sys-typescale-label-large-line-height, 1.43);
  letter-spacing: var(--md-sys-typescale-label-large-tracking, 0.1px);
  color: var(--md-sys-color-primary, #6750a4) !important;
  text-decoration: none;
  text-transform: none;
  padding: 10px 12px;
  border-radius: 20px;
  display: inline-block;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
  align-self: flex-start;
  grid-row: 2;
}

.md3-card .elementor-post__read-more::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: currentColor;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
  pointer-events: none;
}

.md3-card .elementor-post__read-more:hover::before {
  opacity: 0.08;
}

.md3-card .elementor-post__read-more:active::before {
  opacity: 0.12;
}

.md3-card .elementor-post__card:focus-within {
  outline: 3px solid var(--md-sys-color-primary, #6750a4);
  outline-offset: 2px;
}

.md3-card .elementor-post__read-more:focus-visible {
  outline: 3px solid var(--md-sys-color-primary, #6750a4);
  outline-offset: 2px;
}
	
.logged-in .cky-consent-container.cky-classic-bottom {
  display: none !important;
}

/* Optional: Dark theme support 
@media (prefers-color-scheme: dark) {
  .md3-card {
    background-color: var(--md-sys-color-surface-container-low, #1e1e1e);
  }
  
  .md3-card .card-title {
    color: var(--md-sys-color-on-surface, #e6e1e5);
  }
  
  .md3-card .card-content {
    color: var(--md-sys-color-on-surface-variant, #cac4d0);
  }
  
  .md3-card::before {
    background-color: var(--md-sys-color-on-surface, #e6e1e5);
  }
*/  
  /* Dark theme for Elementor cards 
  .md3-card .elementor-post__card {
    background-color: var(--md-sys-color-surface-container-low, #1e1e1e);
  }
  
  .md3-card .elementor-post__title {
    color: var(--md-sys-color-on-surface, #e6e1e5);
  }
  
  .md3-card .elementor-post__card::before {
    background-color: var(--md-sys-color-on-surface, #e6e1e5);
  }
}
*/

/* --- Horizontal overflow guard — migrated from snippet "Overflow Hidden" (2183).
   DELIBERATE CHANGE: clip instead of hidden. hidden makes body a scroll
   container, which silently breaks position:sticky site-wide; clip gives
   identical visual clipping without that side effect. --- */
html, body {
  overflow-x: clip;
}

/* ===== components/22-buttons.css ===== */
/* ==========================================================================
   VIYA button system (.viya-buttons scope)
   Migrated verbatim from Elementor Custom Code snippet "VIYA Health Button System (2273)".
   ========================================================================== */

/* =============================================================================
   VIYA HEALTH — BUTTON SYSTEM
   
   Scope: All rules are prefixed with .viya-buttons so the stylesheet is safe
   to load globally — styles only activate inside a container that carries the
   .viya-buttons class (add it in Elementor → Advanced → CSS Classes on the
   section or container that holds the buttons).
 
   TABLE OF CONTENTS
   ═════════════════
   1.  Design tokens (CSS custom properties)
   2.  Filled button — shared base
   3.  Filled button — variant overrides (colour pairs only)
       3a. --magenta
       3b. --pink-soft
       3c. --purple
       3d. --navy
       3e. --blue
       3f. --pale-blue
       3g. --white
   4.  Ghost button — shared base
   5.  Ghost button — variant overrides (colour only)
       5a. --light    (for dark backgrounds)
       5b. --dark     (for light backgrounds)
       5c. --magenta  (for neutral/tinted backgrounds)
       5d. --navy     (for pale-blue/lavender backgrounds)
   6.  Accessibility (focus rings, forced-colors, reduced-motion)
 
   USAGE — add ONE class to the Elementor Button widget CSS Classes field
   ───────────────────────────────────────────────────────────────────────
   Filled buttons (parallelogram / skewed)
   ┌──────────────────────┬────────────────────────────────────────────────┐
   │ Class                │ Best backgrounds                                │
   ├──────────────────────┼────────────────────────────────────────────────┤
   │ viya-btn--magenta    │ #4F0C60  #DCCAFF  #F6EAFE  #FEE9FE  #FFFFFF   │
   │ viya-btn--pink-soft  │ #4F0C60  #2B3084  #0053F9  #491C87             │
   │ viya-btn--purple     │ #DCCAFF  #F6EAFE  #FEE9FE  #FFFFFF  #A1BAFF   │
   │ viya-btn--navy       │ #DCCAFF  #F6EAFE  #FFFFFF  #A1BAFF  #D6ECFF   │
   │ viya-btn--blue       │ #4F0C60  #DCCAFF  #FFFFFF  #F6EAFE  #FEE9FE   │
   │ viya-btn--pale-blue  │ #4F0C60  #2B3084  #0053F9  #43214A  #491C87   │
   │ viya-btn--white      │ #4F0C60  #2B3084  #0053F9  #D13BBC  #491C87   │
   └──────────────────────┴────────────────────────────────────────────────┘
 
   Ghost buttons (text + icon, animated underline, no fill or skew)
   ┌────────────────────────────┬──────────────────────────────────────────┐
   │ Class                      │ Best backgrounds                          │
   ├────────────────────────────┼──────────────────────────────────────────┤
   │ viya-btn-ghost--light      │ #4F0C60  #2B3084  #0053F9  #491C87       │
   │ viya-btn-ghost--dark       │ #DCCAFF  #F6EAFE  #FEE9FE  #FFFFFF       │
   │ viya-btn-ghost--magenta    │ #DCCAFF  #FFFFFF  #F6EAFE  #FEE9FE       │
   │ viya-btn-ghost--navy       │ #A1BAFF  #D6ECFF  #DCCAFF  #FFFFFF       │
   └────────────────────────────┴──────────────────────────────────────────┘
 
   BORDER CONVENTION (filled buttons)
   ─────────────────────────────────────────────────────────────────────────
   Default : border-color === background-color → border is invisible.
   Hover   : background flips to white, border-color stays on the brand
             colour → border appears and visually frames the button,
             matching the offset box-shadow colour automatically.
============================================================================= */
/* =============================================================================
   VIYA HEALTH — BUTTON SYSTEM  v5.0
   Refactored: shared base + colour-only variants
   
   USAGE
   ─────
   1. Add  viya-buttons  to the Section/Container CSS Classes field.
   2. Add ONE variant class to the Button widget CSS Classes field.
   
   Filled:  viya-btn--magenta  viya-btn--pink-soft  viya-btn--purple
            viya-btn--navy  viya-btn--blue  viya-btn--pale-blue  viya-btn--white
   Ghost:   viya-btn-ghost--light  viya-btn-ghost--dark
            viya-btn-ghost--magenta  viya-btn-ghost--navy
============================================================================= */


/* ─── 1. FILLED BUTTON — shared base ──────────────────────────────────────── */

.viya-buttons .elementor-element[class*="viya-btn--"] .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Pathway Extreme", "Arial Black", Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.5;
  text-transform: none;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  padding: 0.75em 2.5em;
  border: 2px solid transparent;
  border-radius: 0;
  position: relative;
  z-index: 0;
  transform: skewX(-27deg);
  cursor: pointer;
  transition:
    color 0.3s ease,
    background-color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.5s ease-out;
  fill: currentColor;
}

.viya-buttons .elementor-element[class*="viya-btn--"] .elementor-button-content-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  transform: skewX(27deg);
}

.viya-buttons .elementor-element[class*="viya-btn--"] .elementor-button-text {
  display: inline-block;
}

.viya-buttons .elementor-element[class*="viya-btn--"] .elementor-button-icon {
  display: inline-flex;
  align-items: center;
  font-size: 1em;
  line-height: 1;
}

/* Hover/focus shared: background always flips to white, outline suppressed */
.viya-buttons .elementor-element[class*="viya-btn--"] .elementor-button:hover,
.viya-buttons .elementor-element[class*="viya-btn--"] .elementor-button:focus-visible {
  background-color: #FFFFFF;
  outline: none;
}

/* Focus ring shared base */
.viya-buttons .elementor-element[class*="viya-btn--"] .elementor-button:focus-visible {
  box-shadow:
    0 0 0 3px #FFFFFF,
    0 0 0 6px #4F0C60;
}


/* ─── 2. FILLED BUTTON — colour variants ──────────────────────────────────── */

/* 2a. Magenta */
.viya-buttons .elementor-element.viya-btn--magenta .elementor-button {
  background-color: #D13BBC;
  color: #FFFFFF;
  border-color: #D13BBC;
}
.viya-buttons .elementor-element.viya-btn--magenta .elementor-button:hover,
.viya-buttons .elementor-element.viya-btn--magenta .elementor-button:focus-visible {
  color: #D13BBC;
  border-color: #D13BBC;
  box-shadow: 9px 9px 0 0 #D13BBC;
}

/* 2b. Pink Soft */
.viya-buttons .elementor-element.viya-btn--pink-soft .elementor-button {
  background-color: #FFC2E6;
  color: #4F0C60;
  border-color: #FFC2E6;
}
.viya-buttons .elementor-element.viya-btn--pink-soft .elementor-button:hover,
.viya-buttons .elementor-element.viya-btn--pink-soft .elementor-button:focus-visible {
  color: #4F0C60;
  border-color: #FFC2E6;
  box-shadow: 9px 9px 0 0 #FFC2E6;
}

/* 2c. Purple */
.viya-buttons .elementor-element.viya-btn--purple .elementor-button {
  background-color: #491C87;
  color: #FFFFFF;
  border-color: #491C87;
}
.viya-buttons .elementor-element.viya-btn--purple .elementor-button:hover,
.viya-buttons .elementor-element.viya-btn--purple .elementor-button:focus-visible {
  color: #491C87;
  border-color: #491C87;
  box-shadow: 9px 9px 0 0 #491C87;
}

/* 2d. Navy */
.viya-buttons .elementor-element.viya-btn--navy .elementor-button {
  background-color: #2B3084;
  color: #FFFFFF;
  border-color: #2B3084;
}
.viya-buttons .elementor-element.viya-btn--navy .elementor-button:hover,
.viya-buttons .elementor-element.viya-btn--navy .elementor-button:focus-visible {
  color: #2B3084;
  border-color: #2B3084;
  box-shadow: 9px 9px 0 0 #2B3084;
}

/* 2e. Blue */
.viya-buttons .elementor-element.viya-btn--blue .elementor-button {
  background-color: #0053F9;
  color: #FFFFFF;
  border-color: #0053F9;
	border-radius:0;
}
.viya-buttons .elementor-element.viya-btn--blue .elementor-button:hover,
.viya-buttons .elementor-element.viya-btn--blue .elementor-button:focus-visible {
  color: #0053F9;
  border-color: #0053F9;
  box-shadow: 9px 9px 0 0 #0053F9;
}

/* 2f. Pale Blue */
.viya-buttons .elementor-element.viya-btn--pale-blue .elementor-button {
  background-color: #A1BAFF;
  color: #2B3084;
  border-color: #A1BAFF;
}
.viya-buttons .elementor-element.viya-btn--pale-blue .elementor-button:hover,
.viya-buttons .elementor-element.viya-btn--pale-blue .elementor-button:focus-visible {
  color: #2B3084;
  border-color: #A1BAFF;
  box-shadow: 9px 9px 0 0 #A1BAFF;
}

/* 2g. White — inverted hover (flips to purple, not white) */
.viya-buttons .elementor-element.viya-btn--white .elementor-button {
  background-color: #FFFFFF;
  color: #4F0C60;
  border-color: #FFFFFF;
}
.viya-buttons .elementor-element.viya-btn--white .elementor-button:hover,
.viya-buttons .elementor-element.viya-btn--white .elementor-button:focus-visible {
  background-color: #4F0C60;
  color: #FFFFFF;
  border-color: #FFFFFF;
  box-shadow: 9px 9px 0 0 rgba(255, 255, 255, 0.35);
}
.viya-buttons .elementor-element.viya-btn--white .elementor-button:focus-visible {
  box-shadow:
    0 0 0 3px #4F0C60,
    0 0 0 6px #FFFFFF;
}


/* ─── 3. GHOST BUTTON — shared base ───────────────────────────────────────── */

.viya-buttons .elementor-element[class*="viya-btn-ghost--"] .elementor-button {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: "Pathway Extreme", "Arial Black", Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.5;
  text-transform: none;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  padding: 0.4em 0;
  background-color: transparent;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: color 0.3s ease;
}

.viya-buttons .elementor-element[class*="viya-btn-ghost--"] .elementor-button-text {
  position: relative;
  display: inline-block;
}

/* Animated underline via ::after */
.viya-buttons .elementor-element[class*="viya-btn-ghost--"] .elementor-button-text::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.viya-buttons .elementor-element[class*="viya-btn-ghost--"] .elementor-button:hover .elementor-button-text::after,
.viya-buttons .elementor-element[class*="viya-btn-ghost--"] .elementor-button:focus-visible .elementor-button-text::after {
  transform: scaleX(1);
  transform-origin: left;
}

.viya-buttons .elementor-element[class*="viya-btn-ghost--"] .elementor-button:not(:hover):not(:focus-visible) .elementor-button-text::after {
  transform: scaleX(0);
  transform-origin: right;
}

/* Icon nudge */
.viya-buttons .elementor-element[class*="viya-btn-ghost--"] .elementor-button-icon {
  display: inline-flex;
  align-items: center;
  font-size: 0.85em;
  line-height: 1;
  transition: transform 0.3s ease;
}

.viya-buttons .elementor-element[class*="viya-btn-ghost--"] .elementor-button:hover .elementor-button-icon,
.viya-buttons .elementor-element[class*="viya-btn-ghost--"] .elementor-button:focus-visible .elementor-button-icon {
  transform: translateX(4px);
}


/* ─── 4. GHOST BUTTON — colour variants ───────────────────────────────────── */

/* 4a. Light — for dark backgrounds */
.viya-buttons .elementor-element.viya-btn-ghost--light .elementor-button { color: #FFFFFF; }
.viya-buttons .elementor-element.viya-btn-ghost--light .elementor-button:hover,
.viya-buttons .elementor-element.viya-btn-ghost--light .elementor-button:focus-visible { color: #FFC2E6; }

/* 4b. Dark — for light backgrounds */
.viya-buttons .elementor-element.viya-btn-ghost--dark .elementor-button { color: #4F0C60; }
.viya-buttons .elementor-element.viya-btn-ghost--dark .elementor-button:hover,
.viya-buttons .elementor-element.viya-btn-ghost--dark .elementor-button:focus-visible { color: #491C87; }

/* 4c. Magenta — for neutral/tinted backgrounds */
.viya-buttons .elementor-element.viya-btn-ghost--magenta .elementor-button { color: #D13BBC; }
.viya-buttons .elementor-element.viya-btn-ghost--magenta .elementor-button:hover,
.viya-buttons .elementor-element.viya-btn-ghost--magenta .elementor-button:focus-visible { color: #491C87; }

/* 4d. Navy — for pale-blue/lavender backgrounds */
.viya-buttons .elementor-element.viya-btn-ghost--navy .elementor-button { color: #2B3084; }
.viya-buttons .elementor-element.viya-btn-ghost--navy .elementor-button:hover,
.viya-buttons .elementor-element.viya-btn-ghost--navy .elementor-button:focus-visible { color: #0053F9; }


/* ─── 5. STANDALONE UTILITIES ─────────────────────────────────────────────── */
/* Use these OUTSIDE of .viya-buttons for one-off cases only.                  */
/* Inside .viya-buttons always use the viya-btn-- variant classes instead.     */

.skew-button {
  transform: skewX(-27deg);
}
.skew-button .elementor-button-text,
.skew-button .elementor-button-icon {
  transform: skewX(27deg);
}

.skew-content .elementor-button-text,
.skew-content .elementor-button-icon {
  transform: skewX(27deg);
}

.skew-text .elementor-button-text { transform: skew(27deg); }
.skew-icon .elementor-button-icon { transform: skew(27deg); }

.no-wrap { white-space: nowrap; }

.shadow-bg-match .elementor-button {
  transition: box-shadow 0.5s ease-out;
}
.shadow-bg-match .elementor-button:hover,
.shadow-bg-match .elementor-button:focus {
  /* stylelint-disable-next-line known-properties */
  box-shadow: 9px 9px 0px 0px var(--dynamic-shadow-color, #000000);
}

.shadow-bg-match-hover-only .elementor-button:hover,
.shadow-bg-match-hover-only .elementor-button:focus {
  /* stylelint-disable-next-line known-properties */
  box-shadow: 9px 9px 0px 0px var(--dynamic-shadow-color, #000000);
}

@media (min-width: 768px) {
  .skew-minus-27-desktop-only { transform: skewX(-27deg); }
  .skew-minus-27-desktop-only > .e-con-inner { transform: skewX(27deg); }
}


/* ─── 6. UNDERLINE LINK ANIMATIONS ───────────────────────────────────────── */

.viya-animated-underline-btn {
  position: relative;
}
.viya-animated-underline-btn::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}
.viya-animated-underline-btn:hover::after { transform: scaleX(1); }
.viya-animated-underline-btn:not(:hover)::after { transform-origin: right; }
.viya-animated-underline-btn:active::after {
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
}

.underline-hover-link {
  position: relative;
  text-decoration: none;
  color: inherit;
  text-transform: uppercase;
  font-weight: 800;
  text-align: right;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s ease;
  display: block;
  float: right;
}
.underline-hover-link:hover { background-size: 100% 2px; }

.elementor-post__title a {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: repeat-x;
  background-size: 0% 2px;
  transition: background-size 0.4s ease;
  text-decoration: none;
  color: inherit;
}
.elementor-post__title a:hover { background-size: 100% 2px; }
/* ─── 7. ACCESSIBILITY ─────────────────────────────────────────────────────── */

@media (forced-colors: active) {
  .viya-buttons .elementor-element[class*="viya-btn--"] .elementor-button {
    border: 2px solid ButtonText;
    forced-color-adjust: none;
  }
  .viya-buttons .elementor-element[class*="viya-btn-ghost--"] .elementor-button {
    forced-color-adjust: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .viya-buttons .elementor-element[class*="viya-btn--"] .elementor-button,
  .viya-buttons .elementor-element[class*="viya-btn-ghost--"] .elementor-button,
  .viya-buttons .elementor-element[class*="viya-btn-ghost--"] .elementor-button-text::after,
  .viya-buttons .elementor-element[class*="viya-btn-ghost--"] .elementor-button-icon {
    transition: none;
    animation: none;
  }
}

/* ===== components/23-sections.css ===== */
/* ==========================================================================
   Section spacing utilities (.section-*)
   Migrated verbatim from Elementor Custom Code snippet "Fluid Sections (1841)".
   ========================================================================== */

/* CSS Template (do not edit below) */
  
  
  /* Section/Container Padding - Fluid Variants */
  .section-xxl {
    padding-top: clamp(var(--section-xxl-padding-min), 1.087vw + 9.13rem, var(--section-xxl-padding-max));
    padding-bottom: clamp(var(--section-xxl-padding-min), 1.087vw + 9.13rem, var(--section-xxl-padding-max));
    padding-left: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
    padding-right: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
  }
  
  .section-xl {
    padding-top: clamp(var(--section-xl-padding-min), 1.087vw + 6.63rem, var(--section-xl-padding-max));
    padding-bottom: clamp(var(--section-xl-padding-min), 1.087vw + 6.63rem, var(--section-xl-padding-max));
    padding-left: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
    padding-right: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
  }
  
  .section-l {
    padding-top: clamp(var(--section-l-padding-min), 1.087vw + 5.38rem, var(--section-l-padding-max));
    padding-bottom: clamp(var(--section-l-padding-min), 1.087vw + 5.38rem, var(--section-l-padding-max));
    padding-left: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
    padding-right: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
  }
  
  .section-m {
    padding-top: clamp(var(--section-m-padding-min), 0vw + 5rem, var(--section-m-padding-max));
    padding-bottom: clamp(var(--section-m-padding-min), 0vw + 5rem, var(--section-m-padding-max));
    padding-left: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
    padding-right: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
  }
  
  .section-s {
    padding-top: clamp(var(--section-s-padding-min), 0vw + 3.75rem, var(--section-s-padding-max));
    padding-bottom: clamp(var(--section-s-padding-min), 0vw + 3.75rem, var(--section-s-padding-max));
    padding-left: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
    padding-right: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
  }
  
  .section-xs {
    padding-top: clamp(var(--section-xs-padding-min), 0vw + 2.5rem, var(--section-xs-padding-max));
    padding-bottom: clamp(var(--section-xs-padding-min), 0vw + 2.5rem, var(--section-xs-padding-max));
    padding-left: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
    padding-right: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
  }
  
  .section-xxs {
    padding-top: clamp(var(--section-xxs-padding-min), 0vw + 1.5rem, var(--section-xxs-padding-max));
    padding-bottom: clamp(var(--section-xxs-padding-min), 0vw + 1.5rem, var(--section-xxs-padding-max));
    padding-left: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
    padding-right: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
  }
  
  .section-header {
    padding-top: clamp(var(--section-header-padding-min), 0vw + 1.25rem, var(--section-header-padding-max));
    padding-bottom: clamp(var(--section-header-padding-min), 0vw + 1.25rem, var(--section-header-padding-max));
    padding-left: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
    padding-right: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
  }
  
  /* Hero Container/Sections Height */
  .section-hero {
    min-height: var(--section-hero-height)!important;
  }

  .section-hero .e-con-inner {
    justify-content: center!important;
}
  
  /* Full Width Sections - No Side Padding */

  .section-full div {
    max-width: 100%!important;
  }
  

  /* Narrow Sections */
  .section-narrow .e-con-inner {
    max-width: var(--section-narrow)!important;
  }

  .section-narrow-xs .e-con-inner {
    max-width: var(--section-narrow-xs)!important;
  }


  /* Offset Padding for Overlay Headers */
  .section-offset {
    padding-top: calc(var(--section-offset-header) + var(--section-xxl-padding-min));
  }

/* ===== components/24-horizontal-scroll.css ===== */
/* ==========================================================================
   Horizontal scroll sections
   Migrated verbatim from Elementor Custom Code snippet "Horizontal Scroll Section (2272)".
   ========================================================================== */

/* Horizontal Scroll */

.mdw-horizontal-scroll{
    --progress-bar: true;
    --progress-bar-color: #9FADFF;
    --progress-bar-height: 2px;
}
body{
    --disable-movement-desktop: false;
    --disable-movement-tablet: false;
    --disable-movement-mobile: true;
    --hide-default-scrollbar: false;
    --disable-horizontal-scroll-mobile: false;
}
html.hide-scrollbar::-webkit-scrollbar{
    display: none;
}
html.hide-scrollbar{
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.mdw-horizontal-scroll{
    overflow: hidden;
    --initial-height: var(--min-height,100vh);
}
.mdw-horizontal-scroll:after{
    content: "";
    left: 0;
    top: calc(100vh - var(--progress-bar-height,2px));
    width: 100vw;
    height: var(--progress-bar-height,2px);
    background: var(--progress-bar-color,#9FADFF);
    transform: scaleX(calc(var(--progress,0)*100%));
    position: fixed;
    transform-origin: left;
    will-change: transform;
    transition: transform 0.1s linear;
    opacity: 0;
}
.mdw-horizontal-scroll.fixed:after{
    opacity: 1;
}
.mdw-horizontal-scroll.progress-bar-disabled:after{
    display: none;
}
.mdw-horizontal-scroll > .e-con,
.mdw-horizontal-scroll > .e-container{
    transition: none;
    height: var(--initial-height,100vh);
}
body.tiny-scroll .mdw-horizontal-scroll > .e-con,
body.tiny-scroll .mdw-horizontal-scroll > .e-container{
    will-change: transform;
    transition: transform 1s cubic-bezier(0,.33,.07,1.03);
}
.mdw-horizontal-scroll.fixed > .e-con,
.mdw-horizontal-scroll.fixed > .e-container{
    position: fixed;
    top: 0;
    left: 0;
}
.mdw-horizontal-scroll.bottom{
    justify-content: flex-end;
}
.mdw-horizontal-scroll > .e-con > *,
.mdw-horizontal-scroll > .e-container > *{
    height: var(--min-height, 100vh);
}
.mdw-horizontal-scroll.hs-disabled{
    height: auto !important;
}
.mdw-horizontal-scroll.hs-disabled:after{
    display: none;
}
.mdw-horizontal-scroll.hs-disabled > .e-con,
.mdw-horizontal-scroll.hs-disabled > .e-container{
    flex-direction: column;
    height: auto;
}
.mdw-horizontal-scroll.hs-disabled.fixed > .e-con,
.mdw-horizontal-scroll.hs-disabled.fixed > .e-container{
    position: relative;
}
.mdw-horizontal-scroll.hs-disabled > .e-con > *,
.mdw-horizontal-scroll.hs-disabled > .e-container > *{
    height: auto;
}
.mdw-horizontal-scroll.hs-disabled > .e-con > .e-con,
.mdw-horizontal-scroll.hs-disabled > .e-container > .e-container{
    width: 100%;
}

/* Scrolling Movement */

.e-con[class^='mdw-hs-movement'],
.e-con[class*=' mdw-hs-movement'],
.e-container[class^='mdw-hs-movement'],
.e-container[class*=' mdw-hs-movement'],
.elementor-widget[class^='mdw-hs-movement'] .elementor-widget-container,
.elementor-widget[class*=' mdw-hs-movement'] .elementor-widget-container{
    transform: translateX(calc(var(--e-transform-translateX,0px) + var(--translateX,0)*-1px)) translateY(calc(var(--e-transform-translateY,0px) + var(--translateY,0)*1px)) rotate(calc(var(--rotateZ,0deg) + var(--rotate,0)*1deg));
    transition: none;
}
body.tiny-scroll .e-con[class^='mdw-hs-movement'],
body.tiny-scroll .e-con[class*=' mdw-hs-movement'],
body.tiny-scroll .e-container[class^='mdw-hs-movement'],
body.tiny-scroll .e-container[class*=' mdw-hs-movement'],
body.tiny-scroll .elementor-widget[class^='mdw-hs-movement'] .elementor-widget-container,
body.tiny-scroll .elementor-widget[class*=' mdw-hs-movement'] .elementor-widget-container{
    will-change: transform;
    transition: transform 1s cubic-bezier(0,.33,.07,1.03);
}
.e-con[class^='mdw-hs-movement-translate-x'],
.e-con[class*=' mdw-hs-movement-translate-x'],
.e-container[class^='mdw-hs-movement-translate-x'],
.e-container[class*=' mdw-hs-movement-translate-x'],
.elementor-widget[class^='mdw-hs-movement-translate-x'] .elementor-widget-container,
.elementor-widget[class*=' mdw-hs-movement-translate-x'] .elementor-widget-container{
    --translateX: calc(var(--parallax,0)*var(--speed-x,10)*var(--direction-x,1));
}
.e-con[class^='mdw-hs-movement-translate-y'],
.e-con[class*=' mdw-hs-movement-translate-y'],
.e-container[class^='mdw-hs-movement-translate-y'],
.e-container[class*=' mdw-hs-movement-translate-y'],
.elementor-widget[class^='mdw-hs-movement-translate-y'] .elementor-widget-container,
.elementor-widget[class*=' mdw-hs-movement-translate-y'] .elementor-widget-container{
    --translateY: calc(var(--parallax,0)*var(--speed-y,10)*var(--direction-y,1));
}
.e-con[class^='mdw-hs-movement-rotate'],
.e-con[class*=' mdw-hs-movement-rotate'],
.e-container[class^='mdw-hs-movement-rotate'],
.e-container[class*=' mdw-hs-movement-rotate'],
.elementor-widget[class^='mdw-hs-movement-rotate'] .elementor-widget-container,
.elementor-widget[class*=' mdw-hs-movement-rotate'] .elementor-widget-container{
    --rotate: calc(var(--parallax,0)*var(--speed-r,10)*var(--direction-r,1));
}

/* Reveal Animtion */

.mdw-reveal-animation,
.mdw-reveal-animation-left,
.mdw-reveal-animation-right,
.mdw-reveal-animation-top,
.mdw-reveal-animation-bottom{
    animation: none !important;
    transition: all 1s ease-in-out !important;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
.mdw-reveal-animation:not(.animated),
.mdw-reveal-animation-left:not(.animated),
.mdw-reveal-animation-right:not(.animated),
.mdw-reveal-animation-top:not(.animated),
.mdw-reveal-animation-bottom:not(.animated){
    opacity: 0;
}
.mdw-reveal-animation:not(.animated),
.mdw-reveal-animation-bottom:not(.animated){
    transform: translateY(2em);
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
}
.mdw-reveal-animation-left:not(.animated){
    transform: translateX(-2em);
    clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
}
.mdw-reveal-animation-right:not(.animated){
    transform: translateX(2em);
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}
.mdw-reveal-animation-top:not(.animated){
    transform: translateY(-2em);
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}

/* ===== components/25-faq.css ===== */
/* ==========================================================================
   FAQ accordion + tabs
   Migrated verbatim from Elementor Custom Code snippet "FAQ Accordion Styles (1955) + FAQs Tabs Styles (2294)".
   ========================================================================== */

/**
 * ===================================================================
 * FAQ Accordion - Final Style with Inline SVG Icons
 * ===================================================================
 */

/* 1. Define the Color & Style Palette
--------------------------------------------- */
:root {
    /* Set a base font for the component */
    --faq-font-family: 'Pathway Extreme', sans-serif;

    /* Main text color for questions */
    --faq-color-on-surface: #044b78;

    /* Muted text color for answers */
    --faq-color-on-surface-variant: #044b78;
    
    /* Shape & Spacing */
    --faq-shape-corner-none: 0rem;
    --faq-spacing-unit: 0.5rem;
}


/* 2. Main Accordion Container
--------------------------------------------- */
.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: calc(var(--faq-spacing-unit) * 2);
    font-family: var(--faq-font-family);
}


/* 3. Individual FAQ Item Container
--------------------------------------------- */
.faq-item {
    background-color: white;
	border: 1px solid var(--e-global-color-text);
    border-radius: var(--faq-shape-corner-none);
    transition: background-color 0.3s ease;
    overflow: hidden;
}


/* 4. The Question (The Interactive Header)
--------------------------------------------- */
.faq-question {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: calc(var(--faq-spacing-unit) * 2) calc(var(--faq-spacing-unit) * 3);
    cursor: pointer;
    
    color: var(--faq-color-on-surface);
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1.35;
	text-transform: uppercase;
    text-align: left;
	transition: color 0.3s ease;
}
.faq-question:hover {
	color: var(--e-global-color-8604777);
}


/* 5. The Answer
--------------------------------------------- */
.faq-answer {
    color: var(--faq-color-on-surface-variant);
    font-size: var(--e-global-typography-f09f6c2-font-size);
	font-weight: var(--e-global-typography-f09f6c2-font-weight);
	line-height: var(--e-global-typography-f09f6c2-line-height);
	letter-spacing: var(--e-global-typography-f09f6c2-letter-spacing);
    padding: 0 calc(var(--faq-spacing-unit) * 3);
    
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}


/* 6. The Icon (SVG Version)
--------------------------------------------- */
.faq-icon-wrapper {
    display: flex; /* Helps with alignment */
    align-items: center;
    margin-left: 16px; /* Adds some space between text and icon */
}

.faq-icon-wrapper svg {
    /* Style the SVG itself */
    width: 1em;
    height: 1em;
    /* This makes the SVG color match the question's text color automatically! */
    fill: currentColor; 
}

/* Hide the 'opened' icon by default */
.faq-icon-opened {
    display: none;
}

/* 7. Hover State Styling
--------------------------------------------- */
.faq-question:hover {
    color: #00849B;
}
	
/* 8. Active State Styling
--------------------------------------------- */
.faq-item.active .faq-question {
    color: #00849B;
}

.faq-item.active .faq-answer {
    max-height: 600px;
    padding: 0 calc(var(--faq-spacing-unit) * 3) calc(var(--faq-spacing-unit) * 3);
}

/* When active, hide the 'closed' icon and show the 'opened' one */
.faq-item.active .faq-icon-closed {
    display: none;
}
.faq-item.active .faq-icon-opened {
    display: inline-block;
}

/* --- FAQ tabs (snippet 2294) --- */

/* Normal state */
.viya-faq-tabs .e-n-tab-title {
    background-color: #F6EAFE!important;
}

/* Hovered state */
.viya-faq-tabs .e-n-tab-title:hover {
    background-color: #491C87!important;
}

/* Active / selected state */
.viya-faq-tabs .e-n-tab-title[aria-selected="true"] {
    background-color: #491C87!important;
}
/* To seperate toggle elements on FAQ pages */
.corp-separated-toggle .elementor-toggle-item {
    margin-bottom: 24px!important;
    border: .1px solid #F6EAFE; 
	  background-color: white;
}
.corp-separated-toggle .elementor-toggle-item:last-child {
    margin-bottom: 0!important;
}

/* ===== components/26-images.css ===== */
/* ==========================================================================
   Governed image rendering (viya_image() helper).
   Radius and aspect come from tokens; editors never set these per-image.
   ========================================================================== */

.viya-img {
  margin: 0;
  overflow: hidden;
}

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

.viya-img--radius-sm,
.viya-img--radius-sm img { border-radius: var(--viya-radius-sm); }
.viya-img--radius-md,
.viya-img--radius-md img { border-radius: var(--viya-radius-md); }
.viya-img--radius-lg,
.viya-img--radius-lg img { border-radius: var(--viya-radius-lg); }
.viya-img--radius-pill,
.viya-img--radius-pill img { border-radius: var(--viya-radius-pill); }

.viya-img--aspect-card img { aspect-ratio: var(--viya-aspect-card); object-fit: cover; }
.viya-img--aspect-wide img { aspect-ratio: var(--viya-aspect-wide); object-fit: cover; }
.viya-img--aspect-square img { aspect-ratio: var(--viya-aspect-square); object-fit: cover; }

/* ===== components/27-woocommerce.css ===== */
/* ==========================================================================
   VIYA — WooCommerce / shop brand skin

   Override-on-top layer. WooCommerce core stylesheets (woocommerce-general,
   woocommerce-layout, woocommerce-smallscreen) stay enqueued and keep owning
   LAYOUT / GRID / RESPONSIVE. This file re-skins COLOUR, BUTTONS, TYPE, FORMS
   and NOTICES using --viya-* tokens so commerce pages match the brand.

   Surface: classic WooCommerce markup (shop archive, single product, cart +
   checkout shortcodes, My Account). NOT Woo Blocks.

   Scope: every rule is prefixed .woocommerce / .woocommerce-page (WordPress
   adds these body/wrapper classes only on commerce surfaces) so nothing leaks
   onto Elementor or plain pages. Specificity matches Woo core; viya.css prints
   after Woo's default-priority styles, so equal-specificity ties resolve to us.
   No !important unless the Woo core rule being overridden already uses it.

   TABLE OF CONTENTS
   1. Buttons (all)            — squared brand fill, border-radius:0
   2. Prices / sale badge
   3. Titles / headings
   4. Links / breadcrumb
   5. Archive controls         — result count, ordering, pagination
   6. Single product           — qty, tabs, star rating
   7. Tables                   — cart, totals, account
   8. Checkout / payment
   9. Form inputs              — squared, token borders + focus ring
   10. My Account navigation
   11. Notices / messages
   ========================================================================== */

/* 1. BUTTONS (all) ---------------------------------------------------------
   Every Woo button: solid plum, white text, sharp corners (0 radius), body
   font. Covers shop add-to-cart, single add-to-cart, cart/checkout/account
   submit, place order, proceed-to-checkout, comment submit. No skew. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce .single_add_to_cart_button,
.woocommerce .checkout-button,
.woocommerce #place_order,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button {
  background-color: var(--viya-plum);
  color: var(--on-plum);
  border: none;
  border-radius: 0;
  font-family: var(--viya-font-body);
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none;
  text-transform: none;
  padding: .7em 1.4em;
  line-height: 1.2;
  transition: background-color .2s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce .checkout-button:hover,
.woocommerce #place_order:hover,
.woocommerce-page a.button:hover,
.woocommerce-page button.button:hover,
.woocommerce-page input.button:hover {
  background-color: var(--viya-deep-purple);
  color: var(--on-deep-purple);
}

/* keyboard focus ring */
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible,
.woocommerce #place_order:focus-visible,
.woocommerce .checkout-button:focus-visible {
  outline: 3px solid var(--viya-fertility);
  outline-offset: 2px;
}

/* disabled / loading */
.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button.disabled,
.woocommerce input.button:disabled {
  background-color: var(--viya-lavender);
  color: var(--on-lavender);
  opacity: 1;
  cursor: not-allowed;
}

/* "View cart" link shown after add-to-cart — read as a link, not a 2nd button */
.woocommerce a.added_to_cart {
  color: var(--viya-berry);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .15em;
}

/* 2. PRICES / SALE BADGE ---------------------------------------------------- */
.woocommerce .price,
.woocommerce span.amount,
.woocommerce .product_title + .price,
.woocommerce ul.products li.product .price {
  color: var(--viya-plum);
  font-weight: 700;
}
/* was-price */
.woocommerce .price del,
.woocommerce .price del .amount {
  color: var(--viya-plum);
  opacity: .55;
  font-weight: 400;
}
/* now/sale price */
.woocommerce .price ins,
.woocommerce .price ins .amount {
  color: var(--viya-fertility);
  text-decoration: none;
  font-weight: 700;
}
/* sale flash */
.woocommerce span.onsale {
  background-color: var(--viya-gold);
  color: var(--on-gold);
  border-radius: 0;
  font-family: var(--viya-font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  min-height: 0;
  min-width: 0;
  line-height: 1.4;
  padding: .25em .6em;
}

/* 3. TITLES / HEADINGS ------------------------------------------------------ */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce div.product .product_title,
.woocommerce .cart_totals > h2,
.woocommerce-cart-form ~ * h2,
.woocommerce #order_review_heading,
.woocommerce .related > h2,
.woocommerce .upsells > h2 {
  font-family: var(--viya-font-heading);
  color: var(--viya-plum);
}

/* 4. LINKS / BREADCRUMB ----------------------------------------------------- */
.woocommerce-breadcrumb,
.woocommerce-breadcrumb a {
  color: var(--viya-plum);
}
.woocommerce-breadcrumb a:hover {
  color: var(--viya-berry);
}

/* 5. ARCHIVE CONTROLS ------------------------------------------------------- */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
  color: var(--viya-plum);
  font-family: var(--viya-font-body);
}
.woocommerce .woocommerce-ordering select {
  border: 1px solid var(--viya-lavender);
  border-radius: 0;
  color: var(--viya-plum);
  background-color: var(--viya-white);
  padding: .4em .6em;
}
/* pagination */
.woocommerce nav.woocommerce-pagination ul,
.woocommerce nav.woocommerce-pagination ul li {
  border-color: var(--viya-lavender);
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  color: var(--viya-plum);
  border-radius: 0;
}
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
  background-color: var(--viya-plum);
  color: var(--on-plum);
}

/* 6. SINGLE PRODUCT --------------------------------------------------------- */
/* quantity stepper */
.woocommerce .quantity .qty {
  border: 1px solid var(--viya-lavender);
  border-radius: 0;
  color: var(--viya-plum);
  padding: .4em;
}
/* tabs — flatten Woo's rounded pill tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs::before {
  border-color: var(--viya-lavender);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background-color: var(--viya-on-plum-soft);
  border-color: var(--viya-lavender);
  border-radius: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
  display: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  color: var(--viya-plum);
  font-family: var(--viya-font-body);
  font-weight: 700;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  background-color: var(--viya-white);
  border-bottom-color: var(--viya-white);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--viya-fertility);
}
/* review stars */
.woocommerce .star-rating span::before,
.woocommerce p.stars a::before,
.woocommerce p.stars a:hover ~ a::before {
  color: var(--viya-gold);
}

/* 7. TABLES (cart, totals, account) ---------------------------------------- */
.woocommerce table.shop_table {
  border: 1px solid var(--viya-lavender);
  border-radius: 0;
}
.woocommerce table.shop_table th {
  background-color: var(--viya-plum);
  color: var(--on-plum);
  font-family: var(--viya-font-body);
}
.woocommerce table.shop_table td,
.woocommerce table.shop_table tbody th {
  border-top-color: color-mix(in srgb, var(--viya-lavender) 60%, white);
}
.woocommerce-cart table.cart td.actions .coupon .input-text {
  border-radius: 0;
}

/* 8. CHECKOUT / PAYMENT ----------------------------------------------------- */
.woocommerce-checkout #payment,
.woocommerce-cart .cart-collaterals .cart_totals {
  background-color: var(--viya-on-plum-soft);
  border-radius: 0;
}
.woocommerce-checkout #payment ul.payment_methods {
  border-bottom-color: var(--viya-lavender);
}
/* the little arrow under the selected payment method */
.woocommerce-checkout #payment div.payment_box {
  background-color: var(--viya-white);
}
.woocommerce-checkout #payment div.payment_box::before {
  border-bottom-color: var(--viya-white);
}

/* 9. FORM INPUTS ------------------------------------------------------------ */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .input-text,
.woocommerce-page .input-text {
  border: 1px solid var(--viya-lavender);
  border-radius: 0;
  background-color: var(--viya-white);
  color: var(--viya-plum);
  font-family: var(--viya-font-body);
  padding: .6em .7em;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce .input-text:focus,
.woocommerce-page .input-text:focus {
  border-color: var(--viya-plum);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--viya-plum) 25%, transparent);
}
.woocommerce form .form-row.woocommerce-invalid input.input-text {
  border-color: var(--viya-warm-red);
}

/* 10. MY ACCOUNT NAVIGATION ------------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  border: 1px solid var(--viya-lavender);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li {
  border-bottom: 1px solid var(--viya-lavender);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  color: var(--viya-plum);
  font-family: var(--viya-font-body);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active {
  background-color: var(--viya-plum);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
  color: var(--on-plum);
}

/* 11. NOTICES / MESSAGES ---------------------------------------------------
   Woo draws a 3px top accent border + grey panel. Re-tint the accent per
   message type using semantic tokens; keep Woo's layout. */
.woocommerce-message {
  border-top-color: var(--semantic-success); /* midlife blue — no green in palette */
}
.woocommerce-info {
  border-top-color: var(--semantic-info);     /* sky */
}
.woocommerce-error {
  border-top-color: var(--viya-warm-red);
}
.woocommerce-message a:not(.button),
.woocommerce-info a:not(.button),
.woocommerce-error a:not(.button) {
  color: var(--viya-berry);
}