.product-section {
  .product-section__content {
    display: flex;
    gap: 8rem;

    @media (max-width: 1500px) {
      gap: 5rem;
    }

    @media (max-width: 1280px) {
      gap: 3rem;
    }

    @media (max-width: 990px) {
      flex-direction: column;
    }

    .image-container {
      max-width: 53.2%;
      width: 100%;

      @media (max-width: 990px) {
        max-width: 100%;
      }
    }

    .product-info {
      position: sticky;
      top: var(--header-height);
      flex: 1;
      height: fit-content;
      max-width: calc(47.8% - 8rem);
      width: 100%;

      @media (max-width: 1500px) {
        max-width: calc(47.8% - 5rem);
      }
  
      @media (max-width: 1280px) {
        max-width: calc(47.8% - 3rem);
      }

      @media (max-width: 990px) {
        padding: 0;
        border: none;
        box-shadow: none;
        border-radius: 0;
        max-width: 100%;
      }

      .product-form__submit.bundle-submit {
        display: none;
      }

      &:has(.configurator) {
        .product-form__submit.bundle-submit {
          display: block;
        }

        .product-form__submit {
          display: none;
        }
      }

      &:not(:has(.configurator .product[data-product-key=""])) {
        .product-form__submit:not(.bundle-submit) {
          display: block;
        }

        .product-form__submit.bundle-submit {
          display: none;
        }
      }

      .product-info__title {
        font-weight: 600;
        font-size: 4.8rem;
        line-height: 5.9rem;
        color: #000;

        @media (max-width: 990px) {
          font-size: 3.6rem;
          line-height: 4.4rem;
        }
      }

      .product-info__subtitle {
        font-weight: 400;
        font-size: 2rem;
        line-height: 2.4rem;
        color: #7F7F7F;
        margin-top: 0;

        @media (max-width: 990px) {
          font-size: 1.7rem;
          line-height: 2.1rem;
        }
      }

      .product-info__price {
        display: flex;
        align-items: center;

        .product-info__price-value {
          font-weight: 600;
          font-size: 2rem;
          line-height: 2.4rem;
        }

        .product-info__price-compare {
          font-weight: 600;
          font-size: 2rem;
          text-decoration: line-through;
          color: #a4a4a4;
          display: block;
          margin-left: 1.5rem;
        }

        .product-info__price-discount {
          margin-left: 2.4rem;
          padding: 0.6rem 1rem;
          font-size: 1.5rem;
          color: #fff;
          background-color: #000;
          border-radius: 0.8rem;
          font-weight: 600;
          line-height: 1.8rem;
        }
      }

      .product-info__price-text * {
        margin: 0;
      }

      .product-info__advantages {
        display: flex;
        flex-direction: column;
        gap: 1rem;

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

        .product-info__advantages-item {
          display: flex;
          gap: 2rem;
          font-weight: 400;
          font-size: 1.8rem;
          line-height: 140%;
          color: #393939;

          @media screen and (max-width: 990px) {
            gap: 1.4rem;
            font-size: 1.7rem;
          }

          svg {
            min-width: 2.8rem;

            @media screen and (max-width: 990px) {
              min-width: 2.6rem;
              width: 2.6rem;
              height: 2.6rem;
            }
          }
        }
      }

      .product-info__shipping {
        display: flex;
        gap: 1.2rem;
        align-items: center;

        svg {
          min-width: 2.3rem;
        }

        p {
          margin: 0;
          font-weight: 500;
          font-size: 16px;
          color: #313131;

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

      .product-info__buy-button {
        .product-info__buy-button-payment {
          display: block;
          max-width: 81%;
          margin: auto;
          width: 100%;
          margin-top: 2rem;

          @media (max-width: 990px) {
            max-width: 89.5%;
            margin-top: 1.6rem;
          }
        }

        .sealsubs-target-element {
          display: none;
        }

        .product-form__submit {
          border-radius: 100px;
          background: #000;
          color:#fff;
          gap: 2rem;
          font-weight: 700;
          font-size: 2.2rem;
          text-transform: none !important;
          height: 7.6rem;

          @media (max-width: 990px) {
            height: 7.4rem;
            font-size: 2rem;
          }

          svg {
            min-width: 2.5rem;
          }
        }
      }

      .product-info__rules {
        display: flex;
        flex-wrap: wrap;
        gap: 1.6rem;
        justify-content: space-between;
        flex-direction: column;

        @media screen and (max-width: 990px) {
          justify-content: center;
        }

        .product-info__rules-item {
          display: flex;
          align-items: center;
          gap: 1.3rem;
          line-height: 1;
          font-size: 1.8rem;
          color: #313131;

          @media screen and (max-width: 990px) {
            font-size: 1.4rem;
            gap: 1rem;
          }

          @media screen and (max-width: 400px) {
            font-size: 1.2rem;
          }

          @media screen and (max-width: 375px) {
            font-size: 1rem;
          }

          svg {
            min-width: 2.8rem;

            @media screen and (max-width: 990px) {
              min-width: 2.2rem;
              width: 2.2rem;
            }

            circle {
              fill: black;
            }
          }
        }
      }

      variant-picker {
        position: relative;
        .best-image {
          position: absolute;
          top: 54px;
          right: 4px;
          transform: translate(100%, -100%);

          @media (max-width: 1800px) {
            display: none;
          }
        }

        .best-image-mobile {
          display: none;

          @media (max-width: 1800px) {
            display: block;
            position: absolute;
            top: 22px;
            right: 0;
            transform: translate(0%, -100%);
          }

          @media (max-width: 1150px) {
            top: 22px;
            right: -10px;
          }

          @media (max-width: 990px) {
            top: 18px;
          }
        }
      }

      .options-list {
        display: flex;
        gap: 1.2rem;
        align-items: end;

        @media (max-width: 990px) {
          align-items: stretch;
          gap: 0.9rem;
        }

        .option-item {
          flex: 1;
          display: flex;
          flex-direction: column;

          label {
            display: flex;
            border: 1px solid #b6b6b6;
            border-radius: 1rem;
            overflow: hidden;
            cursor: pointer;

            @media (max-width: 990px) {
              height: 100%;
              border-radius: 0.8rem;
            }

            input {
              display: none;
            }

            img {
              width: 100%;
              height: 100%;
              object-fit: contain;
              aspect-ratio: 175/183;

              @media (max-width: 990px) {
                aspect-ratio: 124/104;
              }
            }

            &:has(input:checked) {
              border-color: #000;
            }
          }

          &:has(.option-item__price-discount) label {
            border-top: none;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
          }

          .option-item__price-discount {
            font-weight: 700;
            font-size: 20px;
            text-transform: uppercase;
            text-align: center;
            color: #fff;
            background-color: #000;
            padding: 1rem;
            width: 100%;
            font-family: 'Montserrat', sans-serif;
            line-height: 24px;
            border-radius: 1rem 1rem 0 0;

            @media (max-width: 990px) {
              border-radius: 0.8rem 0.8rem 0 0;
              font-size: 1.5rem;
              padding: 0.4rem;
              line-height: 1.8rem;
            }
          }
        }

        &.size-list {
          .option-item {
            label {
              display: flex;
              justify-content: center;
              align-items: center;
              padding: 1.6rem;

              .option-item__name {
                font-size: 2rem;
                line-height: 2.4rem;
                color: #000;
              }
            }
          }
        }
      }

      .product-section__reels {
        .block-reels {
          .block-reels__header {
            display: flex;
            align-items: center;
            gap: .6rem;

            .product-section__reels-subtitle {
              margin: 0;
            }

            .product-section__reels-title {
              white-space: nowrap;
            }
          }

          .block-reels__list {
            display: flex;
            gap: 1.2rem;
            max-width: 100%;
            margin-top: 1rem;
            overflow-y: scroll;
            scrollbar-width: none;
            -ms-overflow-style: none;
            &::-webkit-scrollbar {
              display: none;
            }

            @media (max-width: 990px) {
              gap: 1rem;
            }

            @media (max-width: 400px) {
              gap: 0.6rem;
            }

            .block-reels__item {
              flex: 1;
              aspect-ratio: 1/1;
              overflow: hidden;
              transition: transform 0.3s ease-in-out;
              cursor: pointer;
              min-width: 10rem;

              &:hover {
                transform: scale(1.05);
              }

              .block-reels__item-video {
                width: 100%;
                height: 100%;

                video {
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                }
              }
            }
          }
        }
      }

      .product-section__combinations {
        display: flex;
        align-items: center;
        gap: 1.6rem;
        padding: 0.8rem;
        border-radius: 1rem;

        .product-section__combinations-image {
          max-width: 25%;
          width: 100%;
        }

        .product-section__combinations-title *{
          margin: 0;
        }
      }
    }

    .swipers {
      position: sticky;
      top: var(--header-height);
      display: flex;
      gap: 3rem;
      flex-direction: column-reverse;

      @media (max-width: 1280px) {
        gap: 1.6rem;
      }

      .thumbs-wrapper {
        position: relative;

        .swiper-button-next,
        .swiper-button-prev {
          position: absolute;
          bottom: 0;
          top: unset;
          padding: 0;
          border-radius: unset;
          border: none;
          background: none;
          display: flex;
          width: 3.6rem;
          height: 3.6rem;
          left: 50%;
          transform: translateX(-50%);

          &.swiper-button-disabled {
            opacity: 0;
          }

          svg {
            width: 3.6rem;
            height: 3.6rem;
          }

          @media (max-width: 990px) {
            display: none;
          }
        }

        .swiper-button-prev {
          bottom: 3.8rem;

          svg {
            transform: rotate(180deg);
          }
        }

        .thumbs {  
          max-height: 54rem;
          overflow: hidden;
          position: relative;

          .swiper-slide {
            cursor: pointer;
            min-width: 14.6rem;
            max-width: 14.6rem;
            max-height: 14.3rem;
            min-height: 14.3rem;
            border-radius: 1.4rem;
            border: 0.1rem solid transparent;
            overflow: hidden;
            display: flex;
            align-items: center;
            transition: border 0.3s ease-in-out;
            background: #f5f5f5;

            @media (max-width: 990px) {
              min-width: 7.6rem;
              max-width: 7.6rem;
              max-height: 7.2rem;
              min-height: 7.2rem;
              border-radius: 1rem;
            }

            img {
              width: 100%;
              height: 100%;
              object-fit: contain;
            }
  
            &.swiper-slide-thumb-active {
              border: 1px solid #a6a6a6;
            }
          }
        }
      }

      .swiper-main {
        aspect-ratio: 766/747;
        overflow: hidden;
        border-radius: 3rem;
        overflow: hidden;
        background: #f5f5f5;

        @media (max-width: 990px) {
          max-width: 100%;
          height: 100%;
          border-radius: 2rem;
          box-shadow: none;
        }

        .swiper-slide {
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }
    }

    .product-section__accordions {
      margin-left: auto;
      display: flex;
      flex-direction: column;
      width: 100%;

      li:last-child .accordion {
        border-bottom: none;
      }

      .accordion__content{
        display: grid;
        grid-template-rows: 0fr;
        transition-duration: 0.3s;
      }
      
      .accordion__content-body{
        overflow: hidden;
      }
      
      .accordion__details[open] + .accordion__content{
        grid-template-rows: 1fr;
      }

      .icon-arrow-minus {
        display: none;
      }

      .accordion__details[open] .accordion__summary {
        .icon-arrow-plus {
          display: none;
        }

        .icon-arrow-minus {
          display: block;
        }
      }

      .accordion {
        padding: 2.4rem 0;
        border-bottom: 1px solid #d6d6d6;
        cursor: pointer;

        .accordion__summary {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 1.6rem;

          svg {
            transition: transform 0.3s ease-in-out;
          }

          .accordion__title {
            font-weight: 500;
            font-size: 2rem;
            text-align: center;
            color: #000;
            line-height: 2.7rem;
          }
        }

        .accordion__content-body {
          p {
            margin-bottom: 0;
          }
        }
      }
    }

    @media (min-width: 991px) {
      .enable-gallery {
        .thumbs-wrapper {
          display: none;
        }

        .swiper-main {
          pointer-events: none;
          overflow: initial;
          background-color: transparent;

          .swiper-wrapper {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
          }

          .swiper-slide {          
            &:nth-child(3n+1) {
              grid-column: 1 / -1;
            }
          }
        }
      }
    }
  }

  .reels-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 25;

    &.reels-modal--active {
      display: block;
    }

    .reels-modal__content {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;

      .reels-modal__close {
        position: absolute;
        top: 2rem;
        left: 2rem;
        cursor: pointer;
        padding: 0;
        border: none;
      }

      .reels-modal__mute {
        position: absolute;
        top: 2rem;
        right: 2rem;
        cursor: pointer;
        padding: 0;
        border: none;
      }

      .reels-modal__play {
        position: absolute;
        top: 50%;
        right: 50%;
        transform: translate(50%, -50%);
        cursor: pointer;
        padding: 0;
        border: none;
        
        &.reels-modal__play--active {
          display: none;
        }
      }
    }

    .reels-modal__mute {
      .unmute {
        display: none;
      }

      &.reels-modal__mute--active {
        .unmute {
          display: block;
        }

        .mute {
          display: none;
        }
      }
    }

    .reels-modal__content-video {
      height: 100vh;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      video {
        width: fit-content;
        height: 100%;
        object-fit: contain;
        max-width: 75vw;

        @media (max-width: 990px) {
          object-fit: cover;
          max-width: 100%;
        }
      }
    }
  }

  .configurator-popup {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 30;
    display: flex;
    justify-content: flex-end;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0);
    transition: background-color 0.3s ease-in-out, opacity 0.3s ease-in-out;

    .configurator-popup__close {
      position: absolute;
      top: 2rem;
      right: 2rem;
      cursor: pointer;
      padding: 0;
      border: none;
      transition: none;
      box-shadow: none;
      height: auto;

      svg {
        width: 2.4rem;
        height: 2.4rem;

        g {
          filter: none;
        }

        path {
          fill: #000;
        }
      }
    }

    .quantity-selector {
      position: absolute;
      top: 0;
      right: 0;
      display: flex;
      align-items: center;
      width: 100%;
      justify-content: space-between;
      padding: 1rem;

      @media (max-width: 990px) {
        padding: 0.5rem;
      }

      &:has(input[value="0"]) {
        display: none;
      }

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

      input[type=number] {
        -moz-appearance: textfield;
        text-align: center;
        border: none;
        pointer-events: none;
        background-color: transparent;
        font-size: 1.8rem;
      }

      button {
        padding: 0;
        padding: 1rem;
        height: 3rem;
        border-radius: 0;
        transition: none;
      }
    }

    .configurator-thumbs {
      border: none;
      padding-top: 1rem;
      display: flex;
      gap: .5rem;
      align-items: center;
      justify-content: center;
      margin-top: auto;

      .configurator-thumb {
        aspect-ratio: 15/20;
        max-width: 100%;
        position: relative;
        border: 1px solid #f5f5f5;
        padding: 1rem;
        max-width: 10rem;
        flex: 1;

        @media (max-width: 990px) {
          padding: 0.4rem;
        }

        &.configurator-thumb--new {
          img {
            object-fit: cover;
          }
          .configurator-thumb__empty {
            display: none;
          }
        }

        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }
    }
    
    .configurator-popup__wrapper {
      transition: transform 0.3s ease-in-out;
      max-width: 50rem;
      width: 100%;
      height: 100dvh;
      transform: translateX(100%);
      background-color: #fff;
      padding: 2rem;
      display: flex;
      flex-direction: column;
      max-height: 100dvh;

      .configurator-popup__title {
        text-align: center;
      }

      .product-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
        margin-top: 2rem;
        overflow-y: scroll;

        @media (max-width: 990px) {
          margin-top: 1rem;
        }

        .product {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 0rem;
          cursor: pointer;
          height: fit-content;

          .product__image {
            display: flex;
            align-items: center;
            justify-content: center;
            aspect-ratio: 15/20;
            max-width: 100%;
            position: relative;
            border: 1px solid #f5f5f5;
            margin-bottom: 1rem;
            width: 100%;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }

          .product__style {
            margin: 0;
            text-align: center;
            font-size: 1.4rem;
          }

          .product__color {
            margin: 0;
            text-align: center;
            font-size: 1.8rem;
            font-weight: 600;

            @media (max-width: 990px) {
              font-size: 1.6rem;
              line-height: 1.1;
            }
          }
        }
      }

      .filters {
        display: flex;
        gap: 2rem;
        align-items: center;
        margin-top: 2rem;
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 0;

        @media (max-width: 990px) {
          margin-top: 1rem;
        }

        .filter {
          width: fit-content;
          cursor: pointer;

          .filter__button-text {
            white-space: nowrap;
          }

          &.active {
            .filter__button-text {
              font-weight: 600;
            }
          }
        }
      }
    }

    &.configurator-popup--active {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      background-color: rgba(0, 0, 0, 0.5);

      .configurator-popup__wrapper {
        transform: translateX(0);
      }
    }
  }

  .product-section__configurator {
    .configurator {
      display: flex;
      gap: 1rem;
      margin-top: 2rem;
      flex-wrap: wrap;

      @media (max-width: 1200px) and (min-width: 991px) {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
      }

      @media (max-width: 500px) {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
      }

      .product {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0rem;
        cursor: pointer;
        position: relative;
        flex: 1;

        .product__image {
          display: flex;
          align-items: center;
          justify-content: center;
          aspect-ratio: 15/20;
          max-width: 100%;
          position: relative;
          border: 1px solid #f5f5f5;
          margin-bottom: 1rem;
          width: 100%;
          padding: 1rem;

          img {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }

        .product__style {
          margin: 0;
          text-align: center;

          .product__style--empty {
            font-size: 1.8rem;
          }
        }

        .product__color {
          margin: 0;
          text-align: center;
          font-size: 1.4rem;
          font-weight: 600;
        }

        .product__style--selected {
          display: none;
        }

        .product__color--selected {
          display: none;
        }

        .product__image--selected {
          display: none;
        }

        &.new-product {
          .product__image--empty {
            display: none;
          }
          
          .product__style--empty {
            display: none;
          }

          .product__image--selected {
            display: block;
          }

          .product__style--selected {
            display: block;
            font-size: 1.2rem;
            line-height: 1.1;
          }

          .product__color--selected {
            display: block;
            word-break: break-word;
            hyphens: auto;
          }

          .product__image {
            padding: 0;

            img {
              object-fit: cover;
            }
          }
        }

        &.empty {
          .product__image {
            background-color: #f5f5f5;
          }
        }

        .product__remove {
          position: absolute;
          top: 1rem;
          right: 1rem;
          cursor: pointer;
          padding: 0;
          border: none;
          transition: none;
          padding: 0;
          box-shadow: none;
          height: auto;
          z-index: 10;

          @media (max-width: 990px) {
            top: 0.5rem;
            right: 0.5rem;
          }

          svg {
            width: 2.4rem;
            height: 2.4rem;

            g {
              filter: none;
            }

            path {
              fill: #000;
            }
          }
        }
      }
    }
  }

  .product-section__included {
    .included__title {
      font-size: 2rem;
      margin-bottom: 2rem;
    }

    .included-list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2rem;

      @media (max-width: 1200px) {
        gap: 1rem;
      }

      .included-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        background-color: #f5f5f5;
        border-radius: 1rem;
        padding: 1rem;

        .included-item__image {
          width: 100%;
          height: 0;
          padding-bottom: 100%;
          position: relative;
          display: block;

          img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }

        .included-item__title {
          font-size: 1.4rem;
          text-align: center;
        }
      }
    }

    .included__description {
      padding: 2rem;
      border-radius: 1rem;
      background-color: #f5f5f5;
      margin-top: 2rem;
    }
    
    .included__description p {
      text-align: center;
      font-size: 1.4rem;
      line-height: 1.4;
      margin: 0;
    }
  }
}