/**
 * Royal Collection — "Bunları da Beğenebilirsiniz" related products carousel.
 * Reuses the existing .rc-card component; this only sizes/holds them.
 */
.rc-related {
	margin: 0 auto;
	padding: 54px 0 66px;
	background: #FAF8F5;
	border-top: 1px solid #DDD5CC;
}
.rc-related__head {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	padding: 0 24px 30px;
}
.rc-related__title {
	font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	font-size: 34px;
	line-height: 1.15;
	font-weight: 600;
	color: #51483E;
	letter-spacing: 0.01em;
	margin: 0;
	text-align: center;
}
.rc-related__nav { display: flex; gap: 10px; }
.rc-related__arrow {
	width: 44px;
	height: 44px;
	border: 1px solid #DDD5CC;
	background: #fff;
	color: #51483E;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.rc-related__arrow:hover { background: #F1ECE6; border-color: #665748; }
.rc-related__arrow:focus-visible { outline: 2px solid #665748; outline-offset: 2px; }
.rc-related__arrow:disabled { opacity: 0.3; cursor: default; }
.rc-related__arrow svg { width: 19px; height: 19px; }

.rc-related__scroller {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 72px) / 4); /* 4 up front, 3 × 24px gaps */
	gap: 24px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding: 4px max(24px, calc((100vw - 1180px) / 2)) 14px;
}
.rc-related__scroller::-webkit-scrollbar { display: none; }
.rc-related__scroller > .rc-card { scroll-snap-align: start; min-width: 0; margin: 0; }

@media (max-width: 1200px) {
	.rc-related__scroller { grid-auto-columns: calc((100% - 48px) / 3); }
	.rc-related__title { font-size: 30px; }
}
@media (max-width: 768px) {
	.rc-related__scroller { grid-auto-columns: calc((100% - 24px) / 2); }
	.rc-related__title { font-size: 27px; }
	.rc-related__nav { display: none; } /* touch swipe on mobile */
}
@media (max-width: 480px) {
	.rc-related__scroller { grid-auto-columns: calc((100% - 16px) / 2); gap: 16px; }
	.rc-related { padding: 42px 0 54px; }
	.rc-related__head { padding-bottom: 22px; }
}

/* Reduced motion: instant scroll, no transitions on arrows. */
@media (prefers-reduced-motion: reduce) {
	.rc-related__arrow { transition: none; }
}