/* =========================================================================
   Pasul 2 — finalizarea comenzii + Pasul 3 — confirmarea

   Selectoarele WooCommerce (#customer_details, #order_review, .woocommerce-*)
   sunt ținta directă: markupul e al lui, iar noi doar îl reașezăm. Toate sunt
   încadrate în `.inco-order--checkout` / `.inco-success`, ca să nu atingem
   coșul nativ dacă cineva îl mai folosește pe altă pagină.
   ========================================================================= */

/* ============================================================ Pasul 2 */

/*
 * Grila: formular + coloana de carduri.
 *
 * WooCommerce pune `#customer_details` și `#order_review` ca frați direcți în
 * `form.checkout`, deci grila se aplică pe formular. Un wrapper propriu ar fi
 * cerut suprascrierea template-ului `form-checkout.php`.
 */
.inco-order--checkout .woocommerce {
	max-width: none;
}

/*
 * 🔴 Blocul are 1118, nu toată lățimea containerului.
 *
 * Citit din Figma, nu dedus: frame-ul `Order` e `x=161, width=1118` într-un cadru
 * de 1440 — deci 161 de fiecare parte. Înăuntru: formular **665**, gol 16,
 * coloana de carduri 437.
 *
 * Eu îl întinsesem pe containerul site-ului (1344), iar formularul lua tot ce
 * rămânea: câmpurile ieșeau **438 în loc de 324,5**. Nicio valoare din card nu
 * era greșită, dar jumătatea stângă a paginii avea altă scară decât macheta —
 * de aia „nu semăna", fără să poți arăta un număr anume.
 *
 * 🔑 O lățime care „umple ce e disponibil" e o hotărâre; în machetă era o cifră.
 * Am luat-o pe a mea fiindcă n-am întrebat frame-ul cât e de lat.
 */
.inco-order--checkout form.checkout {
	display: grid;
	grid-template-columns: minmax(0, 665px) 437px;
	justify-content: center;
	gap: var(--inco-co-gap);
	align-items: start;
}

.inco-order--checkout #customer_details {
	min-width: 0;
}

/*
 * 🔴 `#customer_details` e un `.col2-set` cu DOUĂ coloane flotante.
 *
 * `woocommerce-layout.css` are:
 *   .woocommerce .col2-set .col-1 { float: left;  width: 48% }
 *   .woocommerce .col2-set .col-2 { float: right; width: 48% }
 *
 * Adică, în interiorul coloanei mele de formular, WooCommerce mai făcea o
 * împărțire: datele de facturare într-o jumătate de 48%, iar livrarea și
 * observațiile pentru comandă în cealaltă. Grila mea pe `form.checkout` nu avea
 * nicio treabă cu asta — de aceea câmpurile ieșeau înghesuite pe ~240px, cu
 * „Prenume" și „Nume" alături pe jumătate de coloană, iar caseta de observații
 * plutea într-o a treia coloană, cu un gol între ele.
 *
 * Nu e o problemă de spațiere, e o coloană în plus. Aici se anulează, ca
 * facturarea, livrarea și observațiile să curgă una sub alta pe toată lățimea,
 * ca în machetă.
 *
 * Specificitate: regula lui e (0,3,0). `#customer_details` e un id, deci
 * selectorul de mai jos e (1,2,0) și câștigă indiferent de ordinea foilor.
 */
.inco-order--checkout #customer_details.col2-set > .col-1,
.inco-order--checkout #customer_details.col2-set > .col-2 {
	float: none;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

/* Clearfix-ul cu `display: table` nu mai are ce curăța și adaugă un rând gol. */
.inco-order--checkout #customer_details.col2-set::before,
.inco-order--checkout #customer_details.col2-set::after {
	display: none;
}

.inco-order--checkout #order_review,
.inco-order--checkout #order_review_heading {
	grid-column: 2;
	min-width: 0;
}

/*
 * Titlul „Comanda ta" al WooCommerce se ascunde: fiecare card are propriul
 * titlu în design, iar acesta ar fi apărut al doilea, deasupra lor.
 */
.inco-order--checkout #order_review_heading {
	display: none;
}

.inco-order--checkout .inco-checkout__formtitle {
	margin: 0 0 20px;
	font-weight: 600;
	font-size: 24px;
	line-height: 1;
	color: var(--inco-co-ink);
}

/* ------------------------------------------------------- formularul */

/*
 * Rândurile pe două coloane.
 *
 * WooCommerce folosește `.form-row-first` / `.form-row-last` cu `float`, care
 * nu se poate alinia pe verticală și lasă înălțimi inegale când un câmp are
 * eroare. Le transformăm în grid și ignorăm clasele lui.
 */
.inco-order--checkout .woocommerce-billing-fields__field-wrapper,
.inco-order--checkout .woocommerce-shipping-fields__field-wrapper,
.inco-order--checkout .woocommerce-additional-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	/* Macheta: rândurile la 0, 56, 112, 168 — adică 40 înălțime + 16 gol. */
	gap: var(--inco-co-gap);
}

.inco-order--checkout .inco-col-half {
	grid-column: span 1;
}

.inco-order--checkout .inco-col-full,
.inco-order--checkout .inco-co-field--area {
	grid-column: 1 / -1;
}

/* Anulează float-urile WooCommerce: în grid produc coloane fantomă. */
.inco-order--checkout .form-row-first,
.inco-order--checkout .form-row-last,
.inco-order--checkout .form-row-wide {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

.inco-order--checkout p.form-row {
	margin: 0;
	padding: 0;
}

/* Eticheta plutitoare, peste bordura inputului. */
.inco-order--checkout .inco-co-field {
	position: relative;
	display: block;
}

.inco-order--checkout .inco-co-field > label.inco-co-field__label {
	position: absolute;
	top: -6px;
	left: 12px;
	z-index: 1;
	width: auto;
	margin: 0;
	padding: 0 4px;
	background: var(--inco-co-bg);
	font-weight: 500;
	font-size: 12px;
	line-height: 1;
	letter-spacing: 0.02em;
	color: var(--inco-co-muted);
	pointer-events: none;
}

/*
 * Asteriscul de „obligatoriu".
 *
 * WooCommerce îl randează ca `<abbr class="required" title="obligatoriu">*`.
 * `title` rămâne — e singurul lucru care explică asteriscul unui cititor de
 * ecran — dar `text-decoration` moștenit de la `abbr` (linie punctată) se
 * scoate, fiindcă arăta ca o eroare de font.
 */
.inco-order--checkout .inco-co-field__label .required,
.inco-order--checkout .inco-co-field__label abbr {
	border: 0;
	text-decoration: none;
	color: var(--inco-co-primary);
}

.inco-order--checkout .inco-co-field input[type="text"],
.inco-order--checkout .inco-co-field input[type="email"],
.inco-order--checkout .inco-co-field input[type="tel"],
.inco-order--checkout .inco-co-field input[type="password"],
.inco-order--checkout .inco-co-field select,
.inco-order--checkout .inco-co-field textarea,
.inco-order--checkout .inco-co-field .select2-selection {
	width: 100%;
	min-height: 44px;
	padding: 12px 16px;
	border: 1px solid var(--inco-co-muted);
	border-radius: var(--inco-co-r);
	background: var(--inco-co-bg);
	box-shadow: none;
	font-family: var(--inco-co-font);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: 0.01em;
	color: var(--inco-co-ink);
	transition: border-color .2s ease, box-shadow .2s ease;
}

.inco-order--checkout .inco-co-field textarea {
	min-height: 150px;
	resize: vertical;
}

/*
 * Câmpul ACTIV — cele trei schimbări din machetă, nu una.
 *
 * 🔴 Regula de dinainte colora doar chenarul, și nici pe acela cum trebuie:
 * măsurat pe pagina reală, cu focus dat prin click adevărat și după ce se așeza
 * tranziția, chenarul ieșea `#0A435C` în loc de `#056E9B`. Clasa e dublată ca să
 * treacă peste ce scrie tema — vezi „Blindaj" în `base.css`.
 *
 * ⚠️ Măsurătoarea asta m-a păcălit de trei ori la rând, în trei feluri diferite:
 *   1. `element.focus()` din script NU pune pagina în `:focus` — o regulă
 *      identică injectată ultima tot nu se aplica, deși `matches(':focus')`
 *      răspundea `true`. Se dă click adevărat.
 *   2. focusul repetat pe un câmp obligatoriu gol îl marchează
 *      `woocommerce-invalid`, iar chenarul devine roșu — starea de eroare, nu
 *      cea de repaus. Câmpul se completează întâi.
 *   3. citită imediat, valoarea e cea din mijlocul tranziției de 200ms
 *      (`0.068px` din cei 3 ai haloului). Se așteaptă.
 */
.inco-order--checkout .inco-co-field.inco-co-field input:focus,
.inco-order--checkout .inco-co-field.inco-co-field select:focus,
.inco-order--checkout .inco-co-field.inco-co-field textarea:focus {
	outline: none;
	border-color: var(--inco-co-primary);
	box-shadow: 0 0 0 3px rgba(61, 75, 255, .1);
}

/*
 * Eticheta, pe `:focus-within` — și e o corectură, nu un moft.
 *
 * 🔴 Regula veche era `input:focus + .inco-co-field__label`, adică „eticheta
 * care urmează imediat după input". Pe checkout ea NU se poate potrivi
 * NICIODATĂ: WooCommerce scrie eticheta ÎNAINTEA inputului, iar între ele mai
 * pune și un `<span class="woocommerce-input-wrapper">`. Deci nu erau frați și
 * nici în ordinea cerută. Regula exista, arăta corect, și nu se aplica nicăieri.
 *
 * 🔑 `:focus-within` întreabă containerul „ai ceva focusat înăuntru?", deci nu
 * depinde deloc de ordinea în care își pune WooCommerce elementele.
 */
.inco-order--checkout .inco-co-field.inco-co-field:focus-within .inco-co-field__label {
	color: var(--inco-co-primary);
}

.inco-order--checkout .inco-co-field.is-locked input,
.inco-order--checkout .inco-co-field.is-locked select {
	background: var(--inco-co-inactive);
	color: var(--inco-co-muted);
	cursor: not-allowed;
}

/* Câmp cu eroare de validare. */
.inco-order--checkout .woocommerce-invalid .inco-co-field__label,
.inco-order--checkout .woocommerce-invalid input,
.inco-order--checkout .woocommerce-invalid select {
	border-color: var(--inco-co-sale);
	color: var(--inco-co-sale);
}

.inco-order--checkout .woocommerce-invalid .inco-co-field__label {
	border: 0;
}

/*
 * Select2 (județ / țară).
 *
 * WooCommerce încarcă Select2 pentru câmpurile de adresă. Nu îl dezactivăm —
 * pe liste de sute de localități căutarea e utilă — dar îi impunem aceeași
 * geometrie ca inputurilor, altfel un select arăta cu 6px mai scund decât
 * vecinul lui de pe același rând.
 */
.inco-order--checkout .select2-container .select2-selection--single {
	height: auto;
	min-height: 44px;
	border: 1px solid var(--inco-co-muted);
	border-radius: var(--inco-co-r);
	background: var(--inco-co-bg);
}

.inco-order--checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0;
	line-height: 20px;
	color: var(--inco-co-ink);
}

