/**
 * Vitrinos tema.
 *
 * SANDARA: pirmas blokas - tokenai (spalvos, tarpai, tipografija). Visa
 * kita remiasi TIK jais. Norint pakeisti parduotuves isvaizda, uztenka
 * keisti :root reiksmes - komponentu taisyti nereikia.
 *
 * Bootstrap kintamuosius perrasom ten, kur ju uztenka (--bs-*), o savus
 * komponentus rasom tik ten, kur Bootstrap neturi atitikmens.
 */

/* ==========================================================================
   0. SRIFTAS
   ==========================================================================
   Manrope (SIL OFL, laisvai naudojamas ir komerciskai), talpinamas PAS MUS.
   Google Fonts nuoroda cia neveiktu: grieztas CSP leidzia tik savo kilmes
   isteklius, ir srifto uzklausa butu blokuota tyliai.

   Du poaibiai: latin-ext turi lietuviskas raides (ąčęėįšųūž), todel
   uzkraunamas kartu - be jo diakritikai virstu keturkampiais.

   Kintamasis srifto formatas: vienas failas dengia 300-700 storius. */

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;   /* tekstas matomas is karto, sriftas uzsideda veliau */
    src: url('../fonts/manrope-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                   U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/manrope-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   1. TOKENAI
   ========================================================================== */

:root {
    /* --- Spalvos ---------------------------------------------------------
       Beveik vienspalve gama: gilus tamsiai melynas ant balto. Jokios
       antros spalvos - hierarchija kuriama tonu ir tarpais, ne akcentais.
       Prekiu nuotraukos vonios kambaryje jau yra spalvotos, ir sasaja,
       kuri su jomis varzosi, atrodo triuksminga.

       Akcentas VIENAS visame puslapyje ir sutampa su teksto spalva. */
    --ink:          #0d1b2f;   /* pagrindinis tekstas, tamsiai melynas */
    --ink-muted:    #5a6675;   /* antraeilis tekstas */
    --ink-faint:    #8d98a6;   /* uzuominos, metaduomenys */

    --surface:      #ffffff;
    --surface-alt:  #f4f6f8;   /* paieskos laukas, sekciju juostos */
    --surface-deep: #0d1b2f;   /* tamsios juostos */

    --line:         #e5e9ed;   /* skiriamosios linijos */
    --line-strong:  #cdd4dc;

    --accent:       #0d1b2f;
    --accent-hover: #16294a;
    --accent-soft:  #eef1f5;   /* svelnus fonas pasirinkimams */

    --danger:       #b3261e;   /* akcijos kaina, ispejimai */
    --success:      #1d6b3f;

    /* --- Tipografija ----------------------------------------------------- */
    --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, "Helvetica Neue", Arial, sans-serif;

    --fs-xs:   0.75rem;
    --fs-sm:   0.8125rem;
    --fs-base: 0.9375rem;
    --fs-lg:   1.0625rem;
    --fs-xl:   1.375rem;
    --fs-2xl:  1.75rem;
    --fs-3xl:  2.25rem;
    --fs-4xl:  3rem;

    /* --- Tarpai ---------------------------------------------------------- */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4rem;

    /* --- Formos ----------------------------------------------------------
       VIENA apvalinimo sistema visam puslapiui: 6px valdikliams,
       10px konteineriams. Apvalus mygtukai kampuotose kortelese
       (ar atvirksciai) yra sulauzytas dizainas. */
    --r-sm: 6px;
    --r-md: 10px;

    /* Seseliai atspalvinti i fono tona, ne grynai juodi */
    --shadow-sm: 0 1px 2px rgb(20 24 28 / 0.06);
    --shadow-md: 0 4px 16px rgb(20 24 28 / 0.08);

    --container: 1320px;
    --header-h:  72px;

    /* Bootstrap perrasymai */
    --bs-body-font-family: var(--font-sans);
    --bs-body-font-size: var(--fs-base);
    --bs-body-color: var(--ink);
    --bs-body-bg: var(--surface);
    --bs-border-color: var(--line);
    --bs-primary: var(--accent);
    --bs-link-color: var(--ink);
    --bs-link-hover-color: var(--accent);
    --bs-border-radius: var(--r-sm);
    --bs-border-radius-lg: var(--r-md);
}

/* ==========================================================================
   2. PAGRINDAI
   ========================================================================== */

body {
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    color: var(--ink);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.shell {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--sp-4);
}

@media (min-width: 992px) {
    .shell { padding-inline: var(--sp-5); }
}

/* Sekciju ritmas. Tankis 4: kvepuoja, bet ne galerija. */
.section        { padding-block: var(--sp-7); }
.section--tight { padding-block: var(--sp-6); }
.section--band  { background: var(--surface-alt); }

.section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
}

