/**
 * Catalogue: page head, filter rail, toolbar, empty state.
 */

.pl-shop-head { margin-bottom: var(--pl-space-6); }

.pl-shop-title {
	font-size: 1.75rem;
	font-weight: 800;
	margin-bottom: 0.25rem;
}

@media (min-width: 48rem) {
	.pl-shop-title { font-size: 2.25rem; }
}

/* ---- filter rail ---- */

.pl-filters {
	display: flex;
	flex-direction: column;
	gap: var(--pl-space-5);
	padding: var(--pl-space-5);
	background: var(--pl-bg-alt);
	border: 1px solid var(--pl-border-light);
	border-radius: var(--pl-radius-lg);
	align-self: start;
}

@media (min-width: 64rem) {
	.pl-filters {
		position: sticky;
		top: calc(var(--pl-header-h) + 1rem);
		max-height: calc(100vh - var(--pl-header-h) - 2rem);
		overflow-y: auto;
	}
}

.pl-filters__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

.pl-filters__title {
	font-size: var(--pl-fs-xs);
	font-weight: 700;
	letter-spacing: var(--pl-track-eyebrow);
	text-transform: uppercase;
	color: var(--pl-text-primary);
}

.pl-filters__group {
	border: 0;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.pl-check {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--pl-fs-sm);
	color: var(--pl-text-secondary);
	cursor: pointer;
}

.pl-check input {
	width: 1rem;
	height: 1rem;
	accent-color: var(--pl-primary-ink);
	flex: none;
}

.pl-check__count {
	margin-inline-start: auto;
	font-size: var(--pl-fs-xs);
	color: var(--pl-text-muted);
	font-variant-numeric: tabular-nums;
}

/* Category navigation, shown instead of checkboxes on a term archive. */
.pl-catlink {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4375rem 0.5rem;
	margin-inline: -0.5rem;
	border-radius: var(--pl-radius);
	font-size: var(--pl-fs-sm);
	color: var(--pl-text-secondary);
	transition: background-color var(--pl-dur-fast) var(--pl-ease), color var(--pl-dur-fast) var(--pl-ease);
}

.pl-catlink:hover {
	background: var(--pl-bg-white);
	color: var(--pl-primary-ink);
}

.pl-catlink.is-active {
	background: var(--pl-bg-white);
	color: var(--pl-primary-ink);
	font-weight: 700;
	box-shadow: inset 2px 0 0 var(--pl-primary);
}

.pl-range {
	width: 100%;
	accent-color: var(--pl-primary-ink);
}

/* ---- toolbar ---- */

.pl-shop-toolbar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.625rem;
	margin-bottom: var(--pl-space-5);
}

.pl-shop-toolbar .pl-label { margin: 0; white-space: nowrap; }

.pl-shop-toolbar .pl-select {
	width: auto;
	min-width: 11rem;
	padding-block: 0.5rem;
	font-size: var(--pl-fs-sm);
}

/* ---- empty state ---- */

.pl-empty {
	padding: var(--pl-space-12) var(--pl-space-4);
	text-align: center;
	color: var(--pl-text-muted);
	font-size: var(--pl-fs-body);
	border: 1px dashed var(--pl-border-light);
	border-radius: var(--pl-radius-lg);
}

/* ---- breadcrumb ---- */

.pl-breadcrumb {
	padding-block: var(--pl-space-4);
	font-size: var(--pl-fs-xs);
	color: var(--pl-text-muted);
}

.pl-breadcrumb__sep { margin-inline: 0.375rem; opacity: 0.6; }
.pl-breadcrumb a:hover { color: var(--pl-primary-ink); }


/* ==========================================================================
   Product detail
   ========================================================================== */

.pl-woo { padding-block: var(--pl-space-8); }

.pl-pdp__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--pl-space-6);
	align-items: start;
}

@media (min-width: 48rem) {
	.pl-pdp__grid { grid-template-columns: 1fr 1fr; gap: var(--pl-space-8); }
}

@media (min-width: 64rem) {
	.pl-pdp__grid { grid-template-columns: 1.1fr 1fr; gap: var(--pl-space-12); }
}

.pl-pdp__figure {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 5;
	background: var(--pl-bg-alt);
	border: 1px solid var(--pl-border-light);
	border-radius: var(--pl-radius-lg);
	overflow: hidden;
}

.pl-pdp__figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pl-pdp__flags {
	position: absolute;
	inset-inline-start: 0.75rem;
	inset-block-start: 0.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.3125rem;
}

.pl-pdp__summary { display: flex; flex-direction: column; gap: var(--pl-space-4); }

.pl-pdp__cat {
	font-size: var(--pl-fs-xs);
	font-weight: 700;
	letter-spacing: var(--pl-track-eyebrow);
	text-transform: uppercase;
	color: var(--pl-text-muted);
}

.pl-pdp__cat a:hover { color: var(--pl-primary-ink); }

.pl-pdp__title {
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.25;
}

@media (min-width: 48rem) {
	.pl-pdp__title { font-size: 1.875rem; }
}

.pl-pdp__rating { display: flex; align-items: center; gap: 0.5rem; }

.pl-pdp__reviews { font-size: var(--pl-fs-xs); color: var(--pl-text-muted); }

.pl-pdp__price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.625rem;
	padding-block: var(--pl-space-2);
}

.pl-pdp__price .pl-price__now { font-size: 1.75rem; }
.pl-pdp__price .pl-price__was { font-size: var(--pl-fs-body); }

.pl-pdp__excerpt {
	font-size: var(--pl-fs-body);
	line-height: 1.65;
	color: var(--pl-text-secondary);
}

.pl-pdp__meta {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding-top: var(--pl-space-4);
	border-top: 1px solid var(--pl-border-light);
}

.pl-pdp__meta li {
	display: flex;
	gap: 0.75rem;
	font-size: var(--pl-fs-sm);
}

.pl-pdp__meta span { min-width: 7rem; color: var(--pl-text-muted); }
.pl-pdp__meta strong { color: var(--pl-text-primary); font-weight: 700; }

/* The trust strip is full-bleed in the footer; inside the summary it is inline. */
.pl-pdp__summary .pl-trust {
	border-top: 1px solid var(--pl-border-light);
	padding-block: var(--pl-space-5) 0;
}

.pl-pdp__summary .pl-trust .pl-container { padding-inline: 0; max-width: none; }
.pl-pdp__summary .pl-trust__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pl-space-4); }

/* ---- add to cart ---- */

.pl-pdp form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.625rem;
	margin: 0;
}

.pl-pdp .quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--pl-border-light);
	border-radius: var(--pl-radius);
	overflow: hidden;
	background: #fff;
}

