/* ==========================================================================
   PeptideLab Research — WooCommerce layer
   The theme disables WooCommerce's own stylesheets, so this file owns the
   entire shop appearance: catalogue, product page, cart, checkout, account.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Shared controls
   -------------------------------------------------------------------------- */
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button,
.woocommerce #respond input#submit,
.woocommerce .cart .button,
.woocommerce .cart input.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--pl-s2);
	padding: 0.85rem 1.5rem;
	border: 1px solid transparent;
	border-radius: var(--pl-r);
	background: var(--pl-navy-800);
	color: #fff;
	font-family: var(--pl-font-sans);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button:hover,
.woocommerce #respond input#submit:hover {
	background: var(--pl-navy-900);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: var(--pl-sh-2);
}

.woocommerce .button.alt,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
	background: var(--pl-accent);
}

.woocommerce .button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce input.button.alt:hover {
	background: var(--pl-accent-strong);
}

.woocommerce .button.wc-backward,
.woocommerce .button.added_to_cart {
	background: transparent;
	border-color: var(--pl-line-strong);
	color: var(--pl-navy-800);
}

.woocommerce .button.wc-backward:hover,
.woocommerce .button.added_to_cart:hover {
	background: var(--pl-bg-alt);
	color: var(--pl-navy-900);
}

.woocommerce a.added_to_cart {
	display: inline-flex;
	margin-top: var(--pl-s2);
	padding: 0.5rem 0.9rem;
	border: 1px solid var(--pl-line-strong);
	border-radius: var(--pl-r-sm);
	font-size: 0.82rem;
	font-weight: 600;
	text-decoration: none;
}

/* Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pl-s3);
	margin: 0 0 var(--pl-s5);
	padding: var(--pl-s4) var(--pl-s5);
	border: 1px solid var(--pl-ok-line);
	border-left: 4px solid var(--pl-ok);
	border-radius: var(--pl-r-sm);
	background: var(--pl-ok-bg);
	color: var(--pl-ok);
	font-size: 0.9rem;
	list-style: none;
}

.woocommerce-info {
	border-color: var(--pl-line-strong);
	border-left-color: var(--pl-navy-600);
	background: var(--pl-bg-alt);
	color: var(--pl-slate-700);
}

.woocommerce-error {
	border-color: var(--pl-warn-line);
	border-left-color: var(--pl-warn);
	background: var(--pl-warn-bg);
	color: var(--pl-warn-strong);
}

.woocommerce-message .button,
.woocommerce-info .button {
	margin-left: auto;
	padding: 0.5rem 0.9rem;
	font-size: 0.82rem;
}

.woocommerce-error li {
	margin: 0;
}

/* --------------------------------------------------------------------------
   2. Shop layout
   -------------------------------------------------------------------------- */
.pl-shop-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(24px, 4vw, 40px);
	padding-block: clamp(24px, 3vw, 40px);
}

.pl-shop-layout.pl-has-sidebar {
	grid-template-columns: 260px minmax(0, 1fr);
}

.pl-shop-sidebar {
	align-self: start;
	position: sticky;
	top: calc(var(--pl-header-h) + 16px);
}

.pl-shop-sidebar__toggle {
	display: none;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 0.8rem 1rem;
	border: 1px solid var(--pl-line-strong);
	border-radius: var(--pl-r);
	background: #fff;
	color: var(--pl-navy-900);
	font-family: var(--pl-font-sans);
	font-size: 0.92rem;
	font-weight: 600;
	cursor: pointer;
}

.pl-shop-sidebar__chev {
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--pl-accent);
	border-bottom: 2px solid var(--pl-accent);
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.pl-shop-sidebar__toggle[aria-expanded="true"] .pl-shop-sidebar__chev {
	transform: rotate(225deg);
}

.pl-shop-sidebar .pl-widget {
	margin-bottom: var(--pl-s5);
	padding: var(--pl-s5);
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-r);
	background: #fff;
}

.pl-shop-sidebar .widgettitle,
.pl-shop-sidebar .pl-widget__title,
.pl-shop-sidebar .wp-block-heading {
	margin-bottom: var(--pl-s4);
	padding-bottom: var(--pl-s3);
	border-bottom: 1px solid var(--pl-line);
	color: var(--pl-navy-900);
	font-family: var(--pl-font-mono);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.pl-shop-sidebar ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pl-shop-sidebar li {
	margin-bottom: 0.45rem;
	font-size: 0.88rem;
}

.pl-shop-sidebar li a {
	color: var(--pl-slate-700);
	text-decoration: none;
}

.pl-shop-sidebar li a:hover {
	color: var(--pl-accent-strong);
	text-decoration: underline;
}

.pl-shop-sidebar .children {
	margin-top: 0.45rem;
	padding-left: var(--pl-s4);
}

.pl-shop-sidebar .count {
	color: var(--pl-slate-400);
}

.pl-shop-sidebar .price_slider_wrapper .ui-slider {
	height: 6px;
	margin: var(--pl-s4) 0 var(--pl-s5);
	border: 0;
	border-radius: var(--pl-r-pill);
	background: var(--pl-bg-sunken);
}

.pl-shop-sidebar .ui-slider .ui-slider-range {
	background: var(--pl-accent);
}

.pl-shop-sidebar .ui-slider .ui-slider-handle {
	width: 16px;
	height: 16px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: var(--pl-accent);
	box-shadow: var(--pl-sh-1);
	cursor: grab;
}

.pl-shop-sidebar .price_slider_amount .button {
	padding: 0.55rem 1rem;
	font-size: 0.82rem;
}

.pl-shop-sidebar .price_label {
	color: var(--pl-slate-500);
	font-family: var(--pl-font-mono);
	font-size: 0.74rem;
}

/* Catalogue heading */
.woocommerce-products-header {
	margin-bottom: var(--pl-s5);
}

.woocommerce-products-header__title,
.woocommerce-products-header .page-title {
	margin-bottom: var(--pl-s4);
	font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.6rem);
}

.woocommerce-products-header .term-description {
	max-width: 70ch;
	color: var(--pl-slate-600);
}

/* Catalogue intro */
.pl-shop-intro {
	margin-bottom: var(--pl-s6);
	padding: var(--pl-s5);
	border: 1px solid var(--pl-accent-line);
	border-radius: var(--pl-r-lg);
	background: var(--pl-accent-soft);
}

.pl-shop-intro .pl-lead {
	margin-bottom: var(--pl-s3);
}

.pl-shop-intro .pl-warning-text {
	margin: 0;
}

.pl-shop-footnote {
	margin-top: var(--pl-s6);
}

/* Result count + ordering */
.woocommerce .woocommerce-result-count {
	float: left;
	margin: 0 0 var(--pl-s5);
	color: var(--pl-slate-500);
	font-size: 0.85rem;
}

