/* Gruppo Mercati — headerul redesenat (oct. 2026): bara „Cum comanzi",
   headerul alb, banda verde de meniu și Archivo pe tot site-ul.
   Se încarcă din snippets/sections/header.html.twig, în afara cache-ului.

   Fișierul ajunge în <head>, înaintea CSS-ului din admin și a stilurilor
   puse din scripturi (contorul de palet), deci la specificitate egală ar
   pierde. De aceea regulile headerului pornesc din #header, iar cele mutate
   din vechiul <style> al headerului (breadcrumb) primesc un html în față. */

/* ---------- Archivo pe tot site-ul ---------- */

/* CSS-ul din admin pune, cu !important, var(--font-secundar) pe text și
   var(--font-principal) pe titluri, meniu și butoane, cu valorile Mulish /
   Calibri declarate pe :root. html:root bate :root, deci aceleași reguli
   dau Archivo peste tot, fără a le rescrie. */
html:root {
	--font-principal: var(--gm-font, 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
	--font-secundar: var(--gm-font, 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);

	/* Culorile vechi, folosite fără rezervă de cardul din slider și de bannerele
	   hero; acum indică paleta nouă. */
	--frescia-verde: #006D55;
	--frescia-verde-inchis: #00543E;
	--frescia-portocaliu: #DA4A0C;
	--frescia-portocaliu-inchis: #B83C08;
	--frescia-gri: #8A8D91;
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

/* Subcategoriile din pagina de categorie au Mulish scris direct în admin. */
html .categories__content--grid .category .category__link { font-family: var(--font-principal); }

/* Parolele: platforma scrie parola într-un input text și o ascunde cu fontul
   „disc" (.form-control-disc). CSS-ul din admin pune cu !important
   var(--font-secundar) pe toate inputurile, deci parola apărea în clar.
   Redefinită pe câmp, variabila face ca aceeași regulă să dea fontul disc.
   Ochiul scoate clasa de pe câmp, deci textul revine la Archivo; îndemnul
   rămâne în fontul normal. Ca în pagina de onboarding (#customer_signup). */
html .form-control-disc { --font-secundar: disc; font-family: disc; }
html .form-control-disc::placeholder { font-family: var(--gm-font); }

/* ---------- Bara „Cum comanzi" ---------- */

.gm.gm-topbar {
	background: var(--gm-ink);
	color: #fff;
}

.gm-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 11px;
	max-width: calc(var(--gm-container, 1320px) + 2 * var(--gm-gutter, 28px));
	height: var(--gm-topbar-h, 38px);
	margin: 0 auto;
	padding: 0 var(--gm-gutter);
}

.gm-topbar__title {
	display: inline-flex;
	flex: none;
	align-items: center;
	height: 22px;
	padding: 0 11px;
	border-radius: 999px;
	background: var(--gm-orange);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.gm-topbar__steps { display: flex; align-items: center; }
.gm-topbar__step { display: flex; align-items: center; }

/* Chevronul dintre pași stă în afara pastilei, ca fundalul alb să nu-l
   cuprindă. */
.gm-topbar__step + .gm-topbar__step::before {
	content: "";
	flex: none;
	width: 5px;
	height: 5px;
	margin: 0 12px 0 8px;
	border-top: 1.5px solid rgba(255, 255, 255, .3);
	border-right: 1.5px solid rgba(255, 255, 255, .3);
	transform: rotate(45deg);
}

/* Toți pașii au aceeași pastilă, doar fundalul se schimbă: evidențierea se
   mută fără ca rândul să-și schimbe lățimea. */
.gm-topbar__pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 28px;
	padding: 0 10px 0 3px;
	border-radius: 999px;
	transition: background-color .45s var(--gm-ease), color .45s var(--gm-ease);
}

.gm-topbar__icon {
	display: inline-grid;
	flex: none;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	color: var(--gm-on-dark);
	transition: background-color .45s var(--gm-ease), color .45s var(--gm-ease);
}

.gm-topbar__icon svg {
	width: 12px;
	height: 12px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.1;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.gm-topbar__step:is(.is-done, .is-active) .gm-topbar__icon { background: var(--gm-orange); color: #fff; }

.gm-topbar__text {
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}

.gm-topbar__step.is-active .gm-topbar__pill { background: #fff; color: var(--gm-ink); }

/* ---------- Headerul: fundal, container, înălțime ---------- */

#header.header { background: #fff; color: var(--gm-ink); }

/* Homepage-ul are containerul din design (1320 + 28). Paginile temei
   (categorie, produs, coș, /info) își așază conținutul în .page, de
   1400 cu 18px (12px pe telefon): headerul și footerul iau aceleași
   margini, ca logoul și coșul să stea pe marginile conținutului. */
html:not(.site-index) :is(#header, #footer) { --gm-container: 1364px; --gm-gutter: 18px; }

@media (max-width: 767.98px) {
	html:not(.site-index) :is(#header, #footer) { --gm-gutter: 12px; }
}

#header .header__wrapper,
#header .header__menu {
	max-width: calc(var(--gm-container, 1320px) + 2 * var(--gm-gutter, 28px));
	padding-inline: var(--gm-gutter, 28px);
}

/* Înălțimea rămâne aceeași și când headerul se lipește: tema dă paginii un
   padding-top cât headerul, iar un wrapper mai scund ar fi tras conținutul
   în sus cu diferența, la prima derulare. Se strânge doar logoul. */
#header .header__wrapper {
	align-items: center;
	height: 84px;
	min-height: 0;
}

/* Lipit (position: fixed), headerul urcă cu înălțimea barei de pași: bara
   iese din ecran, dar rămâne în cutia headerului. Tema dă paginii un
   padding-top cât headerul, deci conținutul nu sare cu 38px, cum ar fi
   sărit dacă bara ar fi dispărut. Mesajele de alertă stau deasupra barei;
   tema strânge bara de notificări și mesajele de upsell, nu și alertele,
   care ar fi împins bara înapoi în ecran. */
#header { --gm-topbar-h: 38px; }
#header.header--sticky { top: calc(-1 * var(--gm-topbar-h)); }
#header.header--sticky .alert-messages { max-height: 0; overflow: hidden; }

#header:is(.header--sticky, .header--frescia-scrolled) { box-shadow: 0 8px 24px -14px rgba(0, 33, 28, .28); }

/* ---------- Logo: mare, se strânge la derulare ---------- */

#header .header__logo { flex: 0 1 auto; min-width: 0; height: auto; margin-right: 22px; padding-left: 0; }
#header .header__logo:hover { text-decoration: none; }

#header .header__logo-image {
	display: block;
	max-width: min(100%, 13rem);
	max-height: 56px;
	padding: 0;
	transition: max-height .25s ease, width .25s ease, height .25s ease, transform .25s ease;
}

#header .header__logo:hover .header__logo-image { transform: scale(1.03); }
#header:is(.header--sticky, .header--frescia-scrolled) .header__logo-image { max-height: 48px; }

/* De la 992px, logoul vertical din design (steaua deasupra numelui, ca în
   footer), cu mărime fixă: locul lui e rezervat înainte să se încarce
   imaginea, deci căutarea nu se mută. contain păstrează proporția dacă
   fișierul se schimbă. */
@media (min-width: 992px) {
	#header .header__logo-image { width: 71px; height: 64px; max-width: none; max-height: none; object-fit: contain; }
	#header:is(.header--sticky, .header--frescia-scrolled) .header__logo-image { width: 60px; height: 54px; max-height: none; }
}

/* ---------- Căutarea: pastilă crem, buton portocaliu „Caută" ---------- */

#header .search-inline {
	flex: 1 1 auto;
	height: 48px;
	margin: 0 24px 0 0;
}

#header .search-inline__wrapper {
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--gm-line-2);
	border-radius: 999px;
	background: var(--gm-bg);
	transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

#header .search-inline__wrapper:hover { border-color: var(--gm-line); }

#header .search-inline__wrapper:focus-within {
	border-color: var(--gm-orange);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(218, 74, 12, .14);
}

