/* ============================================================
   Slider — Shop by category (home page)
   Self-contained styles for the <x-slider-category-list> component.
   Assumes the site base html font-size is 62.5% (1rem = 10px), which
   this theme already sets. Theme tokens (--headerBg/--maroon) are used
   with fallbacks, so this file is safe to load on its own.
   ============================================================ */
.rl-section {
	--ink: var(--headerBg, #00002a);
	--red: var(--maroon, #d00c27);
	--tint: #f2f3f9;
	position: relative;
	z-index: 14;
	padding: 2.6rem 0 2.2rem;
	background: linear-gradient(180deg, #fafbfd 0%, #f2f3f9 100%);
}
.rl-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.6rem;
	margin-bottom: 1.4rem;
	padding: 0 .4rem;
}
.rl-title { margin: 0; font-size: 2rem; font-weight: 400 !important; color: var(--ink); }
.rl-hint { margin: 0; font-size: 1.3rem; color: #6b6f88; }

.rl-bar { position: relative; }
.rl-track {
	display: flex;
	gap: 1.8rem;
	overflow-x: auto;
	padding: 1.2rem .4rem 1.6rem;
	scrollbar-width: none;
	scroll-snap-type: x proximity;
	cursor: grab;
}
.rl-track::-webkit-scrollbar { display: none; }
.rl-track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.rl-track.is-dragging .rl-item { pointer-events: none; }

.rl-item {
	flex: 0 0 auto;
	width: 11.4rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.1rem;
	text-decoration: none;
	scroll-snap-align: start;
	-webkit-user-drag: none;
}
.rl-item:focus-visible { outline: .2rem solid var(--red); outline-offset: .4rem; border-radius: 1.6rem; }

.rl-arch {
	position: relative;
	width: 100%;
	height: 14rem;
	border-radius: 5.7rem 5.7rem 1.4rem 1.4rem;
	background: var(--tint);
	box-shadow: 0 .8rem 2rem rgba(0, 0, 42, .10);
}
.rl-photo { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.rl-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.rl-name {
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	color: #4a4d63;
}

/* Hot / New tag */
.rl-tag {
	position: absolute;
	top: 1.2rem;
	right: -.4rem;
	z-index: 3;
	padding: .3rem .9rem;
	border-radius: 2rem;
	background: var(--red);
	color: #fff;
	font-size: 1.05rem;
	font-weight: 800;
	line-height: 1.3;
	border: .2rem solid #fff;
	box-shadow: 0 .3rem .8rem rgba(208, 12, 39, .3);
}

/* View all tile */
.rl-item.is-all .rl-arch {
	display: grid;
	place-items: center;
	background: var(--red);
	box-shadow: 0 .8rem 2rem rgba(208, 12, 39, .28);
}
.rl-item.is-all .rl-arch .rl-big { width: 3.4rem; height: 3.4rem; color: #fff; }

/* Scroll arrows */
.rl-arrow {
	position: absolute;
	top: 6.4rem;
	z-index: 4;
	width: 4.2rem;
	height: 4.2rem;
	display: grid;
	place-items: center;
	border: .1rem solid #e2e5f0;
	border-radius: 50%;
	background: #fff;
	color: var(--ink);
	box-shadow: 0 .6rem 1.6rem rgba(0, 0, 42, .14);
	cursor: pointer;
}
.rl-arrow.prev { left: -1.6rem; }
.rl-arrow.next { right: -1.6rem; }
.rl-arrow:disabled { opacity: 0; pointer-events: none; }

.ci { width: 2.2rem; height: 2.2rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 767px) {
	.rl-section { padding: 1.8rem 0 1.4rem; }
	.rl-title { font-size: 1.7rem; }
	.rl-hint { display: none; }
	.rl-arrow { display: none; }
	.rl-track { gap: 1.3rem; padding: 1rem .2rem 1.4rem; }
	.rl-item { width: 9.4rem; }
	.rl-arch { height: 11.6rem; border-radius: 4.7rem 4.7rem 1.2rem 1.2rem; }
	.rl-name { font-size: 1.2rem; }
}