/* =========================================================
   SilverTeam/Gastrock módosítás – 2026-05-28
   HERO slider végleges layout/reszponzív fix külön, utolsóként betöltött CSS-ben.

   Javított pontok:
   - a szomszédos slide-ok kerete nem lóghat át az aktuális slide-ra,
   - a videó/kép nagyobb helyet kapott,
   - a szövegpanel kompaktabb lett,
   - külön kézi nyilak is vannak, így nem csak az Owl saját navjára támaszkodunk,
   - mobilon egymás alá rendezett, reszponzív elrendezés.
   ========================================================= */

#slider.gastrock-hero-slider,
#slider.gastrock-hero-slider .homeslider{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#slider.gastrock-hero-slider .homeslider,
#slider.gastrock-hero-slider .container{
  position: relative !important;
}

#slider.gastrock-hero-slider .container{
  max-width: 1380px !important;
  width: min(1380px, calc(100% - 56px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: visible !important;
}

#slider.gastrock-hero-slider .gastrock-hero-main-carousel{
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
}

/* Fontos: nincs negatív margin és nincs nagy oldalsó padding.
   Ez szünteti meg azt, hogy az előző/következő slide fekete kerete belógjon. */
#slider.gastrock-hero-slider .gastrock-hero-main-carousel .owl-stage-outer{
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}

#slider.gastrock-hero-slider .gastrock-hero-main-carousel .owl-stage{
  display: flex !important;
  align-items: stretch !important;
}

#slider.gastrock-hero-slider .gastrock-hero-main-carousel .owl-item{
  display: flex !important;
  align-items: stretch !important;
  overflow: hidden !important;
}

#slider.gastrock-hero-slider .gastrock-hero-main-carousel .owl-item > .gastrock-hero-slide{
  width: 100% !important;
}

#slider.gastrock-hero-slider .gastrock-hero-slide{
  width: 100% !important;
  min-height: 1px !important;
  padding: 18px 14px 42px !important;
  margin: 0 !important;
  overflow: hidden !important;
  background-size: cover !important;
  background-position: center center !important;
  box-sizing: border-box !important;
}

#slider.gastrock-hero-slider .gastrock-hero-layout{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  gap: clamp(34px, 4vw, 62px) !important;
  width: 100% !important;
  max-width: 1290px !important;
  min-height: 390px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

#slider.gastrock-hero-slider .gastrock-hero-layout > [class*="col-"]{
  float: none !important;
  width: auto !important;
  max-width: none !important;
  flex: 0 1 auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Kompaktabb szövegpanel, hogy a videó nagyobb lehessen. */
#slider.gastrock-hero-slider .gastrock-hero-left{
  flex: 0 1 470px !important;
  width: 470px !important;
  max-width: 470px !important;
  min-width: 0 !important;
  align-self: center !important;
  margin: 0 !important;
  padding: 22px 24px 24px !important;
  box-sizing: border-box !important;
  transform: none !important;
  overflow: hidden !important;
  z-index: 2 !important;
}

#slider.gastrock-hero-slider .gastrock-hero-right{
  flex: 1 1 690px !important;
  width: min(690px, 100%) !important;
  max-width: 690px !important;
  min-width: 0 !important;
  align-self: center !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  z-index: 1 !important;
}

#slider.gastrock-hero-slider .gastrock-hero-layout-single .gastrock-hero-left{
  flex-basis: 640px !important;
  width: min(640px, 100%) !important;
  max-width: 640px !important;
}

#slider.gastrock-hero-slider .gastrock-hero-media-box{
  width: 100% !important;
  max-width: 100% !important;
  min-height: 280px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  border-radius: 22px !important;
  box-sizing: border-box !important;
}

#slider.gastrock-hero-slider .gastrock-hero-video-wrap{
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  min-height: 300px !important;
  max-height: 470px !important;
  overflow: hidden !important;
  border-radius: 22px !important;
  border: 2px solid #000 !important;
  box-shadow: 8px 8px 0 #000 !important;
  background: #000 !important;
}

#slider.gastrock-hero-slider .gastrock-hero-video-wrap iframe{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  border: 0 !important;
  display: block !important;
}

