/**
 * Styles for the [fitrx_product_category] shortcode's OWN chrome — just the
 * hero and the category quick-nav pills. Everything else (filter sidebar,
 * search, sort, chips, grid, Load More) is intentionally NOT styled here —
 * that markup is wrapped in the Shop Page block's own
 * `.wp-block-fitrx-blocks-shop-page` class and uses its exact
 * `.shop-page__*` class names, so it's styled by that block's own compiled
 * stylesheet (build/shop-page/style-index.css, enqueued as a dependency of
 * this file — see product-category-helpers.php). A second copy of those
 * rules here would just be something to keep in sync by hand; reusing the
 * real stylesheet means a filter row, the search field's focus state, and
 * the Load More button are pixel-identical to /shop/ because they're the
 * same CSS, not a lookalike.
 *
 * 'Anton' and 'Manrope' are the same two fonts every block/shortcode in
 * this plugin uses, loaded once site-wide by fitrx_blocks_enqueue_fonts()
 * in fitrx-blocks.php — not repeated here.
 */

.fitrx-cat-page,
.fitrx-cat-page *,
.fitrx-cat-page *::before,
.fitrx-cat-page *::after {
	box-sizing: border-box;
}

.fitrx-cat-page {
	--ink: #181818;
	--ink-soft: rgba(24, 24, 24, 0.64);
	--ink-softer: rgba(24, 24, 24, 0.44);
	--line: #ece8e2;
	--red: #ce0e2d;
	--card: #ffffff;

	display: block;
	width: 100%;
	background: var(--paper, #fffdfb);
	color: var(--ink);
	font-family: 'Manrope', -apple-system, sans-serif;
	-webkit-font-smoothing: antialiased;
}

.fitrx-cat-page a { text-decoration: none; }

/*
 * ---- campaign ad slots ----
 * Deliberately visually set apart from the editorial content around it — a
 * bordered "frame" plus a small uppercase "Advertisement" caption, the same
 * way most publisher sites label paid placements. Not just a nicety: it's
 * also the honest thing to do so a visitor never mistakes a campaign for an
 * actual product/section this page picked to show them.
 */
.fitrx-cat-ad-banner,
.fitrx-cat-ad-skyscraper {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.fitrx-cat-ad-banner { margin: 0 0 28px; }
.fitrx-cat-ad-skyscraper { margin: 0 0 20px; }

.fitrx-cat-ad-label {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--ink-softer);
}

.fitrx-cat-ad-frame {
	display: inline-flex;
	max-width: 100%;
	padding: 12px;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 14px;
}

/* Scoped under .fitrx-cat-page (0,2,0) so this beats Elementor's own
   `.elementor img { height: auto; max-width: 100%; ... }` (0,1,1) instead of
   depending on load order — same specificity issue as elsewhere in this
   plugin. The width/height HTML attributes (set in
   fitrx_blocks_render_campaign_ad()) still reserve the right aspect ratio
   even with height:auto here, so this only kicks in to shrink the ad on
   viewports narrower than its native width. */
.fitrx-cat-page .fitrx-cat-ad-img {
	display: block;
	max-width: 100%;
	height: auto;
}

.fitrx-cat-inner {
	max-width: 1520px;
	margin: 0 auto;
	padding: 20px;
}

/* ---- category quick-nav (sits below the hero, same spacing convention as [fitrx_blog_archive]'s .fitrx-blog-filter) ---- */
.fitrx-cat-nav {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scrollbar-width: none;
	border-bottom: 1px solid var(--line);
	padding-bottom: 24px;
	margin-bottom: 36px;
}
.fitrx-cat-nav::-webkit-scrollbar { display: none; }
.fitrx-cat-pill {
	flex-shrink: 0;
	display: block;
	padding: 10px 20px;
	border-radius: 999px;
	border: 1.5px solid var(--line);
	background: var(--card);
	font-size: 13px;
	font-weight: 700;
	color: var(--ink-soft);
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.fitrx-cat-pill:hover { border-color: var(--red); color: var(--ink); }
.fitrx-cat-pill.is-active { background: var(--red); border-color: var(--red); color: #fff; }

/* ---- hero ---- */
.fitrx-cat-hero { padding: 40px 0 28px; }
.fitrx-cat-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--red);
	margin: 0 0 16px;
}
.fitrx-cat-eyebrow::before { content: ''; width: 16px; height: 2px; background: var(--red); }
.fitrx-cat-heading {
	font-family: 'Anton', sans-serif;
	font-weight: 400;
	font-size: clamp(34px, 5.5vw, 64px);
	line-height: 0.98;
	text-transform: uppercase;
	margin: 0 0 16px;
	max-width: 900px;
}
.fitrx-cat-sub {
	max-width: 620px;
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--ink-soft);
	margin: 0 0 22px;
}
.fitrx-cat-sub p { margin: 0 0 12px; }
.fitrx-cat-sub p:last-child { margin-bottom: 0; }
.fitrx-cat-stats { display: flex; align-items: center; gap: 14px; }
.fitrx-cat-stats span { font-size: 13px; font-weight: 700; color: var(--ink-softer); }
.fitrx-cat-stats strong {
	font-family: 'Manrope', sans-serif;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}