.pl-pdp .quantity input[type="number"] {
	width: 4.5rem;
	padding: 0.6875rem 0.5rem;
	border: 0;
	text-align: center;
	font-size: var(--pl-fs-body);
	font-weight: 700;
	background: transparent;
}

.pl-pdp .quantity input:focus { outline: none; }

.pl-pdp .single_add_to_cart_button {
	flex: 1;
	min-width: 12rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.875rem 1.75rem;
	border: 0;
	border-radius: var(--pl-radius-full);
	background: var(--pl-primary);
	color: var(--pl-on-primary);
	font-size: var(--pl-fs-body);
	font-weight: 700;
	cursor: pointer;
	transition: background-color var(--pl-dur) var(--pl-ease);
}

.pl-pdp .single_add_to_cart_button:hover { background: var(--pl-primary-hover); }
.pl-pdp .single_add_to_cart_button:disabled { opacity: 0.55; cursor: not-allowed; }

.pl-pdp .stock.out-of-stock { color: var(--pl-sale); font-weight: 700; font-size: var(--pl-fs-sm); }

/* ---- tabs ---- */

.woocommerce-tabs { margin-top: var(--pl-space-12); }

.woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin: 0 0 var(--pl-space-6);
	padding: 0 0 0.5rem;
	border-bottom: 1px solid var(--pl-border-light);
}

/* Woo's own tab rule is `.woocommerce div.product .woocommerce-tabs ul.tabs li`
   (0,3,3) with bevelled ::before/::after shapes, so the theme's pill style needs
   a heavier selector to win. */
.woocommerce div.product.pl-pdp .woocommerce-tabs ul.tabs::before,
.woocommerce div.product.pl-pdp .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product.pl-pdp .woocommerce-tabs ul.tabs li::after { display: none; content: none; }

.woocommerce div.product.pl-pdp .woocommerce-tabs ul.tabs li {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.woocommerce div.product.pl-pdp .woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: 0.5rem 0.875rem;
	border-radius: var(--pl-radius-full);
	font-size: var(--pl-fs-sm);
	font-weight: 700;
	color: var(--pl-text-muted);
	text-shadow: none;
}

.woocommerce div.product.pl-pdp .woocommerce-tabs ul.tabs li a:hover { color: var(--pl-primary-ink); }

.woocommerce div.product.pl-pdp .woocommerce-tabs ul.tabs li.active a {
	background: var(--pl-bg-alt);
	color: var(--pl-primary-ink);
}

.woocommerce div.product.pl-pdp .woocommerce-tabs .panel { margin: 0; padding: 0; }
.woocommerce div.product.pl-pdp .woocommerce-tabs .panel > h2:first-child { font-size: 1.125rem; margin-bottom: var(--pl-space-4); }
.woocommerce div.product.pl-pdp .woocommerce-tabs .panel p { color: var(--pl-text-secondary); line-height: 1.7; }

/* ---- reviews ---- */

.pl-pdp .woocommerce-Reviews {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--pl-space-8);
	align-items: start;
}

@media (min-width: 64rem) {
	/* Existing reviews on the left, the form beside them. */
	.pl-pdp .woocommerce-Reviews { grid-template-columns: 1.3fr 1fr; gap: var(--pl-space-10); }
}

.pl-pdp .woocommerce-Reviews-title {
	font-size: 1.125rem;
	font-weight: 800;
	margin: 0 0 var(--pl-space-5);
}

.pl-pdp .woocommerce-noreviews {
	padding: var(--pl-space-5);
	border: 1px dashed var(--pl-border-mid);
	border-radius: var(--pl-radius);
	font-size: var(--pl-fs-sm);
	color: var(--pl-text-muted);
	text-align: center;
}

/* Review list. */
.pl-pdp ol.commentlist {
	display: flex;
	flex-direction: column;
	gap: var(--pl-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pl-pdp ol.commentlist li { margin: 0; }

.woocommerce div.product.pl-pdp .woocommerce-Reviews .comment_container {
	display: flex;
	gap: var(--pl-space-4);
	padding: var(--pl-space-5);
	background: var(--pl-bg-white);
	border: 1px solid var(--pl-border-light);
	border-radius: var(--pl-radius-lg);
}

.woocommerce div.product.pl-pdp .woocommerce-Reviews .comment_container img.avatar {
	position: static;
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--pl-radius-full);
	background: var(--pl-bg-alt);
	box-shadow: none;
}

.woocommerce div.product.pl-pdp .woocommerce-Reviews .comment-text {
	flex: 1;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
}

.woocommerce div.product.pl-pdp .woocommerce-Reviews .comment-text .star-rating {
	float: none;
	margin: 0 0 0.375rem;
	color: var(--pl-primary);
}

.woocommerce div.product.pl-pdp .woocommerce-Reviews .comment-text p.meta {
	margin: 0 0 0.5rem;
	font-size: var(--pl-fs-xs);
	color: var(--pl-text-muted);
}

.pl-pdp .woocommerce-review__author { font-weight: 700; color: var(--pl-text-primary); }
.pl-pdp .woocommerce-review__verified { color: var(--pl-success, #16a34a); }

.woocommerce div.product.pl-pdp .woocommerce-Reviews .comment-text .description p {
	margin: 0;
	font-size: var(--pl-fs-sm);
	color: var(--pl-text-secondary);
	line-height: 1.65;
}

/* Review form, styled as a card to match the contact form. */
.woocommerce div.product.pl-pdp #review_form_wrapper { margin: 0; }

.pl-pdp #review_form #respond {
	padding: var(--pl-space-6);
	background: var(--pl-bg-white);
	border: 1px solid var(--pl-border-light);
	border-radius: var(--pl-radius-lg);
	box-shadow: var(--pl-shadow-sm);
}

.pl-pdp #review_form .comment-reply-title {
	display: block;
	margin-bottom: var(--pl-space-2);
	font-size: 1.0625rem;
	font-weight: 800;
	color: var(--pl-text-primary);
}

.pl-pdp #review_form .comment-notes {
	margin: 0 0 var(--pl-space-5);
	font-size: var(--pl-fs-xs);
	color: var(--pl-text-muted);
}

.pl-pdp #review_form .comment-form {
	display: flex;
	flex-direction: column;
	gap: var(--pl-space-4);
}

.woocommerce div.product.pl-pdp #review_form .comment-form p,
.woocommerce div.product.pl-pdp #review_form .comment-form-rating {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	margin: 0;
	padding: 0;
}

.woocommerce div.product.pl-pdp #review_form .comment-form label {
	font-size: var(--pl-fs-sm);
	font-weight: 600;
	color: var(--pl-text-secondary);
}

.pl-pdp #review_form .required { color: var(--pl-sale); }