.inco-order--checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 50%;
	right: 12px;
	height: 20px;
	transform: translateY(-50%);
}

/*
 * Bifa „Livrezi la o altă adresă", în aceeași gramatică cu „Factură pe firmă".
 *
 * 🔴 `:has()` e obligatoriu, nu o eleganță. Regula veche desena liniile pe
 * container, orice ar fi fost în el. Aici le cerem doar când există chiar bifa
 * pe care o încadrează.
 *
 * 🔴 Avea linie SUS și JOS, plus `margin-top: 20px` — iar rândul de deasupra,
 * „Factură pe firmă", își are deja propria linie de jos. Pe ecran ieșeau DOUĂ
 * linii paralele cu 20px de gol între ele și nimic înăuntru.
 *
 * 🔑 Două rânduri lipite n-au nevoie de patru linii, ci de trei: linia dintre
 * ele se desenează O SINGURĂ DATĂ. Deci blocul își pierde linia de sus (o are
 * vecinul) și marginea care le despărțea, și rămâne cu 8px de aer — exact
 * `padding-block`-ul lui `.inco-co-field--check`, rândul firmei.
 */
.inco-order--checkout .woocommerce-shipping-fields:has(#ship-to-different-address) {
	margin-top: 0;
	padding-block: 8px;
	border-block: 1px solid var(--inco-co-border);
}

/*
 * Cât e „Factură pe firmă" deschisă, linia de sus se depărtează de câmpurile ei
 * cu 16 — golul grilei, adică exact cât e între oricare două rânduri. Închisă,
 * rămâne 0: rândurile se ating și împart linia, ca două rânduri de listă.
 */
.inco-order--checkout form.inco-are-firma .woocommerce-shipping-fields:has(#ship-to-different-address) {
	margin-top: 16px;
}

/*
 * Aerul dintre bifa „Livrezi la o altă adresă" și câmpurile ei.
 *
 * 8px (aerul de sub bifă) + 16px (golul dintre rânduri) = **24** — exact
 * distanța dintre „Factură pe firmă" și primul câmp al firmei. Acolo golul vine
 * de la sine, fiind rânduri ale ACELEIAȘI grile; aici câmpurile stau înăuntrul
 * blocului bifei, unde nu există `gap`, deci se scrie de mână.
 *
 * 🔴 `padding` pe `.shipping_address`, NU `margin` pe `__field-wrapper`.
 * Cu margin, arăta bine cât ținea animația și SĂREA la final: `slideDown` pune
 * `overflow: hidden` inline cât animă — ceea ce oprește colapsarea marginilor —
 * iar la sfârșit îl scoate. Din clipa aia marginea copilului nu mai are ce
 * opri: se scurge afară din `.shipping_address` și dispare.
 *
 * 🔑 Un `margin-top` pe primul copil al unui bloc fără chenar, padding sau
 * `overflow` nu e un gol, e o marjă împrumutată părintelui. Paddingul nu
 * colapsează niciodată — și, în plus, `slideDown` îl animă odată cu înălțimea.
 */
.inco-order--checkout .woocommerce-shipping-fields .shipping_address {
	padding-top: 24px;
}

.inco-order--checkout .woocommerce-shipping-fields h3 {
	margin: 0;
	font-size: 16px;
	font-weight: 400;
}

.inco-order--checkout #ship-to-different-address label {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-weight: 400;
	font-size: 16px;
	color: var(--inco-co-muted);
}

.inco-order--checkout #ship-to-different-address input[type="checkbox"] {
	appearance: none;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	margin: 0;
	border: 1px solid var(--inco-co-border);
	border-radius: 4px;
	background: var(--inco-co-bg);
	cursor: pointer;
}

.inco-order--checkout #ship-to-different-address input[type="checkbox"]:checked {
	border-color: var(--inco-co-primary);
	background-color: var(--inco-co-primary);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23FAFCFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

.inco-order--checkout .woocommerce-additional-fields {
	margin-top: 20px;
}

.inco-order--checkout .woocommerce-additional-fields h3 {
	display: none; /* „Informații suplimentare" — eticheta câmpului e suficientă */
}

/* ------------------------------------------ coloana din dreapta (carduri) */

/*
 * Aceeași corectură ca pe coș: cei 20px se numără de la antet, nu de la
 * fereastră. Cardul „Comanda ta" se lipea în spatele antetului `sticky`.
 * → `cart.css`, `.inco-order__aside`
 */
.inco-order--checkout #order_review {
	display: flex;
	flex-direction: column;
	gap: var(--inco-co-gap);
	position: sticky;
	top: calc(var(--inco-antet-h, 108px) + 20px);
}

/*
 * Tabelul de review devine cardul „Comanda ta".
 *
 * Rândurile native (`cart_item`, `cart-subtotal`, `order-total`) rămân în DOM
 * dar sunt ascunse mai jos: WooCommerce le folosește ca țintă pentru
 * `update_checkout`, iar șterse din markup, actualizarea totalurilor prin AJAX
 * nu mai găsea unde să scrie.
 */
.inco-order--checkout .shop_table.woocommerce-checkout-review-order-table {
	display: block;
	width: 100%;
	margin: 0;
	padding: var(--inco-co-pad-card);
	border: 1px solid var(--inco-co-border);
	border-radius: var(--inco-co-r-lg);
	background: var(--inco-co-white);
	border-collapse: separate;
}

.inco-order--checkout table.woocommerce-checkout-review-order-table.shop_table thead,
.inco-order--checkout .woocommerce-checkout-review-order-table tr.cart_item {
	display: none;
}

.inco-order--checkout .woocommerce-checkout-review-order-table tbody,
.inco-order--checkout table.woocommerce-checkout-review-order-table.shop_table tfoot {
	display: block;
}

.inco-order--checkout table.woocommerce-checkout-review-order-table.shop_table tfoot tr {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--inco-co-gap);
	padding-block: 8px;
	border: 0;
}

.inco-order--checkout table.woocommerce-checkout-review-order-table.shop_table tfoot th,
.inco-order--checkout table.woocommerce-checkout-review-order-table.shop_table tfoot td {
	padding: 0;
	border: 0;
	background: none;
	text-align: start;
}

