@charset "UTF-8";

/* DESKTOP */
@media screen and (min-width: 1280px) {
  /* Query Rules */
  .media-mobile {
    display: none !important;
  }
  .media-reduced {
    display: none !important;
  }
  .media-not-desktop {
    display: none !important;
  }

  #filters-drop-down {
    height: auto !important;
    max-height: 100vh !important;
  }
  #search-input:focus {
    width: 300px;
  }
}

/* REDUCED */
@media screen and (min-width: 920px) and (max-width: 1279px) {
  /* Query Rules */
  .media-desktop {
    display: none !important;
  }
  .media-mobile {
    display: none !important;
  }
  .media-not-reduced {
    display: none !important;
  }

  .grid-1-2-cols {
    grid-template-columns: 2fr 3fr;
  }

  #brands-carousel items,
  #highlights-grid {
    --cols: 3;
  }
  #products-grid {
    --cols: 3;
  }
  #search-input:focus {
    width: 250px;
  }
}

/* MOBILE */
@media screen and (max-width: 919px) {
  /* Query Rules */
  .media-desktop {
    display: none !important;
  }
  .media-reduced {
    display: none !important;
  }
  .media-not-mobile {
    display: none !important;
  }

  main > section:last-child {
    background-size: 200% auto;
  }

  .flex-row {
    justify-content: center;
  }
  .grid-1-col {
    justify-content: center;
    justify-items: center;
  }
  .grid-1-2-cols {
    grid-template-columns: 1fr;
  }
  .grid-2-cols, .grid-3-cols {
    --cols: 1;
  }
  .grid-4-cols {
    --cols: 2;
  }
  .cart-product-name {
    display: none;
  }

  #brands-carousel items,
  #highlights-grid {
    --cols: 2;
  }
  #filters-drop-down {
    align-items: center;
  }
  #meet-us, #our-variety {
    text-align: center;
  }
  #main-menu {
    max-height: 80vh;
    width: 50vw;
  }
  #main-menu.active {
    overflow: scroll;
  }
  #meet-us {
    background-image:
    linear-gradient(
      to bottom,
      transparent 10%,
      var(--dap-cyan) 10%
    );
    margin-bottom: 0px;
    padding-bottom: 4em;
  }
  #product-info {
    text-align: center;
    align-items: center;
  }
  #total-grid {
    justify-items: center;
    text-align: center;
  }
    #total-grid div {
      justify-self: center;
    }
  #showroom-grid {
    grid-template-columns: 1fr;
  }
  #splash {
    height: 365px;
    margin-bottom: 1em;
  }
    #splash::after {
      height: 60px;
    }
    #splash slideshow > button {
      display: none;
    }

  carousel {
    --controls-padding: -2rem;
  }
}
@media screen and (max-width: 550px) {
  #brands-carousel items,
  #highlights-grid {
    --cols: 1;
  }
}