/**
 * Product Hero Section - Nowy szablon produktu
 * Metodologia BEM
 * Wszystkie jednostki w REM, line-height bez jednostek
 *
 * @package hempets
 */

/* ============================================
   Style specyficzne dla nowego szablonu produktu
   ============================================ */

/* Usuń pseudo-elementy ::before i ::after z .main tylko na stronach z nowym szablonem */

p {
	font-size: 1rem;
}

.main:before,
.main:after {
	content: none;
}

.mx-auto {
	margin-inline: auto !important;
}

.my-6 {
	margin-block: 4rem;
}

.mb-6 {
	margin-bottom: 4rem;
}

.product-template-new {
	background-color: #fff;
}

/* ============================================
   Główny kontener sekcji
   ============================================ */
.product-hero {
	position: relative;
	padding-top: 5rem; /* 80px / 16 */
	padding-bottom: 5rem; /* 80px / 16 */
	display: flex;
	flex-direction: column;
	gap: 2rem; /* 32px / 16 */
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	z-index: 1;
}

/* ============================================
   Kontener z dwoma kolumnami - Grid Layout
   ============================================ */
.product-hero__container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem; /* 64px / 16 */
	position: relative;
}

/* ============================================
   Lewa kolumna - Treść tekstowa
   ============================================ */
.product-hero__content {
	display: flex;
	flex-direction: column;
}

.product-hero__content .product-hero__title {
	margin-bottom: 4rem;
}

.product-hero__info-box-container{
	margin-right: -117px;
	margin-top: 134px;
	margin-left: 117px;
}

/* Tytuł główny */
.product-hero__title,
.product-benefits__title {
	font-size: 2.5rem; /* 40px / 16 */
	font-weight: 700;
	line-height: 1.1; /* 44px / 40px */
	margin: 0;
	padding: 0;
}

/* Opis produktu */
.product-hero__description {
	color: rgba(0, 0, 0, 0.8);
	font-size: 1.125rem; /* 18px / 16 */
	font-weight: 400;
	line-height: 1.5; /* 27px / 18px */
}

.product-hero__description p {
	font-size: 1.125rem;
	line-height: 1.5;
	margin: 0 0 1.125rem 0; /* 18px / 16 */
}

.product-hero__description p:last-child {
	margin-bottom: 0;
}

/* ============================================
   Prawa kolumna - Obraz produktu
   ============================================ */
.product-hero__image {
	position: relative;
}

.product-hero__image-img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: contain;
}

.product-hero__image-placeholder {
	width: 100%;
	max-width: 40rem; /* 640px / 16 */
	aspect-ratio: 640 / 889;
	background: #f5f5f5;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #999;

	font-size: 1rem;
}

/* ============================================
   Fioletowy box z informacją
   ============================================ */
