/* Custom CSS */

/* Abstand 20px auf den Seiten oben entfernen */
.page-content-center-column.spacerTop {
    margin-top: 0px !important;
}

/* Produktbilder, Kategoriebilder mit 16px Border-Radius */
.wrapper-img,
.img_wrapper,
.absoluteMask {
    border-radius: 16px !important;
}

/* Spezielle Regel damit Farbhintergrund nicht an der Kategorie-Karte durchblitzt */
.absoluteImage {
    border-radius: 32px !important;
}

/* Selektoren mit maximaler Rundung */
.btn.btn-primary,
.quantityMinMaxStep {
    border-radius: 999px !important;
}

/* Tags mit maximaler Rundung und Padding */
.ndx-badge.tag {
    border-radius: 999px !important;
    padding: 4px 10px !important;
}

/* Fügt den Text "ab " direkt vor dem Inhalt des span ein */
.glide__slide .price::before {
    content: "ab ";
}

.card-body .price::before {
    content: "ab ";
}

/* Banner Karten */
.custom-shop-wrapper {
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }
  .custom-shop-wrapper * { box-sizing: border-box; }

  /* Banner */
  .custom-shop-banner { width: 100%; margin-bottom: 40px; }
  .custom-shop-banner img { width: 100%; height: auto; display: block; }

  /* Grid Desktop */
  .custom-shop-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    padding: 0 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 50px; /* Platz unten */
  }

  /* Karte */
  .custom-shop-card {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    width: calc(33.333% - 30px);
    min-width: 250px;
    transition: transform 0.3s ease;
  }

  @media (min-width: 993px) {
    .custom-shop-card:hover { transform: translateY(-5px); }
  }

  .card-image img {
    width: 100%; height: 200px; object-fit: cover; display: block;
    border-radius: 8px 8px 0 0;
  }

  .card-content {
    padding: 20px; text-align: center; flex-grow: 1;
    display: flex; flex-direction: column; justify-content: space-between;
  }
  
  .card-content h3 { margin: 0 0 10px; font-size: 1.2rem; color: #333; }
  .card-content p { color: #666; font-size: 0.9rem; margin-bottom: 15px; line-height: 1.4; }

  .card-button {
    display: inline-block; padding: 10px 20px; background-color: #333;
    color: #fff; text-decoration: none; border-radius: 4px; font-size: 0.9rem;
    align-self: center; transition: background-color 0.2s;
  }
  .card-button:hover { background-color: #555; }

  /* --- MOBILE / TABLET LOGIC --- */
  @media (max-width: 992px) {
    .custom-shop-grid {
      display: flex;
      flex-wrap: nowrap; /* Kein Umbruch */
      overflow-x: auto; /* Scrollen erlauben */
      justify-content: flex-start;
      gap: 15px;
      scroll-snap-type: x mandatory; /* Einrasten */
      -webkit-overflow-scrolling: touch;
      padding: 10px 20px 30px 20px;
      margin: 0;
      width: 100%;
      /* Scrollbar verstecken */
      -ms-overflow-style: none;
      scrollbar-width: none;
    }
    .custom-shop-grid::-webkit-scrollbar { display: none; }

    .custom-shop-card {
      flex: 0 0 85%; /* Breite Karte */
      width: 85%;
      scroll-snap-align: center; /* Mittig einrasten */
    }
  }