/* =========================================================================
   Inco Plus Checkout — tokenuri + componente comune
   Valorile vin 1:1 din Figma (secțiunea „Order steps").

   Namespace: .inco-*  → nu intră în coliziune cu tema sau cu Inco Plus.
   Toate culorile trec prin variabile: paleta se schimbă într-un singur loc,
   nu prin 20 de fișiere.
   ========================================================================= */

:root {
	/* Paletă */
	--inco-co-ink: #0A435C;          /* text principal */
	--inco-co-ink-deep: #013465;     /* capătul închis al gradientului; glifa din pastila butonului primar */
	--inco-co-primary: #056E9B;      /* albastru de brand */
	--inco-co-muted: #53798A;        /* text secundar */
	--inco-co-border: #C4D2D7;       /* borduri, separatoare */
	--inco-co-border-soft: #D5F2FF;  /* separatoare pe fundal deschis */
	--inco-co-bg: #FAFCFF;           /* fundal card */
	--inco-co-white: #FFFFFF;
	--inco-co-tint: #E8F8FF;         /* pastilă iconiță */
	--inco-co-inactive: #E4EDF1;     /* pas neatins */
	--inco-co-sale: #D73B3B;
	--inco-co-success: #0B8669;

	--inco-co-grad-primary: linear-gradient(270deg, #013465 0%, #14A5A9 100%);

	/* Tipografie */
	--inco-co-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--inco-co-font-alt: Roboto, var(--inco-co-font);

	/* Radii */
	--inco-co-r-sm: 6px;
	--inco-co-r: 8px;
	--inco-co-r-md: 12px;
	--inco-co-r-lg: 16px;
	--inco-co-r-pill: 999px;

	/* Umbre */
	--inco-co-shadow-panel: 0 18px 50px rgba(10, 67, 92, 0.18);
	--inco-co-shadow-focus: 0 0 0 3px rgba(5, 110, 155, 0.15);

	/* Ritm */
	--inco-co-gap: 16px;
	--inco-co-pad-card: 24px;
}

/* ---------------------------------------------------- resetări localizate */

.inco-order,
.inco-sidecart,
.inco-success {
	font-family: var(--inco-co-font);
	color: var(--inco-co-ink);
}

/* ═══════════════════════════════════════════════════════ Containerul paginii

   🔴 Tema plafonează conținutul la 1140px, headerul are 1344px.

   Hello Elementor scrie, în `assets/css/theme.css`:

     body:not([class*=elementor-page-]) .site-main {
         max-width: 1140px;  padding-inline: 10px;  margin-inline: auto;
     }

   iar kitul Elementor dă containerelor `--container-max-width: 1344px`. Deci
   bara de sus și meniul se întindeau pe 1344, iar coșul rămânea pe 1120 (1140
   minus paddingul) — cu 112px mai îngust de fiecare parte. Asta se vedea ca
   „prea mult spațiu pe laterale", și tot de aici veneau numele de produs
   strivite: din 1120 rămâneau 71px pentru coloana cu numele, după ce sumarul,
   miniatura, prețul, stepperul și subtotalul își luau partea. La 1344 aceeași
   socoteală dă 295px.

   Specificitatea regulii temei e (0,2,1) — `body` + `:not()` + `.site-main`.
   `body.inco-co-page main.site-main` ajunge la (0,2,2) și câștigă fără
   `!important`. Aceeași soluție pe care o folosește deja Inco Plus pentru
   pagina de produs.

   ⚠️ Clasa `inco-co-page` se pune din PHP DOAR când pagina conține chiar
   shortcode-ul nostru — vezi `Assets::body_class()`. Legată de clasele
   WooCommerce, ar fi lățit și coșul nativ al cuiva care ne-a dezactivat.
   ═════════════════════════════════════════════════════════════════════════ */

body.inco-co-page main.site-main {
	max-width: none;
	width: 100%;
	padding-inline: 0;
}

.inco-order {
	box-sizing: border-box;
	max-width: 1344px;
	margin-inline: auto;
	/*
	 * Paddingul de secțiune: 0 pe desktop, 20 pe tabletă, 16 pe telefon.
	 * În trepte, nu `clamp()` — la 900px un clamp ar da ~12px, adică nici 20,
	 * nici 16. Pragurile sunt cele din Elementor, ca site-ul să aibă un singur
	 * set: telefon ≤ 767, tabletă 768–1024, desktop ≥ 1025.
	 */
	padding-inline: 0;
}

@media (max-width: 1024px) {
	.inco-order {
		padding-inline: 20px;
	}
}

@media (max-width: 767px) {
	.inco-order {
		padding-inline: 16px;
	}
}

.inco-order *,
.inco-order *::before,
.inco-order *::after,
.inco-sidecart *,
.inco-sidecart *::before,
.inco-sidecart *::after,
.inco-success *,
.inco-success *::before,
.inco-success *::after {
	box-sizing: border-box;
}

/* ============================================================== Butoane */

/* ═════════════════════════════════════════════════════════════════════════
   ⚠️ CLASA DUBLATĂ ÎN SELECTOR — nu e greșeală de scriere.
   Vezi explicația din secțiunea „Blindaj" de la finalul fișierului înainte de
   a o simplifica. Pe scurt: `[type=button]` din tema Hello Elementor cântărește
   (0,1,0), iar `[type=button]:hover` cântărește (0,2,0). Reset.css-ul temei se
   încarcă DUPĂ foile noastre, deci o singură clasă pierde.
   ═════════════════════════════════════════════════════════════════════════ */

/*
 * 🔴 Înălțime FIXĂ 42, fără padding pe verticală — și `:not(.inco-btn--primary)`.
 *
 * Cu `min-height: 42` plus `padding: 12px` sus și jos, butoanele ieșeau **48**
 * în coșul lateral. Măsurat. Era a treia înălțime de buton pe site.
 * Înălțimea unui buton se declară; lăsată să iasă din padding, se schimbă odată
 * cu fontul, cu `line-height` sau cu o iconiță pusă înăuntru.
 *
 * ⚠️ `:not(.inco-btn--primary)` fiindcă primarul își ia TOT din componenta
 * noastră, prin `.inco-btn--primary` — de (0,1,0). Regula asta, de (0,2,0), ar
 * fi bătut-o. Aici rămân doar `--solid` și `--ghost`.
 */
.inco-btn.inco-btn:not(.inco-btn--primary) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	block-size: 42px;
	padding: 0 16px;
	border: 1px solid transparent;
	border-radius: var(--inco-co-r);
	background-color: transparent;
	font-family: var(--inco-co-font);
	font-weight: 500;
	font-size: 16px;
	line-height: 1;
	letter-spacing: -0.01em;
	text-align: center;
	text-decoration: none !important;
	white-space: nowrap;
	cursor: pointer;
	appearance: none;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}

