/* =====================================================================
   LukasTubs Meta Ads landing page
   Mobile-first. Jokio framework'o, jokio build žingsnio.

   Turinys:
     1. Kintamieji ir bazė
     2. Tipografija ir utilities
     3. Mygtukai ir formų laukai
     4. Antraštė ir poraštė
     5. Hero
     6. Sekcijos ir tinkleliai
     7. Komplektacijų kortelės
     8. Konfigūratorius
     9. Slapukų sutikimas, toast, lipnus CTA
    10. Desktop breakpoint'ai
   ===================================================================== */

/* ---------- 1. Kintamieji ir bazė ---------------------------------- */

:root {
    --bg: #fdfcfa;
    --surface: #ffffff;
    --surface-warm: #f7f4ef;
    --surface-deep: #efe9de;

    --text: #232120;
    --text-soft: #4a4540;
    --muted: #6f6960;
    --faint: #948d83;

    --border: #e3ddd2;
    --border-strong: #d3cabb;

    --brass: #c4a253;
    --brass-hover: #ac8b3e;
    --brass-deep: #5f4b20;
    --brass-soft: #f5eeda;

    --ink: #1a1817;
    --forest: #3f5548;

    --ok: #3f6b4d;
    --ok-soft: #eef4ef;
    --err: #a4402f;
    --err-soft: #f9ece9;

    --font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    /* Apvalinimas saikingas. Pilnas paliekamas tik tikroms kapsulėms. */
    --r-sm: 3px;
    --r-md: 6px;
    --r-lg: 10px;
    --r-full: 999px;

    --shadow-sm: 0 1px 2px rgba(35, 33, 32, .05);
    --shadow-md: 0 6px 22px rgba(35, 33, 32, .07);
    --shadow-lg: 0 20px 50px rgba(35, 33, 32, .14);


    /*
     * Šriftų skalė. Kiekvienas puslapio dydis ateina iš čia, todėl naujas
     * blokas nebegali atsinešti savo „.83rem". Pakopos parinktos taip, kad
     * gretimos skirtųsi bent pilnu pikseliu: mažesnio skirtumo akis nemato,
     * o kodas nuo jo pasidaro nebeprižiūrimas.
     */
    --fs-2xs: .6875rem;  /* 11 px  smulkūs didžiųjų raidžių ženkleliai */
    --fs-xs:  .75rem;    /* 12 px  prierašai, meta eilutės */
    --fs-sm:  .8125rem;  /* 13 px  sąrašai, kortelių smulkmena */
    --fs-md:  .875rem;   /* 14 px  antraeilis tekstas */
    --fs-lg:  1rem;      /* 16 px  pagrindinis tekstas ir mygtukai */
    --fs-xl:  1.125rem;  /* 18 px  kortelių pavadinimai */
    --fs-2xl: 1.375rem;  /* 22 px  kainos kortelėse */
    --fs-3xl: 1.75rem;   /* 28 px */
    --fs-4xl: 2rem;      /* 32 px  stambios kainos */
    --fs-5xl: 2.25rem;   /* 36 px */

    /* Antraštės auga kartu su ekranu, todėl jos yra clamp(), o ne pakopa. */
    --fs-h1:    clamp(2.4rem, 11vw, 3.6rem);
    --fs-h1-lg: clamp(3.2rem, 4.6vw, 4.4rem);
    --fs-h2:    clamp(1.85rem, 7vw, 2.5rem);
    /*
     * H3 pakelta sąmoningai: serifinio Cormorant mažosios raidės yra žemos,
     * todėl prie 1,35rem antraštės „x" aukštis sutapdavo su 16 px pastraipos
     * ir antraštė nustodavo atrodyti kaip antraštė.
     */
    --fs-h3:    clamp(1.625rem, 6.5vw, 2rem);
    /* Žemesnė antraštė blokams, kuriuose šalia teksto yra grafika. */
    --fs-h4:    clamp(1.375rem, 6vw, 2rem);
    --wrap: 1180px;
    --gutter: 20px;
    --header-h: 60px;
}

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

/*
 * `hidden` atributas turi slėpti visada.
 *
 * Naršyklės numatytoji [hidden] taisyklė yra silpnesnė už bet kurią mūsų
 * klasės taisyklę, todėl vien `display: flex` ant elemento, kuris JS pusėje
 * slepiamas per `el.hidden = true`, jį paliktų matomą ir užimantį vietą.
 * Ši viena eilutė uždaro visą tokių klaidų klasę.
 */
[hidden] {
    display: none !important;
}

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

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img,
picture,
svg {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

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

ul, ol {
    padding: 0;
    list-style: none;
}

a {
    color: inherit;
}

button {
    font: inherit;
    color: inherit;
    cursor: pointer;
}

svg {
    width: 1em;
    height: 1em;
    flex: none;
}

:focus-visible {
    outline: 2px solid var(--brass-deep);
    outline-offset: 2px;
    border-radius: 3px;
}

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

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

/* ---------- 2. Tipografija ir utilities ---------------------------- */

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.wrap--narrow {
    max-width: 760px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    padding: .75rem 1rem;
    background: var(--ink);
    color: #fff;
    text-decoration: none;
}

.skip-link:focus {
    left: 0;
}

/* Honeypot: paslėptas taip, kad botas jį matytų DOM'e, o žmogus nematytų. */
.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.eyebrow {
    margin-bottom: .6rem;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--brass-deep);
}

.eyebrow--light {
    color: var(--brass);
}

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.01em;
}

/* Cormorant Garamond pagal nutylėjimą naudoja senovinius (oldstyle) skaitmenis,
   todėl „1 900 €" atrodytų kaip „1 9oo €". Kainos turi būti vienodo aukščio,
   todėl visur, kur šis šriftas rodo skaičius, įjungiami lining figures. */
h1, h2, h3,
.confirm-card__price strong,
.summary__row--total span:last-child,
.done-card__ref strong,
.choice__title {
    font-variant-numeric: lining-nums proportional-nums;
    font-feature-settings: 'lnum' 1;
}

.muted {
    color: var(--muted);
    font-size: var(--fs-md);
}

.linklike {
    background: none;
    border: 0;
    padding: .5rem;
    color: var(--muted);
    font-size: var(--fs-md);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.linklike:hover {
    color: var(--text);
}

.ico-yes {
    color: var(--brass-hover);
}

.ico-no {
    color: var(--err);
}

/* ---------- 3. Mygtukai ir formų laukai ---------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    /* 48px aukštis yra patogus taikinys pirštui, su atsarga virš 44px minimumo. */
    min-height: 48px;
    padding: .8rem 1.4rem;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    font-size: var(--fs-lg);
    font-weight: 600;
    letter-spacing: .01em;
    text-decoration: none;
    transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}

.btn svg {
    width: 1.05em;
    height: 1.05em;
}

/*
 * Užpildyta rodyklė: plotis paimamas iš koordinačių lauko, todėl ji nesuplokštėja
 * kaip kvadratinės ikonos. Spalva visada ta pati kaip mygtuko teksto.
 */
.btn .btn__arrow {
    width: auto;
    height: .8em;
    fill: currentColor;
    stroke: none;
}

.btn--primary {
    background: var(--brass);
    border-color: var(--brass);
    color: var(--ink);
}

.btn--primary:hover {
    background: var(--brass-hover);
    border-color: var(--brass-hover);
}

/*
 * „Rinktis kubilą" pagal pateiktą maketą: šviesus paviršius, tamsus rėmelis,
 * tekstas ir rodyklė kartu viduryje.
 *
 * Ta pati klasė antraštėje, lipnioje juostoje ir puslapio pabaigoje, todėl
 * tas pats veiksmas visur atrodo vienodai. Šviesiame fone mygtuką neša
 * rėmelis, tamsiame - pats baltas paviršius.
 *
 * Konfigūratoriaus „Toliau" ir sutikimo juostos mygtukai lieka žalvariniai:
 * ten tai jau kiti veiksmai, ne tas pats kvietimas.
 */
.btn--cta {
    justify-content: center;
    gap: .7rem;
    background: #fff;
    /* Rėmelis toks pat kaip skambučio mygtuko antraštėje: tas pats storis ir
       ta pati žalvario spalva, todėl abu viršutiniai veiksmai atrodo iš vienos
       šeimos, o ne kaip du atsitiktiniai mygtukai. */
    border: 3px solid var(--brass);
    border-radius: 14px;
    color: var(--ink);
}

/* Rodyklė žalvarinė kaip ragelis; tekstas lieka tamsus, nes jį reikia
   perskaityti, o ne pastebėti. */
.btn--cta .btn__arrow {
    fill: var(--brass-hover);
}

.btn--cta:hover {
    background: var(--surface-deep);
    border-color: var(--brass-hover);
}

.btn--outline {
    background: var(--surface);
    border-color: var(--border-strong);
    color: var(--text);
}

.btn--outline:hover {
    border-color: var(--brass);
    background: var(--brass-soft);
}

.btn--dark {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

.btn--dark:hover {
    background: #2d2a28;
    border-color: #2d2a28;
}

.btn--lg {
    min-height: 56px;
    padding: 1rem 1.75rem;
    font-size: var(--fs-lg);
}

.btn--block {
    display: flex;
    width: 100%;
}

.btn:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.btn:active:not(:disabled) {
    transform: translateY(1px);
}

.fields {
    display: grid;
    gap: 1rem;
}

.field {
    display: block;
}

.field > span {
    display: block;
    margin-bottom: .4rem;
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text-soft);
}

.field > span em {
    color: var(--err);
    font-style: normal;
}

.field > span small {
    font-weight: 400;
    color: var(--faint);
}

