/* ==========================================================================
   Nemokamu spalvu paleciu landing + produktu puslapiai
   Figma: "Namai Objektai - Landing Pages" / v2 - 01 Paletes (redesign)

   Sis failas NEPRIKLAUSO nuo Bootstrap ir nuo temos stylesheet.css.
   Jis kraunamas tik palette_header.tpl, t.y. tik siuose puslapiuose:
     - kategorija 57 (landing)
     - produktai 351 / 937 / 2219 (brandu puslapiai)
   ========================================================================== */

:root {
    --pal-primary: #354151;
    --pal-primary-dark: #2a3340;
    --pal-ink: #1F242B;
    --pal-muted: #5B6068;
    --pal-white: #FFFFFF;
    --pal-bg-light: #F7F5F1;
    --pal-bg-warm: #EDE8E0;
    --pal-divider: #DED8CE;
    --pal-divider-strong: #D9D0C4;

    --pal-serif: "Libre Baskerville", Georgia, "Times New Roman", serif;
    --pal-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

    /* 2026-10-06. Pamatuota is Figma 2x eksporto (1 dizaino px = 2 px kadre).
       1440 px kadre turinys prasideda ties x=70 ir baigiasi ties x=1370, t. y.
       turinio plotis 1300 px, o sonines parastes po 70 px. Iki tol cia buvo
       max-width:1300 + 20 px parastes, todel turinys buvo 1260 px plocio ir
       visa desktop versija ejo 40 px siauriau nei dizaine: kortele 402 vietoj
       417 px, galerija 610 vietoj 630 px. Butent tai klientas vadino
       "desktop versijoje taip pat nepasikeite". */
    --pal-container: 1440px;
    --pal-gutter: 70px;
    --pal-header-h: 68px;
    --pal-sticky-h: 0px;
}

/* --------------------------------------------------------------- reset -- */

.pal *,
.pal *::before,
.pal *::after { box-sizing: border-box; }

html.pal-html { scroll-behavior: smooth; }

