/* Custom Style below please, thank you. */
h1,
h2,
h3,
h4,
h5,
h6,
a,
p,
span {
  /* color: blue !important; */
}

/* Ensure all elements inherit the color from its parent */
a,
.w-input,
.w-select,
.w-tab-link,
.w-nav-link,
.w-nav-brand,
.w-dropdown-btn,
.w-dropdown-toggle,
.w-slider-arrow-left,
.w-slider-arrow-right,
.w-dropdown-link {
  color: inherit !important;
  text-decoration: inherit !important;
  font-size: inherit;
}
/* Focus state style for keyboard navigation for the focusable elements */
*[tabindex]:focus-visible,
input[type="file"]:focus-visible {
  outline: 0.125rem solid #4d65ff;
  outline-offset: 0.125rem;
}
/* Get rid of top margin on first element in any rich text element */
.w-richtext > :not(div):first-child,
.w-richtext > div:first-child > :first-child {
  margin-top: 0 !important;
}
/* Get rid of bottom margin on last element in any rich text element */
.w-richtext > :last-child,
.w-richtext ol li:last-child,
.w-richtext ul li:last-child {
  margin-bottom: 0 !important;
}
/* Prevent all click and hover interaction with an element */
.pointer-events-off {
  pointer-events: none;
}
/* Enables all click and hover interaction with an element */
.pointer-events-on {
  pointer-events: auto;
}
/* Create a class of .div-square which maintains a 1:1 dimension of a div */
.div-square::after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
/* Make sure containers never lose their center alignment */
.container-medium,
.container-small,
.container-large {
  margin-right: auto !important;
  margin-left: auto !important;
}
/* Apply "..." after 3 lines of text */
.text-style-3lines {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
/* Apply "..." after 2 lines of text */
.text-style-2lines {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
/* Adds inline flex display */
.display-inlineflex {
  display: inline-flex;
}
/* These classes are never overwritten */
.hide {
  display: none !important;
}
/* Remove default Webflow chevron from form select */
select {
  -webkit-appearance: none;
}
@media screen and (max-width: 991px) {
  .hide,
  .hide-tablet {
    display: none !important;
  }
}
@media screen and (max-width: 767px) {
  .hide-mobile-landscape {
    display: none !important;
  }
}
@media screen and (max-width: 479px) {
  .hide-mobile {
    display: none !important;
  }
}
.margin-0 {
  margin: 0rem !important;
}
.padding-0 {
  padding: 0rem !important;
}
.spacing-clean {
  padding: 0rem !important;
  margin: 0rem !important;
}
.margin-top {
  margin-right: 0rem !important;
  margin-bottom: 0rem !important;
  margin-left: 0rem !important;
}
.padding-top {
  padding-right: 0rem !important;
  padding-bottom: 0rem !important;
  padding-left: 0rem !important;
}
.margin-right {
  margin-top: 0rem !important;
  margin-bottom: 0rem !important;
  margin-left: 0rem !important;
}
.padding-right {
  padding-top: 0rem !important;
  padding-bottom: 0rem !important;
  padding-left: 0rem !important;
}
.margin-bottom {
  margin-top: 0rem !important;
  margin-right: 0rem !important;
  margin-left: 0rem !important;
}
.padding-bottom {
  padding-top: 0rem !important;
  padding-right: 0rem !important;
  padding-left: 0rem !important;
}
.margin-left {
  margin-top: 0rem !important;
  margin-right: 0rem !important;
  margin-bottom: 0rem !important;
}
.padding-left {
  padding-top: 0rem !important;
  padding-right: 0rem !important;
  padding-bottom: 0rem !important;
}
.margin-horizontal {
  margin-top: 0rem !important;
  margin-bottom: 0rem !important;
}
.padding-horizontal {
  padding-top: 0rem !important;
  padding-bottom: 0rem !important;
}
.margin-vertical {
  margin-right: 0rem !important;
  margin-left: 0rem !important;
}
.padding-vertical {
  padding-right: 0rem !important;
  padding-left: 0rem !important;
}
/* Apply "..." at 100% width */
.truncate-width {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Removes native scrollbar */
.no-scrollbar {
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.component_navbar_dropdown_toggle-wrapper div {
  color: #121314 !important;
}

.component_navbar_menu_link {
  text-decoration: none !important;
}

.component_faq_dropdown {
  white-space: initial !important;
}

.component_footer_menu_link {
  color: var(--text-neutrals--text-color-white) !important;
}

.component_navbar_dropdown_navigation_wrapper {
  width: 100%;
}

.component_navbar_menu_link.w--current {
  color: var(--_primitives---colors--sunray) !important;
}

.component_footer_privacy_link {
  color: var(--text-neutrals--text-color-white) !important;
}

.component_footer_privacy_link:hover {
  color: var(--text-coloured--text-color-sunray) !important;
}

.component_footer_menu_link:hover {
  color: var(--text-coloured--text-color-sunray) !important;
}

/*.nav-tabs-wrapper-custom {*/
/*    display: none;*/
/*}*/

/*.tab-content > .tab-pane {*/
/*    display: block;*/
/*    padding: 40px 0px;*/
/*}*/

.productdetails {
  margin-bottom: initial !important;
}

.custom-product-sticky {
  position: sticky;
  top: 120px;
}

.bc-custom-mobile-box {
  display: none;
}

/*#reviewPane {*/
/*    padding-top: initial;*/
/*}*/

.custom-review__button {
  transform: skew(-20deg) !important;
  border-radius: 4px !important;
  transition: all 0.3s ease-in-out !important;
  background-color: transparent !important;
  color: #ffffff !important;
  border: 1px solid #ffffff !important;
  height: 48px !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  font-family: "Gulams Condensed" !important;
  text-transform: uppercase;
}

.custom-review__button:hover {
  color: #030a0d !important;
  background-color: #e37d30 !important;
  border: 1px solid #e37d30 !important ;
}

.custom-review__button span {
  display: inline-block;
  transform: skew(20deg) !important;
}

.bs-custom__top {
  background-color: #ededed;
  margin: 40px 0 20px 0;
}

/*.productdetails h2 {*/
/*    font-family: "Gulams Condensed" !important;*/
/*}*/

.productdetails :is(h1, h2, h3, h4, h5, h6) {
  font-family: "Gulams Condensed" !important;
  text-transform: uppercase;
  color: #e37d30;
}

.productdetails h2 strong {
  font-family: "Gulams Condensed" !important;
  color: #e37d30;
  font-size: 60px;
  font-weight: 600;
  line-height: 90%;
}

.product-tab-detail .tab-content table tbody tr:nth-child(odd),
.product-tab-detail .tab-content table tbody tr:nth-child(2n) {
  font-family: Roboto, sans-serif !important;
  background-color: #121314;
  border: 1px solid #e37d30;
  color: white;
}

.table td,
.table th {
  padding: 16px;
}

.product-tab-detail .tab-pane .productdetails {
  font-family: Roboto, sans-serif !important;
}

.nav-link-ati-custom {
  color: #ffffff !important;
}

.product-tab-detail {
  border-top: 20px solid #e37d30;
  background-color: #121314 !important;
  padding-top: 80px;
  padding-bottom: 70px;
}
.breadcrumb .breadcrumb-item.active,
.breadcrumb .breadcrumb-item:last-child {
  font-weight: 600;
}

/*.tab-content .tab-pane {*/
/*    max-height: 0;*/
/*    overflow: hidden;*/
/*    transition: max-height 0.4s ease;*/
/*}*/

/*.tab-content .tab-pane.active {*/
/*    scroll-margin-top: 100px;*/
/*}*/

#description,
#reviewPane {
  position: relative;
}

#description::before,
#reviewPane::before {
  content: "";
  display: block;
  height: 150px; /* header height */
  margin-top: -90px;
  visibility: hidden;
}

.tabbable-custom {
  position: relative;
}

.nav-tabs-custom {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
}

.collapsing {
  transition: height 0.5s ease !important;
}

@media screen and (max-width: 767.98px) {
  #description,
  #reviewPane {
    position: initial;
  }
  #description::before,
  #reviewPane::before {
    content: initial;
  }
  .tabbable-custom {
    position: initial;
  }

  .nav-tabs-custom {
    position: initial;
  }
  .product-tab-detail {
    border-top: 15px solid #e37d30;
    padding-top: 48px;
    padding-bottom: 38px;
  }
  .productdetails h2 strong {
    font-size: 42px;
  }
  .table td,
  .table th {
    padding: 12px;
  }
  .bs-custom__top {
    margin: 40px 0 0 0;
  }
  .tab-content > .tab-pane {
    padding: initial;
  }
  .breadcrumbs-custom,
  .breadcrumbs-custom-mobile {
    display: none !important;
  }
  .bc-custom-mobile-box,
  .bc-custom-mobile {
    display: flex !important;
    background-color: initial !important;
  }
  .bc-custom-mobile {
    margin-top: initial !important;
  }
  /*.collapse-body-custom {*/
  /*    display: block !important;*/
  /*}*/
  .info-accordion__custom {
    background-color: #121314 !important;
    padding: 8px 10px !important;
  }
  /*.info-accordion__custom:after {*/
  /*    content: initial !important;*/
  /*}*/
  .product-tab-detail .tab-pane .card-body {
    padding-top: 10px !important;
  }
}

@font-face {
  font-family: Roboto, sans-serif;
  src: url("../fonts/Roboto-Regular.ttf") format("truetype");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto", sans-serif;
  src: url("../fonts/Roboto-Regular.ttf") format("truetype");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Homepage: Shop Now section header
   --------------------------------------------------------------------------
   ati-site.css declares flex-flow: column on .component_product_title_wrapper
   at every width (lines 3068 and 3077), so the "Shop all" button stacks under
   the heading instead of sitting beside it. That file loads after this one, so
   the extra .component_product_section ancestor below raises specificity to
   0,3,0 and wins on merit rather than needing !important.

   The min-width guard is deliberate: ati-site.css has its own column rule
   inside @media screen and (max-width: 767px), which should keep governing
   mobile. This rule is exactly complementary to that breakpoint.
   ========================================================================== */
@media screen and (min-width: 768px) {
  .component_product_section
    .component_product_title_wrapper.padding-section-medium {
    flex-flow: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 2rem;
  }
}
