/* ==========================================================================
   Cartline: checkout form, product selector, variation popup, sticky bar,
   thank-you page and the next-step button.

   Colours come from each step's Design settings as CSS variables
   (--cl-primary, --cl-primary-dark, --cl-text, --cl-card, --cl-radius,
   --cl-font). Everything is scoped to Cartline classes so the theme's own
   checkout styles are left alone.
   ========================================================================== */

.cartline,
.cartline-selector,
.cartline-modal,
.cartline-sticky,
.cartline-thankyou,
.cartline-button {
	--cl-primary: #1299e8;
	--cl-primary-dark: #0a66b8;
	--cl-text: #13223a;
	--cl-card: #ffffff;
	--cl-radius: 12px;
	--cl-soft: #eef7fe;
	--cl-soft: color-mix(in srgb, var(--cl-primary) 8%, #fff);
	--cl-ring: rgba(18, 153, 232, 0.22);
	--cl-ring: color-mix(in srgb, var(--cl-primary) 22%, transparent);
	--cl-line: #e2e9f2;
	--cl-field: #f8fbfe;
	--cl-muted: #64748b;
	--cl-ok: #1f9d6a;
	--cl-warn: #d97706;
	--cl-face: var(--cl-font, var(--kp-site-font, inherit));
	--cl-inner-radius: max(4px, calc(var(--cl-radius) - 4px));
}

/* ---------- Page shell ---------- */

.cartline-canvas {
	margin: 0;
}

.cartline-page {
	display: block;
}

.cartline {
	box-sizing: border-box;
	max-width: 1120px;
	margin: 0 auto;
	padding: 24px 16px 32px;
	color: var(--cl-text);
	font-family: var(--cl-face);
	scroll-margin-top: 16px;
}

.cartline *,
.cartline *::before,
.cartline *::after {
	box-sizing: border-box;
}

.cartline--one_column {
	max-width: 680px;
}

/* Width option (1.4); "auto" keeps the sizes above. */
.cartline.cartline--width-narrow {
	max-width: 680px;
}

.cartline.cartline--width-normal {
	max-width: 960px;
}

.cartline.cartline--width-wide {
	max-width: 1200px;
}

.cartline.cartline--width-full {
	max-width: none;
}

.cartline .cartline-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	align-items: start;
}

@media (min-width: 900px) {
	.cartline--two_column .cartline-grid {
		grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
		gap: 28px;
	}

	.cartline--two_column .cartline-col--side {
		position: sticky;
		top: 24px;
	}
}

.cartline .cartline-col {
	min-width: 0;
}

.cartline .cartline-card {
	background: var(--cl-card);
	border: 1px solid var(--cl-line);
	border-radius: var(--cl-radius);
	padding: 18px 16px;
}

@media (min-width: 600px) {
	.cartline .cartline-card {
		padding: 24px;
	}
}

.cartline .cartline-col--main > * + * {
	margin-top: 20px;
}

/* ---------- Headings ---------- */

.cartline h3,
.cartline .woocommerce-billing-fields > h3,
.cartline .woocommerce-additional-fields > h3,
.cartline #order_review_heading {
	margin: 0 0 16px;
	padding: 0;
	color: var(--cl-text);
	font-family: var(--cl-face);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
	text-transform: none;
	letter-spacing: 0;
}

/* ---------- Fields ---------- */

.cartline .woocommerce-billing-fields__field-wrapper,
.cartline .woocommerce-shipping-fields__field-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 0 14px;
}

.cartline .form-row {
	flex: 1 1 100%;
	float: none;
	width: auto;
	margin: 0 0 14px;
	padding: 0;
}

@media (min-width: 600px) {
	.cartline .form-row-first,
	.cartline .form-row-last {
		flex: 1 1 calc(50% - 7px);
	}
}

.cartline .form-row label {
	display: block;
	margin: 0 0 6px;
	color: var(--cl-text);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

.cartline .form-row label .optional {
	color: var(--cl-muted);
	font-weight: 400;
}

.cartline .form-row .required {
	color: var(--cl-warn);
	text-decoration: none;
	border: 0;
}

.cartline .form-row input.input-text,
.cartline .form-row textarea,
.cartline .form-row select,
.cartline .cartline-coupon__code,
.cartline .select2-container .select2-selection--single {
	width: 100%;
	min-height: 48px;
	padding: 11px 14px;
	border: 1.5px solid var(--cl-line);
	border-radius: var(--cl-inner-radius);
	background: var(--cl-field);
	color: var(--cl-text);
	font-family: var(--cl-face);
	font-size: 16px; /* 16px stops iOS from zooming in */
	line-height: 1.4;
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.cartline .form-row textarea {
	min-height: 96px;
}

.cartline .select2-container .select2-selection--single .select2-selection__rendered {
	padding: 0;
	color: var(--cl-text);
	line-height: 24px;
}

.cartline .select2-container .select2-selection--single .select2-selection__arrow {
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
}

.cartline .form-row input.input-text:focus,
.cartline .form-row textarea:focus,
.cartline .form-row select:focus,
.cartline .cartline-coupon__code:focus,
.cartline .select2-container--focus .select2-selection--single,
.cartline .select2-container--open .select2-selection--single {
	border-color: var(--cl-primary);
	background: #fff;
	box-shadow: 0 0 0 3px var(--cl-ring);
	outline: 0;
}

.cartline .form-row.woocommerce-invalid input.input-text,
.cartline .form-row.woocommerce-invalid select,
.cartline .form-row.woocommerce-invalid .select2-selection {
	border-color: var(--cl-warn);
}

.cartline .form-row.woocommerce-validated input.input-text {
	border-color: var(--cl-line);
}

.cartline .checkout-inline-error-message {
	margin: 6px 0 0;
	color: var(--cl-warn);
	font-size: 13px;
}

.cartline .cartline-hidden {
	display: none !important;
}

/* Your own fields: choice buttons and tick boxes */
.cartline .form-row input.input-radio,
.cartline .form-row input.input-checkbox {
	width: 18px;
	height: 18px;
	margin: 0 8px 0 0;
	vertical-align: -3px;
	accent-color: var(--cl-primary);
}

.cartline .form-row .woocommerce-input-wrapper:has(> .input-radio) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	row-gap: 8px;
}

.cartline .form-row label.radio {
	display: inline;
	margin: 0 20px 0 0;
	font-weight: 500;
	cursor: pointer;
}

/* WooCommerce repeats "(optional)" on every choice; the field label has it once. */
.cartline .form-row label.radio .optional,
.cartline .form-row label.radio .required {
	display: none;
}

.cartline .form-row label.checkbox {
	display: flex;
	align-items: center;
	font-weight: 500;
	cursor: pointer;
}

/* ---------- Order summary ---------- */

.cartline .woocommerce-checkout-review-order-table {
	width: 100%;
	margin: 0 0 16px;
	border: 0;
	border-collapse: collapse;
	font-size: 15px;
}

.cartline .woocommerce-checkout-review-order-table th,
.cartline .woocommerce-checkout-review-order-table td {
	padding: 10px 0;
	border: 0;
	border-top: 1px solid var(--cl-line);
	background: none;
	color: var(--cl-text);
	text-align: left;
	vertical-align: top;
}

.cartline .woocommerce-checkout-review-order-table thead th {
	border-top: 0;
	padding-top: 0;
	color: var(--cl-muted);
	font-size: 13px;
	font-weight: 600;
}

.cartline .woocommerce-checkout-review-order-table th:last-child,
.cartline .woocommerce-checkout-review-order-table td:last-child {
	text-align: right;
	white-space: nowrap;
}

.cartline .woocommerce-checkout-review-order-table .product-quantity {
	color: var(--cl-muted);
	font-weight: 600;
}

.cartline .woocommerce-checkout-review-order-table .order-total th,
.cartline .woocommerce-checkout-review-order-table .order-total td {
	border-top: 2px solid var(--cl-line);
	font-size: 18px;
	font-weight: 800;
}

.cartline .woocommerce-checkout-review-order-table .order-total .amount {
	color: var(--cl-text);
}

.cartline .cartline-review__item {
	display: flex;
	align-items: center;
	gap: 12px;
}

.cartline .cartline-review__img {
	position: relative;
	flex: none;
	width: 52px;
	height: 52px;
	border: 1px solid var(--cl-line);
	border-radius: var(--cl-inner-radius);
	background: var(--cl-field);
}

.cartline .cartline-review__img img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	border-radius: inherit;
	object-fit: cover;
}