.inco-order--checkout table.woocommerce-checkout-review-order-table.shop_table tfoot th {
	font-family: var(--inco-co-font-alt);
	font-weight: 400;
	font-size: 16px;
	line-height: 1;
	color: var(--inco-co-muted);
}

.inco-order--checkout table.woocommerce-checkout-review-order-table.shop_table tfoot td {
	font-weight: 500;
	font-size: 14px;
	line-height: 1;
	color: var(--inco-co-ink);
	text-align: end;
}

/* Totalul: separator deasupra + tipografia mare din design. */
.inco-order--checkout table.woocommerce-checkout-review-order-table.shop_table tfoot tr.order-total {
	margin-top: 8px;
	padding-top: var(--inco-co-gap);
	border-top: 1px solid var(--inco-co-border);
}

.inco-order--checkout table.woocommerce-checkout-review-order-table.shop_table tfoot tr.order-total th {
	font-family: var(--inco-co-font);
	font-weight: 600;
	font-size: 20px;
	color: var(--inco-co-ink);
}

.inco-order--checkout table.woocommerce-checkout-review-order-table.shop_table tfoot tr.order-total td,
.inco-order--checkout table.woocommerce-checkout-review-order-table.shop_table tfoot tr.order-total .amount {
	font-weight: 500;
	font-size: 20px;
	color: var(--inco-co-primary);
}

/* Titlul cardului, injectat înaintea tabelului. */
.inco-order--checkout .inco-review__wrap {
	display: block;
}

.inco-order--checkout table.shop_table .inco-review__wrap > td {
	display: block;
	padding: 0 0 var(--inco-co-gap);
	border: 0;
}

.inco-order--checkout .inco-review__wrap::before {
	content: attr(data-title);
}

/* --------------------------------------------- produsele din card */

.inco-review__items {
	display: flex;
	flex-direction: column;
	gap: var(--inco-co-gap);
	margin-bottom: var(--inco-co-gap);
	padding-bottom: var(--inco-co-gap);
	border-bottom: 1px solid var(--inco-co-border);
}

.inco-review__items:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

.inco-review__item {
	display: flex;
	align-items: center;
	gap: var(--inco-co-gap);
}

.inco-review__thumb {
	width: 106px;
	height: 88px;
	border-radius: var(--inco-co-r);
}

.inco-review__meta {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1 1 auto;
	min-width: 0;
}

.inco-review__name {
	font-weight: 600;
	font-size: 14px;
	line-height: 1.1;
	color: var(--inco-co-ink);
}

.inco-review__variation {
	font-size: 12px;
	line-height: 1.3;
	color: var(--inco-co-muted);
}

.inco-review__qty {
	font-weight: 500;
	font-size: 14px;
	line-height: 1;
	color: var(--inco-co-muted);
}

.inco-review__line {
	flex: 0 0 auto;
	font-weight: 500;
	font-size: 14px;
	line-height: 1;
	color: var(--inco-co-ink);
	white-space: nowrap;
}

/* ------------------------------------------------------------- cuponul */

.inco-coupon {
	display: flex;
	flex-direction: column;
	gap: var(--inco-co-gap);
}

.inco-coupon__form {
	display: flex;
	align-items: stretch;
	gap: var(--inco-co-gap);
}

.inco-coupon__field {
	flex: 1 1 auto;
	min-width: 0;
}

.inco-coupon__applied {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.inco-coupon__applied li {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 4px 4px 12px;
	border-radius: var(--inco-co-r-pill);
	background: var(--inco-co-tint);
}

.inco-coupon__code {
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--inco-co-primary);
}

/* Clasa dublată: vezi secțiunea „Blindaj" din base.css. */
.inco-coupon__remove.inco-coupon__remove {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	border-radius: var(--inco-co-r-pill);
	background: var(--inco-co-white);
	color: var(--inco-co-muted);
	cursor: pointer;
}

.inco-coupon__remove.inco-coupon__remove:hover,
.inco-coupon__remove.inco-coupon__remove:focus {
	background: var(--inco-co-white);
	color: var(--inco-co-sale);
}

/* Formularul nativ de cupon, dacă mai apare de la un alt plugin. */
.inco-order--checkout .checkout_coupon {
	display: none;
}

/* -------------------------------------------------------------- plata */

.inco-payment {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.inco-order--checkout .woocommerce-checkout-payment {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

.inco-order--checkout ul.wc_payment_methods {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

/*
 * Fiecare metodă e un card selectabil.
 *
 * `:has(input:checked)` dă starea selectată fără JS. Browserele fără suport
 * (Firefox < 121) primesc doar bordura implicită — metoda rămâne selectabilă,
 * doar mai puțin evidentă. Degradare acceptabilă pentru a nu duplica starea în
 * JavaScript.
 */
.inco-order--checkout ul.wc_payment_methods li.wc_payment_method {
	display: block;
	margin: 0;
	padding: 14px 16px 12px;
	border: 1px solid var(--inco-co-border);
	border-radius: var(--inco-co-r-md);
	background: var(--inco-co-white);
	transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.inco-order--checkout ul.wc_payment_methods li.wc_payment_method:has(input:checked) {
	border-color: var(--inco-co-primary);
	background: rgba(61, 197, 255, 0.03);
	box-shadow: 0 0 0 3px rgba(61, 197, 255, 0.1);
}

.inco-order--checkout ul.wc_payment_methods li.wc_payment_method > label {
	display: flex;
	align-items: flex-start;
	gap: var(--inco-co-gap);
	margin: 0;
	cursor: pointer;
	font-weight: 600;
	font-size: 16px;
	line-height: 1.1;
	color: var(--inco-co-ink);
}

/* Radio-ul: buton propriu, cel nativ nu se poate colora consistent. */
.inco-order--checkout ul.wc_payment_methods input[type="radio"] {
	appearance: none;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin: 0;
	border: 1px solid var(--inco-co-border);
	border-radius: var(--inco-co-r-pill);
	background: var(--inco-co-white);
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.inco-order--checkout ul.wc_payment_methods input[type="radio"]:checked {
	border-color: var(--inco-co-primary);
	/* Punctul interior, ca inset shadow: nu cere pseudo-element pe un input. */
	box-shadow: inset 0 0 0 4px var(--inco-co-white), inset 0 0 0 22px var(--inco-co-primary);
}

.inco-order--checkout ul.wc_payment_methods input[type="radio"]:focus-visible {
	outline: none;
	box-shadow: var(--inco-co-shadow-focus);
}

/* Iconițele gateway-urilor: mărime rezonabilă, nu cea originală. */
.inco-order--checkout ul.wc_payment_methods label img {
	max-height: 24px;
	width: auto;
	margin-inline-start: auto;
}

/* Descrierea metodei, sub etichetă. */
.inco-order--checkout .payment_box {
	margin: 8px 0 0 38px; /* aliniat cu textul, nu cu radio-ul */
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.4;
	color: var(--inco-co-muted);
}

.inco-order--checkout .payment_box::before {
	display: none; /* triunghiul WooCommerce */
}

.inco-order--checkout .payment_box p:last-child {
	margin-bottom: 0;
}

.inco-payment__logos {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 8px;
}

.inco-payment__logo {
	padding: 4px 6px;
	border: 1px solid var(--inco-co-border-soft);
	border-radius: 3px;
	background: var(--inco-co-white);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--inco-co-muted);
	white-space: nowrap;
}

/* Textul de confidențialitate. */
.inco-order--checkout .woocommerce-privacy-policy-text {
	font-family: var(--inco-co-font-alt);
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: 0.01em;
	color: var(--inco-co-muted);
}

.inco-order--checkout .woocommerce-privacy-policy-text p {
	margin: 0;
}

.inco-order--checkout .woocommerce-privacy-policy-text a {
	font-weight: 500;
	color: var(--inco-co-primary);
	text-decoration: underline;
}

/*
 * Butonul de plasare a comenzii.
 *
 * ⚠️ Regula stă pe `#place_order` — un id, deci (1,1,0). Orice regulă scrisă cu
 * clase, oricât de jos în fișier, pierde în fața ei. Am scris o dată una nouă pe
 * `.inco-place-order.inco-place-order` și n-a avut niciun efect: eticheta și
 * săgeata dinăuntru se stilau corect, dar cutia butonului rămânea cea veche —
 * exact felul de rezultat pe jumătate care te face să cauți în locul greșit.
 * Deci se MODIFICĂ asta, nu se adaugă alta lângă.
 *
 * Macheta cere caseta albă de 44×40 la dreapta, într-un buton de 42: rămâne
 * 1px sus și jos, de aia `padding-block` e 0 și marginea se taie cu `clip`.
 */
.inco-order--checkout #place_order {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	block-size: 42px;
	/*
	 * 60 la dreapta = caseta de 44 + golul de 16.
	 *
	 * Eticheta e un NOD DE TEXT, nu un element — WooCommerce o rescrie cu
	 * `.text()`, deci nu-i pot da o clasa si nici `flex: 1`. Un nod anonim de
	 * flex nu se poate tinti din CSS. Asa ca centrez in cutia de continut si o
	 * strang din dreapta exact cat tine sageata: centrul iese la
	 * `16 + (W - 76) / 2`, adica fix unde il pune macheta.
	 */
	padding: 0 60px 0 16px;
	border: 1px solid #013465;
	border-radius: var(--inco-co-r);
	background: var(--inco-co-grad-primary);
	font-family: var(--inco-co-font);
	font-weight: 500;
	font-size: 16px;
	line-height: 1;
	letter-spacing: -0.16px;
	color: var(--inco-co-bg);
	cursor: pointer;
	transition: filter .2s ease;
}

/*
 * Sageata, ca pseudo-element — si e o hotarare, nu o preferinta.
 *
 * 🔴 Pusa ca `<span>` in marcaj, disparea: scriptul de checkout al WooCommerce
 * isi rescrie butonul cu `.text( … )` la fiecare `updated_checkout`, iar
 * `.text()` sterge toti copiii. Pe server marcajul era corect, in pagina raman
 * doar literele. Un pseudo-element nu e copil in DOM, deci `.text()` nu-l atinge.
 *
 * ⚠️ In `background-image` culoarea NU poate fi `currentColor` — un data URI e un
 * document separat, care nu mostenește nimic din pagina. De aia bleumarinul e
 * scris in clar aici; e singurul loc din proiect unde o culoare se repeta, si
 * are motiv.
 */
.inco-order--checkout #place_order::after {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	inline-size: 44px;
	/*
	 * 7, nu 6 — cât are aceeași casetă în restul site-ului.
	 *
	 * Frame-ul de finalizare din Figma zice 6, dar caseta albă de 44×40 cu
	 * iconiță dintr-un buton cu gradient EXISTĂ deja: e `.inco-add-to-cart__icon`
	 * de pe cardul de produs, măsurată în pagină la 44×40 / rază 7. E aceeași
	 * piesă, la aceeași mărime, în același fel de buton.
	 *
	 * 🔑 Un pixel diferență nu merită un al doilea adevăr. Când o formă există
	 * deja pe site, valoarea ei bate cifra dintr-un frame — altfel ai două
	 * butoane care seamănă și nu se potrivesc, iar nimeni nu știe care e cel bun.
	 */
	border-radius: 7px;
	background: var(--inco-co-white) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 14" width="26" height="14" fill="none"><path d="M19.75 12.75L24.75 6.75L19.75 0.75M24.75 6.75H0.75" stroke="%230A435C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / 26px 14px no-repeat;
}

/*
 * 🔴 Lista de metode și butonul ieșeau cu 32px mai înguste decât cardul.
 *
 * `woocommerce.css` pune `padding: 16px` pe lista de metode, iar cardul are deja
 * 24 (25 în machetă). Măsurat: buton 355 într-un card cu 387 de conținut. În
 * machetă amândouă ating marginile paddingului cardului.
 */
.inco-order--checkout #payment,
.inco-order--checkout #payment ul.payment_methods {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.inco-order--checkout #place_order:hover {
	filter: brightness(1.08);
}

.inco-order--checkout #place_order:focus-visible {
	outline: none;
	box-shadow: var(--inco-co-shadow-focus);
}

