/**
 * Cart, checkout and account — WooCommerce's classic markup wearing the
 * theme's design tokens.
 *
 * These three views are the only place Woo's own stylesheets load (see
 * inc/clean-output.php), so this file is scoped to them too. Everything below
 * reuses the tokens from style.css; no new colours or fonts are introduced.
 */

/* ---------- 1. Shell ---------- */

.woocommerce,
.woocommerce-page .lp-prose {
	font-family: var(--lp-font-body);
	color: var(--lp-text);
}

/* page.php centres prose at 900px; these views need the full container. */
.woocommerce-cart .lp-prose,
.woocommerce-checkout .lp-prose,
.woocommerce-account .lp-prose {
	max-width: none !important;
}

.woocommerce h2,
.woocommerce h3 {
	font-family: var(--lp-font-head);
	font-weight: 600;
}

.woocommerce h2 {
	font-size: 26px;
	line-height: 34px;
	margin-bottom: 20px;
}

.woocommerce h3 {
	font-size: 21px;
	line-height: 29px;
	margin-bottom: 16px;
}

/* ---------- 2. Buttons ---------- */

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce input.button[type="submit"],
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--lp-font-head);
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
	text-transform: none;
	background: var(--lp-accent);
	color: var(--lp-white);
	border: 2px solid var(--lp-accent);
	border-radius: 50px;
	padding: 12px 32px;
	transition: .3s;
	text-shadow: none;
	box-shadow: none;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background: var(--lp-primary);
	border-color: var(--lp-primary);
	color: var(--lp-white);
}

.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled] {
	opacity: .45;
	background: var(--lp-accent);
	border-color: var(--lp-accent);
	color: var(--lp-white);
}

/* The coupon and "update cart" actions read as secondary. */
.woocommerce .cart .actions .button[name="update_cart"],
.woocommerce .coupon .button {
	background: transparent;
	color: var(--lp-primary);
	border-color: var(--lp-primary);
}

.woocommerce .cart .actions .button[name="update_cart"]:hover,
.woocommerce .coupon .button:hover {
	background: var(--lp-primary);
	color: var(--lp-white);
}

/* ---------- 3. Fields ---------- */

.woocommerce form .form-row {
	margin: 0 0 18px;
	padding: 0;
}

.woocommerce form .form-row label,
.woocommerce-page label {
	display: block;
	margin-bottom: 7px;
	font-family: var(--lp-font-head);
	font-size: 15px;
	font-weight: 600;
	color: var(--lp-primary);
}

