/* ==========================================================================
   TILTO — produkto puslapis
   ========================================================================== */

/* Apačioje tarpo nėra: puslapį baigia per visą plotį einantis CTA blokas,
   kuris turi savo vidinį tarpą ir turi lipti prie pat poraštės. */
.t-product { padding-block: var(--t-s5) 0; }

/* Jei CTA nebūtų, paskutinė sekcija vis tiek atsiremtų į poraštę — todėl
   tarpą duodam jai, o ne visam puslapiui. */
.t-product > .t-section:last-child { padding-bottom: var(--t-s8); }

.t-product__top {
  display: grid;
  gap: var(--t-s6);
  margin-bottom: var(--t-s8);
}

/* Nuotrauka užima maždaug pusę ekrano. Gaminys yra tai, ką pirkėjas
   pirmiausia vertina, todėl jam atiduodam daugiau vietos nei tekstui. */
@media (min-width: 900px) {
  /* Nuotraukai ~40 % pločio, likusi dalis — informacijai ir užsakymui. */
  .t-product__top { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr); gap: var(--t-s7); }

  /* Nuotrauka aukšta, todėl informacija prilimpa ir keliauja kartu. */
  .t-product__intro {
    position: sticky;
    top: calc(var(--t-header-h) + var(--t-s5));
    align-self: start;
  }
}

@media (min-width: 1400px) {
  .t-product__top { grid-template-columns: minmax(0, 0.66fr) minmax(0, 1fr); gap: var(--t-s8); }
}

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

.t-gallery { display: grid; gap: var(--t-s2); }

@media (min-width: 620px) {
  .t-gallery { grid-template-columns: 72px minmax(0, 1fr); }

  /* Kai nuotrauka viena, miniatiūrų stulpelio nėra — be šitos taisyklės
     pagrindinė nuotrauka atsidurtų 72 px pločio stulpelyje.
     `:first-child`, o ne `:only-child`: po galerija dar yra spalvų juosta,
     ir su `:only-child` viena nuotrauka susitrauktų iki miniatiūros pločio. */
  .t-gallery__main:first-child { grid-column: 1 / -1; }
}

.t-gallery__thumbs {
  display: flex;
  gap: var(--t-s2);
  overflow-x: auto;
  order: 2;
}

@media (min-width: 620px) {
  /* Miniatiūros stulpeliu, bet ne aukštesniu už pačią nuotrauką.

     Anksčiau stulpelis buvo `overflow: visible` ir augo be ribų. Prie
     trylikos nuotraukų (spalvų kadrai!) jis pasidarydavo dvigubai
     aukštesnis už gaminio nuotrauką ir ištempdavo visą hero bloką —
     dešinėje likdavo tuščias plotas, o užsakymo lentelė nusikeldavo
     žemyn.

     Dabar stulpelis prilygsta nuotraukos aukščiui ir slenkamas. */
  .t-gallery__thumbs {
    flex-direction: column;
    order: 0;
    align-self: start;
    /* Telpa lygiai šešios miniatiūros, likusios pasiekiamos slenkant.
       72 px plotis × 4:5 = 90 px aukščio, plius penki tarpai. */
    max-height: calc(6 * 90px + 5 * var(--t-s2));
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    padding-inline-end: 2px;

    /* Apatinis kraštas prigesinamas — taip matyti, kad sąrašas tęsiasi.
       Kai nuotraukų mažiau nei šešios, kaukė nesimato, nes nėra ko
       gesinti. */
    mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
  }

  .t-gallery__thumbs::-webkit-scrollbar { width: 6px; }
  .t-gallery__thumbs::-webkit-scrollbar-track { background: transparent; }
  .t-gallery__thumbs::-webkit-scrollbar-thumb { background: var(--t-line-strong); border-radius: 999px; }
}

.t-gallery__thumb {
  flex: none;
  width: 72px;
  padding: 0;
  border: 1px solid var(--t-line);
  background: var(--t-paper);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--t-ease);
}

.t-gallery__thumb.is-active { border-color: var(--t-ink); }
.t-gallery__thumb img { width: 100%; aspect-ratio: 4 / 5; object-fit: contain; padding: 3px; }

/* Kvadratas, ne 4:5. Su `max-height` ir `aspect-ratio` kartu naršyklė
   ribojo aukštį, o plotį traukė proporcingai — todėl tarp nuotraukos ir
   teksto atsirasdavo plati tuščia juosta. */
.t-gallery__main {
  position: relative;
  width: 100%;
  /* Ta pati priežastis kaip kortelėje: balta prijuostė ant balto fono
     atrodo kaip tuščias plotas. */
  background: var(--t-paper);
  border: 1px solid var(--t-line);
  aspect-ratio: 1 / 1;
  min-height: 420px;
  overflow: hidden;
}

