/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra Child Theme by OuterBox
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

/* TOC:
- Variables
- Utility
- Typography
- Slider
- Carousel
- Video
- Tabbed Content
- Tables
- Forms
- Mobile Menu
*/

:root {
  /* Spacing */
  --space-base: 16px;
  --space-xxs: calc(var(--space-base)* 0.25);
  --space-xs: calc(var(--space-base)* 0.5);
  --space-sm: calc(var(--space-base)* 0.75);
  --space-md: calc(var(--space-base)* 1.5);
  --space-lg: calc(var(--space-base)* 2);
  --space-xl: calc(var(--space-base)* 2.5);
  --space-xxl: calc(var(--space-base)* 4);
  --space-xxxl: calc(var(--space-base)* 5);
  --section-space: var(--space-xxxl);
  --gutter: var(--space-xxl);
  --gutter-sm: var(--space-lg);

  /* Fonts */
  --text-base: 16px;
  --text-sm: calc(var(--text-base)* 0.875);
  --text-lg: calc(var(--text-base)* 1.125);
  --heading-xxs: calc(var(--text-base)* 0.875);
  --heading-xs: calc(var(--text-base)* 1);
  --heading-sm: calc(var(--text-base)* 1.25);
  --heading-md: calc(var(--text-base)* 1.5);
  --heading-lg: calc(var(--text-base)* 2);
  --heading-xl: calc(var(--text-base)* 2.5);
  --heading-xxl: calc(var(--text-base)* 3);
  --heading-xxxl: calc(var(--text-base)* 3.5);
  --font-weight-regular: 400;
  --font-weight-semibold: 700;
  --font-weight-bold: 800;
  --line-height-body: 1.5;
  --line-height-heading: 1.25;
  --font-family-heading: IBM Plex Sans, sans-serif;
  --font-family-body: Inter, sans-serif;

  /* Colors */
  --color-brand-light-blue: #37ADFF;
  --color-brand-blue: #0096FF;
  --color-brand-black: #000000;
  --color-brand-white: #FFFFFF;
  --color-text-black: var(--color-brand-black);
  --color-text-white: var(--color-brand-white);
  --color-text-light-blue: var(--color-brand-light-blue);

  --color-ui-01: #EBF1F5;
  --color-ui-02: #B5B8B9;
  --color-ui-03: #4C636D;
  --color-ui-white: #FFFFFF;

  /* Border Radius */
  --border-radius-sm: 0px;
  --border-radius-md: 0px;
  --border-radius-lg: 0px;
  --border-radius-button: var(--border-radius-sm);
  --border-radius-element: var(--border-radius-lg);
}


@media only screen and (max-width : 991px) {
  :root {
    --heading-xxs: calc(var(--text-base)* 0.875);
    --heading-xs: calc(var(--text-base)* 1);
    --heading-sm: calc(var(--text-base)* 1.125);
    --heading-md: calc(var(--text-base)* 1.25);
    --heading-lg: calc(var(--text-base)* 1.5);
    --heading-xl: calc(var(--text-base)* 2);
    --heading-xxl: calc(var(--text-base)* 2.5);
    --heading-xxxl: calc(var(--text-base)* 2.5);
    --section-space: var(--space-xl);
    --gutter: var(--space-lg);
    --gutter-sm: var(--space-md);
  }
}

/* Utility/Reset */
body {
  color: var(--color-text-black);
}
.border-radius-element {
  img, span, div, .elementor-slides .swiper-slide {
    border-radius: var(--border-radius-element);
  }
}

ul {
  margin-bottom: 0;
  margin-left: 1em;
}

.padding-full {
  padding: var(--section-space) var(--section-side-space);
}

.padding-top {
  padding: var(--section-space) var(--section-side-space) 0 var(--section-side-space);
}

.padding-bottom {
  padding: 0 var(--section-side-space) var(--section-space) var(--section-side-space);
}

.padding-none {
  padding: 0px var(--section-side-space);
}

.is-hidden {
  display: none !important;
}

@media only screen and (min-width: 1200px) {
  .is-hidden--desktop {
    display: none !important;
  }
}

@media only screen and (min-width: 768px) and (width < 1200px) {
  .is-hidden--tablet {
    display: none !important;
  }
}

@media only screen and (width < 768px) {
  .is-hidden--mobile {
    display: none !important;
  }
}

/* Typography */

a.elementor-element {
  text-decoration: none !important;
}

.eyebrow-heading,
.headline-heading,
h1,
.heading1,
h2,
.heading2,
h3,
.heading3,
h4,
.heading4,
h5,
.heading5,
h6,
.heading6,
h6 {
  &, span, h1, h2, h3, h4, h5, h6 {
    color: var(--color-text-black);
  }
}

.eyebrow-heading {
  &, a, span, h1, h2, h3, h4, h5, h6 {
    line-height: 1.5 !important;
    font-size: var(--heading-xs) !important;
    font-family: var(--font-family-heading) !important;
    text-transform: uppercase;
    font-weight: var(--font-weight-bold) !important;
    letter-spacing: 1px !important;
  }
}

