/* Keep carousel controls clear of the product artwork on narrow screens. */
@media (max-width: 760px) {
  html.surin-redesign .surin-hero .hero-controls {
    position: relative;
    inset: auto;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-block-start: -10px;
    padding-block-end: 10px;
  }

  html.surin-redesign .surin-hero .hero-pagination {
    gap: 0;
    background: var(--surface-2);
  }

  html.surin-redesign .surin-hero .hero-pagination button {
    width: clamp(32px, 8vw, 44px);
  }

  html.surin-redesign .surin-hero .hero-pagination button::after {
    left: calc(50% - 3px);
  }

  html.surin-redesign .surin-hero .hero-pagination button[aria-pressed="true"]::after {
    left: calc(50% - 9px);
    transform: none;
  }

  html.surin-redesign .surin-hero .hero-control-end {
    align-self: center;
  }
}

/* Leave room for the carousel controls on shorter laptop displays. */
@media (min-width: 761px) and (max-height: 680px) {
  html.surin-redesign .surin-hero .hero-inner {
    min-height: clamp(390px, calc(100svh - 190px), 490px);
    padding-block: 26px 72px;
  }
}


@media (max-width: 760px) and (min-height: 761px) {
  html.surin-redesign .surin-hero .hero-inner {
    min-height: 552px;
    padding-block: 18px 334px;
  }

  html.surin-redesign .surin-hero .hero-copy p {
    margin-block: 8px 10px;
  }

  html.surin-redesign .surin-hero .hero-slide:not(.hero-slide--test) .hero-media {
    height: 324px;
  }
}

/* Keep the homepage's return control clear of banners, product cards and other links. */
html.surin-redesign.html-home-page .sr-site-footer .footer-bottom-inner > .go-to-top {
  position: absolute;
  right: 14px;
  bottom: 16px;
}

/* Keep the rotated 10G backdrop within the card around the existing photo. */
html.surin-redesign .surin-home .storefront-banner--10g .storefront-banner-halo {
  width: min(88%, 300px);
}

@media (max-width: 767px) {
  html.surin-redesign .surin-home .storefront-banner--10g .storefront-banner-halo {
    width: min(88%, 236px);
  }
}