/*
 * Wormy – Bootstrap 5 custom styles
 * Load after Bootstrap. Components are prefixed wm-.
 */

/* --------------------------------------------------------------------------- */
/* Variables                                                                   */
/* --------------------------------------------------------------------------- */

:root {
	--wm-ground: #fff0f4;
	--wm-ground-2: #fff6f9;
	--wm-cream: #fffdfb;
	--wm-ink: #2b1340;
	--wm-ink-2: #3a1d55;
	--wm-muted: #5b4470;
	--wm-faint: #7b6690;
	--wm-pink: #f4a7c0;
	--wm-pink-2: #f8c3d5;
	--wm-sun: #ffc94a;
	--wm-sun-2: #ffe29a;
	--wm-mint: #bde8cf;
	--wm-lilac: #d9ccf5;
	--wm-dash: #e3c9d6;
	--wm-line: 3px solid var(--wm-ink);
	--wm-shadow: 8px 8px 0 var(--wm-ink);
	--wm-shadow-sm: 5px 5px 0 var(--wm-ink);
	--wm-radius: 28px;
	--wm-radius-lg: 32px;
	--wm-gutter: clamp(16px, 4vw, 24px);

	--bs-body-bg: var(--wm-ground);
	--bs-body-color: var(--wm-ink);
	--bs-body-font-family: "Bricolage Grotesque", system-ui, sans-serif;
	--bs-body-font-size: 1.0625rem;
	--bs-body-line-height: 1.5;
	--bs-emphasis-color: var(--wm-ink);
	--bs-secondary-color: var(--wm-muted);
	--bs-border-color: var(--wm-ink);
	--bs-link-color-rgb: 43, 19, 64;
	--bs-link-hover-color-rgb: 122, 31, 77;
	--bs-focus-ring-color: rgba(43, 19, 64, 0.35);
}

body { font-optical-sizing: auto; }
a { text-underline-offset: 3px; }
h1, h2, h3, h4 { color: var(--wm-ink); }

.wm-skip { position: absolute; top: 8px; left: 8px; z-index: 1000; padding: 10px 16px; background: var(--wm-ink); color: var(--wm-cream); border-radius: 999px; }
main:focus { outline: none; }

.wm-wrap {
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: var(--wm-gutter);
}

/* --------------------------------------------------------------------------- */
/* Type                                                                        */
/* --------------------------------------------------------------------------- */