.woocommerce div.product.pl-pdp #review_form .comment-form input[type="text"],
.woocommerce div.product.pl-pdp #review_form .comment-form input[type="email"],
.woocommerce div.product.pl-pdp #review_form .comment-form textarea {
	width: 100%;
	padding: 0.6875rem 0.875rem;
	background: #fff;
	border: 1px solid var(--pl-border-light);
	border-radius: var(--pl-radius);
	font: inherit;
	font-size: var(--pl-fs-body);
	color: var(--pl-text-primary);
	transition: border-color var(--pl-dur-fast) var(--pl-ease), box-shadow var(--pl-dur-fast) var(--pl-ease);
}

.woocommerce div.product.pl-pdp #review_form .comment-form textarea { min-height: 7rem; resize: vertical; }

.woocommerce div.product.pl-pdp #review_form .comment-form input:focus,
.woocommerce div.product.pl-pdp #review_form .comment-form textarea:focus {
	outline: none;
	border-color: var(--pl-primary-ink);
	box-shadow: 0 0 0 3px rgb(216 27 96 / 0.30);
}

/* Star picker: Woo's icon-font stars, tinted gold. */
.woocommerce div.product.pl-pdp #review_form p.stars {
	display: inline-flex;
	margin: 0;
	font-size: 1.5rem;
	line-height: 1;
}

.woocommerce div.product.pl-pdp #review_form p.stars a {
	color: var(--pl-border-mid);
	transition: color var(--pl-dur-fast) var(--pl-ease);
}

.woocommerce div.product.pl-pdp #review_form p.stars:hover a,
.woocommerce div.product.pl-pdp #review_form p.stars.selected a.active,
.woocommerce div.product.pl-pdp #review_form p.stars.selected a:not(.active) { color: var(--pl-primary); }

.woocommerce div.product.pl-pdp #review_form p.stars a:hover ~ a,
.woocommerce div.product.pl-pdp #review_form p.stars.selected a.active ~ a { color: var(--pl-border-mid); }

/* Cookie-consent checkbox sits inline with its label. */
.woocommerce div.product.pl-pdp #review_form .comment-form-cookies-consent {
	flex-direction: row;
	align-items: flex-start;
	gap: 0.5rem;
}

.woocommerce div.product.pl-pdp #review_form .comment-form-cookies-consent input {
	flex: none;
	width: 1rem;
	height: 1rem;
	margin-top: 0.125rem;
	accent-color: var(--pl-primary);
}

.woocommerce div.product.pl-pdp #review_form .comment-form-cookies-consent label {
	font-weight: 400;
	font-size: var(--pl-fs-xs);
	color: var(--pl-text-muted);
}

.woocommerce div.product.pl-pdp #review_form .form-submit { margin-top: var(--pl-space-2); }

.woocommerce div.product.pl-pdp #review_form .form-submit input.submit {
	width: auto;
	align-self: flex-start;
	padding: 0.6875rem 1.5rem;
	border: 0;
	border-radius: var(--pl-radius-full);
	background: var(--pl-primary);
	color: var(--pl-on-primary);
	font-size: var(--pl-fs-sm);
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--pl-dur) var(--pl-ease);
}

.woocommerce div.product.pl-pdp #review_form .form-submit input.submit:hover { background: var(--pl-primary-hover); color: var(--pl-on-primary); }

/* ---- related ---- */

.related.products,
.upsells.products { margin-top: var(--pl-space-12); }

.related.products > h2,
.upsells.products > h2 {
	font-size: var(--pl-fs-h2);
	margin-bottom: var(--pl-space-6);
}

.related.products ul.products,
.upsells.products ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--pl-space-4);
	margin: 0;
	padding: 0;
}

@media (min-width: 48rem) {
	.related.products ul.products,
	.upsells.products ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--pl-space-6); }
}

/* WooCommerce's stylesheet adds a clearfix `::before`/`::after` with content to
   ul.products. Inside a grid those become anonymous grid items, so the first
   cell rendered empty and the last card wrapped to a new row. */
.related.products ul.products::before,
.related.products ul.products::after,
.upsells.products ul.products::before,
.upsells.products ul.products::after { display: none; content: none; }

/* Woo also floats each li.product at 22.05% width with percentage margins
   (48% + nth-child float on small screens). The grid handles sizing, so reset
   all of it; the card fills the cell. Specificity is kept above Woo's
   `.woocommerce-page ul.products[class*=columns-] li.product:nth-child(2n)`. */
.pl-woo .related.products ul.products li.product,
.pl-woo .upsells.products ul.products li.product,
.woocommerce .related.products ul.products li.product,
.woocommerce .upsells.products ul.products li.product {
	list-style: none;
	float: none !important;
	clear: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.related.products ul.products li.product > .pl-card,
.upsells.products ul.products li.product > .pl-card { flex: 1; width: 100%; }

/* Undo Woo's loop-item typography that leaks into the card. */
.woocommerce .related.products ul.products li.product h3,
.woocommerce .upsells.products ul.products li.product h3 { padding: 0; margin: 0; font-size: inherit; }

.woocommerce .related.products ul.products li.product a img,
.woocommerce .upsells.products ul.products li.product a img { margin: 0; box-shadow: none; }

/* ==========================================================================
   Cart and checkout
   ========================================================================== */

.woocommerce-cart-form { margin-bottom: var(--pl-space-8); }

.woocommerce table.shop_table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--pl-border-light);
	border-radius: var(--pl-radius-lg);
	overflow: hidden;
	font-size: var(--pl-fs-sm);
}

.woocommerce table.shop_table th {
	padding: 0.875rem 1rem;
	background: var(--pl-bg-alt);
	text-align: start;
	font-size: var(--pl-fs-xs);
	font-weight: 800;
	letter-spacing: var(--pl-track-eyebrow);
	text-transform: uppercase;
	color: var(--pl-text-muted);
	border-bottom: 1px solid var(--pl-border-light);
}

.woocommerce table.shop_table td {
	padding: 0.875rem 1rem;
	border-bottom: 1px solid var(--pl-border-light);
	vertical-align: middle;
	color: var(--pl-text-secondary);
}

.woocommerce table.shop_table tr:last-child td { border-bottom: 0; }

.woocommerce table.shop_table img { width: 3.5rem; height: auto; border-radius: var(--pl-radius-sm); }

.woocommerce table.shop_table .product-name a { font-weight: 700; color: var(--pl-text-primary); }
.woocommerce table.shop_table .product-name a:hover { color: var(--pl-primary-ink); }

.woocommerce a.remove {
	display: inline-grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: var(--pl-radius-full);
	background: var(--pl-bg-alt);
	color: var(--pl-text-muted);
	font-size: 1rem;
	line-height: 1;
	text-decoration: none;
}

