/* ==========================================================================
   Shared slider — product slider [core_category_slider], category slider [core_categories_slider]
   and the brands slider on product / category pages.
   CSS scroll-snap track (native swipe) + JS eased paging. Mobile first.
   Cards per slide:        <500  mobile(500)  tablet(640)  tablet(768)  laptop(1024)  desktop(1400)
     .cc-slider--products    1      2            3            3            5             5
     .cc-slider--cats        1      2            3            3            5             7
     .cc-slider--brands      1      1            1            4            5             5
   ========================================================================== */
.cc-slider { --cc-gap: 16px; --cc-show: 1; }
.cc-slider__title { margin: 0 0 24px; text-align: center; }

.cc-slider__viewport { position: relative; }
.cc-slider__track {
	display: flex; gap: var(--cc-gap);
	list-style: none; margin: 0; padding: 4px 2px 8px;
	overflow-x: auto; scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain; scrollbar-width: none;
}
.cc-slider__track::-webkit-scrollbar { display: none; }
.cc-slider__item {
	flex: 0 0 calc((100% - var(--cc-gap) * (var(--cc-show) - 1)) / var(--cc-show));
	min-width: 0;
	scroll-snap-align: start;
}

/* Arrows */
.cc-slider__nav {
	position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
	display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
	border: 1px solid var(--cc-border); border-radius: 50%;
	background: var(--cc-white); color: var(--cc-dark); box-shadow: var(--cc-shadow);
	cursor: pointer; transition: background var(--cc-ease), color var(--cc-ease), border-color var(--cc-ease);
}
.cc-slider__nav:hover { background: var(--cc-primary); border-color: var(--cc-primary); color: var(--cc-white); }
.cc-slider__nav[hidden] { display: none; }
.cc-slider__prev { left: 4px; }
.cc-slider__next { right: 4px; }

/* Dots */
.cc-slider__dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 20px; }
.cc-slider__dot {
	width: 10px; height: 10px; padding: 0; border: 0; border-radius: 10px;
	background: var(--cc-border); cursor: pointer; transition: width .3s ease, background .3s ease;
}
.cc-slider__dot.is-active { width: 28px; background: var(--cc-primary); }

/* Product slider: image first, then title, full-width quote button */
.cc-slider--products .cc-card__media { margin: 0 0 12px; }
.cc-slider--products .cc-card__title { margin: 0; }
.cc-slider--products .cc-card__quote { width: 100%; }

/* Category card: image + title; the whole card is the link */
.cc-cat-card {
	display: flex; flex-direction: column; align-items: center; height: 100%;
	padding: 14px 14px 16px; border: 1px solid transparent; border-radius: var(--cc-radius-lg);
	background: var(--cc-white); color: var(--cc-dark); text-align: center;
	transition: border-color var(--cc-ease), box-shadow var(--cc-ease), transform var(--cc-ease);
}
.cc-cat-card:hover { border-color: rgba(253, 157, 22, .5); box-shadow: var(--cc-shadow); transform: translateY(-2px); color: var(--cc-dark); }
.cc-cat-card__media { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; margin-bottom: 12px; overflow: hidden; border-radius: var(--cc-radius); background: #f6f6f6; }
.cc-cat-card__media img { width: 60%; height: 60%; max-width: 160px; max-height: 160px; object-fit: contain; mix-blend-mode: multiply; transition: transform .35s ease; }
.cc-cat-card:hover .cc-cat-card__media img { transform: scale(1.05); }
.cc-cat-card__title { margin: auto 0 0; font: 600 15px/1.35 var(--cc-font-head); transition: color var(--cc-ease); }
.cc-cat-card:hover .cc-cat-card__title { color: var(--cc-primary-hover); }

@media (min-width: 500px) { .cc-slider { --cc-show: 2; } }
@media (min-width: 640px) { .cc-slider { --cc-show: 3; } }
@media (min-width: 1024px) {
	.cc-slider { --cc-show: 5; }
	.cc-slider--cats { --cc-gap: 14px; }
}
@media (min-width: 1400px) {
	.cc-slider--cats { --cc-show: 7; }
	.cc-slider__prev { left: -20px; }
	.cc-slider__next { right: -20px; }
}

/* Brands slider: logo cards; declared last so its counts override the ones above */
.cc-slider--brands { --cc-show: 1; margin-top: 48px; padding-block: 24px; border-top: 1px solid var(--cc-border); }
.cc-brand { display: grid; place-items: center; height: 125px; padding: 12px 20px; border-radius: var(--cc-radius-lg); background: var(--cc-white); filter: grayscale(1); opacity: .75; transition: filter var(--cc-ease), opacity var(--cc-ease); }
.cc-brand:hover, .cc-brand:focus-visible { filter: none; opacity: 1; }
.cc-brand img { max-height: 110px; width: auto; object-fit: contain; }
@media (min-width: 768px) { .cc-slider--brands { --cc-show: 4; } }
@media (min-width: 1024px) { .cc-slider--brands { --cc-show: 5; } }