.woocommerce .woocommerce-ordering {
	float: right;
	margin: 0 0 var(--pl-s5);
}

.woocommerce .woocommerce-ordering select {
	min-width: 220px;
	padding: 0.6rem 0.8rem;
	font-size: 0.85rem;
}

/* --------------------------------------------------------------------------
   3. Product grid
   -------------------------------------------------------------------------- */
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--pl-s5);
	clear: both;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	display: none;
}

.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
	position: relative;
	margin: 0;
	padding: 0;
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-r-lg);
	background: #fff;
	box-shadow: var(--pl-sh-1);
	overflow: hidden;
	text-align: left;
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.woocommerce ul.products li.product:hover {
	transform: translateY(-2px);
	border-color: var(--pl-line-strong);
	box-shadow: var(--pl-sh-3);
}

.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	text-decoration: none;
}

.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product img {
	width: 100%;
	aspect-ratio: 4 / 3;
	margin: 0;
	object-fit: cover;
	border-bottom: 1px solid var(--pl-line);
	background: linear-gradient(170deg, #f2f6fb, #fff);
}

.woocommerce ul.products li.product img.woocommerce-placeholder {
	padding: 18%;
	object-fit: contain;
	opacity: 0.45;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
	margin: 0;
	padding: var(--pl-s5) var(--pl-s5) var(--pl-s2);
	color: var(--pl-navy-900);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.01em;
}

.woocommerce ul.products li.product .price {
	display: block;
	margin: 0;
	padding: 0 var(--pl-s5);
	color: var(--pl-navy-800);
	/* 价格用正文字体：等宽体只保留给规格表、批号这类真正的数据 */
	font-family: var(--pl-font-sans);
	font-size: 0.98rem;
	font-weight: 600;
}

.woocommerce ul.products li.product .price del {
	color: var(--pl-slate-400);
	font-size: 0.84em;
	font-weight: 400;
}

.woocommerce ul.products li.product .price ins {
	text-decoration: none;
}

.woocommerce ul.products li.product .star-rating {
	margin: var(--pl-s2) var(--pl-s5) 0;
}

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
	margin: var(--pl-s4) var(--pl-s5) 0;
	padding: 0.65rem 1rem;
	font-size: 0.85rem;
}

.woocommerce ul.products li.product .pl-warning-text {
	margin: 0;
	padding: var(--pl-s3) var(--pl-s5) var(--pl-s5);
}

.woocommerce ul.products li.product .pl-loop-badges {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 3;
}

.woocommerce ul.products li.product .onsale {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 3;
	padding: 0.3rem 0.62rem;
	border-radius: var(--pl-r-pill);
	background: var(--pl-warn);
	color: #fff;
	font-family: var(--pl-font-mono);
	font-size: 0.64rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Shop pagination */
.woocommerce nav.woocommerce-pagination {
	margin-top: var(--pl-s7);
	text-align: left;
}

.woocommerce nav.woocommerce-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pl-s2);
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.woocommerce nav.woocommerce-pagination ul li {
	margin: 0;
	border: 0;
	overflow: visible;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 0.7rem;
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-r-sm);
	background: #fff;
	color: var(--pl-slate-700);
	font-size: 0.88rem;
	font-weight: 600;
	text-decoration: none;
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
	border-color: var(--pl-accent);
	color: var(--pl-accent-strong);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--pl-navy-800);
	border-color: var(--pl-navy-800);
	color: #fff;
}

/* --------------------------------------------------------------------------
   4. Single product
   -------------------------------------------------------------------------- */
.woocommerce div.product {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
}

/*
 * WooCommerce prints the sale flash as a SIBLING of the gallery, not inside it.
 * On this two-column grid it therefore became a grid item of its own: the badge
 * took cell 1, the gallery cell 2 and the summary wrapped to the next row —
 * which is exactly the "gallery top-right, title underneath" breakage.
 * Pin it over the gallery so it stops occupying a cell.
 */
.woocommerce div.product span.onsale {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 3;
	margin: 0;
	padding: 0.3rem 0.62rem;
	border-radius: var(--pl-r-pill);
	background: var(--pl-warn);
	color: #fff;
	font-family: var(--pl-font-mono);
	font-size: 0.64rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1;
	text-transform: uppercase;
}

.woocommerce div.product .woocommerce-product-gallery {
	position: relative;
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-r-lg);
	background: linear-gradient(170deg, #f2f6fb, #fff);
	overflow: hidden;
}

.woocommerce div.product .woocommerce-product-gallery__wrapper {
	margin: 0;
}

.woocommerce div.product .woocommerce-product-gallery__image img {
	width: 100%;
	border-radius: 0;
}

.woocommerce div.product .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pl-s2);
	margin: var(--pl-s3) 0 0;
	padding: var(--pl-s3);
	background: #fff;
	border-top: 1px solid var(--pl-line);
	list-style: none;
}

.woocommerce div.product .flex-control-thumbs li {
	width: 64px;
	margin: 0;
}

.woocommerce div.product .flex-control-thumbs img {
	border: 2px solid transparent;
	border-radius: var(--pl-r-sm);
	cursor: pointer;
	opacity: 0.7;
}

.woocommerce div.product .flex-control-thumbs img.flex-active {
	border-color: var(--pl-accent);
	opacity: 1;
}

.woocommerce div.product .summary {
	margin: 0;
}

.woocommerce div.product .product_title {
	margin-bottom: var(--pl-s3);
	font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.2rem);
}

.pl-pdp-badges {
	margin-bottom: var(--pl-s2);
}

.pl-pdp-badges .pl-badge {
	font-size: 0.68rem;
}

.woocommerce div.product .summary .pl-warning-text {
	margin-bottom: var(--pl-s4);
	padding-bottom: var(--pl-s4);
	border-bottom: 1px solid var(--pl-line);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	margin: 0 0 var(--pl-s4);
	color: var(--pl-navy-900);
	/* 价格用正文字体：等宽体只保留给规格表、批号这类真正的数据 */
	font-family: var(--pl-font-sans);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.woocommerce div.product p.price del {
	color: var(--pl-slate-400);
	font-size: 0.7em;
}

.woocommerce div.product p.price ins {
	text-decoration: none;
}

.woocommerce div.product .woocommerce-product-details__short-description {
	margin-bottom: var(--pl-s5);
	color: var(--pl-slate-600);
	font-size: 0.96rem;
}

.woocommerce div.product .stock {
	margin-bottom: var(--pl-s3);
	font-family: var(--pl-font-mono);
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.woocommerce div.product .in-stock {
	color: var(--pl-ok);
}

.woocommerce div.product .out-of-stock {
	color: var(--pl-warn);
}

/* Add to cart */
.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--pl-s3);
	margin-bottom: var(--pl-s4);
	padding: var(--pl-s5);
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-r-lg);
	background: var(--pl-bg-alt);
}

