/* Производство и шоурум (план §7.10), условия (§7.11), подвал (§7.12). */
.factory { padding: 0 0 96px; }
.factory__head { padding: 0 var(--gutter) 28px; }
.factory__frame[hidden] { display: none; }
.factory__frame {
  position: relative;
  aspect-ratio: 21 / 9;
  background: var(--tone);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.factory__frame { aspect-ratio: 16 / 9; }
.factory__frame img, .factory__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.factory__frame + .factory__body { padding-top: 40px; }
/* Пока нет фото цеха: та же вещь, что на первом экране, целиком и крупно, не обложкой и не схемой. */
.factory__frame.is-garment .gm { position: absolute; inset: 0; width: 100%; height: 100%; }
.factory__frame.is-garment .gm__img,
.factory__frame.is-garment .gm > svg { object-fit: contain; }
.factory__frame:not(.is-garment) svg { width: min(56vw, 640px); height: auto; overflow: visible; }
.factory__frame:not(.is-garment) path, .factory__frame:not(.is-garment) circle, .factory__frame:not(.is-garment) rect, .factory__frame:not(.is-garment) line { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.factory__frame:not(.is-garment) .s { stroke: var(--sig); }
.factory__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 var(--gutter) 28px; text-align: center; display: grid; gap: 8px; justify-items: center; }
.factory__cap h2 { font: 500 var(--fs-m) / 1.2 var(--disp); text-transform: uppercase; }
.factory__cap p { font-size: var(--fs-m); max-width: 40ch; text-wrap: balance; }

.factory__body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 64px;
  padding: 0 var(--gutter);
}
.factory__body > div { display: grid; gap: 16px; align-content: start; }
.addr { font: 500 var(--fs-l) / var(--lh-l) var(--disp); text-wrap: balance; }
.addr-row { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; }
.addr-row .btn { padding: 0 22px; }
.addr-row .link { font-size: var(--fs-s); }
.contacts { display: grid; gap: 8px; }
.contacts a, .contacts span { display: inline-flex; align-items: center; min-height: 32px; width: max-content; }
.contacts .t-mute { margin-right: 10px; }

/* Как это шьётся: четыре схемы лентой, без сеток */
.line4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding: 8px 0 0; }
.st { display: grid; gap: 10px; }
.st__ill { aspect-ratio: 1; display: grid; place-items: center; }
.st__ill svg { width: 72%; overflow: visible; }
.st h3 { font: 500 var(--fs-m) / 1.2 var(--disp); text-transform: uppercase; }
.st p { font-size: var(--fs-s); line-height: var(--lh-s); color: var(--mute); }
.ln { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ln.s { stroke: var(--sig); }
.ln.d { stroke-dasharray: 5 4; }
.is-live .cut { stroke-dasharray: 6 5; animation: cut 1.2s linear infinite; }
@keyframes cut { to { stroke-dashoffset: -22; } }
.is-live .scis { animation: scis 4s var(--ease-out) infinite; }
@keyframes scis { 0% { transform: translateX(0); } 50% { transform: translateX(150px); } 100% { transform: translateX(0); } }
.is-live .needle { animation: needle .28s ease-in-out infinite alternate; }
@keyframes needle { to { transform: translateY(14px); } }
.is-live .seam { stroke-dasharray: 4 4; animation: seam 4s linear infinite; }
@keyframes seam { from { stroke-dashoffset: 120; } to { stroke-dashoffset: 0; } }
.is-live .press { animation: pressm 3s var(--ease-out) infinite; }
@keyframes pressm { 0%, 15% { transform: translateY(0); } 35%, 55% { transform: translateY(34px); } 75%, 100% { transform: translateY(0); } }
.printed { opacity: 0; }
.is-live .printed { animation: printed 3s var(--ease-out) infinite; }
@keyframes printed { 0%, 40% { opacity: 0; } 55%, 90% { opacity: 1; } 100% { opacity: 0; } }
.is-live .box { animation: box 3.2s var(--ease-out) infinite; }
@keyframes box { 0% { transform: translateX(-120px); opacity: 0; } 20%, 70% { transform: none; opacity: 1; } 100% { transform: translateX(120px); opacity: 0; } }
.okm { stroke-dasharray: 40; stroke-dashoffset: 40; }
.is-live .okm { animation: okm 3.2s var(--ease-out) infinite; }
@keyframes okm { 0%, 30% { stroke-dashoffset: 40; } 45%, 70% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
/* Швейная машина в кадре цеха: игла и строчка */
.is-live .fm-needle { animation: needle .32s ease-in-out infinite alternate; }
.is-live .fm-seam { stroke-dasharray: 3 3; animation: seam 3s linear infinite; }
.is-live .fm-wheel { animation: wheel 2.4s linear infinite; transform-origin: var(--cx) var(--cy); }
@keyframes wheel { to { transform: rotate(360deg); } }

/* Шаги «как пройти» */
.walk { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
.walk::-webkit-scrollbar { display: none; }
.walk figure { flex: none; width: 220px; display: grid; gap: 8px; }
.walk .ph { aspect-ratio: 4 / 3; background: var(--tone); overflow: hidden; }
.walk .ph img { width: 100%; height: 100%; object-fit: cover; }
.walk figcaption { font-size: var(--fs-s); line-height: var(--lh-s); }
.walk figcaption span { color: var(--mute); margin-right: 8px; }
.rmap { aspect-ratio: 16 / 9; background: var(--tone); overflow: hidden; }
.rmap img { width: 100%; height: 100%; object-fit: cover; }

/* Условия */
.terms { padding: 0 var(--gutter) 96px; }
.terms .h-block { margin-bottom: 20px; }
.terms .rows { max-width: 820px; }
.terms summary span:first-child { font-size: var(--fs-m); }
.terms summary small { color: var(--mute); margin-left: auto; }
.terms__list { display: grid; gap: 6px; font-size: var(--fs-s); line-height: var(--lh-s); }
.terms__list li { display: flex; justify-content: space-between; gap: 16px; max-width: 48ch; }
.terms__list li span:last-child { color: var(--mute); }

/* Подвал: одна строка */
.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 24px var(--gutter) calc(32px + env(safe-area-inset-bottom, 0px));
  font-size: var(--fs-s);
  line-height: var(--lh-s);
  color: var(--mute);
}
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.foot a:hover { color: var(--ink); }

@media (max-width: 1023px) {
  .factory { padding-bottom: 56px; }
  .factory__frame { aspect-ratio: 4 / 3; }
  .factory__frame:not(.is-garment) svg { width: 78vw; }
  .factory__cap { padding-bottom: 20px; }
  .factory__cap p { font-size: var(--fs-s); line-height: var(--lh-s); }
  .factory__body { grid-template-columns: 1fr; gap: 32px; padding-top: 28px; }
  .line4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .terms { padding-bottom: 56px; }
  .foot { flex-direction: column; }
}