#slider.gastrock-hero-slider .gastrock-hero-media-box img.slider-img{
  width: 100% !important;
  height: auto !important;
  max-height: 440px !important;
  object-fit: contain !important;
  display: block !important;
}

/* Szövegpanel: manga/halftone stílus, de nem vágódik és nem lóg át. */
#slider.gastrock-hero-slider .slider-content-box{
  position: relative !important;
  isolation: isolate !important;
  background: rgba(255,255,255,.82) !important;
  border: 2px solid rgba(0,0,0,.92) !important;
  border-radius: 22px 6px 22px 6px !important;
  box-shadow: 7px 7px 0 rgba(0,0,0,.92) !important;
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
}

#slider.gastrock-hero-slider .slider-content-box h6{
  display: inline-block !important;
  padding: 4px 12px !important;
  margin-bottom: 14px !important;
  background: rgba(255,255,255,.78) !important;
  border: 1px solid rgba(0,0,0,.70) !important;
  border-radius: 999px !important;
}

#slider.gastrock-hero-slider .slider-content-box h1{
  margin-top: 0 !important;
  margin-bottom: 14px !important;
  line-height: 1.13 !important;
}

#slider.gastrock-hero-slider .slider-content-box p{
  margin-bottom: 0 !important;
}

/* Az Owl saját nyilait is láthatóvá tesszük, ha a JS ezt rendereli. */
#slider.gastrock-hero-slider .gastrock-hero-main-carousel .owl-nav{
  margin: 0 !important;
  pointer-events: none !important;
}

#slider.gastrock-hero-slider .gastrock-hero-main-carousel .owl-nav button.owl-prev,
#slider.gastrock-hero-slider .gastrock-hero-main-carousel .owl-nav button.owl-next{
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 44px !important;
  height: 62px !important;
  border-radius: 18px !important;
  background: rgba(0,0,0,.88) !important;
  color: #fff !important;
  border: 2px solid rgba(255,255,255,.78) !important;
  box-shadow: 4px 4px 0 rgba(0,0,0,.25) !important;
  z-index: 40 !important;
  pointer-events: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

#slider.gastrock-hero-slider .gastrock-hero-main-carousel .owl-nav button.owl-prev{ left: 10px !important; }
#slider.gastrock-hero-slider .gastrock-hero-main-carousel .owl-nav button.owl-next{ right: 10px !important; }

#slider.gastrock-hero-slider .gastrock-hero-main-carousel .owl-nav button.owl-prev::before,
#slider.gastrock-hero-slider .gastrock-hero-main-carousel .owl-nav button.owl-next::before{
  display: block !important;
  font-size: 38px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  color: #fff !important;
  margin-top: -3px !important;
}
#slider.gastrock-hero-slider .gastrock-hero-main-carousel .owl-nav button.owl-prev::before{ content: "‹" !important; }
#slider.gastrock-hero-slider .gastrock-hero-main-carousel .owl-nav button.owl-next::before{ content: "›" !important; }
#slider.gastrock-hero-slider .gastrock-hero-main-carousel .owl-nav button span,
#slider.gastrock-hero-slider .gastrock-hero-main-carousel .owl-nav button i{ display: none !important; }

/* Kézi/fallback nyilak: akkor is működnek, ha az Owl saját navja valamiért rejtve marad. */
#slider.gastrock-hero-slider .gastrock-hero-manual-nav{
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 75 !important;
  pointer-events: none !important;
}

#slider.gastrock-hero-slider .gastrock-hero-manual-nav button{
  position: absolute !important;
  top: 0 !important;
  transform: translateY(-50%) !important;
  width: 48px !important;
  height: 66px !important;
  border-radius: 18px !important;
  background: rgba(0,0,0,.90) !important;
  color: #fff !important;
  border: 2px solid rgba(255,255,255,.85) !important;
  box-shadow: 5px 5px 0 rgba(0,0,0,.28) !important;
  z-index: 76 !important;
  pointer-events: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  cursor: pointer !important;
}

#slider.gastrock-hero-slider .gastrock-hero-manual-nav button span{
  display: block !important;
  font-size: 42px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  color: #fff !important;
  margin-top: -4px !important;
}