.woocommerce form .form-row .required {
	color: var(--lp-accent);
	text-decoration: none;
	border: 0;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page input[type="text"],
.woocommerce-page input[type="email"],
.woocommerce-page input[type="tel"],
.woocommerce-page input[type="password"],
.woocommerce-page input[type="number"],
.woocommerce-page textarea,
.woocommerce-page select,
.select2-container .select2-selection--single {
	width: 100%;
	border: 1px solid var(--lp-border);
	border-radius: 10px;
	padding: 12px 16px;
	height: auto;
	min-height: 50px;
	font-family: var(--lp-font-body);
	font-size: 15px;
	background: var(--lp-white);
	color: var(--lp-text);
	box-shadow: none;
	outline: none;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce-page input:focus,
.woocommerce-page textarea:focus,
.woocommerce-page select:focus {
	border-color: var(--lp-accent);
	box-shadow: 0 0 0 .2rem rgba(237, 31, 36, .18);
}

.woocommerce form .form-row.woocommerce-invalid input.input-text {
	border-color: var(--lp-accent);
}

.woocommerce form .form-row.woocommerce-validated input.input-text {
	border-color: #1a7f37;
}

.woocommerce-page input[type="checkbox"],
.woocommerce-page input[type="radio"] {
	width: auto;
	min-height: 0;
	accent-color: var(--lp-accent);
	margin-right: 8px;
}

.woocommerce form .form-row-first,
.woocommerce form .form-row-last {
	width: 48.5%;
}

.woocommerce .quantity .qty {
	width: 82px;
	min-height: 46px;
	border: 1px solid var(--lp-border);
	border-radius: 10px;
	padding: 8px 10px;
	text-align: center;
	font-family: var(--lp-font-body);
}

/* ---------- 4. Tables ---------- */

.woocommerce table.shop_table {
	border: 1px solid var(--lp-border);
	border-radius: 16px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	margin-bottom: 28px;
}

.woocommerce table.shop_table th {
	background: var(--lp-light);
	font-family: var(--lp-font-head);
	font-size: 15px;
	font-weight: 600;
	color: var(--lp-primary);
	padding: 16px 18px;
	border: 0;
	border-bottom: 1px solid var(--lp-border);
}

.woocommerce table.shop_table td {
	padding: 18px;
	border: 0;
	border-bottom: 1px solid var(--lp-border);
	vertical-align: middle;
}

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

.woocommerce table.shop_table img {
	width: 68px;
	height: auto;
	border-radius: 10px;
}

.woocommerce table.shop_table td.product-name a {
	color: var(--lp-primary);
	font-weight: 600;
	text-decoration: none;
}

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

.woocommerce a.remove {
	color: var(--lp-accent) !important;
	font-size: 20px;
	line-height: 1;
}

.woocommerce a.remove:hover {
	background: var(--lp-accent);
	color: var(--lp-white) !important;
}

.woocommerce .woocommerce-Price-amount {
	font-weight: 600;
	color: var(--lp-primary);
}

/* ---------- 5. Cart layout ---------- */

.woocommerce .cart-collaterals .cart_totals {
	width: 100%;
	background: var(--lp-light);
	border-radius: 16px;
	padding: 26px;
}

.woocommerce .cart-collaterals .cart_totals h2 {
	font-size: 22px;
	margin-bottom: 16px;
}

.woocommerce .cart-collaterals .cart_totals table.shop_table {
	background: transparent;
	border: 0;
	margin-bottom: 18px;
}

.woocommerce .cart-collaterals .cart_totals table.shop_table th,
.woocommerce .cart-collaterals .cart_totals table.shop_table td {
	background: transparent;
	padding: 12px 0;
}

.woocommerce .wc-proceed-to-checkout a.checkout-button {
	width: 100%;
	font-size: 17px;
}

.woocommerce .cart .actions .coupon {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
}

.woocommerce .cart .actions .coupon .input-text {
	width: auto;
	min-width: 220px;
	flex: 0 1 260px;
}

/* ---------- 6. Checkout ---------- */

.woocommerce-checkout #customer_details {
	margin-bottom: 12px;
}

.woocommerce-checkout h3#order_review_heading {
	margin-top: 34px;
}

.woocommerce-checkout #order_review {
	background: var(--lp-light);
	border-radius: 16px;
	padding: 26px;
}

.woocommerce-checkout #order_review table.shop_table {
	background: transparent;
	border: 0;
}

.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td {
	background: transparent;
}

.woocommerce-checkout #payment {
	background: transparent;
	border-radius: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
	border-bottom: 1px solid var(--lp-border);
	padding: 0 0 16px;
	margin-bottom: 18px;
	list-style: none;
}

.woocommerce-checkout #payment div.payment_box {
	background: var(--lp-pink);
	color: var(--lp-text);
	border-radius: 12px;
}

.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: var(--lp-pink);
}

.woocommerce-checkout #payment #place_order {
	width: 100%;
	font-size: 17px;
}

/* ---------- 7. Account ---------- */

.woocommerce-account .woocommerce::after {
	content: "";
	display: table;
	clear: both;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
	width: 25%;
	float: left;
	padding-right: 28px;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	background: var(--lp-light);
	border-radius: 16px;
	padding: 14px;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 10px 14px;
	border-radius: 10px;
	color: var(--lp-text);
	font-size: 15px;
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	background: var(--lp-pink);
	color: var(--lp-accent);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--lp-accent);
	color: var(--lp-white);
	font-weight: 600;
}

.woocommerce-account .woocommerce-MyAccount-content {
	width: 75%;
	float: right;
}

/* Logged-out: the login / register pair sits in cards.
   Woo styles these as `.woocommerce form.login` (0,2,1) with a 5px
   radius, so match that specificity and win on source order. */