/* Lupa din stânga e desenată din CSS: inputul rămâne al temei. */
#header .search-inline__input.form-control {
	height: 100%;
	padding: 0 12px 0 46px;
	border: 0;
	background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C5F63' stroke-width='2' stroke-linecap='round'%3e%3ccircle cx='11' cy='11' r='7'/%3e%3cpath d='m20 20-3.6-3.6'/%3e%3c/svg%3e") no-repeat 19px center / 17px;
	color: var(--gm-ink);
	font-size: 15px;
	box-shadow: none;
}

#header .search-inline__input.form-control::placeholder { color: var(--gm-text-2); opacity: 1; }

#header .search-inline__button.btn {
	flex: none;
	align-self: center;
	width: auto;
	height: 34px;
	margin: 0 7px 0 0;
	padding: 0 18px;
	border: 0;
	border-radius: 999px !important;
	background: var(--gm-orange);
	color: #fff;
	font-size: 14px;
	line-height: 1;
	letter-spacing: -.005em;
	box-shadow: none;
	transition: background-color .15s ease;
}

#header .search-inline__button.btn:hover,
#header .search-inline__button.btn:focus-visible { background: var(--gm-rust); color: #fff; }
#header .search-inline__button.btn:focus-visible { outline: 2px solid var(--gm-orange); outline-offset: 2px; }

