/* Wymuszenie stałej widoczności pionowego scrollbara */
  html {
    overflow-y: scroll !important;
  } 
    body { background: #c0b9ad; margin:0; font-family: 'Inter', sans-serif;	}
    .page { display:none; justify-content:center; align-items:center; flex-direction:column; opacity:0; transition:opacity 0.8s ease-in-out; padding:20px;}
    .active { display:flex; opacity:1; }
    .video-wrapper { border-radius:6px !important; position: relative; width:100%; max-width:1280px; height: auto; margin-bottom:30px; border:0 !important; box-shadow:none !important;}
	
	
-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}
	
    video, .plyr, .plyr__video-wrapper { border-radius:8px !important; border:none; background: transparent;border:0 !important; box-shadow:none !important; }
    .plyr-branding { position: absolute; top: 20px; right: 20px; z-index: 10; opacity: 0.60; }
    .plyr-branding img { height: 5vh; pointer-events: none; display: block; }
    .plyr--full-ui .plyr__progress--played,
    .plyr--full-ui .plyr__progress input[type='range'] { color: #fff; cursor:pointer; }
    .plyr--full-ui input[type='range']::-webkit-slider-thumb { background: #fff; }
    .plyr--full-ui input[type='range']::-moz-range-thumb { background: #fff; }
    .plyr--full-ui .plyr__volume input[type='range'] { color: #fff; cursor:pointer; }
    .plyr--full-ui .plyr__volume input[type='range']::-webkit-slider-thumb { background: #fff; }
    .plyr--full-ui .plyr__volume input[type='range']::-moz-range-thumb { background: #fff; opacity:1; }
    .plyr--full-ui .plyr__controls button { background: none !important; box-shadow: none !important; outline: none !important; }
    .plyr--full-ui .plyr__controls button svg { opacity: 0.8; }
    .plyr--full-ui, .plyr--full-ui .plyr__menu__container, .plyr--full-ui .plyr__menu__value,
    .plyr--full-ui .plyr__control, .plyr--full-ui .plyr__tooltip, .plyr--full-ui .plyr__control svg,
    .plyr__time, .plyr--full-ui button { font-family: 'Inter', sans-serif !important; font-size: 11px !important; font-weight: 500 !important; text-transform: none !important; }
    .plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]:before {background: #fff; border:0 !important; box-shadow:none !important;}
	.plyr, .plyr__poster, .plyr__captions, .plyr__menu__container {background: transparent !important; border:0 !important; box-shadow:none !important;}
	.plyr--video .plyr__controls {
    background: var(--plyr-video-controls-background, linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0.1))); border:0 !important; box-shadow:none !important;}
.plyr, .plyr .plyr__video-wrapper {cursor: pointer !important;}
    button span:hover {color:#75787d;}
    button span {color:#4a5464;}
    .nav-btn { position:fixed; top:50%; transform:translateY(-50%); cursor:pointer; font-size:2rem; color:#fff; opacity:0.7; user-select:none; z-index:20; }
    .nav-left { left:20px; }
    .nav-right { right:20px; }
.okladka {
    display: flex !important;
    max-width: 1280px;
	height: auto;
    flex-direction: row;
    gap: 20px; /* Dodaje odstęp między elementami w rzędzie */
	margin-bottom:20px !important;
}

.image img {
    display: block;
    max-width: 200px;
    height: auto;
    border-radius: 8px;
    border: none;
}

.info {
    padding: 0;
    flex: 1;
		font-size:14px;
		color: #343434;
}

.info h2 {
    margin-top: 0;
	color: #544f47;
}

.info p {
    margin-bottom: 0;
}
.kontener {margin: 0 auto;
width: 100%;
max-width: 1280px;
text-align: left !important;
}
.lyrics {
    position: relative;
    margin-left: 40px; /* zwiększamy by zrobić miejsce na napis */
    border-left: 1px solid #aaa294;
    padding-left: 15px;
    font-style: italic;
    box-sizing: border-box;
	margin-bottom:20px;
	font-size:14px;
	color: #343434;
}

.lyrics::before {
    content: "LYRICS";
    position: absolute;
    left: -30px;
    top: 140px;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: left center;
    font-size: 40px;
    font-weight: 800;
    font-style: normal;
    color: #aaa294;
    font-family: 'Inter', sans-serif;
}

.treatment {
    position: relative;
    margin-right: 40px; /* zwiększamy, by zrobić miejsce na napis po prawej */
    border-right: 1px solid #aaa294; /* linia po prawej stronie */
	margin-left:0;
    padding-right: 15px; /* odstęp po prawej stronie */
    box-sizing: border-box;
    margin-bottom: 20px;
    font-size: 15px;
    color: #343434;
    text-align: justify;
    /* usunięto margin-left, który nie jest już potrzebny */
	min-height:250px;
}

.treatment::before {
    content: "TREATMENT";
    position: absolute;
    right: -30px; /* ustawiamy etykietę z prawej strony */
    top: 250px; /* dostosuj w razie potrzeby */
    transform: translateY(-50%) rotate(90deg); /* obracamy tekst o 90° */
    transform-origin: right center; /* punkt obrotu po prawej stronie */
    font-size: 40px;
    font-weight: 800;
    font-style: normal;
    color: #aaa294;
    font-family: 'Inter', sans-serif;
}
@media (max-width: 767px) {
  .image {
    display: none !important;
  }
   /* Zmiana grubości scrollbara na 1px w przeglądarkach WebKit */
  ::-webkit-scrollbar {
    width: 1px;
    height: 1px;
  }
  
  ::-webkit-scrollbar-thumb {
    background-color: #b5aea0; /* zachowujemy ten sam kolor uchwytu */
  }
   .nav-left, .nav-right {
    display: none !important;
  } 
.lyrics, .treatment, .info {
	font-size:12px;
}
.video-wrapper {margin-bottom:20px;}
}
/* Domyślna stylizacja dla przeglądarek WebKit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 1px;   /* szerokość paska przewijania dla pionowego scrolla */
  height: 1px;  /* wysokość paska przewijania dla poziomego scrolla */
}

::-webkit-scrollbar-track {
  background: transparent; /* kolor tła szyny (opcjonalnie) */
}

::-webkit-scrollbar-thumb {
  background-color: #b5aea0; /* kolor uchwytu paska przewijania */
  border-radius: 5px;       /* zaokrąglenie krawędzi uchwytu */
}

/* Stylizacja dla Firefox */
* {
  scrollbar-width: thin; /* ustawia cienki pasek przewijania (domyślnie nie precyzuje dokładnie 3px) */
  scrollbar-color: #b5aea0 transparent; /* pierwszy kolor to uchwyt, drugi to tło szyny */
}