.headline-heading {
  &, a, span, h1, h2, h3, h4, h5, h6 {
    line-height: var(--line-height-heading) !important;
    font-size: var(--heading-xxxl) !important;
    font-family: var(--font-family-heading) !important;
    font-weight: var(--font-weight-bold) !important;
  }
}

h1,
.heading1 {
  &, a, span, h1, h2, h3, h4, h5, h6 {
    line-height: var(--line-height-heading) !important;
    font-size: var(--heading-xxl) !important;
    font-family: var(--font-family-heading) !important;
    font-weight: var(--font-weight-bold) !important;
  }
}

h2,
.heading2 {
  &, a, span, h1, h2, h3, h4, h5, h6 {
    line-height: var(--line-height-heading) !important;
    font-size: var(--heading-xl) !important;
    font-family: var(--font-family-heading) !important;
    font-weight: var(--font-weight-bold) !important;
  }
}

h3,
.heading3 {
  &, a, span, h1, h2, h3, h4, h5, h6 {
    line-height: var(--line-height-heading) !important;
    font-size: var(--heading-lg) !important;
    font-family: var(--font-family-heading) !important;
    font-weight: var(--font-weight-bold) !important;
  }
}

h4,
.heading4 {
  &, a, span, h1, h2, h3, h4, h5, h6 {
    line-height: var(--line-height-heading) !important;
    font-size: var(--heading-md) !important;
    font-family: var(--font-family-heading) !important;
    font-weight: var(--font-weight-bold) !important;
  }
}

h5,
.heading5 {
  &, a, span, h1, h2, h3, h4, h5, h6 {
    line-height: var(--line-height-heading) !important;
    font-size: var(--heading-sm) !important;
    font-family: var(--font-family-heading) !important;
    font-weight: var(--font-weight-bold) !important;
  }
}

h6,
.heading6 {
  &, a, span, h1, h2, h3, h4, h5, h6 {
    line-height: var(--line-height-body) !important;
    font-size: var(--heading-xs) !important;
    font-family: var(--font-family-heading) !important;
    font-weight: var(--font-weight-bold) !important;
  }
}

li,
p,
th,
td,
.woocommerce-message,
.woocommerce-info {
  a {
    font-weight: var(--font-weight-bold);
    color: var(--color-brand-blue);

    &:hover {
      color: var(--color-text-black);
    }
  }
}


p {
  margin-bottom: 0 !important;
  font-size: var(--text-base);
  font-family: var(--font-family-body);
  line-height: var(--line-height-body);
}

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

.p--large {
  font-size: var(--text-lg);
}

p + p {
  margin-top: var(--space-base) !important;
}

body, button, input, select, textarea {
  font-family: var(--font-family-body);
}

.elementor-button {
  border-radius: var(--border-radius-button);
  padding: var(--space-sm) var(--space-md) !important;
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  line-height: 1.35 !important;
}

button[name="update_cart"][disabled], button[name="update_cart"]{
  border: 2px solid rgba(0, 150, 255,0.5)!important;
  i{
    color:rgba(0, 150, 255,0.5)!important;
  }
}
button[name="update_cart"]:not(:hover){
  i{
    color: var(--color-brand-blue)!important;
  }
}
button[name="update_cart"]:hover{
  i{
    color: #fff!important;
  }
}
/* button[name="update_cart"]:not([disabled]):hover{
  background: rgba(0,0,0,0.5)!important;
} */
/* Slider */
.elementor-widget-loop-carousel.e-widget-swiper .swiper-wrapper{
  justify-content: center;
}
.elementor-swiper {
  margin-bottom: 16px;
}
.elementor-element .swiper .swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: var(--space-md);
}
.elementor-element.elementor-arrows-position-outside .swiper {
  width: calc(100% - 80px);
}
.elementor-slides .swiper-slide {
  position: relative;
  overflow: hidden;
}


/* Carousel */
.swiper-pagination-bullet {
  --bullet-size: 12px;

  opacity: 1;
  position: relative;
  width: var(--bullet-size) !important;
  height: var(--bullet-size) !important;
  border: 1px solid var(--color-brand-blue) !important;
  background-color: var(--color-ui-white) !important;
  border-radius: 0 !important;
  margin-inline: calc(var(--space-md) / 2) !important;

  &.swiper-pagination-bullet-active {
    background-color: var(--color-brand-blue) !important;
  }
}
.elementor-swiper-button .fa-arrow-left,
.elementor-swiper-button .fa-arrow-right,
.eicon-chevron-left,
.eicon-chevron-right {
  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.38,11.06L10.66,1.34l1.34-1.34,12,12-12,12-1.34-1.34,9.72-9.72H0v-1.89h20.38Z" style="fill-rule:evenodd;"/></svg>');
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  display: block;
}
.elementor-swiper-button .fa-arrow-left:before,
.elementor-swiper-button .fa-arrow-right:before,
.eicon-chevron-left:before,
.eicon-chevron-right:before {
  background-color: currentColor;
}
.elementor-swiper-button .fa-arrow-left,
.eicon-chevron-left {
  transform: rotate(180deg);
}
.swiper-button-disabled {
  display: none !important;
}


