/* Lookbook page */
.lb-hero{padding:48px 0 28px}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:16px; align-items:center}
.hero-text h2{color:#fff; margin:.2rem 0}
.hero-text .lead{font-size:1.08rem; color:#e6ebf3}
.hero-bullets{margin:.8rem 0 0 1rem}
.hero-bullets li{color:#e9edf6; margin:.25rem 0}

/* floating stage */
.hero-stage{position:relative; aspect-ratio: 1.2/1; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-elev); overflow:hidden}
.chip{
  position:absolute;
  left:var(--x); top:var(--y);
  width:min(48%, 340px);
  transform: translate(-50%, -50%) scale(var(--z,1));
  border:1px solid #2a2d33; border-radius:14px; overflow:hidden;
  box-shadow:0 18px 38px rgba(0,0,0,.35);
  animation: bob 7s ease-in-out infinite;
}
.chip:nth-child(2){animation-duration:8s}
.chip:nth-child(3){animation-duration:9s}
.chip:nth-child(4){animation-duration:7.5s}
.chip:nth-child(5){animation-duration:8.5s}
.chip figcaption{padding:6px 8px; background:#14161b; color:#e9edf6; border-top:1px solid #2a2d33}
@keyframes bob{ 0%,100%{transform: translate(-50%, -50%) scale(var(--z,1)) translateY(-6px)} 50%{transform: translate(-50%, -50%) scale(var(--z,1)) translateY(6px)} }

/* 2) vignettes grid */
.lb-vignettes{padding:42px 0}
.vig-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px}
.vig{
  position:relative; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#0f1115;
  transform:translateY(8px); opacity:.85; transition:transform .35s ease, opacity .35s ease, box-shadow .35s ease;
}
.vig::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(110deg, rgba(211,165,92,.18), transparent 35%, transparent 65%, rgba(211,165,92,.18));
  mix-blend-mode: overlay; opacity:0; transition:opacity .25s ease;
}
.vig:is(:hover,:focus-visible){box-shadow:0 18px 36px rgba(0,0,0,.35)}
.vig:is(:hover,:focus-visible)::after{opacity:1}
.vig figcaption{position:absolute; left:8px; bottom:8px; right:8px; padding:.35rem .5rem; border-radius:10px;
  background:rgba(16,18,22,.6); color:#e9edf6; backdrop-filter: blur(4px); border:1px solid #2a2d33}
.vig.is-on{transform:none; opacity:1}

.lb-pairings{padding:42px 0}
.rail-wrap{display:grid; gap:10px}
.rail{
  display:grid; grid-auto-flow:column; grid-auto-columns: minmax(72%, 360px);
  gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:thin; padding-bottom:6px;
}
.pair{
  border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-elev); scroll-snap-align:start;
  padding:10px; display:grid; gap:8px; min-height: 100%;
}
.pair h3{color:#fff; margin:.2rem 0}
.pair p{color:#e9edf6}
.rail-progress{height:8px; background:#1a1d23; border-radius:999px; overflow:hidden}
.rail-progress span{display:block; height:100%; width:0%; background:linear-gradient(90deg, var(--accent), var(--accent-2)); transition:width .25s ease}

/* common image rule: <=350px */
.lb-hero img,
.lb-vignettes img,
.lb-pairings img{width:100%; height:auto; max-width:350px; display:block;}

/* responsive */
@media (max-width:980px){ .hero-grid{grid-template-columns:1fr} .vig-grid{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width:560px){ .vig-grid{grid-template-columns:1fr} .rail{grid-auto-columns: 88%} }
/* === Lookbook Hero: static layout, no overlap === */
.lb-hero .hero-stage{
  /* вместо абсолютов — сетка */
  display:grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap:12px;
  align-items:start;
  padding:12px;
}

.lb-hero .chip{
  position:relative;    /* больше не absolute */
  left:auto; top:auto;
  width:auto; max-width:350px;
  transform:none !important;   /* гасим параллакс-трансформы из JS */
  animation:none !important;   /* гасим bob-анимацию */
  box-shadow:0 12px 24px rgba(0,0,0,.28);
}

.lb-hero .chip img{ width:100%; height:auto; display:block; }

@media (max-width:1100px){
  .lb-hero .hero-stage{ grid-template-columns: repeat(2, minmax(160px,1fr)); }
}
@media (max-width:560px){
  .lb-hero .hero-stage{ grid-template-columns: 1fr; }
}
/* --- FIX: hero-stage в статичном режиме без наложений --- */
.lb-hero .hero-stage{
  /* переписываем старые значения из плавающей версии */
  aspect-ratio:auto;         /* было 1.2/1 */
  height:auto;
  overflow:visible;          /* было hidden */
  display:grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap:12px;
  align-items:start;
  padding:12px;
}

/* карточки — обычный поток, без абсолютов и анимаций */
.lb-hero .chip{
  position:relative !important;
  left:auto !important; top:auto !important;
  width:auto; max-width:350px;
  transform:none !important;
  animation:none !important;
  box-shadow:0 12px 24px rgba(0,0,0,.28);
}
.lb-hero .chip img{ width:100%; height:auto; display:block; }

@media (max-width:1100px){
  .lb-hero .hero-stage{ grid-template-columns: repeat(2, minmax(180px,1fr)); }
}
@media (max-width:560px){
  .lb-hero .hero-stage{ grid-template-columns: 1fr; }
}
/* --- Vignettes: no masks, no overlap, static caption --- */
.lb-vignettes .vig{
  display:flex; flex-direction:column;
  overflow:hidden;            /* держим скругления */
}

.lb-vignettes .vig img{
  display:block;
  width:100%;
  max-width:350px;            /* ваше ограничение */
  aspect-ratio: 4 / 3;        /* единая высота карточек */
  object-fit: cover;
  border-radius:12px;
  /* сбиваем возможные унаследованные эффекты */
  -webkit-mask: none !important;
          mask: none !important;
  filter: none !important;
}

.lb-vignettes .vig figcaption{
  position:static !important; /* не поверх фото */
  margin-top:6px;
  padding:0;
  background:transparent;
  border:none;
  color:#e9edf6;
}

/* лёгкое появление при скролле */
.lb-vignettes .vig{ transform:none; opacity:1; }          /* базово */
.lb-vignettes [data-vignettes] .vig{ opacity:.0; transform:translateY(10px); }
.lb-vignettes .vig.is-on{ opacity:1; transform:none; transition:.35s ease; }

/* сетка как была; адаптив на всякий */
@media (max-width:980px){ .vig-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:560px){ .vig-grid{ grid-template-columns:1fr; } }
/* ===== 4) Before/After ===== */
.lb-beforeafter{padding:42px 0}
.ba-grid{display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px}
.ba-fig{position:relative; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-elev); padding:10px; display:grid; gap:8px}
.ba-img{width:100%; max-width:350px; height:auto; display:block; border-radius:12px}
.ba-fig{--split:50%}
.ba-fig .after{position:absolute; inset:10px; width:auto; height:auto; max-width:none; /* over before */ clip-path: inset(0 calc(100% - var(--split)) 0 0 round 12px)}
.ba-fig .before{position:relative; z-index:0}
.ba-fig figcaption{display:flex; align-items:center; justify-content:space-between; gap:10px; color:#e9edf6}
.ba-meter{font-variant-numeric:tabular-nums}
.ba-range{width:100%}
@media (max-width:980px){ .ba-grid{grid-template-columns:1fr} }

/* ===== 5) Architect Notes ===== */
.lb-notes{padding:42px 0}
.notes-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:16px; align-items:start}
.notes-text h2{color:#fff}
.notes-text p, .notes-list li{color:#e9edf6}
.notes-list{margin:.6rem 0 0 1rem}
.notes-aside{display:grid; gap:10px}
.note-fig{border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-elev); padding:10px}
.note-fig img{width:100%; max-width:350px; height:auto; display:block; border-radius:12px}
.note-fig figcaption{margin-top:6px; color:#e9edf6}
.note-quote{
  margin:0; padding:10px 12px; border:1px dashed #2a2d33; border-radius:12px; color:#e6ebf3;
  background:linear-gradient(90deg, rgba(211,165,92,.12), transparent);
  animation: quoteSweep 3s ease-in-out infinite alternate;
}
@keyframes quoteSweep{ 0%{background-position:0%} 100%{background-position:120%} }
@media (max-width:980px){ .notes-grid{grid-template-columns:1fr} }

/* ===== 6) Day/Night ===== */
.lb-light{padding:42px 0}
.light-ctrl{display:flex; align-items:center; gap:10px; color:#e9edf6; margin-bottom:8px}
.light-labels{display:flex; gap:8px; margin-left:auto; color:#9aa3b2}
.light-grid{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px}
.light-card{border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-elev); padding:10px; display:grid; gap:8px}
.stack{position:relative}
.stack img{width:100%; max-width:350px; height:auto; display:block; border-radius:12px}
.stack .night{position:absolute; inset:0; opacity:0; transition:opacity .25s ease}
.lb-light{--night:0}            /* 0..1 — задаётся JS */
.lb-light .stack .night{ opacity: var(--night) }
@media (max-width:980px){ .light-grid{grid-template-columns:1fr} }
/* ===== 7) Finish Sampler (tabs) ===== */
.lb-finishes{padding:42px 0}
.fin-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:16px; align-items:start}
.fin-tabs{display:grid; gap:8px}
.fin-tab{
  text-align:left; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:10px;
  padding:.6rem .75rem; border:1px solid #2a2d33; border-radius:12px; background:#101216; color:#e9edf6;
  cursor:pointer; transition:border-color .2s, box-shadow .2s, background .2s;
}
.fin-tab small{color:#9aa3b2; grid-column:2}
.fin-tab .fin-dot{width:14px; height:14px; border-radius:50%}
.fin-tab .fin-dot.brass{ background: linear-gradient(#c99b54, #8a6b3a) }
.fin-tab .fin-dot.black{ background: #20242b }
.fin-tab .fin-dot.nickel{ background: linear-gradient(#c3c7cf, #9aa3b2) }
.fin-tab:is(:hover,.is-active){
  border-color: color-mix(in srgb, var(--accent) 55%, #000 45%);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}

.fin-panels{display:grid; gap:12px}
.fin-panel{
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--bg-elev); padding:10px; display:grid; gap:10px;
}
.fin-figure img{width:100%; max-width:350px; height:auto; display:block; border-radius:12px}
.fin-figure figcaption{color:#e9edf6; margin-top:6px}

.fin-metrics{display:grid; gap:8px}
.metric{display:grid; grid-template-columns:120px 1fr; gap:10px; align-items:center}
.metric span{color:#e9edf6}
.meter{height:10px; border-radius:999px; background:#1a1d23; overflow:hidden; border:1px solid #2a2d33}
.meter > span{display:block; height:100%; width:0%; background:linear-gradient(90deg, var(--accent), var(--accent-2)); transition:width .5s ease}

@media (max-width:980px){
  .fin-grid{grid-template-columns:1fr}
  .metric{grid-template-columns:100px 1fr}
}

/* ===== 8) Motion Study ===== */
.lb-motion{padding:42px 0}
.motion-grid{display:grid; grid-template-columns:.7fr 1.3fr; gap:16px; align-items:start}
.dial-wrap{border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-elev); padding:12px; display:grid; gap:10px; justify-items:center}
.dial{
  --open: 0turn; /* JS ставит долю оборота */
  width:160px; height:160px; border-radius:50%;
  background:
    conic-gradient(from -90deg, var(--accent) 0 var(--open), #1a1d23 var(--open) 1turn);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 56%, #000 57%);
          mask: radial-gradient(circle at 50% 50%, transparent 56%, #000 57%);
  position:relative;
}
.dial span{position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-weight:800; font-size:22px}
.motion-range{width:100%}
.motion-stack{border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-elev); padding:10px; display:grid; gap:8px; position:relative}
.motion-stack .m{width:100%; max-width:350px; height:auto; display:block; border-radius:12px; position:absolute; inset:10px; opacity:0; transition:opacity .25s ease}
.motion-stack .m0{z-index:1} .motion-stack .m1{z-index:2} .motion-stack .m2{z-index:3}
.motion-stack.state-0 .m0{opacity:1; position:relative; inset:auto}
.motion-stack.state-1 .m1{opacity:1; position:relative; inset:auto}
.motion-stack.state-2 .m2{opacity:1; position:relative; inset:auto}

/* ===== 9) Stories ===== */
.lb-stories{padding:42px 0}
.stories-grid{display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:16px}
.story{border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-elev); padding:12px; display:grid; gap:8px; transform:translateY(8px); opacity:.85; transition:transform .35s ease, opacity .35s ease, box-shadow .35s ease}
.story img{width:100%; max-width:350px; height:auto; display:block; border-radius:12px}
.story h3{color:#fff}
.story p{color:#e9edf6}
.story.is-on{transform:none; opacity:1; box-shadow:0 12px 24px rgba(0,0,0,.25)}

@media (max-width:980px){
  .materials-grid{grid-template-columns:1fr}
  .motion-grid{grid-template-columns:1fr}
  .stories-grid{grid-template-columns:1fr}
}
/* Material Wall — выбор сэмпла кликом */
.swatch.is-selected{
  outline:2px solid color-mix(in srgb, var(--accent) 75%, #000 25%);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}
.slot:focus{
  outline:none;
  border-color: color-mix(in srgb, var(--accent) 65%, #000 35%);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
  cursor:pointer;
}
/* ===== 10) Spec Pack ===== */
.lb-spec{padding:42px 0}
.spec-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:16px; align-items:start}
.spec-list{display:grid; gap:8px; padding:0; margin:0}
.spec-list li{list-style:none}
.spec-list input{appearance:none; width:18px; height:18px; border:1px solid #2a2d33; border-radius:6px; background:#0f1115; margin-right:8px; position:relative; top:2px}
.spec-list input:checked{ background:linear-gradient(90deg, var(--accent), var(--accent-2)); border-color:transparent }
.spec-list label{display:flex; align-items:flex-start; gap:8px; color:#e9edf6}

.spec-side{display:grid; gap:8px}
.spec-progress{height:8px; background:#1a1d23; border:1px solid #2a2d33; border-radius:999px; overflow:hidden}
.spec-progress span{display:block; height:100%; width:0%; background:linear-gradient(90deg, var(--accent), var(--accent-2)); transition:width .25s ease}
.note{border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-elev); padding:10px; display:grid; gap:8px}
.note-title{color:#fff; font-weight:700; margin:0}
.note-area{width:100%; min-height:140px; background:#0f1115; color:#e9edf6; border:1px solid #2a2d33; border-radius:10px; padding:.6rem}
.note-actions{display:flex; gap:10px; align-items:center}
.btn{padding:.5rem .75rem; border:1px solid #2a2d33; background:#101216; color:#e9edf6; border-radius:10px; cursor:pointer}
.btn[disabled]{opacity:.5; cursor:not-allowed}
.btn--ghost{background:#0f1115}

@media (max-width:980px){ .spec-grid{grid-template-columns:1fr} }

/* ===== 11) Touch Path ===== */
.lb-path{padding:42px 0}
.path-wrap{border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-elev); padding:12px; display:grid; gap:12px}
.path-line{display:grid; grid-template-columns:repeat(6, 1fr); align-items:center; gap:10px; margin:0; padding:0; position:relative}
.path-line::before{
  content:""; position:absolute; left:0; right:0; top:50%; height:4px; transform:translateY(-50%);
  background:repeating-linear-gradient(90deg, #1a1d23 0 16px, #2a2d33 16px 20px);
  border-radius:999px;
}
.node{list-style:none; text-align:center; color:#9aa3b2; position:relative}
.node::after{
  content:""; position:absolute; left:50%; top:50%; width:14px; height:14px; transform:translate(-50%, -50%);
  background:#1a1d23; border:2px solid #2a2d33; border-radius:50%;
  box-shadow:0 0 0 0 rgba(211,165,92,0); transition:box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
.node.is-on{ color:#fff }
.node.is-on::after{
  background: color-mix(in srgb, var(--accent) 55%, #000 45%);
  border-color: transparent;
  box-shadow:0 0 0 6px color-mix(in srgb, var(--accent) 20%, transparent);
}
.path-controls{display:flex; gap:10px}

/* ===== 12) Glare Simulator ===== */
.lb-glare{padding:42px 0}
.glare-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:16px; align-items:center}
.glare-panel{border:1px solid var(--line); border-radius:var(--radius); background:#0f1115; padding:10px}
.plane{
  --ang: 30;     /* deg */
  --int: .55;    /* 0–1 */
  aspect-ratio: 4 / 3; border-radius:12px;
  background:
    linear-gradient(calc(var(--ang) * 1deg),
      color-mix(in srgb, #ffffff calc(var(--int)*60%), transparent) 0%,
      transparent 45% 55%,
      color-mix(in srgb, #ffffff calc(var(--int)*60%), transparent) 100%),
    #0f1115;
  outline:1px solid #2a2d33;
  box-shadow: inset 0 0 0 1px #12161a, 0 18px 36px rgba(0,0,0,.35);
}
.glare-controls{display:grid; gap:10px}
.glr-range{width:100%}
.glr-readout{color:#e9edf6}

@media (max-width:980px){
  .glare-grid{grid-template-columns:1fr}
}
/* === Touch Path: move line & dots below labels (no overlap) === */
.lb-path .path-line{
  align-items:flex-start;           /* текст наверху колонки */
  padding-bottom:28px;              /* место под линию и точку */
  position:relative;
}

.lb-path .path-line::before{
  top:auto;                         /* линия снизу, не по центру */
  bottom:12px;
  transform:none;
}

.lb-path .node{
  padding-bottom:18px;              /* отступ под точку */
  text-align:center;
  white-space:nowrap;               /* чтобы надписи не ломались странно */
}

.lb-path .node::after{
  top:auto;                         /* точка под текстом */
  bottom:2px;
  transform:translate(-50%,0);      /* центр по X, без сдвига по Y */
}

/* при узких экранах немного уменьшим шрифт, чтобы вмещались подписи */
@media (max-width:720px){
  .lb-path .node{ font-size: 0.95rem; }
}
/* ===== 13) Mini Lookbook ===== */
.lb-minis{padding:42px 0}
.minis-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px}
.mini-card{
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--bg-elev); padding:10px; display:grid; gap:8px;
  transform:translateY(8px); opacity:.85; transition:transform .35s ease, opacity .35s ease, box-shadow .35s ease;
}
.mini-card img{width:100%; max-width:350px; height:auto; display:block; border-radius:12px}
.mini-card figcaption{color:#e9edf6}
.mini-card:is(:hover,.is-on){transform:none; opacity:1; box-shadow:0 12px 24px rgba(0,0,0,.25)}
@media (max-width:980px){ .minis-grid{grid-template-columns:1fr} }

/* ===== 14) Acoustic ===== */
.lb-acoustic{padding:42px 0}
.acoustic-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:16px; align-items:center}
.acoustic-fig{border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-elev); padding:10px; display:grid; gap:8px}
.acoustic-fig img{width:100%; max-width:350px; height:auto; display:block; border-radius:12px}
.wave{display:grid; grid-auto-flow:column; gap:6px; margin:12px 0}
.wave span{
  width:6px; height:22px; border-radius:999px;
  background:linear-gradient(180deg, var(--accent), var(--accent-2));
  animation:wave 1.2s ease-in-out infinite;
  opacity:.9;
}
.wave span:nth-child(2){animation-delay:.05s}
.wave span:nth-child(3){animation-delay:.1s}
.wave span:nth-child(4){animation-delay:.15s}
.wave span:nth-child(5){animation-delay:.2s}
.wave span:nth-child(6){animation-delay:.25s}
.wave span:nth-child(7){animation-delay:.3s}
.wave span:nth-child(8){animation-delay:.35s}
@keyframes wave{ 0%,100%{transform:scaleY(.5)} 50%{transform:scaleY(1.2)} }
@media (prefers-reduced-motion:reduce){ .wave span{animation:none} }
@media (max-width:980px){ .acoustic-grid{grid-template-columns:1fr} }

/* ===== 15) Macro Lens ===== */
.lb-macro{padding:42px 0}
.macro-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:16px; align-items:center}
.macro-fig{
  position:relative; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--bg-elev); padding:10px; display:grid; gap:8px; overflow:hidden
}
.macro-fig img{width:100%; max-width:350px; height:auto; display:block; border-radius:12px}
.macro-fig .lens{
  position:absolute; width:120px; height:120px; border-radius:50%;
  border:2px solid color-mix(in srgb, var(--accent) 60%, #000 40%);
  box-shadow:0 0 0 6px color-mix(in srgb, var(--accent) 20%, transparent);
  pointer-events:none; opacity:.0; transition:opacity .2s ease;
  transform:translate(-50%,-50%);
}
.macro-fig:hover .lens{opacity:1}
@media (max-width:980px){ .macro-grid{grid-template-columns:1fr} }
/* Lookbook: убираем горизонтальный скролл */
html, body { overflow-x: hidden; }

.lookbook .rail,
.lookbook .gallery,
.lookbook .marquee { overflow-x: clip; } /* если есть такие ленты */
.lookbook img { display:block; max-width:100%; height:auto; } /* чтобы картинки не вылезали */