/* UX overrides: overflow, gallery, cart badge companion */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

.product-details {
  box-sizing: border-box !important;
  margin-inline: 0 !important;
  max-width: 100% !important;
  padding: 48px max(16px, calc((100% - 1320px) / 2)) !important;
  width: 100% !important;
}

.product-details__grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) !important;
  min-width: 0 !important;
}

.product-gallery {
  max-width: 100% !important;
  min-width: 0 !important;
  width: 100% !important;
}

.product-gallery__main {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  width: 100% !important;
}

.product-gallery__main img {
  display: block !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: contain !important;
  width: 100% !important;
}

@media (max-width: 767px) {
  .storekit-hero-title {
    flex-wrap: wrap !important;
    font-size: clamp(2.5rem, 12vw, 3.6rem) !important;
    white-space: normal !important;
  }

  .product-details {
    padding: 32px 16px !important;
  }

  .product-gallery {
    flex-direction: column-reverse !important;
    gap: 12px !important;
  }

  .product-gallery__thumbs {
    flex-direction: row !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    width: 100% !important;
  }

  .product-gallery__main {
    aspect-ratio: 1 / 1 !important;
  }
}

/* Scrollbar like controller */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #f8f9fa;
}
::-webkit-scrollbar-thumb {
  background: #15224e;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #f70000;
}

.support-grid article {
  background: #fff;
  border-top: 4px solid #15224e;
  border-bottom: 4px solid #f70000;
  padding: 28px;
}

/* Cart: Badge auf dem Icon, 10px Abstand zum Betrag */
.header-cart {
  align-items: center !important;
  gap: 10px !important;
}

.header-cart svg {
  display: block !important;
  flex: 0 0 auto !important;
  margin-right: 14px !important;
}

.header-cart .cart-count {
  left: 14px !important;
  right: auto !important;
  top: 0 !important;
  z-index: 1 !important;
}

.header-cart .cart-total {
  margin-left: 0 !important;
}

/* Checkout: Hinweise/Vorteile/MwSt/SSL in Primary, Notice zeilenweise */
.checkout-hint,
.checkout-secure,
.checkout-benefits,
.checkout-benefits li,
.checkout-notice,
.checkout-notice li,
.summary-vat,
.checkout-fields textarea,
.checkout-fields textarea::placeholder,
.checkout-fields input::placeholder {
  color: #15224e !important;
}

.checkout-fields textarea::placeholder,
.checkout-fields input::placeholder {
  opacity: 1 !important;
}

.checkout-benefits li::before {
  color: #15224e !important;
}

.checkout-notice {
  display: grid !important;
  gap: 6px !important;
  list-style: none !important;
  margin-block: 20px !important;
  padding: 0 !important;
}

/* Checkout Bestellübersicht: unten 4px #f70000 (oben primary bereits vorhanden) */
.order-summary,
.checkout-summary {
  border-bottom: 4px solid #f70000 !important;
}

.checkout-summary-card .checkout-card__body {
  border-bottom: 4px solid #f70000 !important;
}
