/* Pine Peptides — cart & checkout redesign
 * ponytail: pure CSS over stock WooCommerce shortcode markup — no template
 * overrides, so Woo updates can't break it. Loaded only on cart/checkout. */

:root {
	--ppc-panel: rgba(8, 23, 17, .34);
	--ppc-panel-2: rgba(8, 23, 17, .55);
	--ppc-line: rgba(255, 255, 255, .12);
	--ppc-line-2: rgba(255, 255, 255, .22);
	--ppc-gold: #c6a662;
	--ppc-gold-2: #fec13d;
	--ppc-dark: #0f2919;
	--ppc-muted: rgba(255, 255, 255, .62);
	/* Woo's stock #a00 is unreadable on the dark green; this coral clears
	   7:1 against the panel and still reads as "error" next to the gold. */
	--ppc-error: #ff9b8a;
	--ppc-r: 18px;
}

/* ============================================================
 * SHARED SHELL
 * ============================================================ */
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce {
	font-family: "Jost", sans-serif;
	color: #fff;
}
/* Side gutters only — the Elementor container already supplies 50px top/bottom,
 * and padding on #main would expose the white page background instead. */
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce {
	padding: 0 20px;
}
@media (min-width: 992px) {
	.woocommerce-cart .woocommerce,
	.woocommerce-checkout .woocommerce { padding: 0; }
}

/* The inner banner carries margin-bottom:70px (style.css) and the page itself is
 * white, so a white band showed above/below Elementor's green band. Painting the
 * page wrapper the same green closes both gaps whatever their source.
 * ponytail: colour mirrors the Elementor container bg (#1B4332) — keep in sync. */
.woocommerce-cart .white-space-fix,
.woocommerce-checkout .white-space-fix { margin-bottom: 0 !important; }
.woocommerce-cart #innerpage-wrapper,
.woocommerce-checkout #innerpage-wrapper { background-color: #1b4332; }

/* body carries a global background !important (style.css), so any height the
 * wrapper doesn't cover — a short cart, a stray margin, an empty Elementor
 * section — shows up as a pale green band above the footer. Painting the body
 * itself closes the gap whatever its source, instead of chasing each margin.
 * ponytail: same green as the wrapper above — keep the two in sync. */
body.woocommerce-cart,
body.woocommerce-checkout { background: #1b4332 !important; }

/* Card shell used by every panel */
.ppc-card,
.woocommerce-cart .woocommerce-cart-form,
.woocommerce-cart .cart_totals,
.woocommerce-checkout #customer_details .woocommerce-billing-fields,
.woocommerce-checkout #customer_details .woocommerce-shipping-fields,
.woocommerce-checkout #customer_details .woocommerce-additional-fields,
.woocommerce-checkout #order_review {
	background: var(--ppc-panel);
	border: 1px solid var(--ppc-line);
	border-radius: var(--ppc-r);
	padding: 20px;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
}

/* Section headings */
.woocommerce-cart .woocommerce h2,
.woocommerce-checkout .woocommerce h3,
.woocommerce-checkout #order_review_heading {
	font-family: "Parkinsans", "Jost", sans-serif;
	font-size: 24px;
	line-height: 1.2;
	font-weight: 600;
	color: #fff;
	margin: 0 0 22px;
	letter-spacing: -.01em;
}

