/**
 * =========================================================
 * COOLBABA Section Navigator — Editorial Ribbon v1
 * Compact premium magazine rubric rail
 * Accent: #00656e
 * =========================================================
 */

:root {
	--cb-ribbon-accent: #00656e;
	--cb-ribbon-accent-rgb: 0, 101, 110;
	--cb-ribbon-paper: #fffdf8;
	--cb-ribbon-ink: #111111;
	--cb-ribbon-muted: rgba(17, 17, 17, 0.58);
	--cb-ribbon-line: rgba(17, 17, 17, 0.10);
	--cb-ribbon-soft: rgba(0, 101, 110, 0.07);
	--cb-ribbon-shadow: 0 14px 34px rgba(0, 0, 0, 0.055);
}

.coolbaba-section-nav {
	width: 100%;
	margin: clamp(20px, 2.8vw, 38px) 0 clamp(26px, 3.6vw, 48px);
	padding: 0;
	position: relative;
}

.coolbaba-section-nav *,
.coolbaba-section-nav *::before,
.coolbaba-section-nav *::after {
	box-sizing: border-box;
}

.coolbaba-section-nav a {
	text-decoration: none !important;
}

/* Header */
.coolbaba-section-nav__header {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: clamp(14px, 2vw, 24px);
	margin: 0 0 14px;
}

.coolbaba-section-nav__header::before {
	display: none !important;
	content: none !important;
}

.coolbaba-section-nav__title {
	position: relative;
	margin: 0;
	padding: 0;
	color: var(--cb-ribbon-ink);
	font-size: clamp(22px, 2vw, 34px);
	font-weight: 500;
	line-height: 0.95;
	letter-spacing: -0.045em;
	text-transform: none;
	white-space: nowrap;
}

.coolbaba-section-nav__title::before {
	display: none !important;
	content: none !important;
}

.coolbaba-section-nav__title::after {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-left: 10px;
	border-radius: 50%;
	background: var(--cb-ribbon-accent);
	vertical-align: middle;
	transform: translateY(-2px);
}

.coolbaba-section-nav__header::after {
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	background: linear-gradient(
		90deg,
		rgba(0, 101, 110, 0.34),
		rgba(17, 17, 17, 0.08),
		rgba(17, 17, 17, 0.02)
	);
}

