/* ==========================================================================
   Kaia Peptides — side cart, cart page, checkout gate
   Every measurement here comes from reference/cart-checkout-spec.md, taken off
   kaiapeptides.com with getComputedStyle at 1280 with two items in the cart.
   ========================================================================== */

/* --- Side cart ------------------------------------------------------------
   Live: overlay rgba(0,0,0,.25), 350px panel from the right, 20px 30px padding,
   0 0 20px rgba(0,0,0,.2) shadow, .3s slide. */

.minicart[hidden] {
	display: none;
}

.minicart {
	position: fixed;
	inset: 0;
	z-index: 9998;
}

.minicart__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.25);
	opacity: 0;
	transition: opacity 0.4s ease;
}

.minicart__panel {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	width: 350px;
	max-width: 100%;
	height: 100%;
	padding: var(--s-5) var(--s-6);
	overflow-y: auto;
	background: var(--c-white);
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
	transform: translateX(100%);
	transition: transform 0.3s ease;
}

.minicart.is-open .minicart__overlay {
	opacity: 1;
}

.minicart.is-open .minicart__panel {
	transform: translateX(0);
}

.minicart__close {
	align-self: flex-end;
	width: 25px;
	height: 23px;
	margin-bottom: var(--s-5);
	padding: 0;
	border: 0;
	background: none;
	color: var(--c-body);
	line-height: 1;
	cursor: pointer;
	transition: color var(--t-base);
}

.minicart__close:hover {
	color: var(--c-ink);
}

.minicart__close .icon {
	display: block;
	width: 20px;
	height: 20px;
}

.minicart__content {
	display: flex;
	flex: 1;
	flex-direction: column;
	font-size: var(--fs-xs);
	line-height: 1.5;
}

.minicart__empty {
	margin: 0;
	color: var(--c-body);
}

/* Row: 72.8px thumbnail + 187.2px copy column, remove control pinned right.
   The thumbnail spans both rows, so the name sits at the top of the picture and
   the quantity line at its foot, as live does. */
.minicart__product {
	position: relative;
	display: grid;
	grid-template-columns: 72.8px minmax(0, 1fr);
	grid-template-rows: auto auto;
	padding: 0 var(--s-6) var(--s-5) 0;
}

.minicart__product-image {
	grid-row: 1 / span 2;
}

.minicart__product-image img {
	display: block;
	width: 72.8px;
	height: 72.8px;
	object-fit: cover;
}

.minicart__product-name,
.minicart__product-price {
	padding-left: var(--s-5);
	font-family: var(--f-display);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	line-height: 1.5;
}

.minicart__product-name {
	align-self: start;
}

.minicart__product-name a {
	color: var(--c-green-cart);
	text-decoration: none;
}

.minicart__product-name a:hover {
	text-decoration: underline;
}

.minicart__product-price {
	align-self: end;
	color: var(--c-ink);
}

.minicart__remove {
	position: absolute;
	top: 50px;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border: 1px solid var(--c-line);
	border-radius: 50%;
	color: var(--c-muted);
	font-size: 14px;
	line-height: 1;
	text-decoration: none;
	transition: border-color var(--t-base), color var(--t-base);
}

.minicart__remove:hover {
	border-color: var(--c-ink);
	color: var(--c-ink);
}

.minicart__subtotal {
	padding: var(--s-5) 0;
	border-top: 1px solid var(--c-line);
	border-bottom: 1px solid var(--c-line);
	font-size: 20px;
	font-weight: var(--fw-semibold);
	line-height: 1.5;
	text-align: center;
}

.minicart__subtotal strong {
	font-weight: 900;
}

.minicart__buttons {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--s-2);
	padding-top: var(--s-5);
}

.minicart__button {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: var(--s-3) var(--s-4);
	border-radius: var(--r-pill);
	background: var(--c-green);
	color: var(--c-ink);
	/* Live sets these two in the display face, unlike its other buttons. */
	font-family: var(--f-display);
	font-size: var(--fs-body);
	font-weight: var(--fw-semibold);
	line-height: 1;
	text-align: center;
	text-decoration: none;
	transition: background var(--t-base);
}

.minicart__button:hover {
	background: var(--c-green-hover);
	color: var(--c-ink);
}

