/**
 * SPD Shop — Boutique / Category / Tag archive styles
 * =====================================================
 * Phase 4B — Shop shell. Reproduces the React ShopPage.tsx layout using the
 * centralized SPD design-system tokens. Scoped to the `.spd-shop-archive`
 * body class (shop, product category, product tag archives only).
 *
 * Loaded conditionally on is_shop() || is_product_category() ||
 * is_product_tag() (see inc/enqueue.php). Depends on spd-design-system.css
 * and spd-shell.css for the global tokens.
 *
 * The React site is the visual source of truth.
 *
 * @package SPD_Child
 * @since   2.1.0
 */

/* ============================================================
   0. Astra container neutralization (shop archives only)
   ============================================================
   Astra wraps the shop in .site-content > .ast-container which adds
   its own max-width (1240px) and padding (20px/side). The React
   ShopPage uses max-w-7xl (1280px) + px-4 sm:px-6 directly, with no
   extra wrapper. Without neutralizing Astra's container, the shop
   gets double-constrained: Astra 1240px-40px = 1200px, then the shop
   adds its own 1280px max-width (clamped to 1200px) and 24px padding,
   yielding ~1152px content vs React's 1232px.

   Scope: .ast-woo-shop-archive (body class on shop/cat/tag archives
   only). Does NOT affect any other page. Does NOT modify Astra core
   files — this is a child-theme override.
   ============================================================ */
.ast-woo-shop-archive .site-content > .ast-container {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

/* Astra's base #primary{margin:4em 0} adds 64px top/bottom margin to
   the shop content. React ShopPage has no such margin — py-6 (24px)
   lives on .spd-shop itself. Neutralize #primary on shop archives. */
.ast-woo-shop-archive #primary {
	margin: 0;
	padding: 0;
}

/* Astra's .ast-woocommerce-container gets padding only under
   .ast-separate-container (not our case), but the base rule sets
   background-color:#fff which is harmless. Ensure no padding leaks. */
.ast-woo-shop-archive .ast-woocommerce-container {
	padding: 0;
}

/* ============================================================
   0b. Body line-height correction (shop scope)
   ============================================================
   Astra sets body line-height to 1.65 (--ast-body-line-height).
   Tailwind's preflight (used by the React app) sets 1.5. Elements
   without an explicit line-height inherit Astra's 1.65, making
   text blocks taller than React. Scope 1.5 on .spd-shop so the
   shop content matches React's vertical rhythm.
   ============================================================ */
.spd-shop {
	line-height: 1.5;
}

.spd-shop {
	/* Font-size tokens — override the design-system rem values with px
	   equivalents. Astra sets html { font-size: 91.2% } at ≤921px, which
	   shrinks 1rem from 16px to 14.592px. The React app uses the browser
	   default (100% = 16px) at ALL breakpoints. Without this override,
	   every rem-based font-size in the shop is 8.8% smaller than React
	   on tablet/mobile. Scoped to .spd-shop so other pages are unaffected. */
	--spd-font-size-xs:   12px;    /* Tailwind text-xs  = 0.75rem  = 12px */
	--spd-font-size-sm:   14px;    /* Tailwind text-sm  = 0.875rem = 14px */
	--spd-font-size-base: 16px;    /* Tailwind text-base = 1rem    = 16px */
	--spd-font-size-lg:   18px;    /* Tailwind text-lg  = 1.125rem = 18px */
	--spd-font-size-xl:   20px;    /* Tailwind text-xl  = 1.25rem  = 20px */
	--spd-font-size-2xl:  24px;    /* Tailwind text-2xl = 1.5rem   = 24px */
	--spd-font-size-3xl:  30px;    /* Tailwind text-3xl = 1.875rem = 30px */
	--spd-font-size-4xl:  36px;    /* Tailwind text-4xl = 2.25rem  = 36px */
	--spd-font-size-5xl:  48px;    /* Tailwind text-5xl = 3rem    = 48px */

	/* Radius tokens — same rem→px override for the same reason.
	   React uses Tailwind's rounded-md (6px), rounded-xl (12px),
	   rounded-2xl (16px) at ALL breakpoints. */
	--spd-radius-sm:  6px;    /* Tailwind rounded-md  = 0.375rem = 6px */
	--spd-radius-md:  8px;    /* Tailwind rounded-lg  = 0.5rem   = 8px */
	--spd-radius-lg:  12px;   /* Tailwind rounded-xl  = 0.75rem  = 12px */
	--spd-radius-xl:  16px;   /* Tailwind rounded-2xl = 1rem     = 16px */
	--spd-radius-2xl: 24px;   /* Tailwind rounded-3xl = 1.5rem   = 24px */
}

.spd-shop {
	/* 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-shop-blue:        var(--spd-ui-blue);
	--spd-shop-blue-dark:    var(--spd-ui-blue-dark);
	--spd-shop-blue-soft:    var(--spd-ui-blue-soft);
	--spd-shop-red:          var(--spd-ui-red);
	--spd-shop-gold:         var(--spd-ui-gold);

	/* Neutrals (Tailwind slate scale, raw values — matches the React). */
	--spd-shop-slate-50:     #F8FAFC;
	--spd-shop-slate-100:    #F1F5F9;
	--spd-shop-slate-200:    #E2E8F0;
	--spd-shop-slate-300:    #CBD5E1;
	--spd-shop-slate-400:    #94A3B8;
	--spd-shop-slate-500:    #64748B;
	--spd-shop-slate-600:    #475569;
	--spd-shop-slate-700:    #334155;
	--spd-shop-slate-800:    #1E293B;
	--spd-shop-slate-900:    #0F172A;

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

	--spd-shop-focus-ring: 0 0 0 2px var(--spd-ui-blue);  /* React focus:ring-2 focus:ring-[#0F5B94] */

	/* Product-card tokens (--spd-prod-*) are owned by the shared
	   spd-product-card.css component stylesheet, scoped to the
	   .spd-product-cards class carried by #spd-shop-page (Phase 5H.1). */

	/* React: max-w-7xl mx-auto px-4 sm:px-6 py-6 space-y-6 */
	max-width: var(--spd-container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--spd-container-padding);
	padding-right: var(--spd-container-padding);
	padding-top: 24px;
	padding-bottom: 24px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

@media (min-width: 640px) {
	.spd-shop {
		padding-left: var(--spd-container-padding-sm);
		padding-right: var(--spd-container-padding-sm);
	}
}

/* React ShopPage uses px-4 sm:px-6 only (no lg:px-8). The global token
   has an lg variant (2rem) used by other sections, but the shop must
   match the React exactly, so we do NOT add the lg override here. */

/* Breadcrumb: the shared .spd-breadcrumb component lives in
   spd-shell.css (global) — section 14. Pages supply data only. */


/* ============================================================
   2. Page header (title + count + search + filter toggle)
   React: flex flex-col md:flex-row md:items-center justify-between
   gap-4 pb-4 border-b border-slate-200
   ============================================================ */
.spd-shop__page-header {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--spd-shop-slate-200);
}