.woocommerce a.remove:hover { background: var(--pl-sale); color: #fff; }

/* Tables must scroll rather than push the page sideways on phones. */
@media (max-width: 48rem) {
	.woocommerce table.shop_table { display: block; overflow-x: auto; white-space: nowrap; }
}

.cart_totals,
.woocommerce-checkout-review-order {
	padding: var(--pl-space-6);
	background: var(--pl-bg-alt);
	border: 1px solid var(--pl-border-light);
	border-radius: var(--pl-radius-lg);
}

.cart_totals h2,
.woocommerce-checkout-review-order h3,
.woocommerce-billing-fields h3,
.woocommerce-additional-fields h3 {
	font-size: 1.0625rem;
	margin-bottom: var(--pl-space-4);
}

.woocommerce .cart-collaterals { max-width: 26rem; margin-inline-start: auto; }

.wc-proceed-to-checkout { margin-top: var(--pl-space-4); }

.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.6875rem 1.25rem;
	border: 0;
	border-radius: var(--pl-radius-full);
	background: var(--pl-primary);
	color: var(--pl-on-primary);
	font-size: var(--pl-fs-sm);
	font-weight: 700;
	cursor: pointer;
	transition: background-color var(--pl-dur) var(--pl-ease);
}

.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button:hover { background: var(--pl-primary-hover); color: var(--pl-on-primary); }

.woocommerce .button.alt,
.woocommerce button.button.alt { background: var(--pl-primary); color: var(--pl-on-primary); }

.woocommerce .checkout-button { width: 100%; padding-block: 0.875rem; font-size: var(--pl-fs-body); }

/* ---- checkout form ---- */

.woocommerce form .form-row { display: flex; flex-direction: column; gap: 0.375rem; margin-bottom: var(--pl-space-4); }

.woocommerce form .form-row label {
	font-size: var(--pl-fs-sm);
	font-weight: 600;
	color: var(--pl-text-secondary);
}

.woocommerce form .form-row .required { color: var(--pl-sale); border: 0; }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
	width: 100%;
	padding: 0.6875rem 0.875rem;
	height: auto;
	background: #fff;
	border: 1px solid var(--pl-border-light);
	border-radius: var(--pl-radius);
	font-family: inherit;
	font-size: var(--pl-fs-body);
	color: var(--pl-text-primary);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	outline: none;
	border-color: var(--pl-primary);
	box-shadow: 0 0 0 3px rgb(216 27 96 / 0.30);
}

.woocommerce form .form-row.woocommerce-invalid input.input-text { border-color: var(--pl-sale); }

@media (min-width: 48rem) {
	.woocommerce .col2-set { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pl-space-8); }
	.woocommerce .col2-set .col-1,
	.woocommerce .col2-set .col-2 { width: auto; float: none; }
}

@media (min-width: 64rem) {
	#customer_details { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--pl-space-10); align-items: start; }
}

/* ---- notices ---- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice {
	padding: 0.875rem 1.125rem;
	margin-bottom: var(--pl-space-6);
	border: 1px solid var(--pl-border-light);
	border-radius: var(--pl-radius);
	background: var(--pl-bg-alt);
	font-size: var(--pl-fs-sm);
	list-style: none;
}

.woocommerce-message { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.woocommerce-info { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.woocommerce-error { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

/* WooCommerce marks each notice with a ::before glyph from its own icon font,
   which renders as a tofu box here. The padding it was positioned against is
   already overridden above, and the notices are colour-coded, so it goes. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce-notice::before { content: none; }

.woocommerce-message .button,
.woocommerce-info .button { margin-inline-start: 0.75rem; }

.woocommerce .coupon { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: var(--pl-space-4); }
.woocommerce .coupon input.input-text { flex: 1; min-width: 10rem; }

.woocommerce-cart .cart-empty { font-size: var(--pl-fs-body); }

/* WooCommerce ships `.woocommerce a.button.alt` (0,3,1) with its own purple.
   These selectors match that specificity so the brand gold wins instead. */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.checkout-button,
.woocommerce button#place_order {
	background-color: var(--pl-primary);
	color: var(--pl-on-primary);
	border-color: transparent;
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.checkout-button:hover,
.woocommerce button#place_order:hover {
	background-color: var(--pl-primary-hover);
	color: var(--pl-on-primary);
}

.woocommerce a.button.alt.disabled,
.woocommerce button.button.alt.disabled { background-color: var(--pl-border-mid); color: #fff; }

/* ---- cart layout ----
   WooCommerce floats .woocommerce-cart-form and .cart_totals at 48% each. With
   an outer cap on .cart-collaterals that compounded: 48% of 416px left the
   totals panel 200px wide and wrapped the checkout button onto four lines.
   Replaced with a full-width table and a right-aligned totals panel. */

.woocommerce-cart .woocommerce-cart-form {
	width: 100%;
	float: none;
}

.woocommerce-cart .woocommerce-cart-form table.shop_table { width: 100%; }

.woocommerce-cart .cart-collaterals {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: flex-start;
	gap: var(--pl-space-8);
	width: 100%;
	max-width: none;
	float: none;
	margin-inline-start: 0;
}

.woocommerce-cart .cart-collaterals::after { content: none; }

.woocommerce-cart .cart-collaterals .cross-sells {
	flex: 1 1 22rem;
	width: auto;
	float: none;
}

.woocommerce-cart .cart-collaterals .cart_totals {
	flex: 0 1 26rem;
	width: 100%;
	max-width: 26rem;
	float: none;
}

.woocommerce-cart .cart_totals table.shop_table { width: 100%; }

/* Give the product column the room it needs now the table is full width. */
.woocommerce-cart table.cart td.product-name { min-width: 14rem; }
.woocommerce-cart table.cart td.product-thumbnail { width: 5rem; }
.woocommerce-cart table.cart td.product-quantity { width: 8rem; }

.woocommerce-cart table.cart td.actions {
	padding: 1rem;
	background: var(--pl-bg-alt);
}

.woocommerce-cart table.cart td.actions .coupon { margin-bottom: 0; }

/* The button no longer needs to wrap; keep it on one line and full width. */
.woocommerce .checkout-button,
.woocommerce a.button.checkout-button {
	display: flex;
	width: 100%;
	padding-block: 0.875rem;
	font-size: var(--pl-fs-body);
	line-height: 1.25;
	text-align: center;
	white-space: nowrap;
}

@media (max-width: 48rem) {
	.woocommerce-cart .cart-collaterals .cart_totals { flex: 1 1 100%; max-width: none; }
}

/* ==========================================================================
   Checkout
   ========================================================================== */

.pl-checkout__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--pl-space-3);
	padding-bottom: var(--pl-space-5);
	margin-bottom: var(--pl-space-8);
	border-bottom: 1px solid var(--pl-border-light);
}

