/* BG GPSR — style rzędu marki przy tytule i bloku „Producent i bezpieczeństwo”.
 *
 * Rząd marki jest elementem INLINE wewnątrz nagłówka H1 strony produktu. To nie jest ozdoba
 * składni: dzięki temu na desktopie stoi w jednym rzędzie z tytułem i na jego linii bazowej,
 * a gdy się nie mieści — zawija się pod tytuł sam, bez żadnej reguły media. Regułą media
 * wymuszamy tylko to, żeby na wąskich ekranach schodził pod tytuł ZAWSZE, do lewej krawędzi,
 * zamiast doklejać się do ostatniego słowa.
 *
 * H1 Journala bywa `text-transform: uppercase` i ma rozmiar nagłówka — dlatego rząd marki
 * zeruje oba dziedziczone style. Inaczej nazwa marki wyszłaby wersalikami w rozmiarze tytułu.
 */

.bg-gpsr-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-left: 16px;
  vertical-align: baseline;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
}

.bg-gpsr-brand-link {
  display: inline-flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
  border: 0;
}

.bg-gpsr-brand-link:hover {
  opacity: .75;
}

/* Logotypy marek mają bardzo różne proporcje — wysokość ustala moduł, szerokość dobiera
   się do niej sama, a `max-width` broni przed logotypem-banerem. */
.bg-gpsr-brand-link img {
  display: block;
  width: auto;
  max-width: 140px;
  height: auto;
  max-height: 32px;
}

.bg-gpsr-brand-name {
  display: inline-block;
  font-size: 14px;
  line-height: 1.2;
  text-transform: none;
  border-bottom: 1px solid currentColor;
}

/* Plakietka wieku: ikona PEGI dla gier wideo, ramka z tekstem dla progów planszówkowych
   (10+, 14+) i dla wartości, które nie są żadną istniejącą oceną PEGI. */
.bg-gpsr-badge {
  display: inline-flex;
  align-items: center;
}

.bg-gpsr-badge img {
  display: block;
  width: auto;
  height: auto;
  max-height: 36px;
}

.bg-gpsr-badge-text b,
.bg-gpsr-badge img + b {
  display: inline-block;
  padding: 3px 8px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: #303841;
  background: #f1f3f5;
  border: 1px solid #ced4da;
  border-radius: 3px;
}

@media (max-width: 767px) {
  .bg-gpsr-brand {
    display: flex;
    margin-left: 0;
    margin-top: 10px;
    white-space: normal;
  }
}

/* Blok Journala z logotypem marki zostaje w kodzie, ale znika z widoku: to ten sam
   logotyp, tylko powieszony w pustej przestrzeni obok licznika promocji. Klasę dokłada
   kontroler tylko wtedy, gdy sam rząd marki faktycznie wszedł na stronę. */
body.bg-gpsr-brand-moved .product-info .product-manufacturer.brand-image {
  display: none !important;
}

/* Blok „Producent i bezpieczeństwo”. Trzy sekcje obok siebie na desktopie, jedna pod drugą
   na wąskim ekranie. Blok jest zawsze rozwinięty — nie dostaje `expand-block` Journala. */
.bg-gpsr-parts {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 40px;
}

.bg-gpsr-part {
  flex: 1 1 240px;
  min-width: 220px;
}

.bg-gpsr-part h4 {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.bg-gpsr-part p {
  margin: 0 0 4px;
  font-size: 14px;
  line-height: 1.5;
}

.bg-gpsr-part .bg-gpsr-name {
  font-weight: 600;
}

.bg-gpsr-part-warnings {
  flex-basis: 100%;
}

/* Strona marki: logotyp i akapit opisu nad listą produktów. */
.bg-gpsr-brand-intro {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 24px;
}

.bg-gpsr-brand-intro-logo img {
  display: block;
  width: auto;
  height: auto;
  max-height: 64px;
}

.bg-gpsr-brand-intro-text {
  flex: 1 1 auto;
  font-size: 14px;
  line-height: 1.6;
}

@media (max-width: 767px) {
  .bg-gpsr-brand-intro {
    flex-direction: column;
    gap: 12px;
  }
}