/*
 * Classic cart styling.
 *
 * The cart page was switched from the WooCommerce Cart block to the [woocommerce_cart] classic
 * shortcode (Dintero only supports classic cart/checkout). The theme disables WooCommerce's default
 * styles AND only styled the block cart, so the classic cart needs full styling — provided here.
 *
 * Hand-maintained plain CSS on purpose: the theme's SCSS pipeline uses node-sass, which can't run
 * on the current Node version, so this is enqueued standalone on is_cart() rather than compiled into
 * style.css. Mirrors the brand (accent #f05a38, clean rounded summary card). Remove/fold into the
 * SCSS during the theme rebuild.
 */

/* Width/padding: defer to the theme's .big-wrap (which already constrains + pads the content). The
   cart block also carries .alignwide, whose rule adds a SECOND 64px of side padding — zero it out. */
.woocommerce-cart .woocommerce.wp-block-group {
	max-width: none;
	margin: 0;
	padding-left: 0;
	padding-right: 0;
}
/* On phones (< 768px) the theme's alignwide goes full-bleed (margin: calc(50% - 50vw)) but its 64px
   gutter only kicks in ≥768px — and our padding:0 above removes the base gutter — so the cart would
   touch the screen edges. Add a small gutter back for phones only. */
@media (max-width: 767px) {
	.woocommerce-cart .woocommerce.wp-block-group {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* ---- Cart line-items table ---- */
.woocommerce-cart table.shop_table {
	width: 100%;
	border-collapse: collapse;
	font-size: 1.5rem;
}
.woocommerce-cart table.shop_table thead th {
	text-align: left;
	padding: 0 8px 12px 0;
	border-bottom: 1px solid #e5e5e5;
	font-size: 1.3rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: #333;
	white-space: nowrap;
}
.woocommerce-cart table.shop_table td {
	padding: 16px 8px 16px 0;
	border-bottom: 1px solid #eee;
	vertical-align: middle;
}
/* Product thumbnail: grey tile + multiply blend, mirroring the block cart's treatment on live
   (style.css:5702+) so the white photo background melts into the #ededed tile and all thumbs match. */
.woocommerce-cart td.product-thumbnail {
	width: 96px;
}
.woocommerce-cart td.product-thumbnail a {
	display: block;
	width: 84px;
	height: 84px;
	background-color: #ededed;
	box-sizing: border-box;
}
.woocommerce-cart td.product-thumbnail img {
	width: 84px;
	height: 84px;
	object-fit: contain;
	display: block;
	mix-blend-mode: multiply;
}
@media (max-width: 370px) {
	.woocommerce-cart td.product-thumbnail a,
	.woocommerce-cart td.product-thumbnail img {
		width: 56px;
		height: 56px;
	}
}
.woocommerce-cart td.product-name a {
	color: inherit;
	font-weight: 600;
	font-size: 1.6rem;
	text-decoration: none;
}
.woocommerce-cart td.product-name a:hover {
	color: #f05a38;
}
.woocommerce-cart td.product-name .variation {
	margin: .25rem 0 0;
	font-size: 1.3rem;
	color: #777;
}
/* Keep money amounts whole — the theme's global word-break otherwise snaps "kr 3 986,00" mid-digit. */
.woocommerce-cart td.product-price,
.woocommerce-cart td.product-subtotal {
	white-space: nowrap;
}
.woocommerce-cart a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	color: #999 !important;
	font-size: 18px;
	line-height: 1;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}
.woocommerce-cart a.remove:hover {
	background: #f05a38;
	color: #fff !important;
}

/* ---- Quantity stepper (− / +) as a rounded pill, with the remove (trash) moved next to it. The
   cart JS injects the buttons, relocates the remove link into this cell, and adds .bd-qty-enhanced
   — so the separate remove column is only hidden when JS ran (graceful fallback otherwise). ---- */
.woocommerce-cart .product-quantity {
	white-space: nowrap;
}
.woocommerce-cart .product-quantity .quantity {
	display: inline-flex;
	align-items: stretch;
	width: 128px;
	height: 40px;
	border: 1px solid #b5b5b5;
	border-radius: 999px;
	overflow: hidden;
	vertical-align: middle;
	box-sizing: border-box;
}
.woocommerce-cart .product-quantity .bd-qty-btn {
	flex: 0 0 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #333;
	font-size: 1.8rem;
	line-height: 1;
	cursor: pointer;
	box-sizing: border-box;
	transition: background-color .15s ease;
}
.woocommerce-cart .product-quantity .bd-qty-btn:hover {
	background: #f0f0f0;
}
.woocommerce-cart .product-quantity .quantity input.qty {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-left: 1px solid #c9c9c9;
	border-right: 1px solid #c9c9c9;
	border-radius: 0;
	text-align: center;
	font-size: 1.5rem;
	background: transparent;
	box-sizing: border-box;
	-moz-appearance: textfield;
}
.woocommerce-cart .product-quantity .quantity input.qty::-webkit-outer-spin-button,
.woocommerce-cart .product-quantity .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
/* Remove (trash), relocated next to the stepper by the cart JS */
.woocommerce-cart .bd-qty-enhanced th.product-remove,
.woocommerce-cart .bd-qty-enhanced td.product-remove {
	display: none;
}
.woocommerce-cart .product-quantity a.remove,
.woocommerce-cart .product-quantity a.remove:hover {
	display: inline-flex;
	width: 36px;
	height: 36px;
	margin-left: 10px;
	border-radius: 50%;
	vertical-align: middle;
	font-size: 0 !important;
	color: transparent !important;
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cline x1='10' y1='11' x2='10' y2='17'/%3E%3Cline x1='14' y1='11' x2='14' y2='17'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
}
.woocommerce-cart .product-quantity a.remove:hover {
	background-color: #fdecea !important;
}

/* ---- Coupon + update row ---- */
.woocommerce-cart td.actions {
	padding-top: 20px;
}
.woocommerce-cart td.actions .coupon {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	float: left;
}
.woocommerce-cart td.actions .coupon input#coupon_code {
	flex: 0 1 200px;
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 1.5rem;
}
.woocommerce-cart td.actions button {
	padding: 10px 18px;
	border: 2px solid #f05a38;
	border-radius: 4px;
	background: #f05a38;
	color: #fff;
	font-size: 1.5rem;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.woocommerce-cart td.actions button:hover {
	background: #fff;
	color: #f05a38;
}
.woocommerce-cart td.actions button[name="update_cart"] {
	float: right;
	background: #fff;
	color: #333;
	border-color: #ddd;
}
.woocommerce-cart td.actions button[name="update_cart"]:hover {
	border-color: #333;
}

/* ---- Collaterals ---- */
.woocommerce-cart .cart-collaterals {
	margin-top: 32px;
}
/* Side-by-side: cart items (left) + "Totalt i handlekurven" (right). The grid is on OUR own
   .bd-cart-grid wrapper (added via the before/after-cart hooks), which wraps only the cart form +
   collaterals — so display:grid is deterministic. The Hello Retail rec sits outside this wrapper. */
@media (min-width: 1200px) {
	.woocommerce-cart .bd-cart-grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 380px;
		column-gap: 40px;
		align-items: start;
		/* The parent .woocommerce.wp-block-group is a flex container, so this grid is a flex item and
		   would otherwise shrink to content width; width:100% makes it span the full content width. */
		width: 100%;
	}
	.woocommerce-cart .bd-cart-grid > .woocommerce-cart-form { min-width: 0; margin: 0; }
	.woocommerce-cart .bd-cart-grid > .cart-collaterals { min-width: 0; margin-top: 0; }
}