/*
 * ⚠️ `#payment` în selector, obligatoriu.
 *
 * `woocommerce.css` are `#payment div.form-row { padding: 1em }` — (1,1,1), cu
 * un id. Regula scrisă doar cu clase, oricât de jos în fișier, pierde: butonul
 * rămânea 355px într-un card cu 389 de conținut, adică 16px de fiecare parte,
 * exact `1em`. A doua oară în același fișier când un id de-al lui WooCommerce
 * bate o regulă de-a noastră scrisă cu clase.
 */
.inco-order--checkout #payment .form-row.place-order,
.inco-order--checkout .form-row.place-order {
	margin: 0;
	padding: 0;
}

/* Notificările WooCommerce, în paleta noastră. */
.inco-order--checkout .woocommerce-error,
.inco-order--checkout .woocommerce-message,
.inco-order--checkout .woocommerce-info {
	margin: 0 0 var(--inco-co-gap);
	padding: 12px 16px;
	border: 1px solid var(--inco-co-border);
	border-radius: var(--inco-co-r-md);
	background: var(--inco-co-tint);
	font-size: 14px;
	line-height: 1.4;
	color: var(--inco-co-ink);
	list-style: none;
}

.inco-order--checkout .woocommerce-error {
	border-color: var(--inco-co-sale);
	background: rgba(215, 59, 59, .06);
	color: var(--inco-co-sale);
}

.inco-order--checkout .woocommerce-error::before,
.inco-order--checkout .woocommerce-message::before,
.inco-order--checkout .woocommerce-info::before {
	display: none;
}

/* ============================================================ Pasul 3 */

.inco-success__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-bottom: 32px;
	text-align: center;
}

.inco-success__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--inco-co-r-pill);
	background: var(--inco-co-primary);
	color: var(--inco-co-bg);
}

.inco-success__title {
	margin: 0;
	font-weight: 600;
	font-size: 48px;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--inco-co-ink);
}

.inco-success__lead {
	margin: 0;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.3;
	color: var(--inco-co-ink);
}

.inco-success__card {
	display: flex;
	flex-direction: column;
	gap: var(--inco-co-gap);
	width: 100%;
	max-width: 664px;
	margin-inline: auto;
	padding: 32px;
}

.inco-success__block {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.inco-success__blocktitle {
	margin: 0;
	font-weight: 700;
	font-size: 20px;
	line-height: 1.1;
	color: var(--inco-co-ink);
}

.inco-success__text {
	margin: 0;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.4;
	color: var(--inco-co-ink);
}

.inco-success__muted {
	margin: 0;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.4;
	color: var(--inco-co-muted);
}

/* Instrucțiunile gateway-urilor (IBAN la transfer bancar etc.). */
.inco-success .woocommerce-bacs-bank-details,
.inco-success .wc-bacs-bank-details {
	width: 100%;
	max-width: 664px;
	margin: var(--inco-co-gap) auto 0;
	padding: var(--inco-co-pad-card);
	border: 1px solid var(--inco-co-border);
	border-radius: var(--inco-co-r-lg);
	background: var(--inco-co-white);
}

/* Tabelul nativ de detalii, dacă un plugin îl re-adaugă. */
.inco-success .woocommerce-order-details,
.inco-success .woocommerce-customer-details,
.inco-success .woocommerce-order-overview {
	display: none;
}

/* ============================================================ Responsive */

@media (max-width: 1100px) {
	.inco-order--checkout form.checkout {
		grid-template-columns: minmax(0, 1fr);
	}

	.inco-order--checkout #order_review,
	.inco-order--checkout #order_review_heading {
		grid-column: 1;
	}

	.inco-order--checkout #order_review {
		position: static;
	}
}

@media (max-width: 860px) {
	.inco-success__title {
		font-size: 32px;
	}

	.inco-success__card {
		padding: 24px;
	}
}

@media (max-width: 560px) {
	.inco-order--checkout .woocommerce-billing-fields__field-wrapper,
	.inco-order--checkout .woocommerce-shipping-fields__field-wrapper,
	.inco-order--checkout .woocommerce-additional-fields__field-wrapper {
		grid-template-columns: minmax(0, 1fr);
	}

	.inco-order--checkout .inco-col-half {
		grid-column: 1 / -1;
	}

	.inco-order--checkout .shop_table.woocommerce-checkout-review-order-table,
	.inco-co-card {
		padding: var(--inco-co-gap);
	}

	/* Cuponul: butonul trece sub input, altfel ambele rămân prea înguste. */
	.inco-coupon__form {
		flex-direction: column;
	}

	.inco-success__title {
		font-size: 24px;
	}

	.inco-success__card {
		padding: var(--inco-co-gap);
	}

	.inco-success__blocktitle {
		font-size: 16px;
	}

	.inco-success__text,
	.inco-success__muted {
		font-size: 14px;
	}
}

/*
 * „Modifică coșul" — ieșirea din fundătură.
 *
 * Lista din „Comanda ta" e doar de citit, iar coșul lateral e oprit pe
 * finalizare. Fără linkul ăsta, cine vrea să scoată un produs n-are pe unde.
 * → `Review::render_items()`
 */