#slider.gastrock-hero-slider .gastrock-hero-manual-prev{ left: 8px !important; }
#slider.gastrock-hero-slider .gastrock-hero-manual-next{ right: 8px !important; }

#slider.gastrock-hero-slider .gastrock-hero-main-carousel .owl-dots{
  margin-top: -12px !important;
  position: relative !important;
  z-index: 20 !important;
}

@media screen and (max-width: 1399px){
  #slider.gastrock-hero-slider .gastrock-hero-left{
    flex-basis: 440px !important;
    width: 440px !important;
    max-width: 440px !important;
  }
  #slider.gastrock-hero-slider .gastrock-hero-right{
    flex-basis: 650px !important;
    max-width: 650px !important;
  }
}

@media screen and (max-width: 1199px){
  #slider.gastrock-hero-slider .container{
    width: min(1140px, calc(100% - 42px)) !important;
  }
  #slider.gastrock-hero-slider .gastrock-hero-layout{
    gap: 28px !important;
    max-width: 1040px !important;
  }
  #slider.gastrock-hero-slider .gastrock-hero-left{
    flex-basis: 430px !important;
    width: 430px !important;
    max-width: 430px !important;
  }
  #slider.gastrock-hero-slider .gastrock-hero-right{
    flex-basis: calc(100% - 458px) !important;
    width: calc(100% - 458px) !important;
    max-width: 600px !important;
  }
  #slider.gastrock-hero-slider .gastrock-hero-video-wrap{
    min-height: 250px !important;
  }
}

@media screen and (max-width: 991px){
  #slider.gastrock-hero-slider .container{
    width: min(100% - 28px, 760px) !important;
  }
  #slider.gastrock-hero-slider .gastrock-hero-slide{
    padding: 12px 4px 34px !important;
  }
  #slider.gastrock-hero-slider .gastrock-hero-layout{
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 24px !important;
    min-height: 1px !important;
    max-width: 100% !important;
  }
  #slider.gastrock-hero-slider .gastrock-hero-left,
  #slider.gastrock-hero-slider .gastrock-hero-right{
    flex-basis: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  #slider.gastrock-hero-slider .gastrock-hero-video-wrap{
    min-height: 0 !important;
    max-height: none !important;
  }
  #slider.gastrock-hero-slider .gastrock-hero-media-box img.slider-img{
    max-height: 360px !important;
  }
  #slider.gastrock-hero-slider .gastrock-hero-manual-nav{
    top: auto !important;
    bottom: 8px !important;
    transform: none !important;
    display: flex !important;
    justify-content: center !important;
    gap: 14px !important;
  }
  #slider.gastrock-hero-slider .gastrock-hero-manual-nav button{
    position: static !important;
    transform: none !important;
    width: 42px !important;
    height: 48px !important;
  }
  #slider.gastrock-hero-slider .gastrock-hero-main-carousel .owl-nav{
    display: none !important;
  }
}

@media screen and (max-width: 575px){
  #slider.gastrock-hero-slider .container{
    width: calc(100% - 18px) !important;
  }
  #slider.gastrock-hero-slider .gastrock-hero-slide{
    padding: 8px 0 64px !important;
  }
  #slider.gastrock-hero-slider .gastrock-hero-left{
    padding: 16px 16px 18px !important;
    box-shadow: 5px 5px 0 rgba(0,0,0,.92) !important;
  }
  #slider.gastrock-hero-slider .slider-content-box h1{
    font-size: clamp(25px, 8vw, 34px) !important;
  }
  #slider.gastrock-hero-slider .slider-content-box p{
    font-size: 15px !important;
  }
  #slider.gastrock-hero-slider .gastrock-hero-media-box img.slider-img{
    max-height: 290px !important;
  }
}


/**
 * SilverTeam/Gastrock módosítás – 2026-05-29
 * Hero betöltési stabilizálás.
 *
 * Cél:
 * - az Owl Carousel inicializálása előtt ne jelenjen meg egymás alatt az 1. és 2. slide,
 * - a hero első betöltéskor ne "ugorjon vissza" a helyére,
 * - csak az első slide foglaljon helyet addig, amíg a JS slider el nem indul.
 */
