/* Базове */
html, body { margin: 0; overflow-x: clip; }
#single-object-full > .single-object-full-layout > .single-object-title { display: none; }

/* ===== HERO (перша секція, повний екран) ===== */
#single-object-full .feature-section--hero{
  position: relative;
  width: 100vw;                 /* full-bleed, не залежить від .container */
  left: 50%;
  transform: translateX(-50%);  /* без margin-inline хаків */
  min-height: 100vh;
  overflow: hidden;
}
@supports (width: 100dvw){
  #single-object-full .feature-section--hero{
    width: 100dvw;
    min-height: 100dvh;
  }
}

/* фон-зображення */
#single-object-full .feature-section--hero .feature-media{ position: absolute; inset: 0; }
#single-object-full .feature-section--hero .feature-media-img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block; object-fit: cover; object-position: center;
}

/* контент поверх, приклеєний донизу, без зайвих відступів */
#single-object-full .feature-section--hero .feature-content{
  position: absolute; left: 0; right: 0; bottom: 45px;
  margin: 0;  color: #fff; padding: 20px;
}

#single-object-full  .feature-content{
  padding: 40px;
}


@media(max-width: 768px){
#single-object-full  .feature-content{
  padding: 20px;
}  
}


/* заголовок hero */
#single-object-full .feature-section--hero .hero-title{
  margin: 0 0 8px;
  font-weight: 800;
  font-size: 3em;
  line-height: 1.1;
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}
@media (max-width: 768px){
  #single-object-full .feature-section--hero .hero-title{ font-size: 2em; }
}

/* інфо-чіпи (в рядок із переносами) */
#single-object-full .feature-section--hero .hero-info{
  display: flex; flex-wrap: wrap; gap: 8px 12px;
  align-items: center; color: #fff;
  font-size: 12px; line-height: 1.4;
}
#single-object-full .feature-section--hero .hero-info__item{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 25px;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  background: rgba(0,0,0,.4);
}
#single-object-full .feature-section--hero .hero-info__icon{
  width: 30px; height: 30px; display: block; object-fit: contain;
}
#single-object-full .feature-section--hero .hero-info__item .value{ font-weight: 600; }

/* кнопка без підкладки та з нового рядка */
#single-object-full .feature-section--hero .hero-info > .hero-info__item:last-child{
  background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
  padding: 0; flex-basis: 100%; width: 100%;
}
#single-object-full .feature-section--hero .hero-info .button{
  padding: 15px 20px; border: 0; border-radius: 999px;
  font-size: 1.2em; font-weight: 700; cursor: pointer;
  background: #B15540; color: #fff;
}

/* ===== Інші секції (2..N) — базис, щоб нічого не поламати ===== */
#single-object-full .feature-section:not(.feature-section--hero) .feature-media{ position: relative; }
#single-object-full .feature-section:not(.feature-section--hero) .feature-media-img{
  display: block; max-width: 100%; height: auto; border-radius: 25px;
}

/* ===== Мобілки: прибираємо гаттери контейнерів тільки в межах сторінки ===== */
@media (max-width: 768px){
    #single-object-full .feature-section:not(.feature-section--hero) .feature-media-img{
   border-radius: 0px;}
  #single-object-full > .container,
  #single-object-full #object-features > .container{
    padding-left: 0; padding-right: 0;
  }

  /* контент блоку, щоб не “лип” вліво і тягнувся на всю ширину */
  #single-object-full .single-object-inner{
    width: 100vw; max-width: none; margin: 0;
    padding: 0; box-sizing: border-box;
  }
}

#single-object-full > .container,
#single-object-full #object-features > .container{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* HERO: панорамний рух фону ліво ↔ право */
#single-object-full .feature-section--hero .feature-media-img{
  object-fit: cover;
  object-position: left center;           /* старт зліва */
  transform: scale(1.06);                 /* невеликий запас, щоб без чорних країв */
  animation: heroPanLR 20s ease-in-out infinite alternate;
  will-change: object-position, transform;
}

@keyframes heroPanLR{
  from { object-position: left center; }
  to   { object-position: right center; }
}

/* Вимкнути анімації, якщо користувач проти руху */
@media (prefers-reduced-motion: reduce){
  #single-object-full .feature-section--hero .feature-media-img{
    animation: none !important;
    transform: none !important;
  }
}


#single-object-full .feature-section .feature-content h3::after{
  content: "";
  display: block;
  width: 50px;
  height: 1px;
  background: var(--brand-color, #B15540);
  margin-top: 8px;
  border-radius: 2px;
}

#single-object-main{
   h1, h2, h3, h4, h5, h6 { font-family: inherit; font-weight: 500 !important; font-style: italic !important;}
}

#single-object-main .feature-content p{
  color: grey;
}


.accessories-single-grid, .comfort-single-grid{
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px;
  
}

.accessory-single-item, .comfort-single-item{
  align-items: flex-start;
  text-align: left;
  text-transform: uppercase;
  border-radius: 0;
  transition: all 0.3s ease;
}

.accessory-single-item:hover, .comfort-single-item:hover{
  transform: scale(1.1);
  cursor: pointer;
}

.accessories-single-grid img, #comfort-single img{
  max-width: 60px;
}

#accessories-single h2, #comfort-single h2{
  text-transform: uppercase;

}


#comfort-single h2{
  text-align: right;
}

#comfort-single p{
  color: #B15540;
}


.feature-section--hero .feature-media {
  position: relative;
}

.single-hero-badges {
  position: absolute;
  top: 100px;
  left: 20px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.single-hero-badge {
  font-size: 14px;
  padding: 10px 14px;
}