/**
 * Free Style 3 — Components
 * Buttons, headings, cards, badges, rails (scroll-snap sliders), grids,
 * quote cards, steps, banners, notices, star ratings.
 */

/* ---- Buttons ---- */
.fsp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--fsp-space-2);
	padding: var(--fsp-space-3) var(--fsp-space-6);
	font-weight: 700;
	font-size: var(--fsp-text-md);
	line-height: 1.2;
	border-radius: var(--fsp-radius-md);
	border: 1.5px solid transparent;
	text-decoration: none;
	transition: background-color var(--fsp-dur-fast) var(--fsp-ease),
		border-color var(--fsp-dur-fast) var(--fsp-ease),
		color var(--fsp-dur-fast) var(--fsp-ease),
		transform var(--fsp-dur-fast) var(--fsp-ease);
}

.fsp-btn:hover {
	text-decoration: none;
	transform: translateY(-1px);
}

.fsp-btn--primary {
	background: var(--fsp-primary);
	color: var(--fsp-on-primary);
}

.fsp-btn--primary:hover {
	background: var(--fsp-primary-hover);
	color: var(--fsp-on-primary);
}

.fsp-btn--primary:active {
	background: var(--fsp-primary-active);
}

.fsp-btn--secondary {
	background: var(--fsp-surface);
	border-color: var(--fsp-green-600);
	color: var(--fsp-green-700);
}

.fsp-btn--secondary:hover {
	background: var(--fsp-green-50);
	color: var(--fsp-green-700);
}

.fsp-btn--ghost {
	background: transparent;
	color: var(--fsp-link);
	padding-inline: var(--fsp-space-3);
}

.fsp-btn--ghost:hover {
	text-decoration: underline;
}

/* Primary button sitting on a dark/green flood */
.fsp-btn--on-dark {
	background: var(--fsp-surface);
	color: var(--fsp-green-900);
}

.fsp-btn--on-dark:hover {
	background: var(--fsp-green-50);
	color: var(--fsp-green-900);
}

/* ---- Section headings ---- */
.fsp-eyebrow {
	margin: 0 0 var(--fsp-space-2);
	font-size: var(--fsp-text-sm);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fsp-green-700);
}

.fsp-section-heading {
	max-width: 640px;
	margin-block-end: var(--fsp-space-8);
}

.fsp-section-heading__lead {
	color: var(--fsp-text-soft);
	font-size: var(--fsp-text-lg);
}

/* ---- Grids ---- */
.fsp-grid {
	display: grid;
	gap: var(--fsp-space-6);
	grid-template-columns: 1fr;
}

