/* Специфические стили для страницы товара, которые дополняют index.css */
/* Сброс ограничений высоты для страницы товара */
html, body {
   height: auto !important;
   overflow: auto !important;
   overflow-x: hidden !important; /* Защита от горизонтальной прокрутки */
}

/* ПЕРЕОПРЕДЕЛИТЬ СТИЛИ ЗАГОЛОВКОВ */
.bg-section, .container {
   padding-top: 0;
   background-image: var(--bg-img);
}
h1 { font-size: var(--fs-h2); }
h2::after { content: none; }



#desc h1, h2, h3, h4,
#specs h1, h2, h3, h4, 
#docs h1, h2, h3, h4 {
   color: var(--golden-rod);
   margin: 20px 0 5px 0;
   letter-spacing: 0;
   text-align: left;
   font-size: 1.7rem; 
}

#desc h2, #specs h2 { color: var(--golden-rod); font-size: 1.6rem; }

#desc h4 { color: var(--golden-rod); font-size: 1.2rem; }
/* ----------- */

#desc h3, #specs h3, #docs h3 {
   color: var(--clr-text-regular-inverted);
   font-size: 1.4rem;
   margin-bottom: 5px;
}

#specs h4 {
   color: var(--clr-text-regular-inverted);
   margin-top: 5px;
   font-size: 1.4rem;
}
/* END: ПЕРЕОПРЕДЕЛИТЬ СТИЛИ ЗАГОЛОВКОВ */



/* --- Layout --- */
.main-layout {
   width: 100%;
   min-height: 100vh;
}
.main-layout p {
   color: var(--clr-text-regular);   
}
p.short-desc {
    margin-top: 25px;
    color: var(--clr-short-desc);
    text-align: center;
    font-size: 1.2rem;
    font-weight: 600;
}


/* --- Кнопки --- */
/* Переопределяем кнопки на страницах Категории товара и Товар */
   /* .btn {
      display: inline-block;
      padding: 12px 15px;
      border-radius: 50px;
      font-size: 1.0rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      transition: all 0.3s ease;
      cursor: pointer;
      border: none;
      box-shadow: var(--shadow-soft);
   box-shadow: 5px 5px 7px rgba(14, 165, 233, .3);
   width: auto;
   margin-top: 10px;
   background: linear-gradient(135deg, var(--primary), #0284c7);
   color: var(--clr-btn-text);
   } */





/* ОСНОВНОЙ СТИЛЬ КНОПКИ САЙТА */
/* .btn-primary, .btn-back {
   background: linear-gradient(135deg, var(--primary), #0284c7);
   color: var(--text-light);
   box-shadow: 0 10px 20px rgba(14, 165, 233, 0.3);
   width: auto;
   margin-top: 10px;
}
.btn-primary:hover, .btn-back:hover {
   transform: scale(1.07);
   box-shadow: var(--shadow-hover);
   border: 2px solid var(--primary);
} */




.item-header {
   padding: 20px 0;
   border-bottom: 1px solid var(--border);
   margin-bottom: 30px;
}

/* блок Main Info */
.main-info-block {
   display: grid;
   grid-template-columns: 150px 1fr 300px 50px;
   gap: 9px;
   margin: 50px 30px 0 20px;
}

/* Мини-изображения */
.thumb-column {
   display: flex;
   flex-direction: column;
   gap: 10px;
   width: 140px; /* Фиксируем ширину колонки миниатюр */
}
.thumb-item {
   width: 140px;
   height: 140px;
   border: 3px solid var(--clr-goldenrod-hove);
   border-radius: 4px;
   overflow: hidden; /* Обрезаем всё, что не влезло */
   background-color: var(--clr-white);
   display: flex;
   align-items: center;
   justify-content: center;
   transition: 3.3s;
}
.thumb-item img {
   width: 100%;
   height: 100%;
   object-fit: contain; /* Вписывает картинку целиком без искажений */
   padding: 5px;      /* Чтобы картинка не прилипала к рамкам */
}

.thumb-item:hover { 
   border: 2px solid var(--accent);
}

#main-product-img {
   max-width: 90%;
   height: auto;
}


/* Главное фото */
.main-img-box {
   /* width: 70%; */
   max-width: 450px;
   border: 1px solid var(--border);
   border-radius: 15px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--clr-white);
   padding: 20px;
}
.main-img-box img { 
   /* max-width: 100%; */
   height: auto;
}



