/**
 * Pharma Storefront — shop archive styles.
 *
 * Covers: the product grid (WooCommerce's own ul.products.columns-N
 * markup, restyled as CSS Grid — no PHP column logic needed), the
 * sort+count toolbar, the archive header, pagination, and the empty
 * state. Applies to /shop/ and, per Shop.php's docblock, every product
 * taxonomy archive automatically. Built entirely from frontend.css's
 * design tokens.
 */

/* ---------------------------------------------------------------------
 * Archive header
 * ------------------------------------------------------------------- */

.pharma-archive-header {
	background: var(--pharma-primary);
	color: #ffffff;
	padding: var(--pharma-space-6) var(--pharma-space-4);
}

.pharma-archive-header__inner {
	max-width: var(--pharma-container-width);
	margin: 0 auto;
}

.pharma-archive-header .pharma-breadcrumbs {
	color: rgba(255, 255, 255, 0.7);
}

.pharma-archive-header .pharma-breadcrumbs__item a {
	color: rgba(255, 255, 255, 0.7);
}

.pharma-archive-header .pharma-breadcrumbs__item a:hover {
	color: #ffffff;
}

.pharma-archive-header .pharma-breadcrumbs__item [aria-current="page"] {
	color: #ffffff;
}

.pharma-archive-header .pharma-breadcrumbs__separator {
	color: rgba(255, 255, 255, 0.35);
}

.pharma-archive-header__title {
	font-family: var(--pharma-font-heading);
	font-size: var(--pharma-font-size-xl);
	margin: var(--pharma-space-3) 0 0;
	color: #ffffff;
}

.pharma-archive-header__row {
	display: flex;
	align-items: center;
	gap: var(--pharma-space-4);
}

.pharma-archive-header__row .pharma-archive-header__title {
	margin-top: 0;
}

.pharma-archive-header__image {
	flex-shrink: 0;
	width: 72px;
	height: 72px;
	object-fit: contain;
	background: #ffffff;
	border-radius: var(--pharma-radius-md);
	padding: var(--pharma-space-2);
}

.pharma-archive-header__text {
	min-width: 0;
}

.pharma-archive-header__description {
	margin-top: var(--pharma-space-2);
	max-width: 60ch;
	color: rgba(255, 255, 255, 0.85);
	font-size: var(--pharma-font-size-base);
}

.pharma-archive-header__description p:last-child {
	margin-bottom: 0;
}

.pharma-archive-header__chips {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--pharma-space-2);
	margin: var(--pharma-space-4) 0 0;
	padding: 0;
}

.pharma-chip {
	display: inline-block;
	background: rgba(255, 255, 255, 0.12);
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: var(--pharma-radius-pill);
	padding: var(--pharma-space-2) var(--pharma-space-4);
	font-size: var(--pharma-font-size-sm);
	font-weight: 600;
	text-decoration: none;
	transition: background 0.15s ease;
}

.pharma-chip:hover {
	background: var(--pharma-accent);
	border-color: var(--pharma-accent);
	color: var(--pharma-primary-dark);
}

/* ---------------------------------------------------------------------
 * Toolbar (result count + sort dropdown)
 * ------------------------------------------------------------------- */

.pharma-shop-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--pharma-space-3);
	max-width: var(--pharma-container-width);
	margin: var(--pharma-space-5) auto var(--pharma-space-4);
	padding: 0 var(--pharma-space-4);
}

.pharma-shop-toolbar .woocommerce-result-count {
	margin: 0;
	color: var(--pharma-muted);
	font-size: var(--pharma-font-size-sm);
}

.pharma-shop-toolbar .woocommerce-ordering {
	margin: 0;
}

.pharma-shop-toolbar .woocommerce-ordering select {
	border: 1px solid var(--pharma-border);
	border-radius: var(--pharma-radius-sm);
	padding: var(--pharma-space-1) var(--pharma-space-3);
	font-size: var(--pharma-font-size-sm);
	background: var(--pharma-card);
	color: var(--pharma-text);
}

/* ---------------------------------------------------------------------
 * Product grid
 * ------------------------------------------------------------------- */

/*
 * WooCommerce enqueues its own default 'woocommerce-layout' stylesheet
 * (classic float + percentage-width grid on li.product) unless a theme
 * fully opts out of it — and many themes with their own WooCommerce
 * integration (OceanWP included) ship an equivalent float-grid ruleset
 * of their own. Neither uses !important, but relying on load order to
 * beat them is fragile (it depends on hook registration order between
 * WooCommerce, the active theme, and this plugin, which varies by
 * environment). !important here is a narrow, deliberate exception,
 * scoped only to the handful of properties that classic float-grid CSS
 * sets, so our own CSS Grid layout reliably wins regardless of what
 * else is loaded.
 */
ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--pharma-space-5);
	max-width: var(--pharma-container-width);
	margin: 0 auto var(--pharma-space-6);
	padding: 0 var(--pharma-space-4);
	list-style: none;
}

ul.products li.product {
	width: auto !important;
	float: none !important;
	clear: none !important;
	margin: 0 !important;
}

ul.products.columns-1 { grid-template-columns: repeat(1, 1fr); }
ul.products.columns-2 { grid-template-columns: repeat(2, 1fr); }
ul.products.columns-3 { grid-template-columns: repeat(3, 1fr); }
ul.products.columns-4 { grid-template-columns: repeat(4, 1fr); }
ul.products.columns-5 { grid-template-columns: repeat(5, 1fr); }
ul.products.columns-6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 1024px) {
	ul.products.columns-4,
	ul.products.columns-5,
	ul.products.columns-6 {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 768px) {
	ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: var(--pharma-space-3);
	}

	.pharma-shop-toolbar {
		flex-direction: column;
		align-items: flex-start;
	}
}

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

/* ---------------------------------------------------------------------
 * Pagination
 * ------------------------------------------------------------------- */

.pharma-pagination {
	display: flex;
	justify-content: center;
	margin: var(--pharma-space-6) auto;
}

.pharma-pagination .page-numbers {
	list-style: none;
	display: flex;
	gap: var(--pharma-space-1);
	margin: 0;
	padding: 0;
}

.pharma-pagination .page-numbers li {
	display: block;
}

.pharma-pagination a.page-numbers,
.pharma-pagination span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 var(--pharma-space-2);
	border-radius: var(--pharma-radius-sm);
	color: var(--pharma-text);
	text-decoration: none;
	font-size: var(--pharma-font-size-sm);
}

.pharma-pagination a.page-numbers:hover {
	background: var(--pharma-background);
}

.pharma-pagination span.page-numbers.current {
	background: var(--pharma-primary);
	color: #ffffff;
	font-weight: 600;
}

.pharma-pagination span.page-numbers.dots {
	color: var(--pharma-muted);
}

/* ---------------------------------------------------------------------
 * Empty state
 * ------------------------------------------------------------------- */

.pharma-empty-state {
	max-width: var(--pharma-container-width);
	margin: var(--pharma-space-6) auto;
	padding: var(--pharma-space-6) var(--pharma-space-4);
	text-align: center;
	background: var(--pharma-card);
	border: 1px dashed var(--pharma-border);
	border-radius: var(--pharma-radius-md);
}

.pharma-empty-state__message {
	margin: 0;
	color: var(--pharma-muted);
	font-size: var(--pharma-font-size-base);
}