/* ==========================================================================
   TILTO — komponentai (BEM su „t-" prefiksu)
   ========================================================================== */

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

.t-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--t-s2);
  height: var(--t-control-h);
  padding-inline: var(--t-s5);
  border: 1px solid transparent;
  border-radius: var(--t-radius);
  font-family: var(--t-font-ui);
  font-size: var(--t-fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--t-ease),
              border-color var(--t-fast) var(--t-ease),
              color var(--t-fast) var(--t-ease),
              transform var(--t-fast) var(--t-ease);
}

.t-btn:active { transform: scale(.985); }

/* Baltas tekstas ant ryškios oranžinės neperlipo 4,5:1, todėl pagrindinis
   mygtukas dabar stovi ant tamsintos spaudos spalvos, o hover'ui lieka dar
   viena pakopa — kitaip būsenos pokytis būtų nematomas. */
.t-btn--primary { background: var(--t-signal-dark); color: #fff; }
.t-btn--primary:hover { background: var(--t-signal-deep); color: #fff; }

.t-btn--secondary { background: var(--t-ink); color: #fff; }
.t-btn--secondary:hover { background: var(--t-navy); color: #fff; }

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

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

.t-link {
  display: inline-block;
  font-family: var(--t-font-ui);
  font-size: var(--t-fs-sm);
  font-weight: 600;
  color: var(--t-ink);
  background-image: linear-gradient(var(--t-signal), var(--t-signal));
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 160ms var(--t-ease), color var(--t-fast) var(--t-ease);
}
.t-link:hover { color: var(--t-signal); }

/* --- žymos --------------------------------------------------------------
   Kaip įsiūta gaminio etiketė: iškilios didžiosios, be apvalinimo.        */

.t-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  background: var(--t-ink);
  color: #fff;
  font-family: var(--t-font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1;
}

/* Žymoje tekstas baltas ir smulkus (10 px) — fonas privalo būti tamsintas. */
.t-badge--new     { background: var(--t-signal-dark); }
.t-badge--top     { background: var(--t-ink); }
.t-badge--tvaru   { background: var(--t-ok); }
.t-badge--etikete { background: var(--t-navy); }

/* --- likučio indikatorius ------------------------------------------------ */

.t-stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-fs-xs);
  font-variant-numeric: tabular-nums;
}

.t-stock::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  background: currentColor;
}

.t-stock--in  { color: var(--t-ok); }
.t-stock--low { color: var(--t-warn); }
.t-stock--out { color: var(--t-bad); }

/* --- produkto kortelė ----------------------------------------------------
   Be išorinio rėmelio — kortelės skiriamos tarpais ir plona linija po
   nuotrauka, kaip katalogo lape. Rėmelis atsiranda tik ties hover.        */

.t-card {
  display: flex;
  flex-direction: column;
  background: var(--t-surface);
  border: 1px solid var(--t-line);
  transition: border-color var(--t-fast) var(--t-ease),
              box-shadow var(--t-fast) var(--t-ease);
}

.t-card:hover { border-color: var(--t-ink); box-shadow: var(--t-shadow-1); }

/* Fonas NE baltas, o popierinis.

   Tiekėjo nuotraukos fotografuotos ant balto, o dalis gaminių pati yra
   balta: prijuostės, marškinėliai, chalatai. Ant balto kortelės fono toks
   gaminys pradingsta — atrodo, kad nuotraukos nėra, nors ji yra ir
   veikia. Vos pastebimas pilkšvas fonas tą išsprendžia ir nieko negadina
   spalvotiems gaminiams. */
.t-card__shot {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  background: var(--t-paper);
  overflow: hidden;
}

.t-card__shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--t-s3);
  transition: opacity var(--t-base) var(--t-ease);
}

.t-card__back { opacity: 0; }
.t-card:hover .t-card__back { opacity: 1; }

/* Pirmą nuotrauką slepiam TIK tada, kai yra antra.

   Anksčiau taisyklė galiojo visoms kortelėms: užvedus pelę ant prekės su
   viena nuotrauka ji pradingdavo, o pakeisti ją nebūdavo kuo — likdavo
   baltas plotas. Atrodė kaip neužsikrovusi nuotrauka, nors iš tikrųjų ji
   tiesiog buvo paslėpta. */
.t-card--dual:hover .t-card__front { opacity: 0; }

.t-card__badges {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: var(--t-z-base);
}

/* Dydžių eilutė virš apatinio krašto — matoma tik užvedus. */
.t-card__sizes {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: var(--t-s2) var(--t-s3);
  background: rgba(255, 255, 255, .94);
  border-top: 1px solid var(--t-line);
  opacity: 0;
  transform: translateY(100%);
  transition: opacity var(--t-base) var(--t-ease), transform var(--t-base) var(--t-ease);
}

.t-card:hover .t-card__sizes,
.t-card:focus-within .t-card__sizes { opacity: 1; transform: none; }

.t-card__size {
  font-family: var(--t-font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--t-ink-soft);
}

.t-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--t-s3) var(--t-s4) var(--t-s4);
  border-top: 1px solid var(--t-line);
  flex: 1;
}

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

