/*
 * Look To The Gut - Member Library styles.
 *
 * Uses the site's own CSS custom properties where they already exist
 * (--ltg-color-*, set by Look To The Gut Core's Design settings), and
 * falls back to the documented brand palette (warm ivory, sage green,
 * warm charcoal) so this still looks correct even if those variables
 * aren't present. This file is scoped entirely to .ltgml-* classes and
 * never touches the site's existing selectors, so it cannot affect any
 * other page.
 */

.ltgml-single,
.ltgml-library {
	--ltgml-ivory: var(--ltg-color-background, #faf6ef);
	--ltgml-sage: var(--ltg-color-primary, #8ba888);
	--ltgml-charcoal: var(--ltg-color-text, #3a3530);
	--ltgml-border: var(--ltgml-color-card_border, #e6ddcd);
	color: var(--ltgml-charcoal);
}

.ltgml-container {
	max-width: 860px;
	margin: 0 auto;
	padding: 2rem 1.25rem 4rem;
}

/* ---- Header ---- */
.ltgml-single__header {
	margin-bottom: 2.5rem;
}
.ltgml-single__header--supplement {
	display: flex;
	gap: 1.75rem;
	flex-wrap: wrap;
	align-items: flex-start;
}
.ltgml-single__image img {
	width: 180px;
	height: auto;
	border-radius: 10px;
	border: 1px solid var(--ltgml-border);
	object-fit: contain;
	background: #fff;
	padding: 0.75rem;
}
.ltgml-single__header-text {
	flex: 1;
	min-width: 240px;
}
.ltgml-single__type-badge {
	text-transform: uppercase;
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	color: var(--ltgml-sage);
	font-weight: 600;
	margin: 0 0 0.35rem;
}
.ltgml-selection-label {
	display: inline-block;
	background: var(--ltgml-sage);
	color: #fff;
	font-size: 0.75rem;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	margin-bottom: 0.5rem;
}
/* ---- Universal display-title hierarchy (Brand + Product / Formula Name) ----
   Brand is a small, secondary label read above the real heading; Product /
   Formula Name is the primary heading. Both use clamp() for fluid,
   responsive sizing -- confirmed root cause of the oversized, word-splitting
   mobile title was that the old plain <h1><?php the_title(); ?></h1> had NO
   size rule of its own at all, so it inherited the theme's large fixed
   desktop H1 size verbatim on every screen width, including a phone. Font
   family/weight/color are intentionally left to the theme's own H1 styling
   (the existing "premium serif/gold" desktop look) -- only size and
   line-height are set here, and only the max clamp() value below controls
   the desktop ceiling, so it's a one-line change if a different desktop
   size is wanted. */
.ltgml-single__brand-eyebrow {
	margin: 0 0 0.3rem;
	font-size: clamp(0.85rem, 3vw, 1rem);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--ltgml-charcoal);
	opacity: 0.7;
	text-decoration: none; /* never a link -- explicitly not underlined */
}
.ltgml-single__product-name.ltgml-single__product-name {
	margin: 0 0 0.25rem;
	font-size: clamp(1.5rem, 6.5vw, 2.5rem);
	line-height: 1.15;
}
.ltgml-single__subtitle {
	margin: 0 0 0.75rem;
	opacity: 0.85;
}
.ltgml-single__meta-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: 0.5rem;
}
.ltgml-tag {
	display: inline-block;
	font-size: 0.75rem;
	padding: 0.25rem 0.65rem;
	border-radius: 999px;
	background: var(--ltgml-ivory);
	border: 1px solid var(--ltgml-border);
}
.ltgml-tag--research {
	border-color: var(--ltgml-sage);
	color: var(--ltgml-sage);
}
.ltgml-single__compound-link {
	font-size: 0.9rem;
	margin-top: 0.5rem;
}

/* ---- Sections ---- */
.ltgml-section {
	margin: 2.25rem 0;
	padding-top: 2.25rem;
	border-top: 1px solid var(--ltgml-border);
}
.ltgml-section:first-of-type {
	border-top: none;
	padding-top: 0;
}
.ltgml-section h2 {
	font-size: 1.3rem;
	margin: 0 0 1rem;
}
.ltgml-richtext p:first-child {
	margin-top: 0;
}

/* ---- Ingredients ---- */
.ltgml-ingredients-table__row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--ltgml-border);
}
.ltgml-ingredients-table__row span {
	opacity: 0.8;
	text-align: right;
}
.ltgml-ingredients-table__serving {
	margin-top: 0.75rem;
	font-size: 0.85rem;
	opacity: 0.7;
}
.ltgml-watch-note {
	font-size: 0.9rem;
	opacity: 0.8;
	margin-bottom: 0.75rem;
}
.ltgml-watch-list {
	margin: 0;
	padding-left: 1.2rem;
}
.ltgml-watch-list li {
	margin-bottom: 0.4rem;
}