.woocommerce div.product form.cart::before,
.woocommerce div.product form.cart::after {
	display: none;
}

.woocommerce .quantity {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	border: 1px solid var(--pl-line-strong);
	border-radius: var(--pl-r);
	background: #fff;
	overflow: hidden;
}

.woocommerce .quantity input.qty {
	width: 78px;
	height: 100%;
	padding: 0.8rem 0.4rem;
	border: 0;
	background: transparent;
	color: var(--pl-navy-900);
	font-family: var(--pl-font-mono);
	font-size: 0.95rem;
	font-weight: 600;
	text-align: center;
	-moz-appearance: textfield;
}

.woocommerce .quantity input.qty::-webkit-outer-spin-button,
.woocommerce .quantity input.qty::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.woocommerce div.product form.cart .button {
	flex: 1 1 200px;
}

/*
 * 可变商品（多规格）的数量框和加购按钮不在 form.cart 的直接子级里，
 * 而是包在 .single_variation_wrap > .woocommerce-variation-add-to-cart 中，
 * 所以上面那条 flex 行规则作用不到：按钮会缩成一小块、和数量框挤在一起。
 * 把同样的行布局补给这个包裹层即可（按钮的 flex 由上面的规则接管）。
 */
.woocommerce div.product form.cart .single_variation_wrap {
	flex: 1 1 100%;
}

.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--pl-s3);
}

.woocommerce div.product form.cart .variations {
	width: 100%;
	margin-bottom: var(--pl-s4);
	border-collapse: collapse;
}

.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td {
	padding: 0.5rem 0;
	border: 0;
	text-align: left;
	vertical-align: middle;
}

.woocommerce div.product form.cart .variations label {
	margin: 0;
	font-size: 0.82rem;
}

.woocommerce div.product form.cart .reset_variations {
	color: var(--pl-slate-500);
	font-size: 0.78rem;
}

/*
 * 选中规格后显示的价格是「次级读数」，不该和页面主价格一样大（原来继承
 * `.woocommerce div.product span.price` 的 1.5rem，看起来像第二个主价格）。
 * 这里单独压小一档，并顺手把划线原价也缩一档。
 */
.woocommerce div.product .single_variation_wrap .woocommerce-variation-price {
	margin-bottom: var(--pl-s3);
}

.woocommerce div.product .single_variation_wrap .woocommerce-variation-price .price {
	color: var(--pl-navy-900);
	font-family: var(--pl-font-sans);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.woocommerce div.product .single_variation_wrap .woocommerce-variation-price del {
	color: var(--pl-slate-400);
	font-size: 0.82em;
	font-weight: 500;
}

.woocommerce div.product .single_variation_wrap .woocommerce-variation-price ins {
	text-decoration: none;
}

/* COA note */
.pl-pdp-coa-note {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin: 0 0 var(--pl-s4);
	color: var(--pl-slate-600);
	font-size: 0.85rem;
}

.pl-pdp-coa-note svg {
	flex: 0 0 auto;
	color: var(--pl-accent);
}

.pl-pdp-coa-note a {
	font-weight: 600;
}

/* Meta */
.woocommerce div.product .product_meta {
	margin-top: var(--pl-s4);
	padding-top: var(--pl-s4);
	border-top: 1px solid var(--pl-line);
	color: var(--pl-slate-500);
	font-size: 0.8rem;
}

.woocommerce div.product .product_meta > span {
	display: block;
	margin-bottom: 0.3rem;
}

.woocommerce div.product .product_meta a {
	color: var(--pl-slate-700);
}

/* Tabs */
.woocommerce div.product .woocommerce-tabs {
	grid-column: 1 / -1;
	margin-top: var(--pl-s7);
	padding-top: var(--pl-s6);
	border-top: 1px solid var(--pl-line);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pl-s1);
	margin: 0 0 var(--pl-s6);
	padding: 6px;
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-r);
	background: var(--pl-bg-alt);
	list-style: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after {
	display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	border-radius: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: inline-flex;
	align-items: center;
	padding: 0.6rem 1rem;
	border-radius: var(--pl-r-sm);
	color: var(--pl-slate-600);
	font-size: 0.88rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.16s ease, color 0.16s ease;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	background: #fff;
	color: var(--pl-navy-800);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	background: #fff;
	color: var(--pl-navy-900);
	box-shadow: var(--pl-sh-1);
}

.woocommerce div.product .woocommerce-tabs .panel {
	margin: 0;
	padding: 0;
	color: var(--pl-slate-700);
	font-size: 0.96rem;
	line-height: 1.75;
}

/* Initial panel state — WooCommerce's own stylesheet is disabled. */
.woocommerce-Tabs-panel {
	display: none;
}

.woocommerce-Tabs-panel--description {
	display: block;
}

.pl-tab-content {
	max-width: 900px;
}

.pl-tab-intro {
	color: var(--pl-slate-600);
}

.pl-tab-note {
	color: var(--pl-slate-500);
	font-size: 0.84rem;
}

/* COA panel inside the tab */
.pl-coa-panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
	gap: clamp(24px, 4vw, 48px);
	align-items: center;
	padding: var(--pl-s6);
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-r-lg);
	background: var(--pl-bg-alt);
}

/* 后台通过媒体库挂上来的真实证书图片 */
.pl-coa-panel__image {
	display: block;
	overflow: hidden;
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-r);
	background: #fff;
	box-shadow: var(--pl-sh-2);
	transition: box-shadow 0.15s ease;
}

.pl-coa-panel__image:hover {
	box-shadow: var(--pl-sh-3);
}

.pl-coa-panel__img {
	display: block;
	width: 100%;
	height: auto;
}

.pl-coa-panel h3 {
	margin-bottom: var(--pl-s3);
}

.pl-coa-panel__copy p {
	color: var(--pl-slate-600);
}

.pl-coa-panel__list {
	margin: 0 0 var(--pl-s5);
	padding: 0;
	list-style: none;
}

.pl-coa-panel__list li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--pl-s4);
	padding: 0.6rem 0;
	border-bottom: 1px dashed var(--pl-line-strong);
	font-size: 0.88rem;
}

.pl-coa-panel__list li span {
	color: var(--pl-slate-600);
}

.pl-coa-panel__list li b {
	color: var(--pl-navy-900);
	font-family: var(--pl-font-mono);
	font-size: 0.86rem;
}

/* References list */
.pl-refs {
	margin: 0;
	padding-left: 1.3rem;
}