.t-card__name {
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: var(--t-lh-snug);
  letter-spacing: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.t-card__price {
  font-family: var(--t-font-ui);
  font-size: 1.0625rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-top: auto;
  padding-top: var(--t-s2);
}

.t-card__hint { font-size: var(--t-fs-xs); color: var(--t-ink-soft); font-variant-numeric: tabular-nums; }

/* spalvų swatch'ai — kvadratiniai, kaip dažų pavyzdžiai */
.t-swatches { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }

.t-swatch {
  width: 16px;
  height: 16px;
  box-shadow: inset 0 0 0 1px rgba(20, 23, 26, .16);
  background-size: cover;
  background-position: center;
}

/* Spalva, atspėta iš pavadinimo (tiekėjas paveiksliuko nedavė). Rėmelis
   ryškesnis, nes balta ar kreminė ant šviesaus fono kitaip pradingsta. */
.t-swatch--flat { box-shadow: inset 0 0 0 1px rgba(20, 23, 26, .35); }

.t-swatches__more { font-size: var(--t-fs-tag); color: var(--t-ink-soft); }

/* --- produktų tinklelis --------------------------------------------------
   Per visą plotį, todėl stulpelių daugiau nei įprastai.                    */

.t-products {
  display: grid;
  gap: var(--t-s4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 640px)  { .t-products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 940px)  { .t-products { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1240px) { .t-products { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1560px) { .t-products { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* Pagrindiniame puslapyje stulpelių ne daugiau kaip keturi: ten rodomas
   fiksuotas kiekis (16), tad platesnis tinklelis paliktų nepilną paskutinę
   eilutę. Kataloge to nereikia — ten prekių sąrašas ilgas. */
@media (min-width: 1240px) {
  .t-products--quad { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- kategorijų juosta ---------------------------------------------------
   Horizontali slenkama eilė su gaminio nuotrauka ant balto.               */

.t-cats {
  display: grid;
  gap: var(--t-s4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 700px)  { .t-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1240px) { .t-cats { grid-template-columns: repeat(8, minmax(0, 1fr)); } }

.t-cat {
  display: flex;
  flex-direction: column;
  background: var(--t-surface);
  border: 1px solid var(--t-line);
  transition: border-color var(--t-fast) var(--t-ease);
}

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

/* Fonas — grynai baltas. Rastro taškų po nuotrauka nededam: tiekėjo
   nuotraukos būna ir su permatomu fonu, ir tada taškai prasišviečia
   per patį drabužį. */
.t-cat__media {
  aspect-ratio: 1 / 1;
  background: #fff;
  display: grid;
  place-items: center;
  padding: var(--t-s3);
}

.t-cat__media img { max-height: 100%; width: auto; object-fit: contain; }

.t-cat__body {
  padding: var(--t-s3);
  border-top: 1px solid var(--t-line);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.t-cat__name {
  font-family: var(--t-font-ui);
  font-weight: 700;
  font-size: var(--t-fs-sm);
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: var(--t-lh-snug);
}

.t-cat__count { font-size: var(--t-fs-xs); color: var(--t-ink-soft); font-variant-numeric: tabular-nums; }

/* --- prekių ženklų siena --------------------------------------------------
   Tanki tinklelio siena be tarpų — kaip gamintojų sąrašas kataloge.        */

.t-brands {
  display: grid;
  gap: 1px;
  background: var(--t-line);
  border: 1px solid var(--t-line);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 600px)  { .t-brands { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .t-brands { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 1500px) { .t-brands { grid-template-columns: repeat(8, minmax(0, 1fr)); } }

.t-brand {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--t-s3);
  min-height: 92px;
  padding: var(--t-s4);
  background: var(--t-surface);
  transition: background-color var(--t-fast) var(--t-ease), color var(--t-fast) var(--t-ease);
}

.t-brand:hover { background: var(--t-ink); color: #fff; }
.t-brand:hover .t-brand__count { color: rgba(255, 255, 255, .68); }

.t-brand__name {
  font-family: var(--t-font-ui);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: var(--t-ls-tight);
  line-height: var(--t-lh-snug);
}

.t-brand__count { font-size: var(--t-fs-xs); color: var(--t-ink-soft); font-variant-numeric: tabular-nums; }

/* --- kiekio nuolaidų lentelė --------------------------------------------- */

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

.t-qty th,
.t-qty td { text-align: left; padding: var(--t-s3); border-bottom: 1px solid var(--t-line); }

.t-qty th {
  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-qty td:not(:first-child) { text-align: right; font-weight: 600; }
.t-qty tr.is-active td { background: color-mix(in srgb, var(--t-signal) 9%, transparent); }
.t-qty tr.is-active td:first-child { box-shadow: inset 2px 0 0 var(--t-signal); }

/* --- žingsniai ------------------------------------------------------------- */

.t-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--t-line);
  border: 1px solid var(--t-line);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  counter-reset: none;
}

.t-step-card {
  background: var(--t-surface);
  padding: var(--t-s5);
  display: flex;
  flex-direction: column;
  gap: var(--t-s3);
}

.t-step-card__num {
  font-family: var(--t-font-mono);
  font-size: var(--t-fs-xs);
  color: var(--t-signal);
}

.t-step-card__title { font-size: var(--t-fs-h3); font-weight: 700; }
.t-step-card__text  { font-size: var(--t-fs-sm); color: var(--t-ink-soft); }

/* --- segmentai -------------------------------------------------------------- */

.t-segments {
  display: grid;
  gap: var(--t-s5);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.t-segment {
  background: var(--t-surface);
  border: 1px solid var(--t-line);
  padding: var(--t-s5);
  display: flex;
  flex-direction: column;
  gap: var(--t-s3);
}

.t-segment__title { font-size: var(--t-fs-h3); font-weight: 700; }
.t-segment__text  { font-size: var(--t-fs-sm); color: var(--t-ink-soft); flex: 1; }

/* --- DUK -------------------------------------------------------------------- */

/* Klausimai ir šoninis blokas su nuotrauka — kitaip plačiame ekrane
   dešinėje likdavo didelis tuščias plotas. */
.t-faq-layout {
  display: grid;
  gap: var(--t-s6);
}

@media (min-width: 1000px) {
  .t-faq-layout { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: var(--t-s8); }
}

.t-faq-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--t-s4);
  align-self: start;
  position: sticky;
  top: calc(var(--t-header-h) + var(--t-s5));
}

.t-faq-aside__media {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--t-line);
}

.t-faq-aside__media img { width: 100%; height: 100%; object-fit: cover; }

.t-faq-aside__title { font-size: var(--t-fs-h3); font-weight: 700; }
.t-faq-aside__text  { color: var(--t-ink-soft); font-size: var(--t-fs-sm); }

.t-faq-aside__facts {
  margin: 0;
  width: 100%;
  border-top: 1px solid var(--t-line);
}

.t-faq-aside__facts > 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-faq-aside__facts dt { color: var(--t-ink-soft); }
.t-faq-aside__facts dd { margin: 0; font-family: var(--t-font-ui); font-weight: 600; }

@media (max-width: 999px) {
  .t-faq-aside { position: static; }
}

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

.t-faq__item { border-bottom: 1px solid var(--t-line); }

.t-faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--t-s4);
  padding-block: var(--t-s4);
  cursor: pointer;
  list-style: none;
  font-family: var(--t-font-ui);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: var(--t-lh-snug);
}

.t-faq__q::-webkit-details-marker { display: none; }

/* Pliusas, virstantis minusu — be jokių pasukimų. */
.t-faq__sign {
  position: relative;
  width: 14px;
  height: 14px;
  flex: none;
  margin-top: 5px;
}

.t-faq__sign::before,
.t-faq__sign::after {
  content: "";
  position: absolute;
  background: var(--t-signal);
  transition: opacity var(--t-fast) var(--t-ease);
}

.t-faq__sign::before { inset-inline: 0; top: 6px; height: 2px; }
.t-faq__sign::after  { inset-block: 0; left: 6px; width: 2px; }

.t-faq__item[open] .t-faq__sign::after { opacity: 0; }

.t-faq__a {
  padding-bottom: var(--t-s5);
  color: var(--t-ink-soft);
  font-size: var(--t-fs-sm);
  max-width: 76ch;
}

/* --- paruošimo pranešimas (matomas tik administratoriui) ------------------- */

.t-setup {
  border: 1px dashed var(--t-line-strong);
  background: var(--t-surface);
  padding: var(--t-s6);
  max-width: 62ch;
}

.t-setup p { color: var(--t-ink-soft); margin-block: var(--t-s3) var(--t-s5); }

/* --- SEO tekstas ---------------------------------------------------------- */

.t-seo {
  background: var(--t-paper);
  border-top: 1px solid var(--t-line);
  padding-block: var(--t-s7);
}

/* Ilgas kategorijos tekstas dviem stulpeliais: 1 000+ žodžių per visą
   ekrano plotį vienoje eilutėje būtų neįskaitomi. */
.t-seo__body {
  columns: 2;
  column-gap: var(--t-s9);
  color: var(--t-ink-soft);
  font-size: var(--t-fs-sm);
  line-height: var(--t-lh-body);
}

.t-seo__body > * + * { margin-top: var(--t-s4); }

.t-seo__body h2 {
  color: var(--t-ink);
  font-size: var(--t-fs-h2);
  text-transform: uppercase;
  break-after: avoid;
  break-inside: avoid;
}

.t-seo__body h3 {
  color: var(--t-ink);
  font-size: var(--t-fs-h3);
  margin-top: var(--t-s6);
  break-after: avoid;
  break-inside: avoid;
}

.t-seo__body ul {
  padding-inline-start: var(--t-s5);
  break-inside: avoid;
}

.t-seo__body li + li { margin-top: var(--t-s2); }
.t-seo__body strong { color: var(--t-ink); }
.t-seo__body p { break-inside: avoid-column; }

.t-seo__faq {
  margin-top: var(--t-s8);
  padding-top: var(--t-s6);
  border-top: 1px solid var(--t-line);
}

.t-seo__faq > h2 {
  font-size: var(--t-fs-h2);
  text-transform: uppercase;
  margin-bottom: var(--t-s5);
}

/* DUK dviem stulpeliais — vienoje kolonoje jis palikdavo pusę ekrano tuščią. */
.t-seo__faq .t-faq {
  display: grid;
  gap: 0 var(--t-s8);
  border-top: 0;
}

@media (min-width: 1000px) {
  .t-seo__faq .t-faq { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.t-seo__faq .t-faq__item { border-top: 1px solid var(--t-line); border-bottom: 0; }

/* --- kategorijos faktų kortelės --------------------------------------------- */

.t-facts {
  display: grid;
  gap: 1px;
  margin: 0 0 var(--t-s7);
  background: var(--t-line);
  border: 1px solid var(--t-line);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 800px) { .t-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

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

.t-fact-card 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-fact-card dd {
  margin: 0;
  font-family: var(--t-font-ui);
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: var(--t-ls-tight);
  color: var(--t-ink);
  line-height: 1;
}

@media (max-width: 900px) { .t-seo__body { columns: 1; } }

/* --- tinklaraštis --------------------------------------------------------- */

.t-posts {
  display: grid;
  gap: var(--t-s5);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.t-post-card {
  display: flex;
  flex-direction: column;
  background: var(--t-surface);
  border: 1px solid var(--t-line);
  transition: border-color var(--t-fast) var(--t-ease);
}

.t-post-card:hover { border-color: var(--t-ink); }
.t-post-card__media img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.t-post-card__body { display: flex; flex-direction: column; gap: var(--t-s3); padding: var(--t-s5); }
.t-post-card__title { font-size: var(--t-fs-h3); font-weight: 700; }
.t-post-card__title a:hover { color: var(--t-signal); }
.t-post-card__excerpt { color: var(--t-ink-soft); font-size: var(--t-fs-sm); }

/* Plokštelė vietoj nuotraukos. Straipsniai rašomi be paveikslėlių, o vien
   tekstinis tinklelis atrodo kaip nuorodų sąrašas — todėl kortelės viršų
   užpildo rastro fonas su kategorijos pavadinimu. Tas pats raštas kaip
   hero fone, todėl atrodo kaip dizaino sprendimas, o ne kaip trūkumas. */
.t-post-card__plate {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  padding: var(--t-s4);
  border-bottom: 1px solid var(--t-line);
  background-color: var(--t-paper);
  background-image: radial-gradient(var(--t-line) 1px, transparent 1px);
  background-size: 8px 8px;
}

.t-post-card__plateword {
  font-family: var(--t-font-ui);
  font-size: var(--t-fs-lead);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--t-ls-display);
  text-align: center;
  line-height: var(--t-lh-snug);
  color: var(--t-ink);
}

.t-post-card:hover .t-post-card__plateword { color: var(--t-signal); }

/* --- įrašo turinys -------------------------------------------------------- */

.t-single { max-width: 72ch; margin-inline: auto; }
.t-single__head { margin-bottom: var(--t-s6); }
.t-single__head h1 { margin-top: var(--t-s3); }
.t-single__meta { color: var(--t-ink-soft); font-size: var(--t-fs-sm); margin-top: var(--t-s3); }
.t-single__media { margin-bottom: var(--t-s6); }

.t-prose { max-width: 72ch; }
.t-prose > * + * { margin-top: var(--t-s4); }
.t-prose h2 { margin-top: var(--t-s7); font-size: var(--t-fs-h2); text-transform: uppercase; }
.t-prose h3 { margin-top: var(--t-s6); }
.t-prose ul, .t-prose ol { padding-inline-start: var(--t-s5); }
.t-prose li + li { margin-top: var(--t-s2); }
.t-prose a { color: var(--t-signal); text-decoration: underline; text-underline-offset: 2px; }

.t-prose table { width: 100%; border-collapse: collapse; font-size: var(--t-fs-sm); }
.t-prose th, .t-prose td { padding: var(--t-s3); border-bottom: 1px solid var(--t-line); text-align: left; }
.t-prose th { font-family: var(--t-font-ui); font-weight: 700; }
.t-prose table, .t-prose pre { display: block; overflow-x: auto; max-width: 100%; }

.t-prose blockquote {
  border-inline-start: 2px solid var(--t-signal);
  padding-inline-start: var(--t-s4);
  color: var(--t-ink-soft);
}

/* --- krepšelio stalčius ----------------------------------------------------- */

.t-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--t-z-overlay);
  background: rgba(20, 23, 26, .45);
  opacity: 0;
  transition: opacity var(--t-base) var(--t-ease);
}

.t-overlay.is-open { opacity: 1; }
.t-overlay[hidden] { display: none; }

.t-drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: var(--t-z-drawer);
  width: min(420px, 100vw);
  display: flex;
  flex-direction: column;
  background: var(--t-surface);
  border-inline-start: 1px solid var(--t-line);
  box-shadow: var(--t-shadow-3);
  transform: translateX(101%);
  transition: transform 260ms var(--t-ease-out);
  visibility: hidden;
}

.t-drawer.is-open { transform: none; visibility: visible; }

.t-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--t-s3);
  padding: var(--t-s4) var(--t-s5);
  border-bottom: 1px solid var(--t-line);
}

.t-drawer__title {
  font-size: var(--t-fs-h3);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.t-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--t-s5);
}

/* WooCommerce mini cart perrašymas */
/* Mini krepšelio kortelė: nuotrauka | tekstas | kaina su šalinimu.
   Kiekvienas elementas savo langelyje — todėl ir savas šablonas. */
.t-mini {
  list-style: none;
  margin: 0;
  padding: 0;
}

.t-mini__item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: var(--t-s3);
  align-items: start;
  padding-block: var(--t-s4);
  border-bottom: 1px solid var(--t-line);
  font-size: var(--t-fs-sm);
}

.t-mini__item:first-child { padding-top: 0; }

.t-mini__media {
  display: block;
  width: 56px;
  border: 1px solid var(--t-line);
  background: #fff;
}

.t-mini__media img {
  display: block;
  width: 100%;
  height: 70px;
  object-fit: contain;
}

.t-mini__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.t-mini__name {
  font-family: var(--t-font-ui);
  line-height: var(--t-lh-snug);
}

.t-mini__name a { color: var(--t-ink); text-decoration: none; }
.t-mini__name a:hover { color: var(--t-signal); }

.t-mini__meta,
.t-mini__qty {
  color: var(--t-ink-soft);
  font-size: var(--t-fs-xs);
  font-variant-numeric: tabular-nums;
}

/* Atributų sąrašas gali ateiti su savo žymėmis — sulyginam su tekstu. */
.t-mini__meta p,
.t-mini__meta dl { margin: 0; }

.t-mini__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--t-s2);
  text-align: right;
}

.t-mini__line {
  font-family: var(--t-font-ui);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.t-mini__line del { display: none; }

/* Kvadratinis mygtukas su centruotu kryžiuku. WooCommerce `a.remove` savo
   apskritimą piešia su `!important`, todėl tos klasės šablone nenaudojam. */
.t-drawer .t-mini__remove,
.t-mini__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--t-line);
  border-radius: 0;
  background: transparent;
  color: var(--t-ink-soft);
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
}