.cartline .cartline-review__qty {
	position: absolute;
	top: -8px;
	right: -8px;
	display: grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--cl-text);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

.cartline .cartline-review__name {
	min-width: 0;
	font-weight: 600;
	line-height: 1.4;
}

.cartline .cartline-review__name dl.variation {
	margin: 2px 0 0;
	color: var(--cl-muted);
	font-size: 13px;
	font-weight: 400;
}

.cartline .cartline-review__name dl.variation dt,
.cartline .cartline-review__name dl.variation dd,
.cartline .cartline-review__name dl.variation p {
	display: inline;
	margin: 0;
	padding: 0;
}

.cartline .cartline-review td.product-total {
	vertical-align: middle;
	font-weight: 700;
}

.cartline .woocommerce-shipping-methods {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Theme price colours stay out: prices read in the text colour. */
.cartline .amount,
.cartline-selector .amount,
.cartline-modal .amount,
.cartline-thankyou .amount {
	color: inherit;
}

.cartline .woocommerce-checkout-review-order-table tr,
.cartline .woocommerce-checkout-review-order-table thead,
.cartline .woocommerce-checkout-review-order-table tbody,
.cartline .woocommerce-checkout-review-order-table tfoot {
	border: 0;
	background: none;
}

.cartline #order_review_heading {
	text-align: left;
}

/* Shipping choices as small option cards, radio first. */
.cartline .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals {
	display: flex !important;
	flex-direction: column;
	border-top: 1px solid var(--cl-line);
}

.cartline .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals th,
.cartline .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals td {
	display: block !important;
	width: 100% !important;
	border-top: 0;
	text-align: left !important;
	white-space: normal !important;
}

.cartline .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals th {
	padding-bottom: 6px;
}

.cartline .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals td {
	padding-top: 0;
}

.cartline ul#shipping_method li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 6px;
	padding: 10px 12px;
	border: 1.5px solid var(--cl-line);
	border-radius: var(--cl-inner-radius);
	background: #fff;
	text-align: left;
}

.cartline ul#shipping_method li:has(input:checked) {
	border-color: var(--cl-primary);
	background: var(--cl-soft);
}

.cartline ul#shipping_method li input[type="radio"] {
	order: -1;
	flex: none;
	margin: 0;
	accent-color: var(--cl-primary);
}

.cartline ul#shipping_method li label {
	flex: 1;
	margin: 0;
	font-weight: 600;
	cursor: pointer;
}

/* ---------- Coupon ---------- */

.cartline .cartline-coupon {
	margin: 0 0 16px;
}

.cartline .cartline-coupon__toggle {
	padding: 0;
	border: 0;
	background: none;
	color: var(--cl-primary-dark);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	text-decoration: underline;
	text-transform: none;
	text-underline-offset: 3px;
	cursor: pointer;
}

.cartline .cartline-coupon__form:not([hidden]) {
	display: flex;
	gap: 8px;
	margin-top: 10px;
}

.cartline .cartline-coupon__apply {
	flex: none;
	min-height: 48px;
	padding: 0 18px;
	border: 1.5px solid var(--cl-primary);
	border-radius: var(--cl-inner-radius);
	background: #fff;
	color: var(--cl-primary-dark);
	font-family: var(--cl-face);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}

.cartline .cartline-coupon.is-busy {
	opacity: 0.6;
	pointer-events: none;
}

/* ---------- Payment ---------- */

.cartline #payment {
	background: none;
	border-radius: 0;
}

.cartline #payment ul.payment_methods {
	margin: 0 0 16px;
	padding: 0;
	border: 0;
	list-style: none;
}

.cartline #payment ul.payment_methods li {
	position: relative;
	margin: 0 0 8px;
	padding: 12px 14px;
	border: 1.5px solid var(--cl-line);
	border-radius: var(--cl-inner-radius);
	background: #fff;
	line-height: 1.4;
}

.cartline #payment ul.payment_methods li:has(input:checked) {
	border-color: var(--cl-primary);
	background: var(--cl-soft);
}

.cartline #payment ul.payment_methods li > label {
	display: inline;
	margin: 0;
	font-weight: 600;
	cursor: pointer;
}

.cartline #payment ul.payment_methods li input[type="radio"] {
	margin: 0 8px 0 0;
	accent-color: var(--cl-primary);
	vertical-align: middle;
}

.cartline #payment div.payment_box {
	margin: 10px 0 0;
	padding: 10px 12px;
	border-radius: var(--cl-inner-radius);
	background: var(--cl-field);
	color: var(--cl-muted);
	font-size: 14px;
}

.cartline #payment div.payment_box::before {
	display: none;
}

.cartline #payment div.payment_box p:last-child {
	margin-bottom: 0;
}

.cartline #payment .place-order {
	margin: 0;
	padding: 0;
	background: none;
}

.cartline .woocommerce-terms-and-conditions-wrapper {
	margin-bottom: 14px;
	font-size: 14px;
}

/* The order button: the one thing that orders, so it gets the lip and sinks when pressed. */
.cartline #place_order {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 58px;
	margin: 0;
	padding: 14px 20px 16px;
	float: none;
	border: 0;
	border-radius: var(--cl-radius);
	background: linear-gradient(180deg, var(--cl-primary), var(--cl-primary-dark));
	box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.18), 0 10px 22px var(--cl-ring);
	color: #fff;
	font-family: var(--cl-face);
	font-size: 18px;
	font-weight: 800;
	line-height: 1.25;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.cartline #place_order::before {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.cartline #place_order:hover {
	filter: brightness(1.06);
}

.cartline #place_order:focus-visible {
	outline: 3px solid var(--cl-primary);
	outline-offset: 3px;
}

.cartline #place_order:active {
	transform: translateY(3px);
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.18), 0 4px 10px var(--cl-ring);
}

.cartline .cartline-trust {
	margin: 12px 0 0;
	color: var(--cl-muted);
	font-size: 14px;
	text-align: center;
}

.cartline .cartline-credit {
	margin: 20px 0 0;
	color: var(--cl-muted);
	font-size: 12px;
	text-align: center;
}