/*
 * Butonul primar: gradient, cu pastila albă a iconiței la dreapta.
 *
 * 🔑 Valorile NU sunt citite din Figma, ci copiate din butonul „Adaugă în coș"
 * al pluginului Inco Plus (`modules/ProductCard/assets/css/product-card.css`,
 * `.inco-add-to-cart`). Motivul: acel buton există deja pe același site, a
 * trecut prin mai multe runde de corecturi măsurate în browser, iar două
 * butoane primare care arată diferit pe aceeași pagină se văd imediat. Sursa de
 * adevăr e implementarea vecină, nu o a doua interpretare a machetei.
 *
 * ⚠️ `gap: 0`, nu 16px. Gap-ul e VOPSIT în zona colorată, dar nu face parte din
 * cutia etichetei: textul se centra într-o cutie mai scurtă decât zona pe care
 * o vede ochiul și ieșea împins spre stânga. Aerul dintre text și pastilă vine
 * din faptul că eticheta crește (`flex: 1`), nu dintr-un gap.
 *
 * ⚠️ `padding: 0 1px 0 0`. Cei 1px din dreapta lasă gradientul să se vadă ca o
 * ramă subțire în jurul pastilei albe. Sus și jos rama vine singură, din
 * 42 − 40. La stânga NU e padding: fără el, cutia etichetei ESTE zona colorată,
 * deci centrarea din ea e și centrarea văzută.
 *
 * Gradientul nu se poate anima direct, deci hover-ul schimbă doar luminozitatea.
 * `filter` e mai ieftin decât un al doilea strat cu opacity animat.
 */
/*
 * Aerul din jurul etichetei se pune pe ETICHETĂ, nu pe buton — pastila
 * iconiței trebuie să atingă marginea.
 *
 * 16px, ca la butonul „Adaugă în coș" din grila de produse. Acolo l-am corectat
 * pe 9 august: era `padding-inline-start`, deci 16 la stânga și 0 la dreapta,
 * iar textul ieșea descentrat.
 */
/*
 * 🔴 Trei clase, nu două — și nu e o dublare decorativă.
 *
 * Regula de bază a devenit `.inco-btn.inco-btn:not(.inco-btn--primary)`, iar
 * `:not()` **preia specificitatea argumentului**: 2 clase + 1 din `:not` = trei.
 * Variantele, scrise cu două, au început brusc să piardă — bordura lui `ghost`
 * a rămas `transparent`, adică butonul n-a mai avut contur decât la hover.
 * Prins de Seba pe site, la câteva minute după livrare.
 *
 * 🔑 A DOUA oară azi pe `:not()`. E chiar §4g, scrisă de mine: când ridic
 * specificitatea unei reguli de bază, ridic în aceeași mișcare și variantele ei
 * — altfel „baza" devine excepția.
 */
