/*
 * Shared desktop product-grid contract.
 * Mobile geometry remains owned by product-card/mobile.css.
 * Card internals remain owned by product-card/desktop.css.
 */

@media screen and (min-width: 768px) {
  .budscho-product-listing {
    --budscho-product-card-gap: 24px;
  }

  .budscho-product-grid {
    margin-right: calc(var(--budscho-product-card-gap) / -2) !important;
    margin-left: calc(var(--budscho-product-card-gap) / -2) !important;
  }

  .budscho-product-grid > .col-grid {
    margin-bottom: var(--budscho-product-card-gap);
    padding-right: calc(var(--budscho-product-card-gap) / 2) !important;
    padding-left: calc(var(--budscho-product-card-gap) / 2) !important;
  }

  .budscho-product-grid > .col-list {
    --budscho-product-list-row-gap: 30px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin-bottom: var(--budscho-product-list-row-gap);
    padding-right: calc(var(--budscho-product-card-gap) / 2) !important;
    padding-left: calc(var(--budscho-product-card-gap) / 2) !important;
  }

  .budscho-product-grid > .col-grid > .product-card {
    margin-bottom: 0 !important;
  }

  .budscho-product-listing--carousel .module-slider.product-sliders .slick-list {
    margin-right: calc(var(--budscho-product-card-gap) / -2) !important;
    margin-left: calc(var(--budscho-product-card-gap) / -2) !important;
  }

  .budscho-product-listing--carousel .module-slider.product-sliders .slick-slide {
    padding-right: calc(var(--budscho-product-card-gap) / 2) !important;
    padding-left: calc(var(--budscho-product-card-gap) / 2) !important;
  }
}

@media screen and (min-width: 1400px) {
  .budscho-product-listing.container {
    max-width: min(1600px, calc(100vw - 64px));
  }

  .budscho-product-listing--category .budscho-product-listing__body {
    flex-wrap: nowrap;
  }

  .budscho-product-listing--category .budscho-product-listing__body > #column-left {
    flex: 0 0 300px;
    width: 300px;
    max-width: 300px;
  }

  .budscho-product-listing--category .budscho-product-listing__body > #content {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
  }

  .budscho-product-listing--full .budscho-product-grid > .col-grid {
    width: 20% !important;
    max-width: 20% !important;
  }

  .budscho-product-listing--category .budscho-product-grid > .col-grid {
    width: 25% !important;
    max-width: 25% !important;
  }
}

@media screen and (min-width: 2200px) {
  .budscho-product-listing.container {
    max-width: 1840px;
  }

  .budscho-product-listing--full .budscho-product-grid > .col-grid {
    width: 16.6667% !important;
    max-width: 16.6667% !important;
  }

  .budscho-product-listing--category .budscho-product-grid > .col-grid {
    width: 20% !important;
    max-width: 20% !important;
  }
}