/**
 * Lovebee Ingredient Glossary
 *
 * Deliberately quiet. Type family, base size and link colour are inherited from
 * Flatsome so the glossary reads as part of the site rather than a bolted-on
 * section. Everything adjustable is a custom property at the top — override
 * these in Customizer > Custom CSS rather than editing this file, so plugin
 * updates don't overwrite your changes.
 *
 * The one deliberate flourish is the INCI line: set as a label, because a
 * label is exactly what it is.
 */

:root {
	/* Reading width. Set to none so prose fills the column. A value such as
	   68ch will rein the lines back in if long measures ever feel hard to
	   follow — every text block on the page keys off this one property. */
	--lbig-measure: none;
	--lbig-gap: 2.75rem;           /* Space between sections. */
	--lbig-rule: rgba(0, 0, 0, .1);
	--lbig-muted: rgba(0, 0, 0, .58);
	--lbig-tint: rgba(0, 0, 0, .028);
	--lbig-radius: 3px;
	--lbig-intro-image: 240px;     /* Width of the image beside the overview. */
}

.lbig-page {
	max-width: 1080px;
	margin: 0 auto;
	padding: 2rem 1.25rem 4rem;
}

/* ---------- Breadcrumbs ---------- */

.lbig-breadcrumbs {
	margin-bottom: 1.75rem;
	padding-bottom: .875rem;
	border-bottom: 1px solid var(--lbig-rule);
}

.lbig-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .8125rem;
	color: var(--lbig-muted);
}

.lbig-breadcrumbs li + li::before {
	content: "›";
	margin-right: .4rem;
	opacity: .5;
}

.lbig-breadcrumbs a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--lbig-rule);
}

.lbig-breadcrumbs a:hover {
	border-bottom-color: currentColor;
}

/* ---------- Headers ---------- */

.lbig-eyebrow {
	margin: 0 0 .5rem;
	font-size: .75rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--lbig-muted);
}

.lbig-eyebrow a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--lbig-rule);
}

.lbig-ingredient__title,
.lbig-category__title,
.lbig-hub__title {
	margin: 0 0 .75rem;
	max-width: var(--lbig-measure);
	text-wrap: balance;
}

/* The signature: the INCI name set as a specimen label. */
.lbig-inci {
	display: inline-flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: .625rem;
	margin: 0 0 1.25rem;
	padding: .4rem .75rem;
	background: var(--lbig-tint);
	border-left: 2px solid var(--lbig-rule);
	border-radius: 0 var(--lbig-radius) var(--lbig-radius) 0;
}

.lbig-inci__label {
	font-size: .6875rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--lbig-muted);
}

.lbig-inci__value {
	font-size: .9375rem;
	font-style: italic;
}

.lbig-lede {
	max-width: var(--lbig-measure);
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.6;
}

/* On the category page the overview still sits inside the normal section flow,
   so it opens without the rule that separates every later section. */
.lbig-section--overview .lbig-section__title {
	padding-top: 0;
	border-top: 0;
}

/* ---------- Intro row: image beside the page header ---------- */

/* The whole header — title, INCI name and overview — sits beside the image.
   A capped image on its own line left a wide empty gutter; this fills it, and
   lets everything below run the full width of the page. */
.lbig-intro {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 1.75rem;
	/* No rule of its own: the breadcrumbs close with one above, and the first
	   section opens with one below. A third here would fence the header in. */
	margin-bottom: var(--lbig-gap);
}

.lbig-intro__media {
	flex: 0 0 var(--lbig-intro-image);
	max-width: var(--lbig-intro-image);
	margin: 0;
}

.lbig-intro__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--lbig-radius);
}

.lbig-intro__body {
	/* min-width:0 stops a long unbroken word from forcing the column wider
	   than its share and collapsing the layout. */
	flex: 1 1 20rem;
	min-width: 0;
}

/* The title now sits beside the image, so it has to start flush with the top
   of it rather than carrying the theme's usual heading margin. */
.lbig-intro__body > :first-child {
	margin-top: 0;
}

.lbig-intro .lbig-ingredient__title {
	margin-top: 0;
	margin-bottom: 1rem;
}

