* {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      body {
        font-family: Arial, sans-serif;
        color: #1f2a24;
        background: #ffffff;
        line-height: 1.6;
      }

      a {
        color: inherit;
        text-decoration: none;
      }

      /* Шапка */
      .header {
        width: 100%;
        padding: 22px 8%;
        background: #ffffff;
        border-bottom: 1px solid #e5e5e5;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: sticky;
        top: 0;
        z-index: 10;
      }

      .logo {
        font-size: 22px;
        font-weight: 700;
        color: #245c3a;
      }

      .nav {
        display: flex;
        gap: 24px;
        font-size: 15px;
      }

      .nav a {
        color: #333;
        transition: 0.2s;
      }

      .nav a:hover {
        color: #2f8f5b;
      }

      /* Фото на всю ширину */
      .hero {
        position: relative;
        min-height: 620px;
        background-image: url("photo.png");
        background-size: cover;
        background-position: center;
      }

      .hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.18);
      }

      .hero-text {
        position: absolute;
        top: 70px;
        right: 8%;
        z-index: 1;
        max-width: 800px;
        padding: 30px;
        background: rgba(255, 255, 255, 0.88);
        border: 2px solid #ffffff;
        border-radius: 18px;
        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.18);
      }
.hero-list {
  margin-top: 18px;
  padding-left: 0;
  list-style: none;
}

.hero-list li {
  position: relative;
  margin-bottom: 12px;
  padding-left: 28px;
  font-size: 17px;
  color: #333;
}

.hero-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 5px;
  width: 7px;
  height: 13px;
  border: solid #2f8f5b;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

      .hero-text h1 {
        font-size: 36px;
        line-height: 1.15;
        margin-bottom: 18px;
        color: #1f4f35;
      }

      .hero-text p {
        font-size: 17px;
        color: #333;
      }

      /* Белый блок с таблицей */
      .section {
        padding: 80px 8%;
      }

      .section h2 {
        font-size: 32px;
        margin-bottom: 30px;
        color: #245c3a;
      }

      .table-wrap {
        overflow-x: auto;
        border-radius: 16px;
        border: 1px solid #e0e0e0;
      }

      table {
        width: 100%;
        border-collapse: collapse;
        background: #fff;
        min-width: 640px;
      }

      th,
      td {
        padding: 18px 20px;
        text-align: left;
        border-bottom: 1px solid #e6e6e6;
      }

      th {
        background: #f4f8f5;
        color: #245c3a;
        font-weight: 700;
      }

      tr:last-child td {
        border-bottom: none;
      }

      /* Зеленый блок */
      .green-section {
        padding: 90px 8%;
        background: #2f8f5b;
        color: #ffffff;
      }

      .green-section .content {
        max-width: 900px;
      }

      .green-section h2 {
        font-size: 32px;
        margin-bottom: 26px;
      }

      .green-section p {
        font-size: 18px;
        margin-bottom: 20px;
        opacity: 0.95;
      }

      /* Обратная связь */
      .feedback {
        background: #ffffff;
        padding: 80px 8%;
        text-align: center;
      }

      .feedback h2 {
        font-size: 32px;
        margin-bottom: 16px;
        color: #245c3a;
      }

      .feedback p {
        max-width: 620px;
        margin: 0 auto 34px;
        color: #555;
        font-size: 17px;
      }

      .buttons {
        display: flex;
        justify-content: center;
        gap: 18px;
        flex-wrap: wrap;
      }

      .social-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 150px;
        padding: 15px 24px;
        border-radius: 999px;
        font-size: 16px;
        font-weight: 700;
        color: #ffffff;
        transition: 0.2s;
      }

      .social-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
      }

      .vk {
        background: #0077ff;
      }

      .tg {
        background: #229ed9;
      }

      .footer {
        padding: 24px 8%;
        text-align: center;
        background: #f5f5f5;
        color: #777;
        font-size: 14px;
      }

      @media (max-width: 768px) {
        .header {
          flex-direction: column;
          gap: 14px;
        }

        .nav {
          gap: 14px;
          flex-wrap: wrap;
          justify-content: center;
        }

        .hero {
          min-height: 540px;
        }

        .hero-text {
          top: auto;
          right: 5%;
          left: 5%;
          bottom: 40px;
          max-width: none;
        }

        .hero-text h1 {
          font-size: 28px;
        }

        .section,
        .green-section,
        .feedback {
          padding: 60px 5%;
        }

        .section h2,
        .green-section h2,
        .feedback h2 {
          font-size: 26px;
        }
      }
      .window-picker-btn {
  width: 72px;
  height: 72px;
  padding: 0;
  border: none;
  border-radius: 16px;
  background: transparent;
  cursor: pointer;
  transition: 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.window-picker-btn:hover {
  transform: translateY(-2px) scale(1.02);
}

.sprite-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.window-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.window-card {
  position: relative;
  min-height: 210px;
  padding: 45px 14px 52px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #dfe6e1;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
  text-align: center;
  transition: 0.2s;
}

.window-card img {
  width: 100%;
  height: 150px;
  object-fit: contain;
  margin-bottom: 10px;
}

.cart-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 24px;
  color: #245c3a;
}