/*
 * 🔴 DOUĂ lucruri pe care le-am rupt eu în `v1.16.4`, când am exclus butonul
 * primar din regula de bază cu `:not(.inco-btn--primary)`.
 *
 * Excluderea a fost corectă — altfel baza bătea componenta — dar odată cu ea
 * primarul a pierdut și două lucruri care NU erau ale bazei ca stil, ci
 * apărători puse anume:
 *
 * 1. `text-decoration: none !important` — Hello Elementor subliniază linkurile
 *    din `.page-content` la (0,1,1), iar componenta ajunge la buton prin
 *    `.inco-btn--primary`, de (0,1,0). Deci sublinierea a revenit pe „Continuă
 *    cumpărăturile", „Plătește" și pe tot ce e `<a>`. `!important`-ul era al lui
 *    Manu și era pus tocmai pentru asta.
 *
 * 2. `padding-inline` pe etichetă — în card butonul e întins, deci `flex: 1` cu
 *    centrare lasă aer singur. Aici butonul se strânge după text, iar centrarea
 *    într-o cutie cât textul înseamnă ZERO aer. Aceeași greșeală ca la „Adaugă
 *    toate în coș" din comparator, pe care o reparasem acum câteva ore.
 *
 * 🔑 Când scot o regulă de pe un element, mă uit ce APĂRA, nu doar ce declara.
 */
.inco-btn.inco-btn {
	text-decoration: none !important;
}

.inco-btn--primary .inco-btn__label {
	padding-inline: 16px;
}

/*
 * Paginile noastre de coș și finalizare nu poartă sublinierile temei.
 *
 * `body.inco-co-page a` cântărește (0,1,2) — un element, o clasă, încă un
 * element — deci bate `.page-content a` de (0,1,1) fără `!important`.
 * Restul site-ului arată la fel: linkurile din interfață nu sunt subliniate.
 */
body.inco-co-page a {
	text-decoration: none;
}

.inco-btn.inco-btn--solid.inco-btn--solid {
	background: var(--inco-co-primary);
	color: var(--inco-co-bg);
}

.inco-btn.inco-btn--solid.inco-btn--solid:hover,
.inco-btn.inco-btn--solid.inco-btn--solid:focus-visible {
	background: #045C82;
	color: var(--inco-co-bg);
}

.inco-btn.inco-btn--ghost.inco-btn--ghost {
	background: transparent;
	border-color: var(--inco-co-border);
	color: var(--inco-co-ink);
}

.inco-btn.inco-btn--ghost.inco-btn--ghost:hover,
.inco-btn.inco-btn--ghost.inco-btn--ghost:focus-visible {
	background: var(--inco-co-tint);
	border-color: var(--inco-co-primary);
	color: var(--inco-co-ink);
}

.inco-btn.inco-btn:focus-visible {
	outline: none;
	box-shadow: var(--inco-co-shadow-focus);
}

.inco-btn.inco-btn[disabled],
.inco-btn.inco-btn.is-busy {
	opacity: .55;
	pointer-events: none;
}

/*
 * Eticheta butonului.
 *
 * Pe butonul primar crește și se centrează în spațiul rămas la stânga pastilei,
 * iar pastila e împinsă în dreapta cu `margin-inline-start: auto`. Textul stă
 * astfel centrat optic în zona colorată, indiferent cât de lat e butonul.
 *
 * `line-height: 1.4`, nu 1: cutia unui text are înălțimea `line-height`, iar cu
 * 1 coada lui „g" din „Adaugă" iese din cutie și e retezată de orice
 * `overflow: hidden` de pe traseu.
 */
.inco-btn__label {
	line-height: 1.4;
}

.inco-btn--primary .inco-btn__label {
	flex: 1 1 auto;
	min-width: 0;
	text-align: center;
}

/*
 * Pastila iconiței din butonul primar: 44×40, rază 7px, glifă `#013465`.
 * Aceleași valori ca pastila butonului „Adaugă în coș" din Inco Plus.
 */
/*
 * Glifa: 24px lățime, înălțimea din raportul propriu.
 *
 * Iconițele pătrate (coș, coș de gunoi) ies 24×24, ca la Inco Plus. Săgeata are
 * caseta 26×14, deci iese 24×12,9 — puțin mai mică decât exportul, cât să
 * rămână 10px de aer de fiecare parte în pastila de 44, exact ca glifa pătrată.
 * `height: auto` face asta singur din `viewBox`, fără să deformeze nimic.
 */
