/* Fereastra de cautare.

   Aceeasi geometrie ca widgetul de pe comenzi.vitamix.ro: panou alb centrat,
   camp mare cu linie dedesubt, filtre pe stanga, grila de carduri pe dreapta.
   Verdele de accent e cel din widgetul original, tinut aici intr-o variabila
   ca sa fie o singura linie de schimbat. */

:root { --cauta-verde: #3E5C00; }

.vtmx-ov {
	position: fixed; inset: 0; z-index: 100000; display: none;
	background: rgba(20,20,20,.45); -webkit-overflow-scrolling: touch; font-family: inherit;
}
.vtmx-ov.vtmx-on { display: block; }
.vtmx-panel {
	position: absolute; left: 50%; top: 24px; transform: translateX(-50%);
	width: min(1240px, 96vw); height: calc(100vh - 48px);
	background: #fff; border-radius: 14px; box-shadow: 0 24px 70px rgba(0,0,0,.3);
	display: flex; flex-direction: column; overflow: hidden;
}

/* ---- antetul ferestrei ---- */
.vtmx-head {
	display: flex; align-items: center; gap: 12px;
	padding: 14px 18px; border-bottom: 1px solid #eee; flex-wrap: wrap;
}
.vtmx-back { border: 0; background: none; font-size: 22px; line-height: 1; color: #333; cursor: pointer; padding: 4px 8px; }
.vtmx-inwrap { position: relative; flex: 1 1 320px; min-width: 180px; }
/* modificat de Claude in 02.08.2026 18:55 -- campul ferestrei ramane o linie, nu o
   caseta: rescrie explicit chenarul, rotunjirea si inelul de focalizare pe care le
   pune acum regula comuna de controale din app.css */
.vtmx-in {
	width: 100%; border: 0; border-bottom: 2px solid #e3e3e3; border-radius: 0; font-size: 20px;
	padding: 6px 30px 6px 4px; outline: none; box-shadow: none; background: transparent; color: #222;
}
.vtmx-in:hover { border-bottom-color: #cfcfcf; }
.vtmx-in:focus { border-bottom-color: var(--cauta-verde); box-shadow: none; }
.vtmx-inclear {
	position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
	border: 0; background: none; color: #aaa; font-size: 18px; cursor: pointer; display: none;
}
.vtmx-inclear.on { display: block; }
.vtmx-reset {
	border: 1px solid #ddd; background: #fff; border-radius: 8px; padding: 7px 14px;
	cursor: pointer; color: #555; font-size: 13px; display: flex; align-items: center; gap: 6px;
}
.vtmx-reset:hover { background: #f6f6f6; }
/* modificat de Claude in 02.08.2026 19:05 -- ordonarea e un <select>, iar regula
   comuna din app.css ii scoate acum sageata browserului (`appearance: none`) ca sa
   puna una desenata de noi. Fondul verde de aici stergea si sageata aceea, deci
   butonul ramanea fara niciun semn ca se deschide: si-o poarta pe a lui, alba pe
   verde. `background-color`, nu scurtatura `background` -- altfel se sterge din nou. */
.vtmx-sort {
	width: auto;   /* regula comuna intinde controalele pe toata latimea; aici e un buton in bara */
	border: 1px solid var(--cauta-verde); background-color: var(--cauta-verde); color: #fff;
	border-radius: 8px; padding: 8px 30px 8px 12px; cursor: pointer; font-size: 13px; font-weight: 600;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.75 6 6.25l5-4.5' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 11px center; background-size: 10px 7px;
}
.vtmx-count { color: #777; font-size: 13px; white-space: nowrap; }
.vtmx-filterbtn {
	display: none; border: 1px solid var(--cauta-verde); background: #fff; color: var(--cauta-verde);
	border-radius: 8px; padding: 7px 14px; cursor: pointer; font-size: 13px; font-weight: 600;
	align-items: center; gap: 6px;
}
.vtmx-x { border: 0; background: none; font-size: 26px; line-height: 1; color: #888; cursor: pointer; padding: 2px 6px; margin-left: auto; }
.vtmx-head svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- corp: filtre + rezultate ---- */
.vtmx-body { flex: 1 1 auto; display: flex; min-height: 0; }
.vtmx-side { flex: 0 0 250px; border-right: 1px solid #eee; overflow-y: auto; padding: 18px; }
.vtmx-main { flex: 1 1 auto; overflow-y: auto; padding: 18px 20px; }
.vtmx-fh { font-size: 13px; font-weight: 700; color: #333; letter-spacing: .04em; margin: 0 0 12px; }
.vtmx-facet { margin-bottom: 26px; }

/* interval de pret */
.vtmx-pfields { display: flex; gap: 10px; margin-bottom: 14px; }
/* modificat de Claude in 02.08.2026 18:55 -- casetele de pret sunt de fapt o singura
   caseta cu "lei" scris in ea, deci chenarul si inelul de focalizare stau pe invelis,
   nu pe input. Chenarul si rotunjirea sunt cele comune din app.css, ca sa semene cu
   restul casetelor din site; inputul dinauntru si le scoate pe ale lui. */
.vtmx-pf {
	flex: 1; display: flex; align-items: center; border: 1px solid var(--chenar); border-radius: var(--radius);
	padding: 6px 8px; gap: 4px; font-size: 13px; color: #333; min-width: 0;
	transition: border-color .15s, box-shadow .15s;
}
.vtmx-pf:hover { border-color: var(--chenar-sus); }
.vtmx-pf:focus-within { border-color: var(--verde); box-shadow: 0 0 0 3px var(--inel); }
.vtmx-pf span { color: #999; white-space: nowrap; flex-shrink: 0; }
.vtmx-pf input {
	border: 0; border-radius: 0; outline: none; box-shadow: none; padding: 0;
	width: 100%; min-width: 0; font-size: 13px; color: #222; background: transparent;
}
.vtmx-pf input:hover, .vtmx-pf input:focus { border: 0; box-shadow: none; }
.vtmx-range { position: relative; height: 28px; }
.vtmx-rtrack { position: absolute; top: 12px; left: 0; right: 0; height: 4px; background: #e3e3e3; border-radius: 3px; }
.vtmx-rfill { position: absolute; top: 12px; height: 4px; background: #111; border-radius: 3px; }
.vtmx-range input[type=range] {
	position: absolute; top: 0; left: 0; width: 100%; height: 28px; margin: 0;
	-webkit-appearance: none; appearance: none; background: none; pointer-events: none;
}
.vtmx-range input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%;
	background: #fff; border: 2px solid #111; cursor: pointer; pointer-events: auto; margin-top: 0;
}
.vtmx-range input[type=range]::-moz-range-thumb {
	width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid #111;
	cursor: pointer; pointer-events: auto;
}

/* categorii */
.vtmx-cat { display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: 14px; color: #333; cursor: pointer; }
.vtmx-cat input { width: 16px; height: 16px; accent-color: var(--cauta-verde); cursor: pointer; }
.vtmx-cat .vtmx-cn { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vtmx-cat .vtmx-cc { color: #999; font-size: 13px; }
.vtmx-more { border: 0; background: none; color: var(--cauta-verde); font-size: 13px; cursor: pointer; padding: 6px 0; text-decoration: underline; }
.vtmx-nimic { color: #aaa; font-size: 13px; }

/* grila si cardul */
.vtmx-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 560px) { .vtmx-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 720px) { .vtmx-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 912px) { .vtmx-grid { grid-template-columns: repeat(5, 1fr); gap: 16px; } }
.vtmx-card {
	display: flex; flex-direction: column; text-decoration: none; color: #222;
	border: 1px solid #f0f0f0; border-radius: 10px; padding: 12px; transition: box-shadow .15s;
}
.vtmx-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.10); text-decoration: none; }
.vtmx-cimg { width: 100%; aspect-ratio: 1/1; object-fit: contain; background: #fff; margin-bottom: 10px; }
.vtmx-cbrand { font-size: 12px; color: #8a8a8a; margin-bottom: 2px; }
.vtmx-cname {
	font-size: 13px; line-height: 1.3; color: #222; display: -webkit-box; -webkit-line-clamp: 3;
	-webkit-box-orient: vertical; overflow: hidden; min-height: 50px; margin-bottom: 8px;
}
.vtmx-cname b { color: var(--cauta-verde); }
.vtmx-cprice { font-size: 16px; font-weight: 700; color: #222; margin-top: auto; }
.vtmx-cprice s { font-size: 12.5px; font-weight: 400; color: #999; margin-left: 6px; }
.vtmx-cstock { font-size: 12px; color: var(--cauta-verde); margin-top: 6px; font-weight: 600; display: flex; align-items: center; gap: 4px; }
.vtmx-cstock svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* modificat de Claude in 01.08.2026 20:53 -- produsele epuizate se vad abia de
   cand fereastra arata tot setul, nu doar primele 300 */
.vtmx-cstock--nu { color: #b0752a; font-weight: 500; }
.vtmx-card--epuizat .vtmx-cimg { opacity: .55; }

.vtmx-empty { padding: 40px 12px; text-align: center; color: #888; font-size: 15px; grid-column: 1/-1; }
.vtmx-empty b { color: #444; }
.vtmx-ai { display: block; margin-top: 10px; font-size: 13px; font-style: italic; color: #aaa; }

/* modificat de Claude in 01.08.2026 20:53 -- link spre pagina de cautare, cand
   setul a fost taiat la plafon si mai sunt rezultate dincolo de el */
.vtmx-toate { display: block; padding: 18px 12px; text-align: center; font-size: 14px; font-weight: 600; color: var(--cauta-verde); }
.vtmx-toate:hover { text-decoration: underline; }

.vtmx-sentinel { height: 1px; }

/* ---- telefon ---- */
@media (max-width: 860px) {
	.vtmx-panel { top: 0; height: 100dvh; width: 100vw; border-radius: 0; transform: none; left: 0; }
	.vtmx-head { padding: 12px 12px; gap: 6px; }
	.vtmx-in { font-size: 17px; }
	.vtmx-count { order: 5; flex-basis: 100%; }
	.vtmx-filterbtn { display: inline-flex; order: 1; }
	.vtmx-reset { order: 2; }
	.vtmx-sort { order: 3; }
	.vtmx-x { order: 4; }
	.vtmx-reset, .vtmx-filterbtn, .vtmx-sort { padding: 5px 9px; font-size: 12px; border-radius: 7px; gap: 4px; }
	/* modificat de Claude in 02.08.2026 19:05 -- pe telefon butonul e alb, deci sageata
	   lui trece pe verde; padding-ul de deasupra ii ia locul din dreapta, il punem la loc */
	.vtmx-sort {
		background-color: #fff; color: var(--cauta-verde); border: 1px solid var(--cauta-verde);
		padding-right: 25px; background-position: right 8px center;
		background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.75 6 6.25l5-4.5' fill='none' stroke='%233E5C00' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	}
	.vtmx-back { padding: 2px 4px; font-size: 20px; }
	.vtmx-x { font-size: 22px; padding: 0 4px; }

	/* filtrele urca de jos, ca o foaie */
	.vtmx-side {
		position: absolute; left: 0; right: 0; bottom: 0; top: auto; flex: none; height: 78vh;
		background: #fff; border-right: 0; border-radius: 16px 16px 0 0;
		box-shadow: 0 -10px 40px rgba(0,0,0,.25); transform: translateY(102%);
		transition: transform .25s ease; z-index: 3; padding-top: 26px;
	}
	.vtmx-panel.vtmx-filters-on .vtmx-side { transform: translateY(0); }
	.vtmx-side::before {
		content: ""; position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
		width: 44px; height: 5px; border-radius: 3px; background: #ddd;
	}
	.vtmx-sideclose { display: block; position: absolute; top: 8px; right: 12px; border: 0; background: none; font-size: 24px; color: #999; cursor: pointer; }
	.vtmx-cname { min-height: 0; }
}
@media (min-width: 861px) { .vtmx-sideclose { display: none; } }