/*
 * Cart, checkout and order confirmation in the look of the new product page (task #59155,
 * same colours and shapes as product-page-v2.css: Popsport orange #e56524 for the one strong
 * action, rounded cards, small orange uppercase labels, light warm tint for what is selected).
 *
 * Purely visual: the markup (shop_cart, shop_cart_checkout, shop_checkout_deliveryoptions,
 * shop_checkout_paymentoptions templates), the field names and the scripts are unchanged.
 * Loaded after style.css and responsive.css (format.php, domesticate_code), so plain
 * selectors win; !important only where the old rules or inline styles use it.
 */

/* ---------- page title band on the cart page (layout_shop has no .page-heading wrapper,
   so "Ostukorv" and the breadcrumb ran together as "OSTUKORVAVALEHT") ---------- */
#breadcrumb .wrapper:has(> h1 + ul) { flex-direction: column; align-items: flex-start; }

/* ================================ CART ================================ */
.article:has(> #shop_cart) { padding-top: 28px; }
#shop_cart { overflow: visible; }

/* rows: picture | name | price | quantity | total | remove */
#shop_cart .cart_head,
#shop_cart .cart_list > div {
	display: grid; grid-template-columns: 72px minmax(0, 1fr) 100px 132px 100px 90px;
	align-items: center; column-gap: 16px;
}
#shop_cart .cart_head > div,
#shop_cart .cart_list > div > * { float: none; width: auto; padding: 0; }
#shop_cart .cart_head {
	padding: 0 0 10px; border-bottom: 1px solid var(--ps-line);
	font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ps-orange);
}
#shop_cart .cart_head .th_3,
#shop_cart .cart_head .th_5 { text-align: right; }
#shop_cart .cart_head .th_4,
#shop_cart .cart_head .th_6 { text-align: center; }

#shop_cart .cart_list { overflow: visible; }
#shop_cart .cart_list > div { padding: 14px 0; border-bottom: 1px solid var(--ps-line); }
#shop_cart .cart_list > div .td_img {
	display: block; width: 72px; height: 72px; padding: 4px; box-sizing: border-box;
	border: 1px solid #ececec; border-radius: 12px; background: #fff; overflow: hidden;
}
#shop_cart .cart_list > div .td_img img { width: 100%; height: 100%; object-fit: contain; }
#shop_cart .cart_list > div .td_name { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ps-ink); }
#shop_cart .cart_list > div .td_name:hover { color: var(--ps-orange); }
#shop_cart .cart_list > div > span { text-align: right; font-size: 15px; color: var(--ps-text); white-space: nowrap; }
#shop_cart .cart_list > div > span:last-of-type { font-weight: 700; color: var(--ps-ink); }

/* quantity: one rounded stepper */
#shop_cart .cart_list > div > div { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 0; }
#shop_cart .cart_list > div > div > a {
	float: none; display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; padding: 0; box-sizing: border-box;
	background: #fff; color: var(--ps-ink); border: 1px solid var(--ps-line-strong); font-size: 18px; font-weight: 600; line-height: 1;
}
#shop_cart .cart_list > div > div > a:first-child { border-radius: 10px 0 0 10px; }
#shop_cart .cart_list > div > div > input + a { border-radius: 0 10px 10px 0; }
#shop_cart .cart_list > div > div > a:hover { background: var(--ps-tint); border-color: var(--ps-orange); color: var(--ps-orange); position: relative; }
#shop_cart .cart_list > div > div > input.quantity-field {
	float: none; width: 44px; height: 36px; padding: 0; box-sizing: border-box; margin: 0 -1px;
	border: 1px solid var(--ps-line-strong); border-radius: 0; background: #fff; box-shadow: none;
	text-align: center; font-size: 15px; font-weight: 600; color: var(--ps-ink);
}
#shop_cart .cart_list > div > div > input.quantity-field:focus { outline: 2px solid var(--ps-orange); outline-offset: -2px; position: relative; }
#shop_cart .cart_list > div > div > select.cart-gift-size {
	height: 36px; padding: 0 8px; border: 1px solid var(--ps-line-strong); border-radius: var(--ps-r); background: #fff;
}
/* gift rows have no quantity: style.css hides the − / + there, but the stepper rule above is
   more specific and showed them again (with no product behind them, so they did nothing) */