.wm-display {
	font-weight: 800;
	letter-spacing: -0.05em;
	line-height: 0.92;
	font-size: clamp(3.25rem, 9vw, 6.5rem);
	margin: 0;
}
.wm-display-md { font-size: clamp(2.75rem, 6.5vw, 4.75rem); }
.wm-h2 {
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1;
	font-size: clamp(2rem, 4.5vw, 3.25rem);
	margin: 0;
}
.wm-h3 { font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; font-size: 1.5rem; margin: 0; }
.wm-eyebrow { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.wm-lede { font-size: 1.25rem; max-width: 38em; }
.wm-muted { color: var(--wm-muted); }
.wm-small { font-size: 0.9375rem; }
.wm-highlight { background: var(--wm-sun); padding: 0 0.12em; border-radius: 0.18em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* --------------------------------------------------------------------------- */
/* Buttons, pills and chips                                                    */
/* --------------------------------------------------------------------------- */

.wm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 0 24px;
	border: var(--wm-line);
	border-radius: 999px;
	background: var(--wm-cream);
	color: var(--wm-ink);
	font-weight: 800;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}
.wm-btn:hover { color: var(--wm-ink); background: var(--wm-sun-2); }
.wm-btn:focus-visible, .wm-pill:focus-visible, .btn-check:focus-visible + .wm-pill { outline: 3px solid var(--wm-ink); outline-offset: 3px; }
.wm-btn-ink { background: var(--wm-ink); color: var(--wm-cream); }
.wm-btn-ink:hover { background: var(--wm-ink-2); color: var(--wm-cream); }
.wm-btn-sun { background: var(--wm-sun); }
.wm-btn-sun:hover { background: #ffd56e; }
.wm-btn-lg { min-height: 60px; padding: 0 30px; font-size: 1.375rem; }
.wm-btn-sm { min-height: 44px; padding: 0 18px; font-size: 1rem; }
.wm-btn-icon { width: 48px; min-height: 48px; padding: 0; border-radius: 50%; }

/* A toggle. Use a .btn-check input before it, or aria-pressed on a button. */
.wm-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 46px;
	padding: 0 18px;
	border: var(--wm-line);
	border-radius: 999px;
	background: var(--wm-cream);
	color: var(--wm-ink);
	font-weight: 600;
	font-size: 1.125rem;
	cursor: pointer;
	user-select: none;
}
.wm-pill:hover { background: var(--wm-ground-2); }
.wm-pill .wm-check { display: none; }
.btn-check:checked + .wm-pill, .wm-pill[aria-pressed="true"], .wm-pill.is-on, .wm-pill.active { background: var(--wm-sun); }
.btn-check:checked + .wm-pill .wm-check, .wm-pill[aria-pressed="true"] .wm-check, .wm-pill.is-on .wm-check { display: inline-block; }
.wm-pill-pink.is-on, .wm-pill-pink.active, .btn-check:checked + .wm-pill-pink { background: var(--wm-pink); font-weight: 800; }
.wm-pill-quiet { border-color: var(--wm-dash); font-size: 1rem; min-height: 44px; }
.btn-check:checked + .wm-pill-quiet { background: var(--wm-ink); border-color: var(--wm-ink); color: var(--wm-cream); }

.wm-tag {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 16px;
	border: var(--wm-line);
	border-radius: 999px;
	background: var(--wm-cream);
	font-weight: 800;
}

.wm-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 10px;
	border: 2px solid var(--wm-ink);
	border-radius: 999px;
	background: var(--wm-cream);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.5;
}
.wm-chip-yes { background: var(--wm-sun); }
.wm-chip-miss { border: 2px dashed #b9a6cc; background: transparent; color: var(--wm-faint); text-decoration: line-through; }
.wm-chip-dark { border-color: transparent; background: var(--wm-sun); color: var(--wm-ink); }
.wm-chip-dark.wm-chip-miss { background: transparent; color: #b9a6cc; }

.wm-tick {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 34px;
	height: 34px;
	border: var(--wm-line);
	border-radius: 50%;
	background: var(--wm-sun);
}
.wm-tick-off { border-style: dashed; border-color: #b9a6cc; background: transparent; }

/* --------------------------------------------------------------------------- */
/* Cards                                                                       */
/* --------------------------------------------------------------------------- */

.wm-card {
	border: var(--wm-line);
	border-radius: var(--wm-radius);
	background: var(--wm-cream);
	padding: 24px;
}
.wm-card-lg { border-radius: var(--wm-radius-lg); padding: clamp(22px, 3.5vw, 36px); }
.wm-raised { box-shadow: var(--wm-shadow); }
.wm-raised-sm { box-shadow: var(--wm-shadow-sm); }
a.wm-card { display: block; color: var(--wm-ink); text-decoration: none; }
a.wm-card:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--wm-ink); }

.wm-bubble {
	position: relative;
	padding: 22px 24px;
	border: var(--wm-line);
	border-radius: var(--wm-radius);
	background: var(--wm-cream);
	box-shadow: 6px 6px 0 var(--wm-ink);
}
.wm-bubble::after {
	content: "";
	position: absolute;
	left: 48px;
	bottom: -21px;
	width: 34px;
	height: 34px;
	background: inherit;
	border-right: var(--wm-line);
	border-bottom: var(--wm-line);
	transform: rotate(45deg);
}
.wm-bubble > :last-child { margin-bottom: 0; }

.wm-kate { display: block; width: 100%; height: auto; }
.wm-kate-bleed { width: calc(100% + 80px); max-width: none; margin-inline: -40px; }

/* --------------------------------------------------------------------------- */
/* Header and footer                                                           */
/* --------------------------------------------------------------------------- */

.wm-header { padding-block: 20px; }
.wm-wordmark { display: inline-flex; align-items: center; gap: 10px; color: var(--wm-ink); text-decoration: none; font-weight: 800; font-size: 2.125rem; letter-spacing: -0.04em; line-height: 1; }
.wm-wordmark:hover { color: var(--wm-ink); }
.wm-wordmark img { width: 70px; height: auto; }
.wm-nav { display: flex; flex-wrap: wrap; gap: 6px; }
.wm-nav a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 18px;
	border: 3px solid transparent;
	border-radius: 999px;
	font-weight: 600;
	color: var(--wm-ink);
	text-decoration: none;
}
.wm-nav a:hover { border-color: var(--wm-dash); }
.wm-nav a[aria-current="page"] { border-color: var(--wm-ink); background: var(--wm-cream); }

.wm-menu-btn { display: none; }
@media (max-width: 767.98px) {
	.wm-menu-btn { display: inline-flex; }
	.wm-header .wm-nav { display: none; width: 100%; }
	.wm-header .wm-nav.is-open { display: flex; flex-direction: column; }
	.wm-header .wm-nav a { border-color: var(--wm-dash); background: var(--wm-cream); }
	.wm-wordmark { font-size: 1.75rem; }
	.wm-wordmark img { width: 54px; }
}

