/*
 * Corsi Online — card restyle v1.2.17.
 *
 * v1.2.17 (2026-08-03): hide `.stm_woo_helpbar` (grid/list view switcher +
 * sort dropdown) on archive pages, per request — only the grid view is
 * supported by this card design, and the switcher let visitors reach the
 * unstyled list view.
 *
 * v1.2.16 (2026-08-03): mobile .price ins (sale price) font-size 28px→38px,
 * per request — reverses v1.2.13's flat-28px change. Desktop base rule
 * (`clamp(22px, 2.5vw, 28px)`) is unchanged and already renders 28px at
 * every desktop viewport width (confirmed via CDP computed-style check,
 * not just static CSS reading).
 *
 * v1.2.15 (2026-08-03): site-wide font consolidated from three families
 * (Exo/Montserrat/Open Sans) down to Montserrat only — the hardcoded
 * `font-family: Exo` this file set on .product-main-category,
 * .course-excerpt, and .price (added in v1.2.11, back when Exo was the
 * site's heading font) is now stale and overrides the new site default.
 * Swapped all three to Montserrat. The title needed no change: it never
 * had its own font-family here, it just inherits whatever the theme's
 * global heading rule resolves to.
 *
 * v1.2.14 (2026-08-03): title font-size 15px→16px, base and mobile alike,
 * per request.
 *
 * v1.2.13 (2026-08-03): mobile .price ins (sale price) font-size
 * clamp(30px, 9vw, 38px)→fixed 28px, per request — was scaling up to
 * 38px on narrow viewports, wanted flat 28px instead.
 *
 * v1.2.12 (2026-08-03): .course-excerpt text-align justify→left, per
 * request — justify was creating uneven word-spacing on the clamped
 * lines, left reads more naturally for short card copy.
 *
 * v1.2.11 (2026-08-03): card text (mobile + desktop) now explicitly set to
 * the site's Exo heading font. The theme only applies `font-family: Exo`
 * to headings/.heading_font (via a big combined h1-h6 selector in
 * style_1.css); the title (an <h2>) already inherited it for free, but
 * the category label, excerpt, and every node in the price panel
 * (del/ins/amount/bdi, discount badge, course hours — all descendants of
 * .price) fell through to body's default Open Sans instead. Set
 * font-family on .product-main-category, .course-excerpt, and .price
 * (the last one covers its descendants via normal inheritance, since none
 * of them declare their own font-family to block it).
 *
 * v1.2.10 (2026-08-03): mobile title font-size 14px→15px (matches the
 * desktop base value); .product-main-category was already 12px at every
 * breakpoint (no override existed), left as-is.
 *
 * v1.2.9 (2026-08-03): two mobile-only bugs reported on /marketing/ —
 * (1) the literal first and last <li> in the whole grid (not per-row) get
 * asymmetric padding from the parent theme's `ul.stm-courses li.col-xs-6:
 * first-child { padding-left: 15px }` / `:last-child { padding-right: 0 }`
 * rules — meant to flush a desktop 3-column row to its container edges,
 * but at the single-column mobile layout every card is stacked, so only
 * those two DOM positions render lopsided (wider + left-shifted for
 * first, narrower + right-shifted for last) while the rest sit correctly
 * centered at the base 40px 70px padding. Reset both back to the
 * symmetric base inside the existing <=767px query. (2) all card text
 * appeared underlined: the parent theme's `body a { text-decoration:
 * underline }` outranks Bootstrap's plain `a { text-decoration: none }`
 * on specificity and matches a.woocommerce-loop-product__link, which
 * wraps the entire card — the underline then visually paints through
 * every descendant text node (title, category, excerpt, price) since
 * none of them reset text-decoration themselves. Fixed by setting
 * text-decoration: none directly on that link. Also reduced the mobile
 * card's left/right li padding from the theme's 70px to 50px per side for
 * more breathing room, applied uniformly (including first/last).
 *
 * v1.2.4 (2026-08-01): closed the remaining visual deltas vs ta/ds found
 * after the v1.2.3 structural alignment — title padding-top 10px→0
 * (matches the shared file's 0px, was adding an extra gap under the
 * category label), price::before/::after top -1px/-2px→-14px/-15px
 * (matches ta/ds's floated-above-the-panel divider instead of touching
 * it), .price margin-top:auto→margin:auto 0 0 (the longhand left the
 * shared file's margin-bottom:10px on .product__inner .price leaking
 * through, so the panel fell short of the card's bottom edge), and
 * .course-excerpt text-align:justify (was inheriting center from the
 * theme default; title/category already override to left but excerpt
 * never did). The stray li-level box-shadow/margin-bottom duplicate
 * (15% opacity, separate from this file's intentional 10% one) lived in
 * the per-site style.css, not here — removed there.
 *
 * v1.2.5 (2026-08-01): 4 more fixes from a second visual pass —
 * (1) explicit `li.product:hover { box-shadow: none !important; }` added:
 * the parent theme's vc_modules/stm_woo_styles/woocommerce.css puts a
 * 15%-opacity shadow on li.product:hover, normally cancelled by the
 * shared category-product-template.php's own hover rule, but that file's
 * is_shop()/is_product_category()/etc. guard is false on the Elementor
 * category pages this card also renders on, so the parent's hover shadow
 * was going uncancelled — confirmed live via CDP CSS.getMatchedStylesForNode
 * (only the parent's rule matched, shared file's <style> block wasn't in
 * the page source at all). (2) .course-excerpt line-clamped to 3 lines:
 * the_excerpt() renders the manual excerpt field verbatim (unlike an
 * auto-generated one, WP doesn't word-trim it), so an editor typing a long
 * excerpt could grow the block tall enough to collide with the accent
 * line/price panel below it. (3) title's own ::after divider hidden
 * (matches ta/ds) — now redundant/doubled up with the price panel's own
 * accent line. (4) course-hours nudged 6px down from the discount badge
 * for a bit more breathing room between them.
 *
 * v1.2.6 (2026-08-01): the v1.2.5 line-clamp alone wasn't enough — on a
 * card whose title wraps 2 lines AND hits the 3-line excerpt clamp, the
 * price::before/::after accent line (floated 14-15px above .price) still
 * landed on the excerpt's own last line, because that headroom was being
 * borrowed from .price's margin-top:auto free space, which is zero once
 * natural content exceeds product__inner's min-height. Fixed by giving
 * .course-excerpt a fixed 18px margin-bottom — guaranteed reserved space
 * the line's offset always fits inside, independent of how much (if any)
 * flex free space exists.
 *
 * v1.2.7 (2026-08-01): course-excerpt margin-bottom 18px→28px — still felt
 * tight specifically on a maxed-out (3-line-clamped) excerpt. .price del/
 * ins font sizes matched to ta/ds's actual values at every breakpoint
 * (base ins clamp(24,2.4vw,30)→clamp(22,2.5vw,28); added the 1024px ins
 * clamp(18,2vw,24) ta/ds have and CO was missing; mobile ins
 * clamp(26,8vw,32)→clamp(30,9vw,38) and del 14px→15px). del's base size
 * already matched ta/ds (15px) so only ins moved at the base breakpoint.
 *
 * v1.2.8 (2026-08-01): v1.2.7's font-size changes on .price del/ins had no
 * visible effect — WooCommerce nests the actual price digits inside
 * <ins>/<del> as .amount > bdi, not directly in del/ins itself, and a
 * parent-theme rule scoped to .stm_archive_product_inner_grid_content
 * ... .price ins .amount (7 classes deep) forces its own fixed font-size
 * (16px) on that nested bdi — far more specific than this file's
 * `.price ins .amount { font-size: inherit }` (no !important) could ever
 * beat. Confirmed live via CDP: computed font-size on the bdi was 16px
 * regardless of ins's own clamp(). Fixed by adding !important to the
 * del/ins .amount + bdi inherit rules (ta/ds already do exactly this).
 *
 * Since v1.2.0 CO's card is the flat masterstudy STM branch, the same
 * structure ta/ds render:
 *
 *   ul.stm-courses > li.col-md-4...product > div.product__inner >
 *   a.woocommerce-loop-product__link > { span.onsale (hidden), img,
 *   div.product-main-category (module hook @4), h2.woocommerce-loop-
 *   product__title (module hook @5, "| NNN ore" stripped), div.course-
 *   excerpt, span.price, div.course-duration (hidden) } +
 *   a.button.product_type_simple (hidden).
 *
 * CO keeps its course-excerpt block (rendered inline in the child
 * content-product.php fork) between the title and the price; the
 * feature-icons row and star-rating were removed from cards by request
 * (2026-08-01), so the card is now content-identical to ta/ds apart from
 * the excerpt and the orange palette.
 * The price grid mechanics match ta/ds (del/ins direct grid children);
 * colors are CO's orange palette. Card chrome (radius/shadow/hover/image
 * treatment) mirrors what ta/ds get from
 * unid-ms/ms-elementor/category-product-template.php — deliberately
 * WITHOUT their min-width: 277px (that rule causes adjacent-card overlap
 * at ~1024px on their 4-column grid; CO's 3-column cards are ~358px wide
 * and don't need it).
 */

