/* Palyginimas — frames `Palyginimas` (347:13252, canvas 1728x1681), `Palyginimas - mobile`
   (435:5407, 360x1743) and the two bar frames `Playginimo bar`as` (381:4303) and
   `Palyginimo bar - mobile` (436:5678). Offsets are frame-absolute values from the cached
   node JSON; the section starts at the header bottom (y72 desktop, y141 mobile) and text
   tops are ink tops — Figma cap-trims, so every `top` is the ink value minus the font's own
   half-leading + (ascender - cap): 8.6px at 32/41.66, 6.43 at 24/31.2, 5.65 at 14/22,
   5.36 at 20/26, 3.75 at 14/18.2, 3.21 at 12/15.6. */

/* No min-height: with fewer spec rows than the comp's twelve the CTAs come up (V11), and the
   footer follows them at the comp's 120 (Frame 4 ends 1201, the footer starts 1321). */
.cmp { position: relative; padding: 0 0 120px; }

.cmp__crumbs {                                        /* Group 5360 @294,88 — 12/15.6 */
  position: absolute; left: 294px; top: 16px; height: 16px;
  display: flex; align-items: center; gap: 16px;
  font-weight: 300; font-size: 12px; line-height: 15.6px;
}
.cmp__crumbs a { color: var(--sand); transition: color var(--t-tint) var(--ease-out); }
.cmp__crumbs a:hover { color: var(--accent); }
.cmp__crumbs [aria-current] { color: var(--muted); font-weight: 400; }
.cmp__crumbs img { width: 5px; height: 8px; margin: -0.5px -0.75px; flex: none; }

/* The label column above the table: the title, then the clear pill (or the empty state) in
   flow under it, so neither depends on how many lines the title wraps to. */
.cmp__intro { position: absolute; left: 294px; top: 63.4px; z-index: 1; }

.cmp__title {                                         /* 377:6336 @294,144 — 32/41.7 ls3.2 */
  width: 204px; margin: 0;
  text-transform: uppercase; color: var(--accent);
  font-weight: 200; font-size: 32px; line-height: 41.66px; letter-spacing: 3.2px;
}

/* The 360 comp's column pager (Group 5675 @16,282); at 1728 every column fits. */
.cmp__pager { display: none; }

/* The frame draws no clear-all; the pill is the wishlist comp's own Frame 68 (160x50, r32).
   The wishlist's slot (right of the title) is column 3's photo here, so it goes into the one
   cell the comp leaves empty — the label column, under the title — design/DEVIATIONS.md.
   31.62 under the 3-line title's box = the old fixed top 220 in LT; a 4-line EN title takes
   it down with it. */
.cmp__clear { margin-top: 31.62px; z-index: 1; }
.cmp__clear-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 160px; height: 50px; border: 1px solid var(--accent); border-radius: 32px;
  background: none; color: var(--accent);
  text-transform: uppercase; font-weight: 500; font-size: 14px; line-height: 18.23px;
  transition: background-color var(--t-tint) var(--ease-out),
              color var(--t-tint) var(--ease-out), border-color var(--t-tint) var(--ease-out);
}
.cmp__clear-btn:hover, .cmp__clear-btn:focus-visible {                 /* ASSETS 452:4469 */
  background: var(--ink-hover); border-color: var(--ink-hover); color: var(--cream);
}

/* The 1140 container holds the label column plus one column per product: at the comp's three
   products every cell is 267 wide with 24px gaps; a fourth narrows them all. */
/* The table is the section's one in-flow child and its specs + CTA row flow, so a product
   with more spec rows than the comp's twelve slots pushes the CTAs (and the footer) down
   instead of sliding the rows under them (layout-audit overlaps at 768/1728). `top` is a
   relative offset, so the bottom margin gives the flow its 72px back. */
.cmp__table {
  display: flow-root;                   /* the specs' margin must not collapse out of it */
  position: relative; left: 294px; top: 72px; width: 1140px;
  margin-bottom: 72px;
  /* capped at the comp's 267: with one or two products a 1fr column grew the square photo
     into the spec rows (layout-audit overlaps at 768/1728) */
  --cmp-track: repeat(calc(var(--cmp-cols) + 1), minmax(0, 267px));
}
.cmp__head, .cmp__specs, .cmp__ctas {
  position: absolute; left: 0; right: 0;
  display: grid; grid-template-columns: var(--cmp-track); gap: 0 24px;
}
.cmp__head { top: 0; }

