/* Catalog Section Page Styles - Based on catalog-section1440.json */

.catalog-section {
	padding-top: var(--spacing-xl);
	padding-bottom: var(--spacing-xxl);
}

.catalog-section__layout {
	display: flex;
	gap: 135px; /* gap-135 from JSON */
	align-items: flex-start;
}

/* Filters Sidebar */
.catalog-section__filters {
	width: 326px; /* frame-1321319864 width */
	flex-shrink: 0;
}

.filter-group {
	margin-bottom: 20px; /* gap-20 from JSON */
}

.filter-group__header {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px; /* padding from JSON */
	border: 1px solid var(--color-accent); /* rgb(254, 111, 58) */
	background-color: transparent;
	cursor: pointer;
	transition: all 0.3s ease;
}

.filter-group__header:hover {
	background-color: var(--color-gray-light);
}

.filter-group__header--active {
	border-color: var(--color-accent);
}

.filter-group__title {
	font-family: var(--font-family-secondary); /* Raleway */
	font-size: 18px; /* size-18 from JSON */
	font-weight: 500;
	line-height: 24px;
	color: var(--color-primary);
}

.filter-group__icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	transition: transform 0.3s ease;
}

.filter-group__header--active .filter-group__icon {
	transform: rotate(180deg);
}

.filter-group__content {
	margin-top: 0;
	padding-top: 0;
}

.filter-group__list {
	list-style: none;
	padding: 0;
	margin: 0;
	padding-left: 16px; /* padding-left from JSON */
}

.filter-group__list li {
	margin-bottom: 8px; /* gap-8 from JSON */
}

.filter-group__link {
	font-family: var(--font-family-primary); /* Nunito Sans */
	font-size: 16px; /* size-16 from JSON */
	font-weight: 400;
	line-height: 20px;
	color: var(--color-primary);
	text-decoration: none;
	transition: color 0.3s ease;
}

.filter-group__link:hover {
	color: var(--color-accent);
}

.filter-divider {
	width: 100%;
	height: 1px;
	border: none;
	background-color: #DBDBDB; /* rgb(219, 219, 219) */
	margin: 20px 0; /* gap-20 from JSON */
}

/* Filter Checkbox */
.filter-checkbox {
	display: flex;
	align-items: center;
	gap: 8px; /* gap-8 from JSON */
	margin-bottom: 12px; /* gap-12 from JSON */
	cursor: pointer;
}

.filter-checkbox__input {
	display: none;
}

.filter-checkbox__check {
	width: 20px;
	height: 20px;
	border: 1px solid var(--color-gray-medium);
	border-radius: 4px;
	flex-shrink: 0;
	position: relative;
	transition: all 0.3s ease;
}

.filter-checkbox__input:checked + .filter-checkbox__check {
	background-color: var(--color-accent);
	border-color: var(--color-accent);
}

.filter-checkbox__input:checked + .filter-checkbox__check::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 12px;
	height: 12px;
	background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3L4.5 8.5L2 6' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

.filter-checkbox__label {
	font-family: var(--font-family-secondary); /* Raleway */
	font-size: 18px; /* size-18 from JSON */
	font-weight: 400;
	line-height: 24px;
	color: var(--color-primary);
}

.filter-checkbox--color {
	align-items: center;
}

.filter-checkbox__color {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	flex-shrink: 0;
	border: 1px solid var(--color-gray-medium);
}

.filter-group__show-all {
	font-family: Arial, sans-serif;
	font-size: 14px; /* size-14 from JSON */
	font-weight: 400;
	line-height: 20px;
	color: var(--color-gray-dark); /* rgb(127, 128, 129) */
	text-decoration: none;
	border-bottom: 1px solid var(--color-gray-dark);
	display: inline-block;
	margin-top: 12px; /* gap-12 from JSON */
	transition: color 0.3s ease;
}

.filter-group__show-all:hover {
	color: var(--color-accent);
	border-bottom-color: var(--color-accent);
}

/* Price Filter */
.filter-price {
	display: flex;
	flex-direction: column;
	gap: 12px; /* gap-12 from JSON */
}

.filter-price__row {
	display: flex;
	align-items: center;
	gap: 8px; /* gap-8 from JSON */
}

.filter-price__label {
	font-family: var(--font-family-secondary); /* Raleway */
	font-size: 14px; /* size-14 from JSON */
	font-weight: 400;
	line-height: 20px;
	color: var(--color-gray-dark); /* rgb(127, 128, 129) */
	min-width: 18px;
}

