/* ===========================================================================
   PYK — svetainės stilius.

   Viskas čia išvesta iš prekės ženklo knygos (docs/pyk-brand-book.html,
   leidimas 001). Kur ekranas ir pakuotė nesutampa — klysta ekranas.

   Trys taisyklės, kurias lengviausia sulaužyti ir kurios čia laikomos:
     1. AŠTUONIOS spalvos. Nė viena daugiau. Jokių gradientų, jokių pusiau
        permatomų sluoksnių, jokio „šviesesnio varianto mygtukui".
     2. Horizontas yra bazinė linija, ne dekoracija. Tekstas stovi ANT
        kalnagūbrio — kaip ant dėžutės šono.
     3. Trys tipografiniai registrai. Ne keturi.

   Mobile-first. DESKTOP BLOKAS YRA FAILO GALE: media query nesuteikia
   specifiškumo (perdavimas 09-12, 9 sk., pamoka 2).
   =========================================================================== */

/* ── Šriftas ───────────────────────────────────────────────────────────────
   Archivo laikom pas save, ne Google CDN. Trys priežastys: CDN nuoroda
   blokuoja pirmą piešimą, kiekvienas lankytojas atiduoda savo IP trečiajai
   šaliai (BDAR klausimas), o failai vis tiek reikalingi abu - lietuviškos
   raidės (ė, ū, š, ž, ą, č, į, ų) gyvena latin-ext rinkinyje.
   Abu failai turi ir svorio (100-900), ir PLOČIO (62-125) ašį - būtent
   pločio ašimi remiasi antraštės.                                          */

@font-face {
  font-family: "Archivo";
  src: url("/fontai/archivo-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Archivo";
  src: url("/fontai/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

/* ── Aštuonios spalvos ─────────────────────────────────────────────────────
   Šeši planai iš pakuotės ir du laukiantys skoniai. Sąrašas uždarytas.     */

:root {
  color-scheme: light;

  --sky: #b4d2e8; /* dangus · pagrindinis fonas, juodas tekstas   */
  --far: #6886a0; /* tolimas kalnas · tik plotas ir linijos       */
  --mid: #252932; /* vidurinis kalnas · gylis, baltas tekstas OK  */
  --ink: #16181c; /* rašalas · tekstas ir priekinis kalnas        */
  --snow: #ffffff; /* sniegas · viršūnė ir reversas                */
  --bone: #ece9e3; /* kaulas · popierius, ilgas tekstas            */
  --peach: #f0c9a8; /* skonis PEACH · netrukus                     */
  --grape: #c6b4de; /* skonis GRAPE · netrukus                     */

  /* Viena plauko linijos spalva visam puslapiui. Iki siol tas pats darbas
     buvo daromas trimis skirtingomis spalvomis. */
  --linija: rgb(22 24 28 / 0.28);

  --fam: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --pad: clamp(22px, 6vw, 56px);
  --w: 1240px;
  --kalnai: clamp(70px, 9.5vw, 160px);
  /* Pirmo ekrano aritmetika. Buvo iraseta tiesiai i calc() kaip 104 px, ir
     ties plaeciais langais galva isauga iki 65 px - juosta nusikirsdavo per
     8 px. Dabar abu skaiciai yra cia, o galva ir juosta gauna TA PATI
     aukscio dydi, tad sutapimas nebepriklauso nuo spejimo. */
  --galva: 57px;
  --juosta-h: 47px;
  /* Kaulo briauna virs hero ir po juo - kaip BRITE. Dangaus laukas nebeliecia
     nei galvos, nei juodos juostos: tarp ju eina kaulo linija, ir hero atrodo
     kaip idetas blokas, o ne kaip fono deme. */
  --krastas: clamp(6px, 0.55vw, 10px);
  --naujiena: 34px;
}

/* Skonis keičia TIK foną. Kalnas nesikeičia niekada. */
[data-skonis="peach"] {
  --sky: var(--peach);
}
[data-skonis="grape"] {
  --sky: var(--grape);
}

/* ── Bazė ──────────────────────────────────────────────────────────────── */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* 09-25 (Edvardas): dvigubas bakstelėjimas nebepriartina vaizdo. manipulation, ne
     none ir ne user-scalable=no: dviem pirštais priartinti vis tiek galima (prieinamumas). */
  touch-action: manipulation;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  /* Po juosta eina 01 Doze - irgi kaulo. Be sitos linijos juosta susilietu
     su sekcija ir nustotu buti atskiras elementas. */
  border-bottom: 1px solid var(--linija);
  font-family: var(--fam);
  font-size: 16px;
  line-height: 1.6; /* registras 3 */
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums; /* skaičiai visada tabular */
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: inherit;
}
p {
  margin: 0;
}

/* Registras 3 · tekstas. Antraštėms 700–800, tracking −0,02 em. */
h1,
h2 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
}
h1 {
  font-size: clamp(40px, min(8vw, 9.5vh), 76px);
  font-variation-settings:
    "wdth" 125,
    "wght" 800;
  letter-spacing: -0.02em;
  line-height: 0.94;
}
h2 {
  font-size: clamp(28px, 4.4vw, 48px);
  font-variation-settings:
    "wdth" 118,
    "wght" 800;
  letter-spacing: -0.02em;
  line-height: 1;
}
/* Registras 2 · lankas. Archivo 600, didžiosios, +0,24 em, 10–13 px.
   Etiketėms, sekcijų antraštėms, lankui ant dangtelio. Niekada ilgesnis
   nei viena eilutė. */
.lankas {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  line-height: 1.4;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.in {
  max-width: var(--w);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* ── Ženklas ───────────────────────────────────────────────────────────────
   Archivo 900, tracking −0,05 em, line-height 0,78. Minimalus plotis
   ekrane — 48 px. Niekada netempti, nekreipti, nedėti šešėlio.            */

.zenklas {
  /* max-content, o ne inline-block: taip bloko plotis lygus PYK ir niekam
     daugiau, ir prierasas gali i ji remtis (width: 100 %). */
  display: block;
  width: max-content;
  text-decoration: none;
  color: inherit;
  line-height: 0.78;
}
/* Zenklas - tiksliai pagal knygos 05 sk.: Archivo 900, tracking -0,05 em.
   Plocio asies cia NEliecziam: knyga atskirai draudzia zenkla tempti, o
   wdth 125 buvo mano speliojimas, kad taip jis labiau panasus i dangteli. */
.zenklas b {
  display: block;
  width: max-content;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -0.05em;
}
/* „FOCUS POUCHES" — iš apatinio lipduko spec'o (⌀6 cm).
   ŽR. PERDAVIMĄ: knygos 05 sk. sako, kad ženklas eina be prierašo. Vienas
   iš dviejų dokumentų turi būti atnaujintas; kol kas laikomasi pakuotės.

   Plotis privalo sutapti su PYK. CSS to negali: PYK plotis keičiasi (34 px
   galvoje, 30 px poraštėje, 28 px žemuose ekranuose), o ranka parinktas
   letter-spacing sutampa tik ties vienu dydžiu. Todėl prierašas - SVG su
   textLength: tekstas priverstinai užima visą bloko plotį, keisdamas TIK
   tarpus tarp raidžių. Raidžių formos nepaliestos - ženklo tempti negalima.
   Dydis keičiasi kartu su PYK, nes SVG plotis - 100 % to paties bloko.    */
.zenklas__prierasas {
  display: block;
  /* width: 0 + min-width: 100 % - ne gudrybe, o butinybe: SVG be matmenu
     turi savo numatytaji 300x150 dydi, ir skaiciuojant bloko max-content
     butent tie 300 px ir laimedavo - zenklas issipusdavo iki 300 px.
     Nulinis plotis is skaiciavimo ji pasalina, o min-width gauna jau
     apskaiciuota PYK ploti. */
  width: 0;
  min-width: 100%;
  margin-top: 6px;
  overflow: visible;
}
.zenklas__prierasas text {
  font-family: Archivo, system-ui, sans-serif;
  font-size: 9.6px; /* SVG vienetai: 100 vnt = PYK plotis */
  font-weight: 600;
  fill: currentColor;
}

/* Slinkimo juosta galvos apacioje - plona rasalo linija, kuri pildosi.
   Kalnagubris cia buvo isbandytas dviem budais ir abu atkrito: istemptas per
   visa ploti jis virsta danteliais, o keliaujantis savo proporcija - zaislu.
   Zenklas turi likti ten, kur jis yra zenklas, o ne matuoklis. */
.progresas {
  --eiga: 0%;
  position: absolute;
  inset: auto 0 -1px 0;
  height: 2px;
  pointer-events: none;
}
.progresas__nueita {
  display: block;
  height: 100%;
  width: var(--eiga);
  background: var(--ink);
}

/* „15:00 siena". Priesas, ne produktas. Anksciau tai buvo viena centruota
   eilute ant rasalo - atrode kaip sistemos pranesimas ir niekur nepaaiškino,
   kas ta „siena". Dabar: zyme, vienas paaiškinamasis sakinys, o laikrodis -
   tik antrine eilute. Lygiuojama i kaire, kaip visas puslapio tekstas. */
.siena {
  background: var(--ink);
  color: var(--snow);
}
.siena__in {
  display: grid;
  gap: 8px;
  padding-block: clamp(24px, 3.4vw, 40px);
}
.siena__in p {
  margin: 0;
}
.siena__zyme {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--far);
}
.siena__tekstas {
  max-width: 46ch;
  text-wrap: balance;
  font-size: clamp(17px, 1.7vw, 22px);
  font-weight: 500;
  line-height: 1.35;
}
.siena__laikas {
  font-size: 13px;
  color: var(--far);
  font-variant-numeric: tabular-nums;
}
.siena__laikas:empty {
  display: none;
}

/* Naujienu juosta - pati virsutine eilute. Nelipni: nuslenka ir atlaisvina
   ekrana, o lipni lieka tik galva. Rasalo gruntas, kad kaulo galva po ja
   skaitytusi kaip atskiras sluoksnis.                                     */
.naujiena {
  background: var(--ink);
  color: var(--snow);
}
.naujiena p {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--naujiena);
  /* margin: 0 nuimdavo .in centravimą - tekstas stovėjo kairėje nuo
     centro plačiuose ekranuose (1440 px - 100 px, 2560 px - 660 px). */
  margin-block: 0;
  margin-inline: auto;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
}

/* Galva - pilno plocio kaulo juosta, ta pati spalva kaip Dozes sekcija,
   ir lipni: lieka matoma slenkant per visa 6 000 px puslapi. */
.galva-juosta {
  position: sticky;
  top: 0;
  /* Progreso juosta kabinama prie apatines briaunos. */
  isolation: isolate;
  z-index: 40;
  background: var(--bone);
  border-bottom: 1px solid var(--linija);
}

.galva {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 12px;
}

/* Meniu: nuorodos su spalvotu pabraukimu, krepselis - pilnas rasalo lustas.
   Spalva cia ne dekoracija, o hierarchija: vienas veiksmas yra svarbiausias. */
/* 6 400 px puslapis telefone be jokios navigacijos - todel meniu rodomas
   visur, tik telefone jis slenka horizontaliai. */
.meniu {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scrollbar-width: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  order: 3;
  width: 100%;
  margin-top: 10px;
  padding-bottom: 2px;
}
.meniu::-webkit-scrollbar {
  display: none;
}
.meniu a {
  white-space: nowrap;
  padding-bottom: 3px;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color 0.18s ease;
}
/* Kiekviena nuoroda pabraukiama sava spalva. Grazinta pagal Edvardo
   pageidavima - tai vienintele vieta, kur visa palete matoma is karto. */
.meniu a:nth-child(1):hover {
  border-bottom-color: var(--ink);
}
.meniu a:nth-child(2):hover {
  border-bottom-color: var(--peach);
}
.meniu a:nth-child(3):hover {
  border-bottom-color: var(--grape);
}
.meniu a:nth-child(4):hover {
  border-bottom-color: var(--far);
}
.galva {
  flex-wrap: wrap;
}

.krepselis {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--snow);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--ink);
  transition:
    background-color 0.18s ease,
    color 0.18s ease;
}
.krepselis svg {
  width: 15px;
  height: 15px;
  flex: none;
}
.krepselis:hover {
  background: var(--grape);
  color: var(--ink);
  border-color: var(--ink);
}

/* Skonio lustai. Kiekvienas nesa savo spalva - tris pastelines is karto. */
/* Vienoje eiluteje: telefone jie luzdavo taip, kad GRAPE likdavo vienas. */
/* Kainos inkaras po mygtuku. Ne kainorastis - vienas skaicius, prie kurio
   zmogus gali prisirisi dar nenuslinkes iki kainu sekcijos. */
.inkaras {
  margin-top: 14px;
  font-size: 14px;
  color: var(--ink);
}
.inkaras b {
  font-weight: 700;
}

/* Lustai lauzomi i antra eilute, o ne slenkami: horizontaliai slenkanti
   eilute telefone nukirsdavo paskutini lusta („GRAPE NETRU…"), ir tai
   atrode kaip klaida, o ne kaip slinkimas. */
.lustai {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}
.lustas {
  flex: none;
}
/* Zymos, ne mygtukai: nei vienas nebeveda niekur, tad ir atrodyti kaip
   valdikliai jos neturi. Maziau paraštes, plonesnis kontūras, mazesnis
   raidziu dydis. Pastele lieka - spalva pirmame ekrane yra reikalavimas. */
.lustas {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  /* Mygtuko numatytieji: sava seima, savas dydis, pilkas fonas. Visus tris
     nuimam, kad lustas atrodytu taip pat, kaip atrode span'as. */
  font-family: inherit;
  background: none;
  /* Paspaudimas nieko nedaro - spalva keiciasi tik uzvedus. Rodykle-ranka
     cia zadetu veiksma, kurio nera. */
  cursor: default;
  padding: 6px 9px;
  border: 1px solid var(--linija);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--ink);
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.lustas em {
  font-style: normal;
  /* 8 px buvo mažiau už ženklo knygos 10 px ribą, o tai vienintelis
     „prekyboje / netrukus" signalas (09-13 vakare). */
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  opacity: 0.85;
}
/* Prekyboje esantis skonis buvo #b4d2e8 ant #b4d2e8 fono - t. y. tuscias
   kontūras, o abu neprekiaujami lustai buvo vieninteliai spalvoti.
   Hierarchija buvo apversta. */
.lustas--mint {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--snow);
}
.lustas--peach {
  background: var(--peach);
}
.lustas--grape {
  background: var(--grape);
}
.lustas:hover,
.lustas:focus-visible {
  border-color: var(--ink);
}
.lustas:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
/* Rodomas skonis - tamsesnis kontūras. Ne spalva: spalva jau dirba fone, ir
   antras signalas ta pacia priemone butu triuksmas. „Rodomas" ir
   „pasirinktas" skiriasi: pirmas keiciasi savaime, antras - tik paspaudus. */
.lustas--rodomas,
.lustas[aria-pressed="true"] {
  border-color: var(--ink);
}

/* Porastes ir teisiniu puslapiu zenklas - mazesnis. Taisykles turi buti PO
   bendruju, kitaip ta pati specifika jas perrasо. */
.zenklas.zenklas--porastė b {
  font-size: 30px;
}
.porastė .zenklas {
  color: var(--snow);
}

/* ── Hero ──────────────────────────────────────────────────────────────────
   Dangaus fonas. Antraštė iš docs/pyk-hero-headline-tyrimas.md (kandidatas
   B, 29,5 / 35). Jokios lipnios navigacijos, jokio apvalaus mygtuko.      */

.hero {
  position: relative;
  background: var(--sky);
  transition: background-color 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: clip;
  padding-top: clamp(16px, 2.5vw, 28px);
  /* Pirmas ekranas: hero plius kalnagubris plius juoda juosta telpa i langa. */
  /* 2 px - dvi plauko linijos, kurios irgi uzima vieta pirmame ekrane:
     galvos apatine ir faktu juostos apatine. */
  min-height: calc(
    var(--ekr-s, 100svh) - var(--naujiena) - var(--galva) - 2px - var(--juosta-h)
  );
  /* Kaulo briaunos cia nebera: faktu juosta po hero pati tapo kaulo
     spalvos, tad briauna tik paaukstintu ta pacia juosta. Jei juosta kada
     grizs i juoda - briauna grazinti cia, --krastas dar yra. */
  padding-bottom: 0;
}
.hero__h1 {
  margin-top: clamp(14px, 3vw, 32px);
  max-width: none;
  text-wrap: balance;
}

/* 09-26: faktų eilutė po antrašte - sudėtis ir „be nikotino", ne poveikis. */
.hero__faktai {
  margin: 12px 0 0;
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.45;
}
.hero__faktai b {
  font-weight: 800;
  white-space: nowrap;
}
.hero__faktai > span:not(.hero__faktai-cukrus) {
  opacity: 0.5;
}
/* Telefone „be cukraus" nerodomas - be jo eilutė telpa į vieną (jis yra juostoje viršuje). */
@media (max-width: 779px) {
  .hero__faktai {
    margin-top: 10px;
    font-size: 14px;
  }
  .hero__faktai-cukrus {
    display: none;
  }
}
.hero__sub {
  margin-top: 14px;
  max-width: 62ch; /* registras 3: 60–66 ženklai */
  font-weight: 400;
}

.hero__veiksmas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin-top: 20px;
}

/* Mygtukas yra stačiakampis. Apvalus piliulės mygtukas yra kategorijos
   numatytoji forma, o ne mūsų. */
.mygtukas {
  display: inline-flex;
  align-items: center;
  padding: 15px 28px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--snow);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    color 0.18s ease;
}
.mygtukas:hover {
  background: var(--peach);
  color: var(--ink);
}
.mygtukas__rodykle {
  width: 22px;
  height: 11px;
  flex: none;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.mygtukas:hover .mygtukas__rodykle {
  transform: translateX(5px);
}
.mygtukas:active {
  transform: translateY(1px);
}
.mygtukas:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* Smulkios sąveikos TIK ten, kur is tikruju galima paspausti. Duomenu
   eilutes ir DUK antrastes anksciau sviesedavo 3 %, t. y. pazadedavo veiksma,
   kurio nera. Plius tai buvo pusiau permatomas sluoksnis, kuri knyga draudzia.
   Rotacija ant „+" buvo tuscia: simbolis simetriskas, o atidarius jis vis
   tiek keiciamas i „–". */
.duk__vnt summary {
  transition: color 0.18s ease;
}
.duk__vnt summary:hover {
  color: var(--mid);
}
.porastė a {
  transition: border-color 0.18s ease;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* Slinkimo uzuomina hero apacioje. Telefone jos nera - ten pirmas ekranas
   ir taip nesibaigia lygiai ties lanksto riba. */
.toliau {
  display: none;
}

/* „Netinka" prie mygtuko nėra teisinė smulkmena — tai ženklo tonas
   (knyga, 03 sk.). */
.netinka {
  font-size: 13px;
  max-width: 34ch;
}

/* Nuotrauka eina nuo krašto iki krašto - iššoka iš konteinerio paraščių.
   Taip nelieka siūlės šonuose tarp kadro fono ir dangaus lauko, o apatinis
   kraštas tampa sąmoninga riba, ne atsitiktiniu halo. */
.hero__foto {
  margin: 14px calc(var(--pad) * -1) 0;
}
.hero__foto img {
  width: 100%;
  /* 4:3, ne 2.2:1: siauroje juostoje matydavosi tik 34 % kadro aukscio, ir
     nukrisdavo dangtelio virsus - pati brandingiausia dezutes dalis. */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 62% 70%;
}

/* ── Padėkos puslapis ──────────────────────────────────────────────────── */

.aciu {
  padding-block: clamp(32px, 6vw, 64px) clamp(36px, 6vw, 64px);
}
/* 26ch spausdavo antraštę į 238 px stulpelį (4 eilutės), o tuščias hero
   stumdavo „Kas vyksta toliau" žemiau pirmo ekrano visuose dydžiuose.
   Dabar ribojama antraštė ir tekstas, ne blokas (09-13 vakare). */
.aciu .hero__h1 {
  max-width: 16ch;
}
/* Dokumento puslapiai (ačiū, taisyklės...): hero nėra pirmas ekranas. */
.hero.hero--doc {
  min-height: 0;
}
/* Teisinių puslapių galva: tekstinė nuoroda į pradžią + krepšelio lustas. */
.galva__veiksmai {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 24px);
}
.galva__nuoroda {
  padding-block: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.galva__nuoroda:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Mažiausiuose telefonuose (iPhone SE su padidinimu) dokumentų galva lūždavo
   į dvi eilutes - 131 px, beveik ketvirtis ekrano (mobilus auditas). */
@media (max-width: 379px) {
  .galva:has(> .galva__veiksmai) {
    flex-wrap: nowrap;
    gap: 12px;
  }
  .galva__veiksmai {
    gap: 12px;
  }
  .galva__nuoroda {
    font-size: 13px;
  }
  .galva__veiksmai .krepselis {
    padding-inline: 12px;
    letter-spacing: 0.16em;
  }
  /* Padėkos antraštė 320-350 px lūždavo į 3 eilutes. */
  .aciu .hero__h1 {
    font-size: 34px;
  }
}
/* Teisinis tekstas telefone buvo 15 px, o antraštės - to paties dydžio. */
.blokas__turinys.teisinis .tekstas {
  font-size: 16px;
}
.blokas__turinys.teisinis h3 {
  font-size: 18px;
}
/* Poraštės nuorodos - vienintelė navigacija tarp dokumentų: 17 px aukščio
   zonos telefone buvo per mažos. */
.porastė .porastė__sarasas {
  gap: 0 22px;
}
.porastė .porastė__sarasas a {
  display: inline-block;
  padding-block: 13px;
}
/* Teisinio teksto eilutė buvo 82-89 ženklų - skaitoma, ne perbėgama akimis. */
.teisinis .tekstas {
  max-width: 34em;
}
@media (min-width: 780px) {
  .hero.hero--doc > .in {
    display: block;
  }
}
/* Stačiuose tabletuose (aukštas ekranas) landingo hero nebeužima viso
   ekrano - buvo 300-460 px tuščio dangaus aplink antraštę. */
@media (min-width: 780px) and (max-aspect-ratio: 5/6) {
  html .hero:not(.hero--doc) {
    min-height: clamp(560px, 72vw, 780px);
  }
}
.aciu__zyme {
  margin-bottom: 18px;
  color: var(--ink);
}
.aciu .hero__sub {
  max-width: 46ch;
}

/* Ženklas poraštėje - baltas ant priekinio kalno. */
.zenklas--porastė {
  color: var(--snow);
}

/* ── Teisiniai puslapiai ───────────────────────────────────────────────── */

.teisinis h3 {
  margin-top: 34px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.teisinis h3:first-child {
  margin-top: 0;
}
.teisinis .tekstas {
  margin-top: 10px;
}
.teisinis a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ── Horizontas ────────────────────────────────────────────────────────────
   Keturi planai griežta tvarka: dangus → tolimas → vidurinis → priekinis.
   Viršūnė balta, trikampė, tik ant tamsiausio plano, ne daugiau kaip dvi.  */

.kalnas {
  display: block;
  width: 100%;
  height: var(--kalnai);
  /* 10-03 (Edvardas): be žydro dangaus - už kalnų puslapio fonas. */
  background: transparent;
  transition: background-color 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.kalnas__tolimas {
  fill: var(--far);
}
.kalnas__vidurinis {
  fill: var(--mid);
}
.kalnas__priekinis {
  fill: var(--ink);
}
.kalnas__snow {
  fill: var(--snow);
}

/* Faktu juosta - kaulo spalvos, kaip BRITE apatine juosta. Buvo juoda ir
   „stovejo ant horizonto"; kalnu hero apacioje nebeliko, tad ir pagrindo
   tam nebeliko. Kaulas cia dirba ta pati darba, kuri anksciau dare atskira
   kaulo briauna po hero: atskiria dangaus lauka nuo puslapio.             */
.juosta {
  background: var(--bone);
  color: var(--ink);
  /* Po juosta eina 01 Doze - irgi kaulo. Be sitos linijos juosta susilietu
     su sekcija ir nustotu buti atskiras elementas. */
  border-bottom: 1px solid var(--linija);
  /* Beganti juosta yra platesne uz langa - be sito dokumentas gautu
     horizontalu slinkima (buvo 1504 px prie 1425 px lango). */
  overflow: hidden;
}
.juosta__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 18px;
  min-height: var(--juosta-h);
  padding-block: 12px;
}
/* Skyriklis reikalingas labiausiai tada, kai juosta luzta i dvi eilutes -
   anksciau butent tada jis ir dingdavo. */
.juosta__skyriklis {
  color: rgb(22 24 28 / 0.4);
}

/* ── Dokumentas ────────────────────────────────────────────────────────── */

/* Sekcija = pilno plocio spalvos juosta. Vidinis konteineris rikiuoja turini.
   Septynios vienodos smelio sekcijos is eiles skaitesi kaip lentele, ne
   kaip puslapis - todel gruntai kaitaliojami. */
.dalis {
  padding-block: clamp(44px, 6.5vw, 76px);
  /* Kad inkarine nuoroda nenuslystu po lipnia galva. */
  scroll-margin-top: 84px;
}
.platus {
  scroll-margin-top: 96px;
}
.dalis--bone {
  background: var(--bone);
}
.dalis--sky {
  background: var(--sky);
  transition: background-color 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
/* PEACH ir GRAPE fonai sekcijoms nuo 09-12 nenaudojami: tai skoniai, kuriu
   dar negalima nusipirkti, o dezute yra tik melyna, juoda ir balta. Slenkant
   melyna-persikine-melyna-violetine puslapis skaitesi kaip pasteliniu
   parduotuviu sablonas. Klases lieka - pravers, kai skoniai pasirodys. */
.dalis--peach {
  background: var(--peach);
}
.dalis--grape {
  background: var(--grape);
}
/* Dvi smelio sekcijos is eiles - tarp ju reikia linijos, kitaip susilieja. */
.dalis--bone + .dalis--bone {
  border-top: 1px solid var(--linija);
}

/* Pilno plocio nuotraukos juosta tarp sekciju. */
.foto-juosta {
  margin: 0;
}
.foto-juosta img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 48%;
}

/* --far ant kaulo yra 3,15:1 - per mazai 11 px tekstui. Tekstui naudojam
   --mid (12:1), o --far lieka tik plotams ir linijoms. */
.blokas__nr {
  color: var(--mid);
}

/* 860 px cia buvo likutis is siauresnio maketo. Placiame lange jis palikdavo
   530 px tuscios spalvos desineje ir tik 330 px kaireje - puslapis atrodydavo
   pastumtas. Skaitymo plotis nuo to nepriklauso: pastraipos turi savo
   `max-width` matmeni, o lenteles ir DUK kaip tik nori viso ploto. */
.blokas__turinys {
  max-width: 860px;
}
@media (min-width: 1280px) {
  .blokas__turinys {
    max-width: none;
  }
}
/* Vienas ritmo saltinis: 4 px bazė, tarpai tik 24 / 32 / 48. */
.blokas__turinys > * + * {
  margin-block-start: 24px;
}

.ivadas {
  max-width: 62ch;
  font-size: 18px;
  line-height: 1.6;
}

.tekstas {
  max-width: 62ch;
  font-size: 15px;
  color: var(--mid);
}

/* ── Duomenų eilutės ───────────────────────────────────────────────────── */

/* margin:0 cia nurydavo .blokas__turinys tarpa (ta pati specifika, veliau
   faile), tad virsutine linija gulddavo ant priespaskutines teksto eilutes. */
.duom {
  border-top: 1px solid var(--ink);
}
.dalis--peach .duom__eil,
.dalis--grape .duom__eil,
.dalis--sky .duom__eil,
.dalis--peach .isnasos,
.dalis--grape .isnasos,
.dalis--sky .isnasos,
.dalis--peach .duk__vnt,
.dalis--grape .duk__vnt,
.dalis--sky .duk__vnt {
  border-bottom-color: var(--linija);
  border-top-color: var(--linija);
}
.dalis--peach .blokas__nr,
.dalis--grape .blokas__nr,
.dalis--sky .blokas__nr,
.dalis--peach .duom__k,
.dalis--grape .duom__k,
.dalis--sky .duom__k,
.dalis--peach .tekstas,
.dalis--grape .tekstas,
.dalis--sky .tekstas,
.dalis--peach .isnasos,
.dalis--grape .isnasos,
.dalis--sky .isnasos,
.dalis--peach .duom__vnt,
.dalis--grape .duom__vnt,
.dalis--sky .duom__vnt {
  color: var(--ink);
}

.duom__eil {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding-block: 16px;
  border-bottom: 1px solid var(--linija);
}
.duom__eil > * {
  min-width: 0;
}
.duom__k {
  margin: 0;
  font-size: 15px;
  color: var(--mid);
}
.duom__r {
  margin: 0;
  flex: none;
  font-size: 15px;
  font-weight: 700;
  text-align: right;
}
/* Registras 1 leidžiamas ir dideliems skaičiams, ne tik ženklui. */
.duom__eil--pora .duom__r {
  font-size: 26px;
  font-weight: 900;
  font-variation-settings:
    "wdth" 118,
    "wght" 900;
  letter-spacing: -0.05em;
}
.duom__vnt {
  margin-left: 0.2em;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mid);
}

/* Diagramos dydis ir spalvos - is stiliaus, ne is inline atributu. */
.lankas-diagrama {
  width: clamp(168px, 46vw, 210px);
  aspect-ratio: 1;
  margin-inline: auto;
  color: var(--ink);
}
.diagrama__vnt {
  fill: var(--mid);
}

/* ── Išnašos ───────────────────────────────────────────────────────────── */

.isnasos {
  padding-top: 14px;
  border-top: 1px solid var(--linija);
  max-width: 62ch;
  font-size: 13px;
  color: var(--mid);
}
.isnasos p + p {
  margin-top: 7px;
}
.isnasos sup {
  font-weight: 700;
  margin-right: 4px;
}

/* ── Kainos ────────────────────────────────────────────────────────────────
   Ne keturios vienodos kortelės, o eilutės: pirmas skaičius - už maišelį,
   nes atskaitos taškas yra kava (knyga, 11 sk.). Trys dėžutės pažymėtos -
   ten pristatymas tampa nemokamas, ir ten yra MOQ taškas.               */

.kainos {
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ink);
}
.kainos li {
  display: block;
}
a.kaina {
  text-decoration: none;
  color: inherit;
}
/* Pazymeta eilute apversta - baltas tekstas ant rasalo. Be sitos taisykles
   color:inherit virsuje paverte ji juodu ant juodo, t. y. nematomu. */
a.kaina--zymeta,
a.kaina--zymeta:hover {
  color: var(--snow);
}
a.kaina:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}

.kaina {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "zyme zyme"
    "kiekis vnt"
    "laikas viso";
  align-items: baseline;
  gap: 2px 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--linija);
  transition: background-color 0.2s ease;
}

.kaina__zyme {
  grid-area: zyme;
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.kaina__kiekis {
  grid-area: kiekis;
  font-size: 18px;
  font-weight: 700;
}
.kaina__vnt {
  grid-area: vnt;
  text-align: right;
  font-size: 26px;
  font-weight: 900;
  font-variation-settings:
    "wdth" 118,
    "wght" 900;
  letter-spacing: -0.05em;
}
.kaina__vnt span {
  margin-left: 0.25em;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.kaina__viso {
  grid-area: viso;
  text-align: right;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.kaina__laikas {
  grid-area: laikas;
  font-size: 13px;
}

/* Pažymėta eilutė apsiverčia - priekinis kalnas, baltas tekstas. */
/* Neigiama parašte kompensuoja vidini tarpa, kad visos keturios kainos
   uz maiseli liktu vienoje vertikaleje. */
.kaina--zymeta {
  margin-inline: calc(-1 * clamp(16px, 3vw, 24px));
  padding-inline: clamp(16px, 3vw, 24px);
  background: var(--ink);
  color: var(--snow);
  border-bottom-color: var(--ink);
}

/* ── Palyginimas ──────────────────────────────────────────────────────────
   Tik kaina ir laikas. Jokio poveikio zodzio - kava yra matas, ne varzovas. */

.lyginam {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.lyginam th,
.lyginam td {
  padding: 16px 10px;
  text-align: right;
  border-bottom: 1px solid var(--linija);
}
.lyginam thead th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  border-bottom-color: var(--ink);
}
.lyginam tbody th {
  text-align: left;
  font-weight: 400;
  padding-left: 0;
}
.lyginam tbody td:first-of-type {
  font-weight: 700;
}
.lyginam td:last-child {
  padding-right: 0;
}

/* ── Suskleidziamas blokas ────────────────────────────────────────────────
   Tas pats elgesys kaip DUK, tik platesnis - jame telpa lenteles.        */

.platus {
  margin-block-start: 24px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--linija);
}
.platus summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding-block: 16px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  list-style: none;
  transition: color 0.18s ease;
}
.platus summary:hover {
  color: var(--mid);
}
.platus summary::-webkit-details-marker {
  display: none;
}
.platus summary::after {
  content: "+";
  flex: none;
  font-weight: 600;
  color: var(--mid);
}
.platus[open] summary::after {
  content: "–";
}
.platus__turinys {
  padding-bottom: 24px;
}
.platus__turinys > * + * {
  margin-top: 24px;
}

/* ── Judesys ───────────────────────────────────────────────────────────────
   09-13 vakare: sekcijų pasirodymas slenkant pašalintas. Turinys laukdavo
   opacity 0, kol atsidurdavo 12 % virš ekrano apačios, o kainų kortelės
   paspaudus „Pirkti MINT" ~0,8 s atrodė išjungtos. Ženklo knyga - viena
   animacija (hero). JS klasės .rodos nebededa, tad senos .rodos taisyklės
   žemiau nebeturi poveikio. */

/* ── DUK ────────────────────────────────────────────────────────────────
   Ne kortelių eilė — sąrašas su tomis pačiomis plaukų linijomis kaip
   duomenų eilutės. Ženklas plius ir minusas, nes jie yra tipografija,
   o ne piktograma.                                                       */

.duk {
  border-top: 1px solid var(--ink);
}
.duk__vnt {
  border-bottom: 1px solid var(--linija);
}
.duk__vnt summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding-block: 16px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  list-style: none;
}
.duk__vnt summary::-webkit-details-marker {
  display: none;
}
.duk__vnt summary::after {
  content: "+";
  flex: none;
  font-weight: 600;
  color: var(--far);
}
.duk__vnt[open] summary::after {
  content: "–";
}
.duk__vnt .tekstas {
  padding-bottom: 18px;
}

/* ── Lipni pirkimo juosta ──────────────────────────────────────────────────
   Atsiranda, kai hero mygtukas nuslenka. Jokio šešėlio - tik linija.     */

