@charset "utf-8";
/* ==========================================================================
   perkisau.lt: kategorijų puslapiai /k, /k/<sub> ir /k/<sub>/<link>
   Maketas: Claude Design projektas a1718d9b, „Perkisau katalogas v2".

   Pati prekės kortelė, rikiavimo juosta, puslapių juosta ir tuščio sąrašo
   blokas čia NEGYVENA. Jie yra css/reskin-kortele.css faile, kuris kraunamas
   kiekviename puslapyje, nes ta pati kortelė stovi ir šoninėje bei apatinėje
   juostose už #content ribų.

   Čia liko tai, ką turi tik kategorijos: kategorijų tinklelis, aprašymo
   blokas, filtro skydelis kairėje juostoje ir dešinės juostos pataisos.

   GRIEŽTA TAISYKLĖ ta pati kaip visuose reskino failuose: kiekviena taisyklė
   prasideda puslapio žyme (body.puslapis-k) arba turinio žyme (.apm).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Apvalkalas: dešinė juosta kategorijose LIEKA

   Savininko sprendimas 2026-08-02. Visuose kituose perpieštuose puslapiuose
   reskin-bendra.css ją slepia (`body.reskin:has(.apm) #right{display:none}`) ir
   praplečia turinį iki 958px. Kategorijose ji palikta ir perpiešta, tad abi tos
   taisyklės čia atšaukiamos.

   Specifiškumas didesnis už bendrojo failo (viena klase daugiau), tad tvarka
   failų sąraše rezultato nekeičia.
   -------------------------------------------------------------------------- */

body.puslapis-k.reskin:has(.apm) #right {
	display: block;
}
/* 1200 - 222 (kairė juosta) - 19 (jos paraštė) - 196 (dešinė juosta) - 18
   (tarpas) = 745. Tai lygiai tas plotis, kurį #middle-right turi senajame
   style.min.css, tad kategorijų turinys nei siaurėja, nei platėja. */
body.puslapis-k.reskin:has(.apm) #middle-right {
	width: 745px;
}

/* --------------------------------------------------------------------------
   2. Kategorijų tinklelis

   Trys kortelės eilėje, ne keturios kaip makete. Priežastis paprasta: makete
   turiniui skirta 854px, o čia 745px, ir po keturias kortelė liktų 172px
   pločio. Šios parduotuvės kategorijų vardai ilgi („Victoria's Secret
   kosmetika", „Namų kvapai ir žvakės"), tad jie virstų trimis eilutėmis.
   -------------------------------------------------------------------------- */

#content .apm-kategorijos {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
	margin: 0 0 34px;
}

#content .apm .apm-kategorija {
	display: block; box-sizing: border-box; overflow: hidden;
	border: 1px solid rgba(34, 27, 30, 0.08); border-radius: 10px;
	background: #fff; color: #221B1E; text-decoration: none;
	transition: box-shadow .22s ease, transform .22s ease;
}
#content .apm .apm-kategorija:hover {
	box-shadow: 0 24px 46px -30px rgba(34, 27, 30, 0.45);
	transform: translateY(-3px);
	color: #221B1E; text-decoration: none;
}

/* Nuotraukos langas fiksuoto aukščio, o nuotrauka jame stovi savo dydžio.

   Makete langas yra 4:3 su užpildančia nuotrauka, bet kategorijų miniatiūros
   tam netinka: 2026-08-02 išmatuota, kad jos yra iki 170x180 taškų, o
   proporcijos svyruoja nuo 0,78 (stačia) iki 1,77 (gulsčia). Užpildant jas
   tektų arba išpūsti, ir tada jos atrodytų neryškios, arba apkarpyti, o tada
   iš siauros nuotraukos liktų fragmentas. Ta pati pamoka buvo blogo kortelėse
   penktame bloke. */
#content .apm-kategorija-nuotrauka {
	display: flex; align-items: center; justify-content: center;
	overflow: hidden; height: 160px; background: #FCFBFA;
}
#content .apm-kategorija-nuotrauka img {
	max-width: 100%; max-height: 100%; width: auto; height: auto;
	margin: 0; padding: 0; border: 0;
}

