/* Pure Labs — commerce
   Catalog grid, product card, product page, cart, checkout, account.
   The grid reflows on container width; only the data tables and the filter
   rail switch layout at a real breakpoint. */

/* ---------- Catalog shell ---------- */

.pl-shop { padding-block: var(--pl-s-7) var(--pl-sec); }

/* Filter rail beside the grid, matching the reference layout. */
.pl-shop__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--pl-s-6);
	align-items: start;
}

@media (min-width: 1024px) {
	.pl-shop__layout { grid-template-columns: 244px minmax(0, 1fr); gap: var(--pl-s-8); }
	.pl-shop__filters { position: sticky; top: 98px; }
}

.pl-shop__filters { min-width: 0; }
.pl-shop__main { min-width: 0; }

/* Opens the filter panel. Only shown where the rail is not beside the grid. */
.pl-filterbar {
	display: none;
	align-items: center;
	justify-content: center;
	gap: var(--pl-s-2);
	width: 100%;
	background: var(--pl-bg);
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-r-2);
	padding: 13px 16px;
	font-family: inherit;
	font-size: var(--pl-t-small);
	font-weight: 600;
	color: var(--pl-ink);
	cursor: pointer;
	margin-bottom: var(--pl-s-4);
}
.pl-filterbar__count {
	background: var(--pl-blue);
	color: #fff;
	border-radius: var(--pl-r-pill);
	min-width: 19px;
	height: 19px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--pl-mono);
	font-size: 11px;
}

.pl-filters__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--pl-s-3);
	padding-bottom: var(--pl-s-3);
	border-bottom: 1px solid var(--pl-line);
	margin-bottom: var(--pl-s-5);
}
.pl-filters__close { display: none; }

/* The label is the control; the radio itself never needs to be seen. */
.pl-filters__item input,
.pl-filters__chips input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}
.pl-filters__group { border: 0; padding: 0; margin: 0; }
.pl-filters__legend { padding: 0; }

/* The apply button belongs to the panel; the rail applies on change. */
.pl-filters__apply { display: none; }
.pl-filters__title {
	font-family: var(--pl-mono);
	font-size: var(--pl-t-label);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pl-ink-3);
	margin: 0;
}
.pl-filters__clear { font-size: var(--pl-t-small); color: var(--pl-blue); text-decoration: none; }

.pl-filters__group + .pl-filters__group { margin-top: var(--pl-s-6); }
.pl-filters__legend {
	display: block;
	font-size: var(--pl-t-small);
	font-weight: 600;
	color: var(--pl-ink);
	margin-bottom: var(--pl-s-3);
}
.pl-filters__list { display: grid; gap: 2px; }
.pl-filters__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pl-s-3);
	padding: 7px 8px;
	margin-inline: -8px;
	border-radius: var(--pl-r-2);
	font-size: 13.5px;
	color: var(--pl-ink-2);
	text-decoration: none;
}
.pl-filters__item { cursor: pointer; }
.pl-filters__item:hover { background: var(--pl-bg-3); color: var(--pl-ink); text-decoration: none; }
.pl-filters__item.is-on,
.pl-filters__item:has(input:checked) { background: var(--pl-blue-50); color: var(--pl-blue); font-weight: 500; }
.pl-filters__count { font-family: var(--pl-mono); font-size: 11px; color: var(--pl-ink-4); }
.pl-filters__item.is-on .pl-filters__count,
.pl-filters__item:has(input:checked) .pl-filters__count { color: var(--pl-blue); }
.pl-filters__item:has(input:focus-visible),
.pl-filters__chips .pl-chip:has(input:focus-visible) { outline: 2px solid var(--pl-blue); outline-offset: 2px; }
.pl-filters__chips .pl-chip { cursor: pointer; }

.pl-filters__note {
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-r-2);
	padding: var(--pl-s-4);
	background: var(--pl-bg-2);
	margin-top: var(--pl-s-6);
}
.pl-filters__notetitle {
	font-family: var(--pl-mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pl-ink-3);
	margin: 0 0 var(--pl-s-2);
}
.pl-filters__note p { font-size: 12.5px; line-height: 1.55; color: var(--pl-ink-2); margin: 0; }

.pl-shop__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pl-s-4);
	flex-wrap: wrap;
	padding-bottom: 18px;
	margin-bottom: var(--pl-s-5);
	border-bottom: 1px solid var(--pl-line);
}
.pl-shop__count {
	font-family: var(--pl-mono);
	font-size: 12px;
	color: var(--pl-ink-3);
}
.pl-shop__sort { display: flex; align-items: center; gap: 10px; }
.pl-shop__sort select { width: auto; min-width: 190px; font-size: 13px; padding: 9px 34px 9px 12px; }
.pl-shop__sort label,
.pl-shop__sort .pl-label { margin: 0; white-space: nowrap; }

/* ---------- Product grid ---------- */

.woocommerce ul.products,
ul.products,
.pl-prodgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
	animation: plGrid 200ms ease;
}
ul.products::before,
ul.products::after { content: none; }
ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
}

/* ---------- Product card ---------- */

.pl-prodcard {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--pl-bg);
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-r-3);
	overflow: hidden;
	transition: border-color 160ms ease, box-shadow 160ms ease;
}
.pl-prodcard:hover {
	border-color: var(--pl-ink-4);
	box-shadow: var(--pl-sh-2);
}

/* Reference on the left, measured purity on the right. */
.pl-prodcard__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--pl-s-2);
	padding: 11px 13px;
	border-bottom: 1px solid var(--pl-line-2);
}
.pl-prodcard__ref {
	font-family: var(--pl-mono);
	font-size: 10px;
	color: var(--pl-ink-3);
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-r-1);
	padding: 3px 6px;
	white-space: nowrap;
}
.pl-prodcard__purity {
	font-family: var(--pl-mono);
	font-size: 10px;
	font-weight: 600;
	color: var(--pl-ok);
	background: var(--pl-ok-bg);
	border-radius: var(--pl-r-1);
	padding: 3px 6px;
	white-space: nowrap;
}

/* Square media well, no inset: the photography is square with its own white
   field, so the image runs to the frame instead of sitting in a border of
   padding on top of a border of empty pixels. */
.pl-prodcard__media {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--pl-bg-2);
	aspect-ratio: 1;
	overflow: hidden;
}
.pl-prodcard__media .pl-vial {
	border: 0;
	background: transparent;
	aspect-ratio: 1;
	height: 100%;
	width: auto;
}
.pl-prodcard__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: transparent;
}

.pl-prodcard__body { padding: 14px 13px 0; }

.pl-prodcard__title {
	font-size: 15.5px;
	font-weight: 600;
	letter-spacing: -0.018em;
	line-height: 1.25;
	margin: 0;
}
.pl-prodcard__title a { color: var(--pl-ink); text-decoration: none; }
.pl-prodcard__title a:hover { color: var(--pl-blue); text-decoration: none; }

.pl-prodcard__cas,
.pl-prodcard__formula {
	font-family: var(--pl-mono);
	font-size: 11px;
	color: var(--pl-ink-3);
	margin: 5px 0 0;
	overflow-wrap: anywhere;
}
.pl-prodcard__formula { margin-top: 3px; }

.pl-prodcard__tags { display: flex; gap: var(--pl-s-2); flex-wrap: wrap; padding: 12px 13px; }
.pl-prodcard__ruo,
.pl-prodcard__oos {
	font-family: var(--pl-mono);
	font-size: 9px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pl-ink-3);
	background: var(--pl-bg-3);
	padding: 3px 6px;
	border-radius: var(--pl-r-1);
}
.pl-prodcard__oos { color: var(--pl-warn); background: var(--pl-warn-bg); }

