@charset "utf-8";
/* ==========================================================================
   perkisau.lt: kompaktiškas viršus telefone ir suskleistas kategorijų sąrašas
   apačioje (2026-10-08). Kraunamas visuose trijuose šablonuose (home.php,
   info.php, _404.php) PASKUTINIS iš apvalkalo failų, tad prie vienodo
   specifiškumo laimi prieš reskin-apvalkalas.css ir reskin-paieska.css.

   Savininkas: „kai pusę pirmo ekrano užima paieškos laukas ir kiti paieškos
   ar navigacijos punktai, žmonės išeina", „dar susiaurink paieškos lauką".
   Iki šiol juosta, antraštė, paieška ir meniu telefone užimdavo 352 px iš 844,
   tai yra 42 % ekrano. Dabar apie 150 px.

   Antraštė telefone tampa trimis eilėmis:
     1. meniu mygtukas, logotipas, įvertinimas, krepšelis (apvalus mygtukas);
     2. paieškos laukas ir „Detali paieška" kaip apvalus mygtukas šalia;
     3. slenkama meniu juosta.

   `!important` tik ten, kur jį turi senos taisyklės ar inline `style`
   atributai (#basket-contact `width:700px`, krepšelio nuorodos `margin-left`,
   šablonų galvučių `#basket-contact{width:100% !important}`).
   ========================================================================== */