.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.checkout_coupon {
	border: 1px solid var(--lp-border);
	border-radius: 16px;
	padding: 28px;
	margin: 0 0 26px;
	background: var(--lp-white);
}

.woocommerce form.checkout_coupon {
	background: var(--lp-light);
	float: none;
	width: 100%;
	padding-right: 28px;
}

.woocommerce-form-login__rememberme {
	font-weight: 400 !important;
}

.woocommerce-LostPassword a {
	color: var(--lp-accent);
}

/* ---------- 8. Notices ---------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice {
	border-top: 0;
	border-left: 4px solid var(--lp-accent);
	border-radius: 12px;
	background: var(--lp-light);
	color: var(--lp-text);
	padding: 16px 20px;
	margin-bottom: 24px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}

.woocommerce-message {
	border-left-color: #1a7f37;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	display: none;
}

.woocommerce-message .button,
.woocommerce-info .button {
	margin-left: auto;
	padding: 9px 24px;
	font-size: 15px;
}

.woocommerce-error {
	list-style: none;
}

/* ---------- 9. Small screens ---------- */

@media (max-width: 991.98px) {

	.woocommerce-account .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce-MyAccount-content {
		width: 100%;
		float: none;
		padding-right: 0;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation {
		margin-bottom: 26px;
	}
}

@media (max-width: 767.98px) {

	.woocommerce form .form-row-first,
	.woocommerce form .form-row-last {
		width: 100%;
	}

	.woocommerce table.shop_table img {
		width: 54px;
	}

	.woocommerce .cart .actions .coupon .input-text {
		flex: 1 1 100%;
	}
}

/* ---------- 10. Float containment ----------
   woocommerce-layout.css floats .col2-set columns, .cart-collaterals and
   the coupon row, and nothing clears them. The wrappers then collapse to
   zero height and the footer rides up into the content. Replace the floats
   with modern layout where the element is ours to own, and make every
   remaining wrapper a block formatting context. */

.woocommerce-cart .lp-prose,
.woocommerce-checkout .lp-prose,
.woocommerce-account .lp-prose,
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce,
.woocommerce-account .woocommerce,
.woocommerce .woocommerce-notices-wrapper,
.woocommerce form.checkout,
.woocommerce form.woocommerce-cart-form,
.woocommerce .cart-collaterals,
.woocommerce .cart .actions,
.woocommerce-MyAccount-content {
	display: flow-root;
}

/* Checkout: billing / shipping side by side.
   Flex rather than grid — with grid, .col-1 was landing in track 2 and
   .col-2 wrapping to row 1 of the next line. Flex follows source order
   with no auto-placement to get wrong. */
.woocommerce .col2-set {
	display: flex;
	align-items: flex-start;
	gap: 0 34px;
	width: 100%;
}

.woocommerce .col2-set .col-1,
.woocommerce .col2-set .col-2 {
	float: none;
	width: auto;
	flex: 1 1 0;
	min-width: 0;
}

/* Woo floats the "Ship to a different address?" heading; nothing clears it. */
.woocommerce #ship-to-different-address {
	float: none;
	width: 100%;
}

.woocommerce #ship-to-different-address label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

/* Cart totals: full width under the table, not a 48% float. */
.woocommerce .cart-collaterals .cart_totals {
	float: none;
	width: 100%;
}

.woocommerce .cart-collaterals .cross-sells {
	float: none;
	width: 100%;
	margin-bottom: 26px;
}

/* Cart actions row: coupon left, update right, cleanly. */
.woocommerce .cart .actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
}

.woocommerce .cart .actions .coupon {
	float: none;
}

/* Notices: the button is placed by flex, so drop Woo's float. */
.woocommerce .woocommerce-message .button,
.woocommerce .woocommerce-info .button,
.woocommerce .woocommerce-error .button,
.woocommerce-page .woocommerce-message .button,
.woocommerce-page .woocommerce-info .button,
.woocommerce-page .woocommerce-error .button {
	float: none;
}

/* Account: two columns without floats. */
.woocommerce-account .woocommerce {
	display: grid;
	grid-template-columns: 25% 1fr;
	gap: 0 28px;
	align-items: start;
}

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: auto;
	padding-right: 0;
}

