/* ===== Mconnect_EoImport — homepage Collection product sliders =====
   Ported verbatim from storefront-mockup/homepage-final-v2.html (.bts-section bts-v2).
   Carousel: 4 cards visible desktop, 2 tablet, 1 mobile — horizontal scroll-snap.
*/

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

/* ---------- head ---------- */
.bts-head{display:flex;align-items:center;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.bts-head-text{display:block}
.bts-eyebrow{display:block;color:#bc1212;font-size:12px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:8px}
.bts-title-v2{font-size:clamp(26px,3vw,32px);font-weight:800;display:inline-block;position:relative;padding-bottom:10px;margin:0;text-transform:none;letter-spacing:0;line-height:1.05}
.bts-title-v2 .a{color:#14296b}
.bts-title-v2 .b{color:#1344b1}
.bts-title-v2::after{content:"";position:absolute;left:0;bottom:0;width:62px;height:3px;background:#fdc700;border-radius:2px}

.bts-arrows{display:flex;gap:10px;margin-left:auto}
.bts-arrows button{width:42px;height:42px;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}
.bts-arrows button:hover:not(:disabled){border-color:#bc1212;background:#fdecec}
.bts-arrows button:disabled{opacity:.35;cursor:default;border-color:#e6e9ef;background:#fff}
.bts-arrows svg{width:18px;height:18px;display:block}

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

.bts-grid{
    display:inline-flex;
    flex-wrap:nowrap;
    gap:var(--bts-gap);
    min-width:100%;
    align-items:stretch;
}

/* ---------- card ----------
   Width = JS-set --bts-card-w (pixel-perfect 3.5 per view) with a calc()
   fallback. 3.5 visible = 3 full cards + a 50% peek of the next one, which
   makes the carousel feel "scrollable" at a glance. */
.bts-card{
    flex:0 0 var(--bts-card-w, calc((100% - var(--bts-gap) * 3) / 3.5));
    scroll-snap-align:start;
    background:#fff;
    border:1px solid #e6e9ef;
    border-radius:10px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    transition:border-color .15s,box-shadow .15s;
    text-decoration:none;
    color:inherit;
}
.bts-card:hover{border-color:#1344b1;box-shadow:0 6px 18px rgba(20,41,107,.10)}

.bts-photo{position:relative;aspect-ratio:4/3;background:#f3f5f9;overflow:hidden}
.bts-photo img{width:100%;height:100%;object-fit:contain;display:block;padding:10px;background:#fff;box-sizing:border-box}
.bts-photo-empty{width:100%;height:100%;background:linear-gradient(135deg,#e7eaf3,#cfd5e6)}
.bts-tag{position:absolute;top:10px;right:10px;z-index:2;background:#1344b1;color:#fff;font-size:15px;font-weight:700;padding:3px 9px;border-radius:4px;text-transform:none;letter-spacing:0;line-height:1.6}
/* "NEW" badge for dynamic Collections (Hybrid New Arrivals) — products ≤ 40 days old */
.bts-tag.bts-tag-new{background:#bc1212;text-transform:uppercase;letter-spacing:.6px;font-weight:800;padding:3px 10px}

.bts-body{padding:14px 14px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.bts-name{font-size:15px;font-weight:700;line-height:1.35;color:#14296b;min-height:60px;margin:0;
          display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bts-name a{color:#14296b;text-decoration:none}
.bts-name a:hover{color:#1344b1}

.bts-rating{display:flex;align-items:center;gap:6px;font-size:12px}
.bts-rating .stars{color:#cbd2de;letter-spacing:1px}
.bts-rating .count{color:#6b7280}

.bts-price{font-size:18px;font-weight:800;color:#14296b}

.bts-bottom{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:4px}
.bts-add{appearance:none;border:2px solid #1344b1;box-sizing:border-box;background:#fff;color:#1344b1;font-weight:700;font-size:13px;padding:9px 16px;border-radius:8px;cursor:pointer;transition:background .15s,color .15s;align-self:auto;margin:0}
.bts-add:hover{background:#1344b1;color:#fff}
.bts-add-form{margin:0;display:inline-flex}

.bts-actions{display:flex;gap:12px;margin-top:0;margin-left:auto}
.bts-actions a,.bts-actions button{display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:0;cursor:pointer;color:#6b7280;font-size:10px;text-transform:uppercase;text-decoration:none;padding:0}
.bts-actions svg{width:18px;height:18px}
.bts-actions a:hover,.bts-actions button:hover{color:#1344b1}

/* ---------- explore CTA below the grid ---------- */
.bts-explore{text-align:center;margin-top:24px}
.bts-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}
.bts-btn:hover{background:#0f9447;color:#fff;text-decoration:none}

/* ----- responsive (also peek: 2.3 cards on tablet, 1.2 on mobile) ----- */
@media(max-width:960px){
    .bts-card{flex-basis:var(--bts-card-w, calc((100% - var(--bts-gap) * 2) / 2.3))}
}
@media(max-width:640px){
    .bts-card{flex-basis:var(--bts-card-w, 82%)}
    .bts-head{align-items:flex-start}
    .bts-title-v2{font-size:24px}
}