/* Archive / category / search styles — Category *.dc.html prototypes (1440px parity). */

@keyframes ss-archive-rise {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

/* ---------- Category banner ---------- */
.ss-cat-banner { position: relative; height: 290px; overflow: hidden; }
.ss-cat-banner__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ss-cat-banner__inner { position: relative; height: 100%; display: flex; flex-direction: column;
	justify-content: center; gap: 8px; padding: 0 var(--ss-pad-x); max-width: 560px;
	animation: ss-archive-rise .55s ease .05s both; }
.ss-cat-banner__crumb { font: 500 13px/1.4 var(--ss-font); color: var(--ss-muted); }
.ss-cat-banner__crumb a { color: var(--ss-muted); text-decoration: none; }
.ss-cat-banner__crumb a:hover { color: var(--ss-accent); }
.ss-cat-banner__crumb span { color: var(--ss-text); }
.ss-cat-banner__title { margin: 0; font: 700 56px/1 var(--ss-font-display); color: var(--ss-text); text-transform: uppercase; }
.ss-cat-banner__intro { font: 400 var(--ss-fs-body)/1.5 var(--ss-font); color: var(--ss-body); text-wrap: pretty; }
.ss-cat-banner__intro p { margin: 0; }

/* Light-on-dark variant (Pre-Workout banner art). */
.ss-cat-banner--light .ss-cat-banner__crumb,
.ss-cat-banner--light .ss-cat-banner__crumb a { color: var(--ss-dark-body); }
.ss-cat-banner--light .ss-cat-banner__crumb span,
.ss-cat-banner--light .ss-cat-banner__title { color: var(--ss-dark-text); }
.ss-cat-banner--light .ss-cat-banner__intro { color: var(--ss-dark-body); }

/* Generic strip (shop-all / tag / brand / no banner image). */
.ss-cat-banner--plain { height: 180px; background: var(--ss-panel); border-bottom: 1px solid var(--ss-border); }

/* ---------- Toolbar: pills / count / sort ---------- */
.ss-cat-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
	padding: 18px var(--ss-pad-x); border-bottom: 1px solid var(--ss-border); background: var(--ss-surface);
	position: sticky; top: 83px; z-index: 15; }
