/*
Theme Name: Woodmart Child - Peptra Labs
Description: Child theme for Peptra Labs customizations.
Template: woodmart
Version: 1.0.0
Text Domain: woodmart-child
*/

/* ============================================================
   Top-bar scrolling marquee (trust messages)

   The bar reads as one continuous band across the viewport, so the track has
   to escape the header's centred container. Everything between the container
   and the marquee is therefore unpadded and allowed to overflow.
   ============================================================ */
.whb-header-bottom {
	background: linear-gradient(90deg, #0b2447 0%, #113a6b 50%, #0b2447 100%);
	border-top: 1px solid rgba(255, 255, 255, 0.07);
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.whb-header-bottom .container,
.whb-header-bottom .whb-flex-row,
.whb-header-bottom .whb-column {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.whb-header-bottom .wd-header-text,
.whb-header-bottom .item-text {
	width: 100%;
	max-width: 100%;
}

/* Woodmart pulls every header column out by 10px a side and pays it straight
   back as padding on the inner text block (header-base.css). The two cancel
   out visually, so nothing ever looked wrong, but they leave the column 20px
   wider than the viewport on every page -- which is the whole of the 10px
   that document.body.scrollWidth reports past the right edge. Zeroing both
   halves keeps the geometry identical and stops the box overhanging. */
.whb-header-bottom .whb-column {
	margin-inline: 0;
}

.whb-header-bottom .wd-header-text {
	padding-inline: 0;
}

.whb-header-bottom .pl-marquee {
	position: relative;
	left: 50%;
	width: 100vw;
	margin-left: -50vw;
	overflow: hidden;
	white-space: nowrap;
	/* Text should dissolve at both edges rather than being cut mid-letter. */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

/* The shift and the duration are set by script once the real item width is
 * known, so the strip repeats seamlessly at any viewport width and always
 * scrolls at the same speed. The fallback keeps it moving if script is off. */
.whb-header-bottom .pl-marquee-track {
	display: inline-block;
	white-space: nowrap;
	animation: pl-marquee-scroll var(--pl-mq-duration, 44s) linear infinite;
}

.whb-header-bottom .pl-marquee:hover .pl-marquee-track,
.whb-header-bottom .pl-marquee-track.is-paused {
	animation-play-state: paused;
}

.whb-header-bottom .pl-mq-item {
	display: inline-block;
}

/* One statement. The diamond that follows it is the separator, so the markup
 * carries no punctuation of its own. */
.whb-header-bottom .pl-mq {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	line-height: 1;
	vertical-align: middle;
}

.whb-header-bottom .pl-mq::after {
	content: "\25C6";
	display: inline-block;
	margin: 0 22px;
	font-size: 6px;
	letter-spacing: 0;
	vertical-align: middle;
	color: #4fd1c5;
	opacity: 0.75;
}

/* The one item that is a call to action, so it is the one item that looks
 * like one: filled pill against the flat text around it. */
.whb-header-bottom a.pl-mq-link {
	position: relative;
	text-decoration: none;
	transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

.whb-header-bottom a.pl-mq-link > span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 13px;
	border-radius: 9999px;
	background: #4fd1c5;
	color: #06283d;
	font-weight: 700;
}

.whb-header-bottom a.pl-mq-link > span::after {
	content: "\2192";
	font-size: 12px;
	line-height: 1;
	transition: transform 0.18s ease;
}

.whb-header-bottom a.pl-mq-link:hover > span,
.whb-header-bottom a.pl-mq-link:focus-visible > span {
	background: #6ff0e3;
	color: #06283d;
}

.whb-header-bottom a.pl-mq-link:hover > span::after { transform: translateX(3px); }

@keyframes pl-marquee-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(calc(var(--pl-mq-shift, 50%) * -1)); }
}

@media (max-width: 768px) {
	.whb-header-bottom .pl-mq { font-size: 10px; letter-spacing: 0.1em; }
	.whb-header-bottom .pl-mq::after { margin: 0 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.whb-header-bottom .pl-marquee-track { animation: none; }
}

/* White logo on the petrol header (original asset is the colored variant) */
.whb-general-header .wd-logo img,
.whb-header-bottom .wd-logo img,
.pl-footer-logo img {
	filter: brightness(0) invert(1);
}

/* ---- Footer: the header's petrol, so the page is bracketed by one colour
       rather than by two blues that almost match ---- */
.wd-footer,
.wd-footer-container,
.wd-footer .footer-container,
footer.wd-footer {
	background-color: #075578 !important;
}

/* The theme's link hover is a dark navy (--wd-link-color-hover: #1a3a6e). It
 * was legible on the old footer and vanishes against the petrol: 1.38:1.
 *
 * Rest state is white, so the hover has to differ in hue rather than weight.
 * This is the teal the marquee pill already hovers to, at 5.91:1 on this
 * background. !important because the colour arrives through a theme variable,
 * which an ordinary rule cannot outrank. */
.wd-footer a:hover,
.wd-footer a:focus-visible,
.wd-footer .wd-nav > li > a:hover,
.wd-footer .menu li a:hover,
.wd-footer .widget a:hover {
	color: #6ff0e3 !important;
}

/* The page you are already on was painted in the theme's primary blue
 * (#245a9e), which lands at 1.18:1 against the petrol and reads as a broken
 * link. It takes the same teal as hover, with the extra weight doing the work
 * of telling "you are here" apart from "you can go here". */
.wd-footer .current-menu-item > a,
.wd-footer .current_page_item > a,
.wd-footer .current-menu-ancestor > a,
.wd-footer .current-menu-parent > a,
.wd-footer .current-page-ancestor > a {
	color: #6ff0e3 !important;
	font-weight: 600;
}

/* ---- Footer: center the content and keep it off the edges ---- */
.wd-footer .container.main-footer {
	max-width: 1300px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 40px !important;
	padding-right: 40px !important;
	box-sizing: border-box;
}

/* Bottom copyright menu (Terms / Privacy / Cookies) inline instead of stacked */
.wd-footer .menu,
.wd-footer .wd-nav,
.wd-footer .wd-mega-menu ul,
.wd-footer .elementor-nav-menu {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap;
	gap: 8px 22px;
	justify-content: flex-end;
	align-items: center;
}

.wd-footer .menu li,
.wd-footer .wd-nav li,
.wd-footer .wd-mega-menu ul li {
	list-style: none;
	margin: 0 !important;
	width: auto !important;
}

@media (max-width: 768px) {
	.wd-footer .container.main-footer {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
	.wd-footer .menu,
	.wd-footer .wd-nav,
	.wd-footer .wd-mega-menu ul {
		justify-content: center;
	}
}

/* ============================================================
   Peptra Labs - content pages (FAQ, About, Contact, legal)
   ============================================================ */

:root {
	--pl-navy: #0e2c5a;
	--pl-blue: #245a9e;
	--pl-blue-light: #eff6ff;
	--pl-ink: #0f172a;
	--pl-muted: #64748b;
	--pl-border: #e2e8f0;
}

/* Constrain long-form page copy to a readable measure */
.page-template-default .content-area .entry-content,
.single-page .content-area > .entry-content {
	max-width: 820px;
	margin-left: auto;
	margin-right: auto;
}

.entry-content h2 {
	font-size: 26px;
	margin-top: 2em;
}

.entry-content h3 {
	font-size: 20px;
}

/* ---- Native FAQ accordion (core/details) styled as cards ---- */
.entry-content details.wp-block-details {
	border: 1px solid var(--pl-border);
	border-radius: 12px;
	padding: 0;
	margin: 10px 0;
	background: #fff;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	overflow: hidden;
}

.entry-content details.wp-block-details[open] {
	border-color: var(--pl-blue);
	box-shadow: 0 4px 16px rgba(36, 90, 158, 0.08);
}

.entry-content details.wp-block-details > summary {
	list-style: none;
	cursor: pointer;
	padding: 18px 52px 18px 22px;
	font-weight: 600;
	font-size: 16px;
	color: var(--pl-ink);
	position: relative;
	user-select: none;
}

.entry-content details.wp-block-details > summary::-webkit-details-marker {
	display: none;
}

.entry-content details.wp-block-details > summary::after {
	content: "";
	position: absolute;
	right: 22px;
	top: 50%;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--pl-blue);
	border-bottom: 2px solid var(--pl-blue);
	transform: translateY(-70%) rotate(45deg);
	transition: transform 0.2s ease;
}

.entry-content details.wp-block-details[open] > summary::after {
	transform: translateY(-30%) rotate(-135deg);
}

.entry-content details.wp-block-details > summary:hover {
	color: var(--pl-blue);
}

.entry-content details.wp-block-details > *:not(summary) {
	padding: 0 22px 18px;
	margin: 0;
	color: var(--pl-muted);
	line-height: 1.65;
}

/* Section headings that group FAQ items */
.entry-content h2 + details.wp-block-details {
	margin-top: 14px;
}

/* ---- Info cards used on About / Contact / legal (columns) ---- */
.entry-content .wp-block-columns {
	gap: 20px;
	margin: 24px 0;
}

.entry-content .wp-block-column > h4:first-child {
	margin-top: 0;
	color: var(--pl-ink);
	font-size: 17px;
}

/* Tables (cookie policy) */
.entry-content .wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

.entry-content .wp-block-table th {
	background: var(--pl-navy);
	color: #fff;
	text-align: left;
	padding: 12px 14px;
	font-weight: 600;
}

.entry-content .wp-block-table td {
	border: 1px solid var(--pl-border);
	padding: 12px 14px;
	vertical-align: top;
}

/* Primary buttons inside content */
.entry-content .wp-block-button__link {
	border-radius: 10px;
	padding: 12px 26px;
	font-weight: 600;
}

/* ---- Homepage: full-bleed sections (hero edge-to-edge) ----
 * Built from native blocks, so these hang off the block class names rather than
 * a generated page/element id - the page can be duplicated or re-created without
 * the styling breaking.
 */
.home .wd-content-layout.container {
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
	padding-top: 0;
}

/* Values below (gradient angle, type sizes, accent colours) are read off the
   live peptralabs.com homepage so the two match. */
.pl-home-hero {
	position: relative;
	background: linear-gradient(150deg, #0e2c5a 0%, #1a3a6e 40%, #245a9e 100%);
	padding: 110px 0 100px;
	overflow: hidden;
	text-align: center;
}

/* Subtle blueprint grid over the hero gradient */
.pl-home-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
	background-size: 48px 48px;
	pointer-events: none;
	z-index: 0;
}

.pl-home-hero > .pl-hero-inner {
	position: relative;
	z-index: 1;
	max-width: 1300px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 40px;
	padding-right: 40px;
}

/* Gutenberg's constrained layout would otherwise re-centre each child against a
 * narrower content width; the hero centres its own contents instead. */
.pl-hero-inner > * {
	max-width: none;
	margin-left: auto;
	margin-right: auto;
}

.pl-hero-title {
	font-size: 72px;
	line-height: 1.08;
	font-weight: 700;
	color: #fff;
	letter-spacing: -0.02em;
	margin: 26px auto 22px;
	max-width: 980px;
}

.pl-accent { color: #8ec8df; }

.pl-hero-sub {
	font-size: 17px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.72);
	max-width: 620px;
	margin: 0 auto 34px;
}

.pl-hero-buttons { margin-bottom: 44px; justify-content: center; }

/* Two class names deep so these win over the theme's own button rules
 * without resorting to !important. */
.pl-hero-buttons .wp-block-button .wp-block-button__link,
.pl-section-cta .wp-block-button .wp-block-button__link {
	border-radius: 9999px;
	padding: 13px 30px;
	font-weight: 600;
	font-size: 15px;
	text-transform: none;
	letter-spacing: 0;
}

.pl-hero-buttons .pl-btn-primary .wp-block-button__link,
.pl-section-cta .pl-btn-primary .wp-block-button__link {
	background: #0da2e7;
	color: #fff;
	border: 1px solid #0da2e7;
}

.pl-hero-buttons .pl-btn-ghost .wp-block-button__link {
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.28);
}

/* The stats strip hugs its content rather than filling the hero width. */
.pl-hero-inner .pl-hero-stats {
	display: inline-flex;
	width: auto;
	justify-content: center;
}

/* ---- Shared section scaffolding ---- */
.pl-home-section {
	max-width: 1300px;
	margin: 0 auto;
	padding: 86px 40px;
	text-align: center;
}

.pl-home-trust {
	max-width: 1300px;
	margin: 0 auto;
	padding: 46px 40px;
}

.pl-eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #5ba2bf;
	margin: 0 0 14px;
}

/* Scoped under .entry-content so it beats the generic `.entry-content h2`
 * sizing used by the long-form content pages. */
.entry-content h2.pl-section-title {
	font-size: 48px;
	font-weight: 700;
	color: #04080e;
	letter-spacing: -0.02em;
	margin: 0 auto 18px;
	padding-bottom: 18px;
}

.pl-section-title { position: relative; }

/* Short rule under each section heading, as on the original */
.pl-section-title::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 56px;
	height: 2px;
	background: #5ba2bf;
}