/*
 * Pe butoanele plate iconița n-are pastilă: e doar o glifă lângă text, deci
 * nu-i impunem nici dimensiune, nici fundal.
 */
.inco-btn--solid .inco-btn__icon.inco-btn__icon,
.inco-btn--ghost .inco-btn__icon.inco-btn__icon {
	/* Fără pastilă nu există „margine dreaptă": glifa stă lângă text. */
	margin-inline-start: 0;
	width: auto;
	height: auto;
	background: none;
	color: inherit;
}

/*
 * `width: 100%` cu clasă dublată: tema pune `[type=submit] { width: auto }` la
 * (0,1,0), deci pe un buton de tip submit lățimea completă se pierdea.
 */
.inco-btn--block.inco-btn--block {
	width: 100%;
}

/* ========================================================= Bara de pași */

.inco-steps {
	display: flex;
	align-items: center;
	gap: 0;
	width: 100%;
	max-width: 420px;
}

.inco-steps__step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	text-align: center;
}

.inco-steps__num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--inco-co-r-pill);
	background: var(--inco-co-inactive);
	color: var(--inco-co-muted);
	font-weight: 600;
	font-size: 32px;
	line-height: 1;
	letter-spacing: -0.03em;
}

.inco-steps__step.is-active .inco-steps__num,
.inco-steps__step.is-done .inco-steps__num {
	background: var(--inco-co-primary);
	color: var(--inco-co-bg);
}

.inco-steps__label {
	font-weight: 500;
	font-size: 14px;
	line-height: 1;
	letter-spacing: 0.01em;
	color: var(--inco-co-muted);
	white-space: nowrap;
}

.inco-steps__step.is-active .inco-steps__label,
.inco-steps__step.is-done .inco-steps__label {
	color: var(--inco-co-primary);
}

/*
 * Conectorul dintre pași.
 *
 * `align-self: flex-start` + marginea de 23px îl aliniază pe centrul
 * cercurilor (48/2 − 2/2), nu pe centrul întregului pas — care include și
 * eticheta de dedesubt, deci ar fi coborât linia.
 */
.inco-steps__bar {
	flex: 1 1 auto;
	align-self: flex-start;
	height: 2px;
	margin: 23px 8px 0;
	border-radius: var(--inco-co-r-pill);
	background: var(--inco-co-inactive);
	transition: background-color .3s ease;
}

.inco-steps__bar.is-done {
	background: var(--inco-co-primary);
}

/* ============================================================== Carduri */

.inco-co-card {
	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);
}

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

.inco-co-card__title--sm {
	font-size: 20px;
}

.inco-divider {
	height: 1px;
	margin: 0;
	border: 0;
	border-radius: var(--inco-co-r-pill);
	background: var(--inco-co-border);
}

/* ============================================== Rânduri de tip etichetă/valoare */

.inco-line {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--inco-co-gap);
}

.inco-line__label {
	font-family: var(--inco-co-font-alt);
	font-weight: 400;
	font-size: 16px;
	line-height: 1;
	color: var(--inco-co-muted);
}

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

.inco-line--total .inco-line__label {
	font-family: var(--inco-co-font);
	font-weight: 600;
	font-size: 20px;
	color: var(--inco-co-ink);
}

.inco-line--total .inco-line__value {
	font-weight: 500;
	font-size: 20px;
	color: var(--inco-co-primary);
}

/* ============================================================= Stepper */

.inco-stepper {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--inco-co-border);
	border-radius: var(--inco-co-r);
	background: var(--inco-co-bg);
	overflow: hidden;
}

.inco-stepper__btn.inco-stepper__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--inco-co-ink);
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.inco-stepper__btn.inco-stepper__btn:hover:not([disabled]),
.inco-stepper__btn.inco-stepper__btn:focus:not([disabled]) {
	background: var(--inco-co-tint);
	color: var(--inco-co-primary);
}

/*
 * Dezactivat: gri, dar NU `pointer-events: none`.
 *
 * Butonul trebuie să rămână focusabil ca cititoarele de ecran să-l anunțe și
 * să explice de ce nu se poate coborî mai jos de 1.
 */
.inco-stepper__btn.inco-stepper__btn[disabled] {
	background: none;
	color: var(--inco-co-border);
	cursor: not-allowed;
}

.inco-stepper__value {
	min-width: 28px;
	padding: 0 2px;
	font-weight: 500;
	font-size: 16px;
	line-height: 1;
	text-align: center;
	color: var(--inco-co-ink);
	font-variant-numeric: tabular-nums;
}

/* ================================================== Miniaturi de produs */