/* Notices — replace the flat gold block with a soft alert */
.woocommerce-cart .woocommerce-info,
.woocommerce-checkout .woocommerce-info,
.woocommerce-cart .woocommerce-message,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-error,
.woocommerce-cart .woocommerce-error {
	background: rgba(198, 166, 98, .14) !important;
	border: 1px solid rgba(198, 166, 98, .38) !important;
	border-left: 3px solid var(--ppc-gold) !important;
	border-radius: 12px !important;
	color: #fff !important;
	padding: 16px 20px 16px 20px !important;
	font-size: 16px;
	line-height: 24px;
	list-style: none;
	margin: 0 0 24px;
}
.woocommerce-cart .woocommerce-info::before,
.woocommerce-checkout .woocommerce-info::before,
.woocommerce-cart .woocommerce-message::before,
.woocommerce-checkout .woocommerce-message::before,
.woocommerce-checkout .woocommerce-error::before,
.woocommerce-cart .woocommerce-error::before {
	display: none !important;
}
.woocommerce-cart .woocommerce-info a,
.woocommerce-checkout .woocommerce-info a,
.woocommerce-cart .woocommerce-message a:not(.button),
.woocommerce-checkout .woocommerce-message a:not(.button),
.woocommerce-cart .woocommerce-error a,
.woocommerce-checkout .woocommerce-error a {
	color: var(--ppc-gold-2) !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ============================================================
 * BUTTONS
 * ============================================================ */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-cart #main .cart_totals .btn,
.woocommerce-checkout #place_order,
.woocommerce .return-to-shop a {
	display: block;
	width: 100%;
	background: linear-gradient(90deg, #c4892f 0%, #fccb55 40%, #e3a95f 72%, #c88a37 100%) !important;
	border: 0 !important;
	border-radius: 999px !important;
	color: #14331f !important;
	font-family: "Parkinsans", "Jost", sans-serif !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	padding: 18px 28px !important;
	text-align: center;
	text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
	box-shadow: 0 10px 24px rgba(198, 166, 98, .22);
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-cart #main .cart_totals .btn:hover,
.woocommerce-checkout #place_order:hover,
.woocommerce .return-to-shop .button:hover {
	transform: translateY(-2px);
	filter: brightness(1.06);
	box-shadow: 0 14px 30px rgba(198, 166, 98, .32);
	color: #14331f !important;
}
.woocommerce-cart .wc-proceed-to-checkout { padding: 0; margin: 22px 0 0; }

/* Secondary / ghost buttons (apply coupon, update cart) */
.woocommerce-cart #main .actions button,
.woocommerce-cart .actions .button,
.woocommerce-checkout .checkout_coupon .button {
	background: transparent !important;
	border: 1px solid var(--ppc-line-2) !important;
	border-radius: 999px !important;
	color: #fff !important;
	font-family: "Jost", sans-serif !important;
	font-size: 16px !important;
	font-weight: 500;
	padding: 13px 24px !important;
	transition: background .18s ease, border-color .18s ease, color .18s ease;
	white-space: nowrap;
}
.woocommerce-cart #main .actions button:hover,
.woocommerce-cart .actions .button:hover,
.woocommerce-checkout .checkout_coupon .button:hover {
	background: var(--ppc-gold) !important;
	border-color: var(--ppc-gold) !important;
	color: var(--ppc-dark) !important;
}
.woocommerce-cart #main .actions button[disabled] { opacity: .45; }

/* ============================================================
 * INPUTS (shared)
 * ============================================================ */
.woocommerce-cart .woocommerce input.input-text,
.woocommerce-checkout .woocommerce input.input-text,
.woocommerce-checkout .woocommerce textarea,
.woocommerce-checkout .woocommerce select,
.woocommerce-cart .woocommerce .quantity input.qty {
	background: rgba(255, 255, 255, .06) !important;
	border: 1px solid var(--ppc-line-2) !important;
	border-radius: 12px !important;
	box-shadow: none !important;
	color: #fff !important;
	font-family: "Jost", sans-serif;
	font-size: 16px;
	line-height: 24px;
	padding: 14px 16px !important;
	height: auto !important;
	width: 100%;
	transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.woocommerce-cart .woocommerce input.input-text:focus,
.woocommerce-checkout .woocommerce input.input-text:focus,
.woocommerce-checkout .woocommerce textarea:focus,
.woocommerce-checkout .woocommerce select:focus,
.woocommerce-cart .woocommerce .quantity input.qty:focus {
	background: rgba(255, 255, 255, .1) !important;
	border-color: var(--ppc-gold) !important;
	outline: none;
	box-shadow: 0 0 0 3px rgba(198, 166, 98, .18) !important;
}
.woocommerce-cart .woocommerce ::placeholder,
.woocommerce-checkout .woocommerce ::placeholder { color: var(--ppc-muted) !important; opacity: 1; }
.woocommerce-checkout .woocommerce select option { color: #14331f; }
.woocommerce-checkout .woocommerce textarea { min-height: 118px; resize: vertical; }

/* ============================================================
 * CART — two column layout: items + sticky summary
 * ============================================================ */
@media (min-width: 992px) {
	.woocommerce-cart .woocommerce {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 400px;
		gap: 32px;
		align-items: start;
	}
	.woocommerce-cart .woocommerce > *:not(.woocommerce-cart-form):not(.cart-collaterals) {
		grid-column: 1 / -1;
	}
	.woocommerce-cart .cart-collaterals {
		position: sticky;
		top: 110px;
		width: 100%;
		float: none;
	}
}
.woocommerce-cart .cart-collaterals::after { content: none; }
.woocommerce-cart .cart_totals { width: 100% !important; float: none !important; }

/* Items — the <table> is unwrapped to CSS grid rows.
 * ponytail: table-layout can't be trusted here (Bootstrap + Woo + Elementor all
 * fight over the column widths), and grid rows give the card look for free. */
.woocommerce-cart table.cart,
.woocommerce-cart table.cart tbody,
.woocommerce-cart table.cart tr,
.woocommerce-cart table.cart td {
	display: block;
	width: 100%;
	max-width: 100%;
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;
}
.woocommerce-cart table.cart thead,
.woocommerce-cart table.cart colgroup { display: none; }

.woocommerce-cart table.cart tbody tr.cart_item {
	display: grid;
	grid-template-columns: 78px minmax(0, 1fr) 104px 116px 30px;
	grid-template-areas:
		"thumb name  qty subtotal remove"
		"thumb price qty subtotal remove";
	align-items: center;
	gap: 4px 16px;
	padding: 20px 0;
	border-bottom: 1px solid var(--ppc-line);
}
.woocommerce-cart table.cart tbody tr.cart_item:first-child { padding-top: 4px; }
.woocommerce-cart table.cart td.product-thumbnail { grid-area: thumb; }
.woocommerce-cart table.cart td.product-name { grid-area: name; }
.woocommerce-cart table.cart td.product-price { grid-area: price; }
.woocommerce-cart table.cart td.product-quantity { grid-area: qty; }
.woocommerce-cart table.cart td.product-subtotal { grid-area: subtotal; }
.woocommerce-cart table.cart td.product-remove { grid-area: remove; text-align: right; }

.woocommerce-cart table.cart td.product-thumbnail a { display: block; }
.woocommerce-cart table.cart td.product-thumbnail img {
	width: 84px;
	height: 84px;
	max-width: 84px;
	object-fit: contain;
	background: rgba(255, 255, 255, .05);
	border: 1px solid var(--ppc-line);
	border-radius: 14px;
	padding: 6px;
}
.woocommerce-cart table.cart td.product-name {
	font-size: 18px;
	line-height: 26px;
	font-weight: 500;
	align-self: end;
}
.woocommerce-cart table.cart td.product-name a { color: #fff; text-decoration: none; }
.woocommerce-cart table.cart td.product-name a:hover { color: var(--ppc-gold-2); }
.woocommerce-cart table.cart td.product-name .variation { font-size: 14px; color: var(--ppc-muted); margin: 4px 0 0; }
.woocommerce-cart table.cart td.product-price {
	color: var(--ppc-muted);
	font-size: 15px;
	line-height: 22px;
	align-self: start;
}
.woocommerce-cart table.cart td.product-subtotal {
	text-align: right;
	font-weight: 600;
	font-size: 19px;
	color: #fff;
}
/* QUANTITY / SUBTOTAL / REMOVE all share one geometry: a fixed 20px label strip at
   the top (the label itself is taken out of flow) and the value centred in the rest.
   Identical box on all three cells means the stepper, the price and the × circle
   always land on the same line — no eyeballed paddings to drift apart. */
.woocommerce-cart table.cart td.product-quantity,
.woocommerce-cart table.cart td.product-subtotal,
.woocommerce-cart table.cart td.product-remove {
	position: relative;
	align-self: stretch;
	display: flex;
	align-items: center;
	padding-top: 20px;
	padding-bottom: 0;
}
.woocommerce-cart table.cart td.product-quantity { justify-content: flex-start; }
.woocommerce-cart table.cart td.product-subtotal { justify-content: flex-end; }
.woocommerce-cart table.cart td.product-remove   { justify-content: flex-end; }

/* Woo ships data-title on each cell — reuse it as a micro-label, pinned to the strip */
.woocommerce-cart table.cart td.product-quantity::before,
.woocommerce-cart table.cart td.product-subtotal::before {
	content: attr(data-title);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	color: var(--ppc-muted);
	font-size: 11px;
	line-height: 13px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.woocommerce-cart table.cart td.product-subtotal::before { text-align: right; }
.woocommerce-cart .woocommerce .quantity { display: block; margin: 0; }
.woocommerce-cart .woocommerce .quantity input.qty {
	width: 100%;
	max-width: 110px;
	text-align: center;
	padding: 12px 8px !important;
}

/* Remove — circular ghost icon; geometry comes from the shared cell rule above. */
.woocommerce-cart table.cart td.product-remove {
	width: 44px;
	padding-right: 0;
}
.woocommerce-cart #main .woocommerce a.remove,
.woocommerce-cart .woocommerce a.remove {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .08) !important;
	border: 1px solid var(--ppc-line-2);
	color: #fff !important;
	/* The × is Woo's own text node; hide it and redraw the glyph as a pseudo element
	   centred on the circle with a transform — text flow puts it on a baseline, which
	   is never the middle of a round button. */
	position: relative;
	font-size: 0 !important;
	line-height: 1 !important;
	box-sizing: border-box;
	text-decoration: none;
	transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.woocommerce-cart #main .woocommerce a.remove::before,
.woocommerce-cart .woocommerce a.remove::before {
	content: "\00d7";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font: 400 20px/1 Arial, Helvetica, sans-serif;
}
.woocommerce-cart #main .woocommerce a.remove:hover,
.woocommerce-cart .woocommerce a.remove:hover {
	background: #e0563f !important;
	border-color: #e0563f;
	color: #fff !important;
}

/* Actions row: coupon left, update cart right */
.woocommerce-cart table.cart tr:last-child { border-bottom: 0; }
.woocommerce-cart table.cart td.actions {
	padding: 24px 0 0;
	border-top: 1px solid var(--ppc-line);
	border-bottom: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
}
.woocommerce-cart table.cart td.actions .coupon {
	display: flex;
	gap: 10px;
	align-items: center;
	float: none;
	margin: 0;
	padding: 0;
	border: 0;
}
.woocommerce-cart table.cart td.actions .coupon label { display: none; }
.woocommerce-cart #main #coupon_code,
.woocommerce-cart #coupon_code.input-text {
	width: 190px !important;
	min-width: 150px;
	padding: 13px 16px !important;
	font-size: 16px;
	line-height: 24px;
}
.woocommerce-cart table.cart td.actions > button[name="update_cart"] { margin-left: auto; }

/* Cart totals table */
.woocommerce-cart .cart_totals table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	background: transparent;
}
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
	background: transparent !important;
	border: 0;
	border-bottom: 1px dashed var(--ppc-line);
	padding: 15px 0;
	font-size: 17px;
	font-weight: 400;
	color: var(--ppc-muted);
	text-align: left;
}
.woocommerce-cart .cart_totals table td { text-align: right; color: #fff; }
.woocommerce-cart .cart_totals table tr.order-total th,
.woocommerce-cart .cart_totals table tr.order-total td {
	border-bottom: 0;
	padding-top: 18px;
	font-family: "Parkinsans", "Jost", sans-serif;
	font-size: 22px;
	font-weight: 600;
	color: #fff;
}
.woocommerce-cart .cart_totals table tr.order-total td .amount { color: var(--ppc-gold-2); }
.woocommerce-cart .cart_totals .woocommerce-shipping-destination { color: var(--ppc-muted); font-size: 14px; }

/* Trust strip under the summary */
.woocommerce-cart .cart_totals::after {
	content: "🔒 Secure checkout · Discreet packaging · For research use only";
	display: block;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--ppc-line);
	color: var(--ppc-muted);
	font-size: 13px;
	line-height: 20px;
	text-align: center;
}

/* Empty cart — Woo/Understrap render the link as .btn.btn-outline-primary */
.woocommerce .cart-empty {
	text-align: center;
	font-size: 19px;
	margin-bottom: 28px !important;
}
.woocommerce .return-to-shop { text-align: center; max-width: 300px; margin: 0 auto; }
.woocommerce .return-to-shop a.btn { border: 0 !important; }
/* "…removed. Undo?" / "View cart" buttons inside notices stay secondary */
.woocommerce-cart .woocommerce-message a.button,
.woocommerce-cart .woocommerce-message a.btn {
	background: transparent !important;
	border: 1px solid var(--ppc-line-2) !important;
	border-radius: 999px !important;
	color: #fff !important;
	padding: 9px 18px !important;
	font-size: 15px !important;
	text-decoration: none;
}

/* ============================================================
 * CHECKOUT — form left, sticky order summary right
 * ============================================================ */
.woocommerce-checkout .woocommerce-form-coupon-toggle { margin-bottom: 24px; }
.woocommerce-checkout form.checkout_coupon {
	background: var(--ppc-panel);
	border: 1px solid var(--ppc-line);
	border-radius: var(--ppc-r);
	padding: 24px;
	margin: 0 0 24px;
}
.woocommerce-checkout form.checkout_coupon .form-row { padding: 0; margin: 0 0 12px; }

/* Applied-coupon "[Remove]" link — Woo leaves it as a bare <a>, so the browser's
 * default blue was showing on the dark green totals row. */
.woocommerce-cart .cart-discount a.woocommerce-remove-coupon,
.woocommerce-checkout .cart-discount a.woocommerce-remove-coupon {
	color: var(--ppc-muted);
	font-size: 13px;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color .2s ease, border-color .2s ease;
}
.woocommerce-cart .cart-discount a.woocommerce-remove-coupon:hover,
.woocommerce-checkout .cart-discount a.woocommerce-remove-coupon:hover {
	color: var(--ppc-gold-2);
	border-bottom-color: var(--ppc-gold-2);
}

@media (min-width: 992px) {
	.woocommerce-checkout form.checkout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 420px;
		gap: 0 32px;
		align-items: start;
	}
	.woocommerce-checkout form.checkout > #customer_details { grid-column: 1; grid-row: 1 / span 2; }
	.woocommerce-checkout form.checkout > #order_review {
		grid-column: 2;
		grid-row: 1;
		position: sticky;
		top: 110px;
	}
	.woocommerce-checkout form.checkout > *:not(#customer_details):not(#order_review_heading):not(#order_review) {
		grid-column: 1 / -1;
		grid-row: 3;
	}
}

/* Left column: stack billing / shipping / additional cards.
 * The wrappers carry Bootstrap's .col-1 / .col-2 (8.33% / 16.67% flex items),
 * so every intermediate wrapper is forced back to a full-width block. */
.woocommerce-checkout #customer_details,
.woocommerce-checkout #customer_details > div,
.woocommerce-checkout #customer_details .row,
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 100% !important;
	float: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
.woocommerce-checkout #customer_details::after,
.woocommerce-checkout #customer_details .col-1::after,
.woocommerce-checkout #customer_details .col-2::after { content: none; display: none; }
.woocommerce-checkout #customer_details .row,
.woocommerce-checkout #customer_details > .col-1,
.woocommerce-checkout #customer_details > .col-2 { padding-left: 0 !important; padding-right: 0 !important; }
.woocommerce-checkout #customer_details > div,
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 { margin-bottom: 24px; }
.woocommerce-checkout #customer_details > div:last-child,
.woocommerce-checkout #customer_details .woocommerce-additional-fields { margin-bottom: 0; }
/* shipping wrapper renders empty when shipping is disabled — no ghost card */
.woocommerce-checkout .woocommerce-shipping-fields:not(:has(h3)) { display: none !important; }

/* Field grid — first/last pair up, everything else full width */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 20px;
}
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > p,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > p,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper > p { grid-column: 1 / -1; }
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > p.form-row-first,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > p.form-row-first { grid-column: 1; }
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > p.form-row-last,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > p.form-row-last { grid-column: 2; }

.woocommerce-checkout .woocommerce form .form-row,
.woocommerce-checkout form .form-row {
	float: none !important;
	width: auto !important;
	margin: 0 0 18px;
	padding: 0;
}
.woocommerce-checkout form .form-row label {
	display: block;
	color: var(--ppc-muted);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .02em;
	margin-bottom: 8px;
}
.woocommerce-checkout form .form-row .required { color: var(--ppc-gold-2); text-decoration: none; }
.woocommerce-checkout .woocommerce-input-wrapper { display: block; width: 100%; }

/* Inline field errors. WooCommerce paints the message and the label #a00,
   which is near-invisible on the dark green, and drops the message flush
   against the input. Recolour to --ppc-error and give the row real breathing
   room. The [class*="error"] catch-all is deliberate: classic checkout, the
   blocks checkout and select2 each name the message element differently. */
.woocommerce-checkout form .form-row [class*="error"],
.woocommerce-checkout form .form-row [class*="error"] p,
.woocommerce-checkout form .form-row .woocommerce-error,
.woocommerce-checkout .wc-block-components-validation-error,
.woocommerce-checkout .wc-block-components-validation-error p {
	color: var(--ppc-error) !important;
	background: none !important;
	border: 0 !important;
	padding: 0 !important;
	display: block;
	font-size: 13.5px;
	line-height: 20px;
	letter-spacing: .01em;
	margin: 10px 0 0 !important;
}
/* Woo turns the label red too — keep it in the same readable coral. */
.woocommerce-checkout form .form-row.woocommerce-invalid label,
.woocommerce-checkout form .form-row.woocommerce-invalid label .required {
	color: var(--ppc-error) !important;
}
.woocommerce-checkout form .form-row.woocommerce-invalid input.input-text,
.woocommerce-checkout form .form-row.woocommerce-invalid select,
.woocommerce-checkout form .form-row.woocommerce-invalid textarea,
.woocommerce-checkout form .form-row.woocommerce-invalid .select2-selection--single {
	border-color: var(--ppc-error) !important;
	box-shadow: 0 0 0 3px rgba(255, 155, 138, .15) !important;
}
/* An invalid row is taller by the message, so it needs more separation from
   the next label than a clean row's 18px. */
.woocommerce-checkout form .form-row.woocommerce-invalid {
	margin-bottom: 26px;
}
.woocommerce-checkout form .form-row.woocommerce-validated input.input-text,
.woocommerce-checkout form .form-row.woocommerce-validated select {
	border-color: rgba(198, 166, 98, .45) !important;
}

/* Native select arrow */
.woocommerce-checkout .woocommerce select {
	appearance: none;
	-webkit-appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, .7) 50%), linear-gradient(135deg, rgba(255, 255, 255, .7) 50%, transparent 50%);
	background-position: calc(100% - 22px) 55%, calc(100% - 16px) 55%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 44px !important;
}