/* ---- Mobile / tablet (≤ 900px): collapse the 5-column line-items table into stacked cards.
   A 5-column table can't fit comfortably below ~900px, so each row becomes a card: thumbnail on the
   left; name, then price + subtotal, then the quantity stepper stacked on the right. thead is hidden;
   labels are re-added via ::before so the price/subtotal stay self-explanatory. ---- */
@media (max-width: 900px) {
	/* Scope the "flatten into cards" rules to the LINE-ITEMS table only (it lives in
	   .woocommerce-cart-form). The totals table is also .shop_table but sits in .cart_totals — it must
	   stay a real table on mobile so th/td + text-align:right keep the values at the right edge. */
	.woocommerce-cart-form table.shop_table,
	.woocommerce-cart-form table.shop_table tbody {
		display: block;
		width: 100%;
	}
	.woocommerce-cart-form table.shop_table thead {
		display: none;
	}
	.woocommerce-cart-form table.shop_table > tbody > tr {
		display: block;
	}
	.woocommerce-cart table.shop_table tr.cart_item {
		display: grid;
		grid-template-columns: min-content minmax(0, 1fr) auto;
		grid-template-areas:
			"thumb name     name"
			"thumb price    subtotal"
			"thumb quantity quantity";
		column-gap: 14px;
		row-gap: 10px;
		align-items: center;
		padding: 18px 0;
		border-bottom: 1px solid #eee;
	}
	.woocommerce-cart tr.cart_item td {
		padding: 0;
		border: 0;
	}
	.woocommerce-cart tr.cart_item td.product-remove {
		display: none;
	}
	.woocommerce-cart tr.cart_item td.product-thumbnail {
		grid-area: thumb;
		align-self: start;
		width: auto;
	}
	.woocommerce-cart tr.cart_item td.product-name {
		grid-area: name;
	}
	.woocommerce-cart tr.cart_item td.product-price {
		grid-area: price;
	}
	.woocommerce-cart tr.cart_item td.product-subtotal {
		grid-area: subtotal;
		text-align: right;
		font-weight: 700;
	}
	.woocommerce-cart tr.cart_item td.product-quantity {
		grid-area: quantity;
	}
	.woocommerce-cart tr.cart_item td.product-price::before {
		content: "Pris";
	}
	.woocommerce-cart tr.cart_item td.product-subtotal::before {
		content: "Delsum";
	}
	.woocommerce-cart tr.cart_item td.product-price::before,
	.woocommerce-cart tr.cart_item td.product-subtotal::before {
		display: block;
		margin-bottom: 2px;
		font-size: 1.1rem;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: .03em;
		color: #999;
	}

	/* Coupon + "Oppdater handlekurv" → full width, stacked */
	.woocommerce-cart td.actions {
		display: block;
		width: 100%;
		padding: 18px 0 0;
	}
	.woocommerce-cart td.actions .coupon {
		float: none;
		display: flex;
		gap: 8px;
	}
	.woocommerce-cart td.actions .coupon input#coupon_code {
		flex: 1 1 auto;
	}
	.woocommerce-cart td.actions button[name="update_cart"] {
		float: none;
		display: block;
		width: 100%;
		margin-top: 12px;
	}

	/* Totals card sits full-width below the items */
	.woocommerce-cart .cart_totals {
		padding: 20px;
	}
}