/*
 * Imaginea vine ca `background-image` prin `--inco-co-thumb`.
 *
 * Un `<img>` cu `object-fit: contain` nu putea respecta simultan raportul
 * cerut și paddingul de 8px al casetei: `contain` umple caseta întreagă,
 * ignorând paddingul, iar cu `padding` pe container imaginea nu mai centra.
 */
.inco-thumb {
	position: relative;
	display: block;
	flex: 0 0 auto;
	border: 1px solid var(--inco-co-border);
	border-radius: var(--inco-co-r-md);
	background-color: var(--inco-co-bg);
	background-image: var(--inco-co-thumb, none);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	background-origin: content-box;
	padding: 8px;
}

/* =========================================== Câmpuri de formular (design Figma) */

/*
 * Eticheta „plutitoare" din design: pastilă albă suprapusă pe bordura de sus.
 * `top: -6px` + fundal alb taie bordura exact cât ține textul.
 */
.inco-co-field {
	position: relative;
	display: block;
}

.inco-co-field__label {
	position: absolute;
	top: -6px;
	left: 12px;
	z-index: 1;
	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;
}

.inco-co-field input[type="text"],
.inco-co-field input[type="email"],
.inco-co-field input[type="tel"],
.inco-co-field input[type="number"],
.inco-co-field input[type="password"],
.inco-co-field select,
.inco-co-field textarea {
	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);
	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-co-field textarea {
	min-height: 150px;
	resize: vertical;
}

.inco-co-field input:focus,
.inco-co-field select:focus,
.inco-co-field textarea:focus {
	outline: none;
	border-color: var(--inco-co-primary);
	box-shadow: var(--inco-co-shadow-focus);
}

.inco-co-field input:focus + .inco-co-field__label,
.inco-co-field select:focus ~ .inco-co-field__label,
.inco-co-field textarea:focus + .inco-co-field__label {
	color: var(--inco-co-primary);
}

.inco-co-field input::placeholder,
.inco-co-field textarea::placeholder {
	color: var(--inco-co-muted);
	opacity: 1;
}

/* Selectul: caret propriu, fiindcă cel nativ nu se poate colora. */
.inco-co-field--select select {
	appearance: none;
	padding-inline-end: 40px;
	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='%2353798A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
}

/* Câmp blocat (email-ul contului, județul unic). */
.inco-co-field.is-locked input,
.inco-co-field.is-locked select {
	background: var(--inco-co-inactive);
	color: var(--inco-co-muted);
	cursor: not-allowed;
}

/* ============================================================ Checkbox */

.inco-check {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-size: 16px;
	color: var(--inco-co-muted);
}

.inco-check 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;
	transition: background-color .15s ease, border-color .15s ease;
}

.inco-check 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-check input[type="checkbox"]:focus-visible {
	outline: none;
	box-shadow: var(--inco-co-shadow-focus);
}

/* ============================================== Transport gratuit (bară) */

.inco-freeship {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px;
	border-radius: var(--inco-co-r-md);
	background: var(--inco-co-tint);
}

.inco-freeship__text {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	line-height: 1.3;
	color: var(--inco-co-ink);
}

.inco-freeship__text svg,
.inco-freeship svg {
	flex: 0 0 auto;
	color: var(--inco-co-primary);
}

.inco-freeship__track {
	height: 6px;
	border-radius: var(--inco-co-r-pill);
	background: var(--inco-co-white);
	overflow: hidden;
}

.inco-freeship__fill {
	height: 100%;
	border-radius: var(--inco-co-r-pill);
	background: var(--inco-co-grad-primary);
	transition: width .35s ease;
}

.inco-freeship.is-reached {
	flex-direction: row;
	align-items: center;
	color: var(--inco-co-success);
	font-weight: 500;
	font-size: 14px;
}

.inco-freeship.is-reached svg {
	color: var(--inco-co-success);
}

/* =============================================================== Toast */

/*
 * Pastila de notificare, din Figma secțiunea „Notifications" → componenta
 * `Notification`, varianta `Type=Error` #18256:11628:
 *
 *   rând · padding 4px 10px 4px 5px · gap 8 · rază 999 · fundal #D73B3B
 *   umbră 0 0 8px rgba(215,59,59,.5)
 *   bulină 24×24, bordură 1px #FBEAEA, rază 999, glifă 16px
 *   text Inter Semi Bold 16 / 1.1 · #FBEAEA
 *
 * ⚠️ Înainte era un dreptunghi de 12/16 cu rază 12 și text de 14px — inventat de
 * mine, fără sursă în machetă. Acum forma e cea din design.
 *
 * `position: fixed` + `z-index` peste panoul lateral (9990) și peste notificarea
 * de adăugare (9992): eroarea „stoc insuficient" trebuie să se vadă exact când
 * panoul e deschis, adică mereu.
 */
