@media (max-width: 1024px) {
  .esurf-grid--4,
  .esurf-specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .esurf-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (max-width: 767px) {
  body.esurf-home {
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom));
  }

  .esurf-shell,
  .site-container,
  .content-container {
    width: min(calc(100% - 1.25rem), var(--es-shell));
  }

  .esurf-topbar__inner {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.25rem;
    padding-block: 0.45rem;
  }

  .esurf-topbar__message {
    display: none;
  }

  .esurf-topbar__controls {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(0, 1fr) minmax(6.5rem, 0.55fr);
    gap: 0.5rem;
  }

  .esurf-selector,
  .esurf-selector details,
  .esurf-selector__summary {
    width: 100%;
  }

  .esurf-selector--language .esurf-selector__menu {
    right: auto;
    left: 0;
  }

  .esurf-hero {
    min-height: 100svh;
  }

  .esurf-hero::after {
    background:
      linear-gradient(0deg, rgba(3, 8, 15, 0.94) 0%, rgba(3, 8, 15, 0.5) 66%, rgba(3, 8, 15, 0.2) 100%),
      linear-gradient(90deg, rgba(3, 8, 15, 0.54), transparent);
  }

  .esurf-hero__video {
    object-position: center center;
  }

  .esurf-hero__content {
    align-items: flex-end;
    padding-block: 6rem 7rem;
  }

  .esurf-hero__copy p:not(.esurf-eyebrow) {
    font-size: 1rem;
  }

  .esurf-hero__video-toggle {
    right: 0.75rem;
    bottom: 0.75rem;
  }

  .esurf-product-carousel {
    --es-carousel-card-width: min(82vw, 325px);
    padding-block: 3.75rem 4.5rem;
  }

  .esurf-product-carousel__header {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .esurf-product-carousel__controls {
    justify-content: flex-end;
  }

  .esurf-product-carousel__viewport {
    padding-inline: 1rem;
  }

  .esurf-product-card__body {
    min-height: 250px;
  }

  .esurf-grid--2,
  .esurf-grid--3,
  .esurf-grid--4,
  .esurf-global-compliance__inner,
  .esurf-certificate-grid {
    grid-template-columns: 1fr;
  }

  .esurf-specs {
    grid-template-columns: 1fr;
  }

  .esurf-spec {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
  }

  .esurf-spec dd {
    margin: 0;
    text-align: right;
  }

  .esurf-wholesale-float {
    right: max(0.75rem, env(safe-area-inset-right));
    bottom: calc(0.75rem + env(safe-area-inset-bottom));
    left: auto;
    display: block;
    width: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  body.esurf-site .esurf-support-chat__toggle {
    width: 58px;
    min-width: 58px;
    height: 58px;
    min-height: 58px;
  }

  .esurf-support-chat__panel {
    right: 0;
    width: min(340px, calc(100vw - 1.5rem));
    max-height: calc(100svh - 7rem);
  }

  .woocommerce table.shop_table_responsive tr,
  .woocommerce-page table.shop_table_responsive tr {
    display: grid;
  }

  .woocommerce-checkout #payment ul.payment_methods,
  .woocommerce-checkout #payment div.form-row {
    padding-inline: 0.8rem;
  }
}

@media (max-width: 420px) {
  .esurf-title {
    font-size: clamp(2rem, 12vw, 3.25rem);
  }

  .esurf-hero__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .esurf-hero__actions .esurf-button {
    width: 100%;
  }

  .esurf-selector__summary {
    min-width: 0;
    padding-inline: 0.65rem;
    font-size: 0.78rem;
  }

  .esurf-selector--language .esurf-selector__summary {
    min-width: 0;
  }

  .esurf-product-carousel {
    --es-carousel-card-width: min(84vw, 304px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .esurf-grainient-background {
    animation: none !important;
  }

  .esurf-product-card,
  .esurf-product-card:hover,
  .esurf-product-card__link span {
    transition: none !important;
    transform: none !important;
  }
}