/* ---- Totals card ---- */
.woocommerce-cart .cart_totals {
	background: #fbf9fe;
	border: 1px solid #eee;
	border-radius: 8px;
	padding: 24px;
}
.woocommerce-cart .cart_totals h2 {
	margin: 0 0 16px;
	font-size: 1.8rem;
	font-weight: 800;
	text-transform: uppercase;
}
.woocommerce-cart .cart_totals table {
	width: 100%;
	font-size: 1.5rem;
	border-collapse: collapse;
}
.woocommerce-cart .cart_totals th {
	width: 46%;
	text-align: left;
	font-weight: 400;
	padding: 8px 12px 8px 0;
	color: #414042;
	line-height: 1.35;
	/* Never break mid-word ("miljøavgi ft" / "Leveran se"). The theme applies a global word-break
	   that lets this column shrink to nothing; force normal wrapping so labels stay whole. */
	word-break: normal;
	overflow-wrap: normal;
	hyphens: none;
}
.woocommerce-cart .cart_totals td {
	text-align: right;
	padding: 8px 0;
}
/* Shipping-method list. The theme paints a bullet via `.entry-content ul li:before` (an
   absolutely-positioned 6px circle) — list-style:none can't touch a pseudo-element, so kill it
   directly. The cart shortcode renders inside .entry-content, which is why the dot appears. */
.woocommerce-cart .cart_totals #shipping_method,
.woocommerce-cart .cart_totals .woocommerce-shipping-methods {
	list-style: none;
	margin: 0;
	padding: 0;
}
.woocommerce-cart .cart_totals #shipping_method li,
.woocommerce-cart .cart_totals .woocommerce-shipping-methods li {
	list-style: none;
	margin: 0;
	padding: 0;
}
.woocommerce-cart .cart_totals #shipping_method li::before,
.woocommerce-cart .cart_totals .woocommerce-shipping-methods li::before {
	content: none;
}
/* "Fri frakt" badge — white text on the brand red, pill-shaped. The label is wrapped in
   .bd-free-shipping by woocommerce_cart_shipping_method_full_label (functions.php), free rate only. */
.woocommerce-cart .cart_totals .woocommerce-shipping-methods .bd-free-shipping {
	display: inline-block;
	padding: 3px 12px;
	border-radius: 999px;
	background: #f05a38;
	color: #fff;
	font-size: 1.3rem;
	font-weight: 600;
	line-height: 1.6;
	white-space: nowrap;
}
.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
	border-top: 1px solid #e5e5e5;
	padding-top: 14px;
	font-size: 2rem;
	font-weight: 800;
	color: #000;
	/* Align "Totalt" with the amount. The <th> and <td> had different line-heights (th = 1.35 vs
	   the td's inherited value) AND different vertical-align (the totals table inherits the
	   line-items .shop_table cell rules, forcing the <td> to middle). Pin both identically. */
	line-height: 1.2;
	vertical-align: baseline;
}
.woocommerce-cart .wc-proceed-to-checkout {
	margin-top: 16px;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	display: block;
	padding: 14px;
	border: 2px solid #f05a38;
	border-radius: 4px;
	background: #f05a38;
	color: #fff;
	font-size: 1.6rem;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
	background: #fff;
	color: #f05a38;
}