.section__title {
    font-size: var(--fs-2xl);
    margin: 0;
}

.section__more {
    font-size: var(--fs-sm);
    color: var(--ink-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s;
}

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

/* ==========================================================================
   3. VIRSUTINES JUOSTOS IR ANTRASTE
   ========================================================================== */

/* Tarnybine juosta: kontaktai ir pristatymo pazadas.
   Viena tamsi juosta vietoj dvieju spalvotu - ekrano virsuje kuo maziau
   triuksmo, tuo greiciau pirkejas randa paieska. */
.utilbar {
    background: var(--surface-deep);
    color: #aab6c6;
    font-size: var(--fs-xs);
    padding-block: var(--sp-3);
}

.utilbar a { color: #aab6c6; text-decoration: none; }
.utilbar a:hover { color: #fff; }

.utilbar__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-5);
}

.utilbar__item {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    white-space: nowrap;
}

.utilbar__item i { font-size: 0.95rem; opacity: 0.85; }
.utilbar__item strong { color: #fff; font-weight: 500; }

@media (max-width: 991.98px) {
    .utilbar { display: none; }
}

/* --- Antraste --------------------------------------------------------- */

.masthead {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 1030;
}

.masthead__row {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    min-height: var(--header-h);
    padding-block: var(--sp-3);
}

/* --- Zodinis zenklas ---------------------------------------------------
   Logotipas is teksto, be paveiksliuko: jis lieka aiskus bet kokiame
   dydyje, persidazo tamsiam fonui ir nereikalauja atskiro failo.

   Sudetis: "vonios" plonu svoriu, "kambarys" pusstoriu. Zodis ilgas, o
   svorio kontrastas ji perskiria i dvi dalis, todel perskaitomas is
   pirmo zvilgsnio.

   Piktogramos SAMONINGAI nera. Vandens lasas ar plytele salia pavadinimo
   yra pirmas dalykas, kuri sugalvoja kiekvienas vonios prekiu prekeivis,
   ir zenklas nuo to tampa nebeatskiriamas nuo konkurentu. Grynas
   zodinis zenklas su svorio kontrastu atrodo brangiau. */
.brand {
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
    font-size: 1.5rem;
    line-height: 1;
    letter-spacing: -0.035em;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
}

.brand__thin {
    font-weight: 300;
    /* Plonas svoris optiskai atrodo sviesesnis - siek tiek kompensuojam */
    opacity: 0.85;
}

.brand__bold { font-weight: 700; }

.brand:hover { color: var(--ink-muted); }

@media (max-width: 575.98px) {
    .brand { font-size: 1.25rem; }
}

.searchbox {
    flex: 1 1 auto;
    max-width: 560px;
    position: relative;
}

.searchbox input {
    width: 100%;
    height: 44px;
    padding: 0 44px 0 var(--sp-4);
    font-size: var(--fs-base);
    color: var(--ink);
    background: var(--surface-alt);
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    transition: border-color 0.2s, background 0.2s;
}

.searchbox input::placeholder { color: var(--ink-faint); }

.searchbox input:focus {
    outline: none;
    background: var(--surface);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.searchbox button {
    position: absolute;
    right: 4px;
    top: 4px;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--ink-muted);
    cursor: pointer;
}

.searchbox button:hover { color: var(--accent); }

.headtools {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-left: auto;
}

/* Zenkliukai be paraso: piktograma + skaicius uzima maziau vietos ir
   atrodo ramiau nei piktograma su tekstu po ja. */
.headtool {
    position: relative;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: var(--r-sm);
    color: var(--ink);
    text-decoration: none;
    transition: background 0.2s;
}

.headtool:hover { background: var(--surface-alt); color: var(--ink); }
.headtool i { font-size: 1.3rem; }

.headtool__count {
    position: absolute;
    top: 1px;
    right: 1px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: grid;
    place-items: center;
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    background: var(--accent);
    border: 2px solid var(--surface);
    border-radius: 999px;
}

/* Kontaktu mygtukas: apvalus, tamsus - vienintelis rysku elementas
   antrasteje, todel akis prie jo grizta be jokiu strelyciu */
.headcta {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    height: 44px;
    padding-inline: var(--sp-5);
    margin-left: var(--sp-3);
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: var(--fs-sm);
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.2s;
}

.headcta:hover { background: var(--accent-hover); color: #fff; }

@media (max-width: 1199.98px) {
    .headcta { display: none; }
}

/* Mobiliajame paieska keliauja i savo eilute.
   Vienoje eiluteje su logotipu ir zenkliukais jai lieka apie 60px - tai
   ne laukelis, o griuvesiai. */
@media (max-width: 767.98px) {
    .masthead__row {
        flex-wrap: wrap;
        row-gap: var(--sp-3);
        padding-block: var(--sp-3);
    }

    .brand     { order: 1; }
    .headtools { order: 2; }

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

/* --- Kategoriju navigacija -------------------------------------------
   Viena eilute stalinio kompiuterio ekrane. Netelpant - horizontalus
   slinkimas, o ne antra eilute. */

.mainnav {
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}

.mainnav__row {
    display: flex;
    align-items: stretch;
    gap: var(--sp-4);
}

/* Katalogo mygtukas atskirtas linija - pirmas dalykas eiluteje ir
   vienintelis paryskintas, todel skaitomas kaip pagrindinis iejimas */
.mainnav__catalog {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5) var(--sp-4) 0;
    margin-right: var(--sp-2);
    border-right: 1px solid var(--line);
    font-weight: 600;
    font-size: var(--fs-base);
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
}

.mainnav__catalog i { font-size: 1.15rem; }
.mainnav__catalog:hover { color: var(--ink-muted); }

.mainnav__list {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
}

.mainnav__list::-webkit-scrollbar { display: none; }

.mainnav__link {
    display: flex;
    align-items: center;
    height: 100%;
    padding: var(--sp-4) var(--sp-4);
    font-size: var(--fs-base);
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
    box-shadow: inset 0 -2px 0 transparent;
    transition: box-shadow 0.2s, color 0.2s;
}

.mainnav__link:hover,
.mainnav__link[aria-current="page"] {
    color: var(--ink);
    box-shadow: inset 0 -2px 0 var(--ink);
}

@media (max-width: 767.98px) {
    .mainnav__catalog { padding-block: var(--sp-3); }
    .mainnav__link { padding: var(--sp-3); }
}

/* Rodykle pasisuka, kai langas atidarytas - vienintele uzuomina, kad
   mygtukas kazka atidaro, o ne veda i kita puslapi */
.mainnav__catalog .bi-chevron-down {
    font-size: 0.75rem;
    transition: transform 0.2s;
}

.mainnav__catalog[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }

/* --- Kategoriju langas -------------------------------------------------
   Visas medis vienu zvilgsniu. Pirkejas, kuris nezino tikslaus prekes
   pavadinimo, kitaip turetu spaudineti po viena skyriu ir grizti atgal.

   Stulpeliai dedami CSS kolonomis, o ne tinkleliu: skyriai skirtingo
   aukscio, ir kolonos juos ispildo be tarpu, o tinklelis paliktu skyles. */
.megamenu {
    border-bottom: 1px solid var(--line);
    background: var(--surface);
    box-shadow: 0 12px 24px -12px rgb(13 27 47 / 0.15);
}

.megamenu__inner {
    padding-block: var(--sp-6);
    columns: 1;
    column-gap: var(--sp-6);
}

@media (min-width: 576px)  { .megamenu__inner { columns: 2; } }
@media (min-width: 992px)  { .megamenu__inner { columns: 3; } }
@media (min-width: 1200px) { .megamenu__inner { columns: 4; } }

/* break-inside: skyrius niekada neperskeliamas per du stulpelius */
.megamenu__group {
    break-inside: avoid;
    margin-bottom: var(--sp-6);
}

.megamenu__title {
    display: block;
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    margin-bottom: var(--sp-3);
}

.megamenu__title:hover { color: var(--ink-muted); }

.megamenu__list { list-style: none; margin: 0; padding: 0; }

.megamenu__link {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding-block: 5px;
    font-size: var(--fs-sm);
    color: var(--ink-muted);
    text-decoration: none;
}

.megamenu__link::before {
    content: "";
    width: 4px;
    height: 4px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--line-strong);
    transition: background 0.15s;
}

.megamenu__link:hover { color: var(--ink); }
.megamenu__link:hover::before { background: var(--ink); }

/* ==========================================================================
   4. HERO
   ========================================================================== */

.hero {
    display: grid;
    gap: var(--sp-3);
    grid-template-columns: 1fr;
}

@media (min-width: 992px) {
    .hero {
        grid-template-columns: 1.15fr 1fr;
        align-items: stretch;
    }
}

.hero__slide {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 340px;
    padding: var(--sp-6);
    border-radius: var(--r-md);
    background: var(--surface-deep);
    color: #fff;
    overflow: hidden;
}

@media (min-width: 992px) {
    .hero__slide { min-height: 440px; padding: var(--sp-7); }
}

.hero__slide::after {
    /* Svelnus tamsinimas, kad tekstas liktu skaitomas ant bet kokios
       nuotraukos. Be jo antraste ant sviesios nuotraukos dingsta. */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgb(15 21 25 / 0.92) 38%, rgb(15 21 25 / 0.45) 100%);
}

.hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero__body {
    position: relative;
    z-index: 1;
    max-width: 30rem;
}

.hero__title {
    font-size: var(--fs-2xl);
    line-height: 1.15;
    color: #fff;
    margin-bottom: var(--sp-3);
}

@media (min-width: 992px) {
    .hero__title { font-size: var(--fs-4xl); }
}

.hero__text {
    font-size: var(--fs-lg);
    line-height: 1.55;
    color: #cfd8dd;
    margin-bottom: var(--sp-5);
}

/* Salutiniai kvadratai: kategorijos arba akcijos */
.hero__side {
    display: grid;
    gap: var(--sp-3);
    grid-template-rows: 1fr 1fr;
}

.hero__tile {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 160px;
    padding: var(--sp-4);
    border-radius: var(--r-md);
    background: var(--surface-alt);
    color: var(--ink);
    text-decoration: none;
    overflow: hidden;
    transition: box-shadow 0.25s;
}

.hero__tile:hover { box-shadow: var(--shadow-md); }
.hero__tile:hover .hero__tile-img { transform: scale(1.04); }

.hero__tile-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero__tile-label {
    position: relative;
    z-index: 1;
    padding: var(--sp-2) var(--sp-3);
    background: rgb(255 255 255 / 0.94);
    border-radius: var(--r-sm);
    font-weight: 600;
    font-size: var(--fs-base);
}

/* ==========================================================================
   5. MYGTUKAI
   ========================================================================== */

.btn-shop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    height: 44px;
    padding-inline: var(--sp-5);
    font-size: var(--fs-base);
    font-weight: 500;
    white-space: nowrap;          /* mygtuko tekstas niekada nesilauzo */
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.1s;
}

