/* Cart + Checkout + Order Received.
   Recomposed layout (not a restyled WooCommerce table/list) on top of the
   frozen Phase 1 business logic. Uses the same design tokens as the rest
   of the site (Playfair headings, Inter body, terracotta accent, subtle
   borders — no heavy shadows, no default WooCommerce purple). The page
   width itself comes from the site's shared .container (max 1280px,
   theme/quiche/index.php already wraps every page in it). */

/* -------------------------------------------------------------------------
   Kill WooCommerce's own purple everywhere on these pages in one shot:
   woocommerce.css itself is built entirely on these custom properties
   (buttons, focus rings, notice borders/icons, etc.), so redefining them
   here recolors all of it without touching the plugin's stylesheet or
   fighting it selector-by-selector.
   ------------------------------------------------------------------------- */
.woocommerce-cart,
.woocommerce-checkout {
	--woocommerce: var(--color-accent);
	--wc-primary: var(--color-accent);
	--wc-primary-text: var(--color-accent-contrast);
	--wc-secondary: var(--color-beige);
	--wc-secondary-text: var(--color-text);
	--wc-content-bg: var(--color-surface);
	--wc-subtext: var(--color-text-muted);
	--wc-form-border-color: var(--color-border);
	--wc-form-border-radius: var(--radius-sm);
	/* Selected delivery/payment card: a faint terracotta tint, so it still
	   reads as "selected" on the cream checkout background. */
	--color-selected: color-mix(in srgb, var(--color-accent) 6%, var(--color-surface));
	/* Payment-method note box (e.g. bank-transfer instructions). */
	--color-note: #EEECEE;
}

/* Checkout page sits on the warm cream background (approved reference);
   white cards/inputs on top of it. */
body.woocommerce-checkout {
	background: var(--color-cream);
}

.quiche-checkout-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	margin: 0 0 var(--space-3);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}
.quiche-checkout-breadcrumb a { color: var(--color-text-muted); text-decoration: none; }
.quiche-checkout-breadcrumb a:hover { color: var(--color-accent); }
.quiche-checkout-breadcrumb [aria-current] { color: var(--color-text); }

.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce {
	padding-block: var(--space-6);
}

/* Checkout gets its own, wider container instead of the sitewide 1280px
   .container — the two-column composition needs more room than any other
   page on the site. Scoped to the body class, so Cart and every other
   page keep the normal shared container untouched. */
body.woocommerce-checkout .container {
	width: calc(100% - 80px);
	max-width: 1500px;
}

.woocommerce-cart h1 {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: var(--display-h2);
	color: var(--color-text);
	margin-bottom: var(--space-6);
}
.woocommerce-checkout h1 {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: var(--display-page);
	color: var(--color-text);
	margin-bottom: var(--space-3);
}

/* Safety net for the full-bleed decoration below (100vw child inside a
   narrower container) — scoped to this page only via the body class. */
body.woocommerce-checkout {
	overflow-x: hidden;
}

/* ---------------------------------------------------------------------
   Decorative page dressing — Checkout only (theme/quiche/inc/checkout-
   render.php, quiche_render_checkout_decoration()). aria-hidden and
   pointer-events:none (assets/js never reads it, it's not part of the
   form), sitting at z-index:0 strictly behind the z-index:1 content — so
   even where it geometrically sits under the two-column content near the
   1200-1280px boundary, it never intercepts a click or competes with text
   for attention. Shown from 1200px up (below that there's no realistic
   room at all, matching the .container's own 1024px→desktop-grid
   breakpoint plus a buffer); hidden entirely below that, per "reduce/
   disappear on mobile".
   --------------------------------------------------------------------- */
.quiche-checkout-page {
	position: relative;
}
.quiche-checkout-decor {
	display: none;
}
@media (min-width: 1200px) {
	.quiche-checkout-decor {
		display: block;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 50%;
		width: 100vw;
		transform: translateX(-50%);
		pointer-events: none;
		z-index: 0;
		overflow: hidden;
	}
}
.quiche-checkout-page > form,
.quiche-checkout-page > .quiche-checkout-subhead,
.quiche-checkout-page > .quiche-checkout-trust {
	position: relative;
	z-index: 1;
}