/* Overview sits inside the header block rather than the section flow, so it
   drops the dividing rule the later sections carry and takes a smaller gap.
   Note this margin adds to the INCI label's bottom margin rather than
   collapsing with it — the label is an inline-flex box, and margins only
   collapse between block-level siblings. */
.lbig-intro .lbig-section__title {
	margin-top: .5rem;
	padding-top: 0;
	border-top: 0;
}

/* ---------- Sections ---------- */

.lbig-sections > .lbig-section:first-child {
	margin-top: 0;
}

.lbig-section,
.lbig-faqs,
.lbig-products,
.lbig-index,
.lbig-hub__categories,
.lbig-hub__all {
	margin-top: var(--lbig-gap);
}

.lbig-section__title {
	margin: 0 0 .875rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--lbig-rule);
	font-size: 1.25rem;
}

.lbig-section__body {
	max-width: var(--lbig-measure);
}

.lbig-section__body p:last-child,
.lbig-hub__intro p:last-child {
	margin-bottom: 0;
}

.lbig-hub__intro {
	max-width: var(--lbig-measure);
	font-size: 1.0625rem;
}

/* ---------- FAQs ---------- */

.lbig-faqs__list {
	max-width: var(--lbig-measure);
	margin: 0;
}

.lbig-faqs__q {
	margin: 1.25rem 0 .375rem;
	font-weight: 600;
}

.lbig-faqs__q:first-child {
	margin-top: 0;
}

.lbig-faqs__a {
	margin: 0;
	/* Themes routinely shrink dd. Inherit so answers read at the same size as
	   every other paragraph on the page. */
	font-size: inherit;
	line-height: inherit;
	color: var(--lbig-muted);
}

.lbig-faqs__list,
.lbig-faqs__q {
	font-size: inherit;
	line-height: inherit;
}

/* ---------- Varieties ---------- */

.lbig-varieties__list {
	margin: 0;
	max-width: var(--lbig-measure);
}

.lbig-varieties__label {
	margin: .875rem 0 0;
	font-weight: 600;
}

.lbig-varieties__label:first-child {
	margin-top: 0;
}

.lbig-varieties__inci {
	margin: 0;
	font-size: .9375rem;
	font-style: italic;
	color: var(--lbig-muted);
}

/* ---------- Ingredient list on a product ---------- */

.lbig-ingredient-list .lbig-ilist {
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
	columns: 2;
	column-gap: 2.5rem;
}

.lbig-ingredient-list .lbig-ilist li {
	margin: 0 0 .3rem;
	break-inside: avoid;
}

.lbig-ilist-variation {
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid var(--lbig-rule);
}

.lbig-ilist-variation.is-hidden,
.lbig-ilist-hint.is-hidden {
	display: none;
}

.lbig-ilist-variation__label {
	margin: 0 0 .5rem;
	font-size: .75rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--lbig-muted);
}

.lbig-ilist-hint,
.lbig-ilist-tail {
	margin: 1rem 0 0;
	font-size: .875rem;
	color: var(--lbig-muted);
}

@media (max-width: 600px) {
	.lbig-ingredient-list .lbig-ilist {
		columns: 1;
	}
}

/* ---------- Ingredient index ---------- */

.lbig-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lbig-list__item {
	padding: 1rem 0;
	border-bottom: 1px solid var(--lbig-rule);
}

.lbig-list__link {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .625rem;
	text-decoration: none;
}

.lbig-list__name {
	font-weight: 600;
}

.lbig-list__inci {
	font-size: .8125rem;
	font-style: italic;
	color: var(--lbig-muted);
}

.lbig-list__summary {
	max-width: var(--lbig-measure);
	margin: .375rem 0 0;
	font-size: .9375rem;
	line-height: 1.55;
	color: var(--lbig-muted);
}

.lbig-list--compact .lbig-list__item {
	padding: .625rem 0;
}

.lbig-list--compact .lbig-list__summary {
	display: none;
}

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

.lbig-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--lbig-rule);
	border: 1px solid var(--lbig-rule);
	border-radius: var(--lbig-radius);
	overflow: hidden;
}

.lbig-card__link {
	display: block;
	height: 100%;
	padding: 1.25rem;
	background: #fff;
	text-decoration: none;
	color: inherit;
	transition: background .15s ease;
}

.lbig-card__link:hover,
.lbig-card__link:focus-visible {
	background: var(--lbig-tint);
}