/* Neaktyvios nuotraukos slepiamos `display`, o ne `opacity` — permatoma
   nuotrauka vis tiek užima vietą ir gali uždengti aktyviąją. */
.t-gallery__image { display: none; }

.t-gallery__image.is-active {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Tiekėjo nuotraukos jau turi savo baltą paraštę — papildomas didelis
     vidinis tarpas gaminį dar labiau sumažindavo. */
  padding: var(--t-s3);
  animation: t-fade-in var(--t-base) var(--t-ease);
}

@keyframes t-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.t-gallery__image.is-active { cursor: zoom-in; }

.t-gallery__main .t-reg { position: absolute; top: 12px; left: 12px; }

/* --- padidinta peržiūra ----------------------------------------------------- */

.t-gallery__zoom {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .75rem;
  border: 1px solid var(--t-line);
  background: rgba(255, 255, 255, .92);
  color: var(--t-ink);
  font-family: var(--t-font-ui);
  font-size: var(--t-fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--t-ls-label);
  cursor: pointer;
  transition: background var(--t-fast) var(--t-ease), border-color var(--t-fast) var(--t-ease);
}

.t-gallery__zoom:hover { background: #fff; border-color: var(--t-ink); }
.t-gallery__zoom svg { flex: none; }

.t-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(17, 17, 17, .94);
  animation: t-fade-in var(--t-fast) var(--t-ease);
}

/* `hidden` prieš `display:flex` nelaimi savaime — be šito langas liktų
   matomas visą laiką. */
.t-lightbox[hidden] { display: none; }

.t-lightbox__figure {
  margin: 0;
  max-width: min(1200px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--t-s3);
}

.t-lightbox__image {
  max-width: 100%;
  /* Vietos antraštei ir tarpams — kitaip aukšta nuotrauka išlenda už ekrano. */
  max-height: calc(100vh - 8rem);
  object-fit: contain;
  background: #fff;
}

.t-lightbox__caption {
  font-family: var(--t-font-ui);
  font-size: var(--t-fs-xs);
  letter-spacing: var(--t-ls-label);
  color: rgba(255, 255, 255, .7);
}

.t-lightbox__close,
.t-lightbox__nav {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  cursor: pointer;
  line-height: 1;
  transition: background var(--t-fast) var(--t-ease), border-color var(--t-fast) var(--t-ease);
}

.t-lightbox__close:hover,
.t-lightbox__nav:hover { background: rgba(255, 255, 255, .16); border-color: #fff; }

.t-lightbox__close {
  top: clamp(.75rem, 2vw, 1.5rem);
  right: clamp(.75rem, 2vw, 1.5rem);
  width: 44px;
  height: 44px;
  font-size: 1.75rem;
}

.t-lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 64px;
  font-size: 2rem;
}

.t-lightbox__nav--prev { left: clamp(.5rem, 2vw, 1.5rem); }
.t-lightbox__nav--next { right: clamp(.5rem, 2vw, 1.5rem); }

@media (max-width: 600px) {
  /* Telefone rodyklės ant nuotraukos kraštų uždengia patį gaminį —
     nuleidžiam jas į apačią, šalia numeracijos. */
  .t-lightbox__nav { top: auto; bottom: 1rem; transform: none; height: 48px; }
}

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

/* --- įžanga ---------------------------------------------------------------- */

.t-product__intro { display: flex; flex-direction: column; gap: var(--t-s4); }

/* Kol ženklas neturi logotipo, jo pavadinimas rodomas kaip vardinė
   plokštelė — praretintos didžiosios rėmelyje. Tai atrodo kaip sprendimas,
   o ne kaip vieta, kurioje kažko trūksta. */
.t-product__brand {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 6px 10px;
  border: 1px solid var(--t-line-strong);
  font-family: var(--t-font-ui);
  font-size: var(--t-fs-tag);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--t-ink);
}

.t-product__title {
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  text-transform: uppercase;
  letter-spacing: var(--t-ls-display);
}

.t-product__badges { display: flex; flex-wrap: wrap; gap: var(--t-s2); }

.t-product__price {
  display: flex;
  align-items: baseline;
  gap: var(--t-s3);
  font-family: var(--t-font-ui);
  font-size: 1.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding-block: var(--t-s3);
  border-block: 1px solid var(--t-line);
}

.t-product__price del { color: var(--t-ink-soft); font-weight: 400; font-size: 1.125rem; }
.t-product__vat { font-family: var(--t-font-body); font-size: var(--t-fs-xs); font-weight: 400; color: var(--t-ink-soft); }
.t-product__excerpt { color: var(--t-ink-soft); font-size: var(--t-fs-sm); }

