body {
   font-family: Montserrat, 'MS Sans Serif', Geneva, sans-serif;
   margin: 0px;
   padding: 0px;
}

h1 {
   margin: 0px;
   padding: 10px;
   text-align: center;
}

p {
   text-indent: 1.5em;
   line-height: 1.5em;
}

.telo {
   width: 100%;
   display: flex;
   justify-content: center;
}

.telo img {
   max-width: 95%;
}

.central-block {
   max-width: 1360px;
   background-color: #fff;
   padding: 10px;
}

.central-index {
   width: 100%;
   text-align: center;
   justify-content: center;
}

.footer {
   min-height: 250px;
   background-color: #666;
   padding: 20px;
   text-align: center;
}

.footer_dlk {
   display: inline-block;
   text-align: left;
   vertical-align: top;
   margin: 20px;
}

.footer_dlk span {
   display: block;
   font-size: 18px;
   color: #Fff;
   border-bottom: 1px solid #fff;
}

.footer_dlk p {
   font-size: 16px;
   color: #fff;
}

.footer_dlk a {
   display: block;
   text-decoration: none;
   font-size: 16px;
   color: #fff;
   padding-top: 15px;
}

.view_text {
   max-width: 100%;
   display: block;
   margin: auto;
   text-align: justify;
}

.view_text ol,
ul {
   line-height: 1.4;
}

.langs-switch {
   display: block;
   position: absolute;
   top: 10px;
   right: 10px;
   padding: 10px;
   border: solid 1px;
   background-color: #151515;
   cursor: pointer;
   color: #fcee70;
}

.langs-switch a {
   color: #002afc;
}

.langs-switch a:hover {
   color: #fc0000;
}

@media screen and (max-width: 1300px) {
   .langs-switch {
      position: absolute;
      top: 65px;
      left: 0px;
      width: 60px;
      z-index: 8;
   }
}

@media screen and (max-width: 768px) {

   .langs-switch {
      position: absolute;
      top: 65px;
      left: 0px;
      width: 60px;
      z-index: 8;
   }

   .langs-switch:active .langs-switch_link {
      display: block;
   }
}


.modalzakaz {
   position: fixed;
   width: 100%;
   height: 100vh;
   background-color: rgba(51, 51, 51, .8);
   z-index: 999;
   top: 0;
}

.modalform {
   width: 450px;
   max-width: 90%;
   background-color: #efefef;
   z-index: 999999;
   margin: 150px auto;
   position: relative;
   border-radius: 10px;
   padding: 15px;
}

.modalform input {
   display: block;
   width: 80%;
   padding: 20px;
   border-radius: 5px;
   margin: 20px auto;
}

#close_m_form {
   position: absolute;
   right: 5px;
   top: 1px;
   font-size: 36px;
   color: #000;
   display: block;
   padding: 10px;
   cursor: pointer;

}

#close_m_form:hover {
   color: #F00;
}

.blok_img {
   display: block;
   margin: auto;
   text-align: center;
}

.blok_img img {

   display: inline-block;
   max-width: 90%;
   width: 340px;
   margin: 5px;
   box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.64);
}

.tabl_beton {
   display: inline-block;
}

/* Загальний контейнер */
.page-wrapper {
   display: flex;
   justify-content: center;
   padding: 20px;
}

.content {
   width: 100%;
   max-width: 1200px;
}

/* ---------- PRODUCT GRID ---------- */

.product-grid {
   display: grid;
   gap: 20px;
   grid-template-columns: 1fr 1fr;
   margin-bottom: 30px;
}

.product-image img {
   width: 100%;
   max-width: 500px;
   height: auto;
   border-radius: 8px;
}

.product-info {
   display: flex;
   flex-direction: column;
   gap: 15px;
   justify-content: center;
}

.btn-order {
   padding: 12px 50px;
   background: #ff9800;
   color: #fff;
   border: none;
   border-radius: 6px;
   cursor: pointer;
   align-self: start;
   font-size: 1.4em;
   font-weight: bold;

}

.btn-order:hover {
   background: #e68900;
}

.product-specs {
   grid-column: 1 / -1;
   background: #f7f7f7;
   padding: 15px;
   border-radius: 8px;
}

/* ---------- MAIN TEXT ---------- */

.product-text {
   margin-top: 20px;
   line-height: 1.6;
}

/* ---------- RELATED PRODUCTS ---------- */

.related-products h2 {
   margin-top: 40px;
   margin-bottom: 20px;
}

.related-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
   gap: 20px;
   margin-top: 20px;
}