/* ---- Studies ---- */
.ltgml-studies {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}
.ltgml-studies__category {
	color: var(--ltgml-navy, var(--ltgml-charcoal));
	font-size: 1.05rem;
	margin: 0.5rem 0 -0.5rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--ltgml-border);
}
.ltgml-studies__category:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}
.ltgml-study {
	background: var(--ltgml-ivory);
	border: 1px solid var(--ltgml-border);
	border-radius: 10px;
	padding: 1.25rem 1.4rem;
}
.ltgml-study__top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 0.75rem;
	flex-wrap: wrap;
}
.ltgml-study__title {
	margin: 0;
	font-size: 1.05rem;
}
.ltgml-badge {
	font-size: 0.7rem;
	font-weight: 600;
	padding: 0.25rem 0.6rem;
	border-radius: 999px;
	white-space: nowrap;
}
.ltgml-badge--exact_retail_product { background: #dcecdc; color: #2e5c33; }
.ltgml-badge--exact_branded_formulation { background: #e3ecf7; color: #2d4f80; }
.ltgml-badge--broader_ingredient { background: #f3ecd8; color: #7a6420; }
.ltgml-badge--preclinical_mechanistic { background: #eee; color: #666; }

.ltgml-study__byline {
	font-size: 0.85rem;
	opacity: 0.7;
	margin: 0.35rem 0 0.85rem;
}
.ltgml-study__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 0.5rem 1rem;
	margin: 0 0 0.85rem;
}
.ltgml-study__fact dt {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.55;
}
.ltgml-study__fact dd {
	margin: 0;
	font-size: 0.9rem;
}
.ltgml-study__finding,
.ltgml-study__limitation,
.ltgml-study__match {
	font-size: 0.9rem;
	margin: 0.4rem 0;
}
.ltgml-study__link {
	display: inline-block;
	margin-top: 0.6rem;
	font-size: 0.85rem;
	font-weight: 600;
}
.ltgml-no-research {
	font-style: italic;
	opacity: 0.7;
}

/* ---- Practical info ---- */
.ltgml-practical-info {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1rem;
	margin: 0;
}
.ltgml-practical-info__row dt {
	font-size: 0.75rem;
	text-transform: uppercase;
	opacity: 0.55;
	margin-bottom: 0.2rem;
}
.ltgml-practical-info__row dd {
	margin: 0;
}

/* ---- Where to buy ---- */
.ltgml-disclosure {
	font-size: 0.8rem;
	opacity: 0.65;
	margin-bottom: 1rem;
}
.ltgml-retailer-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}
.ltgml-retailer-button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.65rem 1.3rem;
	background: var(--ltgml-charcoal);
	color: #fff !important;
	border-radius: 8px;
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none !important;
}
.ltgml-retailer-button:hover {
	background: var(--ltgml-sage);
}
.ltgml-retailer-button__icon {
	width: 18px;
	height: 18px;
	object-fit: contain;
}

/* ---- Related / card grid (shared by Compound page + library search) ---- */
.ltgml-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 1.25rem;
}
.ltgml-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--ltgml-border);
	border-radius: 10px;
	padding: 1rem;
	text-decoration: none !important;
	color: var(--ltgml-charcoal) !important;
	position: relative;
}
.ltgml-card:hover {
	border-color: var(--ltgml-sage);
}
.ltgml-card__badge {
	position: absolute;
	top: 0.6rem;
	right: 0.6rem;
	font-size: 0.65rem;
	text-transform: uppercase;
	background: var(--ltgml-ivory);
	border: 1px solid var(--ltgml-border);
	padding: 0.15rem 0.5rem;
	border-radius: 999px;
}
.ltgml-card__image img {
	width: 100%;
	height: 120px;
	object-fit: contain;
	margin-bottom: 0.6rem;
}
.ltgml-card__title {
	font-weight: 600;
	margin-bottom: 0.25rem;
}
.ltgml-card__excerpt {
	font-size: 0.85rem;
	opacity: 0.75;
}
.ltgml-tag-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* ---- Library search page ---- */
.ltgml-library__form {
	margin-bottom: 2rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--ltgml-border);
}
.ltgml-library__search-row {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 1rem;
}
.ltgml-library__search-input {
	flex: 1;
	padding: 0.65rem 0.9rem;
	border: 1px solid var(--ltgml-border);
	border-radius: 8px;
	font-size: 1rem;
}
.ltgml-library__search-submit {
	padding: 0.65rem 1.4rem;
	background: var(--ltgml-charcoal);
	color: #fff;
	border: none;
	border-radius: 8px;
	font-weight: 600;
	cursor: pointer;
}
.ltgml-library__type-toggle {
	display: flex;
	gap: 1.25rem;
	margin-bottom: 1rem;
	font-size: 0.9rem;
}
.ltgml-library__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}
.ltgml-library__filter {
	display: flex;
	flex-direction: column;
	font-size: 0.8rem;
	gap: 0.3rem;
}
.ltgml-library__filter select {
	padding: 0.4rem 0.6rem;
	border: 1px solid var(--ltgml-border);
	border-radius: 6px;
}
.ltgml-library__count {
	font-size: 0.85rem;
	opacity: 0.65;
	margin-bottom: 1rem;
}
.ltgml-library__empty {
	opacity: 0.7;
	font-style: italic;
}

@media (max-width: 600px) {
	.ltgml-single__header--supplement {
		flex-direction: column;
	}
	.ltgml-single__image img {
		width: 140px;
	}
}

/* =================================================================
 * BLOCK-BASED HUB / SECTION STYLES
 * Matches the approved PEA mobile Hub mockup: navy headings and icon
 * circles, a green accent for the primary CTA/badge, a cream PDF CTA,
 * and a clean white card grid. These add a navy/green palette on top
 * of the existing sage/ivory variables above — both sets stay in use:
 * sage/ivory for Supplement pages (unchanged), navy/green for the
 * Compound Hub and Section pages (new, block-driven).
 * ================================================================= */