.t-drawer .t-mini__remove:hover,
.t-mini__remove:hover {
  border-color: var(--t-bad);
  background: transparent;
  color: var(--t-bad);
}

/* 24×24 px pirštu nepataikoma — telefone išplečiam iki 44 px (WCAG 2.5.8).
   Desktope paliekam kompaktišką, kad krepšelio eilutė netaptų per aukšta. */
@media (max-width: 999px) {
  .t-drawer .t-mini__remove,
  .t-mini__remove {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
}

.t-mini__save {
  color: var(--t-ok);
  font-size: var(--t-fs-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Bendras sutaupymas virš sumos — svarbiausias B2B argumentas. */
.t-mini__savings {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--t-s3);
  margin: var(--t-s4) 0 0;
  padding: var(--t-s3);
  background: var(--t-paper);
  border-inline-start: 3px solid var(--t-ok);
  font-size: var(--t-fs-sm);
}

.t-mini__savings strong {
  font-family: var(--t-font-ui);
  color: var(--t-ok);
  font-variant-numeric: tabular-nums;
}

.t-mini__savings em { font-style: normal; font-weight: 400; }

.t-drawer .woocommerce-mini-cart__total {
  display: flex;
  justify-content: space-between;
  gap: var(--t-s3);
  padding-block: var(--t-s4);
  font-family: var(--t-font-ui);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.t-drawer .woocommerce-mini-cart__buttons {
  display: flex;
  flex-direction: column;
  gap: var(--t-s2);
}

.t-drawer .woocommerce-mini-cart__buttons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--t-control-h);
  border-radius: var(--t-radius);
  font-family: var(--t-font-ui);
  font-size: var(--t-fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  border: 1px solid var(--t-line-strong);
  color: var(--t-ink);
}

/* Baltas tekstas — todėl tamsintas spaudos atspalvis, o ne ryškus #FF5A1F. */
.t-drawer .woocommerce-mini-cart__buttons .checkout {
  background: var(--t-signal-dark);
  border-color: var(--t-signal-dark);
  color: #fff;
}

.t-drawer .woocommerce-mini-cart__buttons .checkout:hover {
  background: var(--t-signal-deep);
  border-color: var(--t-signal-deep);
  color: #fff;
}

/* WooCommerce „nėra prekių" žinutės nerodom — vietoj jos savas blokas su
   pasiūlymais ir nuoroda į katalogą.
   (Anksčiau ši eilutė buvo likusi UŽ komentaro ribų — CSS parseris dėl to
   praryja kitą taisyklę, todėl tuščio krepšelio žinutė vis tiek matėsi.) */
.t-drawer .woocommerce-mini-cart__empty-message { display: none; }

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

.t-minicart-empty__text { color: var(--t-ink-soft); font-size: var(--t-fs-sm); }

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

.t-suggest {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--t-line);
  background: var(--t-surface);
  transition: border-color var(--t-fast) var(--t-ease);
}

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

.t-suggest__media {
  display: block;
  aspect-ratio: 4 / 5;
  background: #fff;
  border-bottom: 1px solid var(--t-line);
}

.t-suggest__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--t-s2);
}

.t-suggest__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--t-s2) var(--t-s3) var(--t-s3);
}

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

.t-suggest__name {
  font-size: var(--t-fs-xs);
  line-height: var(--t-lh-snug);
  color: var(--t-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.t-suggest__price {
  font-family: var(--t-font-ui);
  font-size: var(--t-fs-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

/* --- pridėjimo pranešimas ---------------------------------------------------- */

.t-modal {
  position: fixed;
  inset: 0;
  z-index: var(--t-z-modal);
  display: grid;
  place-items: center;
  padding: var(--t-s4);
}

.t-modal[hidden] { display: none; }

.t-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 23, 26, .5);
  animation: t-fade-in var(--t-fast) var(--t-ease);
}

.t-modal__box {
  position: relative;
  width: min(480px, 100%);
  background: var(--t-surface);
  border: 1px solid var(--t-line);
  box-shadow: var(--t-shadow-3);
  padding: var(--t-s5) var(--t-s6) var(--t-s6);
  animation: t-modal-in 220ms var(--t-ease-out);
}

/* Antraštė su varnele kairėje — centruota kompozicija atrodė tuščiai. */
.t-modal__head {
  display: flex;
  align-items: center;
  gap: var(--t-s3);
  padding-inline-end: 40px;
  padding-bottom: var(--t-s4);
  border-bottom: 1px solid var(--t-line);
}

/* Pridėtas gaminys — su nuotrauka, kad matytųsi, kas būtent atsidūrė
   krepšelyje. Renkant kelis modelius iš eilės tai svarbu. */
.t-modal__product {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: var(--t-s4);
  align-items: center;
  padding-block: var(--t-s5);
}

.t-modal__product[hidden] { display: none; }

.t-modal__media {
  display: block;
  border: 1px solid var(--t-line);
  background: #fff;
}

.t-modal__media img { width: 100%; height: 100px; object-fit: contain; padding: 4px; }

/* Be nuotraukos tekstas užima visą plotį, o ne palieka tuščią stulpelį. */
.t-modal__media[hidden] { display: none; }
.t-modal__product:has(.t-modal__media[hidden]) { grid-template-columns: minmax(0, 1fr); }

.t-modal__info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.t-modal__info strong {
  font-family: var(--t-font-ui);
  font-size: var(--t-fs-sm);
  line-height: var(--t-lh-snug);
}

@keyframes t-modal-in {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* Selektorius su tėvu tyčia: `.t-iconbtn` iš layout.css kraunasi vėliau ir
   su vienoda specifika nustelbtų `position: absolute` savo `relative`. */
.t-modal .t-modal__close {
  position: absolute;
  top: 8px;
  right: 8px;
  left: auto;
  z-index: 2;
}

.t-modal__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: none;
  background: var(--t-ok);
  color: #fff;
}

.t-modal__title {
  font-size: var(--t-fs-h3);
  text-transform: uppercase;
  letter-spacing: .02em;
}

.t-modal__text {
  color: var(--t-ink-soft);
  font-size: var(--t-fs-xs);
}

.t-modal__figures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: var(--t-s5) 0 0;
  background: var(--t-line);
  border: 1px solid var(--t-line);
}

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

.t-modal__figures 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-modal__figures dd {
  margin: 4px 0 0;
  font-family: var(--t-font-ui);
  font-size: 1.0625rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 420px) {
  .t-modal__figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Abu veiksmai vienodo svorio: B2B pirkėjas dažniausiai renka kelis
   modelius, todėl „tęsti“ nėra antraeilis mygtukas. */
.t-modal__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--t-s3);
  margin-top: var(--t-s5);
}