.filter-price__input {
	width: 131px; /* width from JSON */
	height: 36px; /* height from JSON */
	padding: 6px 8px; /* padding from JSON */
	border: 1px solid #DBDBDB; /* rgb(219, 219, 219) */
	border-radius: 8px; /* radius from JSON */
	background-color: #FFFFFE; /* rgb(255, 255, 254) */
	font-family: 'Montserrat', sans-serif;
	font-size: 14px; /* size-14 from JSON */
	font-weight: 400;
	line-height: 20px;
	color: var(--color-primary);
}

.filter-price__range {
	display: flex;
	flex-direction: column;
	gap: 0;
	position: relative;
	margin-top: 12px; /* gap-12 from JSON */
}

.filter-price__slider {
	width: 100%;
	height: 2px;
	-webkit-appearance: none;
	appearance: none;
	background: var(--color-primary);
	outline: none;
	margin: 0;
}

.filter-price__slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: var(--color-primary);
	cursor: pointer;
}

.filter-price__slider::-moz-range-thumb {
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: var(--color-primary);
	cursor: pointer;
	border: none;
}

/* Products Grid */
.catalog-section__products {
	flex: 1;
	min-width: 0;
}

.products-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px; /* gap-24 from JSON */
	margin-bottom: 36px; /* gap-36 from JSON */
}

/* Product Card */
.product-card {
	width: 409px; /* card width from JSON */
	display: flex;
	flex-direction: column;
	gap: 20px; /* gap-20 from JSON */
}

.product-card__image {
	width: 100%;
	height: 100%;
	max-height: 270px;
	border-radius: 20px;
	overflow: hidden;
	position: relative;
	background-color: var(--color-gray-light);
}

.product-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	min-height: 280px;
}

.product-card__pagination {
	position: absolute;
	top: 20px;
	left: 20px;
	display: flex;
	gap: 4px; /* gap-4 from JSON */
	z-index: 1;
	justify-content: center;
}

.product-card__dot {
	width: 7px; /* ellipse size from JSON */
	height: 7px;
	border-radius: 50%;
	background-color: #F9F9F9; /* rgb(249, 249, 249) */
}

.product-card__dot--active {
	background-color: var(--color-accent); /* rgb(254, 111, 58) */
}

.product-card__badge {
	position: absolute;
	top: 20px;
	right: 20px;
	padding: 5px 10px; /* padding from JSON */
	background-color: #FFFFFE; /* rgb(255, 255, 254) */
	border-radius: 8px; /* radius from JSON */
	font-family: var(--font-family-primary); /* Nunito Sans */
	font-size: 14px; /* size-14 from JSON */
	font-weight: 400;
	line-height: 20px;
	color: var(--color-primary);
	z-index: 1;
}

.product-card__content {
	display: flex;
	flex-direction: column;
	gap: 20px;
	height: 100%;
	justify-content: space-between;
}

.product-card__content a {
	text-decoration: none;
}
.product-card__header {
	display: flex;
	align-items: center;
	gap: 12px; /* gap-12 from JSON */
	margin-bottom: 10px;
}

.product-card__rating-info {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: 12px;
}

.product-card__rating {
	display: flex;
	align-items: center;
	gap: 12px;
}