/* Căutarea de pe mobil se deschide într-un sertar al temei, pus în <body>
   (în afara #header): aceeași pastilă ca pe desktop, cu butonul rotund. */
html .search-drawer .search__wrapper {
	height: 48px;
	overflow: hidden;
	border: 1px solid var(--gm-line-2);
	border-radius: 999px;
	background: var(--gm-bg);
	transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

html .search-drawer .search__wrapper:focus-within {
	border-color: var(--gm-orange);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(218, 74, 12, .14);
}

/* 16px: sub această mărime, iOS mărește pagina la focus. */
html .search-drawer .search__input.form-control {
	height: 100%;
	padding: 0 12px 0 20px;
	border: 0;
	background: transparent;
	color: var(--gm-ink);
	font-size: 16px;
	box-shadow: none;
}

html .search-drawer .search__input.form-control::placeholder { color: var(--gm-text-2); opacity: 1; }

html .search-drawer .search__button.btn {
	display: grid;
	flex: none;
	align-self: center;
	place-items: center;
	width: 38px;
	height: 38px;
	margin: 0 4px 0 0;
	padding: 0;
	border: 0;
	border-radius: 50% !important;
	background: var(--gm-orange);
	color: #fff;
	box-shadow: none;
}

html .search-drawer .search__button.btn:is(:hover, :focus-visible) { background: var(--gm-rust); color: #fff; }

html .search-drawer .gm-hicon {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Sugestiile căutării: pluginul temei (mp-autocomplete) le pune în <body>,
   sub câmp. Același cadru rotunjit ca pastila. */
html body > .ss-results {
	margin-top: 6px;
	border-color: var(--gm-line-2);
	border-radius: 16px;
	box-shadow: 0 24px 48px -16px rgba(0, 33, 28, .28);
}

/* ---------- Iconițele din dreapta ---------- */

#header .header__actions { flex: none; gap: 4px; margin-right: 0; }
#header .header__actions > * { margin-left: 0; }

#header .header__action {
	min-width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 12px;
	color: var(--gm-green);
	transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

/* Căutarea de pe mobil și comutatorul € sunt butoane: fără cadrul implicit. */
#header button.header__action { border: 0; background: none; font: inherit; cursor: pointer; }

#header .header__action:hover,
#header .header__action:focus-visible { color: var(--gm-orange); background-color: var(--gm-mint); }
#header .header__action:focus-visible { outline: 2px solid var(--gm-orange); outline-offset: 2px; }

#header .gm-hicon {
	display: block;
	width: 21px;
	height: 21px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* În design inima e mai mică decât omulețul și coșul. */
#header .header__action--favorites .gm-hicon { width: 18px; height: 18px; }

/* Tema ascunde contul sub 768px. Îl arătăm pe toate ecranele. */
#header .header__action--user { display: flex; }

/* Coșul: pătrat mentă, cu bulina portocalie. */
#header .header__action--cart {
	width: 44px;
	height: 44px;
	margin-left: 6px;
	border-radius: 12px;
	background: var(--gm-mint);
}

#header .header__action--cart:hover,
#header .header__action--cart:focus-visible { background: #E1EEE8; }

/* Bulina de coș și favorite. Tema îi dă o lățime fixă (1.35rem), în care
   „128" nu încape; aici crește spre stânga după număr, ca în design.
   data-gm-count e numărul cu punct la mii („2.265"), scris de scriptul de
   la sfârșitul headerului. */
#header .header__actions [data-count]::after {
	top: -6px;
	right: -6px;
	width: auto;
	min-width: 16px;
	height: 16px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--gm-orange);
	box-shadow: 0 0 0 2px #fff;
	color: #fff;
	font-family: inherit;
	font-size: 10.5px;
	font-weight: 800;
	line-height: 16px;
	transform: none;
}