.inco-toast {
	position: fixed;
	inset-inline-start: 16px;
	inset-inline-end: 16px;
	/*
	 * Se ridică peste cardul de notificare, dacă e deschis.
	 *
	 * Amândouă stau dreapta jos, deci fără decalaj toastul ar fi apărut exact
	 * peste card. `--inco-toast-offset` e pus de `modules/Notify/assets/js/notify.js`
	 * pe `<html>` cât timp cardul e vizibil, și șters la închidere. Fără modulul
	 * de notificări variabila nu există, iar `var()` cade pe 0 — deci nimic nu
	 * depinde de el.
	 */
	bottom: calc(16px + var(--inco-toast-offset, 0px));
	z-index: 10000;
	display: flex;
	align-items: center;
	gap: 8px;
	width: fit-content;
	max-width: calc(100vw - 32px);
	margin-inline: auto;
	padding: 4px 10px 4px 5px;
	border-radius: var(--inco-co-r-pill);
	background: var(--inco-co-sale);
	color: #FBEAEA;
	font-family: var(--inco-co-font);
	font-weight: 600;
	font-size: 16px;
	line-height: 1.1;
	box-shadow: 0 0 8px rgba(215, 59, 59, 0.5);
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .2s ease, transform .2s ease;
	pointer-events: none;
}

.inco-toast.is-open {
	opacity: 1;
	transform: none;
}

/* Bulina cu glifa, la stânga textului. */
.inco-toast__ic {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	border: 1px solid #FBEAEA;
	border-radius: var(--inco-co-r-pill);
}

.inco-toast__ic svg {
	width: 16px;
	height: 16px;
}

.inco-toast__msg {
	min-width: 0;
}

/*
 * Varianta neutră (ex. „Produs șters din coș").
 *
 * Macheta are doar varianta de eroare. Ca să nu anunțăm o reușită cu roșu de
 * alarmă, mesajele care nu sunt erori folosesc albastrul de brand — aceeași
 * formă, altă culoare. E o extindere a designului, nu o valoare din el.
 */
.inco-toast:not(.inco-toast--error) {
	background: var(--inco-co-primary);
	color: var(--inco-co-bg);
	box-shadow: 0 0 8px rgba(5, 110, 155, 0.5);
}

.inco-toast:not(.inco-toast--error) .inco-toast__ic {
	border-color: var(--inco-co-bg);
}

@media (min-width: 600px) {
	.inco-toast {
		inset-inline-start: auto;
		inset-inline-end: 24px;
		bottom: calc(24px + var(--inco-toast-offset, 0px));
		margin-inline: 0;
	}
}

/* ================================================ Container de pagină

   Comun celor trei ecrane (coș, finalizare, confirmare), deci aici și nu în
   foaia unui modul: modulele pot fi dezactivate independent, iar layoutul de
   bază trebuie să existe în orice combinație.
   ==================================================================== */

.inco-order {
	width: 100%;
	max-width: 1344px;
	margin-inline: auto;
	padding-block: 32px 64px;
}

.inco-order__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	margin-bottom: 40px;
}

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

.inco-order__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--inco-co-gap);
	padding: 64px 24px;
	border: 1px solid var(--inco-co-border);
	border-radius: var(--inco-co-r-lg);
	background: var(--inco-co-white);
	text-align: center;
}

.inco-order__empty svg {
	color: var(--inco-co-border);
}

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

.inco-order__empty p {
	margin: 0;
	max-width: 42ch;
	font-size: 16px;
	line-height: 1.4;
	color: var(--inco-co-muted);
}

/* Câmpuri pe care designul nu le arată, dar WooCommerce le are nevoie. */
.inco-hidden {
	display: none !important;
}

@media (max-width: 860px) {
	.inco-order {
		padding-block: 24px 48px;
	}

	.inco-order__title {
		font-size: 32px;
	}
}

@media (max-width: 560px) {
	.inco-order__head {
		gap: 24px;
		margin-bottom: 32px;
	}

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

	/* Cercuri mai mici, ca etichetele să încapă pe un rând. */
	.inco-steps__num {
		width: 32px;
		height: 32px;
		font-size: 18px;
	}

	.inco-steps__bar {
		margin-top: 15px;
	}

	.inco-steps__label {
		font-size: 12px;
		white-space: normal;
	}
}

/* Utilitar: ascuns vizual, dar citit de cititoarele de ecran. */
.inco-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/*
 * ⚠️ Clasele butoanelor sunt dublate și aici.
 *
 * Un media query NU adaugă specificitate. După ce `.inco-btn` a devenit
 * `.inco-btn.inco-btn` (0,2,0), un `.inco-btn` simplu (0,1,0) scris mai jos nu
 * mai putea anula tranziția — deci preferința de „mai puțină mișcare" a
 * utilizatorului era ignorată exact pe elementele care se animă cel mai mult.
 */
