.iko_wrapper *,
.iko_wrapper *::before,
.iko_wrapper *::after {
  box-sizing: border-box;
}

.iko_wrapper h1,
.iko_wrapper h2,
.iko_wrapper h3,
.iko_wrapper h4,
.iko_wrapper p,
.iko_wrapper figure,
.iko_wrapper blockquote,
.iko_wrapper dl,
.iko_wrapper dd {
  margin: 0;
}

.iko_wrapper ul[role="list"],
.iko_wrapper ol[role="list"] {
  list-style: none;
}

.iko_wrapper a:not([class]) {
  text-decoration-skip-ink: auto;
}

.iko_wrapper img,
.iko_wrapper picture {
  max-width: 100%;
  display: block;
}

.iko_wrapper input,
.iko_wrapper button,
.iko_wrapper textarea,
.iko_wrapper select {
  font: inherit;
}
.iko_wrapper {
  width: 100%;
  overflow: hidden !important;

  @media only screen and (max-width: 768px) {
    width: 100%;
    overflow: auto !important;
  }
}

.iko_wrapper h2 {
  font-size: 1.2rem;
}

.iko_wrapper p {
  font-size: 0.8rem;
}

@keyframes shine {
  0% {
    left: -70%;
    opacity: 0;
  }
  50% {
    left: 25%;
    opacity: 0.5;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}

.iko_carousel_wrapper {
  width: 100%;
  position: relative;

  @media only screen and (max-width: 768px) {
    overflow: auto !important;
    overflow-x: hidden !important;
  }
}

.iko_carousel_info {
  position: absolute;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
  z-index: 1;
  background-color: hsla(360, 100%, 100%, 0.9);
  border-radius: 10px;

  @media only screen and (max-width: 768px) {
    position: static;
    width: 100%;
    line-height: 1.375rem;
  }
}

.iko_carousel_info > div {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;

  @media only screen and (max-width: 768px) {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
  }
}

.iko_carousel_info > div:first-child {
  @media only screen and (max-width: 768px) {
    display: none;
  }
}

.iko_carousel_info > div > h2 {
  @media only screen and (max-width: 768px) {
    text-align: center;
  }
}

.iko_carousel_info > div > p {
  text-align: justify;
  line-height: 1.375rem;

  @media only screen and (max-width: 768px) {
    line-height: 1rem;
  }
}

.iko_carousel_info > div > div {
  @media only screen and (max-width: 768px) {
    margin: 0 auto;
  }
}

.iko_carousel_info--mobile {
  display: none;

  @media only screen and (max-width: 768px) {
    padding: 1.5rem;
    display: inline-block;
    text-align: justify;
    line-height: 1.375rem;
  }
}

.iko_carousel_info--mobile > div {
  @media only screen and (max-width: 768px) {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
  }
}

.iko_carousel_info--mobile > div > h2 {
  @media only screen and (max-width: 768px) {
    text-align: center;
  }
}

.iko_carousel_info--mobile > div > p {
  @media only screen and (max-width: 768px) {
    line-height: 1rem;
  }
}

.iko_carousel_container {
  width: 100%;

  @media only screen and (max-width: 600px) {
    position: relative;
  }
}

.iko_carousel_container::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  right: -20px;
  width: 18rem;
  height: 1rem;

  background-image: url("/cdn/shop/t/6/assets/wave.png?v=1682586461");
  background-size: contain;
  background-repeat: no-repeat;
  display: none;
}

.iko_carousel_container::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -10px;
  width: 100%;
  height: 1rem;

  background-image: url("/cdn/shop/t/6/assets/wave.png?v=1682586461");
  background-size: contain;
  background-repeat: no-repeat;
  display: none;
}

@media only screen and (max-width: 768px) {
  .iko_carousel_container::before,
  .iko_carousel_container::after {
    display: inline-block;
  }
}

.iko_carousel {
  position: relative;
  z-index: 1;
  pointer-events: none;
  overflow: hidden !important;
}

.item {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
}