/* select2 (country/state) matched to the native inputs.
 * Its own arrow <b> is dropped for the same CSS chevron the native selects use,
 * so the clear "×" has room and both controls read identically. */
.woocommerce-checkout .select2-container { width: 100% !important; }
.woocommerce-checkout .select2-container .select2-selection--single {
	background-color: rgba(255, 255, 255, .06);
	background-image: linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, .7) 50%), linear-gradient(135deg, rgba(255, 255, 255, .7) 50%, transparent 50%);
	background-position: calc(100% - 22px) 55%, calc(100% - 16px) 55%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	border: 1px solid var(--ppc-line-2);
	border-radius: 12px;
	height: auto;
	padding: 14px 44px 14px 16px;
	transition: border-color .18s ease, background-color .18s ease;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
	color: #fff;
	font-size: 16px;
	line-height: 24px;
	padding: 0 !important;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { display: none; }
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__clear {
	float: right;
	margin: 0 0 0 10px;
	padding: 0;
	color: var(--ppc-muted);
	font-size: 20px;
	font-weight: 400;
	line-height: 24px;
	cursor: pointer;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__clear:hover { color: #fff; }
.woocommerce-checkout .select2-container--open .select2-selection--single,
.woocommerce-checkout .select2-container--focus .select2-selection--single {
	background-color: rgba(255, 255, 255, .1);
	border-color: var(--ppc-gold);
	box-shadow: 0 0 0 3px rgba(198, 166, 98, .18);
}
/* dropdown is appended to <body>, so it can't be page-scoped */
.select2-dropdown {
	background: #10301f;
	border: 1px solid var(--ppc-line-2);
	border-radius: 12px;
	overflow: hidden;
	color: #fff;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
	background: rgba(255, 255, 255, .07);
	border: 1px solid var(--ppc-line-2);
	border-radius: 8px;
	color: #fff;
	padding: 10px 12px;
}
.select2-container--default .select2-results__option { color: #fff; padding: 10px 14px; }
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected="true"] {
	background: var(--ppc-gold);
	color: var(--ppc-dark);
}

/* The "Your order" h3 is a sibling of the panel, so it can't be sticky with it.
 * ponytail: hide it and let the card print its own heading — one sticky element,
 * and both columns start on the same line. Label lives here, not in a template. */
.woocommerce-checkout #order_review_heading { display: none; }
.woocommerce-checkout #order_review::before {
	content: "Your order";
	display: block;
	font-family: "Parkinsans", "Jost", sans-serif;
	font-size: 24px;
	line-height: 1.2;
	font-weight: 600;
	color: #fff;
	margin: 0 0 22px;
	letter-spacing: -.01em;
}

/* Order review table */
.woocommerce-checkout #order_review table.shop_table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	background: transparent;
}
.woocommerce-checkout #order_review table.shop_table thead th {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--ppc-line);
	color: var(--ppc-muted);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	padding: 0 0 14px;
	text-align: left;
}
.woocommerce-checkout #order_review table.shop_table thead th:last-child,
.woocommerce-checkout #order_review table.shop_table td:last-child,
.woocommerce-checkout #order_review table.shop_table tfoot td { text-align: right; }
.woocommerce-checkout #order_review table.shop_table tbody td {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--ppc-line);
	padding: 16px 0;
	font-size: 16px;
	color: #fff;
}
.woocommerce-checkout #order_review table.shop_table tbody td .product-quantity { color: var(--ppc-muted); }
.woocommerce-checkout #order_review table.shop_table tfoot th,
.woocommerce-checkout #order_review table.shop_table tfoot td {
	background: transparent;
	border: 0;
	border-bottom: 1px dashed var(--ppc-line);
	padding: 14px 0;
	font-size: 16px;
	font-weight: 400;
	color: var(--ppc-muted);
	text-align: left;
}
.woocommerce-checkout #order_review table.shop_table tfoot td { color: #fff; }
.woocommerce-checkout #order_review table.shop_table tfoot tr.order-total th,
.woocommerce-checkout #order_review table.shop_table tfoot tr.order-total td {
	border-bottom: 0;
	padding-top: 18px;
	font-family: "Parkinsans", "Jost", sans-serif;
	font-size: 22px;
	font-weight: 600;
	color: #fff;
}
.woocommerce-checkout #order_review table.shop_table tfoot tr.order-total td .amount { color: var(--ppc-gold-2); }