.pl-section-sub {
	font-size: 16px;
	line-height: 1.7;
	color: #64748b;
	margin: 0 auto 46px;
	max-width: 560px;
}

.pl-section-cta { margin-top: 42px; justify-content: center; }

.pl-btn-outline .wp-block-button__link,
.pl-btn-white .wp-block-button__link {
	border-radius: 9999px;
	padding: 13px 30px;
	font-weight: 600;
	font-size: 15px;
	text-transform: none;
}

/* Scoped under .entry-content to match the specificity of the primary-fill rule
 * these two deliberately opt out of. */
.entry-content .pl-btn-outline .wp-block-button__link {
	background-color: transparent;
	color: #0e2c5a;
	border: 1px solid #cbd5e1;
}

.entry-content .pl-btn-outline .wp-block-button__link:hover {
	background-color: #f1f5f9;
	border-color: #94a3b8;
}

.entry-content .pl-btn-white .wp-block-button__link {
	background-color: #fff;
	color: #0e2c5a;
	border: 1px solid #fff;
}

.entry-content .pl-btn-white .wp-block-button__link:hover {
	background-color: #eaf6fd;
	border-color: #eaf6fd;
}

/* ---- 3. Our standards ---- */
.pl-home-standards { background: #f7f9fc; max-width: none; }
.pl-home-standards > * { max-width: 1300px; margin-left: auto; margin-right: auto; }

.pl-std-card {
	background: #fff;
	border: 1px solid #e8edf3;
	border-radius: 16px;
	padding: 34px 32px 38px;
	text-align: left;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.pl-std-icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: #0e2c5a;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 28px;
}

.pl-std-icon svg { width: 22px; height: 22px; }

.pl-std-title {
	font-size: 17px;
	font-weight: 700;
	color: #0f172a;
	margin: 0 0 12px;
}

.pl-std-desc {
	font-size: 14px;
	line-height: 1.65;
	color: #64748b;
	margin: 0;
}

/* ---- 5. How it works ---- */
.pl-step { text-align: center; }

/* Dashed rule linking the three step circles. Drawn on the columns wrapper so
 * the step blocks stay plain editable content. Values match the original:
 * 8px dash / 10px gap, #b5c5ca, starting one column-centre plus 2rem in. */
.pl-home-process .wp-block-columns {
	position: relative;
}

.pl-home-process .wp-block-columns::before {
	content: "";
	position: absolute;
	/* 40px = half the 80px circle, so the rule runs through their centres. */
	top: 40px;
	left: calc(16.67% + 2rem);
	right: calc(16.67% + 2rem);
	height: 1px;
	background-image: repeating-linear-gradient(
		90deg,
		#b5c5ca 0,
		#b5c5ca 8px,
		transparent 8px,
		transparent 18px
	);
	z-index: 0;
}

/* Circles sit over the rule rather than being crossed by it. */
.pl-home-process .pl-step {
	position: relative;
	z-index: 1;
}

/* Columns stack on mobile, so a horizontal connector would make no sense. */
@media (max-width: 767px) {
	.pl-home-process .wp-block-columns::before { display: none; }
}

/* Navy disc holding the step glyph; the step number rides on its top-right rim. */
.pl-step-icon {
	position: relative;
	width: 80px;
	height: 80px;
	border-radius: 9999px;
	background: #0e2c5a;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 28px;
}

.pl-step-icon svg { width: 26px; height: 26px; }

.pl-step-num {
	position: absolute;
	top: -6px;
	right: -6px;
	width: 24px;
	height: 24px;
	border-radius: 9999px;
	background: #5ba2bf;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pl-step-title {
	font-size: 19px;
	font-weight: 700;
	color: #0f172a;
	margin: 0 0 12px;
}

.pl-step-desc {
	font-size: 14px;
	line-height: 1.7;
	color: #64748b;
	margin: 0;
}

/* ---- 6. Closing call to action ----

   The flat cyan band this replaces read as a stock newsletter strip. It now
   closes the page in the same deep navy the hero opens with, so the two ends
   of the page belong to each other. */
.pl-home-cta {
	position: relative;
	background: linear-gradient(150deg, #0e2c5a 0%, #16407a 45%, #0b2447 100%);
	padding: 86px 40px 78px;
	overflow: hidden;
	text-align: center;
}

/* Same blueprint grid as the hero, at half the strength. */
.pl-home-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
	background-size: 56px 56px;
	pointer-events: none;
}

/* A single light source behind the headline, so the panel is not flat. */
.pl-home-cta::after {
	content: "";
	position: absolute;
	top: -40%;
	left: 50%;
	width: 760px;
	height: 760px;
	transform: translateX(-50%);
	background: radial-gradient(circle, rgba(13, 162, 231, 0.28) 0%, transparent 62%);
	pointer-events: none;
}

.pl-home-cta > * { position: relative; z-index: 1; }

.pl-cta-eyebrow {
	margin: 0 0 16px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #4fd1c5;
}

.entry-content h2.pl-cta-title {
	font-size: 42px;
	font-weight: 700;
	line-height: 1.15;
	color: #fff;
	margin: 0 auto;
	padding-bottom: 0;
}

.pl-cta-title::after { display: none; }

.pl-cta-sub {
	max-width: 560px;
	margin: 18px auto 0;
	font-size: 15.5px;
	line-height: 1.7;
	color: rgba(226, 240, 252, 0.78);
}

.pl-cta-actions {
	margin-top: 34px;
	justify-content: center;
	gap: 14px;
}

.pl-cta-actions .wp-block-button__link {
	padding: 15px 32px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.01em;
}

.pl-cta-actions .pl-btn-ghost .wp-block-button__link {
	background-color: transparent;
	border: 1px solid rgba(255, 255, 255, 0.32);
	color: #fff;
	transition: background-color 0.18s ease, border-color 0.18s ease;
}

.pl-cta-actions .pl-btn-ghost .wp-block-button__link:hover,
.pl-cta-actions .pl-btn-ghost .wp-block-button__link:focus-visible {
	background-color: rgba(255, 255, 255, 0.11);
	border-color: rgba(255, 255, 255, 0.62);
}

/* Three statements the business can evidence, set as a footnote rather than a
 * second row of cards. */
.pl-home-cta .pl-cta-assure {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 30px;
	margin: 40px 0 0;
	padding: 26px 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	list-style: none;
}

.pl-home-cta .pl-cta-assure li {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 12.5px;
	letter-spacing: 0.04em;
	color: rgba(226, 240, 252, 0.72);
}

.pl-home-cta .pl-cta-assure li::before {
	content: "";
	flex: none;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #4fd1c5;
}

/* ---- 7. Disclaimer ---- */
.pl-home-disclaimer { padding-top: 56px; padding-bottom: 56px; text-align: left; }

.pl-disclaimer-title {
	font-size: 16px;
	font-weight: 700;
	color: #0f172a;
	margin: 0 0 12px;
}

.pl-disclaimer-text {
	font-size: 13px;
	line-height: 1.75;
	color: #64748b;
	margin: 0;
}

/* These match the specificity of the scoped desktop rules above, otherwise the
 * `.entry-content h2.pl-section-title` selector would win at every width. */
@media (max-width: 1024px) {
	.pl-hero-title { font-size: 52px; }
	.entry-content h2.pl-section-title { font-size: 36px; }
}

@media (max-width: 768px) {
	.pl-home-hero { padding: 64px 0 56px; }
	.pl-home-hero > .pl-hero-inner { padding-left: 20px; padding-right: 20px; }
	.pl-hero-title { font-size: 36px; }
	.entry-content h2.pl-section-title { font-size: 30px; }
	.pl-home-section,
	.pl-home-trust,
	.pl-home-cta { padding-left: 20px; padding-right: 20px; }
	.pl-home-section { padding-top: 52px; padding-bottom: 52px; }
	.pl-home-cta { padding-top: 60px; padding-bottom: 54px; }
	.entry-content h2.pl-cta-title { font-size: 30px; }
	.pl-cta-sub { font-size: 14.5px; }
	.pl-cta-actions { flex-direction: column; align-items: stretch; }
	.pl-cta-actions .wp-block-button { width: 100%; }
	.pl-cta-actions .wp-block-button__link { display: block; width: 100%; }
	.pl-home-cta .pl-cta-assure { gap: 10px 20px; }
}

/* Hero badge pill */
.pl-hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 20px;
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.18);
	color: rgba(255, 255, 255, 0.9);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.pl-hero-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #34d399;
	box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.25);
}

.pl-accent {
	color: #8ec8df;
}

/* Hero stats row */
.pl-hero-stats {
	display: inline-flex;
	gap: 0;
	margin-top: 10px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 16px;
	overflow: hidden;
}

.pl-stat {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 18px 30px;
	text-align: center;
}

.pl-stat + .pl-stat {
	border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.pl-stat-num {
	font-size: 22px;
	font-weight: 700;
	color: #fff;
}

.pl-stat-label {
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}

/* ---- Trust bar: 5 cards ----
 * Doubled class name so the grid wins over the core columns block's own
 * display:flex, which would otherwise ignore the responsive rules below. */
.wp-block-columns.pl-trust-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
}

/* Core sets a flex-basis on each column; grid handles the sizing here. */
.wp-block-columns.pl-trust-grid > .wp-block-column {
	flex-basis: auto !important;
	margin-left: 0;
}

.pl-trust-card {
	background: #fff;
	border: 1px solid #e8edf3;
	border-radius: 16px;
	padding: 26px 20px;
	text-align: center;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pl-trust-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(36, 90, 158, 0.1);
}

.pl-trust-icon {
	width: 30px;
	height: 30px;
	margin: 0 auto 14px;
	color: var(--pl-blue, #245a9e);
}

.pl-trust-icon svg {
	width: 100%;
	height: 100%;
}

.pl-trust-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: #94a3b8;
	margin-bottom: 6px;
}

.pl-trust-title {
	font-size: 17px;
	font-weight: 700;
	color: #0f172a;
	margin-bottom: 6px;
}

.pl-trust-desc {
	font-size: 14px;
	line-height: 1.5;
	color: #64748b;
}

@media (max-width: 1024px) {
	.wp-block-columns.pl-trust-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
	.wp-block-columns.pl-trust-grid { grid-template-columns: 1fr; }

	/* The three stats used to stack, which turned a compact strip into three
	   screens of scrolling before anything else on the page. They stay on one
	   row and give up padding and type size instead. */
	.pl-home-hero .pl-hero-stats {
		display: flex;
		flex-direction: row;
		width: 100%;
		max-width: 340px;
		margin-left: auto;
		margin-right: auto;
	}

	.pl-home-hero .pl-stat {
		flex: 1 1 0;
		min-width: 0;
		padding: 13px 6px;
	}

	.pl-home-hero .pl-stat + .pl-stat {
		border-left: 1px solid rgba(255, 255, 255, 0.12);
		border-top: 0;
	}

	.pl-home-hero .pl-stat-num { font-size: 17px; }

	.pl-home-hero .pl-stat-label {
		font-size: 9px;
		letter-spacing: 0.06em;
		line-height: 1.25;
	}
}

