/**
 * Excel Industries — Affiliate Shop styles.
 *
 * Deliberately references the theme's existing CSS custom properties
 * (--color-primary, --space-md, etc.) so the shop visually matches the
 * rest of the site automatically, without duplicating any design tokens
 * here. Falls back to sensible plain values if those variables aren't
 * present (e.g. previewing this shortcode under a different theme).
 */

.excel-shop {
	--_primary: var(--color-primary, #0B3A67);
	--_primary-dark: var(--color-primary-dark, #082846);
	--_secondary: var(--color-secondary, #C9A227);
	--_bg-light: var(--color-bg-light, #F6F7F9);
	--_text-muted: var(--color-text-muted, #5B6472);
	--_border: var(--color-border, #E5E8EC);
	--_radius-md: var(--radius-md, 16px);
	--_radius-pill: var(--radius-pill, 999px);
	--_shadow-sm: var(--shadow-sm, 0 2px 8px rgba(15,23,42,0.06));
	--_shadow-lg: var(--shadow-lg, 0 16px 48px rgba(15,23,42,0.12));
	--_font-heading: var(--font-heading, sans-serif);
	--_space-xs: var(--space-xs, 0.75rem);
	--_space-sm: var(--space-sm, 1rem);
	--_space-md: var(--space-md, 1.5rem);
	--_space-lg: var(--space-lg, 2.5rem);
}

.excel-shop__disclosure {
	background: var(--_bg-light);
	border-radius: var(--_radius-md);
	padding: var(--_space-sm) var(--_space-md);
	font-size: 0.875rem;
	color: var(--_text-muted);
	margin-bottom: var(--_space-lg);
}

.excel-shop__category-description {
	color: var(--_text-muted);
	font-size: 0.95rem;
	max-width: 640px;
	margin: -0.5rem 0 var(--_space-lg);
}

.excel-shop__back-link {
	display: inline-block;
	color: var(--_primary);
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
	margin-bottom: var(--_space-md);
}

.excel-shop__back-link:hover {
	text-decoration: underline;
}

.excel-shop__category-heading {
	font-family: var(--_font-heading);
	color: var(--_primary-dark);
	margin: 0 0 0.25rem;
}

/* Category landing grid */
.excel-shop__category-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--_space-md);
}

@media (min-width: 640px) {
	.excel-shop__category-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1024px) {
	.excel-shop__category-grid {
		grid-template-columns: repeat(var(--excel-shop-columns, 4), 1fr);
	}
}

.excel-shop__category-card {
	display: block;
	background: #fff;
	border-radius: var(--_radius-md);
	box-shadow: var(--_shadow-sm);
	overflow: hidden;
	text-decoration: none;
	transition: box-shadow 200ms ease, transform 200ms ease;
}

.excel-shop__category-card:hover {
	box-shadow: var(--_shadow-lg);
	transform: translateY(-4px);
}

.excel-shop__category-media {
	aspect-ratio: 4 / 3;
	background: var(--_bg-light);
}

.excel-shop__category-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.excel-shop__category-body {
	padding: var(--_space-md);
}

.excel-shop__category-title {
	font-family: var(--_font-heading);
	font-size: 1.1rem;
	font-weight: 600;
	margin: 0 0 0.25rem;
	color: var(--_primary-dark);
}

.excel-shop__category-body .excel-shop__category-description {
	margin: 0 0 0.5rem;
	font-size: 0.9rem;
}

.excel-shop__category-count {
	display: inline-block;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--_secondary);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.excel-shop__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--_space-md);
}

@media (min-width: 640px) {
	.excel-shop__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1024px) {
	.excel-shop__grid {
		grid-template-columns: repeat(var(--excel-shop-columns, 4), 1fr);
	}
}

.excel-shop__card {
	background: #fff;
	border-radius: var(--_radius-md);
	box-shadow: var(--_shadow-sm);
	overflow: hidden;
	transition: box-shadow 200ms ease, transform 200ms ease;
}

.excel-shop__card:hover {
	box-shadow: var(--_shadow-lg);
	transform: translateY(-4px);
}

.excel-shop__media {
	aspect-ratio: 4 / 3;
	background: var(--_bg-light);
}

.excel-shop__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.excel-shop__body {
	padding: var(--_space-md);
}

.excel-shop__title {
	font-family: var(--_font-heading);
	font-size: 1.05rem;
	font-weight: 600;
	margin: 0 0 0.25rem;
	color: var(--_primary-dark);
}

.excel-shop__rating {
	color: var(--_secondary);
	letter-spacing: 1px;
	margin-bottom: 0.25rem;
}

.excel-shop__star-empty {
	color: var(--_border);
}

.excel-shop__price {
	font-family: var(--_font-heading);
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--_primary-dark);
	margin: 0.25rem 0 var(--_space-sm);
}

.excel-shop__button {
	display: inline-block;
	background: var(--_primary);
	color: #fff;
	font-weight: 600;
	font-size: 0.875rem;
	padding: 0.6rem 1.25rem;
	border-radius: var(--_radius-pill);
	text-decoration: none;
	transition: background-color 150ms ease, transform 150ms ease;
}

.excel-shop__button:hover {
	background: var(--_primary-dark);
	transform: translateY(-2px);
	color: #fff;
}