@font-face {
  font-family: 'Metropolis';
  src: url('/data/include/fonts/Metropolis-Thin.woff2') format('woff2'),
       url('/data/include/fonts/Metropolis-Thin.woff') format('woff'),
       url('/data/include/fonts/Metropolis-Thin.ttf') format('truetype');
  font-weight: 100; /* Thin */
  font-style: normal;
}

@font-face {
  font-family: 'Metropolis';
  src: url('/data/include/fonts/Metropolis-ThinItalic.woff2') format('woff2'),
       url('/data/include/fonts/Metropolis-ThinItalic.woff') format('woff'),
       url('/data/include/fonts/Metropolis-ThinItalic.ttf') format('truetype');
  font-weight: 100; /* Thin */
  font-style: italic;
}

@font-face {
  font-family: 'Metropolis';
  src: url('/data/include/fonts/Metropolis-Light.woff2') format('woff2'),
       url('/data/include/fonts/Metropolis-Light.woff') format('woff'),
       url('/data/include/fonts/Metropolis-Light.ttf') format('truetype');
  font-weight: 300; /* Light */
  font-style: normal;
}

@font-face {
  font-family: 'Metropolis';
  src: url('/data/include/fonts/Metropolis-LightItalic.woff2') format('woff2'),
       url('/data/include/fonts/Metropolis-LightItalic.woff') format('woff'),
       url('/data/include/fonts/Metropolis-LightItalic.ttf') format('truetype');
  font-weight: 300; /* Light */
  font-style: italic;
}

@font-face {
  font-family: 'Metropolis';
  src: url('/data/include/fonts/Metropolis-Regular.woff2') format('woff2'),
       url('/data/include/fonts/Metropolis-Regular.woff') format('woff'),
       url('/data/include/fonts/Metropolis-Regular.ttf') format('truetype');
  font-weight: 400; /* Regular */
  font-style: normal;
}

@font-face {
  font-family: 'Metropolis';
  src: url('/data/include/fonts/Metropolis-RegularItalic.woff2') format('woff2'),
       url('/data/include/fonts/Metropolis-RegularItalic.woff') format('woff'),
       url('/data/include/fonts/Metropolis-RegularItalic.ttf') format('truetype');
  font-weight: 400; /* Regular */
  font-style: italic;
}

@font-face {
  font-family: 'Metropolis';
  src: url('/data/include/fonts/Metropolis-Medium.woff2') format('woff2'),
       url('/data/include/fonts/Metropolis-Medium.woff') format('woff'),
       url('/data/include/fonts/Metropolis-Medium.ttf') format('truetype');
  font-weight: 500; /* Medium */
  font-style: normal;
}

@font-face {
  font-family: 'Metropolis';
  src: url('/data/include/fonts/Metropolis-MediumItalic.woff2') format('woff2'),
       url('/data/include/fonts/Metropolis-MediumItalic.woff') format('woff'),
       url('/data/include/fonts/Metropolis-MediumItalic.ttf') format('truetype');
  font-weight: 500; /* Medium */
  font-style: italic;
}

@font-face {
  font-family: 'Metropolis';
  src: url('/data/include/fonts/Metropolis-SemiBold.woff2') format('woff2'),
       url('/data/include/fonts/Metropolis-SemiBold.woff') format('woff'),
       url('/data/include/fonts/Metropolis-SemiBold.ttf') format('truetype');
  font-weight: 600; /* SemiBold */
  font-style: normal;
}