.pl-prodcard__foot {
	margin-top: auto;
	padding: 13px;
	border-top: 1px solid var(--pl-line-2);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.pl-prodcard__price {
	display: block;
	font-family: var(--pl-mono);
	font-size: 15px;
	font-weight: 600;
	color: var(--pl-ink);
}
.pl-prodcard__price .woocommerce-Price-amount { font-family: var(--pl-mono); }
.pl-prodcard__unit {
	display: block;
	font-size: 10.5px;
	color: var(--pl-ink-4);
	margin-top: 2px;
}
.pl-prodcard__cta {
	flex-shrink: 0;
	background: var(--pl-bg);
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-r-2);
	padding: 8px 13px;
	font-family: var(--pl-mono);
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pl-ink-2);
	text-decoration: none;
	transition: border-color 140ms ease, color 140ms ease;
}
.pl-prodcard__cta:hover { border-color: var(--pl-ink-4); color: var(--pl-ink); text-decoration: none; }

/* ---------- Single product ---------- */

.pl-pdp { padding-block: var(--pl-s-6) var(--pl-sec); }

.pl-pdp__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--pl-s-8);
	align-items: start;
	margin-top: var(--pl-s-6);
}

.pl-pdp__gallery { position: sticky; top: 98px; }
.pl-pdp__gallery .pl-vial { border-radius: var(--pl-r-4); }
.pl-pdp__gallery img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
	background: var(--pl-bg-2);
	border-radius: var(--pl-r-4);
	border: 1px solid var(--pl-line);
}
.pl-pdp__thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
	gap: var(--pl-s-3);
	margin-top: var(--pl-s-3);
}

/* Thumbnails swap the main image, so they are buttons, not decoration. */
.pl-pdp__thumb {
	display: block;
	padding: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
	border-radius: var(--pl-r-2);
}
.pl-pdp__thumbs img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
	background: var(--pl-bg-2);
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-r-2);
	transition: border-color 140ms ease;
}
.pl-pdp__thumb:hover img { border-color: var(--pl-ink-4); }
.pl-pdp__thumb[aria-current="true"] img { border-color: var(--pl-blue); box-shadow: var(--pl-ring); }

/* The identity card that overlays the vial in the reference design. */
.pl-pdp__idcard {
	background: var(--pl-bg);
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-r-3);
	padding: var(--pl-s-4);
	margin-top: var(--pl-s-4);
	display: grid;
	gap: var(--pl-s-2);
}
.pl-pdp__idcard dl { display: grid; gap: 6px; margin: 0; }
.pl-pdp__idcard div { display: flex; justify-content: space-between; gap: var(--pl-s-4); }
.pl-pdp__idcard dt { font-size: var(--pl-t-small); color: var(--pl-ink-3); }
.pl-pdp__idcard dd { margin: 0; font-family: var(--pl-mono); font-size: var(--pl-t-data); color: var(--pl-ink); }

/* Badge row above the title: reference, measured purity, availability. */
.pl-pdp__badges { display: flex; flex-wrap: wrap; gap: var(--pl-s-2); margin-bottom: var(--pl-s-4); }
.pl-pdp__badge {
	font-family: var(--pl-mono);
	font-size: 10.5px;
	letter-spacing: 0.04em;
	padding: 4px 8px;
	border-radius: var(--pl-r-1);
	border: 1px solid transparent;
	white-space: nowrap;
}
.pl-pdp__badge.is-ref { color: var(--pl-ink-3); border-color: var(--pl-line); }
.pl-pdp__badge.is-purity { color: var(--pl-ok); background: var(--pl-ok-bg); font-weight: 600; }
.pl-pdp__badge.is-stock { color: var(--pl-blue); background: var(--pl-blue-50); }
.pl-pdp__badge.is-oos { color: var(--pl-warn); background: var(--pl-warn-bg); }

.pl-pdp__title { font-size: var(--pl-t-h1); margin: 0; }
.pl-pdp__summary { margin: var(--pl-s-3) 0 0; font-size: var(--pl-t-body-l); color: var(--pl-ink-3); }

.pl-pdp__pricebox { display: flex; align-items: baseline; gap: var(--pl-s-3); flex-wrap: wrap; margin-top: var(--pl-s-5); }
.pl-pdp__price {
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--pl-ink);
}
.pl-pdp__price .woocommerce-Price-amount { font-family: var(--pl-mono); }
.pl-pdp__price del { color: var(--pl-ink-4); font-weight: 400; font-size: 18px; margin-right: 6px; }
.pl-pdp__price ins { text-decoration: none; }
.pl-pdp__perunit { font-family: var(--pl-mono); font-size: var(--pl-t-data); color: var(--pl-ink-3); }

/* ---------- Buy box ---------- */

.pl-buybox { margin-top: var(--pl-s-6); }
.pl-buybox__group + .pl-buybox__group { margin-top: var(--pl-s-6); }
.pl-buybox__grouphead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--pl-s-3);
	padding-bottom: var(--pl-s-2);
	border-bottom: 1px solid var(--pl-line-2);
	margin-bottom: var(--pl-s-3);
}
.pl-buybox__chosen { font-family: var(--pl-mono); font-size: var(--pl-t-data); color: var(--pl-ink-3); }

/* The native selects stay in the DOM for WooCommerce, out of sight. */
.pl-buybox__native { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.pl-buybox__reset {
	display: inline-block;
	margin-top: var(--pl-s-4);
	font-size: var(--pl-t-small);
	color: var(--pl-ink-3);
}

.pl-buybox .pl-chip {
	font-family: var(--pl-mono);
	font-size: var(--pl-t-data);
	border-radius: var(--pl-r-2);
	padding: 10px 16px;
}
.pl-buybox .pl-chip.is-on {
	background: var(--pl-blue);
	border-color: var(--pl-blue);
	color: #fff;
}

/* Kit tiers, each showing the per-vial figure and what it saves. */
/* Three tiers side by side; they only stack on the narrowest screens. */
.pl-kitgrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--pl-s-3);
}

@media (max-width: 520px) {
	.pl-kitgrid { grid-template-columns: minmax(0, 1fr); }
}
.pl-kitcard {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 3px;
	text-align: left;
	background: var(--pl-bg);
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-r-3);
	padding: var(--pl-s-4);
	cursor: pointer;
	font-family: inherit;
	transition: border-color 140ms ease, box-shadow 140ms ease;
}
.pl-kitcard:hover { border-color: var(--pl-ink-4); }
.pl-kitcard.is-on { border-color: var(--pl-blue); box-shadow: var(--pl-ring); }
.pl-kitcard::after {
	content: "";
	position: absolute;
	top: var(--pl-s-4);
	right: var(--pl-s-4);
	width: 13px;
	height: 13px;
	border-radius: 50%;
	border: 1px solid var(--pl-line);
}
.pl-kitcard.is-on::after { border-color: var(--pl-blue); background: var(--pl-blue); box-shadow: inset 0 0 0 2.5px #fff; }
.pl-kitcard__name { font-size: var(--pl-t-small); font-weight: 600; color: var(--pl-ink); padding-right: var(--pl-s-5); }
.pl-kitcard__unit { font-family: var(--pl-mono); font-size: 17px; font-weight: 600; color: var(--pl-ink); }
.pl-kitcard__total { font-size: 11px; color: var(--pl-ink-4); }
.pl-kitcard__save {
	font-family: var(--pl-mono);
	font-size: var(--pl-t-label);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pl-ink-4);
	margin-top: 2px;
}
.pl-kitcard__save.is-on { color: var(--pl-ok); }

/* ---------- Trust grid ---------- */