.pirkti {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 30;
  background: var(--bone);
  border-top: 1px solid var(--ink);
  animation: pirkti-kyla 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes pirkti-kyla {
  from {
    transform: translateY(100%);
  }
  to {
    transform: none;
  }
}

.pirkti__in {
  max-width: var(--w);
  margin-inline: auto;
  padding: 10px var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.pirkti__kaina {
  font-size: 13px;
  min-width: 0;
  margin: 0;
}

/* Kiekio mygtukai juostoje. Kvadratiniai, vienodo ploco - kad „12" nebutu
   platesnis uz „1" ir eilute nesokinetu perjungiant. */
.pirkti__kiekiai {
  display: flex;
  gap: 6px;
  flex: none;
}
.kiekis {
  min-width: 40px;
  padding: 9px 8px;
  border: 1px solid var(--linija);
  background: none;
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease;
}
.kiekis:hover {
  border-color: var(--ink);
}
.kiekis[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--snow);
}
.kiekis:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.pirkti__kaina b {
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -0.04em;
}
.pirkti__kaina span {
  display: block;
}

.mygtukas--maza {
  padding: 11px 18px;
  font-size: 11px;
}

/* Telefone juosta - dvi eilutes. Vienoje eiluteje su `flex-wrap: nowrap`
   kainos blokas su `min-width: 0` susitraukdavo iki 9-10 px, tekstas
   laužydavosi po zodi, ir juosta isaugdavo iki 373 px - puse ekrano.
   Dabar: virsuje kaina, apacioje kiekiai ir mygtukas. */
@media (max-width: 779px) {
  .pirkti__in {
    flex-wrap: wrap;
    gap: 8px;
    padding-block: 8px;
  }
  .pirkti__kaina {
    flex: 1 1 100%;
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 12px;
    line-height: 1.3;
  }
  .pirkti__kaina b {
    flex: none;
    font-size: 17px;
  }
  .pirkti__kaina span {
    min-width: 0;
  }
  .pirkti__kiekiai {
    flex: 1 1 auto;
    min-width: 0;
  }
  .kiekis {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: 4px;
  }
  .pirkti .mygtukas--maza {
    flex: none;
    padding: 11px 14px;
    letter-spacing: 0.14em;
  }
}

/* ── Poraštė — priekinis kalnas ────────────────────────────────────────── */

.porastė {
  background: var(--ink);
  color: var(--snow);
  /* padding-block ejo PO padding-bottom ir ji panaikindavo, tad lipni
     pirkimo juosta uzdengdavo paskutine teisinio teksto eilute. */
  padding-block: clamp(44px, 9vw, 72px) 112px;
}
.porastė a {
  color: var(--snow);
  text-decoration: none;
  border-bottom: 1px solid var(--far);
}
.porastė a:hover {
  border-bottom-color: var(--snow);
}
/* Zenklas nera nuoroda tarp kitu - jo pabraukti negalima. */
.porastė .zenklas {
  border-bottom: 0;
}
.porastė__sarasas {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  font-size: 15px;
}
.porastė__teise {
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid var(--far);
  max-width: 62ch;
  font-size: 13px;
}

/* ── Viena animacija visoje svetainėje ─────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  .kyla {
    animation: kyla 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }
  .kyla--2 {
    animation-delay: 0.08s;
  }
  .kyla--3 {
    animation-delay: 0.16s;
  }
  @keyframes kyla {
    from {
      opacity: 0;
      transform: translateY(12px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}

/* ══ PARDAVIMO EIGA (09-13) ════════════════════════════════════════════
   Sekcijos po hero. Mobile-first; desktop taisykles - failo gale.
   Kiekviena dalis turi savo kompozicija, kad puslapis nebesiskaitytu kaip
   penkios vienodos lenteles is eiles.                                    */

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* h2, kuris vizualiai yra tik zyme - be h2 platumo ir svorio asiu. */
h2.lankas {
  font-size: 11px;
  font-weight: 600;
  font-variation-settings: normal;
  letter-spacing: 0.24em;
  line-height: 1.4;
}

/* 1. Skaiciai */
.skaiciai {
  text-align: center;
}
.skaiciai__zyme {
  color: var(--mid);
}
.skaiciai__eile {
  display: grid;
  justify-items: center;
  gap: 18px;
  margin-top: 18px;
}
.skaicius .duom__r {
  font-size: clamp(64px, 16vw, 188px);
  font-weight: 900;
  font-variation-settings:
    "wdth" 125,
    "wght" 900;
  letter-spacing: -0.05em;
  line-height: 0.9;
  text-align: center;
}
.skaicius .duom__vnt {
  margin-left: 0.12em;
  font-size: clamp(14px, 1.6vw, 22px);
  letter-spacing: 0.12em;
  color: var(--ink);
}
.skaicius__k {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.skaiciai .lankas-diagrama {
  width: clamp(120px, 34vw, 190px);
}
.skaiciai__apacia {
  margin-top: 28px;
  font-size: 14px;
  color: var(--mid);
}
.skaiciai__apacia a {
  color: var(--ink);
}

/* 2. Siena - didziule valanda */
.siena__in {
  gap: 18px;
}
.siena__valanda {
  font-size: clamp(72px, 18vw, 220px);
  font-weight: 900;
  font-variation-settings:
    "wdth" 125,
    "wght" 900;
  letter-spacing: -0.05em;
  line-height: 0.85;
  font-variant-numeric: tabular-nums;
  color: var(--snow);
}
.siena__tekstai {
  display: grid;
  gap: 8px;
}

/* 3. Kaip naudoti - nuotrauka ir zingsniai */
.naudojimas {
  background: var(--bone);
  scroll-margin-top: 84px;
}
/* Telefone galva - viena 57 px eilutė (žr. „Telefonas: mobile-first" failo
   gale). Inkarų atitraukimai skaičiuojami jai, su 8-16 px oro.
   :root - kad laimėtų prieš vėlesnes #kaina ir #sudetis taisykles. */
@media (max-width: 779px) {
  :root .dalis,
  :root .naudojimas,
  :root #kaina {
    scroll-margin-top: 66px;
  }
  :root #sudetis {
    scroll-margin-top: 74px;
  }
}
.naudojimas__foto {
  margin: 0;
}
.naudojimas__foto img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 62%;
}
.naudojimas__tekstas {
  padding: clamp(36px, 6vw, 72px) var(--pad);
}
.naudojimas__tekstas h2 {
  margin-top: 10px;
}
.zingsniai {
  display: grid;
  gap: 22px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: zingsnis;
}
.zingsniai li {
  counter-increment: zingsnis;
  display: grid;
  grid-template-columns: 1.1em minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  font-size: 18px;
  line-height: 1.45;
}
.zingsniai li::before {
  content: counter(zingsnis);
  font-size: 44px;
  font-weight: 900;
  font-variation-settings:
    "wdth" 125,
    "wght" 900;
  letter-spacing: -0.04em;
  line-height: 0.8;
}
.zingsniai b {
  font-weight: 700;
}
/* Tekstas apvilktas <span>: be jo tinklelyje buvo trys elementai (numeris,
   <b> ir laisvas tekstas), ir tekstas krisdavo i 1,1 em ploco stulpeli -
   po viena zodi eiluteje, sekcija isaugdavo iki 1155 px. */