/* Greitieji faktai — spalvos, dydžiai, išsiuntimas. */
.t-product__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--t-line);
  border: 1px solid var(--t-line);
}

.t-product__facts > div {
  background: var(--t-surface);
  padding: var(--t-s3) var(--t-s4);
}

.t-product__facts dt {
  font-family: var(--t-font-ui);
  font-size: var(--t-fs-tag);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--t-ls-label);
  color: var(--t-ink-soft);
}

.t-product__facts dd {
  margin: 4px 0 0;
  font-family: var(--t-font-ui);
  font-size: 1.0625rem;
  font-weight: 700;
}

/* Pasitikėjimo eilutė po nuolaidomis. */
.t-product__trust {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--t-s2);
  font-size: var(--t-fs-xs);
  color: var(--t-ink-soft);
}

.t-product__trust li { display: flex; align-items: center; gap: var(--t-s2); }

.t-product__trust li::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: none;
  background: var(--t-signal);
}

/* --- hero akordeonai: nuolaidos, aprašymas, specifikacija -------------------
 * Trys blokai vienas po kito. Anksčiau kiekvienas atrodė kitaip — kopėčios
 * turėjo savo antraštę su pliusu, specifikacija buvo lentelė puslapio
 * apačioje, o aprašymas — atskira sekcija. Dabar visi trys yra tas pats
 * `.t-acc` komponentas (žr. `components.css`), o čia lieka tik tai, kas
 * skiriasi bloko viduje. */

.t-product__acc { margin-block: var(--t-s2); }

/* Antraštės tekstas su paaiškinimu po juo. Etiketė mažom raidėm ir
   praretinta — kaip visos kitos etiketės temoje. */
.t-acc__label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.t-acc__label > span:first-child {
  font-family: var(--t-font-ui);
  font-size: var(--t-fs-tag);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--t-ls-label);
  color: var(--t-ink-soft);
}

/* Suskleistame bloke tai vienintelis matomas skaičius — jis ir yra
   priežastis atidaryti. */
.t-ladder__lead {
  font-family: var(--t-font-ui);
  font-size: 1.0625rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--t-ink);
}

.t-ladder__lead .amount { color: var(--t-signal); }

/* Lentelė ir sąrašas kabo prie bloko kraštų, todėl vidinį tarpą
   `.t-acc__a` čia nuimam ir grąžinam per pačių elementų `padding`. */
.t-product__acc .t-acc__a { padding: 0; }
.t-product__acc .t-acc__a > .t-prose { padding: 0 var(--t-s4) var(--t-s4); }
.t-product__acc .t-acc__a > dl { padding-inline: var(--t-s4); }
.t-product__acc .t-acc__a > .t-btn { margin: 0 var(--t-s4) var(--t-s4); width: calc(100% - var(--t-s4) * 2); }

.t-ladder__body { border-top: 1px solid var(--t-line); }

.t-ladder__table { width: 100%; border-collapse: collapse; font-size: var(--t-fs-sm); }

.t-ladder__table th {
  text-align: left;
  padding: var(--t-s2) var(--t-s4);
  font-family: var(--t-font-ui);
  font-size: var(--t-fs-tag);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--t-ls-label);
  color: var(--t-ink-soft);
  border-bottom: 1px solid var(--t-line);
}

.t-ladder__table th:not(:first-child),
.t-ladder__table td:not(:first-child) { text-align: right; }

.t-ladder__table td {
  padding: var(--t-s3) var(--t-s4);
  border-bottom: 1px solid var(--t-line);
}

.t-ladder__table tr:last-child td { border-bottom: 0; }

/* Kaina yra pagrindinis stulpelis — procentas tik paaiškina, iš kur ji. */
.t-ladder__price { font-family: var(--t-font-ui); font-weight: 700; white-space: nowrap; }
.t-ladder__pct { color: var(--t-ink-soft); white-space: nowrap; }

.t-ladder__step { transition: background-color var(--t-fast) var(--t-ease); }

.t-ladder__step.is-active td {
  background: color-mix(in srgb, var(--t-signal) 10%, transparent);
}

.t-ladder__step.is-active td:first-child { box-shadow: inset 3px 0 0 var(--t-signal); }
.t-ladder__step.is-active .t-ladder__price { color: var(--t-signal); }

.t-ladder__note {
  padding: var(--t-s3) var(--t-s4) var(--t-s4);
  font-size: var(--t-fs-xs);
  color: var(--t-ink-soft);
  border-top: 1px solid var(--t-line);
}

.t-ladder__note .t-link { font-size: var(--t-fs-xs); margin-inline-start: var(--t-s2); }

/* --- matrica ----------------------------------------------------------------
   Pagrindinis puslapio elementas: spalvos eilutėmis, dydžiai stulpeliais,
   likutis po kiekvienu langeliu. */

