/* Pure Labs — components
   Buttons, badges, cards, spec blocks, panels, accordions, pagination.
   These are the pieces reused across commerce and content templates. */

/* ---------- Buttons ---------- */

.pl-btn,
.pl-btn-ghost,
.pl-btn-dark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--pl-s-2);
	font-family: var(--pl-sans);
	font-size: var(--pl-t-body);
	font-weight: 600;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	border-radius: var(--pl-r-2);
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 90ms ease;
}

.pl-btn:active,
.pl-btn-ghost:active,
.pl-btn-dark:active { transform: translateY(1px); }

.pl-btn {
	background: var(--pl-blue);
	color: #fff;
	padding: 14px 22px;
}
.pl-btn:hover { background: var(--pl-blue-700); color: #fff; text-decoration: none; }

.pl-btn-ghost {
	background: var(--pl-bg);
	color: var(--pl-ink);
	border-color: var(--pl-line);
	padding: 13px 21px;
}
.pl-btn-ghost:hover { border-color: var(--pl-ink-4); color: var(--pl-ink); text-decoration: none; }

.pl-btn-dark {
	background: var(--pl-ink);
	color: #fff;
	padding: 14px 22px;
}
.pl-btn-dark:hover { background: var(--pl-blue-700); color: #fff; text-decoration: none; }

.pl-btn--sm { padding: 9px 14px; font-size: var(--pl-t-small); }
.pl-btn--block { width: 100%; }

/* Anchors styled as buttons are not <button>, so the 44px floor in tokens.css
   does not reach them. Restate it here for the 412 breakpoint. */
@media (max-width: 767px) {
	.pl-btn,
	.pl-btn-ghost,
	.pl-btn-dark,
	.pl-chip { min-height: 44px; }
}

.pl-btn[disabled],
.pl-btn-dark[disabled],
.pl-btn.disabled {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
}

/* Text link with a trailing arrow, used for COA downloads and read-more. */
.pl-link-arrow {
	font-family: var(--pl-mono);
	font-size: var(--pl-t-data);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pl-blue);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: var(--pl-s-2);
}
.pl-link-arrow:hover { color: var(--pl-blue-700); text-decoration: underline; }
.pl-link-arrow::after { content: "→"; }

/* ---------- Badges ---------- */

.pl-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--pl-mono);
	font-size: var(--pl-t-label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 4px 8px;
	border-radius: var(--pl-r-1);
	border: 1px solid transparent;
	white-space: nowrap;
}

.pl-badge--ok   { background: var(--pl-ok-bg);   color: var(--pl-ok);   border-color: color-mix(in srgb, var(--pl-ok) 22%, transparent); }
.pl-badge--warn { background: var(--pl-warn-bg); color: var(--pl-warn); border-color: color-mix(in srgb, var(--pl-warn) 22%, transparent); }
.pl-badge--err  { background: var(--pl-err-bg);  color: var(--pl-err);  border-color: color-mix(in srgb, var(--pl-err) 22%, transparent); }
.pl-badge--blue { background: var(--pl-blue-50); color: var(--pl-blue); border-color: var(--pl-blue-100); }
.pl-badge--line { background: var(--pl-bg); color: var(--pl-ink-3); border-color: var(--pl-line); }

/* The two badges that appear on every product surface. */
.pl-badge--purity { background: var(--pl-bg); color: var(--pl-ink); border-color: var(--pl-line); }
.pl-badge--ruo    { background: var(--pl-bg-3); color: var(--pl-ink-3); border-color: var(--pl-line); }

/* ---------- Panels and cards ---------- */

.pl-panel {
	background: var(--pl-bg);
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-r-4);
	padding: var(--pl-s-6);
}
.pl-panel--tint { background: var(--pl-bg-2); }
.pl-panel--blue { background: var(--pl-blue-50); border-color: var(--pl-blue-100); }
.pl-panel--flush { padding: 0; overflow: hidden; }

.pl-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pl-s-4);
	padding-bottom: var(--pl-s-4);
	border-bottom: 1px solid var(--pl-line);
	margin-bottom: var(--pl-s-4);
}

