/* ==========================================================================
   BOARDSHOP — MAXIMUM
   Modernus vizualinis sluoksnis. Kraunamas PO custom.css, todel perrašo
   ankstesnius stilius. Nieko netrina — tik atnaujina išvaizdą.

   Turinys
     1.  Paletė ir ritmas
     2.  Tipografija
     3.  Antraštė
     4.  Mygtukai
     5.  Prekių kortelės
     6.  Kategorijų puslapis ir filtrai
     7.  Krepšelis ir apmokėjimas
     8.  Konfigūratorius
     9.  Poraštė
     10. Alpių iliustracijos
     11. Judesys ir maži ekranai
     12. Pagrindinio puslapio sekcijos
     13. Šviesos sluoksnis (bendra puslapio apdaila)
   ========================================================================== */

/* ==========================================================================
   1. PALETĖ IR RITMAS
   ========================================================================== */

:root {
    /* --- ŽENKLO SPALVOS, PAIMTOS IŠ LOGOTIPO ---
       Logotipe yra tik du dalykai: turkio spalvos snieglentininkas su
       užrašu „Shop.lt" ir tamsi navy „Board". Visa tema pastatyta ant
       šitų dviejų, todėl puslapis ir logotipas kalba ta pačia kalba. */
    --bs-brand:    #16B8D4;   /* logotipo turkis — grafika, ženkleliai */
    --bs-brand-2:  #5BD3E6;   /* šviesesnis — kai fonas tamsus */
    --bs-brand-3:  #CFEEF6;   /* ledo atspalvis — švelnūs fonai */

    /* Rašalas — logotipo navy, ne juoda.

       --bs-ink-3 anksčiau buvo #7E96A5. Ant balto tai 3,09:1 — mažiau,
       negu WCAG AA reikalauja tekstui (4,5:1). O juo dažų būtent tai, kas
       turi būti perskaitoma: naršymo kelią, žingsnių numerius, pastabas,
       „Nemokamas vaškavimas". Dabar #546E7E: 5,3:1 ant balto, 4,9 ant ledo
       ir 4,5 ant tamsesnio ledo, t. y. praeina visur, kur tema jį deda.

       Skirtumas nuo --bs-ink-2 dėl to sumažėjo, bet hierarchiją čia neša ne
       vien spalva — užuominos rašomos mažesnės, retintos ir didžiosiomis. */
    --bs-ink:      #0F1F2B;
    --bs-ink-2:    #46606F;
    --bs-ink-3:    #546E7E;

    /* Paviršiai — sniegas, o ne naktis.
       Pagrindinis puslapio tonas yra baltas; ledas naudojamas tik
       sekcijoms atskirti. */
    --bs-snow:     #FFFFFF;
    --bs-paper:    #F7FBFC;
    --bs-ice:      #EFF7FA;
    --bs-ice-2:    #E1EFF4;

    /* Linijos */
    --bs-line:     #E3EEF3;
    --bs-line-2:   #C7DBE4;

    /* Akcentai.
       --bs-brand yra logotipo turkis, bet baltas tekstas ant jo per
       blankus, o jis pats ant balto — irgi. Todėl paspaudžiamiems
       dalykams naudojam patamsintą jo versiją. Ryškųjį turkį paliekam
       grafikai.

       --bs-accent anksčiau buvo #0B7F98. Ant balto tai 4,67:1 ir praeina,
       bet tema turi ir ledo tonų paviršių (--bs-ice, --bs-ice-2), o ant jų
       tas pats akcentas nukrenta iki 4,31:1. Tekstui to nebeužtenka, ir
       kliuvo būtent tos vietos, kur akcentas naudojamas kaip nuoroda:
       „Pritaikyti kodą" krepšelio santraukoje, sekcijų palydovai.

       #0A7288 praeina visur: 5,6:1 ant balto, 5,1 ant ledo, 4,7 ant
       tamsesnio ledo. Mygtukams su baltu tekstu irgi geriau. Nuo
       --bs-accent-d jis vis dar aiškiai skiriasi, todėl užvedimo žingsnis
       lieka matomas. */
    --bs-accent:   #0A7288;
    --bs-accent-d: #086175;

    /* Krepšelio skaitiklis: baltas 10,5 px skaičius ant oranžinio taškelio.
       #F0603A davė 3,26:1 — mažiau, negu reikia tokiam smulkiam tekstui.
       #CE4A16 duoda 4,6:1 ir lieka ta pati šilta signalinė spalva. */
    --bs-warm:     #CE4A16;
    --bs-pine:     #14705F;
    --bs-sale:     #D63B2F;

    /* Formos */
    --bs-r-sm:  10px;
    --bs-r:     14px;
    --bs-r-lg:  22px;
    --bs-r-xl:  30px;
    --bs-r-pill: 999px;

    /* Šešėliai — švelnūs, sluoksniuoti, su turkio prieskoniu */
    --bs-sh-1: 0 1px 2px rgba(15, 31, 43, .05);
    --bs-sh-2: 0 4px 16px -6px rgba(15, 31, 43, .13);
    --bs-sh-3: 0 18px 48px -22px rgba(15, 31, 43, .30);
    --bs-sh-4: 0 30px 70px -30px rgba(15, 31, 43, .38);
    --bs-sh-brand: 0 18px 44px -20px rgba(11, 127, 152, .45);

    /* Šriftai — pilnas stekas kintamajame, nes var(--x, atsarga)
       atsargos nenaudoja, kai kintamasis apibrėžtas */
    --bs-display: 'Archivo', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --bs-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

    /* Judesys */
    --bs-ease: cubic-bezier(.22, .61, .36, 1);
    --bs-fast: .18s var(--bs-ease);
    --bs-slow: .42s var(--bs-ease);
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;

    /* TEMA YRA ŠVIESI, IR NARŠYKLĖ TURI TAI ŽINOTI.

       Be šitos eilutės telefonas ar kompiuteris, kurio sistema nustatyta
       tamsiai, piešia SAVO dalis tamsiai: sąrašų (`select`) langelius,
       varneles, datos rinkiklį, slinkties juostą ir foną, kol puslapis
       dar nenusipiešė. Gaudavosi tamsūs laukeliai baltoje parduotuvėje —
       ir tai matydavo tik dalis pirkėjų, todėl pastebėti sunku.

       `light` nereiškia, kad tema kada nors bus tamsi; tai pasakymas
       naršyklei, kokiu pagrindu piešti tai, ko mes nepiešiam. */
    color-scheme: light;
}

body {
    background: var(--bs-snow);
    color: var(--bs-ink);
    font-family: var(--bs-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;

    /* Rašymo žymeklis ir varnelės — ženklo spalvos, ne sistemos mėlynos.
       `accent-color` paliečia visas varneles, radijo mygtukus ir
       slankiklius vienu ypu; anksčiau čia buvo tik prekės puslapio
       radijo mygtukai, o krepšelio ir apmokėjimo varnelės liko mėlynos. */
    caret-color: var(--bs-accent);
    accent-color: var(--bs-accent);
}

::selection {
    background: var(--bs-accent);
    color: #fff;
}

:focus-visible {
    outline: 2px solid var(--bs-accent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ==========================================================================
   2. TIPOGRAFIJA
   ========================================================================== */

/* Antraštės palydovas. Spalva ne --bs-accent, o tamsesnė jo versija:
   11 px retintomis didžiosiomis ant ledo tonų --bs-accent duoda 4,3:1, o
   tokiam smulkiam tekstui reikia 4,5:1. --bs-accent-d praeina visur. */
.bs-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--bs-accent-d);
}

.bs-h2 {
    font-family: var(--bs-display);
    font-size: clamp(30px, 3.4vw, 50px);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -.03em;
    color: var(--bs-ink);
}

.bs-lead {
    font-size: clamp(15px, 1.15vw, 17.5px);
    line-height: 1.65;
    color: var(--bs-ink-2);
    max-width: 62ch;
}

/* Puslapio antraštė: kategorija, krepšelis, paieška, turinio puslapiai.

   Mažesnė už .bs-h2, nes tai ne pareiškimas, o vardas — pasako, kur esi,
   ir užleidžia vietą turiniui. Po ja einantis turinys atsiremia į savo
   tarpą, todėl apačioje jo mažiau negu viršuje. */
.bs-page-title {
    font-family: var(--bs-display);
    font-size: clamp(26px, 2.4vw, 36px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.025em;
    color: var(--bs-ink);
    margin: 0 0 4px;
    text-wrap: balance;
}

.bs-link {
    font-weight: 600;
    color: var(--bs-ink);
    border-bottom: 2px solid var(--bs-accent);
    padding-bottom: 2px;
    transition: color var(--bs-fast);
}

.bs-link:hover { color: var(--bs-accent); }

/* ==========================================================================
   3. ANTRAŠTĖ
   Šablonas perrašytas temoje
   (components/layouts/header/desktop/bottom.blade.php):
   viena ilga eilutė išskaidyta į dvi — viršuje logotipas, paieška ir
   piktogramos, apačioje navigacija. Čia tik stiliai.

   SVARBU: antraštei negalima dėti backdrop-filter, filter ar transform —
   bet kuris iš jų paverčia ją konteineriu position:fixed vaikams, o
   kategorijų ir krepšelio sluoksniai gyvena jos viduje ir apsikirptų.
   ========================================================================== */

header.sticky {
    background: #FFFFFF !important;
    border-bottom: 1px solid var(--bs-line);
    box-shadow: none !important;
    transition: box-shadow var(--bs-fast);
}

body.bs-scrolled header.sticky { box-shadow: var(--bs-sh-2) !important; }

/* v-header-switcher yra Vue komponentas; kol jis nesumontuotas, narsykle
   ji laiko iprastu inline elementu. Padarom ji bloku, kad antraste turetu
   pilna ploti jau pirma sekunde. */
header > v-header-switcher {
    display: block;
    width: 100%;
}

.bs4 { width: 100%; }

/* --- bendras konteineris --- */

.bs4-wrap {
    display: flex;
    align-items: center;
    gap: clamp(20px, 2.6vw, 40px);
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 56px);
}

/* --- 1 eilė --- */

.bs4-bar { height: 88px; }

.bs4-bar .bs4-wrap { height: 100%; }

.bs4-logo {
    flex: none;
    display: inline-flex;
    align-items: center;
    transition: opacity var(--bs-fast);
}

.bs4-logo img {
    /* Logotipas — parduotuvės veidas, todėl jam duodam tikro dydžio
       vietos. Aukštis auga kartu su ekranu, bet niekada nenukerpa
       antraštės. */
    height: clamp(42px, 3.4vw, 58px);
    width: auto;
    max-width: 280px;
    object-fit: contain;
    display: block;
}

.bs4-logo:hover { opacity: .72; }

/* Paieška — plati, centre */
.bs4-search {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 620px;
    margin: 0 auto;
}

.bs4-search form {
    position: relative;
    max-width: none !important;
    width: 100%;
}

.bs4-search input[name="query"] {
    box-sizing: border-box;
    width: 100%;
    height: 46px;
    padding: 0 46px !important;
    border: 1px solid var(--bs-line) !important;
    border-radius: var(--bs-r-pill) !important;
    background: var(--bs-ice) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--bs-ink) !important;
    transition: background-color var(--bs-fast), border-color var(--bs-fast), box-shadow var(--bs-fast);
}

.bs4-search input[name="query"]::placeholder { color: var(--bs-ink-3); }

.bs4-search input[name="query"]:hover { border-color: var(--bs-line-2) !important; }

.bs4-search input[name="query"]:focus {
    background: #fff !important;
    border-color: var(--bs-accent) !important;
    box-shadow: 0 0 0 4px rgba(22, 184, 212, .18) !important;
}

.bs4-search .icon-search {
    position: absolute;
    top: 50% !important;
    transform: translateY(-50%);
    left: 16px !important;
    right: auto !important;
    font-size: 18px;
    color: var(--bs-ink-3);
    pointer-events: none;
}

.bs4-search .icon-camera {
    position: absolute;
    top: 50% !important;
    transform: translateY(-50%);
    right: 16px !important;
    left: auto !important;
    padding: 0 !important;
    font-size: 18px;
    color: var(--bs-ink-3);
    cursor: pointer;
    transition: color var(--bs-fast);
}

.bs4-search .icon-camera:hover { color: var(--bs-accent); }

/* --- piktogramos --- */

.bs4-tools {
    flex: none;
    display: flex;
    align-items: center;
    gap: 4px;
}

.bs4-tool {
    position: relative;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: var(--bs-ink);
    transition: background-color var(--bs-fast), color var(--bs-fast);
}

.bs4-tool:hover { background: var(--bs-ice); color: var(--bs-accent); }

/* Piktograma uzpildo VISA 44 px mygtuka, o ne kabo jo viduryje.

   Sito reikia ne del isvaizdos, o del taikinio dydzio: paspaudima gaudo
   ne apskritimas .bs4-tool, o pati piktograma (Bagisto @click kabo ant
   <span>), todel realus taikinys buvo 21 px vietoj 44 px. Pele to
   nepastebi, pirstas — pastebi. */
/* 44 px, o NE 100%.

   Procentai skaičiuojami nuo tėvo, o krepšelio piktograma guli giliau nei
   kitos dvi: .bs4-tool → <a> → <span class="relative"> → piktograma. Tie
   tarpiniai apvalkalai lieka teksto pločio, todėl 100% duodavo 21 px, ir
   piktograma atsisėsdavo 11 px nuo mygtuko vidurio į kairę.

   Ekrane tai matėsi kaip nelygūs tarpai: tarp krepšelio ir paskyros
   atrodė didesnis tarpas nei tarp palyginimo ir krepšelio, nors patys
   mygtukai išdėstyti tolygiai kas 48 px. Pamatuota: nuokrypis −11 px.

   Konkretus dydis nepriklauso nuo apvalkalų gylio, todėl visos trys
   piktogramos centruojasi vienodai. */
.bs4-tool > span[class*="icon-"],
.bs4-tool span[class*="icon-"] {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    font-size: 21px !important;
    line-height: 1;
    cursor: pointer;
}

/* Tarpiniai apvalkalai (Vue dropdown, span.relative) irgi turi uzpildyti
   mygtuka — kitaip piktograma isitempia, bet lieka ju viduje.

   :not([class*="absolute"]) BUTINAS, ir stai kodel. Iskleidziamas meniu
   (paskyra) gyvena TAME PACIAME apvalkale, kaip mygtuko turinys, tik yra
   position: absolute. Be sios isimties jam irgi pritaikomas width: 100%,
   t. y. 44 px — meniu susitraukdavo iki piktogramos plocio, o „Sveiki
   Robert", „Krepselis, uzsakymai ir pageidavimai" ir visi punktai
   lauzydavosi po viena zodi i eilute.

   Pele to nepamatai is karto: meniu atsidaro tik uzvedus, o jo turinys
   vis tiek matomas. Pamatoma tik prisijungus ir atidarius. */
.bs4-tool > div:not([class*="absolute"]),
.bs4-tool > div > div:not([class*="absolute"]),
.bs4-tool > span.relative,
.bs4-tool > a { width: 100%; height: 100%; }

/* Krepšelio skaitiklis.
   Bagisto ji pozicionuoja savo klasemis (-top-4, ltr:left-5), skaiciuotomis
   jo paties antrastei. Musu piktograma — apskritimas, todel vieta
   nurodom patys, kitaip skaitiklis nuklysta i sona. */
.bs4-tool--cart span[class*="absolute"] {
    position: absolute !important;
    top: 2px !important;
    right: 2px !important;
    left: auto !important;
    min-width: 17px;
    height: 17px;
    padding: 0 4px !important;
    display: grid;
    place-items: center;
    border-radius: var(--bs-r-pill) !important;
    background: var(--bs-warm) !important;
    color: #fff !important;
    font-weight: 700;
    font-size: 10.5px;
    line-height: 1 !important;
    box-shadow: 0 0 0 2px #fff;
}

/* Bagisto skaitikli deda i <span class="relative">, kuris yra vos
   piktogramos dydzio — skaitiklis tada uzgula pacia piktograma. Panaikinam
   ta pozicionavima, kad skaitiklis skaiciuotusi nuo viso 44px mygtuko ir
   atsisestu i jo kampa. */
.bs4-tool--cart span.relative { position: static; display: inline-flex; }

/* --- 2 eilė: navigacija --- */

.bs4-nav {
    border-top: 1px solid var(--bs-line);
    background: #fff;
}

.bs4-nav .bs4-wrap {
    gap: 0;
    min-height: 52px;
}

/* Kategorijų sąrašą Vue išpiešia kaip vieną vaiką — pasirūpinam, kad
   punktai gultų į eilutę net jei Tailwind klasės nepasiektų. */
.bs4-nav .bs4-wrap > div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.bs4-nav .bs4-wrap > div > div {
    display: flex;
    align-items: center;
}

.bs4-nav a { text-decoration: none; }

.bs4-nav__skeleton { display: flex; align-items: center; gap: 20px; }

.bs4-nav__skeleton span {
    display: block;
    width: 80px;
    height: 14px;
    border-radius: 4px;
}

/* Bagisto kategorijų punktai — sunormuojam aukštį ir pabraukimą */
header [class*="h-[77px]"] {
    height: 52px !important;
    border: 0 !important;
    position: relative;
}

header [class*="h-[77px]"]:hover { border: 0 !important; }

header [class*="h-[77px]"] > span > a,
header [class*="h-[77px]"] > span:not([class]) {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 52px;
    padding: 0 15px !important;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--bs-ink-2);
    white-space: nowrap;
    transition: color var(--bs-fast);
}

header [class*="h-[77px]"]:hover > span > a,
header [class*="h-[77px]"]:hover > span:not([class]) { color: var(--bs-ink); }

/* Pabraukimas — auga nuo vidurio */
header [class*="h-[77px]"]::after {
    content: "";
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 0;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: var(--bs-accent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--bs-slow);
}

header [class*="h-[77px]"]:hover::after { transform: scaleX(1); }

/* Išskleidžiamas kategorijų meniu — prilipdom prie navigacijos apačios */
header [data-mega-menu-dropdown] {
    top: 100% !important;
    border-radius: 0 0 var(--bs-r-lg) var(--bs-r-lg);
    border: 1px solid var(--bs-line) !important;
    border-top: 0 !important;
    box-shadow: var(--bs-sh-3) !important;
    padding: 32px 36px !important;
}

header .icon-hamburger {
    font-size: 16px;
    color: var(--bs-ink);
    margin-right: 2px;
}

/* Sluoksniai turi likti virš visko */
header [class*="z-[1000]"] { z-index: 1000; }

/* --- meniu punktas RINKINYS --- */

/* „RINKINYS" — vienintelis užpildytas mygtukas meniu juostoje.

   Aukštis buvo 28 px, o kaimyninės kategorijų nuorodos yra 52 px: mažiausias
   taikinys eilutėje priklausė svarbiausiam mygtukui. Su 12 px paraštėmis jis
   ~41 px ir eilutės ritmo nebeardo. */
.sc-menu-link {
    margin-left: 14px;
    padding: 12px 18px;
    border: 0;
    border-radius: var(--bs-r-pill);
    background: var(--bs-ink);
    color: #fff;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .12em;
    line-height: 1;
    transition: background-color var(--bs-fast), transform var(--bs-fast);
}

.sc-menu-link:hover {
    background: var(--bs-accent);
    color: #fff;
    transform: translateY(-1px);
}

/* --- siauresni ekranai --- */

@media (max-width: 1180px) {
    .bs4-wrap { gap: 16px; padding: 0 24px; }
    .bs4-search { max-width: 420px; }
    .bs4-bar { height: 78px; }
    .bs4-logo img { height: 44px; }
    /* Ta pati taisykle buvo dar karta 11 skyriuje, tame paciame 1180 px
       lange, tik su font-size: 12px — ir veike butent ANA, o cia buves
       12.5px tyliai nieko nedare. Palikta veikusi reiksme; dublikatas
       pasalintas, o taisykle liko cia, prie kitu antrastes taisykliu.

       SVARBU, ka tai pakeicia telefone. Anas dublikatas faile buvo
       ZEMIAU uz 640 px bloka, todel telefone laimedavo butent jis, ir
       640 px bloko `padding: 0 10px` niekada nesuveikdavo — nors salia
       jo esantis `height: 44px` suveikdavo. T. y. telefonas gaudavo
       pusiau viena, pusiau kita bloka. Dabar 640 px blokas veikia visas:
       tarpai telefone 10 px vietoj 11 px. Jie SIAURESNI, todel meniu gali
       tik geriau tilpti, ne prasciau. Sita skirtuma pagavo ne akys, o
       apskaiciuotu stiliu palyginimas pries/po per narsykle. */
    header [class*="h-[77px]"] > span > a,
    header [class*="h-[77px]"] > span:not([class]) { padding: 0 11px !important; font-size: 12px; }
}

/* Telefone plati viena eilutė netelpa, todėl paiešką nuleidžiam po
   logotipu, o kategorijas paverčiam horizontaliai slenkama juosta —
   nieko neapkerpa ir nieko neišstumia už ekrano ribų. */
@media (max-width: 640px) {
    .bs4-bar { height: auto; }
    .bs4-bar .bs4-wrap { flex-wrap: wrap; padding: 12px 20px; gap: 12px; }
    .bs4-logo img { height: 38px; max-width: 180px; }
    .bs4-tools { margin-left: auto; }

    .bs4-search {
        order: 3;
        flex: 1 0 100%;
        max-width: none;
        margin: 0;
    }

    .bs4-search input[name="query"] { height: 42px; }

    .bs4-tool { width: 40px; height: 40px; }

    .bs4-nav .bs4-wrap { padding: 0 12px; min-height: 0; }

    /* Punktai persikelia i kita eilute — juostos neapkerpam ir neverciam
       slenkama, nes joje kabo iskleidziamas kategoriju meniu. */
    .bs4-nav .bs4-wrap > div { flex-wrap: wrap; row-gap: 2px; padding: 6px 0; }

    header [class*="h-[77px]"] { height: 44px !important; }

    header [class*="h-[77px]"] > span > a,
    header [class*="h-[77px]"] > span:not([class]) { height: 44px; padding: 0 10px !important; }

    .sc-menu-link { margin-left: 8px; padding: 7px 14px; }
}

/* ==========================================================================
   4. MYGTUKAI
   ========================================================================== */

.primary-button,
button.primary-button,
a.primary-button {
    background: var(--bs-ink) !important;
    border: 0 !important;
    border-radius: var(--bs-r-pill) !important;
    color: #fff !important;
    font-weight: 600;
    letter-spacing: .01em;
    box-shadow: var(--bs-sh-1);
    transition: background-color var(--bs-fast), transform var(--bs-fast), box-shadow var(--bs-fast);
}

.primary-button:hover,
button.primary-button:hover,
a.primary-button:hover {
    background: var(--bs-accent) !important;
    transform: translateY(-1px);
    box-shadow: var(--bs-sh-2);
}

.secondary-button,
button.secondary-button,
a.secondary-button {
    background: transparent !important;
    border: 1.5px solid var(--bs-line-2) !important;
    border-radius: var(--bs-r-pill) !important;
    color: var(--bs-ink) !important;
    font-weight: 600;
    transition: border-color var(--bs-fast), color var(--bs-fast), background-color var(--bs-fast);
}

.secondary-button:hover,
button.secondary-button:hover,
a.secondary-button:hover {
    border-color: var(--bs-ink) !important;
    background: var(--bs-ice) !important;
}