.pl-checkout__title {
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.2;
}

@media (min-width: 48rem) {
	.pl-checkout__title { font-size: 1.875rem; }
}

.pl-checkout__secure {
	display: inline-flex;
	align-items: center;
	gap: 0.4375rem;
	font-size: var(--pl-fs-xs);
	font-weight: 600;
	color: var(--pl-text-muted);
}

.pl-checkout__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--pl-space-6);
	align-items: start;
}

@media (min-width: 64rem) {
	.pl-checkout__grid { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--pl-space-8); }
}

.pl-checkout__main { display: flex; flex-direction: column; gap: var(--pl-space-6); min-width: 0; }

.pl-checkout__card {
	padding: var(--pl-space-6);
	background: var(--pl-bg-alt);
	border: 1px solid var(--pl-border-light);
	border-radius: var(--pl-radius-lg);
}

.pl-checkout__step {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: var(--pl-space-5);
	font-size: var(--pl-fs-sm);
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pl-text-primary);
}

.pl-checkout__num {
	display: grid;
	place-items: center;
	width: 1.375rem;
	height: 1.375rem;
	border-radius: var(--pl-radius-full);
	background: var(--pl-primary);
	color: var(--pl-on-primary);
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0;
}

/* ---- fields ---- */

.pl-checkout__fields .woocommerce-billing-fields__field-wrapper,
.pl-checkout__fields .woocommerce-shipping-fields__field-wrapper {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 var(--pl-space-4);
}

@media (min-width: 40rem) {
	.pl-checkout__fields .woocommerce-billing-fields__field-wrapper,
	.pl-checkout__fields .woocommerce-shipping-fields__field-wrapper { grid-template-columns: repeat(4, minmax(0, 1fr)); }

	.pl-checkout__fields .form-row-wide { grid-column: span 4; }
	.pl-checkout__fields .form-row-first,
	.pl-checkout__fields .form-row-last { grid-column: span 2; }
	.pl-checkout__fields .form-row-quarter { grid-column: span 1; }
}

.pl-checkout__fields .woocommerce-billing-fields > h3 { display: none; }
.pl-checkout__fields .form-row { float: none; width: auto; padding: 0; }

/* Country is fixed for this store; keep it posted but out of sight. */
/* WooCommerce styles #place_order by ID, which outranks a plain class, so this
   utility has to be authoritative or the button stays full width. */
.pl-visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	min-width: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
}

.pl-hide-label > label { visibility: hidden; }

@media (max-width: 40rem) {
	.pl-hide-label > label { display: none; }
}

/* ---- payment methods as cards ---- */

.pl-checkout .woocommerce-checkout-payment { background: transparent; border-radius: 0; }

.pl-checkout ul.wc_payment_methods {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--pl-space-3);
	margin: 0 0 var(--pl-space-4);
	padding: 0;
	list-style: none;
	border: 0;
}

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

.pl-checkout ul.wc_payment_methods li.wc_payment_method {
	margin: 0;
	padding: var(--pl-space-4);
	background: #fff;
	border: 1px solid var(--pl-border-light);
	border-radius: var(--pl-radius);
	transition: border-color var(--pl-dur-fast) var(--pl-ease), box-shadow var(--pl-dur-fast) var(--pl-ease);
}

.pl-checkout ul.wc_payment_methods li.wc_payment_method:hover { border-color: var(--pl-border-mid); }

/* :has is well supported now; the fallback is simply no highlight. */
.pl-checkout ul.wc_payment_methods li.wc_payment_method:has(input:checked) {
	border-color: var(--pl-primary);
	box-shadow: 0 0 0 2px rgb(216 27 96 / 0.25);
}

.pl-checkout ul.wc_payment_methods li label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--pl-fs-sm);
	font-weight: 700;
	color: var(--pl-text-primary);
	cursor: pointer;
}

.pl-checkout ul.wc_payment_methods li input[type="radio"] { accent-color: var(--pl-primary); }

.pl-checkout .payment_box {
	margin: 0.625rem 0 0;
	padding: 0;
	background: transparent;
	font-size: var(--pl-fs-xs);
	line-height: 1.5;
	color: var(--pl-text-muted);
}

.pl-checkout .payment_box::before { display: none; }

.pl-checkout__note {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin-top: var(--pl-space-4);
	padding: 0.75rem 0.875rem;
	background: #fff;
	border: 1px solid var(--pl-border-light);
	border-radius: var(--pl-radius);
	font-size: var(--pl-fs-xs);
	line-height: 1.5;
	color: var(--pl-text-muted);
}

.pl-checkout__note .pl-icon { flex: none; margin-top: 0.125rem; color: var(--pl-primary-ink); }

/* WooCommerce's own submit stays in the DOM for its script, but the visible
   control is the one in the summary panel. */
.pl-checkout .woocommerce-checkout-payment .form-row.place-order #place_order {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.pl-checkout .woocommerce-checkout-payment .form-row.place-order { margin: 0; padding: 0; }

/* ---- summary panel ---- */

.pl-checkout__aside { min-width: 0; }

@media (min-width: 64rem) {
	.pl-checkout__aside { position: sticky; top: calc(var(--pl-header-h) + 1rem); }
}

.pl-checkout__summary {
	padding: var(--pl-space-6);
	background: var(--pl-bg-alt);
	border: 1px solid var(--pl-border-light);
	border-radius: var(--pl-radius-lg);
}