.field input,
.field textarea,
.field select {
    width: 100%;
    min-height: 52px;
    padding: .85rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    /* 16px, nes mažesnis šriftas priverstų iOS priartinti puslapį fokusuojant. */
    font-size: 16px;
    font-family: inherit;
    color: var(--text);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.field textarea {
    min-height: 120px;
    resize: vertical;
    line-height: 1.5;
}

.field input:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--brass);
    box-shadow: 0 0 0 3px rgba(196, 162, 83, .22);
}

.field input.is-invalid,
.field textarea.is-invalid {
    border-color: var(--err);
    box-shadow: 0 0 0 3px rgba(164, 64, 47, .15);
}

.notice {
    padding: .85rem 1rem;
    border-radius: var(--r-md);
    font-size: var(--fs-md);
    background: var(--ok-soft);
    color: var(--ok);
}

.notice--error {
    background: var(--err-soft);
    color: var(--err);
}

/* ---------- 4. Antraštė ir poraštė ---------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    height: var(--header-h);
    background: rgba(253, 252, 250, .94);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: 100%;
}

.site-header__brand img {
    width: 140px;
    height: auto;
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: .6rem;
}

/*
 * Messenger ir CTA mygtukas priklauso kompiuterio versijai. Telefone jų
 * vietą užima lipni juosta apačioje, o antraštėje lieka tik skambutis.
 */
.site-header__messenger,
.site-header__cta {
    display: none;
}

/*
 * Telefone tai apskritimas su viena ikona, nuo 600 px šalia jos atsiranda
 * numeris ir apskritimas virsta kapsule.
 */
.site-header__phone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 3px solid var(--brass);
    border-radius: var(--r-full);
    font-size: var(--fs-md);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

/* Užpildytos ikonos: kontūro nėra, spalva paimama iš `fill`. */
.site-header__phone svg,
.sticky-cta__call svg {
    fill: currentColor;
    stroke: none;
}

.site-header__phone svg {
    width: 22px;
    height: 22px;
    color: var(--brass-hover);
}

.site-header__phone span {
    display: none;
}

.site-footer {
    /* Prie įprasto tarpo pridedamas lipnios juostos aukštis: ji yra `fixed`,
       todėl puslapio aukščio nedidina ir be šito uždengtų kredito eilutę. */
    padding: 2.25rem 0 calc(2rem + 4.7rem + env(safe-area-inset-bottom));
    color: #cfc9bf;
    font-size: var(--fs-sm);
}

.site-footer__inner {
    display: grid;
    gap: 1.5rem;
}

.site-footer__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
}

/* Taikoma tik logotipui: platesnis selektorius gaudė ir fono nuotrauką. */
.site-footer__top img {
    width: 150px;
    height: auto;
    filter: brightness(0) invert(1);
    opacity: .85;
}

.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.site-footer__links a,
.site-footer__links .linklike {
    color: #cfc9bf;
    font-size: var(--fs-sm);
    text-decoration: underline;
    text-underline-offset: 3px;
    padding: .25rem 0;
}

.site-footer__links a:hover,
.site-footer__links .linklike:hover {
    color: #fff;
}

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .35rem 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: var(--fs-xs);
    color: rgba(207, 201, 191, .7);
}

.site-footer__bottom a {
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

.site-footer__bottom a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------- 5. Hero ------------------------------------------------- */

/* Hero baigiasi anksti, kad komplektacijos pasirodytų be ilgo slinkimo. */
.hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 42vh;
    padding: 2.25rem 0 1.5rem;
    color: #fff;
    isolation: isolate;
}

.hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.hero__media picture,
.hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Dvi stotelės viduryje, kad perėjimas neatrodytų kaip juosta. */
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        to top,
        rgba(20, 18, 16, .94) 0%,
        rgba(20, 18, 16, .86) 28%,
        rgba(20, 18, 16, .55) 55%,
        rgba(20, 18, 16, .25) 78%,
        rgba(20, 18, 16, .18) 100%
    );
}

.hero__title {
    font-size: var(--fs-h1);
    line-height: 1.02;
    margin-bottom: .9rem;
}

.hero__title strong {
    display: inline-block;
    color: var(--brass);
    font-weight: 700;
    white-space: nowrap;
}

.hero__lead {
    max-width: 34ch;
    margin-bottom: 1.5rem;
    font-size: var(--fs-lg);
    color: rgba(255, 255, 255, .88);
}



.hero__trust {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .9rem;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(255, 255, 255, .18);
    /* Viena pakopa žemiau nei kitas smulkus tekstas: „rekomenduoja" yra ilgas
       nedalomas žodis, o siaurame ekrane trečias stulpelis kitaip išlenda. */
    font-size: var(--fs-xs);
    line-height: 1.3;
    color: rgba(255, 255, 255, .88);
}

.hero__trust li {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

.hero__trust svg {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--brass);
}

/* ---------- 6. Sekcijos ir tinkleliai ------------------------------- */

.section {
    padding: 3.5rem 0;
    /* Antraštė yra sticky, todėl be šito nuoroda į sekciją nuscrollintų
       taip, kad sekcijos pavadinimas liktų po antrašte. */
    scroll-margin-top: calc(var(--header-h) + 1rem);
}

.section--muted {
    background: var(--surface-warm);
}

/*
 * Atsiliepimai ir pristatymas turi TĄ PAČIĄ fono spalvą, todėl riba tarp jų
 * nematoma, o abiejų sekcijų paraštės susideda į vieną 112 px tuštumą (56 + 56).
 *
 * Kur fonas keičiasi, toks tarpas atrodo natūraliai, nes akis mato, kad
 * prasidėjo kita sekcija. Kur nesikeičia, jis atrodo kaip praleista vieta.
 * Antroji sekcija be to prasideda ne antrašte, o kortele, todėl tarpo net
 * nėra kam pateisinti.
 */
.section--reviews + .section--muted {
    padding-top: 0;
}

.section--packages {
    padding-top: 2rem;
}

.section__head {
    margin-bottom: 1.6rem;
    text-align: center;
}

.section__head h2 {
    font-size: var(--fs-h2);
    margin-bottom: .5rem;
}

.section__head p {
    color: var(--muted);
    max-width: 52ch;
    margin-inline: auto;
}


/* Galerija */
.gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .5rem;
}

.gallery__item {
    overflow: hidden;
    border-radius: var(--r-md);
    background: var(--surface-deep);
}

.gallery__item img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    transition: transform .4s ease;
}

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

.ready {
    padding: .8rem .8rem 1.4rem;
    background: var(--surface);
    border-radius: var(--r-lg);
}

.ready__media img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: var(--r-md);
}

.ready__title {
    margin-top: 1.1rem;
    font-size: var(--fs-h2);
    text-align: center;
}

.ready__lead {
    max-width: 46ch;
    margin: .4rem auto 0;
    text-align: center;
    color: var(--muted);
}

.ready__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem .9rem;
    margin-top: 1.2rem;
}

.ready__list li {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: var(--fs-sm);
    line-height: 1.3;
}

.ready__tick {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.35rem;
    height: 1.35rem;
    margin-top: -.05rem;
    background: var(--brass);
    border-radius: 50%;
    color: var(--ink);
}

.ready__tick svg {
    width: .8rem;
    height: .8rem;
    stroke-width: 3.5;
}

/* --- Pristatymo būdai --- */

.delivery {
    margin-top: 2.5rem;
}

.delivery__head {
    margin-bottom: 1.1rem;
}

.delivery__head h3 {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: var(--fs-h3);
}

.delivery__head h3 svg {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--brass-deep);
}

.delivery__head p {
    margin-top: .4rem;
    font-size: var(--fs-lg);
    color: var(--muted);
}

.delivery__grid {
    display: grid;
    gap: .8rem;
}

.delivery-card {
    position: relative;
    overflow: hidden;
    padding: 1.1rem 1.15rem;
    background: var(--surface);
    border-radius: var(--r-lg);
    box-shadow: 0 1px 2px rgba(35, 33, 32, .05), 0 8px 20px rgba(35, 33, 32, .05);
}

/* Nuotrauka yra kortelės fonas, tekstą nuo jos skiria baltas gradientas. */
.delivery-card__media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* <picture> aukštis pagal nutylėjimą yra `auto`, todėl `height: 100%` viduje
   esančiam <img> neturėtų į ką atsiremti: nuotrauka liktų savo proporcijų
   aukščio ir aukštesnėje kortelėje apačioje atsivertų balta juosta. */
.delivery-card__media picture {
    height: 100%;
}

.delivery-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 72% center;
}

.delivery-card__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        100deg,
        rgba(253, 252, 250, .99) 0%,
        rgba(253, 252, 250, .98) 60%,
        rgba(253, 252, 250, .85) 78%,
        rgba(253, 252, 250, .3) 100%
    );
}

.delivery-card__body {
    position: relative;
    z-index: 1;
    max-width: 76%;
}



.delivery-card__name {
    font-size: var(--fs-lg);
    line-height: 1.2;
}

.delivery-card__price {
    margin-top: .15rem;
    font-family: var(--font-display);
    font-size: var(--fs-4xl);
    font-weight: 700;
    line-height: 1.05;
    color: var(--brass-deep);
    font-variant-numeric: lining-nums;
}

.delivery-card__desc {
    margin-top: .2rem;
    font-size: var(--fs-sm);
    line-height: 1.4;
    color: var(--muted);
}

.delivery-card__list {
    display: grid;
    gap: .3rem;
    margin-top: .65rem;
}

.delivery-card__list li {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    font-size: var(--fs-sm);
    line-height: 1.3;
}

.delivery-card__list svg {
    flex: none;
    width: .95em;
    height: .95em;
    margin-top: .2em;
    stroke-width: 3;
}


.delivery-card__where {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    max-width: 76%;
    margin-top: .7rem;
    padding-top: .65rem;
    border-top: 1px solid var(--border);
    font-size: var(--fs-sm);
    line-height: 1.3;
}

.delivery-card__where svg {
    flex: none;
    width: 1rem;
    height: 1rem;
    margin-top: .1em;
    color: var(--brass-deep);
}

