/* Adaptive (общий для всех страниц) */
@media (width <= 1200px) {
  /* ... */
}

@media (width <= 1024px) {
  /* ... */
}

@media (width <= 900px) {
  /* ... */
}

@media (width <= 768px) {
  /* Поддержка уменьшенного движения */
  @media (prefers-reduced-motion: reduce) {
    .peek__slider .splide__slide {
      transition: none;
    }
  }
  .drips__bg,
  .drips-peek2 .drips-peek2__cell--bg::after {
      display: none;
  }

  .hero {
    display: none;
  }

  .hero-adaptive {
    position: relative;

    display: block;
    padding-top: 5vw;
      padding-bottom: 18px;
  }

  .hero__adaptive-media {
    position: relative;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    z-index: 0;

    display: block;

    width: 100%;
    aspect-ratio: 80 / 84;
    overflow: hidden;

    border-radius: 24px 163px 24px 24px;
  }

  .hero__adaptive-img {
    position: absolute;
    inset: 0;
    z-index: 1;

    display: block;

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

  /* Контент приклеен к низу и поверх */
  .hero__adaptive-content {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;

    z-index: 2;

    box-sizing: border-box;
    width: 100%;
    padding: 25px 55px;

    background: #f9f2ec;

    opacity: 0;
    transform: translateY(40px);
    will-change: transform, opacity;

    transition: transform 2s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.5s;
  }
  .drip-card__title {
      font-size: 28px;
  }
  .drip-card {
      padding: 20px 30px;
  }
  .drip-card__desc {
      margin-bottom: 12px;
  }
  .drip-card__foot .btn {
      padding: 7px 28px;
      font-size: 17px;
      border-radius: 39px;
      min-height: 0;
  }
  .drip-card__price {
      font-size: 19px;
      color: #555252;
  }
  .splide .splide__pagination {
      padding: 0;
  }
  .who__list {
    gap: 12px;
  }
  .who__list br {
      display: none;
  }
  .who__list li {
      gap: 11px;
      color: #393a34;
      font-weight: 300;
      font-size: 16px;
  }

  .hero__adaptive-content.in {
    opacity: 1;
    transform: translateY(0);
  }

  .hero__brand {
    max-width: 60vw;
    margin-bottom: 26px;
  }

  .hero__title {
    font-weight: 600;
    font-size: 20px;
  }

  .hero__subtitle {
    font-size: 16px;
  }

  .oasis__bg {
    width: min(100%, clamp(300px, 80vw, 580px));
  }

  .oasis__text {
    font-size: 18px;
    line-height: 130%;
  }

  .oasis__down {
    width: 54px;
    height: 24px;
  }

  /* НАЧАЛО ДВОЙНОЙ СЛАЙДЕР */

  /* Заголовки */
  .drips-peek2__desktop-title {
    display: none;
  }

  .drips-peek2__adaptive-title {
    display: flex;
    justify-content: center;
    align-items: center;

    margin: 0 0 16px;

    text-align: center;
  }

  /* Сетка — в столбик */
  .drips-peek2__grid {
    grid-template-columns: 1fr;
      gap: 75px;
  }

  .drips-peek2__cell {
    align-items: center;
  }

  /* Верхний (левый) слайдер — один слайд по центру, без scale */
  .peek__slider .splide__slide {
    margin: 0 auto !important;

    opacity: 1 !important;
    transform: none !important;
  }

  .peek__slider .splide__track {
    margin-inline: auto;
  }

  .peek__slider .splide__list,
  .cards__slider .splide__list {
    margin: 0 auto !important;
    padding: 0;
  }

  /* Фон под флаконом, как в макете */
  .drips-peek2__cell--bg {
    min-height: 396px;

    background-image: url("/wp-content/themes/gardenrecovery/assets/img/drips/bgdrips.png");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 253px 396px; /* w × h */
  }

  /* Нижний (правый) слайдер — центр и компакт */
  .cards__wrap {
    width: 100%;
    max-width: 400px;
    margin-inline: auto;
  }

  .cards__slider .splide__track {
    margin-inline: auto;
  }

  .cards__slider .splide__slide {
    width: 100%;
    margin: 0;
  }

  .drip-card {
    max-width: 300px;
    margin: 10px auto;

    box-shadow: var(--shadow-soft, 2px 2px 24px rgb(0 0 0 / 6%));
  }

  /* Пагинация и стрелки — по центру между ними */
  .cards__controls .splide__pagination {
    display: flex;
    order: 2;
  }

  .cards__prev {
    order: 1;

    width: 15px;
    height: auto;
    margin: 0;
  }

  .cards__next {
    order: 3;

    width: 15px;
    height: auto;
    margin: 0;
  }

  /* КОНЕЦ ДВОЙНОЙ СЛАЙДЕР   */

  .peek-card__media {
    display: flex;
    justify-content: center;
    align-items: flex-end;

    min-height: 240px;
  }

  .peek-card__media img {
    width: 190px;
    margin: 0 auto;
    object-fit: contain;
  }

  .who {
    padding: 66px 0 83px;
  }

  .who__left {
    margin-left: 24px;
  }

  .who__title {
    max-width: 190px;

    font-size: 32px;
  }

  .who__list {
    gap: 11px;
  }

  .who__list li {
    max-width: 90vw;

    font-size: 16px;
    line-height: 21px;
    column-gap: 15px;
  }

  .who__list li::before {
    font-weight: 200;
    font-size: 33px;
    line-height: 48px;
  }

  .team-swiper .swiper-slide {
    width: 240px;
  }

  .team__slider {
      margin-top: 0;
      padding-bottom: 48px;
  }
  .team__head {
      margin-left: 27px;
      padding-left: 16px;
      padding-bottom: 2px;
      margin-bottom: 34px;
  }
  .team__subtitle {
      margin-bottom: 19px;
  }

  .team-card__photo {
    width: 167px;
      top: 23px;
  }

  .team-card__name {
    margin: 106px 0 0;
      min-height: 29px;
  }
  .team-card {
      gap: 4px;
      padding-bottom: 19px;
  }

  .plans__sub {
    max-width: 266px;
  }

  .plans__pag {
    justify-content: flex-end;

    padding: 20px;
  }

  .plans {
      padding-top: 91px;
  }
  .plan__list::before {
    display: none;
  }

  .plans__head {
    margin: 0 26px 26px;
    border-left: var(--line);
    padding-left: 16px;
  }

  .amen__row {
    padding: 10vw 0;
  }
  .amen__title,
  .amen__list li {
      padding-left: 11px;
  }
  .amen__list li {
      font-size: 16px;
      font-weight: 300;
      color: #393a34;
      line-height: 21px;
      gap: 12px;
  }

  .m {
    border-radius: 17px;
      box-shadow: 1.67px 2.23px 6.14px 0px #635C5433, 7.81px 8.37px 11.16px 0px #635C542B, 16.74px 18.97px 15.07px 0px #635C541A, 30.13px 33.48px 17.86px 0px #635C5408, 46.87px 51.9px 19.53px 0px #635C5400;

  }

  .steps__title {
    margin-bottom: 43px;
  }
  .steps__head {
      margin-bottom: 0;
  }
  .step__badge {
      width: 42px;
      height: 42px;
      font-size: 25px;
      top: 6px;
      left: -7px;
  }
  .step {
      background-image: url(../img/stepbg.svg);
  }
  .step__icon svg {
      width: 85%;
      margin: 0 auto;
  }
  .faq-inst-wrap {
      padding-top: 84px;
  }

  .faq__grid {
    margin-bottom: 30px;
      margin: 0 20px 41px;
  }

  .faq-item {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
  .faq__head {
      padding-left: 13px;
      margin-left: 6px;
      margin-bottom: 0;
      padding-top: 12px;
      padding-bottom: 12px;
  }
  .faq__title {
      font-size: 28px;
  }
  .faq__sub {
      margin-top: 16px;
      font-weight: 400;
      color: #555252;
  }
  .faq-q {
      padding-right: 11px;
  }
  .faq-q > span {
      padding-left: 0;
  }
  .faq__list {
      gap: 10px;
  }

  .faq-q {
    display: flex;
    justify-content: space-between; /* как просили */
    align-items: center;

    gap: 12px;

    width: 100%;

    padding: 15px 30px;

    border: 1px solid transparent;
    border-radius: 13px;
    background: #e6e6e6;

    font-family: Manrope, sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 130%;
    text-align: left; /* текст слева */
    color: var(--clr-dark-700);

    cursor: pointer;
      padding-right: 11px;
  }

  /* чтобы текст занимал всё доступное, а иконка не сжималась */
  .faq-q > span {
    flex: 1 1 auto;
  }

  .faq-q .chev {
    flex: 0 0 auto;
      width: 20px;
      height: 17px;
  }

  .faq-a > * {
    margin: 0;
    padding: 15px 36px;

    font-weight: 300;
    font-size: 15px;
    line-height: 130%;
    color: var(--clr-dark-700);
  }

  .faq__btn-top {
    display: none;
  }

  .faq__btn-bottom {
    display: inline-flex;
    float: right;
    margin-left: 6.8vw;
    margin-right: 6.8vw;
  }

  .amen__list {
    margin-bottom: 22px;
  }

  /* только внутри inst-секции */
  .inst__section .container {
    display: grid; /* локально превращаем контейнер в grid */

    min-width: 0;
  }

  .inst__section .inst__box {
    place-self: center; /* центр по обеим осям */

    margin: 0; /* на случай прежних auto/!important */
  }

  .inst__box {
    flex-direction: column-reverse;
    gap: 32px;

    overflow: visible;
    padding-bottom: 50px;
    padding-top: 90px;
  }

  .ig-card {
    max-width: 255px;

      border-radius: 33px;

    /* margin: 50px auto 120px; */
  }
  .ig-card__arrow {
      display: none;
  }
  .lg-card__arr {
      display: block;
      position: relative;
      bottom: 10px;
      right: 15px;
  }
  .ig-card__text {
      font-size: 24px;
  }

  .ig-phone {
    --w: 155px;
    --feed-x: 104%;
    --feed-x1: 0%;
    --feed-y0: 0%;
    --feed-y1: 100%;
    --feed-size: 147%;
    top: -60px;
    left: 25%;
  }

  .ig-phone__screen {
    inset: 17px 7px 0 0;

    transform: translateZ(0);
    will-change: background-position, transform;
  }

  .loy {
    /* позиция стека — если нужно */
    --stack-w: 160px;
    --stack-top: 15px;
    --stack-left: 24%;
    --stack-rot: -10deg;
  }

  /* Старт: слегка раскрытый веер (mobile only) + задаём цели */
  .loy__card {
    transform: translateZ(0);
  }

  .loy__card--3 {
    --x0: -10px;
    --y0: 10px;
    --r0: -8deg; /* старт */
    --x1: 10px;
    --y1: -20px;
    --r1: 0deg;
    --s1: 0.7; /* цель */
  }

  .loy__card--2 {
    --x0: 0px;
    --y0: 0px;
    --r0: 0deg;
    --x1: -40px;
    --y1: -60px;
    --r1: -40deg;
    --s1: 0.7;
  }

  .loy__card--1 {
    --x0: 10px;
    --y0: -10px;
    --r0: 8deg;
    --x1: 35px;
    --y1: 45px;
    --r1: 20deg;
    --s1: 0.7;
  }

  /* Fallback запуска на мобильных: .in/.out от IO */
  .ig-card.in .ig-phone__screen {
    background-position: var(--feed-x1) var(--feed-y1);
  }

  .ig-card.in .loy__card {
    transform: translate(var(--x1), var(--y1)) rotate(var(--r1))
      scale(var(--s1));
  }

  .ig-card.in .loy__card--1 {
    filter: drop-shadow(0 4px 10px rgb(0 0 0 / 14%));

    transition-delay: 80ms;
  }

  .ig-card.in .loy__card--2 {
    filter: drop-shadow(0 8px 18px rgb(0 0 0 / 18%));

    transition-delay: 0ms;
  }

  .ig-card.in .loy__card--3 {
    filter: drop-shadow(0 6px 14px rgb(0 0 0 / 16%));

    transition-delay: 40ms;
  }

  /* Повторное воспроизведение при обратном скролле (по желанию) */
  .ig-card.out .ig-phone__screen {
    background-position: var(--feed-x) var(--feed-y0);
  }

  .ig-card.out .loy__card {
    transform: translate(var(--x0), var(--y0)) rotate(var(--r0))
      scale(var(--s0));
  }

  /* (опционально) tap-фолбек */
  .ig-card:active .ig-phone__screen {
    background-position: var(--feed-x1) var(--feed-y1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__adaptive-content {
    opacity: 1;
    transform: none;

    transition: none;
  }
}

@media (width <= 600px) {
  .oasis__text {
    font-size: 16px;
    line-height: 1.3;
  }
  .peek__slider {
      overflow: hidden;
  }
  .stats__grid {
      overflow: hidden;
  }
}

@media (width <= 480px) {
  .oasis__bg {
    width: min(100%, clamp(300px, 90vw, 580px));
  }

  .oasis__text {
    font-size: 14px;
    line-height: 1.3;
  }

  .cards\_\_prev {
    order: 1;

    width: 15px;
    height: auto;
    margin: 18px;
  }

  .cards\_\_next {
    order: 3;

    width: 15px;
    height: auto;
    margin: 18px;
  }

  .intro {
    padding: 0;
  }

  .stats {
    padding: 92px 0;
  }

  .stats__title {
    margin-bottom: 70px;
    margin-top: 0;
  }

  .stats__grid {
    padding-bottom: 10vw;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
  }

  .stat__label {
    margin: 0 25px;

    font-size: 15px;
    line-height: 21px;
    text-align: start;
  }
  .consult-lead {
      padding-top: 17px;
  }

  .consult-lead .container {
    padding: 16px;
  }

  .consult-lead__content {
    padding-left: 5vw;
    padding-right: 5vw;
  }

  .consult-lead__form {
    gap: 32px;
  }

  .consult-lead__title {
    font-size: 26px;
  }

  .consult-lead__subtitle {
    max-width: 288px;
      font-size: 16px;
      line-height: 21px;
  }
  .field__input::placeholder {
      color: #555252;
  }
  .field__input {
      height: auto;
      font-size: 16px;
      padding: 7px 25px;
      border-radius: 8px;
      box-shadow: 2.35px 3.14px 13.33px 0px #0000001C inset;
      color: #000000;
      background-color: #ededed;
  }
  .check input {
      display: none;
  }
  .check {
      position: relative;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
  }
  .check span::after {
      content: '';
      position: absolute;
      top: 10px;
      left: 9px;
      display: block;
      width: 22px;
      height: 22px;
      border-radius: 6px;
      box-shadow: 2px 3px 4px 0px #0000001A inset;
      background-color: #d9d9d9;
  }
  .check span {
      font-size: 14px;
      padding-left: 49px;
  }
  .check input:checked + span::before {
      opacity: 1;
  }
  .check span::before {
      content: '';
      position: absolute;
      top: 12px;
      left: 11px;
      display: block;
      width: 18px;
      height: 18px;
      border-radius: 6px;
      box-shadow: 2px 3px 4px 0px #0000001A inset;
      background-color: #555;
      opacity: 0;
      z-index: 1;
  }

  .map-card {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;

    max-width: 93vw;
    margin: 0 auto;
    padding: 30px;

    background-color: #f5f5f5;
    box-shadow: 2.71px 2.71px 9.02px 0px #424B4D33, 11.73px 10.83px 16.24px 0px #424B4D00, 46.01px 44.2px 25.26px 0px #424B4D08, 71.27px 68.56px 27.97px 0px #424B4D00;
      border-radius: 18px;
  }

  .map-card__inner {
    border: none;
    padding-left: 0;
  }

  .map-card__inner p,
  .map-card__inner a {
    font-size: 16px;
    line-height: 22px;
    color: var(--clr-dark-700);
  }

  .map-card__inner--title {
    font-weight: normal;
    font-size: 32px;
    line-height: 35px;
    padding-bottom: 15px;
  }

  .contact__map {
    margin: 16px;

    border: 1px solid #cacaca;
    border-radius: 10px;
    box-shadow: var(--shadow-soft);
  }
  .contact__cards {
      gap: 26px;
  }
  .map-card__contact+.map-card__contact {
      margin-top: 20px;
  }
  .site-footer {
      padding-top: 30px;
      padding-bottom: 42px;
  }
  .site-footer__icon {
      width: 40px;
  }
  .oasis__bg {
      max-width: 104%;
      width: 104%;
      left: 0;
  }
}

@media (width <= 400px) {
  .stats {
    padding: 92px 0;
  }

  .stat__line {
    width: 80%;
  }

  .stats__title {
    margin-bottom: 70px;
    margin-top: 0;
  }

  .stat__number {
    font-size: 35px;
  }

  .stats__grid {
    gap: 10px;
    padding-bottom: 2vw;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
  }

  .stat__label {
    margin: 0 20px;

    font-size: 13px;
    line-height: 21px;
    text-align: start;
    /* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated */
    word-break: break-word;

    hyphens: auto;
    overflow-wrap: break-word;
  }
}

@media (width <= 350px) {
  .hero__adaptive-content {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;

    z-index: 2;

    box-sizing: border-box;
    width: 100%;
    padding: 15px;

    background: #f9f2ec;

    opacity: 0;
    transform: translateY(40px);
    will-change: transform, opacity;

    transition: transform 2s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.5s;
  }

  .hero__brand {
    margin-bottom: 13px;
  }

  .subtitle27 {
    font-size: 14px;
  }

  .oasis__text {
    font-size: 13px;
  }
}