.pl-checkout__summarytitle {
	padding-bottom: var(--pl-space-4);
	margin-bottom: var(--pl-space-4);
	border-bottom: 1px solid var(--pl-border-light);
	font-size: var(--pl-fs-sm);
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.woocommerce table.shop_table.pl-summary,
.pl-summary {
	width: 100%;
	border: 0;
	border-radius: 0;
	background: transparent;
	font-size: var(--pl-fs-sm);
}

.pl-summary tbody tr,
.pl-summary tfoot tr { border: 0; }

.woocommerce table.shop_table.pl-summary td,
.woocommerce table.shop_table.pl-summary th {
	padding: 0.4375rem 0;
	border: 0;
	background: transparent;
	text-transform: none;
	letter-spacing: 0;
	font-size: var(--pl-fs-sm);
	color: var(--pl-text-secondary);
}

.woocommerce table.shop_table.pl-summary tbody td { padding-block: 0.5rem; }

.pl-summary__item { line-height: 1.45; }
.pl-summary__name { font-weight: 600; color: var(--pl-text-primary); }
.pl-summary__qty { color: var(--pl-text-muted); }

.woocommerce table.shop_table.pl-summary .pl-summary__value,
.woocommerce table.shop_table.pl-summary tfoot td {
	text-align: end;
	white-space: nowrap;
	font-weight: 600;
	color: var(--pl-text-primary);
}

.woocommerce table.shop_table.pl-summary tfoot th { font-weight: 500; color: var(--pl-text-secondary); }

.pl-summary tbody + tfoot tr:first-child th,
.pl-summary tbody + tfoot tr:first-child td { padding-top: 0.875rem; border-top: 1px solid var(--pl-border-light); }

.pl-summary__free { color: var(--pl-lime-brand); font-weight: 800; letter-spacing: 0.04em; }

.woocommerce table.shop_table.pl-summary .pl-summary__row--total th,
.woocommerce table.shop_table.pl-summary .pl-summary__row--total td {
	padding-top: 0.875rem;
	border-top: 1px solid var(--pl-border-light);
	font-size: var(--pl-fs-body);
	font-weight: 800;
	color: var(--pl-text-primary);
}

.woocommerce table.shop_table.pl-summary .pl-summary__row--total td { font-size: 1.125rem; }

/* ---- pay button ---- */

.pl-checkout__pay {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-top: var(--pl-space-5);
	padding: 0.9375rem 1.25rem;
	border: 0;
	border-radius: var(--pl-radius-full);
	background: var(--pl-primary);
	color: var(--pl-on-primary);
	font-family: inherit;
	font-size: var(--pl-fs-body);
	font-weight: 800;
	cursor: pointer;
	transition: background-color var(--pl-dur) var(--pl-ease);
}

.pl-checkout__pay:hover { background: var(--pl-primary-hover); }
.pl-checkout__pay:disabled { opacity: 0.6; cursor: not-allowed; }

.pl-checkout__paynote {
	margin-top: 0.625rem;
	text-align: center;
	font-size: var(--pl-fs-xs);
	color: var(--pl-text-muted);
}

/* On narrow screens the summary reads better above the payment card. */
@media (max-width: 64rem) {
	.pl-checkout__aside { order: -1; }
	.pl-checkout__grid { display: flex; flex-direction: column; }
}

.pl-checkout__pay { gap: 0.375rem; }
.pl-checkout__paytotal { font-variant-numeric: tabular-nums; }

/* Nothing inside the checkout may push the page sideways on a phone. */
.pl-checkout, .pl-checkout__grid, .pl-checkout__main, .pl-checkout__aside { min-width: 0; max-width: 100%; }
.pl-checkout__summary { overflow: hidden; }

/* WooCommerce styles the payment block by ID (#payment), which outranks any
   class selector — hence the grey panel and the broken card grid. These match
   on the ID too so the theme's styling actually applies. */

.pl-checkout #payment {
	background: transparent;
	border-radius: 0;
	padding: 0;
}

.pl-checkout #payment ul.payment_methods {
	padding: 0;
	border: 0;
	background: transparent;
}

.pl-checkout #payment ul.payment_methods li {
	margin: 0;
	padding: var(--pl-space-4);
	background: #fff;
	border: 1px solid var(--pl-border-light);
	border-radius: var(--pl-radius);
	text-align: start;
	/* The whole card is clickable (see the checkout inline script). */
	cursor: pointer;
}

.pl-checkout #payment ul.payment_methods li:has(input:checked) {
	border-color: var(--pl-primary);
	box-shadow: 0 0 0 2px rgb(216 27 96 / 0.25);
}

.pl-checkout #payment ul.payment_methods li img { display: none; }

/* The description bubble: drop WooCommerce's tint and its pointer triangle. */
.pl-checkout #payment div.payment_box {
	width: auto;
	margin: 0.5rem 0 0;
	padding: 0;
	background: transparent;
	color: var(--pl-text-muted);
	font-size: var(--pl-fs-xs);
	line-height: 1.5;
}

.pl-checkout #payment div.payment_box::before,
.pl-checkout #payment div.payment_box::after { display: none !important; content: none !important; }

.pl-checkout #payment div.payment_box p { margin: 0; padding: 0; }

.pl-checkout #payment div.form-row { padding: 0; margin: 0; }

.pl-checkout .woocommerce-privacy-policy-text {
	margin-top: var(--pl-space-4);
	font-size: var(--pl-fs-xs);
	line-height: 1.55;
	color: var(--pl-text-muted);
}

.pl-checkout .woocommerce-privacy-policy-text p { margin: 0; }

/* Order notes are switched off, so the lone "Additional information" heading
   would otherwise sit under the address card with nothing beneath it. */
.pl-checkout .woocommerce-additional-fields { display: none; }

.pl-checkout #payment .place-order { padding: 0; margin: 0; }

/* The two methods were rendering reversed (bacs in column 2, cod in column 1).
   Reset any inherited placement/order so grid follows DOM order, and top-align
   them so the expanded description on the selected card does not stretch both. */
.pl-checkout #payment ul.payment_methods { align-items: start; }

.pl-checkout #payment ul.payment_methods li.wc_payment_method {
	order: 0;
	grid-column: auto;
	grid-row: auto;
	float: none;
	direction: ltr;
}

/* Column order was mirrored because the list inherits an RTL direction; on a
   grid the *container* direction decides column order, so it must be set here
   rather than on the items. */
.pl-checkout #payment ul.payment_methods { direction: ltr; }

/* Grid placement kept mirroring the two methods regardless of direction/order
   resets, so the list uses flex instead — it lays out strictly in DOM order and
   also copes with a third gateway being added later. */
.pl-checkout #payment ul.payment_methods {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pl-space-3);
}

.pl-checkout #payment ul.payment_methods li.wc_payment_method {
	flex: 1 1 15rem;
	min-width: 0;
}

/* Field widths are placed by field ID, not by WooCommerce's form-row-* classes.
   The country locale rewrites those classes after the checkout-fields filter,
   which left Full Name and Email at one column (160px) while City spanned four.
   IDs are stable and outrank the locale's classes. */
@media (min-width: 40rem) {
	.pl-checkout__fields #billing_first_name_field,
	.pl-checkout__fields #billing_email_field,
	.pl-checkout__fields #billing_city_field { grid-column: span 2; }

	.pl-checkout__fields #billing_address_1_field,
	.pl-checkout__fields #billing_phone_field { grid-column: span 4; }

	.pl-checkout__fields #billing_state_field,
	.pl-checkout__fields #billing_postcode_field { grid-column: span 1; }
}

/* Select2 replaces the state <select>; match it to the theme's inputs. */
.pl-checkout .select2-container--default .select2-selection--single {
	height: auto;
	padding: 0.5rem 0.875rem;
	border: 1px solid var(--pl-border-light);
	border-radius: var(--pl-radius);
	background: #fff;
}