.pl-refs__item {
	margin-bottom: 0.7rem;
	padding-left: 0.3rem;
	color: var(--pl-slate-700);
	font-size: 0.94rem;
}

.pl-refs__item a {
	font-weight: 500;
}

/* Related products */
.woocommerce div.product .related,
.woocommerce div.product .upsells,
.woocommerce div.product .cross-sells {
	grid-column: 1 / -1;
	margin-top: var(--pl-s8);
	padding-top: var(--pl-s6);
	border-top: 1px solid var(--pl-line);
}

.woocommerce div.product .related > h2,
.woocommerce div.product .upsells > h2,
.woocommerce div.product .cross-sells > h2,
.woocommerce .cart-collaterals .cross-sells > h2 {
	margin-bottom: var(--pl-s5);
	font-size: 1.4rem;
}

.pl-pdp-disclaimer {
	grid-column: 1 / -1;
	margin-top: var(--pl-s6);
}

/* Reviews are disabled by default but style them if a site enables them. */
.woocommerce #reviews #comments ol.commentlist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce #reviews #comments ol.commentlist li {
	margin-bottom: var(--pl-s4);
	padding: var(--pl-s5);
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-r);
	background: #fff;
}

.woocommerce .star-rating {
	position: relative;
	display: inline-block;
	width: 5.4em;
	height: 1em;
	overflow: hidden;
	color: var(--pl-accent);
	font-family: star;
	font-size: 0.85rem;
	line-height: 1;
}

/* --------------------------------------------------------------------------
   5. Cart
   -------------------------------------------------------------------------- */
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce {
	padding-block: clamp(24px, 3vw, 40px);
}

/*
 * 购物车 / 结账 / 我的账户都是「普通页面」，走 page.php，内容会被套上 780px 的
 * 阅读窄容器（对政策页是对的）。但这三页内部是两栏栅格，塞进阅读宽度就会被压扁：
 * 结账页的订单摘要在 1440 屏上只剩 ~280px，商品名竖排成 6 行。
 * 这里只在这三个页面上把容器放回正常宽度。
 */
.woocommerce-cart .pl-container--narrow,
.woocommerce-checkout .pl-container--narrow,
.woocommerce-account .pl-container--narrow {
	max-width: var(--pl-container);
}

.woocommerce table.shop_table {
	width: 100%;
	margin: 0 0 var(--pl-s6);
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-r-lg);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	font-size: 0.92rem;
}

.woocommerce table.shop_table th {
	padding: var(--pl-s4) var(--pl-s5);
	border-bottom: 1px solid var(--pl-line);
	background: var(--pl-bg-alt);
	color: var(--pl-navy-800);
	font-family: var(--pl-font-mono);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-align: left;
	text-transform: uppercase;
}

.woocommerce table.shop_table td {
	padding: var(--pl-s4) var(--pl-s5);
	border-bottom: 1px solid var(--pl-line);
	color: var(--pl-slate-700);
	vertical-align: middle;
}

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

.woocommerce table.shop_table .product-thumbnail img {
	width: 64px;
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-r-sm);
}

.woocommerce table.shop_table .product-name a {
	color: var(--pl-navy-900);
	font-weight: 600;
	text-decoration: none;
}

.woocommerce table.shop_table .product-name a:hover {
	color: var(--pl-accent-strong);
}

.woocommerce table.shop_table .product-remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--pl-bg-sunken);
	color: var(--pl-slate-500) !important;
	font-size: 1rem;
	line-height: 1;
	text-decoration: none;
}

.woocommerce table.shop_table .product-remove a.remove:hover {
	background: var(--pl-warn);
	color: #fff !important;
}

.woocommerce .cart .actions {
	padding: var(--pl-s4) var(--pl-s5);
}

.woocommerce .cart .coupon {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pl-s2);
	margin-bottom: var(--pl-s3);
}

.woocommerce .cart .coupon input[type="text"] {
	max-width: 220px;
}

.woocommerce .cart-collaterals {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
	gap: var(--pl-s6);
	align-items: start;
}

.woocommerce .cart-collaterals .cross-sells {
	grid-column: 1 / -1;
}

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

.woocommerce .cart-collaterals .cart_totals h2 {
	margin-bottom: var(--pl-s4);
	font-size: 1.15rem;
}

.woocommerce .cart-collaterals .cart_totals table {
	margin-bottom: var(--pl-s4);
}

.woocommerce .cart-collaterals .cart_totals .order-total td,
.woocommerce .cart-collaterals .cart_totals .order-total th {
	color: var(--pl-navy-900);
	font-family: var(--pl-font-mono);
	font-size: 1.05rem;
	font-weight: 600;
	background: var(--pl-bg-alt);
}

.woocommerce .wc-proceed-to-checkout {
	padding: 0;
}

.woocommerce .wc-proceed-to-checkout a.checkout-button {
	width: 100%;
	padding: 1rem 1.5rem;
	font-size: 1rem;
}

.woocommerce .shipping-calculator-button {
	display: inline-block;
	margin-bottom: var(--pl-s3);
	font-size: 0.85rem;
}

.pl-cart-disclaimer {
	margin-top: var(--pl-s6);
}

.pl-cart-disclaimer .pl-warning-text {
	margin-bottom: var(--pl-s4);
}

.woocommerce .cart-empty,
.woocommerce .return-to-shop {
	margin-bottom: var(--pl-s4);
	text-align: left;
}

/* --------------------------------------------------------------------------
   6. Checkout
   --------------------------------------------------------------------------
   版式对齐参考站 peptime.com/checkout：**左栏订单摘要，右栏填表 → 支付方式 → 下单**
   （原来照 alphacarbonlabs 是反过来的：左表单单、右摘要）。

   为什么用 grid 而不是浮动：WooCommerce 把摘要标题、摘要表、支付块输出成
   #order_review **内部**的兄弟节点——支付块嵌在摘要容器里。要让摘要留在左栏、
   支付落到右栏，就给 #order_review 加 display:contents，它的子节点于是直接
   参与外层栅格，各自用显式 grid 区域定位。

   计数器 pl-checkout-step 由各步骤标题的 ::before 递增，序号自动。
   -------------------------------------------------------------------------- */
.woocommerce form.checkout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--pl-s5) var(--pl-s6);
	align-items: start;
	counter-reset: pl-checkout-step;
}

/* 整页浅灰底 + 白卡（参考站就是这样，左栏不再需要单独涂一块面板） */
.woocommerce-checkout .pl-site__main,
.woocommerce-checkout .pl-page {
	background: var(--pl-bg-alt);
}

.woocommerce-checkout .pl-page {
	padding-bottom: var(--pl-s8);
}

/* 居中标题（页面标题带已隐藏，这是结账页唯一的标题） */
.pl-checkout__intro {
	margin: 0 0 var(--pl-s7);
	text-align: center;
}

