:root {
  --bg: #f7f8f6;
  --panel: #ffffff;
  --ink: #17201b;
  --muted: #66736b;
  --line: #dfe5df;
  --brand: #167044;
  --brand-dark: #0f5634;
  --accent: #b66b2c;
  --soft: #eaf3ee;
  --shadow: 0 18px 50px rgba(23, 32, 27, 0.12);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5;
}
a { color: inherit; }
.topbar a, .footer a { color: inherit; text-decoration: none; }
.wrap { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
.topbar { background: #13231b; color: #fff; font-size: 14px; }
.topbar .wrap { display: flex; gap: 18px; justify-content: space-between; padding: 8px 0; flex-wrap: wrap; }
.header { background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; }
.header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 0; }
.logo { display: grid; gap: 0; text-decoration: none; font-weight: 800; }
.logo span { color: var(--brand); font-size: 13px; }
.nav { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.nav a, .city-select {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 6px;
  padding: 9px 12px;
  text-decoration: none;
  font: inherit;
}
.cart-link { background: var(--brand) !important; color: #fff; border-color: var(--brand) !important; }
.hero { background: linear-gradient(120deg, #123123 0%, #22583c 58%, #7a4f25 100%); color: #fff; }
.hero .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items: center; min-height: 430px; padding: 46px 0; }
.hero .wrap > * { min-width: 0; }
.hero h1 { font-size: 56px; line-height: 1.04; margin: 0 0 18px; letter-spacing: 0; }
.hero p { font-size: 19px; max-width: 760px; }
.hero-card { min-width: 0; max-width: 100%; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: 8px; padding: 12px; backdrop-filter: blur(10px); }
.production-video {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(210px, 1fr) auto auto auto;
  gap: 10px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 410px;
  padding: 14px;
  overflow: hidden;
  border-radius: 6px;
  background: #0d1914;
}
.production-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  min-height: 64px;
}
.production-head > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.production-kicker {
  color: #ffbd61;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.production-head strong {
  font-size: 21px;
  line-height: 1.15;
}
.production-head strong + span {
  color: rgba(255,255,255,.72);
  font-size: 13px;
  line-height: 1.3;
}
.production-stage {
  position: relative;
  min-width: 0;
  min-height: 210px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 5px;
  background: #12251d;
}
.production-photo {
  position: absolute;
  inset: 0;
  opacity: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transform: scale(1.02);
  transition: opacity .7s ease;
  will-change: opacity, transform;
}
.production-photo.is-visible {
  opacity: 1;
  animation: production-camera 6.2s ease-in-out both;
}
.production-video.is-paused .production-photo {
  animation-play-state: paused;
}
@keyframes production-camera {
  from { transform: scale(1.02); }
  to { transform: scale(1.08); }
}
.play-mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 5px;
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
}
.play-mark:hover { background: rgba(255,255,255,.16); }
.production-route {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 36px;
  padding: 7px 10px;
  border-left: 3px solid #ffbd61;
  border-radius: 0 4px 4px 0;
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.88);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}
.production-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.production-nav button {
  min-width: 0;
  min-height: 32px;
  padding: 5px 4px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 4px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.78);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.production-nav button[aria-pressed="true"] {
  border-color: #fff;
  background: #fff;
  color: #173124;
}
.video-progress {
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.24);
}
.video-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  transform-origin: left;
  transform: scaleX(0);
}
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--brand);
  background: var(--brand);
  color: #fff;
  min-height: 42px;
  border-radius: 6px;
  padding: 10px 16px;
  text-decoration: none;
  font-weight: 700;
  cursor: pointer;
}
.button:disabled { opacity: .58; cursor: wait; }
.button.is-added { background: var(--brand-dark); border-color: var(--brand-dark); }
.button.secondary { background: #fff; color: var(--brand-dark); border-color: #fff; }
.button.ghost { background: transparent; color: var(--brand-dark); }
.section { padding: 42px 0; }
.section h2 { margin: 0 0 18px; font-size: 30px; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.process-section {
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.process-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.process-card {
  display: grid;
  grid-template-rows: 132px auto 1fr;
  gap: 9px;
  padding: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(23, 32, 27, .06);
}
.process-card img,
.process-image {
  width: 100%;
  height: 132px;
  border-radius: 6px;
  background: #d7ded6;
}
.process-card img { object-fit: cover; }
.process-image {
  background-image: url("/static/img/mesh-production-processes.webp");
  background-repeat: no-repeat;
  background-size: 500% auto;
  background-position-y: center;
}
.process-image-1 { background-position-x: 0%; }
.process-image-2 { background-position-x: 25%; }
.process-image-3 { background-position-x: 50%; }
.process-image-4 { background-position-x: 75%; }
.process-image-5 { background-position-x: 100%; }
.process-card strong {
  color: var(--brand-dark);
  line-height: 1.2;
}
.process-card span {
  color: var(--muted);
  font-size: 13px;
}
.card, .product, .cart-box, .form-box {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(23, 32, 27, .06);
}
.card { padding: 20px; }
.card strong { display: block; font-size: 18px; margin-bottom: 8px; }
.muted { color: var(--muted); }
.toolbar { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.toolbar input, .toolbar select, .form-box input, .form-box textarea {
  border: 1px solid var(--line);
  border-radius: 6px;
  min-height: 42px;
  padding: 10px 12px;
  font: inherit;
  background: #fff;
}
.toolbar input { flex: 1 1 240px; }
.material-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 18px;
}
.material-tab {
  display: grid;
  gap: 4px;
  min-height: 82px;
  padding: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  text-decoration: none;
}
.material-tab strong {
  color: var(--brand-dark);
  font-size: 18px;
}
.material-tab span {
  color: var(--muted);
}
.material-tab.active {
  border-color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
}
.cell-picker {
  margin: 0 0 18px;
  padding: 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.catalog-categories {
  margin: 0 0 24px;
}
.catalog-category-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 12px;
}
.catalog-category-head h2 {
  margin: 0;
  font-size: 24px;
}
.catalog-category-all {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--brand-dark);
  text-decoration: none;
  font-weight: 800;
  white-space: nowrap;
}
.catalog-category-all.active {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}
.catalog-category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.catalog-category-card {
  display: grid;
  grid-template-rows: 160px auto minmax(36px, 1fr);
  gap: 8px;
  min-width: 0;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--ink);
  text-decoration: none;
}
.catalog-category-card:hover {
  border-color: var(--line);
  background: #fff;
  box-shadow: 0 10px 30px rgba(23, 32, 27, .06);
}
.catalog-category-card.active {
  border-color: var(--brand);
  background: var(--soft);
  box-shadow: inset 0 0 0 1px var(--brand);
}
.catalog-category-card img {
  width: 100%;
  height: 160px;
  border-radius: 8px;
  object-fit: cover;
}
.catalog-category-card strong {
  color: var(--brand-dark);
  font-size: 18px;
  line-height: 1.2;
}
.catalog-category-card span {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.35;
}
.cell-picker h2 {
  margin: 0 0 12px;
  font-size: 22px;
}
.cell-ranges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.cell-range {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 12px;
  background: #fff;
  color: var(--brand-dark);
  text-decoration: none;
  font-weight: 700;
}
.cell-range.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.grade-picker {
  margin-bottom: 12px;
}
.catalog-result-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
  color: var(--muted);
}
.catalog-result-summary strong {
  color: var(--brand-dark);
}
.products { display: grid; gap: 12px; }
.product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px 130px 210px;
  gap: 18px;
  align-items: start;
  padding: 16px;
}
.product-info { min-width: 0; }
.product-stat { padding-top: 1px; }
.product h3 { margin: 0 0 6px; font-size: 18px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { background: var(--soft); border-radius: 999px; padding: 4px 9px; color: var(--brand-dark); font-size: 13px; }
.price { font-size: 20px; color: var(--brand-dark); }
.buy-control {
  display: grid;
  grid-template-columns: 74px 108px;
  gap: 8px;
  align-self: start;
  align-items: end;
  justify-content: end;
}
.buy-control label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
}
.buy-control label span {
  display: flex;
  align-items: center;
  min-height: 16px;
  line-height: 1;
}
.buy-control input {
  width: 100%;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px;
  font: inherit;
}
.buy-control .button {
  width: 108px;
  height: 42px;
  min-height: 42px;
  padding: 8px 10px;
}
.product-selection {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding-top: 7px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}
.product-selection strong {
  color: var(--brand-dark);
  text-align: right;
}
.catalog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 20px 0 0;
}
.catalog-pagination a,
.catalog-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--brand-dark);
  text-decoration: none;
  font-weight: 700;
}
.catalog-pagination span {
  border-color: transparent;
  background: transparent;
}
.catalog-pagination a.active {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}
.cart-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: 18px; align-items: start; }
.cart-box, .form-box { padding: 18px; }
.cart-line {
  display: grid;
  grid-template-columns: 1fr 126px 130px 34px;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
}
.cart-line span { display: block; color: var(--muted); font-size: 13px; }
.qty { display: grid; grid-template-columns: 34px 1fr 34px; }
.qty button, .remove { border: 1px solid var(--line); background: #fff; min-height: 34px; cursor: pointer; }
.qty input { width: 100%; min-width: 0; border: 1px solid var(--line); text-align: center; }
.remove { border-radius: 4px; font-size: 20px; }
.summary { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.summary span {
  background: var(--soft);
  border-radius: 6px;
  padding: 8px 10px;
}
.summary .logistics-hint {
  flex-basis: 100%;
  background: #fff6ea;
  color: #6f441b;
}
.delivery-calculator {
  margin-top: 14px;
  padding: 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(23, 32, 27, .06);
}
.delivery-calculator-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: start;
  margin-bottom: 14px;
}
.delivery-calculator-head h2 {
  margin: 0;
  font-size: 22px;
}
.delivery-calculator-head p {
  margin: 0 0 2px;
}
.delivery-calculator-head span {
  padding: 6px 9px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--brand-dark);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}