.cartline .cartline-credit a {
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---------- Notices ---------- */

.cartline .woocommerce-error,
.cartline .woocommerce-message,
.cartline .woocommerce-info,
.cartline .woocommerce-NoticeGroup .woocommerce-error {
	margin: 0 0 16px;
	padding: 12px 16px;
	border: 0;
	border-left: 4px solid var(--cl-warn);
	border-radius: var(--cl-inner-radius);
	background: #fff8eb;
	color: var(--cl-text);
	font-size: 15px;
	list-style: none;
}

.cartline .woocommerce-message {
	border-left-color: var(--cl-ok);
	background: #edf8f3;
}

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

.cartline .woocommerce-form-login-toggle .woocommerce-info {
	border-left-color: var(--cl-primary);
	background: var(--cl-soft);
}

/* ==========================================================================
   Product selector
   ========================================================================== */

.cartline-selector {
	color: var(--cl-text);
	font-family: var(--cl-face);
}

.cartline-selector .cartline-selector__title {
	margin: 0 0 12px;
	font-size: 18px;
	font-weight: 700;
}

.cartline-selector .cartline-selector__list {
	display: grid;
	gap: 12px;
}

.cartline-selector.is-busy .cartline-selector__list {
	opacity: 0.65;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.cartline-selector .cl-item {
	position: relative;
	padding: 14px 14px 14px 12px;
	border: 2px solid var(--cl-line);
	border-radius: var(--cl-radius);
	background: var(--cl-card);
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.cartline-selector .cl-item.is-selected {
	border-color: var(--cl-primary);
	background: var(--cl-soft);
}

.cartline-selector .cl-item.is-highlight {
	margin-top: 8px;
}

.cartline-selector .cl-item.is-unavailable {
	opacity: 0.55;
}

.cartline-selector .cl-item__main {
	display: grid;
	grid-template-columns: auto auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-weight: 400;
	cursor: pointer;
}

.cartline-selector--force_all .cl-item__main,
.cartline-selector .is-unavailable .cl-item__main {
	cursor: default;
}

/* The real input stays focusable for keyboards and screen readers; the circle/box shows it. */
.cartline-selector .cl-item__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.cartline-selector .cl-item__check {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border: 2px solid #b7c4d4;
	border-radius: 50%;
	background: #fff;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.cartline-selector--multiple .cl-item__check,
.cartline-selector--force_all .cl-item__check {
	border-radius: 6px;
}

.cartline-selector .cl-item__input:checked + .cl-item__check {
	border-color: var(--cl-primary);
	background: var(--cl-primary);
}

.cartline-selector--single .cl-item__input:checked + .cl-item__check::after {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #fff;
}

.cartline-selector--multiple .cl-item__input:checked + .cl-item__check::after,
.cartline-selector--force_all .cl-item__input:checked + .cl-item__check::after {
	content: "";
	width: 6px;
	height: 11px;
	margin-top: -2px;
	border: solid #fff;
	border-width: 0 2.5px 2.5px 0;
	transform: rotate(45deg);
}

.cartline-selector .cl-item__input:focus-visible + .cl-item__check {
	outline: 3px solid var(--cl-ring);
	outline-offset: 2px;
}

.cartline-selector .cl-item__img {
	display: block;
	width: 56px;
	height: 56px;
	overflow: hidden;
	border-radius: var(--cl-inner-radius);
	background: var(--cl-field);
}

.cartline-selector .cl-item__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cartline-selector .cl-item__body {
	display: grid;
	gap: 2px;
	min-width: 0;
}

/* Without an image the body takes the image's column too. */
.cartline-selector .cl-item__check + .cl-item__body {
	grid-column: 2 / 4;
}

.cartline-selector .cl-item__title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
}

.cartline-selector .cl-item__sub {
	color: var(--cl-muted);
	font-size: 14px;
	line-height: 1.4;
}

.cartline-selector .cl-item__stock {
	color: var(--cl-warn);
	font-size: 13px;
	font-weight: 600;
}

.cartline-selector .cl-item__price {
	display: grid;
	justify-items: end;
	gap: 2px;
	text-align: right;
	white-space: nowrap;
}

.cartline-selector .cl-item__price del {
	color: var(--cl-muted);
	opacity: 1;
	font-size: 13px;
}

.cartline-selector .cl-item__price ins {
	color: var(--cl-text);
	font-size: 17px;
	font-weight: 800;
	text-decoration: none;
	background: none;
}

.cartline-selector .cl-item__save {
	padding: 1px 8px;
	border-radius: 999px;
	background: #e3f5ec;
	color: #13704a;
	font-size: 12px;
	font-weight: 700;
}

.cartline-selector .cl-item__badge {
	position: absolute;
	top: -12px;
	right: 14px;
	z-index: 1;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--cl-primary);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
}

.cartline-selector .cl-item__extras {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 12px;
	padding-left: 34px;
}

/* Inline variations */
.cartline-selector .cl-vars {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.cartline-selector .cl-var {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	padding: 4px 12px;
	border: 1.5px solid var(--cl-line);
	border-radius: 999px;
	background: #fff;
	color: var(--cl-text);
	font-family: var(--cl-face);
	font-size: 14px;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.cartline-selector .cl-var img {
	width: 24px;
	height: 24px;
	margin-left: -6px;
	border-radius: 50%;
	object-fit: cover;
}

.cartline-selector .cl-var:hover {
	border-color: var(--cl-primary);
}

.cartline-selector .cl-var.is-active {
	border-color: var(--cl-primary);
	background: var(--cl-soft);
	color: var(--cl-primary-dark);
	font-weight: 700;
}

.cartline-selector .cl-var:focus-visible,
.cartline-selector .cl-var-change:focus-visible,
.cartline-selector .cl-qty__btn:focus-visible {
	outline: 3px solid var(--cl-ring);
	outline-offset: 2px;
}

/* Popup trigger */
.cartline-selector .cl-var-change {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 36px;
	padding: 4px 12px;
	border: 1.5px solid var(--cl-line);
	border-radius: 999px;
	background: #fff;
	color: var(--cl-text);
	font-family: var(--cl-face);
	font-size: 14px;
	cursor: pointer;
}

.cartline-selector .cl-var-change__link {
	color: var(--cl-primary-dark);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Quantity */
.cartline-selector .cl-qty {
	display: inline-flex;
	align-items: center;
	margin-left: auto;
	border: 1.5px solid var(--cl-line);
	border-radius: 999px;
	background: #fff;
}

.cartline-selector .cl-qty.is-disabled {
	opacity: 0.5;
}

.cartline-selector .cl-qty__btn {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--cl-text);
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}

.cartline-selector .cl-qty__btn:disabled {
	opacity: 0.35;
	cursor: default;
}

.cartline-selector .cl-qty__input {
	width: 40px;
	height: 36px;
	min-height: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--cl-text);
	font-family: var(--cl-face);
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

.cartline-selector .cl-qty__input::-webkit-outer-spin-button,
.cartline-selector .cl-qty__input::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.cartline-selector .cartline-selector__error:not([hidden]) {
	margin: 10px 0 0;
	padding: 8px 12px;
	border-radius: var(--cl-inner-radius);
	background: #fff8eb;
	color: #92400e;
	font-size: 14px;
}

/* Compact skin: tighter rows, small images. */
.cartline-selector--compact .cartline-selector__list {
	gap: 8px;
}

.cartline-selector--compact .cl-item {
	padding: 10px 12px;
}

.cartline-selector--compact .cl-item__img {
	width: 40px;
	height: 40px;
}

.cartline-selector--compact .cl-item__title {
	font-size: 15px;
}

@media (max-width: 480px) {
	.cartline-selector .cl-item__main {
		grid-template-columns: auto auto minmax(0, 1fr);
	}

	.cartline-selector .cl-item__price {
		grid-column: 3 / 4;
		justify-items: start;
		grid-auto-flow: column;
		align-items: baseline;
		gap: 8px;
		text-align: left;
	}

	.cartline-selector .cl-item__check + .cl-item__body + .cl-item__price {
		grid-column: 2 / 4;
	}

	.cartline-selector .cl-item__img {
		width: 48px;
		height: 48px;
	}

	.cartline-selector .cl-item__extras {
		padding-left: 0;
	}
}

/* ---------- Selector options (1.4): image size and shape, columns ---------- */

.cartline-selector .cl-item {
	container-type: inline-size;
}

.cartline-selector--img-portrait .cl-item__img {
	height: 70px;
}

.cartline-selector--img-medium .cl-item__img {
	width: 88px;
	height: 88px;
}

.cartline-selector--img-medium.cartline-selector--img-portrait .cl-item__img {
	height: 110px;
}

/* Large: the image fills the top of the card; radio, text and price sit under it. */
.cartline-selector--img-large .has-image .cl-item__main {
	grid-template-columns: auto minmax(0, 1fr) auto;
}

.cartline-selector--img-large .has-image .cl-item__img {
	grid-column: 1 / -1;
	grid-row: 1;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
}

.cartline-selector--img-large.cartline-selector--img-portrait .has-image .cl-item__img {
	height: auto;
	aspect-ratio: 4 / 5;
}

/* Side by side. Tablets get at most two columns; phones one unless asked for two. */
@media (min-width: 600px) {
	.cartline-selector--cols-2 .cartline-selector__list,
	.cartline-selector--cols-3 .cartline-selector__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.cartline-selector--cols-3 .cartline-selector__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 599px) {
	.cartline-selector--phone-cols-2 .cartline-selector__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}
}

/* In a grid the badges of highlighted cards get room above the row instead of pushing one card down. */
@media (min-width: 600px) {
	.cartline-selector--cols-2 .cartline-selector__list,
	.cartline-selector--cols-3 .cartline-selector__list {
		row-gap: 20px;
		padding-top: 8px;
	}

	.cartline-selector--cols-2 .cl-item.is-highlight,
	.cartline-selector--cols-3 .cl-item.is-highlight {
		margin-top: 0;
	}
}

@media (max-width: 599px) {
	.cartline-selector--phone-cols-2 .cartline-selector__list {
		row-gap: 20px;
		padding-top: 8px;
	}

	.cartline-selector--phone-cols-2 .cl-item.is-highlight {
		margin-top: 0;
	}
}

/* A card lays itself out by its own width, so it reads well in one wide column or three narrow ones. */
@container (max-width: 420px) {
	.cartline-selector .cl-item__main {
		grid-template-columns: auto auto minmax(0, 1fr);
	}

	.cartline-selector .cl-item__price {
		grid-column: 3 / 4;
		justify-items: start;
		grid-auto-flow: column;
		align-items: baseline;
		gap: 8px;
		text-align: left;
	}

	.cartline-selector .cl-item__check + .cl-item__body + .cl-item__price {
		grid-column: 2 / 4;
	}

	.cartline-selector .cl-item__extras {
		padding-left: 0;
	}

	.cartline-selector--img-large .has-image .cl-item__main {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.cartline-selector--img-large .has-image .cl-item__price {
		grid-column: 2 / 3;
	}
}

@container (max-width: 240px) {
	.cartline-selector .cl-item__main {
		gap: 8px;
	}

	.cartline-selector .cl-item__title {
		font-size: 14px;
	}

	.cartline-selector .cl-item__sub {
		font-size: 12px;
	}

	.cartline-selector .cl-item__price {
		flex-wrap: wrap;
		grid-auto-flow: row;
		justify-items: start;
	}

	.cartline-selector .cl-item__price ins {
		font-size: 15px;
	}

	.cartline-selector .cl-item__img {
		width: 40px;
		height: 40px;
	}

	.cartline-selector .cl-var {
		min-height: 32px;
		padding: 3px 9px;
		font-size: 13px;
	}

	.cartline-selector .cl-qty {
		margin-left: 0;
	}
}

/* Selector inside the form's side card or main column. */
.cartline .cartline-selector {
	margin: 0 0 20px;
}

/* ==========================================================================
   Variation popup
   ========================================================================== */

body.cartline-modal-open {
	overflow: hidden;
}

.cartline-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	font-family: var(--cl-face);
}

@media (min-width: 600px) {
	.cartline-modal {
		align-items: center;
	}
}

.cartline-modal .cartline-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.55);
}

.cartline-modal .cartline-modal__dialog {
	position: relative;
	width: 100%;
	max-width: 440px;
	max-height: 90vh;
	overflow-y: auto;
	padding: 24px 20px 20px;
	border-radius: 18px 18px 0 0;
	background: #fff;
	color: var(--cl-text);
	box-shadow: 0 20px 50px rgba(15, 23, 42, 0.3);
}

@media (min-width: 600px) {
	.cartline-modal .cartline-modal__dialog {
		width: calc(100% - 32px);
		border-radius: 18px;
	}
}

.cartline-modal .cartline-modal__close {
	position: absolute !important;
	min-height: 0;
	top: 10px;
	right: 10px;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--cl-field);
	color: var(--cl-text);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

.cartline-modal .cartline-modal__media img {
	display: block;
	width: 96px;
	height: 96px;
	margin: 0 0 12px;
	border-radius: var(--cl-inner-radius);
	object-fit: cover;
}

.cartline-modal .cartline-modal__title {
	margin: 0 44px 16px 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
}

.cartline-modal .cartline-modal__field {
	margin: 0 0 12px;
}

.cartline-modal .cartline-modal__label {
	display: block;
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 600;
}

.cartline-modal .cartline-modal__select {
	width: 100%;
	min-height: 48px;
	padding: 10px 12px;
	border: 1.5px solid var(--cl-line);
	border-radius: var(--cl-inner-radius);
	background: var(--cl-field);
	color: var(--cl-text);
	font-family: var(--cl-face);
	font-size: 16px;
}

.cartline-modal .cartline-modal__select:focus {
	border-color: var(--cl-primary);
	box-shadow: 0 0 0 3px var(--cl-ring);
	outline: 0;
}

.cartline-modal .cartline-modal__price {
	margin: 4px 0 16px;
	font-size: 18px;
	font-weight: 800;
}

.cartline-modal .cartline-modal__apply {
	display: block;
	width: 100%;
	text-transform: none;
	letter-spacing: 0;
	min-height: 52px;
	border: 0;
	border-radius: var(--cl-radius);
	background: linear-gradient(180deg, var(--cl-primary), var(--cl-primary-dark));
	color: #fff !important;
	font-family: var(--cl-face);
	font-size: 17px;
	font-weight: 800;
	cursor: pointer;
}

.cartline-modal .cartline-modal__apply:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.cartline-modal .cartline-modal__apply:focus-visible,
.cartline-modal .cartline-modal__close:focus-visible {
	outline: 3px solid var(--cl-ring);
	outline-offset: 2px;
}

/* ==========================================================================
   Sticky "Order now" dock (phones)
   The order total on the left, the button on the right, on the step's card
   colour. checkout.js hides it while the form, or another link to the form,
   is on screen; it rises in when it comes back.
   ========================================================================== */

.cartline-sticky {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 9990;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 10px calc(10px + env(safe-area-inset-bottom)) 20px;
	border-top: 2px solid color-mix(in srgb, var(--cl-primary) 35%, transparent);
	border-radius: 22px 22px 0 0;
	background: var(--cl-card);
	background: color-mix(in srgb, var(--cl-card) 94%, transparent);
	box-shadow: 0 -14px 30px -18px rgba(15, 23, 42, 0.45);
	-webkit-backdrop-filter: blur(14px) saturate(1.4);
	backdrop-filter: blur(14px) saturate(1.4);
	color: var(--cl-text);
	font-family: var(--cl-face);
	text-decoration: none;
	transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.3, 1), opacity 0.3s ease;
}