.inco-review__editeaza {
	display: inline-block;
	margin-block-start: 12px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	color: var(--inco-co-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* `color` se declară și pe hover — altfel o ia tema. */
.inco-review__editeaza:hover,
.inco-review__editeaza:focus-visible {
	color: var(--inco-co-primary);
	text-decoration: underline;
}

/* =========================================================================
   Titlul cardului „Comanda ta"
   ========================================================================= */

/*
 * 🔴 Lipsea cu totul: sumarul începea direct cu primul produs, deși celelalte
 * două carduri din coloană își aveau titlul. Verificat pe pagina reală —
 * textul „Comanda ta" nu apărea nicăieri în document.
 *
 * Stă înăuntrul tabelului, fiindcă tabelul E cardul (el poartă chenarul, raza
 * de 16 și paddingul de 24). Deci are nevoie de marginea de jos scrisă aici;
 * `<td>`-ul din jur nu are `gap`.
 */
.inco-order--checkout .inco-review__title {
	margin: 0 0 16px;
	font-weight: 600;
	font-size: 24px;
	line-height: 1;
	color: var(--inco-co-ink);
}

/* =========================================================================
   „Factură pe firmă"
   ========================================================================= */

/*
 * 🔑 Ascunse din clasa de pe FORMULAR, nu câmp cu câmp din JS.
 *
 * Fără clasă — adică dacă scriptul n-a rulat — câmpurile rămân VIZIBILE. Un
 * client cu firmă le poate completa oricum. Invers (ascunse din marcaj, arătate
 * din JS) ar fi însemnat că, la orice eroare de JavaScript, datele de facturare
 * devin de negăsit.
 */
.inco-order--checkout form:not(.inco-are-firma) .inco-firma {
	display: none;
}


/*
 * Eticheta bifei NU e cea plutitoare de pe chenar.
 *
 * Câmpurile obișnuite își pun eticheta absolut, călare pe chenarul de sus. Aici
 * nu există chenar, iar eticheta stă lângă pătrat — deci trebuie scoasă din
 * poziționarea moștenită, altfel ar fi plutit peste rândul de deasupra.
 */
.inco-order--checkout .inco-co-field__checklabel {
	position: static;
	inset: auto;
	padding: 0;
	background: none;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: 0;
	color: var(--inco-co-muted);
	cursor: pointer;
}

/* =========================================================================
   Butonul de trimis comanda
   ========================================================================= */



@media (max-width: 860px) {
	.inco-order--checkout .inco-review__title {
		font-size: 18px;
	}
}

/* =========================================================================
   Corecturi de la prima privire pe pagina adevărată
   ========================================================================= */

/*
 * 🔴 DOUĂ titluri deasupra formularului, unul sub altul.
 *
 * WooCommerce scrie `<h3>Detalii pentru facturare</h3>` peste `#customer_details`,
 * iar noi mai scriam unul, „Date de facturare". În machetă nu e NICIUNUL:
 * formularul începe direct cu „Prenume". Pe al nostru l-am scos din PHP; ăsta e
 * al lui, deci se ascunde.
 *
 * ⚠️ Nu-l ștergem din DOM și nu golim textul: e singurul lucru care spune unui
 * cititor de ecran ce urmează după el. Ascuns vizual, rămâne anunțat.
 */
.inco-order--checkout #customer_details > .col-1 > h3,
.inco-order--checkout #customer_details h3#order_review_heading,
.inco-order--checkout .woocommerce-billing-fields > h3 {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/*
 * 🔴 Cutia gri din „Comanda ta".
 *
 * `woocommerce.css` pune `background: rgba(0,0,0,.025)` pe celulele de tabel din
 * `.shop_table`. Cardul nostru E un tabel, deci produsele apăreau într-o bandă
 * gri, iar Subtotalul și Totalul rămâneau albe dedesubt — de parcă erau două
 * carduri lipite. Măsurat pe `td`: `rgba(128, 128, 128, 0.07)`.
 */
/*
 * ⚠️ Selectoarele de mai jos poartă `table.…​.shop_table` dinadins.
 *
 * `woocommerce.css` scrie `.woocommerce table.shop_table td` — (0,2,2), adică
 * DOUĂ elemente, nu unul. O regulă de-a noastră cu o clasă în plus dar un
 * element în minus e (0,2,1) și pierde, oricât de jos ar fi scrisă. Se vedea ca
 * o linie orizontală deasupra titlului „Comanda ta" și ca 13px de aer în plus
 * la stânga a TOT ce e în cardul acela.
 */
.inco-order--checkout table.woocommerce-checkout-review-order-table.shop_table td,
.inco-order--checkout table.woocommerce-checkout-review-order-table.shop_table th,
.inco-order--checkout table.woocommerce-checkout-review-order-table.shop_table tbody td {
	background: none;
}

/*
 * 🔴 Numele produsului curgea pe 7 rânduri, iar rândul ajungea la 130px în loc
 * de 88 (cât ține miniatura). În machetă numele e tăiat cu „…".
 *
 * Trei rânduri, nu două: la 160px lățime și 14px, un nume de scutece are nevoie
 * de trei ca să se înțeleagă marca și mărimea. Măsurat pe produsele reale.
 */
.inco-order--checkout .inco-review__name {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* =========================================================================
   Bifa — pe marcajul pe care îl scrie chiar WooCommerce
   ========================================================================= */

/*
 * 🔴 Regulile mele de dinainte ținteau altă structură decât cea randată.
 *
 * Credeam că iese `<p class="form-row"><input><label>`. WooCommerce scrie de fapt:
 *
 *     <p class="form-row inco-co-field--check">
 *       <span class="woocommerce-input-wrapper">
 *         <label class="checkbox"><input type="checkbox"> Factură pe firmă</label>
 *       </span>
 *     </p>
 *
 * Adică inputul e cu DOUĂ niveluri mai jos și e învelit de etichetă. Deci
 * `display: flex` pus pe `<p>` nu avea ce așeza — singurul lui copil e spanul —
 * iar pătratul ieșea o dungă de 2×22 în loc de 24×24.
 *
 * 🔑 Structura unui câmp nu se presupune din alte câmpuri; se citește din pagină.
 */
.inco-order--checkout .inco-co-field--check .woocommerce-input-wrapper {
	display: block;
	inline-size: 100%;
}

.inco-order--checkout .inco-co-field--check label.checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
	min-block-size: 38px;
	margin: 0;
	padding: 0;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: 0;
	color: var(--inco-co-muted);
	cursor: pointer;
}

/* `width`/`height`, nu doar logicele: tema scrie `width`, iar ultima declarație
   dintre proprietăți echivalente câștigă. */
.inco-order--checkout .inco-co-field--check input[type="checkbox"].inco-co-field__check {
	/*
	 * 🔴 `display` e OBLIGATORIU aici, și e chiar cauza pentru care pătratul ieșea
	 * o dungă de 2px.
	 *
	 * Cu `appearance: none`, Chrome nu mai tratează bifa ca element înlocuit, iar
	 * eticheta care o învelește e `display: inline`. Un element inline
	 * NEÎNLOCUIT ignoră `width` și `height` — deci valorile chiar erau puse
	 * (măsurat: `width` computat `24px`), dar desenul rămânea 2×21.
	 *
	 * 🔑 Măsurătoarea spunea „24px" și tot greșit se vedea: `getComputedStyle`
	 * întoarce ce s-a CERUT, iar `getBoundingClientRect` ce s-a DESENAT. Când cele
	 * două nu se potrivesc, vinovat e `display`, nu regula.
	 *
	 * `inline-block` + `vertical-align`, nu flex pe etichetă: eticheta e a lui
	 * WooCommerce și n-am reușit s-o scot din `inline`; așa nu depindem de ea.
	 */
	display: inline-block;
	vertical-align: middle;
	appearance: none;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	min-width: 24px;
	margin: 0 8px 0 0;
	padding: 0;
	border: 1px solid var(--inco-co-border);
	border-radius: 4px;
	background: var(--inco-co-white);
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}

.inco-order--checkout .inco-co-field--check input[type="checkbox"].inco-co-field__check:checked {
	border-color: var(--inco-co-primary);
	background: var(--inco-co-primary);
}

.inco-order--checkout .inco-co-field--check input[type="checkbox"].inco-co-field__check:checked::after {
	/*
	 * Bifa e CHIAR glifa site-ului (`Icons::check`), nu două laturi rotite.
	 *
	 * 🔑 Desenul din CSS arăta „aproape la fel" — și tocmai de aia era greșit:
	 * restul site-ului folosește un `path` cu capete rotunjite și grosime 2.4,
	 * iar un colț construit din borduri are capete drepte. Aceeași formă, alt ton.
	 * Un semn desenat de două ori se depărtează la prima ajustare.
	 */
	content: "";
	display: block;
	inline-size: 100%;
	block-size: 100%;
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M20 6 9 17l-5-5" stroke="%23FAFCFF" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / 16px 16px no-repeat;
}

.inco-order--checkout .inco-co-field--check input[type="checkbox"].inco-co-field__check:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(61, 75, 255, .1);
}

/* =========================================================================
   Metoda de plată
   ========================================================================= */

/*
 * 🔴 Rândul era `display: block`, cu descrierea într-o casetă gri-lila.
 *
 * Măsurat: `.payment_box` avea fundal `rgb(220, 215, 226)` și padding de 14.72px
 * — caseta lui WooCommerce, cu tot cu săgeata ei. În machetă descrierea e un
 * rând simplu de 14px sub titlu, fără cutie.
 *
 * 🔑 Așezarea e GRILĂ, nu flex: eticheta și descrierea sunt frați în DOM, iar
 * radioul e al treilea. Cu grilă pot spune „radioul ocupă amândouă rândurile",
 * fără să ating marcajul lui.
 */
.inco-order--checkout #payment li.wc_payment_method {
	position: relative;
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr);
	column-gap: 16px;
	row-gap: 3px;
	align-items: center;
	/* 17 + pastila de 44 + golul de 16 = loc pentru iconița din dreapta. */
	padding: 15px 77px 13px 17px;
}

