/* =============================================================
   Mockito — Best Sellers Slider Styles
   Place in: /assets/css/mockito-best-sellers-slider.css
   (or @import into your main stylesheet)
   ============================================================= */

/* ── Outer section ──────────────────────────────────────────── */
#products.mockito-section {
    overflow: hidden;             /* hide cards that slide out   */
    padding: 60px 24px;
}

/* ── Wrap: position context for arrows ──────────────────────── */
.products-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    outline: none;                /* keyboard focus handled below */
}

.products-wrap:focus-visible {
    box-shadow: 0 0 0 3px var(--mockito-primary, #c8973e);
}

/* ── Scrollable track ────────────────────────────────────────── */
.products-scroll {
    display: flex;
    gap: 24px;
    will-change: transform;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    padding: 8px 4px 16px;        /* room for card shadows        */
}

.products-scroll:active {
    cursor: grabbing;
}

/* ── Individual card — fixed width per breakpoint ───────────── */
.products-scroll .pc {
    flex: 0 0 calc( (100% - 48px) / 3 );   /* 3 cards @ ≥1200 px  */
    min-width: 0;
    transition: transform .3s ease, box-shadow .3s ease;
}

@media ( max-width: 1199px ) {
    .products-scroll .pc {
        flex: 0 0 calc( (100% - 24px) / 2 );  /* 2 cards            */
    }
}

@media ( max-width: 767px ) {
    .products-scroll .pc {
        flex: 0 0 85%;                          /* 1 peeking card     */
    }
}

/* ── Arrow buttons ───────────────────────────────────────────── */
.hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;

    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--mockito-border, rgba(0,0,0,.12));
    background: var(--mockito-white, #fff);
    color: var(--mockito-dark, #1a1a1a);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow: 0 4px 16px rgba(0,0,0,.10);
    transition: background .2s, color .2s, box-shadow .2s, opacity .25s, transform .25s;
}

.hero-arrow:hover {
    background: var(--mockito-primary, #c8973e);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 6px 24px rgba(200, 151, 62, .35);
    transform: translateY(-50%) scale(1.08);
}

.hero-arrow:active {
    transform: translateY(-50%) scale(0.96);
}

.hero-arrow.left  { left:  -20px; }
.hero-arrow.right { right: -20px; }

/* hidden state */
.hero-arrow.is-hidden {
    opacity: 0;
    pointer-events: none;
}

/* tuck arrows in on small screens */
@media ( max-width: 599px ) {
    .hero-arrow.left  { left:  4px; }
    .hero-arrow.right { right: 4px; }
}

/* ── Dots ────────────────────────────────────────────────────── */
.slider-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
}

.slider-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: var(--mockito-silver, #d0d0d0);
    cursor: pointer;
    transition: background .25s, transform .25s, width .25s;
    flex-shrink: 0;
}

.slider-dot:hover {
    background: var(--mockito-primary-light, #d9ab62);
    transform: scale(1.3);
}

.slider-dot.active {
    width: 24px;
    border-radius: 4px;
    background: var(--mockito-primary, #c8973e);
    transform: none;
}

/* ── Card hover lift (optional but nice) ─────────────────────── */
.products-scroll .pc:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,.12);
}