/* =============================================================
   Vkard Product Gallery — frontend styles
   ============================================================= */

:root {
    --vkard-blue:       #0EA5E9;
    --vkard-blue-light: #EFF9FF;
    --vkard-border:     #E2E8F0;
    --vkard-text:       #1E293B;
    --vkard-muted:      #64748B;
    --vkard-radius:     12px;
    --vkard-radius-sm:  8px;
}

/* =============================================================
   GALLERY - main image on top, horizontal thumbnails below
   ============================================================= */

.vkard-product-gallery-widget,
.vkard-product-gallery-widget * {
    box-sizing: border-box !important;
}

.vkard-product-gallery-widget {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.vkard-product-gallery-widget .vkard-gallery-active.woocommerce-product-gallery,
.vkard-product-gallery-widget div.woocommerce-product-gallery.vkard-gallery-active {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    /* Override WooCommerce woocommerce-layout.css: float:left; width:48% */
    width: 100% !important;
    float: none !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    opacity: 1 !important;
}

/* Main image viewport — full width */
.vkard-product-gallery-widget .vkard-gallery-active .flex-viewport {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: var(--vkard-radius) !important;
    background: #F1F5F9 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Keep legacy .flexslider selector as fallback. Do not force FlexSlider track widths. */
.vkard-product-gallery-widget .vkard-gallery-active .flexslider {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: var(--vkard-radius) !important;
    overflow: hidden !important;
    background: #F1F5F9 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.vkard-product-gallery-widget .vkard-gallery-active .woocommerce-product-gallery__wrapper {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.vkard-product-gallery-widget .vkard-gallery-active .woocommerce-product-gallery__image a {
    display: block !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: var(--vkard-radius) !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

.vkard-product-gallery-widget .vkard-gallery-active .flex-viewport img,
.vkard-product-gallery-widget .vkard-gallery-active .flexslider .slides img,
.vkard-product-gallery-widget .vkard-gallery-active .woocommerce-product-gallery__image img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    border-radius: calc(var(--vkard-radius) - 4px) !important;
    display: block !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: top !important;
}

/* Thumbnail strip — horizontal row below */
.vkard-product-gallery-widget .vkard-gallery-active .flex-control-thumbs {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 10px !important;
    list-style: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    order: 2 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.vkard-product-gallery-widget .vkard-gallery-active .flex-control-thumbs li {
    width: 96px !important;
    height: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    display: block !important;
    flex-shrink: 0 !important;
    list-style: none !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.vkard-product-gallery-widget .vkard-gallery-active .flex-control-thumbs li img {
    width: 96px !important;
    height: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
    min-height: 96px !important;
    max-height: 96px !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: var(--vkard-radius) !important;
    border: 2px solid #E2E8F0 !important;
    transition: border-color 0.18s !important;
    cursor: pointer !important;
    display: block !important;
    background: #F8FAFC !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    vertical-align: top !important;
}

.vkard-product-gallery-widget .vkard-gallery-active .flex-control-thumbs li img.flex-active,
.vkard-product-gallery-widget .vkard-gallery-active .flex-control-thumbs li img:hover {
    border-color: var(--vkard-blue) !important;
    border-width: 2px !important;
}

/* Theme/plugin fallback: Owl Carousel product gallery markup */
.vkard-product-gallery-widget .vkard-gallery-owl-active .woocommerce-product-gallery__wrapper,
.vkard-product-gallery-widget .vkard-gallery-owl-active .product-images,
.vkard-product-gallery-widget .vkard-gallery-owl-active .product-image-slider,
.vkard-product-gallery-widget .vkard-gallery-owl-active .product-image-slider.owl-carousel,
.vkard-product-gallery-widget .vkard-gallery-owl-active .product-image-slider .owl-stage-outer {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: var(--vkard-radius) !important;
    background: #F1F5F9 !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

.vkard-product-gallery-widget .vkard-gallery-owl-active .product-image-slider .owl-stage {
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: #F1F5F9 !important;
    box-shadow: none !important;
}

.vkard-product-gallery-widget .vkard-gallery-owl-active .product-image-slider .owl-item {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: var(--vkard-radius) !important;
    background: #F1F5F9 !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

.vkard-product-gallery-widget .vkard-gallery-owl-active .product-image-slider .img-thumbnail,
.vkard-product-gallery-widget .vkard-gallery-owl-active .product-image-slider .img-thumbnail .inner {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: var(--vkard-radius) !important;
    background: #F1F5F9 !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

.vkard-product-gallery-widget .vkard-gallery-owl-active .product-image-slider img,
.vkard-product-gallery-widget .vkard-gallery-owl-active .product-image-slider img.img-responsive,
.vkard-product-gallery-widget .vkard-gallery-owl-active .product-image-slider img.wp-post-image,
.vkard-product-gallery-widget .vkard-gallery-owl-active .product-image-slider img.woocommerce-main-image {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: calc(var(--vkard-radius) - 4px) !important;
    background: transparent !important;
    box-shadow: none !important;
    object-fit: contain !important;
    object-position: center center !important;
    opacity: 1 !important;
    vertical-align: top !important;
}

.vkard-product-gallery-widget .vkard-gallery-owl-active .product-thumbnails,
.vkard-product-gallery-widget .vkard-gallery-owl-active .product-thumbs-slider,
.vkard-product-gallery-widget .vkard-gallery-owl-active .product-thumbs-slider.owl-carousel,
.vkard-product-gallery-widget .vkard-gallery-owl-active .product-thumbs-slider .owl-stage-outer,
.vkard-product-gallery-widget .vkard-gallery-owl-active .product-thumbs-slider .owl-stage {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.vkard-product-gallery-widget .vkard-gallery-owl-active .product-thumbs-slider .owl-stage {
    gap: 10px !important;
    transform: none !important;
    width: auto !important;
}

.vkard-product-gallery-widget .vkard-gallery-owl-active .product-thumbs-slider .owl-item {
    display: block !important;
    flex: 0 0 96px !important;
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
    height: 96px !important;
    min-height: 96px !important;
    max-height: 96px !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.vkard-product-gallery-widget .vkard-gallery-owl-active .product-thumbs-slider .img-thumbnail {
    display: block !important;
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
    height: 96px !important;
    min-height: 96px !important;
    max-height: 96px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 2px solid #E2E8F0 !important;
    border-radius: var(--vkard-radius) !important;
    background: #F8FAFC !important;
    box-shadow: none !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition: border-color 0.18s !important;
}

.vkard-product-gallery-widget .vkard-gallery-owl-active .product-thumbs-slider .owl-item.selected .img-thumbnail,
.vkard-product-gallery-widget .vkard-gallery-owl-active .product-thumbs-slider .owl-item.active.selected .img-thumbnail,
.vkard-product-gallery-widget .vkard-gallery-owl-active .product-thumbs-slider .img-thumbnail:hover {
    border-color: var(--vkard-blue) !important;
}

.vkard-product-gallery-widget .vkard-gallery-owl-active .product-thumbs-slider img,
.vkard-product-gallery-widget .vkard-gallery-owl-active .product-thumbs-slider img.img-responsive,
.vkard-product-gallery-widget .vkard-gallery-owl-active .product-thumbs-slider img.woocommerce-main-thumb {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: calc(var(--vkard-radius) - 2px) !important;
    background: transparent !important;
    box-shadow: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    opacity: 1 !important;
    vertical-align: top !important;
}

.vkard-product-gallery-widget .vkard-gallery-owl-active .owl-nav,
.vkard-product-gallery-widget .vkard-gallery-owl-active .owl-dots,
.vkard-product-gallery-widget .vkard-gallery-owl-active .thumb-nav,
.vkard-product-gallery-widget .vkard-gallery-owl-active .thumb-prev,
.vkard-product-gallery-widget .vkard-gallery-owl-active .thumb-next {
    display: none !important;
}

.vkard-product-gallery-widget .vkard-gallery-active .woocommerce-product-gallery__trigger {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 10 !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 999px !important;
    background: #FFFFFF !important;
    border: 0 !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12) !important;
}

/* Hide prev/next arrows */
.vkard-product-gallery-widget .vkard-gallery-active .flex-direction-nav {
    display: none !important;
}

/* Hide WooCommerce sale / promo badge */
.vkard-product-gallery-widget .vkard-gallery-active ~ .onsale,
.vkard-product-gallery-widget .vkard-active .onsale {
    display: none !important;
}

/* =============================================================
   Responsive
   ============================================================= */
@media ( max-width: 480px ) {
    .vkard-product-gallery-widget .vkard-gallery-active.woocommerce-product-gallery {
        flex-direction: column !important;
    }

    .vkard-product-gallery-widget .vkard-gallery-active .flex-control-thumbs {
        flex-direction: row !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
    }

    .vkard-product-gallery-widget .vkard-gallery-active .flex-control-thumbs li {
        flex-shrink: 0 !important;
    }
}