.delivery-card__where small {
    display: block;
    font-size: var(--fs-xs);
    color: var(--faint);
}

.delivery__info {
    margin-top: .7rem;
    padding: .9rem 1rem;
    background: var(--surface-warm);
    border-radius: var(--r-lg);
}

.delivery__info p {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    min-width: 0;
}


.delivery__info span {
    min-width: 0;
}

.delivery__info svg {
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
    margin-top: .15rem;
    color: var(--brass-deep);
}

.delivery__info small {
    display: block;
    font-size: var(--fs-xs);
    line-height: 1.3;
    color: var(--faint);
}

.delivery__info strong {
    display: block;
    margin: .05rem 0;
    font-size: var(--fs-sm);
    line-height: 1.3;
}

.delivery__info a {
    color: inherit;
    text-decoration: none;
}

.delivery__info a:hover {
    color: var(--brass-deep);
}

@media (min-width: 600px) {
    .delivery__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }

    .delivery-card {
        padding: 1.35rem;
    }

    .delivery-card__body {
        max-width: 82%;
    }

    .delivery__info {
        margin-top: 1rem;
        padding: 1.15rem 1.4rem;
    }

    .delivery__info strong {
        font-size: var(--fs-lg);
    }

    .delivery__info small {
        font-size: var(--fs-xs);
    }
}

@media (min-width: 800px) {
    .delivery {
        margin-top: 3rem;
    }

    .delivery-card {
        padding: 1.7rem;
    }

    .delivery-card__name {
        font-size: var(--fs-2xl);
    }

    .delivery-card__price {
        font-size: var(--fs-5xl);
    }

    .delivery-card__desc {
        font-size: var(--fs-md);
    }

    .delivery-card__list li {
        font-size: var(--fs-md);
    }
}

/* DUK */
.faq {
    display: grid;
    gap: .6rem;
}

/* Klausimus skiria viena linija tarp jų, o ne rėmelis aplink kiekvieną. */
.faq__item {
    background: var(--surface);
    border-radius: var(--r-md);
    box-shadow: 0 1px 2px rgba(35, 33, 32, .05), 0 6px 16px rgba(35, 33, 32, .04);
    overflow: hidden;
}

.faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 56px;
    padding: 1rem 1.15rem;
    font-weight: 600;
    font-size: var(--fs-lg);
    cursor: pointer;
    list-style: none;
}

.faq__item summary::-webkit-details-marker {
    display: none;
}

.faq__chevron {
    color: var(--brass-deep);
    transition: transform .2s ease;
}

.faq__item[open] .faq__chevron {
    transform: rotate(180deg);
}

.faq__item p {
    padding: 0 1.15rem 1.15rem;
    font-size: var(--fs-md);
    color: var(--muted);
}

/* Baigiamasis CTA */
/*
 * Puslapio pabaiga: CTA ir poraštė dalijasi VIENA nuotrauka.
 *
 * Anksčiau kiekvienas turėjo savo `object-fit: cover` sluoksnį, todėl ties jų
 * riba nuotrauka prasidėdavo iš naujo ir matėsi siūlė. Dabar fonas vienas ir
 * tęsiasi per abu blokus be pertrūkio.
 */
.page-end {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--ink);
}

.page-end__media {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.page-end__media picture {
    display: block;
    height: 100%;
}

.page-end__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 74% center;
    opacity: .55;
}

/* Iš kairės tamsu, nes ten gula visas tekstas. */
.page-end__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        100deg,
        var(--ink) 0%,
        rgba(26, 24, 23, .93) 40%,
        rgba(26, 24, 23, .66) 72%,
        rgba(26, 24, 23, .34) 100%
    );
}

.section--cta {
    color: #fff;
}

.cta-block h2 {
    /* Stulpelis platus, bet antraštė lieka dviejų eilučių: viena per visą
       plotį nuvestų akį nuo mygtuko. */
    max-width: 26ch;
    font-size: var(--fs-h2);
    margin-bottom: .75rem;
    /* Eilutės išlyginamos pagal ilgį, kad paskutinė neliktų su vienu žodžiu. */
    text-wrap: balance;
}

.cta-block > p {
    max-width: 46ch;
    margin-bottom: 1.75rem;
    color: rgba(255, 255, 255, .78);
}

/*
 * Mygtukas per visą teksto plotį: tekstas kairėje, rodyklė krašte. Įstrižas
 * šviesesnis pleištas dešinėje daro paviršių metalinį, o ne plokščią.
 *
 * `max-width` sutampa su pastraipos matmeniu (46ch, t. y. 464 px), todėl
 * antraštė, tekstas ir mygtukas sudaro vieną stulpelį, nors pati sekcija
 * lygiuojasi su poraštės kraštu ir yra plati.
 */
.cta-block .btn {
    width: 100%;
    max-width: 29rem;
    justify-content: space-between;
    background-image: linear-gradient(
        100deg,
        rgba(255, 255, 255, 0) 68%,
        rgba(255, 255, 255, .15) 70%
    );
}

/* Kontaktų blokas: ragelis, o šalia jo klausimas, numeris ir darbo laikas. */
.cta-block__contact {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-top: 1.9rem;
}

/* Be jokio apskritimo aplink: tik pats ragelis, kiek didesnis. */
.cta-block__icon {
    flex: none;
    width: 2.6rem;
    height: 2.6rem;
    fill: var(--brass);
    stroke: none;
}

.cta-block__phone {
    display: grid;
    gap: .1rem;
    min-width: 0;
}

.cta-block__phone span {
    font-size: var(--fs-xs);
    color: rgba(255, 255, 255, .72);
}

.cta-block__phone a {
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--brass);
    text-decoration: none;
    white-space: nowrap;
}

/* Trečia numerio bloko eilutė: kada skambinti. Blankesnė už patį numerį,
   todėl skaitoma tik tada, kai jos prireikia. */
.cta-block__hours {
    margin-top: .15rem;
    font-size: var(--fs-xs);
    line-height: 1.3;
    color: rgba(255, 255, 255, .55);
}

/* ---------- 7. Komplektacijų kortelės -------------------------------
   Išdėstymas pagal pateiktą dizaino maketą: nuotrauka kairėje, turinys
   dešinėje, kaina viršuje dešinėje su rodykle. Visa kortelė yra vienas
   taikinys pirštui, todėl atskiro mygtuko nereikia ir telefone kortelė
   lieka žema ir trys variantai telpa be ilgo slinkimo. */

/*
 * Dovanos juosta virš kortelių. Šiltas kreminis fonas atskiria ją nuo baltų
 * kortelių, o dovanos dėžutė kairėje pasako, kas tai, dar neperskaičius teksto.
 */
/* Juosta stovi tarp hero ir komplektacijų, todėl tarpą aplink duoda pati. */
.gift-band {
    padding: 1.5rem 0 0;
}

/*
 * Telefone juosta yra tinklelis: antraštė kairėje, ženklelis dešinėje, o žemiau
 * tekstas su dangčio nuotrauka šalia. Taip juosta lieka žema ir neišstumia
 * komplektacijų iš pirmo ekrano.
 *
 * Nuo 600 px tinklelis gauna ketvirtą stulpelį kairėje su dovanų dėžute, o nuo
 * 900 px viskas išsirikiuoja į vieną eilę: dėžutė, tekstas, dangtis.
 */
.gift {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        'title badge'
        'text  cover'
        'note  cover';
    align-items: start;
    column-gap: .7rem;
    row-gap: .35rem;
    padding: .9rem 1rem;
    background: var(--surface-deep);
    border-radius: var(--r-lg);
}

/* Kad antraštė, tekstas ir prierašas patektų tiesiai į juostos tinklelį. */
.gift__body {
    display: contents;
}

.gift__title {
    grid-area: title;
}

.gift__eyebrow {
    grid-area: badge;
    justify-self: end;
}

.gift__text {
    grid-area: text;
}

.gift__note {
    grid-area: note;
}

.gift__aside {
    grid-area: cover;
    align-self: center;
}

/* Telefone juostoje telpa tik tekstas ir dangtis; dėžutė įsijungia nuo 600 px. */
.gift__box {
    display: none;
}