.pl-checkout__title {
	margin: 0 0 var(--pl-s2);
	font-size: clamp(1.75rem, 3vw, 2.4rem);
}

.pl-checkout__title em {
	color: var(--pl-accent-strong);
	font-style: normal;
}

.pl-checkout__sub {
	margin: 0;
	color: var(--pl-slate-500);
	font-size: 1.02rem;
}

/*
 * 两栏 = 两个**独立**的纵向 flex 容器，而不是共用行高的栅格。
 *
 * 之前用栅格把每个元素单独定位，两栏同行共享行高：右栏下单卡的高度会被左栏同一行
 * 的联系人卡决定，摘要卡和下单卡之间永远空一截；两栏底部也没法齐平。
 *
 * 现在 #customer_details（左）和 #order_review（右）各自是栅格项，内部用 flex 纵向
 * 排列。好处：
 *   - 右栏的摘要卡和下单卡直接相邻 → 边框接起来就是「一张版图」；
 *   - 栅格 align-items: stretch 把两栏拉到同高，右栏最后一张卡 flex:1 吃掉余量，
 *     滑到底部时两栏自然齐平。
 *
 * 「支付方式在左」不是靠 CSS 拆的（display:contents 会把元素重新塞回同一个栅格，
 * 又回到共用行高的老问题），而是由 assets/js/checkout-layout.js 把支付方式列表搬进
 * 左栏——见那个文件里的说明。
 */
.woocommerce form.checkout {
	display: grid;
	/*
	 * 左栏略宽、右栏略窄（约 56% / 44%）。参考站也是这个比例：表单栏稍宽，
	 * 摘要栏收一点，看着不会跟表单抢。
	 *
	 * max-width + auto 外边距把整块结账区收窄居中 —— 两个框架一起往里收，
	 * 两侧留出灰底，比铺满整个容器松快。
	 */
	grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
	gap: var(--pl-s6);
	align-items: stretch;
	max-width: 1200px;
	margin-inline: auto;
}

/* 左栏：联系人卡 → 地址卡 → Secure Payment 标题 → 支付方式列表（后两者由 JS 搬进来）*/
.woocommerce form.checkout #customer_details {
	grid-column: 1;
	display: flex;
	flex-direction: column;
	gap: var(--pl-s5);
	min-width: 0;
}

/* 空的第二列（寄送地址那组，本店不启用）不要占位 */
.woocommerce form.checkout #customer_details .col-2 {
	display: none;
}

/* 右栏：摘要 + 下单（拼成一张）→ 信任项（在卡内）*/
.woocommerce form.checkout #order_review {
	grid-column: 2;
	display: flex;
	flex-direction: column;
	min-width: 0;

	/*
	 * 摘要栏吸顶：往下填地址、选支付方式时，摘要和 Place order 一直留在视野里。
	 *
	 * align-self: start 很关键 —— 不设的话栅格的 stretch 会让这一项占满整行高度，
	 * sticky 就没有可移动的余量，等于没吸顶。
	 *
	 * max-height + overflow 是给矮视口兜底：卡片约 780px，视口不够高时如果只是
	 * 单纯吸顶，卡片下半截（含 Place order）会被窗口切掉而且永远看不到；让它内部
	 * 可滚就没这个问题。滚动条本身隐藏掉 —— 视觉上是一条灰杠，很扎眼；滚轮/触控
	 * 仍然能滚。
	 */
	align-self: start;
	position: sticky;
	top: calc(var(--pl-header-h) + 16px);
	max-height: calc(100vh - var(--pl-header-h) - 32px);
	overflow-y: auto;
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* 老 Edge / IE */
}

.woocommerce form.checkout #order_review::-webkit-scrollbar {
	display: none; /* Chrome / Safari */
}

.woocommerce form.checkout #order_review_heading {
	display: none; /* 摘要卡自己说明了一切，标题是多余的 */
}

/* 摘要卡：上半张（下半张是 #payment，边框接在一起）*/
.woocommerce form.checkout #order_review > table.shop_table {
	margin: 0;
	border: 1px solid var(--pl-line);
	border-bottom: 0;
	border-radius: var(--pl-r-lg) var(--pl-r-lg) 0 0;
	background: #fff;
	box-shadow: var(--pl-sh-1);
	overflow: hidden;
}

/* 下单区：隐私说明 + 18+ 勾选 + Place order + 安全行，紧接摘要卡下方 */
.woocommerce form.checkout #order_review > #payment {
	margin: 0;
	padding: var(--pl-s4) var(--pl-s5) var(--pl-s5);
	border: 1px solid var(--pl-line);
	border-top: 0;
	border-radius: 0 0 var(--pl-r-lg) var(--pl-r-lg);
	background: #fff;
	box-shadow: var(--pl-sh-1);
}

/* Secure Payment 标题（JS 会把它搬进左栏；没 JS 时它就在右栏给支付卡当标题）*/
.woocommerce form.checkout .pl-checkout-step {
	margin: var(--pl-s5) 0 var(--pl-s3);
	padding: 0;
}

.woocommerce form.checkout #customer_details > .pl-checkout-step {
	margin-bottom: 0;
}

/* 支付方式列表（JS 把它搬进左栏并加上 .pl-payment-methods）*/
.pl-payment-methods {
	margin: 0;
	padding: var(--pl-s5);
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-r-lg);
	background: #fff;
	box-shadow: var(--pl-sh-1);
	list-style: none;
}

/*
 * 信任项：右栏那张卡内部的一段，不再是独立一张卡。
 * 所以这里没有边框/圆角/白底/阴影，只用一条细线跟上面隔开。
 * 也不要 flex:1 —— 把卡拉伸到跟左栏同高会在卡内留出一大片空白，
 * 那是之前「两栏齐平」的做法，已被要求去掉：现在按内容自然结束。
 */
.pl-checkout-trust {
	margin-top: var(--pl-s5);
	padding-top: var(--pl-s5);
	border-top: 1px solid var(--pl-line);
}

/*
 * 结账页顶栏收敛成「logo + Secure & Encrypted」，和参考站一样是无导航的专注模式。
 * 顾客要离开可以用浏览器返回，或直接从 logo 回首页。
 */
.woocommerce-checkout .pl-nav,
.woocommerce-checkout .pl-navtoggle,
.woocommerce-checkout .pl-header__search,
.woocommerce-checkout .pl-iconbtn,
.woocommerce-checkout .pl-header__cta {
	display: none;
}

.pl-header__secure {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 0 auto;
	color: var(--pl-slate-600);
	font-size: 0.85rem;
	font-weight: 600;
}

