/* ======================================================
   ZDrive Related Products – iOS Optimized
   Author: zdrive
   ====================================================== */

.zdrive-related-wrapper {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
    text-align: center;
}

.zdrive-related-title {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 18px;
}

@media (max-width: 768px) {
    .zdrive-related-title {
        font-size: 32px;
    }
}

/* Swiper */
.zdrive-related-slider .swiper-slide {
    width: 250px;
}

/* Card */
.zdrive-product-card {
    background: #fff;
    border-top: 3px solid #AC8510;
    box-shadow: 0 3px 10px rgba(0,0,0,.06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease;
}

.zdrive-product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

/* Image */
.zdrive-image-wrapper {
    position: relative;
    background: #f8f8f8;
    overflow: hidden;
}

.zdrive-image-wrapper img {
    width: 100%;
    display: block;
}

.hover-img {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .35s ease;
}

.zdrive-product-card:hover .main-img {
    opacity: 0;
}
.zdrive-product-card:hover .hover-img {
    opacity: 1;
}

/* Badge */
.zdrive-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    border: 1px solid #AC8510;
    padding: 3px 7px;
    background: #fff;
    color: #AC8510;
    font-size: 11px;
    font-weight: 700;
}

/* Info */
.zdrive-product-info {
    padding: 12px 10px 16px;
}

.zdrive-product-title {
    font-size: 16px;
    font-weight: 600;
    color: #222;
    display: block;
    margin-bottom: 6px;
}

.zdrive-product-price {
    font-size: 15px;
    font-weight: 700;
    color: #AC8510;
}

/* Button */
.zdrive-view-product {
    display: block;
    margin-top: 10px;
    background: #000;
    color: #fff;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
}

.zdrive-view-product:hover {
    background: #333;
}

/* ======================================================
   ADDED: OUTSIDE ARROWS & OUTSIDE DOTS
   (No existing styles removed)
   ====================================================== */

/* Slider wrap (space for arrows) */
.zdrive-related-slider-wrap {
    position: relative;
    padding: 0 60px;
}

/* Arrows */
.zdrive-related-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    background: #000;
    border-radius: 50%;
    cursor: pointer;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zdrive-related-arrow::after {
    content: '';
    width: 14px;
    height: 14px;
    background: #fff;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

.zdrive-related-prev { left: 0; }
.zdrive-related-next { right: 0; }

.zdrive-related-prev::after {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z'/%3E%3C/svg%3E");
}

.zdrive-related-next::after {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z'/%3E%3C/svg%3E");
}

/* Pagination dots outside */
.zdrive-related-pagination {
    margin-top: 18px;
    text-align: center;
}

.zdrive-related-pagination .swiper-pagination-bullet {
    background: #000;
    opacity: .3;
}

.zdrive-related-pagination .swiper-pagination-bullet-active {
    opacity: 1;
}

/* Mobile tuning */
@media (max-width: 768px) {
    .zdrive-related-slider-wrap {
        padding: 0 40px;
    }

    .zdrive-related-arrow {
        width: 34px;
        height: 34px;
    }
}



/* ======================================================
   MOBILE-ONLY ARROWS (DESKTOP DISABLED)
   ====================================================== */

/* Hide arrows on desktop */
@media (min-width: 769px) {
    .zdrive-related-arrow {
        display: none !important;
    }
}

/* Show arrows only on mobile */
@media (max-width: 768px) {
    .zdrive-related-arrow {
        display: flex;
    }
}