@media (min-width: 768px) {
	.spd-shop__page-header {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

.spd-shop__page-title-wrap {
	/* No max-width on mobile; React uses max-w-xl on category page hero only. */
}

.spd-shop__page-title {
	margin: 0;
	font-size: 24px;                       /* text-2xl */
	font-weight: var(--spd-font-weight-extrabold);
	color: var(--spd-shop-slate-900);
	letter-spacing: var(--spd-tracking-tight);
	line-height: 1.2;
}

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

.spd-shop__page-count {
	margin: 4px 0 0;                       /* mt-1 */
	font-size: var(--spd-font-size-xs);
	color: var(--spd-shop-slate-500);
	line-height: var(--spd-line-height-normal);
}

@media (min-width: 640px) {
	.spd-shop__page-count {
		font-size: var(--spd-font-size-sm);
	}
}

/* ── Search + filter toggle row ──
   React: flex items-center gap-2 max-w-md w-full */
.spd-shop__page-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 448px;                       /* React max-w-md (28rem) — applies at ALL breakpoints */
	width: 100%;
}

/* ── Search input ──
   React: relative flex-1, Search icon left, input pl-10 pr-4 py-2.5
   bg-white border rounded-xl text-xs sm:text-sm ring-[#0F5B94]
   Container: flex items-center gap-2 max-w-md w-full */
.spd-shop__search {
	position: relative;
	flex: 1;
	display: flex;
	align-items: center;
	max-width: 448px;                       /* React max-w-md (28rem) */
	width: 100%;
}

.spd-shop__search-icon {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--spd-shop-slate-400);
	pointer-events: none;
	display: inline-flex;
}

.spd-shop__search-icon .spd-icon {
	width: 18px;
	height: 18px;
}

.spd-shop .spd-shop__search-input {
	width: 100%;
	/* React uses type="text". A type="search" input gets browser-native
	   decorations (clear button, padding, search icon) that shift the
	   placeholder and cause the custom icon to overlap. Neutralize all
	   native search-field appearance. */
	-webkit-appearance: none;
	appearance: none;
	padding-left: 40px;                    /* pl-10 */
	padding-right: 16px;                  /* pr-4 */
	padding-top: 10px;                     /* py-2.5 */
	padding-bottom: 10px;
	background-color: var(--spd-surface);
	border: 1px solid var(--spd-shop-slate-200);
	border-radius: var(--spd-radius-lg);  /* React rounded-xl (12px) */
	font-family: var(--spd-font-family);
	font-size: var(--spd-font-size-xs);
	color: var(--spd-shop-slate-900);
	transition: border-color var(--spd-shop-t-200), box-shadow var(--spd-shop-t-200);
}

/* Remove the WebKit native clear button (safety even with type="text"). */
.spd-shop .spd-shop__search-input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.spd-shop .spd-shop__search-input::placeholder {
	color: var(--spd-shop-slate-400);
}

.spd-shop .spd-shop__search-input:focus {
	outline: none;
	border-color: var(--spd-shop-blue);
	/* React: focus:ring-2 focus:ring-[#0F5B94] → 2px solid blue ring */
	box-shadow: 0 0 0 2px var(--spd-shop-blue);
}

@media (min-width: 640px) {
	.spd-shop .spd-shop__search-input {
		font-size: var(--spd-font-size-sm);
	}
}

/* ── Mobile filter toggle ──
   React: lg:hidden px-3.5 py-2.5 bg-white border rounded-xl
   text-xs font-bold shadow-2xs */
.spd-shop__filter-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	padding: 10px 14px;
	background-color: var(--spd-surface);
	border: 1px solid var(--spd-shop-slate-200);
	border-radius: var(--spd-radius-lg);  /* React rounded-xl (12px) */
	font-family: var(--spd-font-family);
	font-size: var(--spd-font-size-xs);
	font-weight: var(--spd-font-weight-bold);
	color: var(--spd-shop-slate-700);
	box-shadow: var(--spd-shadow-2xs);     /* React shadow-2xs */
	cursor: pointer;
	transition: background-color var(--spd-shop-t-200), color var(--spd-shop-t-200);
}

.spd-shop__filter-toggle:hover {
	background-color: var(--spd-shop-slate-50);
}

.spd-shop__filter-toggle:focus-visible {
	outline: none;
	box-shadow: var(--spd-shop-focus-ring);
}

.spd-shop__filter-toggle .spd-icon {
	width: 16px;
	height: 16px;
	color: var(--spd-shop-blue);
}

/* Desktop: hide the filter toggle (sidebar is visible). */
@media (min-width: 1024px) {
	.spd-shop__filter-toggle {
		display: none;
	}
}

/* ============================================================
   3. Layout grid (sidebar + main)
   React: grid grid-cols-1 lg:grid-cols-4 gap-6 items-start
   ============================================================ */
.spd-shop__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;                             /* gap-6 */
	align-items: start;
}

@media (min-width: 1024px) {
	.spd-shop__layout {
		/* React: lg:grid-cols-4 → 4 equal tracks, sidebar spans 1, main spans 3 */
		grid-template-columns: repeat(4, 1fr);
	}
	.spd-shop__sidebar {
		grid-column: span 1;                 /* lg:col-span-1 */
	}
	.spd-shop__main {
		grid-column: span 3;                 /* lg:col-span-3 */
	}
}

/* ── Sidebar (desktop) ──
   React: hidden lg:block lg:col-span-1 sticky top-24 */
.spd-shop__sidebar {
	/* Hidden on mobile in 4B (no drawer yet). Visible on desktop. */
	display: none;
}

@media (min-width: 1024px) {
	.spd-shop__sidebar {
		display: block;
		position: sticky;
		top: 96px;                          /* top-24 = 6rem */
	}
}