.zingsniai li > span {
  min-width: 0;
}
.zymos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.zymos li {
  padding: 8px 12px;
  border: 1px solid var(--ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.naudojimas__pastaba {
  margin-top: 18px;
  font-size: 13px;
  color: var(--mid);
}
.naudojimas .hero__veiksmas {
  margin-top: 28px;
}

/* 4. Kaina ir pirkimas */
.pirkimas__h {
  max-width: none;
  margin-top: 10px;
  font-size: clamp(32px, 5.4vw, 76px);
  line-height: 0.98;
}
.pirkimas .kainos {
  margin-top: 34px;
}
.kaina__rinktis {
  display: none;
}
.pirkimas__veiksmas {
  margin-top: 28px;
}
.palyginimas {
  display: grid;
  margin-top: 48px;
  border: 1px solid var(--ink);
}
.palyginimas__puse {
  display: grid;
  gap: 6px;
  padding: 24px;
}
.palyginimas__puse + .palyginimas__puse {
  border-top: 1px solid var(--ink);
}
.palyginimas__puse--pyk {
  background: var(--ink);
  color: var(--snow);
}
.palyginimas__skaicius {
  margin-top: 6px;
  font-size: clamp(34px, 4.4vw, 60px);
  font-weight: 900;
  font-variation-settings:
    "wdth" 125,
    "wght" 900;
  letter-spacing: -0.04em;
  line-height: 0.95;
  white-space: nowrap;
}
.palyginimas__k {
  font-size: 14px;
}
.pirkimas .isnasos {
  margin-top: 20px;
}

/* 5. Kas mes - istorija dideliu sriftu ant rasalo */
/* ── Kelias: nuo užsakymo iki naudojimo (09-16) ─────────────────────────
   Tamsi juosta toje pačioje vietoje, kur buvo „Kas mes" - puslapio ritmas
   nesikeičia. Numeriai - tas pats traktavimas kaip .zingsniai (Archivo 900,
   wdth 125), kad žingsniai atrodytų iš tos pačios sistemos. */
.kelias {
  background: var(--ink);
  color: var(--snow);
}
.kelias h2.lankas {
  color: var(--far);
}
/* 09-16: buvo paveldėtas „Kas mes" citatos stilius (600, be pločio ašies) -
   todėl šriftas skyrėsi nuo visų kitų sekcijų antraščių. Dabar - kaip h2
   visur kitur: Archivo 800, wdth 118. */
.kelias__antraste {
  max-width: 24ch;
  margin: 20px 0 0;
  font-size: clamp(30px, 3.6vw, 48px);
  font-weight: 800;
  font-variation-settings:
    "wdth" 118,
    "wght" 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.kelias__eile {
  display: grid;
  gap: 32px 28px;
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: kelias;
}
.kelias__zingsnis {
  counter-increment: kelias;
  border-top: 1px solid rgb(255 255 255 / 0.22);
  padding-top: 16px;
}
.kelias__zingsnis::before {
  content: counter(kelias);
  display: block;
  margin-bottom: 10px;
  font-size: 44px;
  font-weight: 900;
  font-variation-settings:
    "wdth" 125,
    "wght" 900;
  letter-spacing: -0.04em;
  line-height: 0.8;
  color: var(--sky);
}
.kelias__h {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.kelias__t {
  margin: 0;
  /* 09-16 (Edvardas): buvo 15 px - per smulku po tokiais numeriais.
     Auga su lango pločiu, kaip ir hero aprašymas. */
  font-size: clamp(17px, 1.3vw, 21px);
  line-height: 1.5;
  color: var(--bone);
}
@media (min-width: 780px) {
  .kelias__eile {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .kelias__eile--trys {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.kelias__veiksmas {
  margin-top: 40px;
}

/* Tamsiame fone rašalo mygtukas nesimatytų - apverčiam spalvas. */
.mygtukas--sviesus {
  border-color: var(--snow);
  background: var(--snow);
  color: var(--ink);
}
.mygtukas--sviesus:hover {
  background: var(--peach);
  border-color: var(--peach);
  color: var(--ink);
}
/* Kelio mygtukas - didesnis nei įprastas: jis vienintelis visoje juostoje. */
.kelias__veiksmas .mygtukas {
  padding: 18px 34px;
  font-size: 15px;
}
/* Žymos turi savo šviesius fonus (snow, peach, grape), o tamsioje juostoje
   tekstas paveldėtų --snow: pirmoji žyma tapdavo balta ant balto. */
.kelias .zymos li {
  color: var(--ink);
}
/* „Kaip vartoti" tekstas: .tekstas turi savo tamsią spalvą šviesiam fonui
   (#252932), o tamsioje juostoje kontrastas nukrisdavo iki 1,22:1 - praktiškai
   nematomas. Bone duoda 12,8:1. */
.kelias .tekstas {
  color: var(--bone);
}
/* Išskleistas „Kaip vartoti" naudoja visą juostos plotį, o ne siaurą teksto
   stulpelį: taip pastraipa telpa į dvi eilutes ir mygtukas nukeliauja perpus
   mažiau žemyn. (Žymos išimtos 09-16 - „daugiausia 4 per parą" liko DUK
   klausime „Ar tai saugu vartoti?".) */
.kelias .platus__turinys .tekstas {
  max-width: none;
}
.platus--tamsus summary::after {
  color: var(--far);
  transition: color 0.18s ease;
}
.platus--tamsus summary:hover,
.platus--tamsus summary:hover::after {
  color: var(--peach);
}
/* Akordeonas tamsiame fone: pilkos linijos vietoj rašalo. */
.platus--tamsus {
  margin-block-start: 44px;
  border-top-color: rgb(255 255 255 / 0.5);
  border-bottom-color: rgb(255 255 255 / 0.22);
}

.mes {
  background: var(--ink);
  color: var(--snow);
}
.mes h2.lankas {
  color: var(--far);
}
.mes__istorija {
  max-width: 32ch;
  margin: 20px 0 0;
  font-size: clamp(22px, 3.1vw, 42px);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.01em;
}
.mes__zmones {
  display: grid;
  gap: 18px;
  margin: 44px 0 0;
  padding: 24px 0 0;
  list-style: none;
  border-top: 1px solid var(--mid);
}
.mes__zmones li {
  display: grid;
  gap: 4px;
}
.mes__zmones b {
  font-size: 18px;
  font-weight: 700;
}
.mes__zmones span {
  font-size: 13px;
  color: var(--far);
}

/* 6. DUK */
.duk-dalis__kaire h2 {
  margin-top: 10px;
}
.duk-dalis .duk {
  margin-top: 28px;
}
.duk__turinys {
  display: grid;
  gap: 18px;
  padding-bottom: 22px;
}
.duk__turinys .tekstas {
  padding-bottom: 0;
}
#sudetis {
  scroll-margin-top: 96px;
}

/* 7. Uzdarymas */
.pabaiga {
  background: var(--sky);
  overflow: clip;
}
.pabaiga__in {
  display: grid;
  gap: 10px;
  padding-top: clamp(48px, 8vw, 96px);
}
.pabaiga__tekstas h2 {
  max-width: 16ch;
  margin-top: 10px;
  /* Buvo iki 88 px - siauroje kolonoje antraste luzdavo i 5 eilutes, o po ja
     dar kiekis ir mygtukas, tad blokas isaugdavo per visa ekrana. */
  font-size: clamp(34px, 4.4vw, 64px);
  font-variation-settings:
    "wdth" 125,
    "wght" 800;
  line-height: 0.94;
}
.pabaiga__kaina {
  margin-top: 20px;
  font-size: 16px;
}
.pabaiga__kaina b {
  font-size: 22px;
  font-weight: 900;
}
.pabaiga .hero__veiksmas {
  margin-top: 26px;
}
.pabaiga__foto {
  display: block;
  width: min(100%, 560px);
  height: auto;
  margin: 12px auto 0;
}

/* ══ EIGA v3 (09-13) ═════════════════════════════════════════════════════
   Kaip naudoti su doze ir sudetimi, „Kada" korteles, sąskaitos eilute,
   galutinis pirkimo blokas su kiekiu.                                    */

/* 3. Kaip naudoti - paros riba, klausimai, suskleista sudetis */
.naudojimas__riba {
  max-width: 46ch;
  margin-top: 26px;
  font-size: 15px;
  line-height: 1.5;
}
.naudojimas__riba b {
  font-weight: 700;
}
.klausimai {
  margin: 22px 0 0;
  border-top: 1px solid var(--ink);
}
.klausimai > div {
  display: grid;
  grid-template-columns: minmax(0, 9em) minmax(0, 1fr);
  gap: 16px;
  padding-block: 14px;
  border-bottom: 1px solid var(--linija);
}
.klausimai dt {
  font-size: 15px;
  font-weight: 700;
}
.klausimai dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
}
.naudojimas .platus {
  margin-top: 22px;
}
.naudojimas .platus .duom {
  margin-top: 4px;
}

/* 4. Kada - trys situacijos */
.kada h2 {
  max-width: 20ch;
  margin-top: 10px;
}
.kada__eile {
  display: grid;
  gap: 14px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}
.kada__kortele {
  display: grid;
  align-content: start;
  gap: 10px;
  /* Tinklelio elementas numatytai turi min-width: auto - be sito ilgas
     zodis iškiša ji uz stulpelio ribu ir uzlipa ant kaimyninės kortelės. */
  min-width: 0;
  padding: 26px 24px 28px;
  border: 1px solid var(--ink);
}
.kada__kortele--pagrindine {
  background: var(--ink);
  color: var(--snow);
}
.kada__kortele p,
.kada__kortele h3 {
  margin: 0;
}
/* Siauresnis plotis (wdth 100) ir mazesnis dydis: „Susitikimas" - vienas
   11 raidziu zodis, o kortele ties 1900 px turi tik ~300 px vidaus. Ties
   64 px ir wdth 125 jis buvo ~560 px ir uzlipdavo ant „Deep work". */
.kada__zodis {
  font-size: clamp(30px, 2.6vw, 44px);
  font-weight: 900;
  font-variation-settings:
    "wdth" 100,
    "wght" 900;
  overflow-wrap: break-word;
  letter-spacing: -0.04em;
  line-height: 0.95;
}
.kada__kortele h3 {
  margin-top: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.kada__kortele p:not(.kada__zodis) {
  font-size: 16px;
  line-height: 1.45;
}

/* 5. Kaina - eilute komandai */
.pirkimas__imonei {
  margin-top: 18px;
  font-size: 15px;
}
.pirkimas__imonei b {
  font-weight: 700;
}

/* 8. Galutinis pirkimo blokas */
.pirkimo-blokas {
  display: grid;
  gap: 16px;
  margin-top: 26px;
}
.pirkimo-blokas__kaina {
  margin: 0;
  font-size: 15px;
}
.pirkimo-blokas__kaina b {
  display: block;
  margin-bottom: 6px;
  font-size: clamp(40px, 4.4vw, 64px);
  font-weight: 900;
  font-variation-settings:
    "wdth" 125,
    "wght" 900;
  letter-spacing: -0.04em;
  line-height: 0.95;
}
.pirkimo-blokas__kiekiai {
  display: flex;
  gap: 6px;
}
.pirkimo-blokas .kiekis {
  min-width: 52px;
  padding: 13px 10px;
  font-size: 15px;
}
.pirkimo-blokas .hero__veiksmas {
  margin-top: 4px;
}

/* ── DESKTOP — privalo likti failo GALE ────────────────────────────────── */

@media (min-width: 780px) {
  .meniu {
    gap: 26px;
    order: 0;
    width: auto;
    margin-top: 0;
    font-size: 13px;
  }

  /* Galvos ir juostos aukstis fiksuojamas, o ne paliekamas issivystyti is
     paraštes: tik taip --galva / --juosta-h yra tiesa, o ne spejimas, ir
     juodoji juosta baigiasi lygiai ties lango apacia. */
  :root {
    --galva: 66px;
    --juosta-h: 64px;
  }
  /* Iterptas, o ne atskiras blokas: zemu ekranu reiksmes privalo stovėti PO
     placiu ekranu reiksmiu, kitaip laimi paskutines faile - ir 1536x760
     lange galva vel butu 66 px. */
  @media (max-height: 900px) {
    :root {
      --galva: 56px;
      --juosta-h: 56px;
    }
  }
  .galva {
    align-items: center;
    flex-wrap: nowrap;
    height: var(--galva);
    padding-block: 0;
  }
  .juosta__in {
    min-height: var(--juosta-h);
    padding-block: 0;
  }

  /* Nuotrauka nustoja buti langelis tinklelio kolonoje. Ji tampa pilno
     auksčio desine puse: nuo galvos apacios iki kalnagubrio virsaus. Taip
     jos krastai sutampa su tikromis puslapio linijomis, o ne kabo ore. */
  /* Tekstas centruojamas vertikaliai. Kol hero apacioje stovejo kalnai, jie
     uzpildydavo apacia; ju nebeliko, ir tekstas, prispaustas prie virsaus,
     palikdavo ~250 px tuscio dangaus. Grandine turi buti pilna: hero -> .in
     -> tinklelis, kitaip aukstis nepersiduoda ir centruoti nera ko. */
  .hero {
    display: flex;
  }
  .hero > .in {
    display: flex;
    flex: 1;
  }
  .toliau {
    position: absolute;
    /* Konteinerio kaire briauna, apskaiciuota ranka: .in yra centruotas
       max-width: var(--w), tad jo krastas = puse likucio plius paraste.
       Taip uzuomina lygiuojasi su antraste be position: relative ant .in. */
    left: calc(max(0px, (100% - var(--w)) / 2) + var(--pad));
    bottom: clamp(14px, 3vh, 34px);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-decoration: none;
  }
  .toliau__linija {
    display: block;
    width: 28px;
    height: 1px;
    background: currentColor;
    transition: width 0.2s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .toliau:hover .toliau__linija {
    width: 46px;
  }
  .hero__tinklelis {
    display: flex;
    align-items: center;
    flex: 1;
    padding-right: 46%;
    padding-block: clamp(20px, 4vh, 52px) clamp(16px, 3vh, 40px);
  }
  .hero__tinklelis > :first-child {
    width: 100%;
    padding-block: clamp(20px, 3vw, 40px);
  }
  /* Tinklelio vaikai numatytai turi min-width:auto ir nesusitraukia mažiau
     nei turinys — nuotrauka išsilietų pro savo koloną (pamoka 5). */
  .hero__tinklelis > * {
    min-width: 0;
  }

  .hero__foto {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 46%;
    margin: 0;
    min-height: 0;
  }
  /* Laukas isitempia iki desinio lango krasto; .hero turi overflow:clip,
     tad horizontalaus slinkimo neatsiranda. */
  /* Laukas dabar sutampa su pacia figura - bleedinti nebereikia, nes
     figura jau prisiglaudusi prie desinio krasto. */
  .hero__foto__laukas {
    position: absolute;
    inset: 0;
    display: block;
  }
  /* Gyvenimiskas kadras uzima VISA paneli iki desinio krasto, su kieta
     briauna. Todel fono derinti nebereikia is viso: nuotrauka atrodo kaip
     nuotrauka, o ne kaip ant dangaus padeta dezute. Tai ir buvo visu
     ankstesniu „seseliu" priezastis - bandymas suderinti kadro fona su
     puslapio spalva. `scripts/islyginti-fona.py` lieka repo: jo prireiks,
     jei kada nors grazinsim dezute ant dangaus lauko.
     object-position 50 % 66 % - hero kadras nuo 09-13 yra „stalas" (dezute
     ant darbo stalo), ne kava: puodelis buvo didziausias ir sviesiausias
     daiktas ekrane ir pardavinejo kava, o ne dezute. 66 % laiko dezute ir
     maiseli kadre, o kompiuterio kampas lieka kaip kontekstas. */
  .hero__foto__laukas img {
    max-width: none;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    /* 76 %, ne 50 %: dėžutės centras kadre ~63 % pločio. Stačiuose
       tabletuose aukštas rėmas kirpdavo dėžutės dešinį kraštą (09-13 vakare). */
    object-position: 76% 66%;
  }

  .juosta__skyriklis {
    display: inline;
  }
  .juosta__in {
    flex-wrap: nowrap;
  }
  /* Faktų juosta: žodžiai nelūžta per pusę (09-13 vakare). Ties 780-1099 px
     penki punktai netelpa - paskutinis kartoja naujienų juostą, tad slepiam. */
  .juosta__in > span {
    white-space: nowrap;
  }
  @media (max-width: 1099px) {
    .juosta__in > span:last-child,
    .juosta__in > .juosta__skyriklis:nth-last-child(2) {
      display: none;
    }
  }

  .blokas {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 0 40px;
  }
  .blokas > * {
    min-width: 0;
  }

  .foto-juosta img {
    aspect-ratio: 2 / 1;
    object-position: 50% 46%;
  }

  .kaina {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) auto auto;
    grid-template-areas:
      "zyme zyme zyme zyme"
      "kiekis laikas viso vnt";
    align-items: baseline;
    gap: 0 24px;
    padding-block: 18px;
  }
  .kaina__zyme {
    position: static;
    margin: 0 0 8px;
  }
  .kaina--zymeta {
    padding-inline: 24px;
  }
  .kaina__laikas {
    text-align: left;
  }

  .blokas__platus {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 240px);
    gap: 48px;
    align-items: start;
  }
  .blokas__platus > * {
    min-width: 0;
  }

  /* ── Zemi ekranai ──────────────────────────────────────────────────
     Nesiojami su 125 % masteliu duoda ~760 CSS px auksčio. Ten hero turi
     susispausti, kad kalnagubris liktu pirmame ekrane. Blokai stovi
     DESKTOP bloko VIDUJE: uz jo ribu jie pralaimetu tam paciam desktop
     blokui - specifika ta pati, o jis faile paskutinis.             */
  @media (max-height: 900px) {
    .hero {
      padding-top: 10px;
    }
    .hero__tinklelis {
      padding-block: 14px 10px;
    }
    h1 {
      font-size: clamp(38px, min(7.5vw, 8.2vh), 68px);
    }
    .hero__h1 {
      margin-top: 14px;
    }
    .hero__sub {
      margin-top: 10px;
      font-size: 15px;
      max-width: 52ch;
    }
    .hero__veiksmas {
      margin-top: 16px;
    }
    .lustai {
      margin-top: 10px;
    }
    .netinka {
      font-size: 12px;
    }
    .galva {
      padding-block: 0;
    }
    .zenklas b {
      font-size: 28px;
    }
  }
  @media (max-height: 800px) {
    .hero__tinklelis {
      padding-block: 10px 8px;
    }
    .hero__tinklelis > :first-child {
      padding-block: clamp(10px, 1.6vw, 22px);
    }
  }
  @media (max-height: 740px) {
    .hero__h1 {
      margin-top: 8px;
    }
    .hero__sub {
      margin-top: 8px;
      font-size: 14px;
    }
    .hero__veiksmas {
      margin-top: 12px;
    }
    .lustai {
      margin-top: 8px;
    }
    .hero__tinklelis {
      padding-block: 10px 6px;
    }
    h1 {
      font-size: clamp(34px, min(7vw, 7.6vh), 58px);
    }
  }
}

/* ══ PARDAVIMO EIGA - DESKTOP (privalo likti failo GALE) ══════════════════ */

@media (min-width: 1024px) {
  /* 1. Du dideli skaiciai ir antspaudas tarp ju */
  .skaiciai__eile {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(24px, 4vw, 72px);
    margin-top: 26px;
  }
  .skaiciai .lankas-diagrama {
    width: clamp(150px, 13vw, 210px);
  }

  /* 2. Valanda kaireje, tekstas desineje */
  .siena__in {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(32px, 5vw, 96px);
    padding-block: clamp(44px, 5vw, 76px);
  }

  /* 3. Nuotrauka per puse ekrano, tekstas lygiuojamas su konteineriu */
  .naudojimas {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  /* Nuotrauka uzpildo langeli, bet jo AUKSCIO nenustato: portretinis
     960x1280 kadras su height:100% issitempdavo pagal savo proporcija, ir
     sekcija ties 1900 px isaugdavo iki 1267 px. Dabar aukšti diktuoja
     tekstas (ne mazesnis nei 620 px), o kadras tik kerpamas. */
  .naudojimas__foto {
    position: relative;
    min-height: 620px;
  }
  .naudojimas__foto img {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
  }
  .naudojimas__tekstas {
    align-self: center;
    padding-block: clamp(56px, 6vw, 104px);
    padding-left: clamp(44px, 5vw, 96px);
    padding-right: max(var(--pad), calc((100vw - var(--w)) / 2 + var(--pad)));
  }

  /* 4. Kainos - keturios kolonos, pazymeta apversta */
  .kainos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    border-top: 0;
  }
  .kainos li {
    display: flex;
  }
  .kaina {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    grid-template-columns: none;
    grid-template-areas: none;
    gap: 6px;
    margin: 0;
    padding: 46px 22px 22px;
    border: 1px solid var(--ink);
    background: var(--bone);
    transition:
      transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
      background-color 0.2s ease;
  }
  .kaina:hover {
    transform: translateY(-4px);
  }
  .kaina--zymeta {
    margin: 0;
    padding-inline: 22px;
    background: var(--ink);
    color: var(--snow);
  }
  .kaina__zyme {
    position: absolute;
    top: 20px;
    left: 22px;
    margin: 0;
  }
  .kaina__kiekis {
    font-size: 20px;
  }
  .kaina__vnt {
    margin-top: 12px;
    text-align: left;
    font-size: clamp(42px, 3.8vw, 64px);
    line-height: 0.95;
  }
  .kaina__vnt span {
    display: block;
    margin: 8px 0 0;
  }
  .kaina__viso {
    margin-top: 14px;
    text-align: left;
    font-size: 18px;
  }
  .kaina__laikas {
    font-size: 13px;
  }
  .kaina__rinktis {
    display: inline-block;
    margin-top: auto;
    padding-top: 22px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
  }
  .kaina__rinktis::after {
    content: " \2192";
  }

  .palyginimas {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .palyginimas__puse {
    padding: clamp(28px, 3vw, 48px);
  }
  .palyginimas__puse + .palyginimas__puse {
    border-top: 0;
    border-left: 1px solid var(--ink);
  }

  /* 5. Vardai viena eile */
  .mes__zmones {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }

  /* 6. DUK - antraste kaireje lieka vietoje */
  .duk-dalis__in {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(40px, 6vw, 120px);
    align-items: start;
  }
  /* 09-16 (Edvardas): antraštė nebelipni. Prilipusi ji slinkdavo žemyn kartu su
     langu ir atrodydavo, kad juda savo sekcijos atžvilgiu - dabar stovi savo
     vietoje ir nuslenka kartu su visu puslapiu. */
  .duk-dalis__kaire {
    position: static;
  }
  .duk-dalis__kaire h2 {
    font-size: clamp(40px, 4.6vw, 72px);
  }
  .duk-dalis .duk {
    margin-top: 0;
  }

  /* 7. Uzdarymas - tekstas ir dezute greta */
  .pabaiga__in {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(32px, 5vw, 80px);
    min-height: min(80vh, 780px);
    padding-block: clamp(40px, 5vw, 72px);
  }
  .pabaiga__foto {
    justify-self: end;
    width: 100%;
    max-width: 720px;
    margin: 0;
  }
}

/* ══ EIGA v3 - DESKTOP (privalo likti failo GALE) ═════════════════════════ */

@media (min-width: 1024px) {
  .kada__eile {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .kada__kortele {
    min-height: 300px;
    padding: 32px 30px 34px;
  }
}

/* ══ Kaip naudoti telpa i viena ekrana (09-13) ════════════════════════════
   Ties 1366x768 sekcija buvo 836 px, o po lipnia galva lieka 711 px - 125 px
   per daug. Suvalgydavo tuscios parastes (iki 104+104 px), dvieju eiluciu
   antraste, 22 px tarpai tarp zingsniu ir 22-30 px tarp bloku. Turinys
   nekeistas - tik oras. Blokas failo gale, kad laimetu pries ankstesnes
   taisykles su ta pacia specifika. */
@media (min-width: 1024px) {
  .naudojimas__tekstas {
    padding-block: clamp(32px, 3.2vw, 56px);
  }
  .naudojimas__tekstas h2 {
    font-size: clamp(30px, 2.8vw, 44px);
  }
  .naudojimas .zingsniai {
    gap: 12px;
    margin-top: 20px;
  }
  .naudojimas .zingsniai li {
    gap: 14px;
    font-size: 16px;
  }
  .naudojimas .zingsniai li::before {
    font-size: 34px;
  }
  .naudojimas .naudojimas__riba {
    margin-top: 18px;
  }
  .naudojimas .klausimai {
    margin-top: 16px;
  }
  .naudojimas .klausimai > div {
    padding-block: 10px;
  }
  .naudojimas .naudojimas__pastaba {
    margin-top: 10px;
  }
  .naudojimas .platus {
    margin-top: 16px;
  }
  .naudojimas .platus summary {
    padding-block: 12px;
    font-size: 16px;
  }
  .naudojimas .hero__veiksmas {
    margin-top: 20px;
  }
}

/* ══ Kaip naudoti v2 - vienas ekranas net nesiojame su 150 % masteliu ═════
   1920x1080 su Windows 150 % masteliu narsykle rodo ~1280x630 CSS px, o po
   lipnia galva lieka ~573 px. Anksciau vien nuotraukos min-height buvo 620 px.
   Dabar sekcijos aukstis = vienas ekranas (ne daugiau 760 px), nuotrauka ji
   uzpildo, o ne diktuoja; po zingsniais - viena zymu eilute vietoj triju
   bloku su linijomis; mygtukas pries suskleista sudeti. */
.zingsniai li {
  align-items: baseline;
}
.naudojimas__zymos {
  margin-top: 20px;
}
.naudojimas .hero__veiksmas {
  margin-top: 24px;
}
.naudojimas .platus {
  margin-top: 18px;
  border-top-color: var(--linija);
}
@media (min-width: 1024px) {
  .naudojimas {
    min-height: min(760px, calc(var(--ekr-s, 100svh) - var(--galva) - 1px));
  }
  .naudojimas__foto {
    min-height: 0;
  }
  .naudojimas__tekstas {
    padding-block: clamp(28px, 3vw, 48px);
  }
  .naudojimas__tekstas h2 {
    font-size: clamp(30px, min(2.8vw, 5.6vh), 44px);
  }
  .naudojimas .zingsniai {
    gap: 10px;
    margin-top: 18px;
  }
  .naudojimas .zingsniai li::before {
    font-size: 28px;
    line-height: 1;
  }
  .naudojimas .platus summary {
    padding-block: 10px;
    font-size: 15px;
  }
}

/* ══ Kaip naudoti - labai zemi ekranai (iki 660 px aukscio) ════════════════
   1024x600: siaurame stulpelyje zymos luzdavo i 3 eilutes, ir sekcija
   isaugdavo 36 px virs ekrano. Maziau oro ir kompaktiskesnes zymos. */
@media (min-width: 1024px) and (max-height: 660px) {
  .naudojimas__tekstas {
    padding-block: 16px;
  }
  .naudojimas .zingsniai {
    gap: 6px;
    margin-top: 12px;
  }
  .naudojimas__zymos {
    gap: 6px;
    margin-top: 14px;
  }
  .naudojimas__zymos li {
    padding: 6px 9px;
    font-size: 10px;
    letter-spacing: 0.12em;
  }
  .naudojimas .hero__veiksmas {
    margin-top: 16px;
  }
  .naudojimas .platus {
    margin-top: 12px;
  }
}

/* ══ Kaip naudoti - spalva ir lipni nuotrauka (09-13) ══════════════════════
   1. Spalva: smelio betono nuotrauka salia kaulo panelės - visas blokas buvo
      smelinis, o brando melynos jame buvo tik maza dezute kadre. Melyna
      panele daro sekcija hero veidrodziu (hero: melyna kaireje, foto
      desineje; cia atvirksciai) ir puslapis alternuoja melyna/kaulas.
   2. Atidarius „Visa sudėtis" sekcija isaugdavo nuo 573 iki 1215 px, o
      nuotrauka tempdavosi kartu ir virsdavo milziniska rankos iskarpa.
      Dabar desktope nuotrauka lieka vieno ekrano aukscio ir prilimpa po
      galva, kol slenki ilga sudeti. Uzdaryta sekcija atrodo taip pat. */
.naudojimas {
  background: var(--sky);
}
/* Ant melynos pilki tekstai (--mid) neturi kontrasto - kaip ir .dalis--sky. */
.naudojimas .duom__k,
.naudojimas .duom__vnt,
.naudojimas .tekstas,
.naudojimas .isnasos {
  color: var(--ink);
}
.naudojimas .duom__eil,
.naudojimas .isnasos {
  border-color: var(--linija);
}
@media (min-width: 1024px) {
  .naudojimas {
    align-items: start;
  }
  .naudojimas__foto {
    position: sticky;
    top: calc(var(--galva) + 1px);
    height: min(760px, calc(var(--ekr-s, 100svh) - var(--galva) - 1px));
  }
}

/* Atidarius sudeti aukstame ekrane (pvz. 1900x950) nuotrauka buvo 760 px, o
   laisvo ekrano - 883 px: slenkant po ja kaireje likdavo tuscias melynas
   tarpas. Kai sudetis atidaryta, lipni nuotrauka uzpildo visa ekrano aukšti.
   Uzdaryta sekcija lieka ne aukstesne nei 760 px. */
@media (min-width: 1024px) {
  .naudojimas:has(#sudetis[open]) .naudojimas__foto {
    height: calc(var(--ekr-s, 100svh) - var(--galva) - 1px);
  }
}

/* ══ Kada v2 (09-13) ═══════════════════════════════════════════════════════
   Buvo: korteles priverstinai 300 px, o turinio jose ~100-130 px (po ~180 px
   tuscios vietos), dvi konturines kaulo korteles ant kaulo fono atrode kaip
   eskizas, antraste luzdavo su vienišu „nėra.", o ties 1280x630 sekcija
   (607 px) netilpo i ekrana (573 px).
   Dabar: aukšti lemia turinys (visos trys lygios), korteles - dezutes
   spalvomis be konturo (juoda / melyna / balta), antraste vienoje eiluteje,
   maziau oro. */
.kada h2 {
  max-width: none;
}
.kada__eile {
  margin-top: 28px;
}
.kada__kortele {
  border: 0;
  background: var(--snow);
}
.kada__kortele--pagrindine {
  background: var(--ink);
  color: var(--snow);
}
.kada__kortele:nth-child(2) {
  background: var(--sky);
}
@media (min-width: 1024px) {
  .kada {
    padding-block: clamp(36px, 4vw, 60px);
  }
  .kada__kortele {
    min-height: 0;
    padding: 28px 28px 30px;
  }
}
@media (min-width: 1024px) and (max-height: 660px) {
  .kada {
    padding-block: 28px;
  }
  .kada__eile {
    margin-top: 20px;
  }
  .kada__kortele {
    padding: 22px 24px 24px;
  }
}

/* ══ Kalnagubris pries poraste - be siules (09-13) ════════════════════════
   Kalnu aukstis (9,5vw) nera sveikas pikseliu skaicius (pvz. 121,6 px), tad
   apatiniame pikselyje prasisviesdavo melynas SVG fonas - plona sviesi linija
   tarp kalnu ir poraštės. Poraštė uzeina ant paskutinio pikselio. */
svg.kalnas {
  margin-bottom: -1px;
}

/* ══ Kada v3 (09-13) - keturios situacijos, 2x2 ═══════════════════════════
   Pridetas „Prieš salę". Keturios eileje netilptu: kortele ~270 px, o
   „Susitikimas" tokiu dydziu - ~290 px. Todel desktope 2x2, spalvos
   istrizai: juoda / melyna / melyna / juoda. */
.kada__kortele:nth-child(2),
.kada__kortele:nth-child(3) {
  background: var(--sky);
  color: var(--ink);
}
.kada__kortele:nth-child(4) {
  background: var(--ink);
  color: var(--snow);
}
@media (min-width: 1024px) {
  .kada__eile {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .kada__kortele {
    padding: 24px 28px 26px;
  }
}

/* ══ Hero antraste be kavos (09-13) ═══════════════════════════════════════
   Nauja antraste („100 mg kofeino. Be puodelio, be pertraukos.") ilgesne nei
   buvusi. Hero teksto stulpelis desktope tik ~609 px, o bendra h1 taisykle
   leidzia iki 76 px - ties 1440 px antraste luzdavo i 4, ties 1900 px i 5
   eilutes. Klase (.hero__h1) specifiskesne uz h1, tad laimi ir pries zemu
   ekranu h1 taisykles. */
@media (min-width: 780px) {
  .hero__h1 {
    font-size: clamp(36px, min(4.2vw, 7.4vh), 60px);
  }
}

/* ══ Uzdarymo antraste be kavos (09-13) ═══════════════════════════════════
   Ta pati nauja antraste pusės plocio stulpelyje ties 64 px nebetilpo:
   „100 mg kofeino." luzdavo per puse ir antraste virsdavo 4 eilutemis. */
@media (min-width: 1024px) {
  .pabaiga__tekstas h2 {
    max-width: none;
    font-size: clamp(32px, 3.4vw, 52px);
  }
}

/* ══ Kada v4 (09-13) - trys situacijos kaip BRITE + judesys ═══════════════
   Darbas / Prieš salę / 15:00. Desktope trys kolonos, spalvos melyna /
   juoda / melyna. Judesys savas, ne BRITE kopija: korteles pasirodo po
   viena, uzvedus pakyla ir didysis zodis prasiplecia. */
.kada__kortele:nth-child(1),
.kada__kortele:nth-child(3) {
  background: var(--sky);
  color: var(--ink);
}
.kada__kortele:nth-child(2) {
  background: var(--ink);
  color: var(--snow);
}
@media (min-width: 1024px) {
  .kada__eile {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .kada__kortele {
    padding: 28px 28px 30px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .kada__kortele {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .kada__zodis {
    transition: letter-spacing 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  /* Pasirodymas po viena. Sarasas pats yra .rodos (1 punktas skripte), tad
     korteles ijungiamos kartu su juo, bet su pakopa. */
  .kada__eile.rodos .kada__kortele {
    opacity: 0;
    transform: translateY(22px);
    transition:
      opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .kada__eile.rodos--matomas .kada__kortele {
    opacity: 1;
    transform: none;
  }
  .kada__eile.rodos--matomas .kada__kortele:nth-child(2) {
    transition-delay: 0.09s;
  }
  .kada__eile.rodos--matomas .kada__kortele:nth-child(3) {
    transition-delay: 0.18s;
  }
  /* Uzvedimas - specifiskesnis uz pasirodyma, kitaip transform: none ji
     uzmustu; ir be vėlavimo, kad antra ir trecia kortele reaguotu iskart. */
  .kada__eile.rodos--matomas .kada__kortele:hover,
  .kada__kortele:hover {
    transform: translateY(-6px);
    transition-delay: 0s;
  }
  .kada__kortele:hover .kada__zodis {
    letter-spacing: -0.01em;
  }

  /* Kelio žingsniai - tas pats užvedimas kaip „Kada" kortelėse: blokas kyla,
     numeris truputį susispaudžia. Linija kyla kartu, nes ji ant to paties
     elemento - taip pakyla visas žingsnis, ne tik tekstas. */
  .kelias__zingsnis {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .kelias__zingsnis::before {
    transition: letter-spacing 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .kelias__zingsnis:hover {
    transform: translateY(-6px);
  }
  .kelias__zingsnis:hover::before {
    letter-spacing: -0.06em;
  }

  /* Nuotraukos isryškėja ikeltos (klase js-vaizdai uzdeda skriptas). */
  .js-vaizdai img[loading="lazy"] {
    transition: opacity 0.7s ease;
  }
  .js-vaizdai img[loading="lazy"]:not(.ikelta) {
    opacity: 0;
  }
}

/* ══ Kada ikonos (09-13) ════════════════════════════════════════════════════
   Savos linijines ikonos, ne BRITE kopija: kompiuteris, hantelis, laikrodis
   ties 15:00. Tiesiai HTML'e (SVG) - joks papildomas uzklausimas. Spalva is
   korteles (currentColor), tad ant melynos - rasalas, ant juodos - balta. */
.kada__ikona {
  display: block;
  width: 44px;
  height: 44px;
  margin-bottom: 6px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (prefers-reduced-motion: no-preference) {
  .kada__ikona {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    transform-origin: 0 50%;
  }
  .kada__kortele:hover .kada__ikona {
    transform: scale(1.1);
  }
}

/* ══ Kada v5 (09-13) ══════════════════════════════════════════════════════
   „Darbas/studijos" - ilgiausias zodis. Dydis parinktas taip, kad tilptu
   vienoje eiluteje nuo 1024 iki 1920 px, net hover metu (letter-spacing
   tada platėja ~0,03em). 09-19: nuotraukų kortelėms galutines lubas nustato
   .kada__eile--foto taisyklė failo gale (26 px). */
@media (min-width: 1024px) {
  .kada__eile .kada__zodis {
    font-size: clamp(26px, 2.3vw, 36px);
  }
}

/* ══ Kaina, Kas mes, DUK - po viena ekrana (09-13) ════════════════════════
   Tikslas - 1280x630 (1920x1080 su 150 % masteliu). Kainoje mygtukas turi
   matytis kartu su kortelemis: tada lipni juosta pasislepia pati, nes jos
   stebetojas ziuri i visus .hero__veiksmas. */
@media (min-width: 1024px) {
  .pirkimas,
  .mes,
  .duk-dalis {
    padding-block: clamp(40px, 7vh, 76px);
  }

  /* Kaina: antraste, keturios korteles, apacioje viena eile -
     mygtukas su 18+ kaireje, saskaita ir pristatymas desineje. */
  .pirkimas > .in {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 40px;
  }
  .pirkimas > .in > * {
    grid-column: 1 / -1;
    min-width: 0;
  }
  .pirkimas__h {
    font-size: clamp(32px, min(3.8vw, 7.2vh), 64px);
  }
  .pirkimas .kainos {
    margin-top: clamp(20px, 4vh, 40px);
  }
  .kaina {
    gap: 4px;
    padding: 40px 20px 18px;
  }
  .kaina__zyme {
    top: 16px;
    left: 20px;
  }
  .kaina__kiekis {
    font-size: 18px;
  }
  .kaina__vnt {
    margin-top: 6px;
    font-size: clamp(36px, min(3.4vw, 6.6vh), 60px);
  }
  .kaina__vnt span {
    margin-top: 6px;
  }
  .kaina__viso {
    margin-top: 8px;
    font-size: 17px;
  }
  .kaina__rinktis {
    padding-top: 12px;
  }
  .kaina:not(.kaina--zymeta):hover {
    background: var(--snow);
  }
  .kaina__rinktis::after {
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .kaina:hover .kaina__rinktis::after {
    transform: translateX(5px);
  }
  .pirkimas > .in > .pirkimas__veiksmas {
    grid-column: 1;
    grid-row: 4 / 6;
    align-self: center;
    margin-top: clamp(18px, 3.4vh, 32px);
  }
  .pirkimas > .in > .pirkimas__imonei {
    grid-column: 2;
    grid-row: 4;
    align-self: end;
    margin-top: 0;
    font-size: 14px;
    text-align: right;
  }
  .pirkimas > .in > .isnasos {
    grid-column: 2;
    grid-row: 5;
    align-self: start;
    margin-top: 4px;
    padding-top: 0;
    border-top: 0;
    text-align: right;
  }

  /* Kas mes: istorija kaireje, trys zmones desineje - nebera tuscios puses. */
  .mes > .in {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    column-gap: clamp(40px, 6vw, 120px);
  }
  .mes > .in > * {
    min-width: 0;
  }
  .mes__istorija {
    grid-column: 1;
    grid-row: 2;
    max-width: 30ch;
    font-size: clamp(24px, min(2.7vw, 5.2vh), 44px);
  }
  .mes__zmones {
    grid-column: 2;
    grid-row: 1 / 3;
    grid-template-columns: none;
    align-self: end;
    gap: 0;
    margin: 0;
    padding: 0;
    border-top: 0;
  }
  .mes__zmones li {
    padding-block: 14px;
    border-top: 1px solid var(--mid);
  }
  .mes__zmones li:last-child {
    border-bottom: 1px solid var(--mid);
  }

  /* DUK: tankesnes eilutes zemuose ekranuose */
  .duk__vnt summary {
    padding-block: clamp(11px, 2vh, 18px);
    font-size: clamp(16px, 1.4vw, 19px);
  }
  .duk-dalis__kaire h2 {
    font-size: clamp(40px, min(4.6vw, 9vh), 72px);
  }
}

@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .kainos.rodos li {
    opacity: 0;
    transform: translateY(22px);
    transition:
      opacity 0.6s ease,
      transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .kainos.rodos--matomas li {
    opacity: 1;
    transform: none;
  }
  .kainos.rodos li:nth-child(2) {
    transition-delay: 0.07s;
  }
  .kainos.rodos li:nth-child(3) {
    transition-delay: 0.14s;
  }
  .kainos.rodos li:nth-child(4) {
    transition-delay: 0.21s;
  }
}

/* Kaina - zemi ekranai (nesiojami su 150 % masteliu): mygtukas turi tilpti
   kartu su kortelemis. */
@media (min-width: 1024px) and (max-height: 700px) {
  .pirkimas {
    padding-block: 30px;
  }
  .kaina {
    padding-top: 36px;
  }
  .kaina__zyme {
    top: 14px;
  }
  .kaina__rinktis {
    padding-top: 8px;
  }
}

/* ══ Kaina - smulkmenos (09-13) ═══════════════════════════════════════════
   Apatine eile stovi paskutiniuose 12 % ekrano, kur atsiradimo stebetojas
   dar nesuveikia: kai mygtukas jau matomas, kartu parodom ir sasiskaitos
   bei pristatymo eilutes. */
/* 09-13: ties 1024x600 ir mygtukas stovi apatiniuose 12 % - rodom visa eile,
   kai tik matomos korteles. */
.kainos.rodos--matomas ~ .pirkimas__veiksmas,
.kainos.rodos--matomas ~ .pirkimas__imonei,
.kainos.rodos--matomas ~ .isnasos,
.pirkimas__veiksmas.rodos--matomas ~ .pirkimas__imonei,
.pirkimas__veiksmas.rodos--matomas ~ .isnasos {
  opacity: 1;
  transform: none;
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .kaina__zyme {
    letter-spacing: 0.14em;
  }
}

/* ══ Kainos antraste - 16 maiseliu (09-13) ════════════════════════════════
   Antra eilute „Nuo 27 € pristatymas nemokamas." ilgesne uz sena, ir ties
   64 px ji luzdavo i trecia eilute. Konteineris visur 1128 px, tad lubos
   nustatomos pagal ji. */
@media (min-width: 1024px) {
  .pirkimas__h {
    font-size: clamp(32px, min(3.8vw, 7.2vh), 50px);
  }
}

/* ══ Kainos korteles - pasirinkimas vietoje nuorodos (09-13) ═══════════════
   Kortele dabar <button aria-pressed>. Pazymejimas (kaina--zymeta) keliauja
   su pasirinkimu - ji perkelia kiekio skriptas, tad visos senos apversto
   stiliaus taisykles (mobile ir desktop) galioja be kopijavimo.
   Naršykles mygtuko numatytieji stiliai nuimami per :where() - nulinis
   specifiskumas, kad nepermustu .kaina remelio ir fono taisykliu. */
:where(button.kaina) {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
button.kaina--zymeta {
  color: var(--snow);
}
button.kaina:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.kaina__taip {
  display: none;
}
.kaina[aria-pressed="true"] .kaina__ne {
  display: none;
}
.kaina[aria-pressed="true"] .kaina__taip {
  display: inline;
}
.kaina[aria-pressed="true"] .kaina__rinktis::after {
  content: "\00a0\2713";
}
@media (min-width: 1024px) {
  .kaina {
    transition:
      transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
      background-color 0.2s ease,
      color 0.2s ease;
  }
}
/* Mygtukas bloko konteineryje susitraukia iki turinio. Grid langelyje jis
   issitempia, ir pazymetos eilutes neigiamos parastes vel veikia. */
@media (max-width: 1023px) {
  .kainos li {
    display: grid;
  }
}

/* ══ Kainos korteles - dezutes (09-13) ═══════════════════════════════════
   Spalva is paties produkto, ne is skoniu: persikine ar vynuogine kortele
   atrodytu kaip PEACH ar GRAPE skonis. Kiekviena kortele rodo, kiek dezuciu
   gauni - dangteliai is virsaus, sutankinti kaip krūvelė. Absoliuciai
   virsuje desineje, tad sekcija neaukseja. Mobile - veliau. */
.kaina__dezutes {
  display: none;
}
.dezute__dangtelis {
  fill: var(--sky);
  stroke: var(--ink);
  stroke-width: 1.5;
}
.dezute__rieveta {
  fill: none;
  stroke: var(--ink);
  stroke-opacity: 0.3;
}
.dezute__kalnai {
  fill: var(--ink);
}
.dezute__sniegas {
  fill: var(--snow);
}
@media (min-width: 1024px) {
  .kaina__dezutes {
    --d: 22px;
    --z: 12px;
    position: absolute;
    top: 38px;
    right: 18px;
    display: grid;
    grid-template-columns: repeat(var(--st, 1), var(--z));
    grid-auto-rows: var(--z);
    padding: 0 calc(var(--d) - var(--z) + var(--z) / 2)
      calc(var(--d) - var(--z)) 0;
    pointer-events: none;
  }
  .kaina__dezutes[data-n="3"],
  .kaina__dezutes[data-n="6"] {
    --st: 3;
  }
  .kaina__dezutes[data-n="12"] {
    --st: 6;
  }
  .kaina__dezutes svg {
    display: block;
    width: var(--d);
    height: var(--d);
    overflow: visible;
  }
  /* Antra eile pasislenka per puse zingsnio - krūvelė, ne lentele. */
  .kaina__dezutes[data-n="6"] svg:nth-child(n + 4),
  .kaina__dezutes[data-n="12"] svg:nth-child(n + 7) {
    translate: calc(var(--z) / 2) 0;
  }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .kaina__dezutes {
    --d: 18px;
    --z: 10px;
    right: 14px;
  }
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  @keyframes dezute-pop {
    0% {
      scale: 0.4;
    }
    60% {
      scale: 1.15;
    }
    100% {
      scale: 1;
    }
  }
  .kaina[aria-pressed="true"] .kaina__dezutes svg {
    animation: dezute-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: calc(var(--i) * 30ms);
  }
}

/* ══ Kainos korteles - pristatymas kiekvienoje (09-13) ═══════════════════
   Vienoda eilute visose keturiose: 1 - kaina, nuo 3 - melynas zenkliukas.
   Virsutinio zenkliuko nebeliko, tad ir 40 px tuscio virsaus. */
.kaina__pristatymas {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 6px;
  font-size: 13px;
}
.kaina__pristatymas--nemokamas {
  padding: 3px 8px 3px 6px;
  background: var(--sky);
  color: var(--ink);
  font-weight: 600;
}
.kaina__pristatymas--nemokamas::before {
  content: "\2713\00a0";
}
@media (min-width: 1024px) {
  .kaina {
    padding-top: 24px;
  }
  .kaina__dezutes {
    top: 22px;
  }
  .kaina__pristatymas {
    margin-top: 8px;
  }
}

/* ══ Kainos korteles - siauri desktop 1024-1279 (09-13) ══════════════════
   Ties 1024 kortele turi ~176 px vidaus: zenkliukas ir „Pusantro menesio"
   luzdavo i dvi eilutes, o sekcija nebetilpo i ekrana. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .kaina {
    padding-inline: 14px;
  }
  .kaina__laikas,
  .kaina__pristatymas {
    font-size: 12px;
  }
  .kaina__pristatymas--nemokamas {
    padding-inline: 5px 7px;
  }
  .kaina__dezutes {
    right: 10px;
  }
}
.kaina__pristatymas--nemokamas {
  white-space: nowrap;
}

/* ══ „Pirkti MINT" veda i kainas (09-13) ═══════════════════════════════════
   Hero ir „Kaip naudoti" mygtukai nebemeta i krepseli, o nuslenka iki
   kainu. Kaina turi atsistoti tiesiai po galva, kitaip 1280x630 ekrane
   apatine eile su mygtuku nukristu uz krasto. */
#kaina {
  scroll-margin-top: calc(var(--galva) - 8px);
}

/* ══ Lipni juosta v2, „Pirkimas", poraštė v2 (09-13) ══════════════════════
   Edvardas: juostai reikia geresnio dizaino, „PYK MINT" sekcija neaiški
   (kartojo hero), poraštė nuobodi. */

/* ── Lipni juosta: tamsi; produktas, kiekis su sutaupymu, kaina mygtuke ── */
.pirkti {
  background: var(--mid);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--snow);
}
.pirkti__in {
  gap: 24px;
  padding-block: 12px;
}
.pirkti__produktas {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.pirkti__dezute {
  flex: none;
  width: 40px;
  height: 40px;
}
.pirkti .pirkti__kaina {
  display: block;
  margin: 0;
  min-width: 0;
  font-size: 12.5px;
  line-height: 1.4;
}
.pirkti__pav {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.pirkti .pirkti__kaina [data-eil] {
  display: block;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.72);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pirkti .kiekis {
  display: grid;
  place-items: center;
  gap: 4px;
  min-width: 66px;
  padding: 8px 10px 7px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: transparent;
  color: var(--snow);
}
.pirkti .kiekis b {
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
}
.pirkti .kiekis small {
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--sky);
}
.pirkti .kiekis:hover {
  border-color: var(--snow);
}
.pirkti .kiekis[aria-pressed="true"] {
  border-color: var(--sky);
  background: var(--sky);
  color: var(--ink);
}
.pirkti .kiekis[aria-pressed="true"] small {
  color: var(--ink);
}
.pirkti .kiekis:focus-visible,
.pirkti .pirkti__cta:focus-visible {
  outline-color: var(--sky);
}
.pirkti .pirkti__cta {
  border-color: var(--sky);
  background: var(--sky);
  color: var(--ink);
}
.pirkti .pirkti__cta:hover {
  border-color: var(--snow);
  background: var(--snow);
  color: var(--ink);
}
.pirkti .pirkti__cta b {
  font-weight: 900;
  letter-spacing: 0.06em;
}
@media (min-width: 1024px) {
  .pirkti .mygtukas--maza {
    padding: 14px 22px;
    font-size: 12px;
  }
}
@media (max-width: 779px) {
  .pirkti__produktas {
    flex: 1 1 100%;
  }
  .pirkti__dezute,
  .pirkti__pav {
    display: none;
  }
  .pirkti .kiekis {
    flex: 1 1 0;
    min-width: 0;
    padding: 6px 4px;
  }
  .pirkti .kiekis b {
    font-size: 14px;
  }
  .pirkti .kiekis small {
    font-size: 9px;
  }
}

/* ── „Pirkimas": keturi faktai prieš pirkimą ─────────────────────────────── */
.pazadai {
  background: var(--sky);
}
.pazadai__in {
  display: grid;
  gap: 32px;
  padding-block: clamp(48px, 8vw, 88px) clamp(36px, 6vw, 64px);
}
.pazadai h2 {
  margin-top: 10px;
  font-size: clamp(32px, 4.4vw, 56px);
  font-variation-settings:
    "wdth" 125,
    "wght" 800;
  line-height: 0.94;
}
.pazadai .hero__veiksmas {
  margin-top: 26px;
}
.pazadai__sarasas {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ink);
}
.pazadas {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-content: start;
  column-gap: 16px;
  row-gap: 4px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(22, 24, 28, 0.22);
}
.pazadas__ikona {
  grid-row: 1 / 3;
  width: 40px;
  height: 40px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pazadas h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.pazadas p {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
}
@media (min-width: 1024px) {
  .pazadai__in {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
    column-gap: clamp(40px, 6vw, 120px);
  }
  .pazadai__sarasas {
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
  }
  .pazadas {
    padding: 26px 0;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .pazadas__ikona {
    transform-origin: 0 50%;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .pazadas:hover .pazadas__ikona {
    transform: scale(1.1);
  }
}

/* ── Poraštė v2: stulpeliai, teisinis tekstas, didelis ženklas ──────────── */
.porastė {
  overflow: clip;
  padding-block: clamp(56px, 7vw, 88px) 96px;
}
.porastė__stulpai {
  display: grid;
  gap: 36px;
}
.porastė__apie p {
  max-width: 32ch;
  margin: 18px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}
.porastė__apie .porastė__amzius {
  display: inline-block;
  margin-top: 16px;
  padding: 3px 8px;
  border: 1px solid var(--sky);
  color: var(--sky);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.porastė__antraste {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--far);
}
.porastė__stulpas ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
}
.porastė__stulpas a {
  border-bottom-color: transparent;
}
.porastė__stulpas a:hover {
  border-bottom-color: var(--snow);
}
.porastė__stulpas .porastė__zymos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.porastė__zymos li {
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  font-size: 13px;
  font-weight: 600;
}
.porastė .porastė__teise {
  max-width: none;
  margin-top: 48px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.62);
}
.porastė__apacia {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
  margin: 16px 0 0;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.62);
}
/* Didelis ženklas per visą plotį: tas pats Archivo 900 ir -0,05 em kaip
   galvoje, tik didesnis. Netempiamas - plotį duoda šrifto dydis. */
.porastė__didelis {
  margin: 32px 0 0;
  font-size: min(calc((100vw - 2 * var(--pad)) / 2.2), 510px);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 0.74;
  white-space: nowrap;
  color: var(--sky);
  user-select: none;
}
@media (min-width: 1024px) {
  .porastė__stulpai {
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    gap: 48px;
  }
}

/* Poraštės apačia telefone (09-13): lipni juosta ten dviejų eilučių (~123 px),
   tad 96 px apačios nepakakdavo - didžiojo ženklo apačią uždengdavo juosta. */
/* 09-13 vakare: lipni pirkimo juosta pašalinta, 176 px vietos jai nebereikia. */

/* ══ Inkarai tiksliai po galva (09-13) ═══════════════════════════════════
   Edvardas: paspaudus „Kaip naudoti" sekcija sustodavo per žemai - virš jos
   likdavo faktų juosta. scroll-margin-top buvo fiksuoti 84 px, o galva ties
   1280x630 tik ~57 px. Dabar - pagal tą patį --galva, kurį naudoja ir
   lipni nuotrauka. Telefone galva kitokio aukščio - ten kol kas nekeičiam.
   #kaina turi savo taisyklę (id specifiškumas): -8 px, kad apačia tilptų. */
@media (min-width: 780px) {
  .dalis,
  .naudojimas {
    scroll-margin-top: calc(var(--galva) + 1px);
  }
  .platus {
    scroll-margin-top: calc(var(--galva) + 16px);
  }
}

/* ══ Poraštė v3 - dangtelis (09-13) ════════════════════════════════════════
   Puslapis baigiasi kaip PYK dangtelis: mėlynas laukas, didelis ženklas su
   FOCUS POUCHES, kalnagūbris ir rašalo juosta apačioje. v2 (tamsi, didelis
   mėlynas PYK) buvo tiesiog dar vienas tamsus blokas be ryšio su produktu. */
.porastė.porastė--dangtelis {
  overflow: clip;
  padding: 0;
  border-top: 1px solid var(--ink);
  background: var(--sky);
  color: var(--ink);
}
.porastė--dangtelis .porastė__in {
  padding-top: clamp(48px, 6vw, 80px);
}
.porastė--dangtelis a {
  color: var(--ink);
  border-bottom-color: transparent;
}
.porastė--dangtelis a:hover {
  border-bottom-color: var(--ink);
}
.porastė--dangtelis .porastė__apie p {
  margin-top: 0;
  color: rgba(22, 24, 28, 0.78);
}
.porastė--dangtelis .porastė__apie .porastė__amzius {
  margin-top: 16px;
  border-color: var(--ink);
  color: var(--ink);
}
.porastė--dangtelis .porastė__antraste {
  color: rgba(22, 24, 28, 0.58);
}
.porastė--dangtelis .porastė__zymos li {
  border-color: rgba(22, 24, 28, 0.32);
}

/* Didelis ženklas - tas pats užraktas kaip galvoje (PYK + FOCUS POUCHES),
   tik didesnis. Prierašas SVG, tad visada lygiai PYK pločio. */
.porastė--dangtelis .porastė__zenklas {
  margin: clamp(56px, 8vw, 112px) auto 0;
  color: var(--ink);
}
.porastė--dangtelis .porastė__zenklas b {
  font-size: min(calc((100vw - 2 * var(--pad)) / 2.6), 380px);
}
.porastė--dangtelis .porastė__zenklas .zenklas__prierasas {
  margin-top: min(3.2vw, 44px);
}

.porastė__kalnai {
  display: block;
  width: 100%;
  height: clamp(72px, 11vw, 170px);
  margin-top: clamp(40px, 6vw, 80px);
}

.porastė__juosta {
  margin-top: -1px;
  padding: 22px 0 96px;
  background: var(--ink);
  color: rgba(255, 255, 255, 0.66);
}
.porastė__juosta .porastė__teise {
  max-width: 76ch;
  margin: 0;
  padding-top: 0;
  border-top: 0;
  font-size: 12.5px;
  color: inherit;
}
.porastė__juosta .porastė__apacia {
  margin-top: 12px;
  color: inherit;
}

/* ══ Lipni juosta v3 (09-13) ════════════════════════════════════════════════
   Edvardas: smėlio spalvos, daugiau spalvų, mygtukai neturi važinėti, aiškios
   vietos, kur atsiranda ir dingsta.
   - Trys fiksuoti stulpeliai (1fr auto 1fr): kiekio mygtukai visada ekrano
     viduryje, nesvarbu, kiek ilga eilutė kairėje ar kaina mygtuke.
   - Mygtukas „Pirkti" pastovaus pločio, skaičiai tabular.
   - Įslenka ir išslenka (transform), ne dingsta. */
.pirkti {
  background: var(--bone);
  border-top: 1px solid var(--ink);
  color: var(--ink);
  animation: none;
  transform: translateY(calc(100% + 1px));
  visibility: hidden;
  transition:
    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.34s;
}
.pirkti.pirkti--rodoma {
  transform: none;
  visibility: visible;
  transition:
    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  .pirkti,
  .pirkti.pirkti--rodoma {
    transition: none;
  }
}
.pirkti .pirkti__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 24px;
}
/* Be justify-self: start - kitaip blokas platėja pagal tekstą ir užlenda ant
   kiekio mygtukų; ištemptas jis lieka savo stulpelyje, ilga eilutė baigiasi „…“. */
.pirkti__produktas {
  min-width: 0;
}
.pirkti .pirkti__kiekiai {
  justify-self: center;
}
.pirkti .pirkti__kaina [data-eil] {
  color: rgba(22, 24, 28, 0.7);
}
.pirkti .kiekis {
  min-width: 68px;
  border: 1px solid rgba(22, 24, 28, 0.3);
  background: var(--snow);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.pirkti .kiekis small {
  color: rgba(22, 24, 28, 0.62);
  font-weight: 700;
}
.pirkti .kiekis:hover {
  border-color: var(--ink);
}
.pirkti .kiekis[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--sky);
  color: var(--ink);
}
.pirkti .kiekis[aria-pressed="true"] small {
  color: var(--ink);
}
.pirkti .kiekis:focus-visible,
.pirkti .pirkti__cta:focus-visible {
  outline-color: var(--ink);
}
.pirkti .pirkti__cta {
  justify-self: end;
  justify-content: center;
  min-width: 220px;
  border-color: var(--ink);
  background: var(--ink);
  color: var(--snow);
}
.pirkti .pirkti__cta b {
  color: var(--sky);
  font-variant-numeric: tabular-nums;
}
.pirkti .pirkti__cta:hover {
  border-color: var(--ink);
  background: var(--peach);
  color: var(--ink);
}
.pirkti .pirkti__cta:hover b {
  color: var(--ink);
}
@media (max-width: 779px) {
  .pirkti .pirkti__in {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "produktas produktas"
      "kiekiai cta";
    row-gap: 8px;
    column-gap: 10px;
  }
  .pirkti__produktas {
    grid-area: produktas;
  }
  .pirkti .pirkti__kiekiai {
    grid-area: kiekiai;
    justify-self: stretch;
    min-width: 0;
  }
  .pirkti .kiekis {
    min-width: 0;
  }
  .pirkti .pirkti__cta {
    grid-area: cta;
    min-width: 132px;
  }
}

/* Poraštėje juosta nebesirodo (v3 zonos), tad jai vietos palikti nereikia. */
.porastė__juosta {
  padding-bottom: 32px;
}
@media (max-width: 779px) {
  .porastė__juosta {
    padding-bottom: 32px;
  }
}

/* ══ Lipni juosta v3 - visas tekstas (09-13) ══════════════════════════════
   Edvardas: tekstas nukirptas - pastumti mygtukus. Kairys stulpelis pastovaus
   pločio (telpa ilgiausia eilutė - 12 dėžučių), mygtukai iškart po juo. Plotis
   nepriklauso nuo teksto, tad perjungiant kiekį niekas nejuda. Siauresniame
   ekrane tekstas lūžta į antrą eilutę, o ne kerpamas. */
@media (min-width: 1280px) {
  .pirkti .pirkti__in {
    grid-template-columns: 540px auto minmax(0, 1fr);
  }
  .pirkti .pirkti__kiekiai {
    justify-self: start;
  }
}
@media (max-width: 1279px) {
  .pirkti .pirkti__kaina [data-eil] {
    overflow: visible;
    white-space: normal;
  }
}

/* Juosta telefone - pastovus aukštis (09-13): viena kiekio eilutė telpa į vieną
   eilutę, kita lūžta į dvi, ir mygtukai šokinėdavo aukštyn-žemyn. Visada 2 eilutės. */
@media (max-width: 779px) {
  .pirkti .pirkti__kaina [data-eil] {
    min-height: calc(2 * 1.4em);
  }
}

/* ══ Poraštė C - bėganti faktų eilutė (09-13) ═══════════════════════════════
   Edvardas pasirinko iš trijų maketų. Rašalo fonas - į jį pereina kalnagūbrio
   priekinis kalnas po „Pirkimas". Eilutė sukasi tik jei žmogus neprašė mažinti
   judesio (Edvardas: užvedus pelę NEstabdyti). Tarpai - margin, ne gap: tada du rinkiniai
   lygiai 50 % pločio ir ciklas be šuolio. */
.porastė.porastė--c {
  overflow: clip;
  padding: 0;
  border-top: 0;
  background: var(--ink);
  color: var(--snow);
}
.porastė--c a {
  color: var(--snow);
  border-bottom: 1px solid transparent;
  text-decoration: none;
}
.porastė--c a:hover {
  border-bottom-color: var(--snow);
}
.porastė--c .porastė__in {
  padding-block: clamp(28px, 3vw, 36px) 28px;
}
.porastė__eile {
  display: grid;
  gap: 24px;
}
.porastė__nuorodos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  font-size: 15px;
}
.porastė__nuorodos a {
  white-space: nowrap;
}
.porastė--c .porastė__zymos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.porastė__pabaiga {
  display: grid;
  gap: 16px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.porastė--c .porastė__teise {
  max-width: 78ch;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.6);
}
.porastė--c .porastė__apacia {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.6);
}
.porastė--c .porastė__amzius {
  display: inline-block;
  padding: 3px 7px;
  border: 1px solid var(--sky);
  color: var(--sky);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
@media (min-width: 1024px) {
  .porastė__eile {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 40px;
  }
  .porastė__nuorodos {
    justify-content: center;
  }
  .porastė__pabaiga {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 24px;
  }
}

/* ══ Poraštė - oficialūs mokėjimo logotipai (09-13) ═══════════════════════
   Baltos kortelės ant rašalo: Apple gairės nori šviesaus fono, o skirtingų
   spalvų ženklai (Mastercard, Omniva oranžinis) kortelėse atrodo vienodai.
   Logotipai nekeičiami - tik aukštis. Apple ženklas jau yra kortelė pats. */
.porastė__mokejimai {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.porastė__mokejimas {
  display: grid;
  place-items: center;
  min-width: 60px;
  height: 38px;
  padding: 0 10px;
  border-radius: 4px;
  background: var(--snow);
  color: var(--ink);
}
.porastė__mokejimas--tekstas {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.02em;
}
.porastė__logo {
  display: block;
  width: auto;
  max-width: none;
}
.porastė__logo--mastercard {
  height: 24px;
}
.porastė__logo--zodis {
  height: 15px;
}
.porastė__mokejimas--apple {
  min-width: 0;
  padding: 0;
  background: transparent;
}
.porastė__logo--apple {
  height: 38px;
}

/* Poraštė - logotipai apacioje desineje (09-13): virsuje su nuorodomis jie
   netilpo - ties 1280 nuorodos luzdavo i dvi eilutes. */
.porastė__desine {
  display: grid;
  gap: 14px;
}
@media (min-width: 1024px) {
  .porastė__eile {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .porastė__nuorodos {
    justify-content: flex-end;
  }
  .porastė__desine {
    justify-items: end;
  }
  .porastė--c .porastė__apacia {
    justify-content: flex-end;
  }
}

/* ══ Poraštė - vienspalviai logotipai (09-13) ═══════════════════════════════
   Edvardo pavyzdys: vienodo dydžio šviesios kortelės, visi ženklai viena
   tamsiai pilka spalva. Aukščiai suvienodinti optiškai, ne matematiškai:
   platūs žodžiai (Revolut Pay, Omniva) - pagal plotį. */
.porastė__mokejimas,
.porastė__mokejimas--apple {
  box-sizing: border-box;
  width: 64px;
  min-width: 0;
  height: 40px;
  padding: 0;
  border-radius: 5px;
  background: var(--snow);
}
.porastė__logo {
  width: auto;
  max-width: 50px;
}
.porastė__logo--visa {
  height: 14px;
}
.porastė__logo--mastercard {
  height: 22px;
}
.porastė__logo--apple {
  height: 19px;
}
.porastė__logo--revolut,
.porastė__logo--omniva {
  width: 48px;
  height: auto;
}
@media (max-width: 479px) {
  .porastė__mokejimas,
  .porastė__mokejimas--apple {
    width: 56px;
    height: 36px;
  }
  .porastė__logo--visa {
    height: 12px;
  }
  .porastė__logo--mastercard {
    height: 20px;
  }
  .porastė__logo--apple {
    height: 17px;
  }
  .porastė__logo--revolut,
  .porastė__logo--omniva {
    width: 42px;
  }
}

/* ══ Kas mes - trys portretai (09-13) ═══════════════════════════════════════
   Tikros nuotraukos vietoj AI iliustracijos ir inicialų dangtelių. Fonai
   skirtingi (ruda, pilka, dūmai) - nespalvotai jie tampa viena serija;
   užvedus pelę grįžta spalva. Kvadratai vienodu mastu: veidas ~30 % pločio. */
.mes__komanda {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 2vw, 20px);
  margin: clamp(28px, 5vw, 44px) 0 0;
  padding: 0;
  list-style: none;
}
.mes__narys {
  display: grid;
  align-content: start;
  gap: 3px;
  min-width: 0;
}
.mes__portretas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  margin-bottom: 10px;
  object-fit: cover;
  background: var(--mid);
  filter: grayscale(1) contrast(1.04);
}
.mes__narys:hover .mes__portretas {
  filter: none;
}
@media (prefers-reduced-motion: no-preference) {
  .mes__portretas {
    transition: filter 0.5s ease;
  }
}
.mes__vardas {
  font-size: clamp(14px, 1.4vw, 18px);
  font-weight: 700;
  line-height: 1.2;
}
.mes__narys .mes__role {
  font-size: clamp(12px, 1vw, 13px);
  line-height: 1.35;
  color: var(--far);
}
@media (min-width: 1024px) {
  .mes > .in {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
    grid-template-rows: auto 1fr;
    column-gap: clamp(40px, 5vw, 96px);
  }
  .mes h2.lankas {
    grid-column: 1;
    grid-row: 1;
  }
  .mes .mes__istorija {
    grid-column: 1;
    grid-row: 2;
    max-width: none;
    font-size: clamp(20px, min(1.9vw, 4vh), 30px);
  }
  /* Kompiuteryje - vertikalūs portretai, kaip kortelės; kvadratas apkerpamas
     tik iš šonų, veidai lieka centre. */
  .mes__portretas {
    aspect-ratio: 4 / 5;
  }
  .mes__komanda {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    margin: 0;
  }
}

/* ══ Kas mes - spalvotos kortelės (09-13) ═══════════════════════════════════
   Edvardas: „make it more colourful". Kiekvienas žmogus - viena iš trijų
   paletės spalvų (dangus, PEACH, GRAPE), kaip kainų kortelėse. Portretai
   natūralių spalvų - tonuoti (multiply) atrodė purvinai, tamsūs fonai
   virsdavo juodais. Užvedus pelę nuotrauka šiek tiek priartėja. */
.mes__narys {
  --tonas: var(--sky);
  gap: 2px;
  padding: clamp(6px, 0.9vw, 12px) clamp(6px, 0.9vw, 12px)
    clamp(12px, 1.3vw, 18px);
  background: var(--tonas);
  color: var(--ink);
}
.mes__narys:nth-child(2) {
  --tonas: var(--peach);
}
.mes__narys:nth-child(3) {
  --tonas: var(--grape);
}
.mes__remas {
  position: relative;
  display: block;
  overflow: hidden;
  margin-bottom: clamp(8px, 1vw, 14px);
  background: var(--tonas);
}
.mes__remas .mes__portretas,
.mes__narys:hover .mes__portretas {
  margin: 0;
  filter: none;
}
@media (prefers-reduced-motion: no-preference) {
  .mes__remas .mes__portretas {
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .mes__narys:hover .mes__portretas {
    transform: scale(1.05);
  }
}
.mes__narys .mes__vardas {
  padding-inline: 4px;
  color: var(--ink);
}
.mes__narys .mes__role {
  padding-inline: 4px;
  color: rgba(22, 24, 28, 0.72);
}

/* ══ Poraštė ploniau (09-13) ════════════════════════════════════════════════
   Edvardas: logotipai per dideli, Omniva nereikia. Bėganti faktų eilutė
   pašalinta 09-13 vakare. */
.porastė__mokejimai {
  gap: 6px;
}
.porastė__mokejimas,
.porastė__mokejimas--apple {
  width: 48px;
  height: 30px;
  border-radius: 4px;
}
.porastė__logo {
  max-width: 36px;
}
.porastė__logo--visa {
  height: 10px;
}
.porastė__logo--mastercard {
  height: 17px;
}
.porastė__logo--apple {
  height: 14px;
}
.porastė__logo--revolut {
  width: 38px;
  max-width: 38px;
}
@media (max-width: 479px) {
  .porastė__mokejimas,
  .porastė__mokejimas--apple {
    width: 48px;
    height: 30px;
  }
  .porastė__logo--visa {
    height: 10px;
  }
  .porastė__logo--mastercard {
    height: 17px;
  }
  .porastė__logo--apple {
    height: 14px;
  }
  .porastė__logo--revolut {
    width: 38px;
  }
}

/* ══ Kas mes - pareigos kaip lipdukai (09-13) ═══════════════════════════════
   Edvardas: „čia reikia žaismingiau". Pareigos - rašalo lipdukas su kortelės
   spalvos tekstu, užklijuotas ant nuotraukos apatinio krašto, kiekvienas
   pasviręs savaip. Užvedus pelę lipdukas atsitiesia su spyruokle.
   Tekstas nekeistas - tik forma. */
.mes__narys {
  --posukis: -3deg;
}
.mes__narys:nth-child(2) {
  --posukis: 2.5deg;
}
.mes__narys:nth-child(3) {
  --posukis: -1.5deg;
}
.mes__narys > .mes__remas {
  grid-area: 1 / 1;
}
.mes__narys > .mes__role {
  grid-area: 1 / 1;
  z-index: 1;
  align-self: end;
  justify-self: start;
  max-width: calc(100% - 12px);
  margin: 0 0 0 clamp(6px, 0.8vw, 12px);
  padding: 5px 9px 6px;
  background: var(--ink);
  color: var(--tonas);
  font-size: clamp(11px, 0.95vw, 13px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.01em;
  box-shadow: 3px 3px 0 rgba(22, 24, 28, 0.25);
  transform: translateY(45%) rotate(var(--posukis));
  transform-origin: left center;
}
.mes__narys > .mes__vardas {
  grid-row: 2;
  padding-top: clamp(16px, 1.8vw, 24px);
}
@media (prefers-reduced-motion: no-preference) {
  .mes__narys > .mes__role {
    transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .mes__narys:hover > .mes__role {
    transform: translateY(45%) rotate(0deg) scale(1.08);
  }
}

/* Telefone kortelės ~100 px pločio - lipdukas ant nuotraukos užlipdavo ant
   vardo ir lūždavo į 5 eilutes. Ten jis eina po vardu, mažesnis. */
@media (max-width: 779px) {
  .mes__narys > .mes__role,
  .mes__narys:hover > .mes__role {
    grid-area: auto;
    grid-row: 3;
    max-width: 100%;
    margin: 6px 0 0 2px;
    padding: 3px 6px 4px;
    font-size: 11px;
    box-shadow: 2px 2px 0 rgba(22, 24, 28, 0.25);
    transform: rotate(var(--posukis));
  }
  .mes__narys > .mes__vardas {
    padding-top: 0;
  }
}

/* ══ Kaip naudoti - spalvos (09-13) ═════════════════════════════════════════
   Edvardas: „gal spalvų įnešam". Žymos užpildytos trimis paletės spalvomis
   (sniegas, PEACH, GRAPE; dangus čia jau fonas), kaip „Kas mes" kortelėse.
   Žingsnių skaičiai - vėl paprasti Archivo 900 skaičiai, be dangtelių
   (09-13 vakare: apskritimai atrodė kaip mygtukai). Stulpelis pagal skaičių,
   ne 1.1em nuo teksto: telefone 44 px skaičius netilpdavo ir liesdavo tekstą. */
.zingsniai li {
  grid-template-columns: auto minmax(0, 1fr);
}
/* Skaičius stovėjo ant teksto bazinės linijos ir buvo iškilęs: jo vidurys
   4 px (kompe) ir 9 px (telefone) aukščiau nei didžiųjų raidžių vidurys.
   Nuleidžiam tiek, kad skaičiaus vidurys sutaptų su pirmos eilutės raidžių
   viduriu. Išmatuota 1440 ir 390 px pločiuose. */
.zingsniai li::before {
  min-width: 0.8em;
  transform: translateY(0.2em);
}
@media (min-width: 1024px) {
  .zingsniai li::before {
    transform: translateY(0.155em);
  }
}
.naudojimas__zymos li {
  background: var(--snow);
}
.naudojimas__zymos li:nth-child(2) {
  background: var(--peach);
}
.naudojimas__zymos li:nth-child(3) {
  background: var(--grape);
}

/* ══ Ekrano dydžiai (09-13 vakare) ═════════════════════════════════════════
   Pataisymai iš ekrano dydžių audito. Blokas failo gale sąmoningai: tos pačios
   specifikos taisyklės aukščiau apibrėžtos po kelis kartus, o šios turi
   laimėti. Kiekvienas pataisymas išmatuotas naršyklėje. */

/* Hero 780-1239 px: antraštė nebenukrenta nuo 62 iki 36 px ties 780,
   tekstas nebeliečia nuotraukos (buvo 4 px tarpas). */
@media (min-width: 780px) and (max-width: 1239px) {
  .hero__tinklelis > :first-child {
    padding-right: 24px;
  }
  .hero .hero__h1 {
    font-size: clamp(36px, 4.4vw, 54px);
  }
}

/* 780-1023 px: „Kada" kortelės buvo 792 px pločio juostos po vieną. */
@media (min-width: 780px) and (max-width: 1023px) {
  .kada__eile {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .kada__kortele {
    padding: 22px 18px 24px;
  }
  .kada__eile .kada__zodis {
    font-size: clamp(20px, 2.5vw, 26px);
  }
  .kada__kortele p:not(.kada__zodis) {
    font-size: 15px;
  }
}
/* 700-1023 px: kainų antraštė lūždavo į 3 eilutes su vienišu žodžiu. */
@media (min-width: 700px) and (max-width: 1023px) {
  .pirkimas__h {
    font-size: clamp(28px, 4.2vw, 44px);
  }
}

/* Uždarymo blokas nuo 1024 px: „Užsakai šiandien. Atsiimi paštomate."
   byrėdavo į 4 vieno žodžio eilutes siaurame stulpelyje. */
@media (min-width: 1024px) {
  .pazadai__in {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .pazadai h2 {
    font-size: clamp(30px, 3vw, 42px);
  }
}

/* Dideli ekranai: turinys nebeužstringa 1240 px, antraštė - 60 px. */
@media (min-width: 1680px) {
  :root {
    --w: 1440px;
  }
  .hero .hero__h1 {
    font-size: clamp(60px, min(3.4vw, 7.4vh), 76px);
  }
}
@media (min-width: 2200px) {
  :root {
    --w: 1600px;
  }
}

/* „Kas mes" lipdukai: be vieno žodžio paskutinėje eilutėje („jis"). */
.mes__narys > .mes__role {
  text-wrap: balance;
}

/* ══ Telefonas: mobile-first (09-13 vakare) ════════════════════════════════
   85-90 % pirkėjų - telefone, o čia buvo suspaustas kompiuterio puslapis:
   lipni galva 122 px dviem eilutėmis, produktas už pirmo ekrano, antraštė
   nukirpta 320-366 px, kainų eilutės lūžta į 3-4 eilutes, „Kada" - trys
   aukštos kortelės. Pataisymai patikrinti naršyklėje (mobilus auditas).
   Tik < 780 px - kompiuterio versija nekeičiama. Tekstai nekeisti. */
@media (max-width: 779px) {
  /* Galva - viena eilutė: ženklas ir krepšelis. Skilčių meniu („Kaip naudoti",
     „Sudėtis", „Kaina", „DUK") telefone nerodomas (sprendimas 09-13 vakare):
     puslapis yra vienas slinkimas, nuorodos lieka poraštėje. */
  .galva {
    flex-wrap: nowrap;
    gap: 10px;
    padding-block: 8px;
  }
  /* Ženklas su „FOCUS POUCHES" - toks pat kaip kompiuteryje (sprendimas 09-13). */
  .meniu {
    display: none;
  }
  .naujiena__plius {
    display: none;
  }

  /* Pagrindiniai mygtukai per visą plotį - nykščio zonoje. */
  .hero__veiksmas .mygtukas {
    width: 100%;
    justify-content: center;
  }
  .lustai {
    gap: 8px;
  }
  .lustas {
    min-height: 36px;
  }

  /* Faktai - 2 x 2, be kabančių skyriklių. Penktas punktas kartoja naujienų
     juostą, tad telefone jo nėra. */
  .juosta__in {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
    gap: 4px 24px;
  }
  .juosta__skyriklis,
  .juosta__in > span:last-child {
    display: none;
  }

  /* Kaip naudoti: kitas kadras nei hero (ranka su maišeliu), glaustesni žingsniai. */
  .naudojimas__foto img {
    aspect-ratio: 5 / 4;
    object-position: 22% 62%;
  }
  .naudojimas .zingsniai {
    gap: 16px;
    margin-top: 22px;
  }
  .naudojimas .zingsniai li::before {
    font-size: 36px;
  }
  .platus .duom__eil {
    padding-block: 10px;
  }

  /* Kada - trys glaustos eilutės vietoj trijų aukštų kortelių (924 → 541 px). */
  .kada .kada__eile {
    gap: 0;
    border-top: 1px solid var(--ink);
  }
  .kada .kada__eile .kada__kortele {
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 16px;
    padding: 16px 0;
    background: transparent;
    color: var(--ink);
    border: 0;
    border-bottom: 1px solid var(--linija);
  }
  .kada .kada__ikona {
    grid-row: 1 / span 3;
    width: 40px;
    height: 40px;
  }
  .kada .kada__zodis {
    font-size: 22px;
  }
  .kada .kada__kortele h3 {
    font-size: 12px;
    letter-spacing: 0.14em;
  }

  /* Kaina - 2 x 2 pakopos: kiekis ir sutaupymas nebelūžta, o pasirinkus
     pakopą mygtukas lieka ekrane. */
  .pirkimas__h {
    font-size: clamp(26px, 7vw, 32px);
  }
  .kainos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    border-top: 0;
  }
  .kaina,
  .kaina.kaina--zymeta {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "kiekis" "vnt" "viso" "laikas";
    margin: 0;
    padding: 12px 12px 14px;
    border: 1px solid var(--ink);
    text-align: left;
  }
  .kaina__vnt span {
    display: block;
    letter-spacing: 0.08em;
  }
  .kaina .kaina__pristatymas {
    white-space: normal;
    max-width: 100%;
  }
  /* Siauroje kortelėje viskas iš kairės: kiekis kairėje, o kaina dešinėje
     skaitėsi kaip dvi skirtingos kolonos. */
  .kainos .kaina > span {
    justify-self: start;
    text-align: left;
  }

  /* Kas mes - eilutės: portretas kairėje, vardas vienoje eilutėje, lipdukas
     be šešėlio (ženklo knyga - jokių šešėlių). */
  .mes__komanda {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .mes__narys {
    grid-template-columns: 88px minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 8px;
    align-items: center;
    padding: 10px 10px 16px;
  }
  .mes__narys > .mes__remas {
    grid-area: 1 / 1 / span 2 / 2;
  }
  .mes__narys > .mes__vardas {
    grid-area: 1 / 2;
    font-size: 17px;
  }
  .mes__narys > .mes__role,
  .mes__narys:hover > .mes__role {
    grid-area: 2 / 2;
    justify-self: start;
    font-size: 12px;
    box-shadow: none;
  }

  /* Smulkiausias tekstas buvo būtent pirkimo kelyje. */
  .tekstas,
  .pazadas p {
    font-size: 16px;
  }
  .inkaras {
    font-size: 15px;
  }
  .netinka {
    font-size: 14px;
  }
  .porastė .porastė__nuorodos {
    gap: 0 22px;
  }
  .porastė__nuorodos a {
    display: inline-block;
    padding-block: 10px;
  }
}

/* Stačias telefonas: produktas pirmame ekrane - nuotrauka virš antraštės. */
@media (max-width: 779px) and (orientation: portrait) {
  .hero {
    padding-top: 0;
  }
  .hero__tinklelis {
    display: flex;
    flex-direction: column;
  }
  .hero__foto {
    order: -1;
    margin: 0 calc(var(--pad) * -1) 0;
  }
  .hero__foto img {
    aspect-ratio: 16 / 10;
  }
  /* 40 px grindys nukirpdavo „be pertraukos." 320-366 px pločiuose. */
  .hero .hero__h1 {
    margin-top: 20px;
    font-size: min(40px, calc((100vw - 2 * var(--pad)) * 0.115));
  }
}
@media (max-width: 779px) and (orientation: portrait) and (max-height: 700px) {
  .hero__foto img {
    aspect-ratio: 2 / 1;
  }
}

/* Gulsčias telefonas: tekstas ir nuotrauka greta, mygtukas ekrane. */
@media (max-width: 779px) and (orientation: landscape) {
  .hero__tinklelis {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    column-gap: 24px;
  }
  .hero__foto {
    margin: 0 calc(var(--pad) * -1) 0 0;
  }
  .hero__foto img {
    aspect-ratio: auto;
    height: calc(var(--ekr-s, 100svh) - 91px);
  }
  .hero .hero__h1 {
    font-size: 30px;
  }
}

/* Lietimo ekranuose :hover „prilimpa" po paspaudimo - mygtukas likdavo
   persiko spalvos, DUK klausimas pilkas. any-hover, ne hover: kompiuteriai
   su lietimo ekranu turi ir pelę. */
@media (any-hover: none) {
  .mygtukas:hover {
    background: var(--ink);
    color: var(--snow);
  }
  .mygtukas:hover .mygtukas__rodykle {
    transform: none;
  }
  .krepselis:hover {
    background: var(--ink);
    color: var(--snow);
    border-color: var(--ink);
  }
  .duk__vnt summary:hover,
  .platus summary:hover {
    color: inherit;
  }
  .mes__narys:hover .mes__portretas {
    transform: none;
  }
}

/* ══ Hero: produktas studijoje (09-13 vakare) ══════════════════════════════
   Pasirinkta kryptis „Produktas studijoje": tikra galutinė dėžutė ant dangaus
   lauko vietoj renderio su kompiuteriu. Kadro fonas išlygintas iki #B4D2E8
   (scripts/islyginti-fona.py, dėžutės sritis apsaugota, kad neišplautų
   dangtelio spaudos), tad nuotrauka ir hero - vienas laukas, be kraštų.
   „contain", ne „cover": kraštų nebėra, tad dėžutė visada matosi visa. */
/* Skonio lustai nebeperdažo hero - persiko laukas aplink mėlyną kadrą būtų
   siūlė. */
.hero[data-skonis] {
  --sky: #b4d2e8;
}
.hero__foto img,
.hero__foto__laukas img {
  object-fit: contain;
  object-position: 50% 50%;
}
@media (max-width: 779px) and (orientation: portrait) {
  .hero__foto img {
    aspect-ratio: 4 / 3;
  }
}
@media (max-width: 779px) and (orientation: portrait) and (max-height: 700px) {
  .hero__foto img {
    aspect-ratio: 16 / 10;
  }
}

/* ══ Kaina telefone - kortelės kaip kompiuteryje (09-14) ════════════════════
   Emilis: dėžučių pasirinkimai balti, pasirinktas juodas - kaip desktop.
   Telefone nepasirinkta kortelė buvo permatoma ant mėlyno fono, tad ir
   „Pristatymas nemokamas" žymė (mėlyna) joje nesimatė. Tik iki 1023 px -
   kompiuterio dizainas nekeičiamas. */
@media (max-width: 1023px) {
  .kainos .kaina:not(.kaina--zymeta) {
    background: var(--bone);
    color: var(--ink);
  }
  .kainos .kaina.kaina--zymeta {
    background: var(--ink);
    color: var(--snow);
  }
}

/* ══ Kaina telefone - telpa į vieną ekraną (09-14) ═════════════════════════
   Emilis (iPhone): sekcija netelpa į ekraną + „gal idėjų, kaip pagražinti".
   Buvo: kortelė 248 px, nuo antraštės iki mygtuko ~700 px, o Safari su
   juostomis turi ~600 px. Dabar kompaktiškos kortelės (~170 px), mažesnė
   antraštė ir oras. Pagražinimai: dėžučių krūvelė kaip kompiuteryje (su
   „pop" pasirinkus) ir „sutaupai" - persikinė žymė, ne tekstas eilutėje.
   Kompiuteris (nuo 780 px) nekeičiamas. */
@media (max-width: 779px) {
  #kaina {
    padding-top: 18px;
    padding-bottom: 28px;
  }
  #kaina .pirkimas__h {
    margin-top: 6px;
    font-size: clamp(22px, 6.4vw, 27px);
    line-height: 1.04;
  }
  #kaina .kainos {
    margin-top: 16px;
    gap: 8px;
  }
  .kainos .kaina,
  .kainos .kaina.kaina--zymeta {
    position: relative;
    row-gap: 0;
    padding: 10px 12px 12px;
  }
  .kainos .kaina .kaina__kiekis {
    font-size: 14px;
    line-height: 1.25;
  }
  .kainos .kaina .kaina__vnt {
    margin-top: 8px;
    font-size: 30px;
    line-height: 1;
  }
  .kainos .kaina .kaina__vnt span {
    margin-top: 3px;
    font-size: 9px;
  }
  .kainos .kaina .kaina__viso {
    margin-top: 7px;
    font-size: 16px;
    line-height: 1.2;
  }
  .kainos .kaina .kaina__laikas {
    font-size: 12px;
    line-height: 1.3;
  }
  .kaina__skirt {
    display: none;
  }
  .kainos .kaina .kaina__sutaupai {
    display: table;
    margin-top: 6px;
    padding: 2px 6px;
    background: var(--peach);
    color: var(--ink);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.01em;
  }
  .kainos .kaina .kaina__pristatymas {
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.3;
  }
  .kainos .kaina .kaina__pristatymas--nemokamas {
    padding: 2px 6px 2px 5px;
    white-space: normal;
  }
  .kainos .kaina .kaina__rinktis {
    display: none;
  }
  /* Dėžučių krūvelė - dešinėje, kainos už maišelį eilutėje. */
  .kainos .kaina .kaina__dezutes {
    --d: 15px;
    --z: 8px;
    position: absolute;
    top: 36px;
    right: 10px;
    display: grid;
    grid-template-columns: repeat(var(--st, 1), var(--z));
    grid-auto-rows: var(--z);
    padding: 0 calc(var(--d) - var(--z) + var(--z) / 2) calc(var(--d) - var(--z)) 0;
    pointer-events: none;
  }
  .kainos .kaina .kaina__dezutes[data-n="3"],
  .kainos .kaina .kaina__dezutes[data-n="6"] {
    --st: 3;
  }
  .kainos .kaina .kaina__dezutes[data-n="12"] {
    --st: 6;
    --z: 7px;
    --d: 13px;
  }
  .kainos .kaina .kaina__dezutes svg {
    display: block;
    width: var(--d);
    height: var(--d);
    overflow: visible;
  }
  .kainos .kaina .kaina__dezutes[data-n="6"] svg:nth-child(n + 4),
  .kainos .kaina .kaina__dezutes[data-n="12"] svg:nth-child(n + 7) {
    translate: calc(var(--z) / 2) 0;
  }
}
@media (max-width: 779px) and (prefers-reduced-motion: no-preference) {
  @keyframes dezute-pop-tel {
    0% {
      scale: 0.4;
    }
    60% {
      scale: 1.15;
    }
    100% {
      scale: 1;
    }
  }
  .kainos .kaina[aria-pressed="true"] .kaina__dezutes svg {
    animation: dezute-pop-tel 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: calc(var(--i) * 30ms);
  }
}

/* ══ Kaina telefone - paskutiniai 34 px (09-14) ═════════════════════════════
   360x640 trūko 34 px: mygtuko paraštė 28 px, sekcijos viršus 18 px, o
   „Pristatymas nemokamas" lūždavo į dvi eilutes (33 px). Turinys kortelėje -
   prie viršaus, kitaip žemesnė kortelė eilutėje išsitempdavo su tarpais. */
@media (max-width: 779px) {
  #kaina {
    padding-top: 10px;
  }
  #kaina .pirkimas__veiksmas {
    margin-top: 12px;
  }
  .kainos .kaina,
  .kainos .kaina.kaina--zymeta {
    align-content: start;
    padding-inline: 10px;
  }
  .kainos .kaina .kaina__pristatymas--nemokamas {
    padding-inline: 5px;
    font-size: 10px;
    letter-spacing: 0;
    white-space: nowrap;
  }
  .kainos .kaina .kaina__dezutes {
    right: 8px;
  }
}

/* ══ Hero telefone - telpa į vieną ekraną (09-14) ══════════════════════════
   Emilis (iPhone, Chrome): hero netelpa, „GRAPE" nukrenta į antrą eilutę.
   390x654 turinys baigdavosi ties 832 px: nuotrauka 244, antraštė 4 eilutės
   (149), mygtukas su 18+ 111, skonių žymės 2 eilutės (80). Dabar nuotrauka
   21:10 (dėžutė visa - contain), antraštė 3 eilutės, žymės vienoje eilutėje,
   tankesni tarpai. Tekstai nekeisti. Tik stačias telefonas. */
@media (max-width: 779px) and (orientation: portrait) {
  .hero .hero__foto img,
  .hero .hero__foto__laukas img {
    aspect-ratio: 21 / 10;
  }
  .hero .hero__h1 {
    margin-top: 10px;
    font-size: min(32px, calc((100vw - 2 * var(--pad)) * 0.092));
    line-height: 1.02;
  }
  .hero .hero__sub {
    margin-top: 8px;
    font-size: 15px;
    line-height: 1.4;
  }
  .hero .hero__veiksmas {
    margin-top: 14px;
  }
  .hero .netinka {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.35;
  }
  .hero .inkaras {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.35;
  }
  .hero .lustai {
    flex-wrap: nowrap;
    gap: 6px;
    margin-top: 10px;
  }
  .hero .lustai .lustas {
    min-height: 30px;
    padding: 5px 7px;
    font-size: 10px;
    letter-spacing: 0.06em;
    white-space: nowrap;
  }
}

/* ══ Hero telefone - skonių žymės vienoje eilutėje (09-14) ════════════════
   Trys žymės greta užimdavo 386 px, o telpa 316-343 px: „GRAPE NETRUKUS"
   išlįsdavo už krašto. Dabar trys vienodo pločio žymės, skonis viršuje,
   „prekyboje / netrukus" po juo - telpa ir 320 px, raidės lieka 10 px
   (ženklo knygos riba). Hero apačioje 14 px, kad žymės neliestų faktų juostos. */
@media (max-width: 779px) and (orientation: portrait) {
  .hero .lustai {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .hero .lustai .lustas {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-width: 0;
    min-height: 38px;
    padding: 5px 4px;
    letter-spacing: 0.08em;
    text-align: center;
  }
  .hero .lustai .lustas em {
    letter-spacing: 0.06em;
  }
  .hero .hero__tinklelis {
    padding-bottom: 14px;
  }
}

/* ══ Kainos žymės vietoj skonių (09-14) ════════════════════════════════════
   Emilis: būsimų skonių nerodom, bet spalvas išlaikom. Hero skonių žymės
   (MINT prekyboje / PEACH netrukus / GRAPE netrukus) išimtos; ta pati spalvų
   trijulė dabar - kainos eilutė: 10 € dėžutė (rašalas), 0,63 € maišelis
   (PEACH), 16 maišelių dėžutėje (GRAPE). Tekstas nepasikeitė. */
.inkaras.inkaras--zymes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.inkaras__zyme {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 7px 11px;
  border: 1px solid var(--linija);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
}
.inkaras__zyme b {
  font-weight: 800;
}
.inkaras__zyme--ink {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--snow);
}
.inkaras__zyme--peach {
  background: var(--peach);
}
.inkaras__zyme--grape {
  background: var(--grape);
}
@media (max-width: 779px) and (orientation: portrait) {
  .hero .inkaras.inkaras--zymes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 12px;
  }
  .hero .inkaras__zyme {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-width: 0;
    min-height: 44px;
    padding: 5px 4px;
    font-size: 12px;
    text-align: center;
    white-space: normal;
  }
  .hero .inkaras__zyme b {
    font-size: 15px;
  }
}

/* ══ Hero struktūra kaip Cannumo / Brite (09-14) ══════════════════════════
   Emilis: hero turi struktūriškai atrodyti kaip Cannumo ir Brite - be kainos,
   be kainos už maišelį, be kiekio. Tvarka: įrodymų eilutė -> antraštė ->
   viena ryški faktinė eilutė -> aprašymas -> mygtukas su 18+. Įrodymų vietoje
   - faktai nuo dangtelio (įvertinimų dar nėra), spalvos iš buvusių skonių
   žymių. Kainos žymių (.inkaras--zymes) HTML'e nebėra. */
.hero__irodymai {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hero__irodymas {
  padding: 5px 10px;
  border: 1px solid var(--linija);
  background: var(--snow);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.hero__irodymas--persikas {
  background: var(--peach);
}
.hero__irodymas--vynuoge {
  background: var(--grape);
}
.hero__faktas {
  margin-top: 14px;
  font-size: clamp(17px, 1.45vw, 22px);
  font-weight: 800;
  letter-spacing: -0.005em;
}
@media (min-width: 780px) {
  .hero .hero__h1 {
    margin-top: clamp(16px, 2.6vh, 30px);
  }
  .hero .hero__sub {
    margin-top: 8px;
  }
}
@media (max-width: 779px) and (orientation: portrait) {
  .hero .hero__irodymai {
    margin-top: 12px;
    gap: 5px;
  }
  .hero .hero__irodymas {
    padding: 4px 8px;
    font-size: 12px;
  }
  .hero .hero__faktas {
    margin-top: 8px;
    font-size: 16px;
  }
}

/* ══ Hero kaip Brite: ofiso kadras (09-14) ════════════════════════════════
   Emilis: nuotrauka ofiso aplinkoje, kaip Brite. Kadras „stalas" (dėžutė ant
   darbo stalo prie kompiuterio) vėl užima visą dešinį panelį - „cover", ne
   „contain" kaip studijos kadras. Telefone - juosta viršuje, apkirpta ties
   dėžute. Juosta po hero grąžinta (tuščia), --juosta-h vėl galioja. */
.hero .hero__virs {
  margin: 0;
}
@media (min-width: 780px) {
  .hero .hero__foto .hero__foto__laukas img {
    object-fit: cover;
    object-position: 76% 66%;
  }
}
@media (max-width: 779px) and (orientation: portrait) {
  .hero .hero__foto img,
  .hero .hero__foto .hero__foto__laukas img {
    /* 21:10, ne 16:10: su 16:10 mygtukas ir 18+ išlįsdavo 34-47 px. */
    aspect-ratio: 21 / 10;
    object-fit: cover;
    object-position: 50% 66%;
  }
  .hero .hero__virs {
    margin-top: 14px;
  }
}

/* ══ Juosta po hero - užtikrinimai telefone (09-14) ════════════════════════
   Trys punktai („Pristatymas į Omniva paštomatus" ir kt.) netilpo į 2x2
   tinklelį - išlįsdavo už ekrano. Telefone - po vieną eilutėje, centre, visi
   trys (anksčiau paskutinis buvo slepiamas, nes kartojo naujienų juostą). */
@media (max-width: 779px) {
  .juosta .juosta__in {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 4px;
    padding-block: 10px;
    text-align: center;
    letter-spacing: 0.1em;
  }
  .juosta .juosta__in > span:last-child {
    display: inline;
  }
  .juosta .juosta__in > span:not(.juosta__skyriklis) {
    white-space: normal;
  }
}

/* ══ Juosta po hero - Pagaminta Baltijos šalyse (09-14) ═══════════════════
   Vienas punktas centre: tekstas ir trys sujungtos vėliavos (LT, LV, EE).
   Senos juostos taisyklės slėpė paskutinį punktą siauruose ekranuose ir
   dėliojo 2 x 2 - dabar punktas vienintelis, tad jos perrašomos. */
.juosta .juosta__in {
  justify-content: center;
}
.juosta .juosta__in > span.juosta__kilme {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}
/* Vėliava - viena sujungta Baltijos vėliava (Emilio paveikslėlis): Estija,
   įstrižas Latvijos ruožas, Lietuva. Aštrūs kampai, be apvalinimo (Emilis).
   Plonas kontūras SVG viduje - kad balta Estijos juosta nesusilietų su fonu. */
.juosta__veliava {
  display: block;
  flex: none;
  width: 30px;
  height: 18px;
}
@media (max-width: 779px) {
  .juosta .juosta__in {
    grid-template-columns: max-content;
  }
  .juosta__veliava {
    width: 27px;
    height: 16px;
  }
}

/* ══ Kas mes - Arno TikTok ir Instagram (09-14) ════════════════════════════
   Pasitikėjimui (Emilis): mažos rašalo ikonos po pareigomis. Kompiuteryje -
   trečia kortelės eilutė po vardu, telefone - po vardu ir lipduku šalia
   portreto. Paspaudimo zona telefone 40 px. */
.mes__socialiniai {
  display: flex;
  gap: 6px;
  padding-inline: 4px;
}
.mes__narys > .mes__socialiniai {
  grid-row: 3;
  margin-top: 8px;
}
.mes__soc {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background: var(--ink);
  color: var(--snow);
}
.mes__soc svg {
  display: block;
  width: 16px;
  height: 16px;
  fill: currentColor;
}
.mes__soc:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
@media (any-hover: hover) {
  .mes__soc:hover {
    background: var(--snow);
    color: var(--ink);
  }
}
@media (max-width: 779px) {
  .mes__narys > .mes__socialiniai {
    grid-area: 3 / 2;
    margin-top: 0;
    padding-inline: 0;
  }
  .mes__soc {
    width: 40px;
    height: 40px;
  }
  .mes__soc svg {
    width: 18px;
    height: 18px;
  }
}

/* ══ Kainų kortelės - dėžutės kaina didelė (09-14) ═════════════════════════
   Emilis: apkeičiam - didelis skaičius yra dėžutės kaina, kaina už maišelį -
   mažesnė eilutė po ja. HTML'e tekstai sukeisti vietomis, tad visų pločių
   išdėstymas lieka tas pats. */

/* ══ Juosta po hero - pasitikėjimas: kilmė | Arnas (09-14) ════════════════
   Emilis: Arnas hero netiko - perkeltas į juostą po hero, kur Brite rodo
   „Trusted by". Kompiuteryje viena eilutė su skyrikliu, telefone - dvi
   eilutės. Skaičiai - nuorodos į profilius. */
.juosta .juosta__in {
  flex-wrap: wrap;
  gap: 8px 22px;
}
.juosta__skirt {
  flex: none;
  width: 1px;
  height: 20px;
  background: var(--linija);
}
.juosta .juosta__in > span.juosta__arnas {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.juosta__arnas-foto {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
}
.juosta__arnas a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ink);
  text-decoration: none;
}
.juosta__arnas a b {
  font-weight: 800;
}
.juosta__arnas a svg {
  flex: none;
  width: 13px;
  height: 13px;
  fill: currentColor;
}
@media (any-hover: hover) {
  .juosta__arnas a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}
@media (max-width: 779px) {
  .juosta__skirt {
    display: none;
  }
  .juosta .juosta__in {
    row-gap: 8px;
  }
  .juosta .juosta__in > span.juosta__arnas {
    gap: 8px;
  }
}

/* ══ Kainų kortelės - sutaupymas procentais (09-14) ════════════════════════
   Emilis: parodyti, kiek procentų sutaupo didesnis paketas. Kompiuteryje -
   žymė prie didelės kainos; telefone ten stovi dėžučių krūvelė, tad procentas
   įrašomas į „sutaupai" žymę. Eurai lieka (CLAUDE.md 8 sk.). */
.kaina__vnt .kaina__proc {
  display: inline-block;
  margin-left: 10px;
  padding: 3px 7px;
  vertical-align: middle;
  background: var(--peach);
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  font-variation-settings: normal;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
}
.kaina__sutaupai-proc {
  display: none;
}
@media (max-width: 779px) {
  .kainos .kaina .kaina__vnt .kaina__proc {
    display: none;
  }
  .kainos .kaina .kaina__sutaupai .kaina__sutaupai-proc {
    display: inline;
  }
}

/* Telefono hero be Arno bloko - nuotrauka 22:10, kad naujas aprašymas tilptų. */
@media (max-width: 779px) and (orientation: portrait) {
  .hero .hero__foto img,
  .hero .hero__foto .hero__foto__laukas img {
    aspect-ratio: 22 / 10;
  }
}

/* ══ Juosta telefone - Arnas telpa (09-14) ═════════════════════════════════
   Arno punktas telefone buvo ~406 px ir išlįsdavo už kraštų. Telefone be
   žodžio „Įkūrėjas", siauresni raidžių tarpai, o jei vis tiek netelpa -
   skaičiai pereina į antrą eilutę. */
@media (max-width: 779px) {
  .juosta .juosta__in > span.juosta__arnas {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 10px;
    max-width: 100%;
    white-space: normal;
    letter-spacing: 0.08em;
  }
  .juosta__arnas-pareigos {
    display: none;
  }
  .juosta__arnas a {
    white-space: nowrap;
  }
}

/* ══ Pasitikėjimas - Arnas pagal takeultra.com (09-14) ═════════════════════
   ULTRA „Trusted by the top 1%": didelė antraštė kairėje, kortelė dešinėje
   (nuotrauka | vardas, pareigos, žymė, citata). PYK: tikri skaičiai vietoj
   citatos ir žvaigždučių, kol neturim tikros Arno citatos ir įvertinimų.
   Aštrūs kampai - kaip visame puslapyje. */
.pasitiki {
  background: var(--snow);
}
.pasitiki__in {
  display: grid;
  gap: 28px;
}
.pasitiki__h {
  margin-top: 10px;
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1;
  text-wrap: balance;
}
.pasitiki__sub {
  max-width: 34ch;
  margin-top: 16px;
  font-size: 17px;
  line-height: 1.5;
}
.pasitiki__kortele {
  display: grid;
  background: var(--bone);
}
.pasitiki__foto {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
.pasitiki__turinys {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 22px 22px 24px;
}
.pasitiki__vardas {
  margin: 0;
  font-size: clamp(30px, 3.2vw, 44px);
  font-weight: 900;
  font-variation-settings:
    "wdth" 115,
    "wght" 900;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.pasitiki__role {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pasitiki__zyme {
  justify-self: start;
  padding: 4px 12px;
  background: var(--ink);
  color: var(--snow);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
}
.pasitiki__skaiciai {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--linija);
}
.pasitiki__skaiciai div {
  display: flex;
  flex-direction: column-reverse;
  gap: 4px;
}
.pasitiki__skaiciai dd {
  margin: 0;
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 900;
  line-height: 1;
}
.pasitiki__skaiciai dt {
  font-size: 12px;
  line-height: 1.3;
  color: var(--mid);
}
.pasitiki__nuorodos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 0;
}
.pasitiki__nuorodos a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  background: var(--ink);
  color: var(--snow);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.pasitiki__nuorodos svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
@media (any-hover: hover) {
  .pasitiki__nuorodos a:hover {
    background: var(--peach);
    color: var(--ink);
  }
}
@media (min-width: 1024px) {
  .pasitiki__in {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    align-items: center;
    column-gap: clamp(40px, 5vw, 96px);
  }
  .pasitiki__kortele {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  }
  .pasitiki__foto {
    aspect-ratio: auto;
    min-height: 420px;
  }
  .pasitiki__turinys {
    align-content: center;
    padding: 32px;
  }
}

/* ══ Pasitikėjimas - pataisos (09-14) ══════════════════════════════════════
   Skaičiai lūždavo („56,9 / tūkst.") ir stovėjo skirtingame aukštyje - dabar
   didelis tik skaičius, vienetas po juo. Antraštė kompiuteryje - 2-3 eilutės,
   ne 4. Telefone nuotrauka 4:3, ne kvadratas. */
.pasitiki__skaiciai dd {
  white-space: nowrap;
}
@media (min-width: 1024px) {
  .pasitiki__in {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
  .pasitiki__h {
    font-size: clamp(34px, 3.8vw, 56px);
  }
}
@media (max-width: 1023px) {
  .pasitiki__foto {
    aspect-ratio: 4 / 3;
    object-position: 50% 30%;
  }
}

/* ══ Pasitikėjimas - rašalo fonas (09-14) ══════════════════════════════════
   Emilis: balto fono puslapyje niekur nėra. Sekcija rašalo spalvos kaip
   „Kas mes", kortelė - kaulo. Tvarka: Kada (kaulas) -> Arnas (rašalas) ->
   Kaina (dangus). */
.pasitiki {
  background: var(--ink);
  color: var(--snow);
}
.pasitiki .lankas {
  color: var(--far);
}
.pasitiki .pasitiki__sub {
  color: rgba(255, 255, 255, 0.82);
}
.pasitiki .pasitiki__kortele {
  color: var(--ink);
}

/* Hero telefone - ilgesnė antraštė: 360x640 išlįsdavo 7 px. */
@media (max-width: 779px) and (orientation: portrait) {
  .hero .hero__h1 {
    font-size: min(32px, calc((100vw - 2 * var(--pad)) * 0.085));
  }
}

/* ══ Pasitikėjimas - užrašai didžiosiomis (09-14) ═════════════════════════
   Emilis: MINT žymė kortelėje nieko nereiškė (ULTRA ten rodo produktą) -
   išimta. Užrašai po skaičiais - didžiosiomis kaip pareigų eilutė, kad
   kortelėje būtų viena tipografija. */
.pasitiki__skaiciai dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--ink);
}

/* ══ Pasitikėjimas - vienetas prie skaičiaus (09-14) ═══════════════════════
   Emilis: „tūkst." ir „mln." - šalia skaičiaus. Trijuose stulpeliuose su
   vienetu skaičiai lūždavo, tad rodikliai - trys eilutės: kairėje skaičius
   su vienetu, dešinėje užrašas. */
.pasitiki__skaiciai {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}
.pasitiki__skaiciai div {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  align-items: baseline;
  column-gap: 14px;
}
.pasitiki__skaiciai dd {
  order: -1;
  font-size: 28px;
}
.pasitiki__vnt {
  margin-left: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ══ Pasitikėjimas - platesnis kortelės tekstas (09-14) ════════════════════
   Kompiuteryje etiketės („PATIKTUKŲ TIKTOK'E") lūždavo į dvi eilutes -
   nuotraukai kortelėje šiek tiek mažiau vietos. */
@media (min-width: 1024px) {
  .pasitiki .pasitiki__kortele {
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  }
}

/* ══ Pasitikėjimas - 1024-1279 px (09-14) ═════════════════════════════════
   Siauresniame kompiuteryje etiketė greta skaičiaus lūždavo - skaičius virš
   etiketės. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .pasitiki .pasitiki__skaiciai div {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2px;
  }
}

/* ══ Kaip naudoti -> „Produktyvumas evoliucionavo" (09-14) ═════════════════
   Emilis: sekcija pagal takeultra.com „Pouches have evolved" - nuotrauka
   kairėje, didelė antraštė, pastraipa ir keturios savybės su linijinėmis
   ikonomis 2 x 2. Žingsniai ir žymės - suskleistame „Kaip naudoti", virš
   „Visa sudėtis". Mygtuko nėra - ULTRA šioje sekcijoje jo neturi. */
.naudojimas .naudojimas__h {
  margin: 0;
  font-size: clamp(34px, min(3.6vw, 7vh), 56px);
  line-height: 1;
  text-wrap: balance;
}
.naudojimas__apie {
  max-width: 46ch;
  margin-top: 18px;
  font-size: 17px;
  line-height: 1.55;
}
.naudojimas__savybes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 24px;
  max-width: 520px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.naudojimas__savybes li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.25;
  text-transform: uppercase;
}
.naudojimas__savybes svg {
  flex: none;
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.naudojimas #kaip-naudoti {
  margin-top: 28px;
}
.naudojimas #kaip-naudoti + #sudetis {
  margin-top: 0;
  border-top: 0;
}
.naudojimas #kaip-naudoti .zingsniai {
  margin-top: 6px;
}
@media (min-width: 1024px) {
  .naudojimas:has(#kaip-naudoti[open]) .naudojimas__foto {
    height: calc(var(--ekr-s, 100svh) - var(--galva) - 1px);
  }
}
@media (min-width: 1024px) and (max-height: 660px) {
  .naudojimas__apie {
    margin-top: 12px;
    font-size: 15px;
  }
  .naudojimas__savybes {
    gap: 12px 20px;
    margin-top: 18px;
  }
  .naudojimas #kaip-naudoti {
    margin-top: 18px;
  }
}
@media (max-width: 779px) {
  :root #kaip-naudoti {
    scroll-margin-top: 74px;
  }
  .naudojimas__apie {
    font-size: 16px;
  }
  .naudojimas__savybes {
    gap: 16px 14px;
    margin-top: 24px;
  }
  .naudojimas__savybes li {
    gap: 10px;
    font-size: 12px;
    letter-spacing: 0.06em;
  }
  .naudojimas__savybes svg {
    width: 24px;
    height: 24px;
  }
}

/* ══ Kada telefone - kortelės kaip desktope, slenkant pakyla (09-14) ═══════
   Emilis: desktope užvedus kortelė sklandžiai pakyla, o telefone buvusi visos
   eilutės spalvos juosta mirksėjo ir atrodė kitaip. Dabar telefone tos pačios
   spalvotos kortelės kaip desktope (mėlyna / juoda / mėlyna) su tarpais, o
   kortelė, kurios vidurys arčiausiai 55 % ekrano aukščio (skriptas uždeda
   .kada__kortele--aktyvi), daro tą patį, ką desktope užvedimas: pakyla 6 px,
   didysis žodis prasiplečia, ikona padidėja - tas pats laikas ir kreivė
   (perėjimai - „Kada v4" ir „Kada ikonos" blokuose). */
@media (max-width: 779px) {
  .kada .kada__eile {
    gap: 10px;
    border-top: 0;
  }
  .kada .kada__eile .kada__kortele {
    padding: 18px 18px 20px;
    border-bottom: 0;
  }
  .kada .kada__eile .kada__kortele:nth-child(odd) {
    background: var(--sky);
    color: var(--ink);
  }
  .kada .kada__eile .kada__kortele:nth-child(2) {
    background: var(--ink);
    color: var(--snow);
  }
  /* Palietus kortelę telefonas uždeda :hover - pakyla tik aktyvi. */
  .kada .kada__eile .kada__kortele:hover {
    transform: none;
  }
}
@media (max-width: 779px) and (prefers-reduced-motion: no-preference) {
  .kada .kada__eile .kada__kortele {
    will-change: transform;
  }
  .kada .kada__eile .kada__kortele--aktyvi,
  .kada .kada__eile .kada__kortele--aktyvi:hover {
    transform: translateY(-6px);
  }
  .kada .kada__eile .kada__kortele--aktyvi .kada__zodis {
    letter-spacing: -0.01em;
  }
  .kada .kada__eile .kada__kortele--aktyvi .kada__ikona {
    transform: scale(1.1);
  }
}

/* ══ Hero tekstas - išdėstymas; juosta „Sukurta"; Kas už PYK telefone (09-14) ══
   Emilis: „1 maišelis ≈ 1 puodelis kavos" ir „Kaip naudoti" nuoroda išimtos
   (HTML), tekstas nekeistas - tik išdėstymas.
   Kompiuteryje: antraštė keturiomis eilutėmis kaip telefone (Greitas /
   susikaupimas / be nemalonaus / energijos kritimo). Dydis - nuo stulpelio
   pločio: „Greitas susikaupimas" (12,8 em) netelpa į vieną eilutę, o
   ilgiausia eilutė (9,9 em) - ~83 % stulpelio, tad antraštė nebeliečia
   nuotraukos (buvo 100 %). Stulpelis = 0,54 x (--w - 2 x 56 px).
   Aprašymas - trumpomis eilutėmis (.hero__eil blokai), daugiau oro, 18+ -
   viena eilutė.
   Telefone: aprašymas lieka pastraipa (.hero__eil - eilutiniai), 18+ viena
   eilutė, žemesnis mygtukas ir juosta - kad „Sukurta Baltijos šalyse"
   matytųsi pirmame ekrane (402x654 buvo 43 px per žemai). */
@media (min-width: 780px) and (max-width: 1239px) {
  .hero .hero__h1 {
    font-size: calc(4.56vw - 7px);
  }
}
@media (min-width: 1240px) {
  .hero .hero__h1 {
    font-size: calc((var(--w) - 112px) * 0.0452);
  }
}
@media (min-width: 780px) {
  .hero .hero__sub {
    margin-top: 22px;
    max-width: none;
    font-size: clamp(16px, 1.2vw, 19px);
    line-height: 1.5;
  }
  /* 09-16 (Edvardas): aprašymas nebelaužomas į keturias trumpas eilutes - jis
     plaukia plačiau, į laisvą nuotraukos vietą kairėje nuo dėžutės. Stulpelis
     lieka siauras dėl antraštės ir mygtuko, tad platesnis tik šis blokas.
     50vw - dėžutė prasideda maždaug ties 62 % lango pločio. */
  .hero .hero__eil {
    display: inline;
  }
  .hero .hero__sub {
    width: min(50vw, 720px);
    text-wrap: pretty;
  }
  .hero .hero__veiksmas {
    margin-top: 30px;
  }
  .hero .netinka {
    max-width: none;
  }
}
@media (max-width: 779px) {
  /* 09-16: antraštės lūžis „Efektyvesnis būdas / susikaupti" - tik nuo planšetės.
     Telefone „Efektyvesnis būdas" netelpa į vieną eilutę, tad priverstinis lūžis
     duotų tris eilutes vietoj dviejų. */
  .hero .hero__h1 br {
    display: none;
  }
}
@media (max-width: 779px) and (orientation: portrait) {
  .hero .hero__sub {
    margin-top: 12px;
  }
  .hero .hero__veiksmas {
    margin-top: 16px;
  }
  .hero .hero__veiksmas .mygtukas {
    padding-block: 13px;
  }
  .hero .netinka {
    max-width: none;
    font-size: 12px;
  }
}
@media (max-width: 779px) {
  .juosta .juosta__in {
    min-height: 40px;
    padding-block: 8px;
  }
}

/* Kas už PYK telefone - kaip TikTok profilis: nuotrauka kairėje, vardas,
   pareigos ir abi paskyros dešinėje, skaičiai trimis stulpeliais po jais
   (vienetas prie skaičiaus, užrašas po juo). Buvo: 4:3 nuotrauka per visą
   plotį, 30 px vardas, nelygūs mygtukai, sekcija 856 px. Tekstas nekeistas. */
@media (max-width: 779px) {
  .pasitiki .pasitiki__in {
    gap: 24px;
  }
  .pasitiki .pasitiki__sub {
    font-size: 16px;
  }
  .pasitiki .pasitiki__kortele {
    grid-template-columns: 116px minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto;
    column-gap: 14px;
    padding: 16px;
  }
  .pasitiki .pasitiki__turinys {
    display: contents;
  }
  .pasitiki .pasitiki__foto {
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: stretch;
    width: 100%;
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
    object-position: 50% 22%;
  }
  .pasitiki .pasitiki__vardas {
    grid-column: 2;
    grid-row: 1;
    font-size: 24px;
  }
  .pasitiki .pasitiki__role {
    grid-column: 2;
    grid-row: 2;
    margin-top: 8px;
    font-size: 11px;
    line-height: 1.35;
  }
  .pasitiki .pasitiki__nuorodos {
    grid-column: 2;
    grid-row: 3;
    align-self: end;
    display: grid;
    gap: 6px;
    margin: 12px 0 0;
  }
  .pasitiki .pasitiki__nuorodos a {
    min-height: 42px;
    padding: 0 12px;
    font-size: 13px;
  }
  .pasitiki .pasitiki__skaiciai {
    grid-column: 1 / -1;
    grid-row: 4;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 16px 0 0;
    padding: 14px 0 0;
  }
  .pasitiki .pasitiki__skaiciai div {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding-inline: 10px;
    border-left: 1px solid var(--linija);
  }
  .pasitiki .pasitiki__skaiciai div:first-child {
    padding-left: 0;
    border-left: 0;
  }
  .pasitiki .pasitiki__skaiciai div:last-child {
    padding-right: 0;
  }
  .pasitiki .pasitiki__skaiciai dd {
    font-size: min(24px, 6vw);
  }
  .pasitiki .pasitiki__vnt {
    font-size: 10px;
    letter-spacing: 0.02em;
  }
  .pasitiki .pasitiki__skaiciai dt {
    font-size: 10px;
    letter-spacing: 0.06em;
    line-height: 1.3;
  }
}

/* ══ Telefono hero - pirmas ekranas baigiasi ties juosta (09-14) ═══════════
   Emilis: po „Sukurta Baltijos šalyse" kyšodavo kitos sekcijos nuotrauka
   (402x654 - 8 px). Dabar hero + juosta užima lygiai pirmą ekraną: 100svh
   minus naujienų juosta (34), galva (57, su linija) ir juosta (40 + 1 px
   linija). Jei telefonas aukštesnis už turinį, papildomą vietą užima
   nuotrauka, o ne tuščias dangus po 18+. Mažiausia nuotrauka lieka 21:10. */
@media (max-width: 779px) and (orientation: portrait) {
  .hero {
    display: flex;
    flex-direction: column;
    min-height: calc(var(--ekr-s, 100svh) - var(--naujiena) - var(--galva) - 41px);
  }
  .hero > .in {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    width: 100%;
  }
  .hero .hero__tinklelis {
    flex: 1 0 auto;
  }
  .hero .hero__foto {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
  }
  .hero .hero__foto .hero__foto__laukas {
    position: relative;
    display: block;
    flex: 1 0 auto;
    /* 09-26: 21:10 -> 26:10. Po mygtuku atsirado pažadai, ir 390x656 lange (iPhone su
       naršyklės juostomis) „Sukurta Baltijos šalyse" išlįsdavo už ekrano. Kai vietos
       daugiau, nuotrauka vis tiek išsiplečia (flex). */
    min-height: calc(100vw * 10 / 26);
  }
  .hero .hero__foto .hero__foto__laukas img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }
}

/* ══ Kas už PYK telefone - visas ekranas (09-14) ═══════════════════════════
   Emilis: profilio kortelė vis dar atrodė prastai, sekcija turi užimti visą
   ekraną. Dabar sekcija = ekranas po lipnia galva (100svh - galva), be
   kortelės dėžutės, viskas per visą plotį: viršuje Arno nuotrauka užima
   likusią vietą, po ja antraštė ir aprašymas ant rašalo, apačioje kaulo
   juosta - vardas, pareigos, trys skaičiai ir dvi vienodos paskyrų mygtukų
   pusės. Straipsnis - display: contents, tad ankstesnės kortelės tinklelio
   vietos nebegalioja (vaikai - lanksčiame stulpelyje). Tekstas nekeistas. */
@media (max-width: 779px) {
  .pasitiki.dalis {
    display: flex;
    flex-direction: column;
    min-height: calc(var(--ekr-s, 100svh) - var(--galva));
    padding-block: 0;
  }
  .pasitiki .pasitiki__in {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    gap: 0;
    width: 100%;
    padding-inline: 0;
  }
  .pasitiki .pasitiki__kaire {
    padding: 20px var(--pad) 20px;
  }
  .pasitiki .pasitiki__h {
    margin-top: 8px;
    font-size: min(30px, calc((100vw - 2 * var(--pad)) * 0.085));
  }
  .pasitiki .pasitiki__sub {
    margin-top: 10px;
    font-size: 15px;
    line-height: 1.45;
  }
  .pasitiki .pasitiki__kortele {
    display: contents;
  }
  .pasitiki .pasitiki__foto {
    order: -1;
    flex: 1 1 0;
    align-self: stretch;
    width: 100%;
    height: auto;
    min-height: 150px;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: 50% 30%;
  }
  .pasitiki .pasitiki__turinys {
    display: flex;
    flex-direction: column;
    padding: 16px var(--pad) 18px;
    background: var(--bone);
    color: var(--ink);
  }
  .pasitiki .pasitiki__vardas {
    font-size: 24px;
  }
  .pasitiki .pasitiki__role {
    margin-top: 6px;
  }
  .pasitiki .pasitiki__skaiciai {
    margin: 14px 0 0;
    padding: 12px 0 0;
  }
  .pasitiki .pasitiki__nuorodos {
    align-self: stretch;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 14px 0 0;
  }
  .pasitiki .pasitiki__nuorodos a {
    justify-content: center;
    min-height: 44px;
  }
}

/* Kas už PYK telefone - glaudžiau (09-14): 402x654 nuotrauka likdavo 170 px ir
   veidas būdavo nukirptas per kaktą ir smakrą. Tarpai sumažinti ~26 px, kadras
   pakeltas, kad matytųsi plaukai. Sekcija lieka lygiai ekrano aukščio. */
@media (max-width: 779px) {
  .pasitiki .pasitiki__kaire {
    padding: 16px var(--pad) 14px;
  }
  .pasitiki .pasitiki__sub {
    margin-top: 8px;
  }
  .pasitiki .pasitiki__foto {
    object-position: 50% 24%;
  }
  .pasitiki .pasitiki__turinys {
    padding: 14px var(--pad) 14px;
  }
  .pasitiki .pasitiki__skaiciai {
    margin-top: 12px;
    padding-top: 10px;
  }
  .pasitiki .pasitiki__nuorodos {
    margin-top: 12px;
  }
  .pasitiki .pasitiki__nuorodos a {
    min-height: 42px;
  }
}

/* ══ Kompiuterio hero - nuotrauka per visą hero (09-14) ═══════════════════
   Emilis: nuotrauka per visą ekraną vietoj mėlyno lauko. Nuo 780 px figūra
   užima visą hero (ne dešinius 46 %), <picture> duoda plačią 16:9 nuotrauką:
   dėžutė dešiniajame trečdalyje, kairė pusė - tuščias stalas antraštei.
   Tekstas lieka kairėje ant nuotraukos (z-index virš absoliučios figūros).
   18+ - po mygtuku, ne šalia: plačiame ekrane eilutė baigdavosi ties maišeliu
   nuotraukoje. Telefone - kaip buvo („stalas" juosta viršuje). */
.hero__foto__laukas picture {
  display: contents;
}
@media (min-width: 780px) {
  .hero .hero__foto {
    left: 0;
    width: auto;
  }
  .hero .hero__tinklelis > :first-child {
    position: relative;
    z-index: 1;
  }
  .hero .hero__foto .hero__foto__laukas img {
    object-position: 50% 55%;
  }
  .hero .hero__veiksmas {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
}

/* Kompiuterio hero žemame ekrane (09-14): 18+ po mygtuku pridėjo ~27 px, ir
   ties 1280x630 juosta „Sukurta Baltijos šalyse" nukrisdavo po ekranu.
   Iki 700 px aukščio - mažiau vidinio oro teksto stulpelyje. */
@media (min-width: 780px) and (max-height: 700px) {
  .hero .hero__tinklelis > :first-child {
    padding-block: 12px;
  }
  .hero .hero__sub {
    margin-top: 16px;
  }
  .hero .hero__veiksmas {
    margin-top: 22px;
    gap: 10px;
  }
}

/* Kas už PYK telefone - nuotrauka viduryje (09-14): Emilis - nuotrauka tarp
   „Kas už PYK" teksto ir įkūrėjo juostos. Tvarka kaip HTML'e: antraštė ir
   aprašymas, Arno nuotrauka (užima likusią vietą), vardas / pareigos /
   skaičiai / paskyros. Anksčiau order: -1 kėlė nuotrauką į viršų. */
@media (max-width: 779px) {
  .pasitiki .pasitiki__foto {
    order: 0;
  }
  .pasitiki .pasitiki__kaire {
    padding-top: 20px;
  }
}

/* ══ Ekrano dydžių auditas - hero pataisos (09-14) ══════════════════════════
   Auditas 14 dydžių (Emilis: „tikrinam"). Horizontalaus slinkimo, išlendančių
   ar persidengiančių tekstų nerasta; taisoma tik tai, kas atrodė blogai:
   1. 600-779 px statmenai (iPad mini, sulankstomi): telefono hero buvo
      ištemptas - 32 px antraštė dviem ilgomis eilutėmis, mygtukas per 720 px.
      Dabar tekstas ne platesnis nei 600 px, antraštė iki 46 px, mygtukas
      savo pločio.
   2. Gulsčias telefonas nuo 780 px (844x390): kompiuterio hero, bet
      „Pirkti MINT" nukrisdavo po ekranu. Iki 500 px aukščio - mažesnė
      antraštė, aprašymas pastraipa, 18+ šalia mygtuko, mažiau oro.
   3. Gulsčias telefonas iki 779 px (740x360): tas pats - mažesnė antraštė. */
@media (min-width: 600px) and (max-width: 779px) and (orientation: portrait) {
  .hero .hero__tinklelis > :first-child {
    max-width: 600px;
  }
  .hero .hero__h1 {
    font-size: min(46px, calc((100vw - 2 * var(--pad)) * 0.085));
  }
  .hero .hero__sub {
    font-size: 17px;
    line-height: 1.5;
  }
  .hero .hero__veiksmas .mygtukas {
    width: auto;
    min-width: 280px;
  }
  .hero .netinka {
    font-size: 13px;
  }
}
@media (min-width: 780px) and (max-height: 500px) {
  .hero .hero__tinklelis {
    padding-block: 8px;
  }
  .hero .hero__tinklelis > :first-child {
    padding-block: 8px;
  }
  .hero .hero__h1 {
    font-size: 26px;
  }
  .hero .hero__sub {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.4;
  }
  .hero .hero__eil {
    display: inline;
  }
  .hero .hero__veiksmas {
    flex-direction: row;
    align-items: center;
    gap: 8px 16px;
    margin-top: 14px;
  }
  .hero .hero__veiksmas .mygtukas {
    padding-block: 12px;
  }
}
@media (max-width: 779px) and (orientation: landscape) and (max-height: 500px) {
  .hero .hero__h1 {
    font-size: 24px;
  }
  .hero .hero__sub {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.4;
  }
  .hero .hero__veiksmas {
    margin-top: 12px;
  }
  .hero .hero__veiksmas .mygtukas {
    padding-block: 12px;
  }
}

/* ══ Logotipas pagal lipdukų specifikaciją (09-14) ═══════════════════════════
   Emilis: logotipas kaip ant dėžutės (PYK_Sticker_Specifications, apatinis
   lipdukas). „PYK" - DejaVu Sans Bold, tarpas tarp raidžių 50 (0,05 em);
   „FOCUS POUCHES" - Myriad Pro. Myriad Pro yra mokamas Adobe šriftas, tad kol
   nėra licencijos - artimiausias nemokamas Adobe Source Sans 3 Regular,
   pervadintas „PYK Prierasas" (OFL: pakeistas šriftas be „Source" vardo).
   Šriftuose tik A-Z, 0-9 ir tarpas; failai ir licencijos - public/fontai/.
   Įrašas lieka PYK pločio (textLength), kaip lipduke. Neigiama dešinė
   paraštė nuima tarpą po paskutine raide, kad plotis būtų lygus „PYK". */
@font-face {
  font-family: "PYK Zenklas";
  src: url("/fontai/dejavu-sans-bold-zenklas.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "PYK Prierasas";
  src: url("/fontai/pyk-prierasas.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
.zenklas b {
  font-family: "PYK Zenklas", "DejaVu Sans", Verdana, sans-serif;
  font-weight: 700;
  font-variation-settings: normal;
  letter-spacing: 0.05em;
  margin-right: -0.05em;
}
.zenklas__prierasas text {
  font-family: "PYK Prierasas", "Myriad Pro", "Source Sans 3", sans-serif;
  font-weight: 400;
}

/* ══ „Produktyvumas evoliucionavo" - nuotraukos kadravimas ══════════════════
   09-14 (Emilis): atidaryta dėžutė su maišeliais, kadras parinktas taip, kad grupė
   liktų ir kvadratiniame kompiuterio, ir 5:4 telefono apkirpime.
   09-18: kadras - maišelis rankoje prie atidarytos dėžutės, šviesus paviršius
   (assets/generated/doze-sviesi-3.png). Ranka ir dėžutė stovi kadro viduryje, tad centruojam:
   ir beveik kvadratiniame kompiuterio, ir 4:3 telefono apkirpime abu lieka matomi. */
.naudojimas .naudojimas__foto img {
  object-position: 50% 50%;
}

/* ══ Sklandus suskleidžiamų blokų atidarymas (09-14) ════════════════════════
   Emilis: „Kaip naudoti", „Sudėtis" ir DUK atsidaro ir užsidaro sklandžiai
   (skriptas animuoja <details> aukštį). Uždarant „+" rodomas iškart, nors
   blokas dar susitraukia (data-uzsidaro). Lipni nuotrauka šalia - aukštį
   keičia taip pat sklandžiai, ne šuoliu. */
.platus[data-uzsidaro] summary::after,
.duk__vnt[data-uzsidaro] summary::after {
  content: "+";
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .naudojimas .naudojimas__foto {
    transition: height 0.38s cubic-bezier(0.22, 1, 0.36, 1);
  }
}

/* ══ Antriniai puslapiai: padėka, teisiniai, 404 (09-15) ═════════════════════
   Emilis: „reikia sutvarkyti visus padėkos pages". Galva, kalnagūbris prieš
   poraštę ir poraštė - kaip pradžios puslapyje (buvo sena poraštė, o padėkoje
   juodas „Į PRADŽIĄ" krepšelio vietoje). Padėka: mokėjimo būsenos, „Kas vyksta
   toliau" - trys žingsniai, „Kaip naudoti" - tie patys žingsniai ir žymės kaip
   pradžioje, su nuotrauka. Teisiniai: vietoj „01" - turinys kairėje nuo
   1024 px. 404 - savas puslapis per visą pirmą ekraną. */

/* Būsenų turinys: [hidden] turi laimėti prieš display: flex / grid. */
[data-rodyti][hidden] {
  display: none !important;
}
/* Kol serveris atsako (paprastai < 0,5 s), padėkos tekstas nerodomas - kad
   nesušmėžuotų „Ačiū", jei mokėjimas iš tikrųjų nepavyko. */
html[data-mokejimas="tikrinamas"] .aciu,
html[data-mokejimas="tikrinamas"] main {
  visibility: hidden;
}

/* Poraštėje pažymėtas puslapis, kuriame esi. */
.porastė--c a[aria-current="page"] {
  border-bottom-color: var(--snow);
}

/* ── Padėka: kas vyksta toliau ── */
.po-uzsakymo h2 {
  margin: 0;
}
.po-uzsakymo__zingsniai {
  display: grid;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: po-uzsakymo;
  border-top: 1px solid var(--ink);
}
.po-uzsakymo__zingsniai li {
  counter-increment: po-uzsakymo;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 18px;
  align-items: baseline;
  padding-block: 18px;
  border-bottom: 1px solid var(--linija);
}
.po-uzsakymo__zingsniai li::before {
  content: counter(po-uzsakymo);
  grid-row: span 2;
  min-width: 0.8em;
  font-size: 34px;
  font-weight: 900;
  font-variation-settings:
    "wdth" 125,
    "wght" 900;
  letter-spacing: -0.04em;
  line-height: 0.8;
}
.po-uzsakymo__k {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}
.po-uzsakymo__r {
  margin-top: 4px;
  font-size: 15px;
  color: var(--mid);
}
.po-uzsakymo .po-uzsakymo__pastaba {
  margin-top: 20px;
}
@media (min-width: 780px) {
  .po-uzsakymo__zingsniai {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(20px, 3vw, 40px);
    border-top: 0;
  }
  .po-uzsakymo__zingsniai li {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    padding-block: 22px 4px;
    border-top: 1px solid var(--ink);
    border-bottom: 0;
  }
  .po-uzsakymo__zingsniai li::before {
    grid-row: auto;
    margin-bottom: 20px;
    font-size: clamp(44px, 4.6vw, 64px);
  }
  .po-uzsakymo__k {
    font-size: 19px;
  }
}

/* ── Padėka: kaip naudoti (nuotrauka kairėje, kaip pradžios puslapyje) ── */
.padeka-naudoti {
  background: var(--sky);
}
.padeka-naudoti__foto {
  margin: 0;
}
.padeka-naudoti__foto img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 45%;
}
.padeka-naudoti__tekstas {
  padding: clamp(36px, 6vw, 72px) var(--pad);
}
.padeka-naudoti__tekstas h2 {
  margin: 0;
}
.padeka-naudoti .zingsniai {
  gap: 16px;
  margin-top: 24px;
}
.padeka-naudoti .zingsniai li::before {
  font-size: 34px;
}
.padeka-naudoti .isnasos {
  margin-top: 28px;
  border-top-color: var(--linija);
  color: var(--ink);
}
@media (min-width: 1024px) {
  .padeka-naudoti {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: min(720px, calc(var(--ekr-s, 100svh) - var(--galva) - 1px));
  }
  .padeka-naudoti__foto {
    position: relative;
  }
  .padeka-naudoti__foto img {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
    object-position: 50% 47%;
  }
  .padeka-naudoti__tekstas {
    align-self: center;
    max-width: 640px;
    padding: 56px clamp(40px, 5vw, 88px);
  }
}

/* ── Teisiniai: turinys kairėje nuo 1024 px ── */
.dokumentas__turinys {
  display: none;
}
.teisinis h2 {
  margin: 36px 0 0;
  font-size: 18px;
  font-weight: 700;
  font-variation-settings: normal;
  letter-spacing: 0.01em;
  line-height: 1.3;
  text-transform: none;
  scroll-margin-top: calc(var(--galva) + 24px);
}
.teisinis h2:first-child {
  margin-top: 0;
}
.teisinis .tekstas {
  font-size: 16px;
}
.teisinis .isnasos {
  margin-top: 44px;
}
/* 09-25: teisiniai tekstai perrašyti - atsirado sąrašai, lentelės ir pavyzdinė forma. */
.teisinis .sarasas {
  max-width: 34em;
  margin: 10px 0 0;
  padding-left: 1.2em;
  font-size: 16px;
  line-height: 1.55;
}
.teisinis .sarasas li + li {
  margin-top: 6px;
}
.teisinis .santrauka {
  max-width: 34em;
  margin: 0 0 8px;
  padding: 16px 18px;
  border: 2px solid var(--ink);
  background: var(--snow);
}
.teisinis .santrauka .sarasas {
  margin-top: 6px;
}
.teisinis .lentele-vieta {
  max-width: 100%;
  margin-top: 12px;
  overflow-x: auto;
}
.teisinis table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.45;
}
.teisinis th,
.teisinis td {
  padding: 9px 10px 9px 0;
  border-bottom: 1px solid var(--linija);
  text-align: left;
  vertical-align: top;
}
.teisinis th {
  border-bottom-color: var(--ink);
  font-weight: 700;
}
@media (max-width: 679px) {
  .teisinis table {
    min-width: 0;
  }
  .teisinis thead {
    display: none;
  }
  .teisinis table,
  .teisinis tbody,
  .teisinis tr,
  .teisinis td {
    display: block;
  }
  .teisinis tr {
    padding: 12px 0;
    border-bottom: 1px solid var(--linija);
  }
  .teisinis tr:first-child {
    border-top: 1px solid var(--ink);
  }
  .teisinis td {
    padding: 2px 0;
    border: 0;
    font-size: 15px;
  }
  .teisinis td:first-child {
    font-weight: 700;
    font-size: 16px;
  }
  .teisinis td:not(:first-child)[data-label]::before {
    content: attr(data-label) ": ";
    color: rgb(22 24 28 / 0.66);
  }
}
.teisinis td code {
  font-size: 13px;
  overflow-wrap: anywhere;
}
.teisinis .forma-pavyzdys {
  max-width: 34em;
  margin-top: 12px;
  padding: 16px 18px;
  border: 1px dashed var(--ink);
  font-size: 15px;
  line-height: 1.7;
}
.teisinis .forma-pavyzdys p {
  margin: 0;
}
.teisinis .atnaujinta {
  margin-top: 40px;
  font-size: 14px;
  color: rgb(22 24 28 / 0.66);
}
@media (min-width: 1024px) {
  .dokumentas {
    display: grid;
    grid-template-columns: minmax(200px, 250px) minmax(0, 1fr);
    column-gap: clamp(48px, 7vw, 120px);
    align-items: start;
  }
  .dokumentas__turinys {
    display: block;
    position: sticky;
    top: calc(var(--galva) + 32px);
  }
  .dokumentas__turinys ol {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--ink);
  }
  .dokumentas__turinys li {
    border-bottom: 1px solid var(--linija);
  }
  .dokumentas__turinys a {
    display: block;
    padding-block: 11px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ink);
    text-decoration: none;
  }
  .dokumentas__turinys a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .teisinis h2 {
    font-size: 20px;
  }
}

/* ── 404: hero ir kalnagūbris užima pirmą ekraną, poraštė - po juo ── */
.hero.hero--klaida {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(var(--ekr-s, 100svh) - var(--galva) - var(--kalnai) - 1px);
}
.hero.hero--klaida > .in {
  display: block;
  flex: none;
  width: 100%;
}
.hero--klaida .hero__h1 {
  max-width: 22ch;
}
.klaida__nuoroda {
  padding-block: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* „Mokėjimas nepavyko" - trumpas puslapis: hero su kalnagūbriu užima pirmą
   ekraną (kaip 404), kitaip po poraštės likdavo kaulo spalvos juosta. */
html[data-mokejimas="nepavyko"] .hero.hero--doc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(var(--ekr-s, 100svh) - var(--galva) - var(--kalnai) - 1px);
}
html[data-mokejimas="nepavyko"] .hero.hero--doc > .in {
  display: block;
  flex: none;
  width: 100%;
}

/* ══ Telefono hero - tiksli dėžutė; WebP paveikslėliai (09-15) ═══════════════
   Telefone buvo stalas.jpg su senu dangteliu. Dabar hero-telefonas - plataus
   kompiuterio kadro iškarpa (dėžutė ir maišelis). Dėžutės centras kadre ~55 %
   pločio ir ~46 % aukščio: matoma ir 21:10 juostoje, ir beveik kvadrate. */
@media (max-width: 779px) {
  .hero .hero__foto img,
  .hero .hero__foto .hero__foto__laukas img {
    object-position: 50% 50%;
  }
}
/* <picture> apgaubia <img> dėl WebP, bet išdėstymas turi likti toks, lyg img
   stovėtų tiesiai figūroje (absoliuti padėtis, height: 100 %). */
.naudojimas__foto picture,
.padeka-naudoti__foto picture {
  display: contents;
}

/* ══ Papildymas po pirkimo (09-24) ════════════════════════════════════════
   „Papildykite iki N dėžučių - primokėkite tik skirtumą". Vienas peach blokas po
   „Ačiū": sutaupymas eurais, vienas mygtukas, be spaudimo ir be laikmačio. */
.papildymas {
  max-width: 760px;
  margin-top: 26px;
  padding: 20px 22px 22px;
  border: 2px solid var(--ink);
  background: var(--peach);
}
.papildymas[hidden] {
  display: none !important;
}
.papildymas__h {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
}
.papildymas__sub {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.5;
}
.papildymas .mygtukas {
  margin-top: 16px;
  touch-action: manipulation;
}
.papildymas .mygtukas:disabled {
  opacity: 0.6;
  cursor: default;
}
.papildymas__mokejimas {
  margin-top: 16px;
}
.papildymas__mokejimas[hidden],
.papildymas .mygtukas[hidden] {
  display: none !important;
}
.papildymas__mokejimas .mygtukas {
  width: 100%;
  justify-content: center;
}
.papildymas__klaida {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
}
.papildymas__klaida:empty {
  display: none;
}

/* ══ Padėkos apklausa „Kur apie mus išgirdai?" (09-15) ═══════════════════════
   Spec: vienas klausimas padėkos puslapyje, tik pirmam pirkėjui, atsakymai
   sumaišyta tvarka. Hero apačioje po plona linija - matosi iškart, bet
   nenustelbia „Ačiū". Mygtukai stačiakampiai, kaip visur svetainėje. */
.apklausa {
  max-width: 760px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--linija);
}
.apklausa[hidden],
.apklausa [hidden] {
  display: none !important;
}
.apklausa__klausimas {
  font-size: 17px;
  font-weight: 700;
}
.apklausa__atsakymai {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.apklausa button {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.apklausa .apklausa__atsakymai button[aria-pressed="true"],
.apklausa .apklausa__kuris button {
  background: var(--ink);
  color: var(--snow);
}
@media (any-hover: hover) {
  .apklausa .apklausa__atsakymai button:not([aria-pressed="true"]):hover {
    background: var(--snow);
  }
}
.apklausa button:disabled {
  opacity: 0.55;
  cursor: default;
}
.apklausa__kuris {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-top: 12px;
}
.apklausa__kuris label {
  font-size: 14px;
  font-weight: 600;
}
.apklausa__kuris input {
  flex: 1 1 180px;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--snow);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}
.apklausa__zinute {
  margin-top: 12px;
  font-size: 15px;
  font-weight: 600;
}
.apklausa__zinute:empty {
  display: none;
}

/* ══ Kainos kortelė - žyma „Populiariausias" (09-15) ════════════════════════
   Emilis: pažymėti, kad 3 dėžutės - populiariausias pasirinkimas. Žyma užlipa
   ant kortelės viršutinio krašto, tad kortelių aukštis ir eilutės nesikeičia
   (telefone viršutinis tarpas vos 10 px). Balta su rašalo rėmeliu - matosi ir
   ant juodos (pasirinkta), ir ant šviesios kortelės. Senos .kaina__zyme
   taisyklės (09-13, vieta etiketei) permušamos specifiškumu. 780-1023 px kortelė
   buvo be position - žyma nulėkdavo į puslapio viršų. */
.kainos .kaina {
  position: relative;
}
.kainos .kaina__zyme {
  position: absolute;
  top: 0;
  left: 10px;
  z-index: 1;
  grid-area: auto;
  margin: 0;
  padding: 5px 7px 4px;
  border: 1px solid var(--ink);
  background: var(--snow);
  color: var(--ink);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateY(-50%);
}
@media (min-width: 1024px) {
  .kainos .kaina__zyme {
    left: 20px;
    padding: 6px 9px 5px;
    font-size: 10px;
    letter-spacing: 0.16em;
  }
}

/* 09-17: 100 mg kofeino · 100 mg L-teanino virš hero antraštės (kaip dangtelio lankas). */
.hero__faktai {
  margin-bottom: 14px;
  color: var(--ink);
}

/* ══ 09-17 TO DO: galva slenkant, kainos, „Kada" su nuotraukomis, „Ką daryti toliau",
   Arnas, atsiliepimai, DUK mygtukas ══════════════════════════════════════════════════ */

/* Galva slenkant („baras lieka prikabintas scrolinant"). Slenkant žemyn lipni galva
   pasislepia - ekrano viršuje lieka tik 2 px progreso linija (ji kabo ant galvos
   apatinės briaunos, tad pastūmus galvą per aukštį minus 1 px linija lieka matoma).
   Slenkant aukštyn galva grįžta. Klasę ant <html> uždeda index.html skriptas (1b). */
.galva-juosta {
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
html.galva-paslepta .galva-juosta {
  transform: translateY(calc(-100% + 1px));
}
/* ⚠ 2026-09-20: pradžios puslapyje galva NEBESISLEPIA. Kol viršuje kabėjo akcijų
   juosta, slepiama galva nieko nekainavo - kažkas vis tiek likdavo. Dabar, kai
   prisegta pati galva, slėpimas ją panaikintų slenkant žemyn, t. y. atimtų būtent
   tai, ko prašyta. Kartu tai uždaro seną spragą: žemiau kainų skilties nebebūdavo
   nė vieno kelio į krepšelį (žr. pastabą prie .duk-dalis__veiksmas).
   Kituose puslapiuose slėpimas lieka kaip buvęs. */
html.pradzia.galva-paslepta .galva-juosta {
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .galva-juosta {
    transition: none;
  }
}

/* <picture> su display: contents: <source> nerodomas, bet tinklelyje ar flex eilutėje jis
   tapdavo tuščiu langeliu ir nustumdavo nuotrauką į kitą vietą. */
.kada__nuotrauka picture,
.ambasadorius__foto picture {
  display: contents;
}
.kada__nuotrauka source,
.ambasadorius__foto source {
  display: none;
}

/* ── Kainos ───────────────────────────────────────────────────────────────────── */

/* Paskata pereiti nuo 1 prie 3 dėžučių (tyrimas 1.3 p. 8). */
.paskata {
  margin: 12px 0 0;
}
.paskata[hidden] {
  display: none;
}
.paskata button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--peach);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.18s ease;
}
.paskata button::after {
  content: "→";
  flex: none;
  font-weight: 700;
}
.paskata b {
  font-weight: 800;
  white-space: nowrap;
}
@media (any-hover: hover) {
  .paskata button:hover {
    background: var(--snow);
  }
}

/* Pristatymas, grąžinimas, mokėjimas - prie kainų (tyrimas 4.1 ir 6 sk. 2 p.). */
.garantijos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}
.garantijos li {
  display: flex;
  align-items: center;
  gap: 9px;
}
.garantijos a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.garantijos svg {
  flex: none;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 779px) {
  .garantijos {
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
    font-size: 15px;
  }
}
@media (min-width: 1024px) {
  .pirkimas > .in > .paskata {
    grid-column: 1 / -1;
    grid-row: 6;
  }
  .pirkimas > .in > .garantijos {
    grid-column: 1 / -1;
    grid-row: 7;
    margin-top: clamp(16px, 3vh, 26px);
    padding-top: 16px;
    border-top: 1px solid var(--linija);
  }
}

/* 12 dėžučių kortelė: „sutaupote 36 €" ryškiau (tyrimas 3.6). Telefone - jau persikinė žymė. */
@media (min-width: 780px) {
  .kainos .kaina .kaina__sutaupai {
    font-weight: 700;
  }
  .kainos .kaina[data-q="12"] .kaina__sutaupai {
    padding: 1px 6px;
    background: var(--peach);
    color: var(--ink);
    white-space: nowrap;
  }
}

/* ── Kada: trys kortelės su nuotraukomis ─────────────────────────────────────────
   Kortelė = kvadratinė nuotrauka viršuje + spalvota juosta su ikona ir užrašu (spalvos, ikonos ir
   užvedimas - iš ankstesnių „Kada" blokų). Iki 1023 px kortelės slenka horizontaliai
   (matosi kitos kraštas), nuo 1024 px - trys stulpeliai. */
.kada .kada__eile--foto .kada__kortele {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
}
.kada__nuotrauka {
  position: relative;
  margin: 0;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--mid);
}
.kada__nuotrauka img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kada .kada__eile--foto .kada__tekstas {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  column-gap: 14px;
  row-gap: 2px;
  padding: 18px 20px 20px;
}
.kada .kada__eile--foto .kada__ikona {
  grid-row: 1 / span 2;
  width: 40px;
  height: 40px;
  margin: 0;
}
/* 09-19: lubos nuo 30 px iki 26 px. Nuo ~1300 px kortelės plotis nustoja augti (--w),
   o šriftas augdavo toliau, tad ilgiausias užrašas („Popietinis nuovargis", Edvardas 09-19)
   lūždavo į dvi eilutes ties 1340-1700 px - o ties pačia riba lūždavo tik užvedus pele, nes
   tada letter-spacing praplatėja 0,03em ir tekstas tampa ~17 px ilgesnis. Dabar telpa vienoje
   eilutėje abiem atvejais, tad užvedus apatinis blokas nebeauga. */
.kada .kada__eile--foto .kada__zodis {
  font-size: clamp(22px, 2vw, 26px);
}
.kada .kada__eile--foto .kada__kortele h3 {
  margin: 4px 0 0;
}
@media (prefers-reduced-motion: no-preference) {
  .kada__nuotrauka img {
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .kada .kada__eile--foto .kada__kortele:hover .kada__nuotrauka img {
    transform: scale(1.04);
  }
}
@media (max-width: 1023px) {
  .kada .kada__eile.kada__eile--foto {
    display: flex;
    gap: 12px;
    margin-inline: calc(-1 * var(--pad));
    padding-inline: var(--pad);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--pad);
    scrollbar-width: none;
    border-top: 0;
  }
  .kada .kada__eile--foto::-webkit-scrollbar {
    display: none;
  }
  .kada .kada__eile--foto .kada__kortele {
    flex: 0 0 min(84%, 340px);
    scroll-snap-align: start;
  }
  .kada .kada__eile--foto .kada__kortele:hover {
    transform: none;
  }
}
@media (min-width: 780px) and (max-width: 1023px) {
  .kada .kada__eile--foto .kada__kortele {
    flex-basis: 44%;
  }
}
@media (min-width: 1024px) {
  .kada .kada__eile.kada__eile--foto {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
}

/* ── Ką daryti toliau: kelias ────────────────────────────────────────────────────
   Trys žingsniai: ikona dangaus kvadrate, numeris, trumpas pavadinimas ir tekstas.
   Kvadratus jungia punktyrinė linija - telefone vertikaliai, kompiuteryje horizontaliai.
   Mygtukas kompiuteryje - prie antraštės, telefone - apačioje. Senos .kelias__eile /
   .kelias__zingsnis taisyklės nebenaudojamos. */
.kelias__in {
  display: grid;
  grid-template-areas:
    "virsus"
    "zingsniai"
    "platus"
    "veiksmas";
}
.kelias__virsus {
  grid-area: virsus;
}
.kelias .kelias__virsus .lankas {
  color: var(--far);
}
.kelias__h2 {
  margin-top: 14px;
  color: var(--snow);
}
.kelias__zingsniai {
  grid-area: zingsniai;
  display: grid;
  gap: 28px;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}
.kelias__punktas {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: start;
  column-gap: 18px;
}
.kelias__zenkliukas {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  background: var(--sky);
  color: var(--ink);
}
.kelias .kelias__ikona {
  width: 38px;
  height: 38px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.kelias__nr {
  margin: 4px 0 0;
  color: var(--sky);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
}
.kelias__pav {
  margin: 6px 0 0;
  color: var(--snow);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.kelias__punktas .kelias__t {
  max-width: 34ch;
  margin: 8px 0 0;
  color: var(--bone);
  font-size: 17px;
  line-height: 1.5;
}
.kelias__punktas:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 74px;
  bottom: -22px;
  left: 31px;
  border-left: 2px dashed rgb(180 210 232 / 0.4);
}
.kelias .platus--tamsus {
  grid-area: platus;
}
.kelias .kelias__veiksmas {
  grid-area: veiksmas;
}
@media (min-width: 780px) {
  .kelias__in {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "virsus veiksmas"
      "zingsniai zingsniai"
      "platus platus";
    align-items: end;
    column-gap: 32px;
  }
  .kelias .kelias__veiksmas {
    margin-top: 0;
  }
  .kelias__zingsniai {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 32px;
    margin-top: 48px;
  }
  .kelias__punktas {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 20px;
  }
  .kelias__punktas:not(:last-child)::after {
    top: 31px;
    bottom: auto;
    left: 82px;
    right: -14px;
    border-top: 2px dashed rgb(180 210 232 / 0.4);
    border-left: 0;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .kelias__zenkliukas {
    transition:
      transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
      background-color 0.3s ease;
  }
  .kelias__punktas:hover .kelias__zenkliukas {
    transform: translateY(-4px);
    background: var(--peach);
  }
}

/* ── Arno skiltis (perdaryta 09-26) ─────────────────────────────────────────────
   Vartotojas: „padaryk kaip tau atrodo geriausia". Skiltis turi parodyti, kad tikras
   žmogus PYK naudoja, o ne vardinti Arno skaičius. Todėl:
   - nuotrauka didžiausia skilties dalis: telefone per visą plotį, kompiuteryje kairėje
     per visą aukštį; vardas ir pareigos - rašalo lipdukas ant nuotraukos (kaip kūrėjo
     kortelė feed'e), o ne atskiras stulpelis;
   - citata - du paskutiniai Arno sakiniai pažodžiui, stambiai, be „Skaityti visą";
   - keturi skaičių blokai ir trys profilių mygtukai - viena eilutė su TikTok nuoroda;
   - po skilties mygtukas į kainas (anksčiau po jos buvo tik atsiliepimai).
   Telefone .ambasadorius__tekstas - display: contents, kad nuotrauka stovėtų tarp
   antraštės ir citatos. */
.ambasadorius {
  background: var(--ink);
  color: var(--snow);
}
html.pradzia main > section.ambasadorius {
  padding-block: clamp(20px, 3vh, 56px);
}
.ambasadorius__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "lankas"
    "h2"
    "foto"
    "citata"
    "skaiciai"
    "cta";
}
.ambasadorius__tekstas {
  display: contents;
}
.ambasadorius .lankas {
  grid-area: lankas;
  color: var(--far);
}
.ambasadorius__h {
  grid-area: h2;
  margin-top: 8px;
  color: var(--snow);
  font-size: min(28px, calc((100vw - 2 * var(--pad)) * 0.078));
  line-height: 1.04;
  text-wrap: balance;
}
.ambasadorius__foto {
  grid-area: foto;
  position: relative;
  margin: 16px 0 0;
  aspect-ratio: 4 / 5;
  max-height: 64svh;
  overflow: hidden;
  background: var(--mid);
}
.ambasadorius__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 35%;
}
.ambasadorius__zyme {
  position: absolute;
  left: 0;
  bottom: 0;
  display: grid;
  gap: 3px;
  padding: 10px 14px 11px;
  background: var(--ink);
}
.ambasadorius__vardas {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.ambasadorius__role {
  color: var(--sky);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ambasadorius__citata {
  grid-area: citata;
  margin: 18px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--sky);
}
.ambasadorius__citata p {
  margin: 0;
  color: var(--snow);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.4;
  text-wrap: pretty;
}
.ambasadorius__skaiciai {
  grid-area: skaiciai;
  margin: 14px 0 0;
  color: rgb(255 255 255 / 0.68);
  font-size: 13px;
  line-height: 1.5;
}
.ambasadorius__skaiciai b {
  color: var(--snow);
  font-weight: 800;
}
.ambasadorius__skaiciai a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--sky);
  font-weight: 700;
  white-space: nowrap;
  text-underline-offset: 3px;
}
/* Telefone TikTok nuoroda - atskira eilute, kad „·" nekabotų eilutės gale. */
.ambasadorius__tarp {
  display: none;
}
.ambasadorius__skaiciai a {
  display: flex;
  width: fit-content;
  margin-top: 2px;
}
@media (min-width: 780px) {
  .ambasadorius__tarp {
    display: inline;
  }
  .ambasadorius__skaiciai a {
    display: inline-flex;
    margin-top: 0;
  }
}
.ambasadorius__skaiciai svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
}
.ambasadorius__cta {
  grid-area: cta;
  justify-self: stretch;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
}
@media (max-width: 380px) {
  .ambasadorius__citata p {
    font-size: 17px;
  }
  .ambasadorius__cta {
    padding-inline: 18px;
    letter-spacing: 0.16em;
  }
}
@media (min-width: 780px) {
  html.pradzia .ambasadorius__in {
    flex: 1 1 auto;
  }
  .ambasadorius__in {
    grid-template-columns: minmax(0, 6fr) minmax(0, 7fr);
    grid-template-areas: none;
    align-items: stretch;
    column-gap: clamp(28px, 4.5vw, 80px);
  }
  .ambasadorius__tekstas {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-width: 0;
    padding-block: clamp(4px, 1.2vh, 18px);
  }
  .ambasadorius__foto {
    grid-area: auto;
    margin: 0;
    aspect-ratio: auto;
    max-height: none;
    min-height: 380px;
  }
  .ambasadorius__zyme {
    padding: 14px 20px 15px;
  }
  .ambasadorius__vardas {
    font-size: 22px;
  }
  .ambasadorius__role {
    font-size: 11px;
  }
  .ambasadorius__h {
    font-size: clamp(26px, min(3.1vw, 4.9vh), 44px);
  }
  .ambasadorius__citata {
    margin-top: clamp(18px, 3vh, 32px);
    padding-left: 20px;
  }
  .ambasadorius__citata p {
    font-size: clamp(20px, min(2vw, 3.3vh), 30px);
    line-height: 1.35;
  }
  .ambasadorius__skaiciai {
    margin-top: clamp(14px, 2.4vh, 24px);
    font-size: 14px;
  }
  .ambasadorius__cta {
    justify-self: start;
    margin-top: clamp(20px, 3.4vh, 36px);
  }
}

/* Kortelių smulkmenos juostoje - kad ji liktų plona. */
.atsiliepimas__zvaigzdes svg {
  width: 70px;
  height: 14px;
}
.atsiliepimas__viso {
  margin-top: -2px;
  font-size: 12px;
}
.atsiliepimas__vardas b {
  font-size: 14px;
}
.atsiliepimas__vardas span {
  font-size: 10px;
}
.atsiliepimai__apie {
  font-size: 11.5px;
}
/* Siauri telefonai (≤380 px): atsiliepimų antraštė lūždavo į dvi eilutes - smulkiau. */
@media (max-width: 380px) {
  .atsiliepimai__virsus {
    gap: 6px 8px;
  }
  .atsiliepimai__suvestine {
    gap: 4px 6px;
    font-size: 12px;
  }
  .atsiliepimai__suvestine svg {
    width: 60px;
    height: 12px;
  }
  .atsiliepimai__rodykles {
    gap: 6px;
  }
  .atsiliepimai__rodykle {
    width: 32px;
    height: 32px;
  }
}

/* ── Atsiliepimai: juosta „Pasitiki PYK" skilties apačioje + įvertinimas hero ──────
   Rašalo fone: kortelės --mid, žvaigždutės dangaus spalvos. Juosta slenka horizontaliai
   (rodyklės ir automatinis slinkimas - index.html skriptas), kortelės tekstas iki 4 eilučių. */
.hero__ivertinimas {
  display: inline-grid;
  justify-items: start;
  gap: 5px;
  margin-bottom: 14px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.hero__ivertinimas[hidden] {
  display: none;
}
/* 09-26: kompaktiškas įvertinimas - plytelės ir vidurkis, po jais antspaudas ir
   „12 patvirtintų atsiliepimų". Mygtukas lieka vienintelis tamsus hero elementas. */
.hero__iv-eil {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero__iv-vid {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.hero__iv-vid b {
  font-size: 19px;
  font-weight: 800;
}
.hero__ivertinimas .plyteles {
  --plytele: 24px;
}
.hero__iv-patv {
  gap: 6px;
  font-size: 14px;
}
.hero__ivertinimas .hero__iv-patv svg {
  flex: none;
  width: 17px;
  height: 17px;
  fill: var(--ink);
  color: var(--sky);
}
/* Pažadai po hero mygtuku. */
.hero__pazadai {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
}
.hero__pazadai li {
  display: flex;
  align-items: center;
  gap: 6px;
}
.hero__pazadai li::before {
  content: "";
  flex: none;
  width: 9px;
  height: 5px;
  margin: -4px 2px 0 0;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}
.plyteles {
  --plytele: 30px;
}
.plyteles {
  --plytele: 28px;
  display: flex;
  gap: calc(var(--plytele) * 0.11);
}
.plyteles .plytele {
  position: relative;
  display: block;
  width: var(--plytele);
  height: var(--plytele);
  overflow: hidden;
  background: rgb(22 24 28 / 0.22);
}
.plytele__uzp {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  background: var(--ink);
}
.plyteles .plytele svg {
  position: absolute;
  inset: 14%;
  width: 72%;
  height: 72%;
  fill: var(--snow);
}
.atsiliepimai__suvestine .plyteles {
  --plytele: 22px;
}
.hero__iv-kiek {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.atsiliepimai[hidden] {
  display: none;
}
.atsiliepimai {
  scroll-margin-top: 90px;
}
.atsiliepimai__virsus {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding-top: 22px;
  border-top: 1px solid rgb(255 255 255 / 0.18);
}
.atsiliepimai__antraste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
}
.atsiliepimai .lankas {
  color: var(--far);
}
.atsiliepimai__suvestine {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 0;
  color: rgb(255 255 255 / 0.8);
  font-size: 14px;
  font-weight: 600;
}
.atsiliepimai__suvestine b {
  color: var(--snow);
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}
.atsiliepimai__suvestine svg {
  display: block;
  width: 90px;
  height: 18px;
}
.atsiliepimai .pilna {
  fill: var(--sky);
}
.atsiliepimai .tuscia {
  fill: none;
  stroke: var(--sky);
  stroke-width: 1.2;
}
.atsiliepimai__rodykles {
  display: flex;
  gap: 8px;
}
.atsiliepimai__rodykles[hidden] {
  display: none;
}
.atsiliepimai__rodykle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.45);
  border-radius: 0;
  background: transparent;
  color: var(--snow);
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}
.atsiliepimai__rodykle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (any-hover: hover) {
  .atsiliepimai__rodykle:hover {
    border-color: var(--snow);
    background: var(--snow);
    color: var(--ink);
  }
}
.atsiliepimai__eile {
  display: flex;
  gap: 12px;
  margin: 18px 0 0;
  padding: 0;
  overflow-x: auto;
  list-style: none;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.atsiliepimai__eile::-webkit-scrollbar {
  display: none;
}
.atsiliepimas {
  display: flex;
  flex: 0 0 min(82%, 330px);
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 18px 18px 16px;
  background: var(--mid);
  color: var(--bone);
}
.atsiliepimas__zvaigzdes {
  margin: 0;
}
.atsiliepimas__zvaigzdes svg {
  display: block;
  width: 80px;
  height: 16px;
}
.atsiliepimas__tekstas {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: 15px;
  line-height: 1.5;
  white-space: pre-line;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}
.atsiliepimas--visas .atsiliepimas__tekstas {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
}
.atsiliepimas__viso {
  align-self: flex-start;
  margin-top: -4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sky);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.atsiliepimas__viso[hidden] {
  display: none;
}
.atsiliepimas__kas {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgb(255 255 255 / 0.12);
}
.atsiliepimas__foto {
  flex: none;
  width: 44px;
  height: 44px;
  object-fit: cover;
}
.atsiliepimas__vardas {
  display: grid;
  gap: 2px;
  min-width: 0;
  margin: 0;
}
.atsiliepimas__vardas b {
  color: var(--snow);
  font-size: 15px;
  font-weight: 800;
}
.atsiliepimas__vardas span {
  color: rgb(255 255 255 / 0.62);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* 09-26: „Patvirtintas pirkimas" - rašalo varnelė; ant kaulo ir dangaus kortelių vienodai
   matoma. Tekstas tamsesnis nei kitos eilutės dalys, kad ženklelis išsiskirtų. */
.atsiliepimas__patvirtinta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  vertical-align: -2px;
}
.atsiliepimas .atsiliepimas__vardas .atsiliepimas__patvirtinta {
  color: var(--ink);
  font-weight: 800;
}
/* „· 3 dėžutės" nelūžta per pusę - siaurame ekrane visas nukrenta į kitą eilutę. */
.atsiliepimas__dez {
  white-space: nowrap;
}
.atsiliepimas__patvirtinta svg {
  flex: none;
  width: 15px;
  height: 15px;
  fill: var(--ink);
  color: var(--snow);
}
.atsiliepimai__apie {
  max-width: 80ch;
  margin: 14px 0 0;
  color: rgb(255 255 255 / 0.6);
  font-size: 12px;
  line-height: 1.5;
}
.atsiliepimai__apie a {
  color: var(--snow);
  font-weight: 700;
}
@media (max-width: 779px) {
  .atsiliepimai__eile {
    margin-inline: calc(-1 * var(--pad));
    padding-inline: var(--pad);
    scroll-padding-inline: var(--pad);
  }
}

/* ── DUK: paskutinis mygtukas vietoj atskiros „Užsakymo" skilties ──────────────── */
.duk-dalis__klausk {
  max-width: 30ch;
  margin: 18px 0 0;
  font-size: 15px;
  line-height: 1.5;
}
.duk-dalis__klausk a {
  color: var(--ink);
  font-weight: 700;
}
.duk-dalis .duk-dalis__veiksmas {
  margin-top: 22px;
}
.kalnas.kalnas--kaulas {
  background: var(--bone);
}
/* 09-25 (Edvardas: „naikinam tą liniją tarp kalnų ir footerio"). Kalnagūbris baigia
   <main>, o telefone tarp jo apačios ir poraštės likdavo subpikselinis tarpas - pro jį
   matėsi kaulo fonas. Poraštė užlipa 1 px ant kalnų (neįžiūrima) ir tarpo nelieka. */
main:has(> .kalnas:last-child) + .porastė {
  position: relative;
  margin-top: -1px;
}

/* ══ Pradžios puslapis: prisegta akcijų juosta, sekcijos per visą ekraną, prisitraukimas (09-17) ══
   Vartotojas: akcijų juosta prisegta viršuje viso slinkimo metu; sekcijos per visą ekraną, kad
   užėjus nesimatytų kitų; sustojus netoli sekcijos pradžios - atitraukia ją per visą ekraną.
   Tik html.pradzia (index.html): kiti puslapiai naudoja tą patį pyk.css.
   - .naujiena lipni (34 px), galva - po ja; slenkant žemyn galva pasislenka po juosta.
   - Prisitraukimas - index.html skriptas „Sekcijų magnetas" (sklandi animacija; CSS
     scroll-snap buvo per staigus). scroll-padding-top = juostos aukštis inkarams.
   - Seni scroll-margin (inkarams po lipnia galva) nustumdavo sekciją žemyn - nulis.
   - Sekcijos aukštis 100lvh (didelis vaizdas): ir telefone paslėpus naršyklės juostas apačioje
     nekyšo kita sekcija. Turinys - per vidurį. */
/* ⚠ 2026-09-20 (Edvardas): „scrolinant dabar prisipinina announcement baras, ji
   atkabinam ir prikabinam header menu". Iki šiol prisegta buvo akcijų juosta (34 px),
   o galva kabėjo po ja. Dabar atvirkščiai: juosta nuslenka kartu su puslapiu, o
   viršuje lieka galva - joje meniu ir „Pirkti dabar", t. y. tai, kuo iš tikrųjų
   naudojamasi. Akcijų juosta savo darbą padaro pirmame ekrane.

   Visi skaičiavimai, kurie rėmėsi --naujiena, perrašyti į --galva: sekcijų aukštis,
   inkarų atitraukimas ir lipni „Kaip naudoti" nuotrauka. Hero aukštis (failo pradžioje)
   NEkeičiamas - puslapio viršuje abi juostos vis tiek matomos. */
html.pradzia {
  scroll-padding-top: var(--galva);
}
html.pradzia .galva-juosta {
  top: 0;
}
html.pradzia main > section.dalis,
html.pradzia main > section.naudojimas,
html.pradzia main > section#kaina {
  min-height: calc(100vh - var(--galva));
  min-height: calc(var(--ekr-l, 100lvh) - var(--galva));
  scroll-margin-top: 0;
}
html.pradzia main > section.dalis {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
html.pradzia main > section.dalis > .in {
  width: 100%;
}
@media (min-width: 1024px) {
  html.pradzia .naudojimas__foto {
    top: var(--galva);
    height: min(760px, calc(var(--ekr-s, 100svh) - var(--galva)));
  }
}

/* ══ Akcijų juosta: spalvota ir slenkanti (09-17) ═══════════════════════════════════
   Vartotojas: „geresnį, spalvingesnį, kažkokį movementą duok". Persiko fonas (skonio PEACH
   spalva) su rašalo tekstu, eilutė slenka į kairę ~40 px/s, tarp punktų - mažas kalnagūbris su
   balta viršūne. Takas = dvi vienodos eilės, animacija -50 % - besiūlė kilpa. Aukštis lieka
   --naujiena (34 px): apatinė linija - šešėliu, ne rėmeliu. */
.naujiena {
  overflow: hidden;
  background: var(--peach);
  color: var(--ink);
  box-shadow: inset 0 -1px 0 rgb(22 24 28 / 0.14);
}
.naujiena__takas {
  display: flex;
  width: max-content;
  animation: naujiena-slenka 80s linear infinite;
}
.naujiena__eile {
  display: flex;
  flex: none;
  margin: 0;
  padding: 0;
  list-style: none;
}
.naujiena__eile li {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: var(--naujiena);
  padding-right: 24px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.naujiena__eile li::after {
  content: "";
  flex: none;
  width: 16px;
  height: 11px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Cpath d='M0 11 8 0l8 11Z' fill='%2316181c'/%3E%3Cpath d='M8 0 5.5 3.4 6.9 2.9 8 3.8 9.1 2.9 10.5 3.4Z' fill='%23fff'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
@keyframes naujiena-slenka {
  to {
    transform: translateX(-50%);
  }
}
@media (any-hover: hover) {
  .naujiena:hover .naujiena__takas {
    animation-play-state: paused;
  }
}
@media (prefers-reduced-motion: reduce) {
  .naujiena__takas {
    animation: none;
  }
}

/* ══ Atsiliepimų juosta tarp „Pasitiki PYK" ir „Kaina" (09-18) ══════════════════════
   Vartotojas: „Arno sekcija per pilną ekraną, reviews po Arno sekcija, bet ji neužima pilno
   ekrano - tiesiog scroll thru, pabandyk tą sekciją kaulo spalvos daryt".
   Juosta NĖRA <section>: sekcijų magnetas dirba su main > section, tad ji savo stotelės
   nesukuria - Arnas lieka per visą ekraną, o juosta praslenkama einant prie kainų.
   Kaulo fonas tarp rašalo Arno ir dangaus Kainos; kortelės baltos su plona linija, žvaigždutės
   ir rodyklės - rašalo, kaip įvertinimas hero. */
.atsiliepimai {
  background: var(--bone);
  color: var(--ink);
}
.atsiliepimai > .in {
  padding-block: clamp(20px, 3vw, 34px) clamp(22px, 3.2vw, 38px);
}
/* Antraštė, paaiškinimas ir rodyklės - viena eilutė; juosta turi likti plona. */
.atsiliepimai__virsus {
  flex-wrap: nowrap;
  gap: 10px 20px;
  padding-top: 0;
  border-top: 0;
}
.atsiliepimai__antraste {
  flex: none;
}
.atsiliepimai .lankas {
  color: var(--ink);
}
.atsiliepimai__suvestine {
  color: rgb(22 24 28 / 0.72);
}
.atsiliepimai__suvestine b {
  color: var(--ink);
}
.atsiliepimai .pilna {
  fill: var(--ink);
}
.atsiliepimai .tuscia {
  fill: none;
  stroke: var(--ink);
}
.atsiliepimai__apie {
  color: rgb(22 24 28 / 0.62);
}
.atsiliepimai__apie a {
  color: var(--ink);
}
.atsiliepimai__eile {
  margin-top: 14px;
}
.atsiliepimas {
  flex-basis: min(78%, 300px);
  gap: 6px;
  padding: 14px 16px 12px;
  border: 1px solid var(--linija);
  background: var(--snow);
  color: var(--ink);
}
.atsiliepimas__tekstas {
  font-size: 14px;
  line-height: 1.5;
  -webkit-line-clamp: 3;
}
.atsiliepimas__viso {
  color: var(--ink);
}
.atsiliepimas__kas {
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--linija);
}
.atsiliepimas__foto {
  width: 38px;
  height: 38px;
}
.atsiliepimas__vardas b {
  color: var(--ink);
}
.atsiliepimas__vardas span {
  color: rgb(22 24 28 / 0.58);
}
.atsiliepimai__rodykle {
  width: 38px;
  height: 38px;
  border-color: var(--linija);
  color: var(--ink);
}
@media (any-hover: hover) {
  .atsiliepimai__rodykle:hover {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--bone);
  }
}
@media (max-width: 779px) {
  .atsiliepimai__virsus {
    gap: 8px 12px;
  }
  .atsiliepimai__suvestine {
    font-size: 12.5px;
  }
  .atsiliepimai__suvestine svg {
    width: 72px;
    height: 14px;
  }
  .atsiliepimai__suvestine b {
    font-size: 18px;
  }
  .atsiliepimai .lankas {
    display: none;
  }
}

/* ══ Atsiliepimų juosta: rodyklės šonuose, begalinė kilpa (09-18) ═══════════════════
   Vartotojas: „rodyklės turėtų būti iš šonų, reviews loopintųsi, kad į bet kurią pusę
   scrolinant nesustotų, ir automatiškai po biski scrolintų; o tas tekstukas, kad palikti
   atsiliepimą, turėtų būti dešinėj apačioj mini sekcijos".
   Rodyklės - ant pačių juostos kraštų, su kaulo fonu, kad būtų matomos ir ant kortelės.
   Kilpą ir tolygų slinkimą daro index.html skriptas. */
/* Rodyklės stovi GRETA eilės, ne ant jos: uždėtos ant viršaus jos užlipdavo ant kortelių
   teksto, nes eilė po jomis slenka. display: contents - mygtukai tampa juostos vaikais. */
.atsiliepimai__juosta {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 16px);
  margin-top: 14px;
}
.atsiliepimai__rodykles {
  display: contents;
}
.atsiliepimai__rodykle {
  flex: none;
  width: 40px;
  height: 40px;
  border-color: var(--linija);
  background: transparent;
  color: var(--ink);
}
.atsiliepimai__rodykle--kaire {
  order: -1;
}
.atsiliepimai__rodykle--desine {
  order: 1;
}
@media (any-hover: hover) {
  .atsiliepimai__rodykle:hover {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--bone);
  }
}
.atsiliepimai__eile {
  flex: 1 1 auto;
  min-width: 0;
  margin-top: 0;
  padding-inline: 0;
}
.atsiliepimai .atsiliepimai__apie {
  max-width: none;
  margin: 14px 0 0;
  text-align: right;
}
@media (max-width: 779px) {
  .atsiliepimai__rodykle {
    width: 32px;
    height: 32px;
  }
  /* Telefone eilė anksčiau lįsdavo į paraštes (neigiama margin) - dabar šalia jos stovi
     rodyklės, tad eilė lieka savo vietoje. */
  .atsiliepimai__eile {
    margin-inline: 0;
    padding-inline: 0;
    scroll-padding-inline: 0;
  }
  .atsiliepimai .atsiliepimas {
    flex-basis: min(90%, 260px);
  }
  .atsiliepimai .atsiliepimai__apie {
    margin-top: 12px;
    text-align: left;
  }
}

/* ══ Atsiliepimų juosta: spalva ir gilumas (09-18) ══════════════════════════════════
   Vartotojas: „įnešk spalvos į sekciją ir pagalvok, kaip geriau čia padaryti, gal labai
   ufancy scrolling animation".
   - Kas antra kortelė - dangaus mėlyna (ta pati dėžutės spalva), kitos baltos. Spalvą deda
     skriptas pagal eilės numerį, tad kilpos kopijose ritmas nepasislenka.
   - Kraštuose juosta nublanksta (mask): besisukanti eilė nebeatrodo nukirsta ties rėmu, o
     kortelės, atsliuogusios į vidurį, tampa ryškiausios (dydį ir ryškumą keičia skriptas).
   - Peršviečiama kaukė, ne spalvos perėjimas - brand knygos „jokių gradientų" taisyklė galioja. */
.atsiliepimas[data-spalva="1"] {
  border-color: transparent;
  background: var(--sky);
}
.atsiliepimas[data-spalva="1"] .atsiliepimas__kas {
  border-top-color: rgb(22 24 28 / 0.18);
}
.atsiliepimas[data-spalva="1"] .atsiliepimas__vardas span {
  color: rgb(22 24 28 / 0.66);
}
.atsiliepimas {
  transform-origin: 50% 50%;
  transition: none;
}
.atsiliepimai__eile {
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 46px,
    #000 calc(100% - 46px),
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 46px,
    #000 calc(100% - 46px),
    transparent 100%
  );
}
@media (prefers-reduced-motion: reduce) {
  .atsiliepimai__eile {
    -webkit-mask-image: none;
    mask-image: none;
  }
}
@media (max-width: 779px) {
  .atsiliepimai__eile {
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent 0,
      #000 24px,
      #000 calc(100% - 24px),
      transparent 100%
    );
    mask-image: linear-gradient(
      90deg,
      transparent 0,
      #000 24px,
      #000 calc(100% - 24px),
      transparent 100%
    );
  }
}

/* ══ „Kaina" žemesniuose ekranuose (09-18) ══════════════════════════════════════════
   Vartotojas: „kaina sekcija, kai rodo, kad reikia dar dviejų dėžučių iki free shippingo,
   netelpa į ekraną". Paskata („Dar 2 dėžutės už 14,10 €") prideda ~44 px, ir ties 1280x720 bei
   390x844 skiltis išlįsdavo 33-42 px. Žemuose languose - mažesnės paraštės ir tarpai; kainų
   kortelės ir tekstai nekeičiami. */
@media (max-height: 860px) {
  html.pradzia main > section#kaina {
    padding-block: clamp(18px, 2.6vh, 34px);
  }
  html.pradzia #kaina .kainos {
    margin-top: clamp(14px, 2.2vh, 24px);
    margin-bottom: 10px;
  }
  html.pradzia #kaina .pirkimas__veiksmas {
    margin-top: clamp(12px, 2vh, 20px);
  }
  html.pradzia #kaina .garantijos {
    margin-top: clamp(10px, 1.8vh, 18px);
  }
}

