/**
 * SPD Products — Homepage featured products section
 * ====================================================
 * Phase 3c component styles. Reproduces the React "Produits Populaires"
 * section (HomePage.tsx, section 3) using the centralized SPD design-system
 * tokens for typography/radius/shadow.
 *
 * The product card visual styles now live in the canonical component
 * stylesheet assets/css/spd-product-card.css and are shared by the shop,
 * single-product related/up-sells, search results and the homepage grid.
 *
 * The React site is the visual source of truth.
 *
 * Loaded after spd-categories.css.
 */

.spd-products {
	/* Section-scoped brand colors — reference the centralized UI tokens
	   (defined in spd-design-system.css) so the validated React values
	   live in one place. The scoped aliases keep the section CSS readable. */
	--spd-prod-blue:       var(--spd-ui-blue);
	--spd-prod-blue-dark:   var(--spd-ui-blue-dark);
	--spd-prod-red:         var(--spd-ui-red);
	--spd-prod-gold:         var(--spd-ui-gold);
	--spd-prod-paly:         #8E1616;
	--spd-prod-diha:         #D97706;

	/* Neutrals (Tailwind slate scale, raw values). */
	--spd-prod-slate-50:   #F8FAFC;
	--spd-prod-slate-100: #F1F5F9;
	--spd-prod-slate-200: #E2E8F0;
	--spd-prod-slate-200-90: rgba(226, 232, 240, 0.9);
	--spd-prod-slate-300: #CBD5E1;
	--spd-prod-slate-400: #94A3B8;
	--spd-prod-slate-500: #64748B;
	--spd-prod-slate-700: #334155;
	--spd-prod-slate-800: #1E293B;
	--spd-prod-slate-900: #0F172A;
	--spd-prod-blue-40: rgba(15, 91, 148, 0.40);

	--spd-prod-focus-ring: 0 0 0 3px rgba(15, 91, 148, 0.35);

	/* Transitions — match the React Tailwind durations. */
	--spd-prod-t-200: 200ms cubic-bezier(0.4, 0, 0.2, 1); /* duration-200 */
	--spd-prod-t-300: 300ms cubic-bezier(0.4, 0, 0.2, 1); /* duration-300 */

	/* py-10 sm:py-14 | bg-white | border-b border-slate-100 */
	padding-top: 40px;
	padding-bottom: 40px;
	background-color: #fff;
	border-bottom: 1px solid var(--spd-prod-slate-100);
}

@media (min-width: 640px) {
	.spd-products {
		padding-top: 56px;  /* sm:py-14 → 56px */
		padding-bottom: 56px;
	}
}

/* React uses `max-w-7xl mx-auto px-4 sm:px-6` (24px from sm up). */
@media (min-width: 1024px) {
	.spd-products .spd-container {
		padding-left: 24px;
		padding-right: 24px;
	}
}

/* ============================================================
   1. Section header
   ============================================================ */
.spd-products__header {
	display: flex;
	flex-direction: column;
	gap: 12px;            /* gap-3 */
	margin-bottom: 24px;  /* mb-6 */
}

@media (min-width: 768px) {
	.spd-products__header {
		flex-direction: row;  /* md:flex-row */
		align-items: flex-end; /* md:items-end */
		justify-content: space-between;
	}
}

.spd-products__heading {
	display: block;
}

.spd-products__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;                         /* gap-1.5 */
	font-size: 12px;                  /* text-xs */
	font-weight: var(--spd-font-weight-bold); /* 700 */
	text-transform: uppercase;
	letter-spacing: var(--spd-tracking-wider); /* 0.05em */
	color: var(--spd-prod-red);
	margin-bottom: 4px;              /* mb-1 */
	line-height: 1;
}

.spd-products__eyebrow .spd-icon {
	width: 14px;   /* Sparkles size={14} */
	height: 14px;
	flex-shrink: 0;
}

.spd-products__title {
	margin: 0;
	font-size: 24px;                  /* text-2xl */
	font-weight: var(--spd-font-weight-black); /* 900 */
	color: var(--spd-prod-slate-900);
	letter-spacing: var(--spd-tracking-tight); /* -0.025em */
	line-height: 1.1;
}