.lbig-card__title {
	margin: 0 0 .5rem;
	font-size: 1.0625rem;
}

.lbig-card__summary {
	margin: 0 0 .75rem;
	font-size: .875rem;
	line-height: 1.5;
	color: var(--lbig-muted);
}

.lbig-card__count {
	font-size: .6875rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--lbig-muted);
}

/* ---------- What's inside, on product pages ---------- */

.lbig-whats-inside {
	margin: 2.5rem 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--lbig-rule);
}

.lbig-whats-inside__title {
	margin: 0 0 .375rem;
	font-size: 1.125rem;
}

.lbig-whats-inside__intro {
	margin: 0 0 1rem;
	font-size: .9375rem;
	color: var(--lbig-muted);
}

.lbig-chips {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lbig-chip {
	display: inline-block;
	padding: .375rem .75rem;
	border: 1px solid var(--lbig-rule);
	border-radius: 2em;
	font-size: .875rem;
	text-decoration: none;
	color: inherit;
	transition: background .15s ease, border-color .15s ease;
}

.lbig-chip:hover,
.lbig-chip:focus-visible {
	background: var(--lbig-tint);
	border-color: var(--lbig-muted);
}

/* ---------- Footers ---------- */

.lbig-ingredient__footer,
.lbig-category__footer {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin-top: var(--lbig-gap);
	padding-top: 1.25rem;
	border-top: 1px solid var(--lbig-rule);
}

.lbig-backlink {
	font-size: .9375rem;
	text-decoration: none;
	border-bottom: 1px solid var(--lbig-rule);
}

.lbig-backlink:hover {
	border-bottom-color: currentColor;
}

.lbig-empty {
	color: var(--lbig-muted);
}

/* ---------- Theme overrides ---------- */

/* Flatsome applies uppercase and letter-spacing to headings and definition
   terms. That works for a shop, but it makes reference prose hard to scan and
   it mangles INCI names. Reset it here rather than fighting it per element.
   The only uppercase kept is on the small labels, which are set that way
   deliberately below. */
.lbig-page h1,
.lbig-page h2,
.lbig-page h3,
.lbig-page h4,
.lbig-page dt,
.lbig-page dd,
.lbig-faqs__q,
.lbig-whats-inside h2,
.lbig-whats-inside__title {
	text-transform: none;
	letter-spacing: normal;
}

/* Re-assert the labels that are meant to be uppercase. */
.lbig-page .lbig-eyebrow,
.lbig-page .lbig-inci__label,
.lbig-page .lbig-card__count {
	text-transform: uppercase;
}

.lbig-page .lbig-eyebrow,
.lbig-page .lbig-card__count {
	letter-spacing: .1em;
}

.lbig-page .lbig-inci__label {
	letter-spacing: .14em;
}

/* ---------- Quality floor ---------- */

.lbig-page a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

@media (max-width: 782px) {
	/* Stacked, but not in source order. Leading with a photograph gives the
	   reader an image with nothing to anchor it; the name has to come first.
	   display:contents lifts the header's children up to be flex items of the
	   row, which is what lets the image slot in between them. */
	.lbig-intro {
		flex-direction: column;
		gap: 0;
	}

	.lbig-intro__body {
		display: contents;
	}

	.lbig-intro__body > .lbig-ingredient__title {
		order: 1;
	}

	.lbig-intro__body > .lbig-inci {
		order: 2;
	}

	.lbig-intro__media {
		order: 3;
		/* flex-basis would size the height in a column, so set width directly. */
		flex: none;
		width: 60%;
		max-width: 60%;
		margin-bottom: 1.5rem;
	}

	.lbig-intro__body > .lbig-section__title {
		order: 4;
	}

	.lbig-intro__body > .lbig-lede {
		order: 5;
	}
}

@media (max-width: 600px) {
	:root {
		--lbig-gap: 2rem;
	}

	.lbig-intro__media {
		width: 100%;
		max-width: 100%;
	}

	.lbig-page {
		padding: 1.25rem 1rem 3rem;
	}

	.lbig-lede {
		font-size: 1.0625rem;
	}

}

@media (prefers-reduced-motion: reduce) {
	.lbig-card__link,
	.lbig-chip {
		transition: none;
	}
}