/* ==========================================================================
   5. PREKIŲ KORTELĖS
   Kortelės šablonas perrašytas temoje (components/products/card.blade.php),
   todėl čia stiliai savoms klasėms, o ne bandymas prisitaikyti prie
   Bagisto Tailwind klasių. Visos kortelės vienodo aukščio ir ant
   užvedimo nekeičia dydžio — tik pakyla.
   ========================================================================== */

.bs3-card {
    display: grid;
    grid-template-rows: auto 1fr auto;
    background: var(--bs-snow);
    border: 1px solid var(--bs-line);
    border-radius: 18px;
    overflow: hidden;
    height: 100%;
    /* Bagisto prekiu karusele telefone uzdeda white-space: nowrap visam
       slenkamam konteineriui, o kortelė ji paveldi: pavadinimas nebelūžta
       i dvi eilutes, o nusikerpa („Snieglentė Camber All-M"). Kortelė
       savo teksta lauzo pati. */
    white-space: normal;
    transition: transform var(--bs-fast), box-shadow var(--bs-fast), border-color var(--bs-fast);
}

.bs3-card:hover {
    transform: translateY(-4px);
    border-color: transparent;
    box-shadow: var(--bs-sh-3);
}

/* --- nuotrauka --- */

.bs3-card__media {
    position: relative;
    aspect-ratio: 1 / 1;
    background: linear-gradient(160deg, #F5F8FA 0%, #E9EFF4 100%);
    overflow: hidden;
}

.bs3-card__link {
    display: block;
    width: 100%;
    height: 100%;
}

.bs3-card__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 9%;
    transition: transform var(--bs-slow);
}

.bs3-card:hover .bs3-card__img { transform: scale(1.06); }

/* --- ženkliukai --- */

.bs3-card__badges {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    pointer-events: none;
}

.bs3-badge {
    display: inline-block;
    padding: 5px 11px;
    border-radius: var(--bs-r-pill);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
    box-shadow: var(--bs-sh-1);
}

/* SALE — raudona, NEW — zenklo turkis. Sios dvi eilutes buvo ir cia, ir
   13.4 skyriuje, ir NESUTAPO: cia NEW buvo rasalo spalvos, ten — turkio.
   Kadangi specifiskumas vienodas, is tikruju veike velesne (turkis), o si
   eilute tyliai nieko nedare. Paliktas turkis (jis ir veike), o dublikatas
   is 13.4 pasalintas: modifikatoriaus vieta — salia .bs3-badge. */
.bs3-badge--sale { background: var(--bs-sale); }
.bs3-badge--new  { background: var(--bs-accent); }

/* --- pageidavimai ir palyginimas --- */

.bs3-card__tools {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    gap: 8px;
    opacity: 0;
    transform: translateX(6px);
    transition: opacity var(--bs-fast), transform var(--bs-fast);
}

.bs3-card:hover .bs3-card__tools,
.bs3-card:focus-within .bs3-card__tools {
    opacity: 1;
    transform: translateX(0);
}

.bs3-tool {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .95);
    color: var(--bs-ink-2);
    font-size: 15px;
    cursor: pointer;
    box-shadow: var(--bs-sh-2);
    transition: background-color var(--bs-fast), color var(--bs-fast);
}

.bs3-tool:hover { background: #fff; color: var(--bs-accent); }
.bs3-tool--on   { color: var(--bs-sale); }

/* --- turinys --- */

.bs3-card__body {
    display: grid;
    align-content: start;
    gap: 7px;
    padding: 16px 16px 6px;
}

.bs3-card__name {
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--bs-ink-2);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.8em;
    transition: color var(--bs-fast);
}

.bs3-card:hover .bs3-card__name { color: var(--bs-ink); }

.bs3-card__stars { margin-top: -2px; }

.bs3-card__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    font-family: var(--bs-display);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--bs-ink);
}

.bs3-card__price .line-through,
.bs3-card__price s,
.bs3-card__price del {
    font-family: var(--bs-body);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--bs-ink-3);
}

/* --- veiksmai --- */

.bs3-card__actions {
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding: 10px 16px 16px;
}

.bs3-buy,
.bs3-card__actions .sc-add-btn {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 0 14px;
    border-radius: var(--bs-r-pill);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--bs-fast), color var(--bs-fast), border-color var(--bs-fast);
}

.bs3-buy {
    border: 0;
    background: var(--bs-ink);
    color: #fff;
}

.bs3-buy:hover:not(:disabled) { background: var(--bs-accent); }

.bs3-buy:disabled {
    background: var(--bs-ice-2);
    color: var(--bs-ink-3);
    cursor: not-allowed;
}

/* „Į rinkinį“ — antrinis, tos pačios formos, matomas tik su konfigūratoriumi */
.bs3-card__actions .sc-add-btn {
    display: none;
    width: auto;
    border: 1.5px solid var(--bs-accent);
    background: transparent;
    color: var(--bs-accent);
}

html.sc-on .bs3-card__actions .sc-add-btn { display: inline-flex; }

.bs3-card__actions .sc-add-btn:hover:not(:disabled) {
    background: var(--bs-accent);
    color: #fff;
}

/* --- sąrašo vaizdas --- */

@media (min-width: 768px) {
    .bs3-card--list {
        grid-template-columns: 220px 1fr auto;
        grid-template-rows: 1fr;
        align-items: center;
    }

    .bs3-card--list .bs3-card__media { aspect-ratio: 1 / 1; }
    .bs3-card--list .bs3-card__body { padding: 20px 24px; }
    .bs3-card--list .bs3-card__actions { padding: 20px 24px; }
    .bs3-card--list .bs3-card__name { min-height: 0; font-size: 16px; }
}

/* --- jutikliniai ekranai: įrankiai visada matomi --- */

@media (hover: none) {
    .bs3-card__tools { opacity: 1; transform: none; }
    .bs3-card:hover { transform: none; box-shadow: none; }
}

@media (max-width: 480px) {
    .bs3-card__actions { flex-direction: column; }

    /* flex: none, ne tik width. Mygtukas turi flex: 1 1 0, o stulpelyje
       flex-basis 0 galioja AUKSCIUI — mygtukas susitraukdavo iki 13 px
       ir „Į krepšelį" islysdavo virs juodos juostelės. Pamatuota telefone. */
    .bs3-buy,
    .bs3-card__actions .sc-add-btn { flex: none; width: 100%; }
}

/* ==========================================================================
   6. KATEGORIJŲ PUSLAPIS IR FILTRAI
   ========================================================================== */

/* Filtrų blokas */
[class*="filter"] h3,
aside p.font-semibold {
    font-family: var(--bs-display);
    letter-spacing: -.01em;
}

input[type="checkbox"] {
    border-radius: 5px !important;
    border-color: var(--bs-line-2) !important;
    transition: border-color var(--bs-fast), background-color var(--bs-fast);
}

input[type="checkbox"]:checked {
    background-color: var(--bs-accent) !important;
    border-color: var(--bs-accent) !important;
}

/* Rikiavimo ir kiekio laukeliai */
select,
[class*="rounded"][class*="border"] select {
    border-radius: var(--bs-r-pill) !important;
    border-color: var(--bs-line) !important;
    font-weight: 600;
    color: var(--bs-ink);
}

/* ==========================================================================
   7. KREPŠELIS IR APMOKĖJIMAS
   ========================================================================== */

/* Santraukos kortelė */
[class*="checkout"] [class*="rounded"][class*="border"],
.cart-summary {
    border-radius: var(--bs-r-lg);
    border-color: var(--bs-line);
}

/* Anksciau cia buvo taisykle, taikiusi i [class*="grand"] ir
   [class*="Iš viso"]. Antroji is viso nebuvo klase — tai lietuviskas
   tekstas, o ne zymejimas, todel taisykle nieko nedare. Krepselio sumu
   blokui isvaizda duoda 14.5 skyrius ([class*="border-y"]). */

/* ==========================================================================
   8. KONFIGŪRATORIUS
   Perimam naują paletę ir pridedam gylio.
   ========================================================================== */

.sc-bar {
    background: linear-gradient(180deg, var(--bs-ice) 0%, #FFFFFF 100%);
    border-bottom: 1px solid var(--bs-line);
    box-shadow: inset 0 -1px 0 var(--bs-line);
}

.sc-step {
    border-radius: var(--bs-r);
    border-color: var(--bs-line);
    box-shadow: var(--bs-sh-1);
    transition: border-color var(--bs-fast), box-shadow var(--bs-fast), transform var(--bs-fast);
}

.sc-step--done {
    border-color: var(--bs-accent);
    box-shadow: 0 0 0 1px var(--bs-accent), var(--bs-sh-2);
}

.sc-step:hover { transform: translateY(-1px); }

.sc-free {
    background: var(--bs-pine);
    border-radius: var(--bs-r-pill);
}

.sc-cta {
    border-radius: var(--bs-r-pill);
    box-shadow: var(--bs-sh-2);
}

.sc-cta:hover:not(:disabled) { box-shadow: var(--bs-sh-3); }

.sc-ghost { border-radius: var(--bs-r-pill); }

.sc-card {
    border-radius: var(--bs-r-lg);
    box-shadow: var(--bs-sh-1);
    transition: box-shadow var(--bs-fast), transform var(--bs-fast);
}

.sc-card:hover {
    box-shadow: var(--bs-sh-2);
    transform: translateY(-2px);
}

.sc-card--done { border-color: var(--bs-accent); }

.sc-summary {
    border-radius: var(--bs-r-lg);
    background: linear-gradient(140deg, var(--bs-ice) 0%, var(--bs-ice-2) 100%);
}

.sc-add-btn {
    border-radius: var(--bs-r-pill);
    background: var(--bs-accent);
    border-color: var(--bs-accent);
}

.sc-add-btn:hover:not(:disabled) {
    background: var(--bs-accent-d);
    border-color: var(--bs-accent-d);
}

.sc-flash {
    border-radius: var(--bs-r-pill);
    box-shadow: var(--bs-sh-3);
}

/* ==========================================================================
   9. PORAŠTĖ
   Šablonas perrašytas temoje (components/layouts/footer/index.blade.php).
   Anksčiau bandžiau tik nudažyti Bagisto poraštę — jos šviesus fonas
   liko, o mano šviesios nuorodos ant jo tapo nebeįskaitomos.
   ========================================================================== */

/* Poraštė lieka tamsi — tai antroji logotipo spalva ir puslapio
   pamušalas. Visa kita virš jos dabar šviesu, todėl viena tamsi juosta
   apačioje puslapio nebedaro nakties, o tiesiog jį užbaigia. */
.bs5 {
    position: relative;
    isolation: isolate;
    background: linear-gradient(180deg, #12293A 0%, var(--bs-ink) 62%);
    color: #A9BAC8;
    overflow: hidden;
}

/* Kalnų siluetas — labai tyliai, tik apačioje */
.bs5::before {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 300px;
    z-index: -1;
    background: url("../images/alps-dusk.svg") center bottom / cover no-repeat;
    opacity: .34;
    /* Be kaukės iliustracijos viršus nusikerpa tiesia linija per poraštės
       vidurį. Kaukė ją ištirpdo. */
    -webkit-mask-image: linear-gradient(to top, #000 0%, #000 46%, transparent 100%);
    mask-image: linear-gradient(to top, #000 0%, #000 46%, transparent 100%);
    pointer-events: none;
}

.bs5-wrap {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 56px);
}

/* --- viršus: ženklas + nuorodų stulpeliai --- */

.bs5-top {
    display: grid;
    grid-template-columns: 1.6fr repeat(3, 1fr);
    gap: clamp(28px, 4vw, 64px);
    padding: clamp(48px, 6vw, 76px) 0 clamp(36px, 4vw, 52px);
}

.bs5-brand__logo {
    display: inline-flex;
    align-items: center;
    margin-bottom: 22px;
    padding: 10px 16px;
    border-radius: var(--bs-r);
    background: #FFFFFF;
    transition: opacity var(--bs-fast);
}

/* Logotipas laikomas ant balto skydelio, o ne perdažomas filtru —
   taip islieka tikros prekes zenklo spalvos ir garantuotas kontrastas. */
.bs5-brand__logo img {
    height: 44px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    display: block;
}

.bs5-brand__logo:hover { opacity: .88; }

.bs5-brand__text {
    font-size: 14px;
    line-height: 1.65;
    color: #92A5B5;
    max-width: 42ch;
}

.bs5-contacts {
    display: grid;
    gap: 12px;
    margin-top: 24px;
    list-style: none;
    padding: 0;
}

.bs5-contacts li { display: grid; gap: 2px; }

.bs5-contacts__k {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #64798A;
}

.bs5-contacts a,
.bs5-contacts span:not(.bs5-contacts__k) {
    font-size: 14.5px;
    color: #E4ECF2;
    text-decoration: none;
}

.bs5-contacts a:hover { color: var(--bs-brand-2); }

/* Nuorodų stulpeliai */
.bs5-col__title {
    font-family: var(--bs-display);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #FFFFFF;
    margin: 0 0 18px;
}

.bs5-col__list {
    display: grid;
    gap: 11px;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* inline-flex + min-height: nuorodos eilutes aukstis buvo 16 px, o tarp
   ju 11 px tarpas — telefone tai reiskia, kad taikant i „Grazinimas"
   pataikoma i „Pristatymas". Tekstas nepasikeicia, tik paspaudziamas
   plotas apauga iki 36 px. */
.bs5-col__list a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    font-size: 14.5px;
    line-height: 1.4;
    color: #A9BAC8;
    text-decoration: none;
    transition: color var(--bs-fast);
}

.bs5-col__list a:hover { color: #FFFFFF; }

/* --- naujienlaiškis --- */

.bs5-news {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(24px, 4vw, 56px);
    flex-wrap: wrap;
    padding: clamp(28px, 3vw, 40px) 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.bs5-news__title {
    font-family: var(--bs-display);
    font-size: clamp(19px, 1.8vw, 25px);
    font-weight: 800;
    letter-spacing: -.02em;
    color: #FFFFFF;
    margin: 0;
    font-style: normal;
    line-height: 1.25;
    max-width: 22ch;
}

.bs5-news__sub {
    margin: 7px 0 0;
    font-size: 13.5px;
    color: #8FA2B2;
}

.bs5-news__form {
    flex: 1 1 360px;
    max-width: 520px;
    min-width: 0;
}

/* Bagisto formos laukas — perdažom tamsiam fonui */
.bs5-news__form form { margin: 0 !important; }

.bs5-news__form .relative { position: relative; }

.bs5-news__form input[type="email"] {
    box-sizing: border-box;
    width: 100% !important;
    height: 54px;
    padding: 0 148px 0 22px !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-radius: var(--bs-r-pill) !important;
    background: rgba(255, 255, 255, .07) !important;
    color: #FFFFFF !important;
    font-size: 14.5px !important;
    transition: border-color var(--bs-fast), background-color var(--bs-fast);
}

.bs5-news__form input[type="email"]::placeholder { color: #7C8FA0; }

.bs5-news__form input[type="email"]:focus {
    background: rgba(255, 255, 255, .12) !important;
    border-color: var(--bs-brand-2) !important;
    outline: none;
}

.bs5-news__form button[type="submit"] {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%);
    right: 6px !important;
    left: auto !important;
    height: 42px;
    padding: 0 24px !important;
    border-radius: var(--bs-r-pill) !important;
    background: #FFFFFF !important;
    color: var(--bs-ink) !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    transition: background-color var(--bs-fast);
}

.bs5-news__form button[type="submit"]:hover { background: var(--bs-brand-2) !important; }

/* Klaidos pranešimas */
.bs5-news__form [class*="text-red"],
.bs5-news__form .error {
    color: #FF9C8A !important;
    font-size: 12.5px;
    margin-top: 8px;
    display: block;
}

/* --- apatinė juosta --- */

.bs5-bottom {
    border-top: 1px solid rgba(255, 255, 255, .1);
    background: rgba(0, 0, 0, .2);
}

.bs5-bottom__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    padding-top: 20px;

    /* Paskutinis puslapio pikselis. Gulsciame telefone jis atsiremia i
       apvalintus ekrano kampus, todel prie 20 px pridedam saugia zona
       (veikia tik su viewport-fit=cover makete; kitur env() = 0). */
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}

.bs5-copy {
    margin: 0;
    font-size: 13px;
    color: #7C8FA0;
}

/* Dizaino autoryste. Ramesne uz autoriu teisiu eilute — ji cia svecias,
   ne antraste — bet nuoroda turi buti aiskiai paspaudziama. */
.bs5-credit {
    margin: 0;
    font-size: 12.5px;
    color: #6B7F90;
}

.bs5-credit a {
    color: #A9BAC8;
    text-decoration: none;
    border-bottom: 1px solid rgba(169, 186, 200, .35);
    transition: color var(--bs-fast), border-color var(--bs-fast);
}

.bs5-credit a:hover {
    color: var(--bs-brand-2);
    border-bottom-color: var(--bs-brand-2);
}

.bs5-copy a { color: #A9BAC8; }

/* --- siauresni ekranai --- */

@media (max-width: 1060px) {
    .bs5-top { grid-template-columns: 1fr 1fr; }
    .bs5-brand { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
    .bs5-top { grid-template-columns: 1fr; gap: 32px; }
    .bs5-news { flex-direction: column; align-items: stretch; }

    /* Stulpelyje flex-basis 360px virsta AUKSCIU: forma buvo 360 px
       aukscio su vienu lauku virsuje ir tuscia tamsia dykuma po juo. */
    .bs5-news__form { max-width: none; flex: none; }
    .bs5-bottom__inner { justify-content: center; text-align: center; }

    /* Kalnu siluetas porastes virsuje. Ta pati taisykle buvo ir 13
       skyriuje, tame paciame 640 px lange, tik su kita reiksme (170) —
       ir veike butent ANA, o si tyliai nieko nedare. Palikta ta, kuri
       veike; dublikatas pasalintas. */
    .bs5::before { height: 170px; }
}

/* ==========================================================================
   10. ALPIŲ ILIUSTRACIJOS
   Naudok pridedant klasę bet kuriai sekcijai.
   ========================================================================== */

.bs-alpine {
    position: relative;
    isolation: isolate;
    color: #fff;
}

.bs-alpine::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-size: cover;
    background-position: center;
}

/* --dawn ir --powder yra šviesios: tekstas ant jų rašomas rašalu.
   --night palikta viena tamsi — jai tekstas baltas. */
.bs-alpine--dawn::before   { background-image: url("../images/alps-day.svg"); }
.bs-alpine--powder::before { background-image: url("../images/alps-glacier.svg"); }
.bs-alpine--night::before  { background-image: url("../images/alps-dusk.svg"); }

.bs-alpine--dawn,
.bs-alpine--powder { color: var(--bs-ink); }

.bs-alpine--night { color: #fff; }

.bs-alpine--dawn .bs-h2,
.bs-alpine--powder .bs-h2 { color: var(--bs-ink); }

.bs-alpine--dawn .bs-lead,
.bs-alpine--powder .bs-lead { color: var(--bs-ink-2); }

.bs-alpine--night .bs-h2 { color: #fff; }
.bs-alpine--night .bs-lead { color: rgba(255, 255, 255, .82); }

/* Konfigūratoriaus puslapio juosta su kalnais */
.sc-page-hero {
    position: relative;
    border-radius: var(--bs-r-lg);
    overflow: hidden;
    padding: 56px 48px;
    margin-bottom: 36px;
    background: url("../images/alps-glacier.svg") center / cover no-repeat;
}

.sc-page-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .55) 58%, rgba(255, 255, 255, 0) 100%);
}

.sc-page-hero > * { position: relative; z-index: 1; }

/* thank-you.png Bagisto naudoja DVIEM priesingoms reiksmems: ir
   „aciu uz uzsakyma", ir „krepselis tuscias". Kiekvienam savas
   piesinys — zr. 24 skyriu. */

/* ==========================================================================
   11. JUDESYS IR MAŽI EKRANAI
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

@media (max-width: 1180px) {
    header [class*="min-h-[78px]"] {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    .sc-menu-link { margin-left: 10px; padding: 8px 15px; }
}

@media (max-width: 1024px) {
    header.sticky {
        background: rgba(255, 255, 255, .96) !important;
    }

    .sc-page-hero { padding: 34px 24px; }
}

@media (max-width: 640px) {
    .bs-h2 { font-size: 28px; }
    .sc-page-hero { padding: 26px 20px; border-radius: var(--bs-r); }
}

/* ==========================================================================
   12. PAGRINDINIO PUSLAPIO SEKCIJOS
   HTML gyvena administravime (Appearance > Themes > Sections), o visi
   stiliai — čia. Taip puslapis krauna vieną CSS failą, o tekstus gali
   keisti pats administravime.
   ========================================================================== */

.bs2 { --pad: clamp(56px, 7vw, 112px); }

.bs2-wrap {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 56px);
}

/* Spalva --bs-accent-d, o ne --bs-accent: 11 px retintomis didžiosiomis
   šviesesnis akcentas duoda 4,3:1, ir tekstui to neužtenka. Tas pats
   pasakyta prie .bs-eyebrow. */
.bs2-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--bs-accent-d);
}

.bs2-eyebrow::before {
    content: "";
    width: 26px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
}

.bs2-title {
    font-family: var(--bs-display);
    font-size: clamp(30px, 4vw, 56px);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -.035em;
    margin: 14px 0 0;
}

.bs2-sub {
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.6;
    color: var(--bs-ink-2);
    max-width: 56ch;
    margin: 18px 0 0;
}

/* --- 12.1 HERO --- */

/* Anksčiau hero buvo naktinis: tamsi iliustracija plius beveik nepermatoma
   juoda uždanga. Dabar atvirkščiai — šviesi rytinė iliustracija ir balta
   uždanga kairėje, ant kurios tekstas rašomas tamsiu rašalu. Puslapis
   prasideda šviesa, o ne juoduma, ir logotipas antraštėje nebeatrodo
   priklijuotas prie svetimo fono. */
.bs2-hero {
    position: relative;
    isolation: isolate;
    min-height: clamp(520px, 72vh, 760px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    background: var(--bs-ice);
}

.bs2-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -3;
    background: url("../images/alps-day.svg") center / cover no-repeat;
    filter: saturate(1.15);
    transform: scale(1.04);
    animation: bs2-drift 26s ease-in-out infinite alternate;
}

/* Vaizdo įrašo fonas.
   Guli VIRŠ iliustracijos, todėl jei failo nėra, jis neįsikrauna ar
   naršyklė jo negroja — apačioje lieka ta pati alpių iliustracija ir
   niekas nesugriūva. */
.bs2-hero__video {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
    pointer-events: none;
}

/* Telefonuose vaizdo įrašo nekraunam — brangus internetas ir baterija */
@media (max-width: 768px) {
    .bs2-hero__video { display: none; }
}

/* Gerbiam sistemos nustatymą „mažiau judesio“ */
@media (prefers-reduced-motion: reduce) {
    .bs2-hero__video { display: none; }
    .bs2-hero__bg { animation: none; }
}

@keyframes bs2-drift {
    from { transform: scale(1.04) translate3d(0, 0, 0); }
    to   { transform: scale(1.1) translate3d(-1.5%, -1%, 0); }
}

/* Balta uždanga. Ji dengia ir iliustraciją, ir vaizdo įrašą, todėl
   tekstas lieka įskaitomas nepriklausomai nuo to, kas guli fone. */
.bs2-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(92deg, rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, .89) 32%, rgba(255, 255, 255, .36) 66%, rgba(255, 255, 255, 0) 100%),
        linear-gradient(to top, rgba(255, 255, 255, .88) 0%, rgba(255, 255, 255, 0) 44%);
}