#content .apm-kategorija-apacia {
	display: flex; align-items: center; justify-content: space-between;
	gap: 10px; padding: 15px 16px;
}
#content .apm-kategorija-vardas {
	display: block; min-width: 0;
	font-family: 'Outfit', 'Source Sans Pro', sans-serif;
	font-weight: 500; font-size: 14px; line-height: 1.35; color: #221B1E;
}
#content .apm-kategorija-rodykle { flex: none; font-size: 15px; color: #8A3355; }
#content .apm .apm-kategorija:hover .apm-kategorija-vardas { color: #8A3355; }

/* --------------------------------------------------------------------------
   3. Kategorijos aprašymas

   Buvo rausvas rėmelis su „..." mygtuku, kurio makete nėra, o tas pats tekstas
   HTML kode kartodavosi dukart arba triskart. Dabar tai paprastas teksto
   blokas, o tekstas išvedamas vieną kartą.
   -------------------------------------------------------------------------- */

#content .apm-katalogo-tekstas {
	box-sizing: border-box; margin: 0 0 30px; padding: 26px 30px;
	border-radius: 10px; background: #F8EEF0;
	font-size: 14.5px; line-height: 1.7; color: #4A3F44;
}
#content .apm-katalogo-tekstas p { margin: 0 0 12px; }
#content .apm-katalogo-tekstas p:last-child { margin-bottom: 0; }
#content .apm-katalogo-tekstas h2,
#content .apm-katalogo-tekstas h3 {
	margin: 0 0 10px; text-transform: none;
	font-family: 'Bodoni Moda', Georgia, serif;
	font-weight: 500; font-size: 20px; line-height: 1.3; color: #221B1E;
}
#content .apm-katalogo-tekstas img { max-width: 100%; height: auto !important; }
/* Prekių sąraše aprašymas stovi PO prekėmis, tad jam reikia atskyrimo nuo
   puslapių juostos. */
#content .apm-katalogas-prekes .apm-katalogo-tekstas { margin: 6px 0 0; }

/* --------------------------------------------------------------------------
   4. Filtro skydelis kairėje juostoje

   HTML nekeistas: jį piešia product_filter(), o telefone tą patį bloką
   JavaScript nukopijuoja į #top su klase .m-fil. Perdažom vien stiliumi, kaip
   2026-07-30 padaryta Kontaktų formai, kad logika liktų nepaliesta.

   Skydelis yra už #content ribų, tad prefiksas čia yra puslapio žymė.
   -------------------------------------------------------------------------- */