#slider.gastrock-hero-slider .gastrock-hero-main-carousel:not(.owl-loaded) {
  display: block !important;
  overflow: hidden !important;
  position: relative !important;
}

#slider.gastrock-hero-slider .gastrock-hero-main-carousel:not(.owl-loaded) .gastrock-hero-slide {
  display: none !important;
}

#slider.gastrock-hero-slider .gastrock-hero-main-carousel:not(.owl-loaded) .gastrock-hero-slide:first-child {
  display: block !important;
}

#slider.gastrock-hero-slider .gastrock-hero-main-carousel:not(.owl-loaded) .gastrock-hero-manual-nav,
#slider.gastrock-hero-slider .gastrock-hero-main-carousel:not(.owl-loaded) .owl-nav,
#slider.gastrock-hero-slider .gastrock-hero-main-carousel:not(.owl-loaded) .owl-dots {
  display: none !important;
}

/* A hero betöltési javítás nem állít fix min-height értéket, hogy ne változzon a hero mérete. */
@media screen and (max-width: 575px){
  #slider.gastrock-hero-slider .gastrock-hero-video-wrap{
    height: clamp(190px, 56.25vw, 260px) !important;
    min-height: 190px !important;
    max-height: 260px !important;
  }
}


/**
 * SilverTeam/Gastrock módosítás – 2026-05-29
 * Hero mobil embed végleges szélesség/magasság kényszerítés.
 *
 * A Messenger / mobil WebView alatt a YouTube iframe wrapper szélessége néha
 * összeesett, ezért csak két függőleges fekete vonal látszott. Itt nem csak
 * magasságot, hanem a teljes mobilos médiaoszlopot és iframe-et is viewport
 * alapú, stabil szélességre kényszerítjük.
 */
@media screen and (max-width: 991px){
  #slider.gastrock-hero-slider .gastrock-hero-layout.gastrock-hero-layout-two{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
  }

  #slider.gastrock-hero-slider .gastrock-hero-right{
    float: none !important;
    flex: 0 0 auto !important;
    flex-basis: auto !important;
    align-self: center !important;
    display: block !important;
    width: calc(100vw - 28px) !important;
    min-width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  #slider.gastrock-hero-slider .gastrock-hero-media-box{
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  #slider.gastrock-hero-slider .gastrock-hero-video-wrap{
    display: block !important;
    position: relative !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
    border-radius: 18px !important;
    border: 2px solid #000 !important;
    box-shadow: 6px 6px 0 #000 !important;
    background: #000 !important;
  }

  #slider.gastrock-hero-slider .gastrock-hero-video-wrap::before{
    content: "" !important;
    display: block !important;
    width: 100% !important;
    padding-top: 56.25% !important;
  }

  #slider.gastrock-hero-slider .gastrock-hero-video-wrap iframe{
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
    border: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
}

@media screen and (max-width: 575px){
  #slider.gastrock-hero-slider .gastrock-hero-right{
    width: calc(100vw - 28px) !important;
    min-width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
  }

  #slider.gastrock-hero-slider .gastrock-hero-video-wrap{
    border-radius: 16px !important;
  }
}

/* =========================================================
   SilverTeam/GastRock módosítás – 2026-06-04
   HERO slider szövegbox középre igazítás.

   Kérés:
   - nem a Nagymama/Csigusz/egyedi gyűjtőoldalak hero panelje,
   - hanem a főoldal legelső szekciója, a Hero slider szövegboxa legyen középre igazítva.

   Érintett elem:
   - #slider.gastrock-hero-slider .slider-content-box
   ========================================================= */
#slider.gastrock-hero-slider .slider-content-box,
#slider.gastrock-hero-slider .slider-content-box h6,
#slider.gastrock-hero-slider .slider-content-box h1,
#slider.gastrock-hero-slider .slider-content-box p{
  text-align: center !important;
}

#slider.gastrock-hero-slider .slider-content-box h6{
  margin-left: auto !important;
  margin-right: auto !important;
}