.t-matrix {
  border: 1px solid var(--t-line);
  background: var(--t-surface);
  margin-bottom: var(--t-s8);
}

.t-matrix__head {
  display: grid;
  gap: var(--t-s3);
  padding: var(--t-s5);
  border-bottom: 1px solid var(--t-line);
}

@media (min-width: 900px) {
  .t-matrix__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
}

.t-matrix__head h2 {
  margin-top: var(--t-s2);
  font-size: var(--t-fs-h2);
  text-transform: uppercase;
}

.t-matrix__hint { color: var(--t-ink-soft); font-size: var(--t-fs-sm); max-width: 58ch; }

.t-matrix__warn {
  margin-bottom: var(--t-s4);
  padding: var(--t-s3) var(--t-s4);
  border-left: 3px solid var(--t-signal);
  background: var(--t-paper);
  font-size: var(--t-fs-sm);
  color: var(--t-ink-soft);
}

.t-matrix__warn a { color: var(--t-signal); }

/* Užuomina rodoma tik tada, kai lentelė iš tikrųjų netelpa — tai nustato
   JS (`.has-overflow` ant viewport'o), o ne ekrano plotis: platus telefonas
   su trimis dydžiais telpa, siauras planšetės langas su dvylika — ne. */
.t-matrix__scrollhint {
  display: none;
  align-items: baseline;
  gap: var(--t-s2);
  margin-bottom: var(--t-s2);
  color: var(--t-ink-soft);
  font-size: var(--t-fs-xs);
}

.t-matrix:has(.t-matrix__viewport.has-overflow) .t-matrix__scrollhint { display: flex; }

/* Atsarginis kelias senesnėms naršyklėms be `:has()` — geriau parodyti
   užuominą be reikalo, nei nerodyti tada, kai jos reikia. */
@supports not selector(:has(*)) {
  @media (max-width: 899px) {
    .t-matrix__scrollhint { display: flex; }
  }
}

.t-matrix__scrollhint span { font-size: 1rem; line-height: 1; color: var(--t-signal); }

/* --- slinkimo sritis ir mygtukas --------------------------------------------- */

.t-matrix__viewport { position: relative; }

/* Apvalus mygtukas prilipęs prie dešinio krašto. Telefone jis yra
   vienintelis matomas ženklas, kad dešinėje dar yra dydžių: slankiklio
   iOS nerodo, o prilipęs spalvų stulpelis sukuria įspūdį, kad lentelė
   baigėsi. Paspaudus nuslenka per maždaug ekraną. */
.t-matrix__more {
  position: absolute;
  top: 50%;
  inset-inline-end: -6px;
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--t-ink);
  border-radius: 50%;
  background: var(--t-ink);
  color: #fff;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(20, 23, 26, .28);
}

.t-matrix__more[hidden] { display: none; }
.t-matrix__more:hover { background: var(--t-signal); border-color: var(--t-signal); }

/* Kol lentelė dar nė karto neslinkta, mygtukas švelniai pulsuoja — be to
   jis atrodo kaip dekoracija ir lieka nepastebėtas. */
.t-matrix__viewport:not(.is-scrolled) .t-matrix__more {
  animation: t-nudge 1.8s var(--t-ease) 3;
}

@keyframes t-nudge {
  0%, 60%, 100% { transform: translateY(-50%) translateX(0); }
  30%           { transform: translateY(-50%) translateX(-6px); }
}

@media (prefers-reduced-motion: reduce) {
  .t-matrix__viewport:not(.is-scrolled) .t-matrix__more { animation: none; }
}

/* Telefone lentelė ~650 px pločio, o ekranas ~360 px — be užuominos pirkėjas
   nesupranta, kad dešinėje dar yra dydžių. Šešėlis kraštuose atsiranda tik
   tada, kai tikrai yra ką slinkti: `background-attachment: local` sluoksniai
   slenka kartu su turiniu ir uždengia `scroll` sluoksnio gradientą. */
.t-matrix__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  /* Stulpeliai sustoja ties kraštu — slinkdamas pirštu pirkėjas nelieka
     su per pusę matomu dydžiu, į kurį vis tiek reikia įvesti skaičių. */
  scroll-snap-type: x proximity;
  background:
    linear-gradient(to right, var(--t-surface) 30%, rgba(245, 245, 241, 0)) left center / 40px 100% no-repeat local,
    linear-gradient(to left,  var(--t-surface) 30%, rgba(245, 245, 241, 0)) right center / 40px 100% no-repeat local,
    linear-gradient(to right, rgba(20, 23, 26, .18), rgba(20, 23, 26, 0)) left center / 18px 100% no-repeat scroll,
    linear-gradient(to left,  rgba(20, 23, 26, .18), rgba(20, 23, 26, 0)) right center / 18px 100% no-repeat scroll;
}

