/* Shared homepage and Services product cards, with native horizontal scrolling. */
:is(.tsa-home-page, .tsa-landing) .tsa-showcase {
	--tsa-showcase-ink: var(--tsa-home-ink, var(--tsa-ink, #202b27));
	--tsa-showcase-accent: var(--tsa-home-accent, var(--tsa-accent, #174f46));
	--tsa-showcase-border: var(--tsa-home-border, var(--tsa-border, #dce5df));
	--tsa-showcase-surface: var(--tsa-home-surface, var(--tsa-surface, #f4f7f4));
}

:is(.tsa-home-page, .tsa-landing) .tsa-showcase { grid-column: 1 / -1; min-width: 0; margin: 0; list-style: none; }
:is(.tsa-home-page, .tsa-landing) .tsa-showcase__heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-bottom: .75rem; }
:is(.tsa-home-page, .tsa-landing) .tsa-showcase__heading :is(h2, h3) { margin: 0; font-size: clamp(1.25rem, 2.3vw, 1.75rem); }
:is(.tsa-home-page, .tsa-landing) .tsa-showcase__heading :is(h2, h3) a { color: var(--tsa-showcase-ink); text-decoration: none; }
:is(.tsa-home-page, .tsa-landing) .tsa-showcase__all { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; color: var(--tsa-showcase-accent); font-size: .875rem; font-weight: 600; text-underline-offset: .2em; }
:is(.tsa-home-page, .tsa-landing) .tsa-showcase__track {
	--tsa-showcase-gap: .5rem;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 2 * var(--tsa-showcase-gap)) / 3);
	gap: var(--tsa-showcase-gap);
	margin: 0;
	padding: .25rem 0 .75rem;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	scrollbar-color: #9bb7a9 var(--tsa-showcase-surface);
}
:is(.tsa-home-page, .tsa-landing) .tsa-showcase__track:focus-visible { outline: 3px solid #1976b9; outline-offset: 4px; }
:is(.tsa-home-page, .tsa-landing) .tsa-showcase__track:empty { display: none; }
:is(.tsa-home-page, .tsa-landing) .tsa-showcase__product { min-width: 0; margin: 0; scroll-snap-align: start; scroll-snap-stop: normal; }
:is(.tsa-home-page, .tsa-landing) .tsa-showcase__link { display: flex; flex-direction: column; height: 100%; padding: .375rem; border: 1px solid var(--tsa-showcase-border); border-radius: .75rem; background: #fff; color: var(--tsa-showcase-ink); text-decoration: none; transition: border-color .18s ease; }
:is(.tsa-home-page, .tsa-landing) .tsa-showcase__link:is(:hover, :focus-visible) { border-color: #9bb7a9; color: var(--tsa-showcase-accent); }
:is(.tsa-home-page, .tsa-landing) .tsa-showcase__media { display: block; width: 100%; aspect-ratio: 4 / 3; margin-bottom: .5rem; overflow: hidden; border-radius: .5rem; background: var(--tsa-showcase-surface); }
:is(.tsa-home-page, .tsa-landing) .tsa-showcase__image { display: block; width: 100%; height: 100%; margin: 0; object-fit: contain; }
:is(.tsa-home-page, .tsa-landing) .site-main .tsa-showcase__name { display: -webkit-box; height: 4.35em; margin: 0 0 .4rem; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-size: .75rem; line-height: 1.45; letter-spacing: normal; text-wrap: wrap; }
:is(.tsa-home-page, .tsa-landing) .tsa-showcase__price { display: block; min-height: 4.35em; margin-top: auto; color: var(--tsa-showcase-ink); font-size: .75rem; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
:is(.tsa-home-page, .tsa-landing) .tsa-showcase__price ins { background: transparent; font-weight: 700; }
:is(.tsa-home-page, .tsa-landing) .tsa-showcase__price del { font-weight: 400; opacity: .75; }
:is(.tsa-home-page, .tsa-landing) .tsa-showcase__navigation { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 44px; margin-top: .5rem; }
:is(.tsa-home-page, .tsa-landing) .tsa-showcase__hint { margin: 0; font-size: .8125rem; }
:is(.tsa-home-page, .tsa-landing) .tsa-showcase__controls { display: flex; gap: .5rem; }
:is(.tsa-home-page, .tsa-landing) .tsa-showcase__controls[hidden],
:is(.tsa-home-page, .tsa-landing) .tsa-showcase[hidden],
:is(.tsa-home-page, .tsa-landing) .tsa-showcase [hidden] { display: none; }
:is(.tsa-home-page, .tsa-landing) .tsa-showcase__controls button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--tsa-showcase-border); border-radius: .75rem; background: var(--tsa-showcase-surface); color: var(--tsa-showcase-accent); font-size: 1.25rem; line-height: 1; }
:is(.tsa-home-page, .tsa-landing) .tsa-showcase__controls button:disabled { opacity: .4; cursor: default; }
:is(.tsa-home-page, .tsa-landing) .tsa-showcase__controls button:enabled:hover { background: #e1eee6; }
:is(.tsa-home-page, .tsa-landing) .tsa-showcase__empty { margin: .75rem 0; }
.tsa-landing .tsa-services-showcase { margin-block: 1.5rem; }
.tsa-landing .tsa-services-showcase + .tsa-services-showcase { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--tsa-border); }
@media (min-width: 480px) {
	:is(.tsa-home-page, .tsa-landing) .tsa-showcase__link { padding: .625rem; border-radius: 1rem; }
	:is(.tsa-home-page, .tsa-landing) .site-main .tsa-showcase__name,
	:is(.tsa-home-page, .tsa-landing) .tsa-showcase__price { font-size: .875rem; }
}
@media (min-width: 768px) {
	:is(.tsa-home-page, .tsa-landing) .tsa-showcase__track { --tsa-showcase-gap: .75rem; grid-auto-columns: calc((100% - 3 * var(--tsa-showcase-gap)) / 4); }
	:is(.tsa-home-page, .tsa-landing) .tsa-showcase__link { padding: .75rem; }
	:is(.tsa-home-page, .tsa-landing) .site-main .tsa-showcase__name,
	:is(.tsa-home-page, .tsa-landing) .tsa-showcase__price { font-size: 1rem; }
}
@media (min-width: 1024px) {
	:is(.tsa-home-page, .tsa-landing) .tsa-showcase__track { grid-auto-columns: calc((100% - 4 * var(--tsa-showcase-gap)) / 5); }
}
@media (prefers-reduced-motion: reduce) {
	:is(.tsa-home-page, .tsa-landing) .tsa-showcase__link { transition: none; }
}