/* NOTE: this stylesheet is for global RWD rules related to page layout and positioning
    - for more specific RWD targeting, dedicated stylesheets should be used in their respective directories (e.g. 'css/catalog/_rwd/mobile.less)
    - if it makes sense to put this file in the top level css directory, then this should be renamed 'rwd' (i.e. 'css/rwd.less')

    *** including catalog page RWD since it's such a prominent section -- may want to modularize this out later

    ========== NOTE ABOUT CLS: ==========
    Many CLS rules also require media queries (e.g. page/default_cls.less, product/default_cls.less), but the intention is a little different from RWD
      - RWD is focused on UX -- making sure design looks right on actual devices
      - CLS is focused on page load performance, esp as Google sees it
        -- i.e. the rules don't make any difference to what the user sees
    So, while there is crossover and shared breakpoints, the intention is different.  This is why I'm keeping CLS and RWD separate.  Also, in the event of any problems with CLS-specific rules, it's a lot easier to disable those rules specifically if they're already in dedicated stylesheets.
    ======================================
*/
#maincontent.container,
footer.page-footer {
  max-width: unset;
}
@media only screen and (min-width: 1390px) {
  .header-sticker .container,
  .header-sticker .nav-container,
  .slide-showcase,
  #maincontent.container,
  footer.page-footer {
    width: 1350px;
    margin: 0 auto !important;
  }
}
@media only screen and (max-width: 1389px) {
  .header-sticker .header-main-content,
  .header-sticker .nav-container,
  .slide-showcase,
  #maincontent.container,
  footer.page-footer {
    width: 1172px;
    margin: 0 auto !important;
  }
}
@media only screen and (max-width: 1211px) {
  .header-sticker .header-main-content,
  .header-sticker .nav-container,
  .slide-showcase,
  #maincontent.container,
  footer.page-footer {
    width: 992px;
    margin: 0 auto !important;
  }
  .header-sticker .header-main-content .column.main div.filter,
  .header-sticker .nav-container .column.main div.filter,
  .slide-showcase .column.main div.filter,
  #maincontent.container .column.main div.filter,
  footer.page-footer .column.main div.filter {
    width: 21%;
  }
}
@media only screen and (max-width: 1031px) {
  .header-sticker .header-main-content,
  .header-sticker .nav-container,
  .slide-showcase,
  #maincontent.container,
  footer.page-footer {
    width: 890px;
    margin: 0 auto !important;
  }
  .header-sticker .header-main-content .column.main div.filter,
  .header-sticker .nav-container .column.main div.filter,
  .slide-showcase .column.main div.filter,
  #maincontent.container .column.main div.filter,
  footer.page-footer .column.main div.filter {
    width: 32.5%;
  }
  .header-sticker .header-main-content .column.main div.filter div.filter-content,
  .header-sticker .nav-container .column.main div.filter div.filter-content,
  .slide-showcase .column.main div.filter div.filter-content,
  #maincontent.container .column.main div.filter div.filter-content,
  footer.page-footer .column.main div.filter div.filter-content {
    font-size: 90%;
  }
  .header-sticker .header-main-content .column.main div.category-products,
  .header-sticker .nav-container .column.main div.category-products,
  .slide-showcase .column.main div.category-products,
  #maincontent.container .column.main div.category-products,
  footer.page-footer .column.main div.category-products,
  .header-sticker .header-main-content .column.main div.category-description,
  .header-sticker .nav-container .column.main div.category-description,
  .slide-showcase .column.main div.category-description,
  #maincontent.container .column.main div.category-description,
  footer.page-footer .column.main div.category-description {
    width: 66.66667%;
  }
}
@media only screen and (max-width: 991px) {
  .header-sticker .header-main-content,
  .header-sticker .nav-container,
  .slide-showcase,
  #maincontent.container,
  footer.page-footer {
    width: 840px;
    margin: 0 auto !important;
  }
  #maincontent.container .column.main div.category-products .products.list li.product-item {
    margin-bottom: 85px;
    width: 50%;
  }
}
@media only screen and (max-width: 912px) {
  .header-sticker .header-main-content,
  .header-sticker .nav-container,
  .slide-showcase,
  #maincontent.container,
  footer.page-footer {
    width: 750px;
    margin: 0 auto !important;
  }
  .header-sticker .nav-container {
    padding-left: 0;
  }
}
@media only screen and (max-width: 799px) {
  .header-sticker .header-main-content,
  .slide-showcase,
  #maincontent.container,
  footer.page-footer {
    width: 710px;
    margin: 0 auto !important;
  }
}
@media only screen and (max-width: 767px) {
  .header-sticker .header-main-content,
  .header-sticker .nav-container,
  .slide-showcase,
  #maincontent.container,
  footer.page-footer {
    width: 100%;
  }
}
/* ADDITIONAL BREAKPOINTS used for CLS (e.g. page/default_cls.less)
// iPhone 4 and 5/SE
@media only screen and (max-width: 320px)
// Galaxy Fold
@media screen and (max-width: 280px)
// generic small
@media screen and (max-width: 280px)

*/