/* eco 2026-09-12 - banda de miniaturi in stanga pozei mari.
   Fara sageti: miniaturile se micsoreaza singure cat sa incapa toate
   pe exact inaltimea pozei mari. */

.eco-vgal { position: relative; }
.eco-vgal ul { list-style: none; margin: 0; padding: 0; }
.eco-vgal .eco-vgal-viewport { position: relative; overflow: hidden; }
.eco-vgal .eco-vgal-track { transition: transform .25s ease; will-change: transform; }

.eco-vgal li {
	float: none !important; width: 100% !important;
	margin: 0 0 4px 0 !important; padding: 0 !important;
	list-style: none; line-height: 0; font-size: 0;
}
.eco-vgal li:last-child { margin-bottom: 0 !important; }
.eco-vgal li p { margin: 0 !important; padding: 0 !important; line-height: 0 !important; font-size: 0 !important; }
.eco-vgal li a {
	display: block; margin: 0 0 0 auto; line-height: 0; font-size: 0;
	border: 1px solid #e3e3e3; border-radius: 3px; overflow: hidden;
	background: #fff; transition: border-color .15s ease;
}
.eco-vgal li a:hover { border-color: #b9b9b9; }
.eco-vgal li a img {
	display: block; width: 100%; height: 100%; object-fit: cover;
	/* pozele sunt fotografiate pe fundal alb; un zoom mic taie din marginea alba */
	transform: scale(1.14); transform-origin: center;
}
.eco-vgal li.eco-active a { border-color: #f5a623; box-shadow: 0 0 0 1px #f5a623; }
.eco-vgal ul li { display: block !important; }  /* dupa ce intra JS-ul, banda e derulabila, nu taiata */

/* desktop: coloana miniaturilor destul de lata cat tile-urile sa umple inaltimea pozei mari */
@media (min-width: 992px) {
	.popup-gallery > .row { display: flex; align-items: flex-start; }
	.popup-gallery > .row > .col-sm-2  { flex: 0 0 98px; width: 98px; padding-left: 0; padding-right: 3px; }
	.popup-gallery > .row > .col-sm-10 { flex: 1 1 auto; width: auto; padding-left: 0; }
}

/* starea de pornire, inainte sa intre JS-ul: fara saritura la refresh.
   Se leaga de .thumbnails-left (venit din server), nu de .eco-vgal (adaugat de JS). */
@media (min-width: 992px) {
	.thumbnails-left ul li:nth-child(n+7) { display: none; }
	.thumbnails-left ul li { float: none; width: 100%; margin: 0 0 4px 0; padding: 0; line-height: 0; font-size: 0; }
	.thumbnails-left ul li p { margin: 0; padding: 0; line-height: 0; font-size: 0; }
	.thumbnails-left ul li a { display: block; width: 76px; height: 76px; margin: 0 0 0 auto; overflow: hidden; }
	.thumbnails-left ul li a img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); }
}

/* bara fixa "Suna / Adauga in cos" si pe tableta, iPad, Galaxy Fold deschis si iPad Pro.
   Tema o ascundea de la 768px in sus; acolo bara de iconite de jos nu exista,
   deci scoatem si marginea de 60px lasata pentru ea. */
@media (min-width: 768px) and (max-width: 1024px) {
	.call-div { display: block !important; margin-bottom: 0 !important; }
	.call-div:after { content: ""; display: table; clear: both; }
}

/* bara cu numele produsului: fundal propriu, ca sa nu se amestece cu pagina.
   Pozitia (sub bannerul fix) o pune eco-gallery.js, ca inaltimea bannerului variaza. */
.header_menu.sticky-header.eco-sub-banner {
	background: #fff;
	border-bottom: 1px solid #e6e6e6;
	box-shadow: 0 2px 6px -4px rgba(15, 23, 42, .35);
}

/* butonul "Suna" dispare in afara programului; "Adauga in cos" ia toata latimea */
.call-div.eco-inchis > a[href^="tel:"] { display: none !important; }
.call-div.eco-inchis .only-hover { width: 100% !important; float: none !important; }
.call-div.eco-inchis .only-hover a#second_cart_button { width: 100% !important; display: block; }

/* poza mare nu se deformeaza la schimbarea sursei */
.product-image img#image { max-width: 100%; height: auto; }

/* telefon si tableta: banda orizontala sub poza mare */
@media (max-width: 991px) {
	.popup-gallery > .row { display: flex; flex-direction: column; }
	/* coloanele Bootstrap raman la 16%/83% intre 768 si 991px; le fortam pe toata latimea,
	   altfel ramane banda alba in dreapta pozei (tableta / iPad / Fold deschis) */
	.popup-gallery > .row > .col-sm-2  { order: 2; width: 100%; flex: 0 0 auto; padding-left: 0; padding-right: 0; }
	.popup-gallery > .row > .col-sm-10 { order: 1; width: 100%; flex: 0 0 auto; padding-left: 0; padding-right: 0; }
	.popup-gallery .product-image { text-align: center; }
	.popup-gallery .product-image img#image { width: 100%; max-width: 100%; height: auto; }

	.eco-vgal { margin-top: 8px; }
	.eco-vgal .eco-vgal-viewport { height: auto !important; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.eco-vgal ul { display: flex; }
	.eco-vgal li { flex: 0 0 auto; width: auto !important; margin: 0 4px 0 0 !important; }
	.eco-vgal li a { width: 56px !important; height: 56px !important; }
	.eco-vgal li a img { transform: scale(1.14); }
}