.catalog-main {
	padding: 24px 28px 96px;
	font-family: "NTSOMIC", "NTSomic", "Inter", "Segoe UI", Roboto, Arial, sans-serif;
}

.catalog-section {
	width: 100%;
	max-width: none;
	margin: 0 auto;
}

.catalog-cards {
	width: min(1220px, 100%);
	margin: 0 auto;
}

.catalog-section__header {
	padding: 6px 0 18px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.14);
	margin-bottom: 26px;
}

.catalog-section__title {
	font-size: 44px;
	line-height: 0.95;
	font-weight: 500;
	color: var(--text-color);
}

.product-card {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 34px;
	margin-bottom: 72px;
}

.product-card__image-wrap {
	position: relative;
	flex: 0 0 380px;
}

.product-card__image {
	height: 380px;
	border-radius: 24px;
	background: rgba(0, 0, 0, 0.08);
}

.product-card__overlay {
	display: none;
}

.product-card__mobile-title {
	display: none;
}

.product-card__mobile-footer {
	display: none;
}


.heart-container {
	--heart-color: rgb(255, 91, 137);
	position: relative;
	width: 52px;
	height: 52px;
	transition: 0.3s;
}

.heart-container--image {
	display: none;
	position: absolute;
	right: 8px;
	bottom: 4px;
}

.heart-container--meta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
}

.heart-container .checkbox {
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0;
	z-index: 20;
	cursor: pointer;
}