/* Telefone „Kaina" su paskata vis dar išlįsdavo ~48 px: garantijos ten stovi stulpeliu (3 eilutės),
   o po jomis dar dvi pastraipos su didelėmis paraštėmis. Žemuose telefonuose - glaudžiau. */
@media (max-width: 779px) and (max-height: 900px) {
  html.pradzia #kaina .garantijos {
    gap: 6px;
    margin-top: 12px;
    font-size: 13px;
  }
  html.pradzia #kaina .garantijos svg {
    width: 19px;
    height: 19px;
  }
  html.pradzia #kaina .pirkimas__imonei {
    margin-top: 10px;
  }
  html.pradzia #kaina .isnasos {
    margin-top: 10px;
  }
  html.pradzia #kaina .pirkimas__veiksmas {
    margin-top: 14px;
  }
}

/* ══ „Kaina": paskata mygtuko dešinėje (09-18) ══════════════════════════════════════
   Vartotojas: „padaryk 'iki nemokamo...' dešinėj pirkti mygtuko". Paskata perkelta į tą patį
   bloką kaip mygtukas; blokas - eilutė, kurioje abu stovi greta ir vienodo aukščio. Telefone,
   kur eilutėje vietos nėra, ji vėl nusileidžia po mygtuku. */
.pirkimas__veiksmas {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px 14px;
}
.pirkimas__veiksmas .paskata {
  margin: 0;
}
/* Mygtuke tekstas ir suma - flex elementai; siaurame langelyje jie lūždavo į tris eilutes.
   Eilutėje šalia „Pirkti dabar" vietos užtenka, tad leidžiam jai būti tokio pločio, kokio reikia. */