.delivery-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.delivery-fields label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}
.delivery-fields input {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  font: inherit;
}
.delivery-calc-button {
  margin-top: 12px;
}
.delivery-result {
  margin-top: 12px;
}
.delivery-cargo,
.delivery-options {
  display: grid;
  gap: 8px;
}
.delivery-cargo {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 10px;
}
.delivery-cargo span {
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--soft);
}
.delivery-option {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.delivery-option strong,
.delivery-option small {
  display: block;
}
.delivery-option small,
.delivery-note {
  color: var(--muted);
  font-size: 13px;
}
.delivery-note {
  margin: 10px 0 0;
}
.delivery-seo h2 + p {
  margin-top: 0;
}
.delivery-strategy {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 26px;
}
.delivery-strategy article {
  display: grid;
  gap: 6px;
  min-height: 118px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.delivery-strategy strong {
  color: var(--brand-dark);
  font-size: 18px;
}
.delivery-strategy span {
  color: var(--muted);
  font-size: 14px;
}
.line-total span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 13px;
}
.form-box form { display: grid; gap: 10px; }
.form-box textarea { min-height: 110px; resize: vertical; }
.hp-field {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}
.consent-check {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}
.consent-check input {
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: var(--brand);
}
.consent-check a,
.footer-policy {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-page {
  max-width: 920px;
}
[data-form-status]:not(:empty) {
  margin: 2px 0 0;
  padding: 9px 10px;
  border-radius: 6px;
  background: var(--soft);
  color: var(--brand-dark);
}
.inn-field {
  position: relative;
  display: grid;
  gap: 6px;
}
.company-suggestions {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  display: grid;
  gap: 4px;
  max-height: 260px;
  overflow: auto;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.company-suggestions[hidden] {
  display: none;
}
.company-suggestions button {
  display: grid;
  gap: 3px;
  width: 100%;
  border: 0;
  border-radius: 6px;
  padding: 9px;
  background: #fff;
  text-align: left;
  cursor: pointer;
}
.company-suggestions button:hover {
  background: var(--soft);
}
.company-suggestions span,
.company-suggestions small,
.inn-status {
  color: var(--muted);
  font-size: 13px;
}
.empty { padding: 22px; background: var(--soft); border-radius: 6px; }
.seo-text {
  background: #fff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.seo-text p {
  max-width: 940px;
}
.standard-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.standard-link {
  display: grid;
  gap: 4px;
  min-height: 86px;
  padding: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  text-decoration: none;
}
.standard-link span {
  color: var(--muted);
}
.faq-list {
  display: grid;
  gap: 10px;
}
.faq-list details {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
}
.faq-list summary {
  cursor: pointer;
  color: var(--brand-dark);
  font-weight: 800;
}
.faq-list p {
  margin: 10px 0 0;
  color: var(--muted);
}
.standard-card .button {
  width: max-content;
}
.standard-products {
  background: var(--soft);
  border-radius: 8px;
  padding: 18px 22px;
}
.footer { background: #13231b; color: #fff; padding: 28px 0; margin-top: 40px; }
.footer .wrap { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; }

@media (max-width: 860px) {
  .hero .wrap, .grid, .cart-layout { grid-template-columns: 1fr; }
  .hero h1 { font-size: 48px; }
  .production-video { min-height: 430px; }
  .process-grid { grid-template-columns: 1fr; }
  .process-card { grid-template-rows: 180px auto 1fr; }
  .process-card img, .process-image { height: 180px; }
  .material-tabs { grid-template-columns: 1fr; }
  .catalog-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .standard-links { grid-template-columns: 1fr; }
  .product { grid-template-columns: 1fr; }
  .buy-control { grid-template-columns: minmax(74px, 1fr) minmax(108px, 1fr); justify-content: stretch; }
  .buy-control .button { width: 100%; }
  .cart-line { grid-template-columns: 1fr; }
  .delivery-fields, .delivery-cargo { grid-template-columns: 1fr; }
  .delivery-strategy { grid-template-columns: 1fr; }
  .delivery-calculator-head { display: grid; }
  .header { position: static; }
  .header .wrap { align-items: flex-start; }
  .nav { width: 100%; }
  .city-select { flex: 1 1 180px; min-width: 0; }
}

@media (max-width: 560px) {
  .wrap { width: calc(100% - 20px); }
  .topbar .wrap { gap: 4px; padding: 6px 0; }
  .header .wrap { display: grid; gap: 10px; padding: 10px 0; }
  .nav { gap: 6px; }
  .nav a, .city-select { padding: 8px 9px; font-size: 14px; }
  .hero .wrap { min-height: auto; padding: 28px 0 34px; }
  .hero h1 { font-size: 38px; }
  .hero p { font-size: 17px; }
  .hero-card { padding: 8px; }
  .production-video { min-height: 370px; padding: 10px; gap: 8px; grid-template-rows: auto minmax(180px, 1fr) auto auto auto; }
  .production-head { min-height: 58px; }
  .production-head strong { font-size: 18px; }
  .production-head strong + span { font-size: 12px; }
  .production-stage { min-height: 180px; }
  .production-route { min-height: 34px; padding: 6px 8px; font-size: 11px; }
  .production-nav { gap: 4px; }
  .production-nav button { min-height: 30px; font-size: 10px; }
  .catalog-category-head { align-items: flex-start; flex-wrap: wrap; }
  .catalog-category-head h2 { flex: 1 0 100%; font-size: 22px; }
  .catalog-category-head .catalog-category-all { margin-left: auto; }
  .catalog-category-all { min-height: 34px; padding: 6px 9px; font-size: 13px; }
  .catalog-category-grid { grid-template-columns: 1fr; gap: 10px; }
  .catalog-category-card { grid-template-rows: 150px auto auto; }
  .catalog-category-card img { height: 150px; }
  .section { padding: 30px 0; }
  .section h2 { font-size: 25px; }
  .product { gap: 12px; padding: 13px; }
  .product-selection { align-items: flex-start; }
  .cart-box, .form-box, .delivery-calculator { padding: 14px; }
  .summary { display: grid; gap: 8px; }
}