.inco-order--checkout #payment li.wc_payment_method > input[type="radio"] {
	grid-column: 1;
	grid-row: 1 / span 2;
	appearance: none;
	width: 22px;
	height: 22px;
	margin: 0;
	border: 1px solid var(--inco-co-border);
	border-radius: 999px;
	background: var(--inco-co-blue-soft, #e8f8ff);
	cursor: pointer;
}

.inco-order--checkout #payment li.wc_payment_method > input[type="radio"]:checked {
	border-color: var(--inco-co-primary);
	background: var(--inco-co-white);
	box-shadow: inset 0 0 0 4px var(--inco-co-white), inset 0 0 0 11px var(--inco-co-primary);
}

.inco-order--checkout #payment li.wc_payment_method > label {
	grid-column: 2;
	grid-row: 1;
	margin: 0;
	padding: 0;
	font-weight: 600;
	font-size: 16px;
	line-height: 1.1;
	color: var(--inco-co-ink);
	cursor: pointer;
}

/* Caseta gri a WooCommerce devine un rând simplu de text. */
.inco-order--checkout #payment li.wc_payment_method .payment_box {
	grid-column: 2;
	grid-row: 2;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.4;
	color: var(--inco-co-muted);
}

/* Săgeata cutiei — desenată de WooCommerce ca `::before`, n-are ce arăta acum. */
.inco-order--checkout #payment li.wc_payment_method .payment_box::before,
.inco-order--checkout #payment li.wc_payment_method .payment_box::after {
	display: none;
}

.inco-order--checkout #payment li.wc_payment_method .payment_box p {
	margin: 0;
}

/*
 * Radioul e ascuns de WooCommerce cu `style="display:none"` INLINE când există o
 * singură metodă de plată — logica lui, nu a noastră. Un stil inline nu se poate
 * învinge din foaie, deci nu încercăm: cât timp magazinul are un singur mod de
 * plată, nu e nimic de ales, iar macheta arată trei tocmai pentru că presupune
 * trei. Când se configurează a doua metodă, radioul apare singur, deja stilat.
 */

/* „(opțional)" nu se scrie pe o bifă — vezi nota din `Fields.php`. */
.inco-order--checkout .inco-co-field--check label.checkbox .optional {
	display: none;
}

/*
 * „(opțional)" se scoate și de pe câmpurile de firmă.
 *
 * 🔴 Nu e cosmetică, e o minciună: cu bifa pornită, serverul REFUZĂ comanda dacă
 * numele firmei sau CUI-ul lipsesc (`Fields::valideaza_firma`). Deci eticheta
 * spunea „opțional" despre un câmp care oprește comanda.
 *
 * 🔑 Câmpurile rămân `required: false` în declarație — altfel WooCommerce le-ar
 * cere și când bifa e stinsă, adică la 99 din 100 de clienți. Obligatorii sunt
 * doar ÎN CONTEXTUL bifei, iar contextul îl știe doar validarea.
 */
.inco-order--checkout .inco-firma .inco-co-field__label .optional {
	display: none;
}

/* =========================================================================
   Spațierile din „Comanda ta" — celulele de tabel ale WooCommerce
   ========================================================================= */

/*
 * 🔴 O linie orizontală apărea DEASUPRA titlului „Comanda ta", peste tot cardul.
 *
 * `woocommerce.css` pune `border-top` pe fiecare `td` din `.shop_table`. Antetul
 * tabelului e ascuns, deci prima celulă vizibilă e chiar cea în care punem noi
 * titlul — iar bordura ei se desena ca un divider fără rost, chiar sub marginea
 * de sus a cardului.
 *
 * 🔴 Și tot de acolo venea și paddingul greșit: `td` avea `9px 12px`, peste cei
 * 24 ai cardului. Măsurat: cardul începe la x=955, iar titlul cădea la x=992 —
 * 37px în loc de 24. Deci TOT conținutul coloanei era împins cu 13px față de
 * machetă, și nu se vedea de unde.
 *
 * 🔑 Un tabel are spațierea LUI, peste cea a cardului. Când folosești un tabel
 * ca pe un card, i-o scoți pe toată și o pui înapoi tu, acolo unde o vrei.
 */
.inco-order--checkout table.woocommerce-checkout-review-order-table.shop_table td,
.inco-order--checkout table.woocommerce-checkout-review-order-table.shop_table th {
	padding: 0;
	border: 0;
	vertical-align: middle;
}

/* Rândurile de totaluri: golul de 8 din machetă, dat ca 4 sus + 4 jos. */
.inco-order--checkout table.woocommerce-checkout-review-order-table.shop_table tr.cart-subtotal th,
.inco-order--checkout table.woocommerce-checkout-review-order-table.shop_table tr.cart-subtotal td,
.inco-order--checkout table.woocommerce-checkout-review-order-table.shop_table tfoot tr:not(.order-total) th,
.inco-order--checkout table.woocommerce-checkout-review-order-table.shop_table tfoot tr:not(.order-total) td {
	padding-block: 4px;
	font-weight: 400;
}

/* Valorile de pe rândurile de totaluri sunt Medium, nu Bold (macheta: 500). */
.inco-order--checkout table.woocommerce-checkout-review-order-table.shop_table tfoot tr:not(.order-total) td,
.inco-order--checkout table.woocommerce-checkout-review-order-table.shop_table tfoot tr:not(.order-total) td .amount {
	font-weight: 500;
}

/*
 * Linia dinaintea Totalului — singura din machetă, pusă acum ANUME.
 * Înainte venea de la bordura implicită a celulelor, deci apărea și unde nu
 * trebuia, și lipsea unde trebuia.
 */
/*
 * 🔴 Linia dinaintea Totalului se desena de TREI ori.
 *
 * Măsurat în pagină, trei elemente aveau bordură de sus, la două înălțimi:
 *   TR.order-total  x=867  w=387   ← a WooCommerce; regula mea zerora doar td/th
 *   TH              x=867  w=48    ← a mea
 *   TD              x=1144 w=110   ← a mea
 *
 * Și, mai important: **celulele nu umplu rândul** — 48 + 110 din 387 — deci
 * bucățile mele ieșeau scurte și despărțite de un gol de 229px. Se vedea ca o
 * linie întreagă, iar sub ea încă două cioturi.
 *
 * 🔑 O linie se desenează într-un singur loc. Aici pe RÂND, singurul element
 * care chiar are lățimea coloanei; celulele primesc doar aerul de deasupra.
 * ⚠️ Cu `border-collapse: separate`, bordura de rând e desenată de browser dar
 * nu e garantată de standard. Dacă vreodată dispare, se pierde o linie — nu se
 * strică așezarea. Am ales riscul ăsta în locul a trei borduri care se bat.
 */
.inco-order--checkout table.woocommerce-checkout-review-order-table.shop_table tfoot tr.order-total {
	border-top: 1px solid var(--inco-co-border);
}

.inco-order--checkout table.woocommerce-checkout-review-order-table.shop_table tfoot tr.order-total th,
.inco-order--checkout table.woocommerce-checkout-review-order-table.shop_table tfoot tr.order-total td {
	padding-top: 16px;
	border-top: 0;
}

/* Golul dintre lista de produse și blocul de totaluri. */
.inco-order--checkout table.shop_table .inco-review__wrap > td {
	padding-bottom: 16px;
}

/*
 * Pastila cu iconiță de la capătul metodei de plată.
 *
 * ⚠️ Scoasă din curgere, nu așezată din grilă: WooCommerce o randează înăuntrul
 * etichetei, deci nu e copil direct al rândului și nicio `grid-area` n-o poate
 * muta. Poziționată față de rând, cade exact unde o pune macheta, oricâte
 * rânduri ar avea descrierea.
 */