/* ── Main column ──
   React: lg:col-span-3 space-y-4 */
.spd-shop__main {
	display: flex;
	flex-direction: column;
	gap: 16px;                             /* space-y-4 */
}

/* ============================================================
   4. Toolbar (result count + ordering)
   React: bg-white rounded-2xl border p-3 sm:p-4 shadow-2xs
   flex-wrap items-center justify-between gap-3
   ============================================================ */
.spd-shop__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background-color: var(--spd-surface);
	border: 1px solid var(--spd-shop-slate-200);
	border-radius: var(--spd-radius-xl);  /* React rounded-2xl (16px) */
	padding: 12px;                         /* p-3 */
	box-shadow: var(--spd-shadow-2xs);     /* React shadow-2xs */
}

@media (min-width: 640px) {
	.spd-shop__toolbar {
		padding: 16px;                     /* sm:p-4 */
	}
}

/* WooCommerce result count ("Showing X–Y of Z results") — re-styled to
   match the React "Affichage de {start}–{end} sur {total} articles". */
.spd-shop .woocommerce-result-count {
	margin: 0;
	font-size: var(--spd-font-size-xs);
	font-weight: var(--spd-font-weight-semibold);
	color: var(--spd-shop-slate-600);
}

.spd-shop .woocommerce-result-count strong {
	color: var(--spd-shop-slate-900);
	font-weight: var(--spd-font-weight-bold);
}

/* WooCommerce ordering form — re-styled to match the React select. */
.spd-shop .woocommerce-ordering {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* The visible "Trier par :" label is rendered as a separate
   .spd-shop__sort-label span (see spd_shop_sorting_label() in
   inc/woocommerce.php) and positioned next to the select via CSS
   order. The ::below pseudo is therefore disabled — without this,
   content: attr(data-spd-sort-label) resolves to an empty string
   (the attribute is absent) which still generates a pseudo-element
   and adds an extra 8px gap (form gap-2) between the label and the
   select, doubling React's intended 8px spacing to 16px. */
.spd-shop .woocommerce-ordering::before {
	content: none;
}

.spd-shop .woocommerce-ordering select.orderby {
	background-color: var(--spd-shop-slate-50);
	border: 1px solid var(--spd-shop-slate-200);
	border-radius: var(--spd-radius-lg);  /* React rounded-xl (12px) */
	padding: 6px 12px;
	font-family: var(--spd-font-family);
	font-size: var(--spd-font-size-xs);
	font-weight: var(--spd-font-weight-bold);
	color: var(--spd-shop-slate-800);
	cursor: pointer;
	transition: border-color var(--spd-shop-t-200), box-shadow var(--spd-shop-t-200);
}

.spd-shop .woocommerce-ordering select.orderby:focus {
	outline: none;
	border-color: var(--spd-shop-blue);
	box-shadow: var(--spd-shop-focus-ring);
}

/* Hide the WC ordering label text — the ::before content replaces it. */
.spd-shop .woocommerce-ordering label.screen-reader-text {
	/* keep accessible label but not visible */
}

/* ============================================================
   5. Product grid (native WooCommerce loop)
   React: grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 sm:gap-5
   WooCommerce: ul.products with grid-template-columns set by
   loop_shop_columns filter (3). The grid gap + responsive are styled here.
   ============================================================ */
.spd-shop ul.products {
	display: grid;
	grid-template-columns: 1fr;            /* grid-cols-1 (mobile) */
	gap: 16px;                             /* gap-4 */
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.spd-shop ul.products {
		grid-template-columns: repeat(2, 1fr); /* sm:grid-cols-2 */
		gap: 20px;                             /* sm:gap-5 */
	}
}

@media (min-width: 768px) {
	.spd-shop ul.products {
		grid-template-columns: repeat(3, 1fr); /* md:grid-cols-3 */
	}
}

/* Reset WooCommerce default list item styling so the grid layout works. */
.spd-shop ul.products li.product {
	margin: 0;
	width: auto;
	float: none;
}

/* ============================================================
   6. Pagination (SPD React-faithful — replaces WC default)
   React Pagination.tsx: bg-white rounded-2xl border border-slate-200
   p-3 sm:p-4 shadow-2xs flex flex-col md:flex-row items-center
   justify-between gap-4 select-none
   ============================================================ */
.spd-shop-pagination {
	background-color: var(--spd-surface);
	border: 1px solid var(--spd-shop-slate-200);
	border-radius: var(--spd-radius-xl);  /* React rounded-2xl (16px) */
	padding: 12px;                         /* p-3 */
	box-shadow: var(--spd-shadow-2xs);     /* React shadow-2xs */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 16px;                              /* gap-4 */
	user-select: none;
}

@media (min-width: 640px) {
	.spd-shop-pagination {
		padding: 16px;                     /* sm:p-4 */
	}
}

@media (min-width: 768px) {
	.spd-shop-pagination {
		flex-direction: row;
	}
}

/* ── Summary row (range + per-page) ──
   React: flex flex-wrap items-center justify-between w-full md:w-auto gap-3
   text-xs text-slate-600 */
.spd-shop-pagination__summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: 12px;                             /* gap-3 */
	font-size: var(--spd-font-size-xs);
	color: var(--spd-shop-slate-600);
}

@media (min-width: 768px) {
	.spd-shop-pagination__summary {
		width: auto;
	}
}

.spd-shop-pagination__range {
	font-weight: var(--spd-font-weight-medium);
}

.spd-shop-pagination__range strong {
	color: var(--spd-shop-slate-900);
	font-weight: var(--spd-font-weight-bold);
}

/* Per-page selector — React: flex items-center gap-1.5 ml-auto md:ml-2 */
.spd-shop-pagination__per-page {
	display: flex;
	align-items: center;
	gap: 6px;                              /* gap-1.5 */
	margin-left: auto;
}

@media (min-width: 768px) {
	.spd-shop-pagination__per-page {
		margin-left: 8px;                  /* md:ml-2 */
	}
}

.spd-shop-pagination__per-page-label {
	color: var(--spd-shop-slate-400);
	font-size: 11px;                       /* text-[11px] */
	font-weight: var(--spd-font-weight-medium);
}

@media (max-width: 639px) {
	.spd-shop-pagination__per-page-label {
		display: none;                       /* hidden sm:inline */
	}
}

