/** Shopify CDN: Minification failed

Line 6015:0 Expected "}" to go with "{"

**/
/* Cookies code */
button#shopify-pc__banner__btn-accept {
  background: black;
  color: white;
  font-family: inherit;
}
button#shopify-pc__banner__btn-decline,
.shopify-pc__banner__body p,
#shopify-pc__banner__btn-manage-prefs {
  text-transform: inherit;
  font-family: inherit;
}
h2#shopify-pc__banner__body-title {
  font-family: inherit;
}
.shopify-pc__banner__dialog {
  width: 40% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  -ms-transform: translate(-50%, -50%);
}
button#shopify-pc__banner__btn-decline {
  border: unset;
  text-decoration: underline !important;
  position: absolute;
  top: 0px;
  right: 10px;
  font-size: 14px;
}
.shopify-pc__banner__body {
  margin-top: 20px;
}
button#shopify-pc__banner__btn-manage-prefs span {
  text-decoration: underline;
}

@media (max-width: 480px) {
  .shopify-pc__banner__dialog {
    width: 90% !important;
  }
}
/* end cookies code */
/*! Flickity v2.3.0
https://flickity.metafizzy.co
---------------------------------------------- */
.flickity-enabled {
  position: relative;
}
.flickity-enabled:focus {
  outline: 0;
}
.flickity-viewport {
  overflow: hidden;
  position: relative;
  height: 100%;
}
.flickity-slider {
  position: absolute;
  width: 100%;
  height: 100%;
}
.flickity-enabled.is-draggable {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.flickity-enabled.is-draggable .flickity-viewport {
  cursor: move;
  cursor: -webkit-grab;
  cursor: grab;
}
.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
.flickity-button {
  position: absolute; /*background:hsla(0,0%,100%,.75);*/
  border: none;
  color: currentColor;
}
.flickity-button:hover {
  /*background:#fff;*/
  cursor: pointer;
}
.flickity-button:focus {
  outline: 0;
  box-shadow: none;
}
.flickity-button:active {
  opacity: 0.6;
}
.flickity-button:disabled {
  opacity: 0.3;
  cursor: auto;
  pointer-events: none;
}
.flickity-button-icon {
  fill: currentColor;
}
.flickity-prev-next-button {
  top: 50%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  transform: translateY(-50%);
}
.flickity-prev-next-button.previous {
  left: 10px;
}
.flickity-prev-next-button.next {
  right: 10px;
}
.flickity-rtl .flickity-prev-next-button.previous {
  left: auto;
  right: 10px;
}
.flickity-rtl .flickity-prev-next-button.next {
  right: auto;
  left: 10px;
}
.flickity-prev-next-button .flickity-button-icon {
  /*position:absolute;top:20%;width:60%;height:60%*/
}
.flickity-prev-next-button.previous .flickity-button-icon {
  /*left:20%;*/
}
.flickity-prev-next-button.next .flickity-button-icon {
  right: 20%;
}
.flickity-page-dots {
  position: absolute;
  width: 100%;
  bottom: -25px;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
  line-height: 1;
}
.flickity-rtl .flickity-page-dots {
  direction: rtl;
}
.flickity-page-dots .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 8px;
  background: #333;
  border-radius: 50%;
  opacity: 0.25;
  cursor: pointer;
}
.flickity-page-dots .dot.is-selected {
  opacity: 1;
}

/* Flickity fullscreen v1.0.1
------------------------- */

.flickity-enabled.is-fullscreen {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: hsl(0 0% 0% / 90%);
  padding-bottom: 35px;
  z-index: 1;
}

.flickity-enabled.is-fullscreen .flickity-page-dots {
  bottom: 10px;
}

.flickity-enabled.is-fullscreen .flickity-page-dots .dot {
  background: white;
}

.ProductRecommendations
  .ProductListWrapper
  .ProductList.ProductList--carousel.flickity-enabled
  .flickity-viewport {
  overflow: visible !important;
}

/* prevent page scrolling when flickity is fullscreen */
html.is-flickity-fullscreen {
  overflow: hidden;
}

/* ---- flickity-fullscreen-button ---- */

.flickity-fullscreen-button {
  display: block;
  right: 10px;
  top: 10px;
  width: 24px;
  height: 24px;
  border-radius: 4px;
}

/* right-to-left */
.flickity-rtl .flickity-fullscreen-button {
  right: auto;
  left: 10px;
}

.flickity-fullscreen-button-exit {
  display: none;
}

.flickity-enabled.is-fullscreen .flickity-fullscreen-button-exit {
  display: block;
}
.flickity-enabled.is-fullscreen .flickity-fullscreen-button-view {
  display: none;
}

.flickity-fullscreen-button .flickity-button-icon {
  position: absolute;
  width: 16px;
  height: 16px;
  left: 4px;
  top: 4px;
}

.carousel-cell {
  width: 160px;
  height: auto;
  margin-right: 16px;
}
.flickity-prev-next-button {
  width: 25px;
  height: 25px;
}
.flickity-button {
  color: #000;
}
.flickity-prev-next-button svg {
  stroke-width: 0;
}
.Product__Gallery .flickity-slider {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
/*.Product__Gallery .Product__Slideshow {
  min-height: 455px!important;
}*/
.Product__Gallery .flickity-viewport {
  min-height: 500px !important;
  background-color: white;
  border-radius: 8px;
}
.flickity-button-icon {
  fill: black !important;
}
@media screen and (min-width: 641px) {
  .Product__Gallery .flickity-viewport {
    border-radius: 12px;
    min-height: 1104px !important;
  }
  .carousel-cell {
    width: 400px;
    height: auto;
    margin-right: 32px;
  }
  .flickity-prev-next-button {
    width: 50px;
    height: 50px;
  }
}
@media screen and (min-width: 1024px) {
  .Product__Gallery .flickity-viewport {
    min-height: 798px !important;
  }
}

@media screen and (min-width: 1280px) {
  .Product__Gallery .flickity-viewport {
    min-height: 1030px !important;
  }
  .carousel-cell {
    width: 230px;
    height: auto;
    margin-right: 16px;
  }
}

@media screen and (min-width: 1440px) {
  .Product__Gallery .flickity-viewport {
    min-height: 1192px !important;
  }
  .carousel-cell {
    width: 400px;
    height: auto;
    margin-right: 32px;
  }
}

@media screen and (min-width: 1600px) {
  .Product__Gallery .flickity-viewport {
    min-height: 1180px !important;
  }
}

/* -------------------------------- 

File#: _1_anim-menu-btn
Title: Animated Menu Button
Descr: A menu button w/ a morphing icon

-------------------------------- */
:root {
  --anim-menu-btn-size: 48px;
  --anim-menu-btn-transition-duration: 0.2s;
  --anim-menu-btn-icon-size: 32px;
  --anim-menu-btn-icon-stroke: 2px;
}

.anim-menu-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--anim-menu-btn-size);
  height: var(--anim-menu-btn-size);
}

.anim-menu-btn__icon {
  position: relative;
  display: block;
  font-size: var(--anim-menu-btn-icon-size);
  width: 1em;
  height: var(--anim-menu-btn-icon-stroke);
  color: inherit;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  transform: scale(1);
}
.anim-menu-btn__icon::before,
.anim-menu-btn__icon::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: inherit;
  border-radius: inherit;
}

.anim-menu-btn__icon--close {
  background-size: 100% 100%;
  will-change: transform, background-size;
  transition-property: transform, background-size;
  transition-duration: var(--anim-menu-btn-transition-duration, 0.2s);
}
.anim-menu-btn:active .anim-menu-btn__icon--close {
  transform: scale(0.9);
}
.anim-menu-btn__icon--close::before,
.anim-menu-btn__icon--close::after {
  will-change: inherit;
  transition: inherit;
}
.anim-menu-btn__icon--close::before {
  transform: translateY(-0.25em) rotate(0);
}
.anim-menu-btn__icon--close::after {
  transform: translateY(0.25em) rotate(0);
}

.anim-menu-btn--state-b .anim-menu-btn__icon--close {
  background-size: 0% 100%;
}
.anim-menu-btn--state-b .anim-menu-btn__icon--close::before {
  transform: translateY(0) rotate(45deg);
}
.anim-menu-btn--state-b .anim-menu-btn__icon--close::after {
  transform: translateY(0) rotate(-45deg);
}

.anim-menu-btn__icon--arrow-left,
.anim-menu-btn__icon--arrow-right,
.anim-menu-btn__icon--arrow-up,
.anim-menu-btn__icon--arrow-down {
  border-radius: 50em;
  will-change: transform;
  transition-property: transform;
  transition-duration: var(--anim-menu-btn-transition-duration, 0.2s);
}
.anim-menu-btn:active .anim-menu-btn__icon--arrow-left,
.anim-menu-btn:active .anim-menu-btn__icon--arrow-right,
.anim-menu-btn:active .anim-menu-btn__icon--arrow-up,
.anim-menu-btn:active .anim-menu-btn__icon--arrow-down {
  transform: scale(0.9);
}
.anim-menu-btn__icon--arrow-left::before,
.anim-menu-btn__icon--arrow-left::after,
.anim-menu-btn__icon--arrow-right::before,
.anim-menu-btn__icon--arrow-right::after,
.anim-menu-btn__icon--arrow-up::before,
.anim-menu-btn__icon--arrow-up::after,
.anim-menu-btn__icon--arrow-down::before,
.anim-menu-btn__icon--arrow-down::after {
  transform-origin: calc(var(--anim-menu-btn-icon-stroke) / 2) 50%;
  will-change: transform, width;
  transition-property: transform, width;
  transition-duration: var(--anim-menu-btn-transition-duration, 0.2s);
}
.anim-menu-btn__icon--arrow-left::before,
.anim-menu-btn__icon--arrow-right::before,
.anim-menu-btn__icon--arrow-up::before,
.anim-menu-btn__icon--arrow-down::before {
  transform: translateY(-0.25em) rotate(0);
}
.anim-menu-btn__icon--arrow-left::after,
.anim-menu-btn__icon--arrow-right::after,
.anim-menu-btn__icon--arrow-up::after,
.anim-menu-btn__icon--arrow-down::after {
  transform: translateY(0.25em) rotate(0);
}

.anim-menu-btn__icon--arrow-right {
  transform: rotate(180deg);
}
.anim-menu-btn:active .anim-menu-btn__icon--arrow-right {
  transform: rotate(180deg) scale(0.9);
}

.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-left::before,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-left::after,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-right::before,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-right::after,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-up::before,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-up::after,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-down::before,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-down::after {
  width: 50%;
}
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-left::before,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-right::before,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-up::before,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-down::before {
  transform: translateY(0) rotate(-45deg);
}
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-left::after,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-right::after,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-up::after,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-down::after {
  transform: translateY(0) rotate(45deg);
}
.anim-menu-btn--state-b:active .anim-menu-btn__icon--arrow-up {
  transform: rotate(90deg) scale(0.9);
}
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-up {
  transform: rotate(90deg);
}
.anim-menu-btn--state-b:active .anim-menu-btn__icon--arrow-down {
  transform: rotate(-90deg) scale(0.9);
}
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-down {
  transform: rotate(-90deg);
}

/* -------------------------------- 

File#: _1_overscroll-section
Title: Overscroll Section
Descr: Section overlapping visible content on scroll

-------------------------------- */
.overscroll-section {
  --overscroll-section-opacity: 0;
}

.overscroll-section__sticky-content {
  position: sticky;
  z-index: 1;
  /* top: -75px!important; */
}

.overscroll-section__scroll-content {
  position: relative;
  z-index: 2;
  transform: translateZ(0);
}
.overscroll-section__scroll-content::before,
.overscroll-section__scroll-content::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform: translateY(-100%);
  pointer-events: none;
}
.overscroll-section__scroll-content::before {
  height: 100vh;
  background: var(--color-black);
  opacity: var(--overscroll-section-opacity, 0);
  z-index: 1;
}
.overscroll-section__scroll-content::after {
  height: 80px;
  background: linear-gradient(
      to top,
      hsla(
          var(--color-black-h),
          var(--color-black-s),
          var(--color-black-l),
          0.025
        )
        0%,
      hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0)
        5%
    ),
    linear-gradient(
      to top,
      hsla(
          var(--color-black-h),
          var(--color-black-s),
          var(--color-black-l),
          0.025
        )
        0%,
      hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0)
        10%
    ),
    linear-gradient(
      to top,
      hsla(
          var(--color-black-h),
          var(--color-black-s),
          var(--color-black-l),
          0.025
        )
        0%,
      hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0)
        20%
    ),
    linear-gradient(
      to top,
      hsla(
          var(--color-black-h),
          var(--color-black-s),
          var(--color-black-l),
          0.025
        )
        0%,
      hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0)
        50%
    ),
    linear-gradient(
      to top,
      hsla(
          var(--color-black-h),
          var(--color-black-s),
          var(--color-black-l),
          0.025
        )
        0%,
      hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0)
        100%
    );
}

.overscroll-section--disabled .overscroll-section__sticky-content {
  position: static;
}
.overscroll-section--disabled .overscroll-section__scroll-content::before,
.overscroll-section--disabled .overscroll-section__scroll-content::after {
  display: none;
}

/* -------------------------------- 

File#: _1_diagonal-movement
Title: Diagonal Movement
Descr: A JavaScript plugin that detects the direction of the mouse movement (diagonal vs vertical)
Based on the jQuery-menu-aim plugin https://github.com/kamens/jQuery-menu-aim

⚠️ The style of this component is only for demo purpose. You don't need it to use the plugin.

-------------------------------- */
.d-movement {
  max-width: 720px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: var(--space-xxs);
}

.d-movement__source {
  display: grid;
  grid-gap: var(--space-xxs);
}

.d-movement__item {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-radius: 0.25em;
}

.d-movement__item--one {
  color: var(--color-white);
  background-color: var(--color-primary);
}

.d-movement__item--two {
  color: var(--color-bg);
  background-color: var(--color-contrast-higher);
}

.d-movement__item--three {
  color: var(--color-white);
  background-color: var(--color-accent);
}

.d-movement__sub-element {
  background-color: var(--color-contrast-lower);
  border-radius: 0.25em;
  transition: background 0.2s;
}

.d-movement__arrow {
  width: 0;
  height: 0;
  border: 12px solid transparent;
  border-left-color: currentColor;
}

/* -------------------------------- 

File#: _2_dropdown
Title: Dropdown
Descr: A hoverable link that toggles the visibility of a dropdown list

-------------------------------- */
:root {
  --dropdown-item-padding: var(--space-xxs) var(--space-sm);
}

.dropdown {
  position: relative;
}

.dropdown__menu {
  width: 200px;
  border-radius: var(--radius-md);
  padding: var(--space-xxxs) 0;
  background-color: var(--color-bg-light);
  box-shadow: var(--inner-glow), var(--shadow-sm);
  z-index: var(--z-index-popover, 5);
  position: absolute;
  left: 0;
  top: 100%;
  --space-unit: 1rem;
  --text-unit: 1rem;
  font-size: var(--text-unit);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0s 0.2s;
}

@media (pointer: fine) {
  .dropdown__wrapper:hover > .dropdown__menu,
  .dropdown__sub-wrapper:hover > .dropdown__menu {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s;
  }

  .dropdown__sub-wrapper:hover > .dropdown__menu {
    left: 100%;
  }
}
@media not all and (pointer: fine) {
  .dropdown__trigger-icon {
    display: none;
  }
}
.dropdown__item {
  display: block;
  text-decoration: none;
  color: var(--color-contrast-high);
  padding: var(--dropdown-item-padding);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: 0.2s;
}
.dropdown__item:hover,
.dropdown__item.dropdown__item--hover {
  background-color: hsla(
    var(--color-contrast-higher-h),
    var(--color-contrast-higher-s),
    var(--color-contrast-higher-l),
    0.075
  );
}

.dropdown__separator {
  height: 1px;
  background-color: var(--color-contrast-lower);
  margin: var(--dropdown-item-padding);
}

.dropdown__sub-wrapper {
  position: relative;
}
.dropdown__sub-wrapper > .dropdown__item {
  position: relative;
  padding-right: calc(var(--space-sm) + 12px);
}
.dropdown__sub-wrapper > .dropdown__item .icon {
  position: absolute;
  display: block;
  width: 12px;
  height: 12px;
  right: var(--space-xxs);
  top: calc(50% - 6px);
}
.dropdown__sub-wrapper > .dropdown__menu {
  top: calc(var(--space-xxs) * -1);
  box-shadow: var(--inner-glow), var(--shadow-md);
}

.dropdown__menu {
  top: calc(100% + 4px);
}

.dropdown__sub-wrapper .dropdown__menu {
  top: calc(var(--space-xxs) * -1);
}

@media (pointer: fine) {
  .dropdown__menu--is-visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s;
  }
}
.dropdown__menu--is-hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0s 0.2s;
}

.dropdown__sub-wrapper > .dropdown__menu--is-visible,
.dropdown__sub-wrapper > .dropdown__menu--is-hidden {
  left: 100%;
}
.dropdown__sub-wrapper > .dropdown__menu--is-visible.dropdown__menu--left,
.dropdown__sub-wrapper > .dropdown__menu--is-hidden.dropdown__menu--left {
  left: -100%;
}

/* -------------------------------- 

File#: _1_tabs
Title: Tabs
Descr: A list of content sections (panels), accessible one at a time using control labels

-------------------------------- */
.tabs__control {
  text-decoration: none;
  color: var(--color-contrast-medium);
}
.tabs__control:focus {
  outline: 2px solid
    hsla(
      var(--color-primary-h),
      var(--color-primary-s),
      var(--color-primary-l),
      0.2
    );
  outline-offset: 2px;
}
.tabs__control:hover {
  color: var(--color-contrast-high);
}

.tabs__control[aria-selected="true"] {
  color: var(--color-contrast-high);
  text-decoration: underline;
}

/* -------------------------------- 

File#: _3_mega-site-navigation
Title: Mega-Site Navigation
Descr: Navigation template for mega-sites

-------------------------------- */
:root {
  --mega-nav-height: 50px;
  --mega-nav-content-max-width: var(--max-width-lg);
  /* set max-width for navigation content */
}
@media (min-width: 64rem) {
  :root {
    --mega-nav-height: 60px;
  }
}
#site-header {
  position: relative;
  z-index: 9;
}
.mega-nav {
  height: var(--mega-nav-height);
  background-color: white;
  width: 100%;
  /* box-shadow: inset 0px -1px 0px hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.1); */
  /* border bottom */
}

/* change mega-nav style if menu = expanded */
.mega-nav--expanded {
  background-color: var(--color-bg) !important;
}

.mega-nav__container {
  width: 100%;
  height: 100%;
  padding-left: 15px;
  padding-right: 15px;
}

@media (min-width: 641px) {
  .mega-nav__container {
    padding-left: 30px;
    padding-right: 30px;
  }
}