.t-modal__checkout {
  display: inline-block;
  margin-top: var(--t-s4);
  font-size: var(--t-fs-xs);
}

@media (max-width: 480px) {
  .t-modal__actions { grid-template-columns: 1fr; }
}

/* --- gyvoji paieška --------------------------------------------------------- */

.t-header__searchwrap { position: relative; flex: 1; max-width: 560px; display: flex; }

.t-live {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 6px);
  z-index: var(--t-z-dropdown);
  background: var(--t-surface);
  border: 1px solid var(--t-line);
  box-shadow: var(--t-shadow-2);
  padding: var(--t-s3);
  max-height: 70vh;
  overflow-y: auto;
}

.t-live[hidden] { display: none; }

/* Paieškos skydelyje rezultatai stovi sraute po forma, o ne kabo virš turinio:
   skydelis pats nustumia puslapį žemyn, todėl absoliutus pozicionavimas jį
   uždengtų ir telefone nebūtų aišku, kur baigiasi paieška. */
.t-live--panel {
  position: static;
  margin-top: var(--t-s3);
  box-shadow: none;
  max-height: 60vh;
}

.t-live__list { list-style: none; margin: 0 0 var(--t-s3); padding: 0; }

.t-live__item {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: var(--t-s3);
  align-items: center;
  padding: var(--t-s2);
  transition: background-color var(--t-fast) var(--t-ease);
}

.t-live__item:hover { background: var(--t-paper); }

.t-live__media {
  display: block;
  border: 1px solid var(--t-line);
  background: #fff;
}

.t-live__media img { width: 100%; height: 75px; object-fit: contain; padding: 3px; }

.t-live__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

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

.t-live__name {
  font-size: var(--t-fs-sm);
  line-height: var(--t-lh-snug);
  color: var(--t-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.t-live__price {
  font-family: var(--t-font-ui);
  font-size: var(--t-fs-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* „be PVM" — tylesnis už pačią kainą, bet skaitomas (5,9:1). */
.t-live__vat {
  color: var(--t-ink-soft);
  font-size: var(--t-fs-tag);
  font-weight: 400;
  white-space: nowrap;
}

.t-live__empty { color: var(--t-ink-soft); font-size: var(--t-fs-sm); padding: var(--t-s3); }
.t-live__all { margin-top: var(--t-s2); }

/* --- paieškos skydelis ------------------------------------------------------ */

/* Skydelis yra header'io viduje, tarp viršutinės eilutės ir navigacijos —
   atsidaręs jis nustumia meniu žemyn, o ne dengia jį. */
.t-searchpanel {
  background: var(--t-paper);
  border-bottom: 1px solid var(--t-line);
  display: none;
}

/* Nuo 901 px paieška visada matoma header'yje, todėl skydelio nereikia
   visai — kitaip abu laukai egzistuotų vienu metu. */
@media (min-width: 901px) {
  .t-searchpanel { display: none !important; }
}

.t-searchpanel.is-open { display: block; animation: t-slide-down var(--t-base) var(--t-ease-out); }

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

.t-searchpanel .t-search { max-width: 720px; }

.t-searchpanel__hints {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--t-s3);
  margin-top: var(--t-s4);
  font-size: var(--t-fs-sm);
}

.t-searchpanel__hints a { color: var(--t-navy); text-decoration: underline; text-underline-offset: 2px; }
.t-searchpanel__hints a:hover { color: var(--t-signal); }

/* --- paieškos forma -------------------------------------------------------- */

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

/* Paieškos rezultatų puslapyje forma yra atskiras blokas po antrašte, o ne
   header'io juosta — reikia savo tarpo ir ribojamo pločio. */
.t-search--results { max-width: 560px; margin-bottom: var(--t-s6); }

.t-search input[type="search"] {
  flex: 1;
  height: var(--t-control-h);
  padding-inline: var(--t-s4);
  border: 1px solid var(--t-line-strong);
  border-radius: var(--t-radius);
  background: var(--t-surface);
  color: var(--t-ink);
  font: inherit;
  font-size: var(--t-fs-sm);
}

.t-search input[type="search"]:focus { border-color: var(--t-ink); }


/* --- paginacija ------------------------------------------------------------
   WooCommerce naudoja `woocommerce-pagination`, tinklaraštis ir paieška —
   `t-pagination`. Stiliai vienodi abiem, ir gyvena components.css, nes
   catalog.css kraunamas tik parduotuvės puslapiuose. */

.woocommerce-pagination,
.t-pagination {
  margin-top: var(--t-s7);
  padding-top: var(--t-s5);
  border-top: 1px solid var(--t-line);
}

.woocommerce-pagination ul,
.woocommerce-pagination .page-numbers,
.t-pagination ul,
.t-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--t-s2);
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
}

.woocommerce-pagination li,
.t-pagination li { list-style: none; margin: 0; }

.woocommerce-pagination a.page-numbers,
.woocommerce-pagination span.page-numbers,
.t-pagination a.page-numbers,
.t-pagination span.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--t-control-h);
  height: var(--t-control-h);
  padding-inline: var(--t-s3);
  border: 1px solid var(--t-line);
  border-radius: var(--t-radius);
  background: var(--t-surface);
  color: var(--t-ink);
  font-family: var(--t-font-ui);
  font-size: var(--t-fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transition: border-color var(--t-fast) var(--t-ease), color var(--t-fast) var(--t-ease);
}

.woocommerce-pagination a.page-numbers:hover,
.t-pagination a.page-numbers:hover {
  border-color: var(--t-ink);
  color: var(--t-ink);
}

.woocommerce-pagination .page-numbers.current,
.t-pagination .page-numbers.current {
  background: var(--t-ink);
  border-color: var(--t-ink);
  color: #fff;
}

.woocommerce-pagination .page-numbers.dots,
.t-pagination .page-numbers.dots {
  border-color: transparent;
  background: transparent;
  color: var(--t-ink-soft);
  min-width: auto;
  padding-inline: var(--t-s2);
}

.woocommerce-pagination .prev,
.woocommerce-pagination .next,
.t-pagination .prev,
.t-pagination .next { font-weight: 400; }

/* --- krovimosi būsena -----------------------------------------------------
   Bendra visiems asinchroniniams veiksmams (gyvoji paieška, matricos
   pridėjimas). Be jos pirkėjas nemato, ar paspaudimas apskritai suveikė, ir
   spaudžia dar kartą. `aria-busy` tą patį pasako ekrano skaitytuvui. */

.t-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: none;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: t-spin 640ms linear infinite;
}

@keyframes t-spin { to { transform: rotate(360deg); } }

/* Judesio nemėgstantiems sukimąsi keičia pulsavimas — informacija lieka. */
@media (prefers-reduced-motion: reduce) {
  .t-spinner { animation: t-pulse 1.2s ease-in-out infinite; }
  @keyframes t-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
}

/* Mygtukas krovimosi metu: tekstas lieka vietoje, kad plotis nešokinėtų. */
.t-btn.is-loading { cursor: progress; }
.t-btn.is-loading > .t-spinner { margin-inline-end: var(--t-s2); }

/* Gyvosios paieškos krovimosi eilutė iškrentančiame sąraše. */
.t-live__loading {
  display: flex;
  align-items: center;
  gap: var(--t-s2);
  padding: var(--t-s3);
  color: var(--t-ink-soft);
  font-size: var(--t-fs-sm);
}

/* Klaida gyvojoje paieškoje — anksčiau ji buvo nutylima visiškai. */
.t-live__error {
  padding: var(--t-s3);
  color: var(--t-bad);
  font-size: var(--t-fs-sm);
}

