/* ==========================================================================
   MWH Content Formats: the store's sections for product descriptions, pages
   and posts. Colours and type come from the My Worthy Home theme where it is
   active, with fallbacks that keep the same look under any other theme.
   ========================================================================== */

:where(.mwh-c-panel, .mwh-c-feature, .mwh-c-benefits, .mwh-c-notice, .mwh-c-card, .mwh-c-columns, .mwh-c-table, .mwh-c-eyebrow, .mwh-c-lead, .mwh-c-subtitle, .mwh-c-note, .mwh-c-ticks, .mwh-c-divider) {
	--mwh-c-ink: var(--mwh-ink, #1d211e);
	--mwh-c-muted: var(--mwh-graphite, #5e665f);
	--mwh-c-accent: var(--mwh-evergreen, #20392c);
	--mwh-c-paper: var(--mwh-paper, #fff);
	--mwh-c-line: var(--mwh-line, #e4e1d8);
	--mwh-c-sage: color-mix(in srgb, var(--mwh-c-accent) 5%, var(--mwh-c-paper));
	--mwh-c-sage-line: color-mix(in srgb, var(--mwh-c-accent) 14%, var(--mwh-c-paper));
	--mwh-c-warm: #fdf8ee;
	--mwh-c-warm-line: #eee2c7;
	--mwh-c-radius: 14px;
}

/* Every section starts and ends cleanly, whatever the paragraph spacing around it. */
:is(.mwh-c-panel, .mwh-c-feature, .mwh-c-benefits, .mwh-c-notice, .mwh-c-card, .mwh-c-column) > :first-child {
	margin-top: 0 !important;
}

:is(.mwh-c-panel, .mwh-c-feature, .mwh-c-benefits, .mwh-c-notice, .mwh-c-card, .mwh-c-column) > :last-child {
	margin-bottom: 0 !important;
}

:is(.mwh-c-panel, .mwh-c-feature, .mwh-c-benefits, .mwh-c-card, .mwh-c-column) :is(h2, h3) {
	font-family: var(--wp--preset--font-family--display, Georgia, serif);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: 0;
	color: var(--mwh-c-accent);
}

/* Intro panel: a soft sage panel that opens a description. */
.mwh-c-panel {
	margin: 0 0 32px;
	padding: clamp(20px, 3vw, 30px) clamp(18px, 3vw, 30px);
	background: var(--mwh-c-sage);
	border: 1px solid var(--mwh-c-sage-line);
	border-radius: var(--mwh-c-radius);
}

.mwh-c-panel h2 {
	margin: 0 0 14px;
	font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem);
}

/* Section heading's line underneath, and the small label above a headline. */
.mwh-c-eyebrow {
	margin: 0 0 10px !important;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.1em;
	color: color-mix(in srgb, var(--mwh-c-accent) 70%, var(--mwh-c-paper));
	text-transform: uppercase;
}

.mwh-c-lead {
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--mwh-c-ink);
}

.mwh-c-subtitle {
	margin-top: -0.35em !important;
	margin-bottom: 1.2em !important;
	color: var(--mwh-c-muted);
}

.mwh-c-note {
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--mwh-c-muted);
}

/* Features: one after another, each divided from the next by a fine line. */
.mwh-c-feature {
	margin: 0 0 20px;
	padding: 0 0 20px;
	border-bottom: 1px solid var(--mwh-c-line);
}

.mwh-c-feature h3 {
	margin: 0 0 8px;
	font-size: 1.1875rem;
}

.mwh-c-feature:has(+ :not(.mwh-c-feature)),
.mwh-c-feature:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

/* Benefits box: a sage panel with a tick list. */
.mwh-c-benefits {
	margin: 0 0 24px;
	padding: 20px clamp(18px, 2.5vw, 24px);
	background: var(--mwh-c-sage);
	border: 1px solid var(--mwh-c-sage-line);
	border-radius: var(--mwh-c-radius);
}

.mwh-c-benefits h3 {
	margin: 0 0 14px;
	font-size: 1.125rem;
}

/* Tick list: each item with a tick in an evergreen circle. */
ul.mwh-c-ticks {
	display: grid;
	gap: 10px;
	margin: 0 0 1em;
	padding: 0;
	list-style: none;
}

ul.mwh-c-ticks > li {
	position: relative;
	margin: 0;
	padding-left: 30px;
	line-height: 1.55;
}

ul.mwh-c-ticks > li::before {
	content: "";
	position: absolute;
	top: 2px;
	left: 0;
	width: 20px;
	height: 20px;
	background: var(--mwh-c-accent);
	border-radius: 50%;
}

ul.mwh-c-ticks > li::after {
	content: "";
	position: absolute;
	top: 6px;
	left: 7px;
	width: 6px;
	height: 10px;
	border: solid var(--mwh-c-paper);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

ul.mwh-c-ticks > li::marker {
	content: none;
}

/* Notice: a warm box for something the shopper should know before buying. */
.mwh-c-notice {
	margin: 0 0 24px;
	padding: 16px 20px;
	color: var(--mwh-c-ink);
	background: var(--mwh-c-warm);
	border: 1px solid var(--mwh-c-warm-line);
	border-radius: var(--mwh-c-radius);
}

/* Card: a white box with a border, for a self-contained point. */
.mwh-c-card {
	margin: 0 0 20px;
	padding: 20px clamp(18px, 2.5vw, 24px);
	background: var(--mwh-c-paper);
	border: 1px solid var(--mwh-c-line);
	border-radius: var(--mwh-c-radius);
}

.mwh-c-card h3 {
	margin: 0 0 8px;
	font-size: 1.125rem;
}

/* Two columns side by side where there is room; one under the other on a phone. */
.mwh-c-columns {
	display: grid;
	gap: 16px 28px;
	margin: 0 0 24px;
}

@media (min-width: 40rem) {
	.mwh-c-columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.mwh-c-column {
	min-width: 0;
}

.mwh-c-column h3 {
	margin: 0 0 8px;
	font-size: 1.0625rem;
}

/* Specifications: name on the left, value on the right, a fine line between rows. */
table.mwh-c-table {
	width: 100%;
	margin: 0 0 24px;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

table.mwh-c-table :is(th, td) {
	padding: 11px 14px;
	text-align: left;
	vertical-align: top;
	border: 0;
	border-bottom: 1px solid var(--mwh-c-line);
}

table.mwh-c-table th {
	width: 38%;
	font-weight: 600;
	color: var(--mwh-c-ink);
	background: var(--mwh-c-sage);
}

table.mwh-c-table tr:first-child > * {
	border-top: 1px solid var(--mwh-c-line);
}

/* Divider: a quiet rule between two parts of a description. */
hr.mwh-c-divider {
	height: 1px;
	margin: 32px 0;
	background: var(--mwh-c-line);
	border: 0;
}