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

*{box-sizing:border-box}
html {
  font-family: Gilroy,sans-serif;
  font-size: 10px;
  font-weight: 300;
  scroll-behavior: smooth;
  scrollbar-color: #0b8dcb #eaeeed;
  scrollbar-width: auto
}
body {
  font-family: Gilroy,sans-serif;
  margin: 0;
  padding: 0;
  counter-reset: section
}
img,video,svg{max-width:100%;height:auto}
.compensate-for-scrollbar {
  margin-right: unset !important;
}
/* 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}

/* 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}

/* Typography */
body{
  color:#1f2937;
}

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

/* ===== SWIPER SLIDER STYLES ===== */
.main__slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}

#home {
  max-height: 600px;
  /*min-height: 560px;*/
}

.main__slider .swiper {
  width: 100%;
  height: 100%;
}

.main__slider .swiper-slide {
  position: relative;
  width: 100%;
  height: 90vh;
  max-height: 600px;
  overflow: hidden;
}

@media (max-width: 768px) {
  /*#home { min-height: 520px; }*/
  .main__slider .swiper-slide { height: 520px; }
}

@media (max-width: 480px) {
  /*#home { min-height: 480px; }*/
  .main__slider .swiper-slide { height: 480px; }
}

.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;
  z-index: 1;
}

.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
  padding-bottom: 20px;
}

.main__slider__text {
  position: absolute;
  top: 50%;
  z-index: 2;
  margin-left: 59rem;
  transform: translate(-50%, -50%);
  width: min(760px, 92vw);
  padding: 28px 22px;
  border-radius: 16px;
  pointer-events: none;
}

@media (min-width: 1500px) {
  .main__slider__text {
    margin-left: 74rem;
  }
}

@media (max-width: 1400px) {
  .main__slider__text {
    margin-left: 40% !important;
  }
}

@media (max-width: 1100px) {
  .main__slider__text {
    transform: translate(-50%, -50%);
    margin-left: 50% !important;
  }
}

@media (max-width: 768px) {
  .main__slider__text {
    transform: unset !important;
    width: 100% !important;
    top: 0 !important;
    margin: auto !important;
  }
}

.main__slider__text__link {
  pointer-events: auto;
}

.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; }
}

/* Swiper navigation and pagination */
.swiper-button-prev,
.swiper-button-next {
  color: white;
  background: rgba(0,0,0,0.3);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  transition: background 0.3s;
  z-index: 10;
}

.swiper-button-prev:after,
.swiper-button-next:after {
  font-size: 20px;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
  background: rgba(0,0,0,0.6);
}

.swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: white;
  opacity: 0.5;
}

.swiper-pagination-bullet-active {
  opacity: 1;
  background: white;
}

@media (max-width: 768px) {
  .swiper-button-prev,
  .swiper-button-next {
    display: none;
  }
}

form label.checkbox span.block {
  font-size: 13px;
}

.modal__content .title {
  font-size: 2.6rem;
}

/* Стили для Swiper */
.sizes-swiper {
  width: 100%;
  overflow: hidden !important; /* Важно: скрываем лишнее */
}

.sizes-swiper .swiper-wrapper {
  display: flex;
  flex-wrap: nowrap;
  transition-timing-function: ease-out;
}

.sizes-swiper .swiper-slide {
  width: calc((100% - (5 * 20px)) / 6) !important; /* 6 слайдов с отступами */
  flex: 0 0 auto;
  margin-right: 20px !important;
  height: auto;
}

/* Убираем margin у последнего слайда в ряду (не обязательно) */
.sizes-swiper .swiper-slide:last-child {
  margin-right: 0 !important;
}

/* Стили для ваших карточек (из вашего CSS) */
.main__sizes__item {
  position: relative;
  height: 35rem;
  background-color: #eaeeed;
  border-radius: 0.6rem;
  overflow: hidden;
  transition: 0.15s ease-in-out;
  width: 100%; /* Занимает всю ширину слайда */
}

.main__sizes__item a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

/* Остальные стили для main__sizes__item... (добавьте их сюда если нужно) */
.main__sizes__item__image {
  position: absolute;
  left: 0;
  bottom: 10rem;
  width: 100%;
  height: 18rem;
  text-align: center;
  z-index: 5;
}

.main__sizes__item__image img {
  max-height: 18rem;
  max-width: 100%;
  object-fit: contain;
}

.main__sizes__item__name {
  position: absolute;
  left: 2rem;
  bottom: 2rem;
  z-index: 5;
}

.main__sizes__item__name__ml {
  color: #000;
  font-size: 1.6rem;
  font-weight: 500;
}

.main__sizes__item__name__oz {
  margin-left: 1rem;
  color: #000;
  font-size: 1.8rem;
  font-weight: 200;
}

/* Скроллбар */
.swiper-scrollbar {
  background: rgba(0,0,0,0.1);
  border-radius: 10px;
  height: 4px;
  margin-top: 20px;
}

.swiper-scrollbar-drag {
  background: #007aff;
  border-radius: 10px;
}

/* Адаптивность */
@media (max-width: 1200px) {
  .sizes-swiper .swiper-slide {
      width: calc((100% - (4 * 20px)) / 5) !important; /* 5 слайдов */
  }
}

@media (max-width: 992px) {
  .sizes-swiper .swiper-slide {
      width: calc((100% - (3 * 15px)) / 4) !important; /* 4 слайда */
  }
}

@media (max-width: 768px) {
  .sizes-swiper .swiper-slide {
      width: calc((100% - (2 * 15px)) / 3) !important; /* 3 слайда */
  }
}

@media (max-width: 576px) {
  .sizes-swiper .swiper-slide {
      width: calc((100% - (1 * 10px)) / 2) !important; /* 2 слайда */
  }
}

@media (max-width: 400px) {
  .sizes-swiper .swiper-slide {
      width: calc(100% - 10px) !important; /* 1 слайд */
  }
}