.heart-container .svg-container {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.heart-container .svg-outline,
.heart-container .svg-filled {
	fill: var(--heart-color);
	position: absolute;
}

.heart-container .svg-filled {
	animation: keyframes-svg-filled 1s;
	display: none;
}

.heart-container .svg-celebrate {
	position: absolute;
	animation: keyframes-svg-celebrate 0.5s;
	animation-fill-mode: forwards;
	display: none;
	stroke: var(--heart-color);
	fill: var(--heart-color);
	stroke-width: 2px;
}

.heart-container .checkbox:checked ~ .svg-container .svg-filled {
	display: block;
}

.heart-container .checkbox:checked ~ .svg-container .svg-celebrate {
	display: block;
}

@keyframes keyframes-svg-filled {
	0% {
		transform: scale(0);
	}

	25% {
		transform: scale(1.2);
	}

	50% {
		transform: scale(1);
		filter: brightness(1.5);
	}
}

@keyframes keyframes-svg-celebrate {
	0% {
		transform: scale(0);
	}

	50% {
		opacity: 1;
		filter: brightness(1.5);
	}

	100% {
		transform: scale(1.4);
		opacity: 0;
		display: none;
	}
}

.product-card__details {
	flex: 1;
	padding-top: 14px;
	min-height: 380px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.product-card__title {
	font-size: 52px;
	line-height: 0.98;
	font-weight: 700;
	margin-bottom: 8px;
	color: var(--text-color);
}

.product-card__description {
	font-size: 16px;
	word-break: break-word;
	white-space: pre-wrap;
	line-height: 1.06;
	font-weight: 400;
	color: rgba(17, 17, 17, 0.55);
	margin-bottom: auto;
}

.product-card__meta {
	padding-top: 16px;
	font-size: 19px;
	line-height: 1.2;
}

.product-card__actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

.stock {
	font-weight: 700;
}

.stock--out {
	color: #dc2626;
}

.stock--in {
	color: #17803d;
	margin-bottom: 8px;
}

.price-line {
	font-size: 34px;
	line-height: 1;
	font-weight: 400;
	margin-bottom: 14px;
	color: var(--text-color);
}

.price-line strong {
	font-weight: 700;
	color: #109374;
}

.details-button {
	border: 0;
	border-radius: 14px;
	padding: 14px 34px;
	min-height: 54px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: "NTSOMIC", "NTSomic", "Inter", "Segoe UI", Roboto, Arial, sans-serif;
	font-size: 24px;
	line-height: 1;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: #fff;
	background: #5a83dd;
	box-shadow: 0 8px 20px rgba(90, 131, 221, 0.35);
	cursor: pointer;
	transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

.details-button:hover {
	transform: translateY(-1px);
	filter: brightness(1.04);
	box-shadow: 0 12px 26px rgba(90, 131, 221, 0.4);
}

.details-button:active {
	transform: translateY(0);
}

html.dark .catalog-section__header {
	border-bottom-color: rgba(255, 255, 255, 0.16);
}

html.dark .product-card__image {
	background: rgba(255, 255, 255, 0.1);
}

html.dark .product-card__description {
	color: rgba(255, 255, 255, 0.62);
}

@media (max-width: 1250px) {
	.catalog-section__title {
		font-size: 34px;
	}

	.product-card__title {
		font-size: 40px;
	}

	.product-card__description {
		font-size: 28px;
	}

	.price-line {
		font-size: 28px;
	}

	.details-button {
		font-size: 22px;
		min-height: 50px;
		padding: 12px 30px;
	}
}

@media (max-width: 900px) {
	.catalog-main {
		padding: 16px 10px 80px;
	}

	.catalog-cards {
		width: 100%;
	}

	.catalog-section__header {
		padding: 8px;
		margin-top: 0;
		margin-bottom: 12px;
		border-bottom: 0;
	}

	.catalog-section__title {
		font-size: clamp(36px, 9vw, 48px);
		line-height: 0.9;
		text-align: center;
	}

	.product-card,
	.product-card--image-right {
		display: block;
		margin-bottom: 18px;
	}

	.product-card__details {
		display: none;
	}

	.product-card--image-right .product-card__details {
		order: 1;
	}

	.product-card__image-wrap,
	.product-card--image-right .product-card__image-wrap {
		position: relative;
		width: 85%;
		height: auto;
		margin: 0 auto;
		max-width: 420px;
		flex: none;
	}

	.product-card--image-right .product-card__image-wrap {
		order: 2;
	}

	.product-card__image {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
		border-radius: 20px;
	}

	.product-card__overlay {
		display: none;
	}

	.product-card__mobile-title {
		display: block;
		font-size: clamp(24px, 7vw, 34px);
		line-height: 1.05;
		font-weight: 700;
		margin: 0 0 10px;
		color: var(--text-color);
	}

	.product-card__title--overlay {
		display: none;
	}

	.product-card__mobile-footer {
		display: block;
		padding: 8px 2px 0;
	}

	.product-card__mobile-actions {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		column-gap: 10px;
	}

	.product-card__mobile-actions .stock {
		margin: 0;
		justify-self: start;
	}

	.product-card__mobile-price {
		margin: 0;
		justify-self: end;
		text-align: right;
		line-height: 1;
		color: var(--text-color);
	}

	.product-card__mobile-price strong {
		font-size: clamp(24px, 7.4vw, 30px);
		line-height: 1;
		font-weight: 700;
		color: var(--text-color);
	}

	.heart-container {
		display: none;
		right: clamp(8px, 2.4vw, 12px);
		bottom: clamp(6px, 2vw, 10px);
		width: clamp(40px, 12vw, 48px);
		height: clamp(40px, 12vw, 48px);
		z-index: 6;
	}

	.heart-container--meta {
		display: none;
	}

	.product-card__title {
		font-size: 24px;
		line-height: 1.05;
		margin-bottom: 8px;
	}

	.product-card__description {
		display: none;
	}

	.product-card__meta {
		margin-top: auto;
		padding-top: 0;
		display: grid;
		grid-template-columns: auto auto 1fr;
		grid-template-rows: auto auto;
		column-gap: 12px;
		row-gap: 2px;
		align-items: end;
		max-width: calc(100% - 54px);
	}

	.stock {
		font-size: clamp(15px, 4.1vw, 20px);
		line-height: 1.1;
	}

	.stock--in {
		margin-bottom: 0;
	}

	.details-button {
		font-size: clamp(14px, 3.8vw, 18px);
		padding: clamp(7px, 2vw, 10px) clamp(14px, 4vw, 20px);
		min-height: clamp(30px, 8vw, 38px);
		border-radius: 9px;
		box-shadow: none;
	}

	html.dark .product-card__mobile-price strong {
		color: var(--text-color);
	}
}

.product-card__image-slider {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    overflow: hidden;
}

.card-dots-container {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 20;
}

.card-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.6);
    transition: opacity 0.3s, background-color 0.3s;
}

.card-dot.active {
    background-color: rgba(255,255,255,1);
}

/* Dark mode overrides for dots */
html.dark .card-dot {
    background-color: #444;
}
html.dark .card-dot.active {
    background-color: #ffffff;
}

@media (max-width: 768px) {
	html.dark .product-card__mobile-title {
		color: var(--text-color);
	}
	html.dark .product-card__mobile-price strong {
		color: var(--text-color);
	}
}