.btn-shop:active { transform: translateY(1px); }

.btn-shop--primary {
    background: var(--accent);
    color: #fff;                  /* kontrastas su #0d1b2f = 16:1, virs AAA */
}

.btn-shop--primary:hover { background: var(--accent-hover); color: #fff; }

.btn-shop--light {
    background: #fff;
    color: var(--ink);
}

.btn-shop--light:hover { background: #eef1f2; color: var(--ink); }

.btn-shop--ghost {
    background: transparent;
    border-color: var(--line-strong);
    color: var(--ink);
}

.btn-shop--ghost:hover { border-color: var(--ink); color: var(--ink); }

.btn-shop--sm { height: 38px; padding-inline: var(--sp-4); font-size: var(--fs-sm); }
.btn-shop--block { width: 100%; }

/* ==========================================================================
   6. KATEGORIJU PLYTELES
   ========================================================================== */

.catrail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(140px, 1fr);
    gap: var(--sp-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: var(--sp-2);
}

.catrail::-webkit-scrollbar { display: none; }

@media (min-width: 768px) {
    .catrail {
        grid-auto-flow: row;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        overflow: visible;
    }
}

.cattile {
    scroll-snap-align: start;
    text-decoration: none;
    color: var(--ink);
    display: block;
}

.cattile__frame {
    position: relative;
    aspect-ratio: 1;
    margin-bottom: var(--sp-3);
    border-radius: var(--r-md);
    background: var(--surface-alt);
    overflow: hidden;
}

.cattile__frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.cattile:hover .cattile__frame img { transform: scale(1.05); }

/* Kategorija be nuotraukos: tipografine plytele, o ne netikra nuotrauka.
   Tuscia vieta sazininga; suklastota nuotrauka - ne. */
.cattile__blank {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--ink-faint);
    font-size: 1.75rem;
}

.cattile__name {
    font-size: var(--fs-sm);
    line-height: 1.35;
    text-align: center;
}

.cattile:hover .cattile__name { color: var(--accent); }

/* ==========================================================================
   7. PREKES KORTELE
   ========================================================================== */

.pcard {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: border-color 0.25s, box-shadow 0.25s;
}

.pcard:hover {
    border-color: var(--line-strong);
    box-shadow: var(--shadow-md);
}

.pcard__frame {
    position: relative;
    display: block;
    aspect-ratio: 1;
    background: var(--surface-alt);
    overflow: hidden;
}

.pcard__frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.pcard:hover .pcard__frame img { transform: scale(1.04); }

.pcard__blank {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--ink-faint);
    font-size: 2rem;
}