/* The notices wrapper must not be squeezed into the grid's first column. */
.woocommerce-account .woocommerce > .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
}

/* Logged out there is no nav, so the grid collapses to one column. */
.woocommerce-account:not(.logged-in) .woocommerce {
	display: flow-root;
}

@media (max-width: 991.98px) {

	.woocommerce .col2-set,
	.woocommerce-account .woocommerce {
		grid-template-columns: 1fr;
	}
}

/* ---------- 11. Keep the site chrome out of Woo's reach ----------
   woocommerce-layout.css carries a blanket `.woocommerce-page img
   { height:auto; max-width:100% }`. At (0,1,1) that outranks the
   theme's single-class `.lp-footer-logo { height:78px }` (0,1,0),
   so on these three views — the only ones where Woo's CSS loads —
   the 500x413 footer logo rendered at full height and pushed the
   whole footer apart. Re-assert the chrome's own sizing; the rest
   are listed so a future Woo rule cannot reach them either. */

.woocommerce-page .lp-footer-logo {
	height: 140px;
	width: auto;
}

.woocommerce-page .lp-logo img {
	height: 83px;
	width: auto;
}

.woocommerce-page .lp-header.is-fixed .lp-logo img {
	height: 54px;
}

.woocommerce-page .lp-certs img {
	height: 56px;
	width: auto;
}

.woocommerce-page .lp-pay img {
	height: 26px;
	width: auto;
}

.woocommerce-page .lp-whatsapp img {
	width: 100%;
	height: 100%;
}

@media (max-width: 767px) {

	.woocommerce-page .lp-footer-logo {
		height: 62px;
	}
}

/* ---------- 12. Cart in two columns ----------
   Woo stacks the line-item table and the totals. Place them explicitly
   so auto-placement cannot reorder them, and let the notices span. */

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

.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
}

.woocommerce-cart .woocommerce > form.woocommerce-cart-form {
	grid-column: 1;
	grid-row: 2;
}

.woocommerce-cart .woocommerce > .cart-collaterals {
	grid-column: 2;
	grid-row: 2;
	width: auto;
}

.woocommerce-cart .woocommerce > .cart-collaterals .cart_totals {
	position: sticky;
	top: 110px;
}

/* The empty-cart view has no totals column to sit beside. */
.woocommerce-cart.woocommerce-cart-is-empty .woocommerce {
	display: flow-root;
}

@media (max-width: 991.98px) {

	.woocommerce-cart .woocommerce {
		display: flow-root;
	}

	.woocommerce-cart .woocommerce > .cart-collaterals .cart_totals {
		position: static;
	}

	.woocommerce .col2-set {
		flex-direction: column;
		gap: 0;
	}
}
/* ---------- 13. Woo lists inside the prose column ----------
   page.php wraps the shortcode in .lp-prose, whose `ul li::before`
   stamps a red check on every list item and indents it 30px. That
   is right for editorial copy and wrong for Woo's own lists — it
   put a tick beside Dashboard, Orders, Downloads and the rest of
   the account nav. Prose styling stops at Woo's markup. */

.woocommerce-page .lp-prose .woocommerce ul li::before,
.woocommerce-page .lp-prose .woocommerce ol li::before {
	content: none;
}

.woocommerce-page .lp-prose .woocommerce ul li,
.woocommerce-page .lp-prose .woocommerce ol li {
	padding-left: 0;
}

/* ---------- 14. Pin the account columns ----------
   The account grid is nav + content, so auto-placement lands them
   correctly — until anything renders a sibling ahead of them. One
   extra element takes column 1, pushes the nav into column 2 and
   wraps the content onto its own row, which reads as the layout
   being reversed. Naming the columns makes the order independent
   of what precedes them. */

.woocommerce-account .woocommerce-MyAccount-navigation {
	grid-column: 1;
}

.woocommerce-account .woocommerce-MyAccount-content {
	grid-column: 2;
}

@media (max-width: 991.98px) {

	/* One column here — column 2 would otherwise be implicit. */
	.woocommerce-account .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce-MyAccount-content {
		grid-column: 1;
	}
}