.spd-shop-pagination__per-page-form {
	margin: 0;
	display: inline-flex;
}

.spd-shop .spd-shop-pagination__per-page-select {
	background-color: var(--spd-shop-slate-50);
	border: 1px solid var(--spd-shop-slate-200);
	color: var(--spd-shop-slate-800);
	font-family: var(--spd-font-family);
	font-size: var(--spd-font-size-xs);
	font-weight: var(--spd-font-weight-bold);
	border-radius: var(--spd-radius-md);   /* React rounded-lg (8px) */
	padding: 4px 8px;                       /* px-2 py-1 */
	cursor: pointer;
	transition: border-color var(--spd-shop-t-200), box-shadow var(--spd-shop-t-200);
}

.spd-shop .spd-shop-pagination__per-page-select:focus {
	outline: none;
	border-color: var(--spd-shop-blue);
	box-shadow: var(--spd-shop-focus-ring);
}

/* ── Nav row ──
   React: flex items-center gap-1 sm:gap-1.5 */
.spd-shop-pagination__nav {
	display: flex;
	align-items: center;
	gap: 4px;                              /* gap-1 */
}

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

/* Pagination buttons share base styles.
   React: min-h-[44px] sm:min-h-[38px] rounded-xl border text-xs font-bold.
   IMPORTANT: min-width applies ONLY to page buttons + first/last (which
   use min-w-[44px] sm:min-w-[38px]). Prev/Next have NO min-width in the
   React — they use px-2.5 sm:px-3 padding instead. Setting min-width on
   prev/next makes the pagination ~12px wider per button than the React,
   increasing the risk of horizontal overflow on narrow mobile viewports. */
.spd-shop-pagination__first,
.spd-shop-pagination__prev,
.spd-shop-pagination__next,
.spd-shop-pagination__last,
.spd-shop-pagination__page {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;                       /* mobile: 44px */
	border: 1px solid var(--spd-shop-slate-200);
	border-radius: var(--spd-radius-lg);   /* React rounded-xl (12px) */
	font-family: var(--spd-font-family);
	font-size: var(--spd-font-size-xs);
	font-weight: var(--spd-font-weight-bold);
	color: var(--spd-shop-slate-700);
	background-color: var(--spd-surface);
	text-decoration: none;
	box-shadow: var(--spd-shadow-xs);
	transition: background-color var(--spd-shop-t-200),
		color var(--spd-shop-t-200),
		border-color var(--spd-shop-t-200),
		opacity var(--spd-shop-t-200);
}

/* Page buttons + first/last: min-width (React: min-w-[44px]).
   First/last are hidden on mobile so the 44px is moot there, but
   kept for consistency. Page buttons have no padding class in the
   React (min-width handles the size). */
.spd-shop-pagination__first,
.spd-shop-pagination__last,
.spd-shop-pagination__page {
	min-width: 44px;                        /* mobile: 44px */
	padding: 0;
}

/* Prev/Next: padding instead of min-width (React: px-2.5 = 10px).
   NO min-width — the button sizes to its content (icon + optional text). */
.spd-shop-pagination__prev,
.spd-shop-pagination__next {
	padding: 0 10px;                        /* React px-2.5 */
	gap: 4px;
}

@media (min-width: 640px) {
	.spd-shop-pagination__first,
	.spd-shop-pagination__prev,
	.spd-shop-pagination__next,
	.spd-shop-pagination__last,
	.spd-shop-pagination__page {
		min-height: 38px;                   /* sm: 38px */
	}
	.spd-shop-pagination__first,
	.spd-shop-pagination__last,
	.spd-shop-pagination__page {
		min-width: 38px;                    /* sm: 38px */
	}
	.spd-shop-pagination__prev,
	.spd-shop-pagination__next {
		padding: 0 12px;                    /* React sm:px-3 */
	}
}

/* First/Last hidden on mobile (sm:flex). */
.spd-shop-pagination__first,
.spd-shop-pagination__last {
	display: none;
}

@media (min-width: 640px) {
	.spd-shop-pagination__first,
	.spd-shop-pagination__last {
		display: flex;
	}
}

/* "Précédent"/"Suivant" text hidden on mobile (hidden sm:inline). */
.spd-shop-pagination__btn-text {
	display: none;
}

@media (min-width: 640px) {
	.spd-shop-pagination__btn-text {
		display: inline;
	}
}

.spd-shop-pagination__first .spd-icon,
.spd-shop-pagination__prev .spd-icon,
.spd-shop-pagination__next .spd-icon,
.spd-shop-pagination__last .spd-icon {
	width: 16px;
	height: 16px;
}

/* Hover (non-disabled). */
.spd-shop-pagination__first:hover:not([aria-disabled="true"]),
.spd-shop-pagination__prev:hover:not([aria-disabled="true"]),
.spd-shop-pagination__next:hover:not([aria-disabled="true"]),
.spd-shop-pagination__last:hover:not([aria-disabled="true"]),
.spd-shop-pagination__page:hover:not(.is-active) {
	background-color: var(--spd-shop-slate-50);
	color: var(--spd-shop-blue);
	border-color: rgba(15, 91, 148, 0.4);
}

.spd-shop-pagination__first:focus-visible,
.spd-shop-pagination__prev:focus-visible,
.spd-shop-pagination__next:focus-visible,
.spd-shop-pagination__last:focus-visible,
.spd-shop-pagination__page:focus-visible {
	outline: none;
	box-shadow: var(--spd-shop-focus-ring);
}

/* Disabled state (React: opacity-40 cursor-not-allowed).
   Uses aria-disabled instead of the native `disabled` attribute
   because these are <a> elements (for native GET navigation) and
   `disabled` is not a valid attribute on anchors. */
.spd-shop-pagination__first[aria-disabled="true"],
.spd-shop-pagination__prev[aria-disabled="true"],
.spd-shop-pagination__next[aria-disabled="true"],
.spd-shop-pagination__last[aria-disabled="true"] {
	opacity: 0.4;
	cursor: not-allowed;
	color: var(--spd-shop-slate-300);
	border-color: var(--spd-shop-slate-200);
	background-color: var(--spd-shop-slate-50);
	pointer-events: none;
}

/* Active page (React: bg-[#0F5B94] text-white border-[#0F5B94]
   shadow-xs ring-2 ring-[#0F5B94]/20). */