.pl-pdp__trust {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
	gap: var(--pl-s-3);
	margin-top: var(--pl-s-5);
}
.pl-pdp__trustitem {
	display: flex;
	gap: var(--pl-s-3);
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-r-2);
	padding: var(--pl-s-4);
}
.pl-pdp__trustnum {
	font-family: var(--pl-mono);
	font-size: var(--pl-t-label);
	color: var(--pl-blue);
	flex-shrink: 0;
}
.pl-pdp__trusttitle { display: block; font-size: var(--pl-t-small); font-weight: 600; color: var(--pl-ink); }
.pl-pdp__trustdetail { display: block; font-size: 12px; color: var(--pl-ink-3); margin-top: 2px; }

/* ---------- Technical data and lot reports ---------- */

.pl-pdp__data {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--pl-s-8);
	margin-top: var(--pl-sec);
	padding-top: var(--pl-s-7);
	border-top: 1px solid var(--pl-line);
}

@media (min-width: 1024px) {
	.pl-pdp__data { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pl-pdp__datatitle { font-size: var(--pl-t-h3); margin: var(--pl-s-3) 0 var(--pl-s-5); }

.pl-datatable { border: 1px solid var(--pl-line); border-radius: var(--pl-r-3); overflow: hidden; }
.pl-datatable__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
	gap: 14px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--pl-line-2);
}
.pl-datatable__row:nth-child(odd) { background: var(--pl-bg-2); }
.pl-datatable__row:last-child { border-bottom: 0; }
.pl-datatable__label { font-size: var(--pl-t-small); color: var(--pl-ink-3); }
.pl-datatable__value { font-family: var(--pl-mono); font-size: var(--pl-t-data); color: var(--pl-ink); overflow-wrap: anywhere; }

.pl-coalist { display: grid; gap: var(--pl-s-3); }
.pl-coacard {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	gap: var(--pl-s-4);
	align-items: center;
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-r-3);
	padding: var(--pl-s-4);
}
.pl-coacard__icon {
	font-family: var(--pl-mono);
	font-size: 9px;
	letter-spacing: 0.08em;
	color: var(--pl-ink-4);
	background: var(--pl-bg-3);
	border-radius: var(--pl-r-1);
	padding: 10px 7px;
}
.pl-coacard__title { font-size: var(--pl-t-small); font-weight: 600; margin: 0; }
.pl-coacard__meta { font-family: var(--pl-mono); font-size: 11px; color: var(--pl-ink-3); margin: 3px 0 0; }
.pl-coacard__result { text-align: right; }
.pl-coacard__purity { display: block; font-family: var(--pl-mono); font-size: var(--pl-t-small); font-weight: 600; color: var(--pl-ok); }
.pl-coacard__measured {
	display: block;
	font-family: var(--pl-mono);
	font-size: 9px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pl-ink-4);
}
.pl-coacard__pending { font-size: 11px; color: var(--pl-ink-4); white-space: nowrap; }

.pl-coanote {
	margin-top: var(--pl-s-4);
	background: var(--pl-bg-2);
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-r-3);
	padding: var(--pl-s-4);
}
.pl-coanote p { font-size: var(--pl-t-small); color: var(--pl-ink-3); margin: 0 0 var(--pl-s-3); }

/* Tested-for checklist */
.pl-tests {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--pl-s-3);
	margin-top: var(--pl-s-5);
	padding: var(--pl-s-4);
	background: var(--pl-bg-2);
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-r-3);
}
.pl-tests__item { display: flex; align-items: center; gap: var(--pl-s-2); font-size: var(--pl-t-small); color: var(--pl-ink-2); }
.pl-tests__tick {
	flex-shrink: 0;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	background: var(--pl-ok-bg);
	color: var(--pl-ok);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
}

/* COA panel */
.pl-coa {
	margin-top: var(--pl-s-5);
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-r-3);
	overflow: hidden;
}
.pl-coa__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pl-s-4);
	padding: var(--pl-s-4);
	background: var(--pl-bg-2);
	border-bottom: 1px solid var(--pl-line);
}
.pl-coa__title { font-size: var(--pl-t-h4); margin: 0; }
.pl-coa__body { padding: var(--pl-s-4); }
.pl-coa__foot {
	padding: var(--pl-s-4);
	border-top: 1px solid var(--pl-line-2);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pl-s-4);
	flex-wrap: wrap;
}

/* Variations */
.pl-pdp .variations { margin: var(--pl-s-6) 0 0; border-collapse: collapse; width: 100%; }
.pl-pdp .variations tr { display: block; margin-bottom: var(--pl-s-4); }
.pl-pdp .variations th,
.pl-pdp .variations td { display: block; padding: 0; text-align: left; }
.pl-pdp .variations th.label label {
	font-family: var(--pl-mono);
	font-size: var(--pl-t-label);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pl-ink-3);
	margin-bottom: var(--pl-s-2);
}
.pl-pdp .variations select { max-width: 340px; }
.pl-pdp .reset_variations {
	display: inline-block;
	margin-top: var(--pl-s-2);
	font-size: var(--pl-t-small);
	color: var(--pl-ink-3);
}

/* WooCommerce repeats the resolved price here, but the price block at the top
   of the page already shows it and updates with the selection. */
.woocommerce-variation-price { display: none; }
.woocommerce-variation-availability { margin-bottom: var(--pl-s-3); font-size: var(--pl-t-small); }

/* Per-unit price hint under the kit selector */
.pl-unitprice {
	font-family: var(--pl-mono);
	font-size: var(--pl-t-data);
	color: var(--pl-ink-3);
	margin-top: var(--pl-s-2);
}

/* Add to cart. The form itself is a block so the option groups stack; only
   the quantity and button sit on one line. */
.pl-pdp form.cart { display: block; }
.pl-pdp .woocommerce-variation-add-to-cart {
	display: flex;
	align-items: stretch;
	gap: var(--pl-s-3);
	margin-top: var(--pl-s-5);
	flex-wrap: wrap;
}
.pl-pdp .quantity { display: flex; }
.pl-pdp .quantity input[type="number"] {
	width: 84px;
	text-align: center;
	font-family: var(--pl-mono);
	padding: 13px 8px;
}
/* Specificity has to clear the generic .woocommerce button.button rule
   further down this file, which would otherwise paint it white. */
.pl-pdp form.cart button.single_add_to_cart_button {
	flex: 1 1 220px;
	background: var(--pl-blue);
	color: #fff;
	border: 0;
	border-radius: var(--pl-r-2);
	padding: 15px 24px;
	font-family: inherit;
	font-size: var(--pl-t-body);
	font-weight: 600;
	cursor: pointer;
	transition: background-color 140ms ease;
}
.pl-pdp form.cart button.single_add_to_cart_button:hover { background: var(--pl-blue-700); }
.pl-pdp form.cart button.single_add_to_cart_button.disabled {
	background: var(--pl-bg-3);
	color: var(--pl-ink-4);
	cursor: not-allowed;
}

.pl-pdp .pl-ruo-banner { margin-top: var(--pl-s-5); }

/* Long description and related */
.pl-pdp__details { margin-top: var(--pl-sec); border-top: 1px solid var(--pl-line); padding-top: var(--pl-s-7); }
.pl-pdp__details .pl-prose { max-width: 74ch; }
.related.products,
.up-sells { margin-top: var(--pl-sec); }
.related.products > h2,
.up-sells > h2 { font-size: var(--pl-t-h2); margin-bottom: var(--pl-s-6); }

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

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice {
	list-style: none;
	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);
	margin: 0 0 var(--pl-s-5);
	font-size: var(--pl-t-small);
	color: var(--pl-ink-2);
	background: var(--pl-bg-2);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pl-s-4);
	flex-wrap: wrap;
}
.woocommerce-message { border-left-color: var(--pl-ok); background: var(--pl-ok-bg); }
.woocommerce-info { border-left-color: var(--pl-blue); background: var(--pl-blue-50); }
.woocommerce-error { border-left-color: var(--pl-err); background: var(--pl-err-bg); }
.woocommerce-error li { list-style: none; }
.woocommerce-message .button,
.woocommerce-info .button {
	background: var(--pl-ink);
	color: #fff;
	border-radius: var(--pl-r-2);
	padding: 9px 14px;
	font-size: var(--pl-t-small);
	font-weight: 600;
	text-decoration: none;
}

