.home-overflow {
	position: relative;
	overflow: hidden;
	padding-bottom: 7rem;
}

.home-page {
	position: relative;
	display: flex;
	align-items: center;
	margin-top: var(--desktop-menu-height);
	padding-top: 7rem;
	background-color: var(--bg-1);
}
@media (max-width: 576px) {
	.home-page {
		margin-top: var(--mobile-menu-height);
	}
}

/* --- Style dla odtwarzacza muzyki --- */
.music-player {
    display: inline-flex;
    flex-direction: column;
	margin-left: -1rem;
}

.music-track {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
	padding: 1rem;
	border-radius: var(--radius-1);
}

.music-track .icon-wrapper svg {
    width: auto;
    height: 3rem;
    fill: var(--color-1);
}

/* Kluczowa część: Ukrywanie i pokazywanie ikon */
.music-track .icon-wrapper svg:nth-child(2) {
    display: none; /* Domyślnie ukryj ikonę pauzy */
}

/* Kiedy utwór jest odtwarzany (ma klasę .is-playing) */
.music-track.is-playing .icon-wrapper svg:nth-child(1) {
    display: none; /* Ukryj ikonę play */
}
.music-track.is-playing .icon-wrapper svg:nth-child(2) {
    display: block; /* Pokaż ikonę pauzy */
}
.music-track.is-playing {
    background-color: color-mix(in srgb, var(--color-1) 15%, transparent); /* Lekkie podświetlenie */
}

.music-track p {
    margin: 0;
    font-weight: 500;
    color: var(--font-color-1);
	transition: color 0.2s ease;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-transform: uppercase;
	font-family: 'Oswald', sans-serif;
	font-weight: 700;
}
.music-track:hover p {
   color: var(--color-1);
}

.home-page__image img {
	position: relative;
}

.home-baner {
	position: relative;
	margin: 0 -5rem;
}
.home-baner:before {
	position: absolute;
	content: "";
	left: -1px;
	top: 0;
	height: 50%;
	width: 50%;
	background-color: var(--bg-1);
	z-index: -1;
}

.home-baner .flex {
	display: flex;
	gap: 6rem;
	align-items: center;
	justify-content: center;
	background-color: var(--font-color-1);
	padding: 2rem 0;
	transform: rotate(-2deg);
	z-index: 1;
}

@media (max-width: 1400px) {
	.home-baner .flex {
		transform: translatey(-2rem) rotate(-2deg);
	}
	
	.home-page__image {
		margin-top: 4rem;
	}
}

.home-baner svg {
	height: 4rem;
	width: auto;
	object-fit: contain;
	fill: var(--color-2);
	flex-shrink: 0;
}

.home-baner .title-2 {
	color: var(--color-2);
	white-space: nowrap;
}
@media (max-width: 1200px) {
	.home-baner .flex {
		gap: 4rem;
	}
	
	.home-baner .title-2 {
		font-size: 3.1rem;
	}
	
	.home-baner svg {
		height: 3rem;
	}
}

@media (max-width: 768px) {
	.home-baner .flex {
		gap: 2rem;
	}

	.home-baner .title-2 {
		font-size: 2.6rem;
	}

	.home-baner svg {
		height: 2.4rem;
	}
}

@media (max-width: 576px) {
	.home-baner .flex {
		gap: 1.2rem;
	}

	.home-baner .title-2 {
		font-size: 1.8rem;
	}

	.home-baner svg {
		height: 1.6rem;
	}
}

.home-about__image .box {
	position: relative;
}

.home-about__image .box:before {
	position: absolute;
	content: "";
	left: 0;
	bottom: 0;
	height: 66%;
	width: 66%;
	border-radius: var(--radius-1);
	background-color: var(--color-2);
	z-index: -1;
}

.home-steps {
	position: relative;
}
.home-steps:before {
	position: absolute;
	content: "";
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	background-color: var(--bg-1);
	z-index: -2;
}


.home-steps__card {
	height: 100%;
}

.home-steps__card .box {
	position: relative;
	height: 100%;
}