#shop_cart .cart_list > div:has(.cart-gift-mark) > div > a,
#shop_cart .cart_list > div:has(.cart-gift-mark) > div > input { display: none; }
#shop_cart .cart_list > div .td_remove {
	text-align: center; font-size: 13px; text-transform: none; color: #8a8a8a; text-decoration: underline;
	text-underline-offset: 3px;
}
#shop_cart .cart_list > div .td_remove:hover { color: #c62828; }

/* total */
#shop_cart .cart_total,
#shop_cart .cart_delivery {
	display: flex; justify-content: flex-end; align-items: baseline; gap: 16px; overflow: visible;
}
#shop_cart .cart_total { padding: 18px 0 4px; font-size: 16px; font-weight: 700; color: var(--ps-ink); }
#shop_cart .cart_total > span,
#shop_cart .cart_delivery > span { float: none; width: auto; }
#shop_cart .cart_total > div { float: none; width: auto; font-size: 26px; font-weight: 800; color: var(--ps-orange); white-space: nowrap; }
#shop_cart .cart_delivery > div { float: none; width: auto; }

/* buttons: the order button is the strong one, the rest are quiet outlines */
#shop_cart .cart_buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 18px 0 0; overflow: visible; }
#shop_cart .cart_buttons a {
	float: none; margin: 0; padding: 0 16px; line-height: 42px; border: 1px solid var(--ps-line-strong); border-radius: var(--ps-r);
	background: #fff; color: var(--ps-text); font-size: 14px; font-weight: 600; text-transform: none;
}
#shop_cart .cart_buttons a:hover { border-color: var(--ps-orange); color: var(--ps-orange); }
#shop_cart .cart_buttons a.buy {
	order: 10; margin-left: auto; padding: 0 34px; line-height: 54px; border: 0;
	background: var(--ps-orange); color: #fff; font-size: 18px; font-weight: 700;
	box-shadow: 0 6px 18px rgba(229, 101, 36, .28);
}
#shop_cart .cart_buttons a.buy:hover { background: var(--ps-orange-dark); color: #fff; }

.cart-gift-error { border-radius: 12px; }

/* discount code: a tinted card like the buy card on the product page */
.cart_gift {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: center;
	margin: 36px 0 0; padding: 22px 24px; background: var(--ps-tint); border: 1px solid var(--ps-tint-line); border-radius: var(--ps-r-lg);
}
.cart_gift > div,
.cart_gift > form,
.cart_gift > span { float: none; width: auto; padding: 0; border: 0; }
.cart_gift > div h2 { font-size: 20px; text-transform: none; color: var(--ps-ink); }
.cart_gift > div p { font-size: 13px; line-height: 1.5; color: #5a5a5a; }
.cart_gift > form { display: flex; gap: 10px; }
.cart_gift > form input {
	float: none; flex: 1; min-width: 0; width: auto; height: 48px; padding: 0 14px; box-sizing: border-box;
	background: #fff; border: 1px solid var(--ps-line-strong); border-radius: var(--ps-r); box-shadow: none; font-size: 15px;
}
.cart_gift > form input:focus { border-color: var(--ps-orange); outline: none; box-shadow: 0 0 0 3px rgba(229, 101, 36, .15); }
.cart_gift > form button {
	float: none; width: auto; flex: none; height: 48px; padding: 0 18px; border: 0; border-radius: var(--ps-r);
	background: var(--ps-orange); color: #fff; font-size: 15px; font-weight: 700; text-transform: none;
}
.cart_gift > form button:hover { background: var(--ps-orange-dark); border: 0; }
.cart_gift > span h4 { font-size: 12px; letter-spacing: .09em; color: var(--ps-orange); }

/* ============================== CHECKOUT ============================== */
/* the left column is empty on the checkout page: the form takes the whole width */
#content:has(form.checkout) > .sidebar { display: none; }
#content:has(form.checkout) > .sidebar + .page-content { float: none; width: auto; margin: 0; }

.article:has(> form.checkout) { padding-top: 28px; }
form.checkout {
	max-width: 760px; margin: 0 auto; padding: 8px 32px 32px; box-sizing: border-box; overflow: visible;
	background: #fff; border: 1px solid var(--ps-line); border-radius: var(--ps-r-lg);
}
/* section headings: small orange labels with a line above, as on the product page */
form.checkout h3 {
	margin: 24px 0 14px; padding-top: 22px; border-top: 1px solid var(--ps-line);
	font-size: 13px; line-height: 1.4; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ps-orange);
}
form.checkout > h3:first-of-type { border-top: 0; padding-top: 10px; }
form.checkout .address-row h3 { margin-bottom: 0; }