/* ---------- Cart ---------- */
/* Four columns: item, unit price, quantity, line total. The reference and lot
   sit under the item name, which is why this is a grid and not a table. */

/* One column until there is genuinely room for two. An auto-fit grid splits
   at 768 and leaves the four-column line items about 260px to work with,
   which collides. The summary drops below the list instead. */
.pl-cart {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 36px;
	align-items: start;
}
.pl-cart__items { min-width: 0; }
.pl-cart__aside { min-width: 0; }

@media (min-width: 1024px) {
	/* 400px fixed, as the design has it. A fluid column ran narrower and
	   wrapped the summary copy onto extra lines, which is what pushed it
	   taller than the item list beside it. */
	.pl-cart { grid-template-columns: minmax(0, 1fr) 400px; }

	/* The summary follows down a long list rather than stranding the
	   checkout button above the fold. */
	.pl-cart__aside { position: sticky; top: 98px; }
}

.pl-cart__count {
	font-family: var(--pl-mono);
	font-size: var(--pl-t-label);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pl-ink-3);
	margin: 0 0 var(--pl-s-4);
}

.pl-cart__table {
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-r-3);
	overflow: hidden;
}

.pl-cart__head,
.pl-cart__row {
	display: grid;
	grid-template-columns: 2.4fr 1fr 0.9fr 0.7fr;
	gap: var(--pl-s-4);
}

.pl-cart__head {
	padding: 12px 20px;
	background: var(--pl-bg-2);
	border-bottom: 1px solid var(--pl-line);
	font-family: var(--pl-mono);
	font-size: var(--pl-t-label);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pl-ink-3);
}

.pl-cart__row {
	padding: 20px;
	border-bottom: 1px solid var(--pl-line-2);
	align-items: center;
}
.pl-cart__row:last-of-type { border-bottom: 0; }

.pl-cart__right { text-align: right; }

.pl-cart__item { display: flex; gap: var(--pl-s-4); align-items: flex-start; min-width: 0; }
.pl-cart__thumb { flex: 0 0 64px; }
.pl-cart__thumb img {
	width: 64px;
	aspect-ratio: 1;
	object-fit: contain;
	background: var(--pl-bg-2);
	border: 1px solid var(--pl-line-2);
	border-radius: var(--pl-r-2);
	padding: 4px;
}
.pl-cart__detail { min-width: 0; }
.pl-cart__name { font-size: var(--pl-t-body); margin: 0; line-height: 1.3; }
.pl-cart__name a { color: var(--pl-ink); text-decoration: none; }
.pl-cart__name a:hover { color: var(--pl-blue); }

.pl-cart__variation { margin-top: 4px; font-size: var(--pl-t-small); color: var(--pl-ink-3); }
.pl-cart__variation dl { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0; }
.pl-cart__variation dt { font-weight: 500; }
.pl-cart__variation dd { margin: 0; }
.pl-cart__variation p { margin: 0; font-size: inherit; }

.pl-cart__meta {
	margin: 6px 0 0;
	font-family: var(--pl-mono);
	font-size: var(--pl-t-data);
	color: var(--pl-ink-3);
}
.pl-cart__metalabel {
	font-size: var(--pl-t-label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pl-ink-4);
	margin-right: 4px;
}

.pl-cart__remove {
	display: inline-block;
	margin-top: var(--pl-s-2);
	font-family: var(--pl-mono);
	font-size: var(--pl-t-label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pl-ink-4);
	text-decoration: none;
}
.pl-cart__remove:hover { color: var(--pl-err); text-decoration: underline; }

.pl-cart__unit,
.pl-cart__total { font-family: var(--pl-mono); font-size: var(--pl-t-small); color: var(--pl-ink); }
.pl-cart__unitnote {
	display: block;
	margin-top: 2px;
	font-size: var(--pl-t-label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pl-ink-4);
}
.pl-cart__total { font-weight: 600; }

/* Stepper: minus, value, plus as one control. */
.pl-stepper {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-r-2);
	overflow: hidden;
	background: var(--pl-bg);
}
.pl-stepper__btn {
	/* Wide enough for a thumb on the product page, where it is the control
	   people use before buying; the cart table keeps it narrow. */
	width: 44px;
	background: var(--pl-bg-2);
	border: 0;
	font-family: var(--pl-mono);
	font-size: 15px;
	line-height: 1;
	color: var(--pl-ink-2);
	cursor: pointer;
	transition: background-color 120ms ease, color 120ms ease;
}
.pl-stepper__btn:hover { background: var(--pl-bg-3); color: var(--pl-ink); }
.pl-stepper__btn:active { background: var(--pl-blue-50); color: var(--pl-blue); }

.pl-cart__qty .pl-stepper__btn { width: 34px; }
.pl-cart__qty .quantity { margin: 0; }
.pl-cart__qty .quantity input[type="number"] {
	width: 46px;
	text-align: center;
	font-family: var(--pl-mono);
	padding: 9px 2px;
	border: 0;
	border-inline: 1px solid var(--pl-line);
	border-radius: 0;
	-moz-appearance: textfield;
}
.pl-cart__qty .quantity input[type="number"]::-webkit-outer-spin-button,
.pl-cart__qty .quantity input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.pl-cart__qty .quantity input[type="number"]:focus { box-shadow: none; border-color: var(--pl-blue); }

/* While a line is being saved the totals dim rather than jump. */
.pl-summary.is-busy,
.cart_totals.is-busy { opacity: 0.55; transition: opacity 120ms ease; pointer-events: none; }

.pl-cart__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pl-s-3);
	align-items: center;
	justify-content: space-between;
	padding: var(--pl-s-4) 20px;
	border-top: 1px solid var(--pl-line);
	background: var(--pl-bg-2);
}
.pl-cart__actionsright { display: flex; gap: var(--pl-s-2); align-items: center; flex-wrap: wrap; }
.pl-cart__back {
	font-family: var(--pl-mono);
	font-size: var(--pl-t-label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pl-blue);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: var(--pl-s-2);
}
.pl-cart__back::before { content: "←"; }
.pl-cart__back:hover { text-decoration: underline; }
.pl-cart__update {
	background: var(--pl-bg);
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-r-2);
	padding: 9px 14px;
	font-family: inherit;
	font-size: var(--pl-t-small);
	font-weight: 600;
	color: var(--pl-ink);
	cursor: pointer;
}
.pl-cart__update:hover { border-color: var(--pl-ink-4); }
.pl-cart__coupon { display: flex; gap: var(--pl-s-2); align-items: center; }
.pl-cart__coupon input {
	flex: 0 1 190px;
	width: 190px;
	padding: 9px 12px;
	font-size: var(--pl-t-small);
}