/* Tik VIRŠUS ir APAČIA.

   Šis elementas turi dvi klases: `bs2-wrap bs2-hero__inner`. Šonų tarpą
   duoda `.bs2-wrap` — `padding: 0 clamp(20px, 4vw, 56px)`. Anksčiau čia
   buvo trumpinys `padding: 72px 0 48px`, o trumpinys perrašo VISAS keturias
   puses: šonai tapdavo 0.

   Plačiame ekrane to nesimatė, nes `.bs2-wrap` yra `max-width: 1320px` su
   `margin: 0 auto` — likusi vieta pati atstodavo tarpą. Bet siauriau nei
   1320 px, t. y. VISUOSE telefonuose ir planšetėse, antraštė, tekstas ir
   abu mygtukai atsiremdavo į kairį ekrano kraštą.

   Todėl čia rašom tik `padding-top` ir `padding-bottom`. Šonai lieka vienoje
   vietoje — `.bs2-wrap` — ir puslapis turi vieną kairę briauną. */
.bs2-hero__inner {
    width: 100%;
    margin-top: auto;
    padding-top: clamp(72px, 10vw, 132px);
    padding-bottom: clamp(48px, 6vw, 76px);
}

.bs2-hero .bs2-eyebrow { color: var(--bs-accent-d); }

.bs2-hero__title {
    font-family: var(--bs-display);
    font-size: clamp(38px, 6vw, 82px);
    font-weight: 800;
    line-height: .98;
    letter-spacing: -.04em;
    color: var(--bs-ink);
    margin: 16px 0 0;
    max-width: 15ch;
    text-wrap: balance;
}

.bs2-hero__title em {
    font-style: normal;
    color: var(--bs-accent);
}

.bs2-hero__sub {
    color: var(--bs-ink-2);
    font-size: clamp(15px, 1.3vw, 19px);
    line-height: 1.6;
    max-width: 46ch;
    margin: 22px 0 0;
}

.bs2-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 34px;
}

.bs2-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 30px;
    border-radius: var(--bs-r-pill);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .01em;
    text-decoration: none;
    transition: transform var(--bs-fast), box-shadow var(--bs-fast), background-color var(--bs-fast), color var(--bs-fast);
}

.bs2-btn--primary {
    background: var(--bs-ink);
    color: #fff;
    box-shadow: 0 14px 32px -16px rgba(15, 31, 43, .55);
}

.bs2-btn--primary:hover {
    background: var(--bs-accent);
    transform: translateY(-2px);
    box-shadow: var(--bs-sh-brand);
}

.bs2-btn--ghost {
    border: 1.5px solid var(--bs-line-2);
    background: rgba(255, 255, 255, .74);
    color: var(--bs-ink);
    backdrop-filter: blur(8px);
}

.bs2-btn--ghost:hover {
    background: #fff;
    border-color: var(--bs-ink);
}

.bs2-btn--dark {
    background: var(--bs-ink);
    color: #fff;
    box-shadow: var(--bs-sh-2);
}

.bs2-btn--dark:hover {
    background: var(--bs-accent);
    transform: translateY(-2px);
}

/* Pasitikėjimo juosta hero apačioje */
.bs2-trust {
    position: relative;
    z-index: 1;
    width: 100%;
    margin-top: auto;
    border-top: 1px solid var(--bs-line);
    background: rgba(255, 255, 255, .84);
    backdrop-filter: blur(12px);
}

.bs2-trust__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
}

.bs2-trust__item {
    padding: 22px 26px;
    color: var(--bs-ink);
    border-left: 1px solid var(--bs-line);
}

.bs2-trust__item:first-child { border-left: 0; }

.bs2-trust__k {
    display: block;
    font-family: var(--bs-display);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.bs2-trust__v {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    color: var(--bs-ink-3);
}

/* --- 12.2 SEKCIJOS ANTRAŠTĖ --- */

.bs2-section { padding: var(--pad) 0; }

/* Sekcijų ritmas: balta — ledas — balta. Kai sekcijos eina viena po
   kitos su tuo pačiu fonu, tarp jų neatsiranda dvigubos briaunos.

   Sitos dvi eilutes buvo dviejose vietose (cia ir 13 skyriuje) su ta
   pacia reiksme — perrasius viena, antra butu tyliai grazinusi sena. */
.bs2-section--tint { background: var(--bs-ice); }
.bs2-section--tint + .bs2-section--tint { padding-top: 0; }

.bs2-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: clamp(32px, 4vw, 56px);
}

.bs2-head__link {
    flex: none;
    font-weight: 700;
    font-size: 14px;
    color: var(--bs-ink);
    text-decoration: none;
    border-bottom: 2px solid var(--bs-accent);
    padding-bottom: 3px;
    transition: color var(--bs-fast);
}

.bs2-head__link:hover { color: var(--bs-accent); }

/* --- 12.3 KATEGORIJŲ TINKLELIS --- */

.bs2-cats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.bs2-cat {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 320px;
    padding: 26px;
    border-radius: var(--bs-r-lg);
    overflow: hidden;
    text-decoration: none;
    color: var(--bs-ink);
    background: var(--bs-snow);
    border: 1px solid var(--bs-line);
    transition: transform var(--bs-slow), box-shadow var(--bs-slow), border-color var(--bs-slow);
}

.bs2-cat::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 62%;
    z-index: -2;
    background-size: cover;
    background-position: center 74%;
    filter: saturate(1.3) contrast(1.06);
    transition: transform var(--bs-slow);
}

/* Iliustracija lieka viršutinėje plytelės dalyje, o apačioje ją
   nuplauna baltas gradientas — pavadinimas rašomas tamsiu rašalu ant
   balto, ne baltu ant juodos uždangos. */
.bs2-cat::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top,
        #FFFFFF 0%,
        #FFFFFF 40%,
        rgba(255, 255, 255, .72) 50%,
        rgba(255, 255, 255, .12) 64%,
        rgba(255, 255, 255, 0) 78%);
}

.bs2-cat:hover {
    transform: translateY(-4px);
    border-color: var(--bs-brand);
    box-shadow: var(--bs-sh-3);
}

.bs2-cat:hover::before { transform: scale(1.07); }

.bs2-cat--1::before { background-image: url("../images/alps-day.svg"); }
.bs2-cat--2::before { background-image: url("../images/alps-glacier.svg"); }
.bs2-cat--3::before { background-image: url("../images/alps-day.svg"); transform: scaleX(-1); }
.bs2-cat--3:hover::before { transform: scaleX(-1) scale(1.07); }
.bs2-cat--4::before { background-image: url("../images/alps-glacier.svg"); transform: scaleX(-1); }
.bs2-cat--4:hover::before { transform: scaleX(-1) scale(1.07); }

.bs2-cat__name {
    font-family: var(--bs-display);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.bs2-cat__note {
    margin-top: 6px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--bs-ink-2);
}

.bs2-cat__go {
    margin-top: 16px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bs-accent);
}

.bs2-cat__go span { transition: transform var(--bs-fast); }
.bs2-cat:hover .bs2-cat__go span { transform: translateX(4px); }

/* --- 12.4 KONFIGŪRATORIAUS BLOKAS --- */

.bs2-set {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
    padding: clamp(36px, 5vw, 64px);
    border-radius: var(--bs-r-xl);
    background: linear-gradient(135deg, #EAF7FB 0%, #DDF0F7 54%, #CBE9F4 100%);
    border: 1px solid var(--bs-line);
    color: var(--bs-ink);
    overflow: hidden;
    position: relative;
}

.bs2-set::after {
    content: "";
    position: absolute;
    right: -8%;
    top: -30%;
    width: 46%;
    height: 160%;
    background: url("../images/alps-glacier.svg") center / cover no-repeat;
    opacity: .6;
    pointer-events: none;
}

.bs2-set > * { position: relative; z-index: 1; }

.bs2-set .bs2-eyebrow { color: var(--bs-accent-d); }
.bs2-set .bs2-title { color: var(--bs-ink); }
.bs2-set .bs2-sub { color: var(--bs-ink-2); }

.bs2-steps {
    display: grid;
    gap: 12px;
}

.bs2-step {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-radius: var(--bs-r);
    background: rgba(255, 255, 255, .82);
    border: 1px solid rgba(255, 255, 255, .9);
    box-shadow: var(--bs-sh-1);
    transition: background-color var(--bs-fast), transform var(--bs-fast), box-shadow var(--bs-fast);
}

.bs2-step:hover {
    background: #FFFFFF;
    box-shadow: var(--bs-sh-2);
    transform: translateX(4px);
}

.bs2-step__no {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--bs-ink);
    color: #FFFFFF;
    font-weight: 800;
    font-size: 14px;
}

.bs2-step__t { display: block; font-weight: 700; font-size: 15px; color: var(--bs-ink); }
.bs2-step__d { display: block; font-size: 13px; line-height: 1.45; color: var(--bs-ink-2); margin-top: 3px; }

.bs2-step--free .bs2-step__no { background: var(--bs-pine); color: #FFFFFF; }

/* --- 12.5 PRIVALUMAI --- */

.bs2-usp {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.bs2-usp__item {
    padding: 30px 26px;
    border-radius: var(--bs-r-lg);
    background: var(--bs-snow);
    border: 1px solid var(--bs-line);
    transition: transform var(--bs-fast), box-shadow var(--bs-fast), border-color var(--bs-fast);
}

.bs2-usp__item:hover {
    transform: translateY(-3px);
    box-shadow: var(--bs-sh-2);
    border-color: var(--bs-brand-3);
}

.bs2-usp__ico {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--bs-brand-3);
    color: var(--bs-accent);
    font-size: 21px;
    margin-bottom: 16px;
}

.bs2-usp__t {
    font-family: var(--bs-display);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.01em;
}

.bs2-usp__d {
    margin-top: 7px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--bs-ink-2);
}

/* --- 12.6 SERVISO JUOSTA --- */

.bs2-service {
    position: relative;
    isolation: isolate;
    border-radius: var(--bs-r-xl);
    overflow: hidden;
    padding: clamp(40px, 5vw, 72px);
    border: 1px solid var(--bs-line);
    color: var(--bs-ink);
}

.bs2-service::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: url("../images/alps-glacier.svg") center 78% / cover no-repeat;
    filter: saturate(1.35) contrast(1.05);
}

.bs2-service::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .86) 48%, rgba(255, 255, 255, .3) 100%);
}

.bs2-service__grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(28px, 4vw, 60px);
    align-items: center;
}

.bs2-service .bs2-title { color: var(--bs-ink); }
.bs2-service .bs2-sub { color: var(--bs-ink-2); }
.bs2-service .bs2-eyebrow { color: var(--bs-accent-d); }

.bs2-price-list { display: grid; gap: 10px; }

.bs2-price {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    padding: 15px 20px;
    border-radius: var(--bs-r);
    background: rgba(255, 255, 255, .9);
    border: 1px solid var(--bs-line);
    box-shadow: var(--bs-sh-1);
}

.bs2-price__n { font-weight: 600; font-size: 15px; color: var(--bs-ink); }
/* Kaina nelūžta („39 / €" dviem eilutemis telefone) — lūžta pavadinimas. */
.bs2-price__p { flex: none; white-space: nowrap; font-family: var(--bs-display); font-weight: 800; font-size: 18px; color: var(--bs-accent); }

/* --- 12.7 MAŽI EKRANAI --- */

@media (max-width: 1100px) {
    .bs2-cats { grid-template-columns: repeat(2, 1fr); }
    .bs2-usp  { grid-template-columns: repeat(2, 1fr); }
    .bs2-set,
    .bs2-service__grid { grid-template-columns: 1fr; }
    .bs2-trust__grid { grid-template-columns: repeat(2, 1fr); }
    .bs2-trust__item:nth-child(3) { border-left: 0; }
}

@media (max-width: 640px) {
    .bs2-cats { grid-template-columns: 1fr; }
    .bs2-usp  { grid-template-columns: 1fr; }
    .bs2-cat  { min-height: 230px; }
    .bs2-head { flex-direction: column; align-items: flex-start; gap: 16px; }
    .bs2-trust__grid { grid-template-columns: 1fr; }
    .bs2-trust__item { border-left: 0; border-top: 1px solid var(--bs-line); }
    .bs2-trust__item:first-child { border-top: 0; }
    .bs2-hero { min-height: 82vh; }
}


/* ==========================================================================
   13. ŠVIESOS SLUOKSNIS
   Bendra apdaila, kuri laiko visą parduotuvę vienoje šviesioje gamoje.
   Šis skyrius eina paskutinis, todėl jo taisyklės nugali ankstesnes.
   ========================================================================== */

/* --- 13.1 Puslapio pagrindas --- */

/* Bagisto vietomis prisiuva pilkšvus fonus, kurie prie sniego baltumo
   atrodo purvini. Sulyginam juos su savo ledu. */
.bg-gray-50,
.bg-gray-100,
.bg-slate-50,
.bg-zinc-50,
.bg-zinc-100 { background-color: var(--bs-ice) !important; }

main { background: var(--bs-snow); }

/* Švelnus ledo šešėlis po hero — perėjimas iš iliustracijos į turinį */
.bs2-hero + .bs2-section {
    background: linear-gradient(180deg, var(--bs-ice) 0%, var(--bs-snow) 160px);
}

/* Temos konteineriai patys pasirūpina savo dėže.
   Bagisto Tailwind šitą nustato visiems elementams, bet mūsų blokai
   gyvena ir tokiuose puslapiuose, kur to reseto gali nebūti — tada
   plotis 100% plius vidinis tarpas išstumia turinį už ekrano. */
.bs2,
.bs2-wrap,
.bs2-hero__inner,
.bs2-section,
.bs4-wrap,
.bs5-wrap,
.bs5-top,
.bs5-news,
.bs5-bottom__inner,
.sc-bar__inner,
.bs-wrap { box-sizing: border-box; }

/* --- 13.2 Slinkties juosta --- */

* {
    scrollbar-width: thin;
    scrollbar-color: var(--bs-line-2) transparent;
}

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb {
    background: var(--bs-line-2);
    border: 3px solid var(--bs-snow);
    border-radius: var(--bs-r-pill);
}

::-webkit-scrollbar-thumb:hover { background: var(--bs-ink-3); }

/* --- 13.3 Nuorodos ir tekstas --- */

a { color: inherit; }

.bs2-sub a,
.bs-lead a,
main p a:not([class]) {
    color: var(--bs-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
    transition: color var(--bs-fast);
}

.bs2-sub a:hover,
.bs-lead a:hover,
main p a:not([class]):hover { color: var(--bs-accent-d); }

/* --- 13.4 Ženkleliai ir kainos --- */

/* Ženkliukų spalvos — 6 skyriuje, prie .bs3-badge. */

/* Nuolaidos kaina visoje parduotuvėje — viena spalva */
.text-darkPink,
[class*="discount"] { color: var(--bs-sale) !important; }

/* --- 13.5 Formos --- */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select {
    border-radius: var(--bs-r-sm);
    border-color: var(--bs-line);
    background-color: var(--bs-snow);
    color: var(--bs-ink);
    transition: border-color var(--bs-fast), box-shadow var(--bs-fast);
}

main input[type="text"]:focus,
main input[type="email"]:focus,
main input[type="password"]:focus,
main input[type="search"]:focus,
main input[type="tel"]:focus,
main input[type="number"]:focus,
main textarea:focus,
main select:focus {
    border-color: var(--bs-brand) !important;
    box-shadow: 0 0 0 4px rgba(22, 184, 212, .16);
    outline: none;
}

/* --- 13.6 Pranešimai --- */

[role="alert"],
.alert {
    border-radius: var(--bs-r);
    border: 1px solid var(--bs-line);
    box-shadow: var(--bs-sh-1);
}

/* --- 13.6b Rodymas pagal ekrano ploti — SAVOS klases -----------------------

   Tailwind turi .hidden, .md:hidden, .max-lg:hidden ir t. t., ir is pradziu
   temos sablonuose naudojau butent jas. Tai buvo klaida, ir ji parodė save
   antrasteje: telefone matesi DU zmogeliukai.

   Priezastis. Tailwind .max-md\:hidden specifiskumas yra 0,1,0 — lygiai toks
   pat, kaip musu .bs6-tool. Kai specifiskumas vienodas, laimi tas, kuris
   faile YRA VELIAU, o musu tema kraunama PO Bagisto stiliu. Todel
   .bs6-tool { display: grid } nurungdavo .max-md\:hidden { display: none },
   ir abu paskyros mygtukai — planseCiu ir telefonu — likdavo matomi.

   Yra ir antra priezastis, del kurios Tailwind klasemis cia pasitiketi
   negalima. Bagisto tailwind.config.js „content" nurodo TIK savo pacio
   kataloga (packages/Webkul/Shop/src/Resources). Musu temos sablonu ten
   nera, todel Tailwind ju net neskaito: klase musu faile veikia tik tuo
   atveju, jei ta pacia klase kur nors naudoja ir pats Bagisto — o tai jau
   atsitiktinumas, kuris gali dingti su bet kuriuo atnaujinimu.

   (Pirma sio komentaro versija ta „content" eilute buvo idejusi tiesiogiai,
   su glob'u. Glob'e yra du zenklai, kurie kartu sudaro CSS komentaro
   PABAIGA — komentaras nutruko viduryje, o jo likutis tapo sugadintu
   selektoriumi ir prarijo visas keturias zemiau esancias taisykles.
   Naršykleje tai atrode lygiai taip pat, kaip ir klaida, kuria taisau:
   du zmogeliukai. Todel cia glob'o nera.)

   Todel matomuma valdom savo klasemis. Jos tik SLEPIA ir tik su !important,
   todel nurungia bet kuri musu pacių display.
   -------------------------------------------------------------------------- */

/* Tailwind lūziai: md = 768px, lg = 1024px */

@media (min-width: 768px)  { .bs-hide-from-md { display: none !important; } }
@media (max-width: 767px)  { .bs-hide-upto-md { display: none !important; } }
@media (min-width: 1024px) { .bs-hide-from-lg { display: none !important; } }
@media (max-width: 1023px) { .bs-hide-upto-lg { display: none !important; } }

/* --- 13.7 Paveikslėliai --- */

/* SAUGIKLIS.
   Sioje temoje tris kartus nudege tas pats dalykas: taisykle perrasydavo
   Bagisto paveikslelio isvaizda, bet DYDI palikdavo Tailwind klasei. Kai
   ta klase nepasiekdavo narsykles (senas kesas, neuzsikroves failas),
   paveikslelis issipusdavo iki natūralaus dydzio, isplesdavo puslapi, o
   telefonas nutolindavo visa makieta.

   Si viena eilute uzdaro visa ta klase klaidu — ir tas, kuriu dar
   nepastebejau. Bagisto Tailwind ta pati daro savo reset'e, todel
   veikianciame puslapyje tai nieko nekeicia; ji svarbi butent tada, kai
   kas nors neuzsikrove. */
img,
svg,
video { max-width: 100%; }

img { image-rendering: auto; }

/* Nuotraukos vieta, kol ji kraunasi — ledas, ne pilkuma */
.bs3-card__media,
.sc-card__img,
.sc-step__img { background: linear-gradient(160deg, #F6FBFC 0%, #E6F2F7 100%); }

/* --- 13.8 Spausdinimas --- */

@media print {
    header,
    .bs5,
    .sc-bar,
    .bs2-hero__video { display: none !important; }

    body { background: #fff; color: #000; }
}

/* ==========================================================================
   14. LIKUSI PARDUOTUVE
   Sablonais perrasyti tik antraste, porastė, pazadu juosta ir prekes
   kortelė — juose gyvena zenklas. Visa kita (katalogas, prekes puslapis,
   krepselis, apmokejimas, paskyra) lieka su Bagisto zymejimu, o siame
   skyriuje jam duodama musu isvaizda. Taip nereikia perrasyti 190 sablonu
   ir su kiekvienu Bagisto atnaujinimu ju taisyti.

   Turinys
     14.1  Antrastes iskleidziami meniu (naujos .bs4-* klases)
     14.2  Pedsakai (breadcrumbs)
     14.3  Katalogo puslapis
     14.4  Prekes puslapis
     14.5  Krepselis ir apmokejimas
     14.6  Paskyra
     14.7  Bendri elementai
   ========================================================================== */

/* --- 14.1 Antrastes iskleidziami meniu ------------------------------------ */

.bs4-drop {
    display: grid;
    gap: 6px;
    padding: 4px 0 14px;
}

.bs4-drop--tight { padding: 20px 20px 14px; }

.bs4-drop__title {
    font-family: var(--bs-display);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--bs-ink);
}

.bs4-drop__text {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--bs-ink-2);
}

.bs4-drop__actions {
    display: flex;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--bs-line);
}

.bs4-drop__actions .primary-button,
.bs4-drop__actions .secondary-button {
    flex: 1 1 0;
    padding: 11px 18px !important;
    font-size: 14px;
    text-align: center;
    white-space: nowrap;
}

.bs4-drop__link {
    display: inline-block;
    margin-top: 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--bs-accent);
}

.bs4-drop__link:hover { text-decoration: underline; }

.bs4-drop__menu {
    display: grid;
    padding: 8px 0;
    border-top: 1px solid var(--bs-line);
}

.bs4-drop__menu a {
    padding: 10px 20px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--bs-ink-2);
    transition: background-color var(--bs-fast), color var(--bs-fast);
}

.bs4-drop__menu a:hover {
    background: var(--bs-ice);
    color: var(--bs-ink);
}

/* Didysis kategoriju meniu */
.bs4-mega__title a {
    font-family: var(--bs-display);
    font-size: 14.5px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--bs-ink);
}

.bs4-mega__title a:hover { color: var(--bs-accent); }

.bs4-mega__list {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bs4-mega__list a {
    font-size: 13.5px;
    color: var(--bs-ink-2);
    transition: color var(--bs-fast);
}

.bs4-mega__list a:hover { color: var(--bs-accent); }

/* Sonininis kategoriju stalcius */
.bs4-drawer__title {
    font-family: var(--bs-display);
    font-size: 18px;
    font-weight: 800;
    color: var(--bs-ink);
}

.bs4-drawer__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 24px;
    cursor: pointer;
    transition: background-color var(--bs-fast);
}

.bs4-drawer__row:hover { background: var(--bs-ice); }

.bs4-drawer__lvl1 {
    font-size: 15px;
    font-weight: 700;
    color: var(--bs-ink);
}

.bs4-drawer__lvl2 {
    font-size: 14px;
    color: var(--bs-ink-2);
}

.bs4-drawer__lvl3 {
    display: block;
    padding: 10px 24px;
    font-size: 14px;
    color: var(--bs-ink-2);
}

.bs4-drawer__lvl3:hover { background: var(--bs-ice); color: var(--bs-ink); }

.bs4-drawer__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--bs-ink);
    background: none;
    border: 0;
    cursor: pointer;
}

/* --- 14.2 Pedsakai -------------------------------------------------------- */

main nav ol li,
main nav ol li a {
    font-size: 13.5px !important;
    color: var(--bs-ink-3) !important;
    transition: color var(--bs-fast);
}

main nav ol li a:hover { color: var(--bs-accent) !important; }

main nav ol li span[class*="icon-arrow"] {
    font-size: 15px !important;
    color: var(--bs-line-2);
}

/* Pedsakai telefone.

   Bagisto juos slepia iki 1024 px. Pirkejas i prekes puslapi daznai
   patenka is paieskos ar is Google — ne is kategorijos; be pedsaku jis
   nemato, kur yra, ir vienintelis kelias „auksciau" lieka narsykles
   „atgal", vedantis atgal i Google.

   Pats komponentas jau perrasytas (components/breadcrumbs), bet prekes
   puslapyje virs jo yra DAR VIENAS apvalkalas su max-lg:hidden — o del
   vienos klases kopijuoti 853 eiluciu faila neverta. Ji atidarom cia. */
