/* =========================================================
   MAIN.CSS
   Everything inside <main>: page title, product gallery,
   specifications, action/certification sidebar, spec tabs
   and the long-form description. Relies on the CSS
   variables defined in header.css.
   ========================================================= */

/* ===== Title ===== */
.page-title{
  font-weight:800;
  letter-spacing:.5px;
  font-size:1.55rem;
  color:var(--navy-deep);
  margin-top:1.75rem;
  margin-bottom:1.25rem;
}
.section-title{
  font-weight:800;
  color:var(--navy-deep);
  font-size:1.15rem;
  letter-spacing:.3px;
}

/* ===== Gallery с изображениями ===== */
.gallery-row{
  display:flex;
  gap:1rem;
  align-items:flex-start;
  width: auto;
}

.thumb-col{
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  gap:.5rem;
}

.thumb-track{
  display:flex;
  flex-direction:column;
  gap:.6rem;
  max-height:340px;
  overflow-y:auto;
  scrollbar-width:none;
  padding:2px;
}
.thumb-track::-webkit-scrollbar{ display:none; }

.thumb-box{
  width:82px; height:82px;
  flex-shrink:0;
  border:2px solid var(--line);
  border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  background:#eef2f8;
  cursor:pointer;
  overflow:hidden;
  transition: border-color .15s ease, opacity .15s ease;
  opacity:.7;
}
.thumb-box:hover{ border-color: var(--accent); opacity:1; }
.thumb-box.active{ border-color: var(--navy); opacity:1; }
.thumb-box img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.slider-col{
  flex-grow:1;
  min-width:0;
}

/* Carousel с изображениями */
.main-image-wrap{
  border-radius:10px;
  border:1px solid var(--line);
  overflow:hidden;
  background:#fff;
}
.main-image{
  height:340px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  overflow:hidden;
}
.main-image img{
  width:100%;
  height:100%;
  object-fit:contain;
}

#galleryCarousel{ position:relative; }
#galleryCarousel .carousel-control-prev,
#galleryCarousel .carousel-control-next{
  width:44px; height:44px;
  top:50%; transform:translateY(-50%);
  background:none;
  opacity:1;
}
#galleryCarousel .carousel-control-prev{ left:12px; }
#galleryCarousel .carousel-control-next{ right:12px; }
.carousel-nav-icon{
  width:36px; height:36px;
  border-radius:50%;
  background:rgba(255,255,255,.9);
  color:var(--navy);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 2px 8px rgba(11,45,107,.18);
  font-size:.85rem;
}
.carousel-dots{
  position:absolute;
  left:0; right:0; bottom:12px;
  display:flex;
  justify-content:center;
  gap:.4rem;
}
.carousel-dots button{
  width:8px; height:8px;
  border-radius:50%;
  border:none;
  background: rgba(11,45,107,.25);
  padding:0;
}
.carousel-dots button.active{ background: var(--navy); }

/* ===== Responsive ===== */
@media (max-width: 991.98px){
  .thumb-box{ width:70px; height:70px; }
  .main-image{ height:300px; }
}

@media (max-width: 767.98px){
  .gallery-row{ gap:.75rem; }
  .thumb-box{ width:60px; height:60px; }
  .thumb-track{ gap:.5rem; max-height:280px; }
  .main-image{ height:260px; }

  #galleryCarousel .carousel-control-prev,
  #galleryCarousel .carousel-control-next{ width:36px; height:36px; }
  .carousel-nav-icon{ width:30px; height:30px; font-size:.75rem; }
  #galleryCarousel .carousel-control-prev{ left:8px; }
  #galleryCarousel .carousel-control-next{ right:8px; }
}