.woocommerce-cart-form table.shop_table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-r-3);
	overflow: hidden;
}
.shop_table th {
	text-align: left;
	font-family: var(--pl-mono);
	font-size: var(--pl-t-label);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pl-ink-3);
	font-weight: 500;
	padding: var(--pl-s-4);
	background: var(--pl-bg-2);
	border-bottom: 1px solid var(--pl-line);
}
.shop_table td {
	padding: var(--pl-s-4);
	border-bottom: 1px solid var(--pl-line-2);
	color: var(--pl-ink-2);
	vertical-align: middle;
	font-size: var(--pl-t-small);
}
.shop_table .product-name a { color: var(--pl-ink); font-weight: 600; text-decoration: none; }
.shop_table .product-price,
.shop_table .product-subtotal,
.shop_table .product-total { font-family: var(--pl-mono); color: var(--pl-ink); }
.shop_table .product-thumbnail img,
.shop_table .product-thumbnail .pl-vial { width: 64px; border-radius: var(--pl-r-2); }
.shop_table .product-remove a {
	display: inline-flex;
	width: 28px;
	height: 28px;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-r-1);
	color: var(--pl-ink-3);
	text-decoration: none;
	font-size: 15px;
}
.shop_table .product-remove a:hover { border-color: var(--pl-err); color: var(--pl-err); }

/* ---------- Order summary ---------- */

.cart-collaterals { display: block; }

.pl-summary {
	width: 100%;
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-r-3);
	padding: var(--pl-s-5);
	background: var(--pl-bg);
}
.pl-summary__title {
	font-family: var(--pl-mono);
	font-size: var(--pl-t-label);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pl-ink-3);
	margin: 0 0 var(--pl-s-4);
	padding-bottom: var(--pl-s-4);
	border-bottom: 1px solid var(--pl-line);
}
/* Rows carry their own vertical padding rather than a grid gap, matching the
   design's 8px-either-side rhythm. */
.pl-summary__rows { display: block; }
.pl-summary__row,
.pl-summary tr {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--pl-s-4);
	padding: 8px 0;
	font-size: 14px;
	color: var(--pl-ink-2);
}
.pl-summary__value { font-family: var(--pl-mono); color: var(--pl-ink); }
.pl-summary__pending { color: var(--pl-ink-3); }

/* WooCommerce prints shipping as a table row; make it match. */
.pl-summary table { width: 100%; border-collapse: collapse; }
.pl-summary th,
.pl-summary td { padding: 0; border: 0; text-align: left; font-weight: 400; }
.pl-summary td { text-align: right; font-family: var(--pl-mono); color: var(--pl-ink); }
.pl-summary .woocommerce-shipping-methods { list-style: none; margin: 0; padding: 0; }
.pl-summary .shipping__inner { display: block; }

.pl-summary__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--pl-s-4);
	margin-top: var(--pl-s-2);
	padding-top: var(--pl-s-4);
	border-top: 1px solid var(--pl-line);
	font-size: 15px;
	font-weight: 600;
	color: var(--pl-ink);
}
.pl-summary__totalvalue { font-family: var(--pl-mono); font-size: 23px; font-weight: 600; letter-spacing: -0.02em; }
.pl-summary__totalvalue .woocommerce-Price-amount { font-family: var(--pl-mono); }

.pl-summary__method {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--pl-s-2);
	margin: 14px 0 0;
	font-family: var(--pl-mono);
	font-size: 10.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pl-ink-3);
}
.pl-summary__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--pl-blue); }

.wc-proceed-to-checkout { margin-top: 20px; }
.wc-proceed-to-checkout .checkout-button { padding: 15px 24px; font-size: 15px; }

/* Notes under the summary. */
.pl-cart__method,
.pl-cart__ruo {
	border-radius: var(--pl-r-2);
	padding: var(--pl-s-4);
	margin-top: var(--pl-s-4);
}
.pl-cart__method { background: var(--pl-warn-bg); border: 1px solid var(--pl-warn-bg); }
.pl-cart__methodtitle {
	font-family: var(--pl-mono);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pl-warn);
	margin: 0 0 6px;
}
.pl-cart__method p { font-size: 13px; line-height: 1.55; color: var(--pl-ink-2); margin: 0; }
.pl-cart__ruo { background: var(--pl-bg); border: 1px solid var(--pl-line); }
.pl-cart__ruo p { font-size: 12.5px; line-height: 1.55; color: var(--pl-ink-3); margin: 0; }
.pl-cart__ruo strong { color: var(--pl-ink); }

/* ---------- Empty states ---------- */

.pl-emptystate {
	text-align: center;
	background: var(--pl-bg-2);
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-r-4);
	padding: var(--pl-s-9) var(--pl-s-5);
}
.pl-emptystate__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1px dashed var(--pl-line);
	border-radius: var(--pl-r-2);
	font-family: var(--pl-mono);
	font-size: 13px;
	color: var(--pl-ink-4);
	margin-bottom: var(--pl-s-5);
}
.pl-emptystate__title { font-size: var(--pl-t-h3); margin: 0 0 var(--pl-s-3); }
.pl-emptystate__body {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--pl-ink-3);
	max-width: 44ch;
	margin: 0 auto var(--pl-s-5);
}
.pl-emptystate__actions { display: flex; justify-content: center; gap: var(--pl-s-3); flex-wrap: wrap; }

/* ---------- Commerce page heading ---------- */

.pl-commercehead { padding-block: var(--pl-s-6) 0; }
.pl-commercehead__title { font-size: var(--pl-t-h1); margin: var(--pl-s-4) 0 0; }
.wc-proceed-to-checkout .checkout-button {
	display: block;
	text-align: center;
	background: var(--pl-blue);
	color: #fff;
	border-radius: var(--pl-r-2);
	padding: 15px 24px;
	font-weight: 600;
	text-decoration: none;
}
.wc-proceed-to-checkout .checkout-button:hover { background: var(--pl-blue-700); color: #fff; }

.actions .coupon { display: flex; gap: var(--pl-s-3); flex-wrap: wrap; }
.actions .coupon input { max-width: 220px; }
.actions .button,
.woocommerce button.button {
	background: var(--pl-bg);
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-r-2);
	padding: 12px 18px;
	font-family: inherit;
	font-size: var(--pl-t-small);
	font-weight: 600;
	color: var(--pl-ink);
	cursor: pointer;
}
.actions .button:hover { border-color: var(--pl-ink-4); }

/* ---------- Checkout ---------- */

.pl-checkout__note {
	font-family: var(--pl-mono);
	font-size: var(--pl-t-label);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pl-ink-3);
	margin: 0 0 var(--pl-s-6);
}

.pl-checkout__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 44px;
	align-items: start;
}

@media (min-width: 1024px) {
	.pl-checkout__grid { grid-template-columns: minmax(0, 1fr) 400px; }
}

.pl-checkout__main { min-width: 0; }
.pl-checkout__aside { min-width: 0; }
.pl-checkout__review { position: sticky; top: 100px; }

.woocommerce-checkout .col2-set { display: grid; gap: var(--pl-s-7); }
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 { width: auto; float: none; }

.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3,
#order_review_heading { font-size: var(--pl-t-h4); margin-bottom: var(--pl-s-4); }

/* Two fields to a row where they fit, one where they do not. */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: var(--pl-s-4);
}
/* Address, country and notes want the whole row. */
#billing_address_1_field,
#billing_address_2_field,
#billing_country_field,
#shipping_address_1_field,
#shipping_address_2_field,
#shipping_country_field,
#order_comments_field { grid-column: 1 / -1; }

.form-row { margin: 0; }
.form-row label { font-size: var(--pl-t-small); }
.required { color: var(--pl-err); text-decoration: none; }

