/* ============================================================================
 * File: wp-content/plugins/ccp-featured-products-carousel/assets/ccp-carousel.css
 * (Frontend carousel styles)
 *
 * v1.3.1 centering fix:
 * - REMOVED from .slider-track: width:90%; margin-right:2rem !important;
 *   position:relative; left:-2rem  — these shifted the track relative to the
 *   window and broke the JS centering math (rem varies per device, which is
 *   why some phones looked centered and others didn't).
 * - .product-card--active keeps margin-inline:2rem for breathing room; the JS
 *   now measures slide positions live AFTER the active class is applied, so
 *   the margin is always accounted for.
 * - Mobile flex-basis values adjusted (82%→74%, 60%→54%) to preserve the same
 *   visual card size that previously resulted from the track width:90% hack.
 * - Added touch-action:pan-y so horizontal drags are handled by the carousel
 *   while vertical page scrolling still works.
 * ========================================================================== */
:root { --yellow:#ffdf20; --yellow-hover:#f3cf00; --text-main:#111111; --text-muted:#7a7a7a; --bg-page:#f5f5f7; --bg-section:#f5f5f7; --card-bg:#ffffff; --shadow-card:0 16px 30px rgba(0,0,0,.18); --shadow-card-strong:0 22px 40px rgba(0,0,0,.28); --radius-card:18px; }
.featured-section{background:var(--bg-section);padding:50px 0 70px}
.featured-inner{max-width:90%;margin:0 auto}
.featured-title{text-align:center;font-size:28px;font-weight:800;margin:0 0 24px;color:var(--text-main)}
.slider{display:flex;align-items:center;gap:10px}
.slider-window{flex:1;min-width:0;overflow:hidden;cursor:grab;position:relative;padding-block:3rem;touch-action:pan-y}
.slider-window.slider-window--dragging{cursor:grabbing}
.slider-track{display:flex;gap:16px;padding:10px 0 16px;transform:translateX(0);will-change:transform;transition:transform .45s ease}
.slider-track--no-transition{transition:none !important}
.slider-arrow{border:none;background:#fff;width:38px;height:38px;border-radius:50%;box-shadow:0 10px 18px rgba(0,0,0,.18);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;color:var(--text-main);transition:background .15s ease,transform .15s ease,box-shadow .15s ease,opacity .15s ease;flex:0 0 auto}
.slider-arrow:hover{background:#fafafa;transform:translateY(-1px);box-shadow:0 14px 24px rgba(0,0,0,.22)}
.product-card{flex:0 0 260px;background:var(--card-bg);border-radius:var(--radius-card);overflow:hidden;box-shadow:rgba(99,99,99,.2) 0 2px 8px 0;display:flex;flex-direction:column;transform:scale(.95);opacity:.85;transition:transform .35s ease,box-shadow .35s ease,opacity .35s ease}
.product-card--active{transform:scale(1.3) translateY(-4px);box-shadow:rgba(99,99,99,.2) 0 2px 8px 0;opacity:1;z-index:2;margin-inline:2rem}
.product-img-wrap {
    position: relative;
    height: 200px;
    overflow: hidden;
    padding: 1rem;
}
.product-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.product-body {
    padding: 16px 16px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: center;
    align-items: center;
}
.product-title{font-size:15px;font-weight:700;color:var(--text-main)}
.product-meta{font-size:12px;color:var(--text-muted)}
.product-meta a {
    background-color: black;
    color: white;
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 2rem;
    display: none;
}
.product-btn-wrap{padding:0 16px 16px;margin-top:auto}
.product-btn{width:100%;border:none;border-radius:999px;padding:10px 0;font-size:1rem;font-weight:700;cursor:pointer;background:var(--yellow);color:#000;transition:background .18s ease,box-shadow .18s ease,transform .15s ease;box-shadow:0 8px 16px rgba(0,0,0,.16);text-align:center;text-decoration:none;display:inline-block}
.product-btn:hover{background:var(--yellow-hover);box-shadow:0 12px 20px rgba(0,0,0,.22);transform:translateY(-1px)}
.slider-dots{margin-top:14px;display:flex;justify-content:center;gap:8px}
.slider-dot{width:9px;height:9px;border-radius:999px;background:#d0d0d0;cursor:pointer;border:none;padding:0;transition:transform .18s ease,background .18s ease,width .18s ease}
.slider-dot--active{width:18px;background:var(--yellow);transform:translateY(-1px)}
@media (max-width:1200px){.product-card{flex-basis:240px}}
@media (max-width:900px){.slider{gap:6px}.product-card{flex-basis:54%}}
@media (max-width:640px){.featured-title{font-size:22px}.slider-arrow{display:none}.product-card{flex-basis:74%}}