/* FC HP Category — scoped homepage category cards only. */
.fcwlcat-bricks-element,
.fcwlcat {
  width: 100%;
  min-width: 0;
}

.fcwlcat {
  --fcwlcat-radius: 7px;
  --fcwlcat-gap: 12px;
  --fcwlcat-card-width: 228px;
  --fcwlcat-section-bg: #ffffff;
  --fcwlcat-heading-color: #002e25;
  --fcwlcat-card-bg: #f3eee8;
  --fcwlcat-card-text: #002e25;
  --fcwlcat-shop-text: #002e25;
  --fcwlcat-shop-bg: #e5f1ef;
  --fcwlcat-text: #002e25;
  --fcwlcat-border: rgba(0, 46, 37, 0.10);
  background: var(--fcwlcat-section-bg);
}

.fcwlcat-heading {
  margin: 0 0 28px;
  color: var(--fcwlcat-heading-color);
  font: inherit;
  font-size: clamp(28px, 2.2vw, 40px);
  font-weight: 700;
  line-height: 1.1;
}

/* v1.3.96: keep the fixed 228px row, hide the browser-native scrollbar,
   and keep the same 20px card-to-rail reserve as HP Best Seller. When the row
   overflows, hp-category.js supplies the same thin custom rail/thumb interaction. */
.fcwlcat-grid {
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;
  gap: var(--fcwlcat-gap);
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
  padding: 4px 0 20px;
  scrollbar-width: none;
  cursor: grab;
}

.fcwlcat-grid::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.fcwlcat-grid.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
}

.fcwlcat-card {
  box-sizing: border-box;
  position: relative;
  display: block;
  flex: 0 0 var(--fcwlcat-card-width);
  width: var(--fcwlcat-card-width);
  min-width: var(--fcwlcat-card-width);
  max-width: var(--fcwlcat-card-width);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--fcwlcat-border);
  border-radius: var(--fcwlcat-radius);
  background: var(--fcwlcat-card-bg);
  color: var(--fcwlcat-card-text);
  text-decoration: none;
  isolation: isolate;
  scroll-snap-align: start;
  box-shadow: inset 0 0 0 1px var(--fcwlcat-border);
  transform: translateY(0);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 160ms ease;
}

/* Match the HP Best Seller whole-card hover treatment. */
.fcwlcat-card:hover,
.fcwlcat-card:focus-within,
.fcwlcat-card:active {
  transform: translateY(-3px);
  border-color: var(--fcwlcat-border);
  box-shadow: inset 0 0 0 1px var(--fcwlcat-border), 0 12px 28px rgba(0, 46, 37, .14);
}

.fcwlcat-card:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* The image layer owns the complete inside of the outer card border. Images
   use cover, so a larger/wider source is allowed to crop at the sides instead
   of being reduced into an inset box. */
.fcwlcat-media {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  border-radius: inherit;
  z-index: 0;
}

.fcwlcat-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  padding: 0;
  object-fit: cover;
  object-position: center;
  transition: opacity 360ms ease, transform 520ms cubic-bezier(.2,.72,.25,1);
  will-change: opacity, transform;
}

.fcwlcat-image-static {
  z-index: 1;
  opacity: 1;
  transform: scale(1);
}

.fcwlcat-image-hover {
  z-index: 2;
  opacity: 0;
  transform: scale(1.015);
}

.fcwlcat-card.has-hover-image:hover .fcwlcat-image-static,
.fcwlcat-card.has-hover-image:focus-visible .fcwlcat-image-static,
.fcwlcat-card.has-hover-image:focus-within .fcwlcat-image-static {
  opacity: 0;
  transform: scale(.985);
}

.fcwlcat-card.has-hover-image:hover .fcwlcat-image-hover,
.fcwlcat-card.has-hover-image:focus-visible .fcwlcat-image-hover,
.fcwlcat-card.has-hover-image:focus-within .fcwlcat-image-hover {
  opacity: 1;
  transform: scale(1);
}

.fcwlcat-image-placeholder {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  padding: 16px;
  background: var(--fcwlcat-card-bg);
  font-size: 12px;
  text-align: center;
  opacity: .8;
}

/* Caption overlays the full-bleed image instead of reserving a footer below it.
   The normal title remains at the bottom. On hover the title exits left and a
   Best Seller-style 42px Shop now control enters from the right and finishes
   centered inside the card with the same 6px side inset. */
.fcwlcat-caption {
  position: absolute;
  z-index: 5;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  height: 78px;
  min-height: 78px;
  overflow: hidden;
  background: linear-gradient(to top, rgba(243, 238, 232, .98) 0%, rgba(243, 238, 232, .88) 58%, rgba(243, 238, 232, 0) 100%);
  pointer-events: none;
}

.fcwlcat-title {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px 14px 15px;
  color: var(--fcwlcat-card-text);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  transform: translateX(0);
  opacity: 1;
  transition: transform 420ms cubic-bezier(.22,.75,.22,1), opacity 300ms ease;
  will-change: transform, opacity;
}

.fcwlcat-shop {
  box-sizing: border-box;
  position: absolute;
  right: 6px;
  bottom: 8px;
  left: 6px;
  display: flex;
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  padding: 0 16px;
  align-items: center;
  justify-content: center;
  color: var(--fcwlcat-shop-text);
  background: var(--fcwlcat-shop-bg);
  border: 1px solid #d6e8e5;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  white-space: nowrap;
  transform: translate3d(calc(100% + 18px), 0, 0);
  opacity: 1;
  transition: transform 650ms cubic-bezier(.22,.80,.20,1);
  will-change: transform;
}

