/** Shopify CDN: Minification failed

Line 104:0 Unexpected "{"
Line 104:1 Expected identifier but found "%"
Line 105:2 Unexpected "="
Line 108:1 Expected identifier but found "%"
Line 114:14 Expected identifier but found whitespace
Line 114:16 Unexpected "{"
Line 114:26 Expected ":"
Line 114:51 Expected ":"
Line 115:16 Expected identifier but found whitespace
Line 115:18 Unexpected "{"
... and 28 more hidden warnings

**/
.section--media-with-collection {
  position: relative;
  z-index: 1;
}
@media (min-width: 768px) {
  .section--media-with-collection .section__description {
    margin-top: 1.2rem;
  }
}

.media-with-collection {
  gap: 3.2rem 0;
}
.media-with-collection__products.swiper {
  max-width: 100%;
}
@media (min-width: 768px) {
  .media-with-collection__products {
    width: calc(var(--items-count) * min(var(--item-width), 25vw) + (var(--items-count) - 1) * var(--items-gap));
  }
}

@media (min-width: 768px) {
  .media-with-collection .swiper-pagination-counter {
    display: none;
  }
  .media-with-collection-1-cols .col-products-inner {
    padding: 2rem 3rem;
  }
  .media-with-collection-1-cols .swiper-pagination {
    display: none;
  }
  .media-with-collection-2-cols .col-media {
    width: 41.135%;
  }
  .media-with-collection-2-cols .col-products {
    width: 58.865%;
  }
  .media-with-collection-2-cols.media-with-collection-position-left .col-products {
    align-items: flex-end;
  }
  .media-with-collection-2-cols.media-with-collection-position-left .col-products-inner {
    padding-inline-start: 3rem;
  }
  .media-with-collection-2-cols.media-with-collection-position-right .col-products {
    align-items: flex-start;
    order: -9;
  }
  .media-with-collection-2-cols.media-with-collection-position-right .col-products-inner {
    padding-inline-end: 3rem;
  }
  .media-with-collection-2-cols .swiper-pagination {
    display: flex !important;
    bottom: 0;
  }
  .media-with-collection-2-cols .swiper-button-prev,
  .media-with-collection-2-cols .swiper-button-next {
    display: none;
  }
  .media-with-collection-2-cols media-with-collection {
    padding-bottom: 5rem;
  }
  .media-with-collection.no-media-block {
    justify-content: center;
  }
  .media-with-collection.no-media-block .col-products-inner {
    padding: 0 !important;
  }
  .media-with-collection.no-media-block .col-products {
    align-items: center;
  }
}
@media (min-width: 768px) {
  .media-with-collection-1-cols {
    --swiper-navigation-offset-x: -6.8rem;
  }
}
@media (min-width: 1280px) {
  .media-with-collection-1-cols {
    --swiper-navigation-offset-x: -8.8rem;
  }
}
@media (max-width: 767.98px) {
  .media-with-collection .swiper-button-next,
  .media-with-collection .swiper-button-prev {
    --swiper-navigation-top-offset: 50%;
  }
}
{% comment %}
  ==========================================
  1) Global mobil-typografi via Theme Settings
  ==========================================
{% endcomment %}

@media screen and (max-width: 749px) {

  /* Rubriker */
  h1, h2, .collection-hero__title, .section__title {
    font-size: {{ settings.mobile_heading_size }}px !important;
    line-height: {{ settings.mobile_heading_line_height }} !important;
  }

  /* Brödtext */
  p, .rte p, .product-single__description p, .section__text {
    font-size: {{ settings.mobile_body_size }}px !important;
    line-height: {{ settings.mobile_body_line_height }} !important;
  }

  /* Knapp-text */
  .btn, .button, .collection-hero__link, .product-form__cart-submit {
    font-size: {{ settings.mobile_button_size }}px !important;
    padding: {{ settings.mobile_button_padding }}px {{ settings.mobile_button_padding | times:2 }}px !important;
  }

}


{% comment %}
  ==========================================
  2) Grid-layout för just denna sektion
     (dra nytta av section.settings.columns_mobile
      och section.settings.column_gap)
  ==========================================
{% endcomment %}

/* Definiera CSS-variabel för gap så det blir lätt att återanvända */
.section-media-with-collection {
  --media-column-gap: {{ section.settings.column_gap }}px;
}

@media screen and (max-width: 749px) {
  .section-media-with-collection .grid {
    display: grid !important;
    /* Upprepa lika många kolumner som användaren valt i Theme Editor */
    grid-template-columns: repeat({{ section.settings.columns_mobile }}, minmax(0, 1fr)) !important;
    gap: var(--media-column-gap) !important;
  }

  /* Se till att varje item fyller sin grid-cell */
  .section-media-with-collection .grid__item {
    width: 100% !important;
  }
}