/* Optimized landing overrides (UTF-8) */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;overflow-x:hidden}
img,video,svg{max-width:100%;height:auto}

/* Header spacing fix (site header is fixed) */
#home{scroll-margin-top:120px}
#catalog{scroll-margin-top:120px}
#sizes{scroll-margin-top:120px}
#advantages{scroll-margin-top:120px}
#partners{scroll-margin-top:120px}
#contact{scroll-margin-top:120px}

/* Prevent containers/rows from overflowing on mobile */
.container{max-width:1200px;margin:0 auto;padding-left:16px;padding-right:16px}
.row{margin-left:0;margin-right:0}
[class*="col-"]{padding-left:12px;padding-right:12px}

/* Slider images cover, but keep aspect on very small screens */
.main__slider img{width:100%;height:100%;object-fit:cover;display:block}

/* Make categories grid consistent even if bootstrap cols exist */
.main__categories .row{display:flex;flex-wrap:wrap;gap:24px}
.main__categories .row>[class*="col-"]{flex:1 1 260px;max-width:calc(33.333% - 16px)}
@media (max-width: 992px){
  .main__categories .row>[class*="col-"]{max-width:calc(50% - 12px)}
}
@media (max-width: 576px){
  .main__categories .row{gap:16px}
  .main__categories .row>[class*="col-"]{max-width:100%}
}

/* Mobile sidebar visibility helper (JS toggles .active) */
#header-mobile-sidebar{transform:translateX(110%);transition:transform .25s ease}
#header-mobile-sidebar.active{transform:translateX(0)}
body.menu-open{overflow:hidden}

/* Scroll-to-top button */
.scroll-to-top{opacity:0;visibility:hidden;transition:opacity .2s ease, visibility .2s ease}
.scroll-to-top.visible{opacity:1;visibility:visible}

/* Inputs: prevent layout shifts */
input,textarea,button{font:inherit}

/* Fix Fancybox backdrop remaining after close */
.fancybox-container{z-index:99992}
.fancybox-bg{background:rgba(0,0,0,.85)}
.fancybox-is-open .fancybox-bg{opacity:1}
body.compensate-for-scrollbar{overflow:auto}

/* Hide Fancybox default close button - we use custom ones in modal__content */
.fancybox-button--close{display:none !important}

/* Modal (basic overlay + centered dialog) */
.modal{
  display:none; /* Hidden by default, shown via JS or Fancybox */
}

/* When Fancybox is active, ensure our modal content looks good inside Fancybox container */
.fancybox-content .modal{
  display:block !important;
  position:static;
  z-index:auto;
}

.fancybox-content .modal__content{
  margin:0;
  width:100%;
  max-width:none;
  box-shadow:none;
}

body.modal-open{overflow:hidden}

.modal__content{
  position:relative;
  margin:0 auto;
  width:min(560px, 100%);
  max-width:560px;
  background:#fff;
  border-radius:12px;
  padding:24px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}

.modal__close{
  position:absolute;
  top:10px;
  right:10px;
  width:36px;
  height:36px;
  border-radius:10px;
  border:0;
  background:rgba(0,0,0,.06);
  color:#111;
  font-size:22px;
  line-height:36px;
  cursor:pointer;
}

.modal__subtitle{margin:10px 0 14px;color:#4b5563;font-size:14px;line-height:1.35}
.modal__status{margin:10px 0;color:#111;font-size:14px;min-height:18px}

.modal label{display:block;margin:10px 0}
.modal input,.modal textarea{width:100%}

/* Fix anchors inside fixed header: ensure click targets have some padding */
.header__bottom__wrapper__nav a{display:inline-flex;align-items:center;min-height:40px}

/* Reduce huge inline-swiper transforms on narrow screens */
@media (max-width: 768px){
  .swiper-slide{width:100% !important;}
  .main__slider__text{max-width:92vw}
}

/* Typography */
body{
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,Arial,"Noto Sans",sans-serif;
  color:#1f2937;
}

h1,h2,h3{line-height:1.15}

/* HERO / Banner alignment */
.main__slider{
  position:relative;
}

/* HERO height should be controlled by the home section (not by generic slide rules) */
#home{
  min-height:560px;
}
@media (max-width: 768px){
  #home{min-height:520px;}
}
@media (max-width: 480px){
  #home{min-height:480px;}
}

/* Force HERO swiper to behave as a full-width background slider (ignore inline widths/transforms) */
#home .swiper{
  position:relative;
  width:100%;
  overflow:hidden;
}

#home .swiper-wrapper{
  position:relative;
  width:100% !important;
  height:100% !important;
  transform:none !important;
  transition:none !important;
}

#home .swiper-slide{
  position:absolute !important;
  inset:0;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease;
}

#home .swiper-slide.swiper-slide-active{
  opacity:1;
  pointer-events:auto;
}

#home .swiper-button-prev,
#home .swiper-button-next{
  z-index:3;
}

.main__slider .swiper-slide img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.main__slider .swiper-slide::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.40) 0%, rgba(0,0,0,.55) 100%);
  pointer-events:none;
}

.main__slider__text{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:2;
  text-align:center;
  width:min(760px, 92vw);
  padding:28px 22px;
  border-radius:16px;
  background:rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
}

.main__slider__text__title{
  font-weight:800;
  letter-spacing:-0.02em;
  color:#fff;
  font-size:48px;
}

.main__slider__text__subtitle{
  margin-top:10px;
  color:rgba(255,255,255,.92);
  font-size:20px;
}

.main__slider__text__link{margin-top:18px;}

@media (max-width: 768px){
  .main__slider__text{padding:22px 16px;border-radius:14px;}
  .main__slider__text__title{font-size:34px;}
  .main__slider__text__subtitle{font-size:18px;}
}

@media (max-width: 480px){
  .main__slider__text__title{font-size:26px;}
  .main__slider__text__subtitle{font-size:16px;}
}