.spd-shop-pagination__page.is-active {
	background-color: var(--spd-shop-blue);
	color: #fff;
	border-color: var(--spd-shop-blue);
	box-shadow: var(--spd-shadow-xs), 0 0 0 2px rgba(15, 91, 148, 0.2);
}

/* Page numbers container. */
.spd-shop-pagination__pages {
	display: flex;
	align-items: center;
	gap: 4px;
}

/* Ellipsis. */
.spd-shop-pagination__ellipsis {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	min-width: 32px;
	color: var(--spd-shop-slate-400);
	font-weight: var(--spd-font-weight-bold);
	user-select: none;
	font-size: var(--spd-font-size-xs);
}

@media (min-width: 640px) {
	.spd-shop-pagination__ellipsis {
		min-height: 38px;
	}
}

/* Hide the native WC pagination (in case remove_action fails). */
.spd-shop .woocommerce-pagination {
	display: none !important;
}

/* ============================================================
   7. Empty state (woocommerce_no_products_found)
   React ShopPage.tsx lines 300–317: white card rounded-3xl p-12
   text-center, 64px icon tile, title, description, reset button.
   ============================================================ */
.spd-shop-empty {
	background-color: #fff;
	border: 1px solid var(--spd-shop-slate-200);
	border-radius: var(--spd-radius-2xl);   /* React rounded-3xl (24px) */
	padding: 48px;                          /* p-12 */
	text-align: center;
}

.spd-shop-empty__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;                            /* w-16 */
	height: 64px;                           /* h-16 */
	margin: 0 auto 16px;                    /* mx-auto mb-4 */
	border-radius: var(--spd-radius-xl);    /* React rounded-2xl (16px) */
	background-color: var(--spd-shop-slate-100);
	color: var(--spd-shop-slate-400);
}

.spd-shop-empty__icon .spd-icon {
	width: 32px;                            /* PackageX size={32} */
	height: 32px;
}

.spd-shop-empty__title {
	margin: 0 0 4px;                        /* mb-1 */
	font-size: var(--spd-font-size-lg);     /* text-lg (18px) */
	font-weight: var(--spd-font-weight-bold);
	color: var(--spd-shop-slate-900);
}

.spd-shop-empty__desc {
	margin: 0 auto 24px;                    /* mx-auto mb-6 */
	max-width: 384px;                       /* max-w-sm (24rem) */
	font-size: var(--spd-font-size-xs);     /* text-xs */
	color: var(--spd-shop-slate-500);
}

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

/* Reset button — React: px-5 py-2.5 bg-[#0F5B94] text-white font-bold
   text-xs rounded-xl shadow-xs hover:bg-[#0A436D] */
.spd-shop-empty__reset {
	display: inline-block;
	padding: 10px 20px;                     /* py-2.5 px-5 */
	border-radius: var(--spd-radius-lg);    /* React rounded-xl (12px) */
	background-color: var(--spd-shop-blue);
	color: #fff;
	font-size: var(--spd-font-size-xs);
	font-weight: var(--spd-font-weight-bold);
	text-decoration: none;
	box-shadow: var(--spd-shadow-xs);
	transition: background-color var(--spd-shop-t-200);
}

.spd-shop-empty__reset:hover {
	background-color: var(--spd-shop-blue-dark);
	color: #fff;
}

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

/* ============================================================
   8. Notices (woocommerce_output_all_notices)
   ============================================================ */
.spd-shop .woocommerce-notices-wrapper {
	margin-bottom: 0;
}

/* ============================================================
   10. Quick-filter chips
   React ShopPage lines 138–201: flex gap-2 overflow-x-auto pb-1
   ============================================================ */
.spd-shop__chips {
	display: flex;
	align-items: center;
	gap: 8px;
	overflow-x: auto;
	padding-bottom: 4px;
	max-width: 100%;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.spd-shop__chips::-webkit-scrollbar {
	display: none;
}

.spd-shop__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	padding: 6px 14px;                       /* px-3.5 py-1.5 */
	border-radius: var(--spd-radius-full);
	font-family: var(--spd-font-family);
	font-size: var(--spd-font-size-xs);
	font-weight: var(--spd-font-weight-bold);
	white-space: nowrap;
	color: var(--spd-shop-slate-700);
	background-color: var(--spd-surface);
	border: 1px solid var(--spd-shop-slate-200);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--spd-shop-t-200), color var(--spd-shop-t-200),
		border-color var(--spd-shop-t-200), box-shadow var(--spd-shop-t-200);
}

.spd-shop__chip:hover {
	background-color: var(--spd-shop-slate-50);
}

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

.spd-shop__chip .spd-icon {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

/* "Tous les produits" — active state (blue)
   React: bg-[#0F5B94] text-white shadow-xs */
.spd-shop__chip.is-active {
	background-color: var(--spd-shop-blue);
	color: #fff;
	border-color: var(--spd-shop-blue);
	box-shadow: var(--spd-shadow-xs);       /* React shadow-xs */
}

/* "En promotion" — red variant
   React: promo chip always has shadow-2xs; active adds
   ring-2 ring-[#D93829]/30 on top of shadow-xs. */
.spd-shop__chip--promo {
	box-shadow: var(--spd-shadow-2xs);      /* React shadow-2xs (always) */
}
.spd-shop__chip--promo .spd-icon {
	color: var(--spd-shop-red);
}
.spd-shop__chip--promo:hover {
	border-color: rgba(217, 56, 41, 0.4);
}
.spd-shop__chip--promo.is-active {
	background-color: var(--spd-shop-red);
	color: #fff;
	border-color: var(--spd-shop-red);
	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05), 0 0 0 2px rgba(217, 56, 41, 0.3);
}
.spd-shop__chip--promo.is-active .spd-icon {
	color: #fde68a;                          /* amber-200 */
	fill: #fde68a;                           /* fill the flame when active */
}
.spd-shop__chip-badge {
	font-size: 10px;
	font-weight: var(--spd-font-weight-black);
	padding: 2px 6px;
	border-radius: var(--spd-radius-full);
	background-color: #FDECEB;
	color: var(--spd-shop-red);
}
.spd-shop__chip--promo.is-active .spd-shop__chip-badge {
	background-color: rgba(255, 255, 255, 0.25);
	color: #fff;
}

/* "Nouveautés" — amber variant
   React active: bg-amber-600 text-white shadow-xs */