/* 信任项（独立一张卡，在右栏下单卡下面） */
.pl-checkout-trust__claim {
	display: flex;
	align-items: center;
	gap: var(--pl-s2);
	margin: 0 0 var(--pl-s4);
	color: var(--pl-ok);
	font-size: 0.86rem;
	font-weight: 700;
}

.pl-checkout-trust__list {
	margin: 0;
	padding: var(--pl-s4) 0 0;
	border-top: 1px solid var(--pl-line);
	list-style: none;
}

.pl-checkout-trust__item {
	display: flex;
	align-items: flex-start;
	gap: var(--pl-s3);
	padding: var(--pl-s2) 0;
}

.pl-checkout-trust__icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: var(--pl-r-sm);
	background: #fff;
	color: var(--pl-accent-strong);
	box-shadow: var(--pl-sh-1);
}

.pl-checkout-trust__copy {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.pl-checkout-trust__copy b {
	color: var(--pl-navy-900);
	font-size: 0.88rem;
	font-weight: 700;
}

.pl-checkout-trust__copy i {
	color: var(--pl-slate-500);
	font-size: 0.82rem;
	font-style: normal;
}

/* Place order 按钮下方那行（参考站是 "Secure 256-bit encrypted checkout"） */
.pl-checkout-secure-line {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: var(--pl-s3) 0 0;
	color: var(--pl-ok);
	font-size: 0.8rem;
	font-weight: 600;
}

/* Step 标题行右侧的 SSL 徽章 */
.pl-checkout-step__text {
	flex: 1 1 auto;
}

.pl-ssl-badge {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 5px;
	padding: 3px 10px;
	border: 1px solid var(--pl-ok-line);
	border-radius: var(--pl-r-pill);
	background: var(--pl-ok-bg);
	color: var(--pl-ok);
	font-family: var(--pl-font-sans);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/*
 * 卡片头：浅色圆角图标 + 标题 + 一句说明。
 * 说明文字现在是模板里真实输出的 .pl-checkout-card__note（不再是 CSS content，
 * 这样可选中、可翻译、读屏软件也能读到）。
 */
.pl-checkout-card {
	margin-bottom: var(--pl-s4);
	padding: var(--pl-s5);
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-r-lg);
	background: #fff;
	box-shadow: var(--pl-sh-1);
}

.pl-checkout-card__title {
	display: flex;
	align-items: center;
	gap: var(--pl-s3);
	margin: 0 0 var(--pl-s1);
	color: var(--pl-navy-900);
	font-size: 1.05rem;
	font-weight: 700;
}

.pl-checkout-card__title::before {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: var(--pl-r-sm);
	background-color: var(--pl-accent-soft);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 19px 19px;
	content: "";
}

/*
 * 图标用 data URI 内联：卡片头是模板里的 <h3>，用 CSS 画图标最省事，
 * 颜色写死为主题主色 #0e7c86。
 */
.pl-checkout-card__title--contact::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e7c86' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M5 20c0-3.3 3.1-5.6 7-5.6s7 2.3 7 5.6'/%3E%3C/svg%3E");
}

.pl-checkout-card__title--address::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e7c86' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.4 7-11a7 7 0 1 0-14 0c0 5.6 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E");
}

.pl-checkout-card__note {
	margin: 0 0 var(--pl-s4);
	padding-left: 50px;
	color: var(--pl-slate-500);
	font-size: 0.86rem;
	line-height: 1.5;
}

/* 订单备注（地址卡底部，与上方字段用一条细线隔开）*/
.pl-checkout-card__extra {
	margin-top: var(--pl-s4);
	padding-top: var(--pl-s4);
	border-top: 1px solid var(--pl-line);
}

/* 摘要表不要列头（PRODUCT / SUBTOTAL）——参考站也没有，少一行更像订单摘要 */
.woocommerce form.checkout #order_review > table.shop_table thead {
	display: none;
}

/*
 * 结账页只保留左右两栏：去掉页面标题带（面包屑 + "Checkout" 大标题）。
 * 结账页是 page.php 渲染的，标题带对流程页只是干扰。
 */
.woocommerce-checkout .pl-page__head {
	display: none;
}

/* --- 优惠码：参考站把折扣码做成常驻的一行（不用先点开）--- */
.woocommerce-checkout .woocommerce-form-coupon-toggle {
	display: none;
}

.woocommerce-checkout form.checkout_coupon {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pl-s2);
	margin: 0 0 var(--pl-s5);
	padding: var(--pl-s3) var(--pl-s4);
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-r);
	background: var(--pl-bg-alt);
}

.woocommerce-checkout form.checkout_coupon .form-row {
	margin: 0;
}

.woocommerce-checkout form.checkout_coupon #coupon_code {
	width: 260px;
	max-width: 100%;
}

.woocommerce-checkout form.checkout_coupon .clear {
	display: none;
}

/* --- 左栏：Secure Checkout 信任条 --- */
.pl-secure-checkout {
	display: flex;
	align-items: flex-start;
	gap: var(--pl-s3);
	margin-bottom: var(--pl-s4);
	padding: var(--pl-s4) var(--pl-s5);
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-r-lg);
	background: var(--pl-bg-alt);
}

.pl-secure-checkout__icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: var(--pl-r-sm);
	background: #fff;
	color: var(--pl-accent-strong);
	box-shadow: var(--pl-sh-1);
}

.pl-secure-checkout__title {
	margin: 0 0 2px;
	color: var(--pl-navy-900);
	font-size: 1rem;
	font-weight: 700;
}

.pl-secure-checkout__sub {
	margin: 0;
	color: var(--pl-slate-500);
	font-size: 0.86rem;
}

/*
 * 账单字段区现在只是个容器：里面是两张 .pl-checkout-card
 * （Contact Information / Shipping Address，模板 form-billing.php 拆的）。
 * 空容器依旧隐藏。
 */
.woocommerce form.checkout .woocommerce-shipping-fields:not(:has(input, select, textarea)),
.woocommerce form.checkout .woocommerce-account-fields:not(:has(input, select, textarea)),
.woocommerce form.checkout .woocommerce-additional-fields:not(:has(input, select, textarea)) {
	display: none;
}

/* 「寄送到其他地址？」那个 h3 里包着复选框，不需要图标 */
.woocommerce form.checkout #customer_details h3#ship-to-different-address {
	margin: 0 0 var(--pl-s3);
	font-size: 0.95rem;
	font-weight: 600;
}

/* Secure Payment 分段标题 */
.pl-checkout-step {
	display: flex;
	align-items: flex-start;
	gap: var(--pl-s3);
	margin: 0;
	padding: var(--pl-s5) var(--pl-s5) 0;
	color: var(--pl-navy-900);
}