#header .header__actions [data-gm-count]::after { content: attr(data-gm-count); }
#header .header__actions [data-count="0"]::after { display: none; }

/* Firma clientului logat, lângă iconița de cont (de la 1200px). */
#header .header__account-company {
	display: none;
	min-width: 0;
	max-width: 11rem;
	flex-direction: column;
	text-align: left;
	line-height: 1.1;
}

#header .header__account-company-caption {
	margin-bottom: 3px;
	color: var(--gm-text-2);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

#header .header__account-company-name {
	display: block;
	overflow: hidden;
	color: var(--gm-ink);
	font-size: 13px;
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (min-width: 1200px) {
	#header .header__action--company { gap: 8px; padding: 0 10px 0 6px; }
	#header .header__account-company { display: flex; }
}

/* Comutatorul leu / euro, pus de scriptul din header: preia .header__action,
   deci culoarea și hoverul vin de sus. */
#header .frescia-eur-toggle:hover { background: var(--gm-mint); }
#header .frescia-eur-toggle[hidden] { display: none; }

#header .frescia-eur-toggle__code {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	height: 26px;
	padding: 0 7px;
	border: 1.5px solid currentColor;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: .02em;
}

/* Pastila de ocupare a paletului. Markupul și stilul de bază vin din scriptul
   de admin (src/widget/12*, 13-header.js), care pune <style>-ul lui la
   sfârșitul lui <head>; #header îl bate fără !important. Eticheta „Ocupare
   palet" rămâne pentru cititoarele de ecran; valoarea scrisă („4 paleți +
   1,6%") spune deja ce măsoară, iar bulina cu paleții plini ar repeta-o.
   Sub 992px scriptul lasă doar inelul, cu procentul în el și bulina cu
   paleții plini; aici primește doar culorile noi. */
#header .frescia-palet-mini { color: var(--gm-orange); }
#header .frescia-palet-mini__ring { background: conic-gradient(var(--gm-orange) calc(var(--fp-fill, 0) * 360deg), #EEDDD3 0deg); }

#header .frescia-palet-mini__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