.spd-shop__chip--new .spd-icon {
	color: #f59e0b;                          /* amber-500 */
}
.spd-shop__chip--new.is-active {
	background-color: #d97706;              /* amber-600 */
	color: #fff;
	border-color: #d97706;
	box-shadow: var(--spd-shadow-xs);       /* React shadow-xs */
}
.spd-shop__chip--new.is-active .spd-icon {
	color: #fde68a;                          /* amber-200 */
}

/* "En stock" — emerald variant
   React active: bg-emerald-600 text-white shadow-xs */
.spd-shop__chip--stock .spd-icon {
	color: #10b981;                         /* emerald-500 */
}
.spd-shop__chip--stock.is-active {
	background-color: #059669;              /* emerald-600 */
	color: #fff;
	border-color: #059669;
	box-shadow: var(--spd-shadow-xs);       /* React shadow-xs */
}
.spd-shop__chip--stock.is-active .spd-icon {
	color: #d1fae5;                         /* emerald-100 */
}

/* ============================================================
   11. Filter sidebar
   React ProductFilterSidebar.tsx: bg-white rounded-2xl border
   p-5 shadow-xs flex flex-col gap-6
   ============================================================ */
.spd-shop-filters {
	display: flex;
	flex-direction: column;
	gap: 24px;                             /* gap-6 */
	background-color: var(--spd-surface);
	border: 1px solid var(--spd-shop-slate-200);
	border-radius: var(--spd-radius-xl);  /* React rounded-2xl (16px) */
	padding: 20px;                         /* p-5 */
	box-shadow: var(--spd-shadow-xs);
}

/* ── Sidebar header (Filtres + Réinitialiser) ──
   React: flex items-center justify-between pb-4 border-b border-slate-100 */
.spd-shop-filters__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--spd-shop-slate-100);
}

.spd-shop-filters__title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--spd-font-size-base);
	font-weight: var(--spd-font-weight-bold);
	color: var(--spd-shop-slate-900);
}

.spd-shop-filters__title .spd-icon {
	width: 18px;                             /* Filter size={18} */
	height: 18px;
	color: var(--spd-shop-blue);             /* React text-[#0F5B94] */
}

.spd-shop-filters__reset {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: var(--spd-font-size-xs);
	color: var(--spd-shop-slate-500);
	text-decoration: none;
	transition: color var(--spd-shop-t-200);
}

.spd-shop-filters__reset:hover,
.spd-shop-filters__reset:focus-visible {
	color: var(--spd-shop-red);
	outline: none;
}

.spd-shop-filters__reset .spd-icon {
	width: 13px;
	height: 13px;
}

/* ── Section ──
   React: section headings font-bold text-xs uppercase tracking-wider
   text-slate-400 mb-3. Price + toggles sections get pt-2 border-t;
   the categories section is a plain div (no padding/border). */
.spd-shop-filters__section--price,
.spd-shop-filters__section--toggles {
	padding-top: 8px;                       /* pt-2 */
	border-top: 1px solid var(--spd-shop-slate-100);
}

.spd-shop .spd-shop-filters__section-title {
	margin: 0 0 12px;
	font-size: var(--spd-font-size-xs);
	font-weight: var(--spd-font-weight-bold);
	text-transform: uppercase;
	letter-spacing: var(--spd-tracking-wider);
	color: var(--spd-shop-slate-400);
	line-height: 1.5;
}

/* React toggle heading uses mb-2 (8px), not mb-3 (12px). */
.spd-shop .spd-shop-filters__section-title--toggles {
	margin-bottom: 8px;                    /* React mb-2 */
}

/* ── Category list ──
   React: space-y-1, buttons px-3 py-2 rounded-xl text-sm */
.spd-shop-filters__categories {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.spd-shop-filters__category {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 8px 12px;                     /* px-3 py-2 */
	border-radius: var(--spd-radius-lg);   /* React rounded-xl (12px) */
	font-size: var(--spd-font-size-sm);
	font-weight: var(--spd-font-weight-normal); /* React: categories have no weight class (400) */
	color: var(--spd-shop-slate-600);
	background-color: transparent;
	border: none;
	text-decoration: none;
	text-align: left;
	cursor: pointer;
	transition: background-color var(--spd-shop-t-200), color var(--spd-shop-t-200);
}

/* React: "Toutes les catégories" (first row) uses font-medium + slate-700. */
.spd-shop-filters__category:first-child {
	font-weight: var(--spd-font-weight-medium);
	color: var(--spd-shop-slate-700);
}

.spd-shop-filters__category:hover,
.spd-shop-filters__category:focus-visible {
	background-color: var(--spd-shop-slate-50);
	color: var(--spd-shop-slate-900);
	outline: none;
}

.spd-shop-filters__category.is-active {
	background-color: var(--spd-shop-blue-soft);
	color: var(--spd-shop-blue);
	font-weight: var(--spd-font-weight-bold);
}

.spd-shop-filters__category-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding-right: 8px;
}

.spd-shop-filters__category-count {
	font-size: var(--spd-font-size-xs);
	font-weight: var(--spd-font-weight-normal);
	color: var(--spd-shop-slate-400);
	flex-shrink: 0;
}

.spd-shop-filters__check .spd-icon {
	width: 16px;
	height: 16px;
	color: var(--spd-shop-blue);
}

/* ── Price slider ──
   React: native range input, w-full accent-[#0F5B94] cursor-pointer.
   No custom track/thumb — the browser renders the filled blue progress
   natively, which is exactly what the React design shows. */
.spd-shop-filters__price-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.spd-shop .spd-shop-filters__price-slider {
	width: 100%;
	accent-color: var(--spd-shop-blue);
	cursor: pointer;
}

.spd-shop .spd-shop-filters__price-slider:focus-visible {
	outline: 2px solid var(--spd-shop-blue);
	outline-offset: 2px;
	border-radius: 4px;
}

.spd-shop .spd-shop-filters__price-labels {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: var(--spd-font-size-xs);
	font-weight: var(--spd-font-weight-semibold);
	color: var(--spd-shop-slate-600);
}

.spd-shop .spd-shop-filters__price-max {
	font-weight: var(--spd-font-weight-bold);
	color: var(--spd-shop-blue);
	background-color: var(--spd-shop-blue-soft);
	padding: 2px 8px;
	border-radius: var(--spd-radius-sm);   /* React rounded-md (6px) */
}