@media (min-width: 640px) {
	.spd-products__title {
		font-size: 30px;              /* sm:text-3xl */
	}
}

.spd-products__desc {
	margin: 2px 0 0;                  /* mt-0.5 */
	font-size: 12px;                  /* text-xs */
	color: var(--spd-prod-slate-500);
	line-height: var(--spd-line-height-normal);
}

@media (min-width: 640px) {
	.spd-products__desc {
		font-size: 14px;              /* sm:text-sm */
	}
}

.spd-products__view-all {
	display: inline-flex;
	align-items: center;
	gap: 6px;                         /* gap-1.5 */
	font-size: 12px;                  /* text-xs */
	font-weight: var(--spd-font-weight-bold); /* 700 */
	color: var(--spd-prod-blue);
	text-decoration: none;
	align-self: flex-start;          /* self-start */
	transition: color var(--spd-prod-t-200);
}

.spd-products__view-all:hover,
.spd-products__view-all:focus-visible {
	color: var(--spd-prod-blue-dark); /* hover:text-[#0A436D] */
	text-decoration: underline;
	outline: none;
}

.spd-products__view-all:focus-visible {
	box-shadow: var(--spd-prod-focus-ring);
	border-radius: 2px;
}

.spd-products__view-all .spd-icon {
	width: 15px;   /* ArrowRight size={15} */
	height: 15px;
	flex-shrink: 0;
}

@media (min-width: 768px) {
	.spd-products__view-all {
		font-size: 14px;              /* sm:text-sm */
		align-self: auto;             /* md:self-auto */
	}
}

/* ============================================================
   2. Filter tabs
   ============================================================ */
.spd-products__tabs {
	display: flex;
	align-items: center;
	gap: 8px;                         /* gap-2 */
	overflow-x: auto;
	padding-bottom: 8px;              /* pb-2 */
	margin-bottom: 24px;              /* mb-6 */
	max-width: 100%;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;             /* scrollbar-none (Firefox) */
}

.spd-products__tabs::-webkit-scrollbar {
	display: none;                     /* scrollbar-none (WebKit) */
}

.spd-products__tab {
	flex-shrink: 0;
	padding: 8px 16px;                 /* px-4 py-2 */
	border: none;
	border-radius: var(--spd-radius-xl); /* rounded-xl (12px) */
	font-size: 12px;                  /* text-xs */
	font-weight: var(--spd-font-weight-bold); /* 700 */
	font-family: var(--spd-font-family);
	color: var(--spd-prod-slate-700);
	background-color: var(--spd-prod-slate-100); /* bg-slate-100 */
	cursor: pointer;
	white-space: nowrap;
	transition: background-color var(--spd-prod-t-200), color var(--spd-prod-t-200);
}

.spd-products__tab:hover {
	background-color: var(--spd-prod-slate-200); /* hover:bg-slate-200 */
}

.spd-products__tab.is-active {
	background-color: var(--spd-prod-blue); /* bg-[#0F5B94] */
	color: #fff;
	box-shadow: var(--spd-shadow-xs); /* shadow-xs */
}

.spd-products__tab:focus-visible {
	outline: none;
	box-shadow: var(--spd-prod-focus-ring);
}

@media (min-width: 640px) {
	.spd-products__tab {
		font-size: 14px;              /* sm:text-sm */
	}
}

/* ============================================================
   3. Product grid
   ============================================================ */
.spd-products__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr)); /* grid-cols-2 — minmax(0,…) lets tracks shrink below card min-content on ≤360px (Tailwind parity) */
	gap: 12px;                             /* gap-3 */
}

@media (min-width: 640px) {
	.spd-products__grid {
		gap: 24px;                             /* sm:gap-6 */
	}
}

@media (min-width: 1024px) {
	.spd-products__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr)); /* lg:grid-cols-4 */
	}
}

/* ============================================================
   4. Product card
   ============================================================
   The card visual styles now live in the canonical component stylesheet
   assets/css/spd-product-card.css so the same card renders identically
   on the homepage and in the shop. The styles previously declared here
   have been removed to avoid duplication and drift. */