.home-steps__card .box img {
	position: absolute;
	left: -2rem;
	top: -2rem;
	height: calc(100% + 4rem);
	width: calc(100% + 4rem);
	z-index: -1;
	object-fit: cover;
	object-position: center;
	/*opacity: 0;*/
	transition: all .3s ease;
	filter: brightness(.5);
	/*transform: translateY(2rem);*/
	max-width: unset;
	border-radius: var(--radius-1);
	/*box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;*/
}
/*.home-steps__card .box:hover img {
	opacity: 1;
	transform: translateY(0);
}*/

.home-steps__card .box .title-1 {
	font-size: 8rem;
	transition: color .3s ease;
	color: var(--white-1);
}
.home-steps__card .box:hover .title-1 {
	color: var(--color-1);
}

.home-steps__card .box .title-5,
.home-steps__card .box .text {
	transition: color .3s ease;
	color: var(--white-1);
}
/*.home-steps__card .box:hover .title-5,
.home-steps__card .box:hover .text {
	color: var(--white-1);
}*/

.home-steps__card .box .btn {
	background-color: var(--color-1);
	color: var(--white-1);
}
/*.home-steps__card .box:hover .btn {
	/background-color: var(--color-1);
	color: var(--white-1);
}*/

.home-steps__card .box .btn:hover {
	background-color: var(--color-1_hover);
}

.home-shop .shop-title {
	text-align: center;
	margin: 0 10rem;
}
@media (max-width: 1400px) {
	.home-shop .shop-title {
		margin: 0;
	}
}
@media (max-width: 996px) {
	.home-shop .shop-title {
		text-align: left;
	}
}

.home-shop .shop-title .title-2 {
	margin-bottom: 4rem;
}

/* --- Stylizacja Akordeonu FAQ --- */

.home-faq {
	background-color: var(--bg-1);
}

.faq-item {
    border-bottom: 1px solid var(--bg-3); /* Linia oddzielająca pytania */
    padding: 1.5rem 0;
}

/* Styl nagłówka pytania, który jest klikalny */
.faq-question {
    display: flex;
    justify-content: space-between; /* Tekst po lewej, ikonka po prawej */
    align-items: center;
    cursor: pointer; /* Zmienia kursor, aby wskazać klikalność */
    font-weight: bold;
    font-size: 1.8rem;
    transition: color 0.3s ease;
	font-family: "Oswald";
	color: var(--font-color-1);
}

.faq-question:hover {
    color: var(--color-1); /* Kolor po najechaniu, dopasuj do swojego przycisku */
}

/* Styl odpowiedzi - domyślnie ukryta */
.faq-answer {
    /* Klucz do animacji: max-height i overflow */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out;
    color: var(--font-color-2);
    font-size: 1.6rem;
}

/* Styl odpowiedzi wewnątrz, aby dodać odstęp */
.faq-answer p {
    padding-top: 1rem;
    margin-bottom: 0;
}

/* --- Logika stanu aktywnego (po kliknięciu) --- */

.faq-item:nth-child(1) {
	padding-top: 0;
}

/* Styl dla aktywnego (otwartego) elementu */
.faq-item.active .faq-answer {
    /* Ustawiamy max-height na wartość większą niż możliwa wysokość treści */
    max-height: 20rem; /* Zwiększ w razie potrzeby dla dłuższych odpowiedzi */
    transition: max-height 0.5s ease-in;
}

/* Styl ikonki '+' i '-' */
.faq-icon {
    font-size: 2.4rem;
    font-weight: bold;
    min-width: 2.4rem; /* Stała szerokość dla wyrównania */
    text-align: center;
	font-family: "Oswald";
	font-weight: 400;
}

/* Domyślnie pokazujemy '+' */
.faq-icon::before {
    content: '+';
}

/* Kiedy element jest aktywny, zmieniamy ikonkę na '-' */
.faq-item.active .faq-icon::before {
    content: '-';
}

@media screen and (max-width: 1400px) {

}

@media screen and (max-width: 1200px) {

}

@media screen and (max-width: 992px) {

}

@media screen and (max-width: 768px) {

}

@media screen and (max-width: 576px) {

}

@media screen and (max-height: 400px) {

}