/* ============================================================================
   АДАПТАЦИЯ ПОД МОБИЛЬНЫЕ И ЭФФЕКТ НАЖАТИЯ НА КНОПКИ
   ==========================================================================*/

@media (max-width: 640px) {
  .page-shell {
    padding: 22px 14px max(36px, env(safe-area-inset-bottom));
  }

  .shop-hero h1 {
    font-size: 21px;
  }

  .shop-hero__lead {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.65;
  }

  .products {
    margin-top: 18px;
  }

  .products__layer {
    gap: 10px;
  }

  .product-category-tabs {
    margin-top: 15px;
  }

  .product-category-tabs__button {
    min-height: 32px;
    padding: 0 13px;
    font-size: 13px;
  }

  .shop-section-divider {
    margin-top: 28px;
  }

  .shop-footer {
    margin-top: 24px;
  }

  .product-card {
    padding: 15px 14px 14px 18px;
    border-radius: 11px;
  }

  .product-card h2 {
    font-size: 20px;
  }

  .product-card__meta {
    font-size: 14px;
  }

  .benefits {
    gap: 6px;
    margin-top: 14px;
  }

  .benefits li {
    padding-left: 19px;
    font-size: 14px;
  }

  .promo__lead {
    font-size: 14px;
  }

  .buy-button,
  .promo__button {
    min-height: 44px;
    margin-top: 14px;
    font-size: 15px;
  }

  .buy-button {
    min-height: 48px;
    font-size: 16px;
  }

  .product-card__availability {
    font-size: 12px;
  }
}

/* ---------------------------------------------------------------------------
   Оптическая кромка кнопок: первый слой — сплошной цвет кнопки,
   второй виден только в одном прозрачном пикселе рамки.
   --------------------------------------------------------------------------- */
.buy-button:not(:disabled),
.promo__button:not(:disabled),
.payment-methods__continue:not(:disabled) {
  --liquid-button-fill: var(--accent);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--liquid-button-fill), var(--liquid-button-fill)) padding-box,
    var(--metal-strong) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .32),
    inset 0 -1px 0 rgba(0, 0, 0, .28),
    inset 0 0 0 999px rgba(0, 0, 0, 0);
  touch-action: pan-y;
  transform-origin: var(--press-x, 50%) var(--press-y, 50%);
  transition: box-shadow 200ms ease, color 200ms ease, transform 300ms ease;
}

.buy-button:active:not(:disabled),
.promo__button:active:not(:disabled),
.payment-methods__continue:active:not(:disabled),
.buy-button.is-pressing,
.promo__button.is-pressing,
.payment-methods__continue.is-pressing {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .32),
    inset 0 -1px 0 rgba(0, 0, 0, .28),
    inset 0 0 0 999px rgba(0, 0, 0, .22);
  transform: scale(.98) scaleX(.98979592);
}

.product-category-tabs__button:not(:disabled),
.payment-method {
  touch-action: pan-y;
  transform-origin: var(--press-x, 50%) var(--press-y, 50%);
}

.product-category-tabs__button:active:not(:disabled),
.payment-method:active,
.product-category-tabs__button.is-pressing,
.payment-method.is-pressing {
  transform: scale(.98) scaleX(.98979592);
}