.iko_carousel-item, .item {
  --items: 17;
  --width: clamp(150px, 30vw, 300px);
  --height: clamp(200px, 40vw, 400px);
  --x: calc(var(--active) * var(--items) * 100%);
  --y: calc(var(--active) * var(--items) * 15%);
  --rot: calc(var(--active) * var(--items) * 7deg);
  --opacity: 1;
  --grayscale: 0%;
  --shadow-color: 0deg 0% 63%;
  --swipe-active: none;
  /* --show-cursor: none; */

  overflow: hidden !important;
  position: absolute;
  z-index: var(--zIndex);
  width: var(--width);
  height: var(--height);
  margin: calc(var(--height) * -0.5) 0 0 calc(var(--width) * -0.5);
  border-radius: 10px;
  top: 50%;
  left: 50%;
  user-select: none;
  transform-origin: 0% 100%;
  box-shadow: 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.36),
    0.8px 1.6px 2px -0.8px hsl(var(--shadow-color) / 0.36),
    2.1px 4.1px 5.2px -1.7px hsl(var(--shadow-color) / 0.36),
    5px 10px 12.6px -2.5px hsl(var(--shadow-color) / 0.36);
  pointer-events: all;
  cursor: pointer;
  transform: translate(var(--x), var(--y)) rotate(var(--rot));
  transition: transform 0.8s cubic-bezier(0, 0.02, 0, 1);
}

@keyframes wobble {
  0% {
    transform: none;
    transform: none;
  }
  15% {
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }
  30% {
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }
  45% {
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }
  60% {
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }
  75% {
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }
  100% {
    transform: none;
    transform: none;
  }
}

.iko_carousel-item::after{
  content: "";
  background-image: url("/cdn/shop/t/6/assets/hand-swipe-black.svg?v=1682696555");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 60%;
  left: 20%;
  width: 10rem !important;
  height: 10rem !important;
  z-index: 2;
  display: var(--swipe-active);
  animation: wobble 4000ms infinite;
}

@media only screen and (max-width: 768px) {
  .iko_carousel-item::after {
    width: 4rem !important;
    height: 4rem !important;
    display: var(--swipe-active);
    top: 65%;
    left: 30%;
  }
}

.iko_carousel-item > img, .item > img {
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.iko_carousel-item:hover .iko_carousel_shine, .item:hover .iko_carousel_shine {
  display: block;
}

.iko_carousel-item:hover::after, .item:hover::after {
  display: block;
}

.iko_carousel-box {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transition: opacity 0.8s cubic-bezier(0, 0.02, 0, 1),
    filter 0.8s cubic-bezier(0, 0.02, 0, 1);
  opacity: var(--opacity);
  filter: grayscale(var(--grayscale));
}

.iko_carousel_shine {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transform: skewX(-40deg);
  animation: shine 0.75s linear 1;
}

.iko_carousel_wrapper--modal-open {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto !important;
  width: 100vw;
  height: 100vh;

  @media only screen and (max-width: 768px) {
    & .iko_carousel_info,
    & .iko_carousel_info--mobile {
      display: none;
    }
  }
}

.iko_cards-dropdown {
  position: relative;
  width: 300px;
}

#checkbox-dropdown {
  width: 300px
}

.iko_cards-dropdown input {
  top: 0;
  opacity: 0;
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  position: absolute;
  height: 100%;
  width: 100%;
  cursor: pointer;
}

.iko_cards-dropdown label {
  width: 300px;
  background-color: #afafaf;
  padding: 0.2rem 0.5rem;
  border-radius: 8px;
  border: none;
  font-size: 1rem;
  color: white;
  white-space: nowrap;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: space-between;

  @media only screen and (max-width: 768px) {
    padding: 0.5rem;
  }
}

#iko_modal {
  z-index: 999;
  margin-bottom: 20px;
}

.iko_cards-dropdown ul {
  position: absolute;
  top: 22px;
  left: 5xp;
  width: 200px;
  z-index: 1;
  padding: 0px 5px 0 5px;
  display: flex;
  flex-direction: column;
  list-style: none;
  background-color: #afafaf;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  overflow: hidden !important;

  height: 0;
  pointer-events: none;
  transition: height 0.5s;
}

.iko_cards-dropdown ul * {
  display: none;
}

.iko_cards-dropdown ul li {
  text-align: left;
  padding-left: 0.2rem;
}

.iko_cards-dropdown ul li a {
  color: white;
  width: 100%;
  padding: 3px 0;
  text-decoration: none;
  display: block;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s;
}

.iko_cards-dropdown ul li a:hover {
  color: black;
}

#checkbox-toggle:checked ~ ul {
  height: 180px;
  pointer-events: auto;
}

#checkbox-toggle:checked ~ ul * {
  display: inline-block;
}

#checkbox-toggle:checked + label {
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}