:root {
	--unid-cc-co-accent: #ff5a14;
	--unid-cc-co-accent-dark: #e94c08;
	--unid-cc-co-price-bg-top: #fffaf6;
	--unid-cc-co-price-bg-bottom: #fff7f1;
	--unid-cc-co-price-border: #f3ded2;
	--unid-cc-co-separator: #dedede;
	--unid-cc-co-muted: #696969;
	--unid-cc-co-ink: #2b2b2b;
}

/*
 * ===== CARD CHROME (ta/ds parity, orange) =====
 * The card element becomes a column flex so the price band can sit at
 * the bottom; the link grows to fill it (flush-bottom chain).
 * display:flex needs !important: the parent theme's
 * `.woocommerce .stm-courses li.product { display: table-cell }`
 * (and `.stm_archive_product_inner_grid_content ... .woocommerce-
 * LoopProduct-link { display: block }`) have higher specificity than
 * the plain selectors — without !important the li/link stay block-ish,
 * the auto-margin chain has no free space to consume and the price
 * panel floats mid-card on shorter cards (verified via CDP computed
 * styles, 2026-08-01). The ul is already display:flex (theme grid),
 * so li heights still equalize per row.
 */
.stm-courses li.product,
.products li.product {
	display: flex !important;
	flex-direction: column;
}

