/* =========================================================
   ARYAE GALLERY SLIDER
========================================================= */

/* Main Slider */
.ar-product-gallery-container .aryae-gallery-slider{
    width:100%;
    max-width:100%;
    min-width:0;
    overflow:hidden;
    position:relative;
}


/* Swiper Wrappers */
.ar-product-gallery-container .aryae-gallery-slider .swiper-wrapper,
.ar-product-gallery-container .aryae-gallery-slider .swiper-slide{
    min-width:0;
}


/* Gallery Item */
.ar-product-gallery-container .aryae-gallery-item {
    width:100%;
    min-width:0;
    overflow:hidden;
    display:flex;
    justify-content:center;
    align-items:center;
}

/* =========================================================
   CUSTOM CONTROLS CONTAINER WRAPPER
========================================================= */
.ar-product-gallery-container .aryae-slider-controls {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Spreads components evenly: Left, Center, Right */
    width: 100%;
    margin-top: 16px;              /* Uniform spacing below your slider content image */
    position: relative;
    box-sizing: border-box;
}

/* =========================================================
   IMAGE
========================================================= */

.ar-product-gallery-container .aryae-gallery-image {
    height: auto !important;
    max-height: 400px !important;
    width:auto !important;
    max-width:100% !important;
    display:block;
    object-fit:contain;
    border-radius: var(--radius-lg);
}

/* =========================================================
   NAVIGATION BUTTONS
========================================================= */

.ar-product-gallery-container .aryae-gallery-slider .swiper-button-prev,
.ar-product-gallery-container .aryae-gallery-slider .swiper-button-next {
    position: static !important;    /* CRITICAL: Overrides Swiper absolute floating layout trap */
    margin-top: 0 !important;       /* CRITICAL: Removes Swiper structural transform offsets */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid #e0e0e0;
    background-color: var(--color-off-white-1);
    color: #000000;
    transition: all 0.3s ease;
}

/* Remove default arrow pseudo-element scaling offsets */
.ar-product-gallery-container .aryae-gallery-slider .swiper-button-prev::after,
.ar-product-gallery-container .aryae-gallery-slider .swiper-button-next::after {
    font-size: 10px;
    font-weight: 700;
}

/* Hover States */
.ar-product-gallery-container .aryae-gallery-slider .swiper-button-prev:hover,
.ar-product-gallery-container .aryae-gallery-slider .swiper-button-next:hover {
    background-color: var(--color-sand-1);
}

/* =========================================================
   PAGINATION
========================================================= */

.ar-product-gallery-container .aryae-gallery-slider .swiper-pagination {
    position: relative !important;
    width: auto !important;         /* CRITICAL: Shrinks element boundaries so it sits in the middle */
    margin-top: 0 !important;       /* Clean layout assignment handled by wrapper parent instead */
    bottom: auto !important;
    left: auto !important;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* Pagination Dot */
.ar-product-gallery-container .aryae-gallery-slider .swiper-pagination-bullet{
    align-items:center;
    justify-content:center;
    display:flex;
    width:7px;
    height:7px;
    padding:0;
    border-radius:50%;
    border:1px solid #e0e0e0;
    background-color:var(--color-sand-2);
    cursor:pointer;
    opacity:1;
    transition:all 0.3s ease;
}


/* Hover */
.ar-product-gallery-container .aryae-gallery-slider .swiper-pagination-bullet:hover{
    background-color:var(--color-sand-1);
}


/* Active */
.ar-product-gallery-container .aryae-gallery-slider .swiper-pagination-bullet-active{
    background-color:var(--color-sand-1);
    width:10px;
    height:10px;
}


/* =========================================================
   GENERATEBLOCKS / FLEXBOX FIX
========================================================= */

.gb-container,
.gb-grid-column{
    min-width:0;
}