@starting-style {
	.cartline-sticky {
		transform: translateY(100%);
		opacity: 0;
	}
}

.cartline-sticky.is-away {
	transform: translateY(110%);
	opacity: 0;
	visibility: hidden;
	transition: transform 0.25s ease-in, opacity 0.2s ease, visibility 0s 0.25s;
}

.cartline-sticky:hover,
.cartline-sticky:focus {
	color: var(--cl-text);
}

.cartline-sticky:focus-visible {
	outline: 3px solid var(--cl-ring);
	outline-offset: -3px;
}

.cartline-sticky[hidden] {
	display: none;
}

.cartline-sticky__sum {
	display: grid;
	min-width: 0;
	line-height: 1.15;
}

.cartline-sticky__label {
	font-size: 13px;
	font-weight: 500;
	color: var(--cl-muted);
}

.cartline-sticky__total {
	font-size: 24px;
	font-weight: 800;
	white-space: nowrap;
}

.cartline-sticky__total .amount,
.cartline-sticky__total bdi {
	color: inherit;
}

.cartline-sticky__text {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 12px;
	min-height: 54px;
	padding: 0 10px 0 22px;
	border-radius: var(--cl-inner-radius);
	background: linear-gradient(180deg, color-mix(in srgb, var(--cl-primary) 88%, #fff), var(--cl-primary));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 10px 20px -10px var(--cl-primary-dark);
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	transition: transform 0.12s ease;
}

/* A light disc with a down chevron: the button scrolls down to the form. */
.cartline-sticky__text::after {
	content: "";
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.92);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 18px;
}

.cartline-sticky:active .cartline-sticky__text {
	transform: scale(0.97);
}

@media (min-width: 900px) {
	.cartline-sticky {
		display: none !important;
	}
}

/* ==========================================================================
   Thank-you page
   ========================================================================== */

.cartline-thankyou {
	box-sizing: border-box;
	max-width: 760px;
	margin: 0 auto;
	padding: 32px 16px;
	color: var(--cl-text);
	font-family: var(--cl-face);
}

.cartline-thankyou__head {
	margin: 0 0 24px;
	text-align: center;
}

.cartline-thankyou__icon {
	display: inline-grid;
	place-items: center;
	width: 60px;
	height: 60px;
	margin: 0 0 12px;
	border-radius: 50%;
	background: #e3f5ec;
	color: var(--cl-ok);
}

.cartline-thankyou__title {
	margin: 0 0 8px;
	font-size: clamp(22px, 5vw, 28px);
	font-weight: 800;
	line-height: 1.3;
}

.cartline-thankyou__text {
	margin: 0;
	color: var(--cl-muted);
	font-size: 17px;
	line-height: 1.6;
}

.cartline-thankyou__details {
	padding: 20px 16px;
	border: 1px solid var(--cl-line);
	border-radius: var(--cl-radius);
	background: var(--cl-card);
}

@media (min-width: 600px) {
	.cartline-thankyou__details {
		padding: 28px;
	}
}

/* Answers to the checkout's own fields, under the address. */
.cartline-answers dl {
	margin: 16px 0 0;
}

.cartline-answers dt {
	margin: 12px 0 2px;
	font-weight: 600;
}

.cartline-answers dd {
	margin: 0;
}

/* Cartline shows its own heading; WooCommerce's duplicate line is hidden. */
.cartline-thankyou .woocommerce-thankyou-order-received {
	display: none;
}

.cartline-thankyou ul.woocommerce-order-overview {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 12px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.cartline-thankyou ul.woocommerce-order-overview li {
	float: none;
	margin: 0;
	padding: 12px;
	border: 0;
	border-radius: var(--cl-inner-radius);
	background: var(--cl-field);
	color: var(--cl-muted);
	font-size: 13px;
	text-transform: none;
}

.cartline-thankyou ul.woocommerce-order-overview li strong {
	display: block;
	margin-top: 4px;
	color: var(--cl-text);
	font-size: 16px;
}

/* ==========================================================================
   Next-step button, helper boxes
   ========================================================================== */

.cartline-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding: 14px 28px 16px;
	border-radius: var(--cl-radius);
	background: linear-gradient(180deg, var(--cl-primary), var(--cl-primary-dark));
	box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.18), 0 10px 22px var(--cl-ring);
	color: #fff;
	font-family: var(--cl-face);
	font-size: 18px;
	font-weight: 800;
	line-height: 1.25;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.cartline-button:hover,
.cartline-button:focus {
	color: #fff;
	filter: brightness(1.06);
}

.cartline-button:focus-visible {
	outline: 3px solid var(--cl-primary);
	outline-offset: 3px;
}

.cartline-button:active {
	transform: translateY(3px);
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.18), 0 4px 10px var(--cl-ring);
}