.wm-crumbs { font-size: 0.9375rem; font-weight: 600; margin-bottom: 16px; }
.wm-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.wm-crumbs li + li::before { content: "→"; margin-right: 6px; }

.wm-footer { border-top: var(--wm-line); background: var(--wm-ink); color: var(--wm-cream); margin-top: 72px; }
.wm-footer a { color: var(--wm-cream); font-weight: 600; }
.wm-footer a.wm-footer-kate { color: var(--wm-sun); }

/* --------------------------------------------------------------------------- */
/* The finder sentence                                                         */
/* --------------------------------------------------------------------------- */

.wm-madlib-line { font-size: clamp(1.5rem, 3.4vw, 2.5rem); font-weight: 600; line-height: 1.7; letter-spacing: -0.02em; margin: 0; }
.wm-madlib-line-sm { font-size: clamp(1.375rem, 2.6vw, 1.875rem); }
.wm-field {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 56px;
	padding: 0 16px;
	border: var(--wm-line);
	border-radius: 999px;
	vertical-align: middle;
	font-size: 0.85em;
	line-height: 1;
}
.wm-field select, .wm-field input {
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-weight: 800;
	padding: 0;
}
.wm-field select { appearance: none; padding-right: 4px; cursor: pointer; }
.wm-field input { width: 2.6em; text-align: right; -moz-appearance: textfield; }
.wm-field input::-webkit-outer-spin-button, .wm-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wm-field:focus-within { outline: 3px solid var(--wm-ink); outline-offset: 3px; }
.wm-madlib-line .wm-pill { font-size: clamp(1.0625rem, 0.62em, 1.5rem); min-height: 48px; vertical-align: middle; }

.wm-rule-dashed { border: 0; border-top: 2px dashed var(--wm-dash); opacity: 1; margin: 18px 0; }

/* --------------------------------------------------------------------------- */
/* Lists of products                                                           */
/* --------------------------------------------------------------------------- */

.wm-result { display: flex; flex-direction: column; gap: 12px; height: 100%; }
.wm-result-name { font-size: 1.75rem; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; color: var(--wm-ink); text-decoration: none; }
.wm-result-name:hover { text-decoration: underline; }
.wm-dose { padding: 12px 14px; border: 2px solid var(--wm-ink); border-radius: 18px; background: var(--wm-cream); }
.wm-warn { margin: 0; padding: 10px 14px; border-radius: 16px; background: var(--wm-ink); color: var(--wm-cream); font-weight: 600; font-size: 0.9375rem; }

.wm-rows { border: var(--wm-line); border-radius: var(--wm-radius); background: var(--wm-cream); overflow: hidden; }
.wm-rows > * { padding: 14px 22px; }
.wm-rows > * + * { border-top: 2px dashed var(--wm-dash); }

.wm-tile { display: flex; flex-direction: column; gap: 10px; min-height: 220px; padding: 26px; border: var(--wm-line); border-radius: var(--wm-radius); color: var(--wm-ink); text-decoration: none; }
.wm-tile:hover { color: var(--wm-ink); transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--wm-ink); }
.wm-tile-name { font-size: 2.5rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }

/* The compare tray at the foot of the window. Hidden until something is added. */
.wm-tray { position: sticky; bottom: 16px; z-index: 10; margin-top: 32px; }
.wm-tray[hidden] { display: none; }
.wm-tray-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px 12px 22px; border: var(--wm-line); border-radius: 999px; background: var(--wm-ink); color: var(--wm-cream); box-shadow: 6px 6px 0 var(--wm-pink); }
.wm-tray-item { padding: 4px 12px; border-radius: 999px; background: var(--wm-ink-2); font-size: 0.9375rem; font-weight: 600; }
/* On a phone the tray is one row: the count is on the button, the names are on the compare page. */
@media (max-width: 575.98px) {
	.wm-tray-inner { padding-left: 18px; }
	.wm-tray [data-tray-items] { display: none !important; }
}

/* --------------------------------------------------------------------------- */
/* Product page                                                                */
/* --------------------------------------------------------------------------- */

