.elementor-kit-1023{--e-global-color-primary:#00602A;--e-global-color-secondary:#904D00;--e-global-color-text:#3F493F;--e-global-color-accent:#8B3916;--e-global-color-dd69323:#FBF9F5;--e-global-color-28fef47:#1E7A3D;--e-global-color-6e9731c:#BFCABC;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;font-family:"Hanken Grotesk", Sans-serif;}.elementor-kit-1023 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ==========================================================================
   WGM Nutritionals — global CSS
   Paste into: Elementor → Site Settings → Custom CSS   (Elementor Pro)
   Fallback (free): Appearance → Customize → Additional CSS
   ========================================================================== */

/* ---- 1. Design tokens (Heritage Wellness) ------------------------------- */
:root{
  --wgm-primary:#00602A;
  --wgm-primary-container:#1E7A3D;
  --wgm-on-primary:#FFFFFF;
  --wgm-on-primary-container:#ACFFB8;
  --wgm-secondary:#904D00;      /* honey gold  */
  --wgm-secondary-container:#FE932C;
  --wgm-secondary-fixed:#FFDCC3;
  --wgm-tertiary:#8B3916;       /* terracotta  */
  --wgm-tertiary-container:#AA502B;
  --wgm-surface:#FBF9F5;        /* cream — never pure white */
  --wgm-surface-low:#F5F3EF;
  --wgm-surface-high:#EAE8E4;
  --wgm-surface-lowest:#FFFFFF;
  --wgm-on-surface:#1B1C1A;     /* charcoal    */
  --wgm-on-surface-variant:#3F493F;
  --wgm-outline:#6F7A6E;
  --wgm-outline-variant:#BFCABC;
  --wgm-error:#BA1A1A;

  --wgm-radius-sm:4px;
  --wgm-radius:8px;
  --wgm-radius-md:12px;
  --wgm-radius-lg:16px;

  --wgm-shadow-1:0 4px 8px rgba(0,96,42,.15);
  --wgm-shadow-2:0 8px 16px rgba(0,96,42,.20);
}

/* ---- 2. Page ground ------------------------------------------------------ */
body{ background-color:var(--wgm-surface); }

/* ---- 3. Tactile card hover: shadow spread, never a colour change --------- */
.e-con.wgm-card,
.elementor-widget-wrap .e-con[class*="wgm-card"]{
  transition:box-shadow .3s ease, transform .3s ease;
}
.e-con.wgm-card:hover{
  box-shadow:var(--wgm-shadow-2);
  transform:translateY(-2px);
}

/* ---- 4. Image widgets set to a fixed height must crop, not squash -------- */
.wgm-img-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.wgm-img-cover .elementor-widget-container,
.wgm-img-cover figure,
.wgm-img-cover .elementor-image{ height:100%; }

/* ---- 5. Sticky header polish --------------------------------------------
   IMPORTANT: backdrop-filter is applied on a ::before layer, NOT on
   .elementor-sticky--effects itself. Putting a filter/backdrop-filter/
   transform directly on the sticky header makes that header the
   "containing block" for any fixed-position descendant — including the
   Menu Cart widget's dropdown panel, which uses position:fixed to float
   above the whole page. That was trapping the cart panel inside the
   header box once the sticky effect activated on scroll. Moving the blur
   to a pseudo-element behind the header's content keeps the same frosted
   look without turning the header into a containing block. */
.elementor-sticky--effects{
  position: relative;
  box-shadow:0 2px 10px rgba(0,96,42,.08);
}
.elementor-sticky--effects::before{
  content:"";
  position:absolute;
  inset:0;
  background-color:rgba(251,249,245,.95);
  backdrop-filter:blur(10px);
  z-index:-1;
}
.elementor-sticky--effects .elementor-nav-menu--main{ padding-block:0; }

/* ---- 5c. Menu Cart dropdown — width + stacking fixes ---------------------
   Elementor Pro has no native width control for the Menu Cart dropdown
   (confirmed missing feature, elementor/elementor#20900), so it ships with
   a fixed min-width:330px that overflows small screens. This caps it to
   the viewport on tablet and mobile. The z-index rules make sure the
   dropdown floats above the sticky header rather than losing the
   stacking contest to it. */
@media (max-width:1024px){
  .elementor-widget-woocommerce-menu-cart.elementor-menu-cart--cart-type-mini-cart .elementor-menu-cart__container{
    min-width:0 !important;
    width:calc(100vw - 40px) !important;
    max-width:400px !important;
    left:20px !important;
    right:20px !important;
    inset-inline:20px auto !important;
  }
}

.elementor-element-3fd9594a{
  z-index:9999 !important;
  position:relative !important;
}
.elementor-element-3fd9594a .elementor-menu-cart__container{
  z-index:9999 !important;
}
.elementor-element-57801248{
  z-index:30 !important;
}

/* ---- 5b. Anchor targets clear the sticky header -------------------------
   Without this, /nutrition-services/#corporate scrolls the section under the
   fixed nav and the heading is hidden. Tune the value if you change header height. */
:target,
[id]{ scroll-margin-top: 120px; }

@media (max-width:767px){
  [id]{ scroll-margin-top: 96px; }
}

html{ scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}

/* ---- 6. WooCommerce: match the Heritage card language ------------------- */
.woocommerce ul.products li.product,
.elementor-products-grid ul.products li.product{
  background:var(--wgm-surface-lowest);
  border:1px solid var(--wgm-outline-variant);
  border-radius:var(--wgm-radius-md);
  padding:16px;
  box-shadow:var(--wgm-shadow-1);
  transition:box-shadow .3s ease;
}
.woocommerce ul.products li.product:hover{ box-shadow:var(--wgm-shadow-2); }

.woocommerce ul.products li.product img{
  border-radius:var(--wgm-radius-sm);
  aspect-ratio:1/1;
  object-fit:cover;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:"Source Serif 4",Georgia,serif;
  font-weight:600;
  color:var(--wgm-on-surface);
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price{
  color:var(--wgm-primary);
  font-family:"Hanken Grotesk",system-ui,sans-serif;
  font-weight:600;
}

.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale{
  background:var(--wgm-tertiary);
  color:#fff;
  border-radius:999px;
  font-family:"Hanken Grotesk",system-ui,sans-serif;
  font-size:12px;
  letter-spacing:.05em;
  font-weight:600;
  padding:6px 14px;
  min-height:0;
  min-width:0;
  line-height:1.2;
}

/* Buttons — solid forest green, 8px radius, no shouty uppercase */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt{
  background:var(--wgm-primary);
  color:var(--wgm-on-primary);
  border-radius:var(--wgm-radius);
  font-family:"Hanken Grotesk",system-ui,sans-serif;
  font-weight:600;
  font-size:14px;
  letter-spacing:.05em;
  padding:12px 22px;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce button.button.alt:hover{
  background:var(--wgm-primary-container);
  color:var(--wgm-on-primary);
}

/* Quantity + form fields */
.woocommerce .quantity .qty,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-checkout .input-text{
  background:var(--wgm-surface);
  border:1px solid var(--wgm-outline-variant);
  border-radius:var(--wgm-radius);
  padding:12px 14px;
  color:var(--wgm-on-surface);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce-checkout .input-text:focus{
  border-color:var(--wgm-primary);
  border-width:2px;
  outline:none;
}

/* Notices in brand colours */
.woocommerce-message,
.woocommerce-info{
  border-top-color:var(--wgm-primary);
  background:var(--wgm-surface-low);
  border-radius:var(--wgm-radius);
}
.woocommerce-message::before,
.woocommerce-info::before{ color:var(--wgm-primary); }
.woocommerce-error{
  border-top-color:var(--wgm-error);
  background:#FFDAD6;
  border-radius:var(--wgm-radius);
}

/* Hide the empty ₦0.00 cart total in the header until something is added */
.elementor-menu-cart--empty-indicator-hide .elementor-menu-cart__toggle .elementor-button-text{
  display:none;
}

/* ---- 7. Elementor Pro form: match the input spec ------------------------ */
.elementor-field-group .elementor-field{
  border-radius:var(--wgm-radius)!important;
}
.elementor-field-group .elementor-field:focus{
  border-color:var(--wgm-primary)!important;
  border-width:2px!important;
  outline:none;
}
.elementor-field-subgroup label{ margin-right:18px; }

/* ---- 8. Nested accordion / tabs trim ----------------------------------- */
.e-n-accordion-item{
  border:1px solid var(--wgm-outline-variant);
  border-radius:var(--wgm-radius);
  overflow:hidden;
  background:var(--wgm-surface-lowest);
}
.e-n-tabs-heading button{ font-family:"Hanken Grotesk",system-ui,sans-serif; }

/* ---- 9. Icon-list bullets read as the "three-leaf" mark ---------------- */
.elementor-icon-list-item .elementor-icon-list-icon svg,
.elementor-icon-list-item .elementor-icon-list-icon i{
  color:var(--wgm-primary);
}

/* ---- 10. Responsive guards -------------------------------------------- */
@media (max-width:767px){
  /* Never let a wide table push the page sideways */
  .elementor-widget-text-editor table{ display:block; overflow-x:auto; }
  /* Full-width buttons read better on a phone */
  .wgm-stack-mobile .elementor-button{ width:100%; }
}

/* Anything a container can't scroll, scrolls itself */
.e-con-inner{ min-width:0; }/* End custom CSS */