/* ==========================================================================
   reskin-pradinis-eiles.css

   Pradinio puslapio slenkamos eilės, atsiliepimų kortelės su preke ir
   suskleidžiamas atsakomybės tekstas. Atskiras failas todėl, kad
   reskin-pradinis.css jau stovi ties 372 LOC, o projekto riba naujiems
   failams yra 400.

   Kraunamas PO reskin-pradinis.css, tad prie vienodo specifiškumo laimi jis.
   Kiekviena taisyklė prasideda `body.puslapis-pradinis`, o turinio taisyklės
   dar ir `#content`: style.min.css duoda `#content h2` ir `#content a`, o
   klasė viena to nenugali.

   ==========================================================================
   Kodėl jcarousel pradiniame puslapyje nebeinicijuojamas
   ==========================================================================

   Pluginas prikala fiksuotus INLINE pločius. Dvyliktame bloke #middle-right
   praplatėjo nuo 745 iki 958 px, o jcarousel matmenys liko style.min.css
   faile: konteineris 745, klipas 665. 665 / 190 = 3,5 kortelės, tad pusė
   ketvirtos likdavo tuščiu langu, kuriame stovėjo „kita" rodyklė. Būtent tą
   langą savininkas 2026-08-01 pažymėjo tris kartus.

   Vietoj plugino čia naudojamas grid su scroll-snap. Eilutė visada pilna iš
   principo, o ne dėl teisingai apskaičiuoto pločio: naršyklė pati dalija
   vietą. Rodyklės slenka per visą matomą plotį, tad kompiuteryje verčiama
   po šešias korteles, telefone po vieną. Pirštu slinkti galima ir be JS.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Prekių eilė
   -------------------------------------------------------------------------- */

body.puslapis-pradinis #content .apm-pradinis-eile {
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: auto auto;
	grid-auto-columns: calc((100% - 40px) / 3);
	gap: 20px;
	width: 100%;
	float: left;
	clear: both;
	box-sizing: border-box;
	margin: 0 0 34px;
	padding: 2px 0 6px;
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
body.puslapis-pradinis #content .apm-pradinis-eile::-webkit-scrollbar {
	display: none; width: 0; height: 0;
}
/* style.min.css kabina <li> per float ir duoda jiems fiksuotą plotį. Grid
   vaikui to nereikia, o float jį iš tinklelio išmuštų. */
body.puslapis-pradinis #content .apm-pradinis-eile > li {
	width: auto; height: auto; float: none; margin: 0; padding: 0;
	background: none; list-style: none; scroll-snap-align: start;
}

/* --------------------------------------------------------------------------
   2. Rodyklės
   -------------------------------------------------------------------------- */

body.puslapis-pradinis #content .apm-pradinis-desine {
	display: flex; align-items: center; gap: 14px; flex: none;
}
body.puslapis-pradinis #content .apm-pradinis-rodykles {
	display: flex; gap: 8px;
}
body.puslapis-pradinis #content .apm-pradinis-rodykle {
	display: inline-flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; padding: 0;
	box-sizing: border-box; border: 1px solid rgba(34, 27, 30, 0.16);
	border-radius: 50%; background: #fff; color: #221B1E;
	font-family: 'Outfit', sans-serif; font-size: 16px; line-height: 1;
	cursor: pointer; transition: border-color .2s ease, color .2s ease;
}
body.puslapis-pradinis #content .apm-pradinis-rodykle:hover {
	border-color: #D26A8E; color: #8A3355;
}
/* Rodyklė, kuria nebėra kur eiti, lieka vietoje, bet blanksta. Dingstanti
   rodyklė stumdytų antraštę. */
body.puslapis-pradinis #content .apm-pradinis-rodykle[disabled] {
	opacity: 0.28; cursor: default; border-color: rgba(34, 27, 30, 0.16); color: #221B1E;
}

/* Atsiliepimų rodyklės kompiuteryje nereikalingos: ten rodomos trys kortelės
   ir jos telpa į eilę. Telefone jos vėl parodomos. */
body.puslapis-pradinis #content .apm-pradinis-ats-galva .apm-pradinis-rodykles {
	display: none;
}
/* Kompiuteryje rodom tris naujausius, telefone visus dvylika. Likusieji lieka
   HTML'e, tad antros užklausos nereikia, o telefonui užtenka juos parodyti. */
body.puslapis-pradinis #content .apm-pradinis-ats-kortele:nth-child(n+4) {
	display: none;
}

/* --------------------------------------------------------------------------
   3. Atsiliepimo kortelė su preke
   -------------------------------------------------------------------------- */