.gift__eyebrow {
    display: inline-block;
    padding: .2rem .45rem;
    background: var(--brass);
    color: var(--ink);
    border-radius: var(--r-sm);
    font-size: var(--fs-2xs);
    white-space: nowrap;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.gift__title {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 700;
    line-height: 1.1;
    color: var(--text);
}

/*
 * „DOVANŲ" raudona: tai vienintelis žodis juostoje, kuris turi pagauti akį
 * anksčiau už kainą. Atspalvis paimtas iš pačios dovanų dėžutės nuotraukos
 * (#e3392c) ir kiek patamsintas, kad ant kreminio fono tekstas turėtų
 * pakankamą kontrastą (3,86:1, WCAG AA dideliam tekstui).
 */
.gift__title span {
    color: #d8372b;
    text-transform: uppercase;
}

.gift__text {
    font-size: var(--fs-xs);
    line-height: 1.3;
    color: var(--muted);
}

.gift__text strong {
    color: var(--brass-deep);
    white-space: nowrap;
}

/* Prierašas atskirtas trumpu brūkšniu, kaip makete. */
.gift__note {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-top: .15rem;
    padding-top: .4rem;
    border-top: 1px solid #ddd2bc;
    font-size: var(--fs-xs);
    color: var(--muted);
}

.gift__note svg {
    flex: none;
    width: 1.15em;
    height: 1.15em;
    color: var(--brass-hover);
}

/* Dangtis rodomas visur, o ranka rašytas prierašas tik ten, kur jam yra vietos. */
.gift__aside {
    position: relative;
    z-index: 1;
    width: 132px;
}

.gift__cover {
    display: block;
    flex: none;
    width: 100%;
}

.gift__cover img {
    width: 100%;
    height: auto;
}

/* Prierašas stovi dešiniau nuotraukos, o rodyklė lenkia į ją, kaip makete. */
.gift__hand {
    display: none;
    flex: none;
    width: 5.5rem;
    font-family: 'Caveat', 'Segoe Script', cursive;
    font-size: var(--fs-xl);
    font-weight: 600;
    line-height: 1.1;
    color: var(--brass-deep);
    pointer-events: none;
}

.gift__hand svg {
    display: block;
    width: 1.4rem;
    height: 1.4rem;
    margin: .15rem 0 0 .35rem;
    stroke-width: 1.8;
    transform: scaleX(-1);
}

.packages {
    display: grid;
    gap: 1.6rem;
}

/*
 * Kortelės atskiriamos nuo fono šešėliu, ne kontūru: plona pilka linija aplink
 * kiekvieną bloką daro puslapį panašų į šabloną.
 */
.pkg {
    position: relative;
    background: var(--surface);
    border: 0;
    border-radius: var(--r-lg);
    box-shadow: 0 1px 2px rgba(35, 33, 32, .05), 0 10px 26px rgba(35, 33, 32, .05);
    transition: box-shadow .2s ease;
}

/* Visą kortelę dengiantis mygtukas: `visually-hidden` tekstas jame paaiškina
   veiksmą ekrano skaitytuvui. */
.pkg__hit {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    padding: 0;
    background: none;
    border: 0;
    border-radius: inherit;
}

.pkg:has(.pkg__hit:hover),
.pkg:has(.pkg__hit:focus-visible) {
    box-shadow: 0 2px 4px rgba(35, 33, 32, .06), 0 16px 38px rgba(35, 33, 32, .12);
}

.pkg__hit:focus-visible {
    outline: 2px solid var(--brass-deep);
    outline-offset: 3px;
}


/* Rekomenduojama kortelė vienintelė turi rėmelį, ir tas rėmelis žalvarinis. */
.pkg--featured {
    border: 2px solid var(--brass);
    box-shadow: var(--shadow-md);
}

/* Ženklelis sėdi ant kortelės krašto: kapsulė tamsi, todėl žalvarinė karūna
   ir brūkšneliai šalia jos lieka vienintelis ryškus akcentas sekcijoje. */
.pkg__badge {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: .1rem;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.pkg__badge-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem 1rem;
    background: var(--ink);
    color: #fff;
    border-radius: var(--r-full);
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    white-space: nowrap;
}

.pkg__badge-pill svg {
    width: 1.15em;
    height: 1.15em;
    fill: var(--brass);
    stroke: none;
}

/*
 * Trys brūkšneliai abipus kapsulės. Dešinėje ta pati ikona apverčiama.
 *
 * Pakeliami virš kortelės krašto: kapsulė tą liniją uždengia pati, o ploni
 * brūkšneliai ant jos atrodė kaip prilipę prie rėmelio. Pastumiama per
 * `transform`, o ne per paraštę, nes flex konteineryje `align-items: center`
 * centruoja paraščių dėžutę ir postūmis būtų perpus mažesnis už nurodytą.
 */
.pkg__badge-rays {
    flex: none;
    width: 1.35rem;
    height: 1.35rem;
    transform: translateY(-1rem);
    color: var(--brass);
    stroke-width: 2.2;
}

.pkg__badge-rays--flip {
    transform: translateY(-1rem) scaleX(-1);
}

/* --- Kortelės vidus --- */

.pkg__inner {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    padding: .85rem;
}

.pkg--featured .pkg__inner {
    padding-top: 1.35rem;
}

/*
 * Nuotraukos proporcija fiksuota 3:4 ir ji NEtempiama iki kortelės aukščio.
 * Tempiama ji telefone virsdavo siauru stulpeliu, kuriame kubilo šonai
 * likdavo už kadro; dabar rodomas visas paruoštas kadras be jokio kirpimo.
 */
.pkg__thumb {
    position: relative;
    flex: none;
    width: 42%;
    max-width: 230px;
    align-self: start;
    aspect-ratio: 3 / 4;
    background: var(--surface-warm);
    border-radius: var(--r-md);
    overflow: hidden;
}

.pkg__thumb picture {
    height: 100%;
}

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


.pkg__main {
    flex: 1;
    min-width: 0;
}

.pkg__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .6rem;
}

.pkg__name {
    font-size: var(--fs-lg);
    font-weight: 700;
    letter-spacing: 0;
}

.pkg__price {
    flex: none;
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
    font-variant-numeric: lining-nums;
}

.pkg__tagline {
    margin-top: .3rem;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--brass-deep);
}

.pkg__desc {
    margin-top: .25rem;
    font-size: var(--fs-sm);
    line-height: 1.4;
    color: var(--muted);
}

.pkg__cols {
    display: grid;
    gap: .55rem;
    margin-top: .8rem;
}

.pkg__features {
    display: grid;
    gap: .4rem;
}

.pkg__features li {
    display: flex;
    align-items: flex-start;
    gap: .3rem;
    font-size: var(--fs-xs);
    line-height: 1.3;
    color: var(--text-soft);
}

.pkg__features svg {
    width: .95em;
    height: .95em;
    flex: none;
    margin-top: .18em;
    stroke-width: 2.6;
}

/* Ko komplektacijoje nėra: ta pati eilutė, tik su ✕ ir blankesniu tekstu. */
.pkg__features li.is-out {
    color: var(--muted);
}

/* Kvėptelėjimas prieš pirmą ✕: sąrašas lieka vientisas, bet riba matoma. */
.pkg__features li:not(.is-out) + li.is-out {
    margin-top: .35rem;
}

/* Apatinė rekomenduojamos kortelės juosta. */
.pkg__strip {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .7rem 1rem;
    background: var(--brass-soft);
    border-top: 1px solid #e6d5a8;
}

.pkg__strip-icon {
    flex: none;
    width: 1.55rem;
    height: 1.55rem;
    color: var(--brass-hover);
}

/* Skyriklis atskiria ikoną nuo teksto, kaip makete. */
.pkg__strip-text {
    position: relative;
    z-index: 1;
    display: grid;
    gap: .1rem;
    padding-left: .7rem;
    border-left: 1px solid #e3d0a2;
}

.pkg__strip-text strong {
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--text);
}

.pkg__strip-text span {
    font-size: var(--fs-xs);
    line-height: 1.3;
    color: var(--muted);
}

/* Karūna fone: vien dekoracija, todėl juostos krašte tiesiog nukerpama. */
.pkg__strip-mark {
    position: absolute;
    right: .9rem;
    bottom: -1.1rem;
    width: 5.5rem;
    height: 5.5rem;
    fill: var(--brass);
    stroke: none;
    opacity: .16;
}


/*
 * Pereinamoji eilutė tarp kainoraščio ir galerijos.
 *
 * Sąmoningai be kortelės, fono ir šešėlio: tai ne informacijos blokas, o viena
 * pastaba pakeliui. Kortelė čia stabdė puslapio ritmą ir atrodė sunkiau už tai,
 * ką pasako. Atskiria tik plona linija viršuje.
 */
.packages__next {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.6rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--border);
    font-size: var(--fs-sm);
    color: var(--muted);
}

.packages__next svg {
    flex: none;
    width: 1.15rem;
    height: 1.15rem;
    color: var(--brass-hover);
}

.packages__next strong {
    font-weight: 600;
    color: var(--text-soft);
}

/* ---------- 8. Konfigūratorius -------------------------------------- */

.cfg {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.cfg[hidden] {
    display: none;
}

.cfg__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(26, 24, 23, .6);
    backdrop-filter: blur(3px);
}

.cfg__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    /* dvh, ne vh: mobilioje naršyklėje adreso juosta keičia aukštį, o su vh
       apatinis CTA lieka po ekrano kraštu. vh paliekamas atsargai senesnėms
       naršyklėms (pvz. Facebook programos naršyklė senesniame iOS), kurios
       dvh dar nemoka: be jo aukštis liktų `auto` ir langas subyrėtų. */
    height: 100vh;
    height: 100dvh;
    background: var(--bg);
    overflow: hidden;
    animation: cfg-in .22s ease;
}

@keyframes cfg-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

.cfg__head {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex: none;
    padding: max(.75rem, env(safe-area-inset-top)) var(--gutter) .75rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.cfg__nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    min-width: 44px;
    min-height: 44px;
    padding: 0 .5rem;
    background: none;
    border: 0;
    border-radius: var(--r-sm);
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--muted);
}

.cfg__nav-btn:hover {
    color: var(--text);
    background: var(--surface-warm);
}

.cfg__nav-btn span {
    display: none;
}

.cfg__nav-btn[hidden] {
    display: none;
}

/* Užimta vieta paliekama net paslėpus „Atgal", nes kitaip progress juosta
   šokinėtų iš vieno žingsnio į kitą. */
.cfg__nav-btn--placeholder {
    visibility: hidden;
}

.cfg__progress {
    flex: 1;
    min-width: 0;
}

.cfg__step-label {
    display: block;
    margin-bottom: .35rem;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: center;
}

.cfg__bar {
    height: 4px;
    background: var(--surface-deep);
    border-radius: var(--r-full);
    overflow: hidden;
}

.cfg__bar i {
    display: block;
    width: 0;
    height: 100%;
    background: var(--brass);
    border-radius: var(--r-full);
    transition: width .28s cubic-bezier(.22, .61, .36, 1);
}

/*
 * Konfigūratoriaus turinys turi tilpti į ekraną be slinkimo.
 *
 * Kiekvienas žingsnis yra flex stulpelis, užpildantis visą likusį aukštį.
 * Tekstas, mygtukai ir laukai lieka natūralaus dydžio (flex: none), o
 * lankstūs elementai (nuotrauka, textarea, santrauka) sugeria tai, kas lieka.
 * Todėl tas pats žingsnis telpa ir žemame telefone, ir dideliame ekrane.
 *
 * overflow-y lieka kaip atsarginis variantas kraštutiniams atvejams
 * (pvz. telefonas horizontaliai), nes turinys niekada neturi likti nepasiekiamas.
 */