/* Ekrano skaitytuvui skirtas rezultatų skaičius: matomas tik jam. */
.t-live__status {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* --- bendri smulkūs elementai ------------------------------------------------
 * Šitos klasės naudojamos 404, tinklaraštyje, paieškos rezultatuose ir
 * įrašo kortelėje — puslapiuose, kurie NEKRAUNA nei `catalog.css`, nei
 * `shop.css`. Iki šiol jos ten likdavo visai be stilių. */

.t-eyebrow {
  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-lead {
  font-size: var(--t-fs-lead);
  line-height: var(--t-lh-snug);
  color: var(--t-ink-soft);
  max-width: 62ch;
}

.t-section__head {
  margin-bottom: var(--t-s6);
  max-width: 68ch;
}

.t-section__head h1,
.t-section__head h2 {
  font-size: var(--t-fs-h2);
  text-transform: uppercase;
  letter-spacing: var(--t-ls-display);
}

.t-section__head p {
  margin-top: var(--t-s3);
  color: var(--t-ink-soft);
}

/* „Nieko neradome“ blokas. Buvo tik `catalog.css`, o bendra paieška
   eina per `index.php`, kur tas failas nekraunamas. */
.t-empty {
  padding: var(--t-s8) var(--t-s5);
  border: 1px solid var(--t-line);
  border-radius: var(--t-radius);
  background: var(--t-surface);
  text-align: center;
}

.t-empty p { color: var(--t-ink-soft); margin-block: var(--t-s3) var(--t-s5); }

/* --- akordeonas --------------------------------------------------------------
 * `details`, kad veiktų ir be JavaScript. Naudojamas krepšelio DUK ir
 * produkto puslapyje (aprašymas, nuolaidos, specifikacija) — todėl gyvena
 * čia, o ne `shop.css`, kuris produkto puslapyje nekraunamas.
 *
 * Gretimi blokai jungiasi į vieną sąrašą: `margin-bottom: -1px` uždeda
 * rėmelius vieną ant kito, kad tarp jų neliktų dvigubos linijos. */

.t-acc {
  border: 1px solid var(--t-line);
  background: var(--t-surface);
  margin-bottom: -1px;
  transition: border-color var(--t-fast) var(--t-ease);
}

.t-acc:hover { border-color: var(--t-line-strong); }

/* Atidarytas blokas iškyla virš kaimynų — kitaip jo rėmelį uždengia
   sekančio bloko viršutinė linija. */
.t-acc[open] {
  position: relative;
  z-index: 1;
  border-color: var(--t-line-strong);
}

.t-acc__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--t-s3);
  padding: var(--t-s4);
  cursor: pointer;
  font-family: var(--t-font-ui);
  font-size: var(--t-fs-sm);
  font-weight: 600;
  list-style: none;
  /* Antraštės tekstas neturi būti pažymimas dvigubu paspaudimu — blokas
     atidarinėjamas pele, ir atsitiktinis teksto pažymėjimas erzina. */
  user-select: none;
}

.t-acc__q::-webkit-details-marker { display: none; }

/* Ženklas piešiamas iš dviejų brūkšnių, o ne „+“/„–“ simboliais: šriftų
   plius ir minusas yra skirtingo pločio ir aukščio, todėl atidarant
   antraštė vizualiai krustelėdavo. */
.t-acc__q::after {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  background:
    linear-gradient(var(--t-signal), var(--t-signal)) center / 12px 2px no-repeat,
    linear-gradient(var(--t-signal), var(--t-signal)) center / 2px 12px no-repeat;
  transition: transform var(--t-base) var(--t-ease);
}

.t-acc[open] > .t-acc__q::after {
  background: linear-gradient(var(--t-signal), var(--t-signal)) center / 12px 2px no-repeat;
  transform: rotate(180deg);
}

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

.t-acc__a {
  padding: 0 var(--t-s4) var(--t-s4);
  color: var(--t-ink-soft);
  font-size: var(--t-fs-sm);
}

.t-acc__a > p:first-child { margin-top: 0; }
.t-acc__a p { line-height: var(--t-lh-base); }

@media (prefers-reduced-motion: reduce) {
  .t-acc__q::after { transition: none; }
}

/* --- straipsnių turinio blokai ------------------------------------------------
 * Naujienų skiltis be jokių akcentų virsta ilga pilka teksto juosta, kurios
 * niekas neskaito iki galo. Šie blokai leidžia straipsnyje išskirti tai, ką
 * skaitytojas ieško akimis: skaičius, įspėjimus, palyginimus, veiksmą.
 *
 * Klasės sąmoningai paprastos, kad jas būtų galima rašyti HTML redaktoriuje
 * be jokio bloko ar shortcode'o. */

/* Skaičių juosta. Trys–keturi rodikliai, kuriuos matai neskaitydamas. */
.t-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  margin-block: var(--t-s6);
  padding: 0;
  list-style: none;
  background: var(--t-line);
  border: 1px solid var(--t-line);
}

.t-prose .t-stats { max-width: none; padding-inline-start: 0; }

.t-stats > li {
  margin: 0;
  padding: var(--t-s4);
  background: var(--t-surface);
}

.t-stats b {
  display: block;
  font-family: var(--t-font-ui);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--t-ink);
}

.t-stats span {
  display: block;
  margin-top: var(--t-s2);
  font-size: var(--t-fs-xs);
  line-height: var(--t-lh-snug);
  color: var(--t-ink-soft);
}

/* Informacinė kortelė. `--warn` — kai klaida kainuoja pinigus,
   `--tip` — kai yra greitas būdas jos išvengti. */
.t-note {
  margin-block: var(--t-s6);
  padding: var(--t-s5);
  border: 1px solid var(--t-line);
  border-inline-start: 3px solid var(--t-ink);
  background: var(--t-surface);
}

.t-note > :first-child { margin-top: 0; }
.t-note > :last-child { margin-bottom: 0; }

.t-note__title {
  display: block;
  margin-bottom: var(--t-s2);
  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-note--tip { border-inline-start-color: var(--t-ok); }
.t-note--warn { border-inline-start-color: var(--t-signal); }
.t-note--warn .t-note__title { color: var(--t-signal); }

/* Lentelė, kuri telpa telefone: siaurame ekrane ji slenkama, o ne laužo
   puslapio. */
.t-tablewrap {
  margin-block: var(--t-s6);
  overflow-x: auto;
  border: 1px solid var(--t-line);
}

/* Lentelės stiliai aprašyti čia, o ne paveldimi iš `.t-prose`: puslapių
   šablonuose lentelės dažnai stovi savarankiškai, ir tada jos likdavo be
   jokių vidinių paraščių bei eilučių skirtukų — tekstas susiliedavo į
   vieną bloką. */
.t-tablewrap table {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  font-size: var(--t-fs-sm);
}

.t-tablewrap th,
.t-tablewrap td {
  padding: var(--t-s3) var(--t-s4);
  border-bottom: 1px solid var(--t-line);
  text-align: start;
  vertical-align: top;
  line-height: var(--t-lh-snug);
}

.t-tablewrap th {
  background: var(--t-paper);
  font-family: var(--t-font-ui);
  font-weight: 700;
  white-space: nowrap;
}

/* Eilučių antraštės (pirmas stulpelis) neturi būti nelaužomos — jos
   dažnai ilgesnės už antraštinę eilutę. */
.t-tablewrap tbody th { white-space: normal; background: transparent; }

.t-tablewrap tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--t-paper) 55%, transparent); }
.t-tablewrap tr:last-child td,
.t-tablewrap tr:last-child th { border-bottom: 0; }

/* Kvietimas veiksmui straipsnio viduryje arba gale. */
.t-postcta {
  margin-block: var(--t-s7);
  padding: var(--t-s6);
  background: var(--t-ink);
  color: #fff;
}

.t-postcta > :first-child { margin-top: 0; }

.t-postcta h3 {
  margin: 0 0 var(--t-s3);
  font-size: var(--t-fs-h3);
  text-transform: uppercase;
  letter-spacing: var(--t-ls-display);
  color: #fff;
}

