/* Cart page (inc/cart-page.php): the checkout shell's look, free-shipping progress, discount code toggle, logos,
   trust lines, phone sticky bar. */

body.woocommerce-cart {
	--nn-co-text: #1e1e1c;
	--nn-co-muted: #6a6a65;
	--nn-co-line: #dcdcd7;
	--nn-co-accent: var(--nn-color-primary, #2D4838);
	--nn-co-tint: #f2f6f1;
	--nn-co-radius: 10px;
}

/* The product box and the order total box: the checkout button's corners, not Elementor's 3px */
body.woocommerce-cart .elementor-widget-woocommerce-cart .e-cart-section {
	border-radius: var(--nn-co-radius) !important;
}

/* Type: Inter throughout, not the Roboto Light Elementor's cart widget sets. Four weights: 400 text and amounts, 500
   product names and buttons, 600 headings and the "Total" label, 700 the total */
body.woocommerce-cart .elementor-widget-woocommerce-cart .woocommerce {
	font-family: Inter, sans-serif;
	font-weight: 400;
}

/* Totals labels are the cells' ::before, which Elementor's cart widget sets to 700 */
body.woocommerce-cart .cgkit-fsn-bar-cart-top,
body.woocommerce-cart .cgkit-fsn-bar-cart-top .cgkit-fsn-notice,
body.woocommerce-cart .elementor-widget-woocommerce-cart .cart_totals table.shop_table tr:not(.order-total) th,
body.woocommerce-cart .elementor-widget-woocommerce-cart .cart_totals table.shop_table tr:not(.order-total) td,
body.woocommerce-cart .elementor-widget-woocommerce-cart .cart_totals table.shop_table tr:not(.order-total) td::before {
	font-weight: 400;
}

body.woocommerce-cart .elementor-widget-woocommerce-cart .cart_totals table.shop_table tr.order-total:not(.recurring-total) th {
	font-weight: 600;
}

body.woocommerce-cart table.cart td.product-name,
body.woocommerce-cart table.cart td.product-name a {
	font-weight: 500;
}

body.woocommerce-cart .cart_totals .cart-totals-title {
	font-weight: 600;
}

/* CommerceKit's free-shipping notice, moved to the top of the cart */
.cgkit-fsn-bar-cart-top {
	margin: 0 0 20px;
	padding: 14px 16px;
	border-radius: var(--nn-co-radius);
	background: var(--nn-co-tint);
	color: var(--nn-co-text);
	font-size: 15px;
}

.cgkit-fsn-bar-cart-top .cgkit-fsn-progress-bar {
	margin-bottom: 8px;
}

/* The free-delivery prompt right under it (styles: mini-cart.css) */
body.woocommerce-cart .woocommerce-cart-form .nn-fdp {
	margin: -8px 0 20px;
}

/* Discount code behind a toggle (Elementor's cart widget: the box is hidden until the link opens it) */
body.woocommerce-cart .nn-cart-coupon-box:not(.is-open) {
	display: none !important;
}

body.woocommerce-cart button.nn-cart-coupon-toggle {
	margin: 4px 0 16px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--nn-co-text);
	font-size: 14px;
	font-weight: 400;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-transform: none;
	cursor: pointer;
}

/* Discount code behind a toggle (theme cart template) */
body.woocommerce-cart .nn-cart-coupon > summary {
	display: inline-block;
	color: var(--nn-co-text);
	font-size: 14px;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	list-style: none;
}

body.woocommerce-cart .nn-cart-coupon > summary::-webkit-details-marker {
	display: none;
}

body.woocommerce-cart .nn-cart-coupon[open] > summary {
	margin-bottom: 10px;
}

/* Buttons and fields in the checkout's style */
body.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
	min-height: 56px;
	border-radius: var(--nn-co-radius) !important;
	font-size: 17px;
	font-weight: 600;
}

body.woocommerce-cart .actions .coupon input.input-text,
body.woocommerce-cart .actions .coupon button {
	border-radius: var(--nn-co-radius) !important;
}

body.woocommerce-cart table.cart td.product-thumbnail img {
	width: 64px !important;
	height: auto;
	border: 1px solid #e3e2dc;
	border-radius: var(--nn-co-radius);
	background: #fff;
}