.cfg__body,
.cfg__done {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1.5rem var(--gutter) calc(1.5rem + env(safe-area-inset-bottom));
}

.cfg__step {
    display: none;
    width: 100%;
    max-width: 620px;
    margin-inline: auto;
    animation: step-in .2s ease;
}

.cfg__step.is-active {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Antraštinė dalis ir veiksmai visada natūralaus dydžio. */
.cfg__eyebrow,
.cfg__title,
.cfg__hint,
.cfg__privacy,
.cfg__error,
.confirm-features,
.fields,
.choices {
    flex: none;
}

@keyframes step-in {
    from { opacity: 0; transform: translateX(8px); }
    to   { opacity: 1; transform: none; }
}

.cfg__eyebrow {
    margin-bottom: .5rem;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--brass-deep);
}

.cfg__title {
    font-size: clamp(1.75rem, 7vw, 2rem);
    margin-bottom: .5rem;
}

.cfg__hint {
    margin-bottom: 1.5rem;
    font-size: var(--fs-md);
    color: var(--muted);
}

/* CTA visada toje pačioje vietoje, nesvarbu, kiek turinio yra virš jo. */
.cfg__actions {
    display: grid;
    flex: none;
    gap: .35rem;
    justify-items: center;
    margin-top: auto;
    padding-top: 1.25rem;
}

.cfg__actions .btn {
    width: 100%;
}

.cfg__change {
    margin-top: .25rem;
}

.cfg__error {
    margin-top: 1rem;
    padding: .8rem 1rem;
    background: var(--err-soft);
    border-radius: var(--r-md);
    font-size: var(--fs-md);
    color: var(--err);
}

.cfg__error[hidden] {
    display: none;
}

.cfg__privacy {
    margin-top: 1.5rem;
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--muted);
}

.cfg__privacy a {
    color: var(--brass-deep);
    font-weight: 600;
}

/* Žingsnis 1: patvirtinimas */
.confirm-card {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin-bottom: 1rem;
    background: var(--surface);
    border-radius: var(--r-lg);
    box-shadow: 0 1px 2px rgba(35, 33, 32, .05), 0 8px 20px rgba(35, 33, 32, .05);
    overflow: hidden;
}

.confirm-card__media {
    position: relative;
    flex: 1 1 auto;
    /* min-height: 0 leidžia susitraukti žemiau nuotraukos natūralaus aukščio;
       riba saugo, kad po naudos juosta nuotraukos visai nebeliktų. */
    min-height: 170px;
}

/*
 * Naudos juosta nuotraukos apačioje.
 *
 * Juoda ir tik kiek permatoma: pro ją dar matyti kubilas, bet baltas tekstas
 * lieka skaitomas ant bet kokios nuotraukos. Viršutinis kraštas ne nukerpamas,
 * o išnyksta, todėl juosta atrodo kaip nuotraukos dalis, o ne užklijuotas
 * stačiakampis.
 */
.confirm-card__benefit {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1.7rem 1.15rem .95rem;
    background: linear-gradient(
        to top,
        rgba(10, 9, 8, .84) 0%,
        rgba(10, 9, 8, .82) 58%,
        rgba(10, 9, 8, 0) 100%
    );
    color: #fff;
    font-size: var(--fs-sm);
    line-height: 1.45;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}

.confirm-card__media[hidden] {
    display: none;
}

.confirm-card__media picture {
    display: block;
    height: 100%;
}

.confirm-card__media img {
    width: 100%;
    height: 100%;
    /* aspect-ratio nenurodomas, nes aukštį diktuoja turima vieta, o object-fit
       pasirūpina, kad nuotrauka nebūtų ištempta. */
    object-fit: cover;
}

.confirm-card__price {
    display: flex;
    flex: none;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1.25rem;
}

.confirm-card__price-label {
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
}

.confirm-card__price strong {
    font-family: var(--font-display);
    font-size: var(--fs-4xl);
    font-weight: 700;
    line-height: 1;
    color: var(--text);
}

.confirm-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .45rem .8rem;
}

.confirm-features li {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    font-size: var(--fs-md);
    color: var(--text-soft);
}

.confirm-features svg {
    width: .95em;
    height: .95em;
    margin-top: .22em;
}

/* Pasirinkimo kortelės */
.choices {
    display: grid;
    gap: .85rem;
}

.choice {
    display: flex;
    align-items: center;
    gap: .95rem;
    width: 100%;
    padding: 1rem;
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--r-lg);
    text-align: left;
    transition: border-color .16s ease, background-color .16s ease;
}

.choice:hover {
    border-color: var(--brass);
}

.choice.is-selected {
    border-color: var(--brass);
    background: var(--brass-soft);
}

/*
 * Ikona be jokio kvadrato už nugaros: didelis plonas kontūras skaitosi kaip
 * piktograma, o ne kaip mygtukas mygtuko viduje.
 */
.choice__icon {
    display: flex;
    flex: none;
    color: var(--brass-hover);
}

.choice__icon svg {
    width: 2.5rem;
    height: 2.5rem;
    stroke-width: 1.4;
}

.choice__media {
    flex: none;
    width: 92px;
    border-radius: var(--r-md);
    overflow: hidden;
}

.choice__media img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.choice__body {
    flex: 1;
    min-width: 0;
}

.choice__title {
    display: block;
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: 700;
    line-height: 1.15;
}

.choice__meta {
    display: block;
    margin-top: .1rem;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--brass-deep);
}

.choice__desc {
    display: block;
    margin-top: .3rem;
    font-size: var(--fs-sm);
    line-height: 1.4;
    color: var(--muted);
}

.choice__price {
    display: block;
    margin-top: .45rem;
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--text);
}

.choice__tick {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 26px;
    height: 26px;
    border: 2px solid var(--border-strong);
    border-radius: 50%;
    color: transparent;
    transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}

.choice__tick svg {
    width: .8rem;
    height: .8rem;
    stroke-width: 3;
}

.choice.is-selected .choice__tick {
    border-color: var(--brass);
    background: var(--brass);
    color: var(--ink);
}

.cfg__step[data-name="comment"] > .field {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.cfg__step[data-name="comment"] textarea {
    flex: 1 1 auto;
    min-height: 88px;
}

/* Santrauka.
   Turinio kiekis čia priklauso nuo žmogaus (adresas, komentaras), todėl
   vienintelė vieta, kur slinkimas gali prireikti, yra pati santrauka.
   Antraštė ir „Siųsti užklausą" lieka matomi visada. */
.summary {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--surface);
    border-radius: var(--r-lg);
    box-shadow: 0 1px 2px rgba(35, 33, 32, .05), 0 8px 20px rgba(35, 33, 32, .05);
}

.summary__group {
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--border);
}

.summary__group:last-child {
    border-bottom: 0;
}

.summary__label {
    display: block;
    margin-bottom: .3rem;
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--faint);
}

.summary__value {
    font-size: var(--fs-lg);
    font-weight: 600;
    line-height: 1.35;
}

.summary__value small {
    display: block;
    margin-top: .15rem;
    font-size: var(--fs-md);
    font-weight: 400;
    color: var(--muted);
}

.summary__specs {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .6rem;
    margin-top: .6rem;
}

.summary__spec {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .25rem .6rem;
    background: var(--surface-warm);
    border-radius: var(--r-full);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-soft);
}

.summary__spec svg {
    width: .85em;
    height: .85em;
}

.summary__spec--off {
    color: var(--faint);
}

.summary__rows {
    display: grid;
    gap: .5rem;
    margin-top: .2rem;
}

.summary__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    font-size: var(--fs-lg);
}

.summary__row span:last-child {
    font-weight: 600;
    white-space: nowrap;
}

.summary__row--total {
    margin-top: .35rem;
    padding-top: .7rem;
    border-top: 1px solid var(--border);
    font-size: var(--fs-lg);
}

.summary__row--total span:last-child {
    font-family: var(--font-display);
    font-size: var(--fs-3xl);
    font-weight: 700;
    color: var(--text);
}

.summary__pending {
    font-size: var(--fs-md);
    color: var(--muted);
}

.summary__group--total {
    background: var(--brass-soft);
}

/* Sėkmės ekranas */
/* Sėkmės ekranas centruojamas, kol vietos pakanka. `safe` reikšmė svarbi:
   su paprastu `center` per aukštas turinys būtų nukirstas iš viršaus ir
   taptų nepasiekiamas net slenkant. */
.cfg__done {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: safe center;
    text-align: center;
}

.cfg__done-mark,
.cfg__done .cfg__eyebrow,
.cfg__done .cfg__title,
.cfg__done .cfg__hint,
.cfg__done .cfg__actions {
    flex: none;
}

.cfg__done .done-card {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.cfg__done .cfg__actions {
    margin-top: 0;
}

.cfg__done[hidden] {
    display: none;
}

.cfg__done > * {
    max-width: 480px;
    width: 100%;
}

.cfg__done-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 1.25rem;
    background: var(--ok-soft);
    border-radius: 50%;
    color: var(--ok);
}

.cfg__done-mark svg {
    width: 1.9rem;
    height: 1.9rem;
    stroke-width: 2.5;
}

.done-card {
    margin-top: 1.5rem;
    padding: 1.25rem;
    background: var(--surface);
    border-radius: var(--r-lg);
    box-shadow: 0 1px 2px rgba(35, 33, 32, .05), 0 8px 20px rgba(35, 33, 32, .05);
    text-align: left;
}

.done-card__ref {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: .8rem;
    margin-bottom: .8rem;
    border-bottom: 1px solid var(--border);
}

