/* TECHZONA · Prekių palyginimas. v1.0.0
   Spalvos derinamos su WoodMart tema: --wd-primary-color rgb(245,191,3), tekstas #242424/#767676.
   Tamsios temos svetainė neturi — modalui uždedamas color-scheme:light, kad mobilieji
   „force dark" režimai neišverstų lentelės. */

.tz-cmp-btn-wrap { display: contents; }

.tz-cmp-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 45px; height: 45px; padding: 0; border: 0; cursor: pointer;
  background: var(--bgcolor-white, #fff); color: #242424;
  transition: background .15s ease, color .15s ease;
}
.tz-cmp-btn__ico {
  width: 15px; height: 15px; flex: none;
  background: currentColor;
  -webkit-mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M22 20H2'  fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M22 20H2' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* Loop kortelėje etiketės nerodomos (vietos nėra) — tik ikona; prieinamas vardas ateina iš jų. */
.tz-cmp-btn__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tz-cmp-btn__t--rm { display: none; }
.tz-cmp-btn:hover { background: var(--wd-primary-color, #f5bf03); color: #1a1a1a; }
.tz-cmp-btn:focus-visible { outline: 2px solid #0b57d0; outline-offset: -2px; }

/* Pažymėtos prekės būseną uždeda JS: #tz-cmp-state nustato --tz-cmp-on:1 ir sukeičia etiketes. */
.tz-cmp-btn { --tz-cmp-on: 0; position: relative; }
.tz-cmp-btn[data-tz-cmp-id] {
  background-color: color-mix(in srgb, var(--wd-primary-color, #f5bf03) calc(var(--tz-cmp-on) * 100%), var(--bgcolor-white, #fff));
}

/* Prekės puslapio mygtukas — temos numatytojo mygtuko stilius (juodas, 42 px, be apvalinimo).
   Geltona palikta „Į krepšelį", kad pirkimo veiksmas liktų ryškiausias. */
.tz-cmp-single { margin: 14px 0 4px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tz-cmp-single .tz-cmp-btn--wide {
  width: auto; min-width: 260px; height: 42px; padding: 0 22px; gap: 10px;
  border-radius: var(--btn-accented-brd-radius, 5px);
  background: #000; color: #fff;
  font-size: 13px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; line-height: 1;
}
.tz-cmp-single .tz-cmp-btn--wide:hover { background: var(--wd-primary-color, #f5bf03); color: #fff; }
.tz-cmp-single .tz-cmp-btn--wide .tz-cmp-btn__t { color: #fff; }
.tz-cmp-btn--wide .tz-cmp-btn__ico { width: 17px; height: 17px; }
.tz-cmp-btn--wide .tz-cmp-btn__t {
  position: static; width: auto; height: auto; overflow: visible; clip: auto;
}
.tz-cmp-btn--wide .tz-cmp-btn__t--rm { display: none; }
/* Pasirinkta — mygtukas LIEKA juodas (temos pirkimo mygtukai geltoni, nemaišome),
   o pasirinkimą rodo geltonas kraštas ir pasikeitęs užrašas. */
.tz-cmp-single .tz-cmp-btn--wide[data-tz-cmp-id] {
  background-color: #000;
  box-shadow: inset calc(var(--tz-cmp-on) * 4px) 0 0 var(--wd-primary-color, #f5bf03);
}
.tz-cmp-single .tz-cmp-btn--wide[data-tz-cmp-id] .tz-cmp-btn__ico {
  background: color-mix(in srgb, var(--wd-primary-color, #f5bf03) calc(var(--tz-cmp-on) * 100%), #fff);
}

/* ---------------- plaukiojanti juosta ----------------
   TECHZONA stilius: juodas fonas kaip antraštėje, geltonas pagrindinis veiksmas su baltu
   tekstu (kaip „Į krepšelį"), apvalinimai iš temos tokeno --btn-accented-brd-radius. */

.tz-cmp-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 400;
  background: #000; color: #fff;
  border-top: 2px solid var(--wd-primary-color, #f5bf03);
  box-shadow: 0 -4px 18px rgb(0 0 0 / .28);
}
@media (max-width: 1024px) { .tz-cmp-bar { bottom: 55px; } }
.tz-cmp-bar__in {
  max-width: 1222px; margin: 0 auto; padding: 12px 15px;
  display: flex; align-items: center; gap: 12px; flex-wrap: nowrap;
}
.tz-cmp-bar__label {
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--wd-primary-color, #f5bf03); flex: none;
}
.tz-cmp-bar__items {
  display: flex; gap: 8px; flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow: hidden;
}
/* Žetonai dalijasi turimą plotį po lygiai ir trumpėja daugtaškiu — jokio slinkimo. */
.tz-cmp-bar .tz-cmp-chip {
  display: inline-flex; align-items: center; gap: 6px; flex: 1 1 0; min-width: 0; max-width: 230px;
  padding: 8px 8px 8px 12px; border-radius: var(--btn-accented-brd-radius, 5px);
  background: rgb(255 255 255 / .09); border: 1px solid rgb(255 255 255 / .14); color: #fff;
  font-size: 12px; line-height: 1.3;
}
.tz-cmp-chip__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }
.tz-cmp-bar .tz-cmp-chip__x {
  border: 0; background: none; color: #fff; font-size: 17px; line-height: 1; cursor: pointer;
  opacity: .55; padding: 0 2px; border-radius: 3px;
}
.tz-cmp-bar .tz-cmp-chip__x:hover { opacity: 1; color: var(--wd-primary-color, #f5bf03); }
.tz-cmp-bar .tz-cmp-bar__open {
  border: 0; border-radius: var(--btn-accented-brd-radius, 5px);
  height: 42px; padding: 0 26px; cursor: pointer; flex: none;
  background: var(--wd-primary-color, #f5bf03); color: #fff;
  font-size: 13px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; line-height: 1;
  transition: filter .15s ease;
}
.tz-cmp-bar .tz-cmp-bar__open:hover { filter: brightness(1.08); }
.tz-cmp-bar .tz-cmp-bar__open[disabled] { opacity: .4; cursor: not-allowed; filter: none; }
.tz-cmp-bar .tz-cmp-bar__clear {
  height: 42px; padding: 0 18px; cursor: pointer; flex: none;
  background: transparent; color: #fff; border: 1px solid rgb(255 255 255 / .28);
  border-radius: var(--btn-accented-brd-radius, 5px);
  font-size: 13px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; line-height: 1;
}
.tz-cmp-bar .tz-cmp-bar__clear:hover { border-color: var(--wd-primary-color, #f5bf03); color: var(--wd-primary-color, #f5bf03); }

/* ---------------- modalas ---------------- */

body.tz-cmp-open { overflow: hidden; }
.tz-cmp-modal { position: fixed; inset: 0; z-index: 100000; color-scheme: light; }
.tz-cmp-modal__bg { position: absolute; inset: 0; background: rgb(0 0 0 / .55); }
.tz-cmp-modal__box {
  position: relative; margin: 24px auto; max-width: 1180px; width: calc(100% - 32px);
  max-height: calc(100vh - 48px); min-height: min(640px, 86vh); background: #fff; border-radius: 8px;
  display: flex; flex-direction: column; overflow: hidden;
}
.tz-cmp-modal__head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 18px; border-bottom: 1px solid #e8e8e8; flex: none;
}
.tz-cmp-modal__head h2 { margin: 0; font-size: 18px; color: #242424; }
.tz-cmp-modal__tools { display: flex; align-items: center; gap: 14px; }
.tz-cmp-only { font-size: 13px; color: #555; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.tz-cmp-modal__x { border: 0; border-radius: var(--btn-accented-brd-radius, 5px); background: none; font-size: 26px; line-height: 1; cursor: pointer; color: #777; padding: 0 4px; }

.tz-cmp-add { position: relative; padding: 10px 18px; border-bottom: 1px solid #f0f0f0; flex: none; }
.tz-cmp-add__label { font-size: 12px; color: #767676; display: block; margin-bottom: 4px; }
.tz-cmp-modal .tz-cmp-add__input { width: 100%; max-width: 460px; height: 40px; padding: 0 14px; border: 1px solid #e0e0e0; border-radius: var(--btn-accented-brd-radius, 5px); font-size: 14px; }
.tz-cmp-modal .tz-cmp-add__list {
  position: absolute; z-index: 5; left: 18px; top: 100%; width: min(460px, calc(100% - 36px));
  max-height: 320px; overflow: auto; background: #fff; border: 1px solid #e0e0e0; border-radius: var(--btn-accented-brd-radius, 5px);
  box-shadow: 0 8px 20px rgb(0 0 0 / .12);
}
.tz-cmp-add__item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px;
  border: 0; border-bottom: 1px solid #f2f2f2; background-color: #fff; cursor: pointer; text-align: left;
  font-family: inherit;
}
.tz-cmp-add__item * { text-align: left; }
.tz-cmp-add__item:hover { background-color: #fbf7e6; }
.tz-cmp-add__item img { width: 40px; height: 40px; object-fit: contain; flex: none; }
.tz-cmp-add__n { flex: 1 1 auto; font-size: 12.5px; line-height: 1.3; color: #242424; text-transform: none; }
.tz-cmp-add__p { font-size: 12.5px; font-weight: 700; color: #242424; flex: none; white-space: nowrap; }
.tz-cmp-add__p del { font-weight: 400; opacity: .5; margin-right: 4px; }
.tz-cmp-add__msg { padding: 12px; font-size: 13px; color: #767676; }

.tz-cmp-modal__body { overflow: auto; -webkit-overflow-scrolling: touch; padding: 0 18px 18px; }
.tz-cmp-loading, .tz-cmp-empty { padding: 40px 10px; text-align: center; color: #767676; }

/* ---------------- lentelė ---------------- */

.tz-cmp-tablewrap { overflow: visible; }
.tz-cmp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tz-cmp-table th, .tz-cmp-table td { border-bottom: 1px solid #eee; padding: 9px 12px; vertical-align: top; text-align: left; }
.tz-cmp-table thead th {
  position: sticky; top: 0; z-index: 3; background: #fff; border-bottom: 2px solid #e0e0e0;
  vertical-align: top; min-width: 170px;
}
.tz-cmp-table thead th.tz-cmp-corner { z-index: 4; left: 0; width: 210px; min-width: 160px; color: #767676; font-weight: 500; }
.tz-cmp-table tbody th {
  position: sticky; left: 0; z-index: 2; background: #fff; width: 210px; min-width: 160px;
  font-weight: 500; color: #555;
}
.tz-cmp-table tbody tr:nth-child(odd) td { background: #fcfcfc; }
.tz-cmp-table tbody tr:nth-child(odd) th { background: #fcfcfc; }

.tz-cmp-sec th {
  position: sticky; left: 0; z-index: 2;
  background: #f4f4f4 !important; font-weight: 700; color: #242424;
  font-size: 12px; letter-spacing: .04em; text-transform: uppercase; padding: 8px 12px;
}

/* Antraštė yra sticky, todėl ji kiek įmanoma žemesnė — kitaip lentelei lieka per mažai vietos.
   Visas turinys viename flex stulpelyje, lygiuojamas nuo kairės kaip ir duomenų celės. */
.tz-cmp-prod { padding-top: 6px; text-align: left; vertical-align: top; }
.tz-cmp-prod__in { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.tz-cmp-prod__img { display: block; }
.tz-cmp-prod__img img { width: 74px; height: 74px; object-fit: contain; display: block; margin: 0 0 6px; }
.tz-cmp-prod__name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 12.5px; font-weight: 600; color: #242424; line-height: 1.3; margin-bottom: 3px;
}
.tz-cmp-prod__name:hover { color: var(--wd-primary-color, #f5bf03); }
.tz-cmp-prod__price { display: block; font-size: 14px; font-weight: 700; color: #242424; margin-bottom: 4px; line-height: 1.25; }
.tz-cmp-prod__price del { font-weight: 400; font-size: 12px; opacity: .55; margin-right: 4px; }
.tz-cmp-prod__buy {
  display: inline-block; padding: 6px 14px; border-radius: var(--btn-accented-brd-radius, 5px); font-size: 11.5px; font-weight: 600; text-transform: uppercase;
  background: #000; color: #fff;
}
.tz-cmp-prod__buy:hover { background: var(--wd-primary-color, #f5bf03); color: #1a1a1a; }
.tz-cmp-prod__stock { display: inline-block; font-size: 11.5px; color: #b3261e; }
.tz-cmp-prod__win {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 5px; font-size: 10.5px; color: #1a7f37; line-height: 1.3; font-weight: 600; text-transform: none;
}
.tz-cmp-x {
  align-self: flex-end; border: 0; background: none; cursor: pointer; padding: 0 0 2px;
  font-size: 20px; line-height: 1; color: #aaa;
}
.tz-cmp-x:hover { color: #b3261e; }

.tz-cmp-best { background: rgb(26 127 55 / .09) !important; font-weight: 700; color: #14532d; }
.tz-cmp-tick { color: #1a7f37; margin-left: 5px; font-weight: 700; }
.tz-cmp-na { color: #bbb; }
.tz-cmp-note { margin: 14px 0 0; font-size: 12px; color: #8a8a8a; line-height: 1.5; }

.tz-cmp-onlydiff .tz-cmp-same { display: none; }

/* Pasirinkimo vaizdas, kol dar nėra ką lyginti — kortelės kaip parduotuvės prekių kortelės. */
.tz-cmp-pick { padding: 10px 0 0; }
.tz-cmp-pick__h { margin: 0 0 3px; font-size: 16px; color: #242424; font-weight: 600; }
.tz-cmp-pick__s { margin: 0 0 16px; font-size: 13px; color: #767676; }
.tz-cmp-pick__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }

.tz-cmp-pick__list .tz-cmp-add__item {
  background: #fff; border: 1px solid #ececec; border-radius: var(--btn-accented-brd-radius, 5px); padding: 12px 14px; gap: 14px;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
  position: relative;
}
.tz-cmp-pick__list .tz-cmp-add__item:hover {
  background: #fff; border-color: var(--wd-primary-color, #f5bf03);
  box-shadow: 0 4px 16px rgb(0 0 0 / .07); transform: translateY(-1px);
}
.tz-cmp-pick__list .tz-cmp-add__item img { width: 62px; height: 62px; }
.tz-cmp-pick__list .tz-cmp-add__n { font-size: 13.5px; font-weight: 600; color: #242424; padding-right: 26px; }
.tz-cmp-pick__list .tz-cmp-add__p { font-size: 14px; }
/* Pliuso ženklas — parodo, kad kortelė yra mygtukas. */
.tz-cmp-pick__list .tz-cmp-add__item::after {
  content: "+"; position: absolute; top: 10px; right: 12px;
  width: 20px; height: 20px; border-radius: 50%; line-height: 19px; text-align: center;
  font-size: 15px; font-weight: 700; color: #b5b5b5; background: #f4f4f4;
  transition: background .15s ease, color .15s ease;
}
.tz-cmp-pick__list .tz-cmp-add__item:hover::after { background: var(--wd-primary-color, #f5bf03); color: #fff; }

.tz-cmp-toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 90px; z-index: 100001;
  background: #1f1f1f; color: #fff; padding: 11px 18px; border-radius: var(--btn-accented-brd-radius, 5px); font-size: 13px;
  max-width: 90vw; box-shadow: 0 6px 20px rgb(0 0 0 / .25); transition: opacity .4s ease;
}
.tz-cmp-toast.is-out { opacity: 0; }

/* ---------------- mobilieji ---------------- */

@media (max-width: 1024px) {
  .tz-cmp-btn { width: 35px; height: 35px; }
  .tz-cmp-btn__ico { width: 14px; height: 14px; }
}
@media (max-width: 768px) {
  .tz-cmp-modal__box { margin: 0; width: 100%; max-height: 100vh; height: 100vh; border-radius: 0; }
  .tz-cmp-modal__head { padding: 10px 12px; }
  .tz-cmp-modal__head h2 { font-size: 16px; }
  .tz-cmp-modal__tools { gap: 8px; }
  .tz-cmp-print { display: none; }
  .tz-cmp-modal__body { padding: 0 12px 14px; }
  .tz-cmp-add { padding: 8px 12px; }
  .tz-cmp-add__list { left: 12px; width: calc(100% - 24px); }
  .tz-cmp-table { font-size: 12px; }
  .tz-cmp-table th, .tz-cmp-table td { padding: 7px 8px; }
  .tz-cmp-table thead th { min-width: 132px; }
  .tz-cmp-table thead th.tz-cmp-corner, .tz-cmp-table tbody th { width: 118px; min-width: 112px; }
  .tz-cmp-prod__img img { width: 66px; height: 66px; }
  .tz-cmp-prod__name { font-size: 12px; }
  .tz-cmp-prod__price { font-size: 13px; }
  .tz-cmp-bar__in { padding: 9px 12px; gap: 8px; }
  .tz-cmp-bar__label { display: none; }
  /* Telefone vardai netelpa — rodome tik skaičių mygtuke. */
  .tz-cmp-bar__items { display: none; }
  .tz-cmp-bar__open, .tz-cmp-bar__clear { height: 38px; padding: 0 16px; font-size: 12px; }
}