.stm-courses li.product .product__inner,
.products li.product .product__inner {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	border-radius: 15px !important;
	overflow: hidden;
	box-shadow: rgba(0, 0, 0, .1) 0 5px 20px 0 !important;
	transition: transform .3s ease;
	min-height: 357px !important;
}

.stm-courses li.product .product__inner:hover,
.products li.product .product__inner:hover {
	transform: scale(1.05);
}

/* The parent theme (vc_modules/stm_woo_styles/woocommerce.css) adds its
 * own 15%-opacity box-shadow to li.product:hover; the shared module file
 * normally cancels it, but that file only outputs on actual WooCommerce
 * template contexts (is_shop()/is_product_category()/etc.) and this card
 * also renders on Elementor-built category pages that don't satisfy those
 * conditions, so the parent's hover shadow was going uncancelled here.
 * Reset it directly instead of depending on the conditional file. */
.stm-courses li.product:hover,
.products li.product:hover {
	box-shadow: none !important;
}

.stm-courses li.product .product__inner img,
.products li.product .product__inner img {
	width: 100% !important;
	height: 163px !important;
	object-fit: cover !important;
	border-radius: 10px 10px 0 0 !important;
}

.stm-courses li.product .product__inner .woocommerce-loop-product__link,
.products li.product .product__inner .woocommerce-loop-product__link {
	display: flex !important;
	flex: 1 1 auto;
	flex-direction: column;
	text-decoration: none !important;
}