/* Video */
.elementor-widget-video {
  border-radius: var(--border-radius-element);
  position: relative;
  overflow: hidden;
}
.elementor-custom-embed-image-overlay:after {
  content: '';
  background-color: var(--color-text-black);
  opacity: .3;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.elementor-custom-embed-play {
  z-index: 2;
}
.elementor-custom-embed-image-overlay:hover .eicon-play {
  opacity: .8 !important;
}
.eicon-play {
  background-color: currentColor;
  border-radius: 100%;
  opacity: 1 !important;
}
.eicon-play:before {
  opacity: 0;
}
.eicon-play:after {
  content: '';
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22"><path fill="%230E6E92" d="M0,2.22v17.56c0,1.68,1.89,2.75,3.45,1.96l17.31-8.78c1.65-.84,1.65-3.08,0-3.91L3.45.27C1.89-.53,0,.55,0,2.22Z"/></svg>') center center no-repeat transparent;
  background-size: 16px;
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 2px;
  top: 1px;
}
#breadcrumbs i.fa-chevron-right {
    color: #B5B8B9;
}
/* Tabbed Content */
.tabs-left .e-n-tabs-heading button {
  position: relative;
}
.tabs-left .e-n-tabs-heading button:after {
  content: '';
  width: 100%;
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  background-color: var(--color-ui-01);
}
@media only screen and (max-width: 767px) {
  .tabs-top .e-n-tabs-heading button {
    position: relative;
  }
  .tabs-top .e-n-tabs-heading button:after {
    content: '';
    width: 100%;
    height: 1px;
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    background-color: var(--color-ui-01);
  }
}


/* Tables */

@media only screen and (max-width: 1024px) {
  .html-table {
    overflow: auto;

    table {
      width: 1024px;
    }
  }
}


/* Forms */
form {
  .gfield_label {
    color: var(--color-text-black) !important;
    line-height: 1.5;
    font-size: var(--text-base) !important;
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-bold) !important;
    float: left;
  }
  .gfield_required {
    text-transform: lowercase;
    color: var(--color-brand-blue);
    font-size: var(--text-sm) !important;
    font-weight: var(--font-weight-bold);
  }
  .ginput_container input[type="text"],
  .ginput_container input[type="tel"],
  .ginput_container input[type="email"],
  #coupon_code {
    border: 1px solid var(--color-ui-02) !important;
    padding: var(--space-sm) var(--space-base) !important;
    height: 48px !important;
    line-height: 48px !important;
    max-height: none !important;
  }
  .ginput_container textarea {
    border: 1px solid var(--color-ui-02) !important;
    padding: var(--space-sm) var(--space-base) !important;
    height: 96px !important;
  }
  .ginput_container select {
    border: 1px solid var(--color-ui-02) !important;
    padding: 0 var(--space-base) !important;
    height: 48px !important;
    line-height: 48px !important;
  }
  label + .gfield_description {
    text-transform: lowercase;
    color: var(--color-ui-03);
    font-size: var(--text-sm) !important;
    left: 8px;
    top: 1px;
    position: relative;
  }
  .gform_fields {
    row-gap: var(--space-md) !important;
    align-items: baseline;
  }
}

.form-wide form .gfield--width-half {
  grid-column: 1 / -1;
}

.form-light form .gfield_label,
.form-light form .gfield_required,
.form-light form .gfield_description {
  color: var(--color-text-white) !important;
}


