#component-products {
  position: relative;
  margin-bottom: 8rem;
  z-index: 3;
}

#component-products[data-page="health"] {
  background: linear-gradient(112deg, #9cacd0 3.6%, #2e3057 97.62%), #d9d9d9;
}

#component-products[data-page="children"] {
  background: linear-gradient(112deg, #f5cc48 3.6%, #f2a143 97.62%), linear-gradient(112deg, #9cacd0 3.6%, #2e3057 97.62%), #d9d9d9;
  margin-bottom: 4rem;
}

#component-products[data-page="exotic"] {
  background: linear-gradient(112deg, #efe6d1 3.6%, #dfcfa5 97.62%), #d9d9d9;
}

#component-products[data-page="health"]::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -60px;
  background-image: url("/public/assets/images/health-left.png");
  background-repeat: no-repeat;
  background-size: contain;
  width: 320px;
  height: 558px;
  z-index: -1;
}

#component-products[data-page="health"]::before {
  content: "";
  position: absolute;
  right: 0;
  top: -120px;
  background-image: url("/public/assets/images/health-right.png");
  background-repeat: no-repeat;
  background-size: contain;
  width: 383px;
  height: 710px;
  z-index: -1;
}

#component-products[data-page="children"]::after {
  content: "";
  position: absolute;
  left: 0;
  top: -60px;
  background-image: url("/public/assets/images/children-left.png");
  background-repeat: no-repeat;
  background-size: contain;
  width: 391px;
  height: 540px;
  z-index: -1;
}

#component-products[data-page="children"]::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: -60px;
  background-image: url("/public/assets/images/children-right.png");
  background-repeat: no-repeat;
  background-size: contain;
  width: 300px;
  height: 661px;
  z-index: 2;
}

#component-products[data-page="exotic"]::after {
  content: "";
  position: absolute;
  left: 0;
  top: -60px;
  background-image: url("/public/assets/images/exotic-left.png");
  background-repeat: no-repeat;
  background-size: contain;
  width: 391px;
  height: 520px;
  z-index: -1;
}

#component-products[data-page="exotic"]::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 60px;
  background-image: url("/public/assets/images/exotic-right.png");
  background-repeat: no-repeat;
  background-size: contain;
  width: 273px;
  height: 557px;
  z-index: 2;
}

#component-products > .top,
#component-products > .bottom {
  position: absolute;
  width: 100%;
}

#component-products[data-page="children"] > .top {
  left: 0;
  top: -2px;
  z-index: -1;
}

#component-products[data-page="children"] > .top > img {
  min-height: 14px;
  object-fit: cover;
}

#component-products[data-page="children"] > .bottom {
  left: 0;
  bottom: -2px;
  z-index: 1;
}

#component-products[data-page="children"] > .bottom > img {
  min-height: 14px;
  object-fit: cover;
}

#component-products[data-page="exotic"] > .top {
  top: -55px;
  z-index: -1;
}

#component-products[data-page="exotic"] > .top > img {
  min-height: 64px;
  object-fit: cover;
}

#component-products[data-page="exotic"] > .bottom {
  bottom: -75px;
  z-index: -1;
  rotate: 180deg;
}

#component-products[data-page="exotic"] > .bottom > img {
  min-height: 80px;
  object-fit: cover;
}

#component-products > .top > img,
#component-products > .bottom > img {
  width: 100%;
}

#component-products > .eg-container > .eg-wrapper {
  display: flex;
  gap: 1rem;
}

#component-products > .eg-container > .eg-wrapper > .left {
  width: 40%;
  padding: 4rem 0;
}

#component-products .left > .content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

#component-products .left > .content > .description {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 1rem;
}

#component-products .left > .content > .description > b {
  color: var(--do-white);
  font-size: var(--font-60);
  font-family: "DIN Condensed Regular";
  font-weight: 400;
  text-transform: uppercase;
  text-shadow: 1px 1px var(--do-black);
}

#component-products .left > .content > .description > p {
  color: var(--do-white);
  font-size: var(--font-18);
  font-weight: 400;
  line-height: var(--line-26);
  text-shadow: 1px 1px var(--do-black);
}

#component-products .specs {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

#component-products .specs > p {
  color: var(--do-white);
  font-size: var(--font-20);
  font-weight: 500;
  text-shadow: 1px 1px var(--do-black);
}