.pcard__tag {
    position: absolute;
    top: var(--sp-3);
    left: var(--sp-3);
    z-index: 1;
    padding: 3px var(--sp-2);
    font-size: var(--fs-xs);
    font-weight: 600;
    border-radius: var(--r-sm);
    background: var(--danger);
    color: #fff;
}

.pcard__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: var(--sp-4);
    gap: var(--sp-2);
}

.pcard__brand {
    font-size: var(--fs-xs);
    color: var(--ink-faint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.pcard__name {
    font-size: var(--fs-base);
    font-weight: 500;
    line-height: 1.4;
    margin: 0;
}

.pcard__name a { color: var(--ink); text-decoration: none; }
.pcard__name a:hover { color: var(--accent); }

.pcard__foot { margin-top: auto; padding-top: var(--sp-2); }

.price { font-size: var(--fs-lg); font-weight: 600; color: var(--ink); }
.price del { font-size: var(--fs-sm); font-weight: 400; color: var(--ink-faint); margin-right: var(--sp-2); }
.price--sale strong { color: var(--danger); }

.pcard__stock {
    font-size: var(--fs-xs);
    color: var(--ink-muted);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
}

.pcard__stock--out { color: var(--ink-faint); }

/* Horizontalus prekiu takelis - kitokia sekcijos forma nei tinklelis,
   kad du gretimi prekiu blokai neatrodytu kaip tas pats du kartus. */
.prail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(230px, 1fr);
    gap: var(--sp-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: var(--sp-2);
}

.prail::-webkit-scrollbar { display: none; }
.prail > * { scroll-snap-align: start; }

@media (min-width: 1200px) {
    .prail { grid-auto-columns: minmax(0, 1fr); grid-template-columns: repeat(5, 1fr); overflow: visible; }
}

.pgrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-4);
}

