/*
 * MarketBashi M.B — Product Gallery
 * Version 0.1.0
 * Mobile-first / Square product images
 */

.woocommerce div.product div.images {
    position: relative;
    min-width: 0;
}

/* Main image */

.woocommerce div.product div.images
.woocommerce-product-gallery__wrapper {
    border-radius: 18px;
    background: var(--mb-surface-soft, #f7f7fa);
}

.woocommerce div.product div.images
.woocommerce-product-gallery__image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    border-radius: 18px;
}

/* Gallery navigation thumbnails */

.woocommerce div.product div.images .flex-control-thumbs {
    display: flex;
    flex-wrap: nowrap;
    gap: 9px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    padding: 12px 2px;
    margin: 0;
    list-style: none;
}

.woocommerce div.product div.images .flex-control-thumbs li {
    flex: 0 0 65px;
    float: none;
    width: 65px;
    padding: 0;
}

.woocommerce div.product div.images
.flex-control-thumbs li img {
    width: 65px;
    height: 65px;
    object-fit: contain;
    border: 1px solid var(--mb-border, #e7e7ee);
    border-radius: 10px;
    background: #fff;
    opacity: 0.65;
    transition: opacity 0.2s ease, border-color 0.2s ease;
}

.woocommerce div.product div.images
.flex-control-thumbs li img.flex-active,
.woocommerce div.product div.images
.flex-control-thumbs li img:hover {
    opacity: 1;
    border-color: var(--mb-primary, #8128d8);
}

/* WooCommerce zoom trigger */

.woocommerce div.product
.woocommerce-product-gallery__trigger {
    top: 12px;
    left: 12px;
    right: auto;
    z-index: 3;
}

/* Desktop refinement */

@media (min-width: 768px) {
    .woocommerce div.product div.images
    .woocommerce-product-gallery__wrapper {
        border-radius: 22px;
    }

    .woocommerce div.product div.images
    .flex-control-thumbs li {
        flex-basis: 76px;
        width: 76px;
    }

    .woocommerce div.product div.images
    .flex-control-thumbs li img {
        width: 76px;
        height: 76px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .woocommerce div.product div.images
    .flex-control-thumbs li img {
        transition: none;
    }
}

/* =====================================
   M.B Gallery Thumbnail Navigation
   ===================================== */

.woocommerce div.product div.images
.flex-control-nav.flex-control-thumbs {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 8px 2px;
    margin: 0;
    list-style: none;
    direction: rtl;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
}

.woocommerce div.product div.images
.flex-control-nav.flex-control-thumbs::-webkit-scrollbar {
    display: none;
}

.woocommerce div.product div.images
.flex-control-nav.flex-control-thumbs li {
    flex: 0 0 66px !important;
    width: 66px !important;
    float: none !important;
    margin: 0 !important;
}

.woocommerce div.product div.images
.flex-control-nav.flex-control-thumbs li img {
    display: block;
    width: 66px;
    height: 66px;
    object-fit: contain;
    border: 2px solid transparent;
    border-radius: 11px;
    background: var(--mb-surface-soft, #f7f7fa);
    opacity: 0.7;
    cursor: pointer;
}

.woocommerce div.product div.images
.flex-control-nav.flex-control-thumbs li img.flex-active {
    border-color: var(--mb-primary, #8128d8);
    opacity: 1;
}

/* Navigation arrows */

.mb-gallery-thumbnails-container {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

.mb-gallery-thumbnails-viewport {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.mb-gallery-thumb-arrow {
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    width: 38px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--mb-border, #e7e7ee);
    border-radius: 10px;
    background: #fff;
    color: var(--mb-primary, #8128d8);
    cursor: pointer;
font-size: 24px;
font-weight: 600;
}

.mb-gallery-thumb-arrow:disabled {
    opacity: 0.3;
    cursor: default;
}


/* =========================================
   MarketBashi M.B — Fullscreen Thumbnails
   ========================================= */

.pswp .mb-pswp-thumbnails {
    position: absolute;
    right: 0;
    bottom: 18px;
    left: 0;
    z-index: 100;
    width: 100%;
    padding: 10px 12px;
    background: rgba(18, 16, 24, 0.82);
    box-sizing: border-box;
}

.pswp .mb-pswp-thumbnails-track {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 2px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
}

.pswp .mb-pswp-thumbnails-track::-webkit-scrollbar {
    display: none;
}

.pswp .mb-pswp-thumb {
    display: block;
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    padding: 3px;
    border: 2px solid transparent;
    border-radius: 10px;
    background: #fff;
    opacity: 0.7;
    cursor: pointer;
    box-sizing: border-box;
}

.pswp .mb-pswp-thumb.is-active {
    border-color: #a855f7;
    opacity: 1;
}

.pswp .mb-pswp-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 6px;
    pointer-events: none;
}

@media (min-width: 768px) {
    .pswp .mb-pswp-thumbnails {
        padding-inline: 24px;
    }

    .pswp .mb-pswp-thumb {
        flex-basis: 76px;
        width: 76px;
        height: 76px;
    }
}

/* MarketBashi M.B — Desktop Single Product Layout v0.2.0
 * Constrain the page to the home-page container and gallery to 600px.
 * Keep mobile behavior, thumbnail scrolling and PhotoSwipe unchanged.
 */
@media (min-width: 768px) {
    body.single-product .content-area {
        width: calc(100% - 2 * var(--mb-page-gutter, 24px));
        max-width: var(--mb-container-width, 1280px);
        min-width: 0;
        margin-inline: auto;
    }

    body.single-product .content-area .site-main {
        width: 100%;
        min-width: 0;
    }

    body.single-product .woocommerce div.product div.images {
        width: 48%;
        max-width: 600px;
        min-width: 0;
        float: right;
        margin-inline: 0;
    }

    body.single-product .woocommerce div.product div.summary {
        width: 48%;
        max-width: 100%;
        min-width: 0;
        float: left;
    }

    body.single-product .woocommerce div.product div.images
    .woocommerce-product-gallery__wrapper,
    body.single-product .woocommerce div.product div.images
    .flex-viewport {
        max-width: 600px;
    }

    body.single-product .woocommerce div.product div.images
    .woocommerce-product-gallery__image img {
        max-height: 600px;
        object-fit: contain;
    }
}

/* v1.0.6 — real WooCommerce markup: the gallery IS div.images, not nested inside it. */
body.single-product .woocommerce-product-gallery.mbpg-layout-repaired .flex-viewport {
    height: auto !important;
    overflow: hidden !important;
}
body.single-product .woocommerce-product-gallery.mbpg-layout-repaired .woocommerce-product-gallery__wrapper {
    width: 100% !important;
    transform: none !important;
    transition: none !important;
    display: block !important;
    height: auto !important;
}
body.single-product .woocommerce-product-gallery.mbpg-layout-repaired .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image {
    display: none !important;
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    height: auto !important;
}
body.single-product .woocommerce-product-gallery.mbpg-layout-repaired .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image.mbpg-current-slide {
    display: block !important;
}
/* Center the strip when all thumbnails fit; preserve horizontal scrolling for larger galleries. */
#photoswipe-fullscreen-dialog.pswp .mb-pswp-thumbnails-track {
    justify-content: safe center;
    margin-inline: auto;
}
/* Keep fullscreen product photos comfortably inside the usable screen area.
   Do not change PhotoSwipe transforms (managed by PhotoSwipe itself). */
#photoswipe-fullscreen-dialog.pswp .pswp__zoom-wrap .pswp__img:not(.pswp__img--placeholder) {
    max-width: min(80vw, 760px) !important;
    max-height: calc(100vh - 190px) !important;
    object-fit: contain !important;
}
@media (max-width: 767px) {
  #photoswipe-fullscreen-dialog.pswp .pswp__zoom-wrap .pswp__img:not(.pswp__img--placeholder) {
      max-width: 90vw !important;
      max-height: calc(100vh - 145px) !important;
  }
}

/* v1.0.5 — guarantee the repaired slide is laid out in the *actual* viewport. */
body.single-product .woocommerce-product-gallery.mbpg-layout-repaired,
body.single-product .woocommerce-product-gallery.mbpg-layout-repaired .flex-viewport {
    direction: ltr !important;
    width: 100% !important;
    max-width: 100% !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
}
body.single-product .woocommerce-product-gallery.mbpg-layout-repaired .woocommerce-product-gallery__wrapper {
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
}
body.single-product .woocommerce-product-gallery.mbpg-layout-repaired .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image {
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
}

/* v1.0.6 CSS selector fix; full-screen rules above intentionally unchanged. */