/* Стільниці та стінові панелі */

.lf-stilnytsi-hero {
  position: relative;
  height: 772px;
  max-height: 772px;
  display: flex;
  align-items: flex-start;
  padding: 160px var(--lf-container-margin) 0;
  overflow: hidden;
}
.lf-stilnytsi-hero__slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.lf-stilnytsi-hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.lf-stilnytsi-hero__slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(44, 42, 41, 0.6) 0%, rgba(44, 42, 41, 0.2) 45%, rgba(44, 42, 41, 0) 75%);
}
.lf-stilnytsi-hero__slide--active {
  opacity: 1;
}
.lf-stilnytsi-hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50px;
  background: rgba(44, 42, 41, 0.25);
  color: var(--lf-color-white);
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.lf-stilnytsi-hero__arrow:hover {
  background: rgba(44, 42, 41, 0.5);
}
.lf-stilnytsi-hero__arrow--prev {
  left: var(--lf-space-4);
}
.lf-stilnytsi-hero__arrow--next {
  right: var(--lf-space-4);
}
.lf-stilnytsi-hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
}
.lf-stilnytsi-hero__title,
.lf-stilnytsi-hero__description,
.lf-stilnytsi-hero__row > * {
  animation: lf-hero-fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.lf-stilnytsi-hero__title {
  animation-delay: 0.1s;
}
.lf-stilnytsi-hero__description {
  animation-delay: 0.25s;
}
.lf-stilnytsi-hero__row > * {
  animation-delay: 0.4s;
}
@media (prefers-reduced-motion: reduce) {
  .lf-stilnytsi-hero__title,
  .lf-stilnytsi-hero__description,
  .lf-stilnytsi-hero__row > * {
    animation: none;
  }
}
.lf-stilnytsi-hero__title {
  max-width: 590px;
  font-family: var(--lf-font-heading);
  font-size: var(--lf-h1-size);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--lf-color-white);
  margin: 0 0 var(--lf-space-3);
}
.lf-stilnytsi-hero__description {
  max-width: 480px;
  font-family: var(--lf-font-body);
  font-size: var(--lf-body-size);
  line-height: 1.5;
  font-weight: 700;
  color: var(--lf-color-white);
  margin: 0 0 var(--lf-space-5);
}
/* The Compact page's hero reuses this exact component, but its own Figma
   frame measures the description box at 876px wide (Стільниці's is 480px)
   — same component, different content width per page. */
.page-template-page-compact-php .lf-stilnytsi-hero__description {
  max-width: 876px;
}
.lf-stilnytsi-hero__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 286px;
}
.lf-stilnytsi-hero__buttons {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--lf-space-3);
}
.lf-stilnytsi-hero__buttons .lf-btn {
  width: 302px;
  justify-content: flex-start;
}
.lf-stilnytsi-hero__stats {
  display: flex;
  gap: var(--lf-space-5);
}
.lf-stilnytsi-hero__stat {
  display: flex;
  align-items: center;
  gap: var(--lf-space-2);
}
.lf-stilnytsi-hero__stat-number {
  font-family: var(--lf-font-body);
  font-size: 64px;
  font-weight: 700;
  color: var(--lf-color-primary);
  line-height: 1;
}
.lf-stilnytsi-hero__stat-label {
  max-width: 100px;
  font-family: var(--lf-font-body);
  font-size: var(--lf-h3-size);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--lf-color-light);
  line-height: 1;
}

@media (max-width: 960px) {
  .lf-stilnytsi-hero {
    min-height: 760px;
    align-items: flex-end;
  }
  .lf-stilnytsi-hero__title {
    font-size: 36px;
    max-width: 100%;
  }
  .lf-stilnytsi-hero__description {
    max-width: 100%;
  }
  .lf-stilnytsi-hero__row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--lf-space-4);
  }
}

@media (max-width: 600px) {
  .lf-stilnytsi-hero {
    min-height: 620px;
    padding-bottom: var(--lf-space-5);
  }
  .lf-stilnytsi-hero__stats {
    flex-direction: column;
    gap: var(--lf-space-2);
  }
}

/* "3 advantages" white strip right under the hero */
.lf-stilnytsi-advantages {
  background: var(--lf-color-white);
}
.lf-stilnytsi-advantages__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--lf-space-4);
  max-width: var(--lf-container-max-padded);
  margin: 0 auto;
  padding: 77px var(--lf-container-margin);
}
.lf-stilnytsi-advantages__item {
  display: flex;
  align-items: flex-start;
  gap: var(--lf-space-3);
  transition: transform 0.3s ease;
}
.lf-stilnytsi-advantages__item:hover {
  transform: translateY(-6px);
}
.lf-stilnytsi-advantages__icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  transition: transform 0.3s ease;
}
.lf-stilnytsi-advantages__item:hover .lf-stilnytsi-advantages__icon {
  transform: scale(1.1);
}
.lf-stilnytsi-advantages__title {
  font-family: var(--lf-font-heading);
  font-size: var(--lf-h3-size);
  font-weight: 700;
  color: var(--lf-color-ink);
  margin: 0 0 var(--lf-space-1);
}
.lf-stilnytsi-advantages__description {
  font-family: var(--lf-font-body);
  font-size: var(--lf-body-s-size);
  color: var(--lf-color-ink);
  opacity: 0.7;
  line-height: 1.4;
}

