/* =========================================================================
   StarFroid — product card (brief §5)
   image, 2-line title clamp, price DZD, sale/COD pill, add-to-cart.
   Styles WooCommerce loop markup without replacing it.
   ========================================================================= */

.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
	/* 2 cols mobile (brief §5) */
	grid-template-columns: repeat(2, 1fr);
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid rgba(228, 235, 241, 0.6);
	border-radius: var(--radius-card);
	overflow: hidden;
	box-shadow: var(--shadow-soft);
	transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
	position: relative;
}
.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
	box-shadow: var(--shadow-raised);
	transform: translateY(-4px);
	border-color: rgba(22, 194, 213, 0.3);
}

/* Media */
.woocommerce ul.products li.product a img {
	margin: 0;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--c-bg-alt);
	border-radius: 0;
	transition: transform var(--dur) var(--ease);
}
.woocommerce ul.products li.product:hover a img { transform: scale(1.03); }

/* Sale / COD badges (cyan pill) */
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
	position: absolute;
	inset-block-start: var(--space-3);
	inset-inline-start: var(--space-3);
	margin: 0;
	min-height: 0;
	min-width: 0;
	padding: 4px 10px;
	background: var(--c-accent);
	color: #fff;
	border-radius: var(--radius-pill);
	font-size: var(--fs-100);
	font-weight: 700;
	line-height: 1.2;
}
.sf-card__cod {
	position: absolute;
	inset-block-start: var(--space-3);
	inset-inline-end: var(--space-3);
}

/* Body */
.woocommerce ul.products li.product > a:not(.button) {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--font-body);
	font-size: var(--fs-200);
	font-weight: 500;
	color: var(--c-text);
	padding: var(--space-3) var(--space-3) 0;
	margin: 0;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.8em;
}
.woocommerce ul.products li.product .price {
	padding-inline: var(--space-3);
	color: var(--c-primary);
	font-size: var(--fs-300);
	font-weight: 700;
	margin: 0;
}
.woocommerce ul.products li.product .star-rating { margin-inline: var(--space-3); }

/* Add to cart — always visible on mobile (brief §5) */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
	margin: var(--space-3);
	margin-block-start: auto;
	/* !important: a higher-priority rule zeroes the side margins (leaving the
	   width calc), which shoved the button left. Force symmetric margins so it
	   stays centred in the card. */
	margin-inline: var(--space-3) !important;
	width: calc(100% - 2 * var(--space-3)) !important;
}

/* 3 across from tablet up. The [class*="columns-"] selector + !important is
   needed to beat WooCommerce core's own .columns-4 grid rule. */
@media (min-width: 600px) {
	.woocommerce ul.products[class*="columns-"],
	.woocommerce-page ul.products[class*="columns-"] { grid-template-columns: repeat(3, 1fr) !important; }
}

/* Roomier, cleaner cards on desktop (brief §5 mockup). Cards are wide here, so
   give the title + price a larger, more legible size and more internal padding
   so long product names and prices sit comfortably on one/two lines. Mobile
   (2-col) is left compact on purpose — big prices would wrap in a 360px card. */
@media (min-width: 992px) {
	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: var(--fs-300);            /* 20px (was 16px) */
		padding-inline: var(--space-4);
		line-height: 1.35;
	}
	.woocommerce ul.products li.product .price {
		font-size: var(--fs-400);            /* 25px — prominent but not oversized */
		padding-inline: var(--space-4);
		line-height: 1.2;
	}
	.woocommerce ul.products li.product .ast-woo-product-category {
		padding-inline: var(--space-4);
	}
	.woocommerce ul.products li.product .button,
	.woocommerce ul.products li.product .added_to_cart {
		margin: var(--space-4);
		margin-block-start: auto;            /* keep button aligned to card bottom */
		margin-inline: var(--space-4) !important;   /* stay centred (see base rule) */
		width: calc(100% - 2 * var(--space-4)) !important;
		padding-block: var(--space-3);       /* chunkier CTA via height */
		font-size: var(--fs-200);            /* 16px — keeps "Ajouter au panier" on one line */
	}
}

/* Carousel context reuses card styles but as inline items */
.sf-carousel .product { height: 100%; }

/* ---- Cleaner card internals ----
   Astra prints the product category flush to the card's left edge and tight
   against the image, so it sat out of line with the (padded) title + price.
   Align it to the same inset and give it breathing room; tidy the button so
   its label stays on one line in narrow 2-column mobile cards. */