@media (prefers-reduced-motion: reduce) {
	.inco-btn.inco-btn,
	.inco-stepper__btn.inco-stepper__btn,
	.inco-steps__bar,
	.inco-freeship__fill,
	.inco-toast {
		transition: none;
	}
}

/* ================================================ Butonul de coș din header
   Sursa: Figma „Navbar" #18058:6464 → componenta „Cart" #18024:2091.

   Stă în base.css, nu într-o foaie separată: base.css se încarcă deja pe toate
   paginile (coșul lateral e global), iar butonul e în header pe toate paginile.
   O foaie proprie ar fi însemnat un request în plus pe fiecare pagină pentru
   două kilobyte.
   ========================================================================= */

/*
 * `flex: 1 1 auto` lângă `width: 100%` — intenționat amândouă.
 *
 * Bara ajunge într-un container Elementor a cărui direcție nu o controlăm.
 * Pe coloană, `width: 100%` o face lată cât bara de sus; pe rând, lățimea n-are
 * efect și `flex-grow` e cel care umple spațiul rămas. Fără ambele, alinierea
 * la dreapta ieșea corect doar într-una din cele două direcții.
 */
.inco-cartbtn-bar {
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
}

/*
 * Alinierea la dreapta se face din bară, nu din containerul Elementor.
 *
 * Bara de sus a headerului e un container Elementor pe care îl poate reașeza
 * oricine din editor. Dacă alinierea ar depinde de setările lui, butonul ar
 * sări în stânga la prima modificare de layout făcută din interfață.
 */
.inco-cartbtn-bar--end {
	justify-content: flex-end;
}

.inco-cartbtn {
	display: inline-flex;
	align-items: center;
	gap: 24px;
	box-sizing: border-box;
	padding: 0 0 0 24px;
	border: 1px solid var(--inco-co-primary);
	border-radius: var(--inco-co-r);
	background: var(--inco-co-bg);
	color: var(--inco-co-primary);
	font-family: var(--inco-co-font);
	font-weight: 500;
	font-size: 16px;
	line-height: 1;
	text-decoration: none !important;
	/* Colțurile pastilei albastre se taie după raza butonului. */
	overflow: hidden;
	transition: border-color .2s ease, color .2s ease;
}

.inco-cartbtn * {
	box-sizing: border-box;
}

.inco-cartbtn__label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

.inco-cartbtn__items {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.inco-cartbtn__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 46px;
	height: 42px;
	padding: 0 12px;
	border-radius: var(--inco-co-r);
	background: var(--inco-co-primary);
	color: var(--inco-co-white);
	transition: background-color .2s ease;
}

.inco-cartbtn__icon svg {
	width: 24px;
	height: 24px;
}

/*
 * Prețul vine din `WC_Cart::get_cart_total()`, deci împachetat în
 * `.woocommerce-Price-amount` / `<bdi>`. Fără resetarea asta, tema îl stiliza
 * separat de restul etichetei și cele două jumătăți ale textului ieșeau cu
 * mărimi diferite.
 */
.inco-cartbtn .woocommerce-Price-amount,
.inco-cartbtn bdi {
	font: inherit;
	color: inherit;
}

/*
 * Hover: verde, ca în varianta „Hover" din machetă.
 *
 * Macheta trece și textul pe Semi Bold. Nu schimbăm `font-weight`, fiindcă
 * butonul își face lățimea din text: la 600 s-ar fi lățit cu câțiva pixeli,
 * iar tot ce e la stânga lui ar fi tresărit la fiecare trecere cu mouse-ul.
 * `text-shadow` dă aceeași îngroșare optică fără să schimbe metrica — același
 * truc pe care îl folosește deja meniul din header.
 */
.inco-cartbtn:hover,
.inco-cartbtn:focus-visible {
	border-color: var(--inco-co-success);
	color: var(--inco-co-success);
}

.inco-cartbtn:hover .inco-cartbtn__label,
.inco-cartbtn:focus-visible .inco-cartbtn__label {
	text-shadow: 0.3px 0 0 currentColor;
}

/*
 * 🔴 Pastila coșului la hover: se INVERSEAZĂ, nu trece pe verde.
 *
 * Era `--inco-co-success` — verdele `#0B8669`, adus dintr-o altă intenție
 * *(„a mers")*. Pe butonul întreg, care la hover devine albastru plin, ieșea o
 * a treia culoare pe același element.
 *
 * Cerut de Seba: pastila devine albă, iar iconița ia exact albastrul care era
 * fundalul ei în repaus. Așa hover-ul e o inversare a stării de repaus — același
 * lucru pe care îl face și butonul „Adaugă în coș" din card.
 */