/* tablet ≥48rem */
@media (min-width: 48rem) {
	.fsp-grid--2 { grid-template-columns: repeat(2, 1fr); }
	.fsp-grid--3 { grid-template-columns: repeat(2, 1fr); }
	.fsp-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

/* desktop ≥64rem */
@media (min-width: 64rem) {
	.fsp-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.fsp-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Cards ---- */
.fsp-card {
	background: var(--fsp-surface);
	border: 1px solid var(--fsp-border);
	border-radius: var(--fsp-radius-lg);
	overflow: hidden;
	box-shadow: var(--fsp-shadow-sm);
	transition: box-shadow var(--fsp-dur-med) var(--fsp-ease),
		transform var(--fsp-dur-med) var(--fsp-ease);
}

.fsp-card:hover {
	box-shadow: var(--fsp-shadow-md);
}

.fsp-card--flat {
	box-shadow: none;
}

.fsp-card--tint {
	background: var(--fsp-green-50);
	border-color: var(--fsp-green-100);
}

.fsp-card__media img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.fsp-card__body {
	padding: var(--fsp-space-6);
}

.fsp-card__title {
	font-size: var(--fsp-text-xl);
	margin-block-end: var(--fsp-space-2);
}

.fsp-card__text {
	color: var(--fsp-text-soft);
}

.fsp-card__link {
	font-weight: 700;
}

/* Category card */
.fsp-cat-card {
	display: flex;
	flex-direction: column;
	gap: var(--fsp-space-2);
	background: var(--fsp-surface);
	border: 1px solid var(--fsp-border);
	border-radius: var(--fsp-radius-lg);
	padding: var(--fsp-space-4);
	text-align: center;
	color: var(--fsp-heading);
	transition: box-shadow var(--fsp-dur-med) var(--fsp-ease),
		border-color var(--fsp-dur-med) var(--fsp-ease);
}

.fsp-cat-card:hover {
	text-decoration: none;
	border-color: var(--fsp-green-300);
	box-shadow: var(--fsp-shadow-md);
}

.fsp-cat-card__media {
	display: block;
	background: var(--fsp-ink-075);
	border-radius: var(--fsp-radius-md);
	overflow: hidden;
}

.fsp-cat-card__media img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

.fsp-cat-card__name {
	font-weight: 700;
}

.fsp-cat-card__count {
	font-size: var(--fsp-text-sm);
	color: var(--fsp-text-soft);
}

/* Directory card */
.fsp-dir-card {
	display: flex;
	align-items: center;
	gap: var(--fsp-space-4);
	background: var(--fsp-surface);
	border: 1px solid var(--fsp-border);
	border-radius: var(--fsp-radius-md);
	padding: var(--fsp-space-4);
	color: var(--fsp-heading);
	font-weight: 700;
}

.fsp-dir-card:hover {
	text-decoration: none;
	border-color: var(--fsp-green-300);
}

.fsp-dir-card__media img {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: var(--fsp-radius-sm);
}

.fsp-dir-card__arrow {
	margin-inline-start: auto;
	color: var(--fsp-green-600);
}

/* Product card (rails) */
.fsp-product-card {
	display: flex;
	flex-direction: column;
	gap: var(--fsp-space-2);
	color: var(--fsp-heading);
}

.fsp-product-card:hover {
	text-decoration: none;
}

.fsp-product-card__media {
	background: var(--fsp-surface);
	border: 1px solid var(--fsp-border);
	border-radius: var(--fsp-radius-lg);
	overflow: hidden;
}

.fsp-product-card__media img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	transition: transform var(--fsp-dur-med) var(--fsp-ease);
}

.fsp-product-card:hover .fsp-product-card__media img {
	transform: scale(1.03);
}

.fsp-product-card__name {
	font-weight: 600;
	font-size: var(--fsp-text-sm);
}

.fsp-product-card__price {
	color: var(--fsp-green-700);
	font-weight: 700;
	font-size: var(--fsp-text-sm);
}

/* ---- Rails (scroll-snap sliders) ---- */
.fsp-rail {
	display: flex;
	gap: var(--fsp-space-4);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-block-end: var(--fsp-space-2);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: var(--fsp-ink-300) transparent;
}

.fsp-rail__item {
	flex: 0 0 clamp(160px, 40vw, 230px);
	scroll-snap-align: start;
}

.fsp-rail-wrap {
	position: relative;
}

.fsp-rail-arrow {
	position: absolute;
	inset-block-start: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	background: var(--fsp-surface);
	border: 1px solid var(--fsp-border);
	border-radius: var(--fsp-radius-pill);
	box-shadow: var(--fsp-shadow-md);
	color: var(--fsp-heading);
}

.fsp-rail-arrow:hover {
	color: var(--fsp-green-700);
	border-color: var(--fsp-green-300);
}

.fsp-rail-arrow--prev { inset-inline-start: -12px; }
.fsp-rail-arrow--next { inset-inline-end: -12px; }

.fsp-rail-arrow[disabled] {
	opacity: 0.35;
	cursor: default;
}

/* Brand logo rail */
.fsp-brand-rail {
	align-items: center;
}

.fsp-brand-rail__logo {
	flex-basis: clamp(110px, 20vw, 160px);
	opacity: 0.75;
}

.fsp-brand-rail__logo img {
	filter: grayscale(1);
	object-fit: contain;
	aspect-ratio: 3 / 2;
	transition: filter var(--fsp-dur-med) var(--fsp-ease), opacity var(--fsp-dur-med) var(--fsp-ease);
}

.fsp-brand-rail__logo:hover img,
.fsp-brand-rail--color .fsp-brand-rail__logo img {
	filter: none;
	opacity: 1;
}

/* ---- Quote cards & stars ---- */
.fsp-quote-card {
	margin: 0;
	background: var(--fsp-surface);
	border: 1px solid var(--fsp-border);
	border-radius: var(--fsp-radius-lg);
	padding: var(--fsp-space-6);
	display: flex;
	flex-direction: column;
	gap: var(--fsp-space-3);
}

.fsp-quote-card__quote {
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--fsp-text);
	font-size: var(--fsp-text-lg);
}

