/* Eyebrow (small label above the title) — match live: 12px / 500 / uppercase / centered */
.section-featured-collection .heading-with-link__title.title3,
.section-featured-collection .block-heading.title3 {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Main title — 20px / weight 500 / UPPERCASE / centered (live uses 0.2em tracking) */
.section-featured-collection .block-heading.title2 {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.2em;
  /* compensate the trailing letter-spacing so the text stays visually centered */
  text-indent: 0.2em;
  text-transform: uppercase;
}

/* Tighten the vertical gap between the eyebrow (title3) and the title (title2)
   without affecting the gap before the product grid below. */
.section-featured-collection .block-heading.title3 + .block-heading.title2 {
  margin-top: -20px;
}

/* NOTE: product-card styling (title/price/badge/add-to-cart/sold-out/loading)
   now lives globally in blocks/product-list/card.css so it applies to ALL
   product cards (collection, search, recommended, recently viewed, etc.). */

.featured-collection__view-all {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}

.featured-collection__view-all-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  padding: 15px 34px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  color: #ffffff;
  background-color: #1c1b1b;
  border: 1px solid #1c1b1b;
  overflow: hidden;
  isolation: isolate;
  transition: color 350ms ease;
}

/* White panel always travels LEFT -> RIGHT:
   slides in from the left on hover, then continues out the right edge on leave. */
.featured-collection__view-all-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: #ffffff;
  transform: translateX(-101%);
  transition: transform 350ms ease;
}

/* Hover: slide in from the left to fully cover */
.featured-collection__view-all-btn:hover::before {
  transform: translateX(0);
}

/* Leave: continue rightward off the right edge (then it resets off-left, ready for next hover).
   Gated behind .is-armed (added after first hover) so the exit animation never fires on page load. */
.featured-collection__view-all-btn.is-armed:not(:hover)::before {
  animation: view-all-swipe-out 350ms ease;
}

@keyframes view-all-swipe-out {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(101%);
  }
}

.featured-collection__view-all-label {
  position: relative;
  z-index: 2;
  color: #ffffff;
  transition: color 350ms ease;
}

.featured-collection__view-all-btn:hover .featured-collection__view-all-label {
  color: #1c1b1b;
}

.featured-collection__view-all-btn:hover {
  color: #1c1b1b;
}