.done-card__ref span {
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}

.done-card__ref strong {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    letter-spacing: .02em;
}

.done-card__line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    font-size: var(--fs-md);
    padding: .2rem 0;
}

.done-card__line span:first-child {
    color: var(--muted);
}

.done-card__line span:last-child {
    font-weight: 600;
    text-align: right;
}

/* ---------- 9. Sutikimas, toast, lipnus CTA ------------------------- */

.consent {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 120;
    padding: var(--gutter);
    padding-bottom: calc(var(--gutter) + env(safe-area-inset-bottom));
}

.consent[hidden] {
    display: none;
}

/*
 * Siauresnė už 560 px: juosta turi atrodyti kaip trumpas pranešimas kampe, o
 * ne kaip dar viena puslapio sekcija. Šešėlis dvisluoksnis, todėl kortelė
 * atsiskiria nuo fono nepavirsdama tamsia dėme.
 */
.consent__box {
    max-width: 430px;
    margin-inline: auto;
    padding: 1.15rem 1.25rem 1.3rem;
    background: var(--surface);
    border-radius: var(--r-md);
    box-shadow: 0 2px 6px rgba(35, 33, 32, .08), 0 16px 40px rgba(35, 33, 32, .16);
}

.consent__title {
    margin-bottom: .35rem;
    font-size: var(--fs-lg);
}

/* Juosta sąmoningai kompaktiška: mobiliame ekrane ji atsiranda virš hero CTA,
   todėl kiekviena papildoma eilutė tiesiogiai kainuoja konversijų. */
.consent__text {
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--muted);
}

.consent__text a {
    color: var(--brass-deep);
    font-weight: 600;
}

.consent__options {
    display: grid;
    gap: .6rem;
    margin-top: 1rem;
}

.consent__options[hidden] {
    display: none;
}

.consent__row {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .75rem;
    background: var(--surface-warm);
    border-radius: var(--r-md);
    cursor: pointer;
}

.consent__row--locked {
    cursor: default;
    opacity: .75;
}

.consent__row input {
    /* Didesnis nei numatytasis checkbox, nes 14px kvadratėlis telefone
       yra per mažas taikinys. */
    width: 22px;
    height: 22px;
    margin-top: .1rem;
    flex: none;
    accent-color: var(--brass-hover);
}

.consent__row span {
    font-size: var(--fs-sm);
    line-height: 1.45;
    color: var(--muted);
}

.consent__row strong {
    display: block;
    font-size: var(--fs-md);
    color: var(--text);
}

.consent__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .55rem;
    margin-top: 1.15rem;
}

/*
 * Abu sprendimai vienodo dydžio ir abu užpildyti: skiriasi tik spalva, ne
 * svoris. Rėmelio čia nėra sąmoningai, nes plona linija šalia užpildyto
 * mygtuko visada atrodo kaip antrarūšis pasirinkimas.
 */
.consent__actions .btn {
    width: 100%;
    min-height: 46px;
    padding-inline: .75rem;
    font-size: var(--fs-md);
}

/* Trečias, tylus kelias: jis neturi konkuruoti su dviem sprendimais virš jo,
   todėl yra mažesnis, pilkas ir centre. */
.consent__more {
    grid-column: 1 / -1;
    justify-self: center;
    margin-top: .1rem;
    padding: .35rem .5rem;
    font-size: var(--fs-sm);
    font-weight: 400;
}

.consent__actions #consent-save {
    grid-column: 1 / -1;
}

.consent__actions .btn[hidden],
.consent__actions .linklike[hidden] {
    display: none;
}

.toaster {
    position: fixed;
    left: 50%;
    bottom: calc(1rem + env(safe-area-inset-bottom));
    z-index: 200;
    transform: translateX(-50%);
    display: grid;
    gap: .5rem;
    width: min(420px, calc(100% - 2rem));
    pointer-events: none;
}

.toast {
    padding: .85rem 1.1rem;
    background: var(--ink);
    color: #fff;
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    font-size: var(--fs-md);
    animation: toast-in .2s ease;
}

.toast--error {
    background: var(--err);
}

@keyframes toast-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

.sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: flex;
    gap: .6rem;
    padding: .7rem var(--gutter);
    padding-bottom: calc(.7rem + env(safe-area-inset-bottom));
    background: rgba(253, 252, 250, .96);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--border);
}

.sticky-cta[hidden] {
    display: none;
}

.sticky-cta__call {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 48px;
    height: 48px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    color: var(--brass-deep);
    text-decoration: none;
}

.sticky-cta__call svg {
    width: 1.2rem;
    height: 1.2rem;
}

/*
 * Messenger mygtukas paliekamas firminis: apvalus, su Messenger gradientu ir
 * baltu ženklu. Tai vienintelis elementas juostoje, kurio spalva ne mūsų, bet
 * būtent dėl to jis atpažįstamas iš pirmo žvilgsnio.
 *
 * Dydis fiksuotas ir sutampa su CTA mygtuko aukščiu: flex konteineryje
 * `aspect-ratio` plotį skaičiuoja iš turinio, todėl skritulys išeitų siauras.
 */
.sticky-cta__call--messenger {
    align-self: center;
    width: 52px;
    height: 52px;
    background: radial-gradient(
        circle at 22% 105%,
        #00b2ff 0%,
        #006aff 18%,
        #a033ff 52%,
        #ff5c87 80%,
        #ff7061 100%
    );
    border: 0;
    border-radius: 50%;
    color: #fff;
}

.sticky-cta__call--messenger svg {
    width: 1.7rem;
    height: 1.7rem;
}

/* ---------- 10. Desktop breakpoint'ai ------------------------------- */

@media (min-width: 600px) {
    /*
     * Planšetėje juosta gauna ketvirtą stulpelį kairėje: dovanų dėžutė
     * stovi prieš tekstą ir apima visas tris teksto eilutes.
     */
    .gift {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            'box title badge'
            'box text  cover'
            'box note  cover';
        column-gap: 1rem;
    }

    .gift__box {
        display: block;
        grid-area: box;
        align-self: center;
        width: 84px;
    }

    .gift__box img {
        width: 100%;
        height: auto;
    }

    .site-header__phone {
        width: auto;
        padding: .4rem .9rem;
    }

    .site-header__phone span {
        display: inline;
    }

    .cfg__nav-btn span {
        display: inline;
    }



    .gallery {
        grid-template-columns: repeat(3, 1fr);
        gap: .75rem;
    }

    .cfg__actions .btn {
        width: auto;
        min-width: 260px;
    }
}