#component-products .specs > .group {
  display: grid;
  grid-template-columns: var(--col-3);
  grid-template-rows: var(--col-6);
  grid-template-areas:
    "star1 blank1 star3 blank2"
    "blank3 star2 blank4 star4";
  width: fit-content;
}

#component-products .left > .content > .specs > .group > .box {
  position: relative;
  width: 130px;
  height: 130px;
}

#component-products .specs > .group > .box:nth-child(1) {
  grid-area: star1;
}

#component-products .specs > .group > .box:nth-child(2) {
  grid-area: star2;
}

#component-products .specs > .group > .box:nth-child(3) {
  grid-area: star3;
}

#component-products .specs > .group > .box:nth-child(4) {
  grid-area: star4;
}

#component-products .specs > .group > .box > svg {
  width: 100%;
  height: 100%;
}

#component-products .specs > .group > .box > svg > path {
  transition: 0.3s all;
  width: 100%;
  height: 100%;
}

#component-products .specs > .group > .box:nth-child(odd) > svg {
  animation: rotate 10s infinite linear;
}

#component-products .specs > .group > .box:nth-child(odd):hover > svg > path {
  fill: var(--do-purple);
}

#component-products .specs > .group > .box:nth-child(even) > svg {
  animation: rotateReverse 10s infinite linear;
}

#component-products .specs > .group > .box:nth-child(even):hover > svg > path {
  fill: var(--do-green);
}

#component-products .box > .description {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  text-align: center;
  user-select: none;
}

#component-products .specs > .group > .box > .description > p,
#component-products .specs > .group > .box > .description > b {
  color: var(--do-black);
  font-size: var(--font-12);
}

#component-products .specs > .group > .box:hover > .description > p,
#component-products .specs > .group > .box:hover > .description > b {
  color: var(--do-white);
}

#component-products > .eg-container > .eg-wrapper > .right {
  width: 60%;
}

#component-products .swiper-products {
  padding: 2rem 0;
}

#component-products .swiper-products > .attachments > img {
  position: absolute;
}

#component-products .swiper-products > .attachments > img:nth-of-type(1) {
  top: -4rem;
}

#component-products[data-page="exotic"] .swiper-products > .attachments > img:nth-of-type(1) {
  top: 50%;
  transform: translateY(-50%);
  left: 75px;
}

#component-products .swiper-products > .attachments > img:nth-of-type(2) {
  top: 50%;
  left: -1rem;
}

#component-products .swiper-products > .attachments > img:nth-of-type(3) {
  bottom: 0;
  right: 1rem;
}

#component-products .swiper-products > .swiper-wrapper > .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
}

#component-products .swiper-products > .swiper-wrapper > .swiper-slide > img {
  max-width: 400px;
}

#component-products .swiper-products-thumbs > .swiper-wrapper {
  align-items: end;
  justify-content: center;
  height: 120px;
  margin-bottom: -1px;
}

#component-products[data-page="health"] .swiper-products-thumbs > .swiper-wrapper {
  justify-content: space-between;
}

#component-products .swiper-products-thumbs > .swiper-wrapper > .swiper-slide {
  width: 85px;
  display: flex;
  align-items: end;
  justify-content: center;
  cursor: pointer;
  transition: 0.3s;
}

#component-products .swiper-products-thumbs > .swiper-wrapper > .swiper-slide > img {
  width: 62px;
  transition: 0.3s;
  user-select: none;
}

#component-products .swiper-products-thumbs > .swiper-wrapper > .swiper-slide-thumb-active > img {
  width: 85px;
}

#component-products .product-navigation {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 1rem;
}

#component-products .product-navigation > .eg-wrapper {
  width: 325px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

#component-products .product-navigation > .eg-wrapper > .swiper-pagination {
  position: unset;
  color: var(--do-white);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

#component-products .product-navigation > .eg-wrapper > .swiper-pagination > .swiper-pagination-current {
  font-size: var(--font-30);
}

#component-products .product-navigation > .eg-wrapper > .swiper-pagination > .swiper-pagination-total {
  font-size: var(--font-18);
}