@media (min-width: 992px) {
	#header .header__action.frescia-palet-mini {
		gap: 8px;
		height: 48px;
		margin-left: 8px;
		padding: 0 14px 0 4px;
		border: 1px solid #F3DCD0;
		border-radius: 999px;
		background: #FFF6F1;
	}

	#header .header__action.frescia-palet-mini:hover,
	#header .header__action.frescia-palet-mini:focus-visible { border-color: var(--gm-peach); background: var(--gm-blush); color: var(--gm-orange); }

	#header .frescia-palet-mini__ring { width: 38px; height: 38px; }
	#header .frescia-palet-mini__ring::after { inset: 5px; }
	#header .frescia-palet-mini__count { display: none; }

	/* Paletul cu baxuri din design, în locul celui din script (o cutie goală,
	   care la 16px se citea ca un laptop). Mască, ca să preia culoarea. */
	#header .frescia-palet-mini__icon { display: none; }
	#header .frescia-palet-mini__ring::before {
		content: "";
		position: relative;
		z-index: 1;
		width: 16px;
		height: 16px;
		background: currentColor;
		-webkit-mask: var(--gm-palet-icon) center / contain no-repeat;
		mask: var(--gm-palet-icon) center / contain no-repeat;
		--gm-palet-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='5' y='3' width='14' height='11' rx='1'/%3e%3cpath d='M12 3v11M5 8.5h14M3 17.5h18M5 17.5V21M12 17.5V21M19 17.5V21'/%3e%3c/svg%3e");
	}

	#header .frescia-palet-mini__note {
		color: var(--gm-orange);
		font-size: 14px;
		font-weight: 800;
		letter-spacing: -.005em;
	}
}

/* ---------- Banda verde de meniu ---------- */

#header .header__menu-wrapper { background: var(--gm-green); box-shadow: none; }
#header .header__menu,
#header .header__menu-list { min-height: 44px; }
#header .header__menu-list { flex-wrap: nowrap; margin: 0; }

#header .header__menu-item > a {
	gap: 8px;
	height: 44px;
	padding: 0 16px;
	color: #fff;
	font-size: 13.5px;
	font-weight: 800 !important;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color .15s ease;
}

#header .header__menu-item > a:hover,
#header .header__menu-item:hover > a { background: rgba(0, 0, 0, .14); color: #fff; }
#header .header__menu-item > a:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

#header .gm-nav__item--catalog > a { background: var(--gm-green-deep); }
#header .gm-nav__item--catalog:hover > a,
#header .gm-nav__item--catalog > a:hover { background: #00402F; }
#header .gm-nav__item--offers > a { background: var(--gm-orange); }
#header .gm-nav__item--offers:hover > a,
#header .gm-nav__item--offers > a:hover { background: var(--gm-rust); }

/* Linii subțiri doar între intrările simple, ca în design. */
#header .gm-nav__item--plain + .gm-nav__item--plain > a { border-left: 1px solid rgba(255, 255, 255, .1); }

/* Pagina curentă: o linie portocalie deschis la baza intrării.
   aria-current îl pune scriptul de la sfârșitul headerului. */
#header .header__menu-item > a[aria-current="page"] { text-decoration: none; box-shadow: inset 0 -3px 0 var(--gm-orange-light); }
#header .gm-nav__item--offers > a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--gm-peach); }

#header .gm-nav__icon {
	width: 16px;
	height: 16px;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

#header .gm-nav__item--catalog .gm-nav__icon { width: 18px; height: 18px; }

/* ---------- Mega-meniul de la „Catalog" ---------- */

/* Poziționarea rămâne a temei; aici doar lățimea, cadrul și culorile noi.
   Panoul începe sub „Catalog" și se oprește la marginea conținutului.
   Iconițele rotunde vin din CSS-ul din admin (menu-icons.css). */
#header .header__menu-wide { max-width: min(var(--gm-container, 1320px), 100% - 2 * var(--gm-gutter, 28px)); }

#header .header__menu-content--horizontal {
	padding: 22px 26px 26px;
	border-radius: 0 0 20px 20px;
	background: #fff;
	box-shadow: 0 24px 48px -16px rgba(0, 33, 28, .28);
	font-family: var(--font-principal);
}

#header .header__menu-content--horizontal .menu-horizontal .menu-horizontal__link--image {
	border-color: var(--gm-line-2);
	background: var(--gm-cream);
}

#header .header__menu-content--horizontal .menu-horizontal .menu-horizontal__item:hover .menu-horizontal__link--image {
	border-color: var(--gm-green);
	background: var(--gm-cream);
	box-shadow: 0 14px 28px rgba(0, 109, 85, .18);
}