@media (min-width: 64rem) {
  .mega-nav__container {
    /* width: calc(100% - 60px); */
    width:100%;
    height: 100%;
    /* max-width: var(--mega-nav-content-max-width); */
    margin-left: -15px;
    margin-right: auto;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

/* logo */
.mega-nav__logo {
  display: block;
  width: 104px;
  /* logo width */
  height: 30px;
  /* logo height */
}
.mega-nav__logo > * {
  /* logo SVG */
  width: inherit;
  height: inherit;
}

/* mobile buttons */
.mega-nav__icon-btns {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mega-nav__icon-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  font-size: 24px;
  /* icon size */
  color: var(--color-contrast-high);
  /* icon color */
  cursor: pointer;
  transition: 0.2s;
}
.mega-nav__icon-btn .icon {
  display: block;
}
.mega-nav__icon-btn .icon__group {
  stroke-width: 1px;
  /* icon stroke width */
}
.mega-nav__icon-btn .icon__group > * {
  transition: stroke-dashoffset 0.3s, opacity 0.3s,
    -webkit-transform 0.3s var(--ease-in-out);
  transition: transform 0.3s var(--ease-in-out), stroke-dashoffset 0.3s,
    opacity 0.3s;
  transition: transform 0.3s var(--ease-in-out), stroke-dashoffset 0.3s,
    opacity 0.3s, -webkit-transform 0.3s var(--ease-in-out);
}

/* animated menu button */
.mega-nav__icon-btn--menu .icon__group > * {
  stroke-dasharray: 24;
}
.mega-nav__icon-btn--menu .icon__group > *:nth-child(1) {
  -webkit-transform-origin: 12px 6px;
  transform-origin: 12px 6px;
}
.mega-nav__icon-btn--menu .icon__group > *:nth-child(2) {
  stroke-dashoffset: 0;
}
.mega-nav__icon-btn--menu .icon__group > *:nth-child(3) {
  -webkit-transform-origin: 12px 18px;
  transform-origin: 12px 18px;
}
.mega-nav__icon-btn--menu.mega-nav__icon-btn--state-b
  .icon__group
  > *:nth-child(1) {
  -webkit-transform: translateY(6px) rotate(-45deg);
  transform: translateY(6px) rotate(-45deg);
}
.mega-nav__icon-btn--menu.mega-nav__icon-btn--state-b
  .icon__group
  > *:nth-child(2) {
  stroke-dashoffset: 24;
}
.mega-nav__icon-btn--menu.mega-nav__icon-btn--state-b
  .icon__group
  > *:nth-child(3) {
  -webkit-transform: translateY(-6px) rotate(45deg);
  transform: translateY(-6px) rotate(45deg);
}

/* animated search button */
.mega-nav__icon-btn--search .icon__group {
  -webkit-transform-origin: 12px 12px;
  transform-origin: 12px 12px;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  transition: -webkit-transform 0.3s var(--ease-out);
  transition: transform 0.3s var(--ease-out);
  transition: transform 0.3s var(--ease-out),
    -webkit-transform 0.3s var(--ease-out);
}
.mega-nav__icon-btn--search .icon__group > *:nth-child(1) {
  stroke-dashoffset: 34;
  stroke-dasharray: 24;
}
.mega-nav__icon-btn--search .icon__group > *:nth-child(2) {
  stroke-dashoffset: 24;
  stroke-dasharray: 24;
}
.mega-nav__icon-btn--search .icon__group > *:nth-child(3) {
  -webkit-transform-origin: 9.5px 9.5px;
  transform-origin: 9.5px 9.5px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  stroke-dashoffset: 84;
  stroke-dasharray: 42;
  opacity: 1;
}
.mega-nav__icon-btn--search.mega-nav__icon-btn--state-b .icon__group {
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
.mega-nav__icon-btn--search.mega-nav__icon-btn--state-b
  .icon__group
  > *:nth-child(1) {
  stroke-dashoffset: 48;
}
.mega-nav__icon-btn--search.mega-nav__icon-btn--state-b
  .icon__group
  > *:nth-child(2) {
  stroke-dashoffset: 48;
}
.mega-nav__icon-btn--search.mega-nav__icon-btn--state-b
  .icon__group
  > *:nth-child(3) {
  stroke-dashoffset: 42;
  opacity: 0;
}

.search_results_container .ProductItem__UnitPriceMeasurement .Title2,
.ProductList--main-search .ProductItem__UnitPriceMeasurement .Title2 {
  font-size: x-small;
  font-style: normal !important;
}

.ProductList--main-search .ProductItem__UnitPriceMeasurement {
  margin-top: 0 !important;
}

/* animated arrow icon */
.mega-nav__arrow-icon {
  font-size: 16px;
  /* icon size */
  color: currentColor;
  /* icon color */
  transition: color 0.2s;
}
.mega-nav__arrow-icon .icon {
  display: block;
}
.mega-nav__arrow-icon .icon__group {
  stroke-width: 1px;
  /* icon stroke width */
  will-change: transform;
  -webkit-transform-origin: 8px 8px;
  transform-origin: 8px 8px;
  transition: -webkit-transform 0.3s var(--ease-out);
  transition: transform 0.3s var(--ease-out);
  transition: transform 0.3s var(--ease-out),
    -webkit-transform 0.3s var(--ease-out);
}
.mega-nav__arrow-icon .icon__group > * {
  stroke-dasharray: 17;
  -webkit-transform-origin: 8px 8px;
  transform-origin: 8px 8px;
  -webkit-transform: translateY(3px);
  transform: translateY(3px);
  transition: stroke-dashoffset 0.3s, -webkit-transform 0.3s;
  transition: transform 0.3s, stroke-dashoffset 0.3s;
  transition: transform 0.3s, stroke-dashoffset 0.3s, -webkit-transform 0.3s;
  transition-timing-function: var(--ease-out);
}
.mega-nav__arrow-icon .icon__group > *:first-child {
  stroke-dashoffset: 8.5;
}
.mega-nav__arrow-icon .icon__group > *:last-child {
  stroke-dashoffset: 8.5;
}

/* label/divider */
.mega-nav__label {
  color: var(--color-contrast-medium);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--text-xs);
}

/* card */
.mega-nav__card img {
  transition: opacity 0.3s;
}
.mega-nav__card img:hover {
  opacity: 0.85;
}

.mega-nav__card-title {
  color: var(--color-contrast-higher);
  text-decoration: none;
}
.mega-nav__card-title:hover {
  text-decoration: underline;
}

/* -------------------------------- 

--mobile - style affecting only small screens 👇

-------------------------------- */
.mega-nav--mobile {
  /* sub navigation */
}
.mega-nav--mobile .mega-nav__icon-btns--desktop {
  display: none;
  /* hide --desktop icon buttons */
}
.mega-nav--mobile .mega-nav__nav,
.mega-nav--mobile .mega-nav__search {
  display: none;
  position: absolute;
  top: var(--mega-nav-height);
  left: 0;
  width: 100%;
  height: calc(100vh - var(--mega-nav-height) - var(--mega-nav-offset-y, 0px));
  /* set --mega-nav-offset-y in JS */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background-color: var(--color-bg);
  box-shadow: var(--shadow-lg);
}
.mega-nav--mobile .mega-nav__nav--is-visible,
.mega-nav--mobile .mega-nav__search--is-visible {
  display: block;
}
.mega-nav--mobile .mega-nav__nav--is-visible > *,
.mega-nav--mobile .mega-nav__search--is-visible > * {
  -webkit-animation: mega-nav-entry-animation 0.5s var(--ease-out);
  animation: mega-nav-entry-animation 0.5s var(--ease-out);
}
.mega-nav--mobile .mega-nav__nav-inner,
.mega-nav--mobile .mega-nav__search-inner {
  padding: var(--space-md) 0;
  width: calc(100% - 2 * var(--component-padding));
  max-width: var(--mega-nav-content-max-width);
  margin-left: auto;
  margin-right: auto;
}
.mega-nav--mobile .mega-nav__label {
  /* label/divider */
  margin: var(--space-lg) 0 var(--space-xs);
}
.mega-nav--mobile .mega-nav__item {
  /* main navigation items */
  border-bottom: 1px solid var(--color-contrast-lower);
}
.mega-nav--mobile .mega-nav__control {
  /* navigation main controls (buttons/links) */
  display: flex;
  align-items: center;
  width: 100%;
  font-size: var(--text-md);
  text-align: left;
  padding: var(--space-sm) 0;
  color: var(--color-contrast-higher);
  text-decoration: none;
  cursor: pointer;
}
.mega-nav--mobile a[aria-current="page"] {
  /* current page */
  color: var(--color-primary);
}
.mega-nav--mobile .mega-nav__arrow-icon {
  margin-left: auto;
  margin-right: 12px;
}
.mega-nav--mobile .mega-nav__btn {
  /* button */
  width: 100%;
  margin: var(--space-sm) 0;
  font-size: var(--text-md);
}
.mega-nav--mobile .mega-nav__sub-nav-wrapper {
  /* sub navigation content */
  display: none;
  padding: 0 var(--space-md) var(--space-lg);
  overflow: hidden;
}
.mega-nav--mobile .mega-nav__sub-items {
  /* list of sub items */
}
.mega-nav--mobile .mega-nav__sub-items:not(:last-child) {
  margin-bottom: var(--space-lg);
}
.mega-nav--mobile .mega-nav__sub-item {
  /* sub item */
  border-bottom: 1px solid var(--color-contrast-lower);
}
.mega-nav--mobile .mega-nav__sub-link {
  /* sub link */
  display: block;
  color: var(--color-contrast-higher);
  text-decoration: none;
  padding: var(--space-xxs) 0;
}
.mega-nav--mobile .mega-nav__quick-link {
  /* search quick links */
  display: block;
  color: var(--color-contrast-higher);
  text-decoration: none;
  border-bottom: 1px solid var(--color-contrast-lower);
  padding: var(--space-xs) 0;
}
.mega-nav--mobile .mega-nav__sub-nav--layout-1 {
  /* layout 1 -> tabbed content */
}
.mega-nav--mobile .mega-nav__sub-nav--layout-1 .mega-nav__sub-items {
  margin-bottom: 0;
}
.mega-nav--mobile .mega-nav__sub-nav--layout-1 .mega-nav__tabs {
  display: none;
  /* hide tabbed content on smaller screens */
}
.mega-nav--mobile .mega-nav__sub-nav--layout-3 {
  /* layout 3 -> gallery */
  padding-top: var(--space-md);
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  /* auto add new cols */
}
.mega-nav--mobile .mega-nav__item--expanded .mega-nav__arrow-icon .icon__group {
  /* animated arrow icon */
}
.mega-nav--mobile
  .mega-nav__item--expanded
  .mega-nav__arrow-icon
  .icon__group
  > *:first-child {
  -webkit-transform: translateY(-3px) rotate(-90deg);
  transform: translateY(-3px) rotate(-90deg);
}
.mega-nav--mobile
  .mega-nav__item--expanded
  .mega-nav__arrow-icon
  .icon__group
  > *:last-child {
  -webkit-transform: translateY(-3px) rotate(90deg);
  transform: translateY(-3px) rotate(90deg);
}
.mega-nav--mobile .mega-nav__item--expanded .mega-nav__sub-nav-wrapper {
  display: block;
}
.mega-nav--mobile .mega-nav__item--expanded .mega-nav__sub-nav-wrapper > * {
  -webkit-animation: mega-nav-entry-animation 0.5s var(--ease-out);
  animation: mega-nav-entry-animation 0.5s var(--ease-out);
}

/* -------------------------------- 

--desktop - style affecting only big screens 👇

-------------------------------- */
.mega-nav--desktop {
  /* tabs */
  /* icon animation on click */
  /* icon buttons */
  position: relative;
}
.mega-nav--desktop .mega-nav__icon-btns--mobile,
.mega-nav--desktop .mega-nav__sub-nav-wrapper,
.mega-nav--desktop .mega-nav__search,
.mega-nav--desktop .mega-nav__label {
  display: none;
}
.mega-nav--desktop .mega-nav__logo {
  flex-shrink: 0;
  margin-right: var(--space-sm);
}
.mega-nav--desktop .mega-nav__nav {
  flex-grow: 1;
  height: 100%;
}
.mega-nav--desktop .mega-nav__nav-inner {
  height: 50px;
  align-items: center;
}
@media (min-width: 64rem) {
  .mega-nav--desktop .mega-nav__nav-inner {
    height: 100%;
    /* display: flex; */
    /* justify-content: space-between; */
    align-items: center;
    /* navigation layout - change to "flex-end" to push the navigation to the right */
  }
}
.mega-nav--desktop .mega-nav__items {
  display: flex;
  height: 100%;
  gap: 12px;
}
.mega-nav--desktop .mega-nav__item {
  display: flex;
  align-items: center;
}
.mega-nav--desktop .mega-nav__control {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* padding: 0 var(--space-md); */
  height: 100%;
  /*font-size: var(--text-sm);*/
  color: black;
  text-decoration: none;
  transition: 0.2s;
}
.mega-nav--desktop .mega-nav__control::after {
  /* marker */
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 100%;
  /* height: 1px; */
  background-color: var(--color-contrast-higher);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.mega-nav--desktop .mega-nav__control .mega-nav__arrow-icon {
  /* margin-left: var(--space-xxs); */
}
.mega-nav--desktop .mega-nav__control:hover {
  cursor: pointer;
  /* background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.05); */
}

.mega-nav--desktop .mega-nav__sub-nav-wrapper,
.mega-nav--desktop .mega-nav__search {
  position: absolute;
  top: var(--mega-nav-height);
  left: 0;
  width: 100%;
  background-color: var(--color-bg);
  /* box-shadow: var(--shadow-lg); */
  max-height: calc(
    100vh - var(--mega-nav-height) - var(--mega-nav-offset-y, 0px)
  );
  /* set --mega-nav-offset-y in JS */
  overflow: auto;
}
@media (max-width: 641px) {
  .mega-nav--desktop .mega-nav__sub-nav-wrapper {
    height: calc(
      100vh - var(--mega-nav-height) - var(--mega-nav-offset-y, 0px)
    );
    width: 80%;
  }
}
.mega-nav--desktop .mega-nav__sub-nav {
  width: 100%;
  padding: 40px 15px 200px 15px;
}
@media (min-width: 64rem) {
  .mega-nav--desktop .mega-nav__items {
    gap: 24px;
  }
  .mega-nav--desktop .mega-nav__sub-nav {
    width: calc(100% - 60px);
    margin: 0 auto;
    padding: 32px 0 32px 0;
  }
  .mega-nav--desktop .mega-nav__search-inner {
    width: calc(100% - 2 * var(--component-padding));
    margin: 0 auto;
    padding: 30px 0 50px 0;
  }
}
.mega-nav--desktop .mega-nav__sub-nav .mega-nav__label,
.mega-nav--desktop .mega-nav__search-inner .mega-nav__label {
  display: block;
}
.mega-nav--desktop .mega-nav__sub-nav {
  /* max-width: var(--mega-nav-content-max-width); */
}
.mega-nav--desktop .mega-nav__search-inner {
  /* max-width: var(--max-width-xs); */
  /* reduce max-width for search content */
}
.mega-nav--desktop .mega-nav__label {
  margin-bottom: var(--space-md);
}
.mega-nav--desktop .mega-nav__sub-item:not(:last-child) {
  margin-bottom: var(--space-xxs);
}
.mega-nav--desktop .mega-nav__sub-link {
  font-size: var(--text-sm);
  color: var(--color-contrast-higher);
  text-decoration: none;
}
.mega-nav--desktop .mega-nav__sub-link:hover {
  text-decoration: underline;
}
.mega-nav--desktop .mega-nav__quick-link {
  /* search quick links */
  display: inline-block;
  margin-bottom: var(--space-xxs);
  font-size: var(--text-sm);
  color: var(--color-contrast-higher);
  text-decoration: none;
}
.mega-nav--desktop .mega-nav__quick-link:hover {
  text-decoration: underline;
}
.mega-nav--desktop .mega-nav__btn {
  font-size: var(--text-sm);
  margin-left: var(--space-sm);
}
.mega-nav--desktop .mega-nav__sub-nav--layout-1 {
  /* layout 1 -> tabbed content */
}
.mega-nav--desktop .mega-nav__sub-nav--layout-1 .mega-nav__sub-items {
  display: none;
  /* hide links */
}
.mega-nav--desktop .mega-nav__sub-nav--layout-1 .mega-nav__tabs {
  display: flex;
}
.mega-nav--desktop .mega-nav__sub-nav--layout-2 {
  /* layout 2 -> multi lists */
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-sm);
}
.mega-nav--desktop .mega-nav__sub-nav--layout-3 {
  /* layout 3 -> gallery */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}
.mega-nav--desktop .mega-nav__sub-nav--layout-4 {
  /* layout 4 -> single list */
  text-align: center;
}
.mega-nav--desktop .mega-nav__sub-nav--layout-4 .mega-nav__sub-link {
  font-size: var(--text-lg);
}
.mega-nav--desktop .mega-nav__tabs-controls > *:not(:last-child) {
  border-bottom: 1px solid var(--color-contrast-lower);
}
.mega-nav--desktop .mega-nav__tabs-control {
  display: block;
  width: 100%;
  padding: var(--space-xs);
  overflow: hidden;
  color: var(--color-contrast-higher);
  text-decoration: none;
  cursor: pointer;
  transition: 0.2s;
}
.mega-nav--desktop .mega-nav__tabs-control .icon {
  opacity: 0;
  -webkit-transform: translateX(-10px);
  transform: translateX(-10px);
  transition: opacity 0.5s, -webkit-transform 0.5s var(--ease-out);
  transition: transform 0.5s var(--ease-out), opacity 0.5s;
  transition: transform 0.5s var(--ease-out), opacity 0.5s,
    -webkit-transform 0.5s var(--ease-out);
}
.mega-nav--desktop .mega-nav__tabs-control:hover,
.mega-nav--desktop .mega-nav__tabs-control[aria-selected="true"] {
  color: var(--color-primary);
}
.mega-nav--desktop .mega-nav__tabs-control[aria-selected="true"] .icon {
  opacity: 1;
  -webkit-transform: translateX(0px);
  transform: translateX(0px);
}
.mega-nav--desktop .mega-nav__tabs-img {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  transition: opacity 0.3s;
}
.mega-nav--desktop .mega-nav__tabs-img:hover {
  opacity: 0.85;
}
.mega-nav--desktop .mega-nav__item--expanded .mega-nav__control {
  /* background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.05); */
}
.mega-nav--desktop .mega-nav__item--expanded .mega-nav__control::after {
  /* marker */
  opacity: 1;
}
.mega-nav--desktop .mega-nav__item--expanded .mega-nav__sub-nav-wrapper {
  display: block;
}
.mega-nav--desktop .mega-nav__item--expanded .mega-nav__sub-nav {
  -webkit-animation: mega-nav-entry-animation 0.5s var(--ease-out);
  animation: mega-nav-entry-animation 0.5s var(--ease-out);
}
.mega-nav--desktop:not([data-hover="on"])
  .mega-nav__item--expanded
  .mega-nav__arrow-icon
  .icon__group {
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
.mega-nav--desktop:not([data-hover="on"])
  .mega-nav__item--expanded
  .mega-nav__arrow-icon
  .icon__group
  > *:first-child,
.mega-nav--desktop:not([data-hover="on"])
  .mega-nav__item--expanded
  .mega-nav__arrow-icon
  .icon__group
  *:last-child {
  stroke-dashoffset: 0;
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
}
.mega-nav--desktop .mega-nav__icon-btn {
  border-radius: 50%;
  margin-left: var(--space-xxxxs);
}
.mega-nav--desktop .mega-nav__icon-btn:hover,
.mega-nav--desktop .mega-nav__icon-btn--state-b {
  /* background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.05); */
}
.mega-nav--desktop .mega-nav__search--is-visible {
  display: block;
}
.mega-nav--desktop .mega-nav__search--is-visible .mega-nav__search-inner {
  -webkit-animation: mega-nav-entry-animation 0.5s var(--ease-out);
  animation: mega-nav-entry-animation 0.5s var(--ease-out);
}

/* animations */
@-webkit-keyframes mega-nav-entry-animation {
  from {
    opacity: 0;
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}
@keyframes mega-nav-entry-animation {
  from {
    opacity: 0;
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}
/* used in JS - detect when the menu needs to switch from --mobile to --desktop layout */
[class*="mega-nav--desktop"]::before {
  display: none;
  content: "desktop";
}

@media (min-width: 32rem) {
  .mega-nav--desktop\@xs::before {
    content: "desktop";
  }
}
@media (min-width: 48rem) {
  .mega-nav--desktop\@sm::before {
    content: "desktop";
  }
}
@media (min-width: 64rem) {
  .mega-nav--desktop\@md::before {
    content: "desktop";
  }
}
@media (min-width: 80rem) {
  .mega-nav--desktop\@lg::before {
    content: "desktop";
  }
}
@media (min-width: 90rem) {
  .mega-nav--desktop\@xl::before {
    content: "desktop";
  }
}

/* -------------------------------- 

File#: _1_hiding-nav
Title: Auto Hiding Navigation
Descr: A Navigation container that auto-hides when the user scrolls down, and is revealed when they scrolls back up

-------------------------------- */

.hide-nav {
  position: relative;
  z-index: 3;
  --hide-nav-transition-duration: 0.3s;
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0;
  will-change: transform;
  transition: background-color var(--hide-nav-transition-duration),
    -webkit-transform var(--hide-nav-transition-duration);
  transition: transform var(--hide-nav-transition-duration),
    background-color var(--hide-nav-transition-duration);
  transition: transform var(--hide-nav-transition-duration),
    background-color var(--hide-nav-transition-duration),
    -webkit-transform var(--hide-nav-transition-duration);
}

.hide-nav--fixed {
  background-color: transparent;
}

.hide-nav--has-bg {
  background-color: var(--color-bg);
}

/* --------------------------------

File#: _1_newsletter-input
Title: Newsletter Input
Descr: Animated newsletter input

-------------------------------- */
:root {
  --news-form-input-height: 46px;
  --news-form-input-padding-x: 18px;
  --news-form-input-radius: 50em;
  --news-form-btn-margin: 4px;
  --news-form-btn-padding-x: 16px;
  --news-form-icon-size: 24px;
}

.news-form__wrapper {
  position: relative;
  margin-top: -20px;
}

.news-form__input {
  background-color: #ebebea;
  padding: 0 var(--news-form-input-padding-x);
  border-radius: var(--news-form-input-radius);
  border: none !important;
  width: 100%;
  height: var(--news-form-input-height);
  transition: 0.2s;
}

.news-form__btn {
  display: inline-block;
  overflow: hidden;
  position: absolute;
  top: var(--news-form-btn-margin);
  right: var(--news-form-btn-margin);
  height: calc(var(--news-form-input-height) - 2 * var(--news-form-btn-margin));
  padding: 12px 20px;
  background-color: white;
  border-radius: calc(var(--news-form-input-radius) * 0.85);
  font-size: 14px;
  line-height: 11px;
  cursor: pointer;
  transition: 0.2s;
}
.news-form__btn > * {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  transition: transform 0.3s var(--ease-out);
}

@media (min-width: 641px) {
  .news-form__btn {
    font-size: 18px;
    line-height: 15px;
    padding: 12px 32px;
  }
}
.news-form__btn > *:last-child {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateY(100%);
}

.news-form__icon {
  display: block;
  width: var(--news-form-icon-size);
  height: var(--news-form-icon-size);
}
.news-form__icon > * {
  transform-origin: 50% 50%;
}

.news-form__icon-circle {
  stroke-dashoffset: 160;
  stroke-dasharray: 32;
}

.news-form__icon-check {
  stroke-dashoffset: 30;
  stroke-dasharray: 30;
}

.news-form__icon-excl-line {
  stroke-dashoffset: 14;
  stroke-dasharray: 14;
}

.news-form__icon-excl-dot {
  transform-origin: 12px 21.5px;
  transform: scale(0);
}

.news-form--enabled .news-form__btn {
  background-color: var(--color-primary);
  color: var(--color-white);
}
.news-form--enabled .news-form__btn:hover {
  background-color: var(--color-primary-dark);
}

.news-form--loading .news-form__btn > *:first-child {
  transform: translateY(-100%);
}
.news-form--loading .news-form__btn > *:last-child {
  transform: translateY(0);
}

.news-form--circle-loop .news-form__icon-circle {
  animation: news-input-circle-anim-loader 1s var(--ease-in-out);
}

.news-form--success .news-form__btn > *,
.news-form--error .news-form__btn > * {
  transition: none;
}
.news-form--success .news-form__btn > *:first-child,
.news-form--error .news-form__btn > *:first-child {
  transform: translateY(-100%);
}
.news-form--success .news-form__btn > *:last-child,
.news-form--error .news-form__btn > *:last-child {
  transform: translateY(0);
}

.news-form--success .news-form__icon-circle {
  animation: news-input-circle-anim-success 1s var(--ease-in-out) forwards;
}
.news-form--success .news-form__icon-check {
  animation: news-input-check-anim-success 0.5s 0.8s var(--ease-in-out) forwards;
}

.news-form--error .news-form__icon-circle {
  animation: news-input-circle-anim-error 0.8s var(--ease-in-out) forwards;
}
.news-form--error .news-form__icon-excl-line {
  animation: news-input-line-anim-error 0.3s 0.6s var(--ease-in-out) forwards;
}
.news-form--error .news-form__icon-excl-dot {
  animation: news-input-dot-anim-error 0.3s 0.9s var(--ease-out) forwards;
}

@keyframes news-input-circle-anim-loader {
  from {
    transform: rotate(0);
    stroke-dashoffset: 160;
  }
  to {
    stroke-dashoffset: 96;
    transform: rotate(-180deg);
  }
}
@keyframes news-input-circle-anim-success {
  from {
    transform: rotate(0);
    stroke-dashoffset: 160;
  }
  to {
    transform: rotate(-180deg);
    stroke-dashoffset: 96;
  }
}
@keyframes news-input-circle-anim-error {
  from {
    transform: rotate(0);
    stroke-dashoffset: 160;
  }
  to {
    transform: rotate(-90deg);
    stroke-dashoffset: 96;
  }
}
@keyframes news-input-check-anim-success {
  from {
    stroke-dashoffset: 30;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes news-input-line-anim-error {
  from {
    stroke-dashoffset: 14;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes news-input-dot-anim-error {
  from {
    transform: translateY(-4px) scale(0);
  }
  to {
    transform: translateY(0) scale(1);
  }
}
.news-form__msg {
  position: absolute;
  z-index: var(--z-index-popover, 5);
  top: calc(14px + var(--news-form-input-height));
  left: 5%;
  width: 90%;
  border-top-left-radius: 0 !important;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.3s, visibility 0s 0.3s, transform 0.3s var(--ease-out);
}
.news-form__msg::before {
  content: "";
  width: 12px;
  height: 10px;
  background-color: inherit;
  position: absolute;
  left: 0;
  bottom: calc(100% - 1px);
  -webkit-clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
  clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
}

.news-form__msg--success {
  background-color: var(--color-success-lighter);
  color: var(--color-black);
}

.news-form__msg--error {
  background-color: var(--color-error);
  color: var(--color-white);
}

.news-form--success .news-form__msg--success,
.news-form--error .news-form__msg--error {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
  transition: opacity 0.3s 1s, transform 0.3s 1s var(--ease-out);
}

/* -------------------------------- 

File#: _1_radios-checkboxes
Title: Radios and Checkboxes
Descr: Custom radio and checkbox buttons

-------------------------------- */
:root {
  /* radios + checkboxes */
  --checkbox-radio-size: 18px;
  --checkbox-radio-gap: 12px; /* gap between button and label */
  --checkbox-radio-border-width: 1px;
  --checkbox-radio-line-height: 1.4;
  /* radios */
  --radio-marker-size: 8px;
  /* checkboxes */
  --checkbox-marker-size: 12px;
  --checkbox-radius: 4px;
}

/* hide native buttons */
.radio,
.checkbox {
  position: absolute;
  padding: 0;
  margin: 0;
  margin-top: calc(
    (1em * var(--checkbox-radio-line-height) - var(--checkbox-radio-size)) / 2
  );
  opacity: 0;
  height: var(--checkbox-radio-size);
  width: var(--checkbox-radio-size);
  pointer-events: none;
}

/* label */
.radio + label,
.checkbox + label {
  display: inline-block;
  width: 100%;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
  padding-left: calc(var(--checkbox-radio-size) + var(--checkbox-radio-gap));
}

/* custom inputs - basic style */
.radio + label::before,
.checkbox + label::before {
  content: "";
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  top: -0.1em;
  margin-left: calc(
    -1 * (var(--checkbox-radio-size) + var(--checkbox-radio-gap))
  );
  flex-shrink: 0;
  width: var(--checkbox-radio-size);
  height: var(--checkbox-radio-size);
  background-color: var(--color-bg);
  border-width: var(--checkbox-radio-border-width);
  border-color: hsla(
    var(--color-contrast-low-h),
    var(--color-contrast-low-s),
    var(--color-contrast-low-l),
    0.65
  );
  border-style: solid;
  box-shadow: var(--shadow-xs);
  background-repeat: no-repeat;
  background-position: center;
  margin-right: var(--checkbox-radio-gap);
  transition: transform 0.2s, border 0.2s;
}

/* :hover */
.radio:not(:checked):not(:focus) + label:hover::before,
.checkbox:not(:checked):not(:focus) + label:hover::before {
  border-color: hsla(
    var(--color-contrast-low-h),
    var(--color-contrast-low-s),
    var(--color-contrast-low-l),
    1
  );
}

/* radio only style */
.radio + label::before {
  border-radius: 50%;
}

/* checkbox only style */
.checkbox + label::before {
  border-radius: var(--checkbox-radius);
}

/* :checked */
.radio:checked + label::before,
.checkbox:checked + label::before,
.main-register-form .checkbox:checked + label::before {
  background-color: black;
  box-shadow: var(--shadow-xs);
  border-color: black;
  transition: transform 0.2s;
}

/* :active */
.radio:active + label::before,
.checkbox:active + label::before {
  transform: scale(0.8);
  transition: transform 0.2s;
}

/* :checked:active */
.radio:checked:active + label::before,
.checkbox:checked:active + label::before {
  transform: none;
  transition: none;
}

/* radio button icon */
.radio:checked + label::before {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg class='nc-icon-wrapper' fill='%23ffffff'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23ffffff'%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
  background-size: var(--radio-marker-size);
}

/* checkbox button icon */
.checkbox:checked + label::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolyline points='1 6.5 4 9.5 11 2.5' fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
  background-size: var(--checkbox-marker-size);
}

/* :focus */
.radio:checked:active + label::before,
.checkbox:checked:active + label::before,
.radio:focus + label::before,
.checkbox:focus + label::before {
  border-color: black;
  box-shadow: 0 0 0 3px
    hsla(
      var(--color-primary-h),
      var(--color-primary-s),
      var(--color-primary-l),
      0.2
    );
}

/* --radio--bg, --checkbox--bg -> variation with background color */
.radio--bg + label,
.checkbox--bg + label {
  padding: var(--space-4xs) var(--space-3xs);
  padding-left: calc(
    var(--checkbox-radio-size) + var(--checkbox-radio-gap) + var(--space-3xs)
  );
  border-radius: var(--radius-md);
  transition: background 0.2s;
}

.radio--bg + label:hover,
.checkbox--bg + label:hover {
  background-color: hsla(
    var(--color-contrast-higher-h),
    var(--color-contrast-higher-s),
    var(--color-contrast-higher-l),
    0.075
  );
}

.radio--bg:active + label,
.checkbox--bg:active + label,
.radio--bg:focus + label,
.checkbox--bg:focus + label {
  background-color: hsla(
    var(--color-primary-h),
    var(--color-primary-s),
    var(--color-primary-l),
    0.1
  );
}

/* -------------------------------- 

File#: _1_modal-window
Title: Modal Window
Descr: A modal dialog used to display critical information

-------------------------------- */
.modal {
  position: fixed;
  z-index: var(--z-index-overlay, 15);
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0;
  visibility: hidden;
}
.modal:not(.modal--is-visible) {
  pointer-events: none;
  background-color: transparent;
}

.modal--is-visible {
  opacity: 1;
  visibility: visible;
}

/* close buttons */
.modal__close-btn {
  display: flex;
  flex-shrink: 0;
  border-radius: 50%;
  transition: 0.2s;
}
.modal__close-btn .icon {
  display: block;
  margin: auto;
}

.modal__close-btn--outer {
  /* close button - outside the modal__content */
  --size: 48px;
  width: var(--size);
  height: var(--size);
  position: fixed;
  top: var(--space-sm);
  right: var(--space-sm);
  z-index: var(--z-index-fixed-element, 10);
  background-color: hsla(
    var(--color-black-h),
    var(--color-black-s),
    var(--color-black-l),
    0.9
  );
  transition: 0.2s;
}
.modal__close-btn--outer .icon {
  color: var(--color-white); /* icon color */
  transition: transform 0.3s var(--ease-out-back);
}
.modal__close-btn--outer:hover {
  background-color: hsla(
    var(--color-black-h),
    var(--color-black-s),
    var(--color-black-l),
    1
  );
}
.modal__close-btn--outer:hover .icon {
  transform: scale(1.1);
}

.modal__close-btn--inner {
  /* close button - inside the modal__content */
  --size: 32px;
  width: var(--size);
  height: var(--size);
  background-color: var(--color-bg-light);
  box-shadow: var(--inner-glow), var(--shadow-sm);
  transition: 0.2s;
}
.modal__close-btn--inner .icon {
  color: inherit; /* icon color */
}
.modal__close-btn--inner:hover {
  background-color: var(--color-bg-lighter);
  box-shadow: var(--inner-glow), var(--shadow-md);
}

/* animations */
:root {
  --modal-transition-duration: 0.2s; /* fallback (i.e., unless specified differently in the variations 👇) */
}

@media (prefers-reduced-motion: no-preference) {
  .modal--animate-fade {
    --modal-transition-duration: 0.2s;
    transition: opacity var(--modal-transition-duration),
      background-color var(--modal-transition-duration),
      visibility 0s var(--modal-transition-duration);
  }
  .modal--animate-fade.modal--is-visible {
    transition: opacity var(--modal-transition-duration),
      background-color var(--modal-transition-duration), visibility 0s;
  }
  .modal--animate-scale,
  .modal--animate-translate-up,
  .modal--animate-translate-down,
  .modal--animate-translate-right,
  .modal--animate-translate-left {
    --modal-transition-duration: 0.2s;
    transition: opacity var(--modal-transition-duration),
      background-color var(--modal-transition-duration),
      visibility 0s var(--modal-transition-duration);
  }
  .modal--animate-scale .modal__content,
  .modal--animate-translate-up .modal__content,
  .modal--animate-translate-down .modal__content,
  .modal--animate-translate-right .modal__content,
  .modal--animate-translate-left .modal__content {
    will-change: transform;
    transition: transform var(--modal-transition-duration) var(--ease-out);
  }
  .modal--animate-scale.modal--is-visible,
  .modal--animate-translate-up.modal--is-visible,
  .modal--animate-translate-down.modal--is-visible,
  .modal--animate-translate-right.modal--is-visible,
  .modal--animate-translate-left.modal--is-visible {
    transition: opacity var(--modal-transition-duration),
      background-color var(--modal-transition-duration), visibility 0s;
  }
  .modal--animate-scale.modal--is-visible .modal__content,
  .modal--animate-translate-up.modal--is-visible .modal__content,
  .modal--animate-translate-down.modal--is-visible .modal__content,
  .modal--animate-translate-right.modal--is-visible .modal__content,
  .modal--animate-translate-left.modal--is-visible .modal__content {
    transform: scale(1); /* reset all transformations */
  }
  .modal--animate-slide-up,
  .modal--animate-slide-down,
  .modal--animate-slide-right,
  .modal--animate-slide-left {
    --modal-transition-duration: 0.3s;
    transition: opacity 0s var(--modal-transition-duration),
      background-color var(--modal-transition-duration),
      visibility 0s var(--modal-transition-duration);
  }
  .modal--animate-slide-up .modal__content,
  .modal--animate-slide-down .modal__content,
  .modal--animate-slide-right .modal__content,
  .modal--animate-slide-left .modal__content {
    will-change: transform;
    transition: transform var(--modal-transition-duration) var(--ease-out);
  }
  .modal--animate-slide-up.modal--is-visible,
  .modal--animate-slide-down.modal--is-visible,
  .modal--animate-slide-right.modal--is-visible,
  .modal--animate-slide-left.modal--is-visible {
    transition: background-color var(--modal-transition-duration), visibility 0s;
  }
  .modal--animate-slide-up.modal--is-visible .modal__content,
  .modal--animate-slide-down.modal--is-visible .modal__content,
  .modal--animate-slide-right.modal--is-visible .modal__content,
  .modal--animate-slide-left.modal--is-visible .modal__content {
    transform: scale(1); /* reset all transformations */
  }
  /* scale */
  .modal--animate-scale .modal__content {
    transform: scale(0.95);
  }
  /* translate */
  .modal--animate-translate-up .modal__content {
    transform: translateY(40px);
  }
  .modal--animate-translate-down .modal__content {
    transform: translateY(-40px);
  }
  .modal--animate-translate-right .modal__content {
    transform: translateX(-40px);
  }
  .modal--animate-translate-left .modal__content {
    transform: translateX(40px);
  }
  /* slide */
  .modal--animate-slide-up .modal__content {
    transform: translateY(100%);
  }
  .modal--animate-slide-down .modal__content {
    transform: translateY(-100%);
  }
  .modal--animate-slide-right .modal__content {
    transform: translateX(-100%);
  }
  .modal--animate-slide-left .modal__content {
    transform: translateX(100%);
  }
}
/* load content - optional */
.modal--is-loading .modal__content {
  visibility: hidden;
}
.modal--is-loading .modal__loader {
  display: flex;
}

.modal__loader {
  /* loader icon */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  display: none;
  pointer-events: none;
}

/* --image */
.modal-img-btn {
  position: relative;
  cursor: pointer;
}
.modal-img-btn::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: hsla(
    var(--color-black-h),
    var(--color-black-s),
    var(--color-black-l),
    0
  );
  transition: background 0.2s;
}
.modal-img-btn:hover::after {
  background-color: hsla(
    var(--color-black-h),
    var(--color-black-s),
    var(--color-black-l),
    0.7
  );
}
.modal-img-btn:hover .modal-img-btn__icon-wrapper {
  opacity: 1;
}

.modal-img-btn__icon-wrapper {
  position: absolute;
  z-index: 2;
  top: calc(50% - 24px);
  left: calc(50% - 24px);
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: hsla(
    var(--color-black-h),
    var(--color-black-s),
    var(--color-black-l),
    0.7
  );
  opacity: 0;
  transition: opacity 0.2s;
}
.modal-img-btn__icon-wrapper .icon {
  color: var(--color-white);
}

/* -------------------------------- 

File#: _3_video-gallery
Title: Video Gallery
Descr: A list of video previews opening a modal window

-------------------------------- */
.video-card__modal-control {
  display: block;
  color: inherit;
  text-decoration: none;
  position: relative;
}
.video-card__modal-control:hover .video-card__preview {
  filter: contrast(110%);
  box-shadow: var(--shadow-md);
}
.video-card__modal-control:hover .video-card__play-btn::before {
  transform: scale(1.2);
}

.video-card__preview {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  -o-object-fit: cover;
  object-fit: cover;
  box-shadow: var(--shadow-sm);
  transition: filter 0.3s, box-shadow 0.3s;
}

.video-card__play-btn {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
}
.video-card__play-btn .icon {
  position: relative;
  z-index: 1;
}
.video-card__play-btn::before {
  content: "";
  position: absolute;
  width: 60px;
  height: 60px;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  background-color: hsla(
    var(--color-white-h),
    var(--color-white-s),
    var(--color-white-l),
    0.9
  );
  border-radius: 50%;
  transition: transform 0.3s var(--ease-out-back);
}

/* -------------------------------- 

File#: _2_slideshow
Title: Slideshow
Descr: Show a collection of items one at a time

-------------------------------- */
:root {
  --slideshow-height: 280px;
  --slideshow-fade-transition-duration: 0.25s;
  --slideshow-slide-transition-duration: 0.35s;
  --slideshow-prx-transition-duration: 0.5s;
  --slideshow-btn-width: 1.6em;
  --slideshow-btn-height: 3.2em;
  --slideshow-btn-icon-size: 1.6em;
  --slideshow-btn-offset: var(--space-xs);
}
@media (min-width: 48rem) {
  :root {
    --slideshow-height: 380px;
  }
}
@media (min-width: 64rem) {
  :root {
    --slideshow-height: 480px;
  }
}
@media (min-width: 80rem) {
  :root {
    --slideshow-height: 580px;
  }
}

.slideshow__item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--slideshow-height);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.slideshow__item:focus {
  outline: none;
}

.slideshow--ratio-16\:9 .slideshow__item {
  height: 0;
  padding-bottom: 56.25%;
}

.slideshow--ratio-4\:3 .slideshow__item {
  height: 0;
  padding-bottom: 75%;
}

.slideshow--ratio-1\:1 .slideshow__item {
  height: 0;
  padding-bottom: 100%;
}

.slideshow {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.slideshow__content {
  overflow: hidden;
}

.slideshow__item {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  visibility: hidden;
}

.slideshow__item--selected {
  position: relative;
  z-index: 3;
  visibility: visible;
}

.slideshow--transition-fade .slideshow__item {
  opacity: 0;
  transition: opacity 0s var(--slideshow-fade-transition-duration),
    visibility 0s var(--slideshow-fade-transition-duration);
}

.slideshow--transition-fade .slideshow__item--selected {
  opacity: 1;
  transition: opacity var(--slideshow-fade-transition-duration);
}

.slideshow--transition-slide .slideshow__item {
  animation-duration: var(--slideshow-slide-transition-duration);
  animation-fill-mode: forwards;
  animation-timing-function: var(--ease-out);
}
.slideshow--transition-slide .slideshow__item > * {
  visibility: hidden;
}

.slideshow--transition-slide .slideshow__item--selected > * {
  visibility: visible;
}

.slideshow--transition-slide .slideshow__item--slide-in-left {
  animation-name: slide-in-left;
}

.slideshow--transition-slide .slideshow__item--slide-in-right {
  animation-name: slide-in-right;
}

.slideshow--transition-slide .slideshow__item--slide-out-left {
  animation-name: slide-out-left;
}

.slideshow--transition-slide .slideshow__item--slide-out-right {
  animation-name: slide-out-right;
}

.slideshow--transition-slide .slideshow__item--slide-out-left,
.slideshow--transition-slide .slideshow__item--slide-out-right {
  z-index: 2;
}
.slideshow--transition-slide
  .slideshow__item--slide-out-left.slideshow__item--selected,
.slideshow--transition-slide
  .slideshow__item--slide-out-right.slideshow__item--selected {
  z-index: 3;
}
.slideshow--transition-slide .slideshow__item--slide-out-left > *,
.slideshow--transition-slide .slideshow__item--slide-out-right > * {
  visibility: visible;
}

@keyframes slide-in-left {
  0% {
    visibility: visible;
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes slide-in-right {
  0% {
    visibility: visible;
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes slide-out-left {
  0% {
    visibility: visible;
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}
@keyframes slide-out-right {
  0% {
    visibility: visible;
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
.slideshow--transition-prx .slideshow__item {
  animation-duration: var(--slideshow-prx-transition-duration);
  animation-fill-mode: forwards;
  animation-timing-function: var(--ease-out);
}
.slideshow--transition-prx .slideshow__item > * {
  visibility: hidden;
}

.slideshow--transition-prx .slideshow__item--selected > * {
  visibility: visible;
}

.slideshow--transition-prx .slideshow__item--prx-in-left {
  animation-name: prx-in-left;
}

.slideshow--transition-prx .slideshow__item--prx-in-right {
  animation-name: prx-in-right;
}

.slideshow--transition-prx .slideshow__item--prx-out-left {
  animation-name: prx-out-left;
}

.slideshow--transition-prx .slideshow__item--prx-out-right {
  animation-name: prx-out-right;
}

.slideshow--transition-prx .slideshow__item--prx-out-left,
.slideshow--transition-prx .slideshow__item--prx-out-right {
  z-index: 2;
}
.slideshow--transition-prx
  .slideshow__item--prx-out-left.slideshow__item--selected,
.slideshow--transition-prx
  .slideshow__item--prx-out-right.slideshow__item--selected {
  z-index: 3;
}
.slideshow--transition-prx .slideshow__item--prx-out-left > *,
.slideshow--transition-prx .slideshow__item--prx-out-right > * {
  visibility: visible;
}

@keyframes prx-in-left {
  0% {
    visibility: visible;
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes prx-in-right {
  0% {
    visibility: visible;
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes prx-out-left {
  0% {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }
  100% {
    opacity: 0.3;
    transform: translateX(40%);
  }
}
@keyframes prx-out-right {
  0% {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }
  100% {
    opacity: 0.3;
    transform: translateX(-40%);
  }
}
.slideshow[data-swipe="on"] .slideshow__content {
  -webkit-user-select: none;
  user-select: none;
}
.slideshow[data-swipe="on"] .slideshow__content img {
  pointer-events: none;
}

.slideshow__control {
  display: none;
}

.slideshow[data-controls="hover"] .slideshow__control {
  opacity: 0;
  transition: opacity 0.3s;
}

.slideshow[data-controls="hover"]:hover .slideshow__control {
  opacity: 1;
}

.slideshow[data-swipe="on"] .slideshow__control {
  display: none;
}

.slideshow__control {
  display: block;
  position: absolute;
  z-index: 4;
  top: 50%;
  transform: translateY(-50%);
}
.slideshow__control:first-of-type {
  left: var(--slideshow-btn-offset);
}
.slideshow__control:last-of-type {
  right: var(--slideshow-btn-offset);
}

@media (min-width: 64rem) {
  .slideshow[data-swipe="on"] .slideshow__control {
    display: block;
  }
}
.slideshow__btn {
  display: block;
  background-color: hsla(
    var(--color-black-h),
    var(--color-black-s),
    var(--color-black-l),
    0.75
  );
  height: var(--slideshow-btn-height);
  width: var(--slideshow-btn-width);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.slideshow__btn:hover {
  background-color: hsla(
    var(--color-contrast-higher-h),
    var(--color-contrast-higher-s),
    var(--color-contrast-higher-l),
    0.85
  );
}
.slideshow__btn:hover .icon {
  color: var(--color-bg);
}
.slideshow:not(.slideshow--is-animating) .slideshow__btn:active {
  transform: translateY(2px);
}
.slideshow__btn .icon {
  display: block;
  width: var(--slideshow-btn-icon-size);
  height: var(--slideshow-btn-icon-size);
  margin: 0 auto;
  transition: color 0.2s;
  color: var(--color-white);
}
@supports (grid-area: auto) {
  .slideshow__btn {
    background-color: transparent;
  }
  .slideshow__btn .icon {
    color: var(--color-contrast-higher);
  }
}

.slideshow__navigation {
  position: absolute;
  z-index: 4;
  bottom: 0;
  width: 100%;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
}

.slideshow__nav-item {
  display: inline-block;
  margin: 0 var(--space-3xs);
}
.slideshow__nav-item button {
  display: block;
  position: relative;
  font-size: 8px;
  color: var(--color-contrast-high);
  height: 1em;
  width: 1em;
  border-radius: 50%;
  background-color: currentColor;
  opacity: 0.4;
  cursor: pointer;
  transition: background 0.3s;
}
.slideshow__nav-item button::before {
  content: "";
  position: absolute;
  top: calc(50% - 0.5em);
  left: calc(50% - 0.5em);
  height: 1em;
  width: 1em;
  font-size: 14px;
  border-radius: inherit;
  border: 1px solid var(--color-contrast-high);
  opacity: 0;
  transform: scale(0);
  transition: 0.3s;
}
.slideshow__nav-item button:focus {
  outline: none;
}
.slideshow__nav-item button:focus::before {
  opacity: 1;
  transform: scale(1);
}

.slideshow__nav-item--selected button {
  opacity: 1;
}

@media (min-width: 64rem) {
  .slideshow__navigation {
    height: 40px;
  }
  .slideshow__nav-item button {
    font-size: 10px;
  }
  .slideshow__nav-item button::before {
    font-size: 16px;
  }
}

/* -------------------------------- 

File#: _3_expandable-img-gallery
Title: Expandable Image Gallery
Descr: Image gallery that expands in a modal media gallery on click

-------------------------------- */
:root {
  --exp-gallery-animation-duration: 0.3s;
}

.exp-gallery-item-hidden {
  opacity: 0;
}

.exp-lightbox {
  transition: background var(--exp-gallery-animation-duration);
}
.exp-lightbox .menu-bar {
  --menu-bar-button-size: 2.2em;
  --menu-bar-icon-size: 1.2em;
  --menu-bar-horizontal-gap: var(--space-2xs);
  --menu-bar-vertical-gap: 4px;
  --menu-bar-label-size: var(--text-xs);
}
.exp-lightbox .slideshow {
  --slideshow-btn-width: 1.6em;
  --slideshow-btn-height: 3.2em;
  --slideshow-btn-icon-size: 1.6em;
  --slideshow-btn-offset: var(--space-md);
}
.exp-lightbox .slideshow__content {
  position: relative;
}
.exp-lightbox:not(.modal--is-visible) {
  background-color: transparent;
}

.exp-lightbox__content {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.exp-lightbox__header {
  position: absolute;
  top: 32px;
  right: 32px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  background-color: white;
  border-radius: 50px;
  cursor: pointer !important;
}

.exp-lightbox__title {
  font-size: var(--text-md);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: var(--space-sm);
}

.exp-lightbox__body {
  position: relative;
  z-index: 1;
  flex-grow: 1;
  padding: var(--space-md);
}
@media (min-width: 64rem) {
  .exp-lightbox__body {
    padding-top: var(--space-xs);
    padding-bottom: var(--space-xs);
    padding-right: calc(
      var(--space-xs) + var(--slideshow-btn-width) + var(--slideshow-btn-offset)
    );
    padding-left: calc(
      var(--space-xs) + var(--slideshow-btn-width) + var(--slideshow-btn-offset)
    );
  }
}

.exp-lightbox {
  --slideshow-height: 100%;
}
.exp-lightbox .slideshow {
  display: flex;
  align-items: stretch;
}
.exp-lightbox .slideshow__content {
  flex-grow: 1;
}

.exp-lightbox--no-transition .slideshow__content * {
  transition: none !important;
  animation: none !important;
}

.exp-lightbox__media {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  max-height: 100%;
  max-width: 100%;
}

.exp-lightbox__media-outer {
  position: relative;
  width: 100%;
  flex-grow: 1;
}
.slideshow__content--hide .exp-lightbox__media-outer {
  opacity: 0;
}

.exp-lightbox__media-inner {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.exp-lightbox__media-inner img {
  display: inline-block;
  height: auto;
  width: auto;
  max-height: 100%;
}

.exp-lightbox.modal--is-visible
  .slideshow[data-swipe="on"]
  .exp-lightbox__media-inner
  img {
  pointer-events: auto;
  -webkit-user-select: none;
  user-select: none;
}

.exp-lightbox__caption {
  flex-shrink: 0;
  text-align: center;
  max-width: 600px;
  margin-top: var(--space-xs);
  font-size: var(--text-sm);
}

.exp-lightbox__media-outer {
  min-height: 200px;
}
@supports (display: flex) {
  .exp-lightbox__media-outer {
    min-height: 0;
  }
}

.exp-lightbox__clone-img-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-index-overlay, 15);
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transform-origin: top left;
  transition: transform var(--exp-gallery-animation-duration) var(--ease-out);
  will-change: transform;
}
.exp-lightbox__clone-img-wrapper svg,
.exp-lightbox__clone-img-wrapper rect,
.exp-lightbox__clone-img-wrapper image {
  height: 100%;
  width: 100%;
}

.exp-lightbox__clone-img-wrapper--is-visible {
  visibility: visible;
  opacity: 1;
}

.exp-lightbox__body[data-zoom="on"] .exp-lightbox__media-inner img {
  cursor: zoom-in;
}

.exp-lightbox__zoom {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 3;
  overflow: auto;
  background-color: var(--color-black);
  cursor: zoom-out;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0s 0.3s, visibility 0s 0.3s;
}
.exp-lightbox__zoom img {
  display: block;
  width: 100%;
  max-width: none;
  transform-origin: top left;
  transition: transform 0.3s;
}

.exp-lightbox__zoom--no-transition img {
  transition: none;
}

.exp-lightbox__zoom--is-visible {
  opacity: 1;
  visibility: visible;
  transition: none;
}

.exp-gallery img {
  display: block;
  width: 100%;
  -webkit-transition: 0.4s ease;
  transition: 0.4s ease;
}
@media (min-width: 1280px) {
  .exp-gallery img:hover {
    cursor: pointer;
    -webkit-filter: brightness(120%);
    filter: brightness(120%);
    -webkit-transform: scale(1.08);
    transform: scale(1.08);
  }
}

/* -------------------------------- 

File#: _1_custom-select
Title: Custom Select
Descr: Custom Select Control

-------------------------------- */
:root {
  /* --default variation only 👇 */
  --select-icon-size: 16px;
  --select-icon-right-margin: var(--space-sm); /* icon margin right */
  --select-text-icon-gap: var(--space-3xs); /* gap between text and icon */
}

.select {
  position: relative;
}

.select__input {
  width: 100%;
  height: 100%;
  padding-right: calc(
    var(--select-icon-size) + var(--select-icon-right-margin) +
      var(--select-text-icon-gap)
  ) !important;
  -webkit-user-select: none;
  user-select: none;
}

.select__icon {
  width: var(--select-icon-size);
  height: var(--select-icon-size);
  pointer-events: none;
  position: absolute;
  right: var(--select-icon-right-margin);
  top: 50%;
  transform: translateY(-50%);
}

/* --custom-dropdown */
:root {
  --select-dropdown-gap: 4px; /* distance between select control and custom dropdown */
}

.select__button {
  /* created in JS - custom select control */
  width: 100%;
}

.select__button[aria-expanded="true"] {
  /* custom select control if dropdown = visible */
}

.select__dropdown {
  /* created in JS - custom select dropdown */
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 200px;
  max-height: 1px; /* updated in JS */
  background-color: var(--color-bg-light);
  box-shadow: var(--inner-glow), var(--shadow-md);
  padding: var(--space-3xs) 0;
  border-radius: var(--radius-md);
  z-index: var(--z-index-popover, 5);
  margin-top: var(--select-dropdown-gap);
  margin-bottom: var(--select-dropdown-gap);
  overflow: auto;
  font-size: 1rem;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 0.2s, opacity 0.2s;
}

.select__dropdown--right {
  /* change dropdown position based on the available space */
  right: 0;
  left: auto;
}

.select__dropdown--up {
  bottom: 100%;
  top: auto;
}

.select__button[aria-expanded="true"] + .select__dropdown {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s, opacity 0.2s;
}

/* custom <optgroup> list - include all <option>s if no <optgroup> available  */
.select__list {
  list-style: none !important;
}

.select__list:not(:first-of-type) {
  padding-top: var(--space-2xs);
}

.select__list:not(:last-of-type) {
  border-bottom: 1px solid
    hsla(
      var(--color-contrast-higher-h),
      var(--color-contrast-higher-s),
      var(--color-contrast-higher-l),
      0.1
    );
  padding-bottom: var(--space-2xs);
}

.select__item {
  /* single item inside .select__list */
  display: flex;
  align-items: center;
  padding: var(--space-2xs) var(--space-sm);
  color: var(--color-contrast-high);
  width: 100%;
  text-align: left;
  /* truncate text */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.select__item--optgroup {
  /* custom <optgroup> label */
  font-size: 0.8125rem;
  color: var(--color-contrast-medium);
}

.select__item--option {
  /* custom <option> label */
  cursor: pointer;
  transition: 0.2s;
}
.select__item--option:hover {
  background-color: hsla(
    var(--color-contrast-higher-h),
    var(--color-contrast-higher-s),
    var(--color-contrast-higher-l),
    0.075
  );
}
.select__item--option:focus {
  outline: none;
  background-color: hsla(
    var(--color-primary-h),
    var(--color-primary-s),
    var(--color-primary-l),
    0.15
  );
}
.select__item--option[aria-selected="true"] {
  /* selected option */
  background-color: var(--color-primary);
  color: var(--color-white);
  position: relative;
}
.select__item--option[aria-selected="true"]::after {
  /* check icon next to the selected language */
  content: "";
  display: block;
  height: 1em;
  width: 1em;
  margin-left: auto;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpolyline stroke-width='2' stroke='%23ffffff' fill='none' stroke-linecap='round' stroke-linejoin='round' points='1,9 5,13 15,3 '/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpolyline stroke-width='2' stroke='%23ffffff' fill='none' stroke-linecap='round' stroke-linejoin='round' points='1,9 5,13 15,3 '/%3E%3C/svg%3E");
}
.select__item--option[aria-selected="true"]:focus {
  box-shadow: inset 0 0 0 2px var(--color-primary-dark);
}
.select__item--option[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* -------------------------------- 

File#: _1_popover
Title: Popover
Descr: A pop-up box controlled by a trigger element

-------------------------------- */
:root {
  --popover-width: 250px;
  --popover-control-gap: 4px;
  --popover-viewport-gap: 20px;
  --popover-transition-duration: 0.2s;
}

.popover {
  position: fixed;
  width: var(--popover-width);
  z-index: 11;
  margin-top: var(--popover-control-gap);
  margin-bottom: var(--popover-control-gap);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s var(--popover-transition-duration),
    opacity var(--popover-transition-duration);
}

.popover--is-visible {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s, opacity var(--popover-transition-duration);
}

/* custom */
@media (max-width: 767px) {
  .Product__Gallery .ProductItem__NewLabel {
    font-size: 10px;
    padding: 7px !important;
  }
}

@media (min-width: 768px) {
  .Product__Gallery .ProductItem__NewLabel {
    font-size: 12px;
  }
}
@media (min-width: 641px) {
  .ProductItem__NewLabel {
    font-weight: var(--title2-font-weight);
    font-style: italic;
    border-radius: 4px;
    color: white;
    /*margin-left: 4px;*/
  }
  /*.ProductForm__BuyButtons {
    margin-bottom: 32px;
  }*/
}
/**/
.PageOverlay.isvisiblecust {
  z-index: 8;
}
.popupCart .Drawer__Content {
  height: auto;
}
.popupCart .CartItem {
  display: flex;
}
.popupCart .CartItem__Info {
  display: flex;
  margin: 0;
  gap: 50px;
  flex: 1 1 100%;
  position: relative;
  justify-content: flex-end;
}
.popupCart .CartItem__Info .CartItem__Title {
  flex: 1 1 auto;
  max-width: 33%;
  width: auto;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  overflow: visible;
  position: relative;
  flex-direction: column;
  order: 3;
}
.popupCart .CartItem__Info .CartItem__Title:after {
  content: "";
  width: 1px;
  background: #84847b;
  height: 80%;
  left: -25px;
  position: absolute;
  top: 10%;
}
.popupCart .CartItem__Info .CartItem__Meta:after {
  content: "";
  width: 1px;
  background: #84847b;
  height: 80%;
  right: -25px;
  position: absolute;
  top: 10%;
}
.popupCart .CartItem__Info .CartItem__Meta {
  flex: 0 1 auto;
  justify-content: center;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  position: relative;
}
.popupCart .CartItem__Info .CartItem__Variant {
  margin: 0;
  font-size: 18px;
}
.popupCart .CartItem__Info .CartItem__Actions {
  display: flex;
  margin: 0;
  gap: 20px;
}
.wrapperCollection {
  background: #ebebea;
  padding: 32px 0;
}
.wrapperCollection .title {
  font-style: italic;
  font-weight: 700;
  font-size: 24px;
  margin-bottom: 30px;
}
.popupCart {
  position: fixed;
  top: 15px;
  left: calc(50% - 49vw);
  width: 98vw;
  padding: 0;
  background: var(--newsletter-popup-background);
  color: var(--newsletter-popup-text-color);
  z-index: 50;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  visibility: hidden;
  transform: translateY(25px);
  opacity: 0;
  transition: all 0.5s var(--drawer-transition-timing);
  border-radius: 12px;
  max-height: calc(100vh - 30px);
}
.popupCart .Drawer__Header {
  background: #1d1d1b;
  color: #fff;
  padding: 16px 24px;
}
.popupCart .Drawer__Header .Drawer__Title {
  color: #fff;
  font-size: 24px;
  line-height: 28px;
}
.popupCart .ProductItem__Title {
  font-size: 16px;
}
.popupCart .ProductItem__PriceList {
  max-width: 60%;
  flex-basis: 60%;
  align-items: center;
}
.popupCart .ProductItem__PriceList .ProductItem__Price {
  font-size: 16px;
}
.popupCart[aria-hidden="false"] {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  overflow: auto;
}
.popupCart .Drawer__Main {
  padding: 0 30px;
}
.popupCart .Drawer__Footer {
  display: flex;
  opacity: 1;
  transform: none;
  justify-content: space-between;
}
.popupCart .Drawer__Close {
  right: 30px;
  left: auto;
}
.ProductItem .ProductForm__Itema {
  position: relative;
  width: 80px;
  text-align: left;
  padding: 4px 6px;
  border: 1px solid var(--border-color);
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-radius: 4px;
  /*height: 45px;*/
}

.ProductItem .ProductForm__Itema.ProductForm__Itema--custom {
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media (max-width: 640px) {
  .ProductItem .ProductForm__Itema.ProductForm__Itema--custom {
    width: 50px !important;
    padding: 8.5px !important;
  }
  .ProductForm__AddToCart:has(span > svg) {
    border: none;
    padding: 2px 8px !important;
    min-width: 15% !important;
  }
  /*.ProductItem .ProductForm__BuyButtons .ProductForm__AddToCart svg {
    width: 80%!important;
  }*/
  .ProductForm__Itema--custom--option,
  .ProductForm__SelectedValue {
    font-size: 10px;
  }
  .ProductItem .ProductForm__BuyButtons .ProductForm__AddToCart:disabled {
    font-size: 8px !important;
    /*padding: 6.5px!important;*/
  }
}

@media (min-width: 641px) {
  .ProductItem .ProductForm__Itema.ProductForm__Itema--custom {
    width: 65px;
    padding: 7px;
  }

  .ProductForm__BuyButtons:has(.ProductForm__AddToCart):has(span > svg) {
    padding-right: 14px !important;
  }

  .ProductForm__AddToCart:has(span > svg) {
    border: none;
    padding: 2.5px 10px !important;
  }
}

.ProductForm__Itema .Icon--select-arrow {
  position: absolute;
  top: calc(50% - 5px);
  right: 10px;
  width: 10px;
  height: 10px;
}
.ProductItem .ProductItem__Wrapper .ProductForm {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ProductItem .ProductForm__Variants {
  border-bottom: 0;
  margin-bottom: 0;
  padding: 0;
}
.ProductItem .OptionSelectora::before {
  left: -15px;
  border-width: 10px 15px 10px 0px;
  border-color: transparent var(--light-background) transparent transparent;
  filter: drop-shadow(-2px 0px 2px rgba(54, 54, 54, 0.2));
  content: "";
  position: absolute;
  right: 0;
  width: 10px;
  height: 10px;
  border-style: solid;
  bottom: 10px;
}
.ProductItem .OptionSelectora {
  position: absolute;
  background: var(--light-background);
  z-index: 10;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  touch-action: manipulation;
  transform: translateY(100%);
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transform: none;
  width: auto;
  bottom: 0;
  left: calc(100% + 15px);
  opacity: 0;
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
  /*min-width: 70px;*/
}

.ProductItem .ProductForm__BuyButtons {
  margin: 0;
}
.ProductItem .ProductForm__BuyButtons .ProductForm__AddToCart:disabled {
  font-size: 12px;
  padding: 6.5px;
  line-height: 1;
}

.ProductItem .ProductForm__BuyButtons .ProductForm__AddToCart {
  /*height: 45px;*/
  padding: 4px 10px;
}
.ProductItem .ProductForm__BuyButtons .ProductForm__AddToCart svg {
  width: 80%;
  margin: auto;
}
.ProductItem .OptionSelectora[aria-hidden="false"] {
  opacity: 1;
  transform: none;
  visibility: visible;
}
.ProductItem .OptionSelectora .Popover__ValueList {
  max-height: 260px;
}
.SizeSwatch.unavailable {
  opacity: 0.3;
  position: relative;
}
.SizeSwatch.unavailable:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to top left,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) calc(50% - 0.8px),
    rgb(0, 0, 0) 50%,
    rgba(0, 0, 0, 0) calc(50% + 0.8px),
    rgba(0, 0, 0, 0) 100%
  );
}
.popupCart .Cart__Checkout {
  width: auto;
}
.wrapperCollection .collectionList {
  margin: 0;
}
/*.CartItem__QuantitySelector .QuantitySelector{
  border:none;
  gap: 4px;
}*/
.CartItem__QuantitySelector .QuantitySelector .QuantitySelector__Button {
  /*border-radius: 4px;*/
  /*border: 1px solid var(--text-color-light);*/
  width: 23px;
  height: 25px;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.CartItem__QuantitySelector
  .QuantitySelector
  .QuantitySelector__CurrentQuantity {
  /*border: 1px solid var(--text-color-light);*/
  width: 23px;
  height: 25px;
  font-style: normal;
}
.popupCart .CartItem__Remove {
  position: absolute;
  right: 0;
  bottom: 100%;
  margin: 0;
  text-decoration: none;
  text-indent: -9999px;
  height: 16px;
  width: 16px;
}
.popupCart .CartItem__PriceList {
  font-weight: 400;
  font-size: 18px;
  line-height: 18px;
}
.popupCart .CartItem__Remove:before {
  width: 100%;
  height: 100%;
  background: linear-gradient(
      to top left,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0) calc(50% - 0.8px),
      rgba(0, 0, 0, 1) 50%,
      rgba(0, 0, 0, 0) calc(50% + 0.8px),
      rgba(0, 0, 0, 0) 100%
    ),
    linear-gradient(
      to top right,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0) calc(50% - 0.8px),
      rgba(0, 0, 0, 1) 50%,
      rgba(0, 0, 0, 0) calc(50% + 0.8px),
      rgba(0, 0, 0, 0) 100%
    );
}
.popupCart .CartItem__Remove:hover:before {
  transform: rotate(360deg);
}

@media (min-width: 32rem) {
  .popupCart {
    left: calc(50% - 300px);
    width: 600px;
  }
}
@media (min-width: 48rem) {
  .popupCart {
    left: calc(50% - 350px);
    width: 700px;
  }
}
@media (min-width: 64rem) {
  .popupCart {
    left: calc(50% - 400px);
    width: 800px;
  }
}
@media (min-width: 80rem) {
  .popupCart {
    left: calc(50% - 450px);
    width: 900px;
  }
}
@media (min-width: 90rem) {
  .popupCart {
    left: calc(50% - 505px);
    width: 1010px;
  }
}

/* 'Combine it with' size and add to cart btn styles */
.ProductItem__Title.Title2 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 31.51rem) {
  .hidden-desktop-ru {
    display: none !important;
  }
}

@media (max-width: 359px) {
  .ProductForm__Option .flex {
    flex-wrap: wrap;
  }
  .ProductForm__Option .flex .flex,
  .ProductForm__Option .flex .hidden-desktop-ru,
  .ProductItem .ProductForm__BuyButtons .ProductForm__AddToCart {
    width: 100% !important;
  }
  .ProductItem .ProductForm__Itema {
    width: 70%;
  }
  .ProductItem .OptionSelectora::before {
    bottom: 40px;
  }
  .ProductItem .OptionSelectora {
    left: calc(100% + 10px);
  }
}

@media (min-width: 360px) and (max-width: 31.5rem) {
  .ProductItem .ProductForm__BuyButtons .ProductForm__AddToCart,
  .ProductItem .ProductForm__Itema {
    width: auto !important;
  }
  .ProductItem .OptionSelectora::before {
    bottom: 5px;
  }
  .ProductItem .OptionSelectora {
    left: calc(100% - 75px);
  }
}

@media (max-width: 31.5rem) {
  .hidden-mobile-ru {
    display: none !important;
  }
  .ProductForm__OptionName {
    font-size: 11px;
  }
  /*.ProductForm__Option {
    padding-top: 8px;
  }*/
  .ProductForm__Option .flex {
    justify-content: space-between;
  }
  .ProductForm__Itema .Icon--select-arrow {
    top: calc(50% - 4px);
    right: 5px;
    width: 8px;
    height: 8px;
  }
  .ProductItem .OptionSelectora {
    z-index: 2;
  }
  .ProductItem .ProductForm__BuyButtons .ProductForm__AddToCart {
    height: unset !important;
  }
  .ProductItem .ProductItem__Wrapper .ProductForm {
    flex-direction: column;
    justify-content: unset;
    align-items: initial;
    gap: 10px;
  }
  .ProductItem .ProductForm__Itema {
    line-height: 18px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 20px;
    padding-left: 8px;
    height: auto;
  }
  .popupCart .Drawer__Main {
    padding: 0 10px;
  }
  .CartItem__Title {
    white-space: initial;
  }
  .ProductItem .ProductForm__BuyButtons .ProductForm__AddToCart {
    min-width: 50px;
    padding: 4.5px 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 18px;
  }
  /* End of 'Combine it with' size and add to cart btn styles */
  .ProductItem .ProductItem__Wrapper .ProductForm {
    flex-direction: column;
    justify-content: unset;
    align-items: initial;
    gap: 10px;
  }
  .ProductItem .ProductForm__BuyButtons .ProductForm__AddToCart {
    width: 100% !important;
  }
  .ProductItem .ProductForm__Itema {
    width: 100%;
    line-height: 18px;
    padding: 4px 8px;
    height: auto;
  }
  .popupCart .Drawer__Main {
    padding: 0 10px;
  }
  .CartItem__Title {
    white-space: initial;
  }
  .ProductItem .ProductForm__BuyButtons .ProductForm__AddToCart {
    width: 50px;
  }
  .CartItem__ImageWrapper {
    /*width:120px;
    min-width: 120px;*/
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .CartItem__ImageWrapper .AspectRatio {
    width: 100%;
  }
  .popupCart .CartItem__Info {
    flex-direction: column;
    gap: 0;
  }
  .popupCart .CartItem__Info .CartItem__Meta {
    align-items: flex-start;
    border-bottom: 1px solid #ebebea;
    padding-bottom: 10px;
    margin-bottom: 10px;
    justify-content: flex-start;
    flex-direction: row;
  }
  .popupCart .CartItem__Info .CartItem__Actions {
    align-items: flex-start;
    border-bottom: 1px solid #ebebea;
    padding-bottom: 10px;
    margin-bottom: 10px;
  }
  .popupCart .CartItem__Info .CartItem__Title {
    flex-direction: row;
    justify-content: space-between;
    max-width: 100%;
  }
  .popupCart .CartItem__Info .CartItem__Title .Heading {
    font-size: 14px;
    text-align: left;
  }
  .popupCart .CartItem__Info .CartItem__Title::after {
    content: none;
  }
  .popupCart .CartItem__Info .CartItem__Variant,
  .popupCart .CartItem__PriceList {
    font-size: 14px;
  }
  .CartItem__QuantitySelector
    .QuantitySelector
    .QuantitySelector__CurrentQuantity {
    width: 20px;
    height: 20px;
  }
  .CartItem__QuantitySelector .QuantitySelector .QuantitySelector__Button {
    width: 20px;
    height: 22px;
  }
}

.CartItem__ImageWrapper .AspectRatio > img {
  border-radius: 6px;
  object-fit: cover;
}

/* sizes order */
.ProductForm__Option .SizeSwatchList.HorizontalList {
  display: flex;
  flex-wrap: wrap;
}
.ProductForm__Option .SizeSwatchList .HorizontalList__Item[data-size="16"] {
  order: 1;
}
.ProductForm__Option .SizeSwatchList .HorizontalList__Item[data-size="17"] {
  order: 2;
}
.ProductForm__Option .SizeSwatchList .HorizontalList__Item[data-size="18"] {
  order: 3;
}
.ProductForm__Option .SizeSwatchList .HorizontalList__Item[data-size="19"] {
  order: 4;
}
.ProductForm__Option .SizeSwatchList .HorizontalList__Item[data-size="20"] {
  order: 5;
}
.ProductForm__Option .SizeSwatchList .HorizontalList__Item[data-size="21"] {
  order: 6;
}
.ProductForm__Option .SizeSwatchList .HorizontalList__Item[data-size="22"] {
  order: 7;
}
.ProductForm__Option .SizeSwatchList .HorizontalList__Item[data-size="23"] {
  order: 8;
}
.ProductForm__Option .SizeSwatchList .HorizontalList__Item[data-size="24"] {
  order: 9;
}
.ProductForm__Option .SizeSwatchList .HorizontalList__Item[data-size="25"] {
  order: 10;
}
.ProductForm__Option .SizeSwatchList .HorizontalList__Item[data-size="26"] {
  order: 11;
}
.ProductForm__Option .SizeSwatchList .HorizontalList__Item[data-size="27"] {
  order: 12;
}
.ProductForm__Option .SizeSwatchList .HorizontalList__Item[data-size="28"] {
  order: 13;
}
.ProductForm__Option .SizeSwatchList .HorizontalList__Item[data-size="29"] {
  order: 14;
}
.ProductForm__Option .SizeSwatchList .HorizontalList__Item[data-size="30"] {
  order: 15;
}
.ProductForm__Option .SizeSwatchList .HorizontalList__Item[data-size="31"] {
  order: 16;
}
.ProductForm__Option .SizeSwatchList .HorizontalList__Item[data-size="32"] {
  order: 17;
}
.ProductForm__Option .SizeSwatchList .HorizontalList__Item[data-size="33"] {
  order: 18;
}
.ProductForm__Option .SizeSwatchList .HorizontalList__Item[data-size="34"] {
  order: 19;
}
.ProductForm__Option .SizeSwatchList .HorizontalList__Item[data-size="35"] {
  order: 20;
}
.ProductForm__Option .SizeSwatchList .HorizontalList__Item[data-size="36"] {
  order: 21;
}
.ProductForm__Option .SizeSwatchList .HorizontalList__Item[data-size="37"] {
  order: 22;
}
.ProductForm__Option .SizeSwatchList .HorizontalList__Item[data-size="38"] {
  order: 23;
}
.ProductForm__Option .SizeSwatchList .HorizontalList__Item[data-size="39"] {
  order: 24;
}
.ProductForm__Option .SizeSwatchList .HorizontalList__Item[data-size="40"] {
  order: 25;
}
.ProductForm__Option .SizeSwatchList .HorizontalList__Item[data-size="41"] {
  order: 26;
}
.ProductForm__Option .SizeSwatchList .HorizontalList__Item[data-size="42"] {
  order: 27;
}
.ProductForm__Option .SizeSwatchList .HorizontalList__Item[data-size="43"] {
  order: 28;
}
.ProductForm__Option .SizeSwatchList .HorizontalList__Item[data-size="44"] {
  order: 29;
}
.ProductForm__Option .SizeSwatchList .HorizontalList__Item[data-size="45"] {
  order: 30;
}
.ProductForm__Option .SizeSwatchList .HorizontalList__Item[data-size="46"] {
  order: 31;
}
.ProductForm__Option .SizeSwatchList .HorizontalList__Item[data-size="47"] {
  order: 32;
}
.ProductForm__Option .SizeSwatchList .HorizontalList__Item[data-size="48"] {
  order: 33;
}
.ProductForm__Option .SizeSwatchList .HorizontalList__Item[data-size="49"] {
  order: 34;
}
.ProductForm__Option .SizeSwatchList .HorizontalList__Item[data-size="50"] {
  order: 35;
}
.ProductForm__Option .SizeSwatchList .HorizontalList__Item[data-size="50"] {
  order: 36;
}
.ProductForm__Option .SizeSwatchList .HorizontalList__Item[data-size="51"] {
  order: 37;
}
.ProductForm__Option .SizeSwatchList .HorizontalList__Item[data-size="52"] {
  order: 38;
}
.ProductForm__Option .SizeSwatchList .HorizontalList__Item[data-size="53"] {
  order: 39;
}
.ProductForm__Option .SizeSwatchList .HorizontalList__Item[data-size="54"] {
  order: 40;
}
.ProductForm__Option .SizeSwatchList .HorizontalList__Item[data-size="55"] {
  order: 41;
}
.ProductForm__Option .SizeSwatchList .HorizontalList__Item[data-size="56"] {
  order: 42;
}
.ProductForm__Option .SizeSwatchList .HorizontalList__Item[data-size="57"] {
  order: 43;
}
.ProductForm__Option .SizeSwatchList .HorizontalList__Item[data-size="58"] {
  order: 44;
}
.ProductForm__Option .SizeSwatchList .HorizontalList__Item[data-size="59"] {
  order: 45;
}
.ProductForm__Option .SizeSwatchList .HorizontalList__Item[data-size="60"] {
  order: 46;
}
.ProductForm__Option .SizeSwatchList .HorizontalList__Item[data-size="XXS"] {
  order: 47;
}
.ProductForm__Option .SizeSwatchList .HorizontalList__Item[data-size="XS"] {
  order: 48;
}
.ProductForm__Option .SizeSwatchList .HorizontalList__Item[data-size="S"] {
  order: 49;
}
.ProductForm__Option .SizeSwatchList .HorizontalList__Item[data-size="M"] {
  order: 50;
}
.ProductForm__Option .SizeSwatchList .HorizontalList__Item[data-size="L"] {
  order: 51;
}
.ProductForm__Option .SizeSwatchList .HorizontalList__Item[data-size="XL"] {
  order: 52;
}
.ProductForm__Option .SizeSwatchList .HorizontalList__Item[data-size="XXL"] {
  order: 53;
}
.ProductForm__Option .SizeSwatchList .HorizontalList__Item[data-size="XXXL"] {
  order: 54;
}

.cn_element input {
  appearance: auto !important;
}

/*
.ProductItem__Image--alternate {
  border-radius: 11px!important;
}
*/

.ProductItem__ImageWrapper .AspectRatio {
  overflow: hidden;
}

@media (max-width: 749px) {
  #bon-loyalty-btn {
    bottom: 253px !important;
  }
  .whatsapp-widget {
    bottom: 110px !important;
  }

  .Popover[aria-hidden="false"] .whatsapp-widget {
    display: none !important;
  }

  .Popover[aria-hidden="false"] #bon-loyalty-btn {
    display: none !important;
  }
}

/* font landing new era */
.text-landing {
  font-family: var(--landing-font-family);
  font-weight: var(--landing-font-weight);
  font-style: var(--landing-font-style);
  color: var(--heading-color);
  transition: color 0.2s ease-in-out;
}

/* -------------------------------- 

File#: _1_circle-loader
Title: Circle Loader
Descr: A collection of animated circle loaders

-------------------------------- */
:root {
  --circle-loader-v1-size: 24px;
  --circle-loader-v1-stroke-width: 4px;
  --circle-loader-v2-size: 64px;
  --circle-loader-v2-stroke-width: 2;
  --circle-loader-v3-size: 64px;
  --circle-loader-v4-size: 48px;
  --circle-loader-v5-size: 64px;
  --circle-loader-v6-size: 48px;
}

.circle-loader {
  position: relative;
  display: block;
}

@supports ((-webkit-animation-name: this) or (animation-name: this)) {
  .circle-loader__label {
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
  }
}
@supports ((-webkit-animation-name: this) or (animation-name: this)) {
  .circle-loader--v1 {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    will-change: transform;
    -webkit-animation: circle-loader-1 0.75s infinite var(--ease-in-out);
    animation: circle-loader-1 0.75s infinite var(--ease-in-out);
  }
  .circle-loader--v1 .circle-loader__circle {
    width: var(--circle-loader-v1-size);
    height: var(--circle-loader-v1-size);
    border-width: var(--circle-loader-v1-stroke-width);
    border-style: solid;
    border-color: gray;
    border-radius: 50%;
  }
  .circle-loader--v1 .circle-loader__circle::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-width: inherit;
    border-style: inherit;
    border-color: transparent;
    border-top-color: white;
    border-radius: inherit;
  }
}
@-webkit-keyframes circle-loader-1 {
  0% {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  100% {
    -webkit-transform: rotate(405deg);
    transform: rotate(405deg);
  }
}
@keyframes circle-loader-1 {
  0% {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  100% {
    -webkit-transform: rotate(405deg);
    transform: rotate(405deg);
  }
}
@supports ((-webkit-animation-name: this) or (animation-name: this)) {
  .circle-loader--v2 {
    will-change: transform;
    -webkit-animation: circle-loader-spinning-main 1.4s infinite linear;
    animation: circle-loader-spinning-main 1.4s infinite linear;
  }
  .circle-loader--v2 .circle-loader__svg {
    display: block;
    width: var(--circle-loader-v2-size);
    height: var(--circle-loader-v2-size);
    color: var(--color-primary);
  }
  .circle-loader--v2 .circle-loader__svg > * {
    stroke-width: var(--circle-loader-v2-stroke-width);
  }
  .circle-loader--v2 .circle-loader__base {
    opacity: 0.2;
  }
  .circle-loader--v2 .circle-loader__fill {
    stroke-linecap: round;
    stroke-dashoffset: 0;
    stroke-dasharray: 90 120;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-animation: circle-loader-dash 1.4s infinite;
    animation: circle-loader-dash 1.4s infinite;
  }
}
@-webkit-keyframes circle-loader-dash {
  0%,
  20% {
    stroke-dashoffset: 0;
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  50%,
  70% {
    stroke-dashoffset: 80;
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
  }
  100% {
    stroke-dashoffset: 0;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes circle-loader-dash {
  0%,
  20% {
    stroke-dashoffset: 0;
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  50%,
  70% {
    stroke-dashoffset: 80;
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
  }
  100% {
    stroke-dashoffset: 0;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes circle-loader-spinning-main {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes circle-loader-spinning-main {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@supports ((-webkit-animation-name: this) or (animation-name: this)) {
  .circle-loader--v3 {
    width: var(--circle-loader-v3-size);
    height: var(--circle-loader-v3-size);
  }
  .circle-loader--v3 .circle-loader__circle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--color-primary);
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0.8;
    will-change: transform, opacity;
    -webkit-animation: circle-loader-3 1.2s infinite;
    animation: circle-loader-3 1.2s infinite;
  }
  .circle-loader--v3 .circle-loader__circle--2nd {
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
  }
}
@-webkit-keyframes circle-loader-3 {
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}
@keyframes circle-loader-3 {
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}
@supports ((-webkit-animation-name: this) or (animation-name: this)) {
  .circle-loader--v4 {
    width: var(--circle-loader-v4-size);
    height: var(--circle-loader-v4-size);
    border-radius: 50%;
    overflow: hidden;
  }
  .circle-loader--v4 .circle-loader__mask,
  .circle-loader--v4 .circle-loader__circle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
  }
  .circle-loader--v4 .circle-loader__mask {
    -webkit-clip-path: circle(calc(0.5 * var(--circle-loader-v4-size)));
    clip-path: circle(calc(0.5 * var(--circle-loader-v4-size)));
  }
  .circle-loader--v4 .circle-loader__circle--1st {
    background-color: var(--color-contrast-low);
  }
  .circle-loader--v4 .circle-loader__circle--2nd {
    background-color: var(--color-primary);
    will-change: transform;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-animation: circle-loader-4 1.2s infinite
      cubic-bezier(0.23, 0.9, 0.75, 0.1);
    animation: circle-loader-4 1.2s infinite cubic-bezier(0.23, 0.9, 0.75, 0.1);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}
@-webkit-keyframes circle-loader-4 {
  to {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
}
@keyframes circle-loader-4 {
  to {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
}
@supports ((-webkit-animation-name: this) or (animation-name: this)) {
  .circle-loader--v5 {
    font-size: var(--circle-loader-v5-size);
    width: 1em;
    height: 1em;
  }
  .circle-loader--v5 .circle-loader__label {
    font-size: 1rem;
  }
  .circle-loader--v5 .circle-loader__ball {
    position: absolute;
    top: 0;
    left: calc(50% - 0.140625em);
    width: 0.28125em;
    height: 0.28125em;
    background-color: var(--color-primary);
    border-radius: 50%;
    -webkit-animation: circle-loader-5-ball 0.8s infinite;
    animation: circle-loader-5-ball 0.8s infinite;
  }
  .circle-loader--v5 .circle-loader__shadow {
    position: absolute;
    bottom: 0;
    left: calc(50% - 0.15625em);
    width: 0.3125em;
    height: 0.3125em;
    background-color: var(--color-contrast-lower);
    border-radius: 50%;
    -webkit-transform: scaleY(0.4) scaleX(1.2);
    transform: scaleY(0.4) scaleX(1.2);
    -webkit-animation: circle-loader-5-shadow 0.8s infinite;
    animation: circle-loader-5-shadow 0.8s infinite;
  }
}
@-webkit-keyframes circle-loader-5-ball {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: cubic-bezier(0.61, 0.12, 0.85, 0.4);
    animation-timing-function: cubic-bezier(0.61, 0.12, 0.85, 0.4);
  }
  50% {
    -webkit-transform: translateY(0.5625em);
    transform: translateY(0.5625em);
    -webkit-animation-timing-function: cubic-bezier(0.12, 0.59, 0.46, 0.95);
    animation-timing-function: cubic-bezier(0.12, 0.59, 0.46, 0.95);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes circle-loader-5-ball {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: cubic-bezier(0.61, 0.12, 0.85, 0.4);
    animation-timing-function: cubic-bezier(0.61, 0.12, 0.85, 0.4);
  }
  50% {
    -webkit-transform: translateY(0.5625em);
    transform: translateY(0.5625em);
    -webkit-animation-timing-function: cubic-bezier(0.12, 0.59, 0.46, 0.95);
    animation-timing-function: cubic-bezier(0.12, 0.59, 0.46, 0.95);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@-webkit-keyframes circle-loader-5-shadow {
  0% {
    -webkit-transform: scaleY(0.4) scaleX(1.2);
    transform: scaleY(0.4) scaleX(1.2);
    background-color: var(--color-contrast-lower);
    -webkit-animation-timing-function: cubic-bezier(0.61, 0.12, 0.85, 0.4);
    animation-timing-function: cubic-bezier(0.61, 0.12, 0.85, 0.4);
  }
  50% {
    -webkit-transform: scaleY(0.2) scaleX(0.6);
    transform: scaleY(0.2) scaleX(0.6);
    background-color: var(--color-contrast-low);
    -webkit-animation-timing-function: cubic-bezier(0.12, 0.59, 0.46, 0.95);
    animation-timing-function: cubic-bezier(0.12, 0.59, 0.46, 0.95);
  }
  100% {
    -webkit-transform: scaleY(0.4) scaleX(1.2);
    transform: scaleY(0.4) scaleX(1.2);
    background-color: var(--color-contrast-lower);
  }
}
@keyframes circle-loader-5-shadow {
  0% {
    -webkit-transform: scaleY(0.4) scaleX(1.2);
    transform: scaleY(0.4) scaleX(1.2);
    background-color: var(--color-contrast-lower);
    -webkit-animation-timing-function: cubic-bezier(0.61, 0.12, 0.85, 0.4);
    animation-timing-function: cubic-bezier(0.61, 0.12, 0.85, 0.4);
  }
  50% {
    -webkit-transform: scaleY(0.2) scaleX(0.6);
    transform: scaleY(0.2) scaleX(0.6);
    background-color: var(--color-contrast-low);
    -webkit-animation-timing-function: cubic-bezier(0.12, 0.59, 0.46, 0.95);
    animation-timing-function: cubic-bezier(0.12, 0.59, 0.46, 0.95);
  }
  100% {
    -webkit-transform: scaleY(0.4) scaleX(1.2);
    transform: scaleY(0.4) scaleX(1.2);
    background-color: var(--color-contrast-lower);
  }
}
@supports ((-webkit-animation-name: this) or (animation-name: this)) {
  .circle-loader--v6 .circle-loader__svg {
    display: block;
    width: var(--circle-loader-v6-size);
    height: var(--circle-loader-v6-size);
    color: var(--color-primary);
  }
  .circle-loader--v6 .circle-loader__fill {
    stroke-width: 8px;
    stroke-dashoffset: 35;
    stroke-dasharray: 36 36;
    -webkit-animation: circle-loader-6 1.5s infinite;
    animation: circle-loader-6 1.5s infinite;
  }
}
@-webkit-keyframes circle-loader-6 {
  0%,
  100% {
    stroke-dashoffset: 35;
  }
  50% {
    stroke-dashoffset: -35;
  }
}
@keyframes circle-loader-6 {
  0%,
  100% {
    stroke-dashoffset: 35;
  }
  50% {
    stroke-dashoffset: -35;
  }
}

/* -------------------------------- 

File#: _1_progress-bar
Title: Progress Bar
Descr: Display the current progress of a task

-------------------------------- */
:root {
  --progress-bar-width: 100%;
  --progress-bar-height: 8px;
  --progress-bar-radius: 50em;
}

.progress-bar__bg {
  position: relative;
  width: var(--progress-bar-width);
  height: var(--progress-bar-height);
  border-radius: 2px;
  background-color: #d5d5d5;
  flex-grow: 1;
  overflow: hidden;
}

.progress-bar__fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  background-color: currentColor;
}

.progress-bar__value {
  flex-shrink: 0;
}

.progress-bar[data-animation="on"]:not(.progress-bar--init) .progress-bar__fill,
.progress-bar[data-animation="on"]:not(.progress-bar--init)
  .progress-bar__value,
.progress-bar--color-update:not(.progress-bar--init) .progress-bar__fill,
.progress-bar--color-update:not(.progress-bar--init) .progress-bar__value {
  opacity: 0;
}

.progress-bar--color-update {
  --progress-bar-color-1: 30;
  --progress-bar-color-2: 65;
  --progress-bar-color-3: 100;
}
.progress-bar--color-update.progress-bar--init .progress-bar__fill {
  transition: background-color 0.3s;
}

.progress-bar--fill-color-1 .progress-bar__fill {
  background-color: var(--color-error);
}

.progress-bar--fill-color-2 .progress-bar__fill {
  background-color: var(--color-warning);
}

.progress-bar--fill-color-3 .progress-bar__fill {
  background-color: var(--color-success);
}

button[data-atc-progress="true"] {
  opacity: 0.7;
}

/* -------------------------------- 

File#: _1_expandable-side-navigation
Title: Expandable Side Navigation
Descr: A side navigation with expandable sub-lists and popular links

-------------------------------- */
.exsidenav__pop-nav {
  margin-bottom: var(--space-md);
}

.exsidenav__pop-link,
.exsidenav__link,
.exsidenav__control {
  display: flex;
  align-items: center;
  width: 100%;
  text-decoration: none;
  line-height: 1;
  cursor: pointer;
  transition: 0.2s;
}

/* popular links */
.exsidenav__pop-link .icon {
  --size: 16px;
  margin-right: var(--space-2xs);
  opacity: 0.5;
  transition: opacity 0.2s;
}
.exsidenav__pop-link:hover .icon {
  opacity: 1;
}
.exsidenav__pop-link[aria-current="page"] {
  background-color: hsla(
    var(--color-primary-h),
    var(--color-primary-s),
    var(--color-primary-l),
    0.15
  );
  border-radius: var(--radius-md);
}
.exsidenav__pop-link[aria-current="page"] .icon {
  opacity: 1;
}

/* main links */
.exsidenav__link {
  position: relative;
}
.exsidenav__link:hover {
  font-weight: 700;
}
.exsidenav__list .exsidenav__list .exsidenav__link::before {
  /* left mark */
  content: "";
  position: absolute;
  left: -1px;
  top: 0;
  height: 100%;
  width: 1px;
}
.exsidenav__link[aria-current="page"] {
  color: var(--color-primary);
}
.exsidenav__link[aria-current="page"]::before {
  background-color: var(--color-primary);
}

/* list label */
.exsidenav__label-wrapper {
  margin: var(--space-md) 0 var(--space-2xs) var(--space-2xs);
}
.exsidenav__list .exsidenav__list .exsidenav__label-wrapper {
  margin: var(--space-xs) 0 var(--space-3xs) var(--space-2xs);
}

.exsidenav__label {
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* button controlling sub navigations */
.exsidenav__control .icon {
  --size: 16px;
  display: block;
  margin-left: 6px;
}
/* .exsidenav__control .icon__group {
  will-change: transform;
  transform-origin: 8px 8px;
  transition: transform 0.3s var(--ease-out);
}
.exsidenav__control .icon__group > * {
  transform-origin: 8px 8px;
  stroke-dasharray: 17;
  transform: translateY(3px);
  transition: transform 0.3s, stroke-dashoffset 0.3s;
  transition-timing-function: var(--ease-out);
}
.exsidenav__control .icon__group > *:first-child {
  stroke-dashoffset: 10;
}
.exsidenav__control .icon__group > *:last-child {
  stroke-dashoffset: 10;
} */
.exsidenav__control[aria-expanded="true"] + .exsidenav__list {
  display: block; /* show the subnavigation */
}
.exsidenav__control[aria-expanded="true"] span {
  font-weight: bold;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.exsidenav__control[aria-expanded="true"] + .exsidenav__list > * {
  animation: exsidenav-entry-animation 0.4s var(--ease-out); /* animate list items */
}
/* .exsidenav__control[aria-expanded=true] .icon__group {
  transform: rotate(-90deg);
}
.exsidenav__control[aria-expanded=true] .icon__group > *:first-child, .exsidenav__control[aria-expanded=true] .icon__group *:last-child {
  stroke-dashoffset: 0;
  transform: translateY(0px);
} */

.exsidenav__list .exsidenav__list {
  display: none;
  margin: 10px 0 0 10px;
}
.exsidenav__list .exsidenav__list li {
  padding: 6px;
}

@keyframes exsidenav-entry-animation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0px);
  }
}

.jdgm-carousel-wrapper .jdgm-carousel.jdgm-carousel--compact-theme {
  width: calc(100% - 81px) !important;
}

.jdgm-carousel__right-arrow,
.jdgm-carousel__left-arrow {
  width: 12px !important;
  height: 12px !important;
  border-top-width: 1px !important;
  border-right-width: 1px !important;
  border-bottom-width: 1px !important;
  border-left-width: 1px !important;
  border-top-color: #000 !important;
  border-right-color: #000 !important;
  border-bottom-color: #000 !important;
  border-left-color: #000 !important;
}

.Slideshow__Carousel .flickity-prev-next-button {
  transform: unset !important;
}

/* New Section Headings */
@media (max-width: 640px) {
  .SectionHeader {
    padding-left: 5px;
  }
  .Heading__Collection {
    font-size: 20px;
  }
}
@media (min-width: 641px) {
  .Heading__Collection {
    font-size: 28px;
  }
}
.Button_Shaped_Heading {
  font-family: var(--heading-font-family);
  font-style: var(--heading-font-style);
  font-weight: var(--heading-font-weight);
  line-height: 100%;
  letter-spacing: -0.02em;
  margin-bottom: 16px !important;
  border: 1px solid var(--heading-color);
  border-radius: 4px;
}

.CollectionToolbar__Group .Button {
  min-width: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px !important;
  border-radius: 4px;
  text-transform: uppercase;
}

.filter-plus {
  margin-left: 20px;
}

/* New Filters */
.Linklist__Item--custom:has(input[name^="filter.p.m.custom."]) {
  line-height: 1;
  border: 1px solid var(--button-border);
  min-width: unset !important;
  min-height: unset !important;
  padding: unset !important;
}

#collection-filter-drawer
  .Collapsible
  .Linklist
  .Linklist__Item--custom:has(input[name^="filter.p.m.custom."]):checked {
  font-weight: 900 !important;
}

.Linklist__Item--custom:has(input[name^="filter.p.m.custom."]) .Link {
  padding: 8px !important;
  font-size: 12px !important;
}

#collection-filter-drawer .Drawer__Title {
  display: none;
}
.Collapsible {
  padding-top: 0px !important;
}
.Collapsible__Button {
  text-transform: uppercase !important;
  font-style: normal !important;
}
@media screen and (min-width: 641px) {
  .Collapsible--autoExpand {
    padding-top: 8px !important;
  }
}

.collection-filter-range[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  background: #fff;
  border: 1px solid rgba(var(--text-color-rgb), 0.7);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: none;
  margin-top: -6px;
}

.collection-filter-range[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: #fff;
  border: 1px solid rgba(var(--text-color-rgb), 0.7);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: none;
}

.collection-filter-range[type="range"]::-ms-thumb {
  width: 12px;
  height: 12px;
  background: #fff;
  border: 1px solid rgba(var(--text-color-rgb), 0.7);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: none;
}

/* New Product card labels */
.ProductItem__LabelList {
  position: absolute;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px;
  left: 8px;
  top: 8px;
}

.ProductItem__LabelList_Bottom {
  position: absolute;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px;
  right: 8px;
  bottom: 8px;
}

@media (min-width: 768px) {
  .ProductItem__LabelList {
    left: 14px;
    top: 14px;
  }
  .ProductItem__LabelList_Bottom {
    bottom: 14px;
    right: 14px;
  }
}

.label,
.ProductItem__NewLabel {
  line-height: 1;
  border-radius: 4px !important;
  background: transparent !important;
  color: var(--button-border);
  border: 1px solid var(--button-border);
  padding: 8px !important;
  font-weight: 900;
  font-style: italic;
  z-index: 1;
}

.ProductItem__NewLabel.ProductItem__DiscountLabel {
  background-color: var(--product-on-sale-badge-bg)!important;
}

@media (max-width: 480px) {
  .label,
  .ProductItem__NewLabel {
    font-size: 8px;
    padding: 5px !important;
  }
}

@media (min-width: 481px) and (max-width: 767px) {
  .label,
  .ProductItem__NewLabel {
    font-size: 9px;
    padding: 6px !important;
  }
}

@media (min-width: 768px) and (max-width: 1279px) {
  .label,
  .ProductItem__NewLabel {
    font-size: 10px;
    padding: 7px !important;
  }
}

@media (min-width: 1280px) {
  .label,
  .ProductItem__NewLabel {
    font-size: 12px;
  }
}

/* New Product card title & price */
.ProductItem__Title {
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  margin-left: 14px;
}

@media (max-width: 640px) {
  .ProductItem__Title {
    font-size: 10px;
    margin-left: 8px;
  }
  .ProductItem__PriceList {
    font-size: 10px !important;
  }
}

@media (min-width: 641px) and (max-width: 767px) {
  .ProductItem__Title {
    font-size: 13px;
    margin-left: 8px;
  }
  .ProductItem__PriceList {
    font-size: 13px !important;
  }
}

.ProductItem__PriceList {
  font-weight: normal;
  font-size: 13px;
}

.ProductItem__Price {
  font-style: normal;
}

.Price--compareAt {
  margin-left: 16px;
}

.formTitleStyle,
.fieldLabelTextStyle,
.agreementTextLabelStyle {
  color: #000 !important;
}

/* Preorder */

.nm__cart-fixed-wrapper .gPreorderTopMessage,
.nm__cart-fixed-wrapper .gPreorderBottomMessage {
  display: none;
}
.nm__cart-fixed-wrapper:has(.gPreorderBtn2) .nm__cart-fixed_cart {
  display: none !important;
}

.gPreorderBtn2 {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px !important;
  width: 65%;
}

.gPreorderBtn.gPreorderBtnLoaded span + span,
.Button.gPreorderBtn2 span + span {
  display: none;
}

.nm__cart-fixed-wrapper #observerButton br {
  display: none;
}

.variant-sold-out + .SizeSwatch {
  border-color: #f5a623;
  color: #f5a623;
  opacity: 1;
}
.variant-sold-out + .SizeSwatch:after,
.Popover__Value.variant-sold-out:after {
  content: "";
  -webkit-mask-image: url(/cdn/shop/files/reloj.svg?v=1724438513);
  width: 13px;
  height: 13px;
  display: block;
  background-size: cover;
  position: static;
  background: #f5a623;
  mask-size: contain;
}
.Popover__Value.variant-sold-out {
  color: var(--text-color-light);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}
.Popover__Value.variant-sold-out:after {
  background-color: var(--text-color-light);
}
.Popover__Value.is-selected.variant-sold-out {
  color: #f5a623;
}
.Popover__Value.is-selected.variant-sold-out:after {
  background-color: #f5a623;
}
.ProductForm__Variants
  .SizeSwatch__Radio.variant-sold-out:checked
  + .SizeSwatch {
  color: #ffffff;
  background: #f5a623;
  opacity: 1;
}
.ProductForm__Variants
  .SizeSwatch__Radio.variant-sold-out:checked
  + .SizeSwatch:after {
  background-color: #ffffff;
}
.ProductForm__Variants
  .SizeSwatch__Radio.variant-sold-out
  + .SizeSwatch
  .Icon--restock-mail,
.Popover__Value.variant-sold-out .Icon--restock-mail {
  display: none !important;
}
klarna-placement::part(osm-container) {
  border: none !important;
  text-align: left;
  font-family: var(--text-font-family);
  color: #000;
  padding: 0 !important;
}

klarna-placement::part(osm-badge) {
  width: 58px;
  height: auto;
}

klarna-placement::part(osm-message) {
  line-height: 1.5;
}

klarna-placement::part(osm-cta) {
  font-family: var(--text-font-family) !important;
}

@media (max-width: 640px) {
  klarna-placement::part(osm-container),
  klarna-placement::part(osm-cta) {
    font-size: 12px !important;
  }
}
@media (min-width: 641px) {
  klarna-placement::part(osm-container),
  klarna-placement::part(osm-cta) {
    font-size: 13px !important;
  }
}

/* Members Page*/
@media screen and (max-width: 640px) {
  .loyalty-page-Container.loyalty-page-slider .slick-initialized .slick-slide {
    min-height: 105px !important;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }
}
.loyalty-page-Container.loyalty-page-slider .loyalty-page-next-arrow svg {
  transform: rotate(180deg);
}
/* Loyalty Page */

.shopify-section--bordered:has(
    .Section > .Container > .Rte > div[data-lion-rules-list]
  )
  > .Section
  > .Container
  > .SectionHeader
  > .SectionHeader__Heading,
.shopify-section--bordered:has(
    .Section > .Container > .Rte > div[data-lion-rewards-list]
  )
  > .Section
  > .Container
  > .SectionHeader
  > .SectionHeader__Heading,
.shopify-section--bordered:has(
    .Section > .Container > .Rte > div[data-lion-integrated-page]
  )
  > .Section
  > .Container
  > .SectionHeader
  > .SectionHeader__Heading {
  font-style: normal !important;
}

@media (max-width: 640px) {
  .shopify-section--bordered:has(
      .Section > .Container > .Rte > div[data-lion-rules-list]
    )
    > .Section
    > .Container
    > .SectionHeader
    > .SectionHeader__Heading,
  .shopify-section--bordered:has(
      .Section > .Container > .Rte > div[data-lion-rewards-list]
    )
    > .Section
    > .Container
    > .SectionHeader
    > .SectionHeader__Heading,
  .shopify-section--bordered:has(
      .Section > .Container > .Rte > div[data-lion-integrated-page]
    )
    > .Section
    > .Container
    > .SectionHeader
    > .SectionHeader__Heading {
    font-size: 18px;
  }
}

.shopify-section--bordered:has(
    .Section > .Container > .Rte > div[data-lion-rewards-list]
  ) {
  border-top: 0px !important;
}

.lion-tier-progress__bar-current-status__value-container {
  width: max-content !important;
}

/*seQura*/

.sequra-promotion-widget {
  height: 35px !important;
  padding: 0px !important;
}

.Sequra__PromotionalWidgetWrapper {
  display: flex !important;
  align-items: center !important;
  height: 46px !important;
}

/* Loyalty Lion */
#loyaltylion,
.lion-isolator {
  --lion-primary-color: rgba(28, 29, 29, 1);
  --lion-primary-color-darker1: hsla(180, 2%, 10%, 1);
  --lion-primary-color-darker2: hsla(180, 2%, 10%, 1);
  --lion-primary-color-darker3: hsla(180, 2%, 9%, 1);
  --lion-tier-accent-color: rgba(28, 29, 29, 1);
  --tier-purchase-points-background-color: hsla(180, 2%, 11%, 0.05);
  --lion-tier-purchase-points-border-color: hsla(180, 2%, 11%, 0.2);
  --lion-tier-current-box-shadow-color: hsla(180, 2%, 11%, 0.1);
  --lion-tier-hover-box-shadow-color: hsla(180, 2%, 11%, 0.15);
  --lion-secondary-color: rgba(204, 204, 204, 1);
  --lion-secondary-color-lighter1: hsla(0, 0%, 81%, 1);
  --lion-secondary-color-darker1: hsla(0, 0%, 76%, 1);
  --lion-secondary-color-darker2: hsla(0, 0%, 72%, 1);
  --lion-button-primary-background-color: rgba(28, 29, 29, 1);
  --lion-button-primary-hover-background-color: hsla(180, 2%, 18%, 1);
  --lion-button-primary-active-background-color: hsla(180, 2%, 18%, 1);
  --lion-button-primary-active-shadow-color: hsla(180, 2%, 10%, 1);
  --lion-button-tile-text-color: hsla(180, 2%, 7%, 1);
  --lion-button-primary-text-color: rgba(0, 0, 0, 1);
  --lion-button-neutral-background-color: rgba(255, 255, 255, 0);
  --lion-button-neutral-hover-background-color: hsla(0, 0%, 100%, 0);
  --lion-button-neutral-active-background-color: hsla(0, 0%, 100%, 0);
  --lion-button-neutral-active-shadow-color: hsla(0, 0%, 90%, 0);
  --lion-button-neutral-text-color: rgba(0, 0, 0, 1);
  --lion-button-font-size: 1em;
  --lion-button-padding: 7px 18px;
  --lion-button-border-radius: 4px;
  --lion-section-heading-font-size: 16px;
  --lion-section-heading-text-color: rgba(0, 0, 0, 1);
  --lion-section-heading-line-size: 0px;
  --lion-section-heading-line-color: rgba(227, 227, 227, 1);
  --lion-section-heading-margin: 0 0 30px 0;
  --lion-header-background-color: rgba(255, 255, 255, 0);
  --lion-header-text-color: rgba(0, 0, 0, 1);
  --lion-header-border-radius: 0px;
  --lion-header-nav-link-icon-display: inline-block;
  --lion-header-nav-link-accent-color: rgba(28, 29, 29, 1);
  --lion-header-nav-link-border-color: hsla(180, 2%, 11%, 0.2);
  --lion-header-nav-link-hover-border-color: hsla(180, 2%, 11%, 0.4);
  --lion-header-nav-link-hover-background-color: hsla(180, 2%, 11%, 0.05);
  --lion-header-nav-link-hover-icon-color: rgba(28, 29, 29, 1);
  --lion-header-nav-link-hover-text-color: hsla(180, 2%, 10%, 1);
  --lion-rules-grid-gap: 4px;
  --lion-rules-grid-columns: 5;
  --lion-rules-padding: 10px;
  --lion-rules-background-color: rgba(255, 255, 255, 1);
  --lion-rules-border-color: rgba(255, 255, 255, 1);
  --lion-rules-border-width: 0px;
  --lion-rules-border-radius: 0px;
  --lion-rules-tile-background-color: rgba(28, 29, 29, 1);
  --lion-rules-tile-border-color: rgba(28, 29, 29, 1);
  --lion-rules-tile-border-width: 0px;
  --lion-rules-tile-border-radius: 9px;
  --lion-rule-item-icon-color: rgba(204, 204, 204, 1);
  --lion-rewards-grid-gap: 4px;
  --lion-rewards-grid-columns: 5;
  --lion-rewards-padding: 0px;
  --lion-rewards-background-color: rgba(255, 255, 255, 1);
  --lion-rewards-border-color: rgba(255, 255, 255, 1);
  --lion-rewards-border-width: 0px;
  --lion-rewards-border-radius: 0px;
  --lion-rewards-tile-background-color: rgba(28, 29, 29, 1);
  --lion-rewards-tile-border-color: rgba(28, 29, 29, 1);
  --lion-rewards-tile-border-width: 0px;
  --lion-rewards-tile-border-radius: 9px;
  --lion-reward-item-icon-color: rgba(204, 204, 204, 1);
  --lion-faq-list-gap: 0px;
  --lion-faq-background-color: rgba(255, 255, 255, 1);
  --lion-faq-padding: 20px;
  --lion-faq-border-color: rgba(255, 255, 255, 1);
  --lion-faq-border-width: 0px;
  --lion-faq-border-radius: 0px;
  --lion-faq-question-header-font-weight: normal;
  --lion-faq-question-background-color: rgba(255, 255, 255, 1);
  --lion-faq-question-vertical-padding: 16px;
  --lion-faq-question-horizontal-padding: 0px;
  --lion-faq-question-vertical-border-width: 1px;
  --lion-faq-question-horizontal-border-width: 0px;
  --lion-faq-question-border-color: rgba(0, 0, 0, 1);
  --lion-faq-question-border-radius: 0px;
  --lion-faq-accordion-icon-size: 17px;
  --lion-tier-progress-bar-indicator-color: rgba(204, 204, 204, 1);
  --lion-tier-progress-bar-background-color: rgba(224, 227, 229, 1);
  --lion-tier-progress-bar-height: 2px;
  --lion-tier-progress-bar-track-height: 8px;
  --lion-tier-progress-bar-unfilled-color: rgba(240, 240, 240, 1);
  --lion-tier-progress-bar-fill-color: rgba(204, 204, 204, 1);
  --lion-tier-progress-bar-track-radius: 8px;
  --lion-tier-progress-bar-fill-radius: 8px;
  --lion-tier-progress-bar-step-marker-radius: 50%;
  --lion-tier-progress-bar-step-marker-vertical-offset: 0px;
  --lion-tier-progress-bar-step-marker-height: 20px;
  --lion-tier-progress-bar-step-marker-width: 20px;
  --lion-tier-progress-text-tier-value-color: rgba(5, 5, 5, 1);
  --lion-tier-progress-bar-current-value-vertical-offset: 10px;
  --lion-tier-progress-bar-current-status-marker-vertical-offset: 0px;
  --lion-tier-progress-bar-current-status-marker-height: 16px;
  --lion-tier-progress-bar-current-status-marker-width: 2px;
  --lion-tier-progress-bar-current-status-marker-radius: 1px;
  --lion-tier-progress-text-tier-name-color: rgba(5, 5, 5, 1);
  --lion-tier-progress-text-tier-bound-color: rgba(115, 115, 115, 1);
  --lion-tier-progress-bar-step-label-vertical-offset: 20px;
}

#loyaltylion .lion-header__nav-link--available-rewards:before {
  mask: none no-repeat center/auto;
  -webkit-mask: none no-repeat center/contain;
  -webkit-mask-image: url(https://sdk-static.loyaltylion.net/static/2/themes/modern/7a97cf0/img/icons/heart.svg);
  mask-image: url(https://sdk-static.loyaltylion.net/static/2/themes/modern/7a97cf0/img/icons/heart.svg);
}
#loyaltylion .lion-header__nav-link--earn:before {
  mask: none no-repeat center/auto;
  -webkit-mask: none no-repeat center/contain;
  -webkit-mask-image: url(https://sdk-static.loyaltylion.net/static/2/themes/modern/7a97cf0/img/icons/star.svg);
  mask-image: url(https://sdk-static.loyaltylion.net/static/2/themes/modern/7a97cf0/img/icons/star.svg);
}
#loyaltylion .lion-header__nav-link--redeem:before {
  mask: none no-repeat center/auto;
  -webkit-mask: none no-repeat center/contain;
  -webkit-mask-image: url(https://sdk-static.loyaltylion.net/static/2/themes/modern/7a97cf0/img/icons/present.svg);
  mask-image: url(https://sdk-static.loyaltylion.net/static/2/themes/modern/7a97cf0/img/icons/present.svg);
}
#loyaltylion .lion-header__nav-link--tiers-overview:before {
  mask: none no-repeat center/auto;
  -webkit-mask: none no-repeat center/contain;
  -webkit-mask-image: url(https://sdk-static.loyaltylion.net/static/2/themes/modern/7a97cf0/img/icons/layers.svg);
  mask-image: url(https://sdk-static.loyaltylion.net/static/2/themes/modern/7a97cf0/img/icons/layers.svg);
}
#loyaltylion .lion-header__nav-link--account-history:before {
  mask: none no-repeat center/auto;
  -webkit-mask: none no-repeat center/contain;
  -webkit-mask-image: url(https://sdk-static.loyaltylion.net/static/2/themes/modern/7a97cf0/img/icons/history.svg);
  mask-image: url(https://sdk-static.loyaltylion.net/static/2/themes/modern/7a97cf0/img/icons/history.svg);
}
#loyaltylion .lion-rule-item__icon-wrap {
  display: none;
}
#loyaltylion .lion-icon__rule--signup {
  -webkit-mask-image: url(https://sdk-static.loyaltylion.net/static/2/themes/modern/7a97cf0/img/icons/rules/signup.svg);
  mask-image: url(https://sdk-static.loyaltylion.net/static/2/themes/modern/7a97cf0/img/icons/rules/signup.svg);
}
#loyaltylion .lion-icon__rule--purchase,
#loyaltylion .lion-icon__rule--product-purchase,
#loyaltylion .lion-icon__rule--collection-purchase,
#loyaltylion .lion-icon__rule--trustpilot-product-review {
  -webkit-mask-image: url(https://sdk-static.loyaltylion.net/static/2/themes/modern/7a97cf0/img/icons/rules/bag.svg);
  mask-image: url(https://sdk-static.loyaltylion.net/static/2/themes/modern/7a97cf0/img/icons/rules/bag.svg);
}
#loyaltylion .lion-icon__rule--pageview,
#loyaltylion .lion-icon__rule--clickthrough {
  -webkit-mask-image: url(https://sdk-static.loyaltylion.net/static/2/themes/modern/7a97cf0/img/icons/rules/visit.svg);
  mask-image: url(https://sdk-static.loyaltylion.net/static/2/themes/modern/7a97cf0/img/icons/rules/visit.svg);
}
#loyaltylion .lion-icon__rule--referral {
  -webkit-mask-image: url(https://sdk-static.loyaltylion.net/static/2/themes/modern/7a97cf0/img/icons/rules/refer.svg);
  mask-image: url(https://sdk-static.loyaltylion.net/static/2/themes/modern/7a97cf0/img/icons/rules/refer.svg);
}
#loyaltylion .lion-icon__rule--birthday {
  -webkit-mask-image: url(https://sdk-static.loyaltylion.net/static/2/themes/modern/7a97cf0/img/icons/rules/birthday.svg);
  mask-image: url(https://sdk-static.loyaltylion.net/static/2/themes/modern/7a97cf0/img/icons/rules/birthday.svg);
}
#loyaltylion .lion-icon__rule--newsletter-signup {
  -webkit-mask-image: url(https://sdk-static.loyaltylion.net/static/2/themes/modern/7a97cf0/img/icons/rules/newsletter.svg);
  mask-image: url(https://sdk-static.loyaltylion.net/static/2/themes/modern/7a97cf0/img/icons/rules/newsletter.svg);
}
#loyaltylion .lion-icon__rule--trustpilot-service-review,
#loyaltylion .lion-icon__rule--shopify-review,
#loyaltylion .lion-icon__rule--stampedio-review,
#loyaltylion .lion-icon__rule--review,
#loyaltylion .lion-icon__rule--feefo-review,
#loyaltylion .lion-icon__rule--loox-review,
#loyaltylion .lion-icon__rule--verified-reviews,
#loyaltylion .lion-icon__rule--yotpo-review {
  -webkit-mask-image: url(https://sdk-static.loyaltylion.net/static/2/themes/modern/7a97cf0/img/icons/rules/review.svg);
  mask-image: url(https://sdk-static.loyaltylion.net/static/2/themes/modern/7a97cf0/img/icons/rules/review.svg);
}
#loyaltylion .lion-icon__rule--twitter-follow {
  -webkit-mask-image: url(https://sdk-static.loyaltylion.net/static/2/themes/modern/7a97cf0/img/icons/rules/twitter.svg);
  mask-image: url(https://sdk-static.loyaltylion.net/static/2/themes/modern/7a97cf0/img/icons/rules/twitter.svg);
}
#loyaltylion .lion-icon__rule--facebook-like {
  -webkit-mask-image: url(https://sdk-static.loyaltylion.net/static/2/themes/modern/7a97cf0/img/icons/rules/facebook.svg);
  mask-image: url(https://sdk-static.loyaltylion.net/static/2/themes/modern/7a97cf0/img/icons/rules/facebook.svg);
}
#loyaltylion .lion-icon__rule--instagram-follow,
#loyaltylion .lion-icon__rule--instagram-post-hashtag,
#loyaltylion .lion-icon__rule--instagram-tag-image {
  -webkit-mask-image: url(https://sdk-static.loyaltylion.net/static/2/themes/modern/7a97cf0/img/icons/rules/instagram.svg);
  mask-image: url(https://sdk-static.loyaltylion.net/static/2/themes/modern/7a97cf0/img/icons/rules/instagram.svg);
}
#loyaltylion .lion-icon__rule--custom {
  -webkit-mask-image: url(https://sdk-static.loyaltylion.net/static/2/themes/modern/7a97cf0/img/icons/bubble-star.svg);
  mask-image: url(https://sdk-static.loyaltylion.net/static/2/themes/modern/7a97cf0/img/icons/bubble-star.svg);
}
#loyaltylion .lion-reward-item__icon {
  display: none;
}
#loyaltylion .lion-icon__reward--cart-discount-voucher,
#loyaltylion .lion-icon__reward--product-discount-voucher,
#loyaltylion .lion-icon__reward--collection-discount-voucher,
#loyaltylion .lion-icon__reward--active-subscription-discount-voucher,
#loyaltylion .lion-icon__reward--subscription {
  -webkit-mask-image: url(https://sdk-static.loyaltylion.net/static/2/themes/modern/7a97cf0/img/icons/rewards/flat-discount.svg);
  mask-image: url(https://sdk-static.loyaltylion.net/static/2/themes/modern/7a97cf0/img/icons/rewards/flat-discount.svg);
}
#loyaltylion .lion-icon__reward--product-cart {
  -webkit-mask-image: url(https://sdk-static.loyaltylion.net/static/2/themes/modern/7a97cf0/img/icons/rewards/free-product.svg);
  mask-image: url(https://sdk-static.loyaltylion.net/static/2/themes/modern/7a97cf0/img/icons/rewards/free-product.svg);
}
#loyaltylion .lion-icon__reward--free-shipping-voucher {
  -webkit-mask-image: url(https://sdk-static.loyaltylion.net/static/2/themes/modern/7a97cf0/img/icons/rewards/free-shipping.svg);
  mask-image: url(https://sdk-static.loyaltylion.net/static/2/themes/modern/7a97cf0/img/icons/rewards/free-shipping.svg);
}
#loyaltylion .lion-icon__reward--gift-card {
  -webkit-mask-image: url(https://sdk-static.loyaltylion.net/static/2/themes/modern/7a97cf0/img/icons/rewards/gift-card.svg);
  mask-image: url(https://sdk-static.loyaltylion.net/static/2/themes/modern/7a97cf0/img/icons/rewards/gift-card.svg);
}
#loyaltylion .lion-icon__reward--checkout-redemption {
  -webkit-mask-image: url(https://sdk-static.loyaltylion.net/static/2/themes/modern/7a97cf0/img/icons/rules/bag.svg);
  mask-image: url(https://sdk-static.loyaltylion.net/static/2/themes/modern/7a97cf0/img/icons/rules/bag.svg);
}
#loyaltylion .lion-icon__reward--custom {
  -webkit-mask-image: url(https://sdk-static.loyaltylion.net/static/2/themes/modern/7a97cf0/img/icons/bubble-star.svg);
  mask-image: url(https://sdk-static.loyaltylion.net/static/2/themes/modern/7a97cf0/img/icons/bubble-star.svg);
}
#loyaltylion .lion-account-history__points-expiration {
  display: none;
}
#loyaltylion .lion-faq-list__item:not(:last-child) {
  border-bottom: none;
}
#loyaltylion .lion-faq-list__question-icon {
  background-image: url(https://sdk-static.loyaltylion.net/static/uploads/53992/20241002/general_appearance.icons.closed/b87b05859c.png);
}
#loyaltylion .lion-faq-list__question[open] .lion-faq-list__question-icon {
  background-image: url(https://sdk-static.loyaltylion.net/static/uploads/53992/20241002/general_appearance.icons.open/67ba2f6246.png);
}
#loyaltylion .lion-progress-bar__container,
#loyaltylion .lion-progress-bar__fill {
  display: block;
}
#loyaltylion .lion-rewards-list {
  --lion-rewards-grid-min-width: 175px;
}
#loyaltylion .lion-rules-list {
  --lion-rules-grid-min-width: 175px;
}
#loyaltylion .lion-rules-list,
#loyaltylion .lion-rewards-list,
#loyaltylion .lion-faq-list {
  padding: unset !important;
}
#loyaltylion .lion-rule-item .lion-rule-item__title,
#loyaltylion .lion-reward-item .lion-reward-item__title {
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 700;
  line-height: 19.6px;
  letter-spacing: 0.06em;
  color: #fff;
}
#loyaltylion .lion-reward-item__content,
#loyaltylion .lion-rule-item__content {
  justify-content: flex-start;
  align-items: flex-start;
  padding: 15px;
  min-height: 196.8px;
}
#loyaltylion
  .lion-rule-item
  .lion-rule-item__content
  .lion-rule-item__icon-wrap
  .lion-rule-item__icon,
#loyaltylion
  .lion-reward-item
  .lion-reward-item__content
  .lion-reward-item__icon {
  inline-size: 18px;
  block-size: 18px;
  mask-size: 100% auto;
  position: absolute;
  inset-inline-end: 15px;
  inset-block-start: 15px;
}
#loyaltylion .lion-reward-item__title,
#loyaltylion .lion-rule-item__title {
  padding: unset;
  text-align: left;
}
#loyaltylion .lion-rule-item .lion-rule-item__points,
#loyaltylion .lion-reward-item .lion-reward-item__meta {
  position: absolute;
  inset-inline-start: 15px;
  inset-block-end: 15px;
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.01em;
  color: #fff;
}
#loyaltylion .lion-integrated-page-section__heading-text {
  font-style: normal;
}
#loyaltylion .lion-rewards-list::-webkit-scrollbar,
#loyaltylion .lion-rules-list::-webkit-scrollbar {
  height: 8px;
  border-radius: 10px;
  cursor: grab;
}
#loyaltylion .lion-rewards-list::-webkit-scrollbar:hover,
#loyaltylion .lion-rules-list::-webkit-scrollbar:hover {
  background-color: #a01414;
}
#loyaltylion .lion-tier-box:hover,
#loyaltylion .lion-tier-box--current {
  box-shadow: unset !important;
}
#loyaltylion .lion-tier-box__title {
  color: #000;
  text-transform: uppercase;
  font-weight: 500;
}
#loyaltylion .lion-tier-box__position {
  font-size: large;
  font-weight: 500;
  color: #000;
}
#loyaltylion .lion-tier-box__purchase-rule-points {
  color: #000;
}
#loyaltylion .lion-faq-list__question-header {
  color: #000;
  font-size: 115%;
  font-style: normal;
}
#loyaltylion .lion-rule-item .lion-rule-item__actions,
#loyaltylion .lion-reward-item .lion-reward-item__actions {
  display: block;
  flex-grow: unset;
}
#loyaltylion .lion-tier-box__you-are-here {
  background-color: #1c1d1d;
}
#loyaltylion .lion-history-table__header-cell {
  color: #000;
  font-style: normal;
}
#loyaltylion .lion-faq-list__question-header {
  font-weight: 600;
  font-size: 16px;
  text-transform: uppercase;
}
#loyaltylion .lion-faq-list__question-answer {
  text-align: left;
}
@media (max-width: 640px) {
  #loyaltylion .lion-faq-list__item {
    padding-top: 5px;
    padding-bottom: 5px;
  }
  #loyaltylion .lion-faq-list__question-header {
    font-size: 14px;
  }
  #loyaltylion .lion-reward-item__content,
  #loyaltylion .lion-rule-item__content {
    min-height: 168px;
  }
  #loyaltylion .lion-rewards-list,
  #loyaltylion .lion-rules-list {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 641px) {
  #loyaltylion .lion-rewards-list,
  #loyaltylion .lion-rules-list {
    grid-template-columns: repeat(
      auto-fill,
      minmax(max(150px, var(--grid-item-max-width)), 1fr)
    );
  }
}
#loyaltylion .lion-rules-list,
#loyaltylion .lion-rewards-list,
#loyaltylion .lion-faq-list {
  max-width: 1000px;
  margin: auto;
}
#loyaltylion .lion-action-button {
  text-transform: uppercase;
  padding: 0.5em 1em;
  border-radius: 4px;
  font-weight: 600;
  color: #fff;
  border: 1px solid white;
  font-size: 0.75em;
}
#loyaltylion .lion-notification__content {
  background: #1b1c1c;
  border-radius: 4px;
  color: white;
}
#loyaltylion .lion-notification__close-button,
#loyaltylion .lion-notification__icon {
  color: white;
}
#loyaltylion .lion-reward-item__actions:not(:empty),
#loyaltylion .lion-rule-item__actions:not(:empty) {
  margin-top: 10px;
}
#loyaltylion .lion-action-button--neutral {
  background-color: var(--lion-button-primary-background-color) !important;
}
#loyaltylion .lion-action-button:hover {
  border: 1px solid #fff !important;
}
#loyaltylion .lion-referral-widget .lion-action-button:hover,
#loyaltylion .lion-modal__content .lion-action-button:hover {
  background-color: var(--lion-button-primary-background-color) !important;
}
#loyaltylion .lion-referral-widget .lion-action-button {
  padding: 0.5em 1em !important;
  font-size: 12px !important;
}

.floating-bar{
  background-color: #fff;
  width: 100%;
  display: block;
  padding: 5px 30px;
  border-bottom: 1px solid #C4C4C4;
  border-top: 1px solid #C4C4C4;
  margin-bottom: 8px;
}
@media (min-width: 768px) {
  .floating-bar{
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    user-select: none;
  }
  
  .floating-bar:active {
    cursor: grabbing;
  }
  
  /* Scrollbar customizada para Webkit (Chrome, Safari, Edge) */
  .floating-bar::-webkit-scrollbar {
    height: 4px;
  }
  
  .floating-bar::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 2px;
  }
  
  .floating-bar::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 2px;
    transition: background 0.3s ease;
  }
  
  .floating-bar::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
  }
  
  /* Firefox */
  .floating-bar {
    scrollbar-width: thin;
    scrollbar-color: #c1c1c1 #f1f1f1;
  }
}
body .mega-nav__sub-nav-wrapper.is-visible{
  z-index: 5;
}
.floating-bar-content{
  display: flex;
  gap: 20px;
  align-items: center;
  height: 100%;
}
.floating-bar-content-item{
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
.floating-bar-content-item a:hover{
  font-weight: 700;
}

/* Links em negrito */
.floating-bar-content-item--bold a,
.floating-bar-link--bold {
  font-weight: 700 !important;
}

.floating-bar-content-item--bold a:hover,
.floating-bar-link--bold:hover {
  font-weight: 700 !important;
}

#site-header .floating-bar{
 margin-bottom: 0;
 padding: 1px 30px;
}

.floating-bar-link--flag{
  color: #a01414;
  font-weight: 700;
  position: relative;
  top: -3px;
  left: -3px;
  display:none;
}

@media (max-width: 768px) {
  #site-header .floating-bar{
    padding: 1px 7px;
  }
  .floating-bar{
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-left: 0;
  }
  
  .floating-bar-content{
    flex-wrap: nowrap;
    gap: 8px;
    align-items: center;
    height: 100%;
  }
  
  .floating-bar-content-item{
    min-width: max-content;
  }
  
  .floating-bar-content-item a{
    font-size: 12px;
    padding: 5px 8px;
  }
  .floating-bar-content{
    flex-wrap: nowrap;
    gap: 5px;
    align-items: center;
    height: 100%;
  }
  body .mega-nav--desktop .mega-nav__item--expanded .mega-nav__sub-nav-wrapper{
    z-index: 4;
  }
}

/* Product Item Slider Styles */
.ProductItem__ImageWrapper--withSlider {
  position: relative;
}

/* Fix for AspectRatio pseudo-element when slider is active */
.ProductItem__ImageWrapper--withSlider .AspectRatio::before {
  display: none !important;
}

.ProductItem__Swiper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.ProductItem__Swiper .swiper-wrapper {
  height: 100%;
}

.ProductItem__Swiper .swiper-slide {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
}

.ProductItem__Swiper .ProductItem__Image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

/* Pagination dots */
.ProductItem__SwiperPagination {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.ProductItem__SwiperPagination .swiper-pagination-bullet {
  width: 6px;
  height: 6px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  margin: 0 3px;
  transition: all 0.3s ease;
  opacity: 0.6;
}

.ProductItem__SwiperPagination .swiper-pagination-bullet-active {
  background: rgba(255, 255, 255, 0.9);
  opacity: 1;
  transform: scale(1.2);
}

/* Navigation arrows */
.ProductItem__SwiperButtonNext,
.ProductItem__SwiperButtonPrev {
  position: absolute;
  top: 54%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.3s ease;
  opacity: 0;
  z-index: 10;
  pointer-events: auto;
}

.ProductItem__ImageWrapper--withSlider:hover .ProductItem__SwiperButtonNext,
.ProductItem__ImageWrapper--withSlider:hover .ProductItem__SwiperButtonPrev {
  opacity: 0.8;
}

/* Show arrows on touch devices (mobile) */
@media (hover: none) and (pointer: coarse) {
  .ProductItem__SwiperButtonNext,
  .ProductItem__SwiperButtonPrev {
    opacity: 0.8 !important;
  }
}

.ProductItem__SwiperButtonNext:hover,
.ProductItem__SwiperButtonPrev:hover {
  opacity: 1;
}

.ProductItem__SwiperButtonNext {
  right: -3px;
}

.ProductItem__SwiperButtonPrev {
  left: -3px;
}

.ProductItem__SwiperButtonNext::after,
.ProductItem__SwiperButtonPrev::after {
  content: '';
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M7.15831 6.175L10.975 10L7.15831 13.825L8.33331 15L13.3333 10L8.33331 5L7.15831 6.175Z' fill='%239f9c9c'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.ProductItem__SwiperButtonPrev::after {
  transform: rotate(180deg);
}

/* Mobile responsive */
@media (max-width: 768px) {
  body .ProductItem__SwiperButtonNext::after,
  body .ProductItem__SwiperButtonPrev::after {
    content: '';
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M7.15831 6.175L10.975 10L7.15831 13.825L8.33331 15L13.3333 10L8.33331 5L7.15831 6.175Z' fill='%23c6c6c6'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
  
  .ProductItem__SwiperPagination {
    bottom: 6px;
  }
  body .ProductItem__SwiperButtonPrev{
    left: -5px;
  }
  body .ProductItem__SwiperButtonNext{
    right: -5px;
  }
  
  .ProductItem__SwiperPagination .swiper-pagination-bullet {
    width: 5px;
    height: 5px;
    margin: 0 2px;
  }
  
  /* Show arrows on mobile - always visible */
  .ProductItem__SwiperButtonNext,
  .ProductItem__SwiperButtonPrev {
    display: flex !important;
    opacity: 0.8 !important;
    background: none;
    border-radius: 50%;
    box-shadow: none;
  }
  
  .ProductItem__SwiperButtonNext:after,
  .ProductItem__SwiperButtonPrev:after {
    display: block;
  }
  
  /* Make arrows more touch-friendly on mobile */
  .ProductItem__SwiperButtonNext,
  .ProductItem__SwiperButtonPrev {
    width: 25px;
    height: 25px;
    min-width: 25px;
    min-height: 25px;
    top: 60%;
  }
}

/* Ensure slider works properly with existing hover effects */
.ProductItem__ImageWrapper--withSlider:hover .ProductItem__Image--alternate {
  opacity: 0;
}

/* Hide pagination and arrows when only one image */
.ProductItem__Swiper:has(.swiper-slide:only-child) .ProductItem__SwiperPagination,
.ProductItem__Swiper:has(.swiper-slide:only-child) .ProductItem__SwiperButtonNext,
.ProductItem__Swiper:has(.swiper-slide:only-child) .ProductItem__SwiperButtonPrev {
  display: none;
}

/* Additional fixes for slider layout */
.ProductItem__ImageWrapper--withSlider .AspectRatio {
  position: relative;
  height: auto;
}

.ProductItem__ImageWrapper--withSlider .AspectRatio::after {
  content: '';
  display: block;
  padding-bottom: calc(100% / var(--aspect-ratio, 1));
}

/* Ensure proper aspect ratio for slider images */
.ProductItem__ImageWrapper--withSlider .AspectRatio--tall::after {
  padding-bottom: 125%;
}

.ProductItem__ImageWrapper--withSlider .AspectRatio--square::after {
  padding-bottom: 100%;
}

.ProductItem__ImageWrapper--withSlider .AspectRatio--short::after {
  padding-bottom: 75%;
}

/* Fallback for natural aspect ratio */
.ProductItem__ImageWrapper--withSlider .AspectRatio--withFallback::after {
  padding-bottom: calc(100% / var(--aspect-ratio, 1));
}

/* Ensure proper z-index for slider elements */
.ProductItem__Swiper .swiper-pagination,
.ProductItem__Swiper .swiper-button-next,
.ProductItem__Swiper .swiper-button-prev {
  z-index: 15;
}
.ProductItem__Swiper .swiper-pagination{
  margin: 0 auto;
  display: block;
  position: absolute;
  width: 100%;
  right: 0;
  left: inherit;
  transform: inherit;
  display: none;
}


/* Fix Image__Loader position when slider is active */
.ProductItem__ImageWrapper--withSlider .Image__Loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
}

/* Hide noscript images when slider is active */
.ProductItem__ImageWrapper--withSlider noscript {
  display: none;
}

.swiper.ProductItem__Swiper:hover .swiper-button-next,
.swiper.ProductItem__Swiper:hover .swiper-button-prev {
  opacity: 1;
}

.deliverydate.sb_delivery{
  display: none !important;
}
.items-confianza .deliverydate.sb_delivery{
    display: inline-block !important;
}


/* Variant colors deslizables */
.variant-products.HorizontalList{
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  -webkit-overflow-scrolling: touch; /* iOS smooth scrolling */
  padding-bottom: 0;
  margin-bottom: 16px;
  cursor: grab;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  scroll-behavior: smooth;
}

.variant-products.HorizontalList::-webkit-scrollbar {
  display: none;
}

.variant-products.HorizontalList:active,
.variant-products.HorizontalList.active {
  cursor: grabbing;
}

.variant-products.HorizontalList .variant-item {
  flex: 0 0 auto;
  margin: calc(var(--space-2xs) / 2);
  max-width: 57px;
  min-width: 57px;
}
@media (max-width: 800px) {
  body .variant-products.HorizontalList .variant-item {
    min-width: 20%; 
  }
}


@media (max-width: 400px) {
  .variant-products.HorizontalList .variant-item {
    flex: 0 0 auto;
    margin: calc(var(--space-2xs) / 2);
    max-width: 85px;
    min-width: 21%;
  }
  .variant-products.HorizontalList .variant-item {
    flex: 0 0 auto;
    margin: calc(var(--space-2xs) / 2);
    max-width: 75px;
    min-width: 75px;
  }
}
/* FIN Variant colors deslizables */

body .flickity-prev-next-button.previous[disabled],
body .flickity-prev-next-button.next[disabled] {
  display: none !important;
}

.ProductItem  .ProductForm__Variants .Popover__Value.sold_out {
  position: relative;
  opacity: 0.6;
  cursor: not-allowed;
}

.ProductItem  .ProductForm__Variants .Popover__Value.sold_out:after {
  content: "";
  position: absolute;
  top: 30%;
  left: 30%;
  width: 40%;
  height: 40%;
  background: linear-gradient(to top left, transparent 0% calc(50% - 1px), #9e9e9e 50%, transparent calc(50% + 1px) 100%);
  pointer-events: none;
  z-index: 1;
}
.ProductItem .Popover__Value.is-selected, .Popover__Value.Title2.is-selected{
  color: var(--text-color-light);
}
.ProductItem  .ProductForm__Variants .Popover__Value.Title2:not(.sold_out) {
  opacity: 1;
  color: #000;
}
.ProductItem  .ProductForm__Variants .Popover__Value.Title2:not(.sold_out):hover {
  color: #000;
  text-decoration: underline;