/* one field per row: label above, the * after the field */
form.checkout > div,
form.checkout .address-row,
form.checkout .company-row { margin: 0 0 14px; overflow: visible; }
form.checkout > div > * { float: none; }
form.checkout > div:has(> input, > select) {
	display: grid; grid-template-columns: minmax(0, 1fr) 14px; column-gap: 6px; align-items: center;
}
form.checkout > div:has(> input, > select)[style*="none"] { display: none; }
form.checkout > div > label { grid-column: 1 / -1; width: auto; padding: 0; margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--ps-ink); }
form.checkout > div > b { margin: 0; font-size: 18px; color: var(--ps-orange); text-align: center; }
form.checkout input[type=text],
form.checkout input[type=email],
form.checkout select {
	width: 100%; height: 48px; padding: 0 14px; box-sizing: border-box;
	background: #fff; border: 1px solid #d9d9d6; border-radius: var(--ps-r); box-shadow: none; font-size: 15px; color: var(--ps-ink);
}
form.checkout input[type=text]:hover,
form.checkout input[type=email]:hover,
form.checkout select:hover { border-color: #bdbdb8; }
form.checkout input[type=text]:focus,
form.checkout input[type=email]:focus,
form.checkout select:focus { background: #fff; border-color: var(--ps-orange); outline: none; box-shadow: 0 0 0 3px rgba(229, 101, 36, .15); }
form.checkout .form-error input,
form.checkout .form-error select { border-color: #c62828; }
form.checkout .form-error b { color: #c62828; }
form.checkout input[type=checkbox],
form.checkout input[type=radio] { accent-color: var(--ps-orange); width: 18px; height: 18px; margin: 0; flex: none; cursor: pointer; }

/* "Soovin arvet ettevõttele" */
form.checkout > div:has(#is_company) > label { display: none; }
form.checkout > div > div:has(#is_company) { display: flex; align-items: center; gap: 10px; }
form.checkout > div > div:has(#is_company) label { width: auto; padding: 0; font-size: 14px; cursor: pointer; }

/* delivery and payment: each method a selectable tile, the chosen one tinted orange */
form.checkout .delivery-methods,
form.checkout .payment-methods { display: block; position: relative; }
form.checkout .delivery-methods > label,
form.checkout .payment-methods > label { display: block; width: auto; padding: 0; margin: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--ps-ink); }
form.checkout .delivery-methods > b,
form.checkout .payment-methods > b { position: absolute; top: 0; right: 0; margin: 0; font-size: 18px; color: var(--ps-orange); }
form.checkout .delivery-methods > span,
form.checkout .payment-methods > span { overflow: visible !important; }

form.checkout .delivery-option,
form.checkout .payment-methods > span > div:not(.option_form) {
	margin: 0 0 8px; border: 1px solid var(--ps-line-strong); border-radius: 12px; background: #fff;
	transition: border-color .15s, background-color .15s;
}
form.checkout .delivery-option:hover,
form.checkout .payment-methods > span > div:not(.option_form):hover { border-color: #e9a47f; }
form.checkout .delivery-option:has(input[name=field_delivery]:checked),
form.checkout .payment-methods > span > div:has(input:checked) { border-color: var(--ps-orange); background: var(--ps-tint); box-shadow: inset 0 0 0 1px var(--ps-orange); }
form.checkout .delivery-option > div > label,
form.checkout .payment-methods label.payment-method {
	display: flex; align-items: center; gap: 12px; width: auto; padding: 14px 16px; margin: 0;
	font-size: 15px; line-height: 1.35; color: var(--ps-ink); cursor: pointer; position: relative;
}
/* pick-up point and phone for parcel machines: shown under the chosen method */
form.checkout .delivery-option-details {
	width: auto !important; margin: 0 16px 14px; border: 0 !important; border-top: 1px solid var(--ps-tint-line) !important;
	border-collapse: collapse; border-spacing: 0;
}
form.checkout .delivery-option-details td { padding: 10px 0 0; vertical-align: middle; font-size: 14px; }
form.checkout .delivery-option-details td:first-child { width: 160px; font-weight: 600; color: var(--ps-ink); }
form.checkout .delivery-option-details td:nth-child(2) { width: 14px; color: var(--ps-orange); }
form.checkout .delivery-option-details input[type=text],
form.checkout .delivery-option-details select { width: 100% !important; max-width: 420px; }
form.checkout .delivery-option-details .chosen-container { width: 100% !important; max-width: 420px; }
form.checkout .delivery-note {
	margin: 10px 0 0; padding: 12px 14px; border: 0; border-radius: 12px; background: var(--ps-soft); font-size: 14px; color: var(--ps-text);
}

/* payment methods two across on wider screens; a method's extra form takes the full row */
form.checkout .payment-methods > span { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; }
form.checkout .payment-methods .option_form { grid-column: 1 / -1; margin: 0 0 8px; padding: 0 4px; }
/* the bank's full name as a tooltip: hidden where it is empty, softer where it is not */
form.checkout .payment-method[data-alt=""]:hover:after { display: none !important; }
form.checkout .payment-method:hover:after {
	top: 100%; left: 0; z-index: 5; width: auto; max-width: 320px; margin-top: 4px;
	background: var(--ps-ink); border-radius: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

/* terms and newsletter */
form.checkout .i-agree { display: flex; align-items: center; gap: 10px; margin: 22px 0 0; padding-top: 22px; border-top: 1px solid var(--ps-line); font-size: 14px; }
form.checkout .i-agree > label { display: none; }
form.checkout .i-agree > a { margin: 0; color: var(--ps-orange); text-decoration: underline; text-underline-offset: 3px; }
form.checkout .i-agree > b { position: static; margin: 0; font-size: 18px; color: var(--ps-orange); }
form.checkout .i-agree.join-nl { margin: 12px 0 0; padding-top: 0; border-top: 0; }

/* the order button */
form.checkout input[type=submit] {
	display: block; width: 100%; height: 56px; margin: 26px 0 0 !important; padding: 0 20px;
	background: var(--ps-orange); color: #fff; border: 0; border-radius: var(--ps-r); box-shadow: 0 6px 18px rgba(229, 101, 36, .28);
	font-size: 18px; font-weight: 700; cursor: pointer; -webkit-appearance: none; appearance: none;
}
form.checkout input[type=submit]:hover { background: var(--ps-orange-dark); }

/* errors above the form */
form.checkout .form-error-msg,
.form-error-msg {
	margin: 18px 0; padding: 14px 16px; border: 1px solid #f3c2bd; border-radius: 12px; background: #fdecea;
	color: #b3261e; text-align: left; font-size: 14px;
}

/* ===================== ORDER CONFIRMATION / NOTICES ===================== */
/* notice.php: the text alone in an <article> (no headings or paragraphs in it) next to the
   empty left column. Shown as a tinted card centred on the page. The 404 and error notices
   use the same page, so the card has no check mark or other "done" sign. The empty left
   column has no height, so .page-content starts 20px into the wrapper and is 300px narrower
   than it: the margin centres the card on the wrapper, not on .page-content.
   Only article.notice (set in notice.php): an empty text module also prints a bare
   <article>, and on category pages it showed up as an empty tinted box. */
.sidebar + .page-content > article.notice:first-child:not(:has(> :not(br))) {
	--notice-w: min(640px, 100%);
	width: var(--notice-w); margin: 40px 0 48px calc((100% - var(--notice-w) + 260px) / 2);
	padding: 32px; box-sizing: border-box;
	background: var(--ps-tint); border: 1px solid var(--ps-tint-line); border-radius: var(--ps-r-lg);
	text-align: center; font-size: 16px; line-height: 1.6; color: var(--ps-text);
}
/* below 980px the left column is stacked above (and empty), so the card centres normally */
@media only screen and (max-width: 980px) {
	.sidebar + .page-content > article.notice:first-child:not(:has(> :not(br))) { margin-left: auto; margin-right: auto; }
}

/* layout_page always prints the phone "Filtreeri tooteid" button; on the checkout and the
   confirmation there are no filters behind it, so it is hidden where no filter block exists */
body:not(:has(.shop-filters .filter-block)) .mobile-filtering-toggle { display: none; }

/* ================================ PHONES ================================ */
@media only screen and (max-width: 768px) {
	/* cart rows as small cards: picture, name and remove on top, price, quantity and total below */
	#shop_cart .cart_head { display: none; }
	#shop_cart .cart_list > div {
		grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "img name remove" "img qty total";
		row-gap: 10px; column-gap: 12px; padding: 14px 0;
	}
	#shop_cart .cart_list > div .td_img { display: block; grid-area: img; width: 64px; height: 64px; align-self: start; }
	#shop_cart .cart_list > div .td_name { grid-area: name; width: auto; font-size: 14px; }
	#shop_cart .cart_list > div .td_remove { grid-area: remove; width: auto; align-self: start; }
	#shop_cart .cart_list > div > span:first-of-type { display: none; }
	#shop_cart .cart_list > div > div { grid-area: qty; width: auto; justify-content: flex-start; }
	#shop_cart .cart_list > div > span:last-of-type { grid-area: total; width: auto; align-self: center; }
	#shop_cart .cart_total > span { width: auto; }
	#shop_cart .cart_buttons a.buy { display: block; width: 100%; margin: 0; text-align: center; }

	.cart_gift { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 18px 16px; margin-top: 28px; }
	.cart_gift > form { padding: 0; }
	.cart_gift > form button { padding: 0 14px; font-size: 14px; }

	form.checkout { padding: 4px 16px 20px; border-radius: var(--ps-r-card); }
	form.checkout .payment-methods > span { grid-template-columns: minmax(0, 1fr); }
	form.checkout .delivery-option-details,
	form.checkout .delivery-option-details tbody,
	form.checkout .delivery-option-details tr { display: block; }
	form.checkout .delivery-option-details[style*="none"] { display: none !important; }
	form.checkout .delivery-option-details tr { display: grid; grid-template-columns: minmax(0, 1fr) 14px; padding-top: 10px; }
	form.checkout .delivery-option-details td { display: block; width: auto !important; padding: 0; }
	form.checkout .delivery-option-details td:first-child { order: 1; margin-bottom: 6px; }
	form.checkout .delivery-option-details td:nth-child(2) { order: 2; text-align: right; }
	form.checkout .delivery-option-details td:nth-child(3) { order: 3; grid-column: 1 / -1; }
	form.checkout .i-agree { align-items: flex-start; }

	.sidebar + .page-content > article.notice:first-child:not(:has(> :not(br))) { margin: 24px auto 32px; padding: 24px 18px; font-size: 15px; }
}

/* ============== PAYMENT LOGOS, ORDER SUMMARY AND NUMBERED STEPS ============== */
/* The checkout in four numbered steps, as in the audit: contact details, delivery, payment and
   the summary. Only the section headings directly in the form count; the courier address
   heading sits inside .address-row and stays unnumbered. */
form.checkout { counter-reset: checkout-step; }
form.checkout > h3 { display: flex; align-items: center; gap: 10px; }
form.checkout > h3::before {
	counter-increment: checkout-step; content: counter(checkout-step);
	display: inline-flex; align-items: center; justify-content: center; flex: none;
	width: 26px; height: 26px; border-radius: 50%; background: var(--ps-orange); color: #fff;
	font-size: 13px; font-weight: 800; letter-spacing: 0;
}

/* a payment method's name on the left, its logo on the right */
form.checkout .payment-method .pm-name { flex: 1 1 auto; min-width: 0; }
form.checkout .payment-method .pm-logo { flex: none; height: 22px; width: auto; max-width: 100px; object-fit: contain; }

/* Choosing a method shows its extra-form row (template script). Most of them are empty, and
   an empty full-width row pushed the method next to it onto a new row: the methods jumped. */
form.checkout .payment-methods .option_form:empty { display: none !important; }

/* bank payment takes the whole row, with the banks always open under it as logo tiles */
form.checkout .payment-methods > span > div:has(input[value="15-bank"]) { grid-column: 1 / -1; }
form.checkout .payment-methods .option_form15-bank { display: block !important; }

/* each family of methods starts on its own row: card + MobilePay, Apple Pay + Google Pay,
   Modena, ESTO, and the two invoice options last */
form.checkout .payment-methods > span > div:has(input.field_payment[value="15-cardPayments"]),
form.checkout .payment-methods > span > div:has(input.field_payment[value="15-applePay"]),
form.checkout .payment-methods > span > div:has(input.field_payment[value="15-hirePurchase"]),
form.checkout .payment-methods > span > div:has(input.field_payment[value="10"]),
form.checkout .payment-methods > span > div:has(input.field_payment[value="4"]),
form.checkout .payment-methods > span > div:has(input.field_payment[value="1"]) { grid-column-start: 1; }
/* the tile rule above also matches the bank grid's wrapper once a bank is checked in it */
form.checkout .payment-methods > span > div.option_form,
form.checkout .payment-methods > span > div.option_form:hover,
form.checkout .payment-methods > span > div.option_form:has(input:checked) { border: 0; background: transparent; box-shadow: none; }
form.checkout .pm-banks {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
	margin: -2px 0 6px; padding: 12px; background: var(--ps-soft); border-radius: 12px;
}
form.checkout .pm-bank {
	position: relative; display: flex; align-items: center; justify-content: center;
	float: none; width: auto; height: 64px; margin: 0; padding: 10px; box-sizing: border-box;
	background: #fff; border: 1px solid var(--ps-line-strong); border-radius: var(--ps-r); cursor: pointer;
	transition: border-color .15s, background-color .15s;
}
form.checkout .pm-bank input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
form.checkout .pm-bank img { display: block; max-width: 82%; max-height: 26px; object-fit: contain; }
form.checkout .pm-bank .pm-bank-name { font-size: 14px; font-weight: 600; color: var(--ps-ink); text-align: center; }
form.checkout .pm-bank:hover { border-color: #e9a47f; }
form.checkout .pm-bank:has(input:checked) { border-color: var(--ps-orange); background: var(--ps-tint); box-shadow: inset 0 0 0 1px var(--ps-orange); }
form.checkout .pm-bank:has(input:focus-visible) { outline: 2px solid var(--ps-orange); outline-offset: 2px; }
/* bank payment sent without a bank (checkout.php script): a note above the tiles, a red frame */
form.checkout .pm-banks-msg { margin: 0 0 8px; color: #b3261e; font-size: 14px; font-weight: 600; }
form.checkout .pm-banks.pm-banks-missing { box-shadow: inset 0 0 0 2px #e0453a; }

/* the order summary above the order button */
form.checkout .checkout-summary { display: block; padding: 6px 18px; background: var(--ps-soft); border-radius: 12px; }
form.checkout .checkout-summary .cs-row {
	display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
	padding: 10px 0; font-size: 15px; color: var(--ps-text);
}
form.checkout .checkout-summary > * + * { border-top: 1px solid #e6e6e3; }
form.checkout .checkout-summary .cs-product > span:first-child { min-width: 0; color: var(--ps-ink); }
form.checkout .checkout-summary .cs-discount > span:last-child { color: #2e7d32; }
/* several products: the row opens to list them */
form.checkout .cs-products > summary { cursor: pointer; list-style: none; }
form.checkout .cs-products > summary::-webkit-details-marker { display: none; }
form.checkout .cs-products > summary > span:first-child { display: inline-flex; align-items: center; gap: 8px; color: var(--ps-ink); }
form.checkout .cs-products > summary > span:first-child::after {
	content: ""; width: 7px; height: 7px; margin-top: -4px; border: solid var(--ps-orange); border-width: 0 2px 2px 0;
	transform: rotate(45deg); transition: transform .15s;
}
form.checkout .cs-products[open] > summary > span:first-child::after { transform: rotate(-135deg); margin-top: 3px; }
form.checkout .cs-products ul { margin: 0 0 10px; padding: 0; list-style: none; }
form.checkout .cs-products li {
	display: flex; justify-content: space-between; gap: 16px; padding: 5px 0 5px 12px;
	border-left: 2px solid var(--ps-tint-line); font-size: 14px; color: #5a5a56;
}
form.checkout .cs-products li > span:last-child { white-space: nowrap; }
form.checkout .checkout-summary .cs-row > span:last-child { white-space: nowrap; color: var(--ps-ink); }
form.checkout .checkout-summary .cs-pending { font-style: italic; color: #8a8a86 !important; white-space: normal !important; text-align: right; }
form.checkout .checkout-summary .cs-total { font-size: 17px; font-weight: 800; }
form.checkout .checkout-summary .cs-total > span:last-child { color: var(--ps-orange); font-size: 20px; }

@media only screen and (max-width: 768px) {
	form.checkout .pm-banks { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 10px; }
	form.checkout .pm-bank { height: 56px; padding: 8px; }
	form.checkout .checkout-summary { padding: 4px 14px; }
}