@media (min-width: 768px)  { .pgrid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .pgrid { grid-template-columns: repeat(4, 1fr); } }

/* ==========================================================================
   7b. PREKES PUSLAPIS
   ========================================================================== */

.crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-5);
    padding: 0;
    list-style: none;
    font-size: var(--fs-sm);
    color: var(--ink-faint);
}

.crumbs a { color: var(--ink-muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs li:not(:last-child)::after { content: "/"; margin-left: var(--sp-2); color: var(--line-strong); }

.pdp {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-5);
}

@media (min-width: 992px) {
    .pdp { grid-template-columns: 1.1fr 1fr; gap: var(--sp-7); align-items: start; }

    /* Nuotrauka lieka matoma, kol skaitoma dešinė pusė: specifikacija ir
       pirkimo blokas yra aukštesni už galeriją, ir be šito ji nuslinktų
       iš akių jau ties pirmais matmenimis.

       Sustoja pati ties aprašymu - lipnus elementas niekada neišeina už
       savo tėvo (.pdp) ribų, o aprašymas jau yra už jų.

       Tik nuo 992px: telefone turinys eina vienas po kito, ir prilipusi
       nuotrauka tiesiog uždengtų pusę ekrano. */
    .pdp__gallery {
        position: sticky;
        top: calc(var(--header-h) + var(--sp-4));
    }

    /* Prilipes elementas, aukstesnis uz langa, savo apacios NIEKADA
       neparodo - miniatiuru tokiame ekrane nebutu imanoma pasiekti.
       Todel nuotrauka negali buti aukstesne, nei telpa po antraste.

       Atimam: lipnumo tarpa virsuje (88), tarpa iki miniatiuru (12),
       paciu miniatiuru eilute (68) ir kvepavima apacioje (16).

       Placiame ekrane si riba nieko nekeicia - kvadratine nuotrauka
       ten ir taip zemesne. Ji isijungia tik zemuose languose. */
    .pdp__gallery .gallery__main {
        max-height: calc(100dvh - 184px);
    }
}

.gallery__main {
    position: relative;
    aspect-ratio: 1;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface-alt);
    overflow: hidden;
    margin-bottom: var(--sp-3);
}

.gallery__main img { width: 100%; height: 100%; object-fit: cover; }

.gallery__blank { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-faint); font-size: 3rem; }

.gallery__main img { cursor: zoom-in; }

/* Rodykles ir didinimo zenklas pasirodo tik uzvedus - kol pele toli,
   jie tik uzdengtu prekes nuotrauka. Telefone rodom visada, nes ten
   uzvedimo nera. */
.gallery__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: rgb(255 255 255 / 0.92);
    color: var(--ink);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s, background 0.2s;
}

.gallery__nav--prev { left: var(--sp-3); }
.gallery__nav--next { right: var(--sp-3); }

