/*
 * PRODUCT IMAGE HOVER NAVIGATION ARROWS
 * Luxury e-commerce style matching ynakim.com aesthetic
 *
 * Features:
 * - Prev/Next arrows appear on image hover
 * - Minimalist design with subtle backgrounds
 * - Smooth fade-in animations
 * - Positioned inside image container
 * - Works with Swiper.js image galleries
 */

/* ============================================
   ARROW CONTAINER - Position relative wrapper
   ============================================ */

.product-grid .item-box .picture,
.product-grid .item-box .thumbnail .picture {
    position: relative !important;
}

/* ============================================
   NAVIGATION ARROWS - Hidden by default
   ============================================ */

.product-grid .item-box .picture .swiper-button-prev,
.product-grid .item-box .picture .swiper-button-next {
    position: absolute !important;
    bottom: 12px !important; /* Align with pagination dots */
    top: auto !important;
    transform: none !important;
    width: 48px !important; /* Increased from 36px for better click target */
    height: 48px !important; /* Meets WCAG touch target minimum */
    margin-top: 0 !important;
    z-index: 25 !important; /* Increased from 10 to prevent parent link click-through */
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* Transparent styling */
    background: transparent !important;
    border: none !important;
    border-radius: 50% !important;
    box-shadow: none !important;

    /* Smooth transitions */
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important; /* Prevent clicks when hidden */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Previous arrow positioning */
.product-grid .item-box .picture .swiper-button-prev {
    left: -8px !important; /* Outside the image by 8px */
}

/* Next arrow positioning */
.product-grid .item-box .picture .swiper-button-next {
    right: -8px !important; /* Outside the image by 8px */
}

/* ============================================
   ARROW ICONS - Classic arrows with transparent background
   ============================================ */

.product-grid .item-box .picture .swiper-button-prev::after,
.product-grid .item-box .picture .swiper-button-next::after {
    font-family: 'FontAwesome' !important;
    font-size: 24px !important;
    color: var(--grey-black) !important; /* Grey-black color */
    opacity: 0.5 !important; /* 50% opacity for subtle appearance */
    font-weight: normal !important;
    line-height: 1 !important;
}

.product-grid .item-box .picture .swiper-button-prev::after {
    content: '\f060' !important; /* FontAwesome arrow-left (classic) */
}

.product-grid .item-box .picture .swiper-button-next::after {
    content: '\f061' !important; /* FontAwesome arrow-right (classic) */
}

/* ============================================
   PAGINATION DOTS - Hidden by default
   ============================================ */

.product-grid .item-box .picture .swiper-pagination,
.product-grid .item-box .thumbnail .picture .swiper-pagination {
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ============================================
   HOVER BEHAVIOR - Fade in arrows and dots
   ============================================ */

.product-grid .item-box .picture:hover .swiper-button-prev,
.product-grid .item-box .picture:hover .swiper-button-next,
.product-grid .item-box .picture:hover .swiper-pagination,
.product-grid .item-box .thumbnail:hover .swiper-button-prev,
.product-grid .item-box .thumbnail:hover .swiper-button-next,
.product-grid .item-box .thumbnail:hover .swiper-pagination {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important; /* Enable clicks when visible */
}

/* ============================================
   HOVER EFFECTS - Arrow color change on hover (only for enabled arrows)
   ============================================ */

.product-grid .item-box .picture .swiper-button-prev:not(.swiper-button-disabled):hover::after,
.product-grid .item-box .picture .swiper-button-next:not(.swiper-button-disabled):hover::after {
    color: var(--grey-black) !important; /* Grey-black color on arrow hover */
    opacity: 1 !important; /* Full opacity on hover */
}

/* ============================================
   DISABLED STATE - Show disabled arrows on hover but prevent clicks and hover effect
   ============================================ */

.product-grid .item-box .picture .swiper-button-disabled {
    cursor: default !important; /* Change cursor to indicate not clickable */
    pointer-events: none !important; /* Prevent all clicks */
}

.product-grid .item-box .picture .swiper-button-disabled::after {
    color: rgba(37, 37, 37, 0.1) !important; /* Very light/disabled appearance - stays same on hover */
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

/* Tablet - maintain accessible touch targets */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .product-grid .item-box .picture .swiper-button-prev,
    .product-grid .item-box .picture .swiper-button-next {
        width: 44px !important; /* Increased from 32px - still meets iOS 44px minimum */
        height: 44px !important;
    }

    .product-grid .item-box .picture .swiper-button-prev::after,
    .product-grid .item-box .picture .swiper-button-next::after {
        font-size: 20px !important; /* Increased from 14px for better visibility */
    }

    .product-grid .item-box .picture .swiper-button-prev {
        left: -8px !important;
    }

    .product-grid .item-box .picture .swiper-button-next {
        right: -8px !important;
    }
}

/* Mobile - hide arrows (touch swipe works better) */
@media (max-width: 767.98px) {
    .product-grid .item-box .picture .swiper-button-prev,
    .product-grid .item-box .picture .swiper-button-next {
        display: none !important;
    }
}