/* Vienodo aukščio su „Pirkti dabar": eilutė - stretch, o mygtukas užpildo savo pastraipą. */
.pirkimas__veiksmas .paskata {
  display: flex;
  margin: 0;
}
/* ⚠ Būtina: `.paskata[hidden] { display: none }` yra aukščiau faile ir tokio paties svorio,
   tad be šios eilutės `display: flex` jį nugalėdavo - paskata rodydavosi prie BET KOKIO kiekio. */
.pirkimas__veiksmas .paskata[hidden] {
  display: none;
}
.pirkimas__veiksmas .paskata button {
  gap: 6px;
  min-height: 0;
  height: 100%;
  white-space: nowrap;
}
@media (max-width: 900px) {
  .pirkimas__veiksmas .paskata button {
    width: 100%;
    min-height: 44px;
    white-space: normal;
  }
}

/* ══ „Produktyvumas evoliucionavo": dozė (09-18) ════════════════════════════════════
   Vartotojas: „reikia pridėti kažkur, kad 100 mg L-teanino ir 100 mg kofeino". Du skaičiai po
   pastraipa, tuo pačiu ritmu kaip Arno skaičiai: didelis kiekis, po juo mažas parašas. Tarp jų -
   plona linija, kad būtų matyti, jog tai du atskiri dalykai, o ne vienas 200 mg. */