.pl-checkout-step__icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: var(--pl-r-sm);
	background: var(--pl-accent-soft);
	color: var(--pl-accent-strong);
}

.pl-checkout-step__copy {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
}

.pl-checkout-step__copy b {
	color: var(--pl-navy-900);
	font-size: 1.05rem;
	font-weight: 700;
}

.pl-checkout-step__copy i {
	color: var(--pl-slate-500);
	font-size: 0.86rem;
	font-style: normal;
}

.pl-checkout-step .pl-ssl-badge {
	margin-top: 6px;
}

.woocommerce-account-fields,
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 var(--pl-s4);
}

.woocommerce-additional-fields__field-wrapper {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.woocommerce form .form-row {
	display: block;
	float: none;
	width: auto;
	margin: 0 0 var(--pl-s4);
	padding: 0;
}

.woocommerce form .form-row-wide,
.woocommerce form .form-row-full,
.woocommerce form .form-row-first.form-row-wide {
	grid-column: 1 / -1;
}

.woocommerce form .form-row label {
	margin-bottom: 0.35rem;
	color: var(--pl-navy-800);
	font-size: 0.85rem;
	font-weight: 600;
}

.woocommerce form .form-row .required {
	color: var(--pl-warn);
	text-decoration: none;
}

.woocommerce form .form-row .optional {
	color: var(--pl-slate-400);
	font-weight: 400;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	width: 100%;
}

.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select {
	border-color: var(--pl-warn);
	box-shadow: 0 0 0 3px var(--pl-warn-bg);
}

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

.woocommerce .select2-container .select2-selection--single {
	height: auto;
	padding: 0.35rem 0;
	border: 1px solid var(--pl-line-strong);
	border-radius: var(--pl-r-sm);
}

/* --- 摘要容器本身不再生成盒子（卡片样式移到表格上，见第 6 节）--- */
.woocommerce #order_review {
	padding: 0;
	border: 0;
	background: transparent;
}

/* 摘要表：外框由卡片提供，这里只留行间细线 */
.woocommerce #order_review table.shop_table {
	margin: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.woocommerce #order_review table.shop_table th,
.woocommerce #order_review table.shop_table td {
	padding: var(--pl-s3) var(--pl-s5);
}

.woocommerce #order_review table.shop_table thead th {
	border-bottom: 1px solid var(--pl-line);
	background: transparent;
	color: var(--pl-slate-400);
	font-size: 0.66rem;
	letter-spacing: 0.12em;
}

/* 商品行 */
.woocommerce #order_review table.shop_table tbody td {
	padding: var(--pl-s4) var(--pl-s5);
	border-bottom: 1px solid var(--pl-line);
	vertical-align: middle;
}

.woocommerce #order_review table.shop_table .product-name {
	color: var(--pl-navy-900);
	font-size: 0.98rem;
	font-weight: 600;
	line-height: 1.4;
}

.woocommerce #order_review table.shop_table .product-name a {
	color: inherit;
	text-decoration: none;
}

.woocommerce #order_review table.shop_table .product-total {
	color: var(--pl-navy-900);
	font-size: 0.98rem;
	font-weight: 600;
	text-align: right;
	white-space: nowrap;
}

/* 数量徽章，替代裸的 “× 2” */
.pl-qty-chip {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 9px;
	border-radius: var(--pl-r-pill);
	background: var(--pl-bg-sunken);
	color: var(--pl-slate-600);
	font-family: var(--pl-font-sans);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	vertical-align: middle;
}

/*
 * 小计 / 合计行。
 *
 * 必须在这里重置 font-family / text-transform / letter-spacing ——
 * 通用的 .woocommerce table.shop_table th 把它们设成了等宽 + 全大写 + 字距，
 * 摘要里的 "SUBTOTAL" "TOTAL DUE TODAY" 全大写就是这么来的，看着很硬。
 */
.woocommerce #order_review table.shop_table tfoot th,
.woocommerce #order_review table.shop_table tfoot td {
	padding: var(--pl-s2) var(--pl-s5);
	border-bottom: 0;
	background: transparent;
	color: var(--pl-slate-600);
	font-family: var(--pl-font-sans);
	font-size: 0.92rem;
	font-weight: 500;
	letter-spacing: 0;
	text-align: right;
	text-transform: none;
}

.woocommerce #order_review table.shop_table tfoot th {
	text-align: left;
}

/* 合计行：说人话的句子 + 放大的金额 */
.woocommerce #order_review table.shop_table tfoot tr.order-total th,
.woocommerce #order_review table.shop_table tfoot tr.order-total td {
	padding-top: var(--pl-s4);
	padding-bottom: var(--pl-s4);
	border-top: 1px solid var(--pl-line);
	color: var(--pl-navy-900);
	font-family: var(--pl-font-sans);
	font-size: 1.3rem;
	font-weight: 800;
	letter-spacing: 0;
	text-transform: none;
}

.woocommerce #order_review table.shop_table tfoot tr.order-total th {
	font-size: 1rem;
	font-weight: 600;
}

/* Terms confirmation */
.pl-checkout-consent {
	margin-bottom: var(--pl-s4);
}

.pl-checkout-consent .pl-terms-field,
.pl-checkout-consent #pl_terms_confirm_field {
	margin-bottom: var(--pl-s2);
	padding: var(--pl-s4);
	border: 1px solid var(--pl-warn-line);
	border-radius: var(--pl-r);
	background: var(--pl-warn-bg);
}

/*
 * 这里必须是普通块级布局，不能用 flex（也不能用 grid）。
 * 勾选框的 label 里是：input + 文字 + <a> + 文字 + <a> + 文字 + <span>，
 * 而 flex/grid 容器会把每个内联 <a> 和每段连续文字都块化成独立的 item，
 * 结果整句 "I confirm I am 18+ … Disclaimer & Terms of Service." 会被拆成
 * 一条条竖排的窄列。用 float 让文字正常绕排，同时保留勾选框左侧悬挂缩进。
 */
.pl-checkout-consent label {
	display: block;
	display: flow-root;
	margin: 0;
	color: var(--pl-warn-strong);
	font-size: 0.85rem;
	font-weight: 500;
	line-height: 1.55;
	cursor: pointer;
}

.pl-checkout-consent input[type="checkbox"] {
	float: left;
	width: 18px;
	height: 18px;
	margin: 3px var(--pl-s3) 0 0;
	accent-color: var(--pl-warn);
}

.pl-checkout-consent a {
	color: var(--pl-warn-strong);
}

.pl-checkout-consent .pl-warning-text {
	margin: 0;
}

/* 通用重置；结账页那张「支付卡」的外框与内边距在第 6 节（更具体的选择器）*/
.woocommerce #payment {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