.product-hero__info-box {
	padding: 2rem;
	display: flex;
	gap: 4rem;
	background: var(--product-primary-color, #7764db);
}

/* Ikona łapy */
.product-hero__info-box-icon {
	flex-shrink: 0;
	width: 3rem; /* 48px / 16 */
	height: 3rem; /* 48px / 16 */
	display: flex;
	align-items: center;
	justify-content: center;
}

.product-hero__info-box-icon svg {
	width: 100%;
	height: 100%;
}

.product-hero__info-box-text {
	color: #ffffff;
	font-size: 1.125rem; /* 18px / 16 */
	font-weight: 400;
	line-height: 1.5; /* 27px / 18px */
	margin: 0;
}

/**
 * Product Benefits Section - Sekcja z accordionem
 * Metodologia BEM
 * Wszystkie jednostki w REM, line-height bez jednostek
 *
 * @package hempets
 */

/* ============================================
   Główny kontener sekcji
   ============================================ */
.product-benefits {
	padding-top: 10rem; /* 160px / 16 */
	padding-bottom: 5rem; /* 80px / 16 */
	display: flex;
	flex-direction: column;
	gap: 2rem; /* 32px / 16 */
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/* ============================================
   Kontener z dwoma kolumnami - Grid Layout
   ============================================ */
.product-benefits__container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 4rem; /* 64px / 16 */
}



/* Dostosowanie istniejących stylów accordion */
.product-benefits .accordion {
	margin-bottom: 0;
	background-color: transparent;
	border: none;
	box-shadow: none;
	position: relative;
}

.product-benefits .accordions {
	display: flex;
	flex-direction: column;
	gap: 2rem; /* 32px / 16 */
}

.product-benefits .accordion:hover {
	box-shadow: none;
}

.product-benefits__accordion .accordion__decoration{
	position: absolute;
	max-width: 144px;
	height: auto;
	top: -30px;
	right: -16px;

}

.product-benefits .accordion__head {
	background-color: var(--product-primary-color, #7764db);
	border-left: none;
	padding: 1rem 1.5rem; /* 16px 24px / 16 */
	justify-content: space-between;
	align-items: center;
	display: flex;
	position: relative;
	z-index: 1;
	overflow: hidden;
}

.product-benefits .accordion__head-left-part {
	display: none;
}

.product-benefits .accordion__head-title {
	color: #ffffff;
	font-size: 1.125rem; /* 18px / 16 */
	font-weight: 700;
	line-height: 1.39; /* 25px / 18px */
	margin: 0;
	flex: 1;
}

.product-benefits .accordion.is-active .accordion__head {
	background-color: var(--product-primary-color, #7764db);
}

.product-benefits .accordion.is-active .accordion__head-title {
	color: #ffffff;
}

.product-benefits .accordion__body {
	background-color: #f6f6f6;
	display: none;
	position: relative;
	z-index: 1;
}

.product-benefits .accordion.is-active .accordion__body {
	display: block;
}

.product-benefits__accordion-body-inner {
	padding: 1rem 1.5rem;
}

.product-benefits__accordion-body-inner p {
	color: rgba(0, 0, 0, 0.8);
	font-size: 1.125rem; /* 18px / 16 */
	font-weight: 400;
	line-height: 1.5; /* 27px / 18px */
	margin: 0;
}

/* Ikona strzałki w accordionie */
.product-benefits__accordion-icon {
	flex-shrink: 0;
	width: 2rem; /* 32px / 16 */
	height: 2rem; /* 32px / 16 */
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #ffffff;
	border-radius: 3.625rem; /* 58px / 16 */
	padding: 0.5rem; /* 8px / 16 */
}

.product-benefits__accordion-icon svg {
	width: 100%;
	height: 100%;
	color: #000000;
	transition: transform 0.3s ease;
}

.product-benefits .accordion.is-active .product-benefits__accordion-icon svg {
	transform: rotate(90deg);
}

/* ============================================
   Prawa kolumna - Tekst i obrazek
   ============================================ */
.product-benefits__content {
	display: flex;
	flex-direction: column;
	gap: 4rem; /* 64px / 16 */
}

.product-benefits__text {
	display: flex;
	flex-direction: column;
	gap: 2rem; /* 32px / 16 */
}

.product-benefits__description {
	color: rgba(0, 0, 0, 0.8);
	font-size: 1.125rem; /* 18px / 16 */
	font-weight: 400;
	line-height: 1.5; /* 27px / 18px */
}

.product-benefits__description p,
.product-related__info-box-description p {
	font-size: 1.125rem;
	line-height: 1.5;
	margin: 0 0 1.125rem 0; /* 18px / 16 */
}

.product-benefits__description p:last-child,
.product-related__info-box-description p:last-child {
	margin-bottom: 0;
}

.product-benefits__image {
	position: relative;
	width: 100%;
}

.product-benefits__image-main {
	width: 100%;
	height: auto;
	display: block;
}


/**
 * Product Features Section - Sekcja z kartami feature
 * Metodologia BEM
 * Wszystkie jednostki w REM, line-height bez jednostek
 *
 * @package hempets
 */

/* ============================================
   Główny kontener sekcji
   ============================================ */
.product-features {
	padding-top: 5rem; /* 80px / 16 */
	padding-bottom: 5rem; /* 80px / 16 */
	display: flex;
	flex-direction: column;
	gap: 4rem; /* 64px / 16 */
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/* ============================================
   Header sekcji
   ============================================ */
.product-features__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 4rem;
	text-align: center;
}

.product-features__title {
	color: #000000;
	font-size: 2.5rem; /* 40px / 16 */
	font-weight: 700;
	line-height: 1.1; /* 44px / 40px */
	margin: 0;
	padding: 0;
}

.product-features__description {
	max-width: 56.25rem; /* 900px / 16 */
	color: rgba(0, 0, 0, 0.8);
	font-size: 1rem; /* 16px / 16 */
	font-weight: 400;
	line-height: 1.5; /* 24px / 16px */
	text-align: center;
	margin-top: 1rem; /* 16px / 16 */
}

.product-features__description p {
	margin: 0;
}

/* ============================================
       Kontener z kartami - Grid Layout (12 kolumn)
       ============================================ */
.product-features__cards {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 2rem; /* 32px / 16 */
}

/* Pierwsze 3 karty - każda zajmuje 4 kolumny (1/3 szerokoĹ›ci) */
.product-features__card:nth-child(1),
.product-features__card:nth-child(2),
.product-features__card:nth-child(3) {
	grid-column: span 4;
}

/* Karty 4 i 5 - każda zajmuje 6 kolumn (1/2 szerokoĹ›ci) */
.product-features__card:nth-child(4),
.product-features__card:nth-child(5) {
	grid-column: span 6;
}

/* ============================================
   Karta feature
   ============================================ */
.product-features__card {
	position: relative;
	padding: 2rem;
	background-color: #f6f6f6;
	display: flex;
	flex-direction: column;
	gap: 2rem;
	overflow: hidden;
}

/* Ikona karty */
.product-features__card-icon {
	position: relative;
	z-index: 1;
	flex-shrink: 0;
	width: 4rem;
	height: 4rem;
	display: flex;
	align-items: center;
}

.product-features__card svg{
	position: absolute;
	top: 0;
	right: 0;
}

/* Treść karty */
.product-features__card-content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 2rem; /* 32px / 16 */
	flex: 1;
}

.product-features__card-title {
	color: #000000;
	font-size: 1.25rem; /* 20px / 16 */
	font-weight: 700;
	line-height: 1.1; /* 22px / 20px */
	margin: 0;
	padding: 0;
}

.product-features__card-description {
	color: rgba(0, 0, 0, 0.8);
	font-size: 1rem; /* 16px / 16 */
	font-weight: 400;
	line-height: 1.5; /* 24px / 16px */
	margin: 0;
	padding: 0;
}

/**
 * Product Related Section - Sekcja z produktami powiązanymi
 * Metodologia BEM
 * Wszystkie jednostki w REM, line-height bez jednostek
 *
 * @package hempets
 */

/* ============================================
   Related Products Section - GRID
   ============================================ */
.product-related {
	padding: 5rem 0; /* 80px / 16 */
}

.product-related__container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2rem; /* 64px / 16 */
}

/* Info Box (opcjonalny) */
.product-related__info {
	width: 100%;
	position: relative;
}

/* Grid z produktami */
.product-related__products {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.product-related__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 2rem; /* 32px / 16 */
}

/* Pojedynczy produkt - BEM */
.product-related__item {
	display: flex;
	gap: 1rem; /* 16px / 16 */
}

.product-related__item-image {
	max-width: 240px;
	max-height: 240px;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #f9f9f9;
	border-radius: 0.5rem; /* 8px / 16 */
}

.product-related__item-image a {
	display: block;
	width: 100%;
	height: 100%;
}

.product-related__item-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.product-related__item-title{
	margin-bottom: 0.5rem;
}

.product-related__item-title a {
	color: #000;
	font-size: 1.25rem; /* 18px / 16 */
	font-weight: 700;
	line-height: 1.1;
	transition: color 0.2s;
}

.product-related__item-title a:hover {
	color: var(--product-primary-color, #7764db);
}

.product-related__item-content{
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.product-related__item-excerpt {
	color: #575757;
	line-height: 1.5;
	margin-bottom: 1rem; /* 12px / 16 */
}

.product-related__item-rating {
	margin-top: 0.5rem; /* 8px / 16 */
	margin-bottom: 0.75rem; /* 12px / 16 */
}

.product-related__item-rating .star-rating {
	font-size: 1rem; /* 16px / 16 */
}

.product-related__item-price {
	color: #000;
	font-size: 1.25rem; /* 20px / 16 */
	font-weight: 700;
	margin-top: 0.75rem; /* 12px / 16 */
}

/* Stare style dla backward compatibility */
.product-related__product {
	display: flex;
	gap: 1rem; /* 16px / 16 */
	overflow: visible;
}

/* Obrazek produktu */
.product-related__product-image {
	flex-shrink: 0;
	width: 15rem; /* 240px / 16 */
	height: 15rem; /* 240px / 16 */
	overflow: hidden;
}

.product-related__product-image a {
	display: block;
	width: 100%;
	height: 100%;
}

.product-related__product-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* Treść produktu */
.product-related__product-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	overflow: visible; /
}

/* Ocena i gwiazdki */
.product-related__product-rating {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 1.5rem;
	overflow: visible;
}

/* Style dla widgetu Ryviu w sekcji product-related */
.product-related__review-widget {
	line-height: 1.5;
}

.product-related__review-widget * {
	overflow: visible !important;
	line-height: 1.5 !important;
	max-height: none !important;
	height: auto !important;
}

/* Nadpisz zmienną CSS Ryviu dla koloru gwiazdek */
.product-related {
	--rstact-cl: var(--product-primary-color, #fdbc00) !important;
}

.product-related .r--stars-item,
.product-related ryviu-widget-total .r--stars-item,
.product-related [class*='r--stars-item'] {
	--rstact-cl: var(--product-primary-color, #fdbc00) !important;
}

/* Nadpisz kolor gwiazdek bezpośrednio */
.product-related .r--stars-icon,
.product-related .r-icon--star1,
.product-related .r-icon--star2 {
	color: var(--product-primary-color, #fdbc00) !important;
}

/* Ukryj element .trw-text w nawiasie z liczbą opinii */
.product-related .trw-text {
	display: none !important;
}

/* Gwiazdki - wspólne style */
.product-related__product-stars {
	display: flex;
	align-items: center;
	gap: 0.125rem;
	line-height: 1.5;
	min-height: 1.5rem;
	overflow: visible;
}

/* Gwiazdki WooCommerce */
.product-related__product-stars .star-rating {
	float: none;
	margin: 0;
	width: auto;
	height: auto;
	line-height: 1.5;
	overflow: visible;
}

.product-related__product-stars .star-rating::before {
	color: #d3d3d3;
}

.product-related__product-stars .star-rating span {
	color: var(--product-primary-color, #ffc107);
}

.product-related__product-stars--empty {
	gap: 0.125rem;
}

.product-related__star {
	line-height: 1.5;
	color: #d3d3d3;
	display: inline-block;
}

.product-related__star--filled {
	color: var(--product-primary-color, #ffc107);
}

.product-related__star--empty {
	color: #d3d3d3;
}

.product-related__rating-count {
	color: rgba(0, 0, 0, 0.8);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	min-height: 1.5rem;
	display: inline-flex;
	align-items: center;
}

/* Tytuł produktu */
.product-related__product-title {
	margin: 0;
	padding: 0;
}

.product-related__product-title a {
	color: #000000;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
}

/* Opis produktu */
.product-related__product-description {
	color: #575757;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
}

.product-related__product-description p {
	margin: 0;
	color: #575757;
}

/* Cena produktu */
.product-related__product-price {
	color: #000000;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.1;
}

.product-related__product-price .woocommerce-Price-amount {
	color: #000000;
}

/* ============================================
   Prawa kolumna - Fioletowy box z tekstem
   ============================================ */
.product-related__info-box {
	position: relative;
	padding: 4rem; /* 64px / 16 */
	background-color: var(--product-primary-color, #7764db);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	min-height: 100%;
	max-height: 640px;
    height: 100%;
    justify-content: space-between;
}


/* Tytuł w boxie */
.product-related__info-box-title {
	position: relative;
	z-index: 1;
	color: #ffffff;
	font-size: 2.5rem; /* 40px / 16 */
	font-weight: 700;
	line-height: 1.1; /* 44px / 40px */
	padding: 0;
	width: 32rem; /* 512px / 16 */
	max-width: 100%;
}

/* Opis w boxie */
.product-related__info-box-description {
	position: relative;
	z-index: 1;
	font-weight: 400;
	line-height: 1.5; /* 24px / 16px */
}

.product-related__info-box-description p {
	margin: 0 0 1rem 0;
	color: #ffffff;
}

.product-related__info-box-description p:last-child {
	margin-bottom: 0;
}

/**
 * Product Ingredients Section - Sekcja ze składnikami produktu
 * Metodologia BEM
 * Wszystkie jednostki w REM, line-height bez jednostek
 *
 * @package hempets
 */

/* ============================================
   Główny kontener sekcji
   ============================================ */
.product-ingredients {
	padding-top: 5rem; /* 80px / 16 */
	padding-bottom: 5rem; /* 80px / 16 */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 4rem; /* 64px / 16 */
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/* ============================================
   Nagłówek sekcji
   ============================================ */
.product-ingredients__header {
	display: flex;
	flex-direction: column;
	gap: 2rem; /* 32px / 16 */
}

.product-ingredients__title {
	color: #000000;
	font-size: 2.5rem; /* 40px / 16 */
	font-weight: 700;
	line-height: 1.1; /* 44px / 40px */
	margin: 0;
	padding: 0;
	text-align: center;
}

.product-ingredients__description  {
	color: rgba(0, 0, 0, 0.8);
	max-width: 900px;
}

.product-ingredients__description p {
	font-size: 1rem; /* 16px / 16 */
	font-weight: 400;
	line-height: 1.5; /* 24px / 16px */
	text-align: center;
	margin: 0;
}

/* ============================================
   Tabela składników
   ============================================ */
.product-ingredients__table {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Style dla tabeli TablePress */
.product-ingredients__table table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid rgba(128, 128, 128, 0.3);
}

.product-ingredients__table thead th {
	background-color: #f6f6f6;
	border: 1px solid rgba(128, 128, 128, 0.3);
	padding: 1.25rem 1.5rem; /* 20px 24px / 16 */
	color: #000000;
	font-size: 1.125rem; /* 18px / 16 */
	font-weight: 700;
	line-height: 1.39; /* 25px / 18px */
	text-align: left;
}

.product-ingredients__table tbody td {
	border: 1px solid rgba(128, 128, 128, 0.3);
	padding: 1.25rem 1.5rem; /* 20px 24px / 16 */
	color: rgba(0, 0, 0, 0.8);
	font-size: 1rem; /* 16px / 16 */
	font-weight: 400;
	line-height: 1.5; /* 24px / 16px */
	vertical-align: top;
}

.product-ingredients__table tbody tr:first-child td {
	border-top: 1px solid rgba(128, 128, 128, 0.3);
}

/* Placeholder dla tabeli */
.product-ingredients__table-placeholder {
	width: 100%;
	padding: 2rem; /* 32px / 16 */
	text-align: center;
	color: rgba(0, 0, 0, 0.5);
	font-size: 1rem; /* 16px / 16 */
}

/* ============================================
   Box informacyjny na dole
   ============================================ */
.product-ingredients__info-box {
	position: relative;
	max-width: 944px;
	padding: 2rem; /* 32px / 16 */
	background-color: #f6f6f6;
	display: flex;
	align-items: center;
	gap: 2rem; /* 32px / 16 */
	overflow: hidden;
}

/* Ikona informacyjna */

.product-ingredients__info-box-icon {
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Tekst informacyjny */
.product-ingredients__info-box-text {
	position: relative;
	z-index: 1;
	flex: 1;
	color: rgba(0, 0, 0, 0.8);
	font-size: 1rem; /* 16px / 16 */
	font-weight: 400;

	line-height: 1.5; /* 24px / 16px */
}

.product-ingredients__info-box-text p {
	margin: 0;
}

/**
 * Product Why Section - Sekcja "Dlaczego opiekunowie wybierają Hempets™"
 * Metodologia BEM
 * Wszystkie jednostki w REM, line-height bez jednostek
 *
 * @package hempets
 */

/* ============================================
   Główny kontener sekcji
   ============================================ */
.product-why {
	padding-top: 5rem; /* 80px / 16 */
	padding-bottom: 10rem; /* 160px / 16 */
	display: flex;
	flex-direction: column;
	gap: 4rem; /* 64px / 16 */
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/* ============================================
   Górna część: Tytuł + Statystyki
   ============================================ */
.product-why__top {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8rem; /* 128px / 16 */
	width: 100%;
}

.product-why__top-left {
	width: 38.25rem; /* 612px / 16 */
	max-width: 100%;
	display: flex;
	flex-direction: column;
	gap: 2rem; /* 32px / 16 */
}

.product-why__title {
	color: #000000;
	font-size: 2.5rem; /* 40px / 16 */
	font-weight: 700;
	line-height: 1.1; /* 44px / 40px */
	margin: 0;
	padding: 0;
}

.product-why__description {
	color: rgba(0, 0, 0, 0.8);
	line-height: 1.5; /* 24px / 16px */
	margin-top: 2rem;
}

.product-why__description p {
	margin: 0;
}

/* Statystyki */
.product-why__stats {
	flex: 1;
	display: flex;
	gap: 2rem; /* 32px / 16 */
}

.product-why__stat {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 1rem; /* 16px / 16 */
}

.product-why__stat-number {
	color: var(--product-primary-color, #7764db);
	font-size: 2.5rem; /* 40px / 16 */
	font-weight: 700;
	line-height: 1.1; /* 44px / 40px */
	white-space: nowrap;
}

.product-why__stat-label {
	color: rgba(0, 0, 0, 0.8);
	font-size: 1rem; /* 16px / 16 */
	font-weight: 400;
	line-height: 1.5; /* 24px / 16px */
	text-align: center;
}

/* ============================================
   Dolna część: Obrazek + Karty
   ============================================ */
.product-why__bottom {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem; /* 32px / 16 */
	width: 100%;
}


.product-why__image img{
	height: 100%;
	object-fit: cover;
}

/* Karty */
.product-why__cards {
	flex: 1;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: auto auto;
	gap: 2rem; /* 32px / 16 */
}

/* Trzecia karta zajmuje całą szerokość */
.product-why__card--full-width {
	grid-column: 1 / -1;
}

/* Pojedyncza karta */
.product-why__card {
	position: relative;
	padding: 2rem; /* 32px / 16 */
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 2rem; /* 32px / 16 */
	overflow: hidden;
	background-color: #f6f6f6;
	color: #000000;
	transition: background-color 0.3s ease, color 0.3s ease;
}

/* Hover - zmiana na fioletowe tło z białymi tekstami */
.product-why__card:hover {
	background-color: var(--product-primary-color, #7764db);
	color: #ffffff;
}

/* Ikona łapy w prawym górnym rogu karty */
.product-why__card-icon {
	position: absolute;
	top: 0;
	right: 0;
	pointer-events: none;
	z-index: 0;
	max-width: 105px;
	width: 100%;
	height: 79px;
}

.product-why__card-icon svg {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;

}

.product-why__card:hover .product-why__card-icon svg path{
	fill: #fff;
}

.product-why__card-icon svg g {
	color: var(--product-primary-color, #7764db);
	transition: color 0.3s ease;
}

/* Hover - zmiana koloru ikony na biały */
.product-why__card:hover .product-why__card-icon svg g {
	color: #ffffff;
}

/* Tytuł karty */
.product-why__card-title {
	position: relative;
	z-index: 1;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.1;
	margin: 0;
	padding: 0;
	color: #000000;
	transition: color 0.3s ease;
}

/* Hover - biały tekst */
.product-why__card:hover .product-why__card-title {
	color: #ffffff;
}

/* Opis karty */
.product-why__card-description {
	position: relative;
	z-index: 1;
	font-size: 1.125rem; /* 18px / 16 */
	font-weight: 400;

	line-height: 1.5; /* 27px / 18px */
	color: rgba(0, 0, 0, 0.8);
	transition: color 0.3s ease;
}

.product-why__card-description p {
	margin: 0;
	color: inherit; /* Dziedziczy kolor z rodzica */
	transition: color 0.3s ease;
}

/* Hover - biały tekst */
.product-why__card:hover .product-why__card-description,
.product-why__card:hover .product-why__card-description p {
	color: #ffffff;
}

/* Link w karcie */
.product-why__card-link {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 0.5rem; /* 8px / 16 */
	text-decoration: none;
	font-size: 1.125rem; /* 18px / 16 */
	font-weight: 700;
	line-height: 1.39; /* 25px / 18px */
	white-space: nowrap;
	color: var(--product-primary-color, #7764db);
	transition: color 0.3s ease;
}

/* Hover - biały tekst */
.product-why__card:hover .product-why__card-link {
	color: #ffffff;
}

.product-why__card-link svg {
	width: 1.5rem; /* 24px / 16 */
	height: 1.5rem; /* 24px / 16 */
	flex-shrink: 0;
}

/**
 * Product FAQ Section - Sekcja z najczęstszymi pytaniami
 * Metodologia BEM
 * Wszystkie jednostki w REM, line-height bez jednostek
 *
 * @package hempets
 */

/* ============================================
   Główny kontener sekcji
   ============================================ */
.product-faq {
	position: relative;
	padding-top: 5rem; /* 80px / 16 */
	padding-bottom: 5rem; /* 80px / 16 */
	background-color: #f6f6f6;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	overflow: hidden;
}

/* Kontener wewnętrzny dla treści (wyśrodkowany) - używa standardowej klasy .container */
.product-faq .container {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 4rem; /* 64px / 16 */
	box-sizing: border-box;
}

/* ============================================
   Nagłówek sekcji
   ============================================ */

.product-faq__title {
	color: #000000;
	font-size: 2.5rem; /* 40px / 16 */
	font-weight: 700;

	line-height: 1.1; /* 44px / 40px */
	margin: 0;
	padding: 0;
}

.product-faq__description {
	color: rgba(0, 0, 0, 0.8);
	font-size: 1rem; /* 16px / 16 */
	font-weight: 400;

	line-height: 1.5; /* 24px / 16px */
}

.product-faq__description p {
	margin: 0;
}

/* ============================================
   Dwie kolumny z accordionami
   ============================================ */
.product-faq__columns {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem; /* 64px / 16 */
	width: 100%;
}

.product-faq__column {
	display: flex;
	flex-direction: column;
	gap: 1.5rem; /* 24px / 16 */
}

/* ============================================
   Dostosowanie istniejących stylów accordion
   ============================================ */

.product-faq .accordion {
	margin-bottom: 0;
	background-color: transparent;
	border-top: 1px solid #8080804d;
	box-shadow: none;
	position: relative;
}

.product-faq .accordion:last-child {
	border-bottom: 1px solid #8080804d;
}

.product-faq .accordion:hover {
	box-shadow: none;
}

/* Head accordion */
.product-faq .accordion__head {
	background-color: transparent !important;
	border-left: none;
	padding: 0;
	gap: 1rem; /* 16px / 16 */
	display: flex;
	position: relative;
	padding-block: 1.563rem;
}

.product-faq .accordion__head-left-part {
	display: none; /* Ukryj lewą część, używamy własnej struktury */
}

/* Numeracja */
.product-faq__accordion-number {
	flex-shrink: 0;
	color: var(--product-primary-color, #7764db);
	font-size: 1.25rem; /* 20px / 16 */
	font-weight: 700;

	line-height: 1.1; /* 22px / 20px */
	white-space: nowrap;
}

/* Tytuł pytania */
.product-faq .accordion__head-title {
	flex: 1;
	color: #000000 !important;
	font-size: 1.25rem; /* 20px / 16 */
	font-weight: 700;

	line-height: 1.1; /* 22px / 20px */
	margin: 0;
	padding: 0;
}

/* Ikona plus/minus */
.product-faq__accordion-icon {
	flex-shrink: 0;
	width: 1.5rem; /* 24px / 16 */
	height: 1.5rem; /* 24px / 16 */
	display: flex;
	align-items: center;
	justify-content: center;
	color: #000000;
	transition: transform 0.3s ease, color 0.3s ease;
	position: relative;
}

.product-faq .accordion.is-active .product-faq__accordion-icon {
	color: var(--product-primary-color, #7764db);
}

.product-faq__accordion-icon svg {
	width: 100%;
	height: 100%;
}

/* Plus icon - widoczny domyślnie */
.product-faq__icon-plus {
	display: block;
}

.product-faq .accordion.is-active .product-faq__icon-plus {
	display: none;
}

/* Minus icon - ukryty domyślnie */
.product-faq__icon-minus {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
}

.product-faq .accordion.is-active .product-faq__icon-minus {
	display: block;
}

/* Body accordion */
.product-faq .accordion__body {
	background-color: transparent;
	display: none;
	padding: 0 2rem 1.5rem 2.4575rem;
}

.product-faq .accordion.is-active .accordion__body {
	display: block;
}

.product-faq .accordion__body-inner {
	padding: 0;
}

.product-faq .accordion__body-inner p {
	color: rgba(0, 0, 0, 0.8);
	font-size: 1rem; /* 16px / 16 */
	font-weight: 400;

	line-height: 1.5; /* 24px / 16px */
	margin: 0;
}
/**
 * Product Loved By Owners Section - Sekcja z filmami YouTube i sliderem tekstowym
 * Metodologia BEM
 * Wszystkie jednostki w REM, line-height bez jednostek
 *
 * @package hempets
 */

/* ============================================
   Główny kontener sekcji
   ============================================ */
.product-loved-by-owners {
	position: relative;
	padding-top: 5rem; /* 80px / 16 */
	padding-bottom: 5rem; /* 80px / 16 */
	display: flex;
	flex-direction: column;
	gap: 4rem; /* 64px / 16 */
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	overflow: hidden;
}

/* ============================================
   Nagłówek sekcji
   ============================================ */
.product-loved-by-owners__header {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 2rem; /* 32px / 16 */
	width: 100%;
}

.product-loved-by-owners__title {
	color: #000000;
	font-size: 2.5rem; /* 40px / 16 */
	font-weight: 700;
	line-height: 1.1; /* 44px / 40px */
	margin: 0;
	padding: 0;
}

.product-loved-by-owners__description {
	max-width: 100%;
	color: rgba(0, 0, 0, 0.8);
	font-size: 1rem; /* 16px / 16 */
	font-weight: 400;
	line-height: 1.5; /* 24px / 16px */
}

.product-loved-by-owners__description p {
	margin: 0;
}

/* ============================================
   Grid z filmami i info boxem - 2fr 1fr
   ============================================ */
.product-loved-by-owners__content-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 1rem; /* 16px / 16 */
	width: 100%;
}

/* ============================================
   Lewa kolumna - Filmy YouTube (2fr)
   Grid 1fr 1fr: duże video po lewej, dwa mniejsze po prawej
   ============================================ */
.product-loved-by-owners__video-main {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem; /* 16px / 16 */
	width: 100%;
	max-width: 100%;
}

/* Wrapper dla głównego filmu (lewa kolumna) */
.product-loved-by-owners__video-main > .product-loved-by-owners__video-wrapper {
	grid-column: 1;
	width: 100%;
	height: 37.5rem; /* 600px / 16 */
}

/* Kolumna z dwoma mniejszymi filmami (prawa kolumna) */
.product-loved-by-owners__video-secondary-column {
	grid-column: 2;
	display: flex;
	flex-direction: column;
	gap: 1rem; /* 16px / 16 */
	width: 100%;
}

.product-loved-by-owners__video-secondary {
	width: 100%;
	height: 18.25rem; /* 292px / 16 */
	position: relative;
}

.product-loved-by-owners__video-secondary .product-loved-by-owners__video-wrapper {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
}

/* Wrapper dla wszystkich filmĂłw */
.product-loved-by-owners__video-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	background-color: #000000;
	overflow: hidden;
}

/* Thumbnail YouTube */
.product-loved-by-owners__video-thumbnail {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	z-index: 1;
}

/* Overlay z przyciskiem play */
.product-loved-by-owners__video-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(0, 0, 0, 0.3);
	z-index: 2;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.product-loved-by-owners__video-overlay:hover {
	background-color: rgba(0, 0, 0, 0.5);
}

.product-loved-by-owners__video-wrapper.is-playing .product-loved-by-owners__video-overlay {
	display: none;
}

/* Przycisk play */
.product-loved-by-owners__play-button {
	width: 4.5rem; /* 72px / 16 */
	height: 4.5rem; /* 72px / 16 */
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s ease;
}

.product-loved-by-owners__play-button:hover {
	transform: scale(1.1);
}

.product-loved-by-owners__play-button svg {
	width: 100%;
	height: 100%;
}

/* Iframe YouTube */
.product-loved-by-owners__video-iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
	z-index: 3;
	display: none;
}

.product-loved-by-owners__video-wrapper.is-playing .product-loved-by-owners__video-iframe {
	display: block;
}

/* ============================================
   Prawa kolumna - Info Box ze sliderem
   ============================================ */
.product-loved-by-owners__info-box {
	grid-column: 2;
	position: relative;
	padding: 2rem; /* 32px / 16 */
	background-color: #f6f6f6;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* Slider z całymi slajdami */
.product-loved-by-owners__info-box-slider {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	display: flex !important;
	flex-direction: column;
}

/* Pojedynczy slajd */
.product-loved-by-owners__info-box-slide {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
}

/* Zawartość slajdu */
.product-loved-by-owners__info-box-content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 2rem; /* 32px / 16 */
	flex: 1;
}

/* Ikona łapy - bezpośrednio SVG */
.product-loved-by-owners__info-box-icon {
	width: 4rem; /* 64px / 16 */
}

/* Tytuł info box */
.product-loved-by-owners__info-box-title {
	color: #000000;
	font-size: 1.25rem; /* 20px / 16 */
	font-weight: 700;

	line-height: 1.1; /* 22px / 20px */
	margin: 0;
	padding: 0;
}

.product-loved-by-owners__info-box-text {
	color: rgba(0, 0, 0, 0.8);
	font-size: 1.125rem; /* 18px / 16 */
	font-weight: 400;

	line-height: 1.5; /* 27px / 18px */
	margin: 0;
}

/* Nawigacja slidera - wyśrodkowana w każdym slajdzie */
.product-loved-by-owners__info-box-navigation {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem; /* 8px / 16 */
	margin-top: auto;
	padding-top: 2rem; /* 32px / 16 */
}

.product-loved-by-owners__nav-arrow {
	width: 3rem; /* 48px / 16 */
	height: 3rem; /* 48px / 16 */
	padding: 0.5rem; /* 8px / 16 */
	border-radius: 3.625rem; /* 58px / 16 */
	border: 1px solid rgba(128, 128, 128, 0.3);
	background-color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease;
	border: none;
}

.product-loved-by-owners__nav-arrow--next {
	background-color: var(--product-primary-color, #7764db);
	color: #ffffff;
}

.product-loved-by-owners__nav-arrow--next:hover {
	background-color: #5a4ba8;
}

.product-loved-by-owners__nav-arrow svg {
	width: 1rem; /* 16px / 16 */
	height: 1rem; /* 16px / 16 */
}

/* Slick slider custom styles */
.product-loved-by-owners__info-box-slider .slick-dots {
	display: none !important;
}

/* Upewnij się, że nasze strzałki są widoczne */
.product-loved-by-owners__nav-arrow {
	display: flex !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/**
 * Product Experts Section - Sekcja z ekspertami
 * Metodologia BEM
 * Wszystkie jednostki w REM, line-height bez jednostek
 *
 * @package hempets
 */

/* ============================================
   Główny kontener sekcji
   ============================================ */
.product-experts {
	padding-top: 5rem; /* 80px / 16 */
	padding-bottom: 10rem; /* 160px / 16 */
	display: flex;
	flex-direction: column;
	gap: 4rem; /* 64px / 16 */
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/* ============================================
   Nagłówek sekcji
   ============================================ */
.product-experts__title {
	color: #000000;
	font-size: 2.5rem; /* 40px / 16 */
	font-weight: 700;
	line-height: 1.1; /* 44px / 40px */
	margin: 0;
	padding: 0;
}

.product-experts__description {
	color: rgba(0, 0, 0, 0.8);
	font-size: 1rem; /* 16px / 16 */
	font-weight: 400;
	line-height: 1.5; /* 24px / 16px */
}

.product-experts__description p {
	margin: 0;
}

/* ============================================
   Karty ekspertów - Slick Slider
   ============================================ */
.product-experts__cards {
	width: 100%;
	margin: 0;
}

.product-experts__cards .slick-list {
	margin: 0 -2.8125rem; /* -45px / 16 - negatywny margin dla gap */
}

.product-experts__cards .slick-slide {
	margin: 0 2.8125rem; /* 45px / 16 - odstęp między slajdami (razem 90px) */
}

/* ============================================
   Karta eksperta
   ============================================ */
.product-experts__card {
	width: 100%;
	max-width: 37.0625rem; /* 593px / 16 */
	display: flex;
	flex-direction: column;
	margin: 0 auto;
}

/* Obrazek eksperta */
.product-experts__card-image {
	width: 100%;
}

.product-experts__card-img {
	width: 100%;
	aspect-ratio: 1 / 1;
	display: block;
	object-fit: cover;
}

.product-experts__card-placeholder {
	width: 100%;
	aspect-ratio: 1 / 1;
	background-color: #f0f0f0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #999;
	font-size: 1rem;
}

/* Box z tekstem */
.product-experts__card-content {
	position: relative;
	padding: 4rem 3rem; /* 64px 48px / 16 */
	background-color: #f6f6f6;
	display: flex;
	flex-direction: column;
	gap: 2rem; /* 32px / 16 */
	overflow: hidden;
}

/* Dekoracyjna ikona w tle */
.product-experts__card-decoration {
	display: none; /* Ukryj dekoracyjną ikonę - nie jest potrzebna bez absolute positioning */
}

/* Header z ikoną i tytułem */
.product-experts__card-header {
	display: flex;
	align-items: center;
	gap: 2rem; /* 32px / 16 */
}

/* Ikona łapy */
.product-experts__card-icon {
	flex-shrink: 0;
	width: 4rem; /* 64px / 16 */
	height: 4rem; /* 64px / 16 */
	display: flex;
	align-items: center;
}

.product-experts__card-icon svg {
	width: 100%;
	height: 100%;
}

/* Tytuł karty */
.product-experts__card-title {
	color: #000000;
	font-size: 1.25rem; /* 20px / 16 */
	font-weight: 700;
	line-height: 1.1; /* 22px / 20px */
	margin: 0;
	padding: 0;
}

/* Opis */
.product-experts__card-description {
	color: rgba(0, 0, 0, 0.8);
	font-size: 1.125rem; /* 18px / 16 */
	font-weight: 400;
	line-height: 1.5; /* 27px / 18px */
	flex: 1;
}

.product-experts__card-description p {
	margin: 0;
}

/* Stopka z imieniem i profesjÄ… */
.product-experts__card-footer {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.product-experts__card-name {
	color: var(--product-primary-color, #7764db);
	font-size: 1.125rem; /* 18px / 16 */
	font-weight: 700;
	line-height: 1.39; /* 25px / 18px */
}

.product-experts__card-profession {
	color: rgba(0, 0, 0, 0.8);
	font-size: 0.875rem; /* 14px / 16 */
	font-weight: 400;
	line-height: 1.5; /* 21px / 14px */
}
/**
 * Product Quality Section - Sekcja z jakością i certyfikatami
 * Metodologia BEM
 * Wszystkie jednostki w REM, line-height bez jednostek
 *
 * @package hempets
 */

/* ============================================
   Główny kontener sekcji
   ============================================ */
.product-quality {
	padding-top: 5rem; /* 80px / 16 */
	padding-bottom: 5rem; /* 80px / 16 */
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/* ============================================
   Kontener z obrazkiem i tekstem
   ============================================ */
.product-quality__container {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem; /* 32px / 16 */
	width: 100%;
	align-items: start;
}

/* ============================================
   Obrazek po lewej
   ============================================ */
.product-quality__image {
	position: relative;
	width: 100%;
}

.product-quality__image-main {
	width: 100%;
	aspect-ratio: 640 / 889;
	display: block;
	object-fit: cover;
}

.product-quality__image-placeholder {
	width: 100%;
	aspect-ratio: 640 / 889;
	background-color: #f0f0f0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #999;
	font-size: 1rem;
}

/* ============================================
   Tekst po prawej
   ============================================ */

.product-quality__title {
	color: #000000;
	font-size: 2.5rem; /* 40px / 16 */
	font-weight: 700;
	line-height: 1.1; /* 44px / 40px */
	margin: 0;
	padding: 0;
	margin-bottom: 4rem;
}

.product-quality__description {
	color: rgba(0, 0, 0, 0.8);
	font-size: 1.125rem; /* 18px / 16 */
	font-weight: 400;
	line-height: 1.5; /* 27px / 18px */
}

.product-quality__description p {
	font-size: 1.125rem;
	line-height: 1.5;
	margin: 0 0 1.125rem 0; /* 18px / 16 */
}

.product-quality__description p:last-child {
	margin-bottom: 0;
}

/* ============================================
   Fioletowy box na dole po prawej
   ============================================ */
.product-quality__box {
	position: relative;
	padding: 2rem; /* 32px / 16 */
	background-color: var(--product-primary-color, #7764db);
	display: flex;
	flex-direction: column;
	gap: 4rem; /* 64px / 16 */
	width: 100%;
	overflow: hidden;
	margin-top: 137px;
	margin-left: -117px;
}

/* Zawartość boxa - flex row z ikoną i tekstem */
.product-quality__box-content {
	position: relative;
	z-index: 2;
	display: flex;
	gap: 2rem; /* 32px / 16 */
}

/* Ikona łapy - flex item */
.product-quality__box-paws {
	flex-shrink: 0;
	width: 4rem; /* 64px / 16 */
	height: 4rem; /* 64px / 16 */
	display: flex;
	align-items: center;
	justify-content: center;
}

.product-quality__box-paws svg {
	width: 4rem; /* 64px / 16 */
	height: 4rem; /* 64px / 16 */
}

/* Wrapper dla tekstu i przycisku */
.product-quality__box-text-wrapper {
	display: flex;
	flex-direction: column;
	gap: 2rem; /* 32px / 16 */
	flex: 1;
}

.product-quality__box-text {
	color: #ffffff;
	font-size: 1.125rem; /* 18px / 16 */
	font-weight: 400;
	line-height: 1.5; /* 27px / 18px */
	margin: 0;
}

/* Przycisk */
.product-quality__box-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 1rem 2rem; /* 16px 32px / 16 */
	background-color: var(--product-primary-color, #7764db);
	opacity:0.5;
	color: #ffffff;
	font-size: 1rem; /* 16px / 16 */
	font-weight: 400;
	line-height: 1.5; /* 24px / 16px */
	text-align: center;
	text-decoration: none;
	border-radius: 6.25rem; /* 100px / 16 */
	transition: background-color 0.3s ease, color 0.3s ease;
	align-self: flex-start;
	border-radius: 999px;
}

.product-quality__box-button:hover {
	background-color: #ffffff;
	color: #000000;
}


/* ============================================
   SECTION 1: ADVANCED JOINT PROTECTION
   ============================================ */
.section-1 {
	min-height: 1247px;
	padding: 12.5rem 4rem; /* 200px 64px */
	position: relative;
	background-color: var(--color-bg-light);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 2rem; /* 32px */
}

.content-box-green {
	padding: 4rem; /* 64px */
	background-color: var(--color-primary-green);
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 4rem; /* 64px */
}

.main-heading {
	width: 550px;
	color: var(--color-white);
	font-size: 2.5rem; /* 40px */
	font-weight: 700;
	line-height: 2.75rem; /* 44px */
}

.description-text {
	width: 550px;
	color: var(--color-white);
	font-size: 1.125rem; /* 18px */
	font-weight: 400;
	line-height: 1.6875rem; /* 27px */
}

.description-text p {
	margin-bottom: 1em;
}

.description-text p:last-child {
	margin-bottom: 0;
}

.description-text strong {
	font-weight: 600;
}

/* Section 1 - Images */
.product-image {
	position: absolute;
	left: 866px;
	top: 232px;
}

/* ============================================
   SECTION 4: CUSTOMER STORY
   ============================================ */
.section-4 {
	min-height: 1213px;
	padding: 9.375rem 4rem; /* 150px 64px */
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 4rem; /* 64px */
}

.story-header {
	width: 900px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 2rem; /* 32px */
}

.story-heading {
	width: 100%;
	color: var(--color-text-dark);
	font-size: 2.5rem; /* 40px */
	font-weight: 700;
	line-height: 2.75rem; /* 44px */
}

.story-intro {
	width: 100%;
	color: var(--color-text-muted);
	font-size: 1rem; /* 16px */
	font-weight: 400;
	line-height: 1.5rem; /* 24px */
}

.story-content {
	width: 100%;
	height: 657px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 4rem; /* 64px */
}

.story-image {
	position: relative;
}

.testimonial-box {
	flex: 1;
	height: 100%;
	padding: 4rem 3rem; /* 64px 48px */
	position: relative;
	background-color: var(--color-bg-light);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 4rem; /* 64px */
	overflow: hidden;
}

.quote-icon {
	width: auto;
	height: auto;
}

.testimonial-content {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 4rem; /* 64px */
}

.testimonial-text {
	width: 100%;
	color: var(--color-text-muted);
	font-size: 1.125rem; /* 18px */
	font-weight: 400;
	line-height: 1.6875rem; /* 27px */
}

.author-info {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1rem; /* 16px */
}

.author-avatar {
	width: auto;
	height: auto;
}

.author-details {
	flex: 1;
}

.author-name {
	color: var(--color-primary-green);
	font-size: 1.125rem; /* 18px */
	font-weight: 700;
	line-height: 1.25rem; /* 20px */
}

.author-description {
	color: var(--color-text-muted);
	font-size: 0.875rem; /* 14px */
	font-weight: 400;
	line-height: 1.3125rem; /* 21px */
}

/* ============================================
   SECTION 8: WHY CHOOSE US
   ============================================ */
.section-8 {
	position: relative;
}

.section-8 .container,
.section-1 .container {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 2rem; /* 32px */
	padding: 5rem 4rem; /* 80px 64px */
}

.main-image {
	position: relative;
}

.feature-boxes-wrapper {
	width: 715px;
	position: absolute;
	left: 540px;
	top: 627px;
	display: inline-flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 1.4375rem; /* 23px */
}

.feature-box {
	width: 100%;
	padding: 2rem; /* 32px */
	position: relative;
	background-color: var(--color-primary-green);
	display: inline-flex;
	justify-content: flex-start;
	align-items: center;
	gap: 4rem; /* 64px */
	overflow: hidden;
}

.feature-icon {
	width: auto;
	height: auto;
}

.feature-text-wrapper {
	display: inline-flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 2rem; /* 32px */
}

.feature-text {
	width: 523px;
	color: var(--color-white);
	font-size: 1.125rem; /* 18px */
	font-weight: 400;
	line-height: 1.6875rem; /* 27px */
}

.info-content {
	width: 640px;
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 4rem; /* 64px */
}

.info-heading {
	width: 550px;
	color: var(--color-text-dark);
	font-size: 2.5rem; /* 40px */
	font-weight: 700;
	line-height: 2.75rem; /* 44px */
}

.info-description {
	width: 550px;
	color: var(--color-text-muted);
	font-size: 1.125rem; /* 18px */
	font-weight: 400;
	line-height: 1.6875rem; /* 27px */
}

/* ============================================
   KONIEC DODATKOWYCH SEKCJI
   ============================================ */
/**
 * Product Sections - Grid Layout System
 * Wszystkie sekcje produktu uĹĽywajÄ… CSS Grid
 * Metodologia BEM + Mobile First
 *
 * @package hempets
 * @version 2.0.0
 */

/* ============================================
   SECTION: HERO
   ============================================ */
.product-hero {
	padding: 5rem 0;
}

.product-hero__description {
	font-size: 1.125rem;
	line-height: 1.6;
	color: rgba(0, 0, 0, 0.8);
}

.product-hero__info-box-container {
	position: relative;
}

.product-hero__info-box-container .accordion__decoration,
.product-related__info .accordion__decoration {
	position: absolute;
	top: 0;
	right: 0;
	width: auto;
	height: 100%;
	pointer-events: none;
	z-index: 20;
	max-width: 200px;
	height: auto;
}

.product-hero__info-box-container .accordion__decoration{
	top:-25px;
	right:-30px;
}

.product-related__info .accordion__decoration {
	max-width: 349px;
	height: auto;
}

.product-hero__info-box {
	position: relative;
	background: var(--product-primary-color, #7764db);
	z-index: 1;
}

.product-hero__info-box-text {
	color: #fff;
	font-size: 1.125rem;
	line-height: 1.5;
	margin: 0;
}

.product-hero__image-img {
	width: 100%;
	height: auto;
	display: block;
}

/* ============================================
   SECTION: BENEFITS ACCORDION
   ============================================ */
.product-benefits {
	padding: 5rem 0;
}

.product-benefits__container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	align-items: start;
}

.product-benefits__content {
	display: grid;
	gap: 2rem;
}

.product-benefits__description {
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(0, 0, 0, 0.8);
}

.product-benefits__image-img {
	width: 100%;
	height: auto;
	display: block;
}


/* ============================================
   SECTION: FEATURES CARDS
   ============================================ */
.product-features {
	padding: 5rem 0;
}

.product-features__title {
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 1.5rem 0;
}

.product-features__description {
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(0, 0, 0, 0.8);
}

.product-features__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px; /* dostosuj wg potrzeb */
}

.product-features__item {
	position: relative;
	padding: 3rem;
	background: #f6f6f6;
	border-radius: 0.5rem;
	display: grid;
	gap: 1.5rem;
	overflow: hidden;
}

.product-features__item-icon {
	width: 64px;
	height: 64px;
}

.product-features__item-icon-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.product-features__item-title {
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.1;
	margin-bottom: 2rem;
}

.product-features__item-description {
	line-height: 1.5;
	color: rgba(0, 0, 0, 0.8);
	margin: 0;
}


/* ============================================
   SECTION: RELATED PRODUCTS
   ============================================ */
.product-related {
	padding: 5rem 0;
}


.product-related__item-image {
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #f9f9f9;
	border-radius: 0.5rem;
}

.product-related__item-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.product-related__item-rating {
	margin-top: 0.5rem;
	margin-bottom: 0.75rem;
}

.product-related__item-rating .star-rating {
	font-size: 1rem;
}

.product-related__item-price {
	color: #000;
	font-size: 1.25rem;
	font-weight: 700;
	margin-top: 0.75rem;
}

/* Info Box */
.product-related__info-box-icon svg {
	width: 64px;
	height: 64px;
}

.product-related__info-box-description {
	color: #fff;
	font-size: 1rem;
	line-height: 1.6;
}



/* ============================================
   SECTION: INGREDIENTS TABLE
   ============================================ */
.product-ingredients {
	padding: 5rem 0;
}

.product-ingredients__title {
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 1.5rem 0;
}

.product-ingredients__table {
	width: 100%;
}

.product-ingredients__table table {
	width: 100%;
	border-collapse: collapse;
}

/* ============================================
   SECTION: WHY CHOOSE BRAND
   ============================================ */
.product-why {
	padding: 5rem 0;
}

.product-why__container {
	display: grid;
	gap: 4rem;
}

.product-why__header {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 4rem;
	align-items: start;
}

.product-why__title {
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
}

.product-why__description {
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(0, 0, 0, 0.8);
}

.product-why__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}

.product-why__stat {
	text-align: center;
}

.product-why__stat-number {
	font-size: 3rem;
	font-weight: 700;
	line-height: 1;
	color: var(--product-primary-color, #7764db);
}

.product-why__stat-label {
	font-size: 0.875rem;
	line-height: 1.4;
	color: rgba(0, 0, 0, 0.6);
	margin-top: 0.5rem;
}

.product-why__content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	align-items: start;
}

.product-why__card:hover {
	transform: translateY(-4px);
}

.product-why__card--full-width {
	grid-column: 1 / -1;
}

.product-why__card-description {
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(0, 0, 0, 0.8);
}

/* ============================================
   SECTION: EXPERTS RECOMMENDATIONS
   ============================================ */
.product-experts {
	padding: 5rem 0;
}

.product-experts__title {
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 1.5rem 0;
}

.product-experts__description {
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(0, 0, 0, 0.8);
}

.product-experts__grid{
	margin-top: 64px;
}

.product-experts__item {
	display: flex;
	flex-direction: column;
	max-width: 567px;
}

.product-experts__item-header{
	display: flex;
	gap: 2rem;
}

.product-experts__item-content {
	position: relative;
	padding: 3rem;
	background: #f6f6f6;
	margin: -78px -26px -78px 26px;
}

.product-experts__item-title {
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.1;
	margin: 0;
}

.product-experts__item-description p {
	font-size: 1.125rem;
	line-height: 1.5;
	color: rgba(0, 0, 0, 0.8);
	margin-top: 2rem;
	margin-bottom: 2rem;
}

.product-experts__item-name {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--product-primary-color, #7764db);
}

.product-experts__item-profession {
	font-size: 0.875rem;
	color: rgba(0, 0, 0, 0.6);
}


/* ============================================
   SECTION: QUALITY CERTIFICATES
   ============================================ */
.product-quality {
	padding: 5rem 0;
}

.product-quality__image-img {
	width: 100%;
	height: auto;
	display: block;
}

.product-quality__description {
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(0, 0, 0, 0.8);
}

.product-quality__box-paws svg {
	width: 64px;
	height: 64px;
}

/* ============================================
   SECTION: FAQ
   ============================================ */
.product-faq {
	padding: 5rem 0;
}

.product-faq__container {
	display: grid;
	gap: 4rem;
}

.product-faq__title {
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 1.5rem 0;
}

.product-faq__description {
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(0, 0, 0, 0.8);
}

.product-faq__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2rem;
}

.product-faq__col {
	display: grid;
	gap: 1rem;
}

.faq-decoration {
	position: absolute;
	top: 0;
	right: 0;
	max-width: 660px;
	height: auto;
}

/* ============================================
   SECTION: SOCIAL PROOF VIDEOS
   ============================================ */
.product-loved-by-owners {
	padding: 5rem 0;
}

.product-loved-by-owners__container {
	display: grid;
	gap: 4rem;
}

.product-loved-by-owners__title {
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 1.5rem 0;
}

.product-loved-by-owners__description {
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(0, 0, 0, 0.8);
}

.product-loved-by-owners__grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 2rem;
}


/* ============================================
   SECTION: ADVANCED PROTECTION
   ============================================ */
.product-advanced-protection {
	padding: 12.5rem 4rem;
	background: #f6f6f6;
	position: relative;
}

.product-advanced-protection__container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	align-items: center;
}

.product-advanced-protection__content-box {
	padding: 4rem;
	background: var(--product-primary-color, #539f43);
	display: grid;
	gap: 4rem;
}

.product-advanced-protection__title {
	color: #fff;
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1.1;
	margin: 0;
}

.product-advanced-protection__description p {
	color: #fff;
	font-size: 1.125rem;
	line-height: 1.5;
	margin-bottom: 1em;
}

.product-advanced-protection__description ul {
	color: #fff;
	list-style: disc;
	margin-left: 2rem;
	margin-bottom: 20px;
}

.product-advanced-protection__description li {
	list-style: disc;
	margin-bottom: 0.2rem;
	font-size: 1.125rem;
}

.product-advanced-protection__description p:last-child {
	margin-bottom: 0;
}

.product-advanced-protection__description strong {
	font-weight: 600;
}

.product-advanced-protection__image{
	display: flex;
	justify-content: flex-end;
}

/* ============================================
   SECTION: CUSTOMER TESTIMONIAL
   ============================================ */
.product-testimonial {
	padding: 9.375rem 4rem;
}

.product-testimonial__container {
	display: grid;
	gap: 4rem;
}

.product-testimonial__header {
	max-width: 900px;
	display: grid;
	gap: 2rem;
}

.product-testimonial__title {
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1.1;
	margin: 0;
}

.product-testimonial__intro {
	font-size: 1rem;
	line-height: 1.5;
	color: rgba(0, 0, 0, 0.8);
}

.product-testimonial__content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	align-items: center;
}

.product-testimonial__quote-box {
	position: relative;
	padding: 92px 3rem;
	background: #f6f6f6;
	display: grid;
	overflow: hidden;
	height: 100%;
}

.decoration-item__quote {
	position: absolute;
	top: 0;
	right: 0;
	height: auto;
	max-width: 280px;
}

.product-testimonial__quote-icon {
	width: 48px;
	height: 48px;
}

.product-testimonial__image img {
	width: 100%;
}

.product-testimonial__text {
	margin-block: 4rem;
}

.product-testimonial__text p {
	font-size: 1.125rem;
	line-height: 1.5;
	color: rgba(0, 0, 0, 0.8);
	margin-bottom: 0;
}

.product-testimonial__author {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1rem;
	align-items: center;
}

.product-testimonial__author-avatar-img {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
}

.product-testimonial__author-name {
	color: var(--product-primary-color, #539f43);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.1;
	margin-bottom: 0;
}

.product-testimonial__author-description p {
	color: rgba(0, 0, 0, 0.8);
	font-size: 0.875rem;
	line-height: 1.5;
	margin-bottom: 0;
}

/* ============================================
   SECTION: TRUST INDICATORS
   ============================================ */
.product-trust-indicators {
	padding: 5rem 4rem;
	position: relative;
}

.product-trust-indicators__container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	align-items: start;
	position: relative;
}

.product-trust-indicators__features {
	position: relative;
	display: grid;
	gap: 23px;
	margin-left: -123px;
}

.product-trust-indicators__feature-box {
	position: relative;
	padding: 2rem;
	background: var(--product-primary-color, #539f43);
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4rem;
	align-items: center;
	overflow: hidden;
	max-width: max-content;
}

.product-trust-indicators__feature-icon {
	width: 64px;
	height: 64px;
}

.product-trust-indicators__feature-icon-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.product-trust-indicators__feature-text {
	color: #fff;
	font-size: 1.125rem;
	line-height: 1.5;
	max-width: 550px;
}

.product-trust-indicators__feature-decoration {
	position: absolute;
	right: -30px;
	top: -30px;
	width: 100px;
	height: 100px;
	opacity: 0.1;
	transform: rotate(28.62deg);
}

.product-trust-indicators__text-box {
	display: grid;
	gap: 4rem;
}

.product-trust-indicators__title {
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1.1;
	margin: 0;
}

.product-trust-indicators__description p {
	font-size: 1.125rem;
	line-height: 1.5;
	color: rgba(0, 0, 0, 0.8);
}

.product-trust-indicators__description {
	margin: 64px 0 108px;
}

.indicators-decoration {
	position: absolute;
	right: 0;
	top: 0;
	max-width: 144px;
	height: auto;
}

@media(max-width:1200px){
	.product-hero__info-box-container{
		position: unset;
		margin:0;
		margin-top:30px;

	}

	.product-why__image,
	.product-testimonial__image,
	.product-testimonial__image img {
		height:100%;
		object-fit: cover;
	}

	.product-quality__box,
	.product-trust-indicators__features{
		margin-top: 30px;
		margin-left: 0;
	}

	.product-trust-indicators__container,
	.product-why__header,
	.product-why__cards{
		grid-template-columns: 1fr;

	}
	.product-trust-indicators__description{
		margin-bottom: 60px;
	}

	.product-trust-indicators__feature-box{
		max-width: 100%;
	}

	.product-trust-indicators__text-box{
		gap:0
	}

	.product-why__header{
		gap: 2rem
	}

	.product-related__container{
		grid-template-columns: 1fr 1fr;
	}

}



@media(max-width:992px){
	.product-hero__container,
	.product-why__header,
	.product-why__content,
	.product-faq__grid,
	.product-quality__container,
	.product-testimonial__content,
	.product-trust-indicators__container,
	.product-loved-by-owners__video-main{
		display: grid;
		grid-template-columns: 1fr;
	}

	.product-hero__info-box,
	.product-quality__box,
	.product-trust-indicators__features{
		position: unset;
		margin-right: 0;
		margin-top: 30px;
		margin-left: 0;
	}

	.product-why__image img{
		width: 100%;
	}

	.product-benefits__container,
	.product-related__container,
	.product-advanced-protection__container{
		display: flex;
		flex-direction: column-reverse;
	}

	.product-features__card{
		grid-column: span 2 !important;
	}


	.product-features__cards{
		grid-template-columns: repeat(4, 1fr);
	}

	.product-related__info-box{
		max-height: 100% !important;
	}

	.product-trust-indicators__description{
		margin-block: 40px;
	}

	.product-trust-indicators__image img{
		width:100%;
	}

	.product-trust-indicators__text-box,
	.product-faq__grid{
		gap:0
	}

	.product-testimonial,
	.product-advanced-protection,
	.product-trust-indicators,
	.product-features,
	.product-quality,
	.product-experts,
	.product-why{
		padding: 3rem 0 !important;
	}

	.product-testimonial__content,
	.product-features__container{
		gap: 2rem;
	}

	.product-features__cards,
	.product-ingredients__container {
		gap:1rem
	}

	.product-benefits,
	.product-hero,
	.product-related,
	.product-ingredients{
		padding-block:2rem
	}


	.product-trust-indicators__feature-box{
		max-width: 100% ;
	}

	.col-2nd .accordion:first-child{
		border-top: 0;
	}
}

@media(max-width: 575.98px){
	.product-faq__title,
	.product-why__title,
	.product-ingredients__title,
	.product-related__info-box-title,
	.product-features__title,
	.product-benefits__title,
	.product-hero__title,
	.product-loved-by-owners__title,
	.product-experts__title,
	.product-advanced-protection__title,
	.product-testimonial__title,
	.product-trust-indicators__title,
	.product-quality__title{
		font-size: 2rem;
		margin-bottom: 2rem;
		text-align: center;
	}

	.product-features__cards {
        grid-template-columns: repeat(2, 1fr);
	}
	.product-features__card {
        grid-column: span 1 !important;
    }

	.product-hero__info-box,
	.product-quality__box-content,
	.product-trust-indicators__feature-box{
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}

	.product-experts__item-content{
		padding: 2rem;
		margin: 0;
	}

	.product-related__info-box{
		padding: 2rem;
	}

	.product-features__cards,
	.product-why__stats,
	.product-why__cards{
		grid-template-columns: 1fr;
	}

	.product-experts__grid .slick-slide{
		margin-right: 20px !important;
	}

	.product-advanced-protection__content-box{
		gap:2rem;
		padding: 2rem;
	}

	.product-testimonial__quote-box{
		padding: 2rem;
	}

	.product-trust-indicators__description{
		margin-top: 0;
	}
}



.product-loved-by-owners__info-box-arrows button:hover svg {
   fill: var(--product-primary-color, #7764db);
   cursor: pointer;
}


.product-loved-by-owners__info-box-arrows button:hover svg path{
	stroke: #fff;
}


@media (max-width: 992px) {

    /* Usuń wszystkie stałe wysokości */
    .product-loved-by-owners__video-main > .product-loved-by-owners__video-wrapper,
    .product-loved-by-owners__video-secondary,
    .product-loved-by-owners__video-secondary .product-loved-by-owners__video-wrapper {
        height: auto !important;
    }

    /* Ustaw prawidłową proporcję 16:9 */
    .product-loved-by-owners__video-wrapper {
        width: 100% !important;
        padding-top: 56.25% !important; /* proporcja 16:9 */
        position: relative;
    }

    /* Wnętrze wrappera zawsze 100% */
    .product-loved-by-owners__video-thumbnail,
    .product-loved-by-owners__video-overlay,
    .product-loved-by-owners__video-iframe {
        width: 100% !important;
        height: 100% !important;
        top: 0;
        left: 0;
        position: absolute;
    }

    /* Każdy film pod sobą */
    .product-loved-by-owners__video-main {
        display: block !important;
    }

    .product-loved-by-owners__video-secondary-column {
        display: block !important;
        margin-top: 20px;
    }

    .product-loved-by-owners__video-secondary {
        width: 100% !important;
        margin-top: 20px;
    }

	.product-loved-by-owners__container{
		display: block;
	}
}