body.pal {
    margin: 0;
    padding: 0;
    font-family: var(--pal-sans);
    font-size: 15px;
    line-height: 1.3;
    color: var(--pal-ink);
    background: var(--pal-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Paletes puslapiuose kraunamas TIK sis stilius (be Bootstrap), todel resetas
   rasomas grynais elementu selektoriais. Su ".pal" priesagos specifiskumas
   butu 0,1,1 ir nustelbtu visas vienos klases taisykles (pvz. .pal-usps
   margin-bottom), o to nesimato is karto ir sunku aptikti. */
img { max-width: 100%; display: block; border: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4, p, ul, ol, figure {
    margin: 0;
    padding: 0;
}

ul { list-style: none; }

.pal-container {
    max-width: var(--pal-container);
    margin: 0 auto;
    padding-left: var(--pal-gutter);
    padding-right: var(--pal-gutter);
}

/* Prieinamumas: matomas fokusas klaviatura naudojantiems. */
.pal a:focus-visible,
.pal button:focus-visible {
    outline: 2px solid var(--pal-primary);
    outline-offset: 2px;
}

/* .pal-card__title: gamintojo pavadinimas jau matomas logotipe, todel
   vizualiai jis dubliuotusi. Is DOM nesalinam - <h3> reikalingas antrasciu
   hierarchijai, SEO ir ekrano skaitykloms, kurioms logotipas yra tik alt. */
.pal-visually-hidden,
.pal-card__title {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Sekcija, i kuria vedama is CTA. scroll-margin-top, kad lipnus header
   neuzdengtu antrastes. */
.pal [id] { scroll-margin-top: calc(var(--pal-header-h) + 16px); }

/* -------------------------------------------------------------- header -- */

.pal-header {
    background: var(--pal-white);
    border-bottom: 1px solid var(--pal-divider);
}

/* Virsutine juosta yra vienintele vieta, kuri NESILAIKO 70 px parasciu:
   Figmoje logotipas prasideda ties x=36, o krepselio ikona baigiasi ties
   x=1397 (1440 px kadre), t. y. parastes ~40 px. */
.pal-header__inner {
    max-width: var(--pal-container);
    margin: 0 auto;
    padding: 9px 40px;
    min-height: var(--pal-header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.pal-header__logo { display: block; flex: 0 0 auto; }
.pal-header__logo img,
.pal-header__logo svg { height: 50px; width: auto; }

.pal-header__actions {
    display: flex;
    align-items: center;
    gap: 22px;
}

/* Konsultavimo telefonas. Desktope - ikona + tekstas + numeris, mobile -
   tik ikona pries krepseli (2026-10-05 saraso 3 p.). */
.pal-consult {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--pal-ink);
}

.pal-consult img { flex: 0 0 auto; width: 20px; height: 20px; }

.pal-consult__label {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.pal-consult__text { font-size: 12px; color: var(--pal-muted); }
.pal-consult__number { font-size: 15px; font-weight: 600; white-space: nowrap; }

.pal-cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--pal-ink);
}

.pal-cart svg,
.pal-cart img { width: 24px; height: 24px; }

.pal-cart__count {
    position: absolute;
    top: 4px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--pal-primary);
    color: var(--pal-white);
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
}

.pal-cart__count[hidden] { display: none; }

/* ---------------------------------------------------------- breadcrumb -- */

.pal-breadcrumb {
    background: var(--pal-bg-light);
    border-bottom: 1px solid var(--pal-divider);
}

.pal-breadcrumb ol {
    max-width: var(--pal-container);
    margin: 0 auto;
    padding: 15px var(--pal-gutter);
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    line-height: 1.3;
    color: var(--pal-muted);
}

.pal-breadcrumb li { display: flex; align-items: center; gap: 12px; }
.pal-breadcrumb li + li::before { content: "\203A"; color: var(--pal-divider-strong); }
.pal-breadcrumb a:hover { color: var(--pal-ink); }
.pal-breadcrumb [aria-current] { font-weight: 500; }

/* ------------------------------------------------------------- mygtukai -- */

.pal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 28px;
    border: 1px solid transparent;
    border-radius: 2px;
    font-family: var(--pal-sans);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.pal-btn--primary {
    background: var(--pal-primary);
    color: var(--pal-white);
}
.pal-btn--primary:hover { background: var(--pal-primary-dark); }

.pal-btn--ghost {
    background: transparent;
    border-color: var(--pal-primary);
    color: var(--pal-primary);
}
.pal-btn--ghost:hover { background: var(--pal-primary); color: var(--pal-white); }

.pal-btn--block { width: 100%; }

/* Hero ir baigiamasis CTA yra flex stulpeliai - be sito inline mygtukas
   issitemptu per visa konteinerio ploti. */
.pal-hero__content > .pal-btn { align-self: flex-start; }

.pal-btn[disabled],
.pal-btn[aria-busy="true"] { opacity: .65; cursor: default; }

.pal-btn__arrow { font-size: 18px; line-height: 1; }

/* ---------------------------------------------------------------- hero -- */

.pal-hero { background: var(--pal-bg-warm); }

.pal-hero__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
}

.pal-hero__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 56px 70px 56px max(var(--pal-gutter), calc((100vw - var(--pal-container)) / 2 + var(--pal-gutter)));
}

.pal-eyebrow {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pal-primary);
    margin-bottom: 18px;
}

.pal-hero__title {
    font-family: var(--pal-serif);
    font-weight: 400;
    font-size: 48px;
    line-height: 1.21;
    letter-spacing: -.005em;
    color: var(--pal-ink);
    margin-bottom: 20px;
}

.pal-hero__lead {
    font-size: 18px;
    line-height: 1.5;
    color: var(--pal-muted);
    margin-bottom: 40px;
}

.pal-hero__image {
    width: 100%;
    height: 100%;
    min-height: 420px;
    object-fit: cover;
}

/* Trys privalumai po hero tekstu */
.pal-usps {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    margin-bottom: 36px;
}

.pal-usp {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 200px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
}

.pal-usp svg,
.pal-usp img { flex: 0 0 auto; width: 34px; height: 34px; color: var(--pal-primary); }

/* ------------------------------------------------- sekciju antrastes -- */

.pal-section { padding: 64px 0; }
.pal-section--warm { background: var(--pal-bg-warm); }
.pal-section--light { background: var(--pal-bg-light); }

.pal-section__head { text-align: center; margin-bottom: 32px; }

.pal-section__title {
    font-family: var(--pal-serif);
    font-weight: 400;
    font-size: 36px;
    line-height: 1.22;
    letter-spacing: -.005em;
    color: var(--pal-ink);
}

