/* Product category listing — React EngineeredProducts.jsx */
[data-route^="/products/"] section[id] {
  scroll-margin-top: 100px;
}

/* Catalog list: space-y-10 / md:space-y-16 (EngineeredProducts.jsx).
   React only mounts the visible slice → first card has NO margin-top.
   Static keeps off-screen cards with [hidden] so Tailwind
   `> :not([hidden]) ~ :not([hidden])` skips them (display:none alone does not). */
[data-route^="/products/"] .space-y-10 > article[hidden],
[data-route^="/products/"] .space-y-16 > article[hidden] {
  display: none !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* First visible card — no top margin (React parity).
   applyVisibility() appends visible cards first, so first article is visible. */
[data-route^="/products/"] .space-y-10 > article:not([hidden]):first-child,
[data-route^="/products/"] .space-y-16 > article:not([hidden]):first-child {
  margin-top: 0 !important;
}

/* ── Catalog filter/sort AnimatePresence (EngineeredSolutionCard.jsx) ────────
   enter: opacity 0 → 1, y 40 → 0, 0.7s quart, delay index*0.05
   exit:  opacity → 0, scale → 0.95, 0.7s quart
   mode="popLayout": exiting leaves flow (absolute) while others reflow     */
[data-route^="/products/"] .ari-catalog-list {
  position: relative;
}

[data-route^="/products/"] .ari-catalog-list > article.ari-catalog-anim {
  transition:
    opacity 0.7s cubic-bezier(0.25, 1, 0.5, 1),
    transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
  transition-delay: var(--ari-catalog-delay, 0s);
  will-change: opacity, transform;
}

/* Enter — React initial={{ opacity: 0, y: 40 }} */
[data-route^="/products/"] .ari-catalog-list > article.ari-catalog-enter {
  opacity: 0;
  transform: translateY(40px);
}

/* Enter done — React whileInView / animate={{ opacity: 1, y: 0 }} */
[data-route^="/products/"] .ari-catalog-list > article.ari-catalog-enter.ari-catalog-shown {
  opacity: 1;
  transform: translateY(0);
}

/* Exit — React exit={{ opacity: 0, scale: 0.95 }} + popLayout absolute */
[data-route^="/products/"] .ari-catalog-list > article.ari-catalog-exit {
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1;
  margin-top: 0 !important;
}

/* Empty state enter */
[data-route^="/products/"] .ari-catalog-empty.ari-catalog-enter {
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}
[data-route^="/products/"] .ari-catalog-empty.ari-catalog-enter.ari-catalog-shown {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  [data-route^="/products/"] .ari-catalog-list > article.ari-catalog-anim,
  [data-route^="/products/"] .ari-catalog-empty.ari-catalog-enter {
    transition: none !important;
  }
}

/* Load More — static products/*.html parity (sibling of list, not nested) */
[data-ari-load-more][hidden] {
  display: none !important;
}

/* Compact outline letter button: h-[44px] px-8 min-w-[200px] */
[data-ari-load-btn].ari-btn-anim.ari-btn-outline {
  height: 44px;
  padding: 0 32px;
  min-width: 200px;
  font-size: 11px;
  font-weight: 600;
  border-color: color-mix(in srgb, var(--color-outline-variant, #c6c6c6) 50%, transparent);
}
[data-ari-load-btn].ari-btn-anim.ari-btn-outline:hover {
  border-color: var(--color-on-surface, #1a1c1c);
}
/* Arrow drops in from above (−translate-y-2 → 0), not from the right */
[data-ari-load-btn].ari-btn-anim .ari-btn-arrow,
[data-ari-load-btn].ari-btn-anim .ari-btn-arrow.svg-icon {
  color: #fff;
  background-color: #fff;
  transform: translateY(-0.5rem);
}
[data-ari-load-btn].ari-btn-anim:hover .ari-btn-arrow,
[data-ari-load-btn].ari-btn-anim:hover .ari-btn-arrow.svg-icon {
  opacity: 1;
  transform: translateY(0);
}

/* inline-flex on the done badge would otherwise override [hidden] */
[data-ari-load-btn][hidden],
[data-ari-load-btn].hidden,
[data-ari-load-done][hidden],
[data-ari-load-done].hidden {
  display: none !important;
}

.ari-catalog-list.pcat-loading {
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

/* Hide native search cancel so only the custom .ari-catalog-search-clear X shows. */
[data-ari-catalog] [data-ari-search] {
  -webkit-appearance: none;
  appearance: none;
}
[data-ari-catalog] [data-ari-search]::-webkit-search-decoration,
[data-ari-catalog] [data-ari-search]::-webkit-search-cancel-button,
[data-ari-catalog] [data-ari-search]::-webkit-search-results-button,
[data-ari-catalog] [data-ari-search]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
[data-ari-catalog] [data-ari-search]::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}

[data-ari-catalog] .ari-catalog-search-clear .svg-icon,
[data-ari-catalog] .ari-catalog-search-clear .ari-theme-icon {
  width: 14px;
  height: 14px;
  min-width: 14px;
  min-height: 14px;
  font-size: 14px;
  display: block;
}