@media (max-width: 1023px) {
    main div[class*="px-7"][class*="max-lg:hidden"]:has(nav) {
        display: flex !important;
    }
}

/* Ilgas kelias siaurame ekrane neturi nei laužtis, nei stumti puslapio —
   juosta slenkama horizontaliai. */
.bs-crumbs {
    max-width: 100%;
    overflow: hidden;
}

.bs-crumbs__track {
    max-width: 100%;
    overflow-x: auto;
    /* Slinkties juosta cia nereikalinga: kelias trumpas, o juosta po juo
       atrodytu kaip klaida. Slinkti vis tiek galima pirstu ir pele. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.bs-crumbs__track::-webkit-scrollbar { display: none; }

/* display:flex nurodomas CIA, o ne paliekamas Bagisto „flex" klasei.
   Kitaip, jei Tailwind sio elemento kada nors nepasiektu, ol grizta i
   numeruota saraso stulpeli — pedsakai virsta „1. Pradzia / 2. Snieglentes"
   vienas po kitu. Taip ir atrode, kai pirma karta si vieta issimatavau. */
.bs-crumbs nav ol {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    white-space: nowrap;
}

.bs-crumbs nav ol li {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* Paskutinis punktas (dabartinis puslapis) gali buti ilgas prekes
   pavadinimas. Jis gali trumpeti — visi kiti punktai svarbesni, nes i
   juos galima paspausti. */
.bs-crumbs nav ol li:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 1023px) {
    .bs-crumbs { margin-top: 14px !important; }
    .bs-crumbs nav ol li,
    .bs-crumbs nav ol li a { font-size: 12.5px !important; }
    .bs-crumbs nav ol li span[class*="icon-arrow"] { font-size: 13px !important; }
}

/* --- 14.3 Katalogo puslapis ----------------------------------------------- */

/* Puslapio antraste */
main h1,
main h2:not([class*="bs"]) {
    font-family: var(--bs-display);
    letter-spacing: -.025em;
    color: var(--bs-ink);
}

/* Bagisto karuseliu antrastes („Naujienos šį sezoną", „Panašios prekės")
   ir paieskos rezultatu antraste. Jos ateina su font-dmserif text-3xl
   arba font-medium text-2xl — 500 svorio, 24 px — ir pagrindiniame
   puslapyje guli salia musu 800 svorio sekciju antrasciu kaip is kito
   puslapio. Tas pats svoris ir tarpai, kiek mazesnis dydis: karusele yra
   sekcijos dalis, ne pati sekcija. text-3xl atskiria nuo prisijungimo
   kortelės antrastes (text-4xl, 22 skyrius). */
main h2[class*="font-dmserif"][class*="text-3xl"],
main h2[class*="break-all"][class*="text-2xl"] {
    font-family: var(--bs-display);
    font-size: clamp(24px, 2.4vw, 32px) !important;
    font-weight: 800 !important;
    line-height: 1.1;
    letter-spacing: -.025em;
    color: var(--bs-ink);
    text-wrap: balance;
}

/* Karuseles rodykles — apskritimai su linija, kaip visi kiti temos
   piktogramu mygtukai. display neliečiamas: Bagisto jas slepia iki lg
   per max-lg:hidden, o musu display ta slepima nurungtu (zr. 13.6b). */
main [class*="icon-arrow-left-stylish"],
main [class*="icon-arrow-right-stylish"] {
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    line-height: 38px !important;
    text-align: center;
    border: 1px solid var(--bs-line);
    border-radius: 50%;
    font-size: 16px !important;
    color: var(--bs-ink-2);
    transition: border-color var(--bs-fast), background-color var(--bs-fast), color var(--bs-fast);
}

main [class*="icon-arrow-left-stylish"]:hover,
main [class*="icon-arrow-right-stylish"]:hover {
    border-color: var(--bs-ink);
    background: var(--bs-ice);
    color: var(--bs-ink);
}

/* Filtru sonine juosta */
aside,
[class*="filter"] {
    font-family: var(--bs-body);
}

aside h3,
aside p[class*="font-semibold"],
[class*="filter"] h3 {
    font-family: var(--bs-display);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .01em;
    color: var(--bs-ink);
}

/* Filtru zymeklis */
[class*="filter"] label,
aside label {
    font-size: 14px;
    color: var(--bs-ink-2);
    cursor: pointer;
    transition: color var(--bs-fast);
}

[class*="filter"] label:hover,
aside label:hover { color: var(--bs-ink); }

/* Pasirinktu filtru zenkleliai */
[class*="filter"] [class*="rounded-full"][class*="border"] {
    border-radius: var(--bs-r-pill) !important;
    border-color: var(--bs-line-2) !important;
    background: var(--bs-ice) !important;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--bs-ink);
}

/* Rusiavimo juosta */
main select {
    border-radius: var(--bs-r-pill) !important;
    border: 1px solid var(--bs-line) !important;
    background-color: var(--bs-snow) !important;
    padding: 9px 34px 9px 16px !important;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--bs-ink);
}

/* Rusiavimo ir kiekio mygtukai.
   Bagisto juos piesia kaip pilkus staciakampius su 16 px tekstu, o ilgas
   lietuviskas pavadinimas („Brangiausios viršuje") lauzosi i dvi eilutes
   ir mygtukas isauga iki 78 px — vienintelis toks elementas visoje
   parduotuveje. Kabliukas is categories/toolbar.blade.php:
   rounded-lg + border-zinc-200 ant <button>. */
main button[class*="rounded-lg"][class*="border-zinc-200"] {
    box-sizing: border-box;
    height: 46px;
    max-width: none !important;
    padding: 0 16px 0 18px !important;
    gap: 10px !important;
    border-radius: var(--bs-r-pill) !important;
    border: 1px solid var(--bs-line) !important;
    background: var(--bs-snow) !important;
    font-size: 14px !important;
    font-weight: 600;
    color: var(--bs-ink);
    white-space: nowrap;
    transition: border-color var(--bs-fast), background-color var(--bs-fast);
}

main button[class*="rounded-lg"][class*="border-zinc-200"]:hover {
    border-color: var(--bs-line-2) !important;
    background: var(--bs-ice) !important;
}

main button[class*="rounded-lg"][class*="border-zinc-200"] [class*="icon-arrow"] {
    font-size: 18px !important;
    color: var(--bs-ink-3);
}

/* Filtru paieskos laukelis (v-filter-item).
   Jis guli .panel-side viduje — toje pacioje klaseje, kuria Bagisto duoda
   ir paskyros soninei juostai. 19.1 skyriaus pirkejo kortelės taisykle
   (rounded-xl + border-zinc-200) ji pagaudavo: laukelis tapdavo 62 px
   aukscio, su gradientu ir 20 px vidiniu tarpu, o paieskos piktograma
   uzguldavo teksta. 19.1 dabar taikosi tik i <div>, o laukelis cia. */
.panel-side input[class*="rounded-xl"][class*="border-zinc-200"] {
    box-sizing: border-box;
    height: 44px;
    padding: 0 14px 0 44px !important;
    border: 1px solid var(--bs-line) !important;
    border-radius: var(--bs-r-pill) !important;
    background: var(--bs-ice) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: var(--bs-ink) !important;
    transition: background-color var(--bs-fast), border-color var(--bs-fast);
}

.panel-side input[class*="rounded-xl"][class*="border-zinc-200"]:focus {
    background: #fff !important;
    border-color: var(--bs-accent) !important;
}

.panel-side .icon-search {
    top: 50% !important;
    left: 15px !important;
    transform: translateY(-50%);
    font-size: 18px !important;
    color: var(--bs-ink-3);
}

/* Tinklelio / saraso jungiklis */
main [class*="icon-grid"],
main [class*="icon-list"] {
    color: var(--bs-ink-3);
    transition: color var(--bs-fast);
}

main [class*="icon-grid"]:hover,
main [class*="icon-list"]:hover { color: var(--bs-ink); }

/* Puslapiavimas.
   Bagisto puslapiavimo mygtukams neduoda jokios klases su zodziu
   „pagination" — juos atpazistam pagal fiksuota auksti h-[37px]
   (partials/pagination.blade.php). */
main [class*="h-[37px]"] {
    border-color: var(--bs-line) !important;
    font-size: 14px;
    font-weight: 600;
    color: var(--bs-ink-2);
    transition: background-color var(--bs-fast), color var(--bs-fast);
}

main [class*="h-[37px]"]:hover {
    background: var(--bs-ice) !important;
    color: var(--bs-accent);
}

main [class*="h-[37px]"][class~="bg-gray-100"] {
    background: var(--bs-ink) !important;
    border-color: var(--bs-ink) !important;
    color: #fff !important;
}

/* --- 14.4 Prekes puslapis ------------------------------------------------- */

/* PASTABA APIE <v-...> ZYMAS.
   Vue 3, sumontavęs aplikacija, PAKEICIA <v-product-gallery> ir panasias
   zymas komponento turiniu — pacios zymos DOM'e nelieka. Todel taikytis
   i jas CSS negalima (veiktu tik ta sekundę, kol Vue neuzsikroves).
   Taikomes i klases, kurios yra komponento SABLONE. */

/* Didzioji prekes nuotrauka (products/view/gallery/desktop.blade.php) */
main [class*="min-w-[450px]"] {
    border-radius: var(--bs-r-lg) !important;
    background: linear-gradient(160deg, #F6FBFC 0%, #E6F2F7 100%);
}

/* Kaina */
main [class*="text-3xl"][class*="font-semibold"],
main .product-price,
main [class*="price"] > span:first-child {
    font-family: var(--bs-display);
    letter-spacing: -.02em;
    color: var(--bs-ink);
}


/* Kortelės su savybemis (dydis, kietumas ir pan.) */
main [class*="attribute"] table,
main table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-r);
    overflow: hidden;
}

main table th,
main table td {
    padding: 12px 16px;
    font-size: 14px;
    text-align: left;
    border-bottom: 1px solid var(--bs-line);
}

main table tr:last-child th,
main table tr:last-child td { border-bottom: 0; }

main table th {
    background: var(--bs-ice);
    font-weight: 700;
    color: var(--bs-ink);
}

main table td { color: var(--bs-ink-2); }

/* Kortelės (tabs) */
[role="tablist"] button,
[class*="tab"] [role="button"] {
    font-family: var(--bs-display);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--bs-ink-3);
    transition: color var(--bs-fast), border-color var(--bs-fast);
}

[role="tablist"] button[aria-selected="true"],
[role="tablist"] button.active {
    color: var(--bs-ink);
    border-bottom-color: var(--bs-accent) !important;
}

/* Atsiliepimai */
[class*="review"] [class*="rounded"][class*="border"] {
    border-radius: var(--bs-r-lg);
    border-color: var(--bs-line);
}

/* Zvaigzdutes */
.icon-star-fill,
[class*="icon-star"] { color: #F0A21F; }

/* --- 14.5 Krepselis ir apmokejimas ---------------------------------------- */

/* Eiluciu ir santraukos korteles */
main [class*="cart"] [class*="rounded"][class*="border"],
main [class*="checkout"] [class*="rounded"][class*="border"] {
    border-radius: var(--bs-r-lg);
    border-color: var(--bs-line);
    background: var(--bs-snow);
}

/* Sumu blokas krepselio santraukoje — Bagisto ji atskiria border-y */
main [class*="border-y"] {
    border-color: var(--bs-line) !important;
}

/* Pristatymo ir apmokejimo budo kortelė.
   Bagisto NENAUDOJA klasiu su zodziais „shipping" ar „payment" —
   metodo kortelė yra <label> su rounded-xl ir border-zinc-200
   (checkout/onepage/payment.blade.php). Taikomes i tai. */
main label[class*="rounded-xl"][class*="border-zinc-200"] {
    /* Remelio PLOTIS ir vidinis tarpas nurodomi cia, o ne paliekami
       Tailwind klasems — kitaip, joms nepasiekus narsykles, kortelė
       virsta plika teksto eilute. Ta pati taisykle kaip ir visur
       kitur sioje temoje (zr. README). */
    display: block;
    border-radius: var(--bs-r) !important;
    border: 1px solid var(--bs-line) !important;
    padding: 18px;
    transition: border-color var(--bs-fast), background-color var(--bs-fast), box-shadow var(--bs-fast);
}

main label[class*="rounded-xl"][class*="border-zinc-200"]:hover {
    border-color: var(--bs-line-2) !important;
    background: var(--bs-ice);
}

/* Pasirinkto budo zymeklis */
main .icon-radio-select,
main [class*="icon-radio-select"] { color: var(--bs-accent) !important; }

main input[type="radio"]:checked { accent-color: var(--bs-accent); }

/* Nuolaidos kodo ir kitos tekstines nuorodos krepselyje.
   Bagisto joms duoda text-blue-700 (checkout/coupon.blade.php,
   checkout/success.blade.php). */
/* „Pritaikyti kodą" ir „Pašalinti" krepšelyje: 16 px tekstinės nuorodos,
   kurios yra tikri veiksmai. Plotas auginamas VIDINIU TARPU, o ne
   display — dalis siu elementu turi Tailwind „hidden", ir bet koks musu
   display ta slepima nurungtu (zr. skyrių „Slėpimas pagal ekraną"
   README faile). Patikra sita ir pagavo. */
main .text-blue-700 {
    padding: 11px 0;
    color: var(--bs-accent) !important;
    font-weight: 600;
}

main .text-blue-700:hover { color: var(--bs-accent-d) !important; }

/* --- 14.6 Paskyra ---------------------------------------------------------
   Paskyros isvaizda gyvena 19 skyriuje — ten yra tikri kabliukai
   (.panel-side ir kt.). Cia liko tik pastaba apie uzsakymu sarasa.
   -------------------------------------------------------------------------- */

/* Uzsakymu sarasas paskyroje piesiamas Bagisto „datagrid" komponentu.
   Jis nera <table> — tai grid'ai su bendrinemis klasemis (row, grid,
   border-b), i kurias saugiai taikytis negalima: tie patys vardai
   naudojami ir kitur. Todel palikta Bagisto isvaizda, tik sulyginta
   spalvomis per bendrasias taisykles (linijos, sriftai). */

/* --- 14.7 Bendri elementai ------------------------------------------------ */

/* Kiekio keitiklis. Naudojamas TRIJOSE vietose — prekes puslapyje,
   krepselyje ir pageidavimu sarase — todel taisykle gyvena cia, bendroje
   dalyje, o ne prekes puslapio skyriuje.

   Bagisto klases (flex items-center border border-navyBlue) prakrenta ant
   komponento saknies, todel jos islieka ir po sumontavimo.

   Anksciau tas pats trijų taisykliu rinkinys buvo dar karta ir 16.2
   skyriuje. Vienodo specifiskumo dublikatas reiskia, kad pataisius viena
   vieta niekas nepasikeicia — velesnis tyliai grazina sena. Sujungta i
   viena; background is ano bloko perkeltas cia. */
main [class*="border-navyBlue"][class*="items-center"] {
    /* flex: none — BŪTINA.

       Kiekio keitiklis ir „Į krepšelį" guli vienoje flex eilutėje. Be šito
       keitiklis yra traukiamas flex elementas: mygtukas pasiima, kiek jam
       reikia, o keitikliui lieka likutis. Pamatuota — 107 px vietoj 128 px
       reikalingų, ir kartu su `overflow: hidden` nukirsdavo „+".
       Pirkėjas matydavo „− 1" ir neturėdavo kaip padidinti kiekio. */
    flex: none;

    /* 56 px, o ne Bagisto 74 px. Toks aukštis buvo iš `py-4` plius
       eilutės aukštis; ovalas išeidavo aukštesnis už mygtuką ir atrodė
       nerangus. 56 px sutampa su „Į krepšelį" ir su formų laukais. */
    box-sizing: border-box;
    height: 56px;
    gap: 2px !important;
    padding: 0 6px !important;
    border-radius: var(--bs-r-pill) !important;
    border-color: var(--bs-line-2) !important;
    background: var(--bs-snow);
    overflow: hidden;
}

/* Skaičius tarp mygtukų. Bagisto jam duoda w-2.5 (10 px), todėl ties 10+
   vienetų skaitmenys imdavo lipti vienas ant kito. */
main [class*="border-navyBlue"][class*="items-center"] > p {
    min-width: 30px;
    font-variant-numeric: tabular-nums;
}

/* Dydis nurodomas cia: „daugiau/maziau" yra du 24 px taikiniai vienas
   salia kito, o tarp ju — kiekio laukelis. Telefone tai reiskia, kad
   pirstas kas antra karta pataiko ne ten. */
main [class*="border-navyBlue"][class*="items-center"] span[role="button"] {
    display: grid;
    place-items: center;
    min-width: 40px;
    min-height: 40px;
    color: var(--bs-ink-2);
    transition: color var(--bs-fast);
}

main [class*="border-navyBlue"][class*="items-center"] span[role="button"]:hover {
    color: var(--bs-accent);
}

/* Modalas. Bagisto langelis atpazistamas pagal z-[999]
   (components/modal/index.blade.php). */
[class*="z-[999]"][class*="rounded-lg"] {
    border-radius: var(--bs-r-lg) !important;
    background: var(--bs-snow) !important;
    box-shadow: var(--bs-sh-4);
}

/* Pranesimai virsuje */
[class*="flash"] {
    border-radius: var(--bs-r-pill) !important;
    box-shadow: var(--bs-sh-3) !important;
    font-weight: 600;
}

/* Pakrovimo mirgejimas — ledo, ne pilkas */
.shimmer {
    background: linear-gradient(90deg, var(--bs-ice) 25%, var(--bs-ice-2) 37%, var(--bs-ice) 63%) !important;
    background-size: 400% 100% !important;
    border-radius: var(--bs-r-sm);
}

/* Tuscios busenos iliustracijos */
main img[src*="placeholder"],
main img[src*="empty"] {
    opacity: .8;
    filter: saturate(.65);
}

/* Nuoroda „praleisti i turini" — matoma tik klaviatura */
.skip-to-main-content-link {
    position: absolute;
    left: -9999px;
    z-index: 2000;
    padding: 12px 20px;
    border-radius: 0 0 var(--bs-r) 0;
    background: var(--bs-ink);
    color: #fff;
    font-weight: 700;
}

.skip-to-main-content-link:focus {
    left: 0;
    top: 0;
}

/* ==========================================================================
   15. ANTRASTE TELEFONE IR VIRSUTINE JUOSTA
   Sablonai perrasyti temoje:
     components/layouts/header/mobile/index.blade.php   (.bs6-*)
     components/layouts/header/desktop/top.blade.php    (.bs7-*)
     components/layouts/header/index.blade.php          (mirgejimas)
   ========================================================================== */

/* --- 15.1 Antraste telefone (.bs6) ---------------------------------------- */

/* Šonų tarpas toks pat, kaip `.bs2-wrap` ir `.bs4-wrap` — telefone 20 px.
   Anksčiau čia buvo 16 px (o po 640 px — 14 px), todėl paieškos laukas ir
   logotipas stovėdavo keliais taškais kairiau už viską, kas žemiau jų.
   Vertikalūs tarpai lieka savi: antraštė žemesnė už turinio sekcijas. */
.bs6 {
    display: grid;
    gap: 12px;
    padding: 12px clamp(20px, 4vw, 56px) 14px;
    background: var(--bs-snow);
}

.bs6-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.bs6-left {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.bs6-logo {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.bs6-logo img {
    height: 40px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    display: block;
}

.bs6-tools {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: none;
}

/* 44 px, ne 40. Tai apatine riba, kuria rekomenduoja ir WCAG 2.2
   (2.5.8 Target Size), ir abi telefonu gaires. Antrasteje siu mygtuku
   yra keturi is eiles, todel bet kuris netikslus paspaudimas pataiko i
   kaimyna — krepselio vietoj paskyros. */
.bs6-tool {
    position: relative;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: var(--bs-ink);
    cursor: pointer;
    transition: background-color var(--bs-fast);
}

/* Zr. paaiskinima ties .bs4-tool — kartu su isimtimi absoliuciai
   pozicionuotam iskleidziamam meniu. */
.bs6-tool > div:not([class*="absolute"]),
.bs6-tool > div > div:not([class*="absolute"]),
.bs6-tool > span.relative,
.bs6-tool > a { width: 100%; height: 100%; }

.bs6-tool:active { background: var(--bs-ice); }

/* Zr. paaiskinima ties .bs4-tool — telefone krepselio piktograma guli
   lygiai taip pat giliai, todel dydis nurodomas konkretus. */
.bs6-tool > span[class*="icon-"],
.bs6-tool span[class*="icon-"],
.bs6-tool.icon-hamburger {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    font-size: 22px;
    line-height: 1;
}

/* Krepselio skaitiklis — zr. paaiskinima ties .bs4-tool--cart */
.bs6-tool--cart span[class*="absolute"] {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    min-width: 17px;
    height: 17px;
    padding: 0 4px !important;
    display: grid;
    place-items: center;
    border-radius: var(--bs-r-pill) !important;
    background: var(--bs-warm) !important;
    color: #fff !important;
    font-weight: 700;
    font-size: 10.5px;
    line-height: 1 !important;
    box-shadow: 0 0 0 2px #fff;
}

.bs6-tool--cart span.relative { position: static; display: inline-flex; }

/* Paieska */
.bs6-search {
    position: relative;
    display: block;
    width: 100%;
}

.bs6-search input[name="query"] {
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    padding: 0 44px !important;
    border: 1px solid var(--bs-line) !important;
    border-radius: var(--bs-r-pill) !important;
    background: var(--bs-ice) !important;
    font-size: 15px !important;
    color: var(--bs-ink) !important;
}

.bs6-search input[name="query"]::placeholder { color: var(--bs-ink-3); }

.bs6-search input[name="query"]:focus {
    background: #fff !important;
    border-color: var(--bs-brand) !important;
    outline: none;
}

.bs6-search .icon-search {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    font-size: 19px;
    color: var(--bs-ink-3);
    pointer-events: none;
    z-index: 1;
}

.bs6-search .icon-camera {
    position: absolute;
    top: 50% !important;
    right: 14px !important;
    left: auto !important;
    transform: translateY(-50%);
    font-size: 19px;
    color: var(--bs-ink-3);
    z-index: 1;
}

/* --- 15.2 Stalcius telefone ----------------------------------------------- */

.bs6-user {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 14px;
    margin: 16px;
    padding: 14px;
    border-radius: var(--bs-r-lg);
    background: linear-gradient(135deg, var(--bs-ice) 0%, var(--bs-brand-3) 100%);
}

.bs6-user__pic {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
}

.bs6-user__login {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--bs-ink);
}

.bs6-user__name {
    font-family: var(--bs-display);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--bs-ink);
    word-break: break-word;
}

.bs6-user__mail {
    margin-top: 2px;
    font-size: 13.5px;
    color: var(--bs-ink-2);
    word-break: break-all;
}

.bs6 a,
.bs6-cats a,
.bs7 a:not(.bs7-offer a) { text-decoration: none; }

.bs6-cats { padding: 8px 0 20px; }

.bs6-cats__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 20px;
    cursor: pointer;
    transition: background-color var(--bs-fast);
}

.bs6-cats__row:active { background: var(--bs-ice); }

.bs6-cats__lvl1 {
    font-family: var(--bs-display);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--bs-ink);
}

.bs6-cats__lvl2 {
    font-size: 14.5px;
    color: var(--bs-ink-2);
}

.bs6-cats__lvl3 {
    display: block;
    padding: 11px 20px;
    font-size: 14.5px;
    color: var(--bs-ink-2);
}