#order_review {
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-r-3);
	padding: var(--pl-s-5);
	background: var(--pl-bg-2);
	margin-top: var(--pl-s-4);
}
#order_review .shop_table { border: 0; width: 100%; }
#order_review .shop_table th,
#order_review .shop_table td {
	background: transparent;
	padding: var(--pl-s-3) 0;
	border-bottom: 1px solid var(--pl-line);
}
#order_review .shop_table .product-name { padding-right: var(--pl-s-4); }
#order_review .shop_table .product-total,
#order_review .shop_table td[data-title="Subtotal"],
#order_review .shop_table td[data-title="Total"] { text-align: right; white-space: nowrap; }
#order_review .shop_table .variation {
	display: block;
	margin-top: 4px;
	font-size: var(--pl-t-small);
	color: var(--pl-ink-3);
}
#order_review .shop_table .variation dt,
#order_review .shop_table .variation dd { display: inline; margin: 0; }
#order_review .shop_table .variation dd + dt::before { content: " · "; }
#order_review .order-total th,
#order_review .order-total td { border-bottom: 0; font-size: var(--pl-t-body-l); font-weight: 700; }

.woocommerce-checkout-payment {
	background: var(--pl-bg);
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-r-3);
	padding: var(--pl-s-4);
	margin-top: var(--pl-s-5);
}
.wc_payment_methods { list-style: none; margin: 0; padding: 0; }
.wc_payment_method label {
	font-size: var(--pl-t-body);
	font-weight: 600;
	color: var(--pl-ink);
	display: inline-flex;
	align-items: center;
	gap: var(--pl-s-2);
	margin: 0;
}
.wc_payment_method .payment_box {
	background: var(--pl-blue-50);
	border: 1px solid var(--pl-blue-100);
	border-radius: var(--pl-r-2);
	padding: var(--pl-s-4);
	margin-top: var(--pl-s-3);
	font-size: var(--pl-t-small);
	color: var(--pl-ink-2);
}
/* Keep the payment copy to a readable measure; the box itself spans the
   column, but the sentences inside should not run the full width. */
.wc_payment_method .payment_box p { margin: 0; font-size: var(--pl-t-small); max-width: 72ch; }
.wc_payment_method label { max-width: 72ch; }
#place_order {
	width: 100%;
	background: var(--pl-blue);
	color: #fff;
	border: 0;
	border-radius: var(--pl-r-2);
	padding: 16px 24px;
	font-family: inherit;
	font-size: var(--pl-t-body);
	font-weight: 600;
	cursor: pointer;
	margin-top: var(--pl-s-4);
}
#place_order:hover { background: var(--pl-blue-700); }

/* ---------- Order received ---------- */

.pl-thanks { padding-block: var(--pl-s-7) var(--pl-sec); }
.pl-thanks__head { margin-bottom: var(--pl-s-7); }
.pl-thanks__meta { display: flex; align-items: center; gap: var(--pl-s-3); flex-wrap: wrap; margin: 0 0 var(--pl-s-4); }
.pl-thanks__status {
	font-family: var(--pl-mono);
	font-size: var(--pl-t-label);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 5px 9px;
	border-radius: var(--pl-r-1);
}
.pl-thanks__status.is-pending { color: var(--pl-warn); background: var(--pl-warn-bg); }
.pl-thanks__status.is-paid { color: var(--pl-ok); background: var(--pl-ok-bg); }
.pl-thanks__order { font-family: var(--pl-mono); font-size: var(--pl-t-data); color: var(--pl-ink-3); }
.pl-thanks__title { font-size: var(--pl-t-h1); margin: 0; max-width: 24ch; }
.pl-thanks__intro { margin: var(--pl-s-4) 0 0; max-width: 58ch; font-size: var(--pl-t-body-l); }

.pl-thanks__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--pl-s-6);
	align-items: start;
}

@media (min-width: 1024px) {
	.pl-thanks__grid { grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr); gap: var(--pl-s-7); }
}

/* Steps card */
.pl-steps { border: 1px solid var(--pl-blue); border-radius: var(--pl-r-3); overflow: hidden; }
.pl-steps__head {
	background: var(--pl-blue);
	color: #fff;
	font-family: var(--pl-mono);
	font-size: var(--pl-t-label);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 500;
	padding: var(--pl-s-4) var(--pl-s-5);
	margin: 0;
}
.pl-steps__list { list-style: none; margin: 0; padding: 0; }
.pl-step {
	display: flex;
	gap: var(--pl-s-4);
	padding: var(--pl-s-5);
	border-bottom: 1px solid var(--pl-line-2);
}
.pl-step:last-child { border-bottom: 0; }
.pl-step__num {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--pl-blue-50);
	color: var(--pl-blue);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--pl-mono);
	font-size: 11px;
	font-weight: 600;
}
.pl-step__body { min-width: 0; flex: 1; }
.pl-step__title { font-size: var(--pl-t-body); margin: 0 0 4px; }
.pl-step__text { font-size: var(--pl-t-small); line-height: 1.55; margin: 0 0 var(--pl-s-4); }
.pl-step .pl-copy { background: var(--pl-bg-2); }
.pl-copy__field { display: grid; gap: 3px; min-width: 0; }

.pl-steps__warn {
	display: flex;
	gap: var(--pl-s-3);
	padding: var(--pl-s-4) var(--pl-s-5);
	border-top: 1px solid var(--pl-line-2);
	font-size: var(--pl-t-small);
	color: var(--pl-ink-3);
	margin: 0;
}

/* Timeline */
.pl-timeline {
	margin-top: var(--pl-s-5);
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-r-3);
	padding: var(--pl-s-5);
}
.pl-timeline__list { list-style: none; margin: var(--pl-s-4) 0 0; padding: 0 0 0 var(--pl-s-5); position: relative; }
.pl-timeline__list::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 6px;
	bottom: 6px;
	width: 1px;
	background: var(--pl-line);
}
.pl-timeline__item { position: relative; padding-bottom: var(--pl-s-5); }
.pl-timeline__item:last-child { padding-bottom: 0; }
.pl-timeline__item::before {
	content: "";
	position: absolute;
	left: calc(var(--pl-s-5) * -1);
	top: 5px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--pl-bg);
	border: 1px solid var(--pl-line);
}
.pl-timeline__item.is-done::before { background: var(--pl-blue); border-color: var(--pl-blue); }
.pl-timeline__item.is-current::before { background: var(--pl-warn); border-color: var(--pl-warn); }
.pl-timeline__title { display: block; font-size: var(--pl-t-small); font-weight: 600; color: var(--pl-ink); }
.pl-timeline__detail { display: block; font-size: 12px; color: var(--pl-ink-3); margin-top: 2px; }

/* Order card */
.pl-ordercard { border: 1px solid var(--pl-line); border-radius: var(--pl-r-3); overflow: hidden; }
.pl-ordercard__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pl-s-3);
	padding: var(--pl-s-4);
	border-bottom: 1px solid var(--pl-line);
}
.pl-ordercard__items { padding: 0 var(--pl-s-4); }
.pl-orderitem {
	display: flex;
	justify-content: space-between;
	gap: var(--pl-s-4);
	padding: var(--pl-s-4) 0;
	border-bottom: 1px solid var(--pl-line-2);
}
.pl-orderitem__name { display: block; font-size: var(--pl-t-small); font-weight: 600; color: var(--pl-ink); }
.pl-orderitem__meta { display: block; font-family: var(--pl-mono); font-size: 11px; color: var(--pl-ink-3); margin-top: 3px; }
.pl-orderitem__total { font-family: var(--pl-mono); font-size: var(--pl-t-small); color: var(--pl-ink); white-space: nowrap; }

.pl-ordercard__totals { padding: var(--pl-s-4); display: grid; gap: var(--pl-s-2); }
.pl-ordercard__row {
	display: flex;
	justify-content: space-between;
	gap: var(--pl-s-4);
	font-size: var(--pl-t-small);
	color: var(--pl-ink-2);
}
.pl-ordercard__value { font-family: var(--pl-mono); color: var(--pl-ink); }
.pl-ordercard__due {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--pl-s-4);
	padding: var(--pl-s-4);
	border-top: 1px solid var(--pl-line);
	font-size: var(--pl-t-body-l);
	font-weight: 700;
}
.pl-ordercard__duevalue { font-family: var(--pl-mono); font-size: 21px; }