.gallery__main:hover .gallery__nav { opacity: 1; }
.gallery__nav:hover { background: #fff; }

.gallery__zoom {
    position: absolute;
    right: var(--sp-3);
    bottom: var(--sp-3);
    z-index: 2;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: var(--r-sm);
    background: rgb(255 255 255 / 0.92);
    color: var(--ink-muted);
    font-size: 0.85rem;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}

.gallery__main:hover .gallery__zoom { opacity: 1; }

@media (hover: none) {
    .gallery__nav, .gallery__zoom { opacity: 1; }
}

.gallery__thumbs { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.thumb-select {
    width: 68px;
    height: 68px;
    object-fit: cover;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: border-color 0.2s;
}

.thumb-select:hover,
.thumb-select.is-active { border-color: var(--accent); }

.pdp__brand { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); margin-bottom: var(--sp-2); }
.pdp__title { font-size: var(--fs-2xl); line-height: 1.2; margin-bottom: var(--sp-2); }
.pdp__sku   { font-size: var(--fs-sm); color: var(--ink-faint); margin-bottom: var(--sp-5); }

.pdp__price { margin-bottom: var(--sp-4); }
.pdp__price .price { font-size: var(--fs-3xl); }
.pdp__price .price del { font-size: var(--fs-lg); }

.pdp__stock {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    background: var(--accent-soft);
    color: var(--accent);
    margin-bottom: var(--sp-4);
}

.pdp__stock--out { background: var(--surface-alt); color: var(--ink-muted); }

.pdp__lead { font-size: var(--fs-lg); line-height: 1.6; color: var(--ink-muted); margin-bottom: var(--sp-5); }

.pdp__buy {
    padding: var(--sp-5);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface-alt);
    margin-bottom: var(--sp-5);
}

.pdp__buyrow { display: flex; gap: var(--sp-3); align-items: flex-end; }

.qty {
    flex: 0 0 96px;
}

.qty label { display: block; font-size: var(--fs-sm); color: var(--ink-muted); margin-bottom: var(--sp-2); }

.qty input {
    width: 100%;
    height: 44px;
    padding-inline: var(--sp-3);
    text-align: center;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--surface);
    font-size: var(--fs-base);
}

.pdp__buyrow .btn-shop { flex: 1 1 auto; }

.pdp__field { margin-bottom: var(--sp-4); }
.pdp__field label { display: block; font-size: var(--fs-sm); color: var(--ink-muted); margin-bottom: var(--sp-2); }

.pdp__field select {
    width: 100%;
    height: 44px;
    padding-inline: var(--sp-3);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--surface);
    font-size: var(--fs-base);
    color: var(--ink);
}

/* Specifikacija: dvieju stulpeliu eilutes be linijos po kiekviena.
   Hairline po kas antra eilute skaitosi ramiau nei po visomis. */
.spec { display: grid; gap: 0; font-size: var(--fs-sm); }

.spec__row {
    display: grid;
    grid-template-columns: 40% 1fr;
    gap: var(--sp-3);
    padding-block: var(--sp-3);
}

.spec__row + .spec__row { border-top: 1px solid var(--line); }
.spec__key { color: var(--ink-muted); }
.spec__val { color: var(--ink); }

.pdp__trust { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); }

.pdp__trust div { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-sm); color: var(--ink-muted); }
.pdp__trust i { color: var(--accent); font-size: 1.125rem; line-height: 1.3; }

/* --- Padidinta perziura ------------------------------------------------ */

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1080;      /* virs lipnios antrastes (1030) */
    display: none;
    place-items: center;
    padding: var(--sp-5);
    background: rgb(13 27 47 / 0.94);
}

.lightbox.is-open { display: grid; }

.lightbox__image {
    max-width: 100%;
    max-height: 88vh;
    object-fit: contain;
    border-radius: var(--r-sm);
}

.lightbox__close,
.lightbox__nav {
    position: absolute;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid rgb(255 255 255 / 0.25);
    border-radius: 50%;
    background: rgb(255 255 255 / 0.08);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.2s;
}

.lightbox__close:hover,
.lightbox__nav:hover { background: rgb(255 255 255 / 0.2); }

.lightbox__close { top: var(--sp-4); right: var(--sp-4); }
.lightbox__nav--prev { left: var(--sp-4); top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: var(--sp-4); top: 50%; transform: translateY(-50%); }

@media (max-width: 575.98px) {
    .lightbox { padding: var(--sp-3); }
    .lightbox__nav { width: 40px; height: 40px; }
    .lightbox__nav--prev { left: var(--sp-2); }
    .lightbox__nav--next { right: var(--sp-2); }
}

/* --- Patvirtinimas idejus i krepseli ----------------------------------- */