.cartline-admin-hint,
.cartline-placeholder {
	margin: 0 0 16px;
	padding: 12px 16px;
	border: 1.5px dashed #94a3b8;
	border-radius: 10px;
	background: #f8fafc;
	color: #334155;
	font-size: 14px;
}

.cartline-placeholder {
	padding: 32px 16px;
	text-align: center;
}

/* ---------- Choices in the form (1.5): options such as size, and delivery ---------- */
/* Selectors carry .cartline-choices so they outrank `.cartline .form-row label`. */

.cartline .cartline-choices .cartline-choices {
	margin-bottom: 18px;
}

.cartline .cartline-choices .cartline-choices__label {
	display: block;
	margin: 0 0 8px;
	color: var(--cl-text);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
}

.cartline .cartline-choices .cartline-choices__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(68px, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cartline .cartline-choices .cartline-choices__list:focus {
	outline: 0;
}

.cartline .cartline-choices .cartline-choices__list--rows {
	grid-template-columns: minmax(0, 1fr);
}

.cartline .cartline-choices .cartline-choices__list li {
	margin: 0;
	padding: 0;
}

.cartline .cartline-choices .cartline-choice {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	margin: 0;
	padding: 8px 6px;
	border: 1.5px solid var(--cl-line);
	border-radius: var(--cl-inner-radius);
	background: #fff;
	color: var(--cl-text);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.cartline .cartline-choices .cartline-choice:hover {
	border-color: color-mix(in srgb, var(--cl-primary) 45%, var(--cl-line));
}

/* The real radio stays focusable; the box shows it. */
.cartline .cartline-choices .cartline-choice input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.cartline .cartline-choices .cartline-choice:has(input:checked) {
	border-color: var(--cl-primary);
	background: var(--cl-soft);
	box-shadow: inset 0 0 0 1px var(--cl-primary);
}

.cartline .cartline-choices .cartline-choice:has(input:focus-visible) {
	outline: 3px solid var(--cl-ring);
	outline-offset: 2px;
}

/* Delivery: one row per option, a radio dot, the name and its charge. */
.cartline .cartline-choices .cartline-choice--row {
	justify-content: flex-start;
	padding: 12px 14px;
	text-align: left;
}

.cartline .cartline-choices .cartline-choice__dot {
	display: grid;
	flex: none;
	place-items: center;
	width: 20px;
	height: 20px;
	border: 2px solid #b7c4d4;
	border-radius: 50%;
	background: #fff;
}

.cartline .cartline-choices .cartline-choice:has(input:checked) .cartline-choice__dot {
	border-color: var(--cl-primary);
	background: var(--cl-primary);
}

.cartline .cartline-choices .cartline-choice:has(input:checked) .cartline-choice__dot::after {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #fff;
}

.cartline .cartline-choices .cartline-choice--row .cartline-choice__name {
	flex: 1;
	min-width: 0;
}

.cartline .cartline-choices .cartline-choice__price {
	font-weight: 800;
	white-space: nowrap;
}

.cartline .cartline-options.is-busy .cartline-choices__list {
	opacity: 0.65;
	pointer-events: none;
}

.cartline .cartline-choices .cartline-choices.woocommerce-invalid .cartline-choice {
	border-color: var(--cl-warn);
}

.cartline .cartline-options__error:not([hidden]) {
	margin: -8px 0 16px;
	color: var(--cl-warn);
	font-size: 14px;
	font-weight: 600;
}

.cartline .cartline-pending {
	color: var(--cl-warn);
	font-weight: 600;
}

/* ---------- Template "List" (1.5): plain product list, everything else in the form ---------- */

/* Products: radio, picture, then title, price and quantity stacked beside it. */
.cartline-selector--tpl-list {
	--cl-img: 56px;
}

.cartline-selector--tpl-list.cartline-selector--img-medium {
	--cl-img: 88px;
}

.cartline-selector--tpl-list .cl-item {
	padding: 14px;
	border-width: 1.5px;
}

.cartline-selector--tpl-list:not(.cartline-selector--img-large) .cl-item__main {
	grid-template-columns: auto auto minmax(0, 1fr);
	align-items: start;
}

.cartline-selector--tpl-list:not(.cartline-selector--img-large) .cl-item__check {
	grid-row: span 2;
	align-self: center;
}

.cartline-selector--tpl-list:not(.cartline-selector--img-large) .cl-item__price {
	grid-column: -2;
	grid-auto-flow: column;
	justify-content: start;
	align-items: baseline;
	gap: 8px;
	text-align: left;
}

.cartline-selector--tpl-list:not(.cartline-selector--img-large) .cl-item__check + .cl-item__body + .cl-item__price {
	grid-column: 2 / -1;
}

.cartline-selector--tpl-list:not(.cartline-selector--img-large) .cl-item.has-image .cl-item__img {
	grid-row: span 2;
}

.cartline-selector--tpl-list:not(.cartline-selector--img-large) .cl-item.has-image .cl-item__extras {
	padding-left: calc(34px + var(--cl-img) + 12px);
}

.cartline-selector--tpl-list .cl-item__extras {
	margin-top: 8px;
}

.cartline-selector--tpl-list .cl-item__title {
	font-size: 15px;
}

/* The form sits flat; only the order summary keeps a tinted panel. */
.cartline--tpl-list .cartline-customer {
	padding: 0;
	border: 0;
	background: none;
}

.cartline--tpl-list .cartline-summary {
	border: 0;
	background: var(--cl-field);
}

.cartline--tpl-list .form-row input.input-text,
.cartline--tpl-list .form-row textarea,
.cartline--tpl-list .form-row select {
	border-color: color-mix(in srgb, var(--cl-text) 22%, #fff);
	background: #fff;
}

.cartline--tpl-list .form-row label,
.cartline--tpl-list .cartline-choices__label {
	font-size: 15px;
}

.cartline--tpl-list .cartline-delivery {
	margin-top: 4px;
}

@media (min-width: 600px) {
	.cartline--tpl-list .cartline-summary {
		padding: 24px 24px 20px;
	}
}

/* ---------- Facts above the form (1.6): short title + text pairs, two across, four on wide screens ---------- */
.cartline .cartline-facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	margin: 0 0 20px;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--cl-line);
	border-radius: var(--cl-inner-radius);
	background: var(--cl-line);
	list-style: none;
}

.cartline .cartline-facts li {
	margin: 0;
	padding: 10px 12px;
	background: var(--cl-card);
	color: var(--cl-muted);
	font-size: 13px;
	line-height: 1.4;
}

.cartline .cartline-facts strong {
	display: block;
	color: var(--cl-primary-dark);
	font-size: 15px;
}

@media (min-width: 900px) {
	.cartline .cartline-facts {
		grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	}
}

/* ---------- Template "Stack" (1.6): one line per product, one per option; drawn for phones ---------- */

/* Every box (products, sizes, delivery): a faint tint, a hairline border and a soft lift. */
.cartline-selector--tpl-stack,
.cartline--tpl-stack {
	--cl-box: color-mix(in srgb, var(--cl-primary) 3%, var(--cl-card));
	--cl-box-line: color-mix(in srgb, var(--cl-text) 14%, transparent);
	--cl-lift: 0 1px 2px rgb(16 24 40 / 0.05), 0 4px 12px -4px rgb(16 24 40 / 0.08);
}

/* Products: a bordered line each (tick, title and note, the price at the end). Only the ticked one shows its quantity. */
.cartline-selector--tpl-stack .cartline-selector__list {
	gap: 14px;
}

.cartline-selector--tpl-stack .cl-item {
	display: grid;
	align-content: center; /* side by side, a short line stays centred beside a taller one */
	padding: 14px 16px 14px 14px;
	border: 1px solid var(--cl-box-line);
	border-radius: max(var(--cl-radius), 14px);
	background: var(--cl-box);
	box-shadow: var(--cl-lift);
}

.cartline-selector--tpl-stack .cl-item.is-selected {
	border-color: var(--cl-primary);
	background: var(--cl-soft);
}

.cartline-selector--tpl-stack .cl-item.is-highlight {
	margin-top: 14px;
}

.cartline-selector--tpl-stack .cl-item .cl-item__main {
	grid-template-columns: auto auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
}

.cartline-selector.cartline-selector--tpl-stack .cl-item .cl-item__main > .cl-item__price {
	grid-row: 1;
	grid-column: 4;
	grid-auto-flow: row;
	justify-items: end;
	gap: 0;
	text-align: right;
}

.cartline-selector--tpl-stack .cl-item__check {
	width: 24px;
	height: 24px;
}

.cartline-selector--tpl-stack .cl-item__img {
	width: 52px;
	height: 52px;
	border-radius: 8px;
}

.cartline-selector--tpl-stack .cl-item__title {
	font-size: 15px;
	line-height: 1.35;
}

.cartline-selector--tpl-stack .cl-item__sub {
	font-size: 13px;
}

.cartline-selector--tpl-stack .cl-item__price ins {
	color: var(--cl-primary-dark);
	font-size: 17px;
}

.cartline-selector--tpl-stack .cl-item__badge {
	top: -11px;
	right: auto;
	left: 14px;
	font-size: 12px;
}

.cartline-selector--tpl-stack .cl-item:not(.is-selected) .cl-item__extras {
	display: none;
}

.cartline-selector--tpl-stack .cl-item__extras {
	justify-content: flex-end;
	margin-top: 10px;
	padding-left: 0;
}

/* Headings: one voice for every part of the form. */
.cartline-selector--tpl-stack .cartline-selector__title,
.cartline--tpl-stack .woocommerce-billing-fields > h3,
.cartline--tpl-stack #order_review_heading {
	margin: 0 0 14px;
	color: var(--cl-primary-dark);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.35;
}