body.puslapis-pradinis #content .apm-pradinis-ats-kortele {
	display: flex; flex-direction: column; box-sizing: border-box;
}
body.puslapis-pradinis #content .apm-pradinis-ats-vardas { margin-bottom: 12px; }
/* Prekės eilutė kortelės apačioje. Blokas tas pats, kurį piešia
   atsiliepimo_preke(), tad ir atsiliepimų puslapyje, ir čia jis vienodas. */
body.puslapis-pradinis #content .apm-pradinis-ats-kortele .apm-ats-preke {
	margin-top: auto; padding-top: 11px; border-top: 1px solid rgba(34, 27, 30, 0.08);
}
body.puslapis-pradinis #content .apm-pradinis-ats-kortele .apm-ats-preke a {
	display: flex; align-items: center; gap: 9px; text-decoration: none;
	color: #6E5F64 !important;
}
body.puslapis-pradinis #content .apm-pradinis-ats-kortele .apm-ats-preke a:hover {
	color: #8A3355 !important;
}
body.puslapis-pradinis #content .apm-pradinis-ats-kortele .apm-ats-preke img {
	width: 38px; height: 38px; flex: none; margin: 0; padding: 0; border: 0;
	border-radius: 6px; background: #fff; object-fit: contain;
}
body.puslapis-pradinis #content .apm-pradinis-ats-kortele .apm-ats-preke span {
	font-family: 'Outfit', sans-serif; font-weight: 300; font-size: 12px;
	line-height: 1.4; color: inherit;
}

/* --------------------------------------------------------------------------
   7. Telefonas. Savininko nurodymas 2026-08-01: prekių eilės ir atsiliepimai
   tampa VIENA eile su rodyklėmis. Iki tol čia buvo tinklelis po dvi prekes,
   rodantis 12 iš 24, ir dėl jo pradinis puslapis telefone buvo 8593 px.
   -------------------------------------------------------------------------- */

@media all and (max-width: 500px) {
	body.puslapis-pradinis #content .apm-pradinis-eile {
		grid-template-rows: auto;
		grid-auto-columns: 62%;
		gap: 12px;
		margin: 0 0 22px;
	}
	/* Telefone rodom visas 24: slinkti pirštu pigu, o vertikalios vietos tai
	   nebekainuoja. Riba `n+13` čia sąmoningai nebetaikoma. */
	body.puslapis-pradinis #content .apm-pradinis-eile > li:nth-child(n+13) {
		display: block;
	}
	body.puslapis-pradinis #content .apm-pradinis-ats-korteles {
		display: grid;
		grid-auto-flow: column;
		/* BŪTINA. Be šito lieka galioti `grid-template-columns: repeat(3, 1fr)`
		   iš reskin-pradinis.css, o `grid-auto-columns` liečia tik NUMANOMUS
		   stulpelius. Trys kortelės tada sulįstų į tris išreikštus stulpelius ir
		   susispaustų iki 130px vietoj 260px, nors eilė ir atrodytų slenkama. */
		grid-template-columns: none;
		grid-template-rows: auto;
		grid-auto-columns: 78%;
		gap: 12px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	body.puslapis-pradinis #content .apm-pradinis-ats-korteles::-webkit-scrollbar {
		display: none; width: 0; height: 0;
	}
	body.puslapis-pradinis #content .apm-pradinis-ats-kortele {
		scroll-snap-align: start;
	}
	/* Telefone rodom visus dvylika, ne tris. */
	body.puslapis-pradinis #content .apm-pradinis-ats-kortele:nth-child(n+4) {
		display: flex;
	}
	body.puslapis-pradinis #content .apm-pradinis-ats-galva .apm-pradinis-rodykles {
		display: flex;
	}
	/* Antraštės eilutė telefone lūžta į du aukštus, tad suma ir rodyklės
	   išsidėsto viena po kita, o ne susispaudžia. */
	body.puslapis-pradinis #content .apm-pradinis-ats-galva { flex-wrap: wrap; gap: 12px; }
	/* Antraštės eilutėje telefone telpa arba nuoroda, arba rodyklės. Paliekam
	   rodykles: nuoroda „Visos naujienos" kartojasi ir puslapio apačioje. */
	body.puslapis-pradinis #content .apm-pradinis-skyrius { gap: 10px; }
	body.puslapis-pradinis #content .apm-pradinis-skyriaus-antraste { font-size: 20px; }
	body.puslapis-pradinis #content .apm-pradinis-desine { gap: 10px; }
	body.puslapis-pradinis #content .apm-pradinis-rodykle { width: 30px; height: 30px; font-size: 14px; }

}