@font-face {
  font-family: 'Metropolis';
  src: url('/data/include/fonts/Metropolis-SemiBoldItalic.woff2') format('woff2'),
       url('/data/include/fonts/Metropolis-SemiBoldItalic.woff') format('woff'),
       url('/data/include/fonts/Metropolis-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600; /* SemiBold */
  font-style: italic;
}

@font-face {
  font-family: 'Metropolis';
  src: url('/data/include/fonts/Metropolis-Bold.woff2') format('woff2'),
       url('/data/include/fonts/Metropolis-Bold.woff') format('woff'),
       url('/data/include/fonts/Metropolis-Bold.ttf') format('truetype');
  font-weight: 700; /* Bold */
  font-style: normal;
}

@font-face {
  font-family: 'Metropolis';
  src: url('/data/include/fonts/Metropolis-BoldItalic.woff2') format('woff2'),
       url('/data/include/fonts/Metropolis-BoldItalic.woff') format('woff'),
       url('/data/include/fonts/Metropolis-BoldItalic.ttf') format('truetype');
  font-weight: 700; /* Bold */
  font-style: italic;
}

@font-face {
  font-family: 'Metropolis';
  src: url('/data/include/fonts/Metropolis-ExtraBold.woff2') format('woff2'),
       url('/data/include/fonts/Metropolis-ExtraBold.woff') format('woff'),
       url('/data/include/fonts/Metropolis-ExtraBold.ttf') format('truetype');
  font-weight: 800; /* ExtraBold */
  font-style: normal;
}

@font-face {
  font-family: 'Metropolis';
  src: url('/data/include/fonts/Metropolis-ExtraBoldItalic.woff2') format('woff2'),
       url('/data/include/fonts/Metropolis-ExtraBoldItalic.woff') format('woff'),
       url('/data/include/fonts/Metropolis-ExtraBoldItalic.ttf') format('truetype');
  font-weight: 800; /* ExtraBold */
  font-style: italic;
}

@font-face {
  font-family: 'Metropolis';
  src: url('/data/include/fonts/Metropolis-Black.woff2') format('woff2'),
       url('/data/include/fonts/Metropolis-Black.woff') format('woff'),
       url('/data/include/fonts/Metropolis-Black.ttf') format('truetype');
  font-weight: 900; /* Black */
  font-style: normal;
}

@font-face {
  font-family: 'Metropolis';
  src: url('/data/include/fonts/Metropolis-BlackItalic.woff2') format('woff2'),
       url('/data/include/fonts/Metropolis-BlackItalic.woff') format('woff'),
       url('/data/include/fonts/Metropolis-BlackItalic.ttf') format('truetype');
  font-weight: 900; /* Black */
  font-style: italic;
}

:root {
    --font-family: 'Metropolis', 'Open Sans', sans-serif;
    --font-family-headline: 'Metropolis', 'Open Sans', sans-serif;
}

.projector_status__info_amount, .stock__availabilty_count{
    display: none;
}

#main_cms {
    display: none;
}

.content {
    margin: 20px 0;
}

.visible-paragraph {
    margin-bottom: 10px;
}

.hidden-content {
    display: none; /* Ukrywa dodatkową treść domyślnie */
}

/* Ogólny układ kontenera */
.info_banners {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin: 20px 0;
}

/* Styl pojedynczego elementu */
.info_banners__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 5px;
    background-color: #f9f9f9;
    box-sizing: border-box;
}

/* Rozmiary kafelków dla różnych ekranów */
.info_banners__item {
    flex: 1 1 100%; /* Domyślnie jeden element na całej szerokości */
    max-width: 100%;
}

/* Dwa w jednym rzędzie na średnich ekranach */
@media (min-width: 576px) {
    .info_banners__item {
        flex: 1 1 calc(50% - 15px);
        max-width: calc(50% - 15px);
    }
}

/* Cztery w jednym rzędzie na dużych ekranach */
@media (min-width: 992px) {
    .info_banners__item {
        flex: 1 1 calc(25% - 15px);
        max-width: calc(25% - 15px);
    }
}

/* Ikona */
.info_banners__icon {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

.info_banners__icon img {
    max-width: 60%;
    max-height: 60%;
}

/* Tekst */
.info_banners__text {
    font-size: 14px;
    line-height: 1.5;
    color: #333;
}

.info_banners__text strong {
    font-size: 16px;
    color: #000;
    margin-bottom: 5px;
}

#blog-item .big_label {
    text-transform: none;
    letter-spacing: normal;
    line-height: normal;
    font-weight: 700;
    font-size: 3rem;
    justify-content: left;
}

#blog-item img.blog_image {
    float: none;
    max-width: 95%;
}

.cm h1, .cm h2, .cm h3, .cm h4, .cm h5, .cm h6, .cm p, .cm ol, .cm ul {
    line-height: 1.3;
}

.product-main-category {
    display: block;
    font-size: 1.3em;
    margin-bottom: 5px;
}

.product-sub-category {
    display: block;
    font-size: 1em;
    font-weight: normal;
    margin-bottom: 5px;
}

.product-volume {
    display: inline-block;
    font-size: 0.9em;
    color: #777; /* Kolor dla objętości */
    border: 1px solid #ccc;
    padding: 3px 6px;
    border-radius: 4px;
    background-color: #f1f1f1;
}

.ostrzezenia {
    background: #f6f6f6;
    border: 1px solid #c4c7c8;
    border-radius: 5px;
    color: #181716;
}

.h3 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: .8rem;
    line-height: 1.1;
    padding-left: 1.5rem;
}