.product-card__rating svg {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

.product-card__rating-value {
	font-family: var(--font-family-primary);
	font-size: 16px;
	font-weight: 400;
	line-height: 20px;
	color: var(--color-primary);
}

.product-card__rating-separator {
	font-family: var(--font-family-primary);
	font-size: 16px;
	font-weight: 400;
	line-height: 20px;
	color: var(--color-primary);
}

.product-card__rating-count {
	font-family: var(--font-family-primary);
	font-size: 16px;
	font-weight: 400;
	line-height: 20px;
	color: var(--color-primary);
}

.product-card__status {
	display: flex;
	align-items: center;
	gap: 8px;
	justify-content: flex-end;
}

.product-card__status-indicator {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}

.product-card__status-indicator--available {
	background-color: #3BC220;
}

.product-card__status-indicator--unavailable {
	background-color: #C5C5C5;
}

.product-card__status-text {
	font-family: var(--font-family-primary);
	font-size: 16px;
	font-weight: 400;
	line-height: 20px;
	color: var(--color-primary);
}

.product-card__status-text--unavailable {
	opacity: 0.5;
}

.product-card__title {
	font-family: var(--font-family-primary); /* Nunito Sans */
	font-size: 18px; /* size-18 from JSON */
	font-weight: 500;
	line-height: 1.33;
	color: var(--color-primary);
	margin: 0;
	min-height: 48px; /* height from JSON */
}

.product-card__specs {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 10px;
}

.product-card__spec {
	display: flex;
	align-items: center;
	gap: 4px; /* gap-4 from JSON */
	font-family: var(--font-family-primary); /* Nunito Sans */
	font-size: 16px; /* size-16 from JSON */
	font-weight: 400;
	line-height: 20px;
	color: var(--color-primary);
}

.product-card__spec-name {
	min-width: 78px; /* specification-name width from JSON */
}

.product-card__spec-dots {
	flex: 1;
	height: 14px;
	border-bottom: 1px dashed #DBDBDB;
	margin: 0 4px;
}

.product-card__spec-value {
	min-width: 10px;
	text-align: right;
}

.product-card__footer {
	display: flex;
	align-items: center;
	gap: 32px;
	justify-content: space-between;
}

.product-card__price {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.product-card__price-label {
	font-family: var(--font-family-secondary); /* Raleway */
	font-size: 16px; /* size-16 from JSON */
	font-weight: 400;
	line-height: 20px;
	color: var(--color-gray-dark); /* rgb(127, 128, 129) */
	text-align: center;
}

.product-card__price-value {
	font-family: var(--font-family-primary); /* Nunito Sans */
	font-size: 24px; /* size-24 from JSON */
	font-weight: 700;
	line-height: 28px;
	color: var(--color-primary);
}

.btn.product-card__button {
	width: 158px; /* button width from JSON */
	height: 50px; /* button height from JSON */
	padding: 12px 16px; /* padding from JSON */
	border: 1px solid var(--color-primary);
	border-radius: 20px; /* radius from JSON */
	background-color: transparent;
	font-family: var(--font-family-primary); /* Nunito Sans */
	font-size: 16px;
	font-weight: 500;
	line-height: 20px;
	color: var(--color-primary);
	cursor: pointer;
	transition: all 0.3s ease;
}

.btn.product-card__button:hover {
	background-color: var(--color-primary);
	color: var(--color-secondary);
}

/* Description Section */
.catalog-section__description {
	margin-top: 100px; /* gap-100 from JSON */
	padding-top: 0;
}

.catalog-section__description-text {
	font-family: var(--font-family-primary); /* Nunito Sans */
	font-size: 16px; /* size-16 from JSON */
	font-weight: 400;
	line-height: 1.5;
	color: var(--color-primary);
	margin: 0;
}

.catalog-section__description-link {
	color: var(--color-accent);
	text-decoration: none;
	transition: opacity 0.3s ease;
}

.catalog-section__description-link:hover {
	opacity: 0.7;
	text-decoration: underline;
}

/* Filter Button - Hidden on Desktop */
.catalog-section__filter-button {
	display: none;
}

/* Responsive Styles */
@media (max-width: 992px) {
	.catalog-section__layout {
		flex-direction: column;
		gap: var(--spacing-xl);
	}

	.catalog-section__filters {
		width: 100%;
	}

	.products-grid {
		grid-template-columns: 1fr;
	}

	.product-card {
		width: 100%;
		max-width: 409px;
		margin: 0 auto;
	}
}

@media (max-width: 768px) {
	.catalog-section {
		padding-top: var(--spacing-lg);
		padding-bottom: var(--spacing-xl);
	}

	.catalog-section__layout {
		gap: var(--spacing-lg);
	}

	.product-card__image {
		height: 200px;
	}

	.product-card__title {
		font-size: var(--font-size-body);
	}
}

/* Mobile Filter Menu - Similar to side-menu */
.mobile-filters {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	z-index: 2000;
	visibility: hidden;
	opacity: 0;
	transition: visibility 0.3s ease, opacity 0.3s ease;
}

.mobile-filters.mobile-filters--open {
	visibility: visible;
	opacity: 1;
}

.mobile-filters__overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.mobile-filters__content {
	position: absolute;
	top: 0;
	left: 0;
	width: 343px; /* frame width from JSON */
	max-width: 90vw;
	height: 100%;
	background-color: var(--color-secondary);
	box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
	transform: translateX(-100%);
	transition: transform 0.3s ease;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}

.mobile-filters--open .mobile-filters__content {
	transform: translateX(0);
}

.mobile-filters__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 16px; /* padding from JSON */
	border-bottom: 1px solid var(--color-gray-medium);
	gap: 300px; /* gap-300 from JSON */
	flex-shrink: 0;
}

.mobile-filters__title {
	font-family: var(--font-family-primary); /* Nunito Sans */
	font-size: 24px; /* size-24 from JSON */
	font-weight: 600; /* weight-600 from JSON */
	line-height: 28px;
	color: var(--color-primary);
	margin: 0;
}

.mobile-filters__close {
	width: 24px; /* flaticon width from JSON */
	height: 24px; /* flaticon height from JSON */
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.3s ease;
}

.mobile-filters__close:hover {
	opacity: 0.7;
}

.mobile-filters__close svg {
	width: 24px;
	height: 24px;
}

.mobile-filters__body {
	flex: 1;
	padding: 20px 16px; /* padding from JSON */
	overflow-y: auto;
}

.mobile-filters__footer {
	display: flex;
	flex-direction: column;
	gap: 16px; /* gap-16 from JSON */
	padding: 16px; /* padding from JSON */
	border-top: 1px solid var(--color-gray-medium);
	flex-shrink: 0;
	background-color: var(--color-secondary);
}

.mobile-filters__apply {
	width: 100%;
	max-width: 343px; /* button width from JSON */
	height: 50px; /* button height from JSON */
	padding: 12px 16px; /* padding from JSON */
	border: 1px solid var(--color-primary);
	border-radius: 20px; /* radius from JSON */
	background-color: transparent;
	font-family: var(--font-family-primary); /* Nunito Sans */
	font-size: 16px; /* size-16 from JSON */
	font-weight: 500;
	line-height: 20px;
	color: var(--color-primary);
	cursor: pointer;
	transition: all 0.3s ease;
}

.mobile-filters__apply:hover {
	background-color: var(--color-primary);
	color: var(--color-secondary);
}

.mobile-filters__reset {
	width: 100%;
	max-width: 343px; /* width from JSON */
	background: transparent;
	border: none;
	font-family: var(--font-family-primary); /* Nunito Sans */
	font-size: 16px; /* size-16 from JSON */
	font-weight: 400;
	line-height: 20px;
	color: var(--color-gray-dark); /* rgb(127, 128, 129) */
	text-align: center;
	cursor: pointer;
	transition: color 0.3s ease;
	padding: 0;
}

.mobile-filters__reset:hover {
	color: var(--color-accent);
}

/* Mobile styles based on catalog-section.mobile.json (375px width) */
@media (max-width: 480px) {
	/* Show mobile filter button */
	.catalog-section__filter-button {
		display: flex;
		align-items: center;
		gap: 0;
		width: 86.41px; /* button width from JSON */
		height: 27px; /* button height from JSON */
		margin-bottom: 16px; /* gap-16 from JSON */
		background: transparent;
		border: none;
		cursor: pointer;
		position: relative;
		padding: 0;
	}

	.catalog-section__filter-icon {
		width: 24px; /* icon width from JSON */
		height: 24px; /* icon height from JSON */
		flex-shrink: 0;
	}

	.catalog-section__filter-badge {
		width: 10px; /* background-border width from JSON */
		height: 10px; /* background-border height from JSON */
		border-radius: 50%;
		background-color: var(--color-accent); /* rgb(254, 111, 58) */
		border: 1px solid #FFFFFE; /* rgb(255, 255, 254) */
		position: absolute;
		top: 0;
		left: 14px;
	}

	.catalog-section__filter-text {
		font-family: var(--font-family-primary); /* Nunito Sans */
		font-size: 16px; /* size-16 from JSON */
		font-weight: 400;
		line-height: 20px;
		color: var(--color-primary);
		margin-left: 8px;
	}

	/* Hide desktop filters */
	.catalog-section__filters {
		display: none;
	}
	.page__container {
		padding: 0 16px; /* padding from JSON */
	}

	.catalog-section {
		padding-top: var(--spacing-md);
		padding-bottom: var(--spacing-lg);
	}

	.breadcrumbs {
		margin-bottom: 20px; /* gap-20 from JSON */
		font-size: 14px; /* size-14 from JSON */
	}

	.page__title {
		font-size: 20px; /* size-20 from JSON */
		font-weight: 600; /* weight-600 from JSON */
		line-height: 24px;
		margin-bottom: 50px; /* gap-50 from JSON */
	}

	.catalog-section__layout {
		gap: 50px; /* gap-50 from JSON */
	}

	.catalog-section__filters {
		display: none; /* Filters hidden on mobile */
	}

	.filter-group__header {
		padding: 12px 16px; /* padding from JSON */
	}

	.filter-group__title {
		font-size: 18px; /* size-18 from JSON */
	}

	.products-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px; /* gap-12 from JSON */
		margin-bottom: 36px; /* gap-36 from JSON */
	}

	.product-card {
		width: 166px; /* card width from JSON */
		max-width: 100%;
		gap: 12px; /* gap-12 from JSON */
	}

	.product-card__image {
		width: 100%;
		height: 160px; /* picture height from JSON */
	}

	.product-card__pagination {
		top: 10px;
		left: 10px;
	}

	.product-card__badge {
		top: 10px;
		right: 10px;
		padding: 4px; /* padding from JSON */
		font-size: 14px; /* size-14 from JSON */
		width: 66px; /* new-label-container width from JSON */
		height: 28px; /* new-label-container height from JSON */
	}

	.product-card__content {
		gap: 16px; /* gap-16 from JSON */
	}

	.product-card__header {
		margin-bottom: 0;
	}

	.product-card__rating-info {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.product-card__rating {
		gap: 8px;
	}

	.product-card__rating svg {
		width: 20px;
		height: 20px;
	}

	.product-card__rating-value,
	.product-card__rating-separator,
	.product-card__rating-count {
		font-size: 14px;
	}

	.product-card__status {
		justify-content: flex-start;
	}

	.product-card__status-indicator {
		width: 8px;
		height: 8px;
	}

	.product-card__status-text {
		font-size: 14px;
	}

	.product-card__title {
		font-size: 16px; /* size-16 from JSON */
		font-weight: 500;
		line-height: 1.25;
		min-height: 80px; /* height from JSON */
	}

	.product-card__specs {
		gap: 12px; /* gap-12 from JSON */
	}

	.product-card__spec {
		font-size: 14px; /* size-14 from JSON */
		line-height: 20px;
	}

	.product-card__spec-name {
		min-width: auto;
	}

	.product-card__spec-dots {
		height: 14px;
	}

	.product-card__spec-value {
		min-width: auto;
		text-align: left;
	}

	.product-card__footer {
		flex-direction: column;
		align-items: stretch;
		gap: 12px; /* gap-12 from JSON */
	}

	.product-card__price {
		gap: 0;
	}

	.product-card__price-label {
		font-size: 14px; /* size-14 from JSON */
		text-align: left;
	}

	.product-card__price-value {
		font-size: 18px; /* size-18 from JSON */
		font-weight: 600; /* weight-600 from JSON */
		line-height: 24px;
	}

	.product-card__button {
		width: 100%;
		max-width: 166px; /* button width from JSON */
		height: 50px; /* button height from JSON */
	}

	.pagination {
		margin-top: 36px; /* gap-36 from JSON */
		padding: 10px; /* padding from JSON */
	}

	.pagination__controls {
		gap: 12px; /* gap-12 from JSON */
		max-width: 280px; /* pagination-controls width from JSON */
		margin: 0 auto;
	}

	.pagination__number {
		width: 40px; /* page-number width from JSON */
		height: 40px; /* page-number height from JSON */
		padding: 10px; /* padding from JSON */
	}

	.catalog-section__description {
		margin-top: 50px; /* gap-50 from JSON */
	}

	.catalog-section__description-text {
		font-size: 14px; /* size-14 from JSON */
	}
}

@media (max-width: 428px) {
	.page__container {
		padding: 0 16px;
	}

	.breadcrumbs {
		margin-bottom: 20px;
		font-size: 14px;
	}

	.page__title {
		font-size: 20px;
		font-weight: 600;
		line-height: 24px;
		margin-bottom: 50px;
	}

	.catalog-section__layout {
		gap: 50px;
	}

	.catalog-section__filters {
		max-width: 343px;
	}

	.products-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
		margin-bottom: 36px;
	}

	.product-card {
		width: 166px;
		max-width: 100%;
		gap: 12px;
	}

	.product-card__image {
		height: 160px;
	}

	.product-card__title {
		font-size: 16px;
		min-height: 80px;
	}

	.product-card__specs {
		gap: 12px;
	}

	.product-card__spec {
		font-size: 14px;
	}

	.product-card__footer {
		flex-direction: column;
		gap: 12px;
	}

	.product-card__button {
		width: 100%;
		max-width: 166px;
	}

	.catalog-section__description {
		margin-top: 50px;
	}
}