@media (max-width: 960px) {
  .lf-stilnytsi-advantages__grid {
    grid-template-columns: 1fr;
  }
}

/* "Текстури LuxeForm" — text + video-play on the left, a top-aligned row
   of 5 varying-height swatches on the right (asset files are @2x exports,
   so displayed sizes below are exactly half their pixel dimensions). */
.lf-stilnytsi-textures {
  display: flex;
  align-items: flex-start;
  gap: 80px;
  max-width: var(--lf-container-max-padded);
  margin: 0 auto;
  padding: var(--lf-space-6) var(--lf-container-margin);
  background: var(--lf-color-light);
}
.lf-stilnytsi-textures__text {
  flex: 0 0 auto;
  width: 228px;
}
.lf-stilnytsi-textures__title {
  font-family: var(--lf-font-heading);
  font-size: var(--lf-h2-size);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--lf-color-ink);
  margin: 0 0 var(--lf-space-3);
}
.lf-stilnytsi-textures__description {
  font-family: var(--lf-font-body);
  font-size: var(--lf-body-s-size);
  color: var(--lf-color-ink);
  opacity: 0.75;
  line-height: 1.5;
  margin: 0 0 var(--lf-space-4);
}
.lf-stilnytsi-textures__play {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--lf-space-2);
  background: rgba(255, 250, 235, 0.05);
  border: none;
  padding: var(--lf-space-1) 0;
  cursor: pointer;
  color: var(--lf-color-ink);
  transition: background-color 0.2s ease;
}
.lf-stilnytsi-textures__play:hover {
  background: rgba(255, 250, 235, 0.15);
}
.lf-stilnytsi-textures__play-text {
  font-family: var(--lf-font-body);
  font-weight: 400;
  font-size: var(--lf-body-s-size);
  line-height: 1.05;
  color: var(--lf-color-ink);
  transition: opacity 0.2s ease;
}
.lf-stilnytsi-textures__play:hover .lf-stilnytsi-textures__play-text {
  opacity: 0.7;
}
.lf-stilnytsi-textures__play-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--lf-color-ink);
  transition: color 0.2s ease;
}
.lf-stilnytsi-textures__play:hover .lf-stilnytsi-textures__play-icon {
  color: var(--lf-color-primary);
}
.lf-stilnytsi-textures__play-icon svg,
.lf-stilnytsi-textures__play-icon img {
  width: 100%;
  height: 100%;
}
.lf-stilnytsi-textures__images {
  display: flex;
  align-items: flex-start;
  gap: var(--lf-space-4);
  flex: 1 1 auto;
  min-width: 0;
}
.lf-stilnytsi-textures__image {
  display: block;
  /* Shrinks fluidly to whatever width is actually available (never grows
     past its 172px design width) — aspect-ratio keeps each swatch's own
     proportions correct at any size instead of a fixed px height. */
  flex: 1 1 0;
  min-width: 0;
  max-width: 172px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  /* Matches .lf-reveal's own transition exactly (same property list/timing)
     so this one declaration serves both the scroll-in slide and the hover
     zoom below without the two fighting over a single `transition` value. */
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.lf-stilnytsi-textures__image:hover {
  transform: scale(1.05);
}
.lf-stilnytsi-textures__image:nth-child(1) { aspect-ratio: 171 / 383; }
.lf-stilnytsi-textures__image:nth-child(2) { aspect-ratio: 172 / 271; }
.lf-stilnytsi-textures__image:nth-child(3) { aspect-ratio: 172 / 347; }
.lf-stilnytsi-textures__image:nth-child(4) { aspect-ratio: 172 / 367; }
.lf-stilnytsi-textures__image:nth-child(5) { aspect-ratio: 171 / 383; }

@media (max-width: 960px) {
  .lf-stilnytsi-textures {
    flex-direction: column;
    align-items: flex-start;
  }
  .lf-stilnytsi-textures__text {
    width: 100%;
  }
  .lf-stilnytsi-textures__images {
    width: 100%;
  }
}

/* "Структура стільниці" — an exploded-diagram photo annotated with leader
   lines (positioned as % of the original 1280x516 Figma frame so the whole
   thing scales as one unit), a specs card, and a row of profile cards whose
   captions are already baked into each exported image. */
.lf-structure {
  position: relative;
  max-width: var(--lf-container-max-padded);
  margin: 0 auto;
  padding: var(--lf-space-6) var(--lf-container-margin);
}
.lf-structure__title {
  font-family: var(--lf-font-heading);
  font-size: var(--lf-h2-size);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--lf-color-ink);
  margin: 0 0 var(--lf-space-5);
}
.lf-structure__diagram-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1280 / 516;
}
.lf-structure__diagram {
  position: absolute;
  left: 17.6%;
  top: 0;
  width: 82.4%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.lf-structure__layers {
  position: absolute;
  inset: 0;
}
.lf-structure__layer-label {
  position: absolute;
  left: 0;
  width: 240px;
  max-width: 26%;
  display: block;
  font-family: var(--lf-font-body);
  font-size: var(--lf-body-s-size);
  line-height: 1.05;
  color: var(--lf-color-ink);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.lf-structure__layer-label.lf-reveal--visible {
  opacity: 1;
  transform: translateY(0);
}
.lf-structure__layer-line {
  position: absolute;
  left: 0;
  height: 6px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transform-origin: left center;
  transform: scaleX(0);
  opacity: 0;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
}
.lf-structure__layer-line.lf-reveal--visible {
  transform: scaleX(1);
  opacity: 1;
}
.lf-structure__specs {
  position: absolute;
  left: 76.3%;
  top: 0;
  width: 23.7%;
  height: 100%;
  background: rgba(255, 255, 255, 0.56);
  padding: var(--lf-space-5) var(--lf-space-4);
}
.lf-structure__specs-title {
  font-family: var(--lf-font-body);
  font-weight: 600;
  font-size: 16px;
  color: var(--lf-color-ink);
  margin: 0 0 var(--lf-space-4);
}
.lf-structure__specs-list {
  list-style: disc;
  padding-left: var(--lf-space-3);
  margin: 0;
}
.lf-structure__specs-list li {
  font-family: var(--lf-font-body);
  font-size: var(--lf-body-s-size);
  line-height: 1.5;
  color: var(--lf-color-ink);
  margin-bottom: var(--lf-space-2);
}
/* Profile viewer: hovering (or tapping, on touch) a thumbnail below
   replaces the annotated diagram above in place — no separate modal or
   backdrop, just this overlay crossfading over the diagram-wrap it sits
   inside (so it covers exactly that block, nothing else on the page).
   Prev/next arrows step through the same sequence while it's visible. */
.lf-structure__viewer {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: var(--lf-color-white);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.lf-structure__viewer--open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.lf-structure__viewer-slides {
  position: absolute;
  inset: 0;
}
.lf-structure__viewer-slide {
  position: absolute;
  inset: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.lf-structure__viewer-slide--active {
  opacity: 1;
}
.lf-structure__viewer-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--lf-color-ink);
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.lf-structure__viewer-arrow:hover {
  background: var(--lf-color-white);
}
.lf-structure__viewer-arrow--prev {
  left: var(--lf-space-4);
}
.lf-structure__viewer-arrow--next {
  right: var(--lf-space-4);
}
.lf-structure__viewer-counter {
  position: absolute;
  bottom: var(--lf-space-4);
  right: var(--lf-space-4);
  z-index: 2;
  color: var(--lf-color-ink);
  font-family: var(--lf-font-body);
  font-size: var(--lf-body-s-size);
}
.lf-structure__profiles {
  display: flex;
  gap: var(--lf-space-3);
  margin-top: var(--lf-space-3);
}
.lf-structure__profile {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 1;
  background-image: var(--schema);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  opacity: 0.55;
  transform: translateY(0);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
/* background-image isn't an animatable CSS property — browsers snap it
   instantly regardless of any transition, which is why this used to swap
   abruptly. The real photo instead sits on its own ::before layer and
   crossfades in via opacity (which IS animatable).
   The swap tracks real :hover only (not --active) — --active just marks
   which slide the overlay is currently on for the lift/opacity cue, and
   stays set after the mouse leaves so arrow-navigation has a "current" to
   continue from; tying the photo layer to it too would leave the last
   hovered card stuck showing its photo instead of reverting on mouseout. */
.lf-structure__profile::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--photo);
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.lf-structure__profile:hover::before {
  opacity: 1;
}
.lf-structure__profile:hover,
.lf-structure__profile--active {
  opacity: 1;
  transform: translateY(-4px);
}

@media (max-width: 960px) {
  /* The leader-line overlay only makes sense at the landscape proportions
     it was measured against — on mobile we drop it entirely: show the
     plain photo, then the layer labels as a simple vertical list (each
     still loading in one at a time via the existing stagger reveal, just
     in normal document flow instead of absolute-positioned on the image),
     then the specs panel as its own stacked card. */
  .lf-structure__diagram-wrap {
    position: relative;
    aspect-ratio: auto;
    min-height: 0;
  }
  .lf-structure__diagram {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 1280 / 516;
  }
  .lf-structure__layers {
    position: static;
    margin-top: var(--lf-space-5);
  }
  .lf-structure__layer-label {
    position: static;
    display: block;
    width: auto;
    max-width: none;
    margin-bottom: var(--lf-space-3);
  }
  .lf-structure__layer-line {
    display: none;
  }
  .lf-structure__specs {
    position: static;
    width: 100%;
    height: auto;
    background: var(--lf-color-cream);
    margin-top: var(--lf-space-5);
  }
  .lf-structure__profiles {
    flex-wrap: wrap;
  }
  .lf-structure__profile {
    flex: 1 1 calc(25% - var(--lf-space-3));
    min-width: 140px;
  }
}

/* "Структура стінової панелі" — same leader-line diagram pattern as
   .lf-structure above (title, annotated photo, specs card) but with no
   profile cards row, plus "Повний спектр меблевих рішень" directly below
   in the same section. The leader-line marker here is a plain CSS
   diamond (::after on the line itself) rather than a per-layer SVG, since
   this frame has no matching exported assets — its size stays constant
   regardless of the line's width because it's a fixed-size pseudo-element,
   not something stretched by background-size. */
.lf-structure2 {
  position: relative;
  max-width: var(--lf-container-max-padded);
  margin: 0 auto;
  padding: 0 var(--lf-container-margin) var(--lf-space-6);
}
.lf-structure2__title {
  font-family: var(--lf-font-heading);
  font-size: var(--lf-h2-size);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--lf-color-ink);
  margin: 0 0 var(--lf-space-5);
}
.lf-structure2__diagram-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1280 / 516;
}
.lf-structure2__diagram {
  position: absolute;
  left: 17.8%;
  top: 0;
  width: 82.2%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.lf-structure2__layers {
  position: absolute;
  inset: 0;
}
.lf-structure2__layer-label {
  position: absolute;
  left: 0;
  width: 240px;
  max-width: 26%;
  display: block;
  font-family: var(--lf-font-body);
  font-size: var(--lf-body-s-size);
  line-height: 1.3;
  color: var(--lf-color-ink);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.lf-structure2__layer-label.lf-reveal--visible {
  opacity: 1;
  transform: translateY(0);
}
/* Matches .lf-structure__layer-line exactly (same real exported SVG
   leader-line assets, 6px box, background-size:100% 100%) — a plain CSS
   1px line positioned by a fluid % `top` kept rendering as a doubled/
   blurred row depending on viewport, which this doesn't. */
.lf-structure2__layer-line {
  position: absolute;
  left: 0;
  height: 6px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transform-origin: left center;
  transform: scaleX(0);
  opacity: 0;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
}
.lf-structure2__layer-line.lf-reveal--visible {
  transform: scaleX(1);
  opacity: 1;
}
.lf-structure2__specs {
  position: absolute;
  left: 77%;
  top: 0;
  width: 23%;
  height: 100%;
  background: rgba(255, 255, 255, 0.56);
  padding: var(--lf-space-5) var(--lf-space-4);
}
.lf-structure2__specs-title {
  font-family: var(--lf-font-body);
  font-weight: 600;
  font-size: 16px;
  color: var(--lf-color-ink);
  margin: 0 0 var(--lf-space-4);
}
.lf-structure2__specs-list {
  list-style: disc;
  padding-left: var(--lf-space-3);
  margin: 0;
}
.lf-structure2__specs-list li {
  font-family: var(--lf-font-body);
  font-size: var(--lf-body-s-size);
  line-height: 1.5;
  color: var(--lf-color-ink);
  margin-bottom: var(--lf-space-2);
}
.lf-structure2__solutions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--lf-space-5);
  margin-top: var(--lf-space-6);
  padding-top: var(--lf-space-6);
  border-top: 1px solid rgba(44, 42, 41, 0.15);
  flex-wrap: wrap;
}
.lf-structure2__solutions-title {
  font-family: var(--lf-font-heading);
  font-size: var(--lf-h2-size);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--lf-color-ink);
  margin: 0;
}
.lf-structure2__solutions-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--lf-space-2);
}
.lf-structure2__solutions-list li {
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.lf-structure2__solutions-list li.lf-reveal--visible {
  opacity: 1;
  transform: translateX(0);
}
.lf-structure2__solutions-list a {
  display: inline-flex;
  align-items: center;
  gap: var(--lf-space-2);
  font-family: var(--lf-font-body);
  font-size: var(--lf-body-s-size);
  color: var(--lf-color-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
.lf-structure2__solutions-list a:hover {
  color: var(--lf-color-primary);
}
.lf-structure2__solutions-arrow {
  display: inline-block;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.lf-structure2__solutions-list a:hover .lf-structure2__solutions-arrow {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 960px) {
  .lf-structure2__diagram-wrap {
    position: relative;
    aspect-ratio: auto;
    min-height: 0;
  }
  .lf-structure2__diagram {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 1280 / 630;
  }
  .lf-structure2__layers {
    position: static;
    margin-top: var(--lf-space-5);
  }
  .lf-structure2__layer-label {
    position: static;
    display: block;
    width: auto;
    max-width: none;
    margin-bottom: var(--lf-space-3);
  }
  .lf-structure2__layer-line {
    display: none;
  }
  .lf-structure2__specs {
    position: static;
    width: 100%;
    height: auto;
    background: var(--lf-color-cream);
    margin-top: var(--lf-space-5);
  }
  .lf-structure2__solutions {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* LuxeForm Compact's "4 advantages" strip — same icon-left/text-column
   pattern as .lf-stilnytsi-advantages above, just 4 columns instead of 3. */
.lf-compact-advantages {
  background: var(--lf-color-white);
}
.lf-compact-advantages__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--lf-space-4);
  max-width: var(--lf-container-max-padded);
  margin: 0 auto;
  padding: 77px var(--lf-container-margin);
}
.lf-compact-advantages__item {
  display: flex;
  align-items: flex-start;
  gap: var(--lf-space-3);
  transition: transform 0.3s ease;
}
.lf-compact-advantages__item:hover {
  transform: translateY(-6px);
}
.lf-compact-advantages__icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  transition: transform 0.3s ease;
}
.lf-compact-advantages__item:hover .lf-compact-advantages__icon {
  transform: scale(1.1);
}
.lf-compact-advantages__title {
  font-family: var(--lf-font-heading);
  font-size: var(--lf-h3-size);
  font-weight: 700;
  color: var(--lf-color-ink);
  margin: 0 0 var(--lf-space-1);
}
.lf-compact-advantages__description {
  font-family: var(--lf-font-body);
  font-size: var(--lf-body-s-size);
  color: var(--lf-color-ink);
  opacity: 0.7;
  line-height: 1.4;
}
@media (max-width: 960px) {
  .lf-compact-advantages__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .lf-compact-advantages__grid {
    grid-template-columns: 1fr;
  }
}

/* LuxeForm Compact "Текстури" — same text-left/image-row-right layout as
   .lf-stilnytsi-textures, confirmed against the Figma reference: 3 equal,
   uncaptioned photos (no staggered heights, no overlay/label). */
.lf-compact-textures {
  /* Full-bleed pale band (Figma: rgb(245,247,244), matches --lf-color-light
     exactly) behind the centered content — confirmed against the
     reference, unlike the plain-white page background around it. */
  background: var(--lf-color-light);
}
.lf-compact-textures__inner {
  display: flex;
  align-items: flex-start;
  gap: 80px;
  max-width: var(--lf-container-max-padded);
  margin: 0 auto;
  padding: var(--lf-space-6) var(--lf-container-margin);
}
.lf-compact-textures__text {
  flex: 0 0 auto;
  width: 228px;
}
.lf-compact-textures__title {
  font-family: var(--lf-font-heading);
  font-size: var(--lf-h2-size);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--lf-color-ink);
  margin: 0 0 var(--lf-space-3);
}
.lf-compact-textures__description {
  font-family: var(--lf-font-body);
  font-size: var(--lf-body-s-size);
  color: var(--lf-color-ink);
  opacity: 0.7;
  line-height: 1.4;
}
.lf-compact-textures__images {
  display: flex;
  align-items: flex-start;
  gap: var(--lf-space-4);
  flex: 1 1 auto;
  min-width: 0;
}
.lf-compact-textures__image {
  display: block;
  flex: 1 1 0;
  min-width: 0;
  max-width: 227px;
  background-size: cover;
  background-position: center;
  transition: transform 0.4s ease;
}
/* Same width, different heights (top-aligned) — measured off the Figma
   reference, not uniform squares. */
.lf-compact-textures__image:nth-child(1) { aspect-ratio: 226 / 254; }
.lf-compact-textures__image:nth-child(2) { aspect-ratio: 227 / 286; }
.lf-compact-textures__image:nth-child(3) { aspect-ratio: 226 / 274; }
.lf-compact-textures__image:hover {
  transform: scale(1.05);
}
@media (max-width: 960px) {
  .lf-compact-textures__inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .lf-compact-textures__text {
    width: 100%;
  }
  .lf-compact-textures__images {
    width: 100%;
  }
}

/* LuxeForm Compact "Структура" — same exploded-diagram pattern as
   .lf-structure2 (5 layers here instead of 3), plus "Повний спектр
   меблевих рішень" directly below, in the same section. Measured off the
   Figma dev-mode frame (1280x516, same box as the other structure
   sections). */
.lf-compact-structure {
  position: relative;
  max-width: var(--lf-container-max-padded);
  margin: 0 auto;
  /* Unlike .lf-structure2 (which sits flush under .lf-structure — same
     white background, no extra top gap needed), this section follows the
     pale "Текстури" band, so it needs its own top breathing room instead
     of relying on the previous section's own bottom padding. */
  padding: var(--lf-space-5) var(--lf-container-margin) var(--lf-space-6);
}
.lf-compact-structure__title {
  font-family: var(--lf-font-heading);
  font-size: var(--lf-h2-size);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--lf-color-ink);
  /* Figma frame: the title sits almost flush against the diagram below it
     (~8px gap), much tighter than the space-5 the other structure
     sections use. */
  margin: 0 0 var(--lf-space-2);
}
.lf-compact-structure__diagram-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1280 / 516;
  /* Labels inside are positioned by top% of this box, but their own text
     height is fixed in px — below the reference 1280px-wide design, the
     box (and thus the vertical room each label gets) shrinks via
     aspect-ratio while the text doesn't, so labels start overlapping each
     other's leader lines. Floor the box at its reference height instead
     (the diagram photo just gets a bit more cropped via background-size:
     cover, which is harmless) so there's always enough room. */
  min-height: 516px;
}
.lf-compact-structure__diagram {
  position: absolute;
  left: 17.8%;
  top: 0;
  width: 82.2%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
/* Between the mobile breakpoint and the container's own max-width, the
   wrap's width shrinks with the viewport but its height stays floored at
   516px (see .lf-compact-structure__diagram-wrap) to keep the labels from
   overlapping their lines — leaving this box noticeably taller than its
   actual aspect ratio. "cover" was zooming/cropping the photo hard to
   fill that now-distorted box; "contain" always shows the whole photo,
   undistorted, just centered with a little breathing room instead. */
@media (max-width: 1439px) and (min-width: 961px) {
  .lf-compact-structure__diagram {
    background-size: contain;
    /* Vertically centering (the base rule's "center") leaves an empty gap
       above the photo whenever the box is taller than the contained
       image — anchor to the top instead so the slab sits flush under the
       labels' leader lines with no dead space above it. */
    background-position: top center;
  }
}
.lf-compact-structure__layers {
  position: absolute;
  inset: 0;
}
.lf-compact-structure__layer-label {
  position: absolute;
  left: 0;
  width: 240px;
  max-width: 26%;
  display: block;
  font-family: var(--lf-font-body);
  font-size: var(--lf-body-s-size);
  line-height: 1.3;
  color: var(--lf-color-ink);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.lf-compact-structure__layer-label.lf-reveal--visible {
  opacity: 1;
  transform: translateY(0);
}
.lf-compact-structure__layer-line {
  position: absolute;
  left: 0;
  height: 6px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transform-origin: left center;
  transform: scaleX(0);
  opacity: 0;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
}
/* LuxeForm Acryl's own labels were authored in Figma against a ~262px
   column (vs. Compact's 240px) — at 240px here they wrap an extra line,
   growing tall enough that the leader line (positioned by Figma's own
   measured %, assuming the shorter Figma-wrapped height) cuts through the
   last line of text instead of sitting below it. */
.lf-compact-structure--wide-labels .lf-compact-structure__layer-label {
  width: 262px;
  /* The shared rule's max-width:26% is relative to the wrap's own (fluid)
     width — below ~1300px viewport that resolves under 262px and silently
     re-clips the column, undoing the wide-labels fix and re-triggering
     the wrap-induced text/line overlap. Fixed px here, no % involved. */
  max-width: 262px;
}
/* Figma's "Структура" frame is 516px tall, but that includes the title
   ("СТРУКТУРА") sitting in its own first 43px — the diagram photo itself
   (y=2004, 473px tall) exactly fills the remaining 473px below the
   title. In this markup, the title is a separate sibling BEFORE
   .diagram-wrap (with its own margin), so .diagram-wrap itself only ever
   represents that remaining 473px region, not the full 516. Every % used
   for the diagram/labels/lines below is measured against that 473
   reference — using the wrap's shared 516-based aspect-ratio/min-height
   here would re-introduce exactly the offset this fixes. */
.lf-compact-structure--wide-labels .lf-compact-structure__diagram-wrap {
  aspect-ratio: 1280 / 473;
  min-height: 473px;
  /* Caps the whole composition at roughly the photo's own native size
     (1057×473) instead of stretching to the full 1280px content width —
     per direct feedback, the photo was rendering noticeably larger than
     the Figma reference. */
  max-width: 1100px;
}
/* Direct visual correction per feedback on the live render, for Acryl's
   diagram photo specifically: just the photo itself needs to sit lower —
   NOT the whole diagram-wrap block (that also carries the labels/lines/
   specs, which should stay put). Shrinking the photo's own height and
   pushing it down with top: keeps the wrap (and everything positioned by
   % against it) exactly where it was. Scoped to its own modifier (not the
   shared --wide-labels one) because this corrects a quirk specific to
   Acryl's source PNG — Crystaline's own diagram export has no such
   padding and must NOT be cropped/repositioned the same way. */
.lf-compact-structure--acryl-diagram-fix .lf-compact-structure__diagram {
  top: 18%;
  height: 82%;
}
/* Crystaline's own diagram photo: pushed down per direct visual feedback
   (paired with the -10 nudge on $crystaline_layer_positions, which moves
   the labels/lines up) — unlike Acryl's fix above, this isn't
   compensating for padding in the source file, just a requested visual
   adjustment. */
.lf-compact-structure--crystaline-diagram-fix .lf-compact-structure__diagram {
  top: 15%;
  height: 85%;
}
.lf-compact-structure--idea-diagram-fix .lf-compact-structure__diagram {
  top: 15%;
  height: 85%;
}
.lf-compact-structure--compact-diagram-fix .lf-compact-structure__diagram {
  top: 15%;
  height: 85%;
}
.lf-compact-structure__layer-line.lf-reveal--visible {
  transform: scaleX(1);
  opacity: 1;
}
.lf-compact-structure__specs {
  position: absolute;
  left: 77%;
  top: 0;
  width: 23%;
  height: 100%;
  background: rgba(255, 255, 255, 0.56);
  padding: var(--lf-space-5) var(--lf-space-4);
}
.lf-compact-structure__specs-title {
  font-family: var(--lf-font-body);
  font-weight: 600;
  font-size: 16px;
  color: var(--lf-color-ink);
  margin: 0 0 var(--lf-space-4);
}
.lf-compact-structure__specs-list {
  list-style: disc;
  padding-left: var(--lf-space-3);
  margin: 0;
}
.lf-compact-structure__specs-list li {
  font-family: var(--lf-font-body);
  font-size: var(--lf-body-s-size);
  line-height: 1.5;
  color: var(--lf-color-ink);
  margin-bottom: var(--lf-space-2);
}
.lf-compact-structure__solutions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--lf-space-5);
  margin-top: var(--lf-space-6);
  padding-top: var(--lf-space-6);
  border-top: 1px solid rgba(44, 42, 41, 0.15);
  flex-wrap: wrap;
}
.lf-compact-structure__solutions-title {
  font-family: var(--lf-font-heading);
  font-size: var(--lf-h2-size);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--lf-color-ink);
  margin: 0;
}
.lf-compact-structure__solutions-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--lf-space-2);
}
.lf-compact-structure__solutions-list li {
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.lf-compact-structure__solutions-list li.lf-reveal--visible {
  opacity: 1;
  transform: translateX(0);
}
.lf-compact-structure__solutions-list a {
  display: inline-flex;
  align-items: center;
  gap: var(--lf-space-2);
  font-family: var(--lf-font-body);
  font-size: var(--lf-body-s-size);
  color: var(--lf-color-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
.lf-compact-structure__solutions-list a:hover {
  color: var(--lf-color-primary);
}
.lf-compact-structure__solutions-arrow {
  display: inline-block;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.lf-compact-structure__solutions-list a:hover .lf-compact-structure__solutions-arrow {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 960px) {
  .lf-compact-structure__diagram-wrap {
    position: relative;
    aspect-ratio: auto;
    min-height: 0;
  }
  .lf-compact-structure__diagram {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 1280 / 630;
  }
  .lf-compact-structure__layers {
    position: static;
    margin-top: var(--lf-space-5);
  }
  .lf-compact-structure__layer-label {
    position: static;
    display: block;
    width: auto;
    max-width: none;
    margin-bottom: var(--lf-space-3);
  }
  .lf-compact-structure__layer-line {
    display: none;
  }
  .lf-compact-structure__specs {
    position: static;
    width: 100%;
    height: auto;
    background: var(--lf-color-cream);
    margin-top: var(--lf-space-5);
  }
  .lf-compact-structure__solutions {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Shared tab bar at the top of the LuxeForm Acryl/Crystaline/idea LuxeForm
   pages — each tab is a real link to that variant's own page (not an
   in-page panel switch). Active tab: full color + red underline;
   inactive: dimmed. A shared 1px divider runs under the whole row, with
   the active item's own border sitting on top of it. */
.lf-product-tabs {
  display: flex;
  justify-content: space-between;
  gap: var(--lf-space-6);
  max-width: var(--lf-container-max-padded);
  /* margin-bottom (not more padding before the border) — the divider
     stays right under the tab labels; this is the gap between the
     divider and whatever section follows (e.g. the hero photo). */
  margin: 0 auto var(--lf-space-5);
  padding: var(--lf-space-4) var(--lf-container-margin) 0;
  border-bottom: 1px solid rgba(44, 42, 41, 0.12);
  flex-wrap: wrap;
}
.lf-product-tabs__item {
  display: flex;
  flex-direction: column;
  gap: var(--lf-space-1);
  padding-bottom: var(--lf-space-3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  opacity: 0.4;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}
.lf-product-tabs__item:hover {
  opacity: 0.7;
}
.lf-product-tabs__item--active {
  opacity: 1;
  border-bottom-color: var(--lf-color-primary);
}
.lf-product-tabs__item--active:hover {
  opacity: 1;
}
.lf-product-tabs__title {
  font-family: var(--lf-font-heading);
  font-size: var(--lf-h3-size);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--lf-color-ink);
}
.lf-product-tabs__tagline {
  font-family: var(--lf-font-body);
  font-size: var(--lf-body-s-size);
  color: var(--lf-color-ink);
}

/* LuxeForm Acryl "Типи поверхонь" — text-left/image-row-right, same
   pattern as .lf-compact-textures. Measured off the Figma dev-mode frame:
   text column fixed 342px, list items 24px apart, 12px between an item's
   title/description, 40px before the links (small gap between them);
   image row 3 photos at 268px wide, varying heights (429/450/386),
   top-aligned, 80px gap from the text column. Section's pale background
   band (Figma "Rectangle 62": y 1246-1896, content starting at y 1354) is
   108px above the title and 101px below the (tallest) image column —
   noticeably more than the other sections' standard --lf-space-6 padding.
   Bullet is inline before the title text, flush with the title/image
   column's left edge (not an indented ::before dot) — confirmed against
   image #215, where the bullet, title and description all share the same
   left margin. */
.lf-acryl-surfaces {
  background: var(--lf-color-light);
}
.lf-acryl-surfaces__inner {
  display: flex;
  align-items: flex-start;
  gap: 80px;
  max-width: 1600px;
  margin: 0 auto;
  padding: 108px var(--lf-container-margin) 101px;
}
.lf-acryl-surfaces__text {
  flex: 0 0 auto;
  width: 270px;
}
.lf-acryl-surfaces__title {
  font-family: var(--lf-font-heading);
  /* Smaller than the usual --lf-h2-size (32px) — at the 270px text-column
     width, 32px forces a 2-line wrap; 26px fits on one line. */
  font-size: 26px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--lf-color-ink);
  /* 31px, not the title's own y-delta (1426-1354=72) — that 72 double-counts
     the title's own 41px line height, which was the bug: it rendered as a
     much bigger gap than Figma's actual title-bottom-to-list-top space. */
  margin: 0 0 31px;
}
.lf-acryl-surfaces__list {
  list-style: none;
  margin: 0 0 var(--lf-space-5);
  padding: 0;
}
.lf-acryl-surfaces__item + .lf-acryl-surfaces__item {
  margin-top: var(--lf-space-4);
}
.lf-acryl-surfaces__dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: var(--lf-space-2);
  border-radius: 50%;
  background: rgba(44, 42, 41, 0.4);
  vertical-align: middle;
}
.lf-acryl-surfaces__item-title {
  display: flex;
  align-items: center;
  font-family: var(--lf-font-body);
  font-size: var(--lf-body-s-size);
  font-weight: 500;
  color: var(--lf-color-ink);
  margin: 0 0 12px;
}
.lf-acryl-surfaces__item-text {
  font-family: var(--lf-font-body);
  font-size: var(--lf-body-xs-size);
  color: var(--lf-color-ink);
  opacity: 0.6;
  /* Tighter than the usual 1.4 body line-height — Figma's 2-line wrap at
     this width measures ~21px total (≈1.05), noticeably more compact
     than what 1.4 renders. */
  line-height: 1.2;
  margin: 0;
}
.lf-acryl-surfaces__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--lf-space-2);
}
.lf-acryl-surfaces__link {
  display: flex;
  align-items: center;
  gap: var(--lf-space-2);
  color: var(--lf-color-ink);
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.lf-acryl-surfaces__link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--lf-color-ink);
  transition: color 0.2s ease;
}
.lf-acryl-surfaces__link-icon svg {
  width: 100%;
  height: 100%;
}
.lf-acryl-surfaces__link-text {
  font-family: var(--lf-font-body);
  font-size: var(--lf-body-s-size);
  color: var(--lf-color-ink);
  transition: opacity 0.2s ease;
}
.lf-acryl-surfaces__link:hover .lf-acryl-surfaces__link-icon {
  border-color: var(--lf-color-primary);
  color: var(--lf-color-primary);
}
.lf-acryl-surfaces__link:hover .lf-acryl-surfaces__link-text {
  opacity: 0.7;
}
/* Bigger photos (340px, up from 268px) no longer all fit in the row at
   once (especially idea's 4) — same auto-scrolling marquee pattern as
   .lf-marquee (quicklinks-marquee.php) instead of a manual scrollbar: the
   track's own content is duplicated once by the PHP side so the
   translateX(-50%) loop is seamless, paused on hover so a photo can
   actually be looked at. */
