/* Spalvos, dydžiai, galerija. */
/* ---------- Apžiūrėkite iš arti ---------- */
.closer { padding-bottom: 0; }
.cv { padding-block: 0; }
.cv-inner { position: relative; display: grid; grid-template-columns: 340px 1fr; align-items: center; min-height: 760px; }
.cv-tabs { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; position: relative; z-index: 2; }
.cv-tab {
  display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 26px 0 16px; border: 0; border-radius: 28px; cursor: pointer;
  background: rgba(232, 232, 237, 0.85); color: var(--text); font-size: 17px; font-weight: 600; letter-spacing: -0.022em; white-space: nowrap;
  transition: background-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.cv-tab:hover { background: #dedee3; }
.cv-tab:active { transform: scale(0.97); }
.cv-tab.on { background: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); }
.cv-sw { width: 24px; height: 24px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); position: relative; }
.cv-tab.on .cv-sw::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--text); }
.cv-text { max-width: 300px; max-height: 0; overflow: hidden; opacity: 0; margin: 0 0 0 4px; transition: max-height 0.5s var(--ease), opacity 0.4s var(--ease), margin 0.5s var(--ease); }
.cv-tab.on + .cv-text { max-height: 140px; opacity: 1; margin: 6px 0 10px 4px; }
.cv-stage { position: relative; height: 680px; }
.cv-img { position: absolute; inset: 40px 0 40px; margin: 0; opacity: 0; transform: scale(0.9) translateY(14px); transition: opacity 0.5s var(--ease), transform 0.9s var(--spring); pointer-events: none; }
.cv-img.on { opacity: 1; transform: none; transition: opacity 0.6s var(--ease) 0.08s, transform 0.9s var(--spring) 0.04s; }
.cv-img img { width: 100%; height: 100%; object-fit: contain; }
.cv-img .prod-shadow { bottom: -1%; width: 30%; }

/* ---------- Dydžiai ---------- */
.cmp-card { background: #fff; border-radius: 28px; padding: 80px 40px 70px; }
.cmp-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1000px; margin: 0 auto; }
.cmp-col { display: flex; flex-direction: column; align-items: center; text-align: center; }
.cmp-img { position: relative; height: 340px; width: 100%; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 36px; }
.cmp-img img { width: calc(100% * var(--s)); max-width: calc(300px * var(--s)); height: auto; }
.cmp-img .prod-shadow { width: calc(26% * 1); bottom: -2px; }
.cmp-name { font-size: 28px; line-height: 1.14286; font-weight: 600; letter-spacing: 0.007em; }
.cmp-desc { margin-top: 14px; min-height: 50px; }
.cmp-price { margin: 10px 0 26px; font-weight: 600; }
.cmp-rows { width: 100%; margin-top: 44px; padding-top: 36px; border-top: 1px solid var(--line); display: grid; gap: 22px; font-size: 14px; color: var(--text); }
.cmp-rows b { font-size: 28px; font-weight: 600; letter-spacing: 0.007em; display: block; line-height: 1.1; margin-bottom: 2px; }
.cmp-note { margin-top: 20px; color: var(--gray); text-align: center; }

/* ---------- Galerija ---------- */
.gal { position: relative; padding-top: 160px; }
.gal-sticky { padding-bottom: 120px; }
.gal-viewport { overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; scroll-padding-inline: calc((100% - min(var(--content), 100% - 2 * var(--gutter))) / 2); }
.gal-viewport::-webkit-scrollbar { display: none; }
.gal-track { display: flex; gap: 20px; width: max-content; padding-inline: calc((100vw - min(var(--content), 100vw - 2 * var(--gutter))) / 2); will-change: transform; }
.gal-card { position: relative; flex: none; width: 400px; height: 560px; padding: 30px 30px 0; border-radius: 28px; background: #fff; overflow: hidden; scroll-snap-align: start;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.gal-card:hover { transform: scale(1.012); box-shadow: 2px 4px 16px rgba(0, 0, 0, 0.08); }
.gal-label { font-size: 17px; line-height: 1.23536; font-weight: 600; letter-spacing: -0.022em; margin-bottom: 12px; }
.gal-body { margin-top: 12px; max-width: 320px; }
.gal-card picture { position: absolute; left: 0; right: 0; bottom: 0; height: 56%; display: flex; justify-content: center; align-items: flex-end; }
.gal-img { max-height: 100%; width: auto; max-width: 86%; object-fit: contain; margin-bottom: 18px; }
.gal-img-tall { max-height: 112%; margin-bottom: -8%; }
.gal-plus { position: absolute; right: 18px; bottom: 18px; width: 36px; height: 36px; border-radius: 50%; background: #333336; z-index: 2; transition: background-color 0.2s, transform 0.2s var(--ease); }
.gal-plus::before, .gal-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; border-radius: 1px; background: #fff; }
.gal-plus::after { transform: rotate(90deg); }
.gal-plus:hover { background: #000; transform: scale(1.06); }
.gal-paddles { margin-top: 36px; display: flex; justify-content: flex-end; }
.gal-bar { display: block; width: 160px; height: 3px; border-radius: 2px; background: rgba(0, 0, 0, 0.1); overflow: hidden; }
.gal-bar b { display: block; height: 100%; background: rgba(0, 0, 0, 0.5); transform-origin: 0 50%; transform: scaleX(0.2); }
/* prisegta horizontali versija (įjungia JS) */
.gal.pinned .gal-sticky { position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); display: flex; flex-direction: column; justify-content: center; padding-bottom: 0; }
.gal.pinned { padding-top: 0; }
.gal.pinned .gal-viewport { overflow: visible; scroll-snap-type: none; }

@media (max-width: 1068px) { .cv-inner { grid-template-columns: 280px 1fr; } }
@media (max-width: 734px) {
  .cv-inner { display: flex; flex-direction: column-reverse; min-height: 0; padding-block: 32px 40px; }
  .cv-stage { height: 440px; width: 100%; }
  .cv-img { inset: 10px 0 30px; }
  .cv-tabs { width: 100%; }
  .cv-tab { height: 48px; font-size: 14px; padding: 0 20px 0 12px; }
  .cv-sw { width: 20px; height: 20px; }
  .cmp-card { padding: 48px 16px 40px; border-radius: 22px; }
  .cmp-cols { gap: 8px; }
  .cmp-img { height: 170px; margin-bottom: 20px; }
  .cmp-name { font-size: 19px; }
  .cmp-desc { font-size: 12px; min-height: 48px; margin-top: 8px; }
  .cmp-price { font-size: 14px; margin: 6px 0 16px; }
  .cmp-col .btn { font-size: 12px; padding: 6px 12px; }
  .cmp-rows { margin-top: 28px; padding-top: 24px; font-size: 12px; }
  .cmp-rows b { font-size: 21px; }
  .gal { padding-top: 80px; }
  .gal-sticky { padding-bottom: 80px; }
  .gal-track { gap: 12px; padding-inline: 24px; }
  .gal-viewport { scroll-padding-inline: 24px; }
  .gal-card { width: calc(100vw - 72px); height: 500px; padding: 26px 24px 0; border-radius: 22px; }
  .gal-paddles { display: none; }
}