.pl-shipcard,
.pl-thanks__ruo {
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-r-3);
	padding: var(--pl-s-4);
	margin-top: var(--pl-s-4);
}
.pl-shipcard address { font-style: normal; font-size: var(--pl-t-small); line-height: 1.6; color: var(--pl-ink-2); margin-top: var(--pl-s-3); }
.pl-shipcard__note {
	margin: var(--pl-s-3) 0 0;
	padding-top: var(--pl-s-3);
	border-top: 1px solid var(--pl-line-2);
	font-family: var(--pl-mono);
	font-size: 11px;
	color: var(--pl-ink-4);
}
.pl-thanks__ruo { background: var(--pl-blue-50); border-color: var(--pl-blue-100); border-left: 3px solid var(--pl-blue); }
.pl-thanks__ruo .pl-label { color: var(--pl-blue); }
.pl-thanks__ruo p { font-size: var(--pl-t-small); line-height: 1.55; color: var(--pl-ink-2); margin: var(--pl-s-2) 0 0; }

/* ---------- e-Transfer panel ---------- */

.pl-etransfer {
	border: 1px solid var(--pl-blue-100);
	background: var(--pl-blue-50);
	border-radius: var(--pl-r-4);
	padding: var(--pl-s-6);
	margin-bottom: var(--pl-s-7);
}
.pl-etransfer__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--pl-s-4);
	margin-bottom: var(--pl-s-5);
}
.pl-etransfer__title { font-size: var(--pl-t-h3); margin: var(--pl-s-2) 0 0; }
.pl-etransfer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: var(--pl-s-4);
	margin-bottom: var(--pl-s-5);
}
.pl-etransfer__field .pl-label { display: block; margin-bottom: var(--pl-s-2); }
.pl-etransfer__steps {
	list-style: decimal;
	padding-left: var(--pl-s-5);
	display: grid;
	gap: var(--pl-s-2);
	margin-bottom: var(--pl-s-5);
}
.pl-etransfer__steps li { font-size: var(--pl-t-small); color: var(--pl-ink-2); }
.pl-etransfer__fine { margin-top: var(--pl-s-4); font-size: var(--pl-t-small); color: var(--pl-ink-3); }
.pl-etransfer__done { font-size: var(--pl-t-body-l); color: var(--pl-ok); margin: 0; }

/* ---------- Order received and account ---------- */

.woocommerce-order,
.woocommerce-account .woocommerce { padding-block: var(--pl-s-7) var(--pl-sec); }
.woocommerce-thankyou-order-received {
	font-size: var(--pl-t-h2);
	font-weight: 700;
	color: var(--pl-ink);
	letter-spacing: -0.025em;
	margin-bottom: var(--pl-s-6);
}
ul.woocommerce-order-overview {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--pl-s-4);
	padding: var(--pl-s-5);
	margin: 0 0 var(--pl-s-6);
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-r-3);
	background: var(--pl-bg-2);
}
ul.woocommerce-order-overview li {
	font-family: var(--pl-mono);
	font-size: var(--pl-t-label);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pl-ink-3);
}
ul.woocommerce-order-overview li strong {
	display: block;
	margin-top: var(--pl-s-2);
	font-family: var(--pl-sans);
	font-size: var(--pl-t-body);
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--pl-ink);
}

/* ---------- Sign in ---------- */

.pl-login {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--pl-s-6);
	align-items: start;
	padding-block: var(--pl-s-6) 0;
}

@media (min-width: 1024px) {
	.pl-login { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pl-s-7); }
}

.pl-login__card {
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-r-4);
	padding: var(--pl-s-6);
	background: var(--pl-bg);
}
.pl-login__card--tint { background: var(--pl-bg-2); }
.pl-login__title { font-size: 28px; letter-spacing: -0.025em; margin: var(--pl-s-3) 0 0; }
.pl-login__intro { margin: var(--pl-s-3) 0 0; font-size: var(--pl-t-small); line-height: 1.6; }
.pl-login__card form { margin-top: var(--pl-s-5); display: grid; gap: var(--pl-s-4); }
.pl-login__pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--pl-s-4); }
.pl-login__row { display: flex; align-items: center; justify-content: space-between; gap: var(--pl-s-4); flex-wrap: wrap; }
.pl-login__forgot { font-size: var(--pl-t-small); color: var(--pl-blue); }

.pl-check { display: flex; align-items: flex-start; gap: var(--pl-s-2); margin: 0; font-size: var(--pl-t-small); color: var(--pl-ink-2); font-weight: 400; }
.pl-check input { width: auto; margin: 2px 0 0; flex-shrink: 0; }
.pl-check--block { line-height: 1.5; }

/* ---------- Account ---------- */

.woocommerce-account .woocommerce {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--pl-s-6);
	align-items: start;
}

@media (min-width: 1024px) {
	.woocommerce-account .woocommerce { grid-template-columns: 244px minmax(0, 1fr); gap: var(--pl-s-8); }
}

/* The login screen is its own two-card layout, not the account rail. */
.woocommerce-account .woocommerce:has(.pl-login) { display: block; }

.pl-account__who {
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-r-2);
	padding: var(--pl-s-4);
	margin-bottom: var(--pl-s-4);
}
.pl-account__name { font-size: var(--pl-t-body); font-weight: 700; color: var(--pl-ink); margin: 0; }
.pl-account__line { font-family: var(--pl-mono); font-size: var(--pl-t-data); color: var(--pl-ink-3); margin: 4px 0 0; }

.woocommerce-MyAccount-navigation ul { display: grid; gap: var(--pl-s-2); margin: 0; padding: 0; list-style: none; }
.woocommerce-MyAccount-navigation a {
	display: block;
	padding: 12px 14px;
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-r-2);
	font-size: var(--pl-t-small);
	color: var(--pl-ink-2);
	text-decoration: none;
	background: var(--pl-bg);
}
.woocommerce-MyAccount-navigation a:hover { border-color: var(--pl-ink-4); color: var(--pl-ink); text-decoration: none; }
.woocommerce-MyAccount-navigation .is-active a {
	background: var(--pl-blue-50);
	border-color: var(--pl-blue);
	color: var(--pl-blue);
	font-weight: 600;
}

.pl-orders__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--pl-s-4);
	flex-wrap: wrap;
	padding-bottom: var(--pl-s-4);
	border-bottom: 1px solid var(--pl-line);
	margin-bottom: var(--pl-s-4);
}
.pl-orders__title { font-size: var(--pl-t-h2); margin: 0; }
.pl-orders__count { font-family: var(--pl-mono); font-size: var(--pl-t-data); color: var(--pl-ink-3); margin: 0; }