.cmp__col { position: relative; display: flex; flex-direction: column; min-width: 0; }
.cmp__media { display: block; }
.cmp__media img {
  /* `height: auto` beats the width/height attributes' presentational hint, so the tile stays
     square at any column width (156 at 360, 267 at 1728). */
  display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover;
  transition: transform var(--t-move) var(--ease-out);
}
.cmp__media:hover img { transform: scale(1.03); }

.cmp__remove {                                        /* Group 5592 — 24px circle, inset 8 */
  position: absolute; right: 8px; top: 8px;
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border: 0; border-radius: 50%;
  background: var(--accent); cursor: pointer;
  transition: background-color var(--t-tint) var(--ease-out),
              transform var(--t-move) var(--ease-out);
}
.cmp__remove:hover, .cmp__remove:focus-visible { transform: translateY(var(--lift)); }
.cmp__remove img { width: 8px; height: 8px; }        /* Group 5450 — cream 1px ×, 8x8 export */
.cmp__remove::before { content: ""; position: absolute; inset: -8px; }   /* 40px hit, unpainted */

.cmp__name {                                          /* 377:6991 @585,451 — 32/41.7 ls3.2 */
  margin: 31.4px 0 0; text-transform: uppercase; color: var(--ink);
  font-weight: 500; font-size: 32px; line-height: 41.66px; letter-spacing: 3.2px;
  height: 41.66px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;   /* one line */
}
.cmp__name a { color: inherit; transition: color var(--t-tint) var(--ease-out); }
.cmp__name a:hover { color: var(--accent); }
.cmp__brand {                                         /* 377:6992 @585,489 — 14/18.2 w600 */
  margin: 1.19px 0 0; text-transform: uppercase; color: var(--accent);
  font-weight: 600; font-size: 14px; line-height: 18.2px;
}

.cmp__spec-title {                                    /* 377:6869 @294,499 — 24/31.2 ls2.4 */
  position: absolute; left: 0; top: 348.57px; width: 267px; margin: 0;
  text-transform: uppercase; color: var(--muted);
  font-weight: 200; font-size: 24px; line-height: 31.2px; letter-spacing: 2.4px;
}

.cmp__specs {                          /* rows from 390.35, one 51.27 slot per row */
  position: relative; margin-top: 390.35px; grid-auto-rows: 51.27px;
}
.cmp__cell {
  position: relative; min-width: 0; color: var(--ink);
  font-weight: 400; font-size: 14px; line-height: 22px;
}
.cmp__cell--label { color: var(--accent); font-weight: 300; }
.cmp__cell::after {                                   /* Vector 51… — 1px #d4c5b5, ink + 31 */
  content: ""; position: absolute; left: 0; right: 0; top: 36.65px;
  height: 1px; background: var(--sand);
}
/* No rule under the last row, and none in the head/CTA rows' empty label cells (one struck
   through the title, one hung alone beside the buttons). */
.cmp__cell.is-last::after,
.cmp__head > .cmp__cell::after, .cmp__ctas > .cmp__cell::after { content: none; }

/* Group 16 @589,693 — 14px dots, pitch 21, inset 4px into the cell and 2.9px below its line */
.cmp__swatches {
  display: inline-flex; gap: 7px; margin-left: 4px;
  position: relative; top: 2.86px;                    /* a margin re-baselines the line box */
}
.cmp__swatches span {
  width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--sand);
}
.cmp__swatches span:first-child { border-color: var(--accent); }

/* Frame 4 @585,1154 — 267x47, r32; 40 under the last row's ink (Valdymas 1104+10), i.e.
   4.41 under its 51.27 slot — follows the last row whatever the row count. */
.cmp__ctas { position: relative; margin-top: 4.41px; }
.cmp__buy { min-width: 0; }
.cmp__add {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 47px; border: 0; border-radius: 32px;
  background: var(--ink); color: #fff; cursor: pointer;
  text-transform: uppercase; font-weight: 500; font-size: 14px; line-height: 18.2px;
  transition: background-color var(--t-tint) var(--ease-out);
}
.cmp__add:hover:not(:disabled), .cmp__add:focus-visible { background: var(--ink-hover); }
.cmp__add:disabled { background: var(--sand); cursor: not-allowed; }

/* A column leaving the table collapses, it does not blink out (the cart page's pattern). */
.cmp__col, .cmp__buy {
  transition: opacity var(--t-tint) var(--ease-out), transform var(--t-move) var(--ease-out);
}
.cmp__col.is-going, .cmp__buy.is-going { opacity: 0; transform: translateY(var(--nudge)); }

/* The comp draws no empty state; it follows the cart page's copy + CTA, in the wishlist's
   empty rhythm (lead 45.94 under the title box, CTA 29.17 under the lead), flowing after a
   title of any line count (design/DEVIATIONS.md). */