.t-postcta p { color: rgba(255, 255, 255, .78); margin-bottom: var(--t-s4); }
.t-postcta a { color: #fff; }

.t-postcta .t-btn {
  border-color: #fff;
  background: #fff;
  color: var(--t-ink);
  text-decoration: none;
}

.t-postcta .t-btn:hover { background: var(--t-signal); border-color: var(--t-signal); color: #fff; }

/* Kontrolinis sąrašas su varnelėmis. */
.t-check { list-style: none; padding-inline-start: 0; }

.t-prose .t-check { padding-inline-start: 0; }

.t-check > li {
  position: relative;
  padding-inline-start: var(--t-s5);
}

.t-check > li::before {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  top: .45em;
  width: 6px;
  height: 11px;
  border: solid var(--t-signal);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* DUK straipsnio gale. Naudoja tą patį `.t-acc`, kaip ir visur kitur. */
.t-faq { margin-block: var(--t-s7); }
.t-faq > h2 { margin-bottom: var(--t-s4); }
.t-prose .t-faq .t-acc__a p { color: var(--t-ink-soft); }

/* --- paginacija: nugalim WooCommerce ----------------------------------------
 * WooCommerce savo stiliuose naudoja `.woocommerce nav.woocommerce-pagination ul`
 * (specifika 0,2,2), o mūsų taisyklės buvo `.woocommerce-pagination ul` (0,1,1).
 * Todėl kataloge matėsi ne mūsų, o jo variantas: sulipę langeliai su rėmeliu
 * aplink visą sąrašą ir violetinis aktyvus puslapis.
 *
 * Kartojam tą pačią išvaizdą, tik su selektoriumi, kuris tikrai laimi. */

.woocommerce nav.woocommerce-pagination ul,
nav.woocommerce-pagination ul.page-numbers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--t-s2);
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}

.woocommerce nav.woocommerce-pagination ul li,
nav.woocommerce-pagination ul.page-numbers li {
  margin: 0;
  padding: 0;
  border: 0;
  overflow: visible;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span,
nav.woocommerce-pagination ul.page-numbers li a,
nav.woocommerce-pagination ul.page-numbers li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--t-control-h);
  height: var(--t-control-h);
  padding: 0 var(--t-s3);
  border: 1px solid var(--t-line);
  border-radius: var(--t-radius);
  background: var(--t-surface);
  color: var(--t-ink);
  font-family: var(--t-font-ui);
  font-size: var(--t-fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-decoration: none;
  transition: border-color var(--t-fast) var(--t-ease), background var(--t-fast) var(--t-ease);
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li a:focus,
nav.woocommerce-pagination ul.page-numbers li a:hover {
  background: var(--t-paper);
  border-color: var(--t-ink);
  color: var(--t-ink);
}

.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a.current,
nav.woocommerce-pagination ul.page-numbers li .current {
  background: var(--t-ink);
  border-color: var(--t-ink);
  color: #fff;
}

/* Daugtaškis nėra mygtukas — be rėmelio ir be fono. */
.woocommerce nav.woocommerce-pagination ul li span.dots,
nav.woocommerce-pagination ul.page-numbers li .dots {
  border-color: transparent;
  background: transparent;
  color: var(--t-ink-soft);
}

/* Rodyklės „kitas / ankstesnis" — platesnės, kad būtų aiškiau paspaudžiamos. */
.woocommerce nav.woocommerce-pagination ul li a.next,
.woocommerce nav.woocommerce-pagination ul li a.prev,
nav.woocommerce-pagination ul.page-numbers li a.next,
nav.woocommerce-pagination ul.page-numbers li a.prev {
  padding-inline: var(--t-s4);
}

/* --- kontaktų forma ----------------------------------------------------------
 * Forma yra pardavimo pradžia, todėl ji turi atrodyti kaip parduotuvės
 * dalis, o ne kaip papildinio intarpas. Laukų aukštis toks pat kaip
 * mygtukų, rėmeliai — tie patys hairline. */

.t-contactform {
  margin-block: var(--t-s6);
  max-width: 760px;
}

.t-contactform__done {
  margin-bottom: var(--t-s5);
  padding: var(--t-s4) var(--t-s5);
  border: 1px solid var(--t-line);
  border-inline-start: 3px solid var(--t-ok);
  background: var(--t-surface);
}

.t-contactform__done p { margin: var(--t-s2) 0 0; color: var(--t-ink-soft); }

.t-contactform__form {
  padding: var(--t-s6);
  border: 1px solid var(--t-line);
  background: var(--t-surface);
}

/* Spąstai robotams. `display: none` dalis jų atpažįsta, todėl traukiam
   lauką iš srauto kitaip. */
.t-contactform__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.t-contactform__grid {
  display: grid;
  gap: var(--t-s4);
}

@media (min-width: 640px) {
  .t-contactform__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.t-field { margin: 0 0 var(--t-s4); }

.t-field label {
  display: block;
  margin-bottom: 6px;
  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-field label span { color: var(--t-signal); }

.t-field input[type="text"],
.t-field input[type="email"],
.t-field input[type="tel"],
.t-field textarea {
  display: block;
  width: 100%;
  min-height: var(--t-control-h);
  padding: var(--t-s3) var(--t-s4);
  border: 1px solid var(--t-line-strong);
  border-radius: var(--t-radius);
  background: var(--t-surface);
  color: var(--t-ink);
  font: inherit;
  font-size: var(--t-fs-sm);
  line-height: var(--t-lh-base);
}

.t-field textarea { resize: vertical; }

.t-field input:focus,
.t-field textarea:focus { border-color: var(--t-ink); }
.t-field input:focus:not(:focus-visible),
.t-field textarea:focus:not(:focus-visible) { outline: none; }

/* Sutikimo varnelė — etiketė čia yra sakinys, ne antraštė. */
.t-field--check label {
  display: flex;
  align-items: flex-start;
  gap: var(--t-s3);
  margin: 0;
  font-family: var(--t-font-body);
  font-size: var(--t-fs-xs);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  line-height: var(--t-lh-snug);
  color: var(--t-ink-soft);
}

.t-field--check input { flex: none; margin-top: 2px; }
.t-field--check a { color: var(--t-signal); text-decoration: underline; }

/* --- kontaktų puslapis -------------------------------------------------------
 * Du stulpeliai: kairėje — būdai susisiekti ir tai, ko reikia pasiūlymui,
 * dešinėje — pati forma. Toks išdėstymas atsako į klausimą „ką rašyti"
 * dar prieš žmogui pradedant rašyti, todėl užklausos ateina pilnesnės. */

.t-contact {
  display: grid;
  gap: var(--t-s6);
  margin-block: var(--t-s6);
  max-width: none;
}

@media (min-width: 900px) {
  /* Forma platesnė už kontaktus — ji čia yra pagrindinis veiksmas. */
  .t-contact { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: var(--t-s7); align-items: start; }
}

.t-contact__side {
  display: flex;
  flex-direction: column;
  gap: var(--t-s3);
}

.t-contact__card {
  padding: var(--t-s5);
  border: 1px solid var(--t-line);
  border-inline-start: 3px solid var(--t-ink);
  background: var(--t-surface);
}

.t-contact__card--muted { border-inline-start-color: var(--t-signal); }

.t-contact__label {
  display: block;
  margin-bottom: var(--t-s2);
  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-contact__value {
  display: block;
  font-family: var(--t-font-ui);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--t-ink);
  word-break: break-word;
}

.t-contact__value:hover { color: var(--t-signal); }

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

.t-contact__list {
  margin: 0;
  padding-inline-start: 0;
  list-style: none;
}

.t-contact__list li {
  position: relative;
  padding-inline-start: var(--t-s5);
  padding-block: 4px;
  font-size: var(--t-fs-sm);
}

.t-contact__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  top: .8em;
  width: 6px;
  height: 6px;
  background: var(--t-signal);
}

/* Formos blokas kontaktų tinklelyje neturi savo išorinių tarpų —
   juos jau duoda gardelė. */
.t-contact .t-contactform { margin: 0; max-width: none; }

/* Kontaktų puslapio antraštė ir įžanga — tokie patys tarpai kaip kituose
   puslapiuose, tik siauresnė teksto juosta. */
.t-page--contacts .t-page__intro { max-width: 68ch; margin-bottom: var(--t-s6); }
.t-page--contacts .t-page__intro p:last-child { margin-bottom: 0; }
.t-contact__main { min-width: 0; }

/* --- kainų puslapis ---------------------------------------------------------- */

.t-page--prices section { margin-block: var(--t-s8); }
.t-page--prices .t-page__intro { max-width: 68ch; }

/* Trys kainos dalys — numeruoti blokai, kaip žingsniai. */
.t-prices__parts {
  display: grid;
  gap: var(--t-s5);
}

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

.t-prices__part {
  padding: var(--t-s5);
  border: 1px solid var(--t-line);
  border-top: 3px solid var(--t-ink);
  background: var(--t-surface);
}

.t-prices__num {
  display: block;
  font-family: var(--t-font-ui);
  font-size: var(--t-fs-xs);
  font-weight: 700;
  letter-spacing: var(--t-ls-label);
  color: var(--t-signal);
}

.t-prices__part h2 {
  margin: var(--t-s2) 0 var(--t-s3);
  font-size: var(--t-fs-h3);
  text-transform: uppercase;
  letter-spacing: var(--t-ls-display);
}

.t-prices__part p { margin: 0; font-size: var(--t-fs-sm); color: var(--t-ink-soft); }

/* Skaičiuoklė — pagrindinis puslapio elementas, todėl tamsi. */
.t-calc {
  border: 1px solid var(--t-line);
  background: var(--t-surface);
}

.t-calc__head { padding: var(--t-s6) var(--t-s6) 0; }
.t-calc__head h2 { margin: var(--t-s2) 0 var(--t-s3); font-size: var(--t-fs-h2); text-transform: uppercase; }
.t-calc__head p { margin: 0; max-width: 60ch; color: var(--t-ink-soft); font-size: var(--t-fs-sm); }

.t-calc__body {
  display: grid;
  gap: var(--t-s5);
  padding: var(--t-s6);
}

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

.t-calc__inputs { display: grid; gap: var(--t-s3); }

.t-calc__inputs input {
  width: 100%;
  height: var(--t-control-h);
  padding-inline: var(--t-s4);
  border: 1px solid var(--t-line-strong);
  border-radius: var(--t-radius);
  background: var(--t-surface);
  font-family: var(--t-font-ui);
  font-size: 1.125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.t-calc__inputs input:focus { border-color: var(--t-ink); }

/* Rezultatai ant rašalo — tie patys keturi rodikliai kaip matricoje,
   kad pirkėjas atpažintų juos ir produkto puslapyje. */
.t-calc__out {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--t-s4);
  padding: var(--t-s5);
  background: var(--t-ink);
  color: #fff;
}

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

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

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

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

.t-calc__note {
  margin: 0;
  padding: 0 var(--t-s6) var(--t-s6);
  font-size: var(--t-fs-sm);
  color: var(--t-ink-soft);
}

/* Nuolaidų pakopos — plytelės, o ne eilučių sąrašas. */
.t-steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  margin: var(--t-s5) 0 0;
  padding: 0;
  list-style: none;
  background: var(--t-line);
  border: 1px solid var(--t-line);
}

.t-steps-grid__item {
  margin: 0;
  padding: var(--t-s4);
  background: var(--t-surface);
  text-align: center;
}

.t-steps-grid__item.is-best { background: var(--t-ink); }
.t-steps-grid__item.is-best .t-steps-grid__qty { color: rgba(255, 255, 255, .6); }
.t-steps-grid__item.is-best .t-steps-grid__pct { color: var(--t-signal-on-dark); }

.t-steps-grid__qty {
  display: block;
  font-size: var(--t-fs-xs);
  color: var(--t-ink-soft);
}

.t-steps-grid__pct {
  display: block;
  margin-top: var(--t-s2);
  font-family: var(--t-font-ui);
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--t-signal);
}

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

.t-prices__whygrid {
  display: grid;
  gap: var(--t-s5);
  margin-top: var(--t-s4);
}

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

.t-prices__whygrid > p { margin: 0; max-width: 62ch; }

/* Spaudos vietos — plytelės su realiais matmenimis. */
.t-places {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  margin: var(--t-s5) 0 0;
  padding: 0;
  list-style: none;
  background: var(--t-line);
  border: 1px solid var(--t-line);
}

.t-places__item {
  margin: 0;
  padding: var(--t-s5);
  background: var(--t-surface);
}

.t-places__name {
  display: block;
  font-family: var(--t-font-ui);
  font-size: var(--t-fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--t-ls-label);
}

/* Matmuo yra tai, ko čia ieškoma — todėl jis didžiausias ir akcentinis. */
.t-places__size {
  display: block;
  margin: var(--t-s2) 0;
  font-family: var(--t-font-ui);
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--t-signal);
}

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