.naudojimas__doze {
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(18px, 2.4vw, 34px);
  margin: 18px 0 0;
}
.naudojimas__doze span {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}
.naudojimas__doze span + span {
  padding-left: clamp(18px, 2.4vw, 34px);
  border-left: 1px solid var(--linija);
}
.naudojimas__doze b {
  font-size: clamp(20px, 1.7vw, 26px);
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1;
}
@media (max-width: 779px) {
  .naudojimas__doze {
    gap: 8px 16px;
  }
  .naudojimas__doze span {
    font-size: 11px;
  }
  .naudojimas__doze span + span {
    padding-left: 16px;
  }
  .naudojimas__doze b {
    font-size: 20px;
  }
}

/* ══ Sudėties kortelės (09-25) ═════════════════════════════════════════════════════
   Edvardas: „kaip brite" (britedrinks.com „The science" - dvi kortelės su ikona). Formą
   perimam, turinį - ne: tik kiekis, kas tai ir palyginimas su kava, jokio poveikio
   (ES 1924/2006). Pakeitė .naudojimas__doze. */
.ingredientai {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 520px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.ingredientas {
  padding: 16px 16px 14px;
  border: 2px solid var(--ink);
  background: var(--snow);
  color: var(--ink);
}
.ingredientas__ikona {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ingredientas__kiekis {
  margin: 10px 0 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}
.ingredientas__kiekis b {
  display: block;
  margin-bottom: 2px;
  font-size: clamp(24px, 2vw, 30px);
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1;
  text-transform: none;
}
.ingredientas__t {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.4;
}
.ingredientai__pastaba {
  max-width: 520px;
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.45;
  opacity: 0.8;
}
@media (max-width: 779px) {
  .ingredientai {
    gap: 10px;
  }
  .ingredientas {
    padding: 14px 12px 12px;
  }
  .ingredientas__ikona {
    width: 30px;
    height: 30px;
  }
  .ingredientas__t {
    font-size: 13px;
  }
}
@media (min-width: 1024px) and (max-height: 760px) {
  .ingredientai {
    margin-top: 14px;
  }
  .ingredientas {
    padding: 12px 14px 10px;
  }
  .ingredientas__ikona {
    width: 28px;
    height: 28px;
  }
  .ingredientas__kiekis {
    margin-top: 6px;
  }
}

/* Tyrimų sąrašas „Ką rodo tyrimai" (09-25) - suskleistame bloke, kaip „Sudėtis". */
.tyrimai {
  margin: 10px 0 0;
  padding-left: 1.3em;
  font-size: 15px;
  line-height: 1.5;
}
.tyrimai li + li {
  margin-top: 10px;
}
.tyrimai a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  white-space: nowrap;
}
.tyrimai__pastaba {
  font-size: 13px;
  opacity: 0.8;
}
.naudojimas #tyrimai + #sudetis {
  margin-top: 0;
  border-top: 0;
}