.bs6-cats__head {
    padding: 14px 20px;
    border-bottom: 1px solid var(--bs-line);
}

.bs6-cats__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 15px;
    font-weight: 700;
    color: var(--bs-ink);
    cursor: pointer;
}

/* Valiutos ir kalbos jungiklis stalciaus apacioje */
.bs6-switch {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    justify-items: center;
    width: 100%;
    border-top: 1px solid var(--bs-line);
    background: var(--bs-snow);

    /* Saugi zona — juosta prilipdyta prie ekrano apacios, o telefonuose ten
       yra pagrindinis bruksnys. Be sios eilutes jungikliai atsiduria PO juo
       ir tampa nebepaspaudziami. Veikia tik su viewport-fit=cover makete. */
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.bs6-switch__btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 12px;
    font-size: 14.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bs-ink);
    cursor: pointer;
}

.bs6-switch__sep {
    width: 1px;
    height: 20px;
    background: var(--bs-line);
}

.bs6-switch__title {
    font-family: var(--bs-display);
    font-size: 17px;
    font-weight: 800;
    color: var(--bs-ink);
}

/* --- 15.3 Virsutine juosta (.bs7) ----------------------------------------- */

.bs7 {
    background: var(--bs-ink);
    color: #C6D6E1;
}

.bs7-wrap {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    min-height: 40px;
    padding: 0 clamp(20px, 4vw, 56px);
}

.bs7-side { justify-self: start; }
.bs7-side--end { justify-self: end; }

.bs7-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 0;
    font-size: 12.5px;
    font-weight: 600;
    color: #C6D6E1;
    cursor: pointer;
    transition: color var(--bs-fast);
}

.bs7-btn:hover { color: #fff; }

.bs7-btn span[class*="icon-arrow"] { font-size: 17px; }

.bs7-btn img {
    display: block;
    border-radius: 2px;
}

.bs7-offer {
    margin: 0;
    padding: 9px 0;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .01em;
    color: #E4EDF3;
    text-align: center;
}

.bs7-offer a {
    color: var(--bs-brand-2);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bs7-offer a:hover { color: #fff; }

/* Sarasas iskleidziamajame */
.bs7-list {
    display: grid;
    gap: 1px;
    padding: 6px 0;
    max-height: 500px;
    overflow: auto;
}

.bs7-list__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 18px;
    font-size: 14px;
    font-weight: 500;
    color: var(--bs-ink-2);
    cursor: pointer;
    transition: background-color var(--bs-fast), color var(--bs-fast);
}

.bs7-list__item:hover {
    background: var(--bs-ice);
    color: var(--bs-ink);
}

.bs7-list__item--on {
    background: var(--bs-brand-3);
    color: var(--bs-ink);
    font-weight: 700;
}

/* --- 15.4 Mirgejimas, kol Vue kraunasi ------------------------------------
   Dydziai sutampa su tikraisiais elementais, todel uzsikrovus antraste
   nesokteleja.
   -------------------------------------------------------------------------- */

.bs4-logo__skeleton {
    display: block;
    flex: none;
    width: 190px;
    height: 48px;
    border-radius: var(--bs-r-sm);
}

.bs4-search__skeleton {
    display: block;
    width: 100%;
    height: 46px;
    border-radius: var(--bs-r-pill);
}

.bs4-tool__skeleton {
    display: block;
    width: 44px;
    height: 44px;
    border-radius: 50%;
}

.bs6-logo__skeleton {
    display: block;
    width: 150px;
    height: 40px;
    border-radius: var(--bs-r-sm);
}

.bs6-tool__skeleton {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.bs6-search__skeleton {
    display: block;
    width: 100%;
    height: 44px;
    border-radius: var(--bs-r-pill);
}

.bs7-skeleton {
    display: block;
    width: 90px;
    height: 14px;
    border-radius: 4px;
    opacity: .18;
}

.bs7-skeleton--wide { width: 260px; }

/* Sablonas si bloka rodo tik nuo 1024px, taciau jei kada nors butu
   parodytas siauriau — skelbimas pasitraukia, o jungikliai lieka. */
@media (max-width: 900px) {
    .bs7-wrap { grid-template-columns: 1fr auto; gap: 12px; }
    .bs7-offer { display: none; }
}

@media (max-width: 640px) {
    /* Tik aukstis — sonus valdo viena vieta (zr. .bs6). */
    .bs6 { padding-top: 10px; padding-bottom: 12px; }
    .bs6-logo img { height: 36px; max-width: 150px; }
    .bs6-user { margin: 12px; }
}

/* ==========================================================================
   16. PREKES PUSLAPIS
   Sablono neperrasem samoningai: products/view.blade.php yra 853 eilutes,
   susipynusios su sesiais prekiu tipu isdestymais, Vue forma, modalu ir
   dvidesimt view_render_event kabliuku. Zymejimas ten geras — svetimai
   atrode tik isvaizda, o ja pakeiciam cia.

   Taikymosi vietos paimtos is tikro Bagisto zymejimo (perskaityta
   packages/Webkul/Shop/.../products/view.blade.php), todel selektoriai
   remiasi i tai, kas ten tikrai yra, o ne i speliones.
   ========================================================================== */

/* --- 16.1 Pavadinimas, ivertinimas, kaina --------------------------------- */

main h1[class*="break-words"] {
    font-family: var(--bs-display);
    font-size: clamp(26px, 3vw, 40px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.03em;
    color: var(--bs-ink);
    text-wrap: balance;
}

/* Pageidavimu mygtukas salia pavadinimo */
main [role="button"][class*="min-w-[46px]"] {
    border-color: var(--bs-line) !important;
    border-radius: 50% !important;
    color: var(--bs-ink-2);
    transition: border-color var(--bs-fast), color var(--bs-fast), background-color var(--bs-fast);
}

main [role="button"][class*="min-w-[46px]"]:hover {
    border-color: var(--bs-line-2) !important;
    background: var(--bs-ice);
    opacity: 1 !important;
}

/* Kaina */
main p[class*="mt-[22px]"] {
    font-family: var(--bs-display);
    font-size: clamp(24px, 2.4vw, 34px) !important;
    font-weight: 800 !important;
    letter-spacing: -.025em;
    color: var(--bs-ink);
}

main p[class*="mt-[22px]"] .line-through,
main p[class*="mt-[22px]"] s,
main p[class*="mt-[22px]"] del {
    margin-left: .4em;
    font-family: var(--bs-body);
    font-size: .58em;
    font-weight: 500;
    color: var(--bs-ink-3);
}

/* Trumpas aprasymas */
main p[class*="mt-6"][class*="text-zinc-500"] {
    font-size: 16px !important;
    line-height: 1.65;
    color: var(--bs-ink-2) !important;
}

/* --- 16.2 Kiekis ir pirkimo mygtukai -------------------------------------- */

/* Kiekio keitiklis — zr. 14.7 (jis naudojamas ne tik cia). */

/* Veiksmu eile.

   Bagisto „I krepseli" piesia kaip ANTRINI mygtuka (tuscia, su remeliu),
   o „Pirkti dabar" — kaip pagrindini. Snieglenciu parduotuvei tai
   atbula: pirkejas pirma renkasi lenta, apkaustus ir batus, ir tik
   paskui apmoka. Todel cia „I krepseli" tampa pilnu mygtuku, o
   „Pirkti dabar" — rysikiu kontūriniu. Sablonas nekeiciamas, tik
   isvaizda. */
main div[class*="max-w-[470px]"] .secondary-button {
    /* Vienodas 56 px aukštis su kiekio keitikliu. Bagisto padding'as duoda
       74 px, ir eilutėje du skirtingo aukščio ovalai atrodo kaip broke. */
    box-sizing: border-box;
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 0 32px !important;
    font-size: 15px;
    background: var(--bs-ink) !important;
    border-color: var(--bs-ink) !important;
    color: #fff !important;
    box-shadow: var(--bs-sh-1);
}

/* Eilutė su kiekiu ir mygtuku — sulygiuojam per vidurį. */
main div[class*="max-w-[470px]"] > div:has(.secondary-button) {
    align-items: center;
}

main div[class*="max-w-[470px]"] .secondary-button:hover:not(:disabled) {
    background: var(--bs-accent) !important;
    border-color: var(--bs-accent) !important;
}

main div[class*="max-w-[470px]"] .secondary-button:disabled {
    background: var(--bs-ice-2) !important;
    border-color: var(--bs-ice-2) !important;
    color: var(--bs-ink-3) !important;
    box-shadow: none;
}

main .primary-button[class*="mt-5"] {
    /* „Pirkti dabar" — tas pats 56 px, kaip ir virš jo esantis mygtukas. */
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 0 32px !important;
    font-size: 15px;
    background: transparent !important;
    border: 1.5px solid var(--bs-accent) !important;
    color: var(--bs-accent) !important;
    box-shadow: none;
}

main .primary-button[class*="mt-5"]:hover:not(:disabled) {
    background: var(--bs-accent) !important;
    color: #fff !important;
}

/* Palyginimo eile po mygtukais */
main div[class*="mt-10"][class*="gap-9"] [role="button"] {
    font-size: 14px;
    font-weight: 600;
    color: var(--bs-ink-2);
    transition: color var(--bs-fast);
}

main div[class*="mt-10"][class*="gap-9"] [role="button"]:hover {
    color: var(--bs-accent);
}

/* --- 16.3 Kortelės (tabs) ------------------------------------------------- */

/* Kortelių juosta. Bagisto ja daro pilka per visa ekrano ploti —
   atrodo kaip administravimo skydelis. Cia ji balta su plona linija. */
main div[class~="bg-zinc-100"][class*="justify-center"] {
    background: transparent !important;
    border-bottom: 1px solid var(--bs-line);
    gap: 4px !important;
}

/* Kortelės mygtukas. Bagisto jiems duoda id, kuris baigiasi „-button" —
   patogiausias ir stabiliausias kabliukas. */
main [role="button"][id$="-tab-button"] {
    padding: 16px 22px !important;
    font-family: var(--bs-display);
    font-size: 15px !important;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--bs-ink-3) !important;
    border-bottom: 2px solid transparent;
    transition: color var(--bs-fast), border-color var(--bs-fast);
}

main [role="button"][id$="-tab-button"]:hover { color: var(--bs-ink) !important; }

main [role="button"][id$="-tab-button"][class*="border-navyBlue"] {
    color: var(--bs-ink) !important;
    border-bottom-color: var(--bs-accent) !important;
}

/* --- 16.4 Aprasymas ir savybes -------------------------------------------- */

main [id="descritpion-tab"] p,
main [id="descritpion-tab"] div {
    font-size: 16px;
    line-height: 1.7;
    color: var(--bs-ink-2);
}

/* Aprasymo tipografija.

   Aprasyma rasoma administravimo redaktoriuje, todel jame buna antrasciu,
   sarasu ir lenteliu — kaip tik tokiu, kokiu snieglentes aprasymui ir
   reikia („kam tinka", „konstrukcija", „kietumas"). Bagisto is viso to
   nudazo tik dydi ir spalva: h3 lieka narsykles numatytojo dydzio,
   sarasai be tarpu, nuorodos melynos ir pabrauktos.

   Blogiau: kompiuterio versijoje Bagisto aprasyma deda i <p> ir tik
   viduje iSpausdina redaktoriaus HTML. Ideti <p> ar <ul> i <p> negalima —
   narsykle isorini <p> uzdaro is karto, ir visa, kas toliau, tampa jo
   BROLIU, o ne vaiku. Todel taisykles cia rasomos ne „p viduje", o visam
   kortelės turiniui: veikia abiem atvejais.

   Tie patys du kabliukai: kompiuteryje kortelė #descritpion-tab (rasybos
   klaida Bagisto, ne cia), telefone — akordeono turinio blokas. */
main [id="descritpion-tab"] h1,
main [id="descritpion-tab"] h2,
main [id="descritpion-tab"] h3,
main [id="descritpion-tab"] h4,
main div[class*="mb-5"][class*="text-zinc-500"][class*="max-1180:text-sm"] h1,
main div[class*="mb-5"][class*="text-zinc-500"][class*="max-1180:text-sm"] h2,
main div[class*="mb-5"][class*="text-zinc-500"][class*="max-1180:text-sm"] h3,
main div[class*="mb-5"][class*="text-zinc-500"][class*="max-1180:text-sm"] h4 {
    font-family: var(--bs-display);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.2;
    color: var(--bs-ink);
}

main [id="descritpion-tab"] h2,
main div[class*="mb-5"][class*="text-zinc-500"][class*="max-1180:text-sm"] h2 {
    font-size: 24px;
    margin: 32px 0 12px;
}

main [id="descritpion-tab"] h3,
main div[class*="mb-5"][class*="text-zinc-500"][class*="max-1180:text-sm"] h3 {
    font-size: 19px;
    margin: 26px 0 10px;
}

main [id="descritpion-tab"] h4,
main div[class*="mb-5"][class*="text-zinc-500"][class*="max-1180:text-sm"] h4 {
    font-size: 16.5px;
    margin: 22px 0 8px;
}

main [id="descritpion-tab"] ul,
main [id="descritpion-tab"] ol,
main div[class*="mb-5"][class*="text-zinc-500"][class*="max-1180:text-sm"] ul,
main div[class*="mb-5"][class*="text-zinc-500"][class*="max-1180:text-sm"] ol {
    margin: 0 0 18px;
    padding-inline-start: 22px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--bs-ink-2);
}

main [id="descritpion-tab"] ul,
main div[class*="mb-5"][class*="text-zinc-500"][class*="max-1180:text-sm"] ul {
    list-style: disc;
}

main [id="descritpion-tab"] ol,
main div[class*="mb-5"][class*="text-zinc-500"][class*="max-1180:text-sm"] ol {
    list-style: decimal;
}

main [id="descritpion-tab"] li,
main div[class*="mb-5"][class*="text-zinc-500"][class*="max-1180:text-sm"] li {
    margin-bottom: 7px;
}

main [id="descritpion-tab"] li::marker,
main div[class*="mb-5"][class*="text-zinc-500"][class*="max-1180:text-sm"] li::marker {
    color: var(--bs-brand);
}

main [id="descritpion-tab"] strong,
main [id="descritpion-tab"] b,
main div[class*="mb-5"][class*="text-zinc-500"][class*="max-1180:text-sm"] strong,
main div[class*="mb-5"][class*="text-zinc-500"][class*="max-1180:text-sm"] b {
    color: var(--bs-ink);
    font-weight: 700;
}

main [id="descritpion-tab"] a,
main div[class*="mb-5"][class*="text-zinc-500"][class*="max-1180:text-sm"] a {
    color: var(--bs-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Redaktoriaus lentele (dydziu tinklelis ir pan.). Placiam ekranui ji
   telpa, siauram — ne, todel leidziam jai slinkti savo viduje: kitaip
   ji isstumtu visa puslapi i sona. */
main [id="descritpion-tab"] table,
main div[class*="mb-5"][class*="text-zinc-500"][class*="max-1180:text-sm"] table {
    /* width: max-content, o ne 100% — kitaip trijų stulpeliu dydziu
       lentele issitemptu per visa placiaekrani puslapi ir jos remas
       kabotu tuscioje vietoje. Su max-content ji lieka tokio ploCio,
       kokio jai reikia, o siaurame ekrane slenka savo viduje. */
    display: block;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin: 0 0 20px;
    font-size: 15px;
}

main [id="descritpion-tab"] th,
main [id="descritpion-tab"] td,
main div[class*="mb-5"][class*="text-zinc-500"][class*="max-1180:text-sm"] th,
main div[class*="mb-5"][class*="text-zinc-500"][class*="max-1180:text-sm"] td {
    border: 1px solid var(--bs-line);
    padding: 9px 13px;
    text-align: start;
}

main [id="descritpion-tab"] th,
main div[class*="mb-5"][class*="text-zinc-500"][class*="max-1180:text-sm"] th {
    background: var(--bs-ice);
    color: var(--bs-ink);
    font-weight: 700;
}

/* Savybiu lentele (ilgis, plotis, kietumas...). Bagisto piesia ja kaip
   dviejų stulpeliu tinkleli be jokiu skirtuku — sunku skaityti. */
main div[class*="grid-cols-[auto_1fr]"][class*="max-w-max"] {
    /* Stulpelius nurodom patys, nors juos duoda ir Tailwind klase:
       perrasom gap, todel taisykle turi buti savarankiska — kitaip
       lentele sukristu i viena stulpeli, jei Tailwind kada nors
       nepasiektu sio elemento. */
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 !important;
    max-width: 640px !important;
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-r);
    overflow: hidden;
}

main div[class*="grid-cols-[auto_1fr]"][class*="max-w-max"] > div,
main div[class*="grid-cols-[auto_1fr]"][class*="max-w-max"] > a {
    padding: 12px 18px;
    border-bottom: 1px solid var(--bs-line);
}

/* Pirmas stulpelis — savybes pavadinimas */
main div[class*="grid-cols-[auto_1fr]"][class*="max-w-max"] > div:nth-child(odd) {
    background: var(--bs-ice);
    font-weight: 700;
}

main div[class*="grid-cols-[auto_1fr]"][class*="max-w-max"] > div:nth-child(odd) p {
    color: var(--bs-ink) !important;
    font-weight: 700;
}

main div[class*="grid-cols-[auto_1fr]"][class*="max-w-max"] > div:nth-child(even) p {
    color: var(--bs-ink-2) !important;
}

/* Paskutinė eile be linijos */
main div[class*="grid-cols-[auto_1fr]"][class*="max-w-max"] > div:nth-last-child(-n+2) {
    border-bottom: 0;
}

/* --- 16.5 Akordeonai telefone ---------------------------------------------
   bg-gray-100 Bagisto naudoja ir puslapiavime, ir duomenu lentelese, ir
   uzsakymu perziuroje. Akordeono antraste atskiriam pagal tai, kad ji
   VISADA paspaudziama (cursor-pointer prideda pats komponentas).
   -------------------------------------------------------------------------- */

main [class~="bg-gray-100"][class*="cursor-pointer"] {
    background: var(--bs-ice) !important;
    border-radius: var(--bs-r-sm);
}

main [class~="bg-gray-100"][class*="cursor-pointer"] p {
    font-family: var(--bs-display);
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--bs-ink);
}

/* --- 16.6 Galerija -------------------------------------------------------- */

/* Mazosios nuotraukos sone — jos turi fiksuota 100px ploti
   (products/view/gallery/desktop.blade.php). */
main [class*="min-w-[100px]"][class*="cursor-pointer"] {
    border-radius: var(--bs-r-sm) !important;
    border-color: var(--bs-line) !important;
    background: linear-gradient(160deg, #F6FBFC 0%, #E6F2F7 100%);
    transition: border-color var(--bs-fast);
}

main [class*="min-w-[100px]"][class*="cursor-pointer"]:hover {
    border-color: var(--bs-brand) !important;
}

/* Pasirinkta nuotrauka Bagisto zymi border-navyBlue */
main [class*="min-w-[100px]"][class*="border-navyBlue"] {
    border-color: var(--bs-accent) !important;
}

/* --- 16.7 Dydzio mygtukai (variantu pasirinkimas) -------------------------

   Prekei su dydziais Bagisto piesia arba <select> sarasa, arba eile
   mygtuku — priklauso nuo savybes `swatch_type`. Rinkomes mygtukus:
   sarase nematyti, kokie dydziai yra, kol jo neatidarai, o mygtukuose
   visi matomi is karto.

   Kabliukas — pats radijo mygtukas su vardu super_attribute[...], o ne
   Tailwind klases. Taip taisykle nepriklauso nuo to, kuria klasiu
   kombinacija Bagisto sugalvos rytoj, ir pataiko TIK i variantu
   pasirinkima (kitu radijo mygtuku tokiu vardu parduotuveje nera).

   Bagisto pazymeta reiksme dazo navy uzpildu su !important, todel cia
   reikia savo !important — pasirinkimas rodomas ne uzpildu, o storesniu
   remeliu, kaip tiekejo svetaineje.
   -------------------------------------------------------------------------- */

main label:has(input[name^="super_attribute"]) {
    box-sizing: border-box;
    min-width: 66px;
    min-height: 52px;
    padding: 10px 16px !important;
    border: 1.5px solid var(--bs-line-2) !important;
    border-radius: var(--bs-r-sm) !important;
    background: var(--bs-snow) !important;
    color: var(--bs-ink) !important;
    font-family: var(--bs-display);
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    transition: border-color var(--bs-fast), box-shadow var(--bs-fast), color var(--bs-fast);
}

main label:has(input[name^="super_attribute"]):hover {
    border-color: var(--bs-ink-3) !important;
}

/* Pasirinktas dydis */
main label:has(input[name^="super_attribute"]:checked) {
    border-color: var(--bs-ink) !important;
    box-shadow: inset 0 0 0 1px var(--bs-ink);
    background: var(--bs-snow) !important;
    color: var(--bs-ink) !important;
}

/* Klaviatura */
main label:has(input[name^="super_attribute"]:focus-visible) {
    outline: 2px solid var(--bs-accent);
    outline-offset: 2px;
}

/* Neturimas dydis — matomas, bet aiskiai negalimas. Pirkejui svarbu
   MATYTI, kad dydis egzistuoja, tik siuo metu jo nera. */
main label:has(input[name^="super_attribute"]:disabled) {
    border-color: var(--bs-line) !important;
    color: var(--bs-ink-3) !important;
    cursor: not-allowed;
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
}

/* Savybes pavadinimas virs mygtuku („Lentos ilgis") */
main h2:has(+ div label input[name^="super_attribute"]),
main [id*="configurable"] h2 {
    font-family: var(--bs-display);
    font-size: 15px !important;
    font-weight: 800;
    letter-spacing: .01em;
    color: var(--bs-ink);
    margin-bottom: 12px !important;
}

/* Mygtuku eile telefone gali nesutilpti i viena eilute */
main div:has(> label input[name^="super_attribute"]) {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Rodykles virs ir po mazuju nuotrauku stulpeliu.

   Bagisto jas palieka plikais 24 px zenklais — jos neatrodo paspaudziamos
   ir yra per mazas taikinys. Cia jos tampa tokiais paciais apskritais
   mygtukais, kaip prekiu karuseles rodykles (14.3), todel visos rodykles
   parduotuveje atrodo vienodai.

   Kabliukas — max-w-[100px]: si klase yra tik ant stulpelio APVALKALO,
   o mazosios nuotraukos jos neturi (jos turi max-h-[100px]). */
main [class*="max-w-[100px]"] > span[class*="icon-arrow"] {
    box-sizing: border-box;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin: 0 auto;
    border: 1px solid var(--bs-line);
    border-radius: 50%;
    font-size: 16px !important;
    color: var(--bs-ink-2);
    background: var(--bs-snow);
    transition: border-color var(--bs-fast), background-color var(--bs-fast), color var(--bs-fast);
}

main [class*="max-w-[100px]"] > span[class*="icon-arrow"]:hover {
    border-color: var(--bs-ink);
    background: var(--bs-ice);
    color: var(--bs-ink);
}

/* ==========================================================================
   17. KREPSELIS IR APMOKEJIMAS
   Bagisto krepselyje santrauka yra tiesiog stulpelis be jokio remelio —
   ji nesiskiria nuo prekiu saraso, o „Apmoketi" mygtukas pasimeta. Cia
   ji tampa kortele, kaip ir visur kitur temoje.

   Kabliukai paimti is tikro zymejimo (checkout/cart/index.blade.php ir
   summary.blade.php), o ne is speliojimu:
     w-[418px]      santraukos stulpelis
     rounded-[54px] kiekio keitiklis krepselyje
     h-[110px]      prekes nuotrauka eiluteje
   ========================================================================== */

/* --- 17.1 Santraukos kortelė ---------------------------------------------- */

main [class*="w-[418px]"] {
    box-sizing: border-box;
    padding: 26px 24px;
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-r-lg);
    background: var(--bs-ice);
    position: sticky;

    /* 156 px, o ne 96.

       Kai krepselis buvo be antrastes, 96 px uzteko. Dabar krepselis turi
       tokia pat lipnia antraste, kaip visa parduotuve (dvi eiles: 88 px
       juosta plius 52 px navigacija), todel santrauka su senu tarpu
       slystu PO ja ir „Pereiti prie apmokejimo" dingtu uz antrastes.
       156 = 140 antraste + 16 oro. */
    top: 156px;
}

/* Antraste „Krepselio santrauka" */
main [class*="w-[418px]"] p[class*="text-2xl"] {
    font-family: var(--bs-display);
    font-size: 20px !important;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--bs-ink);
}

/* Sumu eilutes */
main [class*="w-[418px]"] [class*="border-y"] {
    border-color: var(--bs-line-2) !important;
}

main [class*="w-[418px]"] p {
    color: var(--bs-ink-2);
}

/* Bendra suma — ji turi buti akivaizdziai stambiausia */
main [class*="w-[418px]"] [class*="font-semibold"] {
    font-family: var(--bs-display);
    font-weight: 800 !important;
    letter-spacing: -.02em;
    color: var(--bs-ink) !important;
}

/* Mygtukas „Apmoketi" — per visa kortelės ploti */
main [class*="w-[418px]"] .primary-button {
    width: 100%;
    place-self: stretch !important;
    border-radius: var(--bs-r-pill) !important;
    padding: 15px 24px !important;
    font-size: 15px;
    font-weight: 700;
}

/* --- 17.2 Prekiu eilutes -------------------------------------------------- */

/* Nuotrauka.
   Dydi nurodom PATYS, nors ji duoda ir Tailwind klases
   (h-[110px] max-w-[110px] / max-md:h-20). Sioje temoje jau du kartus
   nudege tas pats dalykas: kai taisykle remiasi i svetima klase, o ta
   klase nepasiekia narsykles, paveikslelis issipucia iki natūralaus
   dydzio ir sugriauna puslapi. Telefono dydis atitinka Bagisto h-20. */
main [class*="h-[110px]"] {
    width: 110px;
    height: 110px;
    border-radius: var(--bs-r) !important;
    border: 1px solid var(--bs-line);
    background: linear-gradient(160deg, #F6FBFC 0%, #E6F2F7 100%);
    object-fit: contain;
    padding: 6px;
}

@media (max-width: 767px) {
    main [class*="h-[110px]"] { width: 80px; height: 80px; }
}

/* Skirtukas tarp prekiu */
main [class*="border-zinc-200"][class*="pb-5"] {
    border-color: var(--bs-line) !important;
    padding-bottom: 22px !important;
}

/* Kiekio keitiklis krepselyje (Bagisto jam duoda rounded-[54px]) */
main [class*="rounded-[54px]"] {
    border-radius: var(--bs-r-pill) !important;
    border-color: var(--bs-line-2) !important;
    background: var(--bs-snow);
}

/* Zr. 14.7 — krepselyje tie patys 24 px taikiniai, tik kitas Bagisto
   kabliukas. Cia jie svarbesni: klaidingas paspaudimas keicia UZSAKYMO
   kieki, o ne tik naršymą. */
main [class*="rounded-[54px]"] span[role="button"],
main [class*="rounded-[54px]"] button {
    display: grid;
    place-items: center;
    min-width: 40px;
    min-height: 40px;
    color: var(--bs-ink-2);
    transition: color var(--bs-fast);
}

main [class*="rounded-[54px]"] span[role="button"]:hover,
main [class*="rounded-[54px]"] button:hover { color: var(--bs-accent); }

/* --- 17.3 Siauri ekranai -------------------------------------------------- */

@media (max-width: 1024px) {
    main [class*="w-[418px]"] {
        position: static;
        padding: 20px 18px;
    }
}

/* ==========================================================================
   18. APMOKEJIMO EIGA (checkout/onepage)
   Sis puslapis maketa kviecia su :has-header="false" — jis turi SAVO
   supaprastinta antraste su logotipu. Todel cia jam reikia atskiro
   demesio: kitaip logotipas lieka Bagisto 131x29 dydzio ir nesutampa su
   visa likusia parduotuve.

   Kabliukai is checkout/onepage/index.blade.php:
     min-h-[30px]      logotipo nuoroda antrasteje
     #steps-container  zingsniu stulpelis (id — stabiliausias kabliukas)
     w-[442px]         santraukos stulpelis
   ========================================================================== */

/* --- 18.1 Supaprastinta antraste ------------------------------------------ */

main [class*="min-h-[30px]"] {
    min-height: 0 !important;
    display: inline-flex;
    align-items: center;
}

/* Dydis nurodomas cia, o ne paliekamas width/height atributams —
   kitaip apmokejimo puslapyje logotipas butu perpus mazesnis nei visur
   kitur parduotuveje. */
main [class*="min-h-[30px]"] img {
    height: 44px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    display: block;
}

/* Antrastes juosta.

   Bagisto cia turejo tik pilka apatini bruksni. Juosta paliekama SVIESI —
   tokia pati kaip visos parduotuves antraste. Buvo pagunda ja padaryti
   tamsia „del rimtumo", bet logotipas i puslapi ateina is parduotuves
   nustatymu (kanalo ikeltas failas), ir jo spalvu is cia nezinom. Tamsi
   juosta reikalautu logotipa isversti i balta (filter: invert), o jei jis
   tamsiai melynas su turkiu — is jo liktu bespalve dėmė. Sviesi juosta
   veikia su bet kokiu logotipu.

   Virsuje — plona zenklo spalvos linija: tiek akcento, kiek galima duoti
   nieko nerizikuojant. */
.bs-co__bar {
    background: var(--bs-snow);
    border-bottom: 1px solid var(--bs-line);
    box-shadow: var(--bs-sh-1);
}

.bs-co__bar::before {
    content: "";
    display: block;
    height: 3px;
    background: linear-gradient(90deg, var(--bs-brand), var(--bs-accent));
}

.bs-co__bar-inner {
    box-sizing: border-box;
    max-width: 1440px;
    margin: 0 auto;
    padding: 14px 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.bs-co__bar-side {
    display: flex;
    align-items: center;
    gap: 22px;
}

/* Kelias atgal i krepseli */
.bs-co__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--bs-ink-2);
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s ease;
}

.bs-co__back:hover {
    color: var(--bs-accent);
}

.bs-co__back .icon-arrow-left,
.bs-co__back .icon-arrow-right {
    font-size: 18px;
    line-height: 1;
}

/* Prisijungimo nuoroda cia ateina is Bagisto (checkout/login) su
   text-blue-700 — vienintele melyna visoje parduotuveje. */
.bs-co__bar-side [class*="text-blue-700"] {
    color: var(--bs-accent) !important;
    font-weight: 600;
}

@media (max-width: 1024px) {
    .bs-co__bar-inner { padding: 12px 32px; }
}

@media (max-width: 640px) {
    .bs-co__bar-inner { padding: 10px 16px; gap: 12px; }
    .bs-co__bar-side  { gap: 14px; }
    .bs-co__back      { font-size: 13px; }

    /* Buvo pagunda telefone palikti tik rodykle be zodzio „Krepselis".
       Netiko: nuoroda be teksto lieka ir be pavadinimo — ekrano
       skaitytuvas ja perskaito kaip tuscia, o matantis zmogus salia
       „Prisijungti" mato bevarde rodykle ir nezino, kur ji veda.
       Vietoj to susiaurinam logotipa: jis vienintelis cia turi ka
       atiduoti. */
    .bs-co__logo      { min-width: 0; }
    main [class*="min-h-[30px]"] img { height: 34px; max-width: 150px; }
}

/* --- 18.1b Zingsniu juosta -------------------------------------------------

   Juosta pieSiama is `currentStep`, todel ji negali rodyti ko nors kito,
   nei is tikruju atidaryta. Tris busenos:

     --done     jau praeitas  — uzpildytas zenklas, jungiamoji linija
     --current  atidarytas    — zenklas su ziedu, tamsus tekstas
     --next     dar laukia    — tik kontūras, blankus tekstas
   -------------------------------------------------------------------------- */

.bs-co__steps {
    list-style: none;
    /* Virsutinis tarpas cia, o ne konteineryje: pedsakai (breadcrumbs)
       ijungiami nustatymuose, todel virs juostos kartais kas nors yra, o
       kartais nera. Tarpas pacioje juostoje veikia abiem atvejais. */
    margin: 28px 0 6px;
    padding: 0;
    display: flex;
    align-items: flex-start;
    gap: 0;
}

.bs-co__step {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

/* Jungiamoji linija — piesiama i KAIRE nuo zenklo, todel pirmas
   zingsnis jos neturi ir juosta neprasideda kabancia atkarpa. */
.bs-co__step::before {
    content: "";
    position: absolute;
    top: 15px;
    right: 50%;
    left: -50%;
    height: 2px;
    background: var(--bs-line);
}

.bs-co__step:first-child::before {
    display: none;
}

.bs-co__step--done::before,
.bs-co__step--current::before {
    background: var(--bs-brand);
}

.bs-co__step-dot {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid var(--bs-line);
    background: #fff;
    font-family: var(--bs-display);
    font-size: 14px;
    font-weight: 800;
    color: var(--bs-muted);
}

.bs-co__step-label {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--bs-muted);
    overflow-wrap: anywhere;
}

.bs-co__step--done .bs-co__step-dot {
    border-color: var(--bs-brand);
    background: var(--bs-brand);
    color: var(--bs-ink);
}

.bs-co__step--current .bs-co__step-dot {
    border-color: var(--bs-accent);
    background: var(--bs-accent);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(11, 127, 152, .16);
}

.bs-co__step--done .bs-co__step-label {
    color: var(--bs-ink);
}

.bs-co__step--current .bs-co__step-label {
    color: var(--bs-ink);
    font-weight: 800;
}

@media (max-width: 640px) {
    .bs-co__steps        { margin-top: 20px; }
    .bs-co__step-dot     { width: 28px; height: 28px; font-size: 13px; }
    .bs-co__step::before { top: 13px; }
    .bs-co__step-label   { font-size: 11px; }
}

/* --- 18.2 Zingsniai -------------------------------------------------------- */

#steps-container {
    display: grid;
    gap: 18px;
    overflow: visible !important;
}

/* Zingsnio antraste */
#steps-container [class*="text-2xl"] {
    font-family: var(--bs-display);
    letter-spacing: -.02em;
    color: var(--bs-ink);
}