/* Mobile Menu */
.off-canvas-toggle a[aria-expanded="true"] {
  &::before {
    display: block;
    content: '\f00d';
    font-family: 'Font Awesome 7 Pro';
    font-weight: 900;
    color: var(--color-text-white);
    width: 21px;
  }

  svg {
    display: none;
  }
}
.elementor-widget-off-canvas {
  .e-off-canvas__overlay {
    background-color: transparent !important;
  }
  .e-off-canvas__content {
    width: 100%;
  }
  .e-off-canvas__main {
    height: calc(100% - var(--header-height));
    top: var(--header-height);
    overflow-y: auto;
  }
}
.e-off-canvas .elementor-nav-menu--main {
  ul {
    position: relative;
    height: 100%;
  }
  ul li {
    position: relative;
  }
  ul li>.submenu-toggle {
    cursor: pointer;
    position: absolute;
    width: 40px;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    text-align: right;
  }
  ul li a {
    margin: 0;
    border: 0;
  }
  ul li {
    a:after {
      content: '';
      opacity: 1 !important;
      height: 1px;
      width: 100%;
      background-color: var(--color-ui-03);
      display: block;
      position: absolute;
      left: 0;
      bottom: 0;
    }

    &.heading1,
    &.heading2,
    &.heading3,
    &.heading4,
    &.heading5,
    &.heading6 {
      a:after {
        background-color: var(--color-brand-blue);
      }
    }
  }
  .sub-menu .heading3 + li {
    font-weight: var(--font-weight-bold);
  }
  ul li a > span {
    display: none !important;
  }
  ul ul {
    position: absolute;
    left: 100vw !important;
    transition: left 0.2s ease-in-out;
    z-index: 3;
    background-color: white;
    width: 100% !important;
    top: 0 !important;
    transition: none;
    margin-left: 0 !important;
    margin-top: 0 !important;
  }
  ul li.submenu-active {
    position: static;
  }
  ul li.submenu-active > ul {
    left: 0 !important;
    transition: left 0.2s ease-in-out;
    z-index: 9;
    display: block !important;
  }
  button.submenu-toggle {
    --btn-color: transparent;
    --btn-text-color: var(--color-brand-blue);

    position: relative;
    width: 40px;
    height: 40px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 0;
    line-height: 1.5;
    color: var(--color-text-black);
    font-weight: var(--font-weight-bold);
    background-color: transparent;
    padding: 0;
  }
  button.submenu-back-button {
    --btn-color: transparent;
    --btn-text-color: var(--color-text-black);
    --btn-gap: var(--space-xs);
    --btn-font-weight: var(--font-weight-regular);
    --btn-transform: capitalize;
    --btn-padding-block: 0;
    --btn-padding-inline: 0;

    position: relative;
    display: flex;
    align-items: center;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 0;
    line-height: 1.5;
    padding: 13px 0;

    i {
      color: var(--color-brand-blue);
    }
  }
}

#mobile-nav .search-container {
  padding: var(--space-md) 0;

  .search-form input {
    width: 100%;
  }
}
.mobile-nav__utility {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-md);

  i {
    width: 20px;
    color: var(--color-brand-03);
  }

  a {
    text-decoration: none;
    color: var(--color-text-black);
  }
}
h2.gform_submission_error {
    font-size: var(--heading-sm) !important;
}
/* additional styles */
.promoBanner--close {
  cursor: pointer;
  position: absolute;
  right: var(--space-sm);
  top: 50%;
  transform: translateY(-50%);
}

.elementor-widget-search form.e-search-form {
  .e-search-input-wrapper input[type="search"] {
    padding-inline: var(--space-sm);
    padding-block: var(--space-base);
  }

  .e-search-submit {
    --btn-padding-inline: var(--space-base);
    --btn-padding-block: var(--space-base);

    margin: 0;

    &:hover {
      --btn-border-color: var(--color-brand-blue);
	  /* --btn-border-size: 1px; */

      border-style: none;
      outline: 1px solid var(--color-brand-blue);
    }

    i {
      margin: 0;
    }
  }
}

.main-navigation--desktop {
  box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.10);

  a.menu-link,
  a.menu-link.highlighted {
    padding: 0;
    display: flex;
    gap: var(--space-xxs);
    border: none !important;

    .sub-arrow {
      padding: 0;
      color: var(--color-brand-blue);
    }

    &:hover,
    &:focus {
      padding: 0;
    }
  }

  .menu-item {
    flex-grow: 0 !important;

    &.menu-item-has-children {
      > a.menu-link {
        padding-block: var(--space-md);
      }

      &::after {
        content: '' !important;
        position: absolute;
        inset-inline: 0;
        bottom: 0;
        height: 2px !important;
        display: block;
        width: 100%;
        background-color: transparent;
        border: none !important;
      }

      &:hover,
      &:focus-within {
        &::after {
          background-color: var(--color-brand-blue);
        }

        > a.menu-link {
          color: var(--color-brand-blue);
        }

        > .sub-menu {
          display: flex;
        }

        .sub-arrow {
          transform: rotate(180deg);
        }
      }
    }
  }

  .sub-menu {
    background-color: var(--color-brand-white) !important;
    padding: var(--space-xl) !important;
    max-height: 320px;
    width: max-content !important;
    min-width: 100%;
    flex-direction: column;
    flex-wrap: wrap;
    column-gap: var(--space-xl);
    row-gap: var(--space-sm);
    box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.10);
  }

  .elementor-nav-menu--layout-horizontal .elementor-nav-menu {
    justify-content: space-between;

    &::after {
      display: none;
    }
  }
}

/* BUTTONS */
button.show-password-input {
  display: none !important;
}