.quiche-checkout-decor__lviv {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 320px;
	height: auto;
	color: var(--color-accent);
	opacity: 0.4;
}
.quiche-checkout-decor__food {
	position: absolute;
	right: -40px;
	top: 8%;
	width: 380px;
	/* Fades on all four sides so the photo reads as part of the page
	   background rather than a pasted card/tile. */
	-webkit-mask-image: linear-gradient(to right, transparent, black 35%),
		linear-gradient(to bottom, transparent, black 12%, black 85%, transparent);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(to right, transparent, black 35%),
		linear-gradient(to bottom, transparent, black 12%, black 85%, transparent);
	mask-composite: intersect;
}
.quiche-checkout-decor__food-img {
	display: block;
	width: 100%;
	height: auto;
	opacity: 0.92;
}
.quiche-checkout-decor__phrase {
	position: absolute;
	margin: 0;
	font-family: var(--font-heading);
	font-style: italic;
	font-weight: 600;
	line-height: 1.3;
	color: var(--color-accent);
	opacity: 0.55;
}
.quiche-checkout-decor__phrase--lviv {
	left: 32px;
	top: 40%;
	font-size: 1.5rem;
	text-align: center;
	transform: rotate(-4deg);
}
.quiche-checkout-decor__phrase--more {
	right: 40px;
	top: 5%;
	width: 220px;
	font-size: 1.5rem;
	text-align: right;
	transform: rotate(3deg);
}

.quiche-section-heading {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: var(--display-h2);
	color: var(--color-text);
	margin: 0 0 var(--space-4);
}

.quiche-checkout-subhead {
	margin: 0 0 var(--space-6);
	font-size: var(--text-lg);
	color: var(--color-text-muted);
}

.quiche-section-header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-2) var(--space-4);
	margin-bottom: var(--space-4);
}
.quiche-section-header .quiche-section-heading {
	margin-bottom: 0;
}
.quiche-section-hint {
	margin: 0;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}
.quiche-item-count {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	white-space: nowrap;
}

.quiche-icon {
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
	color: var(--color-accent-dark);
}

/* ---------------------------------------------------------------------
   Notices — "Кошик оновлено." and any WooCommerce error/info message
   still render through these three core classes. Compact, branded, no
   icon gutter.
   --------------------------------------------------------------------- */
.woocommerce-cart .woocommerce-message,
.woocommerce-cart .woocommerce-info,
.woocommerce-cart .woocommerce-error,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-error {
	padding: var(--space-3) var(--space-4);
	margin: 0 0 var(--space-4);
	background: var(--color-cream);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-size: var(--text-sm);
	color: var(--color-text);
	list-style: none;
}
.woocommerce-cart .woocommerce-message::before,
.woocommerce-cart .woocommerce-info::before,
.woocommerce-cart .woocommerce-error::before,
.woocommerce-checkout .woocommerce-message::before,
.woocommerce-checkout .woocommerce-info::before,
.woocommerce-checkout .woocommerce-error::before {
	content: none;
	display: none;
}
.woocommerce-cart .woocommerce-message a.button,
.woocommerce-checkout .woocommerce-message a.button {
	float: none;
	display: inline-flex;
	margin-inline-start: var(--space-3);
	width: auto;
	min-height: 0;
	padding: var(--space-1) var(--space-3);
	background: var(--color-accent);
	color: var(--color-accent-contrast) !important;
	border-radius: var(--radius-sm);
	font-size: var(--text-sm);
	font-weight: 600;
	text-decoration: none;
}

/* ---------------------------------------------------------------------
   Cart — theme/quiche/woocommerce/cart/cart.php + cart-totals.php.
   Products (~70%) + sticky Підсумок card (~30%), card rows instead of a
   table. No coupon UI (disabled at the WooCommerce setting level), no
   shipping/pickup here — those belong to Checkout only.
   --------------------------------------------------------------------- */
.quiche-cart-layout {
	display: grid;
	gap: var(--space-8);
	align-items: start;
}
@media (min-width: 1024px) {
	.quiche-cart-layout {
		grid-template-columns: 1fr 360px;
	}
}

.quiche-cart-items {
	display: flex;
	flex-direction: column;
}