.pal-section__subtitle {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.3;
    color: var(--pal-muted);
}

/* Sekcija su antraste kaireje ir trimis privalumais desineje
   ("Kas yra sioje paleteje?"). */
.pal-split {
    display: grid;
    grid-template-columns: 520fr 780fr;
    gap: 60px;
    align-items: start;
}

/* --------------------------------------------------- paleciu korteles -- */

/* Figmoje kortele 417 px, tarpas 24 px: 3x417 + 2x24 = 1300 = turinio plotis. */
.pal-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.pal-card {
    display: flex;
    flex-direction: column;
    background: var(--pal-white);
    border: 1px solid var(--pal-divider);
    border-radius: 2px;
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease;
}

.pal-card:hover {
    box-shadow: 0 10px 30px rgba(31, 36, 43, .10);
    transform: translateY(-2px);
}

/* SVARBU: 'height: auto' yra butinas. <img> turi width="830" height="504"
   atributus (jie reikalingi, kad puslapis nesokinetu kraunantis), bet narsykle
   juos taiko kaip CSS 'width'/'height' - o kai abu matmenys nurodyti,
   'aspect-ratio' ignoruojamas. Be sios eilutes nuotrauka buvo pastumiama i
   400x504 px, t. y. vertikali, nors taisykle atrode teisinga. */
.pal-card__media {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 415 / 252;
    object-fit: cover;
    background: var(--pal-bg-light);
}

.pal-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 22px 24px 24px;
}

.pal-card__logo {
    height: 36px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    object-position: left center;
    margin-bottom: 14px;
}

.pal-card__text {
    font-size: 15px;
    line-height: 1.3;
    color: var(--pal-muted);
    margin-bottom: 22px;
}

.pal-card__cta {
    margin-top: auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    border: 1px solid var(--pal-ink);
    border-radius: 2px;
    font-size: 14px;
    font-weight: 600;
    transition: background-color .18s ease, color .18s ease;
}

.pal-card:hover .pal-card__cta { background: var(--pal-ink); color: var(--pal-white); }

/* Visa kortele paspaudziama: nuoroda istempiama per visa kortele, o
   tikrasis <a> lieka vienas - taip islieka tvarkinga skaitykliu semantika. */
.pal-card { position: relative; }
.pal-card__cta::after {
    content: "";
    position: absolute;
    inset: 0;
}

/* Mobili karusele */
.pal-cards--carousel { position: relative; }

.pal-carousel__nav { display: none; }

/* ------------------------------------------------------ kodel verta? -- */

.pal-why {
    display: grid;
    grid-template-columns: 570fr 870fr;
    align-items: stretch;
    background: var(--pal-bg-warm);
}

.pal-why__image {
    width: 100%;
    height: 100%;
    min-height: 310px;
    object-fit: cover;
}

.pal-why__content {
    padding: 46px 70px 46px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pal-why__title {
    font-family: var(--pal-serif);
    font-weight: 400;
    font-size: 30px;
    line-height: 1.33;
    margin-bottom: 26px;
}

.pal-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.pal-feature__icon { width: 44px; height: 44px; color: var(--pal-primary); margin-bottom: 12px; }
.pal-feature__title { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.pal-feature__text { font-size: 14px; line-height: 1.3; color: var(--pal-muted); }

/* 2026-10-06. Prekes puslapio "Kas yra sioje paletuje?" bloke (sekcija
   .pal-section--warm) Figmoje stulpelius skiria plonos vertikalios linijos:
   38 px tarpas iki linijos, 20 px uz jos, stulpeliu zingsnis 220 px.
   Landing puslapio "Kodel verta..." bloke (.pal-why) tokiu linijus NERA,
   todel taisykle taikoma tik .pal-section--warm. */
.pal-section--warm .pal-features { column-gap: 58px; }
.pal-section--warm .pal-features > div + div { position: relative; }
/* Linija piesiama pseudoelementu, o ne stulpelio remeliu: taip visi trys
   teksto stulpeliai lieka vienodo plocio (su border+padding antrasis ir
   trecias butu 21 px siauresni uz pirma). 58 = 38 px iki linijos + 20 px uz jos. */
.pal-section--warm .pal-features > div + div::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -20px;
    border-left: 1px solid var(--pal-divider);
}

/* ----------------------------------------------------- kaip tai veikia -- */

.pal-process__title {
    font-family: var(--pal-serif);
    font-weight: 400;
    font-size: 32px;
    line-height: 1.25;
    margin-bottom: 26px;
}

/* Tik desktope. 2026-10-05 sarase (13 p.) buvo nurodyti vien brandu puslapiai,
   bet 2026-10-06 klientas patikslino, kad antraste turi buti centruota ir
   pagrindiniame paleciu landing'e (LT + EE). Mobiliame lieka kairineje. */
@media (min-width: 768px) {
    .pal-process__title--center { text-align: center; }
}

.pal-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.pal-step { display: flex; align-items: flex-start; gap: 16px; }

.pal-step__num {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border: 1px solid var(--pal-divider-strong);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--pal-serif);
    font-size: 17px;
    color: var(--pal-ink);
}