.t-page--print section { margin-block: var(--t-s8); }
.t-page--print .t-page__intro { max-width: 68ch; }
.t-page--print .t-steps { margin-top: var(--t-s5); }

/* --- teisiniai puslapiai -----------------------------------------------------
 * Taisyklės, grąžinimas, privatumo politika. Šių tekstų niekas neskaito iš
 * eilės — ateinama su vienu klausimu, todėl kairėje turinys su nuorodomis,
 * o teksto juosta siaura, kad eilutė būtų patogi skaityti. */

.t-legal {
  display: grid;
  gap: var(--t-s6);
  margin-block: var(--t-s6);
}

@media (min-width: 900px) {
  .t-legal { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: var(--t-s7); align-items: start; }

  /* Turinys keliauja kartu slenkant — ilgame tekste tai vienintelis būdas
     nepamesti orientacijos. */
  .t-legal__toc {
    position: sticky;
    top: calc(var(--t-header-h) + var(--t-s5));
  }
}

.t-legal__updated {
  margin-top: var(--t-s2);
  font-size: var(--t-fs-xs);
  color: var(--t-ink-soft);
}

.t-legal__toc {
  padding: var(--t-s5);
  border: 1px solid var(--t-line);
  background: var(--t-surface);
}

.t-legal__toctitle {
  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-legal__toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}

.t-legal__toc li {
  counter-increment: toc;
  margin: 0;
  border-top: 1px solid var(--t-line);
}

.t-legal__toc li:first-child { border-top: 0; }

.t-legal__toc a {
  display: block;
  padding-block: var(--t-s3);
  font-size: var(--t-fs-sm);
  line-height: var(--t-lh-snug);
  color: var(--t-ink);
}

.t-legal__toc a::before {
  content: counter(toc, decimal-leading-zero);
  margin-inline-end: var(--t-s3);
  font-family: var(--t-font-ui);
  font-size: var(--t-fs-xs);
  font-weight: 700;
  color: var(--t-signal);
}

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

.t-legal__prose { max-width: 72ch; }

/* Antraštės ilgame tekste turi būti aiškiai atskirtos — kitaip skyriai
   susilieja į vieną masę. */
.t-legal__prose h2 {
  margin-top: var(--t-s7);
  padding-top: var(--t-s4);
  border-top: 1px solid var(--t-line);
  font-size: var(--t-fs-h3);
  text-transform: uppercase;
  letter-spacing: var(--t-ls-display);
  /* Kad nuoroda iš turinio nesustotų po prilipusiu header'iu. */
  scroll-margin-top: calc(var(--t-header-h) + var(--t-s5));
}

.t-legal__prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.t-legal__prose h3 { margin-top: var(--t-s5); font-size: var(--t-fs-lead); }
.t-legal__prose li + li { margin-top: var(--t-s2); }

.t-legal__help { margin-top: var(--t-s7); max-width: 72ch; }

/* --- trupinių takas ----------------------------------------------------------
 * Buvo catalog.css, bet tas failas kraunamas tik parduotuvės puslapiuose, o
 * takas dabar rodomas ir straipsniuose bei paprastuose puslapiuose. */

.t-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--t-s2);
  font-size: var(--t-fs-xs);
  color: var(--t-ink-soft);
  margin-bottom: var(--t-s5);
}

.t-breadcrumb a { color: var(--t-ink-soft); }
.t-breadcrumb a:hover { color: var(--t-ink); }

/* Skirtukas per pseudoelementą, o ne tarpu: be jo trupiniai susilieja į
   vieną eilutę ir neatrodo kaip takas. */
.t-breadcrumb > * + *::before {
  content: "/";
  margin-inline-end: var(--t-s2);
  color: var(--t-line-strong, var(--t-line));
}

.t-breadcrumb [aria-current="page"] { color: var(--t-ink); }

/* Straipsnio pabaigos nuorodos. Anksčiau tekstas baigdavosi aklai: nei
   skaitytojas, nei paieškos sistema neturėjo kur eiti toliau. */
.t-related {
  margin-top: var(--t-s7);
  padding: var(--t-s5);
  border: 1px solid var(--t-line);
  background: var(--t-surface);
}

.t-related h2 {
  margin: 0 0 var(--t-s4);
  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-related ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
}

.t-related li { margin: 0; border-top: 1px solid var(--t-line); }
.t-related li:first-child { border-top: 0; }

.t-related a {
  display: block;
  padding-block: var(--t-s3);
  font-weight: 600;
  color: var(--t-ink);
  text-decoration: none;
}

.t-related a::after { content: " →"; color: var(--t-signal); }
.t-related a:hover { color: var(--t-signal); }

/* --- DUK puslapis ----------------------------------------------------------- */

.t-faqpage { display: grid; gap: var(--t-s6); margin-top: var(--t-s6); }

@media (min-width: 900px) {
  .t-faqpage { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: var(--t-s7); align-items: start; }
  .t-faqpage__nav { position: sticky; top: calc(var(--t-header-h) + var(--t-s5)); }
}

.t-faqpage__nav { border: 1px solid var(--t-line); background: var(--t-surface); padding: var(--t-s5); }

.t-faqpage__navtitle {
  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);
}

/* Taikoma tik temų sąrašui, o ne visoms juostos nuorodoms: anksčiau šios
   taisyklės pagaudavo ir pagalbos bloko mygtuką — jis gaudavo juodą tekstą
   ant juodo fono ir tapdavo tiesiog juodu stačiakampiu. */
.t-faqpage__nav > ul { margin: 0; padding: 0; list-style: none; }
.t-faqpage__nav > ul > li { border-top: 1px solid var(--t-line); }
.t-faqpage__nav > ul > li:first-child { border-top: 0; }

.t-faqpage__nav > ul > li > a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--t-s3);
  padding-block: var(--t-s3);
  font-size: var(--t-fs-sm);
  color: var(--t-ink);
}

.t-faqpage__nav > ul > li > a:hover { color: var(--t-signal); }
.t-faqpage__count { font-family: var(--t-font-mono); font-size: var(--t-fs-xs); color: var(--t-ink-soft); }

.t-faqpage__help { margin-top: var(--t-s5); padding-top: var(--t-s5); border-top: 1px solid var(--t-line); }
.t-faqpage__help p { font-size: var(--t-fs-sm); color: var(--t-ink-soft); margin-bottom: var(--t-s3); }
.t-faqpage__mail { margin-top: var(--t-s3); margin-bottom: 0; }

.t-faqpage__group + .t-faqpage__group { margin-top: var(--t-s7); }

.t-faqpage__group h2 {
  margin-bottom: var(--t-s4);
  font-size: var(--t-fs-h3);
  text-transform: uppercase;
  letter-spacing: var(--t-ls-display);
  scroll-margin-top: calc(var(--t-header-h) + var(--t-s5));
}

/* `.t-acc` pats susitvarko su rėmeliais ir jų persidengimu (`margin-bottom:
   -1px` ir `[open]` z-index), todėl čia jo neperrašinėjam — anksčiau tokia
   „pagalba“ sugadindavo atidaryto bloko rėmelį. */
.t-faqpage__body .t-postcta { margin-top: var(--t-s7); }

/* --- apie mus / pristatymas -------------------------------------------------- */

.t-about__stats, .t-page--delivery .t-stats { margin-block: var(--t-s6); }

.t-about__facts, .t-about__flow, .t-about__text,
.t-delivery__terms, .t-delivery__methods, .t-delivery__affects,
.t-delivery__pay, .t-delivery__text { margin-top: var(--t-s7); }

.t-about__facts h2, .t-about__flow h2,
.t-delivery__terms h2, .t-delivery__methods h2,
.t-delivery__affects h2, .t-delivery__pay h2 {
  margin-bottom: var(--t-s5);
  font-size: var(--t-fs-h2);
  text-transform: uppercase;
  letter-spacing: var(--t-ls-display);
}

.t-page--about .t-postcta, .t-page--delivery .t-postcta { margin-top: var(--t-s7); }
.t-postcta__meta { font-size: var(--t-fs-sm); }