.addedbox {
    position: fixed;
    right: var(--sp-4);
    bottom: var(--sp-4);
    z-index: 1070;
    width: min(360px, calc(100vw - 2 * var(--sp-4)));
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: 0 18px 40px -18px rgb(13 27 47 / 0.35);
    overflow: hidden;
    animation: addedIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes addedIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.addedbox.is-hidden { display: none; }

.addedbox__head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-4) var(--sp-4) var(--sp-2);
    font-size: var(--fs-base);
}

.addedbox__head i { color: var(--success); font-size: 1.1rem; }

.addedbox__close {
    margin-left: auto;
    border: 0;
    background: none;
    color: var(--ink-faint);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 4px;
}

.addedbox__close:hover { color: var(--ink); }

.addedbox__body {
    padding: 0 var(--sp-4) var(--sp-4);
    font-size: var(--fs-sm);
    color: var(--ink-muted);
    line-height: 1.45;
}

.addedbox__foot {
    display: flex;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border-top: 1px solid var(--line);
    background: var(--surface-alt);
}

.addedbox__foot > * { flex: 1 1 0; }

.prose { max-width: 68ch; line-height: 1.7; color: var(--ink-muted); }
.prose h2, .prose h3 { color: var(--ink); margin-top: var(--sp-5); margin-bottom: var(--sp-3); }
.prose p  { margin-bottom: var(--sp-4); }
.prose ul, .prose ol { margin-bottom: var(--sp-4); padding-left: 1.25rem; }
.prose img { max-width: 100%; height: auto; border-radius: var(--r-sm); }

/* ==========================================================================
   7c. KREPSELIS IR ATSISKAITYMAS
   ========================================================================== */

.checkout-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-5);
    align-items: start;
}

@media (min-width: 992px) {
    .checkout-grid { grid-template-columns: 1fr 380px; gap: var(--sp-6); }
}

.panel {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
}

.panel__head {
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--line);
    font-weight: 600;
}

.panel__body { padding: var(--sp-5); }

/* Suvestine lipni: pirkejas mato suma, kol pildo forma */
.summary { position: sticky; top: calc(var(--header-h) + var(--sp-4)); }

.summary__row {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-4);
    padding-block: var(--sp-2);
    font-size: var(--fs-base);
}

.summary__row--total {
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--line);
    font-size: var(--fs-xl);
    font-weight: 600;
}

.summary__row--muted { color: var(--ink-muted); font-size: var(--fs-sm); }

/* Krepselio eilute */
.cartline {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    gap: var(--sp-4);
    align-items: center;
    padding-block: var(--sp-4);
}

.cartline + .cartline { border-top: 1px solid var(--line); }

.cartline__img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--r-sm);
    background: var(--surface-alt);
}

.cartline__name { font-weight: 500; line-height: 1.4; }
.cartline__name a { color: var(--ink); text-decoration: none; }
.cartline__name a:hover { color: var(--accent); }
.cartline__meta { font-size: var(--fs-sm); color: var(--ink-faint); margin-top: 2px; }

.cartline__side { display: flex; align-items: center; gap: var(--sp-4); }
.cartline__qty  { width: 68px; }

.cartline__qty input {
    width: 100%;
    height: 38px;
    text-align: center;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--surface);
}

.cartline__sum { min-width: 90px; text-align: right; font-weight: 600; }

.cartline__del {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--ink-faint);
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.cartline__del:hover { background: var(--surface-alt); color: var(--danger); }

@media (max-width: 575.98px) {
    .cartline { grid-template-columns: 60px 1fr; row-gap: var(--sp-3); }
    .cartline__side { grid-column: 1 / -1; justify-content: space-between; }
    .cartline__img { width: 60px; height: 60px; }
}

/* Pasirinkimo eilute (pristatymas, apmokejimas) */
.choice {
    display: flex;
    gap: var(--sp-3);
    align-items: flex-start;
    padding: var(--sp-4);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.choice + .choice { margin-top: var(--sp-3); }
.choice:hover { border-color: var(--line-strong); }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }

.choice input { margin-top: 3px; flex: 0 0 auto; }
.choice__name { font-weight: 500; }
.choice__meta { font-size: var(--fs-sm); color: var(--ink-muted); margin-top: 2px; }
.choice__price { margin-left: auto; font-weight: 600; white-space: nowrap; }

/* Formos laukai */
.field { margin-bottom: var(--sp-4); }
.field label { display: block; font-size: var(--fs-sm); color: var(--ink-muted); margin-bottom: var(--sp-2); }

.field input,
.field textarea,
.field select {
    width: 100%;
    min-height: 44px;
    padding: var(--sp-3);
    font-size: var(--fs-base);
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
}

.field input::placeholder { color: var(--ink-faint); }