.pal-step__title { font-size: 17px; font-weight: 600; margin-bottom: 6px; }
.pal-step__text { font-size: 15px; line-height: 1.3; color: var(--pal-muted); }

/* ------------------------------------------------------------ final CTA -- */

/* Nuotrauka nurodoma CSS, o ne sablonuose - taip ji garantuotai vienoda
   landing ir visuose trijuose brandu puslapiuose (2026-10-05 saraso 6 p.).
   Keliai santykiniai stiliu failui, todel <base href> ju neliecia. */
.pal-final {
    position: relative;
    min-height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--pal-bg-warm) url("../image/palette/cta-background.jpg") center / cover no-repeat;
}

/* 2026-10-06. Cia buvo smelio spalvos uzdanga rgba(237, 232, 224, .78), kurios
   Figmoje nera - nei desktop (v2/04), nei mobile (v2/05) kadre. Su .78 tamsiausias
   imanomas pikselis tampa (185,181,175), t. y. zalsvi potepiai issiplauna i
   beveik balta. Figmoje potepiai lieka sodrus, tokie pat kaip originalioje
   nuotraukoje (~111..151 R), todel uzdangos nebelieka.
   Pseudoelementas paliekamas - juo remiasi .pal-final__content sluoksniavimas. */
.pal-final::before {
    content: "";
    position: absolute;
    inset: 0;
}

.pal-final__content {
    position: relative;
    padding: 40px var(--pal-gutter);
    max-width: 700px;
}

.pal-final__title {
    font-family: var(--pal-serif);
    font-weight: 400;
    font-size: 34px;
    line-height: 1.24;
    margin-bottom: 12px;
}

.pal-final__text {
    font-size: 15px;
    line-height: 1.3;
    color: var(--pal-muted);
    margin-bottom: 22px;
}

/* --------------------------------------------------------------- footer -- */

.pal-footer { background: var(--pal-bg-light); border-top: 1px solid var(--pal-divider); }