@keyframes fadeInModal {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeOutModalTitle {
  from {
    opacity: 1;
  }

  to {
    opacity: 0.5;
  }
}

.iko_modal {
  background-color: white;
  will-change: background-image;
  background-image: url("/cdn/shop/t/6/assets/bacgrkound-image.png?v=1682690821");
  background-repeat: no-repeat;
  background-size: cover;
  width: max-content;
  max-width: 850px;
  max-height: 600px;

  border-radius: 10px;
  color: white;
  display: grid;
  grid-template-columns: 90% 10%;
  padding: 1rem;
  transition: background-image 1s;
  position: relative;
  overflow: auto !important;
  
  @media only screen and (max-width: 768px) {
    position: fixed;
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    top: 0;
    left: 0;
    margin: 0;
    border-radius: 0;
    z-index: 99;
    grid-template-columns: 1fr;
    grid-template-rows: 90% 10%;
    overflow: hidden !important;
    background-position: center;
  }
}

.iko_modal_content {
  display: flex;
  flex-direction: column;

  @media only screen and (max-width: 768px) {
    gap: 1rem;
    height: 100%;
  }
}

.iko_modal_content > h2 {
  display: flex;
  align-items: flex-end;
  gap: 3rem;
  margin-left: 1.15rem;
  margin-top: -0.1rem;
  animation: fadeOutModalTitle 1s ease-in 1s forwards;
  font-weight: 900;

  @media only screen and (max-width: 768px) {
    margin-left: 0;
    margin-top: 0;
    gap: 0.2rem;
  }
}

.iko_modal_content > h2 > span:first-child {
  font-size: 7rem;
  line-height: 7rem;


  @media only screen and (max-width: 768px) {
    font-size: 4rem;
    line-height: 4.1rem;
  }
}

.iko_modal_content > h2 > span:last-child {
  font-size: 2.8rem;
  line-height: 3.4rem;
  display: flex;

  letter-spacing: -0.1rem;

  @media only screen and (max-width: 768px) {
    font-size: 1.5rem;
    line-height: 1.375rem;
  }
}

.iko_modal_content--animated {
  width: 100%;
  height: 100%;
  padding: 0.5rem 0 0.5rem 1.5rem;
  display: grid;
  grid-template-columns: 3fr 1fr;
  opacity: 0;
  animation: fadeInModal 1s ease-in 1s forwards;

  @media only screen and (max-width: 768px) {
    grid-template-columns: 1fr;
    grid-template-rows: 2fr 2fr 1fr;
    gap: 1rem;
    padding: 0.5rem;
  }
}

.iko_modal_info {
  width: 80%;
  display: flex;
  flex-direction: column;
  line-height: 1.375rem;
  justify-content: space-evenly;

  @media only screen and (max-width: 768px) {
    width: 100%;
    gap: 0.5rem;
  }
}

.iko_modal_info > h3 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 1.4rem;
  line-height: 1.4rem;

  @media only screen and (max-width: 768px) {
    gap: 0.8rem;
  }

  @media only screen and (max-height: 680px) {
    font-size: 1.2rem;
    line-height: 1.2rem;
  }
}

.iko_modal_info > h3 > img {
  width: 4rem;
  height: auto;

  @media only screen and (max-height: 680px) {
    width: 3rem;
  }
}

.iko_modal_info > p {
  @media only screen and (max-width: 768px) {
    line-height: 1.2rem;
  }
}

.iko_modal_info > ul {
  font-size: 0.8rem;
  line-height: 1.375rem;
  margin-block-start: 0em;
  margin-block-end: 0em;

  @media only screen and (max-width: 768px) {
    line-height: 1.2rem;
  }
}

.iko_modal_links {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  width: 80%;
  justify-self: flex-end;
  margin-top: -3rem;

  @media only screen and (max-width: 768px) {
    flex-direction: row;
    margin-top: 0;
    justify-self: center;
    gap: 2rem;
    width: 100%;
  }
}

.iko_modal_links > a {
  color: white;
  text-decoration: none;
  line-height: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}

.iko_modal_links > a {
  @media only screen and (max-width: 768px) {
    align-items: center;
    justify-content: center;
  }
}

.iko_modal_links > a > p {
  @media only screen and (max-width: 768px) {
    width: 100%;
    font-size: 0.7rem;
  }
}

.iko_modal_links > a > img {
  @media only screen and (max-height: 680px) {
    width: 6rem;
    height: auto;
  }
}

.iko_modal button {
  background-color: transparent;
  border: none;
  width: 3.5rem;
  height: 3.5rem;
  background-image: url(/cdn/shop/t/6/assets/button-close.svg?v=1682586427);
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer;
  align-self: flex-start;
  justify-self: flex-end;
  padding: 1rem;

  @media only screen and (max-width: 768px) {
    justify-self: center;
    z-index: 99;
  }
}

.hide {
  display: none;
}