@media (max-width: 400px) {
	.minicart__buttons {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

html.minicart-open,
html.minicart-open body {
	overflow: hidden;
}

/* --- Cart page ------------------------------------------------------------
   Live puts the table and the coupon in their own white cards on the left and
   the totals card on the right: a 1104.67px content row split 651.75 / 422.92
   with a 30px gap. Every value below is measured, see the spec. */

/* The cart and checkout pages carry their own heading and lead in the page
   content, imported from live; the theme's text measure is too narrow for the
   cart's two columns, so those pages run live's 1140px content width. */
.woocommerce-cart .entry-content.container--text,
.woocommerce-checkout .entry-content.container--text {
	max-width: calc(var(--container-narrow) + 2 * var(--gutter));
}

.woocommerce-cart .entry-content > h2,
.woocommerce-checkout .entry-content > h2 {
	margin: 0;
	font-family: var(--f-display);
	font-size: 44px;
	font-weight: var(--fw-semibold);
	line-height: 1;
	color: var(--c-ink);
}

.woocommerce-cart .entry-content > h2 + p,
.woocommerce-checkout .entry-content > h2 + p {
	margin: 0;
	padding: 20px 0;
	font-size: var(--fs-body);
	line-height: 1.5;
	color: var(--c-ink);
}

.cart-layout {
	display: grid;
	gap: var(--s-6);
	align-items: start;
}

@media (min-width: 1025px) {
	.cart-layout {
		grid-template-columns: minmax(0, 651.75fr) minmax(0, 422.92fr);
	}
}

.cart-card,
.checkout-card {
	padding: var(--card-pad) var(--card-pad-lg);
	border-radius: var(--card-radius);
	background: var(--c-white);
	box-shadow: var(--card-shadow);
}

.woocommerce-cart-form.cart-card {
	margin-bottom: var(--s-6);
}

/* The cart tables are plain rules, not the bordered block the rest of the
   theme uses, so the shop sheet's shop_table styling is unset here. */
.woocommerce .cart-layout table.shop_table {
	margin: 0;
	border: 0;
	border-radius: 5px;
	border-collapse: separate;
	font-family: var(--f-body);
	font-size: 14.4px;
	line-height: 1.5;
}

.woocommerce .cart-layout table.cart th {
	padding: 0 var(--s-5) var(--s-2) 0;
	border: 0;
	background: none;
	font-family: var(--f-body);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	text-align: left;
}

.woocommerce .cart-layout table.cart td {
	padding: var(--s-5) var(--s-5) var(--s-5) 0;
	border: 0;
	vertical-align: middle;
}

.woocommerce .cart-layout table.cart img {
	width: 55px;
	height: 55px;
	border-radius: 0;
	object-fit: cover;
}

.woocommerce .cart-layout td.product-name a {
	color: #858585;
	text-decoration: none;
}

.woocommerce .cart-layout td.product-name a:hover {
	color: var(--c-ink);
}

.woocommerce .cart-layout td.product-remove a.remove {
	display: inline-block;
	width: auto;
	/* WooCommerce paints this red with !important; live's is black. */
	color: var(--c-black) !important;
	font-size: 21.6px;
	font-weight: var(--fw-bold);
	line-height: 1;
	text-decoration: none;
}

.woocommerce .cart-layout .quantity input[type="number"] {
	width: 51px;
	min-height: 32px;
	padding: 1px 2px;
	border: 1px solid transparent;
	border-radius: var(--r-pill);
	background: var(--field-bg);
	font-size: var(--fs-xs);
	text-align: center;
}

.woocommerce .cart-layout td.actions {
	padding: var(--s-4) 0 0;
	border-top: 1px solid var(--c-line);
}

/* Live's cart buttons are the green pill, not the theme's dark button. The
   actions-row selector has to out-specify WooCommerce's own
   `table.cart td.actions .button`, which is four classes deep. */
.woocommerce .cart-layout .button,
.woocommerce .cart-layout a.button,
.woocommerce .cart-layout button.button,
.woocommerce .cart-layout input[type="submit"],
.woocommerce .cart-layout table.cart td.actions .button {
	min-height: 42px;
	padding: var(--s-3) var(--s-6);
	border-radius: var(--r-pill);
	background: var(--c-green);
	color: var(--c-ink);
	font-family: var(--f-body);
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	line-height: 1;
}

.woocommerce .cart-layout .button:hover,
.woocommerce .cart-layout a.button:hover,
.woocommerce .cart-layout button.button:hover {
	background: var(--c-green-hover);
	color: var(--c-ink);
}

.woocommerce .cart-layout .button:disabled,
.woocommerce .cart-layout button.button[disabled] {
	opacity: 0.4;
	cursor: not-allowed;
}

.cart-coupon .coupon {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-4);
	align-items: center;
	justify-content: space-between;
}

.cart-coupon #coupon_code {
	flex: 1 1 300px;
	min-width: 0;
}