/* Archivo e mai lat decât fontul vechi: la ~1000px, „Articole pentru casă"
   are nevoie de trei rânduri, iar tema taie titlul după două. */
#header .header__menu-content--horizontal .menu-horizontal .menu-horizontal__link--title {
	-webkit-line-clamp: 3;
	color: var(--gm-ink);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .02em;
}

#header .header__menu-content--horizontal .menu-horizontal .menu-horizontal__item:hover .menu-horizontal__link--title { color: var(--gm-green); }

/* ---------- Tabletă și mobil (sub 992px) ---------- */

/* Butonul de meniu mobil, în verdele de brand. */
#header .header__menu-toggle-line,
#header .header__menu-toggle-line::before,
#header .header__menu-toggle-line::after { background-color: var(--gm-green); }

/* Clientul și ocuparea împart o bandă compactă, sub antet, ca element de flux:
   în interiorul wrapperului ar fi trecut peste logo. */
#header .frescia-mobile-status { display: none; }

@media (max-width: 991.98px) {
	#header .header__wrapper { gap: 12px; height: 68px; }

	#header .header__menu-toggle { flex: none; margin-right: 2px; }
	#header .header__logo { margin-right: auto; }
	#header .header__logo-image { max-width: min(100%, 9.5rem); max-height: 46px; }
	#header:is(.header--sticky, .header--frescia-scrolled) .header__logo-image { max-height: 38px; }

	#header .header__actions { gap: 2px; }
	#header .header__action { min-width: 38px; height: 38px; }
	#header .gm-hicon { width: 22px; height: 22px; }
	#header .header__action--cart { width: 40px; height: 40px; margin-left: 2px; border-radius: 12px; }

	#header .frescia-mobile-status {
		display: flex;
		min-height: 30px;
		margin: 0 var(--gm-gutter, 28px) 10px;
		overflow: hidden;
		border: 1px solid var(--gm-line-2);
		border-radius: 999px;
		background: var(--gm-cream);
	}

	#header .frescia-mobile-status__client,
	#header .frescia-mobile-status__pallet {
		display: flex;
		min-width: 0;
		align-items: center;
		gap: 6px;
		padding: 0 12px;
		color: var(--gm-ink);
		font-size: 12px;
		line-height: 1;
		text-decoration: none;
	}

	#header .frescia-mobile-status__client { flex: 1 1 auto; }

	/* Ocuparea nu se strânge: e cifra pentru care există banda. */
	#header .frescia-mobile-status__pallet {
		flex: 0 0 auto;
		border-left: 1px solid var(--gm-line-2);
		background: #FFF6F1;
	}

	#header .frescia-mobile-status__pallet[hidden] { display: none; }

	#header .frescia-mobile-status__caption {
		flex: 0 0 auto;
		color: var(--gm-text-2);
		font-size: 10px;
		font-weight: 700;
		letter-spacing: .08em;
		text-transform: uppercase;
	}

	#header .frescia-mobile-status__name {
		min-width: 0;
		overflow: hidden;
		font-weight: 700;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	#header .frescia-mobile-status__value { color: var(--gm-orange); font-weight: 800; white-space: nowrap; }

	#header.header--mobile-status .header__action--user,
	#header.header--mobile-status .frescia-palet-mini { display: none !important; }
}

@media (max-width: 575.98px) {
	#header .header__wrapper { gap: 10px; height: 62px; }
	#header .header__logo-image { max-width: min(100%, 8.5rem); max-height: 42px; }
	#header .header__actions { gap: 0; }
	#header .header__action { min-width: 36px; height: 36px; }
	#header .gm-hicon { width: 21px; height: 21px; }
	#header .header__action--cart { width: 38px; height: 38px; margin-left: 4px; }
}

/* Bara de pași pe mobil: pașii rămân doar iconițe, iar cel evidențiat își
   arată și numele, pe o lățime fixă — rândul centrat nu se mișcă atunci când
   evidențierea urcă de la „Coș" la „Verificare". */