.fcwlcat-card:hover .fcwlcat-title,
.fcwlcat-card:focus-visible .fcwlcat-title,
.fcwlcat-card:focus-within .fcwlcat-title {
  transform: translateX(-102%);
  opacity: 0;
}

.fcwlcat-card:hover .fcwlcat-shop,
.fcwlcat-card:focus-visible .fcwlcat-shop,
.fcwlcat-card:focus-within .fcwlcat-shop {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

/* v1.3.97 — Shop now keeps a real 650ms right-to-center transform even when
   the operating system/browser reports reduced motion, preventing an instant pop. */

/* v1.3.96 — match HP Best Seller card-to-rail rhythm and make Shop now a true slide-in.
   The category track now keeps the same 20px bottom reserve used by the Best Seller track
   before its custom rail. Shop now remains fully opaque but starts completely outside the
   clipped caption, so the only reveal is its smooth right-to-center transform. */

/* HP Best Seller-matched custom category slider rail. It only occupies space
   when the category row actually overflows. */
@keyframes fcwlcatRailHint {
  0%   { opacity: 0; }
  18%  { opacity: 1; }
  58%  { opacity: 1; }
  100% { opacity: 0; }
}

.fcwlcat-scrollbar {
  position: relative;
  display: none;
  width: 100%;
  height: 2px;
  margin: 0;
  background: #a8bfae;
  border-radius: 999px;
  opacity: 0;
  transition: opacity 180ms ease;
  touch-action: none;
}

.fcwlcat-scrollbar[data-fcwlcat-overflow="1"] {
  display: block;
}

.fcwlcat-scrollbar.fcwlcat-rail-visible {
  opacity: 1;
}

.fcwlcat-scrollbar.fcwlcat-rail-hint {
  animation: fcwlcatRailHint 1800ms ease-in-out 3 both;
}

.fcwlcat-scrollbar-thumb {
  position: absolute;
  top: -1px;
  left: 0;
  width: 40px;
  height: 4px;
  background: #00584f;
  border-radius: 999px;
  transform: translateX(0);
  will-change: transform;
}

.fcwlcat-empty {
  margin: 0;
}

@media (max-width: 767px) {
  .fcwlcat {
    --fcwlcat-gap: 8px;
  }
}

@media (max-width: 700px) {
  .fcwlcat-heading {
    margin-bottom: 20px;
  }

  .fcwlcat-caption {
    height: 68px;
    min-height: 68px;
  }

  .fcwlcat-title {
    padding: 13px 10px 13px;
    font-size: 14px;
  }

  .fcwlcat-shop {
    right: 6px;
    bottom: 8px;
    left: 6px;
    height: 42px;
    min-height: 42px;
    max-height: 42px;
    padding: 0 16px;
    font-size: 14px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .fcwlcat-card,
  .fcwlcat-image,
  .fcwlcat-title {
    transition: none !important;
  }

  /* v1.3.97: Shop now is an intentional product-card interaction requested for
     this widget. Keep its horizontal travel active even when the OS reports
     reduced motion; otherwise the button jumps instantly from off-card to center. */
  .fcwlcat-shop {
    transition: transform 650ms cubic-bezier(.22,.80,.20,1) !important;
  }

  .fcwlcat-grid {
    scroll-behavior: auto;
  }
}

/* v1.3.100 — shared HP slider selector geometry.
   Both HP Best Seller and FC HP Category use the exact same 2px rail / 4px selector
   on every viewport. */
.fcwlcat-scrollbar {
  height: 2px !important;
  min-height: 2px !important;
  max-height: 2px !important;
}

.fcwlcat-scrollbar-thumb {
  top: -1px !important;
  height: 4px !important;
  min-height: 4px !important;
  max-height: 4px !important;
  will-change: transform;
}



/* FC Ecom Suite 6.0.542 / homepage widgets 1.3.191 — Our Collection rail parity.
   Audit result: FC HP Category carried a separate, softer scrollbar contract while HP
   Best Seller had the final hardened rail geometry. Pin the Collection rail to the same
   2px track / 4px selector, full-width alignment and zero trailing element spacing so
   the two homepage sliders render as one visual system on every viewport. */
.fcwlcat-bricks-element,
.fcwlcat {
  width: 100% !important;
  max-width: 100% !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.fcwlcat-grid {
  padding-bottom: 20px !important;
}

.fcwlcat .fcwlcat-scrollbar {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: 2px !important;
  min-height: 2px !important;
  max-height: 2px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #a8bfae !important;
  box-shadow: none !important;
  opacity: 0;
  transition: opacity 180ms ease;
  overflow: visible !important;
  touch-action: none;
}

.fcwlcat .fcwlcat-scrollbar.fcwlcat-rail-visible {
  opacity: 1;
}

.fcwlcat .fcwlcat-scrollbar.fcwlcat-rail-hint {
  animation: fcwlcatRailHint 1800ms ease-in-out 3 both;
}

.fcwlcat .fcwlcat-scrollbar-thumb {
  position: absolute !important;
  top: -1px !important;
  left: 0 !important;
  height: 4px !important;
  min-height: 4px !important;
  max-height: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #00584f !important;
  box-shadow: none !important;
  transform: translateX(0);
  will-change: transform;
}

/* FC Ecom Suite 6.0.546 — Our Collection owns independent section/text colours; Best Sellers uses separate variables. */