.woocommerce .cart-layout button.cart-coupon__apply {
	font-size: var(--fs-body);
	line-height: 16px;
}

/* Totals card */
.woocommerce .cart-layout .cart_totals {
	max-width: none;
	margin: 0;
}

.woocommerce .cart-layout .cart_totals table.shop_table th,
.woocommerce .cart-layout .cart_totals table.shop_table td {
	border: 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	background: none;
	font-size: 14.4px;
	line-height: 1.5;
	vertical-align: baseline;
}

.woocommerce .cart-layout .cart_totals h2 {
	margin: 0 0 var(--s-4);
	padding: 0 var(--s-5) var(--s-2) 0;
	font-family: var(--f-body);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	line-height: 1.2;
	color: var(--c-black);
}

.woocommerce .cart-layout .cart_totals table {
	width: 100%;
	margin-bottom: 6px;
}

.woocommerce .cart-layout .cart_totals table.shop_table th {
	width: 35%;
	padding: var(--s-3) var(--s-3) var(--s-3) 0;
	font-weight: var(--fw-bold);
}

.woocommerce .cart-layout .cart_totals table.shop_table td {
	padding: var(--s-3) var(--s-3) var(--s-3) 0;
	text-align: right;
}

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

.woocommerce .cart-layout a.checkout-button {
	display: block;
	width: 100%;
	padding: var(--s-3) var(--s-4);
	font-size: var(--fs-sm);
	text-align: center;
}

/* --- Checkout access gate -------------------------------------------------
   Live's gate is a bolted-on snippet that inherits the browser's own font; the
   measurements below are its, but the type is the site's DM Sans rather than
   the system stack, so it does not read as a broken page. */

/* The gate page has no band of its own, so the article's under-the-header
   offset and the section's rhythm were stacking: 169px above the title. The
   article clears the header, the section supplies the rhythm. */
/* Matches the shape of the generic under-the-header offset in header.css so it
   can out-rank it at every width. */
.page-template-page-checkout-access .site-main > *:first-child:not(.hero):not(.section--band-top):not(.section--archive):not(.page-article--hero) {
	padding-top: var(--header-h);
}

.kaia-gate-panel p:last-of-type {
	margin-bottom: 0;
}

.kaia-gate {
	max-width: 520px;
	margin-inline: auto;
	/* The section around it already carries the page rhythm; padding here as
	   well put 160px above the title and the same below the button. */
	padding: 0;
}

.kaia-gate-title {
	margin: 0 0 var(--s-2);
	font-family: var(--f-display);
	font-size: var(--fs-h3);
	font-weight: var(--fw-medium);
	line-height: 1.2;
	color: var(--c-ink);
}

.kaia-gate-intro {
	margin: 0 0 var(--s-5);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--c-body);
}

.kaia-gate-alert {
	margin: 0 0 var(--s-5);
	padding: var(--s-3) var(--s-4);
	border-radius: var(--r-sm);
	background: #fdecea;
	color: #7a1c14;
	font-size: var(--fs-xs);
}

.kaia-gate-tabs {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: var(--s-5);
	border-bottom: 1px solid var(--c-line-soft);
}

.kaia-gate-tab {
	margin: 0 var(--s-5) 0 0;
	padding: var(--s-3) var(--s-1);
	border: 0;
	border-bottom: 3px solid transparent;
	background: none;
	color: var(--c-muted-2);
	font-family: var(--f-body);
	font-size: var(--fs-body);
	font-weight: var(--fw-semibold);
	line-height: 1.5;
	cursor: pointer;
	transition: color var(--t-base), border-color var(--t-base);
}

.kaia-gate-tab.is-active {
	border-bottom-color: var(--c-green-deep);
	color: var(--c-green-deep);
}

.kaia-gate-panel[hidden] {
	display: none;
}

.kaia-gate-panel p {
	margin: 0 0 var(--s-5);
}