.ss-cat-toolbar__count { font: 600 14px/1 var(--ss-font); color: var(--ss-text); }
.ss-cat-toolbar__right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
/* Protein page: pills sit left, count moves right and goes muted. */
.ss-cat-toolbar--pills .ss-cat-toolbar__count { font: 500 13px/1 var(--ss-font); color: var(--ss-muted); }
.ss-cat-toolbar .ss-pill { padding: 9px 18px; color: var(--ss-body); text-decoration: none; }
.ss-cat-toolbar .ss-pill.is-active { color: #fff; }

/* Sort control: wraps the native Woo orderby select. */
.ss-cat-toolbar__sort { position: relative; display: flex; align-items: center; gap: 6px;
	border: 1px solid var(--ss-border-strong); border-radius: var(--ss-r-btn); padding: 0 0 0 14px;
	font: 600 13px/1 var(--ss-font); color: var(--ss-body); background: var(--ss-surface); }
.ss-cat-toolbar__sort-label { pointer-events: none; }
.ss-cat-toolbar__sort .woocommerce-ordering { margin: 0; }
.ss-cat-toolbar__sort select.orderby { appearance: none; -webkit-appearance: none; -moz-appearance: none;
	border: 0; background: transparent; font: 600 13px/1 var(--ss-font); color: var(--ss-body);
	padding: 10px 30px 10px 2px; cursor: pointer; }
.ss-cat-toolbar__sort select.orderby:focus { outline: none; }
.ss-cat-toolbar__sort::after { content: ""; position: absolute; right: 12px; top: 50%; margin-top: -2px;
	border: 4px solid transparent; border-top: 5px solid var(--ss-body); pointer-events: none; }

/* ---------- Product grid ---------- */
.ss-archive-grid-wrap { padding: 28px var(--ss-pad-x) 8px; }
.ss-product-grid .ss-product-card__media img { height: 140px; }
.ss-product-card__media a { display: flex; justify-content: center; }
.ss-product-card__body { gap: 3px; }
.ss-product-card__name { text-decoration: none; }
.ss-product-card__name:hover { color: var(--ss-accent); }
.ss-product-card__footer { display: flex; align-items: center; justify-content: space-between;
	gap: 10px; margin-top: auto; padding-top: 10px; }
.ss-product-card__pricing { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ss-product-card__price del { color: var(--ss-muted); font-weight: 500; margin-right: 6px; }
.ss-product-card__price ins { text-decoration: none; }
.ss-product-card__actions .ss-btn { padding: 9px 16px; font-size: 13px; text-decoration: none; white-space: nowrap; }
/* Card warning pills: compact rectangle per category prototypes. */
.ss-product-card__warnings { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 4px; }
.ss-product-card .ss-warning-pill { border-radius: 6px; font: 500 11px/1.4 var(--ss-font);
	padding: 3px 8px; align-items: flex-start; }
.ss-product-card .ss-warning-pill__icon { width: 12px; height: 12px; margin-top: 1px; }

/* Empty state */
.ss-no-products { margin: 0; padding: 32px 0 40px; font: 400 var(--ss-fs-body)/1.5 var(--ss-font); color: var(--ss-body); }

/* Pagination */
.woocommerce-pagination { padding: 24px 0 8px; }
.woocommerce-pagination ul.page-numbers { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; }
.woocommerce-pagination .page-numbers li { margin: 0; }
.woocommerce-pagination a.page-numbers, .woocommerce-pagination span.page-numbers {
	display: inline-flex; align-items: center; justify-content: center; min-width: 38px; padding: 9px 12px;
	border: 1px solid var(--ss-border-strong); border-radius: var(--ss-r-btn);
	font: 600 13px/1 var(--ss-font); color: var(--ss-body); text-decoration: none; background: var(--ss-surface); }
.woocommerce-pagination a.page-numbers:hover { border-color: var(--ss-text); color: var(--ss-text); }
.woocommerce-pagination span.page-numbers.current { background: var(--ss-text); border-color: var(--ss-text); color: #fff; }

/* ---------- Educational dark band ---------- */
.ss-cat-band { margin: 40px var(--ss-pad-x) 0; border-radius: var(--ss-r-panel); padding: 32px 40px;
	display: grid; grid-template-columns: auto 1fr 1fr; gap: 36px; align-items: center; }
.ss-cat-band__title { font: 700 24px/1.1 var(--ss-font-display); color: var(--ss-dark-text); max-width: 160px; }
.ss-cat-band--protein .ss-cat-band__title { max-width: 150px; }
.ss-cat-band__col { font: 400 13.5px/1.55 var(--ss-font); color: var(--ss-dark-body); }
.ss-cat-band__col b { color: var(--ss-dark-text); }

/* ---------- Search page ---------- */
.ss-search-head { padding: 40px var(--ss-pad-x) 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px; }
.ss-search-head__title { margin: 0; font: 700 42px/1 var(--ss-font-display); color: var(--ss-text); text-transform: uppercase; }
.ss-search-head__count { font: 500 13px/1 var(--ss-font); color: var(--ss-muted); }
.ss-search-card { border: 1px solid var(--ss-border); border-radius: var(--ss-r-card); background: var(--ss-surface);
	padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.ss-search-card__title { font: 600 14.5px/1.3 var(--ss-font); color: var(--ss-text); text-decoration: none; }
.ss-search-card__title:hover { color: var(--ss-accent); }
.ss-search-card__excerpt { font: 400 12.5px/1.5 var(--ss-font); color: var(--ss-muted); }
.ss-search-card__excerpt p { margin: 0; }
.pagination.nav-links, .navigation.pagination { padding: 24px 0 8px; font: 600 13px/1 var(--ss-font); }
.navigation.pagination .nav-links { display: flex; gap: 8px; }
.navigation.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center;
	min-width: 38px; padding: 9px 12px; border: 1px solid var(--ss-border-strong); border-radius: var(--ss-r-btn);
	color: var(--ss-body); text-decoration: none; background: var(--ss-surface); }
.navigation.pagination .page-numbers.current { background: var(--ss-text); border-color: var(--ss-text); color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
	.ss-cat-banner__title { font-size: 48px; }
}
@media (max-width: 900px) {
	.ss-cat-banner { height: 240px; }
	.ss-cat-banner--plain { height: 150px; }
	.ss-cat-banner__title { font-size: 40px; }
	.ss-cat-toolbar { position: static; }
	.ss-cat-band { grid-template-columns: 1fr; gap: 18px; align-items: start; padding: 26px 24px; }
	.ss-cat-band__title, .ss-cat-band--protein .ss-cat-band__title { max-width: none; }
	.ss-search-head__title { font-size: 34px; }
}
@media (max-width: 640px) {
	.ss-cat-banner { height: 200px; }
	.ss-cat-banner__inner { gap: 6px; }
	.ss-cat-banner__title { font-size: 32px; }
	.ss-cat-toolbar__right { margin-left: 0; width: 100%; justify-content: space-between; }
	.ss-archive-grid-wrap { padding-top: 20px; }
}

/* Mobile banner readability: scrim between the art and the copy */
@media (max-width: 640px) {
	.ss-cat-banner::after { content: ""; position: absolute; inset: 0; z-index: 1;
		background: linear-gradient(90deg, rgba(250,249,246,.92) 0%, rgba(250,249,246,.72) 55%, rgba(250,249,246,.2) 100%); }
	.ss-cat-banner--light::after {
		background: linear-gradient(90deg, rgba(18,17,16,.85) 0%, rgba(18,17,16,.6) 55%, rgba(18,17,16,.15) 100%); }
	.ss-cat-banner__inner { z-index: 2; }
}