/* ══ DUK: stambesnės eilutės (09-18) ═══════════════════════════════════════════════
   Vartotojas: „dešinėj pusėj gal padidinam elementus, nes kažkaip tuščiai atrodo".
   Klausimai stambesni ir su daugiau oro, tad šeši jų užpildo stulpelį; kartu pirmas atidarytas
   iš karto (index.html), o rezervuotas aukštis ilgiausiam atsakymui lieka kaip buvo. */
/* Didinama tik ten, kur vietos tikrai yra: prie 1280x720 ir telefone skiltis nuo didesnių
   eilučių išlįsdavo už ekrano (720 -> 719 telpa, su didesnėm - 719 vs 686). */
@media (min-width: 1024px) and (min-height: 820px) {
  .duk__vnt summary {
    padding-block: clamp(18px, 2.3vh, 26px);
    font-size: clamp(19px, 1.45vw, 23px);
  }
  .duk__vnt summary::after {
    font-size: 22px;
  }
}

/* ══ Hero: kairė - spalva, dešinė - nuotrauka (09-18) ═══════════════════════════════
   Vartotojas: „hero kairė pusė turi būti be foto, su colored backgroundu, foto lieka dešinėj,
   kaip Brite" (britedrinks.com). Iki šiol nuotrauka driekėsi per visą hero, o tekstas gulėjo ant
   jos. Dabar riba - tiksliai per vidurį: kairėje dangaus fonas (.hero jau turi
   background: var(--sky)), dešinėje - kadras.
   Teksto stulpelio dešinė paraštė = 50 % savo konteinerio + tarpas: kai .in centruotas, ta riba
   sutampa su 50 vw, prie kurio prisiglaudžia nuotrauka (L + W - PR = 50vw - g, kai L = (100vw-W)/2
   => PR = W/2 + g). */
@media (min-width: 780px) {
  .hero .hero__foto {
    left: auto;
    right: 0;
    width: 50%;
  }
  /* Riba dedama teksto stulpeliui, ne paraštei: su padding-right blokas neišsitekdavo
     (antraštė nesitraukia žemiau savo min-content, tad .hero__tinklelis išsiplėsdavo
     už .in ir tekstas vis tiek lįsdavo ant kadro).
     50 % teksto stulpelio + tarpas = tiksliai 50 vw, nes .in centruotas. */
  .hero .hero__tinklelis {
    padding-right: 0;
  }
  .hero .hero__tinklelis > :first-child {
    max-width: calc(50% - clamp(20px, 2.5vw, 48px));
  }
  /* 09-16 taisyklė leido pastraipai plaukti į laisvą nuotraukos vietą (`width: min(50vw, 720px)`).
     Perskyrus hero pusiau tos laisvos vietos nebėra - pastraipa lieka savo stulpelyje. */
  .hero .hero__sub {
    width: auto;
    max-width: 100%;
  }
  /* Siaurame (50 vw) rėme kadrą reikia pastumti į dešinę - kitaip dėžutė nukertama per pusę. */
  /* Kadras iš viršaus, kvadratinis: stulpelis irgi beveik kvadratas, tad centruojam. */
  .hero .hero__foto .hero__foto__laukas img,
  .hero .hero__foto img {
    object-position: 50% 50%;
  }
}

/* ══ „Ką daryti toliau": trys žingsniai kaip redakcinis blokas (09-18) ══════════════
   Vartotojas: „sekcija ka daryti toliau, reikia gerooo dizaino". Buvo: turinys 427 px viduryje
   866 px skilties (viršuje ir apačioje po ~220 px juodos tuštumos), o patys žingsniai - smulkūs
   ikonų kvadratukai su punktyru, skaitomi kaip diagramos išnaša, ne kaip skiltis.
   Dabar: per kiekvieną stulpelį eina viena plona linija (punktyro nebėra - jis atrodė kaip
   nebaigtas), po ja stambus numeris ir ikona be dėžutės, žemiau pavadinimas ir tekstas.
   Skaičiai dideli, tad blokas pats užpildo aukštį, o ne plaukioja per vidurį. */
@media (min-width: 780px) {
  /* .kelias__in yra TINKLELIS su sritimis (virsus/zingsniai/platus/veiksmas) - jo į flex
     keisti negalima, nes tada antraštė, „Kaip vartoti" ir mygtukas išsivaikšto. Aukštį
     užpildom teisingai: tinklelis ištempiamas, o eilutės išdėstomos per visą jį. */
  html.pradzia .kelias__in {
    flex: 1 1 auto;
    align-content: center;
    row-gap: clamp(30px, 5.5vh, 72px);
  }
  .kelias__zingsniai {
    margin: 0;
    column-gap: clamp(24px, 3vw, 48px);
  }
  /* Punktyras lauk - jungtį dabar daro ištisinė linija virš kiekvieno stulpelio. */
  .kelias__punktas:not(:last-child)::after {
    display: none;
  }
  .kelias__punktas {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "nr ikona"
      "pav pav"
      "t t";
    align-content: start;
    row-gap: 0;
    padding-top: clamp(16px, 2.2vh, 26px);
    border-top: 1px solid rgb(255 255 255 / 0.22);
  }
  .kelias__punktas > div {
    display: contents;
  }
  .kelias__zenkliukas {
    grid-area: ikona;
    align-self: center;
    width: auto;
    height: auto;
    background: none;
    color: var(--sky);
  }
  .kelias .kelias__ikona {
    width: clamp(34px, 2.9vw, 46px);
    height: clamp(34px, 2.9vw, 46px);
  }
  .kelias__nr {
    grid-area: nr;
    margin: 0;
    color: var(--far);
    font-size: clamp(40px, 4.2vw, 68px);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 0.95;
  }
  .kelias__pav {
    grid-area: pav;
    margin: clamp(14px, 2vh, 22px) 0 0;
    font-size: clamp(20px, 1.7vw, 27px);
  }
  .kelias__t {
    grid-area: t;
    margin: 10px 0 0;
    font-size: clamp(15px, 1.15vw, 17px);
    line-height: 1.5;
  }
  /* Užvedus pakyla ne dėžutė (jos nebėra), o pati ikona. */
  .kelias__punktas:hover .kelias__zenkliukas {
    background: none;
    transform: translateY(-4px);
  }
}

/* ══ Iššokantis langas: −10 % už el. paštą (09-18) ══════════════════════════════════
   Edvardas: „reikia pridėti email popupą su emailo rinkimu už 10 proc nuolaidą",
   pavyzdys - britedrinks.com: logotipas, didelė antraštė, nuotrauka, platus mygtukas.
   Pas mus dar ir laukas iš karto - Brite'e el. pašto prašo tik antrame žingsnyje, o
   kiekvienas papildomas žingsnis kainuoja dalį žmonių. Stilius - toks pat kaip visur:
   stačiakampiai, be gradientų ir šešėlių, viena mėlyna dėmė. */
.popupas[hidden] {
  display: none;
}
.popupas {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: var(--pad);
}
.popupas__fonas {
  position: absolute;
  inset: 0;
  background: rgb(22 24 28 / 0.55);
}
.popupas__langas {
  position: relative;
  width: min(100%, 460px);
  max-height: calc(var(--ekr-s, 100svh) - 2 * var(--pad));
  padding: clamp(26px, 4vw, 40px) clamp(20px, 3.5vw, 36px) clamp(22px, 3vw, 32px);
  overflow-y: auto;
  border: 1px solid var(--linija);
  background: var(--bone);
  color: var(--ink);
  text-align: center;
}
.popupas__x {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.popupas__x svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}
.popupas__zenklas {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.popupas__h {
  margin: 12px 0 0;
  font-size: clamp(26px, 5.2vw, 34px);
  line-height: 1.06;
  text-wrap: balance;
}
.popupas__foto {
  margin: clamp(16px, 3vw, 22px) 0 0;
  overflow: hidden;
  background: var(--sky);
}
.popupas__foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 50% 55%;
}
.popupas__forma[hidden],
.popupas__ok[hidden] {
  display: none;
}
.popupas__forma {
  margin-top: clamp(16px, 3vw, 22px);
}
.popupas__laukas {
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--snow);
  color: var(--ink);
  font: inherit;
  font-size: 16px; /* mažiau nei 16 px - iOS priartina lauką */
}
.popupas__laukas::placeholder {
  color: rgb(22 24 28 / 0.5);
}
.popupas .popupas__mygtukas {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 10px;
}
.popupas__mygtukas[disabled] {
  opacity: 0.6;
  cursor: progress;
}
.popupas__klaida {
  margin: 10px 0 0;
  color: #8c2f1d;
  font-size: 13.5px;
  font-weight: 600;
}
.popupas__klaida[hidden] {
  display: none;
}
.popupas__smulkiai {
  max-width: 34ch;
  margin: 12px auto 0;
  color: rgb(22 24 28 / 0.62);
  font-size: 12.5px;
  line-height: 1.45;
}
.popupas__okh {
  margin: clamp(16px, 3vw, 22px) 0 0;
  font-size: 15px;
  font-weight: 700;
}
.popupas__kodas {
  margin: 8px 0 0;
  padding: 14px 10px;
  border: 1px dashed var(--ink);
  background: var(--sky);
  font-size: clamp(24px, 5vw, 32px);
  font-weight: 900;
  letter-spacing: 0.14em;
}
@media (prefers-reduced-motion: no-preference) {
  .popupas__langas {
    animation: popupas-kyla 0.34s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .popupas__fonas {
    animation: popupas-fonas 0.34s ease;
  }
}
@keyframes popupas-kyla {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}
@keyframes popupas-fonas {
  from {
    opacity: 0;
  }
}

/* Langas privalo tilpti į ekraną - jokios slinkties juostos viduje (Edvardas 09-18).
   Stulpelis: antraštė ir mygtukai fiksuoti, o nuotrauka atiduoda savo aukštį, kai vietos
   maža (flex: 1 1 auto + min-height: 0 + object-fit: cover). */
.popupas__langas {
  display: flex;
  max-height: calc(var(--ekr-s, 100svh) - 2 * var(--pad));
  flex-direction: column;
  overflow: hidden;
  padding: clamp(22px, 3.4vw, 34px) clamp(18px, 3vw, 32px) clamp(18px, 2.6vw, 26px);
}
.popupas .popupas__zenklas {
  flex: none;
  align-self: center;
  color: var(--ink);
}
.popupas__h {
  flex: none;
  margin: 10px 0 0;
  font-size: clamp(22px, min(4.6vw, 4.4vh), 32px);
}
.popupas__foto {
  flex: 1 1 auto;
  min-height: 0;
  margin: clamp(12px, 2.4vh, 20px) 0 0;
}
.popupas__foto img {
  height: 100%;
  min-height: 64px;
  aspect-ratio: auto;
}
.popupas__zingsnis {
  flex: none;
  margin-top: clamp(12px, 2.2vh, 20px);
}
.popupas__zingsnis[hidden] {
  display: none;
}
.popupas__ne {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 6px 0;
  border: 0;
  background: none;
  color: rgb(22 24 28 / 0.62);
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.popupas .popupas__mygtukas {
  margin-top: 0;
}
.popupas__forma .popupas__mygtukas {
  margin-top: 10px;
}
.popupas__smulkiai {
  margin-top: 10px;
}
/* Nuotrauka slepiama tik tada, kai lango aukščio tikrai nebeužtenka. Anksčiau riba buvo
   640 px ir ji dingdavo net įprastame kompiuterio lange (Edvardas: „kodėl foto tik ant
   telefono yra?") - dabar kadras pirmiausia tiesiog susitraukia. */
@media (max-height: 520px) {
  .popupas__foto {
    display: none;
  }
}

/* ══ 09-19: teksto peržiūra (Edvardas) - kodėl čia beveik nieko nėra ═══════════════
   Peržiūra buvo teksto, ne stiliaus, tad naujų taisyklių prireikė tik dviem vietoms
   (žr. žemiau ir .kada__eile--foto bloką aukščiau). Kas NEreikėjo:
   - Meniu galvoje vėl keturios nuorodos (pridėtos „Kodėl PYK?" ir „Atsiliepimai", išimta
     „Kaip vartoti"), tad esamų nth-child spalvų užtenka.
   - Kainų kortelėse nebeliko trukmių: .kaina__laikas eilutėje dabar stovi tik sutaupyta
     suma, o prie vienos dėžutės - nedalomas tarpas (index.html). Jis palieka tikslų tos
     pačios eilutės aukštį bet kuriame plotyje, tad pristatymo eilutės visose kortelėse
     lygiuojasi. Per CSS `content` to daryti negalima: automatinis formatuotojas nedalomo
     tarpo escape'ą paverčia tikru NUL baitu ir puslapyje atsiranda šiukšlė.
   - „Perkate komandai?" eilutė išimta - jos taisyklės tiesiog liko nenaudojamos. */

/* ══ „Kada" kortelės: užvedus tekstas nebejuda (09-19) ══════════════════════════════
   Edvardas: „padidėja apačia užvedus ant Popietinis nuovargis".
   Nuo 09-14 užvedus didžiajam užrašui raidžių tarpas praplatėdavo -0,04em -> -0,01em.
   Kol užrašai buvo trumpi („15 h crash'as"), tai buvo tik gyvas judesys. „Popietinis
   nuovargis" (09-19) kortelės plotį išnaudoja beveik visą, o tie 0,03em prideda ~17 px -
   žodis nukrisdavo į antrą eilutę, tekstinis blokas paaugdavo per eilutę ir nuotrauka
   susitraukdavo. Mažesnis šriftas vienas problemos neišsprendžia: kad ir kokį dydį
   parinktum, visada lieka ekrano plotis, kuriame rimtyje telpa, o užvedus - ne.
   Todėl užvedimas tekstui nebetaikomas. Kortelė toliau pakyla 6 px, ikona toliau
   padidėja - atsakas į pelę lieka, tik nebejuda pats tekstas. */
.kada .kada__eile--foto .kada__kortele:hover .kada__zodis,
.kada .kada__eile--foto .kada__kortele--aktyvi .kada__zodis,
.kada .kada__eile--foto .kada__kortele--aktyvi:hover .kada__zodis {
  letter-spacing: -0.04em;
}

/* ══ Kainų kortelės planšetėse 780-1023 px (2026-09-19, po audito) ═══════════════════
   Auditas rado, kad šitoje juostoje kortelės neturėjo savo dizaino: `.kainos` likdavo
   bazinis `display: block` (sukrauta eilutėmis), o `.kaina__dezutes` ir `.kaina__rinktis`
   buvo `display: none` - abu įjungiami tik `≥1024` ir `≤779`. Vadinasi iPad Air (820),
   iPad Pro 11" (834) ir Surface (912) pirkėjas nematė nei dėžučių ikonų, nei užrašo
   „Rinktis", t. y. nesimatė, kad kortelę apskritai galima pasirinkti.
   Keturi stulpeliai, ne 2x2: išbandyti abu, ir 2x2 ties 1000x700 padarė skiltį 202 px
   aukštesnę nei ji buvo - gulsčioje planšetėje ji nebetilpdavo į ekraną.
   Dydžiai - tarp telefono ir kompiuterio; ties 780 px kortelė lieka 160 px pločio. */
@media (min-width: 780px) and (max-width: 1023px) {
  .kainos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    border-top: 0;
  }
  .kainos li {
    display: flex;
  }
  .kainos .kaina,
  .kainos .kaina.kaina--zymeta {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    grid-template-columns: none;
    grid-template-areas: none;
    gap: 6px;
    margin: 0;
    padding: 40px 12px 16px;
    border: 1px solid var(--ink);
    text-align: left;
  }
  .kainos .kaina__zyme {
    position: absolute;
    top: 12px;
    left: 12px;
    margin: 0;
  }
  .kainos .kaina__kiekis {
    font-size: 15px;
  }
  .kainos .kaina__vnt {
    margin-top: 8px;
    text-align: left;
    font-size: 26px;
    line-height: 1;
  }
  .kainos .kaina__vnt span {
    display: block;
    margin: 6px 0 0;
  }
  .kainos .kaina__viso {
    margin-top: 8px;
    text-align: left;
    font-size: 14px;
  }
  .kainos .kaina__laikas {
    font-size: 12px;
  }
  /* Sutaupyta suma - persiko ženkliukas kaip telefone; procentas jame nekartojamas,
     nes jis jau stovi prie kainos (.kaina__vnt span). */
  .kainos .kaina__sutaupai {
    display: table;
    margin-top: 5px;
    padding: 2px 6px;
    background: var(--peach);
    color: var(--ink);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.01em;
  }
  .kainos .kaina__skirt,
  .kainos .kaina__sutaupai-proc {
    display: none;
  }
  /* „Pristatymas nemokamas" 160 px kortelėje netelpa į vieną eilutę - leidžiam lūžti. */
  .kainos .kaina__pristatymas {
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.3;
  }
  .kainos .kaina__pristatymas--nemokamas {
    padding: 2px 6px 2px 5px;
    white-space: normal;
  }
  .kainos .kaina__rinktis {
    display: inline-block;
    margin-top: auto;
    padding-top: 18px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
  }
  .kainos .kaina__rinktis::after {
    content: " 92";
  }
  /* Dėžučių krūvelė - viršuje dešinėje, kaip kompiuteryje, tik mažesnė. */
  .kainos .kaina__dezutes {
    --d: 14px;
    --z: 8px;
    position: absolute;
    top: 32px;
    right: 9px;
    display: grid;
    grid-template-columns: repeat(var(--st, 1), var(--z));
    grid-auto-rows: var(--z);
    padding: 0 calc(var(--d) - var(--z) + var(--z) / 2) calc(var(--d) - var(--z)) 0;
    pointer-events: none;
  }
  .kainos .kaina__dezutes[data-n="3"],
  .kainos .kaina__dezutes[data-n="6"] {
    --st: 3;
  }
  .kainos .kaina__dezutes[data-n="12"] {
    --st: 6;
  }
  .kainos .kaina__dezutes svg {
    display: block;
    width: var(--d);
    height: var(--d);
    overflow: visible;
  }
  .kainos .kaina__dezutes[data-n="6"] svg:nth-child(n + 4),
  .kainos .kaina__dezutes[data-n="12"] svg:nth-child(n + 7) {
    translate: calc(var(--z) / 2) 0;
  }
}

/* ── Atsiliepimai telefone (2026-09-20) ─ atsiliepimai-mobile-0920 ──────────
   Pamatuota gyvai ties 375 px: `.atsiliepimai__juosta` yra flex eilutė, kurioje
   šalia turinio stovi dvi 32 px rodyklės su tarpais. Iš 330 px konteinerio
   eilutei likdavo 250, o kortelei - 214 px, t. y. 57 % ekrano. Tekstas dėl to
   nukirstas jau po trijų eilučių.

   Telefone rodyklių nereikia: eilutė yra `overflow-x: auto`, braukiama pirštu.
   Jas paslėpus kortelė gauna ~300 px - 40 % daugiau skaitomo ploto.
   Ribą renkam pagal PLOTĮ, ne pagal `hover: none`: pastarasis išjungtų rodykles
   ir jutikliniuose nešiojamuose, kur jos pravartu (žr. feedback dėl `any-hover`). */
/* 09-25 (Edvardas): „mobile need to add arrows to reviews". Rodyklės grįžta, bet ne
   šonuose (tai vėl atimtų kortelės plotį): po eile, dešinėje, 40 px piršto taikiniai. */
@media (max-width: 559px) {
  .atsiliepimai__juosta {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 10px;
  }
  .atsiliepimai__eile {
    flex-basis: 100%;
  }
  .atsiliepimai__rodykle {
    width: 40px;
    height: 40px;
  }
  .atsiliepimai__rodykle--kaire {
    order: 1;
  }
  .atsiliepimai__rodykle--desine {
    order: 2;
  }
  /* Atlaisvėjusį plotį atiduodam kortelei. 88 %, ne 100: iš krašto turi
     kyšoti kita kortelė - be jos niekas nežino, kad čia galima braukti.
     Selektorius su tėvu būtinas: `@media (max-width: 779px)` jau turi
     `.atsiliepimai .atsiliepimas` su riba 260 px, o jo specifiškumas
     didesnis - vien eiliškumu jo neaplenksi. */
  /* 09-25: kortelė centre, tad kyšo abi kaimynės - po ~8 % iš kiekvieno šono, kad
     24 px krašto išblukimas neuždengtų pačios kortelės. */
  .atsiliepimai .atsiliepimas {
    flex-basis: min(84%, 320px);
  }
}

/* Piršto taikiniai. „Skaityti visą" buvo 71x20, „Palikti atsiliepimą" 100x13 -
   abu po WCAG 2.2 minimumo (24 px) ir gerokai po Apple rekomenduojamų 44 px.
   Auginam tik paspaudimo plotą: neigiamos paraštės palieka tekstą ten, kur jis
   ir buvo, kad išdėstymas nepasislinktų. */
.atsiliepimas__viso {
  padding-block: 12px;
  margin-top: -14px;
  margin-bottom: -10px;
}
.atsiliepimai__apie a {
  display: inline-block;
  padding-block: 10px;
  margin-block: -10px;
}

/* ── Hero mėlynos juostos oras telefone (2026-09-20) ─ hero-melyna-oro-0920 ─
   Teksto stulpelis `.hero__tinklelis > :first-child` turi vidines paraštes tik
   nuo 780 px ir žemiems ekranams; siaurame telefone jų nebuvo nė vienos, tad
   žvaigždutės prasidėdavo lygiai ten, kur baigiasi nuotrauka - be jokio tarpo.

   Specifiškumas toks pat kaip esamos taisyklės, o blokas eina vėliau, tad
   `padding-top` perrašo ir `(max-height: 800px)` sutrumpintąjį `padding`. */
@media (max-width: 779px) {
  .hero__tinklelis > :first-child {
    padding-top: clamp(14px, 4.5vw, 20px);
  }
}

/* Žemi telefonai: oro duodam mažiau. Ties 375x667 mygtukas baigdavosi ties
   613 px iš 667 - viso 54 px atsargos, tad didesnė paraštė nustumtų jį už
   ekrano krašto, o tai brangiau nei ankšta juosta. */
@media (max-width: 779px) and (max-height: 700px) {
  .hero__tinklelis > :first-child {
    padding-top: 10px;
  }
}

/* ── Sekcijų aukštis telefone (2026-09-20) ─ sekciju-aukstis-0920 ──────────
   Pradžios puslapyje kiekviena sekcija priverstinai bent per visą ekraną
   (`min-height: calc(100lvh - var(--naujiena))`), o turinys centruojamas.
   Kompiuteryje tai duoda pilno ekrano ritmą; telefone turinys trumpesnis, tad
   virš ir po juo lieka vienodos tuščios juostos.

   Pamatuota ties 375x812: naudojimas 497 px, kada 226, kaina 141, pasitiki 102 -
   iš viso 966 px tuščios iš 6666, t. y. 15 % puslapio, per kurį reikia slinkti.
   `kelias` ir `duk` ir taip pilni, tad jiems niekas nesikeičia.

   Saugu: `scroll-snap` čia nenaudojamas (patikrinta - `none`), tad pilno ekrano
   aukštis nieko nelaiko, tik tempia. Kompiuteryje taisyklė lieka kaip buvo.

   Selektorius kartojamas visas: originalo specifiškumas 0,2,3, o vien
   eiliškumu jo neaplenksi. */
@media (max-width: 779px) {
  html.pradzia main > section.dalis,
  html.pradzia main > section.naudojimas,
  html.pradzia main > section#kaina {
    min-height: auto;
  }
}

/* ── DUK: CTA mygtuko telefone nėra (2026-09-20) ─ duk-cta-0920 ───────────
   Vartotojo sprendimas. Kompiuteryje mygtukas lieka - ten jis šalia antraštės
   ir nieko nestumia; telefone gulė atskira eilute po klausimais.

   ⚠ Pastaba ateičiai: giliai puslapyje galvutė paslėpta (`html.galva-paslepta`),
   tad nuėmus šitą mygtuką žemiau kainų skilties nebelieka nė vieno kelio į
   krepšelį. Jei kada spręsit grąžinti pirkimo mygtuką apačioje - arba čia, arba
   padaryti, kad galvutė grįžtų slenkant aukštyn. */
@media (max-width: 779px) {
  .duk-dalis__veiksmas {
    display: none;
  }
}