/* ---------- Spec block ---------- */
/* Label on the left, mono value on the right. Used on product pages, the
   COA panel and order summaries. */

.pl-spec { display: grid; gap: 0; }
.pl-spec__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--pl-s-4);
	padding: var(--pl-s-3) 0;
	border-bottom: 1px solid var(--pl-line-2);
}
.pl-spec__row:last-child { border-bottom: 0; }
.pl-spec__label { font-size: var(--pl-t-small); color: var(--pl-ink-3); }
.pl-spec__value { font-size: var(--pl-t-small); color: var(--pl-ink); text-align: right; }
.pl-spec__value.is-mono { font-family: var(--pl-mono); font-size: var(--pl-t-data); }

/* ---------- Research use only ---------- */

.pl-ruo-inline {
	font-family: var(--pl-mono);
	font-size: var(--pl-t-data);
	letter-spacing: 0.04em;
	color: var(--pl-ink-3);
	margin: 0;
}

.pl-ruo-banner {
	background: var(--pl-bg-3);
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-r-3);
	padding: var(--pl-s-5);
}
.pl-ruo-banner__head {
	font-family: var(--pl-mono);
	font-size: var(--pl-t-label);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pl-ink);
	margin-bottom: var(--pl-s-2);
}
.pl-ruo-banner__body { font-size: var(--pl-t-small); line-height: 1.6; color: var(--pl-ink-3); margin: 0; }

/* ---------- Vial placeholder ---------- */
/* Stands in until real photography lands. Sized to the same slot so swapping
   in an <img> changes nothing else. */

.pl-vial {
	position: relative;
	aspect-ratio: 4 / 5;
	background: var(--pl-bg-2);
	border: 1px solid var(--pl-line-2);
	border-radius: var(--pl-r-3);
	display: grid;
	place-items: center;
	overflow: hidden;
}
.pl-vial__body {
	width: 34%;
	min-width: 54px;
	background: var(--pl-bg);
	border: 1px solid var(--pl-line);
	border-radius: 3px 3px 5px 5px;
	padding: var(--pl-s-3) var(--pl-s-2) var(--pl-s-4);
	text-align: center;
	box-shadow: var(--pl-sh-1);
}
.pl-vial__cap {
	height: 14px;
	background: var(--pl-blue);
	border-radius: 3px 3px 1px 1px;
	margin: 0 auto var(--pl-s-3);
	width: 76%;
}
.pl-vial__name {
	font-family: var(--pl-mono);
	font-size: 10px;
	font-weight: 600;
	color: var(--pl-ink);
	line-height: 1.25;
	word-break: break-word;
}
.pl-vial__meta {
	font-family: var(--pl-mono);
	font-size: 8px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pl-ink-4);
	margin-top: 3px;
}

/* ---------- Accordion ---------- */

.pl-acc { border-top: 1px solid var(--pl-line); }
.pl-acc__item { border-bottom: 1px solid var(--pl-line); }
.pl-acc__btn {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pl-s-4);
	background: transparent;
	border: 0;
	padding: var(--pl-s-5) 0;
	text-align: left;
	font-family: inherit;
	font-size: var(--pl-t-body);
	font-weight: 600;
	color: var(--pl-ink);
	cursor: pointer;
}
.pl-acc__icon {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	position: relative;
	transition: transform 160ms ease;
}
.pl-acc__icon::before,
.pl-acc__icon::after {
	content: "";
	position: absolute;
	background: var(--pl-ink-3);
	inset: 50% 0 auto 0;
	height: 1.5px;
	transform: translateY(-50%);
}
.pl-acc__icon::after { transform: translateY(-50%) rotate(90deg); transition: opacity 160ms ease; }
.pl-acc__btn[aria-expanded="true"] .pl-acc__icon::after { opacity: 0; }
.pl-acc__panel { padding: 0 0 var(--pl-s-5); animation: plFade 160ms ease; }
.pl-acc__panel p { font-size: var(--pl-t-small); line-height: 1.65; }
.pl-acc__panel[hidden] { display: none; }

/* ---------- Chips and filter rails ---------- */