@media (max-width: 991.98px) {
	#header { --gm-topbar-h: 36px; }
	.gm-topbar__inner { gap: 6px; }
	.gm-topbar__step + .gm-topbar__step::before { display: none; }
	.gm-topbar__steps { gap: 2px; }
	.gm-topbar__pill { gap: 0; padding: 0 3px; }
	.gm-topbar__text {
		width: 0;
		overflow: hidden;
		transition: width .45s var(--gm-ease), margin .45s var(--gm-ease);
	}
	.gm-topbar__step.is-active .gm-topbar__pill { padding-right: 8px; }
	.gm-topbar__step.is-active .gm-topbar__text { width: 62px; margin-left: 6px; }
}

@media (max-width: 399.98px) {
	.gm-topbar__title { height: 20px; padding: 0 8px; font-size: 10px; }
}

@media (max-width: 339.98px) {
	.gm-topbar__title { display: none; }
}

/* ---------- Breadcrumb ---------- */

/* O bandă discretă, linkuri pe verdele de brand, pagina curentă în gri închis,
   chevron verde în locul celui negru al temei. Apare pe orice pagină de
   catalog (.page__aside-breadcrumb) sau de produs (.aside-head), iar șablonul
   care îl scrie nu e personalizat. */
html :is(.aside-head, .page__aside-breadcrumb) .breadcrumb {
	display: inline-flex;
	max-width: 100%;
	align-items: center;
	gap: 2px;
	padding: 6px 14px;
	border: 1px solid rgba(0, 109, 85, .16);
	border-radius: 999px;
	background: linear-gradient(90deg, rgba(0, 109, 85, .07), rgba(255, 255, 255, .9));
	font-size: 13px;
	line-height: 1.3;
}

html :is(.aside-head, .page__aside-breadcrumb) .breadcrumb__item > a {
	padding: 3px 7px;
	border-radius: 6px;
	color: var(--gm-green);
	font-weight: 600;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}

html :is(.aside-head, .page__aside-breadcrumb) .breadcrumb__item > a:hover,
html :is(.aside-head, .page__aside-breadcrumb) .breadcrumb__item > a:focus-visible {
	background: rgba(0, 109, 85, .12);
	color: var(--gm-green-deep);
}

html :is(.aside-head, .page__aside-breadcrumb) .breadcrumb__item:last-child span {
	padding: 3px 7px;
	color: var(--gm-text);
	font-weight: 700;
}

html :is(.aside-head, .page__aside-breadcrumb) .breadcrumb__item:not(:last-of-type)::after {
	width: 8px;
	height: 10px;
	margin: 0 4px;
	background-image: url("data:image/svg+xml;utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23006D55'%3E%3Cpath d='M140.253,464.489l194.628-194.628c8.974-8.974,9.16-18.562,0-27.722L140.253,47.511c0,0-11.919-11.493-0.715-22.365 c10.618-10.304,22.203,1.427,22.203,1.427l194.353,194.353c28.134,28.134,28.312,41.836,0,70.149L161.741,485.428 c0,0-11.586,11.731-22.203,1.427C128.335,475.982,140.253,464.489,140.253,464.489z'/%3E%3C/svg%3E");
	opacity: .8;
}

@media (max-width: 575.98px) {
	html :is(.aside-head, .page__aside-breadcrumb) .breadcrumb {
		display: flex;
		overflow-x: auto;
		border-radius: 12px;
		scrollbar-width: none;
	}
	html :is(.aside-head, .page__aside-breadcrumb) .breadcrumb::-webkit-scrollbar { display: none; }
}

/* ---------- Mișcare redusă ---------- */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	#header .header__logo-image,
	#header .header__menu-item > a,
	#header .search-inline__wrapper,
	.gm-topbar__pill,
	.gm-topbar__icon,
	.gm-topbar__text,
	html :is(.aside-head, .page__aside-breadcrumb) .breadcrumb__item > a { transition: none; }
	#header .header__logo:hover .header__logo-image { transform: none; }
}