/* Category label — same node ta/ds render. */
.stm-courses li.product .product-main-category,
.products li.product .product-main-category {
	font-family: Montserrat, sans-serif !important;
	font-size: 12px !important;
	color: #666 !important;
	letter-spacing: .5px;
	padding: 15px 20px 0 !important;
	font-weight: 500 !important;
	text-align: left;
}

/* Title — ta/ds treatment; no fixed min-height because CO has an
 * excerpt below the title (ta/ds don't). */
.stm-courses li.product .woocommerce-loop-product__title {
	font-weight: bold !important;
	max-width: max-content;
	margin-bottom: 0 !important;
	font-size: 16px !important;
	line-height: 1.5 !important;
	text-align: left !important;
	padding: 0 20px 0 !important;
	position: relative !important;
	min-width: 100% !important;
}

/* Hidden — the price panel draws its own separator+accent above itself
 * (matches ta/ds, which hide this same node to avoid a doubled line). */
.stm-courses li.product .woocommerce-loop-product__title::after,
.products li.product .woocommerce-loop-product__title::after {
	display: none !important;
}

/*
 * ===== CO CONTENT BLOCK (course excerpt) =====
 * Flat sibling between title and price, styled to keep the look CO's
 * previous nested fork had (theme CSS targeted .stm_lms_courses__single--
 * title .course-excerpt etc. — those selectors no longer exist). The
 * feature-icons row and star-rating were removed from cards by request
 * (2026-08-01).
 * the_excerpt() renders the product's manual excerpt field verbatim
 * (unlike auto-generated excerpts, WP doesn't word-trim a manual one), so
 * length is whatever an editor typed — clamped to 3 lines here so a long
 * excerpt can't grow past the card's own edge.
 * margin-bottom is a FIXED reserve, not left to the margin-top:auto free
 * space on .price: on a card whose title wraps 2 lines *and* hits the
 * 3-line excerpt clamp, natural content already exceeds product__inner's
 * min-height, so the flex chain has zero free space to give — the
 * price::before/::after accent line (floated 14-15px above .price, see
 * below) would land on top of the excerpt's own last line instead of in
 * clear space above it. A fixed margin guarantees that room regardless of
 * how tall the row's content gets.
 */
.stm-courses li.product .course-excerpt,
.products li.product .course-excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	font-family: Montserrat, sans-serif;
	font-size: 13px;
	line-height: 1.45;
	color: var(--unid-cc-co-muted);
	text-align: left;
	padding: 10px 20px 0;
	margin: 0 0 28px;
}

/*
 * ===== NODES HIDDEN FOR ta/ds PARITY =====
 * ta/ds hide the same nodes (their category-product-template.php hides
 * .onsale / .screen-reader-text / a.button.product_type_simple; their
 * module CSS hides .course-duration). CO's hidden .course-duration is
 * rendered by the module (render_card_duration) for structural parity.
 */
.stm-courses li.product .onsale,
.products li.product .onsale {
	display: none !important;
}

.stm-courses li.product .screen-reader-text,
.products li.product .screen-reader-text {
	display: none !important;
}

.stm-courses li.product .course-duration,
.products li.product .course-duration {
	display: none !important;
}

.stm-courses li.product a.button.product_type_simple,
.products li.product a.button.product_type_simple {
	display: none !important;
}

/* Course grid — Bootstrap's .col-xs-6 (50% width, no media guard) puts two
 * cards per row below 768px; the card's own min-width makes them overlap.
 * Force one card per row until .col-sm-4 takes over at 768px. */
@media (max-width: 767px) {
	.course-col.col-xs-6 {
		width: 100% !important;
		padding-left: 50px !important;
		padding-right: 50px !important;
	}

	/* Undo the theme's edge-flush padding on the grid's literal first/last
	 * <li> (see v1.2.9 note above) — at this single-column breakpoint every
	 * card should get the same symmetric padding as the rule above. */
	.course-col.col-xs-6:first-child,
	.course-col.col-xs-6:last-child {
		padding-left: 50px !important;
		padding-right: 50px !important;
	}
}

/*
 * ===== PRICE PANEL (flat grid, same mechanics as ta/ds) =====
 * Direct child of the link; margin-top:auto pushes it to the card's
 * bottom inside the flex chain above. Full card width — no bleed
 * margins needed anymore (the old nested fork padded the card, this
 * structure doesn't).
 */