@media (max-width: 480px){
  .thumb-box{ width:52px; height:52px; }
  .thumb-track{ gap:.4rem; max-height:240px; }
  .main-image{ height:220px; }
}
/* ===== Specifications ===== */
.spec-list dt{
  font-weight:700;
  color:var(--ink);
  font-size:.9rem;
  display:inline;
}
.spec-list dd{
  display:inline;
  font-weight:400;
  margin-left:.25rem;
  color:var(--ink);
  font-size:.9rem;
}
.spec-block p{ margin-bottom:.55rem; font-size:.9rem; }
.link-more{
  color: var(--accent);
  font-weight:600;
  font-size:.88rem;
}

/* ===== Buttons: icon always sits to the left of the label ===== */
.btn-outline-navy,
.btn-navy{
  display:flex;
  align-items:center;
  gap:.6rem;
  font-weight:700;
  font-size:.82rem;
  border-radius:20px;
  padding:.55rem 1.1rem;
}
.btn-outline-navy i, .btn-navy i{ font-size:.95rem; flex-shrink:0; }
.btn-outline-navy{
  border:1px solid var(--navy);
  color:var(--navy);
  background:#fff;
}
.btn-outline-navy:hover{ background:var(--navy); color:#fff; }
.btn-navy{
  background:var(--navy);
  color:#fff;
  border:1px solid var(--navy);
}
.btn-navy:hover{ background:var(--navy-deep); color:#fff; }

/* ===== Sidebar: action buttons + certification badges ===== */
.side-card{
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:10px;
  padding:1.25rem;
}
.cert-row{
  display:flex;
  align-items:flex-start;
  gap:.7rem;
  margin-bottom:.9rem;
}
.cert-row:last-child{ margin-bottom:0; }
.cert-row i{
  font-size:1.15rem;
  color:var(--navy);
  width:1.3rem;
  text-align:center;
  flex-shrink:0;
  margin-top:.1rem;
}
.cert-row span{
  font-size:.78rem;
  color:var(--muted);
  line-height:1.3;
}

/* ===== Tabs / spec filter row ===== */
.filter-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  list-style:none;
  padding-left:0;
}
.filter-tabs .nav-link{
  background:var(--bg-soft);
  border:1px solid var(--line);
  color:var(--ink);
  font-size:.85rem;
  font-weight:600;
  border-radius:6px;
  padding:.6rem 1.1rem;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.filter-tabs .nav-link:hover{
  border-color: var(--navy);
  color: var(--navy);
}
.filter-tabs .nav-link.active{
  background: var(--navy);
  border-color: var(--navy);
  color:#fff;
}
.spec-tab-content{
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
}
.spec-table{
  font-size:.9rem;
}
.spec-table thead th{
  color: var(--muted);
  font-weight:700;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.3px;
  border-bottom:2px solid var(--line);
}
.spec-table td{
  border-color: var(--line);
  color: var(--ink);
}
.spec-table td:first-child{
  font-weight:600;
  color: var(--navy-deep);
  width:40%;
}
.doc-list{
  list-style:none;
  padding-left:0;
  margin:0;
}
.doc-list li{
  display:flex;
  align-items:center;
  gap:.7rem;
  padding:.7rem 0;
  border-bottom:1px solid var(--line);
  font-size:.9rem;
}
.doc-list li:last-child{ border-bottom:none; }
.doc-list li i{
  color:#c23b3b;
  font-size:1.1rem;
}
.doc-list li span{ flex-grow:1; color:var(--ink); }
.doc-list li a{
  color: var(--accent);
  font-weight:600;
  font-size:.85rem;
}

/* ===== Long-form description ===== */
.desc h6{
  font-weight:800;
  color:var(--navy-deep);
  margin-top:1.5rem;
  margin-bottom:.5rem;
  font-size:.95rem;
}
.desc p, .desc li{
  color:#2b3948;
  font-size:.92rem;
  line-height:1.65;
}
.desc ul{ padding-left:1.1rem; }

/* ===== Responsive ===== */
@media (max-width: 767.98px){
  .thumb-col{ flex-direction:row; overflow-x:auto; order:2; }
  .main-image{ height:240px; order:1; }
}