/*
 * Maglula Catalog Display - STAGING ONLY
 * Shared visual hierarchy for:
 *   1. WooCommerce category cards (.short-description-row / .woocommerce-loop-product__title context)
 *   2. Find Your Fit results (JS-enhanced via maglula-catalog-display.js)
 *
 * Scope notes:
 * - Does not touch ul.products / li.product layout (mobile grid untouched).
 * - Does not touch .link-learn-more-row / .link-learn-more (existing CTA untouched).
 * - No line-clamp / overflow hiding on any text here (important compatibility
 *   info must never be clipped).
 * - Colors inherit from surrounding theme elements (currentColor) rather than
 *   introducing new brand colors, consistent with "do not redesign the
 *   Maglula brand."
 *
 * 2026-10-02 refinement: category-card typography/spacing was reworked to
 * fix inconsistent text alignment and an overly bold description (see
 * project doc for before/after evidence). Category-card rules now use
 * fixed px sizes (not em) so they no longer inherit the theme's per-column
 * responsive font scaling, which was shrinking secondary text on wider
 * (more-columns) viewports. The .maglula-fyf-result-* rules for Find Your
 * Fit are intentionally kept as their own separate blocks (not grouped with
 * the catalog-card selectors) and were NOT changed in this pass.
 */

/* ---------- Category cards ---------- */

/*
 * Specificity note: the theme's own main-style.css targets this exact
 * context with a 4-class ancestor-scoped selector -- e.g.
 *   .woocommerce ul.products li.product .woocommerce-loop-product__title
 *   .woocommerce ul.products li.product .short-description-row
 * (both (0,4,0) specificity, and main-style.css loads AFTER this file in
 * the enqueue order) -- so a bare .maglula-catalog-title /
 * .maglula-catalog-short-desc single-class rule is silently outweighed for
 * font-size/font-weight specifically. Title and short-desc rules below
 * therefore mirror that exact ancestor chain (chaining our class onto the
 * theme's own selector) to win on specificity regardless of enqueue order,
 * rather than resorting to !important. Subtitle/caliber are new classes
 * with no competing theme rule, so plain single-class selectors are
 * sufficient for them.
 */

.maglula-catalog-title {
	/* Inherits .woocommerce-loop-product__title theme styling (strongest
	   weight in the hierarchy); text-align is set explicitly so every card
	   text field shares one deliberate centered axis. */
	margin-bottom: 0;
	text-align: center;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title.maglula-catalog-title {
	text-align: center;
}

.maglula-catalog-subtitle {
	display: block;
	text-align: center;
	font-weight: 500;
	opacity: 1;
}

.maglula-catalog-caliber {
	display: block;
	text-align: center;
	font-weight: 600;
	letter-spacing: 0.01em;
}

.maglula-catalog-short-desc {
	text-align: center;
}

.woocommerce ul.products li.product .short-description-row.maglula-catalog-short-desc {
	/* Reuses the existing .short-description-row class for layout, but the
	   theme's own font-weight: bold for that class read as too heavy and
	   competing with the title, so weight is explicitly normalized here. */
	font-weight: 400;
	text-align: center;
}

/* Mobile (through tablet boundary): compact, legible secondary text. */
@media (max-width: 767px) {
	.woocommerce ul.products li.product .woocommerce-loop-product__title.maglula-catalog-title {
		font-size: 18px;
	}

	.maglula-catalog-subtitle {
		font-size: 16px;
		line-height: 1.3;
		margin: 6px 0 0;
	}

	.maglula-catalog-caliber {
		font-size: 16px;
		line-height: 1.3;
		margin: 4px 0 0;
	}

	.woocommerce ul.products li.product .short-description-row.maglula-catalog-short-desc {
		font-size: 16px;
		line-height: 1.4;
		margin: 10px 0 14px;
	}
}

/* Desktop: same hierarchy, slightly more spacious, still centered. */
@media (min-width: 768px) {
	.woocommerce ul.products li.product .woocommerce-loop-product__title.maglula-catalog-title {
		font-size: 20px;
	}

	.maglula-catalog-subtitle {
		font-size: 17px;
		line-height: 1.3;
		margin: 8px 0 0;
	}

	.maglula-catalog-caliber {
		font-size: 17px;
		line-height: 1.3;
		margin: 4px 0 0;
	}

	.woocommerce ul.products li.product .short-description-row.maglula-catalog-short-desc {
		font-size: 16px;
		line-height: 1.45;
		margin: 12px 0 16px;
	}
}

/* ---------- Find Your Fit results (unchanged in this pass) ---------- */

.maglula-fyf-result-info {
	display: block;
}

.maglula-fyf-result-title {
	/* Keep this an <h3> for semantics (one per result); sizing/weight inherits
	   the theme's existing .text-row h3 styling, which already carries the
	   "strongest" role in this hierarchy - no override needed. */
	margin: 0;
}

.maglula-fyf-result-subtitle {
	display: block;
	font-size: 0.85em;
	font-weight: 400;
	opacity: 0.72;
	line-height: 1.3;
	margin: 0.15em 0 0;
}

.maglula-fyf-result-caliber {
	display: block;
	font-size: 0.9em;
	font-weight: 600;
	line-height: 1.3;
	margin: 0.3em 0 0;
	letter-spacing: 0.01em;
}

@media (max-width: 767px) {
	.maglula-fyf-result-subtitle,
	.maglula-fyf-result-caliber {
		font-size: 0.8em;
	}
}