@media (min-width: 900px) {
    :root {
        --gutter: 32px;
        --header-h: 76px;
    }

    .section {
        padding: 5.5rem 0;
    }

    .section__head {
        margin-bottom: 3rem;
    }

    .site-header__brand img {
        width: 190px;
    }

    /*
     * Nuo čia antraštė perima lipnios juostos vaidmenį: numerio rinkti prie
     * kompiuterio niekas nesirengia, todėl jį keičia Messenger ir CTA.
     */
    .site-header__phone {
        display: none;
    }

    .site-header__messenger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: 46px;
        height: 46px;
        /* Firminis Messenger skritulys, toks pat kaip lipnioje juostoje: tai
           vienintelė svetimos spalvos dėmė, bet būtent dėl jos mygtukas
           atpažįstamas nespėjus perskaityti nė žodžio. */
        background: radial-gradient(
            circle at 22% 105%,
            #00b2ff 0%,
            #006aff 18%,
            #a033ff 52%,
            #ff5c87 80%,
            #ff7061 100%
        );
        border-radius: 50%;
        color: #fff;
        text-decoration: none;
    }

    .site-header__messenger svg {
        width: 1.5rem;
        height: 1.5rem;
        fill: currentColor;
        stroke: none;
    }

    /* Žemesnis už įprastą CTA: antraštė vos 76 px, o mygtukas joje neturi
       nurungti paties puslapio turinio. */
    .site-header__cta {
        display: inline-flex;
        min-height: 46px;
        padding: .55rem 1.15rem;
        font-size: var(--fs-md);
    }

    /* Lipnus CTA reikalingas tik ten, kur ekranas siauras ir CTA nueina
       už matomo lauko. Desktop'e jis tik trukdytų. */
    .sticky-cta {
        display: none !important;
    }

    /* Juostos nebėra, todėl poraštei rezervuoti vietos nereikia. */
    .site-footer {
        padding-bottom: 2.5rem;
    }

    .hero {
        min-height: 420px;
        align-items: center;
        padding: 3rem 0;
    }

    .hero::after {
        background: linear-gradient(
            100deg,
            rgba(20, 18, 16, .92) 0%,
            rgba(20, 18, 16, .82) 34%,
            rgba(20, 18, 16, .4) 62%,
            rgba(20, 18, 16, .1) 100%
        );
    }

    .hero__inner {
        max-width: calc(var(--wrap) - 2 * var(--gutter));
    }

    .hero__title {
        font-size: var(--fs-h1-lg);
    }

    .hero__lead {
        font-size: var(--fs-xl);
        max-width: 40ch;
    }

    .hero__trust {
        gap: 2rem;
        font-size: var(--fs-md);
        max-width: 34rem;
    }

    /* Dovanos juosta lygiuojama su kortelėmis, kad nebūtų platesnė už jas. */
    .gift {
        display: flex;
        align-items: center;
        max-width: 1120px;
        margin-inline: auto;
        gap: 1rem;
        padding: 1.25rem 1.6rem;
    }

    /*
     * Vidutinio dydžio: pakankamai didelė, kad būtų aiški, bet nenurungianti
     * nei antraštės, nei dangčio nuotraukos dešinėje.
     *
     * Plotis kinta kartu su ekranu, nes ties 900 px juostoje lieka vos apie
     * 400 px tekstui: fiksuotas dydis ten nustumtų antraštę į dvi eilutes.
     */
    .gift__box {
        flex: none;
        width: clamp(76px, 8vw, 112px);
    }

    .gift__body {
        display: block;
        flex: 1;
        min-width: 0;
    }

    .gift__eyebrow {
        justify-self: auto;
    }

    .gift__aside {
        align-self: auto;
    }


    .gift__body {
        margin-right: auto;
    }

    .gift__eyebrow {
        display: inline-block;
        margin-bottom: .4rem;
        padding: .25rem .7rem;
        font-size: var(--fs-xs);
        letter-spacing: .13em;
    }

    .gift__text {
        margin-top: .3rem;
    }

    .gift__title {
        font-size: var(--fs-3xl);
    }

    .gift__note {
        display: inline-block;
        margin-top: .55rem;
        padding-top: .4rem;
    }

    .gift__text {
        font-size: var(--fs-md);
    }

    .gift__note {
        font-size: var(--fs-xs);
    }

    .gift__aside {
        display: flex;
        align-items: flex-start;
        flex: none;
        width: auto;
        gap: .3rem;
    }

    .gift__cover {
        width: clamp(220px, 22vw, 280px);
    }

    .gift__hand {
        display: block;
    }

    .gift__cover {
        /* Nuotrauka remiasi į apatinį juostos kraštą, kaip makete. */
        align-self: flex-end;
        margin-bottom: -1.25rem;
    }

    /*
     * Kompiuteryje kortelės sustoja į tris stulpelius: nuotrauka viršuje,
     * turinys po ja. Kortelės tempiamos iki vienodo aukščio, o rodyklė
     * nustumiama į patį apačią, todėl eilė lieka lygi net tada, kai punktų
     * skaičius kortelėse skiriasi.
     */
    .packages {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: stretch;
        max-width: 1120px;
        margin-inline: auto;
        gap: 1.25rem;
    }

    /* Linija ir dovanos juosta lygiuojamos su kortelėmis, ne su visu puslapiu. */
    .packages__next {
        max-width: 1120px;
        margin-inline: auto;
        font-size: var(--fs-md);
    }

    .pkg {
        display: flex;
        flex-direction: column;
    }

    .pkg__inner {
        flex: 1;
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        padding: 1.1rem;
    }

    .pkg--featured .pkg__inner {
        padding-top: 1.6rem;
    }

    .pkg__thumb {
        width: 100%;
        max-width: none;
        aspect-ratio: 4 / 3;
    }

    .pkg__main {
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    .pkg__name {
        font-size: var(--fs-2xl);
    }

    .pkg__price {
        font-size: var(--fs-3xl);
    }

    .pkg__desc {
        font-size: var(--fs-md);
    }

    .pkg__cols {
        display: flex;
        flex-direction: column;
        flex: 1;
        gap: .7rem;
    }

    .pkg__features li {
        font-size: var(--fs-md);
    }


    .pkg__strip {
        gap: .5rem 1.5rem;
        padding: .8rem 1.35rem;
    }


    /*
     * Kortelė lygiuojasi su pristatymo kortelėmis po ja: anksčiau ji buvo
     * 900 px pločio, todėl vienoje sekcijoje matėsi dvi skirtingos kraštinės.
     *
     * Per visą plotį nuotrauka viršuje būtų per aukšta, todėl ji keliauja į
     * kairę pusę, o antraštė, įžanga ir sąrašas rikiuojasi dešinėje.
     */
    .ready {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            'media title'
            'media lead'
            'media list';
        align-content: center;
        column-gap: 2.25rem;
        max-width: none;
        padding: 1.1rem;
    }

    /* Nuotrauka apima visas tris teksto eilutes ir centruojasi jų atžvilgiu. */
    .ready__media {
        grid-area: media;
        align-self: center;
    }

    .ready__title {
        grid-area: title;
    }

    .ready__lead {
        grid-area: lead;
    }

    .ready__list {
        grid-area: list;
    }

    .ready__title,
    .ready__lead {
        margin-inline: 0;
        text-align: left;
    }

    .ready__title {
        margin-top: 0;
    }

    /* Vienas stulpelis: dešinėje pusėje dviem stulpeliams punktai per ilgi. */
    .ready__list {
        grid-template-columns: minmax(0, 1fr);
        gap: .7rem;
    }

    .ready__list li {
        font-size: var(--fs-lg);
    }

    .gallery {
        gap: 1rem;
    }

    /* Konfigūratorius: centruotas skydelis, bet tas pats flow. */
    .cfg {
        align-items: center;
        padding: 2rem;
    }

    .cfg__panel {
        width: min(760px, 100%);
        height: min(88vh, 880px);
        border-radius: var(--r-lg);
        box-shadow: var(--shadow-lg);
    }

    .cfg__body,
    .cfg__done {
        padding: 2.5rem;
    }

    .cfg__head {
        padding: 1rem 1.5rem;
    }

    .choice {
        padding: 1.25rem;
    }

    .choice__media {
        width: 128px;
    }

    .choices--grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ---------- 11. Žemi ekranai -----------------------------------------
   Konfigūratorius turi tilpti ir tada, kai aukščio mažai: horizontaliai
   pasuktas telefonas, mažas nešiojamas kompiuteris ar naršyklė su daug
   įrankių juostų.

   Taisyklės sąmoningai apribotos `.cfg`, nes viešo puslapio hero ir CTA
   mygtukai lieka nepakitę. Mažinami tarpai ir dekoratyvūs elementai,
   o ne pats turinys. */

@media (max-height: 760px) {
    .cfg__body,
    .cfg__done {
        padding-top: 1rem;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    }

    .cfg__title {
        font-size: clamp(1.375rem, 5vw, 1.75rem);
        margin-bottom: .35rem;
    }

    .cfg__eyebrow {
        margin-bottom: .3rem;
    }

    .cfg__hint {
        margin-bottom: .9rem;
        font-size: var(--fs-md);
    }

    .cfg__actions {
        padding-top: .9rem;
    }

    .confirm-card__price {
        padding: .6rem 1rem;
    }

    .confirm-card__price strong {
        font-size: var(--fs-2xl);
    }

    .confirm-features {
        gap: .3rem .8rem;
        font-size: var(--fs-sm);
    }

    .cfg__done-mark {
        width: 48px;
        height: 48px;
        margin-bottom: .8rem;
    }

    .cfg__done-mark svg {
        width: 1.5rem;
        height: 1.5rem;
    }

    .cfg__done .done-card {
        margin-top: 1rem;
        padding: .9rem 1rem;
    }

    .done-card__ref {
        padding-bottom: .55rem;
        margin-bottom: .55rem;
    }

    .done-card__ref strong {
        font-size: var(--fs-xl);
    }

    .cfg .fields {
        gap: .7rem;
    }

    .cfg .field input,
    .cfg .field textarea,
    .cfg .field select {
        min-height: 46px;
        padding: .6rem .85rem;
    }

    .cfg .btn--lg {
        min-height: 50px;
        padding: .75rem 1.5rem;
    }
}

@media (max-height: 620px) {
    .confirm-card__media {
        min-height: 130px;
        max-height: 170px;
    }

    .confirm-card__benefit {
        padding: 1.3rem .95rem .75rem;
        font-size: var(--fs-xs);
    }

    .choice {
        padding: .75rem;
    }

    .choice__media {
        width: 72px;
    }

    .choice__desc {
        display: none;
    }

    .cfg__hint {
        display: none;
    }
}

@media (max-height: 560px) and (min-width: 640px) {
    /* Žemas, bet platus ekranas dažniausiai yra horizontaliai pasuktas telefonas.
       Aukščio nėra, bet yra pločio, todėl turinys išdėstomas plačiau:
       formos laukai dviem stulpeliais, komplektacijos punktai trimis. */
    .cfg__step {
        max-width: 820px;
    }

    .cfg .fields {
        grid-template-columns: 1fr 1fr;
    }

    .confirm-features {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ---------- 12. Atsiliepimai ------------------------------------------
   Slenkama karuselė (CSS scroll-snap, be jokių bibliotekų): telefone
   matoma viena kortelė, kompiuteryje trys. */

.section--reviews {
    background: var(--surface-warm);
}

.reviews__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    gap: .8rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    /* Kortelės prilimpa prie sekcijos kraštų, o ne prie wrap paraščių. */
    margin-inline: calc(-1 * var(--gutter));
    padding: .25rem var(--gutter) .5rem;
    scrollbar-width: none;
}

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

.review {
    position: relative;
    display: flex;
    flex-direction: column;
    scroll-snap-align: center;
    padding: 1.35rem;
    background: var(--surface);
    border-radius: var(--r-lg);
    box-shadow: 0 1px 2px rgba(35, 33, 32, .05), 0 8px 20px rgba(35, 33, 32, .05);
}

/* Kabutės yra fono dekoracija, todėl nespaudžiamos ir nežymimos. */
.review::after {
    content: '”';
    position: absolute;
    top: .1rem;
    right: .85rem;
    font-family: var(--font-display);
    font-size: 5.5rem;
    line-height: 1;
    color: var(--brass);
    opacity: .18;
    pointer-events: none;
    user-select: none;
}

.review__stars {
    display: flex;
    gap: .1rem;
    margin-bottom: .8rem;
    color: var(--brass);
}

.review__stars svg {
    width: .95rem;
    height: .95rem;
    fill: currentColor;
    stroke-width: 1;
}

/* Kortelės vienoje eilutėje yra vienodo aukščio, todėl be šitos ribos viena
   kelių pastraipų rekomendacija ištemptų visas. */
.review__quote {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
    line-clamp: 7;
    overflow: hidden;
    flex: 1 1 auto;
    margin: 0 0 .6rem;
    font-size: var(--fs-md);
    line-height: 1.6;
    color: var(--text-soft);
}

/* Autorius prisegtas prie apačios, kad tinklelyje vardai būtų vienoje linijoje. */
.review__author {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-top: auto;
    padding-top: .9rem;
    border-top: 1px solid var(--border);
}

.review__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px;
    height: 40px;
    overflow: hidden;
    background: var(--brass-soft);
    border-radius: 50%;
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--brass-deep);
}