.related-item {
   display: flex;
   flex-direction: column;
   background: #fff;
   padding: 15px;
   border-radius: 12px;
   box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
   transition: 0.3s ease;
}

.related-item:hover {
   transform: translateY(-3px);
   box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

.related-link {
   text-decoration: none;
   color: #000;
}

.related-link img {
   width: 100%;
   height: 180px;
   object-fit: cover;
   border-radius: 10px;
}

.related-name {
   display: block;
   font-size: 20px;
   font-weight: 600;
   margin: 10px 0;
}

.related-desc {
   flex: 1;
   /* дає можливість кнопці бути внизу */
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

.related-desc ul {
   padding-left: 18px;
   margin-bottom: 15px;
}

.btn-order-small {
   width: 90%;
   margin: 0 auto;
   padding: 12px 0;
   font-size: 18px;
   /* збільшений шрифт */
   font-weight: 600;
   border: none;
   background-color: #f8c100;
   border-radius: 10px;
   cursor: pointer;
   transition: 0.2s ease;
}

.btn-order-small:hover {
   background-color: #e0ad00;
}


/* ---------- ADAPTIVE ---------- */

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

.category-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(260px, 320px));
   gap: 20px;
   justify-content: center;
   /* центруємо весь грід */
   margin-top: 20px;
}

.category-item {
   display: flex;
   flex-direction: column;
   background: #fff;
   padding: 15px;
   border-radius: 12px;
   box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
   transition: 0.3s ease;
   max-width: 350px;
   /* обмежуємо ширину картки */
   margin: 0 auto;
   /* центруємо картку всередині гріда */
}

.category-item:hover {
   transform: translateY(-3px);
   box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

.category-link {
   text-decoration: none;
   color: #000;
}

.category-link img {
   width: 100%;
   height: auto;
   object-fit: cover;
   border-radius: 10px;
}

.category-name {
   display: block;
   font-size: 20px;
   font-weight: 600;
   margin: 10px 0;
   text-align: center;
}

.category-desc {
   display: flex;
   flex-direction: column;
   flex: 1;
   /* займає весь простір нижче картинки */
   justify-content: space-between;
}

.category-desc ul {
   padding-left: 20px;
   margin-bottom: 10px;
}

.btn-order-small {
   margin-top: auto;
   /* прижимаємо кнопку до низу блоку */
   width: 90%;
   /* ширина кнопки 90% від блоку */
   margin-left: auto;
   margin-right: auto;
   /* центруємо кнопку */
   padding: 12px 0;
   font-size: 18px;
   font-weight: 600;
   border: none;
   background-color: #f8c100;
   border-radius: 10px;
   cursor: pointer;
   transition: 0.2s ease;
}

.btn-order-small:hover {
   background-color: #e0ad00;
}

/* Основний текстовий блок */
.styled-content {
   background: #fff;
   padding: 25px;
   border-radius: 12px;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
   font-size: 18px;
   line-height: 1.65;
   margin-bottom: 30px;
}

/* Блок карти */
.map-wrapper {
   margin-top: 35px;
   text-align: center;
}

.map-title {
   font-size: 24px;
   font-weight: 600;
   margin-bottom: 15px;
}

.map-container {
   width: 100%;
   max-width: 900px;
   margin: 0 auto;
}

.map_style {
   width: 100%;
   height: 380px;
   border: none;
   border-radius: 12px;
   box-shadow: 0 3px 14px rgba(0, 0, 0, 0.12);
   transition: transform .25s;
}

.map_style:hover {
   transform: scale(1.01);
}

.sitemap-wrapper {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 30px;
   max-width: 1200px;
   margin: 0 auto;
   padding: 20px;
}

/* Блок карти сайту */
.sitemap-blok {
   background: #fff;
   padding: 20px;
   border-radius: 16px;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
   border: 1px solid #eee;
}

.sitemap-blok ul {
   list-style: none;
   margin: 0 0 15px 0;
   padding-left: 0;
}

.sitemap-blok ul ul {
   margin-left: 15px;
   padding-left: 10px;
   border-left: 2px solid #eaeaea;
}

.sitemap-blok li {
   margin: 6px 0;
}

/* Посилання */
.sitemap-blok a {
   text-decoration: none;
   color: #333;
   font-weight: 500;
   transition: 0.25s;
}

.sitemap-blok a:hover {
   color: #0077ff;
   padding-left: 3px;
}

/* Адаптив для мобільних */
@media (max-width: 768px) {
   .sitemap-wrapper {
      grid-template-columns: 1fr;
   }
}