/* ==========================================================================
   18 — SUBCATEGORY PILL CAROUSEL
   --------------------------------------------------------------------------
   The image-pill row above the product grid on a category archive, rendered
   by inc/subcategory-pills.php. Swipe / drag / scroll, no arrow buttons. The
   row bleeds to the container edge and fades out at the end that has more.

   Every value is a var() from 00-tokens.css. Logical properties throughout,
   so it mirrors in RTL. Selectors are doubled to `.aly-subcats .aly-subcats__x`
   where the Elementor kit or the bridge would otherwise win on specificity.
   Loaded on category archives only (see aly_enqueue_assets()).
   ========================================================================== */

.aly-subcats {
  position: relative;
  margin-block: 0 var(--space-4);
}

.aly-subcats .aly-subcats__track {
  display: flex;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-1) var(--space-4) var(--space-2) 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  cursor: grab;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
}
.aly-subcats .aly-subcats__track::-webkit-scrollbar { display: none; }

.aly-subcats.is-end .aly-subcats__track {
  -webkit-mask-image: none;
  mask-image: none;
}
.aly-subcats.is-scrolled .aly-subcats__track {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
  mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
}
.aly-subcats.is-scrolled.is-end .aly-subcats__track {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 2.5rem);
  mask-image: linear-gradient(to right, transparent, #000 2.5rem);
}
[dir="rtl"] .aly-subcats .aly-subcats__track { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent); }
[dir="rtl"] .aly-subcats.is-end .aly-subcats__track { -webkit-mask-image: none; mask-image: none; }
[dir="rtl"] .aly-subcats.is-scrolled .aly-subcats__track { -webkit-mask-image: linear-gradient(to left, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(to left, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent); }
[dir="rtl"] .aly-subcats.is-scrolled.is-end .aly-subcats__track { -webkit-mask-image: linear-gradient(to left, transparent, #000 2.5rem); mask-image: linear-gradient(to left, transparent, #000 2.5rem); }

.aly-subcats .aly-subcats__track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}
.aly-subcats .aly-subcats__track.is-dragging a { pointer-events: none; }

.aly-subcats .aly-subcats__track > li {
  flex: none;
  margin: 0;
  scroll-snap-align: start;
}

.aly-subcats .aly-subcats__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: var(--space-1) var(--space-4) var(--space-1) var(--space-1);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface);
  box-shadow: var(--elevation-hairline);
  color: var(--color-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  -webkit-user-drag: none;
  transition: background-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}
.aly-subcats .aly-subcats__pill:hover { background-color: var(--color-surface-sunk); color: var(--color-text); }
.aly-subcats .aly-subcats__pill:focus-visible {
  outline: 2px solid var(--color-focus-outline);
  outline-offset: 2px;
}
.aly-subcats .aly-subcats__pill.is-active,
.aly-subcats .aly-subcats__pill.is-active:hover {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-label);
}

.aly-subcats__thumb {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  background-color: var(--dept-grocery-bg);
  color: var(--dept-grocery-fg);
}
.aly-subcats__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aly-subcats__thumb--all { background-color: var(--color-surface-sunk); color: var(--color-text); }
.aly-subcats__thumb--t1 { background-color: var(--dept-fresh-bg);       color: var(--dept-fresh-fg); }
.aly-subcats__thumb--t2 { background-color: var(--dept-home-bg);        color: var(--dept-home-fg); }
.aly-subcats__thumb--t3 { background-color: var(--dept-apparel-bg);     color: var(--dept-apparel-fg); }
.aly-subcats__thumb--t4 { background-color: var(--dept-electronics-bg); color: var(--dept-electronics-fg); }
.aly-subcats .is-active .aly-subcats__thumb--all { background-color: var(--color-surface); }

.aly-subcats__count {
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}
.aly-subcats .is-active .aly-subcats__count { color: inherit; opacity: 0.75; }

@media (max-width: 767px) {
  /* Bleed to the screen edge on phones so the row reads as swipeable. */
  .aly-subcats { margin-inline: calc(var(--space-4) * -1); }
  .aly-subcats .aly-subcats__track { padding-inline-start: var(--space-4); }
}

/* While a pill's category loads over AJAX, dim the results below the row. */
.aly-subcats-loading > :not(.aly-subcats) { opacity: .45; transition: opacity .15s; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .aly-subcats-loading > :not(.aly-subcats) { transition: none; } }