/* Recurring totals: amount, period and first renewal only (the VAT split is on the checkout) */
body.woocommerce-cart .cart_totals tr.recurring-total small.includes_tax {
	display: none;
}

/* Wallet buttons two per row (as on the checkout) */
body.woocommerce-cart #wc-stripe-express-checkout-element {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

body.woocommerce-cart #wc-stripe-express-checkout-element[style*="display:none"],
body.woocommerce-cart #wc-stripe-express-checkout-element[style*="display: none"] {
	display: none !important;
}

body.woocommerce-cart #wc-stripe-express-checkout-element > div {
	min-width: 0;
	width: auto !important;
	margin: 0 !important;
}

body.woocommerce-cart #wc-stripe-express-checkout-element > div:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

/* "OR" between the checkout button and the wallet buttons, once Stripe has shown them (no script, so it is right on
   first paint and after a cart update) */
body.woocommerce-cart .wc-proceed-to-checkout:has(#wc-stripe-express-checkout-element:not([style*="display:none"]):not([style*="display: none"])) #wc-stripe-express-checkout-button-separator {
	display: block !important;
}

/* Trust lines and payment logos under the button */
.nn-cart-trust {
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
	color: var(--nn-co-muted);
	font-size: 13px;
}

.nn-cart-trust li {
	position: relative;
	margin: 4px 0;
	padding-left: 20px;
}

.nn-cart-trust li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 4px;
	width: 5px;
	height: 9px;
	border: solid var(--nn-co-accent);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.nn-cart-pay-logos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.nn-cart-pay-logos li {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 32px;
	border: 1px solid var(--nn-co-line);
	border-radius: 6px;
	background: #fff;
}

.nn-cart-pay-logos img {
	max-width: 40px;
	max-height: 22px;
	width: auto;
	height: auto;
}

/* Desktop line price: a table cell again, centred in the row with the name and quantity (cart.css makes it a flex box,
   which sat on the row's baseline, higher up); its parts still stack on the right */
@media (min-width: 993px) {
	body.woocommerce-cart table.cart td.product-subtotal {
		display: table-cell;
		vertical-align: middle;
	}

	body.woocommerce-cart table.cart td.product-subtotal > * {
		display: block;
		width: fit-content;
		margin-left: auto;
	}
}

/* Phone and tablet line items: picture, name and details, then quantity and price on one line (cart.css lays the row out) */
@media (max-width: 992px) {
	body.woocommerce-cart.m-cart table.cart tr.woocommerce-cart-form__cart-item {
		min-height: 96px;
		margin-bottom: 0;
		padding: 16px 0 16px 80px;
	}

	body.woocommerce-cart.m-cart table.cart td.product-thumbnail {
		top: 16px;
		width: 64px;
		min-height: 0;
		padding: 0;
	}

	body.woocommerce-cart.m-cart table.cart .product-thumbnail img {
		width: 64px !important;
		max-width: 64px;
	}

	/* The name is a link, or plain text for products without a page; the lines under it stay small */
	body.woocommerce-cart.m-cart table.cart td.product-name,
	body.woocommerce-cart.m-cart table.cart td.product-name > a {
		padding: 0 32px 0 0 !important;
		color: var(--nn-co-text);
		font-size: 15px;
		font-weight: 500;
		line-height: 1.4;
	}

	body.woocommerce-cart.m-cart table.cart td.product-name > a {
		padding: 0 !important;
	}

	body.woocommerce-cart.m-cart table.cart td.product-name > :not(a) {
		font-size: 12px;
		font-weight: 400;
	}

	body.woocommerce-cart.m-cart table.cart td.product-quantity,
	body.woocommerce-cart.m-cart table.cart td.product-subtotal {
		padding-top: 10px !important;
		padding-bottom: 0 !important;
	}

	body.woocommerce-cart.m-cart table.cart td.product-subtotal {
		justify-content: center;
		font-size: 15px;
		line-height: 1.3;
	}
}

/* Quantity: one bordered pill with - and + at its ends on every store. Shoptimizer's own controls draw the signs and
   take the clicks; the dark buttons of the NN Cart Quantity Steppers mu-plugin sat under them and spilled out. */