.kaia-gate-panel label {
	display: block;
	margin-bottom: var(--s-2);
	font-size: var(--fs-body);
	font-weight: var(--fw-semibold);
	line-height: 1;
	color: var(--c-body);
}

.kaia-gate-hint {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	font-weight: var(--fw-regular);
	line-height: 1.5;
	color: var(--c-muted-2);
}

.kaia-gate-error {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	line-height: 1.5;
	color: #b3261e;
}

.kaia-gate-check label {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 0;
	font-size: var(--fs-body);
	font-weight: var(--fw-regular);
	line-height: 1.5;
}

.kaia-gate-check input[type="checkbox"] {
	flex: 0 0 auto;
	margin-top: 4px;
}

/* The honeypot is only there for robots. */
.kaia-gate-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.kaia-gate-btn {
	min-height: 46px;
	padding: var(--s-3) var(--s-6);
	border: 0;
	border-radius: var(--r-pill);
	background: var(--c-green-deep);
	color: var(--c-white);
	font-family: var(--f-body);
	font-size: var(--fs-body);
	font-weight: var(--fw-semibold);
	line-height: 1;
	cursor: pointer;
	transition: background var(--t-base);
}

.kaia-gate-btn:hover {
	background: var(--c-green-cart);
}

/* --- Checkout -------------------------------------------------------------
   Live's checkout is the classic form in an Elementor two-column grid:
   618.604 / 462.062 at a 24px gap, three white cards, no shadow, and pill
   fields on a #f9fafa fill. */

.woocommerce-checkout .entry-content > h2 {
	font-family: var(--f-body);
	font-size: var(--fs-h3);
	font-weight: var(--fw-medium);
	line-height: var(--lh-heading);
	margin: 0 0 var(--s-4);
}

.woocommerce-checkout .entry-content > h2 + p {
	display: none;
}

.checkout-layout {
	display: grid;
	gap: var(--s-6);
	align-items: start;
}

@media (min-width: 1025px) {
	.checkout-layout {
		grid-template-columns: minmax(0, 618.604fr) minmax(0, 462.062fr);
	}

	.checkout-layout__sticky {
		position: sticky;
		top: calc(var(--header-h) + 20px);
	}
}

.checkout-card {
	margin-bottom: var(--s-6);
}

.woocommerce-checkout .checkout-card h3,
.woocommerce-checkout .checkout-card #order_review_heading {
	margin: 0 0 var(--s-5);
	font-family: var(--f-display);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	line-height: 1.2;
	color: var(--c-black);
}

/* Fields */
.woocommerce-checkout .checkout-layout .form-row {
	margin: 0 0 var(--s-3);
	padding: 0;
}

.woocommerce-checkout .checkout-layout label {
	display: block;
	margin-bottom: var(--s-2);
	font-family: var(--f-body);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	line-height: 1.4;
	color: var(--c-muted);
}

.woocommerce-checkout .checkout-layout .required {
	color: #b3261e;
	text-decoration: none;
}

.woocommerce-checkout .checkout-layout input[type="text"],
.woocommerce-checkout .checkout-layout input[type="email"],
.woocommerce-checkout .checkout-layout input[type="tel"],
.woocommerce-checkout .checkout-layout input[type="password"],
.woocommerce-checkout .checkout-layout textarea,
.woocommerce-checkout .checkout-layout select,
.woocommerce-checkout .checkout-layout .select2-container .select2-selection {
	width: 100%;
	min-height: var(--field-h);
	padding: var(--field-pad-y) var(--field-pad-x);
	border: 1px solid transparent;
	border-radius: var(--r-pill);
	background: var(--field-bg);
	font-family: var(--f-body);
	font-size: var(--fs-sm);
	line-height: 1.4;
	color: var(--c-ink);
}

.woocommerce-checkout .checkout-layout textarea {
	min-height: 120px;
	border-radius: var(--r-lg);
}

/* Order review table */
.woocommerce-checkout .checkout-layout table.shop_table {
	width: 100%;
	margin: 0;
	border: 0;
	border-radius: 5px;
	border-collapse: collapse;
	font-family: var(--f-body);
	font-size: var(--fs-xs);
	line-height: 1.5;
}

.woocommerce-checkout .checkout-layout table.shop_table th,
.woocommerce-checkout .checkout-layout table.shop_table td {
	border: 0;
	background: none;
}

