/* Featured Collections slider — mod_j2commerce_tags "natural:collections" layout.
 * J3 parity (templates/newline/css/custom.css .homepage__collections): slick center mode,
 * 3 tiles per view, neighbours dimmed to .7 and inset 80px on their outer edge, the centered
 * tile full width with a bottom gradient, uppercase title and an underlined "View Collection"
 * link; title strip above, 50x100 white arrows on the stage edges. */

/* 1110px = J3's 1140px .container minus its 15px gutters, so the tiles size as they do there. */
.nc-cslider { position: relative; max-width: 1110px; margin: 2.25rem auto 0; }

/* Title strip (slick "slider-nav"). Scrolls sideways on narrow screens instead of wrapping. */
.nc-cslider-nav { display: flex; justify-content: safe center; overflow-x: auto; scrollbar-width: none; }
.nc-cslider-nav::-webkit-scrollbar { display: none; }
.nc-cslider-tab { flex: 0 0 auto; border: 0; background: none; padding: 10px 20px; font-size: .875rem; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: var(--nc-ink, #222); cursor: pointer; }
.nc-cslider-tab > span { display: inline-block; padding-bottom: 3px; border-bottom: 1px solid transparent; }
.nc-cslider-tab[aria-current="true"] > span,
.nc-cslider-tab:hover > span { border-bottom-color: var(--bs-primary, #b11117); }
.nc-cslider-tab:focus-visible { outline: 3px solid var(--bs-primary, #b11117); outline-offset: -3px; }

/* Stage */
.nc-cslider-stage { position: relative; }
.nc-cslider .swiper { padding: 0 10px; }
.nc-cslider .swiper-wrapper { align-items: flex-start; }
.nc-cslide { opacity: .7; transition: opacity .4s ease; }
.nc-cslide.swiper-slide-active { opacity: 1; }

.nc-cslide-link { position: relative; display: block; padding: 20px; color: #fff; text-decoration: none; }
.nc-cslide-link::after { content: ""; position: absolute; inset: 20px; border-radius: var(--radius-sm, 4px); background: linear-gradient(transparent, rgba(0, 0, 0, .9)); pointer-events: none; }
.nc-cslide-link img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-sm, 4px); }
.nc-cslide-link:hover, .nc-cslide-link:focus-visible { color: #fff; }
.nc-cslide-link:focus-visible { outline: 3px solid var(--bs-primary, #b11117); outline-offset: 2px; }

.nc-cslide.swiper-slide-active .nc-cslide-link { padding: 20px 0; }
.nc-cslide.swiper-slide-active .nc-cslide-link::after { inset: 20px 0; }

/* Title/link box: only the centered tile shows it (slick-center). */
.nc-cslide-box { position: absolute; left: 0; right: 0; bottom: 20px; z-index: 1; display: flex; flex-direction: column; align-items: center; padding: 30px 30px 20px; text-align: center; opacity: 0; transition: opacity .4s ease; }
.nc-cslide.swiper-slide-active .nc-cslide-box { opacity: 1; }
.nc-cslide-title { font-size: 1.75rem; font-weight: 300; line-height: 1; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 14px; }
.nc-cslide-cta { position: relative; display: inline-block; padding-bottom: 6px; font-size: .75rem; letter-spacing: 3px; text-transform: uppercase; }
.nc-cslide-cta::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255, 255, 255, .2); }
.nc-cslide-cta::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: 0; height: 2px; background: var(--bs-primary, #b11117); transition: left .3s ease-out, right .3s ease-out; }
.nc-cslide-link:hover .nc-cslide-cta::after,
.nc-cslide-link:focus-visible .nc-cslide-cta::after { left: 0; right: 0; }
.nc-cslide-cta .fa-arrow-right { margin-left: .25rem; }

/* Arrows (slick .arrow-btn) */
.nc-cslider-arrow { position: absolute; top: 50%; z-index: 2; width: 50px; height: 100px; padding: 0; border: 0; background: #fff; color: #000; font-size: 1rem; line-height: 100px; text-align: center; cursor: pointer; transform: translateY(-50%); transition: background-color .3s; }
.nc-cslider-prev { left: 0; }
.nc-cslider-next { right: 0; }
.nc-cslider-arrow:hover, .nc-cslider-arrow:focus-visible { background: #f4f7fa; }
.nc-cslider-arrow:focus-visible { outline: 3px solid var(--bs-primary, #b11117); outline-offset: 2px; }
.nc-cslider-arrow[aria-disabled="true"] { opacity: .35; cursor: default; }

/* Autoplay pause/play toggle (rendered only when the module autoplays). */
.nc-cslider-pause { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1rem; padding: .5rem 1rem; border: 1px solid var(--nc-ink, #222); background: #fff; color: var(--nc-ink, #222); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; border-radius: var(--radius-sm, 4px); cursor: pointer; }
.nc-cslider-pause:focus-visible { outline: 3px solid var(--bs-primary, #b11117); outline-offset: 2px; }

/* Neighbour inset — 80px on the outer edge from tablet up (J3 desktop/tablet). */
@media (min-width: 768px) {
    .nc-cslide.swiper-slide-prev .nc-cslide-link { padding: 20px 80px 20px 0; }
    .nc-cslide.swiper-slide-prev .nc-cslide-link::after { inset: 20px 80px 20px 0; }
    .nc-cslide.swiper-slide-next .nc-cslide-link { padding: 20px 0 20px 80px; }
    .nc-cslide.swiper-slide-next .nc-cslide-link::after { inset: 20px 0 20px 80px; }
}

@media (max-width: 575.98px) {
    .nc-cslide-box { padding: 30px 10px; }
    .nc-cslide-title { font-size: .875rem; font-weight: 700; line-height: 1.7; margin-bottom: 0; }
    .nc-cslide-cta { font-size: .625rem; letter-spacing: 1px; }
}

@media (prefers-reduced-motion: reduce) {
    .nc-cslide, .nc-cslide-box, .nc-cslide-cta::after, .nc-cslider-arrow { transition: none; }
}