.woocommerce #payment ul.payment_methods {
	margin: 0 0 var(--pl-s4);
	padding: 0;
	border: 0;
	list-style: none;
}

.woocommerce #payment ul.payment_methods li {
	margin-bottom: var(--pl-s2);
	padding: var(--pl-s3) var(--pl-s4);
	border: 1px solid var(--pl-line-strong);
	border-radius: var(--pl-r);
	background: #fff;
}

.woocommerce #payment ul.payment_methods li.woocommerce-info {
	border-color: var(--pl-warn-line);
	background: var(--pl-warn-bg);
	color: var(--pl-warn-strong);
}

.woocommerce #payment ul.payment_methods li label {
	display: inline;
	font-weight: 600;
}

.woocommerce #payment div.payment_box {
	margin-top: var(--pl-s3);
	padding: var(--pl-s3) var(--pl-s4);
	border-radius: var(--pl-r-sm);
	background: var(--pl-bg-sunken);
	color: var(--pl-slate-600);
	font-size: 0.85rem;
}

.woocommerce #payment div.payment_box::before {
	display: none;
}

.woocommerce #payment .form-row.place-order {
	margin: 0;
}

.woocommerce #payment #place_order {
	width: 100%;
	padding: 1rem 1.5rem;
	font-size: 1rem;
}

.woocommerce-checkout #payment .terms {
	margin-top: var(--pl-s3);
	font-size: 0.82rem;
}

.pl-checkout-disclaimer {
	margin-top: var(--pl-s6);
}

/* --------------------------------------------------------------------------
   7. Account, thank-you, forms
   -------------------------------------------------------------------------- */
.woocommerce-account .woocommerce {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: clamp(24px, 4vw, 40px);
	padding-block: clamp(24px, 3vw, 40px);
	align-items: start;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-r);
	overflow: hidden;
	list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0;
	border-bottom: 1px solid var(--pl-line);
}

.woocommerce-account .woocommerce-MyAccount-navigation li:last-child {
	border-bottom: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: block;
	padding: 0.7rem 1rem;
	color: var(--pl-slate-700);
	font-size: 0.88rem;
	font-weight: 600;
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
	background: var(--pl-bg-alt);
	color: var(--pl-navy-900);
}

.woocommerce-account .woocommerce-MyAccount-navigation .is-active a {
	background: var(--pl-accent-soft);
	color: var(--pl-accent-strong);
}

.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.lost_reset_password {
	max-width: 520px;
	padding: var(--pl-s6);
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-r-lg);
	background: var(--pl-bg-alt);
}

.woocommerce .woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: var(--pl-s4);
}

.pl-thankyou-notice,
.woocommerce-order {
	margin-bottom: var(--pl-s5);
}

.woocommerce ul.order_details {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--pl-s4);
	margin: 0 0 var(--pl-s6);
	padding: var(--pl-s5);
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-r-lg);
	background: var(--pl-bg-alt);
	list-style: none;
}

.woocommerce ul.order_details li {
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--pl-slate-500);
	font-family: var(--pl-font-mono);
	font-size: 0.68rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.woocommerce ul.order_details li strong {
	display: block;
	margin-top: 0.35rem;
	color: var(--pl-navy-900);
	font-family: var(--pl-font-sans);
	font-size: 0.95rem;
	letter-spacing: 0;
	text-transform: none;
}

/* --------------------------------------------------------------------------
   8. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/*
	 * 购物车「删除」是个 26×26 的圆形链接，小于 40×40 的最小触控目标
	 * （scripts/check-responsive.mjs 会判为触控可用性缺陷）。手机上表格塌成卡片、
	 * 平板（≤1100）仍是表格，两种形态下都撑到 40×40；桌面保持原样。
	 */
	.woocommerce table.shop_table .product-remove a.remove {
		width: 40px;
		height: 40px;
	}
}

@media (max-width: 1024px) {
	.pl-shop-layout.pl-has-sidebar {
		grid-template-columns: minmax(0, 1fr);
	}

	.pl-shop-sidebar {
		position: static;
	}

	.pl-shop-sidebar__toggle {
		display: flex;
		margin-bottom: var(--pl-s4);
	}

	.pl-shop-sidebar__body {
		display: none;
	}

	.pl-shop-sidebar__body.is-open {
		display: block;
	}

	.woocommerce div.product {
		grid-template-columns: minmax(0, 1fr);
	}

	.pl-coa-panel {
		grid-template-columns: minmax(0, 1fr);
	}

	/*
	 * 结账页收成单栏。这里原来是 float/clear/width —— 版式改成栅格 + flex 之后
	 * 那些属性已经不起作用（右栏会一直挤在两列里），必须改成栅格自己收栏。
	 */
	.woocommerce form.checkout {
		grid-template-columns: minmax(0, 1fr);
	}

	.woocommerce form.checkout #customer_details,
	.woocommerce form.checkout #order_review {
		grid-column: 1;
	}

	/* 单栏时右侧在下方，不需要吸顶 */
	.woocommerce form.checkout #order_review {
		position: static;
		max-height: none;
		overflow: visible;
	}

	.woocommerce .cart-collaterals {
		grid-template-columns: minmax(0, 1fr);
	}

	.woocommerce-account .woocommerce {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 720px) {
	.woocommerce ul.products {
		grid-template-columns: minmax(0, 1fr);
	}

	/*
	 * 购物车「删除」的触控命中区在 ≤1100 统一切到 40×40（见文件前面的 1100 断点）。
	 */

	.woocommerce .woocommerce-result-count,
	.woocommerce .woocommerce-ordering {
		float: none;
		width: 100%;
	}

	.woocommerce .woocommerce-ordering select {
		width: 100%;
		min-width: 0;
	}

	.woocommerce-account-fields,
	.woocommerce-billing-fields__field-wrapper,
	.woocommerce-shipping-fields__field-wrapper {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Cart table collapses into stacked cards. */
	.woocommerce table.shop_table_responsive thead,
	.woocommerce-page table.shop_table_responsive thead {
		display: none;
	}

	.woocommerce table.shop_table_responsive tr,
	.woocommerce-page table.shop_table_responsive tr {
		display: block;
		border-bottom: 1px solid var(--pl-line);
	}

	.woocommerce table.shop_table_responsive tr td,
	.woocommerce-page table.shop_table_responsive tr td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--pl-s4);
		border-bottom: 0;
		text-align: right;
	}

	.woocommerce table.shop_table_responsive tr td::before {
		content: attr(data-title);
		color: var(--pl-slate-500);
		font-family: var(--pl-font-mono);
		font-size: 0.68rem;
		font-weight: 600;
		letter-spacing: 0.1em;
		text-transform: uppercase;
	}

	.woocommerce div.product form.cart {
		padding: var(--pl-s4);
	}
}