.pl-orders__list { display: grid; }
.pl-orderrow {
	display: flex;
	align-items: center;
	gap: var(--pl-s-4);
	flex-wrap: wrap;
	padding: var(--pl-s-5) 0;
	border-bottom: 1px solid var(--pl-line-2);
}
.pl-orderrow__main { flex: 1 1 220px; min-width: 0; }
.pl-orderrow__ref { display: flex; align-items: center; gap: var(--pl-s-3); flex-wrap: wrap; margin: 0; }
.pl-orderrow__num { font-family: var(--pl-mono); font-size: var(--pl-t-small); font-weight: 600; color: var(--pl-ink); }
.pl-orderrow__status {
	font-family: var(--pl-mono);
	font-size: var(--pl-t-label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 3px 7px;
	border-radius: var(--pl-r-1);
	background: var(--pl-bg-3);
	color: var(--pl-ink-3);
}
.pl-orderrow__status.is-on-hold,
.pl-orderrow__status.is-pending { background: var(--pl-warn-bg); color: var(--pl-warn); }
.pl-orderrow__status.is-completed,
.pl-orderrow__status.is-processing { background: var(--pl-ok-bg); color: var(--pl-ok); }
.pl-orderrow__status.is-cancelled,
.pl-orderrow__status.is-failed,
.pl-orderrow__status.is-refunded { background: var(--pl-err-bg); color: var(--pl-err); }
.pl-orderrow__meta { font-family: var(--pl-mono); font-size: 11px; color: var(--pl-ink-3); margin: 5px 0 0; }
.pl-orderrow__total { font-family: var(--pl-mono); font-size: var(--pl-t-body); font-weight: 600; color: var(--pl-ink); }

.pl-orders__alert {
	margin-top: var(--pl-s-6);
	background: var(--pl-warn-bg);
	border: 1px solid color-mix(in srgb, var(--pl-warn) 20%, transparent);
	border-radius: var(--pl-r-3);
	padding: var(--pl-s-5);
}
.pl-orders__alerttitle {
	font-family: var(--pl-mono);
	font-size: var(--pl-t-label);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pl-warn);
	margin: 0 0 var(--pl-s-2);
}
.pl-orders__alert p { font-size: var(--pl-t-small); color: var(--pl-ink-2); margin: 0; }

/* ---------- Order detail ---------- */

.pl-vieworder__head { padding-bottom: var(--pl-s-4); border-bottom: 1px solid var(--pl-line); margin-bottom: var(--pl-s-5); }
.pl-vieworder__title { font-size: var(--pl-t-h2); margin: 0; }
.pl-vieworder__steps { margin-bottom: var(--pl-s-5); }
.pl-vieworder__copyset { display: grid; gap: var(--pl-s-3); padding: var(--pl-s-5); }
.pl-vieworder__card { margin-bottom: var(--pl-s-5); }
.pl-vieworder__addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: var(--pl-s-4);
}
.pl-vieworder__addresses .pl-shipcard { margin-top: 0; }

/* WooCommerce marks the status words in its own copy; the theme prints the
   status as a badge instead, so the highlight is not wanted. */
.woocommerce-account mark { background: transparent; color: inherit; font-weight: 600; }

/* ---------- Breakpoints ---------- */

@media (max-width: 1023px) {
	.pl-pdp__layout { grid-template-columns: minmax(0, 1fr); gap: var(--pl-s-6); }
	.pl-pdp__gallery { position: static; max-width: 460px; }
	.woocommerce-checkout .col2-set { grid-template-columns: 1fr; }

	/* Filters become a panel: set several, apply once. Reloading and
	   scrolling back up between each choice is the thing to avoid. */
	.pl-filterbar { display: flex; }

	.pl-shop__filters {
		position: fixed;
		inset: 0;
		z-index: 60;
		background: var(--pl-bg);
		display: flex;
		flex-direction: column;
		transform: translateY(100%);
		visibility: hidden;
		transition: transform 200ms ease, visibility 200ms ease;
	}
	.pl-shop__filters.is-open { transform: translateY(0); visibility: visible; }

	.pl-filters__head {
		align-items: center;
		padding: var(--pl-s-4) max(18px, 5%);
		margin-bottom: 0;
		flex-shrink: 0;
	}
	.pl-filters__title { font-size: var(--pl-t-body); text-transform: none; letter-spacing: -0.01em; color: var(--pl-ink); font-family: var(--pl-sans); font-weight: 700; }
	.pl-filters__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		margin-right: -10px;
		background: transparent;
		border: 0;
		font-size: 26px;
		line-height: 1;
		color: var(--pl-ink-3);
		cursor: pointer;
	}

	.pl-filters__scroll {
		flex: 1;
		overflow-y: auto;
		padding: var(--pl-s-5) max(18px, 5%) var(--pl-s-6);
		-webkit-overflow-scrolling: touch;
	}

	/* Clear on the left, apply on the right: the destructive action sits
	   away from the thumb that is reaching for the primary one. */
	.pl-filters__apply {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		gap: var(--pl-s-3);
		align-items: center;
		flex-shrink: 0;
		padding: var(--pl-s-4) max(18px, 5%);
		padding-bottom: max(var(--pl-s-4), env(safe-area-inset-bottom));
		border-top: 1px solid var(--pl-line);
		background: var(--pl-bg);
	}
	.pl-filters__reset { white-space: nowrap; }
	.pl-filters__submit { width: 100%; }

	/* The header keeps the title and close button; clearing lives in the
	   footer beside apply, where the thumb already is. */
	.pl-filters__head .pl-filters__clear { display: none; }

	/* Larger hit areas once these are the primary controls. */
	.pl-filters__item { padding: 12px 10px; font-size: var(--pl-t-body); }
	.pl-filters__chips .pl-chip { min-height: 44px; }
}

html.pl-noscroll,
html.pl-noscroll body { overflow: hidden; }

@media (max-width: 767px) {
	.woocommerce ul.products,
	ul.products,
	.pl-prodgrid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 165px), 1fr)); gap: var(--pl-s-3); }

	.pl-prodcard__body { padding: var(--pl-s-3); gap: var(--pl-s-2); }
	.pl-prodcard__title { font-size: var(--pl-t-body); }
	.pl-shop__toolbar { flex-direction: column; align-items: flex-start; }
	.pl-shop__sort { width: 100%; }
	.pl-shop__sort select { flex: 1; min-width: 0; }

	/* Data tables become stacked cards. */
	.shop_table,
	.pl-coa-table { border: 0; }
	.shop_table thead,
	.pl-coa-table thead { display: none; }
	.shop_table tr,
	.pl-coa-table tr {
		display: block;
		border: 1px solid var(--pl-line);
		border-radius: var(--pl-r-3);
		padding: var(--pl-s-3);
		margin-bottom: var(--pl-s-3);
		background: var(--pl-bg);
	}
	.shop_table td,
	.pl-coa-table td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--pl-s-4);
		padding: var(--pl-s-2) 0;
		border-bottom: 1px solid var(--pl-line-2);
		text-align: right;
	}
	.shop_table td:last-child,
	.pl-coa-table td:last-child { border-bottom: 0; }
	.shop_table td::before,
	.pl-coa-table td::before {
		content: attr(data-label);
		font-family: var(--pl-mono);
		font-size: var(--pl-t-label);
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--pl-ink-4);
		text-align: left;
	}
	.shop_table td.product-remove::before { content: none; }

	.cart_totals { position: static; }
	.pl-etransfer { padding: var(--pl-s-4); }

	/* Cart rows stack: the item block keeps its shape, the three numeric
	   columns become labelled rows. */
	.pl-cart__head { display: none; }
	.pl-cart__row { grid-template-columns: minmax(0, 1fr); gap: var(--pl-s-3); }
	.pl-cart__unit,
	.pl-cart__qty,
	.pl-cart__total {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--pl-s-4);
		padding-top: var(--pl-s-3);
		border-top: 1px solid var(--pl-line-2);
		text-align: left;
	}
	.pl-cart__unit::before,
	.pl-cart__qty::before,
	.pl-cart__total::before {
		content: attr(data-label);
		font-family: var(--pl-mono);
		font-size: var(--pl-t-label);
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--pl-ink-4);
	}
	/* The stacked row already carries a "Unit" label, so the caption under
	   the price is redundant and would sit oddly at the far right. */
	.pl-cart__unitnote { display: none; }
	.pl-cart__actions { flex-direction: column; align-items: stretch; }
	.pl-cart__coupon input { max-width: none; flex: 1; }
}