/* ── Toggles (promo / stock) ──
   React: flex items-center gap-3 text-sm, checkbox accent */
.spd-shop-filters__toggles {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.spd-shop-filters__toggle {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: var(--spd-font-size-sm);
	font-weight: var(--spd-font-weight-medium);
	color: var(--spd-shop-slate-700);
	text-decoration: none;
	cursor: pointer;
	user-select: none;
}

.spd-shop-filters__toggle:focus-visible {
	outline: none;
	box-shadow: var(--spd-shop-focus-ring);
	border-radius: 4px;
}

.spd-shop-filters__toggle-box {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: var(--spd-radius-sm);   /* React rounded-md (6px) */
	border: 1px solid var(--spd-shop-slate-300);
	background-color: #fff;
	color: transparent;
	flex-shrink: 0;
	transition: background-color var(--spd-shop-t-200), border-color var(--spd-shop-t-200),
		color var(--spd-shop-t-200);
}

.spd-shop-filters__toggle-box .spd-icon {
	width: 12px;
	height: 12px;
	color: #fff;
}

.spd-shop-filters__toggle.is-checked .spd-shop-filters__toggle-box {
	background-color: var(--spd-shop-blue);
	border-color: var(--spd-shop-blue);
	color: #fff;
}

/* Promo checkbox uses red accent (matches React accent-[#D93829]). */
.spd-shop-filters__toggle:first-child.is-checked .spd-shop-filters__toggle-box {
	background-color: var(--spd-shop-red);
	border-color: var(--spd-shop-red);
}

/* ============================================================
   12. Sort label (toolbar)
   React: "Trier par :" before the select
   ============================================================ */
.spd-shop__sort-label {
	font-size: var(--spd-font-size-xs);
	font-weight: var(--spd-font-weight-medium);
	color: var(--spd-shop-slate-500);
}

/* The toolbar wraps result-count + sort-label + ordering.
   Ensure the label sits next to the ordering select. */
.spd-shop__toolbar .woocommerce-ordering {
	margin-left: auto;
}

/* Move the sort label to sit right before the ordering (via CSS order).
   The toolbar children order: [result-count] [sort-label] [ordering]. */
.spd-shop__toolbar .woocommerce-result-count {
	order: 1;
}
.spd-shop__toolbar .spd-shop__sort-label {
	order: 2;
	margin-left: auto;
}
.spd-shop__toolbar .woocommerce-ordering {
	order: 3;
	margin-left: 8px;
}

/* Hide the WC ordering screen-reader label (we have our own visible label). */
.spd-shop__toolbar .woocommerce-ordering label.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* ============================================================
   13. Mobile filter drawer
   React ShopPage lines 222–252: fixed inset-0 z-50 bg-slate-900/60
   backdrop-blur-xs justify-start p-4, panel rounded-3xl max-w-xs
   ============================================================ */
.spd-shop-drawer[hidden] {
	display: none;
}

.spd-shop-drawer {
	position: fixed;
	inset: 0;
	z-index: var(--spd-z-drawer);
	display: flex;
	justify-content: flex-start;
	padding: 16px;                          /* p-4 */
}

.spd-shop-drawer__overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(15, 23, 42, 0.6); /* slate-900/60 */
	backdrop-filter: blur(4px);             /* backdrop-blur-xs */
	-webkit-backdrop-filter: blur(4px);
}