/* Payment box */
.woocommerce-checkout #payment {
	background: transparent;
	border-radius: 0;
	margin-top: 8px;
}
.woocommerce-checkout #payment ul.payment_methods {
	border: 0;
	padding: 0;
	margin: 0 0 8px;
	list-style: none;
}
.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method {
	background: rgba(255, 255, 255, .05);
	border: 1px solid var(--ppc-line);
	border-radius: 12px;
	padding: 14px 16px;
	margin: 0 0 10px;
}
.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method label {
	color: #fff;
	font-size: 16px;
	margin: 0;
	cursor: pointer;
}
.woocommerce-checkout #payment div.payment_box {
	background: rgba(0, 0, 0, .18);
	border-radius: 10px;
	color: var(--ppc-muted);
	font-size: 14px;
	line-height: 22px;
	margin: 12px 0 0;
	padding: 14px 16px;
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout #payment .place-order { padding: 18px 0 0; margin: 0; }
.woocommerce-checkout .woocommerce-privacy-policy-text p {
	color: var(--ppc-muted);
	font-size: 13px;
	line-height: 20px;
	margin: 0 0 16px;
}
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper { font-size: 14px; }

/* ============================================================
 * RESPONSIVE — cart rows become cards
 * ============================================================ */
@media (max-width: 991px) {
	.woocommerce-cart .cart-collaterals { width: 100%; float: none; margin-top: 28px; }
	.woocommerce-checkout form.checkout > #order_review { margin-top: 28px; }
}