/* Правая колонка покупки */
.buy-column {
   display: flex;
   flex-direction: column;
   gap: 10px;
   padding: 20px;
   background: var(--third);
   border-radius: 15px;
   height: fit-content;
   max-width: 300px;
}
.item-name {
   color: var(--clr-text-regular);
   font-size: 1.5rem;
   text-align: center;
   border-bottom: 2px solid var(--clr-text-regular);
}
.item-price {
   font-size: 1.5rem;
   font-weight: 800;
   color: var(--golden-rod-hover);
   text-align: center;
}
.item-price span { font-size: 1.2rem; color: var(--clr-white); }


/* Вкладки (Табы) */
/* .item-detail-text {
   font-size: 1.2rem;
   font-weight: normal;
   color: var(--clr-text-regular-inverted);
} */
.detail-info { margin-top: 40px; margin-bottom: 60px; }
.tab-nav {
   display: flex;
   gap: 10px;
   border-bottom: 2px solid var(--border);
   margin-bottom: 20px;
}
.tab-link {
   padding: 12px 25px;
   cursor: pointer;
   background: none;
   border: none;
   color: var(--clr-tab-link);
   font-weight: 600;
   font-size: 1.4rem;
   transition: 0.3s;
   opacity: 0.6;
}
.tab-link.active {
   opacity: 1;
   font-size: 1.7rem;
   letter-spacing: 0.03cap;
   border-bottom: 4px solid var(--golden-rod-hover);
   color: var(--clr-tab-link-active);
}
.tab-pane {
   display: none; 
   padding: 20px 30px;
   line-height: 1.6; 
   background-color: var(--clr-white);
   min-height: 400px;
}
.tab-pane.active {
   display: block;
   color: darkkhaki !important; /* цвет вывода для неворматированного под HTML текста !*/
}
/* .tab-pane h2 {
   color: red;
   font-size: 1.6rem; 
} */
.tab-nav h3 {
   color: var(--golden-rod);
   font-size: 1.4rem; 
}

/* .tab-pane h4 {
   color: var(--text-dark);
   font-size: 1.2rem; 
} */

.tab-pane p {
   font-size: 1rem;
   font-weight: normal;
   color: var(--clr-text-regular-inverted);
}

.tab-pane ul {
    list-style: disc;
    margin: 0;
    padding: 0 25px;
    font-weight: lighter;
    color: var(--clr-text-regular-inverted);
}


.copyright {
   font-size: 12px; 
   color: rgba(255,255,255,0.6);
   /* background: var(--clr-footer); */
   text-align: center; 
   padding: 25px; 
   border-top: 3px solid rgba(255,255,255,0.3);
}


/* СТИЛИ ТАБЛИЦЫ В СПЕЦИФИКАЦИЯХ */
.table-container100 {
   width: 100%;
}
.table-container80 {
   width: 80%;
}
#specs {
   border-collapse: collapse;
   font-size: 1.1rem;
}
#specs tr {
   border-bottom: 1px solid var(--tbl-border)
}
#specs tr:nth-child(even) {
   background-color: #fafafa;
}

#specs .figure table td {
   color: var(--clr-text-regular-inverted);
   border: 1px solid var(--tbl-border);
   padding: 0px 7px;
   font-weight: normal;
}
#specs td:nth-child(even) {
   text-align: center;
}


#docs {
   display: none;
}
#docs a {
   color: #5555ff;
}
/* =================== */


/* 
figure.table td {
   
   border: 2px solid var(--tbl-border);
   padding: 0px 7px;
   font-weight: normal;
} */

figure.table table {
   border-collapse: collapse; /* Главное свойство: убирает двойные границы */
   color: var(--clr-text-regular-inverted);
   /* color: #1a365d; Темно-синий цвет текста */
   margin-top: 10px;
  }

figure.table table th, 
figure.table table td {
    border: 1px solid #a4bee2;
    padding: 1px 10px;
    text-align: center;
  }
#specs figure.table table td,
#specs figure.table table td ul {
   text-align: left;
   font-size: 1rem;
   font-weight: lighter;
}

#specs figure.table table td a,  
#desc    a {
   text-decoration: underline;
   color: blue;
}

figure.table table th {
   background-color: hsl(211, 36%, 90%); /* Легкий фон для заголовков */
   font-weight: bold;
}
/* END: ======= СТИЛИ ТАБЛИЦ ======= */




@media (max-width: 900px) {
   .main-info-block { grid-template-columns: 1fr; }
   .thumb-column { flex-direction: row; order: 2; }
   .main-img-box { order: 1; }
   .buy-column { order: 3; }
}