/* Pristatymo budo kaina kortelėje */
#steps-container [class*="text-2xl"][class*="font-semibold"] {
    font-size: 20px !important;
    font-weight: 800 !important;
}

/* Pristatymo budo piktograma — Bagisto ja piesia 60px navy spalva */
.icon-flate-rate,
[class*="icon-flate-rate"] {
    color: var(--bs-accent) !important;
}

/* --- 18.3 Santraukos kortelė ---------------------------------------------- */

main [class*="w-[442px]"] > [class*="block"]:first-child {
    box-sizing: border-box;
    padding: 24px 22px;
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-r-lg);
    background: var(--bs-ice);
}

main [class*="w-[442px]"] [class*="border-y"] {
    border-color: var(--bs-line-2) !important;
}

main [class*="w-[442px]"] [class*="font-semibold"] {
    font-family: var(--bs-display);
    font-weight: 800 !important;
    letter-spacing: -.02em;
    color: var(--bs-ink);
}

/* Prekiu eilutes santraukoje */
main [class*="w-[442px]"] [class*="pb-5"] {
    border-bottom: 1px solid var(--bs-line);
    margin-bottom: 14px;
}

/* --- 18.4 Mygtukas „Pateikti uzsakyma" ------------------------------------ */

main .primary-button[class*="rounded-2xl"] {
    width: 100%;
    border-radius: var(--bs-r-pill) !important;
    padding: 16px 28px !important;
    font-size: 15px;
    font-weight: 700;
    box-shadow: var(--bs-sh-2);
}

main .primary-button[class*="rounded-2xl"]:hover:not(:disabled) {
    box-shadow: var(--bs-sh-brand);
}

/* Mygtuko juosta po santrauka — per visa kortelės ploti */
main [class*="w-[442px]"] [class*="justify-end"] {
    justify-content: stretch !important;
    margin-top: 16px;
}

/* --- 18.5 Siauri ekranai --------------------------------------------------- */

@media (max-width: 1024px) {
    main [class*="w-[442px]"] { position: static !important; }
    main [class*="min-h-[30px]"] img { height: 38px; }
}

/* ==========================================================================
   19. PASKYRA
   Bagisto sonine paskyros juosta yra remelis su pilku uzvedimu ir
   punktais be jokio ritmo — atrodo kaip administravimo skydelis, ne kaip
   parduotuves dalis.

   Kabliukai geri: sablonas turi TIKRAS klases, ne tik Tailwind
   (components/layouts/account/navigation.blade.php):
     .panel-side     sonine juosta
     h-[60px]        pirkejo nuotrauka
     font-mediums    pirkejo vardas (taip, su „s" gale — Bagisto rasybos
                     klaida, bet ji sablone yra, todel ja ir naudojam)
   ========================================================================== */

/* --- 19.1 Sonine juosta --------------------------------------------------- */

.panel-side {
    box-sizing: border-box;
    gap: 20px !important;
}

/* Pirkejo kortelė virsuje.
   Butent div — ne bet kas. .panel-side klase Bagisto duoda IR katalogo
   filtru juostai, o joje tas pacias klases turi paieskos <input>; be
   „div" si taisykle perdazydavo ir ji (zr. 14.3). */
.panel-side div[class*="rounded-xl"][class*="border-zinc-200"] {
    border-radius: var(--bs-r-lg) !important;
    border: 1px solid var(--bs-line) !important;
    background: linear-gradient(135deg, var(--bs-ice) 0%, var(--bs-brand-3) 100%);
    padding: 20px !important;
}

.panel-side [class*="h-[60px]"] {
    width: 60px;
    height: 60px;
    border-radius: 50% !important;
    object-fit: cover;
    background: var(--bs-snow);
}

/* Pirkejo vardas ir pastas */
.panel-side [class*="font-mediums"] {
    font-family: var(--bs-display);
    font-size: 20px !important;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--bs-ink);
}

.panel-side [class*="text-zinc-500"] {
    color: var(--bs-ink-2) !important;
}

/* --- 19.2 Meniu ----------------------------------------------------------- */

/* Meniu remelis */
.panel-side [class*="rounded-md"][class*="border-zinc-200"] {
    border-radius: var(--bs-r-lg) !important;
    border: 1px solid var(--bs-line) !important;
    overflow: hidden;
    background: var(--bs-snow);
}

/* Punktas */
.panel-side [class*="border-t"][class*="border-zinc-200"] {
    border-color: var(--bs-line) !important;
    padding: 14px 20px !important;
    transition: background-color var(--bs-fast), color var(--bs-fast);
}

.panel-side [class*="border-t"][class*="border-zinc-200"]:hover {
    background: var(--bs-ice) !important;
}

/* Aktyvus punktas — Bagisto ji zymi bg-zinc-100.

   ~= , NE *= . Ir tai ne smulkmena, o ISTAISYTA KLAIDA.

   [class*="bg-zinc-100"] yra PORASTES tipo palyginimas: jis pataiko i bet
   kuria klase, kurios VIDUJE yra sie zenklai — taip pat ir i Tailwind
   varianta `hover:bg-zinc-100`. O ta klase Bagisto uzdeda KIEKVIENAM
   paskyros meniu punktui. Rezultatas: visi astuoni punktai atrodydavo
   aktyvūs — melynas fonas ir turkio bruksnys ant visu, ir pirkejas
   nebematydavo, kuriame puslapyje yra.

   [class~="bg-zinc-100"] lygina VISA klases varda tarp tarpu, todel
   `hary:bg-zinc-100` jam nebe tas pats, kas `bg-zinc-100`.

   Tokia pati rizika yra visur, kur taikomasi i busenos klase per *=.
   Nuo siol tai tikrina tools/tema-patikra.php (8-as tikrinimas). */
/* Aktyvus punktas. Brūkšnio kairėje čia nebėra: kai klaida su `*=` buvo
   ištaisyta, pažymėtas liko vienas punktas, ir jam pakanka fono — brūkšnys
   tik kartojo tą patį antrą kartą. Skirtumą stiprina tekstas žemiau. */
.panel-side [class~="bg-zinc-100"] {
    background: var(--bs-brand-3) !important;
}

.panel-side [class~="bg-zinc-100"] [class*="text-lg"] {
    color: var(--bs-ink) !important;
    font-weight: 700;
}

/* Punkto tekstas ir piktograma */
.panel-side [class*="text-lg"][class*="font-medium"] {
    font-size: 15px !important;
    font-weight: 600;
    color: var(--bs-ink-2);
}

.panel-side [class~="bg-zinc-100"] [class*="font-medium"] {
    color: var(--bs-ink) !important;
    font-weight: 700;
}

.panel-side [class*="text-2xl"][class*="icon-"] {
    font-size: 20px !important;
    color: var(--bs-ink-3);
}

.panel-side [class~="bg-zinc-100"] [class*="icon-"] {
    color: var(--bs-accent) !important;
}

/* Rodykle punkto desineje. Bagisto ja piesia 24 px rasalu — tokia pati
   svarbia, kaip ir pats punktas. Ji tik nuoroda, kad punktas veda toliau. */
.panel-side [class*="border-t"][class*="border-zinc-200"] [class*="icon-arrow-right"],
.panel-side [class*="border-t"][class*="border-zinc-200"] [class*="icon-arrow-left"] {
    font-size: 17px !important;
    color: var(--bs-line-2);
    transition: color var(--bs-fast), transform var(--bs-fast);
}

.panel-side [class*="border-t"][class*="border-zinc-200"]:hover [class*="icon-arrow-right"] {
    color: var(--bs-accent);
    transform: translateX(2px);
}

.panel-side [class~="bg-zinc-100"] [class*="icon-arrow-right"] {
    color: var(--bs-accent) !important;
}

/* Skilties antraste virs meniu */
.panel-side [class*="text-xl"][class*="font-medium"] {
    font-family: var(--bs-display);
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--bs-ink);
}

/* --- 19.2b Paskyros turinys ------------------------------------------------

   Duomenu eilutes („Vardas — Robert"). Bagisto abiem stulpeliams duoda ta
   pati dydi ir svori (text-sm font-medium), o skiriasi tik spalva — ir dar
   atbulai: pavadinimas tamsus, o REIKSME pilka. Skaitant lentele akis
   pirmiausia turi rasti reiksme, o ne pasikartojanti pavadinima.
   -------------------------------------------------------------------------- */

main [class*="grid-cols-[2fr_3fr]"] {
    align-items: baseline;
    border-color: var(--bs-line) !important;
    padding: 14px 8px !important;
}

/* Pavadinimas — antraeilis */
main [class*="grid-cols-[2fr_3fr]"] > p:first-child {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--bs-ink-3) !important;
}

/* Reiksme — pagrindine */
main [class*="grid-cols-[2fr_3fr]"] > p:last-child,
main [class*="grid-cols-[2fr_3fr]"] > p[class*="text-zinc-500"] {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--bs-ink) !important;
}

/* --- 19.2c Paskyros trynimas ----------------------------------------------

   Bagisto „Ištrinti paskyrą" kompiuteryje piesia kaip PAGRINDINI mygtuka —
   toki pat juoda ir toki pat svarbu, kaip „I krepseli". Tai vienintelis
   negriztamas veiksmas visoje parduotuveje, ir jis neturi atrodyti kaip
   kvietimas ji atlikti.

   Idomu, kad telefone Bagisto pats piesia ji kaip ramia raudona nuoroda
   (md:hidden versija) — t. y. teisingai. Cia kompiuterio versija
   sulyginama su telefono: kontūrinis, raudonas, be uzpildo.
   -------------------------------------------------------------------------- */

main form div.primary-button {
    background: transparent !important;
    border: 1.5px solid var(--bs-line-2) !important;
    color: var(--bs-sale) !important;
    box-shadow: none !important;
    font-weight: 600;
}

main form div.primary-button:hover {
    border-color: var(--bs-sale) !important;
    background: rgba(214, 59, 47, .06) !important;
    transform: none;
}

/* Patvirtinimo langelyje mygtukas LIEKA raudonas ir uzpildytas: ten jis
   jau yra sprendimas, o ne kvietimas. */
main [class*="z-[999]"] button[type="submit"][class*="primary-button"] {
    background: var(--bs-sale) !important;
    border-color: var(--bs-sale) !important;
    color: #fff !important;
}

main [class*="z-[999]"] button[type="submit"][class*="primary-button"]:hover {
    background: #B83228 !important;
    border-color: #B83228 !important;
}

/* --- 19.3 Siauri ekranai --------------------------------------------------- */

@media (max-width: 768px) {
    .panel-side {
        min-width: 0 !important;
        max-width: none !important;
    }

    .panel-side [class*="border-t"][class*="border-zinc-200"] {
        padding: 12px 4px !important;
    }
}

/* ==========================================================================
   20. KAI PREKES NUOTRAUKOS NERA
   Bagisto tokiu atveju rodo savo pilka staciakampi
   (large-product-placeholder.webp). Kataloge tarp musu korteliu jis
   atrodo kaip neuzsikrove nuotrauka — pirkejas galvoja, kad kazkas
   sugedo, o ne kad prekes nuotrauka dar neikelta.

   Cia vietoje jo rodoma zenklo iliustracija: snieglente ant ledo fono.
   Paveikslelio elementas lieka toks pat, todel alt tekstas (prekes
   pavadinimas) skaitytuvams islieka.

   KAIP TAI VEIKIA
   Bagisto pakaitini paveiksleli parenka taip (Webkul\Product\ProductImage):

       core()->getConfigData('catalog.products.cache_small_image.url')
           ? Storage::url(...)                       <- administravimo nustatymas
           : bagisto_asset('images/small-product-placeholder.webp')

   T. y. jis PIRMA ziuri i administravimo nustatyma. Todel yra du keliai:

     1. Sitas CSS — veikia is karto, nieko daryti nereikia.
     2. Svaresnis: Configure > Catalog > Products > pakaitiniai
        paveiksleliai — ikelk ten no-photo.svg. Tada Bagisto pats grazins
        teisinga adresa ir CSS nebereikes.

   Kol kas paliktas 1, nes jam nereikia rankinio veiksmo.
   ========================================================================== */

/* Trys atributai, ne vienas. Bagisto tingiai kraunama nuotrauka
   (media/images/lazy) gimsta BE src: turi tik data-src ir srcset, o src
   atsiranda tik ivaziavus i ekrana. Su vienu [src*=...] taisykle kataloge
   niekada nesuveikdavo ir pirkejas matydavo Bagisto pilka staciakampi.

   Prekes kortelė (components/products/card.blade.php) adresa pakeicia dar
   pries piesiant — jai sios taisykles nebereikia ir ji veikia visose
   narsyklese. Cia lieka likusios vietos: krepselio eilutes, galerija. */
img[src*="product-placeholder"],
img[srcset*="product-placeholder"],
img[data-src*="product-placeholder"] {
    content: url("../images/no-photo.svg");

    /* Iliustracija turi savo fona ir uzpildo visa plota, todel jai
       nereikia nei vidinio tarpo, nei korteles fono. */
    object-fit: cover !important;
    padding: 0 !important;
    background: none !important;
}