.quiche-cart-item {
	display: grid;
	grid-template-columns: 88px 1fr auto auto 40px;
	grid-template-areas: "media info qty price remove";
	align-items: center;
	gap: var(--space-4);
	padding-block: var(--space-5);
	border-bottom: 1px solid var(--color-border);
}
.quiche-cart-item__media { grid-area: media; }
.quiche-cart-item__info { grid-area: info; min-width: 0; }
.quiche-cart-item__qty { grid-area: qty; }
.quiche-cart-item__price { grid-area: price; }
.quiche-cart-item__remove { grid-area: remove; }

.quiche-cart-item__media img {
	display: block;
	width: 88px;
	height: 88px;
	object-fit: cover;
	border-radius: var(--radius-sm);
}
.quiche-cart-item__name a {
	font-weight: 500;
	color: var(--color-text);
}
.quiche-cart-item__name a:hover { color: var(--color-accent-dark); }
.quiche-cart-item__meta {
	margin-top: var(--space-1);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}
.quiche-cart-item__meta p { margin: 0; }
.quiche-cart-item__price {
	font-weight: 600;
	color: var(--color-text);
	white-space: nowrap;
}
.quiche-cart-item__qty .quantity { display: block; }
.quiche-cart-item__qty .qty {
	width: 64px;
	height: 40px;
	padding: 0 var(--space-2);
	text-align: center;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	font-size: var(--text-base);
	color: var(--color-text);
}
.quiche-cart-item__remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	color: var(--color-text-muted) !important;
	font-size: 20px;
	line-height: 1;
	text-decoration: none !important;
	background: transparent !important;
}
.quiche-cart-item__remove a.remove:hover {
	background: var(--color-cream) !important;
	color: var(--color-accent-dark) !important;
}

.quiche-cart-items__actions {
	display: flex;
	justify-content: flex-end;
	padding-top: var(--space-5);
}
.quiche-cart-update-button {
	width: auto;
	min-height: 44px;
	padding-inline: var(--space-4);
	background: transparent;
	color: var(--color-text) !important;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 500;
	cursor: pointer;
}
.quiche-cart-update-button:hover {
	border-color: var(--color-accent);
	background: var(--color-cream);
}

/* Order summary card */
.quiche-cart-summary {
	position: static;
}
@media (min-width: 1024px) {
	.quiche-cart-summary {
		position: sticky;
		top: calc(var(--space-6) + 65px);
	}
}
.quiche-cart-summary__card {
	padding: var(--space-5);
	background: var(--color-cream);
	border-radius: var(--radius-md);
}
.quiche-cart-summary__table {
	width: 100%;
}
.quiche-cart-summary__table th,
.quiche-cart-summary__table td {
	padding: var(--space-2) 0;
	text-align: left;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	border: none;
}
.quiche-cart-summary__table td { text-align: right; }
.quiche-summary-row--total th,
.quiche-summary-row--total td {
	padding-top: var(--space-3);
	border-top: 1px solid var(--color-border);
	font-size: var(--text-lg);
	font-weight: 600;
	color: var(--color-text);
}
.quiche-cart-summary__cta {
	margin-top: var(--space-4);
}

/* Shared primary-CTA look: Cart's proceed-to-checkout, Checkout's
   place-order. WooCommerce's own woocommerce.css hardcodes
   background-color:#7f54b3 on a.button.alt/button.button.alt (not a CSS
   custom property, so the --wc-primary override above can't reach it) at
   .woocommerce + .button.alt specificity — matched here with an equally
   specific selector plus !important so it reliably wins regardless of
   stylesheet order. */
.quiche-cart-summary__cta a.checkout-button.button.alt,
.woocommerce-checkout button.button.alt#place_order {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 54px;
	padding-inline: var(--space-5);
	background: var(--color-accent) !important;
	color: var(--color-accent-contrast) !important;
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: 600;
	text-decoration: none;
	border: none;
	cursor: pointer;
}
.quiche-cart-summary__cta a.checkout-button.button.alt:hover,
.woocommerce-checkout button.button.alt#place_order:hover {
	background: var(--color-accent-dark) !important;
}

/* ---------------------------------------------------------------------
   Checkout — theme/quiche/woocommerce/checkout/form-checkout.php.
   Main column (~65-70%) + sticky order-summary column (~30-35%,
   380-420px). Section order: delivery method, contact, conditional
   address/pickup, comment — all in .quiche-checkout-main.
   --------------------------------------------------------------------- */
