/**
 * Homepage category-grid hover/tap flyout.
 * Overlay sits on top of each category tile and fades in on hover (desktop),
 * :focus-within (keyboard), or first tap (touch). Subcategory links use the
 * same /product-filter/<slug>/ targets as the products mega-menu.
 *
 * The overlay is a sibling of the tile <a> inside .cat-flyout-wrapper, so
 * there are no interactive descendants nested inside an anchor.
 */

.cat-flyout-wrapper {
  position: relative;
}

.categoriesScroller .cat-flyout {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 12px;
  border-radius: inherit;
  background: transparent;
  color: #fff;
  opacity: 0;
  /* visibility:hidden keeps overlay links out of the tab order when closed. */
  visibility: hidden;
  pointer-events: none;
  overflow-y: auto;
  z-index: 5;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

/* Tint layer: the tile's own gradient/color (set as CSS vars in JS), made
   semi-transparent so the tile colour shows through. Falls back to dark if a
   tile has no detectable background. Sits behind the text. */
.categoriesScroller .cat-flyout::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: var(--cat-flyout-bg-color, #16181d);
  /* Tile gradient with a dark scrim so white text stays crisp on light tiles. */
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
    var(--cat-flyout-bg-image, none);
  background-size: cover;
  background-position: center;
  opacity: 0.95;
  z-index: 0;
}

/* Flyout visible: hover/touch (JS class) OR keyboard (:focus-within). */
.cat-flyout-wrapper.flyout-open .cat-flyout,
.cat-flyout-wrapper:focus-within .cat-flyout {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.cat-flyout-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  text-align: center;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.65);
}

.cat-flyout-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cat-flyout-link {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 4px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease;
}

.cat-flyout-link:hover,
.cat-flyout-link:focus {
  background: rgba(255, 255, 255, 0.24);
  outline: none;
}

.cat-flyout-shop-all {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
}

/* Touch devices: hint that the wrapper is interactive. */
@media (hover: none) {
  .cat-flyout-wrapper {
    -webkit-tap-highlight-color: transparent;
  }
}