/** Shopify CDN: Minification failed

Line 120:0 Unexpected "}"

**/
@media screen and (min-width: 700px) {
  /* 1. Adjust the grid layout for desktop */
  .style-with-layout {
    --product-list-items-per-row: var(--rp-items-desktop);
    
    /* 2. Smaller padding BETWEEN products (The Gap) */
    /* Lowering the factor reduces the horizontal gap */
    --product-list-horizontal-spacing-factor: 0.5 !important; 
  }

  /* 3. Bigger Left/Right padding for the whole section */
  .style-with-layout .container {
    padding-left: 100px !important;
    padding-right: 100px !important;
    max-width: 100%; /* Ensures it can expand to use the extra padding */
  }
}

/* Hide color swatches specifically within the Style With section */
.style-with-layout .color-swatch-list, 
.style-with-layout .product-card__aside,
.style-with-layout [class*="swatch"],
.style-with-layout [class*="color-variant"] {
  display: none !important;
}

/* Optional: If hiding swatches leaves a big gap, adjust the card info padding */
.style-with-layout .product-card__info {
  margin-top: 8px;
}

/* Hide the arrow controls on mobile devices */
@media screen and (max-width: 699px) {
  .style-with-layout .floating-controls-container__control {
    display: none !important;
  }
  
  /* Ensure the carousel still feels swipeable by adding a bit of 'peek' */
  .style-with-layout .product-list--carousel {
    padding-right: 20px; 
    scroll-snap-type: x mandatory;
  }
}

/* Keep arrows visible on desktop (700px and up) */
@media screen and (min-width: 700px) {
  .style-with-layout .floating-controls-container__control {
    display: flex;
  }
}

/* Apply to both mobile and desktop for consistency */
.style-with-layout .product-list {
  gap: 5px !important;
}

/* If your theme uses a different grid system (like margin-based) */
.style-with-layout .product-list--carousel {
  --product-list-column-gap: 5px !important;
  column-gap: 5px !important;
}

.style-with-layout sale-price {
  font-size: 12px !important;
  font-family: 'Gerstner Programm', sans-serif !important;
}

@media screen and (min-width: 700px) {
  .style-with-layout {
    /* Reset the factor to 1 so it doesn't interfere with our hardcoded 5px gap */
    --product-list-horizontal-spacing-factor: 1 !important;
  }
}


@media screen and (max-width: 699px) {
  .style-with-layout .product-card__info {
    text-align: left !important;
    padding-inline-start: 23px !important;
    width: 100% !important;
    align-items: flex-start !important;
  }

  .style-with-layout .product-card__info .v-stack {
    justify-items: start !important;
    align-items: flex-start !important;
    width: 100% !important;
  }

  .style-with-layout .product-card__info .v-stack * {
    text-align: left !important;
  }

  .style-with-layout price-list,
  .style-with-layout sale-price {
    display: block !important;
    text-align: left !important;
  }

  .style-with-layout .product-title {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: black !important;
    text-align: left !important;
  }

  .style-with-layout sale-price {
    font-size: 0.75rem !important;
  }
}

.style-with-layout .product-card__info {
  padding-block-start: 0.25rem !important; /* ← reduce this, default is likely 0.5rem */
}
}