.fsp-quote-card__meta {
	display: flex;
	flex-direction: column;
}

.fsp-quote-card__name {
	font-weight: 700;
	color: var(--fsp-heading);
}

.fsp-quote-card__detail {
	font-size: var(--fsp-text-sm);
	color: var(--fsp-text-soft);
}

.fsp-stars {
	display: inline-flex;
	gap: 2px;
	color: var(--fsp-ink-150);
}

.fsp-stars__star--on {
	color: var(--fsp-warning);
}

/* ---- Trust strip ---- */
.fsp-trust-strip {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--fsp-space-4) var(--fsp-space-8);
	padding-block: var(--fsp-space-3);
	font-weight: 700;
	font-size: var(--fsp-text-sm);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.fsp-trust-strip__item {
	display: inline-flex;
	align-items: center;
	gap: var(--fsp-space-2);
}

.fsp-trust-strip__item svg {
	color: var(--fsp-green-500);
	flex: none;
}

/* ---- Steps ---- */
.fsp-steps {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: var(--fsp-space-6);
}

/* tablet ≥48rem */
@media (min-width: 48rem) {
	.fsp-steps {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* desktop ≥64rem */
@media (min-width: 64rem) {
	.fsp-steps {
		grid-template-columns: repeat(4, 1fr);
	}
}

.fsp-steps__item {
	background: var(--fsp-surface);
	border: 1px solid var(--fsp-border);
	border-radius: var(--fsp-radius-lg);
	padding: var(--fsp-space-6);
}

.fsp-steps__number {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: var(--fsp-radius-pill);
	background: var(--fsp-green-100);
	color: var(--fsp-green-900);
	font-weight: 800;
	margin-block-end: var(--fsp-space-3);
}

.fsp-steps__title {
	font-size: var(--fsp-text-lg);
	margin-block-end: var(--fsp-space-2);
}

.fsp-steps__text {
	margin: 0;
	color: var(--fsp-text-soft);
}

/* ---- Banners ---- */
.fsp-banner__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--fsp-space-6);
	border-radius: var(--fsp-radius-lg);
	padding: var(--fsp-space-8);
}

.fsp-banner--light .fsp-banner__inner {
	background: var(--fsp-green-50);
	border: 1px solid var(--fsp-green-100);
}

.fsp-banner--green .fsp-banner__inner,
.fsp-banner--rewards .fsp-banner__inner {
	background: var(--fsp-green-900);
}

.fsp-banner--dark .fsp-banner__inner {
	background: var(--fsp-ink-900);
}

.fsp-banner--green .fsp-banner__headline,
.fsp-banner--rewards .fsp-banner__headline,
.fsp-banner--dark .fsp-banner__headline {
	color: var(--fsp-surface);
}

.fsp-banner--green .fsp-banner__text,
.fsp-banner--rewards .fsp-banner__text,
.fsp-banner--dark .fsp-banner__text {
	color: var(--fsp-green-100);
}

.fsp-banner__headline {
	margin-block-end: var(--fsp-space-2);
}

.fsp-banner__text {
	margin: 0;
	max-width: 52ch;
}

/* ---- Notices ---- */
.fsp-notice,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-inline-start: 4px solid var(--fsp-info);
	background: var(--fsp-surface);
	border-radius: var(--fsp-radius-sm);
	padding: var(--fsp-space-4) var(--fsp-space-6);
	margin-block-end: var(--fsp-space-4);
	box-shadow: var(--fsp-shadow-sm);
}

.woocommerce-message {
	border-inline-start-color: var(--fsp-success);
}

.woocommerce-error {
	border-inline-start-color: var(--fsp-danger);
}