.cmp--empty { min-height: 640px; }
.cmp-empty__lead {
  width: 560px; margin: 45.94px 0 0;
  color: var(--muted); font-weight: 300; font-size: 16px; line-height: 26px;
}
.cmp-empty__cta {
  margin-top: 29.17px; width: fit-content;
  display: flex; align-items: center; justify-content: center;
  height: 50px; padding: 0 32px; border-radius: 32px;
  background: var(--ink); color: #fff;
  text-transform: uppercase; font-weight: 500; font-size: 14px; line-height: 18.2px;
  transition: background-color var(--t-tint) var(--ease-out);
}
.cmp-empty__cta:hover, .cmp-empty__cta:focus-visible { background: var(--ink-hover); }

/* ---- The bar ------------------------------------------------------------------------- */
/* 1728: Group 5597 — a 367x84 pill, centred, 40px above the footer (the comp's own gap).
   360: the full-bleed 150px strip of 436:5678. */
.cmpbar-mount { display: contents; }
.cmpbar-mount[hidden] { display: none; }              /* the cart page and the checkout */
.cmpbar {
  position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 40;
  display: flex; align-items: center; gap: 16px;
  height: 84px; padding: 16px 16px 16px 24px; border-radius: 52.5px;
  background: #e6dace;
}
.cmpbar__slots { display: flex; align-items: center; gap: 16.5px; }
.cmpbar__slot { position: relative; width: 52px; height: 52px; }
.cmpbar__slot img { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; }
.cmpbar__x {                                          /* Group 5592 — 16px circle, -8/-8 */
  position: absolute; right: -8px; top: -8px;
  display: flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border: 0; border-radius: 50%;
  background: var(--accent); cursor: pointer;
  transition: background-color var(--t-tint) var(--ease-out);
}
/* The motion language caps a hover scale at --zoom (1.03 — invisible on a 16px disc), so the ×
   answers with the bar CTA's own tint (accent → ink) instead of the old scale(1.08). */
.cmpbar__x:hover, .cmpbar__x:focus-visible { background: var(--ink); }
.cmpbar__x img { width: 6px; height: 6px; border-radius: 0; }   /* Group 5450 — 6x6 export */
/* The 16px disc keeps its paint; an unpainted box around it is what a finger hits — 40 tall,
   36 wide, stopping 0.5px short of the next slot (the slots are 16.5 apart, the × overhangs 8). */
.cmpbar__x::before { content: ""; position: absolute; inset: -12px -8px -12px -12px; }
.cmpbar__slot--add {                                  /* Rectangle 13 #ffffff + Group 5595 */
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; background: #fff;
}
.cmpbar__slot--add span {
  position: relative; display: block; width: 24px; height: 24px;
}
.cmpbar__slot--add span::before, .cmpbar__slot--add span::after {
  content: ""; position: absolute; background: var(--ink);
}
.cmpbar__slot--add span::before { left: 11.5px; top: 0; width: 1px; height: 24px; }
.cmpbar__slot--add span::after { left: 0; top: 11.5px; width: 24px; height: 1px; }
.cmpbar__cta {                                        /* Frame 5566 — 122x52, r80 */
  display: flex; align-items: center; justify-content: center;
  width: 122px; height: 52px; border-radius: 80px;
  background: var(--accent); color: var(--cream);
  text-transform: uppercase; font-weight: 500; font-size: 16px; line-height: 20.8px;
  transition: background-color var(--t-tint) var(--ease-out);
}
.cmpbar__cta:hover, .cmpbar__cta:focus-visible { background: var(--ink); }

