.page-wrapper {
  position: relative;
  padding-top: .25rem;
  width: 100cqw;
  margin-left: calc(50% - 50cqw);  /* тот же визуальный эффект, без transform */
  background-color: #FFFFFF;
}

.page-footer {
  .button-buy-wrapper:not([hidden]) {
    height: var(--catalog-detail-button-buy-wrapper--h);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .button {
    flex-grow: 1;
    border-color: #373635;
    background-color: #373635;
    color: #FFFFFF;

    .svg {
      width: 1.375rem;
      height: 1.375rem;
    }
  }
}


.bordered-rows {
  border-top: 1px solid #D9D9D9;

  .link {
    font-weight: 500;
    color: #009AE3;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .375rem;
    text-decoration-style: solid;
  }

  .row {
    padding-block: .375rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid #D9D9D9;
    font-weight: 400;
    font-size: .875rem;
    line-height: 1.125rem;
    color: #27282B;
    text-align: center;

    .l, .r {
      padding-top: .375rem;
      padding-bottom: .5rem;
    }

    .l {
      border-right: 1px solid #D9D9D9;
    }
  }
}

.section-top {
  overflow: hidden;

  .top-rows {
    margin-top: .5rem;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: .5rem;

    .link {
      color: #009AE3;
      text-decoration: none;
    }

    .row {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      font-size: .875rem;
      line-height: 1.125rem;

      .t {
        min-height: 1.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: .375rem;
      }

      .l, .r {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
      }

      .l {
        align-items: flex-start;

        .b {
          font-weight: 300;
          color: #9EA8B0;
          text-align: left;
        }
      }

      .r {
        align-items: stretch;

        .t {
          padding-inline: .625rem;
          border-radius: .5rem;
          background-color: #009AE3;
          font-weight: 500;
          color: #FFFFFF;
        }

        .b {
          font-weight: 400;
          color: #27282B;
          text-align: center;
        }
      }
    }
  }

  .photos {
    position: relative;
    /*margin-top: .75rem;*/
    padding-bottom: .75rem;

    .img {
      margin-inline: auto;
      width: 100%;
      height: auto;
      aspect-ratio: 360/240;
      object-fit: cover;

      @container app (width > 430px) {
        width: calc(100% / 2 - .25rem);
      }
    }

    .swiper-pagination {
      bottom: 0;
    }
  }

  .bottom-rows {
    margin-top: .75rem;
  }
}

.section-buy {
  overflow: hidden;

  .misc {
    padding-block: .875rem;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: .25rem;

    .l {
      flex-grow: 1;
      display: flex;
      flex-flow: column nowrap;
      justify-content: space-between;
      align-items: flex-start;
      gap: .25rem;

      .discount {
        padding: .25rem .5rem;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        gap: .125rem;
        border-radius: 99999px;
        background-color: #E81331;
        font-weight: 500;
        font-size: .75rem;
        line-height: .875rem;
        color: #FFFFFF;

        .currency {
          font-weight: 700;
          font-size: .625rem;
          line-height: .625rem;
        }
      }

      .prices {
        display: flex;
        justify-content: flex-start;
        align-items: flex-end;
        gap: .75rem;
      }

      .price {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        gap: .375rem;
        font-weight: 700;
        font-size: 2rem;
        line-height: 2.125rem;
        color: #373635;

        .currency {
          font-size: 1.125rem;
          line-height: 1.5rem;
        }
      }

      .old-price {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        gap: .25rem;
        font-weight: 500;
        font-size: .875rem;
        line-height: 1rem;
        color: #4D4F53;

        .currency {
          font-weight: 700;
          font-size: .625rem;
          line-height: .875rem;
        }

        &:after {
          content: "";
          position: absolute;
          left: -.125rem;
          right: -.125rem;
          top: 50%;
          border-top: 1px solid #E81331;
          transform: rotate(-7deg);
        }
      }

      .bonus {
        font-size: .875rem;
        line-height: 1.25rem;

        .sum {
          font-weight: 700;
          color: #E81331;
          text-decoration-line: underline;
          text-decoration-thickness: 1px;
          text-underline-offset: .375rem;
          text-decoration-style: solid;
        }

        .txt {
          font-weight: 300;
          color: #373635;
        }
      }
    }

    .r {
      flex-shrink: 0;
      width: 6.75rem;
      display: flex;
      flex-flow: column nowrap;
      justify-content: space-around;
      align-items: flex-start;
      gap: .25rem;

      .button {
        padding: 0;
        border: none;
        background-color: transparent;
        user-select: none;

        &:not([hidden]) {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          gap: .625rem;
        }

        font-weight: 400;
        font-size: .75rem;
        line-height: .875rem;
        color: #4D4F53;
        text-align: left;

        .svg {
          flex-shrink: 0;
        }
      }
    }
  }

  .one-click {
    margin-bottom: .875rem;
    width: 100%;
    border-color: #009AE3;
    background-color: #FFFFFF;
    color: #009AE3;
  }

  .stores {
    position: relative;

    &[open] .stores-header .svg {
      transform: rotate(180deg);
    }

    .stores-header {
      position: absolute;
      right: 0;
      bottom: 100%;
      transform: translateY(calc(-.375rem - 1px));
      padding: .375rem 1.25rem .5rem;
      width: 50%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: .5rem;
      color: #009AE3;

      &:before {
        content: "";
        width: 12px;
      }

      .text {
        font-weight: 400;
        font-size: .875rem;
        line-height: 1.125rem;
        text-align: center;
        user-select: none;
      }
    }

    .stores-main {
      padding-block: 1rem;
      border-bottom: 1px solid #D9D9D9;
      display: flex;
      flex-flow: column nowrap;
      justify-content: flex-start;
      align-items: flex-start;
      gap: .625rem;

      .row {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        gap: .625rem;

        font-weight: 400;
        font-size: .875rem;
        line-height: 1.125rem;
      }

      .img {
        flex-shrink: 0;
      }

      .address {
        color: #27282B;
      }

      .remnant {
        color: #009AE3;
      }
    }
  }

  .sizes {
    padding-block: .625rem;

    .title {
      margin-bottom: .75rem;
      font-weight: 700;
      font-size: 1rem;
      line-height: 1.25rem;
      color: #373635;
    }

    .form-sizes {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: stretch;
      gap: .5rem;

      .label {
        flex-grow: 1;
        flex-basis: 30%;
        padding: .25rem .5rem;
        min-height: 2.25rem;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: .25rem;
        border: 1px solid var(--l-bc, transparent);
        background-color: var(--l-bgc, #F1F4F6);
        cursor: pointer;
        user-select: none;
        font-weight: 400;
        font-size: 1.125rem;
        line-height: 1.25rem;
        color: var(--l-c, #27282B);
        text-align: center;

        &:has(input:checked) {
          --l-bc: #009AE3;
          --l-bgc: #FFFFFF;
          --l-c: #009AE3;
        }
      }
    }
  }
}

.section-spoilers {
  .spoiler {
    padding-block: 1.25rem;
    border-top: 1px solid #D9D9D9;

    &[open] .spoiler-header .svg {
      transform: rotate(180deg);
    }
  }

  .spoiler-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;

    .text {
      font-weight: 700;
      font-size: 1.25rem;
      line-height: 1.625rem;
      color: #373635;
      text-transform: uppercase;
      user-select: none;

      mark {
        color: #009AE3;
        background-color: transparent;
      }
    }

    .svg {
      margin-right: 1.25rem;
    }
  }

  .spoiler-main {
    margin-top: .75rem;
  }

  .inner-spoiler-wrapper {
    position: relative;
    overflow: hidden;

    &.closed {
      --isw-mah: 6rem;
      max-height: var(--isw-mah);

      &:after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        height: var(--isw-mah);
        pointer-events: none;
        background: linear-gradient(0, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, 0) 100%);
      }
    }
  }

  .inner-spoiler-button {
    margin-top: .75rem;
    padding-inline: 0;

    &:not([hidden]) {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: .5rem;
    }

    border: none;
    background-color: transparent;
    font-weight: 700;
    font-size: .875rem;
    line-height: 1rem;
    color: #009AE3;

    &.hide .svg {
      transform: rotate(180deg);
    }

    &.show .svg {
      transform: rotate(0);
    }
  }

  .props {
    .props-grid {
      display: grid;
      grid-template-columns: auto auto;
      gap: 1rem .5rem;

      .cell {
        font-weight: var(--c-fw, 400);
        font-size: 1rem;
        line-height: 1.25;
        color: var(--c-c, #373635);

        &:nth-child(4n - 2) {
          --c-fw: 500;
          --c-c: #009AE3;
        }
      }
    }
  }

  .info,
  .delivery {
    overflow: hidden;
    hyphens: auto;
    color: #373635;

    strong, b {
      font-weight: 700;
    }

    p, ol, ul {
      margin-block: 1rem;
    }

    p, ol, ul {
      font-weight: 400;
      font-size: 1rem;
      line-height: 1.25;
    }

    ol, ul {
      padding-left: 1.5rem;

      ol, ul {
        margin-block: 0;
      }

      li {
        margin-block: .375rem;
      }
    }

    a {
      color: #009AE3;
      text-decoration: none;

      span {
        color: #009AE3 !important;
      }
    }
  }

  .delivery .spoiler-main strong,
  .delivery .spoiler-main b {
    color: #009AE3;
  }

  .comment {
    margin-bottom: 1.25rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid #D9D9D9;

    .comment-header {
      display: flex;
      justify-content: flex-start;
      align-items: flex-end;
      gap: 1rem;

      .name {
        font-weight: 700;
        font-size: 1rem;
        color: #373635;
        line-height: 1.25rem;
      }

      .date {
        font-weight: 300;
        font-size: .875rem;
        color: #9EA8B0;
        line-height: 1.125rem;
      }
    }

    .comment-main {
      overflow: hidden;

      p, img {
        margin-block: 0.75rem;
      }

      p {
        font-weight: 400;
        font-size: 1rem;
        line-height: 1.25rem;
        color: #373635;
      }

      img {
        margin-inline: auto;
        max-width: 100%;
        height: auto;
      }
    }
  }

  .form-comment {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: .75rem;

    .title {
      font-weight: 700;
      font-size: 1.125rem;
      line-height: 1.5rem;
      color: #27282B;
    }

    .fieldset {
      align-items: flex-start;
      gap: .375rem;
    }

    .label {
      font-weight: 400;
      font-size: .875rem;
      line-height: 1.125rem;
      color: #8F8F8F;
    }

    .input {
      padding-inline: 1.25rem;
    }

    .button {
      margin-top: .25rem;
    }
  }
}

.section-recommendations {
  overflow: hidden;
  padding-top: 1rem;
  padding-bottom: var(--section-recommendations--pb, calc(var(--catalog-detail-button-buy-wrapper--h) + .875rem));
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 1rem;

  .main.catalog-detail:has(.button-buy-wrapper[hidden]) & {
    --section-recommendations--pb: .875rem;
  }
}

/* убрать полосу (border-bottom) под блоком наличия товара */
.availability.bordered-rows .row { border-bottom: none; }