.woocommerce ul.products li.product .ast-woo-product-category {
	padding-inline: var(--space-3);
	margin-block: var(--space-3) 0;
	font-size: var(--fs-100);
	color: var(--c-text-muted);
	line-height: 1.3;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	padding-block-start: var(--space-1);
}
.woocommerce ul.products li.product .price {
	margin-block-start: var(--space-1);
	margin-block-end: var(--space-3);   /* breathing room between price and the button */
}
@media (max-width: 599px) {
	.woocommerce ul.products li.product .button,
	.woocommerce ul.products li.product .added_to_cart {
		font-size: var(--fs-100);
		padding-inline: var(--space-2);
	}
}

/* =========================================================================
   Homepage product sections + category grid (mockup §03).
   The shop card rules are scoped to .woocommerce; the homepage has no such
   wrapper, so its ul.products images rendered at full size. Re-style under
   .sf-front and constrain the image; style the "Shop by category" grid.
   ========================================================================= */
.sf-front ul.products {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-4);
	margin: 0; padding: 0; list-style: none;
}
@media (min-width: 600px) { .sf-front ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .sf-front ul.products { grid-template-columns: repeat(4, 1fr); } }

.sf-front ul.products.sf-carousel {
	display: flex;
	grid-template-columns: none;
	overflow-x: auto;
	gap: var(--space-4);
	padding-bottom: var(--space-2);
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
}
.sf-front ul.products.sf-carousel li.product { flex: 0 0 240px; width: 240px; scroll-snap-align: start; }

.sf-front ul.products li.product {
	margin: 0;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid rgba(228, 235, 241, 0.6);
	border-radius: var(--radius-card);
	overflow: hidden;
	box-shadow: var(--shadow-soft);
	position: relative;
	transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.sf-front ul.products li.product:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-raised);
	border-color: rgba(22, 194, 213, 0.3);
}
.sf-front ul.products li.product a img {
	width: 100%; aspect-ratio: 1 / 1; object-fit: cover; margin: 0;
	background: var(--c-bg-alt);
}
.sf-front ul.products li.product .ast-woo-product-category {
	padding-inline: var(--space-3); margin-block: var(--space-3) 0;
	font-size: var(--fs-100); color: var(--c-text-muted);
}
.sf-front ul.products li.product .woocommerce-loop-product__title {
	padding: var(--space-1) var(--space-3) 0; margin: 0;
	font-size: var(--fs-200); font-weight: 500; color: var(--c-text); line-height: 1.4;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.8em;
}
.sf-front ul.products li.product .price {
	padding-inline: var(--space-3); margin: var(--space-1) 0 0;
	color: var(--c-primary); font-weight: 700; font-size: var(--fs-300);
}
.sf-front ul.products li.product .button,
.sf-front ul.products li.product .added_to_cart {
	margin: var(--space-3); margin-block-start: auto;
	width: calc(100% - 2 * var(--space-3)); font-size: var(--fs-100);
	/* Homepage cards aren't inside a .woocommerce wrapper, so they miss the
	   button-centering in buttons.css (which is scoped to .woocommerce a.button)
	   and the label sat left. Center it here to match the shop cards. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.sf-front ul.products li.product .onsale {
	position: absolute; inset-block-start: var(--space-3); inset-inline-start: var(--space-3);
	margin: 0; padding: 4px 10px; background: var(--c-accent); color: #fff;
	border-radius: var(--radius-pill); font-size: var(--fs-100); font-weight: 700; min-height: 0;
}
.sf-front .sf-card__cod { position: absolute; inset-block-start: var(--space-3); inset-inline-end: var(--space-3); }

/* "Shop by category" grid. */
.sf-cats { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 600px) { .sf-cats { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .sf-cats { grid-template-columns: repeat(5, 1fr); } }
.sf-cat-card {
	display: flex; flex-direction: column;
	border: 1px solid var(--c-border); border-radius: var(--radius-card);
	overflow: hidden; background: var(--c-surface);
	transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.sf-cat-card:hover { box-shadow: var(--shadow-raised); transform: translateY(-2px); }
.sf-cat-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--c-bg-alt); display: block; }
.sf-cat-card__label { padding: var(--space-3); font-weight: 600; font-size: var(--fs-200); color: var(--c-text); }