/* ===== СЕТКА: слева таблица, справа баннер ===== */
.gh-models-content{
  display:grid !important;
  grid-template-columns: 420px minmax(0,1fr) !important;
  gap:16px !important;
  align-items:start !important;
}

@media (max-width: 992px){
  .gh-models-content{ grid-template-columns: 1fr !important; }
}

/* ЛЕВО: фикс ширины таблицы */
.gh-models-block{
  max-width:420px !important;
  width:100% !important;
}

/* ПРАВО: ширина блока баннера (под себя можешь менять) */
.gh-models-media{
  align-self:start !important;
  justify-self:stretch !important;
  width:100% !important;
  max-width: 640px !important;     /* 620–720 на вкус */
  margin:0 !important;
  padding:0 !important;
}

/* ===== ATUIN SLIDER ===== */
.gh-models-media .banner-wrapper{
  position:relative !important;
  overflow:hidden !important;
  width:100% !important;
  height:520px !important;
  border-radius:16px !important;
  background:#fff !important;
  border:1px solid rgba(0,0,0,.08) !important;
  box-shadow:0 10px 30px rgba(0,0,0,.06) !important;
  margin:0 !important;

  /* тюнинг положения двери */
  --gh-shift-x: 80px;   /* + вправо / - влево */
  --gh-shift-y: -10px; /* вверх/вниз (минус = вверх) */
  --gh-scale: 0.92;    /* 0.88–0.98 чтобы НЕ резало края */

  touch-action: none;  /* КЛЮЧ: мобилка не скроллит страницу при свайпе */
}

/* слои строго один над другим */
.gh-models-media .banner{
  position:absolute !important;
  inset:0 !important;              /* КЛЮЧ */
  overflow:hidden !important;
}

.gh-models-media .banner .banner-content{
  position:relative !important;
  width:100% !important;
  height:100% !important;
}

/* КАРТИНКА: НЕ width:100% (иначе “гармошка”), центрируем через absolute */
.gh-models-media .banner .banner-content img{
  position:absolute !important;
  left:50% !important;
  top:50% !important;

  height: calc(100% * var(--gh-scale)) !important;
  width:auto !important;

  max-width:none !important;     /* перебиваем LuxShop */
  max-height:none !important;

  transform: translate(-50%,-50%) translate(var(--gh-shift-x), var(--gh-shift-y)) !important;

  display:block !important;
  margin:0 !important;
  user-select:none !important;
  -webkit-user-drag:none !important;
  pointer-events:none !important;
}

/* верхний слой (скошенный) */
.gh-models-media .banner.dev{
  z-index:2 !important;
  transform: skew(-30deg) !important;
  margin-left:-200px !important;
  width: calc(50% + 200px);       /* старт как в примере */
  transition: width 300ms ease-out;
}

.gh-models-media .banner.dev .banner-content{
  transform: skew(30deg) !important;
  margin-left:200px !important;
}

.gh-models-media .banner:not(.dev){ z-index:1 !important; }

/* Овалы "До/Після" — выше */
.gh-models-media .gh-ba-labels{
  position:absolute !important;
  left:12px !important;
  right:12px !important;
  bottom:50px !important;         /* выше/ниже: 24–60 */
  display:flex !important;
  justify-content:space-between !important;
  gap:10px !important;
  font-size:12px !important;
  pointer-events:none !important;
  z-index:5 !important;
}

.gh-models-media .gh-ba-labels span{
  background:rgba(255,255,255,.92) !important;
  border:1px solid rgba(0,0,0,.08) !important;
  padding:5px 10px !important;
  border-radius:999px !important;
}

/* МОБИЛКА: только высота меньше — эффект сохраняем */
@media (max-width: 576px){
  .gh-models-media{ max-width:100% !important; }
  .gh-models-media .banner-wrapper{ height:320px !important; }
}
/* === FIX: картинка НЕ должна центрироваться по ширине слоя (иначе "уезжает") === */
.gh-models-media .banner .banner-content{
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
}

/* ПРИБИВАЕМ к левому краю + центрируем по Y */
.gh-models-media .banner .banner-content img{
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;

  /* высота и “без гармошки” (LuxShop любит ломать max-width) */
  height: calc(100% * var(--gh-scale, 0.92)) !important;
  width: auto !important;
  max-width: none !important;

  /* фикс-сдвиг по X и по Y (НЕ зависит от ширины dev слоя) */
  transform: translate3d(var(--gh-shift-x, 0px), calc(-50% + var(--gh-shift-y, -10px)), 0) !important;

  margin: 0 !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
  pointer-events: none !important;
}
@media (max-width: 768px){
  .gh-models-media .banner-wrapper{
    --gh-shift-x: 50px;
    --gh-shift-y: -8px;
    --gh-scale: 0.88;
  }
}

/* ===== MOBILE: свои отступы/центрирование ===== */
@media (max-width: 576px){
  .gh-models-media .banner-wrapper{
    /* подгони под мобилку */
    --gh-shift-x: 40px;   /* влево (-) / вправо (+) */
    --gh-shift-y: -6px;    /* выше (-) / ниже (+) */
    --gh-scale: 0.86;      /* меньше -> чтобы точно влазило */
  }
}