/* ===========================================================================
   Spartan Peptides, transactional templates: cart, checkout, account.
   Loaded by sp_is_checkout_template() in inc/enqueue.php.

   Source of truth: the page level <style> blocks of design/cart.html and
   design/checkout.html. Global rules (.cart-grid, .line, .summary, .box, .inp,
   .check, .ship-opt, .sum-row, .sum-item, .trust-row, buttons, Woo notices and
   form fields) already live in assets/css/site.css and are not repeated here.

   Everything below either comes straight from those two <style> blocks or maps
   WooCommerce's own markup onto those same design classes.
   =========================================================================== */

/* ---------------------------------------------------------------- Cart page */

.cart-count{font:400 .42em/1 var(--display);letter-spacing:0;color:var(--muted);vertical-align:top;margin-left:10px}
.cart-head{display:flex;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid var(--line);font:500 11px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.cart-list .line{overflow:hidden}
.cart-list .line-name{font-size:17px}
.cart-list .line-end b{font-size:17px}

/* Woo prints the thumbnail inside a link, and its own <img> classes. */
.line-img > a{display:block;width:100%;height:100%}
.line-img img{width:100%;height:100%;object-fit:contain;padding:10px;mix-blend-mode:normal}
.line-info{min-width:0}
.line-name{margin:0}
.line-name a{color:inherit}
.line-name a:hover{text-decoration:underline;text-underline-offset:3px}
.line-name .backorder_notification{margin:6px 0 0;font:400 12.5px var(--body);color:var(--err)}
.line-meta{display:block}
.line-meta .amount,.line-meta bdi{color:var(--muted)}
.line-name dl.variation{margin:6px 0 0;font-size:12.5px;color:var(--muted)}
.line-name dl.variation dt,.line-name dl.variation dd{display:inline;margin:0}
.line-name dl.variation dd{margin-right:8px}
.line-name dl.variation dd p{display:inline;margin:0}
.line-qty{margin-top:10px}

/* Woo's quantity input, drawn as the design's .qty pill. */
.cart-list .quantity{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:30px;height:34px;padding:0 4px;background:#fff}
.cart-list .quantity input.qty{width:62px;height:32px;padding:0 6px;border:0;background:transparent;text-align:center;font:500 13px var(--display);color:var(--navy);outline:0;box-shadow:none}
.cart-list .quantity input.qty:focus{box-shadow:none}
.cart-list .quantity label{display:none}

.line-end{align-content:start}
.line-end .product-remove{display:inline-flex}
.line-end a.remove{color:var(--muted);font-size:14px;line-height:1;transition:color .3s}
.line-end a.remove:hover{color:var(--navy)}

/* Coupon and update cart, the design's .cart-after row shape. */
.cart-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:22px 0 0}
.cart-actions .coupon{display:flex;flex-wrap:wrap;align-items:center;gap:10px;flex:1 1 320px}
.cart-actions .coupon input.input-text{flex:1 1 180px;min-width:0;height:52px;padding:0 18px;border:1px solid var(--line);border-radius:14px;font:400 15px var(--body);color:var(--navy);background:#fff;outline:0;transition:border-color .3s,box-shadow .3s}
.cart-actions .coupon input.input-text:focus{border-color:var(--navy);box-shadow:0 0 0 4px rgba(10,31,68,.08)}
.cart-actions button.button{height:52px;padding:0 24px;font-size:11.5px}
.cart-actions .coupon button.button{background:transparent;color:var(--navy);border:1px solid var(--line);box-shadow:none}
.cart-actions .coupon button.button:hover{border-color:var(--navy);background:transparent;box-shadow:none}

.cart-after{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:22px;font-size:13.5px;color:var(--muted)}
.link-back{display:inline-flex;gap:10px;align-items:center;font:500 12px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--navy)}
.link-back i{transition:transform .45s var(--ease)}
.link-back:hover i{transform:translateX(-4px)}
.link-back a,.cart-after a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.link-back{text-decoration:none}

/* Cross sells, printed as the design's "You may also need" block. */
.upsell{margin-top:56px}
.upsell .cross-sells > h2{font:400 24px/1.1 var(--display);text-transform:uppercase;letter-spacing:-.01em;color:var(--navy);margin:14px 0 24px}
.upsell ul.products{display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:560px;list-style:none;margin:0;padding:0}
.upsell ul.products li{margin:0}

/* ---------------------------------------------- Cart totals, design .summary */

.cart_totals h2{font:400 22px var(--display);text-transform:uppercase;color:var(--navy);margin-bottom:20px}
.cart_totals .shop_table{width:100%;border:0;border-collapse:collapse;margin:0}
.cart_totals .shop_table tr{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:10px 0}
.cart_totals .shop_table th,.cart_totals .shop_table td{display:block;border:0;padding:0;text-align:left;font-weight:400}
.cart_totals .shop_table th{font:400 14.5px var(--body);color:var(--text)}
.cart_totals .shop_table td{font:500 14.5px var(--display);color:var(--navy);text-align:right}
.cart_totals .shop_table th small{display:block;font-size:12px;color:var(--muted)}
.cart_totals .order-total{border-top:1px solid var(--line);margin-top:10px;padding-top:18px}
.cart_totals .order-total th{font:500 18px var(--display);text-transform:uppercase;color:var(--navy)}
.cart_totals .order-total td{font-size:26px}
.cart_totals .cart-discount td{color:var(--blue)}
.cart_totals .sum-note{font-size:12.5px;color:var(--muted);margin-top:4px}
.cart_totals .woocommerce-shipping-destination{font-size:12.5px;color:var(--muted);margin:12px 0 0}
/* Shipping choices read as options you pick, like the design's .ship-opt rows:
   a full width card each, the chosen one outlined in navy. */
.cart_totals .shipping ul#shipping_method{list-style:none;margin:0;padding:0;display:grid;gap:10px;text-align:left}
.cart_totals .shipping ul#shipping_method li{
  position:relative;display:flex;gap:12px;align-items:center;margin:0;padding:14px 16px;
  border:1px solid var(--line);border-radius:14px;background:#fff;
  font:400 14px/1.4 var(--body);color:var(--text);
  transition:border-color .35s var(--ease),background-color .35s var(--ease)}
