:root {
	--wd-text-font: "Avenir Roman", Arial, Helvetica, sans-serif;
	--wd-text-font-weight: 400;
	--wd-text-color: rgb(59,173,45);
	--wd-text-font-size: 18px;
	--wd-title-font: "Avenir Medium", Arial, Helvetica, sans-serif;
	--wd-title-font-weight: 800;
	--wd-title-color: rgb(59,173,45);
	--wd-entities-title-font: "Avenir Heavy", Arial, Helvetica, sans-serif;
	--wd-entities-title-font-weight: 500;
	--wd-entities-title-color: rgb(59,173,45);
	--wd-entities-title-color-hover: rgb(2, 21, 137);
	--wd-widget-title-font: "Poppins", Arial, Helvetica, sans-serif;
	--wd-widget-title-font-weight: 600;
	--wd-widget-title-transform: capitalize;
	--wd-widget-title-color: rgb(2,21,137);
	--wd-widget-title-font-size: 16px;
	--wd-primary-color: rgb(59,173,45);
	--wd-alternative-color: rgb(2,21,137);
	--btn-default-bgcolor: rgb(2,21,137);
	--btn-default-bgcolor-hover: rgb(59,173,45);
	--btn-default-color: rgb(255,255,255);
	--btn-default-color-hover: rgb(255,255,255);
	--btn-accented-bgcolor: rgb(59,173,45);
	--btn-accented-bgcolor-hover: rgb(2,21,137);
	--wd-link-color: rgb(0,92,186);
	--wd-link-color-hover: rgb(32,30,52);
	--wd-link-decor-color: rgb(0,92,186);
	--wd-link-decor-color-hover: rgb(32,30,52);
}
html .wd-nav.wd-layout-drilldown > li > a, html .wd-nav.wd-layout-drilldown > li [class*="sub-menu"] > :is(.menu-item,.wd-drilldown-back) > a, html .wd-nav.wd-layout-drilldown .woocommerce-MyAccount-navigation-link > a {
	color: rgb(2,21,137);
}
html .wd-nav.wd-layout-drilldown > li > a:hover, html .wd-nav.wd-layout-drilldown > li [class*="sub-menu"] > :is(.menu-item,.wd-drilldown-back) > a:hover, html .wd-nav.wd-layout-drilldown >li [class*="sub-menu"] > .woocommerce-MyAccount-navigation-link > a:hover, html .wd-nav.wd-layout-drilldown li.current-menu-item > a {
	color: rgb(59,173,45);
}
html .wd-nav.wd-nav-main > li > a {
	font-family: "Avenir Black", Arial, Helvetica, sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 24px;
	text-transform: none;
	color: rgb(2,21,137);
}
html .wd-nav.wd-nav-main > li:hover > a, html .wd-nav.wd-nav-main > li.current-menu-item > a {
	color: rgb(59,173,45);
}
body, [class*=color-scheme-light], [class*=color-scheme-dark], .wd-search-form[class*="wd-header-search-form"] form.searchform, .wd-el-search .searchform {
	--wd-form-color: rgb(2,21,137);
	--wd-form-placeholder-color: rgb(59,173,45);
}
.wd-nav-arrows.wd-pos-sep:not(:where(.wd-custom-style)) {
	--wd-arrow-bg: rgb(59,173,45);
	--wd-arrow-bg-hover: rgb(2,21,137);
	--wd-arrow-bg-dis: rgb(229,229,229);
}
.wd-nav-pagin-wrap:not(.wd-custom-style) {
	--wd-pagin-bg: rgb(242,247,232);
	--wd-pagin-bg-hover: rgb(59,173,45);
	--wd-pagin-bg-act: rgb(2,21,137);
	--wd-pagin-brd-color: rgb(242,247,232);
	--wd-pagin-brd-color-hover: rgb(59,173,45);
	--wd-pagin-brd-color-act: rgb(2,21,137);
}

@media (max-width: 1024px) {
	:root {
		--wd-text-font-size: 17px;
	}

}

@media (max-width: 768.98px) {
	:root {
		--wd-text-font-size: 16px;
	}

}
:root{
--btn-accented-color: #fff;
--btn-accented-color-hover: #fff;
}




/* Mobile Menu BG */
.mobile-nav.wd-side-hidden.brand-aloex{
  --mm-menu-bg: #F2F7E8;
}

/* Mobile menu tabs (colors + tab font) */
.mobile-nav.wd-side-hidden-nav.brand-aloex{
  --mm-tabbar-bg: #3BAD2D;           /* tabs strip background */
  --mm-tabbar-border: #3BAD2D ;   /* thin line under tabs strip */

  --mm-tab-bg: #3BAD2D;          /* inactive tab background */
  --mm-tab-bg-hover: rgba(0,0,0,.08);    /* tab background on hover */
  --mm-tab-bg-active: rgba(0,0,0,.10);   /* active tab background */

  --mm-tab-text: #FFFFFF;        /* inactive tab text */
  --mm-tab-text-hover: #FFFFFF;  /* tab text on hover */
  --mm-tab-text-active: #FFFFFF; /* active tab text */

  --mm-tab-underline: #F7A709;   /* active tab underline */

  --mm-tab-font-size: 12px;             /* tab label size */
  --mm-tab-font-weight: 700;            /* tab label weight */
  --mm-tab-letter-spacing: .06em;       /* tab label tracking */
  --mm-tab-text-transform: uppercase;   /* uppercase / none */
}



/* Mobile menu Styling - Drop Down & Arrows */
.mobile-nav.wd-side-hidden-nav.brand-aloex{

/*  --mm-row-text: rgba(0,0,0,.82);      */  /* normal menu link text */
/*  --mm-row-text-hover: rgba(0,0,0,.92); */ /* menu link text on hover */
/* --mm-row-bg-hover: rgba(0,0,0,.05); */   /* hover background behind the link row */
	
	  --mm-back-text: #021589;       			/* BACK Text Color */

	  --mm-back-bg: #E5EDD5;         			/* BACK Background */
	  --mm-parent-row-bg: #E5EDD5;				/* Shop Row Background */
	
	  --mm-parent-row-bg-hover: #E5EDD5;	/* Shop Row Background Hoover */

	
	  --mm-opener-bg: #021589;       			/* Shop Arrow Background */
	  --mm-back-opener-bg: #021589;  			/* BACK Arrow Background */

	  --mm-back-opener-bg-hover: #3BAD2D; /* Back Arrow Background Hoover */
	  --mm-opener-bg-hover: #3BAD2D; 			/* Shop Arrow Background Hoover */	
	
	  --mm-opener-icon: #F2F7E8;					/* Arrow Icon Color */
	  --mm-back-opener-icon: #F2F7E8;			/* Back Arrow Icon Color  */
	}



/* BRAND — Mobile menu header logo */
.mobile-nav.wd-side-hidden-nav.brand-aloex{
  --mm-menu-logo: url("https://santrel.com/wp-content/uploads/2026/01/Aloex-3-1.webp");
	--mm-menu-logo-w: 150px;
  --mm-menu-logo-h: 40px;

  /* Choose ONE side (make the other auto) */
  --mm-menu-logo-left: 0px;   /* logo on LEFT */
  --mm-menu-logo-right: 16px;

  /* If you want it on the RIGHT instead, swap to:
  --mm-menu-logo-left: auto;
  --mm-menu-logo-right: 16px;
  */
}