.field input:focus,
.field textarea:focus,
.field select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.field .err { display: block; margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--danger); }
.field input.is-invalid, .field select.is-invalid { border-color: var(--danger); }

.fieldrow { display: grid; grid-template-columns: 1fr; gap: 0 var(--sp-4); }
@media (min-width: 576px) { .fieldrow--2 { grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   7d. PRISIJUNGIMAS IR REGISTRACIJA
   ========================================================================== */

.authbox {
    max-width: 26rem;
    margin-inline: auto;
    padding-block: var(--sp-5) var(--sp-7);
}

.authbox__title { font-size: var(--fs-2xl); margin-bottom: var(--sp-3); }

.authbox__lead {
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--ink-muted);
    margin-bottom: var(--sp-5);
}

.authbox__foot {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-top: var(--sp-5);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--line);
    font-size: var(--fs-sm);
    color: var(--ink-muted);
}

.authbox__foot a { color: var(--ink); }

/* ==========================================================================
   8. PRIVALUMU JUOSTA
   ========================================================================== */

.perks {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-5);
}

@media (min-width: 576px) { .perks { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .perks { grid-template-columns: repeat(4, 1fr); } }

.perk {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
}

.perk i {
    flex: 0 0 auto;
    font-size: 1.375rem;
    color: var(--accent);
    line-height: 1.2;
}

.perk__title { font-weight: 600; font-size: var(--fs-base); margin-bottom: 2px; }
.perk__text  { font-size: var(--fs-sm); color: var(--ink-muted); line-height: 1.45; }

/* ==========================================================================
   9. PORE
   ========================================================================== */

/* Pore balta, o ne tamsi: tamsi plokstuma puslapio apacioje uzbaigia ji
   per anksti ir vizualiai atskiria nuo turinio. Balta pore su plona
   linija skaitosi kaip to paties puslapio tesinys. */
.footer {
    background: var(--surface);
    color: var(--ink-muted);
    border-top: 1px solid var(--line);
    margin-top: var(--sp-8);
}

/* --- Patikimumo juosta ------------------------------------------------
   Rodo, kodel cia galima pirkti. Vieta pries kontaktus samoninga:
   pirkejas, nusiritęs iki apacios, dar svarsto. */
.trustband {
    padding-block: var(--sp-6);
    border-bottom: 1px solid var(--line);
}

.trustband__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-5);
}

@media (min-width: 576px) { .trustband__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .trustband__grid { grid-template-columns: repeat(4, 1fr); } }

.trust {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-4);
}

.trust__icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--ink);
}

.trust__icon svg { width: 22px; height: 22px; }

.trust__title { font-weight: 600; color: var(--ink); font-size: var(--fs-base); margin-bottom: 2px; }
.trust__text  { font-size: var(--fs-sm); line-height: 1.45; color: var(--ink-muted); }

/* Metu skaicius rodomas kaip skaicius, o ne kaip sakinys - jis yra
   stipriausias argumentas ir turi buti perskaitomas is pirmo zvilgsnio */
.trust__years {
    font-size: 1.05rem;   /* telpa i 46px apskritima kartu su paraisiais */
    font-weight: 600;
    line-height: 1;
    color: var(--ink);
    letter-spacing: -0.02em;
}

.footer h3 {
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--ink);
    margin-bottom: var(--sp-4);
}

.footer a { color: var(--ink-muted); text-decoration: none; }
.footer a:hover { color: var(--ink); }

.footer__main { padding-block: var(--sp-7) var(--sp-6); }

.footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-6);
}

@media (min-width: 768px)  { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr; } }
@media (min-width: 1200px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }

.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); font-size: var(--fs-sm); }

.footer__brand { font-size: var(--fs-xl); font-weight: 600; color: var(--ink); letter-spacing: -0.03em; }

.footer__bottom {
    padding-block: var(--sp-4);
    border-top: 1px solid var(--line);
    font-size: var(--fs-xs);
    color: var(--ink-faint);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--sp-3);
}

/* ==========================================================================
   10. TUSCIOS BUSENOS IR PRANESIMAI
   ========================================================================== */

.emptybox {
    padding: var(--sp-7) var(--sp-4);
    text-align: center;
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-md);
    color: var(--ink-muted);
}

.emptybox i { font-size: 2rem; color: var(--ink-faint); display: block; margin-bottom: var(--sp-3); }

/* ==========================================================================
   11. JUDESYS
   Judesio lygis 3: tik uzvedimo perejimai ir vienas ivadinis pasirodymas.
   Viskas islankstoma esant prefers-reduced-motion.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Fokusas matomas visur - klaviatura naudojantis pirkejas neturi pasiklysti */
a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}