.cart_totals .shipping ul#shipping_method li:hover{border-color:#C9CED8}
.cart_totals .shipping ul#shipping_method li:has(input:checked){border-color:var(--navy);background:#FAFBFD}
.cart_totals .shipping ul#shipping_method input{flex:none;margin:0;width:18px;height:18px;accent-color:var(--navy)}
.cart_totals .shipping ul#shipping_method label{display:flex;flex:1;gap:8px;justify-content:space-between;align-items:center;margin:0;cursor:pointer}
.cart_totals .shipping ul#shipping_method label .amount{font:500 14px var(--display);color:var(--navy)}
.cart_totals .shipping th{vertical-align:top;padding-top:16px}
.cart_totals .woocommerce-shipping-calculator{text-align:left;margin-top:10px}
.cart_totals .woocommerce-shipping-calculator .shipping-calculator-button{font:500 11px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.cart_totals .woocommerce-shipping-calculator .shipping-calculator-form{margin-top:14px;display:grid;gap:12px}
.wc-proceed-to-checkout{margin-top:18px}
.wc-proceed-to-checkout a.checkout-button{width:100%;justify-content:center}

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

div.cart-empty{text-align:center;padding:40px 20px 30px;display:grid;justify-items:center;gap:18px}
div.cart-empty .e-helm{width:96px;color:#E4E7EC}
div.cart-empty h2{font:400 34px/1 var(--display);text-transform:uppercase;letter-spacing:-.02em;color:var(--navy)}
div.cart-empty p{max-width:420px;color:var(--muted)}
div.cart-empty .return-to-shop{margin:0}
div.cart-empty .btn{margin-top:8px}
/* wc_empty_cart_message() prints p.cart-empty.woocommerce-info: keep it a notice. */
p.cart-empty{display:block;text-align:left;padding:20px 24px}

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

.sp-checkout{align-items:start}
.co-form{display:grid;gap:22px;min-width:0}
.co-form fieldset.box{min-width:0;margin:0}
.co-form .col2-set{display:grid;gap:22px;padding:0;border:0}
.co-form .col2-set > .box{min-width:0}

/* The design numbers each step. A counter gives the same bubbles without JS. */
.co-form{counter-reset:sp-step}
.co-form .box > h3:first-child,
.co-form .box > .woocommerce-billing-fields > h3,
.co-form .box > .woocommerce-shipping-fields > h3,
.co-form .box > .woocommerce-additional-fields > h3{
	font:400 22px/1.1 var(--display);text-transform:uppercase;letter-spacing:-.01em;color:var(--navy);
	margin:0 0 22px;display:flex;align-items:center;gap:12px}
.co-form .box > h3:first-child::before,
.co-form .box > .woocommerce-billing-fields > h3::before,
.co-form .box > .woocommerce-shipping-fields > h3::before{
	counter-increment:sp-step;content:counter(sp-step);
	width:30px;height:30px;flex:none;border-radius:50%;background:var(--navy);color:#fff;
	display:grid;place-items:center;font:500 13px var(--display)}
.co-form .woocommerce-shipping-fields h3#ship-to-different-address{display:flex;align-items:center;gap:12px}
.co-form .woocommerce-shipping-fields h3#ship-to-different-address label{
	display:flex;align-items:center;gap:10px;font:400 22px/1.1 var(--display);text-transform:uppercase;letter-spacing:-.01em;color:var(--navy)}
.co-form .woocommerce-shipping-fields h3#ship-to-different-address input{width:20px;height:20px;accent-color:var(--navy)}
.co-form .woocommerce-additional-fields h3{margin-top:0}

.co-form .form-row{margin:0 0 18px}
.co-form .form-row:last-child{margin-bottom:0}
.co-form .woocommerce-input-wrapper{display:block;width:100%}
.co-form .select2-container .select2-selection--single{
	height:52px;border:1px solid var(--line);border-radius:14px;background:#fff;display:flex;align-items:center;padding:0 12px 0 6px}
.co-form .select2-container--default .select2-selection--single .select2-selection__rendered{
	line-height:1.4;padding:0 12px;color:var(--navy);font:400 15px var(--body)}
.co-form .select2-container--default .select2-selection--single .select2-selection__arrow{height:50px}
.co-form .select2-container--default.select2-container--focus .select2-selection--single,
.co-form .select2-container--default.select2-container--open .select2-selection--single{
	border-color:var(--navy);box-shadow:0 0 0 4px rgba(10,31,68,.08)}

/* Validation, the design's .err treatment mapped onto Woo's own classes. */
.woocommerce-invalid label{color:var(--err)}
.woocommerce-invalid .woocommerce-input-wrapper::after{
	content:attr(data-error);display:block;font-size:12.5px;color:var(--err);line-height:1.4;margin-top:6px}
.co-form .check-wrap.woocommerce-invalid label.checkbox{color:var(--err)}
@media (prefers-reduced-motion:no-preference){
	.woocommerce-invalid input.input-text,
	.woocommerce-invalid select,
	.woocommerce-invalid .select2-container .select2-selection--single{animation:sp-shake .4s var(--ease)}
	@keyframes sp-shake{0%,100%{transform:none}25%{transform:translateX(-5px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}
}

/* Research use attestation. */
.sp-attest .check-wrap{margin:0}
.sp-attest label.checkbox{
	display:flex;gap:12px;align-items:flex-start;font:400 13.5px/1.55 var(--body);letter-spacing:0;text-transform:none;color:var(--text);cursor:pointer}
.sp-attest label.checkbox input{width:18px;height:18px;margin-top:2px;flex:none;accent-color:var(--navy)}
.sp-attest label.checkbox .required{color:var(--err);text-decoration:none}

/* Login and coupon toggles above the form. */
.woocommerce-form-login,
.woocommerce-form-coupon,
form.checkout_coupon{border:1px solid var(--line);border-radius:24px;padding:26px 30px;margin:0 0 26px}
.woocommerce-form-login .form-row,
form.checkout_coupon .form-row{margin-bottom:16px}
form.checkout_coupon .form-row-first,form.checkout_coupon .form-row-last{width:100%}

/* ------------------------------------- Order review, design .sum-item rows */

.woocommerce-checkout-review-order-table{width:100%;border:0;border-collapse:collapse;margin:0 0 6px}
.woocommerce-checkout-review-order-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.woocommerce-checkout-review-order-table tbody tr{
	display:grid;grid-template-columns:54px 1fr auto;gap:12px;align-items:center;
	padding:10px 0;font-size:13.5px;border-bottom:1px solid var(--line)}
.woocommerce-checkout-review-order-table tbody tr:last-child{border-bottom:0;padding-bottom:18px}
.woocommerce-checkout-review-order-table td{border:0;padding:0}
.woocommerce-checkout-review-order-table tbody td.product-name{display:contents}
.woocommerce-checkout-review-order-table .sum-thumb{display:block;width:54px;height:54px;border-radius:12px;overflow:hidden;background:#EEF0F3}
.woocommerce-checkout-review-order-table .sum-thumb img{width:100%;height:100%;object-fit:contain;padding:5px;mix-blend-mode:normal}
.woocommerce-checkout-review-order-table .sum-copy{display:block;min-width:0;font:500 14px/1.35 var(--display);color:var(--navy)}
.woocommerce-checkout-review-order-table .product-quantity{display:inline;font:500 13px var(--display);color:var(--muted)}
.woocommerce-checkout-review-order-table .sum-copy dl.variation{margin:4px 0 0;font:400 12.5px var(--body);color:var(--muted)}
.woocommerce-checkout-review-order-table .sum-copy dl.variation dt,
.woocommerce-checkout-review-order-table .sum-copy dl.variation dd{display:inline;margin:0}
.woocommerce-checkout-review-order-table .sum-copy dl.variation dd{margin-right:8px}
.woocommerce-checkout-review-order-table td.product-total{font:500 14px var(--display);color:var(--navy);text-align:right;white-space:nowrap}

.woocommerce-checkout-review-order-table tfoot tr{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:10px 0}
.woocommerce-checkout-review-order-table tfoot th{border:0;padding:0;text-align:left;font:400 14.5px var(--body);color:var(--text);font-weight:400}
.woocommerce-checkout-review-order-table tfoot td{border:0;padding:0;text-align:right;font:500 14.5px var(--display);color:var(--navy)}
.woocommerce-checkout-review-order-table tfoot .cart-discount td{color:var(--blue)}
.woocommerce-checkout-review-order-table tfoot .order-total{border-top:1px solid var(--line);margin-top:10px;padding-top:18px}
.woocommerce-checkout-review-order-table tfoot .order-total th{font:500 18px var(--display);text-transform:uppercase;color:var(--navy)}
.woocommerce-checkout-review-order-table tfoot .order-total td{font-size:26px}
.woocommerce-checkout-review-order-table tfoot .woocommerce-shipping-totals td{text-align:left}

/* Shipping choices, the design's .ship-opt cards. */
#shipping_method{list-style:none;margin:0;padding:0;display:grid;gap:12px;width:100%}
#shipping_method li{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 16px;border:1.5px solid var(--line);border-radius:14px;transition:border-color .3s}
#shipping_method li:has(input:checked){border-color:var(--navy);background:#fff}
#shipping_method li input{accent-color:var(--navy);flex:none}
#shipping_method li label{flex:1;display:flex;justify-content:space-between;gap:12px;align-items:baseline;font:400 14px/1.4 var(--body);color:var(--navy);cursor:pointer;margin:0;letter-spacing:0;text-transform:none}
#shipping_method li label .amount{font:500 13px var(--display);color:var(--navy);white-space:nowrap}
.woocommerce-shipping-destination{font-size:12.5px;color:var(--muted);margin:10px 0 0}

/* -------------------------------------------------------------- Payment */

#payment{background:transparent;border-radius:0}
#payment ul.payment_methods{list-style:none;margin:0 0 18px;padding:18px 0 0;border-top:1px solid var(--line);display:grid;gap:12px}
#payment ul.payment_methods li{margin:0;padding:14px 16px;border:1.5px solid var(--line);border-radius:14px;background:#fff;transition:border-color .3s}
#payment ul.payment_methods li:has(input:checked){border-color:var(--navy)}
#payment ul.payment_methods li > input{accent-color:var(--navy)}
#payment ul.payment_methods li label{display:inline-flex;align-items:center;gap:10px;font:500 13.5px var(--display);letter-spacing:.02em;text-transform:none;color:var(--navy);cursor:pointer}
#payment ul.payment_methods li img{max-height:26px;width:auto;vertical-align:middle}
#payment div.payment_box{position:relative;margin:12px 0 0;padding:16px;border-radius:12px;background:#F2F4F7;font:400 13.5px/1.6 var(--body);color:var(--text)}
#payment div.payment_box p:last-child{margin-bottom:0}
#payment div.payment_box input.input-text,#payment div.payment_box select{background:#fff}
#payment .woocommerce-privacy-policy-text{font-size:12.5px;color:var(--muted)}
#payment .woocommerce-privacy-policy-text a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
#payment .form-row.place-order{margin:0;display:grid;gap:14px}
#payment #place_order{width:100%;justify-content:center}
#payment .woocommerce-terms-and-conditions-wrapper{margin-bottom:16px}
#payment .woocommerce-terms-and-conditions{margin:0 0 14px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;max-height:200px;overflow:auto;font-size:13.5px}
.blockUI.blockOverlay{border-radius:inherit}

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

.woocommerce-account .woocommerce{display:grid;grid-template-columns:260px 1fr;gap:50px;align-items:start}
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register,
.woocommerce-account .woocommerce-ResetPassword{max-width:520px;margin:0 auto}
.woocommerce-account .woocommerce:has(.woocommerce-form-login),
.woocommerce-account .woocommerce:has(.woocommerce-ResetPassword){display:block}
.woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.woocommerce-MyAccount-navigation li a{
	display:block;padding:13px 18px;border-radius:14px;border:1px solid transparent;
	font:500 11.5px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--navy);
	transition:background .3s,border-color .3s}
.woocommerce-MyAccount-navigation li a:hover{border-color:var(--line)}
.woocommerce-MyAccount-navigation li.is-active a{background:var(--navy);color:#fff}
.woocommerce-MyAccount-content{min-width:0}
.woocommerce-MyAccount-content .woocommerce-Address{margin-bottom:26px}
.woocommerce-MyAccount-content table.shop_table{width:100%;border:1px solid var(--line);border-radius:18px;border-collapse:separate;border-spacing:0;overflow:hidden}
.woocommerce-MyAccount-content table.shop_table th,
.woocommerce-MyAccount-content table.shop_table td{padding:14px 18px;border-bottom:1px solid var(--line);text-align:left;font-size:14px}
.woocommerce-MyAccount-content table.shop_table th{font:500 11px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.woocommerce-MyAccount-content table.shop_table tr:last-child td{border-bottom:0}
.woocommerce-MyAccount-content .woocommerce-Pagination{margin-top:26px}

/* ------------------------------------------------------------- Mobile */

@media (max-width:760px){
	.page-hero{padding-bottom:30px}
	.sec.tight{padding-top:10px}

	/* Cart */
	.cart-head{display:none}
	.cart-list .line{grid-template-columns:76px 1fr auto;gap:14px;padding:18px 0;align-items:start}
	.cart-list .line-img{border-radius:12px}
	.cart-list .line-name{font-size:15px;padding-top:2px}
	.cart-list .line-meta{margin:3px 0 10px}
	.cart-list .line-end{gap:6px;align-self:stretch;align-content:space-between}
	.cart-list .line-end b{font-size:16px;padding-top:2px}
	.cart-list .quantity{height:40px}
	.cart-list .quantity input.qty{height:38px;width:56px;font-size:14px}
	.line-end a.remove{width:40px;height:40px;display:grid;place-items:center;margin-right:-11px;font-size:15px}
	.cart-actions{gap:12px}
	.cart-actions .coupon,.cart-actions button.button{width:100%}
	.cart-actions .coupon button.button{flex:1 1 100%}
	.cart-after{flex-direction:column;align-items:flex-start;gap:4px;margin-top:10px}
	.link-back{min-height:44px}
	.cart-after a:not(.link-back){display:inline-block;padding:10px 0}
	.upsell{margin-top:36px}
	.upsell .cross-sells > h2{margin:12px 0 18px}
	.upsell ul.products{max-width:none;gap:18px}
	.cart_totals{padding:24px 20px;border-radius:22px}

	/* Checkout */
	.co-form{gap:16px}
	.co-form .col2-set{gap:16px}
	.co-form .box{padding:22px 18px}
	.co-form .box > h3:first-child,
	.co-form .box > .woocommerce-billing-fields > h3,
	.co-form .box > .woocommerce-shipping-fields > h3{font-size:20px;margin-bottom:18px}
	.sp-attest label.checkbox input{width:20px;height:20px;margin-top:1px}
	#shipping_method li{flex-wrap:wrap;row-gap:8px;padding:16px}
	#shipping_method li input{width:20px;height:20px;margin:0}
	#shipping_method li label{flex-wrap:wrap;row-gap:6px}
	#payment ul.payment_methods li{padding:16px}
	#payment #place_order{height:56px}
	.summary{padding:24px 20px;border-radius:22px}

	/* Account */
	.woocommerce-account .woocommerce{grid-template-columns:1fr;gap:26px}
	.woocommerce-MyAccount-navigation ul{grid-template-columns:1fr 1fr;display:grid}
	.woocommerce-MyAccount-content table.shop_table th,
	.woocommerce-MyAccount-content table.shop_table td{padding:12px 14px;font-size:13.5px}
}

/* ===========================================================================
   Audit fixes, cart / checkout / account against design/cart.html and
   design/checkout.html.
   =========================================================================== */

/* --------------------------------------------- One dropdown per select only

   Woo enhances every country and state select with select2, and the theme's own
   enhanceSelects() in assets/js/app.js wraps the same select in the design's .dd
   dropdown. Both were painting, so the field showed twice. The design's own
   dropdown wins, see the note in design/checkout.html, so select2's container is
   hidden wherever a .dd wrapper exists. Woo's own control is left in place for
   any field it re-renders over AJAX, where no .dd wrapper is built.           */

.dd > .select2-container{display:none !important}

/* -------------------------------------------- Cart quantity stepper buttons

   The buttons are injected by woocommerce/cart/cart.php. Same shape as the
   single product stepper in assets/css/woo.css so the two match.             */

.cart-list .quantity.has-steps{padding:0 2px}
.cart-list .quantity .qty-step{
	width:32px;height:32px;display:grid;place-items:center;flex:none;
	border:0;background:none;padding:0;color:var(--navy);font-size:10px;cursor:pointer;
	transition:color .3s}
.cart-list .quantity .qty-step:hover{color:var(--blue-h)}
.cart-list .quantity.has-steps input.qty{width:34px;padding:0}
.cart-list .quantity input.qty::-webkit-outer-spin-button,
.cart-list .quantity input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cart-list .quantity input.qty{-moz-appearance:textfield}

/* ------------------------------------------------ Checkout step numbering

   Order notes are their own step at the end of the form, after the addresses
   and before confirm and pay, so the box takes a step number like the rest.   */

.co-form .box > .woocommerce-additional-fields > h3::before{
	counter-increment:sp-step;content:counter(sp-step);
	width:30px;height:30px;flex:none;border-radius:50%;background:var(--navy);color:#fff;
	display:grid;place-items:center;font:500 13px var(--display)}
.co-form .box.sp-notes .form-row:last-child{margin-bottom:0}
.co-form .box.sp-notes textarea{min-height:120px}

@media (max-width:760px){

	/* assets/css/woo.css turns every .shop_table_responsive into stacked rows
	   with a generated "Label:" before each cell. The totals card is already a
	   two column .sum-row layout at every width, so that treatment is undone
	   here and the real <th> is shown again.                                  */

	.woocommerce .cart_totals table.shop_table_responsive tbody th{display:block}
	.woocommerce .cart_totals table.shop_table_responsive tr td::before{content:none}
	.woocommerce .cart_totals table.shop_table_responsive tbody tr{
		display:flex;justify-content:space-between;gap:16px;align-items:baseline;
		padding:10px 0;border-bottom:0}
	.woocommerce .cart_totals table.shop_table_responsive tr td{
		display:block;padding:0;border:0;text-align:right}
	.woocommerce .cart_totals table.shop_table_responsive tbody tr.order-total{
		border-top:1px solid var(--line);margin-top:10px;padding-top:18px}

	.cart-list .quantity .qty-step{width:38px;height:38px;font-size:11px}
	.cart-list .quantity.has-steps input.qty{width:30px}
}

/* ---------------------------------------------------------------------------
   Cart and checkout: the hero sits straight on top of the content
   The default page hero leaves 70px under it and .sec.tight adds 40 more. That
   reads as a dead band on a cart, where the first line of the list is the point
   of the page, so both are trimmed here. Other pages keep the roomier hero.
   ------------------------------------------------------------------------- */

.woocommerce-cart .page-hero,
.woocommerce-checkout .page-hero{padding-bottom:34px}
.woocommerce-cart .sec.tight,
.woocommerce-checkout .sec.tight{padding-top:0}
.woocommerce-cart .woocommerce-notices-wrapper:empty,
.woocommerce-checkout .woocommerce-notices-wrapper:empty{display:none}

/* A leftover add to cart notice on the cart page keeps its text but loses the
   button: it would link to the page you are already reading. */
.woocommerce-cart .woocommerce-message a.button{display:none}

/* ---------------------------------------------------------------------------
   Payment, now a step in the left column
   The card form is a Stripe iframe with its own minimum widths, so it gets the
   full column rather than the 320px summary aside it used to sit in.
   ------------------------------------------------------------------------- */

.co-form .box.sp-pay{min-width:0}
.co-form .box.sp-pay > h3{margin-bottom:6px}
.co-form #payment{background:transparent;padding:0}
.co-form #payment ul.payment_methods{padding-top:0;border-top:0;margin-bottom:20px}
.co-form #payment div.payment_box{background:#F7F9FB;padding:20px}
.co-form #payment .wc-stripe-upe-element,
.co-form #payment .wc-stripe-elements-field,
.co-form #payment iframe{width:100%;min-width:0}
.co-form #payment .form-row.place-order{margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.co-form #payment #place_order{height:60px;font-size:14px}

/* The summary keeps the order, the totals and the trust row, nothing else. */
.sp-checkout-side #order_review{min-width:0}

/* Coupon toggle: a quiet line above the form, not a full width grey slab. */
.woocommerce-form-coupon-toggle{margin-bottom:22px}
.woocommerce-form-coupon-toggle .woocommerce-info{
  display:flex;align-items:center;gap:10px;padding:14px 18px;border-radius:14px;
  background:#F4F6F9;border:1px solid var(--line);font-size:13.5px;color:var(--text)}
.woocommerce-form-coupon-toggle .woocommerce-info a{
  color:var(--navy);font-weight:500;text-decoration:underline;text-underline-offset:3px}
.checkout_coupon.woocommerce-form-coupon{
  margin:0 0 22px;padding:20px;border:1px solid var(--line);border-radius:18px;background:#fff}
.checkout_coupon.woocommerce-form-coupon .form-row{margin-bottom:0}

@media (max-width:1080px){
  .co-form #payment #place_order{height:56px}
}

/* A single gateway needs no card of its own: the step box is already the card.
   With two or more, the radio list comes back so they can be chosen between. */
.co-form #payment ul.payment_methods li:only-child{
  padding:0;border:0;background:transparent}
.co-form #payment ul.payment_methods li:only-child > input[type="radio"]{display:none}
.co-form #payment ul.payment_methods li:only-child > label{
  margin-bottom:14px;color:var(--navy)}
.co-form #payment ul.payment_methods li:only-child div.payment_box{
  margin:0;padding:0;background:transparent}
.co-form #payment ul.payment_methods li:only-child div.payment_box::before{display:none}

/* One separator above the button, not the stack of rules Woo and the gateway
   each bring with them. */
.co-form #payment .woocommerce-privacy-policy-text{margin:18px 0 0}
.co-form #payment .woocommerce-privacy-policy-text + .form-row.place-order,
.co-form #payment .form-row.place-order{margin-top:18px;padding-top:18px}

/* The gateway prints its form in a bare <fieldset>, which browsers draw with a
   2px groove border. That is the frame that made the payment step look like a
   box inside a box. */
.co-form #payment fieldset.wc-payment-form,
.co-form #payment fieldset{margin:0;padding:0;border:0;min-width:0}

/* With one gateway the step heading already says Payment, so its label and the
   list rule underneath are noise. */
.co-form #payment ul.payment_methods{border:0;padding:0;margin-bottom:16px}
.co-form #payment ul.payment_methods li:only-child > label{display:none}

/* One rule above the button, and the privacy line sits with it rather than
   floating between two separators. */
.co-form #payment .woocommerce-privacy-policy-text{margin:0;padding:0;border:0}
.co-form #payment .form-row.place-order{margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}

/* ---------------------------------------------------------------------------
   Order received
   Woo's default is a bare list of facts. This is the design's confirmation
   screen: a success mark, the reference, what happens next, then Woo's own
   order table and addresses underneath.
   ------------------------------------------------------------------------- */

.sp-thanks{max-width:820px;margin:0 auto;padding:10px 0 90px}
.sp-thanks-head{text-align:center;padding:40px 0 10px}
.sp-thanks-ic{width:76px;height:76px;margin:0 auto 26px;border-radius:50%;display:grid;place-items:center;
  background:var(--grad);color:#fff;font-size:28px;box-shadow:0 20px 40px -18px rgba(5,14,31,.55)}
.sp-thanks-ic-bad{background:#C0444C;box-shadow:0 20px 40px -18px rgba(192,68,76,.5)}
.sp-thanks-head h2{font:400 clamp(32px,4.4vw,52px)/1 var(--display);text-transform:uppercase;letter-spacing:-.03em;color:var(--navy);margin:0 0 16px}
.sp-thanks-head > p{max-width:560px;margin:0 auto;font-size:16px;line-height:1.7}

/* The fact row: order number, date, total, payment method. */
.sp-thanks ul.order_details.sp-thanks-facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:2px;
  margin:36px 0 0;padding:0;list-style:none;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--line)}
.sp-thanks ul.order_details.sp-thanks-facts li{
  margin:0;padding:20px 18px;border:0;background:#fff;text-align:left;
  font:500 10.5px/1.6 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.sp-thanks ul.order_details.sp-thanks-facts li strong{
  display:block;margin-top:8px;font:500 16px/1.3 var(--body);letter-spacing:0;text-transform:none;color:var(--navy)}

.sp-thanks-next{margin-top:36px;padding:28px 30px;border:1px solid var(--line);border-radius:22px;background:#FAFBFC;text-align:left}
.sp-thanks-next h3{font:500 11px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--navy);margin:0 0 18px}
.sp-thanks-next ol{margin:0;padding-left:20px;display:grid;gap:10px;font-size:14.5px;line-height:1.6}
.sp-thanks-ruo{display:flex;gap:10px;align-items:flex-start;margin:20px 0 0;padding-top:18px;border-top:1px solid var(--line);
  font-size:12.5px;line-height:1.6;color:var(--muted)}
.sp-thanks-ruo i{margin-top:2px;color:var(--navy)}

.sp-thanks-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px}

/* Woo's own sections below keep their styling, they just need spacing here. */
.sp-thanks .woocommerce-order-details,
.sp-thanks .woocommerce-customer-details{margin-top:50px}

@media (max-width:640px){
  .sp-thanks-head{padding-top:24px}
  .sp-thanks-next{padding:22px 20px}
  .sp-thanks-actions .btn{width:100%;justify-content:center}
}

/* Checkout summary: the shipping choices get the same option cards as the cart,
   so the two pages read the same way. */
.woocommerce-checkout-review-order-table .woocommerce-shipping-totals th{vertical-align:top;padding-top:16px}
.woocommerce-checkout-review-order-table ul#shipping_method{list-style:none;margin:0;padding:0;display:grid;gap:10px;text-align:left}
.woocommerce-checkout-review-order-table ul#shipping_method li{
  display:flex;gap:12px;align-items:center;margin:0;padding:13px 15px;
  border:1px solid var(--line);border-radius:14px;background:#fff;
  font:400 14px/1.4 var(--body);color:var(--text);
  transition:border-color .35s var(--ease),background-color .35s var(--ease)}
.woocommerce-checkout-review-order-table ul#shipping_method li:hover{border-color:#C9CED8}
.woocommerce-checkout-review-order-table ul#shipping_method li:has(input:checked){border-color:var(--navy);background:#FAFBFD}
.woocommerce-checkout-review-order-table ul#shipping_method input{flex:none;margin:0;width:18px;height:18px;accent-color:var(--navy)}
.woocommerce-checkout-review-order-table ul#shipping_method label{display:flex;flex:1;gap:8px;justify-content:space-between;align-items:center;margin:0;cursor:pointer}
.woocommerce-checkout-review-order-table ul#shipping_method label .amount{font:500 14px var(--display);color:var(--navy)}
.woocommerce-checkout-review-order-table .woocommerce-shipping-destination{margin-top:12px;font-size:12.5px;color:var(--muted)}