/* ==========================================================
   Moddoz Gallery
   Base
========================================================== */

/* ---------- Layout ---------- */

.moddoz-product-gallery{

    display:flex;
    flex-direction:row-reverse;
    justify-content:flex-end;
    gap:12px;

}

/* ---------- Main ---------- */

.moddoz-gallery-main{

    overflow:hidden;

    border:1px solid #ececec;

    border-radius:12px;

    background:#fff;

}

.moddoz-gallery-main .swiper{

    width:100%;
    height:100%;

}

.moddoz-gallery-main .swiper-slide{

    display:flex;

    justify-content:center;

    align-items:center;

}

.moddoz-gallery-main img{

    width:100%;
    height:100%;

    object-fit:contain;

    display:block;

}

/* ---------- Thumbnails ---------- */

.moddoz-gallery-thumbs{

    display:flex;

    flex-direction:column;

    align-items:center;

}

.moddoz-gallery-thumbs .swiper{

    flex:1;

    width:100%;

}

.moddoz-gallery-thumbs .swiper-slide{

    cursor:pointer;

}

.moddoz-gallery-thumbs img{

    width:100%;

    height:100%;

    object-fit:cover;

    border-radius:12px;

    transition:.25s;

}

.moddoz-gallery-thumbs img:hover{

    border-color:#ef4056;

}

.moddoz-gallery-thumbs .swiper-slide-thumb-active img{

    border:2px solid #ef4056;

    box-shadow:0 4px 12px rgba(239,64,86,.18);

}

/* ---------- Navigation ---------- */

/* .moddoz-gallery-thumbs .swiper-button-prev,
.moddoz-gallery-thumbs .swiper-button-next{

    position:relative;

    top:auto;

    left:auto;

    right:auto;

    bottom:auto;

    transform:none;

    rotate:90deg;

    width:30px;

    height:30px;

    margin:8px 0;

    border-radius:50%;

    background:#83d9fe;

    box-shadow:0 2px 8px rgba(0,0,0,.10);

    --swiper-navigation-size:20px;

    --swiper-theme-color:#fff;

} */

/* ---------- Scrollbar ---------- */

.moddoz-gallery-thumbs .swiper-scrollbar{

    display:none;

}

/* ==========================================================
   Mobile Small
   0 → 479
========================================================== */

@media (max-width:479px){

    .moddoz-product-gallery{

        display:block;

    }

    .moddoz-gallery-main{

        width:100%;

        aspect-ratio:3/4;

    }

    .moddoz-gallery-thumbs{

        display:block;

        width:100%;

        height:auto;

        margin-top:12px;
        
        position: relative;

    }

    .moddoz-gallery-thumbs .swiper{

        width:100%;

        height:96px;

    }

    .moddoz-gallery-thumbs .swiper-slide{

        width:72px;

        height:96px;

    }
    
          /*خودم تغییر دادم*/
    .woocommerce-js div.product div.summary{
        margin-top: 2em;
    }
    
    .moddoz-gallery-thumbs .swiper-button-prev{
        position:absolute;
        top:50%;
        left:-15px;
        transform:translateY(-50%);
        rotate:0deg;
        margin:0;
        
        width:25px;

        height:25px;
        
        border-radius:50%;
    
        background:#83d9fe;
    
        box-shadow:0 2px 8px rgba(0,0,0,.10);
    
        --swiper-navigation-size:20px;
    
        --swiper-theme-color:#fff;
    }
    
    .moddoz-gallery-thumbs .swiper-button-next{
        position:absolute;
        top:50%;
        right:-15px;
        left:auto;
        transform:translateY(-50%);
        rotate:0deg;
        margin:0;
        
        width:25px;

        height:25px;
        
        border-radius:50%;
    
        background:#83d9fe;
    
        box-shadow:0 2px 8px rgba(0,0,0,.10);
    
        --swiper-navigation-size:20px;
    
        --swiper-theme-color:#fff;
    }

}

/* ==========================================================
   Mobile Large
   480 → 735
========================================================== */

@media (min-width:480px) and (max-width:735px){

    .moddoz-product-gallery{

        display:block;

    }

    .moddoz-gallery-main{

        width:100%;

        aspect-ratio:3/4;

    }

    .moddoz-gallery-thumbs{

        display:block;

        width:100%;

        height:auto;

        margin-top:12px;
        
        position: relative;

    }

    .moddoz-gallery-thumbs .swiper{

        width:100%;

        height:96px;

    }

    .moddoz-gallery-thumbs .swiper-slide{

        width:72px;

        height:96px;

    }
    
          /*خودم تغییر دادم*/
    .woocommerce-js div.product div.summary{
        margin-top: 2em;
    }
    
    .moddoz-gallery-thumbs .swiper-button-prev{
        position:absolute;
        top:50%;
        left:-30px;
        transform:translateY(-50%);
        rotate:0deg;
        margin:0;
        
        width:25px;

        height:25px;
        
        border-radius:50%;
    
        background:#83d9fe;
    
        box-shadow:0 2px 8px rgba(0,0,0,.10);
    
        --swiper-navigation-size:20px;
    
        --swiper-theme-color:#fff;
    }
    
    .moddoz-gallery-thumbs .swiper-button-next{
        position:absolute;
        top:50%;
        right:-30px;
        left:auto;
        transform:translateY(-50%);
        rotate:0deg;
        margin:0;
        
        width:25px;

        height:25px;
        
        border-radius:50%;
    
        background:#83d9fe;
    
        box-shadow:0 2px 8px rgba(0,0,0,.10);
    
        --swiper-navigation-size:20px;
    
        --swiper-theme-color:#fff;
    }

}

