/* WooCommerce overrides — modern card-style product grid */

.woocommerce-main {
	max-width: 1200px;
	margin: 0 auto;
	padding: 3rem 1rem;
}

/* Breadcrumb — shop, product, checkout, wherever woocommerce_breadcrumb()
   is used. Previously just browser-default black link text with no
   spacing; this matches the site's muted-text/navy-accent treatment used
   everywhere else instead. */

.woocommerce-breadcrumb {
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--pl-muted, #94a3b8);
	margin: 0 0 1rem;
}

.woocommerce-breadcrumb a {
	color: var(--pl-muted, #94a3b8);
	text-decoration: none;
	transition: color 0.15s ease;
}

.woocommerce-breadcrumb a:hover {
	color: var(--pl-navy, #0b1120);
	text-decoration: underline;
}

/* Shop/category archive banner — smaller echo of the homepage hero */

.shop-banner {
	position: relative;
	overflow: hidden;
	background: var(--pl-navy, #0b1120);
	color: #fff;
	margin: -3rem -1rem 2rem;
	padding: 2.5rem 1.5rem;
}

.shop-banner::before,
.shop-banner::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	filter: blur(10px);
	z-index: 0;
	pointer-events: none;
}

.shop-banner::before {
	width: 320px;
	height: 320px;
	top: -140px;
	left: 6%;
	background: radial-gradient(circle at 35% 35%, rgba(59, 91, 219, 0.5), transparent 70%);
}

.shop-banner::after {
	width: 220px;
	height: 220px;
	top: 20%;
	right: 8%;
	background: radial-gradient(circle at 60% 40%, rgba(168, 85, 247, 0.22), transparent 70%);
}

.shop-banner .container {
	position: relative;
	z-index: 2;
}

.shop-banner__title {
	font-family: var(--pl-font-heading, 'Poppins', sans-serif);
	font-weight: 700;
	font-size: clamp(1.6rem, 3vw, 2.25rem);
	margin: 0;
}

/* Horizontal search + filter bar above the shop/category product grid */

.shop-filter-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
	margin-bottom: 2rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--pl-border, #e2e8f0);
}

.shop-search-form {
	display: flex;
	flex: 1 1 240px;
	max-width: 320px;
}

.shop-search-form .form-control {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.shop-search-form .btn-search {
	border: 1px solid var(--pl-border, #e2e8f0);
	border-left: 0;
	border-top-right-radius: var(--pl-radius-sm, 8px);
	border-bottom-right-radius: var(--pl-radius-sm, 8px);
	background: var(--pl-navy, #0b1120);
	color: #fff;
	padding: 0 1.1rem;
	font-size: 0.9rem;
	cursor: pointer;
}

.shop-filter-widgets {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
}

.shop-filter-widgets .widget {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.shop-filter-widgets .widget-title {
	font-family: var(--pl-font-heading, 'Poppins', sans-serif);
	font-size: 0.85rem;
	font-weight: 600;
	margin: 0;
	white-space: nowrap;
}

.shop-filter-widgets select {
	min-width: 9rem;
}

/* Both the homepage "In Stock" grid and the shop/category filter bar render
   the sort dropdown inside .shop-filter-bar itself (next to search, same
   row) instead of core's separate float:left/float:right result-count/
   ordering row — float has no effect in this flex container, so pin it to
   the row's right edge with margin-left instead. .woocommerce-ordering is
   a <form> element (core's loop/orderby.php template) that picks up a
   default margin-bottom from somewhere upstream (Bootstrap's form reset,
   most likely) which .shop-search-form doesn't have — align-items:center
   on the row centers each item's margin box, so that lopsided bottom
   margin alone was enough to visibly shift the dropdown up relative to
   the search box. Zero it out explicitly rather than relying on inherited
   resets. */
.shop-filter-bar .woocommerce-ordering {
	float: none;
	margin: 0 0 0 auto;
}

/* Below ~576px the search form and sort dropdown no longer fit on one row;
   `margin-left: auto` above then just strands the dropdown alone on its own
   line, right-aligned against the search form's left alignment. Stack both
   full-width instead so the row reflows cleanly all the way down to 0px. */
@media (max-width: 576px) {
	.shop-filter-bar {
		flex-direction: column;
		align-items: stretch;
	}

	.shop-search-form {
		/* .shop-search-form's base rule sets `flex: 1 1 240px`, a basis meant
		   for the row layout's width. Flipping to flex-direction:column above
		   reinterprets that same 240px as a *height* basis instead, which is
		   what was blowing the search box up to ~240px tall — reset it back
		   to an auto height/width basis here. */
		flex: 1 1 auto;
		max-width: none;
	}

	.shop-filter-bar .woocommerce-ordering {
		margin-left: 0;
		width: 100%;
	}

	.shop-filter-bar .woocommerce-ordering .orderby {
		width: 100%;
	}
}

/* Result count + sort-by row above the product grid. Both elements are
   plain siblings with no shared wrapper, so floats (not flex) put them on
   the same line — `clear: both` on ul.products below stops the grid from
   wrapping around them. */
.woocommerce-result-count {
	float: left;
	margin: 0;
	padding: 0.5rem 0;
	color: var(--pl-muted, #64748b);
	font-size: 0.9rem;
}

.woocommerce-ordering {
	float: right;
	display: flex;
	align-items: center;
	margin: 0;
}

.woocommerce-ordering .orderby {
	border: 1px solid var(--pl-border, #e2e8f0);
	border-radius: var(--pl-radius-sm, 8px);
	background: #fff;
	padding: 0.5rem 1rem;
	font-family: var(--pl-font-body, 'Inter', sans-serif);
	font-size: 0.9rem;
	color: var(--pl-ink, #0f172a);
	cursor: pointer;
	transition: border-color 0.2s ease;
}

.woocommerce-ordering .orderby:hover {
	border-color: var(--pl-navy, #0b1120);
}

.woocommerce-ordering .orderby:focus {
	outline: none;
	border-color: var(--pl-navy, #0b1120);
	box-shadow: 0 0 0 3px rgba(11, 17, 32, 0.1);
}

.woocommerce ul.products {
	clear: both;
	display: flex;
	flex-wrap: wrap;
	gap: 1.75rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

/* WooCommerce core adds a float-era clearfix (::before/::after with content) to
   ul.products. Inside a flex container those pseudo-elements become real flex
   items, shifting every product over by one slot and breaking row alignment. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none;
	display: none;
}

.woocommerce ul.products li.product {
	/* WooCommerce core (woocommerce-layout.css) still ships a float-era
	   margin (0 3.8% 2.992em 0) for this selector. Spacing here is handled
	   entirely by the flex `gap` above, so it must be zeroed out — otherwise
	   it stacks on top of the gap and overflows a 4-per-row layout to 3. */
	margin: 0;
	float: none;
	width: calc(25% - 1.3125rem);
	text-align: left;
	background: transparent;
	transition: opacity 0.2s ease;
}

.woocommerce ul.products li.product:hover {
	opacity: 0.92;
}

.woocommerce ul.products li.product a {
	text-decoration: none;
	color: inherit;
	display: block;
}

.woocommerce ul.products li.product img {
	width: 100%;
	aspect-ratio: 1 / 1;
	/* Hard safety cap: on a browser/webview that doesn't honor aspect-ratio
	   (seen on a real device — the ratio wasn't constraining height at all,
	   even though the background-color from this same rule did apply), a
	   product image with no known/failed intrinsic size can otherwise grow
	   unbounded and run the card hundreds of px down the page. object-fit
	   still crops sensibly against this cap even when aspect-ratio is ignored. */
	max-height: 400px;
	object-fit: cover;
	background: var(--pl-navy, #0b1120);
	margin-bottom: 1rem;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--pl-font-body, 'Inter', sans-serif);
	font-size: 0.95rem;
	font-weight: 500;
	margin-bottom: 0.25rem;
}

.woocommerce ul.products li.product .price {
	font-weight: 600;
	color: var(--pl-ink, #0f172a);
}

.woocommerce ul.products li.product .star-rating {
	margin: 0.35rem 0 0;
}

/* Shop page grouped-by-category sections (peplaunchpad_render_shop_by_category()) */

.shop-category-group {
	margin-bottom: 3rem;
}

.shop-category-group + .shop-category-group {
	padding-top: 3rem;
	border-top: 1px solid var(--pl-border, #e2e8f0);
}

.shop-category-group__title {
	font-family: var(--pl-font-heading, 'Poppins', sans-serif);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 1.1rem;
	margin-bottom: 1.75rem;
}

/* Shop/category archive pagination */

.woocommerce-pagination {
	margin: 3rem 0 1rem;
}

.woocommerce-pagination .page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.woocommerce-pagination .page-numbers li {
	display: flex;
}

.woocommerce-pagination .page-numbers a.page-numbers,
.woocommerce-pagination .page-numbers span.page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.75rem;
	border: 1px solid var(--pl-border, #e2e8f0);
	border-radius: var(--pl-radius-sm, 8px);
	font-family: var(--pl-font-body, 'Inter', sans-serif);
	font-size: 0.9rem;
	color: var(--pl-ink, #0f172a);
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.woocommerce-pagination .page-numbers a.page-numbers:hover {
	border-color: var(--pl-navy, #0b1120);
	background: var(--pl-surface, #f8fafc);
}

.woocommerce-pagination .page-numbers span.page-numbers.current {
	background: var(--pl-navy, #0b1120);
	border-color: var(--pl-navy, #0b1120);
	color: #fff;
	font-weight: 600;
}

.woocommerce-pagination .page-numbers a.next,
.woocommerce-pagination .page-numbers a.prev {
	font-size: 1rem;
}

/* Single product page */

.woocommerce div.product {
	padding: 1rem 0 2rem;
}

/* .woocommerce-product-gallery/.summary are floated left/right by
   WooCommerce's own default styling with no clearfix — without this, the
   container collapses to the shorter column's height and anything
   following overlaps the taller one. */
.woocommerce div.product::after {
	content: "";
	display: table;
	clear: both;
}

.woocommerce div.product .woocommerce-product-gallery {
	border-radius: var(--pl-radius, 14px);
	overflow: hidden;
	box-shadow: var(--pl-shadow, 0 4px 16px rgba(15, 23, 42, 0.06));
}

.woocommerce div.product .woocommerce-product-gallery img {
	border-radius: var(--pl-radius, 14px);
}

.woocommerce div.product .flex-control-thumbs li img {
	border-radius: var(--pl-radius-sm, 8px);
	opacity: 0.6;
	transition: opacity 0.15s ease;
}

.woocommerce div.product .flex-control-thumbs li img.flex-active,
.woocommerce div.product .flex-control-thumbs li img:hover {
	opacity: 1;
}

.woocommerce div.product .summary {
	padding-left: 1rem;
}

.woocommerce div.product .summary .product_title {
	font-family: var(--pl-font-heading, 'Poppins', sans-serif);
	font-weight: 700;
	margin-bottom: 0.5rem;
}

.woocommerce div.product .summary p.price,
.woocommerce div.product .summary .price {
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--bs-primary, #2563eb);
	margin: 0.75rem 0 0.25rem;
}

.peplaunchpad-price-subtitle {
	color: var(--pl-muted, #64748b);
	font-size: 0.85rem;
	margin: 0 0 1.25rem;
}

.woocommerce div.product .summary .woocommerce-product-details__short-description {
	color: var(--pl-muted, #64748b);
	margin-bottom: 1.5rem;
}

/* Variation swatches (replaces the default <select> dropdown) */

.woocommerce div.product table.variations {
	width: 100%;
	border: none;
	margin-bottom: 0.5rem;
}

.woocommerce div.product table.variations tbody,
.woocommerce div.product table.variations tr {
	display: block;
}

.woocommerce div.product table.variations tr {
	margin-bottom: 1.1rem;
}

.woocommerce div.product table.variations th.label {
	display: block;
	font-weight: 600;
	padding-bottom: 0.5rem;
	text-align: left;
}

.woocommerce div.product table.variations th.label label::before {
	content: "Select ";
}

.woocommerce div.product table.variations th.label label::after {
	content: " \2022  1 kit = 10 vials";
	font-weight: 400;
	color: var(--pl-muted, #64748b);
}

.woocommerce div.product table.variations td.value {
	display: block;
}

.variation-select-hidden {
	display: none !important;
}

.variation-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.variation-swatch {
	position: relative;
	overflow: hidden;
	min-width: 3.25rem;
	border: 1.5px solid transparent;
	background: var(--pl-surface, #f1f5f9);
	border-radius: 999px;
	padding: 0.6rem 1.25rem;
	font-weight: 600;
	font-size: 0.9rem;
	letter-spacing: 0.01em;
	color: var(--pl-ink, #0f172a);
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.variation-swatch:hover:not(:disabled) {
	border-color: var(--pl-navy, #0b1120);
	color: var(--pl-navy, #0b1120);
	transform: translateY(-2px);
}

.variation-swatch.selected {
	border-color: var(--pl-navy, #0b1120);
	background: var(--pl-navy, #0b1120);
	color: #fff;
	box-shadow: 0 6px 16px rgba(11, 17, 32, 0.28);
}

.variation-swatch.selected:hover:not(:disabled) {
	color: #fff;
	transform: none;
}

.variation-swatch:disabled {
	background: var(--pl-surface, #f8fafc);
	border-color: var(--pl-border, #e2e8f0);
	color: var(--pl-muted, #64748b);
	opacity: 0.6;
	cursor: not-allowed;
	box-shadow: none;
}

/*
 * Two distinct "unavailable" states:
 * - :disabled  → WooCommerce says this attribute combination doesn't exist at all.
 * - .out-of-stock → the combination is real but that specific variation has no stock;
 *   WooCommerce leaves the option enabled, so we flag it ourselves from the
 *   variation data and keep it clickable (selecting it still reveals WooCommerce's
 *   own "out of stock" message and disables Add to Cart).
 */
.variation-swatch.out-of-stock {
	background: var(--pl-surface, #f8fafc);
	border-color: var(--pl-border, #e2e8f0);
	color: var(--pl-muted, #64748b);
}

.variation-swatch.out-of-stock:hover:not(:disabled) {
	transform: none;
	box-shadow: none;
	border-color: var(--pl-border, #e2e8f0);
	color: var(--pl-muted, #64748b);
}

/* Diagonal "out of stock" strike, corner to corner, scales with box size */
.variation-swatch:disabled::after,
.variation-swatch.out-of-stock::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top right,
		transparent calc(50% - 1px),
		rgba(100, 116, 139, 0.65) 50%,
		transparent calc(50% + 1px)
	);
}

/* Selected-but-out-of-stock (shopper clicked it anyway): keep the dark fill,
   switch the strike to white so it still reads against the dark background. */
.variation-swatch.selected.out-of-stock {
	background: var(--pl-navy, #0b1120);
	color: #fff;
}

.variation-swatch.selected.out-of-stock::after {
	background: linear-gradient(
		to top right,
		transparent calc(50% - 1px),
		rgba(255, 255, 255, 0.85) 50%,
		transparent calc(50% + 1px)
	);
}

.woocommerce div.product form.cart {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1.5rem;
}

.woocommerce div.product form.cart .quantity {
	margin: 0;
}

/* Quantity stepper: native spin arrows hidden everywhere, replaced by the
   +/- buttons main.js adds around every .quantity block (product page,
   cart, mini-cart). The step itself (10 for Domestic, 5 for International)
   comes from woocommerce_quantity_input_args in inc/woocommerce.php — this
   is purely the visual side, agnostic to what that step actually is. */

.quantity input.qty {
	-moz-appearance: textfield;
	appearance: textfield;
}

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

.peplaunchpad-quantity {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--pl-border, #e2e8f0);
	border-radius: var(--pl-radius-sm, 8px);
	overflow: hidden;
}

.peplaunchpad-quantity input.qty {
	border: none;
	border-radius: 0;
	width: 3.5rem;
	padding: 0.6rem 0.25rem;
	text-align: center;
}

.peplaunchpad-qty-btn {
	background: var(--pl-surface, #f8fafc);
	border: none;
	width: 2.25rem;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	color: var(--pl-ink, #0f172a);
	transition: background-color 0.15s ease;
}

.peplaunchpad-qty-btn:hover {
	background: var(--pl-border, #e2e8f0);
}

.peplaunchpad-qty-btn--minus {
	border-right: 1px solid var(--pl-border, #e2e8f0);
}

.peplaunchpad-qty-btn--plus {
	border-left: 1px solid var(--pl-border, #e2e8f0);
}

.woocommerce div.product form.cart .single_add_to_cart_button {
	background: var(--pl-navy, #0b1120);
	border: none;
	border-radius: var(--pl-radius-sm, 8px);
	color: #fff;
	font-weight: 600;
	padding: 0.75rem 2rem;
	box-shadow: 0 6px 16px rgba(11, 17, 32, 0.28);
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.woocommerce div.product form.cart .single_add_to_cart_button:hover {
	background: var(--pl-navy, #0b1120);
	opacity: 0.9;
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(11, 17, 32, 0.35);
}

/* "In stock" / "Out of stock" badge above the product title */

.peplaunchpad-stock-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--pl-muted, #64748b);
	margin: 0 0 0.5rem;
}

.peplaunchpad-stock-badge__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}

.peplaunchpad-stock-badge.in-stock {
	color: #16a34a;
}

.peplaunchpad-stock-badge.low-stock {
	color: #b45309;
}

.peplaunchpad-stock-badge.out-of-stock {
	color: #dc2626;
}

.peplaunchpad-stock-badge.in-stock .peplaunchpad-stock-badge__dot {
	background: #22c55e;
}

.peplaunchpad-stock-badge.low-stock .peplaunchpad-stock-badge__dot {
	background: #ca8a04;
}

.peplaunchpad-stock-badge.out-of-stock .peplaunchpad-stock-badge__dot {
	background: #ef4444;
}

/* WooCommerce's own stock line — printed above the Add to Cart form on the
   single-product page, and re-rendered for whichever variation is selected */

.woocommerce div.product p.stock {
	font-size: 0.9rem;
	font-weight: 600;
	margin: 0 0 1rem;
}

.woocommerce div.product p.stock.in-stock {
	color: #16a34a;
}

.woocommerce div.product p.stock.low-stock {
	color: #b45309;
}

.woocommerce div.product p.stock.out-of-stock {
	color: #dc2626;
}

.woocommerce div.product .product_meta {
	font-size: 0.85rem;
	color: var(--pl-muted, #64748b);
	border-top: 1px solid var(--pl-border, #e2e8f0);
	padding-top: 1rem;
}

.woocommerce div.product .woocommerce-tabs {
	margin-top: 3rem;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	border-bottom: 1px solid var(--pl-border, #e2e8f0);
	padding-left: 0;
	list-style: none;
	display: flex;
	gap: 0.5rem;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: 0.75rem 1.25rem;
	font-weight: 600;
	color: var(--pl-muted, #64748b);
	text-decoration: none;
	border-radius: var(--pl-radius-sm, 8px) var(--pl-radius-sm, 8px) 0 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--bs-primary, #2563eb);
	background: var(--pl-surface, #f8fafc);
}

.woocommerce div.product .woocommerce-tabs .panel {
	padding: 2rem 0;
}

/*
 * WooCommerce's own default styling floats .woocommerce-product-gallery and
 * .summary side by side (left/right) rather than using flex/grid — with no
 * clearfix on the shared .product parent. Since the two columns are rarely
 * the same height (an out-of-stock product's summary is shorter than one
 * with a full add-to-cart form, etc.), whatever follows just flows in
 * immediately after the *shorter* column ends, landing visually on top of
 * the still-floated taller one. Clearing this ourselves — the fix belongs
 * here since .related.products is the first thing that follows on every
 * single-product page.
 */
.woocommerce div.product .related.products {
	clear: both;
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--pl-border, #e2e8f0);
}

.woocommerce div.product .related.products > h2 {
	font-weight: 700;
	text-align: left;
	margin-bottom: 2rem;
}

@media (max-width: 992px) {
	.woocommerce div.product .summary {
		padding-left: 0;
		margin-top: 1.5rem;
	}
}

/* Tablet and phone both use 2 columns — the 769px min-width keeps this from
   overlapping the phone rule below; both would otherwise match at once and
   only source order (this block comes first) would decide the winner. */
@media (min-width: 769px) and (max-width: 992px) {
	.woocommerce ul.products li.product {
		width: calc(50% - 0.875rem);
	}
}

/* WooCommerce's own woocommerce-smallscreen.css (active only <=768px, via
   the <link media> on its own tag) sets `.woocommerce ul.products[class*=
   columns-] li.product { width: 48% }` — the attribute selector makes that
   MORE specific than a plain `ul.products li.product` rule, so it silently
   wins over the phone-width rule below no matter what this file's source
   order is. Matching the same selector shape (plus loading after it in the
   page <head>) is what makes ours win instead. Also narrows the gap between
   cards — the desktop 1.75rem gap eats too much of a phone's width once
   there are 2 columns instead of 1. */
@media (max-width: 768px) {
	.woocommerce ul.products {
		gap: 1rem;
	}

	.woocommerce ul.products[class*="columns-"] li.product {
		width: calc(50% - 0.5rem);
	}
}

/* Stock-status badge in the product loop (shop, category archives, homepage grid) */

.woocommerce ul.products li.product .stock {
	font-size: 0.8rem;
	font-weight: 600;
	margin: 0.35rem 0 0;
}

.woocommerce ul.products li.product .stock.in-stock {
	color: #16a34a;
}

.woocommerce ul.products li.product .stock.low-stock {
	color: #b45309;
}

.woocommerce ul.products li.product .stock.out-of-stock {
	color: #dc2626;
}

/*
 * Card treatment for shop/category archives + single-product related
 * products (both render inside .woocommerce-main). The homepage uses a
 * separate .front-page .shop-grid wrapper and keeps the flat style above —
 * this rule has equal selector specificity to it, so it must stay declared
 * after it to win the cascade (not relying on !important).
 */
.woocommerce-main ul.products li.product {
	background: #fff;
	border-radius: var(--pl-radius, 14px);
	box-shadow: var(--pl-shadow, 0 4px 16px rgba(15, 23, 42, 0.06));
	padding: 1rem;
	transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.woocommerce-main ul.products li.product:hover {
	transform: translateY(-4px);
	box-shadow: var(--pl-shadow-hover, 0 12px 28px rgba(15, 23, 42, 0.12));
	opacity: 1;
}

.woocommerce-main ul.products li.product img {
	border-radius: var(--pl-radius-sm, 8px);
}

/*
 * Cart page (WooCommerce Cart block — `woocommerce/cart`, not the classic
 * shortcode/table template; markup and class names below come from that
 * block's own build, not our templates).
 */

.wp-block-woocommerce-cart {
	margin-top: 1rem;
}

/*
 * WC Blocks' own CSS targets `table.wc-block-cart-items` (element + class),
 * which is more specific than a plain class selector and wins regardless of
 * load order — matching that shape here is what makes our border stick.
 */
table.wc-block-cart-items {
	border: 1px solid var(--pl-border, #e2e8f0);
	border-radius: var(--pl-radius, 14px);
	overflow: hidden;
}

.wc-block-cart-items__header {
	font-family: var(--pl-font-heading, 'Poppins', sans-serif);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pl-muted, #64748b);
}

/* The row-level background above only actually shows through the first
   <th> in some browsers (a border-collapse rendering quirk) — setting it
   directly on every header cell guarantees a solid, uninterrupted band
   instead of isolated boxes behind just "Product" and "Total". */
.wc-block-cart-items__header th {
	padding: 1rem 1.5rem;
	background: var(--pl-surface, #f8fafc);
}

.wc-block-cart-items__row {
	border-top: 1px solid var(--pl-border, #e2e8f0);
}

.wc-block-cart-items__row td {
	padding: 1.5rem;
}

.wc-block-cart-item__image img {
	border-radius: var(--pl-radius-sm, 8px);
	background: var(--pl-navy, #0b1120);
}

.wc-block-components-product-name {
	font-family: var(--pl-font-body, 'Inter', sans-serif);
	font-weight: 600;
	color: var(--pl-ink, #0f172a);
	text-decoration: none;
}

.wc-block-components-product-name:hover {
	color: var(--bs-primary, #2563eb);
}

.wc-block-components-product-metadata {
	font-size: 0.85rem;
	color: var(--pl-muted, #64748b);
	margin-top: 0.25rem;
}

.wc-block-components-quantity-selector {
	border: 1px solid var(--pl-border, #e2e8f0);
	border-radius: var(--pl-radius-sm, 8px);
	overflow: hidden;
}

.wc-block-components-quantity-selector__input {
	font-family: var(--pl-font-body, 'Inter', sans-serif);
	color: var(--pl-ink, #0f172a);
}

.wc-block-components-quantity-selector__button {
	color: var(--pl-muted, #64748b);
}

.wc-block-components-quantity-selector__button:hover {
	color: var(--pl-navy, #0b1120);
	background: var(--pl-surface, #f8fafc);
}

.wc-block-cart-item__remove-link {
	color: var(--pl-muted, #64748b);
	font-size: 0.85rem;
	transition: color 0.2s ease;
}

.wc-block-cart-item__remove-link:hover {
	color: #b91c1c;
}

.wc-block-components-product-price__value {
	font-weight: 600;
	color: var(--pl-ink, #0f172a);
}

/* Totals sidebar */

/*
 * WC Blocks resets padding via `.wc-block-components-sidebar-layout
 * .wc-block-components-main, .wc-block-components-sidebar-layout
 * .wc-block-components-sidebar { padding: 0 }` — a 2-class descendant
 * selector, more specific than a single class. This element carries both
 * `wp-block-woocommerce-cart-totals-block` and `wc-block-components-sidebar`
 * classes, so chaining them here ties that specificity; loading after it
 * in the page is what then makes ours win.
 */
.wc-block-components-sidebar.wp-block-woocommerce-cart-totals-block {
	background: var(--pl-surface, #f8fafc);
	border: 1px solid var(--pl-border, #e2e8f0);
	border-radius: var(--pl-radius, 14px);
	padding: 1.75rem;
}

.wc-block-components-totals-item,
.wc-block-components-totals-shipping,
.wc-block-components-totals-footer-item {
	font-family: var(--pl-font-body, 'Inter', sans-serif);
	font-size: 0.9rem;
	color: var(--pl-ink, #0f172a);
}

.wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	color: var(--pl-muted, #64748b);
}

.wc-block-components-totals-footer-item {
	font-size: 1.1rem;
	font-weight: 700;
}

.wc-block-components-totals-item.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	color: var(--pl-ink, #0f172a);
}

.wc-block-components-totals-wrapper {
	border-top: 1px solid var(--pl-border, #e2e8f0);
}

.wc-block-components-totals-coupon-link {
	color: var(--pl-navy, #0b1120);
	font-weight: 600;
}

/* The "Apply" button itself has a dark (.contained) background from
   WooCommerce Blocks' own default button styling — it needs light text,
   not the navy used for the plain "Have a coupon?" toggle link above,
   which sits directly on the page background instead. */
.wc-block-components-totals-coupon__button {
	color: #fff;
	font-weight: 600;
}

.wc-block-components-totals-coupon__input input,
.wc-block-components-totals-coupon__button {
	border-radius: var(--pl-radius-sm, 8px);
}

.wc-block-cart__submit-button,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-components-button {
	background: var(--pl-navy, #0b1120) !important;
	border: none !important;
	border-radius: var(--pl-radius-sm, 8px) !important;
	font-weight: 600;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.wc-block-cart__submit-button:hover,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-components-button:hover {
	transform: translateY(-2px);
	box-shadow: var(--pl-shadow-hover, 0 12px 28px rgba(15, 23, 42, 0.12));
}

@media (max-width: 768px) {
	.wc-block-cart-items__row td {
		padding: 1rem;
	}

	.wp-block-woocommerce-cart-totals-block {
		margin-top: 2rem;
	}
}

.peplaunchpad-address-blocked {
	color: #b91c1c;
	font-size: 0.85rem;
	font-weight: 600;
	margin: 0.4rem 0 0;
}

/*
 * Order Protection card + offer/decline modals — built in
 * assets/js/shipping-protection.js as a styled proxy in front of the real
 * (visually hidden but still accessible) checkout checkbox field registered
 * in inc/shipping-protection.php. Class names (protection-card,
 * protection-badge, ...) matched to a supplied HTML mockup rather than the
 * theme's usual peplaunchpad- prefix.
 */

.peplaunchpad-shipping-protection-original {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.protection-card {
	position: relative;
	margin: 1.5rem 0;
	padding: 1.25rem 1.5rem;
	background: #fff;
	border: 2px solid #22c55e;
	border-radius: var(--pl-radius, 14px);
	transition: background 0.15s ease;
}

.protection-card.protection-card-active {
	background: #f0fdf4;
}

.protection-badge {
	position: absolute;
	top: -1px;
	right: -1px;
	padding: 0.35rem 0.9rem;
	background: #16a34a;
	color: #fff;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	border-radius: 0 calc(var(--pl-radius, 14px) - 2px) 0 var(--pl-radius-sm, 8px);
}

/*
 * Only two flex items here (.protection-info and .protection-price-wrap) —
 * deliberately, rather than checkbox/shield/info/price-wrap all as direct
 * siblings. With four independently-wrapping items, a narrow card produced
 * an unpredictable reflow (info and price-wrap each wrapping onto their own
 * line at different widths) that left .protection-price-wrap's ribbon-
 * clearance margin-top stranded as a large dead gap wherever it landed. Two
 * items means exactly one wrap point, always in the same place.
 */
.protection-card-main {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem 1.5rem;
	cursor: pointer;
	/* Clears the "Recommended" badge, which is absolutely positioned over
	   the card's top-right corner — applied here, once, so it holds
	   regardless of whether .protection-info and .protection-price-wrap
	   end up sharing a row or stacked. */
	margin-top: 0.75rem;
}

.protection-info {
	min-width: 0;
	flex: 1 1 260px;
}

.protection-header {
	display: flex;
	align-items: center;
	gap: 0.85rem;
}

.protection-checkbox {
	appearance: none;
	-webkit-appearance: none;
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	margin: 0;
	padding: 0;
	background: #fff;
	border: 2px solid #86efac;
	border-radius: 6px;
	position: relative;
	pointer-events: none;
}

.protection-card.protection-card-active .protection-checkbox {
	background: #16a34a;
	border-color: #16a34a;
}

.protection-card.protection-card-active .protection-checkbox::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 44%;
	width: 6px;
	height: 11px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: translate(-50%, -55%) rotate(45deg);
}

.protection-shield {
	flex-shrink: 0;
	display: block;
	color: #16a34a;
}

.protection-title {
	margin: 0;
	font-family: var(--pl-font-heading, inherit);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--pl-ink, #0f172a);
}

.protection-desc {
	margin: 0.5rem 0 0;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--pl-muted, #64748b);
}

.protection-desc a {
	color: #2563eb;
}

.protection-price-wrap {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.5rem;
	margin-left: auto;
}

.protection-price {
	font-size: 1.4rem;
	font-weight: 800;
	color: #16a34a;
	line-height: 1;
}

.protection-price-sub {
	font-size: 0.75rem;
	color: var(--pl-muted, #64748b);
}

.protection-add-btn {
	padding: 0.55rem 1.1rem;
	background: #15803d;
	color: #fff;
	border: none;
	border-radius: var(--pl-radius-sm, 8px);
	font-weight: 700;
	font-size: 0.85rem;
	cursor: pointer;
	white-space: nowrap;
	pointer-events: none;
	width: 90px;
}

.protection-card:not(.protection-card-active) .protection-add-btn {
	background: #fff;
	color: #16a34a;
	border: 1px solid #16a34a;
}

.protection-card--loading .protection-add-btn {
	opacity: 0.6;
}

.protection-status {
	display: none;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--pl-muted, #64748b);
}

.protection-card--loading .protection-status {
	display: flex;
}

.protection-spinner {
	width: 12px;
	height: 12px;
	border: 2px solid #bbf7d0;
	border-top-color: #16a34a;
	border-radius: 50%;
	animation: protection-spin 0.7s linear infinite;
}

@keyframes protection-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (max-width: 600px) {
	.protection-card {
		padding: 1.1rem;
	}

	.protection-price-wrap {
		width: 100%;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.protection-price-info {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.1rem;
	}
}

/*
 * Offer modal — appended to <body> the first time it's opened by
 * assets/js/shipping-protection.js (auto-opened once per checkout session,
 * or on demand from the card / decline-confirm modal), so its fixed overlay
 * isn't constrained by the checkout form's own stacking/overflow context.
 */

.protection-offer-overlay,
.protection-confirm-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(10, 18, 32, 0.72);
	align-items: center;
	justify-content: center;
	padding: 1.25rem;
	z-index: 100000;
}

.protection-offer-overlay.protection-offer-overlay--open,
.protection-confirm-overlay.protection-confirm-overlay--open {
	display: flex;
}

.protection-offer-modal,
.protection-confirm-modal {
	position: relative;
	background: #fff;
	border-radius: 16px;
	max-width: 445px;
	width: 100%;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
}

.protection-confirm-modal {
	max-width: 395px;
}

.protection-offer-header {
	flex-shrink: 0;
	background: linear-gradient(135deg, #16a34a, #15803d);
	padding: 1.5rem 1.6rem 1.25rem;
	text-align: center;
	color: #fff;
}

.protection-offer-shield-wrap {
	width: 54px;
	height: 54px;
	margin: 0 auto 0.7rem;
	background: rgba(255, 255, 255, 0.16);
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.protection-offer-header h2 {
	margin: 0;
	font-size: 1.14rem;
}

.protection-offer-header p {
	margin: 0.3rem 0 0;
	font-size: 0.8rem;
	opacity: 0.92;
}

.protection-offer-body {
	padding: 1.25rem 1.6rem 1.5rem;
	overflow-y: auto;
}

.protection-offer-lead {
	margin: 0 0 0.9rem;
	font-size: 0.85rem;
	color: #374151;
	line-height: 1.6;
	text-align: center;
}

.protection-cover {
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	border-radius: 11px;
	padding: 0.75rem 0.9rem;
	margin-bottom: 0.9rem;
}

.protection-cover-row {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	font-size: 0.79rem;
	color: #1f2937;
	line-height: 1.45;
	padding: 0.25rem 0;
}

.protection-cover-tick {
	width: 17px;
	height: 17px;
	border-radius: 50%;
	background: #16a34a;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 1px;
}

.protection-price-block {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	background: #fff;
	border: 1.5px solid #bbf7d0;
	border-radius: 11px;
	padding: 0.75rem 1rem;
	margin-bottom: 0.9rem;
}

.protection-price-block-left {
	display: flex;
	align-items: center;
	gap: 0.55rem;
}

.protection-price-block-amt {
	font-size: 1.6rem;
	font-weight: 800;
	color: #16a34a;
	line-height: 1;
}

.protection-price-block-tag {
	font-size: 0.64rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #16a34a;
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	padding: 0.2rem 0.5rem;
	border-radius: 20px;
	width: max-content;
}

.protection-price-block-calc {
	font-size: 0.75rem;
	color: var(--pl-muted, #64748b);
	text-align: right;
	line-height: 1.3;
}

.protection-offer-policy-link {
	display: block;
	text-align: center;
	font-size: 0.8rem;
	color: #16a34a;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
	margin: 0.4rem 0 0.9rem;
}

.protection-offer-policy-link:hover {
	color: #15803d;
}

.protection-btn {
	width: 100%;
	border: none;
	border-radius: 10px;
	padding: 0.9rem;
	font-size: 0.92rem;
	font-weight: 700;
	cursor: pointer;
	font-family: inherit;
	transition: 0.15s ease;
}

.protection-btn-add {
	background: #16a34a;
	color: #fff;
	box-shadow: 0 4px 14px rgba(15, 138, 77, 0.28);
}

.protection-btn-add:hover {
	background: #15803d;
}

.protection-btn-decline {
	background: #fff;
	color: #4b5563;
	border: 1.5px solid #e6e6e6;
	margin-top: 0.65rem;
}

.protection-btn-decline:hover {
	border-color: #c5ccd6;
	background: #fafbfc;
}

.protection-offer-agree {
	font-size: 0.68rem;
	color: #9aa2ad;
	text-align: center;
	margin: 0.8rem 0 0;
	line-height: 1.5;
}

/* In-modal slide-in policy panel — covers the offer modal in place rather
   than opening a new overlay, so the shopper never leaves the offer flow. */

.protection-policy-panel {
	position: absolute;
	inset: 0;
	background: #fff;
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
	z-index: 5;
}

.protection-policy-panel.protection-policy-panel--open {
	transform: none;
}

.protection-policy-panel-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid #e6e6e6;
	flex-shrink: 0;
}

.protection-policy-panel-back {
	background: #f2f4f7;
	border: none;
	border-radius: 8px;
	width: 34px;
	height: 34px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: #374151;
}

.protection-policy-panel-header h3 {
	margin: 0;
	font-size: 0.95rem;
}

.protection-policy-panel-body {
	padding: 1.1rem 1.35rem 1.25rem;
	overflow-y: auto;
	font-size: 0.78rem;
	line-height: 1.55;
	color: #374151;
}

.protection-policy-panel-body h4 {
	font-size: 0.76rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #16a34a;
	margin: 1rem 0 0.45rem;
}

.protection-policy-panel-body h4:first-child {
	margin-top: 0;
}

.protection-policy-panel-body h4.protection-policy-panel-x {
	color: #9ca3af;
}

.protection-policy-panel-body ul {
	margin: 0 0 0.4rem;
	padding-left: 1.1rem;
}

.protection-policy-panel-body li {
	margin: 0.25rem 0;
}

.protection-policy-panel-body p {
	margin: 0 0 0.5rem;
}

.protection-policy-panel-body a {
	color: #16a34a;
}

.protection-policy-panel-eff {
	font-size: 0.7rem;
	color: #9ca3af;
	margin: 0 0 0.25rem;
}

.protection-policy-panel-sh {
	font-size: 0.75rem;
	font-weight: 700;
	color: #374151;
	margin: 0.6rem 0 0.25rem;
}

.protection-policy-panel-footer {
	padding: 0.9rem 1.35rem;
	border-top: 1px solid #e6e6e6;
	flex-shrink: 0;
}

.protection-policy-panel-footer .protection-btn {
	margin: 0;
}

/* Decline-confirm modal ("Are you sure?") */

.protection-confirm-head {
	padding: 1.5rem 1.6rem 0;
	text-align: center;
}

.protection-confirm-warn {
	width: 52px;
	height: 52px;
	margin: 0 auto 0.75rem;
	background: #fff4e5;
	border-radius: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #d97706;
}

.protection-confirm-head h3 {
	margin: 0;
	font-size: 1.12rem;
}

.protection-confirm-head p {
	margin: 0.4rem 0 0;
	font-size: 0.82rem;
	color: var(--pl-muted, #64748b);
}

.protection-confirm-body {
	padding: 0.9rem 1.6rem 1.5rem;
}

.protection-confirm-mini {
	background: #f7f8fa;
	border: 1px solid #e6e6e6;
	border-radius: 10px;
	padding: 0.7rem 0.8rem;
	margin: 0.9rem 0;
}

.protection-confirm-mini-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.76rem;
	color: #4b5563;
	padding: 0.2rem 0;
}

.protection-confirm-x {
	color: #dc2626;
	font-weight: 700;
}

.protection-confirm-review {
	text-align: center;
	margin: 0.75rem 0 0;
}

.protection-confirm-review-link {
	font-size: 0.78rem;
	color: #16a34a;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}