#component-products .product-navigation > .eg-wrapper > .swiper-pagination > small {
  content: url("data:image/svg+xml,%3Csvg width='13' height='42' viewBox='0 0 13 42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='12.483' y1='0.12941' x2='1.35374' y2='41.6642' stroke='white'/%3E%3C/svg%3E%0A");
}

#component-products .product-navigation > .eg-wrapper > .swiper-button-prev,
#component-products .product-navigation > .eg-wrapper > .swiper-button-next {
  position: initial;
  margin: 0;
  background: var(--do-white);
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  padding: 0.5rem;
}

#component-products .product-navigation > .eg-wrapper > .swiper-button-prev::after,
#component-products .product-navigation > .eg-wrapper > .swiper-button-next::after {
  content: "";
  font-size: unset;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotateReverse {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(-360deg);
  }
}

@media (max-width: 1400px) {
  #component-products .left > .content > .specs > .group > .box {
    width: 100px;
    height: 100px;
  }
  #component-products[data-page="health"]::after {
    width: 260px;
  }
  #component-products[data-page="health"]::before {
    width: 300px;
  }
  #component-products[data-page="health"] .swiper-products > .attachments > img:nth-of-type(1) {
    width: 140px;
  }
  #component-products[data-page="health"] .swiper-products > .attachments > img:nth-of-type(2) {
    width: 120px;
  }
  #component-products[data-page="health"] .swiper-products > .attachments > img:nth-of-type(3) {
    width: 130px;
  }
  #component-products[data-page="children"]::after {
    width: 200px;
  }
  #component-products[data-page="children"]::before {
    width: 260px;
  }
  #component-products[data-page="children"] .swiper-products > .attachments > img:nth-of-type(1) {
    width: 135px;
  }
  #component-products[data-page="children"] .swiper-products > .attachments > img:nth-of-type(2) {
    width: 145px;
  }
  #component-products[data-page="children"] .swiper-products > .attachments > img:nth-of-type(3) {
    width: 115px;
  }
  #component-products[data-page="exotic"]::after {
    width: 240px;
  }
  #component-products[data-page="exotic"]::before {
    width: 225px;
  }
  #component-products .swiper-products > .swiper-wrapper > .swiper-slide > img {
    max-width: 350px;
  }
}

@media (max-width: 1200px) {
  #component-products > .eg-container > .eg-wrapper > .left {
    width: 45%;
  }
  #component-products > .eg-container > .eg-wrapper > .right {
    width: 55%;
  }
  #component-products[data-page="health"]::after {
    width: 220px;
  }
  #component-products[data-page="health"]::before {
    width: 260px;
  }
}

@media (max-width: 992px) {
  #component-products > .eg-container > .eg-wrapper {
    flex-direction: column;
  }
  #component-products > .eg-container > .eg-wrapper > .left,
  #component-products > .eg-container > .eg-wrapper > .right {
    width: 100%;
  }
  #component-products .left > .content > .description,
  #component-products .specs {
    text-align: center;
    align-items: center;
  }
  #component-products .swiper-products > .swiper-wrapper > .swiper-slide > img {
    max-width: 300px;
  }
}

@media (max-width: 576px) {
  #component-products .specs > .group {
    grid-template-columns: var(--col-6);
    grid-template-rows: unset;
    grid-template-areas:
      "star1 blank1"
      "blank2 star2"
      "star3 blank3"
      "blank4 star4";
    width: 100%;
  }
  #component-products .left > .content > .specs > .group > .box {
    width: 100%;
    height: 100%;
  }
  #component-products .specs > .group > .box > .description > p,
  #component-products .specs > .group > .box > .description > b {
    font-size: var(--font-16);
  }
  #component-products .swiper-products > .attachments > img {
    display: none;
  }
  #component-products .swiper-products-thumbs > .swiper-wrapper {
    justify-content: space-evenly;
  }
  #component-products .swiper-products > .swiper-wrapper > .swiper-slide > img {
    max-width: 200px;
  }
  #component-products .product-navigation > .eg-wrapper {
    width: 275px;
  }
  #component-products .product-navigation > .eg-wrapper > .swiper-button-prev,
  #component-products .product-navigation > .eg-wrapper > .swiper-button-next {
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
  }
  #component-products[data-page="children"]::before,
  #component-products[data-page="exotic"]::before {
    z-index: -1;
  }
  #component-products[data-page="exotic"] > .bottom {
    bottom: -65px;
  }
}