/* ---- 360: `Palyginimas - mobile` 435:5407 --------------------------------------------- */
@media (max-width: 767px) {
  /* `flow-root`: the table's 187px top margin would otherwise collapse out of the section and
     carry the absolutely positioned crumbs/title/pager 187px down with it. */
  .cmp { min-height: 942px; padding: 0 0 84px; display: flow-root; }
  .cmp__crumbs { left: 16px; top: 16px; height: 13px; font-size: 10px; line-height: 13px; }
  .cmp__intro { display: contents; }                 /* its children place on the section */
  .cmp__title {                                       /* 436:5613 @16,194 — 24/31.2 ls2.4 */
    position: absolute; left: 16px; top: 46.57px; width: 328px;
    font-size: 24px; line-height: 31.2px; letter-spacing: 2.4px;
  }

  .cmp__pager {                                       /* Group 5675 @16,282 — 328x22 */
    display: flex; align-items: center; position: absolute; left: 16px; top: 141px;
    width: 328px; height: 22px;
  }
  .cmp__pager-label {                                 /* 436:5624 — 14/18.2 ls1.4, upper */
    margin-right: auto; color: var(--accent); text-transform: uppercase; font-weight: 300;
    font-size: 14px; line-height: 18.2px; letter-spacing: 1.4px;
  }
  .cmp__arrow {
    display: flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; margin-left: 8px; border: 0; border-radius: 50%;
    background: var(--cream-2, #ece3d8); cursor: pointer;
  }
  .cmp__arrow[disabled] { opacity: .4; cursor: default; }
  .cmp__arrow img { width: 5px; height: 9px; }
  /* 22px discs 8px apart: each one's unpainted hit box is 40 tall and grows away from its
     neighbour (prev to the left, next to the right), meeting in the middle of the gap. */
  .cmp__arrow { position: relative; }
  .cmp__arrow::before { content: ""; position: absolute; top: -9px; bottom: -9px; }
  [data-cmp-prev]::before { left: -14px; right: -4px; }
  [data-cmp-next]::before { left: -4px; right: -14px; }
  [data-cmp-prev] img { transform: rotate(180deg); }

  /* the 360 comp draws no „Ištrinti visus”: it hangs 20px under the CTA row, whatever the
     table's height (a real catalogue carries more spec rows than the comp's six) */
  .cmp__clear { position: absolute; left: 16px; bottom: 20px; margin: 0; }
  .cmp__clear-btn { width: 328px; height: 44px; }

  .cmp__table {                                       /* images @16,328 — 156 wide, gap 16 */
    position: static; width: auto; height: auto; min-height: 0; margin: 187px 16px 0;
    /* Two columns fill the 328 track exactly; a third or fourth overflows, which is what the
       comp's „Specifika” arrows page through. */
    overflow-x: auto; scrollbar-width: none;
    --cmp-track: repeat(var(--cmp-cols), 156px);
  }
  .cmp__table::-webkit-scrollbar { display: none; }
  .cmp__head, .cmp__specs, .cmp__ctas { position: static; gap: 0 16px; }
  .cmp__name {                                        /* 436:5626 @17,500 — 20/26 ls2 */
    margin-top: 10.64px; font-size: 20px; line-height: 26px; letter-spacing: 2px; height: 26px;
  }
  .cmp__brand {                                       /* 436:5627 @17,530 — 12/15.6 w600 */
    margin-top: 6.15px; font-size: 12px; line-height: 15.6px;
  }
  .cmp__spec-title { display: none; }                 /* the 360 comp draws no heading */

  .cmp__specs { grid-auto-rows: auto; margin-top: 18.11px; min-height: 0; }
  .cmp__cell::after { content: none; }
  /* Only the specs grid has a label cell at 360 — it spans both value cells; the head's and
     the CTA row's are empty and would push their rows down by the border + padding. */
  .cmp__head > .cmp__cell--label, .cmp__ctas > .cmp__cell--label { display: none; }
  .cmp__specs > .cmp__cell--label {
    grid-column: 1 / -1; padding-top: 10.35px; border-top: 1px solid var(--sand);
  }
  .cmp__specs > .cmp__cell:not(.cmp__cell--label) { margin: 4px 0 9.65px; }

  .cmp__ctas { margin-top: 27.65px; }                 /* Frame 4 @16,988 — 156x47 */
  .cmp__add { font-size: 12px; }

  .cmp-empty__lead {
    position: absolute; left: 16px; top: 120px; width: 328px; margin: 0;
    font-size: 14px; line-height: 22px;
  }
  .cmp-empty__cta { position: absolute; left: 16px; top: 200px; margin: 0; }

  .cmpbar {                                           /* Rectangle 2997 — 360x150 strip */
    left: 0; bottom: 0; transform: none; width: 100%; height: 150px;
    flex-direction: column; justify-content: flex-start; gap: 16px;
    padding: 24px 0; border-radius: 0;
  }
  .cmpbar__slots { gap: 16.5px; }
  .cmpbar__cta { width: 189px; height: 34px; font-size: 14px; line-height: 18.2px; }
  .cmpbar__cta { position: relative; }
  .cmpbar__cta::before { content: ""; position: absolute; inset: -3px 0; }   /* 34 -> 40px hit */
  /* The strip is fixed and 150px tall: the page reserves that much under the footer, so the
     last thing on it (the footer's language + social row, a form's last field) can always be
     scrolled clear of the strip instead of living under it. */
  body:has(.cmpbar-mount:not([hidden]) .cmpbar) { padding-bottom: 150px; }
}