.pal-benefits {
    max-width: var(--pal-container);
    margin: 0 auto;
    padding: 28px var(--pal-gutter);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.pal-benefit {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 30px;
    font-size: 13px;
    line-height: 1.3;
}

.pal-benefit + .pal-benefit { border-left: 1px solid var(--pal-divider-strong); }
.pal-benefit svg,
.pal-benefit img { flex: 0 0 auto; width: 32px; height: 32px; color: var(--pal-primary); }
.pal-benefit strong { display: block; font-weight: 400; }
.pal-benefit a:hover { text-decoration: underline; }

.pal-legal {
    border-top: 1px solid var(--pal-divider);
    font-size: 12px;
    color: var(--pal-muted);
}

.pal-legal__inner {
    max-width: var(--pal-container);
    margin: 0 auto;
    padding: 16px var(--pal-gutter);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    justify-content: space-between;
}

.pal-legal__links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.pal-legal a:hover { color: var(--pal-ink); text-decoration: underline; }

/* ==========================================================================
   Produkto (brando) puslapis
   ========================================================================== */

.pal-back {
    background: var(--pal-bg-light);
    border-bottom: 1px solid var(--pal-divider);
}

.pal-back__inner {
    max-width: var(--pal-container);
    margin: 0 auto;
    padding: 14px var(--pal-gutter);
    display: flex;
    align-items: center;
    gap: 24px;
    font-size: 15px;
    font-weight: 500;
    color: var(--pal-primary);
}

.pal-back a:hover { text-decoration: underline; }

/* Figma (LT_03 / EE_03): sekcija prasideda ties y=136, galerija - ties y=186
   (virsus 50 px); miniatiuros baigiasi ties y=791, sekcija - ties y=858
   (apacia 67 px). */
.pal-product {
    background: var(--pal-bg-light);
    padding: 50px 0 67px;
}

/* Galerija 630 px, tarpas 66 px, tekstas 604 px: 630+66+604 = 1300. */
.pal-product__grid {
    display: grid;
    grid-template-columns: 630fr 604fr;
    gap: 66px;
    align-items: start;
}

/* ------------------------------------------------------------- galerija -- */

.pal-gallery__main {
    position: relative;
    width: 100%;
    aspect-ratio: 630 / 490;
    background: var(--pal-white);
    border: 1px solid var(--pal-divider);
    overflow: hidden;
}

.pal-gallery__main img,
.pal-gallery__main iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.pal-gallery__main img { object-fit: cover; }

/* 2026-10-06. Pamatuota is Figma 2x eksporto. Miniatiuru juosta desktope:
   prasideda 12 px zemiau galerijos, yra 606 px plocio (po 12 px ispauda is
   abieju galerijos pusiu), auksts - 103 px, tarpas - 8 px. Elementai dalijasi
   ploti po lygiai, todel F&B / Little Greene (3 vnt.) gaunasi po 197 px, o
   Paint & Paper Library (2 vnt.) - po 299 px, kaip kadruose LT_03/06/09.
   Iki tol buvo fiksuotas 108 px plotis - miniatiuros buvo beveik dvigubai
   mazesnes nei dizaine. */
.pal-gallery__thumbs {
    margin: 12px 12px 0;
    display: flex;
    gap: 8px;
}

.pal-thumb {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: 103px;
    padding: 0;
    border: 1px solid var(--pal-divider);
    background: var(--pal-white);
    cursor: pointer;
    overflow: hidden;
}

.pal-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pal-thumb--contain img { object-fit: contain; }
.pal-thumb[aria-current="true"] { border-color: var(--pal-ink); box-shadow: 0 0 0 1px var(--pal-ink); }

.pal-thumb__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(31, 36, 43, .28);
    color: var(--pal-white);
}

.pal-thumb__play svg { width: 28px; height: 28px; }

/* ------------------------------------------------- produkto informacija -- */

.pal-product__title {
    font-family: var(--pal-serif);
    font-weight: 400;
    font-size: 42px;
    line-height: 1.24;
    margin-bottom: 18px;
}

.pal-product__lead {
    font-size: 18px;
    line-height: 1.5;
    color: var(--pal-muted);
    margin-bottom: 26px;
}

.pal-product__price {
    font-size: 34px;
    font-weight: 600;
    margin-bottom: 18px;
}

.pal-product__note {
    margin-top: 12px;
    font-size: 13px;
    color: var(--pal-muted);
    text-align: center;
}

/* Patvirtinimas po pridejimo i krepseli */
.pal-confirm[hidden] { display: none; }

.pal-confirm {
    margin-top: 16px;
    padding: 18px 20px;
    background: var(--pal-white);
    border: 1px solid var(--pal-divider-strong);
    border-radius: 2px;
}

.pal-confirm__msg {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--pal-primary);
    margin-bottom: 14px;
}

.pal-confirm__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.pal-confirm__actions .pal-btn { flex: 1 1 200px; padding: 13px 20px; font-size: 15px; }

.pal-error[hidden] { display: none; }

.pal-error {
    margin-top: 14px;
    padding: 12px 16px;
    border: 1px solid #C0392B;
    border-radius: 2px;
    background: #FCEDEB;
    color: #922B21;
    font-size: 14px;
}

/* ---------------------------------------------------------- alternatyvos -- */

.pal-alts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
}

.pal-alt {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px;
    background: var(--pal-white);
    border: 1px solid var(--pal-divider);
    border-radius: 2px;
    transition: box-shadow .2s ease;
}

.pal-alt:hover { box-shadow: 0 8px 24px rgba(31, 36, 43, .09); }

.pal-alt__media {
    flex: 0 0 auto;
    width: 156px;
    height: 165px;
    object-fit: cover;
    background: var(--pal-bg-light);
}

.pal-alt__title { font-family: var(--pal-serif); font-size: 24px; font-weight: 400; margin-bottom: 10px; }
.pal-alt__link { font-size: 14px; font-weight: 600; }
.pal-alt__link::after { content: ""; position: absolute; inset: 0; }