/* Slankiklis matomas visada, o ne tik slenkant. Tai antras ženklas šalia
   mygtuko — „overlay“ slankikliai macOS ir iOS pasirodo tik judesio metu,
   todėl statiškame ekrane lentelė atrodo nesislenkanti. */
.t-matrix__scroll::-webkit-scrollbar { height: 10px; }
.t-matrix__scroll::-webkit-scrollbar-track { background: var(--t-surface); }

.t-matrix__scroll::-webkit-scrollbar-thumb {
  background: var(--t-line-strong);
  border-radius: 999px;
  border: 2px solid var(--t-surface);
}

.t-matrix__scroll::-webkit-scrollbar-thumb:hover { background: var(--t-ink-soft); }

.t-matrix__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-fs-sm);
}

/* Snap taikom antraštės langeliams — jie nusako stulpelio kraštą. */
.t-matrix__table thead th { scroll-snap-align: end; }
.t-matrix__table thead th.t-matrix__corner { scroll-snap-align: none; }

.t-matrix__table th,
.t-matrix__table td {
  border-bottom: 1px solid var(--t-line);
  border-inline-end: 1px solid var(--t-line);
  padding: var(--t-s2);
  text-align: center;
}

.t-matrix__table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--t-paper);
  font-family: var(--t-font-ui);
  font-size: var(--t-fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding-block: var(--t-s3);
  white-space: nowrap;
}

/* Spalvų stulpelis lieka matomas slenkant lentelę į šoną. */
.t-matrix__color,
.t-matrix__corner {
  position: sticky;
  inset-inline-start: 0;
  z-index: 3;
  background: var(--t-surface);
  text-align: left !important;
  min-width: 160px;
  font-weight: 600;
}

.t-matrix__corner { z-index: 4; background: var(--t-paper); }

.t-matrix__color {
  display: table-cell;
  padding-inline: var(--t-s4);
  white-space: nowrap;
}

.t-matrix__color .t-swatch { display: inline-block; vertical-align: middle; margin-inline-end: var(--t-s2); }

.t-matrix__rowsum {
  font-family: var(--t-font-ui);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border-inline-end: 0 !important;
  min-width: 64px;
  color: var(--t-ink-soft);
}

.t-matrix__rowsum.has-qty { color: var(--t-ink); }
/* `--t-line-strong` yra RĖMELIŲ spalva (1,72:1) — kaip tekstas ji praktiškai
   neįskaitoma. Brūkšneliui „nėra dydžio" naudojam antrinį rašalą (5,9:1). */
/* Tuščias langelis — vien brūkšnys, be įvesties lauko. Aukštis toks pat
   kaip langelio su lauku, kad lentelės eilutės nešokinėtų. */
.t-matrix__na {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  color: var(--t-ink-soft);
}

/* --- langelis --------------------------------------------------------------- */

.t-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; }

.t-cell input {
  width: 56px;
  height: 38px;
  padding: 0 4px;
  border: 1px solid var(--t-line-strong);
  border-radius: var(--t-radius);
  background: var(--t-surface);
  color: var(--t-ink);
  font: inherit;
  font-family: var(--t-font-ui);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  transition: border-color var(--t-fast) var(--t-ease), background-color var(--t-fast) var(--t-ease);
  -moz-appearance: textfield;
}

.t-cell input::-webkit-outer-spin-button,
.t-cell input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Matricoje langelių dešimtys — klaviatūra einant privalu matyti, kuriame
   esi. Rėmelį nuimam tik pelės fokusui, `:focus-visible` jį palieka. */
.t-cell input:focus { border-color: var(--t-ink); }
.t-cell input:focus:not(:focus-visible) { outline: none; }

.t-cell input.has-qty {
  border-color: var(--t-signal);
  background: color-mix(in srgb, var(--t-signal) 8%, transparent);
}

.t-cell.is-out input { background: var(--t-paper); border-style: dashed; cursor: not-allowed; }

/* 38 px langelis pirštu per žemas — telefone keliam iki 44 px (WCAG 2.5.8).
   Plotį kartu siauriname, kad lentelė be reikalo neišplistų dar labiau. */
@media (max-width: 799px) {
  .t-cell input {
    width: 52px;
    height: 44px;
    min-height: 44px;
  }
}

.t-cell__stock {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--t-ok);
}

.t-cell__stock.is-low { color: var(--t-warn); }
/* Ta pati klaida kaip su `.t-matrix__na` — likučio žyma turi būti skaitoma. */
.t-cell__stock.is-out { color: var(--t-ink-soft); }

