/* remove default slick icon glyphs entirely */
.slick-prev:before,
.slick-next:before {
    content: none !important;
}

/* base arrow styling */
.custom-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 30px;
    height: 48px;
    z-index: 20;
}

/* ======================================
   SLICK FLEX FIX
   Forces equal height slides
   ====================================== */

#slick-auctions .slick-track {
    display: flex !important;
}

#slick-auctions .slick-slide {
    height: auto;
}

#slick-auctions .slick-slide > div {
    height: 100%;
}

/* ======================================
   MOBILE FIRST
   Larger side gutters for more space from cards
   ====================================== */

#slick-auctions {
    padding-left: clamp(44px, 9vw, 64px);
    padding-right: clamp(44px, 9vw, 64px);
}

/* arrows sit well clear of cards */
#slick-auctions .slick-prev.custom-arrow {
    background: url("../images/slick-prev.png") no-repeat center;
    background-size: contain;
    left: 8px;
}

#slick-auctions .slick-next.custom-arrow {
    background: url("../images/slick-next.png") no-repeat center;
    background-size: contain;
    right: 8px;
}

/* ======================================
   DESKTOP RESTORE
   ====================================== */

@media (min-width: 1024px) {
    #slick-auctions {
        padding-left: 0;
        padding-right: 0;
    }

    #slick-auctions .slick-prev.custom-arrow {
        left: -10px;
    }

    #slick-auctions .slick-next.custom-arrow {
        right: -10px;
    }
}

/* ======================================
   OPTIONAL
   Hide arrows when not needed
   ====================================== */

#slick-auctions.no-arrows .custom-arrow {
    display: none !important;
}