:root {
  --site-gutter: clamp(1rem, 3vw, 5rem);
  --site-header-height: 81px;
}

.site-container {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin-inline: auto;
  padding-inline: var(--site-gutter);
}

.product-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  gap: 1.75rem;
}
.product-results-grid > * { min-width: 0; }

.site-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: calc(100vh - var(--site-header-height));
  min-height: calc(100svh - var(--site-header-height));
  overflow: hidden;
  color: #fff;
  background: #172131;
  touch-action: pan-y pinch-zoom;
}
.site-hero__images,
.site-hero__images img,
.site-hero__shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.site-hero__images { z-index: -3; }
.site-hero__images img {
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 900ms ease;
}
.site-hero__images img.is-active { opacity: 1; }
.site-hero__shade {
  z-index: -2;
  background: linear-gradient(90deg, rgba(5, 14, 29, .88) 0%, rgba(5, 14, 29, .55) 44%, rgba(5, 14, 29, .12) 100%),
    linear-gradient(0deg, rgba(5, 14, 29, .65), transparent 40%);
}
.site-hero__content { display: flex; align-items: center; padding-block: clamp(3rem, 8vh, 8rem); }
.site-hero__copy { width: min(100%, 64rem); animation: hero-reveal 600ms ease both; }
.site-hero__eyebrow { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.75rem; font-size: .8rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #e2e8f0; }
.site-hero__eyebrow > span { display: block; width: 2rem; height: 2px; background: var(--accent); }
.site-hero__title { max-width: 16ch; font-size: clamp(3rem, 5.5vw, 7.5rem); font-weight: 800; line-height: 1.04; letter-spacing: -.045em; overflow-wrap: anywhere; text-wrap: balance; }
.site-hero__title > span { display: block; }
.site-hero__title-accent { width: fit-content; max-width: 100%; background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-stroke: .4px rgba(255,255,255,.28); filter: brightness(1.6) drop-shadow(0 2px 8px rgba(0,0,0,.12)); }
.site-hero__description { max-width: 38rem; margin-top: 1.75rem; font-size: clamp(1rem, 1.25vw, 1.4rem); line-height: 1.65; color: #e2e8f0; overflow-wrap: anywhere; }
.site-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; }
.site-hero__button { display: inline-flex; justify-content: center; align-items: center; gap: .75rem; min-height: 54px; padding: .9rem 1.75rem; border-radius: 999px; font-size: .95rem; font-weight: 700; text-align: center; transition: background-color 180ms, border-color 180ms; }
.site-hero__button svg { flex-shrink: 0; }
.site-hero__button--primary { background: var(--primary); border: 1px solid rgba(255,255,255,.24); color: white; }
.site-hero__button--primary:hover { background: #162f73; border-color: rgba(255,255,255,.6); }
.site-hero__button--secondary { border: 1px solid rgba(255,255,255,.5); background: rgba(255,255,255,.06); color: #fff; backdrop-filter: blur(6px); }
.site-hero__button--secondary:hover { background: rgba(255,255,255,.18); border-color: white; }
.site-hero__controls { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-bottom: 1.5rem; }
.site-hero__pagination { display: flex; align-items: center; flex-wrap: wrap; gap: 1.25rem; min-width: 0; }
.site-hero__count { font-size: .9rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.site-hero__total { color: #cbd5e1; font-weight: 400; }
.site-hero__dots { display: flex; flex-wrap: wrap; gap: .25rem; }
.site-hero__dot { display: grid; place-items: center; width: 32px; height: 44px; }
.site-hero__dot > span { width: 8px; height: 8px; border-radius: 99px; background: rgba(255,255,255,.45); transition: width 220ms, background-color 220ms; }
.site-hero__dot[aria-current] > span { width: 28px; background: white; }
.site-hero__navigation { display: flex; gap: .5rem; flex-shrink: 0; }
.site-hero__control { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; background: rgba(5,14,29,.15); color: white; backdrop-filter: blur(8px); transition: background-color 180ms; }
.site-hero__control:hover { background: rgba(255,255,255,.2); }
.site-hero :is(a, button):focus-visible { outline: 3px solid white; outline-offset: 4px; }
.site-hero:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }

@keyframes hero-reveal { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

@media (min-width: 1024px) {
  .site-hero__content, .site-hero__controls { padding-inline: max(var(--site-gutter), 6rem); }
  .site-hero__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; }
  .site-hero__arrow--previous { left: 1.5rem; }
  .site-hero__arrow--next { right: 1.5rem; }
}
@media (max-width: 639px) {
  .site-hero__shade { background: linear-gradient(90deg, rgba(5,14,29,.82), rgba(5,14,29,.42)), linear-gradient(0deg, rgba(5,14,29,.7), transparent); }
  .site-hero__title { font-size: clamp(2.6rem, 11vw, 4rem); }
  .site-hero__eyebrow { font-size: .7rem; letter-spacing: .12em; }
  .site-hero__button { padding-inline: 1.25rem; }
  .site-hero__controls { flex-wrap: wrap; }
  .site-hero__pagination { gap: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .site-hero__copy { animation: none; }
  .site-hero__images img, .site-hero__dot > span, .site-hero__button, .site-hero__control { transition: none; }
}


.marquee {
  position: relative;
  overflow: hidden;
}

.marquee::before,
.marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 48px;
  pointer-events: none;
  z-index: 1;
}

.marquee::before {
  left: 0;
  background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0));
}

.marquee::after {
  right: 0;
  background: linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0));
}

.marquee-track {
  display: flex;
  gap: 0.75rem;
  width: max-content;
  animation: marquee-scroll 55s linear infinite;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.marquee-track--slow {
  animation-duration: 85s;
}

.marquee-track--reverse {
  animation-direction: reverse;
}

.marquee:hover .marquee-track {
  animation-play-state: paused;
}

@keyframes page-flip-next {
  0% {
    transform: perspective(1200px) rotateY(0deg);
    opacity: 0.7;
  }
  100% {
    transform: perspective(1200px) rotateY(-95deg);
    opacity: 0;
  }
}

@keyframes page-flip-prev {
  0% {
    transform: perspective(1200px) rotateY(0deg);
    opacity: 0.7;
  }
  100% {
    transform: perspective(1200px) rotateY(95deg);
    opacity: 0;
  }
}

.page-flip-next {
  transform-origin: left center;
  animation: page-flip-next 0.45s ease-in-out;
}

.page-flip-prev {
  transform-origin: right center;
  animation: page-flip-prev 0.45s ease-in-out;
}

@keyframes marquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none;
  }
}

@media (max-width: 768px) {
  .marquee {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    cursor: grab;
    scrollbar-width: none;
  }
  .marquee:active {
    cursor: grabbing;
  }
  .marquee::-webkit-scrollbar {
    display: none;
  }
  .marquee-track {
    animation: none;
  }
}