/* Mygtukas, kuris skleidžia sąrašo grupę, reikalingas tik telefone. */
body.reskin #left-menu .apm-grupe-jungiklis { display: none; }

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

	/* 1. Juoda juosta: viena eilutė. „Originalūs produktai tiesiai iš JAV"
	   telefone kartojasi pirmajame ekrane ir pasitikėjimo juostoje. */
	body.reskin .apm-pradinis-juosta-vidus { flex-direction: row; justify-content: center; padding: 6px 12px; }
	body.reskin .apm-pradinis-juosta-kaire { display: none; }
	body.reskin .apm-pradinis-juosta-desine { justify-content: center; gap: 14px; }

	/* 2. Antraštė: trys eilės tinkleliu. `order` iš reskin-apvalkalas.css
	   tinkleliui nebesvarbus, vietą duoda `grid-area`. */
	body.reskin #header {
		display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 38px;
		grid-template-areas: "meniu logo ivert krep" "paieska paieska paieska paieska" "juosta juosta juosta juosta";
		column-gap: 8px; row-gap: 6px; align-items: center; padding: 6px 12px 0; height: auto; margin-bottom: 6px; }
	body.reskin #nav-toggle { grid-area: meniu; width: 30px; height: 30px; margin: 0; }
	body.reskin #nav-toggle span { top: 14px; left: 4px; }
	body.reskin #logo { grid-area: logo; min-width: 0; margin: 0; }
	body.reskin #logo img { width: 118px !important; height: auto; max-width: 100%; margin-top: 0 !important; }
	body.reskin #atsiliepimai_head { grid-area: ivert; width: auto !important; margin: 0; padding: 0; justify-content: flex-end; }
	body.reskin #atsiliepimai_head .apm-pradinis-ivert-tekstas { width: auto; }
	body.reskin #atsiliepimai_head .apm-pradinis-ivert-suma { font-size: 12px; }
	body.reskin #atsiliepimai_head .fa { font-size: 9px; }
	body.reskin #atsiliepimai_head .apm-pradinis-ivert-kiek { font-size: 9.5px; }

	/* Krepšelis: apvalus mygtukas su maišelio ženklu, skaičių rodo ženkliukas.
	   Tekstas „Jūsų krepšelis (3)" lieka nuorodoje (font-size 0), tad ekrano
	   skaitytuvas jį perskaito, o krepšelio JS jį ir toliau perrašo kaip
	   anksčiau. Skaičių į `data-kiek` perkelia js/apvalkalas.js. */
	body.reskin #basket-contact,
	body.reskin #basket,
	body.reskin #basket-text {
		grid-area: krep; width: 38px !important; height: 38px !important; margin: 0; padding: 0;
		overflow: visible !important; }
	body.reskin #basket-text { position: relative; }
	body.reskin #basket-text a.iframe {
		position: relative; display: flex; align-items: center; justify-content: center; box-sizing: border-box;
		width: 38px; height: 38px; margin: 0 !important; padding: 0; border-radius: 50%;
		font-size: 0 !important; line-height: 0; text-decoration: none !important; overflow: hidden; }
	body.reskin #basket-text a.iframe::before {
		content: ""; display: block; width: 17px; height: 17px; background-color: #FCFBFA;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7h12l-1 13H7L6 7z'/%3E%3Cpath d='M9 7a3 3 0 0 1 6 0'/%3E%3C/svg%3E") no-repeat center / contain;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7h12l-1 13H7L6 7z'/%3E%3Cpath d='M9 7a3 3 0 0 1 6 0'/%3E%3C/svg%3E") no-repeat center / contain; }
	body.reskin #basket-text[data-kiek]::after {
		content: attr(data-kiek); position: absolute; top: -4px; right: -5px; box-sizing: border-box;
		min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #D6487B; color: #fff;
		font: 600 10px/17px 'Outfit', sans-serif; text-align: center; pointer-events: none; }

	/* 3. Paieška: 30 px aukščio laukas ir apvalus „Detali paieška" šalia.
	   Teksto dydis 16 px BŪTINAS: mažesnį tekstą iPhone, palietus lauką,
	   priartina visam puslapiui. Atsivėręs detalios paieškos skydelis
	   (#search-fullm) yra #search-m vaikas, tad jis lieka po visa eile. */
	body.reskin #search-m { grid-area: paieska; width: auto; margin: 0; }
	body.reskin #search-mobile { display: flex; align-items: center; gap: 8px; }
	body.reskin #search-m .search-field {
		flex: 1; min-width: 0; display: flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 15px; }
	body.reskin #search-m .search-field form { flex: 1; min-width: 0; }
	body.reskin #search-m .input-search input { height: 28px; line-height: 28px; font-size: 16px; }
	body.reskin #search-m .search-field input[type=submit] { width: 15px; height: 15px; }
	body.reskin #search-m a.search-more {
		flex: none; width: 30px; height: 30px; margin: 0; padding: 0; gap: 0; justify-content: center;
		border-radius: 50%; font-size: 0; }
	body.reskin #search-m a.search-more::before { flex: 0 0 15px; width: 15px; height: 15px; }

	/* 4. Meniu juosta: siauresnė, bet punktai tokie pat. */
	body.reskin #menu-con { grid-area: juosta; width: auto !important; margin: 0; }
	body.reskin #menu-top ul { padding-top: 4px; padding-bottom: 4px; }
	body.reskin #menu-top ul li a { line-height: 24px; padding-bottom: 2px; }

	/* 5. Kategorijų sąrašas puslapio apačioje: grupės suskleistos, „+"
	   išskleidžia. Klasę `apm-skleidziamas` ir mygtukus prideda
	   js/apvalkalas.js, tad be JS sąrašas lieka atviras, kaip iki šiol.
	   Nuorodos HTML'e lieka visos. */
	/* `min-height` 0: style.min.css duoda `#left-menu{min-height:500px}`, ir
	   suskleistas sąrašas paliktų tuščią plotą iki 500 px. */
	body.reskin #left-menu.apm-skleidziamas { min-height: 0; }
	body.reskin #left-menu.apm-skleidziamas > ul { display: none; }
	body.reskin #left-menu.apm-skleidziamas > .product-bg.atverta + ul { display: block; }
	body.reskin #left-menu .product-bg { position: relative; }
	body.reskin #left-menu.apm-skleidziamas .product-bg .grupes-antraste { padding-right: 44px; }
	body.reskin #left-menu .apm-grupe-jungiklis {
		display: block; position: absolute; top: 0; right: 0; bottom: 0; width: 44px; margin: 0; padding: 0;
		border: none; background: none; cursor: pointer; color: #B5446E; font: 400 22px/1 'Outfit', sans-serif; }
	body.reskin #left-menu .apm-grupe-jungiklis::before { content: "+"; }
	body.reskin #left-menu .product-bg.atverta .apm-grupe-jungiklis::before { content: "\2212"; }
}