.quiche-checkout-layout {
	display: grid;
	gap: var(--space-6);
	align-items: start;
}
@media (min-width: 1024px) {
	.quiche-checkout-layout {
		grid-template-columns: minmax(0, 1fr) 420px;
		gap: 36px;
	}
}

.quiche-checkout-main > section {
	margin-bottom: var(--space-7);
}
.quiche-checkout-main > section:last-child {
	margin-bottom: 0;
}

.quiche-checkout-aside {
	position: static;
}
@media (min-width: 1024px) {
	.quiche-checkout-aside {
		position: sticky;
		top: calc(var(--space-6) + 65px);
	}
}
/* ONE visual card holds order summary + payment + CTA (matches the
   approved reference — not two stacked cards). #order_review is the outer
   card; .quiche-order-summary-card and .quiche-payment-card (from
   review-order.php and payment.php respectively) are just sections inside
   it, separated by a divider rather than their own borders/backgrounds.
   WooCommerce's own woocommerce.css hardcodes #payment{background:
   rgba(129,110,153,.14)} — a lavender tint, ID-selector specificity beats
   any class override — so it's neutralized here by ID too. */
.quiche-checkout-aside #order_review {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	padding: var(--space-6);
}
#payment.woocommerce-checkout-payment {
	background: none;
	border-radius: 0;
}
.quiche-order-summary-card {
	padding: 0;
}
.quiche-payment-card {
	padding: var(--space-6) 0 0;
	margin-top: var(--space-6);
	border-top: 1px solid var(--color-border);
}

/* 1. Спосіб отримання — two large selectable cards.
   Selectors carry #shipping_method on purpose: woocommerce.css styles
   `.woocommerce ul#shipping_method li label { display: inline }` and
   `... li input { margin: 3px .4ex 0 0 }` at ID specificity, which
   otherwise beats plain class selectors and collapses the card into
   stacked inline content (radio on its own line, no padding). */
#shipping_method.quiche-delivery-method__list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-3);
	list-style: none;
	margin: 0;
	padding: 0;
}
#shipping_method.quiche-delivery-method__list li.quiche-delivery-method__card {
	margin: 0;
	padding: 0;
	line-height: 1.4;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	transition: border-color 150ms ease, background-color 150ms ease;
}
#shipping_method.quiche-delivery-method__list li.quiche-delivery-method__card:has(input:checked) {
	border-color: var(--color-accent);
	background: var(--color-selected);
}
#shipping_method.quiche-delivery-method__list li.quiche-delivery-method__card label {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	margin: 0;
	padding: 0 var(--space-5);
	min-height: 80px;
	cursor: pointer;
}
#shipping_method.quiche-delivery-method__list li.quiche-delivery-method__card input.quiche-delivery-method__input {
	accent-color: var(--color-accent);
	width: 20px;
	height: 20px;
	margin: 0;
	flex: 0 0 auto;
}
.quiche-delivery-method__card .quiche-icon {
	width: 28px;
	height: 28px;
}
.quiche-delivery-method__text {
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.quiche-delivery-method__label {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: var(--text-lg);
	color: var(--color-text);
}
.quiche-delivery-method__hint {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

/* 2. Контактні дані — two-up rows (Ім'я/Прізвище, Телефон/Email). */
.quiche-contact-fields__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 var(--space-4);
}
/* woocommerce.css: `.woocommerce form .form-row-first { width: 47%; float: left }`
   — beats a two-class selector, so the ID keeps the fields full-cell. */
#customer_details .quiche-contact-fields__grid .form-row-first,
#customer_details .quiche-contact-fields__grid .form-row-last {
	width: auto;
	float: none;
}
#customer_details .quiche-contact-fields__grid .clear {
	display: none;
}

/* 3. Адреса доставки / Точка самовивозу — one is hidden via checkout.js
   depending on the selected delivery-method card. */
.quiche-delivery-pickup .quiche-pickup-field {
	padding: 0;
	background: none;
}

/* 4. Коментар */
.quiche-order-comment textarea {
	min-height: 72px;
}
.quiche-char-count {
	display: block;
	margin-top: var(--space-1);
	text-align: right;
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}

/* Shared form styling across all sections above. Explicit width:100% +
   border-box on every layer (row wrapper, WC's own input-wrapper span,
   the input itself) so nothing can end up narrower than its grid cell. */
