/*
 * AH Store: goal cards, type tabs with search, and product cards that help choose (light cards on a
 * calm ground, navy titles, gold buttons, an icon tile instead of the cover, the deciding facts large,
 * equal heights).
 * Phones: goals and tabs scroll sideways so the products show early.
 */

/* one column that never grows past its box: the sideways scrollers on phones would widen the page otherwise */
.ah-st { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; min-width: 0; }
.ah-st > * { min-width: 0; }
.ah-st .ah-st__lbl { margin: 0; color: var(--ah-ink-gold); font-family: var(--ah-f-body); font-size: .92rem; font-weight: 700; }

/* ---------- goals ---------- */
.ah-st .ah-st__goals { display: grid; grid-template-columns: repeat(var(--ah-st-n, 3), minmax(0, 1fr)); gap: 14px; }
.ah-st .ah-st__goal.ah-st__goal {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	border: 1px solid var(--ah-card-line);
	border-radius: var(--ah-r-card);
	background: var(--ah-card);
	box-shadow: var(--ah-shadow);
	color: var(--ah-ink);
	text-decoration: none;
	transition: border-color .25s, box-shadow .25s, transform .25s var(--ah-ease);
}
.ah-st .ah-st__goal.ah-st__goal:hover { border-color: var(--ah-tint-line); box-shadow: var(--ah-shadow-hi); transform: translateY(-2px); }
.ah-st .ah-st__goal.ah-st__goal[aria-current="true"] { border-color: var(--ah-navy); background: var(--ah-navy); color: var(--ah-on-navy); }
.ah-st .ah-st__goal:focus-visible { outline: 2px solid var(--ah-gold); outline-offset: 3px; }
.ah-st .ah-st__goal .ah-tile { flex: none; }
.ah-st .ah-st__goal-b { display: grid; gap: 2px; min-width: 0; }
.ah-st .ah-st__goal-b b { color: var(--ah-navy); font-family: var(--ah-f-display); font-size: 1.04rem; font-weight: 700; line-height: 1.4; }
.ah-st .ah-st__goal-b small { color: var(--ah-muted); font-size: .86rem; line-height: 1.6; }
.ah-st .ah-st__goal[aria-current="true"] .ah-st__goal-b b { color: var(--ah-on-navy); }
.ah-st .ah-st__goal[aria-current="true"] .ah-st__goal-b small { color: var(--ah-on-navy-muted); }
.ah-st .ah-st__goal-n {
	margin-inline-start: auto;
	min-width: 28px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--ah-tint);
	color: var(--ah-ink-gold);
	font-family: var(--ah-f-mono);
	font-size: .78rem;
	text-align: center;
}
.ah-st .ah-st__goal[aria-current="true"] .ah-st__goal-n { background: var(--ah-gold); color: var(--ah-deep); }

/* ---------- tabs, search, count ---------- */
.ah-st .ah-st__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-block-start: 6px; }
.ah-st .ah-st__tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.ah-st .ah-st__tab.ah-st__tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 15px;
	border: 1px solid var(--ah-line);
	border-radius: 999px;
	background: var(--ah-card);
	color: var(--ah-ink);
	font-family: var(--ah-f-body);
	font-size: .9rem;
	font-weight: 600;
	line-height: 1.5;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color .25s, color .25s, background-color .25s;
}
.ah-st .ah-st__tab.ah-st__tab:hover { border-color: var(--ah-ink-gold); color: var(--ah-ink-gold); }
.ah-st .ah-st__tab.ah-st__tab[aria-current="true"] { border-color: var(--ah-navy); background: var(--ah-navy); color: var(--ah-on-navy); }
.ah-st .ah-st__tab span { color: var(--ah-soft); font-family: var(--ah-f-mono); font-size: .74rem; font-weight: 500; }
.ah-st .ah-st__tab[aria-current="true"] span { color: var(--ah-gold-hi); }
.ah-st .ah-st__tab:focus-visible { outline: 2px solid var(--ah-gold); outline-offset: 2px; }

.ah-st .ah-st__search { position: relative; flex: 0 1 320px; margin: 0; }
.ah-st .ah-st__search svg { position: absolute; inset-block-start: 50%; inset-inline-start: 14px; transform: translateY(-50%); color: var(--ah-soft); pointer-events: none; }
.ah-st .ah-st__q.ah-st__q {
	width: 100%;
	height: 44px;
	margin: 0;
	padding-block: 0;
	padding-inline: 42px 14px;
	border: 1px solid var(--ah-line);
	border-radius: 999px;
	background: var(--ah-card);
	box-shadow: none;
	color: var(--ah-ink);
	font-family: var(--ah-f-body);
	font-size: .95rem;
}
.ah-st .ah-st__q.ah-st__q:focus { border-color: var(--ah-gold); outline: 2px solid color-mix(in srgb, var(--ah-gold) 35%, transparent); outline-offset: 0; }
.ah-st .ah-st__count { margin: 0; color: var(--ah-muted); font-size: .86rem; }