.spd-shop-drawer__panel {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 320px;                       /* max-w-xs */
	max-height: 90vh;
	background-color: var(--spd-surface);
	border-radius: var(--spd-radius-2xl);    /* rounded-3xl (24px) */
	padding: 16px;                          /* p-4 */
	overflow-y: auto;
	box-shadow: var(--spd-shadow-xl);
	display: flex;
	flex-direction: column;
	gap: 16px;
	/* Slide-in animation. */
	animation: spd-shop-drawer-in 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes spd-shop-drawer-in {
	from {
		transform: translateX(-100%);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

.spd-shop-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.spd-shop-drawer__title {
	font-weight: var(--spd-font-weight-bold);
	color: var(--spd-shop-slate-900);
	font-size: var(--spd-font-size-base);
}

.spd-shop-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px;                           /* React p-1 */
	border: none;
	border-radius: var(--spd-radius-md);    /* React rounded-lg (8px) */
	background-color: transparent;
	color: var(--spd-shop-slate-400);
	cursor: pointer;
	transition: color var(--spd-shop-t-200), background-color var(--spd-shop-t-200);
}

.spd-shop-drawer__close:hover,
.spd-shop-drawer__close:focus-visible {
	color: var(--spd-shop-slate-700);
	background-color: var(--spd-shop-slate-50);
	outline: none;
}

.spd-shop-drawer__close .spd-icon {
	width: 18px;
	height: 18px;
}

.spd-shop-drawer__body {
	/* The sidebar content (same as desktop). */
}

/* Drawer is mobile-only — hidden on desktop (the desktop sidebar is visible). */
@media (min-width: 1024px) {
	.spd-shop-drawer {
		display: none;
	}
}

/* ============================================================
   14. Sidebar visibility (mobile)
   Desktop: sidebar visible. Mobile: sidebar hidden (drawer used).
   ============================================================ */
@media (max-width: 1023px) {
	.spd-shop__sidebar {
		display: none;
	}
}

/* ============================================================
   15. Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.spd-shop *,
	.spd-shop *::before,
	.spd-shop *::after {
		transition: none !important;
		animation: none !important;
	}
	.spd-shop-drawer__panel {
		animation: none;
	}
}

/* ============================================================
   16. Shop product grid — Phase 4D
   ============================================================
   The product card itself (container, media, badges, wishlist, info,
   price, rating, CTA, button states) is styled by the SHARED
   spd-product-card.css component stylesheet (extracted in Phase 5H.1,
   scope class .spd-product-cards — carried here by #spd-shop-page).
   This section keeps only the shop-archive GRID rules (ul.products
   columns, li resets, Astra column-class neutralizations).
   ============================================================ */

/* ── Shop grid: 3 columns desktop (React ShopPage uses md:grid-cols-3) ──
   Astra adds `columns-4` (via the .columns-4 body class) which sets
   `grid-template-columns: repeat(4, 1fr)` with inline/!important rules
   on ul.products. We override at the .spd-shop scope with higher
   specificity and !important to win over Astra's inline style. */
.spd-shop ul.products {
	display: grid;
	grid-template-columns: 1fr !important;          /* mobile: 1 col */
	gap: 16px;                                       /* gap-4 */
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.spd-shop ul.products {
		grid-template-columns: repeat(2, 1fr) !important; /* sm:grid-cols-2 */
		gap: 20px;                                       /* sm:gap-5 */
	}
}

@media (min-width: 768px) {
	.spd-shop ul.products {
		grid-template-columns: repeat(3, 1fr) !important; /* md:grid-cols-3 */
	}
}

/* Reset Astra's per-li width/float/margin so the grid layout works. */
.spd-shop ul.products li.product {
	width: auto;
	float: none;
	margin: 0;
	padding: 0;
	max-width: none;
}

/* Astra wraps each li in a div.ast-article-post — make it a flex column. */
.spd-shop ul.products li.product.ast-article-post {
	display: contents;
}

/* ── Hide Astra's default WooCommerce loop elements that might still render ──
   Even with spd_suppress_default_loop_callbacks, some Astra wrappers or
   inline styles can leak. These resets ensure a clean card. */
.spd-shop ul.products li.product .ast-woo-shop-product-description,
.spd-shop ul.products li.product .astra-shop-summary-wrap,
.spd-shop ul.products li.product .ast-woocommerce-loop-product__link,
.spd-shop ul.products li.product .ast-woocommerce-product-gallery {
	display: none;
}

/* ── Astra body class columns override ──
   Astra adds `columns-4` to the body and uses it to set the grid width
   via inline style on ul.products. Our !important grid-template-columns
   rule above wins over inline styles, but Astra's `.columns-4` CSS
   rule on li.product also sets width:29% — we neutralize it. */
.spd-shop .columns-4 ul.products li.product,
.spd-shop .columns-3 ul.products li.product,
.spd-shop .columns-2 ul.products li.product,
.spd-shop .columns-1 ul.products li.product {
	width: auto !important;
}

/* ============================================================
   19. Phase 4F — Shop Responsive fixes
   ============================================================
   Fixes identified by comparing the React ShopPage responsive
   behavior (Tailwind breakpoints: sm=640, md=768, lg=1024) with
   the WordPress render. The previous phases (4B–4E) established
   the faithful layout; this phase fixes remaining responsive
   edge cases caused by Astra interference and CSS Grid defaults.
   ============================================================ */

/* ── 19a. Neutralize Astra's custom select arrow ──
   Astra's global rule adds a custom SVG chevron background-image,
   -webkit-appearance:none, and padding-right:2em to ALL select
   elements. The React ShopPage uses native browser selects (no
   custom arrow). Without this override, the toolbar sort select
   and the pagination per-page select show Astra's chevron instead
   of the native browser arrow, and the extra padding-right:2em
   shifts the select text. Scoped to .spd-shop so other pages keep
   Astra's styling. */
.spd-shop .woocommerce-ordering select.orderby,
.spd-shop .spd-shop-pagination__per-page-select {
	background-image: none;
	-webkit-appearance: auto;
	-moz-appearance: auto;
	appearance: auto;
	background-size: auto;
	background-repeat: no-repeat;
	background-position-x: initial;
	background-position-y: initial;
}

/* Astra adds padding-right:2em to make room for its custom chevron.
   With the native arrow restored, reset to the React padding values.
   The toolbar sort select uses px-3 py-1.5 (12px right), the per-page
   select uses px-2 py-1 (8px right). */
.spd-shop .woocommerce-ordering select.orderby {
	padding-right: 12px;
}
.spd-shop .spd-shop-pagination__per-page-select {
	padding-right: 8px;
}

/* ── 19b. Grid item min-width: 0 ──
   CSS Grid items default to min-width:auto, which means a grid
   track cannot shrink below its content's intrinsic minimum width.
   If a product card's content (e.g. a long unbroken title, a wide
   image, or a non-wrapping price row) is wider than the track,
   the track expands and causes horizontal overflow on the page.
   Setting min-width:0 on the grid items allows the track to shrink
   to the grid-template-columns size, and the card's own overflow:
   hidden + line-clamp-2 + flex-wrap handle the content clipping.
   This is a standard CSS Grid best practice for responsive grids. */
.spd-shop ul.products li.product {
	min-width: 0;
}

/* The card's own min-width:0 rules (card, __info, __price-main) live in
   the shared spd-product-card.css component stylesheet — they apply
   identically wherever the canonical card renders. */

/* ── 19c. Pagination nav overflow safety ──
   The React Pagination nav is `flex items-center gap-1 sm:gap-1.5`
   with no overflow handling. With many pages (totalPages > 7), the
   7 page items + prev + next can exceed the mobile viewport width
   (e.g. 360px), causing horizontal page-level scroll. The React has
   the same theoretical issue but the design uses ellipsis to cap at
   7 items. We add overflow-x:auto + scrollbar-width:none as a safety
   net so the nav scrolls internally rather than overflowing the page.
   This does NOT change the visual layout when content fits — it only
   activates when the nav is wider than its container. */
.spd-shop-pagination__nav {
	overflow-x: auto;
	max-width: 100%;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.spd-shop-pagination__nav::-webkit-scrollbar {
	display: none;
}

/* The pages container can also scroll independently if needed. */
.spd-shop-pagination__pages {
	flex-shrink: 0;
}

/* ── 19d. Container overflow guard ──
   Ensure the shop container never produces horizontal scroll even
   if a child element slightly overflows (e.g. a long chip label or
   a wide product image). The React uses max-w-7xl + overflow-visible
   (no clipping), but the React content is controlled. In WordPress,
   WooCommerce/Astra can inject unexpected content.

   IMPORTANT: use `overflow-x: clip` (NOT `hidden`). When overflow-x
   is `hidden`, the CSS spec computes overflow-y:visible → overflow-y:auto,
   which creates a scroll container. This breaks the sticky sidebar
   (position:sticky would stick within the .spd-shop scroll context
   instead of the viewport). `overflow-x: clip` clips without creating
   a scroll container, preserving the sticky behavior. `clip` is
   supported in all modern browsers (Chrome 90+, Firefox 81+, Safari
   16+, Edge 90+). For older browsers, the min-width:0 rules (19b)
   handle the overflow prevention at the source. */
.spd-shop {
	overflow-x: clip;
}