/* --- santrauka --------------------------------------------------------------
   Prilimpa prie ekrano apačios, kol matricoje renkami kiekiai. */

.t-matrix__summary {
  position: sticky;
  bottom: 0;
  z-index: var(--t-z-sticky);
  display: grid;
  gap: var(--t-s4);
  padding: var(--t-s4) var(--t-s5);
  background: var(--t-ink);
  color: #fff;
}

@media (min-width: 800px) {
  .t-matrix__summary { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}

.t-summary__figures {
  display: flex;
  flex-wrap: wrap;
  gap: var(--t-s5) var(--t-s7);
}

.t-summary__figures .t-label { color: rgba(255, 255, 255, .55); display: block; }

.t-summary__figures strong {
  display: block;
  margin-top: 4px;
  font-family: var(--t-font-ui);
  font-size: 1.25rem;
  font-weight: 700;
}

.t-summary__total strong { font-size: 1.75rem; color: var(--t-signal-on-dark); }

.t-summary__actions {
  display: flex;
  align-items: center;
  gap: var(--t-s4);
  justify-content: flex-end;
}

/* Pastaba dabar neša ir klaidų tekstą (role="alert"), todėl 60 % baltumo
   nebeužtenka — keliam iki 82 %, kad būtų virš 4,5:1 ant rašalo fono. */
.t-summary__note { font-size: var(--t-fs-xs); color: rgba(255, 255, 255, .82); }
.t-summary__note.is-error { color: #FFB4A6; font-weight: 600; }
.t-matrix__summary .t-btn--primary:disabled { opacity: .45; cursor: not-allowed; }

/* Antrinis B2B kelias: 10–200 vnt. užsakymai dažnai baigiasi individualiu
   pasiūlymu, o ne krepšeliu. Mygtukas stovi šalia, o ne vietoj „Į krepšelį". */
.t-summary__quote {
  border-color: rgba(255, 255, 255, .45);
  color: #fff;
  background: transparent;
}
.t-summary__quote:hover { border-color: #fff; color: #fff; }

/* Nuo 200 vnt. pasiūlymas tampa realesniu keliu nei savarankiškas pirkimas,
   todėl JS jį iškelia į priekį (`order`), o ne slepia krepšelio mygtuką. */
.t-summary__actions .t-summary__quote.is-promoted {
  order: -1;
  border-color: #fff;
  font-weight: 700;
}

@media (max-width: 799px) {
  /* Telefone santrauka prilipusi prie ekrano apačios, tad kiekviena jos
     eilutė atima vietą iš pačios lentelės — o lentelė čia yra pagrindinis
     darbo įrankis. Todėl visi keturi rodikliai telpa į VIENĄ eilutę:
     dviejų stulpelių gardelė su per visą plotį išsitiesusia suma juos
     išdėliodavo trimis eilėmis ir blokas išaugdavo į pusę ekrano. */
  .t-matrix__summary { gap: var(--t-s3); padding: var(--t-s3) var(--t-s4); }

  .t-summary__figures {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 var(--t-s3);
  }

  .t-summary__figures .t-label {
    font-size: 10px;
    letter-spacing: .04em;
    /* Etiketės trumpos, bet „SUMA BE PVM“ siaurame stulpelyje lūžta į dvi
       eilutes ir vėl kelia bloko aukštį. Leidžiam jai susitraukti. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .t-summary__figures strong { margin-top: 0; font-size: 1.0625rem; line-height: 1.2; }
  .t-summary__total strong { font-size: 1.125rem; }

  .t-summary__actions { flex-wrap: wrap; justify-content: stretch; gap: var(--t-s2); }
  .t-summary__actions .t-btn { flex: 1 1 0; padding-inline: var(--t-s3); font-size: var(--t-fs-xs); }
  .t-summary__note { flex: 1 0 100%; order: -1; margin: 0; }
}

/* Labai siauri ekranai: keturi stulpeliai nebetelpa, todėl grįžtam į
   du — bet abu rodikliai lieka vienodo pločio, be išsitiesiančios sumos,
   tad eilučių yra lygiai dvi. */
@media (max-width: 400px) {
  .t-summary__figures {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--t-s2) var(--t-s3);
  }

  .t-summary__figures strong { font-size: 1rem; }
  .t-summary__total strong { font-size: 1.0625rem; }
}

/* --- specifikacijos sąrašas --------------------------------------------------
 * Ir aprašymas, ir specifikacija persikėlė į hero akordeonus prie kainos —
 * puslapio apačioje jų nebeliko, todėl atskiro dviejų stulpelių bloko
 * stilių čia irgi nebereikia. */

.t-product__about .t-prose { font-size: var(--t-fs-sm); }
.t-product__about .t-prose > :first-child { margin-top: 0; }

.t-product__specs dl { margin: 0; border-top: 1px solid var(--t-line); }

.t-product__specs dl > div {
  display: flex;
  justify-content: space-between;
  gap: var(--t-s3);
  padding-block: var(--t-s3);
  border-bottom: 1px solid var(--t-line);
  font-size: var(--t-fs-sm);
}

.t-product__specs dl > div:last-child { border-bottom: 0; }
.t-product__specs dt { color: var(--t-ink-soft); }
.t-product__specs dd { margin: 0; font-family: var(--t-font-ui); font-weight: 600; text-align: right; }

/* --- spaudos blokas ---------------------------------------------------------- */

.t-print {
  display: grid;
  gap: var(--t-s6);
  padding: var(--t-s7) var(--t-s6);
  border: 1px solid var(--t-line);
  background: var(--t-surface);
  margin-bottom: var(--t-s8);
}

@media (min-width: 900px) {
  .t-print { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--t-s8); }
}

.t-print__intro h2 {
  margin-top: var(--t-s2);
  font-size: var(--t-fs-h2);
  text-transform: uppercase;
}

.t-print__intro p { margin-top: var(--t-s4); color: var(--t-ink-soft); font-size: var(--t-fs-sm); max-width: 52ch; }

.t-print__places { margin-block: var(--t-s5); }
.t-print__places ul { list-style: none; padding: 0; margin-top: var(--t-s3); display: flex; flex-wrap: wrap; gap: var(--t-s2); }

.t-print__places li {
  padding: 5px var(--t-s3);
  border: 1px solid var(--t-line-strong);
  border-radius: var(--t-radius);
  font-size: var(--t-fs-xs);
}

.t-print__methods {
  display: grid;
  gap: 1px;
  background: var(--t-line);
  border: 1px solid var(--t-line);
}

@media (min-width: 620px) {
  .t-print__methods { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.t-print__card {
  background: var(--t-surface);
  padding: var(--t-s5) var(--t-s4);
  display: flex;
  flex-direction: column;
  gap: var(--t-s2);
}

.t-print__icon { color: var(--t-signal); }
.t-print__card h3 { font-size: var(--t-fs-h3); font-weight: 700; }

.t-print__when {
  font-family: var(--t-font-ui);
  font-size: var(--t-fs-tag);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--t-ls-label);
  color: var(--t-ink-soft);
}

.t-print__card p { font-size: var(--t-fs-xs); color: var(--t-ink-soft); line-height: var(--t-lh-snug); }

/* --- atsarginė pirkimo forma -------------------------------------------------
 * Kai matricos sudaryti nepavyksta (produktas ne variacinis arba neturi
 * spalvos/dydžio atributų), rodoma standartinė WooCommerce forma. Ji
 * buvo visiškai be stilių — pirkėjui tai atrodė kaip sugedęs puslapis. */

.t-matrix__simple { padding: var(--t-s5); }

.t-matrix__simple .quantity {
  display: inline-flex;
  margin-inline-end: var(--t-s3);
}

.t-matrix__simple .quantity input {
  width: 88px;
  height: 48px;
  padding: 0 var(--t-s3);
  border: 1px solid var(--t-line);
  font-family: var(--t-font-ui);
  font-size: var(--t-fs-sm);
  text-align: center;
}

.t-matrix__simple .single_add_to_cart_button {
  min-height: 48px;
  padding-inline: var(--t-s6);
  border: 1px solid var(--t-ink);
  background: var(--t-ink);
  color: #fff;
  font-family: var(--t-font-ui);
  font-size: var(--t-fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--t-ls-label);
  cursor: pointer;
  transition: background var(--t-fast) var(--t-ease);
}

.t-matrix__simple .single_add_to_cart_button:hover { background: var(--t-signal); border-color: var(--t-signal); }
.t-matrix__simple .single_add_to_cart_button:disabled { opacity: .5; cursor: not-allowed; }

.t-matrix__simple .variations {
  width: 100%;
  margin-bottom: var(--t-s5);
  border-collapse: collapse;
}

.t-matrix__simple .variations th,
.t-matrix__simple .variations td { padding-block: var(--t-s2); text-align: start; vertical-align: middle; }

.t-matrix__simple .variations label {
  font-family: var(--t-font-ui);
  font-size: var(--t-fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--t-ls-label);
}

.t-matrix__simple select {
  min-height: 44px;
  width: 100%;
  max-width: 320px;
  padding: 0 var(--t-s3);
  border: 1px solid var(--t-line);
  background: #fff;
  font: inherit;
  font-size: var(--t-fs-sm);
}

.t-matrix__simple .woocommerce-variation-price { margin-bottom: var(--t-s4); font-size: var(--t-fs-lead); }
.t-matrix__simple .reset_variations { font-size: var(--t-fs-xs); }

/* Spalvos langelis, kuriam tiekėjas davė nuotrauką — paspaudus galerija
   persijungia į tos spalvos kadrą. Be užuominos niekas nespaustų, todėl
   rodyklė ir pabraukimas užvedus. */
.t-matrix__color.has-image { cursor: pointer; }
.t-matrix__color.has-image:hover span:last-child { text-decoration: underline; }

.t-matrix__color.is-shown {
  box-shadow: inset 3px 0 0 var(--t-signal);
}

.t-matrix__color.has-image:focus-visible {
  outline: 2px solid var(--t-ink);
  outline-offset: -2px;
}

/* Spalvos kadras galerijoje elgiasi kaip įprastas — tik atkeliauja iš
   tiekėjo serverio, todėl gali būti kitokių proporcijų. */
.t-gallery__image--color { background: #fff; }

/* Ženklo logotipas vietoj teksto — atpažįstamas greičiau. Aukštis
   fiksuotas, kad skirtingų proporcijų logotipai neišstumtų antraštės. */
/* Ženklo logotipas virš pavadinimo.
 *
 * Ankstesnės ribos (160 px pločio, 44 px aukščio) buvo per griežtos: dalis
 * logotipų yra kvadratiniai su šūkiu apačioje, ir tokie susitraukdavo iki
 * dydžio, kuriame nebeįskaitomas nei ženklas, nei tekstas. Aukštį lemia
 * proporcijos, todėl ribojam jį, o ne plotį. */
.t-product__brandlogo {
  display: block;
  max-width: 100%;
  margin-bottom: var(--t-s3);
}

.t-product__brandlogo img {
  display: block;
  max-width: 300px;
  max-height: 120px;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: left center;
}

@media (max-width: 640px) {
  .t-product__brandlogo img { max-width: 200px; max-height: 90px; }
}

/* Ženklas yra nuoroda į to gamintojo prekes — tai turi matytis, bet be
   pabraukimo: logotipas su pabraukta linija atrodo kaip klaida. */
a.t-product__brandlogo { text-decoration: none; }
a.t-product__brandlogo img { transition: opacity var(--t-fast) var(--t-ease); }
a.t-product__brandlogo:hover img { opacity: .7; }

a.t-product__brand { text-decoration: none; transition: border-color var(--t-fast) var(--t-ease), color var(--t-fast) var(--t-ease); }
a.t-product__brand:hover { border-color: var(--t-signal); color: var(--t-signal); }

/* --- spalvų juosta po galerija -----------------------------------------------
 * Gaminys pirmiausia renkamas akimis: „kaip atrodo raudonas“. Anksčiau tai
 * buvo įmanoma tik matricoje, kuri stovi žemiau ir skirta kiekiams. */

.t-gallery__colors {
  grid-column: 1 / -1;
  margin-top: var(--t-s4);
  padding-top: var(--t-s4);
  border-top: 1px solid var(--t-line);
}

.t-gallery__colorslabel {
  display: block;
  margin-bottom: var(--t-s3);
  font-family: var(--t-font-ui);
  font-size: var(--t-fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--t-ls-label);
  color: var(--t-ink-soft);
}

.t-swatchbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--t-s2);
}

.t-swatchbar__item {
  padding: 3px;
  border: 1px solid var(--t-line);
  background: var(--t-surface);
  cursor: pointer;
  line-height: 0;
  transition: border-color var(--t-fast) var(--t-ease);
}

.t-swatchbar__item:hover { border-color: var(--t-ink-soft); }

/* Pasirinktą žymim storesniu rėmeliu, ne spalva: pati spalva čia yra
   turinys, ir jos keisti negalima. */
.t-swatchbar__item.is-shown {
  border-color: var(--t-ink);
  box-shadow: inset 0 0 0 1px var(--t-ink);
}

.t-swatchbar__item:focus-visible { outline: 2px solid var(--t-ink); outline-offset: 2px; }

.t-swatchbar__dot {
  display: block;
  width: 26px;
  height: 26px;
  background-size: cover;
  background-position: center;
}

/* Kai nei tiekėjo kvadratėlio, nei atspėtos spalvos nėra — įstrižas
   brūkšnys, kad langelis neatrodytų kaip neužsikrovusi nuotrauka. */
.t-swatchbar__dot--none {
  background: linear-gradient(135deg, var(--t-paper) 45%, var(--t-line) 45%, var(--t-line) 55%, var(--t-paper) 55%);
}

.t-gallery__colorsname {
  margin-top: var(--t-s3);
  min-height: 1.2em;
  font-size: var(--t-fs-sm);
  color: var(--t-ink-soft);
}