/**
 * Shop Page Styles
 *
 * Styles for the WooCommerce shop/archive pages.
 *
 * @package WPR\NPX
 */

/* ==========================================================================
   Shop Page Layout
   ========================================================================== */

.npx-woocommerce {
	padding: 48px 0 96px;
}

.npx-woocommerce .npx-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

/* ==========================================================================
   Shop Header
   ========================================================================== */

.npx-shop-header {
	text-align: center;
	margin-bottom: 48px;
}

.npx-shop-header__title {
	font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 48px;
	font-weight: 600;
	line-height: 1.1;
	color: #000000;
	margin: 0 0 32px 0;
}

/* ==========================================================================
   Category Tabs
   ========================================================================== */

.npx-category-tabs {
	margin-bottom: 48px;
}

.npx-category-tabs__list {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 48px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.npx-category-tabs__item {
	margin: 0;
}

.npx-category-tabs__link {
	display: inline-block;
	padding: 8px 0;
	font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	color: #6e6e73;
	border-bottom: 2px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.npx-category-tabs__link:hover,
.npx-category-tabs__link--active,
.npx-category-tabs__link.is-active {
	color: #0071E3;
	border-bottom-color: #0071E3;
}

/* ==========================================================================
   Shop Controls (Sort + Result Count)
   ========================================================================== */

/* Controls rendered inside Featured Peptides block — match block's boxed layout */
/* Shop controls now globally managed via Featured Peptides block CSS to ensure 
   consistency between archival shop and landing page widgets. */

/* ==========================================================================
   Product Grid
   ========================================================================== */

.npx-products-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Override WooCommerce default product list */
.npx-products-grid .products,
ul.products {
	display: contents;
}

/* ==========================================================================
   Product Card
   ========================================================================== */

/* 
 * Shared Component Used: assets/css/components/product-card.css
 * This section now only handles grid-specific overrides if any.
 */

.npx-product-card {
	/* Grid specific behavior - e.g. height matching */
	height: 100%;
}

/* 
 * Override WooCommerce Blocks inline styling
 * We enforce the shared 0.8 aspect ratio with contain to fit tall 
 * source images without WordPress cutting the bottle caps.
 */
.wc-block-components-product-image img,
.wc-block-grid__product-image img {
	object-fit: contain !important;
}

.wc-block-components-product-image,
.wc-block-grid__product-image {
	aspect-ratio: 0.8 !important;
	/* Matches shared component vertical look */
	overflow: hidden !important;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ==========================================================================
   No Products Found
   ========================================================================== */

/* ==========================================================================
   No Products Found
   ========================================================================== */

.woocommerce-no-products-found {
	text-align: center;
	padding: 96px 24px;
}

.woocommerce-no-products-found .woocommerce-info {
	display: inline-block;
	padding: 24px 48px;
	background-color: #F5F5F5;
	border: none;
	border-radius: 16px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
	.npx-products-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 24px;
	}

	.npx-shop-header__title {
		font-size: 36px;
	}

	.npx-category-tabs__list {
		gap: 24px;
	}
}

@media (max-width: 768px) {
	.npx-woocommerce {
		padding: 32px 0 64px;
	}

	.npx-shop-header__title {
		font-size: 32px;
	}

	.npx-category-tabs__list {
		gap: 16px;
	}

	.npx-category-tabs__link {
		font-size: 13px;
	}

	.npx-shop-controls {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--npx-space-1);
	}

	.npx-shop-controls__select {
		min-width: 160px;
	}
}

@media (max-width: 480px) {
	.npx-products-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.npx-product-card__content {
		padding: 16px 12px 8px;
	}

	.npx-product-card__title {
		font-size: 16px;
	}
}