/* Kortelė, kuriai adresa pakeite pats sablonas */
.bs3-card__img[src*="no-photo"] {
    object-fit: cover;
    padding: 0;
}

/* Pirkejo nuotrauka paskyroje ir telefono stalciuje */
img[src*="user-placeholder"] {
    content: url("../images/no-photo-user.svg");
    object-fit: cover !important;
    background: none !important;
}

/* Prekes puslapio galerijoje pakaitinis paveikslelis rodomas dideliame
   lange — ten geriau matosi visas piesinys, be apkirpimo. */
main [class*="min-w-[450px]"][src*="product-placeholder"] {
    object-fit: contain !important;
}

/* ==========================================================================
   21. TURINIO PUSLAPIAI (.bs-prose)
   Apie mus, Pristatymas, Grazinimas — visa, kas rasoma administravimo
   redaktoriuje. Bagisto tokio teksto nestyluoja is viso: h2 lieka
   narsykles numatytojo dydzio, sarasai be tarpu, nuorodos melynos ir
   pabrauktos. Poraste i siuos puslapius veda tiesiogiai, todel jie
   negali atrodyti kaip 1995-uju dokumentas.

   Apvalkala .bs-prose uzdeda temos sablonas cms/page.blade.php.
   ========================================================================== */

.bs-prose {
    max-width: 74ch;
    margin: 0 auto;
    padding: 8px 0 clamp(48px, 6vw, 88px);
    font-size: 16.5px;
    line-height: 1.75;
    color: var(--bs-ink-2);
}

.bs-prose > *:first-child { margin-top: 0; }

.bs-prose h1,
.bs-prose h2,
.bs-prose h3,
.bs-prose h4 {
    font-family: var(--bs-display);
    font-weight: 800;
    letter-spacing: -.025em;
    color: var(--bs-ink);
    line-height: 1.15;
    text-wrap: balance;
}

.bs-prose h1 { font-size: clamp(30px, 4vw, 46px); margin: 0 0 20px; }
.bs-prose h2 { font-size: clamp(23px, 2.4vw, 31px); margin: 44px 0 14px; }
.bs-prose h3 { font-size: clamp(19px, 1.7vw, 22px); margin: 32px 0 10px; }
.bs-prose h4 { font-size: 17px; margin: 26px 0 8px; }

.bs-prose p { margin: 0 0 18px; }

.bs-prose a {
    color: var(--bs-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
    transition: color var(--bs-fast);
}

.bs-prose a:hover { color: var(--bs-accent-d); }

.bs-prose strong,
.bs-prose b { color: var(--bs-ink); font-weight: 700; }

.bs-prose ul,
.bs-prose ol {
    margin: 0 0 20px;
    padding-left: 22px;
}

.bs-prose li { margin-bottom: 8px; }

/* Sarasu zenkleliai — turkis, ne juodi taskai */
.bs-prose ul { list-style: none; padding-left: 4px; }

.bs-prose ul > li {
    position: relative;
    padding-left: 26px;
}

.bs-prose ul > li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: .68em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--bs-brand);
}

.bs-prose ol > li::marker {
    color: var(--bs-accent);
    font-weight: 700;
}

/* Citata.

   Anksčiau ji buvo dėžė su storu turkio brūkšniu kairėje. Tas brūkšnys yra
   universali „čia svarbu" priemonė — jis tinka įspėjimui, pastabai ir
   citatai vienodai, todėl nepasako nieko.

   Citatą skiriam tuo, kas jai iš tikrųjų priklauso: kabute ir balsu.
   Tekstas persijungia į antraščių šriftą ir paauga, todėl skaitomas kaip
   kieno nors pasakytas sakinys, o ne kaip iškelta pastraipa. */
.bs-prose blockquote {
    position: relative;
    margin: 32px 0;
    padding: 26px 30px 24px 34px;
    border-radius: var(--bs-r);
    background: var(--bs-ice);
    color: var(--bs-ink);
    font-family: var(--bs-display);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -.015em;
}

.bs-prose blockquote::before {
    content: "„";
    position: absolute;
    top: 6px;
    left: 11px;
    font-family: var(--bs-display);
    font-size: 44px;
    font-weight: 800;
    line-height: 1;
    color: var(--bs-brand);
}

.bs-prose blockquote p:last-child { margin-bottom: 0; }

.bs-prose img {
    display: block;
    margin: 28px 0;
    border-radius: var(--bs-r-lg);
}

.bs-prose hr {
    margin: 40px 0;
    border: 0;
    border-top: 1px solid var(--bs-line);
}

/* Lenteles (pvz. dydziu lentele) — svarbios snieglenciu parduotuvei */
.bs-prose table {
    width: 100%;
    margin: 24px 0;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-r);
    overflow: hidden;
    font-size: 15px;
}

.bs-prose th,
.bs-prose td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--bs-line);
}

.bs-prose thead th {
    background: var(--bs-ice);
    font-family: var(--bs-display);
    font-weight: 800;
    color: var(--bs-ink);
}

.bs-prose tr:last-child th,
.bs-prose tr:last-child td { border-bottom: 0; }

.bs-prose code {
    padding: 2px 6px;
    border-radius: 5px;
    background: var(--bs-ice);
    font-size: .9em;
    color: var(--bs-ink);
}

/* ==========================================================================
   22. PRISIJUNGIMAS, REGISTRACIJA, SLAPTAZODZIO PRIMINIMAS
   Visi keturi puslapiai naudoja ta pati kortelės zymejima
   (max-w-[870px]), todel uztenka vieno kabliuko.
   ========================================================================== */

main [class*="max-w-[870px]"] {
    box-sizing: border-box;
    max-width: 560px !important;
    padding: clamp(28px, 4vw, 48px) !important;
    border: 1px solid var(--bs-line) !important;
    border-radius: var(--bs-r-xl) !important;
    background: var(--bs-snow);
    box-shadow: var(--bs-sh-2);
}

/* Antraste. Bagisto jai duoda font-dmserif — custom.css ta klase jau
   persiuncia i musu antrasciu srifta, todel cia tik dydis ir tarpai. */
main [class*="max-w-[870px]"] .font-dmserif,
main .font-dmserif[class*="text-4xl"] {
    font-size: clamp(26px, 3vw, 34px) !important;
    font-weight: 800;
    letter-spacing: -.025em;
    color: var(--bs-ink);
}

main [class*="max-w-[870px]"] label {
    font-size: 14px;
    font-weight: 600;
    color: var(--bs-ink);
}

main [class*="max-w-[870px]"] input[type="text"],
main [class*="max-w-[870px]"] input[type="email"],
main [class*="max-w-[870px]"] input[type="password"] {
    box-sizing: border-box;
    width: 100%;
    height: 48px;
    padding: 0 16px;
    border: 1px solid var(--bs-line) !important;
    border-radius: var(--bs-r-sm) !important;
    font-size: 15px;
}

main [class*="max-w-[870px]"] .primary-button,
main [class*="max-w-[870px]"] button[type="submit"] {
    width: 100%;
    border-radius: var(--bs-r-pill) !important;
    padding: 14px 24px !important;
    font-size: 15px;
    font-weight: 700;
}

/* Zymimasis langelis („prisiminti mane", sutikimai) */
main .icon-uncheck,
main [class*="peer-checked:icon-check-box"] { color: var(--bs-line-2) !important; }

main [class*="peer-checked:text-navyBlue"]:checked + .icon-uncheck,
main .icon-check-box { color: var(--bs-accent) !important; }

/* ==========================================================================
   23. KLAIDU PUSLAPIS
   Sablonas perrasytas temoje (errors/index.blade.php): isimtas Bagisto
   milzinisas svytintis skaicius, o 4xx klaidoms grazinta antraste, kad
   pirkejas galetu ieskoti toliau.
   ========================================================================== */

.bs-error {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    min-height: clamp(420px, 62vh, 640px);
    padding: clamp(48px, 8vw, 96px) 24px;
    overflow: hidden;
    background: var(--bs-ice);
}

.bs-error::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("../images/alps-glacier.svg") center bottom / cover no-repeat;
    opacity: .9;
}

.bs-error__inner {
    max-width: 560px;
    text-align: center;
}

.bs-error__code {
    display: block;
    font-family: var(--bs-display);
    font-size: clamp(64px, 12vw, 128px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.05em;
    color: var(--bs-brand);
    /* Vandenženklis: tą pačią žinią pilnu kontrastu kartoja antraštė po
       juo. Ties .35 atrodė ne kaip sprendimas, o kaip prasta spauda. */
    opacity: .5;
}

.bs-error__title {
    font-family: var(--bs-display);
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 800;
    letter-spacing: -.025em;
    color: var(--bs-ink);
    margin: 6px 0 0;
    text-wrap: balance;
}

.bs-error__text {
    margin: 14px 0 0;
    font-size: 16px;
    line-height: 1.65;
    color: var(--bs-ink-2);
}

/* Nuo 28.9 mygtukas „Į pradžią" nebera vienintelis veiksmas — virs jo yra
   paieska — todel tarpas mazesnis nei buvo (30 px). */
.bs-error__actions {
    display: flex;
    justify-content: center;
    margin-top: 22px;
}

/* ==========================================================================
   24. UZSAKYMAS PRIIMTAS IR TUSCIOS BUSENOS

   Bagisto tam pačiam paveiksleliui (images/thank-you.png) duoda dvi
   visiskai priesingas reiksmes:

     checkout/success.blade.php   -> „aciu, uzsakymas priimtas"
     checkout/cart/index.blade.php -> „krepselis tuscias"

   Tas pats piesinys abiem atvejais klaidina: pirkejas, isvydes ta pati
   vaizda po apmokejimo ir prie tuscio krepselio, nesupranta, kuris is ju
   ka reiskia.

   Is pradziu juos skyriau pagal aplinka (tuscio krepselio blokas turi
   py-32, padekos puslapis — ne). Dabar abu sablonai perrasyti temoje ir
   turi savo klases — .bs-done ir .bs-empty — todel jokiu gudrybiu
   nebereikia.
   ========================================================================== */

/* --- 24.1 Uzsakymas priimtas ---------------------------------------------- */

.bs-done {
    display: grid;
    place-items: center;
    padding: clamp(40px, 6vw, 80px) 24px clamp(56px, 7vw, 96px);
}

.bs-done__inner {
    max-width: 560px;
    text-align: center;
}

.bs-done__art {
    content: url("../images/order-done.svg");
    display: block;
    width: 100%;
    max-width: 380px;
    height: auto;
    margin: 0 auto 26px;
}

.bs-done__title {
    font-family: var(--bs-display);
    font-size: clamp(26px, 3.2vw, 38px);
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--bs-ink);
    margin: 0;
    text-wrap: balance;
}

/* Uzsakymo numeris — svarbiausia informacija puslapyje */
.bs-done__order {
    display: inline-block;
    margin: 18px 0 0;
    padding: 12px 22px;
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-r-pill);
    background: var(--bs-ice);
    font-size: 15px;
    color: var(--bs-ink-2);
}

.bs-done__order a,
.bs-done__order b,
.bs-done__order strong {
    font-family: var(--bs-display);
    font-weight: 800;
    color: var(--bs-ink);
    text-decoration: none;
}

.bs-done__order a:hover { color: var(--bs-accent); }

.bs-done__text {
    margin: 18px 0 0;
    font-size: 16px;
    line-height: 1.65;
    color: var(--bs-ink-2);
}

.bs-done__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 30px;
}

/* --- 24.2 Tuscios busenos (visos devynios) -----------------------------------
   Sablonai perrasyti temoje. Iki tol jie visi buvo AKLAVIETE: Bagisto
   piesia paveiksleli ir viena sakini („krepselis tuscias", „nieko
   nerasta"), bet jokios nuorodos toliau. Zmogus, atejes pirkti, atsiduria
   puslapyje, is kurio vienintelis kelias — naršykles mygtukas „atgal".

   Devyni tokie blokai septyniuose failuose:
     krepselis, palyginimas, pageidavimai, adresai, atsiliepimai,
     katalogas (2 — tinklelio ir saraso vaizdai), paieska (2).

   Kiekvienam pridetas mygtukas, o Bagisto keturi skirtingi paveiksleliai
   pakeisti vienu zenklo piesiniu.
   -------------------------------------------------------------------------- */

.bs-empty {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 6px;
    width: 100%;
    margin: 0 auto;
    padding: clamp(48px, 7vw, 96px) 24px;
    text-align: center;
}

.bs-empty__art {
    content: url("../images/empty-state.svg");
    width: 100%;
    max-width: 320px;
    height: auto;
    margin-bottom: 14px;
}

.bs-empty__title {
    font-family: var(--bs-display);
    font-size: clamp(19px, 2vw, 25px) !important;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--bs-ink) !important;
    max-width: 34ch;
    text-wrap: balance;
}

.bs-empty__cta { margin-top: 18px; }

/* ==========================================================================
   25. PALYGINIMAS
   Snieglenciu parduotuvei sis puslapis svarbesnis nei daugeliui kitu:
   lentos renkamos pagal ilgi, plotį po koja, kietuma ir isliejima, ir
   butent cia tie skaiciai gula salia vienas kito.

   Bagisto ji piesia kaip plocia lentele, kuria reikia slinkti i sona —
   o slenkant DINGSTA kaireje esantis parametro pavadinimas. Zmogus mato
   „155 / 158 / 152", bet nebemato, kad tai ilgis. Todel svarbiausia,
   ka cia darom — prilipdom parametru stulpeli.

   Kabliukai is compare/index.blade.php:
     min-w-[304px]   parametru stulpelis (kaireje)
     w-[311px]       prekes stulpelis
     journal-scroll  slenkamas konteineris
   ========================================================================== */

/* Slenkamas konteineris */
main .journal-scroll[class*="overflow-auto"] {
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-r-lg);
    background: var(--bs-snow);
}

/* --- 25.1 Parametru stulpelis — lipnus ------------------------------------ */

main [class*="min-w-[304px]"] {
    position: sticky;
    left: 0;
    z-index: 2;
    box-sizing: border-box;
    /* Eilute yra flex su items-center, todel etiketės langelis
       susitrauktu iki teksto aukscio ir jo fonas nepridengtu visos
       eilutes — prekes eilutė su nuotraukomis yra daug aukstesnė.
       align-self: stretch ji istempia per visa eilutes auksti. */
    align-self: stretch;
    display: flex;
    align-items: center;
    padding: 16px 20px;
    background: var(--bs-ice) !important;
    border-right: 1px solid var(--bs-line);
}

main [class*="min-w-[304px]"] [class*="font-medium"],
main [class*="min-w-[304px]"] p {
    font-size: 14px !important;
    font-weight: 700;
    color: var(--bs-ink) !important;
}

/* --- 25.2 Eilutes ir reiksmes --------------------------------------------- */

main [class*="border-b"][class*="border-zinc-200"][class*="items-center"] {
    border-color: var(--bs-line) !important;
}

/* Prekes stulpelis */
main [class*="w-[311px]"] {
    box-sizing: border-box;
    padding: 16px 20px !important;
    border-right: 1px solid var(--bs-line);
}

main [class*="break-all"][class*="text-sm"] {
    font-size: 14.5px !important;
    color: var(--bs-ink-2);
    word-break: normal;
    overflow-wrap: anywhere;
}

/* --- 25.3 Salinimo mygtukas ------------------------------------------------ */

main .icon-cancel[class*="rounded-md"] {
    border-radius: 50% !important;
    border-color: var(--bs-line) !important;
    color: var(--bs-ink-2);
    box-shadow: var(--bs-sh-1);
    transition: color var(--bs-fast), border-color var(--bs-fast), background-color var(--bs-fast);
}

main .icon-cancel[class*="rounded-md"]:hover {
    background: var(--bs-sale) !important;
    border-color: var(--bs-sale) !important;
    color: #fff;
}

/* „Isvalyti viska" */
main .secondary-button [class*="icon-bin"],
main .secondary-button.icon-bin { color: var(--bs-ink-3); }

/* --- 25.4 Siauri ekranai ---------------------------------------------------
   Telefone Bagisto parametru stulpeliui uzdeda bg-gray-200 — pilka, kuri
   temoje niekur kitur nenaudojama. Sulyginam su ledu.
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    main [class*="min-w-[304px]"] {
        padding: 12px 14px;
        background: var(--bs-ice) !important;
    }

    main [class*="w-[311px]"] { padding: 12px 14px !important; }
}

/* ==========================================================================
   26. SUSISIEKTI (home/contact-us) IR PORASTES TINKLAI

   Bagisto kontaktu puslapis buvo viena forma dezeje. Zmogus su klausimu
   „ar sita lenta tiks 178 cm ugiui" turejo ji parasyti ir laukti — nors
   greiciausiai butu paskambines. Todel kontaktai gauna savo stulpeli ir
   eina PIRMI; telefone jie virsuje, virs formos.

   Kontaktai ateina is administravimo (Configure > Boardshop). Jei ju
   neuzpildyta, sablonas visai nepieSia stulpelio ir uzdeda
   .bs-contact__grid--solo — forma issipleCia per visa ploti.
   ========================================================================== */

.bs-contact {
    max-width: 1080px;
    margin: 0 auto 72px;
}

.bs-contact__head {
    margin-bottom: 36px;
}

.bs-contact__title {
    font-family: var(--bs-display);
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.08;
    color: var(--bs-ink);
    margin: 0;
}

.bs-contact__lead {
    margin: 12px 0 0;
    max-width: 62ch;
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--bs-ink-2);
}

.bs-contact__grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 40px;
    align-items: start;
}

.bs-contact__grid--solo {
    grid-template-columns: 1fr;
    max-width: 720px;
}

/* --- 26.1 Kontaktu kortelė ------------------------------------------------ */

.bs-contact__side {
    box-sizing: border-box;
    padding: 28px 26px;
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-r-lg);
    background: var(--bs-ice);
    /* Lipni, kad ilgoje formoje telefonas neisslinktu is akiu. */
    position: sticky;
    top: 24px;
}

.bs-contact__list {
    display: grid;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bs-contact__item {
    display: grid;
    gap: 4px;
}

.bs-contact__k {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bs-ink-3);
}

.bs-contact__v {
    font-family: var(--bs-display);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--bs-ink);
    text-decoration: none;
    overflow-wrap: anywhere;
}

a.bs-contact__v:hover {
    color: var(--bs-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- 26.2 Forma ----------------------------------------------------------- */

.bs-contact__form {
    box-sizing: border-box;
    padding: 34px 32px;
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-r-lg);
    background: var(--bs-snow);
    box-shadow: var(--bs-sh-2);
}

/* Laukai. Matmenys nurodomi CIA, o ne paliekami Bagisto Tailwind
   klasems (px-6 py-5), del tos pacios priezasties kaip visur kitur
   temoje: keturis kartus per si darba palikau dydi Tailwind'ui, ir
   keturis kartus jis issipute ten, kur Tailwind toje vietoje nebuvo
   pritaikytas. Cia dar ir tarpai tarp lauku — kad forma atrodytu vientisa
   net tada, jei is Bagisto stiliu neateitu nieko. */
.bs-contact__form [class*="mb-4"] {
    margin-bottom: 20px;
}

/* Klaidos zinute po lauku. Bagisto ja piesia text-red-500 italic —
   pasvires raudonas smulkus tekstas skaitomas prasciau, nei tiesus. */
.bs-contact__form [class*="text-red-500"] {
    margin-top: 6px;
    font-size: 12.5px;
    font-style: normal !important;
    font-weight: 600;
    color: var(--bs-sale) !important;
}

.bs-contact__form label {
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--bs-ink);
}

.bs-contact__form input[type="text"],
.bs-contact__form input[type="email"],
.bs-contact__form input[type="tel"],
.bs-contact__form textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 14px 16px !important;
    border: 1px solid var(--bs-line-2);
    border-radius: var(--bs-r-sm);
    font-family: inherit;
    font-size: 15px;
    line-height: 1.4;
}

.bs-contact__form textarea {
    min-height: 168px;
    resize: vertical;
}

.bs-contact__actions {
    margin-top: 26px;
}

/* Mygtukas cia neturi Tailwind klasiu, todel visi matmenys — savi.
   Sito reikia: keturis kartus per si darba palikau dydi Tailwind'ui, ir
   keturis kartus jis issipute, kai Tailwind toje vietoje nebuvo
   pritaikytas. */
.bs-contact__actions .bs2-btn {
    width: 100%;
    max-width: 340px;
    justify-content: center;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

@media (max-width: 900px) {
    .bs-contact__grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* Telefone kontaktai lieka VIRSUJE — greiciausias budas gauti
       atsakyma neturi buti po ilga forma. Lipnumas cia tik trukdytu. */
    .bs-contact__side {
        position: static;
        padding: 20px 18px;
    }

    .bs-contact__list {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 16px 20px;
    }

    .bs-contact__form {
        padding: 24px 18px;
    }

    .bs-contact__actions .bs2-btn { max-width: none; }
}

@media (max-width: 640px) {
    .bs-contact { margin-bottom: 48px; }
    .bs-contact__head { margin-bottom: 24px; }
    .bs-contact__lead { font-size: 15px; }
    .bs-contact__form {
        padding: 0;
        border: none;
        background: none;
        box-shadow: none;
    }
}

/* --- 26.3 Porastes socialiniai tinklai ------------------------------------ */

.bs5-social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.bs5-social__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .18);
    color: #E4ECF2;
    transition: background-color var(--bs-fast), border-color var(--bs-fast), color var(--bs-fast);
}

.bs5-social__link svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    display: block;
}

.bs5-social__link:hover {
    background: var(--bs-brand);
    border-color: var(--bs-brand);
    color: var(--bs-ink);
}

/* ==========================================================================
   27. SLAPUKU JUOSTA (GDPR)

   Bagisto ja piesia juoda (bg-black/90) su trimis vienodais melynais
   mygtukais (bg-blue-500) — vienintele melyna ir vienintele juoda visoje
   parduotuveje, ir pirmas dalykas, kuri pirkejas pamato. Sablonas lieka
   Bagisto (components/layouts/cookie), cia tik isvaizda.

   Kabliukai is sablono: .js-cookie-consent (saknis), .cookieTitle,
   .cookieDesc, .cookieButton. display cia NELIECIAMAS — Bagisto juosta
   rodo ir slepia per inline style.display, o Tailwind „hidden" laiko ja
   paslepta iki tol.

   Trys veiksmai — trys svoriai: „Sutinku" pilnas, „Atmesti" kontūrinis,
   „Plačiau ir nustatymai" — nuoroda. Vienodi mygtukai vercia skaityti
   visus tris; skirtingi — pasako, kuris ko vertas.
   ========================================================================== */

.js-cookie-consent {
    box-sizing: border-box;
    padding: 24px 24px 20px !important;
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-r-lg) !important;
    background: var(--bs-snow) !important;
    color: var(--bs-ink);
    font-family: var(--bs-body);
    box-shadow: var(--bs-sh-4);
}

.js-cookie-consent .cookieTitle span {
    margin: 0 !important;
    font-family: var(--bs-display);
    font-size: 19px !important;
    font-weight: 800;
    line-height: 1.2 !important;
    letter-spacing: -.02em;
    color: var(--bs-ink) !important;
}

.js-cookie-consent .cookieDesc p {
    margin-top: 8px !important;
    font-family: var(--bs-body);
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    color: var(--bs-ink-2) !important;
}

.js-cookie-consent .cookieDesc a {
    color: var(--bs-accent) !important;
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
}