.inco-order--checkout #payment li.wc_payment_method .inco-payment__pill {
	position: absolute;
	inset-inline-end: 17px;
	inset-block: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 32px;
	margin-block: auto;
	border-radius: 6px;
}

.inco-order--checkout #payment li.wc_payment_method .inco-payment__pill--cash {
	background: rgba(58, 114, 13, .1);
	color: #3a720d;
}

.inco-order--checkout #payment li.wc_payment_method .inco-payment__pill svg {
	inline-size: 24px;
	block-size: 24px;
}

/*
 * Butonul de finalizare: chenarul se ia după gradient, nu peste el.
 *
 * 🔴 Macheta are `border: 1px #013465` — dar acolo butonul stă pe alb, iar în
 * pagină ieșea o dungă bleumarin peste capătul TURCOAZ al gradientului, adică
 * exact unde culoarea de sub ea e cea mai deschisă. Se vedea ca un contur
 * desenat greșit, nu ca marginea butonului.
 *
 * 🔑 Chenarul e făcut din același gradient, ca a doua imagine de fundal, deci
 * marginea are peste tot exact tonul de dedesubt. Grosimea rămâne 1px, ca în
 * machetă; se schimbă doar felul în care e colorată.
 */
.inco-order--checkout #place_order {
	border-color: transparent;
	background-image:
		linear-gradient(270deg, #013465 0%, #14a5a9 100%),
		linear-gradient(270deg, #013465 0%, #14a5a9 100%);
	background-origin: border-box, border-box;
	background-clip: padding-box, border-box;
}

/* =========================================================================
   Spațierile citite din frame-urile Figma, nu din ochi
   ========================================================================= */

/*
 * Golul dintre cele trei carduri: 8, nu 16.
 * Măsurat în machetă: cardul 1 are 389 și al doilea începe la 397.
 */
.inco-order--checkout #order_review {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Cardul de cupon: gol 24 înăuntru (titlu la y=24, rândul la y=68). */
.inco-order--checkout .inco-coupon {
	gap: 24px;
}

/*
 * Rândul cuponului: input 277 + gol 16 + buton 96 = 389, cât conținutul cardului.
 * Butonul e o cifră, nu „cât ține textul" — altfel se schimbă cu traducerea.
 */
.inco-order--checkout .inco-coupon__form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 96px;
	gap: var(--inco-co-gap);
	align-items: start;
}

.inco-order--checkout .inco-coupon .inco-btn {
	inline-size: 100%;
	block-size: 40px;
	padding: 0;
}

/* Cardul de plată are 25 în machetă, nu 24 — singurul care diferă. */
.inco-order--checkout .inco-payment {
	padding: 25px;
}

/* Numele produsului: 160 în machetă (miniatura 106 + gol 16 → text de la 122). */
.inco-order--checkout .inco-review__name {
	inline-size: 160px;
}

/*
 * „Factură pe firmă", între două linii — ca blocul din machetă.
 *
 * Măsurat pe frame: linie la y=0, bifa la y=9, a doua linie la y=55, iar bifa are
 * 38. Deci **8px deasupra și 8 dedesubt**, linii de 1px `#C4D2D7`.
 *
 * 🔑 În machetă blocul ăsta încadrează „Livrare la o altă adresă". La noi acela
 * nu se randează deloc, fiindcă magazinul n-are metode de livrare — deci tiparul
 * se aplică bifei care CHIAR e acolo, nu rămâne desenat în jurul unui gol.
 */
.inco-order--checkout .inco-co-field--check {
	padding-block: 8px;
	border-top: 1px solid var(--inco-co-border);
	border-bottom: 0;
}

/* =========================================================================
   Ultimele abateri, găsite comparând cu frame-urile Figma
   ========================================================================= */

/*
 * 🔴 O linie sub lista de produse, care nu există în machetă.
 *
 * În frame-ul Figma singura linie din card e cea dinaintea Totalului
 * (`Rectangle 10`). Între produse și blocul de totaluri e doar gol de 16.
 */
.inco-order--checkout .inco-review__items {
	padding-bottom: 0;
	border-bottom: 0;
}

/*
 * ⚠️ Specificitate: `p.form-row { padding: 0 }` e (0,2,1) și bătea regula de
 * padding a bifei, scrisă cu (0,2,0). De aia liniile apăreau lipite de text.
 */
.inco-order--checkout p.form-row.inco-co-field--check {
	padding-block: 8px;
}

/*
 * 🔴 Titlul „Plata" stătea la 46px de prima metodă, nu la 20.
 *
 * Cardul are `gap: 20`, dar titlul mai avea și `margin-bottom: 16` de la regula
 * comună a titlurilor de card. Cele două se adună — golul unui container nu
 * înlocuiește marginile copiilor, se pune peste ele.
 */
.inco-order--checkout .inco-payment .inco-co-card__title,
.inco-order--checkout .inco-coupon .inco-co-card__title {
	margin-bottom: 0;
}

/* =========================================================================
   Bifa „Am citit și sunt de acord cu termenii"
   ========================================================================= */

/*
 * Apare de când e setată pagina de Termeni — WooCommerce o cere ca să se poată
 * încheia comanda. Nu e în machetă, dar nu se poate scoate: e consimțământul.
 * Deci primește forma bifei noastre, ca să nu arate ca o piesă străină.
 */
.inco-order--checkout .woocommerce-terms-and-conditions-wrapper {
	margin: 0;
}

.inco-order--checkout .validate-required.woocommerce-validated,
.inco-order--checkout .woocommerce-terms-and-conditions-checkbox-text {
	font-size: 14px;
	line-height: 1.5;
	color: var(--inco-co-muted);
}

.inco-order--checkout .form-row.validate-required label.checkbox,
.inco-order--checkout .woocommerce-terms-and-conditions-wrapper label.checkbox {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--inco-co-muted);
}

.inco-order--checkout .woocommerce-terms-and-conditions-wrapper input[type="checkbox"] {
	display: inline-block;
	flex: 0 0 auto;
	appearance: none;
	width: 20px;
	height: 20px;
	min-width: 20px;
	margin: 1px 0 0;
	border: 1px solid var(--inco-co-border);
	border-radius: 4px;
	background: var(--inco-co-white);
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}

.inco-order--checkout .woocommerce-terms-and-conditions-wrapper input[type="checkbox"]:checked {
	border-color: var(--inco-co-primary);
	background: var(--inco-co-primary) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M20 6 9 17l-5-5" stroke="%23FAFCFF" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / 14px 14px no-repeat;
}

.inco-order--checkout .woocommerce-terms-and-conditions-wrapper a {
	font-weight: 500;
	color: var(--inco-co-primary);
	text-decoration: underline;
}

/* =========================================================================
   Metoda de previzualizare (neconfigurată)
   ========================================================================= */

/*
 * Rândul e randat de noi, nu de WooCommerce, iar `.place-order` devine coloană
 * ca să-l putem urca deasupra termenilor: WooCommerce n-are niciun hook între
 * lista de metode și blocul de trimitere, deci singurul loc în care putem scrie
 * e după termeni. Ordinea vizuală o corectăm din `order`, nu mutând marcajul.
 */
.inco-order--checkout #payment .form-row.place-order {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.inco-order--checkout .inco-payment__preview { order: -1; }

.inco-order--checkout .inco-payment__preview li {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr);
	column-gap: 16px;
	row-gap: 3px;
	align-items: center;
	position: relative;
	padding: 15px 77px 13px 17px;
	border: 1px solid var(--inco-co-border);
	border-radius: 12px;
	background: var(--inco-co-white);
	list-style: none;
	/* Neconfigurată: se vede, dar nu se poate alege. */
	opacity: .65;
	cursor: not-allowed;
}

