/*
  AP2 – Új, stabil mini körhinta (Hamarosan lejáró kedvezmények)
  Cél: mobilon soha ne vágódjon le az alja, ne legyen fix magasság lánc, ne ütközzön a régi CSS hotfixekkel.
  Megoldás: natív vízszintes scroll + scroll-snap, automatikus magasság.
*/

.ap2-soon-carousel{
  background:#efe5cf;
  border-bottom:1px solid #d9c59c;
  padding:8px 10px 10px;
  box-sizing:border-box;
}

.ap2-soon-carousel__head{
  font-size:12px;
  font-weight:700;
  color:#6d4c00;
  margin:0 0 8px;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.ap2-soon-carousel__viewport{
  position:relative;
  overflow-x:auto;
  overflow-y:visible;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  scroll-padding:10px;
  scrollbar-width:thin;
}

.ap2-soon-carousel__track{
  display:flex;
  gap:10px;
  align-items:stretch;
  padding:2px 2px 10px;
  box-sizing:border-box;
}

/* Kártya – felülírjuk a régi .ap-soon-card szélesség/height szabályait csak ebben a modulban */
.ap2-soon-carousel .ap-soon-card{
  flex:0 0 240px;
  width:auto;
  min-width:240px;
  max-width:280px;
  display:flex;
  flex-direction:column;
  gap:6px;
  border:1px solid #d8c39a;
  background:#fff8e9;
  border-radius:10px;
  padding:8px;
  box-sizing:border-box;
  overflow:visible;
  min-height:160px;
  height:auto;
  scroll-snap-align:start;
  scroll-snap-stop:always;
}

.ap2-soon-carousel .ap-soon-card__title{
  font-size:14px;
  font-weight:700;
  color:#a5003a;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.ap2-soon-carousel .ap-soon-card__imgwrap{
  display:block;
  width:100%;
  aspect-ratio: 16 / 9;
  border-radius:8px;
  overflow:hidden;
  background:#fff;
  border:1px solid #edd4d4;
}

.ap2-soon-carousel .ap-soon-card__imgwrap img,
.ap2-soon-carousel .ap-soon-card__img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.ap2-soon-carousel .ap-soon-card__meta{
  display:grid;
  grid-template-columns:1fr;
  gap:4px;
  margin-top:auto; /* Meta mindig alul */
}

.ap2-soon-carousel .ap-soon-card__sales{
  font-size:12px;
  line-height:1.1;
  opacity:.85;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.ap2-soon-carousel .ap-soon-card__price{
  font-size:13px;
  font-weight:800;
  color:#c0392b;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.ap2-soon-carousel .ap-soon-card__cd,
.ap2-soon-carousel .ap-soon-card__countdown{
  font-size:12px;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-height:14px;
}

.ap2-soon-carousel .ap-soon-card__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 10px;
  border-radius:8px;
  background:#28a745;
  color:#fff;
  font-weight:800;
  font-size:13px;
}

/* Desktop navigáció gombok (JS beszúrja) */
.ap2-soon-carousel__nav{
  display:none;
}

@media (min-width: 992px){
  .ap2-soon-carousel{
    padding:8px 10px 12px;
  }

  .ap2-soon-carousel__viewport{
    padding-left:34px;
    padding-right:34px;
  }

  .ap2-soon-carousel__nav{
    display:flex;
    align-items:center;
    justify-content:center;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:28px;
    height:28px;
    border-radius:999px;
    border:1px solid rgba(0,0,0,.15);
    background:rgba(255,255,255,.9);
    cursor:pointer;
    z-index:3;
    user-select:none;
  }
  .ap2-soon-carousel__nav:active{ transform:translateY(-50%) scale(0.98); }
  .ap2-soon-carousel__nav--prev{ left:4px; }
  .ap2-soon-carousel__nav--next{ right:4px; }
  .ap2-soon-carousel__nav svg{ width:14px; height:14px; }
}

@media (max-width: 768px){
  .ap2-soon-carousel{
    padding:10px 10px 12px;
  }
  .ap2-soon-carousel__head{ font-size:13px; }
  .ap2-soon-carousel .ap-soon-card{
    flex-basis: 78vw;
    min-width: 78vw;
    max-width: 78vw;
    min-height: 175px;
  }
}

@media (max-width: 420px){
  .ap2-soon-carousel .ap-soon-card{
    flex-basis: 86vw;
    min-width: 86vw;
    max-width: 86vw;
  }
}


/* === v4 finomhangolás: csak a banner/körhinta hibák javítása, az eredeti rács megtartásával === */

/* A banner kártya maradjon az eredeti helyén, ne rendezze át a teljes gridet */
.ap-card--banner{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  height:auto !important;
}

/* A felső körhinta rész ne tudja összenyomni a banner fő képét */
.ap-card--banner > .ap2-soon-carousel,
.ap-card--banner > .ap-banner-topstrip{
  flex:0 0 auto !important;
  width:100% !important;
  max-width:100% !important;
  overflow:hidden !important;
}

/* A banner fő rész kapjon stabil magasságot, de ne legyen túlfeszítve */
.ap-card--banner > .ap-banner-main{
  position:relative !important;
  flex:1 1 auto !important;
  width:100% !important;
  min-height:220px !important;
  height:auto !important;
  max-height:none !important;
  overflow:hidden !important;
  background:#000 !important;
}

/* Közepes/laptop nézetben se essen össze vékony csíkká */
@media (min-width: 769px){
  .ap-card--banner > .ap-banner-main{
    min-height:260px !important;
  }
}

/* Mobilon kompaktabb, de maradjon olvasható */
@media (max-width: 768px){
  .ap-card--banner > .ap-banner-main{
    min-height:190px !important;
  }
}

/* A banner tartalma igazodjon a rendelkezésre álló helyhez */
.ap-card--banner .ap-banner-fill,
.ap-card--banner .ap-banner-link{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
}

/* Képnél inkább a teljes tartalom látszódjon, ne vágja le agresszíven */
.ap-card--banner .ap-banner-media,
.ap-card--banner .ap-banner-media--img,
.ap-card--banner .ap-banner-media--video{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  display:block !important;
}

.ap-card--banner .ap-banner-bg--contain,
.ap-card--banner .ap-banner-bg--cover{
  background-size:contain !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
}

.ap-card--banner .ap-banner-bg--blur{
  background-size:cover !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
}