.pl-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 1.6;
	padding: 0;
	color: var(--pl-text-primary);
}

.pl-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; }

/* The grid area was already 2 columns wide, but WooCommerce sets width:47% on
   .form-row-first / .form-row-last (a float-era rule), shrinking the field
   inside its area — 47% of 336px is the 160px that looked "short". Its selector
   is `.woocommerce form .form-row-first`, so this needs one more class to win. */
.pl-checkout .pl-checkout__fields .form-row,
.pl-checkout .pl-checkout__fields .form-row-first,
.pl-checkout .pl-checkout__fields .form-row-last,
.pl-checkout .pl-checkout__fields .form-row-wide,
.pl-checkout .pl-checkout__fields .form-row-quarter {
	width: 100%;
	float: none;
	margin-inline: 0;
	padding: 0;
}

/* ==========================================================================
   Shipment tracking
   ========================================================================== */

.pl-track { margin-bottom: var(--pl-space-8); }

.pl-track__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--pl-space-4);
	padding: var(--pl-space-5) var(--pl-space-6);
	margin-bottom: var(--pl-space-5);
	background: var(--pl-bg-alt);
	border: 1px solid var(--pl-border-light);
	border-radius: var(--pl-radius-lg);
}

.pl-track__id { display: flex; align-items: center; gap: 0.875rem; min-width: 0; }

.pl-track__check {
	flex: none;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--pl-radius-full);
	background: rgb(216 27 96 / 0.18);
	color: var(--pl-primary-ink);
}

.pl-track__order { font-size: 1.125rem; font-weight: 800; line-height: 1.25; }

@media (min-width: 48rem) {
	.pl-track__order { font-size: 1.375rem; }
}

.pl-track__date { margin-top: 0.125rem; font-size: var(--pl-fs-xs); color: var(--pl-text-muted); }

.pl-track__badges { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.pl-track__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.3125rem 0.6875rem;
	border-radius: var(--pl-radius-full);
	background: #fff;
	border: 1px solid var(--pl-border-light);
	font-size: var(--pl-fs-xs);
	color: var(--pl-text-muted);
	white-space: nowrap;
}

.pl-track__badge strong { color: var(--pl-text-primary); font-weight: 700; }

.pl-track__badge--pay { background: #fffbeb; border-color: #fde68a; }
.pl-track__badge--pay strong { color: #92400e; }

.pl-track__panel {
	padding: var(--pl-space-6);
	background: var(--pl-bg-alt);
	border: 1px solid var(--pl-border-light);
	border-radius: var(--pl-radius-lg);
}

.pl-track__label {
	margin-bottom: var(--pl-space-6);
	font-size: var(--pl-fs-xs);
	font-weight: 800;
	letter-spacing: var(--pl-track-eyebrow);
	text-transform: uppercase;
	color: var(--pl-text-primary);
}

/* ---- stepper ---- */

.pl-track__steps {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 0;
	margin: 0;
	padding: 0;
	counter-reset: step;
}

.pl-track__step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	text-align: center;
	list-style: none;
	min-width: 0;
}

/* Connector between dots, drawn behind them. */
.pl-track__step::before {
	content: "";
	position: absolute;
	top: 1.0625rem;
	inset-inline-start: -50%;
	width: 100%;
	height: 2px;
	background: var(--pl-border-light);
	z-index: 0;
}

.pl-track__step:first-child::before { display: none; }
.pl-track__step.is-done::before,
.pl-track__step.is-current::before { background: var(--pl-primary); }

.pl-track__dot {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 2.125rem;
	height: 2.125rem;
	border-radius: var(--pl-radius-full);
	background: var(--pl-border-light);
	color: var(--pl-text-muted);
	font-size: var(--pl-fs-sm);
	font-weight: 800;
	transition: background-color var(--pl-dur) var(--pl-ease), color var(--pl-dur) var(--pl-ease);
}

.pl-track__step.is-done .pl-track__dot,
.pl-track__step.is-current .pl-track__dot {
	background: var(--pl-primary);
	color: var(--pl-on-primary);
}

.pl-track__step.is-current .pl-track__dot { box-shadow: 0 0 0 4px rgb(216 27 96 / 0.22); }

.pl-track__name {
	font-size: var(--pl-fs-xs);
	line-height: 1.35;
	color: var(--pl-text-muted);
	overflow-wrap: anywhere;
}

.pl-track__step.is-done .pl-track__name,
.pl-track__step.is-current .pl-track__name { color: var(--pl-text-primary); font-weight: 700; }

/* Phones: the five labels cannot sit side by side, so the tracker turns
   vertical with the connector running down the left. */
@media (max-width: 34rem) {
	.pl-track__steps { grid-template-columns: 1fr; gap: 0; }

	.pl-track__step {
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: 0.75rem;
		padding-block: 0.4375rem;
		text-align: start;
	}

	.pl-track__step::before {
		top: -50%;
		inset-inline-start: 1rem;
		width: 2px;
		height: 100%;
	}

	.pl-track__name { font-size: var(--pl-fs-sm); }
}

/* ---- tracking meta ---- */

.pl-track__meta {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--pl-space-4);
	margin: var(--pl-space-6) 0 0;
	padding-top: var(--pl-space-5);
	border-top: 1px solid var(--pl-border-light);
}