.inco-order--checkout .inco-payment__preview .inco-payment__radio {
	grid-column: 1;
	grid-row: 1 / span 2;
	inline-size: 22px;
	block-size: 22px;
	border: 1px solid var(--inco-co-border);
	border-radius: 999px;
	background: var(--inco-co-blue-soft, #e8f8ff);
}

.inco-order--checkout .inco-payment__preview .inco-payment__name {
	grid-column: 2;
	grid-row: 1;
	font-weight: 600;
	font-size: 16px;
	line-height: 1.1;
	color: var(--inco-co-ink);
}

.inco-order--checkout .inco-payment__preview .inco-payment__desc {
	grid-column: 2;
	grid-row: 2;
	font-size: 14px;
	line-height: 1.4;
	color: var(--inco-co-muted);
}

/*
 * Blocul cu logourile de card — un singur desen de 69×40, exportul din Figma.
 *
 * Înainte construiam patru plăcuțe din CSS, cu „VISA", „MC", „GPay", „Pay" scrise
 * cu fontul site-ului. Semănau cu niște mărci fără să fie ele. Mărcile de plată
 * au forme înregistrate — se desenează cum le dă proprietarul lor, nu aproximate.
 */
.inco-order--checkout .inco-payment__logos {
	position: absolute;
	inset-inline-end: 17px;
	inset-block: 0;
	display: flex;
	align-items: center;
	inline-size: 69px;
	block-size: 40px;
	margin-block: auto;
}

.inco-order--checkout .inco-payment__logos svg {
	inline-size: 69px;
	block-size: 40px;
}

/*
 * 🔴 Lista de metode avea 10px de padding sus și jos — peste golul de 20 al
 * cardului. Titlul „Plata" ieșea la 30 de prima metodă, nu la 20.
 *
 * ⚠️ `getComputedStyle` îmi răspundea `padding-top: 0`, dar cutiile spuneau
 * altceva: lista 1042→1152, metoda 1052→1142. Zece pixeli de fiecare parte, pe
 * care proprietatea nu-i recunoștea. **Când valoarea citită și cutia desenată nu
 * se potrivesc, cutia are dreptate** — a se vedea și bifa de 24px care se
 * desena 2px.
 *
 * Scris pe `#payment` (un id), ca să bată regulile lui WooCommerce, și cu
 * direcția declarată: `gap` fără `flex-direction` înseamnă gol pe orizontală,
 * adică deloc între rânduri.
 */
.inco-order--checkout #payment ul.payment_methods.methods {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

/* Marginea proprie a rândului de metodă — 10px sus și jos, de la WooCommerce. */
.inco-order--checkout #payment ul.payment_methods.methods > li {
	margin: 0;
}

/*
 * 🔴 Clearfix-ul lui WooCommerce devine ELEMENT într-un container flex.
 *
 * `.form-row.place-order` are `::before` și `::after` de curățare a float-urilor.
 * Cât timp blocul era `display: block`, ele nu ocupau nimic. De când l-am făcut
 * coloană flex (ca să pot urca rândul de previzualizare deasupra termenilor),
 * fiecare a devenit un copil în plus — deci încă două goluri de 20px, unul
 * deasupra termenilor și unul sub buton.
 *
 * 🔑 Când schimbi `display`-ul unui bloc străin, moștenești și pseudo-elementele
 * lui ca elemente. Ce era invizibil în curgerea veche începe să ocupe loc.
 */
.inco-order--checkout #payment .form-row.place-order::before,
.inco-order--checkout #payment .form-row.place-order::after {
	display: none;
}

/* Butonul are `float: right` de la WooCommerce — fără efect în flex, dar îl scoatem. */
.inco-order--checkout #payment #place_order {
	float: none;
}

/*
 * Același clearfix, pe lista de metode.
 *
 * `ul.payment_methods` are și ea `::before`/`::after`. În coloană flex fiecare e
 * un copil de înălțime 0 — dar `gap: 10px` se aplică ÎNTRE copii, deci pseudo-
 * elementul gol de sus împingea prima metodă cu exact 10px. De aici cei 30 dintre
 * titlul „Plata" și prima metodă, în loc de 20.
 *
 * 🔑 Un element de înălțime zero nu e un element fără efect: într-un container
 * cu `gap`, tot primește un gol de fiecare parte.
 */
.inco-order--checkout #payment ul.payment_methods::before,
.inco-order--checkout #payment ul.payment_methods::after {
	display: none;
}

/*
 * Golul dintre lista de metode și blocul de trimitere: **10**, nu 20.
 *
 * 🔑 Aici nu se despart două blocuri, se despart două METODE. Rândul de
 * previzualizare stă în `.place-order` (urcat cu `order: -1`), deci golul ăsta
 * cade între ultima metodă reală și el — și trebuie să fie același 10 ca între
 * metodele din listă, altfel una dintre ele stă vizibil mai departe.
 *
 * Cei 20 dintre blocuri rămân, dar din `.place-order`: previzualizare → text de
 * confidențialitate → buton.
 */
.inco-order--checkout #payment.woocommerce-checkout-payment {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/*
 * 🔴 Rândul de probă ieșea cu 40px mai îngust decât cel real (345 față de 385).
 * Era retragerea implicită a oricărei liste — `padding-inline-start: 40px` —
 * pe care o zerorasem la lista WooCommerce, dar nu și la a noastră.
 */
.inco-order--checkout .inco-payment__preview {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * 🔴 Butonul radio al metodei reale nu se vedea, iar `!important` e singura cale.
 *
 * WooCommerce îl ascunde cu `style="display:none"` scris DIRECT în marcaj, când
 * există o singură metodă. Un stil inline bate orice regulă dintr-o foaie —
 * singurul lucru care trece peste el e o declarație `!important` a autorului.
 *
 * 🔑 De aia îl folosesc aici, deși în rest îl evităm: nu e o scurtătură ca să
 * câștig o luptă de specificitate, e singura unealtă care există pentru cazul
 * ăsta. Iar în machetă radioul e desenat pe fiecare metodă, inclusiv când e una
 * singură — deci nu-l ascundem noi în locul lui.
 */
.inco-order--checkout #payment li.wc_payment_method > input[type="radio"] {
	display: block !important;
}

/*
 * Textul de confidențialitate și bifa de termeni stau amândouă în același
 * container, lipite una de alta. Sunt două lucruri diferite — o informație și
 * un consimțământ — deci primesc un gol între ele.
 *
 * 16, nu 20: în cardul ăsta 20 desparte BLOCURI (metodele, textul, butonul), iar
 * astea două sunt înăuntrul aceluiași bloc. Aceeași treaptă ca între produsele
 * din „Comanda ta".
 */
.inco-order--checkout .woocommerce-terms-and-conditions-wrapper {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.inco-order--checkout .woocommerce-terms-and-conditions-wrapper > * {
	margin: 0;
}

/* =========================================================================
   „Comanda ta" pe telefon — rândul de produs se RESTRUCTUREAZĂ
   ========================================================================= */

@media (max-width: 860px) {
	/*
	 * 🔑 Pe telefon rândul nu se strânge, se rearanjează.
	 *
	 * Citit din frame-ul de mobil (`18024:1874`): miniatura 112×93, coloana de
	 * text la 8px de ea, cu gol 12 înăuntru — iar PREȚUL coboară din dreapta și
	 * se așază sub cantitate, aliniat la stânga.
	 *
	 * Pe desktop prețul e al treilea element al rândului, lipit la dreapta; aici
	 * devine al doilea rând al coloanei de text. Grilă, nu flex: doar așa pot
	 * spune „miniatura ține amândouă rândurile" fără să ating marcajul.
	 */
	.inco-order--checkout .inco-review__item {
		display: grid;
		grid-template-columns: 112px minmax(0, 1fr);
		column-gap: 8px;
		row-gap: 12px;
		align-items: start;
	}

	.inco-order--checkout .inco-review__thumb {
		grid-column: 1;
		grid-row: 1 / span 2;
		width: 112px;
		height: 93px;
	}

	.inco-order--checkout .inco-review__meta {
		grid-column: 2;
		grid-row: 1;
		gap: 12px;
	}

	/* Numele: 12px, tăiat cu „…" pe 3 rânduri, ca în machetă. */
	.inco-order--checkout .inco-review__name {
		inline-size: auto;
		font-size: 12px;
		letter-spacing: 0.02em;
	}

	.inco-order--checkout .inco-review__qty {
		font-size: 12px;
		letter-spacing: 0.01em;
	}

	/*
	 * Prețul — al doilea rând al coloanei, la stânga.
	 * `text-align: start` anulează alinierea la dreapta de pe desktop.
	 */
	.inco-order--checkout .inco-review__line {
		grid-column: 2;
		grid-row: 2;
		font-size: 14px;
		letter-spacing: 0.01em;
		text-align: start;
	}

	/* Golul dintre produse: 8 pe telefon, 16 pe desktop. */
	.inco-order--checkout .inco-review__items {
		gap: 8px;
	}
}

/*
 * Miniatura produsului stă pe ALB, nu pe albastrul foarte deschis al paginii.
 *
 * `--inco-co-bg` e `#FAFCFF` — un alb cu o urmă de albastru, bun pentru câmpuri,
 * dar pozele de produs sunt decupate pe alb curat. Diferența e mică în cifre și
 * foarte vizibilă în ochi: se vede pătratul pozei înăuntrul casetei.
 *
 * 🔑 Fundalul unei casete de imagine se ia după IMAGINE, nu după pagină.
 */
.inco-order--checkout .inco-review__thumb {
	background-color: #fff;
}