/* ── „3 paprasti žingsniai" telefone (2026-09-20) ─ kelias-mobile-0920 ────
   Tik iki 780 px; kompiuteryje skiltis nekeičiama.

   Kas buvo negerai. Ženkliuko stulpelis 64 px + 18 px tarpas atimdavo 82 iš 330,
   tad tekstui likdavo 248 px ir pirmas žingsnis lūždavo į tris eilutes, o kiti du
   į dvi - trys skirtingo aukščio blokai vienoje eilėje (137 / 112 / 112).
   Numeris gulėjo atskira eilute virš pavadinimo ir kainavo dar po 22 px.

   Ką pakeičiau:
   - stulpelis 64 -> 52, tarpas 18 -> 14. Tekstui 248 -> 264 px, ir pirmas
     žingsnis susitraukia iki dviejų eilučių. Visi trys tampa po 84 px -
     vienodi, kaip ir turėtų atrodyti trys to paties sąrašo punktai.
   - numeris keliauja PO ženkliuku, į jo stulpelį. Informacija lieka (sąrašas
     vadinasi „3 paprasti žingsniai", tad numeriai prasmingi), bet nebeužima
     eilutės virš pavadinimo, o pavadinimas atsiremia į ženkliuko viršų.
   - punktyras nustumtas nuo 74 iki 80 px ir centruotas naujam 52 px stulpeliui,
     kitaip jis kirstųsi su numeriu.
   - tarpas tarp žingsnių 28 -> 20.

   Sekcija 806 -> 682 px. */
@media (max-width: 779px) {
  .kelias__punktas {
    grid-template-columns: 52px minmax(0, 1fr);
    column-gap: 14px;
  }
  .kelias__zenkliukas {
    width: 52px;
    height: 52px;
  }
  .kelias .kelias__ikona {
    width: 30px;
    height: 30px;
  }
  .kelias__zingsniai {
    gap: 20px;
  }

  /* Numeris po ženkliuku. Absoliutus, nes jis yra teksto <div> viduje, o ne
     ženkliuko stulpelyje - tinkleliu iš ten jo nepasieksi. 58 px = 52 px
     ženkliukas + 6 px oro; abu skaičiai čia pat, tad keičiant vieną matosi kitas. */
  .kelias__nr {
    position: absolute;
    top: 58px;
    left: 0;
    width: 52px;
    margin: 0;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-align: center;
  }
  .kelias__pav {
    margin-top: 0;
  }
  .kelias__punktas:not(:last-child)::after {
    top: 80px;
    left: 25px;
    bottom: -16px;
  }
}

/* ── Paskatos juosta: subalansuotos eilutės (2026-09-20) ─ paskata-eilutes-0920
   Telefone tekstas lūždavo taip, kad paskutinis žodis likdavo vienas: krepšelyje
   eilutės buvo 308 ir 79 px. `text-wrap: balance` jas sulygina (218 / 169).

   Mygtukas yra `inline-flex`, tad tekstas jame - anoniminis elementas, kurio
   pasiekti negalima; todėl index.html jis apvyniotas <span>, kaip jau buvo
   krepšelyje. Senos naršyklės savybės nepalaiko ir tiesiog rodo kaip anksčiau. */
.paskata button span {
  text-wrap: balance;
}

/* ══ „Kada" telefone: atslinkta kortelė atrodo kaip paspausta (09-20) ════════
   Edvardas: „kada sekcijoj aktyvuok paspaudima atscrolinus kortele".
   Iki 1023 px kortelės su nuotraukomis slenka horizontaliai, o pelės telefone nėra -
   vadinasi desktopo užvedimo (kortelė pakyla 6 px, ikona ir nuotrauka padidėja) niekas
   nemato. Dabar tą patį gauna kortelė, kurios vidurys arčiausiai eilutės vidurio, t. y.
   ta, prie kurios ką tik atslinkta; klasę uždeda skriptas index.html gale.
   Didžiojo užrašo raidžių tarpas nejuda - ž. „Kada kortelės: užvedus tekstas nebejuda".

   ⚠ `overflow-x: auto` reiškia, kad ir `overflow-y` tampa `auto` (taip sako CSS
   specifikacija: `visible` šalia slinkimo virsta `auto`), tad 6 px pakilimą viršuje
   nukirstų eilutės kraštas, o apačioje atsirastų vertikali slinktis. Todėl eilutei
   duodam po 8 px vidinio tarpo iš viršaus ir apačios ir tiek pat atimam per margin:
   28 px tarpas virš eilutės („Kada v4" blokas) tampa 20 px + 8 px padding, tad išorinis
   dydis nesikeičia. 28 px čia užrašyti saugu: `margin-top: 20px` „Kada v4" bloke
   įjungiamas tik nuo 1024 px, o čia esam žemiau. */
@media (max-width: 1023px) {
  .kada .kada__eile.kada__eile--foto {
    padding-block: 8px;
    margin-block: 20px -8px;
  }
}
@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
  .kada .kada__eile--foto .kada__kortele--aktyvi,
  .kada .kada__eile--foto .kada__kortele--aktyvi:hover {
    transform: translateY(-6px);
  }
  .kada .kada__eile--foto .kada__kortele--aktyvi .kada__ikona {
    transform: scale(1.1);
  }
  .kada .kada__eile--foto .kada__kortele--aktyvi .kada__nuotrauka img {
    transform: scale(1.04);
  }
}

/* ══ „Kada" kortelės neužgožia sekcijos apačios (2026-09-20) ═════════════════════
   Edvardas: „kada sekcija labai arti apacios blokai".

   Kortelės kvadratinės (taip prašyta 09-17), tad jų aukštis = plotis. Plačiame
   monitoriuje jos augdavo kartu su ekranu ir sekcija nebetilpdavo: 2560x860 po
   kortelėmis likdavo 66 px. Užtenka fiksuotos viršutinės ribos - 420 px kortelė
   yra 506 px su tekstine juosta, ir sekcijai lieka oro.

   ⚠ Pirmas bandymas rišo kortelės plotį prie likusio AUKŠČIO
   (`calc(100svh - ...)`). Neturėjo apatinės ribos: su naršyklės priartinimu
   efektyvus aukštis krinta, kortelės susitraukė iki ~290 px, o užrašai subyrėjo
   („Darbas/st udijos"). Aukščio nebeliečiam - tik plotis, ir jis nuspėjamas. */
@media (min-width: 1024px) {
  html.pradzia .kada .kada__eile--foto {
    grid-template-columns: repeat(3, minmax(0, 420px));
    justify-content: center;
  }
}

/* ── Pirkėjo paskyra (10-01) ───────────────────────────────────────────────
   Tie patys elementai kaip krepšelyje: plauko linijos, rašalo mygtukai, be kortelių
   šešėlių. Skaičiai - Archivo 700 su lygiaplotėmis skaitmenimis. */

.galva__veiksmai {
  display: flex;
  align-items: center;
  gap: 10px;
}
.paskyra-nuoroda {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--ink);
  color: var(--ink);
  text-decoration: none;
  transition: background-color 0.18s ease;
}
.paskyra-nuoroda:hover {
  background: var(--snow);
}
.paskyra-nuoroda svg {
  width: 17px;
  height: 17px;
}
.paskyra-nuoroda:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.paskyra .hero--doc {
  padding-bottom: clamp(36px, 5vw, 64px);
}
.paskyra__forma {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
  max-width: 520px;
}
.paskyra__laukas {
  flex: 1 1 220px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--ink);
  background: var(--snow);
  color: var(--ink);
  font: inherit;
  font-size: 16px; /* iOS nepriartina */
}
.paskyra__laukas--kodas {
  flex: 0 1 180px;
  letter-spacing: 0.4em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.paskyra__forma .paskyra__smulkiai {
  flex-basis: 100%;
  margin: 0;
}
.paskyra__smulkiai {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.5;
  opacity: 0.75;
}
.paskyra__nuoroda {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.paskyra__klaida {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 600;
}
.paskyra__klaida:empty {
  display: none;
}
.paskyra__naudos {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  max-width: 520px;
  border-top: 1px solid var(--linija);
}
.paskyra__naudos li {
  padding: 12px 0;
  border-bottom: 1px solid var(--linija);
  font-size: 15px;
}
.paskyra__virsus {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
}

.paskyra__dalis {
  padding-block: clamp(36px, 5vw, 60px);
}
.paskyra__h {
  margin: 0 0 18px;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.paskyra__kreditas {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}
.paskyra__kreditas .paskyra__h {
  margin-bottom: 6px;
}
.paskyra__suma {
  margin: 0;
  font-size: clamp(44px, 7vw, 72px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.paskyra__kreditas .paskyra__smulkiai {
  max-width: 52ch;
}
.paskyra__istorija,
.paskyra__uzsakymai {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--linija);
}
.paskyra__istorija:empty {
  display: none;
}
.paskyra__eilute {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--linija);
}
.paskyra__eilute b {
  font-weight: 600;
}
.paskyra__eilute-suma {
  flex: none;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.paskyra__eilute-suma--minus {
  opacity: 0.6;
}
.paskyra__tuscia {
  max-width: 60ch;
}
.paskyra__tuscia .mygtukas {
  margin-top: 16px;
}

.prenumerata {
  padding: 22px 0;
  border-top: 1px solid var(--ink);
}
.prenumerata + .prenumerata {
  border-top-color: var(--linija);
}
.prenumerata--baigta {
  opacity: 0.55;
}
.prenumerata__h {
  margin: 6px 0 4px;
  font-size: 20px;
  font-weight: 700;
}
.prenumerata__kaina {
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.prenumerata__veiksmai {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.prenumerata__mygtukas {
  padding: 10px 14px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.prenumerata__mygtukas:hover {
  background: var(--sky);
}
.prenumerata__mygtukas:disabled {
  opacity: 0.5;
  cursor: progress;
}
.prenumerata__forma {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.prenumerata__forma .paskyra__laukas {
  flex: 0 1 140px;
  padding: 10px 12px;
}
.prenumerata__forma .paskyra__smulkiai {
  margin: 0;
}

/* hidden atributas turi laimėti prieš display - kitaip formos nepasislepia. */
.paskyra [hidden],
.prenumerata__forma[hidden] {
  display: none !important;
}

/* 10-01: kiek užteks - antra eilutė po kaina už maišelį. */
.kaina__truks {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  opacity: 0.75;
}

/* 10-03 (Edvardas: „sekcija turi tilpti į ekraną"): telefone su naršyklės juostomis
   matosi ~600-660 px, o „Išbandyk PYK" su galva užimdavo ~720. Garantijos - dviem
   stulpeliais ir smulkiau, kortelės ir antraštė glaudžiau. */
@media (max-width: 559px) {
  html.pradzia main > section#kaina {
    padding-block: 12px;
  }
  html.pradzia #kaina .pirkimas__h {
    margin-top: 0;
    font-size: 23px;
    line-height: 1.12;
  }
  /* „Išbandyk PYK" virš antraštės kartoja jos antrą eilutę - telefone jos nereikia. */
  html.pradzia #kaina .lankas {
    display: none;
  }
  html.pradzia #kaina .pirkimas__veiksmas .mygtukas {
    min-height: 0;
    padding-block: 13px;
  }
  html.pradzia #kaina .kainos {
    margin-top: 12px;
    margin-bottom: 8px;
  }
  html.pradzia #kaina .kainos .kaina {
    padding-top: 12px;
    padding-bottom: 10px;
  }
  html.pradzia #kaina .kainos .kaina .kaina__vnt {
    margin-top: 4px;
    font-size: 27px;
  }
  html.pradzia #kaina .kainos .kaina__viso {
    margin-top: 4px;
  }
  html.pradzia #kaina .pirkimas__veiksmas {
    margin-top: 10px;
  }
  html.pradzia #kaina .garantijos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.3;
  }
  html.pradzia #kaina .garantijos li {
    align-items: flex-start;
    gap: 6px;
  }
  html.pradzia #kaina .garantijos svg {
    width: 16px;
    height: 16px;
  }
  html.pradzia #kaina .garantijos {
    grid-template-columns: 1.2fr 1fr;
    font-size: 11.5px;
    line-height: 1.25;
  }
  /* Paskata (pasirinkus 1 dėžutę) - viena eilutė, ne dvi. */
  html.pradzia #kaina .pirkimas__veiksmas {
    row-gap: 8px;
  }
  html.pradzia #kaina .paskata button {
    min-height: 0;
    padding: 8px 12px;
    font-size: 13px;
  }
}

/* ── 10-03: paskyros prenumerata ir užsakymai (Edvardas: „labai lievas profilio UI") ──
   Kortelė: būsena -> kas ir už kiek -> kada kita siunta -> veiksmai su paaiškinimu.
   Patvirtinimai - kortelėje, ne naršyklės lange. */
.paskyra[data-busena="prisijungta"] .hero--doc {
  padding-bottom: 20px;
}
.paskyra[data-busena="prisijungta"] .hero__h1 {
  font-size: clamp(34px, 6vw, 56px);
}
.pren {
  max-width: 640px;
  border: 2px solid var(--ink);
  background: var(--snow);
}
.pren + .pren {
  margin-top: 16px;
}
.pren__virsus {
  padding: 18px 18px 14px;
}
.pren__busena {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  background: var(--sky);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pren__busena::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2f8f5b;
}
.pren--pristabdyta .pren__busena,
.pren--baigsis .pren__busena {
  background: var(--peach);
}
.pren--pristabdyta .pren__busena::before,
.pren--baigsis .pren__busena::before {
  background: var(--ink);
}
.pren__h {
  margin: 10px 0 4px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}
.pren__kaina {
  margin: 0;
  font-size: 14px;
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
}
.pren__kita {
  display: grid;
  gap: 2px;
  margin: 0 18px;
  padding: 14px 16px;
  background: var(--bone);
}
.pren__kita-pav {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}
.pren__kita-data {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
}
.pren__kita-info {
  font-size: 14px;
  line-height: 1.45;
}
.pren__veiksmai {
  margin: 14px 0 0;
  border-top: 1px solid var(--linija);
}
.pren__veiksmas {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 18px;
  border: 0;
  border-bottom: 1px solid var(--linija);
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
.pren__veiksmas-tekstas {
  display: grid;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.pren__veiksmas-tekstas b {
  font-size: 16px;
  font-weight: 700;
}
.pren__veiksmas-tekstas span {
  font-size: 13.5px;
  line-height: 1.4;
  opacity: 0.75;
}
.pren__veiksmas--pagr {
  background: var(--sky);
}
.pren__rodykle {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
@media (any-hover: hover) {
  .pren__veiksmas:hover {
    background: var(--bone);
  }
  .pren__veiksmas--pagr:hover {
    background: #a3c6df;
  }
}
.pren__veiksmas:disabled {
  opacity: 0.5;
  cursor: progress;
}
.pren__atsaukti {
  display: block;
  margin: 14px 18px 16px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: 0.7;
  cursor: pointer;
}
.pren__panele {
  margin: 14px 18px 18px;
}
.pren__klausimas {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
}
.pren__paaisk {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.5;
}
.pren__mygtukai {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
}
.pren__mygtukai .mygtukas {
  min-height: 48px;
  padding: 12px 20px;
}
.mygtukas.mygtukas--linija {
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--ink);
}
.pren__ne {
  padding: 8px 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.pren__alternatyvos {
  display: grid;
  gap: 8px;
  margin: 10px 0 14px;
}
.pren__alt {
  padding: 13px 14px;
  border: 1px solid var(--ink);
  background: var(--bone);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.pren__lauko-pav {
  margin: 14px 0 6px;
  font-size: 13px;
  font-weight: 700;
}
.pren__kiekis {
  display: inline-flex;
  border: 2px solid var(--ink);
}
.pren__kiekis button {
  width: 48px;
  min-height: 46px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}
.pren__kiekis button:disabled {
  opacity: 0.3;
}
.pren__kiekis-sk {
  display: grid;
  place-items: center;
  min-width: 110px;
  border-inline: 1px solid var(--linija);
  font-size: 16px;
  font-weight: 700;
}
.pren__cipai {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pren__cipas {
  padding: 9px 12px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}
.pren__cipas[aria-checked="true"] {
  background: var(--ink);
  color: var(--snow);
}
.pren__nauja {
  margin: 16px 0 14px;
  padding: 10px 12px;
  background: var(--bone);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}
.pren__zinute {
  margin: 0 18px 16px;
  font-size: 14px;
  font-weight: 700;
}
.pren__zinute:empty {
  display: none;
}
.pren__zinute--klaida {
  color: #a1281e;
}
.pren-baigta {
  max-width: 640px;
  margin: 12px 0 0;
  font-size: 14px;
  opacity: 0.6;
}
/* Užsakymai - kortelės. */
.paskyra__uzsakymai {
  max-width: 640px;
  border-top: 0;
}
.uzs {
  padding: 14px 16px;
  border: 1px solid var(--ink);
  background: var(--snow);
}
.uzs + .uzs {
  margin-top: 10px;
}
.uzs__virsus {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 16px;
}
.uzs__suma {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.uzs__apacia {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 8px;
  font-size: 13px;
}
.uzs__busena {
  padding: 2px 8px;
  font-weight: 700;
}
.uzs__busena--issiusta {
  background: var(--sky);
}
.uzs__busena--ruosiama {
  background: var(--peach);
}
.uzs__info {
  opacity: 0.7;
}
/* 10-03: sąskaita faktūra prie užsakymo. */
.uzs__saskaita {
  margin-left: auto;
  font-weight: 700;
  color: inherit;
  text-underline-offset: 3px;
}
.pren__cipai[hidden] {
  display: none;
}
.pren__paieska {
  width: 100%;
  margin-top: 10px;
}
.pren__pastomatai {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--linija);
}
.pren__pastomatai:empty {
  display: none;
}
.pren__pastomatas {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 11px 4px;
  border: 0;
  border-bottom: 1px solid var(--linija);
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.pren__pastomatas span {
  font-size: 13px;
  opacity: 0.7;
}
@media (any-hover: hover) {
  .pren__pastomatas:hover {
    background: var(--bone);
  }
}
.pren__forma .pren__paaisk {
  margin-top: 10px;
}

/* ══ 10-03: UI peržiūra ═══════════════════════════════════════════════════════
   Telefone iššokantis langas - apatinė kortelė: puslapis už jos matosi, nuotrauka mažesnė. */
@media (max-width: 559px) {
  .popupas {
    place-items: end stretch;
    padding: 0;
  }
  .popupas__fonas {
    background: rgb(22 24 28 / 0.4);
  }
  .popupas__langas {
    width: 100%;
    max-height: 82svh;
    border: 0;
    border-top: 2px solid var(--ink);
    padding: 20px 20px calc(16px + env(safe-area-inset-bottom));
  }
  .popupas__foto {
    flex: 0 1 auto;
    max-height: 26svh;
  }
  .popupas__foto img {
    max-height: 26svh;
    object-fit: cover;
  }
}
@media (max-width: 559px) and (prefers-reduced-motion: no-preference) {
  .popupas__langas {
    animation: popupas-is-apacios 0.34s cubic-bezier(0.22, 1, 0.36, 1);
  }
}
@keyframes popupas-is-apacios {
  from {
    transform: translateY(100%);
  }
}
/* „3 paprasti žingsniai" kompiuteryje vėl per visą ekraną (10-03, Edvardas: „sekcijų
   pritraukimą sutvarkyk") - be to, pritraukus prie jos, apačioje išlįsdavo DUK pradžia. */
/* Paskyra: hero yra <main> viduje, tad negaudavo viršutinio tarpo, kurį turi kiti dokumentų
   puslapiai - „PASKYRA" lipdavo prie galvos. */
.paskyra > .hero--doc {
  padding-top: clamp(36px, 6vw, 72px);
}
/* Kainų garantijos kompiuteryje: 4 lygūs stulpeliai, ne 3 + 1 („Saugus mokėjimas" kabodavo vienas). */
@media (min-width: 1024px) {
  .pirkimas .garantijos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px 28px;
  }
  .pirkimas .garantijos li {
    align-items: flex-start;
  }
}
/* Teisiniai puslapiai iki 1023 px: turinys viršuje (buvo paslėptas - telefone taisyklės ~7000 px
   be jokios navigacijos). Kompiuteryje jis lipnus kairėje, kaip buvo. */
@media (max-width: 1023px) {
  .dokumentas__turinys {
    display: block;
    margin-bottom: 28px;
    padding: 14px 16px 6px;
    border: 1px solid var(--ink);
    background: var(--snow);
  }
  .dokumentas__turinys ol {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
  }
  .dokumentas__turinys li + li {
    border-top: 1px solid var(--linija);
  }
  .dokumentas__turinys a {
    display: block;
    padding-block: 9px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ink);
    text-decoration: none;
  }
}
/* Įvertinimas prie kainų (pildo atsiliepimų skriptas). */
.kainos__ivertinimas[hidden] {
  display: none;
}
.kainos__ivertinimas {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-top: 10px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.kainos__ivertinimas .plyteles {
  --plytele: 18px;
}
.kainos__ivertinimas b {
  font-size: 16px;
  font-weight: 900;
}
.kainos__ivertinimas span:last-child {
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 559px) {
  html.pradzia #kaina .kainos__ivertinimas {
    margin-top: 6px;
    font-size: 13px;
  }
}
/* Telefono „Pirkti" juosta pradžios puslapyje (10-03). */
.pirkti-juosta[hidden] {
  display: none;
}
.pirkti-juosta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  border-top: 2px solid var(--ink);
  background: var(--snow);
}
.pirkti-juosta__tekstas {
  display: grid;
  min-width: 0;
  line-height: 1.25;
}
.pirkti-juosta__tekstas b {
  font-size: 15px;
  font-weight: 800;
}
.pirkti-juosta__tekstas span {
  font-size: 12px;
  opacity: 0.75;
}
.pirkti-juosta__btn {
  flex: none;
  padding: 13px 22px;
  background: var(--ink);
  color: var(--snow);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}
@media (prefers-reduced-motion: no-preference) {
  .pirkti-juosta {
    animation: popupas-is-apacios 0.25s ease-out;
  }
}
/* Kompiuteryje kainų skiltis - tinklelis su fiksuotomis eilutėmis: įvertinimas stovi
   antraštės eilutėje dešinėje, kad nepastumtų kortelių ir mygtuko. */
@media (min-width: 1024px) {
  .pirkimas > .in > .lankas {
    grid-row: 1;
  }
  .pirkimas > .in > .pirkimas__h {
    grid-row: 2;
  }
  .pirkimas > .in > .kainos {
    grid-row: 3;
  }
  .pirkimas > .in > .kainos__ivertinimas {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    justify-self: end;
    margin: 0 0 10px;
  }
}

/* ══ „Pasitiki PYK" (10-03, Edvardas: „dizainas meh") ═══════════════════════════════
   Citata - dangaus mėlyna kortelė su kabutėmis ir autoriumi (vienintelė spalvos dėmė
   tamsioje skiltyje), skaičiai - trys plytelės (paskutinė - TikTok nuoroda). Kompiuteryje
   nuotrauka nebeištempiama per visą skilties aukštį: 4:5, ne aukštesnė už ekraną. */
.ambasadorius__citata {
  position: relative;
  padding: 22px 20px 18px;
  border-left: 0;
  background: var(--sky);
  color: var(--ink);
}
.ambasadorius__citata p {
  color: var(--ink);
  font-weight: 600;
}
.ambasadorius__kabutes {
  display: block;
  width: 30px;
  height: 22px;
  margin-bottom: 10px;
  fill: var(--ink);
}
.ambasadorius__autorius {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
}
ul.ambasadorius__skaiciai {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  color: var(--snow);
}
ul.ambasadorius__skaiciai li {
  display: grid;
  align-content: center;
  gap: 2px;
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid rgb(255 255 255 / 0.22);
}
ul.ambasadorius__skaiciai b {
  font-size: 20px;
  font-weight: 900;
  line-height: 1.05;
  white-space: nowrap;
}
ul.ambasadorius__skaiciai span {
  font-size: 12px;
  opacity: 0.7;
}
ul.ambasadorius__skaiciai .ambasadorius__tiktok {
  padding: 0;
  border-color: var(--sky);
}
ul.ambasadorius__skaiciai .ambasadorius__tiktok a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: auto;
  height: 100%;
  margin: 0;
  padding: 10px 12px;
  color: var(--sky);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
ul.ambasadorius__skaiciai .ambasadorius__tiktok span {
  opacity: 1;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
ul.ambasadorius__skaiciai svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
@media (any-hover: hover) {
  ul.ambasadorius__skaiciai .ambasadorius__tiktok a:hover {
    background: var(--sky);
    color: var(--ink);
  }
}
@media (min-width: 780px) {
  .ambasadorius__in {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
  }
  .ambasadorius__foto {
    align-self: center;
    aspect-ratio: 4 / 5;
    min-height: 0;
    max-height: min(calc(var(--ekr-s, 100svh) - var(--galva, 90px) - 64px), 720px);
  }
  .ambasadorius__citata {
    padding: clamp(22px, 3vh, 32px) clamp(22px, 2.4vw, 34px);
  }
  .ambasadorius__kabutes {
    width: 40px;
    height: 30px;
  }
  .ambasadorius__citata p {
    font-size: clamp(19px, min(1.7vw, 3vh), 26px);
  }
  ul.ambasadorius__skaiciai {
    width: 100%;
    margin-top: 12px;
  }
  ul.ambasadorius__skaiciai b {
    font-size: clamp(20px, 2vw, 30px);
  }
  ul.ambasadorius__skaiciai span {
    font-size: 13px;
  }
  .ambasadorius__tekstas .ambasadorius__citata {
    align-self: stretch;
  }
}
@media (max-width: 779px) {
  ul.ambasadorius__skaiciai {
    grid-template-columns: 1fr 1fr;
  }
  ul.ambasadorius__skaiciai .ambasadorius__tiktok {
    grid-column: 1 / -1;
    min-height: 0;
  }
  ul.ambasadorius__skaiciai .ambasadorius__tiktok a {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 12px;
  }
  ul.ambasadorius__skaiciai b {
    font-size: 19px;
  }
}
.pren--nepavyko .pren__busena {
  background: var(--peach);
}
.pren--nepavyko .pren__busena::before {
  background: #a1281e;
}
.pren--nepavyko .pren__kita {
  background: var(--peach);
}

/* 10-03 (Edvardas: „make it screen size adaptive"): kompiuteryje prenumeratos kortelė per
   visą turinio plotį - kairėje kas ir kada, dešinėje veiksmai (ir atidaryta forma jų vietoje);
   užsakymai - dviem stulpeliais. */
@media (min-width: 900px) {
  .pren {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "virsus veiksmai"
      "kita veiksmai"
      "zinute atsaukti";
    grid-template-rows: auto 1fr auto;
    max-width: none;
  }
  .pren__virsus {
    grid-area: virsus;
    padding: 26px 28px 16px;
  }
  .pren__h {
    font-size: 26px;
  }
  .pren__kita {
    grid-area: kita;
    align-self: start;
    margin: 0 28px 24px;
    padding: 18px 20px;
  }
  .pren__kita-data {
    font-size: 32px;
  }
  .pren__veiksmai,
  .pren__panele {
    grid-area: veiksmai;
    margin: 0;
    border-top: 0;
    border-left: 1px solid var(--linija);
  }
  .pren__panele {
    padding: 24px 28px;
  }
  .pren__veiksmas {
    padding: 18px 24px;
  }
  .pren__atsaukti {
    grid-area: atsaukti;
    justify-self: start;
    align-self: center;
    margin: 0 24px;
    padding: 16px 0;
  }
  .pren__zinute {
    grid-area: zinute;
    align-self: center;
    margin: 0 28px 16px;
  }
  .pren-baigta {
    max-width: none;
  }
  .paskyra__uzsakymai {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    max-width: none;
  }
  .uzs + .uzs {
    margin-top: 0;
  }
}
@media (min-width: 1400px) {
  .paskyra__uzsakymai {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 560px) {
  .pren,
  .pren-baigta,
  .paskyra__uzsakymai {
    max-width: none;
  }
}
.pren__kortele {
  min-height: 60px;
  margin: 4px 0 16px;
}
.pren__greitas[hidden] {
  display: none;
}
.pren__greitas {
  margin: 4px 0 6px;
}
.pren__arba {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.7;
}
.pren__arba::before,
.pren__arba::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.35;
}

/* ══ „Pasitiki PYK" - Arno skiltis (10-03, Edvardas: „visiškas redesign") ════════════════
   Balta skiltis. Kairėje Arno žodžiai kaip antraštė (pirmas sakinys stambiai, „įsidedu PYK
   maišelį" - dangaus žymekliu), autorius su avataru, du dideli skaičiai, mygtukas ir TikTok.
   Dešinėje nuotrauka rėmelyje su TikTok žyma ir pasvirusiu lipduku. Telefone nuotrauka pirma. */
.arnas {
  background: var(--snow);
  color: var(--ink);
}
.arnas__in {
  display: grid;
  gap: 24px;
}
.arnas .lankas {
  color: var(--far);
}
.arnas__citata {
  margin: 10px 0 0;
}
.arnas__pagr {
  margin: 0;
  font-size: clamp(25px, 6.6vw, 34px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.arnas__pagr mark {
  padding: 0 0.12em;
  background: var(--sky);
  color: inherit;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.arnas__antr {
  margin: 12px 0 0;
  font-size: 17px;
  line-height: 1.45;
  opacity: 0.8;
}
.arnas__autorius {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}
.arnas__avataras {
  flex: none;
  width: 48px;
  height: 48px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  object-fit: cover;
  object-position: 45% 30%;
}
.arnas__autorius > span {
  display: grid;
  line-height: 1.3;
}
.arnas__autorius b {
  font-size: 16px;
  font-weight: 800;
}
.arnas__autorius span span {
  font-size: 13px;
  opacity: 0.7;
}
.arnas__skaiciai {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 20px 0 0;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--linija);
}
.arnas__skaiciai > div {
  display: flex;
  flex-direction: column-reverse;
  gap: 2px;
  padding: 12px 0;
}
.arnas__skaiciai > div + div {
  padding-left: 16px;
  border-left: 1px solid var(--linija);
}
.arnas__skaiciai dt {
  font-size: 13px;
  opacity: 0.7;
}
.arnas__skaiciai dd {
  margin: 0;
  font-size: clamp(26px, 7vw, 40px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.arnas__veiksmai {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: 22px;
}
.arnas__cta {
  justify-content: space-between;
  gap: 16px;
}
.arnas__tiktok {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  text-underline-offset: 4px;
}
.arnas__tiktok svg,
.arnas__zyma svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
.arnas__foto {
  position: relative;
  order: -1;
  margin: 0;
  aspect-ratio: 4 / 5;
  max-height: 62svh;
  border: 2px solid var(--ink);
  background: var(--bone);
}
.arnas__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 35%;
}
.arnas__zyma {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  background: var(--ink);
  color: var(--snow);
  font-size: 13px;
  font-weight: 700;
}
.arnas__lipdukas {
  position: absolute;
  right: 14px;
  bottom: 18px;
  padding: 8px 12px;
  border: 2px solid var(--ink);
  background: var(--sky);
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: rotate(-4deg);
}
@media (max-width: 899px) {
  .arnas__cta {
    width: 100%;
  }
  .arnas__foto {
    width: 100%;
  }
}
@media (min-width: 900px) {
  .arnas__in {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    column-gap: clamp(40px, 6vw, 110px);
  }
  .arnas__foto {
    order: 0;
    max-height: min(calc(var(--ekr-s, 100svh) - var(--galva, 90px) - 80px), 680px);
    justify-self: end;
    width: 100%;
  }
  .arnas__pagr {
    font-size: clamp(32px, 3.3vw, 54px);
  }
  .arnas__antr {
    font-size: 19px;
  }
  .arnas__skaiciai {
    max-width: 520px;
  }
  .arnas__skaiciai dd {
    font-size: clamp(32px, 3vw, 48px);
  }
  .arnas__lipdukas {
    right: -18px;
    bottom: 32px;
    font-size: 13px;
  }
}
@media (min-width: 560px) and (max-width: 899px) {
  .arnas__foto {
    max-width: 460px;
  }
  .arnas__cta {
    width: auto;
  }
}
/* 10-03 (Edvardas: „neturim sekcijų su baltu backgroundu"): ta pati Arno skiltis - rašalo
   fone, kaip „3 paprasti žingsniai". Balto fono svetainėje nėra; kaulo spalva susilietų su
   kaimynėmis („Kada" ir atsiliepimų juosta), o dangaus - su kainomis, kai atsiliepimų nėra. */
.arnas {
  background: var(--ink);
  color: var(--snow);
}
.arnas__pagr mark {
  color: var(--ink);
}
.arnas__antr {
  opacity: 0.75;
}
.arnas__avataras {
  border-color: var(--snow);
}
.arnas__skaiciai {
  border-top-color: var(--snow);
  border-bottom-color: rgb(255 255 255 / 0.22);
}
.arnas__skaiciai > div + div {
  border-left-color: rgb(255 255 255 / 0.22);
}
.arnas__tiktok {
  color: var(--sky);
}
.arnas__foto {
  border-color: var(--snow);
  background: var(--mid);
}
.arnas__zyma {
  background: var(--snow);
  color: var(--ink);
}

/* ══ Sekcijų dydžiai pritraukimui (10-03, Edvardas: „permatuok viską, adjustink dydžius") ══
   Kompiuteryje kiekviena sekcija = ekranas po galva; turinys turi tilpti ir žemuose
   languose (1366×650, 1024×700). Telefone Arno skiltis buvo ~1000 px - suspausta. */
.arnas__zyma {
  text-decoration: none;
}
@media (min-width: 900px) {
  html.pradzia main > section.arnas {
    padding-block: clamp(18px, 4vh, 56px);
  }
  .arnas__foto {
    max-height: min(calc(var(--ekr-s, 100svh) - var(--galva, 57px) - 2 * clamp(18px, 4vh, 56px)), 680px);
  }
  .arnas__pagr {
    font-size: clamp(28px, min(3.3vw, 5.6vh), 54px);
  }
  .arnas__antr {
    margin-top: clamp(6px, 1.4vh, 12px);
    font-size: clamp(16px, 2.3vh, 19px);
  }
  .arnas__autorius {
    margin-top: clamp(10px, 2.2vh, 18px);
  }
  .arnas__skaiciai {
    margin-top: clamp(12px, 2.4vh, 20px);
  }
  .arnas__skaiciai > div {
    padding-block: clamp(6px, 1.4vh, 12px);
  }
  .arnas__skaiciai dd {
    font-size: clamp(28px, min(3vw, 5.2vh), 48px);
  }
  .arnas__veiksmai {
    margin-top: clamp(12px, 2.6vh, 22px);
  }
}
@media (min-width: 780px) and (max-height: 760px) {
  html.pradzia main > section.kada {
    padding-block: clamp(16px, 3vh, 40px);
  }
}
@media (max-width: 899px) {
  .arnas__foto {
    aspect-ratio: 4 / 3;
    max-height: none;
  }
  .arnas__foto img {
    object-position: 55% 30%;
  }
  .arnas__lipdukas {
    bottom: 12px;
    padding: 6px 10px;
    font-size: 11px;
  }
  /* TikTok - žyma ant nuotraukos (nuoroda), atskiros eilutės po mygtuku nebereikia. */
  .arnas__tiktok {
    display: none;
  }
  .arnas__pagr {
    font-size: clamp(23px, 6.2vw, 30px);
  }
  .arnas__antr {
    margin-top: 8px;
    font-size: 15px;
  }
  .arnas__autorius {
    margin-top: 14px;
  }
  .arnas__skaiciai {
    margin-top: 14px;
  }
  .arnas__skaiciai > div {
    padding-block: 8px;
  }
  .arnas__skaiciai dd {
    font-size: 26px;
  }
  .arnas__veiksmai {
    margin-top: 16px;
  }
  .arnas__in {
    gap: 18px;
  }
}

/* 10-03 (Edvardas): už kalnų - puslapio fonas, ne žydras dangus. Žydras lieka tik ten,
   kur prieš kalnus stovi žydra sekcija (neprisijungus paskyroje, padėka, 404, atsiliepimo ir atsisakymo puslapiai) -
   kitaip kaulo juosta perskeltų dangų per pusę. */
.paskyra:not([data-busena="prisijungta"]) + .kalnas,
main:has(> .padeka-naudoti:last-child) + .kalnas,
section.hero--doc + .kalnas {
  background: var(--sky);
}

/* 10-03: sąskaita faktūra padėkos puslapyje. */
.aciu-saskaita {
  margin: 14px 0 0;
  font-size: 15px;
  font-weight: 700;
}
.aciu-saskaita a {
  color: inherit;
  text-underline-offset: 3px;
}