/* Home-only composition; bindHomeSlider measures this same slide + gap step. */
#order.home-slider {
  --home-slide-peek: 160px;
  --home-slide-gap: 20px;
  --home-slide-copy-inset: 48px;
  padding-bottom: 18px;
}

#order .home-slider-viewport {
  position: relative;
  overflow: hidden;
  border-radius: 0 !important;
}

#order .home-slider-track {
  gap: var(--home-slide-gap);
  align-items: stretch;
}

#order .home-slide {
  flex: 0 0 calc(100% - var(--home-slide-peek) - var(--home-slide-gap));
  width: calc(100% - var(--home-slide-peek) - var(--home-slide-gap));
  min-width: 0;
}

#order .home-slide-copy {
  padding-left: var(--home-slide-copy-inset);
}

#order .home-slide-copy p:not(.eyebrow) {
  max-width: 520px;
}

#order .home-slider-controls {
  position: absolute;
  z-index: 3;
  /* Align the visible dot, accounting for its inset inside the hit area. */
  left: calc(var(--home-slide-copy-inset) - 8px);
  bottom: 8px;
  width: max-content;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 44px;
  pointer-events: none;
}

#order .home-slider-dots {
  position: static;
  display: flex;
  gap: 0;
  height: 44px;
}

#order .home-slider-dots button {
  display: grid;
  place-items: center;
  width: 24px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  pointer-events: auto;
}

#order .home-slider-dots button::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  opacity: .5;
  transition: opacity 180ms ease;
}

#order .home-slider-dots button.is-active::after {
  opacity: 1;
}

#order .home-slider-controls button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}

@media (min-width: 481px) and (max-width: 1199px) {
  #order.home-slider { --home-slide-peek: 52px; --home-slide-gap: 16px; --home-slide-copy-inset: 28px; }
  #order .home-slide-copy { width: 82%; max-width: 680px; padding-inline: var(--home-slide-copy-inset); }
}

@media (min-width: 481px) and (max-width: 767px) {
  #order.home-slider { --home-slide-peek: 32px; --home-slide-gap: 12px; --home-slide-copy-inset: 24px; }
  #order .home-slide-copy { width: 100%; padding-inline: var(--home-slide-copy-inset); }
  #order .home-slide-copy h1, #order .home-slide-copy h2 { max-width: 80%; }
  #order .home-slide-copy p:not(.eyebrow) { max-width: 78%; }
}

@media (max-width: 480px) {
  #order.home-slider { --home-slide-peek: 24px; --home-slide-gap: 10px; --home-slide-copy-inset: 16px; padding-bottom: 0; }
  #order .home-slide { height: auto; }
  #order .home-slide-copy { padding: 20px var(--home-slide-copy-inset) 56px; }
  #order .home-slide-copy h1, #order .home-slide-copy h2 { width: 82%; }
  #order .home-slide-copy p:not(.eyebrow) { max-width: 80%; }
}

@media (prefers-reduced-motion: reduce) {
  #order .home-slider-track, #order .home-slider-dots button::after { transition: none; }
}