@media (max-width: 767px) {
	.woocommerce-cart #main,
	.woocommerce-checkout #main { padding-top: 32px; padding-bottom: 56px; }

	.ppc-card,
	.woocommerce-cart .woocommerce-cart-form,
	.woocommerce-cart .cart_totals,
	.woocommerce-checkout #customer_details .woocommerce-billing-fields,
	.woocommerce-checkout #customer_details .woocommerce-shipping-fields,
	.woocommerce-checkout #customer_details .woocommerce-additional-fields,
	.woocommerce-checkout #order_review { padding: 20px 16px; border-radius: 14px; }

	/* Woo's own shop_table_responsive rules kick in under 768px: they right-align
	 * every cell, hide the thumbnail and inject "Product:" / "Price:" labels.
	 * Undo all three, then re-enable just our two micro-labels. */
	.woocommerce-cart table.cart.shop_table_responsive tbody td,
	.woocommerce-cart table.cart tbody td {
		display: block !important;
		text-align: left !important;
	}
	.woocommerce-cart table.cart td::before { content: none !important; display: none !important; }
	.woocommerce-cart table.cart td.product-quantity::before,
	.woocommerce-cart table.cart td.product-subtotal::before {
		content: attr(data-title) !important;
		float: none !important;
	}
	.woocommerce-cart table.cart td.product-quantity::before { display: inline-block !important; }
	.woocommerce-cart table.cart td.product-subtotal::before { display: block !important; }
	.woocommerce-cart table.cart td.product-subtotal { text-align: right !important; }

	.woocommerce-cart table.cart tbody tr.cart_item {
		grid-template-columns: 72px minmax(0, 1fr) auto 30px;
		grid-template-areas:
			"thumb name  name     remove"
			"thumb price price    remove"
			"qty   qty   subtotal subtotal";
		gap: 6px 14px;
		align-items: center;
	}
	.woocommerce-cart table.cart td.product-thumbnail img { width: 72px; height: 72px; max-width: 72px; }
	/* mobile stacks the cells, so the labels go back into normal flow */
	.woocommerce-cart table.cart td.product-quantity,
	.woocommerce-cart table.cart td.product-subtotal,
	.woocommerce-cart table.cart td.product-remove {
		position: static;
		display: block;
		padding-top: 0 !important;
	}
	.woocommerce-cart table.cart td.product-quantity::before,
	.woocommerce-cart table.cart td.product-subtotal::before {
		position: static !important;
		margin-bottom: 7px;
	}
	.woocommerce-cart table.cart td.product-remove { align-self: start; }
	.woocommerce-cart table.cart td.product-quantity { padding-top: 8px !important; }
	.woocommerce-cart table.cart td.product-quantity::before { display: inline-block; margin: 0 10px 0 0; }
	.woocommerce-cart .woocommerce .quantity { display: inline-block; vertical-align: middle; }
	.woocommerce-cart .woocommerce .quantity input.qty { width: 92px; }
	.woocommerce-cart table.cart td.product-subtotal { align-self: end; padding-top: 8px !important; }

	/* Cart totals also carries shop_table_responsive, which hides its <th> labels
	 * and prints a bare ":" from data-title — keep it a real table instead. */
	.woocommerce-cart .cart_totals table th,
	.woocommerce-cart .cart_totals table td { display: table-cell !important; }
	.woocommerce-cart .cart_totals table th { text-align: left !important; }
	.woocommerce-cart .cart_totals table td { text-align: right !important; }
	.woocommerce-cart .cart_totals table td::before { content: none !important; display: none !important; }

	.woocommerce-cart table.cart td.actions { flex-direction: column; align-items: stretch; }
	.woocommerce-cart table.cart td.actions .coupon { flex-direction: column; align-items: stretch; }
	.woocommerce-cart #main #coupon_code,
	.woocommerce-cart #coupon_code.input-text { width: 100% !important; }
	.woocommerce-cart table.cart td.actions .coupon .button,
	.woocommerce-cart table.cart td.actions > button[name="update_cart"] { width: 100%; margin-left: 0; }

	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
	.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
	.woocommerce-checkout .woocommerce-additional-fields__field-wrapper { grid-template-columns: 1fr; }
	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > p.form-row-first,
	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > p.form-row-last,
	.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > p.form-row-first,
	.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > p.form-row-last { grid-column: 1; }

	.woocommerce-cart .woocommerce h2,
	.woocommerce-checkout .woocommerce h3,
	.woocommerce-checkout #order_review_heading { font-size: 20px; margin-bottom: 16px; }
}