/* ============================================================
   WooCommerce product presentation
   ============================================================ */

/* Strength (mg) on the single product page - its own line above the price */
.pl-product-size {
	display: block;
	font-size: 20px;
	font-weight: 700;
	color: #0f172a;
	margin: 0 0 10px;
}

@media (max-width: 600px) {
}

/* Strength (mg) on shop loop cards */
.pl-loop-size {
	font-size: 13px;
	font-weight: 600;
	color: var(--pl-blue, #245a9e);
	letter-spacing: 0.02em;
	margin: 2px 0 4px;
}

/* Brand-blue prices */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--pl-blue, #245a9e);
	font-weight: 700;
}

/* Trust badge pills under add-to-cart */
.pl-product-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 18px 0 0;
}

.pl-pbadge {
	display: inline-flex;
	align-items: center;
	font-size: 13px;
	font-weight: 600;
	padding: 7px 14px;
	border-radius: 9999px;
	background: #eef4fb;
	color: #245a9e;
	border: 1px solid #d8e6f5;
}

.pl-pbadge-purity {
	background: #ecfdf3;
	color: #167c48;
	border-color: #bbe9cd;
}

/* Order Now button - brand blue, full feel */
.woocommerce div.product form.cart .button {
	background: var(--pl-blue, #245a9e);
	border-radius: 10px;
	font-weight: 600;
}

.woocommerce div.product form.cart .button:hover {
	background: var(--pl-navy, #0e2c5a);
}

/* ---- Product specifications table ---- */
.pl-specs {
	margin: 0 0 30px;
}

.pl-specs h3 {
	font-size: 20px;
	color: #0f172a;
	margin: 0 0 14px;
}

.pl-specs table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid #e8edf3;
	border-radius: 12px;
	overflow: hidden;
}

.pl-specs th,
.pl-specs td {
	padding: 12px 16px;
	text-align: left;
	font-size: 14px;
	border-bottom: 1px solid #eef2f7;
	vertical-align: top;
}

.pl-specs tr:last-child th,
.pl-specs tr:last-child td {
	border-bottom: none;
}

.pl-specs th {
	width: 34%;
	color: #64748b;
	font-weight: 600;
	background: #f8fafc;
}

.pl-specs td {
	color: #0f172a;
	word-break: break-word;
}

/* Formatted long description headings */
.woocommerce-Tabs-panel--description h3,
.wd-single-description h3 {
	font-size: 20px;
	margin: 24px 0 10px;
	color: #0f172a;
}

.woocommerce-Tabs-panel--description h4,
.wd-single-description h4 {
	font-size: 16px;
	margin: 18px 0 6px;
	color: #245a9e;
}

/* ---- Checkout: one consent panel instead of four stacked blocks ----

   What used to sit here: a privacy paragraph, WooCommerce's terms checkbox, a
   paragraph of ours repeating that same checkbox, and a yellow warning box.
   Four things saying two things, immediately above the pay button. The prose
   is gone; the two tick boxes that are actually validated are grouped into a
   single quiet panel. */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper,
.woocommerce-checkout .pl-consent {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	padding: 14px 18px;
	margin: 0;
}

/* The two panels are adjacent, so they read as one card with a divider. */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
	border-radius: 12px 12px 0 0;
	border-bottom: 0;
}

.woocommerce-checkout .pl-consent {
	border-radius: 0 0 12px 12px;
	margin-bottom: 20px;
}