.ltgml-single--compound,
.ltgml-single--compound-section {
	/* Pulls from the owner-editable Member Library → Colors settings
	   (see includes/class-ltgml-colors.php), falling back to these
	   exact values if nothing's been customized — so styling still
	   "just works" without ever touching a color setting. */
	--ltgml-navy: var(--ltgml-color-navy, #14245c);
	--ltgml-navy-light: #e8edfb;
	--ltgml-green: var(--ltgml-color-green, #8ba888);
	--ltgml-cream: var(--ltgml-color-ivory, #fbeed9);
}

/* Same aliases at :root, so the Gutenberg editor canvas (which won't
   reliably carry the .ltgml-single--compound ancestor class the way a
   real front-end page does) still resolves these correctly when
   previewing a block. Harmless duplication on the front end, since
   both compute to the same values either way. */
:root {
	--ltgml-navy: var(--ltgml-color-navy, #14245c);
	--ltgml-navy-light: #e8edfb;
	--ltgml-green: var(--ltgml-color-green, #8ba888);
	--ltgml-cream: var(--ltgml-color-ivory, #fbeed9);
	--ltgml-border: var(--ltgml-color-card_border, #e6ddcd);
	--ltgml-charcoal: #3a3530;
}

.ltgml-block {
	margin: 0 0 2.25rem;
}
.ltgml-block__editor-hint {
	font-size: 0.85rem;
	font-style: italic;
	opacity: 0.6;
	margin: 0.5rem 0 0;
}

/* ---- Compound Header ---- */
.ltgml-hub-header__title {
	color: var(--ltgml-navy);
	/* Fluid sizing: scales down smoothly on narrow viewports instead of
	   a fixed size that can overflow a phone screen with a long title
	   like "Supplement Options" or "Safety Considerations". Generic —
	   applies to every Compound, not tuned to any specific title. */
	font-size: clamp(1.35rem, 5.5vw, 1.9rem);
	line-height: 1.2;
	margin: 0 0 0.35rem;
	letter-spacing: -0.01em;
	/* overflow-wrap alone breaks a word only when it truly has nowhere
	   else to go; word-break: break-word (removed here) is more
	   aggressive and was the confirmed cause of ordinary words like
	   "Micronized" splitting mid-word on a phone-width flex column even
	   though the column had room to simply wrap onto its own line. */
	overflow-wrap: break-word;
	max-width: 100%;
}
.ltgml-hub-header__category {
	color: var(--ltgml-navy);
	font-style: italic;
	font-size: 1.05rem;
	opacity: 0.85;
	margin: 0 0 0.85rem;
}
.ltgml-hub-header__badge {
	display: inline-block;
	border: 1.5px solid var(--ltgml-green);
	color: var(--ltgml-green);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.3rem 0.75rem;
	border-radius: 999px;
}

/* ---- Bottom Line ---- */
.ltgml-bottom-line {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	background: var(--ltgml-navy-light);
	border-radius: 12px;
	padding: 1.25rem 1.4rem;
}
.ltgml-bottom-line__icon {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--ltgml-navy);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
}
.ltgml-bottom-line__label {
	margin: 0 0 0.35rem;
	color: var(--ltgml-navy);
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	font-size: 0.85rem;
}
.ltgml-bottom-line__body .ltgml-richtext p {
	margin: 0 0 0.5rem;
}
.ltgml-bottom-line__body .ltgml-richtext p:last-child {
	margin-bottom: 0;
}

/* ---- Navigation Cards ---- */
.ltgml-nav-cards__heading {
	color: var(--ltgml-navy);
	font-size: 1.15rem;
	margin: 0 0 0.2rem;
}
.ltgml-nav-cards__subheading {
	opacity: 0.65;
	font-size: 0.9rem;
	margin: 0 0 1rem;
}
.ltgml-nav-cards__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.85rem;
}
.ltgml-nav-card {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	background: #fff;
	border: 1px solid var(--ltgml-border);
	border-radius: 12px;
	padding: 1rem;
	text-decoration: none !important;
	color: var(--ltgml-charcoal) !important;
}
.ltgml-nav-card:hover {
	border-color: var(--ltgml-navy);
}
.ltgml-nav-card__icon {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--ltgml-navy-light);
	color: var(--ltgml-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
}
.ltgml-nav-card__title {
	display: block;
	color: var(--ltgml-navy);
	font-size: 0.95rem;
	margin-bottom: 0.15rem;
}
.ltgml-nav-card__description {
	display: block;
	font-size: 0.82rem;
	opacity: 0.75;
	line-height: 1.35;
}

/* ---- CTAs (Supplement / PDF) ---- */
.ltgml-cta {
	border-radius: 14px;
	padding: 1.75rem 1.5rem;
	text-align: center;
}
.ltgml-cta--supplement {
	background: #fffaf2;
	color: var(--ltgml-navy);
	border: 1px solid var(--ltgml-border);
	border-top: 3px solid var(--ltgml-color-cta_button, var(--ltgml-green));
	padding: 1.15rem 1.25rem;
	box-shadow: none;
}
.ltgml-cta__heading {
	font-size: 1.15rem;
	font-weight: 700;
	margin: 0 0 1rem;
	color: #fff;
}
.ltgml-cta--supplement .ltgml-cta__heading {
	font-size: 1.02rem;
	line-height: 1.35;
	margin: 0 0 0.35rem;
	color: var(--ltgml-navy);
}
.ltgml-cta--supplement .ltgml-cta__supporting {
	max-width: 62ch;
	margin: 0 auto 0.85rem;
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--ltgml-charcoal, #2f3440);
	opacity: 0.86;
}
.ltgml-cta--supplement .ltgml-cta__button {
	padding: 0.58rem 1rem;
	font-size: 0.86rem;
	border-radius: 7px;
}
.ltgml-cta__heading--dark {
	color: var(--ltgml-navy);
}
.ltgml-cta__button {
	display: inline-block;
	padding: 0.75rem 1.5rem;
	border-radius: 8px;
	font-weight: 700;
	text-decoration: none !important;
}
.ltgml-cta__button--green {
	background: var(--ltgml-color-cta_button, var(--ltgml-green));
	color: #fff !important;
	border: 1px solid rgba(255,255,255,0.35);
}
.ltgml-cta__button--navy {
	background: var(--ltgml-navy);
	color: #fff !important;
}


/* v1.22.9 — Concept A LOWER Compound CTA only.
   Keep the working CTA logic untouched and do not recolor the compact top shortcut.
   Defaults: deep navy #0E2C4C + cream/white text + warm gold #CD943C.
   All five colors are owner-editable under Member Library -> Colors. */
.ltgml-cta--supplement-bottom {
	background: var(--ltgml-color-lower_cta_background, #0E2C4C);
	color: var(--ltgml-color-lower_cta_text, #FFFFFF);
	border: 0;
	border-top: 0;
	box-shadow: none;
}
.ltgml-cta--supplement-bottom .ltgml-cta__heading {
	color: var(--ltgml-color-lower_cta_heading, #F3E2CD);
}
.ltgml-cta--supplement-bottom .ltgml-cta__supporting {
	color: var(--ltgml-color-lower_cta_text, #FFFFFF);
	opacity: 0.92;
}
.ltgml-cta--supplement-bottom .ltgml-cta__button,
.ltgml-cta--supplement-bottom .ltgml-cta__button--green {
	background: var(--ltgml-color-lower_cta_button, #CD943C);
	color: var(--ltgml-color-lower_cta_button_text, #0E2C4C) !important;
	border: 0;
	box-shadow: none;
}
.ltgml-cta--supplement-bottom .ltgml-cta__button:hover,
.ltgml-cta--supplement-bottom .ltgml-cta__button:focus {
	opacity: 0.92;
}
.ltgml-cta__supporting {
	margin: 0.85rem 0 0;
	font-size: 0.85rem;
	opacity: 0.85;
}
.ltgml-cta--pdf {
	background: var(--ltgml-cream);
	display: flex;
	align-items: center;
	gap: 1rem;
	text-align: left;
	flex-wrap: wrap;
}
.ltgml-cta--pdf .ltgml-cta__icon {
	font-size: 1.6rem;
}
.ltgml-cta--pdf .ltgml-cta__text {
	flex: 1;
	min-width: 160px;
}
.ltgml-cta--hidden-preview {
	opacity: 0.5;
	outline: 2px dashed var(--ltgml-border);
}

/* ---- Section page ---- */
.ltgml-single--compound-section .ltgml-section-backlink,
.ltgml-single--supplement .ltgml-section-backlink {
	display: inline-block;
	margin-bottom: 1.25rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--ltgml-navy);
	text-decoration: none;
	white-space: nowrap;
}
.ltgml-section-page__title {
	color: var(--ltgml-navy);
	margin: 0 0 1.75rem;
	/* Same fluid, overflow-safe treatment as the Compound Header title —
	   fixes the confirmed overflow on long Section titles ("Supplement
	   Options" running off the screen edge, "Safety Considerations")
	   generically for every Section, not with per-title CSS. */
	font-size: clamp(1.3rem, 5.5vw, 1.85rem);
	line-height: 1.25;
	/* overflow-wrap alone breaks a word only when it truly has nowhere
	   else to go; word-break: break-word (removed here) is more
	   aggressive and was the confirmed cause of ordinary words like
	   "Micronized" splitting mid-word on a phone-width flex column even
	   though the column had room to simply wrap onto its own line. */
	overflow-wrap: break-word;
	max-width: 100%;
}
.ltgml-richtext--lead {
	font-size: 1.05rem;
}

/* ---- Evidence badges (Research Items / Outcome Cards) ---- */
.ltgml-badge--strong { background: #dcecdc; color: #2e5c33; }
.ltgml-badge--moderate { background: #e3ecf7; color: #2d4f80; }
.ltgml-badge--early { background: #f3ecd8; color: #7a6420; }
.ltgml-badge--mixed { background: #f7e3e3; color: #8a2d2d; }
.ltgml-badge--preclinical { background: #eee; color: #666; }

.ltgml-study__finding-plain {
	margin: 0.5rem 0 0.85rem;
}

/* ---- Safety items ---- */
.ltgml-safety-item {
	margin-bottom: 1.5rem;
}
.ltgml-safety-item h3 {
	color: var(--ltgml-navy);
	font-size: 1rem;
	margin: 0 0 0.4rem;
}

/* ---- Dosing table ---- */
.ltgml-dose-table__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	padding: 0.65rem 0;
	border-bottom: 1px solid var(--ltgml-border);
}
.ltgml-dose-table__notes {
	flex-basis: 100%;
	font-size: 0.82rem;
	opacity: 0.7;
}
.ltgml-dose-no-time {
	font-size: 0.9rem;
	opacity: 0.7;
	font-style: italic;
}

/* ---- Outcome cards (Discovery view) ---- */
.ltgml-outcome-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1rem;
}
.ltgml-outcome-card {
	background: #fff;
	border: 1px solid var(--ltgml-border);
	border-radius: 10px;
	padding: 1.1rem 1.25rem;
}
.ltgml-outcome-card h3 {
	color: var(--ltgml-navy);
	font-size: 1rem;
	margin: 0 0 0.4rem;
}
.ltgml-outcome-card__takeaway {
	font-weight: 600;
	margin: 0.5rem 0;
}

/* ---- Doctor questions ---- */
.ltgml-doctor-questions {
	margin: 0;
	padding-left: 1.3rem;
}
.ltgml-doctor-questions li {
	margin-bottom: 0.6rem;
}

/* ---- Anecdotal tag ---- */
.ltgml-tag--anecdotal {
	display: inline-block;
	margin-bottom: 1rem;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 700;
	color: #7a6420;
	background: #f3ecd8;
	padding: 0.25rem 0.65rem;
	border-radius: 999px;
}

@media (max-width: 600px) {
	.ltgml-nav-cards__grid {
		grid-template-columns: 1fr;
	}
	.ltgml-cta--pdf {
		flex-direction: column;
		text-align: center;
	}
}

/* ---- Supplement Picks / Recommendation Cards ---- */
.ltgml-supplement-picks__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1.25rem;
}
.ltgml-pick-card {
	position: relative;
	background: #fff;
	border: 1px solid var(--ltgml-border);
	border-radius: 12px;
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
}
.ltgml-pick-card__option-label {
	align-self: flex-start;
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0.25rem 0.6rem;
	border-radius: 999px;
	margin-bottom: 0.75rem;
	background: var(--ltgml-navy-light, #e8edfb);
	color: var(--ltgml-navy, #14245c);
}
/* Legacy classes retained for backward CSS compatibility; v1.23.3 renders only .ltgml-pick-card__option-label. */
.ltgml-pick-card__role {
	align-self: flex-start;
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0.25rem 0.6rem;
	border-radius: 999px;
	margin-bottom: 0.75rem;
}
.ltgml-pick-card__role--minimal_ingredient { background: #dcecdc; color: #2e5c33; }
.ltgml-pick-card__role--top_pick { background: #dcecdc; color: #2e5c33; } /* legacy */
.ltgml-pick-card__role--alternative { background: #e3ecf7; color: #2d4f80; }
.ltgml-pick-card__role--honorable_mention { background: #f3ecd8; color: #7a6420; }
.ltgml-pick-card__role--custom { background: var(--ltgml-navy-light, #e8edfb); color: var(--ltgml-navy, #14245c); }
.ltgml-pick-card__link {
	text-decoration: none !important;
	color: inherit !important;
}
.ltgml-pick-card__image img {
	width: 100%;
	height: 130px;
	object-fit: contain;
	margin-bottom: 0.75rem;
	background: #fff;
}
.ltgml-pick-card__name {
	font-size: 1.05rem;
	margin: 0 0 0.2rem;
	color: var(--ltgml-navy, var(--ltgml-charcoal));
}
.ltgml-pick-card__brand {
	font-size: 0.85rem;
	opacity: 0.7;
	margin: 0 0 0.6rem;
}
.ltgml-pick-card__selection-label {
	font-size: 0.85rem;
	font-weight: 600;
	margin: 0 0 0.5rem;
}
.ltgml-pick-card__reasons {
	margin: 0 0 0.6rem;
	padding-left: 1.1rem;
	font-size: 0.88rem;
}
.ltgml-pick-card__reasons li {
	margin-bottom: 0.25rem;
}
.ltgml-pick-card__evidence {
	font-size: 0.82rem;
	opacity: 0.75;
	margin: 0 0 0.5rem;
}
.ltgml-pick-card__tradeoff {
	font-size: 0.82rem;
	opacity: 0.8;
	margin: 0 0 0.85rem;
}
.ltgml-pick-card__button {
	margin-top: auto;
	display: inline-block;
	text-align: center;
	padding: 0.6rem 1rem;
	border-radius: 8px;
	background: var(--ltgml-navy, var(--ltgml-charcoal));
	color: #fff !important;
	font-weight: 600;
	font-size: 0.88rem;
	text-decoration: none !important;
}

/* ---- Product Formats / Variants (multi-format Supplement pages) ---- */
.ltgml-formats-grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: 1fr;
}
.ltgml-formats-grid--single {
	grid-template-columns: minmax(0, 340px);
}
.ltgml-formats-grid--pair {
	grid-template-columns: repeat(2, 1fr);
}
.ltgml-formats-grid--multi {
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
@media (max-width: 780px) {
	.ltgml-formats-grid--pair,
	.ltgml-formats-grid--multi {
		grid-template-columns: 1fr;
	}
}
.ltgml-format-card {
	position: relative;
	background: #fff;
	border: 1px solid var(--ltgml-border);
	border-radius: 12px;
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	height: 100%;
}
.ltgml-format-card__badge-slot {
	height: 2.75rem;
	min-height: 2.75rem;
	display: flex;
	align-items: flex-start;
}
.ltgml-format-card__badge {
	align-self: flex-start;
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0.25rem 0.6rem;
	border-radius: 999px;
	margin-bottom: 0;
	background: var(--ltgml-navy-light, #e8edfb);
	color: var(--ltgml-navy, #14245c);
}
.ltgml-format-card__image {
	height: 172px;
	margin-bottom: 0.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ltgml-format-card__image img {
	width: 100%;
	height: 160px;
	object-fit: contain;
	background: #fff;
}
.ltgml-format-card__name {
	font-size: 1.1rem;
	margin: 0 0 0.2rem;
	color: var(--ltgml-navy, var(--ltgml-charcoal));
}
.ltgml-format-card__subtitle {
	font-size: 0.88rem;
	opacity: 0.75;
	margin: 0 0 0.75rem;
}
.ltgml-format-card__facts {
	margin: 0 0 0.75rem;
}
.ltgml-format-card__fact {
	display: grid;
	grid-template-columns: minmax(118px, 0.9fr) minmax(0, 1.35fr);
	align-items: start;
	gap: 0.75rem;
	font-size: 0.88rem;
	padding: 0.35rem 0;
	min-height: 2.45rem;
	border-bottom: 1px solid var(--ltgml-border);
}
.ltgml-format-card__fact:nth-child(3) {
	min-height: 4.15rem;
}
.ltgml-format-card__fact dt {
	font-weight: 600;
	opacity: 0.75;
	flex-shrink: 0;
}
.ltgml-format-card__fact dd {
	margin: 0;
	text-align: right;
	/* Lets a long value (e.g. a multi-ingredient "Other ingredients"
	   list) actually wrap onto its own lines inside this flex row
	   instead of being held to its unwrapped intrinsic width. */
	min-width: 0;
	overflow-wrap: break-word;
}
.ltgml-format-card__note {
	font-size: 0.88rem;
	opacity: 0.85;
	margin: 0 0 0.85rem;
}
.ltgml-format-card__retailers {
	margin-top: auto;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

/* At real phone widths, a single Format card was taking up nearly a full
   screen and two stacked cards forced excessive scrolling before reaching
   Why I Selected This Option below them. This trims outer padding, image
   height, and the gaps between rows on the card itself -- desktop and
   tablet (anything above 480px) are completely untouched, and nothing
   here reduces font sizes below a comfortably readable point. */
@media (max-width: 480px) {
	.ltgml-formats-grid {
		gap: 0.85rem;
	}
	.ltgml-format-card {
		padding: 0.85rem;
	}
	.ltgml-format-card__badge {
		padding: 0.2rem 0.5rem;
		margin-bottom: 0.5rem;
		font-size: 0.62rem;
	}
	.ltgml-format-card__badge-slot {
		min-height: 1.75rem;
	}
	.ltgml-format-card__image {
		height: 120px;
		margin-bottom: 0.5rem;
	}
	.ltgml-format-card__image img {
		height: 110px;
	}
	.ltgml-format-card__name {
		font-size: 1rem;
		margin: 0 0 0.15rem;
	}
	.ltgml-format-card__subtitle {
		margin: 0 0 0.5rem;
	}
	.ltgml-format-card__facts {
		margin: 0 0 0.5rem;
	}
	.ltgml-format-card__fact {
		padding: 0.3rem 0;
	}
	.ltgml-format-card__note {
		margin: 0 0 0.5rem;
	}
}

/* ---- Consistent SVG icon system (replaces mixed emoji/unicode icons) ---- */
.ltgml-icon-svg {
	width: 20px;
	height: 20px;
	display: block;
}
.ltgml-nav-card__icon .ltgml-icon-svg,
.ltgml-bottom-line__icon .ltgml-icon-svg {
	width: 20px;
	height: 20px;
}
.ltgml-cta__icon .ltgml-icon-svg {
	width: 26px;
	height: 26px;
}

/* ---- Supplement Shortcut (compact navy/green, ~half the large CTA's height) ---- */
.ltgml-supplement-shortcut {
	background: var(--ltgml-color-cta_background, var(--ltgml-navy));
	border-radius: 12px;
	padding: 0.85rem 1.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.5rem 0.85rem;
	text-align: center;
}
.ltgml-supplement-shortcut__link {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem 0.85rem;
	justify-content: center;
	text-decoration: none !important;
}
.ltgml-supplement-shortcut__heading {
	color: #fff;
	font-size: 0.95rem;
	font-weight: 600;
	opacity: 0.95;
}
.ltgml-supplement-shortcut__cta {
	background: var(--ltgml-color-cta_button, var(--ltgml-green));
	color: #fff !important;
	font-weight: 700;
	font-size: 0.85rem;
	padding: 0.45rem 1rem;
	border-radius: 7px;
	white-space: nowrap;
}
.ltgml-supplement-shortcut__link:hover .ltgml-supplement-shortcut__cta {
	opacity: 0.9;
}

/* ---- Generic mobile overflow safety net ---- */
/* Applies to every heading/text element across Hub, Section, and
   Supplement pages — not tuned to any specific title. Long words or
   titles wrap instead of forcing horizontal scroll or clipping. */
.ltgml-single h1,
.ltgml-single h2,
.ltgml-single h3,
.ltgml-single p,
.ltgml-single .ltgml-nav-card__title,
.ltgml-single .ltgml-pick-card__name {
	/* overflow-wrap alone breaks a word only when it truly has nowhere
	   else to go; word-break: break-word (removed here) is more
	   aggressive and was the confirmed cause of ordinary words like
	   "Micronized" splitting mid-word on a phone-width flex column even
	   though the column had room to simply wrap onto its own line. */
	overflow-wrap: break-word;
	max-width: 100%;
}
.ltgml-single,
.ltgml-container {
	overflow-x: hidden;
}

/* ---- Dosing entry categories + per-row citation link ---- */
.ltgml-dose-table__category {
	color: var(--ltgml-navy, var(--ltgml-charcoal));
	font-size: 1rem;
	margin: 0.5rem 0 -0.25rem;
	padding-top: 0.6rem;
	border-top: 1px solid var(--ltgml-border);
}
.ltgml-dose-table__category:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}
.ltgml-dose-table__link {
	flex-basis: 100%;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--ltgml-color-cta_button, var(--ltgml-green, #8ba888));
	text-decoration: none;
}
.ltgml-dose-table__link:hover {
	text-decoration: underline;
}

/* ---- Objective Evidence Type badges (separate from legacy subjective badges) ---- */
.ltgml-badge--type {
	background: #eef2f8;
	color: var(--ltgml-navy, #14245c);
	border: 1px solid rgba(20,36,92,0.15);
}

/* ---- What Patients Report — community sources ---- */
.ltgml-patients-sources__label {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 700;
	color: #7a6420;
	margin: 1.1rem 0 0.5rem;
}
.ltgml-patients-sources {
	margin: 0;
	padding-left: 1.2rem;
	list-style: disc;
}
.ltgml-patients-sources li {
	margin-bottom: 0.4rem;
}
.ltgml-patients-sources a {
	color: var(--ltgml-color-cta_button, var(--ltgml-green, #8ba888));
	font-weight: 600;
	text-decoration: none;
}
.ltgml-patients-sources a:hover {
	text-decoration: underline;
}
.ltgml-patients-sources__note {
	display: block;
	font-size: 0.82rem;
	opacity: 0.7;
}

/* ---- Safety bottom notice ---- */
.ltgml-safety-notice {
	margin-top: 1.25rem;
	padding: 0.9rem 1.1rem;
	background: #f3ecd8;
	border-left: 3px solid #7a6420;
	border-radius: 6px;
	font-size: 0.88rem;
	color: #5c4d1a;
}

/* v1.12.7: editable retailer note + clickable direct-research badge. */
.ltgml-tag--research-link {
	text-decoration: none;
	cursor: pointer;
}
.ltgml-tag--research-link:hover,
.ltgml-tag--research-link:focus {
	text-decoration: underline;
}
.ltgml-retailer-link {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}
.ltgml-retailer-note {
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.35;
	opacity: 0.82;
}

/* ---- protected Member Library compound directory: compact reference grid ---- */
.ltgml-compound-directory__search{display:flex;gap:.5rem;margin:0 0 1rem}.ltgml-compound-directory__az{display:flex;flex-wrap:wrap;gap:.35rem;margin:0 0 1rem}.ltgml-compound-directory__az a{display:inline-flex;align-items:center;justify-content:center;min-width:1.85rem;height:1.85rem;padding:0 .35rem;border:1px solid var(--ltgml-border);border-radius:999px;background:#fff;color:var(--ltgml-charcoal);font-size:.76rem;font-weight:700;text-decoration:none}.ltgml-compound-directory__az a:hover,.ltgml-compound-directory__az a:focus{border-color:var(--ltgml-sage)}
.ltgml-compound-directory__table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--ltgml-border);border-radius:12px;background:#fff}.ltgml-compound-directory__table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:.9rem}.ltgml-compound-directory__table th,.ltgml-compound-directory__table td{padding:.68rem .75rem;border-bottom:1px solid var(--ltgml-border);vertical-align:middle}.ltgml-compound-directory__table thead th{background:var(--ltgml-ivory);color:var(--ltgml-charcoal);font-size:.76rem;font-weight:800;line-height:1.2;text-align:left}.ltgml-compound-directory__table thead th:nth-child(1){width:32%}.ltgml-compound-directory__table thead th:nth-child(2){width:17%}.ltgml-compound-directory__table thead th:nth-child(3){width:17%}.ltgml-compound-directory__table thead th:nth-child(4){width:34%}.ltgml-compound-directory__check-head,.ltgml-compound-directory__check{text-align:center!important}.ltgml-compound-directory__letter-row th{padding:.42rem .75rem;background:#f7f8f5;color:var(--ltgml-sage);font-size:.82rem;font-weight:800;text-align:left;scroll-margin-top:1rem}.ltgml-compound-directory__compound{font-weight:700;text-align:left}.ltgml-compound-directory__compound a{color:var(--ltgml-charcoal);text-decoration:none}.ltgml-compound-directory__compound a:hover,.ltgml-compound-directory__compound a:focus{color:var(--ltgml-sage);text-decoration:underline}.ltgml-compound-directory__check{font-size:1.05rem;font-weight:800;color:var(--ltgml-sage)}.ltgml-compound-directory__other{font-size:.82rem;line-height:1.3;color:var(--ltgml-charcoal)}.ltgml-compound-directory__dash{color:#a5aaa7;font-weight:400}.ltgml-compound-directory__row:last-child th,.ltgml-compound-directory__row:last-child td{border-bottom:0}
@media(max-width:600px){.ltgml-compound-directory__search{flex-direction:column}.ltgml-compound-directory__search .ltgml-library__search-submit{width:100%}.ltgml-compound-directory__az{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.25rem}.ltgml-compound-directory__az a{flex:0 0 auto}.ltgml-compound-directory__table-wrap{overflow-x:visible}.ltgml-compound-directory__table{table-layout:fixed;font-size:.78rem}.ltgml-compound-directory__table th,.ltgml-compound-directory__table td{padding:.55rem .32rem}.ltgml-compound-directory__table thead th{font-size:.62rem;letter-spacing:-.01em}.ltgml-compound-directory__table thead th:nth-child(1){width:31%}.ltgml-compound-directory__table thead th:nth-child(2){width:18%}.ltgml-compound-directory__table thead th:nth-child(3){width:19%}.ltgml-compound-directory__table thead th:nth-child(4){width:32%}.ltgml-compound-directory__compound{font-size:.76rem;line-height:1.2;overflow-wrap:anywhere}.ltgml-compound-directory__check{font-size:.95rem}.ltgml-compound-directory__other{font-size:.68rem;line-height:1.2;overflow-wrap:anywhere}.ltgml-compound-directory__letter-row th{padding:.36rem .45rem;font-size:.74rem}}


/* ================================================================
   Dosing & Timing v1.13.3 - FINAL PEA GOLDEN STANDARD
   The base .ltgml-dose-table__row flex rules above are intentionally the
   approved PEA geometry. These rules only clarify label/dose behavior and
   preserve the native visible Study/Source link below each row.
   ================================================================ */
.ltgml-dose-table--pea-golden .ltgml-dose-table__label {
    min-width: 0;
    line-height: 1.3;
}
.ltgml-dose-table--pea-golden .ltgml-dose-table__dose-line {
    margin-left: auto;
    text-align: right;
    line-height: 1.4;
}
.ltgml-dose-table--pea-golden .ltgml-dose-table__notes,
.ltgml-dose-table--pea-golden .ltgml-dose-table__link {
    flex-basis: 100%;
}
/* Category remains import/edit metadata only. */
.ltgml-dose-table--pea-golden .ltgml-dose-table__category { display: none; }

@media (max-width: 700px) {
    .ltgml-dose-table--pea-golden .ltgml-dose-table__row {
        display: block;
    }
    .ltgml-dose-table--pea-golden .ltgml-dose-table__label,
    .ltgml-dose-table--pea-golden .ltgml-dose-table__dose-line,
    .ltgml-dose-table--pea-golden .ltgml-dose-table__notes,
    .ltgml-dose-table--pea-golden .ltgml-dose-table__link {
        display: block;
        width: 100%;
        text-align: left;
        margin-left: 0;
        margin-bottom: 0.25rem;
    }
}

/* Compound Hub: one compact return link to the main Mast Cell & Histamine Index. */
.ltgml-compound-index-back{margin:0 0 .8rem;padding:0}
.ltgml-compound-index-back a{display:inline-flex;align-items:center;color:var(--ltgml-sage);font-size:.86rem;font-weight:700;line-height:1.3;text-decoration:none}
.ltgml-compound-index-back a:hover,.ltgml-compound-index-back a:focus{text-decoration:underline}
@media(max-width:600px){.ltgml-compound-index-back{margin-bottom:.65rem}.ltgml-compound-index-back a{font-size:.82rem}}


/* ================================================================
   v1.21.0 — Premium How It Works mechanism visual grammar.
   Content remains owner-editable WYSIWYG HTML; these classes give every
   Compound the same calm, premium presentation without hard-coding science.
   ================================================================ */
.ltgml-mechanism-grid{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:1rem;
	margin:1.35rem 0 1.1rem;
}
.ltgml-mechanism-card{
	position:relative;
	padding:1.15rem 1.15rem 1.05rem;
	background:linear-gradient(180deg,#fff 0%,#fbfaf6 100%);
	border:1px solid var(--ltgml-border,#dedbd2);
	border-top:3px solid var(--ltgml-sage,#8ba888);
	border-radius:14px;
	box-shadow:0 8px 24px rgba(20,36,92,.045);
}
.ltgml-mechanism-card__eyebrow{
	margin:0 0 .5rem;
	color:#7a6420;
	font-size:.72rem;
	font-weight:800;
	letter-spacing:.055em;
	line-height:1.25;
	text-transform:uppercase;
}
.ltgml-mechanism-card h3{
	margin:0 0 .6rem;
	color:var(--ltgml-navy,#14245c);
	font-size:1.02rem;
	line-height:1.3;
}
.ltgml-mechanism-card p{
	margin:0 0 .75rem;
	font-size:.92rem;
	line-height:1.55;
}
.ltgml-mechanism-link{
	display:inline-flex;
	align-items:center;
	margin-top:.1rem;
	color:var(--ltgml-sage,#6f8e6d);
	font-size:.84rem;
	font-weight:750;
	text-decoration:none;
}
.ltgml-mechanism-link:hover,
.ltgml-mechanism-link:focus{
	text-decoration:underline;
}
.ltgml-mechanism-note{
	margin:1rem 0 0;
	padding:1.05rem 1.15rem;
	background:#f3ecd8;
	border-left:3px solid #9b7a3c;
	border-radius:8px;
}
.ltgml-mechanism-note h3{
	margin:0 0 .4rem;
	color:var(--ltgml-charcoal,#2d302f);
	font-size:1rem;
}
.ltgml-mechanism-note p{
	margin:0 0 .55rem;
	font-size:.91rem;
	line-height:1.55;
}
@media(max-width:860px){
	.ltgml-mechanism-grid{grid-template-columns:1fr;}
	.ltgml-mechanism-card{padding:1rem;}
}

/* ================================================================
   v1.21.1 — Final PEA Gold Standard polish.
   ================================================================ */
.ltgml-safety-grid{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
	gap:1rem;
	margin-top:.9rem;
}
.ltgml-safety-grid .ltgml-safety-item{
	margin:0;
	padding:1rem 1.1rem;
	background:#fff;
	border:1px solid var(--ltgml-border,#dedbd2);
	border-radius:12px;
}
.ltgml-safety-grid .ltgml-safety-item h3{
	margin-bottom:.5rem;
}
.ltgml-safety-grid .ltgml-safety-item .ltgml-richtext p:last-child{
	margin-bottom:0;
}

.ltgml-practical-info--facts{
	grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
	gap:.8rem;
}
.ltgml-practical-info__card{
	padding:.9rem 1rem;
	background:#fff;
	border:1px solid var(--ltgml-border,#dedbd2);
	border-radius:10px;
	min-width:0;
}
.ltgml-practical-info__card dt{
	margin-bottom:.3rem;
	color:var(--ltgml-navy,#14245c);
	font-weight:800;
	opacity:.72;
}
.ltgml-practical-info__card dd{
	font-size:.92rem;
	line-height:1.45;
}

/* Recommendation cards are intentionally concise on the Compound page.
   Product-level nuance belongs after the Research + Where to Buy click. */
.ltgml-pick-card__reasons{
	margin-bottom:.9rem;
}

.ltgml-supplement-formula-footer{
	margin:1.6rem 0 0;
	padding-top:.85rem;
	border-top:1px solid var(--ltgml-border,#dedbd2);
	font-size:.78rem;
	line-height:1.45;
	opacity:.62;
}

@media(max-width:600px){
	.ltgml-safety-grid,
	.ltgml-practical-info--facts{
		grid-template-columns:1fr;
	}
}

/* v1.21.1 Gold Standard: make mast-cell/histamine evidence unmistakably first. */
.ltgml-studies__category--primary{
	margin-top:0;
	padding:.7rem .85rem;
	background:#f7f3e8;
	border:0;
	border-left:3px solid #9b7a3c;
	border-radius:8px;
	color:var(--ltgml-navy,#14245c);
	font-weight:800;
}

/* ========================================================================== */
/* v1.24.1 — Minimal Supplement Options teaser cards                         */
/* ========================================================================== */

/* Only the public Option Title gets a shared desktop/tablet slot. This keeps
 * images aligned when one title wraps, without reserving space for paragraphs
 * or inserting fake blank content. The image is the very next visible element. */
.ltgml-pick-card__title-slot {
	min-height: 2.65rem;
	display: flex;
	align-items: flex-start;
	margin-bottom: .75rem;
}

.ltgml-pick-card__title-slot .ltgml-pick-card__option-label {
	margin-bottom: 0;
	line-height: 1.35;
}

@media (max-width: 780px) {
	.ltgml-pick-card__title-slot {
		min-height: 0;
	}
}

/* ========================================================================== */
/* v1.26.0 — Phase 5 contextual education on detailed Supplement pages       */
/* ========================================================================== */
.ltgml-product-education{
	margin-top:1.5rem;
	padding:1.15rem 1.2rem;
	border:1px solid var(--ltgml-border,#dedbd2);
	border-radius:14px;
	background:#fff;
}
.ltgml-product-education__eyebrow{
	margin:0 0 .75rem;
	color:#6881A5;
	font-size:.72rem;
	font-weight:800;
	letter-spacing:.09em;
}
.ltgml-product-education__form + .ltgml-product-education__notes{
	margin-top:1.1rem;
	padding-top:1.05rem;
	border-top:1px solid var(--ltgml-border,#dedbd2);
}
.ltgml-product-education h2{
	margin:0 0 .55rem;
	color:var(--ltgml-navy,#0E2C4C);
	font-size:1.15rem;
	line-height:1.3;
}
.ltgml-product-education h3{
	margin:.1rem 0 .45rem;
	color:var(--ltgml-charcoal,#2d302f);
	font-size:1rem;
}
.ltgml-product-education p{
	margin:.35rem 0;
	font-size:.92rem;
	line-height:1.58;
}
.ltgml-product-education__learn{
	display:inline-block;
	margin-top:.45rem;
	color:var(--ltgml-navy,#0E2C4C)!important;
	font-size:.86rem;
	font-weight:800;
	text-decoration:none!important;
	text-underline-offset:3px;
}
.ltgml-product-education__learn:hover{
	text-decoration:underline!important;
}
.ltgml-product-education__notes > p{
	margin-top:0;
	color:#5f6870;
}
.ltgml-product-education__chips{
	display:flex;
	flex-wrap:wrap;
	gap:.5rem;
	margin-top:.7rem;
}
.ltgml-product-education__chips a{
	display:inline-flex;
	align-items:center;
	min-height:34px;
	padding:.42rem .68rem;
	border:1px solid #B3C0D3;
	border-radius:999px;
	background:#fff;
	color:#0E2C4C!important;
	font-size:.8rem;
	font-weight:750;
	line-height:1.25;
	text-decoration:none!important;
}
.ltgml-product-education__chips a:hover,
.ltgml-product-education__chips a:focus{
	border-color:#CD943C;
	background:#F3E2CD;
}
@media(max-width:600px){
	.ltgml-product-education{padding:1rem;}
	.ltgml-product-education__chips{gap:.42rem;}
}