.lf-acryl-surfaces__images {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.lf-acryl-surfaces__images-track {
  display: flex;
  align-items: flex-start;
  gap: var(--lf-space-4);
  width: max-content;
  animation: lf-acryl-surfaces-scroll 30s linear infinite;
}
.lf-acryl-surfaces__images:hover .lf-acryl-surfaces__images-track,
.lf-acryl-surfaces__images:focus-within .lf-acryl-surfaces__images-track {
  animation-play-state: paused;
}
@keyframes lf-acryl-surfaces-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.lf-acryl-surfaces__image {
  display: block;
  flex: 0 0 auto;
  width: 340px;
  border-radius: 4px;
  background-size: cover;
  background-position: center;
  transition: transform 0.4s ease;
}
/* :nth-child(Xn+Y) instead of plain :nth-child(Y) — the track's own
   images are duplicated once (for the seamless marquee loop), so each
   ratio must also repeat onto the duplicate copy, not just the original
   position. Acryl's own 3-photo period: */
.lf-acryl-surfaces__image:nth-child(3n+1) { aspect-ratio: 340 / 544; }
.lf-acryl-surfaces__image:nth-child(3n+2) { aspect-ratio: 340 / 571; }
.lf-acryl-surfaces__image:nth-child(3n+3) { aspect-ratio: 340 / 490; }
/* Crystaline only has 2 photos (Figma node 238:836: 414x450 then
   414x386 — the opposite ratio of Acryl's, where image 2 is the TALLER
   one) — the shared nth-child rules above assume Acryl's own 3-photo
   proportions and would make Crystaline's 2nd photo taller instead of
   shorter. 2-photo period: */
.lf-acryl-surfaces--crystaline .lf-acryl-surfaces__image:nth-child(2n+1) { aspect-ratio: 340 / 369; }
.lf-acryl-surfaces--crystaline .lf-acryl-surfaces__image:nth-child(2n) { aspect-ratio: 340 / 317; }
/* idea LuxeForm has its own 4 photos (Figma node 278:451: 271x386,
   271x348, 271x386, 271x371 — scaled to the shared 340px column width).
   4-photo period: */
.lf-acryl-surfaces--idea .lf-acryl-surfaces__image:nth-child(4n+1) { aspect-ratio: 340 / 484; }
.lf-acryl-surfaces--idea .lf-acryl-surfaces__image:nth-child(4n+2) { aspect-ratio: 340 / 436; }
.lf-acryl-surfaces--idea .lf-acryl-surfaces__image:nth-child(4n+3) { aspect-ratio: 340 / 484; }
.lf-acryl-surfaces--idea .lf-acryl-surfaces__image:nth-child(4n) { aspect-ratio: 340 / 466; }
.lf-acryl-surfaces__image:hover {
  transform: scale(1.03);
}
@media (max-width: 960px) {
  .lf-acryl-surfaces__inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .lf-acryl-surfaces__text {
    width: 100%;
  }
  .lf-acryl-surfaces__images {
    width: 100%;
  }
  .lf-product-tabs {
    gap: var(--lf-space-4);
  }
}