/* ============================================================
 * CART: variation switcher pills (same look as the product page)
 * ============================================================ */
.woocommerce-cart table.cart td.product-name .pp-cart-doses {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 10px 0 2px;
}
.woocommerce-cart table.cart td.product-name .pp-cart-doses .pp-pill {
	display: inline-block;
	min-width: 58px;
	padding: 4px 10px;
	border: 1px solid var(--ppc-line-2);
	border-radius: 6px;
	background: transparent;
	color: var(--ppc-muted);
	font-family: "Jost", sans-serif;
	font-size: 14px;
	line-height: 20px;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	transition: .15s;
}
.woocommerce-cart table.cart td.product-name .pp-cart-doses a.pp-pill:hover {
	border-color: var(--ppc-gold-2);
	color: #fff;
}
.woocommerce-cart table.cart td.product-name .pp-cart-doses .pp-pill.is-active {
	border-color: var(--ppc-gold);
	color: #fff;
	cursor: default;
}
.woocommerce-cart table.cart td.product-name .pp-cart-doses .pp-pill.is-disabled {
	opacity: .4;
	text-decoration: line-through;
	cursor: not-allowed;
}

/* ============================================================
 * LOADING STATE (WooCommerce blockUI)
 * ============================================================
 * Woo's jQuery blockUI writes `background:#fff; opacity:.6` as INLINE styles and
 * paints images/icons/loader.svg — a black dot — on top. Over a dark green panel
 * that reads as a washed-out grey veil with a bullet hole in it.
 *
 * Inline styles are why the overlay rules need !important; the spinner only needs
 * the extra `.woocommerce` in the selector to outrank Woo's own (0,3,1) rule
 * whichever stylesheet happens to load last.
 */