.woocommerce-checkout .woocommerce-privacy-policy-text p {
	margin: 0 0 12px;
	font-size: 13px;
	line-height: 1.55;
	color: #64748b;
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .form-row,
.woocommerce-checkout .pl-consent .form-row {
	margin: 0;
	padding: 0;
}

/* One row shape for both tick boxes, so neither looks like an afterthought. */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label,
.woocommerce-checkout .pl-consent label {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: #334155;
	cursor: pointer;
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper input[type="checkbox"],
.woocommerce-checkout .pl-consent input[type="checkbox"] {
	flex: none;
	margin: 1px 0 0;
	width: 18px;
	height: 18px;
	accent-color: #0da2e7;
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper a {
	color: #0b6ea8;
	font-weight: 600;
}

.woocommerce-checkout .pl-consent .required,
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .required {
	color: #b45309;
	text-decoration: none;
}

/* ---- Phone field: country picker (Phone Validator with Flags) ----
   The picker is a <button>, so the theme's button styling painted it as a grey
   square with a 20px pad over the rounded end of the field. It belongs inside
   the field, with the same rounded end. */
.iti .iti__selected-country {
	min-height: 0;
	height: 100%;
	padding: 0 8px 0 16px;
	border-radius: var(--wd-form-brd-radius, 35px) 0 0 var(--wd-form-brd-radius, 35px);
	background: transparent;
	color: inherit;
	box-shadow: none;
}

.iti .iti__selected-country:hover,
.iti .iti__selected-country:focus-visible {
	background: rgba(0, 0, 0, 0.04);
}

/* DB-IP licence link, under the country field when it was pre-filled from the IP
   database. Required by the licence, not something a buyer needs to read. */
.woocommerce-checkout .pl-ipdb-credit {
	display: block;
	margin: 4px 0 0 16px;
	font-size: 11px;
	line-height: 1.4;
}

.woocommerce-checkout .pl-ipdb-credit a {
	color: #6b7280;
	text-decoration: none;
}

.woocommerce-checkout .pl-ipdb-credit a:hover,
.woocommerce-checkout .pl-ipdb-credit a:focus-visible {
	text-decoration: underline;
}

/* Place Order disabled until the confirmation is ticked */
#place_order.pl-order-disabled,
.woocommerce #place_order.pl-order-disabled {
	background: #e5e7eb !important;
	color: #9ca3af !important;
	cursor: not-allowed;
	pointer-events: none;
	box-shadow: none;
	opacity: 1;
}

/* Boxed content sections keep comfortable side padding once the wrapper padding is gone */
.page-id-538 .elementor > .e-con:not(.elementor-element-1f7e021) > .e-con-inner {
	padding-left: 40px;
	padding-right: 40px;
}

@media (max-width: 768px) {
	.page-id-538 .elementor-element-1f7e021 > .e-con-inner,
	.page-id-538 .elementor > .e-con:not(.elementor-element-1f7e021) > .e-con-inner {
		padding-left: 18px;
		padding-right: 18px;
	}
}

/* Guide page title (orphan SEO pages) */
.pl-guide-title {
	font-size: 30px;
	font-weight: 700;
	color: #0f172a;
	margin: 0 0 20px;
	line-height: 1.2;
}

/* Data ultimei actualizari, imediat sub titlu.
   Doua lucruri masurate pe tema, nu presupuse: continutul sta in
   `.wd-entry-content`, nu in `.entry-content`, deci selectorul le acopera pe
   amandoua; si `:has(+ .pl-updated)` se potriveste in `matches()` dar nu se
   aplica in cascada aici, asa ca distanta fata de titlu se strange dintr-o
   margine negativa, care nu depinde de suportul lui. */
.wd-entry-content p.pl-updated,
.entry-content p.pl-updated {
	margin: -12px 0 26px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--pl-muted);
}

.wd-entry-content p.pl-updated time,
.entry-content p.pl-updated time {
	color: inherit;
	font-variant-numeric: tabular-nums;
}

/* Compound identity table on the peptide reference hubs */
.pl-hub-table {
	width: 100%;
	max-width: 720px;
	border-collapse: collapse;
	margin: 0 0 28px;
	font-size: 15px;
}
.pl-hub-table th,
.pl-hub-table td {
	padding: 11px 16px;
	border: 1px solid #e2e8f0;
	text-align: left;
	vertical-align: top;
}
.pl-hub-table th {
	width: 38%;
	background: #f8fafc;
	font-weight: 600;
	color: #0f172a;
}
.pl-hub-table td { color: #475569; }

@media (max-width: 575px) {
	.pl-hub-table,
	.pl-hub-table th,
	.pl-hub-table td { display: block; width: 100%; }
	.pl-hub-table th { border-bottom: 0; }
	.pl-hub-table td { border-top: 0; margin-bottom: 10px; }
}

.pl-coa-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 6px;
	padding: 12px 22px;
	border-radius: 10px;
	background: #eef4fb;
	border: 1px solid #d8e6f5;
	color: #245a9e !important;
	font-weight: 600;
	font-size: 14px;
	transition: background 0.2s ease, border-color 0.2s ease;
}
.pl-coa-btn:hover {
	background: #245a9e;
	color: #fff !important;
	border-color: #245a9e;
}

/* In the summary column the button sits right under the wishlist link, so it
 * does not need the paragraph spacing it gets in the description area. */
.summary-inner .pl-coa-line {
	margin: 6px 0 18px;
}

/* Trust cluster quick links on product */
.pl-trust-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 16px 0 0;
	font-size: 14px;
}
.pl-trust-links a { color: #245a9e; font-weight: 600; }
.pl-trust-links a:hover { text-decoration: underline; }

/* Per-product FAQ */
.pl-product-faq {
	max-width: 900px;
	margin: 40px auto;
}
.pl-product-faq h2 { font-size: 24px; color: #0f172a; margin-bottom: 18px; }
.pl-faq-item {
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	margin: 10px 0;
	background: #fff;
	overflow: hidden;
}
.pl-faq-item[open] { border-color: #245a9e; box-shadow: 0 4px 16px rgba(36,90,158,.08); }
.pl-faq-item > summary {
	list-style: none;
	cursor: pointer;
	padding: 16px 50px 16px 20px;
	font-weight: 600;
	color: #0f172a;
	position: relative;
}
.pl-faq-item > summary::-webkit-details-marker { display: none; }
.pl-faq-item > summary::after {
	content: ""; position: absolute; right: 20px; top: 50%;
	width: 9px; height: 9px; border-right: 2px solid #245a9e; border-bottom: 2px solid #245a9e;
	transform: translateY(-70%) rotate(45deg); transition: transform .2s ease;
}
.pl-faq-item[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
.pl-faq-item > p { margin: 0; padding: 0 20px 16px; color: #64748b; line-height: 1.6; }

/* ============================================================
   Primary action buttons - light blue (#0da2e7) like the original
   ============================================================ */
.woocommerce div.product form.cart .button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce #place_order,
.entry-content .wp-block-button:not(.pl-btn-ghost):not(.pl-btn-outline):not(.pl-btn-white) .wp-block-button__link,
.pl-coa-btn:hover {
	background-color: #0da2e7 !important;
	border-color: #0da2e7 !important;
	color: #fff !important;
}

.woocommerce div.product form.cart .button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce #place_order:hover,
.entry-content .wp-block-button:not(.pl-btn-ghost):not(.pl-btn-outline):not(.pl-btn-white) .wp-block-button__link:hover {
	background-color: #0b8cc9 !important;
	border-color: #0b8cc9 !important;
}

/* Secondary/ghost buttons opt out of the primary fill above. */
.pl-hero-buttons .pl-btn-ghost .wp-block-button__link {
	background-color: transparent;
	border-color: rgba(255, 255, 255, 0.35);
	color: #fff;
}

.pl-hero-buttons .pl-btn-ghost .wp-block-button__link:hover {
	background-color: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.6);
}

.pl-section-cta .pl-btn-ghost .wp-block-button__link:hover {
	background-color: #f1f5f9;
	border-color: #94a3b8;
}

/* CoA button: light-blue accent */
.pl-coa-btn { color: #0da2e7 !important; }
.pl-coa-btn:hover { color: #fff !important; }

/* Keep the disabled Place Order grey even with the new colour */
.woocommerce #place_order.pl-order-disabled {
	background-color: #e5e7eb !important;
	border-color: #e5e7eb !important;
	color: #9ca3af !important;
}

/* Marquee text always white for contrast on the dark bar. The separator and
 * the link hover set their own colour, so both are held back from this. */
.whb-header-bottom .pl-marquee,
.whb-header-bottom .pl-mq-item,
.whb-header-bottom .pl-mq {
	color: #ffffff;
}

/* The call-to-action pill carries dark text on a light fill, so it is exempt
 * from the white-on-dark rule above. */
.whb-header-bottom a.pl-mq-link > span,
.whb-header-bottom a.pl-mq-link:hover > span {
	color: #06283d;
}

/* ---- Header: breathing room between logo and menu ---- */
.whb-general-header .wd-logo {
	margin-right: 34px;
}

/* ---- Hide product comparison everywhere ---- */
.wd-compare-btn,
.woodmart-compare-btn,
.wd-action-btn.wd-compare-icon,
.product-compare-button,
a[href*="compare"].added-to-compare,
.wd-tools-element.wd-compare {
	display: none !important;
}

/* ---- "Bestseller" badge (featured products) ---- */
.product-labels .featured,
.wd-product-labels .featured,
span.featured.product-label,
.product-label.featured {
	background: #fdf6e3 !important;
	border: 1px solid #e6c200 !important;
	color: #8a6100 !important;
	border-radius: 9999px !important;
	padding: 5px 14px 5px 12px !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.01em;
	text-transform: none !important;
	box-shadow: none !important;
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	line-height: 1.2;
}

.product-labels .featured::before,
.wd-product-labels .featured::before,
span.featured.product-label::before,
.product-label.featured::before {
	content: "\2605"; /* ★ */
	font-size: 13px;
	color: #a06a00;
}

/* ---- Shop: hide the category row inside the page title ---- */
.wd-page-title .wd-nav-product-cat {
	display: none !important;
}

/* ---- Shop sidebar: compact filters ---- */
.wd-sidebar.sidebar-container {
	font-size: 14px;
}

.wd-sidebar .widget {
	margin-bottom: 22px;
	padding-bottom: 18px;
	border-bottom: 1px solid #e8edf3;
}

.wd-sidebar .widget:last-child {
	border-bottom: none;
}

.wd-sidebar .widget-title,
.wd-sidebar .widgettitle {
	font-size: 14px !important;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #0f172a;
	margin-bottom: 12px;
}

/* Category list: compact rows with counts on the right */
.wd-sidebar .product-categories li,
.wd-sidebar ul.product-categories li {
	padding: 5px 0;
	border: none;
}

.wd-sidebar .product-categories li a {
	color: #334155;
}

.wd-sidebar .product-categories li a:hover,
.wd-sidebar .product-categories li.current-cat > a {
	color: #0da2e7;
}

.wd-sidebar .product-categories .count {
	color: #94a3b8;
	font-size: 12px;
}

/* Price filter: tighter */
.wd-sidebar .price_slider_wrapper {
	margin-top: 6px;
}

.wd-sidebar .price_slider_amount {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-size: 13px;
}

.wd-sidebar .price_slider_amount .button {
	background: #0da2e7 !important;
	border-radius: 8px;
	padding: 7px 16px !important;
	font-size: 13px !important;
	/* 40px is the tap-target floor this pass applies site-wide. The compact look
	   comes from the font size and padding, not from shrinking the hit area. */
	min-height: 40px !important;
}

/* Stock / rating filters compact */
.wd-sidebar .wc-block-components-checkbox,
.wd-sidebar .widget_layered_nav li {
	padding: 4px 0;
	font-size: 14px;
}

/* Stock status pill (WooCommerce native - quantity hidden site-wide) */
.woocommerce div.product .summary p.stock.in-stock,
.woocommerce div.product .summary .stock.in-stock {
	display: inline-block;
	margin: 0 0 14px;
	padding: 4px 12px;
	border-radius: 9999px;
	background: #ecfdf3;
	color: #167c48 !important;
	border: 1px solid #bbe9cd;
	font-size: 13px;
	font-weight: 600;
}

.woocommerce div.product .summary p.stock.out-of-stock,
.woocommerce div.product .summary .stock.out-of-stock {
	display: inline-block;
	margin: 0 0 14px;
	padding: 4px 12px;
	border-radius: 9999px;
	background: #fef2f2;
	color: #b42318 !important;
	border: 1px solid #fecdca;
	font-size: 13px;
	font-weight: 600;
}

/* ============================================================
   Single product sections (1:1 with peptralabs.com)
   ============================================================ */
.pl-quality-section,
.pl-section,
.pl-product-faq,
.pl-coa-line {
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
}

.pl-quality-section {
	margin-top: 40px;
	padding: 28px 30px;
	background: #f7f9fc;
	border: 1px solid #e8edf3;
	border-radius: 16px;
}

.pl-quality-section h2,
.pl-section h2,
.pl-product-faq h2 {
	font-size: 24px;
	color: #0f172a;
	margin: 0 0 12px;
}

.pl-quality-intro {
	color: #64748b;
	line-height: 1.6;
	margin: 0 0 22px;
}

.pl-quality-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin-bottom: 22px;
}

.pl-quality-card {
	background: #fff;
	border: 1px solid #e8edf3;
	border-radius: 12px;
	padding: 18px 20px;
}

.pl-quality-card h4 {
	margin: 0 0 6px;
	font-size: 16px;
	color: #0f172a;
}

.pl-quality-card p {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: #64748b;
}

.pl-not-suitable {
	margin: 0;
	padding: 14px 18px;
	background: #fffbeb;
	border: 1px solid #fde68a;
	border-radius: 10px;
	font-size: 14px;
	line-height: 1.6;
	color: #78350f;
}

.pl-section {
	margin-top: 40px;
}

.pl-description-section p {
	color: #475569;
	line-height: 1.7;
}

.pl-coa-line {
	margin-top: 22px;
}

@media (max-width: 900px) {
	.pl-quality-cards { grid-template-columns: 1fr; }
	.pl-quality-section { padding: 22px 18px; }
}

/* Research Use Only notice inside product descriptions */
.pl-ruo-notice {
	background: #fffbeb;
	border: 1px solid #fde68a;
	border-left: 4px solid #d97706;
	border-radius: 10px;
	padding: 14px 18px;
	margin: 0 0 22px;
	font-size: 14px;
	line-height: 1.6;
	color: #78350f;
}
.pl-ruo-notice strong { color: #92400e; }

/* Literature caveat under the research context */
.pl-research-caveat {
	font-size: 13px;
	line-height: 1.6;
	color: #64748b;
	border-left: 3px solid #e2e8f0;
	padding-left: 14px;
	margin: 14px 0 0;
}

/* ---- Shop card: stock + dispatch ---- */
.pl-card-stock {
	font-size: 12px;
	font-weight: 600;
	margin: 2px 0 4px;
	letter-spacing: .01em;
}
.pl-card-stock--in { color: #167c48; }
.pl-card-stock--in span { color: #94a3b8; font-weight: 500; }
.pl-card-stock--out { color: #b42318; }

/* ---- Active filters + clear ---- */
.pl-active-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 18px;
	padding: 12px 16px;
	background: #f7f9fc;
	border: 1px solid #e8edf3;
	border-radius: 12px;
	font-size: 14px;
}
.pl-active-filters-label { color: #64748b; font-weight: 600; }
.pl-filter-chip {
	background: #eef4fb;
	border: 1px solid #d8e6f5;
	color: #245a9e;
	border-radius: 9999px;
	padding: 4px 12px;
	font-size: 13px;
	font-weight: 600;
}
.pl-clear-filters {
	margin-left: auto;
	color: #b42318 !important;
	font-weight: 600;
	font-size: 13px;
}
.pl-clear-filters:hover { text-decoration: underline; }

/* ---- Mobile: filters panel usable as a drawer ---- */
@media (max-width: 768px) {
	.pl-active-filters { flex-direction: column; align-items: flex-start; }
	.pl-clear-filters { margin-left: 0; }
	.wd-shop-filters .widget { margin-bottom: 18px; }
}

/* ---- Mobile: enlarge the mini-cart remove control ----
 * It renders at 20x20, which is a small target for a destructive action on
 * touch. Widened to 34px without changing the glyph size. */
@media (max-width: 767px) {
	.woocommerce-mini-cart-item .remove_from_cart_button,
	.wd-cart-content .remove_from_cart_button {
		width: 34px;
		height: 34px;
		line-height: 34px;
		text-align: center;
	}
}

/* ---- Cart: BAC Water reminder ----
 * Shown only when the cart holds lyophilised material but no solvent. Laid out
 * as thumbnail / copy / action so it reads as a suggestion, not an upsell ad. */
.pl-solvent-nudge {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 18px;
	padding: 12px 14px;
	background: #f0f6fc;
	border: 1px solid #c5d9ed;
	border-radius: 10px;
}

.pl-nudge-thumb {
	flex: 0 0 46px;
	width: 46px;
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border-radius: 8px;
	overflow: hidden;
}

.pl-nudge-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.pl-nudge-copy {
	flex: 1 1 auto;
	min-width: 0;
	line-height: 1.35;
}

.pl-nudge-copy strong {
	display: block;
	font-size: 14px;
	color: #0f172a;
}

/* Direct child only. wc_price() nests its own spans for the figure and the
 * currency symbol; a blanket rule here turned the symbol into a block and
 * pushed it onto its own line. */
.pl-nudge-copy > span {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	color: #64748b;
}

/* wc_price() splits the figure and the currency symbol into separate spans,
 * which wrap apart in this narrow column - keep them on one line. */
.pl-nudge-copy .amount {
	color: #245a9e;
	font-weight: 600;
	white-space: nowrap;
}

.pl-nudge-add {
	flex: 0 0 auto;
	padding: 8px 16px;
	border-radius: 8px;
	background: #0da2e7;
	color: #fff !important;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.2s ease;
}

.pl-nudge-add:hover { background: #0b8cc9; }

@media (max-width: 480px) {
	.pl-solvent-nudge { flex-wrap: wrap; }
	.pl-nudge-copy { flex: 1 1 60%; }
	.pl-nudge-add { flex: 1 1 100%; text-align: center; margin-top: 4px; }
}

/* ---- Cart / checkout: progress toward free shipping ---- */
.pl-ship-progress {
	margin: 0 0 18px;
	padding: 12px 14px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
}

.pl-ship-progress.is-complete {
	background: #ecfdf3;
	border-color: #bbe9cd;
}

.pl-ship-progress-text {
	margin: 0 0 8px;
	font-size: 13px;
	color: #475569;
}

.pl-ship-progress.is-complete .pl-ship-progress-text { color: #167c48; }
.pl-ship-progress-text .amount { white-space: nowrap; color: #245a9e; }

.pl-ship-progress-track {
	height: 6px;
	border-radius: 9999px;
	background: #e2e8f0;
	overflow: hidden;
}

.pl-ship-progress-track span {
	display: block;
	height: 100%;
	border-radius: 9999px;
	background: #0da2e7;
	transition: width 0.3s ease;
}

.pl-ship-progress.is-complete .pl-ship-progress-track span { background: #16a34a; }

/* ---- Estimated arrival under each shipping option ---- */
.pl-eta {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	font-weight: 400;
	color: #64748b;
}

/* ---- Explanatory note under the crypto payment option ---- */
.pl-gateway-note {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	line-height: 1.6;
	color: #475569;
}

/* ---- Trust row ---- */
.pl-trust-row {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	margin-top: 18px;
}

.pl-trust-item {
	padding: 12px 14px;
	background: #f8fafc;
	border: 1px solid #e8edf3;
	border-radius: 10px;
	text-align: left;
}

.pl-trust-item-icon {
	display: block;
	width: 20px;
	height: 20px;
	margin-bottom: 8px;
	color: var(--pl-blue, #245a9e);
}

.pl-trust-item-icon svg { width: 100%; height: 100%; }

.pl-trust-item strong {
	display: block;
	font-size: 13px;
	color: #0f172a;
	line-height: 1.3;
}

.pl-trust-item span:not(.pl-trust-item-icon) {
	display: block;
	margin-top: 3px;
	font-size: 11.5px;
	line-height: 1.45;
	color: #64748b;
}

@media (max-width: 480px) {
	.pl-trust-row { grid-template-columns: 1fr; }
}

/* ---- Cash on delivery note (product page, cart) ----
 * Shown only to visitors in a country where the courier collects cash. Product
 * pages are cached, so they carry an empty slot that the per-visitor cart-fragments
 * request fills; the cart renders it directly. Same light panel as the BAC Water
 * reminder, so it reads as information, not as an offer. */
.pl-cod-slot[hidden] { display: none !important; }

.pl-cod-note {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 16px 0 0;
	padding: 12px 14px;
	background: #f0f6fc;
	border: 1px solid #c5d9ed;
	border-radius: 10px;
	line-height: 1.35;
	text-align: left;
}

.pl-cod-note--cart { margin: 0 0 18px; }

.pl-cod-note-icon {
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	color: var(--pl-blue, #245a9e);
}

.pl-cod-note-icon svg { display: block; width: 100%; height: 100%; }

.pl-cod-note-copy { min-width: 0; }

.pl-cod-note-copy strong {
	font-size: 14px;
	color: #0f172a;
}

.pl-cod-note-country {
	display: inline-block;
	margin-left: 4px;
	padding: 1px 8px;
	border: 1px solid #c5d9ed;
	border-radius: 9999px;
	background: #fff;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--pl-blue, #245a9e);
	vertical-align: 1px;
}

.pl-cod-note-text {
	display: block;
	margin-top: 4px;
	font-size: 12.5px;
	color: #64748b;
}

/* DB-IP's credit, added to the footer's small print when the note came from the IP. */
.pl-footer-base .pl-ipdb-foot a { color: inherit; text-decoration: underline; }

/* ---- Out of stock product: what can be ordered today ----
 * Under the back-in-stock form. A plain list in the trust-row panel style: it offers
 * a way on, it does not advertise. */
.pl-instock {
	margin: 18px 0 0;
	padding: 12px 14px;
	background: #f8fafc;
	border: 1px solid #e8edf3;
	border-radius: 10px;
}

.pl-instock-title {
	margin: 0 0 4px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #64748b;
}

.pl-instock-list,
.pl-instock-list li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pl-instock-list li + li { border-top: 1px solid #e8edf3; }

.pl-instock-list a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 0;
	color: #0f172a;
	text-decoration: none;
}

.pl-instock-thumb {
	flex: 0 0 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	overflow: hidden;
	background: #fff;
	border-radius: 8px;
}

.pl-instock-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }

.pl-instock-name {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}

.pl-instock-name small { font-size: 12px; font-weight: 500; color: #64748b; }

.pl-instock-price {
	flex: 0 0 auto;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	color: var(--pl-blue, #245a9e);
}

.pl-instock-price .woocommerce-price-suffix { display: none; }

.pl-instock-list a:hover .pl-instock-name,
.pl-instock-list a:focus-visible .pl-instock-name { color: var(--pl-blue, #245a9e); }

/* ---- Newsletter signup ---- */
.pl-nl-box {
	padding: 26px 28px;
	background: #f0f6fc;
	border: 1px solid #c5d9ed;
	border-radius: 14px;
}

.pl-nl-title {
	margin: 0 0 8px;
	font-size: 20px;
	font-weight: 700;
	color: #0f172a;
}

.pl-nl-text {
	margin: 0 0 18px;
	font-size: 14px;
	line-height: 1.6;
	color: #475569;
	max-width: 560px;
}

.pl-nl-form {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.pl-nl-input {
	flex: 1 1 260px;
	min-width: 0;
	padding: 12px 16px;
	border: 1px solid #cbd5e1;
	border-radius: 9999px;
	/* 16px keeps iOS Safari from zooming the page when the field takes focus. */
	font-size: 16px;
	background: #fff;
}

.pl-nl-input:focus {
	outline: none;
	border-color: #0da2e7;
	box-shadow: 0 0 0 3px rgba(13, 162, 231, 0.15);
}

/* Matched on the element as well as the class: the theme's base.css is enqueued
   after this file and resets button radius to 0 at equal specificity. */
button.pl-nl-submit {
	flex: 0 0 auto;
	padding: 12px 28px;
	border: 0;
	border-radius: 9999px;
	background: #0da2e7;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s ease;
}

button.pl-nl-submit:hover { background: #0b8cc9; }

.pl-nl-consent {
	flex: 1 1 100%;
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-top: 4px;
	font-size: 12px;
	line-height: 1.5;
	color: #64748b;
}

/* The wording is one flex item, so the sentence wraps as a sentence. */
.pl-nl-consent > span { flex: 1 1 auto; min-width: 0; }

.pl-nl-consent input {
	flex: 0 0 auto;
	margin-top: 2px;
}
.pl-nl-consent a { color: #245a9e; text-decoration: underline; }

.pl-nl-notice {
	margin: 14px 0 0;
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 13px;
}

.pl-nl-notice.is-ok    { background: #ecfdf3; border: 1px solid #bbe9cd; color: #167c48; }
.pl-nl-notice.is-error { background: #fef2f2; border: 1px solid #fecaca; color: #b32d2e; }

/* The account-creation checkbox above this one is bold and dark; this one was
   plain grey small text, so it read as fine print rather than an offer. Same
   weight for the headline, the detail demoted underneath it. */
.pl-nl-optin { margin: 10px 0 0; }

.pl-nl-optin .pl-nl-optin-label {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	margin: 0;
	cursor: pointer;
}

.pl-nl-optin .pl-nl-optin-label input[type="checkbox"] {
	flex: none;
	margin: 2px 0 0;
	width: 18px;
	height: 18px;
	accent-color: #0da2e7;
}

.pl-nl-optin .pl-nl-optin-label > span {
	display: block;
	font-size: 13px;
	line-height: 1.5;
	color: #64748b;
}

.pl-nl-optin .pl-nl-optin-label strong {
	display: block;
	margin-bottom: 2px;
	font-size: 14px;
	font-weight: 600;
	color: #0f172a;
}

@media (max-width: 560px) {
	.pl-nl-box { padding: 20px; }
	button.pl-nl-submit { flex: 1 1 100%; }
}

/* ============================================================
   Order received
   ============================================================ */

.pl-ty {
	max-width: 780px;
	margin: 0 auto;
	padding: 0 16px 70px;
}

/* ---------- Headline ---------- */

.pl-ty-head {
	text-align: center;
	padding: 36px 22px 30px;
	margin: 26px 0 20px;
	border-radius: 16px;
	border: 1px solid var(--pl-border);
	background: #fff;
}

.pl-ty-head--confirmed { background: #ecfdf3; border-color: #bbe9cd; }
.pl-ty-head--awaiting_transfer,
.pl-ty-head--pending_payment { background: #fffbeb; border-color: #fde68a; }
.pl-ty-head--error { background: #fef2f2; border-color: #fecaca; }

.pl-ty-icon {
	display: inline-flex;
	width: 46px;
	height: 46px;
	margin-bottom: 14px;
}

.pl-ty-icon svg { width: 100%; height: 100%; }
.pl-ty-head--confirmed .pl-ty-icon { color: #16a34a; }
.pl-ty-head--awaiting_transfer .pl-ty-icon,
.pl-ty-head--pending_payment .pl-ty-icon { color: #b45309; }

.pl-ty-head h1 {
	margin: 0 0 8px;
	font-size: 26px;
	font-weight: 700;
	color: var(--pl-ink);
	line-height: 1.25;
}

.pl-ty-head > p {
	margin: 0 auto;
	max-width: 480px;
	font-size: 15px;
	line-height: 1.65;
	color: #475569;
}

.pl-ty-ref {
	display: inline-flex;
	flex-direction: column;
	gap: 2px;
	margin-top: 20px;
	padding: 12px 26px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.75);
	border: 1px solid rgba(15, 23, 42, 0.08);
}

.pl-ty-ref span {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #64748b;
}

.pl-ty-ref strong {
	font-size: 22px;
	font-weight: 700;
	color: var(--pl-navy);
	font-variant-numeric: tabular-nums;
}

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

.pl-ty-panel {
	margin: 0 0 16px;
	padding: 24px 22px;
	background: #fff;
	border: 1px solid var(--pl-border);
	border-radius: 14px;
}

.pl-ty-panel--action { border-color: #fde68a; background: #fffdf6; }
.pl-ty-panel--tint { background: #f8fafc; }
.pl-ty-panel--offer { background: #f0f6fc; border-color: #c5d9ed; }

.pl-ty-panel h2 {
	margin: 0 0 16px;
	font-size: 18px;
	font-weight: 700;
	color: var(--pl-ink);
}

/* ---------- Bank details ---------- */

.pl-ty-bank {
	display: grid;
	gap: 1px;
	background: var(--pl-border);
	border: 1px solid var(--pl-border);
	border-radius: 10px;
	overflow: hidden;
}

.pl-ty-bank-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 12px 16px;
	background: #fff;
}

.pl-ty-bank-row--highlight { background: #fffbeb; }

.pl-ty-bank-row span {
	font-size: 13px;
	color: #64748b;
}

.pl-ty-bank-row code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var(--pl-navy);
	/* Long IBANs must wrap rather than push the row wider than the card. */
	overflow-wrap: anywhere;
	text-align: right;
}

.pl-ty-warn {
	margin: 16px 0 0;
	padding: 12px 16px;
	background: #fff;
	border: 1px solid #fde68a;
	border-radius: 10px;
	font-size: 13.5px;
	line-height: 1.65;
	color: #78350f;
}

.pl-ty-warn code {
	padding: 1px 6px;
	background: #fffbeb;
	border-radius: 4px;
	font-size: 13px;
}

.pl-ty-admin {
	margin: 14px 0 0;
	padding: 12px 16px;
	background: #fef2f2;
	border: 1px dashed #fecaca;
	border-radius: 8px;
	font-size: 13px;
	color: #b32d2e;
}

/* ---------- Steps ---------- */

.pl-ty-steps {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 16px;
	counter-reset: none;
}

.pl-ty-steps li { display: flex; gap: 12px; }

.pl-ty-steps span {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 9999px;
	background: #eff6fd;
	border: 1px solid #c5d9ed;
	color: var(--pl-blue);
	font-size: 12px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pl-ty-steps div { min-width: 0; font-size: 14px; line-height: 1.6; color: #64748b; }

.pl-ty-steps strong {
	display: block;
	font-size: 14.5px;
	color: var(--pl-ink);
	margin-bottom: 2px;
}

/* ---------- Arrival checks ---------- */

.pl-ty-checks { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }

.pl-ty-checks li {
	position: relative;
	padding-left: 24px;
	font-size: 14px;
	line-height: 1.65;
	color: #475569;
}

.pl-ty-checks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 6px;
	height: 6px;
	border-radius: 9999px;
	background: var(--pl-blue);
}

.pl-ty-ruo {
	margin: 18px 0 0;
	padding: 12px 16px;
	background: #fffbeb;
	border: 1px solid #fde68a;
	border-radius: 10px;
	font-size: 13px;
	line-height: 1.65;
	color: #78350f;
}

/* ---------- Newsletter ---------- */

.pl-ty-form { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 10px; }

.pl-ty .pl-ty-form input[type="email"] {
	flex: 1 1 240px;
	min-width: 0;
	/* 16px stops iOS zooming when the field takes focus. */
	font-size: 16px;
	padding: 12px 16px;
	border: 1px solid #cbd5e1;
	border-radius: 9999px;
	background: #fff;
}

.pl-ty-form button {
	flex: 0 0 auto;
	min-height: 46px;
	padding: 0 26px;
	border: 0;
	border-radius: 9999px;
	background: #0da2e7;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.pl-ty-form button:hover { background: #0b8cc9; }

.pl-ty-fine { margin: 0; font-size: 12px; line-height: 1.55; color: #64748b; }
.pl-ty-fine a { color: var(--pl-blue); text-decoration: underline; }

/* ---------- Help + failed state ---------- */

.pl-ty-help {
	margin-top: 22px;
	text-align: center;
	font-size: 14px;
	color: #64748b;
}

.pl-ty-help a { color: var(--pl-blue); }

.pl-ty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 20px; }

.pl-ty-btn,
.pl-ty-alt {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 24px;
	border-radius: 9999px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none !important;
}

.pl-ty-btn { background: #0da2e7; color: #fff !important; }
.pl-ty-alt { background: #fff; border: 1px solid #cbd5e1; color: var(--pl-blue) !important; }

/* The order table WooCommerce prints inside the summary panel */
.pl-ty-order .woocommerce-order-details__title,
.pl-ty-order .woocommerce-column__title {
	font-size: 18px;
	font-weight: 700;
	color: var(--pl-ink);
}

@media (min-width: 782px) {
	.pl-ty { padding-bottom: 90px; }
	.pl-ty-head { padding: 46px 30px 38px; }
	.pl-ty-head h1 { font-size: 32px; }
	.pl-ty-panel { padding: 28px 30px; }
}

/* ============================================================
   Homepage motion
   One orchestrated load sequence in the hero, quiet reveals below.
   Every rule here is switched off under prefers-reduced-motion.
   ============================================================ */

/* ---------- The plot area ---------- */

/* The grid is now the chromatogram's graticule, so it reads as chart paper
   rather than as texture. Fainter, and squared to the trace. */
.pl-home-hero::before {
	background-size: 60px 40px;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
}

.pl-hero-trace {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 190px;
	color: #8ec8df;
	opacity: 0.7;
	pointer-events: none;
	z-index: 0;
	/* Fade the trace out towards the top so it sits under the type. */
	-webkit-mask-image: linear-gradient(to top, #000 45%, transparent 100%);
	mask-image: linear-gradient(to top, #000 45%, transparent 100%);
}

.pl-hero-trace svg { width: 100%; height: 100%; display: block; }

/* The run scrolls continuously. Five runs are laid end to end and the strip is
   translated by four of them, so it wraps onto an identical baseline and the
   loop has no visible seam. Linear timing - a detector does not ease. */
/* No permanent will-change: it holds a compositor layer for the whole session,
 * including the entire time the hero is scrolled past. The animation is halted
 * off-screen instead, which costs nothing while it is not being watched. */
.pl-trace-run {
	animation: pl-run 48s linear infinite;
}

.pl-hero-trace.is-offscreen .pl-trace-run { animation-play-state: paused; }

@keyframes pl-run {
	from { transform: translateX(0); }
	to   { transform: translateX(-4800px); }
}

/* ---------- Hero load sequence ---------- */

.pl-hero-inner > .pl-hero-badge,
.pl-hero-inner > .pl-hero-title,
.pl-hero-inner > .pl-hero-sub,
.pl-hero-inner > .pl-hero-buttons,
.pl-hero-inner > .pl-hero-stats,
.pl-hero-inner > .pl-hero-batch {
	opacity: 0;
	transform: translateY(14px);
	animation: pl-rise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.pl-hero-inner > .pl-hero-badge   { animation-delay: 0.05s; }
.pl-hero-inner > .pl-hero-title   { animation-delay: 0.14s; }
.pl-hero-inner > .pl-hero-sub     { animation-delay: 0.24s; }
.pl-hero-inner > .pl-hero-buttons { animation-delay: 0.34s; }
.pl-hero-inner > .pl-hero-stats   { animation-delay: 0.44s; }
.pl-hero-inner > .pl-hero-batch   { animation-delay: 0.6s; }

@keyframes pl-rise {
	to { opacity: 1; transform: none; }
}

/* ---------- Live batch record ---------- */

/* inline-flex would sit it alongside the stats strip; fit-content keeps it
   hugging its own text while still breaking to its own line. */
.pl-hero-batch {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: fit-content;
	gap: 7px;
	margin: 30px auto 0;
	padding: 13px 22px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.14);
	text-decoration: none !important;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.pl-hero-batch:hover {
	background: rgba(255, 255, 255, 0.09);
	border-color: rgba(255, 255, 255, 0.3);
}

.pl-hero-batch-label {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
}

.pl-hero-batch-data {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	font-size: 14px;
}

.pl-hero-batch-data strong { color: #fff; font-weight: 600; }

.pl-hero-batch-data em {
	font-style: normal;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12.5px;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.6);
}

.pl-hero-batch-data b {
	font-weight: 700;
	font-size: 16px;
	color: #6ee7a8;
	font-variant-numeric: tabular-nums;
}

/* ---------- Reveals below the fold ---------- */

.pl-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
	            transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.pl-reveal.is-in { opacity: 1; transform: none; }

/* Once a section has arrived it is an ordinary section again. Dropping the
 * transform releases the compositor layer, so a page scrolled top to bottom
 * does not end up holding a promoted layer per section. */
.pl-reveal.is-done {
	opacity: 1;
	transform: none;
	transition: none;
}

/* ---------- Hover, kept to the cards that are actually clickable ---------- */

.pl-trust-card,
.pl-std-card {
	transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.pl-trust-card:hover,
.pl-std-card:hover {
	transform: translateY(-3px);
	border-color: #c5d9ed;
	box-shadow: 0 10px 26px rgba(36, 90, 158, 0.1);
}

/* ---------- Motion off ---------- */

@media (prefers-reduced-motion: reduce) {
	.pl-trace-run {
		animation: none;
		transform: none;
	}

	.pl-hero-inner > *,
	.pl-reveal {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
		transition: none !important;
	}

	.pl-trust-card:hover,
	.pl-std-card:hover { transform: none; }
}

@media (max-width: 768px) {
	.pl-hero-trace { height: 130px; opacity: 0.6; }
	.pl-hero-batch { margin-top: 24px; padding: 12px 18px; }
}

/* ---- Mobile: the footer logo sat flush against the section above ---- */
@media (max-width: 768px) {
	.wd-footer .container.main-footer { padding-top: 38px !important; }
	.wd-footer .pl-footer-logo { margin-bottom: 18px; }
}

/* ============================================================
   Testing badges (shop cards + product pages)

   Rendered by peptra-lab-reports from the batch records, so a badge only
   exists while a matching report does.
   ============================================================ */
.pl-test-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
}

.pl-test-badges .pl-test-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 0;
	padding: 4px 9px 4px 7px;
	border: 1px solid #d5e6f2;
	border-radius: 9999px;
	background: #f2f9fd;
	color: #14608c;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.pl-test-badges .pl-test-badge svg {
	flex: none;
	width: 13px;
	height: 13px;
}

/* Distinct hues keep four chips scannable without four different shapes. */
.pl-test-badges .pl-test-badge--endotoxin {
	border-color: #cfe9dc;
	background: #f1faf5;
	color: #147a52;
}

.pl-test-badges .pl-test-badge--heavy_metals {
	border-color: #e2ddef;
	background: #f6f4fb;
	color: #5b4b93;
}

.pl-test-badges .pl-test-badge--sterility {
	border-color: #f0e0cd;
	background: #fdf7f0;
	color: #96601f;
}

/* ---- Shop and category cards ----
   Left aligned to the card's own text, not centred: the chips are a property
   of the product, and a centred row would float away from the title. */
.wd-product .pl-test-badges,
.products .pl-test-badges {
	justify-content: flex-start;
	gap: 5px;
	margin-top: 8px;
	margin-bottom: 10px;
}

.wd-product .pl-test-badges .pl-test-badge,
.products .pl-test-badges .pl-test-badge {
	padding: 3px 8px 3px 6px;
	font-size: 10px;
}

.wd-product .pl-test-badges .pl-test-badge svg,
.products .pl-test-badges .pl-test-badge svg { width: 11px; height: 11px; }

/* ---- Product page: each chip opens the record behind it ---- */
.pl-test-badges--linked {
	gap: 8px;
	margin: 18px 0 22px;
	padding-top: 16px;
	border-top: 1px solid #eef2f6;
}

/* On the product page the chips are a headline claim, not a footnote. */
.pl-test-badges--linked .pl-test-badge {
	padding: 6px 12px 6px 9px;
	font-size: 12px;
}

/* Only the chips that carry a link hand their padding to the anchor, so the
 * whole pill is the hit area. The rest keep the plain chip above, otherwise a
 * product with one report shows one pill beside two bare labels. */
.pl-test-badges--linked .pl-test-badge.is-linked { padding: 0; border: 0; background: none; }

.pl-test-badges--linked .pl-test-badge > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px 6px 9px;
	border: 1px solid #d5e6f2;
	border-radius: 9999px;
	background: #f2f9fd;
	color: inherit;
	font-size: 12px;
	text-decoration: none;
	transition: border-color 0.18s ease, background-color 0.18s ease;
}

.pl-test-badges--linked .pl-test-badge > a:hover,
.pl-test-badges--linked .pl-test-badge > a:focus-visible {
	border-color: #0da2e7;
	background: #e6f4fc;
}

.pl-test-badges--linked .pl-test-badge--endotoxin > a { border-color: #cfe9dc; background: #f1faf5; }
.pl-test-badges--linked .pl-test-badge--endotoxin > a:hover,
.pl-test-badges--linked .pl-test-badge--endotoxin > a:focus-visible { border-color: #17a86f; background: #e6f6ee; }

.pl-test-badges--linked .pl-test-badge--heavy_metals > a { border-color: #e2ddef; background: #f6f4fb; }
.pl-test-badges--linked .pl-test-badge--heavy_metals > a:hover,
.pl-test-badges--linked .pl-test-badge--heavy_metals > a:focus-visible { border-color: #7a67bd; background: #efebf9; }

.pl-test-badges--linked .pl-test-badge--sterility > a { border-color: #f0e0cd; background: #fdf7f0; }
.pl-test-badges--linked .pl-test-badge--sterility > a:hover,
.pl-test-badges--linked .pl-test-badge--sterility > a:focus-visible { border-color: #c48231; background: #fbefe1; }

.pl-test-badges--linked .pl-test-badge svg { width: 15px; height: 15px; }

@media (max-width: 768px) {
	.pl-test-badges--linked { margin: 14px 0 18px; }
}

/* ============================================================
   Newsletter band above the footer

   The signup existed only on the order-received page, so the discount
   mechanism was built and never seen. A light band separates it from the
   petrol footer without competing with it.
   ============================================================ */
/* The band is the last strip before the footer, so it belongs to the site's
   dark chrome rather than to the page content: same navy the hero opens with,
   closing against the blue footer. The teal is spent once, on the button, which
   is the same pill the marquee uses for its one call to action. */
.pl-nl-band {
	background: linear-gradient(150deg, #0e2c5a 0%, #1a3a6e 55%, #245a9e 100%);
	padding: 52px 20px;
}

.pl-nl-band-inner {
	max-width: 720px;
	margin: 0 auto;
}

.pl-nl-band .pl-nl-box {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
	text-align: center;
}

.pl-nl-band .pl-nl-title {
	margin: 0 0 10px;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.25;
	color: #fff;
}

.pl-nl-band .pl-nl-text {
	margin: 0 auto 24px;
	max-width: 480px;
	font-size: 14.5px;
	line-height: 1.6;
	color: #b8cde2;
}

.pl-nl-band .pl-nl-form {
	justify-content: center;
	max-width: 500px;
	margin: 0 auto;
	gap: 8px;
}

.pl-nl-band .pl-nl-input {
	border-color: transparent;
	box-shadow: 0 1px 2px rgba(6, 24, 48, 0.2);
}

.pl-nl-band .pl-nl-input::placeholder {
	color: #94a3b8;
}

.pl-nl-band .pl-nl-input:focus {
	border-color: #4fd1c5;
	box-shadow: 0 0 0 3px rgba(79, 209, 197, 0.35);
}

.pl-nl-band button.pl-nl-submit {
	background: #4fd1c5;
	color: #06283d;
	font-weight: 700;
}

.pl-nl-band button.pl-nl-submit:hover,
.pl-nl-band button.pl-nl-submit:focus-visible {
	background: #6ff0e3;
	color: #06283d;
}

/* One row of small print, centred under the field, reading as a single
   sentence rather than as columns. */
.pl-nl-band .pl-nl-consent {
	justify-content: center;
	max-width: 470px;
	margin: 16px auto 0;
	text-align: left;
	color: #9fb8d0;
	font-size: 11.5px;
}

.pl-nl-band .pl-nl-consent a {
	color: #6ff0e3;
	text-decoration-color: rgba(111, 240, 227, 0.45);
}

.pl-nl-band .pl-nl-consent a:hover {
	text-decoration-color: #6ff0e3;
}

.pl-nl-band .pl-nl-notice {
	max-width: 500px;
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 768px) {
	.pl-nl-band { padding: 38px 20px; }
	.pl-nl-band .pl-nl-title { font-size: 21px; }
	.pl-nl-band .pl-nl-text { font-size: 14px; }
	.pl-nl-band button.pl-nl-submit { flex: 1 1 100%; }
}

/* ============================================================
   Product cards: same shape whatever the text length

   The category line runs to two lines on some compounds and three on others
   ("Recovery & Tissue Repair Research, Immune & Inflammatory Research"), which
   pushed the badges, price and button down by a whole line on those cards. On
   a two-column phone grid the mismatch is impossible not to see, and the last
   button was getting clipped.

   The fix is structural rather than a fixed height: the card is a column, the
   category is clamped to a set number of lines and reserves that space whether
   it needs it or not, and the footer is pushed to the bottom.
   ============================================================ */
.wd-product .product-element-bottom {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.wd-product .wd-product-wrapper,
.wd-products .wd-product {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* The product name is the one that actually moved things: measured across the
   grid it came out at 20, 40 and 60px, so a one-word compound sat a full two
   lines higher than a long one. Two lines reserved, clamped at two. */
.wd-product .wd-entities-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.4em;
	line-height: 1.2;
}

/* One line. The category is a secondary label, and the description line below
   it now says what the product actually is. */
.wd-product .wd-product-cats {
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 1.45em;
	line-height: 1.45;
}

/* Every product carries the same three assays, so the row is one height. It is
   reserved explicitly so a future product with fewer badges does not pull the
   price up on its card alone. */
.wd-product .pl-test-badges {
	min-height: 78px;
	align-content: flex-start;
}

.wd-product .wrap-price {
	margin-top: 0;
}

.wd-product .wd-product-footer {
	margin-top: auto;
	padding-top: 10px;
}

@media (min-width: 769px) {
	/* Three chips fit on one row once there is width for them. */
	.wd-product .pl-test-badges { min-height: 30px; }
	.wd-product .wd-product-cats { min-height: 1.45em; }
}

/* ---- "Already in your cart" on the product page ---- */
.pl-in-cart {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	padding: 11px 15px;
	border: 1px solid #cfe3f5;
	border-radius: 10px;
	background: #f2f8fd;
	font-size: 14px;
	line-height: 1.45;
	color: #0b4a6f;
}

.pl-in-cart .pl-in-cart-icon {
	display: inline-flex;
	flex: none;
	width: 18px;
	height: 18px;
	color: #0da2e7;
}

.pl-in-cart .pl-in-cart-icon svg { width: 100%; height: 100%; }

.pl-in-cart a {
	color: #0b6ea8;
	font-weight: 600;
	text-decoration: underline;
}

/* ============================================================
   Shop: permanent filter column

   Filters live in the left column from tablet up, and behind the theme's
   Filters button below that, where a column would leave no room for products.
   ============================================================ */
@media (min-width: 769px) {
	/* The button duplicates the column that is already open beside it. */
	.archive.woocommerce .wd-filter-buttons,
	.post-type-archive-product .wd-filter-buttons,
	.tax-product_cat .wd-filter-buttons {
		display: none;
	}
}

/* Long category names wrap in a narrow column, so the rows need room to
   breathe rather than colliding with the count. */
.wd-sidebar .widget_product_categories li,
.sidebar-container .widget_product_categories li {
	line-height: 1.4;
	padding: 5px 0;
}

.wd-sidebar .widget_product_categories a,
.sidebar-container .widget_product_categories a {
	font-size: 13.5px;
}

.wd-sidebar .widget-title,
.sidebar-container .widget-title {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #64748b;
}

/* ============================================================
   Shop: the filter column follows the scroll

   Two rows of the header stay stuck (82px + the 32px marquee), so the column
   starts below them rather than sliding under.

   `align-self: start` is what makes this work at all: the parent is a grid and
   a grid item stretches to the full row height by default, which leaves the
   column exactly as tall as the product list and nothing to stick to.
   ============================================================ */
:root {
	--pl-sticky-offset: 130px;
}

@media (min-width: 769px) {
	.wd-sidebar.sidebar-left,
	.sidebar-container.sidebar-left {
		position: sticky;
		top: var(--pl-sticky-offset);
		align-self: start;
		/* A long filter list must never park its own bottom out of reach. */
		max-height: calc(100vh - var(--pl-sticky-offset) - 24px);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	/* The scrollbar only appears when the column actually overflows, and stays
	   quiet when it does. */
	.wd-sidebar.sidebar-left::-webkit-scrollbar,
	.sidebar-container.sidebar-left::-webkit-scrollbar {
		width: 6px;
	}

	.wd-sidebar.sidebar-left::-webkit-scrollbar-thumb,
	.sidebar-container.sidebar-left::-webkit-scrollbar-thumb {
		border-radius: 3px;
		background: rgba(100, 116, 139, 0.3);
	}

	.wd-sidebar.sidebar-left,
	.sidebar-container.sidebar-left {
		scrollbar-width: thin;
		scrollbar-color: rgba(100, 116, 139, 0.3) transparent;
	}
}

/* ============================================================
   Audit fixes: touch targets, iOS zoom, small type
   ============================================================ */

/* ---- 1. Inputs at 16px ----

   Safari on iOS zooms the whole page when a text field under 16px takes
   focus, and does not zoom back out. Entering a coupon code or an email
   address left the customer looking at a magnified, sideways-scrolling page.
   16px is the threshold, not a preference. */
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="number"],
.woocommerce input[type="password"],
.woocommerce input[type="search"],
.woocommerce textarea,
.woocommerce select,
input#coupon_code,
input.input-text,
.quantity input.qty,
.pl-nl-input,
.wd-search-form input[type="text"],
.searchform input[type="text"],
.widget_product_search input,
input[type="search"] {
	font-size: 16px;
}

/* ---- 2. Touch targets ----

   WCAG 2.5.8 sets 24px as the floor; Apple and Google both recommend 44.
   These were measured at 17 to 30px tall. */

/* Product page: previous/next product arrows, measured 24x24. */
.wd-product-nav-btn,
a.wd-product-nav-btn {
	min-width: 40px;
	min-height: 40px;
}

/* Lab reports: "View product", measured 85x22. */
.pl-report-product {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 2px;
}

/* Document pages: the arrow links, measured 151x17. */
.pl-doc-card a[href]:not(.pl-doc-cta-btn):not(.pl-404-btn),
.pl-doc-panel a[href] {
	display: inline-block;
	padding: 8px 0;
}

/* Cart: the remove control, measured 30x30, raised to a 40px target.

   The size goes on the icon, not on the anchor. Woodmart prints the cross as an
   icon-font glyph in ::before and hides the literal "&times;" in the markup with
   font-size: 0; setting a font size on the anchor brought that character back and
   the cross appeared twice. */
.woocommerce a.remove,
.woocommerce-cart a.remove {
	width: 40px;
	height: 40px;
	line-height: 40px;
}

.woocommerce td.product-remove a.remove::before,
.woocommerce-cart td.product-remove a.remove::before {
	font-size: 17px;
}

/* Shop: sorting select and the price filter's apply button, both 30px tall. */
.woocommerce .woocommerce-ordering select,
select.orderby {
	min-height: 42px;
	padding-top: 6px;
	padding-bottom: 6px;
}

/* The price filter's own button is handled where it is styled, further up. */
.wd-sidebar .widget .button,
.sidebar-container .widget .button {
	min-height: 40px;
	padding-top: 9px;
	padding-bottom: 9px;
}

/* Category rows: the link is the target, so it carries the height. */
.wd-sidebar .widget_product_categories li a,
.sidebar-container .widget_product_categories li a {
	display: inline-block;
	padding: 6px 0;
}

/* ---- 3. Marquee type ----
   10px was the smallest text on the site, in a band that runs across every
   page. 12px is the readability floor; the tracking already does the rest. */
.whb-header-bottom .pl-mq {
	font-size: 12px;
}

@media (max-width: 768px) {
	.whb-header-bottom .pl-mq {
		font-size: 12px;
		letter-spacing: 0.08em;
	}
}

/* ---- 4. Filter column width ----
   At 1585px the column had grown to 363px to hold nine checkboxes. Capping it
   hands the space back to the products, which is what people came for. */
@media (min-width: 1400px) {
	.wd-sidebar.sidebar-left,
	.sidebar-container.sidebar-left {
		max-width: 280px;
	}
}

/* ---- 5. One way to open the filters ----

   The shop offered three: a "Show sidebar" link that slid out the sidebar, an
   inline "Filters" link, and the toolbar "Filters" button. The first opened a
   different panel from the other two, so the same nine categories appeared in
   two places depending on which control you happened to find.

   The sidebar opener goes. On a phone the toolbar button and the inline link
   both open the theme's filter panel, which carries the same widgets as the
   column, so the two views agree. */
.wd-show-sidebar-btn,
.woocommerce-shop .wd-show-sidebar-btn,
.tax-product_cat .wd-show-sidebar-btn {
	display: none;
}

/* The inline opener was 19px tall. */
.wd-filter-buttons .open-filters,
.wd-filter-buttons > a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
}

/* ---- Audit round two: selectors that missed ---- */

/* The theme sets display:flex on this through `.wd-action-btn`, which outranked
   a single-class rule. */
.wd-show-sidebar-btn.wd-action-btn,
.woocommerce .wd-show-sidebar-btn,
body .wd-show-sidebar-btn {
	display: none !important;
}

/* Cart quantity stepper: 25x30 is smaller than the drawer's own control. */
.woocommerce .quantity .minus,
.woocommerce .quantity .plus,
.woocommerce-cart .quantity button {
	min-width: 38px;
	min-height: 38px;
}

/* Shipping calculator toggle, measured 126x20. */
.shipping-calculator-button {
	display: inline-block;
	padding: 10px 0;
}

/* The filter panel's close control, measured 58x25. */
.wd-heading .close-side-widget,
.filters-area .close-side-widget,
a.close-side-widget {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 6px;
}

/* Product name in the cart table, measured 88x22. */
.woocommerce-cart-form .product-name > a {
	display: inline-block;
	padding: 6px 0;
}

/* The testing chips on shop cards were the last 10px text left. */
.wd-product .pl-test-badges .pl-test-badge,
.products .pl-test-badges .pl-test-badge {
	font-size: 11.5px;
}

/* The checkout trust row, at 11.5px, sits just under the readability floor. */
.pl-trust-row .pl-trust-item span {
	font-size: 12px;
}

/* ---- Audit round three: the last three, targeted from the measured markup ---- */

/* `close-side-widget` is on the wrapper, not on the anchor inside it. */
.close-side-widget,
.close-side-widget > a,
.wd-heading .close-side-widget > a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 8px;
}

/* The chip label is an unclassed span inheriting from the badge. 12px is the
   floor this pass set everywhere else, so it holds here too. */
.wd-product .pl-test-badges .pl-test-badge,
.products .pl-test-badges .pl-test-badge,
.wd-product .pl-test-badges .pl-test-badge span,
.products .pl-test-badges .pl-test-badge span {
	font-size: 12px;
}

/* ---- Checkout: the last fields that would still zoom iOS Safari ---- */

/* Safari zooms the page whenever a focused field is under 16px. The earlier
   pass covered text inputs; these three were missed because two are selects
   and one is a textarea. `billing_country` / `billing_state` are 1x1 under
   Select2, so the field that actually receives focus is Select2's own search
   input, not the native select. */
.woocommerce-checkout select,
.woocommerce-checkout textarea,
.woocommerce-checkout #order_comments,
.select2-container .select2-search__field,
.select2-container .select2-selection__rendered {
	font-size: 16px;
}

/* ---- Tap areas widened without touching the layout ---- */

/* Extending the hit area with an overlay keeps every band, row and inline
   position exactly where it is; only the touchable region grows. */
.pl-marquee a,
.woocommerce-breadcrumb a,
.woocommerce-form-login-toggle a,
.woocommerce-form-coupon-toggle a {
	position: relative;
}

.woocommerce-breadcrumb a::after,
.woocommerce-form-login-toggle a::after,
.woocommerce-form-coupon-toggle a::after {
	content: "";
	position: absolute;
	inset: -8px 0;
}

/* The marquee band is 32px tall, so the overlay stops at its edges rather
   than being clipped by the band's own overflow.

   It has to sit on ::before: ::after already carries the diamond separator
   that spaces the items apart, and taking it over made that separator
   absolutely positioned, which dropped it out of the flow and left the pill
   touching the text beside it. */
.pl-marquee a::before {
	content: "";
	position: absolute;
	inset: -6px 0;
}

/* The buyer-type select keeps resolving to 14px despite the rule above, so it
   gets an id-scoped declaration. Same 16px floor: it is a visible field on
   checkout, and anything smaller zooms iOS Safari on focus. */
#pl_buyer_type {
	font-size: 16px;
}

/* ---- 16px floor on every field that can take focus ---- */

/* The earlier rules were scoped to `.woocommerce` containers and to individual
   classes, so any field outside them kept the theme's 14px and still zoomed
   iOS Safari on focus. This is the floor itself, so it is marked important:
   it is an accessibility guarantee, not a look, and nothing should override it.
   Sizing a field below 16px is a bug regardless of where the field lives. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="date"],
select,
textarea {
	font-size: 16px !important;
}

/* ---- Product cards: shorter, with a line saying what the compound is ---- */

/* The three badges stay in the card body, below the description, which is where
   they read best. An earlier attempt lifted a single badge onto the image; it
   broke on hover, where Woodmart raises the card and the absolutely positioned
   pill stayed behind next to the title. */

/* One line is enough to place the product; the second was usually a wrapped
   fragment of the same category name. */
.wd-product .wd-product-cats {
	margin: 0 0 4px;
	font-size: 12px;
}

.wd-product .pl-card-desc {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0 0 8px;
	color: #64748b;
	font-size: 12.5px;
	line-height: 1.45;
	min-height: calc(2 * 1.45 * 12.5px);   /* keeps every card's rows aligned */
}

.wd-product .product-element-bottom {
	padding: 12px 12px 14px;
}

.wd-product .wd-entities-title {
	margin-bottom: 2px;
	font-size: 15px;
	line-height: 1.3;
}

@media (max-width: 768px) {
	.wd-product .pl-card-desc {
		-webkit-line-clamp: 3;
		min-height: 0;
	}
}

/* ---- Shop listing: a fifth column once there is room for it ---- */

/* Above 1600px the four columns leave the cards wider than they need to be.
   Scoped to the shop and category archives: the homepage block holds exactly
   four featured products and a fifth track would leave a gap. */
@media (min-width: 1600px) {
	.woocommerce-shop .products.wd-products.grid-columns-4,
	.tax-product_cat .products.wd-products.grid-columns-4 {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

/* ---- Product names carrying a second, formal name in brackets ---- */

/* Written as "GLP-3 (Retatrutide)" so one title serves the page, the card, the
   cart and the search index. The bracketed half is split onto its own line at
   display size only; nothing about the stored title changes. */
.pl-name-alt {
	display: block;
	margin-top: 2px;
	font-size: 0.62em;
	font-weight: 500;
	line-height: 1.3;
	color: #64748b;
	letter-spacing: 0;
}

.wd-product .pl-name-alt {
	font-size: 0.78em;
}

/* ---- Product page: quieter meta ---- */

/* The SKU is an internal reference; it tells a buyer nothing and sits in the
   same line as the category, which does. */
.single-product .product_meta .sku_wrapper {
	display: none;
}

/* ---- Batch test records on the product page ---- */

/* Same panel as the quality section above it, so the two read as one page
   rather than two authors. */
.pl-batch-archive {
	max-width: 1100px;
	margin: 40px auto 0;
	padding: 28px 30px;
	background: #f7f9fc;
	border: 1px solid #e8edf3;
	border-radius: 16px;
}

.pl-batch-archive h2 {
	margin: 0 0 12px;
	font-size: 24px;
	color: #0f172a;
}

.pl-batch-intro {
	margin: 0 0 22px;
	color: #64748b;
	line-height: 1.6;
}

.pl-batch-list {
	display: grid;
	gap: 14px;
}

/* One card per production lot, matching the quality cards beside it. */
.pl-batch-card {
	display: grid;
	grid-template-columns: minmax(140px, 1fr) 2fr auto;
	align-items: center;
	gap: 20px;
	padding: 18px 20px;
	background: #fff;
	border: 1px solid #e8edf3;
	border-radius: 12px;
}

/* The lot a buyer is most likely holding earns the accent border. */
.pl-batch-card.is-current {
	border-color: #c5d9ed;
	box-shadow: inset 3px 0 0 #0da2e7;
}

.pl-batch-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.pl-batch-number {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 15px;
	font-weight: 700;
	color: #0f172a;
	letter-spacing: 0.02em;
}

.pl-batch-tag {
	padding: 2px 8px;
	background: #e8f4fd;
	color: #0b6ea8;
	border-radius: 9999px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.pl-batch-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	margin: 0;
}

.pl-batch-facts dt {
	margin: 0 0 2px;
	color: #64748b;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.pl-batch-facts dd {
	margin: 0;
	color: #0f172a;
	font-size: 14px;
	font-weight: 600;
}

.pl-batch-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 40px;
	padding: 9px 16px;
	background: #fff;
	border: 1px solid #c5d9ed;
	border-radius: 9999px;
	color: #0b6ea8;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.18s ease, border-color 0.18s ease;
}

.pl-batch-btn:hover,
.pl-batch-btn:focus-visible {
	background: #f0f7fd;
	border-color: #0da2e7;
	color: #0b6ea8;
}

.pl-batch-btn svg {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
}

.pl-batch-norecord {
	color: #94a3b8;
	font-size: 13px;
	white-space: nowrap;
}

.pl-batch-empty {
	margin: 0;
	padding: 16px 18px;
	background: #fff;
	border: 1px solid #e8edf3;
	border-radius: 12px;
	color: #64748b;
	line-height: 1.6;
}

/* Below the panel's own breakpoint the card becomes a stack: the lot number,
   its facts in two columns, then the link across the full width. */
@media (max-width: 900px) {
	.pl-batch-card {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.pl-batch-action {
		justify-self: stretch;
	}

	.pl-batch-btn {
		width: 100%;
		justify-content: center;
	}
}

@media (max-width: 768px) {
	.pl-batch-archive {
		margin-top: 30px;
		padding: 20px 18px;
		border-radius: 14px;
	}

	.pl-batch-archive h2 {
		font-size: 20px;
	}

	.pl-batch-facts {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px 16px;
	}
}

/* ---- Lab reports archive: batch history per compound ---- */

.pl-report-history {
	grid-column: 1 / -1;
	margin: 12px 0 0;
	padding-top: 12px;
	border-top: 1px dashed #e2e8f0;
}

.pl-report-history > summary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 32px;
	color: #245a9e;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.pl-report-history > summary::-webkit-details-marker {
	display: none;
}

/* A caret that turns, so the control reads as expandable before it is used. */
.pl-report-history > summary::before {
	content: "";
	width: 0;
	height: 0;
	border-left: 5px solid currentColor;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	transition: transform 0.15s ease;
}

.pl-report-history[open] > summary::before {
	transform: rotate(90deg);
}

.pl-report-history-list {
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.pl-report-history-list li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 12px;
	padding: 7px 0;
	border-bottom: 1px solid #f1f5f9;
	font-size: 13px;
}

.pl-report-history-list li:last-child {
	border-bottom: 0;
}

.pl-report-history-list code {
	padding: 1px 6px;
	background: #f1f5f9;
	border-radius: 4px;
	font-size: 12px;
}

.pl-report-history-date {
	color: #64748b;
}

.pl-report-history-value {
	margin-left: auto;
	font-weight: 600;
	color: #0f172a;
}

.pl-report-history-list a {
	color: #0da2e7;
	font-weight: 600;
}

@media (max-width: 640px) {
	.pl-report-history-value {
		margin-left: 0;
	}
}

/* ---- Messenger contact ---- */

/* Reads as a quiet aside beside the billing fields, not as another required
   step. The same block serves the account page, where it stands alone. */
.pl-messenger {
	margin: 6px 0 18px;
	padding: 16px 18px;
	background: #f7f9fc;
	border: 1px solid #e8edf3;
	border-radius: 12px;
}

.pl-messenger-legend {
	padding: 0;
	margin: 0 0 4px;
	color: #0f172a;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}

.pl-messenger-help {
	margin: 0 0 12px;
	color: #64748b;
	font-size: 13px;
	line-height: 1.5;
}

.pl-messenger-options {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* A tap target in its own right, so the label is part of the control rather
   than text sitting next to a small box. */
.pl-messenger-option {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	margin: 0;
	padding: 0 16px 0 12px;
	background: #fff;
	border: 1px solid #cbd5e1;
	border-radius: 9999px;
	cursor: pointer;
	font-size: 14px;
	transition: border-color 0.18s ease, background 0.18s ease;
}

.pl-messenger-option:hover {
	border-color: #0da2e7;
}

.pl-messenger-option:has(input:checked) {
	background: #f0f7fd;
	border-color: #0da2e7;
}

.pl-messenger-option input {
	width: 17px;
	height: 17px;
	margin: 0;
	flex: 0 0 auto;
	accent-color: #0da2e7;
}

.pl-messenger-alt {
	margin: 14px 0 0;
}

.pl-messenger-alt label {
	display: block;
	margin-bottom: 5px;
	color: #64748b;
	font-size: 13px;
}

.pl-messenger--account {
	max-width: 520px;
}

@media (max-width: 480px) {
	.pl-messenger-options {
		gap: 8px;
	}

	.pl-messenger-option {
		flex: 1 1 100%;
		justify-content: flex-start;
	}
}

/* ---- Messenger: the Telegram handle, revealed on demand ---- */

/* Hidden until Telegram is chosen. Driven by :has() so nothing flashes on load
   and it still works without scripting; the class is the fallback path. */
.pl-messenger-handle {
	display: none;
	margin: 14px 0 0;
}

.pl-messenger:has( input[value="telegram"]:checked ) .pl-messenger-handle[data-for="telegram"],
.pl-messenger.is-telegram .pl-messenger-handle[data-for="telegram"] {
	display: block;
}

.pl-messenger-handle label {
	display: block;
	margin-bottom: 5px;
	color: #64748b;
	font-size: 13px;
}

.pl-messenger-handle input {
	width: 100%;
	max-width: 340px;
	padding: 11px 14px;
	background: #fff;
	border: 1px solid #cbd5e1;
	border-radius: 9999px;
	/* 16px keeps iOS Safari from zooming when the field takes focus. */
	font-size: 16px;
}

.pl-messenger-handle input:focus {
	outline: none;
	border-color: #0da2e7;
	box-shadow: 0 0 0 3px rgba(13, 162, 231, 0.15);
}

.pl-messenger-hint {
	display: block;
	margin-top: 6px;
	color: #94a3b8;
	font-size: 12px;
	line-height: 1.45;
}

@media (max-width: 480px) {
	.pl-messenger-handle input {
		max-width: 100%;
	}
}