body.woocommerce-cart table.cart td.product-quantity .quantity {
	position: relative;
	width: 104px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--nn-co-line);
	border-radius: 999px;
	background: #fff;
}

body.woocommerce-cart table.cart td.product-quantity .quantity .nn-qty-btn {
	display: none;
}

body.woocommerce-cart table.cart td.product-quantity .quantity input.qty {
	width: 36px;
	height: 34px;
	padding: 0;
	color: var(--nn-co-text);
	font-size: 15px;
}

body.woocommerce-cart table.cart td.product-quantity .quantity .quantity-nav {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

body.woocommerce-cart table.cart td.product-quantity .quantity .quantity-button {
	top: 0;
	width: 34px;
	height: 100%;
	border-radius: 999px;
}

body.woocommerce-cart table.cart td.product-quantity .quantity .quantity-button.quantity-down {
	left: 0;
}

body.woocommerce-cart table.cart td.product-quantity .quantity .quantity-button.quantity-up {
	right: 0;
}

body.woocommerce-cart table.cart td.product-quantity .quantity .quantity-button:hover {
	background-color: var(--nn-co-tint);
}

body.woocommerce-cart table.cart td.product-quantity .quantity .quantity-button::before {
	width: 14px;
	height: 14px;
	background: var(--nn-co-text);
}

/* Phone sticky bar: total + checkout while the real button is off screen */
.nn-cart-sticky {
	display: none;
}

@media (max-width: 767px) {
	.nn-cart-sticky {
		position: fixed;
		z-index: 50;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
		border-top: 1px solid var(--nn-co-line);
		background: #fff;
		box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.08);
		transform: translateY(110%);
		transition: transform 0.2s ease;
	}

	.nn-cart-sticky.is-visible {
		transform: none;
	}

	.nn-cart-sticky__total {
		display: flex;
		flex-direction: column;
		color: var(--nn-co-muted);
		font-size: 12px;
		line-height: 1.2;
	}

	.nn-cart-sticky__total strong {
		color: var(--nn-co-text);
		font-size: 17px;
		font-weight: 700;
	}

	/* cart.css sets every price to 400 / 14px !important */
	.nn-cart-sticky__total strong .woocommerce-Price-amount.amount {
		font-size: 17px !important;
		font-weight: 700 !important;
	}

	.nn-cart-sticky__cta {
		flex: 0 0 auto;
		padding: 13px 22px;
		border-radius: var(--nn-co-radius);
		background: var(--nn-co-accent);
		color: #fff !important;
		font-size: 15px;
		font-weight: 500;
		text-decoration: none !important;
	}
}

/* Empty cart: the drawer's empty state, bestsellers under it (woocommerce/cart/cart-empty.php). The site's font, not
   the Roboto Elementor's cart widget sets */
body.woocommerce-cart .nn-cart-empty,
body.woocommerce-cart .nn-cart-empty__products .nn-cart-empty__lead {
	font-family: Inter, sans-serif;
}

body.woocommerce-cart .nn-cart-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	max-width: 420px;
	margin: 24px auto 48px;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--nn-co-text);
	text-align: center;
}

body.woocommerce-cart .nn-cart-empty__icon {
	color: #b9b9b3;
}

body.woocommerce-cart .nn-cart-empty .nn-cart-empty__title {
	margin: 0;
	color: var(--nn-co-text);
	font-family: inherit;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.25;
}

body.woocommerce-cart .nn-cart-empty .return-to-shop {
	width: 100%;
	margin: 8px 0 0;
}

body.woocommerce-cart .nn-cart-empty .return-to-shop a.button {
	display: block;
	width: 100%;
	min-height: 52px;
	padding: 0 24px;
	border-radius: var(--nn-co-radius) !important;
	font-size: 16px;
	font-weight: 600;
	line-height: 52px;
}

body.woocommerce-cart .nn-cart-empty__products {
	margin: 0 0 48px;
}

body.woocommerce-cart .nn-cart-empty__products .nn-cart-empty__lead {
	margin: 0 0 20px;
	color: var(--nn-co-text);
	font-size: 22px;
	font-weight: 600;
	text-align: center;
}