.woocommerce-cart .woocommerce .blockUI.blockOverlay,
.woocommerce-checkout .woocommerce .blockUI.blockOverlay {
	background: rgba(8, 23, 17, .58) !important;
	opacity: 1 !important;
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	border-radius: var(--ppc-r);
	cursor: progress;
}
/* Gold ring instead of the loader image — same element, no network request. */
.woocommerce-cart .woocommerce .blockUI.blockOverlay::before,
.woocommerce-checkout .woocommerce .blockUI.blockOverlay::before {
	width: 34px;
	height: 34px;
	margin: -17px 0 0 -17px;
	font-size: 1em;
	background: none;
	border: 2px solid rgba(255, 255, 255, .16);
	border-top-color: var(--ppc-gold-2);
	border-radius: 50%;
	animation: ppcSpin .7s linear infinite;
}
@keyframes ppcSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	/* Still needs to read as "working" — pulse the ring instead of spinning it. */
	.woocommerce-cart .woocommerce .blockUI.blockOverlay::before,
	.woocommerce-checkout .woocommerce .blockUI.blockOverlay::before {
		animation: ppcPulse 1.2s ease-in-out infinite;
	}
	@keyframes ppcPulse { 50% { opacity: .35; } }
}

/* ============================================================
 * CHECKBOXES — "Create an account?", ship to different address
 * ============================================================ */