@media (min-width: 40rem) {
	.pl-track__meta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.pl-track__meta dt {
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: var(--pl-track-eyebrow);
	text-transform: uppercase;
	color: var(--pl-text-muted);
	margin-bottom: 0.1875rem;
}

.pl-track__meta dd {
	margin: 0;
	font-size: var(--pl-fs-sm);
	font-weight: 700;
	color: var(--pl-text-primary);
	overflow-wrap: anywhere;
}

.pl-track__meta a { color: var(--pl-primary-ink); text-decoration: underline; text-underline-offset: 2px; }

.pl-track__halt {
	padding: 0.875rem 1rem;
	background: #fff;
	border: 1px solid var(--pl-border-light);
	border-radius: var(--pl-radius);
	font-size: var(--pl-fs-sm);
	color: var(--pl-text-secondary);
}

/* ---- My Account orders column ---- */

.pl-track__pill {
	display: inline-block;
	padding: 0.1875rem 0.5rem;
	border-radius: var(--pl-radius-full);
	background: rgb(216 27 96 / 0.16);
	color: var(--pl-primary-deep);
	font-size: var(--pl-fs-xs);
	font-weight: 700;
	white-space: nowrap;
}

.pl-track__pill--halt { background: #fef2f2; color: #991b1b; }

/* Payment badge colours by settlement state. Replaces the old
   .pl-track__badge--pay rule, which was amber regardless of whether the money
   had actually been collected. */
.pl-track__badge--paid { background: #ecfdf5; border-color: #a7f3d0; }
.pl-track__badge--paid strong { color: #065f46; }

.pl-track__badge--due,
.pl-track__badge--pending { background: #fffbeb; border-color: #fde68a; }
.pl-track__badge--due strong,
.pl-track__badge--pending strong { color: #92400e; }

/* ---- my account ----
   WooCommerce lays this out with floats and percentage widths from its own
   stylesheet. The theme's CSS is enqueued after WooCommerce's, so matching its
   selector weight is enough to take the layout over — no !important needed. */

/* The same wrapper holds the sign-in form when signed out, and that has its own
   layout, so the grid is applied only when the account nav is actually present.
   Where :has() is unsupported the page falls back to WooCommerce's own floated
   two columns, which still reads correctly. */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--pl-space-6);
	align-items: start;
}

@media (min-width: 48rem) {
	.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
		grid-template-columns: 15rem minmax(0, 1fr);
		gap: var(--pl-space-8);
	}

	/* Placed explicitly rather than left to auto-flow: WooCommerce's own account
	   rules were landing the nav in the second track and the content in the
	   first, which put the sidebar on the right at a quarter of the width. */
	.woocommerce-account .woocommerce-MyAccount-navigation { grid-column: 1; grid-row: 1; }
	.woocommerce-account .woocommerce-MyAccount-content { grid-column: 2; grid-row: 1; }
}

/* Grid places these; the inherited float and 30%/68% widths would fight it. */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	width: auto;
	float: none;
	margin: 0;
}

/* WooCommerce prints its notices as a sibling ahead of the nav. As a grid item
   that claimed the first cell, pushing the nav into column two and the content
   down to the next row — so it spans instead and stays above both. */
.woocommerce-account .woocommerce > .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
}

/* ---- account nav ---- */

.woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	margin: 0;
	padding: var(--pl-space-2);
	list-style: none;
	background: var(--pl-bg-alt);
	border: 1px solid var(--pl-border-light);
	border-radius: var(--pl-radius-lg);
}

.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 0.625rem 0.75rem;
	border-radius: var(--pl-radius);
	font-size: var(--pl-fs-sm);
	font-weight: 600;
	color: var(--pl-text-secondary);
	transition: background-color var(--pl-dur-fast) var(--pl-ease), color var(--pl-dur-fast) var(--pl-ease);
}

.woocommerce-MyAccount-navigation li a:hover {
	background: var(--pl-bg-white);
	color: var(--pl-primary-ink);
}

.woocommerce-MyAccount-navigation li.is-active a {
	background: var(--pl-bg-white);
	color: var(--pl-primary-deep);
	box-shadow: var(--pl-shadow-sm);
}

/* Sign out is a different kind of action from the rest of the list. */
.woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: 0.25rem;
	padding-top: 0.25rem;
	border-top: 1px solid var(--pl-border-light);
}

.woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--pl-text-muted); }
.woocommerce-MyAccount-navigation-link--customer-logout a:hover { color: var(--pl-sale); background: #fef2f2; }

/* ---- account content ---- */

.woocommerce-MyAccount-content {
	padding: var(--pl-space-6);
	background: var(--pl-bg-white);
	border: 1px solid var(--pl-border-light);
	border-radius: var(--pl-radius-lg);
	font-size: var(--pl-fs-body);
	color: var(--pl-text-secondary);
	line-height: var(--pl-lh-body);
}

.woocommerce-MyAccount-content > p { margin: 0 0 var(--pl-space-4); }
.woocommerce-MyAccount-content > p:last-child { margin-bottom: 0; }
.woocommerce-MyAccount-content strong { color: var(--pl-text-primary); }

.woocommerce-MyAccount-content mark,
.woocommerce-MyAccount-content .woocommerce-Address-title a {
	background: none;
	color: var(--pl-primary-ink);
	font-weight: 700;
}

/* The orders table already inherits .shop_table; these are the account-only bits. */
.woocommerce-orders-table__cell-order-actions .button { margin: 0.125rem; }

.woocommerce-orders-table__cell-order-status {
	font-weight: 700;
	color: var(--pl-text-primary);
}

/* ---- addresses ---- */

.woocommerce-Addresses {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--pl-space-5);
}

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

	/* Same story as the account nav: left to auto-flow these landed diagonally,
	   billing in the second column and shipping on the row below. */
	.woocommerce-Addresses .col-1 { grid-column: 1; grid-row: 1; }
	.woocommerce-Addresses .col-2 { grid-column: 2; grid-row: 1; }
}

/* col2-set carries its own float widths, same story as the nav above. */
.woocommerce-Addresses .col-1,
.woocommerce-Addresses .col-2 {
	width: auto;
	float: none;
	margin: 0;
}

.woocommerce-Address {
	height: 100%;
	padding: var(--pl-space-5);
	background: var(--pl-bg-alt);
	border: 1px solid var(--pl-border-light);
	border-radius: var(--pl-radius-lg);
}

.woocommerce-Address-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--pl-space-3);
	margin-bottom: var(--pl-space-3);
	padding-bottom: var(--pl-space-3);
	border-bottom: 1px solid var(--pl-border-light);
}

.woocommerce-Address-title h2,
.woocommerce-Address-title h3 {
	font-size: var(--pl-fs-card);
	font-weight: 800;
	color: var(--pl-text-primary);
}

.woocommerce-Address address {
	font-style: normal;
	font-size: var(--pl-fs-sm);
	line-height: 1.7;
	color: var(--pl-text-secondary);
}

/* ---- account details form ---- */

.woocommerce-EditAccountForm fieldset {
	margin: var(--pl-space-6) 0 var(--pl-space-4);
	padding: var(--pl-space-5);
	border: 1px solid var(--pl-border-light);
	border-radius: var(--pl-radius-lg);
	background: var(--pl-bg-alt);
}

.woocommerce-EditAccountForm legend {
	padding-inline: var(--pl-space-2);
	font-size: var(--pl-fs-sm);
	font-weight: 800;
	color: var(--pl-text-primary);
}

.woocommerce-EditAccountForm .woocommerce-form-row--first,
.woocommerce-EditAccountForm .woocommerce-form-row--last { width: auto; float: none; }

@media (min-width: 40rem) {
	/* First and last name sit side by side; everything else runs full width. */
	.woocommerce-EditAccountForm {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--pl-space-4);
	}

	.woocommerce-EditAccountForm > *:not(.woocommerce-form-row--first):not(.woocommerce-form-row--last) {
		grid-column: 1 / -1;
	}
}

.woocommerce-EditAccountForm em {
	display: block;
	margin-top: 0.25rem;
	font-size: var(--pl-fs-xs);
	font-style: normal;
	color: var(--pl-text-muted);
}