/* The form sits flat; only the order summary keeps a tinted panel. */
.cartline--tpl-stack .cartline-customer {
	padding: 0;
	border: 0;
	background: none;
}

.cartline--tpl-stack .cartline-summary {
	border: 0;
	background: var(--cl-field);
}

.cartline--tpl-stack .form-row label,
.cartline--tpl-stack .cartline-choices .cartline-choices__label {
	font-size: 15px;
	font-weight: 700;
}

.cartline--tpl-stack .form-row input.input-text,
.cartline--tpl-stack .form-row textarea,
.cartline--tpl-stack .form-row select {
	min-height: 50px;
	border: 1.5px solid color-mix(in srgb, var(--cl-text) 20%, #fff);
	border-radius: max(var(--cl-inner-radius), 10px);
	background: #fff;
}

/* The hints step back; typed text stays 16px on phones (smaller makes iPhones zoom in). */
.cartline--tpl-stack .form-row input.input-text::placeholder,
.cartline--tpl-stack .form-row textarea::placeholder {
	font-size: 14px;
}

@media (min-width: 600px) {
	.cartline--tpl-stack .form-row input.input-text,
	.cartline--tpl-stack .form-row textarea {
		font-size: 15px;
	}
}

/* Sizes and delivery: the same box with a radio dot, one per line. */
.cartline--tpl-stack .cartline-choices .cartline-choices__list {
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
}

.cartline--tpl-stack .cartline-choices .cartline-choice {
	justify-content: flex-start;
	min-height: 52px;
	padding: 12px 14px;
	border: 1px solid var(--cl-box-line);
	border-radius: max(var(--cl-inner-radius), 12px);
	background: var(--cl-box);
	box-shadow: var(--cl-lift);
	font-size: 16px;
	text-align: left;
}

.cartline--tpl-stack .cartline-choices .cartline-choice:has(input:checked) {
	background: var(--cl-soft);
	box-shadow: var(--cl-lift);
}

.cartline--tpl-stack .cartline-choices .cartline-choice:not(.cartline-choice--row)::before {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	border: 2px solid #b7c4d4;
	border-radius: 50%;
	background: #fff;
}

.cartline--tpl-stack .cartline-choices .cartline-choice:not(.cartline-choice--row):has(input:checked)::before {
	border-color: var(--cl-primary);
	background: radial-gradient(circle, #fff 0 3.5px, var(--cl-primary) 4px);
}

.cartline--tpl-stack .cartline-delivery {
	margin-top: 4px;
}

.cartline--tpl-stack #payment ul.payment_methods li {
	border: 1px solid var(--cl-box-line);
	background: var(--cl-box);
	box-shadow: var(--cl-lift);
}

.cartline--tpl-stack #payment ul.payment_methods li:has(input:checked) {
	border-color: var(--cl-primary);
	background: var(--cl-soft);
}