button,
a.button,
.btn,
a.btn,
.elementor-button,
[id^="gform_submit_button_"],
.elementor-slide-button,
a.elementor-slide-button,
a.checkout-button,
a.woocommerce-button {
  /* basic button style */
  --btn-font-size: var(--text-base);
  --btn-color: var(--color-brand-blue);
  --btn-border-color: var(--color-brand-blue);
  --btn-text-color: var(--color-text-white);
  --btn-border-size: 2px;
  --btn-transform: uppercase;
  --btn-font-weight: var(--font-weight-bold, 700);
  --btn-padding-inline: var(--space-md, 16px);
  --btn-padding-block: var(--space-sm, 12px);
  --btn-gap: var(--space-xs, 8px);

  font-family: var(--font-family-heading);
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  font-size: var(--btn-font-size, 1em);
  font-weight: var(--btn-font-weight, inherit) !important;
  text-decoration: none !important;
  text-transform: var(--btn-transform, uppercase) !important;
  color: var(--btn-text-color, inherit) !important;
  background-color: var(--btn-color, inherit) !important;
  padding-inline: var(--btn-padding-inline, inherit) !important;
  padding-block: var(--btn-padding-block, inherit) !important;
  border-radius: var(--border-radius-button, 0) !important;
  border-color: var(--btn-border-color, inherit) !important;
  border-style: solid;
  gap: var(--btn-gap, inherit) !important;
  border-width: var(--btn-border-size, 1px) !important;
  cursor: pointer;
  line-height: 1.5;
  letter-spacing: 1px;
  transition: 0.3s;

  .elementor-button-content-wrapper {
    gap: var(--btn-gap, inherit) !important;
    transition: 0.3s;
  }
}

button:focus,
a.button:focus,
.btn:focus,
a.btn:focus,
.elementor-button:focus,
[id^="gform_submit_button_"]:focus,
.elementor-slide-button:focus,
a.elementor-slide-button:focus,
a.checkout-button:focus,
a.woocommerce-button:focus {
  outline: 2px dashed var(--color-brand-black);
  outline-offset: 4px;
}

.faux-link:focus .btn--primary-dark,
.btn--primary-dark:focus,
a.btn--primary-dark:focus,
.faux-link:focus .btn--secondary-dark,
.btn--secondary-dark:focus,
a.btn--secondary-dark:focus,
.faux-link:focus .btn--tertiary-dark,
.btn--tertiary-dark:focus,
a.btn--tertiary-dark:focus {
  outline-color: var(--color-brand-white);
}

button:hover,
button:active,
button[disabled],
a.button:hover,
a.button:active,
a.button[disabled],
.btn:hover,
.btn:active,
.btn[disabled],
a.btn:hover,
a.btn:active,
a.btn[disabled],
.elementor-button:hover,
.elementor-button:active,
.elementor-button[disabled],
[disabled] .elementor-button,
[id^="gform_submit_button_"]:hover,
[id^="gform_submit_button_"]:active,
[id^="gform_submit_button_"][disabled],
.elementor-slide-button:hover,
.elementor-slide-button:active,
.elementor-slide-button[disabled],
a.elementor-slide-button:hover,
a.elementor-slide-button:active,
a.elementor-slide-button[disabled],
a.checkout-button:hover,
a.checkout-button:active,
a.checkout-button[disabled],
a.woocommerce-button:hover,
a.woocommerce-button:active,
a.woocommerce-button[disabled] {
  --btn-color: var(--color-brand-black);
  --btn-border-color: var(--color-brand-black);
  --btn-text-color: var(--color-text-white);
}

button[disabled],
a.button[disabled],
.btn[disabled],
a.btn[disabled],
.elementor-button[disabled],
[disabled] .elementor-button,
[id^="gform_submit_button_"][disabled],
.elementor-slide-button[disabled],
a.elementor-slide-button[disabled],
a.checkout-button[disabled],
a.woocommerce-button[disabled] {
  opacity: 0.3;
  cursor: not-allowed;
}

.btn--primary,
a.btn--primary,
.elementor-button {
  --btn-color: var(--color-brand-blue);
  --btn-border-color: var(--color-brand-blue);
  --btn-text-color: var(--color-text-white);
}

.faux-link:hover .btn--primary,
.faux-link:active .btn--primary,
.faux-link:hover .elementor-button,
.faux-link:active .elementor-button,
.btn--primary:hover,
.btn--primary:active,
a.btn--primary:hover,
a.btn--primary:active,
.elementor-button:hover,
.elementor-button:active {
  --btn-color: var(--color-brand-black);
  --btn-border-color: var(--color-brand-black);
  --btn-text-color: var(--color-text-white);
}

.btn--secondary,
a.btn--secondary {
  --btn-color: var(--color-brand-white);
  --btn-border-color: var(--color-brand-blue);
  --btn-text-color: var(--color-text-black);
}

.faux-link:hover .btn--secondary,
.btn--secondary:hover,
a.btn--secondary:hover {
  --btn-color: var(--color-brand-black);
  --btn-border-color: var(--color-brand-black);
  --btn-text-color: var(--color-text-white);
}

.faux-link[disabled] .btn--secondary,
.faux-link:active .btn--secondary,
.btn--secondary[disabled],
.btn--secondary:active,
a.btn--secondary[disabled],
a.btn--secondary:active {
  --btn-color: var(--color-brand-white);
  --btn-border-color: var(--color-brand-black);
  --btn-text-color: var(--color-text-black);
}