.wm-packshot { display: grid; place-items: center; min-height: 220px; padding: 20px; border: var(--wm-line); border-radius: var(--wm-radius-lg); background: var(--wm-cream); color: var(--wm-muted); font-weight: 600; text-align: center; }
.wm-packshot img { max-width: 100%; height: auto; }
@media (min-width: 768px) { .wm-packshot { min-height: 340px; } }
.wm-stat { padding: 20px 22px; border: var(--wm-line); border-radius: 24px; height: 100%; }
.wm-stat-num { font-size: clamp(2.5rem, 5vw, 3.25rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.wm-stat-num small { font-size: 0.45em; letter-spacing: 0; }

.wm-claim { border: var(--wm-line); border-radius: 24px; background: var(--wm-cream); }
.wm-claim summary { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 0 18px; cursor: pointer; list-style: none; font-size: 1.25rem; font-weight: 800; }
.wm-claim summary::-webkit-details-marker { display: none; }
.wm-claim p { margin: 0; padding: 0 18px 16px; font-size: 0.875rem; color: var(--wm-muted); }
.wm-claim-off summary { color: var(--wm-faint); font-weight: 600; }

.wm-register dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; }
.wm-register dt { color: var(--wm-muted); font-weight: 400; }
.wm-register dd { margin: 0; }

/* --------------------------------------------------------------------------- */
/* Compare                                                                     */
/* --------------------------------------------------------------------------- */

.wm-compare { border: var(--wm-line); border-radius: var(--wm-radius); background: var(--wm-cream); box-shadow: var(--wm-shadow); overflow-x: auto; }
.wm-compare table { width: 100%; min-width: 980px; border-collapse: separate; border-spacing: 0; }
.wm-compare th, .wm-compare td { padding: 12px 18px; vertical-align: middle; }
.wm-compare thead th { vertical-align: top; padding-block: 22px; }
.wm-compare thead th + th, .wm-compare td { border-left: var(--wm-line); }
.wm-compare tbody th { padding-inline: 22px; font-weight: 800; font-size: 1.1875rem; text-align: left; }
.wm-compare tbody tr > * { border-top: 2px dashed var(--wm-dash); }
.wm-compare tbody.wm-compare-facts tr > * { border-top: var(--wm-line); background: var(--wm-ground-2); font-size: 1rem; }
.wm-compare tbody.wm-compare-facts th { font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.wm-compare-name { display: block; margin-top: 4px; font-size: 1.5rem; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; color: var(--wm-ink); text-decoration: none; }
.wm-yes, .wm-no { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.wm-no { color: var(--wm-faint); }

/* --------------------------------------------------------------------------- */
/* Panels                                                                      */
/* --------------------------------------------------------------------------- */

.wm-alarm { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding: 24px 28px; border: var(--wm-line); border-radius: var(--wm-radius-lg); background: var(--wm-ink); color: var(--wm-cream); }
.wm-alarm strong { color: var(--wm-sun); }
.wm-alarm p { margin: 0; flex: 1 1 520px; font-size: 1.25rem; }

.wm-fact { padding: 20px 22px; border: var(--wm-line); border-radius: var(--wm-radius); height: 100%; }
.wm-fact-v { margin-top: 6px; font-size: 1.1875rem; font-weight: 600; line-height: 1.35; }

.wm-form-control {
	display: block;
	width: 100%;
	padding: 14px 16px;
	border: var(--wm-line);
	border-radius: 22px;
	background: var(--wm-ground-2);
	color: var(--wm-ink);
	font: inherit;
}
input.wm-form-control { height: 52px; border-radius: 999px; padding-block: 0; }
.wm-form-control:focus { outline: 3px solid var(--wm-ink); outline-offset: 3px; }
.wm-label { display: block; font-weight: 800; margin-bottom: 6px; }

.wm-feedback { padding-block: 2.5rem 3rem; }
.wm-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.wm-reply { margin-top: 12px; padding: 12px 14px; border: 2px solid var(--wm-ink); border-radius: 20px; background: var(--wm-pink); }
.wm-reply-pending { border-style: dashed; background: var(--wm-ground-2); }

/* --------------------------------------------------------------------------- */
/* Fills. Last, so a fill beats a component's own background.               */
/* --------------------------------------------------------------------------- */

.wm-bg-pink { background: var(--wm-pink); }
.wm-bg-mint { background: var(--wm-mint); }
.wm-bg-lilac { background: var(--wm-lilac); }
.wm-bg-sun { background: var(--wm-sun); }
.wm-bg-sun-2 { background: var(--wm-sun-2); }
.wm-bg-cream { background: var(--wm-cream); }
.wm-bg-ground { background: var(--wm-ground); }
.wm-bg-ink { background: var(--wm-ink); color: var(--wm-cream); }
.wm-bg-ink h2, .wm-bg-ink h3, .wm-bg-ink a { color: var(--wm-cream); }

@media (prefers-reduced-motion: reduce) {
	a.wm-card:hover, .wm-tile:hover { transform: none; }
}