.inco-cartbtn:hover .inco-cartbtn__icon,
.inco-cartbtn:focus-visible .inco-cartbtn__icon {
	background: var(--white-bg, #FAFCFF);
	color: var(--green-fill-primary-default, #056E9B);
}

.inco-cartbtn:focus-visible {
	outline: none;
	box-shadow: var(--inco-co-shadow-focus);
}

/* --------------------------------------------------------------- mobil */

/*
 * Sub 768px macheta păstrează doar totalul: „0.00 lei".
 *
 * Numărul rămâne în DOM, doar ascuns — `wc-cart-fragments` îl înlocuiește după
 * fiecare adăugare în coș, și dacă nodul ar lipsi, prima actualizare l-ar
 * pierde definitiv, inclusiv pentru desktop la rotirea tabletei.
 */
@media (max-width: 767px) {
	.inco-cartbtn {
		gap: 12px;
		padding-left: 12px;
		font-family: var(--inco-co-font-alt);
		font-size: 14px;
	}

	.inco-cartbtn__items,
	.inco-cartbtn__sep {
		display: none;
	}

	.inco-cartbtn__icon {
		width: 36px;
		height: 32px;
		border-radius: var(--inco-co-r-sm);
	}

	.inco-cartbtn__icon svg {
		width: 20px;
		height: 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.inco-cartbtn,
	.inco-cartbtn__icon {
		transition: none;
	}
}

/* ═══════════════════════════════ Blindaj împotriva reset.css din temă ══════
   NU simplifica selectorii cu clasa dublată (`.inco-btn.inco-btn`). Sunt așa
   dintr-un motiv măsurat, nu din neglijență.

   Tema Hello Elementor livrează în `assets/css/reset.css`:

     [type=button], [type=submit], button {
         border: 1px solid #c36;  border-radius: 3px;  color: #c36;
         padding: .5rem 1rem;     font-size: 1rem;     font-weight: 400;
         display: inline-block;   text-align: center;  white-space: nowrap;
         transition: all .3s;     background-color: transparent;
     }
     [type=button]:hover, [type=button]:focus,
     [type=submit]:hover, [type=submit]:focus { background-color: #c36; color: #fff }
     [type=button], [type=submit] { width: auto }

   Două lucruri fac asta greu de învins:

   1. `[type=button]` e un selector de ATRIBUT, deci cântărește (0,1,0) — exact
      cât o clasă. `.inco-stepper__btn` nu îl bate, îl EGALEAZĂ.
   2. Foile noastre se înregistrează pe `wp_enqueue_scripts` la prioritate 5,
      ca modulele să poată suprascrie baza. Efectul secundar e că ajung în
      `<head>` ÎNAINTEA temei. La specificitate egală câștigă cine e scris mai
      jos, adică tema.

   Iar starea de hover e mai rea: `[type=button]:hover` cântărește (0,2,0), deci
   bate orice `:hover` scris cu o singură clasă (0,1,1) — indiferent de ordine.
   Simptomul, exact cel raportat: butoane cu bordură zmeurie, colțuri de 3px,
   padding străin, iar după click fundal roz care rămâne, fiindcă `:focus`
   persistă până apeși în altă parte.

   De ce clasa dublată și nu altceva:

   - Ordinea de încărcare NU e suficientă. Ar rezolva starea implicită, dar
     (0,2,0) al hover-ului rămâne peste noi oricum.
   - Un bloc separat de „neutralizare" cu specificitate mare ar bate și regulile
     NOASTRE de hover, care sunt scrise cu o clasă. Ar trebui să duplicăm toate
     stările, adică exact felul de cod care se desincronizează la prima
     modificare.
   - `.inco-sidecart .inco-btn` ar merge, dar `.inco-btn` apare în trei
     rădăcini diferite (coș lateral, pagină de comandă, confirmare), deci
     fiecare regulă ar fi avut nevoie de o listă de trei selectoare.
   - Clasa dublată dă (0,2,0) implicit și (0,2,1) pe hover, nu depinde de niciun
     părinte și rămâne corectă dacă markupul se mută.

   Regulile din `checkout.css` NU au nevoie de tratament: sunt deja prefixate cu
   `.inco-order--checkout`, iar `#place_order` are un id, deci trec de la sine.

   Dacă tema se schimbă și reset.css dispare, selectorii ăștia rămân corecți —
   doar redundanți. Nu îi atinge fără să verifici întâi în browser cu tema
   activă.
   ═════════════════════════════════════════════════════════════════════════ */