/* ---- Cross-sells (reuses the theme's product-card styling for the items) ---- */
.woocommerce-cart .cross-sells h2 {
	margin: 0 0 16px;
	font-size: 2rem;
}

/* ---- Hello Retail "Andre kjøpte også" rec (restored on the classic cart) ----
   Mirrors .hello-retail-single-product (the working product-page rec): a definite-width flex column
   so the Swiper carousel measures a real container width instead of blowing out to ~2^22px. */
.woocommerce-cart .hello-retail-cart {
	clear: both;
	display: flex;
	flex-direction: column;
	width: 100%;
	min-width: 0;
	margin-top: 3rem;
}

/* ---- Empty cart ---- */
.woocommerce-cart .cart-empty {
	font-size: 1.6rem;
}
.woocommerce-cart .return-to-shop {
	margin-top: 16px;
}
.woocommerce-cart .return-to-shop a.button {
	display: inline-block;
	padding: 12px 22px;
	border-radius: 4px;
	background: #f05a38;
	color: #fff;
	text-decoration: none;
}

/* ---- Notices ---- */
.woocommerce-cart .woocommerce-message,
.woocommerce-cart .woocommerce-info,
.woocommerce-cart .woocommerce-error {
	font-size: 1.5rem;
}

/* ---- "Updating" spinner ----
   While a quantity change is in flight, WooCommerce recalculates the cart server-side (slow on this
   stack — no object cache; Smart Prices + fees + shipping all recompute). The stepper JS toggles
   .bd-cart-updating on <body> (on click → off on updated_wc_div) so the wait reads as intentional. */
body.bd-cart-updating .cart_totals {
	position: relative;
}
body.bd-cart-updating .cart_totals::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(251, 249, 254, .6);
	border-radius: 8px;
	z-index: 1;
}
body.bd-cart-updating .cart_totals::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 28px;
	height: 28px;
	margin: -14px 0 0 -14px;
	border: 3px solid rgba(240, 90, 56, .25);
	border-top-color: #f05a38;
	border-radius: 50%;
	animation: bd-cart-spin .7s linear infinite;
	z-index: 2;
}
@keyframes bd-cart-spin {
	to { transform: rotate(360deg); }
}

/* ---- Shipping calculator ("Endre adresse") inside the totals card ----
   The theme disabled WooCommerce's styles, so the calculator form (country select, poststed,
   postnummer, Oppdater) renders unstyled; and it sits in the right-aligned totals cell, which throws
   the fields off. Underline the toggle link and render the form as a normal left-aligned, full-width
   form with a branded button. */
.woocommerce-cart .woocommerce-shipping-calculator .shipping-calculator-button {
	display: inline-block;
	text-decoration: underline;
	text-underline-offset: 3px;
	color: #f05a38;
	cursor: pointer;
}
.woocommerce-cart .woocommerce-shipping-calculator .shipping-calculator-button:hover {
	color: #333;
}
.woocommerce-cart .shipping-calculator-form {
	margin-top: 1rem;
	text-align: left;
}
.woocommerce-cart .shipping-calculator-form p {
	margin: 0 0 .75rem;
}
.woocommerce-cart .shipping-calculator-form label {
	display: block;
	margin-bottom: .3rem;
	font-size: 1.3rem;
	font-weight: 600;
}
.woocommerce-cart .shipping-calculator-form input.input-text,
.woocommerce-cart .shipping-calculator-form select {
	display: block;
	width: 100%;
	height: 42px;
	padding: 0 10px;
	border: 1px solid #b5b5b5;
	border-radius: 4px;
	background-color: #fff;
	font-size: 1.4rem;
	line-height: normal;
	box-sizing: border-box;
}
.woocommerce-cart .shipping-calculator-form button[name="calc_shipping"] {
	display: block;
	width: 100%;
	margin: 0;
	padding: 12px;
	border: 2px solid #f05a38;
	border-radius: 4px;
	background: #f05a38;
	color: #fff;
	font-size: 1.5rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.woocommerce-cart .shipping-calculator-form button[name="calc_shipping"]:hover {
	background: #fff;
	color: #f05a38;
}