.btn--tertiary,
a.btn--tertiary {
  --btn-color: transparent;
  --btn-border-color: var(--btn-text-color);
  --btn-text-color: var(--color-text-black);
  --btn-padding-inline: 0;
  --btn-padding-block: 0;
  --btn-border-size: 0 0 1px 0;
}

.faux-link:hover .btn--tertiary,
.btn--tertiary:hover,
a.btn--tertiary:hover {
  --btn-color: transparent;
  --btn-border-color: var(--btn-text-color);
  --btn-text-color: var(--color-brand-blue);
  --btn-gap: var(--space-sm);
}

.faux-link:active .btn--tertiary,
.btn--tertiary:active,
a.btn--tertiary:active {
  --btn-color: transparent;
  --btn-border-color: transparent;
  --btn-text-color: var(--color-brand-blue);
  --btn-padding-block: var(--space-sm);
}

.faux-link[disabled] .btn--tertiary,
.btn--tertiary[disabled],
a.btn--tertiary[disabled] {
  --btn-color: transparent;
  --btn-border-color: var(--btn-text-color);
  --btn-text-color: var(--color-text-black);
  --btn-padding-block: var(--space-sm);
}

.btn--primary-dark,
a.btn--primary-dark {
  --btn-color: var(--color-brand-white);
  --btn-border-color: var(--color-brand-white);
  --btn-text-color: var(--color-text-black);
}

.faux-link:hover .btn--primary-dark,
.btn--primary-dark:hover,
a.btn--primary-dark:hover {
  --btn-color: var(--color-brand-black);
  --btn-border-color: var(--color-brand-white);
  --btn-text-color: var(--color-text-white);
}

.faux-link:active .btn--primary-dark,
.faux-link[disabled] .btn--secondary,
.btn--primary-dark:active,
.btn--primary-dark[disabled],
a.btn--primary-dark:active,
a.btn--primary-dark[disabled] {
  --btn-color: var(--color-brand-white);
  --btn-border-color: var(--color-brand-white);
  --btn-text-color: var(--color-text-black);
}

.btn--secondary-dark,
a.btn--secondary-dark {
  --btn-color: var(--color-brand-black);
  --btn-border-color: var(--color-brand-white);
  --btn-text-color: var(--color-text-white);
}

.faux-link:hover .btn--secondary-dark,
.btn--secondary-dark:hover,
a.btn--secondary-dark:hover {
  --btn-color: var(--color-brand-white);
  --btn-border-color: var(--color-brand-white);
  --btn-text-color: var(--color-text-black);
}

.faux-link[disabled] .btn--secondary-dark,
.faux-link:active .btn--secondary-dark,
.btn--secondary-dark[disabled],
.btn--secondary-dark:active,
a.btn--secondary-dark[disabled],
a.btn--secondary-dark:active {
  --btn-color: var(--color-brand-black);
  --btn-border-color: var(--color-brand-white);
  --btn-text-color: var(--color-text-white);
}

.btn--tertiary-dark,
a.btn--tertiary-dark {
  --btn-color: transparent;
  --btn-border-color: var(--btn-text-color);
  --btn-text-color: var(--color-text-white);
  --btn-padding-inline: 0;
  --btn-border-size: 0 0 1px 0;
}

.faux-link:hover .btn--tertiary-dark,
.btn--tertiary-dark:hover,
a.btn--tertiary-dark:hover {
  --btn-color: transparent;
  --btn-border-color: var(--btn-text-color);
  --btn-text-color: var(--color-text-white);
  --btn-gap: var(--space-sm);
}

.faux-link:active .btn--tertiary-dark,
.btn--tertiary-dark:active,
a.btn--tertiary-dark:active {
  --btn-color: transparent;
  --btn-border-color: transparent;
  --btn-text-color: var(--color-text-white);
}

.faux-link[disabled] .btn--tertiary-dark,
.btn--tertiary-dark[disabled],
a.btn--tertiary-dark[disabled] {
  --btn-color: transparent;
  --btn-border-color: var(--btn-text-color);
  --btn-text-color: var(--color-text-white);
}

.btn--download,
a.btn--download {
  --btn-color: var(--color-brand-white);
  --btn-border-color: var(--color-brand-blue);
  --btn-text-color: var(--color-brand-blue);

  white-space: normal;

  > .elementor-button-content-wrapper:has(.elementor-button-icon) {
    width: 100%;
    justify-content: space-between;

    .elementor-button-icon {
      color: var(--color-brand-blue);
    }
  }
}

.faux-link:hover .btn--download,
.btn--download:hover,
a.btn--download:hover {
  --btn-color: var(--color-brand-blue);
  --btn-border-color: var(--color-brand-blue);
  --btn-text-color: var(--color-text-white);

  > .elementor-button-content-wrapper:has(.elementor-button-icon) {
    .elementor-button-icon {
      color: var(--btn-text-color);
    }
  }
}

