.htr-hero {
  --ink: #651f29;
  --motion-distance: 115vw;
  --motion-distance-negative: -115vw;
  position: relative;
  width: 100%;
  height: clamp(420px, 49vw, 720px);
  overflow: hidden;
  background: var(--htr-bg);
  color: var(--ink);
  font-family: inherit;
}

.htr-hero__slides,
.htr-hero__slide { height: 100%; }

.htr-hero__slide {
  position: absolute;
  inset: 0;
  isolation: isolate;
  opacity: 0;
  pointer-events: none;
  transition: opacity .05s linear;
}

.htr-hero__slide.is-active,
.htr-hero__slide.is-leaving { opacity: 1; }

.htr-hero__slide.is-active { pointer-events: auto; }

.htr-hero__model {
  position: absolute;
  line-height: 0;
  transition: transform 1.2s cubic-bezier(.42, 0, 1, 1);
}

.htr-hero__model img { display: block; width: 100%; height: auto; }

/* Both models travel entirely across the viewport; the left model stays in front. */
.htr-hero__model--left {
  z-index: 3;
  left: max(4vw, 24px);
  bottom: 0;
  width: min(40%, 520px);
  transform: translate(var(--motion-distance-negative), 4%);
}

.htr-hero__model--right {
  z-index: 2;
  right: 10%;
  top: 13%;
  width: min(20%, 290px);
  transform: translateX(var(--motion-distance));
}

/* The copy uses the same path and timing as the right model. */
.htr-hero__content {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  width: min(34%, 540px);
  padding: 1rem;
  text-align: center;
  transform: translate(calc(-50% + var(--motion-distance)), -50%);
  opacity: 0;
  transition: transform 1.2s cubic-bezier(.42, 0, 1, 1), opacity .45s ease;
}

.htr-hero.is-loaded .htr-hero__slide.is-active .htr-hero__model--left { transform: translate(0, 4%); }
.htr-hero.is-loaded .htr-hero__slide.is-active .htr-hero__model--right { transform: translateX(0); }
.htr-hero.is-loaded .htr-hero__slide.is-active .htr-hero__content { transform: translate(-50%, -50%); opacity: 1; }

.htr-hero.is-loaded .htr-hero__slide.is-leaving .htr-hero__model--left { transform: translate(var(--motion-distance), 4%); }
.htr-hero.is-loaded .htr-hero__slide.is-leaving .htr-hero__model--right { transform: translateX(var(--motion-distance-negative)); }
.htr-hero.is-loaded .htr-hero__slide.is-leaving .htr-hero__content { transform: translate(calc(-50% + var(--motion-distance-negative)), -50%); opacity: 0; }

.htr-hero__eyebrow { margin: 0 0 .8rem; font-size: .68rem; letter-spacing: .18em; font-weight: 700; }
.htr-hero__title { margin: 0; white-space: normal; font-family: "Libre Caslon Display", Sans-serif; font-weight: 500; font-size: clamp(2.25rem, 4.3vw, 5.1rem); line-height: .94; letter-spacing: -.05em; text-shadow: 0 3px 2px rgb(80 0 12 / .16); }
.htr-hero__description { max-width: 310px; margin: 1rem auto 1.4rem; font-family: "Jost", Sans-serif; font-size: clamp(.8rem, 1.1vw, 1rem); line-height: 1.55; }
.htr-hero__button { display: inline-block; color: inherit; border-bottom: 1px solid currentColor; padding-bottom: .35rem; font-size: .72rem; letter-spacing: .13em; font-weight: 700; text-decoration: none; }

.htr-hero__dots { position: absolute; z-index: 5; right: clamp(14px, 2.5vw, 38px); top: 50%; display: flex; flex-direction: column; gap: 12px; transform: translateY(-50%); }
.htr-hero__dot { width: 7px; height: 7px; border: 0; border-radius: 50%; padding: 0; background: var(--ink); opacity: .28; cursor: pointer; transition: transform .2s, opacity .2s; }
.htr-hero__dot.is-active { opacity: 1; transform: scale(1.25); }

@media (max-width: 767px) {
  .htr-hero { height: 570px; }
  .htr-hero__model--left { left: 4vw; width: min(70%, 320px); }
  .htr-hero__content { top: 160px; width: min(78%, 360px); padding: 1rem 2.25rem; transform: translate(calc(-50% + var(--motion-distance)), -50%); }
  .htr-hero.is-loaded .htr-hero__slide.is-active .htr-hero__content { transform: translate(-50%, -50%); }
  .htr-hero.is-loaded .htr-hero__slide.is-leaving .htr-hero__content { transform: translate(calc(-50% + var(--motion-distance-negative)), -50%); }
  .htr-hero__title { font-size: clamp(2.15rem, 9vw, 3.6rem); }
  .htr-hero__description { margin: .7rem auto 1rem; }
  .htr-hero__model--right { right: 4%; top: auto; bottom: 3%; width: 30%; max-width: 150px; }
  .htr-hero__dots { right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .htr-hero__slide,
  .htr-hero__model,
  .htr-hero__content { transition: none; }
}

.htr-products { --htr-product-ratio: 1.18; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; background: #000; }
.htr-products__card { position: relative; min-width: 0; background: #000; color: #fff; }
.htr-products__image { display: block; aspect-ratio: 1 / var(--htr-product-ratio); overflow: hidden; background: #f5f5f5; }
.htr-products__image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.htr-products__card:hover .htr-products__image img { transform: scale(1.035); }
.htr-products__heart { position: absolute; z-index: 1; top: 20px; right: 20px; display: grid; place-items: center; width: 52px; height: 52px; border: 0; border-radius: 50%; background: #fff; color: #7d1d2e; font-size: 31px; line-height: 1; cursor: pointer; }
.htr-products__heart.is-saved { background: #7d1d2e; color: #fff; }
.htr-products__title { margin: 16px 0 4px; padding: 0 2px; font: 500 clamp(.9rem, 1.3vw, 1.25rem) / 1.3 Arial, sans-serif; }
.htr-products__title a { color: inherit; text-decoration: none; }
.htr-products__price { padding: 0 2px 20px; color: #961d33; font: 700 clamp(1rem, 1.5vw, 1.4rem) / 1.2 Arial, sans-serif; }
.htr-products__price del { opacity: .65; }
.htr-products__price ins { text-decoration: none; }

@media (max-width: 600px) {
  .htr-products { gap: 10px; }
  .htr-products__heart { top: 10px; right: 10px; width: 39px; height: 39px; font-size: 25px; }
  .htr-products__title { margin-top: 10px; font-size: .82rem; }
  .htr-products__price { padding-bottom: 12px; font-size: 1rem; }
}