/* ==========================================================
   Tablet
   736 → 979
========================================================== */

@media (min-width:736px) and (max-width:979px){

    .moddoz-product-gallery{

        display:block;

    }

    .moddoz-gallery-main{

        width:100%;

        aspect-ratio:3/4;

    }

    .moddoz-gallery-thumbs{

        display:block;

        width:100%;

        height:auto;

        margin-top:12px;
        
        position: relative;

    }

    .moddoz-gallery-thumbs .swiper{

        width:100%;

        height:96px;

    }

    .moddoz-gallery-thumbs .swiper-slide{

        width:72px;

        height:96px;

    }
    
          /*خودم تغییر دادم*/
    .ast-woocommerce-container div.product div.summary{
        width: 100% !important;
    }
    
          /*خودم تغییر دادم*/
    .woocommerce-js div.product div.summary{
        margin-top: 2em;
    }
    
    .moddoz-gallery-thumbs .swiper-button-prev{
        position:absolute;
        top:50%;
        left:-30px;
        transform:translateY(-50%);
        margin:0;
        
        width:25px;

        height:25px;
        
        border-radius:50%;
    
        background:#83d9fe;
    
        box-shadow:0 2px 8px rgba(0,0,0,.10);
    
        --swiper-navigation-size:20px;
    
        --swiper-theme-color:#fff;
    }
    
    .moddoz-gallery-thumbs .swiper-button-next{
        position:absolute;
        top:50%;
        right:-30px;
        left:auto;
        transform:translateY(-50%);
        margin:0;
        
        width:25px;

        height:25px;
        
        border-radius:50%;
    
        background:#83d9fe;
    
        box-shadow:0 2px 8px rgba(0,0,0,.10);
    
        --swiper-navigation-size:20px;
    
        --swiper-theme-color:#fff;
    }

}

/* ==========================================================
   Small Desktop
   980 → 1199
========================================================== */

@media (min-width:980px) and (max-width:1199px){

          /*خودم تغییر دادم*/
    .ast-separate-container.single-product .ast-article-single{

        display:grid;

        grid-template-columns:55% 45%;

    }
    
          /*خودم تغییر دادم*/
    .ast-woocommerce-container div.product div.summary{

        width:100%;

        padding-right:30px;

    }
    
          /*خودم تغییر دادم*/
    .woocommerce-page div.product .woocommerce-tabs{

        grid-column:1 / span 2;

    }
    
          /*خودم تغییر دادم*/
    .ast-woocommerce-container div.product div.summary{
        width: 100% !important;
    }

    .moddoz-gallery-main{

        width:460px;

        height:620px;

    }

    .moddoz-gallery-thumbs{

        width:90px;

        height:620px;

    }

    .moddoz-gallery-thumbs .swiper-slide{

        height:132px;

    }
    
    .moddoz-gallery-thumbs .swiper-button-prev,
    .moddoz-gallery-thumbs .swiper-button-next{
    
        position:relative;
    
        top:auto;
    
        left:auto;
    
        right:auto;
    
        bottom:auto;
    
        transform:none;
    
        rotate:90deg;
    
        width:30px;
    
        height:30px;
    
        margin:8px 0;
    
        border-radius:50%;
    
        background:#83d9fe;
    
        box-shadow:0 2px 8px rgba(0,0,0,.10);
    
        --swiper-navigation-size:20px;
    
        --swiper-theme-color:#fff;
    
    }

}

/* ==========================================================
   Desktop
   1200+
========================================================== */

@media (min-width:1200px){

          /*خودم تغییر دادم*/
    .ast-separate-container.single-product .ast-article-single{

        display:grid;

        grid-template-columns:50% 50%;

    }
          /*خودم تغییر دادم*/
    .ast-woocommerce-container div.product div.summary{

        width:100%;

        padding-right:30px;

    }

          /*خودم تغییر دادم*/
    .woocommerce-page div.product .woocommerce-tabs{

        grid-column:1 / span 2;

    }
    
          /*خودم تغییر دادم*/
    .ast-woocommerce-container div.product div.summary{
        width: 100% !important;
    }


    .moddoz-gallery-main{

        width:520px;

        height:700px;

    }

    .moddoz-gallery-thumbs{

        width:96px;

        height:700px;

    }

    .moddoz-gallery-thumbs .swiper-slide{

        height:150px;

    }
    
    .moddoz-gallery-thumbs .swiper-button-prev,
    .moddoz-gallery-thumbs .swiper-button-next{
    
        position:relative;
    
        top:auto;
    
        left:auto;
    
        right:auto;
    
        bottom:auto;
    
        transform:none;
    
        rotate:90deg;
    
        width:30px;
    
        height:30px;
    
        margin:8px 0;
    
        border-radius:50%;
    
        background:#83d9fe;
    
        box-shadow:0 2px 8px rgba(0,0,0,.10);
    
        --swiper-navigation-size:20px;
    
        --swiper-theme-color:#fff;
    
    }

}


          /*خودم تغییر دادم*/
@media (max-width: 600px) {
    .woocommerce #content div.product .woocommerce-tabs ul.tabs li, .woocommerce-page #content div.product .woocommerce-tabs ul.tabs li
     {
            display: inline-block;
            margin-left: 20px;
        }
    }