/* HEADER */
.utility-nav__mobile .btn i {
  color: var(--color-brand-blue);
}

/* FOOTER */
.footer__bottom-bar a:hover {
  text-decoration: underline;
}

@media (width < 1200px) {
  .footer__nav .hfe-nav-menu > li {
    margin-bottom: var(--space-base);

    .hfe-has-submenu-container a {
      line-height: 1.5 !important;
      font-size: var(--heading-xs) !important;
      font-family: var(--font-family-heading) !important;
      text-transform: uppercase;
      font-weight: var(--font-weight-bold) !important;
      letter-spacing: 1px !important;
      padding-bottom: var(--space-xs);
      border-bottom: 1px solid var(--color-brand-blue);

      .hfe-menu-toggle {
        color: var(--color-brand-blue);
      }
    }

    a {
      color: var(--color-text-black);
    }
  }
}
@media (min-width: 1200px) {
  .footer__nav {
    nav {
      columns: 3;
      width: auto !important;
      column-gap: var(--space-xxxl);

      > ul > .menu-item {
        break-inside: avoid;
        margin-bottom: var(--space-lg);

        &:first-child,
        &:last-child {
          .sub-menu {
            columns: 2;
          }
        }

        .hfe-has-submenu-container {
          padding-bottom: var(--space-base);
          margin-bottom: var(--space-base);
          border-bottom: 1px solid var(--color-brand-blue);
          line-height: 1.5;
          font-size: var(--heading-xs);
          font-family: var(--font-family-heading);
          text-transform: uppercase;
          font-weight: var(--font-weight-bold);
          letter-spacing: 1px;

          a {
            color: var(--color-text-black);

            &:hover {
              color: var(--color-brand-blue);
            }

            .hfe-menu-toggle {
              display: none;
            }
          }
        }
      }

      .sub-menu {
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        position: relative !important;

        a.hfe-sub-menu-item {
          font-family: var(--font-family-body);
          font-weight: var(--font-weight-regular);
          padding-inline: 0;
          padding-block: var(--space-xs) 0;
          color: var(--color-brand-black);

          &:hover {
            color: var(--color-brand-blue);
          }
        }
      }
    }
  }
}

/* HERO - HOME */
@media screen and (min-width: 1200px) {
  .image-edge__left-content .e-con-inner {
    margin-inline: auto 0;
  }
  .image-edge__right-content .e-con-inner {
    margin-inline: 0 auto;
  }
}

.hero__home--carousel {
  &, *:not(.swiper-pagination):not(.swiper-pagination-bullet) {
    height: 100% !important;
    min-height: 100% !important;
  }

  img {
    object-fit: cover;
  }

  .swiper-pagination-bullet {
    border: 1px solid var(--color-ui-white) !important;
    background-color: var(--color-brand-blue) !important;

    &.swiper-pagination-bullet-active {
      background-color: var(--color-ui-white) !important;
    }
  }
}

/* VALUE PROPS */
.value-props {
  .elementor-icon-list-items {
    justify-content: space-between;
    gap: var(--space-base);

    .elementor-icon-list-item {
      margin-inline: 0;
      gap: var(--space-sm);
    }
  }
}

.faux-link:has(a) {
  cursor: pointer;
}

/* CARDS */
.woocommerce.elementor-widget-loop-grid .elementor.has-post-thumbnail .card.card__product.faux-link.card__product-lightzoom{
  .placeholder-thumbnail-spacer{
    display: none;
    height: 0px;
  }
}
/* .woocommerce.elementor-widget-loop-grid .elementor:not(.has-post-thumbnail) .card__inner {
    justify-content: center !important;
    align-items: center;
    .card-contents{
      flex-grow: 1;
      justify-content: flex-end;
    }
    .elementor-widget-heading.heading6{
      flex-grow: 0;
      flex-shrink: 1!important;
    }
} */
.card {
  --image-height: 164px;

  background-color: var(--color-ui-white);
  border: 1px solid var(--color-ui-02);
  transition: 0.3s;

  .card__inner {
    padding-block: var(--space-xs) var(--space-base);
    padding-inline: var(--space-xs);
    border: 2px solid transparent;
    text-align: center;
    height: 100%;
    transition: 0.3s;

    .elementor-widget-image {
      height: var(--image-height);
      transition: 0.3s;

      img {
        height: 100%;
        object-fit: contain;
        transform: scale(1);
        transition: 0.2s transform;
      }
    }
  }

  &:hover {
    border-color: var(--color-brand-blue);
    box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.10);

    .card__inner {
      border-color: var(--color-brand-blue);

      .elementor-widget-image {
        /* height: calc(var(--image-height) * 0.75); */
        img{
          transform: scale(0.65) translateY(-25px);
          transition: 0.2s all;
        }
      }
    }
  }