.fitrx-cat-stats-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--line); }

/* ---- bottom breathing room (Shop page block sits in its own page context, so it has no reason to reserve this itself) ---- */
.fitrx-cat-inner .wp-block-fitrx-blocks-shop-page { padding-bottom: 60px; }

/*
 * Unlike /shop/ (search sits alone above the grid, in .shop-page__head, and
 * count/sort are the toolbar's only two children), this page puts all
 * three in one row while there's room for it:
 *
 * - Above 700px, search (capped at 340px, its old pre-reuse size) sits on
 *   the left and count+sort sit together as ONE cluster on the right (the
 *   outer .shop-page__toolbar's own space-between puts search and that
 *   whole cluster at the row's two edges) — count and sort themselves
 *   stay side by side with a small gap, not spread apart, since they're
 *   sharing the row with search rather than owning it.
 * - Below 700px there isn't room for three things on one line (this page
 *   has one more toolbar item than /shop/ does), so search drops its cap
 *   and becomes its own full-width row — same width as the Filters/Sort
 *   buttons above and below it. count+sort now have that row to
 *   themselves, so THIS is where they spread to the row's two edges with
 *   justify-content: space-between, matching /shop/'s own 2-item toolbar.
 *   Below 480px (/shop/'s own breakpoint for this exact pairing) those two
 *   stack too.
 */
@media (min-width: 701px) {
	.shop-page__toolbar .shop-page__search {
		flex: 0 1 340px;
		max-width: 340px;
		padding: 10px 16px;
	}
	.fitrx-cat-toolbar-right { flex-shrink: 0; }
}
@media (max-width: 700px) {
	.shop-page__toolbar .shop-page__search {
		flex: 1 1 100%;
		max-width: none;
		padding: 10px 16px;
	}
	.fitrx-cat-toolbar-right { flex: 1 1 100%; justify-content: space-between; }
}
.fitrx-cat-toolbar-right { display: flex; align-items: center; gap: 16px; }
/*
 * .shop-page__sort switches to width:100% below 480px (real shop-page CSS) —
 * on /shop/ that's harmless because sort is a direct child of a toolbar
 * that's already gone flex-direction:column, so it just becomes its own
 * full-width row. Here it's nested one level deeper inside
 * .fitrx-cat-toolbar-right — a 100%-wide sort dropdown next to count inside
 * a row-direction wrapper would overlap it. Same fix: stack this wrapper
 * too, at the same breakpoint.
 */
@media (max-width: 480px) {
	.fitrx-cat-toolbar-right { flex-direction: column; align-items: stretch; }
}