/* Order summary: the product names step back (smaller, grey, lighter); the prices stay as they are. */
.cartline--tpl-stack .cartline-review__name {
	color: var(--cl-muted);
	font-size: 13.5px;
	font-weight: 400;
	line-height: 1.45;
}

@media (min-width: 600px) {
	.cartline--tpl-stack .cartline-summary {
		padding: 24px 24px 20px;
	}

	/* Side by side every product box has the same size, ticked or not: the quantity sits under the
	   price in the corner instead of adding a row, and every row is as tall as the tallest. */
	.cartline-selector--tpl-stack .cartline-selector__list {
		grid-auto-rows: 1fr;
		gap: 20px;
		padding-top: 10px;
	}

	.cartline-selector--tpl-stack .cl-item.is-highlight {
		margin-top: 0;
	}

	.cartline-selector--tpl-stack .cl-item {
		grid-template: minmax(0, 1fr) / minmax(0, 1fr);
		align-content: stretch;
		min-height: 92px;
	}

	.cartline-selector--tpl-stack .cl-item > .cl-item__main,
	.cartline-selector--tpl-stack .cl-item > .cl-item__extras {
		grid-area: 1 / 1;
	}

	.cartline-selector--tpl-stack .cl-item .cl-item__main {
		grid-template-columns: auto auto minmax(0, 1fr) minmax(96px, auto);
		align-content: start;
		align-items: start;
	}

	.cartline-selector--tpl-stack .cl-item__extras {
		align-self: end;
		justify-self: end;
		margin: 0;
	}

	/* The photo fills the box's height. */
	.cartline-selector--tpl-stack .cl-item__img {
		width: 64px;
		height: 64px;
	}

	.cartline-selector--tpl-stack .cl-qty__btn {
		width: 30px;
		height: 30px;
	}

	.cartline-selector--tpl-stack .cl-qty__input {
		width: 32px;
		height: 30px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cartline *,
	.cartline-selector *,
	.cartline .cartline-choice,
	.cartline-button,
	.cartline-sticky,
	.cartline-sticky__text {
		transition: none !important;
	}
}

/* ---------- Bordered templates (1.7): the Stack form inside a border, in the step's colours ----------
   Frame, Outline, Notch and Receipt also carry the "stack" classes, so everything above applies;
   these rules only draw the border, the heading on it and each one's own finish. */

.cartline.cartline--tpl-frame,
.cartline.cartline--tpl-outline,
.cartline.cartline--tpl-notch,
.cartline.cartline--tpl-receipt {
	background: var(--cl-card);
}

.cartline .cartline-frame__head {
	margin: 0 0 18px;
	color: var(--cl-primary-dark);
	font-family: var(--cl-face);
	font-size: clamp(18px, 1rem + 0.9vw, 26px);
	font-weight: 700;
	line-height: 1.35;
	text-wrap: balance;
}

/* The summary is one panel: no second box from the theme or WooCommerce inside it. */
.cartline--tpl-frame .woocommerce-checkout-review-order,
.cartline--tpl-outline .woocommerce-checkout-review-order,
.cartline--tpl-notch .woocommerce-checkout-review-order,
.cartline--tpl-receipt .woocommerce-checkout-review-order {
	padding: 0;
	border: 0;
	background: none;
}

.cartline--tpl-frame table.shop_table,
.cartline--tpl-outline table.shop_table,
.cartline--tpl-notch table.shop_table,
.cartline--tpl-receipt table.shop_table {
	border: 0;
	border-radius: 0;
}

.cartline--tpl-frame table.shop_table :is(th, td),
.cartline--tpl-outline table.shop_table :is(th, td),
.cartline--tpl-notch table.shop_table :is(th, td),
.cartline--tpl-receipt table.shop_table :is(th, td) {
	padding-inline: 0;
}

/* "Choose above" is a pointer, not a warning. */
.cartline--tpl-frame .cartline-pending,
.cartline--tpl-outline .cartline-pending,
.cartline--tpl-notch .cartline-pending,
.cartline--tpl-receipt .cartline-pending {
	color: var(--cl-primary);
}

/* Frame: a thick border in the main colour and a heading bar across the top, the form inset under it. */
.cartline.cartline--tpl-frame {
	padding: 8px 8px 20px;
	border: 3px solid var(--cl-primary);
	border-radius: calc(var(--cl-radius) + 8px);
	box-shadow: 0 16px 36px color-mix(in srgb, var(--cl-primary-dark) 14%, transparent);
}

.cartline.cartline--tpl-frame:not(:has(> .cartline-frame__head)) {
	padding-top: 20px;
}

.cartline--tpl-frame > :not(.cartline-frame__head) {
	margin-inline: 4px;
}

.cartline--tpl-frame .cartline-frame__head {
	padding: 14px 16px;
	border-radius: calc(var(--cl-radius) + 1px);
	background: var(--cl-primary);
	color: #fff;
	text-align: center;
}

.cartline--tpl-frame .form-row input.input-text,
.cartline--tpl-frame .form-row textarea,
.cartline--tpl-frame .form-row select {
	border-color: color-mix(in srgb, var(--cl-primary) 38%, #fff);
	background: color-mix(in srgb, var(--cl-primary) 4%, #fff);
}

.cartline-selector--tpl-frame .cl-item__badge {
	background: var(--cl-primary);
	color: #fff;
}

/* Cash on delivery is the promise: the payment note in the dark main colour on a warm band, with a tick. */
.cartline--tpl-frame #payment div.payment_box {
	border: 1px solid #ecd9a3;
	background: #fff6dc;
}

.cartline--tpl-frame #payment div.payment_box p {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--cl-primary-dark);
	font-size: 15px;
	font-weight: 700;
}

.cartline--tpl-frame #payment div.payment_box p::before {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--cl-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* The buy button: a leaf (two round corners) with a white edge. */
.cartline--tpl-frame #place_order {
	border: 3px solid #fff;
	border-radius: 0 22px;
	box-shadow: 0 0 12px rgb(0 0 0 / 0.28);
}

