/* General Product Section Styles */
.product-section,
.product-section * {
	box-sizing: border-box;
}

.product-section {
	display: flex;
	flex-direction: column;
	gap: 48px;
	align-items: flex-start;
	justify-content: flex-start;
	position: relative;
	max-width: 1220px;
	margin: 0 auto;
}

/* Product View Layout */
.product-view {
	display: flex;
	flex-direction: row;
	gap: 40px;
	width: 100%;
	position: relative;
	margin-top: 20px;
}

.product-view__gallery {
	flex: 1;
	position: relative;
}

.product-view__details {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Breadcrumbs */
.breadcrumbs {
	display: flex;
	gap: 5px;
	align-items: center;
	font-size: 14px;
	color: #999598;
}

.breadcrumbs__item {
	color: inherit;
	text-decoration: none;
}

.breadcrumbs__item--active {
	color: #111111;
	font-weight: bold;
}

.breadcrumbs__separator {
	color: #999598;
}

/* Product Gallery */
.product-gallery {
	position: relative;
}

.product-gallery__main-image-wrapper {
	border-radius: 30px;
	overflow: hidden;
	margin-bottom: 20px;
}

.product-gallery__main-image {
	width: 100%;
	height: auto;
	display: block;
}

.product-gallery__nav-button {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: none;
	cursor: pointer;
	z-index: 10;
}

.product-gallery__nav-button--prev {
	left: 10px;
}

.product-gallery__nav-button--next {
	right: 10px;
}

.product-gallery__thumbnails {
	display: flex;
	gap: 15px;
	justify-content: center;
}

.product-gallery__thumbnail {
	border: 2px solid #aaaaaa;
	border-radius: 15px;
	overflow: hidden;
	cursor: pointer;
	width: 110px;
	height: 110px;
}

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

.product-gallery__thumbnail--active {
	border-color: #fecc00;
	box-shadow: 0px 6px 5px 0px rgba(254, 204, 0, 0.13);
}

.product-gallery__badges {
	position: absolute;
	top: 20px;
	left: 20px;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

/* Badge Component */
.badge {
	border-radius: 4px;
	padding: 5px 10px;
	font-size: 12px;
	font-weight: 600;
	color: #ffffff;
	text-align: center;
}

.badge--sale {
	background-color: #fb0018;
}

.badge--new {
	background-color: #bf9900;
}


/* Product Details Header */
.product-details__header {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.product-details__title {
	font-family: "Chakra", sans-serif;
	font-size: 30px;
	font-weight: 700;
	margin: 0;
}

.product-details__subtitle {
	font-family: "Poppins", sans-serif;
	font-size: 14px;
	line-height: 24px;
	color: #4a4849;
	margin: 0;
}

.product-details__status-labels {
	display: flex;
	gap: 10px;
}

/* Status Label Component */
.status-label {
	border-radius: 4px;
	padding: 5px 10px;
	font-family: "Jost", sans-serif;
	font-size: 13px;
}

.status-label--available {
	background: #e0ffe9;
	color: #388d50;
}

.status-label--code {
	background: #ededed;
	color: #4a4849;
}

/* Product Options */
.product-details__options {
	border-top: 1px solid #e5e5e5;
	border-bottom: 1px solid #e5e5e5;
	padding: 20px 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.product-options__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.product-options__label {
	font-family: "Poppins", sans-serif;
	font-size: 14px;
	font-weight: 500;
}

.product-options__select select {
	border: 1px solid #111111;
	padding: 12px 10px;
	display: flex;
	align-items: center;
	gap: 15px;
	cursor: pointer;
	max-width: 370px;
}

.product-options__select-icon {
	width: 7.47px;
	height: 4px;
	opacity: 0;
}

.product-options__color-swatches,
.product-options__buttons {
	display: flex;
	gap: 10px;
}

/* Color Swatch Component */
.color-swatch {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	cursor: pointer;
	border: 1px solid rgba(0, 0, 0, 0.5);
}

.color-swatch--blue {
	background-color: #fecc00;
}

.color-swatch--black {
	background-color: #111111;
}

.color-swatch--active {
	box-shadow: 0px 0px 0px 2px white, 0px 0px 0px 3.5px #d6d5d6;
}

/* Option Button Component */
.option-button {
	border: 1px solid #dddddd;
	background-color: transparent;
	padding: 3px 10px;
	font-size: 14px;
	cursor: pointer;
}

.option-button--active {
	border-color: #232323;
}

/* Price Section */
.product-details__price-section {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.price-section__main {
	display: flex;
	align-items: flex-end;
	gap: 15px;
}

.price-section__old-price {
	color: #999598;
	font-size: 18px;
	text-decoration: line-through;
	margin-bottom: -10px;
}

.price-section__current-price {
	color: #fb0018;
	font-family: "Chakra", sans-serif;
	font-size: 35px;
	font-weight: 700;
}

.price-section__legal-note {
	font-size: 10px;
	color: #999598;
	margin: 0;
}

/* Actions Section */
.product-details__actions {
	padding-bottom: 20px;
	border-bottom: 1px solid #d6d5d6;
}

.product-actions__quantity-label {
	font-family: "Poppins", sans-serif;
	font-size: 14px;
	margin-bottom: 5px;
	display: block;
}

.product-actions__controls {
	display: flex;
	gap: 15px;
	align-items: center;
}

.quantity-selector {
	display: flex;
	align-items: center;
	border: 1px solid #fecc00;
	border-radius: 5px;
}

.quantity-selector__button {
	background-color: transparent;
	border: none;
	width: 33px;
	height: 43px;
	cursor: pointer;
	font-size: 20px;
}

.quantity-selector__input {
	border: none;
	text-align: center;
	width: 40px;
	font-size: 16px;
	font-weight: 500;
}

.add-to-cart-button {
	background: #fecc00;
	border-radius: 5px;
	border: none;
	padding: 0 25px;
	height: 45px;
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	font-family: "Poppins", sans-serif;
	font-size: 14px;
	color: #3c291e;
}

.add-to-cart-button__icon {
	width: 20px;
	height: auto;
}

/* Share Section */
.product-details__share {
	display: flex;
	align-items: center;
	gap: 10px;
}

.product-share__label {
	font-size: 12px;
}

.product-share__icons {
	display: flex;
	gap: 10px;
}

.share-icon {
	display: block;
}

/* USP Section */
.product-details__usp {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.usp__item {
	display: flex;
	align-items: center;
	gap: 15px;
}

.usp__icon {
	width: 30px;
	height: 30px;
	object-fit: contain;
}

.usp__text {
	font-size: 12px;
	color: #4a4849;
	margin: 0;
}

/* Description Section */
.product-description-section {
	border: 1px solid #dddddd;
	width: 100%;
}

.product-description__tabs {
	display: flex;
	justify-content: center;
	gap: 30px;
	padding: 14px 0;
	border-bottom: 1px solid #dddddd;
}

.product-description__tab {
	font-family: "Chakra", sans-serif;
	font-size: 16px;
	background: none;
	border: none;
	cursor: pointer;
	color: #999598;
}

.product-description__tab--active {
	color: #111111;
	text-decoration: underline;
	text-underline-offset: 8px;
}

.product-description__content {
	display: flex;
	gap: 40px;
	padding: 30px;
	justify-content: center;
}

.product-description__column {
	flex-basis: 33.33%;
}

.product-description__heading {
	font-family: "Chakra", sans-serif;
	font-size: 16px;
	margin-top: 0;
}

.product-description__paragraph {
	font-size: 12px;
	color: #4a4849;
	line-height: 1.6;
}

/* Options List in Description */
.options-list__heading {
	font-family: "Chakra", sans-serif;
	font-size: 16px;
}

.options-list__list {
	list-style: none;
	padding-left: 15px;
}

.options-list__item {
	font-size: 12px;
	color: #4a4849;
	margin-bottom: 15px;
	position: relative;
}

.options-list__item::before {
	content: '';
	display: block;
	width: 8px;
	height: 8px;
	background-color: #fecc00;
	border-radius: 50%;
	position: absolute;
	left: -15px;
	top: 5px;
}

/* Video Section */
.video-section__heading {
	font-family: "Chakra", sans-serif;
	font-size: 16px;
}

.video-player {
	position: relative;
	cursor: pointer;
}

.video-player__thumbnail {
	width: 100%;
	display: block;
}

.video-player__play-button {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: transparent;
	border: none;
}

/* Comments Section */
.product-comments-section {
	width: 100%;
}

.product-comments__title {
	font-family: "Chakra", sans-serif;
	font-size: 16px;
	display: flex;
	align-items: center;
	gap: 5px;
	margin-bottom: 20px;
}

.comment-item {
	border: 1px solid #e5e5e5;
	padding: 20px;
	display: flex;
	gap: 20px;
	/*margin-bottom: 20px;*/
}

.comment-item__author-info {
	flex-basis: 200px;
	flex-shrink: 0;
}

.comment-author__rating {
	margin-bottom: 10px;
}

.comment-author__meta {
	font-size: 12px;
	color: #999598;
	line-height: 1.5;
}

.comment-item__body {
	flex-grow: 1;
}

.comment-body__title {
	font-family: "Poppins", sans-serif;
	font-size: 14px;
	margin: 0 0 10px 0;
}

.comment-body__text {
	font-size: 12px;
	color: #4a4849;
	margin: 0 0 15px 0;
}

.comment-body__actions {
	display: flex;
	gap: 15px;
}

.comment-action {
	background: none;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 5px;
	color: #d6d5d6;
}


button.product-gallery__nav-button {
	border-radius: 50%;
	overflow: hidden;
}
.breadcrumbs {
	margin-top: 2.1rem;
	padding-left: 20px;
}
.product-comments-section {
	margin-bottom: 3rem;
}
.share-icon:hover,
button.comment-action:hover {
	filter: brightness(0.5);
	transition: filter .23s;
}

h3.video-section__heading,
h2.product-description__heading,
h3.options-list__heading {
	margin-bottom: 1rem;
}
.product-gallery__thumbnail:hover {
	box-shadow: 0px 7px 12px 8px rgba(254, 204, 0, 0.17);
}
.quantity-selector__button:hover {
	background: #fff5cc;
	color: #bf9900;
	transition: all .23s;
}
.product-description__column.tab-content.tab-content--szczegoly {
	zoom: 1.4;
	flex-basis: 100%;
	padding: 0 13%;
}

.product-details__price-section .badge--sale {
	color: #fb0018;
	background-color: #FFE6E8;
	font-size: 15px;
	font-weight: 300;
}

@media screen and (max-width: 44rem) {
	.breadcrumbs {
		display: none;
	}
	section.product-section .product-view * {
		max-width: 100%;
		height: auto;
	}
	.product-description__content {
		flex-direction: column;
		padding-inline: 20px;
	}
	.comment-item {
		flex-direction: column;
	}
	.comment-item__author-info {
		flex-basis: auto;
	}
	.product-description__column.tab-content.tab-content--szczegoly {
		zoom: 1.1;
		flex-basis: 100%;
		padding: 0;
	}
	.product-view {
		padding: 0 20px;
		flex-direction: column;
	}
	.product-comments__title {
		padding-inline: 20px;
	}
	.color-swatch {
		min-height: 24px;
	}
	span.add-to-cart-button__text {
		padding: 9px;
	}
}


body[data-theme="dark"] .product-section {
	p, li {
		color: #fff;
	}
}