/* Shared form styling across all sections above. Scoped by #customer_details
   (the main column) so it outranks woocommerce.css's own
   `.woocommerce form .form-row ...` rules (padding:.5em inputs, 3px row
   padding, 47% half-rows). Radios/checkboxes are excluded on purpose: a
   blanket `input { width: 100% }` stretches a native radio across the
   whole card and draws its dot in the middle. */
#customer_details .form-row,
#customer_details .input-text,
#customer_details input:not([type="radio"]):not([type="checkbox"]),
#customer_details select,
#customer_details textarea {
	width: 100%;
	box-sizing: border-box;
}
#customer_details .woocommerce-input-wrapper {
	display: block;
	width: 100%;
}
#customer_details .form-row {
	margin: 0 0 var(--space-4);
	padding: 0;
}
#customer_details .form-row:last-child {
	margin-bottom: 0;
}
#customer_details .form-row label {
	display: block;
	margin-bottom: var(--space-1);
	line-height: 1.5;
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--color-text);
}
#customer_details .form-row label .required {
	color: var(--color-accent-dark);
	text-decoration: none;
}
#customer_details .form-row label .optional {
	color: var(--color-text-muted);
	font-weight: 400;
}
#customer_details input[type="text"],
#customer_details input[type="tel"],
#customer_details input[type="email"],
#customer_details select,
#customer_details textarea {
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 0 var(--space-4);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: normal;
	color: var(--color-text);
}
#customer_details input:focus-visible,
#customer_details select:focus-visible,
#customer_details textarea:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 1px;
	border-color: var(--color-accent);
}
#customer_details textarea { min-height: 88px; padding-block: var(--space-3); line-height: 1.5; }
#customer_details .quiche-field-hidden { display: none; }

.quiche-field-hidden {
	display: none;
}

/* Order summary (right column) item rows — reuses the same
   .quiche-cart-item component as Cart, compact variant: smaller
   thumbnail, no qty stepper/remove (static "Кількість: N" text instead). */
.quiche-summary-items {
	margin-bottom: var(--space-5);
}
.quiche-cart-item--compact {
	grid-template-columns: 64px 1fr auto;
	grid-template-areas: "media info price";
	padding-block: var(--space-3);
}
.quiche-cart-item--compact .quiche-cart-item__media img {
	width: 64px;
	height: 64px;
}
.quiche-cart-item--compact .quiche-cart-item__name {
	font-size: var(--text-base);
}
.quiche-cart-item__qty-static {
	margin-top: var(--space-1);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}
.quiche-cart-item--compact .quiche-cart-item__price {
	font-size: var(--text-sm);
}

/* Totals list */
.quiche-summary-totals {
	width: 100%;
}
.quiche-summary-totals th,
.quiche-summary-totals td {
	padding: var(--space-2) 0;
	text-align: left;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	border-bottom: 1px solid var(--color-border);
}
.quiche-summary-totals td { text-align: right; color: var(--color-text); }
.quiche-summary-row--fee th,
.quiche-summary-row--fee td {
	color: var(--color-success);
}
.quiche-summary-row--total th,
.quiche-summary-row--total td {
	border-bottom: none;
	font-size: var(--text-xl);
	font-weight: 700;
	color: var(--color-text);
}

/* Payment methods — two clean selectable rows inside the same outer card
   as the order summary (see #order_review above). */
/* Selectors carry #payment: woocommerce.css styles
   `.woocommerce-checkout #payment ul.payment_methods` (padding, border,
   lavender box), its li/input margins, `#payment div.form-row` padding and
   `#payment #place_order { float: right }` at ID specificity. */
.woocommerce-checkout #payment ul.wc_payment_methods {
	list-style: none;
	margin: 0 0 var(--space-5);
	padding: 0;
	border: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}