/* Horizontal editorial ribbon */
.coolbaba-section-nav__grid {
	counter-reset: cb-ribbon;
	display: flex;
	flex-wrap: nowrap;
	gap: 10px;
	width: 100%;
	padding: 2px 2px 8px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.coolbaba-section-nav__grid::-webkit-scrollbar {
	display: none;
}

/* Card */
.coolbaba-section-nav__item {
	counter-increment: cb-ribbon;
	position: relative;
	flex: 0 0 clamp(230px, 19vw, 270px);
	width: clamp(230px, 19vw, 270px);
	height: 104px;
	min-height: 104px;
	display: block;
	overflow: hidden;
	border: 1px solid var(--cb-ribbon-line);
	border-radius: 18px;
	background:
		linear-gradient(135deg, rgba(var(--cb-ribbon-accent-rgb), 0.045), rgba(255, 253, 248, 0.98)),
		var(--cb-ribbon-paper);
	color: var(--cb-ribbon-ink);
	box-shadow: var(--cb-ribbon-shadow);
	scroll-snap-align: start;
	isolation: isolate;
	transition:
		transform 220ms ease,
		border-color 220ms ease,
		box-shadow 220ms ease,
		background-color 220ms ease;
}

.coolbaba-section-nav__item:hover {
	transform: translateY(-2px);
	border-color: rgba(var(--cb-ribbon-accent-rgb), 0.32);
	box-shadow: 0 18px 42px rgba(0, 0, 0, 0.085);
}

/* Small editorial image */
.coolbaba-section-nav__image {
	position: absolute;
	left: 9px;
	top: 9px;
	bottom: 9px;
	z-index: 1;
	width: 76px;
	border-radius: 13px;
	background-size: cover;
	background-position: center;
	opacity: 0.92;
	filter: saturate(0.94) contrast(1.03);
	transform: scale(1.01);
	transition:
		transform 650ms cubic-bezier(0.22, 1, 0.36, 1),
		filter 220ms ease,
		opacity 220ms ease;
}

.coolbaba-section-nav__item:hover .coolbaba-section-nav__image {
	transform: scale(1.06);
	opacity: 1;
	filter: saturate(1.03) contrast(1.05);
}

.coolbaba-section-nav__image--empty {
	background:
		radial-gradient(circle at 28% 24%, rgba(var(--cb-ribbon-accent-rgb), 0.34), transparent 38%),
		linear-gradient(145deg, #082828, #020707);
	opacity: 1;
}

/* Image overlay only */
.coolbaba-section-nav__shade {
	position: absolute;
	left: 9px;
	top: 9px;
	bottom: 9px;
	z-index: 2;
	width: 76px;
	border-radius: 13px;
	background:
		linear-gradient(0deg, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.02)),
		radial-gradient(circle at 18% 82%, rgba(var(--cb-ribbon-accent-rgb), 0.22), transparent 42%);
	pointer-events: none;
}

/* Decorative number */
.coolbaba-section-nav__item::after {
	content: counter(cb-ribbon, decimal-leading-zero);
	position: absolute;
	right: 13px;
	top: 12px;
	z-index: 2;
	color: rgba(var(--cb-ribbon-accent-rgb), 0.18);
	font-size: 28px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.08em;
	pointer-events: none;
}

/* Accent line */
.coolbaba-section-nav__item::before {
	content: "";
	position: absolute;
	left: 96px;
	right: 14px;
	top: 13px;
	z-index: 3;
	height: 1px;
	background: linear-gradient(
		90deg,
		rgba(var(--cb-ribbon-accent-rgb), 0.32),
		rgba(17, 17, 17, 0.05)
	);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 220ms ease;
}

.coolbaba-section-nav__item:hover::before {
	transform: scaleX(1);
}

/* Content */
.coolbaba-section-nav__content {
	position: absolute;
	left: 96px;
	right: 34px;
	top: 20px;
	bottom: 16px;
	z-index: 4;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	gap: 8px;
}

.coolbaba-section-nav__kicker {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	background: transparent;
	color: var(--cb-ribbon-ink);
	font-size: 12px;
	font-weight: 900;
	line-height: 1.06;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	text-shadow: none;
	white-space: normal;
	word-break: normal;
	overflow-wrap: break-word;
}

.coolbaba-section-nav__subtitle {
	display: block;
	width: 100%;
	margin: 0;
	color: var(--cb-ribbon-muted);
	font-size: 9px;
	font-weight: 800;
	line-height: 1.18;
	letter-spacing: 0.045em;
	text-transform: uppercase;
	text-shadow: none;

	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.coolbaba-section-nav__icon {
	display: none !important;
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1140px) {
	.coolbaba-section-nav__item {
		flex-basis: 240px;
		width: 240px;
		height: 102px;
		min-height: 102px;
	}

	.coolbaba-section-nav__kicker {
		font-size: 11px;
	}
}

/* Mobile */
@media (max-width: 767px) {
	.coolbaba-section-nav {
		margin: 24px 0 32px;
		padding: 0;
		overflow: hidden;
	}

	.coolbaba-section-nav__header {
		grid-template-columns: 1fr;
		gap: 10px;
		margin: 0 14px 14px;
	}

	.coolbaba-section-nav__title {
		font-size: clamp(24px, 7vw, 34px);
		line-height: 0.96;
		white-space: normal;
		max-width: 96%;
	}

	.coolbaba-section-nav__title::after {
		width: 7px;
		height: 7px;
		margin-left: 9px;
	}

	.coolbaba-section-nav__grid {
		gap: 10px;
		padding: 0 14px 6px;
	}

	.coolbaba-section-nav__item {
		flex-basis: clamp(218px, 68vw, 250px);
		width: clamp(218px, 68vw, 250px);
		height: 98px;
		min-height: 98px;
		border-radius: 17px;
	}

	.coolbaba-section-nav__image,
	.coolbaba-section-nav__shade {
		width: 70px;
		left: 8px;
		top: 8px;
		bottom: 8px;
		border-radius: 12px;
	}

	.coolbaba-section-nav__content {
		left: 90px;
		right: 32px;
		top: 18px;
		bottom: 15px;
	}

	.coolbaba-section-nav__item::before {
		left: 90px;
		right: 13px;
		top: 12px;
	}

	.coolbaba-section-nav__item::after {
		right: 12px;
		top: 11px;
		font-size: 26px;
	}

	.coolbaba-section-nav__kicker {
		font-size: 11px;
		line-height: 1.06;
	}

	.coolbaba-section-nav__subtitle {
		font-size: 8px;
		line-height: 1.16;
	}
}

@media (max-width: 390px) {
	.coolbaba-section-nav__item {
		flex-basis: 220px;
		width: 220px;
		height: 96px;
		min-height: 96px;
	}

	.coolbaba-section-nav__kicker {
		font-size: 10px;
	}

	.coolbaba-section-nav__subtitle {
		font-size: 8px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.coolbaba-section-nav__item,
	.coolbaba-section-nav__image,
	.coolbaba-section-nav__item::before {
		transition: none !important;
	}
}
/**
 * =========================================================
 * COOLBABA Section Navigator — Rail behaviour fix v2
 * Desktop: show all 7 cards in compact 4+3 layout.
 * Mobile: exactly 2 cards visible per row/viewport with horizontal swipe.
 * =========================================================
 */

/* Desktop: show all categories, no hidden rail */
@media (min-width: 768px) {
	.coolbaba-section-nav {
		overflow: visible !important;
	}

	.coolbaba-section-nav__grid {
		display: grid !important;
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
		gap: 10px !important;
		width: 100% !important;
		padding: 2px 0 0 !important;
		overflow: visible !important;
		scroll-snap-type: none !important;
	}

	.coolbaba-section-nav__item,
	.coolbaba-section-nav__item:nth-child(1),
	.coolbaba-section-nav__item:nth-child(2),
	.coolbaba-section-nav__item:nth-child(3),
	.coolbaba-section-nav__item:nth-child(4),
	.coolbaba-section-nav__item:nth-child(5),
	.coolbaba-section-nav__item:nth-child(6),
	.coolbaba-section-nav__item:nth-child(7) {
		width: 100% !important;
		flex: none !important;
		height: 104px !important;
		min-height: 104px !important;
	}

	/* second row: 3 cards slightly wider-looking by spanning the same grid cleanly */
	.coolbaba-section-nav__item:nth-child(5),
	.coolbaba-section-nav__item:nth-child(6),
	.coolbaba-section-nav__item:nth-child(7) {
		min-height: 104px !important;
	}

	.coolbaba-section-nav__image,
	.coolbaba-section-nav__shade {
		width: 68px !important;
		left: 8px !important;
		top: 8px !important;
		bottom: 8px !important;
		border-radius: 12px !important;
	}

	.coolbaba-section-nav__content {
		left: 88px !important;
		right: 30px !important;
		top: 17px !important;
		bottom: 14px !important;
	}

	.coolbaba-section-nav__item::before {
		left: 88px !important;
		right: 12px !important;
		top: 12px !important;
	}

	.coolbaba-section-nav__item::after {
		right: 10px !important;
		top: 10px !important;
		font-size: 24px !important;
	}

	.coolbaba-section-nav__kicker {
		font-size: clamp(10px, 0.72vw, 12px) !important;
		line-height: 1.05 !important;
	}

	.coolbaba-section-nav__subtitle {
		font-size: clamp(8px, 0.56vw, 10px) !important;
		line-height: 1.15 !important;
	}
}

/* Wide desktop: make second row 3 cards breathe slightly better */
@media (min-width: 1101px) {
	.coolbaba-section-nav__grid {
		grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
	}

	.coolbaba-section-nav__item:nth-child(1),
	.coolbaba-section-nav__item:nth-child(2),
	.coolbaba-section-nav__item:nth-child(3),
	.coolbaba-section-nav__item:nth-child(4) {
		grid-column: span 3 !important;
	}

	.coolbaba-section-nav__item:nth-child(5),
	.coolbaba-section-nav__item:nth-child(6),
	.coolbaba-section-nav__item:nth-child(7) {
		grid-column: span 4 !important;
	}
}

/* Mobile: 2 cards fully visible, then swipe */
@media (max-width: 767px) {
	.coolbaba-section-nav {
		overflow: hidden !important;
	}

	.coolbaba-section-nav__grid {
		display: flex !important;
		flex-wrap: nowrap !important;
		gap: 8px !important;
		padding: 0 14px 6px !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		scroll-snap-type: x mandatory !important;
		-webkit-overflow-scrolling: touch !important;
		scrollbar-width: none !important;
	}

	.coolbaba-section-nav__grid::-webkit-scrollbar {
		display: none !important;
	}

	.coolbaba-section-nav__item,
	.coolbaba-section-nav__item:nth-child(1),
	.coolbaba-section-nav__item:nth-child(2),
	.coolbaba-section-nav__item:nth-child(3),
	.coolbaba-section-nav__item:nth-child(4),
	.coolbaba-section-nav__item:nth-child(5),
	.coolbaba-section-nav__item:nth-child(6),
	.coolbaba-section-nav__item:nth-child(7) {
		flex: 0 0 calc((100vw - 36px) / 2) !important;
		width: calc((100vw - 36px) / 2) !important;
		height: 88px !important;
		min-height: 88px !important;
		padding: 0 !important;
		scroll-snap-align: start !important;
		border-radius: 14px !important;
	}

	.coolbaba-section-nav__image,
	.coolbaba-section-nav__shade {
		width: 52px !important;
		left: 7px !important;
		top: 7px !important;
		bottom: 7px !important;
		border-radius: 10px !important;
	}

	.coolbaba-section-nav__content {
		left: 66px !important;
		right: 22px !important;
		top: 15px !important;
		bottom: 12px !important;
		gap: 6px !important;
	}

	.coolbaba-section-nav__item::before {
		left: 66px !important;
		right: 10px !important;
		top: 11px !important;
	}

	.coolbaba-section-nav__item::after {
		right: 8px !important;
		top: 8px !important;
		font-size: 20px !important;
		color: rgba(0, 101, 110, 0.20) !important;
	}

	.coolbaba-section-nav__kicker {
		font-size: 8.5px !important;
		line-height: 1.05 !important;
		letter-spacing: 0.01em !important;
	}

	.coolbaba-section-nav__subtitle {
		font-size: 6.8px !important;
		line-height: 1.12 !important;
		letter-spacing: 0.035em !important;
		-webkit-line-clamp: 2 !important;
	}
}

@media (max-width: 390px) {
	.coolbaba-section-nav__item,
	.coolbaba-section-nav__item:nth-child(1),
	.coolbaba-section-nav__item:nth-child(2),
	.coolbaba-section-nav__item:nth-child(3),
	.coolbaba-section-nav__item:nth-child(4),
	.coolbaba-section-nav__item:nth-child(5),
	.coolbaba-section-nav__item:nth-child(6),
	.coolbaba-section-nav__item:nth-child(7) {
		flex-basis: calc((100vw - 34px) / 2) !important;
		width: calc((100vw - 34px) / 2) !important;
		height: 84px !important;
		min-height: 84px !important;
	}

	.coolbaba-section-nav__image,
	.coolbaba-section-nav__shade {
		width: 48px !important;
	}

	.coolbaba-section-nav__content {
		left: 61px !important;
		right: 20px !important;
	}

	.coolbaba-section-nav__kicker {
		font-size: 8px !important;
	}

	.coolbaba-section-nav__subtitle {
		font-size: 6.5px !important;
	}
}

/**
 * =========================================================
 * COOLBABA Section Navigator — Final scroll rail fix
 * Horizontal scroll on desktop + mobile.
 * No text overlap, no cropped category names.
 * =========================================================
 */

/* Whole block stays compact */
.coolbaba-section-nav {
	margin: clamp(22px, 2.8vw, 38px) 0 clamp(28px, 3.8vw, 50px) !important;
	overflow: hidden !important;
}

/* Header remains editorial but not dominant */
.coolbaba-section-nav__header {
	display: grid !important;
	grid-template-columns: auto 1fr !important;
	align-items: center !important;
	gap: clamp(14px, 2vw, 24px) !important;
	margin: 0 0 14px !important;
}

.coolbaba-section-nav__title {
	font-size: clamp(20px, 2vw, 32px) !important;
	font-weight: 500 !important;
	line-height: 0.96 !important;
	letter-spacing: -0.045em !important;
	text-transform: none !important;
	white-space: nowrap !important;
}

.coolbaba-section-nav__title::before {
	display: none !important;
	content: none !important;
}

.coolbaba-section-nav__title::after {
	width: 7px !important;
	height: 7px !important;
	margin-left: 10px !important;
	background: #00656e !important;
}

/* Force horizontal scroll rail everywhere */
.coolbaba-section-nav__grid {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 12px !important;
	width: 100% !important;
	padding: 2px 2px 10px !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	scroll-snap-type: x proximity !important;
	-webkit-overflow-scrolling: touch !important;
	scrollbar-width: thin !important;
	scrollbar-color: rgba(0, 101, 110, 0.38) rgba(17, 17, 17, 0.06) !important;
}

.coolbaba-section-nav__grid::-webkit-scrollbar {
	height: 4px !important;
}

.coolbaba-section-nav__grid::-webkit-scrollbar-track {
	background: rgba(17, 17, 17, 0.05) !important;
	border-radius: 999px !important;
}

.coolbaba-section-nav__grid::-webkit-scrollbar-thumb {
	background: rgba(0, 101, 110, 0.42) !important;
	border-radius: 999px !important;
}

/* Cards: wider and safer for full COOL` category names */
.coolbaba-section-nav__item,
.coolbaba-section-nav__item:nth-child(1),
.coolbaba-section-nav__item:nth-child(2),
.coolbaba-section-nav__item:nth-child(3),
.coolbaba-section-nav__item:nth-child(4),
.coolbaba-section-nav__item:nth-child(5),
.coolbaba-section-nav__item:nth-child(6),
.coolbaba-section-nav__item:nth-child(7) {
	position: relative !important;
	flex: 0 0 clamp(285px, 24vw, 340px) !important;
	width: clamp(285px, 24vw, 340px) !important;
	height: 112px !important;
	min-height: 112px !important;
	padding: 0 !important;
	display: block !important;
	border-radius: 18px !important;
	border: 1px solid rgba(17, 17, 17, 0.10) !important;
	background:
		linear-gradient(135deg, rgba(0, 101, 110, 0.045), rgba(255, 253, 248, 0.98)),
		#fffdf8 !important;
	color: #111111 !important;
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.055) !important;
	overflow: hidden !important;
	scroll-snap-align: start !important;
}

/* Image area */
.coolbaba-section-nav__image,
.coolbaba-section-nav__shade {
	display: block !important;
	position: absolute !important;
	left: 9px !important;
	top: 9px !important;
	bottom: 9px !important;
	width: 82px !important;
	border-radius: 13px !important;
}

.coolbaba-section-nav__image {
	z-index: 1 !important;
	background-size: cover !important;
	background-position: center !important;
	opacity: 0.94 !important;
	filter: saturate(0.94) contrast(1.03) !important;
}

.coolbaba-section-nav__shade {
	z-index: 2 !important;
	background:
		linear-gradient(0deg, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.02)),
		radial-gradient(circle at 18% 82%, rgba(0, 101, 110, 0.22), transparent 42%) !important;
	pointer-events: none !important;
}

/* Number moves behind but never over text */
.coolbaba-section-nav__item::after {
	right: 14px !important;
	top: 12px !important;
	z-index: 1 !important;
	color: rgba(0, 101, 110, 0.14) !important;
	font-size: 30px !important;
	font-weight: 800 !important;
	line-height: 1 !important;
	letter-spacing: -0.08em !important;
	pointer-events: none !important;
}

/* Accent line */
.coolbaba-section-nav__item::before {
	content: "" !important;
	position: absolute !important;
	left: 104px !important;
	right: 18px !important;
	top: 14px !important;
	z-index: 3 !important;
	height: 1px !important;
	background: linear-gradient(
		90deg,
		rgba(0, 101, 110, 0.32),
		rgba(17, 17, 17, 0.05)
	) !important;
}

/* Text area: enough room, no overlap */
.coolbaba-section-nav__content {
	position: absolute !important;
	left: 104px !important;
	right: 38px !important;
	top: 23px !important;
	bottom: 17px !important;
	z-index: 4 !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: space-between !important;
	align-items: flex-start !important;
	gap: 8px !important;
	width: auto !important;
	height: auto !important;
	min-height: 0 !important;
}

.coolbaba-section-nav__kicker {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	color: #111111 !important;
	font-size: 12px !important;
	font-weight: 900 !important;
	line-height: 1.08 !important;
	letter-spacing: 0.01em !important;
	text-transform: uppercase !important;
	text-shadow: none !important;
	white-space: normal !important;
	word-break: normal !important;
	overflow-wrap: break-word !important;
	overflow: visible !important;
}

.coolbaba-section-nav__subtitle {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	color: rgba(17, 17, 17, 0.58) !important;
	font-size: 9px !important;
	font-weight: 800 !important;
	line-height: 1.18 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	text-shadow: none !important;
	white-space: normal !important;
	word-break: normal !important;
	overflow-wrap: break-word !important;
	overflow: visible !important;
}

.coolbaba-section-nav__icon {
	display: none !important;
}

/* Mobile: one full card + part of next card, no ugly cropping */
@media (max-width: 767px) {
	.coolbaba-section-nav {
		margin: 24px 0 32px !important;
		padding: 0 !important;
	}

	.coolbaba-section-nav__header {
		grid-template-columns: 1fr !important;
		gap: 10px !important;
		margin: 0 14px 14px !important;
	}

	.coolbaba-section-nav__title {
		font-size: clamp(24px, 7vw, 34px) !important;
		white-space: normal !important;
		max-width: 96% !important;
	}

	.coolbaba-section-nav__grid {
		gap: 10px !important;
		padding: 0 14px 8px !important;
		scroll-snap-type: x mandatory !important;
		scrollbar-width: none !important;
	}

	.coolbaba-section-nav__grid::-webkit-scrollbar {
		display: none !important;
	}

	.coolbaba-section-nav__item,
	.coolbaba-section-nav__item:nth-child(1),
	.coolbaba-section-nav__item:nth-child(2),
	.coolbaba-section-nav__item:nth-child(3),
	.coolbaba-section-nav__item:nth-child(4),
	.coolbaba-section-nav__item:nth-child(5),
	.coolbaba-section-nav__item:nth-child(6),
	.coolbaba-section-nav__item:nth-child(7) {
		flex: 0 0 clamp(260px, 78vw, 310px) !important;
		width: clamp(260px, 78vw, 310px) !important;
		height: 104px !important;
		min-height: 104px !important;
		border-radius: 17px !important;
	}

	.coolbaba-section-nav__image,
	.coolbaba-section-nav__shade {
		left: 8px !important;
		top: 8px !important;
		bottom: 8px !important;
		width: 74px !important;
		border-radius: 12px !important;
	}

	.coolbaba-section-nav__content {
		left: 94px !important;
		right: 36px !important;
		top: 21px !important;
		bottom: 16px !important;
	}

	.coolbaba-section-nav__item::before {
		left: 94px !important;
		right: 16px !important;
		top: 13px !important;
	}

	.coolbaba-section-nav__item::after {
		right: 12px !important;
		top: 11px !important;
		font-size: 28px !important;
	}

	.coolbaba-section-nav__kicker {
		font-size: 11px !important;
		line-height: 1.08 !important;
	}

	.coolbaba-section-nav__subtitle {
		font-size: 8px !important;
		line-height: 1.16 !important;
	}
}

@media (max-width: 390px) {
	.coolbaba-section-nav__item,
	.coolbaba-section-nav__item:nth-child(1),
	.coolbaba-section-nav__item:nth-child(2),
	.coolbaba-section-nav__item:nth-child(3),
	.coolbaba-section-nav__item:nth-child(4),
	.coolbaba-section-nav__item:nth-child(5),
	.coolbaba-section-nav__item:nth-child(6),
	.coolbaba-section-nav__item:nth-child(7) {
		flex-basis: 266px !important;
		width: 266px !important;
	}

	.coolbaba-section-nav__kicker {
		font-size: 10.5px !important;
	}

	.coolbaba-section-nav__subtitle {
		font-size: 7.8px !important;
	}
}

/**
 * =========================================================
 * COOLBABA Section Navigator — Hidden scroll / drag mode
 * Native swipe on mobile, mouse/trackpad scroll on desktop.
 * =========================================================
 */

.coolbaba-section-nav {
	overflow: hidden !important;
}

.coolbaba-section-nav__grid {
	overflow-x: auto !important;
	overflow-y: hidden !important;
	scrollbar-width: none !important;
	-ms-overflow-style: none !important;
	cursor: grab !important;
	user-select: none !important;
	-webkit-overflow-scrolling: touch !important;
	overscroll-behavior-x: contain !important;
}

.coolbaba-section-nav__grid::-webkit-scrollbar {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
}

.coolbaba-section-nav__grid.is-dragging {
	cursor: grabbing !important;
	scroll-snap-type: none !important;
}

.coolbaba-section-nav__grid.is-dragging a {
	pointer-events: none !important;
}

.coolbaba-section-nav__item {
	user-select: none !important;
	-webkit-user-drag: none !important;
}

.coolbaba-section-nav__item img {
	pointer-events: none !important;
}

/**
 * COOLBABA Section Navigator — click fix
 * Allow category links to open after normal click.
 */

.coolbaba-section-nav__grid.is-dragging a {
	pointer-events: auto !important;
}