.stm-courses li.product .price,
.products li.product .price {
	position: relative;
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: auto auto;
	column-gap: 16px;
	row-gap: 8px;
	align-items: center;

	box-sizing: border-box;
	width: 100% !important;
	margin: auto 0 0 !important;
	padding: 18px 20px 20px;

	background: linear-gradient(180deg, var(--unid-cc-co-price-bg-top) 0%, var(--unid-cc-co-price-bg-bottom) 100%);
	border-top: 1px solid var(--unid-cc-co-price-border);

	font-family: Montserrat, sans-serif;
	font-style: normal;
}

/* Separator line + central accent segment. */
.stm-courses li.product .price::before,
.products li.product .price::before {
	content: "";
	position: absolute;
	left: 20px;
	right: 20px;
	top: -14px;
	height: 1px;
	background: var(--unid-cc-co-separator);
}

.stm-courses li.product .price::after,
.products li.product .price::after {
	content: "";
	position: absolute;
	top: -15px;
	left: 50%;
	width: 72px;
	height: 2px;
	transform: translateX(-50%);
	background: var(--unid-cc-co-accent);
	border-radius: 1px;
}

/* Original price — left column, top row. */
.stm-courses li.product .price del,
.products li.product .price del {
	grid-column: 1;
	grid-row: 1;
	justify-self: start;
	align-self: end;
	margin: 0;
	color: var(--unid-cc-co-muted);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.15;
	opacity: 1;
	text-decoration-thickness: 1.5px;
}

/* !important required: a parent-theme rule scoped to
 * .stm_archive_product_inner_grid_content ... .price del .amount (and the
 * ins/bdi equivalent below) is far more specific than any plain selector
 * here can be, and forces its own fixed font-size (e.g. 16px) on the
 * nested WooCommerce .amount/bdi wrappers around the actual price digits
 * — confirmed live via CDP CSS.getMatchedStylesForNode. Without
 * !important, del/ins's own font-size (set above) never reaches the
 * visible text, since the WooCommerce markup nests the real digits inside
 * <ins>/<del> as .amount > bdi, not directly in del/ins itself. */
.stm-courses li.product .price del .amount,
.stm-courses li.product .price del bdi,
.products li.product .price del .amount,
.products li.product .price del bdi {
	color: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
}

/* Discounted price — left column, bottom row. */
.stm-courses li.product .price ins,
.products li.product .price ins {
	grid-column: 1;
	grid-row: 2;
	justify-self: start;
	align-self: start;
	margin: 0;
	color: var(--unid-cc-co-accent);
	font-size: clamp(22px, 2.5vw, 28px);
	font-weight: 800;
	line-height: 1;
	text-decoration: none;
}

.stm-courses li.product .price ins .amount,
.stm-courses li.product .price ins bdi,
.products li.product .price ins .amount,
.products li.product .price ins bdi {
	color: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
}

/* Discount pill — right column, top row. */
.stm-courses li.product .price .unid-cc-co-discount-badge,
.products li.product .price .unid-cc-co-discount-badge {
	grid-column: 2;
	grid-row: 1;
	align-self: end;
	justify-self: end;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 30px;
	padding: 6px 12px;

	background: rgba(255, 255, 255, .74);
	border: 1.5px solid var(--unid-cc-co-accent);
	border-radius: 8px;

	color: var(--unid-cc-co-accent);
	font-size: 12px;
	font-weight: 750;
	line-height: 1;
	white-space: nowrap;
}

.stm-courses li.product:hover .unid-cc-co-discount-badge,
.products li.product:hover .unid-cc-co-discount-badge {
	background: #fff;
	border-color: var(--unid-cc-co-accent-dark);
	color: var(--unid-cc-co-accent-dark);
}