/* ---------- cards ---------- */
.ah-st .ah-st__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.ah-st .ah-st__card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--ah-card-line);
	border-radius: var(--ah-r-card);
	background: var(--ah-card);
	box-shadow: var(--ah-shadow);
	transition: box-shadow .3s, border-color .3s;
}
.ah-st .ah-st__card[hidden] { display: none; }
.ah-st .ah-st__card:hover { border-color: var(--ah-tint-line); box-shadow: var(--ah-shadow-hi); }
.ah-st .ah-st__body { display: grid; align-content: start; gap: 10px; padding: 20px 20px 6px; flex: 1 1 auto; }
.ah-st .ah-st__top { display: flex; align-items: center; gap: 12px; }
.ah-st .ah-st__top .ah-tile { flex: none; }
.ah-st .ah-st__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.ah-st .ah-st__chips span { padding: 3px 10px; border-radius: 999px; font-size: .76rem; font-weight: 700; line-height: 1.5; }
.ah-st .ah-st__kind { background: var(--ah-tint); color: var(--ah-ink-gold); }
.ah-st .ah-st__pick { background: var(--ah-navy); color: var(--ah-gold-hi); }
.ah-st .ah-st__status { background: color-mix(in srgb, #2E8E5A 12%, #fff); color: #23704A; }
.ah-st .ah-st__hot { background: color-mix(in srgb, var(--ah-red, #C0392B) 12%, #fff); color: var(--ah-red, #C0392B); }
.ah-st .ah-st__title { margin: 0; font-family: var(--ah-f-display); font-size: var(--ah-fs-card); font-weight: 700; line-height: 1.45; }
.ah-st .ah-st__title a { color: var(--ah-navy); text-decoration: none; }
.ah-st .ah-st__title a:hover { color: var(--ah-ink-gold); }
.ah-st .ah-st__pitch { margin: 0; color: var(--ah-ink); font-size: .96rem; line-height: 1.75; }
.ah-st .ah-st__for { margin: 0; color: var(--ah-muted); font-size: .9rem; line-height: 1.7; }
.ah-st .ah-st__for b { color: var(--ah-navy); font-weight: 700; }
.ah-st .ah-st__pts { display: grid; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
.ah-st .ah-st__pts li { display: flex; align-items: flex-start; gap: 8px; color: var(--ah-ink); font-size: .9rem; line-height: 1.65; }
.ah-st .ah-st__pts svg { flex: none; margin-block-start: 5px; color: var(--ah-ink-gold); }
.ah-st .ah-st__when { display: flex; align-items: center; gap: 8px; margin: 2px 0 0; color: var(--ah-navy); font-size: .88rem; font-weight: 600; }
.ah-st .ah-st__when svg { flex: none; color: var(--ah-ink-gold); }

.ah-st .ah-st__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: 12px;
	margin-block-start: 12px;
	padding: 16px 20px 20px;
	border-block-start: 1px solid var(--ah-card-line);
}
.ah-st .ah-st__price { display: grid; gap: 2px; margin: 0; }
.ah-st .ah-st__now { color: var(--ah-navy); font-family: var(--ah-f-display); font-size: 1.45rem; font-weight: 800; line-height: 1.2; }
.ah-st .ah-st__now .ah-cur { font-size: .92rem; font-weight: 700; }
.ah-st .ah-st__was { color: var(--ah-soft); font-size: .84rem; }
.ah-st .ah-st__per { color: var(--ah-ink-gold); font-size: .84rem; font-weight: 700; }
.ah-st .ah-st__go.ah-btn { padding: 11px 18px; font-size: .92rem; white-space: nowrap; }

.ah-st .ah-st__empty { padding: 28px; border: 1px dashed var(--ah-line); border-radius: var(--ah-r-card); background: var(--ah-card); color: var(--ah-muted); text-align: center; }
.ah-st .ah-st__empty[hidden] { display: none; }
.ah-st .ah-st__empty p { margin: 0 0 8px; }

@media (max-width: 1200px) {
	.ah-st .ah-st__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
	.ah-st .ah-st__goals { grid-template-columns: 1fr; gap: 10px; }
	.ah-st .ah-st__goal.ah-st__goal { padding: 12px 14px; }
	.ah-st .ah-st__search { flex: 1 1 100%; }
}
@media (max-width: 767px) {
	.ah-st { gap: 14px; }
	/* goals and tabs scroll sideways: the products show early on a phone */
	.ah-st .ah-st__goals { display: flex; overflow-x: auto; margin-inline: calc(-1 * var(--ah-gutter, 16px)); padding-inline: var(--ah-gutter, 16px); padding-block-end: 6px; scroll-snap-type: x mandatory; scroll-padding-inline: var(--ah-gutter, 16px); scrollbar-width: none; }
	.ah-st .ah-st__goals::-webkit-scrollbar { display: none; }
	.ah-st .ah-st__goal.ah-st__goal { flex: 0 0 78%; scroll-snap-align: start; box-shadow: none; }
	.ah-st .ah-st__goal-b small { display: none; }
	.ah-st .ah-st__tabs { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--ah-gutter, 16px)); padding-inline: var(--ah-gutter, 16px); padding-block-end: 4px; scrollbar-width: none; }
	.ah-st .ah-st__tabs::-webkit-scrollbar { display: none; }
	.ah-st .ah-st__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.ah-st .ah-st__body { padding: 16px 16px 4px; }
	.ah-st .ah-st__foot { padding: 14px 16px 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.ah-st .ah-st__goal.ah-st__goal { transition: none; }
	.ah-st .ah-st__goal.ah-st__goal:hover { transform: none; }
}