/* Pristatymo lentelėje pirmas stulpelis yra etiketė, ne duomenys. */
.t-delivery__pay th {
  width: 30%;
  text-align: start;
  white-space: nowrap;
  color: var(--t-ink-soft);
  font-weight: 600;
}

.t-delivery__link { display: flex; flex-wrap: wrap; gap: var(--t-s5); margin-top: var(--t-s4); }
.t-delivery__terms .t-note { margin-top: var(--t-s5); }

/* --- straipsnio puslapis -----------------------------------------------------
 * Straipsniai ilgi, todėl vien teksto stulpelio nepakanka: šone turinys su
 * nuorodomis, pasiūlymas ir dalijimasis, apačioje — kur eiti toliau. */

.t-single-page .t-single__head { max-width: 72ch; margin-bottom: var(--t-s6); }
.t-single-page .t-single__head h1 { margin-top: var(--t-s3); }

.t-single__cat { color: var(--t-signal); }
.t-single__cat:hover { color: var(--t-signal-deep); }

.t-single__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--t-s2);
  margin-top: var(--t-s4);
  font-family: var(--t-font-mono);
  font-size: var(--t-fs-xs);
  color: var(--t-ink-soft);
}

.t-single-page .t-single__media { margin-bottom: var(--t-s6); }
.t-single-page .t-single__media img { width: 100%; height: auto; }

.t-single__layout { display: grid; gap: var(--t-s6); }

@media (min-width: 1000px) {
  /* Šoninė juosta kairėje: turinys turi būti pasiekiamas nepervedus akių
     per visą teksto plotį. */
  .t-single__layout { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: var(--t-s7); align-items: start; }
  .t-single__side { position: sticky; top: calc(var(--t-header-h) + var(--t-s5)); }
}

.t-single__sidetitle {
  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-single__toc {
  padding: var(--t-s5);
  border: 1px solid var(--t-line);
  background: var(--t-surface);
}

.t-single__toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.t-single__toc li { counter-increment: toc; margin: 0; border-top: 1px solid var(--t-line); }
.t-single__toc li:first-child { border-top: 0; }

.t-single__toc a {
  display: block;
  padding-block: var(--t-s3);
  font-size: var(--t-fs-sm);
  line-height: var(--t-lh-snug);
  color: var(--t-ink);
}

.t-single__toc a::before {
  content: counter(toc, decimal-leading-zero);
  margin-inline-end: var(--t-s3);
  font-family: var(--t-font-mono);
  font-size: var(--t-fs-xs);
  color: var(--t-signal);
}

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

.t-single__cta {
  margin-top: var(--t-s5);
  padding: var(--t-s5);
  background: var(--t-ink);
  color: #fff;
}

.t-single__cta .t-single__sidetitle { color: rgba(255, 255, 255, .6); }
.t-single__cta p { font-size: var(--t-fs-sm); color: rgba(255, 255, 255, .78); margin-bottom: var(--t-s4); }
.t-single__cta .t-btn { width: 100%; justify-content: center; }
.t-single__cta .t-link { display: inline-block; margin-top: var(--t-s3); color: #fff; }

.t-single__share { margin-top: var(--t-s5); padding-top: var(--t-s5); border-top: 1px solid var(--t-line); }
.t-single__share ul { display: flex; flex-wrap: wrap; gap: var(--t-s3); margin: 0; padding: 0; list-style: none; }
.t-single__share a { font-size: var(--t-fs-xs); color: var(--t-ink-soft); text-decoration: underline; text-underline-offset: 2px; }
.t-single__share a:hover { color: var(--t-signal); }

.t-single__prose h2 { scroll-margin-top: calc(var(--t-header-h) + var(--t-s5)); }

.t-single__tags { display: flex; flex-wrap: wrap; gap: var(--t-s3); margin-top: var(--t-s6); }
.t-single__tags a {
  padding: var(--t-s2) var(--t-s3);
  border: 1px solid var(--t-line);
  font-family: var(--t-font-mono);
  font-size: var(--t-fs-xs);
  color: var(--t-ink-soft);
}
.t-single__tags a:hover { border-color: var(--t-ink); color: var(--t-ink); }

.t-single__related { margin-top: var(--t-s8); padding-top: var(--t-s7); border-top: 1px solid var(--t-line); }
.t-single__end { margin-top: var(--t-s7); }

/* --- rekomenduojamos prekės straipsnyje --------------------------------------
 * Blokas turi atrodyti kaip straipsnio dalis, o ne kaip įklijuota reklama:
 * tas pats rėmelis kaip kitiems blokams, be ryškių spalvų. */

.t-picks {
  margin-block: var(--t-s6);
  padding: var(--t-s5);
  border: 1px solid var(--t-line);
  background: var(--t-surface);
}

/* `.t-prose` riboja plotį iki 72ch — prekių tinkleliui to per mažai. */
.t-prose .t-picks { max-width: none; }

.t-picks__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--t-s3);
  margin-bottom: var(--t-s4);
  padding-bottom: var(--t-s3);
  border-bottom: 1px solid var(--t-line);
}

.t-picks__title {
  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-picks__more { font-size: var(--t-fs-xs); }

.t-picks__grid {
  display: grid;
  gap: var(--t-s4);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.t-picks__card {
  display: grid;
  align-content: start;
  gap: var(--t-s2);
  border: 1px solid var(--t-line);
  background: var(--t-paper);
  color: var(--t-ink);
  text-decoration: none;
  transition: border-color var(--t-fast) var(--t-ease);
}

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

.t-picks__shot { display: block; border-bottom: 1px solid var(--t-line); background: #fff; }

.t-picks__shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: contain;
}

.t-picks__name {
  padding: var(--t-s3) var(--t-s3) 0;
  font-size: var(--t-fs-sm);
  font-weight: 600;
  line-height: var(--t-lh-snug);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.t-picks__price {
  padding-inline: var(--t-s3);
  font-family: var(--t-font-mono);
  font-size: var(--t-fs-sm);
}

.t-picks__price del { color: var(--t-ink-soft); font-size: var(--t-fs-xs); }
.t-picks__price ins { text-decoration: none; color: var(--t-signal); }

.t-picks__stock {
  padding: 0 var(--t-s3) var(--t-s3);
  font-family: var(--t-font-mono);
  font-size: var(--t-fs-xs);
  color: var(--t-ink-soft);
}

/* Antras žingsnių žymėjimo variantas.
 *
 * Dalis šablonų naudoja `.t-steps__item`, o ne `.t-step-card` — tokie
 * elementai likdavo visai be stilių: `.t-steps` tinklelis turi pilką foną
 * su 1 px tarpais, tad be kortelės fono ir vidinių paraščių tekstas
 * susiliedavo į vieną pilką juostą. Stilius kartojam, o ne perrašinėjam
 * šablonus, nes tos pačios klasės naudojamos ir krepšelyje. */

.t-steps__item {
  background: var(--t-surface);
  padding: var(--t-s5);
  display: flex;
  flex-direction: column;
  gap: var(--t-s3);
}

.t-steps__num {
  font-family: var(--t-font-mono);
  font-size: var(--t-fs-xs);
  color: var(--t-signal);
}

.t-steps__item h3 { font-size: var(--t-fs-h3); font-weight: 700; }
.t-steps__item p { font-size: var(--t-fs-sm); color: var(--t-ink-soft); margin: 0; }

/* Ženklo logotipas sienoje. Logotipai būna labai skirtingų proporcijų, todėl
   ribojam aukštį, o ne plotį — kitaip siauri ženklai atrodytų milžiniški, o
   platūs vos matomi. */
.t-brand__logo {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 44px;
}

.t-brand__logo img {
  max-width: 100%;
  max-height: 44px;
  width: auto;
  height: auto;
  object-fit: contain;
  /* Siena hover metu apsiverčia į juodą foną — spalvotas logotipas ant jo
     dingtų, todėl invertuojam kartu su ja. */
  transition: filter var(--t-fast) var(--t-ease);
}

.t-brand--logo:hover .t-brand__logo img { filter: invert(1) brightness(2); }

/* --- rekvizitai --------------------------------------------------------- */

/* Lentelė būtų tiksliau, bet siaurame ekrane ji arba lūžta, arba prašosi
   horizontalaus slinkimo. Dviejų stulpelių tinklelis telpa visur ir
   telefone susideda į vieną. */
.t-reqs {
  display: grid;
  gap: var(--t-s2);
  margin: var(--t-s4) 0;
  padding: var(--t-s4);
  border: 1px solid var(--t-line);
  border-radius: var(--t-radius);
  background: var(--t-surface);
}

.t-reqs__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
}

@media (min-width: 560px) {
  .t-reqs__row {
    grid-template-columns: 160px minmax(0, 1fr);
    gap: var(--t-s3);
    align-items: baseline;
  }
}

.t-reqs dt {
  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-reqs dd {
  margin: 0;
  font-weight: 500;
}

/* Juridinis pavadinimas poraštėje — tylesnis už kontaktus, bet randamas:
   mokėjimų tarpininkas reikalauja, kad jis būtų pasiekiamas iš bet kurio
   puslapio, o ne tik kontaktuose. */
.t-footer__legal {
  margin: var(--t-s3) 0 0;
  font-size: var(--t-fs-xs);
  color: var(--t-ink-soft);
}