.section-software-download-new {
  --gap-60: 20px;
  --gap-48: 16px;
  --gap-32: 12px;
  .page-layout-content {
    display: flex;
    flex-direction: column;
    gap: 60px;
  }

  .SDN__left {
    font-size: 14px;
    .SDN__left-wrapper {
      padding: var(--spacing-4) var(--spacing-5);
      border-radius: 12px;
      box-shadow: 1px 2px 2px 0 rgba(153, 153, 153, 0.20);
      background: #fff;
    }

    .SDN__left-history-link {
      width: 100%;
      margin: 0;
      text-align: center;
      background-color: #F4F4F4;
      padding-left: 32px;
      padding-right: 24px;
    }

    &[data-toogle-status-mb='close'] {
      border-radius: 8px;
      .SDN__filter-more {
        display: block;
      }
      .SDN__filter-less {
        display: none;
      }
      .SDN__left-toggle-wrapper {
        display: none;
      }
    }
    &[data-toogle-status-mb='open'] {
      border-radius: 8px 8px 0 0;
      .SDN__filter-more {
        display: none;
      }
      .SDN__filter-less {
        display: block;
      }
      .SDN__left-toggle-wrapper {
        display: block;
      }
    }

    .SDN__left-toggle-wrapper {
      padding-bottom: var(--spacing-6);
      border-bottom: 1px solid #f3f3f4;
      &[data-toogle-status-submenu='close'] {
        .SDN__left-toggle--title {
          color: var(--c-gray-800);
          background-color: #f4f4f4;
          .SDN__toggle-btn {
            transform: rotate(180deg);
            svg path {
              fill: #666666;
            }
          }
        }
        .SDN__left-toggle--content {
          display: none;
        }
      }
      &[data-toogle-status-submenu='open'] {
        .SDN__left-toggle--title {
          color: #fff;
          background-color: #0A97FF;
        }
        .SDN__left-toggle--content {
        }
      }

      .SDN__left-toggle--title {
        padding-left: 32px;
        padding-right: 24px;
        border-radius: 8px;
        svg {
          display: flex;
        }
      }
      .SDN__left-toggle--content {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        margin-top: var(--spacing-4);
        .SDN__left-select-item {
          height: 30px;
          padding-left: 10px;
          padding-right: 10px;
          margin-bottom: 2px;
          /* align-items: baseline; */
          &:hover {
            background-color: #f6f6f6;
          }
        }
      }
    }
  }

  .SDN__right {
    flex: 1;
    .SDN__right-header {
      padding: 48px 60px;
      border-radius: 8px;
      background: #fffaf9;
      box-shadow: 1px 4px 4px 0 #F2EFF0;
      background-image: url('/cdn/shop/files/support-download-new-header-bg.png?v=1784526052');
      background-size: cover;
      background-position: right center;
      background-repeat: no-repeat;
      .SDN__right-header-desc {
        padding-top: 8px;
        padding-bottom: 30px;
      }
      .SDN__right-header-selects {
        display: flex;
        align-items: center;
        gap: 20px;
        flex-wrap: wrap;
        .select2-container {
          background-color: #fff;
          border-radius: 8px;
          border: 1px solid #F6F6F6;
          height: 60px;
          display: flex;
          align-items: center;
          /* &:nth-of-type(1) {
            padding-left: 32px;
            position: relative;
            &::before {
              content: '';
              position: absolute;
              left: 10px;
              top: 50%;
              transform: translateY(-50%);
              width: 24px;
              height: 24px;
              background-image: url('/cdn/shop/files/icon--search.svg?v=1784530362');
              background-size: cover;
              background-position: center;
              background-repeat: no-repeat;
            }
          } */
          .selection {
            width: 100%;
          }
          .select2-selection--single  {
            background: transparent;
            border: none;
            .select2-selection__rendered {
            }
            .select2-selection__arrow {
              top: 50%;
              transform: translateY(-50%);
            }
          }
        }
      }
    }
    .SDN__right-content {
      display: grid;
      gap: 60px;

      .SDN__software--empty {
        grid-column: span 3;
        text-align: center;
        padding: 20px;
        background-color: #fafafa;
        border-radius: 8px;
        display: none;
        &.active {
          display: block;
        }
      }
      .SDN__software-item {
        background-color: #fafafa;
        border-radius: 8px;
        display: none;
        scroll-margin-top: 120px;
        &.active {
          display: block;
        }
      }
    }
  }

  .snippet-software-info-item {
    border-radius: 8px;
    background: #FFF;
    box-shadow: 1px 4px 4px 0 #F2EFF0;
    display: none;
    &.active {
      display: block;
    }
    &.soft--revomeasure .SDNI__supported-note {
      display: none;
    }
    .SDNI__content {
      display: flex;
      flex-direction: column;
      gap: 10px;
      .SDNI__content-baseinfo {
        display: grid;
        grid-template-columns: 108px 1fr;
        /* grid-template-rows: repeat(3, auto); */
        gap: 0 48px;
        .SDNI__logo {
          grid-row: 1 / span 3;
          img {
            box-shadow: 0 4px 4px 0 #F2EFF0;
            border-radius: 16px;
            max-width: 108px;
          } 
        }
      }
    }
    .SDNI__os-list {
      display: flex;
      flex-direction: column;
    }
    .SDNI__os-item {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 36px;
      border-bottom: 2px solid #F3F3F4;
      display: none;
      &.active {
        display: flex;
      }
      .SDNI__os-name {
        width: min(108px, 20%);
        .snippet-text-icon {
          justify-content: flex-end;
        }
      }
      .SDNI__os-devices {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        .SDNI__os-device-tag {
          background-color: #F0F3F8;
          padding: 0px 6px;
          border-radius: 4px;
          color: var(--c-gray-700);
        }
      }
      .SDNI__os-downloads {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        width: min(280px, 30%);
        .SDNI__os-dl {
          padding: 8px 12px;
          width: fit-content;
          border-radius: 4px;
          min-width: 126px;
          text-align: center;
          display: none;
          align-self: center;
          font-size: 12px;
          &.active {
            display: block;
          }
          &.SDNI__os-dl--cs {
            background-color: #F0F3F8;
            color: var(--c-gray-700);
          }
          &.SDNI__os-dl--rv {
            color: #fff;
          }
          &.SDNI__os-dl--google {
            border: 1px solid #999;
            color: #999;
            &:hover {
              border-color: #666;
              color: #666;
            }
          }
        }
      }
    }
    .SDNI__supported-note {
      background-color: #fef6f6;
      color: #666;
      margin-top: 32px;
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 16px 20px;
      border-radius: 8px;
      .metafield-rich_text_field {
        p, h6 strong { display: none; }
        h6 { color: #666; }
      }
    }
    .SDNI__source {
      padding-top: 32px;
      .SDNI__source-content {
        a {
          img {
            width: 18px;
          } 
        }
      }
    }
  }

}

@media (min-width: 768px) {
  .section-software-download-new {
    .page-layout-content {
      flex-direction: row;
    }
    .SDN__left {
      width: min(344px, 100%);
      position: relative;
      .SDN__left-wrapper {
        position: sticky;
        top: 188px;
      }
    }
    .SDN__right {
      flex: 1;
    }
  }
}
@media (max-width: 767px) {
  .section-software-download-new {
    .SDN__right {
      .SDN__right-header {
        padding: var(--spacing-4) var(--spacing-5);
        .SDN__right-header-selects {
          flex-direction: column;
          align-items: flex-start;
          .select2-container {
            width: 100% !important; 
            .selection {
              width: 100%;
            }
          }
        }
      }
    }
    .snippet-software-info-item .SDNI__content .SDNI__content-baseinfo {
      grid-template-columns: 80px 1fr;
      gap: 12px 16px;
      .SDNI__logo {
        grid-row: 1 / span 3;
        img {
          width: min(80px, 100%);
        }
      }
      .SDNI__supported-desc {
        grid-column: 1 / span 2;
        padding-top: 16px;
      }
    }
    .snippet-software-info-item {
      .SDNI__os-item {
        flex-direction: column;
        align-items: flex-start;
      }
    }
  }
}
.select2-container .select2-selection--single {
  height: fit-content;
}