@media (max-width: 860px) {
  .section {
    padding: 82px 0;
  }

  .header-main {
    min-height: 82px;
    grid-template-columns: 1fr auto;
  }

  .site-logo {
    height: 72px;
  }

  .site-logo img {
    width: auto;
    height: 64px;
    max-height: none;
  }

  .site-nav {
    position: fixed;
    z-index: 98;
    top: 115px;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow-y: auto;
    padding: 25px 20px 40px;
    background: var(--white);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-12px);
    justify-self: stretch;
    transition: opacity 180ms ease, transform 180ms ease;
  }

  .site-nav.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .site-nav ul {
    display: block;
  }

  .site-nav li {
    border-bottom: 1px solid var(--line);
  }

  .site-nav a {
    width: 100%;
    padding: 17px 4px;
    font-size: 0.95rem;
  }

  .site-nav a::after {
    display: none;
  }

  .header-actions {
    grid-column: 2;
    grid-row: 1;
  }

  .header-actions .search-action {
    display: none;
  }

  .menu-button {
    display: inline-flex;
  }

  .hero,
  .hero__track,
  .hero__slide,
  .hero__inner {
    min-height: 650px;
  }

  .hero__image {
    object-position: 65% center;
  }

  .hero__slide::after {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.92) 50%, rgba(255, 255, 255, 0.45) 100%);
  }

  .hero__slide--products::after {
    background: linear-gradient(90deg, rgba(248, 251, 255, 0.99) 0%, rgba(248, 251, 255, 0.95) 59%, rgba(232, 242, 255, 0.55) 100%);
  }

  .hero__content {
    width: 72%;
  }

  .hero-products {
    right: -240px;
    width: 520px;
    opacity: 0.22;
    transform: translateY(-50%) scale(0.88);
  }

  .category-grid {
    grid-template-columns: 1fr;
  }

  .category-card {
    min-height: 360px;
  }

  .quality-layout,
  .product-layout {
    grid-template-columns: 1fr;
  }

  .quality-layout {
    gap: 60px;
  }

  .product-gallery {
    position: static;
  }

  .product-hero-visual {
    min-height: 520px;
  }

  .product-hero-image {
    min-height: 520px;
  }

  .research-banner {
    grid-template-columns: auto 1fr;
  }

  .research-banner .button {
    grid-column: 2;
    justify-self: start;
  }

  .reviews-layout {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .reviews-overview {
    position: static;
  }

  .footer-newsletter {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .footer-main {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 38px;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  .container {
    width: min(calc(100% - 28px), var(--container));
  }

  .section,
  .section--compact {
    padding: 68px 0;
  }

  .legal-strip {
    padding: 8px 0;
    font-size: 0.57rem;
  }

  .legal-strip__inner {
    gap: 8px;
  }

  .announcement-track {
    height: 1.6em;
    min-width: 0;
  }

  .header-main {
    min-height: 76px;
  }

  .site-logo img {
    width: auto;
    height: 58px;
  }

  .icon-button {
    width: 40px;
    height: 40px;
  }

  .site-nav {
    top: 107px;
  }

  .gate-card {
    padding: 30px 24px;
  }

  .gate-card h2 {
    font-size: 1.65rem;
  }

  .gate-actions {
    grid-template-columns: 1fr;
  }

  .hero,
  .hero__track,
  .hero__slide,
  .hero__inner {
    min-height: 780px;
  }

  .hero__image {
    position: absolute;
    height: 100%;
    object-position: 67% center;
  }

  .hero__slide::after {
    display: block;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.93) 0%, rgba(255, 255, 255, 0.89) 58%, rgba(255, 255, 255, 0.97) 100%);
  }

  .hero__inner {
    display: flex;
    background: transparent;
  }

  .hero__content {
    width: 100%;
    padding: 60px 0 112px;
  }

  .hero__slide--products::after {
    background: rgba(248, 251, 255, 0.91);
  }

  .hero-products {
    display: none;
  }

  .hero__controls {
    bottom: 24px;
  }

  .display-title {
    font-size: clamp(2.25rem, 11vw, 3rem);
  }

  .hero__actions .button {
    width: 100%;
  }

  .trust-grid,
  .product-grid,
  .catalogue-grid {
    grid-template-columns: 1fr;
  }

  .trust-item,
  .trust-item:first-child,
  .trust-item:nth-child(3) {
    border: 0;
  }

  .section-heading {
    display: block;
  }

  .section-heading .text-link {
    margin-top: 22px;
  }

  .category-card {
    min-height: 340px;
  }

  .category-card__content {
    padding: 24px;
  }

  .quality-panel {
    min-height: 440px;
  }

  .coa-card {
    top: 55px;
    right: 22px;
    left: 22px;
    padding: 24px;
  }

  .research-banner {
    display: block;
    padding: 34px 26px;
  }

  .research-banner__icon {
    margin-bottom: 22px;
  }

  .research-banner .button {
    margin-top: 22px;
  }

  .page-hero {
    padding: 62px 0 58px;
  }

  .page-hero::after {
    opacity: 0.55;
  }

  .catalogue-toolbar {
    grid-template-columns: 1fr;
  }

  .catalogue-search {
    width: 100%;
  }

  .product-detail {
    padding: 40px 0 72px;
  }

  .product-hero-visual {
    min-height: 430px;
  }

  .product-hero-image {
    min-height: 430px;
  }

  .product-hero-visual::before {
    width: 340px;
    height: 340px;
  }

  .product-hero-visual::after {
    width: 250px;
    height: 250px;
  }

  .product-hero-visual .vial {
    transform: translateY(0) scale(0.83);
  }

  .product-facts {
    grid-template-columns: 1fr 1fr;
  }

  .product-fact:last-child {
    grid-column: 1 / -1;
  }

  .purchase-row,
  .purchase-notes {
    grid-template-columns: 1fr;
  }

  .quantity-selector {
    min-height: 50px;
    grid-template-columns: 44px 1fr 44px;
  }

  .product-card__add {
    min-height: 44px;
  }

  .filter-button {
    min-height: 42px;
  }

  .footer-main {
    padding: 60px 0 48px;
    grid-template-columns: 1fr 1fr;
    gap: 42px 26px;
  }

  .footer-newsletter {
    padding: 34px 0;
  }

  .newsletter-form {
    grid-template-columns: 1fr;
  }

  .newsletter-form button {
    width: 100%;
  }

  .reviews-grid {
    grid-template-columns: 1fr;
  }

  .review-card:first-child {
    grid-column: auto;
  }

  .footer-column:last-child {
    grid-column: 1 / -1;
  }

  .footer-column {
    padding-top: 0;
  }

  .footer-bottom {
    display: block;
  }

  .footer-bottom > span {
    display: block;
  }

  .footer-bottom > span + span {
    margin-top: 7px;
  }

  .toast {
    right: 14px;
    bottom: 14px;
    left: 14px;
  }
}