&.card__product-lightzoom{
  &:hover{
    .card__inner{
      .elementor-widget-image{
        img{
          transform: scale(0.85) translateY(-22px);
        }
      }
    }
  }
}
  &.card__product-category {
    min-height: 245px;
    .card__inner {
      .elementor-widget-image {
        + * {
          flex-grow: 1;
          transform: translateY(0px);
          transition: 0.2s transform;
        }
      }

      .hover__icon {
        --icon-size: 16px;

        /* height: 0; */
        opacity: 0;
        transition: 0.2s opacity;
        position: absolute;
        bottom: var(--space-base);
        i {
          font-size: var(--icon-size);
          width: var(--icon-size);
          color: var(--color-brand-blue);
        }
      }
    }

    &:hover .card__inner {
      .elementor-widget-image {
        + * {
          transform: translateY(-30px);
          transition: 0.2s transform;
        }
      }
      .hover__icon {
        opacity: 1;
        transition: 0.2s opacity;
        /* height: var(--icon-size); */
      }
    }
  }

  &.card__product {
    .card__inner {
      .spacer__below-image {
        flex: 0;
        transition: 0.3s;
      }

      .spacer__below-price {
        flex-grow: 1;
        transition: 0.3s;
      }

      .elementor-widget-theme-post-excerpt {
        font-size: var(--text-sm);
      }

      .elementor-widget-woocommerce-product-price p.price {
        font-size: var(--text-sm);
        color: var(--color-brand-black);
        font-weight: var(--font-weight-normal);

        .woocommerce-Price-amount {
          font-weight: var(--font-weight-bold);
        }
      }

      .card__link {
        margin-bottom: calc(-1 * var(--space-base) - 2px);
        margin-inline: calc(-1 * var(--space-xs) - 2px);
        width: calc(100% + (2 * var(--space-xs)) + 4px);
      }
    }

    &:hover > .card__inner .spacer__below-image {
      flex-basis: calc(var(--image-height) * 0.25);
    }
  }
}

/* ACCORDION */
.elementor-widget-n-accordion {
  .e-n-accordion-item-title {
    border-color: var(--color-ui-02);
  }

  .e-n-accordion-item {
    &[open] > .e-n-accordion-item-title {
      border-color: var(--color-brand-blue);
    }

    .e-n-accordion-item-title-icon span>i,
    &:not([open]):hover>.e-n-accordion-item-title .e-n-accordion-item-title-icon span>i,
    &[open]>.e-n-accordion-item-title .e-n-accordion-item-title-icon span>i {
      color: var(--color-brand-blue);
    }
  }
}
:where(.elementor-widget-n-accordion .e-n-accordion-item>.e-con) {
  border-color: var(--color-brand-blue);
  border-top-width: 0;
}
@media(max-width: 767px){
  .product-listing-carousel .swiper-pagination span {
      margin: 0px 6px !important;
  }
}

/* WooCommerce Quantity Input */
.qty-label {
  margin-bottom: var(--space-base);
}

.quantity {
  display: flex;
  align-items: stretch;
}

.quantity .qty-btn {
  --btn-color: var(--color-brand-white);
  --btn-border-color: var(--color-ui-02);
  --btn-text-color: var(--color-text-black);
  --btn-padding-inline: var(--space-xs);
  --btn-border-size: 1px;
  /* woocommerce variable */
  --button-spacing: 0;

  &.minus {
    border-right-width: 0 !important;
  }

  &.plus {
    border-left-width: 0 !important;
  }
}

.quantity .qty-btn:hover {
  --btn-color: var(--color-brand-blue);
  --btn-border-color: var(--color-brand-blue);
  --btn-text-color: var(--color-text-white);
}

.quantity input[type="number"].qty {
  border-color: var(--color-ui-02);
  -moz-appearance: textfield;
}

.quantity input[type="number"].qty::-webkit-outer-spin-button,
.quantity input[type="number"].qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.icon--large svg,
.icon--large i {
  font-size: 46px;
}

span {
  &.prev,
  &.next {
    display: none;
  }
}

.woocommerce form .form-row-first,
.woocommerce form .form-row-last,
.woocommerce-page form .form-row-first,
.woocommerce-page form .form-row-last {
  margin-block: 0 var(--space-base) !important;
}
@media( max-width: 1199px){
  footer[data-elementor-type="footer"]{
    overflow: hidden;
  }
}
.woocommerce-address-fields__field-wrapper,
.woocommerce .woocommerce-MyAccount-navigation {
    margin-bottom: 25px;
}
@media(max-width: 991px){
  .woocommerce-address-fields__field-wrapper,
  .woocommerce .woocommerce-MyAccount-navigation {
      margin-bottom: 45px;
  }
}
.woocommerce-js .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 26px!important;
}
.woocommerce-js form .form-row .select2-container,
.woocommerce-js .select2-container .select2-selection--single{
  height: 45px;
}
p.stock.available-on-backorder{
  display: none;
}
.return-to-shop .button br,
.wc-proceed-to-checkout .checkout-button br {
  display: none;
}