.js-cookie-consent .cookieDesc a:hover { color: var(--bs-accent-d) !important; }

.js-cookie-consent .cookieButton > div {
    gap: 10px !important;
    margin-top: 18px !important;
}

.js-cookie-consent .cookieButton button,
.js-cookie-consent .cookieButton a {
    box-sizing: border-box;
    padding: 12px 18px !important;
    border-radius: var(--bs-r-pill) !important;
    font-family: var(--bs-body);
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2;
    transition: background-color var(--bs-fast), border-color var(--bs-fast), color var(--bs-fast);
}

/* „Sutinku" */
.js-cookie-consent .cookieButton button:first-child {
    background: var(--bs-ink) !important;
    color: #fff !important;
}

.js-cookie-consent .cookieButton button:first-child:hover {
    background: var(--bs-accent) !important;
}

/* „Atmesti" */
.js-cookie-consent .cookieButton button:nth-child(2) {
    border: 1.5px solid var(--bs-line-2);
    background: transparent !important;
    color: var(--bs-ink) !important;
}

.js-cookie-consent .cookieButton button:nth-child(2):hover {
    border-color: var(--bs-ink);
    background: var(--bs-ice) !important;
}

/* „Plačiau ir nustatymai" — nuoroda, ne trecias mygtukas */
.js-cookie-consent .cookieButton a {
    margin-top: 6px !important;
    padding: 8px 0 0 !important;
    background: transparent !important;
    color: var(--bs-ink-2) !important;
    font-weight: 600 !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.js-cookie-consent .cookieButton a:hover { color: var(--bs-ink) !important; }

@media (max-width: 640px) {
    .js-cookie-consent { padding: 20px 18px 16px !important; }
}

/* ==========================================================================
   28. PLANSETES IR TAISYKLES, KURIU BAGISTO NETURI

   Sitas skyrius gimė iš matavimo, ne iš akių: puslapiai buvo pereiti su
   1440, 820 ir 390 px plociu, o kiekviename tikrinta, ar nera
   horizontalaus slinkimo ir ar paspaudziami elementai siekia 40 px.
   ========================================================================== */

/* --- 28.1 Horizontalus slinkimas prekes puslapyje --------------------------

   Bagisto telefono galerija (products/view/gallery/mobile.blade.php) tris
   kartus naudoja Tailwind klase w-screen, t. y. width: 100vw.

   100vw yra VISAS lango plotis KARTU su slinkties juosta. Kai juosta uzima
   vieta (kompiuteris, planseté, bet ne telefonas su plaukiojancia juosta),
   toks blokas tampa ~10 px platesnis uz turini, ir visas puslapis pradeda
   slinkti i sona. Pamatuota: 820 px lange scrollWidth buvo 830.

   Telefone to nesimato — todel klaida ir isliko.
   -------------------------------------------------------------------------- */

main [class*="w-screen"] {
    width: 100% !important;
    max-width: 100%;
}

/* --- 28.2 Katalogas plansetéje --------------------------------------------

   Bagisto filtrus i stalciu perkelia tik ties 767 px (`isMobile`), o
   sonine juosta nuo 1280 px zemyn susitraukia iki 270 px ir daugiau
   nebesitraukia. Tarp 768 ir 1023 px gaunasi blogiausias derinys:
   filtrai atima 270 px, prekems lieka du siauri stulpeliai, ir katalogas
   plansetéje atrodo ankstesnis nei telefone.

   Sablono nekeiciam (jis Bagisto ir jame gyvena Vue) — tik atiduodam
   filtrams maziau vietos ir leidziam prekems kvepuoti.
   -------------------------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 1023px) {
    main .panel-side {
        min-width: 210px !important;
        max-width: 210px !important;
    }

    main .panel-side [class*="text-lg"] { font-size: 14px !important; }

    /* Kainos ruozo antraste („Kaina: 0,00 € – 419,00 €") siauresnėje
       juostoje lūždavo i tris eilutes. */
    main .panel-side [class*="text-base"] { font-size: 13px !important; }
    main .panel-side [class*="items-center"][class*="gap-4"] { gap: 6px !important; }

    /* Tarpas tarp filtru ir prekiu — Bagisto duoda 40 px, o siame lange
       kiekvienas pikselis yra prekiu stulpelio plotis. */
    main .container > .flex.items-start { gap: 22px !important; }
}

/* --- 28.3 Formos laukai ---------------------------------------------------

   Parduotuveje buvo DVI skirtingos laukelio isvaizdos: prisijungimo ir
   registracijos kortelėje 48 px aukscio su 10 px kampu (22 skyrius), o
   apmokejimo eigoje ir adresu formose — 38 px su Bagisto numatytuoju
   apvalinimu. Tai ta pati parduotuve ir tas pats zmogus, pildantis ta
   pati adresa, todel laukelis turi atrodyti vienodai.

   48 px pasirinktas ne del grozio: 38 px laukelis telefone yra maziau nei
   rekomenduojamas 44 px taikinys, o Safari prie mazesnio nei 16 px srifto
   dar ir pritraukia visa puslapi.
   -------------------------------------------------------------------------- */

main #steps-container input[type="text"],
main #steps-container input[type="email"],
main #steps-container input[type="tel"],
main #steps-container input[type="number"],
main #steps-container select,
main .bs-contact__form input[type="text"],
main [class*="w-[442px]"] input[type="text"] {
    box-sizing: border-box;
    min-height: 48px;
    border-radius: var(--bs-r-sm) !important;
    border: 1px solid var(--bs-line-2) !important;
    font-size: 15px !important;
}

main #steps-container label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--bs-ink);
}

/* --- 28.4 Pranesimai (flash) ----------------------------------------------

   Bagisto pranesimo spalvas rasO INLINE stiliumi (:style="typeStyles..."),
   todel iprastas CSS ju neperrasO — reikia !important. Iki tol pirkejas
   po kiekvieno „i krepseli" matydavo Bootstrap'o zalia #D4EDDA su 8 px
   kampu: vienintele tokia spalva ir vienintele tokia forma visoje
   parduotuveje.
   -------------------------------------------------------------------------- */

/* Kabliukas — max-w-[408px]. Jis visame Bagisto sablonu kataloge yra
   TIK cia (patikrinta), o pranesimo dezute piesiama DU kartus: virsuje
   desineje kompiuteriui ir apacioje viduryje telefonui. Taikantis i
   konteinerį reiketu pataikyti i abu; taikantis i pacia dezute — uztenka
   vieno selektoriaus. */
#app [class*="max-w-[408px]"] {
    border-radius: var(--bs-r-pill) !important;
    padding: 14px 22px !important;
    background: var(--bs-ink) !important;
    color: #fff !important;
    font-weight: 600;
    box-shadow: var(--bs-sh-3);
}

#app [class*="max-w-[408px]"] p,
#app [class*="max-w-[408px]"] span {
    color: #fff !important;
}

/* Klaida — vienintele, kuri lieka spalvota, nes turi būti pastebėta. */
#app [class*="max-w-[408px]"][style*="F8D7DA"] {
    background: var(--bs-sale) !important;
}

/* --- 28.5 Filtrai: mygtukai, kuriu tema dar neturejo ----------------------- */

/* „Rodyti daugiau" filtru sarase. Bagisto jam duoda tik `rounded border`,
   todel jis liko vienintelis staciakampis pilkas mygtukas puslapyje. */
main .panel-side button[class*="rounded"][class*="border"] {
    box-sizing: border-box;
    min-height: 40px;
    padding: 0 16px !important;
    border: 1px solid var(--bs-line) !important;
    border-radius: var(--bs-r-pill) !important;
    background: var(--bs-snow);
    font-size: 13px;
    font-weight: 600;
    color: var(--bs-ink-2);
    transition: border-color var(--bs-fast), color var(--bs-fast), background-color var(--bs-fast);
}

main .panel-side button[class*="rounded"][class*="border"]:hover {
    border-color: var(--bs-line-2) !important;
    background: var(--bs-ice);
    color: var(--bs-ink);
}

/* „Isvalyti viska" ir filtru antraste */
main .panel-side [class*="cursor-pointer"][class*="text-xs"],
main .panel-side [class*="cursor-pointer"][class*="text-sm"] {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    color: var(--bs-accent);
    font-weight: 600;
}

/* Kainos slankiklis. Bagisto juostele yra navy 4 px ruozelis su baltu
   apskritimu — perdazom zenklo spalva, kad nebūtų vienintelis navy
   elementas balto katalogo sone.

   Pats laukas yra `pointer-events: none` ir gulti ant matomos juostelės,
   todėl paimti galima TIK apskritimą. Dėl to jis ir padidintas iki 22 px:
   4 px juostelė lieka tokia pat plona, o pirštui atsiranda į ką pataikyti. */
main input[type="range"]::-webkit-slider-thumb {
    width: 22px;
    height: 22px;
    background: #fff !important;
    box-shadow: 0 0 0 2px var(--bs-accent), var(--bs-sh-1);
}

main input[type="range"]::-moz-range-thumb {
    width: 22px;
    height: 22px;
    background: #fff !important;
    box-shadow: 0 0 0 2px var(--bs-accent), var(--bs-sh-1);
}

main .panel-side [class*="bg-navyBlue"] { background: var(--bs-accent) !important; }

/* --- 28.6 Akordeonas (komponentas perrasytas temoje) ---------------------- */

.bs-acc__head {
    min-height: 52px;
    border-radius: var(--bs-r-sm);
    transition: background-color var(--bs-fast);
}

.bs-acc__head:hover { background: var(--bs-ice); }

.bs-acc__arrow {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    color: var(--bs-ink-2);
}

/* --- 28.7 Pedsakai: paspaudziamas plotas ---------------------------------- */

.bs-crumbs nav ol li a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
}

/* --- 28.8 Konfiguratoriaus tuscias zingsnis --------------------------------

   Tuscias langelis be nieko atrodo kaip neuzsikrovusi nuotrauka — ta pati
   problema, kaip su prekiu pakaitiniu paveiksleliu (20 skyrius). Cia jam
   duodam ledo fona ir skaiciu, kad butu aisku: tai dar nepasirinktas
   zingsnis, o ne klaida.
   -------------------------------------------------------------------------- */

.sc-card__img--empty,
.sc-step__img--empty {
    position: relative;
    border: 1px dashed var(--bs-line-2);
    background: linear-gradient(160deg, #F8FCFD 0%, #EDF6FA 100%);
}

.sc-card__img--empty::after,
.sc-step__img--empty::after {
    content: "+";
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .85);
    color: var(--bs-accent);
    font-family: var(--bs-display);
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    box-shadow: var(--bs-sh-1);
}

.sc-step__img--empty::after { width: 28px; height: 28px; font-size: 17px; }

/* --- 28.9 Klaidos puslapio paieska ir kategorijos -------------------------- */

.bs-error__search {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 440px;
    margin: 26px auto 0;
}

.bs-error__search .icon-search {
    position: absolute;
    left: 18px;
    font-size: 19px;
    color: var(--bs-ink-3);
    pointer-events: none;
}

.bs-error__search input {
    box-sizing: border-box;
    width: 100%;
    height: 54px;
    padding: 0 116px 0 48px;
    border: 1px solid var(--bs-line-2);
    border-radius: var(--bs-r-pill);
    background: #fff;
    font-size: 15px;
    color: var(--bs-ink);
    box-shadow: var(--bs-sh-2);
}

.bs-error__search input::placeholder { color: var(--bs-ink-3); }

.bs-error__search input:focus {
    border-color: var(--bs-accent);
    outline: none;
    box-shadow: 0 0 0 4px rgba(22, 184, 212, .18);
}

.bs-error__search button {
    position: absolute;
    right: 6px;
    height: 42px;
    padding: 0 22px;
    border: 0;
    border-radius: var(--bs-r-pill);
    background: var(--bs-ink);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color var(--bs-fast);
}

.bs-error__search button:hover { background: var(--bs-accent); }

.bs-error__cats { margin-top: 30px; }

.bs-error__hint {
    margin: 0 0 12px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--bs-ink-3);
}

.bs-error__cat-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.bs-error__cat {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 18px;
    border: 1px solid var(--bs-line-2);
    border-radius: var(--bs-r-pill);
    background: rgba(255, 255, 255, .8);
    font-size: 14px;
    font-weight: 600;
    color: var(--bs-ink);
    text-decoration: none;
    transition: background-color var(--bs-fast), border-color var(--bs-fast), color var(--bs-fast);
}

.bs-error__cat:hover {
    border-color: var(--bs-ink);
    background: #fff;
    color: var(--bs-accent);
}

@media (max-width: 640px) {
    .bs-error__search input { height: 50px; padding-right: 104px; }
    .bs-error__search button { height: 38px; padding: 0 18px; }
}

/* ==========================================================================
   29. ĮRENGINIAI: SAUGIOS ZONOS, GULSČIAS TELEFONAS, KLAVIATŪRA

   Skyrius atsakinėja ne į klausimą „koks ekrano plotis", o į klausimą
   „kokiu įrenginiu tai atidaryta ir kuo žmogus jį valdo".
   ========================================================================== */

/* --- 29.1 Katalogo apatinė juosta telefone --------------------------------

   Bagisto „Filtras / Rikiuoti" juosta yra position: fixed prie ekrano
   apacios (categories/filters.blade.php). Du dalykai su ja negerai:

   1. Ji uzgula turini. Prekiu tinklelis baigiasi po ja, o kartu su juo ir
      mygtukas „Rodyti daugiau" — paskutinÄ—s eilutes pirkejas nepasiekia.
   2. Telefonuose su pagrindiniu bruksniu ji gulasi po juo.
   -------------------------------------------------------------------------- */

main div[class*="fixed"][class*="bottom-0"][class*="border-t"] {
    box-sizing: border-box;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Vietos turiniui, kad juosta nieko neuzgultu (64 px juosta + 12 px oro).

   Salyga DVIGUBA, ir tai svarbu: pirmas :has() klausia, ar siame puslapyje
   juosta apskritai yra, o antras — kuriame konteineryje guli prekes.
   Be pirmojo tas pats tarpas atsirastu ir pagrindiniame puslapyje po
   prekiu karuselemis, kur jokios juostos nera, ir atrodytu kaip klaida. */
@media (max-width: 767px) {
    main:has(div[class*="fixed"][class*="bottom-0"][class*="border-t"]) .container:has(.bs3-card) {
        padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    }
}

/* (Poraštės apatinės juostos saugi zona — 9 skyriuje, prie .bs5-bottom__inner.) */

/* --- 29.2 Gulscias telefonas ----------------------------------------------

   Ligi siol tikrinta tik statmena padetis. Pasukus telefona (844×390)
   pagrindinio puslapio hero uzimdavo 708 px — beveik DVI ekrano aukscio,
   nes aukstis skaiciuojamas is vh, o tekstas lieka to paties dydzio.
   Zmogus matydavo tik antraste ir turedavo slinkti, kad rastu parduotuve.

   Taikinys — ne „mazas ekranas", o „zemas ekranas": max-height pagauna
   butent pasukta telefona ir nepaliecia planseciu.
   -------------------------------------------------------------------------- */

@media (max-height: 500px) and (orientation: landscape) {
    .bs2-hero {
        min-height: 0;
        padding-top: 12px;
    }

    .bs2-hero__inner {
        padding-top: 28px;
        padding-bottom: 24px;
    }

    .bs2-hero__title { font-size: clamp(28px, 5vw, 44px); }
    .bs2-hero__sub   { font-size: 14px; margin-top: 12px; }
    .bs2-cta         { margin-top: 18px; }

    /* Pasitikejimo juosta gulsciame telefone telpa i viena eile. */
    .bs2-trust__grid { grid-template-columns: repeat(4, 1fr); }
    .bs2-trust__item { padding: 12px 14px; border-top: 0; border-left: 1px solid var(--bs-line); }
    .bs2-trust__item:first-child { border-left: 0; }
    .bs2-trust__k { font-size: 15px; }
    .bs2-trust__v { font-size: 11px; }

    /* Stalcius ir modalai turi tilpti i 390 px auksti. */
    .bs6-user { margin: 10px; padding: 10px; }
    .bs6-user__pic { width: 40px; height: 40px; }

    .bs-error { min-height: 0; padding: 32px 24px; }
    .bs-error__code { font-size: 56px; }
}

/* --- 29.3 Kategoriju meniu klaviatura --------------------------------------

   Bagisto didyjį meniu atidaro TIK `group-hover`. Tai reiskia, kad
   klaviatura jis neatsidaro is viso: Tab nuveda i kategorijos nuoroda,
   bet potemiu sarasas lieka opacity: 0 ir pointer-events: none.

   :focus-within tai istaiso vienu selektoriumi — meniu atsidaro, kai
   fokusas patenka i bet kuria jo vidaus nuoroda. Uzvedimas pele veikia
   kaip veikes.
   -------------------------------------------------------------------------- */

header [class*="h-[77px]"]:focus-within [data-mega-menu-dropdown] {
    pointer-events: auto;
    opacity: 1;
    transform: translateY(0);
}

/* Fokusas turi buti MATOMAS ir ant tamsaus, ir ant sviesaus fono. */
header [class*="h-[77px]"] a:focus-visible {
    outline: 2px solid var(--bs-accent);
    outline-offset: -4px;
    border-radius: 6px;
}

/* --- 29.4 Lietimas ten, kur yra ir pele -----------------------------------

   Lieciamas nesiojamas kompiuteris turi ir pele, todel gauna kompiuterio
   isvaizda — bet pirstas ant jo lieka toks pat storas. Ten, kur ivedimas
   yra STAMBUS (pirstas, raSiklis), mygtukams duodam daugiau oro,
   nepriklausomai nuo ekrano ploCio.
   -------------------------------------------------------------------------- */

@media (pointer: coarse) {
    .bs4-nav a,
    .bs4-drop__menu a,
    .bs4-mega__list a {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
    }

    .bs7-btn { padding: 12px 0; }
}


/* ==========================================================================
   30. KAS LŪŽO TIKRAME TELEFONE

   Šis skyrius surašytas ne iš galvos, o pasimatavus gyvą puslapį 390 px
   pločio lange. Trys dalykai atrodė gerai kode ir buvo sugedę ekrane.
   ========================================================================== */

/* --- 30.1 PREKĖS PUSLAPIS IŠSITEMPDAVO IKI 831 PX ---

   Importuotų prekių aprašyme yra specifikacijų lentelė. Ji platesnė už
   telefoną, o gaubiantis blokas yra tinklelio narys — tokiam CSS numatytai
   duoda `min-width: auto`, t. y. „nesitrauk siauriau, negu tavo turinys".
   Todėl siaurėjo ne lentelė, o platėjo visas puslapis: 390 px languose
   naršyklė gaudavo 831 px maketą ir jį sumažindavo. Nukentėjo VISKAS —
   galerija, antraštės, mygtukai.

   Gydom priežastį: nariams leidžiam trauktis, o lentelė slenka pati savo
   dėžėje. Taisyklė bendra, nes ta pati bėda ištiks bet kurį aprašymą su
   plačiu turiniu. */
main .container > * { min-width: 0; }

main .rg-table,
main .bs-prose table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    /* Slinkimas turi būti matomas, kitaip pirkėjas nesupras, kad lentelė
       tęsiasi toliau. */
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

/* --- 30.2 PREKĖS GALERIJA TELEFONE BUVO 39 PX JUOSTELĖ ---

   Bagisto karuselės skaidrės yra `w-screen`, bet joms niekas neuždraudžia
   trauktis. Dešimt skaidrių po 390 px viename 390 px konteineryje ir
   susitraukdavo lygiai iki 39 px — vietoj prekės nuotraukos pirkėjas
   matydavo miniatiūrų juostelę.

   Pats komponentas slenka per `currentIndex * -window.innerWidth`, todėl
   skaidrė PRIVALO būti lygiai vieno lango pločio. `flex-shrink: 0` yra ne
   apdaila, o sąlyga, kad karuselė iš viso veiktų. */
main .inline-flex.will-change-transform > * { flex: 0 0 auto; }

/* Taškiukai po nuotrauka buvo 6 px — dulkė. Prie 8 px matosi, kiek
   nuotraukų yra ir kelinta rodoma. */
main .inline-flex.will-change-transform + div > [role="button"] {
    width: 8px;
    height: 8px;
    margin: 0 3px;
}

/* --- 30.3 PER MAŽI LIETIMO TAIKINIAI ---

   44 px yra minimalus pirštu pataikomas dydis. Šie mygtukai buvo 24 px ir
   4 px. Didinam lietimo lauką, o ne patį ženklą — išvaizda nesikeičia. */

/* Sąrašo / tinklelio jungiklis kategorijoje. Ženklas lieka 24 px, auga
   tik lietimo laukas aplink jį. */
main [class~="icon-listing"],
main [class~="icon-grid-view-fill"] {
    display: grid;
    place-items: center;
    min-width: 44px;
    min-height: 44px;
}

/* Kainos slankiklio rankenėlė padidinta ten, kur ji ir aprašyta — 28.5. */

/* Poraštės kūrėjo nuoroda, slapukų juostos nuorodos ir „Palyginti"
   prekės puslapyje buvo 15–24 px aukščio. Tekstas nesikeičia, auga tik
   plotas aplink jį. */
.bs5 a,
.js-cookie-consent .cookieDesc a,
.js-cookie-consent .cookieButton a {
    padding-block: 5px;
}

main [class*="icon-compare"],
main a:has(> [class*="icon-compare"]),
main button:has(> [class*="icon-compare"]) {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
}

/* --- 30.4 PIKTOGRAMOS ---

   .bs2-usp__ico turinys ateina iš administravimo. Kai ten įrašomas
   piešinys, o ne ženklas iš šrifto, jis turi atsistoti tvarkingai. */
.bs2-usp__ico > svg,
.bs2-usp__ico > img {
    width: 24px;
    height: 24px;
    display: block;
}

/* ==========================================================================
   31. KAS LIKO PO TREČIOS PATIKROS

   Vietos, kurių ankstesni ėjimai nepasiekė: mobili filtrų juosta, klaidų
   puslapis ir apmokėjimo eiga.
   ========================================================================== */

/* --- 31.1 FILTRŲ JUOSTA UŽDENGDAVO PORAŠTĖS APAČIĄ ---

   Kataloge ir paieškoje telefone apačioje kabo prisegta juosta
   „FILTRAS | RIKIUOTI". Ji 49 px aukščio ir guli VIRŠ puslapio, o puslapis
   apie ją nieko nežino — todėl nuslinkus iki galo paskutinės poraštės
   eilutės (autorių teisės ir dizaino autorystė) po ja tiesiog nebūdavo
   matyti. Ne kartais, o visada.

   Tarpas dedamas tik ten, kur ta juosta iš tikrųjų yra: `:has()` tikrina
   patį elementą. Jei Bagisto kada nors pakeis tas klases, tema-patikra
   apie tai praneš (ji tikrina, ar CSS taikosi į žymėjime esančias klases),
   todėl tyliai neliks. */
@media (max-width: 767px) {
    body:has([class~="fixed"][class~="bottom-0"][class~="z-10"]) .bs5-bottom {
        padding-bottom: calc(58px + env(safe-area-inset-bottom));
    }
}

/* --- 31.2 APMOKĖJIMO EIGA ---

   „< Krepšelis" yra VIENINTELIS kelias atgal iš apmokėjimo (antraštė ten
   sąmoningai nuskurdinta). 20 px aukščio taikinys tokiam vaidmeniui per
   mažas — pirštu pataikoma iš antro karto. Ženklas lieka toks pat. */
[class*="checkout"] a[href*="cart"],
main a[href*="checkout/cart"] {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
}