/*
 * LIOVELA B2C V65 - MOBILE OWL HARD RESET / SCROLLWIDTH FIX
 * Autor: Modyfikator stworzony przez gumis
 *
 * Cel:
 * - po V64 nadal zostawały szerokie inline .owl-wrapper 3000-5000px,
 * - na mobile wymuszamy statyczny, jednokolumnowy układ karuzel,
 * - bez zmiany desktopu oraz bez przestawiania logo/koszyka/lupy/quicknav.
 */

@media (max-width: 991px) {
  html,
  body {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box !important;
  }

  body,
  #page,
  main,
  #wrapper,
  #content-wrapper,
  #content,
  .page-wrapper,
  .main-wrapper,
  .columns-container,
  .container,
  .container-fluid,
  .row,
  .featured-products,
  .products,
  .product_list,
  .js-product-list,
  .home_blog_post,
  .ets_blog,
  .ets_blog_home,
  .ets-blog-wrapper,
  .ets-blog-latest-post-wrapper,
  .footer-container {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /*
   * OWL 1.x / stare moduły CP / ETS Blog.
   * Diagnostyka po V64 nadal widziała:
   * .owl-wrapper width 3260-5160px i przyciski wishlist na x=1500-2500px.
   * Dlatego na mobile nie tylko chowamy overflow, ale resetujemy wrapper i elementy slajdów.
   */
  .owl-carousel,
  .owl-carousel *,
  .owl-wrapper-outer,
  .owl-stage-outer,
  .cp-carousel,
  .cp_product_slider,
  .cp-categoryproductsslider,
  .cp-products-slider,
  .products.owl-carousel,
  .ets_blog .owl-carousel,
  .ets_blog_home .owl-carousel,
  .ets-blog-latest-post-wrapper .owl-carousel {
    max-width: 100% !important;
  }

  .owl-carousel,
  .owl-wrapper-outer,
  .owl-stage-outer,
  .ets_blog .owl-wrapper-outer,
  .ets_blog_home .owl-wrapper-outer,
  .ets-blog-latest-post-wrapper .owl-wrapper-outer {
    width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
  }

  .owl-carousel .owl-wrapper,
  .owl-carousel .owl-stage,
  .owl-wrapper,
  .owl-stage,
  .ets_blog .owl-wrapper,
  .ets_blog_home .owl-wrapper,
  .ets-blog-latest-post-wrapper .owl-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    left: 0 !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
    transition: none !important;
    overflow: hidden !important;
    display: block !important;
  }

  .owl-carousel .owl-item,
  .owl-wrapper .owl-item,
  .owl-stage .owl-item,
  .ets_blog .owl-item,
  .ets_blog_home .owl-item,
  .ets-blog-latest-post-wrapper .owl-item {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    float: none !important;
    clear: both !important;
    display: block !important;
    left: 0 !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
    position: relative !important;
  }

  .owl-carousel .owl-item > *,
  .owl-wrapper .owl-item > *,
  .owl-stage .owl-item > *,
  .owl-carousel .item,
  .owl-carousel article,
  .product-miniature,
  article.product-miniature,
  .thumbnail-container,
  .ets_item_img,
  .ets-blog-latest-post-content,
  .ets-blog-sidear-post-meta {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    left: 0 !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /*
   * Przyciski produktu/wishlist były raportowane poza ekranem,
   * bo należały do niewidocznych slajdów karuzeli.
   */
  .owl-carousel .add-to-cart-or-refresh,
  .owl-carousel .wishlist,
  .owl-carousel .st-wishlist-button,
  .owl-carousel .st-wishlist-bt-content,
  .owl-carousel .st-wishlist-title,
  .owl-carousel .quick-view,
  .ets_blog .add-to-cart-or-refresh,
  .ets_blog .wishlist,
  .ets_blog .st-wishlist-button,
  .ets_blog .quick-view {
    left: auto !important;
    right: auto !important;
    transform: none !important;
    -webkit-transform: none !important;
    max-width: 100% !important;
  }

  img,
  picture,
  video,
  iframe,
  table,
  .ets_item_img img,
  .ets_item_img picture,
  .ets_blog img,
  .ets_blog_home img,
  .thumbnail-container img {
    max-width: 100% !important;
    height: auto !important;
  }

  /*
   * Koszyk 768px: diagnostyka pokazała x=-10 na cart-grid-body/cart-grid-right.
   * To typowe ujemne marginesy bootstrapa, ale kasujemy je na mobile/tablecie.
   */
  body#cart .cart-grid,
  body#cart .cart-grid-body,
  body#cart .cart-grid-right,
  body#cart .cart-summary,
  body#cart .cart-overview,
  body#cart .cart-item,
  body#cart .product-line-grid {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
  }

  body#cart .cart-grid.row,
  body#cart .cart-grid .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body#cart .cart-grid-body.col-xs-12,
  body#cart .cart-grid-right.col-xs-12 {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  body#cart .bootstrap-touchspin .btn-touchspin,
  body#cart button.btn-touchspin,
  body#cart .cart-line-product-actions .remove-from-cart,
  body#cart a.remove-from-cart {
    min-width: 34px !important;
    min-height: 34px !important;
    line-height: 32px !important;
  }
}

@media (max-width: 480px) {
  .owl-carousel,
  .owl-wrapper-outer,
  .owl-stage-outer,
  .owl-wrapper,
  .owl-stage,
  .owl-item,
  .ets_blog,
  .ets_blog_home,
  .ets-blog-wrapper,
  .ets-blog-latest-post-wrapper {
    max-width: 100vw !important;
  }
}