.pal-alts__more { text-align: center; margin-top: 26px; font-size: 15px; font-weight: 600; }
.pal-alts__more a:hover { text-decoration: underline; }

/* ==========================================================================
   Mobilus lipnus CTA
   ========================================================================== */

.pal-sticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: none;
    padding: 12px var(--pal-gutter);
    /* 2026-10-06. Figmoje (ir DEVELOPER NOTES) lipni juosta landing puslapyje
       yra 100 px auksta: 12 px virsuje + 55 px mygtukas + 33 px apacioje.
       Iki siol buvo 12/12, t. y. ~80 px. Naudojamas max(), kad telefonuose su
       apatine naviogacijos juosta safe-area butu nemazesnis. */
    padding-bottom: max(33px, calc(12px + env(safe-area-inset-bottom, 0px)));
    background: var(--pal-white);
    border-top: 1px solid var(--pal-divider);
    box-shadow: 0 -6px 20px rgba(31, 36, 43, .10);
    transform: translateY(110%);
    transition: transform .22s ease;
}

/* Prekes (brendo) puslapyje ta pati juosta Figmoje zemesne - 88 px. */
.pal-sticky--product {
    padding-bottom: max(21px, calc(12px + env(safe-area-inset-bottom, 0px)));
}

.pal-sticky.is-visible { transform: translateY(0); }

.pal-sticky .pal-confirm { margin-top: 0; padding: 0; border: 0; background: none; }
.pal-sticky .pal-confirm__msg { margin-bottom: 10px; font-size: 14px; }
.pal-sticky .pal-confirm__actions .pal-btn { padding: 11px 16px; font-size: 14px; }

/* Tarpas puslapio apacioje, kad juosta neuzdengtu turinio. */
body.pal.has-sticky { padding-bottom: var(--pal-sticky-h); }

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Figmoje nupiesti tik du plociai - 1440 ir 390 px. Tarp ju parastes
   mazinamos tolygiai, kad 70 px nesuvalgytu turinio siauresniame ekrane. */
@media (max-width: 1100px) {
    :root { --pal-gutter: 40px; }
    .pal-hero__content { padding: 48px 40px; }
    .pal-why__content { padding: 40px 32px; }
    .pal-product__grid { gap: 36px; }
    .pal-product__title { font-size: 34px; }
}

@media (max-width: 900px) {
    .pal-hero__grid { grid-template-columns: 1fr; }
    /* Mobilioje versijoje pirmiausia tekstas ir CTA, tik paskui nuotrauka -
       taip mygtukas matomas be slinkimo (Google Ads srautas). Tvarka
       nurodoma <picture> elementui, nes butent jis yra tinklelio vaikas. */
    .pal-hero__content { order: 1; padding: 32px var(--pal-gutter) 28px; }
    .pal-hero__grid > picture { order: 2; }
    .pal-hero__image { min-height: 260px; aspect-ratio: 16 / 11; height: auto; }
    .pal-why { grid-template-columns: 1fr; }
    .pal-why__image { min-height: 220px; aspect-ratio: 16 / 9; height: auto; }
    .pal-why__content { padding: 34px var(--pal-gutter); }
    .pal-split { grid-template-columns: 1fr; gap: 28px; }
    .pal-features { grid-template-columns: 1fr; gap: 24px; }
    /* Vienam stulpeliui vertikalus skyriklis netinka - Figmos mobiliame kadre
       "Kas yra sioje paletuje?" punktus skiria horizontalios linijos. */
    .pal-section--warm .pal-features { column-gap: 0; row-gap: 28px; }
    .pal-section--warm .pal-features > div + div { padding-top: 28px; }
    .pal-section--warm .pal-features > div + div::before {
        left: 0;
        right: 0;
        bottom: auto;
        border-left: 0;
        border-top: 1px solid var(--pal-divider);
    }
    .pal-steps { grid-template-columns: 1fr; gap: 24px; }
    .pal-product__grid { grid-template-columns: 1fr; }
    .pal-alts { grid-template-columns: 1fr; }
    .pal-benefits { grid-template-columns: repeat(2, 1fr); row-gap: 22px; }
    .pal-benefit { padding: 0 16px; }
    .pal-benefit:nth-child(odd) { border-left: 0; }
    .pal-benefit:nth-child(3) { border-left: 0; }
}

