@charset "utf-8"; /* ========================================================================== perkisau.lt: prekės kortelė Maketas: Claude Design projektas a1718d9b, komponentas „PerkiProductCard". ŠIS FAILAS KRAUNAMAS KIEKVIENAME PUSLAPYJE, ne tik perpieštuose, ir tam yra priežastis. Savininko sprendimas 2026-08-02: kortelė viena visoms vietoms. Vietų yra keturios, ir dvi iš jų stovi VISUOSE puslapiuose: preke() /k// #content viduje panasios() prekės puslapis #content viduje banners(2) dešinė 196px juosta #right, UŽ #content banners_bottom(3) apatinė prekių eilė #bottom, UŽ #content Iš to seka dvi taisyklės, kurių laužti negalima. PIRMA: prefiksas yra #page, ne #content. #right ir #bottom yra už #content ribų, tad #content prefiksas jų nepasiektų, ir kortelė apatinėje juostoje liktų be stiliaus. #page turi visi trys šablonai (info.php, home.php, _404.php), o specifiškumu (1,1,0) jis nugali senojo lapo #content a (1,0,1) ir #content h2, dėl kurių pirmame bloke jau buvo 20px didžiosios antraštės ir rausvas tekstas ant rausvo mygtuko. ANTRA: nė viena taisyklė čia neremiasi .apm klase. Prekės puslapyje ir paieškoje tos klasės nėra, o kortelė ten yra. Kortelės klasių (.apm-preke*) senasis style.min.css nepažįsta, tad į jį niekas nenuteka: senoji kortelė naudoja .product, .product-field ir .product-text, ir tos vietos, kurios dar jos nepersirašė (jcarousel pradiniame, paieška), lieka nepaliestos. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tinkleliai Kortelė pati savo pločio nenustato: jį duoda tinklelis, kuriame ji stovi. Todėl ta pati kortelė telpa ir į 745px turinio stulpelį po tris, ir į 196px šoninę juostą po vieną. -------------------------------------------------------------------------- */ #page .apm-preke-tinklelis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 0 0 34px; } /* „Panašios prekės" prekės puslapyje. Jų visada yra iki trijų. `clear` reikia todėl, kad virš jų stovinti h2 antraštė kabinama per float. */ #page .apm-panasios { clear: both; margin-top: 4px; } /* -------------------------------------------------------------------------- 2. Pati kortelė -------------------------------------------------------------------------- */ #page .apm-preke { position: relative; display: flex; flex-direction: column; box-sizing: border-box; padding: 13px; border: 1px solid rgba(34, 27, 30, 0.08); border-radius: 10px; background: #fff; font-family: 'Outfit', 'Source Sans Pro', Arial, sans-serif; font-weight: 300; line-height: 1.5; text-align: left; transition: box-shadow .22s ease, transform .22s ease; } #page .apm-preke:hover { box-shadow: 0 26px 50px -32px rgba(34, 27, 30, 0.5); transform: translateY(-3px); } /* Nuotraukos langas. Aukštis fiksuotas, o ne kvadratinis kaip makete. Miniatiūros yra mažos ir įvairių proporcijų (išmatuota: 127x180 stačia, 170x124 gulsčia), tad kvadrate jas tektų arba išpūsti, ir tada jos atrodytų neryškios, arba apkarpyti. Dabar nuotrauka stovi savo dydžio lango viduryje. */ /* 2026-08-01: fonas baltas, o ne #FCFBFA. Prekių nuotraukos fotografuotos ant balto, o langas platesnis už jas (pvz. apatinėje juostoje 197px langas ir 157px nuotrauka), tad iš šono likdavo po 20px kitokio atspalvio juostelę su aiškia briauna. Savininkas ją pavadino kvadratėliu nuotraukoje. */ #page .apm-preke .apm-preke-nuotrauka { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; height: 210px; margin: 0 0 14px; border-radius: 7px; background: #fff; } #page .apm-preke .apm-preke-nuotrauka img { max-width: 100%; max-height: 100%; width: auto; height: auto; margin: 0; padding: 0; border: 0; } /* Ženklas kampe: nuolaida, „Pakeliui", „Naujiena" arba „Išparduota". */ #page .apm-preke-zyme { position: absolute; top: 11px; left: 11px; z-index: 2; padding: 5px 10px; border-radius: 40px; font-family: 'Outfit', 'Source Sans Pro', Arial, sans-serif; font-weight: 600; font-size: 9px; line-height: 1.2; letter-spacing: 0.11em; text-transform: uppercase; color: #fff; background: #8A3355; } #page .apm-preke-zyme-pakeliui { background: #221B1E; } #page .apm-preke-zyme-nauja { background: #D26A8E; } /* Išparduota yra ne pasiūlymas, o būsena, tad ji pilka, ne akcentinė. */ #page .apm-preke-zyme-isparduota { background: #6E5F64; } #page .apm-preke-kategorija { margin: 0 0 7px; font-size: 10px; line-height: 1.3; letter-spacing: 0.15em; text-transform: uppercase; color: #9A8B90; } /* Pavadinimas. Iki 2026-07-30 jis būdavo kerpamas ties 50 ženklų su daugtaškiu, tad pirkėjas nematydavo, ar tai 50 ml, ar 100 ml buteliukas. Dabar pilnas tekstas lieka kode, o kerpa naršyklė, kai netelpa į dvi eilutes. Fiksuotas aukštis laiko korteles vienoje linijoje. */ #page .apm-preke .apm-preke-vardas { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 39px; font-size: 14.5px; line-height: 1.35; font-weight: 300; color: #221B1E; text-decoration: none; } #page .apm-preke .apm-preke-vardas:hover { color: #8A3355; text-decoration: none; } #page .apm-preke-apacia { display: flex; align-items: baseline; flex-wrap: wrap; gap: 9px; margin-top: 9px; } /* 2026-08-01: kainos šriftas pakeistas iš 'Bodoni Moda' į 'Outfit'. Bodoni ketvertas turi uždarą viršų ir siaurą kaklą, tad 14,99 skaitosi kaip 11,99. Savininkas tai pastebėjo pats: „skaičius 4 visur atrodo kaip 1, o tai labai klaidina su kaina". Kainos skaitomumas svarbesnis už šrifto vieningumą, tad Bodoni lieka antraštėms, o skaičiai visi pereina į Outfit. `tabular-nums` prideda dar vieną dalyką: visi skaitmenys vienodo pločio, tad kainų stulpelis eilėje nešokinėja. `lining-nums` saugo nuo šrifto versijos, kurioje numatytieji skaitmenys būtų senoviniai, skirtingo aukščio. */ #page .apm-preke-kaina { font-family: 'Outfit', 'Source Sans Pro', Arial, sans-serif; font-variant-numeric: lining-nums tabular-nums; font-weight: 600; font-size: 19px; line-height: 1.2; color: #221B1E; white-space: nowrap; } #page .apm-preke-kaina-akcija { color: #8A3355; } #page .apm-preke-sena { font-weight: 300; font-size: 12.5px; color: #A99DA1; text-decoration: line-through; white-space: nowrap; } #page .apm-preke-ivertinimas { margin-left: auto; font-size: 11.5px; line-height: 1; color: #9A8B90; white-space: nowrap; } #page .apm-preke-ivertinimas .fa { color: #D26A8E; margin-right: 1px; } /* Mygtukas. Piliulė kaip ir kitur, bet mažesnė: kortelėje jis yra antraeilis, svarbiausia lieka nuotrauka ir kaina. Iš sąrašo tiesiai į krepšelį nebededam nuo 2026-07-31, savininko sprendimu, tad mygtukas visada veda į prekės puslapį. */ #page .apm-preke-veiksmas { margin-top: auto; padding-top: 14px; } #page .apm-preke .apm-preke-pirkti { display: block; box-sizing: border-box; padding: 13px 10px; border: 0; border-radius: 40px; background: #D26A8E; box-shadow: 0 10px 22px -12px rgba(210, 106, 142, 0.85); font-family: 'Outfit', 'Source Sans Pro', Arial, sans-serif; font-weight: 600; font-size: 12px; line-height: 1.2; letter-spacing: 0.12em; text-transform: uppercase; color: #FCFBFA; text-align: center; text-decoration: none; cursor: pointer; } #page .apm-preke .apm-preke-pirkti:hover { background: #8A3355; color: #FCFBFA; text-decoration: none; } /* Išparduota: nuoroda lieka, nes prekės puslapyje yra aprašymas ir atsiliepimai, bet ji nebeatrodo kaip kvietimas pirkti. */ #page .apm-preke .apm-preke-pirkti-isparduota { background: #FCFBFA; box-shadow: none; border: 1px solid rgba(34, 27, 30, 0.16); color: #6E5F64; } #page .apm-preke .apm-preke-pirkti-isparduota:hover { background: #F1EBE8; color: #221B1E; } /* Išparduotos prekės nuotrauka pribalinama, kad eilėje ji nekonkuruotų su perkamomis. Ženklas ir mygtukas lieka ryškūs. */ #page .apm-preke-negyva .apm-preke-nuotrauka img { opacity: 0.55; } /* /greitai-gausime kortelėje mygtuko vietoje stovi būsena. Ji nėra nuoroda sąmoningai: užsakyti galima paspaudus nuotrauką arba pavadinimą. */ #page .apm-preke-busena { display: block; margin-top: auto; padding-top: 14px; font-size: 12px; line-height: 1.3; color: #6E5F64; } #page .apm-preke-busena:before { content: ""; display: inline-block; vertical-align: middle; width: 6px; height: 6px; margin: -2px 8px 0 0; border-radius: 50%; background: #D26A8E; } /* Savininko juosta su likučiu. Matoma tik prisijungus. */ #page .apm-preke .lik-over { position: absolute; top: 0; left: 0; z-index: 200; width: 100%; font-size: 11px; line-height: 1.4; } /* -------------------------------------------------------------------------- 3. Šoninė ir apatinė prekių juostos Savininko sprendimas 2026-08-02: dešinę juostą kategorijose palikti ir perpiešti, o ne paslėpti, kaip kituose perpieštuose puslapiuose. Telefone abi juostos slepiamos jau seniai (info.php ir home.php inline @media blokai duoda #right ir #bottom display:none !important), tad joms mobilaus varianto nereikia. -------------------------------------------------------------------------- */ #page .apm-juosta-blokas { box-sizing: border-box; } #page #right .apm-juosta-blokas { padding-top: 4px; } #page #bottom .apm-juosta-blokas { padding: 6px 0 0; } #page .apm-juosta-antraste { margin: 0 0 14px; padding: 0; border: 0; font-family: 'Bodoni Moda', Georgia, serif; font-weight: 500; font-size: 19px; line-height: 1.25; letter-spacing: 0.01em; color: #221B1E; text-transform: none; } #page #bottom .apm-juosta-antraste { font-size: 22px; margin-bottom: 18px; } /* Šoninė juosta: viena kortelė eilėje, nes plotis 196px. */ #page #right .apm-juosta-prekes { display: grid; grid-template-columns: 1fr; gap: 14px; } /* Apatinė eilė: keturios kortelės, kaip ir buvo, tik tinkleliu, ne per float. */ #page #bottom .apm-juosta-prekes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } /* Siauroje juostoje kortelė kukliau: mažesnis nuotraukos langas ir mažesnis šriftas, kad pavadinimas tilptų į dvi eilutes. */ #page #right .apm-preke { padding: 10px; } #page #right .apm-preke .apm-preke-nuotrauka { height: 150px; margin-bottom: 10px; } #page #right .apm-preke .apm-preke-vardas { height: 34px; font-size: 12.5px; } #page #right .apm-preke-kaina { font-size: 16px; } #page #right .apm-preke-kategorija { font-size: 9px; margin-bottom: 5px; } #page #right .apm-preke-ivertinimas { margin-left: 0; flex: 1 1 100%; } #page #right .apm-preke-veiksmas { padding-top: 11px; } #page #right .apm-preke .apm-preke-pirkti { padding: 11px 6px; font-size: 10.5px; letter-spacing: 0.08em; } /* Galerijos baneris. Iki 2026-08-02 jis buvo paveikslėlis su po juo kabančiu tekstu ir be jokio rėmelio, tad juostoje atrodė kaip nuklydusi nuotrauka. */ #page .apm-juosta-baneris { box-sizing: border-box; margin: 0 0 14px; padding: 10px; border: 1px solid rgba(34, 27, 30, 0.08); border-radius: 10px; background: #fff; font-family: 'Outfit', 'Source Sans Pro', Arial, sans-serif; font-weight: 300; font-size: 13px; line-height: 1.45; color: #4A3F44; } #page #bottom .apm-juosta-baneris { float: left; width: 200px; margin: 0 15px 14px 0; } #page .apm-juosta-baneris img { max-width: 100%; height: auto; border: 0; border-radius: 7px; } #page .apm-juosta-baneris a { color: #8A3355; text-decoration: none; } #page .apm-juosta-baneris a:hover { color: #D26A8E; text-decoration: underline; } /* -------------------------------------------------------------------------- 4. Sąrašo valdikliai: rikiavimas, puslapiai, tuščias sąrašas Kodėl jie čia, o ne reskin-bendra.css faile. Nuo 2026-08-02 juos naudoja ir keturi prekių sąrašai, ir kategorijos, tad vienam puslapiui priklausantys jie nebėra. Bendrame faile jiems vietos nėra: jis jau 383 eilučių prie projekto ribos 400, o perrašinėti jo vien dėl vietos nebūtų susiję su šiuo darbu. Šie valdikliai visada stovi šalia kortelių tinklelio, tad keliauja kartu su kortele ir dubliuoti jų dviejuose failuose nereikia. -------------------------------------------------------------------------- */ #page .apm-rikiavimas { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 9px; margin: 0 0 22px; font-family: 'Outfit', 'Source Sans Pro', Arial, sans-serif; font-weight: 300; } /* Prekių skaičius stumia rikiavimą į dešinę kraštą, kaip makete. */ #page .apm-rikiavimas-kiekis { margin-right: auto; font-size: 12.5px; color: #6E5F64; } #page .apm-rikiavimas-uzrasas { font-size: 12.5px; color: #8E7F84; } #page .apm-rikiavimas select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding: 9px 34px 9px 18px; border-radius: 40px; border: 1px solid rgba(34, 27, 30, 0.16); background-color: #FCFBFA; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238A3355'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; font-family: 'Outfit', 'Source Sans Pro', Arial, sans-serif; font-weight: 500; font-size: 12.5px; line-height: 1.2; color: #221B1E; cursor: pointer; } #page .apm-rikiavimas select:hover { border-color: #D26A8E; color: #8A3355; } #page .apm-puslapiai { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 0 0 34px; font-family: 'Outfit', 'Source Sans Pro', Arial, sans-serif; } #page .apm-puslapis { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 38px; height: 38px; padding: 0 12px; border: 1px solid rgba(34, 27, 30, 0.14); border-radius: 6px; font-weight: 300; font-size: 13px; line-height: 1; color: #4A3F44; text-decoration: none; } #page .apm-puslapis:hover { border-color: #D26A8E; color: #8A3355; text-decoration: none; } #page .apm-puslapis-cia { background: #221B1E; border-color: #221B1E; color: #FCFBFA; font-weight: 500; } #page .apm-puslapis-cia:hover { background: #221B1E; color: #FCFBFA; } #page .apm-puslapis-visos { margin-left: 8px; } #page .apm-puslapiai-tarpas { padding: 0 4px; font-size: 13px; color: #9A8B90; } /* Rodyklės tarpas. reskin-bendra.css jį duoda tik mygtuko viduje, o čia rodyklė stovi paprastoje nuorodoje, tad be šios eilutės būtų „Kitas›". */ #page .apm-puslapis .apm-rodykle { margin-left: 5px; } #page .apm-puslapis .apm-rodykle:first-child { margin: 0 5px 0 0; } #page .apm-prekes-tuscia { box-sizing: border-box; margin: 0 0 34px; padding: 40px 38px; border-radius: 10px; background: #F8EEF0; text-align: center; font-family: 'Outfit', 'Source Sans Pro', Arial, sans-serif; font-weight: 300; font-size: 15px; line-height: 1.75; color: #4A3F44; } #page .apm-prekes-tuscia p { margin: 0 0 8px; } #page .apm-prekes-tuscia p:last-child { margin-bottom: 0; } #page .apm-prekes-tuscia-kur { font-size: 14px; color: #6E5F64; } #page .apm-prekes-tuscia a { color: #8A3355; text-decoration: none; } #page .apm-prekes-tuscia a:hover { color: #D26A8E; text-decoration: underline; } /* -------------------------------------------------------------------------- 5. Telefonas. Riba 500px sutampa su info.php ir home.php inline @media blokais bei su JS riba, kuri telefone neinicijuoja jcarousel. Ribas privalu laikyti kartu. #right ir #bottom čia neminimi: juos abu tie patys inline blokai jau slepia su display:none !important. -------------------------------------------------------------------------- */ @media all and (max-width: 500px) { #page .apm-preke-tinklelis { grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px; } #page .apm-preke { padding: 10px; } #page .apm-preke .apm-preke-nuotrauka { height: 140px; margin-bottom: 11px; } /* 2026-08-01: mastelis pakeltas. Kortelė buvo nukritusi iki 8-10,5px, kai visa kita nauja svetainė telefone laikosi 11-15px, tad ji atrodė kaip svetimas, smulkesnis sluoksnis. Savininkas paprašė kortelės šriftus suderinti su svetainės dizainu. Kortelės plotis nepakito, tad vardui paliekam dvi eilutes, tik aukštesnes. */ #page .apm-preke-zyme { top: 8px; left: 8px; padding: 4px 9px; font-size: 9.5px; } #page .apm-preke-kategorija { font-size: 10.5px; margin-bottom: 5px; } #page .apm-preke .apm-preke-vardas { height: 38px; font-size: 13.5px; } #page .apm-preke-apacia { gap: 7px; } #page .apm-preke-kaina { font-size: 18px; } #page .apm-preke-sena { font-size: 12px; } /* Įvertinimas telefone keliamas į naują eilutę: šalia kainos jam siauroje kortelėje vietos nelieka. */ #page .apm-preke-ivertinimas { margin-left: 0; flex: 1 1 100%; } #page .apm-preke-veiksmas { padding-top: 11px; } #page .apm-preke .apm-preke-pirkti { padding: 12px 8px; font-size: 12px; } #page .apm-preke-busena { padding-top: 11px; font-size: 12px; } #page .apm-rikiavimas { justify-content: flex-start; margin-bottom: 16px; } #page .apm-puslapiai { gap: 6px; margin-bottom: 22px; } #page .apm-puslapis { min-width: 34px; height: 34px; padding: 0 9px; } #page .apm-prekes-tuscia { padding: 26px 20px; font-size: 13.5px; } } /* ========================================================================== Pradinio puslapio karuselės (2026-08-03) Iki tol abi karuselės rodė paskutines dvi senas kortelių kopijas parduotuvėje, po 24 kiekvienoje. Dabar jose ta pati preke_kortele(). Riba 501px pasirinkta ne šiaip: `home.php` JavaScript telefone jcarousel IŠ VISO neinicijuoja (`matchMedia("(max-width: 500px)")`), o neinicijuotas