/* Woo's is a native 13px box: unreadable label, tiny hit area, and the OS
 * paints it system-blue against the dark green. appearance:none lets us draw
 * our own at a size that's actually tappable. */
.woocommerce-checkout .woocommerce-form__label-for-checkbox,
.woocommerce-checkout label.checkbox,
.woocommerce-checkout #ship-to-different-address label {
	display: flex !important;
	align-items: center;
	gap: 12px;
	margin: 4px 0 !important;
	padding: 10px 0;
	font-family: "Jost", sans-serif;
	font-size: 17px !important;
	line-height: 26px;
	font-weight: 500;
	color: #fff;
	cursor: pointer;
	user-select: none;
}
.woocommerce-checkout .woocommerce-form__label-for-checkbox span,
.woocommerce-checkout #ship-to-different-address label span { font-weight: inherit; }

.woocommerce-checkout input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin: 0 !important;
	border: 1px solid var(--ppc-line-2);
	border-radius: 6px;
	background: rgba(255, 255, 255, .06);
	cursor: pointer;
	position: relative;
	transition: background .18s ease, border-color .18s ease;
}
.woocommerce-checkout input[type="checkbox"]:hover { border-color: var(--ppc-gold); }
.woocommerce-checkout input[type="checkbox"]:checked {
	background: var(--ppc-gold-2);
	border-color: var(--ppc-gold-2);
}
/* Rotated L rather than a glyph — no icon font dependency. */
.woocommerce-checkout input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 7px;
	top: 2px;
	width: 6px;
	height: 12px;
	border: solid #14331f;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.woocommerce-checkout input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--ppc-gold);
	outline-offset: 2px;
}

/* The create-account row sits between two panels with no spacing of its own. */
.woocommerce-checkout .woocommerce-account-fields { margin: 18px 0; }
.woocommerce-checkout .create-account { margin-top: 14px; }

/* Chrome repaints autofilled fields pale blue over any background; an inset
 * shadow the size of the field is the only way to override it. */
.woocommerce-checkout input:-webkit-autofill,
.woocommerce-checkout input:-webkit-autofill:hover,
.woocommerce-checkout input:-webkit-autofill:focus,
.woocommerce-checkout textarea:-webkit-autofill {
	-webkit-text-fill-color: #fff !important;
	-webkit-box-shadow: 0 0 0 1000px #16382a inset !important;
	box-shadow: 0 0 0 1000px #16382a inset !important;
	caret-color: #fff;
	transition: background-color 9999s ease-out 0s;
}