/*
  Mobile: mehr nutzbare Breite auf Startseite, Produktliste und Produktdetail.
  (Globales .container hat padding-inline: 1rem; Produktdetail zusätzlich width: 90%.)
  Sticky-Leiste Produktdetail: Preis-Schrift skaliert mit der Breite der Info-Spalte (Container Queries).
*/

@media (max-width: 900px) {
  .site-main > .hero .container,
  .site-main > .product-overview .container,
  .site-main > .products-overview .container {
    width: 100%;
    max-width: none;
    padding-inline: 0.5rem;
    box-sizing: border-box;
  }

  .hero {
    padding-inline: 0;
  }

  .product-overview,
  .products-overview {
    padding-inline: 0;
  }

  .home-product-card {
    padding-inline: 0.65rem;
    padding-block: 1rem;
  }

  /* Produktdetail: vorher 90% Container → fast volle Viewport-Breite */
  .product-detail {
    padding-inline: 0;
  }

  .product-detail .container {
    width: 100%;
    max-width: none;
    padding-inline: 0.5rem;
    box-sizing: border-box;
  }

  .product-content {
    padding-inline: 0.65rem;
  }

  .related-products .container {
    padding-inline: 0.5rem;
  }
}

@media (max-width: 480px) {
  .site-main > .hero .container,
  .site-main > .product-overview .container,
  .site-main > .products-overview .container,
  .product-detail .container,
  .related-products .container {
    padding-inline: 0.35rem;
  }

  .home-product-card {
    padding-inline: 0.5rem;
  }

  .product-content {
    padding-inline: 0.5rem;
  }
}

/* Produktdetail: Sticky-Leiste — Aktionspreis proportional zur freien Breite der mittleren Spalte */
@media (max-width: 960px) {
  .product-sticky-bar__info {
    container-type: inline-size;
    container-name: product-sticky-info;
  }

  @container product-sticky-info (min-width: 0px) {
    .product-sticky-bar__price .promo-price--compact .promo-price__sale {
      font-size: clamp(0.76rem, calc(0.48rem + 5cqw), 1.12rem);
    }

    .product-sticky-bar__price .promo-price--compact .promo-price__discount {
      font-size: clamp(0.7rem, calc(0.44rem + 4.2cqw), 0.98rem);
    }

    .product-sticky-bar__price .promo-price--compact .promo-price__original {
      font-size: clamp(0.66rem, calc(0.4rem + 3.6cqw), 0.9rem);
    }
  }
}