/* Veidas iškerpamas apvaliai: nuotrauka užpildo visą apskritimą, o jos
   nesant lieka ta pati raidė tame pačiame apskritime. */
.review__avatar picture {
    display: block;
    width: 100%;
    height: 100%;
}

.review__avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.review__meta {
    min-width: 0;
}

.review__meta strong {
    display: block;
    font-size: var(--fs-md);
    line-height: 1.3;
}

.review__meta small {
    display: block;
    font-size: var(--fs-xs);
    color: var(--faint);
}

/* Bendro įvertinimo kortelė virš atsiliepimų.
   Vienintelė vieta puslapyje, kur nuo žalvarinės paletės sąmoningai
   nukrypstama į Facebook mėlyną: kortelė turi būti akivaizdžiai atpažįstama
   kaip Facebook reputacija, o ne kaip dar vienas mūsų teiginys. */
.proof {
    position: relative;
    overflow: hidden;
    margin-bottom: 1.25rem;
    padding: 1.4rem 1.25rem;
    background: linear-gradient(135deg, #e8f1ff 0%, #d6e6ff 52%, #cfe0ff 100%);
    border-radius: var(--r-lg);
    color: #0d2d5e;
}

.proof__body {
    position: relative;
    z-index: 1;
}

.proof__score {
    display: flex;
    align-items: baseline;
    gap: .18em;
    font-family: var(--font-display);
    font-size: clamp(3.2rem, 15vw, 4.6rem);
    font-weight: 700;
    line-height: .95;
    letter-spacing: -.01em;
    color: #0d2d5e;
    font-variant-numeric: lining-nums;
}

.proof__score span {
    font-size: .52em;
}

.proof__stars {
    display: flex;
    gap: .15rem;
    margin-bottom: .35rem;
    color: #1877f2;
}

.proof__stars svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: currentColor;
    stroke-width: 1;
}

.proof__label {
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    font-weight: 700;
    line-height: 1.05;
    color: #0d2d5e;
}

.proof__note {
    max-width: 62%;
    margin-top: .35rem;
    font-size: var(--fs-md);
    color: #3c5a86;
}

.proof__link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1rem;
    padding: .7rem 1.25rem;
    background: #1877f2;
    border-radius: var(--r-full);
    font-size: var(--fs-lg);
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease;
}

.proof__link:hover {
    background: #0f60cc;
}

.proof__link svg {
    width: 1.05rem;
    height: 1.05rem;
}

/* Ženklas nuleistas, kad neužliptų ant prierašo viršutiniame kampe. */
.proof__mark {
    position: absolute;
    top: 57%;
    right: -1.2rem;
    z-index: 0;
    width: 44%;
    max-width: 185px;
    transform: translateY(-50%);
    pointer-events: none;
}

.proof__mark img {
    width: 100%;
    height: auto;
    opacity: .55;
}

.proof__hand {
    position: absolute;
    top: .9rem;
    right: 1rem;
    z-index: 2;
    font-family: 'Caveat', 'Segoe Script', cursive;
    font-size: var(--fs-lg);
    font-weight: 600;
    line-height: 1.1;
    text-align: right;
    color: #2f6fd0;
    pointer-events: none;
}

.proof__hand svg {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    margin: .1rem 1.2rem 0 auto;
    stroke-width: 1.8;
}

    /* Ženklas ir prierašas auga kartu su kortele. */
@media (min-width: 600px) {
    .proof {
        padding: 1.8rem;
    }

    .proof__mark {
        right: .5rem;
        max-width: 250px;
    }

    .proof__note {
        max-width: 56%;
    }

    .proof__hand {
        top: 1.4rem;
        right: calc(250px + 1.5rem);
        font-size: var(--fs-2xl);
    }

    .proof__hand svg {
        width: 1.8rem;
        height: 1.8rem;
    }
}

@media (min-width: 900px) {
    .proof {
        padding: 2.2rem 2.4rem;
    }

    .proof__mark {
        right: 2.5rem;
        max-width: 320px;
    }

    .proof__hand {
        right: calc(320px + 3.5rem);
    }
}


@media (min-width: 600px) {
    .reviews__track {
        grid-auto-columns: 46%;
    }
}

@media (min-width: 900px) {
    /*
     * Kompiuteryje ta pati slenkanti juosta kaip telefone, tik matomos trys
     * kortelės iš karto. Anksčiau čia buvo statiškas tinklelis, rodęs tik
     * pirmus šešis atsiliepimus; dabar prieinami visi, kiek jų yra Admin CP.
     */
    .reviews__track {
        grid-auto-columns: calc((100% - 2.5rem) / 3);
        gap: 1.25rem;
        /*
         * Kraštuose kortelės ne nukertamos, o palaipsniui išnyksta: taip matyti,
         * kad juosta tęsiasi toliau. Kaukė, o ne gradientas sekcijos fono spalva,
         * todėl pakeitus foną nieko taisyti nereikės.
         *
         * Prie perėjimo ilgio pridedamas paraštės plotis: juosta išeina už
         * turinio stulpelio per `--gutter`, todėl be jo nyktų daugiausia
         * tuščia vieta, o ne pati kortelė.
         */
        --reviews-fade: calc(var(--gutter) + 3rem);
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--reviews-fade), #000 calc(100% - var(--reviews-fade)), transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, #000 var(--reviews-fade), #000 calc(100% - var(--reviews-fade)), transparent 100%);
    }

    .review {
        padding: 1.6rem;
    }

    /* Aukštį nustato ilgiausias atsiliepimas: per aukšta riba trumpoms
       kortelėms paliktų didelį tuščią plotą po tekstu. */
    .review__quote {
        -webkit-line-clamp: 6;
        line-clamp: 6;
    }
}

/* ---------- 13. Hero paantraštės variantai ------------------------- */

.hero__lead--full {
    display: none;
}

@media (min-width: 600px) {
    .hero__lead--short {
        display: none;
    }

    .hero__lead--full {
        display: block;
    }
}


/* ---------- 14. Kortelės poraštė -------------------------------------
   Ženklas, kad kortelė spaudžiama: užrašas ir judanti rodyklė vienoje eilutėje
   kortelės apačioje. Taikinio nekuria, nes visą kortelę dengia .pkg__hit.

   Eilutė yra paskutinis kortelės vaikas, todėl visose trijose kortelėse ji
   atsiduria tame pačiame aukštyje, nors turinio jose skirtingai. */

.pkg__go {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .55rem .85rem;
    /* Plona linija, o ne rėmelis aplink: ji atskiria poraštę nuo turinio ir
       tęsiasi per visą kortelę, kaip rekomendacijos juostos viršuje. */
    border-top: 1px solid var(--border);
    color: var(--faint);
    transition: color .18s ease;
}

.pkg__go-label {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-soft);
    transition: color .18s ease;
}

/* Aukštis paimamas iš koordinačių lauko, todėl proporcija nepriklauso nuo to,
   kokį plotį nustatome. */
.pkg__go svg {
    width: 2.8rem;
    height: auto;
    overflow: visible;
}

.pkg--featured .pkg__go svg {
    width: 3.08rem;
}

/*
 * Šaudyklės pastumiamos į dešinę ir grįžta atgal, kiekviena kiek vėluodama.
 * Tai ta pati pateiktos Lottie animacijos eiga (2 s ciklas, 25 fps, poslinkis
 * per ~72 iš 626 vnt., vėlavimas po 2 kadrus), tik be jokios bibliotekos:
 * animuojamas vien `transform`, todėl viską daro kompozitorius.
 */
.chev {
    animation: pkg-go-nudge 2s cubic-bezier(.45, 0, .35, 1) infinite;
}

.chev--1 {
    opacity: .33;
}

.chev--2 {
    opacity: .66;
    animation-delay: .08s;
}

.chev--3 {
    animation-delay: .16s;
}

@keyframes pkg-go-nudge {
    0%   { transform: translateX(0); }
    46%  { transform: translateX(2.8px); }
    100% { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .chev {
        animation: none;
    }
}

/* Rekomenduojamos kortelės rodyklė žalvarinė, o gretimų dviejų blanki:
   spalva vienintelė ją ir išskiria. */
.pkg--featured .pkg__go {
    color: var(--brass-hover);
}

.pkg--featured .pkg__go-label {
    color: var(--brass-deep);
}

.pkg--featured .chev--1 {
    opacity: .42;
}

.pkg--featured .chev--2 {
    opacity: .72;
}

.pkg:has(.pkg__hit:hover) .pkg__go,
.pkg:has(.pkg__hit:focus-visible) .pkg__go {
    color: var(--brass-hover);
}

.pkg:has(.pkg__hit:hover) .pkg__go-label,
.pkg:has(.pkg__hit:focus-visible) .pkg__go-label {
    color: var(--brass-deep);
}

@media (min-width: 900px) {
    .pkg__go {
        padding: .7rem 1.1rem;
    }

    .pkg__go-label {
        font-size: var(--fs-md);
    }

    .pkg__go svg {
        width: 3.15rem;
    }

    .pkg--featured .pkg__go svg {
        width: 3.47rem;
    }
}


/* ---------- 15. Dideli ekranai ------------------------------------
   Nuo 1280 px atsiliepimų juosta tampa gerokai platesnė už tris matomas
   korteles, todėl trumpas perėjimas kraštuose atrodytų kaip atsitiktinis
   nukirpimas. Ilgesnis gradientas parodo, kad juosta tęsiasi toliau. */

@media (min-width: 1280px) {
    .reviews__track {
        --reviews-fade: calc(var(--gutter) + 6rem);
    }
}