/* ===== Mconnect_HomeCategorySlider — frontend (Featured Collections) =====
   Horizontal-scroll carousel: 3 cards visible (2 on tablet, 1 on mobile);
   the rest revealed by swipe / mouse drag / arrow click. Scroll-snap keeps
   the next card snapping cleanly to the viewport edge. Markup ported 1:1
   from storefront-mockup/home-v2-v5.html (.featured-cols).
*/

.featured-cols{
    max-width:var(--maxw, 1320px);
    margin:32px auto;
    padding:0 28px;
    font-family:'Inter',system-ui,sans-serif;
    --fc-gap:22px;
}

/* Title + arrows ALWAYS on the same row. flex-wrap removed because the
   arrows were dropping below the headline on intermediate widths. */
.fc-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;flex-wrap:nowrap}
.fc-head-text{flex:1 1 auto;min-width:0}
.fc-arrows{flex:0 0 auto}
.fc-head-text{display:flex;flex-direction:column;gap:4px}
.fc-eyebrow{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#bc1212}
.fc-title-v2{font-size:clamp(22px,2.6vw,28px);font-weight:800;text-transform:uppercase;letter-spacing:.3px;margin:0;line-height:1.1}
.fc-title-v2 .a{color:#bc1212}
.fc-title-v2 .b{color:#1344b1}

.fc-arrows{display:flex;gap:8px}
.fc-arrows button{width:34px;height:34px;border-radius:50%;border:1.5px solid #e6e9ef;background:#fff;color:#bc1212;display:grid;place-items:center;cursor:pointer;transition:border-color .15s,background .15s,opacity .15s;padding:0}
.fc-arrows button:hover:not(:disabled){border-color:#bc1212;background:#fdecec}
.fc-arrows button:disabled{opacity:.35;cursor:default;border-color:#e6e9ef;background:#fff}
.fc-arrows svg{width:16px;height:16px;display:block}

/* ---------- the scrollable carousel ---------- */
.fc-viewport{
    position:relative;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;          /* iOS momentum */
    scrollbar-width:none;                       /* Firefox */
    -ms-overflow-style:none;                    /* old Edge */
}
.fc-viewport::-webkit-scrollbar{display:none;height:0;width:0}   /* WebKit/Blink */

.fc-track{
    display:inline-flex;
    flex-wrap:nowrap;
    gap:var(--fc-gap);
    min-width:100%;                            /* still fill the section if few cards */
    align-items:stretch;
}

.fc-card{
    /* JS sets --fc-card-w on load + resize for pixel-perfect 3-per-view.
       Fallback for the first paint: roughly 1/3 minus gap share. */
    flex:0 0 var(--fc-card-w, calc((100% - var(--fc-gap) * 2) / 3));
    scroll-snap-align:start;
    scroll-margin-left:0;
    position:relative;
    aspect-ratio:16/9;
    overflow:hidden;
    border-radius:12px;
    box-shadow:0 6px 20px rgba(20,41,107,.08);
    display:block;
    background:#f2f4f8;
    text-decoration:none;
}
.fc-card img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;display:block}
.fc-card:hover img{transform:scale(1.04)}
.fc-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#114ccf;color:#fff;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:15px;padding:10px 18px;border-radius:8px;box-shadow:0 4px 14px rgba(17,76,207,.32);text-align:center;max-width:80%}

.fc-explore{text-align:center;margin-top:22px}
.fc-btn{display:inline-flex;align-items:center;gap:8px;border:1.5px solid #0f9447;color:#0f9447;background:transparent;border-radius:999px;padding:11px 22px;font-weight:700;font-size:14px;text-decoration:none;transition:background .15s,color .15s}
.fc-btn:hover{background:#0f9447;color:#fff;text-decoration:none}

/* ----- responsive (the JS reads window.innerWidth for the same breakpoints) ----- */
@media(max-width:960px){
    .fc-card{flex-basis:var(--fc-card-w, calc((100% - var(--fc-gap)) / 2))}
    .fc-label{font-size:13px;padding:8px 14px}
}
@media(max-width:640px){
    .fc-card{flex-basis:var(--fc-card-w, 86%)}
    .fc-head{align-items:flex-start}
    .fc-title-v2{font-size:22px}
}

/* ---- Match the unified .bts-* product-slider chrome (2026-06-15) ---- */
.fc-eyebrow{font-size:12px;font-weight:800;letter-spacing:1.5px;margin-bottom:0}
.fc-head-text{gap:8px}
.fc-title-v2{font-size:clamp(26px,3vw,32px);text-transform:none;letter-spacing:0;display:inline-block;position:relative;padding-bottom:10px;line-height:1.05}
.fc-title-v2 .a{color:#14296b}
.fc-title-v2 .b{color:#1344b1}
.fc-title-v2::after{content:"";position:absolute;left:0;bottom:0;width:62px;height:3px;background:#fdc700;border-radius:2px}
.fc-arrows{gap:10px}
.fc-arrows button{width:42px;height:42px}
.fc-arrows svg{width:18px;height:18px}