body.puslapis-k #filter-left,
body.puslapis-k .m-fil {
	box-sizing: border-box; width: 222px; min-height: 0;
	border: 1px solid rgba(34, 27, 30, 0.09); border-radius: 10px;
	background: #fff; box-shadow: none;
	font-family: 'Outfit', 'Source Sans Pro', sans-serif;
	font-weight: 300; font-size: 13px; line-height: 1.5; color: #4A3F44;
}
body.puslapis-k .fil-title {
	float: none; display: block; margin: 0; padding: 16px 18px 0;
	font-family: 'Outfit', 'Source Sans Pro', sans-serif;
	font-weight: 600; font-size: 11px; line-height: 1.2;
	letter-spacing: 0.13em; text-transform: uppercase; color: #221B1E;
}
body.puslapis-k .filter-n {
	float: none; width: 100%; box-sizing: border-box;
	padding: 14px 18px 18px; color: #4A3F44;
}
body.puslapis-k .fil-box { margin-bottom: 16px; }
body.puslapis-k .fil-name {
	width: auto; margin: 0 0 9px; padding: 0 0 8px;
	border-bottom: 1px solid rgba(34, 27, 30, 0.1);
	font-weight: 600; font-size: 11px; letter-spacing: 0.13em;
	text-transform: uppercase; color: #221B1E;
}
body.puslapis-k .fil-list { max-height: 190px; }
body.puslapis-k .fil-list ul li {
	width: 100%; margin: 0; padding: 5px 0; border-bottom: 0;
}
body.puslapis-k .fil-list label { font-size: 13px; color: #4A3F44; }
body.puslapis-k .filter-n input[type=checkbox] {
	width: 15px; height: 15px; margin: 0 8px -2px 0;
	border: 1px solid rgba(34, 27, 30, 0.25); border-radius: 4px; background: #FCFBFA;
}
body.puslapis-k .filter-n input[type="checkbox"]:checked {
	background: #D26A8E; border-color: #D26A8E;
}
body.puslapis-k .filter-n input[type="checkbox"]:checked::before {
	width: 7px; height: 7px; top: 3px; left: 3px; background-color: #fff;
}
body.puslapis-k .price-slide { width: auto; padding: 0; }
body.puslapis-k .price-slide .price-input { margin: 4px 0 16px; gap: 9px; }
body.puslapis-k .price-slide .field input {
	box-sizing: border-box; height: 34px; margin-left: 5px; padding: 0 8px;
	border: 1px solid rgba(34, 27, 30, 0.18); border-radius: 6px;
	background: #FCFBFA; font-family: 'Outfit', 'Source Sans Pro', sans-serif;
	font-size: 13px; color: #221B1E; text-align: left;
}
body.puslapis-k .price-slide .price-input .separator { width: 14px; color: #9A8B90; }
body.puslapis-k .price-slide .slider { height: 4px; background: rgba(34, 27, 30, 0.1); }
body.puslapis-k .price-slide .slider .progress { background: #D26A8E; }
body.puslapis-k .price-slide input[type="range"]::-webkit-slider-thumb {
	height: 14px; width: 14px; background: #FCFBFA; border: 2px solid #D26A8E;
}
body.puslapis-k .price-slide input[type="range"]::-moz-range-thumb {
	height: 14px; width: 14px; background: #FCFBFA; border: 2px solid #D26A8E;
}
/* Mygtukas dalijasi selektoriumi su senuoju žaliu „Pirkti"
   (`a.cart-btn-desktop,.btn-fil`), tad kiekviena jo savybė perrašoma aiškiai. */
body.puslapis-k .btn-fil {
	float: none; display: block; box-sizing: border-box; width: 100%; height: auto;
	margin: 4px 0 0; padding: 12px; border: 0; border-radius: 40px;
	background: #221B1E; box-shadow: none;
	font-family: 'Outfit', 'Source Sans Pro', sans-serif;
	font-weight: 600; font-size: 11.5px; line-height: 1.2;
	letter-spacing: 0.11em; text-transform: uppercase;
	color: #FCFBFA; text-align: center; text-shadow: none; cursor: pointer;
}
body.puslapis-k .btn-fil:hover { background: #8A3355; text-decoration: none; }

/* --------------------------------------------------------------------------
   5. Dešinės juostos atsiliepimai

   show_comment_right() kiekvienam komentarui prirašo inline plotį, o jo
   paprastas CSS nenugali, tad čia reikia !important. Jis saugus, nes visos
   taisyklės uždarytos į body.puslapis-k, o šie komentarai rodomi tik prekių
   sąraše.
   -------------------------------------------------------------------------- */

body.puslapis-k #right .comment {
	box-sizing: border-box; width: 100% !important;
	min-height: 0; margin: 0 0 10px; padding: 12px 14px;
	border: 1px solid rgba(34, 27, 30, 0.08); border-radius: 10px; background: #fff;
	font-family: 'Outfit', 'Source Sans Pro', sans-serif;
	font-weight: 300; font-size: 12.5px; line-height: 1.5; color: #4A3F44;
}
body.puslapis-k #right .comment .name {
	width: 100% !important; float: none; margin: 0 0 6px;
	font-size: 11px; color: #8E7F84;
}
body.puslapis-k #right .comment .name strong { font-weight: 500; color: #221B1E; }
body.puslapis-k #right .comment .comment-text { width: 100% !important; float: none; }

/* --------------------------------------------------------------------------
   6. Prekės nuotraukos langas: 3:4 vietoj kvadrato (2026-08-02)

   Visoje parduotuvėje langas yra kvadratas, ir tai teisinga: sąrašuose kortelė
   platesnė (278px), tad 3:4 duotų 371px aukščio langą, kuriame gulsčios prekės
   atrodo pusiau tuščios. Kategorijoje kortelė siauresnė, ir čia kvadratas
   nieko nepataisė: langas 207x207, o stati 3:4 nuotrauka jame yra 155x207, tad
   iš šonų lieka po 26px.

   Miniatiūros beveik visos stačios: 278 nuotraukų imtyje 2026-08-02 rasta 257
   stačios, 11 kvadratinių ir 10 gulsčių. Su 3:4 langu stati nuotrauka užpildo
   jį iki krašto ir paauga nuo 155x207 iki 207x276, tai yra 78% ploto. Kaina
   yra ilgesnis puslapis: kortelė paauga nuo 394 iki 463, o 18 prekių puslapis
   pailgėja apie 414px. Savininkas pasirinko didesnę nuotrauką.

   Nukirpimas (object-fit: cover) čia netinka iš principo: kvepalų buteliukui
   jis nurėžtų dangtelį, o apatiniam trikotažui modelio galvą.

   Selektorius tyčia siauras. `body.puslapis-k` uždaro taisyklę kategorijų
   puslapiuose, o `.apm-preke-tinklelis` palieka nepaliestas tas pačias
   korteles dešinėje juostoje (#right) ir apatinėje eilėje (#bottom), kur
   langas mažesnis ir kvadratas jam tinka. Specifiškumas (1,3,2) nugali
   reskin-kortele.css taisyklę (1,2,0), o failas dar ir kraunamas vėliau.
   -------------------------------------------------------------------------- */

@supports (aspect-ratio: 3 / 4) {
	body.puslapis-k #page .apm-preke-tinklelis .apm-preke-nuotrauka {
		height: auto; aspect-ratio: 3 / 4;
	}
}

/* --------------------------------------------------------------------------
   7. Telefonas. Riba 500px sutampa su info.php inline @media bloku.

   Dešinė juosta ir apatinė eilė telefone paslėptos jau seniai (info.php inline
   blokas duoda #right ir #bottom display:none !important), tad joms čia
   taisyklių nereikia. Filtras telefone yra .m-fil kopija #top viduje.
   -------------------------------------------------------------------------- */

@media all and (max-width: 500px) {

	#content .apm-kategorijos { grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px; }
	#content .apm-kategorija-nuotrauka { height: 120px; }
	#content .apm-kategorija-apacia { padding: 12px 13px; }
	#content .apm-kategorija-vardas { font-size: 13px; }

	#content .apm-katalogo-tekstas {
		margin-bottom: 22px; padding: 20px; font-size: 13.5px; line-height: 1.65;
	}

	/* GRĖBLYS, kurį pagavo tik matavimas naršyklėje. Telefone filtrą į #top
	   nukopijuoja change_position() per cloneNode(true), o šis atributus
	   kopijuoja VISUS, tad kopija išsineša ir id="filter-left". Puslapyje
	   atsiranda du elementai su tuo pačiu id, o svarbiausia: kopijai galioja ir
	   #filter-left taisyklė, kuri ID specifiškumu nugali .m-fil klasę. Todėl
	   vien `.m-fil { width: 100% }` tyliai neveikė ir filtras telefone likdavo
	   222px pločio. Čia vardijami abu selektoriai. */
	body.puslapis-k #filter-left,
	body.puslapis-k .m-fil {
		width: 100%; margin: 12px 0 0;
	}
	body.puslapis-k .m-fil .fil-title { padding: 14px 16px; }
	body.puslapis-k .m-fil .fil-list ul li { width: 100%; }
	body.puslapis-k .m-fil .price-slide { width: auto; }
	body.puslapis-k .m-fil .btn-fil {
		width: 100%; height: auto; margin: 4px 0 0; padding: 14px;
		font-size: 12px; line-height: 1.2;
	}
}