/* 99SEEDS homepage product slider (inc/seeds-v3-featured.php): tabs with one gliding indicator,
   cross-fading rows and a staggered card entrance. Track and card styles come from seeds-home-v3.css. */

.h-fx__nav { width: fit-content; max-width: min(1000px, calc(100% - 2 * var(--h-pad))); margin: 0 auto 48px; overflow-x: auto; scrollbar-width: none; }
.h-fx__nav::-webkit-scrollbar { display: none; }
/* One continuous lilac rule under the row; the black line on top travels to the active tab. */
.h-fx__tabs { position: relative; display: flex; gap: 54px; width: max-content; border-bottom: 3px solid #B7AAF0; }
.h-fx__tab {
	flex: none; margin: 0 0 -3px; padding: 0 0 13px; border: 0; border-bottom: 3px solid transparent; background: none; cursor: pointer;
	font: 700 26px/1.3 var(--h-font); color: #000; text-transform: none; letter-spacing: 0; opacity: .45; transition: opacity .25s ease-in-out;
}
.h-fx__tab.is-active, .h-fx__tab:hover { opacity: 1; }
/* Astra colours every button border orange on hover/focus; here that would draw a second line under the tab. */
button.h-fx__tab:is(:hover, :focus, :active) { background: none; color: #000; border-color: transparent; }
.h-fx__tab:focus-visible { outline: 2px solid #000; outline-offset: 4px; border-radius: 4px; }
.h-fx__line {
	position: absolute; left: 0; bottom: -3px; width: 100%; height: 3px; background: #000; pointer-events: none;
	transform-origin: left center; scale: var(--s, 0) 1; translate: var(--x, 0) 0;
}
/* Width settles a little faster than the slide, which gives the line its stretch. */
.h-fx__line.is-ready { transition: scale .2s ease-in-out, translate .4s ease-in-out; }

.h-fx__panel[hidden] { display: none; }
/* Height of the tallest row, measured by the script, so switching rows never moves the page. */
.h-fx__panel { min-height: var(--h-fx-min, 0); }
/* Titles always hold two lines, so every row has the same height and switching never moves the page. */
@supports (min-height: 2lh) { .h-fx .h-card__title { min-height: 2lh; } }
.h-fx__carousel { position: relative; }
/* Until the section scrolls into view, the first row waits invisible for its entrance. */
.h-fx.is-waiting .h-fx__panel:not([hidden]) [data-h-fx-item] { opacity: 0; }

@media (max-width: 999px) {
	.h-fx__nav { width: auto; max-width: none; margin: 0 0 32px; padding: 0 var(--h-pad); }
	.h-fx__tabs { gap: 32px; }
	.h-fx__tab { font-size: 16.25px; }
}

@media (prefers-reduced-motion: reduce) {
	.h-fx__line.is-ready, .h-fx__tab { transition: none; }
	.h-fx.is-waiting .h-fx__panel:not([hidden]) [data-h-fx-item] { opacity: 1; }
}