@media (max-width: 767px) {
    :root { --pal-gutter: 20px; }
    .pal-hero__title { font-size: 32px; }
    .pal-hero__lead { font-size: 16px; }
    .pal-section { padding: 44px 0; }
    .pal-section__title { font-size: 28px; }
    .pal-why__title { font-size: 26px; }
    .pal-process__title { font-size: 26px; }
    .pal-final__title { font-size: 26px; }

    /* 2026-10-06, sulyginta su Figmos mobiliais kadrais (390 px): baneris yra
       ~300 px auksčio, nuotrauka uzpildo visa plota (lieka paveldetas 'cover'),
       o CTA mygtukas tesiasi per visa turinio ploti.
       Iki tol cia buvo 'background-size: 100% auto' - nuotrauka issitempdavo tik
       390x168 px, o virsuje ir apacioje likdavo po ~42 px tuscios smelio juostos.
       Butent tai klientas ir nurode kaip neatitikima nuo Figmos.
       Nuotraukos potepiai yra abiejuose originalo krastuose, o vidurys - tuscias.
       Todel mobiliame kadre Figma nuotrauka prispausta prie kairio krasto
       (desktope lieka centre, nes ten matosi abu krastai).
       2026-10-06 (II): tikslus aukstis is 2x eksporto - 285 px (LT_01: 2740..3026,
       LT_04: 2775..3060), ne 300. */
    .pal-final { min-height: 285px; background-position: left center; }
    .pal-final .pal-btn { width: 100%; }
    .pal-product__title { font-size: 30px; }
    /* 2026-10-06. Figmos mobiliuose kadruose sio ivado sriftas 15 px, eiluciu
       zingsnis 20 px (1.33), o ne 16/24, kaip buvo. Dydziai pamatuoti lyginant
       to pacio teksto eiluciu plotį kadre ir gyvame puslapyje. */
    .pal-product__lead { font-size: 15px; line-height: 1.33; }
    .pal-usps { gap: 18px; flex-direction: column; }
    /* Privalumu sriftas kadre 14 px (gyvai buvo paveldimas 13 px). */
    .pal-usp { max-width: none; font-size: 14px; }

    /* Mobilioje virsuneje lieka tik telefono ikona. Numeris pasiekiamas
       paspaudus, o skaitykloms ji perduoda nuorodos aria-label. */
    .pal-header__actions { gap: 6px; }
    .pal-consult { width: 44px; height: 44px; justify-content: center; }
    .pal-consult img { width: 22px; height: 22px; }
    .pal-consult__label { display: none; }

    /* 2026-10-06. Mobiliame Figmos kadre (v2/02 Paletes - Mobile / 390) hero
       eiliskumas kitoks nei desktope: antraste -> tekstas -> MYGTUKAS -> trys
       privalumai -> nuotrauka. Desktope (v2/01) privalumai lieka virs mygtuko,
       todel HTML tvarka nekeiciama, o mobiliame perstatoma flex 'order'.
       Mygtukas tesiasi per visa turinio ploti (390 - 2x20 = 350 px), o ne
       centruojamas pagal turini, kaip buvo iki siol.
       Tarpai imti is to paties kadro: tekstas->mygtukas 22 px,
       mygtukas->privalumai 21 px, tarp privalumu 12 px, paskutinis
       privalumas->nuotrauka 28 px (konteinerio padding-bottom). */
    .pal-hero__content > .pal-usps { order: 1; margin-bottom: 0; gap: 12px; }
    .pal-hero__content > .pal-btn { align-self: stretch; margin-bottom: 21px; }
    .pal-hero__lead { margin-bottom: 22px; }

    /* Tame paciame kadre hero nuotrauka yra 390x246 px, t. y. santykis 65:41.
       Iki siol buvo paveldimas 16:11 is <=900px taisykles (390x268) - 22 px
       auksciau nei dizaine. min-height nunulinamas, nes 260 px apribojimas
       neleistu nusileisti iki 246 px. */
    .pal-hero__image { min-height: 0; aspect-ratio: 65 / 41; }

    /* Mobiliame kadre "Kodel verta..." bloko ikona yra KAIREJE salia teksto,
       o ne virs jo, kaip desktope. Figmoje tekstas prasideda 81 px nuo kadro
       krasto: 20 px tarpas + 44 px ikona + 17 px stulpeliu tarpas. Tarpas tarp
       punktu matuojamas 28 px (desktopinis liko 32, <=900px - 24).
       Taikoma TIK .pal-why - prekes puslapio "Kas yra sioje paletuje?" bloke
       Figmoje ikonu apskritai nera, tad ta sekcija cia nekeiciama. */
    .pal-why .pal-features { gap: 28px; }
    .pal-why .pal-features > div {
        display: grid;
        grid-template-columns: 44px 1fr;
        column-gap: 17px;
    }
    .pal-why .pal-feature__icon { grid-row: 1 / span 2; margin-bottom: 0; }

    /* Prekes puslapio "Kas yra sioje paletuje?" bloke Figmos mobiliame kadre
       (v2/05) ikonu nera - tik antrastes ir tekstai, atskirti linijomis
       (zr. <=900px taisykle auksciau). Desktope (v2/04) ikonos lieka. */
    .pal-section--warm .pal-feature__icon { display: none; }

    /* Tame kadre sio bloko antrastes yra 18 px (landing "Kodel verta..."
       bloke - 16 px, todel keiciama tik cia), o aprasu sriftas - 15 px.
       Aprasu dydis vienodas abiejuose blokuose, tad taikomas bendrai. */
    .pal-section--warm .pal-feature__title { font-size: 18px; }
    .pal-feature__text { font-size: 15px; }

    /* Tame paciame kadre prekes privalumai pateikti ne su ikonomis, o su
       varnelemis, ir surikiuoti tankiau (zingsnis ~26 px vietoj 38 px).
       Landing hero privalumai (v2/02) lieka su ikonomis, todel taikoma tik
       .pal-product. */
    .pal-product .pal-usps { gap: 8px; }
    .pal-product .pal-usp { gap: 5px; }
    .pal-product .pal-usp img { display: none; }
    .pal-product .pal-usp::before {
        content: "\2713";
        color: var(--pal-ink);
        font-weight: 600;
    }

    /* Paletes virsta horizontalia karusele: swipe, be ciklo, po viena kortele. */
    .pal-cards--carousel {
        display: flex;
        gap: 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Kortele pilno plocio, bet krastuose lieka gutter'is. */
        margin: 0 calc(var(--pal-gutter) * -1);
        padding: 4px var(--pal-gutter);
    }

    .pal-cards--carousel::-webkit-scrollbar { display: none; }

    .pal-cards--carousel > .pal-card {
        flex: 0 0 calc(100% - 40px);
        scroll-snap-align: center;
    }

    /* 2026-10-06. Figmos mobiliame kadre rodykles atitrauktos i turinio
       krastus, o tarp ju - centruotas skaitiklis "1 / 3". Iki siol abi
       rodykles buvo suspaustos i centra su 18 px tarpu ir be skaitiklio.
       Rodykles vienodo plocio (40 px), todel space-between skaitikli
       automatiskai centruoja. */
    .pal-carousel__nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 18px;
        font-size: 13px;
        color: var(--pal-muted);
    }

    .pal-carousel__count { font-weight: 500; letter-spacing: .02em; }

    .pal-carousel__btn {
        width: 40px;
        height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--pal-divider-strong);
        border-radius: 50%;
        background: var(--pal-white);
        cursor: pointer;
    }

    .pal-carousel__btn[disabled] { opacity: .35; cursor: default; }

    .pal-sticky { display: block; }

    /* Mobiliame (390 px) juosta uzima visa 350 px turinio ploti be ispaudos:
       3 miniatiuros po 110 px arba 2 po 170 px, tarpas 10 px, auksts 82 px
       (LT_04/07/10 kadrai). Gyvai buvo 88x45 - perpus mazesnes. */
    .pal-gallery__thumbs { margin: 13px 0 0; gap: 10px; }
    .pal-thumb { height: 82px; }
    .pal-gallery__main { aspect-ratio: 350 / 333; }

    .pal-alt { flex-direction: column; align-items: stretch; text-align: left; }
    .pal-alt__media { width: 100%; height: 180px; }

    .pal-benefits { grid-template-columns: 1fr; row-gap: 18px; }
    .pal-benefit { border-left: 0 !important; padding: 0; }

    .pal-legal__inner { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    html.pal-html { scroll-behavior: auto; }
    .pal-card,
    .pal-sticky,
    .pal-btn { transition: none; }
}