.woocommerce-checkout .checkout-layout table.shop_table thead th {
	padding: 0 var(--s-3) var(--s-4) 0;
	font-family: var(--f-body);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	text-align: left;
}

.woocommerce-checkout .checkout-layout table.shop_table thead th:last-child,
.woocommerce-checkout .checkout-layout table.shop_table td:last-child,
.woocommerce-checkout .checkout-layout table.shop_table tfoot td {
	text-align: right;
}

.woocommerce-checkout .checkout-layout table.shop_table tbody td {
	padding: var(--s-4) var(--s-7) var(--s-4) 0;
	color: var(--c-ink);
}

.woocommerce-checkout .checkout-layout table.shop_table tbody td.product-name {
	max-width: 150px;
}

.woocommerce-checkout .checkout-layout table.shop_table tfoot th,
.woocommerce-checkout .checkout-layout table.shop_table tfoot td {
	padding: var(--s-4) var(--s-3) var(--s-4) 0;
	font-weight: var(--fw-bold);
}

.woocommerce-checkout .checkout-layout table.shop_table tfoot .order-total th,
.woocommerce-checkout .checkout-layout table.shop_table tfoot .order-total td {
	padding-bottom: 0;
	border-top: 1px solid var(--c-line);
}

/* Payment box */
.woocommerce-checkout .checkout-layout #payment {
	background: none;
	border-radius: 0;
}

.woocommerce-checkout .checkout-layout #payment ul.payment_methods {
	margin: 0 0 var(--s-4);
	padding: 0;
	border: 0;
	list-style: none;
}

.woocommerce-checkout .checkout-layout #payment ul.payment_methods label {
	display: inline;
	font-size: var(--fs-xs);
	line-height: 1.5;
}

.woocommerce-checkout .checkout-layout #payment div.form-row {
	padding: 0;
}

.woocommerce-checkout .checkout-layout #place_order {
	display: block;
	width: 100%;
	min-height: 46px;
	padding: var(--s-3) var(--s-4);
	border-radius: var(--r-pill);
	background: var(--c-green);
	color: var(--c-ink);
	font-family: var(--f-body);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	line-height: 1;
	text-align: center;
}

.woocommerce-checkout .checkout-layout #place_order:hover {
	background: var(--c-green-hover);
	color: var(--c-ink);
}

/* Coupon toggle above the form */
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout form.checkout_coupon {
	max-width: 618.604px;
	margin-bottom: var(--s-4);
	font-size: var(--fs-xs);
}

/* Live keeps WooCommerce's paired name fields side by side: 268.125px of the
   558.6px card interior, floated, which is 48% with the gutter between. */
@media (min-width: 768px) {
	.woocommerce-checkout .checkout-layout .form-row-first,
	.woocommerce-checkout .checkout-layout .form-row-last {
		float: left;
		width: 48%;
	}

	.woocommerce-checkout .checkout-layout .form-row-last {
		float: right;
	}

	.woocommerce-checkout .checkout-layout .form-row-wide,
	.woocommerce-checkout .checkout-layout .clear {
		clear: both;
	}
}

/* The coupon prompt is a plain line of copy on live, not WooCommerce's
   blue-barred notice. */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
	margin: 0 0 var(--s-4);
	padding: 0;
	border: 0;
	background: none;
	color: var(--c-muted);
	font-family: var(--f-body);
	font-size: var(--fs-xs);
	line-height: 1.5;
}

.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before {
	content: none;
}

.woocommerce-checkout .woocommerce-form-coupon-toggle .showcoupon {
	color: var(--c-green-deep);
	text-decoration: underline;
}

/* WooCommerce styles `.woocommerce form .form-row input/textarea` three classes
   deep, so the pill fields need the row in their selector too. */
.woocommerce-checkout .checkout-layout .form-row input.input-text,
.woocommerce-checkout .checkout-layout .form-row textarea,
.woocommerce-checkout .checkout-layout .form-row select {
	min-height: var(--field-h);
	padding: var(--field-pad-y) var(--field-pad-x);
	border: 1px solid transparent;
	border-radius: var(--r-pill);
	background: var(--field-bg);
	font-family: var(--f-body);
	font-size: var(--fs-sm);
	color: var(--c-ink);
}

.woocommerce-checkout .checkout-layout .form-row textarea {
	min-height: 120px;
	border-radius: var(--r-lg);
}