/* Outline: a thin border, every box outlined and flat on white; the heading ruled off at the top. */
.cartline.cartline--tpl-outline {
	padding: 20px 16px 24px;
	border: 1.5px solid color-mix(in srgb, var(--cl-primary) 45%, var(--cl-line));
	border-radius: var(--cl-radius);
}

.cartline-selector--tpl-outline,
.cartline--tpl-outline {
	--cl-box: var(--cl-card);
	--cl-box-line: color-mix(in srgb, var(--cl-text) 16%, transparent);
	--cl-lift: none;
}

.cartline--tpl-outline .cartline-frame__head {
	margin-bottom: 20px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--cl-box-line);
}

.cartline--tpl-outline .form-row input.input-text,
.cartline--tpl-outline .form-row textarea,
.cartline--tpl-outline .form-row select {
	border-width: 1px;
	border-color: color-mix(in srgb, var(--cl-text) 22%, #fff);
}

.cartline--tpl-outline .cartline-summary {
	border: 1px solid var(--cl-box-line);
	background: var(--cl-card);
}

.cartline--tpl-outline #place_order {
	box-shadow: none;
}

/* Notch: a border in the main colour with the heading set into its top line as a pill. */
.cartline.cartline--tpl-notch {
	position: relative;
	padding: 24px 16px 24px;
	border: 2px solid var(--cl-primary);
	border-radius: var(--cl-radius);
}

.cartline.cartline--tpl-notch:has(> .cartline-frame__head) {
	margin-top: 26px;
	padding-top: 44px;
}

.cartline--tpl-notch .cartline-frame__head {
	position: absolute;
	top: 0;
	left: 50%;
	width: max-content;
	max-width: calc(100% - 32px);
	margin: 0;
	padding: 9px 20px;
	transform: translate(-50%, -50%);
	border-radius: 999px;
	background: var(--cl-primary);
	color: #fff;
	font-size: clamp(16px, 0.9rem + 0.6vw, 21px);
	text-align: center;
}

/* Receipt: a dashed border, dashed boxes until one is ticked, and the summary set like a till slip. */
.cartline.cartline--tpl-receipt {
	padding: 20px 16px 24px;
	border: 2px dashed color-mix(in srgb, var(--cl-text) 32%, transparent);
	border-radius: var(--cl-radius);
}

.cartline-selector--tpl-receipt,
.cartline--tpl-receipt {
	--cl-box: var(--cl-card);
	--cl-box-line: color-mix(in srgb, var(--cl-text) 26%, transparent);
	--cl-lift: none;
}

.cartline--tpl-receipt .cartline-frame__head {
	padding-bottom: 14px;
	border-bottom: 2px dashed var(--cl-box-line);
	text-align: center;
}

.cartline-selector--tpl-receipt .cl-item,
.cartline--tpl-receipt .cartline-choices .cartline-choice,
.cartline--tpl-receipt #payment ul.payment_methods li {
	border-style: dashed;
	border-width: 1.5px;
}

.cartline-selector--tpl-receipt .cl-item.is-selected,
.cartline--tpl-receipt .cartline-choices .cartline-choice:has(input:checked),
.cartline--tpl-receipt #payment ul.payment_methods li:has(input:checked) {
	border-style: solid;
	border-color: var(--cl-primary);
}

.cartline--tpl-receipt .form-row input.input-text,
.cartline--tpl-receipt .form-row textarea,
.cartline--tpl-receipt .form-row select {
	border-width: 1px;
}

.cartline--tpl-receipt .cartline-summary {
	border: 1.5px dashed var(--cl-box-line);
	background: color-mix(in srgb, var(--cl-primary) 3%, #fff);
}

.cartline--tpl-receipt .woocommerce-checkout-review-order-table td,
.cartline--tpl-receipt .woocommerce-checkout-review-order-table th {
	border-top-style: dashed;
}

.cartline--tpl-receipt .woocommerce-checkout-review-order-table .order-total th,
.cartline--tpl-receipt .woocommerce-checkout-review-order-table .order-total td {
	border-top: 2px dashed color-mix(in srgb, var(--cl-text) 40%, transparent);
}

@media (min-width: 600px) {
	.cartline.cartline--tpl-frame {
		padding: 10px 10px 28px;
	}

	.cartline.cartline--tpl-frame:not(:has(> .cartline-frame__head)) {
		padding-top: 28px;
	}

	.cartline--tpl-frame > :not(.cartline-frame__head) {
		margin-inline: 18px;
	}

	.cartline.cartline--tpl-outline,
	.cartline.cartline--tpl-notch,
	.cartline.cartline--tpl-receipt {
		padding-inline: 28px;
		padding-bottom: 32px;
	}

	.cartline.cartline--tpl-notch:has(> .cartline-frame__head) {
		padding-top: 52px;
	}
}