.woocommerce-checkout #payment ul.wc_payment_methods::before,
.woocommerce-checkout #payment ul.wc_payment_methods::after,
.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method::before,
.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method::after {
	content: none;
	display: none;
}
.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: var(--space-4);
	margin: 0;
	padding: 0 var(--space-5);
	line-height: 1.4;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	transition: border-color 150ms ease, background-color 150ms ease;
}
.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method:has(input:checked) {
	border-color: var(--color-accent);
	background: var(--color-selected);
}
.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method > input[type="radio"] {
	accent-color: var(--color-accent);
	width: 20px;
	height: 20px;
	margin: 0;
	flex: 0 0 auto;
}
.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method > label {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	gap: var(--space-3);
	min-height: 68px;
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: var(--text-lg);
	color: var(--color-text);
	cursor: pointer;
}
.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method > label .quiche-icon {
	margin-left: auto;
	order: 2;
}
.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method div.payment_box {
	flex: 0 0 100%;
	box-sizing: border-box;
	margin: 0 0 var(--space-5);
	padding: var(--space-3) var(--space-4);
	background: var(--color-note);
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 400;
	line-height: 1.5;
	color: var(--color-text);
}
.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method div.payment_box::before {
	content: none;
	display: none;
}
.woocommerce-checkout #payment div.payment_box p { margin: 0; }
.quiche-payment-note {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
}
.quiche-payment-note .quiche-icon {
	width: 20px;
	height: 20px;
	margin-top: 1px;
	color: var(--color-text);
}

.woocommerce-checkout #payment div.form-row.place-order {
	margin: var(--space-5) 0 0;
	padding: 0;
}
.woocommerce-checkout #payment button#place_order.quiche-place-order {
	float: none;
}
.woocommerce-checkout .place-order .woocommerce-terms-and-conditions-wrapper:empty {
	display: none;
}
.quiche-trust-line {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	margin: var(--space-3) 0 0;
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	text-align: center;
}
.quiche-trust-line .quiche-icon {
	width: 16px;
	height: 16px;
	color: var(--color-text-muted);
}

/* ---------------------------------------------------------------------
   Checkout-only trust strip (theme/quiche/woocommerce/checkout/form-checkout.php)
   --------------------------------------------------------------------- */
.quiche-checkout-trust {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-4);
	list-style: none;
	margin: var(--space-8) 0 0;
	padding: var(--space-6) 0 0;
	border-top: 1px solid var(--color-border);
}
@media (min-width: 1024px) {
	.quiche-checkout-trust {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--space-5);
	}
}
.quiche-checkout-trust li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
}
.quiche-checkout-trust .quiche-icon {
	width: 24px;
	height: 24px;
	margin-top: 2px;
}
.quiche-checkout-trust strong {
	display: block;
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-text);
}
.quiche-checkout-trust span {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}

/* ---------------------------------------------------------------------
   Order Received / Thank You (theme/quiche/woocommerce/checkout/thankyou.php)
   Same composition as Checkout: main column + the white order card on the
   right (same width, radius, border), same trust strip underneath.
   --------------------------------------------------------------------- */
.quiche-order-received__main > section {
	margin-bottom: var(--space-7);
}

/* Success card */
.quiche-order-success {
	display: flex;
	align-items: flex-start;
	gap: var(--space-5);
	padding: var(--space-6);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
}
.quiche-order-success__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--color-selected);
	border: 1px solid var(--color-accent);
	color: var(--color-accent-dark);
}
.quiche-order-success__icon svg {
	width: 26px;
	height: 26px;
}
.quiche-order-success__title {
	margin: 0 0 var(--space-2);
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: var(--display-h2);
	line-height: 1.2;
	color: var(--color-text);
}
.quiche-order-received__message {
	margin: 0 0 var(--space-3);
	font-size: var(--text-lg);
	color: var(--color-text-muted);
}
.quiche-order-success__meta {
	margin: 0;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}
.quiche-order-success__meta strong {
	color: var(--color-text);
}

/* Що далі — numbered steps */
.quiche-order-steps__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-3);
}
.quiche-order-steps__item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	padding: var(--space-5);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
	line-height: 1.5;
	color: var(--color-text-muted);
}
.quiche-order-steps__item strong {
	display: block;
	margin-bottom: var(--space-1);
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	font-weight: 600;
	color: var(--color-text);
}
.quiche-order-steps__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--color-accent);
	color: var(--color-accent-contrast);
	font-size: var(--text-sm);
	font-weight: 600;
}

/* Payment instructions from the gateway (COD note / BACS bank details) */
.quiche-payment-note--box {
	padding: var(--space-4) var(--space-5);
	background: var(--color-note);
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
	line-height: 1.6;
	color: var(--color-text);
}
.quiche-payment-note__body > :first-child { margin-top: 0; }
.quiche-payment-note__body > :last-child { margin-bottom: 0; }
.quiche-payment-note__body p { margin: 0 0 var(--space-2); }
.quiche-payment-note__body h2,
.quiche-payment-note__body h3 {
	margin: var(--space-4) 0 var(--space-2);
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	font-weight: 600;
}
.quiche-payment-note__body ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.quiche-payment-note__body li { margin: 0 0 var(--space-1); }