.cart-title-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.cart-item {
  position: relative;
  padding: 16px 16px 52px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #dfe6e1;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
}

.remove-item-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: #f4e9e9;
  color: #9a2f2f;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.remove-item-btn:hover {
  background: #ecdcdc;
}

.cart-item-sum {
  position: absolute;
  right: 16px;
  bottom: 14px;
  margin-top: 0;
  font-size: 16px;
  font-weight: 700;
  color: #245c3a;
  text-align: right;
}

@media (max-width: 992px) {
  .window-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .calc-ui {
    padding: 18px;
  }

  .cart-title-row {
    align-items: flex-start;
  }

  .window-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* === Калькулятор окон === */

.calc-ui {
  background: #ffffff;
  border: 1px solid #e3e8e4;
  border-radius: 24px;
  padding: 26px;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.06);
}

.calc-topbar {
  display: flex;
  align-items: end;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.window-picker-btn {
  width: 82px;
  height: 82px;
  padding: 8px;
  border: 1px solid #dfe6e1;
  border-radius: 20px;
  background: #f4f8f5;
  cursor: pointer;
  transition: 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.window-picker-btn:hover {
  background: #e9f3ed;
  transform: translateY(-2px) scale(1.02);
}

.sprite-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.metro-placeholder-inline {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 270px;
}

.metro-placeholder-inline label {
  font-size: 14px;
  font-weight: 700;
  color: #245c3a;
}

.metro-placeholder-inline select {
  height: 52px;
  padding: 0 14px;
  border: 1px solid #cfd8d2;
  border-radius: 14px;
  background: #ffffff;
  font-size: 15px;
  outline: none;
}

.metro-placeholder-inline select:focus {
  border-color: #2f8f5b;
}

/* Панель выбора окон */
.window-panel {
  margin-bottom: 28px;
  padding: 20px;
  border-radius: 22px;
  background: #f4f8f5;
  border: 1px solid #dde8e1;
}

.hidden {
  display: none;
}

.window-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.window-card {
  position: relative;
  min-height: 220px;
  padding: 16px 16px 54px;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid #dfe6e1;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.045);
  text-align: center;
  transition: 0.2s;
}

.window-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

.window-card img {
  width: 100%;
  height: 110px;
  object-fit: contain;
  margin-bottom: 10px;
}

.window-card-title {
  font-size: 17px;
  font-weight: 700;
  color: #203329;
  margin-bottom: 5px;
}

.window-card-price {
  font-size: 17px;
  color: #627168;
}

.window-add-btn {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 47px;
  height: 47px;
  border: none;
  border-radius: 50%;
  background: #2f8f5b;
  color: #ffffff;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  transition: 0.2s;
}

.window-add-btn:hover {
  background: #247448;
  transform: scale(1.06);
}

/* Корзина */
.cart-title-row {
    padding-top: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.cart-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 24px;
  color: #245c3a;
}

.cart-title-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.cart-total {
  font-size: 18px;
  color: #203329;
}

.cart-total strong {
  color: #245c3a;
  font-size: 26px;
}

.cart-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.cart-empty {
  padding: 22px;
  border-radius: 18px;
  background: #f8faf8;
  border: 1px dashed #cbd8cf;
  color: #6f7b74;
}

.cart-item {
  position: relative;
  min-height: 180px;
  padding: 16px 48px 52px 16px;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid #dfe6e1;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.045);
}

.remove-item-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: #f4e9e9;
  color: #9a2f2f;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.remove-item-btn:hover {
  background: #ecdcdc;
}

.cart-item-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.cart-item-top img {
  width: 103px;
  height: 103px;
  object-fit: contain;
  flex-shrink: 0;
}

.cart-item-name {
  font-size: 15px;
  font-weight: 700;
  color: #203329;
  margin-bottom: 4px;
}

.cart-item-price {
  font-size: 14px;
  color: #627168;
}

.qty-controls {
    padding-top: 45px;
  display: flex;
  align-items: center;
}

.qty-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
}

.qty-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 12px;
  background: #edf3ef;
  color: #245c3a;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
}

.qty-btn:hover {
  background: #dce8df;
}

.qty-value {
  min-width: 24px;
  text-align: center;
  font-size: 17px;
  font-weight: 700;
}

.cart-item-sum {
  position: absolute;
  right: 16px;
  bottom: 14px;
  font-size: 17px;
  font-weight: 700;
  color: #245c3a;
  text-align: right;
}

/* Адаптив */
@media (max-width: 992px) {
  .window-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .calc-ui {
    padding: 18px;
  }

  .calc-topbar {
    align-items: stretch;
  }

  .metro-placeholder-inline {
    width: 100%;
    min-width: 0;
  }

  .window-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .window-card {
    min-height: 200px;
  }

  .cart-title-row {
    align-items: flex-start;
  }

  .cart-total strong {
    font-size: 22px;
  }
}

@media (max-width: 420px) {
  .window-grid {
    grid-template-columns: 1fr;
  }

  .cart-items {
    grid-template-columns: 1fr;
  }
}