/* Course hours — right column, bottom row. */
.stm-courses li.product .price .unid-cc-co-course-hours,
.products li.product .price .unid-cc-co-course-hours {
	grid-column: 2;
	grid-row: 2;
	align-self: start;
	justify-self: end;
	margin-top: 6px;

	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--unid-cc-co-ink);
	font-size: 14px;
	font-weight: normal;
	line-height: 1;
	white-space: nowrap;
}

.stm-courses li.product .price .unid-cc-co-course-hours__text,
.products li.product .price .unid-cc-co-course-hours__text {
	font-size: 16px !important;
	font-weight: normal !important;
}

.stm-courses li.product .price .unid-cc-co-course-hours__clock,
.products li.product .price .unid-cc-co-course-hours__clock {
	position: relative;
	display: inline-block;
	flex: 0 0 auto;
	width: 13px;
	height: 13px;
	border: 1.5px solid var(--unid-cc-co-ink);
	border-radius: 50%;
}

.stm-courses li.product .price .unid-cc-co-course-hours__clock::before,
.stm-courses li.product .price .unid-cc-co-course-hours__clock::after,
.products li.product .price .unid-cc-co-course-hours__clock::before,
.products li.product .price .unid-cc-co-course-hours__clock::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 1.5px;
	background: var(--unid-cc-co-ink);
	border-radius: 1px;
	transform-origin: 50% 100%;
}

.stm-courses li.product .price .unid-cc-co-course-hours__clock::before,
.products li.product .price .unid-cc-co-course-hours__clock::before {
	height: 3.5px;
	transform: translate(-50%, -100%);
}

.stm-courses li.product .price .unid-cc-co-course-hours__clock::after,
.products li.product .price .unid-cc-co-course-hours__clock::after {
	height: 3px;
	transform: translate(-50%, -100%) rotate(125deg);
}

/* Tablet. */
@media (max-width: 1024px) {
	.stm-courses li.product .price,
	.products li.product .price {
		column-gap: 12px;
		padding-right: 16px;
		padding-left: 16px;
	}

	.stm-courses li.product .price::before,
	.products li.product .price::before {
		left: 16px;
		right: 16px;
	}

	.stm-courses li.product .price .unid-cc-co-discount-badge,
	.products li.product .price .unid-cc-co-discount-badge {
		padding-right: 10px;
		padding-left: 10px;
		font-size: 11px;
	}

	.stm-courses li.product .price ins,
	.products li.product .price ins {
		font-size: clamp(18px, 2vw, 24px);
	}
}

/* Mobile: same hierarchy, compact without squashing. */
@media (max-width: 600px) {
	.stm-courses li.product .woocommerce-loop-product__title {
		font-size: 16px !important;
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	.stm-courses li.product .course-excerpt,
	.products li.product .course-excerpt {
		font-size: 12px;
		padding-left: 16px;
		padding-right: 16px;
	}

	.stm-courses li.product .product-main-category,
	.products li.product .product-main-category {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	.stm-courses li.product .price,
	.products li.product .price {
		column-gap: 12px;
		row-gap: 8px;
		padding: 16px 14px 18px;
	}

	.stm-courses li.product .price::before,
	.products li.product .price::before {
		left: 14px;
		right: 14px;
	}

	.stm-courses li.product .price ins,
	.products li.product .price ins {
		font-size: 38px;
	}

	.stm-courses li.product .price del,
	.products li.product .price del {
		font-size: 15px;
	}

	.stm-courses li.product .price .unid-cc-co-discount-badge,
	.products li.product .price .unid-cc-co-discount-badge {
		min-height: 30px;
		padding: 6px 10px;
		font-size: 11px;
	}

	.stm-courses li.product .price .unid-cc-co-course-hours,
	.products li.product .price .unid-cc-co-course-hours {
		font-size: 13px;
		gap: 5px;
	}

	.stm-courses li.product .price .unid-cc-co-course-hours__clock,
	.products li.product .price .unid-cc-co-course-hours__clock {
		width: 16px;
		height: 16px;
	}
}

/* Archive-page helpbar (grid/list view switcher + sort dropdown) — hidden
 * site-wide since only the grid view is supported by this card design; the
 * list view renders the old unstyled markup. */
.stm_woo_helpbar {
	display: none !important;
}