.quiche-order-received__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}
.quiche-button-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding-inline: var(--space-5);
	border: 1px solid var(--color-accent);
	border-radius: var(--radius-sm);
	background: var(--color-surface);
	color: var(--color-accent-dark);
	font-size: var(--text-base);
	font-weight: 600;
	text-decoration: none;
	transition: background-color 150ms ease;
}
.quiche-button-secondary:hover {
	background: var(--color-selected);
	color: var(--color-accent-dark);
}

/* Right column: same white card as Checkout's #order_review */
.quiche-order-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	padding: var(--space-6);
}
.quiche-order-details {
	margin: var(--space-5) 0 0;
	padding: var(--space-5) 0 0;
	border-top: 1px solid var(--color-border);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}
.quiche-order-details > div {
	display: flex;
	justify-content: space-between;
	gap: var(--space-4);
	font-size: var(--text-sm);
}
.quiche-order-details dt {
	margin: 0;
	color: var(--color-text-muted);
	flex: 0 0 auto;
}
.quiche-order-details dd {
	margin: 0;
	font-weight: 600;
	color: var(--color-text);
	text-align: right;
}
.quiche-order-details__muted {
	display: block;
	font-weight: 400;
	color: var(--color-text-muted);
}

@media (max-width: 1279px) {
	.quiche-order-steps__list {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------
   Mobile — 375–430px: single column, full-width primary CTA, ~44px touch
   targets, no horizontal overflow.
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
	.quiche-cart-item {
		grid-template-columns: 64px 1fr auto;
		grid-template-areas:
			"media info remove"
			"media qty price";
		row-gap: var(--space-2);
	}
	.quiche-cart-item__media img {
		width: 64px;
		height: 64px;
	}
	.quiche-cart-item--compact {
		grid-template-columns: 56px 1fr auto;
		grid-template-areas: "media info price";
	}
	.quiche-cart-items__actions {
		justify-content: stretch;
	}
	.quiche-cart-update-button {
		width: 100%;
	}

	#shipping_method.quiche-delivery-method__list {
		grid-template-columns: 1fr;
	}
	.quiche-contact-fields__grid {
		grid-template-columns: 1fr;
	}
	.quiche-contact-fields__grid .form-row-first,
	.quiche-contact-fields__grid .form-row-last {
		width: 100%;
	}

	.woocommerce-checkout h1 {
		font-size: var(--display-h1);
	}
	.quiche-checkout-subhead {
		font-size: var(--text-base);
	}
	.quiche-checkout-aside #order_review {
		padding: var(--space-4);
	}
	.quiche-payment-card {
		padding-top: var(--space-4);
		margin-top: var(--space-4);
	}
	#shipping_method.quiche-delivery-method__list li.quiche-delivery-method__card label {
		min-height: 68px;
	}
	.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method > label {
		min-height: 60px;
	}
}

@media (max-width: 767px) {
	.quiche-order-success {
		flex-direction: column;
		gap: var(--space-4);
		padding: var(--space-5);
	}
	.quiche-order-card {
		padding: var(--space-4);
	}
	.quiche-order-received__actions .quiche-button-secondary {
		width: 100%;
	}
}

/* Cart: courier estimate note under the totals (cart-totals.php). */
.quiche-cart-delivery-note {
	margin-top: var(--space-4);
	padding: var(--space-3) var(--space-4);
	background: var(--color-cream);
	border-radius: var(--radius-sm);
	font-size: var(--text-sm);
	line-height: 1.5;
	color: var(--color-text-muted);
}
.quiche-cart-delivery-note p { margin: 0; }
.quiche-cart-delivery-note p + p { margin-top: var(--space-2); }
.quiche-cart-delivery-note strong { color: var(--color-text); }

/* Checkout summary: hint how much is left to free courier delivery. */
.quiche-summary-row--hint td {
	text-align: left;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	padding-top: 0;
}
.quiche-summary-row--hint strong { color: var(--color-text); }