/*
 * tavvezerles.hu - mobil megjelenes javitasok
 * A css/style.css UTAN toltodik be, csak keskeny kepernyon ervenyes.
 * A js/mobile.js hozza letre a .m-slider kartyas bannersort.
 */

.m-slider { display: none; }

@media (max-width: 767px) {

  /* ---------- Cimlap: banner-sor (js/mobile.js) ---------- */
  .slider.rs-slider.m-hidden { display: none !important; }

  .m-slider {
    display: block;
    position: relative;
    margin: 0 0 18px;
    border-bottom: 1px solid #e6e6e6;
  }

  /* a vizszintes lapozast a js/mobile.js kezeli (touch), az oldal fuggoleges gorgetese marad */
  .m-slider-view {
    overflow: hidden;
    touch-action: pan-y;
  }

  .m-slider-track {
    display: flex;
    will-change: transform;
  }

  .m-slide {
    flex: 0 0 100%;
    box-sizing: border-box;
    min-width: 0;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    display: block;
    color: #333;
    text-decoration: none;
    background: #fff;
  }

  .m-slide:hover,
  .m-slide:focus { color: #333; text-decoration: none; }

  .m-slide img {
    display: block;
    width: 100%;
    height: 42vw;
    min-height: 130px;
    max-height: 260px;
    object-fit: cover;
    object-position: center;
  }

  .m-slide-body { padding: 14px 16px 6px; }

  .m-slide h3 {
    margin: 0 0 8px;
    font-size: 20px;
    line-height: 1.25;
    font-weight: 700;
    color: #222;
  }

  /* a kartyak egyforma magasak (nincs elrendezes-valtozas lapozas kozben), ezert a hosszu szoveg vegere ... kerul */
  .m-slide h3,
  .m-slide p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .m-slide h3 { -webkit-line-clamp: 3; }

  .m-slide p {
    -webkit-line-clamp: 3;
    margin: 0 0 8px;
    font-size: 15px;
    line-height: 1.45;
    color: #444;
  }

  .m-chips { margin: 0 0 6px; }

  .m-chips span {
    display: inline-block;
    margin: 0 6px 6px 0;
    padding: 2px 11px;
    border: 1px solid #d0d0d0;
    border-radius: 14px;
    font-size: 13px;
    line-height: 20px;
    color: #555;
  }

  .m-btn {
    display: inline-block;
    margin: 4px 0 10px;
    padding: 9px 16px;
    border-radius: 4px;
    background: #ea4e16;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
  }

  .m-slider-dots {
    display: flex;
    justify-content: center;
    padding: 4px 0 12px;
  }

  .m-slider-dots button {
    width: 8px;
    height: 8px;
    margin: 0 4px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #cfcfcf;
    outline: 0;
  }

  .m-slider-dots button.on { background: #ea4e16; }

  /* ---------- Cimlap: bevezeto szoveg ---------- */
  /* A .row negativ margoja miatt oszlop nelkul a szoveg kilogott a kepernyorol */
  article.content > .container > .row > p,
  article.content > .container > .row > div:not([class]) {
    padding-left: 15px;
    padding-right: 15px;
  }

  article.content > .container > .row > p {
    font-size: 15px;
    line-height: 1.55;
    text-align: left;
  }

  /* ---------- Cimlap: hirek ---------- */
  /* a cim linkje is megkapja a .cim_lead_title osztalyt, ezert kulon kell allitani */
  h2.cim_lead_title,
  h2.cim_lead_title a.cim_lead_title {
    font-size: 19px;
    line-height: 1.3;
  }

  h2.cim_lead_title { margin-bottom: 6px; }

  .cim_lead_bx .entry-content {
    font-size: 15px;
    line-height: 1.5;
  }

  /* ---------- Cimlap: 8 temakor csempe ---------- */
  article .cim_csempe {
    -webkit-columns: auto;
    columns: auto;
  }

  .csempe { padding: 0 0 14px; }

  .csempe .cim_lead_bx { margin: 0; }

  .csempe .entry-meta { display: none; }

  .csempe img {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 6px;
  }

  .csempe img:hover {
    transform: none;
    border: 0;
    box-shadow: none;
  }

  /* ---------- Termek adatlap: kepgaleria (js/mobile.js) ---------- */
  /* Az elevateZoom atlatszo retege elnyelte az erintest: nem lehetett gorgetni, es koppintasra nagyitott */
  .zoomContainer { display: none !important; }

  .image-box.m-hidden { display: none !important; }

  .m-gallery {
    margin: 0 0 16px;
    border-bottom: 0;
  }

  .m-gal-slide {
    flex: 0 0 100%;
    box-sizing: border-box;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 62vw;
    max-height: 320px;
    background: #fff;
  }

  .m-gal-slide img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  /* ---------- Termek adatlap: nev es megnevezes ---------- */
  h1.title:has(+ h4.tvz-megnev) {
    font-size: 24px;
    line-height: 1.25;
    margin-bottom: 8px;
  }

  h4.tvz-megnev {
    font-size: 16px;
    line-height: 1.4;
    margin-top: 0;
    margin-bottom: 18px;
  }

  /* ---------- Termek adatlap: ar ---------- */
  .product-page .col-md-7 .price-box .price {
    font-size: 26px;
    line-height: 30px;
  }

  .product-page .col-md-7 .price-box { padding-bottom: 20px; }

  /* ---------- Termek adatlap: "A termek megvasarlasa..." doboz ---------- */
  /* inline stilusa fix 450px szeles, a kinyitott linkek jobb szele levagodott */
  #tobuy {
    display: block !important;
    width: 100% !important;
    max-width: 100%;
    margin-bottom: 14px;
  }

  /* a doboz utani ket ures sortores */
  #tobuy ~ br { display: none; }
}