.pl-chips { display: flex; flex-wrap: wrap; gap: var(--pl-s-2); }
.pl-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--pl-bg);
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-r-pill);
	padding: 7px 13px;
	font-size: var(--pl-t-small);
	color: var(--pl-ink-2);
	text-decoration: none;
	cursor: pointer;
	transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}
.pl-chip:hover { border-color: var(--pl-ink-4); color: var(--pl-ink); text-decoration: none; }
.pl-chip.is-on,
.pl-chip[aria-pressed="true"] {
	background: var(--pl-blue-50);
	border-color: var(--pl-blue-100);
	color: var(--pl-blue);
}

/* ---------- Notices ---------- */

.pl-note {
	border: 1px solid var(--pl-line);
	border-left-width: 3px;
	border-radius: var(--pl-r-2);
	padding: var(--pl-s-4) var(--pl-s-5);
	font-size: var(--pl-t-small);
	color: var(--pl-ink-2);
	background: var(--pl-bg-2);
}
.pl-note--info { border-left-color: var(--pl-blue); background: var(--pl-blue-50); }
.pl-note--ok   { border-left-color: var(--pl-ok);   background: var(--pl-ok-bg); }
.pl-note--warn { border-left-color: var(--pl-warn); background: var(--pl-warn-bg); }
.pl-note--err  { border-left-color: var(--pl-err);  background: var(--pl-err-bg); }
.pl-note__title { font-weight: 600; color: var(--pl-ink); margin-bottom: var(--pl-s-1); }

/* ---------- Copy-to-clipboard row ---------- */
/* Used for the e-Transfer recipient, amount and order reference. */

.pl-copy {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pl-s-3);
	background: var(--pl-bg);
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-r-2);
	padding: var(--pl-s-3) var(--pl-s-4);
}
.pl-copy__value { font-family: var(--pl-mono); font-size: var(--pl-t-data); color: var(--pl-ink); word-break: break-all; }
.pl-copy__btn {
	flex-shrink: 0;
	background: transparent;
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-r-1);
	padding: 5px 9px;
	font-family: var(--pl-mono);
	font-size: var(--pl-t-label);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pl-ink-3);
	cursor: pointer;
}
.pl-copy__btn:hover { border-color: var(--pl-ink-4); color: var(--pl-ink); }
.pl-copy__btn.is-done { color: var(--pl-ok); border-color: var(--pl-ok); }

/* ---------- Pagination ---------- */

/* WooCommerce prints its own pagination wrapper; it gets the same treatment
   as the theme's so the shop does not end on unstyled links. */
.pl-pager,
.woocommerce-pagination {
	display: flex;
	justify-content: center;
	gap: var(--pl-s-2);
	margin-top: var(--pl-s-7);
}
.woocommerce-pagination ul.page-numbers {
	display: flex;
	gap: var(--pl-s-2);
	margin: 0;
	padding: 0;
	list-style: none;
	border: 0;
}
.woocommerce-pagination li { margin: 0; border: 0; }

.pl-pager .page-numbers,
.woocommerce-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 var(--pl-s-3);
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-r-2);
	font-family: var(--pl-mono);
	font-size: var(--pl-t-data);
	color: var(--pl-ink-2);
	text-decoration: none;
}
.pl-pager .page-numbers:hover,
.woocommerce-pagination .page-numbers:hover { border-color: var(--pl-ink-4); color: var(--pl-ink); text-decoration: none; }
.pl-pager .page-numbers.current,
.woocommerce-pagination .page-numbers.current {
	background: var(--pl-ink);
	border-color: var(--pl-ink);
	color: #fff;
}
.woocommerce-pagination .page-numbers.dots { border-color: transparent; }

/* ---------- Empty state ---------- */

.pl-empty {
	text-align: center;
	padding: var(--pl-s-9) var(--pl-s-5);
	border: 1px dashed var(--pl-line);
	border-radius: var(--pl-r-4);
	background: var(--pl-bg-2);
}
.pl-empty__title { font-size: var(--pl-t-h3); margin-bottom: var(--pl-s-3); }
.pl-empty p { max-width: 46ch; margin: 0 auto var(--pl-s-5); font-size: var(--pl-t-small); }